/* WordRunner — design A · Night Shift (OD-SRF-8; built 2026-10-01, OD-SRF-40/41).
   Source: vibecoding-portfolio docs/reviews/srf-design-review-2026-10-01/build/ (base.css + a.css), measured axe 0.
   Pages on this stylesheet: all ten (SRF N5, 2026-10-02 — styles.css and script.js retired). The legal pages add legal.css.
   Mobile-first: base rules are the phone layout; min-width queries add columns. Dark by default on every page (OD-SRF-85);
   light only after a visitor taps the switch. Fixes from the 2026-10-02 design + accessibility review are tagged L-/R-/G-/P-. */

/* ── Fonts: served from this site, not from Google (each family's OFL.txt is in assets/fonts/) ── */
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/fonts/atkinson-hyperlegible-next.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/atkinson-hyperlegible-next-italic.woff2) format("woff2")}
@font-face{font-family:"Orbitron";font-style:normal;font-weight:700 800;font-display:swap;src:url(assets/fonts/orbitron.woff2) format("woff2")}
@font-face{font-family:"Share Tech Mono";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/share-tech-mono.woff2) format("woff2")}

/* ── Tokens ── */
:root{
  color-scheme:dark;
  --bg:#0b0c12; --surface:#131522; --surface-alt:#0f111a; --line:#252a3f; --line-strong:#555d85;
  --text:#f1f3fa; --text2:#c2c7da; --text3:#9aa1bb;
  --cyan:#3fe6ff; --magenta:#ff5cc0; --gold:#ffc65c;
  --link:var(--cyan); --focus:#ffe066; --eyebrow:var(--cyan); --icon:var(--cyan); --num:var(--gold);
  --logo-accent:var(--cyan); --h1-accent:var(--cyan); --quote-line:var(--magenta);
  --nav-bg:rgba(11,12,18,.88); --footer-bg:#08090e;
  --btn-bg:#3fe6ff; --btn-bg-hover:#8ff1ff; --btn-fg:#04121a; --btn2-line:#3fe6ff; --btn2-fg:#3fe6ff; --btn2-hover:rgba(63,230,255,.10);
  --input-bg:#0b0c12; --input-line:#636c94;
  --mock-bg:#10121d; --mock-line:#262b42; --mock-text:#c2c7da; --mock-strong:#f1f3fa; --mock-muted:#a3aac2;
  --mock-accent:#3fe6ff; --mock-accent2:#b99bff; --mock-track:#2a2f4a; --ok:#4dff9d; --warn:#ffc65c;
  --grid-line:rgba(63,230,255,.06); --glow-a:rgba(63,230,255,.16); --glow-b:rgba(255,92,192,.12);
  --font-display:"Orbitron","Eurostile","Arial Black",sans-serif;
  --font-body:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-label:"Share Tech Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --fs-body:1.0625rem; --fs-lead:clamp(1.125rem,1.02rem + .45vw,1.3125rem); --fs-story:1.125rem;
  --fs-h1:clamp(1.75rem,1.2rem + 2.4vw,3rem); --fs-h2:clamp(1.5rem,1.15rem + 1.6vw,2.25rem); --fs-h3:1.1875rem;
  --radius:12px; --radius-sm:8px; --section-pad:clamp(3.5rem,2.5rem + 4vw,6rem);
}
/* Dark by default on every page (OD-SRF-85); light only after a visitor taps the switch (wr-theme). */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f5f6fa; --surface:#ffffff; --surface-alt:#eceef5; --line:#d5d9e6; --line-strong:#7f879f;
  --text:#0e1120; --text2:#363c55; --text3:#545b75;
  --cyan:#0b6f87; --magenta:#a3168f; --gold:#8a5a00;
  --focus:#7a3d00; --nav-bg:rgba(245,246,250,.9); --footer-bg:#eceef5;
  --btn-bg:#0b6f87; --btn-bg-hover:#095b6f; --btn-fg:#ffffff; --btn2-line:#0b6f87; --btn2-fg:#0b6f87; --btn2-hover:rgba(11,111,135,.08);
  --input-bg:#ffffff; --input-line:#7b8299;
  --mock-bg:#ffffff; --mock-line:#d5d9e6; --mock-text:#363c55; --mock-strong:#0e1120; --mock-muted:#545b75;
  --mock-accent:#0b6f87; --mock-accent2:#6d3fd1; --mock-track:#d5d9e6; --ok:#13703f; --warn:#8a5a00;
  --grid-line:rgba(11,111,135,.06); --glow-a:rgba(11,111,135,.10); --glow-b:rgba(163,22,143,.07);
}

/* ── Base ── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--fs-body);line-height:1.6;overflow-wrap:break-word}
img,svg{max-width:100%}
h1,h2,h3,p,figure,blockquote,dl,dd{margin:0}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
a{color:var(--link)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:1rem;top:-5rem;z-index:100;padding:.75rem 1rem;background:var(--surface);color:var(--text);border:2px solid var(--focus)}
.skip:focus{top:1rem}
.wrap{width:100%;max-width:72rem;margin-inline:auto;padding-inline:max(1.25rem,env(safe-area-inset-left)) max(1.25rem,env(safe-area-inset-right))}
@media (min-width:640px){.wrap{padding-inline:max(2rem,env(safe-area-inset-left)) max(2rem,env(safe-area-inset-right))}}
section{padding-block:var(--section-pad)}
/* Links inside running text are underlined, so they never depend on colour alone (WCAG 1.4.1). */
p a,li p a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.icon{width:1.75rem;height:1.75rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.flag{display:inline-block;width:1em;height:1em;vertical-align:-.125em}

/* ── Navigation ── */
.nav{position:sticky;top:0;z-index:50;background:var(--nav-bg);border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.nav-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;min-height:4rem}
.logo{display:inline-flex;align-items:center;min-height:2.75rem;font-family:var(--font-display);font-weight:700;font-size:1.25rem;letter-spacing:.03em;color:var(--text);text-decoration:none}
.logo-accent{color:var(--logo-accent)}
.nav-right{display:flex;align-items:center;gap:.625rem}
.nav-right nav{order:1}
.theme-btn{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:transparent;color:var(--text);cursor:pointer}
.theme-btn svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-btn .i-moon{display:none}
:root[data-theme="light"] .theme-btn .i-sun{display:none}
:root[data-theme="light"] .theme-btn .i-moon{display:block}
.menu-btn{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:transparent;color:var(--text);cursor:pointer}
.menu-btn svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.menu-btn .i-close,.menu-btn[aria-expanded="true"] .i-open{display:none}
.menu-btn[aria-expanded="true"] .i-close{display:block}
.menu{display:none;list-style:none;margin:0;padding:0}
.menu.open{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);padding:.5rem 1.25rem 1.5rem;box-shadow:0 24px 40px rgba(0,0,0,.25)}
.menu a{display:flex;align-items:center;min-height:3rem;color:var(--text);text-decoration:none;font-size:1.0625rem}
.menu li+li{border-top:1px solid var(--line)}
.menu .menu-cta{border-top:0;padding-top:1rem}
.menu a.btn{color:var(--btn-fg);justify-content:center}
.menu a[aria-current="page"]{font-weight:700}
@media (min-width:960px){
  .menu-btn{display:none}
  .nav-right{gap:1.75rem}
  .menu,.menu.open{display:flex;flex-direction:row;align-items:center;gap:1.75rem;position:static;padding:0;background:none;border:0;box-shadow:none}
  .menu li+li{border-top:0}
  .menu .menu-cta{padding-top:0}
  .menu a{min-height:2.75rem;min-width:2.75rem;justify-content:center;font-size:.9375rem;color:var(--text2)}
  .menu a:hover{color:var(--text)}
  .menu a.btn{color:var(--btn-fg)}
  .menu a[aria-current="page"]{color:var(--text);box-shadow:inset 0 -2px 0 var(--cyan)}
}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;padding:.75rem 1.5rem;font-family:var(--font-display);font-weight:700;font-size:.875rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;text-align:center;border-radius:8px;border:2px solid transparent;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.btn-primary{background:var(--btn-bg);color:var(--btn-fg);box-shadow:0 0 0 1px var(--btn-bg),0 8px 28px -10px var(--btn-bg)}
.btn-primary:hover{background:var(--btn-bg-hover)}
.btn-secondary{border-color:var(--btn2-line);color:var(--btn2-fg);background:transparent}
.btn-secondary:hover{background:var(--btn2-hover)}
.btn-sm{min-height:2.75rem;padding:.5rem 1.125rem}
.btn-full{width:100%}
.btn[disabled]{opacity:.7;cursor:progress}
.btn-icon{font-size:.875em}
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem}
.cta-row .btn{flex:1 1 13rem}
@media (min-width:640px){.cta-row .btn{flex:0 1 auto}}

/* ── Type roles ── */
.eyebrow{font-family:var(--font-label);font-size:.875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--eyebrow)}
h1{font-family:var(--font-display);font-weight:800;font-size:var(--fs-h1);line-height:1.15;letter-spacing:.005em;margin-top:.875rem}
.h1-accent{background:linear-gradient(90deg,var(--cyan),var(--magenta));-webkit-background-clip:text;background-clip:text;color:var(--cyan);-webkit-text-fill-color:transparent}
h2{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h2);line-height:1.15;letter-spacing:.01em}
.eyebrow+h2{margin-top:.625rem}
h3{font-family:var(--font-body);font-weight:700;font-size:var(--fs-h3);line-height:1.3}

/* ── Hero: a faint blueprint grid and two soft glows — static, nothing loops ── */
.hero{position:relative;padding-block:2.25rem 3rem;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60rem 30rem at 85% -10%,var(--glow-a),transparent 60%),
    radial-gradient(40rem 24rem at -10% 110%,var(--glow-b),transparent 60%),
    repeating-linear-gradient(0deg,var(--grid-line) 0 1px,transparent 1px 48px),
    repeating-linear-gradient(90deg,var(--grid-line) 0 1px,transparent 1px 48px);}
.hero-grid{display:grid;gap:2.5rem;position:relative}
.hero-copy{min-width:0}
.hero-eyebrow{display:inline-block}
.hero-sub{margin-top:1.25rem;max-width:36rem;font-size:var(--fs-lead);color:var(--text2);line-height:1.55}
.hero-small{margin-top:.875rem;max-width:36rem;font-size:.9375rem;color:var(--text3)}
.hero .cta-row{margin-top:1.5rem}
@media (min-width:960px){
  .hero{padding-block:4.5rem 5rem}
  .hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:4rem}
}

