/* ═════════════════════════════════════════════════════════════════════════════
   iDrive2 marketing site.

   ONE stylesheet serves English and Arabic. Everything directional is written
   with logical properties — margin-inline-start, padding-inline, inset-inline —
   so `dir="rtl"` on <html> mirrors the whole layout with no second stylesheet
   and no `[dir="rtl"]` overrides to keep in sync. A physical `margin-left`
   anywhere in here is a bug.
   ═════════════════════════════════════════════════════════════════════════════ */

:root {
  --navy: #1a3c6e;
  --navy-dark: #12294c;
  --accent: #f0a500;
  /* Sampled from the app's own buttons (#3e78b4 in the screenshots).
     White on it measures 4.7:1, which clears AA for normal text — but
     only just, so do not lighten it without re-checking. */
  --cta: #3e77b4;
  --cta-dark: #33678f;
  --ink: #1f2933;
  --muted: #5a6572;
  --line: #e4e8ee;
  --bg-soft: #f6f8fb;
  --radius: 14px;
  --max: 1080px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  color: var(--ink);
  line-height: 1.65;
  background: #fff;
}

/* Arabic reads better a touch larger at the same nominal size, and the system
   Arabic faces have a smaller x-height than the Latin ones. */
html[lang="ar"] body {
  font-size: 1.05rem;
  line-height: 1.85;
}

img {
  max-width: 100%;
  height: auto;
}

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

.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: 20px;
}

/* ── Skip link ──────────────────────────────────────────────────────────────
   Visible only when focused. A keyboard user should not have to tab through
   the whole header on every page. */
.skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  background: var(--navy);
  color: #fff;
  padding: 10px 16px;
  z-index: 100;
}
.skip:focus {
  inset-inline-start: 0;
}

/* ── Header ─────────────────────────────────────────────────────────────── */

header.site {
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  z-index: 20;
}

header.site .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: var(--navy);
  text-decoration: none;
  font-size: 1.15rem;
}

.brand img {
  width: 34px;
  height: 34px;
}

nav.site a {
  margin-inline-start: 18px;
  text-decoration: none;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.93rem;
}

nav.site a:hover {
  color: var(--navy);
}

.lang-switch {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 14px;
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--navy);
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

/* ── Hero carousel ──────────────────────────────────────────────────────────
   Light, not the old navy slab: the three slides are busy enough that a dark
   ground would fight the cards sitting on it.

   NOTHING HERE IS DIRECTIONAL. The one thing that genuinely differs between
   English and Arabic is which chevron points "back", and that is handled by
   flipping the two arrow buttons in the [dir="rtl"] rule at the end of this
   block — not by a second layout.

   Before the script runs, `.hero` has no `.is-live` class and every slide is
   visible and stacked. All the hiding lives behind `.is-live`, so a parse
   error in the script leaves a readable page rather than a blank one. */

