/* =====================================================================
   RIVET chrome v3: the header (mega menu + phone sheet) and the footer.
   Markup: partials/chrome/header.html and footer.html, applied to every
   page by tools/build/chrome.py. Behaviour: assets/site.js ("Header v3").

   Scoped to #rivet-header and #rivet-footer on purpose: five older layers
   (chrome.css, visuals.css, award.css, academy-dark.css, os-dark.css,
   events-theme.css) still style .site-header/.site-footer, and an id beats
   every class chain they use, so this file wins without !important.
   Linked LAST on every page (after mobile.css).

   Brand OS v1.2.1: mode by audience (light pages light, dark pages dark,
   decided by html[data-mode="dark"] or body.gtm-dark), no magenta in the
   chrome (the page keeps its one magenta action), registered duos only on
   bounded cards (Haze, Prestige, Dawn; Dusk on dark pages; the member-card objects carry Command, Depth and Prestige;
   two wells are graded photos), Plex Sans body, Plex Mono caps
   for eyebrows and display, Lucide icons at 2px, 3px purple focus ring.
   ===================================================================== */

#rivet-header, #rivet-footer {
  /* foundation + brand (tokens/rivet-design-system.css) */
  --nv-black: #000000; --nv-white: #FFFFFF; --nv-ghost: #F8F8FA; --nv-silver: #D1D1D9; --nv-slate: #4A4A68;
  --nv-purple: #3B06D4; --nv-cyan: #4CF3FE; --nv-gold: #F5C24B; --nv-red: #FF4D2E;
  --nv-elev-1: #0A0A0C; --nv-elev-2: #12121A; --nv-elev-3: #1A1A22; --nv-elev-4: #1E1E2A;
  --nv-slate-on-dark: #9A9BBD; --nv-purple-500: #7B87FF; --nv-frame: #0B0B0D; --nv-rim: #2A2A30;
  /* registered duos used here */
  --nv-duo-haze: linear-gradient(315deg, var(--nv-ghost) 0 30%, var(--nv-purple) 100%);
  --nv-duo-prestige: linear-gradient(135deg, var(--nv-black) 0 40%, var(--nv-gold) 100%);
  --nv-duo-command: linear-gradient(160deg, var(--nv-black) 0 40%, var(--nv-cyan) 100%);
  --nv-duo-dew: linear-gradient(135deg, var(--nv-ghost) 0 30%, var(--nv-cyan) 100%);
  --nv-duo-dawn: linear-gradient(135deg, var(--nv-ghost) 0 30%, var(--nv-gold) 100%);
  /* dark pages: Depth (black -> purple) and Dusk (slate -> purple), both full-field safe for white ink */
  --nv-duo-depth: linear-gradient(135deg, var(--nv-black) 0 30%, var(--nv-purple) 100%);
  --nv-duo-dusk: linear-gradient(135deg, var(--nv-slate) 0 20%, var(--nv-purple) 100%);
  /* semantic, light mode */
  --nv-ground: var(--nv-white);
  --nv-bar: rgba(255, 255, 255, .9);
  --nv-panel: var(--nv-white);
  --nv-sunk: var(--nv-ghost);
  --nv-raise: var(--nv-white);
  --nv-ink: var(--nv-black);
  --nv-muted: var(--nv-slate);
  --nv-hair: rgba(74, 74, 104, .16);
  --nv-hair-strong: rgba(74, 74, 104, .32);
  --nv-btn: var(--nv-black);
  --nv-btn-ink: var(--nv-white);
  --nv-hand: var(--nv-purple);
  --nv-tint: rgba(59, 6, 212, .08);
  --nv-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 24px 48px -24px rgba(17, 12, 46, .32);
  --nv-focus: var(--nv-purple);
  --nv-sans: var(--font-sans, 'IBM Plex Sans', system-ui, -apple-system, sans-serif);
  --nv-mono: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  --nv-ease: cubic-bezier(.2, 0, 0, 1);
  --nv-h: 64px;
}
html[data-mode="dark"] #rivet-header, body.gtm-dark #rivet-header,
html[data-mode="dark"] #rivet-footer, body.gtm-dark #rivet-footer {
  --nv-ground: var(--nv-black);
  --nv-bar: rgba(0, 0, 0, .88);
  --nv-panel: var(--nv-elev-2);
  --nv-sunk: var(--nv-elev-1);
  --nv-raise: var(--nv-elev-3);
  --nv-ink: var(--nv-white);
  --nv-muted: var(--nv-slate-on-dark);
  --nv-hair: var(--nv-elev-4);
  --nv-hair-strong: #34344A;
  --nv-btn: var(--nv-white);
  --nv-btn-ink: var(--nv-black);
  --nv-hand: var(--nv-gold);
  --nv-tint: rgba(123, 135, 255, .16);
  --nv-shadow: 0 0 0 1px var(--nv-elev-4), 0 24px 48px -24px rgba(0, 0, 0, .8);
  --nv-focus: var(--nv-purple-500);
}

#rivet-header :focus-visible, #rivet-footer :focus-visible { outline: 3px solid var(--nv-focus); outline-offset: 2px; }
#rivet-header svg, #rivet-footer svg { display: block; flex: none; }

/* ============================ HEADER ============================ */
#rivet-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  margin: 0; padding: 0; border: 0; border-radius: 0;
  /* !important only to beat the legacy body.gtm-dark / body.ev-voice ".site-header{background:transparent !important}" */
  background: var(--nv-bar) !important;
  -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
  box-shadow: inset 0 -1px 0 var(--nv-hair);
  color: var(--nv-ink); font-family: var(--nv-sans);
  transition: box-shadow .2s var(--nv-ease), background-color .2s var(--nv-ease), top .32s var(--nv-ease);
}
#rivet-header.is-scrolled { box-shadow: inset 0 -1px 0 var(--nv-hair), 0 8px 24px -16px rgba(0, 0, 0, .28); }
html.has-notif #rivet-header { top: 42px; }
html.has-notif.notif-up #rivet-header { top: 0; }
#rivet-header ul { list-style: none; margin: 0; padding: 0; }
#rivet-header a { text-decoration: none; }

