/* Sessionboard landing page, direction 06 "All together": 01's terminal wall as the landing, 03's task list for the features, 02's working day.

   Tokens
   - Page (:root): follows the viewer's light or dark setting, like the app.
   - Hero (.x1): stays terminal-dark; the Paper board is the one bright object.
   - Day (.x2): Paper morning, Apricot afternoon, Midnight evening.
   - Board (.sb): the app's own Paper tokens and palettes.
   Type: Instrument Sans 600 for display (56 hero, 60 section heads, 40 task titles), 400 at 16–19 for body; JetBrains Mono 400–500 for transcripts and counts.
   Shape: panes 12, cards 20, board 24, pills 999. Space: 8, 16, 24, 48, 120.
   Motion: cubic-bezier(0.2, 0, 0, 1) for the page; the hero's ring and the day's dusk keep their slower curves. Transforms and opacity only. */

@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  font-weight: 400 500;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 400 500;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;
  --text: "Instrument Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --e3: cubic-bezier(0.2, 0, 0, 1);
  --x-bg: light-dark(oklch(1 0 0), oklch(0.16 0.004 250));
  --x-fg: light-dark(oklch(0.18 0.006 250), oklch(0.95 0.003 250));
  --x-muted: light-dark(oklch(0.5 0.01 250), oklch(0.72 0.008 250));
  --x-ground: light-dark(oklch(0.972 0.003 250), oklch(0.205 0.005 250));
  --done: light-dark(oklch(0.5 0.12 155), oklch(0.78 0.13 155));
  --prog: light-dark(oklch(0.52 0.15 45), oklch(0.79 0.13 60));
  --rule: color-mix(in oklch, var(--x-muted) 25%, transparent);
}
.x1 { --x-bg: oklch(0.155 0.004 250); --x-fg: oklch(0.95 0.003 250); --x-muted: oklch(0.7 0.008 250); --pane: oklch(0.195 0.005 250); --bar: oklch(0.235 0.006 250); --dim: oklch(0.68 0.008 250); --amber: oklch(0.79 0.13 60); --e1: cubic-bezier(0.65, 0, 0.35, 1); color-scheme: dark; }
.x2 { --x-bg: oklch(0.972 0.003 250); --x-fg: oklch(0.18 0.006 250); --x-muted: oklch(0.5 0.01 250); --apricot: oklch(0.965 0.025 70); --night: oklch(0.15 0.02 265); --e2: cubic-bezier(0.33, 0, 0.15, 1); color-scheme: light; }
.sb {
  --g: light-dark(oklch(0.972 0.003 250), oklch(0.16 0.004 250));
  --s: light-dark(oklch(1 0 0), oklch(0.205 0.005 250));
  --r: light-dark(oklch(0.945 0.004 250), oklch(0.255 0.006 250));
  --k: light-dark(oklch(0.18 0.006 250), oklch(0.95 0.003 250));
  --m: light-dark(oklch(0.5 0.01 250), oklch(0.72 0.008 250));
  --n: light-dark(oklch(0.52 0.15 45), oklch(0.79 0.13 60));
  --ms: light-dark(oklch(0.955 0.022 250), oklch(0.27 0.035 250));
  --ok: light-dark(oklch(0.5 0.12 155), oklch(0.78 0.13 155));
  --bad: light-dark(oklch(0.53 0.19 27), oklch(0.72 0.16 25));
  --sh: inset 0 1px 0 light-dark(transparent, oklch(1 0 0 / 0.05)), 0 1px 2px light-dark(oklch(0.2 0.01 250 / 0.05), transparent), 0 8px 32px light-dark(oklch(0.2 0.01 250 / 0.07), oklch(0 0 0 / 0.35));
  display: flex; flex-direction: column; gap: 16px; padding: 16px; border-radius: 24px;
  background: var(--g); color: var(--k); font: 400 16px/1.5 var(--text); font-variant-numeric: tabular-nums; letter-spacing: 0; text-align: left;
}
.sb.lt { color-scheme: light; }
.sb.mid { color-scheme: dark; --g: oklch(0.15 0.02 265); --s: oklch(0.19 0.025 265); --r: oklch(0.24 0.035 265); --k: oklch(0.94 0.01 265); --m: oklch(0.72 0.03 265); --n: oklch(0.8 0.13 62); --ms: oklch(0.27 0.04 200); --ok: oklch(0.79 0.13 155); --bad: oklch(0.73 0.15 25); }
/* The app's palettes. Paper is the board's default. */
.sb[data-pal="midnight"] { --g: light-dark(oklch(0.965 0.008 265), oklch(0.15 0.02 265)); --s: light-dark(oklch(0.995 0.003 265), oklch(0.19 0.025 265)); --r: light-dark(oklch(0.935 0.014 265), oklch(0.24 0.035 265)); --k: light-dark(oklch(0.22 0.03 265), oklch(0.94 0.01 265)); --m: light-dark(oklch(0.5 0.03 265), oklch(0.72 0.03 265)); --n: light-dark(oklch(0.52 0.15 45), oklch(0.8 0.13 62)); --ms: light-dark(oklch(0.955 0.03 200), oklch(0.27 0.04 200)); --ok: light-dark(oklch(0.5 0.12 155), oklch(0.79 0.13 155)); --bad: light-dark(oklch(0.53 0.19 27), oklch(0.73 0.15 25)); }
.sb[data-pal="pomegranate"] { --g: light-dark(oklch(0.965 0.022 90), oklch(0.18 0.025 20)); --s: light-dark(oklch(0.993 0.008 90), oklch(0.22 0.03 20)); --r: light-dark(oklch(0.94 0.03 15), oklch(0.28 0.05 20)); --k: light-dark(oklch(0.24 0.03 20), oklch(0.95 0.015 90)); --m: light-dark(oklch(0.48 0.04 25), oklch(0.76 0.03 40)); --n: light-dark(oklch(0.53 0.14 55), oklch(0.82 0.12 75)); --ms: light-dark(oklch(0.955 0.022 250), oklch(0.29 0.04 250)); --ok: light-dark(oklch(0.48 0.11 155), oklch(0.79 0.12 155)); --bad: light-dark(oklch(0.5 0.19 27), oklch(0.74 0.16 25)); }
.sb[data-pal="amethyst"] { --g: light-dark(oklch(0.975 0.022 98), oklch(0.18 0.03 295)); --s: light-dark(oklch(0.995 0.008 98), oklch(0.22 0.04 295)); --r: light-dark(oklch(0.945 0.03 295), oklch(0.28 0.06 295)); --k: light-dark(oklch(0.24 0.04 295), oklch(0.95 0.015 98)); --m: light-dark(oklch(0.48 0.05 295), oklch(0.76 0.04 295)); --n: light-dark(oklch(0.52 0.15 50), oklch(0.84 0.12 85)); --ms: light-dark(oklch(0.955 0.022 250), oklch(0.29 0.04 250)); --ok: light-dark(oklch(0.5 0.12 155), oklch(0.79 0.13 155)); --bad: light-dark(oklch(0.53 0.19 27), oklch(0.74 0.15 25)); }
.sb[data-pal="apricot"] { --g: light-dark(oklch(0.965 0.025 70), oklch(0.17 0.035 350)); --s: light-dark(oklch(0.995 0.008 70), oklch(0.215 0.04 350)); --r: light-dark(oklch(0.935 0.025 275), oklch(0.28 0.05 330)); --k: light-dark(oklch(0.25 0.05 350), oklch(0.95 0.02 70)); --m: light-dark(oklch(0.48 0.05 350), oklch(0.76 0.03 40)); --n: light-dark(oklch(0.52 0.14 50), oklch(0.83 0.11 70)); --ms: light-dark(oklch(0.955 0.022 250), oklch(0.29 0.04 250)); --ok: light-dark(oklch(0.5 0.12 155), oklch(0.79 0.12 155)); --bad: light-dark(oklch(0.53 0.19 27), oklch(0.74 0.16 25)); }
.sb[data-pal="coral"] { --g: light-dark(oklch(0.965 0.02 350), oklch(0.18 0.025 278)); --s: light-dark(oklch(0.995 0.006 350), oklch(0.22 0.03 278)); --r: light-dark(oklch(0.935 0.025 278), oklch(0.28 0.045 278)); --k: light-dark(oklch(0.25 0.03 278), oklch(0.95 0.015 350)); --m: light-dark(oklch(0.48 0.04 278), oklch(0.76 0.03 300)); --n: light-dark(oklch(0.52 0.15 45), oklch(0.82 0.12 65)); --ms: light-dark(oklch(0.955 0.022 250), oklch(0.29 0.045 235)); --ok: light-dark(oklch(0.5 0.12 155), oklch(0.79 0.13 155)); --bad: light-dark(oklch(0.52 0.19 25), oklch(0.75 0.15 25)); }

