/* Pocketly components v2: the original site's identity (ADR-011) on the server-rendered app.
   Class names are shared by every screen; tokens live in tokens.css. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  color: var(--color-text); font: 400 var(--text-md)/var(--lead-body) var(--font-text); font-feature-settings: "cv11" 1; font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  /* Full-bleed layers (header material, bands) use 100vw, which on Windows includes the scrollbar: clip, so the page never
     scrolls sideways (owner screenshots, 1 Nov 2026). `clip` (not `hidden`) keeps the sticky header working. */
  overflow-x: clip;
  /* Cycle 112 (V0.30): app and reading pages are plain; the texture is for the landing and message pages. */
  background: var(--color-bg);
}
/* The canvas: a quiet blueprint grid and two glows — computation, quietly. */
body.is-landing, body:has(main .msg-card) {
  background:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--color-engine) 2%, transparent) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--color-plan) 1.6%, transparent) 0 1px, transparent 1px 44px),
    radial-gradient(1200px 600px at 80% -10%, color-mix(in srgb, var(--color-plan) 9%, transparent) 0%, transparent 60%),
    radial-gradient(900px 480px at -10% 12%, color-mix(in srgb, var(--color-engine) 5%, transparent), transparent 55%),
    var(--color-bg);
}
a { color: var(--color-plan); text-underline-offset: 3px; }
/* Cycle 110 (V0.4): tabular figures only where numbers are read against each other: amounts, tables, facts, dates and counts.
   On running text they widened hyphens and spaced "1" out ("sign - in"). */
:is(td, .kv dd, dd strong, .hero, .total, .offer-amount, .rt-amt, .jr-amt, .also-amt, .nw-big, .mc-ans-v, .pc-v, .ag-dn, .badge, time, .num, .amt, .stat) { font-variant-numeric: tabular-nums; }
a:hover { text-decoration-thickness: 2px; }
/* `hidden` always wins over a component's display (cycle 36: the empty "Change" box showed before any bank was chosen). */
[hidden] { display: none !important; }
/* Cycle 93: passkey buttons show only where passkeys work, decided before the first paint (motion.js sets html.pk). */
html:not(.pk) [data-passkey], html.pk [data-passkey-none] { display: none !important; }
/* Cycle 98: a chosen bank arrives folded; where no script runs (motion.js sets html.early), the whole grid shows and "Change" doesn't. */
html:not(.early) .bank-pick.is-folded .bank-grid { display: grid; } html:not(.early) .bank-pick.is-folded .bank-more { display: block; }
html:not(.early) .bank-chosen { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; } .skip:focus { position: fixed; z-index: 60; left: 8px; top: 8px; background: var(--color-surface-2); color: var(--color-text); padding: var(--space-2) var(--space-3); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-xs); }
main:focus { outline: none; }
/* Headings receive programmatic focus on view change (for screen readers); they are not controls. */
h1[tabindex="-1"]:focus { outline: none; }

/* ---------- chrome ---------- */
.top { max-width: var(--wide); margin: 0 auto; display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; padding-block: var(--space-4); position: relative; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--color-text); text-decoration: none; font: 700 var(--text-xl)/1 var(--font-display); letter-spacing: var(--track-headline); min-height: var(--target-min); }
.brand svg { flex: none; }
.brand .dot { color: var(--color-plan); }
.top nav { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); align-items: center; }
.top nav a { color: var(--color-text-muted); text-decoration: none; font-weight: 550; font-size: var(--text-sm); letter-spacing: -.003em; padding: 10px 2px; }
.top nav a[aria-current="page"] { color: var(--color-text); text-decoration: underline; }
@media (hover: hover) and (pointer: fine) { .top nav a:hover { color: var(--color-text); text-decoration: underline; } }
.top-tools { margin-left: auto; display: flex; gap: var(--space-3); align-items: center; font-size: var(--text-sm); }
.nav-cta { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-pill); border: 0; background: color-mix(in srgb, var(--color-plan) 14%, transparent); color: var(--color-plan); font-weight: 650; text-decoration: none; }
.clock { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: .04em; }
/* Cycle 112 (V1.14): the test clock (development only) is a ribbon in a corner, so screens match production's layout. */
.clock-ribbon { position: fixed; left: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 60; padding: var(--space-1) 10px; border-radius: var(--radius-pill); background: var(--color-surface-2); box-shadow: var(--shadow-1); color: var(--color-text); pointer-events: none; }
body.has-tabbar .clock-ribbon { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
.foot { margin-top: var(--space-8); background: var(--color-bg-deep); margin-left: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px))); padding: var(--space-7) max(16px, env(safe-area-inset-right, 0px)) var(--space-6) max(16px, env(safe-area-inset-left, 0px)); border-top: 1px solid var(--hairline); }
.foot-inner { max-width: var(--wide); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-6); }
.foot h2 { font: 600 var(--text-sm)/1.4 var(--font-text); color: var(--color-text-muted); margin: 0 0 var(--space-3); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.foot a { color: var(--color-text); text-decoration: none; } .foot a:hover { text-decoration: underline; }
.foot p { color: var(--color-text-muted); font-size: var(--text-sm); margin: var(--space-3) 0 0; max-width: 34rem; }
.foot-base { max-width: var(--wide); margin: var(--space-6) auto 0; padding-top: var(--space-4); border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); font: 400 var(--text-xs)/var(--lead-caption) var(--font-text); color: var(--color-text-muted); letter-spacing: var(--track-caption); }

