/* Ordo marketing site. Design: Calm (docs/design/DIRECTION.md, docs/design/ordo/project).
   One sheet of paper, one accent, words not icons. Ember means "this needs you" and nothing else:
   the wordmark's o, the needs-you mark in the artwork and the demo, the Needs You count. */

@font-face{font-family:"Fraunces";src:url("fonts/fraunces-opsz.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

/* ---------- tokens (tokens.json) ---------- */
:root{
  --paper:#faf9f6; --paperRaised:#ffffff; --rowSelected:#efede8; --rowHover:rgba(28,27,25,.03); --keyDown:#e4e1da;
  --ink:#1c1b19; --inkSecondary:#5f5c57; --inkTertiary:#726e68;
  --hairline:rgba(28,27,25,.10); --hairlineStrong:rgba(28,27,25,.18);
  --ember:#b5441b; --emberOn:#ffffff; --danger:#a8294e; --focusRing:rgba(181,68,27,.6);
  /* Sanzo Wada's pigments (DIRECTION 2.2): a deep tone on paper, the pale one at night. The wash under a label's
     word is the other half of the pair: the pale tone at 45% on paper, a saturated mid-tone at 50% at night. */
  --label-orange:#85511b; --label-ochre:#715611; --label-green:#586326; --label-teal:#00645d; --label-blue:#41628d;
  --label-indigo:#2d4e8e; --label-violet:#614d9c; --label-magenta:#93386b; --label-rose:#a03d4d; --label-slate:#4a6268;
  --wash-orange:rgba(238,180,128,.45); --wash-ochre:rgba(226,181,64,.45); --wash-green:rgba(193,196,148,.45);
  --wash-teal:rgba(98,198,191,.45); --wash-blue:rgba(167,212,228,.45); --wash-indigo:rgba(164,183,207,.45);
  --wash-violet:rgba(181,177,216,.45); --wash-magenta:rgba(206,169,199,.45); --wash-rose:rgba(248,182,186,.45);
  --wash-slate:rgba(165,200,209,.45);
  --shadow-sheet:0 16px 48px rgba(28,27,25,.14);
  --shadow-popover:0 8px 24px rgba(28,27,25,.12);
  /* artwork only (DIRECTION 9) */
  --sheetTop:#ffffff; --sheetBottom:#f3f1ec; --artShadow:rgba(28,27,25,.08); --artShadowLifted:rgba(28,27,25,.16);

  --font-brand:"Fraunces","Iowan Old Style",Georgia,serif;
  --font-ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro",system-ui,"Helvetica Neue",sans-serif;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px; --s12:48px; --s16:64px;
  /* marketing steps: multiples of the scale, for section rhythm only */
  --s24:96px; --s32:128px;
  /* two text styles for the whole marketing page: the lead under a headline, and supporting copy */
  --type-lead:400 19px/30px var(--font-ui);
  --type-support:400 16px/26px var(--font-ui);
  --radius-control:6px; --radius-card:10px; --radius-sheet:12px;

  /* motion (DIRECTION 7) */
  --settle:cubic-bezier(.22,1,.36,1);
  --outCubic:cubic-bezier(.33,1,.68,1);
  --inOutSine:cubic-bezier(.37,0,.63,1);
  --outQuint:cubic-bezier(.23,1,.32,1);
  --fade:200ms;
  --fadeSlow:600ms;

  --gutter:24px;
  --page:1200px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#161614; --paperRaised:#1e1e1b; --rowSelected:#242421; --rowHover:rgba(236,234,228,.04); --keyDown:#33332f;
    --ink:#eceae4; --inkSecondary:#a8a49c; --inkTertiary:#8e8a83;
    --hairline:rgba(236,234,228,.12); --hairlineStrong:rgba(236,234,228,.22);
    --ember:#f2a078; --emberOn:#1c1b19; --danger:#f08fae; --focusRing:rgba(242,160,120,.6);
    --label-orange:#eeb480; --label-ochre:#e2b540; --label-green:#c1c494; --label-teal:#62c6bf; --label-blue:#a7d4e4;
    --label-indigo:#a4b7cf; --label-violet:#b5b1d8; --label-magenta:#cea9c7; --label-rose:#f8b6ba; --label-slate:#a5c8d1;
    --wash-orange:rgba(188,96,0,.5); --wash-ochre:rgba(148,106,0,.5); --wash-green:rgba(109,128,20,.5);
    --wash-teal:rgba(0,122,114,.5); --wash-blue:rgba(41,105,189,.5); --wash-indigo:rgba(20,85,209,.5);
    --wash-violet:rgba(80,45,184,.5); --wash-magenta:rgba(199,30,125,.5); --wash-rose:rgba(199,30,57,.5);
    --wash-slate:rgba(64,133,150,.5);
    --shadow-sheet:0 16px 48px rgba(0,0,0,.6),0 0 0 1px rgba(236,234,228,.22);
    --shadow-popover:0 8px 24px rgba(0,0,0,.5),0 0 0 1px rgba(236,234,228,.22);
    --sheetTop:#2b2b28; --sheetBottom:#222220; --artShadow:rgba(0,0,0,.45); --artShadowLifted:rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#161614; --paperRaised:#1e1e1b; --rowSelected:#242421; --rowHover:rgba(236,234,228,.04); --keyDown:#33332f;
  --ink:#eceae4; --inkSecondary:#a8a49c; --inkTertiary:#8e8a83;
  --hairline:rgba(236,234,228,.12); --hairlineStrong:rgba(236,234,228,.22);
  --ember:#f2a078; --emberOn:#1c1b19; --danger:#f08fae; --focusRing:rgba(242,160,120,.6);
  --label-orange:#eeb480; --label-ochre:#e2b540; --label-green:#c1c494; --label-teal:#62c6bf; --label-blue:#a7d4e4;
  --label-indigo:#a4b7cf; --label-violet:#b5b1d8; --label-magenta:#cea9c7; --label-rose:#f8b6ba; --label-slate:#a5c8d1;
  --wash-orange:rgba(188,96,0,.5); --wash-ochre:rgba(148,106,0,.5); --wash-green:rgba(109,128,20,.5);
  --wash-teal:rgba(0,122,114,.5); --wash-blue:rgba(41,105,189,.5); --wash-indigo:rgba(20,85,209,.5);
  --wash-violet:rgba(80,45,184,.5); --wash-magenta:rgba(199,30,125,.5); --wash-rose:rgba(199,30,57,.5);
  --wash-slate:rgba(64,133,150,.5);
  --shadow-sheet:0 16px 48px rgba(0,0,0,.6),0 0 0 1px rgba(236,234,228,.22);
  --shadow-popover:0 8px 24px rgba(0,0,0,.5),0 0 0 1px rgba(236,234,228,.22);
  --sheetTop:#2b2b28; --sheetBottom:#222220; --artShadow:rgba(0,0,0,.45); --artShadowLifted:rgba(0,0,0,.6);
  color-scheme:dark;
}
@media (prefers-contrast: more){
  :root{--hairline:rgba(28,27,25,.24);--hairlineStrong:rgba(28,27,25,.40)}
  :root[data-theme="dark"]{--hairline:rgba(236,234,228,.24);--hairlineStrong:rgba(236,234,228,.40)}
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--hairline:rgba(236,234,228,.24);--hairlineStrong:rgba(236,234,228,.40)}
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:24px}
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--font-ui);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden}
p,h1,h2,h3,ul,ol,figure{margin:0}
ul,ol{padding:0}
a{color:inherit}
::selection{background:var(--rowSelected);color:var(--ink)}
.wrap{max-width:var(--page);margin:0 auto;padding-inline:var(--gutter)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tnum{font-variant-numeric:tabular-nums}

/* links: ink, underlined (ember never marks a link) */
.prose a,.link{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--hairlineStrong);transition:text-decoration-color 200ms ease-out}
.prose a:hover,.link:hover{text-decoration-color:currentColor;transition-duration:120ms}

/* focus: ink, 2 px, 3 px outside (about 16:1 on paper; ember is kept for "this needs you") */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
input:focus-visible{border-radius:var(--radius-control)}

.skip{position:absolute;left:var(--s4);top:var(--s3);z-index:20;padding:var(--s2) var(--s3);background:var(--ink);color:var(--paper);font:600 15px/20px var(--font-ui);border-radius:var(--radius-control);text-decoration:none;transform:translateY(-200%)}
.skip:focus{transform:none}

/* ---------- type ----------
   Fraunces has two settings here (tokens.json). At 48 px and above: brandHeadline, Light, optical size 144, -0.03em.
   Below 48 px the hairlines of the 144 cut get spindly, so smaller headlines take the optical size of their own
   pixel size, a little more weight and looser tracking ("heavier and looser so the hairlines survive"). */
.brand{font-family:var(--font-brand);font-weight:300;font-variation-settings:"opsz" 144;letter-spacing:-.03em;word-spacing:.06em;font-kerning:normal}
.mark{font:600 11px/14px var(--font-ui);letter-spacing:.8px;text-transform:uppercase;color:var(--inkTertiary)}
.eyebrow{font:600 11px/14px var(--font-ui);letter-spacing:.8px;text-transform:uppercase;color:var(--inkTertiary);margin-bottom:var(--s4)}
h2.section-title{font-family:var(--font-brand);font-weight:400;font-variation-settings:normal;font-optical-sizing:auto;letter-spacing:-.02em;word-spacing:.04em;font-size:clamp(30px,3.2vw,42px);line-height:1.06;text-wrap:balance;max-width:16em}
.section-lead{margin-top:var(--s6);font:var(--type-lead);color:var(--inkSecondary);max-width:32em;text-wrap:pretty}

