@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-wght-normal.3100e775e8616cd2611beecfa23a4263d7037586789b43f035236a2e6fbd4c62.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-wght-italic.7291b5970da2237441273c03b424a504b70b18f09791473fab99687dcc314720.woff2') format('woff2');
}

:root {
  --brand: #d04141;
  --brand-dark: #a83333;
  --ink: #1c1c22;
  --ink-soft: #4a4a55;
  --bg-soft: #f5f5f3;
  --bg-card: #ffffff;
  --border: #e5e5e0;
  --max-width: 1180px;
  --radius: 8px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  line-height: 1.55;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); }

/* ---------- Header ---------- */
.site-header {
  background: var(--brand);
  color: #fff;
  position: relative;
  z-index: 60;

  .inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .logo {
    flex: 0 0 auto;
    position: relative;
    z-index: 51;

    img {
      height: 44px;
      width: auto;
      display: block;
    }
  }
}

.nav-link {
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  opacity: 0.92;
  padding: 8px 4px;

  &:hover { opacity: 1; }
  &:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: 4px;
  }
}

.nav-sep {
  display: inline-block;
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.35);
  flex: 0 0 auto;
}

.flag {
  display: block;
  height: 14px;
  width: auto;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.dropdown.lang .trigger .flag {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  box-sizing: content-box;
  box-shadow: none;
  background: #fff;
}

.dropdown.lang .menu .item {
  display: flex;
  align-items: center;
  gap: 10px;

  .flag {
    width: 22px;
    height: 15px;
    flex: 0 0 auto;
  }
}

.mobile-nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  padding: 6px;
  line-height: 0;
  position: relative;
  z-index: 51;

  svg { width: 28px; height: 28px; display: block; }
  .icon-x { display: none; }
}

body.mobile-nav-active {
  overflow: hidden;

  .mobile-nav-toggle {
    .icon-bars { display: none; }
    .icon-x { display: block; }
  }
}

.dropdown {
  position: relative;

  .trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 0;
    color: #fff;
    font: inherit;
    font-weight: 400;
    font-size: 15px;
    padding: 8px 4px;
    cursor: pointer;
    opacity: 0.9;
    line-height: 1;

    &:hover { opacity: 1; }
    &:focus-visible {
      outline: 2px solid #fff;
      outline-offset: 2px;
      border-radius: 4px;
    }

    .caret {
      width: 10px;
      height: 7px;
      transition: transform .15s ease;
    }
  }

  &.is-open .trigger .caret { transform: rotate(180deg); }

  .menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 180px;
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    z-index: 20;
    display: none;
  }

  &.is-open .menu { display: block; }

  /* Compact menu for the language picker */
  &.lang .menu { min-width: 140px; }

  .item {
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--ink);
    text-decoration: none;
    font-size: 14px;
    line-height: 1.3;
    white-space: nowrap;

    &:hover { background: var(--bg-soft); color: var(--brand); }

    &.is-active {
      background: var(--bg-soft);
      color: var(--brand);
      font-weight: 500;
    }
  }
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-left: auto;
}

/* ---------- Buttons (pill-shaped) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  text-decoration: none;
  font-weight: 500;
  line-height: 1.2;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .05s ease, box-shadow .15s ease;
  white-space: nowrap;
  font-size: 15px;
  cursor: pointer;

  &:active { transform: translateY(1px); }
  &:hover .arrow { transform: translateX(3px); }

  .arrow {
    width: 18px;
    height: 12px;
    display: inline-block;
    flex-shrink: 0;
    color: currentColor;
    transition: transform .15s ease;
  }

  .sub {
    display: block;
    font-size: 12px;
    font-weight: 400;
    opacity: 0.9;
    margin-top: 3px;
  }

  &.stacked {
    flex-direction: column;
    gap: 0;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* Primary: white pill on red background */
  &.primary {
    background: #fff;
    color: var(--brand);
    border-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);

    &:hover {
      background: #fff7f7;
      color: var(--brand-dark);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    }
  }

  /* Secondary: outlined pill on red background */
  &.secondary {
    background: transparent;
    color: #fff;
    border-color: #fff;

    &:hover {
      background: rgba(255, 255, 255, 0.12);
      color: #fff;
    }
  }

  &.lg {
    font-size: 17px;
    padding: 15px 30px;
  }
}

/* ---------- Hero (light background, side-by-side) ---------- */
.hero {
  background: #fff;
  color: var(--ink);
  padding: 64px 0 72px;

  .inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
  }

  .media img {
    width: 100%;
    height: 100%;
    max-height: 442px;
    object-fit: cover;
    object-position: 60% 30%;
    border-radius: 14px;
    box-shadow: 0 20px 50px -20px rgba(20, 20, 30, 0.35);
  }

  .content { max-width: 540px; }

  .eyebrow {
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--brand);
    margin: 0 0 16px;
  }

  .title {
    font-size: clamp(2.2rem, 4.6vw, 3.6rem);
    line-height: 1.05;
    font-weight: 700;
    margin: 0 0 20px;
    letter-spacing: -0.01em;
    color: var(--ink);

    .accent { color: var(--brand); }
  }

  .lede {
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    margin: 0 0 16px;
    line-height: 1.55;
    color: var(--ink-soft);
  }

  .cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 16px;
  }

  .fineprint {
    font-size: 0.88rem;
    color: var(--ink-soft);
    margin: 0;
  }

  /* Hero sits on white. Override button colors so the primary CTA pops in brand red
     and the secondary becomes a soft outlined pill rather than white-on-red. */
  .btn.primary {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
    box-shadow: 0 2px 6px rgba(208, 65, 65, 0.28);

    &:hover {
      background: var(--brand-dark);
      border-color: var(--brand-dark);
      color: #fff;
      box-shadow: 0 6px 18px rgba(208, 65, 65, 0.38);
    }
  }

  .btn.secondary {
    background: #fff;
    color: var(--ink);
    border-color: var(--border);

    &:hover {
      border-color: var(--brand);
      color: var(--brand);
      background: #fff;
    }
  }
}

