@font-face{font-family:'Figtree';src:url('/fonts/Figtree-Variable.woff2') format('woff2');font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:'Figtree';src:url('/fonts/Figtree-Italic-Variable.woff2') format('woff2');font-weight:300 900;font-style:italic;font-display:swap}
@font-face{font-family:'DM Serif Display';src:url('/fonts/DMSerifDisplay-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Serif Display';src:url('/fonts/DMSerifDisplay-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
:root {
  --oq-blue-50: #F3F7FE;
  --oq-blue-100: #E1ECFE;
  --oq-blue-200: #BFD5FA;
  --oq-blue-300: #98B8EF;
  --oq-blue-400: #6D98E1;
  --oq-blue-500: #4778CD;
  --oq-blue-600: #2B5CB3;
  --oq-blue-700: #0B3D91;
  --oq-blue-800: #04317D;
  --oq-blue-900: #00205D;
  --oq-blue-950: #00123B;
  --oq-coral-50: #FEF4F3;
  --oq-coral-100: #FEE7E3;
  --oq-coral-200: #FFCDC6;
  --oq-coral-300: #FEABA0;
  --oq-coral-400: #FF8578;
  --oq-coral-500: #FF5A4E;
  --oq-coral-600: #D44037;
  --oq-coral-700: #AE322B;
  --oq-coral-800: #8A2922;
  --oq-coral-900: #671E19;
  --oq-coral-950: #430F0C;
  --oq-neutral-50: #F8F6F1;
  --oq-neutral-100: #EEEBE5;
  --oq-neutral-200: #D7D4CE;
  --oq-neutral-300: #BAB7B2;
  --oq-neutral-400: #9C9890;
  --oq-neutral-500: #7E7A72;
  --oq-neutral-600: #636059;
  --oq-neutral-700: #4D4A43;
  --oq-neutral-800: #3B3831;
  --oq-neutral-900: #292620;
  --oq-neutral-950: #191610;
  --oq-surface-default: var(--oq-neutral-50);
  --oq-surface-raised: #FFFFFF;
  --oq-surface-sunken: var(--oq-neutral-100);
  --oq-surface-brand: var(--oq-blue-700);
  --oq-surface-inverse: var(--oq-blue-950);
  --oq-text-primary: var(--oq-blue-950);
  --oq-text-secondary: var(--oq-neutral-700);
  --oq-text-tertiary: var(--oq-neutral-600);
  --oq-text-brand: var(--oq-blue-700);
  --oq-text-on-brand: var(--oq-neutral-50);
  --oq-text-accent-on-light: var(--oq-coral-700);
  --oq-text-accent-on-dark: var(--oq-coral-400);
  --oq-text-textbook: var(--oq-neutral-600);
  --oq-accent-mark: var(--oq-coral-500);
  --oq-border-subtle: var(--oq-neutral-200);
  --oq-border-default: var(--oq-neutral-300);
  --oq-border-strong: var(--oq-blue-700);
  --oq-border-focus: var(--oq-blue-500);
  --oq-register-standard-bg: transparent;
  --oq-register-standard-border: var(--oq-neutral-400);
  --oq-register-standard-text: var(--oq-neutral-700);
  --oq-register-familier-bg: var(--oq-blue-100);
  --oq-register-familier-text: var(--oq-blue-800);
  --oq-register-tres-familier-bg: var(--oq-blue-700);
  --oq-register-tres-familier-text: var(--oq-neutral-50);
  --oq-space-0: 0px;
  --oq-space-1: 4px;
  --oq-space-2: 8px;
  --oq-space-3: 12px;
  --oq-space-4: 16px;
  --oq-space-5: 24px;
  --oq-space-6: 32px;
  --oq-space-7: 48px;
  --oq-space-8: 64px;
  --oq-space-9: 96px;
  --oq-space-10: 128px;
  --oq-space-11: 192px;
  --oq-radius-sm: 4px;
  --oq-radius-md: 8px;
  --oq-radius-lg: 16px;
  --oq-radius-xl: 24px;
  --oq-radius-pill: 999px;
  --oq-font-display: 'DM Serif Display', Georgia, serif;
  --oq-font-text: 'Figtree', 'Helvetica Neue', Arial, sans-serif;
  --oq-type-display-xl: italic 400 61px/1.05 var(--oq-font-display);
  --oq-type-display-xl-tracking: -0.01em;
  --oq-type-display-lg: italic 400 49px/1.1 var(--oq-font-display);
  --oq-type-display-lg-tracking: -0.01em;
  --oq-type-heading-1: normal 800 39px/1.15 var(--oq-font-text);
  --oq-type-heading-1-tracking: -0.015em;
  --oq-type-heading-2: normal 700 31px/1.2 var(--oq-font-text);
  --oq-type-heading-2-tracking: -0.01em;
  --oq-type-heading-3: normal 700 25px/1.25 var(--oq-font-text);
  --oq-type-title: normal 600 20px/1.3 var(--oq-font-text);
  --oq-type-body: normal 400 16px/1.55 var(--oq-font-text);
  --oq-type-body-sm: normal 400 14px/1.5 var(--oq-font-text);
  --oq-type-label: normal 700 12px/1.3 var(--oq-font-text);
  --oq-type-label-tracking: 0.06em;
  --oq-type-phrase-inline: italic 400 1.15em/1.3 var(--oq-font-display);
  --oq-duration-fast: 120ms; /* @kind other */
  --oq-duration-base: 200ms; /* @kind other */
  --oq-duration-slow: 320ms; /* @kind other */
  --oq-duration-scene: 600ms; /* @kind other */
  --oq-ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --oq-ease-accent-drop: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  /* 1.9.0 autumn scene roles: scene art only, never text or the highlight */
  --oq-autumn-amber-day: #9C6F2B;
  --oq-autumn-amber-night: #D9A85A;
  --oq-autumn-ochre-day: #8C6631;
  --oq-autumn-ochre-night: #B58A4E;
  --oq-autumn-rust-day: #8A4733;
  --oq-autumn-rust-night: #BC7458;
  /* 1.11.0 figure skin roles: heads and hands of figures only, never text or the highlight */
  --oq-skin-day: #EEC6A3;
  --oq-skin-night: #D6A983;
  --oq-skin-line-day: #C08661;
  --oq-skin-line-night: #A3714F;
}

/* Overheard in Québec site styles. Ported from the 2026-10-19 Claude Design
   prototype. The design-system tokens (fonts, --oq-* variables) are prepended
   by the build. Themes set the page variables below. */

[data-theme="light"] {
  --bg:#F8F6F1; --surface:#FFFFFF; --sunken:#EEEBE5; --ink:#00123B; --muted:#4D4A43; --soft:#636059; --line:#D7D4CE;
  --control:#7E7A72; --btn:#0B3D91; --btnHover:#04317D; --btnInk:#F8F6F1; --link:#0B3D91; --fr:#0B3D91; --accent:#FF5A4E;
  --accentText:#AE322B; --chip:#E1ECFE; --chipInk:#04317D; --panel:#0B3D91; --panelInk:#F8F6F1; --panelMuted:#E1ECFE;
  --panelBtn:#F8F6F1; --panelBtnInk:#0B3D91; --focus:#4778CD; --hw:1px; --track:#D7D4CE; --skel:#EEEBE5;
}
[data-theme="dark"] {
  --bg:#00123B; --surface:#00205D; --sunken:#001A4D; --ink:#F8F6F1; --muted:#BFD5FA; --soft:#98B8EF; --line:#04317D;
  --control:#6D98E1; --btn:#F8F6F1; --btnHover:#E1ECFE; --btnInk:#0B3D91; --link:#98B8EF; --fr:#F8F6F1; --accent:#FF5A4E;
  --accentText:#FF8578; --chip:#04317D; --chipInk:#E1ECFE; --panel:#0B3D91; --panelInk:#F8F6F1; --panelMuted:#E1ECFE;
  --panelBtn:#F8F6F1; --panelBtnInk:#0B3D91; --focus:#6D98E1; --hw:1px; --track:#04317D; --skel:#04317D;
  --oq-register-standard-text:#E1ECFE; --oq-register-standard-border:#6D98E1; --oq-surface-raised:#00205D; --oq-border-subtle:#04317D;
}
[data-theme="contrast"] {
  --bg:#F8F6F1; --surface:#FFFFFF; --sunken:#FFFFFF; --ink:#00123B; --muted:#00123B; --soft:#191610; --line:#00123B;
  --control:#00123B; --btn:#00123B; --btnHover:#0B3D91; --btnInk:#F8F6F1; --link:#00205D; --fr:#00205D; --accent:#FF5A4E;
  --accentText:#8A2922; --chip:#FFFFFF; --chipInk:#00123B; --panel:#00123B; --panelInk:#F8F6F1; --panelMuted:#F8F6F1;
  --panelBtn:#F8F6F1; --panelBtnInk:#00123B; --focus:#0B3D91; --hw:2px; --track:#BAB7B2; --skel:#D7D4CE;
  --oq-register-standard-text:#00123B; --oq-register-standard-border:#00123B; --oq-register-familier-text:#00123B; --oq-border-subtle:#00123B;
}

/* Base */
html, body { margin:0; padding:0; -webkit-text-size-adjust:100%; }
html { background:var(--bg); }
body { min-height:100vh; background:var(--bg); color:var(--ink); font:normal 400 16px/1.55 var(--oq-font-text); overflow-x:hidden; }
*, *::before, *::after { box-sizing:border-box; }
a { color:var(--link); }
a:hover { color:var(--btnHover); }
:focus-visible { outline:2px solid var(--focus); outline-offset:2px; border-radius:4px; }
button { font-family:inherit; }
img { max-width:100%; }
h1, h2, h3, p { overflow-wrap:break-word; }
.visually-hidden { position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
@keyframes oqRise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:1ms !important; animation-iteration-count:1 !important; transition-duration:1ms !important; }
}

.wrap { max-width:1248px; margin:0 auto; padding-left:clamp(16px,4vw,48px); padding-right:clamp(16px,4vw,48px); }
.main { padding-top:clamp(24px,4vw,56px); padding-bottom:96px; outline:none; }
[data-chrome="full"] .main { padding-bottom:96px; }

/* Theme-dependent logos */
.logo-on-dark { display:none; }
[data-theme="dark"] .logo-on-dark { display:block; }
[data-theme="dark"] .logo-on-light { display:none; }

/* Wide and narrow variants of the header */
.narrow-only { display:none !important; }
@media (max-width: 959px) {
  .wide-only { display:none !important; }
  .narrow-only { display:flex !important; }
  [data-chrome="full"] .main { padding-bottom:96px; }
}

/* Skip link */
.skip { position:absolute; left:8px; top:-60px; z-index:50; padding:12px 16px; background:var(--btn); color:var(--btnInk); border-radius:8px; font-weight:700; text-decoration:none; }
.skip:focus { top:8px; }

/* Header */
.site-header { position:sticky; top:0; z-index:20; background:var(--bg); border-bottom:var(--hw) solid var(--line); }
.header-row { height:72px; display:flex; align-items:center; gap:24px; }
.logo { display:flex; flex:none; }
.logo img { height:56px; width:auto; }
.topnav { display:flex; gap:4px; flex:1; }
.topnav-link { display:flex; align-items:center; height:72px; padding:0 12px; color:var(--ink); text-decoration:none; font:normal 600 16px/1 var(--oq-font-text); border-bottom:3px solid transparent; border-top:3px solid transparent; white-space:nowrap; }
.topnav-link:hover { color:var(--ink); border-bottom-color:var(--control); }
.topnav-link[aria-current="page"] { border-bottom-color:var(--link); }
.header-search { display:flex; align-items:center; gap:8px; min-height:44px; padding:0 8px 0 16px; border-radius:8px; border:var(--hw) solid var(--control); background:var(--surface); flex:0 1 240px; min-width:150px; }
.header-search:focus-within { border-color:var(--link); }
.header-search input { flex:1; min-width:0; border:0; background:transparent; color:var(--ink); font:normal 500 16px/1 var(--oq-font-text); padding:10px 0; outline:none; }
.header-search input::placeholder { color:var(--muted); }
.header-search kbd { font:normal 700 13px/1 var(--oq-font-text); padding:6px 9px; border-radius:4px; background:var(--sunken); color:var(--ink); border:var(--hw) solid var(--line); }
.header-progress, .header-lang { display:flex; align-items:center; min-height:44px; padding:0 4px; color:var(--ink); font:normal 600 16px/1 var(--oq-font-text); text-decoration:none; border-bottom:3px solid transparent; white-space:nowrap; }
.header-progress[aria-current="page"] { border-bottom-color:var(--link); }
.header-lang:hover, .header-progress:hover { color:var(--ink); border-bottom-color:var(--control); }
.header-spacer { flex:1; }
.header-search-button { align-items:center; min-height:44px; padding:0 16px; border-radius:8px; border:var(--hw) solid var(--control); background:var(--surface); color:var(--ink); font:normal 700 15px/1 var(--oq-font-text); text-decoration:none; }
@media (max-width: 959px) {
  .header-row { gap:12px; }
  .logo img { height:44px; }
  .header-lang.narrow-only { min-width:44px; justify-content:center; font-weight:700; }
}

/* Focus pages (quiz, games): exit link instead of the tab bar */
.exit { display:inline-flex; align-items:center; min-height:44px; margin-bottom:8px; color:var(--link); font-weight:700; }

/* Footer */
.site-footer { border-top:var(--hw) solid var(--line); background:var(--sunken); }
.footer-inner { padding-top:28px; padding-bottom:24px; display:flex; flex-direction:column; gap:16px; }
[data-chrome="full"] .footer-inner { padding-bottom:24px; }
@media (max-width: 959px) { [data-chrome="full"] .footer-inner { padding-bottom:96px; } }
.footer-top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 32px; }
.footer-brand { display:flex; align-items:center; gap:8px 20px; flex-wrap:wrap; }
.footer-brand img { height:44px; width:auto; }
.tagline { margin:0; font:normal 700 17px/1.3 var(--oq-font-text); }
.footer-display { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.footer-h { margin:0 4px 0 0; font:normal 700 14px/1.3 var(--oq-font-text); color:var(--muted); }
.modes { display:flex; flex-wrap:nowrap; gap:8px; }
.mode-short { display:none; }
@media (max-width: 599px) { .mode-long { display:none; } .mode-short { display:inline; } }
@media (max-width: 359px) { .modes { gap:6px; } .modes .mode { padding:0 9px; gap:6px; } }
.mode { min-height:44px; display:flex; align-items:center; gap:8px; padding:0 12px; border-radius:8px; border:var(--hw) solid var(--control); background:transparent; color:var(--ink); font:normal 600 14px/1 var(--oq-font-text); cursor:pointer; }
.mode[aria-pressed="true"] { border:2px solid var(--link); background:var(--surface); }
.mode-dot { width:14px; height:14px; border-radius:50%; border:2px solid var(--ink); display:grid; place-items:center; }
.mode[aria-pressed="true"] .mode-dot::after { content:""; width:6px; height:6px; border-radius:50%; background:var(--ink); }
.footer-lang { display:flex; align-items:center; min-height:44px; padding:0 12px; color:var(--link); font:normal 700 14px/1 var(--oq-font-text); }
.footer-links { display:flex; flex-wrap:wrap; gap:0 48px; border-top:var(--hw) solid var(--line); padding-top:8px; }
.footer-links nav { display:flex; flex-wrap:wrap; align-items:center; column-gap:20px; }
.footer-links a { min-height:44px; display:flex; align-items:center; color:var(--link); font-weight:600; font-size:15px; }

/* Bottom tab bar (narrow screens, full pages only) */
.tabbar { display:none; }
@media (max-width: 959px) {
  .tabbar { position:fixed; left:0; right:0; bottom:0; z-index:30; background:var(--bg); border-top:var(--hw) solid var(--line); padding:6px 6px calc(6px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:2px; }
  .tabbar a { min-height:56px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-decoration:none; color:var(--ink); font:normal 500 13px/1 var(--oq-font-text); border-radius:12px; }
  .tabbar a[aria-current="page"] { font-weight:700; }
  .tab-bar { width:28px; height:4px; border-radius:2px; background:transparent; }
  .tabbar a[aria-current="page"] .tab-bar { background:var(--link); }
}

/* Toast */
.toast { position:fixed; left:50%; transform:translateX(-50%); bottom:24px; z-index:40; max-width:min(560px,calc(100% - 32px)); padding:14px 20px; border-radius:8px; background:var(--ink); color:var(--bg); font:normal 600 15px/1.4 var(--oq-font-text); animation:oqRise 200ms cubic-bezier(0.2,0,0,1); }
@media (max-width: 959px) { [data-chrome="full"] .toast { bottom:88px; } }

/* Shared type and buttons */
.h-page { margin:0; font:normal 800 clamp(31px,3.4vw,39px)/1.15 var(--oq-font-text); letter-spacing:-0.015em; text-wrap:balance; }
.h-big { margin:0; font:normal 800 clamp(31px,3.4vw,39px)/1.15 var(--oq-font-text); letter-spacing:-0.015em; }
.h-section { margin:0; font:normal 700 clamp(25px,2.6vw,31px)/1.2 var(--oq-font-text); letter-spacing:-0.01em; }
.h-sub { margin:0; font:normal 700 25px/1.25 var(--oq-font-text); }
.h-small { margin:0; font:normal 700 20px/1.3 var(--oq-font-text); color:var(--ink); }
.lead { margin:0; font-size:18px; color:var(--muted); max-width:60ch; }
.muted { color:var(--muted); }
.small { font-size:14px; }
.b { font-weight:700; }
.measure { max-width:60ch; }
.label { font:normal 700 15px/1.3 var(--oq-font-text); }
.eyebrow { font:normal 700 12px/1.3 var(--oq-font-text); letter-spacing:0.06em; text-transform:uppercase; color:var(--soft); }
.eyebrow.on-panel { color:var(--panelMuted); }
.eyebrow.chip-ink { color:var(--chipInk); }
.stack-12 { display:flex; flex-direction:column; gap:12px; }
.stack-16 { display:flex; flex-direction:column; gap:16px; }
.stack-32 { display:flex; flex-direction:column; gap:32px; }
.row-actions { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.row-between { display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; }
.btn-primary { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 28px; border-radius:8px; border:0; background:var(--btn); color:var(--btnInk); font:normal 700 17px/1 var(--oq-font-text); text-decoration:none; cursor:pointer; }
.btn-primary:hover { background:var(--btnHover); color:var(--btnInk); }
.btn-outline { display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:0 20px; border-radius:8px; border:var(--hw) solid var(--control); background:var(--surface); color:var(--ink); font:normal 700 16px/1 var(--oq-font-text); text-decoration:none; cursor:pointer; }
.btn-outline:hover { border-color:var(--link); color:var(--ink); }
.btn-outline.small-btn { min-height:44px; padding:0 16px; font-size:15px; background:transparent; }
.btn-panel { display:inline-flex; align-items:center; min-height:52px; padding:0 28px; border-radius:8px; background:var(--panelBtn); color:var(--panelBtnInk); font:normal 700 17px/1 var(--oq-font-text); text-decoration:none; }
.btn-panel:hover { background:#E1ECFE; color:#0B3D91; }
.link-button { min-height:48px; padding:0 12px; border:0; background:transparent; color:var(--link); font:normal 700 16px/1 var(--oq-font-text); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.link-strong { min-height:44px; display:inline-flex; align-items:center; font-weight:700; color:var(--link); }
.link-big { display:inline-flex; align-items:center; min-height:52px; color:var(--link); font:normal 700 16px/1 var(--oq-font-text); text-underline-offset:3px; }
.back { align-self:flex-start; min-height:44px; display:inline-flex; align-items:center; color:var(--link); font-weight:700; }
.tri { width:0; height:0; border-left:9px solid currentColor; border-top:6px solid transparent; border-bottom:6px solid transparent; }
.chips { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.chip { display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border-radius:8px; background:var(--chip); color:var(--chipInk); font:italic 400 18px/1 var(--oq-font-display); text-decoration:none; border:var(--hw) solid var(--chip); }
a.chip:hover { border-color:var(--link); color:var(--chipInk); }
.chips.static .chip { min-height:40px; }
.panel-soft { display:flex; flex-direction:column; gap:20px; padding:clamp(20px,3vw,32px); border-radius:16px; background:var(--surface); border:var(--hw) solid var(--line); }

/* Video shell */
.video { position:relative; width:100%; border-radius:16px; overflow:hidden; background:#00123B; font-family:var(--oq-font-text); }
.video-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.video-floor { position:absolute; left:0; right:0; bottom:0; height:34%; background:#04317D; }
.video-floor-line { position:absolute; left:0; right:0; bottom:34%; height:6px; background:#2B5CB3; }
.video-bubble { position:absolute; left:8%; right:8%; top:12%; }
.video-play { position:absolute; inset:0; width:100%; height:100%; background:transparent; border:0; padding:0; cursor:pointer; display:flex; align-items:flex-end; justify-content:flex-start; }
.video-pill { margin:16px; display:inline-flex; align-items:center; gap:12px; min-height:48px; padding:8px 18px 8px 10px; border-radius:999px; background:#F8F6F1; color:#0B3D91; font:normal 700 16px/1 var(--oq-font-text); }
.video-play:hover .video-pill { background:#E1ECFE; }
.video-icon { width:32px; height:32px; border-radius:50%; background:#0B3D91; display:grid; place-items:center; }
.video-icon span { width:0; height:0; border-left:11px solid #F8F6F1; border-top:7px solid transparent; border-bottom:7px solid transparent; margin-left:3px; }
.video-dur { font-weight:500; color:#4D4A43; }
.video-cc { position:absolute; top:12px; right:12px; padding:4px 8px; border-radius:4px; background:rgba(0,18,59,0.85); color:#F8F6F1; font:normal 700 12px/1.3 var(--oq-font-text); letter-spacing:0.06em; text-transform:uppercase; }
.video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-yt { margin:4px 0 0; font-size:14px; }
.video-block { min-width:0; }
/* A long video's thumbnail carries its title on the left: the Play pill sits bottom right. */
.video-wide .video-play { justify-content:flex-end; }
/* 2.15.3: sized by the video's own width (a long video in a 340 px side column at 1280 px too), not the screen's */
.video-wide .video { container-type:inline-size; }
@container (max-width:600px) { .video-wide .video-pill { margin:10px; gap:8px; min-height:40px; padding:6px 14px 6px 6px; font-size:14px; } .video-wide .video-icon { width:28px; height:28px; } }
.video-yt a { color:var(--link); }
.transcript { font-size:15px; color:var(--muted); }
.transcript summary { min-height:44px; display:flex; align-items:center; cursor:pointer; font-weight:700; color:var(--ink); }
.transcript p { margin:0 0 8px; }

/* Home */
.home { display:flex; flex-direction:column; gap:clamp(56px,7vw,96px); }
.home-top { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:clamp(32px,4vw,64px); align-items:start; }
.home-intro { display:flex; flex-direction:column; gap:24px; min-width:0; }
.home-h1 { margin:0; font:normal 800 clamp(31px,4.1vw,49px)/1.1 var(--oq-font-text); letter-spacing:-0.015em; color:var(--ink); text-wrap:balance; max-width:18ch; }
.home-lead { margin:0; font:normal 400 clamp(17px,1.5vw,20px)/1.5 var(--oq-font-text); color:var(--muted); max-width:56ch; text-wrap:pretty; }
.home-latest { display:flex; flex-direction:column; gap:12px; max-width:340px; width:100%; }
.latest-foot { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:baseline; }
.latest-phrase { font:italic 400 25px/1.2 var(--oq-font-display); color:var(--fr); text-decoration:none; }
.latest-phrase:hover { text-decoration:underline; color:var(--fr); }
.hero { display:flex; flex-direction:column; gap:20px; margin-top:8px; max-width:680px; }
.hero-slide { display:flex; flex-direction:column; gap:20px; }
.hero-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.hero-tag { margin-bottom:28px; }
.flip { perspective:1400px; }
.flip-inner { display:grid; transform-style:preserve-3d; transition:transform 520ms cubic-bezier(0.2,0,0,1); }
.hero.turned .flip-inner { transform:rotateX(180deg); }
.flip-front, .flip-back { grid-area:1/1; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:16px; padding:clamp(20px,3vw,32px); display:flex; flex-direction:column; gap:12px; min-height:188px; }
.flip-front { background:var(--surface); border:var(--hw) solid var(--line); }
.flip-back { transform:rotateX(180deg); background:var(--panel); color:var(--panelInk); }
.flip-lit { margin:0; font:normal 500 clamp(22px,2.2vw,28px)/1.3 var(--oq-font-text); color:var(--muted); text-wrap:pretty; }
.flip-note { margin:auto 0 0; font:normal 400 15px/1.5 var(--oq-font-text); color:var(--soft); }
.flip-means { margin:0; font:normal 700 clamp(24px,2.6vw,31px)/1.2 var(--oq-font-text); text-wrap:pretty; }
.flip-say { margin:auto 0 0; font:normal 400 16px/1.5 var(--oq-font-text); color:var(--panelMuted); }
.say-fr { font:italic 400 20px/1.3 var(--oq-font-display); color:var(--panelInk); }
.home-week { display:flex; flex-direction:column; gap:24px; }
.bento { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:208px; gap:16px; }
.tile { display:flex; flex-direction:column; gap:8px; padding:20px; background:var(--surface); border:var(--hw) solid var(--line); border-radius:16px; text-decoration:none; color:var(--ink); overflow:hidden; min-width:0; }
.tile:hover { border-color:var(--link); color:var(--ink); }
.tile-text { display:flex; flex-direction:column; gap:8px; min-width:0; container-type:inline-size; }
.tile-text > :first-child:not(.tile-phrase) { align-self:flex-start; }
.tile-a { grid-column:1 / 3; grid-row:1 / 3; }
.tile-a.has-img { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); padding:0; }
.tile-a.has-img .tile-text { padding:clamp(20px,2.4vw,32px); gap:12px; }
.tile-a .tile-phrase { font:italic 400 clamp(31px,3.4vw,49px)/1.05 var(--oq-font-display); font-size:min(clamp(31px,3.4vw,49px),var(--fit,100cqi)); }
.tile-a .tile-meaning { font-size:17px; }
.tile-a .tile-foot { margin-top:auto; }
.tile-b { grid-column:3 / 4; grid-row:1 / 3; }
.tile-b.has-img { padding:0; flex-direction:column-reverse; gap:0; }
.tile-b.has-img .tile-text { padding:16px 20px 20px; }
.tile-c { grid-column:4 / 5; grid-row:1 / 2; background:var(--sunken); }
.tile-d { grid-column:4 / 5; grid-row:2 / 3; }
.tile-img { width:100%; height:100%; min-height:120px; object-fit:cover; object-position:center 40%; display:block; flex:1; }
.tile-phrase { font:italic 400 25px/1.1 var(--oq-font-display); font-size:min(25px,var(--fit,100cqi)); letter-spacing:-0.01em; color:var(--fr); overflow-wrap:anywhere; text-wrap:balance; }
.tile-meaning { font:normal 600 15px/1.4 var(--oq-font-text); }
.tile-foot { margin-top:auto; }
.tile-title { font:normal 700 17px/1.35 var(--oq-font-text); text-wrap:pretty; }
.tile-chips { margin-top:auto; font:italic 400 18px/1.3 var(--oq-font-display); color:var(--fr); }
.home-quiz { background:var(--panel); color:var(--panelInk); border-radius:24px; padding:clamp(28px,4vw,56px); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(24px,4vw,64px); align-items:center; }
.home-quiz-text { display:flex; flex-direction:column; gap:16px; align-items:flex-start; }
.on-panel-muted { margin:0; font-size:18px; line-height:1.5; color:var(--panelMuted); max-width:44ch; text-wrap:pretty; }
.home-quiz-preview { display:flex; flex-direction:column; gap:6px; }
.home-quiz-phrase { font:italic 400 clamp(39px,4vw,61px)/1 var(--oq-font-display); color:#F8F6F1; }
.home-recap { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(24px,4vw,48px); align-items:center; }
.home-recap-text { display:flex; flex-direction:column; gap:16px; align-items:flex-start; }
.recap-title { margin:0; font:normal 700 clamp(25px,2.4vw,31px)/1.2 var(--oq-font-text); letter-spacing:-0.01em; text-wrap:balance; }
@media (max-width: 959px) {
  .home-top, .home-quiz, .home-recap { grid-template-columns:1fr; }
  .home-latest { max-width:360px; }
  .hero-tag { margin-bottom:22px; }
  .bento { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:minmax(150px,auto); }
  .tile-a { grid-column:1 / 3; grid-row:span 2; }
  /* Fortune 2026-10-25: the picture card and the fourth card side by side at the same height, the third card last at full width. */
  .tile-b { grid-column:1 / 2; grid-row:auto; }
  .tile-d { grid-column:2 / 3; grid-row:auto; }
  .tile-c { grid-column:1 / 3; grid-row:auto; order:1; }
  /* Same part of the frame as on desktop: the scene, not a bubble cut at the edge (Fortune, 2026-10-20). */
  .tile-b.has-img .tile-img { aspect-ratio:1; flex:none; height:auto; min-height:0; object-position:center 68%; }
  .tile-b.has-img { justify-content:space-between; }
}

@media (max-width: 600px) {
  .tile-a.has-img { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .tile-a.has-img .tile-img { aspect-ratio:9/16; height:auto; min-height:0; align-self:end; }
}

/* Cards and library */
.card-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)); gap:16px; }
.card-li { min-width:0; }
.card { height:100%; display:flex; flex-direction:column; gap:12px; padding:20px; background:var(--surface); border:var(--hw) solid var(--line); border-radius:16px; color:var(--ink); min-width:0; }
.card-top { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.card-meta { font:normal 500 14px/1.4 var(--oq-font-text); color:var(--muted); }
.card-h { margin:0; font-size:inherit; font-weight:inherit; }
.card-h a { color:inherit; text-decoration:none; display:block; }
.card-h a:hover { text-decoration:underline; color:inherit; }
.card-phrase { display:block; font:italic 400 31px/1.1 var(--oq-font-display); letter-spacing:-0.01em; color:var(--fr); overflow-wrap:anywhere; text-wrap:balance; }
.card-title { display:block; font:normal 700 20px/1.3 var(--oq-font-text); color:var(--ink); text-wrap:pretty; }
.card-meaning { margin:0; font:normal 600 16px/1.45 var(--oq-font-text); text-wrap:pretty; }
.card-heard { margin:0; font:normal 400 14px/1.5 var(--oq-font-text); color:var(--muted); text-wrap:pretty; }
.card-actions { margin-top:auto; padding-top:4px; display:flex; gap:8px; flex-wrap:wrap; }
.card-actions .btn-outline { min-height:44px; padding:8px 16px 8px 12px; font-size:15px; background:transparent; }
.card-actions .link-strong { padding:0 12px; font-size:15px; text-decoration:underline; text-underline-offset:3px; }
.library { display:flex; flex-direction:column; gap:32px; }
.lib-search { display:flex; flex-direction:column; gap:8px; max-width:720px; }
.lib-search-box { position:relative; display:flex; }
.lib-search-box input { width:100%; min-height:52px; padding:12px 56px 12px 16px; border-radius:8px; border:var(--hw) solid var(--control); background:var(--surface); color:var(--ink); font:normal 400 17px/1.3 var(--oq-font-text); }
.lib-search-box kbd { position:absolute; right:12px; top:50%; transform:translateY(-50%); font:normal 700 13px/1 var(--oq-font-text); padding:6px 9px; border-radius:4px; background:var(--sunken); color:var(--ink); border:var(--hw) solid var(--line); }
.filters { display:flex; flex-wrap:wrap; gap:16px 32px; align-items:flex-end; }
.filter { display:flex; flex-direction:column; gap:8px; }
.filter-label { font:normal 700 15px/1.3 var(--oq-font-text); }
.filter-chips { display:flex; flex-wrap:wrap; gap:8px; }
.fchip { min-height:44px; padding:0 16px; border-radius:8px; border:var(--hw) solid var(--control); background:transparent; color:var(--ink); font:normal 700 15px/1 var(--oq-font-text); cursor:pointer; }
.fchip:hover { border-color:var(--link); }
.fchip[aria-pressed="true"] { background:var(--btn); color:var(--btnInk); border-color:var(--btn); }
.lib-bar { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; border-top:var(--hw) solid var(--line); padding-top:16px; }
.lib-count { margin:0; font:normal 700 16px/1.3 var(--oq-font-text); }
.empty { padding:clamp(24px,4vw,48px); border-radius:16px; border:var(--hw) solid var(--line); background:var(--surface); display:flex; flex-direction:column; gap:12px; align-items:flex-start; max-width:720px; }
.empty-title { margin:0; font:normal 700 20px/1.35 var(--oq-font-text); overflow-wrap:anywhere; }
.empty-q { font:italic 400 1.15em/1.2 var(--oq-font-display); color:var(--fr); }

/* Expression page */
.expression { display:flex; flex-direction:column; gap:clamp(40px,5vw,64px); }
.ex-grid { display:grid; grid-template-columns:minmax(0,680px) 340px; gap:clamp(32px,5vw,80px); align-items:start; }
.ex-main { display:flex; flex-direction:column; gap:40px; min-width:0; }
.ex-phrase { margin:0; font:italic 400 clamp(49px,5.4vw,76px)/1.02 var(--oq-font-display); letter-spacing:-0.01em; color:var(--fr); overflow-wrap:anywhere; text-wrap:balance; }
.ex-meaning { margin:0; font:normal 700 clamp(22px,2.2vw,25px)/1.3 var(--oq-font-text); text-wrap:pretty; }
.ex-meta { display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-size:15px; }
.ex-side { position:sticky; top:104px; display:flex; flex-direction:column; gap:12px; }
.ex-question { margin:0; font-size:15px; color:var(--muted); }
.ex-question a { font-weight:700; }
.narrow-block { display:none; }
@media (max-width: 959px) {
  .ex-grid { grid-template-columns:1fr; }
  .wide-block { display:none; }
  .narrow-block { display:flex; flex-direction:column; gap:8px; max-width:320px; }
}
.fq { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); border:var(--hw) solid var(--line); border-radius:16px; overflow:hidden; background:var(--surface); }
.fq-cell { padding:20px 24px; display:flex; flex-direction:column; gap:8px; border-bottom:var(--hw) solid var(--line); }
.fq-qc { background:var(--chip); }
.fq-fr { font:italic 400 31px/1.1 var(--oq-font-display); color:var(--soft); }
.fq-qc-text { font:italic 400 31px/1.1 var(--oq-font-display); color:var(--fr); }
.when { display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; }
.when p { margin:0; flex:1; min-width:220px; font-size:17px; max-width:56ch; text-wrap:pretty; }
.examples { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.examples li { padding:16px 0; border-top:var(--hw) solid var(--line); display:flex; flex-direction:column; gap:4px; }
.ex-fr { font:italic 400 25px/1.2 var(--oq-font-display); color:var(--fr); overflow-wrap:anywhere; }
.mq { border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.mq legend { padding:0; margin-bottom:10px; font:normal 600 18px/1.4 var(--oq-font-text); }
.mq-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.opt { min-height:56px; width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-radius:8px; border:var(--hw) solid var(--control); background:var(--surface); color:var(--ink); font:normal 600 16px/1.35 var(--oq-font-text); text-align:left; cursor:pointer; }
.opt:hover { border-color:var(--link); }
.opt-reg { flex-direction:column; align-items:flex-start; justify-content:center; gap:4px; font-weight:700; }
.opt-tag { flex:none; font:normal 700 12px/1.3 var(--oq-font-text); letter-spacing:0.06em; text-transform:uppercase; }
.opt.is-right { border:2px solid #1E7A4C; background:var(--surface); }
.opt.is-wrong { border:2px solid var(--accentText); }
.opt[aria-disabled="true"] { cursor:default; }
.mq-done { display:flex; flex-direction:column; gap:12px; padding-top:16px; border-top:var(--hw) solid var(--line); }
.mq-done p { margin:0; }
.sources { margin:0; padding:0 0 0 20px; display:flex; flex-direction:column; gap:12px; }
.sources li { padding-left:4px; }
.sources a { font-weight:700; color:var(--link); overflow-wrap:anywhere; }
.related { display:flex; flex-direction:column; gap:20px; border-top:var(--hw) solid var(--line); padding-top:40px; }

/* Recaps */
.recap-section { border-top:var(--hw) solid var(--line); padding-top:32px; }
.recap-row { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(24px,4vw,48px); align-items:center; }
@media (max-width: 959px) { .recap-row { grid-template-columns:1fr; } }

/* Quiz */
.quiz { max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:28px; }
.quiz-play { display:flex; flex-direction:column; gap:28px; }
.quiz-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.quiz-head-text { display:flex; flex-direction:column; gap:10px; flex:1; min-width:0; }
.quiz-h1 { margin:0; font:normal 700 16px/1.3 var(--oq-font-text); color:var(--muted); }
.quiz-count { margin:0; font:normal 800 25px/1.2 var(--oq-font-text); }
.steps { display:grid; gap:4px; max-width:320px; }
.step { height:6px; border-radius:3px; background:var(--track); }
.step.on { background:var(--link); }
.ring { position:relative; width:64px; height:64px; flex:none; }
.ring svg { transform:rotate(-90deg); display:block; }
.ring-track { fill:none; stroke:var(--track); stroke-width:6; }
.ring-fill { fill:none; stroke:var(--link); stroke-width:6; stroke-linecap:round; transition:stroke-dashoffset 250ms linear; }
.ring-track.thick, .ring-fill.thick { stroke-width:12; }
.ring-fill.thick { transition:stroke-dashoffset 600ms cubic-bezier(0.2,0,0,1); }
.ring-secs { position:absolute; inset:0; display:grid; place-items:center; font:normal 800 20px/1 var(--oq-font-text); }
.quiz-q { display:flex; flex-direction:column; gap:12px; padding:8px 0; }
.quiz-phrase { margin:0; font:italic 400 clamp(49px,6vw,76px)/1.02 var(--oq-font-display); letter-spacing:-0.01em; color:var(--fr); overflow-wrap:anywhere; text-wrap:balance; }
.quiz-prompt { margin:0; font:normal 800 clamp(31px,3.6vw,39px)/1.15 var(--oq-font-text); text-wrap:balance; }
.quiz-opts, .game-opts { display:flex; flex-direction:column; gap:12px; }
.opt-big { min-height:60px; padding:14px 20px; font-size:18px; }
.opt-fr { font:italic 400 22px/1.25 var(--oq-font-display); min-height:64px; }
.opt-fr .opt-tag { font-style:normal; }
.quiz-feedback { display:flex; flex-direction:column; gap:8px; padding:20px 24px; border-radius:16px; background:var(--surface); border:var(--hw) solid var(--line); animation:oqRise 200ms cubic-bezier(0.2,0,0,1); }
.quiz-feedback p { margin:0; }
.fb-head { font:normal 800 20px/1.3 var(--oq-font-text); }
.quiz-feedback .muted { font-size:17px; text-wrap:pretty; }
.quiz-actions { position:sticky; bottom:0; padding:12px 0 calc(12px + env(safe-area-inset-bottom)); background:var(--bg); display:flex; justify-content:flex-end; }
.quiz-actions .btn-primary { min-height:56px; padding:0 32px; }
.quiz-norush { margin:0; min-height:56px; display:flex; align-items:center; font-size:15px; }
@media (max-width: 959px) { .quiz-actions .btn-primary { width:100%; } }
.quiz-score { margin:0; font:normal 800 clamp(49px,6vw,61px)/1 var(--oq-font-text); letter-spacing:-0.015em; }
.quiz-review { list-style:none; margin:8px 0 0; padding:0; }
.quiz-review li { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:14px 0; border-top:var(--hw) solid var(--line); }
.quiz-review a, .quiz-review li > div { text-decoration:none; color:var(--ink); display:flex; flex-direction:column; gap:2px; min-width:0; }
.rev-fr { font:italic 400 22px/1.2 var(--oq-font-display); color:var(--fr); }
.mark { flex:none; font:normal 700 12px/1.3 var(--oq-font-text); letter-spacing:0.06em; text-transform:uppercase; padding:4px 8px; border-radius:4px; border:var(--hw) solid var(--control); }

/* Practise hub */
.games { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:16px; }
.game-big { grid-row:span 3; display:flex; flex-direction:column; gap:16px; padding:clamp(24px,3vw,40px); border-radius:24px; background:var(--panel); color:var(--panelInk); text-decoration:none; }
.game-big:hover { background:#04317D; color:var(--panelInk); }
.game-big-title { font:normal 800 31px/1.15 var(--oq-font-text); }
.game-big-bubble { margin-top:auto; padding-top:16px; }
.btn-panel-static { display:inline-flex; align-self:flex-start; align-items:center; min-height:48px; padding:0 24px; border-radius:8px; background:var(--panelBtn); color:var(--panelBtnInk); font-weight:700; }
.game-tile { display:flex; flex-direction:column; gap:8px; padding:24px; border-radius:16px; background:var(--surface); border:var(--hw) solid var(--line); color:var(--ink); text-decoration:none; }
.game-tile:hover { border-color:var(--link); color:var(--ink); }
.game-title { font:normal 700 20px/1.3 var(--oq-font-text); }
.game-meta { margin-top:auto; padding-top:8px; font-size:14px; font-weight:700; color:var(--link); }
@media (max-width: 959px) { .games { grid-template-columns:1fr; } .game-big { grid-row:auto; } }

/* Games */
.game { margin:0 auto; display:flex; flex-direction:column; gap:24px; }
.game-narrow { max-width:560px; }
.game-mid { max-width:640px; }
.game-h1 { margin:0; font:normal 800 31px/1.15 var(--oq-font-text); letter-spacing:-0.01em; }
.game-count { font:normal 700 16px/1 var(--oq-font-text); }
.bar { height:6px; border-radius:3px; background:var(--track); overflow:hidden; }
.bar-fill { height:100%; width:0; background:var(--link); transition:width 300ms cubic-bezier(0.2,0,0,1); }
.fc-play { display:flex; flex-direction:column; gap:24px; }
.fc-stage { position:relative; height:min(440px, 56vh); min-height:320px; }
.fc-behind { position:absolute; inset:0; border-radius:24px; background:var(--surface); border:var(--hw) solid var(--line); }
.fc-behind.b1 { transform:translateY(10px) scale(0.97); }
.fc-behind.b2 { transform:translateY(20px) scale(0.94); }
.fc-card { position:absolute; inset:0; touch-action:pan-y; cursor:grab; perspective:1600px; user-select:none; transition:transform 220ms cubic-bezier(0.2,0,0,1); }
.fc-card.out-right { transform:translateX(120%) rotate(12deg); }
.fc-card.out-left { transform:translateX(-120%) rotate(-12deg); }
.fc-inner { position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform 420ms cubic-bezier(0.2,0,0,1); }
.fc-card.flipped .fc-inner { transform:rotateY(180deg); }
.fc-front, .fc-back { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:24px; background:var(--surface); padding:clamp(24px,4vw,40px); display:flex; flex-direction:column; }
.fc-front { border:var(--hw) solid var(--line); gap:20px; }
.fc-back { transform:rotateY(180deg); border:2px solid var(--link); gap:14px; overflow:auto; }
.fc-bubble { flex:1; display:flex; align-items:center; min-width:0; }
.fc-means { margin:0; font:normal 700 25px/1.25 var(--oq-font-text); text-wrap:pretty; }
.fc-example { margin-top:auto; padding-top:14px; border-top:var(--hw) solid var(--line); display:flex; flex-direction:column; gap:4px; }
.fc-ex-fr { font:italic 400 22px/1.25 var(--oq-font-display); color:var(--fr); }
.fc-stamp { position:absolute; top:20px; padding:6px 12px; border-radius:8px; font:normal 800 14px/1 var(--oq-font-text); letter-spacing:0.06em; text-transform:uppercase; opacity:0; pointer-events:none; }
.fc-stamp-knew { left:20px; background:var(--btn); color:var(--btnInk); }
.fc-stamp-not { right:20px; background:var(--bg); color:var(--ink); border:2px dashed var(--ink); }
.fc-actions { display:flex; flex-direction:column; gap:12px; position:sticky; bottom:0; background:var(--bg); padding:8px 0 calc(8px + env(safe-area-inset-bottom)); }
.fc-flip { justify-content:center; background:transparent; }
.fc-two { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fc-not, .fc-knew { min-height:60px; border-radius:8px; font:normal 800 18px/1 var(--oq-font-text); cursor:pointer; }
.fc-not { border:2px solid var(--ink); background:var(--surface); color:var(--ink); }
.fc-not:hover { background:var(--sunken); }
.fc-knew { border:0; background:var(--btn); color:var(--btnInk); }
.fc-knew:hover { background:var(--btnHover); }
.center { text-align:center; margin:0; }
.narrow-only-block { display:none; }
@media (max-width: 959px) { .wide-only-block { display:none; } .narrow-only-block { display:block; } }
.fc-done-score { margin:0; font:normal 800 39px/1.1 var(--oq-font-text); letter-spacing:-0.015em; }
.fc-review { display:flex; flex-direction:column; gap:4px; }
.rev-link { padding:12px 0; border-top:var(--hw) solid var(--line); display:flex; flex-direction:column; gap:2px; text-decoration:none; color:var(--ink); }
.fc-again { min-height:56px; margin-top:8px; }
.lit-answer { animation:oqRise 200ms cubic-bezier(0.2,0,0,1); }
.game-next { min-height:56px; }
.reg-phrase-box { padding:clamp(28px,5vw,48px) 24px; border-radius:24px; background:var(--surface); border:var(--hw) solid var(--line); }
.reg-phrase { margin:0; font:italic 400 clamp(39px,5vw,61px)/1.05 var(--oq-font-display); letter-spacing:-0.01em; color:var(--fr); overflow-wrap:anywhere; text-wrap:balance; }
.reg-opts { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.opt-card { min-height:120px; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:10px; border-radius:16px; }
.opt-sub { font:normal 500 15px/1.4 var(--oq-font-text); }
.opt-card .opt-tag { margin-top:auto; }
.reg-answer p { margin:0; }
.heard-stage { position:relative; border-radius:24px; overflow:hidden; aspect-ratio:16 / 10; background:#00123B; }
.heard-bubble { position:absolute; left:24px; top:56px; }
.heard-label { left:12px; right:auto; }
.heard-play { position:absolute; left:16px; bottom:16px; display:inline-flex; align-items:center; gap:12px; min-height:56px; padding:8px 22px 8px 10px; border-radius:999px; border:0; background:#F8F6F1; color:#0B3D91; font:normal 800 17px/1 var(--oq-font-text); cursor:pointer; }
.heard-play:hover { background:#E1ECFE; }
.video-icon.big { width:40px; height:40px; }
.video-icon.big span { border-left-width:13px; border-top-width:8px; border-bottom-width:8px; margin-left:4px; }
.heard-err { display:flex; flex-direction:column; gap:8px; align-items:flex-start; padding:16px 20px; border-radius:16px; border:2px solid var(--accentText); background:var(--surface); }
.heard-err p { margin:0; }
.heard-line, .said-fr { font:italic 400 22px/1.3 var(--oq-font-display); color:var(--fr); }
.heard-said { margin:0; font-size:18px; line-height:1.4; }

/* Progress */
.progress { max-width:720px; }
.p-week { display:flex; gap:24px; flex-wrap:wrap; align-items:center; }
.p-ring { position:relative; width:148px; height:148px; flex:none; }
.p-ring svg { transform:rotate(-90deg); display:block; }
.p-ring-text { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.p-ring-n { font:normal 800 39px/1 var(--oq-font-text); }
.p-week-text { flex:1; min-width:200px; }
.p-week-text p { margin:0; }
.p-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:16px; }
.stat { padding:20px; border-radius:16px; background:var(--surface); border:var(--hw) solid var(--line); }
.stat p { margin:0; }
.stat-n { font:normal 800 39px/1 var(--oq-font-text); margin-bottom:6px !important; }
.plain-list { list-style:none; margin:0; padding:0; }
.p-reset { padding-top:24px; border-top:var(--hw) solid var(--line); }
.p-reset p { margin:0; }
.p-confirm { display:flex; flex-direction:column; gap:12px; padding:16px 20px; border-radius:16px; border:2px solid var(--ink); background:var(--surface); }
.btn-ink { min-height:48px; padding:0 20px; border-radius:8px; border:0; background:var(--ink); color:var(--bg); font-weight:700; cursor:pointer; }
.p-practise { min-height:56px; align-self:flex-start; }
.p-empty p { margin:0; }

/* Sign-up */
.signup { display:flex; flex-direction:column; gap:8px; }
.signup-row { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }
.signup-field { display:flex; flex-direction:column; gap:6px; flex:1; min-width:220px; }
.signup input[type="email"] { min-height:52px; padding:12px 16px; border-radius:8px; border:var(--hw) solid var(--control); background:var(--bg); color:var(--ink); font:normal 400 17px/1.3 var(--oq-font-text); }
.signup input[aria-invalid="true"] { border:2px solid var(--accentText); }
.signup-msg { margin:0; font-weight:600; min-height:0; }
.signup-msg.err { color:var(--accentText); }
.signup-msg.ok { color:var(--ink); font-weight:700; }
.consent { margin:0; font-size:14px; color:var(--muted); max-width:72ch; }
.hp { position:absolute !important; left:-10000px; width:1px; height:1px; overflow:hidden; }

/* Long-form pages: about, privacy, terms */
.prose { max-width:68ch; }
.prose h2 { margin:16px 0 0; font:normal 700 25px/1.25 var(--oq-font-text); text-wrap:balance; }
.prose h3 { margin:8px 0 0; font:normal 700 20px/1.3 var(--oq-font-text); }
.prose p, .prose li { margin:0; font-size:17px; line-height:1.6; overflow-wrap:break-word; }
.prose ul, .prose ol { margin:0; padding-left:24px; display:flex; flex-direction:column; gap:8px; }
.prose a { color:var(--link); font-weight:600; }
.prose .source-list { list-style:none; padding:0; gap:0; }
.prose .source-list li { border-top:var(--hw) solid var(--line); }
.prose .source-list a { min-height:48px; display:flex; align-items:center; }
.stack-24 { display:flex; flex-direction:column; gap:24px; }
.stack-28 { display:flex; flex-direction:column; gap:28px; }
.measure-wide { max-width:640px; }
.lessons .text-link { align-self:flex-start; min-height:44px; display:inline-flex; align-items:center; color:var(--link); }
.lead-ink { color:var(--ink); line-height:1.6; }

/* Narrow phones (Review Focus 1): nothing may push the page sideways. */
.hero-head, .fc-bubble, .lit-bubble, .game-big-bubble, .video-bubble, .heard-bubble, .decode-fit { container-type:inline-size; }
.hero-head > :first-child { max-width:100%; }
@media (max-width: 959px) { .games { grid-template-columns:minmax(0,1fr); } }
@container (max-width: 440px) {
  .decode-fit div[style*="grid-template-columns:112px"] { grid-template-columns:minmax(0,1fr) !important; gap:4px !important; }
  .decode-fit span[lang="fr-CA"][style*="font-size:39px"] { font-size:min(39px,10cqi) !important; }
}

/* Crowded desktop headers (French labels are longer) */
@media (max-width: 1439px) { .header-row { gap:16px; } .topnav { gap:0; } .topnav-link { padding:0 8px; } }
@media (max-width: 1199px) { .header-search { display:none !important; } .logo img { height:44px; } }
@media (max-width: 359px) {
  .header-row { gap:8px; }
  .logo img { height:36px; }
  .header-search-button { padding:0 12px; }
}


/* The hidden attribute always wins over a component's display. */
[hidden] { display:none !important; }

/* Transcript (2026-10-20) */
.ex-summary { margin:0; color:var(--ink); line-height:1.55; }
.tr-lines { display:flex; flex-direction:column; gap:8px; margin:8px 0 0; padding:0; }
.tr-lines li { line-height:1.5; }
.tr-who { font-weight:700; margin-right:4px; }
.tr-lines [lang="fr-CA"] { font-style:italic; color:var(--fr); }
.chapters { display:flex; flex-direction:column; gap:4px; margin:0; padding:0; }
.chap { display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; min-height:44px; padding:8px 0; color:var(--link); text-decoration:none; border-bottom:var(--hw) solid var(--line); }
.chap:hover .chap-title { text-decoration:underline; }
.chap-time { font-variant-numeric:tabular-nums; color:var(--muted); min-width:3.2em; }
.chap-title { color:var(--ink); font-weight:600; }
.chap-fr { font-family:var(--oq-font-display); font-style:italic; color:var(--fr); }

/* Transcript window (2026-10-20) */
.tr-open { align-self:flex-start; }
.tr-dialog { padding:0; border:var(--hw) solid var(--line); border-radius:16px; background:var(--surface); color:var(--ink); width:min(640px, calc(100vw - 32px)); max-height:min(80vh, 720px); display:none; flex-direction:column; overflow:hidden; }
.tr-dialog[open] { display:flex; }
.tr-dialog::backdrop { background:rgba(0,10,30,0.6); }
.tr-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; border-bottom:var(--hw) solid var(--line); }
.tr-head .h-sub { margin:0; }
.tr-close { min-width:44px; min-height:44px; border:0; background:transparent; color:var(--ink); font-size:28px; line-height:1; cursor:pointer; border-radius:8px; }
.tr-close:focus-visible { outline:2px solid var(--link); }
.tr-body { overflow-y:auto; padding:12px 20px 20px; overscroll-behavior:contain; }
html.no-scroll { overflow:hidden; }
/* 2.13.0: Hear it, Slower, Record yourself */
.ex-listen { display:flex; flex-direction:column; gap:6px; }
.sayback-status { margin:0; color:var(--ink); }
.sayback-status:empty { display:none; }
.sayback-note { margin:0; }
.ex-listen [aria-pressed="true"] { border-color:var(--accent); }
/* 2.13.0: the weekly cheat sheet */
.sheet-list { display:grid; gap:16px; }
.sheet-item { border:1px solid var(--line); border-radius:16px; padding:16px; display:grid; gap:6px; background:var(--surface); }
.sheet-phrase { font:italic 400 28px/1.15 var(--oq-font-display); color:var(--fr); }
.sheet-means, .sheet-say { margin:0; }
@media print {
  .site-header, .site-footer, .tabbar, .no-print, .skip-link { display:none !important; }
  html, body { background:#FFFFFF !important; color:#00123B !important; }
  .sheet-item { break-inside:avoid; background:#FFFFFF !important; border-color:#BAB7B2 !important; }
  .sheet-phrase { color:#0B3D91 !important; }
  .sheet .muted, .sheet .small { color:#4D4A43 !important; }
}

/* Document 12 (2026-10-25): the promise panel and the free sheet's link after sign-up. */
.promise .signup { margin-top:4px; }
.signup-msg .sheet-cta { display:inline-flex; margin-top:12px; }
.empty-signup { margin-top:24px; max-width:640px; }