/* The brand faces, self-hosted (spec §6.14: font-src 'self'), from the Fontsource packages pinned in package.json.
   The prototype loaded the same families and weights from a font CDN: Gabarito 700 and 900, Hanken Grotesk 400,
   500 and 700, DM Mono 400 and 500. Latin and Latin Extended only; the browser fetches only what a page uses. *//* gabarito-latin-700-normal */
@font-face {
  font-family: 'Gabarito';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/_astro/gabarito-latin-700-normal.BAFSd0WX.woff2) format('woff2'), url(/_astro/gabarito-latin-700-normal.D9o2lxqd.woff) format('woff');
}
/* gabarito-latin-900-normal */
@font-face {
  font-family: 'Gabarito';
  font-style: normal;
  font-display: swap;
  font-weight: 900;
  src: url(/_astro/gabarito-latin-900-normal.Po6Gpd8E.woff2) format('woff2'), url(/_astro/gabarito-latin-900-normal.hMPEBsD4.woff) format('woff');
}
/* hanken-grotesk-latin-400-normal */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/hanken-grotesk-latin-400-normal.BG6hkEXj.woff2) format('woff2'), url(/_astro/hanken-grotesk-latin-400-normal.CjyVwvJV.woff) format('woff');
}
/* hanken-grotesk-latin-500-normal */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/_astro/hanken-grotesk-latin-500-normal.DrDcrrxK.woff2) format('woff2'), url(/_astro/hanken-grotesk-latin-500-normal.Bo-NxEKf.woff) format('woff');
}
/* hanken-grotesk-latin-700-normal */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/_astro/hanken-grotesk-latin-700-normal.CeQ8H3UY.woff2) format('woff2'), url(/_astro/hanken-grotesk-latin-700-normal.6IGCzoPh.woff) format('woff');
}
/* dm-mono-latin-400-normal */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/dm-mono-latin-400-normal.4GdczIuU.woff2) format('woff2'), url(/_astro/dm-mono-latin-400-normal.-0xN8mdc.woff) format('woff');
}
/* dm-mono-latin-500-normal */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/_astro/dm-mono-latin-500-normal.DRMDZjhP.woff2) format('woff2'), url(/_astro/dm-mono-latin-500-normal.CN8Miw6E.woff) format('woff');
}
/* gabarito-latin-ext-700-normal */
@font-face {
  font-family: 'Gabarito';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/_astro/gabarito-latin-ext-700-normal.DQb71ylV.woff2) format('woff2'), url(/_astro/gabarito-latin-ext-700-normal.BUxEfFzl.woff) format('woff');
}
/* gabarito-latin-ext-900-normal */
@font-face {
  font-family: 'Gabarito';
  font-style: normal;
  font-display: swap;
  font-weight: 900;
  src: url(/_astro/gabarito-latin-ext-900-normal.6rr8V9z6.woff2) format('woff2'), url(/_astro/gabarito-latin-ext-900-normal.D3Who2Kg.woff) format('woff');
}
/* hanken-grotesk-latin-ext-400-normal */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/hanken-grotesk-latin-ext-400-normal.DR7lHpW4.woff2) format('woff2'), url(/_astro/hanken-grotesk-latin-ext-400-normal.DI-aIsWt.woff) format('woff');
}
/* hanken-grotesk-latin-ext-500-normal */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/_astro/hanken-grotesk-latin-ext-500-normal.DLb9JDK8.woff2) format('woff2'), url(/_astro/hanken-grotesk-latin-ext-500-normal.BNvrJ0Ju.woff) format('woff');
}
/* hanken-grotesk-latin-ext-700-normal */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/_astro/hanken-grotesk-latin-ext-700-normal.CK2OfQqO.woff2) format('woff2'), url(/_astro/hanken-grotesk-latin-ext-700-normal.BXHnjv6S.woff) format('woff');
}
/* dm-mono-latin-ext-400-normal */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/dm-mono-latin-ext-400-normal.C2zvOubV.woff2) format('woff2'), url(/_astro/dm-mono-latin-ext-400-normal.1aZr6b2b.woff) format('woff');
}
/* dm-mono-latin-ext-500-normal */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/_astro/dm-mono-latin-ext-500-normal.BtRyHRi6.woff2) format('woff2'), url(/_astro/dm-mono-latin-ext-500-normal.Dw3M13d8.woff) format('woff');
}
/* Copied verbatim from the Nabbins repo, brand/tokens.css, at commit 2faed6f
   (the file last changed in 4c967c5). Never edit this copy: change the source and copy it again.
   One local change, 20 Oct: --brand is #EB4A2A (founder ruling; was #F4622D). brand/tokens.css in Nabbins still needs it. */
/* Nabbins design tokens — phi = 1.6180339887, root 16px */
:root{
  --phi:1.6180339887;

  /* type — steps of sqrt(phi) = 1.272; two steps = one golden step */
  --t-micro:12.6px;   /* 16 / sqrt(phi) */
  --t-body:16px;      /* root */
  --t-lead:20.4px;    /* 16 * sqrt(phi) */
  --t-h3:25.9px;      /* 16 * phi */
  --t-h2:32.9px;      /* 16 * phi * sqrt(phi) */
  --t-display:41.9px; /* 16 * phi^2 */
  --t-mark:67.8px;    /* 16 * phi^3 */
  --t-hero:109.7px;   /* 16 * phi^4 */

  /* space — steps of phi */
  --s1:6.1px; --s2:9.9px; --s3:16px; --s4:25.9px; --s5:41.9px; --s6:67.8px;

  /* layout — 1040 = 642.8 * phi */
  --wrap:1040px; --measure:642.8px;

  /* leading */
  --lh-body:1.618; --lh-head:1.272;

  /* radii */
  --r1:9.9px; --r2:16px; --r3:25.9px;

  /* light palette */
  --bg:#F5F7F5; --surface:#FFFFFF; --surface-2:#EDF1EE;
  --ink:#0E3B37; --muted:#4A635E; --line:#DCE5E1;
  --brand:#EB4A2A; --brand-deep:#C4431A; --brand-soft:#FFE2D6;
  --butter:#FFD166; --butter-soft:#FFF0C7; --amber-text:#8A5A00;
  --mint:#57C99A; --mint-soft:#D8F2E6; --mint-text:#1F7A55;
  /* text on a soft tint — the plain text tokens are certified against white only */
  --brand-on-soft:#B63E18; --mint-on-soft:#1D7451;
  --on-brand:#FFFFFF;   /* text and icons on a --brand-deep fill */
  --sky:#7FC0E5; --sky-text:#2A6F9B;
  --grape:#B79BE0; --grape-text:#7355A8;
  --rose:#F0A0BC; --rose-text:#B53A61;
  --leaf:#96BC6A; --leaf-text:#557531;
  --danger:#C0341B;

  /* type faces */
  --display:'Gabarito','Trebuchet MS',system-ui,sans-serif;
  --body:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;
  --mono:'DM Mono',SFMono-Regular,Consolas,monospace;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0B211F; --surface:#15342F; --surface-2:#1C403A;
    --ink:#E8EFEA; --muted:#9DB5AE; --line:#294B44;
    --brand:#FF8A5B; --brand-deep:#FF8A5B; --brand-soft:#3A2119;
    --butter-soft:#3A2F12; --amber-text:#FFD166;
    --mint-soft:#123329; --mint-text:#57C99A;
    --brand-on-soft:#FF8A5B; --mint-on-soft:#57C99A;
    --on-brand:#0B211F;
    --sky-text:#7FC0E5; --grape-text:#B79BE0; --rose-text:#F0A0BC; --leaf-text:#96BC6A;
    --danger:#FF8873;
  }
}
:root[data-theme="dark"]{
  --bg:#0B211F; --surface:#15342F; --surface-2:#1C403A;
  --ink:#E8EFEA; --muted:#9DB5AE; --line:#294B44;
  --brand:#FF8A5B; --brand-deep:#FF8A5B; --brand-soft:#3A2119;
  --butter-soft:#3A2F12; --amber-text:#FFD166;
  --mint-soft:#123329; --mint-text:#57C99A;
    --brand-on-soft:#FF8A5B; --mint-on-soft:#57C99A;
    --on-brand:#0B211F;
  --sky-text:#7FC0E5; --grape-text:#B79BE0; --rose-text:#F0A0BC; --leaf-text:#96BC6A;
  --danger:#FF8873;
}

/* NOTE: #EB4A2A fails WCAG AA as body text on light (3.8:1 with white; was #F4622D at 2.9:1).
   Use --brand-deep (#C4431A, 5.0:1 on white) for orange text on white or --bg.

   ON A SOFT TINT, USE THE ON-SOFT TOKENS. Measured 21 Sep across the canvas:
     --brand-deep on --brand-soft  4.11   fails   -> --brand-on-soft  4.63
     --brand-deep on --surface-2   4.42   fails   -> --brand-on-soft  4.99
     --mint-text  on --mint-soft   4.47   fails   -> --mint-on-soft   4.84
     --mint-text  on --brand-soft  4.30   fails   -> --mint-on-soft   4.66
   --brand-deep stays as it is because it is also the fill of every primary button.

   LEAF (Eating out, the fifth spending hue), added 3 Oct by the founder's choice from four candidates.
     --leaf #96BC6A: farthest of the four from the six hues already in use under typical vision, protanopia,
       deuteranopia and tritanopia (CIEDE2000 9.3 at its nearest; sky and grape are 3.5 apart). Clear of --brand.
     --leaf-text #557531: 5.28 on white, 4.91 on --bg, 4.63 on --surface-2. (#5B7B36 was 4.25 on --surface-2.)
     Dark mode: --leaf on --surface 6.20, on --surface-2 5.26, on --bg 7.75, so --leaf-text aliases --leaf.
   Dark mode needs no change (6.40 and 6.68), so the on-soft tokens alias the text tokens.

   TEXT ON A BRAND FILL USES --on-brand, never a literal white.
   In dark mode --brand-deep is #FF8A5B, and white on it is 2.32. --on-brand flips to the
   dark page colour there: 7.22, with the fill still 7.22 against the page. Keeping white
   and using the light fill in dark instead was rejected: 2.66 against a dark card, which
   fails SC 1.4.11 for the button's own edge. */
/* The Nabbins homepage stylesheet.
   Ported from the approved prototype, round 10 "E1SLIDE" (launch-e1slide.html, sha256 4250b9e018e9140c, built by
   round10/work/rows/build_rows.py), with three mechanical changes and nothing else:
     1. the token block is brand/tokens.css (imported before this file, verbatim); the prototype's one token
        addition, --shadow, is kept below;
     2. rules whose selectors can never match this page's markup were dropped (234 selectors: earlier rounds'
        waitlist form, strips, embeds and tables; the page has no script, so nothing adds those classes later);
     3. the phone-frame renders are served from /assets/ instead of a relative assets/ folder.
   Plus one addition: color-scheme follows the OS in dark mode, as the prototype's dark twin did via data-theme.
   No style attribute and no inline \3c style> anywhere (spec §6.14 CSP: style-src 'self'). */
:root{ --shadow:0 1px 2px rgba(14,59,55,.06), 0 10px 26px rgba(14,59,55,.07); }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 26px rgba(0,0,0,.28); } }
:root[data-theme="dark"]{ --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 26px rgba(0,0,0,.28); }
@media (prefers-color-scheme:dark){ html:not([data-theme="light"]){ color-scheme:dark; } }
/* ---- web additions (research/site/brand.md §1; spec §6.1) ----------------------------------- */
:root{
  --t-53:53.3px; --t-86:86.2px; --s7:109.7px;
  --fs-micro:.7875rem; --fs-body:1rem; --fs-lead:1.275rem; --fs-h3:1.619rem; --fs-h2:2.056rem;
  --fs-display:2.619rem; --fs-53:3.331rem; --fs-mark:4.238rem;
  --pennant:#EB4A2A;        /* never themed (brand.md §1.1) */
  --field:var(--brand);     /* the room: --brand used as a fill, never text. #EB4A2A light, #FF8A5B dark */
  --gutter:25.9px;
}
@media (max-width:640px){ :root{ --gutter:16px; } }