/* ---------- Section title ---------- */
.section-title {
  text-align: center;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  margin: 0 0 32px;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0;
}

/* ---------- Featured testimonial band ---------- */
.testimonial-band {
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 38px 0;
  margin-bottom: 64px;
  overflow: visible;

  .inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 56px;
    min-height: 200px;
  }

  /* Sized by height so differently-posed cutouts share an apparent
     size. 395px keeps Rune (the hero) pixel-identical to the old
     width:324px rendering. */
  .photo {
    height: 395px;
    width: auto;
    max-width: none;
    flex: none;
    align-self: flex-end;
    margin: -88px 0 -78px;
    filter: drop-shadow(0 22px 30px rgba(20, 20, 30, 0.28));
  }

  .text {
    flex: 1 1 auto;
    min-width: 0;
  }

  .quote {
    position: relative;
    margin: 0 0 18px;
    font-size: clamp(1.25rem, 1.9vw, 23.446px);
    line-height: 1.4;
    font-weight: 500;
    color: var(--ink);
    font-style: italic;
    text-wrap: pretty;

    &::before {
      content: "\201C";
      position: absolute;
      right: 100%;
      top: 0;
      padding-right: 0.08em;
    }
    &::after { content: "\201D"; }
  }

  .who {
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--ink);
    line-height: 1.3;
  }
  .role,
  .place {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--ink-soft);
    line-height: 1.3;
  }
  .role { margin-top: 3px; }
  .place { margin-top: 1px; }

  .org {
    flex: none;
    max-height: 130px;
    max-width: 160px;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0.95;
  }

  /* single person + logo, but the photo is a real (non-cutout) photo:
     rounded corners, no bleed. Same box/markup as the hero otherwise. */
  &.framed {
    margin-top: 24px;
    margin-bottom: 0;

    .photo {
      height: 340px;
      width: auto;
      align-self: center;
      margin: 0;
      border-radius: 16px;
      filter: none;
      box-shadow:
        0 2px 4px rgba(20, 20, 30, 0.04),
        0 14px 28px rgba(20, 20, 30, 0.10),
        0 30px 60px rgba(20, 20, 30, 0.10);
    }

    @media (max-width: 880px) {
      .photo {
        height: 260px;
        width: auto;
        margin: 0;
      }
    }
  }

  /* two people flanking the quote, each with their name/title directly
     under their own head (keeps photos narrow). DOM order is
     cite-0, cite-1, quote — reordered with flex `order`. */
  &.twin {
    margin-top: 24px;
    margin-bottom: 0;

    .inner { gap: 0; }

    .cite {
      flex: none;
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: left;
      gap: 12px;
    }
    .cite-0 { order: 0; }
    .cite-1 { order: 2; }
    .quote  { order: 1; flex: 1 1 auto; margin-left: 48px; }

    /* shrink the cutouts (no bleed here — caption sits under them) */
    .cite .photo {
      height: 237px;
      width: auto;
      max-width: none;
      margin: 0;
      align-self: auto;
    }

    /* mid regime: quote full-width on top, the two people side by side */
    @media (max-width: 880px) {
      .inner {
        flex-flow: row wrap;
        justify-content: center;
        align-items: flex-start;
        gap: 28px 40px;
      }
      .quote  { order: 0; flex: 1 1 100%; margin-left: 0; }
      .cite-0 { order: 1; }
      .cite-1 { order: 2; }
      .cite .photo {
        height: 176px;
        width: auto;
        order: 0;
        margin: 0;
      }
    }

    /* narrow: fully stacked — quote, photo1, credit1, photo2, credit2 */
    @media (max-width: 600px) {
      .inner {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
      }
      .cite { flex: 1 1 auto; }
    }
  }
}

