/* Sprachpass — design system.
 *
 * THE HOUSE STYLE IS FSPREIF'S (which is in turn NT2exam's). Sprachpass is a
 * sibling product and was reading as a different company, so the identity below
 * is LIFTED from fspreif's own token source (styles/site.css) rather than
 * eyeballed: the palette, the two type families, the four radii, the nine
 * spacing steps, the four blue-tinted shadows, the type scale, the motion curve
 * and the 44px tap floor are the same numbers, name for name.
 *
 * WHAT IS SPRACHPASS'S OWN AND STAYS: the level palette (A1 / A2 / B1) and the
 * result verdicts, which have to survive on a report and are therefore mapped
 * onto fspreif's own accessible semantic pairs; the square brand mark; the
 * four-skill tab bar; the voice stage.
 *
 * Rules of the system
 *   - Spacing comes from --s1..--s9. No one-off margins.
 *   - Type comes from --fs-*. Headings in the display family (Archivo), body in
 *     the text family (Inter).
 *   - One surface: 1px var(--line), var(--radius-lg), white, var(--shadow-card).
 *   - Everything pressable is a PILL at least var(--tap) tall — except the
 *     multi-line navigation rows, which are cards and carry the card treatment.
 *   - Three button levels: primary / secondary / quiet (+ the on-navy pair).
 */