/* ---------- type ---------- */
.muted { color: var(--color-text-muted); }
.wrap { max-width: var(--measure); margin: 0 auto; padding-block: var(--space-6) var(--space-7); }
/* Labels above headings: sentence case, the text face, one weight up (uppercase mono is kept for dates and clause references). */
.eyebrow { display: flex; align-items: center; gap: var(--space-2); font: 600 var(--text-sm)/1.4 var(--font-text); letter-spacing: var(--track-caption); color: var(--color-engine); margin: 0 0 var(--space-2); }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
h1, h2, h3 { text-wrap: balance; }
/* Cycle 110 (V0.3): Fraunces titles at 28–40 px read cramped at display tracking; open the word gaps a little. */
h1, h2, .q { word-spacing: .04em; }
h1 { font: 700 var(--text-3xl)/var(--lead-title) var(--font-display); letter-spacing: var(--track-title); margin: 0 0 var(--space-3); font-variation-settings: "opsz" 96; }
h2 { font: 600 var(--text-xl)/var(--lead-headline) var(--font-display); letter-spacing: var(--track-headline); margin: 0 0 var(--space-3); font-variation-settings: "opsz" 48; }
h3 { font: 650 var(--text-lg)/1.3 var(--font-text); letter-spacing: -.006em; margin: var(--space-4) 0 var(--space-2); }
p { text-wrap: pretty; }
.hero { font: 700 var(--text-hero)/1 var(--font-display); letter-spacing: var(--track-display); font-variation-settings: "opsz" 144; margin: var(--space-4) 0 var(--space-2); color: var(--color-money); font-variant-numeric: tabular-nums; }
.hero small { font: 500 var(--text-sm)/1 var(--font-text); color: var(--color-text-muted); margin-left: var(--space-3); letter-spacing: 0; }
.lede { color: var(--color-text-muted); font-size: var(--text-lg); line-height: 1.55; letter-spacing: -.004em; margin: 0 0 var(--space-5); max-width: 62ch; }
.mono { font-family: var(--font-mono); font-size: var(--text-xs); overflow-wrap: anywhere; letter-spacing: .02em; }

/* ---------- surfaces ---------- */
.card { background: var(--color-surface-1); border: 1px solid var(--hairline); border-radius: var(--radius-xl); padding: var(--space-5); margin: var(--space-4) 0; box-shadow: var(--shadow-1); }
.card > h2:first-child { margin-top: 0; }
.card.attention { border-color: color-mix(in srgb, var(--color-attention) 45%, transparent); box-shadow: inset 4px 0 0 var(--color-attention), var(--shadow-1); }
.card.problem { border-color: color-mix(in srgb, var(--color-problem) 60%, transparent); box-shadow: inset 4px 0 0 var(--color-problem); }
.notice { border: 1px solid var(--hairline); background: color-mix(in srgb, var(--color-attention) 7%, var(--color-surface-1)); box-shadow: inset 4px 0 0 var(--color-attention), var(--shadow-1); padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5); border-radius: var(--radius-md); margin: var(--space-4) 0; }
/* Cycle 129 (W1.1): a confirmation is done, not a warning (it read amber without script and in the catalogue). */
.notice.flash { background: color-mix(in srgb, var(--color-done) 7%, var(--color-surface-1)); box-shadow: inset 4px 0 0 var(--color-done), var(--shadow-1); }