.hero {
  background:
    radial-gradient(90rem 40rem at 85% -10%, #eaf1fb 0%, rgba(234, 241, 251, 0) 60%),
    linear-gradient(180deg, #fbfcfe 0%, #f4f7fc 100%);
  color: var(--ink);
  padding-block: 40px 28px;
  overflow: clip;
}

.hero-slide {
  padding-block: 20px;
}

.hero.is-live .hero-track {
  display: grid;
}

/* Stacked in the same cell so the tallest slide sets the height and the others
   do not make the page jump as you page through them.

   WHICH MEANS EVERY SLIDE IS AS TALL AS THE TALLEST, so the short ones must
   centre their content rather than sit at the top of a cell sized by someone
   else. Without `align-content`, slides 1 and 3 rendered their content at the
   top and left ~500px of blank gradient underneath — which read as a broken
   page rather than as a deliberately airy one.

   Only under `.is-live`: without the script the slides are stacked normally,
   each sized by its own content, and there is nothing to centre against. */
.hero.is-live .hero-slide {
  grid-area: 1 / 1;
  display: grid;
  align-content: center;
  visibility: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}

.hero.is-live .hero-slide.is-active {
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .hero.is-live .hero-slide {
    transition: none;
    transform: none;
  }
}

.hero-grid {
  display: grid;
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  /* EVERY COLUMN IS minmax(0, …), NOT A BARE `fr`.

     A bare `1fr` is shorthand for `minmax(auto, 1fr)`, and that `auto` minimum
     is the column's MIN-CONTENT width — so a column whose contents refuse to
     get narrower (the phone, the 560px Businesses pill, a row of four cards)
     quietly takes more than its share and squeezes its neighbour below the
     ratio you wrote.

     That is what happened here: slide 2's `0.8fr 1.2fr` rendered as 296px and
     667px rather than 432/592. The copy column at 296px wrapped the kicker
     over four lines, stacked the headline six deep, and made slide 2 867px
     tall — which, because the slides share one grid cell, forced ~500px of
     empty space onto slides 1 and 3 as well. One wrong minimum, three visible
     bugs.

     `minmax(0, …)` lets the ratio actually hold and makes the contents fit
     the column instead of the other way round. */

  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  /* COPY LEADS ON EVERY SLIDE — see the note in build.py. Slides 2 and 3 get a
     wider second column, because the phone and the four promise cards need
     more room than a video panel does.

     No `order` anywhere: source order and visual order match throughout, so
     tabbing follows what you see. */
  .hero-s2 .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  }

  /* 0.62/1.38 is tuned to the four promise cards: below roughly 150px each
     their two-word titles break mid-word and the body text crowds the edges.
     At this split they land near 160px. */
  .hero-s3 .hero-grid {
    grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  }

  /* Slides 2 and 3 carry noticeably longer headlines than slide 1, and at the
     shared clamp they set the height of the entire carousel — which every
     other slide then has to pad out. Sized down just for them.

     The `max-width` is in `ch` so it tracks the font size: the point is a
     comfortable line length, not a pixel width. */
  .hero-s2 .hero-h,
  .hero-s3 .hero-h {
    font-size: clamp(1.8rem, 3.3vw, 2.5rem);
  }

  .hero-s2 .hero-h { max-width: 19ch; }
  .hero-s3 .hero-h { max-width: 14ch; }

  /* `.hero-s2 .hero-h` (two classes) outranks `html[lang="ar"] .hero-h` (one
     class, one element), so the Arabic widths have to be restated here or the
     English measure silently applies to Arabic too. Wider, for the same reason
     the base rule is: Arabic sets more characters to the line, so the same
     `ch` count reads as a narrower column. */
  html[lang="ar"] .hero-s2 .hero-h { max-width: 23ch; }
  html[lang="ar"] .hero-s3 .hero-h { max-width: 18ch; }
}

/* ── Eyebrow ─────────────────────────────────────────────────────────────── */

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

/* Arabic has no case, so the uppercase transform does nothing there — but the
   wide letter-spacing mangles joined script, so it is removed. */
html[lang="ar"] .hero-eyebrow {
  letter-spacing: 0;
  text-transform: none;
}

.hero-eyebrow::before {
  content: "";
  inline-size: 46px;
  block-size: 4px;
  border-radius: 2px;
  background: var(--accent);
  flex: none;
}

.hero-count {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.hero-count .sep,
.hero-pos .sep {
  margin-inline: 3px;
  color: var(--muted);
  font-weight: 500;
}

.hero-count .tot {
  color: var(--muted);
}

.hero-kicker {
  color: #2f6fd0;
}

/* ── Headline and lede ───────────────────────────────────────────────────── */

.hero-h {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: var(--navy-dark);
  font-weight: 800;
  max-width: 16ch;
}

html[lang="ar"] .hero-h {
  letter-spacing: 0;
  line-height: 1.3;
  max-width: 20ch;
}

.hero-h .accent {
  color: #2f6fd0;
}

.hero-lede {
  font-size: 1.08rem;
  color: var(--muted);
  max-width: 46ch;
  margin: 0 0 26px;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.btn-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 26px;
  block-size: 26px;
  border-radius: 50%;
  border: 2px solid currentColor;
}

.btn-play .ic {
  inline-size: 13px;
  block-size: 13px;
}

.ic {
  inline-size: 18px;
  block-size: 18px;
  flex: none;
}

/* The arrow points along the reading direction in both languages. */
.ic-arrow {
  inline-size: 16px;
  block-size: 16px;
}

html[dir="rtl"] .ic-arrow {
  transform: scaleX(-1);
}

/* ── Slide 1: video placeholder ──────────────────────────────────────────── */

.hero-video {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(26, 60, 110, 0.16);
  background: #fff;
}

.hero-video-face {
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: linear-gradient(170deg, #dde8f6 0%, #c9d8ec 100%);
  color: var(--navy);
}

.hero-video-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 76px;
  block-size: 76px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 8px 24px rgba(18, 41, 76, 0.22);
}

.hero-video-play .ic {
  inline-size: 30px;
  block-size: 30px;
  /* A PLAY TRIANGLE DOES NOT MIRROR IN RTL, and this is the one place in the
     stylesheet where a physical direction is correct.

     Arrows mirror because they mean "forward in the reading order". A play
     glyph does not: it is a transport control, and playback runs left-to-right
     on every timeline in every locale, so an Arabic reader sees a
     right-pointing triangle exactly as an English one does. Mirroring it makes
     it read as REWIND — which is what the first render of this actually did.

     translateX rather than margin-inline-start for the same reason: the optical
     nudge has to stay on the same physical side when the page flips. */
  transform: translateX(2px);
}

.hero-video-label {
  font-weight: 700;
  font-size: 1.15rem;
}

.hero-video-bar {
  padding: 10px 16px;
  background: #12294c;
  color: #c6d4e8;
  font-size: 0.8rem;
  text-align: center;
}

/* ── Slide 2: phone and audience cards ───────────────────────────────────── */

.hero-stage {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  justify-items: center;
}

.phone {
  position: relative;
  inline-size: 170px;
  block-size: 320px;
  border-radius: 28px;
  background: linear-gradient(170deg, #ffffff 0%, #eef3fb 100%);
  border: 8px solid #16233a;
  box-shadow: 0 20px 48px rgba(22, 35, 58, 0.26);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.phone-notch {
  position: absolute;
  inset-block-start: 0;
  inline-size: 74px;
  block-size: 16px;
  border-end-start-radius: 10px;
  border-end-end-radius: 10px;
  background: #16233a;
}

.phone-shot {
  /* Fills the bezel. `object-fit: cover` with a top anchor because the
     screenshot is a full 19.5:9 phone capture and the frame is not: cropping
     from the bottom keeps the status bar and the logo, which are the parts
     that read as "this is the real app". */
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 0;
  border-radius: 20px;
}

/* The badge sits HALF OUT of the card's top edge.
   Done with a negative block-start margin on a grid item rather than absolute
   positioning: `position:absolute; inset-inline-start:50%` would then need a
   translateX to re-centre, and translateX is physical, so it would push the
   badge the wrong way in Arabic. `justify-items:center` mirrors for free. */
.aud {
  display: grid;
  justify-items: center;
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 0 18px 18px;
  inline-size: min(100%, 320px);
  box-shadow: 0 10px 28px rgba(26, 60, 110, 0.08);
}

.aud h3 {
  margin: 10px 0 12px;
  font-size: 1rem;
  color: var(--navy-dark);
}

/* The badge illustrations carry their own colours, so the tile only supplies
   the ground. `.bg-ic` is sized here rather than in the SVG so one rule moves
   all seven. */
.bg-ic {
  inline-size: 30px;
  block-size: 30px;
  flex: none;
}

.aud-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 58px;
  block-size: 58px;
  border-radius: 50%;
  background: #eaf1fb;
  /* Pulls the badge up over the card edge. */
  margin-block-start: -29px;
  border: 5px solid #fff;
  box-sizing: content-box;
}

.aud-g3 .aud-badge {
  background: #fdf3dd;
}

/* THE LIST BLOCK IS CENTRED; THE TEXT INSIDE IT IS NOT.
   This is the fix for the card looking like it had two different alignments
   fighting. The heading centres on the card, so a full-width list under it
   centres on nothing — the eye reads a centred title over a left-shunted
   column and the whole card feels crooked.
   `max-content` shrinks the list to its longest row and `justify-self:center`
   puts that block on the card's centre line, while the rows themselves stay
   start-aligned, because a centred ragged list beside an icon column is its
   own kind of broken. */
.aud ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  inline-size: max-content;
  max-inline-size: 100%;
  justify-self: center;
}

.aud li {
  display: flex;
  /* Top, not centre: a two-line item next to a one-line item would otherwise
     float its icon to the middle of the block and break the icon column. */
  align-items: flex-start;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--muted);
  text-align: start;
}

.aud li .ic {
  /* Nudged onto the first line's optical centre. */
  margin-block-start: 2px;
}

.aud li .ic {
  color: var(--navy);
}

/* ── Slide 2: the three-up strip under the button ────────────────────────── */

/* auto-fit, not a hard three.
   Three fixed columns in this (narrower) half of the slide left each label
   about 100px of text and "Manage your profile and requests" broke over four
   lines. Letting it fall to two-up when cramped keeps every label to two
   lines, which is what makes the row scan. */
.hero-mini {
  display: grid;
  gap: 14px 18px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin-block-start: 28px;
}

.mini {
  display: flex;
  /* Top-aligned for the same reason as the card rows: these labels wrap to
     two and three lines, and centring the icon against each made the row of
     three icons wander up and down. */
  align-items: flex-start;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.35;
}

.mini-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: 50%;
  background: #eaf1fb;
  color: var(--navy);
  flex: none;
}