/* Base */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--x-bg); color: var(--x-fg); font: 16px/1.5 var(--text); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ol, ul, dl, dd, pre, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
b { font-weight: 600; }
code { font-family: var(--mono); font-size: 0.875em; }
a { text-decoration: none; }
a:not(.cta) { color: inherit; }
:focus-visible { outline: 2px solid var(--x-fg); outline-offset: 2px; }
.wrap { max-width: 1280px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.i { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mark { flex: none; display: block; }
.mark .dn { opacity: 0; transition: opacity 0.4s var(--ease); }
.needs-on .mark .dn { opacity: 1; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Nav and calls to action */
.site { position: relative; overflow: hidden; container: vp / inline-size; background: var(--x-bg); color: var(--x-fg); }
.a-in { position: relative; max-width: 1440px; margin: 0 auto; padding-bottom: 72px; }
.nav { position: relative; z-index: 2; display: flex; align-items: center; gap: 32px; height: 72px; padding: 0 40px; font-size: 15px; }
.nav .wm { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 20px; font-weight: 700; color: var(--x-fg); }
.nav .wm .mark { width: 28px; height: 28px; }
.nav .links { display: flex; gap: 28px; margin-left: auto; color: var(--x-muted); }
.nav .links a { display: inline-flex; align-items: center; min-height: 44px; }
.nav .cta { min-height: 44px; padding: 0 18px; font-size: 15px; }
.nav .links + .cta, .nav .links + .cta + .cta { margin-left: 0; }
.cta { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--x-fg); color: var(--x-bg); font: 600 17px/1 var(--text); white-space: nowrap; cursor: pointer; transition: transform 150ms var(--e3); }
.cta.alt { background: none; color: var(--x-fg); box-shadow: inset 0 0 0 1px var(--rule); }
.cta:active { transform: scale(0.96); transition-duration: 160ms; }
@media (hover: hover) and (pointer: fine) { .cta:hover:not(:active) { transform: translateY(-1px); } }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.soon { color: var(--x-muted); font-size: 15px; }
@container vp (max-width: 600px) {
  .nav { height: 60px; padding: 0 16px; }
  .nav .links { display: none; }
  .nav .cta { margin-left: auto; padding: 0 16px; font-size: 14px; }
  .acts { gap: 10px; }
  .cta { min-height: 48px; font-size: 16px; }
  .soon { font-size: 14px; }
}

/* Hero: six terminals, one board. */
.h1x { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; padding: 4px 40px 0; }
.h1x .copy { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.h1x h1 { font-size: 56px; line-height: 1; letter-spacing: -0.035em; font-weight: 600; }
.h1x .sub { font-size: 19px; line-height: 1.5; color: var(--x-muted); max-width: 640px; }
.wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pane { min-width: 0; overflow: hidden; border-radius: 12px; background: var(--pane); }
.pane .pt { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 12px; background: var(--bar); font: 11px/1.3 var(--mono); color: var(--dim); white-space: nowrap; }
.pane .pt b { color: var(--x-fg); font-weight: 500; }
.pane .pt span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pane .pl { display: flex; flex-direction: column; justify-content: flex-end; height: 104px; padding: 8px 12px 10px; overflow: hidden; font: 11.5px/17px var(--mono); color: var(--x-fg); }
.tl { flex: none; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.tl.r, .tl.p { color: var(--dim); }
.tl.q { color: var(--amber); white-space: pre-wrap; }
.tag { flex: none; margin: -3px 0 -3px auto; padding: 3px 8px; border-radius: 999px; background: var(--x-bg); color: var(--x-fg); font: 600 11px/1.2 var(--text); }
.tag[data-st="needs"], .tag[data-st="move"], .tag[data-st="stuck"] { color: var(--amber); }
.tag[data-st="safe"] { color: oklch(0.78 0.13 155); }
.tag[data-st="notsafe"] { color: oklch(0.72 0.16 25); }
.wall .pane, [data-hero] .sb-r { transition: box-shadow 0.4s var(--e1), opacity 0.4s var(--e1); }
/* The active terminal and its board row: one 2px ring in the state's color. Panes take the terminal's colors, rows the board's. */
.wall .pane.on { box-shadow: 0 0 0 2px var(--ring, var(--x-fg)); }
.sb-r.on { box-shadow: 0 0 0 2px var(--ring, var(--k)); }
:is([data-on="needs"], [data-on="move"], [data-on="stuck"]) :is(.pane, .sb-r).on { --ring: var(--n, var(--amber)); }
[data-on="safe"] :is(.pane, .sb-r).on { --ring: var(--ok, oklch(0.78 0.13 155)); }
[data-on="notsafe"] :is(.pane, .sb-r).on { --ring: var(--bad, oklch(0.72 0.16 25)); }
[data-on] [data-hero] .sb-r:not(.on) { opacity: 0.45; }
.wfoot { display: flex; align-items: flex-start; gap: 8px; margin-top: -8px; }
.wcap { flex: 1; min-height: 3em; font-size: 15px; color: var(--x-muted); }
.wcap b { color: var(--x-fg); }
.wpause { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -10px -12px 0 0; border: 0; border-radius: 999px; background: none; color: var(--x-muted); cursor: pointer; }
.wpause .i { width: 16px; height: 16px; }
/* Two lines held for the tally, so a beat that wraps it doesn't move the page. */
.h1x .sb-c { min-height: 44px; }
.a-board { position: relative; align-self: start; min-width: 0; }
/* The card under the ringed row: the app's own view of that session. */
.wc { position: absolute; z-index: 3; left: 12px; right: 12px; pointer-events: none; }
.wc .nc-h .i { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
.wc[data-st="working"] .nc-h { color: var(--k); }
.wc[data-st="safe"] .nc-h { color: var(--ok); }
.wc[data-st="notsafe"] .nc-h { color: var(--bad); }
.nc-q.nc-m { background: var(--r); }
.nc-s { font-size: 15px; }
.nc-a { display: flex; align-items: flex-start; gap: 8px; font-size: 15px; }
.nc-a .i { flex: none; width: 16px; height: 16px; margin-top: 3px; }
.nc-t { font-size: 14px; font-weight: 600; color: var(--m); }
.wc .tlist { --x-muted: var(--m); --done: var(--ok); --prog: var(--n); padding: 0; background: none; }
.wc .tlist li { min-height: 32px; padding: 0 4px; font-size: 14px; }
.wc .cks { padding: 0; }
.wc .ck { min-height: 34px; padding: 0 4px; }
.wc .ck b { font-size: 14px; }
/* Where the board sits under the wall, the active session's row sits under its terminal too. */
.wrow { display: none; margin-top: -10px; padding: 0; background: none; }
@container vp (max-width: 960px) {
  .h1x { grid-template-columns: minmax(0, 1fr); }
  .a-board { max-width: 440px; }
  .wrow { display: flex; }
}
@container vp (max-width: 600px) {
  .a-in { padding-bottom: 40px; }
  .h1x { gap: 20px; padding: 4px 16px 0; }
  .h1x h1 { font-size: 40px; }
  .h1x .sub { font-size: 16px; }
  .wall { grid-template-columns: minmax(0, 1fr); }
  .wall .pane:not(.on) { display: none; }
  .wall:not(:has(.on)) .pane:first-child { display: block; }
  .pane .pl { height: 88px; }
}

/* The board replica: the app's rows, borderless cards, one shadow. */
.sb-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.sb-h > b { display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: 20px; font-weight: 700; }
.sb-live { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--r); color: var(--m); font-size: 14px; }
.sb-live .i { width: 14px; height: 14px; }
.sb-c { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; color: var(--m); font-size: 14px; }
.sb-c > span { display: inline-flex; align-items: center; gap: 8px; }
.sb-c b { color: var(--k); }
.pips { display: inline-flex; gap: 3px; }
.pip { width: 8px; height: 8px; border-radius: 50%; }
.pip.needs { background: var(--n); }
.pip.move { box-shadow: inset 0 0 0 2px var(--n); }
.pip.working { background: var(--k); }
.pip.safe { background: var(--ok); }
.pip.ring { box-shadow: inset 0 0 0 2px var(--m); }
.sb-gs { display: flex; flex-direction: column; gap: 20px; }
.sb-g { display: flex; flex-direction: column; gap: 8px; }
.sb-gl { display: flex; align-items: baseline; gap: 8px; padding: 0 4px; }
.sb-gl b { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; }
.sb-gl span { color: var(--m); }
.sb-l { display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 20px; background: var(--s); box-shadow: var(--sh); }
.sb-r { display: flex; flex-direction: column; justify-content: center; gap: 2px; width: 100%; min-height: 60px; padding: 8px 12px; border-radius: 14px; }
.sb-t { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-width: 0; }
.sb-nm { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 16px; font-weight: 600; }
.sb-nm .i { width: 16px; height: 16px; color: var(--m); }
.sb-t time { flex: none; font: 14px var(--mono); color: var(--m); }
.sb-ln { min-width: 0; font-size: 14px; color: var(--m); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-ln b { color: var(--k); }
.sb-ln .i { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
.sb-ln .ok-i { color: var(--ok); }
.sb-ln .x { color: var(--bad); }
[data-st="needs"] .sb-ln b, [data-st="move"] .sb-ln b, [data-st="move"] .sb-ln .i { color: var(--n); }
[data-st="safe"] .sb-ln b { color: var(--ok); }
[data-st="notsafe"] .sb-ln b { color: var(--bad); }
.dt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--n); margin-right: 6px; vertical-align: 1px; }
.draw { stroke-dasharray: 64; animation: draw 0.6s var(--ease); }
@keyframes draw { from { stroke-dashoffset: 64; } }
/* A session's card, laid out like the app's. */
.sb.nc { gap: 8px; padding: 16px; border-radius: 20px; background: var(--s); box-shadow: var(--sh); }
.nc-h { font-size: 14px; font-weight: 600; color: var(--n); }
.nc .sb-nm { font-size: 17px; }
.nc-p { font: 13px var(--mono); color: var(--m); }
.nc-q { padding: 12px 14px; border-radius: 14px; background: var(--ms); font-size: 17px; font-weight: 500; line-height: 1.45; }
/* Buttons and Hold to close, as the app builds them. */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--r); color: var(--k); font: 600 16px/1 var(--text); cursor: pointer; transition: transform 150ms var(--ease); }
.btn .i { width: 16px; height: 16px; }
.btn:active { transform: scale(0.96); transition-duration: 160ms; }
.hold { overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.hold .filled, .hold .filled > span { position: absolute; inset: 0; transition: transform 250ms var(--ease); }
.hold .filled { overflow: hidden; border-radius: inherit; background: var(--k); color: var(--s); transform: translateX(-100%); }
.hold .filled > span { display: flex; align-items: center; justify-content: center; gap: 8px; transform: translateX(100%); }
.hold.holding .filled, .hold.holding .filled > span { transform: none; transition: transform 1s linear; }
.cmd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 10px 10px 14px; border-radius: 14px; background: var(--r); }
.cmd code { min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.cmd .btn { min-height: 44px; padding: 0 14px; background: var(--s); font-size: 14px; }
/* Safe to close: six checks, the verdict, then Hold to close. */
.ckp { gap: 0; padding: 8px 8px 16px; background: var(--s); box-shadow: var(--sh); }
.ckp-h { display: flex; flex-direction: column; gap: 2px; padding: 12px 12px 14px; }
.ckp-h .sb-nm { font-size: 18px; }
.ckp-p { font: 13px var(--mono); color: var(--m); }
.cks { display: flex; flex-direction: column; padding: 0 4px; }
.ck { display: grid; grid-template-columns: 20px auto minmax(0, 1fr); align-items: center; gap: 12px; min-height: 48px; padding: 0 8px; }
.ck + .ck { border-top: 1px solid color-mix(in oklch, var(--m) 18%, transparent); }
.ck .i { width: 20px; height: 20px; color: var(--m); }
.ck b { font-size: 15px; font-weight: 600; white-space: nowrap; }
.ck > span { overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; font: 13px var(--mono); color: var(--m); }
.ck[data-c="pass"] .i { color: var(--ok); }
.ck[data-c="fail"] .i, .ck[data-c="fail"] > span { color: var(--bad); }
.vd { padding: 16px 12px 14px; font-size: 17px; font-weight: 600; text-wrap: pretty; color: var(--ok); }
.ckp-a { padding: 0 8px; }
.ckp-a .hold { width: 100%; min-height: 52px; }
.ckp-x { display: flex; flex-direction: column; gap: 12px; padding: 4px 12px 0; }
.ckp-x .ok-h { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 600; }
.ckp-x .ok-h .i { width: 22px; height: 22px; color: var(--ok); }
.ckp-x > p { color: var(--m); font-size: 15px; text-wrap: pretty; }
.ckp-x .fd { display: flex; align-items: center; gap: 8px; font: 13px var(--mono); }
.ckp-x .fd .i { width: 16px; height: 16px; }
.ckp-x > .btn { align-self: flex-start; }

/* Section heads */
.a-head { display: flex; flex-direction: column; gap: 12px; max-width: 760px; padding-block: 120px 40px; }
.a-head h2, .a-foot h2, .doc h1 { font-size: clamp(34px, 5vw, 60px); line-height: 1; letter-spacing: -0.035em; font-weight: 600; }
.a-head p { max-width: 56ch; font-size: 18px; color: var(--x-muted); }
.film video { display: block; width: 100%; height: auto; border-radius: 20px; background: var(--x-ground); }
.film .film-v { display: none; width: min(100%, 45svh); margin-inline: auto; }

/* Features: the page keeps its own task list. */
.s3 { color: var(--x-fg); }
.s3-bar { position: sticky; top: 0; z-index: 5; background: var(--x-bg); border-bottom: 1px solid var(--rule); }
.strip { display: flex; align-items: center; gap: 16px; min-width: 0; padding-block: 14px; font: 500 14px/1 var(--mono); color: var(--x-muted); white-space: nowrap; }
.strip b { color: var(--x-fg); font-family: var(--text); font-size: 15px; font-weight: 700; }
.strip .bar { overflow: hidden; letter-spacing: 0; }
.strip .bar span { color: var(--x-fg); }
.strip .of { margin-left: auto; color: var(--x-fg); }
.s3-list { display: flex; flex-direction: column; }
#privacy { scroll-margin-top: 48px; }
.t3 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px 64px; align-items: start; padding-block: 72px; }
.t3 + .t3 { border-top: 1px solid color-mix(in oklch, var(--x-muted) 18%, transparent); }
.t3 > header { position: relative; display: flex; flex-direction: column; gap: 14px; }
.t3 > header .i { flex: none; width: 20px; height: 20px; color: var(--x-muted); }
.t3 h3 { display: flex; align-items: flex-start; gap: 14px; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.08; letter-spacing: -0.025em; font-weight: 600; }
.t3 h3 .i { width: 28px; height: 28px; margin-top: 0.12em; transition: color 0.3s var(--e3); }
.t3 h3 .tt { background: linear-gradient(currentColor, currentColor) 0 55% / var(--strike, 0%) 2px no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 0.5s var(--e3), color 0.4s var(--e3); }
.t3 .no { font: 500 13px var(--mono); color: var(--x-muted); letter-spacing: 0.02em; }
.t3 > header p { max-width: 46ch; color: var(--x-muted); font-size: 17px; }
.t3 > header p code { font: 0.88em var(--mono); color: var(--x-fg); }
.t3 .rd { position: relative; height: 2px; max-width: 320px; border-radius: 1px; background: color-mix(in oklch, var(--x-muted) 22%, transparent); }
.t3 .rd i { position: absolute; inset: 0; border-radius: inherit; background: var(--prog); transform-origin: 0 50%; transform: scaleX(var(--tp, 0)); }
.t3[data-s="1"] h3 .i { color: var(--prog); }
.t3[data-s="2"] h3 .i { color: var(--done); }
.t3[data-s="2"] h3 .tt { --strike: 100%; color: var(--x-muted); }
.t3[data-s="2"] .rd i { background: var(--done); }
.t3 .art { min-width: 0; }
.t3 .sb { --g: var(--x-ground); }
.t3 .sb .tlist { background: var(--s); box-shadow: var(--sh); }
.tlist { display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 20px; background: var(--x-ground); }
.tlist li { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 8px; font-size: 15px; }
.tlist .i { flex: none; width: 18px; height: 18px; color: var(--x-muted); }
.tlist .c .i { color: var(--done); }
.tlist .c { color: var(--x-muted); text-decoration: line-through; }
.tlist .p .i { color: var(--prog); }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 24px; padding: 8px 20px; border-radius: 20px; background: var(--x-ground); font: 14px/1.4 var(--mono); }
.facts dt, .facts dd { padding-block: 12px; }
.facts dt { color: var(--x-muted); }
.facts dd + dt, .facts dd + dt + dd { border-top: 1px solid color-mix(in oklch, var(--x-muted) 18%, transparent); }
.narrow { max-width: 440px; }
.pals { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 16px; }
@media (min-width: 761px) { .pals { display: grid; grid-template-columns: repeat(3, max-content); } }
.pals button { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px 0 12px; border: 0; border-radius: 999px; background: none; color: var(--x-fg); font: 500 15px/1 var(--text); cursor: pointer; transition: transform 150ms var(--e3); }
.pals button:active { transform: scale(0.96); }
.pals button i { width: 12px; height: 12px; border-radius: 50%; }
.pals [aria-pressed="true"] { background: color-mix(in oklch, var(--x-muted) 16%, transparent); font-weight: 600; }

/* One working day, scrubbed by scroll. */
.js .pin { height: 480vh; }
.pin .stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.x2 .sb, .s2 .sb { --g: transparent; }
.s2 { position: relative; background: var(--x-bg); --ink: var(--x-fg); --mu: var(--x-muted); color: var(--ink); }
.s2.ink-night { --ink: oklch(0.94 0.01 265); --mu: oklch(0.72 0.03 265); }
.sky { position: absolute; inset: 0; background: var(--apricot); opacity: 0; transition: opacity 0.3s var(--e2); }
.s2-night { position: absolute; inset: 0; background: var(--night); opacity: 0; transition: opacity 0.6s var(--e2); }
.s2.dusk .s2-night { opacity: 1; }
.s2-in { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 24px 48px; align-items: center; padding-block: 24px; }
.s2-l { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.clk { font: 600 clamp(104px, 17vw, 248px)/0.85 var(--text); font-stretch: 75%; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.s2-cap { min-height: 2.4em; max-width: 26ch; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.2; font-weight: 500; letter-spacing: -0.015em; color: var(--mu); }
.rail { position: relative; height: 28px; margin-top: 12px; max-width: 560px; }
.rail .ln, .rail .fl { position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 1px; background: var(--mu); opacity: 0.35; }
.rail .fl { opacity: 1; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--d, 0)); }
.rail .tk { position: absolute; top: 2px; width: 2px; height: 10px; margin-left: -1px; border-radius: 1px; background: var(--ink); }
.rail .lb { position: absolute; top: 16px; font: 500 12px/1 var(--mono); color: var(--mu); }
.rail .lb:last-child { right: 0; }
.s2-r { min-width: 0; max-height: 100%; overflow: hidden; }
@media (max-width: 860px) {
  .s2-in { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-items: start; }
  .clk { font-size: 96px; }
  .s2-l { gap: 8px; }
  .s2-r { height: 100%; }
}

/* How it works, FAQ */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.steps li { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 20px; background: var(--x-ground); }
.steps span { font: 500 13px/1 var(--mono); color: var(--x-muted); }
.steps b { font-size: 20px; letter-spacing: -0.01em; }
.steps p { color: var(--x-muted); }
.qs { border-bottom: 1px solid var(--rule); }
.qs details { border-top: 1px solid var(--rule); }
.qs summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding-block: 16px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; list-style: none; cursor: pointer; }
.qs summary::-webkit-details-marker { display: none; }
.qs summary::after { content: "+"; flex: none; font: 400 24px/1 var(--mono); color: var(--x-muted); transition: transform 0.3s var(--e3); }
.qs [open] summary::after { transform: rotate(45deg); }
.qs details > div { display: flex; flex-direction: column; gap: 16px; max-width: 68ch; padding-bottom: 28px; font-size: 17px; color: var(--x-muted); }
.qs a, .doc a { color: var(--x-fg); text-decoration: underline; text-underline-offset: 3px; }
.qs dl, .doc dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 12px 24px; }
.qs dt, .doc dt { font-weight: 600; color: var(--x-fg); }
.qs code, .doc code { color: var(--x-fg); }