#rivet-header .hdr__bar {
  position: relative; display: flex; align-items: center; gap: 8px;
  height: var(--nv-h); max-width: 1328px; margin: 0 auto; padding: 0 24px;
}
#rivet-header .hdr__logo { display: inline-flex; align-items: center; height: 44px; padding: 0 4px; margin-left: -4px; color: var(--nv-ink); border-radius: 8px; }
#rivet-header .rv-logo { width: 84px; height: 20px; }

/* primary list */
#rivet-header .hdr__nav { display: flex; align-items: center; flex: 1; min-width: 0; margin-left: 20px; }
#rivet-header .hdr__list { display: flex; align-items: center; gap: 2px; }
#rivet-header .hdr__trigger {
  display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 12px; margin: 0;
  border: 0; border-radius: 8px; background: none; cursor: pointer;
  font: 500 16px/1 var(--nv-sans); color: var(--nv-muted); white-space: nowrap;
  transition: color .12s var(--nv-ease), background-color .12s var(--nv-ease);
}
#rivet-header .hdr__trigger:hover, #rivet-header .hdr__item.is-open > .hdr__trigger { color: var(--nv-ink); background: var(--nv-sunk); }
#rivet-header .hdr__item[data-active] > .hdr__trigger, #rivet-header .hdr__trigger[aria-current="page"] { color: var(--nv-ink); box-shadow: inset 0 -2px 0 var(--nv-ink); border-radius: 8px 8px 0 0; }
#rivet-header .hdr-chev { transition: transform .2s var(--nv-ease); opacity: .7; }
#rivet-header .hdr__item.is-open .hdr-chev { transform: rotate(180deg); }

/* right side */
#rivet-header .hdr__actions { display: flex; align-items: center; gap: 12px; margin-left: auto; flex: none; }
#rivet-header .hdr__signin { display: inline-flex; align-items: center; height: 40px; padding: 0 8px; border-radius: 8px; font: 500 16px/1 var(--nv-sans); color: var(--nv-muted); }
#rivet-header .hdr__signin:hover { color: var(--nv-ink); }
#rivet-header .hdr-btn, #rivet-footer .hdr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px;
  border-radius: 8px; border: 1px solid transparent; font: 600 16px/1 var(--nv-sans); white-space: nowrap; cursor: pointer;
  transition: opacity .12s var(--nv-ease), background-color .12s var(--nv-ease);
}
#rivet-header .hdr-btn--ink { background: var(--nv-btn); color: var(--nv-btn-ink); }
#rivet-header .hdr-btn--ink:hover { opacity: .86; }
#rivet-header .hdr-btn--line { background: transparent; color: var(--nv-ink); border-color: var(--nv-hair-strong); }
#rivet-header .hdr-btn--line:hover { background: var(--nv-sunk); }
#rivet-header .hdr__burger { display: none; }
#rivet-header .hdr__sheetfoot { display: none; }

/* language pill (header and footer) */
#rivet-header .hdr-lang, #rivet-footer .hdr-lang {
  display: inline-flex; align-items: center; height: 32px; padding: 0 4px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--nv-hair-strong); font: 500 12px/1 var(--nv-mono); letter-spacing: .08em; color: var(--nv-muted);
}
#rivet-header .hdr-lang > *, #rivet-footer .hdr-lang > * { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 999px; color: inherit; text-decoration: none; }
#rivet-header .hdr-lang__on, #rivet-footer .hdr-lang__on { background: var(--nv-ink); color: var(--nv-ground); font-weight: 600; }
#rivet-header .hdr-lang__ar, #rivet-footer .hdr-lang__ar { font-family: 'Almarai', var(--nv-sans); font-size: 14px; letter-spacing: 0; }
#rivet-header a.hdr-lang__ar[href]:hover, #rivet-footer a.hdr-lang__ar[href]:hover { color: var(--nv-ink); background: var(--nv-sunk); }

/* ---------- mega panels (desktop) ---------- */
#rivet-header .hdr__panel {
  position: absolute; left: 0; right: 0; top: 100%; padding: 0 24px;
  visibility: hidden; opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .2s var(--nv-ease), transform .2s var(--nv-ease), visibility 0s linear .2s;
}
#rivet-header .hdr__item.is-open > .hdr__panel { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; }
#rivet-header .hdr__panel-in {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 300px; gap: 0 32px; align-items: start;
  margin-top: 8px; padding: 24px; border-radius: 12px; background: var(--nv-panel); box-shadow: var(--nv-shadow);
  max-height: calc(100vh - var(--nv-h) - 24px); overflow-y: auto; overscroll-behavior: contain;
}
#rivet-header .hdr-col__label {
  margin: 0 0 8px; padding: 0 10px; font: 500 12px/1.4 var(--nv-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--nv-muted);
}
#rivet-header .hdr-col__list { display: grid; gap: 2px; }
#rivet-header .hdr-link {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; align-items: start;
  min-height: 44px; padding: 10px; border-radius: 8px; color: var(--nv-ink);
  transition: background-color .12s var(--nv-ease);
}
#rivet-header .hdr-link:hover { background: var(--nv-sunk); }
#rivet-header .hdr-link[aria-current="page"] { background: var(--nv-tint); }
#rivet-header .hdr-link__ic { grid-row: 1 / span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: var(--nv-sunk); color: var(--nv-ink); }
#rivet-header .hdr-link:hover .hdr-link__ic { background: var(--nv-raise); box-shadow: inset 0 0 0 1px var(--nv-hair); }
#rivet-header .hdr-link__tx { display: block; min-width: 0; }
#rivet-header .hdr-link__tx b { display: block; font: 600 16px/1.3 var(--nv-sans); color: var(--nv-ink); }
#rivet-header .hdr-link__tx small { display: block; margin-top: 2px; font: 400 14px/1.45 var(--nv-sans); color: var(--nv-muted); }
#rivet-header .hdr-link__meta { grid-column: 2; margin-top: 4px; font: 500 12px/1.3 var(--nv-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--nv-ink); font-variant-numeric: tabular-nums; }
/* micro tags beside a name: "New" (purple tint) on Max, "Soon" (neutral) on the two courses that open Nov-Dec 2026.
   11px Mono caps (the micro role); colour is never the only signal, the word is. */
