/* 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;
  --moderate-bar:#B87A0A;              /* 3.2:1 on --sunken: the bar is a graphic, not decoration */
  --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}
/* The two account links on the signed-out app pages are plain nav links in the
   brand navy (audit C1). And the primary button keeps its white label even
   inside the nav, where `.header__nav a` used to win on specificity and left
   grey type on navy at about 2:1 (audit B4/C5). */
.header__nav a.nav__link{color:var(--blue)}
.header .btn--primary,.btn--primary{color:#fff}
.header__right{display:flex;align-items:center;gap:var(--s3);margin-inline-start:auto}
.header__nav+.header__right{margin-inline-start:0}
/* Both public and account navigation remain reachable on phones. */
@media (max-width:919px){
  .header__nav{display:flex;order:3;width:100%;margin-inline-start:0;flex-wrap:wrap;gap:0 var(--s2)}
  .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:var(--tap);min-height:var(--tap);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(--blue);color:#fff;border-color:var(--paper)}
.hero .btn--primary:hover,.band--ink .btn--primary:hover{background:var(--blue-deep);color:#fff;border-color:var(--paper)}
.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{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)}
.sec__intro{margin-top:var(--s3);color:var(--ink-mid);font-size:clamp(1rem,2vw,1.12rem);line-height:1.55}
.sec__head{margin-bottom:var(--sec-gap)}

/* ---------- 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}
.hero h1 .l2{color:var(--hero-proof-ink)}
/* The second sentence used to be a span inside the h1 and ran into the first
   one wherever the text was read rather than rendered (share cards, readers,
   copy-paste). It is its own element now, an h1 that is one sentence. */
.hero__lead{
  margin-top:var(--s3);font-family:var(--font-display);font-weight:600;
  font-size:var(--fs-lg);line-height:1.28;letter-spacing:-.02em;
  color:var(--hero-proof-ink);
}
html[lang="ar"] .hero__lead{letter-spacing:0;line-height:1.5}
/* 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)}
.hero__cta{margin-top:var(--s4)}
.hero__note{margin-top:var(--s3);font-size:var(--fs-sm);color:var(--hero-proof-ink)}
.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)}

/* ---------- hero listening sample ----------
   Two clips of the real voice pipeline, sitting on the navy hero as a full
   width row under both columns. Everything here is direction-agnostic
   (logical properties only) EXCEPT the two things that are not text: the play
   glyph, which is a clip-path and therefore points at the direction of
   PLAYBACK in every locale exactly as every media player does, and the seek
   slider and the time readout, which are isolated LTR because a timeline is
   not a sentence. */
.hero__demo{grid-column:1/-1;margin-block-start:var(--s5);padding-block-start:var(--s5);border-block-start:1px solid var(--on-navy-16)}
.demo__title{font-family:var(--font);font-size:var(--fs-caps);letter-spacing:.09em;text-transform:uppercase;font-weight:600;color:#fff}
html[lang="ar"] .demo__title{letter-spacing:0;text-transform:none;font-size:var(--fs-sm)}
.demo__langnote{margin-block-start:var(--s2);font-size:var(--fs-sm);color:var(--hero-proof-ink);max-inline-size:60ch}
.demo__tracks{margin-block-start:var(--s4);display:grid;gap:var(--s3)}
@media (min-width:760px){.demo__tracks{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);align-items:start}}
.demo__track{
  border:1px solid var(--on-navy-16);background:var(--on-navy-08);
  border-radius:var(--radius);padding:var(--s3) var(--s4) var(--s4);min-inline-size:0;
}
.demo__row{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.demo__meta{flex:1 1 7rem;min-inline-size:0}
.demo__name{display:block;font-weight:600;font-size:var(--fs-base);color:#fff}
.demo__sub{display:block;margin-block-start:2px;font-size:var(--fs-sm);color:var(--hero-proof-ink)}
.demo__time{flex:0 0 auto;font-size:var(--fs-sm);color:var(--hero-proof-ink);font-variant-numeric:tabular-nums;unicode-bidi:isolate;white-space:nowrap}
/* Current time and duration are two elements: the separator belongs to the
   stylesheet, so it is there from the first paint ("0:00 / 0:29") and not
   only once the first timeupdate rewrites the counter. */
.demo__cur::after{content:"/";margin-inline:.35em;opacity:.7}
/* The one loud control in the sample: white pill on navy, same reversal the
   hero applies to .btn--primary, and a full 44px tap target. */
.demo__play{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:.5rem;
  min-block-size:var(--tap);padding-inline:1rem;font:inherit;font-size:var(--fs-sm);font-weight:600;
  border:1px solid var(--paper);border-radius:var(--radius-pill);
  background:var(--paper);color:var(--blue);cursor:pointer;transition:background var(--motion),color var(--motion);
}
.demo__play:hover{background:var(--blue-tint);border-color:var(--blue-tint);color:var(--blue-deep)}
/* An author `display` beats the UA sheet's [hidden]{display:none}: without
   this the styled button would be visible on a page whose JS never ran,
   next to the native player it is supposed to replace. */
.demo__play[hidden]{display:none}
.demo__icon{inline-size:11px;block-size:13px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
.demo__track.is-playing .demo__icon{clip-path:none;background:linear-gradient(to right,currentColor 0 4px,transparent 4px 7px,currentColor 7px 11px)}
/* The track name is already printed next to the button; on the button it exists
   for the accessible name only. */
.demo__playname{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.demo__seek{inline-size:100%;margin-block-start:var(--s3);accent-color:#fff;cursor:pointer}
/* No JS: the native transport, which is a complete keyboard-operable player. */
.demo__audio{display:block;inline-size:100%;margin-block-start:var(--s3)}
.demo__track.is-js .demo__audio{display:none}
.demo__tx{margin-block-start:var(--s3);padding-block-start:var(--s3);border-block-start:1px solid var(--on-navy-16)}
.demo__sum{cursor:pointer;font-size:var(--fs-sm);font-weight:600;color:var(--hero-proof-ink);min-block-size:2rem;display:flex;align-items:center}
.demo__sum:hover{color:#fff}
.demo__lines{margin-block-start:var(--s3);display:grid;gap:var(--s2)}
.demo__line{
  padding:var(--s2) var(--s3);border-radius:var(--radius-sm);
  border-inline-start:3px solid var(--on-navy-24);transition:background var(--motion),border-color var(--motion);
}
.demo__line.is-active{background:var(--on-navy-12);border-inline-start-color:#fff}
.demo__who{display:block;font-size:var(--fs-caps);letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--hero-proof-ink)}
html[lang="ar"] .demo__who{letter-spacing:0;text-transform:none}
.demo__said{display:block;margin-block-start:2px;font-size:var(--fs-md);line-height:1.5;color:#fff}
.demo__said [lang="de"]{unicode-bidi:isolate;font-family:var(--font)}
/* The gloss is the translation, not the exam content: quieter, and never
   italic in Arabic, where a synthesised oblique is a defect. */
.demo__gloss{display:block;margin-block-start:4px;font-size:var(--fs-sm);line-height:1.5;color:var(--hero-proof-ink);font-style:italic}
html[lang="ar"] .demo__gloss{font-style:normal}
.demo__caption{margin-block-start:var(--s4);font-size:var(--fs-sm);line-height:1.5;color:var(--hero-proof-ink);max-inline-size:78ch}
@media (prefers-reduced-motion:reduce){.demo__play,.demo__line{transition:none}}

/* ---------- 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+.footnote{margin-top:var(--s3)}
.footnote{
  margin-top:var(--s5);font-size:var(--fs-md);color:var(--ink-mid);
  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)}
/* The "view the full page" link under a shortened homepage excerpt (audit
   follow-up, 2026-09-11): report_excerpt(), ablauf_teaser(), faq()'s `more`. */
.report__more{margin-top:var(--s5)}

/* 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)}
.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(--moderate-bar)}
.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}
/* an arrow inside a LINK LABEL: points at the reading direction */
.dirarrow{display:inline-block}
html[dir="rtl"] .dirarrow{transform:scaleX(-1)}

.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)}
.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);margin-top:var(--s2)}
/* The "only the administrative part starts with NRW" qualifier, on the same
   navy rule the feature cards use so it reads as a caveat, not a headline. */
.strip__note{
  margin-top:var(--s3);padding-inline-start:var(--s4);
  border-inline-start:3px solid var(--blue-line);
  font-size:var(--fs-md);color:var(--ink-mid);
}

/* ---------- cost of failing ---------- */
.cost__fig{
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-2xl);
  letter-spacing:-.03em;line-height:1.08;color:var(--blue);margin-bottom:var(--s2);
}
html[lang="ar"] .cost__fig{letter-spacing:0;line-height:1.35}
.cost__card h3{margin-bottom: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);color:#fff}
.waitlist p{margin:var(--s4) 0 0;color:var(--hero-lede-ink);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);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:6px;line-height:1.5}
.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)}
.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{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)}
.firstbuy{display:none}
@media (max-width:48rem){
  .firstbuy{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3)}
  .firstbuy strong{font-family:var(--font-display);font-size:var(--fs-lg);color:var(--blue);white-space:nowrap}
  .firstbuy .btn{flex:1 1 auto;min-width:0}
  .hero .firstbuy strong{color:#fff}
  .hero__cta .btn--buy{display:none}
}
.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)}
.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)}
.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}
.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}
/* the one link inside an info row: the guide that carries the numbers */
.rowlink{margin-block-start:var(--s3);font-size:var(--fs-md);font-weight:600}


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