/* ── App mock-ups (pictures of the app, labels only) ── */
.mock{position:relative;background:var(--mock-bg);border:1px solid var(--mock-line);border-radius:var(--radius);padding:1.25rem;color:var(--mock-text);font-family:var(--font-label);font-size:.9375rem;line-height:1.5;min-width:0;box-shadow:0 20px 50px -24px rgba(0,0,0,.6)}
.mock::before{content:"";position:absolute;left:1.25rem;right:1.25rem;top:-1px;height:2px;background:linear-gradient(90deg,var(--cyan),transparent)}
.mock-label{font-size:.875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mock-accent);padding-bottom:.75rem;margin-bottom:1rem;border-bottom:1px solid var(--mock-line)}
.mock-title{font-size:.875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mock-strong);margin-bottom:.875rem}
.mock-title .as-written{text-transform:none;letter-spacing:0;color:var(--mock-muted)}
.bars{list-style:none;margin:0;padding:0;display:grid;gap:.625rem}
.bar{display:grid;grid-template-columns:7.75rem minmax(0,1fr) 4.25rem;align-items:center;gap:.75rem;font-size:.875rem}
.bar-level{text-align:right;color:var(--mock-muted)}
.bar-track{height:.5rem;border-radius:99px;background:var(--mock-track);overflow:hidden}
.bar-fill{display:block;height:100%;border-radius:inherit;background:var(--mock-accent)}
.mock-foot{margin-top:1rem;font-size:.875rem;color:var(--mock-accent)}
.mock-foot b{color:var(--mock-strong)}
.mock-prompt{padding:.75rem;border:1px solid var(--mock-line);border-radius:var(--radius-sm);font-size:.875rem}
.mock-prompt strong{color:var(--mock-accent)}
.mock-prompt small{font-size:.875rem;color:var(--mock-muted)}
.mock-answer{margin-top:.75rem;padding:.75rem;border:1px solid var(--mock-line);border-radius:var(--radius-sm);font-style:normal;color:var(--mock-strong)}
.mock-feedback{display:flex;gap:.75rem;align-items:flex-start;margin-top:.75rem;font-size:.875rem;color:var(--mock-muted)}
.chip{flex:none;padding:.125rem .5rem;border:1px solid currentColor;border-radius:4px;font-size:.875rem;letter-spacing:.08em;color:var(--ok)}
.mock-doc{color:var(--mock-strong);margin-bottom:.5rem}
.mock-rows{list-style:none;margin:0;padding:0}
.mock-rows li{display:flex;justify-content:space-between;gap:1rem;padding-block:.5rem;border-top:1px solid var(--mock-line);font-size:.875rem}
.mock-rows .word{color:var(--mock-strong)}
.mock-rows .rate{flex:none;color:var(--warn)}

/* ── Inside the app ── */
.showcase{padding-block:0 var(--section-pad)}
.showcase-grid{display:grid;gap:1.25rem}
/* R1 (OD-SRF-97): three cards — sentence marking, essay marking, teacher tools. Two columns on tablets with the third
   across both; three from 1024 px. */
@media (min-width:768px){.showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.showcase-grid>:last-child{grid-column:1/-1}}
@media (min-width:1024px){.showcase-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.showcase-grid>:last-child{grid-column:auto}}
/* R1b (OD-SRF-128): the two Teacher Tools cards share the third slot — side by side across a tablet, stacked in the
   third column on a computer, one under another on a phone. */
.showcase-teach{display:grid;gap:1.25rem;min-width:0;align-content:start}
@media (min-width:768px){.showcase-teach{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}
@media (min-width:1024px){.showcase-teach{grid-template-columns:minmax(0,1fr)}}
.showcase-note{margin-top:1.5rem;font-size:.9375rem;color:var(--text3);max-width:34rem}

/* ── Learn · See · Use: three steps, one column on a phone, three across on a wide screen ── */
.lsu{background:var(--surface-alt);border-block:1px solid var(--line)}
.steps{display:grid;gap:0}
.step{display:grid;align-content:start;grid-template-columns:2.5rem minmax(0,1fr);column-gap:.875rem;padding-block:1.75rem;border-top:1px solid var(--line);scroll-margin-top:5rem}
.step:first-child{border-top:0;padding-top:0}
.step-num{grid-row:span 4;font-family:var(--font-display);font-weight:700;font-size:1.125rem;color:var(--num);padding-top:.35rem}
.step .icon{width:2rem;height:2rem;color:var(--icon);margin-bottom:.625rem}
.step>p{margin-top:.75rem;color:var(--text2)}
.step .step-lead{color:var(--text);font-size:var(--fs-lead);line-height:1.5;padding-left:.875rem;border-left:3px solid var(--quote-line)}
.step .step-next{font-family:var(--font-label);font-size:.9375rem;color:var(--gold)}
@media (min-width:1000px){
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:2.5rem}
  .step,.step:first-child{border-top:0;padding-block:0;grid-template-columns:minmax(0,1fr)}
  .step-num{grid-row:auto;padding-top:0;margin-bottom:.5rem}
  .step h2{font-size:clamp(1.5rem,1rem + 1vw,1.875rem)}
}

/* ── Together · teachers and admins · parents ── */
.band-inner{display:grid;gap:1rem;max-width:38rem}
.band .icon{width:2.25rem;height:2.25rem;color:var(--icon)}
.band p{color:var(--text2)}
@media (min-width:640px){.band-inner{grid-template-columns:2.75rem minmax(0,1fr);column-gap:1.25rem}.band-inner .icon{grid-row:span 2}.band-inner>:not(.icon){grid-column:2}}
.band-tight{padding-top:0}
.teachers{background:var(--surface);border-block:1px solid var(--line)}
.teachers-inner{max-width:38rem}
.teachers .lead{margin-top:1rem;font-size:var(--fs-lead);line-height:1.5;color:var(--text)}
.teachers-inner>p+p{margin-top:.875rem;color:var(--text2)}
.teachers .cta-row{margin-top:1.75rem}

/* ── Who we are ── */
.story-text,.story h2{max-width:38rem}
.story .eyebrow{color:var(--gold)}
.story-text{margin-top:1.75rem;display:grid;gap:1.125rem;color:var(--text2);font-size:var(--fs-story);line-height:1.7}
.story-text .lead{color:var(--text);font-size:1.1em}

/* ── Data and safety ── */
.safety{border-block:1px solid var(--line);background:var(--surface-alt)}
.safety-list{list-style:none;margin:1.75rem 0 0;padding:0;display:grid;gap:1rem}
.safety-list li{display:grid;grid-template-columns:1.75rem minmax(0,1fr);gap:.75rem;align-items:start;color:var(--text)}
.safety-list .icon{width:1.5rem;height:1.5rem;color:var(--icon);margin-top:.1rem}
@media (min-width:768px){.safety-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2.5rem}}

/* ── Contact ── */
.demo-grid{display:grid;gap:2rem}
.demo-text p{margin-top:1rem;color:var(--text2);font-size:var(--fs-lead)}
@media (min-width:960px){.demo-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:4rem;align-items:start}}
.form{display:grid;gap:1.125rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem}
.field{display:grid;gap:.375rem}
.field label{font-weight:700;font-size:.9375rem;color:var(--text)}
.field input,.field select,.field textarea{width:100%;min-height:3rem;padding:.75rem .875rem;font:inherit;font-size:1rem;color:var(--text);background:var(--input-bg);border:1px solid var(--input-line);border-radius:var(--radius-sm)}
.field textarea{resize:vertical}
.form-note:empty{display:none}
.form-note{font-size:.9375rem;color:var(--text)}

/* ── Footer ── */
.footer{border-top:1px solid var(--line);background:var(--footer-bg);padding-block:3rem 2rem;color:var(--text2)}
.footer-grid{display:grid;gap:2rem}
.footer .logo{font-size:1.125rem}
.footer-tagline{color:var(--text3);font-size:.9375rem}
.footer-col h2{font-family:var(--font-label);font-size:.875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text);font-weight:700}
.footer-col ul{list-style:none;margin:.5rem 0 0;padding:0;display:grid}
.footer-col a{display:inline-flex;align-items:center;min-height:2.75rem;min-width:2.75rem;color:var(--text2);text-decoration:none}
.footer-col a:hover{color:var(--text);text-decoration:underline}
.footer-bottom{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--line);display:grid;gap:.375rem;font-size:.875rem;color:var(--text3)}
@media (min-width:640px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr}.footer-bottom{grid-template-columns:1fr auto;column-gap:2rem}}