#rivet-header .hdr-tag {
  display: inline-block; margin-inline-start: 6px; padding: 2px 6px; border-radius: 4px; vertical-align: 2px;
  font: 500 11px/1.3 var(--nv-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  background: var(--nv-sunk); color: var(--nv-muted); box-shadow: inset 0 0 0 1px var(--nv-hair);
}
#rivet-header .hdr-link:hover .hdr-tag { background: var(--nv-raise); }
#rivet-header .hdr-tag--new, #rivet-header .hdr-link:hover .hdr-tag--new { background: var(--nv-tint); color: var(--nv-purple); box-shadow: none; }
html[data-mode="dark"] #rivet-header .hdr-tag--new, body.gtm-dark #rivet-header .hdr-tag--new { color: var(--nv-purple-500); }

/* feature cards: ONE anatomy in every panel. A bounded visual well (one registered duo per card) that grows to
   fill the card (so no blank foot), over a Mono eyebrow, a Plex Sans title (sentence case), at most one line and one link. No border. */
#rivet-header .hdr-feat {
  display: flex; flex-direction: column; align-self: stretch; overflow: hidden;
  border-radius: 12px; background: var(--nv-sunk); color: var(--nv-ink);
}
#rivet-header .hdr-feat__well {
  position: relative; flex: 1 1 auto; display: flex; justify-content: flex-start; align-items: flex-start;
  min-height: 136px; padding: 20px; overflow: hidden; color: var(--nv-white);
}
html[data-mode="dark"] #rivet-header .hdr-feat__well, body.gtm-dark #rivet-header .hdr-feat__well { box-shadow: inset 0 0 0 1px var(--nv-elev-4); }
#rivet-header .hdr-feat__ico { width: 40px; height: 40px; }
#rivet-header .hdr-feat__body { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 16px 20px 20px; }
#rivet-header .hdr-feat__eye { font: 500 11px/1.4 var(--nv-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--nv-muted); }
#rivet-header .hdr-feat__t { font: 600 18px/1.25 var(--nv-sans); letter-spacing: -.01em; color: var(--nv-ink); text-wrap: balance; }
#rivet-header .hdr-feat__p { font: 400 14px/1.5 var(--nv-sans); color: var(--nv-muted); }
#rivet-header .hdr-feat__price { font: 600 24px/1.1 var(--nv-mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--nv-ink); }
#rivet-header .hdr-feat__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font: 600 14px/1.3 var(--nv-sans); color: var(--nv-ink); }
#rivet-header .hdr-arr { transition: transform .12s var(--nv-ease); }
#rivet-header a.hdr-feat:hover .hdr-feat__cta .hdr-arr, #rivet-header .hdr-feat__btn:hover .hdr-arr { transform: translateX(3px); }
#rivet-header a.hdr-feat:hover .hdr-feat__cta { text-decoration: underline; text-underline-offset: 3px; }

/* Memberships: the member-card objects (the /pricing cards' ID-1 shape, one registered duo each: Pro Command, Max Depth,
   Infinite Prestige, 135deg with a 40% black hold so the mark and the tier name sit in the black anchor) in a cascade, and
   the Individual/Team switch from /pricing under them. The whole card links to /pricing#team. The well is Haze run to
   the bottom (ghost behind the cards, purple behind the white switch); on dark pages it is Dusk run the same way (slate
   behind the cards, so their black anchors keep an edge). The cascade and the switch are one group, centred in the well. */
#rivet-header .hdr-feat--mc .hdr-feat__well {
  flex-direction: column; justify-content: center; align-items: center; gap: 20px; min-height: 224px; padding: 20px 0;
  background: linear-gradient(to bottom, var(--nv-ghost) 0 40%, var(--nv-purple) 100%);
}
html[data-mode="dark"] #rivet-header .hdr-feat--mc .hdr-feat__well, body.gtm-dark #rivet-header .hdr-feat--mc .hdr-feat__well {
  background: linear-gradient(to bottom, var(--nv-slate) 0 40%, var(--nv-purple) 100%); box-shadow: none;
}
#rivet-header .hdr-mc { position: relative; flex: none; display: block; width: 100%; height: 176px; }
#rivet-header .hdr-mc__card {
  --r: -6deg; --x: 0px; --y: 0px;
  position: absolute; left: 50%; top: 50%; display: flex; align-items: flex-start; gap: 6px;
  width: clamp(136px, 52%, 168px); aspect-ratio: 1.586; padding: 10px; border-radius: 8px; color: var(--nv-white);
  translate: calc(-50% + var(--x)) calc(-50% + var(--y)); rotate: var(--r);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 14px 24px -14px rgba(0, 0, 0, .6);
  transition: translate .32s var(--nv-ease);
}
#rivet-header .hdr-mc__card--pro { --x: -36px; --y: -26px; background: linear-gradient(135deg, var(--nv-black) 0 40%, var(--nv-cyan) 100%); }
#rivet-header .hdr-mc__card--max { z-index: 1; background: linear-gradient(135deg, var(--nv-black) 0 40%, var(--nv-purple) 100%); }
#rivet-header .hdr-mc__card--infinite { --x: 36px; --y: 26px; z-index: 2; background: linear-gradient(135deg, var(--nv-black) 0 40%, var(--nv-gold) 100%); }
#rivet-header a.hdr-feat--mc:hover .hdr-mc__card--pro { --x: -44px; --y: -30px; }
#rivet-header a.hdr-feat--mc:hover .hdr-mc__card--infinite { --x: 44px; --y: 30px; }
[dir="rtl"] #rivet-header .hdr-mc__card { --r: 6deg; }
[dir="rtl"] #rivet-header .hdr-mc__card--pro { --x: 36px; background: linear-gradient(225deg, var(--nv-black) 0 40%, var(--nv-cyan) 100%); }
[dir="rtl"] #rivet-header .hdr-mc__card--max { background: linear-gradient(225deg, var(--nv-black) 0 40%, var(--nv-purple) 100%); }
[dir="rtl"] #rivet-header .hdr-mc__card--infinite { --x: -36px; background: linear-gradient(225deg, var(--nv-black) 0 40%, var(--nv-gold) 100%); }
[dir="rtl"] #rivet-header a.hdr-feat--mc:hover .hdr-mc__card--pro { --x: 44px; }
[dir="rtl"] #rivet-header a.hdr-feat--mc:hover .hdr-mc__card--infinite { --x: -44px; }
#rivet-header .hdr-mc__mark { width: 14px; height: auto; }
#rivet-header .hdr-mc__card b { font: 600 11px/18px var(--nv-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--nv-white); }
/* the contactless-chip cue, bottom start, inside the black hold */
#rivet-header .hdr-mc__chip { position: absolute; inset-inline-start: 10px; bottom: 10px; width: 20px; height: 14px; border-radius: 3px; background: rgba(255, 255, 255, .16); }
/* the switch, as on /pricing: a pill with Team selected */
#rivet-header .hdr-seg {
  position: relative; flex: none; display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px;
  background: var(--nv-white); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 8px 18px -10px rgba(17, 12, 46, .45);
  font: 600 12px/1 var(--nv-sans); color: var(--nv-slate); white-space: nowrap;
}
#rivet-header .hdr-seg > span { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 999px; }
#rivet-header .hdr-seg .hdr-seg__on { background: var(--nv-black); color: var(--nv-white); }
html[data-mode="dark"] #rivet-header .hdr-seg, body.gtm-dark #rivet-header .hdr-seg { background: var(--nv-elev-3); color: var(--nv-slate-on-dark); box-shadow: inset 0 0 0 1px var(--nv-elev-4); }
html[data-mode="dark"] #rivet-header .hdr-seg .hdr-seg__on, body.gtm-dark #rivet-header .hdr-seg .hdr-seg__on { background: var(--nv-white); color: var(--nv-black); }

