/* Slotscoop — slotscoop.com
   Design: docs/SITE-DESIGN.md · Words: docs/SITE-COPY.md
   Breakpoints: desktop (base, ≥ 992) · tablet ≤ 991 · phone ≤ 767 · small phone ≤ 479.
   Motion: transitions only, triggered by classes from assets/site.js; no JS = the final, still page. */

/* ---------------------------------------------------------------- fonts */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:300;font-display:swap;src:url("/assets/fonts/BricolageGrotesque_36pt-Light.woff2") format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/BricolageGrotesque_36pt-Regular.woff2") format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/BricolageGrotesque_36pt-Medium.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/Figtree-Regular.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/Figtree-SemiBold.woff2") format("woff2")}

/* ---------------------------------------------------------------- tokens */
:root{
  --lemon:#FDFE83; --pale:#F6F7AE; --cream:#FAFBD4; --plum:#8C54A1; --purple:#7C2A9A; --purple-down:#6B2484; --black:#000;
  --ink-72:#46463B; --ink-62:#5F5F51; --ink-55:#70715F; --ink-line:#DCDDBB;
  --paper-72:#B4B599; --paper-62:#9B9C83; --paper-55:#8A8A75; --paper-track:#282822; --paper-line:#1E1E19;
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --text:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-pop:cubic-bezier(.34,1.56,.64,1); --ease-sweep:cubic-bezier(.65,0,.35,1);
}

/* ---------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.js-motion{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--black);font-family:var(--text);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
p,h1,h2,h3,ul{margin:0}
[hidden]{display:none!important}
[id]{scroll-margin-top:96px}
::selection{background:var(--lemon);color:var(--black)}
.ss-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ss-nowrap{white-space:nowrap}
.ss-skip{position:absolute;left:12px;top:-60px;z-index:100;padding:12px 16px;border-radius:12px;background:var(--cream);color:var(--black);font-weight:600;text-decoration:none}
.ss-skip:focus{top:12px;outline:3px solid var(--purple);outline-offset:2px}

.ss-container{width:100%;max-width:1440px;margin:0 auto;padding:0 64px}
.ss-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}

/* ---------------------------------------------------------------- type */
.ss-h2{font-family:var(--display);font-weight:300;font-size:64px;line-height:1.04;letter-spacing:-.02em;text-wrap:balance}
.ss-h3{font-family:var(--display);font-weight:500;font-size:28px;line-height:1.2;letter-spacing:-.01em}
.ss-display{font-family:var(--display);font-weight:300;font-size:clamp(64px,8.4vw,120px);line-height:1;letter-spacing:-.025em;text-wrap:balance}
.ss-lead{max-width:640px;font-size:22px;line-height:1.45}
.ss-body{max-width:560px;font-size:18px;line-height:1.55}
.ss-small{font-size:16px;line-height:1.45}
.ss-ink-62{color:var(--ink-62)}
.ss-ink-55{color:var(--ink-55)}
.ss-paper-72{color:var(--paper-72)}
.ss-paper-55{color:var(--paper-55)}

/* ---------------------------------------------------------------- buttons + links */
.ss-btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;font-family:var(--text);font-weight:600;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .2s ease,color .2s ease,transform .12s ease}
.ss-btn:active{transform:scale(.98)}
.ss-btn-lg{height:56px;min-width:220px;padding:0 28px;font-size:18px}
.ss-btn-sm{height:44px;padding:0 20px;font-size:16px}
.ss-btn-primary{background:var(--purple);color:var(--cream)}
.ss-btn-primary:hover{background:var(--purple-down)}
.ss-btn-night{background:var(--cream);color:var(--black)}
.ss-btn-night:hover{background:var(--pale)}
.ss-btn-secondary{background:transparent;color:var(--black);box-shadow:inset 0 0 0 1.5px var(--ink-55)}
.ss-btn-secondary:hover{background:var(--pale)}
.ss-btn-ghost-night{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 1.5px var(--paper-55)}
.ss-btn-ghost-night:hover{background:var(--paper-line)}
.ss-btn-copy{height:44px;min-width:88px;padding:0 16px;font-size:16px}
.ss-link{color:var(--plum);font-weight:600;text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px}
.ss-link:hover{color:var(--purple);text-decoration-thickness:2px}
.ss-link-night{color:var(--cream);font-weight:600;text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px}
.ss-link-night:hover{text-decoration-thickness:2px}
.ss-btn:focus-visible,.ss-link:focus-visible,.ss-link-night:focus-visible,.ss-nav-link:focus-visible,.ss-footer-link:focus-visible,.ss-brand:focus-visible,.ss-q:focus-visible{outline:3px solid var(--purple);outline-offset:3px;border-radius:6px}
.ss-btn:focus-visible{border-radius:999px}
.ss-hero :focus-visible,.ss-night :focus-visible,.ss-header:not(.is-solid) :focus-visible{outline-color:var(--cream)}

/* CTAs by platform: Mac by default (no JS = the Mac version) */
.ss-only-other{display:none}
html.is-other .ss-only-mac{display:none!important}
html.is-other .ss-only-other{display:block}
html.is-other .ss-only-other.ss-btn{display:inline-flex}

/* pre-launch (SITE-COPY v8.2): "Coming soon for Mac" takes the main button's place in the hero, the price block and the
   close, on every device. A quiet status pill, not a control: the large button's box (56 high, 52 on phones; full
   radius; min 220), so nothing moves on launch day, but no hover, no pointer, no focus, and never the grey of a
   disabled button. On cream: pale lemon + purple (7.10:1), the family of "Save 45% vs. Monthly" and the app's
   "learned" tag. On black (the hero): its night twin, as purple turns cream there (§3.10), on the hint pill's own dark
   surface (15.8:1); a pale capsule on black would read as the night button and sit beside the one lemon word. */
