/* 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. */
/* 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:#F4622D; --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: #F4622D fails WCAG AA as text on light (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:#F4622D;        /* never themed (brand.md §1.1) */
  --field:var(--brand);     /* the room: --brand used as a fill, never text. #F4622D 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; }
.flag-i{ height:.80em; width:.30em; vertical-align:baseline; display:inline-block; overflow:visible; }
.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); } }
/* Rows: 1 half 1 on the field · 2 the phone's top, cropped by the field's edge · 3 caption ·
   4 half 2 on bone · 5 lead, form and status line · 6 the one card.
   V2's phone order (graft 2): the ask comes straight after the lead and the working after the ask,
   so the button and "never lends" stay in the first screen of a 375x667 phone (spec §3.3 fold check). */
.hero{ --k:.84; --bz:9.9px; --crop-top:50; --crop-b:246; --pr:36.6px; }
.hero__grid{ position:relative; display:grid; grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto calc(var(--bz) + (var(--crop-b) - var(--crop-top)) * var(--k) * 1px) auto auto auto auto; }
.hero__field{ grid-column:1 / -1; grid-row:1 / 3; background:var(--field);
  box-shadow:0 0 0 100vmax var(--field); clip-path:inset(0 -100vmax); }
.hero__h1{ grid-column:1 / -1; grid-row:1 / 5; display:grid; grid-template-rows:subgrid; position:relative; z-index:1;
  font:900 var(--fs-display)/1.05 var(--display); letter-spacing:-.04em; text-wrap:balance; }
.hero__a{ grid-row:1; color:var(--on-brand); padding:var(--s3) 0 var(--s2); }
.hero__b{ grid-row:4; color:var(--ink); padding-top:2px; }
.phone{ grid-column:1 / -1; grid-row:2 / 4; position:relative; z-index:2; justify-self:center;
  width:calc(390px * var(--k) + 2 * var(--bz)); }
/* V1's bezel: a neutral --ink outline, straight on. Cropped here by the field's edge, so no bottom rail. */
.phone__cap{ padding-top:var(--s1); text-align:center; }
.hero__join{ grid-column:1 / -1; grid-row:6; padding-top:var(--s1); }
.hero__work{ grid-column:1 / -1; grid-row:7; position:relative; z-index:1; padding-top:var(--s3); }
.lead{ font-size:var(--fs-body); line-height:1.5; text-wrap:balance; max-width:32rem; }

/* the one card: the four lines of the working, and the total */
.work{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r2); box-shadow:var(--shadow);
  padding:10px var(--s3) 8px; }
.work__t{ width:100%; font-variant-numeric:tabular-nums; }
.work__t caption{ caption-side:top; text-align:left; padding-bottom:var(--s1); font:400 var(--fs-micro)/1.6 var(--mono);
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.work__t th,.work__t td{ padding:0; height:26px; font-size:var(--fs-body); line-height:1.3; vertical-align:middle; font-weight:400; text-align:left; }
.work__t tbody tr:not(:last-child) > *{ border-bottom:1px solid var(--line); }
.work__t td{ text-align:right; font-family:var(--mono); font-weight:500; white-space:nowrap; padding-left:var(--s3); }
.work__t tfoot tr > *{ border-top:1px solid var(--ink); height:30px; }
.work__t tfoot th{ font-weight:500; }
/* The status line, directly under the button: two short lines where its column is 354px or wider (every
   phone from 390 up, and the wide desktop columns), three where it is narrower. Segments never break inside;
   in a narrow column the privacy link moves to the end so the last line is "No date yet. Privacy notice". */
.status{ display:flex; flex-wrap:wrap; column-gap:.28em; container-type:inline-size; }
.status__seg{ white-space:nowrap; }
.status__br{ flex-basis:100%; height:0; }
@container (max-width:353.9px){ .status__link{ order:1; } }
.status{ margin-top:var(--s2); color:var(--muted); line-height:1.5; }
.status a{ padding-block:10px; margin-block:-10px; }
/* the phone's scale steps: its outer width (screen + two bezels) always fits the column */
@media (max-width:389px){ .hero{ --k:.8; --pr:35px; } }
@media (max-width:374px){ .hero{ --k:.76; --pr:33.2px; } }
@media (max-width:359px){ .hero{ --k:.68; --pr:29.7px; } }

/* tablet: the same stack, one step up */
@media (min-width:760px) and (max-width:1079px){
  .hero{ --k:1; --pr:43.6px; }
  .hero__grid{ max-width:600px; }
  .hero__h1{ font-size:var(--fs-53); }
  .lead{ font-size:var(--fs-lead); line-height:var(--lh-body); }
  .work__t th,.work__t td{ height:32px; }
}

/* ---- 1080 and up: halves either side of a phone that crosses the field's edge --------------- */
@media (min-width:1080px){
  .hero{ --k:.88; --crop-top:24; --pr:41.9px; --pw:calc(390px * var(--k) + 2 * var(--bz));
    --field-h:320px; --tuck:20px;
    /* the figure's baseline, from the field's top: the phone's 40px drop, the bezel, then logical y 204 */
    --fig-y:calc(40px + var(--bz) + (204 - var(--crop-top)) * var(--k) * 1px); }
  .hero__grid{ grid-template-columns:minmax(0,1fr) var(--pw) minmax(0,1fr); column-gap:var(--s4);
    grid-template-rows:var(--field-h) auto; }
  .hero__field{ grid-row:1; }
  .hero__h1{ grid-row:1; grid-template-rows:none; grid-template-columns:subgrid; align-self:start;
    font-size:var(--fs-53); }
  /* both halves sit on the figure's baseline. Gabarito 900 at 53.3px/1.05 puts its baseline 45px into a 56px line */
  .hero__a{ grid-column:1; grid-row:1; padding:0; margin-top:calc(var(--fig-y) - 56px - 45px); text-align:right; align-self:start; }
  .hero__b{ grid-column:3; grid-row:1; padding:0; margin-top:calc(var(--fig-y) - 45px); text-align:left; align-self:start; color:var(--on-brand); }
  .phone{ grid-column:2; grid-row:1 / 3; align-self:start; margin-top:40px; }
  .phone__cap{ display:none; }
  /* V1's tuck: the card's right edge slides 20px behind the phone's bezel; the phone stays in front */
  .hero__work{ grid-column:1; grid-row:2; align-self:start; padding-top:0;
    margin-top:calc(-1 * var(--work-up, 80px)); margin-right:calc(-1 * (var(--s4) + var(--tuck))); }
  .work{ margin-top:0; padding:14px calc(var(--s4) + var(--tuck)) 12px var(--s4); }
  .work__t th,.work__t td{ height:32px; }
  /* one stamp at desktop: the caption under the card is the only one. It is 475px in one line, wider than
     its 352px, so its parts always stack here and the separator is hidden. The card's caption stays for
     screen readers (it names the table) but leaves the screen. */
  .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; }
  .hero__join{ grid-column:3; grid-row:2; padding-top:var(--s4); }
  .lead{ font-size:var(--fs-lead); line-height:var(--lh-body); }
}