/* the small wordmark (wordmarkSmall: Regular, opsz 24, -0.02em) */
.wm-small{font-family:var(--font-brand);font-weight:400;font-variation-settings:"opsz" 24;font-size:28px;line-height:1;letter-spacing:-.02em;color:var(--ink);text-decoration:none;white-space:nowrap}
.wm-small .o,.wm .o{color:var(--ember)}

/* ---------- header ---------- */
.site-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding-block:var(--s6)}
.nav{display:flex;align-items:center;gap:var(--s1);margin-left:auto}
.nav a{font:400 15px/20px var(--font-ui);color:var(--inkSecondary);text-decoration:none;white-space:nowrap;padding:var(--s2) var(--s3);border-radius:var(--radius-control);transition:color 200ms ease-out,background-color 200ms ease-out}
.nav a:hover{color:var(--ink);background:var(--rowHover);transition-duration:120ms}
.nav a[aria-current="page"]{color:var(--ink);font-weight:600}
.theme{display:grid;place-items:center;width:36px;height:36px;margin-left:var(--s1);background:none;border:0;border-radius:var(--radius-control);color:var(--inkSecondary);cursor:pointer;transition:color 200ms ease-out,background-color 200ms ease-out}
.theme:hover{color:var(--ink);background:var(--rowHover);transition-duration:120ms}
.theme svg{width:18px;height:18px;display:block}
.theme svg:not(.on){display:none}
.no-js .theme{display:none}

/* ---------- buttons (2.8) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 var(--s6);border:1px solid transparent;border-radius:var(--radius-control);font:600 15px/20px var(--font-ui);text-decoration:none;cursor:pointer;white-space:nowrap}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:active{opacity:.85}
.btn:disabled{opacity:.4;cursor:default}
.btn-secondary{background:none;color:var(--ink);font-weight:400;border-color:var(--hairlineStrong);transition:background-color 200ms ease-out}
.btn-secondary:hover{background:var(--rowHover);transition-duration:120ms}
.plain{background:none;border:0;padding:0;font:400 13px/18px var(--font-ui);color:var(--inkSecondary);cursor:pointer}
.plain:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ================================================================
   HOME
   ================================================================ */

/* ---------- home header: a bar that stays; its wordmark arrives once the hero's has gone ---------- */
.bar{position:sticky;top:0;z-index:10;background:var(--paper);border-bottom:1px solid transparent;transition:border-color 200ms ease-out}
.bar.scrolled{border-bottom-color:var(--hairline)}
.bar .site-head{padding-block:var(--s4)}
.head-id{display:flex;align-items:baseline;gap:var(--s3);min-width:0}
.head-id .suffix{font:400 13px/18px var(--font-ui);color:var(--inkTertiary);white-space:nowrap}
.reveal-ready .follow,.reveal-ready .head-id .suffix{opacity:0}
.reveal-ready .bar.armed .follow,.reveal-ready .bar.armed .head-id .suffix{transition:opacity var(--fade) ease-in-out}
.reveal-ready .bar.past .follow,.reveal-ready .bar.past .head-id .suffix{opacity:1}
.nav .nav-cta{display:inline-flex;align-items:center;height:36px;padding-block:0;margin-left:var(--s2);color:var(--ink);border:1px solid var(--hairlineStrong)}
/* every page offers Download in the bar */
html:has(body.home){scroll-padding-top:88px}

/* ---------- hero ---------- */
.hero{--wm-size:clamp(108px,11.2vw,164px);display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"copy art";align-items:center;gap:var(--s12);padding-block:var(--s12) var(--s24)}
.hero-copy{grid-area:copy;min-width:0}
.hero-art{grid-area:art;justify-self:end;align-self:center}

.hero h1{margin:0;font-weight:inherit}
/* the wordmark, drawn from its outlines (wordmark.svg), one path per letter: the resting frame is the canonical mark */
.wm{display:block;width:calc(var(--wm-size) * 1.5755);height:calc(var(--wm-size) * .7595);margin-left:calc(var(--wm-size) * -.01);margin-bottom:calc(var(--wm-size) * .45);overflow:visible}
/* .45 of the size is one o-height: the wordmark's clear space (Wordmark README); the slogan starts below it */
.wm .l{fill:var(--ink)}
.wm .l.e{fill:var(--ember)}
.slogan{display:block;font-family:var(--font-brand);font-weight:300;font-variation-settings:"opsz" 144;font-size:clamp(44px,4.1vw,64px);line-height:1.04;letter-spacing:-.03em;word-spacing:.06em;text-wrap:balance;max-width:12.5em}
.slogan .line{display:block}
.nb{white-space:nowrap}
.ap{margin-inline:0}

.pitch{margin-top:var(--s8);font:var(--type-lead);color:var(--inkSecondary);max-width:28em;text-wrap:pretty}
.pitch strong{color:var(--ink);font-weight:600}
/* one quiet line under the form: where it works, and the proof one step away (site.js replays the demo if it ran) */
.works-line{margin-top:var(--s6);font:400 13px/20px var(--font-ui);color:var(--inkSecondary);max-width:36em;text-wrap:pretty}
.works-line .link{white-space:nowrap}