/* ---------- Feature blocks ---------- */
.feature {
  padding: 64px 0 80px;
  overflow-x: clip; /* the .bleed photo would otherwise widen the page below ~1200px */

  & + & {
    border-top: 1px solid var(--border);
  }

  .inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
  }

  .feature-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 64px;
    align-items: center;
  }

  &.reverse .feature-grid {
    direction: rtl;
  }
  &.reverse .feature-grid > * {
    direction: ltr;
  }

  .feature-media {
    position: relative;
    display: flex;
    justify-content: center;
  }

  /* device — image already includes its own bezel (e.g. tablet frame) */
  .feature-media img.device {
    max-height: 600px;
    width: auto;
    filter: drop-shadow(0 30px 50px rgba(20, 20, 30, 0.18))
            drop-shadow(0 8px 14px rgba(20, 20, 30, 0.08));
  }

  /* clean / tilted screenshot */
  .feature-media .screenshot {
    max-width: 100%;
    width: 100%;
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow:
      0 2px 4px rgba(20, 20, 30, 0.04),
      0 14px 28px rgba(20, 20, 30, 0.10),
      0 30px 60px rgba(20, 20, 30, 0.10);
    background: #fff;
    display: block;
    transition: transform .4s cubic-bezier(.2,.7,.2,1);
  }

  .feature-media.tilted {
    perspective: 1800px;
    perspective-origin: 50% 50%;
  }
  .feature-media.tilted .screenshot {
    transform: rotateY(-7deg) rotateX(2deg);
    box-shadow:
      0 2px 4px rgba(20, 20, 30, 0.04),
      0 20px 40px rgba(20, 20, 30, 0.14),
      0 40px 80px rgba(20, 20, 30, 0.10);
  }
  &.reverse .feature-media.tilted .screenshot {
    transform: rotateY(7deg) rotateX(2deg);
  }
  .feature-media.tilted .screenshot:hover {
    transform: rotateY(0) rotateX(0);
  }

  /* phone — wrap a portrait screenshot in an iPhone bezel */
  .feature-media .phone-wrap {
    position: relative;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 600 / 1136;
    background: url("/images/features/iphone-frame.7cc04f763a2dbc03aebf365d47ff60eafdc1188eb9f8a11db4095941277a5cfb.webp") center/contain no-repeat;
    filter: drop-shadow(0 30px 50px rgba(20, 20, 30, 0.20))
            drop-shadow(0 8px 14px rgba(20, 20, 30, 0.10));
  }
  .feature-media .phone-wrap .screen {
    position: absolute;
    top: 6.51%;
    left: 6.17%;
    right: 6.5%;
    bottom: 2.82%;
    overflow: hidden;
    background: #fff;
    border-radius: 26px;
  }
  .feature-media .phone-wrap .screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }

  /* photo — real photograph, soft elevation, no border */
  .feature-media .photo-media {
    width: 100%;
    border-radius: 12px;
    box-shadow:
      0 2px 4px rgba(20, 20, 30, 0.04),
      0 14px 28px rgba(20, 20, 30, 0.10),
      0 30px 60px rgba(20, 20, 30, 0.10);
    display: block;
  }

  /* copy column */
  .feature-copy {
    .eyebrow {
      text-transform: uppercase;
      letter-spacing: 0.16em;
      font-weight: 600;
      font-size: 13px;
      color: var(--brand);
      margin: 0;
    }

    h3 {
      font-size: clamp(1.8rem, 3.2vw, 2.6rem);
      line-height: 1.08;
      margin: 14px 0 20px;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--ink);
      text-wrap: balance;

      .accent { color: var(--brand-dark); }
    }

    p.body {
      font-size: 1.05rem;
      line-height: 1.6;
      color: var(--ink-soft);
      margin: 0 0 24px;
      max-width: 460px;
    }

    p.caption {
      font-size: 0.9rem;
      font-style: italic;
      color: var(--ink-soft);
      margin: -12px 0 24px;
    }
  }

  .feature-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--brand);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    border-bottom: 1.5px solid transparent;
    padding-bottom: 2px;
    transition: gap .12s ease, border-color .12s ease;

    &:hover {
      gap: 12px;
      border-bottom-color: var(--brand);
    }

    .arrow {
      width: 16px;
      height: 11px;
    }
  }

  /* integrated testimonial inside the copy column */
  .testimonial-quote {
    container-type: inline-size;
    margin: 32px 0 0;
    padding: 4px 0 4px 24px;
    border-left: 3px solid var(--brand);
    max-width: 540px;

    blockquote {
      margin: 0 0 20px;
      font-style: italic;
      font-size: 1.1rem;
      line-height: 1.5;
      color: var(--ink);
      text-wrap: pretty;

      &::before { content: "\201C"; }
      &::after  { content: "\201D"; }
    }

    figcaption {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 24px;
    }

    .people {
      display: flex;
      flex-direction: column;
      gap: 14px;
      flex: 1 1 280px;
      min-width: 280px;
    }

    .person {
      display: flex;
      align-items: center;
      gap: 14px;

      img {
        width: 115px;
        height: 115px;
        border-radius: 50%;
        object-fit: cover;
        flex: none;
        border: 2px solid var(--border);
      }

      .who {
        font-weight: 600;
        font-size: 0.95rem;
        color: var(--ink);
        line-height: 1.3;
      }
      .role,
      .place {
        font-size: 0.85rem;
        color: var(--ink-soft);
        line-height: 1.3;
      }
      .role { margin-top: 2px; }
    }

    .logos {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 20px;
      flex: 0 0 auto;

      img {
        width: 110px;
        height: 110px;
        object-fit: contain;
        opacity: 0.95;
      }
      img[alt="Yara"] {
        width: 80px;
        height: 80px;
      }
    }

    @container (max-width: 413px) {
      .logos {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
      }
    }
  }

}

@media (max-width: 880px) {
  .testimonial-band {
    padding: 26px 0;
    margin-bottom: 40px;

    .inner {
      flex-wrap: wrap;
      justify-content: center;
      gap: 24px;
      text-align: center;
    }

    .text { flex: 1 1 100%; order: 2; text-align: left; }

    .quote::before {
      position: static;
      padding-right: 0;
    }

    .photo {
      width: 216px;
      height: auto;
      max-height: 288px;
      order: 1;
      margin: -24px 0 0;
    }
    .org   { max-height: 80px; max-width: 120px; order: 3; }
  }
  .feature {
    padding: 56px 0;

    .feature-grid {
      grid-template-columns: 1fr;
      gap: 32px;
    }

    /* on mobile, drop the tilt and let the phone frame be smaller */
    .feature-media.tilted .screenshot {
      transform: none;
    }
    .feature-media .phone-wrap {
      max-width: 260px;
    }
  }
}

/* one-off: let the office photo bleed past the column on desktop */
@media (min-width: 881px) {
  .feature .feature-media .photo-media.bleed {
    width: calc(100% + 30%);
    max-width: none;
    margin-left: -10%;
    margin-right: -20%;
  }
}

