/* ==========================================================================
   TOEIC.ai design system — v4, app-native hybrid
   Rebuilt 2026-07-27.

   Palette taken from app.toeic.ai so the marketing site and the product
   read as one company: indigo brand, violet and blue for the two sections,
   mint for correct, amber for in-progress. Cool white paper, 18px cards,
   soft shadow, the mascot and the streak.

   Copy register is contrarian rather than descriptive — the page argues
   that studying all seven parts evenly is the mistake.

   No ETS marks or brand values. Zero third-party requests.
   Every colour pair verified WCAG 2.1 AA on the surface it is used on.
   ========================================================================== */

/* ---------- self-hosted fonts ------------------------------------------- */

@font-face{font-family:'Inter';src:url('/assets/fonts/inter-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-800.woff2') format('woff2');
  font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/assets/fonts/jetbrains-mono-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}

:root{
  --paper:#ffffff;
  --bone:#f7f7fc;
  --bone2:#eeeef8;
  --cream:var(--bone);
  --cream2:var(--bone2);
  --card:#ffffff;
  --bg:var(--bone);

  --ink:#141539;            /* 16.6:1 on bone */
  --ink2:#2f3159;
  --body:#4a4c70;           /* 7.8:1 */
  --muted:#5f6288;          /* 5.7:1 */
  --faint:#666a90;          /* 5.2:1 */

  /* indigo is the brand, taken from the app */
  --claret:#4b3fd4;         /* 7.1:1 on white, white on it 7.1:1 */
  --claret-hi:#3d32ba;
  --claret-soft:#ecebfd;
  --claret-edge:#4b3fd438;

  --brass:#8e5300;
  --brass-soft:#fdf1e0;

  --listening:#2b5fd9;      /* blue */
  --listening-soft:#e9f0ff;
  --reading:#6d28d9;        /* violet */
  --reading-soft:#f2ecff;

  --indigo:#4b3fd4;
  --indigo-soft:#ecebfd;
  --violet:#7c3aed;

  --p1:#eceafe; --p2:#e8f1fe; --p3:#e6f6f2; --p4:#fdeee7;
  --p5:#efeafe; --p6:#e9ecfd; --p7:#e7f5f0;

  --green:#0b6b55;
  --green-soft:#e6f7f2;
  --err:#b02a3a;

  --rule:#e8e8f4;
  --rule2:#d5d5e8;
  --rule-ink:#8b8db5;       /* 3.1:1 on white */
  --line:var(--rule); --line2:var(--rule2); --border-ui:var(--rule-ink);

  --radius:12px;
  --radius-lg:18px;
  --radius-xl:22px;

  --shadow-sm:0 1px 2px rgba(20,21,57,.05);
  --shadow:0 2px 6px rgba(20,21,57,.06), 0 12px 28px -14px rgba(20,21,57,.2);
  --shadow-lg:0 6px 14px rgba(20,21,57,.07), 0 28px 54px -24px rgba(20,21,57,.3);

  /* carried through from the shared system */
  --maxw:1120px;
  --narrow:720px;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --serif:var(--sans);
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.68;
  color:var(--body);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  font-feature-settings:'cv11','ss01';
}

a{color:var(--claret);text-decoration:none;
  border-bottom:1px solid var(--claret-edge);transition:border-color .15s var(--ease)}
a:hover{border-bottom-color:var(--claret);text-decoration:none}
img{max-width:100%;height:auto;display:block}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.narrow{max-width:var(--narrow)}

/* ---------- typography -------------------------------------------------- */

h1,h2,h3,h4{font-family:var(--sans);color:var(--ink);letter-spacing:-.022em}
h1{font-size:clamp(33px,4.6vw,49px);line-height:1.1;margin:0 0 22px;font-weight:700}
h2{font-size:clamp(25px,3vw,34px);line-height:1.2;margin:0 0 16px;font-weight:700}
h3{font-size:19px;line-height:1.32;margin:0 0 10px;font-weight:700;letter-spacing:-.014em}
h4{font-size:15px;line-height:1.35;margin:0 0 8px;font-weight:700;letter-spacing:-.008em}

/* emphasis is claret and nothing else. no gradient. */
h1 em,h2 em{font-style:normal;color:var(--claret)}
/* a two-beat H1: line two is the same weight and size, just claret */
.hero h1{line-height:1.06}
.hero h1 br{display:block;content:"";margin-top:.12em}
@media(max-width:640px){.hero h1 br{display:none}
  .hero h1 em{display:block;margin-top:.18em}}

p{margin:0 0 19px}
p:last-child{margin-bottom:0}

.lead{font-size:19.5px;line-height:1.6;color:var(--body);margin:0 0 28px}
.sub{font-size:17.5px;color:var(--muted);max-width:64ch;margin:0 0 30px}
.small{font-size:14.5px;color:var(--muted)}
.tiny{font-size:13px;color:var(--faint)}

section{padding:84px 0}          /* generous. space is the luxury. */
section.tight{padding:48px 0}
.cream{background:var(--bone)}
.bordered{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}

/* ---------- buttons ----------------------------------------------------- */

.btn{
  display:inline-block;padding:13px 26px;border-radius:var(--radius);
  font-family:var(--sans);font-weight:600;font-size:15.5px;line-height:1.25;
  letter-spacing:.002em;border:1px solid transparent;cursor:pointer;
  text-align:center;text-decoration:none;
  transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease);
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--claret);color:#fff;border-color:var(--claret)}
.btn-primary:hover{background:var(--claret-hi);border-color:var(--claret-hi)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--rule-ink)}
.btn-outline:hover{border-color:var(--ink);background:var(--bone2)}
.btn-sm{padding:8px 15px;font-size:14px}
.btn-block{display:block;width:100%}
a.btn{border-bottom-width:1px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:0 0 24px}

/* ---------- header — a rule, not a shadow ------------------------------- */

.site-header{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(120%) blur(10px);border-bottom:1px solid var(--rule);
}
.hdr{display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px}
.logo{display:inline-flex;align-items:baseline;font-family:var(--sans);
  font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.03em;
  text-decoration:none;border-bottom:0}
.logo:hover{border-bottom:0}
.logo .dot{color:var(--claret)}
.nav-main{display:flex;gap:30px;align-items:center;font-size:15px;font-weight:500}
.nav-main a{color:var(--ink);text-decoration:none;border-bottom:0;position:relative;padding:2px 0}
.nav-main a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:var(--claret);transform:scaleX(0);transform-origin:left;
  transition:transform .22s var(--ease)}
.nav-main a:hover{color:var(--claret);border-bottom:0}
.nav-main a:hover::after,.nav-main a[aria-current="page"]::after{transform:scaleX(1)}
.nav-main a[aria-current="page"]{color:var(--claret)}
.nav-actions{display:flex;gap:10px;align-items:center}

.nav-toggle{
  display:none;width:40px;height:40px;border:1px solid var(--rule-ink);border-radius:var(--radius);
  background:transparent;cursor:pointer;padding:0;align-items:center;justify-content:center;
}
.nav-toggle:hover{border-color:var(--ink)}
.nav-toggle span{display:block;width:17px;height:1.5px;background:var(--ink);position:relative;
  transition:transform .2s var(--ease)}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:17px;
  height:1.5px;background:var(--ink);transition:transform .2s var(--ease),top .2s var(--ease)}
.nav-toggle span::before{top:-5.5px}
.nav-toggle span::after{top:5.5px}
.nav-toggle[aria-expanded="true"] span{transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(-90deg)}
.nav-toggle[aria-expanded="true"] span::after{top:0;opacity:0}

@media(max-width:900px){
  .nav-main{
    display:none;position:absolute;top:68px;left:0;right:0;
    background:var(--paper);border-bottom:1px solid var(--rule);
    flex-direction:column;align-items:stretch;gap:0;padding:6px 0;box-shadow:var(--shadow)}
  .nav-main.open{display:flex;animation:slide-down .2s var(--ease) both}
  .nav-main a{padding:13px 24px;border-bottom:1px solid var(--bone2);font-size:16px}
  .nav-main a::after{display:none}
  .nav-main a:last-child{border-bottom:0}
  .nav-toggle{display:flex;width:44px;height:44px}
  .nav-actions .btn-outline{display:none}
  /* 44px minimum tap target on every real control (Apple HIG / Material).
     Scoped to .btn-primary, not .btn-sm: Sign in carries both btn-outline and
     btn-sm, so a display on .btn-sm here would out-order the hide above it and
     put Sign in back in the header, where it wraps to two lines at 390px. */
  .nav-actions .btn-primary{min-height:44px;display:inline-flex;align-items:center;
    padding:0 16px;white-space:nowrap}
  .btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center}
  .btn-block{display:flex}
  .fcols a{padding:11px 0}
  details summary{padding:22px 0}
  .opt,.qrow{min-height:48px;align-items:center}
}