.ss-soon{display:inline-flex;align-items:center;justify-content:center;height:56px;min-width:220px;padding:0 28px;border-radius:999px;background:var(--pale);color:var(--purple);font-family:var(--text);font-weight:600;font-size:18px;line-height:1;white-space:nowrap;cursor:default}
.ss-soon-night{background:var(--paper-line);box-shadow:inset 0 0 0 1px var(--paper-track);color:var(--cream)}

/* ---------------------------------------------------------------- header */
.ss-header{position:sticky;top:0;z-index:50;background:var(--black);color:var(--cream);transition:background-color .2s ease,color .2s ease,box-shadow .2s ease}
.ss-header.is-solid{background:var(--cream);color:var(--black);box-shadow:inset 0 -1px 0 var(--ink-line)}
.ss-header-bar{display:flex;align-items:center;justify-content:space-between;height:80px}
.ss-brand{display:grid;align-items:center;justify-items:start;line-height:0;text-decoration:none}
.ss-brand-word{grid-area:1/1;width:118px;height:26px;color:var(--cream)}
.ss-brand-mark{grid-area:1/1;width:44px;height:28px;color:var(--purple)}
/* the wordmark over the hero, the mark once the header is solid: out 140 ms, then in 160 ms. Never both at once. */
.ss-brand-word{opacity:1;transition:opacity .16s ease .14s}
.ss-brand-mark{opacity:0;transition:opacity .14s ease}
.ss-header.is-solid .ss-brand-word{opacity:0;transition:opacity .14s ease}
.ss-header.is-solid .ss-brand-mark{opacity:1;transition:opacity .16s ease .14s}
.ss-nav{display:flex;align-items:center;gap:32px}
.ss-nav-link{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:16px;line-height:1;color:inherit;text-decoration:none}
.ss-nav-link:hover{text-decoration:underline;text-underline-offset:.22em}
.ss-hdr-cta{background:var(--cream);color:var(--black)}
.ss-header.is-solid .ss-hdr-cta{background:var(--purple);color:var(--cream)}
.ss-header.is-solid .ss-hdr-cta:hover{background:var(--purple-down)}
html.js .ss-hdr-cta{opacity:0;pointer-events:none;transition:opacity .2s ease,background-color .2s ease}
html.js .ss-header.show-cta .ss-hdr-cta{opacity:1;pointer-events:auto}

/* ---------------------------------------------------------------- 1 · hero (night) */
.ss-hero{background:var(--black);color:var(--cream);padding:40px 0 104px}
.ss-hero-bottom{margin-top:72px;align-items:end}
.ss-hero-copy{grid-column:1/8}
.ss-hero-title{font-family:var(--display);font-weight:400;font-size:56px;line-height:1.06;letter-spacing:-.015em;color:var(--cream);text-wrap:balance}
.ss-hero-sub{margin-top:16px;max-width:560px;font-size:20px;line-height:1.5;color:var(--paper-72)}
.ss-hero-cta{grid-column:8/13;justify-self:end;width:100%;max-width:460px}
.ss-cta-note{margin-top:16px;font-size:16px;line-height:1.45;color:var(--paper-72)}
.ss-cta-meta{margin-top:4px;font-size:16px;line-height:1.45;color:var(--paper-55)}

/* the sentence: two lines at every width, "Let’s keep the" / the slot. Default = the final frame:
   "Let’s keep the" / the note "from a hint" / [momentum].
   Above the slot hangs a zero-size anchor (.hs-over) at the top edge of the lemon block: the hint pill (motion only)
   and the note (at rest) sit on it. Line 2's top margin is the pause between the lines: room for the pill, clear of
   line 1's descenders (pill height + --pill-air + the pill's gap − .226em; derivation in SITE-DESIGN §4.3).
   Per breakpoint: --pill-fs (the pill's type; 27 px = the app's size until 2026-10-02; the site's pills are a schematic and stay as they are while the app's is 0.8 of this — owner, 2026-10-02), --pill-gap (pill → block), --pill-air
   (line 1's descenders → pill), --note-fs / --note-gap (the note), --t-fit (the largest size at which "what’s the
   word…" fits the line). */
.ss-hero{--pill-fs:27px;--pill-gap:12px;--pill-air:8px;--note-fs:20px;--note-gap:7px;--t-fit:calc((min(100vw,1440px) - 128px) / 7.45)}
.ss-hs{font-family:var(--display);font-weight:300;font-size:clamp(64px,10.2vw,152px);line-height:1.04;letter-spacing:-.03em;color:var(--cream);-webkit-user-select:none;user-select:none}
.hs-l1,.hs-l2{display:block}
.hs-l2{margin-top:calc(var(--pill-fs) * 1.963 + var(--pill-air) + var(--pill-gap) - .226em)}
.hs-slot{position:relative;display:inline-block;white-space:nowrap}
.hs-t-at{display:inline-block;width:0;white-space:nowrap;opacity:0;font-size:min(1em,var(--t-fit))}
.hs-t{display:inline-block;line-height:1.2;color:var(--paper-55);transform-origin:0 .93em;transform:skewX(-8deg)}
.hs-word{position:relative;display:inline-block;line-height:1.2}
.hs-word-hl{position:absolute;z-index:1;top:0;bottom:0;left:-.045em;right:-.05em;padding-left:.045em;color:var(--black);line-height:1.2}
.hs-word-bg{position:absolute;z-index:-1;top:.19em;bottom:.18em;left:0;right:0;background:var(--lemon);border-radius:.05em}
.hs-stop{margin-left:.07em}
.hs-over{position:absolute;left:0;bottom:calc(100% - .19em);width:0;height:0}
/* the hint pill, drawn like the app's (HintPill.swift): Bricolage 500, cream words, 4 px plum dots, padding 9/24/12,
   gap 14, all in em of its own size. On the black page it takes the dark fill it shows over section 2's paper. */