/* ---------- Pricing page ---------- */
.pricing {
  padding: 60px 0;
  overflow: hidden; /* clip the .band so it doesn't create horizontal scroll */

  .inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 20px;
  }

  h1 {
    font-size: clamp(2.2rem, 4.6vw, 3.4rem);
    line-height: 1.05;
    font-weight: 700;
    margin: 6px 0 28px;
    letter-spacing: -0.01em;
    color: var(--ink);
  }

  h2 {
    font-size: clamp(1.3rem, 2vw, 1.5rem);
    line-height: 1.25;
    margin: 0 0 16px;
    font-weight: 600;
    color: var(--ink);
  }

  .eyebrow {
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--brand);
    margin: 0;
  }

  p { color: var(--ink-soft); margin: 0 0 16px; line-height: 1.6; }
  p strong { color: var(--ink); }

  .pricing-copy {
    flex: 1 1 400px;
    max-width: 600px;
    padding: 20px 0;
    min-width: 0;
  }
}

.pricing-tabs {
  display: flex;
  gap: 8px;
  margin: 0 0 28px;
  flex-wrap: wrap;
}

.pricing-tab {
  padding: 10px 20px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;

  &:hover {
    border-color: var(--brand);
    color: var(--brand);
  }

  &.is-active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
  }
}

.pricing-panel {
  display: none;

  &.is-active { display: block; }

  .calc-prompt { margin-top: 8px; }
}

.calculator {
  --calc-accent: #1a7a5a;
  margin: 8px 0 24px;

  input {
    width: 100%;
    max-width: 320px;
    padding: 12px 16px;
    font: inherit;
    font-size: 1.05rem;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;

    &::placeholder { color: #999; }

    &:focus {
      outline: none;
      border-color: var(--calc-accent);
      box-shadow: 0 0 0 3px rgba(26, 122, 90, 0.15);
    }
  }

  .result {
    margin-top: 18px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-left: 4px solid var(--calc-accent);
    border-radius: 8px;
    max-width: 460px;
  }

  .label {
    display: block;
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 8px;
  }

  .monthly .amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--calc-accent);
  }

  .yearly {
    margin-top: 4px;

    .amount {
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--calc-accent);
    }
  }

  .note {
    display: block;
    font-size: 0.85rem;
    color: #888;
    margin-top: 8px;
  }
}

.bullets {
  list-style: none;
  padding: 0;
  margin: 18px 0 24px;

  li {
    padding: 6px 0 6px 1.8em;
    position: relative;
    color: var(--ink);

    &::before {
      content: "✓";
      position: absolute;
      left: 0;
      color: var(--brand);
      font-weight: 700;
    }
  }
}

.pricing-media {
  flex: 1 1 450px;
  min-width: 450px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;

  .band {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 3%;
    right: -2000px;
    height: 320px;
    background: linear-gradient(to right, var(--brand-dark) 0%, var(--brand) 30%);
    border-radius: 160px 0 0 160px;
    z-index: 0;
  }

  .roughpad {
    display: block;
    position: relative;
    z-index: 1;
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 1200px) {
  .pricing-media {
    .roughpad { max-width: 80%; }
    .band { height: 265px; border-radius: 133px 0 0 133px; }
  }
}

@media (max-width: 880px) {
  .pricing {
    padding: 40px 0 56px;

    .inner {
      flex-direction: column;
      padding: 0 20px;
      gap: 0;
    }
  }
  .pricing-media {
    flex-basis: auto;
    min-width: 0;
    width: 100%;
    height: 320px;
  }
}

/* ---------- Footer ---------- */
/* ---------- About ---------- */
.about {
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  padding: 80px 0;

  .inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 64px;
    align-items: start;
  }

  .eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 600;
    font-size: 13px;
    color: var(--brand);
    margin: 0;
  }

  h2 {
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    line-height: 1.05;
    margin: 12px 0 0;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-wrap: balance;

    .accent { color: var(--brand); }
  }

  .about-body {
    p {
      font-size: 1.05rem;
      line-height: 1.65;
      color: var(--ink-soft);
      margin: 0 0 28px;
      max-width: 540px;
    }
  }

  .contact-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  .contact-btn {
    background: #fff;
    color: var(--brand);
    border-color: var(--brand);
    gap: 10px;
    box-shadow: 0 2px 6px rgba(208, 65, 65, 0.12);

    .icon {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
    }

    &:hover {
      background: var(--brand);
      color: #fff;
      border-color: var(--brand);
      box-shadow: 0 6px 18px rgba(208, 65, 65, 0.28);
    }
  }
}