/* ── Motion: one entrance on the hero, nothing loops; gone entirely for reduced motion ── */
@media (prefers-reduced-motion:no-preference){
  .hero-copy>*{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
  .hero-copy>:nth-child(2){animation-delay:.06s}
  .hero-copy>:nth-child(3){animation-delay:.12s}
  .hero-copy>:nth-child(n+4){animation-delay:.18s}
  @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}

/* ── Who we are · the Blade Runner lines set apart (SRF D1b, OD-SRF-70) ── */
.motto{margin:0;display:grid;gap:.5rem;padding:1.25rem 0 1.25rem 1.25rem;border-left:4px solid var(--quote-line)}
.motto-line{font-family:var(--font-display);font-weight:700;font-size:clamp(1.25rem,1.05rem + 1vw,1.75rem);line-height:1.3;color:var(--text);letter-spacing:.01em}
.motto-line a{color:inherit;text-decoration:underline;text-decoration-color:var(--quote-line);text-underline-offset:.18em;text-decoration-thickness:2px}
.motto-sub{font-family:var(--font-label);font-size:1rem;letter-spacing:.06em;color:var(--gold)}

/* ── SRF N5 (2026-10-02): rules for the nine rebuilt pages, and the review's page-wide fixes ── */
main:focus{outline:none}                                   /* L-17: a programmatic target for the skip link */
.band{padding-block:calc(var(--section-pad) * .66)}        /* L-12 */
.sub-hero{border-bottom:1px solid var(--line)}
.sub-hero .hero-sub{max-width:38rem}
.rows{display:grid}
.row{display:grid;gap:1rem 3rem;padding-block:2.25rem;border-top:1px solid var(--line);scroll-margin-top:5rem}
.row:first-child{border-top:0;padding-top:0}
.rows-section{padding-block:clamp(2.5rem,2rem + 3vw,4.5rem)}
.row-head{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .875rem;align-content:start}
.row-head .eyebrow{flex-basis:100%;color:var(--gold)}
.row-head .step-num{font-family:var(--font-display);font-weight:700;font-size:1.125rem;color:var(--num)}
.row-head .icon{width:2rem;height:2rem;color:var(--icon)}
.row-head h2{flex-basis:100%;font-size:clamp(1.375rem,1.1rem + 1.2vw,1.875rem)}
.row-body{display:grid;gap:1rem;max-width:38rem;color:var(--text2);min-width:0}
.row-body .row-lead{color:var(--text)}
@media (min-width:960px){.row{grid-template-columns:minmax(0,19rem) minmax(0,1fr)}}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.ticks li{position:relative;padding-left:1.5rem}
.ticks li::before{content:"";position:absolute;left:.25rem;top:.62em;width:.5rem;height:.5rem;border-radius:2px;background:var(--cyan)}
.sub-cta{padding-block:0 var(--section-pad)}
.sub-cta .cta-line{color:var(--text);font-size:var(--fs-lead);margin-bottom:1.25rem}
.back-row{margin-top:1.5rem}
.back-link{display:inline-flex;align-items:center;min-height:2.75rem;color:var(--link);font-weight:700;text-decoration:none}
.back-link:hover{text-decoration:underline}
.advisors-section{background:var(--surface-alt);border-block:1px solid var(--line)}
.advisors{list-style:none;margin:1.75rem 0 0;padding:0;display:grid;gap:1.25rem}
@media (min-width:640px){.advisors{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.advisors{grid-template-columns:repeat(4,minmax(0,1fr))}}
.advisor{display:grid;gap:.375rem;align-content:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem}
.advisor img,.portrait-none{width:5.5rem;height:5.5rem;border-radius:50%;object-fit:cover;border:2px solid var(--line-strong);margin-bottom:.5rem}
.portrait-none{display:grid;place-items:center;color:var(--icon);background:var(--surface-alt)}
.portrait-none .icon{width:2.25rem;height:2.25rem}
.advisor .role{font-family:var(--font-label);font-size:.9375rem;letter-spacing:.04em;color:var(--gold)}
.advisor p:last-child{color:var(--text2);font-size:.9375rem}
@media (forced-colors:active){.bar-track{border:1px solid CanvasText}.bar-fill{background:CanvasText}}   /* L-8 */
@media print{                                              /* L-3, G-2 */
  :root,:root[data-theme="light"]{color-scheme:light;--bg:#fff;--surface:#fff;--surface-alt:#fff;--text:#000;--text2:#111;--text3:#333;--cyan:#0b6f87;--magenta:#a3168f;--gold:#8a5a00;--line:#999;--link:#0b6f87;--icon:#0b6f87;--num:#8a5a00}
  .h1-accent{background:none;-webkit-text-fill-color:currentColor;color:var(--cyan)}
  .nav,.skip,.theme-btn,.menu-btn,.hero::before,.sub-cta .cta-row{display:none}
}

/* ── R1 (OD-SRF-97, 2026-10-02): the feedback mock-ups. Prose inside a mock is set in the body face, as in the app. ── */
.mock-label .as-written{text-transform:none;letter-spacing:0;color:var(--mock-muted)}
.mark{margin-top:.75rem;border:1px solid var(--mock-line);border-radius:var(--radius-sm);overflow:hidden}
.mark>*{padding:.75rem}
.mark>*+*{border-top:1px solid var(--mock-line)}
.mark-head{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.chip-partial{color:var(--warn)}
.mark-xp{font-size:.875rem;color:var(--warn)}
.mark summary{cursor:pointer;list-style:none;display:block;min-height:44px}
.mark summary::-webkit-details-marker{display:none}
.mark-summary{display:block;font-family:var(--font-body);font-size:1rem;line-height:1.5;color:var(--mock-strong)}
.mark-toggle{display:inline-flex;align-items:center;gap:.375rem;margin-top:.375rem;min-height:2rem;font-size:.875rem;color:var(--mock-accent);text-decoration:underline;text-underline-offset:3px}
.mark-toggle::after{content:"▾";text-decoration:none;display:inline-block;transition:transform .15s}
details[open]>summary .mark-toggle::after{transform:rotate(180deg)}
details[open]>summary .mark-hide-open{display:none}   /* as in the app: "Read more" and "Tap to explore" go once open */
.mark-caps{text-transform:uppercase;letter-spacing:.06em}
.mark-tap{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mock-accent);margin-left:.5rem}
.mock-word{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--mock-accent2);text-align:center;padding-block:.25rem}
.mark-more[open]>summary{min-height:0}
.mark-dive summary{display:flex;flex-wrap:wrap;align-items:center}
.mark-dive summary .mark-toggle{margin-top:0}
.mark-prose{font-family:var(--font-body);font-size:.9375rem;line-height:1.55;color:var(--mock-text);margin-top:.5rem}
.mark-tip{display:flex;gap:.5rem;align-items:flex-start;background:color-mix(in srgb,var(--warn) 8%,transparent);border-left:3px solid var(--warn)}
.mark-tip .mark-prose{margin-top:0}
.mark-bulb{flex:none;line-height:1.55}
.mark-label{margin-top:.875rem;font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mock-muted)}
.mark-tip .mark-label{margin-top:0;color:var(--warn)}
.mark-quote{font-family:var(--font-body);font-style:italic;color:var(--mock-strong);margin-top:.25rem}
.mark-examples{list-style:none;margin:.25rem 0 0;padding:0;display:grid;gap:.375rem;font-family:var(--font-body);font-style:italic;color:var(--mock-text)}
.mark-examples li{padding-left:1.25rem;position:relative}
.mark-examples li::before{content:"✓";position:absolute;left:0;font-style:normal;color:var(--ok)}
.essay-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem;margin-top:.75rem}
.essay-head .mock-title{margin-bottom:0}
.essay-total{font-size:1.125rem;color:var(--mock-strong);font-variant-numeric:tabular-nums}
.essay-total small{font-size:.875rem;color:var(--mock-muted)}
.crits{list-style:none;margin:.75rem 0 0;padding:0;display:grid;gap:.625rem}
.crit{display:grid;grid-template-columns:minmax(0,1fr) 3.25rem;grid-template-areas:"name score" "bar bar" "note note";gap:.25rem .75rem;align-items:center;font-size:.875rem}
.crit-note{grid-area:note;font-family:var(--font-body);font-size:.875rem;line-height:1.45;color:var(--mock-text)}
.crit-name{grid-area:name;color:var(--mock-text)}
.crit .bar-track{grid-area:bar}
.crit-score{grid-area:score;text-align:right;color:var(--mock-strong);font-variant-numeric:tabular-nums}
.crit-fill{display:block;height:100%;border-radius:inherit}
.crit-fill.ok{background:var(--ok)}
.crit-fill.mid{background:var(--warn)}
.quote-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:baseline;margin-top:.375rem}
.quote-row .mark-quote{margin-top:0;min-width:0}
.quote-note{margin-top:.5rem;font-family:var(--font-body);font-size:.8125rem;line-height:1.45;color:var(--mock-muted)}
@media (prefers-reduced-motion:reduce){.mark-toggle::after{transition:none}}
@media (forced-colors:active){.crit-fill{background:CanvasText}.mark-tip{border-left-color:CanvasText}}

/* ── R1b (Q-SRF-DD, OD-SRF-128, 2026-10-02): paragraph scores, the Vocabulary Manager card, tappable drop-downs. ── */
.showcase-hint{margin-bottom:1rem;font-size:.9375rem;color:var(--text2)}
.mock summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.para-head{margin-top:1rem}
.para-head .as-written{text-transform:none;letter-spacing:0}
.paras{display:grid;gap:.5rem;margin-top:.5rem}
.para{border:1px solid var(--mock-line);border-radius:var(--radius-sm);overflow:hidden}
.para>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.75rem;min-height:44px;padding:.5rem .75rem;font-size:.9375rem;color:var(--mock-strong)}
.para>summary::-webkit-details-marker{display:none}
.para-name{flex:1;min-width:0}
.para-score{font-variant-numeric:tabular-nums;padding:.0625rem .5rem;border:1px solid currentColor;border-radius:99px;font-size:.875rem}
.para-score.ok,.para-pts.ok{color:var(--ok)}
.para-score.mid,.para-pts.mid{color:var(--warn)}
.para-score.low,.para-pts.low{color:var(--magenta)}
.crit-fill.low{background:var(--magenta)}
.drop-mark{display:inline-block;color:var(--mock-accent);transition:transform .15s}
details[open]>summary .drop-mark{transform:rotate(180deg)}
.para>:not(summary){margin-inline:.75rem}
.para>.bar-track{display:block;margin-top:.25rem}
.para-grid{list-style:none;margin-top:.625rem;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.375rem}
.para-grid li{display:flex;justify-content:space-between;gap:.5rem;padding:.25rem .5rem;border-radius:4px;background:color-mix(in srgb,var(--mock-line) 45%,transparent);font-size:.875rem}
.para-comp{color:var(--mock-text)}
.para-pts{font-variant-numeric:tabular-nums}
.para>.mark-prose{margin-bottom:.75rem}
.vm-group{color:var(--mock-accent)}
.vm-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}
.vm-btn{padding:.25rem .625rem;border:1px solid var(--mock-line);border-radius:6px;font-size:.8125rem;color:var(--mock-text)}
.vm-btn-primary{border-color:var(--mock-accent);color:var(--mock-accent)}
.strands{list-style:none;margin:.75rem 0 0;padding:0;display:grid;gap:.5rem}
.strand{display:flex;gap:.625rem;align-items:center;padding:.5rem .625rem;border:1px solid var(--mock-line);border-radius:var(--radius-sm)}
.strand-order{flex:none;font-size:.625rem;line-height:1.1;color:var(--mock-muted)}
.strand-main{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem;min-width:0}
.strand-name{color:var(--mock-strong);font-family:var(--font-body);font-weight:700}
.strand-pill{padding:0 .5rem;border:1px solid currentColor;border-radius:99px;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase}
.strand-pill.on{color:var(--ok)}
.strand-pill.off{color:var(--warn)}
.strand-count,.strand-prov{font-size:.8125rem;color:var(--mock-muted)}
@media (prefers-reduced-motion:reduce){.drop-mark{transition:none}}
@media (forced-colors:active){.para-score,.strand-pill{border-color:CanvasText}}
/* R1b layout C: bars, the ▾ at the right edge — the shape of the app's own Paragraph Scores rows. */
.mark-more .mark-toggle{display:flex;justify-content:space-between;width:100%;margin-top:.5rem;padding:.5rem .75rem;min-height:44px;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--mock-accent) 9%,transparent);text-decoration:none}
.mark-dive>summary{justify-content:space-between;padding:.5rem .75rem;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--mock-accent) 9%,transparent)}
.mark-dive .mark-toggle{text-decoration:none}
.mark-dive .mark-toggle::after{content:none}
.mark-dive>summary::after{content:"▾";color:var(--mock-accent);display:inline-block;transition:transform .15s}
.mark-dive[open]>summary::after{transform:rotate(180deg)}
.mark-dive .mark-tap{margin-left:auto;margin-right:.5rem}
.para>summary{background:color-mix(in srgb,var(--mock-accent) 9%,transparent)}
.mark summary:hover .mark-toggle,.mark-dive>summary:hover,.para>summary:hover{background:color-mix(in srgb,var(--mock-accent) 18%,transparent)}
@media (prefers-reduced-motion:reduce){.mark-dive>summary::after{transition:none}}