.hs-pill{position:absolute;left:0;bottom:var(--pill-gap);opacity:0}
.hs-pill-in{display:flex;align-items:center;gap:.519em;padding:.333em .889em .444em;border-radius:999px;background:var(--paper-line);box-shadow:inset 0 0 0 1px var(--paper-track);font-family:var(--display);font-weight:500;font-size:var(--pill-fs);line-height:1.185;letter-spacing:0;color:var(--cream);white-space:nowrap}
.hs-pw{display:block}
.hs-pd{display:block;flex:none;width:calc(var(--pill-fs) * .148);height:calc(var(--pill-fs) * .148);border-radius:50%;background:var(--plum);font-size:0;color:transparent}
.hs-note{position:absolute;left:0;bottom:var(--note-gap);font-family:var(--text);font-weight:600;font-size:var(--note-fs);line-height:1.2;letter-spacing:0;color:var(--paper-62);white-space:nowrap}
.ss-hero.can-replay .ss-hs{cursor:pointer}

/* armed (JS + motion allowed): an empty slot and an empty pause above it; the word waits under the marker */
html.js-motion .ss-hero .hs-word{color:transparent}
html.js-motion .ss-hero:not(.is-play) .hs-t-at{opacity:0;transform:translateY(.12em)}
html.js-motion .ss-hero:not(.is-play) .hs-pill{opacity:0;transform:scale(.98)}
html.js-motion .ss-hero:not(.is-play) .hs-pw{opacity:0;transform:translateY(.148em)}
html.js-motion .ss-hero:not(.is-play) .hs-word-hl{clip-path:inset(0 100% 0 0);transform:translateY(-.06em)}
html.js-motion .ss-hero:not(.is-play) .hs-stop{opacity:0}
html.js-motion .ss-hero:not(.is-play) .hs-note{opacity:0;transform:translateY(4px)}
/* the play (≈ 2.95 s, then still). Two thoughts swap in the slot: each rises in on its wrapper, then drifts up and out
   on its inner. While "what’s the word…" waits, the hint arrives above the slot the way the overlay does: the pill fades
   in with a 2 % scale and its words step in 50 ms apart. The thought goes, the pill goes (200 ms, as in the app), and
   the lemon marker writes the first word into the slot as it settles .06em down. Then the full stop, then the note.
   One class, transitions and delays only. */
html.js-motion .ss-hero.is-play .hs-t-at{opacity:1;transform:none;transition:opacity .2s ease-out,transform .32s var(--ease-out)}
html.js-motion .ss-hero.is-play .hs-t{opacity:0;transform:translateY(-.12em) skewX(-8deg);transition:opacity .16s ease-in,transform .24s ease-in}
html.js-motion .ss-hero.is-play .hs-t1{transition-delay:.10s}
html.js-motion .ss-hero.is-play .hs-t1 .hs-t{transition-delay:.62s}
html.js-motion .ss-hero.is-play .hs-t2{transition-delay:.76s}
html.js-motion .ss-hero.is-play .hs-t2 .hs-t{transition-delay:2.16s}
html.js-motion .ss-hero.is-play .hs-pill{opacity:1;transform:none;transition:opacity .12s ease-out 1.5s,transform .12s ease-out 1.5s}
html.js-motion .ss-hero.is-play .hs-pw{opacity:1;transform:none;transition:opacity .18s ease-out,transform .18s ease-out}
html.js-motion .ss-hero.is-play .hs-pw1{transition-delay:1.52s}
html.js-motion .ss-hero.is-play .hs-pw2{transition-delay:1.57s}
html.js-motion .ss-hero.is-play .hs-pw3{transition-delay:1.62s}
html.js-motion .ss-hero.is-play .hs-pill-in{opacity:0;transition:opacity .2s ease-in 2.24s}
html.js-motion .ss-hero.is-play .hs-word-hl{clip-path:inset(0 0 0 0);transform:none;transition:clip-path .42s var(--ease-sweep) 2.24s,transform .5s var(--ease-out) 2.24s}
html.js-motion .ss-hero.is-play .hs-stop{opacity:1;transition:opacity .16s ease-out 2.58s}
html.js-motion .ss-hero.is-play .hs-note{opacity:1;transform:none;transition:opacity .3s ease-out 2.64s,transform .3s var(--ease-out) 2.64s}

/* ---------------------------------------------------------------- sections */
.ss-section{padding:160px 0}
.ss-section-flush{padding-top:0}
.ss-night{background:var(--black);color:var(--cream)}

/* 2 · two ways back to the word */
.ss-ways-title{grid-column:1/10}
.ss-ways{grid-column:1/-1;margin-top:72px;row-gap:64px}
.ss-way{grid-column:span 6}
.ss-frame{position:relative;height:200px;border-radius:28px;background:var(--pale);overflow:hidden}
.ss-notch{position:absolute;top:0;left:50%;width:188px;height:34px;margin-left:-94px;background:var(--black);border-radius:0 0 14px 14px}
/* the camera (v8.4; owner: 25 % bigger, 40 % more transparent): a lens centred in the notch, so the black tab reads as the
   top of a MacBook. Decorative, CSS only.
   Bezel: cream at 23.5 % on black; glass: the night tones (--paper-line, --paper-track); one cream glint, top left.
   Never a green light: it would say the camera is on. */