.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)}

/* ================================================================
   ADDITIONS: hero listening strip, 20-20-10 flow, product shot,
   Bundesländer index, guides. Logical properties only, so the Arabic
   layout mirrors without a single RTL override.
   ================================================================ */

/* ---------- hero listening strip (above the fold) ----------
   The sample used to be a full-width row under BOTH hero columns, which put it
   below the fold on a 1440x900 desktop. It now sits inside the text column
   directly under the call to action: two rows, a collapsed transcript each,
   nothing that pushes the CTA down. */
.hero__listen{
  margin-block-start:var(--s3);padding-block-start:var(--s3);
  border-block-start:1px solid var(--on-navy-16);max-inline-size:46rem;
}
/* Two columns only from 1000px up. Between 600 and 1000 the hero is still a
   SINGLE column, so the generic .demo__tracks rule would split a full-width
   strip into two cards and then, at 960px, split the hero itself and squeeze
   them to ~250px each mid-breakpoint. Stacked below 1000, side by side above
   it: which is also what keeps both players above the fold on a 1440x900
   desktop, where the strip has to fit in about 230px under the CTA. */
.hero__listen .demo__tracks{margin-block-start:var(--s3);gap:var(--s2);grid-template-columns:1fr}
@media (min-width:1000px){
  .hero__listen .demo__tracks{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
}
.hero__listen .demo__seek{margin-block-start:var(--s2)}
.hero__listen .demo__audio{margin-block-start:var(--s2)}
/* Above 1000px each of the two cards is only ~250px wide, and a pill that
   spells out "Abspielen" wraps the row into three lines. The button becomes
   icon-only there: a 44px target with the same accessible name, since the
   label and the track name stay in the button, just visually hidden. */
@media (min-width:1000px){
  .hero__listen .demo__row{flex-wrap:nowrap}
  .hero__listen .demo__play{inline-size:var(--tap);padding-inline:0;justify-content:center;gap:0}
  .hero__listen .demo__playlabel{
    position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);
    white-space:nowrap;
  }
  .hero__listen .demo__meta{flex:1 1 auto}
  .hero__listen .demo__name,.hero__listen .demo__sub{
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
}
.hero__listen .demo__track{padding:var(--s2) var(--s3)}
.hero__listen .demo__name{font-size:var(--fs-md)}
.hero__listen .demo__sub{font-size:var(--fs-sm)}
.hero__listen .demo__row{gap:var(--s2)}
.hero__listen .demo__play{padding-inline:.85rem}
.hero__listen .demo__caption{margin-block-start:var(--s3);font-size:var(--fs-sm)}
.hero__listen .demo__tx{margin-block-start:var(--s2);padding-block-start:var(--s2)}
.hero .hero__sub{margin-top:var(--s5)}

/* ---------- 20-20-10 flow ----------
   Four equal cards on desktop; stacked cards on smaller screens. Duration
   stays in the labels and bars instead of making the third card narrower. */
.flow{margin-block-end:var(--sec-gap)}
.flow__title{
  font-family:var(--font);font-size:var(--fs-caps);letter-spacing:.09em;text-transform:uppercase;
  font-weight:600;color:var(--blue);margin-block-end:var(--s3);
}
html[lang="ar"] .flow__title{letter-spacing:0;text-transform:none;font-size:var(--fs-sm)}
.flow__track{display:grid;gap:var(--s3);align-items:stretch}
@media (min-width:1100px){
  .flow__track{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2)}
}
.flow__step{
  position:relative;padding:var(--s3) var(--s4) var(--s4);
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
  box-shadow:var(--shadow-card);min-inline-size:0;
}
.flow__bar{
  display:block;block-size:8px;inline-size:var(--pct);min-inline-size:2.5rem;
  border-radius:var(--radius-pill);background:var(--blue);margin-block-end:var(--s3);
}
@media (min-width:760px){.flow__bar{inline-size:100%}}
.flow__n{
  display:block;font-size:var(--fs-caps);font-weight:600;color:var(--blue);letter-spacing:.09em;
}
html[lang="ar"] .flow__n{letter-spacing:0}
.flow__name{
  display:block;margin-block-start:2px;font-family:var(--font-display);font-weight:600;
  font-size:var(--fs-base);color:var(--ink);
}
.flow__meta{display:flex;flex-wrap:wrap;gap:.35rem .6rem;margin-block-start:var(--s2)}
.flow__min{
  font-size:var(--fs-caps);font-weight:600;background:var(--blue);color:#fff;
  border-radius:var(--radius-pill);padding:.2rem .6rem;white-space:nowrap;
}
.flow__mode{
  font-size:var(--fs-caps);color:var(--muted);background:var(--wash);
  border:1px solid var(--line);border-radius:var(--radius-pill);padding:.2rem .6rem;
}
.flow__out{
  display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
  border:1px dashed var(--blue-line);border-radius:var(--radius);background:var(--blue-tint);
}
.flow__arrow{color:var(--blue);font-size:1.25rem;line-height:1}
html[dir="rtl"] .flow__arrow{transform:scaleX(-1)}
.flow__outname{display:block;font-weight:600;color:var(--blue-deep)}
.flow__outnote{display:block;font-size:var(--fs-sm);color:var(--muted)}
.flow__note{margin-block-start:var(--s3);font-size:var(--fs-sm);color:var(--muted);max-inline-size:70ch}