/* ---------- hero — bone, one hairline, no wash -------------------------- */

.hero{padding:82px 0 62px;background:var(--paper)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr;gap:40px}.hero{padding:48px 0 40px}}

.trustline{display:flex;gap:26px;flex-wrap:wrap;font-size:14px;color:var(--muted);
  padding-top:22px;border-top:1px solid var(--rule)}
.trustline b{color:var(--ink);font-weight:600}

/* ---------- live sample question ---------------------------------------- */

.qcard{background:var(--card);border:1px solid var(--rule2);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);overflow:hidden}
.qcard-top{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:14px 22px;background:var(--bone);border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint)}
.qcard-top b{color:var(--reading);font-weight:700}
.qcard-body{padding:26px 24px}
.qstem{font-size:17.5px;color:var(--ink);margin:0 0 20px;line-height:1.6;font-weight:400}
.qstem u,.qcard-body u{text-decoration:none;border-bottom:1px solid var(--rule2);padding:0 34px}

.opts{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.opt{display:flex;gap:13px;align-items:flex-start;width:100%;text-align:left;
  padding:12px 14px;border:1px solid var(--rule-ink);border-radius:var(--radius);
  background:var(--paper);cursor:pointer;font:inherit;font-size:16px;color:var(--ink);
  transition:border-color .14s var(--ease),background .14s var(--ease)}
.opt:hover{border-color:var(--ink);background:var(--bone)}
.opt .k{flex:0 0 auto;font-weight:700;font-family:var(--mono);font-size:12px;color:var(--faint);
  width:22px;height:22px;border-radius:3px;background:var(--bone2);
  display:grid;place-items:center;margin-top:2px}
.opt.correct{border-color:var(--green);background:var(--green-soft)}
.opt.correct .k{background:var(--green);color:#fff}
.opt.wrong{border-color:var(--err);background:var(--claret-soft)}
.opt.wrong .k{background:var(--err);color:#fff}
.opt[disabled]{cursor:default}

.qfeedback{margin-top:18px;padding:16px 18px;border-radius:0;
  background:var(--bone);border-left:2px solid var(--green);font-size:15.5px;color:var(--ink)}
.qfeedback[hidden]{display:none}
.qfeedback:not([hidden]){animation:fade-in .3s var(--ease) both}
.qfeedback b{color:var(--green)}

/* ---------- stat strip — rules, not boxes ------------------------------- */

.stats{display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:transparent;padding:26px 22px 24px;text-align:left;
  border-right:1px solid var(--rule)}
.stat:last-child{border-right:0}
@media(max-width:760px){
  .stat:nth-child(2n){border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--rule)}
}
.stat b{display:block;font-size:34px;font-weight:700;line-height:1.05;margin-bottom:7px;
  letter-spacing:-.035em;color:var(--ink);font-variant-numeric:tabular-nums}
.stat b small{font-size:15px;font-weight:500;color:var(--muted);letter-spacing:0}
.stat span{display:block;font-size:13.5px;color:var(--muted);line-height:1.45}

/* ---------- cards ------------------------------------------------------- */

.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule)}
@media(max-width:900px){.grid3,.grid4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.grid2{grid-template-columns:1fr;gap:22px}
  .grid3,.grid4{grid-template-columns:1fr}}

/* in a hairline grid the cards are cells; standalone cards keep a border */
.grid3 > .card,.grid4 > .card{border:0;border-radius:0;background:var(--paper)}
.card{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-lg);
  padding:28px 26px;transition:background .18s var(--ease)}
.grid3 > .card:hover,.grid4 > .card:hover{background:var(--bone)}
.card h3{margin-bottom:9px}
.card p{color:var(--muted);font-size:15.5px;margin:0}
.card p + p{margin-top:13px}
.card .more{display:inline-block;margin-top:15px;font-size:14.5px;font-weight:600}
/* a status flag on a card — mono caps behind a claret rule, not a badge */
.card p.flag,p.flag{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--claret);margin:0 0 12px;padding-left:9px;
  border-left:2px solid var(--claret)}
.card-link{text-decoration:none;display:block;color:inherit;border-bottom:0}
.card-link:hover{background:var(--bone);border-bottom:0}

.ic{width:34px;height:34px;border-radius:0;background:transparent;border:0;
  display:grid;place-items:start;font-size:21px;margin-bottom:14px;
  filter:grayscale(1) opacity(.72);transition:filter .2s var(--ease)}
.card:hover .ic{filter:grayscale(0) opacity(1)}

/* numbered steps: a mono figure above a hairline */
.numbered{counter-reset:st}
.numbered .card{position:relative;counter-increment:st}
.numbered .card::before{
  content:counter(st,decimal-leading-zero);display:block;
  font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.14em;
  color:var(--claret);padding-bottom:12px;margin-bottom:16px;
  border-bottom:1px solid var(--rule)}

/* ---------- tables — the editorial workhorse ---------------------------- */

.tbl-wrap{border:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);
  border-radius:0;overflow-x:auto;background:transparent}
table.data{width:100%;border-collapse:collapse;font-size:15.5px}
table.data th,table.data td{padding:15px 18px 15px 0;text-align:left;
  border-bottom:1px solid var(--rule)}
table.data th:last-child,table.data td:last-child{padding-right:0}
table.data thead th{background:transparent;font-family:var(--mono);font-size:10px;
  text-transform:uppercase;letter-spacing:.11em;color:var(--faint);font-weight:700;
  padding-top:12px;padding-bottom:12px}
table.data tbody tr:last-child td{border-bottom:0}
table.data tbody tr{transition:background .14s var(--ease)}
table.data tbody tr:hover{background:var(--bone)}
table.data td b{color:var(--ink);font-weight:700}
table.data .num{font-family:var(--mono);font-size:13.5px;font-weight:700;color:var(--ink);
  white-space:nowrap;font-variant-numeric:tabular-nums}
table.data .go{font-size:14px;font-weight:600;white-space:nowrap}

/* the section marker: a small-caps mono label with a coloured leading rule */
table.data .sec{display:inline-block;font-family:var(--mono);font-size:9.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.13em;color:var(--faint);
  padding-left:9px;border-left:2px solid var(--rule2);margin-bottom:6px}
.sec.listening,table.data .sec[data-sec="listening"]{color:var(--listening);border-left-color:var(--listening)}
.sec.reading,table.data .sec[data-sec="reading"]{color:var(--reading);border-left-color:var(--reading)}

@media(max-width:720px){
  table.data th:nth-child(3),table.data td:nth-child(3){display:none}
  table.data th,table.data td{padding:12px 12px 12px 0;font-size:14.5px}
}

/* score bands */
.bands{display:grid;border-top:1px solid var(--ink)}
.bandrow{display:grid;grid-template-columns:132px 1fr auto;gap:22px;align-items:baseline;
  padding:20px 0;border-bottom:1px solid var(--rule);
  transition:background .16s var(--ease)}
.bandrow:hover{background:var(--bone)}
@media(max-width:680px){.bandrow{grid-template-columns:1fr;gap:8px;align-items:start}}
.bandrow .score{font-size:21px;font-weight:700;color:var(--ink);white-space:nowrap;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.bandrow .what{font-size:15.5px;color:var(--body)}
.bandrow .cefr{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;white-space:nowrap;padding:0;background:transparent}
.cefr.c1{color:var(--green)}
.cefr.b2{color:var(--claret)}
.cefr.b1{color:var(--listening)}
.cefr.a2{color:var(--muted)}
.cefr.a1{color:var(--faint)}
/* the band that matters gets a claret rule, not a fill */
.bandrow.hi{border-left:2px solid var(--claret);padding-left:20px;background:var(--bone)}
.bandrow.hi .score{color:var(--claret)}

/* per-part diagnostic bars — thin, deep hues */
.diag{display:grid;gap:16px;margin-top:4px}
.diagrow{display:grid;grid-template-columns:142px 1fr 50px;gap:16px;align-items:center;font-size:14px}
@media(max-width:560px){.diagrow{grid-template-columns:104px 1fr 44px;gap:11px;font-size:13px}}
.diagrow .lbl{color:var(--ink);font-weight:500}
.diagrow .pct{font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--faint);
  text-align:right;font-variant-numeric:tabular-nums}