@media (min-width: 620px) {
  .hero-stage {
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    justify-items: stretch;
    gap: 20px;
  }

  /* ONE ROW, not `1 / span 2`.
     Spanning two rows put the phone in the same cells as the Businesses card
     below it and the two drew on top of each other. The phone belongs beside
     the first pair; the third card sits under all of it. */
  .phone {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  .aud-g1 { grid-column: 1; grid-row: 1; }
  .aud-g2 { grid-column: 3; grid-row: 1; }

  /* Businesses is a WIDE PILL under the other two, with its three points laid
     out across rather than stacked — it is one card doing the work of a row,
     so it gets the row's proportions. */
  .aud-g3 {
    grid-column: 1 / span 3;
    grid-row: 2;
    inline-size: min(100%, 560px);
    /* CENTRED UNDER THE PHONE.
       The card spans all three columns but is narrower than they are, so
       without this it sits flush to the start edge and the block reads as
       left-weighted against the symmetrical row above it. The stage's outer
       columns are both 1fr, so the centre of the span IS the centre of the
       phone — no magic numbers, and it mirrors in RTL for free. */
    justify-self: center;
    border-radius: 28px;
    /* Buys back the 29px the badge is pulled upward by, plus air. Without it
       the badge rides up into the bottom of the phone. */
    margin-block-start: 22px;
  }

  /* The pill's three points sit on an even three-column grid rather than
     shrink-wrapping: at this width `max-content` would size the row to the
     longest item and leave the group floating off-centre under a centred
     heading, which is the same crookedness the cards had. */
  .aud-g3 ul {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    inline-size: 100%;
  }

  .aud-g3 li {
    font-size: 0.84rem;
    /* Each point centres inside its own column, so the row balances under the
       heading instead of bunching toward the start edge. */
    justify-content: center;
  }
}

/* ── Slide 3: the four promises ──────────────────────────────────────────── */

/* Two up, then four across — NOT auto-fit.
   auto-fit with a 150px floor broke to 3 + 1 at the width this column actually
   gets, which reads as a mistake rather than a layout. The four promises are a
   set and want to be seen as one row; `minmax(0, 1fr)` lets them go narrower
   than their content rather than overflowing. */
.promise-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 1150px, NOT the 900px where the hero becomes two columns.

   Between those two widths the promise column is only ~560px, so four cards
   land near 130px each — narrow enough that "Understandable Communication"
   breaks mid-word and the body text crowds the card edges. Measured: they need
   about 150px to hold two-word titles cleanly, which this column does not
   reach until the viewport is around 1150px.

   So the row goes two-up for that range. Two rows of two is a layout; four
   cramped columns is a bug. */
@media (min-width: 1150px) {
  .promise-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.promise {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px 16px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(26, 60, 110, 0.07);
}

/* A CIRCLE, matching the audience badges on slide 2 — a rounded square here
   and a circle there made the two slides look like different products. */
.promise-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 64px;
  block-size: 64px;
  border-radius: 50%;
  background: #eaf1fb;
  margin-block-end: 14px;
}

.promise-badge .bg-ic {
  inline-size: 34px;
  block-size: 34px;
}

.promise h3 {
  margin: 0 0 6px;
  font-size: 0.98rem;
  color: var(--navy-dark);
  line-height: 1.3;
}

.promise p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ── Controls ────────────────────────────────────────────────────────────── */

.hero-nav {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-block-start: 26px;
  margin-inline: auto;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(26, 60, 110, 0.08);
}

/* The bar centres itself; the wrap around it is full width. */
.hero .wrap:has(.hero-nav) {
  display: flex;
  justify-content: center;
}

.hero-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy);
  cursor: pointer;
}