/* ── R6 mock-ups (OD-SRF-135): examples as drop-downs inside their sections, a short glow, the reader + devices samples ── */
.ex{margin-top:1rem;border:1px solid var(--mock-line);border-radius:var(--radius-sm);background:var(--mock-bg)}
.ex>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.75rem;min-height:44px;padding:.5rem .875rem;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--mock-accent) 9%,transparent);font-family:var(--font-label);font-size:.9375rem;color:var(--mock-strong)}
.ex>summary::-webkit-details-marker{display:none}
.ex>summary:hover{background:color-mix(in srgb,var(--mock-accent) 18%,transparent)}
.ex>summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.ex-name{flex:1;min-width:0}
.ex-cue{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mock-accent)}
.ex>.mock{border:0;border-top:1px solid var(--mock-line);border-radius:0 0 var(--radius-sm) var(--radius-sm)}
.step>.mock,.teachers-inner>.mock{margin-top:1rem}
.step>.ex,.step>.mock{grid-column:1/-1;min-width:0}
.step>.showcase-note{grid-column:-2}
.step p.mock-word,.step p.mock-doc{margin-top:0}
@keyframes wr-glow{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 3px color-mix(in srgb,var(--mock-accent) 40%,transparent),0 0 16px 3px color-mix(in srgb,var(--mock-accent) 45%,transparent)}}
@keyframes wr-ripple{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--mock-accent) 75%,transparent)}100%{box-shadow:0 0 0 14px color-mix(in srgb,var(--mock-accent) 0%,transparent)}}
@keyframes wr-nudge-down{0%,100%{transform:none}50%{transform:translateY(3px)}}
@keyframes wr-nudge-right{0%,100%{transform:none}50%{transform:translateX(4px)}}
@media (prefers-reduced-motion:no-preference){.glow-now{animation:wr-ripple 1.1s ease-out 3}.glow-now .drop-mark,.glow-now>summary .drop-mark{animation:wr-nudge-down 1.1s ease-in-out 3}.glow-now .cue-arrow{display:inline-block;animation:wr-nudge-right 1.1s ease-in-out 3}}
/* SRF TVCUE (2026-10-06, OD-SRF-365/-366): a Target Vocabulary word row and a word's speaker sit inside the word's rounded box
   (.tv-word{overflow:hidden}), which clipped the outward ring — measured: 0 px of it visible on every closed word. Theirs is
   drawn INSIDE their own edges instead; the same 3 x 1.1 s, none under reduced motion. */
@keyframes wr-ripple-in{0%{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--mock-accent) 85%,transparent)}100%{box-shadow:inset 0 0 0 12px color-mix(in srgb,var(--mock-accent) 0%,transparent)}}
@media (prefers-reduced-motion:no-preference){.tv-row.glow-now,.tv-spk.glow-now{animation-name:wr-ripple-in}}
.try-tag{display:inline-block;margin-left:.5rem;padding:0 .5rem;border:1px solid var(--magenta);border-radius:99px;font-size:.6875rem;letter-spacing:.12em;color:var(--magenta);vertical-align:middle}
.rd-text{font-family:Georgia,"Times New Roman",serif;font-size:1.0625rem;line-height:1.7;color:var(--mock-strong)}
.rd-tap{cursor:pointer;border-radius:3px}
.rd-tap:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.rd-fig{background:color-mix(in srgb,var(--mock-accent2) 22%,transparent);box-shadow:inset 3px 0 0 var(--mock-accent2);padding:.0625rem .25rem}
.rd-word{background:color-mix(in srgb,var(--gold) 20%,transparent);border-bottom:2px solid color-mix(in srgb,var(--gold) 55%,transparent);padding:0 2px}
.rd-fig[aria-expanded="true"]{background:color-mix(in srgb,var(--mock-accent2) 42%,transparent)}
.rd-word[aria-expanded="true"]{background:color-mix(in srgb,var(--gold) 40%,transparent)}
.rd-callout{margin-top:.75rem;padding:.5rem .75rem;border-left:3px solid var(--mock-accent2);background:color-mix(in srgb,var(--mock-accent2) 10%,transparent);font-size:.875rem}
.rd-pop{margin-top:.75rem;padding:.75rem .875rem;border:1px solid var(--mock-line);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--mock-line) 30%,transparent)}
.rd-pop-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem;color:var(--mock-strong);font-weight:700}
.rd-close{min-width:44px;min-height:44px;border:0;background:none;color:var(--mock-muted);font-size:1.125rem;cursor:pointer}
.rd-close:focus-visible{outline:3px solid var(--focus)}
.rd-tier{display:inline-block;margin-top:.5rem;padding:0 .5rem;border:1px solid currentColor;border-radius:99px;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--warn)}
.rd-fig-name{color:var(--mock-accent2)}
.rd-count{font-size:.8125rem;color:var(--mock-muted);margin-top:.25rem}
.rd-src{font-size:.8125rem;color:var(--mock-muted);font-style:italic;margin-top:.5rem}
.rd-links{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}
.dq-brief{margin-top:.5rem;padding:.75rem .875rem;border:1px solid var(--mock-line);border-radius:var(--radius-sm)}
.dq-brief .dq-name{color:var(--mock-strong);font-weight:700}
.dq-tip{color:var(--ok);font-size:.875rem;margin-top:.25rem}
.dq-src{display:flex;justify-content:space-between;gap:.5rem;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mock-muted);margin-top:1rem}
.dq-text{margin-top:.5rem;font-family:var(--font-label);font-size:1.0625rem;line-height:1.6;color:var(--ok)}
.dq-text mark{background:color-mix(in srgb,var(--ok) 22%,transparent);color:inherit;padding:0 2px}
.dq-opts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}
.dq-opt{min-height:44px;padding:.375rem .75rem;border:1px solid var(--mock-line);border-radius:6px;background:none;color:var(--mock-strong);font-family:var(--font-label);font-size:.875rem;cursor:pointer}
.dq-opt:hover:not(:disabled){border-color:var(--mock-accent)}
.dq-opt:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.dq-opt[aria-pressed="true"]{border-color:var(--mock-accent);color:var(--mock-accent)}
.dq-opt:disabled{cursor:default}
.dq-fb{margin-top:.75rem;padding:.75rem .875rem;border-radius:var(--radius-sm);border:1px solid var(--mock-line)}
.dq-ok{border-color:var(--ok)} .dq-no{border-color:var(--magenta)}
.dq-fb:focus{outline:none}
.dq-ok .mark-label{color:var(--ok)} .dq-no .mark-label{color:var(--magenta)}
.dq-again{margin-top:.75rem;min-height:44px;padding:.375rem .75rem;border:1px solid var(--mock-accent);border-radius:6px;background:none;color:var(--mock-accent);font-family:var(--font-label);cursor:pointer}
.dq-again:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media (forced-colors:active){.rd-fig,.rd-word{border:1px solid CanvasText}}

/* ── L6 mock-ups: close controls (OD-SRF-143), the students' and teachers' samples ── */
.ex>summary .ex-cue-open,.mark-show-open{display:none}
.ex[open]>summary .ex-cue-open{display:inline;visibility:visible}
.ex[open]>summary .ex-cue:not(.ex-cue-open){display:none}
details[open]>summary .mark-show-open{display:inline}
.dd-close{display:flex;align-items:center;justify-content:center;gap:.375rem;width:100%;min-height:44px;margin-top:.75rem;border:0;border-top:1px dashed var(--mock-line);background:none;color:var(--mock-accent);font-family:var(--font-label);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.dd-close:hover{background:color-mix(in srgb,var(--mock-accent) 10%,transparent)}
.dd-close:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.row-body>.mock,.row-body>.ex{min-width:0}
.row-body>.ex{margin-top:0}
.svg-i svg,.lx-play svg,.lx-bin svg,.sq-copy svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lx-credit{font-size:.75rem;color:var(--mock-muted);margin-bottom:.75rem}
.lx-card{display:flex;gap:.5rem;align-items:flex-start;padding:.625rem;border:1px solid var(--mock-line);border-radius:var(--radius-sm)}
.lx-play,.lx-bin{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--mock-line);border-radius:6px;color:var(--mock-muted)}
/* SRF ST (2026-10-03): the speaker is a real button — no browser fill; a focus ring; while it plays, the accent look the app gives it */
button.lx-play{background:none;font:inherit;padding:0;cursor:pointer}.lx-play:hover{border-color:var(--mock-accent);color:var(--mock-accent)}.lx-play:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.lx-play.is-playing{border-color:var(--mock-accent);color:var(--mock-accent);background:color-mix(in srgb,var(--mock-accent) 20%,transparent)}
.lx-bin{opacity:.6}
.lx-main{flex:1;min-width:0}
.lx-term{font-family:var(--font-display);font-size:1.125rem;color:var(--mock-strong)}
.lx-pos{display:inline-block;margin-left:.375rem;padding:0 .375rem;border:1px solid var(--mock-accent);border-radius:4px;font-family:var(--font-label);font-size:.6875rem;color:var(--mock-accent);vertical-align:middle}
.lx-def{margin-top:.5rem;font-size:.875rem;color:var(--mock-text)}
.lx-def b{font-weight:400;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mock-accent);margin-right:.375rem}
.lx-added{margin-top:.5rem;font-size:.6875rem;color:var(--mock-muted)}
.lx-more{margin-top:.75rem}
.lx-more>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.375rem;min-height:44px;padding:0 .75rem;border:1px solid var(--mock-line);border-radius:6px;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mock-text)}
.lx-more>summary::-webkit-details-marker{display:none}
.lx-more>summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.lx-more[open]>summary .drop-mark{transform:rotate(180deg)}
.lx-notes{margin-top:.75rem;padding:.125rem 0 .125rem .75rem;border-left:2px solid var(--mock-line)}
.lx-notes dt{margin-top:.625rem;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mock-muted)}
.lx-notes dd{margin:.125rem 0 0;font-size:.875rem;color:var(--mock-text)}
.lx-notes .lx-h{font-weight:700;color:var(--mock-strong)}
.lx-notes .lx-sub{font-size:.75rem;color:var(--mock-muted)}
.rc-sentence{margin-top:.5rem;font-family:Georgia,"Times New Roman",serif;font-size:1.25rem;line-height:1.6;text-align:center;color:var(--mock-strong)}
.rc-gap{display:inline-block;min-width:6rem;margin:0 .375rem;border-bottom:2px solid var(--mock-accent);color:var(--mock-accent);font-weight:700;text-align:center}
.rc-input{margin-top:1rem;padding:.625rem .75rem;border:1px solid var(--mock-line);border-radius:6px;color:var(--mock-muted);font-size:1rem}
.rc-btns{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}
.rc-steps{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem;padding-top:.75rem;border-top:1px solid var(--mock-line)}
.rc-steps-label{width:100%;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mock-muted)}
.rc-step{min-height:44px;padding:.375rem .75rem;border:1px solid var(--mock-line);border-radius:6px;background:none;color:var(--mock-strong);font-family:var(--font-label);font-size:.8125rem;cursor:pointer}
.rc-step[aria-pressed="true"]{border-color:var(--mock-accent);color:var(--mock-accent)}
.rc-step:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.rc-fb{margin-top:.75rem;padding:.75rem .875rem;border:1px solid var(--mock-line);border-radius:var(--radius-sm)}
.rc-fb:focus{outline:none}
.rc-fb .mark-label{margin-top:0}
.sq-leave{font-size:.8125rem;color:var(--mock-muted)}
.sq-label{margin-top:.75rem;text-align:center;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mock-muted)}
.sq-code{display:flex;justify-content:center;align-items:center;gap:.75rem;font-family:var(--font-display);font-size:2rem;letter-spacing:.3em;color:var(--mock-accent)}
.sq-copy{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--mock-line);border-radius:6px;color:var(--mock-muted);letter-spacing:0}
.sq-hint{text-align:center;font-size:.8125rem;color:var(--mock-muted)}
.sq-info{display:flex;justify-content:center;flex-wrap:wrap;gap:.25rem 1rem;margin-top:.75rem;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mock-muted)}
.sq-info .sq-mode{color:var(--mock-accent)}
.sq-members{margin-top:1rem;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mock-strong)}
.sq-list{list-style:none;margin:.5rem 0 0;padding:0}
.sq-list li{display:flex;align-items:center;gap:.625rem;padding-block:.5rem;border-top:1px solid var(--mock-line);color:var(--mock-strong)}
.sq-av{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;border:1px solid var(--mock-accent);color:var(--mock-accent);font-weight:700}
.sq-av.host{border-color:var(--gold);color:var(--gold)}
.sq-host{font-size:.75rem;color:var(--gold)}
.sq-dot{margin-left:auto;width:.5rem;height:.5rem;border-radius:50%;background:var(--ok)}
.sq-start{display:flex;justify-content:center;margin-top:1rem}
.up-tiles,.ca-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin-top:.75rem}
.ca-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:600px){.ca-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
.up-tile,.ca-tile{min-width:0;overflow-wrap:anywhere;padding:.5rem .625rem;border:1px solid var(--mock-line);border-radius:var(--radius-sm)}
.up-tile span,.ca-tile span{display:block;font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mock-muted)}
.up-tile b,.ca-tile b{display:block;margin-top:.25rem;font-family:var(--font-display);font-size:1.375rem;color:var(--mock-strong)}
.up-list{list-style:none;margin:.5rem 0 0;padding:0}
.up-list>li{padding-block:.5rem;border-top:1px solid var(--mock-line)}
.up-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;color:var(--mock-strong)}
.up-tier{display:inline-block;padding:0 .3125rem;border:1px solid currentColor;border-radius:4px;font-size:.6875rem;color:var(--warn)}
.up-inf{font-size:.75rem;color:var(--mock-accent)}
.up-open{margin-top:.375rem;font-size:.8125rem;color:var(--mock-text)}
.up-open b{font-weight:400;font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mock-muted);margin-right:.375rem}
.up-strand{margin-top:.75rem;padding:.625rem .75rem;border:1px solid var(--mock-accent2);border-radius:var(--radius-sm);font-size:.8125rem;color:var(--mock-text)}
.up-strand b{display:block;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mock-accent2)}
.dc-top{display:flex;justify-content:space-between;gap:.5rem;font-size:.6875rem;letter-spacing:.1em;color:var(--mock-muted)}
.dc-top .dc-ok::before{content:"";display:inline-block;width:.5rem;height:.5rem;margin-right:.375rem;border-radius:50%;background:var(--ok)}
.dc-badges{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.625rem;font-size:.6875rem;letter-spacing:.06em}
.dc-badge{padding:.125rem .375rem;border:1px solid var(--mock-line);border-radius:4px;color:var(--mock-text)}
.dc-by{margin-top:.625rem;font-size:.75rem;color:var(--mock-muted)}
.dc-by .dc-type{margin-right:.375rem;padding:0 .3125rem;border:1px solid var(--mock-line);border-radius:4px;text-transform:uppercase;letter-spacing:.06em}
.dc-title{margin-top:.375rem;font-family:var(--font-display);font-size:1.125rem;color:var(--mock-strong)}
.dc-tags{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.625rem;font-size:.75rem;color:var(--mock-accent)}
.dc-launch{display:flex;margin-top:.875rem}
.dc-launch .vm-btn{flex:1;text-align:center;padding-block:.5rem}
.dc-links{display:flex;gap:.5rem;margin-top:.5rem}
.dc-links .vm-btn{flex:1;text-align:center;font-size:.6875rem;letter-spacing:.12em}
.ca-head{font-family:var(--font-display);font-size:1.125rem;color:var(--mock-strong)}
.ca-sub{font-size:.75rem;color:var(--mock-muted)}
.ca-sel{display:inline-block;margin-top:.5rem;padding:.25rem .625rem;border:1px solid var(--mock-line);border-radius:6px;font-size:.75rem;letter-spacing:.08em;color:var(--mock-strong)}
.ca-lb{margin-top:1rem;font-size:.875rem;color:var(--mock-strong)}
.ca-lb span{font-size:.75rem;color:var(--mock-muted)}
.ca-table{width:100%;margin-top:.375rem;border-collapse:collapse;font-size:.8125rem}
.ca-table th{text-align:left;font-weight:400;font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mock-muted);padding:.375rem .25rem}
.ca-table td{padding:.375rem .25rem;border-top:1px solid var(--mock-line);color:var(--mock-strong)}
.ca-table .num{text-align:right}