/* ---------- controls ---------- */
.row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-4); }
button, .btn { font: 600 var(--text-md)/1 var(--font-text); letter-spacing: -.005em; min-height: var(--target-min); padding: 0 var(--space-5); border-radius: var(--radius-md); border: 1px solid var(--hairline); background: var(--fill); color: var(--color-text); cursor: pointer; transition: background var(--motion-fast), transform var(--motion-fast) var(--ease-settle), box-shadow var(--motion-fast); }
@media (hover: hover) and (pointer: fine) { button:hover, .btn:hover { background: var(--fill-strong); } }
/* Cycle 112 (V0.20): the primary action is one fixed height everywhere. */
button.primary, .btn.primary { min-height: 48px; background: var(--color-accent); color: var(--color-on-accent); border-color: transparent; box-shadow: var(--edge-light), 0 8px 22px -12px color-mix(in srgb, var(--color-accent) 75%, transparent); }
@media (hover: hover) and (pointer: fine) { button.primary:hover, .btn.primary:hover { background: var(--color-accent); } }
button.link { background: none; border: 0; padding: 0 var(--space-2); min-height: 40px; color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; font-size: var(--text-sm); }
@media (hover: hover) and (pointer: fine) { button.link:hover { color: var(--color-text); background: none; } }
button:disabled { opacity: .55; cursor: not-allowed; }
a.btn { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; }
.arrow { display: inline-block; transition: transform var(--motion-fast) var(--ease-settle); }
@media (hover: hover) and (pointer: fine) { .btn:hover .arrow { transform: translateX(3px); } }

/* ---------- lists, conditions, timeline ---------- */
.conds, .steps, .plain { list-style: none; margin: 0; padding: 0; }
.conds li { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--hairline); }
.conds li:first-child { border-top: 0; }
.chip { font: 500 var(--text-xs)/1.4 var(--font-mono); color: var(--color-text-muted); border: 1px solid var(--color-border-strong); border-radius: var(--radius-chip); padding: 2px 7px; white-space: normal; max-width: 16rem; height: fit-content; letter-spacing: .02em; }
.steps li { display: grid; grid-template-columns: 10rem 1fr; gap: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--hairline); }
.steps li:first-child { border-top: 0; }
.when { color: var(--color-plan); font: 500 var(--text-sm)/1.5 var(--font-mono); letter-spacing: .02em; }
.who { font: 600 var(--text-xs)/1.4 var(--font-text); color: var(--color-engine); }
.kv { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-4); margin: 0; }
.kv dt { color: var(--color-text-muted); } .kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.kv .total { border-top: 1px solid var(--hairline); padding-top: var(--space-2); font-weight: 700; color: var(--color-text); }
.kv dd.total { color: var(--color-money); }
details { border-top: 1px solid var(--hairline); }
.row + details, .card + details { margin-top: var(--space-5); }
details > summary { cursor: pointer; min-height: var(--target-min); display: flex; align-items: center; gap: var(--space-2); font-weight: 650; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "+"; font: 500 var(--text-lg)/1 var(--font-mono); color: var(--color-plan); width: 1.25rem; }
details[open] > summary::before { content: "−"; }
details[open] > summary { margin-bottom: var(--space-3); }
.q { font: 600 var(--text-2xl)/1.25 var(--font-display); letter-spacing: -.01em; margin: 0 0 var(--space-3); }

/* ---------- forms ---------- */
fieldset { border: 0; padding: 0; margin: 0 0 var(--space-4); }
legend { font-weight: 650; margin-bottom: var(--space-2); }
label { display: block; font-weight: 600; margin: var(--space-3) 0 var(--space-1); }
input[type="number"], input[type="date"], input[type="email"], input[type="text"], input:not([type]), select, textarea { font: inherit; color: var(--color-text); background: var(--field); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); min-height: var(--target-min); padding: 0 var(--space-3); width: 100%; max-width: 20rem; }
textarea { padding: var(--space-2) var(--space-3); max-width: none; }
.radio { display: flex; gap: var(--space-3); align-items: center; min-height: var(--target-min); font-weight: 450; margin: 0; }
/* Drawn radios and checkboxes (cycle 110, V0.10–V0.11): no browser-default control shows anywhere. A 22 px ring on the
   field colour; chosen fills with the accent and shows a dark dot or tick, as the primary button does. Specificity stays at
   zero (:where), so the iOS switch, the bank tiles and the segmented control keep their own drawings. */
:where(input:is([type="radio"], [type="checkbox"]):not(.set-switch input, .seg-opts input, .bank-tile input)) {
  appearance: none; -webkit-appearance: none; flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; margin: 0;
  border: 2px solid var(--color-border-strong); background: var(--field); vertical-align: -5px; cursor: pointer; }