.site-footer {
  background: var(--brand);
  color: #fff;
  padding: 24px 0;

  .inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
  }

  .logo {
    height: 28px;
    width: auto;
  }

  a { color: #fff; }

  .org {
    margin: 0;
    font-size: 0.85rem;
    opacity: 0.9;
  }

  .links {
    margin: 0;
    font-size: 0.85rem;
    display: flex;
    gap: 20px;

    a {
      opacity: 0.9;
      text-decoration: none;
      &:hover { opacity: 1; text-decoration: underline; }
    }
  }

  @media (max-width: 720px) {
    .org {
      .sep { display: none; }
      .line { display: block; }
    }
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .hero {
    padding: 32px 0 34px;

    .inner {
      grid-template-columns: 1fr;
      gap: 32px;
    }

    .media img { max-height: 252px; }
  }

  .about .inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 720px) {
  .btn.lg { font-size: 16px; padding: 12px 20px; }
}

/* The full desktop nav (with the Norwegian Opplæring link) needs ~1050px; below that
   it wraps and pushes Prøv demo off-screen, so switch to the slide-out menu. */
@media (max-width: 1080px) {
  .mobile-nav-toggle { display: inline-flex; }

  .site-nav {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--brand);
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 88px 24px 32px;
    z-index: 50;
    overflow-y: auto;

    /* In the slide-out menu, the contact link reads as another secondary
       CTA — an outlined pill grouped with the other buttons. */
    .nav-link {
      display: flex;
      width: 100%;
      justify-content: center;
      align-items: center;
      order: 3;
      font-size: 17px;
      font-weight: 500;
      padding: 14px 22px;
      margin-top: 8px;
      color: #fff;
      background: transparent;
      border: 1.5px solid #fff;
      border-radius: 999px;
      text-decoration: none;
      opacity: 1;

      &:hover { background: rgba(255, 255, 255, 0.12); }
    }

    /* …except Log in, which stays an understated text link below the
       CTAs rather than a pill. */
    .nav-login {
      order: 4;
      border: 0;
      border-radius: 0;
      padding: 4px 0;
      margin-top: 12px;
      opacity: 0.85;

      &:hover { background: transparent; opacity: 1; }
    }

    .nav-sep { display: none; }

    .btn {
      width: 100%;
      justify-content: center;
      font-size: 17px;
      padding: 14px 22px;
      margin-top: 8px;
    }
    .btn.secondary { order: 2; }
    .btn.primary { order: 1; }

    /* Language picker: docked at the bottom of the menu, compact and
       de-emphasized — two inline pills below the contact buttons. */
    .dropdown.lang {
      order: 99;
      margin-top: 24px;
      padding-top: 16px;
      border-top: 1px solid rgba(255, 255, 255, 0.18);

      .trigger { display: none; }
      .menu {
        display: flex;
        flex-direction: row;
        gap: 8px;
        position: static;
        background: transparent;
        color: #fff;
        border: 0;
        padding: 0;
        box-shadow: none;
        min-width: 0;
      }
      .item {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        color: rgba(255, 255, 255, 0.8);
        font-size: 14px;
        padding: 10px 12px;
        border: 0;
        border-radius: 6px;

        &:hover {
          background: rgba(255, 255, 255, 0.08);
          color: #fff;
        }
        &.is-active {
          background: rgba(255, 255, 255, 0.14);
          color: #fff;
        }
      }
    }
  }

  body.mobile-nav-active .site-nav { display: flex; }
}

/* ---------- Contact page ---------- */
.contact-page {
  padding: 60px 0 80px;

  .inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 24px;
  }

  h1 {
    font-size: clamp(2rem, 4.2vw, 3rem);
    line-height: 1.05;
    font-weight: 700;
    margin: 0 0 20px;
    letter-spacing: -0.01em;
    color: var(--ink);
  }

  h2 {
    font-size: clamp(1.2rem, 2vw, 1.4rem);
    font-weight: 600;
    margin: 48px 0 16px;
    text-align: center;
    color: var(--ink);
  }

  .lede {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0 0 28px;
  }

  .contact-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
  }

  .contact-btn {
    background: #fff;
    color: var(--brand);
    border-color: var(--brand);
    gap: 10px;

    .icon { width: 20px; height: 20px; flex-shrink: 0; }

    &:hover {
      background: var(--brand);
      color: #fff;
      border-color: var(--brand);
    }
  }

  .calendar-wrap {
    position: relative;
    min-height: 600px;

    .calendar-spinner {
      position: absolute;
      top: 80px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 0;
    }

    .tidycal-embed {
      position: relative;
      z-index: 1;
    }
  }

  .spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }

  @media (max-width: 720px) {
    .calendar-wrap { margin: 0 -24px; }
  }
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Legal pages (privacy, terms, SSA-L) ---------- */
.legal {
  padding: 60px 0 80px;

  .inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
  }

  h1 {
    font-size: clamp(2rem, 4.2vw, 3rem);
    line-height: 1.05;
    font-weight: 700;
    margin: 0 0 28px;
    letter-spacing: -0.01em;
    color: var(--ink);
  }

  h2 {
    font-size: clamp(1.4rem, 2.4vw, 1.8rem);
    font-weight: 700;
    color: var(--ink);
    margin: 48px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    scroll-margin-top: 100px;
  }

  h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--brand);
    margin: 28px 0 8px;
  }

  p {
    color: var(--ink-soft);
    line-height: 1.65;
    margin: 0 0 12px;
  }
  p strong { color: var(--ink); }

  a { color: var(--brand); }

  ul:not(.checklist), ol {
    color: var(--ink-soft);
    line-height: 1.65;
    margin: 0 0 16px;
    padding-left: 1.4em;

    li { margin: 0 0 8px; }
    strong { color: var(--ink); }
  }

  .checklist strong { color: var(--ink); }

  code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9em;
    background: var(--bg-soft);
    border-radius: 4px;
    padding: 1px 5px;
  }

  .table-wrap {
    overflow-x: auto;
    margin: 0 0 24px;
  }

  table {
    width: 100%;
    min-width: 420px;
    border-collapse: collapse;
    font-size: 0.95rem;
  }

  th, td {
    text-align: left;
    vertical-align: top;
    padding: 10px 16px 10px 0;
    border-bottom: 1px solid var(--border);
    line-height: 1.5;
  }

  th {
    color: var(--ink);
    font-weight: 600;
    white-space: nowrap;
  }

  td { color: var(--ink-soft); }

  .terms-nav {
    display: flex;
    gap: 20px;
    margin: 0 0 32px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);

    a {
      font-weight: 600;
      text-decoration: none;
      &:hover { text-decoration: underline; }
    }
  }

  .terms-notice {
    margin: 0 0 28px;
    padding: 14px 18px;
    background: var(--bg-soft);
    border-left: 4px solid var(--brand);
    border-radius: 6px;
    color: var(--ink-soft);
    line-height: 1.6;

    strong { color: var(--ink); }
  }

  .version {
    font-size: 0.9rem;
    color: var(--ink-soft);
    font-weight: 600;
    margin: 0 0 24px;
  }

  .checklist {
    list-style: none;
    padding: 0;
    margin: 20px 0;

    li {
      position: relative;
      padding: 6px 0 12px 2em;
      color: var(--ink-soft);
      line-height: 1.6;

      &::before {
        content: "✓";
        position: absolute;
        left: 0.2em;
        top: 6px;
        color: var(--brand);
        font-weight: 700;
        font-size: 1.1em;
      }
    }
  }

  .download-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0 12px;
  }

  .download-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--brand);
    color: #fff;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: background-color .15s ease;

    .icon { width: 20px; height: 20px; flex-shrink: 0; }

    &:hover { background: var(--brand-dark); color: #fff; }
  }

  .terms-disclaimer {
    font-size: 0.85rem;
    color: var(--ink-soft);
    margin: 8px 0 0;

    a { color: var(--ink-soft); }
  }

  .terms-ssa-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 48px;
    align-items: start;
  }

  .terms-ssa-downloads .download-buttons {
    flex-direction: column;
    align-items: stretch;

    .download-btn { justify-content: flex-start; }
  }

  @media (max-width: 880px) {
    .terms-ssa-layout {
      grid-template-columns: 1fr;
      gap: 24px;
    }
    .terms-ssa-downloads .download-buttons {
      flex-direction: row;
      flex-wrap: wrap;
    }
  }

  @media print {
    .terms-nav,
    .download-buttons { display: none !important; }

    .inner { max-width: 100%; padding: 0; }
    h2 { page-break-before: always; }
    h2:first-of-type { page-break-before: avoid; }
    p, h3, tr { page-break-inside: avoid; }
    .table-wrap { overflow-x: visible; }
    table { min-width: 0; }
  }
}

