/* FrenchPoints site v2. Direction C, Markup (brand/directions/markup/tokens.json), Lexend only.
   Layout: one 1216 px column (x = 112 at 1440, Speak's measured hero start), hairline app chrome, the product as the picture.
   Every colour is a token; the bare :root holds light, the two dark blocks redefine tokens only. */

@font-face{font-family:"Lexend";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/lexend-400.0601e0a909.woff2") format("woff2")}
@font-face{font-family:"Lexend";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/lexend-500.27cf5288dd.woff2") format("woff2")}
@font-face{font-family:"Lexend";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/lexend-600.c3c291158a.woff2") format("woff2")}
@font-face{font-family:"Lexend";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/lexend-700.52dcdaa127.woff2") format("woff2")}

:root{
 --bg:#FDFDFB;--surface:#FFFFFF;--ink:#17201C;--muted:#58635E;--primary:#0D6E52;--on-primary:#FFFFFF;
 --accent:#C42F67;--error:#B42328;--fix:#0B6B4F;--fix-tint:#DCF2E8;--hint:#835100;--strength:#1F57A0;
 --line:#C9D3CE;--line-strong:#8A9690;--field:#EAF4EF;--rule:rgba(13,110,82,.09);--paper:#FFFFFF;--hover:#F1F5F3;--on-badge:#FFFFFF;
 --band:#F3F7F5;--glass:rgba(253,253,251,.9);
 --shadow:0 24px 60px -12px rgba(16,48,36,.22),0 2px 6px rgba(16,48,36,.06);
 --shadow-soft:0 0 50px rgba(16,48,36,.08);
 --font:"Lexend",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
 --ease-out-3:cubic-bezier(.33,1,.68,1);--ease-out-4:cubic-bezier(.25,1,.5,1);
 --r-card:16px;--r-frame:24px;--r-input:10px;
 --wrap:1216px;--gut:32px;--nav-h:84px;
 color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
 --bg:#0F1513;--surface:#18201D;--ink:#E8F0EC;--muted:#A9B8B1;--primary:#6FD3AE;--on-primary:#0B1A14;
 --accent:#F27CA6;--error:#F7978F;--fix:#86E0BC;--fix-tint:#143027;--hint:#E9BC6C;--strength:#9DC2F2;
 --line:#34423C;--line-strong:#6B7C74;--field:#13231D;--rule:rgba(111,211,174,.08);--paper:#F4F7F5;--hover:#1F2925;--on-badge:#0F1513;
 --band:#131B18;--glass:rgba(15,21,19,.88);
 --shadow:0 24px 60px -12px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.3);--shadow-soft:0 0 50px rgba(0,0,0,.35);
 color-scheme:dark;
}}
:root[data-theme="dark"]{
 --bg:#0F1513;--surface:#18201D;--ink:#E8F0EC;--muted:#A9B8B1;--primary:#6FD3AE;--on-primary:#0B1A14;
 --accent:#F27CA6;--error:#F7978F;--fix:#86E0BC;--fix-tint:#143027;--hint:#E9BC6C;--strength:#9DC2F2;
 --line:#34423C;--line-strong:#6B7C74;--field:#13231D;--rule:rgba(111,211,174,.08);--paper:#F4F7F5;--hover:#1F2925;--on-badge:#0F1513;
 --band:#131B18;--glass:rgba(15,21,19,.88);
 --shadow:0 24px 60px -12px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.3);--shadow-soft:0 0 50px rgba(0,0,0,.35);
 color-scheme:dark;
}

/* ---------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:18px;line-height:1.6;
 font-feature-settings:"kern";text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
img{height:auto}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0;text-wrap:balance}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:6px}
.ic{flex:none;display:inline-block;vertical-align:middle}
.wrap{max-width:calc(var(--wrap) + 2 * var(--gut));margin:0 auto;padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
.skip{position:absolute;left:12px;top:-60px;z-index:20;background:var(--primary);color:var(--on-primary);padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tnum{font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- buttons */
.btn{font:inherit;display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;cursor:pointer;
 text-decoration:none;white-space:nowrap;border:1px solid transparent;min-height:44px;
 transition:transform 160ms var(--ease-out-3),background-color 160ms var(--ease-out-3),border-color 160ms var(--ease-out-3)}
.btn:active{transform:scale(.97)}
.btn-p{background:var(--primary);color:var(--on-primary);font-weight:600;height:52px;padding:0 28px;font-size:17px}
.btn-g{background:var(--surface);color:var(--ink);border-color:var(--line);font-weight:500;height:52px;padding:0 24px;font-size:17px}
.btn-sm{height:44px;padding:0 18px;font-size:15px}
.btn-q{background:transparent;color:var(--ink);font-weight:500;height:44px;padding:0 14px;font-size:16px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.tl{color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:var(--primary);
 display:inline-flex;align-items:center;gap:8px;min-height:44px}
@media (hover:hover){
 .btn-p:hover{background:color-mix(in srgb,var(--primary) 88%,var(--ink))}
 .btn-g:hover{border-color:var(--line-strong);background:var(--hover)}
 .btn-q:hover{background:var(--hover)}
 .tl:hover{color:var(--primary)}
}

/* ---------------------------------------------------------------- header (sticky; state change after the first 8 px) */
.site-h{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--bg);border-bottom:1px solid transparent;
 transition:background-color 220ms var(--ease-out-3),border-color 220ms var(--ease-out-3)}
.site-h.is-scrolled{background:var(--glass);border-bottom-color:var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.site-h .wrap{display:flex;align-items:center;gap:16px;height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:16px;text-decoration:none;min-height:44px;flex:none}
.lockup{height:28px;width:auto;display:block}
.lk-c{stroke:var(--primary)}.lk-d{fill:var(--accent)}.lk-t{fill:var(--ink)}
.desc{font-size:14px;line-height:1.3;color:var(--muted);padding-left:16px;border-left:1px solid var(--line);max-width:160px}
.nav{display:flex;gap:2px;margin-left:auto}
.nav a{white-space:nowrap;font-size:16px;font-weight:500;text-decoration:none;padding:0 12px;min-height:44px;display:flex;align-items:center;border-radius:999px;
 transition:background-color 160ms var(--ease-out-3)}
.nav a[aria-current="page"]{color:var(--primary);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
.h-tools{display:flex;align-items:center;gap:8px}
.lang{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;border:1px solid var(--line);
 background:var(--surface);color:var(--ink);font-size:14px;font-weight:600;text-decoration:none;transition:transform 160ms var(--ease-out-3),border-color 160ms var(--ease-out-3)}
.lang:active{transform:scale(.97)}
.menu{display:none;position:relative}
.menu summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;border:1px solid var(--line);cursor:pointer;color:var(--ink);background:var(--surface)}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{background:var(--hover)}
.menu-panel{position:absolute;right:0;top:52px;width:min(320px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
 box-shadow:var(--shadow);padding:8px;display:flex;flex-direction:column}
.menu-panel a{display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:10px;text-decoration:none;font-weight:500}
.menu-panel a[aria-current="page"]{color:var(--primary)}
.menu-panel .btn{margin-top:8px}
@media (hover:hover){.nav a:hover,.menu-panel a:hover{background:var(--hover)}.lang:hover,.menu summary:hover{border-color:var(--line-strong)}}
@media (max-width:1300px){.site-h .desc{display:none}}
@media (max-width:1160px){.nav,.hcta{display:none}.menu{display:block}.h-tools{margin-left:auto}}
/* the French nav is longer: no descriptor, and the nav folds into the menu sooner */
.site-h:lang(fr) .desc{display:none}
@media (max-width:1260px){.site-h:lang(fr) .nav,.site-h:lang(fr) .hcta{display:none}.site-h:lang(fr) .menu{display:block}.site-h:lang(fr) .h-tools{margin-left:auto}}
@media (max-width:860px){:root{--nav-h:68px}.site-h .wrap{gap:12px}}
@media (max-width:600px){:root{--gut:16px}.lockup{height:24px}}

/* ---------------------------------------------------------------- footer */
.site-f{border-top:1px solid var(--line);margin-top:120px;padding-block:48px 56px;background:var(--bg)}
.f-top{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr));gap:32px}
.f-brand{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.f-brand .desc{border:0;padding:0;max-width:240px}
.f-mail{font-size:15px;color:var(--muted)}
.f-mail a{color:var(--ink);display:inline-flex;min-height:44px;align-items:center}
.f-col h2{font-size:15px;line-height:1.4;font-weight:600;margin:0 0 6px}
.f-col ul{list-style:none;margin:0;padding:0}
.f-col a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;color:var(--muted);text-decoration:none}
@media (hover:hover){.f-col a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}}
.legal{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;line-height:1.55;color:var(--muted);max-width:780px}
@media (max-width:860px){.f-top{grid-template-columns:1fr 1fr}.f-brand{grid-column:1/-1}}
@media (max-width:420px){.f-top{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- correction marks: shape + word, never colour alone */
.mk{border-radius:4px}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;
 font-size:12px;font-weight:600;line-height:1;color:var(--on-badge);vertical-align:3px;margin-right:4px;font-style:normal}
.err .badge,.badge.b-err{background:var(--error)}.hint .badge,.badge.b-hint{background:var(--hint)}.str .badge,.badge.b-str{background:var(--strength)}
.err s,.mc.err s{color:var(--error);text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--error)}
.err ins,.fixed{text-decoration:none;color:var(--fix);font-weight:600;background:var(--fix-tint);padding:1px 1px 1px 5px;border-radius:4px;margin-left:3px;
 -webkit-box-decoration-break:clone;box-decoration-break:clone}