@font-face{font-family:"Inter";src:url("/s/f/fonts/Inter-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/s/f/fonts/Inter-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/s/f/fonts/Inter-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("/s/f/fonts/Archivo-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("/s/f/fonts/Archivo-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  color-scheme:light;

  /* ---- palette — fspreif's, role for role ---- */
  --ink:#1A2238;
  --ink-mid:#28304A;
  --muted:#5A6072;
  --faint:#93A0B8;
  --paper:#FFFFFF;
  --wash:#F6F8FC;
  --sunken:#E8EBF2;
  --line:#E3E8F0;
  --line-soft:#EDF1F7;
  --line-strong:#C9D5E8;

  /* THE one brand colour. */
  --blue:#14346B;
  --blue-deep:#0E2A5C;
  --blue-tint:#EAF0FB;
  --blue-line:#9DB6E0;
  --link:#2457C5;
  --link-soft:#EEF3FF;

  /* The light stop of the navy gradient and the two inks that survive on it.
     PRECOMPUTED, never color-mix(): color-mix() is a SyntaxError before Safari
     16.2 and takes the whole declaration with it. */
  --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: #F5A524 is 2.04:1 on white —
     correct as a rule or a fill, unreadable as text — so TEXT takes the deep
     value (5.19:1 on white). */
  --warm:#F5A524;
  --warm-deep:#A15C00;
  --warm-wash:rgba(245,165,36,.08);

  /* ---- verdict / level palette ---- */
  --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 ---- */
  --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;
  --maxw-app:47.5rem;                 /* the single-column product measure */
  --maxw-narrow:40rem;
  --pad:clamp(1.25rem,4vw,2rem);
  --page-y:clamp(1.8rem,5vw,3.2rem);
  --sec-gap:clamp(1.2rem,3vw,1.8rem);
  --gap:var(--s4);
  --stack:var(--s4);
  --card-pad:clamp(1.2rem,2.4vw,1.8rem);

  /* ---- type scale ---- */
  --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;
  --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;

  /* ---- four shadows, one blue at four depths ---- */
  --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;

  /* legacy names kept so nothing that still says var(--accent) breaks */
  --accent:var(--blue); --accent-d:var(--blue-deep); --accent-bg:var(--blue-tint);
  --ink-2:var(--muted); --bg:var(--wash); --card:var(--paper);
  --ok:var(--strong); --mid:var(--moderate);
  --shadow:var(--shadow-card); --r:var(--radius-lg);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{
  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;
}
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}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.14;margin:0 0 .5em;
  letter-spacing:-.025em;font-weight:600;overflow-wrap:break-word}
h1{font-size:var(--fs-2xl)}
h2{font-size:var(--fs-lg)}
h3{font-size:var(--fs-base);line-height:1.3}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
strong,b{font-weight:600}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}
.hero :focus-visible,.vstage :focus-visible,.exbar :focus-visible{outline-color:#fff}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:var(--paper-a94);
  backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.hdr__in{display:flex;align-items:center;gap:var(--s2) var(--s4);flex-wrap:wrap;
  min-height:64px;max-width:var(--maxw);margin:0 auto;
  padding-inline:var(--pad);padding-block:var(--s2)}

/* The wordmark: the name set in the DISPLAY family, the last syllable in the
   brand navy — fspreif's locked treatment, applied to this name. */
.brand{display:flex;align-items:center;gap:var(--s2);text-decoration:none;color:inherit;margin-right:auto;min-height:var(--tap)}
.brand:hover{text-decoration:none}
.brand__mark{width:32px;height:32px;display:block;flex:none;color:var(--blue)}
/* Reversed lock-up: on a navy ground the stamp is drawn in white. The mark
   is currentColor throughout, so this one rule flips it. */
.brand__mark--rev,.on-navy .brand__mark{color:#fff}
.brand__txt{display:flex;flex-direction:column;line-height:1.1}
.wm{font-family:var(--font-display);font-size:clamp(1.15rem,4.4vw,1.45rem);line-height:1;letter-spacing:-.03em;white-space:nowrap}
.wm__a{font-weight:700;color:var(--ink);letter-spacing:-.02em}
.wm__b{font-weight:600;color:var(--blue)}
.brand__txt em{font-style:normal;font-weight:500;font-size:var(--fs-caps);color:var(--muted);margin-top:3px}

/* The menu wrapper is layout-transparent on desktop: nav and .hdr__right stay
   direct flex children of .hdr__in, so the >=769px header is byte-for-byte the
   row it always was. Under 769px it becomes the burger panel (see below). */
.hdr__menu{display:contents}

.nav{display:flex;gap:var(--s1);flex-wrap:wrap;order:4;width:100%;
  border-top:1px solid var(--line-soft);padding-top:var(--s1)}
@media(min-width:769px){.nav{order:2;width:auto;border-top:0;padding-top:0;margin-inline-start:auto}}
.nav__a{display:inline-flex;align-items:center;min-height:var(--tap);
  padding-inline:.72rem;border-radius:var(--radius-pill);text-decoration:none;
  color:var(--muted);font-size:var(--fs-md);font-weight:600;white-space:nowrap}
.nav__a:hover{background:var(--blue-tint);color:var(--blue);text-decoration:none}
.nav__a--on{background:var(--blue-tint);color:var(--blue)}

.hdr__right{display:flex;align-items:center;gap:var(--s2);order:3;margin-inline-start:auto}
@media(min-width:769px){.hdr__right{margin-inline-start:0}}
.acct{display:inline-flex;align-items:center;min-height:38px;padding:0 .8rem;
  font-size:var(--fs-sm);font-weight:600;text-decoration:none;color:var(--muted);
  border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--paper)}
.acct:hover{border-color:var(--blue-line);color:var(--blue);text-decoration:none}
.langs{display:flex;align-items:center;gap:2px;border:1px solid var(--line-strong);
  border-radius:var(--radius-pill);padding:3px;background:var(--paper)}
.ls{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-height:32px;padding:0 .6rem;border:0}
.ls:hover{background:var(--blue-tint);color:var(--blue);text-decoration:none}
.ls--on{background:var(--blue);color:#fff}

/* ---------- header: phone (<=768px) ----------
   ONE bar, <=64px tall: mark + wordmark, burger on the right. The tagline,
   the nav, the account link and DE/EN move into the panel. */
.burger{display:none}
@media(max-width:768px){
  .hdr__in{flex-wrap:nowrap;gap:var(--s2);min-height:56px;padding-block:var(--s1)}
  .brand{min-height:44px;margin-right:auto;min-width:0}
  .brand__tag{display:none}
  .brand__mark{width:30px;height:30px}
  .wm{font-size:1.22rem}

  .burger{display:inline-flex;align-items:center;justify-content:center;flex:none;
    width:var(--tap);height:var(--tap);margin-inline-end:calc(var(--s2) * -1);
    padding:0;border:0;background:none;color:var(--blue);cursor:pointer;
    border-radius:var(--radius-pill);-webkit-tap-highlight-color:transparent}
  .burger:hover{background:var(--blue-tint)}
  .burger__i{width:26px;height:26px;display:block;fill:none}
  .burger__i--close{display:none}
  .hdr--open .burger{background:var(--blue-tint)}
  .hdr--open .burger__i--open{display:none}
  .hdr--open .burger__i--close{display:block}

  .hdr__menu{display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:var(--s3);
    background:var(--paper);border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-panel);padding:var(--s3) var(--pad) var(--s4);
    max-height:calc(100vh - 57px);max-height:calc(100dvh - 57px);
    overflow-y:auto;overscroll-behavior:contain}
  .hdr--open .hdr__menu{display:flex}
  /* Flow pages (nav:false) have no burger — their language switch stays inline. */
  .hdr__menu--bare{display:contents}

  .hdr__menu:not(.hdr__menu--bare) .nav{order:1;width:auto;flex-direction:column;flex-wrap:nowrap;
    gap:2px;border-top:0;padding-top:0;margin:0}
  .hdr__menu:not(.hdr__menu--bare) .nav__a{width:100%;padding-inline:var(--s3);border-radius:var(--radius);
    font-size:var(--fs-base);color:var(--ink-mid)}
  .hdr__menu:not(.hdr__menu--bare) .hdr__right{order:2;width:auto;margin:0;padding-top:var(--s3);
    border-top:1px solid var(--line-soft);
    justify-content:space-between;gap:var(--s3)}
  .hdr__menu:not(.hdr__menu--bare) .acct{display:inline-flex;align-items:center;line-height:1.2;
    min-height:var(--tap);padding-inline:var(--s4);font-size:var(--fs-md);max-width:18ch}
}

/* ---------- practice tabs ---------- */
.tabs{background:var(--paper);border-bottom:1px solid var(--line)}
.tabs__in{display:flex;gap:var(--s1);max-width:var(--maxw);margin:0 auto;
  padding:var(--s2) var(--pad);overflow-x:auto;-webkit-overflow-scrolling:touch}
.tab{display:inline-flex;align-items:center;min-height:38px;padding:0 .95rem;
  border-radius:var(--radius-pill);text-decoration:none;font-size:var(--fs-md);
  font-weight:600;color:var(--muted);white-space:nowrap}
.tab:hover{background:var(--blue-tint);color:var(--blue);text-decoration:none}
.tab--on{background:var(--blue);color:#fff}
.tab--on:hover{background:var(--blue-deep);color:#fff}

/* ---------- shell ---------- */
.main{max-width:var(--maxw-app);margin:0 auto;padding:var(--page-y) var(--pad) var(--s6);min-width:0}
body.has-sticky .main{padding-bottom:7rem}

.ftr{border-top:1px solid var(--line);background:var(--paper);color:var(--muted);padding-block:var(--page-y)}
.ftr__in{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);text-align:center}
.ftr__links{font-size:var(--fs-md);color:var(--muted);margin:0 0 var(--s2)}
.ftr a{color:var(--muted);text-decoration:none;display:inline-block;padding-block:var(--s1)}
.ftr a:hover{color:var(--blue);text-decoration:underline}
.disclaimer{font-size:var(--fs-sm);color:var(--muted);margin:0;max-width:70ch;margin-inline:auto}

/* ---------- surfaces: ONE card treatment ---------- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--card-pad);margin:0 0 var(--stack);box-shadow:var(--shadow-card)}
.card>h2{font-family:var(--font-display);font-size:var(--fs-lg);letter-spacing:-.025em;
  font-weight:600;margin-bottom:var(--s3)}
.card--flat{box-shadow:none;background:var(--wash);border-color:var(--line)}
.card--accent{border-inline-start:4px solid var(--blue)}
/* the feature card: the accent bar over the palette's softest blue */
.card--pay{border-color:var(--blue-line);border-inline-start:4px solid var(--blue);
  background:var(--link-soft);box-shadow:none}

/* ---------- hero: THE inverted navy panel ---------- */
.hero{
  padding:clamp(1.4rem,5vw,2.6rem);
  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;
}
.hero.card--accent{border-inline-start:1px solid var(--on-navy-12)}
.hero h1{font-size:var(--fs-3xl);color:#fff;max-width:22ch;margin-bottom:0}
/* the lede paragraph. On the navy panel it takes the on-navy ink; on a white
   card (the exam intro uses the same class) it stays the panel prose colour —
   stated in that order so a page without a .hero never gets near-white type on
   white paper. */
.hero__sub{margin-top:var(--s4);margin-bottom:var(--s5);font-size:clamp(1rem,2vw,1.12rem);
  line-height:1.55;color:var(--ink-mid);max-width:56ch}
.hero .hero__sub{color:var(--hero-lede-ink);max-width:44ch}
/* The eyebrow on the hero is a pill: the border and translucent fill are what
   make it secondary, so the WORDS stay at full strength. inline-block, never
   inline-flex + fit-content. */
.hero .tag{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;margin-bottom:var(--s4)}
.subcta{margin:var(--s4) 0 0;text-align:center;font-size:var(--fs-md)}
.hero .subcta a{color:#fff;text-decoration:underline;text-underline-offset:.2em}
.hero .subcta a:hover{color:var(--blue-tint)}

/* ---------- buttons ---------- */
.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 var(--blue);background:var(--blue);color:#fff;cursor:pointer;
  box-shadow:var(--shadow-card);
  transition:background var(--motion),border-color var(--motion),color var(--motion),box-shadow var(--motion),transform var(--motion);
}
.btn:hover{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff;
  box-shadow:var(--shadow-lift);transform:translateY(-1px);text-decoration:none}
.btn:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
/* the SECONDARY level: an outline, never a second filled shape */
.btn--ghost{background:var(--paper);color:var(--ink);border-color:var(--line-strong);box-shadow:none}
.btn--ghost:hover{background:var(--paper);border-color:var(--blue-line);color:var(--blue);
  box-shadow:var(--shadow-card);transform:none}
.btn--wide{display:flex;width:100%}
.btn--rec{width:auto;display:inline-flex}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;pointer-events:none}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover{transform:none}}
/* ON THE NAVY PANEL THE PAIR REVERSES: the primary goes solid white with navy
   type, the secondary drops to a translucent hairline outline. */
.hero .btn,.vstage .btn{background:var(--paper);color:var(--blue);border-color:var(--paper);box-shadow:var(--shadow-card)}
.hero .btn:hover,.vstage .btn:hover{background:var(--blue-tint);color:var(--blue-deep);border-color:var(--blue-tint)}
.hero .btn--ghost,.vstage .btn--ghost{background:var(--on-navy-08);border-color:var(--on-navy-34);color:#fff}
.hero .btn--ghost:hover,.vstage .btn--ghost:hover{background:var(--on-navy-16);border-color:#fff;color:#fff}
.hero .btn:focus-visible,.vstage .btn:focus-visible{outline-color:#fff}

/* A multi-line navigation row is a CARD, not a pill: it carries the card
   treatment and the card's one hover affordance. */
.btn--left{
  display:flex;width:100%;justify-content:space-between;align-items:center;gap:var(--s3);
  text-align:start;padding:var(--card-pad);border-radius:var(--radius-lg);
  background:var(--paper);color:var(--ink);border:1px solid var(--line);
  border-inline-start:4px solid var(--blue);box-shadow:var(--shadow-card);
  font-weight:400;min-height:var(--tap);
}
.btn--left b{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:600;letter-spacing:-.025em}
.btn--left:hover{background:var(--paper);border-color:var(--blue-line);border-inline-start-color:var(--blue);
  color:var(--ink);box-shadow:var(--shadow-lift);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.btn--left:hover{transform:none}}
.skip{display:block;text-align:center;font-size:var(--fs-md);color:var(--muted);
  margin-top:var(--s3);min-height:var(--tap);line-height:var(--tap)}

.stickybar{position:fixed;left:0;right:0;bottom:0;background:var(--paper-a94);
  backdrop-filter:blur(16px);border-top:1px solid var(--line);
  padding:var(--s3) var(--pad) calc(var(--s3) + env(safe-area-inset-bottom));
  z-index:40;box-shadow:0 -12px 32px rgba(20,52,107,.10)}
.stickybar>*{max-width:var(--maxw-app);margin:0 auto}

/* ---- cookie banner ----
   A BAR, not a wall: it sits at the bottom, it is the width of the product
   measure, nothing is dimmed and nothing behind it is blocked. Rendered only
   when the marketing pixel is switched on. The two answers are ONE button
   class — same size, same border, same weight — so neither reads as the
   "right" one. */
[hidden]{display:none !important}
.cc{position:fixed;left:var(--s3);right:var(--s3);bottom:var(--s3);z-index:60;
  max-width:var(--maxw-app);margin:0 auto;
  background:var(--paper);border:1px solid var(--line);
  border-inline-start:4px solid var(--warm);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-panel);
  padding:var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom))}
.cc__in{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;justify-content:space-between}
.cc__txt{margin:0;font-size:var(--fs-md);line-height:1.5;color:var(--ink-mid);flex:1 1 17rem;min-width:0}
.cc__more{color:var(--link);text-decoration:underline;white-space:nowrap}
.cc__btns{display:flex;gap:var(--s2);flex:0 0 auto}
.cc__btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--tap);padding:.55rem 1.05rem;
  border-radius:var(--radius-pill);border:1.5px solid var(--blue);
  background:var(--paper);color:var(--blue);
  font-family:inherit;font-size:var(--fs-md);font-weight:600;line-height:1.2;
  cursor:pointer;white-space:nowrap;
  transition:background var(--motion),color var(--motion)}