/* Site chrome is a sibling of .legal, so it cannot be hidden from inside that
   block — nesting would scope the selector to .legal's descendants. */
@media print {
  body:has(.legal) {
    .site-header,
    .site-footer { display: none !important; }
  }
}

/* ---------- Video: hero demo CTA ---------- */
/* White pill with a brand-red frame + play glyph, sitting beside the primary
   "Prøv demo" button in the hero. */
.hero .btn.video-cta {
  background: #fff;
  color: var(--brand);
  border-color: var(--brand);

  .play {
    width: 24px;
    height: 24px;
    margin-left: -2px;
    flex-shrink: 0;
  }

  &:hover {
    background: #fff7f7;
    border-color: var(--brand-dark);
    color: var(--brand-dark);
  }
}

/* ---------- Video: preview thumbnail (Opplæring) ---------- */
/* A poster with a centred red play button; clicking opens the full-page modal
   below — same player as the hero demo. */
.video-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: none;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background-color: #111;
  background-size: cover;
  background-position: center;
  box-shadow: 0 16px 40px -18px rgba(20, 20, 30, 0.4);

  .play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease, background-color .15s ease;

    svg { width: 34px; height: 34px; }
  }

  &:hover .play-btn {
    background: var(--brand-dark);
    transform: translate(-50%, -50%) scale(1.08);
  }
}

/* ---------- Video: full-screen modal (hero demo + Opplæring) ---------- */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 10, 14, 0.92);

  &.is-open { display: flex; }

  .video-modal-stage {
    width: min(1100px, 100%);
    aspect-ratio: 16 / 9;
    max-height: 100%;
  }

  video, .plyr {
    width: 100%;
    height: 100%;
  }

  .video-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background-color .15s ease;

    svg { width: 24px; height: 24px; }

    &:hover { background: rgba(255, 255, 255, 0.28); }
  }
}

body.video-modal-active { overflow: hidden; }

/* ---------- Opplæring page ---------- */
.opplaering {
  padding: 60px 0 72px;

  .inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
  }

  .head {
    max-width: 640px;
    margin: 0 0 40px;

    .eyebrow {
      font-size: 0.82rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--brand);
      margin: 0 0 12px;
    }

    h1 {
      font-size: clamp(2rem, 4.2vw, 3rem);
      line-height: 1.05;
      font-weight: 700;
      margin: 0 0 14px;
      letter-spacing: -0.01em;
      color: var(--ink);
    }

    .lede {
      font-size: clamp(1.05rem, 1.4vw, 1.2rem);
      color: var(--ink-soft);
      margin: 0;
    }
  }

  .video-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
  }

  .video-card {
    h2 {
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--ink);
      margin: 20px 0 8px;
    }

    p {
      color: var(--ink-soft);
      line-height: 1.6;
      margin: 0;
    }
  }

  @media (max-width: 720px) {
    .video-grid {
      grid-template-columns: 1fr;
      gap: 32px;
    }
  }
}