.track{height:4px;background:var(--bone2);border-radius:0;overflow:hidden}
.track i{display:block;height:100%;background:var(--green);width:0;
  transition:width 1.1s var(--ease)}
.track i.warn{background:var(--brass)}
.track i.bad{background:var(--claret)}
.track i.listening{background:var(--listening)}
.track i.reading{background:var(--reading)}

/* ---------- score converter -------------------------------------------- */

.conv{background:var(--paper);border:1px solid var(--rule2);border-radius:var(--radius-lg);
  padding:34px 32px;box-shadow:var(--shadow)}
.conv-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px}
@media(max-width:680px){.conv-grid{grid-template-columns:1fr;gap:26px}}
.field label{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:10px}
.field .hint{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint)}
/* Native range inputs render ~16px tall — far under the 44px tap target the
   converter needs, and it is the main interactive element on the page. */
.field input[type=range]{
  width:100%;margin:6px 0;accent-color:var(--claret);
  height:44px;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.field input[type=range]:focus-visible{outline:2px solid var(--claret);outline-offset:2px}
.field input[type=range]::-webkit-slider-runnable-track{
  height:5px;background:var(--bone2);border:1px solid var(--rule2);border-radius:999px}
.field input[type=range]::-moz-range-track{
  height:5px;background:var(--bone2);border:1px solid var(--rule2);border-radius:999px}
.field input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--claret);border:2px solid var(--paper);box-shadow:var(--shadow-sm);
  margin-top:-9.5px}
.field input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:var(--claret);
  border:2px solid var(--paper);box-shadow:var(--shadow-sm)}
.field:first-child input[type=range]::-webkit-slider-thumb{background:var(--listening)}
.field:first-child input[type=range]::-moz-range-thumb{background:var(--listening)}
.field:nth-child(2) input[type=range]::-webkit-slider-thumb{background:var(--reading)}
.field:nth-child(2) input[type=range]::-moz-range-thumb{background:var(--reading)}
.field:first-child input[type=range]{accent-color:var(--listening)}
.field:nth-child(2) input[type=range]{accent-color:var(--reading)}
.field .val{font-size:27px;font-weight:700;color:var(--ink);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.field .val small{font-size:14px;color:var(--muted);font-weight:500;letter-spacing:0}
.conv-out{margin-top:30px;padding-top:26px;border-top:1px solid var(--ink);
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap}
.conv-out .big{font-size:54px;font-weight:700;line-height:1;letter-spacing:-.04em;
  color:var(--claret);font-variant-numeric:tabular-nums}
.conv-out .big small{font-size:19px;font-weight:500;color:var(--muted);letter-spacing:0}
.conv-out .verdict{font-size:15.5px;color:var(--body);max-width:42ch}

/* ---------- transparency block ----------------------------------------- */

.honest{border:0;border-left:2px solid var(--ink);border-radius:0;
  background:transparent;padding:4px 0 4px 26px}
.honest h3{margin-bottom:14px}
.honest ul{margin:0;padding-left:0;list-style:none;font-size:15.5px;color:var(--body)}
.honest li{margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--rule)}
.honest li:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.honest li b{color:var(--ink)}

/* freshness stamp: mono, a hairline box, no pill and no pulse */
.stamp{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);
  font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);border:0;border-left:2px solid var(--green);
  background:transparent;border-radius:0;padding:2px 0 2px 10px}
.stamp .tick{color:var(--green);font-weight:700}

/* ---------- pricing ---------------------------------------------------- */

/* the billing-cycle switch. Prices default to monthly in the markup, so the
   page reads correctly with JS off and the toggle is pure enhancement. */
.seg-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;margin:0 0 38px}
.seg{display:inline-flex;gap:4px;background:var(--paper);border:1px solid var(--rule2);
  border-radius:999px;padding:5px;box-shadow:var(--shadow-sm)}
.seg button{font:inherit;font-size:14px;font-weight:600;cursor:pointer;border:0;
  background:transparent;color:var(--muted);padding:10px 19px;border-radius:999px;
  white-space:nowrap;min-height:44px;
  transition:background .16s var(--ease),color .16s var(--ease)}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
/* The saving is the reason to pick a longer cycle, so it reads in green
   rather than as dimmed secondary text. On the pressed (dark) pill the same
   green would fail contrast, so it lifts to the soft tint. */
.seg .save{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.08em;
  margin-left:8px;color:var(--green)}
.seg button[aria-pressed="true"] .save{color:var(--green-soft)}
@media(max-width:640px){.seg{flex-wrap:wrap;justify-content:center}}
.seg-note{margin:0;font-size:13.5px;color:var(--faint);text-align:center}

/* four tiers. Boxed rather than the hairline treatment used elsewhere: one
   tier has to carry a "best value" highlight, which needs an edge to sit on. */
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch}
@media(max-width:1000px){.tiers{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.tiers{grid-template-columns:1fr}}
.tier{position:relative;display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--rule);border-radius:var(--radius-xl);padding:28px 24px}
.tier.featured{border-color:var(--claret);box-shadow:var(--shadow)}
.tier .badge{position:absolute;top:-11px;left:24px;background:var(--claret);color:#fff;
  font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;padding:5px 11px;border-radius:999px;white-space:nowrap}
.tier h3{margin-bottom:3px}
.tier .sub{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint);margin:0 0 20px;min-height:15px}
.tier .price{display:flex;align-items:baseline;gap:2px;margin:0 0 4px;
  font-variant-numeric:tabular-nums}
.tier .cur{font-size:22px;font-weight:700;color:var(--ink2);align-self:flex-start;margin-top:7px}
.tier .amt{font-size:44px;font-weight:800;line-height:1;letter-spacing:-.045em;color:var(--ink)}
.tier.featured .amt,.tier.featured .cur{color:var(--claret)}
.tier .per{font-size:14px;color:var(--muted);margin-left:3px}
/* Savings pill. Weekly has nothing to save against, so the JS writes an empty
   string and :empty collapses it — same soft-tint treatment as p.flag. */
.tier .saver{display:inline-block;background:var(--green-soft);color:var(--green);
  border-radius:999px;padding:5px 11px;margin:0 0 11px;
  font-size:12px;font-weight:600;line-height:1.35}
.tier .saver:empty{display:none}
.tier .saver b{font-weight:800}
.tier .billed{font-size:13.5px;color:var(--body);margin:0 0 20px;min-height:42px}
.tier .billed .was{text-decoration:line-through;color:var(--faint);margin-right:6px}
.tier .billed b{color:var(--ink);font-weight:600}
.tier .btn-block{margin-bottom:22px}
.tier ul{list-style:none;margin:0;padding:0;font-size:14.5px;color:var(--body)}
/* NOT flex — the marker hangs in the gutter so <b> stays inline with its sentence */
.tier li{position:relative;padding:0 0 0 24px;margin-bottom:11px;line-height:1.5}
.tier li b{color:var(--ink);font-weight:600}
.tier li::before{position:absolute;left:0;top:0;width:16px;text-align:center;
  font-weight:700;line-height:1.5}
.tier li[data-i="y"]::before{content:"✓";color:var(--green)}
.tier li[data-i="n"]::before{content:"–";color:var(--faint)}
.tier li[data-i="s"]::before{content:"★";color:var(--claret);font-size:13px}
.tier li[data-i="n"]{color:var(--faint)}
.tier .head-note{margin:auto 0 0;padding-top:20px;font-size:12.5px;color:var(--faint)}
.note{font-size:13px;color:var(--faint);margin-top:16px}

/* ---------- pricing: the line-by-line plan comparison ------------------- */
/* Scoped to .compare so the shared table.data rules stay untouched. */
.compare table.data{min-width:840px}
/* Tighter than the shared 18px: five columns have to fit. The outer gutters
   stay at 18px so this table lines up with every other one on the site. */
.compare table.data th,.compare table.data td{text-align:center;padding:13px 14px}
.compare table.data th:first-child,.compare table.data td:first-child{text-align:left;
  width:36%;min-width:250px;padding-left:18px}
.compare table.data th:last-child,.compare table.data td:last-child{padding-right:18px}
.compare table.data thead th{font-family:var(--sans);font-size:14.5px;font-weight:700;
  color:var(--ink);text-transform:none;letter-spacing:-.012em;vertical-align:bottom;
  padding-top:14px;padding-bottom:14px}