/* ── L6e (OD-SRF-150): the Figurative devices example opens on the briefing; the app's buttons as pictures ── */
.dq-begin{display:block;margin-top:.75rem;min-height:44px;padding:.375rem 1rem;border:1px solid var(--mock-accent);border-radius:6px;background:none;color:var(--mock-accent);font-family:var(--font-label);font-size:.875rem;letter-spacing:.06em;cursor:pointer}
.dq-begin:hover{background:color-mix(in srgb,var(--mock-accent) 10%,transparent)}
.dq-begin:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.dq-step-q:focus{outline:none}
.dq-next{margin-top:.75rem}
/* ── SRF R7 (2026-10-03): the Report a bug example — the app's floating button, its form (a picture), what it shows after ── */
.para.glow-now{border-radius:var(--radius-sm)}
.br-screen{position:relative;height:11rem;border:1px solid var(--mock-line);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--mock-line) 18%,transparent)}
.br-skel{display:grid;gap:.5rem;padding:.875rem}
.br-nav{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-around;align-items:center;height:2.75rem;border-top:1px solid var(--mock-line)}
.br-nav i{display:block;width:1.25rem;height:1.25rem;border-radius:5px;background:var(--mock-track)}
.br-skel i{display:block;height:.5rem;border-radius:99px;background:var(--mock-track)}
.br-skel i:nth-child(1){width:55%}.br-skel i:nth-child(2){width:85%}.br-skel i:nth-child(3){width:70%}.br-skel i:nth-child(4){width:40%}
.br-bug{position:absolute;right:.75rem;bottom:3.5rem;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid var(--mock-line);border-radius:50%;background:var(--mock-bg);color:var(--mock-text);cursor:pointer}
.br-bug:hover{border-color:var(--magenta);color:var(--magenta)}
.br-bug:focus-visible,.br-file:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.br-bug svg,.br-tile svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.br-s:focus{outline:none}
.br-head{display:flex;align-items:center;gap:.625rem}
.br-tile{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:8px;background:color-mix(in srgb,var(--magenta) 16%,transparent);color:var(--magenta)}
.br-tile svg{width:18px;height:18px}
.br-title{flex:1;font-family:var(--font-display);font-weight:700;letter-spacing:.08em;color:var(--mock-strong)}
.br-x{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin:-.375rem -.5rem -.375rem 0;padding:0;border:0;border-radius:6px;background:none;color:var(--mock-muted);font-size:1.125rem;cursor:pointer}.br-x:hover{color:var(--mock-strong);background:color-mix(in srgb,var(--mock-line) 60%,transparent)}.br-x:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.mock-bug .mock-label{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}.br-close{margin:-.75rem 0 -.75rem auto;min-width:44px;min-height:44px;padding:0 .875rem;border:1px solid var(--mock-accent);border-radius:6px;background:none;color:var(--mock-accent);font-family:var(--font-label);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}.br-close:hover{background:color-mix(in srgb,var(--mock-accent) 12%,transparent)}.br-close:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.br-close[hidden]{display:none}
.br-two{display:grid;gap:.75rem}
@media (min-width:30rem){.br-two{grid-template-columns:1fr 1fr}}
.br-f{display:grid;gap:.375rem;margin-top:.75rem;min-width:0}
.br-two .br-f{margin-top:.75rem}
.br-l{font-size:.75rem;letter-spacing:.08em;color:var(--mock-muted)}
.br-req{color:var(--magenta)}
.br-in{display:block;padding:.5rem .625rem;border:1px solid var(--mock-line);border-radius:6px;color:var(--mock-strong);font-size:.875rem;overflow-wrap:anywhere}
.br-area{min-height:4.25rem}
.br-ph{color:var(--mock-muted)}
.br-under{display:flex;justify-content:space-between;font-size:.6875rem;color:var(--mock-muted)}
.br-drop{display:block;padding:.75rem;border:1px dashed var(--mock-line);border-radius:6px;text-align:center;font-size:.875rem;color:var(--mock-muted)}
.br-auto{margin-top:.75rem;font-size:.75rem;color:var(--mock-muted)}
.br-file{display:block;width:100%;margin-top:.75rem;min-height:44px;border:1px solid var(--mock-accent);border-radius:6px;background:color-mix(in srgb,var(--mock-accent) 12%,transparent);color:var(--mock-accent);font-family:var(--font-display);font-weight:700;letter-spacing:.08em;cursor:pointer}
.br-file:hover{background:color-mix(in srgb,var(--mock-accent) 22%,transparent)}
.br-s3 .br-head{margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid var(--mock-line)}
.br-done-mark{font-size:1.75rem;line-height:1;color:var(--ok);text-align:center}
.br-done{margin-top:.5rem;font-family:var(--font-display);font-weight:700;letter-spacing:.08em;text-align:center;color:var(--ok)}
.br-s3 .mark-prose{text-align:center}
.br-award{margin-top:.5rem;font-size:.8125rem;text-align:center;color:var(--mock-accent)}
.br-again{display:block;margin-inline:auto}
.nf .back-row{margin-top:1.5rem}
/* R9 (OD-SRF-185…190): the prices page's table. */
.table-scroll{overflow-x:auto;min-width:0}
.price-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.price-table th{text-align:left;font:400 .75rem/1.3 var(--font-label);letter-spacing:.08em;text-transform:uppercase;color:var(--text3);padding:0 .75rem .625rem 0;border-bottom:1px solid var(--line-strong);vertical-align:bottom}
.price-table td{padding:.875rem .75rem .875rem 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--text2)}
.price-table td:first-child{color:var(--text)}
.price-table th:last-child,.price-table td:last-child{padding-right:0}
.price-table .num{text-align:right}
.price-table td.num{white-space:nowrap}
.price-table .each{font-family:var(--font-display);font-weight:700;color:var(--num)}
.price-table .cash-line{display:block;white-space:nowrap}
.price-table .aside{display:block;margin-top:.25rem;font-size:.875rem;color:var(--text3)}
.price-note{font-size:.9375rem;color:var(--text3)}
.step>.step-link{grid-column:-2}

/* SRF DSF (2026-10-04): a titled group inside a row body — the parents' Data and safety section */
.row-body .grp{display:grid;gap:.625rem;padding-top:.5rem}
.row-body .grp h3{color:var(--text)}