/* ---- base ------------------------------------------------------------------------------------ */
html{ color-scheme:light; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html[data-theme="dark"]{ color-scheme:dark; }
*,*::before,*::after{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--ink); font:400 var(--fs-body)/var(--lh-body) var(--body);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
h1,h2,p,figure,table{ margin:0; }
table{ border-collapse:collapse; border-spacing:0; }
button,input{ font:inherit; color:inherit; }
a{ color:var(--brand-deep); text-decoration-thickness:1px; text-underline-offset:.2em; }
a:hover{ text-decoration-thickness:2px; }
:focus-visible{ outline:2.5px solid var(--brand-deep); outline-offset:2px; }
[hidden]{ display:none !important; }
::selection{ background:var(--brand-soft); color:var(--ink); }
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.skip{ position:absolute; left:var(--s3); top:var(--s3); z-index:100; display:inline-flex; align-items:center;
  min-height:44px; padding:0 var(--s3); background:var(--surface); color:var(--ink); font-weight:500;
  border:1px solid var(--line); border-radius:var(--r1); text-decoration:none; }
.skip:not(:focus){ width:1px; height:1px; min-height:0; padding:0; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.wrap{ width:100%; max-width:calc(var(--wrap) + 2 * var(--gutter)); margin-inline:auto; padding-inline:var(--gutter); }
.stamp__part{ white-space:nowrap; }
@media (max-width:359px){ .stamp__part{ display:block; } }

/* ---- masthead (spec §3.1, §6.5; unchanged from today) ---------------------------------------- */
.wordmark{ font-family:var(--display); font-weight:900; font-size:var(--fs-display); line-height:1.15;
  letter-spacing:-.045em; color:var(--ink); text-decoration:none; display:inline-block; }
/* the wordmark is the canonical outlined SVG (Wordmark.astro), drawn 0.7596em tall so it matches a word set at this font-size,
   and lowered by its 0.018em descender so its baseline sits on the text baseline, where the typeset word stood. */
.wordmark svg{ display:inline-block; height:.7596em; width:auto; vertical-align:-.018em; }
.wordmark .pennant{ fill:var(--brand); }
.masthead__row{ height:88px; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center;
  border-bottom:1px solid var(--line); }
.masthead__mark{ grid-column:2; align-self:start; margin-top:.512em; }
.masthead__nav{ display:flex; align-items:center; gap:var(--s4); }
.masthead__nav--r{ justify-content:flex-end; }
.masthead__nav a{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px;
  font:500 var(--fs-body)/1 var(--body); color:var(--ink); text-decoration:none; white-space:nowrap; }
.masthead__nav a:hover,.masthead__nav a:focus-visible{ text-decoration:underline; }
.masthead__nav .masthead__join{ color:var(--brand-deep); text-decoration:underline; }
@media (max-width:759px){ .masthead__nav{ display:none; } }
/* the light/dark switch (founder, 19 Oct): top right at every width, ink never persimmon, a 44px target */
.masthead__end{ grid-column:3; display:flex; align-items:center; justify-content:flex-end; gap:var(--s3); min-width:0; }
.theme-switch{ display:inline-flex; align-items:center; justify-content:center; flex:none; width:44px; height:44px; padding:0;
  margin-right:-10px; border:0; border-radius:50%; background:transparent; color:var(--ink); cursor:pointer; }
.theme-switch:hover{ background:var(--surface-2); }
.theme-switch__i{ width:22px; height:22px; display:block; }
html:not([data-js]) .theme-switch,[data-theme="dark"] .theme-switch__moon,:root:not([data-theme="dark"]) .theme-switch__sun{ display:none; }
@media (min-width:760px) and (max-width:1023px){ .masthead__nav{ gap:var(--s3); } }
/* The hero's layout (A4, 23 Oct) is in redesign.css. */

/* ---- the phones in the sleek look (Nabbins goal/20261020-sleek-app, founder 19-20 Oct) ------------------------------
   Pinned light: the app ships light only, so every phone keeps the light palette and a black status bar whatever the
   site's theme (the lead's call, 20 Oct). The sleek kit's values are the app's: a white page, #EDF1EE grouped rows at
   radius 20 with 2px white gaps and no border, the 58pt #EB4A2A pill with its 19pt bold white label, plain ink text
   buttons, sentence-case Gabarito 700 section labels. Canvas px, 390 wide, as before. */
.phone-frame.phone-frame{ --sb-ink:#000; --screen-bg:#FFFFFF; }   /* doubled: outranks the frame's own defaults below */
.phone-frame__app,.wt__win{ color-scheme:light;   /* .wt__win: the worked-out section's 390 window onto the same sheet */
  --bg:#F5F7F5; --surface:#FFFFFF; --surface-2:#EDF1EE; --ink:#0E3B37; --muted:#4A635E; --line:#DCE5E1;
  --brand:#EB4A2A; --brand-deep:#C4431A; --brand-soft:#FFE2D6; --butter-soft:#FFF0C7; --amber-text:#8A5A00;
  --mint-soft:#D8F2E6; --mint-text:#1F7A55; --brand-on-soft:#B63E18; --mint-on-soft:#1D7451; --on-brand:#FFFFFF; --danger:#C0341B;
  --page:#FFFFFF; --cta:#EB4A2A; --picked:#0E3B37; --ring:#4A635E; --bar-track:#DCE5E1; --bar-fill:#57C99A; }
/* A figure in a data position (Fig.astro): the cents at --cs of the dollars (never under the app's 9pt floor), their
   ink cap tops level with the dollars' (DECISIONS "Cents scale", founder 21 Oct), no dot, one colour.
   The two parts share a baseline, then the cents are lifted by DM Mono's cap height (700/1000 em) times the size
   difference: --fig-em is the dollars' size, registered so it reaches the cents as a length, and 1em there is the
   cents' own size. A transform, not vertical-align or a margin: Chrome rounds those to whole CSS px (up to 1.5 device
   px off at 3x), and a transform it draws at the fraction. It moves no box, so the figure's height stays the
   dollars' 1em line. */
@property --fig-em{ syntax:'<length>'; inherits:true; initial-value:0px; }
.fig{ --cs:.62; --fig-em:1em; display:inline-flex; align-items:baseline; gap:1px; font-family:var(--mono); font-variant-numeric:tabular-nums; line-height:1; white-space:nowrap; }
.fig__d,.fig__c{ line-height:1; }
.fig__c{ font-size:max(9px, calc(var(--cs) * var(--fig-em))); transform:translateY(calc(.7 * (1em - var(--fig-em)))); }
.phone-frame__app svg{ display:block; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; }

/* T1-Today (src/ui/TodayScreen.tsx) */
.app{ width:390px; height:844px; display:flex; flex-direction:column; background:var(--page); color:var(--ink);
  font-family:var(--body); font-size:15px; line-height:normal; text-align:left; pointer-events:none; user-select:none; }
.app :where(p){ margin:0; }
.app__main{ flex-grow:1; padding:56px 24px 16px; display:flex; flex-direction:column; overflow:hidden; }
.app__top{ display:flex; align-items:center; justify-content:space-between; min-height:44px; margin-bottom:20px; }
.app__wm{ display:block; font-size:34px; line-height:1; color:var(--ink); }
/* the canonical wordmark at the app's 34pt header size: 0.7596em tall, as the masthead draws it (canvas px are points here) */
.phone-frame__app .app__wm svg{ height:.7596em; width:auto; stroke:none; color:inherit; }
.app__acts{ display:flex; align-items:center; }
.app__ic{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none; color:var(--muted); }
.app__plus{ margin-right:-10px; }
.app__labrow{ display:flex; align-items:center; }
.app__lab{ font:400 12.6px/normal var(--mono); letter-spacing:1.76px; text-transform:uppercase; color:var(--muted); }
.app__help,.app__help-static{ margin:-14px 0 -14px -6px; }
.app__fig{ --cs:.382; gap:3px; margin:4px 0 2px; font-size:67.8px; font-weight:500; color:var(--ink); }
.app__fig .fig__d{ letter-spacing:-2.37px; }
.app__days{ margin-top:4px; font-size:15px; color:var(--muted); }
.app__sync{ font-size:14px; line-height:19px; color:var(--muted); }
.phone-frame__app .app__bar{ margin-top:15px; overflow:visible; stroke:none; }
.app__bartrack{ fill:var(--bar-track); } .app__barfill{ fill:var(--bar-fill); }
.aim{ margin-top:16px; }
.aim__cols{ display:flex; align-items:stretch; background:var(--surface-2); border-radius:20px 20px 0 0; }
.aim__col{ flex:1 1 0; min-height:44px; padding:12px 18px; }
.aim__div{ width:2px; background:var(--page); }
.aim__lab{ font:600 13px/normal var(--body); color:var(--muted); }
.aim__v{ margin-top:5px; font-size:20.4px; font-weight:500; color:var(--ink); }
.aim__strip{ padding:9px 18px; background:var(--page); border:1px solid var(--line); border-top:0; border-radius:0 0 20px 20px; }
.aim__strip p{ font-size:13.5px; line-height:19px; color:var(--mint-on-soft); }
.aim__strip strong{ font-weight:700; }
.app__sec{ margin:22px 0 10px; font:700 20px/24px var(--display); color:var(--ink); }
.grp{ display:flex; flex-direction:column; gap:2px; border-radius:20px; overflow:hidden; background:var(--page); }
.nabr{ display:flex; align-items:center; min-height:44px; padding:6px 18px; background:var(--surface-2); }
.app__dot{ width:9.9px; height:9.9px; border-radius:99px; flex:none; }
.nabr .app__dot{ margin-right:11px; }
.nabr__nm{ flex:1 1 auto; min-width:0; display:flex; align-items:baseline; gap:8px; }
.nabr__name{ font:500 15px/normal var(--body); color:var(--ink); }
/* T2-Thin's status word beside the name (GAPS §76): words carry the status, never the colour alone */
.nabr__fast{ font:400 11px/normal var(--mono); color:var(--amber-text); }
.nabr__amt{ margin-left:auto; display:flex; align-items:center; gap:11px; }
.nabr__amt .fig{ --cs:.643; font-size:14px; font-weight:500; color:var(--ink); }
.nabr__word{ font-size:14px; color:var(--muted); }
.nabr--all{ gap:8px; padding:2px 18px; }
.nabr__alln{ flex:1 1 auto; font:500 15px/normal var(--body); color:var(--ink); }
.nabr__more{ font-size:13px; color:var(--muted); }
.nabr--all svg{ flex:none; color:var(--muted); }
.app__tabs{ flex:none; border-top:1px solid var(--line); background:var(--page); display:flex; padding:9px 0 26px; }
.app__tab{ flex-grow:1; display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--muted); min-height:44px; font-size:11px; }
.app__tab--on{ color:var(--brand-deep); font-weight:700; }

/* ---- M1b: Today -> T3-Maths -> Today ---------------------------------------------------------
   Both added elements are absolutely positioned against .app, which is already a containing block
   (it is transformed), so not one rule or element of A5's hero is touched and the resting page is
   the same pixels. Logical coordinates of the 390x844 board.
   The sheet's top edge is at y 60. .app__main's padding-top is 64, so the only thing behind the
   visible scrim - the band from the crop's top edge at y 24 down to y 60 - is bare --bg. No text
   on this page is ever read through the scrim, in either theme.
   Hidden by clip-path, not opacity and not display: at rest each element paints nothing at all,
   and the cut between screens is a step, never a fade. Out-and-back keyframes, so the first frame
   (scroll 0) and the last frame are both the settled Today screen. */
.t3{ position:absolute; clip-path:inset(0 100% 0 0); }
.t3--scrim{ inset:0; background:rgba(14,59,55,.42); }
/* the sheet: src/ui/MathsScreen.tsx (26/32 heading, 52pt lines on #EDF1EE hairlines, a 2pt ink rule over the total,
   grey tiles at radius 16, "Done" in persimmon text) */
.t3--sheet{ left:0; right:0; top:60px; bottom:0; overflow:hidden; background:var(--page); border-radius:24px 24px 0 0; }
.t3__grab{ width:36px; height:5px; margin:8px auto 0; border-radius:99px; background:var(--line); }
.t3__body{ padding:19px 24px 0; }
.t3__h{ font:900 26px/32px var(--display); letter-spacing:-.5px; color:var(--ink); }
.t3__intro{ margin-top:10px; font-size:16px; line-height:22px; color:var(--muted); }
.t3__rows{ margin-top:14px; }
.t3__row{ display:flex; align-items:center; justify-content:space-between; gap:12px; box-sizing:border-box; min-height:52px; padding:8px 0;
  border-bottom:1px solid var(--surface-2); }
.t3__name{ font-size:16px; color:var(--ink); }
.t3__row--bal .t3__name{ color:var(--muted); }
.t3__sub{ margin-top:1px; font:400 11px/normal var(--mono); color:var(--muted); }
.t3__amt{ font-size:18px; color:var(--ink); }
.t3__tot{ display:flex; align-items:center; justify-content:space-between; gap:12px; box-sizing:border-box; min-height:52px; padding-top:4px;
  border-top:2px solid var(--ink); }
.t3__totname{ font:700 17px/normal var(--body); color:var(--ink); }
.t3__totamt{ font-size:21px; font-weight:500; color:var(--ink); }
.t3__why{ margin-top:14px; background:var(--surface-2); border-radius:16px; padding:12px 14px; }
.t3__whyh{ font:700 14.5px/normal var(--body); color:var(--ink); }
.t3__whyp{ margin-top:2px; font-size:13.5px; line-height:19px; color:var(--muted); }
.t3__done{ display:flex; align-items:center; justify-content:center; min-height:48px; margin-top:18px; font:700 17px/normal var(--body); color:var(--brand-deep); }
/* The press. A circle of the app's own --line behind the help glyph A5 already draws, and the
   glyph darkening from --muted to --ink under the thumb. z-index -1 puts the circle above .app's
   background and below .app__main's in-flow content, so the glyph stays on top of it. At rest the
   circle is clipped to nothing and the glyph's colour is the --muted A5 sets, to the pixel.
   Measured: the glyph reads 9.61 (light) and 8.23 (dark) against the circle, above its own 6.02
   and 7.71 at rest, so the press never costs contrast. */
.app__help{ position:relative; }
.app__help::before{ content:""; position:absolute; left:50%; top:50%; width:34px; height:34px;
  margin:-17px 0 0 -17px; border-radius:99px; background:var(--line); z-index:-1;
  clip-path:inset(0 100% 0 0); }
/* The range is the spec's 0-60vh. The sheet leaves the glass at 56%, which is M1's own return
   point (269px of scroll at 1280x800), so the settled tail the founder saw is unchanged. */
@keyframes t3-press{
  0%{ clip-path:inset(0 100% 0 0); }  10%{ clip-path:inset(0); }
  18%{ clip-path:inset(0 100% 0 0); } 100%{ clip-path:inset(0 100% 0 0); }
}
@keyframes t3-press-ink{
  0%{ color:var(--muted); }  10%{ color:var(--ink); }
  18%{ color:var(--muted); } 100%{ color:var(--muted); }
}
@keyframes t3-open{
  0%{ clip-path:inset(0 100% 0 0); }  18%{ clip-path:inset(0); }
  56%{ clip-path:inset(0 100% 0 0); } 100%{ clip-path:inset(0 100% 0 0); }
}
/* scroll(root block), not scroll(): the nearest scroll container to either element is
   .phone__screen, which never scrolls, so a bare scroll() would sit at progress 0 for ever. */
@supports (animation-timeline:scroll()){
  @media (min-width:1080px){
    .t3,.app__help,.app__help::before{ animation-duration:auto; animation-fill-mode:both;
      animation-timing-function:step-end; animation-timeline:scroll(root block); animation-range:0 60vh; }
    .t3{ animation-name:t3-open; }
    .app__help{ animation-name:t3-press-ink; }
    .app__help::before{ animation-name:t3-press; }
  }
}
/* reduced motion lands on the settled composition, which is also the resting one */
@media (prefers-reduced-motion:reduce){
  .t3,.app__help::before{ animation:none; clip-path:inset(0 100% 0 0); }
  .app__help{ animation:none; }
}

/* =================================================================================================
   BELOW THE HERO. Prototype for measuring; not the site.
   Section CSS brought over from the Receipt prototype (scratchpad/page/prototype.html) and last round's working-section
   mock (scratchpad/page/work/r5/mock.html), reconciled to A5's tokens above: the colour, type and space values are the
   same brand/tokens.css, so only the prototype's two layout tokens are added. Renamed to keep clear of A5's classes:
   the prototype's embed root .app is .scr here (A5's .app is the hero phone's screen and carries its transform), and
   the prototype's .lead is .sec-lead (A5's .lead is the hero's). Nothing below the hero animates or transitions, and
   nothing needs script.
   ================================================================================================= */
:root{ --rule-gap:6.1px; --sec-pad:var(--s6); }
@media (max-width:759px){ :root{ --sec-pad:var(--s5); } }
.below :where(h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote,summary){ margin:0; }
.below :where(ul,ol){ padding:0; }
.below :where(table){ border-collapse:collapse; border-spacing:0; }

.sec{ padding-bottom:var(--sec-pad); }
.sec::before{ content:""; display:block; width:min(var(--wrap), 100% - 2 * var(--gutter)); margin:0 auto var(--sec-pad);
  border-top:1px solid var(--line); }
.band + .sec::before{ border-top-color:transparent; }
/* A5 ends on its phone and card; the first section keeps the spacing m1b's own preview tail used above its rule */
.hero + .sec{ padding-top:var(--s5); }
@media (min-width:1024px){ .hero + .sec{ padding-top:var(--s6); } }

.split{ display:grid; grid-template-columns:minmax(0,1fr); }
@media (min-width:760px){ .split{ grid-template-columns:minmax(0,1.618fr) minmax(0,1fr); column-gap:var(--s5); } }
.flow > * + *{ margin-top:var(--flow, var(--s3)); }
.h2{ font:900 var(--fs-h3)/var(--lh-head) var(--display); letter-spacing:-.02em; text-wrap:balance; }
.sec-lead{ font-size:var(--fs-body); line-height:var(--lh-body); text-wrap:pretty; }
@media (min-width:760px){ .h2{ font-size:var(--fs-h2); } .sec-lead{ font-size:var(--fs-lead); } }
.prose{ max-width:var(--measure); }
.prose p, p.prose{ text-wrap:pretty; }
.icon{ display:inline-block; width:16px; height:16px; flex:none; vertical-align:-.16em; }
.link-arrow{ display:inline-flex; align-items:center; gap:var(--s1); min-height:44px; font-weight:500; }
.link-arrow .icon{ vertical-align:0; }
.link-inline{ display:inline-block; padding-block:11.5px; }
.rule-double{ height:calc(2px + var(--rule-gap)); border-block:1px solid var(--ink); }

/* ---- ledgers (prototype) ---- */
.ledger{ width:100%; font-variant-numeric:tabular-nums; }
.ledger caption{ caption-side:top; text-align:left; padding-bottom:var(--s2); font:400 var(--fs-micro)/1.6 var(--mono);
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); text-wrap:balance; }
.ledger th,.ledger td{ padding:0; text-align:left; font-weight:400; vertical-align:middle; line-height:1.3; }
.ledger tbody tr:not(:last-child) > *{ border-bottom:1px solid var(--line); }
.ledger tfoot tr > *{ border-top:1px solid var(--ink); }
.ledger__amt{ text-align:right !important; font-family:var(--mono); font-weight:500; white-space:nowrap; padding-left:var(--s3) !important; }
.ledger__name{ display:block; }
.ledger__sub{ display:block; font:400 var(--fs-micro)/1.5 var(--mono); color:var(--muted); letter-spacing:.02em; }
.ledger--lg :is(th,td){ height:28px; font-size:var(--fs-body); }
@media (min-width:760px){ .ledger--lg :is(th,td){ height:32px; font-size:var(--fs-lead); } }

/* ---- 1. how $184.44 is worked out (r5 mock) ---- */
.wo{ width:100%; margin-top:var(--s4); }
.wo :is(th,td){ height:auto !important; vertical-align:top !important; padding-top:var(--s3) !important; padding-bottom:var(--s3) !important; border-top:1px solid var(--line); }
.wo tfoot :is(th,td){ border-top:1px solid var(--ink); }
.wo__note{ display:block; margin-top:var(--s1); max-width:var(--measure); font:400 var(--fs-body)/var(--lh-body) var(--body); color:var(--muted); }
.home-total__more{ margin-top:var(--s4); }
.home-total__cta{ display:flex; flex-wrap:wrap; align-items:center; column-gap:var(--s3); }
.home-total__lead-in{ font-size:var(--fs-body); }
@media (min-width:760px){ .home-total__lead-in{ font-size:var(--fs-lead); } }

/* the canvas screens (prototype .app, renamed .scr), at the canvas's own type sizes */
.scr{ width:390px; height:844px; display:flex; flex-direction:column; padding:64px 24px 16px; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:15px; line-height:normal; overflow:hidden; text-align:left; }
.scr p{ margin:0; }
.app-date{ font:400 12.6px/normal var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
/* A5's T1, reused in version A's aim row: the help glyph without M1b's press animation */
.app__help-static{ margin:-7px -7px -7px -1px; align-self:center; }

/* the payday pair: P1, one tap, P4, in the prototype's column form at every width */
.home-pair__link{ display:flex; align-items:center; justify-content:center; gap:var(--s2); height:41.9px; margin-block:var(--s3); }
.home-pair__arrow{ display:flex; flex-direction:column; align-items:center; height:100%; color:var(--ink); }
.home-pair__arrow::before{ content:""; flex:1; width:1px; background:var(--ink); }
.home-pair__head{ display:block; flex:none; overflow:visible; }
.home-pair__tap{ order:2; font:400 var(--fs-micro)/1.3 var(--mono); color:var(--muted); white-space:nowrap; }

/* ---- 4. the FAQ, collapsed: <details>, so it works with no script and find-in-page still opens an answer ---- */
.qa{ margin-top:var(--s5); border-bottom:1px solid var(--line); }
.qa__item{ border-top:1px solid var(--line); }
.qa__q{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); min-height:44px; padding-block:var(--s3);
  cursor:pointer; list-style:none; font:700 var(--fs-lead)/1.3 var(--display); letter-spacing:-.01em; }
.qa__q::-webkit-details-marker{ display:none; }
.qa__q::marker{ content:""; }
.qa__qt{ text-wrap:balance; }
.qa__ind{ flex:none; width:22px; height:22px; color:var(--ink); }
.qa__item[open] > .qa__q .qa__ind{ transform:rotate(180deg); }
.qa__a{ max-width:var(--measure); padding-bottom:var(--s4); }
.qa__a > * + *{ margin-top:var(--s2); }
.qa__a p{ text-wrap:pretty; }
.qa__short{ margin-top:var(--s3); }
.qa__short-label{ font:400 var(--fs-micro)/1.6 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.qa__short-text{ color:var(--muted); text-wrap:pretty; }
/* ---- the store badge: a PLACEHOLDER in the official App Store badge's proportions and colours (119.66 x 40;
   black, #A6A6A6 keyline, rounded), with live text. The dashed square marks where the official artwork's logo goes.
   The real build uses Apple's official badge file, unaltered. iOS only at launch. ---- */
.badges{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--s2); }
.badges li{ margin:0; }
/* Apple's badge file carries its own black fill, grey keyline and rounded corners: the link only sizes it. */
.badge{ display:inline-flex; border-radius:8px; }
.badge img{ display:block; width:auto; height:48px; }
.get{ margin-top:var(--s3); }
@media (min-width:1080px){ .hero__join .get{ margin-top:var(--s2); } }
.close .get{ margin-top:var(--s4); }
/* the status bar's ink: black on a light screen, white on a dark one, inherited from the nearest element that states a theme */
:root{ --phone-frame-sb-ink:#000; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --phone-frame-sb-ink:#fff; } }
[data-theme="dark"]{ --phone-frame-sb-ink:#fff; }
[data-theme="light"]{ --phone-frame-sb-ink:#000; }

.phone-frame{
  --k:1; --box-w:440.554; --box-h:891.557; --body-w:432.554; --body-h:891.557; --m:4;
  --scr-x:23.777; --scr-y:19.778; --scr-w:393; --scr-h:852; --scr-r:55;
  --fit:calc(393 / 390);     /* canvas px -> display points, uniform */
  --bleed:1px;               /* the screen runs 1px under the body, so no seam shows at the hole's anti-aliased edge */
  --screen-bg:var(--bg);
  --sb-ink:var(--phone-frame-sb-ink, #000);
  --rim:#68735F;             /* the CSS frame's flat rim (sampled from the render) */
  --k:1;--frame:image-set(url("/assets/phone-front-k100@1x.png") 1x, url("/assets/phone-front-k100@2x.png") 2x, url("/assets/phone-front-k100@3x.png") 3x);--frame-w:441px;--frame-h:892px;
  margin:0; width:calc(var(--box-w) * var(--k) * 1px); flex:none;
}   /* a screen pinned light (spec 6.1 embed--light) */

.phone-frame__device{ position:relative; width:100%;
  height:calc(min(var(--box-h), var(--scr-y) + var(--crop-b, 9999) * var(--fit)) * var(--k) * 1px); overflow:clip; }
.phone-frame__screen{ position:absolute; overflow:clip; background:var(--screen-bg); left:0; top:0;
  transform:translate(calc(var(--scr-x) * var(--k) * 1px - var(--bleed)), calc(var(--scr-y) * var(--k) * 1px - var(--bleed)));
  width:calc(var(--scr-w) * var(--k) * 1px + 2 * var(--bleed)); height:calc(var(--scr-h) * var(--k) * 1px + 2 * var(--bleed));
  border-radius:calc(var(--scr-r) * var(--k) * 1px + var(--bleed)); }
.phone-frame__viewport{ position:absolute; left:var(--bleed); top:var(--bleed); width:393px; height:852px;
  transform-origin:0 0; transform:scale(var(--k)); }
.phone-frame__app{ position:absolute; inset:0; }
.phone-frame__app[inert]{ pointer-events:none; -webkit-user-select:none; user-select:none; }
/* live screen: the canvas embeds carry pointer-events:none and user-select:none for spec 6.6's inert use; undo both */
.phone-frame__app:not([inert]) > :first-child{ pointer-events:auto; -webkit-user-select:text; user-select:text; }
/* the canvas screen's own root: 390 wide as drawn, 845.5 tall, scaled uniformly by 393/390 to fill 393 x 852 */
.phone-frame__app > :first-child{ width:390px; height:calc(852px / var(--fit)); transform-origin:0 0; transform:scale(var(--fit)); }

/* ---- the status bar: 54 pt tall, in display points (not scaled with the screen). Every glyph centred on y 29.33;
   digits 12 pt tall with their baseline at 35.33; time centred at x 71.67; signal 282-301.33, Wi-Fi 308.67-325.67,
   battery 333-360.33. Drawn by us: the time is live text in the page's body face, the three glyphs are inline SVG;
   no platform symbol set and no platform face. ---- */
.phone-frame__status{ position:absolute; left:0; top:0; width:393px; height:54px; color:var(--sb-ink); pointer-events:none;
  -webkit-user-select:none; user-select:none; }
/* Hanken Grotesk (the page's body face) at 17px: digits are 0.707 em = 12.0 px tall.
   Line box 22px from y 18.4 puts the baseline at 35.35 and the digits' top at 23.33. */
.phone-frame__time{ position:absolute; left:0; top:18.4px; width:143.33px; text-align:center;
  font:700 17px/22px var(--body, 'Hanken Grotesk', system-ui, sans-serif); letter-spacing:-.01em; white-space:nowrap; }
.phone-frame__status svg{ position:absolute; display:block; fill:currentColor; overflow:visible; }
.phone-frame__signal{ left:282px; top:23px; width:19.33px; height:12.33px; }
.phone-frame__wifi{ left:308.67px; top:23px; width:17px; height:12.33px; }
.phone-frame__battery{ left:333px; top:22.83px; width:27.33px; height:13px; }

/* ---- the body ---- */
.phone-frame__body{ position:absolute; left:0; top:0; z-index:1; width:var(--frame-w); height:var(--frame-h); pointer-events:none;
  background:var(--frame) 0 0 / var(--frame-w) var(--frame-h) no-repeat; }
/* presets at the pages' breakpoints: hero = m1b.html's phone; row and pair = launch-a.html's .dev and .dev--pair */
.phone-frame--hero-fit{--k:0.65;--frame:image-set(url("/assets/phone-front-k065@1x.png") 1x, url("/assets/phone-front-k065@2x.png") 2x, url("/assets/phone-front-k065@3x.png") 3x);--frame-w:287px;--frame-h:580px;}
@media (min-width:360px){ .phone-frame--hero-fit{--k:0.74;--frame:image-set(url("/assets/phone-front-k074@1x.png") 1x, url("/assets/phone-front-k074@2x.png") 2x, url("/assets/phone-front-k074@3x.png") 3x);--frame-w:327px;--frame-h:660px;} }
@media (min-width:375px){ .phone-frame--hero-fit{--k:0.76;--frame:image-set(url("/assets/phone-front-k076@1x.png") 1x, url("/assets/phone-front-k076@2x.png") 2x, url("/assets/phone-front-k076@3x.png") 3x);--frame-w:335px;--frame-h:678px;} }
@media (min-width:390px){ .phone-frame--hero-fit{--k:0.8;--frame:image-set(url("/assets/phone-front-k080@1x.png") 1x, url("/assets/phone-front-k080@2x.png") 2x, url("/assets/phone-front-k080@3x.png") 3x);--frame-w:353px;--frame-h:714px;} }
@media (min-width:760px){ .phone-frame--hero-fit{--k:1;--frame:image-set(url("/assets/phone-front-k100@1x.png") 1x, url("/assets/phone-front-k100@2x.png") 2x, url("/assets/phone-front-k100@3x.png") 3x);--frame-w:441px;--frame-h:892px;} }
@media (min-width:1080px){ .phone-frame--hero-fit{--k:0.88;--frame:image-set(url("/assets/phone-front-k088@1x.png") 1x, url("/assets/phone-front-k088@2x.png") 2x, url("/assets/phone-front-k088@3x.png") 3x);--frame-w:388px;--frame-h:785px;} }
.phone-frame--row-fit{--k:0.65;--frame:image-set(url("/assets/phone-front-k065@1x.png") 1x, url("/assets/phone-front-k065@2x.png") 2x, url("/assets/phone-front-k065@3x.png") 3x);--frame-w:287px;--frame-h:580px;}
@media (min-width:360px){ .phone-frame--row-fit{--k:0.74;--frame:image-set(url("/assets/phone-front-k074@1x.png") 1x, url("/assets/phone-front-k074@2x.png") 2x, url("/assets/phone-front-k074@3x.png") 3x);--frame-w:327px;--frame-h:660px;} }
@media (min-width:375px){ .phone-frame--row-fit{--k:0.76;--frame:image-set(url("/assets/phone-front-k076@1x.png") 1x, url("/assets/phone-front-k076@2x.png") 2x, url("/assets/phone-front-k076@3x.png") 3x);--frame-w:335px;--frame-h:678px;} }
@media (min-width:390px){ .phone-frame--row-fit{--k:0.8;--frame:image-set(url("/assets/phone-front-k080@1x.png") 1x, url("/assets/phone-front-k080@2x.png") 2x, url("/assets/phone-front-k080@3x.png") 3x);--frame-w:353px;--frame-h:714px;} }
@media (min-width:760px){ .phone-frame--row-fit{--k:0.9;--frame:image-set(url("/assets/phone-front-k090@1x.png") 1x, url("/assets/phone-front-k090@2x.png") 2x, url("/assets/phone-front-k090@3x.png") 3x);--frame-w:397px;--frame-h:803px;} }
/* the hero phone's category dots: A carried their colours in style attributes; the same colours, in CSS */
.app__dot--groceries{ background:var(--butter); } .app__dot--eatingOut{ background:var(--leaf); } .app__dot--gas{ background:var(--sky); }
.app__dot--fun{ background:var(--grape); } .app__dot--everythingElse{ background:var(--rose); }

/* =================================================================================================
   THE FEATURE ROWS, PINNED (round 8: round 7's, with no captions, the pin from 764px tall, and E1 as E1ROW or E1OVER).
   Prototype for measuring; not the site.
   R5's section (round6/work/rows/build_rows.py, cap geometry): one screen per row, one row per viewport height at
   >= 1024px (heading left, phone centre at min(80vh, 753.2px), centred; body right); every row carries its own phone in
   flow; at >= 1024px with motion each is sticky in the same slot and the next one's window rises over it. Round 7 adds:
   the old screen fades as Cash App's does; the ** markers; the aim row's own forms (D, E1, E2).
   ================================================================================================= */
.pins__list{ display:grid; row-gap:calc(var(--s6) + var(--s3)); }
.pinrow{ display:grid; grid-template-columns:minmax(0,1fr); row-gap:var(--s4); align-items:start; }
.pinhead, .pinbody{ min-width:0; max-width:var(--measure); }
.pinrow__h{ font:900 var(--fs-lead)/var(--lh-head) var(--display); letter-spacing:-.02em; text-wrap:balance; }
@media (min-width:760px){ .pinrow__h{ font-size:var(--fs-h3); } }
.pin-bridge{ margin:0; }
.pinhead--tap .home-pair__link{ margin-block:0; }
.pinrow > :is(.pintrack, .pintap--stacked, .pinhead--tap){ order:-1; }
.pinfig{ margin:0; }
.pinstage{ display:flex; justify-content:center; padding:var(--s5) var(--s4) 0; background:var(--surface-2); border-radius:var(--r3); overflow:hidden; }
@media (max-width:759px){ .pinstage{ padding:var(--s4) 0 0; border-radius:var(--r3) var(--r3) 0 0; } }
.pinfig > figcaption{ margin:0; }   /* round 8: the text alternative only (no caption, ruling 3) */
/* the stacked crops, re-measured on the sleek screens (20 Oct): P1 14px under its Bills row, P4 24px under its aim
   line, Today 12px under the aim tile; the Cover phone shows whole, as going over's did */
.pinphone[data-screen="P1-Payday"]{ --crop-b:341; }
.pinphone[data-screen="P4-Done"]{ --crop-b:568.89; }
.pinphone[data-screen^="T1-Today"]{ --crop-b:436.89; }
.pins__close{ display:flex; justify-content:center; padding-top:var(--s6); }
.pins__close .badges{ justify-content:center; }

/* ---- >= 1024px with room for two 292px columns beside the capped phone: the three-column row, one viewport tall ---- */
@media (min-width:1024px) and (min-width:calc(min(39.5312vh, 372.2px) + 719.6px)) and (min-height:764px) and (max-height:2000px){ .pins{ --pk:0.685; } }
@media (min-width:1024px) and (min-width:calc(min(39.5312vh, 372.2px) + 719.6px)) and (min-height:764px) and (max-height:2000px) and (min-height:781px){ .pins{ --pk:0.7; } }
@media (min-width:1024px) and (min-width:calc(min(39.5312vh, 372.2px) + 719.6px)) and (min-height:764px) and (max-height:2000px) and (min-height:825px){ .pins{ --pk:0.74; } }
@media (min-width:1024px) and (min-width:calc(min(39.5312vh, 372.2px) + 719.6px)) and (min-height:764px) and (max-height:2000px) and (min-height:847px){ .pins{ --pk:0.76; } }
@media (min-width:1024px) and (min-width:calc(min(39.5312vh, 372.2px) + 719.6px)) and (min-height:764px) and (max-height:2000px) and (min-height:892px){ .pins{ --pk:0.8; } }
@media (min-width:1024px) and (min-width:calc(min(39.5312vh, 372.2px) + 719.6px)) and (min-height:764px) and (max-height:2000px) and (min-height:937px){ .pins{ --pk:0.84; } }
@supports (width:calc(100vh / 1px * 1px)){
  @media (min-width:1024px) and (min-width:calc(min(39.5312vh, 372.2px) + 719.6px)) and (min-height:764px) and (max-height:2000px){ .pins{ --pk:calc(min(80vh, 753.2px) / 891.557px); } }
}
@media (min-width:1024px) and (min-width:calc(min(39.5312vh, 372.2px) + 719.6px)) and (min-height:764px) and (max-height:2000px){
  .pins{ --pw:calc(440.554px * var(--pk)); }
  .pins{ --ptop:calc((100vh - var(--pk) * 891.557px) / 2); }
  .pinrow > :is(.pintrack, .pintap--stacked, .pinhead--tap){ order:0; }
  .pins__list{ grid-template-columns:minmax(0,1fr) var(--pw) minmax(0,1fr); grid-template-rows:repeat(5, minmax(100vh, auto));
    column-gap:var(--s5); row-gap:0; }
  .pinrow{ display:contents; }
  .pins .pinhead{ grid-column:1; align-self:center; }
  .pins .pinbody{ grid-column:3; align-self:center; }
  .pins .pintrack{ grid-column:2; min-width:0; }
  .pins [data-r="1"]{ grid-row:1; } .pins .pintrack[data-r="1"]{ grid-row:1 / -1; }
  .pins [data-r="2"]{ grid-row:2; } .pins .pintrack[data-r="2"]{ grid-row:2 / -1; }
  .pins [data-r="3"]{ grid-row:3; } .pins .pintrack[data-r="3"]{ grid-row:3 / -1; }
  .pins [data-r="4"]{ grid-row:4; } .pins .pintrack[data-r="4"]{ grid-row:4 / -1; }
  .pins [data-r="5"]{ grid-row:5; } .pins .pintrack[data-r="5"]{ grid-row:5 / -1; }
  .pinrow__h{ font-size:var(--fs-h2); }
  .pins .pinfig{ width:var(--pw); margin:var(--ptop) auto 0; }
  .pins .pinstage{ display:block; padding:0; background:none; border-radius:0; overflow:visible; }
  .pins .pinfig .phone-frame{ --k:var(--pk); --crop-b:9999;
    --frame:image-set(url("/assets/phone-front-k100@1x.png") 1x, url("/assets/phone-front-k100@2x.png") 2x, url("/assets/phone-front-k100@3x.png") 3x);
    --frame-w:calc(441px * var(--pk)); --frame-h:calc(892px * var(--pk)); }
  /* D: the sum under the first paragraph, in its narrow form (the key under the terms) */
  .pins .pinhead--tap .home-pair__link{ justify-content:flex-start; }
}
/* The pinned layout and its motion stop at 2000px tall (L6, 20 Oct). Their geometry is in viewport heights (each row
   at least 100vh, the phone's top at (100vh - phone) / 2, the hand-offs over 100vh of scroll), so a viewport many
   screens tall, as full-page capture tools and link-preview renderers use, drew the rows two to three screens apart
   with blank frames between. Above 2000px the stacked layout applies, which shows every row's phone at rest. Nothing
   changes at or below 2000px, so the approved motion is untouched wherever a person sees it. */
/* Motion allowed and scroll-driven animation supported. Phones 2..N: a window over a still screen (translateY holds the
   screen in the slot while the window's top edge, its row's top + the phone's top, rises over it; clip-path; 1:1 with
   scroll, linear, fill none). Phones 1..N-1 (each has a phone after it in the slot): the push (founder, 20 Oct; R5's wipe
   with the old screen solid). The outgoing window, frame and screen, stays fully opaque and is clipped away from the top
   in step with the next window's rising edge: it keeps everything above that edge, the incoming window everything below
   it, so the phone is always full, never blank and never ghosted, and no two screens' visible regions overlap. The push
   runs on the NEXT track's timeline (each track also names its own, --pin1 .. --pin5, scoped on the list) over the same
   range as that track's window (cover 0% -> cover 100vh), so the two edges coincide at every scroll position: both
   windows' tops sit at the slot's top (--ptop), and the edge is 100vh x (1 - progress) below it. Held clipped after.
   The fades this replaces left the phone half blank mid-hand-off (walk of 20 Oct). Anywhere else (reduced motion, or no
   scroll-driven animation) nothing below applies. */
@supports (animation-timeline:view()){
  @media (min-width:1024px) and (min-width:calc(min(39.5312vh, 372.2px) + 719.6px)) and (min-height:764px) and (max-height:2000px) and (prefers-reduced-motion:no-preference){
    .pins .pinfig{ position:sticky; top:var(--ptop); }
    .pins .pins__list{ timeline-scope:--pin1, --pin2, --pin3, --pin3b, --pin4, --pin5; }
    .pins .pintrack{ view-timeline:--pin block; }
    .pins .pintrack[data-r="1"]{ view-timeline:--pin block, --pin1 block; }
    .pins .pintrack[data-r="2"]{ view-timeline:--pin block, --pin2 block; }
    .pins .pintrack--oa[data-r="3"]{ view-timeline:--pin block, --pin3 block; }
    .pins .pintrack--ob[data-r="3"]{ view-timeline:--pin block, --pin3b block; }
    .pins .pintrack[data-r="4"]{ view-timeline:--pin block, --pin4 block; }
    .pins .pintrack[data-r="5"]{ view-timeline:--pin block, --pin5 block; }
    .pins .pintrack:not(.pintrack--first) .pinfig__win{ animation:pin-window linear none; animation-timeline:--pin;
      animation-range:cover 0% cover 100vh; }
    /* the push: row 1 by row 2's window, row 2 by the 12:34 window (row 3's in the slot), row 3 by row 4's, row 4 by row 5's */
    .pins .pintrack[data-r="1"] .pinfig__win{ animation:pin-push linear forwards; animation-timeline:--pin2;
      animation-range:cover 0% cover 100vh; }
    .pins .pintrack[data-r="2"] .pinfig__win{ animation:pin-window linear none, pin-push linear forwards; animation-timeline:--pin, --pin3;
      animation-range:cover 0% cover 100vh, cover 0% cover 100vh; }
    .pins .pintrack--oa[data-r="3"] .pinfig__win{ animation:pin-window linear none, pin-push linear forwards; animation-timeline:--pin, --pin4;
      animation-range:cover 0% cover 100vh, cover 0% cover 100vh; }
    .pins .pintrack[data-r="4"] .pinfig__win{ animation:pin-window linear none, pin-push linear forwards; animation-timeline:--pin, --pin5;
      animation-range:cover 0% cover 100vh, cover 0% cover 100vh; }
  }
}
/* It varies off (site.variesOffered, founder 20 Oct): four rows, no row 5. The grid loses its fifth 100vh row, and row 4,
   now the last phone in the slot, keeps its window and loses the push (it ran on row 5's timeline, which no track names
   any more). Rows 1 to 3 and their hand-offs are unchanged. */
@media (min-width:1024px) and (min-width:calc(min(39.5312vh, 372.2px) + 719.6px)) and (min-height:764px) and (max-height:2000px){
  .pins.pins--four .pins__list{ grid-template-rows:repeat(4, minmax(100vh, auto)); }
}
@supports (animation-timeline:view()){
  @media (min-width:1024px) and (min-width:calc(min(39.5312vh, 372.2px) + 719.6px)) and (min-height:764px) and (max-height:2000px) and (prefers-reduced-motion:no-preference){
    .pins.pins--four .pintrack[data-r="4"] .pinfig__win{ animation:pin-window linear none; animation-timeline:--pin; animation-range:cover 0% cover 100vh; }
  }
}
@keyframes pin-window{
  from{ transform:translateY(-100vh); clip-path:inset(100vh 0 0 0); }
  to{ transform:none; clip-path:inset(0 0 0 0); }
}
/* the complement of pin-window's inset(100vh x (1 - p) 0 0 0) on a window at the same top: keep what is above the edge */
@keyframes pin-push{
  from{ clip-path:inset(0 0 calc(100% - 100vh) 0); }
  to{ clip-path:inset(0 0 100% 0); }
}
/* the 5:28 phone's hand-out (frame, screen and shadow together) */
@keyframes pin-fade-out{
  from{ opacity:1; }
  to{ opacity:0; }
}

.phone-frame--over8-fit{--k:0.65;--frame:image-set(url("/assets/phone-front-k065@1x.png") 1x, url("/assets/phone-front-k065@2x.png") 2x, url("/assets/phone-front-k065@3x.png") 3x);--frame-w:287px;--frame-h:580px;}
@media (min-width:360px){ .phone-frame--over8-fit{--k:0.74;--frame:image-set(url("/assets/phone-front-k074@1x.png") 1x, url("/assets/phone-front-k074@2x.png") 2x, url("/assets/phone-front-k074@3x.png") 3x);--frame-w:327px;--frame-h:660px;} }
@media (min-width:375px){ .phone-frame--over8-fit{--k:0.76;--frame:image-set(url("/assets/phone-front-k076@1x.png") 1x, url("/assets/phone-front-k076@2x.png") 2x, url("/assets/phone-front-k076@3x.png") 3x);--frame-w:335px;--frame-h:678px;} }
@media (min-width:390px){ .phone-frame--over8-fit{--k:0.8;--frame:image-set(url("/assets/phone-front-k080@1x.png") 1x, url("/assets/phone-front-k080@2x.png") 2x, url("/assets/phone-front-k080@3x.png") 3x);--frame-w:353px;--frame-h:714px;} }
@media (min-width:760px){ .phone-frame--over8-fit{--k:0.8;--frame:image-set(url("/assets/phone-front-k080@1x.png") 1x, url("/assets/phone-front-k080@2x.png") 2x, url("/assets/phone-front-k080@3x.png") 3x);--frame-w:353px;--frame-h:714px;} }
@media (min-width:800px){ .phone-frame--over8-fit{--k:0.88;--frame:image-set(url("/assets/phone-front-k088@1x.png") 1x, url("/assets/phone-front-k088@2x.png") 2x, url("/assets/phone-front-k088@3x.png") 3x);--frame-w:388px;--frame-h:785px;} }
@media (min-width:811px){ .phone-frame--over8-fit{--k:0.9;--frame:image-set(url("/assets/phone-front-k090@1x.png") 1x, url("/assets/phone-front-k090@2x.png") 2x, url("/assets/phone-front-k090@3x.png") 3x);--frame-w:397px;--frame-h:803px;} }

/* ---- THE OVERLAP (E1OVER): the 5:28 phone a little over the 12:34 phone and a little lower ----
   Both phones are the held phone's size. The 12:34 phone is the aim row's held phone, in the slot, exactly as every other
   row's; the 5:28 phone sits 37.854pt x k to the left of the next slot position (its body's left edge 4 canvas px past
   the 12:34 screen's rightmost content) and 72pt x k lower, on top (later in the DOM), with the kit's --shadow on
   its body's outline. Hand-in: one rising edge crosses both (the 5:28 phone's window starts where the slot's does and is
   72pt x k taller); both screens held still. Hand-out: both are held and fade (1 + T/H, as every outgoing screen);
   going over's window carries an opaque --bg ground as wide as the pair, so its one rising edge wipes both; the words
   are lifted over that ground. Stacked from 760px: the same overlap in one stage; below 760px, one above the other. */
@media (min-width:760px){
  .pinrow--over{ grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:var(--s4); }
  .pinrow--over > .pinhead{ grid-column:1 / -1; grid-row:2; }
  .pinrow--over > .pintrack--oa{ grid-column:1; grid-row:1; }
  .pinrow--over > .pintrack--ob{ grid-column:2; grid-row:1; }
  .pinrow--over::before{ content:""; grid-column:1 / -1; grid-row:1; order:-2; align-self:stretch; background:var(--surface-2); border-radius:var(--r3); }
  .pinrow--over .pinstage{ background:none; overflow:visible; padding-inline:0; }
  .pinrow--over .pintrack--oa .pinstage{ justify-content:flex-end; }
  .pinrow--over .pintrack--ob .pinstage{ justify-content:flex-start; }
  /* the 12:34 phone shows 72pt more of its screen, so both crops end on the stage's foot */
  .pinrow--over .pintrack--oa .pinphone{ --crop-b:508.34; }
  .pinrow--over .pintrack--oa .phone-frame{ margin-right:calc(-.5 * (var(--s4) + 37.854px * var(--k))); }
  .pinrow--over .pintrack--ob .phone-frame{ margin-left:calc(-.5 * (var(--s4) + 37.854px * var(--k))); margin-top:calc(72px * var(--k));
    clip-path:inset(-64px -64px 0 -64px); }
}
/* the top phone's shadow: the kit's --shadow (brand.md 1.1) on the body's own outline (432.554pt wide, inset 4pt, 74.893pt corners) */
.pintrack--ob .phone-frame{ position:relative; }
.pintrack--ob .phone-frame::before{ content:""; position:absolute; top:0; bottom:0; left:calc(4px * var(--k)); right:calc(4px * var(--k));
  border-radius:calc(74.893px * var(--k)); box-shadow:var(--shadow); pointer-events:none; }
@media (min-width:1024px) and (min-width:calc(min(39.5312vh, 372.2px) + 719.6px)) and (min-height:764px) and (max-height:2000px){
  .pins--over{ --ov:calc(37.854px * var(--pk)); --dy:calc(72px * var(--pk)); }
  .pins .pinrow--over::before{ display:none; }
  /* the stacked placements above do not apply here: the rows are display:contents in the list's grid */
  .pins .pinrow--over > .pinhead{ grid-column:1; grid-row:3; }
  .pins .pinrow--over > .pintrack{ grid-column:2; grid-row:3 / -1; }
  .pins .pinrow--over .pintrack .phone-frame{ margin:0; clip-path:none; --crop-b:9999; }
  .pins .pintrack--ob .pinfig{ margin:var(--ptop) 0 0 calc(var(--pw) - var(--ov)); }
  .pins .pinrow--over .pintrack--ob .pinstage{ padding-top:var(--dy); }   /* padding, not the phone's margin, which would collapse into the figure's */
  .pins .pinrow--over .pinhead .pin-line{ margin-top:var(--s3); }
  /* going over's ground stays with its held phone to the section's end, so everything that scrolls through that region
     (the rows' words, the closing badges) is lifted over it; the ground is the page's own --bg, so it shows only where it
     covers the 5:28 phone */
  .pins--over .pinhead, .pins--over .pinbody, .pins--over .pins__close{ position:relative; z-index:2; }
}

/* ---- THE SLIDE (E1SLIDE): the 5:28 phone rises into its overlap once the 12:34 phone is at rest; see build_rows.py ---- */
@supports (animation-timeline:view()){
  @media (min-width:1024px) and (min-width:calc(min(39.5312vh, 372.2px) + 719.6px)) and (min-height:764px) and (max-height:2000px) and (prefers-reduced-motion:no-preference){
    /* --fs: the extra wait before the slide where the explainer sits in the right-hand column (>= 1280px, below), so it can
       arrive with its heading and still be gone from that column by as much as before when the 5:28 phone rises into it;
       2 x --ptop: kept from the fade's timing (it started that much before the row's end); with the push the pair now rests
       30vh + 2 x --ptop, and the row's height, so the explainer's timing, is unchanged */
    .pins--slide{ --fs:0px; --slide-in:calc(100vh - var(--ptop) - var(--dy)); --x:calc(var(--slide-in) + 12vh + 30vh + 2 * var(--ptop) + var(--fs)); }
    .pins.pins--slide .pins__list{ grid-template-rows:repeat(2, minmax(100vh, auto)) minmax(calc(100vh + var(--x)), auto) repeat(2, minmax(100vh, auto)); }
    .pins.pins--slide .pins__list .pintrack--ob .pinfig{ margin-top:calc(100vh - var(--dy) + 12vh + var(--fs)); }
    /* the hand-out: the 12:34 phone is pushed by going over's rising edge, as every other phone; the 5:28 phone fades
       (founder, 20 Oct: pushed, it read as half a phone with a flat foot). Its track runs to the list's end, so it is held
       at --ptop throughout; its window (frame, screen and shadow) fades on row 4's timeline from the push's start (cover
       0%, the edge at --ptop + 100vh) to where that edge reaches its body's foot (--ptop + --dy + the phone's height
       = 100vh - --ptop + --dy, i.e. cover 2 x --ptop - --dy). Going over's own phone shows nothing above the slot's foot
       (100vh - --ptop) until the edge passes it, a further --dy of scroll, so the two never overlap. */
    .pins.pins--slide .pins__list .pintrack--ob .pinfig__win{ animation:pin-fade-out linear forwards; animation-timeline:--pin4;
      animation-range:cover 0% cover calc(2 * var(--ptop) - var(--dy)); }
    .pins.pins--slide .pins__list .pinrow--over > .pinhead{ align-self:stretch; }
    /* held centred; let go about when the 5:28 phone is (its release is at 50vh + the words' height + margin-bottom before the
       row's end; the 5:28's at --ptop + --dy + its height = 100vh - --ptop + --dy; the words taken as about 8rem tall) */
    .pins.pins--slide .pins__list .pinhead__hold{ position:sticky; top:50vh; transform:translateY(-50%); margin:50vh 0 calc(50vh - var(--ptop) + var(--dy) - 8rem); }
  }
}
/* ---- the screen "deposit" (round6/work/screens/checked/deposit-week.html), its own CSS scoped under .nscr--deposit; the page carries the tokens (58 checked equal) and the status bar ---- */
.nscr--deposit{ position:relative; }
.nscr--deposit .nscr-band{ --band-bg:#0E3B37; --band-edge:transparent;
  --ink:#E8EFEA; --muted:#9DB5AE; --line:#294B44; --brand:#FF8A5B; --brand-deep:#FF8A5B; --on-brand:#0B211F; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .nscr--deposit .nscr-band{ --band-bg:#1C403A; --band-edge:#294B44; } }
:root[data-theme="dark"] .nscr--deposit .nscr-band{ --band-bg:#1C403A; --band-edge:#294B44; }
.nscr--deposit .scr{ position:absolute; inset:0; width:390px; height:844px; display:flex; flex-direction:column; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:15px; line-height:normal; text-align:left; overflow:hidden;
  pointer-events:none; -webkit-user-select:none; user-select:none; }
.nscr--deposit :where(.scr) p{ margin:0; }
.nscr--deposit .app-date{ font:400 12.6px/normal var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.nscr--deposit .cta{ display:block; text-align:center; background:var(--brand-deep); color:var(--on-brand); font:700 17px/normal var(--display);
  padding:16px; border-radius:var(--r1); }
.nscr--deposit .scr.dep{ padding:64px 24px 30px; }
.nscr--deposit .dep__h{ margin-top:10px; font:900 32.9px/1.1 var(--display); letter-spacing:-.03em; text-wrap:balance; }
.nscr--deposit .dep__sub{ margin-top:8px; font-size:15.5px; line-height:1.5; color:var(--muted); }
.nscr--deposit .dep__card{ margin-top:18px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r2); padding:4px 16px; }
.nscr--deposit .dep__row{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:12px 0; border-bottom:1px solid var(--line); }
.nscr--deposit .dep__row:last-child{ border-bottom:0; }
.nscr--deposit .dep__name{ display:flex; flex-direction:column; gap:1px; }
.nscr--deposit .dep__n{ font-size:15px; font-weight:700; }
.nscr--deposit .dep__s{ font:400 11px/normal var(--mono); color:var(--muted); font-variant-numeric:tabular-nums; }
.nscr--deposit .dep__v{ font:400 15px/normal var(--mono); font-variant-numeric:tabular-nums; }
.nscr--deposit .dep__v--adds{ font-weight:500; color:var(--mint-text); }
.nscr--deposit .dep__week{ margin-top:14px; background:var(--butter-soft); border:1px solid var(--butter); border-radius:var(--r1); padding:13px 15px; }
.nscr--deposit .dep__wt{ font:700 15px/normal var(--display); color:var(--amber-text); margin-bottom:4px; }
.nscr--deposit .dep__wp{ font-size:13px; line-height:1.55; color:var(--ink); }
.nscr--deposit .dep__note{ margin-top:13px; background:var(--surface-2); border-radius:var(--r1); padding:12px 14px; }
.nscr--deposit .dep__note p{ font-size:12.6px; line-height:1.5; color:var(--muted); }
.nscr--deposit .dep__foot{ margin-top:auto; padding-top:12px; display:flex; flex-direction:column; gap:9px; }
.nscr--deposit .dep__alt{ display:flex; align-items:center; justify-content:center; min-height:44px; padding:0 12px; color:var(--muted);
  font:700 14.5px/normal var(--body); }
/* ---- the row screens in the sleek look: P1-Payday, P4-Done and Cover (src/ui/PaydayScreen.tsx, DoneScreen.tsx,
   CoverScreen.tsx and the kit: Pill, TextButton, RoundClose, CoverChoiceRow, AnswerRow's pills) ---- */
:is(.nscr--P1-Payday,.nscr--P4-Done,.nscr--cover){ position:relative; }
:is(.nscr--P1-Payday,.nscr--P4-Done,.nscr--cover) .scr{ position:absolute; inset:0; width:390px; height:844px; display:flex; flex-direction:column;
  padding:64px 24px 34px; background:var(--page); color:var(--ink); font-family:var(--body); font-size:15px; line-height:normal; text-align:left;
  overflow:hidden; pointer-events:none; -webkit-user-select:none; user-select:none; }
:is(.nscr--P1-Payday,.nscr--P4-Done,.nscr--cover) :where(.scr) p{ margin:0; }
/* the footer: the pill, then the text button; P1 and P4 pad it 16 from the edge, Cover 24 */
.sk-foot{ flex:none; display:flex; flex-direction:column; gap:4px; padding-top:10px; background:var(--page); }
:is(.p1,.p4) .sk-foot{ margin:0 -8px; }
/* block, not flex: a label with a figure in it is text and a span, and flex would drop the spaces between them */
.sk-pill{ display:block; box-sizing:border-box; min-height:58px; padding:17.6px 16px; border-radius:29px; background:var(--cta); color:var(--on-brand);
  font:700 19px/22.8px var(--display); text-align:center; }
.sk-text{ display:flex; align-items:center; justify-content:center; min-height:44px; padding:0 16px; font:600 16px/normal var(--body); color:var(--ink); }
.sk-close{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; margin:3px 0 3px -3px; border-radius:19px; background:var(--surface-2); color:var(--ink); }
.sk-close svg{ stroke-width:2.2; }

.p1__body{ flex:1 1 auto; min-height:0; overflow:hidden; }
.p1__date{ font:400 13px/normal var(--mono); letter-spacing:1.3px; text-transform:uppercase; color:var(--muted); }
.p1__h{ margin-top:10px; font:800 32.9px/38px var(--display); letter-spacing:-.33px; }
.p1__sub{ margin-top:10px; font-size:16px; line-height:22px; color:var(--muted); }
.p1__done{ display:flex; align-items:center; gap:8px; margin-top:20px; }
.p1__tick{ flex:none; color:var(--mint-on-soft); stroke-width:2.6; }
.p1__lab{ flex:1 1 auto; font:600 15px/normal var(--body); color:var(--mint-on-soft); }
.p1__tot{ font-size:15px; color:var(--ink); }
.p1__grp{ display:flex; flex-direction:column; gap:2px; margin-top:10px; border-radius:20px; overflow:hidden; }
.p1__row{ display:flex; align-items:center; gap:12px; box-sizing:border-box; min-height:56px; padding:8px 16px 8px 20px; background:var(--surface-2); }
.p1__dot{ width:10px; height:10px; border-radius:99px; flex:none; }
.p1__n{ flex:1 1 auto; font:600 17px/normal var(--body); color:var(--ink); }
.p1__v{ font-size:16px; color:var(--ink); }
.p1__chev{ flex:none; color:var(--muted); }
.p1__ready{ display:flex; align-items:center; justify-content:space-between; margin-top:18px; }
.p1__rl{ display:flex; align-items:center; gap:16px; font:600 16px/normal var(--body); color:var(--ink); }
.p1__info{ color:var(--brand-on-soft); stroke-width:2.2; }
.p1__rv{ --cs:.382; font-size:30px; font-weight:500; color:var(--ink); }

.p4__mid{ flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.p4__seal{ display:flex; align-items:center; justify-content:center; width:96px; height:96px; margin-bottom:26px; border-radius:48px;
  background:var(--mint-soft); color:var(--mint-on-soft); }
.p4__seal svg{ stroke-width:2.6; }
.p4__title{ font:800 32.9px/38px var(--display); letter-spacing:-.33px; }
.p4__until{ margin-top:10px; font-size:16px; line-height:22px; color:var(--muted); }
.p4__fig{ --cs:.382; margin-top:14px; font-size:67.8px; font-weight:500; color:var(--ink); }
.p4__fig .fig__d{ letter-spacing:-2.4px; }
.p4__aim{ display:flex; align-items:baseline; gap:4px; margin-top:16px; font-size:14.5px; line-height:20px; color:var(--muted); }
.p4__aimv{ font-size:14.5px; color:var(--muted); }

.scr.cov{ padding:62px 24px 30px; }
.cov__body{ flex:1 1 auto; min-height:0; overflow:hidden; }
.cov__h{ margin-top:8px; font:900 32.9px/38px var(--display); letter-spacing:-.4px; }
.cov__amt{ display:flex; align-items:center; justify-content:center; box-sizing:border-box; min-height:64px; margin-top:22px; padding:10px 18px;
  border-radius:20px; background:var(--surface-2); }
.cov__amtv{ font:500 36px/1.2 var(--mono); font-variant-numeric:tabular-nums; color:var(--ink); }
.cov__hint{ margin:8px 0 14px; font-size:13.5px; color:var(--muted); text-align:center; }
.cov__sec{ display:flex; align-items:baseline; justify-content:space-between; margin:14px 0 10px; }
.cov__sech{ font:700 20px/25px var(--display); }
.cov__secn{ font:400 11px/normal var(--mono); color:var(--muted); }
.cov__row{ display:flex; align-items:center; gap:12px; box-sizing:border-box; min-height:64px; margin-bottom:8px; padding:9px 16px 9px 20px;
  border-radius:18px; background:var(--surface-2); color:var(--ink); }
.cov__row--on{ background:var(--picked); color:#FFFFFF; }
.cov__dot{ width:12px; height:12px; border-radius:6px; flex:none; }
.cov__w{ flex:1 1 auto; min-width:0; }
.cov__n{ display:block; font:600 17px/21px var(--body); }
.cov__row--off .cov__n{ font-weight:400; color:var(--muted); }
.cov__sub{ display:flex; flex-wrap:wrap; align-items:flex-start; margin-top:2px; font-size:14px; color:var(--muted); white-space:pre; }
.cov__row--on .cov__sub{ color:#FFFFFF; }
.cov__sub .fig{ font-size:14px; }
.cov__blocked{ display:block; margin-top:4px; font-size:13.5px; line-height:18px; color:var(--muted); }
.cov__picked{ font:500 14px/normal var(--body); color:#FFFFFF; }
.cov__disc{ display:flex; align-items:center; justify-content:center; flex:none; width:26px; height:26px; border-radius:13px; background:#FFFFFF; color:var(--picked); }
.cov__disc svg{ stroke-width:3; }
.cov__ring{ flex:none; box-sizing:border-box; width:26px; height:26px; border-radius:13px; border:2px solid var(--ring); }
.cov__repay{ margin-bottom:8px; }
.cov__pills{ display:flex; gap:8px; margin-top:4px; }
.cov__pill{ display:flex; align-items:center; gap:8px; min-height:44px; padding:0 18px; border-radius:22px; background:var(--surface-2); font:600 15px/normal var(--body); color:var(--ink); }
.cov__pill--on{ background:var(--picked); color:#FFFFFF; }
.cov__pill svg{ stroke-width:3; }
.cov__line{ margin:10px 2px 0; font-size:14px; line-height:20px; color:var(--ink); }
.cov__spare{ font-size:13px; line-height:18px; color:var(--muted); }
.cov__note{ margin:8px 0; padding:12px 18px; border-radius:20px; background:var(--surface-2); }
.cov__note p{ font-size:14px; line-height:20px; color:var(--ink); }
.cov__leave{ margin-top:16px; font-size:13px; color:var(--muted); text-align:center; }

/* ---- round 9: the one note, under the hero card beside its ** (rulings 2-3); the card's caption leaves the screen at every width ---- */
.work__t caption{ position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.work__note{ margin:var(--s2) 0 0; font:400 .875rem/1.5 var(--body); color:var(--muted); text-wrap:balance; }
.work__mark{ font-family:var(--mono); }

/* paid by the job's week strip, under the words and the link */
.se-week{ margin-top:var(--s4) !important; }
/* The aim row's sum (B4, 23 Oct) is in redesign.css. */
/* The prototype strip (the earlier rounds' launch pages, round 4-10), shared by the homepage (the aim row's days to
   payday and paid by the job's week) and /self-employed (SE3's week). Moved verbatim from se.css; loaded after site.css. */
.stamp{ display:block; font:400 var(--fs-micro)/1.6 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); text-wrap:balance; }
.nowrap{ white-space:nowrap; }
.strip-fig > figcaption .stamp{ text-wrap:balance; }
/* strips (prototype) */
.strip-fig{ margin:0; }
.strip-fig > figcaption{ margin-bottom:var(--s3); }
.strip{ --n:7; --top:36px; position:relative; padding-top:var(--top); }
.strip__cells{ list-style:none; display:grid; grid-template-columns:repeat(var(--n), minmax(0,1fr)); }
.strip__cell{ position:relative; display:flex; flex-direction:column; align-items:stretch; text-align:center; border-left:1px solid var(--line); }
.strip__cell:first-child{ border-left:0; }
.strip__day{ display:flex; flex-direction:column; align-items:center; padding:var(--s1) 0 var(--s2); }
.strip__wd{ font:400 var(--fs-micro)/1.6 var(--mono); letter-spacing:.14em; text-transform:uppercase; padding-left:.14em; }
.strip__d{ font:500 var(--fs-body)/1.3 var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
@media (min-width:760px){ .strip__d{ font-size:var(--fs-lead); } }
.strip__note{ display:block; min-height:calc(var(--fs-micro) * 1.6); margin-top:var(--s1); font:400 var(--fs-micro)/1.6 var(--mono);
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding-left:.14em; }
@media (max-width:759px){ .strip__wd,.strip__note{ letter-spacing:0; padding-left:0; } }
.strip__cell.is-past{ color:var(--muted); }
.strip__cell.is-today .strip__day{ background:var(--ink); color:var(--bg); }
.strip__cell.is-close .strip__day{ box-shadow:inset 0 -2px 0 var(--ink); }
.strip__flag{ position:absolute; bottom:100%; left:50%; margin-bottom:4px; height:25.9px; width:calc(25.9px * 16.89 / 19.78);
  transform:translateX(-35%); overflow:visible; color:inherit; }
.strip__bracket{ position:absolute; top:0; left:calc(100% * var(--from) / var(--n)); width:calc(100% * var(--span) / var(--n));
  display:flex; flex-direction:column; align-items:center; font:400 var(--fs-micro)/1.6 var(--mono); letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.strip__bracket::after{ content:""; align-self:stretch; height:6px; margin:3px 6px 0; border:1.5px solid var(--ink); border-bottom:0; }
.strip__marks{ margin-top:var(--s2); font:400 var(--fs-micro)/1.6 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.strip__mark{ display:block; width:max-content; max-width:100%; }
.strip__mark--at{ margin-left:calc(100% * (var(--at) + .5) / var(--n)); transform:translateX(-50%); }
.strip__mark--end{ margin-left:auto; text-align:right; }
.home-week{ --n:7; --at:3; }
.home-se__strip{ width:100%; }
/* The analytics consent banner (src/components/Consent.astro): a full-width bar fixed to the bottom of the viewport
   (founder, 17 Oct). Desktop: the title, the text and the Cookie Settings line on the left, the two buttons on the
   right centred on the text. Phones: a bottom sheet, stacked, the buttons side by side at full width. The same bar
   holds the Cookie settings view (Essential, always active, then Analytics, a switch; one Save choices button). While it shows, the
   script sets html.has-consent and --consent-h, and the page is padded by the banner's height so nothing stays
   covered. Its two choice buttons are identical in size and style (equal prominence, Nabbins research/counsel/18 §7),
   outlined in ink, never persimmon: the page keeps its one persimmon CTA. 44px targets. Links use --brand-on-soft. */
html.has-consent body{ padding-bottom:var(--consent-h, 0px); }
html.has-consent{ scroll-padding-bottom:calc(var(--consent-h, 0px) + var(--s3)); }

.consent{ position:fixed; z-index:60; inset-inline:0; bottom:0; color:var(--ink); background:var(--surface);
  border-top:1px solid var(--line); border-radius:var(--r2) var(--r2) 0 0;
  box-shadow:0 -6px 24px color-mix(in srgb, var(--ink) 10%, transparent); }
.consent:focus{ outline:none; }
.consent:focus-visible{ outline:2.5px solid var(--brand-deep); outline-offset:-2.5px; }
@media (prefers-reduced-motion:no-preference){
  .consent:not(.consent--gone){ animation:consent-in .22s ease-out both; }
  @keyframes consent-in{ from{ transform:translateY(16px); opacity:0; } to{ transform:none; opacity:1; } }
}
/* After a choice the bar goes; only the visually hidden live message stays. */
.consent--gone{ position:static; background:none; border:0; box-shadow:none; animation:none; }
.consent--gone .consent__in{ display:none; }

.consent__in{ box-sizing:border-box; width:100%; max-width:var(--wrap); margin-inline:auto; padding:var(--s4) var(--s3) var(--s3);
  display:grid; grid-template-columns:minmax(0,1fr); row-gap:var(--s3); }
.consent__h{ margin:0 0 var(--s1); font:700 var(--t-lead)/1.25 var(--display); letter-spacing:-.005em; }
.consent__body{ margin:0; max-width:var(--measure); line-height:1.5; text-wrap:pretty; }
.consent a{ color:var(--brand-on-soft); }
.consent__body a{ display:inline-block; padding-block:10px; margin-block:-10px; }
.consent__actions{ display:flex; gap:var(--s2); }
.consent__btn{ flex:1 1 0; min-width:0; display:inline-flex; align-items:center; justify-content:center; min-height:44px;
  padding:0 var(--s2); background:var(--surface); color:var(--ink); border:1.5px solid var(--ink); border-radius:var(--r1);
  font:700 var(--fs-body)/1.2 var(--display); cursor:pointer; }
.consent__btn:hover{ text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:.22em; }

/* The first layer's settings line sits under the text. Its "Cookie Settings" is a button that opens Cookie
   settings, drawn as a link; 44px tall at the micro size. */
.consent__note{ margin:0; font-size:var(--t-micro); line-height:1.5; color:var(--muted); }
.consent__textbtn{ display:inline-block; min-height:44px; margin-block:-13px; padding:13px 0; border:0; background:none;
  color:var(--brand-on-soft); font:inherit; line-height:inherit; text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:.2em; cursor:pointer; vertical-align:baseline; }
.consent__textbtn:hover{ text-decoration-thickness:2px; }

/* Desktop: one grid. The title, the text and the settings line stack on the left; the buttons sit on the right in the
   text's row, centred on the text alone (founder, 17 Oct), so the settings line below doesn't pull them. */
@media (min-width:760px){
  .consent{ border-radius:0; }
  .consent__in{ grid-template-columns:minmax(0,1fr) auto; column-gap:var(--s5); row-gap:0; padding-block:var(--s3); }
  .consent__in > .consent__h{ grid-column:1; grid-row:1; }
  .consent__in > .consent__body{ grid-column:1; grid-row:2; }
  .consent__in > .consent__note{ grid-column:1; grid-row:3; margin-top:var(--s2); }
  .consent__in > .consent__actions{ grid-column:2; grid-row:2; align-self:center; }
  .consent__in .consent__btn{ flex:0 0 9rem; }
}

/* ---- Cookie settings: the preferences view, in the same bar. Scrolls inside the bar when taller than the screen. */
.consent{ max-height:100dvh; overflow-y:auto; overscroll-behavior:contain; }
.consent__prefs{ box-sizing:border-box; width:100%; max-width:var(--wrap); margin-inline:auto; padding:var(--s4) var(--s3) var(--s3);
  display:grid; row-gap:var(--s2); }
.consent__prefs:focus{ outline:none; } /* focus lands here so the view is announced; it is not a control */
.consent__cats{ display:grid; gap:var(--s2); margin-top:var(--s1); }
.consent__cat{ border:1px solid var(--line); border-radius:var(--r1); padding:var(--s2) var(--s3) var(--s3); background:var(--surface); }
.consent__cat-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--s2); min-height:44px; }
.consent__cat-h{ margin:0; font:700 var(--fs-body)/1.3 var(--display); }
.consent__cat-body{ margin:0; font-size:.875rem; line-height:1.5; color:var(--muted); text-wrap:pretty; }
.consent__lock{ display:inline-flex; align-items:center; gap:6px; margin:0; font:700 .875rem/1.2 var(--display); color:var(--ink); }
.consent__lock-i{ width:14px; height:14px; flex:none; }
/* The Analytics switch: a real button (role="switch"); its state is said in words (On / Off) and by the thumb's
   place, never by colour alone. 44px tall. */
.consent__switch{ display:inline-flex; align-items:center; gap:var(--s2); min-height:44px; min-width:44px; padding:0 var(--s1);
  border:0; background:none; color:var(--ink); font:700 .875rem/1 var(--display); cursor:pointer; border-radius:var(--r1); }
.consent__track{ position:relative; width:40px; height:24px; border:1.5px solid var(--ink); border-radius:99px; background:var(--surface); box-sizing:border-box; }
.consent__thumb{ position:absolute; top:3px; left:3px; width:15px; height:15px; border-radius:99px; background:var(--ink); }
.consent__switch[aria-checked="true"] .consent__track{ background:var(--ink); }
.consent__switch[aria-checked="true"] .consent__thumb{ left:19px; background:var(--surface); }
.consent__state{ min-width:2em; text-align:left; }
.consent__switch:disabled{ cursor:not-allowed; color:var(--muted); }
.consent__switch:disabled .consent__track{ border-color:var(--muted); border-style:dashed; }
.consent__switch:disabled .consent__thumb{ background:var(--muted); }
@media (prefers-reduced-motion:no-preference){ .consent__thumb{ transition:left .15s ease-out; } }
.consent__actions--prefs{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s2); margin-top:var(--s1); }
.consent__actions--prefs .consent__btn{ flex:none; }
@media (min-width:760px){
  .consent__prefs{ padding-block:var(--s4) var(--s3); }
  .consent__actions--prefs{ grid-template-columns:11rem; justify-content:end; }
}

/* in the dark theme --ink is light, so a shadow from it would glow: the keyline alone carries the edge */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .consent{ box-shadow:none; } }
:root[data-theme="dark"] .consent{ box-shadow:none; }
/* Launch-week blocks (site plan, 20 Oct): the price card, the trust strip, the hero's risk line and QR card, the founder
   note and /security. Tokens only; no new colour. They stay on --bg or --surface (one contrast break per page: the band). */

/* ---- the price card (N2) ---- */
.plans{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s3); max-width:46rem; }
@media (min-width:600px){ .plans{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.plan{ margin:0; padding:var(--s4); background:var(--surface); border:1px solid var(--line); border-radius:var(--r2); }
.plan--on{ border:2.5px solid var(--ink); padding:calc(var(--s4) - 1.5px); }
.plan__tag{ display:flex; align-items:center; gap:6px; min-height:22px; margin-bottom:var(--s2);
  font:500 var(--fs-micro)/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink); }
.plans:has(.plan--on) .plan:not(.plan--on) .plan__name{ margin-top:calc(22px + var(--s2)); }   /* lines up with the selected card's chip; before release no card is selected, so no space is kept */
.plan__check{ width:18px; height:18px; flex:none; }
.plan__name{ margin:0; font:900 var(--fs-lead)/var(--lh-head) var(--display); letter-spacing:-.01em; }
.plan__amt{ margin-top:var(--s2); font:400 var(--fs-lead)/1.3 var(--body); }
.plan__amt [data-fx]{ font:500 var(--fs-h3)/1.1 var(--mono); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.plan__pts{ list-style:none; margin:var(--s3) 0 0; padding:0; color:var(--muted); }
.plan__pts li + li{ margin-top:var(--s1); }
.price__terms{ max-width:var(--measure); color:var(--muted); text-wrap:pretty; }
.price .get{ margin-top:var(--s4); }
.price__why{ max-width:var(--measure); margin-top:var(--s5) !important; }
.price__whyq{ margin:0 0 var(--s1); font:700 var(--fs-lead)/var(--lh-head) var(--display); letter-spacing:-.01em; }

/* ---- the hero's risk line (L5, option A) and the desktop QR card (L7, option a) ---- */
.hero__risk{ margin-top:var(--s2); max-width:32rem; font-weight:500; color:var(--ink); text-wrap:pretty; }
.hero__get{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3); }
.qr{ display:none; margin:0; }
@media (min-width:1024px){
  .qr{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--s1); max-width:7.5rem; }
  .qr__code{ display:block; flex:none; width:88px; height:88px; border:1px solid var(--line); border-radius:var(--r1); }
  .qr__cap{ font-size:var(--fs-micro); line-height:1.35; color:var(--muted); }
}

/* ---- "Coming soon to the App Store", in each badge's place until release (site.appReleased) ---- */
.soon{ margin:0; font-weight:600; color:var(--ink); }
.pins__close .soon{ text-align:center; }

/* ---- the footer's badge ---- */
.footer__get{ margin-bottom:var(--s3); }

/* ---- the founder note (N5; draft builds only until the founder writes it) ---- */

/* ---- /security ---- */
.security__lead{ margin-top:var(--s3); max-width:var(--measure); }
/* The homepage redesign: the founder's picks of 23 Oct from the review page Dnyx1isLuHsETTUrpohrEv.
     A4  the hero: ink on bone, the tilted phone on a persimmon panel with three figure chips;
     B4  the pinned rows: headings beside their words, the aim row on a pine stage, the lunch slide ending as an overlap;
     C5  with C2's bank section: one phone with four callouts under the hero, the price on a mint band, the bank answer
         first and open;
     D2  the close: a persimmon band, the terms in a keyline panel, a four-column footer.
   Loaded after site.css and launch-week.css; tokens only, plus the pine stage's own pair (light #0E3B37 / #E8EFEA as
   the old band; dark a deliberate darker pine with a visible edge, so it never melts into the dark page). */

/* ---- the type ladder and the one section rhythm ------------------------------------------------------------------
   Headings: 88 (the hero), 72 (the aim row's stage), 53, 42, 33, and never under 26 on a phone. Spacing: --sec-pad
   (--s6 from 760px, --s5 below) above and below every bone section's hairline, so every boundary between two bone
   sections is 2 x --sec-pad; a coloured band pads by one golden step more (--band-pad, --s7 / --s6). */
:root{
  --t-88:88px; --t-72:72px; --t-42:var(--t-display); --t-33:var(--t-h2);
  --band-pad:calc(var(--sec-pad) * var(--phi));
  --pine:#0E3B37; --pine-ink:#E8EFEA; --pine-muted:#9DB5AE; --pine-line:#294B44; --pine-edge:transparent;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --pine:#061714; --pine-edge:#2E5A52; } }
:root[data-theme="dark"]{ --pine:#061714; --pine-edge:#2E5A52; }

.h2{ font:900 var(--t-33)/1.08 var(--display); letter-spacing:-.025em; text-wrap:balance; }
@media (min-width:760px){ .h2{ font-size:var(--t-42); } }
@media (min-width:1024px){ .bank__h, .price__h{ font-size:var(--t-53); line-height:1.04; letter-spacing:-.03em; } }
.hero + .sec{ padding-top:0; }

/* ---- the Coming soon lockup: plain text in a quiet keyline pill, 44px tall, not a link, never Apple's badge ---- */
.soon{ display:inline-flex; align-items:center; min-height:44px; margin:0; padding:0 var(--s4); border:1px solid var(--muted);
  border-radius:999px; font:600 var(--fs-body)/1.2 var(--body); color:var(--ink); text-align:center; }
.pins__close .soon{ text-align:center; }

/* =================================================================================================================
   A4 · THE HERO
   ================================================================================================================= */
.hero{ --hk:.7; --hpw:calc(440.554px * var(--hk)); padding:var(--s4) 0 var(--sec-pad); }
.hero__grid{ display:grid; grid-template-columns:minmax(0,1fr); }
.hero__words{ display:contents; }
.hero__h1{ order:1; font:900 var(--t-53)/1 var(--display); letter-spacing:-.04em; color:var(--ink); text-wrap:balance; }
.hero__b{ color:var(--brand-deep); white-space:nowrap; }
@media (max-width:359px){ .hero__b{ white-space:normal; } }   /* a reader's text spacing at 320px: wraps rather than pushing the page sideways (1.4.12) */
.lead{ order:2; max-width:32rem; margin-top:var(--s3); font:600 1.1875rem/1.4 var(--body); color:var(--ink); text-wrap:balance; }
.hero__get{ order:3; margin-top:var(--s3); display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3); }
.hero__panel{ order:4; margin-top:var(--s4); }
.hero__never{ order:5; margin-top:var(--s4); font:600 1.125rem/1.5 var(--body); color:var(--ink); }
/* the trial line is a material term: body size, --ink, never muted (FTC 'difficult to miss') */
.hero__risk{ order:6; margin-top:var(--s1); max-width:34rem; font-weight:400; color:var(--ink); text-wrap:pretty; }
.hero .work__note{ order:7; }
@media (max-width:389px){ .hero__h1{ font-size:42px; } }
@media (min-width:390px){ .hero__h1{ font-size:48px; } }
@media (min-width:760px){ .hero__h1{ font-size:var(--t-72); } .lead{ font-size:var(--fs-lead); } }

/* the panel: the persimmon field as an object, not the room. Radius 36 (28 on a phone). The phone hangs from 40-70px
   down and is cropped by the panel's foot. */
.hero__panel{ position:relative; height:420px; border-radius:28px; background:var(--field); overflow:hidden; isolation:isolate; }
.hero__tilt{ position:absolute; top:40px; left:calc(50% - var(--hpw) / 2 + 12px); transform:rotate(-6deg); transform-origin:50% 30%; }
.hero .phone-frame--hero-fit{ --k:var(--hk); }
.hero .phone__cap{ display:none; }
@media (min-width:760px){ .hero{ --hk:.8; } .hero__panel{ height:560px; border-radius:36px; } .hero__tilt{ top:56px; } }

/* the chips: real figures lifting off the screen. --surface and --ink, so they turn with the theme; the status word
   carries the status, never the dot's colour alone */
.chips{ list-style:none; margin:0; padding:0; }
.chip{ position:absolute; z-index:3; display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--surface);
  color:var(--ink); border-radius:16px; box-shadow:0 2px 4px rgba(14,59,55,.08), 0 14px 30px rgba(14,59,55,.16);
  font:500 15px/1.25 var(--body); white-space:nowrap; }
.chip__w{ display:flex; flex-direction:column; }
.chip__k{ display:block; margin-bottom:3px; font:400 12px/1.2 var(--mono); letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.chip__line{ display:flex; align-items:baseline; gap:.35em; }
.chip__fig{ font-size:19px; font-weight:500; }
.chip__tick{ display:inline-flex; align-items:center; justify-content:center; flex:none; width:22px; height:22px; border-radius:50%;
  background:var(--mint-soft); color:var(--mint-on-soft); }
.chip__tick svg{ width:14px; height:14px; }
.chip__dot{ flex:none; width:10px; height:10px; border-radius:50%; background:var(--butter); }
.chip__status{ font:400 13px/1 var(--mono); color:var(--amber-text); }
/* a phone: the rent chip alone, over the phone's lower left */
.chip--rent{ left:14px; top:250px; font-size:14px; }
.chip--aim, .chip--groc{ display:none; }
@media (min-width:760px){ .chip--rent{ left:24px; top:300px; } }

/* 960 and up: the sentence on the left, the panel on the right, both in the first screen (so 1024 is A4's split too).
   The chips hang from the phone, not from the panel's box: their tops are measured from the phone's top (--htop) and
   the rent and Groceries chips' left edges from the phone's left (--hl), so a shorter panel (1280x800, 1366x768) no
   longer slides them up over the phone's wordmark and its "What's left where". The aim chip keeps to the panel's
   right edge, as A4 draws it. Offsets are A4's at 1440x900. */
@media (min-width:960px){
  .hero{ --hk:.76; --htop:70px; --hnudge:0px; --hl:calc(50% - var(--hpw) / 2 + 28px + var(--hnudge)); padding-top:20px; }
  .hero > .wrap{ max-width:calc(1200px + 2 * var(--gutter)); }
  .hero__grid{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); column-gap:56px; align-items:start; }
  .hero__words{ display:block; grid-column:1; grid-row:1; padding-top:clamp(24px, 8.5vh, 76px); }
  .hero__h1{ font-size:var(--t-72); text-wrap:wrap; }
  .lead{ margin-top:26px; font-size:24px; }
  .hero__get{ margin-top:30px; gap:18px; }
  .hero__never{ margin-top:26px; }
  .hero__panel{ grid-column:2; grid-row:1; margin-top:0; height:min(720px, 100vh - 88px - 56px); min-height:560px; }
  .hero__tilt{ top:var(--htop); left:var(--hl); }
  .chip--rent{ left:max(12px, var(--hl) - 93px); top:calc(var(--htop) + 52px); font-size:15px; }
  .chip--aim{ display:flex; right:5%; top:calc(var(--htop) + 261px); }
  .chip--groc{ display:flex; left:max(12px, var(--hl) - 77px); top:calc(var(--htop) + 448px); }
}
@media (min-width:1280px){ .hero{ --hk:.84; } .hero__h1{ font-size:var(--t-88); } }
/* 1440 and up: the phone about 20px further right, so its right edge meets the panel's, as A4 draws it */
@media (min-width:1440px){ .hero{ --hnudge:20px; } }
/* the hero phone's frame at the A4 scales (the PNG renders that exist: k070, k076, k080, k084; never under x0.69, GAPS §55) */
.hero .phone-frame--hero-fit{ --frame:image-set(url("/assets/phone-front-k070@1x.png") 1x, url("/assets/phone-front-k070@2x.png") 2x, url("/assets/phone-front-k070@3x.png") 3x); --frame-w:309px; --frame-h:624px; }
@media (min-width:760px){ .hero .phone-frame--hero-fit{ --frame:image-set(url("/assets/phone-front-k080@1x.png") 1x, url("/assets/phone-front-k080@2x.png") 2x, url("/assets/phone-front-k080@3x.png") 3x); --frame-w:353px; --frame-h:714px; } }
@media (min-width:960px){ .hero .phone-frame--hero-fit{ --frame:image-set(url("/assets/phone-front-k076@1x.png") 1x, url("/assets/phone-front-k076@2x.png") 2x, url("/assets/phone-front-k076@3x.png") 3x); --frame-w:335px; --frame-h:678px; } }
@media (min-width:1280px){ .hero .phone-frame--hero-fit{ --frame:image-set(url("/assets/phone-front-k084@1x.png") 1x, url("/assets/phone-front-k084@2x.png") 2x, url("/assets/phone-front-k084@3x.png") 3x); --frame-w:370px; --frame-h:749px; } }

/* the QR card beside the badge (released only; site plan L7a, from 1024px) */
@media (min-width:1024px){
  .hero .qr{ flex-direction:row; align-items:center; gap:var(--s3); max-width:none; }
  .hero .qr__code{ width:96px; height:96px; padding:6px; background:#FFFFFF; border-radius:12px; }
  .hero .qr__cap{ max-width:8.5rem; font-size:13px; }
}

/* =================================================================================================================
   C2 · YOUR BANK STAYS YOUR BANK (directly after the hero)
   ================================================================================================================= */
.bank{ text-align:center; }
.bank__h{ margin-inline:auto; }
.bank__stage{ display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; row-gap:var(--s4); margin-top:var(--s5); }
.bank__phone{ order:-1; }
.phone-frame--bank{ --k:.7; --crop-b:520; --frame:image-set(url("/assets/phone-front-k070@1x.png") 1x, url("/assets/phone-front-k070@2x.png") 2x, url("/assets/phone-front-k070@3x.png") 3x); --frame-w:309px; --frame-h:624px; }
.bank__col{ list-style:none; margin:0; padding:0; display:grid; row-gap:var(--s4); max-width:22rem; }
.callout__h{ font:800 21px/1.2 var(--display); letter-spacing:-.01em; }
.callout__p{ margin-top:4px; color:var(--ink); text-wrap:pretty; }
.bank__more{ margin-top:var(--s4); }
.bank__more .link-arrow{ justify-content:center; }
@media (min-width:760px){
  .bank__stage{ grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); column-gap:var(--s6); align-items:start; margin-top:var(--s5); }
  .bank__phone{ order:0; grid-column:2; grid-row:1; }
  .phone-frame--bank{ --k:.7; --crop-b:760; --frame:image-set(url("/assets/phone-front-k070@1x.png") 1x, url("/assets/phone-front-k070@2x.png") 2x, url("/assets/phone-front-k070@3x.png") 3x); --frame-w:309px; --frame-h:624px; }
  /* C2: the pairs' tops 220px apart (the lower pair about 47px lower than before). Each side's text runs from its leader:
     the left pair right-aligned, the right pair left-aligned (founder, 24 Oct) */
  .bank__col{ grid-row:1; row-gap:167px; padding-top:64px; max-width:250px; }
  .bank__col--l{ grid-column:1; justify-self:end; text-align:right; }
  .bank__col--r{ grid-column:3; justify-self:start; width:min(250px, 100%); text-align:left; }   /* never wider than its column: no sideways scroll at 760-959px (1.4.10) */
  /* the dashed leaders, from each callout's heading to the phone's edge */
  .callout{ position:relative; }
  .callout::after{ content:""; position:absolute; top:.62em; width:calc(var(--s6) - 14px); border-top:1.5px dashed var(--muted); }
  .bank__col--l .callout::after{ left:calc(100% + 8px); }
  .bank__col--r .callout::after{ right:calc(100% + 8px); }
}
@media (max-width:759px){ .bank__col{ width:100%; } .bank__col--r{ margin-top:calc(-1 * var(--s4) + var(--s4)); }
  /* the phone is cropped under its Gas row; the crop fades out over its last 72px, so it reads as a crop, not a cut */
  .bank__phone .phone-frame{ -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 72px), transparent);
    mask-image:linear-gradient(to bottom, #000 calc(100% - 72px), transparent); } }

/* C5's tester-quote slot (drawn only with site.testerQuotes on and real items) */
.testers__list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s3); }
@media (min-width:760px){ .testers__list{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.quote{ padding:var(--s4); background:var(--surface); border:1px solid var(--line); border-radius:var(--r3); }
.quote__q{ margin:0; font:500 1.125rem/1.45 var(--body); color:var(--ink); }
.quote__who{ margin-top:var(--s2); font-size:.875rem; color:var(--muted); }

/* =================================================================================================================
   B4 · THE PINNED ROWS
   ================================================================================================================= */
.pins{ overflow-x:clip; }
.pinrow__h{ font:900 var(--t-33)/1.06 var(--display); letter-spacing:-.03em; text-wrap:balance; }
@media (min-width:760px){ .pinrow__h{ font-size:var(--t-42); } .pinbody .prose, .pinbody p{ font-size:1.125rem; line-height:1.6; } }
.pinwords{ min-width:0; }
.pinwords > .pinbody{ margin-top:var(--s3); }

/* the aim row: a pine stage. Its words are pine ink; the phones keep their own light screens. */
.pinrow--aim{ --ink:var(--pine-ink); --muted:var(--pine-muted); --line:var(--pine-line); --brand-deep:#FF8A5B; color:var(--ink); }
.pine-stage{ display:none; }
.pinrow--aim .pinhead{ max-width:none; }
.pinrow--aim .pinrow__h{ font-size:var(--t-33); }
.pin-body{ margin-top:var(--s3); font:500 1.1875rem/1.4 var(--body); max-width:30rem; text-wrap:pretty; }
.pin-line{ margin-top:var(--s3) !important; font:500 1.125rem/1.5 var(--body); }
/* the sum: 40px mono on the stage at desktop, its key line under it, the dashed mint leader towards the aim tile */
.aimsum{ margin:var(--s5) 0 0; }
/* the sum may wrap between its terms (each figure and its operator held by no-break spaces in copy) and steps down to
   fit a 320px column: never clipped, at the site's spacing or a reader's own (WCAG 1.4.10, 1.4.12). From 342px
   wide up it is 26px, as before */
.aimsum__eq{ font:500 clamp(22px, 7.6vw, 26px)/1.1 var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em; color:var(--pine-ink); }
.aimsum__key{ margin-top:8px; font:400 13px/1.5 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--pine-muted); }
.aimsum__line{ position:relative; display:inline-block; }
.aimsum__lead{ display:none; position:absolute; left:calc(100% + 10px); bottom:50%; width:var(--lead-w, 150px); height:var(--lead-h, 170px); color:var(--mint); overflow:visible; }
@media (min-width:760px){ .aimsum__eq{ font-size:34px; } .aimsum__key{ font-size:14px; } .pinrow--aim .pinrow__h{ font-size:var(--t-53); } }

/* stacked (under 1024px, or a short or very tall window): the whole aim row is the pine band, full bleed */
.pinrow--aim{ position:relative; margin-inline:calc(50% - 50vw); padding:var(--band-pad) calc(50vw - 50%); background:var(--pine);
  border-block:1px solid var(--pine-edge); }
.pinrow--aim .pinstage{ background:none; }
.pinrow--over::before{ display:none !important; }
@media (min-width:760px){
  /* the two phones whole, overlapping as the slide ends: 12:34 tilted -6°, 5:28 tilted +5° and on top */
  .pinrow--over .pinphone, .pinrow--over .pintrack--oa .pinphone{ --crop-b:9999; }
  .pinrow--over .pintrack--oa .pinstage{ transform:rotate(-6deg); }
  .pinrow--over .pintrack--ob .pinstage{ transform:rotate(5deg); }
  .pinrow--over .pintrack--ob .phone-frame{ clip-path:none; }
}

/* ---- pinned (>= 1024px with room, 764 to 2000px tall): heading | the held phone | words, as B4 draws them (a 1120px
   row, the phone about 317px wide, the words in a narrow column of about 300px on the right). The heading and the
   words both start level with the phone's top (--ptop into the row), so every row is top-aligned, Cover included.
   The aim row keeps its own composition: its words span the first two columns, its two phones stand in the third. ---- */
@media (min-width:1024px) and (min-width:calc(min(39.5312vh, 372.2px) + 719.6px)) and (min-height:764px) and (max-height:2000px){
  .pins > .wrap{ max-width:calc(1120px + 2 * var(--gutter)); }
  .pins .pins__list{ grid-template-columns:minmax(0,1fr) var(--pw) minmax(0,300px); column-gap:50px; }
  .pins .pinwords{ display:contents; }
  .pins .pinwords > .pinhead, .pins .pinwords > .pinbody{ max-width:none; margin:var(--ptop) 0 0; align-self:start; }
  .pins .pinwords > .pinhead{ grid-column:1; }
  .pins .pinwords > .pinbody{ grid-column:3; padding-top:8px; }
  .pins .pinwords[data-r="1"] > *{ grid-row:1; }
  .pins .pinwords[data-r="4"] > *{ grid-row:4; }
  .pins .pinhead--tap{ grid-column:1; align-self:center; }
  .pins .pinbody{ grid-column:3; }
  .pins .pintrack{ grid-column:2; }
  .pinrow__h{ font-size:var(--t-42); }
  /* the aim row: the stage spans the row, offset by --ptop so its top and foot ride exactly on the hand-off edges */
  .pins .pinrow--aim{ margin:0; padding:0; background:none; border:0; }
  .pins .pine-stage{ display:block; grid-column:1 / -1; grid-row:3; align-self:stretch; position:relative; z-index:0;
    margin:var(--ptop) calc(50% - 50vw) calc(-1 * var(--ptop)); background:var(--pine); border-block:1px solid var(--pine-edge); }
  .pins .pinrow--over > .pinhead{ grid-column:1 / 3; grid-row:3; clip-path:inset(var(--ptop) -100vw calc(-1 * var(--ptop)) -100vw); }
  .pins .pinrow--aim .pinhead__hold{ max-width:calc(100% - var(--shift) - 40px); }
  .pins .pinrow--aim .pinrow__h{ font-size:var(--t-53); }
  /* B4's aim words: the body about 22px in a column of about 470px; the key on one line */
  .pins .pinrow--aim .pin-body{ max-width:470px; font-size:22px; line-height:1.4; }
  .aimsum__eq{ font-size:30px; }
  .aimsum__key{ white-space:nowrap; }
  /* the leader: from the aim, up and right to the 12:34 phone's aim tile (about 0.42 of the phone's height from its top) */
  .pins .pinrow--aim .pinhead__hold{ container-type:inline-size; }
  .aimsum__lead{ display:block; width:calc(100cqw - 100% + 84px); height:215px; }
  /* the end pose: the 12:34 phone shifted left and tilted -6°, the 5:28 phone in the slot, tilted +5°, on top */
  .pins--over{ --shift:calc(var(--pw) * .7); }
  .pins .pinrow--over .pintrack--oa .pinstage{ transform:translateX(calc(-1 * var(--shift))) rotate(-6deg); }
  .pins .pinrow--over .pintrack--ob .pinstage{ transform:rotate(5deg); }
  .pins .pintrack--ob .pinfig{ margin:var(--ptop) 0 0 0; }
}
/* the held phones at B4's size: about 317px wide (x0.72) where the window allows, never under x0.685 (the old floor at 764px
   tall). --ptop and every hand-off are worked out from --pk, so they follow. */
@supports (width:calc(100vh / 1px * 1px)){
  @media (min-width:1024px) and (min-width:calc(min(39.5312vh, 372.2px) + 719.6px)) and (min-height:764px) and (max-height:2000px){
    .pins{ --pk:clamp(0.685, calc(72vh / 891.557px), 0.72); }
  }
}
@media (min-width:1280px) and (min-height:764px) and (max-height:2000px){
  .pins .pinrow__h{ font-size:var(--t-53); }
  .pins .pinrow--aim .pinrow__h{ font-size:var(--t-72); line-height:1; }
  .pins .aimsum__eq{ font-size:40px; }
}
/* four rows (It varies off) under the slide too: the slide's own row template had five, which left 100vh of empty
   scroll after the Cover row, with its phone held alone (the "dead scroll", about 1,000px) */
@supports (animation-timeline:view()){
  @media (min-width:1024px) and (min-width:calc(min(39.5312vh, 372.2px) + 719.6px)) and (min-height:764px) and (max-height:2000px) and (prefers-reduced-motion:no-preference){
    .pins.pins--slide.pins--four .pins__list{ grid-template-rows:repeat(2, minmax(100vh, auto)) minmax(calc(100vh + var(--x)), auto) minmax(100vh, auto); }
    /* the slide: the 5:28 phone rises tilted into the slot; over the same scroll the 12:34 phone moves left and tilts */
    .pins.pins--slide .pins__list .pintrack--ob .pinfig{ margin-left:0; }
    .pins.pins--slide .pinrow--over .pintrack--oa .pinstage{ animation:aim-shift linear both; animation-timeline:--pin3b;
      animation-range:cover calc(112vh - var(--dy) + var(--fs)) cover calc(212vh - var(--dy) + var(--fs) - var(--ptop)); }
    /* the hand-out: both phones are pushed by the Cover row's rising edge, which is also the pine stage's foot, so the
       line through the phones is a visible edge (pine above, bone below), never a morph of one screen into the other.
       The clip is widened sideways and upwards: the phones are tilted and the 12:34 one sits left of its window. */
    .pins .pintrack--oa[data-r="3"] .pinfig__win{ animation:pin-window linear none, pin-push-wide linear forwards; animation-timeline:--pin, --pin4;
      animation-range:cover 0% cover 100vh, cover 0% cover 150vh; }
    .pins.pins--slide .pins__list .pintrack--ob .pinfig__win{ animation:pin-push-wide linear forwards; animation-timeline:--pin4;
      animation-range:cover 0% cover 150vh; }
    /* the words: held at the centre of a 100vh box, then scrolled off with the stage as its foot comes up, so the edge
       never cuts through them (clipped to the stage all the same) */
    .pins.pins--slide .pins__list .pinhead__hold{ position:sticky; top:0; height:100vh; margin:0; transform:none;
      display:flex; flex-direction:column; justify-content:center; }
  }
}
@keyframes aim-shift{
  from{ transform:none; }
  to{ transform:translateX(calc(-1 * var(--shift))) rotate(-6deg); }
}
/* the edge runs on past the window's top (150vh of scroll, 1:1), so the tilted corners above it are wiped too */
@keyframes pin-push-wide{
  from{ clip-path:inset(-50vh -100vw calc(100% - 100vh) -100vw); }
  to{ clip-path:inset(-50vh -100vw calc(100% + 50vh) -100vw); }
}

/* =================================================================================================================
   C5 · THE PRICE ON A MINT BAND (text on the tint uses the on-soft tokens)
   ================================================================================================================= */
.price{ background:var(--mint-soft); padding-block:var(--band-pad); }
.price::before{ display:none; }
.price__grid{ display:grid; grid-template-columns:minmax(0,1fr); row-gap:var(--s5); }
.price__per{ margin-top:var(--s4); font:500 1.25rem/1.4 var(--body); color:var(--ink); max-width:24rem; text-wrap:pretty; }
/* a figure in a heading position takes the heading's face, with its dot (CLAUDE.md, house style) */
.price__fig{ display:block; margin-bottom:var(--s1); font:900 52px/1 var(--display); letter-spacing:-.03em; color:var(--ink); }
.price .plans{ max-width:none; }
.price .plan{ background:var(--surface); }
.price__terms{ margin-top:var(--s3); max-width:46rem; font-size:15px; line-height:1.5; color:var(--ink); }
/* C5: the badge (before release, the Coming soon lockup) and "Why isn't it free?" in one row, centred on one axis,
   24px apart; the row wraps below 1024px */
.price .price__get{ margin-top:var(--s4) !important; display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3) 24px; }
.price .price__why{ margin:0 !important; max-width:30rem; font-size:1.125rem; line-height:1.55; color:var(--ink); text-wrap:pretty; }
.price .price__whyq{ margin:0; font-family:inherit; font-size:inherit; line-height:inherit; font-weight:700; letter-spacing:0; }
@media (min-width:1024px){ .price .price__get{ flex-wrap:nowrap; } .price .price__get > :is(.badges, .soon){ flex:none; } .price .price__get > .soon{ white-space:nowrap; } .price .price__why{ flex:1 1 auto; } }
/* the plan's lines run on one line, joined by a middle dot (C5: "No trial · Charged when you subscribe") */
.price .plan__pts li{ display:inline; }
.price .plan__pts li + li{ margin:0; }
.price .plan__pts li + li::before{ content:" \00B7  " / ""; }
.price a{ color:var(--mint-on-soft); }
/* the store badge's text is white on its black ground in every band and theme; the band's link colour must not reach it */
.price a.badge, .close a.badge, .footer a.badge, .hero a.badge, .pins a.badge{ color:#FFFFFF; }
@media (min-width:760px){ .price__fig{ font-size:64px; } .price__per{ font-size:24px; } }
@media (min-width:1024px){ .price__grid{ grid-template-columns:360px minmax(0,1fr); column-gap:60px; align-items:start; } .price__per{ margin-top:22px; } }
.price + .sec::before{ border-top-color:transparent; }

/* the FAQ: "Short answers." at 42; "What it can't see, it says." keeps the band's rows as a definition list */
.qa__rows{ margin-top:var(--s3) !important; }
.deflist__row{ display:grid; grid-template-columns:minmax(0,1fr); row-gap:var(--s1); padding-block:var(--s3); border-top:1px solid var(--line); }
.deflist__row:last-child{ border-bottom:1px solid var(--line); }
.deflist dt{ font:700 var(--fs-body)/1.35 var(--display); letter-spacing:-.005em; }
.deflist dd{ margin:0; text-wrap:pretty; }
@media (min-width:600px){ .deflist__row{ grid-template-columns:minmax(0,1fr) minmax(0,1.618fr); column-gap:var(--s4); } }

/* =================================================================================================================
   D2 · THE CLOSE: a persimmon bookend, the terms, the footer
   ================================================================================================================= */
.close__band{ background:var(--field); color:var(--on-brand); padding-block:var(--band-pad); text-align:center; }
.close__in{ display:flex; flex-direction:column; align-items:center; }
.close__belief{ max-width:720px; font:700 24px/1.4 var(--body); text-wrap:balance; }
.close__line{ margin-top:var(--s4) !important; font:900 52px/.98 var(--display); letter-spacing:-.04em; }
.close__line > span{ display:block; text-wrap:balance; }
.close__h{ margin-top:var(--s5) !important; font:900 var(--t-33)/1.08 var(--display); letter-spacing:-.025em; }
.close__lead{ margin-top:var(--s3); font:600 24px/1.4 var(--body); }
.close__terms{ margin-top:var(--s3); }
.close__trial, .close__price{ font:600 24px/1.4 var(--body); }
.close__get{ margin-top:var(--s4) !important; display:flex; justify-content:center; }
.close__get .badges{ justify-content:center; }
/* before release: the Coming soon line on the field, white at 24px bold (large text: 3.8:1 on #EB4A2A passes as large) */
.close .soon{ min-height:56px; padding:0 var(--s4); border:1.5px solid var(--on-brand); color:var(--on-brand); font:700 24px/1.2 var(--body); }
@media (min-width:760px){ .close__line{ font-size:var(--t-mark); } .close__h{ font-size:var(--t-42); } }
@media (min-width:1080px){ .close__line{ font-size:var(--t-hero); } }
/* the material terms (D4, founder 23 Oct): one centred paragraph, small size, full --ink, never muted; balanced so no word sits alone */
.close__fine{ max-width:760px; margin:var(--sec-pad) auto var(--s5); text-align:center; color:var(--ink); font-size:15px; line-height:1.5; }
.close__fine > p{ max-width:none; margin:0; text-wrap:balance; }

.footer{ padding:var(--s5) 0 var(--s6); border-top:1px solid var(--line); }
.footer__grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s4) 32px; }
@media (min-width:600px){ .footer__grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } .footer__words{ grid-column:1 / -1; } }
@media (min-width:1024px){ .footer__grid{ grid-template-columns:1.4fr 1fr 1fr 1fr; } .footer__words{ grid-column:auto; } }
.footer__mark{ margin-bottom:var(--s3); }
.footer__lines{ color:var(--muted); font-size:15px; line-height:1.6; }
.footer__lines > p + p{ margin-top:var(--s1); }
.footer__get{ margin-top:var(--s3); }
.footer__h{ margin:0 0 4px; font:500 13px/1.3 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink); }
.footer__links{ list-style:none; margin:0; padding:0; }
.footer__links a{ display:inline-flex; align-items:center; min-height:44px; min-width:44px; }
.footer__small{ margin-top:var(--s4); color:var(--muted); font-size:13px; line-height:1.55; max-width:52rem; }
.footer__small > p + p{ margin-top:var(--s1); }
@media (min-width:1024px) and (min-width:calc(min(39.5312vh, 372.2px) + 719.6px)) and (min-height:764px) and (max-height:2000px){
  .pins .pinwords > .pinhead, .pins .pinwords > .pinbody{ align-self:start; }
}
@media (min-width:1024px) and (min-width:calc(min(39.5312vh, 372.2px) + 719.6px)) and (min-height:764px) and (max-height:2000px){
  .pins .pinrow--over > .pintrack{ grid-column:3; }
}
/* on a phone the close's lockup may take two lines at 24px: it stays 24px bold (large text on the field) */
@media (max-width:479px){ .close .soon{ max-width:100%; padding:8px var(--s3); border-radius:28px; text-wrap:balance; justify-content:center; } }
/* the masthead and footer wordmark in dark mode: the canonical SVG carries color="#15342F" (the light logo ink), which
   vanished on the dark page; in dark the letters take the link's colour, --ink, as Wordmark.astro intends */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .wordmark svg{ color:inherit; } }
:root[data-theme="dark"] .wordmark svg{ color:inherit; }