/* ---- the phone's screen: T1-Today, rebuilt (canvas type sizes kept as drawn, spec §6.6) --------- */
.app{ 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;
  transform-origin:0 0; transform:scale(var(--k)) translateY(calc(var(--crop-top) * -1px)); pointer-events:none; user-select:none; }
.app p{ margin:0; }
.app__main{ flex-grow:1; padding:64px 24px 16px; display:flex; flex-direction:column; overflow:hidden; }
.app__lab{ font:400 12.6px/normal var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.app__lab--11{ font-size:11px; letter-spacing:.12em; }
.app__lab--10{ font-size:10.5px; letter-spacing:.1em; }
.app__ic{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none; color:var(--muted); }
.app__ic svg,.app__acc svg,.app__tab svg,.app__rent svg{ display:block; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; }
.app__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.app__you{ margin-right:-10px; }
.app__fig{ display:flex; align-items:baseline; gap:2px; margin-top:2px; }
.app__d{ font:500 67.8px/1.05 var(--mono); letter-spacing:-.035em; color:var(--ink); font-variant-numeric:tabular-nums; }
.app__c{ font:500 25.9px/normal var(--mono); color:var(--muted); font-variant-numeric:tabular-nums; }
.app__help{ margin:-7px -7px -7px -1px; align-self:center; }
.app__meta{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:4px; }
.app__until{ font-size:15px; color:var(--muted); }
.app__acc{ display:inline-flex; align-items:center; gap:5px; min-height:44px; margin:-13px -4px -13px 0; padding:0 4px;
  font:400 11.5px/normal var(--mono); color:var(--muted); }
.app__card{ background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.app__aim{ margin-top:16px; }
.app__cells{ display:flex; align-items:stretch; }
.app__cell{ flex-grow:1; padding:13px 15px; }
.app__v{ margin-top:2px; font:500 20.4px/1.25 var(--mono); color:var(--ink); font-variant-numeric:tabular-nums; }
.app__div{ width:1px; background:var(--line); margin:13px 0; }
.app__note{ border-top:1px solid var(--line); padding:10px 15px; background:var(--surface-2); }
.app__note p{ font-size:13px; line-height:1.45; color:var(--mint-on-soft); }
.app__sec{ margin-top:18px; margin-bottom:9px; display:flex; align-items:baseline; justify-content:space-between; }
.app__row{ display:flex; align-items:center; gap:11px; padding:12px 15px; border-bottom:1px solid var(--line); }
.app__row:last-child{ border-bottom:0; }
.app__dot{ width:9.9px; height:9.9px; border-radius:99px; flex:none; }
.app__nm{ flex-grow:1; min-width:0; display:flex; align-items:baseline; gap:8px; }
.app__name{ font-size:15px; font-weight:500; }
/* T2-Thin's status word beside the name (GAPS §76): words carry the status, never the colour alone */
.app__fast{ font:400 11px/normal var(--mono); color:var(--amber-text); }
/* T1-Today's "All nabs · 1 more" foot of the card, under the four rows the attention policy shows */
.app__all{ display:flex; align-items:center; gap:8px; min-height:44px; padding:0 15px; font-size:13.5px; color:var(--ink); }
.app__alln{ flex-grow:1; }
.app__more{ font-size:13px; color:var(--muted); }
.app__all svg{ display:block; flex:none; fill:none; stroke:var(--brand-deep); stroke-linecap:round; stroke-linejoin:round; }
.app__amt{ font:400 14px/normal var(--mono); font-variant-numeric:tabular-nums; color:var(--ink); }
.app__rent{ margin-top:14px; background:var(--mint-soft); border-radius:9.9px; padding:13px 14px; display:flex; gap:10px; align-items:flex-start; }
.app__rent svg{ flex:none; margin-top:1px; color:var(--mint-on-soft); }
.app__rent p{ font-size:13.5px; line-height:1.5; color:var(--mint-on-soft); }
.app__tabs{ flex:none; border-top:1px solid var(--line); background:var(--surface); 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); }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .t3--scrim{ background:rgba(0,0,0,.55); } }
:root[data-theme="dark"] .t3--scrim{ background:rgba(0,0,0,.55); }
.t3--sheet{ left:0; right:0; top:60px; bottom:0; overflow:hidden; background:var(--surface);
  border-radius:24px 24px 0 0; }