/* SRF LDX (2026-10-04, Q-SRF-LDX) */
/* The Sentence marking example showed "Show less" beside "Read more" while closed: `.mark-more .mark-toggle{display:flex}`
   (0,2,0) beat `.mark-show-open{display:none}` (0,1,0). Measured live since L6e; this rule (0,3,0) hides it while closed. */
.mark-more:not([open]) .mark-show-open{display:none}
/* A hero without a picture: one column, the words a readable width. */
@media (min-width:960px){.hero-grid.no-art{grid-template-columns:minmax(0,1fr)}.hero-grid.no-art .hero-copy{max-width:48rem}
  .hero:has(.no-art){padding-block:3.5rem 3rem}}
/* The Dashboard example: the app's Your Word Skills card, each skill a button (CapabilityProfileCard.tsx). */
.ws-sub{margin:-.5rem 0 .75rem;font-size:.875rem;color:var(--mock-muted)}
.ws-list{list-style:none;margin:0;padding:0;display:grid;gap:.25rem}
.ws-skill{display:grid;gap:.375rem;width:100%;min-height:44px;padding:.375rem .5rem;border:0;border-radius:var(--radius-sm);background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.ws-skill:hover{background:color-mix(in srgb,var(--mock-accent) 9%,transparent)}
.ws-skill:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.ws-row{display:flex;align-items:center;gap:.5rem;font-size:.875rem}
.ws-chev{display:inline-block;color:var(--mock-muted);transform:rotate(-90deg);transition:transform .15s}
.ws-skill[aria-expanded="true"] .ws-chev{transform:none}
.ws-name{color:var(--mock-text)}
.ws-level{margin-left:auto;font-weight:700}
.ws-level.lv-strong{color:var(--ok)}.ws-level.lv-good{color:var(--mock-accent)}.ws-level.lv-growing,.ws-level.lv-dev{color:var(--warn)}.ws-level.lv-early{color:var(--mock-accent2)}
.bar-fill.lv-strong{background:var(--ok)}.bar-fill.lv-good{background:var(--mock-accent)}.bar-fill.lv-growing,.bar-fill.lv-dev{background:var(--warn)}.bar-fill.lv-early{background:var(--mock-accent2)}
.ws-pop{margin:.125rem 0 .5rem 1.25rem;padding:.75rem;border:1px solid var(--mock-line);border-radius:var(--radius-sm)}
.ws-head{margin:0 0 .5rem;font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mock-muted)}
.ws-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.375rem}
.ws-chip{padding:.0625rem .5rem;border:1px solid color-mix(in srgb,var(--warn) 50%,transparent);border-radius:99px;background:color-mix(in srgb,var(--warn) 7%,transparent);color:var(--warn);font-size:.875rem}
.ws-chip.ws-new{border-color:var(--mock-line);background:transparent;color:var(--mock-muted)}
@media (prefers-reduced-motion:reduce){.ws-chev{transition:none}}
/* TRY IT on the thing to tap (choice "on"): part of the control, so tapping it works. */
.try-tag.try-on{flex:none;white-space:nowrap;margin-left:.5rem;margin-right:.25rem;line-height:1.5;font-family:var(--font-label);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;font-weight:400}
.rd-fig .try-tag.try-on{margin-left:0}
.mark-more .mark-toggle .try-tag.try-on{margin-right:auto}
.dq-begin .try-tag.try-on{margin-left:.75rem}
/* TRY IT lights up with the ripple (choice "pulse"). */
@keyframes wr-tag{0%,100%{background:transparent;color:var(--magenta)}50%{background:var(--magenta);color:var(--bg)}}
@media (prefers-reduced-motion:no-preference){.try-tag.tag-now{animation:wr-tag 1.1s ease-in-out 3}}

/* SRF LYT (2026-10-05, OD-SRF-290/-291/-292): TRY IT tags removed (the ripple stays). The Target Vocabulary example (the app's
   pre-practice word list, PreSessionBriefing.tsx): a closed bar on a phone under Your Word Skills; open, with no bar, on a
   computer. On a computer Your Word Skills moves to the hero's right half and each step becomes a row. */
.ex-tv>summary{display:flex}
.tv-top{position:relative}
.tv-row{padding-right:.75rem}
.tv-row .tv-chev{margin-left:3.25rem}
.tv-spk.lx-play{position:absolute;top:50%;right:2.5rem;transform:translateY(-50%);width:44px;height:44px;border:0;border-radius:50%;color:var(--mock-muted)}
.tv-spk.lx-play svg{width:1.125rem;height:1.125rem}
.tv-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.tv-word{border:1px solid var(--mock-line);border-radius:var(--radius-sm);overflow:hidden}
.tv-word[data-open="true"]{border-color:color-mix(in srgb,var(--mock-accent) 50%,transparent)}
.tv-row{display:flex;align-items:center;gap:.75rem;width:100%;min-height:44px;padding:.625rem .75rem;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.tv-row:hover{background:color-mix(in srgb,var(--mock-accent) 9%,transparent)}
.tv-row:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.tv-main{flex:1;min-width:0;display:grid;gap:.125rem}
.tv-line{display:flex;align-items:center;gap:.5rem;min-width:0}
.tv-term{font-size:1.0625rem;font-weight:700;color:var(--mock-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tv-pos{flex:none;padding:.0625rem .375rem;border:1px solid var(--mock-line);border-radius:4px;font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mock-muted)}
.tv-snip{font-size:.875rem;color:var(--mock-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tv-word[data-open="true"] .tv-snip{display:none}
.tv-chev svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tv-chev{flex:none;display:inline-flex;color:var(--mock-muted);transition:transform .2s}
.tv-word[data-open="true"] .tv-chev{transform:rotate(180deg)}
.tv-body{padding:.75rem;border-top:1px solid var(--mock-line);font-size:.9375rem;color:var(--mock-strong)}
.tv-body>p{margin:0}
.tv-body .tv-k{display:block;margin-top:.75rem;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mock-muted)}
.tv-ctx{margin-top:.375rem;padding-left:.75rem;border-left:2px solid color-mix(in srgb,var(--gold) 35%,transparent)}
.tv-ctx p{font-style:italic;font-size:.875rem;color:var(--mock-text)}
.tv-ctx .tv-src{font-style:normal;font-size:.6875rem;letter-spacing:.08em;color:var(--gold)}
@media (prefers-reduced-motion:reduce){.tv-chev{transition:none}}
.dash-desk{display:none}
@media (min-width:1000px){
  .ex-tv{border:0;background:none;margin-top:0}
  .ex-tv>summary,.ex-tv>.dd-close{display:none}
  .ex-tv>.mock{border:1px solid var(--mock-line);border-radius:var(--radius)}
  .hero-grid.no-art.has-dash{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start;gap:3.5rem}
  .hero-grid.no-art.has-dash .hero-copy{max-width:none}
  .hero:has(.has-dash){padding-block:4rem 4.5rem}
  .has-dash .dash-desk{display:block;align-self:start}
  .steps .mock-skills{display:none}
}
/* Rows on a computer (D1): the two wrappers are display:contents on a phone, so a step reads exactly as before. */
.step-text,.step-ex{display:contents}
.step-text>p{margin-top:.75rem;color:var(--text2)}
.step-ex>.ex,.step-ex>.mock{grid-column:1/-1;min-width:0}
.step-ex>.mock{margin-top:1rem}
@media (min-width:1000px){
  .lsu .steps{grid-template-columns:minmax(0,1fr)}
  .lsu .step,.lsu .step:first-child{grid-template-columns:minmax(0,22rem) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:4rem;padding-block:3rem;border-top:1px solid var(--line)}
  .lsu .step:first-child{border-top:0;padding-top:0}
  .lsu .step:last-child{padding-bottom:0}
  .lsu .step-text{display:grid;align-content:start;grid-column:1;grid-row:1}
  .lsu .step-ex{display:grid;align-content:start;grid-column:2;grid-row:1/4;min-width:0}
  .lsu .step-ex>.mock:first-child,.lsu .step-ex>.ex:first-child,.lsu .step-ex>.mock-skills+.ex{margin-top:0}
  .lsu .step>.step-link{grid-column:1;grid-row:2;margin-top:1rem}
  .lsu .step>.showcase-note{grid-column:1;grid-row:3;align-self:start}
}

/* The prices page's CHF | £ switch (SRF prices-1, OD-SRF-446): francs first, one currency at a time, nothing stored.
   Everything here waits for data-cur (set by the page's head script): without JavaScript both currencies show, as before. */
.cur-switch{display:none;align-items:center;gap:.5rem;margin-top:1.25rem;flex-wrap:wrap}
html[data-cur] .cur-switch{display:flex}
.cur-switch .cur-label{font:400 .75rem/1.3 var(--font-label);letter-spacing:.08em;text-transform:uppercase;color:var(--text3)}
.cur-switch button{min-width:56px;min-height:44px;padding:0 1rem;border:1px solid var(--line-strong);border-radius:999px;background:transparent;color:var(--text2);font-family:var(--font-body);font-weight:700;font-size:1rem;line-height:1;cursor:pointer}
.cur-switch button[aria-pressed="true"]{border-color:var(--cyan);color:var(--text);box-shadow:inset 0 0 0 1px var(--cyan)}
.cur-switch button:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.c-lab-chf,.c-lab-gbp{display:none}
html[data-cur] .c-lab-both,html[data-cur] .c-or,html[data-cur="chf"] .c-gbp,html[data-cur="gbp"] .c-chf{display:none}
html[data-cur="chf"] .c-lab-chf,html[data-cur="gbp"] .c-lab-gbp{display:inline}
html:not([data-cur="gbp"]) .c-approx{display:none}

/* SRF audio card (2026-10-07, OD-SRF-455): the For Students example of the app's audio-LOG page player (BaseAudioPlayer with
   ±10 s, speed 0.75-2x, Bookmark, mute + volume). The copy shows only after the site script wires it; without JavaScript the browser's
   own player for the same file shows instead. */
.au-el:not([controls]){display:none}
.au-el{width:100%}
.au-bar{position:relative;padding:.5rem 0;cursor:pointer;touch-action:manipulation}
.au-bar:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.au-track{position:relative;display:block;height:1rem;background:var(--mock-track);overflow:hidden}
.au-fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--mock-accent);transition:width .1s}
.au-wave{position:absolute;inset:0;display:flex;align-items:flex-end;gap:1px;opacity:.3}
.au-wave i{flex:1;background:var(--mock-muted)}
.au-wave i.on{background:var(--mock-strong)}
.au-times{display:flex;justify-content:space-between;margin-top:.125rem;font-size:.8125rem;color:var(--mock-muted);font-variant-numeric:tabular-nums}
.au-ctrls{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.75rem}
.au-ctrls button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0;border:0;background:none;font:inherit;cursor:pointer;color:var(--mock-muted)}
.au-ctrls button:focus-visible,.au-vol:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.au-ctrls svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.au-ctrls .au-skip{color:var(--mock-accent)}
.au-ctrls .au-play{width:48px;height:48px;border:2px solid var(--mock-muted);transition:border-color .2s,color .2s,box-shadow .2s}
.au-play .i-pause,.au-play.is-playing .i-play{display:none}
.au-play.is-playing .i-pause{display:block}
.au-ctrls .au-play.is-playing{border-color:var(--mock-accent);color:var(--mock-accent);background:color-mix(in srgb,var(--mock-accent) 10%,transparent);box-shadow:0 0 12px color-mix(in srgb,var(--mock-accent) 30%,transparent)}
.au-ctrls .au-speed{padding:0 .75rem;border:1px solid var(--mock-line);font-size:.8125rem;letter-spacing:.05em;font-variant-numeric:tabular-nums}
.au-right{display:flex;align-items:center;gap:.25rem;margin-left:auto}
.au-ctrls .au-mark{color:var(--warn)}
.au-mark .i-check,.au-mark.is-done .i-mark{display:none}
.au-mark.is-done .i-check{display:block}
.au-ctrls .au-mark.is-done{color:var(--ok)}
.au-mute .i-mute,.au-mute.is-muted .i-vol{display:none}
.au-mute.is-muted .i-mute{display:block}
.au-vol{display:none;width:5rem;accent-color:var(--mock-accent);cursor:pointer}
@media (min-width:640px){.au-vol{display:block}}
.au-load{font-size:.75rem;letter-spacing:.1em;color:var(--mock-accent)}
.au-ctrls .au-play.is-loading{opacity:.5;cursor:default}
@keyframes au-pulse{50%{opacity:.25}}
@media (prefers-reduced-motion:no-preference){.au-ctrls .au-play.is-loading,.au-load{animation:au-pulse 2s cubic-bezier(.4,0,.6,1) infinite}}
.au-ctrls button:hover{color:var(--mock-accent)}
@media (prefers-reduced-motion:reduce){.au-wave{display:none}.au-fill,.au-ctrls .au-play{transition:none}}