.hero-arrow:hover {
  border-color: var(--navy);
}

/* In Arabic "previous" is the chevron pointing right. One transform rather
   than a second set of glyphs in the template. */
html[dir="rtl"] .hero-arrow .ic {
  transform: scaleX(-1);
}

.hero-dots {
  display: inline-flex;
  gap: 8px;
}

.hero-dot {
  inline-size: 10px;
  block-size: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #cdd7e5;
  cursor: pointer;
}

.hero-dot.is-on {
  background: var(--accent);
}

.hero-pos {
  font-size: 0.85rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.hero-pos b {
  color: var(--ink);
}

.hero-arrow:focus-visible,
.hero-dot:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Visually hidden but read aloud — the slide-change announcement. */
.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
}

.btn-primary {
  background: var(--accent);
  color: #23282e;
}

.btn-ghost {
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}

/* ── Sections ───────────────────────────────────────────────────────────── */

section {
  padding-block: 64px;
}

section.soft {
  background: var(--bg-soft);
}

h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 0 0 12px;
  color: var(--navy);
}

.section-lede {
  color: var(--muted);
  max-width: 62ch;
  margin: 0 0 34px;
}

.grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}

.card h3 {
  margin: 0 0 8px;
  font-size: 1.1rem;
  color: var(--navy);
}

.card p {
  margin: 0;
  color: var(--muted);
}

.step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-weight: 800;
  margin-bottom: 12px;
}

/* ── FAQ ─────────────────────────────────────────────────────────────────
   The FAQ's own styles live with the rest of section 09, further down. This
   block used to hold a second, text-based +/- drawn with summary::after.
   When the section was rebuilt with an SVG toggle the old rule was left
   behind, so every question rendered TWO markers that both tracked [open] —
   which read as a rendering glitch rather than a leftover, and cost an hour.

   The lesson is in the shape, not the rule: replacing a component means
   deleting what it replaced in the same change. `details.faq p` also outranked
   the new `.faq > p` on specificity, which would have bitten later. */

/* ── Footer ─────────────────────────────────────────────────────────────── */

footer.site {
  background: var(--navy-dark);
  color: #c7d3e4;
  padding-block: 44px 34px;
  font-size: 0.92rem;
}

footer.site a {
  color: #fff;
  text-decoration: none;
}

footer.site a:hover {
  text-decoration: underline;
}

.foot-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: 28px;
}

.foot-grid h4 {
  color: #fff;
  margin: 0 0 10px;
  font-size: 0.95rem;
}

.foot-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.foot-grid li {
  margin-bottom: 6px;
}

.foot-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

/* ── Policy pages ───────────────────────────────────────────────────────── */

article.policy {
  max-width: 78ch;
  margin-inline: auto;
}

article.policy h1 {
  color: var(--navy);
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  margin-bottom: 6px;
}

article.policy h2 {
  font-size: 1.25rem;
  margin-top: 36px;
}

article.policy h3 {
  font-size: 1.05rem;
  margin-top: 26px;
  color: var(--navy-dark);
}

article.policy blockquote {
  margin: 0 0 26px;
  padding: 12px 18px;
  background: var(--bg-soft);
  border-inline-start: 3px solid var(--accent);
  color: var(--muted);
  font-size: 0.9rem;
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* Mirrors with the text, because the radius is physical and would otherwise
   sit on the wrong corners in Arabic. */
html[dir="rtl"] article.policy blockquote {
  border-radius: var(--radius) 0 0 var(--radius);
}

article.policy table {
  width: 100%;
  border-collapse: collapse;
  margin-block: 18px;
  font-size: 0.92rem;
}

article.policy th,
article.policy td {
  border: 1px solid var(--line);
  padding: 8px 10px;
  text-align: start;
}

article.policy th {
  background: var(--bg-soft);
}

.policy-index {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.policy-index a {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  text-decoration: none;
  font-weight: 600;
}

.policy-index a:hover {
  border-color: var(--navy);
}

/* ── Print ──────────────────────────────────────────────────────────────── */

@media print {
  header.site,
  footer.site,
  .skip {
    display: none;
  }

  body {
    font-size: 11pt;
  }
}

/* ═════════════════════════════════════════════════════════════════════════════
   "Explore iDrive2 your way" — the three-audience accordion

   Same rule as everywhere else in this file: logical properties only, so RTL
   mirrors without a second stylesheet.
   ═════════════════════════════════════════════════════════════════════════ */

.ex-eyebrow {
  margin-block-end: 6px;
}

.ex-title {
  font-size: clamp(1.9rem, 4vw, 3rem);
  letter-spacing: -0.02em;
  color: var(--navy-dark);
  font-weight: 800;
  margin: 0 0 8px;
}

html[lang="ar"] .ex-title {
  letter-spacing: 0;
}

.ex-list {
  display: grid;
  gap: 16px;
  margin-block-start: 28px;
}

/* ── The collapsed row ────────────────────────────────────────────────────── */

.ex {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(26, 60, 110, 0.06);
  overflow: hidden;
}

.ex[open] {
  box-shadow: 0 16px 44px rgba(26, 60, 110, 0.1);
}

.ex-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  cursor: pointer;
  list-style: none;
}

/* Safari still paints its own disclosure triangle without this. */
.ex-head::-webkit-details-marker {
  display: none;
}

.ex-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 52px;
  block-size: 52px;
  border-radius: 16px;
  background: #eaf1fb;
  color: var(--navy-dark);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  align-self: start;
}