:where(input[type="radio"]:not(.set-switch input, .seg-opts input, .bank-tile input)) { border-radius: 50%; }
:where(input[type="checkbox"]:not(.set-switch input, .seg-opts input, .bank-tile input)) { border-radius: var(--radius-chip); }
:where(input[type="radio"]:not(.set-switch input, .seg-opts input, .bank-tile input))::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-on-accent); transform: scale(0); }
:where(input[type="checkbox"]:not(.set-switch input, .seg-opts input, .bank-tile input))::after { content: ""; width: 6px; height: 11px; margin-top: -2px; border: solid var(--color-on-accent); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); }
:where(input:is([type="radio"], [type="checkbox"]):checked:not(.set-switch input, .seg-opts input, .bank-tile input)) { background: var(--color-accent); border-color: var(--color-accent); }
:where(input[type="radio"]:checked:not(.set-switch input, .seg-opts input, .bank-tile input))::after { transform: scale(1); }
:where(input[type="checkbox"]:checked:not(.set-switch input, .seg-opts input, .bank-tile input))::after { transform: rotate(45deg) scale(1); }
:where(input:is([type="radio"], [type="checkbox"]):disabled) { opacity: .45; cursor: not-allowed; }
@media (prefers-reduced-motion: no-preference) { :where(input:is([type="radio"], [type="checkbox"]):not(.set-switch input, .seg-opts input, .bank-tile input))::after { transition: transform .16s var(--ease-settle); } }
@media (forced-colors: active) { :where(input:is([type="radio"], [type="checkbox"]):not(.set-switch input, .seg-opts input, .bank-tile input)) { appearance: auto; -webkit-appearance: auto; } :where(input:is([type="radio"], [type="checkbox"]))::after { content: none; } }
.hint { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0 0 var(--space-2); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-5); }
.grid2.align-end { align-items: stretch; }
.grid2.align-end > div { display: flex; flex-direction: column; }
.grid2.align-end .money-field { margin-top: auto; }
.form-stack fieldset + fieldset { border-top: 1px solid var(--hairline); padding-top: var(--space-4); }

.money-field { position: relative; max-width: 20rem; }
.money-field span { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; }
.money-field input { padding-left: calc(var(--space-3) + 1.1em); }

/* ---------- tables and misc ---------- */
.diff { display: flex; gap: var(--space-3); align-items: baseline; font: 600 var(--text-2xl) var(--font-display); }
.diff s { color: var(--color-text-muted); font-weight: 500; }
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th, td { text-align: left; padding: var(--space-2); border-bottom: 1px solid var(--hairline); vertical-align: top; }
th { color: var(--color-text-muted); font: 600 var(--text-xs)/1.4 var(--font-text); letter-spacing: var(--track-caption); }
.table-scroll { overflow-x: auto; }
.proto { max-width: var(--measure); margin: 0 auto var(--space-7); padding: var(--space-4); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); }
.proto h2 { font: 650 var(--text-sm) var(--font-text); margin: 0; }
.proto-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: end; margin-top: var(--space-3); }
.proto-row label { margin: 0; font-size: var(--text-sm); }

textarea.letter { width: 100%; min-height: 22rem; line-height: 1.5; }
input.letter-subject { max-width: none; }
/* utilities (inline style attributes are blocked by the CSP) */
.gap-b { margin-bottom: var(--space-3); } .gap-t { margin-top: var(--space-3); } 
.field-email { max-width: 28rem; width: 100%; } .wrap.flush { padding-block: 0; }
.top-tools form { display: inline; } .row form { display: inline-flex; }
.wrap.wide { max-width: var(--wide); } .field-wide { width: 100%; max-width: none; } .pre-wrap { white-space: pre-wrap; word-break: break-word; }

@media (max-width: 760px) {
  .wrap { padding-block: var(--space-5) var(--space-6); }
  h1 { font-size: var(--text-fig-m); } .hero { font-size: var(--text-display-m); }
  .steps li { grid-template-columns: 1fr; gap: 2px; }
  .grid2 { grid-template-columns: 1fr; }
  .top-tools { margin-left: 0; width: 100%; justify-content: space-between; }
  .card { padding: var(--space-4); }
  .row > button, .row > a.btn, .row > form, .row > form > button { flex: 1 1 100%; justify-content: center; }
  .foot-inner { grid-template-columns: 1fr 1fr; }
  .foot-inner > div:first-child { grid-column: 1 / -1; } /* the description reads at full width on phones */
  .conds li { grid-template-columns: 1fr; }
}
.diff-lines li { padding: 2px 6px; border-radius: var(--radius-xs); margin-bottom: 2px; overflow-wrap: anywhere; }
.diff-lines .add { background: color-mix(in srgb, var(--color-done) 12%, transparent); }
.diff-lines .del { background: color-mix(in srgb, var(--color-problem) 12%, transparent); text-decoration: line-through; }