/* sign-up */
.get{margin-top:var(--s8)}
.get .hint{margin-top:var(--s3)}
.get-close{margin-top:var(--s8);text-align:center}
.btn-store{height:48px;padding-inline:var(--s8)}
.signup{margin-top:var(--s8);max-width:460px}
.signup form{display:flex;flex-direction:column}
.signup form > * + *{margin-top:var(--s3)}
.signup label{font:600 15px/20px var(--font-ui)}
.field{display:flex;gap:var(--s2);flex-wrap:wrap}
.field input[type=email]{flex:1 1 220px;min-width:0;height:44px;padding:0 var(--s3);border-radius:var(--radius-control);border:1px solid var(--hairlineStrong);background:var(--paperRaised);color:var(--ink);font:400 16px/20px var(--font-ui);transition:border-color 200ms ease-out}
.field input[type=email]::placeholder{color:var(--inkTertiary)}
.field input[type=email]:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:transparent}
.field .btn{flex:0 0 auto}
.hint{font:400 13px/18px var(--font-ui);color:var(--inkSecondary);text-wrap:pretty}
.hint.err{color:var(--danger)}
.hint .link{white-space:nowrap}
/* the message line is empty until there is something to say; it stays in the tree so it is announced */
.signup form > .hint.msg:empty{margin-top:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.done{font-size:17px;line-height:26px}
.done strong{font-weight:600}

/* ---------- the hero artwork (DIRECTION 9): design size 340 x 250, every length in design units (--u) ----------
   Lengths are multiplied out rather than zoomed, so the words on the sheets are set at their real size with the
   system font's own metrics, and the sheet edge stays a 1 px hairline. Positions are the app's (Illustration.swift). */
.art{--s:1.7;--u:calc(1px * var(--s));--A:600ms;position:relative;width:calc(340 * var(--u));height:calc(250 * var(--u))}
.art.late{--A:0ms}
.art-box{position:absolute;inset:0}
.sh{position:absolute;width:calc(104 * var(--u));height:calc(132 * var(--u));left:calc((var(--x) - 52) * var(--u));top:calc((var(--y) - 66) * var(--u));border-radius:calc(8 * var(--u));background:linear-gradient(var(--sheetTop),var(--sheetBottom));border:1px solid var(--hairlineStrong);box-shadow:0 calc(3 * var(--u)) calc(12 * var(--u)) var(--artShadow);transform:translate(0px,0px) rotate(calc(var(--r) * 1deg));padding:calc(14 * var(--u)) 0 0 calc(16 * var(--u))}
.sh.front{width:calc(108 * var(--u));height:calc(136 * var(--u));left:calc((var(--x) - 54) * var(--u));top:calc((var(--y) - 68) * var(--u));padding:calc(14 * var(--u)) calc(14 * var(--u)) 0 calc(16 * var(--u))}
/* the lifted shadow is its own layer, so it can grow while the sheet rises without repainting the sheet */
.sh.front::after{content:"";position:absolute;inset:-1px;border-radius:inherit;box-shadow:0 calc(10 * var(--u)) calc(28 * var(--u)) var(--artShadowLifted);pointer-events:none}
.sh .tag{display:flex;align-items:center;gap:calc(4 * var(--u));height:calc(12 * var(--u))}
.sh .dot{width:calc(6 * var(--u));height:calc(6 * var(--u));border-radius:50%;background:var(--c)}
.sh .em{width:14px;height:14px;border-radius:50%;background:var(--ember)}
.sh .bars{display:grid;gap:calc(12 * var(--u));margin-top:calc(22 * var(--u));justify-items:start}
/* the back sheets carry a label word, the front sheet the one email that needs you (same mail as the demo) */
.sh .lw{font:600 calc(8 * var(--u))/calc(12 * var(--u)) var(--font-ui);letter-spacing:0;color:var(--c)}
.sh.front .tag{justify-content:space-between}
.sh .fb{display:none}
.sh .mail{margin-top:calc(12 * var(--u));display:grid;gap:calc(4 * var(--u))}
.sh .mail b{font:600 calc(8.5 * var(--u))/calc(11 * var(--u)) var(--font-ui);color:var(--ink)}
.sh .mail span{font:600 calc(7 * var(--u))/calc(9.5 * var(--u)) var(--font-ui);color:var(--ink)}
.sh .mail em{margin-top:calc(6 * var(--u));padding-top:calc(6 * var(--u));border-top:1px solid var(--hairline);font:400 calc(7 * var(--u))/calc(9.5 * var(--u)) var(--font-ui);font-style:normal;color:var(--inkSecondary)}
.sh .bars i{display:block;height:calc(2 * var(--u));border-radius:var(--u);background:var(--hairlineStrong)}
.sh .bars i:nth-child(1){width:calc(54 * var(--u))}.sh .bars i:nth-child(2){width:calc(42 * var(--u))}.sh .bars i:nth-child(3){width:calc(30 * var(--u))}

/* ---------- entrance: one sentence of motion (runs without JS; reduced motion below) ----------
   0.00-0.84  The word is set (DIRECTION 7.3): o r d fade in from 0.10 / 0.17 / 0.24 over 360 ms (outCubic) and rise
              4 px on settle, while the tracking closes by 0.04em per letter (0.10-0.70, outQuint). The hero is set
              flush left, so the first o is the anchor and never leaves the text column; the others close in on it.
              The ember o fades in 0.48-0.84 (inOutSine) and never moves vertically.
   0.78       "Most mail can wait." and, at A = 0.78, the pile fades in as one blank sheet of paper (DIRECTION 9).
   0.82-0.90  The back sheets fan out, middle, left, right, 40 ms apart, 460 ms on settle.
   0.90       "Ordo shows you what can't." and in the same beat the sheet that needs you rises out of the pile
              (420 ms on settle), its lifted shadow grows; its words fade in at 1.08, once it is clearly lifting.
   0.94-1.02  Pitch, form and the line under it, 40 ms apart, each a 400 ms fade and an 8 px settle.
   1.20-1.80  The ember mark on the rising sheet fades in (fadeSlow), 300 ms after the rise starts.
   The whole hero runs on one clock: it waits for Fraunces (html.fonts-wait, at most 300 ms), so nothing swaps
   mid-settle and the order is the same on every load. Played once per visit; after that it is a 200 ms fade. */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes track{from{transform:translateX(calc(var(--i) * 80px))}to{transform:translateX(0px)}}
@keyframes riseWm{from{transform:translateY(48px)}to{transform:translateY(0px)}}
@keyframes rise8{from{transform:translateY(8px)}to{transform:none}}
@keyframes fan{from{transform:translate(calc((170 - var(--x)) * var(--u)),calc((150 - var(--y)) * var(--u))) rotate(0deg)}to{transform:translate(0px,0px) rotate(calc(var(--r) * 1deg))}}

/* 80 outline units are 0.04em (2000 units to the em) */
.wm .tx{animation:track 600ms var(--outQuint) 100ms both}
.wm .tx:first-child{animation:none}
.wm .l{animation:fadeIn 360ms var(--outCubic) calc(100ms + var(--i) * 70ms) both,riseWm 560ms var(--settle) calc(100ms + var(--i) * 70ms) both}
.wm .l.e{animation:fadeIn 360ms var(--inOutSine) 480ms both}
.enter{animation:fadeIn var(--fd,var(--fadeSlow)) ease-out var(--d,0ms) both,rise8 var(--fadeSlow) var(--settle) var(--d,0ms) both}
.hero .enter{--fd:400ms}
.fonts-wait .hero *,.fonts-wait .hero *::after{animation-play-state:paused!important}
.art-box{animation:fadeIn var(--fade) ease-out var(--A) both}
.sh{animation:fan 460ms var(--settle) calc(var(--A) + 40ms + var(--o) * 40ms) both}
.sh.front{animation:fan 420ms var(--settle) calc(var(--A) + 120ms) both}
.sh.front::after{animation:fadeIn 420ms var(--settle) calc(var(--A) + 120ms) both}
.sh .mail{animation:fadeIn var(--fade) ease-out calc(var(--A) + 300ms) both}
.sh .em{animation:fadeIn var(--fadeSlow) ease-out calc(var(--A) + 420ms) both}
/* scroll: as the hero leaves, the stack opens. The back sheets fan wider and sink, the one email that needs you
   lifts and straightens. --p (0-1) comes from site.js; the individual translate/rotate/scale properties add to the
   entrance transform instead of replacing it. */
.sh{--p:var(--sp,0);translate:calc(var(--p) * var(--dx,0) * var(--u)) calc(var(--p) * var(--dy,0) * var(--u));rotate:calc(var(--p) * var(--dr,0) * 1deg);scale:calc(1 + var(--p) * var(--ds,0));will-change:translate,rotate}
.sh:nth-child(1){--dx:-34;--dy:22;--dr:-7}
.sh:nth-child(2){--dx:34;--dy:22;--dr:7}
.sh.mid{--dy:40;--ds:-.06}
.sh.front{--dy:-30;--dr:4;--ds:.08;z-index:1}
.sh.front::after{opacity:calc(1 + var(--p) * .6)}
/* on a phone the art waits below the fold until it is seen */
.reveal-ready .art.hold *,.reveal-ready .art.hold *::after{animation-play-state:paused}
/* a key or a click during the entrance speeds every animation up so it lands in 200 ms from where it is (site.js) */
/* a second visit in the same session: the reduced-motion entrance, a 200 ms fade with every piece in place */
.seen .hero .wm .tx,.seen .hero .sh{animation:none}
.seen .hero .wm .l,.seen .hero .wm .l.e,.seen .hero .enter,.seen .hero .sh .em,.seen .hero .sh .mail,.seen .hero .sh.front::after,.seen .hero .art-box{animation:fadeIn var(--fade) ease-in-out 0ms both}

/* ---------- scroll reveal (site.js adds .reveal-ready and .in; without it everything is visible) ---------- */
.reveal-ready .reveal{opacity:0;transform:translateY(8px);transition:opacity var(--fadeSlow) ease-out,transform var(--fadeSlow) var(--settle)}
.reveal-ready .reveal.in{opacity:1;transform:none}
.reveal-ready .reveal.d1{transition-delay:40ms}.reveal-ready .reveal.d2{transition-delay:80ms}.reveal-ready .reveal.d3{transition-delay:120ms}
.reveal-ready .reveal-group > *{opacity:0;transform:translateY(8px);transition:opacity var(--fadeSlow) ease-out,transform var(--fadeSlow) var(--settle)}
.reveal-ready .reveal-group.in > *{opacity:1;transform:none}
.reveal-group.in > :nth-child(2){transition-delay:40ms}.reveal-group.in > :nth-child(3){transition-delay:80ms}
.reveal-group.in > :nth-child(4){transition-delay:120ms}.reveal-group.in > :nth-child(5){transition-delay:160ms}
.reveal-group.in > :nth-child(n+6){transition-delay:200ms}
/* already on screen at load, or passed in a fast scroll: drawn in place, nobody waits on paper */
.reveal-ready .reveal.now,.reveal-ready .reveal-group.now > *{transition:none!important}

/* ---------- sections ---------- */
.section{padding-block:var(--s24);border-top:1px solid var(--hairline)}
#how{padding-top:var(--s16)}
.section-head{display:grid;gap:0;margin-bottom:var(--s12)}

/* ---------- demo: a window of the app, sorting a morning ---------- */
.demo-wrap{margin-top:var(--s12);max-width:980px}
.demo-mark{display:block;margin-bottom:var(--s3)}
.win{position:relative;contain:layout paint;display:grid;grid-template-columns:220px minmax(0,1fr);background:var(--paper);border:1px solid var(--hairlineStrong);border-radius:var(--radius-sheet);box-shadow:var(--shadow-sheet);overflow:hidden;font-family:var(--font-ui)}
.side{position:relative;border-right:1px solid var(--hairline);padding:var(--s4) 0 var(--s6);background:var(--paper)}
.side .mark{display:block;padding:var(--s2) var(--s4) var(--s2)}
.side .mark + ul{margin-bottom:var(--s4)}
.side ul{list-style:none}
.srow{position:relative;display:flex;align-items:center;justify-content:space-between;height:28px;padding:0 var(--s4);font:400 13px/18px var(--font-ui);color:var(--ink)}
.srow.is-selected{background:var(--rowSelected)}
.srow .n{font:400 11px/14px var(--font-ui);font-variant-numeric:tabular-nums;color:var(--inkTertiary)}
.srow.is-selected .n{color:var(--inkSecondary)}
.srow.needs.has .n{font:600 13px/18px var(--font-ui);color:var(--ember)}
.srow .lbl{display:inline-flex;align-items:center;gap:var(--s2)}
.srow .lbl::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c)}
/* a label's word sits on a watercolour stroke under its lower half, a little wider than the word (Marks.swift LabelWash) */
.w{position:relative;isolation:isolate}
.w::after{content:"";position:absolute;z-index:-1;left:-1px;right:-1px;top:42%;height:55%;border-radius:999px;background:var(--w);filter:blur(.6px);pointer-events:none}
/* ---------- the sorting box at the foot of the sidebar: the app's in-tray (SortingTrayArt.swift), 40 x 34 ---------- */
.side{display:flex;flex-direction:column}
.sbox{margin-top:auto;display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;column-gap:10px;padding:12px var(--s4) 0;border-top:1px solid var(--hairline);transition:padding 300ms var(--spring)}
:root{--spring:cubic-bezier(.34,1.4,.64,1)}
.side{padding-bottom:14px}
.sbox.rest{padding-top:var(--s2)}
.side:has(.sbox.rest){padding-bottom:var(--s2)}
.th{display:block;width:40px;height:34px;transform-origin:50% 50%;transition:transform 300ms var(--spring),height 300ms var(--spring),margin 300ms var(--spring)}
.sbox.rest .th{transform:scale(.8);height:27.2px}
.tray{position:relative;display:block;width:40px;height:34px;transform-origin:50% 100%}
.tray .p{position:absolute;left:7px;top:5px;width:26px;height:20px;transform:translate(var(--x,0px),var(--y,0px)) rotate(var(--r,0deg));transition:transform 300ms var(--spring) var(--dl,0ms)}
.tray .p > i{display:block;width:100%;height:100%;box-sizing:border-box;padding:3px 0 0 3px;border-radius:3px;border:1px solid var(--hairlineStrong);background:linear-gradient(var(--sheetTop),var(--sheetBottom));box-shadow:0 1px 1px rgba(0,0,0,.06)}
.tray .p b{display:block;width:9px;height:3px;border-radius:2px;background:var(--bar,var(--hairlineStrong));transition:background-color var(--fade) ease-in-out}
.tray .p u{display:block;width:13px;height:2px;margin-top:3px;border-radius:1px;background:var(--hairlineStrong)}
.tray .l{--y:-4px;--r:-7deg;--dl:40ms}
.tray .r{--y:-3px;--r:6deg;--dl:80ms}
.tray .f{--y:-1px;--dl:120ms}
.tray .fg{position:absolute;inset:0}
.tray .lip{position:absolute;left:0;bottom:0;width:40px;height:15px;box-sizing:border-box;border-radius:3px 3px 7px 7px;border:1px solid var(--hairlineStrong);background:var(--paperRaised);box-shadow:0 1px 1px rgba(0,0,0,.06)}
/* a letter dropping in: 18 x 13, lifted, aimed at the middle of the tray */
.tray .lt{position:absolute;left:11px;top:8.5px;width:18px;height:13px;box-sizing:border-box;padding:2px 0 0 3px;border-radius:3px;border:1px solid var(--hairlineStrong);background:linear-gradient(var(--sheetTop),var(--sheetBottom));box-shadow:0 2px 4px rgba(0,0,0,.14);opacity:0}
.tray .lt b{display:block;width:7px;height:3px;border-radius:2px;background:var(--bar,var(--hairlineStrong))}
.tray .lt u{display:block;width:9px;height:2px;margin-top:2px;border-radius:1px;background:var(--hairlineStrong)}
.sb-lines{display:grid;gap:2px;min-width:0}
.sb-l1,.sb-l2{display:grid;overflow:hidden}
.sb-l1 > span,.sb-l2 > span{grid-area:1/1}
.sb-l1{font:400 12px/16px var(--font-ui);color:var(--ink)}
.sb-l2{font:400 11px/14px var(--font-ui);color:var(--inkTertiary)}
.sb-l2:empty{display:none}
.sb-l2 > .ember{color:var(--ember)}
.sb-track{grid-column:1/-1;height:2px;margin:var(--s2) 0 0;background:var(--hairline);opacity:0;transition:opacity var(--fadeSlow) ease-out}
.sbox.working .sb-track{opacity:1;transition-duration:var(--fade)}
.sbox.rest .sb-track{height:0;margin:0}
.sb-fill{display:block;height:2px;width:0;background:var(--ink);transition:width 420ms var(--settle)}
/* the sidebar's box carries the progress; the list head shows it only where there is no sidebar */
.lhead .track{display:none}
.selbar{position:absolute;left:0;top:0;width:2px;height:28px;background:var(--ink);transition:transform 520ms var(--settle)}
.tick{animation:fadeIn var(--fade) ease-in-out both}