.ss-notch::after{content:"";position:absolute;top:10.75px;left:50%;width:12.5px;height:12.5px;margin-left:-6.25px;border-radius:50%;background:radial-gradient(circle 2.1px at 34% 32%,rgba(250,251,212,.9),rgba(250,251,212,0)),radial-gradient(circle closest-side,#000 0 38%,#1E1E19 52%,#282822 80%,#0D0D0B 100%);box-shadow:inset 0 0 0 1px #3B3B33;opacity:.6}
.ss-frame-stack{position:absolute;top:42px;left:0;right:0;display:flex;flex-direction:column;align-items:center}
/* 1:1 with the app's points (renders @3x: echo 579 × 159, hint 1218 × 159). In a narrow frame the hint shrinks to fit,
   and the echo keeps the same scale (193 / 406 = .4754), so both pills always read as one size. */
.ss-pill-echo{width:193px;max-width:calc((100% - 32px) * .4754)}
.ss-pill-hint{width:406px;max-width:calc(100% - 32px)}
.ss-heard{display:flex;align-items:center;gap:8px;margin-top:20px;font-weight:600;font-size:16px;line-height:1;color:var(--ink-72)}
.ss-heard svg{width:20px;height:20px;flex:none}
.ss-way-name{margin-top:32px;font-weight:600;font-size:16px;line-height:1.3;color:var(--ink-55)}
.ss-way-title{margin-top:8px}
.ss-way-body{margin-top:12px;color:var(--ink-62)}
/* 2 · Ask for a word (v8.5): the Hints card's last line. The keys are the app's key caps at text size (DESIGN.md →
   InlineKeys): each cap fills the text's line box, from the descender line to the ascender line, so the line keeps its
   height. Figtree has no ⌃ or ⌥: the caps use the system face (SF on Apple devices, as in the app). */
.ss-way-ask{color:var(--black)}               /* the whole line in black: the owner wanted it easier to see (2026-10-02) */
.ss-keys{white-space:nowrap;margin-right:.1em}
.ss-key{display:inline-block;box-sizing:border-box;height:1.58em;min-width:1.58em;padding:0 .3em;vertical-align:-.33em;overflow:hidden;border-radius:.42em;background:var(--pale);box-shadow:inset 0 0 0 1px var(--ink-line);font:600 .76em/1.58em -apple-system,BlinkMacSystemFont,system-ui,"Segoe UI","Segoe UI Symbol",Roboto,"Noto Sans Symbols 2",sans-serif;color:var(--black);text-align:center}
.ss-key+.ss-key{margin-left:.21em}
.ss-ways-foot{grid-column:1/9;margin-top:56px;color:var(--ink-62)}
.ss-ways-foot p+p{margin-top:8px}

/* 2.1 · your language: a band under the two ways. Left: label, title, line (the ways' own type). Right: six chips
   (labels, not buttons: pale lemon like the app's unpicked language chips, no hover, no pointer) and the calls line. */
.ss-langs{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin-top:80px;padding-top:40px;border-top:1px solid var(--ink-line)}
.ss-langs-head{grid-column:1/6}
.ss-langs .ss-way-name{margin-top:0}
.ss-langs-line{margin-top:12px;color:var(--ink-62)}
.ss-langs-list{grid-column:7/13;padding-top:29px;container-type:inline-size}
.ss-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
/* six in a row (≈ 580 px), else three and three, else two by two: never one chip alone on a line (a lone "Russian"
   would stand out; the owner wants it last and quiet). The widths are the chips' natural ones, with margins. */
@container (max-width:599px){.ss-chips{max-width:360px}}
@container (max-width:319px){.ss-chips{max-width:240px}}
/* black with lemon text: the hint pill's own colours — they catch the eye first (owner, 2026-10-01) */
.ss-chips li{display:flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;background:var(--black);font-weight:600;font-size:16px;line-height:1;color:var(--lemon);cursor:default}
.ss-langs-calls{margin-top:16px;color:var(--ink-62)}
.ss-app{color:var(--black);font-weight:600}   /* the call apps' names stand out in the quiet line (owner) */

/* 3 · your words, not a script */
.ss-ns-left{grid-column:1/8}
.ss-ns-right{grid-column:9/13;grid-row:1/span 2}
.ss-ns-lead{margin-top:24px;color:var(--ink-62)}
.ss-rule{margin-top:64px}
.ss-rule-label,.ss-said-label{font-weight:600;font-size:16px;line-height:1.3;color:var(--ink-55)}
/* "momentum" is 4.95em (+ the block's .1em): it must fit cols 1–7, so below ~1180 px the size follows the column */
.ss-rule-word{margin-top:8px;font-family:var(--display);font-weight:300;font-size:min(120px,calc(11.57vw - 17px));line-height:1;letter-spacing:-.03em}
.ss-rule-never{margin-top:40px}
.ss-rule-sentence{margin-top:8px;max-width:600px;font-family:var(--display);font-weight:300;font-size:32px;line-height:1.25;letter-spacing:-.01em;color:var(--ink-55)}
.ss-rule-sentence del{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--ink-55)}
.ss-hl{position:relative;z-index:0;display:inline-block;line-height:1.2}
.ss-hl::before{content:"";position:absolute;z-index:-1;top:.19em;bottom:.18em;left:-.045em;right:-.05em;background:var(--lemon);border-radius:.05em}
/* 3 · the switch (v8.4): the render's own names are the control; the two renders crossfade */
.ss-sw{margin:0;max-width:344px}
.ss-sw-stage{position:relative;container-type:inline-size;border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.06),0 18px 40px -12px rgba(0,0,0,.18)}
.ss-sw-img{position:relative;z-index:2;display:block;width:100%;height:auto;border-radius:12px;transition:opacity .15s linear}
.ss-sw-phrases{position:absolute;top:0;left:0}
.ss-sw[data-side="words"] .ss-sw-phrases,.ss-sw[data-side="phrases"] .ss-sw-words{z-index:1;opacity:0;transition:opacity 0s linear .15s}
html.js-motion .ss-sw-img{transition:opacity .28s var(--ease-out)}
html.js-motion .ss-sw[data-side="words"] .ss-sw-phrases,html.js-motion .ss-sw[data-side="phrases"] .ss-sw-words{transition:opacity 0s linear .28s}
.ss-sw-tabs{position:absolute;inset:0;z-index:3;pointer-events:none}
/* "I know this" (v8.4, owner): each row of Their phrases flips between "I know this" and "known", as in the app — the
   flipped render's band for that row (rows at --t…--b pt of the 409-pt render) shows over the base. Phrases side only. */