.t3__grab{ width:36px; height:5px; margin:10px auto 0; border-radius:99px; background:var(--line); }
.t3__body{ padding:22px 24px 0; }
.t3__h{ font:700 41.9px/1.1 var(--display); letter-spacing:-.035em; color:var(--ink); }
.t3__intro{ margin-top:14px; font-size:15.5px; line-height:1.75; color:var(--muted); }
.t3__rows{ margin-top:34px; }
.t3__row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:22px 0; border-bottom:1px solid var(--line); }
.t3__row--last{ border-bottom:0; }
.t3__name{ font-size:15px; font-weight:500; color:var(--ink); }
.t3__sub{ margin-top:3px; font-size:12.5px; color:var(--muted); }
.t3__amt{ font:500 17px/1.25 var(--mono); color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.t3__tot{ display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:28px 0 0; border-top:1px solid var(--ink); }
.t3__totname{ font-size:16px; font-weight:700; color:var(--ink); }
.t3__totamt{ font:500 25.9px/1.15 var(--mono); letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; }
.t3__why{ margin-top:31px; background:var(--surface-2); border-radius:9.9px; padding:20px; }
.t3__whyh{ font-size:14px; font-weight:700; color:var(--ink); }
.t3__whyp{ margin-top:9px; font-size:13.5px; line-height:1.85; color:var(--muted); }
/* 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; }

/* ---- 3. the band: "What it can't see" alone since the founder's 7 Oct mock-up moved the won't-do half into the FAQ
   (prototype .band, .deflist; the won't-do half's title and item rules went with it) ---- */
.band{ --band-bg:#0E3B37; --ink:#E8EFEA; --muted:#9DB5AE; --line:#294B44; --brand:#FF8A5B; --brand-deep:#FF8A5B; --on-brand:#0B211F;
  --surface:#15342F; --surface-2:#1C403A; background:var(--band-bg); color:var(--ink); }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .band{ --band-bg:#1C403A; border-block:1px solid #294B44; } }
:root[data-theme="dark"] .band{ --band-bg:#1C403A; border-block:1px solid #294B44; }
.band{ padding-block:var(--s5); }
@media (min-width:760px){ .band{ padding-block:var(--s6); } }
@media (min-width:1024px){ .band{ padding-block:var(--s7); } }
.band__lead{ margin-top:var(--s4); font-size:var(--fs-body); line-height:var(--lh-body); text-wrap:pretty; }
@media (min-width:760px){ .band__lead{ font-size:var(--fs-lead); } }
.band__half:first-child{ margin-top:0; }
.band__half{ margin-top:var(--s6); }
@media (max-width:759px){ .band__half{ margin-top:var(--s5); } }
.band__sub{ font:900 var(--fs-h3)/var(--lh-head) var(--display); letter-spacing:-.02em; text-wrap:balance; }
@media (min-width:760px){ .band__sub{ font-size:var(--fs-display); letter-spacing:-.03em; } }
.band__half .band__lead{ margin-top:var(--s3); }
.band__cant{ margin-top:var(--s5); }
.deflist__row{ display:grid; grid-template-columns:minmax(0,1fr); row-gap:var(--s1); padding-block:var(--s4); border-top:1px solid var(--line); }
.deflist__row:last-child{ border-bottom:1px solid var(--line); }
.deflist dt{ font:700 var(--fs-lead)/1.3 var(--display); letter-spacing:-.01em; }
.deflist dd{ max-width:var(--measure); text-wrap:pretty; }
@media (min-width:760px){ .deflist__row{ grid-template-columns:minmax(0,1fr) minmax(0,1.618fr); column-gap:var(--s5); } }

/* ---- 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 trial terms are material terms: body size or larger, in --ink, never muted (copy writer; FTC 'difficult to miss') */
.close__trial, .close__price{ font-size:var(--fs-body); line-height:var(--lh-body); max-width:var(--measure); color:var(--ink); text-wrap:pretty; }
@media (min-width:760px){ .close__trial, .close__price{ font-size:var(--fs-lead); } }
.close__trial{ font-weight:500; }
/* the material terms (when the charge lands, how to cancel, who and where): set apart in a keyline panel under the badges,
   so the badges stay the first thing in the column; body size, full --ink on --surface, never muted (FTC 2021 negative-option
   statement; Cal. Bus. & Prof. Code 17601(a)(3) 'clear and conspicuous') */
.close__fine{ max-width:var(--measure); margin-top:var(--s4) !important; padding:var(--s3) var(--s4); background:var(--surface);
  border:1.5px solid var(--ink); border-radius:var(--r2); color:var(--ink); font-size:var(--fs-body); line-height:1.5; }
.close__fine > p{ position:relative; padding-left:var(--s3); }
.close__fine > p::before{ content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; border-radius:99px; background:var(--ink); }
.close__fine > p + p{ margin-top:var(--s2); }
@media (max-width:759px){ .close__fine{ padding:var(--s3); } }

/* ---- 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; }
.badge{ display:inline-flex; align-items:center; gap:7px; height:48px; padding:0 10px; background:#000; color:#FFF; border:1px solid #A6A6A6;
  border-radius:8px; text-decoration:none; white-space:nowrap; }
.badge--apple{ width:143.6px; }
.badge__logo{ flex:none; width:24px; height:24px; border:1.5px dashed #A6A6A6; border-radius:5px; }
.badge__txt{ display:flex; flex-direction:column; text-align:left; }
.badge__small{ font:500 10px/1.15 system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif; letter-spacing:.01em; }
.badge__big{ font:600 19px/1.1 system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif; letter-spacing:-.01em; }
.badge:hover .badge__big{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.15em; }
.get{ margin-top:var(--s3); }
@media (min-width:1080px){ .hero__join .get{ margin-top:var(--s2); } }
.close .get{ margin-top:var(--s4); }

/* ---- footer (prototype) ---- */
.footer{ padding-bottom:var(--s6); }
.footer__in{ padding-top:var(--s4); row-gap:var(--s4); }
.footer__mark{ margin-bottom:var(--s3); }
.footer__lines{ color:var(--muted); }
.footer__lines > p + p{ margin-top:var(--s1); }
.footer__copy{ margin-top:var(--s4); color:var(--muted); }
.footer__side{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--s3); }
.footer__links{ list-style:none; display:flex; flex-wrap:wrap; column-gap:var(--s4); }
.footer__links a{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; }  /* min-width and centring added: "Terms" was 43.8px wide in the prototype */
@media (min-width:760px){
  .footer__side{ align-items:flex-end; text-align:right; }
  .footer__links{ flex-direction:column; align-items:flex-end; }
  .footer__copy{ grid-column:1; }
}

/* 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 hero ----
   The phone's scale follows the frame's fit steps (0.8 from 390px, 0.76 from 375, 0.74 from 360, 0.65 below; 1.0 from
   760; 0.88 from 1080), the same breakpoints as A5's own steps (0.84 / 0.8 / 0.76 / 0.68; 1.0; 0.88), one step
   smaller on phones because the phone's body is 432.6 pt wide, not 390 + two 11.25 bezels: at A5's 0.84 it would run
   12px into the 16px gutter at 390. The .phone-frame--hero-fit class sets the same k on the figure, with its PNG. */
.hero{ --k:.8; }
@media (max-width:389px){ .hero{ --k:.76; } }
@media (max-width:374px){ .hero{ --k:.74; } }
@media (max-width:359px){ .hero{ --k:.65; } }
@media (min-width:760px) and (max-width:1079px){ .hero{ --k:1; } }
@media (min-width:1080px){ .hero{ --k:.88; } }
.phone.phone-frame{ width:calc(var(--box-w) * var(--k) * 1px); }
/* below 1080 the field's edge crops the phone where A5 crops it, at canvas y 246 (through "until Friday · 4 days"),
   now from the device's top (A5: from y 50 under a 9.9px bezel), so the status bar shows above the figure.
   Row 2 of the stack is the visible slice: (19.778 pt of bezel + 246 canvas px x 393/390) x k. */
@media (max-width:1079px){
  .hero__grid{ grid-template-rows:auto calc((19.778 + var(--crop-b) * 393 / 390) * var(--k) * 1px) auto auto auto auto; }
}
/* 1080 and up: the whole device. The middle column is the device box, and the halves' baseline follows the figure:
   the phone's drop, the 19.778 pt bezel, then canvas y 204 x 393/390.
   The drop is --s4 (25.9px), not A5's 40px, so the whole device (784.6px at 0.88) ends at 88 + 25.9 + 784.6 = 898.5px,
   inside a 900px first screen. The working card follows the halves' baseline: in A the baseline is at
   40 + 9.9 + 180 x 0.88 = 208.3px and the card rises --work-up 80px into the 320px field, so its top is 31.7px under
   the baseline. --work-up = 79px + 208.3px - --fig-y puts the card 32.7px under the baseline whatever the drop: A's
   31.7px plus 1px, because at A's exact 31.7px the glyphs' pixel snapping left 30.9px. */
@media (min-width:1080px){
  .hero{ --pw:calc(440.554 * var(--k) * 1px); --drop:var(--s4);
    --fig-y:calc(var(--drop) + (19.778 + 204 * 393 / 390) * var(--k) * 1px);
    --work-up:calc(79px + 208.3px - var(--fig-y)); }
  .hero .phone.phone-frame{ --crop-b:9999; margin-top:var(--drop); }
  /* the card keeps A's text box: the wider middle column takes (387.7 - 363.0) / 2 = 12.35px from each outer column, so
     the card's right padding gives the same back (its edge still tucks 20px behind the device). */
  .hero .work{ padding-right:calc(var(--s4) + var(--tuck) - (var(--pw) - (390px * var(--k) + 2 * 9.9px)) / 2); }
}

/* =================================================================================================
   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) */
.pinphone[data-screen="P1-Payday"]{ --crop-b:319.5; }
.pinphone[data-screen="P4-Done"]{ --crop-b:433.09; }
.pinphone[data-screen^="T1-Today"]{ --crop-b:398.36; }
.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){ .pins{ --pk:0.685; } }
@media (min-width:1024px) and (min-width:calc(min(39.5312vh, 372.2px) + 719.6px)) and (min-height:764px) 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 (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 (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 (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 (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){ .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){
  .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; }
}
/* 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 screen fades as Cash App's does,
   opacity = 1 + T/H over T = 0 -> -H (T its row's top; cover 100vh -> cover 200vh of its track), linear, 1:1 with scroll,
   held at 0 after. The screen is .phone-frame__viewport (the app and its status bar) over the screen's own --bg ground; the
   frame does not fade. 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 (prefers-reduced-motion:no-preference){
    .pins .pinfig{ position:sticky; top:var(--ptop); }
    .pins .pintrack{ view-timeline:--pin block; }
    .pins .pintrack:not(.pintrack--first) .pinfig__win{ animation:pin-window linear none; animation-timeline:--pin;
      animation-range:cover 0% cover 100vh; }
    .pins .pintrack:not(.pintrack--last):not(.pintrack--b) .phone-frame__viewport{ animation:pin-fade linear forwards;
      animation-timeline:--pin; animation-range:cover 100vh cover 200vh; }
  }
}
@keyframes pin-window{
  from{ transform:translateY(-100vh); clip-path:inset(100vh 0 0 0); }
  to{ transform:none; clip-path:inset(0 0 0 0); }
}
@keyframes pin-fade{
  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:469.81; }
  .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){
  .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 (prefers-reduced-motion:no-preference){
    .pins--slide{ --slide-in:calc(100vh - var(--ptop) - var(--dy)); --x:calc(var(--slide-in) + 12vh + 30vh); }
    .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 .pinrow--over > .pintrack--ob{ grid-row:3; }
    .pins.pins--slide .pins__list .pintrack--ob .pinfig{ margin-top:calc(100vh - var(--dy) + 12vh); }
    .pins.pins--slide .pins__list .pintrack--ob .pinfig__win{ animation:none; }
    .pins.pins--slide .pins__list .pintrack--ob .phone-frame__viewport{ animation:none; }
    .pins.pins--slide .pins__list .pintrack--oa .phone-frame__viewport{ animation-range:cover calc(100vh + var(--x)) cover calc(200vh + var(--x)); }
    .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 "going-over" (round7/work/screens/going-over.html), its own CSS scoped under .nscr--going-over; the page carries the tokens (58 checked equal) and the status bar ---- */
.nscr--going-over{ position:relative; }
.nscr--going-over .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--going-over .nscr-band{ --band-bg:#1C403A; --band-edge:#294B44; } }
:root[data-theme="dark"] .nscr--going-over .nscr-band{ --band-bg:#1C403A; --band-edge:#294B44; }
.nscr--going-over .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--going-over :where(.scr) p{ margin:0; }
.nscr--going-over .app-date{ font:400 12.6px/normal var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.nscr--going-over .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--going-over .scr.over{ padding:60px 24px 30px; }
.nscr--going-over .over__body{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.nscr--going-over .over__h{ margin:9px 0 0; font:900 32.9px/1.1 var(--display); letter-spacing:-.03em; }
.nscr--going-over .over__sub{ margin:7px 0 0; font-size:15px; line-height:1.5; color:var(--muted); }
.nscr--going-over .over__cost{ margin-top:16px; background:var(--band-bg); border:1px solid var(--band-edge); border-radius:var(--r2); padding:16px 18px; color:var(--ink); }
.nscr--going-over .over__lab{ font:400 10.5px/normal var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.nscr--going-over .over__costrow{ display:flex; align-items:flex-end; gap:14px; }
.nscr--going-over .over__cell{ flex-grow:1; }
.nscr--going-over .over__v{ font:500 25.9px/1.1 var(--mono); font-variant-numeric:tabular-nums; }
.nscr--going-over .over__v--was{ color:var(--muted); text-decoration:line-through; }
.nscr--going-over .over__v--now{ color:var(--brand); }
.nscr--going-over .over__cap{ font-size:12px; color:var(--muted); margin-top:3px; }
.nscr--going-over .over__arrow{ flex:none; margin-bottom:18px; fill:none; stroke:var(--brand); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.nscr--going-over .over__sec{ margin-top:16px; margin-bottom:9px; font:400 11px/normal var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.nscr--going-over .over__opts{ display:flex; flex-direction:column; gap:8px; }
.nscr--going-over .opt{ display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r1); padding:12px 14px; min-height:44px; }
.nscr--going-over .opt--on{ background:var(--brand-soft); border:2px solid var(--brand-deep); padding:11px 13px; }
.nscr--going-over .radio{ width:19px; height:19px; border-radius:99px; border:2px solid var(--muted); flex:none; }
.nscr--going-over .opt--on .radio{ border:6px solid var(--brand-deep); }
.nscr--going-over .opt__txt{ flex-grow:1; min-width:0; }
.nscr--going-over .opt__n{ display:block; font-size:15px; font-weight:500; }
.nscr--going-over .opt--on .opt__n{ font-weight:700; }
.nscr--going-over .opt__s{ display:block; font:400 11px/normal var(--mono); color:var(--muted); margin-top:1px; font-variant-numeric:tabular-nums; }
.nscr--going-over .opt__v{ font:400 15px/normal var(--mono); font-variant-numeric:tabular-nums; color:var(--ink); }
.nscr--going-over .opt--on .opt__v{ font-weight:500; }
.nscr--going-over .pause{ margin-top:12px; background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--mint); border-radius:var(--r1); padding:12px 14px; }
.nscr--going-over .pause__lab{ display:flex; align-items:center; gap:11px; min-height:44px; }
.nscr--going-over .check{ width:19px; height:19px; border-radius:4px; border:2px solid var(--muted); flex:none; }
.nscr--going-over .pause__txt{ flex-grow:1; min-width:0; }
.nscr--going-over .pause__n{ display:block; font-size:14.5px; font-weight:500; }
.nscr--going-over .pause__s{ display:block; font:400 11px/normal var(--mono); color:var(--muted); margin-top:1px; font-variant-numeric:tabular-nums; }
.nscr--going-over .over__foot{ margin-top:auto; padding-top:12px; }
/* the button's caption, added by the founder's label ruling of 2 Oct (not in the approved prototype): set as P1's and the deposit's secondary line */
.nscr--going-over .over__note{ margin-top:8px; text-align:center; font:400 13px/1.4 var(--body); color:var(--muted); }
/* ---- 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 screen "P1-Payday" (round8/work/screens/p1-full.html), its own CSS scoped under .nscr--P1-Payday; the page carries the tokens (62 checked equal) and the status bar ---- */
.nscr--P1-Payday{ position:relative; }
.nscr--P1-Payday .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--P1-Payday :where(.scr) p{ margin:0; }
.nscr--P1-Payday .app-date{ font:400 12.6px/normal var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.nscr--P1-Payday .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--P1-Payday .scr.p1{ padding:64px 24px 34px; }
.nscr--P1-Payday .p1__body{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.nscr--P1-Payday .p1__h{ margin-top:10px; font:900 41.9px/1.05 var(--display); letter-spacing:-.035em; }
.nscr--P1-Payday .p1__sub{ margin-top:6px; font-size:15.5px; line-height:1.5; color:var(--muted); }
.nscr--P1-Payday .p1__done{ margin-top:20px; background:var(--mint-soft); border-radius:var(--r2); padding:14px 16px; }
.nscr--P1-Payday .p1__head{ display:flex; align-items:center; gap:8px; margin-bottom:9px; }
.nscr--P1-Payday .p1__tick{ flex:none; fill:none; stroke:var(--mint-text); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.nscr--P1-Payday .p1__lab{ font:400 11px/normal var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--mint-on-soft); font-variant-numeric:tabular-nums; }
.nscr--P1-Payday .p1__chips{ display:flex; flex-wrap:wrap; gap:6px; }
.nscr--P1-Payday .chip{ font:400 11.5px/normal var(--mono); font-variant-numeric:tabular-nums; background:var(--surface); color:var(--mint-text); border-radius:6px; padding:4px 8px; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .nscr--P1-Payday .chip{ background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--line); } }
:root[data-theme="dark"] .nscr--P1-Payday .chip{ background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--line); }
.nscr--P1-Payday .p1__left{ margin-top:16px; background:var(--brand-soft); border:1px solid var(--brand); border-radius:var(--r2); padding:16px 18px; }
.nscr--P1-Payday .p1__leftlab{ font:400 11px/normal var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--brand-on-soft); }
.nscr--P1-Payday .p1__leftv{ margin-top:2px; font:500 41.9px/1.1 var(--mono); letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums; }
.nscr--P1-Payday .p1__bar{ height:6.1px; border-radius:99px; background:var(--surface); overflow:hidden; margin-top:11px; }
.nscr--P1-Payday .p1__fill{ display:block; width:94%; height:100%; background:var(--brand); border-radius:99px; }
.nscr--P1-Payday .p1__nabs{ flex-shrink:0; margin-top:16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r2); overflow:hidden; }
.nscr--P1-Payday .nab{ display:flex; align-items:center; gap:11px; padding:12px 15px; border-bottom:1px solid var(--line); min-height:44px; color:var(--ink); }
.nscr--P1-Payday .nab:last-child{ border-bottom:0; }
.nscr--P1-Payday .nab__dot{ width:9.9px; height:9.9px; border-radius:99px; flex:none; }
.nscr--P1-Payday .nab__dot--groceries{ background:var(--butter); }
.nscr--P1-Payday .nab__dot--gas{ background:var(--sky); }
.nscr--P1-Payday .nab__dot--fun{ background:var(--grape); }
.nscr--P1-Payday .nab__dot--eatingOut{ background:var(--leaf); }
.nscr--P1-Payday .nab__dot--everythingElse{ background:var(--rose); }
.nscr--P1-Payday .nab__n{ flex-grow:1; font-size:15px; font-weight:500; }
.nscr--P1-Payday .nab__v{ font:400 15px/normal var(--mono); font-variant-numeric:tabular-nums; }
.nscr--P1-Payday .nab__chev{ flex:none; fill:none; stroke:var(--muted); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.nscr--P1-Payday .p1__foot{ margin-top:auto; padding-top:14px; }
.nscr--P1-Payday .p1__alt{ display:flex; align-items:center; justify-content:center; min-height:44px; padding:0 12px; color:var(--muted); font:400 14.5px/normal var(--body); }
/* ---- the screen "P4-Done" (round8/work/screens/p4-full.html), its own CSS scoped under .nscr--P4-Done; the page carries the tokens (62 checked equal) and the status bar ---- */
.nscr--P4-Done{ position:relative; }
.nscr--P4-Done .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--P4-Done :where(.scr) p{ margin:0; }
.nscr--P4-Done .app-date{ font:400 12.6px/normal var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.nscr--P4-Done .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--P4-Done .scr.p4{ padding:90px 24px 34px; }
.nscr--P4-Done .p4__top{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.nscr--P4-Done .p4__mark{ --mark-tile:var(--ink); --mark-flag:var(--pennant); display:block; flex:none; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .nscr--P4-Done .p4__mark{ --mark-tile:var(--pennant); --mark-flag:#FFFFFF; } }
:root[data-theme="dark"] .nscr--P4-Done .p4__mark{ --mark-tile:var(--pennant); --mark-flag:#FFFFFF; }
.nscr--P4-Done .p4__tile{ fill:var(--mark-tile); }
.nscr--P4-Done .p4__flag{ fill:var(--mark-flag); }
.nscr--P4-Done .p4__nice{ margin-top:18px; font-size:16px; color:var(--muted); }
.nscr--P4-Done .p4__card{ margin-top:34px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r2); padding:20px; text-align:center; }
.nscr--P4-Done .p4__lab{ font:400 11px/normal var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.nscr--P4-Done .p4__fig{ display:flex; align-items:baseline; justify-content:center; gap:2px; margin-top:4px; }
.nscr--P4-Done .p4__d{ font:500 41.9px/1.1 var(--mono); letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums; }
.nscr--P4-Done .p4__c{ font:500 20.4px/normal var(--mono); color:var(--muted); font-variant-numeric:tabular-nums; }
.nscr--P4-Done .p4__over{ margin-top:6px; font-size:14.5px; color:var(--muted); }
.nscr--P4-Done .p4__rule{ height:1px; background:var(--line); margin:16px 0; }
.nscr--P4-Done .p4__day{ display:flex; align-items:baseline; justify-content:center; gap:8px; }
.nscr--P4-Done .p4__aim{ font:500 25.9px/normal var(--mono); color:var(--mint-text); font-variant-numeric:tabular-nums; }
.nscr--P4-Done .p4__per{ font-size:14.5px; color:var(--muted); }
.nscr--P4-Done .p4__now{ margin-top:16px; background:var(--mint-soft); border-radius:var(--r2); padding:16px 18px; }
.nscr--P4-Done .p4__nowt{ font:700 16px/normal var(--display); color:var(--mint-on-soft); margin-bottom:7px; }
.nscr--P4-Done .p4__nowl{ display:flex; flex-direction:column; gap:6px; font-size:14px; line-height:1.5; color:var(--ink); }
.nscr--P4-Done .p4__em{ margin-top:16px; background:var(--butter-soft); border-radius:var(--r2); padding:16px 18px; }
.nscr--P4-Done .p4__emh{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:5px; }
.nscr--P4-Done .p4__emn{ font:700 16px/normal var(--display); }
.nscr--P4-Done .p4__emv{ font:400 15px/normal var(--mono); font-variant-numeric:tabular-nums; }
.nscr--P4-Done .p4__bar{ height:6.1px; border-radius:99px; background:var(--surface); overflow:hidden; margin:8px 0 7px; }
.nscr--P4-Done .p4__fill{ display:block; width:16%; height:100%; background:var(--butter); border-radius:99px; }
.nscr--P4-Done .p4__emp{ font-size:13.5px; line-height:1.5; color:var(--ink); }
.nscr--P4-Done .p4__foot{ margin-top:auto; padding-top:16px; }

/* ---- 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); }
/* The waitlist form (stage "waitlist"; spec §3.3, §3.16, §3.18). The field, the fused bar, the button and the
   success state are the approved A5/M1b hero's own rules, from the round 10 prototype's stylesheet (they were dropped
   from site.css only because the launch page had no form). The under-form line and the error states are added here,
   as specced. The form is email-only (founder, 16 Oct): step 2's rules are gone with it. */
.wl{ margin-top:var(--s3); }
.wl__label{ display:block; font-size:var(--fs-body); line-height:1.6; margin-bottom:var(--s1); }
.wl__bar{ display:flex; height:52px; }
.wl__input{ flex:1 1 auto; min-width:0; width:100%; height:100%; margin:0; padding:0 12px;
  background:var(--surface); color:var(--ink); font:400 16px/1.2 var(--body);
  border:0; border-top:1px solid var(--line); border-left:1px solid var(--line); border-bottom:2px solid var(--ink);
  border-radius:var(--r1) 0 0 var(--r1); appearance:none; -webkit-appearance:none; }
.wl__input::placeholder{ color:var(--muted); opacity:1; }
.wl__input[aria-invalid="true"]{ border-bottom-color:var(--danger); }
.btn{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 var(--s3);
  border:0; border-radius:var(--r1); background:var(--brand-deep); color:var(--on-brand);
  font:700 var(--fs-body)/1 var(--display); letter-spacing:-.005em; text-decoration:none; white-space:nowrap; cursor:pointer; }
.btn:hover{ text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:.22em; }
.wl__btn{ flex:none; height:100%; border-radius:0 var(--r1) var(--r1) 0; }
.wl__msg{ margin-top:var(--s1); color:var(--danger); }
.wl-done{ animation:wl-in 200ms ease-out; }
.wl-done__h{ font:700 var(--fs-lead)/1.25 var(--display); letter-spacing:-.02em; }
.wl-done__body{ margin-top:var(--s1); }
@keyframes wl-in{ from{ opacity:0; } }
@media (prefers-reduced-motion:reduce){ .wl-done{ animation:none; } }
@media (max-width:359px), (min-width:1080px){
  .wl__bar{ flex-direction:column; height:auto; gap:var(--s2); }
  .wl__input{ height:52px; flex:none; border-right:1px solid var(--line); border-radius:var(--r1); }
  .wl__btn{ height:52px; width:100%; border-radius:var(--r1); }
}
@media (min-width:1080px){ .wl__btn{ width:auto; align-self:flex-start; } }
@media (min-width:760px) and (max-width:1079px){
  .wl__bar{ height:57.9px; }
  .wl__btn{ font-size:var(--fs-lead); padding:0 var(--s4); }
}
@media (min-width:1080px){
  .hero__join .wl{ margin-top:var(--s2); }
}

/* the line under the form, and its in-sentence link reaching 44px (spec §6.9) */
.wl__under{ margin-top:var(--s2); max-width:var(--measure); color:var(--muted); line-height:1.5; text-wrap:pretty; }
.wl__under a{ display:inline-block; padding-block:10px; margin-block:-10px; }
.hero__join .wl__under{ font-size:var(--fs-body); }
/* the honeypot: visually hidden, never focusable, never announced */
.wl__trap{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.wl-done:focus{ outline:none; }
.wl-done:focus-visible{ outline:2.5px solid var(--brand-deep); outline-offset:2px; }
/* 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; }