.hint .dots,.dots{text-decoration:underline dotted var(--hint);text-decoration-thickness:2px;text-underline-offset:5px}
.q{color:var(--hint);vertical-align:-2px;margin-left:3px}
.str .lbl{display:block;margin:4px 0 8px;color:var(--strength);font-size:.75em;line-height:1.5;font-weight:500}
.nw{white-space:nowrap}
.str .lbl .ic{vertical-align:-3px;margin-right:4px}
.crit{display:inline-flex;align-items:center;height:26px;padding:0 10px;border:1px solid var(--line);border-radius:6px;font-size:13px;color:var(--muted);font-weight:500}
/* entrance: each mark fades in from a tint, 60 ms apart in reading order (Markup motion C); finished without motion */
@media (prefers-reduced-motion:no-preference){
 .marking .mk{animation:markIn 320ms var(--ease-out-4) backwards;animation-delay:240ms}
 .marking .mk.d2{animation-delay:300ms}.marking .mk.d3{animation-delay:360ms}.marking .mk.d4{animation-delay:420ms}.marking .mk.d5{animation-delay:480ms}
 @keyframes markIn{from{opacity:0;background-color:var(--fix-tint)}}
}

/* mark card: one mark with its criterion and reason */
.mc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:16px 18px;list-style:none}
.mc-h{display:flex;align-items:center;gap:8px}
.mc-h .badge{margin:0}
.mc-q{margin:10px 0 4px;font-size:17px;line-height:1.5}
.mc-q ins{margin-left:6px}
.mc-r{font-size:15px;line-height:1.55;color:var(--muted)}
.mc-s{color:var(--strength);font-weight:500;font-size:15px;line-height:1.55}
.mc-s .ic{margin-right:6px;vertical-align:-3px}
.reveal{margin-top:12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.better{font-size:17px}
.better ins{margin-left:0}
.mlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}