/* Footer: the waitlist, or the download once it's out. */
.a-foot { margin-top: 120px; padding-top: 96px; overflow: hidden; background: var(--x-ground); }
.a-foot .wrap { display: flex; flex-direction: column; gap: 20px; container-type: inline-size; }
.a-foot .lede { font-size: 18px; color: var(--x-muted); }
.a-foot .wrap > div { display: flex; flex-direction: column; gap: 20px; }
.wl { display: flex; flex-wrap: wrap; gap: 10px; max-width: 540px; }
.wl input { flex: 1 1 240px; min-width: 0; min-height: 52px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--x-bg); color: var(--x-fg); font: 16px var(--text); box-shadow: inset 0 0 0 1px var(--rule); }
.a-links { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 48px; font-size: 15px; color: var(--x-muted); }
.a-links:first-child { margin-top: 0; }
.a-links a { display: inline-flex; align-items: center; min-height: 44px; }
.giant { margin-top: 16px; font-size: 15.6cqi; font-weight: 700; line-height: 0.8; letter-spacing: -0.045em; white-space: nowrap; }

/* Support, Privacy and Terms */
body:has(> .doc) { display: flex; flex-direction: column; min-height: 100svh; }
.doc { flex: 1 0 auto; display: flex; flex-direction: column; gap: 16px; max-width: 760px; padding-block: 72px 0; font-size: 17px; color: var(--x-muted); }
.doc section { display: flex; flex-direction: column; gap: 16px; }
.doc h1 { margin-bottom: 8px; color: var(--x-fg); }
.doc h2 { margin-top: 32px; font-size: 24px; line-height: 1.2; letter-spacing: -0.015em; font-weight: 600; color: var(--x-fg); }
.doc .lede { font-size: 19px; }

@media (max-width: 760px) {
  .t3 { grid-template-columns: minmax(0, 1fr); padding-block: 48px; gap: 24px; }
  .strip { font-size: 12px; gap: 10px; }
  .a-head { padding-block: 80px 28px; }
  .a-head p, .a-foot .lede { font-size: 16px; }
  .film .film-w { display: none; }
  .film .film-v { display: block; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .qs summary { font-size: 18px; }
  .qs dl, .doc dl { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .qs dd + dt, .doc dd + dt { margin-top: 12px; }
  .a-foot { margin-top: 80px; padding-top: 64px; }
  .doc { padding-top: 40px; font-size: 16px; }
  .doc .lede { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .hold.holding .filled, .hold.holding .filled > span { transition-duration: 1s !important; }
}