.cc__btn:hover{background:var(--blue-tint)}
.cc__btn:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
/* above a flow's sticky CTA, never on top of it */
body.has-sticky .cc{bottom:calc(var(--tap) + var(--s5))}
@media(max-width:560px){
  .cc__in{flex-direction:column;align-items:stretch}
  .cc__btns{width:100%}
  .cc__btn{flex:1 1 0}
}
@media (prefers-reduced-motion:reduce){.cc__btn{transition:none}}

.row{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}
.stack{display:grid;gap:var(--s3)}
.grid{display:grid;gap:var(--gap)}
@media(min-width:720px){.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.muted{color:var(--muted)}
.small{font-size:var(--fs-md)}
.ok-txt{color:var(--strong)}
.lock{font-size:var(--fs-sm);color:var(--warm-deep);margin-left:6px}

/* the eyebrow above a heading: small, uppercase, letter-spaced, chrome navy */
.tag{display:block;font-size:var(--fs-caps);letter-spacing:.09em;text-transform:uppercase;
  color:var(--blue);font-weight:600;margin:0 0 var(--s2);background:none;padding:0}

/* ---------- notices: the rule on the reading-start edge ---------- */
.notice{padding:var(--s3) var(--s4);border-radius:var(--radius-sm);font-size:var(--fs-md);
  border:1px solid transparent;border-inline-start-width:4px;border-inline-start-style:solid;
  margin:0 0 var(--stack)}
.notice--ok{background:var(--strong-bg);color:var(--strong);border-color:var(--strong-line);border-inline-start-color:var(--strong)}
.notice--warn{background:var(--moderate-bg);color:var(--moderate);border-color:var(--moderate-line);border-inline-start-color:var(--moderate)}
.notice--err{background:var(--weak-bg);color:var(--weak);border-color:var(--weak-line);border-inline-start-color:var(--weak)}
.notice--info{background:var(--link-soft);color:var(--blue);border-color:var(--blue-line);border-inline-start-color:var(--blue)}

/* ---------- fields ---------- */
label{display:block;font-weight:600;font-size:var(--fs-md);margin:0 0 var(--s1);color:var(--ink)}
input[type=text],input[type=date],input[type=email],input[type=number],input[type=password],select,textarea{
  width:100%;min-height:var(--tap);padding:.72rem .95rem;
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  font:inherit;font-size:max(1rem,16px);background:var(--paper);color:var(--ink)}
input:hover,select:hover,textarea:hover{border-color:var(--blue-line)}
textarea{min-height:140px;resize:vertical;line-height:1.55}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
input:focus,select:focus,textarea:focus{border-color:var(--blue)}
input[disabled],select[disabled],textarea[disabled]{background:var(--sunken);color:var(--muted);cursor:not-allowed}

.opt{display:flex;gap:var(--s3);align-items:flex-start;
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  padding:var(--s3) var(--s4);margin:0 0 var(--s2);cursor:pointer;background:var(--paper);
  font-weight:400;min-height:var(--tap);transition:border-color var(--motion),background var(--motion)}
.opt:hover{border-color:var(--blue-line)}
.opt input{margin-top:3px;flex:none;width:20px;height:20px;accent-color:var(--blue)}
.opt span{font-size:var(--fs-base);color:var(--ink-mid)}
.opt--pick{align-items:center}
.opt--consent{background:var(--wash)}
.opt:has(input:checked){border-color:var(--blue);background:var(--blue-tint)}

.qitem{border-top:1px solid var(--line-soft);padding-top:var(--s4);margin-top:var(--s4)}
.qitem:first-of-type{border-top:0;padding-top:0;margin-top:0}
.qitem__q{font-weight:600;margin:var(--s3) 0 var(--s2)}
.stimulus{white-space:pre-wrap;background:var(--wash);color:var(--ink-mid);
  border:1px solid var(--line);padding:var(--s3) var(--s4);border-radius:var(--radius-sm);
  font:inherit;font-size:var(--fs-md);margin:0 0 var(--s3)}

/* physical borders: the checkmark keeps its shape whatever the direction */
.ticks{list-style:none;padding:0;margin:0;font-size:var(--fs-md);display:grid;gap:var(--s2)}
.ticks li{padding:0 0 0 var(--s5);position:relative}
.ticks li::before{content:"";position:absolute;left:2px;top:.42em;width:11px;height:6px;
  border-left:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg)}
