/* Leesje website — built on the extension's design tokens and onboarding components.
   Layout follows a split-screen, big-type editorial style with rounded blocks like the app. */
/* The landing's first screen (the Latin @font-face rules, tokens, base, header and hero rules) is also in
   index.html, <style id="first-screen-css">, copied word for word, so the hero paints before this file has
   loaded. Keep the two in sync: change a copied rule in both places (tests/critical-css.test.mjs fails when a
   rule there is no longer in this file), and copy a new rule there when it styles the header or the hero. */
@font-face{font-family:Inter;src:url('/assets/fonts/Inter-text-latin-ext.woff2') format('woff2');font-weight:400 800;font-display:block;unicode-range:U+0100-0130,U+0132-0151,U+0154-017F,U+0192,U+0218-021B,U+0250,U+0252-0253,U+0255-0258,U+025A,U+025C-0262,U+0264-0269,U+026B-028A,U+028C-02BA,U+02BD-02C5,U+02C7,U+02C9-02CB,U+02CD-02CF,U+02D1-02D9,U+02DB,U+02DD-0303,U+0305-0307,U+0309-0328,U+032A-036F,U+20BD,U+219A-21FF,U+25A0-25B5,U+25B7-25CE,U+25D0-25FF,U+2700-2712,U+2714-27BF}
@font-face{font-family:Inter;src:url('/assets/fonts/Inter-text-latin.woff2') format('woff2');font-weight:400 800;font-display:block;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+0251,U+0254,U+0259,U+025B,U+0263,U+026A,U+028B,U+02BB-02BC,U+02C6,U+02C8,U+02CC,U+02D0,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2190-2199,U+2212,U+2215,U+25B6,U+25CF,U+2713,U+FEFF,U+FFFD}
@font-face{font-family:Inter;src:url('/assets/fonts/Inter-text-cyrillic.woff2') format('woff2');font-weight:400 800;font-display:block;unicode-range:U+0400-04FF,U+2116}
@font-face{font-family:Manrope;src:url('/assets/fonts/Manrope-v2-latin-ext.woff2') format('woff2');font-weight:200 800;font-display:block;unicode-range:U+0100-0130,U+0132-0151,U+0154-017F,U+0192,U+0218-021B,U+0250,U+0252-0253,U+0255-0258,U+025A,U+025C-0262,U+0264-0269,U+026B-028A,U+028C-02BA,U+02BD-02C5,U+02C7,U+02C9-02CB,U+02CD-02CF,U+02D1-02D9,U+02DB,U+02DD-0303,U+0305-0307,U+0309-0328,U+032A-036F,U+20BD,U+219A-21FF,U+25A0-25B5,U+25B7-25CE,U+25D0-25FF,U+2700-2712,U+2714-27BF}
@font-face{font-family:Manrope;src:url('/assets/fonts/Manrope-v2-latin.woff2') format('woff2');font-weight:200 800;font-display:block;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+0251,U+0254,U+0259,U+025B,U+0263,U+026A,U+028B,U+02BB-02BC,U+02C6,U+02C8,U+02CC,U+02D0,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2190-2199,U+2212,U+2215,U+25B6,U+25CF,U+2713,U+FEFF,U+FFFD}
@font-face{font-family:Manrope;src:url('/assets/fonts/Manrope-cyrillic.woff2') format('woff2');font-weight:200 800;font-display:block;unicode-range:U+0400-04FF,U+2116}

:root{
  color-scheme:light;
  --bg:#FFFFFF;--bg-page:#F7F4EC;--bg-grouped:#DCE9DE;--bg-soft:#EEF2EA;
  --panel:#EFEBDF;--panel-sage:#DCE9DE;--panel-warm:#F4E4D2;--panel-strong:#E6DFCF;
  --duo-copy:var(--panel);--duo-bg:var(--panel-warm);--split-read:var(--panel-sage);--split-read-on:var(--bg);
  --text:#203C38;--text-secondary:#526861;--text-tertiary:#7E9089;--text-label:#526861;
  --separator:#DEDFD5;--separator-strong:#C7C9BC;
  --success:#24664F;--success-soft:rgba(36,102,79,.13);
  --orange:#F58245;--orange-ink:#9C4A20;--orange-soft:rgba(245,130,69,.14);--orange-text:#D66624;
  --highlight:#E5A126;--highlight-soft:rgba(245,182,65,.35);
  --saved:#4B93CF;--saved-soft:rgba(75,147,207,.2);
  --button-bg:#203C38;--button-ink:#F7F4EC;--button-hover:#30564F;
  --video-bg:#14211D;
  --shadow-card:0 1px 2px rgba(32,60,56,.05),0 1px 4px rgba(32,60,56,.05);
  --shadow-float:0 8px 24px rgba(32,60,56,.16),0 2px 6px rgba(32,60,56,.10);
  --shadow-stage:0 18px 48px rgba(20,33,29,.10);
  --font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --display:Manrope,var(--font);
  --ease:cubic-bezier(.2,.8,.2,1);
  --wrap:100vw;--gutter:24px;--header-h:76px;
  --r-xl:32px;--r-lg:26px;--r-md:20px;
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    color-scheme:dark;
    --bg:#1E372E;--bg-page:#08110E;--bg-grouped:#2A493D;--bg-soft:#111F1A;
    --panel:#111F1A;--panel-sage:#173027;--panel-warm:#111F1A;--panel-strong:#152621;
    --duo-copy:#1E372E;--duo-bg:#111F1A;--split-read:#1E372E;--split-read-on:#111F1A;
    --text:#F4F8F3;--text-secondary:#C5D6CA;--text-tertiary:#A3BBAC;--text-label:#A3BBAC;
    --separator:#34524A;--separator-strong:#56796A;
    --success:#95D5AE;--success-soft:rgba(149,213,174,.16);
    --orange-ink:#FFB088;--orange-soft:rgba(245,130,69,.18);--orange-text:var(--orange);
    --highlight:#EFA62F;--highlight-soft:rgba(245,182,65,.22);
    --saved:#81BBF3;--saved-soft:rgba(75,147,207,.24);
    --button-bg:#95D5AE;--button-ink:#08110E;--button-hover:#B3E4C5;
    --shadow-card:0 1px 2px rgba(0,0,0,.35),0 4px 14px rgba(0,0,0,.3);
    --shadow-float:0 10px 28px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.4);
    --shadow-stage:0 18px 48px rgba(0,0,0,.35);
  }
}
:root[data-theme=dark]{
  color-scheme:dark;
  --bg:#1E372E;--bg-page:#08110E;--bg-grouped:#2A493D;--bg-soft:#111F1A;
  --panel:#111F1A;--panel-sage:#173027;--panel-warm:#111F1A;--panel-strong:#152621;
  --duo-copy:#1E372E;--duo-bg:#111F1A;--split-read:#1E372E;--split-read-on:#111F1A;
  --text:#F4F8F3;--text-secondary:#C5D6CA;--text-tertiary:#A3BBAC;--text-label:#A3BBAC;
  --separator:#34524A;--separator-strong:#56796A;
  --success:#95D5AE;--success-soft:rgba(149,213,174,.16);
  --orange-ink:#FFB088;--orange-soft:rgba(245,130,69,.18);--orange-text:var(--orange);
  --highlight:#EFA62F;--highlight-soft:rgba(245,182,65,.22);
  --saved:#81BBF3;--saved-soft:rgba(75,147,207,.24);
  --button-bg:#95D5AE;--button-ink:#08110E;--button-hover:#B3E4C5;
  --shadow-card:0 1px 2px rgba(0,0,0,.35),0 4px 14px rgba(0,0,0,.3);
  --shadow-float:0 10px 28px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.4);
  --shadow-stage:0 18px 48px rgba(0,0,0,.35);
}

/* Base (also used by /terms and /refunds) */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg-page);color:var(--text);font:16px/1.65 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* Scrollbars: the same design as the Leesje extension (word-menu.css, from content.css):
   18px gutter, no track, a 6px rounded thumb that darkens on hover. Firefox gets the thin equivalent. */
html,body,*{scrollbar-width:auto;scrollbar-color:auto}
::-webkit-scrollbar{width:18px;height:18px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--separator);background-clip:padding-box;border:6px solid transparent;border-radius:9px;min-height:44px}
::-webkit-scrollbar-thumb:hover{background:var(--text-secondary);background-clip:padding-box}
@supports not selector(::-webkit-scrollbar){
  html,body,*{scrollbar-width:thin;scrollbar-color:var(--separator) transparent}
}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{cursor:default;opacity:.6}
button,a{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}
h1,h2,h3,h4{font-family:var(--display);color:var(--text);text-wrap:balance}
img,svg{max-width:100%}
.icon-library{position:absolute;width:0;height:0;overflow:hidden}
svg use{pointer-events:none}
.wrap{width:min(var(--wrap),calc(100% - var(--gutter)*2));margin-inline:auto}
.skip-link{position:absolute;left:16px;top:-60px;z-index:100;padding:10px 16px;border-radius:10px;background:var(--button-bg);color:var(--button-ink);text-decoration:none}
.skip-link:focus{top:12px}