/* ---------- product screenshot ---------- */
.shotgrid{display:grid;gap:var(--gap);align-items:center}
@media (min-width:900px){.shotgrid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
.shotgrid__txt .block__tags{margin-top:var(--s4)}
.shotgrid__txt .footnote{margin-top:var(--s4)}
.shotfig{margin:0}
.shotfig img{
  display:block;inline-size:100%;block-size:auto;border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-panel);background:var(--paper);
}
.shotfig figcaption{margin-block-start:var(--s3);font-size:var(--fs-sm);color:var(--muted)}

/* ---------- Bundesländer index ---------- */
.laender{margin-block-start:var(--sec-gap);padding-block-start:var(--sec-gap);border-block-start:1px solid var(--line)}
.laender__head{max-inline-size:62ch}
.laender__title{font-size:var(--fs-lg)}
.laender__head p{margin-block-start:var(--s2);color:var(--muted);font-size:var(--fs-base)}
.laender__fold{margin-block-start:var(--s5)}
.laender__fold>summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:var(--s3);
  min-block-size:var(--tap);padding:var(--s2) var(--s3);
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
  font-family:var(--font-display);font-weight:600;color:var(--blue-deep);width:fit-content;
}
.laender__fold>summary::-webkit-details-marker{display:none}
.laender__fold>summary::after{content:"";margin-inline-start:.3em;width:.55em;height:.55em;
  border-inline-end:2px solid currentColor;border-block-end:2px solid currentColor;
  transform:rotate(45deg);flex:0 0 auto}