/* ---------- News ---------- */
.news {
  padding: 60px 0 80px;

  .inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
  }

  > .inner > h1 {
    font-size: clamp(2rem, 4.2vw, 3rem);
    line-height: 1.05;
    font-weight: 700;
    margin: 0 0 40px;
    letter-spacing: -0.01em;
    color: var(--ink);
  }

  .list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 40px;
  }

  .news-head {
    .lead {
      width: 100%;
      aspect-ratio: 1200 / 630;
      object-fit: cover;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      margin: 0 0 16px;
    }

    .date {
      display: block;
      font-size: 0.85rem;
      color: var(--ink-soft);
      margin: 0 0 6px;
    }

    h1, h2 {
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -0.01em;
    }

    h1 {
      font-size: clamp(2rem, 4.2vw, 3rem);
      line-height: 1.05;
      margin: 0 0 16px;
    }

    h2 {
      font-size: 1.25rem;
      line-height: 1.3;
      margin: 0 0 8px;

      a {
        color: inherit;
        text-decoration: none;
        &:hover { color: var(--brand); }
      }
    }

    .summary {
      color: var(--ink-soft);
      line-height: 1.6;
      margin: 0;
    }
  }

  &.article {
    .inner { max-width: 760px; }

    .news-head {
      margin: 0 0 32px;

      .summary { font-size: clamp(1.05rem, 1.4vw, 1.2rem); }
      .lead { margin: 32px 0 0; }
    }

    .body {
      display: flow-root;

      h2 {
        clear: both;
        font-size: clamp(1.4rem, 2.4vw, 1.8rem);
        font-weight: 700;
        color: var(--ink);
        margin: 40px 0 12px;
      }

      h3 {
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--ink);
        margin: 28px 0 8px;
      }

      p, ul, ol {
        color: var(--ink-soft);
        line-height: 1.65;
        margin: 0 0 16px;
      }

      ul, ol { padding-left: 1.4em; }

      /* Screenshots show at their natural size (set by the render hook);
         the frame separates the app's white UI from the page. */
      img {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
        margin: 24px 0;
      }

      /* The bottom margin also spaces the next h2, which loses its own top
         margin when it clears the float. */
      img.narrow {
        float: right;
        width: 50%;
        margin: 0 0 40px 24px;
      }
    }
  }

  @media (max-width: 720px) {
    .list {
      grid-template-columns: 1fr;
      gap: 40px;
    }

    &.article .body {
      img, img.narrow {
        float: none;
        width: 100%;
        margin: 24px 0;
      }
    }
  }
}