.compare .pm{display:block;font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.1em;color:var(--faint);margin-top:5px}
/* the feature column is a row header for screen readers, not a bold heading */
.compare tbody th{font-weight:500;color:var(--ink2);font-size:15px}
.compare .hi,.compare tbody tr:hover td.hi{background:var(--claret-soft)}
.compare .hint{display:block;font-size:12.5px;line-height:1.45;color:var(--faint);
  font-weight:400;margin-top:3px}
.compare .grouprow td{background:var(--bone) !important;font-family:var(--mono);
  font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);text-align:left;padding:11px 18px}
.compare .spanrow td{background:var(--bone2);text-align:left;font-size:13.5px;
  color:var(--body);line-height:1.55;padding:14px 18px}
.compare .spanrow b{color:var(--ink)}
/* CSS-drawn marks: the cell text is the screen-reader label, the glyph is ::before */
.compare td[data-v]{font-size:0}
.compare td[data-v] .sr{font-size:15px}
.compare td[data-v]::before{font-size:16px;font-weight:700;line-height:1}
.compare td[data-v="y"]::before{content:"✓";color:var(--green)}
.compare td[data-v="n"]::before{content:"–";color:var(--faint)}
.compare td[data-v="o"]::before{content:"Once";font-family:var(--mono);font-size:9.5px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--claret);
  background:var(--claret-soft);border-radius:999px;padding:4px 9px;display:inline-block}
.compare .v-txt{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink);
  letter-spacing:.03em}
.compare .v-no{color:var(--faint);font-weight:700}
@media(max-width:720px){
  /* the shared table rule drops column 3; a plan comparison needs every column */
  .compare table.data th:nth-child(3),.compare table.data td:nth-child(3){display:table-cell}
  .compare table.data th,.compare table.data td{font-size:14px}
}

/* ---------- FAQ — hairline list, no boxes ------------------------------ */

.faq{display:grid;gap:0;max-width:var(--narrow);border-top:1px solid var(--ink)}
details{border:0;border-bottom:1px solid var(--rule);border-radius:0;
  background:transparent;padding:0}
details[open]{background:transparent}
details summary{cursor:pointer;list-style:none;padding:20px 0;font-weight:600;font-size:16.5px;
  color:var(--ink);display:flex;justify-content:space-between;align-items:baseline;gap:18px}
details summary::-webkit-details-marker{display:none}
details summary:hover{color:var(--claret)}
details summary::after{content:"+";font-family:var(--mono);color:var(--claret);font-size:15px;
  font-weight:700;line-height:1.3;flex:0 0 auto;transition:transform .22s var(--ease)}
details[open] summary::after{transform:rotate(45deg)}
details > *:not(summary){font-size:16px;color:var(--body)}
details[open] > *:not(summary){animation:fade-in .24s var(--ease) both}
details p{margin:0 0 22px;max-width:62ch}

/* ==========================================================================
   VISUAL COMPONENTS
   Data drawn as pictures, and faithful reconstructions of the product UI.
   Everything here is HTML and CSS — no image files, crisp at any size,
   readable by a screen reader, and it can't go stale when the app changes.
   ========================================================================== */

/* ---------- 1. the test, drawn to scale -------------------------------- */
/* 200 questions as one band; each part sized by its real question count. */

.anatomy{margin-top:8px}
.anatomy-band{display:flex;height:74px;border:1px solid var(--ink);overflow:hidden}
.anatomy-band > i{position:relative;display:block;border-right:1px solid var(--ink);
  transition:filter .2s var(--ease)}
.anatomy-band > i:last-child{border-right:0}
.anatomy-band > i::after{content:attr(data-n);position:absolute;inset:0;
  display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:700;
  color:var(--ink);letter-spacing:.02em}
.anatomy-band:hover > i{filter:saturate(.35) opacity(.55)}
.anatomy-band > i:hover{filter:none}
.anatomy-key{display:flex;flex-wrap:wrap;gap:0;margin-top:14px;
  border-top:1px solid var(--rule)}
.anatomy-key > span{flex:1 1 auto;min-width:112px;padding:12px 12px 12px 11px;
  border-right:1px solid var(--rule);font-size:12.5px;color:var(--muted);line-height:1.4}
.anatomy-key > span:last-child{border-right:0}
.anatomy-key b{display:block;font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:4px}
.anatomy-sections{display:flex;margin-bottom:9px;font-family:var(--mono);font-size:10px;
  font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.anatomy-sections > span{padding-bottom:7px;border-bottom:2px solid currentColor}
.anatomy-sections .l{color:var(--listening)}
.anatomy-sections .r{color:var(--reading)}
/* At 390px the Part 1 segment is only 10px wide — a two-character label cannot
   sit inside it. Drop the in-band numbers on narrow screens and move the counts
   into the key, where they have room. */
@media(max-width:680px){
  .anatomy-band{height:44px}
  .anatomy-band > i::after{content:""}
  .anatomy-key > span{min-width:50%;border-bottom:1px solid var(--rule);padding:11px 10px}
  .anatomy-key b::after{content:" · " attr(data-n) " Qs";font-weight:400;color:var(--muted);
    letter-spacing:0;text-transform:none;font-family:var(--sans);font-size:11.5px}
  .anatomy-sections{font-size:9px;letter-spacing:.08em}
}

/* ---------- 2. the 990 score ruler ------------------------------------- */
/* the scale, the CEFR bands, and the number each country actually asks for */

.ruler{margin-top:10px}
/* Bands are delimited by ink rules and labelled in text, so the CEFR level is
   never carried by colour alone (WCAG 1.4.1) — the tint is reinforcement. */
.ruler-scale{position:relative;height:36px;display:flex;border:1px solid var(--ink)}
.ruler-scale > i{display:block;border-right:1px solid var(--ink);position:relative}
.ruler-scale > i:last-child{border-right:0}
.ruler-scale > i::after{content:attr(data-band);position:absolute;inset:0;
  display:grid;place-items:center;font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.13em;color:var(--ink)}
.ruler-ticks{display:flex;justify-content:space-between;margin-top:7px;
  font-family:var(--mono);font-size:10px;font-weight:700;color:var(--faint);letter-spacing:.06em}
.ruler-marks{position:relative;height:96px;margin-top:2px}
.ruler-mark{position:absolute;top:0;transform:translateX(-50%);text-align:center;width:132px}
.ruler-mark::before{content:"";display:block;width:1px;height:16px;background:var(--claret);
  margin:0 auto 7px}
.ruler-mark b{display:block;font-size:16px;font-weight:700;color:var(--claret);line-height:1.1;
  font-variant-numeric:tabular-nums}
.ruler-mark span{display:block;font-size:11.5px;color:var(--muted);line-height:1.35;margin-top:3px}
.ruler-mark.low::before{height:38px}
.ruler-mark.mid::before{height:60px}
.ruler-band-key{display:flex;gap:20px;flex-wrap:wrap;margin-top:6px;
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint)}

/* Below 860px three absolutely-positioned marks overlap each other, so they
   become a plain stacked list with the score on the left. Measured at 390px:
   the old layout had marks at 157-253, 231-327, 286-382 — two collisions. */
@media(max-width:860px){
  .ruler-marks{position:static;height:auto;margin-top:20px;
    display:grid;gap:0;border-top:1px solid var(--rule)}
  .ruler-mark{position:static;left:auto !important;transform:none;width:auto;
    text-align:left;display:grid;grid-template-columns:96px 1fr;gap:16px;
    align-items:baseline;padding:13px 0;border-bottom:1px solid var(--rule)}
  .ruler-mark::before{display:none}
  .ruler-mark b{font-size:17px}
  .ruler-mark span{font-size:13px;margin-top:0}
}

/* ---------- 3. the 120-minute clock strip ------------------------------ */

.clock{display:grid;gap:0;border-top:1px solid var(--ink)}
.clock-row{display:grid;grid-template-columns:150px 1fr 62px;gap:16px;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--rule)}
.clock-row:last-child{border-bottom:0}
.clock-row .lbl{font-size:14px;color:var(--ink);font-weight:500}
.clock-row .lbl small{display:block;font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-top:2px}
.clock-row .mins{font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--ink);
  text-align:right;font-variant-numeric:tabular-nums}