/* level card: an estimate shown as a range of meaning, never a dot */
.lvl{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:18px 20px}
.lvl-k{font-size:14px;color:var(--muted);font-weight:500}
.lvl-v{font-size:34px;line-height:1.1;font-weight:600;margin:4px 0 6px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.lvl-n{font-size:13px;line-height:1.45;color:var(--muted)}

/* word counter: zones with words, the needle is the count */
.wc-n{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.wc-bar{display:block;width:100%;height:22px;margin:8px 0 10px;overflow:visible}
.wc-bar .z-out{fill:var(--band);stroke:var(--line);stroke-width:1}
.wc-bar .z-out-h{stroke:var(--line);stroke-width:1.5}
.wc-bar .z-in{fill:var(--fix-tint);stroke:var(--fix);stroke-width:1}
.wc-bar .needle{fill:var(--ink)}
.wc-zones{list-style:none;margin:0;padding:0;display:flex;gap:6px 20px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.wc-zones .zi{color:var(--fix);font-weight:500}
.wc-zones .ic{vertical-align:-3px;margin-right:4px}
.wc-warn{margin-top:10px;font-size:14px;color:var(--muted)}

/* ---------------------------------------------------------------- tool panel frame (calculators, checkers, the writing box) */
.tool{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-soft)}
.tool-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 22px;border-bottom:1px solid var(--line)}
.tool-t{font-size:15px;font-weight:600;display:flex;align-items:center;gap:10px}
.tool-t .ic{color:var(--primary)}
.tool-m{flex:none;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.tool-b{padding:20px 22px;overflow-x:auto}
.tool-f{padding:14px 22px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:15px;font-weight:500}
.field input,.field select,.field textarea{font:inherit;font-size:17px;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-input);
 min-height:48px;padding:10px 14px}
.field textarea{min-height:220px;line-height:1.7;resize:vertical}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--primary);outline-offset:1px;border-color:var(--primary)}
.field .help{font-size:14px;color:var(--muted)}
.field [aria-invalid="true"]{border-color:var(--error)}
.field .err-msg{font-size:14px;color:var(--error)}
.wbox{font-size:16px;line-height:1.7;padding:12px 14px;border:1px solid var(--line-strong);border-radius:var(--r-input);background:var(--bg);margin-bottom:16px}
.check-row{display:flex;align-items:center;gap:8px;font-size:15px;margin-top:14px}
.check-row .ic{color:var(--fix)}
.res{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums}
.res th,.res td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line)}
.res thead th{font-size:13px;color:var(--muted);font-weight:500}
.res tbody th{font-weight:500}
.res td.num,.res th.num{text-align:right}
.res tbody tr:last-child td,.res tbody tr:last-child th{border-bottom:0}
.res .gap{color:var(--muted)}
.res .ok{color:var(--fix);font-weight:600;white-space:nowrap}
.res thead th{white-space:nowrap}
@media (max-width:600px){.res{font-size:14px}.res th,.res td{padding:9px 5px}.tool-h,.tool-b{padding-left:16px;padding-right:16px}}
.res .lv{font-weight:600}