.ticks--on li::before{border-left-color:var(--strong);border-bottom-color:var(--strong)}

/* ---------- progress ---------- */
.prog{margin:0 0 var(--stack)}
.prog__top{display:flex;justify-content:space-between;font-size:var(--fs-caps);
  letter-spacing:.09em;text-transform:uppercase;font-weight:600;color:var(--blue);margin-bottom:var(--s2)}
.prog__top .muted{color:var(--muted);letter-spacing:0;text-transform:none;font-size:var(--fs-sm)}
.prog__bar{height:6px;border-radius:var(--radius-pill);background:var(--sunken);
  overflow:hidden;border:1px solid var(--line-soft)}
.prog__bar i{display:block;height:100%;background:var(--blue);border-radius:var(--radius-pill);transition:width .3s}

/* ---------- levels & results ----------
   The level palette is fspreif's verdict palette: a tint, an accessible ink and
   the hairline each one needs to sit in a bordered box. */
.pill{display:inline-grid;place-items:center;min-width:44px;padding:.3rem .75rem;
  border-radius:var(--radius-pill);font-family:var(--font-display);font-weight:600;
  font-size:var(--fs-md);border:1px solid transparent;
  background:var(--sunken);color:var(--muted)}
.pill--a1{background:var(--blue-tint);color:var(--blue);border-color:var(--blue-line)}
.pill--a2{background:var(--moderate-bg);color:var(--moderate);border-color:var(--moderate-line)}
.pill--b1{background:var(--strong-bg);color:var(--strong);border-color:var(--strong-line)}
.pill--none{background:var(--sunken);color:var(--muted);border-color:var(--line)}
.pill.big{font-size:1.3rem;min-width:70px;padding:var(--s2) var(--s4)}

