/* FSPreif — design system.
 *
 * ONE file owns the tokens, the type scale, the spacing scale and every shared
 * primitive (surface, button, field, table, notice, report). site.css is loaded
 * by EVERY page — marketing, product and admin — so a primitive is defined here
 * exactly once. app.css adds product-only components and never redefines a
 * primitive; admin.css does the same for the owner panel.
 *
 * THE HOUSE STYLE IS NT2EXAM'S. FSPreif and NT2exam are the same owner's two
 * products and were reading as two companies, so the identity below is LIFTED
 * from nt2exam's own token source (src/app/product/nt2/product.config.js ->
 * brandTokensCss(), shipped as /brand/tokens.css) rather than eyeballed from a
 * screenshot: the palette, the two type families, the four radii, the six
 * spacing steps, the four blue-tinted shadows, the page measure, the motion
 * curve and the 44px tap floor are the same numbers, name for name.
 *
 * WHAT IS FSPREIF'S OWN AND STAYS: the wordmark treatment (FSP bold + reif in
 * the brand colour — now the shared navy rather than a second, brighter blue),
 * the verdict palette (strong/moderate/weak) which has to survive on a report
 * and is therefore the accessible pair from each of nt2's own semantic roles,
 * and the German/Arabic type pairing.
 *
 * Rules of the system
 *   - Spacing comes from --s1..--s9. No one-off margins anywhere.
 *   - Type comes from --fs-*. Headings in the display family, body in the text
 *     family; weights 400/500/600 body, 600/700 display — the faces shipped.
 *   - One surface: 1px var(--line), var(--radius-lg), white, var(--shadow-card).
 *   - Everything pressable is a PILL at least var(--tap) tall.
 *   - Three button levels: primary / secondary / quiet (+ the on-dark pair).
 *   - Everything directional is logical (inline-start/end) so RTL mirrors. The
 *     accent bar on a feature card is border-inline-start and therefore lands
 *     on the reading-start side in Arabic without a second rule.
 */