/* ---------------------------------------------------------------- sections */
.sec{padding-top:120px}
.sec-head{max-width:760px;margin-bottom:40px}
.sec-h{font-size:40px;line-height:1.12;font-weight:600;letter-spacing:-.02em}
.lede{font-size:19px;line-height:1.55;color:var(--muted);margin-top:14px;max-width:62ch}
.sec-c{text-align:center}.sec-c .sec-head{margin-left:auto;margin-right:auto}.sec-c .lede{margin-left:auto;margin-right:auto}
@media (max-width:860px){.sec{padding-top:80px}.sec-h{font-size:30px;line-height:1.15}.lede{font-size:17px}.sec-head{margin-bottom:28px}}

/* feature boxes (Speak's method boxes, rebuilt on Markup's radius): text left, a real product view right; stack on scroll */
.deck{position:relative;display:flex;flex-direction:column;gap:28px}
.feat{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;background:var(--surface);
 border:1px solid var(--line);border-radius:28px;padding:40px 56px;box-shadow:var(--shadow-soft);transform-origin:50% 0}
.feat h3{font-size:32px;line-height:1.15;font-weight:600;letter-spacing:-.015em}
.feat p{margin-top:14px;font-size:17px;line-height:1.6;color:var(--muted);max-width:46ch}
.feat .tl{margin-top:18px}
.feat-v{background:var(--field);border-radius:20px;padding:22px;min-height:360px;display:flex;flex-direction:column;justify-content:center;
 background-image:repeating-linear-gradient(to bottom,transparent 0 39px,var(--rule) 39px 40px)}
.feat-v .mc{padding:12px 16px}.feat-v .mc-q{margin-top:6px}.feat-v .reveal{margin-top:8px}
.feat::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:var(--bg);opacity:var(--cover,0)}
@media (min-width:1081px){
 .deck.stack .feat{position:sticky;top:calc(var(--nav-h) + 24px + var(--i,0) * 10px)}
}
@media (max-width:1080px){.feat{grid-template-columns:minmax(0,1fr);gap:28px;padding:32px}.feat-v{min-height:0}}
@media (max-width:600px){.feat{padding:22px 18px;border-radius:20px}.feat h3{font-size:24px}.feat-v{padding:16px 12px;border-radius:14px}}
@media (prefers-reduced-motion:reduce){.deck .feat{transform:none!important}.feat-v .mc{padding:12px 16px}.feat-v .mc-q{margin-top:6px}.feat-v .reveal{margin-top:8px}
.feat::after{opacity:0!important}}

/* numbered steps: only for real sequences */
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:28px;counter-reset:st}
.steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;counter-increment:st}
.steps li::before{content:counter(st);display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;
 background:var(--fix-tint);color:var(--fix);font-weight:600;font-size:17px}
.steps h3{font-size:22px;line-height:1.3;font-weight:600}
.steps p{margin-top:6px;font-size:17px;color:var(--muted);max-width:52ch}