.list-col{min-width:0;background:var(--paper)}
.strip{display:none}
.lhead{display:grid;gap:4px;padding:var(--s4) var(--s4) 0}
.lhead .t{display:flex;align-items:baseline;gap:var(--s3);font:600 22px/28px var(--font-ui);letter-spacing:-.3px}
.lhead .n{font:400 13px/18px var(--font-ui);color:var(--inkTertiary);font-variant-numeric:tabular-nums}
.win.needs-head .lhead .n{font:600 22px/28px var(--font-ui);letter-spacing:-.3px;color:var(--ember)}
.lhead .s{font:400 12px/16px var(--font-ui);color:var(--inkSecondary);min-height:16px}
.track{height:2px;background:var(--hairline);margin-top:var(--s3);transition:opacity var(--fadeSlow) ease-out 400ms}
.fill{height:2px;width:0;background:var(--ink);transition:width 420ms var(--settle)}
.win.sorted .track{opacity:0}
.rows{position:relative;list-style:none;border-top:1px solid var(--hairline);margin-top:var(--s3);overflow:hidden}
.mrow{display:grid;grid-template-rows:1fr;transition:grid-template-rows 520ms var(--settle),opacity 312ms ease-out}
.mrow > div{overflow:hidden;min-height:0}
.ri{position:relative;display:grid;grid-template-columns:16px 6px 10px minmax(0,1fr) 16px;min-height:72px;padding-block:10px}
.ri::after{content:"";position:absolute;left:32px;right:0;bottom:0;height:1px;background:var(--hairline)}
.mk{grid-column:2;width:6px;height:6px;border-radius:50%;margin-top:24px;background:var(--ember);opacity:0;transition:opacity var(--fadeSlow) ease-out}
.mrow.needs .mk{opacity:1}
.bd{grid-column:4;min-width:0}
.ln{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);min-width:0}
.fr{font:600 13px/18px var(--font-ui)}
.dt{font:400 11px/14px var(--font-ui);color:var(--inkTertiary);font-variant-numeric:tabular-nums;white-space:nowrap}
.sj{font:600 13px/18px var(--font-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the snippet and the why sentence share one cell, so they cross-fade in place */
.sn{display:grid;grid-template-columns:minmax(0,1fr);font:400 12px/16px var(--font-ui);color:var(--inkSecondary);min-width:0;flex:1 1 auto}
.sn > span{grid-area:1/1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sn .why{opacity:0;transition:opacity var(--fade) ease-in-out;color:var(--ink)}
.sn .txt{transition:opacity var(--fade) ease-in-out}
.mrow.why .sn .why{opacity:1}
.mrow.why .sn .txt{opacity:0}
.mrow .ln:last-child{align-items:center}
.lb{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;font:500 11px/14px var(--font-ui);letter-spacing:.2px;color:var(--c);white-space:nowrap;transition:opacity var(--fade) ease-in-out}
.lb::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.js .win.ready .mrow:not(.sorted) .lb{opacity:0}
.mrow.gone{grid-template-rows:0fr;opacity:0}
/* the paper left where the rows were: the window never changes size, so nothing below it moves */
/* where the rest went: a quiet summary under the three rows, so the end frame shows both halves of the promise */
.others{padding:var(--s4) var(--s4) var(--s6) 32px;opacity:0;transition:opacity var(--fadeSlow) ease-out}
.others p{font:400 12px/16px var(--font-ui);color:var(--inkTertiary)}
.others ul{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);margin-top:var(--s2)}
.others li{display:inline-flex;align-items:center;gap:var(--s1);font:500 11px/14px var(--font-ui);letter-spacing:.2px;color:var(--c)}
.others li::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.others li b{font-weight:400;color:var(--inkTertiary);font-variant-numeric:tabular-nums}
.js .others{display:none}
.js .win.rested .others{display:block;animation:fadeIn var(--fadeSlow) ease-out both}
.win.rested .others{opacity:1}
.no-js .others{display:none}
/* Replay and the reduced-motion switch go through a dip to paper (DIRECTION 7, Focus): nothing runs backwards in view */
.veil{position:absolute;inset:0;z-index:2;background:var(--paper);opacity:0;pointer-events:none;transition:opacity 180ms ease-out}
.veil.up{opacity:1;transition-duration:120ms}
.win.instant,.win.instant *{transition:none!important}
/* sorting-box flights (7.2): a dot in the label colour leaves the row for its label in the sidebar */
.flights{position:absolute;inset:0;pointer-events:none;z-index:3}
.fl{position:absolute;left:-3px;top:-3px;transition:transform var(--dur,460ms) var(--inOutSine)}
.fl i{display:block;width:6px;height:6px;border-radius:50%;background:var(--c);transition:transform var(--dur,460ms) var(--settle),opacity 120ms ease-out}
.demo-foot{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);margin-top:var(--s4);font:400 13px/18px var(--font-ui);color:var(--inkTertiary)}
.no-js .demo-foot .plain{display:none}

/* ---------- how it works: three steps, words only ---------- */
.steps-wrap{margin-top:var(--s16);max-width:980px}
.steps-wrap > .mark{display:block;margin-bottom:var(--s4)}
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--s8);counter-reset:none}
.steps li{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr;align-content:start;column-gap:var(--s4);padding-top:var(--s6);border-top:1px solid var(--hairline)}
.steps .num{grid-column:1;grid-row:1 / span 2;font-family:var(--font-brand);font-weight:400;font-variation-settings:normal;font-optical-sizing:auto;font-size:40px;line-height:1;letter-spacing:-.02em;color:var(--inkTertiary);font-variant-numeric:lining-nums}
.steps h3{grid-column:2;grid-row:1;font:600 17px/24px var(--font-ui)}
.steps p{grid-column:2;grid-row:2;align-self:start;margin-top:var(--s2);font:var(--type-support);color:var(--inkSecondary);text-wrap:pretty}
.steps p .link{white-space:nowrap}

/* a quiet call to action where interest peaks; it leads to the one form in the hero */
.cta-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s4) var(--s8);flex-wrap:wrap;margin-top:var(--s16);max-width:980px;padding-top:var(--s6);border-top:1px solid var(--hairline)}
.cta-row p{font:var(--type-support);color:var(--inkSecondary);max-width:34em}
.cta-row p strong{color:var(--ink);font-weight:600}