/* photo wells (For teams, RIVET OS): a graded photo (assets/photos, chiaroscuro) fills the well; an optional Mono
   chip sits on the scrim, bottom start */
#rivet-header .hdr-feat--photo .hdr-feat__well { min-height: 168px; padding: 0; background: var(--nv-black); }
#rivet-header .hdr-feat--photo picture { position: absolute; inset: 0; display: block; }
#rivet-header .hdr-feat__img { display: block; width: 100%; height: 100%; object-fit: cover; }
#rivet-header .hdr-feat--agents .hdr-feat__img { object-position: 50% 78%; }
#rivet-header .hdr-feat__chip {
  position: absolute; inset-inline-start: 12px; bottom: 12px; padding: 6px 8px; border-radius: 4px;
  background: var(--scrim-strong, rgba(0, 0, 0, .75)); color: var(--nv-white); font: 500 11px/1.2 var(--nv-mono); letter-spacing: .08em; text-transform: uppercase;
}

/* Courses: Prestige (black -> gold, certificates), the credential mark in the black anchor */
#rivet-header .hdr-feat--course .hdr-feat__well { background: var(--nv-duo-prestige); }
/* For teams: a team photo (PL-03) in the well; the button is the card's one link */
#rivet-header .hdr-feat__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; margin-top: 8px; padding: 0 16px; align-self: flex-start;
  border-radius: 8px; background: var(--nv-btn); color: var(--nv-btn-ink); font: 600 16px/1 var(--nv-sans);
}
#rivet-header .hdr-feat__btn:hover { opacity: .86; }
/* Resources: Dawn (ghost -> gold, soft warm, full-field safe for black), the report mark in black; Dusk on dark pages (gold mark) */
#rivet-header .hdr-feat--report .hdr-feat__well { align-items: center; justify-content: center; background: var(--nv-duo-dawn); color: var(--nv-black); }
html[data-mode="dark"] #rivet-header .hdr-feat--report .hdr-feat__well, body.gtm-dark #rivet-header .hdr-feat--report .hdr-feat__well { color: var(--nv-gold); background: var(--nv-duo-dusk); }
#rivet-header .hdr-feat--report .hdr-feat__ico { width: 56px; height: 56px; }

@media (prefers-reduced-motion: reduce) {
  #rivet-header, #rivet-header *, #rivet-footer * { transition-duration: 0s !important; }
  #rivet-header .hdr__panel { transform: none; }
  #rivet-header .hdr__panel { animation: none !important; }
  #rivet-header .hdr-mc__card { transition: none; }
}

/* the top-level label wraps a one-line hint that only the phone sheet shows */
#rivet-header .hdr__tlabel { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: start; }
#rivet-header .hdr__hint { display: none; }

/* Arabic twins: the Mono roles in the menu set in Almarai, with no caps or tracking (numerals stay Western) */
:lang(ar) #rivet-header :is(.hdr-col__label, .hdr-link__meta, .hdr-tag, .hdr-feat__eye, .hdr-feat__t, .hdr-feat__chip, .hdr-seg, .hdr-mc__card b),
#rivet-header :lang(ar) :is(.hdr-col__label, .hdr-link__meta, .hdr-tag, .hdr-feat__eye, .hdr-feat__t, .hdr-feat__chip, .hdr-seg, .hdr-mc__card b) {
  font-family: 'Almarai', var(--nv-sans); letter-spacing: 0; text-transform: none;
}

/* narrow desktop: tighten before the sheet takes over */
@media (max-width: 1180px) and (min-width: 961px) {
  #rivet-header .hdr__actions .hdr-lang { display: none; }
  #rivet-header .hdr__nav { margin-left: 4px; }
  #rivet-header .hdr__trigger { padding: 0 7px; }
  #rivet-header .hdr__actions { gap: 8px; }
  #rivet-header .hdr__signin { padding: 0 6px; }
  #rivet-header .hdr__panel-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 248px; gap: 0 20px; }
  #rivet-header .hdr-mc__card { width: 120px; }
}