.clock-bar{height:8px;background:var(--bone2);position:relative}
.clock-bar > i{position:absolute;top:0;bottom:0;display:block}
.clock-row.is-l .clock-bar > i{background:var(--listening)}
.clock-row.is-r .clock-bar > i{background:var(--reading)}
.clock-row.total{border-bottom:0;border-top:1px solid var(--ink);padding-top:14px}
.clock-row.total .lbl,.clock-row.total .mins{font-weight:700;color:var(--ink)}
@media(max-width:560px){.clock-row{grid-template-columns:110px 1fr 54px;gap:11px}}

/* ---------- 4. product panels — reconstructions of app.toeic.ai -------- */

.appshot{border:1px solid var(--rule2);border-radius:var(--radius-lg);overflow:hidden;
  background:var(--bone2);box-shadow:var(--shadow-lg)}
.appshot-bar{display:flex;align-items:center;gap:9px;padding:11px 16px;
  background:var(--paper);border-bottom:1px solid var(--rule)}
.appshot-bar i{width:9px;height:9px;border-radius:50%;background:var(--rule2);display:block}
.appshot-bar span{margin-left:6px;font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.appshot-body{padding:24px 22px}
.appshot-cap{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);margin:12px 0 0;padding-left:10px;
  border-left:2px solid var(--rule2)}

/* the app's Question Bank part cards */
/* Four Listening parts, so two columns: at three the fourth card sat alone and
   left two dead cells to its right. 2x2 also gives each card ~244px instead of
   ~158px, which stops the descriptions wrapping to four lines. */
.partgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:520px){.partgrid{grid-template-columns:1fr}}
.partcard{background:var(--paper);border:1px solid var(--rule2);border-radius:var(--radius-lg);
  padding:16px 15px;box-shadow:var(--shadow-sm);transition:border-color .16s var(--ease)}
.partcard:hover{border-color:var(--rule-ink)}
.partcard-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
  margin-bottom:13px}
.partcard .tile{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;
  font-size:15px;flex:0 0 auto}
.partcard .pnum{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--faint);text-align:right;line-height:1.5}
.partcard .pnum b{display:block;font-size:12px;color:var(--ink);letter-spacing:.02em;
  font-variant-numeric:tabular-nums}
.partcard h4,.partcard .pt{font-size:15px;margin:0 0 5px;font-weight:700;color:var(--ink);letter-spacing:-.008em}
.partcard p{font-size:12.5px;color:var(--muted);margin:0;line-height:1.45}
.partcard .prog{margin-top:14px;padding-top:11px;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;
  font-weight:700;color:var(--faint);letter-spacing:.06em}

/* the app's Planning -> Practicing stepper (two stages; "Assessing" was removed) */
.stepper{display:flex;align-items:stretch;gap:0;border:1px solid var(--rule);
  border-radius:var(--radius-lg);overflow:hidden;background:var(--paper);margin-bottom:16px}
.stepper > div{flex:1 1 0;padding:14px 16px;border-right:1px solid var(--rule);
  display:flex;gap:11px;align-items:center}
.stepper > div:last-child{border-right:0}
.stepper .n{width:24px;height:24px;border-radius:50%;flex:0 0 auto;display:grid;
  place-items:center;font-family:var(--mono);font-size:11px;font-weight:700;
  border:1px solid var(--rule2);color:var(--faint)}