.laender__fold[open]>summary::after{transform:rotate(-135deg)}
.laender__fold>summary:hover{background:var(--blue-tint);border-color:var(--blue)}
.laender__list{
  margin-block-start:var(--s5);display:grid;gap:var(--s2);
  grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));
}
.ld>a,.ld>span{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  min-block-size:var(--tap);padding:var(--s2) var(--s3);
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
}
.ld>span{background:var(--wash)}
.ld--on>a{border-color:var(--blue-line);text-decoration:none}
.ld--on>a:hover{background:var(--blue-tint);border-color:var(--blue)}
.ld__name{font-size:var(--fs-md);font-weight:600;color:var(--ink);unicode-bidi:isolate}
.ld>span .ld__name{font-weight:500;color:var(--muted)}
.ld__st{
  flex:0 0 auto;font-size:var(--fs-caps);color:var(--muted);background:var(--sunken);
  border-radius:var(--radius-pill);padding:.15rem .55rem;white-space:nowrap;
}
.ld__st.is-ready{background:var(--blue-tint);color:var(--blue)}
.laender__note{margin-block-start:var(--s4);font-size:var(--fs-sm);color:var(--ink-mid);max-inline-size:78ch}
.laender__notify{margin-block-start:var(--s2);font-size:var(--fs-sm);color:var(--muted)}