/* ---------- Windows download page ---------- */
.windows-download {
  .inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 64px 24px 48px;
  }

  h1 {
    font-size: clamp(2rem, 4.2vw, 2.6rem);
    line-height: 1.15;
    margin: 0 0 16px;
  }

  h1, h2 { color: #2c2c33; }

  .lede {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0 0 32px;
  }

  .download-card {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 24px;
    text-align: center;
    margin-bottom: 40px;
  }

  /* Filled brand CTA on a light background, matching the hero's primary. */
  .download-btn {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
    box-shadow: 0 2px 6px rgba(208, 65, 65, 0.28);
    gap: 10px;

    .icon { width: 20px; height: 20px; flex-shrink: 0; }

    &:hover {
      background: var(--brand-dark);
      border-color: var(--brand-dark);
      color: #fff;
      box-shadow: 0 6px 18px rgba(208, 65, 65, 0.38);
    }
  }

  .download-version {
    margin: 16px 0 4px;
    font-weight: 500;
    color: var(--ink);
    min-height: 1.2em; /* reserve space so the layout doesn't jump when JS fills it */
  }

  .download-req {
    margin: 0;
    font-size: 0.9rem;
    color: var(--ink-soft);
  }

  /* A chapter of its own: divider, eyebrow and a heading on par with the h1. */
  .gps-guide {
    margin: 64px 0 40px;
    padding-top: 56px;
    border-top: 1px solid var(--border);

    h2 {
      font-size: clamp(1.5rem, 2.6vw, 1.85rem);
      line-height: 1.2;
      margin: 0 0 14px;
    }

    > p {
      font-size: 1.1rem;
      line-height: 1.6;
      color: var(--ink-soft);
      margin: 0 0 32px;
    }

    > .eyebrow {
      font-size: 0.82rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--brand);
      margin: 0 0 12px;
    }
  }

  /* Numbered install steps: a gray header card with the badge, screenshots below. */
  .steps {
    list-style: none;
    counter-reset: step;
    padding: 0;
    margin: 0;

    li {
      counter-increment: step;
      margin-bottom: 56px;

      &:last-child { margin-bottom: 0; }

      p {
        position: relative;
        margin: 0;
        padding: 15px 18px 15px 68px;
        background: color-mix(in srgb, var(--ink) 7%, #fff);
        border-radius: var(--radius);
        font-size: 1.1rem;
        font-weight: 500;
        line-height: 1.5;
        color: var(--ink);

        &::before {
          content: counter(step);
          position: absolute;
          left: 22px;
          top: 50%;
          translate: 0 -50%;
          width: 34px;
          height: 34px;
          border-radius: 999px;
          background: var(--brand);
          color: #fff;
          font-weight: 600;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }

    /* A shared backdrop makes dark, light and odd-sized captures read as one set. */
    .screenshot {
      margin: 16px 0 0;
      padding: 24px;
      background: color-mix(in srgb, var(--ink) 3%, #fff);
      border-radius: calc(var(--radius) * 1.5);

      .shot {
        position: relative;
        overflow: hidden;
        margin-inline: auto;
        border-radius: var(--radius);
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.12);

        img {
          display: block;
          max-width: none;
          height: auto;
        }
      }

      .mark {
        position: absolute;
        border: 3px solid var(--brand);
        border-radius: 8px;
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.7);
        pointer-events: none;
      }

      figcaption {
        margin-top: 14px;
        text-align: center;
        font-size: 0.95rem;
        color: var(--ink-soft);
      }
    }
  }

  /* Wide screens: the page widens to the header's width, the download card moves
     beside the intro, and the guide gets one row per step, one column per screenshot. */
  @media (min-width: 1100px) {
    .inner {
      max-width: var(--max-width);
      display: grid;
      grid-template-columns: 1fr 420px;
      grid-template-rows: auto 1fr;
      column-gap: 64px;

      > * { grid-column: 1 / -1; }
      > h1, > .lede { grid-column: 1; max-width: 640px; }
    }

    .download-card {
      grid-column: 2;
      grid-row: 1 / span 2;
      align-self: start;
      margin-bottom: 32px;
    }

    .gps-guide > h2, .gps-guide > p { max-width: 720px; }


    .steps {
      li {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;

        &:has(> .screenshot:nth-of-type(3)) { grid-template-columns: repeat(3, 1fr); }

        p { grid-column: 1 / -1; }
      }

      .screenshot {
        margin: 0;
        display: flex;
        flex-direction: column;

        .shot { margin-block: auto; width: 100%; }
      }
    }
  }

  /* Placeholder until real screenshots are dropped in. */
  .screenshot-ph {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    aspect-ratio: 16 / 9;
    max-width: 460px;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    background: var(--bg-soft);
    color: var(--ink-soft);
    font-size: 0.9rem;

    .icon {
      width: 32px;
      height: 32px;
      opacity: 0.6;
    }
  }
}

/* ---------- GPS trackers page ---------- */
.gps-trackers {
  /* One centered column for everything — prose and product cards share the
     same left/right edges, so the page reads balanced rather than left-heavy. */
  .inner {
    max-width: 860px;
    margin: 0 auto;
    padding: 64px 24px 56px;
  }

  h1 {
    margin: 0 0 16px;
    color: var(--ink);
  }

  h2 {
    font-size: 1.5rem;
    margin: 56px 0 12px;
  }

  p, ul {
    color: var(--ink-soft);
    line-height: 1.6;
    margin: 0 0 14px;
  }

  li { margin-bottom: 4px; }

  /* Smaller, dimmer aside on its own line — under a list item or a spec value. */
  .note {
    display: block;
    margin-top: 4px;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--ink-soft);
    opacity: 0.8;
  }

  li .note { margin-bottom: 10px; }

  /* The two battery devices are alternatives to each other — a matched 2-up
     pair invites the comparison. The vehicle tracker above is a full-width
     lead card instead (.product.lead), so a lone card never looks
     stranded in a grid sized for more. */
  .products {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 3vw, 28px);
    margin-top: 24px;
  }

  .product {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(28, 28, 34, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 26px rgba(28, 28, 34, 0.1);
    }

    /* A lit "plinth" the transparent product photo sits on. The silhouette-
       following drop-shadow (not a box-shadow) gives a real ground shadow. */
    .photo {
      aspect-ratio: 4 / 3;
      display: grid;
      place-items: center;
      padding: 14%;
      overflow: hidden;
      border-bottom: 1px solid var(--border);
      background: linear-gradient(180deg, #f7f7f4 0%, #e9e7e1 100%);
    }

    .photo img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      filter: drop-shadow(0 16px 22px rgba(28, 28, 34, 0.18));
      transition: transform 0.3s ease;
    }

    &:hover .photo img { transform: scale(1.03); }

    .details {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 22px 24px 24px;
    }

    h3 {
      font-size: 1.2rem;
      line-height: 1.25;
      margin: 0 0 6px;
      color: var(--ink);
    }

    dl {
      display: grid;
      grid-template-columns: max-content 1fr;
      gap: 8px 18px;
      margin: 0 0 20px;
      font-size: 0.9rem;
    }

    dt { font-weight: 600; color: var(--ink); }
    dd { margin: 0; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

    /* Price pinned to the card bottom so the pair lines up. Red carries the
       one-off device price only; the subscription is quiet soft text, so the
       one-time vs recurring split is unmistakable. */
    .price {
      margin-top: auto;
      padding-top: 16px;
      border-top: 1px solid var(--border);

      p { margin: 0; }

      .oneoff strong {
        font-size: 1.45rem;
        font-weight: 700;
        color: var(--ink);
        font-variant-numeric: tabular-nums;
      }

      .oneoff span { font-size: 0.9rem; color: var(--ink-soft); }

      .sub {
        margin-top: 6px;

        strong {
          font-size: 1.15rem;
          font-weight: 600;
          color: var(--ink);
          font-variant-numeric: tabular-nums;
        }

        span {
          font-size: 0.9rem;
          color: var(--ink-soft);
        }
      }

      .vat {
        margin-top: 8px;
        font-size: 0.82rem;
        color: var(--ink-soft);
      }
    }
  }

  /* Vehicle tracker: full-width horizontal lead card — photo beside copy.
     (Named .lead, not .feature, to avoid the site's global .feature section
     class, whose padding would otherwise add white bands to this card.)
     Flex so the photo stage reliably stretches to the copy column's height. */
  .product.lead {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    margin-top: 24px;

    .photo {
      flex: 0 0 44%;
      border-bottom: none;
      border-right: 1px solid var(--border);
      aspect-ratio: auto;
      padding: 6%;
    }

    .details { flex: 1; min-width: 0; justify-content: center; padding: 32px; }

    @media (max-width: 720px) {
      flex-direction: column;

      .photo {
        flex-basis: auto;
        border-right: none;
        border-bottom: 1px solid var(--border);
        aspect-ratio: 16 / 9;
      }

      .details { padding: 22px 24px 24px; }
    }
  }

  @media (max-width: 640px) {
    .products { grid-template-columns: 1fr; }
  }

  @media (prefers-reduced-motion: reduce) {
    .product, .product .photo img { transition: none; }
    .product:hover { transform: none; }
    .product:hover .photo img { transform: none; }
  }
}