/* Typography: big, tight display type */
.eyebrow,.stage-label,.card-meta{font-size:11px;letter-spacing:1.4px;font-weight:700;text-transform:uppercase;color:var(--text-secondary);margin:0 0 16px}
h1{font-size:clamp(44px,6.4vw,104px);font-weight:800;line-height:.98;letter-spacing:-.05em;margin:0}
h2{font-size:clamp(36px,4.8vw,76px);font-weight:800;line-height:1.02;letter-spacing:-.045em;margin:0 0 16px}
h3{font-size:clamp(24px,2.4vw,34px);font-weight:800;line-height:1.12;letter-spacing:-.03em;margin:0 0 14px}
.lead{font-size:17px;line-height:1.7;color:var(--text-secondary);margin:0 0 24px;max-width:560px}
.small{font-size:13px;line-height:1.6;color:var(--text-secondary);margin:14px 0 0}
.accent-word{color:var(--orange-text)}
.lead a,.small a,.faq-list a{color:var(--text);text-underline-offset:3px}

/* Buttons */
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;border:1px solid transparent;border-radius:14px;background:var(--button-bg);color:var(--button-ink);font:650 15px/1.2 var(--font);text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s,transform .15s}
.button:hover{background:var(--button-hover)}
.button:active{transform:translateY(1px)}
.button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.button-secondary{background:transparent;color:var(--text);border-color:var(--separator-strong)}
.button-secondary:hover{background:var(--panel)}
.button-light{background:var(--bg);color:var(--text)}
.button-light:hover{background:var(--bg-soft)}
.button-small{min-height:40px;padding:8px 16px;font-size:14px;border-radius:12px}
.quiet{border:0;background:transparent;padding:10px 6px;color:var(--text-secondary);font-size:14px}
.quiet:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.icon-button{display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid var(--separator);border-radius:9px;background:var(--bg-page);color:var(--text-secondary)}
.icon-button:hover{color:var(--text);background:var(--bg-grouped)}
.icon-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Header: wordmark on the left, one light pill of controls on the right */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg-page) 86%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px)}
.header-inner{height:76px;display:flex;align-items:center;gap:10px}
.brand{display:block;line-height:0;flex-shrink:0}
.wordmark{width:108px;height:auto}
.wordmark-dark{display:none}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .wordmark-light{display:none}:root:not([data-theme=light]) .wordmark-dark{display:block}}
:root[data-theme=dark] .wordmark-light{display:none}
:root[data-theme=dark] .wordmark-dark{display:block}
/* The controls span the right-hand column of the blocks below (half the wrap minus half the 12px gap)
   and only grow past it when the links need more room. */
.header-right{flex:none;display:flex;align-items:center;gap:10px;min-width:calc(50% - 6px);margin-left:auto}
.navigation{flex:1;display:flex;justify-content:space-between;gap:2px;padding:4px;border-radius:14px;background:var(--bg)}
.navigation a{display:flex;align-items:center;min-height:40px;padding:0 10px;border-radius:10px;font-size:14px;font-weight:550;color:var(--text-secondary);text-decoration:none;transition:background .15s,color .15s}
.navigation a:hover{color:var(--text);background:var(--bg-soft)}
.navigation a[aria-current=page]{color:var(--text);background:var(--bg-soft)}
.header-actions{display:flex;align-items:center;gap:10px}
.theme-switch{display:flex;gap:2px;padding:4px;border-radius:14px;background:var(--bg)}
.theme-switch button{display:grid;place-items:center;width:34px;height:40px;padding:0;border:0;border-radius:10px;background:transparent;color:var(--text-secondary)}
.theme-switch button:hover{color:var(--text);background:var(--bg-soft)}
.theme-switch button[aria-checked=true]{background:var(--button-bg);color:var(--button-ink)}
.theme-switch svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav-arrow{width:16px;height:16px;margin-left:5px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:translate .2s var(--ease)}
.nav-account:hover .nav-arrow{translate:2px -2px}
/* "Sign in" becomes "Account" once /account has seen a signed-in visitor (see app.js) */
.nav-signed-in,.signed-in .nav-signed-out{display:none}
.signed-in .nav-signed-in{display:inline}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.header-actions .button-small{min-height:48px;border-radius:14px}
.menu-toggle{display:none}

/* Hero: split screen */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(var(--wrap),calc(100% - var(--gutter)*2));min-height:clamp(540px,calc(100svh - 88px),940px);margin:0 auto}
.hero-copy{display:flex;flex-direction:column;justify-content:space-between;gap:48px;padding:48px 24px 12px 0}
.hero h1{max-width:9.5em}
/* One line per "Keep" */
.keep-line{display:block}
.hero-foot .lead{max-width:500px;margin-bottom:22px}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px}
.hero-board{position:relative;overflow:hidden;border-radius:var(--r-xl);background:var(--panel)}
/* Hero cards: one grid of equal columns, with gaps, drifting left (the lanes share a speed). Sizes
   follow the lane height (container units), so every card stays whole at any hero height. */
.tile-lanes{--gap:clamp(10px,1.1vw,14px);--col:84;position:absolute;inset:clamp(16px,2.4vw,28px) 0;display:flex;flex-direction:column;gap:var(--gap);animation:lanes-in 1s var(--ease) both}
/* The cards fade out at the sides under a gradient of the board's own colour. (Not mask-image: masking the
   drifting cards repaints the whole board every frame and held back the first paint by seconds.) */
.hero-board::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--panel),transparent 6%,transparent 94%,var(--panel));pointer-events:none}
@keyframes lanes-in{from{opacity:0;translate:48px 0}}
.tile-lane{flex:1;min-height:0;container-type:size;overflow:clip visible}
.tile-gap{flex:none;width:calc(var(--col) * 1cqh)}
.tile-track{display:flex;width:max-content;height:100%}
.tile-group{display:flex;gap:var(--gap);height:100%;padding-right:var(--gap)}
.tile-lanes.is-moving .tile-track{animation:lane-drift var(--dur,60s) linear var(--delay,0s) infinite}
.hero-board:hover .tile-track{animation-play-state:paused}
@keyframes lane-drift{to{transform:translateX(-50%)}}

