:root {
  --bg: #fdf8f3;
  --surface: #ffffff;
  --surface-warm: #fff2e6;
  --text: #2b2420;
  --muted: #6b5f56;
  --dim: #9a8c7f;
  --line: #ede1d3;
  --accent: #ef6b4d;
  --accent-2: #ffb27a;
  --teal: #2a7f7e;
  --teal-bg: #e6f3f2;
  --radius: 20px;
  --shadow: 0 20px 50px -20px rgba(60, 40, 20, 0.25);
  --shadow-sm: 0 8px 24px -12px rgba(60, 40, 20, 0.22);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img { max-width: 100%; display: block; }

h1, h2, h3 { line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 0.5em; overflow-wrap: break-word; hyphens: auto; }
h1 { font-size: clamp(32px, 5vw, 52px); font-weight: 800; }
h2 { font-size: clamp(24px, 3.4vw, 34px); font-weight: 750; }
h3 { font-size: 20px; font-weight: 700; }
p { margin: 0 0 1em; color: var(--muted); }
.lede { font-size: 20px; color: var(--text); }

/* ---------- layout shell ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 1120px;
  margin: 0 auto;
  padding: 18px 20px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; text-decoration: none; color: var(--text); }
.brand-mark { font-size: 22px; }

.brand { order: 1; }
.main-nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; order: 3; flex-basis: 100%; justify-content: center; }
.nav-link { color: var(--muted); text-decoration: none; font-weight: 650; font-size: 15px; padding: 4px 2px; border-bottom: 2px solid transparent; }
.nav-link:hover { color: var(--text); }
.nav-link[aria-current="page"] { color: var(--teal); border-bottom-color: var(--teal); }
.header-right { display: flex; align-items: center; gap: 12px; order: 2; }
.btn-nav-cta { padding: 9px 18px; font-size: 14px; }

@media (min-width: 760px) {
  .main-nav { order: 2; flex-basis: auto; }
  .header-right { order: 3; }
}

.lang-menu { position: relative; }
.lang-summary {
  list-style: none;
  cursor: pointer;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  box-shadow: var(--shadow-sm);
}
.lang-summary::-webkit-details-marker { display: none; }
.lang-list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 8px;
  display: flex;
  flex-direction: column;
  min-width: 180px;
  z-index: 40;
}
.lang-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 9px;
  text-decoration: none; color: var(--text); font-size: 15px; font-weight: 600;
}
.lang-link:hover { background: var(--surface-warm); }
.lang-link[aria-current="page"] { background: var(--teal-bg); color: var(--teal); }
.lang-flag { font-size: 17px; }

main { max-width: 1120px; margin: 0 auto; padding: 0 20px 80px; }

.site-footer { border-top: 1px solid var(--line); margin-top: 60px; }
.footer-inner {
  max-width: 1120px; margin: 0 auto; padding: 28px 20px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px;
}
.footer-brand { font-weight: 700; text-decoration: none; color: var(--muted); font-size: 14px; }
.footer-copy { color: var(--dim); font-size: 13px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; border-radius: 999px; font-weight: 700; font-size: 16px;
  text-decoration: none; border: none; cursor: pointer;
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 14px 30px -10px rgba(239, 107, 77, 0.55);
}
.btn-quiet {
  background: var(--surface); color: var(--text); border: 1px solid var(--line);
}
.btn-teal { background: var(--teal); color: #fff; }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin: 28px 0; }

/* ---------- hero ---------- */
.hero { padding: 48px 0 24px; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.hero-eyebrow {
  display: inline-block; background: var(--teal-bg); color: var(--teal);
  font-weight: 700; font-size: 13px; padding: 6px 14px; border-radius: 999px; margin-bottom: 14px;
}
/* A grid column never shrinks below its content by default, and the tablet mockup is 460px
   wide, so on a phone the whole hero column was held at 460px and the text ran off the right
   edge (hidden, not scrollable, because body is overflow-x: hidden). min-width: 0 lets the
   column shrink and the mockup's max-width: 100% take over. */
.hero-grid > *, .vital-hero > * { min-width: 0; }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- device mockups ----------
   The controller app runs in landscape as well as portrait, and every screenshot we have is
   landscape (that's the orientation the automation captured), so both frames are landscape
   device shells rather than forcing a portrait phone shape onto a landscape image. */
.mockup-row { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
.mockup-phone, .mockup-tablet {
  position: relative;
  background: #1c1c1e;
  border-radius: 22px;
  padding: 10px 10px 10px 22px;
  box-shadow: var(--shadow);
  max-width: 100%;
}
.mockup-phone { width: 300px; }
.mockup-tablet { width: 460px; border-radius: 26px; padding: 14px 14px 14px 28px; }
.mockup-phone::before, .mockup-tablet::before {
  content: '';
  position: absolute; top: 50%; left: 8px; transform: translateY(-50%);
  width: 8px; height: 46px; background: #000; border-radius: 999px;
}
.mockup-tablet::before { height: 60px; }
.mockup-phone img, .mockup-tablet img {
  width: 100%; border-radius: 12px; display: block;
}
.mockup-tablet img { border-radius: 14px; }
.mockup-caption { text-align: center; font-size: 13px; color: var(--dim); margin-top: 10px; }

/* ---------- feature cards ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 36px 0; }
@media (max-width: 860px) { .feature-grid { grid-template-columns: 1fr; } }
.feature-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow-sm);
}
a.feature-card {
  display: block; text-decoration: none; color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.feature-card .card-link { color: var(--teal); font-weight: 700; font-size: 14px; margin-top: 10px; display: inline-block; }
.feature-icon { font-size: 30px; margin-bottom: 10px; display: block; }

/* ---------- vital pages ---------- */
.vital-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 40px 0; }
@media (max-width: 860px) { .vital-hero { grid-template-columns: minmax(0, 1fr); } }
.vital-detail { margin: 40px 0; }
.vital-detail h2 { margin-top: 40px; }

/* ---------- comparison table ---------- */
.compare-table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15px; }
.compare-table th, .compare-table td {
  border: 1px solid var(--line); padding: 12px 14px; text-align: left; vertical-align: top;
}
.compare-table th { background: var(--surface-warm); font-weight: 700; }
.compare-table td.yes { color: var(--teal); font-weight: 700; }
.compare-table td.no { color: var(--dim); }
.table-scroll { overflow-x: auto; }

/* ---------- about ---------- */
.about-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px; box-shadow: var(--shadow-sm); margin: 24px 0;
}

/* ---------- article / prose ---------- */
.prose { max-width: 720px; }
.prose h2 { margin-top: 40px; }
.prose ul, .prose ol { color: var(--muted); }
.article-meta { color: var(--dim); font-size: 14px; margin-bottom: 20px; }

/* ---------- FAQ + last-updated (added by the build, not by page content) ---------- */
.faq { max-width: 760px; margin: 56px 0 0; }
.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px 22px; margin-bottom: 12px; }
.faq-item h3 { font-size: 18px; margin: 0 0 6px; }
.faq-item p { margin: 0; }
.page-updated { color: var(--dim); font-size: 14px; margin: 40px 0 0; }

/* The comparison table has a column per product, so it scrolls sideways on a phone. The first
   column stays put so the row label is always visible next to the values. */
.compare-table.wide th:first-child, .compare-table.wide td:first-child { position: sticky; left: 0; background: var(--bg); z-index: 1; min-width: 130px; }
.compare-table.wide th, .compare-table.wide td { min-width: 128px; }
.compare-table .ours { background: var(--teal-bg); font-weight: 650; }
.compare-note { font-size: 14px; color: var(--dim); }

/* ---------- photo panel ---------- */
.photo-panel {
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  aspect-ratio: 4 / 3; background: var(--surface-warm);
}
.photo-panel img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 480px) {
  .site-header { padding: 14px 16px; }
  main { padding: 0 16px 60px; }
  /* Four links don't fit one line in most languages ("Vitalparametrar"), and a wrapping flex row
     left the last one alone on a line of its own. Two even rows of two read as deliberate. */
  .main-nav { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 4px 28px; }
  .nav-link { font-size: 14px; text-align: center; }
  .btn { padding: 13px 20px; font-size: 15px; }
}