/* ---------- semantic labels: never colour alone ----------
   The word stays, the colour stays, and a SHAPE is added, triangle up, circle,
   triangle down: so the three verdicts are still three without colour vision
   and in a black-and-white print. */
.dim__ic,.dimlabel__ic{
  display:inline-block;margin-inline-end:.35rem;font-size:.72em;line-height:1;vertical-align:.05em;
}

/* ---------- guides ---------- */
.crumbs{font-size:var(--fs-sm);color:var(--muted);margin-block-end:var(--s4)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--blue)}
.guide__stamp{margin-block-start:var(--s3);font-size:var(--fs-sm);color:var(--muted)}
.guide__facts{margin-top:var(--s5)}
.guide__toc{
  margin-block-start:var(--sec-gap);padding:var(--s4) var(--s5);
  border:1px solid var(--line);border-radius:var(--radius);background:var(--wash);
}
.guide__toch{
  font-size:var(--fs-caps);letter-spacing:.09em;text-transform:uppercase;font-weight:600;
  color:var(--blue);margin-block-end:var(--s2);
}
.guide__toc ol{margin:0;padding-inline-start:1.2rem;display:grid;gap:var(--s1);color:var(--muted)}
.guide__toc li{font-size:var(--fs-md)}
.guide__sec{margin-block-start:var(--sec-gap)}
.guide__sec h2{font-size:var(--fs-lg);margin-block-end:var(--s3)}
.guide__sec p{color:var(--ink-mid);font-size:var(--fs-base);line-height:1.65;max-inline-size:72ch}
.guide__sec p+p{margin-block-start:var(--s3)}
.guide__list{margin-block-start:var(--s3);display:grid;gap:var(--s2);max-inline-size:72ch}
.guide__list li{
  position:relative;padding-inline-start:var(--s5);color:var(--ink-mid);font-size:var(--fs-base);
  line-height:1.6;
}
.guide__list li::before{
  content:"";position:absolute;inset-inline-start:0;top:.62em;inline-size:10px;block-size:2px;
  background:var(--blue);
}
.guide__sec .footnote{margin-top:var(--s4)}
.guide__unver{
  margin-block-start:var(--sec-gap);padding:var(--s4) var(--s5);
  border:1px solid var(--moderate-line);border-inline-start:4px solid var(--warm);
  border-radius:var(--radius);background:var(--warm-wash);
}
.guide__unver h2{font-size:var(--fs-base);margin-block-end:var(--s2)}
.guide__unver ul{display:grid;gap:var(--s2)}
.guide__unver li{font-size:var(--fs-md);color:var(--ink-mid);padding-inline-start:var(--s4);position:relative}
.guide__unver li::before{content:"?";position:absolute;inset-inline-start:0;color:var(--warm-deep);font-weight:700}
.guide__sources{margin-block-start:var(--sec-gap)}
.guide__sources h2{font-size:var(--fs-base);margin-block-end:var(--s2)}
.guide__sources ul{display:grid;gap:var(--s2);max-inline-size:72ch}
.guide__sources li{font-size:var(--fs-md);color:var(--muted)}
.guide__cta{
  margin-block-start:var(--sec-gap);padding:var(--s5);border-radius:var(--radius-lg);
  background:var(--blue-tint);border:1px solid var(--blue-line);
}
.guide__cta h2{font-size:var(--fs-lg)}
.guide__cta p{margin-block-start:var(--s3);color:var(--ink-mid);max-inline-size:70ch}
.guide__cta .btn{margin-inline-end:var(--s3);margin-block-start:var(--s2)}
.guide__rel{margin-block-start:var(--sec-gap)}
.guide__rel h2{font-size:var(--fs-base);margin-block-end:var(--s2)}
.guide__rel ul{display:grid;gap:var(--s2)}
.guide__group{margin-block-start:var(--sec-gap)}
.guide__group h2{font-size:var(--fs-lg)}
.guide__group>.muted{margin-block-start:var(--s2);max-inline-size:70ch}
.gcards{margin-block-start:var(--s5);display:grid;gap:var(--s3)}
.gcards{grid-template-columns:1fr}
.gcard>a{
  display:block;padding:var(--s4) var(--s5);border:1px solid var(--line);
  border-inline-start:4px solid var(--blue);border-radius:var(--radius);
  background:var(--paper);box-shadow:var(--shadow-card);text-decoration:none;block-size:100%;
}
.gcard>a:hover{background:var(--wash)}
.gcard__t{display:block;font-family:var(--font-display);font-weight:600;font-size:var(--fs-base);color:var(--blue-deep)}
.gcard__d{display:block;margin-block-start:var(--s2);color:var(--ink-mid);font-size:var(--fs-md);line-height:1.55}
.gcard__m{display:block;margin-block-start:var(--s3);font-size:var(--fs-caps);color:var(--muted)}
.guidelinks{margin-block-start:var(--s3);display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4)}
.ccards{margin-block-start:var(--s5);display:grid;gap:var(--s2)}
.ccard{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s3);
  padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper);
}
.ccard__t{font-family:var(--font-display);font-weight:600;color:var(--ink)}
.ccard__meta{display:flex;flex-wrap:wrap;gap:var(--s2)}
.guidelinks li{font-size:var(--fs-md)}
.strip--guides{align-items:flex-start}