/* One anatomy for every card: tag with a dot, content in the middle, a quiet foot line */
.tile{position:relative;flex:none;display:flex;flex-direction:column;width:calc(var(--col) * 1cqh);height:100cqh;padding:7.5cqh 8cqh 7cqh;overflow:hidden;border-radius:10cqh;color:#203C38;font-size:max(10px,5.4cqh);line-height:1.3;transition:transform .45s var(--ease)}
.tile-wide{width:calc(var(--col) * 2cqh + var(--gap))}
.tile:hover{transform:translateY(-1.5cqh) rotate(-1deg)}
.tile-tag{position:relative;display:flex;align-items:center;gap:.55em;font-weight:650}
.tile-tag::before{content:'';width:.5em;height:.5em;border-radius:50%;background:currentColor}
.tile-body{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3cqh;min-height:0;text-align:center}
.tile-foot{display:flex;align-items:center;justify-content:space-between;gap:.6em;font-size:max(10px,4.9cqh);color:rgba(32,60,56,.78)}
.tile-big{font:800 14cqh/1 var(--display);letter-spacing:-.035em}
.tile-big small{font-size:.5em;font-weight:700;color:rgba(32,60,56,.78)}
.tile-mid{font:800 9.5cqh/1.1 var(--display);letter-spacing:-.025em;text-wrap:balance}
.tile-huge{font:800 38cqh/.9 var(--display);letter-spacing:-.06em}
.tile-article{padding:.1em .75em;border-radius:99px;background:rgba(32,60,56,.1);font-weight:700}
.tile-rank{padding:.1em .6em;border-radius:99px;background:#24664F;color:#fff;font-size:.9em;font-weight:700}
.tile-sentence{margin:0;font:700 8.8cqh/1.2 var(--display);letter-spacing:-.02em;text-wrap:balance}
.tile-sentence mark{padding:0 .08em;border-radius:.18em;background:rgba(255,255,255,.6);box-shadow:inset 0 -.12em #E5A126;color:inherit}
.tile-round{display:grid;place-items:center;width:24cqh;height:24cqh;border-radius:50%;background:#fff;color:#203C38}
.tile-round svg{width:11cqh;height:11cqh;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tile-round-orange{background:#F58245}
.tile-ipa{font-weight:600;font-size:max(11px,7cqh)}
.tile-quote{max-width:15em;font-size:max(10px,4.9cqh);font-style:italic;line-height:1.35;color:rgba(32,60,56,.8)}
.tile-check{display:inline-grid;place-items:center;width:1.35em;height:1.35em;border-radius:50%;background:#4B93CF;color:#fff}
.tile-check svg{width:.8em;height:.8em;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.tile-choices{display:flex;gap:2.5cqh}
.tile-choices span{padding:.25em .95em;border:1px solid rgba(32,60,56,.25);border-radius:99px;font-weight:700}
.tile-choices .is-right{border-color:transparent;background:#24664F;color:#fff}
.tile-input{display:flex;align-items:center;justify-content:center;gap:.4em;width:100%;padding:2.6cqh 3cqh;border:1px solid #24664F;border-radius:4.5cqh;background:#E6EFE7}
.tile-input svg{width:1em;height:1em;fill:none;stroke:#24664F;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.tile-meter{width:100%;height:3.4cqh;overflow:hidden;border-radius:99px;background:rgba(32,60,56,.14)}
.tile-meter span{display:block;width:60%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#24664F,#F58245)}
.tile-sage{background:#CFE3D3}
.tile-yellow{background:#F6DC8F}
.tile-peach{background:#F9D3BC}
.tile-blue{background:#D3E4F4}
.tile-blue .tile-foot{justify-content:flex-start;gap:.45em}
.tile-white{background:#FFFFFF}
.tile-orange{background:#F58245}
.tile-orange .tile-foot{color:#203C38}
.tile-ink{background:#203C38;color:#F7F4EC}
.tile-ink .tile-foot{color:rgba(247,244,236,.68)}
.tile-ink img{width:auto;height:58cqh;transform:rotate(-8deg);filter:drop-shadow(0 2cqh 4cqh rgba(0,0,0,.3))}
.tile-video{padding:6.5cqh}
.tile-scene{position:absolute;inset:0;width:100%;height:100%}
.tile-chip{align-self:flex-start;padding:.3em .85em;border-radius:99px;background:rgba(255,255,255,.88)}
.tile-chip::before{background:#E5322D}
.tile-video .tile-body{justify-content:flex-end}
.tile-caption{padding:1.6cqh 3.6cqh;border-radius:3cqh;background:rgba(20,33,29,.76);color:#F7F4EC;font-size:max(10px,5.8cqh);white-space:nowrap}
.tile-caption u{text-decoration:none;border-bottom:.7cqh solid #EFA62F}

/* Statement with inline tiles; words light up as you scroll (JS adds .is-scrubbed) */
.statement{padding:clamp(96px,12vw,170px) 0}
.statement-pin{display:grid;place-items:center}
/* Pinned (JS): the text stays centred under the header for --pin-scroll of scrolling while it lights up,
   then the section ends and the page moves on. app.js starts after the first frame; <html class="motion">
   (head script) already gives the pin its room, so nothing on screen moves when app.js sets it up. */
:is(.statement.is-pinned,.motion .statement){--pin-scroll:130svh;height:calc(100svh - var(--header-h) + var(--pin-scroll));padding:0}
:is(.statement.is-pinned,.motion .statement) .statement-pin{position:sticky;top:var(--header-h);height:calc(100svh - var(--header-h))}
.statement-text{max-width:17em;margin:0 auto;font:800 clamp(32px,4.4vw,70px)/1.08 var(--display);letter-spacing:-.045em;text-align:center;text-wrap:balance}
/* overflow:hidden puts an inline-block's baseline at its bottom edge, so vertical-align is exact:
   Manrope's cap height is .725em, so a .86em tile centred on the caps sits at (.725 - .86) / 2 = -.0675em. */
.inline-tile{position:relative;display:inline-block;width:1.3em;height:.86em;margin:0 .06em;overflow:hidden;border-radius:.22em;vertical-align:-.0675em;color:#203C38}
.inline-tile svg{position:absolute;inset:0;width:.46em;height:.46em;margin:auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.inline-read{background:#CFE3D3}
.inline-watch{background:#F9D3BC}
.inline-watch svg{fill:currentColor}
.inline-card{background:#D3E4F4}
.statement-text.is-scrubbed .sw,.statement-text.is-scrubbed .inline-tile{opacity:.2;transition:opacity .35s ease}
.statement-text.is-scrubbed .lit{opacity:1}

/* Split screen: Watch / Read */
.split{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(var(--wrap),calc(100% - var(--gutter)*2));margin:0 auto}
.split-card{position:relative;display:flex;flex-direction:column;min-height:clamp(620px,90svh,880px);padding:28px;border-radius:var(--r-xl);overflow:hidden}
.split-watch{background:var(--panel-warm)}
.split-read{background:var(--split-read)}
/* Chips sit on a darker green where the Read block itself is the lighter one */
.split-visual{position:relative;flex:1;display:grid;place-items:center;padding:24px 0 48px}
.mock-video{position:relative;width:min(90%,580px);aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-md);background:#DCE9DE;box-shadow:var(--shadow-stage)}
.mock-scene{display:block;width:100%;height:100%}
.mock-caption{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);padding:6px 14px;border-radius:10px;background:rgba(20,33,29,.74);color:#F7F4EC;font-size:clamp(13px,1.35vw,19px);font-weight:500;white-space:nowrap}
.mock-word{padding:0 2px;border-bottom:2px solid #EFA62F;border-radius:3px;background:rgba(245,182,65,.3)}
.mock-paper{width:min(86%,520px);padding:22px 26px 28px;border-radius:var(--r-md);background:#FFFFFF;color:#203C38;box-shadow:var(--shadow-stage);transform:rotate(-2deg)}
.mock-paper .browser-bar{padding-bottom:12px;border-bottom:1px solid #DEDFD5;color:#526861}
.mock-paper-title{margin:14px 0 10px;font:800 clamp(20px,2vw,28px)/1.15 var(--display);letter-spacing:-.02em}
.mock-paper-text{margin:0;font-size:clamp(15px,1.3vw,18px);line-height:1.9}
.mock-menu{position:absolute;width:228px;padding:14px;border:1px solid rgba(60,60,67,.13);border-radius:18px;background:#FFFFFF;color:#1D1D1F;box-shadow:0 2px 6px rgba(0,0,0,.06),0 18px 40px rgba(0,0,0,.14);font-size:13px;text-align:left}
.mock-menu-watch{right:4%;bottom:6%;transform:rotate(3deg)}
.mock-menu-read{right:3%;top:10%;transform:rotate(3deg)}
.mock-menu-head{display:flex;align-items:baseline;gap:6px;padding-bottom:10px;border-bottom:1px solid rgba(60,60,67,.13)}
.mock-menu-head strong{font:800 19px var(--display);letter-spacing:-.02em}
.mock-article{color:#6E6E73;font-weight:600}
.mock-rank{margin-left:auto;padding:1px 8px;border-radius:99px;background:#24664F;color:#fff;font-size:11px;font-weight:700}
.mock-menu-label{margin:10px 0 2px;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#6E6E73}
.mock-menu-text{margin:0 0 12px}
.mock-menu-actions{display:flex;justify-content:space-between;gap:8px}
.mock-study,.mock-status{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:10px;font-size:12px;font-weight:650}
.mock-study{border:1px solid #0A84FF;color:#0A62C2}
.mock-study svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}
.mock-status{background:#F5C451;color:#3A2A00}
.split-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'name name' 'where actions';align-items:end;gap:18px 20px}
.split-name{grid-area:name}.split-where{grid-area:where}.split-actions{grid-area:actions}
.split-kicker{margin:0 0 6px;font-size:13px;font-weight:550;color:var(--text-secondary)}
.split-name h2{margin:0;font-size:clamp(24px,2.3vw,36px);line-height:1.08;letter-spacing:-.035em}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.chips li{padding:5px 11px;border-radius:99px;background:color-mix(in srgb,var(--bg) 70%,transparent);font-size:13px;font-weight:600}
.split-read .chips li{background:color-mix(in srgb,var(--split-read-on) 70%,transparent)}
.split-actions{display:flex;gap:8px}

/* Steps: three cards that switch the tour */
.tour-section{padding:clamp(96px,11vw,160px) 0 0}
.section-heading{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:end;gap:24px 48px;margin-bottom:44px}
.section-heading h2{margin:0}
.section-heading .lead{justify-self:end;margin:0;max-width:440px}
/* Step cards: compact so the cards and the demo fit one screen */
.tour-progress{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px}
.progress-item{position:relative;display:grid;grid-template-columns:1fr auto;align-content:space-between;gap:12px;min-height:0;padding:20px 24px 24px;border:0;border-radius:var(--r-lg);background:var(--panel);color:var(--text);text-align:left;transition:background .45s var(--ease),color .45s var(--ease),transform .25s var(--ease)}
.progress-item:hover{background:var(--panel-sage)}
.progress-item:active{transform:scale(.99)}
.step-label{grid-row:1;grid-column:1;display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600}
.step-label::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.step-title{grid-row:2;grid-column:1/-1;font:800 clamp(20px,1.9vw,30px)/1.1 var(--display);letter-spacing:-.03em;text-wrap:balance}
.step-num{grid-row:1;grid-column:2;font-size:14px;font-variant-numeric:tabular-nums;color:var(--text-secondary)}
.progress-item.done .step-label::before{background:var(--success)}
.progress-item[aria-selected=true]{background:var(--button-bg);color:var(--button-ink)}
.progress-item[aria-selected=true] .step-label::before{background:var(--orange)}
.progress-item[aria-selected=true] .step-num{color:inherit;opacity:.7}
/* While pinned, the active card fills as you scroll towards the next step (--step-fill from app.js) */
.tour-pin.is-pinned .progress-item[aria-selected=true]::after{content:'';position:absolute;left:24px;right:24px;bottom:12px;height:3px;border-radius:99px;background:linear-gradient(90deg,var(--orange) calc(var(--step-fill,0) * 100%),color-mix(in srgb,currentColor 22%,transparent) 0)}
.tour-block{display:grid;padding:clamp(24px,3.4vw,48px);border-radius:var(--r-xl);background:var(--panel)}
/* All steps share one cell, so the block keeps the tallest step's height and steps cross-fade in place */
.tour-panel{grid-area:1/1;display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center;transition:opacity .5s ease .12s,translate .7s var(--ease) .06s,visibility 0s}
/* Hidden steps wait just off to the side they come from: the old one drifts out as the new one slides in */
.tour-block .tour-panel[hidden]{display:grid!important;visibility:hidden;opacity:0;transition:opacity .3s ease,translate .45s ease-in,visibility 0s .45s}
.tour-panel.is-before[hidden]{translate:-36px 0}
.tour-panel.is-after[hidden]{translate:36px 0}
@keyframes enter{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
.instructions{list-style:none;counter-reset:steps;padding:0;margin:26px 0}
.instructions li{counter-increment:steps;position:relative;padding-left:38px;margin:18px 0;font-size:15px;line-height:1.6}
.instructions li::before{content:counter(steps);position:absolute;left:0;top:0;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:var(--bg);font-size:11px;font-weight:700}
.tip-inline{display:none}
.tip{margin:22px 0 0;padding:3px 0 3px 16px;border-left:3px solid var(--orange);font-size:13px;line-height:1.7;color:var(--text-secondary)}
.tour-nav{grid-row:2;display:flex;align-items:center;gap:16px;margin-top:28px;padding-top:18px;border-top:1px solid var(--separator)}
/* Pinned (JS): cards and demo stay in view under the header while scrolling switches the steps */
.tour-pin.is-pinned{--pin-scroll:165svh;height:calc(100svh - var(--header-h) + var(--pin-scroll))}
.tour-pin.is-pinned .tour-stick{position:sticky;top:var(--header-h);height:calc(100svh - var(--header-h));display:flex;flex-direction:column;justify-content:center;padding-block:12px}
.tour-pin.is-pinned .tour-progress{flex:none}
.tour-pin.is-pinned .tour-block{padding:clamp(20px,2.4vw,36px)}
.tour-pin.is-pinned .tour-panel{gap:40px}
.tour-pin.is-pinned .tour-nav{margin-top:18px;padding-top:14px}
/* While measuring, show the flashcard in its tallest state (answer checked) */
.tour-pin.is-measuring #review-answer[hidden]{display:block!important}
.tour-pin.is-measuring #review-check{display:none}
/* A checked answer takes the place of the question line and the hint row, so the card does not grow */
.flashcard:has(#review-input:disabled) #review-form label,.flashcard:has(#review-input:disabled) #review-clue,
.tour-pin.is-measuring #review-form label,.tour-pin.is-measuring #review-clue{display:none}
.tour-pin.is-pinned .review-stage{position:relative}
/* Compact pinned layout for shorter windows (app.js tries it when the full one does not fit) */
.tour-pin.is-compact .tip,.tour-pin.is-compact .stage-label,.tour-pin.is-compact .saved-preview,.tour-pin.is-compact .tour-nav{display:none}
.tour-pin.is-compact .progress-item{padding:14px 20px 18px;gap:6px}
.tour-pin.is-compact .progress-item[aria-selected=true]::after{bottom:9px}
.tour-pin.is-compact .step-title{font-size:clamp(18px,1.6vw,24px)}
.tour-pin.is-compact .tour-block{padding:clamp(18px,2vw,28px)}
.tour-pin.is-compact .eyebrow{margin-bottom:10px}
.tour-pin.is-compact .tour-panel h3{margin-bottom:8px;font-size:clamp(22px,2vw,28px)}
.tour-pin.is-compact .story .lead{margin:0;font-size:15px;line-height:1.55}
.tour-pin.is-compact .instructions{margin:14px 0 0}
.tour-pin.is-compact .instructions li{margin:8px 0;font-size:14px;line-height:1.5}
.tour-pin.is-compact .stage{padding:18px}
.tour-pin.is-compact .video-demo{width:min(100%,calc(30svh * 16 / 9))}
.tour-pin.is-compact .video-feedback{margin-top:10px}
.tour-pin.is-compact .paper{padding:16px 20px 18px}
.tour-pin.is-compact .paper h4{margin:10px 0 8px}
.tour-pin.is-compact .paper>p{line-height:1.8}
.tour-pin.is-compact .flashcard{padding:36px 20px 20px}
.tour-pin.is-compact .card-prompt{margin:12px 0 4px}
.tour-pin.is-compact #review-form label{margin:6px 0 8px}
.tour-pin.is-pinned .video-demo{width:min(100%,calc(34svh * 16 / 9));margin-inline:auto}
.tour-nav .button{margin-left:auto;min-width:180px}

.stage{min-width:0;padding:26px;border-radius:var(--r-lg);background:var(--bg-grouped)}
.stage-label{margin-bottom:20px}
.browser-bar{display:flex;justify-content:space-between;gap:12px;margin-bottom:18px;font-size:11px;color:var(--text-secondary)}
.browser-dots{letter-spacing:2px;opacity:.5}

/* Read demo */
.paper{position:relative;padding:22px 24px 26px;border-radius:18px;background:var(--bg)}
.paper .browser-bar{padding-bottom:14px;border-bottom:1px solid var(--separator)}
.paper h4{margin:16px 0 14px;font-size:clamp(23px,2.3vw,29px);font-weight:700;line-height:1.2;letter-spacing:-.5px}
.paper>p{margin:0;font-size:18px;line-height:1.95}
.nowrap{white-space:nowrap}
.word{margin:0 -1px;padding:0 2px;border:0;border-bottom:2px solid transparent;border-radius:3px;background:transparent;font:inherit;line-height:inherit;color:inherit;transition:background .15s}
.word.unknown{border-bottom-color:var(--highlight)}
.word.unknown:hover,.word[aria-expanded=true]{background:var(--highlight-soft)}
.word.saved{background:var(--saved-soft);border-bottom-color:var(--saved)}
.word.known{border-bottom-color:transparent}
.word.known:hover{background:var(--bg-soft)}
#panel-read:not([hidden]) .word[data-word=bibliotheek].unknown{animation:glow 1.4s ease-in-out 1.2s 1}
@keyframes glow{45%,60%{background:var(--highlight-soft);box-shadow:0 0 0 5px var(--highlight-soft)}}
.saved-preview{display:flex;gap:13px;align-items:center;margin:20px 4px 0;font-size:14px}
.saved-preview p{margin:3px 0 0;font-size:13px;line-height:1.5;color:var(--text-secondary)}
.check{flex-shrink:0;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--success);color:var(--bg)}
.check svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* Watch demo */
.video-stage{background:var(--bg);box-shadow:var(--shadow-stage)}
/* Cream behind the clip (its own background), so no dark sliver shows at the rounded edge */
.video-demo{position:relative;overflow:hidden;aspect-ratio:16/9;border:1px solid var(--separator);border-radius:18px;background:#F7F4EC}
.video-demo video{display:block;width:100%;height:100%;object-fit:contain;cursor:pointer}
/* One play button in the middle while the clip is stopped; none over the picture while it plays */
.video-toggle{position:absolute;z-index:3;left:50%;top:50%;display:grid;place-items:center;width:76px;height:76px;padding:0;border:1px solid #ffffff80;border-radius:50%;background:#F7F4EC;color:#203C38;box-shadow:0 8px 32px #10251e40;translate:-50% -50%;transition:opacity .2s,scale .2s var(--ease),background .15s}
.video-toggle:hover{background:#fff;scale:1.05}
.video-toggle svg{width:28px;height:28px;margin-left:4px;fill:currentColor;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.video-toggle[aria-pressed=true] svg{margin-left:0;fill:none;stroke-width:3}
.video-demo.is-playing .video-toggle{opacity:0;scale:.85;pointer-events:none}
.video-demo.is-playing .video-toggle:focus-visible{opacity:1;scale:1;pointer-events:auto}
.not-started::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent,#10251e30);pointer-events:none}
/* Transcript: page-edge drawer, as in the onboarding and on YouTube */
.video-feedback{margin:14px 0 0;padding:2px 0 2px 12px;border-left:3px solid var(--orange);font-size:13px;line-height:1.6;color:var(--text)}
/* The tab and the drawer slide in from the page edge (app.js adds .is-shown after unhiding them) */
.transcript-tab{transform:translateX(calc(100% + 16px));transition:transform .45s var(--ease),background .15s;position:absolute;right:0;top:40%;z-index:40;pointer-events:auto;display:flex;align-items:center;gap:9px;writing-mode:vertical-rl;padding:16px 10px;border:1px solid var(--separator-strong);border-right:0;border-radius:12px 0 0 12px;background:var(--bg-page);color:var(--text);font-size:13px;font-weight:600;box-shadow:-3px 3px 12px #14211d12}
.transcript-tab:hover{background:var(--bg-grouped)}
.transcript-tab.is-shown{transform:none}
.transcript-tab svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.transcript-tab.nudge{animation:tab-nudge 1.4s ease-in-out 1.2s 1}
@keyframes tab-nudge{45%,60%{background:#F5B641;color:#203C38;box-shadow:0 0 0 6px #f5b64144}}
/* The rail runs down the page edge beside the tour block, exactly as tall as the block (app.js measures
   --rail-top/--rail-bottom, the gap between the pinned stick and the cards), and pins along with it. In the
   rail the drawer sticks under the header while the block is taller than the window; otherwise it sits level
   with the block's top and bottom edge. */
.tour-pin{position:relative}
.tour-stick{position:relative}
.transcript-rail{position:absolute;top:0;right:0;bottom:0;width:min(360px,92vw);pointer-events:none}
.transcript-rail-stick{height:100%}
.tour-pin.is-pinned .transcript-rail-stick{position:sticky;top:var(--header-h);height:calc(100svh - var(--header-h))}
.transcript-slot{position:absolute;left:0;right:0;top:var(--rail-top,0px);bottom:var(--rail-bottom,0px)}
.transcript-stick{position:sticky;top:calc(var(--header-h) + 12px);height:min(100%,calc(100svh - var(--header-h) - 28px))}
.demo-transcript{position:absolute;z-index:41;inset:0;pointer-events:auto;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--separator-strong);border-right:0;border-radius:18px 0 0 18px;background:var(--bg-page);box-shadow:-10px 0 28px #14211d22;transform:translateX(calc(100% + 40px));transition:transform .6s var(--ease)}
.demo-transcript.is-shown{transform:none}
.demo-transcript-header{display:flex;align-items:center;gap:12px;flex-shrink:0;padding:12px 16px;border-bottom:1px solid var(--separator);font:700 16px var(--display)}
#transcript-close{display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid var(--separator-strong);border-radius:10px;background:var(--bg);color:var(--text)}
#transcript-close:hover{background:var(--bg-grouped)}
#transcript-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#transcript-lines{flex:1;min-height:0;overflow-y:auto;padding:10px}
/* Stacked layouts: the transcript sits right under the video, always open (app.js adds .is-inline) */
.demo-transcript.is-inline{position:static;z-index:auto;width:auto;margin-top:12px;border-right:1px solid var(--separator-strong);border-radius:18px;box-shadow:none;transform:none;transition:none}
.demo-transcript.is-inline .demo-transcript-header{padding:10px 14px;font-size:15px}
.demo-transcript.is-inline #transcript-close{display:none}
.demo-transcript.is-inline #transcript-lines{overflow:visible;padding:8px}
.demo-transcript.is-inline .transcript-row:last-child{margin-bottom:0}
.transcript-row{display:flex;flex-direction:column-reverse;gap:6px;margin:0 0 8px;padding:12px;border:1px solid var(--separator-strong);border-radius:12px;background:var(--bg-page);font-size:16px;line-height:1.65;cursor:pointer;transition:background .15s}
.transcript-row:hover{background:var(--bg-soft)}
.transcript-row.active{background:var(--bg-grouped);box-shadow:inset 3px 0 var(--orange)}
.transcript-seek{align-self:flex-start;padding:0;border:0;border-radius:3px;background:transparent;color:var(--text-secondary);font:400 11px/1.5 var(--font);font-variant-numeric:tabular-nums}
.transcript-seek:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.transcript-row.active .transcript-seek{color:var(--text);font-weight:600}
.transcript-row .word{color:var(--text)}
.beta-badge{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:99px;background:var(--orange-soft);color:var(--orange-ink);font:700 10px/1.6 var(--font);font-style:normal;letter-spacing:.06em;text-transform:uppercase;vertical-align:2px}
.feature-card h3 .beta-badge{vertical-align:3px}

/* Remember demo */
.flashcard{position:relative;padding:56px 22px 30px;border-radius:20px;background:var(--bg);text-align:center}
.card-meta{display:block;margin:0;font-size:10px}
.card-prompt{margin:26px 0 8px;font:800 34px/1.1 var(--display);letter-spacing:-.02em}
.review-hint{position:absolute;top:14px;right:16px;padding:6px 12px;border:1px solid var(--separator-strong);border-radius:10px;background:var(--bg-page);color:var(--text-secondary);font-size:12px}
.review-hint:hover{color:var(--text);background:var(--bg-grouped)}
#review-form label{display:block;margin:12px 0;color:var(--text-secondary);font-size:14px}
#review-input{display:block;width:100%;max-width:340px;margin:auto;padding:12px 14px;border:1px solid var(--separator-strong);border-radius:12px;background:var(--bg-page);color:var(--text);font:500 20px var(--font);text-align:center}
#review-input.correct{border-color:var(--success);background:var(--success-soft)}
#review-input.incorrect{border-color:#C95848}
#review-clue{min-height:24px;margin:8px 0;font-family:ui-monospace,monospace;letter-spacing:3px;color:var(--text-secondary)}
#review-check{min-width:160px}
.answer{margin-top:18px;padding-top:16px;border-top:1px dashed var(--separator-strong)}
.answer-word{font:800 26px var(--display);margin-bottom:6px}
.answer p{margin:0;font-size:14px;color:var(--text-secondary)}
.feedback{min-height:22px;margin:16px 4px 0;font-size:14px;color:var(--text-secondary)}
.review-stage .quiet{display:block;padding-bottom:0}

/* How to start: three step cards in a row. The first says the extension is not in the store yet and keeps
   an address for one email (the waitlist form of the phone apps below, fitted into a card). */
.start-section{padding:clamp(96px,11vw,160px) 0 0}
.start-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.start-step{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:28px;border-radius:var(--r-lg);background:var(--panel)}
.start-num{display:grid;place-items:center;width:46px;height:46px;margin-bottom:22px;border-radius:14px;background:var(--bg);color:var(--orange-text);font:800 20px/1 var(--display)}
.start-step h3{margin:0 0 12px;font-size:clamp(22px,1.9vw,28px);letter-spacing:-.03em}
.start-step>p{margin:0;max-width:30em;font-size:15px;line-height:1.65;color:var(--text-secondary)}
.start-step>.start-status{display:inline-flex;align-items:center;gap:8px;margin:2px 0 24px;padding:5px 12px;border-radius:15px;background:var(--orange-soft);color:var(--orange-ink);font-size:13px;font-weight:650;line-height:1.4}
.start-status::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:var(--orange)}
.start-step>.start-foot{margin-top:auto;padding-top:24px}
.start-step>p.start-foot{font-size:14px;font-weight:600;color:var(--text)}
.start-form,.start-done{width:100%;margin-top:auto}
.start-form .waitlist-label{font-size:15px}
.start-form .waitlist-row{flex-wrap:wrap}
.start-form .waitlist-row input{flex:1 1 180px}
.start-form .waitlist-row .button{flex:1 0 auto}
.start-form .waitlist-note{margin-top:10px}
.start-done{gap:12px;padding:18px}
.start-done .waitlist-done-title{font-size:19px}
.start-done .quiet{margin-top:6px;padding:6px 0}
/* Narrower: step 1 goes across (its form beside the title), steps 2 and 3 side by side under it */
@media(min-width:601px) and (max-width:1180px){
  .start-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .start-step:first-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:auto auto 1fr;column-gap:40px;align-items:start;justify-items:start}
  .start-step:first-child>*{grid-column:1}
  .start-step:first-child>:is(.start-form,.start-done){grid-column:2;grid-row:1/4;align-self:end;justify-self:stretch}
}

/* Features: flat rounded cards */
.features-section{padding:clamp(96px,11vw,160px) 0 0}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.feature-card{display:flex;flex-direction:column;min-height:280px;padding:28px;border-radius:var(--r-lg);background:var(--panel);transition:background .25s var(--ease)}
.feature-card:hover{background:var(--panel-sage)}
.feature-card h3{margin:0 0 14px;font-size:clamp(22px,1.9vw,28px);letter-spacing:-.03em}
.feature-card p{margin:0;max-width:30em;font-size:15px;line-height:1.65;color:var(--text-secondary)}
.feature-icon{display:grid;place-items:center;width:46px;height:46px;margin-top:auto;border-radius:14px;background:var(--bg);color:var(--orange)}
.feature-icon svg,.milestone-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.feature-card p+.feature-icon{margin-top:auto}
.feature-card>p{margin-bottom:28px}

/* Progress: two halves */
.duo-pin{margin-top:clamp(96px,11vw,160px)}
/* Pinned (JS): the halves hold (centred, or with the progress card in view when taller than the
   window) for --pin-scroll while the numbers count up and the milestone lights, then move on */
.duo-pin.is-pinned{--pin-scroll:190svh;height:calc(var(--duo-h,100svh) + var(--pin-scroll))}
.duo-pin.is-pinned .duo{position:sticky;top:var(--duo-top,var(--header-h))}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.duo-card{min-height:560px;padding:clamp(28px,4vw,48px);border-radius:var(--r-xl)}
.duo-copy{display:flex;flex-direction:column;justify-content:space-between;gap:40px;background:var(--duo-copy)}
.duo-copy h2{font-size:clamp(34px,3.8vw,60px)}
.duo-quote{margin:0;max-width:12em;font:800 clamp(26px,2.6vw,40px)/1.1 var(--display);letter-spacing:-.035em}
.duo-demo{display:grid;place-items:center;background:var(--duo-bg)}
.dashboard-card{width:min(100%,480px);background:var(--bg);box-shadow:var(--shadow-stage)}
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.metrics>div{padding:18px;border-radius:16px;background:var(--bg-soft)}
.metrics strong{display:block;font:800 42px/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.metrics span{font-size:13px;color:var(--text-secondary)}
.goal-row{display:flex;justify-content:space-between;margin:22px 0 10px;font-size:14px}
.goal-row strong{font-variant-numeric:tabular-nums}
.goal-meter{height:10px;border-radius:99px;background:var(--bg-soft);overflow:hidden}
/* --fill (0–1) comes from app.js while counting; without it the goal shows as reached. The bar moves by
   transform only, so the browser animates it without layout or paint: the span is a full-width pill slid
   left by the part still to fill (its round end stays round), and its gradient (::before) is slid back and
   squeezed to the filled part, so it runs green to orange across the fill like a bar of that width. */
.goal-meter span{display:block;height:100%;border-radius:inherit;overflow:hidden;transform:translateX(calc((var(--fill,1) - 1) * 100%));transition:transform .15s linear}
.goal-meter span::before{content:'';display:block;height:100%;background:linear-gradient(90deg,var(--success),var(--orange));transform-origin:left;transform:translateX(calc((1 - var(--fill,1)) * 100%)) scaleX(var(--fill,1));transition:transform .15s linear}
.milestone{display:flex;gap:14px;align-items:center;margin-top:22px;padding:14px;border-radius:16px;background:var(--bg-soft);transition:background .5s ease,opacity .5s ease}
.milestone-icon{flex-shrink:0;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--orange);color:#203C38;transition:background .4s ease,color .4s ease}
/* Counting (JS): the milestone waits dimmed, then lights up with a pop, a spark turn and a glow ring */
.dashboard-card.is-counting:not(.is-complete) .milestone{opacity:.55}
.dashboard-card.is-counting:not(.is-complete) .milestone-icon{background:var(--separator);color:var(--text-tertiary)}
.dashboard-card.is-complete .milestone{background:var(--orange-soft)}
.dashboard-card.is-complete .milestone-icon{animation:milestone-pop .7s var(--ease) both,milestone-glow 1.4s ease-out .25s 2}
.dashboard-card.is-complete .milestone-icon svg{animation:milestone-spark .9s var(--ease) both}
@keyframes milestone-pop{0%{transform:scale(.6) rotate(-14deg)}55%{transform:scale(1.2) rotate(6deg)}100%{transform:none}}
@keyframes milestone-glow{from{box-shadow:0 0 0 0 rgba(245,130,69,.55)}to{box-shadow:0 0 0 16px rgba(245,130,69,0)}}
@keyframes milestone-spark{from{transform:rotate(-120deg) scale(.6)}to{transform:none}}
.milestone strong{font-size:15px}
.milestone p{margin:2px 0 0;font-size:13px;color:var(--text-secondary)}

/* Pricing — same plans as Settings → Subscription */
.pricing-section{padding:clamp(96px,11vw,160px) 0 0}
/* Pinned (JS, side-by-side layouts): the block holds for --pin-scroll with the plans fully in view
   (centred when it all fits, otherwise the heading may go up under the header), then moves on */
.price-pin.is-pinned{--pin-scroll:57svh;height:calc(var(--price-h,100svh) + var(--pin-scroll))}
.price-pin.is-pinned .price-stick{position:sticky;top:var(--price-top,var(--header-h))}
/* Released (JS, scrolling back up): a pin only holds on the way down, so going up it drops its stretch */
.is-pinned.is-released{--pin-scroll:0px}
/* Tighter cards for short windows (JS adds .is-tight when the cards would not fit under the header) */
.price-pin.is-tight .plan{padding:20px 24px}
.price-pin.is-tight .plan-flag{top:18px;right:22px}
.price-pin.is-tight .plan-price{margin:16px 0 2px}
.price-pin.is-tight .plan-amount{font-size:clamp(44px,4vw,58px)}
.price-pin.is-tight .plan-billing{margin-bottom:12px;padding-bottom:12px}
.price-pin.is-tight .plan-features{gap:5px;margin-bottom:16px}
.price-pin.is-tight .plan-features li{font-size:13px}
.price-pin.is-tight .plan .button{min-height:42px;padding-block:9px}
.pricing-heading{grid-template-columns:minmax(0,1fr) auto}
.pricing-heading .lead{justify-self:start;margin-top:18px;max-width:620px}
.switch-label{display:inline-flex;align-items:center;gap:12px;padding:10px 16px;border-radius:14px;background:var(--panel);font-size:14px;font-weight:650;cursor:pointer}
.switch{position:relative;width:44px;height:26px}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.slider{position:absolute;inset:0;border-radius:99px;background:var(--separator-strong);transition:background .2s;pointer-events:none}
.slider::after{content:'';position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .2s var(--ease)}
.switch input:checked+.slider{background:var(--success)}
.switch input:checked+.slider::after{transform:translateX(18px)}
.switch input:focus-visible+.slider{outline:3px solid var(--orange);outline-offset:3px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;padding:30px 28px 28px;border-radius:var(--r-lg);background:var(--panel)}
.plan-flag{position:absolute;top:28px;right:28px;margin:0;padding:4px 11px;border-radius:99px;background:var(--orange);color:#203C38;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.plan-name{margin:0;font:700 15px var(--display);display:flex;align-items:center;gap:9px}
.plan-name::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.plan-lifetime .plan-name::before{background:var(--orange)}
.plan-price{display:flex;align-items:baseline;gap:2px;margin:48px 0 4px}
.plan-currency{font:800 24px var(--display)}
.plan-amount{font:800 clamp(56px,5vw,76px)/1 var(--display);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.plan-per{margin-left:4px;font-size:14px;color:var(--text-secondary)}
.plan-billing{min-height:20px;margin:0 0 22px;padding-bottom:20px;border-bottom:1px solid var(--separator-strong);font-size:13px;color:var(--text-label)}
.plan-features{flex:1;display:flex;flex-direction:column;gap:10px;margin:0 0 26px;padding:0;list-style:none}
.plan-features li{display:flex;gap:10px;font-size:14px;line-height:1.45}
.plan-features svg{flex-shrink:0;width:17px;height:17px;margin-top:1px;fill:none;stroke:var(--success);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.plan-lifetime .plan-features svg{stroke:var(--orange)}
.plan .button{width:100%}
.plan-pro{background:var(--button-bg);color:var(--button-ink)}
.plan-pro .plan-name{color:inherit}
.plan-pro .plan-name::before{background:var(--orange)}
.plan-pro .plan-per,.plan-pro .plan-billing{color:inherit;opacity:.72}
.plan-pro .plan-billing{border-color:color-mix(in srgb,var(--button-ink) 25%,transparent)}
.plan-pro .plan-features svg{stroke:var(--orange)}
.plan-pro .button{background:var(--button-ink);color:var(--button-bg)}
.plan-pro .button:hover{background:var(--bg-soft);color:var(--text)}
.plans-note{max-width:760px;margin:22px 0 0}

/* Phone apps: copy, store badges and the waitlist on the left; the app on a phone on the right */
.apps-section{padding:clamp(96px,11vw,160px) 0 0}
.apps .duo-card{min-height:640px}
.apps-copy .eyebrow .beta-badge{margin-left:8px;vertical-align:1px}
.apps-copy .lead{margin:0}
.apps-join{max-width:560px}
/* Store badges: black with a grey rim like the stores' own, but "coming soon" rather than a link.
   They pick the phone for the waitlist (radio buttons underneath). */
.store-pick{min-width:0;margin:0 0 26px;padding:0;border:0}
/* The question over them says they are a choice, not links to the stores. Padding, not margin, under a
   legend (some browsers ignore its margins), with room for the tick of a picked badge. */
.store-pick legend{margin:0;padding:0 0 14px}
.waitlist-optional{font:500 14px var(--font);color:var(--text-secondary)}
.store-badges{display:flex;flex-wrap:wrap;gap:12px}
.store-badge{position:relative;flex:0 1 auto;display:inline-flex;align-items:center;gap:10px;min-height:58px;padding:8px 20px 8px 14px;border:1px solid #A6A6A6;border-radius:13px;background:#0B0B0B;color:#fff;cursor:pointer;transition:transform .15s var(--ease),box-shadow .2s}
.store-badge:hover{transform:translateY(-1px)}
.store-badge input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.store-badge:has(input:focus-visible){outline:3px solid var(--orange);outline-offset:3px}
.store-badge:has(input:checked){box-shadow:0 0 0 3px var(--duo-copy),0 0 0 5px var(--orange)}
.store-logo{flex:none;width:26px;height:26px;fill:currentColor}
.store-text{display:flex;flex-direction:column;font:600 21px/1.05 var(--font);letter-spacing:-.015em;white-space:nowrap}
.store-text small{font-size:11px;font-weight:500;letter-spacing:.01em;opacity:.86}
.store-tick{position:absolute;top:-9px;right:-9px;width:24px;height:24px;padding:5px;border-radius:50%;background:var(--orange);color:#203C38;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.5);transition:opacity .2s,transform .3s var(--ease)}
.store-badge:has(input:checked) .store-tick{opacity:1;transform:none}
.waitlist-label{display:block;margin:0 0 10px;font:700 17px/1.3 var(--display)}
.waitlist-row{display:flex;gap:8px}
/* 16px text, so phones do not zoom into the field */
.waitlist-row input{flex:1;min-width:0;min-height:52px;padding:12px 16px;border:1px solid var(--separator-strong);border-radius:14px;background:var(--bg);color:var(--text);font:500 16px var(--font)}
.waitlist-row input::placeholder{color:var(--text-tertiary)}
.waitlist-row input[aria-invalid=true]{border-color:var(--orange)}
.waitlist-row .button{min-height:52px}
.waitlist-error{margin:10px 0 0;font-size:14px;font-weight:600;color:var(--orange-ink)}
.waitlist-note{max-width:470px;margin-top:12px}
.waitlist-done{display:flex;align-items:flex-start;gap:14px;padding:22px;border-radius:var(--r-md);background:var(--bg)}
.waitlist-done:focus{outline:none}
.waitlist-done p{margin:0 0 4px;font-size:15px;line-height:1.55;color:var(--text-secondary)}
.waitlist-done .waitlist-done-title{margin:3px 0 6px;font:800 22px/1.2 var(--display);letter-spacing:-.02em;color:var(--text)}
.waitlist-done-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:16px}
.waitlist-done-actions .quiet{padding-inline:0}
.waitlist-done-actions .button{white-space:normal;text-align:center}
.waitlist-done-actions .button svg{flex:none}
/* The phone: a fixed light screen (it is a picture of the app), rising from the block's bottom edge */
.apps-visual{position:relative;display:flex;align-items:flex-end;justify-content:center;padding-bottom:0;overflow:hidden;background:var(--duo-bg)}
.phone{--w:clamp(250px,22vw,310px);flex:none;width:var(--w);aspect-ratio:9/19;margin-bottom:calc(var(--w) * -.36);padding:9px;border-radius:calc(var(--w) * .16);background:#14211D;box-shadow:var(--shadow-stage),inset 0 0 0 2px #33443E}
.phone-screen{height:100%;overflow:hidden;padding:12px 16px;border-radius:calc(var(--w) * .135);background:#F7F4EC;color:#203C38;font-size:12px;line-height:1.4}
.phone-status{display:flex;align-items:center;justify-content:space-between;padding:0 8px;font-weight:650}
.phone-bars{display:flex;align-items:flex-end;gap:2px;height:10px}
.phone-bars i{width:3px;height:40%;border-radius:1px;background:currentColor}
.phone-bars i:nth-child(2){height:60%}.phone-bars i:nth-child(3){height:80%}.phone-bars i:nth-child(4){height:100%}
.phone-top{display:flex;align-items:center;justify-content:space-between;margin:20px 0 18px}
.phone-top img{width:72px;height:auto}
.phone-top span{padding:3px 9px;border-radius:99px;background:#DCE9DE;font-size:10.5px;font-weight:650}
.phone-eyebrow{margin:0 0 10px;font-size:9.5px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:#526861}
.phone-card{position:relative;padding:15px 15px 17px;overflow:hidden;border:1px solid #C3D6C8;border-radius:18px;background:#DCE9DE}
.phone-card-label{display:flex;align-items:center;gap:6px;font-size:9px;font-weight:650;letter-spacing:1.2px;text-transform:uppercase;color:#526861}
.phone-card-label svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.phone-bookmark{position:absolute;top:-4px;right:14px;width:26px;height:auto}
.phone-card strong{display:block;margin:24px 0 2px;font:800 30px/1.05 var(--display);letter-spacing:-.035em}
.phone-meaning{font-size:14px;color:#526861}
.phone-card p{margin:14px 0 0;padding-top:12px;border-top:1px solid #B7CCBD;font-size:13px}
.phone-card b{font-weight:inherit;box-shadow:inset 0 -.14em #E5A126}
.phone-grades{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:12px}
.phone-grades span{padding:9px 0;border:1px solid #DEDFD5;border-radius:10px;background:#fff;font-size:10.5px;font-weight:650;text-align:center}
.phone-grades .is-picked{border-color:transparent;background:#203C38;color:#F7F4EC}
.phone-sync{display:flex;align-items:center;justify-content:center;gap:6px;margin:14px 0 0;font-size:10.5px;color:#526861}
.phone-sync svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.phone-clip{margin-top:14px;padding:12px 14px 14px;border:1px solid #DEDFD5;border-radius:16px;background:#fff}
.phone-clip p{margin:8px 0 0;font-size:13px;line-height:1.55}
.phone-clip u{padding:0 2px;border-bottom:2px solid #E5A126;border-radius:3px;background:rgba(245,182,65,.3);text-decoration:none}
/* Phones only (see the hero): the way to the apps for someone who scanned a QR code */
.hero-phone-note{display:none}
.hero-phone-note a{font-weight:600}
/* Short windows (a zoomed-in laptop): tighter blocks, so the form fits under the header */
@media(min-width:901px) and (max-height:760px){
  .apps .duo-card{min-height:0;padding-block:32px}
  .phone{--w:270px}
  .apps-copy{gap:24px}
}
@media(max-width:900px){
  .hero-phone-note{display:block;margin-top:6px}
  .apps .duo-card{min-height:0}
  .apps-copy{gap:32px}
  /* The block takes the phone's height, less the part cut off at the bottom */
  .apps-visual{padding-top:40px}
}
@media(max-width:600px){
  .store-badges{gap:8px}
  .store-badge{flex:1 1 136px;justify-content:center;gap:8px;min-height:52px;padding:7px 10px}
  .store-logo{width:22px;height:22px}
  .store-text{font-size:16px}
  .store-text small{font-size:10px}
  .waitlist-row{flex-direction:column}
  .waitlist-done{flex-direction:column;gap:10px;padding:18px}
  .waitlist-done-actions .button{flex:1 1 100%}
  .apps-visual{padding-top:28px}
}

/* FAQ: panel on the left, rows on the right */
.faq-section{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start;padding:clamp(96px,11vw,160px) 0 0}
.faq-panel{position:sticky;top:88px;display:flex;flex-direction:column;min-height:min(600px,calc(100svh - 110px));padding:clamp(28px,3.5vw,44px);border-radius:var(--r-xl);background:var(--panel-sage)}
.faq-panel h2{max-width:7em;font-size:clamp(34px,4vw,64px)}
.faq-bookmark{align-self:center;width:clamp(96px,11vw,150px);height:auto;margin:auto 0;padding:32px 0;transform:rotate(-8deg)}
.faq-panel-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.faq-panel-foot p{margin:0;font:700 17px var(--display)}
.faq-list{display:flex;flex-direction:column;gap:10px}
.faq-list details{border-radius:var(--r-md);background:var(--panel);transition:background .2s}
.faq-list details:hover,.faq-list details[open]{background:var(--panel-sage)}
.faq-list summary{position:relative;display:block;min-height:76px;padding:24px 80px 24px 26px;font:700 18px/1.4 var(--display);cursor:pointer;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:'';position:absolute;right:14px;top:14px;width:48px;height:48px;border-radius:14px;background:linear-gradient(var(--text),var(--text)) center/16px 2px no-repeat,linear-gradient(var(--text),var(--text)) center/2px 16px no-repeat,var(--bg);transition:transform .25s var(--ease)}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list p{margin:-6px 0 0;padding:0 80px 24px 26px;font-size:15px;line-height:1.7;color:var(--text-secondary)}

/* Closing statement */
.closing{padding:clamp(120px,14vw,200px) 0;text-align:center}
.closing h2{max-width:11em;margin:0 auto;font-size:clamp(40px,5.8vw,92px);line-height:1}
.closing-row{display:flex;align-items:center;justify-content:center;gap:28px;margin-top:40px}
.closing-row p{max-width:340px;margin:0;font:700 17px/1.4 var(--display);text-align:left}

/* Footer: one rounded block with a giant line */
.site-footer{padding-bottom:12px}
.footer-block{--pad:clamp(24px,3vw,40px);width:min(var(--wrap),calc(100% - var(--gutter)*2));margin:0 auto;padding:var(--pad) var(--pad) 28px;overflow:hidden;border-radius:var(--r-xl);background:var(--panel-strong)}
/* Five columns and Back to top in one row down to 1181px (the gap narrows with the window); below that three per row */
.footer-top{display:grid;grid-template-columns:repeat(5,minmax(0,max-content)) 1fr;gap:28px clamp(32px,11.6vw - 95px,72px)}
@media(max-width:1180px){.footer-top{grid-template-columns:repeat(3,minmax(0,1fr))}}
.footer-col{display:flex;flex-direction:column;gap:4px}
.footer-col a{font-size:17px;text-decoration:none}
.footer-col a:hover{text-decoration:underline;text-underline-offset:3px}
.footer-label{margin:0 0 6px;font-size:14px;color:var(--text-label)}
/* Social links: icon + name; placeholders without href until the accounts exist */
.footer-social{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none}
.footer-social li{display:flex}
.footer-social a{display:inline-flex;align-items:center;gap:10px}
.footer-social a:not([href]){cursor:default}
.footer-social a:not([href]):hover{text-decoration:none}
.footer-social svg{flex:none;width:16px;height:16px;fill:currentColor}
/* Store links: text with a "soon" tag until the store pages exist */
.footer-get a{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.footer-get a:hover{text-decoration:none}
.footer-get a:hover span:first-child{text-decoration:underline;text-underline-offset:3px}
.soon-tag{padding:2px 8px;border-radius:99px;background:color-mix(in srgb,var(--bg) 70%,transparent);color:var(--text-secondary);font-size:12px;font-weight:600;line-height:18px}
.back-to-top{justify-self:end;align-self:start;display:inline-flex;align-items:center;gap:8px;font-size:17px;white-space:nowrap;text-decoration:none}
.back-to-top svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.back-to-top:hover{text-decoration:underline;text-underline-offset:3px}
/* Sized so the line spans the block: its width is about 6.6× the font size. */
.footer-giant{margin:clamp(56px,8vw,110px) 0 clamp(28px,3.4vw,52px);padding-bottom:.14em;font:800 min(calc((100vw - var(--gutter)*2 - var(--pad)*2) / 6.8),212px)/.9 var(--display);letter-spacing:-.06em;white-space:nowrap;color:var(--text)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer-bottom .wordmark{width:92px}
.footer-bottom p{margin:0;font-size:14px;color:var(--text-secondary)}
.footer-bottom .brand+p{margin-right:auto}

/* Scroll reveal (JS adds .reveal-ready to <html>) */
.reveal-ready .reveal{opacity:0;translate:0 28px;transition:opacity .7s var(--ease),translate .7s var(--ease)}
.reveal-ready .reveal.is-visible{opacity:1;translate:0 0}

/* Sections further down skip layout and paint until they come near the screen, so the first screen paints
   sooner. Pinned sections that app.js measures side by side stay out. After load app.js lays them out one
   per task (.is-warm), and all at once (.full-layout) before it works out where a section link lands. */
.split,.start-section,.features-section,.apps-section,.faq-section,.closing,.site-footer{content-visibility:auto;contain-intrinsic-size:auto 900px}
.full-layout :is(.split,.start-section,.features-section,.apps-section,.faq-section,.closing,.site-footer,.tour-section,.duo-pin,.pricing-section),
:is(.split,.start-section,.features-section,.apps-section,.faq-section,.closing,.site-footer,.tour-section,.duo-pin,.pricing-section).is-warm{content-visibility:visible}

/* Legal pages share the base above */
.legal a{color:var(--text)}
.legal h1,.legal h2{letter-spacing:-.02em}
.legal th,.legal td{border-bottom-color:var(--separator)!important}

/* Responsive */
/* "Try the demo" leads to the same place as "How it works"; drop it where the column is too narrow */
@media(min-width:901px) and (max-width:1400px){
  .header-actions .button-small{display:none}
}
@media(max-width:1250px){.header-actions>.button-small{display:none!important}}
@media(max-width:600px){
  #hero-title{font-size:clamp(40px,calc((100vw - var(--gutter)*2) / 7.2),60px)}
  .header-actions{gap:6px!important}
}
@media(max-width:380px){.header-actions .theme-switch{display:none}}
@media(max-width:1180px){
  .navigation a{padding:0 8px}
  .tour-panel{gap:36px}
}
@media(max-width:1080px){
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .split-card{min-height:640px}
}
@media(max-width:900px){
  :root{--gutter:16px}
  .menu-toggle{display:grid;place-content:center;gap:6px;order:3;width:48px;height:48px;padding:0;border:0;border-radius:14px;background:var(--bg)}
  .menu-toggle span{display:block;width:18px;height:2px;border-radius:2px;background:var(--text);transition:transform .2s}
  .menu-toggle[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
  .menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}
  .navigation{position:absolute;top:72px;left:var(--gutter);right:var(--gutter);display:none;flex-direction:column;gap:2px;margin:0;padding:8px;border-radius:var(--r-md);box-shadow:var(--shadow-float)}
  .navigation.is-open{display:flex}
  .navigation a{min-height:48px;font-size:16px;border-radius:12px}
  .header-right{min-width:0}
  .header-actions{order:2}
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-copy{padding:28px 0 8px;gap:28px}
  .hero-board{height:clamp(360px,80vw,520px)}
  .section-heading,.pricing-heading{grid-template-columns:1fr}
  .section-heading .lead{justify-self:start}
  .tour-progress{grid-template-columns:repeat(3,minmax(0,1fr))}
  .progress-item{padding:16px 18px 20px}
  .tour-panel{grid-template-columns:1fr}
  /* Only the current step takes room (the Watch step is much taller with its transcript) */
  .tour-block .tour-panel[hidden]{display:none!important}
  .tour-panel.is-entering{animation:enter .45s var(--ease) both}
  .tip-drawer{display:none}
  .tip-inline{display:inline}
  .duo{grid-template-columns:1fr}
  .duo-card{min-height:0}
  .plans{grid-template-columns:1fr;max-width:520px}
  .plan-pro{order:-1}
  .faq-section{grid-template-columns:1fr}
  /* Not sticky here: top:auto drops the sticky offset, which would shift the panel over the questions */
  .faq-panel{position:relative;top:auto;min-height:0}
  .faq-bookmark{position:absolute;right:28px;top:28px;width:72px;margin:0;padding:0}
  .faq-panel h2{padding-right:90px}
  .closing-row{flex-direction:column;gap:18px}
  .tour-section,.duo-pin,.pricing-section{content-visibility:auto;contain-intrinsic-size:auto 1200px}
  .closing-row p{text-align:center}
  .footer-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .back-to-top{justify-self:start}
}
@media(max-width:600px){
  :root{--header-h:64px}
  html{scroll-padding-top:72px}
  .header-inner{height:64px;gap:8px}
  .navigation{top:62px}
  .wordmark{width:92px}
  .header-actions .button{display:none}
  .theme-switch button{width:30px;height:36px}
  .menu-toggle{width:44px;height:44px}
  h1{font-size:clamp(42px,13vw,60px)}
  .hero-actions .button{flex:1 1 100%}
  .lead{font-size:15px}
  .hero-board{height:500px}
  .statement-text{font-size:clamp(28px,8vw,40px)}
  .split-card{min-height:0;padding:18px;border-radius:26px}
  .split-visual{padding:12px 0 150px}
  .mock-video,.mock-paper{width:100%}
  .mock-paper{padding:16px 18px 20px}
  .mock-menu{width:200px;padding:12px}
  .mock-menu-watch{right:6px;bottom:8px}
  .mock-menu-read{right:6px;top:auto;bottom:8px}
  .split-bar{grid-template-columns:1fr;grid-template-areas:'name' 'where' 'actions'}
  .split-actions .button{flex:1}
  .tour-progress{grid-template-columns:1fr;gap:8px}
  .progress-item{grid-template-columns:auto 1fr auto;align-items:center;padding:16px 18px;border-radius:18px}
  .step-label{grid-row:1;grid-column:1}
  .step-title{grid-row:1;grid-column:2;font-size:18px}
  .step-num{grid-row:1;grid-column:3}
  .tour-block{padding:16px;border-radius:26px}
  .stage{padding:16px;border-radius:20px}
  .paper{padding:16px}
  .paper>p{font-size:16px;line-height:1.85}
  .video-toggle{width:60px;height:60px}
  .video-toggle svg{width:24px;height:24px}
  .tour-nav .button{min-width:0}
  .feature-grid{grid-template-columns:1fr}
  .feature-card{min-height:0;padding:22px}
  .start-steps{grid-template-columns:1fr}
  .start-step{padding:22px}
  .start-num{margin-bottom:16px}
  .start-form .waitlist-row :is(input,.button){flex:none}
  .duo-card{padding:24px;border-radius:26px}
  .plan{padding:24px 22px}
  .faq-list summary{min-height:64px;padding:20px 70px 20px 20px;font-size:16px}
  .faq-list summary::after{top:10px;right:10px;width:44px;height:44px}
  .faq-list p{padding:0 20px 20px}
  .footer-top{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

@media(max-width:700px){
  .transcript-row{font-size:15px;padding:10px}
}

/* Wide screens: make room for the open transcript instead of covering the video. The section's right
   padding grows with the drawer, so the content eases aside as the drawer slides in. */
@media(min-width:901px){
  .tour-pin{transition:padding-right .6s var(--ease)}
  .tour-pin.is-measuring{transition:none}
  body.transcript-layout .tour-pin{padding-right:360px}
}
@media(min-width:901px) and (max-width:1320px){
  body.transcript-layout .tour-pin:not(.is-pinned) #panel-watch{grid-template-columns:1fr;gap:28px}
  body.transcript-layout .tour-pin:not(.is-pinned) #panel-watch .story{max-width:640px}
}

@media(min-width:901px){.tour-section .section-heading{transition:padding-right .6s var(--ease)}body.transcript-layout .tour-section .section-heading{padding-right:360px}}
@media(prefers-reduced-motion:reduce){.tour-section .section-heading{transition:none}}