/* ---------- phones and tablets: one full-height sheet built from the same markup ---------- */
@media (max-width: 960px) {
  #rivet-header { --nv-h: 60px; }
  #rivet-header .hdr__bar { padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
  #rivet-header .hdr__actions { order: 2; gap: 8px; }
  #rivet-header .hdr__actions .hdr-lang, #rivet-header .hdr__signin { display: none; }
  #rivet-header .hdr__join { height: 40px; padding: 0 14px; font-size: 16px; }
  #rivet-header .hdr__burger {
    order: 3; display: grid; place-items: center; width: 44px; height: 44px; margin: 0 -6px 0 0; padding: 0;
    border: 0; border-radius: 8px; background: none; color: var(--nv-ink); cursor: pointer;
  }
  #rivet-header .hdr__burger-close { display: none; }
  #rivet-header.is-open .hdr__burger-open { display: none; }
  #rivet-header.is-open .hdr__burger-close { display: block; }
  #rivet-header.is-open { background: var(--nv-ground) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
  #rivet-header.is-open .hdr__join { visibility: hidden; }

  #rivet-header .hdr__nav {
    position: fixed; left: 0; right: 0; bottom: 0; top: calc(var(--nv-h) + var(--nv-top, 0px));
    z-index: 1; display: flex; flex-direction: column; align-items: stretch; margin: 0; overflow-y: auto; overscroll-behavior: contain;
    background: var(--nv-ground); box-shadow: inset 0 1px 0 var(--nv-hair);
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity .2s var(--nv-ease), transform .2s var(--nv-ease), visibility 0s linear .2s;
  }
  html.has-notif:not(.notif-up) #rivet-header .hdr__nav { --nv-top: 42px; }
  #rivet-header.is-open .hdr__nav { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  #rivet-header .hdr__list { display: block; padding: 4px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left)); }
  #rivet-header .hdr__item { border-bottom: 1px solid var(--nv-hair); }
  /* top level: one row per group, its name over a one-line hint, a chevron pointing into the group */
  #rivet-header .hdr__trigger {
    display: flex; justify-content: space-between; gap: 12px; width: 100%; height: auto; min-height: 64px; padding: 10px 4px; border-radius: 0;
    font: 600 18px/1.2 var(--nv-sans); color: var(--nv-ink); background: none !important; box-shadow: none !important;
  }
  #rivet-header .hdr__hint { display: block; font: 400 14px/1.35 var(--nv-sans); color: var(--nv-muted); }
  #rivet-header .hdr__item[data-active] > .hdr__trigger::after { content: none; }
  #rivet-header .hdr-chev { width: 20px; height: 20px; transform: rotate(-90deg); }
  [dir="rtl"] #rivet-header .hdr-chev { transform: rotate(90deg); }
  /* drill-down: opening a group hides the others; its row becomes the back row (chevron first, pointing back) and stays pinned
     at the top of the sheet while the group scrolls under it. site.js sets .is-drilled on the sheet. */
  #rivet-header .hdr__nav.is-drilled .hdr__item:not(.is-open) { display: none; }
  #rivet-header .hdr__nav.is-drilled .hdr__item.is-open { border-bottom: 0; }
  #rivet-header .hdr__item.is-open > .hdr__trigger {
    position: sticky; top: 0; z-index: 2; justify-content: flex-start; gap: 8px; min-height: 56px; margin-bottom: 8px;
    background: var(--nv-ground) !important; box-shadow: 0 1px 0 var(--nv-hair) !important;
  }
  #rivet-header .hdr__item.is-open > .hdr__trigger .hdr-chev { order: -1; transform: rotate(90deg); opacity: 1; }
  [dir="rtl"] #rivet-header .hdr__item.is-open > .hdr__trigger .hdr-chev { transform: rotate(-90deg); }
  #rivet-header .hdr__item.is-open > .hdr__trigger .hdr__hint { display: none; }
  #rivet-header .hdr__panel { position: static; display: none; padding: 0 0 16px; visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: none; }
  #rivet-header .hdr__item.is-open > .hdr__panel { display: block; animation: hdr-drill .2s var(--nv-ease) both; }
  #rivet-header .hdr__panel-in { display: block; margin: 0; padding: 0; max-height: none; overflow: visible; background: none; box-shadow: none; border-radius: 0; }
  #rivet-header .hdr-col + .hdr-col { margin-top: 16px; }
  #rivet-header .hdr-col__label { padding: 0 4px; }
  #rivet-header .hdr-link { padding: 8px 4px; }
  /* the group's feature card closes the drilled view, full width */
  #rivet-header .hdr-feat { margin-top: 20px; }
  #rivet-header .hdr-feat__well { min-height: 152px; }
  #rivet-header .hdr-feat--mc .hdr-feat__well { min-height: 224px; }
  #rivet-header .hdr-feat--photo .hdr-feat__well { min-height: 0; aspect-ratio: 16 / 9; }
  /* the pinned foot: Join free full width on top, the language pill and Sign in under it on the start side, so the
     end corner stays clear for the round voice button (voice.js, 16px from the corner on phones) */
  #rivet-header .hdr__sheetfoot {
    position: sticky; bottom: 0; z-index: 3; display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 16px 8px; margin-top: auto;
    padding: 16px max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background: var(--nv-ground); box-shadow: 0 -1px 0 var(--nv-hair);
  }
  #rivet-header .hdr__sheetbtns { display: contents; }
  #rivet-header .hdr__sheetbtns .hdr-btn--ink { grid-row: 1; grid-column: 1 / -1; height: 48px; font-size: 16px; }
  #rivet-header .hdr__sheetbtns .hdr-btn--line { grid-row: 2; grid-column: 2; height: 40px; }
  #rivet-header .hdr-lang--sheet { grid-row: 2; grid-column: 1; height: 40px; }
  #rivet-header .hdr-lang--sheet > * { height: 32px; padding: 0 12px; }
  /* the voice button stays in the physical right corner in Arabic too (voice.js), so the small row keeps to the left */
  [dir="rtl"] #rivet-header .hdr__sheetfoot { grid-template-columns: minmax(0, 1fr) auto auto; }
  [dir="rtl"] #rivet-header .hdr__sheetbtns .hdr-btn--line { grid-column: 2; }
  [dir="rtl"] #rivet-header .hdr-lang--sheet { grid-column: 3; }
}
@keyframes hdr-drill { from { opacity: 0; transform: translateX(var(--hdr-dx, 24px)); } }
[dir="rtl"] #rivet-header { --hdr-dx: -24px; }
@media (max-width: 360px) {
  #rivet-header .hdr__join { padding: 0 10px; font-size: 14px; }
}
html.hdr-locked, html.hdr-locked body { overflow: hidden; }