/* ---------- the free trial (landing) ----------
   The section that carries the product-led funnel: three steps under the hero
   that say what the five free minutes are, and one CTA that starts them. Uses
   the existing .card surface: this adds a numbered badge and a centred action
   row, nothing else. */
.trialstep{position:relative;border-inline-start:4px solid var(--blue)}
.trialstep__n{width:32px;height:32px;border-radius:50%;background:var(--blue);color:#fff;
  display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:var(--fs-md);
  margin-bottom:var(--s3)}
.trialcta{margin-top:var(--s5);text-align:center}
.trialcta .btn{min-width:min(100%,22rem)}


/* ---------- mobile price bar (audit P1 2.6) ----------
   The landing is long and the price sits near its end, so on a phone the two
   facts a visitor needs to decide travel with them: what it costs and that
   five minutes of it are free. Phones only, and only on the landing; it is
   never rendered on /pricing or in the product. Pure CSS, no script. */
.pricebar{position:fixed;inset-inline:0;bottom:0;z-index:60;display:none;flex-wrap:wrap;
  align-items:center;gap:var(--s3);background:var(--paper);border-top:1px solid var(--line);
  box-shadow:0 -8px 24px rgba(20,52,107,.10);
  padding:var(--s2) var(--s3) max(var(--s2),env(safe-area-inset-bottom))}