.ex-headings {
  display: grid;
  gap: 4px;
  min-inline-size: 0;
}

.ex-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
}

html[lang="ar"] .ex-kicker {
  letter-spacing: 0;
  text-transform: none;
}

.ex-h {
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
  font-weight: 800;
  color: var(--navy-dark);
  line-height: 1.15;
}

.ex-p {
  color: var(--muted);
  font-size: 0.95rem;
  max-inline-size: 52ch;
}

.ex-art {
  display: none;
}

.ex-art svg,
.ex-shot {
  inline-size: 100%;
  block-size: auto;
}

/* A screenshot needs the framing the drawn art had built in: the SVGs carried
   their own rounded card, these are flat captures. */
.ex-shot {
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(26, 60, 110, 0.12);
}

@media (min-width: 900px) {
  .ex-head {
    grid-template-columns: auto 1fr minmax(180px, 300px) auto;
  }

  .ex-art {
    display: block;
    align-self: center;
  }
}

.ex-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  color: var(--navy);
  align-self: start;
  flex: none;
}

.ex[open] .ex-toggle {
  border-color: var(--navy);
}

/* The +/- is ONE icon: a bar, plus a stem that is hidden when open.
   See toggle_icon() in build.py for why it is not two elements. */
.pm-v {
  transition: opacity .15s ease;
}

[open] > summary .pm-v,
[open] > .ex-head .pm-v {
  opacity: 0;
}

.ex-head:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

/* ── The expanded body ────────────────────────────────────────────────────── */

.ex-body {
  padding: 0 24px 24px;
  display: grid;
  gap: 18px;
}

.jpanel {
  background: var(--bg-soft);
  border-radius: 20px;
  padding: 24px;
}

.jh {
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  font-weight: 800;
  color: var(--navy-dark);
  line-height: 1.15;
  margin: 0 0 8px;
}

.jh .accent {
  color: #2f6fd0;
}

.jp {
  color: var(--muted);
  margin: 0 0 18px;
  max-inline-size: 62ch;
}

.jp-lead {
  font-size: 1.1rem;
  color: var(--ink);
}

.jnote {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 10px 0 18px;
}

.jhead {
  display: grid;
  gap: 14px;
  margin-block-end: 6px;
}

@media (min-width: 900px) {
  .jhead {
    grid-template-columns: 1.4fr 1fr;
    align-items: start;
    gap: 36px;
  }
}

.jaside {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0;
}

/* ── Journey steps ────────────────────────────────────────────────────────── */

.jsteps {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  counter-reset: none;
}

.jstep {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  position: relative;
}

.jstep-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: 50%;
  background: #eaf1fb;
  color: var(--navy-dark);
  font-weight: 700;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  margin-block-end: 10px;
}

.jstep:first-child .jstep-no {
  background: var(--navy);
  color: #fff;
}

.jstep h4 {
  margin: 0 0 6px;
  font-size: 1rem;
  color: var(--navy-dark);
}

.jstep p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
}

/* ── The three-up flow strip ──────────────────────────────────────────────── */

.flow {
  list-style: none;
  margin: 0 0 18px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.flow-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.flow-step b {
  display: block;
  font-size: 0.92rem;
  color: var(--navy-dark);
}

.flow-step span span {
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
}

.flow-ic,
.why-ic,
.value-ic,
.rstep-ic,
.icard-av,
.enq-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eaf1fb;
  color: var(--navy);
  flex: none;
}

.flow-ic { inline-size: 40px; block-size: 40px; }
.why-ic { inline-size: 40px; block-size: 40px; }
.value-ic { inline-size: 52px; block-size: 52px; margin-block-end: 10px; }
.rstep-ic { inline-size: 48px; block-size: 48px; margin-block-end: 10px; }
.icard-av { inline-size: 46px; block-size: 46px; margin-block-end: 10px; }
.enq-ic { inline-size: 62px; block-size: 62px; background: #fdf3dd; color: #9a6c00; }

/* ── Buttons that only appear in this section ─────────────────────────────── */

.btn-navy {
  background: var(--navy);
  color: #fff;
}

.storemarks {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.storemarks .ic {
  inline-size: 20px;
  block-size: 20px;
}

/* ── Why instructors choose us ────────────────────────────────────────────── */

.whybox {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px;
  display: grid;
  gap: 18px;
  margin-block-end: 18px;
}

@media (min-width: 1000px) {
  .whybox {
    grid-template-columns: minmax(200px, 260px) 1fr;
    align-items: start;
    gap: 28px;
  }
}

.why-kicker {
  color: #2f6fd0;
  font-weight: 700;
  font-size: 0.85rem;
  margin: 0 0 4px;
}

.whybox-lead h4 {
  margin: 0;
  font-size: 1.15rem;
  color: var(--navy-dark);
  line-height: 1.25;
}

.whygrid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.why {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.why h5 {
  margin: 0 0 4px;
  font-size: 0.92rem;
  color: var(--navy-dark);
}

.why p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}

/* ── Ready bar ────────────────────────────────────────────────────────────── */

.readybar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 16px;
  background: linear-gradient(90deg, #fdf3dd 0%, rgba(253, 243, 221, 0.35) 100%);
}

.readybar p {
  margin: 0;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--navy-dark);
}

.readylink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  margin-inline-start: auto;
}