/* ---------- cycle 8: states, progress ---------- */
/* One status chip (cycle 113, V0.17): tone by colour and icon, then the word. Replaces .pill and .status. */
.st { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 7px; border-radius: var(--radius-pill); font: 600 var(--text-xs)/1.35 var(--font-text); letter-spacing: .005em; color: var(--tone); background: color-mix(in srgb, var(--tone) 13%, transparent); vertical-align: 1px; white-space: nowrap; }
/* Cycle 128: placeholders in the muted ink (the browser's grey was 3.7:1 on white). */
::placeholder { color: var(--color-text-muted); opacity: 1; }
.st svg { flex: none; }
/* Cycle 128: on light pages a chip's tint sits on the page, not a card; its words take a fifth of the ink so every tone keeps 4.5:1. */
:root[data-theme="light"] .st { color: color-mix(in srgb, var(--tone) 80%, var(--color-text)); }
p.st { margin: 0 0 var(--space-2); }
.st-do { --tone: var(--color-accent-text); } .st-wait { --tone: var(--color-plan); } .st-late { --tone: var(--color-attention); }
.st-done { --tone: var(--color-done); } .st-problem { --tone: var(--color-problem); } .st-neutral { --tone: var(--color-text-muted); background: var(--fill); }
.row-between { display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; align-items: baseline; }
svg.bar { display: block; width: 100%; height: 6px; margin-top: var(--space-1); }
svg.bar .bar-bg { fill: var(--color-border-strong); opacity: .45; } svg.bar .bar-fg { fill: var(--color-done); }

/* ---------- cycle 8: navigation (wide nav on desktop; menu + bottom tab bar on phones) ---------- */
.nav-narrow { display: none; }
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-on-accent); font: 700 var(--text-xs)/1 var(--font-text); vertical-align: 1px; }
.menu { position: relative; }
/* Cycle 112 (V1.4, V1.5): the phone menu is one round 44 px button (three lines signed out; a person signed in, where
   it holds help and settings), so the wordmark fits beside the header's own button. */
.menu > summary { list-style: none; cursor: pointer; width: var(--target-min); height: var(--target-min); display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--hairline); background: var(--fill); border-radius: 50%; color: var(--color-text); }
@media (prefers-reduced-motion: no-preference) { .menu > summary { transition: transform var(--motion-fast) var(--ease-settle), background var(--motion-fast); } .menu > summary:active { transform: scale(.94); } }
.menu[open] > summary { background: var(--fill-strong); }
.menu > summary::-webkit-details-marker { display: none; }
details.menu > summary::before, details.menu[open] > summary::before { content: none; display: none; }
/* Cycle 112 (V1.15): the generic details rule drew a 1 px line over the phone menu button. */
details.menu { border-top: 0; } details.menu[open] > summary { margin-bottom: 0; }
/* The menu grows out of its button (top right), on a material that keeps the page visible behind it. */
.menu-panel { position: absolute; right: 0; top: calc(100% + 8px); width: min(20rem, calc(100vw - 2rem)); z-index: 40; transform-origin: top right;
  background: color-mix(in srgb, var(--color-surface-1) 88%, transparent); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid var(--hairline-strong); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-4) var(--space-3); box-shadow: var(--shadow-pop); display: grid; gap: var(--space-2); }