/* two columns: a visual and its text */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}
.split.rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.split.even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:960px){.split,.split.rev,.split.even{grid-template-columns:1fr;gap:36px}}

/* spot drawing: a small line drawing on a paper ground, accents only */
.spot{display:block;background:var(--paper);border-radius:12px;padding:16px;width:100%;height:auto;aspect-ratio:1}
.spot-frame{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-frame);padding:16px;max-width:420px}

/* a real document shown as evidence (a table copied from an official source) */
.doc{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.doc-h{padding:16px 20px;border-bottom:1px solid var(--line);font-size:15px;font-weight:600;display:flex;gap:10px;align-items:center}
.doc-h .ic{color:var(--primary)}
.doc .scroll{overflow-x:auto}
.doc table{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums}
.doc th,.doc td{padding:10px 14px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
.doc th:first-child,.doc td:first-child{text-align:left}
.doc thead th{font-size:13px;color:var(--muted);font-weight:500}
.doc tbody tr:last-child td{border-bottom:0}
.doc tr.hl td{background:var(--fix-tint);color:var(--ink);font-weight:600}

/* facts list (trust): a term, then its plain explanation */
.facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:26px}
.facts h3{font-size:20px;line-height:1.35;font-weight:600;display:flex;gap:10px;align-items:center}
.facts h3 .ic{color:var(--primary)}
.facts p{margin-top:6px;font-size:17px;color:var(--muted);max-width:56ch}
.facts .tl{margin-top:6px}

/* page directory: every tool and guide, with its language */
.dir{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.dir a{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 16px;align-items:center;text-decoration:none;padding:18px 20px;
 background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);min-height:88px;
 transition:background-color 160ms var(--ease-out-3),transform 160ms var(--ease-out-3)}
.dir a:active{transform:scale(.99)}
.dir .di{grid-row:1/3;width:44px;height:44px;border-radius:12px;background:var(--fix-tint);color:var(--fix);display:flex;align-items:center;justify-content:center}
.dir .dt{font-size:18px;font-weight:600;line-height:1.3}
.dir .dd{font-size:15px;color:var(--muted);line-height:1.45}
.dir .dl{font-weight:500;color:var(--ink)}
@media (hover:hover){.dir a:hover{background:var(--hover)}}
@media (max-width:760px){.dir{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- hero: the product over a real photo */
.hero{padding-top:40px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) 545px;gap:72px;align-items:center}
.h1{font-size:56px;line-height:1.1;font-weight:600;letter-spacing:-.03em;max-width:620px}
.h1 .k{display:block;color:var(--primary)}
@media (min-width:1181px){.h1:lang(fr){font-size:50px}}
.sub{font-size:19px;line-height:1.55;color:var(--muted);margin-top:22px;max-width:500px}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px;align-items:center}
.risk{font-size:15px;color:var(--muted);margin-top:14px;display:flex;align-items:center;gap:8px}
.risk .ic{color:var(--fix)}
.proof{list-style:none;margin:32px 0 0;padding:0;display:flex;flex-direction:column;gap:12px;max-width:560px}
.proof li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.5}
.proof li span{text-wrap:pretty}
.proof .ic{color:var(--primary);margin-top:1px}

/* hero frame: a photo (or Markup's ruled field until the photo lands) with the product cards over it (Speak's frame, Preply's overlap) */
/* desktop: the level card heads the frame and the marked-text card closes it, in one flex column, so a taller card or a
   longer French label pushes the frame taller instead of sliding one card over the other (at least 20 px between them); the French frame stays under 660 px tall so the photo keeps 2x pixels */
.hf{position:relative;min-height:640px;display:flex;flex-direction:column;justify-content:space-between;gap:20px;padding-block:28px}
.hf-pic{position:absolute;inset:0;border-radius:var(--r-frame);border:1px solid var(--line);overflow:hidden;overflow:clip;background:var(--field);
 background-image:repeating-linear-gradient(to bottom,transparent 0 39px,var(--rule) 39px 40px)}