/* ---------- what it does: words, not icons ---------- */
.facts-lead{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s12);list-style:none;margin-bottom:var(--s8)}
.facts-lead .fact h3{font-family:var(--font-brand);font-weight:400;font-variation-settings:normal;font-optical-sizing:auto;letter-spacing:-.02em;word-spacing:.04em;font-size:32px;line-height:1.15}
.facts-lead .fact p{margin-top:var(--s3);font:var(--type-lead);color:var(--inkSecondary)}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 var(--s8);list-style:none}
.fact{padding-block:var(--s6) var(--s8);border-top:1px solid var(--hairline)}
.fact h3{font:600 17px/24px var(--font-ui);letter-spacing:-.1px}
.fact p{margin-top:var(--s2);font:var(--type-support);color:var(--inkSecondary);text-wrap:pretty}

/* ---------- the second cadence: heading on the left, the content on the right (Privacy, Questions) ---------- */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s16);align-items:start}

/* ---------- keys: a sheet of keycaps beside a small window that answers them ----------
   Keycaps are system type on raised paper with a hairline edge, never monospaced and never ember. A key that is
   pressed only changes its fill (120 ms in, 200 ms out); the steps beside the window go from tertiary to ink. */
.kc{display:inline-grid;place-items:center;min-width:32px;height:32px;padding:0 9px;border:1px solid var(--hairlineStrong);border-radius:var(--radius-control);background:var(--paperRaised);box-shadow:inset 0 -1px 0 var(--hairline);font:500 14px/1 var(--font-ui);color:var(--ink);font-variant-numeric:tabular-nums;transition:background-color 200ms ease-out}
.kc.down{background:var(--keyDown);transition-duration:60ms}
.kdemo-wrap{margin-top:var(--s12);max-width:980px}
.kdemo{display:grid;grid-template-columns:224px minmax(0,1fr);gap:var(--s8);align-items:start}
.kseq{list-style:none;display:grid;gap:var(--s4);padding-top:var(--s6)}
.kstep{display:flex;align-items:center;gap:var(--s3)}
.kstep .caps{display:inline-flex;gap:var(--s1)}
.kstep .cw{font:400 15px/20px var(--font-ui);color:var(--inkTertiary);transition:color var(--fade) ease-in-out}
.kstep.done .cw{color:var(--inkSecondary)}
.kstep.now .cw{color:var(--ink)}
.kwin{display:block;min-width:0}
.kw-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);padding:var(--s4) var(--s4) var(--s3);border-bottom:1px solid var(--hairline)}
.kw-head .t{display:flex;align-items:baseline;gap:var(--s3);font:600 22px/28px var(--font-ui);letter-spacing:-.3px}
.kw-head .t .n{font:400 13px/18px var(--font-ui);letter-spacing:0;color:var(--inkTertiary);font-variant-numeric:tabular-nums}
.kw-needs{font:400 13px/18px var(--font-ui);color:var(--inkSecondary)}
.kw-needs .n{display:inline-block;margin-left:var(--s1);font-weight:600;color:var(--ember);font-variant-numeric:tabular-nums}
/* six rows of 56; the window never changes size, so the undo line rises into the paper an archived row leaves */
.krows{position:relative;list-style:none;height:336px;overflow:hidden}
.krow{display:grid;grid-template-rows:1fr;transition:grid-template-rows 520ms var(--settle),opacity 312ms ease-out}
.krow > div{overflow:hidden;min-height:0}
.krow.gone{grid-template-rows:0fr;opacity:0}
.kri{position:relative;display:grid;grid-template-columns:16px 6px 10px minmax(0,1fr) 16px;height:56px;padding-block:9px}
.kri::after{content:"";position:absolute;left:32px;right:0;bottom:0;height:1px;background:var(--hairline)}
.krow.is-sel .kri{background:var(--rowSelected)}
.krow .mk{grid-column:2;width:6px;height:6px;margin-top:6px;border-radius:50%;background:var(--ember);opacity:0;transition:opacity var(--fadeSlow) ease-out}
.krow.needs .mk{opacity:1}
.kbd-body{grid-column:4;min-width:0}
.kwin .sj{font-weight:400;color:var(--inkSecondary)}
.krow.is-sel .dt{color:var(--inkSecondary)}
.kselbar{position:absolute;left:0;top:0;width:2px;height:56px;background:var(--ink);transition:transform 520ms var(--settle)}
.no-js .kselbar{transform:translateY(112px)}
/* the undo line (DIRECTION 6.10): raised paper, 32 tall, inset 10; it rises 8 and fades in */
.undo{position:absolute;left:10px;right:10px;bottom:10px;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);height:32px;padding:0 var(--s3);background:var(--paperRaised);border-radius:var(--radius-card);box-shadow:var(--shadow-popover);font:400 12px/16px var(--font-ui);color:var(--ink);opacity:0;transform:translateY(8px);transition:opacity var(--fade) ease-out,transform 420ms var(--settle)}
.undo.up{opacity:1;transform:none}
.undo .u-t{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.undo .u-a{flex:0 0 auto;font-weight:600}
/* the Command Palette: a sheet over the list, the field on top, each command with its shortcut on the right */
.palette{position:absolute;top:52px;left:0;right:0;z-index:2;width:min(400px,calc(100% - 32px));margin-inline:auto;background:var(--paperRaised);border:1px solid var(--hairline);border-radius:var(--radius-sheet);box-shadow:var(--shadow-sheet);opacity:0;transform:translateY(8px);visibility:hidden;transition:opacity var(--fade) ease-out,transform 420ms var(--settle),visibility 0s linear var(--fade)}
.palette.open{opacity:1;transform:none;visibility:visible;transition:opacity var(--fade) ease-out,transform 420ms var(--settle),visibility 0s}
.pf{display:flex;align-items:center;height:48px;padding:0 var(--s4);border-bottom:1px solid var(--hairline);font:400 17px/22px var(--font-ui);color:var(--ink)}
.pf .caret{display:block;width:1.5px;height:20px;margin-left:1px;background:var(--ink)}
.pf .ph{margin-left:2px;color:var(--inkTertiary)}
.pf .pq:not(:empty) ~ .ph{display:none}
.pl{list-style:none;padding:6px}
.pl li{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);height:32px;padding:0 10px;border-radius:var(--radius-control);font:400 13px/18px var(--font-ui);color:var(--ink)}
.pl li.is-sel{background:var(--rowSelected)}
.pl li b{font-weight:600}
.pl .sc{flex:0 0 auto;font:400 12px/16px var(--font-ui);letter-spacing:.08em;color:var(--inkTertiary)}
.pl li.is-sel .sc{color:var(--inkSecondary)}
.pl li.ps{position:relative;margin-top:7px;color:var(--inkSecondary)}
.pl li.ps::before{content:"";position:absolute;left:-6px;right:-6px;top:-4px;height:1px;background:var(--hairline)}

/* every single key, at a glance */
.keymap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--s8);margin:var(--s16) 0 0;max-width:980px}
.keymap > div{display:flex;align-items:center;gap:var(--s3);min-height:48px;padding-block:var(--s2);border-top:1px solid var(--hairline)}
.keymap dt{flex:0 0 auto;display:flex;gap:var(--s1)}
.keymap dd{margin:0;font:400 15px/20px var(--font-ui);color:var(--inkSecondary);text-wrap:pretty}
.keymap .kc{min-width:26px;height:26px;padding:0 7px;font-size:13px}
.facts.three{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:var(--s8);max-width:980px}