/* ── The search illustration ──────────────────────────────────────────────── */

.mocksearch {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  margin-block-end: 18px;
}

.msbar {
  display: flex;
  gap: 10px;
  margin-block-end: 12px;
}

.msfield {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  font-size: 0.88rem;
  min-inline-size: 0;
}

.msfield span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msbtn {
  display: inline-flex;
  align-items: center;
  padding: 11px 22px;
  border-radius: 10px;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: 0.88rem;
  flex: none;
}

.msfilters {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.ffield {
  display: grid;
  gap: 3px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 0.78rem;
  color: var(--muted);
}

.fvalue {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  color: var(--ink);
  font-weight: 600;
}

.fchev {
  inline-size: 14px;
  block-size: 14px;
  transform: rotate(90deg);
  color: var(--muted);
}

/* ── Anonymous sample cards ───────────────────────────────────────────────── */

.sample-h {
  margin: 0 0 12px;
  font-size: 1rem;
  color: var(--navy-dark);
}

.icards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.icard {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
}

.icard h5 {
  margin: 0 0 10px;
  font-size: 0.95rem;
  color: var(--navy-dark);
}

.icard ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.icard li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.84rem;
  color: var(--muted);
}

.icard li .ic {
  inline-size: 16px;
  block-size: 16px;
  color: var(--navy);
}

/* ── Advertiser value grid ────────────────────────────────────────────────── */

.valuegrid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  padding-block: 4px 8px;
}

.value h4 {
  margin: 0 0 6px;
  font-size: 1rem;
  color: var(--navy-dark);
}

.value p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--muted);
}

/* ── Promotional plans ────────────────────────────────────────────────────── */

.plans,
.rsteps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.plans {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.rsteps {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.plan,
.rstep {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px;
}

.plan-no,
.rstep-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: 10px;
  background: #eaf1fb;
  color: var(--navy-dark);
  font-weight: 700;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  margin-block-end: 10px;
}

.plan h4,
.rstep h4 {
  margin: 0 0 6px;
  font-size: 1rem;
  color: var(--navy-dark);
}

.plan p,
.rstep p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--muted);
}

.ticks {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.ticks li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.84rem;
  color: var(--ink);
}

.ticks .ic {
  inline-size: 16px;
  block-size: 16px;
  color: #2f6fd0;
}

/* ── Enquiry form ─────────────────────────────────────────────────────────── */

.enq {
  background: linear-gradient(120deg, #fdf3dd 0%, rgba(253, 243, 221, 0.4) 100%);
  border-radius: 20px;
  padding: 24px;
  display: grid;
  gap: 18px;
}

.enq-lead {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.enq-lead h3 {
  margin: 0 0 4px;
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  color: var(--navy-dark);
  font-weight: 800;
}

.enq-lead p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  max-inline-size: 56ch;
}

.enq-fields {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.enq label {
  display: grid;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy-dark);
}

.enq input {
  font: inherit;
  font-weight: 400;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  min-inline-size: 0;
}

.enq input:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--navy);
}

/* The honeypot. Off-screen rather than display:none, because some bots skip
   fields that are not rendered at all. */
.enq-hp {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.enq-send {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
}

.enq-send .btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.enq-privacy {
  margin: 0;
  font-size: 0.76rem;
  color: var(--muted);
  max-inline-size: 48ch;
}

.enq-msg {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
}

.enq-msg:empty {
  display: none;
}

.enq-msg.is-ok {
  color: #1d6b4f;
}

.enq-msg.is-bad {
  color: #a4303f;
}

/* ═════════════════════════════════════════════════════════════════════════════
   09 FAQs · 10 Contact · 11 Downloads · 12 Quick links · footer
   ═════════════════════════════════════════════════════════════════════════ */

.secno {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

html[lang="ar"] .secno {
  letter-spacing: 0;
  text-transform: none;
}

.secno::before {
  content: "";
  inline-size: 46px;
  block-size: 4px;
  border-radius: 2px;
  background: var(--accent);
  flex: none;
}

.secno-n { color: var(--navy-dark); font-variant-numeric: tabular-nums; }
.secno-sep { color: var(--line); }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */

.faq-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 26px;
  border-block-end: 1px solid var(--line);
  margin-block: 22px 18px;
}

.faq-tab {
  border: none;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--muted);
  padding: 10px 2px;
  cursor: pointer;
  border-block-end: 3px solid transparent;
  margin-block-end: -1px;
}

.faq-tab[aria-current="true"] {
  color: var(--navy-dark);
  border-block-end-color: var(--navy);
}

.faq-tab:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.faq-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px 4px 14px;
  padding-inline: 14px 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  margin-block-end: 14px;
}

.faq-search-ic { color: var(--muted); display: inline-flex; }

.faq-search input {
  font: inherit;
  flex: 1;
  border: none;
  outline: none;
  padding: 11px 0;
  background: none;
  color: var(--ink);
  min-inline-size: 0;
}