.hf-pic .photo{position:absolute;inset:-6% 0 0 0;width:100%;height:106%;object-fit:cover;will-change:transform}
.hf-pic .spot-in{position:absolute;left:50%;top:44px;width:300px;transform:translateX(-50%);border:1px solid var(--line);border-radius:16px;padding:10px;background:var(--paper)}
.hf-card{position:relative;align-self:flex-start;margin-left:-64px;width:460px;z-index:2}
/* until the photo lands: Markup's ruled field, the card centred in it as on the brand stills */
.no-photo{display:none}
@media (min-width:1081px){.hf:has(.no-photo){justify-content:flex-start}.hf:has(.no-photo) .hf-card{align-self:stretch;margin:124px 40px 0;width:auto}}
.hf-level{position:relative;align-self:flex-end;margin-right:-28px;width:256px;z-index:2;box-shadow:var(--shadow)}
.win{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);padding:20px 24px 22px}
.win-h{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--muted);font-weight:500;padding-bottom:12px;border-bottom:1px solid var(--line)}
.win-t{font-size:20px;line-height:1.75;margin-top:14px}
.pop{margin-top:12px;padding:12px 14px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}
.pop-r{margin-top:8px;font-size:15px;line-height:1.5}
@supports (animation-timeline:scroll()){
 @media (prefers-reduced-motion:no-preference) and (min-width:1081px){
  .hf-pic .photo{animation:drift auto linear both;animation-timeline:scroll(root);animation-range:0 100vh}
  .hf-level{animation:lift auto linear both;animation-timeline:scroll(root);animation-range:0 100vh}
 }
 @keyframes drift{to{transform:translateY(6%)}}
 @keyframes lift{to{transform:translateY(-40px)}}
}
@media (max-width:1180px){.hero .wrap{grid-template-columns:minmax(0,1fr) 470px;gap:56px}.h1{font-size:48px}.hf-card{margin-left:-40px;width:420px}.hf-level{margin-right:-12px}}
@media (max-width:1080px){
 .hero{padding-top:12px}
 .hero .wrap{display:flex;flex-direction:column;align-items:stretch;gap:0;text-align:center}
 .copy,.ctas{display:contents}
 .h1{order:1;font-size:36px;line-height:1.1;margin:0 auto}
 .sub{order:2;font-size:17px;margin:14px auto 0}
 .ctas .btn-p{order:3;margin:22px auto 0;width:100%;max-width:420px}
 .hf{order:4;margin:24px auto 0;min-height:0;padding-block:0;gap:0;width:100%;max-width:560px;text-align:left}
 .risk{order:5;justify-content:center;margin-top:16px}
 .ctas .btn-g{order:6;margin:16px auto 0;width:100%;max-width:420px}
 .proof{order:7;margin:28px auto 0;text-align:left}
 .hf-pic{position:relative;inset:auto;aspect-ratio:4/3}
 .hf-pic .spot-in{width:160px;top:20px;padding:6px}
 .hf-card{align-self:stretch;width:auto;margin:-104px 12px 0}
 .hf{display:flex;flex-direction:column}
 .hf-pic{order:1}.hf-card{order:2}
 .hf-level{order:3;align-self:stretch;width:auto;margin:16px 12px 0;padding:12px 16px;box-shadow:none;
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:center}
 .hf-level .lvl-k{grid-column:1/-1;font-size:13px}
 .hf-level .lvl-v{font-size:24px;margin:0}
 .hf-level .lvl-n{font-size:12px}
 .win{padding:14px 16px 16px}
 .win-t{font-size:17px;line-height:1.7;margin-top:10px}
}
@media (max-width:1080px){.hf:has(.no-photo) .hf-pic{aspect-ratio:auto;height:96px}.hf:has(.no-photo) .hf-card{margin-top:-64px}}
@media (max-width:600px){
 .h1{font-size:34px;line-height:1.08}
 .win-h span+span{display:none}
 /* phone: the excerpt keeps one mark and its one-line reason; the strength label waits for the full essay */
 .win .str{display:none}
 .hero .btn{white-space:normal;height:auto;min-height:52px;padding-block:12px;text-align:center;line-height:1.3}
 .pop{margin-top:10px;padding:10px 12px}
 .pop-r{font-size:14px;margin-top:6px}
 /* phone: the product first, so the whole marked-text card and its level fit the first screen; the photo follows */
 .hf-card{order:1;margin:0}
 .hf-level{order:2;margin:16px 0 0;display:flex;align-items:center;gap:14px}
 .hf-level .lvl-k{display:none}
 .hf-pic{order:3;aspect-ratio:5/4;margin-top:12px}
 .hf:has(.no-photo) .hf-pic{display:none}
 .hf:has(.no-photo) .hf-card{margin-top:0}
}