/* SRF Dashboard sample in design B (compact by default, OD-SRF-463) (2026-10-07, OD-SRF-462; the app's card OD-SRF-435): the pack line, the key, each skill's bar
   split into right / missed / not tried, the three numbers under it, one chip style, "and N more". */
.ws-pack{margin:-.5rem 0 .25rem;font-size:.8125rem;color:var(--mock-muted)}
.mock-skills .ws-sub{margin:0 0 .75rem}
.ws-key{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .875rem;margin:0 0 .5rem;font-size:.8125rem;color:var(--mock-text)}
.ws-key>span{display:inline-flex;align-items:center;gap:.375rem}
.ws-sw{display:inline-block;width:.875rem;height:.5rem;border-radius:2px}
.ws-sw.ws-none{background:var(--mock-track);box-shadow:inset 0 0 0 1px var(--mock-line)}
.ws-split{display:flex;height:.5rem;border-radius:99px;background:var(--mock-track);overflow:hidden}
.ws-seg{display:block;height:100%;min-width:4px}
.ws-right{background:var(--ok)}
.ws-missed{background:var(--warn)}
.ws-count{font-size:.8125rem;color:var(--mock-muted);font-variant-numeric:tabular-nums}
.ws-level.lv-none{color:var(--mock-muted)}
.ws-more{margin:.5rem 0 0;font-size:.8125rem;color:var(--mock-text)}
/* compact: set by the site script, so without JavaScript the whole card shows and the toggle stays hidden */
.mock-skills.ws-compact .ws-pack,.mock-skills.ws-compact .ws-count{display:none}
.ws-whole{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;min-height:44px;margin-top:.5rem;padding:.5rem .875rem;border:1px solid var(--mock-line);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--mock-accent) 9%,transparent);color:var(--mock-accent);font-family:var(--font-label);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.ws-whole[hidden]{display:none}  /* the rule above would otherwise show it without JavaScript (drive check T caught it) */
.ws-whole:hover{background:color-mix(in srgb,var(--mock-accent) 18%,transparent)}
.ws-whole:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.ws-whole::after{content:"▾";display:inline-block;transition:transform .15s}
.ws-whole[aria-expanded="true"]::after{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.ws-whole::after{transition:none}}

/* SRF round TV (2026-10-07; OD-SRF-493, -497…-499, -508…-510): the Target Vocabulary example is compact (set by the site script;
   without JavaScript the whole card shows and Start quiz stays hidden), and Start quiz swaps it for the quiz example in the same
   place. The deck's questions sit in ONE grid cell, so it is as tall as its tallest question and moving between questions never
   moves the page; it grows only when the visitor opens an answer. */