.ss-sw-rows{position:absolute;inset:0;z-index:3;pointer-events:none;--u:calc(100cqi / 344)}
.ss-sw-row{position:absolute;inset:0;pointer-events:none}
.ss-sw-flip{position:absolute;inset:0;width:100%;height:auto;border-radius:12px;opacity:0;clip-path:inset(calc(var(--t) * var(--u)) 0 calc((409 - var(--b)) * var(--u)) 0);transition:opacity .15s linear}
.ss-sw[data-side="phrases"] .ss-sw-row.is-flipped .ss-sw-flip{opacity:1}
.ss-sw-know{position:absolute;right:calc(8 * var(--u));top:calc(var(--t) * var(--u));height:calc((var(--b) - var(--t)) * var(--u));width:calc(100 * var(--u));margin:0;padding:0;border:0;border-radius:8px;background:transparent;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.ss-sw[data-side="phrases"] .ss-sw-know{pointer-events:auto}
.ss-sw-know:focus-visible{outline:3px solid var(--purple);outline-offset:0}
/* the tab = the focus ring's box: the name ± 4 pt, from 4 pt over its caps to 3 pt under its slot */
.ss-sw-tab{--u:calc(100cqi / 344);position:absolute;top:calc(20 * var(--u));height:calc(27 * var(--u));margin:0;padding:0;border:0;border-radius:8px;background:transparent;cursor:pointer;pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.ss-sw-tab-words{left:calc(36 * var(--u));width:calc(98.67 * var(--u))}
.ss-sw-tab-phrases{left:calc(147 * var(--u));width:calc(117 * var(--u))}
.ss-sw-tab[aria-selected="true"]{cursor:default}
.ss-sw-tab:focus-visible{outline:3px solid var(--purple);outline-offset:0}
/* the hit area: the whole header band (0–58 pt), the two meeting mid-gap (140.85 pt); the chevron stays out */
.ss-sw-tab::before{content:"";position:absolute;top:calc(-20 * var(--u));bottom:calc(-11 * var(--u))}
.ss-sw-tab-words::before{left:calc(-6 * var(--u));right:calc(-6.18 * var(--u))}
.ss-sw-tab-phrases::before{left:calc(-6.15 * var(--u));right:calc(-6 * var(--u))}
/* the app's hover (DESIGN → Phrases, P1/P2): a 12 % slot previews under the other name */
.ss-sw-tab::after{content:"";position:absolute;left:calc(4 * var(--u));top:calc(21.67 * var(--u));height:calc(2 * var(--u));border-radius:calc(1 * var(--u));background:rgba(0,0,0,.12);opacity:0;transition:opacity .12s ease-out}
.ss-sw-tab-words::after{width:calc(90.67 * var(--u))}
.ss-sw-tab-phrases::after{width:calc(109 * var(--u))}
@media (hover:hover) and (pointer:fine){.ss-sw-tab[aria-selected="false"]:hover::after{opacity:1}}
/* the captions share one cell (the taller one sets it), so nothing below moves on a switch */
.ss-sw-caps{display:grid;margin-top:16px}
.ss-sw-cap{grid-area:1/1;color:var(--ink-62);transition:opacity .15s linear}
.ss-sw[data-side="words"] .ss-sw-cap-phrases,.ss-sw[data-side="phrases"] .ss-sw-cap-words{opacity:0;visibility:hidden;transition:none}
html.js-motion .ss-sw-cap{transition:opacity .2s var(--ease-out) .1s,visibility 0s .1s}
html.js-motion .ss-sw[data-side="words"] .ss-sw-cap-phrases,html.js-motion .ss-sw[data-side="phrases"] .ss-sw-cap-words{transition:opacity .1s ease-in,visibility 0s linear .1s}
.ss-uses{margin-top:48px;color:var(--ink-62)}

/* 4 · their phrases, explained (v8, Understanding). The H2 and the lead across the top; under them one row, top-aligned:
   their line as type (cols 1–6) and section 2's frame with the app's real gloss pill (cols 7–12, where the hint frame
   sits), the app's name and the small line under it. */
.ss-und-title{grid-column:1/10;grid-row:1}
.ss-und-lead{grid-column:1/9;grid-row:2;margin-top:24px;color:var(--ink-62)}
.ss-said{grid-column:1/7;grid-row:3;margin:72px 0 0}
/* the line is SITE-COPY's string as is: the quotes come from CSS, and the opening one hangs, so the L lines up with
   "They say" */
.ss-said-line{margin:8px 0 0;font-family:var(--display);font-weight:300;font-size:48px;line-height:1.12;letter-spacing:-.02em;color:var(--ink-72);text-wrap:balance;quotes:"\201C" "\201D"}
.ss-said-line p{text-indent:-.27em}
.ss-said-line p::before{content:open-quote}
.ss-said-line p::after{content:close-quote}
/* the two phrases the pill explains: the dictionary's dotted mark for "explained below". Not lemon: lemon stays the
   word Slotscoop gives you. */
.ss-term{text-decoration:underline dotted var(--ink-55);text-decoration-thickness:.06em;text-underline-offset:.16em}
.ss-und-shot{grid-column:7/13;grid-row:3;margin-top:72px}
/* 1:1 with the app's points (render @3x: 1019 × 252) */
.ss-pill-gloss{width:340px;max-width:calc(100% - 32px)}
.ss-gloss-note{margin-top:20px;max-width:calc(100% - 32px);font-weight:600;font-size:16px;line-height:1.25;color:var(--ink-72);text-align:center}
.ss-und-small{margin-top:8px;max-width:560px;color:var(--ink-62)}

/* 5 · heard on your Mac (night) */
.ss-pv-title{grid-column:1/-1}
.ss-pv-body{grid-column:1/7;grid-row:2;margin-top:72px}
.ss-pv-promise{font-family:var(--display);font-weight:400;font-size:32px;line-height:1.2;letter-spacing:-.01em;color:var(--cream)}
.ss-pv-lead{margin-top:20px}
.ss-pv-nos{grid-column:8/13;grid-row:2;margin-top:72px;padding:0;list-style:none}
.ss-pv-nos li{padding:18px 0;border-top:1px solid var(--paper-track);font-family:var(--display);font-weight:400;font-size:28px;line-height:1.2;letter-spacing:-.01em}
.ss-pv-nos li:last-child{border-bottom:1px solid var(--paper-track)}
.ss-pv-check{grid-column:1/7;grid-row:3;margin-top:56px}
.ss-code{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-top:16px;padding:16px 16px 16px 20px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--paper-track)}
.ss-code-text{padding-top:10px;font-family:var(--mono);font-size:16px;line-height:1.5;color:var(--cream);white-space:pre-wrap}
.ss-code-text code{font:inherit}
.ss-pv-result{margin-top:16px}
.ss-pv-helpers{margin-top:8px}
.ss-pv-link{margin-top:20px}

/* 6 · price */
.ss-pr-head{grid-column:1/10}
.ss-pr-trial{grid-column:1/6;grid-row:2;margin-top:72px}
.ss-pr-cta{margin-top:28px}
.ss-pr-phone{margin-top:16px}      /* site.price.phone: every device since decision 28c (launch day sells in the app only) */
.ss-pr-plans{grid-column:7/13;grid-row:2/span 2;margin-top:72px}
.ss-plan-label{font-weight:600;font-size:16px;line-height:1.3;color:var(--ink-55);margin-bottom:12px}
.ss-plan{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:24px;padding:24px 0;border-top:1px solid var(--ink-line)}
.ss-plan-last{border-bottom:1px solid var(--ink-line)}
/* "Save 45% vs. Monthly" (v8): plain purple text beside "Yearly", never broken; if it ever can't fit, it drops whole
   under "Yearly" */
.ss-plan-name{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px;font-weight:600;font-size:18px;line-height:1.3}
.ss-plan-save{font-size:16px;color:var(--purple);white-space:nowrap}
.ss-plan-price{display:flex;align-items:baseline;gap:8px;margin-top:4px}
.ss-price{font-family:var(--display);font-weight:300;font-size:80px;line-height:1;letter-spacing:-.03em;font-variant-numeric:lining-nums tabular-nums}
.ss-per{font-size:18px;color:var(--ink-62)}
.ss-plan-note{margin-top:8px;font-size:16px;line-height:1.45;color:var(--ink-62)}
.ss-pr-terms{margin-top:16px}

.ss-pr-renew{margin-top:16px}
.ss-pr-key{margin-top:4px}
.ss-facts{grid-column:1/6;grid-row:3;align-self:start;max-width:420px;margin-top:48px}
.ss-fact{padding:14px 0;border-top:1px solid var(--ink-line);font-size:17px;line-height:1.45}
.ss-fact-last{border-bottom:1px solid var(--ink-line)}
.ss-req{margin-top:16px}

/* 7 · questions */
.ss-faq-head{grid-column:1/5}
.ss-faq-list{grid-column:5/13}
.ss-qa{border-top:1px solid var(--ink-line)}
.ss-qa:last-of-type{border-bottom:1px solid var(--ink-line)}
.ss-q{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;cursor:pointer;list-style:none}
.ss-q::-webkit-details-marker{display:none}
.ss-q-text{font-family:var(--display);font-weight:400;font-size:24px;line-height:1.25;letter-spacing:-.01em}
.ss-plus{position:relative;flex:none;width:20px;height:20px}
.ss-plus i{position:absolute;background:var(--black);border-radius:1px}
.ss-plus i:first-child{left:0;right:0;top:9px;height:2px}
.ss-plus i:last-child{top:0;bottom:0;left:9px;width:2px;transition:transform .2s ease}
.ss-qa[open] .ss-plus i:last-child{transform:scaleY(0)}
.ss-qa.is-closing .ss-plus i:last-child{transform:none}      /* the plus comes back as the answer starts to close (site.js 7) */
.ss-a{max-width:680px;padding:0 0 28px;font-size:18px;line-height:1.55;color:var(--ink-72)}
.ss-a p+p{margin-top:8px}
.ss-faq-end{margin-top:40px;color:var(--ink-62)}

/* 8 · close + footer */
.ss-close{padding:160px 0 128px}
.ss-close-word{width:200px;height:44px}
.ss-close-line{margin-top:40px}
.ss-close-sub{margin-top:24px;color:var(--ink-62)}
.ss-close-cta{margin-top:40px}
.ss-close-note{margin-top:16px}
.ss-footer{border-top:1px solid var(--ink-line);padding:32px 0 48px}
.ss-footer-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px 24px;flex-wrap:wrap}
.ss-footer-links{display:flex;flex-wrap:wrap;gap:8px 28px;font-size:16px}
.ss-footer-link{color:var(--ink-62);text-decoration:none}
.ss-footer-link:hover{color:var(--black);text-decoration:underline;text-underline-offset:.22em}
.ss-legal{font-size:16px;color:var(--ink-55)}