.rhead{display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap}
.rhead__big{min-width:88px;height:88px;border-radius:var(--radius);display:grid;place-items:center;
  font-family:var(--font-display);font-weight:700;font-size:2rem;letter-spacing:-.035em;
  border:1px solid var(--line);background:var(--sunken);color:var(--muted);flex:none;padding:0 var(--s3)}
.rhead__big--b1{background:var(--strong-bg);color:var(--strong);border-color:var(--strong-line)}
.rhead__big--a2{background:var(--moderate-bg);color:var(--moderate);border-color:var(--moderate-line)}
.rhead__big--a1{background:var(--blue-tint);color:var(--blue);border-color:var(--blue-line)}
.rhead__big--none{background:var(--sunken);color:var(--muted);border-color:var(--line)}
.rhead__big--score{background:var(--blue);color:#fff;border-color:var(--blue);font-size:1.5rem}
.rhead__txt{min-width:0}
.rhead__txt h1{margin:0 0 .15em;font-size:clamp(1.3rem,4.6vw,1.8rem)}
.rhead__txt .tag{margin:0 0 var(--s1)}

.chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.chip{display:inline-flex;gap:6px;align-items:baseline;border-radius:var(--radius-pill);
  padding:.3rem .75rem;font-size:var(--fs-sm);background:var(--wash);color:var(--ink);
  border:1px solid var(--line)}
.chip b{font-weight:600}
.chip i{font-style:normal;opacity:.8;font-size:var(--fs-caps)}
.chip--b1{background:var(--strong-bg);color:var(--strong);border-color:var(--strong-line)}
.chip--a2{background:var(--moderate-bg);color:var(--moderate);border-color:var(--moderate-line)}
.chip--a1{background:var(--blue-tint);color:var(--blue);border-color:var(--blue-line)}
.chip--none{background:var(--weak-bg);color:var(--weak);border-color:var(--weak-line)}

.lvlrow{display:flex;gap:var(--s2);margin:0 0 var(--s4);flex-wrap:wrap}
.lvlchip{display:inline-flex;align-items:center;gap:6px;padding:.5rem 1rem;
  border-radius:var(--radius-pill);border:1px solid var(--line-strong);text-decoration:none;
  color:var(--ink);font-weight:600;background:var(--paper);min-height:var(--tap)}
.lvlchip:hover{border-color:var(--blue-line);color:var(--blue);text-decoration:none}
.lvlchip i{font-style:normal;font-weight:400;font-size:var(--fs-sm);color:var(--muted)}
.lvlchip--on{background:var(--blue);color:#fff;border-color:var(--blue)}
.lvlchip--on:hover{background:var(--blue-deep);color:#fff;border-color:var(--blue-deep)}
.lvlchip--on i{color:var(--hero-proof-ink)}

/* ---------- meters ---------- */
.meter{margin:0 0 var(--s4)}
.meter__top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3)}
.meter__label{font-weight:600;font-size:var(--fs-md)}
.meter__val{font-family:var(--font-display);font-weight:700;font-variant-numeric:tabular-nums}
.meter__val--strong{color:var(--strong)}
.meter__val--mid{color:var(--moderate)}
.meter__val--weak{color:var(--weak)}
.meter__bar{height:6px;border-radius:var(--radius-pill);background:var(--sunken);
  overflow:hidden;margin:var(--s2) 0 var(--s1);border:1px solid var(--line-soft)}
.meter__fill{display:block;height:100%;border-radius:var(--radius-pill)}
.meter__fill--strong{background:var(--strong)}
.meter__fill--mid{background:var(--warm)}
.meter__fill--weak{background:var(--weak)}
.meter__hint{font-size:var(--fs-sm);color:var(--muted);margin:0}
.critrow{border-top:1px solid var(--line-soft);padding-top:var(--s4);margin-top:var(--s4)}
.critrow:first-child{border-top:0;padding-top:0;margin-top:0}

/* ---------- quoted correction: the ONE pattern every report uses ---------- */
.qb{margin:0 0 var(--s4);padding:var(--s3) var(--s4);
  border:1px solid var(--blue-line);border-inline-start:4px solid var(--blue-line);
  background:var(--link-soft);border-radius:var(--radius-sm)}
.qb--big{background:var(--paper);border-color:var(--line);border-inline-start:4px solid var(--blue);
  box-shadow:var(--shadow-card);padding:var(--s4)}
.qb__q{margin:0 0 var(--s2);font-style:normal;font-size:var(--fs-base);color:var(--ink);line-height:1.6}
.qb__i{font-size:var(--fs-sm);color:var(--weak);margin:0 0 var(--s2)}
.qb__b{margin:0;font-size:var(--fs-md);color:var(--ink)}
.qb__tag{display:inline-block;font-size:var(--fs-caps);font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;background:var(--strong-bg);color:var(--strong);border:1px solid var(--strong-line);
  padding:.1rem .5rem;border-radius:var(--radius-pill);margin-right:6px}
.recline{margin:var(--s4) 0 0}

/* ---------- accordion ---------- */
.acc{border:1px solid var(--line);border-radius:var(--radius);margin:0 0 var(--s2);
  background:var(--paper);box-shadow:var(--shadow-card)}
.acc>summary{cursor:pointer;padding:var(--s3) var(--s4);font-family:var(--font-display);
  font-weight:600;letter-spacing:-.02em;font-size:var(--fs-lg);list-style:none;
  min-height:var(--tap);display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);border-radius:var(--radius)}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary:hover{color:var(--blue)}