/* main starts exactly under the fixed header (64px, 60px up to 960px), so no strip of body ground shows between
   the bar and a tinted hero. This replaces the old 84px in pages.css/home.css and the 130px notice offset in
   chrome.css (42px notice bar + the header). */
main { padding-top: 64px; }
html.has-notif main { padding-top: 106px; }
@media (max-width: 960px) {
  main { padding-top: 60px; }
  html.has-notif main { padding-top: 102px; }
}

/* ============================ FOOTER ============================ */
#rivet-footer {
  position: relative; margin: 0; padding: 64px 0 32px; border: 0;
  background: var(--nv-ghost); box-shadow: inset 0 1px 0 var(--nv-hair);
  color: var(--nv-ink); font-family: var(--nv-sans); font-size: 16px; line-height: 1.5;
}
html[data-mode="dark"] #rivet-footer, body.gtm-dark #rivet-footer { background: var(--nv-black); }
#rivet-footer::before, #rivet-footer::after { content: none; }
#rivet-footer ul { list-style: none; margin: 0; padding: 0; }
#rivet-footer p { margin: 0; }
#rivet-footer .ftr__in { max-width: 1328px; margin: 0 auto; padding: 0 24px; }
#rivet-footer .ftr__eye, #rivet-footer .ftr__h {
  margin: 0; font: 500 12px/1.4 var(--nv-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--nv-muted);
}

/* the WhatsApp join card (markup and hooks unchanged: forms.js) */
#rivet-footer .ftr__join {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 24px 48px; align-items: center;
  padding: clamp(24px, 3vw, 40px); border-radius: 24px; background: var(--nv-white);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 18px 40px -28px rgba(17, 12, 46, .3);
}
html[data-mode="dark"] #rivet-footer .ftr__join, body.gtm-dark #rivet-footer .ftr__join { background: var(--nv-elev-1); box-shadow: inset 0 0 0 1px var(--nv-elev-4); }
#rivet-footer .ftr__join-h { margin: 8px 0 8px; font-weight: 600; font-family: var(--nv-sans); /* size: assets/type.css (H4 role) */ color: var(--nv-ink); text-wrap: balance; }
#rivet-footer .ftr__join-p { max-width: 52ch; color: var(--nv-muted); text-wrap: pretty; }
#rivet-footer .f2-wa { position: relative; display: grid; gap: 14px; margin: 0; padding: 0; border: 0; }
#rivet-footer .f2-wa__lead { display: flex; align-items: center; gap: 12px; min-width: 0; }
#rivet-footer .f2-wa__ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 0; border-radius: 8px; background: var(--nv-ghost); color: var(--nv-ink); }
html[data-mode="dark"] #rivet-footer .f2-wa__ic, body.gtm-dark #rivet-footer .f2-wa__ic { background: var(--nv-elev-3); }
#rivet-footer .f2-wa__lead p { margin: 0; font-size: inherit; line-height: 1.45; color: var(--nv-muted); }
#rivet-footer .f2-wa__lead b { color: var(--nv-ink); font-weight: 600; }
#rivet-footer .f2-wa__ctl { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; min-width: 0; }
#rivet-footer .f2-wa.is-done .f2-wa__ctl { display: none; }
#rivet-footer .f2-wa__field {
  display: flex; align-items: stretch; flex: 1 1 260px; min-width: 0; height: 48px; overflow: hidden;
  border: 1px solid var(--nv-hair-strong); border-radius: 8px; background: var(--nv-ground);
}
#rivet-footer .f2-wa.is-err .f2-wa__field { border-color: var(--nv-red); }
#rivet-footer .f2-wa__field:focus-within { outline: 3px solid var(--nv-focus); outline-offset: 2px; }
#rivet-footer .f2-wa__field select {
  -webkit-appearance: none; appearance: none; flex: none; height: auto; margin: 0; padding: 0 12px; border: 0; border-right: 1px solid var(--nv-hair); border-radius: 0;
  background: transparent; color: var(--nv-ink); font: 500 16px/1 var(--nv-mono); cursor: pointer;
}
#rivet-footer .f2-wa__field select option { color: #000; background: #fff; }
#rivet-footer .f2-wa__field input {
  flex: 1; width: auto; min-width: 0; height: auto; margin: 0; padding: 0 14px; border: 0; border-radius: 0; outline: 0; box-shadow: none;
  background: transparent; color: var(--nv-ink); font: 400 16px/1 var(--nv-sans);
}
#rivet-footer .f2-wa__field input::placeholder { color: var(--nv-muted); opacity: 1; }
#rivet-footer .f2-wa__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 20px; margin: 0;
  border: 0 !important; border-radius: 8px; background: var(--nv-btn) !important; color: var(--nv-btn-ink) !important;
  font: 600 16px/1 var(--nv-sans); white-space: nowrap; box-shadow: none; cursor: pointer;
}
#rivet-footer .f2-wa__btn:hover { opacity: .86; }
#rivet-footer .f2-wa__fine { margin: 0; font-size: 14px; line-height: 1.5; color: var(--nv-muted); }
#rivet-footer .f2-wa__fine a { color: var(--nv-ink); text-decoration: underline; text-underline-offset: 2px; }
#rivet-footer .f2-wa__done__t { color: var(--nv-muted); }
#rivet-footer .f2-wa__done__t b { color: var(--nv-ink); }