.faq-count {
  margin: 0 0 10px;
  font-size: 0.84rem;
  color: var(--muted);
}

.faq-count:empty { display: none; }

.faq-list { display: grid; gap: 2px; }

.faq {
  border-block-end: 1px solid var(--line);
  border-radius: 14px;
}

.faq[open] { background: #eef3fa; }

.faq > summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  color: var(--navy-dark);
}

.faq > summary::-webkit-details-marker { display: none; }

.faq > summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

.faq-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 38px;
  block-size: 38px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  flex: none;
}

.faq-q { flex: 1; min-inline-size: 0; }

.faq-toggle {
  display: inline-flex;
  color: var(--navy);
  flex: none;
}


.faq > p {
  margin: 0;
  padding: 0 18px 18px 72px;
  padding-inline: 72px 18px;
  color: var(--muted);
}

.faq-empty {
  margin: 18px 0;
  color: var(--muted);
}

.stillbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-block-start: 22px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
}

.stillbar h3 { margin: 0; font-size: 1.1rem; color: var(--navy-dark); }
.stillbar p { margin: 2px 0 0; color: var(--muted); font-size: 0.9rem; }
.stillbar .btn { margin-inline-start: auto; }

.still-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 48px;
  block-size: 48px;
  border-radius: 14px;
  background: #eaf1fb;
  color: var(--navy);
  flex: none;
}

/* ── Contact ──────────────────────────────────────────────────────────────── */

.contact-top {
  display: grid;
  gap: 24px;
  margin-block-end: 26px;
}

@media (min-width: 1000px) {
  .contact-top { grid-template-columns: 0.9fr 1.1fr; align-items: start; }
}