.acc>summary::after{content:"+";flex:0 0 auto;color:var(--blue);font-weight:400;font-size:1.5rem;line-height:1}
.acc[open]{border-color:var(--blue-line);background:var(--blue-tint)}
.acc[open]>summary{color:var(--blue)}
.acc[open]>summary::after{content:"−"}
.acc__b{padding:0 var(--s4) var(--s4);color:var(--ink-mid)}
summary:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* ---------- audio player ---------- */
.ap{display:flex;align-items:center;gap:var(--s3);margin:0 0 var(--s3);flex-wrap:wrap}
.ap__btn{display:inline-flex;align-items:center;gap:var(--s2);
  border:1px solid var(--blue-line);background:var(--blue-tint);color:var(--blue);
  border-radius:var(--radius-pill);padding:.5rem 1.1rem .5rem .5rem;
  font:inherit;font-weight:600;cursor:pointer;min-height:var(--tap);
  transition:background var(--motion),border-color var(--motion)}
.ap__btn:hover{background:var(--link-soft);border-color:var(--blue)}
.ap__icon{width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;
  display:grid;place-items:center;font-size:.8rem;flex:none}
.ap--on .ap__icon{background:var(--blue-deep)}
.ap__left{font-size:var(--fs-sm);color:var(--muted)}
.ap--spent .ap__btn{opacity:.5;cursor:not-allowed}
.ap--spent .ap__left{color:var(--weak)}

/* ---------- loading ---------- */
.loading{text-align:center;padding:var(--s4) 0}
.loading__dots{display:flex;gap:var(--s2);justify-content:center;margin:0 0 var(--s5)}
.loading__dots i{width:12px;height:12px;border-radius:50%;background:var(--blue);animation:bounce 1.1s infinite}
.loading__dots i:nth-child(2){animation-delay:.15s}
.loading__dots i:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-5px)}}
@media (prefers-reduced-motion:reduce){.loading__dots i{animation:none;opacity:.6}}

/* ---------- voice: the second navy panel ---------- */
.voicewrap{display:grid;gap:var(--gap)}
@media(min-width:880px){.voicewrap{grid-template-columns:1.15fr .85fr;align-items:start}}
.vstage{
  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;
  padding:var(--card-pad);min-height:330px;display:flex;flex-direction:column;gap:var(--s3)}
.vstage__top{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap}
.vstatus{font-size:var(--fs-sm);font-weight:600;padding:.25rem .75rem;border-radius:var(--radius-pill);
  background:var(--on-navy-12);color:#fff;border:1px solid var(--on-navy-34);
  display:inline-flex;align-items:center;min-height:32px}
.vstatus--ok{background:var(--strong-bg);color:var(--strong);border-color:var(--strong-line)}
.vstatus--busy{background:var(--moderate-bg);color:var(--moderate);border-color:var(--moderate-line)}
.vstatus--err{background:var(--weak-bg);color:var(--weak);border-color:var(--weak-line)}
.timer{font-family:var(--font-display);font-variant-numeric:tabular-nums;font-weight:700;
  font-size:1.4rem;letter-spacing:-.03em;line-height:1}