/* sitemap */
#rivet-footer .ftr__grid {
  display: grid; grid-template-columns: minmax(260px, 1.25fr) repeat(3, minmax(0, 1fr)); gap: 40px 32px; margin-top: 56px;
}
#rivet-footer .ftr__brand { grid-row: span 2; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
#rivet-footer .ftr__logo { display: inline-flex; color: var(--nv-ink); border-radius: 8px; }
#rivet-footer .ftr__logo .rv-logo { width: 110px; height: 26px; }
#rivet-footer .ftr__slogan { margin-top: -6px; font: 400 24px/1 var(--font-script, 'Square Peg', cursive); color: var(--nv-hand); }
#rivet-footer .ftr__line { max-width: 34ch; color: var(--nv-muted); }
#rivet-footer .ftr__apps { display: grid; gap: 10px; }
#rivet-footer .ftr__apps-t { font-size: 14px; color: var(--nv-muted); }
#rivet-footer .ftr__apps-t b { color: var(--nv-ink); font-weight: 600; }
#rivet-footer .ftr__badges { display: flex; flex-wrap: wrap; gap: 8px; }
#rivet-footer .appbadge {
  display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px 0 12px; border: 0; border-radius: 8px;
  background: var(--nv-black); color: var(--nv-white); text-decoration: none; box-shadow: none; transform: none;
}
html[data-mode="dark"] #rivet-footer .appbadge, body.gtm-dark #rivet-footer .appbadge { background: var(--nv-elev-2); box-shadow: inset 0 0 0 1px var(--nv-elev-4); }
#rivet-footer .appbadge:hover { opacity: .86; transform: none; }
#rivet-footer .appbadge span { display: flex; flex-direction: column; line-height: 1.15; }
#rivet-footer .appbadge small { font-size: 11px; letter-spacing: .02em; color: rgba(255, 255, 255, .78); }
#rivet-footer .appbadge b { font-size: 16px; font-weight: 600; color: var(--nv-white); }
#rivet-footer .ftr__market { display: grid; gap: 8px; }

/* the country selector (markup and hooks unchanged: site.js); flags kept, the name carries the meaning */
#rivet-footer .fccy { position: relative; }
#rivet-footer .fccy__btn {
  display: inline-flex; align-items: center; gap: 10px; width: 240px; max-width: 100%; height: 44px; padding: 0 14px; margin: 0;
  border: 1px solid var(--nv-hair-strong); border-radius: 8px; background: var(--nv-ground); color: var(--nv-ink); box-shadow: none;
  font: 500 16px/1 var(--nv-sans); cursor: pointer; text-align: start;
}
#rivet-footer .fccy__btn > span:first-of-type { flex: none; font-size: 18px; }
#rivet-footer .fccy__btn > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#rivet-footer .fccy__car { flex: none; width: 7px; height: 7px; margin-left: auto; border: 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .7; }
#rivet-footer .fccy.open .fccy__car { transform: rotate(-135deg) translateY(-1px); }
#rivet-footer .fccy__menu {
  position: absolute; left: 0; right: auto; bottom: calc(100% + 8px); z-index: 60; min-width: 260px; padding: 6px;
  border: 0; border-radius: 12px; background: var(--nv-panel, var(--nv-white)); box-shadow: var(--nv-shadow);
  opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .2s var(--nv-ease), transform .2s var(--nv-ease), visibility 0s linear .2s;
}
#rivet-footer { --nv-panel: var(--nv-white); }
html[data-mode="dark"] #rivet-footer, body.gtm-dark #rivet-footer { --nv-panel: var(--nv-elev-2); }
#rivet-footer .fccy.open .fccy__menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
#rivet-footer .fccy__opt {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 12px; margin: 0;
  border: 0; border-radius: 8px; background: none; color: var(--nv-ink); font: 400 16px/1.2 var(--nv-sans); text-align: start; cursor: pointer;
}
#rivet-footer .fccy__opt > span:first-child { font-size: 18px; }
#rivet-footer .fccy__opt:hover { background: var(--nv-sunk); }
#rivet-footer .fccy__opt[aria-pressed="true"] { background: var(--nv-tint); font-weight: 600; }
#rivet-footer .fccy__opt[aria-pressed="true"]::after {
  content: ""; width: 10px; height: 5px; margin-left: auto; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translateY(-2px);
}

/* link columns */
#rivet-footer .ftr__col { min-width: 0; }
#rivet-footer .ftr__h { margin-bottom: 12px; }
/* each column is a native <details>: an accordion below 600px. From 600px the summary is not rendered (so no
   screen reader meets a disclosure that does nothing), the plain h2 above it names the column, and site.js keeps
   the details open. Below 600px the h2 is hidden and the summary (with its own h2) is the accordion row. */
#rivet-footer .ftr__sum { display: none; list-style: none; }
@media (max-width: 599px) { #rivet-footer .ftr__h--wide { display: none; } #rivet-footer .ftr__sum { display: block; } }
#rivet-footer .ftr__sum::-webkit-details-marker { display: none; }
#rivet-footer .ftr__sum::marker { content: ""; }
#rivet-footer .ftr__sum:focus-visible { border-radius: 8px; }
#rivet-footer .ftr__col ul { display: grid; gap: 2px; }
#rivet-footer .ftr__col a {
  display: inline-flex; align-items: center; min-height: 32px; color: var(--nv-muted); text-decoration: none; font-size: 16px; line-height: 1.35;
  transition: color .12s var(--nv-ease);
}
#rivet-footer .ftr__col a:hover { color: var(--nv-ink); text-decoration: underline; text-underline-offset: 3px; }
#rivet-footer .ftr__col a[aria-current="page"] { color: var(--nv-ink); font-weight: 600; }