.ccards {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.ccard {
  display: grid;
  gap: 2px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(26, 60, 110, 0.06);
}

.ccard:hover { border-color: var(--navy); }

.ccard-ic {
  inline-size: 44px;
  block-size: 44px;
  border-radius: 12px;
  background: var(--navy);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-block-end: 10px;
}

.ccard.is-wa .ccard-ic { background: #25d366; }

.ccard-h { font-size: 0.82rem; color: var(--muted); font-weight: 600; }
.ccard-v { font-weight: 800; color: var(--navy-dark); word-break: break-word; }
.ccard-n { font-size: 0.76rem; color: var(--muted); margin-block-start: 4px; }

.contact-main {
  display: grid;
  gap: 18px;
}

@media (min-width: 1000px) {
  .contact-main { grid-template-columns: 1.6fr 1fr; align-items: start; }
}

.sup {
  background: var(--navy-dark);
  color: #fff;
  border-radius: 20px;
  padding: 26px;
}

.sup h3 { margin: 0 0 6px; font-size: clamp(1.3rem, 2.6vw, 1.9rem); color: #fff; }
.sup-lede { margin: 0 0 20px; color: #c6d4e8; font-size: 0.94rem; }

.sup-grid { display: grid; gap: 16px; }

@media (min-width: 760px) {
  .sup-grid { grid-template-columns: 1fr 1fr; }
}

.sup-col { display: grid; gap: 14px; align-content: start; }

.sup label { display: grid; gap: 6px; font-size: 0.85rem; font-weight: 700; }
.sup label small { font-weight: 400; color: #c6d4e8; font-size: 0.8rem; }

.sup input,
.sup select,
.sup textarea {
  font: inherit;
  font-weight: 400;
  padding: 11px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  min-inline-size: 0;
}

.sup textarea { resize: vertical; }
.sup-msg { display: grid; gap: 4px; }
.sup-msg textarea { block-size: 100%; }

.sup input:focus-visible,
.sup select:focus-visible,
.sup textarea:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
}

.sup-extra {
  margin-block-start: 16px;
  background: #fff;
  border-radius: 12px;
  color: var(--ink);
}

.sup-extra > summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

.sup-extra > summary::-webkit-details-marker { display: none; }
.sup-extra summary b { display: block; font-size: 0.92rem; color: var(--navy-dark); }
.sup-extra summary small { color: var(--muted); font-size: 0.8rem; }
.sup-extra summary > span:first-child { flex: 1; }
.sup-extra > label { padding: 0 16px 16px; }

.sup-send {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-block-start: 18px;
}

.sup-note { margin: 0; font-size: 0.78rem; color: #c6d4e8; flex: 1; min-inline-size: 180px; }
.sup-send .btn { margin-inline-start: auto; }
.sup-send .btn[disabled] { opacity: .55; cursor: not-allowed; }
.sup-privacy { margin: 14px 0 0; font-size: 0.74rem; color: #c6d4e8; }
.sup-privacy a { color: #fff; }
.sup .enq-msg.is-ok { color: #9ff0c8; }
.sup .enq-msg.is-bad { color: #ffb4bd; }

.helpbox {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px;
}

.helpbox h3 { margin: 0 0 8px; font-size: 1.4rem; color: var(--navy-dark); }
.helpbox p { margin: 0 0 18px; color: var(--muted); font-size: 0.92rem; }

.helplink {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 14px;
  background: var(--bg-soft);
  text-decoration: none;
}

.helplink:hover { background: #eaf1fb; }
.helplink b { display: block; color: var(--navy-dark); font-size: 0.95rem; }
.helplink small { color: var(--muted); font-size: 0.76rem; }
.helplink > span:nth-child(2) { flex: 1; }
.helplink .ic-arrow { color: var(--navy); }

/* ── Downloads ────────────────────────────────────────────────────────────── */

.dlbar {
  display: grid;
  gap: 24px;
  padding: 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
}

@media (min-width: 900px) {
  .dlbar { grid-template-columns: 1.1fr 0.9fr; align-items: center; }
}

.dlstores {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.store-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  text-decoration: none;
  font-weight: 700;
  color: var(--navy-dark);
  font-size: 0.9rem;
}

.store-tile:hover { border-color: var(--navy); }
.store-tile.is-off { opacity: .55; }
.store-mark svg { inline-size: 26px; block-size: 26px; }

/* ── Quick links ──────────────────────────────────────────────────────────── */

.qcards {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.qart {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background: #eaf1fb;
  margin-block-end: 14px;
}

.qart svg { inline-size: 100%; block-size: auto; display: block; }

.qkicker { margin: 0 0 2px; color: var(--muted); font-size: 0.86rem; }
.qcard h3 { margin: 0 0 6px; font-size: 1.15rem; color: var(--navy-dark); }
.qp { margin: 0 0 14px; color: var(--muted); font-size: 0.9rem; }

.qlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  text-decoration: none;
  border-block-end: 3px solid var(--accent);
  padding-block-end: 3px;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

.foot-brand p { margin: 12px 0 0; font-size: 0.82rem; color: var(--muted); }

.socials { display: flex; gap: 10px; margin-block-start: 14px; }

.soc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 36px;
  block-size: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--navy);
}

.soc svg { inline-size: 18px; block-size: 18px; }
.soc:hover { border-color: var(--navy); }

.foot-sep { margin-inline: 10px; color: var(--line); }
.foot-legal a { margin: 0; }

/* ── Native disclosure markers ────────────────────────────────────────────
   Every <summary> on this site draws its own +/- icon, so the browser's must
   go. THREE selectors because no single one covers the field: WebKit uses the
   legacy ::-webkit-details-marker, modern engines use ::marker, and `display`
   alone is ignored on ::marker in some versions — `content: ""` is what
   actually empties it there.

   Hiding it per-component was the original mistake: the rule lived beside the
   accordion, so the FAQ and the optional-details block each grew their own
   stray glyph. One rule, applied to every summary, cannot drift. */

summary::-webkit-details-marker {
  display: none;
}

summary::marker {
  content: "";
}

summary {
  list-style: none;
}


/* ── Hero: the blue call to action ──────────────────────────────────────────
   
   SCOPED TO THE HERO AND THE NAV, not applied to `.btn-primary` globally.
   The amber still carries the download section and the panel CTAs further
   down the page, where it is the accent against white rather than against the
   hero's blue wash. Changing it everywhere is a separate decision, not a
   side effect of this one. */

.hero .btn-primary {
  background: var(--cta);
  color: #fff;
}

.hero .btn-primary:hover {
  background: var(--cta-dark);
}

/* `nav.site a.nav-cta`, not `.nav-cta`.
   `nav.site a` is one class and one element (0,1,1) and would otherwise win
   the colour on specificity, painting white-on-blue text in the muted grey
   used by the links beside it — which renders as near-invisible rather than
   as obviously wrong, so it survives a glance. */
nav.site a.nav-cta {
  background: var(--cta);
  color: #fff;
}

nav.site a.nav-cta:hover {
  background: var(--cta-dark);
  color: #fff;
}

/* ── The nav's one action ────────────────────────────────────────────────── */

.nav-cta {
  /* Tighter than a page button: it shares a row with text links and should
     not out-weigh the wordmark. */
  padding: 9px 16px;
  font-size: 0.9rem;
  border-radius: 10px;
  white-space: nowrap;
}

/* ── Hero film ──────────────────────────────────────────────────────────────
   
   Only rendered when assets/hero.mp4 exists — see hero_film() in build.py. */

.hero-film {
  padding: 0;
  overflow: hidden;
}

.hero-film video,
.hero-film img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* PAUSED, NOT HIDDEN. Someone who asks for reduced motion still wants to see
   what the panel contains — they just do not want it moving. The poster frame
   stays, so the slide keeps its composition either way.
   
   `animation-play-state` does not touch a <video>, so this needs the script's
   help; the CSS here only removes the transition. Without a poster the frame
   goes dark, which is why hero_film() emits one when the file is there. */
@media (prefers-reduced-motion: reduce) {
  .hero-film video {
    transition: none;
  }
}

/* ── A screenshot inside a journey step ─────────────────────────────────── */

.jstep-shot img {
  inline-size: 100%;
  block-size: auto;
  margin-block-start: 14px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(26, 60, 110, 0.10);
}


/* ── Narrow screens: swap slides rather than cross-fade them ────────────────
   
   Stacking every slide in one grid cell means the tallest sets the height for
   all of them. On a wide screen the three are within ~180px of each other and
   centring the short ones reads as deliberate space. Below the two-column
   breakpoint they are not: slide 2 stacks a phone and three cards vertically
   and runs far taller than slide 1, so the same trick leaves most of a
   phone screen empty above and below two lines of text.
   
   So on narrow screens the inactive slides are taken out of the flow
   entirely and the track sizes to whichever is showing. The cost is the
   cross-fade — a swap instead of a dissolve — which is a fair trade for not
   scrolling past a screenful of nothing, and closer to how a carousel behaves
   on a phone anyway. */

@media (max-width: 899px) {
  .hero.is-live .hero-track {
    display: block;
  }

  .hero.is-live .hero-slide {
    display: none;
    grid-area: auto;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero.is-live .hero-slide.is-active {
    display: block;
    visibility: visible;
  }
}