.vstage .timer{color:#fff}
.timer--low{color:#FFB4A6}
#chat{flex:1;overflow-y:auto;max-height:340px;display:flex;flex-direction:column;gap:var(--s3);padding-right:4px}
.turn{max-width:88%}
.turn--examiner{align-self:flex-start}
.turn--candidate{align-self:flex-end;text-align:right}
.turn__who{margin:0 0 3px;font-size:var(--fs-caps);text-transform:uppercase;letter-spacing:.09em;
  font-weight:600;color:var(--hero-proof-ink)}
.turn__txt{background:var(--on-navy-08);border:1px solid var(--on-navy-16);
  padding:var(--s2) var(--s3);border-radius:var(--radius);font-size:var(--fs-md);line-height:1.55;color:#fff}
.turn--candidate .turn__txt{background:var(--on-navy-16);border-color:var(--on-navy-34)}
.vhint{color:var(--hero-proof-ink);font-size:var(--fs-md);margin:auto 0;text-align:center}
.vctl{display:flex;gap:var(--s3);flex-wrap:wrap}
.vctl .btn{width:auto;flex:1}
#taskcards{display:grid;gap:var(--s3)}
.tcard{border:1px solid var(--line);border-inline-start:4px solid var(--blue);
  border-radius:var(--radius-lg);padding:var(--s3) var(--s4);background:var(--paper);box-shadow:var(--shadow-card)}
.tcard__h{margin:0 0 var(--s1);font-size:var(--fs-caps);text-transform:uppercase;letter-spacing:.09em;
  color:var(--blue);font-weight:600}
.tcard__b{font-size:var(--fs-md);color:var(--ink-mid)}
.simsteps{list-style:none;display:flex;gap:var(--s2);flex-wrap:wrap;padding:0;margin:0 0 var(--s4);
  font-size:var(--fs-sm);color:var(--muted)}
.simsteps li{background:var(--wash);border:1px solid var(--line);border-radius:var(--radius-pill);padding:.25rem .7rem}
.simsteps b{color:var(--blue);font-weight:600}
.clockline{margin:var(--s2) 0 0}

/* ---------- misc ---------- */
.kv{display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s5);font-size:var(--fs-md)}
.kv dt{color:var(--muted)}
.kv dd{margin:0;font-weight:600}
table{width:100%;border-collapse:collapse;font-size:var(--fs-md)}
th,td{text-align:left;padding:var(--s2);border-bottom:1px solid var(--line-soft);vertical-align:top}
th{font-size:var(--fs-caps);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;
  border-bottom-color:var(--line)}
tbody tr:last-child td{border-bottom:0}
.rec{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;margin:var(--s4) 0}
.rec__dot{width:12px;height:12px;border-radius:50%;background:var(--line-strong);flex:none}
.rec--on .rec__dot{background:var(--weak);animation:pulse 1.1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.rec--on .rec__dot{animation:none}}

/* ---------- next three steps (placement result + Mein Plan) ---------- */
.step{display:flex;align-items:center;gap:var(--s3);min-height:56px;padding:var(--s3) var(--s4);
  border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--paper);
  text-decoration:none;color:var(--ink);box-shadow:var(--shadow-card);
  transition:border-color var(--motion),box-shadow var(--motion),transform var(--motion)}
.step:hover{border-color:var(--blue-line);box-shadow:var(--shadow-lift);transform:translateY(-2px);
  color:var(--ink);text-decoration:none}
.step--first{background:var(--blue);border-color:var(--blue);color:#fff}
.step--first:hover{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff}
.step__n{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:var(--fs-caps);font-weight:600;background:var(--blue-tint);color:var(--blue)}
.step--first .step__n{background:var(--on-navy-24);color:#fff}
.step__txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.step__txt b{font-weight:600;line-height:1.25}
.step__txt i{font-style:normal;font-size:var(--fs-sm);color:var(--muted)}
.step--first .step__txt i{color:var(--hero-proof-ink)}
.step__go{flex:none;font-size:1.3rem;line-height:1;color:var(--muted)}
.step--first .step__go{color:#fff}
@media (prefers-reduced-motion:reduce){.step{transition:none}.step:hover{transform:none}}

/* ---------- Prüfungssimulation ---------- */
.exbar{position:sticky;top:0;z-index:15;display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);background:var(--blue);color:#fff;border-radius:var(--radius-lg);
  padding:var(--s3) var(--s4);margin:0 0 var(--stack);box-shadow:var(--shadow-card)}
.exbar__label{font-size:var(--fs-caps);letter-spacing:.09em;text-transform:uppercase;
  font-weight:600;color:var(--hero-proof-ink)}
.exbar .timer{color:#fff}
.exbar .timer--low{color:#FFB4A6}
.wordcount{font-size:var(--fs-sm);color:var(--muted);margin:var(--s2) 0 0;text-align:right;
  font-variant-numeric:tabular-nums}
.wordcount--ok{color:var(--strong);font-weight:600}
.pts{list-style:none;padding:0;margin:0 0 var(--s3);font-size:var(--fs-md);display:grid;gap:var(--s2)}
.pts li{position:relative;padding:0 0 0 var(--s5)}
.pts li::before{content:"□";position:absolute;left:0;color:var(--muted);font-weight:600}
.pts li.pts--on::before{content:"☑";color:var(--strong)}
.pts li.pts--off::before{content:"☐";color:var(--weak)}
.verdict{display:flex;gap:var(--s4);align-items:center;padding:var(--card-pad);
  border-radius:var(--radius-lg);margin:0 0 var(--stack);flex-wrap:wrap}
.verdict--yes{background:var(--strong-bg);border:1px solid var(--strong-line)}
.verdict--no{background:var(--moderate-bg);border:1px solid var(--moderate-line)}
.verdict__mark{width:56px;height:56px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:1.6rem;color:#fff;background:var(--strong)}
.verdict--no .verdict__mark{background:var(--warm-deep)}
.verdict h2{margin:0 0 .2em}
.verdict--yes h2{color:var(--strong)}
.verdict--no h2{color:var(--moderate)}
.verdict p{margin:0;font-size:var(--fs-md);color:var(--ink-mid)}
.exsteps{list-style:none;padding:0;margin:0 0 var(--stack);display:grid;gap:var(--s2)}
.exsteps li{display:flex;align-items:center;gap:var(--s3);font-size:var(--fs-md);color:var(--muted)}
.exsteps__n{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:var(--fs-caps);font-weight:600;background:var(--sunken);color:var(--muted)}
.exsteps li.on{color:var(--ink);font-weight:600}
.exsteps li.on .exsteps__n{background:var(--blue);color:#fff}
.exsteps li.done .exsteps__n{background:var(--strong-bg);color:var(--strong)}

/* An example of the real report, rendered on the home page with real
   components: the same card treatment on the cool wash, marked as an example
   by its ground rather than by a dashed rule. */
.demo{border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--card-pad);
  background:var(--wash)}
.demo .card,.demo .acc,.demo .qb--big{box-shadow:none}
.demo .rhead__big{min-width:70px;height:70px;font-size:1.6rem}

/* ---------- phones ---------- */
@media (max-width:520px){
  .brand__mark{width:28px;height:28px}
  .acct{max-width:12ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;line-height:36px}
  .hdr__in{gap:var(--s2)}
  .rhead{gap:var(--s3)}
  .rhead__big{min-width:72px;height:72px;font-size:1.7rem}
  .verdict__mark{width:48px;height:48px;font-size:1.4rem}
  .vctl .btn{flex:1 1 100%}
}

/* ---------- print (the Beleg is meant to be saved as a PDF) ---------- */
@media print{
  .hdr,.ftr,.stickybar,.practicetabs,.btn,.burger,.cc{display:none !important}
  body{background:#fff}
  .main{padding:0}
  .card{border:0;box-shadow:none;padding:0}
  a[href^="mailto:"]{color:inherit;text-decoration:none}
}

/* ---------- level test: one-tap answers ---------- */
/* The 2-minute test has no "continue" button: an option IS the submit, so the
   whole test is ten taps. Same surface as .opt, sized for a thumb. */
.opts{display:grid;gap:var(--s2)}
.opt--tap{width:100%;text-align:left;font:inherit;color:var(--ink-mid);
  align-items:center;margin:0;appearance:none;-webkit-appearance:none}
.opt--tap:hover{border-color:var(--blue-line);background:var(--blue-tint)}
.opt--tap:active{transform:scale(.995)}
.opt--tap span{display:block}
.opt--quiet{border-style:dashed;color:var(--muted);background:var(--wash)}

/* ---------- the free taste on the result page ---------- */
.taste{border-top:1px solid var(--line-soft);padding-top:var(--s4);margin-top:var(--s4)}
.taste:first-of-type{border-top:0}
.taste .opt--tap[data-state="right"]{border-color:var(--strong-line);background:var(--strong-bg);color:var(--strong)}
.taste .opt--tap[data-state="wrong"]{border-color:var(--weak-line);background:var(--weak-bg);color:var(--weak)}
.taste .opt--tap[disabled]{cursor:default}
.taste__fb{margin:var(--s3) 0 0;font-weight:600}
.taste__fb--right{color:var(--strong)}
.taste__fb--wrong{color:var(--weak)}
.taste__why{margin:var(--s2) 0 0;font-size:var(--fs-sm);color:var(--muted);
  background:var(--wash);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:var(--s3) var(--s4)}

/* ---------- tables ---------- */
.tbl th:last-child,.tbl td:last-child{text-align:right;white-space:nowrap}
.ok-txt{color:var(--strong);font-weight:600}

/* ---------- price anchor ---------- */
/* What the real exam costs, next to what we cost. Quiet by design: a fact,
   not a shout — the loud element on the screen stays the CTA above it. */
.anchor{border:1px solid var(--blue-line);background:var(--blue-tint);
  border-radius:14px;padding:14px 16px;margin:14px 0 0}
.anchor p{margin:0}
.anchor__l{font-size:14.5px;line-height:1.55;color:var(--ink-mid)}
.anchor__p{font-size:16px;line-height:1.5;color:var(--blue);margin-top:6px}
.anchor__n{font-size:13px;line-height:1.5;color:var(--muted);margin-top:6px}
.anchor--sm{border:0;background:none;padding:0;font-size:13.5px;line-height:1.6;
  color:var(--muted);margin:10px 0 0}
.anchor--sm b{color:var(--blue)}

/* ---------- what full access includes, on a result page ---------- */
.paths{list-style:none;margin:12px 0 0;padding:0}
.paths li{position:relative;padding:0 0 0 26px;margin:0 0 8px;font-size:15px;
  line-height:1.55;color:var(--ink-mid)}
.paths li::before{content:"";position:absolute;left:4px;top:.55em;width:9px;height:9px;
  border-radius:50%;background:var(--blue)}
.pricebtn{display:block;text-align:center}
.pricebtn small{display:block;font-weight:600;opacity:.85;font-size:13px;margin-top:2px}

/* ---------- level-test question heading ---------- */
/* The page needs an h1; the question needs the attention. So it is a label. */
.qhead{font-family:var(--font-body,inherit);font-size:12px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--faint);
  margin:0 0 12px;line-height:1.4}

/* ---------- e-mail before the free simulation ---------- */
.simmail{border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:4px 0 12px;
  background:var(--wash)}
.simmail label{display:block;font-weight:600;margin-bottom:6px}
.simmail p{margin:10px 0 0}