.ex>.tv-area>.mock{border:0;border-top:1px solid var(--mock-line);border-radius:0 0 var(--radius-sm) var(--radius-sm)}
@media (min-width:1000px){.ex-tv>.tv-area>.mock{border:1px solid var(--mock-line);border-radius:var(--radius)}}
.tv-whole{margin-top:.75rem}
.tv-start{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;min-height:48px;margin-top:.5rem;padding:.625rem 1rem;border:1px solid var(--mock-accent);border-radius:var(--radius-sm);background:var(--mock-accent);color:var(--mock-bg);font-family:var(--font-label);font-size:.9375rem;font-weight:700;letter-spacing:.04em;cursor:pointer}
.tv-start:hover{background:color-mix(in srgb,var(--mock-accent) 85%,var(--mock-strong))}
.tv-start:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.tv-start[hidden],.tv-foot[hidden],.dk[hidden]{display:none}
.mock-tv:not(.tv-compact) .tv-foot,.mock-tv.tv-compact .tv-foot{margin-top:.75rem}
.dk-stage{display:grid;touch-action:pan-y}
.dk-slide,.dk-end{grid-area:1/1;min-width:0;visibility:hidden}
.dk-slide.is-cur,.dk-end.is-cur{visibility:visible}
@media (prefers-reduced-motion:no-preference){.dk-slide.is-cur,.dk-end.is-cur{animation:dk-in .25s ease-out}}
@keyframes dk-in{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
.dk-head{margin:0;font-family:var(--font-label);font-size:.8125rem;font-weight:400;letter-spacing:.06em;color:var(--mock-accent)}
.dk-head:focus{outline:none}
.dk-head:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.dk-stage-name{margin-top:.5rem;padding-bottom:.5rem;border-bottom:1px dashed var(--mock-line);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mock-muted)}
.dk-q{margin-top:.875rem}
.dk-sent{font-family:var(--font-body);font-size:1.0625rem;line-height:1.6;color:var(--mock-strong)}
.dk-slot{display:inline-block;min-width:4.5em;padding:0 .25em;border-bottom:2px solid var(--mock-accent);text-align:center;color:var(--mock-accent)}
.dk-q[data-state="right"] .dk-slot{color:var(--ok);border-color:var(--ok)}
.dk-row{margin-top:.875rem}
.dk-in{width:100%;min-height:48px;padding:.625rem .75rem;font:inherit;font-size:1rem;color:var(--mock-strong);background:var(--mock-bg);border:1px solid var(--mock-line);border-radius:var(--radius-sm)}
.dk-in::placeholder{color:var(--mock-muted);opacity:1}
.dk-in:focus-visible{outline:3px solid var(--focus);outline-offset:1px}
.dk-q[data-state="right"] .dk-in{border-color:var(--ok);box-shadow:0 0 0 1px var(--ok)}
.dk-q[data-state="miss"] .dk-in,.dk-q[data-state="out"] .dk-in{border-color:var(--magenta)}
.dk-q[data-state="near"] .dk-in{border-color:var(--warn)}
.dk-btns{display:flex;gap:.5rem;margin-top:.5rem}
.dk-btns>button{flex:1;min-height:44px;padding:.375rem .75rem;border:1px solid var(--mock-line);border-radius:6px;background:none;color:var(--mock-strong);font-family:var(--font-label);font-size:.875rem;cursor:pointer}
.dk-btns>button:hover:not(:disabled){border-color:var(--mock-accent)}
.dk-btns>button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.dk-btns>button[hidden]{display:none}
.dk-btns>button:disabled{opacity:.5;cursor:default}
.dk-btns>.dk-go{border-color:var(--mock-accent);color:var(--mock-accent)}
.dk-q[data-state="right"] .dk-btns>.dk-go{border-color:var(--ok);color:var(--ok)}
.dk-fb{min-height:4.5em;margin-top:.625rem;font-size:.875rem;line-height:1.5;color:var(--mock-text)}
.dk-fb[data-tone="ok"]{color:var(--ok)}
.dk-fb[data-tone="warn"]{color:var(--warn)}
.dk-fb[data-tone="bad"]{color:var(--magenta)}
/* SRF hint-site (OD-SRF-526 a): question 2's hints panel — the app's dashed panel under the message (DefinitionsHintsPanel.tsx) */
.dk-hints ul{margin:.625rem 0 0;padding:.75rem .875rem;list-style:none;border:1px dashed var(--line-strong);border-radius:var(--radius-sm);background:var(--surface-alt);color:var(--mock-text);font-size:.875rem;line-height:1.5}
.dk-hints li+li{margin-top:.375rem}
.dk-pos{font-style:italic;font-size:.875rem;color:var(--mock-muted)}
.dk-k{margin-top:.375rem;font-size:.8125rem;color:var(--mock-muted)}
.dk-def{margin-top:.25rem;font-family:var(--font-body);font-size:1.0625rem;line-height:1.55;color:var(--mock-strong)}
.dk-req{text-align:center;font-size:.875rem;color:var(--mock-text)}
.dk-site{margin-top:.75rem;font-size:.875rem;color:var(--mock-accent)}
.dk-picks{display:grid;gap:.5rem;margin-top:.5rem}
.dk-pick{min-height:44px;padding:.625rem .75rem;border:1px solid var(--mock-line);border-radius:var(--radius-sm);background:none;color:var(--mock-strong);font-family:var(--font-body);font-size:.9375rem;line-height:1.45;text-align:left;cursor:pointer}
.dk-pick:hover{border-color:var(--mock-accent)}
.dk-pick[aria-pressed="true"]{border-color:var(--mock-accent);background:color-mix(in srgb,var(--mock-accent) 9%,transparent)}
.dk-pick:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.dk-mark[hidden]{display:none}
.chip-incorrect{color:var(--magenta)}
.dk-further{border-left:3px solid var(--ok);background:color-mix(in srgb,var(--ok) 6%,transparent)}
.dk-further-k{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ok)}
.dk-further-v{font-style:italic}
.dk-tag{text-align:center;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mock-muted)}
.dk-q[data-kind="error"] .dk-sent{margin-top:.75rem;text-align:center}
.dk-err{background:none;color:var(--warn);font-weight:700;text-decoration:underline wavy;text-underline-offset:4px}
@media (prefers-reduced-motion:reduce){.dk-err{text-decoration-style:solid}}
.dk-ctx{margin-top:.75rem;padding:.5rem .75rem;border:1px solid var(--mock-line);border-radius:var(--radius-sm);font-size:.875rem;font-style:italic;text-align:center;color:var(--mock-muted)}
.dk-judge>.dk-j-ok{color:var(--ok)}
.dk-judge>.dk-j-err{color:var(--magenta)}
.dk-judge[hidden],.dk-fix[hidden]{display:none}
.dk-end-p{margin-top:.75rem;font-family:var(--font-body);font-size:1rem;line-height:1.55;color:var(--mock-strong)}
.dk-again{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;margin-top:1rem;border:1px solid var(--mock-accent);border-radius:6px;background:none;color:var(--mock-accent);font-family:var(--font-label);font-size:.875rem;cursor:pointer}
.dk-again:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.dk-nav{display:flex;align-items:center;justify-content:space-between;gap:.25rem;margin-top:1rem;padding-top:.75rem;border-top:1px solid var(--mock-line)}
.dk-prev,.dk-next{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;min-width:44px;min-height:44px;padding:.375rem .625rem;border:1px solid var(--mock-line);border-radius:6px;background:none;color:var(--mock-strong);font-family:var(--font-label);font-size:.875rem;cursor:pointer}
.dk-prev:hover:not(:disabled),.dk-next:hover:not(:disabled){border-color:var(--mock-accent)}
.dk-prev:focus-visible,.dk-next:focus-visible,.dk-dot:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.dk-prev:disabled,.dk-next:disabled{opacity:.45;cursor:default}
.dk-dots{display:flex}
.dk-dot{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer}
.dk-dot>span{width:10px;height:10px;border:1px solid var(--mock-muted);border-radius:50%}
.dk-dot[aria-current]>span{border-color:var(--mock-accent);background:var(--mock-accent)}
@media (max-width:420px){.dk-prev,.dk-next{font-size:0;gap:0}.dk-prev>span,.dk-next>span[aria-hidden]{font-size:1.125rem}.dk-next>.dk-next-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}}
.dk-back{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;min-height:44px;margin-top:.75rem;padding:.5rem .875rem;border:1px solid var(--mock-line);border-radius:var(--radius-sm);background:none;color:var(--mock-accent);font-family:var(--font-label);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.dk-back:hover{background:color-mix(in srgb,var(--mock-accent) 9%,transparent)}
.dk-back:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.dk-end-note{font-size:.875rem;color:var(--mock-text)}
/* SRF RXR (2026-10-17, reader route STEP 5; words 🧑 OD-SRF-563) — the For Students reader card ("Reader · See example") + the landing example's Lora.
   The reader's OWN colours (src/app/reader-theme.css, Light = .reader-warm, Dark = .reader-dark) inside the site's mock frame. */
@font-face{font-family:"Lora";src:url("assets/fonts/lora-latin.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Lora";src:url("assets/fonts/lora-latin-italic.woff2") format("woff2");font-weight:400 700;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"OpenDyslexic";src:url("assets/fonts/opendyslexic-regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
.rd-text{font-family:"Lora",Georgia,serif}
.rd-src{font-style:normal}.rd-src em{font-style:italic}
.rdr{--r-focus:#6b4c2a;--r-bg:#faf8f5;--r-bg2:#f5f1eb;--r-text:#2d2a26;--r-text2:#5c564e;--r-head:#1a1714;--r-line:rgba(139,119,101,.25);--r-tint:hsl(270,40%,85%);--r-bar:hsl(270,50%,65%);--r-mark:rgba(196,168,130,.2);--r-mark-line:#9d7a4a;--r-badge:hsl(330,55%,38%);--r-fig-bg:rgba(180,60,100,.05);--r-fig-border:hsl(330,55%,50%);--r-link:#6b4c2a;--r-pressed:rgba(107,76,42,.12);--r-size:18px;
  margin-top:.25rem;border-radius:var(--radius-sm);background:var(--r-bg);color:var(--r-text);overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:.9375rem;line-height:1.5}
.rdr[data-rdr-theme="dark"]{--r-focus:#d4b896;--r-bg:#1a1a2e;--r-bg2:#1e1e38;--r-text:#e8e6e3;--r-text2:#b8b4ae;--r-head:#f5f3f0;--r-line:rgba(232,230,227,.18);--r-tint:hsl(270,30%,25%);--r-mark:rgba(212,184,150,.18);--r-mark-line:#d4b896;--r-badge:hsl(330,60%,72%);--r-fig-bg:rgba(220,100,150,.06);--r-fig-border:hsl(330,60%,65%);--r-link:#d4b896;--r-pressed:rgba(212,184,150,.16)}
.rdr p{margin:0}
.rdr-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.25rem .25rem .25rem .875rem;border-bottom:1px solid var(--r-line);background:var(--r-bg2)}
.rdr-doc{color:var(--r-head);font-size:.875rem}
.rdr-set-btn,.rdr-x{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border:0;border-radius:8px;background:none;color:var(--r-text2);cursor:pointer;font-size:1rem}
.rdr-set-btn svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rdr-set-btn[aria-expanded="true"]{background:var(--r-pressed);color:var(--r-link)}
.rdr-set-btn:focus-visible,.rdr-x:focus-visible,.rdr-opt:focus-visible,.rdr-tip-ok:focus-visible,.rdr-word:focus-visible,.rdr-fig-k:focus-visible,#rdr-size:focus-visible{outline:3px solid var(--r-focus);outline-offset:2px}
.rdr-set{padding:.5rem .875rem .875rem;border-bottom:1px solid var(--r-line);background:var(--r-bg2)}
.rdr-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}
.rdr-set-title{padding-top:.75rem;font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--r-text2)}
.rdr-set-label{display:block;margin:.75rem 0 .375rem;font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--r-text2)}
.rdr-seg{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.rdr-seg-3{grid-template-columns:1fr 1fr 1fr}
.rdr-opt{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;min-height:44px;padding:.25rem .375rem;border:1px solid var(--r-line);border-radius:8px;background:var(--r-bg);color:var(--r-text);font:inherit;font-size:.8125rem;cursor:pointer;min-width:0}
.rdr-opt svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;flex:none}
.rdr-opt[aria-pressed="true"],.rdr-opt[aria-checked="true"]{border-color:var(--r-link);background:var(--r-pressed);font-weight:700}
.rdr-aa{font-size:.9375rem}.ff-classic{font-family:"Lora",Georgia,serif}.ff-simple{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.ff-dyslexic{font-family:"OpenDyslexic","Comic Sans MS",sans-serif;font-size:.75rem}
.rdr-short{display:none}
@media (max-width:639px){.rdr-long{display:none}.rdr-short{display:inline}}
.rdr-size-head{display:flex;justify-content:space-between;align-items:baseline}
.rdr-size-val{font-size:.75rem;color:var(--r-text2)}
.rdr-slider{display:flex;align-items:center;gap:.5rem;min-height:44px}
.rdr-a1{font-size:12px;color:var(--r-text2)}.rdr-a2{font-size:18px;color:var(--r-text2)}
#rdr-size{flex:1;min-width:0;accent-color:var(--r-link);min-height:44px}
.rdr-page{padding:1rem .875rem}
.rdr-text{font-family:"Lora",Georgia,serif;font-size:var(--r-size);line-height:1.85;color:var(--r-text)}
.rdr[data-rdr-font="simple"] .rdr-text{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.rdr[data-rdr-font="dyslexic"] .rdr-text{font-family:"OpenDyslexic","Comic Sans MS",sans-serif}
.rdr-fig{background:var(--r-tint);box-shadow:inset 3px 0 0 var(--r-bar);border-radius:2px;padding:1px 0 1px 4px;cursor:pointer}  /* no box-decoration-break: the app's bar marks the sentence's FIRST line only (drive picture rxr4-phone-warm-passage.png) */
.rdr-fig-k{border-radius:2px}
.rdr-word{font:inherit;line-height:inherit;color:inherit;background:var(--r-mark);border-bottom:2px solid var(--r-mark-line);padding:0 2px;border-radius:2px;cursor:pointer}
.rdr-word.is-open,.rdr-fig-k.is-open{outline:2px solid var(--r-link);outline-offset:1px}
.rdr-tip{display:flex;align-items:flex-start;gap:.75rem;margin-top:.75rem;padding:.75rem 1rem;background:var(--r-fig-bg);border-left:3px solid hsl(270,50%,60%);border-radius:0 6px 6px 0;font-size:.8125rem;color:var(--r-text2)}
.rdr-tip p{flex:1}.rdr-tip strong{color:var(--r-text)}
.rdr-tip-ok{flex:none;min-height:44px;padding:0 .75rem;border:1px solid var(--r-line);border-radius:6px;background:var(--r-bg);color:var(--r-link);font:inherit;font-weight:600;cursor:pointer}
.rdr-pop,.rdr-card{margin-top:.75rem;padding:.75rem 1rem;border:1px solid var(--r-line);border-radius:8px;background:var(--r-bg2);color:var(--r-text)}
.rdr-pop{background:var(--r-bg)}
.rdr-pop:focus,.rdr-card:focus{outline:none}
.rdr-term{padding-top:.625rem;font-weight:700;color:var(--r-head)}
.rdr-label{margin-top:.125rem;font-size:.75rem;font-weight:600;color:var(--r-text2)}
.rdr-def{margin-top:.125rem;font-size:.9375rem;color:var(--r-text)}
.rdr-pop .rdr-def{color:var(--r-text2)}
.rdr-link{display:inline-block;padding:.375rem 0;font-size:.8125rem;font-weight:600;color:var(--r-link)}
.rdr-links{display:flex;flex-direction:column;align-items:flex-start}
.rdr-hr{border:0;border-top:1px solid var(--r-line);margin:.5rem 0 .25rem}
.rdr-dev{display:inline-flex;align-items:center;gap:.375rem;padding-top:.75rem;font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--r-badge)}
.rdr-card[data-word] .rdr-dev-x{display:none}
.rdr-count{font-size:.8125rem;color:var(--r-text2);margin-bottom:.5rem}
.rdr-snip{margin:0 0 .75rem;padding:.75rem;font-family:"Lora",Georgia,serif;font-style:italic;font-size:1rem;line-height:1.6;color:var(--r-text);border-left:3px solid var(--r-fig-border);background:var(--r-fig-bg);border-radius:0 6px 6px 0}
.rdr-why{padding-top:.5rem;border-top:1px solid var(--r-line);margin-bottom:.75rem}
.rdr-why-h{font-size:.6875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--r-badge);margin-bottom:.375rem}
.rdr-notes{font-size:.875rem;line-height:1.6;color:var(--r-text2)}
.rdr-src{font-size:.75rem;color:var(--r-text2);margin-bottom:.5rem}
@media (forced-colors:active){.rdr-fig,.rdr-word{border:1px solid CanvasText}}
/* F-RXR5-1 B2: the tip carries display:flex, which beats the browser's [hidden] rule (the site's own per-class pattern). */
.rdr-tip[hidden]{display:none}
/* The T button sits at the card's clipped edge: it ripples INWARD, as the Target Vocabulary card's buttons do (.tv-spk). */
@media (prefers-reduced-motion:no-preference){.rdr-set-btn.glow-now{animation-name:wr-ripple-in}}