.pricebar__p{font-family:var(--font-display);font-weight:700;font-size:var(--fs-md);
  color:var(--ink);white-space:nowrap}
.pricebar__link{margin-inline-start:auto;font-size:var(--fs-sm);color:var(--muted);
  text-decoration:underline;text-underline-offset:.2em}
.pricebar .btn{white-space:nowrap}
/* The dated offer line (src/http.ts renderOfferHtml): date and the price after
   it, wherever the price is shown. Present only while the offer runs. */
.plan__deadline{margin:0 0 var(--s2);font-weight:600;color:var(--ink-mid)}
.plan__deadline--buy{margin:var(--s3) 0 var(--s2);text-align:center}
.plan__deadline--hero{margin:0;font-size:var(--fs-sm);color:var(--hero-proof-ink)}
.pricebar .plan__deadline--bar{order:-1;flex:1 0 100%;margin:0;text-align:center;font-size:var(--fs-sm);color:var(--blue)}
@media (max-width:48rem){
  .pricebar{display:flex}
  /* Room for the bar, so it never covers the last CTA of the page. */
  .footer{padding-bottom:calc(var(--s7) + 3.5rem)}
}

/* ---------- the sample report, folded (audit P1 2.6) ----------
   It is the most convincing block on the page and the tallest; open by default
   it pushed the price two screens further down. Closed it is one line that
   says what is behind it. */
.reportfold{margin-block-start:var(--s5);border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--paper)}
.reportfold>summary{cursor:pointer;list-style:none;padding:var(--s4);display:flex;
  flex-wrap:wrap;align-items:baseline;gap:var(--s1) var(--s3)}
.reportfold>summary::-webkit-details-marker{display:none}
.reportfold>summary::after{content:"";margin-inline-start:auto;width:.6em;height:.6em;
  border-inline-end:2px solid var(--blue);border-block-end:2px solid var(--blue);
  transform:rotate(45deg);transition:transform .15s ease}
.reportfold[open]>summary::after{transform:rotate(-135deg)}
.reportfold__cta{font-family:var(--font-display);font-weight:600;color:var(--blue-deep)}
.reportfold__hint{font-size:var(--fs-sm);color:var(--muted)}
.reportfold .report{margin:0 var(--s4) var(--s4)}

/* ---------- buying from the price table (audit 1.2) ----------
   The plan card carries the whole checkout now: one address, the waiver the
   law requires for digital content, one button. It has to stay readable at
   390px, where three of these sit under each other. */
.plan__buy{margin-block-start:var(--s4);text-align:start}
.plan__buy .fld{margin-block-end:var(--s3)}
.plan__buy input[type=email]{width:100%}
.plan__buy .consentbox{align-items:flex-start;gap:var(--s2)}
.plan__buy .consentbox label{font-size:var(--fs-sm);line-height:1.45;color:var(--ink-mid)}
.plan__buy .hint{margin-block-start:var(--s2)}
.priceanchor{margin:0 0 var(--s5);padding:var(--s3) var(--s4);border-inline-start:4px solid var(--blue);
  background:var(--wash);border-radius:var(--r-md);color:var(--ink-mid)}
.buyerr{margin-block-end:var(--s4)}

/* ---------- the price anchor under the free evaluation (audit 2.1) ---------- */
.anchorbox{border:1px solid var(--line);border-inline-start:4px solid var(--blue);
  border-radius:var(--r-lg);background:var(--paper);padding:var(--s5);margin-block-start:var(--s5)}
.anchorbox h2{margin:0 0 var(--s2)}
.anchorbox p{margin:0 0 var(--s4);color:var(--ink-mid)}

/* ---------- the free dialogue asks for an address first (audit 1.3) ---------- */
.trialmail__lead{margin:0 0 var(--s4);font-family:var(--font-display);font-weight:600;
  color:var(--blue-deep)}
.trialpage .fld input[type=email]{width:100%}