/* the phone dock: non-Macs at ≤ 991 px, after the hero button has gone */
.ss-dock{display:none}

/* 404 (night): the wordmark, one line, the way home */
.ss-nf{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:var(--black);color:var(--cream)}
.ss-nf-header{display:flex;align-items:center;height:80px}
.ss-nf-main{flex:1;display:flex;flex-direction:column;justify-content:center;padding-bottom:96px}
.ss-nf-title{max-width:11ch}
.ss-nf-cta{margin-top:40px}
.ss-nf :focus-visible{outline-color:var(--cream)}

/* ---------------------------------------------------------------- settle once (sections rise 16 px, once) */
html.js-motion [data-settle]{opacity:0;transform:translateY(16px)}
html.js-motion [data-settle].is-in{opacity:1;transform:none;transition:opacity .5s var(--ease-out),transform .6s var(--ease-out)}
html.js-motion [data-settle="2"].is-in{transition-delay:.08s}
html.js-motion [data-settle="3"].is-in{transition-delay:.16s}
/* the pills arrive once, like the overlay: the whisper after 0.4 s, the hint after the app's 0.6 s pause, and the gloss
   (v8) after 0.9 s: the app explains a phrase only once the other side's sentence ends. Its note (when shown) +150 ms. */
html.js-motion .ss-frame .ss-pill-echo,html.js-motion .ss-frame .ss-pill-hint,html.js-motion .ss-frame .ss-pill-gloss,html.js-motion .ss-frame .ss-heard,html.js-motion .ss-frame .ss-gloss-note{opacity:0;transform:scale(.98)}
html.js-motion .ss-frame.is-in .ss-pill-echo,html.js-motion .ss-frame.is-in .ss-pill-hint,html.js-motion .ss-frame.is-in .ss-pill-gloss,html.js-motion .ss-frame.is-in .ss-heard,html.js-motion .ss-frame.is-in .ss-gloss-note{opacity:1;transform:none;transition:opacity .18s ease-out .4s,transform .18s ease-out .4s}
html.js-motion .ss-frame.is-in .ss-pill-hint{transition-delay:.6s}
html.js-motion .ss-frame.is-in .ss-heard{transition-delay:.55s}
html.js-motion .ss-frame.is-in .ss-pill-gloss{transition-delay:.9s}
html.js-motion .ss-frame.is-in .ss-gloss-note{transition-delay:1.05s}