.menu-panel nav { display: grid; }
.menu-panel nav a { color: var(--color-text); text-decoration: none; font-weight: 550; padding: var(--space-3) 0; border-bottom: 1px solid var(--hairline); }
.menu-panel nav a[aria-current="page"] { color: var(--color-plan); font-weight: 650; }
.menu-tools { display: flex; gap: var(--space-4); align-items: center; min-height: var(--target-min); }
/* Cycle 112 (V1.3): returning people sign in from every page: a quiet text link beside the header's button on laptops. */
.nav-signin { display: inline-flex; align-items: center; min-height: var(--target-min); padding: 0 var(--space-2); color: var(--color-text); font-weight: 600; text-decoration: none; }
.nav-signin:hover { text-decoration: underline; }
/* Cycle 112 (V1.8): signed in, the footer is one row of links and the disclaimer; the full footer is for visitors. */
.foot-compact { margin-top: var(--space-7); padding-top: var(--space-5); padding-bottom: var(--space-5); }
.foot-row { max-width: var(--wide); margin: 0 auto; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: var(--text-sm); }
.foot-compact .foot-base { margin-top: var(--space-4); }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: none; grid-template-columns: repeat(3, 1fr); background: var(--material); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); border-top: 1px solid var(--hairline); padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
.tabbar a { display: flex; align-items: center; justify-content: center; min-height: 56px; color: var(--color-text-muted); font-weight: 600; text-decoration: none; }
.tabbar a[aria-current="page"] { color: var(--color-plan); font-weight: 700; }
@media (max-width: 760px) {
  .nav-wide, .top .nav-wide, .top .top-tools.nav-wide { display: none; }
  .nav-narrow { display: block; }
  .top { flex-wrap: nowrap; gap: var(--space-3); padding-block: var(--space-3); }
  .top .menu { margin-left: auto; }
  .top .nav-cta.nav-narrow { display: inline-flex; margin-left: auto; }
  .top .nav-cta.nav-narrow + .menu { margin-left: 0; }
  .tabbar.nav-narrow { display: grid; }
  body.has-tabbar { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}
.print-only { display: none; }
details.more-conds { border-top: 1px solid var(--hairline); margin-top: 0; }
details.more-conds > summary { padding: var(--space-3) 0; font-weight: 650; }
@media (max-width: 760px) {
  .conds .chip { border: 0; background: none; padding: 0; color: var(--color-text-muted); font-size: var(--text-xs); justify-self: start; }
}
@media print { details.more-conds > :not(summary) { display: block; } }

/* ---------- cycle 8: journey stepper ---------- */
.stepper { margin: 0 0 var(--space-4); }
.stepper ol { list-style: none; display: flex; gap: var(--space-2); margin: 0; padding: 0; counter-reset: step; flex-wrap: wrap; }
.stepper li { counter-increment: step; display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.stepper li::before { content: counter(step); display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--fill-strong); color: var(--color-text); font: 600 var(--text-xs)/1 var(--font-text); }
.stepper li + li::after { content: none; }
.stepper li:not(:last-child) { padding-right: var(--space-2); border-right: 1px solid var(--color-border); }
.stepper li.done::before { content: "✓"; background: color-mix(in srgb, var(--color-done) 15%, transparent); color: var(--color-done); }
.stepper li.current { color: var(--color-text); font-weight: 650; }
.stepper li.current::before { background: var(--color-accent); color: var(--color-on-accent); }
.stepper a { color: inherit; }
.stepper-compact { display: none; margin: 0; font: 600 var(--text-xs)/1.4 var(--font-text); color: var(--color-text-muted); }
@media (max-width: 760px) { .stepper ol { display: none; } .stepper-compact { display: block; } }

/* ---------- cycle 9 ---------- */
.reason-group { padding: var(--space-3) 0; border-top: 1px solid var(--hairline); }
.reason-group:first-of-type { border-top: 0; }
.reason-group .reason { font-weight: 650; margin: 0 0 var(--space-1); }
.reason-group .muted { margin: 0; }

.offer-amount { font: 700 var(--text-3xl)/1.1 var(--font-display); color: var(--color-money); margin: 0 0 var(--space-3); }
.offer-amount small { display: block; font: 500 var(--text-sm)/1.4 var(--font-text); color: var(--color-text-muted); margin-top: var(--space-1); }

.filters .row { align-items: end; gap: var(--space-4); }
.filters select { max-width: 14rem; }
.filters .checks { margin: 0; display: flex; gap: var(--space-4); flex-wrap: wrap; }

details.explain { display: inline; margin-left: 6px; }
details.explain > summary { display: inline-flex; align-items: center; min-height: 24px; padding: 0 2px; list-style: none; cursor: pointer; font-size: var(--text-sm); font-weight: 600; color: var(--color-plan); text-decoration: underline; text-underline-offset: 3px; }
details.explain > summary::-webkit-details-marker { display: none; }
details.explain > summary::before, details.explain[open] > summary::before { content: none; display: none; }
details.explain .explain-body { display: block; margin: var(--space-2) 0; padding: var(--space-2) var(--space-3); border-left: 3px solid var(--color-plan); background: var(--color-surface-2); font-size: var(--text-sm); font-weight: 400; color: var(--color-text); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
label + details.explain { display: block; margin: -2px 0 6px; }
.rel { font: 500 var(--text-xs)/1.4 var(--font-text); color: var(--color-text-muted); }
button.is-busy { opacity: .75; cursor: progress; }
.cond-note { display: block; }
@media (max-width: 760px) { .top .nav-cta.nav-narrow { white-space: nowrap; padding: 0 var(--space-3); font-size: var(--text-sm); } }
@media (max-width: 360px) { .top .brand > span { display: none; } }
/* Signed out on a phone: logo mark + "Build my plan" + Menu (the wordmark would push Menu off-screen). */
@media (max-width: 440px) { .top .nav-cta.nav-narrow svg { display: none; } }
@media (max-width: 374px) { .top:has(.nav-cta.nav-narrow) .brand > span { display: none; } }

/* ---------- cycle 10: density pass. Three-area screens (head, rail, main); sections, not cards ---------- */
.screen { max-width: var(--wide); margin: 0 auto; padding-block: var(--space-5) var(--space-7); display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); grid-template-areas: "head rail" "main rail"; gap: 0 var(--space-7); align-items: start; }
.screen-head { grid-area: head; min-width: 0; }
.screen-main { grid-area: main; min-width: 0; }
.screen-rail { grid-area: rail; position: sticky; top: var(--space-4); min-width: 0; }
.screen-head h1 { margin-bottom: var(--space-2); }
.screen-head .lede { margin-bottom: var(--space-3); }
.rail-card { background: var(--color-surface-1); border: 1px solid var(--hairline-strong); border-radius: var(--radius-xl); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-2); }
.screen-rail > .card { margin: 0; }
.screen-rail .hero { font-size: var(--text-display-m); margin: 0 0 var(--space-2); }
.screen-rail .hero small { display: block; margin: 6px 0 0; }
.rail-h { font: 650 var(--text-md)/1.3 var(--font-text); margin: var(--space-4) 0 var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--hairline); }
.rail-actions { display: grid; gap: var(--space-2); margin: var(--space-3) 0 0; }
.rail-actions .btn { justify-content: center; }
.pays { margin: 0 0 var(--space-2); } .pays li { padding: 2px 0; }
.small { font-size: var(--text-sm); }
.kv.compact { font-size: var(--text-sm); } .kv.compact dt { color: var(--color-text-muted); }
.sec { padding: var(--space-5) 0; border-top: 1px solid var(--hairline); }
.sec:first-child { border-top: 0; padding-top: var(--space-2); }
.sec > h2:first-child { margin-top: 0; }
.details-all { margin-top: var(--space-4); }
@media (max-width: 999px) {
  .screen { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "rail" "main"; max-width: var(--measure); padding-block: var(--space-4) var(--space-6); }
  .screen-rail { position: static; margin: var(--space-2) 0 var(--space-3); }
}