/* ---------- newsletters: the copy on the left, the window on the right ---------- */
.nsplit{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--s12) var(--s16);align-items:start}
.facts.three.nfacts{grid-column:1 / -1;max-width:none;margin-top:var(--s4)}
.ndemo-wrap{min-width:0;padding-top:var(--s2)}
.nwin{grid-template-columns:minmax(0,1fr) 200px}
.nl{min-width:0;border-right:1px solid var(--hairline)}
.nhead{display:grid;gap:4px;padding:var(--s4) var(--s4) var(--s3);border-bottom:1px solid var(--hairline)}
.nhead .t{font:600 22px/28px var(--font-ui);letter-spacing:-.3px}
.nhead .s{font:400 12px/16px var(--font-ui);color:var(--inkSecondary);font-variant-numeric:tabular-nums}
.nrows{list-style:none;padding-bottom:52px}
.nrow{position:relative;display:flex;align-items:center;gap:var(--s3);min-height:64px;padding:10px var(--s4);border-bottom:1px solid var(--hairline)}
.nrow.is-sel{background:var(--rowSelected)}
.nrow.is-sel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--ink)}
.nr-who{flex:1 1 auto;min-width:0}
.nrow .ln{justify-content:flex-start;gap:var(--s2)}
.nrow .fr{flex:0 0 auto}
.nrow .ad{min-width:0;font:400 12px/16px var(--font-ui);color:var(--inkTertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nr-d{display:flex;align-items:center;gap:var(--s2);margin-top:2px;font:400 12px/16px var(--font-ui);color:var(--inkSecondary);min-width:0}
.nr-d > span:last-child{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nrow.is-sel .nr-d,.nrow.is-sel .ad{color:var(--inkSecondary)}
/* how much of it you read: a 2 pt ink line on a hairline track, always beside the words */
.rb{flex:0 0 32px;height:2px;background:var(--hairlineStrong)}
.rb i{display:block;height:2px;width:calc(var(--r) * 100%);background:var(--ink)}
.nrow.again .nr-d{color:var(--danger)}
.nr-act{position:relative;flex:0 0 auto;display:flex;gap:6px}
.b{display:inline-flex;align-items:center;justify-content:center;height:24px;padding:0 10px;border:1px solid var(--hairlineStrong);border-radius:var(--radius-control);background:var(--paperRaised);font:400 12px/16px var(--font-ui);color:var(--ink);white-space:nowrap;transition:background-color 200ms ease-out,opacity var(--fade) ease-in-out}
.b.down{background:var(--keyDown);transition-duration:60ms}
.nr-done{position:absolute;right:0;top:50%;transform:translateY(-50%);font:400 12px/16px var(--font-ui);color:var(--inkSecondary);opacity:0;transition:opacity var(--fade) ease-in-out}
.nrow.unsub .nr-act .b{opacity:0}
.nrow.unsub .nr-done{opacity:1;transition-delay:120ms}
/* the selected sender's mail in your inbox: thin rows that leave together */
.npane{position:relative;min-width:0;padding-top:var(--s4)}
.npane .mark{display:block;padding:0 var(--s4)}
.np-t{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);padding:var(--s1) var(--s4) var(--s3);border-bottom:1px solid var(--hairline);font:600 13px/18px var(--font-ui)}
.np-t > span:first-child{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-t .n{font:400 13px/18px var(--font-ui);color:var(--inkTertiary);font-variant-numeric:tabular-nums}
.nmail{list-style:none}
.nmail li{display:grid;grid-template-rows:1fr;transition:grid-template-rows 520ms var(--settle),opacity 312ms ease-out}
.nmail li > div{overflow:hidden;min-height:0}
.nmail p{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);height:32px;padding:0 var(--s4);border-bottom:1px solid var(--hairline);font:400 12px/16px var(--font-ui);color:var(--inkSecondary)}
.nmail p > span:first-child{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nmail .nm-more p{color:var(--inkTertiary);border-bottom:0}
.nmail li.gone,.nmail.cleared li{grid-template-rows:0fr;opacity:0}
.np-empty{padding:var(--s4);font:400 12px/16px var(--font-ui);color:var(--inkTertiary);text-wrap:pretty;opacity:0;transition:opacity var(--fadeSlow) ease-out}
.nmail.cleared ~ .np-empty{opacity:1}
/* the question (a sheet from the top of the window): what will happen, and Archive All in the same step */
.ask{position:absolute;top:24px;left:0;right:0;z-index:2;width:min(340px,calc(100% - 32px));margin-inline:auto;padding:var(--s6) var(--s6) var(--s4);background:var(--paperRaised);border:1px solid var(--hairline);border-radius:var(--radius-sheet);box-shadow:var(--shadow-sheet);opacity:0;transform:translateY(-8px);visibility:hidden;transition:opacity var(--fade) ease-out,transform 420ms var(--settle),visibility 0s linear var(--fade)}
.ask.open{opacity:1;transform:none;visibility:visible;transition:opacity var(--fade) ease-out,transform 420ms var(--settle),visibility 0s}
.ask-t{font:600 15px/20px var(--font-ui);color:var(--ink)}
.ask-m{margin-top:var(--s2);font:400 12px/17px var(--font-ui);color:var(--inkSecondary);text-wrap:pretty}
.ask-b{display:grid;gap:var(--s2);margin-top:var(--s4)}
.ask-b .b{height:28px;font-size:13px}
.ask-b .b-pri{background:var(--ink);color:var(--paper);border-color:transparent;font-weight:600}
.ask-b .b-pri.down{background:var(--ink);opacity:.82}
.nwin .undo{right:calc(200px + 10px)}

/* ---------- pricing ---------- */
.plans{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:var(--s6);align-items:start}
.plan{border:1px solid var(--hairline);border-radius:var(--radius-card);padding:var(--s8);background:var(--paper);display:flex;flex-direction:column}
.plan.raised{background:var(--paperRaised);border-color:var(--hairlineStrong)}
/* in dark, raised paper needs its popover edge to read as the card that is offered */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .plan.raised{box-shadow:var(--shadow-popover)}}
:root[data-theme="dark"] .plan.raised{box-shadow:var(--shadow-popover)}
.plan h3{font:600 15px/20px var(--font-ui)}
.plan .price{margin-top:var(--s4);font-family:var(--font-brand);font-weight:300;font-variation-settings:"opsz" 144;letter-spacing:-.03em;font-size:56px;line-height:1}
.plan .price small{font:400 15px/20px var(--font-ui);letter-spacing:0;color:var(--inkSecondary);margin-left:var(--s2)}
/* under the price, two levels only: the other way to pay (secondary), then what is free (ink) */
.plan .alt{margin-top:var(--s3);font:var(--type-support);color:var(--inkSecondary);max-width:34em;text-wrap:pretty}
.plan .alt b{font-weight:600;color:var(--ink)}
.plan .first{margin-top:var(--s4);font:var(--type-support);color:var(--ink);max-width:34em;text-wrap:pretty}
.plan .first strong{font-weight:600}
.plan ul{list-style:none;margin-top:var(--s6);border-top:1px solid var(--hairline)}
.plan li{padding-block:var(--s3);border-bottom:1px solid var(--hairline);font:var(--type-support);color:var(--inkSecondary);text-wrap:pretty}
.plan li:last-child{border-bottom:0}
.plan .small{margin-top:var(--s4);max-width:44em;font:400 12px/18px var(--font-ui);color:var(--inkSecondary)}
.plan .small + .small{margin-top:var(--s1)}
.plan .small .link{white-space:nowrap}
.after-plans{margin-top:var(--s8);max-width:none}

/* ---------- privacy ---------- */
.promises{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s12)}
.promises > li{padding-block:var(--s6);border-top:1px solid var(--hairline)}
.promises h3{font:600 17px/24px var(--font-ui)}
.promises p{margin-top:var(--s2);font:var(--type-support);color:var(--inkSecondary);text-wrap:pretty}
/* what Auto Sort sends: four short lines, so a skimming eye can count them */
.promises .sent{margin-top:var(--s2);padding-left:1.2em;font:var(--type-support);color:var(--ink)}
.promises .sent li + li{margin-top:var(--s1)}
.promises .sent li::marker{color:var(--inkTertiary)}
.more{margin-top:var(--s8);font-size:15px}
.split .section-title{max-width:10em}
.split .more{margin-top:var(--s6)}
.split .promises{grid-template-columns:minmax(0,1fr)}
.split .faq-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s8)}
.split .faq-list li{padding-bottom:var(--s6)}

/* ---------- three questions ---------- */
.faq-list{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--s8)}
.faq-list li{padding-block:var(--s6) 0;border-top:1px solid var(--hairline)}
.faq-list h3{font:600 17px/24px var(--font-ui)}
.faq-list p{margin-top:var(--s2);font:var(--type-support);color:var(--inkSecondary);text-wrap:pretty}
.faq-list .faq-more{margin-top:var(--s3);font:400 15px/20px var(--font-ui)}

/* ---------- closing ---------- */
.closing{padding-block:var(--s32) var(--s24);border-top:1px solid var(--hairline);text-align:center}
.closing .wm-close{display:block;margin:0 auto;width:calc(88px * 1.5755);height:calc(88px * .7595);overflow:visible}
.wm-close .i{fill:var(--ink)}
.wm-close .e{fill:var(--ember)}
.closing .brand{margin:var(--s12) auto 0;font-weight:300;font-variation-settings:"opsz" 144;letter-spacing:-.03em;word-spacing:.06em;font-size:clamp(36px,4.2vw,56px);line-height:1.12;text-wrap:balance;max-width:18em}
.closing .offer{margin-top:var(--s4);font:var(--type-lead);color:var(--inkSecondary)}
.signup-close{margin:var(--s8) auto 0;text-align:left}
.closing-q{margin-top:var(--s6);font-size:15px}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--hairline);padding-block:var(--s8) var(--s12);font:400 13px/20px var(--font-ui);color:var(--inkSecondary)}
.site-foot .row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);flex-wrap:wrap}
.site-foot nav{display:flex;gap:var(--s6);flex-wrap:wrap}
.site-foot nav a{color:var(--inkSecondary);text-decoration:none}
.site-foot nav a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.site-foot .soon{margin-top:var(--s6);color:var(--inkTertiary)}
.site-foot .soon + .legal-line{margin-top:var(--s1)}
.site-foot .legal-line{margin-top:var(--s4);max-width:62em;color:var(--inkTertiary);font-size:12px;line-height:18px}

/* ================================================================
   INNER PAGES (support, privacy, terms)
   ================================================================ */
.page-head{padding-block:var(--s12) var(--s8)}
.page-head h1{font-family:var(--font-brand);font-weight:300;font-variation-settings:"opsz" 144;letter-spacing:-.035em;font-size:clamp(44px,6vw,80px);line-height:1;text-wrap:balance}
.page-head .lead{margin-top:var(--s4);font:var(--type-lead);color:var(--inkSecondary);max-width:34em}
.page-head .note{margin-top:var(--s3);font:400 15px/24px var(--font-ui);color:var(--inkSecondary)}
.topics-row{display:none}