/* ================================================================ tablet ≤ 991 */
@media screen and (max-width:991px){
  .ss-container{padding:0 40px}
  .ss-grid{grid-template-columns:repeat(8,minmax(0,1fr))}
  .ss-hero{--t-fit:calc((100vw - 80px) / 7.45)}
  .ss-hs{font-size:12vw}
  .ss-hero-copy,.ss-hero-cta,.ss-ways-title,.ss-ways-foot,.ss-ns-left,.ss-pr-head,.ss-faq-head,.ss-faq-list{grid-column:1/-1}
  .ss-langs{grid-template-columns:repeat(8,minmax(0,1fr));margin-top:72px}
  .ss-langs-head,.ss-langs-list{grid-column:1/-1}
  .ss-langs-list{padding-top:0;margin-top:24px}
  .ss-rule-word{font-size:min(120px,calc((100vw - 80px) / 5.1))}
  .ss-hero-title{font-size:48px}
  .ss-hero-cta{justify-self:start;margin-top:40px}
  .ss-way{grid-column:1/-1}
  .ss-ns-right{grid-column:1/-1;grid-row:auto;margin-top:64px}
  .ss-und-title,.ss-und-lead,.ss-said,.ss-und-shot{grid-column:1/-1;grid-row:auto}
  .ss-said{margin-top:56px}
  .ss-und-shot{margin-top:32px}
  .ss-said-line{font-size:44px}
  .ss-pv-body,.ss-pv-nos,.ss-pv-check,.ss-pr-trial,.ss-pr-plans,.ss-facts{grid-column:1/-1;grid-row:auto}
  .ss-pv-nos,.ss-pr-plans{margin-top:56px}
  .ss-faq-list{margin-top:40px}
  .ss-h2{font-size:52px}
  .ss-section{padding:128px 0}
  .ss-section-flush{padding-top:0}
  html.is-other .ss-dock{display:flex;align-items:center;justify-content:space-between;gap:16px;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));background:var(--cream);box-shadow:inset 0 1px 0 var(--ink-line);transform:translateY(110%);transition:transform .28s var(--ease-out)}
  html.is-other .ss-dock.is-on{transform:none}
  .ss-dock-line{font-size:16px;color:var(--ink-62)}
  .ss-dock .ss-btn{min-width:0;flex:none}
}