.kv.compact { grid-template-columns: 1fr; gap: 2px; }
.kv.compact dt { font-size: var(--text-xs); margin-top: var(--space-2); }
.kv.compact dd { text-align: left; }
/* Clause references: a quiet line under the condition, not a box beside it (cycle 10). */
.conds li { grid-template-columns: 1fr; gap: 2px; }
.conds .chip { border: 0; background: none; padding: 0; max-width: none; color: var(--color-text-muted); font: 400 var(--text-xs)/1.4 var(--font-mono); letter-spacing: 0; justify-self: start; }
.screen-main > .sec:first-child { padding-top: var(--space-4); }

.ticks li { position: relative; padding: var(--space-2) 0 var(--space-2) 1.6rem; border-top: 1px solid var(--hairline); }
.ticks li:first-child { border-top: 0; }
/* Cycle 113 (V0.19): bullets mean lists, arrows mean links: a 6 px muted dot, never an arrow. */
.ticks li::before { content: ""; position: absolute; left: 4px; top: calc(var(--space-2) + .8em - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--color-text-muted); }
.rail-actions form { display: grid; } .rail-actions form button { width: 100%; justify-content: center; }
.rail-h.first { margin-top: 0; padding-top: 0; border-top: 0; }

/* Cycle 12: every open question on one page */
.q-group { display: grid; gap: 0; }
.q-group h2 { margin: 0 0 var(--space-1); }
.q-group > .hint { margin: 0 0 var(--space-2); }
.form-stack .qrow, .qrow { border: 0; margin: 0; padding: var(--space-3) 0; min-width: 0; box-shadow: inset 0 1px 0 var(--color-border); }
.q-group > h2 + .qrow, .q-group > .hint + .qrow { box-shadow: none; }
.qrow legend { font-weight: 600; padding: 0; margin: 0 0 var(--space-2); max-width: 62ch; float: left; width: 100%; }
.qbody { clear: both; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.qbody .hint { margin: 0; flex: 1 1 16rem; }
.choices { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.choice { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--target-min); padding: 0 var(--space-4); border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); cursor: pointer; font-weight: 500; }
.choice input { margin: 0; width: 24px; height: 24px; accent-color: var(--color-accent); }
.choice:has(input:checked) { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 14%, transparent); }
.choice:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
#questions details.card > summary { font-weight: 600; cursor: pointer; min-height: 24px; }
details.more { border-top: 1px solid var(--hairline); padding-top: var(--space-3); margin-top: var(--space-3); }
details.more > summary { cursor: pointer; font-weight: 600; color: var(--color-link, var(--color-plan)); min-height: 24px; }
details.more[open] > summary { margin-bottom: var(--space-3); }
@media (max-width: 480px) {
  .q-group.card { padding-inline: var(--space-3); }
  .choices { width: 100%; display: grid; grid-template-columns: 1fr 1fr 1.6fr; }
  .choice { padding: 0 var(--space-2); justify-content: center; gap: 6px; }
}
@media (max-width: 340px) { .choices { grid-template-columns: 1fr 1fr; } .choice:last-child { grid-column: 1 / -1; } }