/* Ask AI (hooks unchanged: site.js) */
#rivet-footer .ftr__ask { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; text-align: start; gap: 12px 16px; margin: 48px 0 0; padding: 24px 0 0; border: 0; box-shadow: inset 0 1px 0 var(--nv-hair); background: none; }
#rivet-footer .f2-ask__row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
#rivet-footer .f2-ask__a {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; margin: 0; border: 0; border-radius: 999px;
  background: none; box-shadow: inset 0 0 0 1px var(--nv-hair-strong); color: var(--nv-ink); font: 500 14px/1 var(--nv-sans); text-decoration: none;
}
#rivet-footer .f2-ask__a { width: auto; min-width: 0; }
#rivet-footer .f2-ask__a span {
  position: static; inset: auto; display: inline; padding: 0; margin: 0; border-radius: 0; transform: none; opacity: 1; visibility: visible;
  background: none; color: inherit; box-shadow: none; font: inherit; white-space: nowrap; pointer-events: none;
}
#rivet-footer .f2-ask__a span::before, #rivet-footer .f2-ask__a span::after { content: none; }
#rivet-footer .f2-ask__a:hover, #rivet-footer .f2-ask__a[data-copied] { background: var(--nv-sunk); color: var(--nv-ink); }
#rivet-footer .f2-ask__a svg { width: 14px; height: 14px; }
#rivet-footer .f2-ask__img { width: 15px; height: 15px; object-fit: contain; opacity: 1; filter: none; }
#rivet-footer .f2-ask__img--lg { width: 17px; height: 17px; }
html[data-mode="dark"] #rivet-footer .f2-ask__img, body.gtm-dark #rivet-footer .f2-ask__img { filter: invert(1); }

/* base row */
#rivet-footer .ftr__base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
  margin-top: 24px; padding-top: 24px; box-shadow: inset 0 1px 0 var(--nv-hair); font-size: 14px; color: var(--nv-muted);
}
#rivet-footer .ftr__legal { display: flex; flex-wrap: wrap; gap: 4px 0; flex: 1 1 auto; min-width: 0; }
#rivet-footer .ftr__legal > span + span::before { content: "\00B7"; padding: 0 8px; }
#rivet-footer .ftr__legal b { font-weight: 600; color: var(--nv-ink); }
#rivet-footer .ftr__social { display: flex; flex-wrap: wrap; gap: 4px; }
#rivet-footer .ftr__social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; color: var(--nv-muted); }
#rivet-footer .ftr__social a:hover { color: var(--nv-ink); background: var(--nv-sunk); }
#rivet-footer .ftr__social svg { width: 16px; height: 16px; }

@media (max-width: 1100px) {
  #rivet-footer .ftr__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #rivet-footer .ftr__brand { grid-column: 1 / -1; grid-row: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px 32px; }
  #rivet-footer .ftr__brand > .ftr__logo, #rivet-footer .ftr__brand > .ftr__slogan, #rivet-footer .ftr__brand > .ftr__line { grid-column: 1; }
  #rivet-footer .ftr__apps { grid-column: 2; grid-row: 1 / span 3; }
  #rivet-footer .ftr__market { grid-column: 2; }
  #rivet-footer .ftr__legal { flex-direction: column; gap: 4px; }
  #rivet-footer .ftr__legal > span + span::before { content: none; }
}
@media (max-width: 760px) {
  #rivet-footer { padding: 48px 0 24px; font-size: 14px; }
  #rivet-footer .ftr__in { padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
  #rivet-footer .ftr__join { grid-template-columns: 1fr; padding: 24px 20px; border-radius: 12px; }
  #rivet-footer .f2-wa__ctl { flex-direction: column; }
  #rivet-footer .f2-wa__field { flex: none; width: 100%; }
  #rivet-footer .f2-wa__btn { width: 100%; }
  #rivet-footer .ftr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; margin-top: 40px; }
  #rivet-footer .ftr__brand { display: flex; }
  #rivet-footer .ftr__slogan { font-size: 20px; }
  #rivet-footer .ftr__col a { min-height: 40px; font-size: 16px; }
  #rivet-footer .ftr__ask { margin-top: 32px; }
  #rivet-footer .ftr__base { flex-direction: column; align-items: flex-start; }
  #rivet-footer .ftr__legal { flex-direction: column; gap: 4px; }
  #rivet-footer .ftr__legal > span + span::before { content: none; }
  #rivet-footer .f2-ask__a { height: 40px; }
  /* clear the floating voice widget (bottom right) on phones */
  body:has(elevenlabs-convai) #rivet-footer { padding-bottom: calc(24px + 92px); }
}
/* phones: the six link columns fold into one accordion list (native <details>, one summary row each) */
@media (max-width: 599px) {
  #rivet-footer .ftr__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  #rivet-footer .ftr__brand { margin-bottom: 32px; }
  #rivet-footer .ftr__col { box-shadow: inset 0 -1px 0 var(--nv-hair); }
  #rivet-footer .ftr__col:first-of-type { box-shadow: inset 0 1px 0 var(--nv-hair), inset 0 -1px 0 var(--nv-hair); }
  #rivet-footer .ftr__sum { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; cursor: pointer; }
  #rivet-footer .ftr__sum .ftr__h { margin: 0; color: var(--nv-ink); }
  #rivet-footer .ftr__sum::after {
    content: ""; flex: none; width: 8px; height: 8px; margin-right: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    color: var(--nv-muted); transform: rotate(45deg) translateY(-3px); transition: transform .2s var(--nv-ease);
  }
  #rivet-footer .ftr__acc[open] > .ftr__sum::after { transform: rotate(-135deg) translateY(-1px); }
  #rivet-footer .ftr__acc ul { padding: 0 0 12px; }
}
/* the round voice button (voice.js) sits in the bottom-right corner: the last row scrolls clear of it */
@media (min-width: 761px) { body:has(elevenlabs-convai) #rivet-footer { padding-bottom: calc(32px + 72px + env(safe-area-inset-bottom, 0px)); } }
@media print { #rivet-header, #rivet-footer .ftr__join, #rivet-footer .ftr__ask { display: none !important; } }

/* round 5: the two new courses carry a "coming" label in the footer list (the mega menu uses .hdr-link__meta) */
#rivet-footer .ftr__soon { margin-left: 8px; padding: 2px 6px; border-radius: 4px; background: var(--nv-sunk); font: 500 11px/1.3 var(--nv-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--nv-muted); }