/* ---------------------------------------------------------------- guide pages: breadcrumb header and prose */
.crumbs{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;font-size:15px;color:var(--muted)}
.crumbs li+li::before{content:"/";margin:0 10px}
.crumbs a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.crumbs [aria-current]{display:inline-flex;align-items:center;min-height:44px;color:var(--ink)}
@media (hover:hover){.crumbs a:hover{text-decoration:underline}}
.gh{padding-top:32px}
.gh h1{font-size:46px;line-height:1.1;font-weight:600;letter-spacing:-.02em;max-width:860px}
.gh .intro{font-size:20px;line-height:1.6;margin-top:20px;max-width:680px}
.gh .ctas{margin-top:28px}
@media (max-width:860px){.gh{padding-top:4px}.gh h1{font-size:32px}.gh .intro{font-size:18px;margin-top:14px}}
.prose{max-width:720px}
.prose>*+*{margin-top:18px}
.prose h2{font-size:32px;line-height:1.2;font-weight:600;letter-spacing:-.015em;margin-top:64px}
.prose h3{font-size:22px;line-height:1.3;font-weight:600;margin-top:36px}
.prose ul,.prose ol{padding-left:1.25em}
.prose li+li{margin-top:8px}
.prose a{text-decoration-thickness:1px;text-underline-offset:3px}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface)}
.tbl table{width:100%;border-collapse:collapse;font-size:16px;font-variant-numeric:tabular-nums}
.tbl caption{text-align:left;padding:14px 18px;font-weight:600;font-size:15px;border-bottom:1px solid var(--line)}
.tbl th,.tbl td{padding:12px 18px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl thead th{font-size:14px;color:var(--muted);font-weight:500}
.tbl tbody tr:last-child td{border-bottom:0}

/* ---------------------------------------------------------------- sources fold: one quiet fold at the end of main */
.src{margin-top:96px;border-top:1px solid var(--line);padding-top:8px}
.src summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;min-height:48px;font-size:15px;font-weight:600;color:var(--muted)}
.src summary::-webkit-details-marker{display:none}
.src summary .ic{transition:transform 200ms var(--ease-out-3)}
.src[open] summary .ic{transform:rotate(180deg)}
.src ol{margin:8px 0 0;padding-left:1.25em;font-size:15px;line-height:1.55;color:var(--muted);columns:2;column-gap:48px}
.src li{break-inside:avoid}
.src a{color:var(--ink);text-underline-offset:3px;overflow-wrap:anywhere;display:inline-flex;align-items:center;min-height:44px;padding-block:4px}
@media (max-width:760px){.src ol{columns:1}}

/* ---------------------------------------------------------------- 404: short copy left, the 3 main tools right
   (Babbel's two-column 404, Stripe's tool cards; one language shown, picked from the address by not-found's page.js) */
.nf{padding-top:72px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:start}
.nf h1{font-size:44px;line-height:1.1;font-weight:600;letter-spacing:-.02em}
.nf-c p{margin-top:16px;font-size:18px;color:var(--muted);max-width:46ch}
.nf .ctas{margin-top:28px}
.nf-alt{margin-top:28px;font-size:16px;color:var(--muted)}
.nf-tools h2{font-size:22px;line-height:1.3;font-weight:600;margin:0 0 16px}
.nf .dir{grid-template-columns:1fr}
@media (max-width:960px){.nf{grid-template-columns:1fr;gap:48px;padding-top:32px}.nf h1{font-size:34px}}

/* one quiet source line under a tool page's h1 */
.src-note{margin-top:22px;font-size:15px;line-height:1.5;color:var(--muted);display:flex;align-items:flex-start;gap:8px}
.src-note>span{min-width:0}
.src-note .ic{color:var(--primary);margin-top:2px}
/* inline, so a wrapped line reads as one sentence; the vertical padding gives the link a 44 px tap height */
.src-note a{color:var(--ink);text-decoration-color:var(--primary);text-underline-offset:4px;padding-block:11px}
@media (hover:hover){.src-note a:hover{color:var(--primary)}}

@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;transition-duration:120ms!important}
 html{scroll-behavior:auto}
}

/* photo focus points, from web/assets/photos/photos.json */
.ph-home-hero{object-position:62% 50%}
.ph-nclc{object-position:38% 70%}
.ph-which-test{object-position:25% 50%}
.ph-about-hero{object-position:50% 50%}
.ph-oral-hero{object-position:70% 50%}
.ph-prepare-week{object-position:30% 50%}