/* support */
.support{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--s16);align-items:start;padding-bottom:var(--s16)}
.support h2{font-family:var(--font-brand);font-weight:400;font-variation-settings:normal;font-optical-sizing:auto;letter-spacing:-.02em;font-size:32px;line-height:1.15;margin-top:var(--s12);margin-bottom:var(--s4);scroll-margin-top:24px}
.support h2:first-child{margin-top:0}
/* the first section heading shares its line with Show All Answers */
.qa-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);margin-bottom:var(--s4)}
.support .qa-head h2{margin:0}
.qa-head #show-all{white-space:nowrap}
.qa{border-top:1px solid var(--hairline)}
.qa details{border-bottom:1px solid var(--hairline);scroll-margin-top:24px}
.qa summary{list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);padding-block:var(--s4);cursor:pointer;font:600 17px/24px var(--font-ui);border-radius:2px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"Show" / "";flex:0 0 auto;font:400 13px/18px var(--font-ui);color:var(--inkTertiary);transition:color 200ms ease-out}
.qa details[open] summary::after{content:"Hide" / ""}
.qa summary:hover::after{color:var(--ink);transition-duration:120ms}
.qa .a{padding-bottom:var(--s6);max-width:40em}
.qa details[open] .a{animation:fadeIn var(--fade) ease-in-out both}
.prose{font-size:16px;line-height:26px}
.prose p,.prose ul,.prose ol{margin-top:var(--s3)}
.prose > :first-child{margin-top:0}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin-top:var(--s1);padding-left:2px}
.prose li::marker{color:var(--inkTertiary)}
.prose strong{font-weight:600}
.prose code{font:inherit;background:var(--rowSelected);padding:0 4px;border-radius:4px}

.aside{position:sticky;top:var(--s6);display:grid;gap:var(--s6)}
.card{border:1px solid var(--hairlineStrong);background:var(--paperRaised);border-radius:var(--radius-card);padding:var(--s6)}
.card h2{margin:0 0 var(--s3);font:600 15px/20px var(--font-ui);letter-spacing:0}
.card p{font-size:15px;line-height:24px}
.card p + p{margin-top:var(--s3)}
.card .muted{color:var(--inkSecondary);font-size:13px;line-height:20px}
.toc-mini{list-style:none;font-size:15px;line-height:22px}
.toc-mini li + li{margin-top:var(--s2)}
.toc-mini a{color:var(--inkSecondary);text-decoration:none}
.toc-mini a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* legal */
.legal-layout{display:grid;grid-template-columns:220px minmax(0,36em);gap:var(--s16);justify-content:center;padding-block:var(--s12) var(--s16)}
.legal-layout .legal{grid-column:2;grid-row:1}
.toc{grid-column:1;grid-row:1;position:sticky;top:var(--s6);align-self:start;max-height:calc(100vh - 48px);overflow:auto;padding-right:var(--s2)}
.toc .mark{display:block;margin-bottom:var(--s3)}
.toc ol{list-style:none;border-left:1px solid var(--hairline)}
.toc li a{display:block;padding:var(--s1) 0 var(--s1) var(--s3);margin-left:-1px;border-left:2px solid transparent;font:400 13px/18px var(--font-ui);color:var(--inkSecondary);text-decoration:none;transition:color 200ms ease-out}
.toc li a:hover{color:var(--ink);transition-duration:120ms}
.toc li a[aria-current="true"]{color:var(--ink);border-left-color:var(--ink);font-weight:600}
.toc-phone{display:none}

.legal{font-size:17px;line-height:28px;max-width:36em}
/* 36em at 17 px is about 612 px, about 70 characters a line */
.legal h1{font-family:var(--font-brand);font-weight:300;font-variation-settings:"opsz" 144;letter-spacing:-.035em;font-size:clamp(40px,5.2vw,64px);line-height:1.02;text-wrap:balance;margin-bottom:var(--s6)}
.legal h1 + p{font:400 13px/18px var(--font-ui);color:var(--inkTertiary);letter-spacing:.2px;text-transform:none}
.legal h2{font-family:var(--font-brand);font-weight:400;font-variation-settings:normal;font-optical-sizing:auto;letter-spacing:-.02em;word-spacing:.04em;font-size:30px;line-height:1.15;margin-top:var(--s16);margin-bottom:var(--s4);padding-top:var(--s6);border-top:1px solid var(--hairline);scroll-margin-top:16px}
.legal h3{font:600 17px/24px var(--font-ui);margin-top:var(--s8);margin-bottom:var(--s2)}
.legal p,.legal ul{margin-top:var(--s4)}
.legal h2 + p,.legal h2 + ul,.legal h3 + p,.legal h3 + ul{margin-top:0}
.legal ul{padding-left:1.3em}
.legal li{margin-top:var(--s2);padding-left:2px}
.legal li::marker{color:var(--inkTertiary)}
.legal ul ul{margin-top:var(--s2)}
.legal strong{font-weight:600}
.legal a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--hairlineStrong);overflow-wrap:anywhere}
.legal a:hover{text-decoration-color:currentColor}
.legal code{font:inherit}
.legal .table{margin-top:var(--s6);overflow-x:auto;border:1px solid var(--hairline);border-radius:var(--radius-card);background:var(--paperRaised);-webkit-overflow-scrolling:touch}
.legal table{border-collapse:collapse;width:100%;min-width:640px;font:400 13px/19px var(--font-ui)}
.legal th{text-align:left;font:600 11px/14px var(--font-ui);letter-spacing:.8px;text-transform:uppercase;color:var(--inkTertiary);padding:var(--s3) var(--s4);border-bottom:1px solid var(--hairline);vertical-align:bottom}
.legal td{padding:var(--s3) var(--s4);border-bottom:1px solid var(--hairline);vertical-align:top}
.legal tr:last-child td{border-bottom:0}
.legal td:first-child{font-weight:600}
.to-top{margin-top:var(--s12);font-size:15px}
.legal h2 .anchor{margin-left:var(--s2);font:400 .7em/1 var(--font-ui);color:var(--inkTertiary);text-decoration:none;opacity:0;transition:opacity 200ms ease-out}
.legal h2:hover .anchor,.legal h2:focus-within .anchor{opacity:1;transition-duration:120ms}
/* without hover (a phone), the anchor stays, quietly */
@media (hover:none){.legal h2 .anchor{opacity:.35}}
.legal h2 .anchor:hover{color:var(--ink)}
.to-contents{display:none}
/* on a wide page the tables may use the empty column on the right; the prose keeps its measure */
@media (min-width:1240px){.legal .table{margin-right:-112px}}

/* on a phone a wide table is read row by row: each row a card, each cell under its column's name */
@media (max-width:640px){
  .legal .table{overflow:visible;border:0;background:none;border-radius:0}
  .legal table{min-width:0;font-size:15px;line-height:22px}
  .legal table,.legal tbody,.legal tr,.legal td{display:block}
  .legal thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .legal tr{padding-block:var(--s4);border-top:1px solid var(--hairline)}
  .legal tr:last-child{border-bottom:1px solid var(--hairline)}
  .legal td{padding:0;border:0}
  .legal td + td{margin-top:var(--s3)}
  .legal td:first-child{font:600 17px/24px var(--font-ui)}
  .legal td:not(:first-child)::before{content:attr(data-label) / "";display:block;margin-bottom:2px;font:600 11px/14px var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--inkTertiary)}
}

/* support: the answers */
.no-js #show-all{display:none}