/* ---------- consent banner (src/tracking.ts) ----------
   ONE layer, TWO buttons, one click each. "Alle akzeptieren" is the primary
   action in the brand navy at full button weight; "Nur notwendige" is the same
   box, the same size and the same single click, in grey at a lighter weight.
   That is a visual hierarchy, not a dark pattern: neither choice is buried,
   nothing is pre-ticked, and the bar never covers the page, meta.js pads the
   body by exactly the bar's height while it is open. */
.consentbar{
  position:fixed;inset:auto 0 0;z-index:10000;
  background:var(--paper);color:var(--ink);
  border-top:1px solid var(--line);box-shadow:0 -2px 14px rgba(26,34,56,.14);
  padding-block:var(--s4);max-height:85vh;overflow:auto;
}
.consentbar h2{font-size:var(--fs-lg);margin:0}
.consentbar p{margin-top:var(--s2);color:var(--ink-mid);font-size:var(--fs-md)}
.consentbar__actions{margin-top:var(--s4)}
.consentbar__actions .btn{min-width:16rem}
.consentbar__quiet{background:var(--sunken);color:var(--muted);border-color:var(--sunken);font-weight:500}
.consentbar__quiet:hover{background:var(--line);border-color:var(--line-strong);color:var(--ink);text-decoration:none}
@media (max-width:559px){.consentbar__actions .btn{min-width:0;flex:1 1 100%}}

/* Audit C6-C12: shared type, rhythm and reachable actions. */
.plan__buy .hint a{display:inline-block;padding-block:8px}
.report .risk__code,.report .quote__ts,.report .mono{font-family:var(--font);font-weight:500}
.infotable dt,.infotable .parts .nm{font-weight:600}
@media (min-width:900px){
  .consentbar>.wrap{display:flex;align-items:center;gap:16px}
  .consentbar__copy{flex:1;min-width:0}
  .consentbar__actions{margin-top:0;flex:0 0 auto;flex-direction:column;gap:var(--s2)}
}
@media (max-width:559px){
  .header__right,.header__nav+.header__right{width:100%;margin-inline-start:0;justify-content:space-between}
  .header__nav{gap:0;justify-content:space-between}
  .header__nav a{font-size:var(--fs-sm);padding-inline:var(--s1)}
}

/* The opening offer uses the full page container at every width. */
.hero__grid{grid-template-columns:minmax(0,1fr);gap:var(--s3);padding:var(--s4)}
.hero h1{font-size:var(--fs-3xl);line-height:1.14}
.hero__lead,.hero__cta,.hero__note,.demo__tracks{margin-top:0}
.hero__price{white-space:nowrap}
.hero__lead{font-size:var(--fs-base);line-height:1.4;text-wrap:pretty}
.page__sub{text-wrap:pretty}
.demo__track{min-width:0}
.demo__audio{width:100%;height:40px}
.hero__listen .demo__tracks{grid-template-columns:minmax(0,1fr)}
.audio-options{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-block-start:var(--s2)}
.audio-options label{display:flex;align-items:center;gap:var(--s2)}
.audio-options select{font:inherit;min-height:44px}
.demo__tx p{margin-block:var(--s3);color:#fff}
@media(max-width:599px){.hero{padding-block:var(--s3)}.demo__track{padding:var(--s3)}.demo__tracks{gap:var(--s2)}.demo__tx{margin-top:var(--s1);padding-top:var(--s1)}.hero__cta{gap:var(--s2)}}

.hero__listen{width:100%;max-inline-size:none;max-width:none}

/* C4: complete facts stay together; the outer wrap owns the measure. */
.product-stats{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s3);list-style:none;margin:0;padding:var(--s3) 0;border-block:1px solid var(--on-navy-34)}
.product-stats li{white-space:nowrap;font-weight:700;font-size:var(--fs-base)}
.priceanchor h2{font-size:var(--fs-xl);margin-bottom:var(--s3);text-wrap:balance}
.priceanchor p+p{margin-top:var(--s3)}
.plan__payment{font-weight:600}
.plan{scroll-margin-top:6rem}
@media(max-width:599px){.hero__cta .btn{width:100%}.product-stats{flex-direction:column;gap:var(--s2)}}

.priceanchor{padding:0;border:0;background:none}
.priceanchor__source{font-size:var(--fs-sm)}