@font-face{font-family:"Inter";src:url("/assets/fonts/Inter-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/Inter-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/Inter-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("/assets/fonts/Archivo-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("/assets/fonts/Archivo-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"NotoArabicX";src:url("/assets/fonts/NotoSansArabic-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011}

:root{
  color-scheme:light;

  /* ---- palette — nt2exam's, role for role ---- */
  --ink:#1A2238;                      /* body text */
  --ink-mid:#28304A;                  /* prose inside a panel */
  --muted:#5A6072;                    /* secondary text, captions (nt2 inkSoft) */
  --faint:#93A0B8;                    /* the quietest legible grey on paper */
  --paper:#FFFFFF;
  --wash:#F6F8FC;                     /* THE PAGE: a cool near-white, not white */
  --grey:#F6F8FC;                     /* legacy name for the wash */
  --sunken:#E8EBF2;                   /* an inert track: a surface BELOW the page */
  --line:#E3E8F0;                     /* hairlines and card borders */
  --line-soft:#EDF1F7;
  --line-strong:#C9D5E8;              /* the border of something you type into */

  /* THE one brand colour. Solid navy for the inverted hero, for every button
     that starts something, and for the accent bar on a feature card. */
  --blue:#14346B;
  --blue-deep:#0E2A5C;
  --blue-tint:#EAF0FB;                /* the accent as a tint (nt2 accentSoft) */
  --blue-line:#9DB6E0;                /* the visible accent edge */
  --link:#2457C5;                     /* inline links: brighter than the chrome */
  --link-soft:#EEF3FF;                /* the tint behind a quoted example */
  /* The light stop of the hero gradient, and the two inks that survive on it.
     PRECOMPUTED, not color-mix(): color-mix() is a SyntaxError before Safari
     16.2 and takes the whole declaration with it, which turns a navy panel into
     white type on a near-white page with no console error. Same three values
     nt2exam's build emits. */
  --hero-end:#48618C;
  --hero-lede-ink:#F6F7F9;
  --hero-proof-ink:#F1F3F6;
  --on-navy-08:rgba(255,255,255,.08);
  --on-navy-12:rgba(255,255,255,.12);
  --on-navy-16:rgba(255,255,255,.16);
  --on-navy-24:rgba(255,255,255,.24);
  --on-navy-34:rgba(255,255,255,.34);
  --paper-a94:rgba(255,255,255,.94);

  /* The one warm accent, rationed. Two values because one cannot do both jobs:
     #F5A524 is 2.04:1 on white — correct as a rule or a fill, unreadable as
     text — so any TEXT in the accent takes the deep value (5.19:1 on white). */
  --warm:#F5A524;
  --warm-deep:#A15C00;
  --warm-wash:rgba(245,165,36,.08);

  /* ---- verdict palette (report). nt2's semantic roles, plus the hairline
         each one needs to sit in a bordered box. ---- */
  --strong:#247247;
  --strong-bg:#E7F3EC;
  --strong-line:#BFDCCC;
  --moderate:#6B5200;
  --moderate-bg:#FFF5D0;
  --moderate-line:#EBD79A;
  --weak:#A8462E;
  --weak-bg:#FBE9E8;
  --weak-line:#EFC9C1;

  /* ---- spacing scale — nt2exam's six steps, plus three larger ones for the
         full-bleed marketing bands this product has and nt2 does not ---- */
  --s1:0.35rem; --s2:0.6rem; --s3:0.9rem; --s4:1.2rem; --s5:1.8rem;
  --s6:2.6rem; --s7:3.6rem; --s8:5rem; --s9:7rem;

  /* ---- rhythm ---- */
  --maxw:70rem;                       /* nt2's page measure */
  --maxw-narrow:40rem;
  --pad:clamp(1.25rem,4vw,2rem);      /* nt2's --gutter: ONE inset, everywhere */
  --band-y:clamp(2.6rem,7vw,4.5rem);  /* marketing section block padding */
  --page-y:clamp(1.8rem,5vw,3.2rem);  /* inner page + app shell block padding */
  --hero-y:clamp(1.8rem,5vw,3rem);
  --sec-gap:clamp(1.2rem,3vw,1.8rem); /* section head -> its content */
  --gap:var(--s4);                    /* grid gutter, every grid */
  --stack:var(--s4);                  /* between stacked sibling cards */
  --card-pad:clamp(1.2rem,2.4vw,1.8rem);

  /* ---- type scale — nt2's clamps ---- */
  --fs-caps:0.76rem;
  --fs-sm:0.85rem;
  --fs-md:0.95rem;
  --fs-base:1rem;
  --fs-lg:1.15rem;
  --fs-2xl:clamp(1.45rem,2.8vw,1.95rem);
  --fs-3xl:clamp(2rem,4.5vw,2.75rem);
  --fs-num:clamp(1.8rem,4vw,2.5rem);

  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;
  --font-display:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-ar:"NotoArabicX","Inter",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  /* ---- four radii, and everything pressable is a pill ---- */
  --radius-sm:0.8rem;
  --radius:1.1rem;
  --radius-lg:1.45rem;
  --radius-xl:2rem;
  --radius-pill:999px;

  /* ---- the four shadows, all one blue at four depths. Tinted with the chrome
         navy rather than black: a black shadow on a cool page reads as dirt. */
  --shadow-card:0 12px 32px rgba(20,52,107,.07);
  --shadow-lift:0 18px 42px rgba(20,52,107,.12);
  --shadow-panel:0 24px 72px rgba(20,52,107,.16);
  --shadow-hero:0 24px 72px rgba(14,42,92,.24);

  --motion:180ms cubic-bezier(.2,.8,.2,1);
  --tap:44px;                         /* minimum touch target */
}

*,*::before,*::after{box-sizing:border-box}
input[type="hidden"]{display:none!important}
.nb{white-space:nowrap}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--wash);color:var(--ink);
  font-family:var(--font);font-size:var(--fs-base);line-height:1.6;
  font-feature-settings:"kern" 1;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
html[lang="ar"] body{font-family:var(--font-ar);line-height:1.85;font-size:1.05rem}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--blue-deep);text-underline-offset:.22em}
::selection{background:var(--blue);color:#fff}
/* Headings are set in the DISPLAY family — the family the wordmark is drawn in
   — and the body in the text family. Tight and heavy: 600 is Archivo SemiBold,
   which at these sizes is heavier than most families' bold. */
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.14;margin:0;letter-spacing:-.025em;font-weight:600;overflow-wrap:break-word}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4{font-family:var(--font-ar);letter-spacing:0;line-height:1.4;font-weight:700}
h1{font-size:var(--fs-2xl)}
h2{font-size:var(--fs-lg)}
h3{font-size:var(--fs-lg);line-height:1.3}
h4{font-size:var(--fs-base)}
p{margin:0}
strong,b{font-weight:600}
ul,ol{margin:0;padding:0;list-style:none}
/* A 3px ring in the chrome navy with a white halo, so focus survives both on
   the wash page and on the navy panels. */
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}
.band--ink :focus-visible,.footer :focus-visible,.hero :focus-visible{outline-color:#fff}

.skip{position:absolute;inset-inline-start:-9999px;top:0;background:var(--blue);color:#fff;padding:var(--s3) var(--s4);z-index:100;border-end-end-radius:var(--radius-sm);font-weight:600;text-decoration:none}
.skip:focus{inset-inline-start:0}

/* ---------- containers: ONE width, ONE gutter, everywhere ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);min-width:0}
.wrap--narrow{max-width:var(--maxw-narrow)}
.band{padding-block:var(--band-y)}
/* The page is the cool wash; an alternating band is WHITE PAPER on it, which is
   the same figure/ground the cards use. It was the other way round (white page,
   grey band) and on a wash page that reads as a hole. */
.band--grey{background:var(--paper);border-block:1px solid var(--line)}
/* The one big coloured surface, and the only place white type appears. Nothing
   below it is reversed, which is what keeps long reading comfortable. */
.band--ink{color:#fff}

/* ---------- spacing utilities (the scale, nothing else) ---------- */
.mt-1{margin-top:var(--s1)}.mt-2{margin-top:var(--s2)}.mt-3{margin-top:var(--s3)}
.mt-4{margin-top:var(--s4)}.mt-5{margin-top:var(--s5)}.mt-6{margin-top:var(--s6)}
.mb-2{margin-bottom:var(--s2)}.mb-3{margin-bottom:var(--s3)}.mb-4{margin-bottom:var(--s4)}
.mb-5{margin-bottom:var(--s5)}
.stack>*+*{margin-top:var(--s3)}
.stack--lg>*+*{margin-top:var(--s4)}

/* ---------- wordmark ----------
   FSPreif's own locked treatment — FSP bold, reif in the brand colour — set in
   the DISPLAY family so it is drawn in the same face as the NT2exam mark. The
   only thing the house style changed is the blue: it is now the shared navy,
   which is the whole point of the two products sharing a palette. */
.wordmark{
  font-family:var(--font-display);
  font-size:1.6rem;line-height:1;letter-spacing:-.03em;
  display:inline-flex;align-items:center;min-height:var(--tap);
  text-decoration:none;white-space:nowrap;direction:ltr;unicode-bidi:isolate;
}
.wordmark .fsp{font-weight:700;color:var(--ink);letter-spacing:-.02em}
.wordmark .reif{font-weight:600;color:var(--blue)}
.wordmark:hover .fsp{color:var(--ink)}
.footer .wordmark{min-height:0}

/* ---------- header (identical shell on marketing and product) ---------- */
.stagingbar{background:var(--blue-deep);color:#fff;font-size:var(--fs-caps);letter-spacing:.09em;text-transform:uppercase;font-weight:600;padding:var(--s2) var(--s3);text-align:center}
html[lang="ar"] .stagingbar{letter-spacing:0;text-transform:none}
.header{position:sticky;top:0;z-index:50;background:var(--paper-a94);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.header__in{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s5);
  min-height:64px;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);
  padding-block:var(--s2);
}
/* Plain text nav that becomes a soft pill under the pointer — nt2's .nav-links.
   Nothing in the header is a filled shape except the one signed-out CTA. */
.header__nav{display:flex;flex-wrap:nowrap;gap:var(--s1);align-items:center;margin-inline-start:auto}
.header__nav a{color:var(--muted);text-decoration:none;font-size:var(--fs-md);font-weight:600;white-space:nowrap;
  display:inline-flex;align-items:center;min-height:var(--tap);padding-inline:.72rem;border-radius:var(--radius-pill)}
.header__nav a:hover{background:var(--blue-tint);color:var(--blue);text-decoration:none}
.header__right{display:flex;align-items:center;gap:var(--s3);margin-inline-start:auto}
.header__nav+.header__right{margin-inline-start:0}
/* Phones. The MARKETING nav is four anchors to sections of the page below it,
   so it hides — the page itself is the navigation. The PRODUCT nav is not
   optional: a signed-in user on a 360px phone must still reach Train, History
   and Logout, so it drops to its own full-width scrollable row instead. */
@media (max-width:919px){
  .header__nav{display:none}
  .header__nav.appnav{display:flex;order:3;width:100%;margin-inline-start:0;
    flex-wrap:wrap;gap:0 var(--s4);border-top:1px solid var(--line-soft)}
  .header__nav.appnav .linkbtn{white-space:nowrap}
}
.langs{display:flex;align-items:center;gap:2px;border:1px solid var(--line-strong);border-radius:var(--radius-pill);padding:3px;background:var(--paper)}
.langs a,.langs span{
  font-size:var(--fs-caps);line-height:1;border-radius:var(--radius-pill);text-decoration:none;
  color:var(--muted);font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;min-height:38px;padding:0;
}
.langs a:hover{background:var(--blue-tint);color:var(--blue)}
.langs [aria-current="true"]{background:var(--blue);color:#fff;font-weight:600}

/* ---------- buttons ----------
   ONE shape: a pill, at least --tap tall, weight 600. Four intents. Nothing
   else in the product is pressable-looking. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:var(--tap);padding:.72rem 1.1rem;
  border-radius:var(--radius-pill);font-size:var(--fs-base);font-weight:600;
  font-family:inherit;line-height:1.2;text-decoration:none;text-align:center;
  border:1px solid transparent;cursor:pointer;
  transition:background var(--motion),border-color var(--motion),color var(--motion),box-shadow var(--motion),transform var(--motion);
}
.btn--sm{padding:.5rem .95rem;font-size:var(--fs-md)}
.btn--block{display:flex;width:100%}
.btn--primary{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:var(--shadow-card)}
/* Stated as a full set — background, colour and shadow together — so a browser
   that discards one line cannot leave the label unreadable. */
.btn--primary:hover{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff;box-shadow:var(--shadow-lift);transform:translateY(-1px);text-decoration:none}
/* .btn--ghost is the historical name of the SECONDARY level; both resolve here
   so the product has one outline button, not two that differ by a pixel. */
.btn--secondary,.btn--ghost{background:var(--blue-tint);color:var(--blue);border-color:var(--blue-line)}
.btn--secondary:hover,.btn--ghost:hover{background:var(--link-soft);border-color:var(--blue);color:var(--blue-deep);text-decoration:none}
.btn--quiet{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn--quiet:hover{border-color:var(--blue-line);color:var(--blue);text-decoration:none}
.btn--danger{background:var(--weak);color:#fff;border-color:var(--weak);box-shadow:var(--shadow-card)}
.btn--danger:hover{background:#8E3826;border-color:#8E3826;color:#fff}
/* On the navy panel the primary REVERSES — white on the panel — and the
   secondary becomes a hairline outline rather than a second filled shape. */
.btn--light{background:var(--paper);color:var(--blue);border-color:var(--paper)}
.btn--light:hover{background:var(--blue-tint);border-color:var(--blue-tint);color:var(--blue-deep)}
.btn--ghostlight{background:var(--on-navy-08);color:#fff;border-color:var(--on-navy-34)}
.btn--ghostlight:hover{background:var(--on-navy-16);border-color:#fff;color:#fff}
/* ON THE NAVY PANEL THE PAIR REVERSES, and it has to: the hero's call to
   action is .btn--primary, which is navy — on a navy panel that is a navy
   button on a navy background, and the SECONDARY next to it (a pale blue tint)
   became the loudest thing in the hero. The hierarchy read backwards. So on any
   inverted surface the primary goes solid white with navy type, and the
   secondary drops to a translucent hairline outline rather than being a second
   filled shape. Stated as a full set — background, colour AND border — so a
   browser that discards one declaration cannot leave the label unreadable. */
.hero .btn--primary,.band--ink .btn--primary{background:var(--paper);color:var(--blue);border-color:var(--paper)}
.hero .btn--primary:hover,.band--ink .btn--primary:hover{background:var(--blue-tint);color:var(--blue-deep);border-color:var(--blue-tint)}
.hero .btn--secondary,.hero .btn--ghost,.hero .btn--quiet,
.band--ink .btn--secondary,.band--ink .btn--ghost,.band--ink .btn--quiet{
  background:var(--on-navy-08);border-color:var(--on-navy-34);color:#fff;
}
.hero .btn--secondary:hover,.hero .btn--ghost:hover,.hero .btn--quiet:hover,
.band--ink .btn--secondary:hover,.band--ink .btn--ghost:hover,.band--ink .btn--quiet:hover{
  background:var(--on-navy-16);border-color:#fff;color:#fff;
}
.btn:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn--primary:hover{transform:none}}
.band--ink .btn:focus-visible,.footer .btn:focus-visible{outline-color:#fff}
.btn[disabled],.btn[aria-disabled="true"],.btn.is-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
.btn.is-loading{position:relative;color:transparent}
.btn.is-loading::after{
  content:"";position:absolute;width:16px;height:16px;border-radius:50%;
  border:2px solid #fff;border-top-color:transparent;
  animation:btnspin .7s linear infinite;
}
.btn--secondary.is-loading::after,.btn--ghost.is-loading::after,.btn--quiet.is-loading::after,.btn--light.is-loading::after{border-color:var(--ink);border-top-color:transparent}
@keyframes btnspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.btn.is-loading::after{animation:none}}
/* A row of buttons: equal heights, aligned, forms transparent to the layout. */
.rowbtns,.pagenav,.hero__cta,.freecta{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.rowbtns>form,.pagenav>form{display:flex;margin:0}
.rowbtns>form>.btn,.pagenav>form>.btn{width:100%}

/* ---------- surfaces: ONE card treatment ----------
   White, one blue-tinted hairline, one soft blue-tinted shadow, one generous
   corner, one padding step. Every panel in the product is this. */
.card,.card2,.plan,.incl,.traincard,.strip,.panel,.report,.infotable,.riskitem,.modepick,.freebox,.draft,.voicepanel,.sesbar{
  border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--paper);
  box-shadow:var(--shadow-card);
}
.card,.card2,.plan,.incl,.traincard,.strip,.riskitem,.freebox{padding:var(--card-pad)}
.card2+.card2,.card2+.tx,.tx+.card2,.card2+.pageactions,.tx+.tx,.tx+.pageactions{margin-top:var(--stack)}
.card h3,.card2>h2,.plan h2,.incl h3,.traincard h3,.strip__t,.freebox h3,.block__name{
  font-family:var(--font-display);font-size:var(--fs-lg);letter-spacing:-.025em;font-weight:600;
}
/* Cards lift 2px under a pointer and take the visible accent edge — nt2's one
   hover affordance, applied to the tiles that are actually interactive. */
@media (hover:hover){
  .card:hover,.plan:hover,.traincard:hover{border-color:var(--blue-line);box-shadow:var(--shadow-lift);transform:translateY(-2px)}
  .card,.plan,.traincard{transition:border-color var(--motion),box-shadow var(--motion),transform var(--motion)}
}
@media (prefers-reduced-motion:reduce){.card,.plan,.traincard{transition:none}.card:hover,.plan:hover,.traincard:hover{transform:none}}
.card h3,.incl h3,.traincard h3,.freebox h3{margin-bottom:var(--s3)}
.card2>h2{margin-bottom:var(--s3)}
.card2>h3{font-size:var(--fs-base);margin-bottom:var(--s2)}
.card p{color:var(--muted);font-size:var(--fs-base)}

/* ---------- grids: equal width, equal height, no orphan tile ---------- */
.cards,.blocks,.plans,.cardgrid,.grid2{display:grid;gap:var(--gap);align-items:stretch}
.cards--3,.blocks,.plans,.grid2{grid-template-columns:1fr}
@media (min-width:800px){.cards--3,.blocks,.plans{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:840px){.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* auto-fit so N tiles never leave a half-width orphan on the last row */
.cardgrid{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}

/* ---------- section head ----------
   The eyebrow above a heading: small, uppercase, letter-spaced, in the chrome
   navy. Plain text on a white surface, a translucent pill on the navy panel
   (see .hero .eyebrow below). */
.kicker,.eyebrow{font-size:var(--fs-caps);letter-spacing:.09em;text-transform:uppercase;color:var(--blue);font-weight:600;margin-bottom:var(--s2)}
html[lang="ar"] .kicker,html[lang="ar"] .eyebrow{letter-spacing:0;text-transform:none}
.sec__title{font-size:var(--fs-2xl);max-width:22ch}
.sec__intro{margin-top:var(--s3);color:var(--ink-mid);max-width:68ch;font-size:clamp(1rem,2vw,1.12rem);line-height:1.55}
.sec__head{margin-bottom:var(--sec-gap);max-width:46rem}

/* ---------- hero ----------
   THE INVERTED NAVY CARD. The section is the wash page; the .wrap inside it is
   the panel — a navy gradient, the extra-large corner and the deep shadow, with
   the white run-panel floating on top of it. It is the ONE coloured surface and
   the only place white type appears. */
.hero{padding-block:var(--hero-y);padding-inline:var(--pad)}
.hero__grid{
  display:grid;gap:var(--s5);
  padding:clamp(1.4rem,5vw,3rem);
  border:1px solid var(--on-navy-12);border-radius:var(--radius-xl);
  background:linear-gradient(135deg,var(--blue-deep) 0%,var(--blue) 52%,var(--hero-end) 100%);
  box-shadow:var(--shadow-hero);color:#fff;
}
@media (min-width:960px){.hero__grid{grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);align-items:center;gap:clamp(1.2rem,4vw,2.4rem)}}
.hero h1{font-size:var(--fs-3xl);color:#fff;max-width:22ch}
.hero h1 .l2{color:var(--hero-proof-ink)}
.hero h1 .l3{display:block;margin-top:.18em}
/* The eyebrow on the hero is a pill: its border and translucent fill are what
   make it secondary, so the WORDS in it stay at full strength. Softening the
   ink measured 4.00 on the lightest stop of the gradient — under the floor. */
/* inline-block, NOT inline-flex + fit-content: a <p> is a block box, and
   `width:fit-content` is the only thing that would shrink it — which several
   renderers do not implement, leaving the pill stretched across the whole
   panel. An inline-block shrinks to its content everywhere. */
.hero .eyebrow{
  display:inline-block;
  padding:.35rem .8rem;border:1px solid var(--on-navy-34);border-radius:var(--radius-pill);
  background:var(--on-navy-08);color:#fff;
}
.hero__sub{margin-top:var(--s4);font-size:clamp(1rem,2vw,1.12rem);line-height:1.55;color:var(--hero-lede-ink);max-width:40rem}
.hero__cta{margin-top:var(--s4)}
.hero__note{margin-top:var(--s3);font-size:var(--fs-sm);color:var(--hero-proof-ink);max-width:48ch}
.hero__bullets{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--on-navy-16);display:grid;gap:var(--s2)}
.hero__bullets li{position:relative;padding-inline-start:var(--s5);font-size:var(--fs-md);color:var(--hero-proof-ink)}
.hero__bullets li::before{content:"";position:absolute;inset-inline-start:0;top:.55em;width:9px;height:9px;border:2px solid var(--on-navy-34);border-radius:50%}

/* run panel — the white card floating on the hero */
.panel{overflow:hidden}
.hero .panel{box-shadow:var(--shadow-panel);color:var(--ink)}
.panel__head{background:var(--wash);border-bottom:1px solid var(--line);padding:var(--s3) var(--card-pad);font-size:var(--fs-caps);letter-spacing:.09em;text-transform:uppercase;color:var(--blue);font-weight:600}
html[lang="ar"] .panel__head{letter-spacing:0;text-transform:none}
.panel__list{padding:var(--s2) var(--card-pad) var(--s4)}
.step{display:flex;gap:var(--s3);padding-block:var(--s3);border-bottom:1px solid var(--line-soft)}
.step:last-child{border-bottom:0}
.step__n{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--blue-tint);color:var(--blue);font-size:var(--fs-caps);font-weight:600;display:grid;place-items:center;margin-top:2px}
.step__body{min-width:0}
/* block, not inline: otherwise a short block name ("Arztbrief") keeps its meta
   on the same line while the longer two sit on a second — a ragged list. */
.step__name{display:block;font-weight:600;font-size:var(--fs-base)}
.step__meta{display:block;font-size:var(--fs-sm);color:var(--muted);margin-top:2px}
.step__meta .dot{margin-inline:6px;color:var(--line-strong)}
.panel__foot{background:var(--blue-tint);border-top:1px solid var(--blue-line);padding:var(--s4) var(--card-pad)}
.panel__foot strong{display:block;color:var(--blue);font-size:var(--fs-base);font-weight:600}
.panel__foot span{font-size:var(--fs-sm);color:var(--muted)}

/* ---------- exam blocks ----------
   THE ACCENT BAR. A run of white rectangles on a near-white page is
   distinguishable only by its hairlines; a full-weight navy rule on the
   READING-START edge makes each one read as a distinct thing. It is
   border-inline-start, so in Arabic it moves to the right-hand edge with the
   text and needs no second rule. */
.block{
  border:1px solid var(--line);border-inline-start:4px solid var(--blue);
  border-radius:var(--radius-lg);background:var(--paper);box-shadow:var(--shadow-card);
  display:flex;flex-direction:column;overflow:hidden;
}
.block__top{padding:var(--card-pad) var(--card-pad) var(--s3);border-bottom:1px solid var(--line-soft)}
.block__idx{font-size:var(--fs-caps);font-weight:600;color:var(--blue);letter-spacing:.09em}
.block__name{margin-top:var(--s2)}
.block__tags{margin-top:var(--s3);display:flex;flex-wrap:wrap;gap:var(--s2)}
.tag{font-size:var(--fs-caps);border:1px solid var(--line);border-radius:var(--radius-pill);padding:.25rem .7rem;color:var(--muted);background:var(--wash);white-space:nowrap}
.tag--time{background:var(--blue);color:#fff;border-color:var(--blue);font-weight:600}
.block__body{padding:var(--s4) var(--card-pad);color:var(--ink-mid);font-size:var(--fs-base);flex:1}
.block__eval{padding:var(--s4) var(--card-pad) var(--card-pad);border-top:1px solid var(--line-soft);background:var(--wash)}
.block__eval h4{font-family:var(--font);font-size:var(--fs-caps);letter-spacing:.09em;text-transform:uppercase;color:var(--blue);font-weight:600;margin-bottom:var(--s3)}
html[lang="ar"] .block__eval h4{letter-spacing:0;text-transform:none;font-size:var(--fs-sm)}
.block__eval li{font-size:var(--fs-md);color:var(--ink-mid);padding-inline-start:var(--s5);position:relative;margin-bottom:var(--s2)}
.block__eval li:last-child{margin-bottom:0}
.block__eval li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:8px;height:2px;background:var(--blue-line)}
/* A quiet aside, in the palette's softest blue behind the same accent rule. */
.footnote{
  margin-top:var(--s5);font-size:var(--fs-md);color:var(--ink-mid);max-width:68ch;
  border:1px solid var(--blue-line);border-inline-start:4px solid var(--blue);
  border-radius:var(--radius-sm);background:var(--link-soft);
  padding:var(--s3) var(--s4);
}

/* ---------- report (identical on the marketing demo and inside the product) ---------- */
.report{box-shadow:var(--shadow-panel);overflow:hidden}
.report__bar{background:var(--blue);color:#fff;padding:var(--s3) var(--card-pad);display:flex;flex-wrap:wrap;gap:var(--s2);align-items:baseline;justify-content:space-between}
.report__bar .lbl{font-size:var(--fs-caps);letter-spacing:.09em;text-transform:uppercase;color:#fff;font-weight:600}
html[lang="ar"] .report__bar .lbl{letter-spacing:0;text-transform:none}
.report__case{font-size:var(--fs-sm);color:var(--hero-proof-ink);direction:ltr;unicode-bidi:isolate}
.report__diff{font-size:var(--fs-caps);color:var(--hero-proof-ink);margin-inline-start:auto}
.report__sec{padding:var(--card-pad);border-bottom:1px solid var(--line-soft)}
.report__sec:last-child{border-bottom:0}
/* The small-caps label on each part of a quoted result — nt2's mark-criterion
   labels. Uppercase, letter-spaced, in the chrome navy. */
.report__cap,.evi,.evi__cap,.timer__cap,.turn__who{font-size:var(--fs-caps);letter-spacing:.09em;text-transform:uppercase;color:var(--blue);font-weight:600;margin-bottom:var(--s3)}
html[lang="ar"] .report__cap,html[lang="ar"] .evi,html[lang="ar"] .evi__cap,html[lang="ar"] .turn__who{letter-spacing:0;text-transform:none;font-size:var(--fs-sm)}
.report__note{margin-top:var(--s5);font-size:var(--fs-sm);color:var(--muted);max-width:70ch}

/* one overall pill, one label chip, one track — used by BOTH reports */
.overall,.overallbox{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.overall__pill{
  display:inline-block;font-family:var(--font-display);font-size:clamp(1.05rem,2vw,1.3rem);font-weight:600;letter-spacing:-.01em;
  padding:var(--s2) var(--s4);border-radius:var(--radius-pill);border:1px solid transparent;
  direction:ltr;unicode-bidi:isolate;
}
.is-needs_work{background:var(--weak-bg);color:var(--weak);border-color:var(--weak-line)}
.is-almost{background:var(--moderate-bg);color:var(--moderate);border-color:var(--moderate-line)}
.is-ready{background:var(--strong-bg);color:var(--strong);border-color:var(--strong-line)}
.overall__note{font-size:var(--fs-sm);color:var(--muted);max-width:40ch}
.dims{display:grid;gap:var(--s4)}
@media (min-width:680px){.dims{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s6)}}
.dim__row,.dimrow__top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);margin-bottom:var(--s2)}
.dim__name,.dimrow__name{font-weight:600;font-size:var(--fs-md);direction:ltr;unicode-bidi:isolate}
html[lang="ar"] .dim__name,html[lang="ar"] .dimrow__name{text-align:start}
.dim__label,.dimlabel{font-size:var(--fs-caps);letter-spacing:.06em;text-transform:uppercase;font-weight:600;padding:.2rem .6rem;border-radius:var(--radius-pill);white-space:nowrap}
html[lang="ar"] .dim__label,html[lang="ar"] .dimlabel{letter-spacing:0;text-transform:none;font-size:var(--fs-sm)}
.dim__label.strong,.dimlabel.strong{background:var(--strong-bg);color:var(--strong)}
.dim__label.moderate,.dimlabel.moderate{background:var(--moderate-bg);color:var(--moderate)}
.dim__label.weak,.dimlabel.weak{background:var(--weak-bg);color:var(--weak)}
.dim__track,.track{height:6px;background:var(--sunken);border-radius:var(--radius-pill);overflow:hidden;border:1px solid var(--line-soft)}
.dim__fill,.track__fill{height:100%;border-radius:var(--radius-pill)}
.dim__fill.strong,.track__fill.strong{background:var(--strong)}
.dim__fill.moderate,.track__fill.moderate{background:var(--warm)}
.dim__fill.weak,.track__fill.weak{background:var(--weak)}
.omission{display:flex;gap:var(--s3);align-items:flex-start;background:var(--weak-bg);border:1px solid var(--weak-line);border-inline-start:4px solid var(--weak);border-radius:var(--radius-sm);padding:var(--s3) var(--s4)}
.omission__mark{flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:var(--weak);color:#fff;font-size:var(--fs-caps);font-weight:600;display:grid;place-items:center;margin-top:2px}
.omission__txt{display:block;font-weight:600;font-size:var(--fs-base);direction:ltr;unicode-bidi:isolate;text-align:start}
.omission__ref{display:block;font-size:var(--fs-caps);color:var(--muted);font-weight:400;margin-top:2px;direction:ltr;unicode-bidi:isolate;text-align:start}
.risk{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.risk__head{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;padding:var(--s3) var(--s4);background:var(--wash);border-bottom:1px solid var(--line)}
.risk__name{font-weight:600;font-size:var(--fs-base);direction:ltr;unicode-bidi:isolate}
.risk__code{font-size:var(--fs-caps);color:var(--muted);font-family:var(--mono);direction:ltr;unicode-bidi:isolate}
.risk__body{padding:var(--s4)}
/* The BOX follows the page direction so its rule sits on the reading-start
   side and mirrors in Arabic; the German text inside is an explicit LTR
   isolate (.quote__t) so its punctuation stays exact. */
.quote{
  border-inline-start:4px solid var(--blue-line);padding:var(--s2) var(--s3);
  border-radius:var(--radius-sm);background:var(--link-soft);
  margin:0;font-size:var(--fs-base);font-style:normal;font-family:var(--font);
  text-align:start;color:var(--ink);line-height:1.6;
}
.quote__t{direction:ltr;unicode-bidi:isolate;display:inline}
.quote em{font-style:normal;background:var(--weak-bg);border-bottom:2px solid var(--weak);padding:0 2px}
.quote__ts{display:inline-block;margin-inline-start:var(--s2);font-size:var(--fs-caps);color:var(--muted);font-family:var(--mono);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.fix{margin-top:var(--s3);display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;font-size:var(--fs-md)}
/* the arrow and the wording it points at move as one item, so the arrow can
   never end up alone on a line of its own at 360px */
.fix__to{display:inline-flex;align-items:center;gap:var(--s2)}
.fix__cap{color:var(--muted);font-size:var(--fs-sm)}
/* ONE term chip: demo report, product report and train all use this */
.term{font-family:var(--font);font-weight:600;border-radius:var(--radius-pill);padding:.15rem .6rem;direction:ltr;unicode-bidi:isolate}
.term--bad{background:var(--weak-bg);color:var(--weak)}
.term--good{background:var(--strong-bg);color:var(--strong)}
.arrow{color:var(--muted)}
html[lang="ar"] .arrow{transform:scaleX(-1);display:inline-block}

.trainrow{display:grid;gap:var(--gap);margin-top:var(--sec-gap)}
@media (min-width:860px){.trainrow{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}}
.traincard{display:flex;flex-direction:column}
.traincard .line{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:baseline;padding-block:var(--s2);border-bottom:1px solid var(--line-soft);font-size:var(--fs-base)}
.traincard .line:last-of-type{border-bottom:0}
.traincard .cap{color:var(--muted);font-size:var(--fs-sm)}
.traincard .btn{margin-top:var(--s3)}
.demo-note{margin-top:auto;padding-top:var(--s3);font-size:var(--fs-sm);color:var(--muted);font-style:italic}

/* ---------- pricing ---------- */
.plan{display:flex;flex-direction:column;gap:var(--s1)}
.plan__price{font-family:var(--font-display);font-size:var(--fs-num);font-weight:700;letter-spacing:-.035em;line-height:1.05;color:var(--blue);direction:ltr;unicode-bidi:isolate;text-align:start}
.plan__days{font-size:var(--fs-base);font-weight:600}
.plan__perday{font-size:var(--fs-sm);color:var(--muted)}
.plan__same{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line-soft);font-size:var(--fs-sm);color:var(--muted)}
.plan__cta{margin-top:auto;padding-top:var(--s4)}   /* pins all three CTAs to one baseline */
.plan__price span,.plan__perday span{direction:ltr;unicode-bidi:isolate;display:inline-block;white-space:nowrap}
.incl{margin-top:var(--sec-gap)}
.incl ul{display:grid;gap:var(--s3)}
@media (min-width:760px){.incl ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3) var(--s6)}}
.incl li{position:relative;padding-inline-start:var(--s6);font-size:var(--fs-base)}
/* physical borders: the checkmark keeps its shape when the page mirrors */
.incl li::before{content:"";position:absolute;inset-inline-start:2px;top:.42em;width:11px;height:6px;border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg)}
.notes{margin-top:var(--s5);display:grid;gap:var(--s2)}
.notes li{font-size:var(--fs-md);color:var(--muted);padding-inline-start:var(--s4);position:relative}
.notes li::before{content:"";position:absolute;inset-inline-start:0;top:.7em;width:6px;height:6px;background:var(--line-strong);border-radius:50%}
/* A feature card carrying the accent bar. Logical, so Arabic mirrors it. */
.freebox{margin-top:var(--s5);border-color:var(--blue-line);border-inline-start:4px solid var(--blue);background:var(--link-soft);display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;justify-content:space-between}
.freebox p{color:var(--muted);font-size:var(--fs-md);max-width:56ch}
.freebox__excl{margin-top:var(--s2);font-size:var(--fs-sm);color:var(--muted)}

/* ---------- land strip ---------- */
.strip{display:flex;flex-wrap:wrap;gap:var(--gap);align-items:center;justify-content:space-between}
.strip p{color:var(--muted);font-size:var(--fs-base);max-width:62ch;margin-top:var(--s2)}

/* ---------- free band ----------
   The second navy panel, and it is built exactly like the hero: the SECTION is
   the wash page, the .wrap inside it is the inset card. */
.band--ink{padding-inline:var(--pad)}
.band--ink>.wrap{
  padding-block:clamp(1.8rem,5vw,3rem);
  border:1px solid var(--on-navy-12);border-radius:var(--radius-xl);
  background:linear-gradient(135deg,var(--blue-deep) 0%,var(--blue) 52%,var(--hero-end) 100%);
  box-shadow:var(--shadow-hero);
}
.waitlist{text-align:center}
.waitlist h2{font-size:var(--fs-2xl);margin-inline:auto;max-width:20ch;color:#fff}
.waitlist p{margin:var(--s4) auto 0;color:var(--hero-lede-ink);max-width:56ch;font-size:clamp(1rem,2vw,1.12rem);line-height:1.55}
.band--ink .kicker{color:#fff;opacity:.86}
.freecta{justify-content:center;margin-top:var(--s4)}
.waitlist .small{font-size:var(--fs-sm);color:var(--hero-proof-ink);margin-top:var(--s3)}

/* ---------- faq ----------
   A closed <details> is a row of text with a triangle; tinting it and marking
   the open one says which of them is a thing to press. */
.faq{display:grid;gap:var(--s2)}
.faq details{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);box-shadow:var(--shadow-card)}
.faq summary{cursor:pointer;list-style:none;padding:var(--s3) var(--s4);font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;font-size:var(--fs-lg);display:flex;gap:var(--s4);align-items:center;justify-content:space-between;min-height:var(--tap);border-radius:var(--radius)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--blue)}
.faq summary::after{content:"+";flex:0 0 auto;font-weight:400;font-size:1.5rem;line-height:1;color:var(--blue)}
.faq details[open]{border-color:var(--blue-line);background:var(--blue-tint)}
.faq details[open] summary{color:var(--blue)}
.faq details[open] summary::after{content:"−"}
.faq .a{padding:0 var(--s4) var(--s4);color:var(--ink-mid);max-width:68ch;font-size:var(--fs-base)}
summary:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* ---------- footer ----------
   Light, on paper, with one hairline above it — nt2's .site-footer. A dark slab
   at the bottom of a cool wash page was the last piece of the old identity. */
.footer{background:var(--paper);color:var(--muted);border-top:1px solid var(--line);padding-block:var(--page-y)}
.footer a{color:var(--muted);text-decoration:none;font-size:var(--fs-md);display:inline-block;padding-block:var(--s1)}
.footer a:hover{color:var(--blue);text-decoration:underline}
.footer__grid{display:grid;gap:var(--s5)}
@media (min-width:820px){.footer__grid{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,.8fr))}}
.footer h3{font-family:var(--font);font-size:var(--fs-caps);letter-spacing:.09em;text-transform:uppercase;color:var(--blue);margin-bottom:var(--s2);font-weight:600}
html[lang="ar"] .footer h3{letter-spacing:0;text-transform:none;font-size:var(--fs-sm)}
.footer ul{display:grid;gap:0}
.footer__disclaimer{margin-top:var(--s3);font-size:var(--fs-sm);color:var(--muted);max-width:52ch}
.footer__bottom{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:space-between;font-size:var(--fs-sm);color:var(--muted)}

/* ---------- inner pages (pricing / contact / legal / land) ---------- */
.page{padding-block:var(--page-y)}
.page__head{max-width:70ch;margin-bottom:var(--sec-gap)}
.page h1{font-size:var(--fs-2xl)}
.page__sub{margin-top:var(--s3);color:var(--muted);font-size:17.5px}
.pagenav{margin-top:var(--s6)}
/* A page whose body is a shared .band section (pricing): the page head and the
   band must not stack page-padding + band-padding into a 160px hole. */
.page--band .page__head{margin-bottom:0}
.page--band>.band{padding-block:var(--sec-gap)}
.formcard{max-width:var(--maxw-narrow)}
.draft{margin-top:var(--s5);border-color:var(--moderate-line);background:var(--moderate-bg);padding:var(--s4) var(--s5);max-width:78ch}
.draft strong{display:block;color:var(--moderate);font-size:var(--fs-base);margin-bottom:var(--s2);direction:ltr;unicode-bidi:isolate;text-align:start}
.draft p{font-size:var(--fs-md);color:#6A5424}
.doc{margin-top:var(--sec-gap);max-width:78ch}
.doc section{padding-block:var(--s5);border-top:1px solid var(--line)}
.doc h2{font-size:var(--fs-lg);margin-bottom:var(--s2)}
.doc p{color:var(--muted);font-size:var(--fs-base)}
.todo{display:grid;gap:var(--s2);margin-top:var(--s1)}
.todo li{display:flex;gap:var(--s2);align-items:baseline;font-size:var(--fs-base);color:var(--muted)}
.todo .flag{flex:0 0 auto;font-size:11.5px;font-weight:700;letter-spacing:.08em;background:var(--moderate-bg);color:var(--moderate);border:1px solid var(--moderate-line);border-radius:4px;padding:2px 7px;font-family:var(--mono);direction:ltr;unicode-bidi:isolate}
.infotable{margin-top:var(--sec-gap);overflow:hidden;max-width:80ch}
.infotable .row{display:grid;gap:var(--s1);padding:var(--s4) var(--s5);border-bottom:1px solid var(--line-soft)}
@media (min-width:700px){.infotable .row{grid-template-columns:minmax(180px,.42fr) minmax(0,1fr);gap:var(--s5);align-items:baseline}}
.infotable .row:last-child{border-bottom:0}
.infotable .row:nth-child(odd){background:#FCFDFE}
.infotable dt{font-weight:700;font-size:var(--fs-md)}
.infotable dd{margin:0;color:var(--muted);font-size:var(--fs-base)}
.infotable .parts{display:grid;gap:var(--s1);margin-top:var(--s2)}
.infotable .parts li{font-size:var(--fs-md);color:var(--ink)}
.infotable .parts .nm{font-weight:700;direction:ltr;unicode-bidi:isolate}

/* ---------- one data table: labels start, numbers end, tabular ---------- */
.table-wrap{overflow-x:auto;margin-top:var(--s3);-webkit-overflow-scrolling:touch}
.tinytable{width:100%;border-collapse:collapse;font-size:var(--fs-md)}
.tinytable th,.tinytable td{text-align:start;padding:var(--s2);border-bottom:1px solid var(--line-soft);vertical-align:top}
.tinytable thead th{font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;white-space:nowrap;border-bottom-color:var(--line)}
html[lang="ar"] .tinytable thead th{letter-spacing:0;text-transform:none;font-size:var(--fs-sm)}
.tinytable tbody tr:last-child td{border-bottom:0}
.tinytable .num,.tinytable th.num{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
.tinytable .mono{font-family:var(--mono);font-size:var(--fs-sm)}
.tinytable .act{text-align:end;white-space:nowrap}
.muted{color:var(--muted)}
.price{direction:ltr;unicode-bidi:isolate}

/* ---------- consent banner ----------
   A bar, not a modal: nothing on the page is blocked and nothing is dimmed, so
   there is no dark pattern in the layout either. The two answers are ONE pair
   of equally sized buttons in the same row — reject is not a link, not smaller,
   not greyed out and not one level deeper than accept, which is what the EU
   rule about "as easy to refuse as to accept" actually means in pixels. */
.consent{position:fixed;inset-inline:0;bottom:0;z-index:80;background:var(--paper);
  border-top:1px solid var(--line);box-shadow:0 -12px 32px rgba(20,52,107,.10);
  padding:var(--s4) var(--s4) max(var(--s4),env(safe-area-inset-bottom))}
.consent__in{max-width:var(--maxw);margin-inline:auto;display:flex;flex-wrap:wrap;
  align-items:center;gap:var(--s3) var(--s5);justify-content:space-between}
.consent__text{flex:1 1 32ch;min-width:0}
.consent__t{margin:0;font-family:var(--font-display,inherit);font-weight:700;
  font-size:var(--fs-md);color:var(--ink)}
.consent__b{margin:var(--s1) 0 0;font-size:var(--fs-sm);color:var(--muted);max-width:78ch}
.consent__b a{color:var(--link)}
.consent__acts{display:flex;gap:var(--s2);flex:0 0 auto}
/* Identical geometry for both answers; only the fill differs, and the fill is
   the one thing a colour-blind or high-contrast user still reads as two equal
   choices because the text of each says what it does. */
.consent__acts .btn{min-width:11ch;justify-content:center}
@media (max-width:38rem){
  .consent__acts{width:100%}
  .consent__acts .btn{flex:1 1 0}
}
.footer__bottom .linkbtn{font-size:var(--fs-sm);padding:0;background:none;color:var(--muted);
  text-decoration:underline;text-underline-offset:.2em}
.footer__bottom .linkbtn:hover{background:none;color:var(--link)}