/* ═════════════════════════════════════════════════════════════════════════════
   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;
  --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. */
.hero.is-live .hero-slide {
  grid-area: 1 / 1;
  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) {
  .hero-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* COPY LEADS ON EVERY SLIDE — see the note in build.py. Slide 2 just gets a
     wider second column, because the phone and three cards need more room
     than a video panel or four tiles do.

     No `order` anywhere: source order and visual order match throughout, so
     tabbing follows what you see. */
  .hero-s2 .hero-grid {
    grid-template-columns: 0.8fr 1.2fr;
  }

  .hero-s3 .hero-grid {
    grid-template-columns: 0.85fr 1.15fr;
  }
}

/* ── 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-mark {
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--navy-dark);
  z-index: 1;
}

.phone-mark .accent {
  color: var(--accent);
}

/* The road: a soft S-curve behind the wordmark, drawn rather than imaged. */
.phone-road {
  position: absolute;
  inset-block-end: -40px;
  inline-size: 220px;
  block-size: 160px;
  background:
    radial-gradient(circle at 50% 0%, rgba(47, 111, 208, 0.18) 0 38%, transparent 39%),
    radial-gradient(circle at 50% 24%, rgba(47, 111, 208, 0.12) 0 54%, transparent 55%);
  border-radius: 50%;
}

.phone-pin {
  position: absolute;
  inset-block-start: 58%;
  inline-size: 20px;
  block-size: 20px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--accent);
  box-shadow: 0 4px 12px rgba(240, 165, 0, 0.5);
}

/* 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);
    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));
}

@media (min-width: 900px) {
  .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 {
  inline-size: 100%;
  block-size: auto;
}

@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;
}