.stepper .t{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.25}
.stepper .t small{display:block;font-weight:400;font-size:11.5px;color:var(--muted);margin-top:1px}
.stepper .done .n{background:var(--green);border-color:var(--green);color:#fff}
.stepper .now{background:var(--ink)}
.stepper .now .n{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.stepper .now .t{color:#fff}
.stepper .now .t small{color:#b9c0cf}
.stepper .todo{opacity:.55}
@media(max-width:680px){.stepper{flex-direction:column}
  .stepper > div{border-right:0;border-bottom:1px solid var(--rule)}
  .stepper > div:last-child{border-bottom:0}}

/* Today's Targets */
.targets{border:1px solid var(--rule);border-radius:var(--radius-lg);background:var(--paper);
  padding:18px 18px 8px}
.targets .head{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.targets .count{font-size:32px;font-weight:700;color:var(--ink);letter-spacing:-.035em;
  line-height:1;margin-bottom:2px;font-variant-numeric:tabular-nums}
.targets .count s{text-decoration:none;color:var(--rule2)}
.targets .count small{font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0}
.targets ul{list-style:none;margin:16px 0 0;padding:0}
.targets li{padding:9px 0;border-top:1px solid var(--rule);font-size:13px;color:var(--ink);
  display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.targets li em{font-style:normal;font-family:var(--mono);font-size:11px;font-weight:700;
  color:var(--faint);font-variant-numeric:tabular-nums}
.targets li em b{color:var(--ink)}
.targets li.on{color:var(--ink);font-weight:600}

/* an app-style question row, used in the hero */
.qrow{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;
  padding:13px 15px;border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--paper);cursor:pointer;font:inherit;font-size:15.5px;color:var(--ink);
  transition:border-color .14s var(--ease),background .14s var(--ease)}
.qrow:hover{border-color:var(--indigo);background:var(--indigo-soft)}
.qrow .r{width:17px;height:17px;border-radius:50%;border:1.5px solid var(--rule-ink);
  flex:0 0 auto;margin-top:2px;display:grid;place-items:center}
.qrow .r::after{content:"";width:8px;height:8px;border-radius:50%;background:transparent}
.qrow .kk{font-weight:700;flex:0 0 auto}
.qrow.correct{border-color:var(--green);background:var(--green-soft)}
.qrow.correct .r{border-color:var(--green)}
.qrow.correct .r::after{background:var(--green)}
.qrow.wrong{border-color:var(--err);background:var(--claret-soft)}
.qrow.wrong .r{border-color:var(--err)}
.qrow.wrong .r::after{background:var(--err)}
.qrow[disabled]{cursor:default}

/* ---------- 5. audience cards — who this is actually for --------------- */

.audience{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--ink)}
@media(max-width:860px){.audience{grid-template-columns:1fr}}
.aud{padding:26px 26px 26px 0;border-right:1px solid var(--rule)}
.aud:last-child{border-right:0;padding-right:0}
.aud:not(:first-child){padding-left:26px}
@media(max-width:860px){
  .aud{border-right:0;border-bottom:1px solid var(--rule);padding:24px 0}
  .aud:not(:first-child){padding-left:0}
  .aud:last-child{border-bottom:0}
}
.aud .flagline{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--claret);margin-bottom:12px}
.aud .target{font-size:38px;font-weight:700;color:var(--ink);line-height:1;letter-spacing:-.04em;
  margin-bottom:4px;font-variant-numeric:tabular-nums}
.aud .target small{font-size:14px;font-weight:500;color:var(--muted);letter-spacing:0}
.aud h3{font-size:17px;margin:14px 0 8px}
.aud p{font-size:14.5px;color:var(--muted);margin:0}

/* ---------- final CTA — ink panel, no gradient ------------------------- */

.final{border-radius:var(--radius-lg);padding:64px 40px;text-align:center;color:#fff;
  background:var(--ink);position:relative;overflow:hidden}
.final h2{color:#fff;margin-bottom:14px}
.final p{color:#c3c9d4;font-size:17.5px;max-width:54ch;margin:0 auto 28px}
.final .btn-primary{background:var(--claret);border-color:var(--claret)}
.final .btn-primary:hover{background:var(--claret-hi);border-color:var(--claret-hi)}
.final .btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.final .btn-outline:hover{background:rgba(255,255,255,.09);border-color:#fff}
.final .cta-row{justify-content:center;margin-bottom:0}
.final .tiny{color:#9aa2b0;margin-top:20px}
.final a{color:#fff;border-bottom-color:rgba(255,255,255,.4)}

/* ---------- breadcrumbs ------------------------------------------------ */

.crumbs{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);padding:26px 0 0}
.crumbs a{color:var(--faint);border-bottom:0}
.crumbs a:hover{color:var(--claret);border-bottom:0}
.crumbs span{color:var(--rule2);margin:0 9px}

/* ---------- prose ------------------------------------------------------ */

.prose{max-width:var(--narrow)}
.prose h2{margin-top:52px}
.prose h2:first-of-type{margin-top:0}
.prose h3{margin-top:32px}
.prose ul,.prose ol{padding-left:22px;margin:0 0 20px}
.prose li{margin-bottom:9px}
.prose li::marker{color:var(--claret)}
.prose .tbl-wrap{margin:30px 0}
.prose blockquote{margin:30px 0;padding:6px 0 6px 24px;border-left:2px solid var(--claret);
  background:transparent;border-radius:0;color:var(--ink);font-size:17px;line-height:1.6}

/* ---------- forms ------------------------------------------------------ */

.form{display:grid;gap:20px;max-width:520px}
.form label{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:8px}
.form input[type=text],.form input[type=email],.form select,.form textarea{
  width:100%;padding:12px 14px;font:inherit;font-size:16px;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule-ink);border-radius:var(--radius);
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--claret);
  box-shadow:0 0 0 3px var(--claret-soft)}
.form textarea{min-height:130px;resize:vertical}

/* ---------- footer ----------------------------------------------------- */

.site-footer{background:var(--bone);border-top:1px solid var(--ink);padding:56px 0 32px}
.fcols{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:40px}
@media(max-width:860px){.fcols{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:520px){.fcols{grid-template-columns:1fr}}
.fcols h4,.fcols h2{font-family:var(--mono);font-size:10px;line-height:1.35;text-transform:uppercase;
  letter-spacing:.13em;color:var(--faint);margin:0 0 16px;font-weight:700}
.fcols a{display:block;color:var(--ink);font-size:15px;padding:5px 0;text-decoration:none;
  border-bottom:0;transition:color .14s var(--ease)}
.fcols a:hover{color:var(--claret);border-bottom:0}
.fcols p{font-size:14.5px;color:var(--muted);max-width:34ch;margin:16px 0 0}
.legal{margin-top:42px;padding-top:24px;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}
.legal p{font-size:12.5px;color:var(--faint);max-width:74ch;margin:0;line-height:1.6}
.legal .geo{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);white-space:nowrap}

/* utilities must win inside .card, .final and .tier */
.card p.tiny,.final p.tiny,.tier p.tiny{font-size:13px;color:var(--faint)}
.card p.small,.final p.small,.tier p.small{font-size:14.5px}
.final p.tiny{color:#9aa2b0}

/* ---------- keyframes — only fades. nothing bounces. ------------------- */

@keyframes fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes slide-down{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.reveal{opacity:0}
.reveal.in{animation:fade-up .6s var(--ease) both}
.reveal.in:nth-child(2){animation-delay:.05s}
.reveal.in:nth-child(3){animation-delay:.1s}
.reveal.in:nth-child(4){animation-delay:.15s}
.reveal.in:nth-child(5){animation-delay:.2s}
.reveal.in:nth-child(6){animation-delay:.25s}

a[data-ext] span[aria-hidden]{font-size:.85em;opacity:.65;letter-spacing:0}
.btn[data-ext] span[aria-hidden]{opacity:.8}

.figcap{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint);margin:0 0 10px}

/* Diagrams ship as standalone SVG files rather than CSS bars, so Google Images can
   index them. width/height on the <img> reserve the aspect ratio and stop layout
   shift while the file loads. */
.figdiag{margin:8px 0 0}
.figdiag img{display:block;width:100%;height:auto}

.ctaline{font-size:15.5px;color:var(--ink);margin:30px 0 14px;font-weight:500}
.ctaline b{color:var(--claret);font-weight:700}

/* ---------- a11y ------------------------------------------------------- */

:focus-visible{outline:2px solid var(--claret);outline-offset:2px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;
  padding:12px 20px;z-index:100;border-radius:0}
.skip:focus{left:0;text-decoration:none}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1}
  .track i{transition:none}
}

@media print{
  .site-header,.site-footer,.final,.btn,.nav-toggle{display:none}
  body{font-size:11pt;color:#000;background:#fff;line-height:1.5}
  .hero,.cream,.card,.qcard,.conv,.honest,.tier{background:none;box-shadow:none}
  .seg-wrap{display:none}
  section{padding:18px 0}
  /* scroll-reveal must never survive into print — app.js also force-reveals
     on beforeprint, because the bar widths are set inline by JS. */
  .reveal,.reveal.in{opacity:1 !important;transform:none !important;animation:none !important}
  .tbl-wrap,table.data,.bandrow,details,.diagrow{break-inside:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8.5pt;color:#444}
  a{border-bottom:0}
}

/* ==========================================================================
   APP-NATIVE COMPONENT LAYER
   ========================================================================== */

h1,h2,h3,h4{font-weight:800;letter-spacing:-.03em}
h1{font-size:clamp(34px,4.5vw,50px);line-height:1.06}
h2{font-size:clamp(26px,3.2vw,36px)}
.lead{font-size:19.5px;color:var(--body)}

/* streak pill, straight from the dashboard */
.streak{display:inline-flex;align-items:center;gap:9px;background:var(--brass-soft);
  color:var(--brass);font-weight:700;font-size:13.5px;padding:10px 16px;border-radius:999px;
  margin-top:6px}

.btn{border-radius:14px;padding:15px 28px;font-weight:700}
.btn-sm{padding:9px 17px;border-radius:11px}
.btn-primary{box-shadow:0 10px 22px -11px rgba(75,63,212,.8)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-outline{border-width:1.5px;background:var(--paper)}
.btn-outline:hover{border-color:var(--claret);color:var(--claret);background:var(--claret-soft)}

.trustline{border-top:0;gap:10px;padding-top:4px}
.trustline span{background:var(--claret-soft);color:var(--claret);font-weight:600;
  font-size:13.5px;padding:9px 15px;border-radius:999px}
.trustline span:nth-child(2){background:var(--reading-soft);color:var(--reading)}
.trustline span:nth-child(3){background:var(--green-soft);color:var(--green)}
.trustline b{color:inherit;font-weight:800}

.card,.appshot,.conv,.qcard{border-radius:var(--radius-xl)}
.grid3,.grid4{gap:18px;background:transparent}
.grid3 > .card,.grid4 > .card{border:1px solid var(--rule);border-radius:var(--radius-lg);
  background:var(--card);box-shadow:var(--shadow-sm)}
.grid3 > .card:hover,.grid4 > .card:hover{background:var(--card);box-shadow:var(--shadow);
  transform:translateY(-3px);border-color:var(--rule2)}
.ic{width:46px;height:46px;border-radius:14px;background:var(--claret-soft);border:0;
  filter:none;place-items:center;font-size:22px}
.card:hover .ic{transform:scale(1.08);filter:none}

/* ==========================================================================
   FEATURE CARDS — per-card accent, stroked icons, layered depth
   Each card carries an accent class (.a-claret … .a-slate) that sets four
   custom properties. Every value is literal, so no color-mix() dependency.
   ========================================================================== */

.a-claret{--ac:#4b3fd4;--ac-hi:#7165ee;--ac-soft:#ecebfd;--ac-ring:rgba(75,63,212,.26);--ac-glow:rgba(75,63,212,.45)}
.a-blue  {--ac:#2b5fd9;--ac-hi:#5286f2;--ac-soft:#e9f0ff;--ac-ring:rgba(43,95,217,.26);--ac-glow:rgba(43,95,217,.45)}
.a-violet{--ac:#6d28d9;--ac-hi:#9250f5;--ac-soft:#f2ecff;--ac-ring:rgba(109,40,217,.26);--ac-glow:rgba(109,40,217,.45)}
.a-green {--ac:#0b6b55;--ac-hi:#14947a;--ac-soft:#e6f7f2;--ac-ring:rgba(11,107,85,.26);--ac-glow:rgba(11,107,85,.42)}
.a-brass {--ac:#8e5300;--ac-hi:#c2790f;--ac-soft:#fdf1e0;--ac-ring:rgba(142,83,0,.26);--ac-glow:rgba(142,83,0,.40)}
/* the not-built-yet card reads muted on purpose, so its BEING FIXED flag leads */
.a-slate {--ac:#5f6288;--ac-hi:#858ab0;--ac-soft:#eeeef8;--ac-ring:rgba(95,98,136,.24);--ac-glow:rgba(95,98,136,.34)}

.grid3 > .card,.grid4 > .card{position:relative;overflow:hidden;
  background:linear-gradient(168deg,var(--paper) 55%,var(--ac-soft,var(--paper)) 210%);
  box-shadow:0 1px 2px rgba(20,21,57,.04),0 6px 16px -9px rgba(20,21,57,.10);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}

/* an accent hairline across the top edge, revealed on hover */
.grid3 > .card::after,.grid4 > .card::after{content:"";position:absolute;top:0;left:0;
  height:2px;width:100%;background:linear-gradient(90deg,var(--ac,var(--claret)),transparent 72%);
  opacity:0;transition:opacity .22s var(--ease)}
.grid3 > .card:hover::after,.grid4 > .card:hover::after{opacity:1}

.grid3 > .card:hover,.grid4 > .card:hover{transform:translateY(-4px);border-color:var(--ac-ring);
  box-shadow:0 2px 4px rgba(20,21,57,.05),0 18px 34px -14px var(--ac-glow)}

/* a saturated tile with a white glyph, not a pale wash: this is the whole
   difference between "an emoji in a box" and something that looks built */
.card .ic{width:48px;height:48px;border-radius:15px;color:#fff;border:0;
  background:linear-gradient(148deg,var(--ac-hi,var(--claret)) 8%,var(--ac,var(--claret)) 92%);
  box-shadow:0 6px 15px -5px var(--ac-glow,transparent),
             0 1px 2px rgba(20,21,57,.14),
             inset 0 1px 0 rgba(255,255,255,.32);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.card:hover .ic{transform:translateY(-2px) scale(1.05);
  box-shadow:0 11px 22px -6px var(--ac-glow,transparent),
             0 1px 2px rgba(20,21,57,.14),
             inset 0 1px 0 rgba(255,255,255,.32)}
.ic svg{width:23px;height:23px;display:block;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

@media(prefers-reduced-motion:reduce){
  .grid3 > .card:hover,.grid4 > .card:hover,.card:hover .ic{transform:none}
}

.numbered .card::before{content:counter(st);width:32px;height:32px;padding:0;border-radius:50%;
  background:var(--claret);color:#fff;border-bottom:0;font-family:var(--sans);font-size:14.5px;
  letter-spacing:0;display:grid;place-items:center}

.stats{border:0;gap:14px}
.stat{border-right:0;border-bottom:0 !important;background:var(--bone);
  border-radius:var(--radius-lg);text-align:center;padding:26px 18px}
.stat b{color:var(--claret);font-size:36px}
.stat:nth-child(2) b{color:var(--reading)}
.stat:nth-child(3) b{color:var(--listening)}
.stat:nth-child(4) b{color:var(--green)}

.anatomy-band{height:76px;border:0;border-radius:16px;overflow:hidden;gap:3px}
.anatomy-band > i{border-right:0}
.anatomy-band > i::after{font-size:13px;font-weight:800;color:var(--ink)}
.anatomy-key > span{border-right:0}

.ruler-scale{border:0;border-radius:12px;overflow:hidden;height:40px}
.ruler-scale > i{border-right:2px solid var(--paper)}
.bands{gap:10px;border-top:0}
.bandrow{border-radius:var(--radius-lg);border-color:var(--rule)}
.bandrow.hi{border:2px solid var(--claret);background:var(--claret-soft);padding-left:18px}
.cefr{padding:5px 12px;border-radius:999px}
.cefr.c1{background:var(--green-soft);color:var(--green)}
.cefr.b2{background:var(--claret-soft);color:var(--claret)}
.cefr.b1{background:var(--listening-soft);color:var(--listening)}
.cefr.a2{background:var(--bone2);color:var(--muted)}

.track{height:10px;border-radius:999px;background:var(--bone2)}
.track i{border-radius:999px;background:var(--claret)}
.track i.listening{background:var(--listening)}
.track i.reading{background:var(--reading)}

.conv{border:1px solid var(--rule);box-shadow:var(--shadow)}
.conv-out .big{color:var(--claret);font-size:56px}

.honest{background:var(--bone);border:0;border-left:4px solid var(--claret);
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;padding:26px 28px}
.stamp{background:var(--green-soft);border:0;border-radius:999px;padding:8px 15px;color:var(--green)}
.card p.flag,p.flag{background:var(--brass-soft);color:var(--brass);border-left:0;
  border-radius:999px;padding:6px 13px;display:inline-block;margin-bottom:12px}

.audience{border-top:0;gap:18px;grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.audience{grid-template-columns:1fr}}
.aud{border-right:0;border-bottom:0 !important;background:var(--claret-soft);
  border-radius:var(--radius-lg);padding:28px 26px !important}
.aud:nth-child(2){background:var(--reading-soft)}
.aud:nth-child(3){background:var(--listening-soft)}
.aud .flagline{color:var(--claret)}
.aud:nth-child(2) .flagline{color:var(--reading)}
.aud:nth-child(3) .flagline{color:var(--listening)}
.aud .target{color:var(--ink);font-size:42px}

.appshot{background:var(--bone);border-color:var(--rule2)}
.partcard{border-radius:16px;border-color:var(--rule)}
.stepper{border-radius:16px}
.stepper .now{background:var(--claret)}
.targets{border-radius:16px}
.qrow{border-radius:12px;border-color:var(--rule2)}
.qrow:hover{border-color:var(--claret);background:var(--claret-soft)}

.faq{gap:10px;border-top:0}
details{border:1px solid var(--rule);border-radius:var(--radius-lg);padding:0 22px}
details[open]{background:var(--bone);border-color:var(--rule2)}
details summary::after{color:var(--claret);font-size:24px}

/* final CTA: the app's own gradient panel */
.final{background:linear-gradient(135deg,#4b3fd4 0%,#6425c4 100%);border-radius:26px;padding:64px 36px}
.final h2{color:#fff}
.final p{color:#e6e2ff}
.final .tiny{color:#dcd6ff}
.final .btn-primary{background:#fff;color:var(--claret);border-color:#fff;box-shadow:none}
.final .btn-primary:hover{background:#f4f3ff;border-color:#f4f3ff}
.final .btn-outline{border-color:rgba(255,255,255,.6);color:#fff;background:transparent}
.final .btn-outline:hover{background:rgba(255,255,255,.15);border-color:#fff;color:#fff}

/* overflow-x must stay scrollable: `overflow:hidden` here clipped any table
   wider than the viewport, making the last columns unreachable on a phone.
   y stays hidden so the corner radius still clips the table's own corners. */
.tbl-wrap{border:1px solid var(--rule);border-radius:var(--radius-lg);
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain}
/* app.js gives an overflowing wrapper a tab stop. The global :focus-visible
   rule sets border-radius:2px, which would square this card off while focused. */
.tbl-wrap:focus-visible{border-radius:var(--radius-lg)}
table.data thead th{background:var(--bone)}
table.data th,table.data td{padding-left:18px}
/* The base rule zeroes the last cell's right padding, which suited the original
   full-bleed table. Now that .tbl-wrap is a bordered card, that put the last
   column hard against the line — this restores the gutter to match the left. */
table.data th:last-child,table.data td:last-child{padding-right:18px}
table.data .sec{border-left:3px solid var(--rule2);border-radius:0}
.sec.listening{color:var(--listening);border-left-color:var(--listening)}
.sec.reading{color:var(--reading);border-left-color:var(--reading)}

.site-footer{background:var(--bone);border-top:0}
.legal{border-top:1px solid var(--rule2)}

/* ==========================================================================
   PAGE IDENTITY
   The heroes were structurally identical across pages, so clicking a nav item
   felt like nothing had happened. An accent eyebrow names the page above the
   H1, and /practice-test swaps its sample question for a test picker so the
   two pages no longer share a silhouette.
   ========================================================================== */

.eyebrow{display:inline-flex;align-items:center;gap:11px;font-family:var(--mono);
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ac,var(--claret));margin:0 0 15px}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:currentColor}
@media(max-width:680px){.eyebrow{margin-bottom:12px}}

/* hero test picker, /practice-test only */
.picker{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-xl);
  padding:20px 18px 18px;
  box-shadow:0 1px 2px rgba(20,21,57,.04),0 12px 28px -16px rgba(20,21,57,.20)}
.pickrow{display:grid;grid-template-columns:1fr auto;gap:3px 14px;align-items:center;
  padding:13px 15px;margin-top:9px;border:1px solid var(--rule);border-radius:14px;
  border-bottom:1px solid var(--rule);color:inherit;text-decoration:none;
  transition:border-color .16s var(--ease),background .16s var(--ease),transform .16s var(--ease)}
.pickrow:first-of-type{margin-top:12px}
.pickrow:hover{border-color:var(--claret);background:var(--claret-soft);transform:translateX(2px)}
/* Every cell is placed explicitly. Left to auto-placement, .pk-go carries a
   definite row and grid resolves those first, so the arrow took column 1 and
   shunted the label into column 2. */
.pk-name{grid-column:1;grid-row:1;font-weight:700;font-size:15.5px;color:var(--ink);line-height:1.25}
.pk-meta{grid-column:1;grid-row:2;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.04em;color:var(--muted)}
.pk-go{grid-column:2;grid-row:1 / span 2;justify-self:end;align-self:center;
  font-size:18px;font-weight:700;color:var(--claret);line-height:1;
  transition:transform .16s var(--ease)}
.pickrow:hover .pk-go{transform:translateX(3px)}

/* ==========================================================================
   HERO ARCHETYPES — added 2026-07-28
   The accent eyebrow above was not enough. Every page still ran the same
   silhouette (text left, one bordered card right, three chips under the CTA),
   so moving between them read as one page that never changed. Each page now
   gets a different hero SHAPE, and only the homepage keeps the two-column
   app shot. The H1 formula "Noun phrase: <em>claret clause</em>" is likewise
   homepage-only now; the other pages carry a single-voice headline.
   ========================================================================== */

/* shared: a full-width headline block sitting above a full-width figure */
.hero-head{max-width:60ch}
.hero-head .lead{max-width:64ch}
.hero-wide .trustline{margin-top:26px}

/* --- /practice-test : four sittings across the full width ---------------- */
.hero-picks{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px}
.hero-picks .pickrow{margin:0;padding:17px 17px 15px;grid-template-columns:1fr;
  gap:5px;border-radius:16px;background:var(--paper);align-content:start}
.hero-picks .pk-name{grid-column:1;grid-row:1;font-size:16px}
.hero-picks .pk-meta{grid-column:1;grid-row:2}
.hero-picks .pk-go{grid-column:1;grid-row:3;justify-self:start;align-self:end;
  margin-top:10px;font-size:16px}
.hero-picks .pickrow:hover{transform:translateY(-2px)}
.picks-note{margin:14px 0 0;font-size:13px;color:var(--faint)}
@media(max-width:860px){.hero-picks{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.hero-picks{grid-template-columns:1fr}}

/* --- /format : the share-of-test chart runs the full width --------------- */
.hero-chart{margin-top:34px;border:1px solid var(--rule);border-radius:var(--radius-xl);
  background:var(--paper);padding:24px 26px 20px}
.hero-chart figure{margin:0}
.hero-chart .figcap{margin-bottom:4px}
.chart-legend{display:flex;flex-wrap:wrap;gap:8px 10px;margin:18px 0 0;padding:16px 0 0;
  border-top:1px solid var(--rule);list-style:none}
.chart-legend li{font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;
  color:var(--ink);background:var(--bone);border:1px solid var(--rule);
  border-radius:999px;padding:5px 11px}
.chart-legend li b{font-weight:700}
.chart-legend li.big{background:var(--reading-soft);border-color:transparent;color:var(--reading)}
@media(max-width:640px){.hero-chart{padding:18px 16px 16px}}

/* --- /score : the 10–990 scale itself is the hero figure ------------------ */
.scalefig{margin-top:38px}
.scale-ends{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.bignum{font-family:var(--sans);font-weight:800;line-height:.86;letter-spacing:-.045em;
  font-size:clamp(46px,8.4vw,92px);color:var(--ink);margin:0}
.bignum.top{color:var(--claret)}
.bignum-lab{display:block;font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.scale-ends .right{text-align:right}
.rail{position:relative;height:14px;border-radius:999px;margin:26px 0 0;
  background:linear-gradient(90deg,var(--bone2) 0%,var(--p2) 26%,var(--p3) 55%,
    var(--claret-soft) 79%,var(--claret) 100%);border:1px solid var(--rule)}
.rail-marks{display:flex;justify-content:space-between;margin:12px 0 0;padding:0;list-style:none;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--muted)}
.rail-marks b{display:block;font-size:14px;color:var(--ink);letter-spacing:-.01em}
.rail-marks li{flex:1;min-width:0}
.rail-marks li + li{text-align:center}
.rail-marks li:last-child{text-align:right}
.scale-foot{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--rule);
  font-size:14.5px;color:var(--muted)}
@media(max-width:560px){.rail-marks{font-size:10.5px}.rail-marks b{font-size:12.5px}}

/* --- /speaking-writing : two exams, two panels, no right-hand card -------- */
.sw-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
.sw-panel{border:1px solid var(--rule);border-radius:var(--radius-xl);background:var(--paper);
  padding:22px 22px 20px}
.sw-panel h2{font-size:20px;margin:0 0 4px}
.sw-panel .tag{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--reading);display:block;margin-bottom:10px}
.sw-panel.writing .tag{color:var(--listening)}
.sw-facts{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--rule);
  display:grid;gap:9px}
.sw-facts li{display:flex;justify-content:space-between;gap:14px;font-size:14.5px;color:var(--muted)}
.sw-facts b{color:var(--ink);font-family:var(--mono);font-size:13.5px;font-weight:700}
@media(max-width:720px){.sw-pair{grid-template-columns:1fr}}

/* /pricing's old single `$0` figure lived here. The four-tier hero replaced it
   — the tier amounts now carry that weight, so .pricefig had no users left. */

/* --- guide index + related links (added with the 18 article pages) -------- */
.guidegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:34px}
.guidecol h3{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px;font-weight:700}
.guidecol a{display:block;color:var(--ink);font-size:15.5px;padding:7px 0;border-bottom:0;
  border-top:1px solid var(--rule);text-decoration:none}
.guidecol a:first-of-type{border-top:0}
.guidecol a:hover{color:var(--claret)}
@media(max-width:860px){.guidegrid{grid-template-columns:1fr 1fr;gap:20px}}
@media(max-width:520px){.guidegrid{grid-template-columns:1fr}}

.related{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;padding:0;list-style:none}
.related a{display:inline-block;border:1px solid var(--rule);border-radius:999px;
  padding:8px 15px;font-size:14.5px;color:var(--ink);background:var(--paper);text-decoration:none}
.related a:hover{border-color:var(--claret);background:var(--claret-soft);color:var(--claret)}

/* --- /guides hub ---------------------------------------------------------- */
.gwrap{padding:20px 0 10px}
.gsec{padding:34px 0 30px;border-top:1px solid var(--rule)}
.gsec:first-child{border-top:0;padding-top:8px}
.glist{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:6px}
.grow{display:block;border:1px solid var(--rule);border-radius:16px;padding:17px 18px 16px;
  background:var(--paper);text-decoration:none;border-bottom:1px solid var(--rule);
  transition:border-color .16s var(--ease),background .16s var(--ease),transform .16s var(--ease)}
.grow:hover{border-color:var(--ac,var(--claret));background:var(--ac-soft,var(--claret-soft));
  transform:translateY(-2px)}
.gsec .grow{--ac:inherit}
.g-t{display:block;font-weight:700;font-size:16px;color:var(--ink);line-height:1.3;margin-bottom:6px}
.g-d{display:block;font-size:14px;color:var(--muted);line-height:1.5}
@media(max-width:900px){.glist{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.glist{grid-template-columns:1fr}.gsec{padding:26px 0 22px}}

/* --- cookie consent ------------------------------------------------------
   Non-modal by design: it never traps focus, never dims the page, and never
   blocks reading. It is inserted as the FIRST child of <body> so a keyboard
   user reaches it immediately instead of tabbing the whole page first, and it
   is pinned to the bottom visually so it does not push the header down.
   Decline sits left of Accept and shares its size — a "reject" that is harder
   to find than "accept" is not a free choice, and the privacy policy promises
   a refusal is honoured. -------------------------------------------------- */
.cc{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  max-width:var(--maxw);margin:0 auto;padding:15px 18px;
  background:var(--paper);border:1px solid var(--rule2);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg)}
.cc p{margin:0;font-size:14.5px;line-height:1.5;color:var(--body);max-width:74ch}
.cc a{color:var(--claret)}
.cc-actions{display:flex;gap:10px;flex-shrink:0}
@media(max-width:640px){
  .cc{flex-direction:column;align-items:stretch;gap:13px}
  .cc-actions{justify-content:stretch}
  .cc-actions .btn{flex:1}
}
/* Sits among the footer's <a> links, so it has to read as one of them. */
.cc-reopen{display:block;color:var(--ink);font-size:15px;padding:5px 0;
  background:none;border:0;font-family:inherit;text-align:left;cursor:pointer}
.cc-reopen:hover{color:var(--claret)}
@media(max-width:520px){.cc-reopen{padding:11px 0}}
/* A consent prompt in a printout is noise, and the reopen control is inert on paper. */
@media print{.cc,.cc-reopen{display:none}}