/* Cycle 17: the terms' own words where you act on a step */
.clause { font: 400 var(--text-xs)/1.5 var(--font-mono); color: var(--color-text-muted); max-width: 65ch; margin: 0 0 var(--space-3); }

/* Cycle 18: offer summaries derived from the terms */
.quick { margin: 0 0 var(--space-3); max-width: 65ch; }
.fit { display: grid; gap: var(--space-3); margin: 0 0 var(--space-3); }
.fit-col h3 { font: 650 var(--text-xs)/1.4 var(--font-text); margin: 0 0 var(--space-1); }
.fit-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-1); font-size: var(--text-sm); }
.fit-col li { padding-left: 1.25rem; position: relative; }
.fit-good li::before { content: "✓"; position: absolute; left: 0; color: var(--color-done); }
.fit-watch li::before { content: "!"; position: absolute; left: 0.25rem; font-weight: 700; color: var(--color-attention); }
.fit-good h3 { color: var(--color-done); } .fit-watch h3 { color: var(--color-attention); }
.check-offer h2 { margin: 0 0 var(--space-2); }
@media (min-width: 40rem) { .check-offer .fit { grid-template-columns: 1fr 1fr; } }
.dd-table th[scope="row"] .muted { font-weight: 400; }

/* Cycle 19: the bank behind each offer (FPO art. 22) */
.deposit-taker { font-size: var(--text-xs); line-height: 1.5; color: var(--color-text-muted); max-width: 75ch; margin: var(--space-2) 0 0; }

/* ---------- cycle 32: drop-downs that look like Pocketly (Chrome, Edge; elsewhere the native list) ----------
   The list opens from its field as a floating surface: rounded, padded, the current choice ticked. */
/* Cycle 110 (V0.13): where the customisable select isn't supported, the closed select is still drawn in the house style:
   no native bevel, a quiet chevron in the muted ink. */
@supports not (appearance: base-select) {
  select { appearance: none; -webkit-appearance: none; padding-right: 2.25rem; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%), linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
    background-position: calc(100% - 19px) 52%, calc(100% - 14px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
}
@supports (appearance: base-select) {
  select, ::picker(select) { appearance: base-select; }
  select { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-2); cursor: pointer; }
  select::picker-icon { color: var(--color-text-muted); transition: rotate var(--motion-fast) var(--ease-settle); }
  select:open::picker-icon { rotate: 180deg; }
  ::picker(select) { margin-block: 6px; padding: 6px; border: 1px solid var(--hairline-strong); border-radius: var(--radius-lg); background: var(--color-surface-1);
    box-shadow: var(--shadow-pop); max-height: min(24rem, 60vh); overflow-y: auto; color: var(--color-text); }
  select option { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-sm); color: var(--color-text); font-size: var(--text-md); }
  select option:hover, select option:focus-visible { background: var(--fill-strong); outline: none; }
  select option:checked { font-weight: 650; }
  select option::checkmark { color: var(--color-plan); }
  @media (prefers-reduced-motion: no-preference) {
    ::picker(select) { transform-origin: top; transition: opacity .16s var(--ease-settle), transform .16s var(--ease-settle), overlay .16s allow-discrete, display .16s allow-discrete; }
    @starting-style { ::picker(select):popover-open { opacity: 0; transform: scale(.97) translateY(-4px); } }
  }
}

/* ---------- cycle 45: a destructive action looks it ---------- */
button.danger { background: color-mix(in srgb, var(--color-problem) 16%, transparent); color: var(--color-problem); border-color: color-mix(in srgb, var(--color-problem) 55%, transparent); }
@media (hover: hover) and (pointer: fine) { button.danger:hover { background: color-mix(in srgb, var(--color-problem) 24%, transparent); } }

/* Cycle 113: a disabled button is quiet, never a dimmed accent. */
:is(button, .btn):disabled, :is(button, .btn)[aria-disabled="true"] { background: var(--fill); color: var(--color-text-muted); border-color: transparent; box-shadow: none; cursor: not-allowed; opacity: 1; }
/* Cycle 120 (V2.2): headings and the wordmark wear the heading ink (navy in light, so light still reads as Pocketly). */
h1, h2, .brand, .q { color: var(--color-heading); }