/* ---------- responsive ---------- */
/* clamped Fraunces headlines leave the 144 cut where they drop under 48 px */
@media (max-width:922px){.legal h1{font-weight:400;font-variation-settings:normal;font-optical-sizing:auto;letter-spacing:-.02em}}
@media (max-width:799px){.page-head h1{font-weight:400;font-variation-settings:normal;font-optical-sizing:auto;letter-spacing:-.02em}}
@media (max-width:1180px){
  .art{--s:1.22}
}
@media (max-width:980px){
  .hero{grid-template-columns:1fr;grid-template-areas:"copy" "art";padding-block:var(--s8) var(--s16);gap:var(--s12)}
  .hero-art{justify-self:center;margin-top:0}
  .art{--s:1.3}
  .head-id .suffix{display:none}
  .wm{margin-bottom:calc(var(--wm-size) * .45)}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s12)}
  .faq-list,.split .faq-list{grid-template-columns:1fr}
  .faq-list li{padding-bottom:var(--s6)}
  .steps{grid-template-columns:1fr;gap:var(--s2)}
  .steps li{padding-block:var(--s4)}
  .split{grid-template-columns:1fr;gap:var(--s8)}
  .nsplit{grid-template-columns:1fr;gap:var(--s8)}
  .ndemo-wrap{padding-top:0;max-width:720px}
  .keymap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts.three{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .support{grid-template-columns:1fr;gap:var(--s12)}
  .aside{position:static;order:-1}
  .aside .topics{display:none}
  .topics-row{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);margin-top:var(--s6);list-style:none;font:400 15px/22px var(--font-ui)}
  .topics-row a{color:var(--inkSecondary);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--hairlineStrong)}
  .topics-row a:hover{color:var(--ink);text-decoration-color:currentColor}
  .legal-layout{grid-template-columns:minmax(0,1fr);gap:0}
  .legal-layout .legal{grid-column:1}
  .toc{display:none}
  .toc-phone{display:block;margin-block:var(--s6) var(--s8);border:1px solid var(--hairline);border-radius:var(--radius-card);background:var(--paperRaised)}
  .toc-phone summary{list-style:none;display:flex;justify-content:space-between;align-items:baseline;padding:var(--s3) var(--s4);cursor:pointer;font:600 15px/20px var(--font-ui)}
  .toc-phone summary::-webkit-details-marker{display:none}
  .toc-phone summary::after{content:"Show" / "";font:400 13px/18px var(--font-ui);color:var(--inkTertiary)}
  .toc-phone[open] summary::after{content:"Hide" / ""}
  .toc-phone ol{list-style:none;padding:0 var(--s4) var(--s3);border-top:1px solid var(--hairline)}
  .toc-phone a{display:block;padding-block:var(--s2);font:400 15px/20px var(--font-ui);color:var(--inkSecondary);text-decoration:none;border-bottom:1px solid var(--hairline)}
  .toc-phone li:last-child a{border-bottom:0}
  .to-contents{display:block;position:fixed;right:var(--s4);bottom:calc(var(--s4) + env(safe-area-inset-bottom));z-index:5;padding:var(--s2) var(--s3);font:600 13px/18px var(--font-ui);color:var(--ink);text-decoration:none;background:var(--paperRaised);border:1px solid var(--hairlineStrong);border-radius:var(--radius-control);box-shadow:var(--shadow-popover);transition:opacity 200ms ease-out}
  .js .to-contents:not(.shown){opacity:0;pointer-events:none}
  /* the Contents pill never covers the last lines */
  .legal{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
}
@media (max-width:760px){
  :root{--gutter:16px}
  .site-head{padding-block:var(--s4)}
  .bar .site-head{padding-block:var(--s3)}
  .nav a{padding:var(--s2)}
  .nav .nav-cta{padding-inline:var(--s3);margin-left:var(--s1)}
  .legal-layout{padding-top:var(--s8)}
  .page-head{padding-top:var(--s8)}
  /* the label word moves up to the sender's line, before the time: every row has three lines, sorted or not,
     and the why sentence gets the full width and two lines */
  .mrow .bd{display:grid;grid-template-columns:minmax(0,1fr) auto auto;column-gap:var(--s3);align-items:baseline}
  .mrow .bd .ln{display:contents}
  .mrow .fr{grid-area:1/1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mrow .lb{grid-area:1/2}
  .mrow .dt{grid-area:1/3}
  .mrow .sj{grid-area:2/1/3/-1}
  .mrow .sn{grid-area:3/1/4/-1}
  .mrow .sn .why{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .win{grid-template-columns:1fr}
  .side{display:none}
  .lhead .track{display:block}
  .strip{position:relative;display:flex;gap:var(--s6);padding:var(--s3) var(--s4) 0;font:400 13px/18px var(--font-ui);color:var(--inkSecondary);border-bottom:1px solid var(--hairline)}
  .strip .st{padding-bottom:var(--s2)}
  .strip .st.is-on{color:var(--ink);font-weight:600}
  .strip .n{font-weight:400;font-variant-numeric:tabular-nums;color:var(--inkTertiary);margin-left:2px}
  .strip .st.needs.has .n{font-weight:600;color:var(--ember)}
  .strip .ul{position:absolute;left:0;bottom:-1px;width:0;height:2px;background:var(--ink);transition:transform 520ms var(--settle),width 520ms var(--settle)}
  .no-js .strip .st.is-on{box-shadow:inset 0 -2px var(--ink)}
  .facts,.facts-lead{grid-template-columns:1fr}
  .facts-lead .fact h3{font-size:28px}
  .promises{grid-template-columns:1fr}
  .section{padding-block:var(--s16)}
  #how{padding-top:var(--s16)}
  .closing{padding-block:var(--s16)}
  .closing .brand{margin-top:var(--s8)}
  .cta-row{margin-top:var(--s12)}
  .closing .wm-close{width:calc(72px * 1.5755);height:calc(72px * .7595)}
  .plan{padding:var(--s6)}
  .plan .price{font-size:48px}
  .kdemo{grid-template-columns:1fr;gap:var(--s4)}
  .kseq{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);padding-top:0}
  .kstep{gap:var(--s2)}
  .kstep .cw{font-size:13px;line-height:18px}
  .kseq .kc{min-width:28px;height:28px;padding:0 8px;font-size:13px}
  .keymap{gap:0 var(--s4);margin-top:var(--s12)}
  .keymap dd{font-size:13px;line-height:18px}
  .demo-foot{flex-direction:column;gap:var(--s2)}
  .site-foot .row{row-gap:var(--s4)}
  .site-foot nav{flex-basis:100%;display:grid;grid-template-columns:repeat(3,max-content);gap:var(--s2) var(--s6)}
  .legal{font-size:16px;line-height:26px}
  .legal h2{font-size:26px;margin-top:var(--s12)}
}
@media (max-width:480px){
  .hero{--wm-size:clamp(96px,30vw,128px);padding-block:var(--s6) var(--s12)}
  .slogan{text-wrap:wrap;font-size:clamp(30px,9vw,40px);font-weight:400;font-variation-settings:normal;font-optical-sizing:auto;letter-spacing:-.02em;word-spacing:.04em}
  .pitch{font-size:17px;line-height:27px;margin-top:var(--s6)}
  /* the art keeps a real size and loses the small words on the front sheet: abstract, not illegible */
  .art{--s:1.1;margin-inline:calc(-13px * var(--s))}
  .sh.front .mail{display:none}
  /* the label words never render below 11 px */
  .sh .lw{font-size:11px;line-height:14px}
  .sh.front .fb{display:grid}
  /* home: the page's own anchors give way; elsewhere Download does, so Support, Privacy and Terms stay */
  .home .nav .opt,.home .nav .opt2{display:none}
  body:not(.home):not(.legal-page) .nav .opt2{display:none}
  .legal-page .nav .opt0{display:none}
  .nav .nav-cta{height:32px}
  .cta-row .btn{flex:1 1 100%}
  .field .btn{flex:1 1 100%}
}
@media (max-width:380px){
  .art{--s:1.04}
}
/* newsletters on a narrow window: the list alone, one button a row; the undo line still says what left */
@media (max-width:640px){
  .nwin{grid-template-columns:1fr}
  .nl{border-right:0}
  .npane{display:none}
  .nwin .undo{right:10px}
  .nrow .ad,.nrow .b-ar{display:none}
  .keymap{grid-template-columns:1fr}
}

/* ---------- reduced motion: every movement becomes a 200 ms fade, final state drawn in place ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .wm .tx{animation:none!important}
  .wm .l,.wm .l.e,.enter,.sh .em,.sh .mail,.sh.front::after{animation:fadeIn var(--fade) ease-in-out 0ms both!important}
  .reveal-ready .reveal-group > *{transform:none;transition:opacity var(--fade) ease-in-out}
  .reveal-ready .reveal-group.in > *{transition-delay:0ms}
  .sh,.sh.front{animation:none!important}
  .sh{translate:none!important;rotate:none!important;scale:none!important}
  .art-box{animation:fadeIn var(--fade) ease-in-out 0ms both!important}
  .reveal-ready .reveal{transform:none;transition:opacity var(--fade) ease-in-out}
  .reveal-ready .reveal.in{transition-delay:0ms}
  .mrow{transition:opacity var(--fade) ease-in-out,grid-template-rows 0s linear var(--fade)}
  .fill{transition:none}
  .veil,.veil.up{transition-duration:var(--fade)}
  .selbar,.strip .ul{transition:none}
  .mk,.track,.others{transition:opacity var(--fade) ease-in-out}
  .krow,.nmail li{transition:opacity var(--fade) ease-in-out,grid-template-rows 0s linear var(--fade)}
  .kselbar{transition:none}
  .krow .mk,.np-empty{transition:opacity var(--fade) ease-in-out}
  .undo,.palette,.ask,.palette.open,.ask.open{transform:none}
  .palette,.ask{transition:opacity var(--fade) ease-in-out,visibility 0s linear var(--fade)}
  .palette.open,.ask.open{transition:opacity var(--fade) ease-in-out,visibility 0s}
  .undo{transition:opacity var(--fade) ease-in-out}
  .qa details[open] .a{animation:none}
  .js .win.rested .others{animation-duration:var(--fade)}
}
@media print{
  .site-head nav,.theme,.toc,.toc-phone,.skip,.demo-foot,.signup,#show-all,.flights,.cta-row,.veil,#kwin-replay,#nwin-replay{display:none}
  .bar{position:static}
  .reveal,.reveal-ready .reveal{opacity:1!important;transform:none!important}
  .follow,.head-id .suffix{opacity:1!important}
  body{background:#fff;color:#000}
}
.not-found{padding-block:var(--s16) 128px}
.not-found .actions{margin-top:var(--s8);display:flex;gap:var(--s3);flex-wrap:wrap}

/* ---------- the Mac App Store badge (Apple's artwork, unmodified): black on light, white on dark, never animated ---------- */
.store-badge{display:inline-block;margin:12px 0 0 -2px;padding:0;line-height:0;border-radius:10px}
.store-badge img{display:block;height:48px;width:auto}
.badge-white{display:none!important}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .badge-black{display:none!important}:root:not([data-theme="light"]) .badge-white{display:block!important}}
:root[data-theme="dark"] .badge-black{display:none!important}
:root[data-theme="dark"] .badge-white{display:block!important}
.get .hint{margin-top:var(--s4)}

/* ---------- the middle sheet shows its foot under the risen one: text bars, like a page ---------- */
.sh.mid .bars{position:absolute;left:calc(16 * var(--u));bottom:calc(18 * var(--u));margin:0}

/* ---------- the end of the demo: what went under its label, one line each ---------- */
.others ul.filed{display:grid;gap:0;margin-top:var(--s3);border-top:1px solid var(--hairline)}
.others ul.filed li{display:grid;grid-template-columns:96px minmax(0,140px) minmax(0,1fr);align-items:center;gap:var(--s3);min-height:36px;border-bottom:1px solid var(--hairline);font:400 12px/16px var(--font-ui);color:var(--inkSecondary)}
.others ul.filed li::before{content:none}
.others .fd-l{display:inline-flex;align-items:center;gap:var(--s1);font:500 11px/14px var(--font-ui);letter-spacing:.2px;color:var(--c)}
.others .fd-l::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.others .fd-f{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.others .fd-s{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:640px){.others ul.filed li{grid-template-columns:84px minmax(0,1fr)}.others .fd-s{display:none}}