/* ================================================================ phone ≤ 767 */
@media screen and (max-width:767px){
  body{font-size:17px}
  .ss-container{padding:0 20px}
  .ss-grid{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:16px}
  .ss-header{position:relative}
  .ss-header-bar{height:64px}
  .ss-brand-word{width:100px;height:22px}
  .ss-brand-mark{width:40px;height:26px}
  .ss-nav{display:none}
  /* a smaller pill and tighter air pull "momentum" up to line 1 (owner 2026-10-02: the gap between the lines read as a chasm) */
  .ss-hero{padding:20px 0 64px;--pill-fs:min(15px,calc((100vw - 40px) / 15.2));--pill-gap:5px;--pill-air:5px;--note-fs:14px;--note-gap:3px;--t-fit:calc((100vw - 40px) / 7.45)}
  /* "Let’s keep the" (5.72em) fills the line: 58 px at 375, 48 at 320 */
  .ss-hs{font-size:min(96px,calc((100vw - 40px) / 5.8))}
  .ss-hero-bottom{margin-top:36px}
  .ss-hero-title{font-size:30px;line-height:1.1}
  .ss-hero-sub{margin-top:12px;font-size:17px}
  .ss-hero-cta{margin-top:28px}
  .ss-cta-note{margin-top:12px}
  .ss-btn-lg,.ss-soon{height:52px;padding:0 24px;font-size:17px}
  .ss-section{padding:96px 0}
  .ss-section-flush{padding-top:0}
  .ss-h2{font-size:36px;line-height:1.08}
  .ss-h3{font-size:22px}
  .ss-display{font-size:13vw;line-height:1.02}
  .ss-lead{font-size:18px}
  .ss-body{font-size:17px}
  .ss-ways-title,.ss-ways-foot,.ss-ns-left,.ss-ns-right,.ss-pr-head,.ss-faq-head,.ss-faq-list,.ss-pv-body,.ss-pv-nos,.ss-pv-check,.ss-pr-trial,.ss-pr-plans,.ss-facts,.ss-way{grid-column:1/-1}
  .ss-ways{margin-top:40px;row-gap:56px}
  .ss-frame{height:168px;border-radius:20px}
  .ss-notch{width:132px;height:26px;margin-left:-66px;border-radius:0 0 11px 11px}
  .ss-notch::after{top:8px;width:10px;height:10px;margin-left:-5px;background:radial-gradient(circle 1.75px at 34% 32%,rgba(250,251,212,.9),rgba(250,251,212,0)),radial-gradient(circle closest-side,#000 0 38%,#1E1E19 52%,#282822 80%,#0D0D0B 100%)}
  .ss-frame-stack{top:32px}
  .ss-pill-hint{width:calc(100% - 32px);max-width:300px}
  .ss-pill-echo{width:calc((100% - 32px) * .4754);max-width:143px}
  .ss-heard{margin-top:16px}
  .ss-way-name{margin-top:24px}
  .ss-ways-foot{margin-top:40px}
  .ss-langs{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:16px;margin-top:56px;padding-top:32px}
  .ss-langs-list{margin-top:20px}
  .ss-rule{margin-top:40px}
  .ss-rule-word{font-size:min(72px,calc((100vw - 40px) / 5.1))}
  .ss-rule-never{margin-top:28px}
  .ss-rule-sentence{font-size:22px}
  .ss-ns-right{margin-top:56px}
  .ss-uses{margin-top:40px}
  .ss-und-lead{margin-top:20px}
  .ss-said{margin-top:40px}
  .ss-und-shot{margin-top:24px}
  .ss-said-line{font-size:30px}
  .ss-pill-gloss{width:calc(100% - 32px);max-width:340px}
  .ss-gloss-note{margin-top:16px}
  .ss-pv-body,.ss-pv-nos{margin-top:40px}
  .ss-pv-promise{font-size:26px}
  .ss-pv-nos li{font-size:22px;padding:16px 0}
  .ss-pv-check{margin-top:40px}
  .ss-code{flex-direction:column;gap:12px;padding:16px}
  .ss-code-text{padding-top:0}
  .ss-pr-trial{margin-top:40px}
  .ss-pr-plans{margin-top:48px}
  .ss-plan{grid-template-columns:1fr}
  .ss-plan-last{border-bottom:0}
  .ss-buy{display:none!important}
  .ss-price{font-size:64px}
  .ss-facts{margin-top:40px}
  .ss-q{padding:20px 0}
  .ss-q-text{font-size:20px}
  .ss-a{font-size:17px}
  .ss-faq-list{margin-top:32px}
  .ss-close{padding:96px 0}
  .ss-close-word{width:146px;height:32px}
  .ss-close-line{margin-top:28px}
  .ss-close-sub{margin-top:20px}
  .ss-close-cta{margin-top:32px}
  .ss-footer-row{flex-direction:column;align-items:flex-start}
  .ss-dock{padding-left:16px;padding-right:16px}
  .ss-nf-header{height:64px}
  .ss-nf-cta{margin-top:32px}
}

/* ================================================================ reduced motion */
@media (prefers-reduced-motion:reduce){
  .ss-dock,.ss-header,.ss-hdr-cta,.ss-plus i,.ss-brand-word,.ss-brand-mark,.ss-btn{transition:none!important}
}