@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("vendor/fonts/newsreader-latin-500.bbe93dd37d.woff2") format("woff2");
}
/* The real Newsreader Italic (variable, 200-800), so no italic Newsreader
   text - headings' .em, the wordmark's "Sisters" - is ever a synthetic
   slant of the upright. Preloaded by every page (tools/render_site.mjs's
   pageHtml), since almost every page shows some. */
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("vendor/fonts/newsreader-latin-italic.9b4c3aa3b9.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("vendor/fonts/public-sans-latin-400.5ed4d31c98.woff2") format("woff2");
}

:root{
  /* === Foundation tokens (reskin, 28 Sep 2026 - prompts/reskin/BRIEF.md
     "Foundations", design/templates/F00-Foundations.html). Every shared
     rule reads these; nothing hard-codes a colour, width or type size.
     Light values here, the dark set under prefers-color-scheme below. === */
  /* Colour */
  --page:#FFFFFF;        /* the page behind helper screens and content */
  --card:#FFFFFF;        /* a boxed section, option, answer or dialog */
  --surface:#F3F6F4;     /* a tinted block on the page */
  --ink:#14213D;
  --soft:#4A5670;        /* muted text */
  --muted:var(--soft);
  --hair:#E4E7ED;        /* hairlines divide things; never outline a control */
  --line:#C9CFDA;        /* a decorative card edge */
  --control:#7A8499;     /* inputs, options, chips, secondary and .row buttons: 3.6:1 on white */
  --field-line:var(--control);
  --accent:#1E5A46;      /* links, ticks, focus, accent text */
  --accent-ink:#FFFFFF;  /* text on an accent fill */
  --link-hover:#0F2F27;
  --focus:#1E5A46;
  --btn:#1E5A46; --btn-ink:#FFFFFF; --btn-hover:#0F2F27; --btn-press:#0F2F27;
  --btn2-hover:#F3F6F4; --btn2-press:#E4E7ED;
  --deep:#0F2F27; --deep-ink:#EAF4EF; --deep-soft:#9FC3B4;
  --mint:#E7F3EC;        /* mint pale: selected, info and done */
  --mint-strong:#7CC7A6;
  --sel:#E7F3EC;
  --warn-bg:#FFF4DC; --warn-ink:#7A4B00;
  --err-bg:#FDECEA; --err-ink:#B42318;
  --warn:var(--err-ink); /* legacy name: error text */
  --strip-bg:#0F2F27; --strip-ink:#FFFFFF;
  --toast-bg:#14213D; --toast-ink:#FFFFFF;
  --scrim:rgba(15,47,39,.72);
  --shadow-bar:0 -6px 20px rgba(20,33,61,.06);
  --shadow-pop:0 20px 48px rgba(20,33,61,.24);
  /* Fixed brand colours for the marketing dark bands - deep #0F2F27,
     accent #1E5A46, mint #7CC7A6, pale mint #E7F3EC. Unlike the tokens
     above, these never change with the colour scheme: a dark band stays
     legible whatever the visitor's theme. */
  --brand-deep:#0F2F27; --brand-deep-ink:#FFFFFF; --brand-deep-soft:#9FC3B4;
  --brand-accent:#1E5A46; --brand-mint:#7CC7A6; --brand-mint-hover:#9AD6BB; --brand-mint-pale:#E7F3EC;
  /* Result states (/check/), now the alert tokens. */
  --chk-green-bg:var(--mint); --chk-green-ink:var(--accent);
  --chk-amber-bg:var(--warn-bg); --chk-amber-ink:var(--warn-ink);
  --chk-red-bg:var(--err-bg); --chk-red-ink:var(--err-ink);
  /* Widths: read 680 (articles, forms, helper content), work 960 (a 248
     rail, 32, then 680), wide 1120 (marketing pages). */
  --w-read:680px; --w-work:960px; --w-wide:1120px; --w-rail:248px;
  /* Type: Newsreader for display, h1 and h2; Public Sans for the rest.
     Nothing below 15px; eyebrows and tags 14px, uppercase. */
  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --sans:"Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fs-display:52px; --fs-h1:40px; --fs-h2:28px; --fs-h3:20px;
  --fs-lead:20px; --fs-body:18px; --fs-body-min:17px; --fs-small:15px; --fs-tag:14px;
  --lh-body:1.6;
  /* Controls */
  --tap:48px; --btn-h:56px; --btn2-h:48px; --radius:12px; --radius-card:16px;
  --motion:180ms ease-out;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media(max-width:599px){:root{--fs-display:38px;--fs-h1:32px;--fs-h2:24px}}
/* Dark mode follows the device (or data-theme="dark"); same layout, the
   tokens swap. Buttons turn mint with deep text. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--page:#0F1714;--card:#17221F;--surface:#1B2723;--ink:#E8EEEB;--soft:#A9B8B2;--hair:#2A3833;--line:#3B4B45;--control:#6B7F77;--accent:#8FD3B3;--accent-ink:#0F2F27;--link-hover:#B8E6CF;--focus:#7CC7A6;--btn:#7CC7A6;--btn-ink:#0F2F27;--btn-hover:#9AD6BB;--btn-press:#6BB896;--btn2-hover:#0F1714;--btn2-press:#2A3833;--deep:#0A1C17;--deep-ink:#EAF4EF;--deep-soft:#8FB8A6;--mint:#1D3A30;--sel:#1D3A30;--warn-bg:#3A2E12;--warn-ink:#F2C66D;--err-bg:#3A1A17;--err-ink:#FF8A80;--strip-bg:#0A1C17;--strip-ink:#F1F5F3;--toast-bg:#E8EEEB;--toast-ink:#0F1714;--shadow-bar:0 -6px 20px rgba(0,0,0,.3);--shadow-pop:0 20px 48px rgba(0,0,0,.5)}
}
:root[data-theme="dark"]{--page:#0F1714;--card:#17221F;--surface:#1B2723;--ink:#E8EEEB;--soft:#A9B8B2;--hair:#2A3833;--line:#3B4B45;--control:#6B7F77;--accent:#8FD3B3;--accent-ink:#0F2F27;--link-hover:#B8E6CF;--focus:#7CC7A6;--btn:#7CC7A6;--btn-ink:#0F2F27;--btn-hover:#9AD6BB;--btn-press:#6BB896;--btn2-hover:#0F1714;--btn2-press:#2A3833;--deep:#0A1C17;--deep-ink:#EAF4EF;--deep-soft:#8FB8A6;--mint:#1D3A30;--sel:#1D3A30;--warn-bg:#3A2E12;--warn-ink:#F2C66D;--err-bg:#3A1A17;--err-ink:#FF8A80;--strip-bg:#0A1C17;--strip-ink:#F1F5F3;--toast-bg:#E8EEEB;--toast-ink:#0F1714;--shadow-bar:0 -6px 20px rgba(0,0,0,.3);--shadow-pop:0 20px 48px rgba(0,0,0,.5)}
*,*::before,*::after{box-sizing:inherit}
/* Spacing system (CLAUDE.md "Spacing"; checked on every page by
   tests/section-edges.spec.mjs and tests/layout-spacing.spec.mjs, and
   tools/spacing_tokens_lint.mjs keeps raw px out of margin/padding):
   --sp-N              the spacing scale, N px. The scale is 4/8/12/16/24/
                       32/48/64/96 (BRIEF "Spacing"); 20 is the phone side
                       gutter only. The other steps (2, 6, 10, 14, 20, 28,
                       40, 56, 80, 128) are old and only kept until the
                       rules that use them are rebuilt - never use them in
                       a new rule.
   --section-pad       a .section's own top and bottom padding - the only
                       vertical space between the header, the bands of a
                       page and the footer. 32px on phones, 64px from 600px.
   --gutter            a page's side gutter, inside every section: 20px on
                       phones, 44px on tablets (600-1099), 32px from 1100.
   --space-block       the standard gap between stacked blocks
   --head-h            the header's real height (its border not included) -
                       .mk-head .mk-wrap is exactly this tall: 64px on
                       phones, 76px from 600px, helpers the same.
   --sticky-top        where anything sticky (contents lists, side panels)
                       and every jump link (scroll-padding-top) lands: just
                       under the header, plus one --space-block.
   --bar-h             the sticky Back/Next bar's height; the page gets this
                       much bottom padding so the bar never covers the
                       last field. */
:root{
  --sp-2:2px;--sp-4:4px;--sp-6:6px;--sp-8:8px;--sp-10:10px;--sp-12:12px;--sp-14:14px;--sp-16:16px;
  --sp-20:20px;--sp-24:24px;--sp-28:28px;--sp-32:32px;--sp-40:40px;--sp-44:44px;--sp-48:48px;--sp-56:56px;
  --sp-64:64px;--sp-80:80px;--sp-96:96px;--sp-128:128px;
  --section-pad:var(--sp-32);--gutter:var(--sp-20);--space-block:var(--sp-24);--head-h:64px;
  --bar-h:88px;--nav-clear:150px;--hairline:1px}
@media(min-width:600px){:root{--section-pad:var(--sp-64);--gutter:var(--sp-44);--head-h:76px}}
@media(min-width:1100px){:root{--gutter:var(--sp-32)}}
:root{--sticky-top:calc(env(safe-area-inset-top,0px) + var(--head-h) + 1px + var(--space-block))}
html{height:100%;scroll-padding-top:var(--sticky-top)}
.skip-link{position:absolute;left:16px;top:-100px;z-index:50;display:inline-flex;align-items:center;min-height:44px;padding:0 var(--sp-16);border-radius:10px;background:var(--ink);color:var(--page);font-weight:600;text-decoration:none}
.skip-link:focus{top:8px}
body{margin:0;min-height:100%;display:flex;flex-direction:column;background:var(--page);color:var(--ink);font:400 var(--fs-body)/var(--lh-body) var(--sans);-webkit-text-size-adjust:100%;caret-color:var(--accent);accent-color:var(--accent);font-variant-numeric:tabular-nums}
::selection{background:var(--accent);color:var(--accent-ink)}
a{color:var(--accent);text-decoration-thickness:1.5px;text-underline-offset:.15em}
a:visited{color:var(--accent)}
a:hover{color:var(--link-hover)}
/* Short pages: <main> takes up the slack, so the footer sits at the bottom
   of the window, never halfway up it. Nothing else in <body> shrinks.
   <main> has no padding of its own: its sections own every bit of
   vertical space. */
body>*{flex-shrink:0}
body>main{flex:1 0 auto}

/* The section primitive. Every page is a stack of full-width .section
   blocks (heroes, bands, the body, the footer); each owns its own vertical
   space and nothing else does. A background colour lives only on a
   .section (add .band so the next section keeps its own top padding).
   Two plain sections in a row share one --section-pad between them, not
   two. The first and last thing inside a section never add margin of
   their own, so the padding is the whole gap to the band edge. Fix
   spacing here, never on a single page. */
.section{box-sizing:border-box;width:100%;padding-block:var(--section-pad)}
.section:not(.band)+.section:not(.band){padding-top:0}
.section>:first-child,.section>:first-child>:first-child,.section>:first-child>:first-child>:first-child{margin-top:0}
.section>:last-child,.section>:last-child>:last-child,.section>:last-child>:last-child>:last-child{margin-bottom:0}
/* A closed <details> keeps no box for its hidden content: without this a
   collapsed FAQ answer is still laid out below its summary, outside the
   details and up to its section's edge (27 Sep 2026, 23px above a band
   at 1920 wide). Open, the content shows as before. */
details:not([open])>:not(summary){display:none}
/* In-app bars (Beta, "Updated. Refresh to get the latest.", the desktop
   install hint) sit in the normal flow above the header - order:-1 puts
   them there wherever the script inserted them - so they scroll away and
   never cover the sticky header. */
.testbanner,.betastrip,.sw-update{order:-1}


.pwa-hint{position:fixed;left:12px;right:12px;bottom:calc(88px + env(safe-area-inset-bottom,0px));z-index:6;background:var(--ink);color:var(--page);border-radius:12px;padding:var(--sp-14) var(--sp-48) var(--sp-14) var(--sp-16);font-size:var(--fs-small);line-height:1.4;box-shadow:0 18px 40px -20px rgba(20,33,61,.5)}
.pwa-hint-install{display:block;margin-top:var(--sp-10);min-height:44px;padding:0 var(--sp-20);border-radius:8px;background:var(--accent);color:var(--accent-ink);border:0;font-weight:600}
.pwa-hint-close{position:absolute;top:8px;right:10px;background:none;border:0;color:var(--page);opacity:.8;font-size:1.3rem;line-height:1;padding:var(--sp-6);min-height:0}
/* On a desktop-width screen there is no bottom nav bar within reach of a
   bottom sheet's thumb, and a wide sheet floating above nothing just looks
   like an error toast - a slim bar along the top reads as a normal browser
   notification instead. It never covers a control: the interview's own
   back/next buttons are bottom-fixed (.nav), well clear of the top, and the
   bar sits in the normal flow above the page header (order:-1 in the flex
   <body>), never over it. */
@media(min-width:760px){
  .pwa-hint{position:relative;order:-1;left:auto;right:auto;top:auto;bottom:auto;border-radius:0;box-shadow:0 8px 24px -18px rgba(20,33,61,.5);display:flex;align-items:center;gap:16px;padding:var(--sp-10) var(--sp-48) var(--sp-10) var(--sp-20)}
  .pwa-hint-install{display:inline-block;flex:none;margin-top:0;min-height:36px;padding:0 var(--sp-16)}
  .pwa-hint-close{top:50%;transform:translateY(-50%)}
}

main.app-main{width:100%;max-width:calc(var(--w-read) + 2 * var(--gutter));margin:0 auto;padding:var(--section-pad) var(--gutter) var(--nav-clear)}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:var(--fs-small);color:var(--soft);font-weight:500;padding:var(--sp-14) 0 var(--sp-10)}
/* "x of y" then the icon-only Start again button, top-right of the card -
   see design/app-mock-phone-question.html, design/app-mock-desktop-question.html */
.top-end{display:flex;align-items:center;gap:12px;flex:none}
.restart-btn{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--page);color:var(--soft);display:inline-flex;align-items:center;justify-content:center;padding:0}
.restart-btn:hover{border-color:var(--soft)}
.pack-top{padding-bottom:var(--sp-12)}
.bar{height:6px;background:var(--hair);border-radius:3px;overflow:hidden;margin-bottom:var(--sp-40)}
.bar i{display:block;height:100%;background:var(--accent);transition:width .35s cubic-bezier(.16,1,.3,1)}
/* Screen-to-screen fade + slide, shared by AA and PIP (both render() a
   fresh .screen div per navigation - prompts/pip-aa-parity.md item E):
   150-200ms, ease-out (cubic-bezier(.16,1,.3,1) decelerates like ease-out
   the whole way, unlike a symmetric ease). Never a layout jump - the fade
   only animates opacity/transform, never anything that affects box size,
   so nothing shifts around it while it plays. */
.screen{animation:in .18s cubic-bezier(.16,1,.3,1)}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.bar i{transition:none}.screen{animation:none}}

/* ---------------------------------------------------------------------
   Journey redesign (prompts/journey-redesign.md), shared by both helpers
   via app/attendance-allowance/app/js/journey.js (imported read-only by
   PIP, same convention as dom.js/screens.js/pwa.js).
   --------------------------------------------------------------------- */

/* A. Journey rail - "Before you start -> Your answers -> Check -> Your
   pack", shown on every screen, under the header. Desktop: a centred
   horizontal row, done steps ticked (mint circle), the current step
   filled solid, future steps outlined. Phone: a slim 4-segment bar plus
   the current stage's own name - item G's shared tokens throughout
   (--accent/--mint only, no --brand-deep on a light card here). */
.rail{display:none}
@media(min-width:760px){
  .rail{display:block;padding:var(--sp-16) 0 var(--sp-6)}
  main#app>.rail-wrap .rail,.pack-main>.rail-wrap .rail{padding-top:0}
  .rail ol{display:flex;align-items:center;justify-content:center;list-style:none;margin:0;padding:0}
  .rail-step{display:flex;align-items:center;gap:7px;font-size:var(--fs-small);font-weight:600;color:var(--soft);white-space:nowrap}
  .rail-step:not(:last-child)::after{content:"";display:block;width:28px;height:1px;background:var(--line);margin:0 var(--sp-12)}
  .rail-step.done:not(:last-child)::after{background:var(--accent)}
  /* 12px dots (helper tidy-up item 2): too small for the tick, so a done
     step is a mint dot ringed in the accent - its ✓ stays in the markup
     for anything that reads it, at no size. */
  .rail-dot{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--line);flex:none;font-size:0;overflow:hidden}
  .rail-step.done{color:var(--accent)}
  .rail-step.done .rail-dot{background:var(--mint);border-color:var(--accent)}
  .rail-step.current{color:var(--accent)}
  .rail-step.current .rail-dot{background:var(--accent);border-color:var(--accent)}
}
.rail-mobile{display:flex;flex-direction:column;gap:6px;padding:var(--sp-14) 0 var(--sp-2)}
@media(min-width:760px){.rail-mobile{display:none}}
.rail-mobile-bar{display:flex;gap:4px}
.rail-mobile-bar i{flex:1;height:4px;border-radius:2px;background:var(--hair);display:block;font-style:normal}
.rail-mobile-bar i.done,.rail-mobile-bar i.current{background:var(--accent)}
.rail-mobile-bar i.current{opacity:.5}
.rail-mobile-label{font-size:var(--fs-small);font-weight:600;color:var(--soft)}

/* Breathing room between the step bar and whatever comes next: no divider
   (helper tidy-up item 2), just about 36px of clear space - the rail's own
   6px under the steps plus 30px here - on every question/check screen.
   Scoped to the rail's own top-level use (a direct child of #app - see
   main.js's render()) and the PIP pack card's copy, not the one the dark
   arrival band embeds inside itself, which stays as it was. */
main#app>.rail-wrap,.pack-main>.rail-wrap{margin-bottom:calc(var(--sp-32) - var(--sp-2))}

/* C. In-progress: desktop (>=1100px) gets a left "Your progress" panel -
   its own 224px white card, 24px to the left of the 680px question card,
   the two centred as a pair (helper tidy-up item 3). #app itself stops
   being the card there: it becomes a two-column grid, the progress row
   dissolves into it (display:contents), and the step rail and the
   question column each carry one half of the 680px card's white box, so
   the steps still sit inside the card, above the question. Phone keeps
   the slim rail-mobile bar above plus the part name/count already in the
   question header. */
main#app.inprogress .progress-row{display:block}
@media(min-width:1100px){
  main.app-main.inprogress{max-width:928px;padding:0;background:transparent;border:0;border-radius:0;display:grid;grid-template-columns:224px 680px;grid-template-rows:auto 1fr;column-gap:var(--sp-24);justify-content:center;align-items:start}
  main#app.inprogress .progress-row{display:contents}
  main#app.inprogress>.rail-wrap{grid-column:2;grid-row:1;margin:0;padding:var(--sp-24) var(--sp-40) calc(var(--sp-32) - var(--sp-2));background:var(--page);border:1px solid var(--hair);border-bottom:0;border-radius:20px 20px 0 0}
  main#app.inprogress .screen-col{grid-column:2;grid-row:2;align-self:stretch;min-width:0;padding:0 var(--sp-40) var(--sp-32);background:var(--page);border:1px solid var(--hair);border-top:0;border-radius:0 0 20px 20px}
  .progress-panel{grid-column:1;grid-row:1 / span 2;position:sticky;top:var(--sticky-top);padding:var(--sp-20);background:var(--page);border:1px solid var(--hair);border-radius:16px;display:flex;flex-direction:column;gap:14px}
  /* Back/Next line up with the 680px question card's own content box (680
     minus 40px padding and the 1px border each side: 598px), not the pair
     - .nav div is otherwise centred in the full viewport (margin:0 auto),
     which the progress card beside it pushes the question card right of.
     So its offset is reproduced directly: half the viewport, minus half
     the pair's 928px (224 + 24 + 680), plus the progress card and gap
     (248px), plus the question card's own 41px of border and padding -
     50% - 175px. */
  main#app.inprogress ~ .nav div{max-width:598px;--nav-shift:175px;margin-left:calc(50% - var(--nav-shift));margin-right:auto}
  /* The part's name moves from the row above the question into the
     eyebrow ("Daily living · Question 3 on the form"), the progress card
     carrying the step count. */
  main#app.inprogress .pip-top{display:none}
  main#app.inprogress .screen-col>.top{padding-top:0}
  main#app.inprogress .q-formnum-part{display:inline}
  main#app.inprogress .remind-inline{display:none}
}
.q-formnum-part{display:none}
.remind-inline{margin:var(--sp-16) 0 0}
.progress-panel{display:none}
@media(min-width:1100px){.progress-panel{display:flex}}
/* The "x of y" count shows once only (question-spacing-focus item 2): the
   left rail's own copy once that rail exists (>=1100px), the row above the
   heading (.top-count) below that width - never both at once. */
@media(min-width:1100px){.top-count{display:none}}
.progress-panel-item{display:flex;align-items:center;gap:10px;font-size:var(--fs-small);color:var(--soft);padding:var(--sp-4) 0}
.progress-panel-item.done{color:var(--ink)}
.progress-panel-item.done .progress-panel-dot{background:var(--mint);border-color:var(--mint);color:var(--accent)}
.progress-panel-item.current{color:var(--ink);font-weight:600}
.progress-panel-item.current .progress-panel-dot{background:var(--accent);border-color:var(--accent)}
.progress-panel-dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex:none;display:flex;align-items:center;justify-content:center;font-size:var(--fs-small);color:transparent}
.progress-panel-sub{margin-left:var(--sp-32);display:flex;flex-direction:column;gap:6px}
.progress-panel-sub .bar{margin:0}
.progress-panel-count{font-size:var(--fs-small);color:var(--soft)}
.progress-panel-note{font-size:var(--fs-small);color:var(--soft);line-height:1.5;padding-top:var(--sp-14);border-top:1px solid var(--hair);margin-top:var(--sp-4);display:flex;flex-direction:column;align-items:flex-start}
.progress-panel-note .link{min-height:32px}
.progress-panel-note a,.progress-panel-note button.link{font-size:var(--fs-small)}

/* The current question's form-question-number tag ("Question 29 on the
   form") and goal-gradient copy line - both plain text above the
   question card, never a fake/biased bar (every .bar above still shows
   real progress only). */
.q-formnum{display:block;font-size:var(--fs-tag);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--soft);margin:0 0 var(--sp-12)}
.goal-gradient{display:block;font-size:var(--fs-small);font-weight:600;color:var(--accent);margin:0 0 var(--sp-4)}

/* D/E. The dark "arrival" band - the rail (every step ticked), a large
   mint tick, eyebrow and serif h1 - shared by the Ready+paywall and
   Finish screens on both helpers. Full-bleed on phone (a -20px
   break-out), a rounded band on desktop. */
.arrival-band{background:var(--brand-deep);color:var(--brand-deep-ink);text-align:center;padding:var(--sp-20) var(--sp-24) var(--sp-28);margin:0 calc(var(--sp-20) * -1) var(--sp-20);display:flex;flex-direction:column;align-items:center;gap:8px}
.arrival-band .rail-step,.arrival-band .rail-mobile-label{color:var(--brand-deep-soft)}
.arrival-band .rail-step.done,.arrival-band .rail-step.current{color:var(--brand-deep-ink)}
.arrival-band .rail-step:not(:last-child)::after{background:var(--brand-accent)}
.arrival-band .rail-dot{border-color:var(--brand-accent)}
.arrival-band .rail-mobile-bar i{background:var(--brand-accent)}
.arrival-band .rail-mobile-bar i.done,.arrival-band .rail-mobile-bar i.current{background:var(--brand-mint)}
.arrival-tick{width:52px;height:52px;border-radius:50%;background:var(--brand-mint);color:var(--brand-deep);display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;margin-top:var(--sp-6)}
.arrival-band .q-sub{color:var(--brand-mint)}
.arrival-band h1{color:var(--brand-deep-ink);margin:var(--sp-2) 0 0}
.arrival-band .em{font-style:italic;color:var(--brand-mint)}
.arrival-band p{color:var(--brand-deep-soft);margin:0;max-width:34em}
.arrival-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:var(--sp-10);width:100%}
.arrival-actions button{width:auto;flex:1 1 200px;min-height:52px}
@media(min-width:900px){.arrival-band{margin:0;padding:var(--sp-40) var(--sp-64) var(--sp-32);border-radius:0}}

/* The "save a copy first" callout, above the two-column pack/pay layout
   (both helpers, D and E). */
.save-callout{border:1.5px solid var(--accent);border-radius:14px;padding:var(--sp-20) var(--sp-20);margin:var(--sp-14) 0;background:var(--sel);display:flex;flex-direction:column;gap:10px}
.save-callout h2{margin:0;font-size:1.05rem}
.save-callout p{margin:0;font-size:.95rem}

/* Ready/paywall two-column layout - the pack preview on the left, the
   pay card on the right, from 900px; a single stacked column on phone
   (pay card first, since that's the one action that matters there too). */
.pay-columns{display:flex;flex-direction:column-reverse;gap:20px}
@media(min-width:900px){
  .pay-columns{flex-direction:row;align-items:flex-start;gap:32px}
  .pay-columns>.pay-preview-col{flex:1.3;min-width:0}
  .pay-columns>.pay-card-col{flex:1;min-width:0;position:sticky;top:var(--sticky-top)}
}
.locked-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:var(--sp-14) var(--sp-16);border:1px solid var(--hair);border-radius:12px;color:var(--soft);font-size:.95rem;margin:var(--sp-8) 0}

/* E. Finish - "What to do next" as 5 numbered cards, a grid of 5 on
   desktop, stacked on phone - see the Finish screen in both mains. */
.next-grid{display:flex;flex-direction:column;gap:12px;margin:var(--sp-14) 0}
@media(min-width:760px){.next-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.next-grid .card:nth-child(4),.next-grid .card:nth-child(5){grid-column:span 1}}
.next-grid .card{margin:0;display:flex;flex-direction:column;gap:6px}
.next-grid .card b{font:600 1.3rem/1 var(--serif);color:var(--accent)}
.referral-line{text-align:center;font-size:var(--fs-small);color:var(--soft);margin-top:var(--sp-24)}

/* I.5: service-worker update bar - a small, permanent (not dismissible -
   it reflects real, actionable state: a newer version is already
   installed and waiting) notice, shared by both helpers. */
.sw-update{position:relative;background:var(--accent);color:var(--accent-ink);text-align:center;font:600 var(--fs-small)/1 var(--sans);padding:var(--sp-10) var(--sp-48)}
.sw-update button{background:none;border:0;color:inherit;text-decoration:underline;font:inherit;padding:0;min-height:0}
.sw-update .dismiss{position:absolute;right:10px;top:50%;transform:translateY(-50%);text-decoration:none;font-size:1.1rem;padding:var(--sp-4) var(--sp-8);min-height:0}

/* I.2: AA's own overflow menu (Start again moved off the fixed top row,
   which now only ever shows "Change my answers" as a quiet link on the
   ready/finish screens - see the .app-menu note in main.js). */
.app-menu-wrap{position:relative}
.app-menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--page);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px -20px rgba(20,33,61,.5);min-width:180px;padding:var(--sp-6);z-index:6;display:flex;flex-direction:column}
.app-menu[hidden]{display:none}
.app-menu button{text-align:left;background:none;border:0;padding:var(--sp-12) var(--sp-14);border-radius:8px;font-size:.95rem;min-height:0}
.app-menu button:hover{background:var(--surface)}

h1{font:500 var(--fs-h1)/1.1 var(--serif);letter-spacing:-.01em;margin:0 0 var(--sp-16);text-wrap:balance}
h2{font:500 var(--fs-h2)/1.2 var(--serif);margin:var(--sp-48) 0 var(--sp-12);text-wrap:balance}
h3{text-wrap:balance}
h1+p,h2+p{margin-top:0}
p{margin:0 0 var(--sp-16);max-width:34em;font-size:inherit}
.soft{color:var(--soft)}
ol.plain,ul.plain{margin:0 0 var(--sp-16);padding-left:1.25em}
ol.plain li,ul.plain li{margin:var(--sp-8) 0;padding-left:var(--sp-4)}
ol.plain li::marker{font-weight:600;color:var(--accent)}
ul.plain li::marker{color:var(--line)}

.sub{display:block;font-weight:600;margin:var(--sp-32) 0 var(--sp-10)}
.sub i{display:none}
input[type=text],input[type=number],input[type=email],input[type=date],textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--page);border:1px solid var(--line);border-radius:12px;padding:var(--sp-16)}
textarea{min-height:116px;line-height:1.45}
input::placeholder,textarea::placeholder{color:var(--soft);opacity:.85}
input:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--mint)}
button{font:600 1.05rem var(--sans);color:var(--ink);cursor:pointer}
button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
/* Focus moves to the new screen's own heading on every navigation (AA and
   PIP both - prompts/pip-aa-parity.md item E), via a script-set
   tabindex="-1", so a screen reader starts there. That heading is never
   something to act on, so it never draws a ring - Chrome drew one after
   browser Back (helper tidy-up item 1). Buttons, links, inputs and route
   cards keep theirs. */
h1:focus,h2:focus{outline:none}
h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus,h1[tabindex="-1"]:focus-visible,h2[tabindex="-1"]:focus-visible{outline:none}

/* Question-screen rhythm: heading -> body text 20px, body text -> the
   first answer field 28px (question-spacing-focus item 1). Scoped to a
   direct child of .screen (main.js's own per-step wrapper) so it never
   reaches the dark arrival band's own heading/copy, which is nested a
   level deeper and keeps its own spacing. */
.screen>h1{margin-bottom:var(--sp-20)}
.screen>h1+p{margin-bottom:var(--sp-28)}

/* single choice: radio rows - a plain card, no leading indicator; the
   chosen row gets a 2px accent border, a mint fill, and a trailing tick -
   see design/app-mock-phone-question.html */
.opts{display:grid;gap:10px;margin-top:var(--sp-4)}
.opts button{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:62px;padding:var(--sp-16) var(--sp-20);text-align:left;background:var(--page);border:1px solid var(--line);border-radius:12px;font-size:1.05rem}
.opts button[aria-pressed="true"],.opts button[aria-checked="true"]{border:2px solid var(--accent);background:var(--mint);font-weight:600;padding:calc(var(--sp-16) - var(--hairline)) calc(var(--sp-20) - var(--hairline))}
.opts button[aria-pressed="true"]::after,.opts button[aria-checked="true"]::after{content:"✓";flex:none;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-size:var(--fs-small);font-weight:700}

/* multi choice: checkbox rows */
.checks{display:grid;gap:8px}
.checks.two{grid-template-columns:1fr 1fr}
.checks button{display:flex;align-items:center;gap:12px;min-height:56px;padding:var(--sp-10) var(--sp-14);text-align:left;background:var(--page);border:1px solid var(--line);border-radius:12px;font-weight:500;font-size:1rem;line-height:1.25}
.checks button::before{content:"";flex:none;width:22px;height:22px;border-radius:5px;border:2px solid var(--soft);background:var(--page) center/14px no-repeat}
.checks button[aria-pressed="true"]{border-color:var(--accent);background:var(--mint)}
.checks button[aria-pressed="true"]::before{border-color:var(--accent);background-color:var(--accent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
@media (max-width:380px){.checks.two{grid-template-columns:1fr}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .checks button[aria-pressed="true"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5l3 3 6-7' fill='none' stroke='%230C1F17' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}}
:root[data-theme="dark"] .checks button[aria-pressed="true"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5l3 3 6-7' fill='none' stroke='%230C1F17' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* stepper */
.step{display:flex;align-items:center;gap:16px}
.step button{position:relative;width:60px;height:60px;border-radius:12px;border:1px solid var(--line);background:var(--page)}
.step button::before,.step button.plus::after{content:"";position:absolute;left:calc(50% - 10px);top:calc(50% - 1.25px);width:20px;height:2.5px;background:var(--ink);border-radius:2px}
.step button.plus::after{transform:rotate(90deg)}
.step output{font:500 1.8rem var(--serif);min-width:2.6ch;text-align:center}
.step span{color:var(--soft)}

.note{background:var(--surface);border:1px solid var(--hair);border-radius:12px;padding:var(--sp-16) var(--sp-20);margin:var(--sp-24) 0;font-size:1rem}
.todo{border:1.5px dashed var(--warn);color:var(--warn);border-radius:12px;padding:var(--sp-12) var(--sp-16);font-weight:600;font-size:.95rem}
.err{color:var(--warn);font-weight:600;margin-top:var(--sp-20)}
.field-msg{color:var(--warn);font-weight:600;font-size:1rem;margin:var(--sp-6) 0 0}
.field-msg:empty{display:none}
input[aria-invalid="true"]{border-color:var(--warn)}
.save-warn{margin:var(--sp-14) var(--sp-16)}

/* /check/ result states - see design/check-results-mock.html and item 9,
   prompts/fixes-and-host-restructure.md. Icon in a tinted circle, centred;
   heading; one-line reason; full-width button; a decider line under it -
   "green"/"amber" are "Worth claiming."/"Not sure yet." ("Start the
   helper"); "red" covers both "Probably not, yet." and "Not this form."
   (Scotland/Northern Ireland - a plain outline button to the alternative,
   never "Start the helper", and its own decider text, not "DWP decides."). */
.chk-result{background:var(--page);border:1px solid var(--hair);border-radius:20px;padding:var(--sp-32) var(--sp-28);margin-top:var(--sp-8);display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.chk-result-icon{flex:none;width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.chk-result-eyebrow{font:700 var(--fs-tag)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.chk-result-green .chk-result-icon{background:var(--chk-green-bg);color:var(--chk-green-ink)}
.chk-result-green .chk-result-eyebrow{color:var(--chk-green-ink)}
.chk-result-amber .chk-result-icon{background:var(--chk-amber-bg);color:var(--chk-amber-ink)}
.chk-result-amber .chk-result-eyebrow{color:var(--chk-amber-ink)}
.chk-result-red .chk-result-icon{background:var(--chk-red-bg);color:var(--chk-red-ink)}
.chk-result-red .chk-result-eyebrow{color:var(--chk-red-ink)}
.chk-result h1{margin:0}
.chk-result p{margin:0;color:var(--soft);max-width:32em}
.chk-result-footer{font-size:var(--fs-small);color:var(--soft)}
.chk-cta{display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;border-radius:12px;padding:0 var(--sp-20);background:var(--accent);color:var(--accent-ink);border:1.5px solid var(--accent);font-weight:600;font-size:1.02rem;text-decoration:none}
.chk-cta.outline{background:var(--page);color:var(--ink);border-color:var(--line)}

/* /pip/points-checker/ - the interactive app mounted into #checker-app
   (app/pip/points-checker/js/main.js) on the generated marketing page, so
   it reuses .opts/.checks/.card/.wide/.pill above, same as the /pip/app/
   interview itself now does (prompts/pip-aa-parity.md item A - no more
   separate pip.css). "pc-" prefix for what's genuinely new here: the
   desktop sidebar, the nav row, and the answer-preview's highlighted
   gaps. */
/* Room under the sticky header and above the footer on every checker
   screen - the "PIP points checker / Start again" row was flush with the
   header and Back/Next sat on the footer. <main> itself has no bottom
   padding here (it ends in the dark .mk-final band, which meets the
   footer), so the wrap brings its own while the checker is running. */

.pc-layout{display:flex;flex-direction:column;gap:20px;text-align:left}
.pc-sidebar{display:none}
.pc-nav{display:flex;gap:10px;margin-top:var(--sp-16)}
.pc-nav button{flex:1}
button.mk-guide{cursor:pointer;font:inherit;width:100%}
@media(min-width:760px){
  .pc-layout{flex-direction:row;align-items:flex-start}
  .pc-sidebar{display:flex;flex-direction:column;gap:14px;flex:0 0 240px;position:sticky;top:var(--sticky-top)}
  .pc-sidebar-item{text-align:left;padding:var(--sp-10) var(--sp-12);border-radius:10px;border:1px solid transparent;background:none;font-size:var(--fs-small);color:var(--soft)}
  .pc-sidebar-item.done{color:var(--ink)}
  .pc-sidebar-item.done::before{content:"✓ ";color:var(--accent);font-weight:700}
  .pc-sidebar-item.current{background:var(--sel);border-color:var(--accent);color:var(--ink);font-weight:600}
  .pc-main{flex:1;min-width:0}
}
@media print{
  .mk-head,.mk-foot,.pc-sidebar,.pc-nav,#pc-hero,#checker-app-wrap ~ section,.mk-herowrap,noscript{display:none !important}
  .pc-layout{display:block}
}

/* B. The start screen's own dark hero, inside the card (not a full-bleed
   band like .arrival-band - this is the *first* impression, before
   anything is "done", so it stays contained). Shared by both helpers. */
.start-deep-hero{background:var(--brand-deep);color:var(--brand-deep-ink);border-radius:18px;padding:var(--sp-28) var(--sp-24) var(--sp-28);display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;margin:0 0 var(--sp-4)}
.start-deep-hero .q-sub{color:var(--brand-mint)}
.start-deep-hero h1{color:var(--brand-deep-ink);margin:var(--sp-4) 0 0}
.start-deep-hero .em{font-style:italic;color:var(--brand-mint)}
.start-deep-hero p{color:var(--brand-deep-soft);margin:var(--sp-6) 0 0;max-width:34em}
@media(min-width:900px){.start-deep-hero{padding:var(--sp-40) var(--sp-40) var(--sp-32)}}

/* "What to expect" - three plain tiles (time, parts, at the end),
   stacked on phone, in a row from ~520px. */
.expect-tiles{display:flex;flex-direction:column;gap:10px;margin:var(--sp-20) 0}
@media(min-width:520px){.expect-tiles{flex-direction:row}}
.expect-tile{flex:1;border:1px solid var(--hair);border-radius:12px;padding:var(--sp-14) var(--sp-16);display:flex;flex-direction:column;gap:4px}
.expect-tile b{font-size:.95rem}
.expect-tile span{font-size:var(--fs-small);color:var(--soft);line-height:1.4}

/* welcome screen - see design/app-mock-phone-start.html */
.eyebrow{display:block;text-align:center;font:600 var(--fs-tag)/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--sp-10)}
h1 .em{font-style:italic;color:var(--accent)}
.pill{font-size:var(--fs-small);font-weight:600;padding:var(--sp-6) var(--sp-12);border-radius:999px;background:var(--surface)}

/* grid / table entry (Q16, Q27, Q39) */
.grid-row{border:1px solid var(--line);border-radius:12px;padding:var(--sp-16);margin:0 0 var(--sp-12)}
.grid-row .field{margin-bottom:var(--sp-12)}
.grid-row .field:last-child{margin-bottom:0}
.grid-row label{display:block;font-size:var(--fs-small);color:var(--soft);margin-bottom:var(--sp-6)}
.remove-row{background:none;border:0;padding:0;min-height:44px;color:var(--warn);font-weight:600;font-size:.95rem}
.add-row{width:100%;min-height:56px;border-radius:12px;background:var(--page);border:1.5px dashed var(--line);color:var(--ink)}

/* check screen: rows grouped by part - see design/app-mock-phone-check.html */
.group-label{display:block;font:600 var(--fs-tag)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);padding:var(--sp-20) 0 var(--sp-8)}
.group-label:first-child{padding-top:0}

/* pack */
.card{border:1px solid var(--line);border-radius:14px;padding:var(--sp-20);margin:var(--sp-14) 0;background:var(--page)}
.card h2{font:600 1.05rem var(--sans);margin:0 0 var(--sp-4)}
.card .use{font-size:var(--fs-small);color:var(--soft);margin-bottom:var(--sp-12)}
.card .text{white-space:pre-wrap;font-size:1.02rem;line-height:1.55}
.card.locked .text{filter:blur(6px);user-select:none;pointer-events:none}
.card p:last-child,.card ul:last-child,.card ol:last-child{margin-bottom:0}
.copy{display:block;margin:var(--sp-14) 0 0 auto;min-height:48px;padding:0 var(--sp-20);border:1px solid var(--line);border-radius:10px;background:var(--page);font-size:.95rem}
/* Check-answers rows (.summary-row in the AA helper; PIP's own check
   screen still uses .row, scoped to the helper's .screen so the footer's
   and .pip-cta's own .row never pick this up). */
.summary-row,.screen .row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:var(--sp-16) 0;border-top:1px solid var(--hair)}
.summary-row:first-of-type,.screen .row:first-of-type{border-top:0;padding-top:0}.summary-row:last-of-type,.screen .row:last-of-type{padding-bottom:0}
.summary-row div,.screen .row div{min-width:0}.summary-row strong,.screen .row strong{font-weight:600}.summary-row small,.screen .row small{display:block;color:var(--soft);font-size:.95rem;margin-top:var(--sp-2)}
label.sub{display:block}

/* the "ready" band and the four numbered tiles - see
   design/app-mock-phone-pack.html, design/app-mock-desktop-pack.html */
.tiles{display:flex;flex-direction:column;gap:12px}
.tile{border:1px solid var(--hair);border-radius:14px;padding:var(--sp-20);background:var(--page);display:flex;flex-direction:column;gap:6px}
.tile-head{display:flex;align-items:center;gap:10px;margin:0}
.tile-num{font:600 1.4rem/1 var(--serif);color:var(--accent)}
.tile-head span:last-child{font:500 1.25rem/1.1 var(--serif);color:var(--ink)}
.tile .go{margin-top:var(--sp-6)}
.tile .card,.tile h2:not(.tile-head){margin-top:var(--sp-12)}
.desktop-save{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:0;margin-bottom:var(--sp-20)}
.desktop-save span{flex:1;min-width:220px;margin:0}
.desktop-save .copy{margin:0;flex:none}
.desktop-save .dismiss{background:none;border:0;padding:var(--sp-4) var(--sp-6);font-size:1.3rem;line-height:1;color:var(--soft);flex:none}
.save-strip{background:var(--mint);border-radius:12px;padding:var(--sp-14) var(--sp-16);display:flex;flex-direction:column;gap:8px;margin-top:var(--sp-16)}
.save-strip span{font-size:var(--fs-small);font-weight:600;color:var(--accent)}
.save-strip .card{border:0;background:transparent;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.save-strip .wide{margin-top:0}

/* The PIP helper (app/pip/app/) - shared here, not a separate pip.css
   (prompts/pip-aa-parity.md item A: "reuse the classes and tokens, don't
   fork them"), so the two helpers share one design system. Everything
   PIP already shares by name with AA above (.card, .copy, .opts, .checks,
   .wide, .err, .grid-row, .add-row, .remove-row, textarea/input styling,
   .nav/#back/#next, .top/.bar progress, .confirm-dialog, .plain lists)
   needs nothing here - only what's genuinely new to PIP is below. */

/* A small uppercase label above a question/field - named ".q-sub", not
   ".sub", because AA's own ".sub" above is a different, unrelated
   component (a numbered question sub-header) with a different look; reusing
   that name here would have either silently changed this or that one. */
.q-sub{display:block;font-size:var(--fs-tag);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700;margin:var(--sp-10) 0 0}
/* A group label ("Where do you live?", "Medication") sits clear of the
   options or rows it labels, and a hint under a set of options sits clear
   of the last one - neither flush against a box. */
.q-sub+.opts,.q-sub+.checks,.q-sub+div{margin-top:var(--sp-10)}
.opts+p,.checks+p{margin-top:var(--sp-12)}
/* PIP's four tests (the activity detail screen's time / repeat / safe /
   good enough questions): compact pills, not full-width cards - two to a
   row on a phone, as many as fit wider, wrapping. A radiogroup underneath
   (main.js's reliabilityPills); 44px tap targets. The picked pill carries a
   tick as well as its colour. */
.rel-pills{display:flex;flex-wrap:wrap;gap:8px}
.rel-pills button{flex:0 1 calc(50% - 4px);min-height:44px;padding:var(--sp-10) var(--sp-14);border:1px solid var(--field-line);border-radius:999px;background:var(--page);color:var(--ink);font-size:.95rem;line-height:1.25;text-align:center}
.rel-pills button[aria-checked="true"]{border:2px solid var(--accent);padding:calc(var(--sp-8) - var(--hairline)) calc(var(--sp-14) - var(--hairline));background:var(--mint)}
.rel-pills button[aria-checked="true"]::before{content:"✓ ";color:var(--accent);font-weight:700}
@media(min-width:641px){.rel-pills button{flex:0 1 auto}}

.pack-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;margin:var(--sp-6) 0 var(--sp-4)}
.pack-hero h1{font-size:28px}
.doors{display:flex;flex-direction:column;gap:10px;margin-top:var(--sp-8)}
/* Text under a stack of option cards (the helper start's "You have
   answers saved on this device.") sits clear of the last card. */
.doors+p{margin-top:var(--space-block)}
.door{display:flex;flex-direction:column;gap:3px;box-sizing:border-box;padding:var(--sp-16) var(--sp-20);border-radius:14px;text-decoration:none;border:1px solid var(--line);color:var(--ink)}
.door.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.door .door-title{font-size:17px;font-weight:600}
.door .door-sub{font-size:var(--fs-small);color:var(--soft)}
/* Not a fixed light colour (that was the bug - --accent, the primary
   door's own background, flips light in dark mode, so a hardcoded pale
   colour here failed contrast once dark mode existed to test against):
   --accent-ink already flips together with --accent because they're the
   same pairing .door.primary itself uses, so opacity is what dims it,
   never the colour. */
.door.primary .door-sub{color:var(--accent-ink);opacity:.75}
.door.disabled{opacity:.55;cursor:default}
.badges{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:auto}
.badge{font-size:var(--fs-small);font-weight:600;padding:var(--sp-6) var(--sp-12);border-radius:999px;background:var(--surface)}

/* A permanently dark accent card (see --brand-deep's own note above) for a
   callout that must stay legible regardless of the visitor's OS theme -
   the .arrival-band above is the same idea as a hero band; this is the
   boxed-card version, for a callout with its own heading/lists (PIP's
   assessment-prep summary). Every text node inside must resolve to
   --brand-deep-ink/--brand-deep-soft, never --ink/--soft: the "dark navy
   text on dark green" bug (prompts/pip-aa-parity.md item B) was exactly
   a --ink/--soft leak here, from a child element (.plain-list/.timeline,
   now gone) setting its own color instead of inheriting this card's. */
.card.deep{background:var(--brand-deep);color:var(--brand-deep-ink);border-color:var(--brand-deep)}
.card.deep h2{color:var(--brand-deep-ink)}
.card.deep .use,.card.deep .soft{color:var(--brand-deep-soft)}
.card.deep .plain li::marker,.card.deep ol.plain li::marker{color:var(--brand-mint)}
.card.deep a{color:var(--brand-mint)}

.crisis-banner{display:flex;gap:8px;align-items:flex-start;box-sizing:border-box;padding:var(--sp-12) var(--sp-14);border-radius:12px;background:var(--surface);color:var(--ink);font-size:var(--fs-small);line-height:1.5}
.crisis-banner p{flex:1;margin:0}
.crisis-banner a{font-weight:700;white-space:nowrap}
.crisis-banner .dismiss{background:none;border:0;padding:0 var(--sp-2);font-size:1.1rem;line-height:1;color:var(--soft);flex:none;cursor:pointer}
.late-warning{box-sizing:border-box;padding:var(--sp-12) var(--sp-14);border-radius:12px;border:1.5px dashed var(--warn);color:var(--warn);font-size:var(--fs-small);line-height:1.5;font-weight:600}
.why-we-ask{box-sizing:border-box;padding:var(--sp-12) var(--sp-14);border-radius:12px;background:var(--mint);color:var(--ink);font-size:var(--fs-small);line-height:1.5}

/* Answer cards (the PIP pack, and the reconsideration/review letters) */
/* Title, length chips, the answer itself, Copy and Done stack 12px apart,
   never flush against each other. */
.card.answer-card{display:flex;flex-direction:column;gap:12px}
.card.answer-card>*{margin-top:0;margin-bottom:0}
.answer-title{display:flex;justify-content:space-between;align-items:center;gap:10px}
.answer-title b{font-size:16px}
.length-toggle{display:flex;gap:8px}
.chip{font-size:var(--fs-small);font-weight:600;padding:var(--sp-10) var(--sp-12);border-radius:12px;border:1px solid var(--line);background:var(--page);color:var(--ink);cursor:pointer}
.chip.on{border-color:var(--accent);background:var(--sel);color:var(--accent)}
.answer-text{box-sizing:border-box;padding:var(--sp-14);border-radius:12px;background:var(--surface);font-size:15px;line-height:1.6;white-space:pre-wrap}
.answer-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.boxes-line{font-size:var(--fs-small);color:var(--soft)}
.pasted-row{display:flex;align-items:center;gap:8px;font-size:var(--fs-small);color:var(--accent);font-weight:600}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:1rem;font-weight:600;color:var(--soft)}

/* Paywall (design/pip-mocks/PIP-Pay-Desk.html, PIP-Pay-Phone.html) */
.pay-wall{display:flex;flex-direction:column;gap:14px}
.pay-preview{display:flex;flex-direction:column;gap:6px;box-sizing:border-box;padding:var(--sp-14) var(--sp-16);border-radius:12px;background:var(--surface)}
.pay-preview-text{margin:0 0 var(--sp-6)}
.pay-features{display:flex;flex-direction:column;gap:10px}
.pay-feature{display:flex;align-items:center;gap:12px;font-size:15px}
.pay-feature-tick{width:22px;height:22px;border-radius:50%;background:var(--mint);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:var(--fs-small);font-weight:700;flex-shrink:0}
.pay-price-card{gap:12px}
.pay-price-card b{font-family:var(--serif);font-size:32px;font-weight:500}
.pay-methods{display:flex;gap:8px;justify-content:center}
.pay-methods span{font-size:var(--fs-small);font-weight:700;padding:var(--sp-6) var(--sp-10);border-radius:6px;background:rgba(255,255,255,.12);color:var(--brand-deep-ink)}
.pay-quiet{margin:0;font-size:var(--fs-small);line-height:1.5;color:var(--brand-deep-soft);text-align:center}
.pay-footnote{text-align:center;margin:0}

/* "Filling it in online?" paste view (app/attendance-allowance/app/js/
   paste.js) - a list of every plain-wording answer, each with a copy
   button, a character count and a "Done" tick, meant to sit beside the
   DWP site in another window. On phone, only the current answer shows
   (.paste-card.current) with its own prev/next nav; from 900px (the same
   breakpoint the rest of this app's desktop layout uses) every answer
   shows at once as a plain list instead, and the nav is hidden - see
   prompts/aa-paste-view.md. */
.paste-note{background:var(--mint);border-radius:10px;padding:var(--sp-12) var(--sp-16);font-size:var(--fs-small);color:var(--accent);margin-bottom:var(--sp-16)}
.paste-list{display:flex;flex-direction:column;gap:14px}
.paste-card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:var(--sp-4)}
.paste-card-head h2{font:600 1.05rem var(--sans);margin:0}
.paste-count{font-size:var(--fs-small);color:var(--soft);white-space:nowrap}
.paste-toggle{display:flex;gap:8px;margin:var(--sp-8) 0}
.paste-toggle button{min-height:36px;padding:0 var(--sp-14);border-radius:20px;border:1px solid var(--line);background:var(--page);font-size:var(--fs-small);font-weight:600;color:var(--soft)}
.paste-toggle button[aria-pressed="true"]{border-color:var(--accent);background:var(--mint);color:var(--accent)}
.paste-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:var(--sp-8)}
.paste-done{display:flex;align-items:center;gap:8px;font-size:var(--fs-small);font-weight:600;color:var(--accent)}
.paste-nav{display:none}
@media(max-width:899px){
  .paste-card{display:none}
  .paste-card.current{display:block}
  .paste-nav{display:flex;gap:10px;margin-top:var(--sp-16)}
  .paste-nav button{flex:1;min-height:52px}
}

.go,.wide{display:block;width:100%;min-height:56px;border-radius:12px;padding:var(--sp-12) var(--sp-20);font-size:1.05rem}
.go{background:var(--accent);color:var(--accent-ink);border:1.5px solid var(--accent)}
.wide{background:var(--page);border:1px solid var(--line);margin-top:var(--sp-12)}
.go.wide{background:var(--accent);border-color:var(--accent)}
.link{background:none;border:0;padding:0;min-height:48px;color:var(--accent);text-decoration:underline;text-underline-offset:4px;font-weight:600;font-size:.98rem;flex:none}

/* A disabled Next/Continue must look disabled, not just behave that way
   (item 6, prompts/pip-remock-fixes-2026-09-24.md) - muted fill and text,
   no hover (none of these buttons have one to begin with), cursor
   not-attempted, --soft on --hair keeps ~5.9:1 contrast on the label. */
.go:disabled,.wide:disabled,.mk-btn:disabled,.mk-btn.primary:disabled,.mk-btn.quiet:disabled,.mk-btn.mint:disabled,.nav #next:disabled{
  background:var(--hair);color:var(--soft);border-color:var(--hair);cursor:not-allowed;
}

.nav{position:fixed;left:0;right:0;bottom:0;background:var(--page);border-top:1px solid var(--hair);padding:var(--sp-12) var(--sp-20) calc(var(--sp-12) + env(safe-area-inset-bottom,0px));z-index:5}
.nav div{max-width:var(--w-read);margin:0 auto;display:flex;gap:12px;align-items:center}
.nav #back{flex:none;min-width:96px;min-height:56px;padding:0 var(--sp-20);background:var(--page);border:1px solid var(--line);border-radius:12px;color:var(--ink);font-weight:600}
.nav #next{flex:1;min-height:56px;border-radius:12px;background:var(--accent);color:var(--accent-ink);border:1.5px solid var(--accent)}
/* Desktop only (see design/app-mock-desktop-question.html) - in normal flow
   below the card and the static nav, so it can never overlap either. */
.app-foot{display:none}

/* Desktop (min-width 900px): app pages sit in a centred 760px white card on
   a pale page background; the pack screen breaks out of that card into a
   full-width dark band + a row of four tiles instead - see
   design/app-mock-desktop-question.html, design/app-mock-desktop-pack.html.
   #app carries a "pack" class only while the pack screen is showing (see
   app/app/js/main.js's render()), so this is the one screen styled
   differently, not a new interaction. */
@media(min-width:900px){
  body:has(main#app){background:var(--surface)}
  main.app-main{max-width:680px;margin:var(--sp-32) auto var(--sp-48);padding:var(--sp-20) var(--sp-40) var(--sp-32);background:var(--page);border:1px solid var(--hair);border-radius:20px}
  main#app.pack{max-width:1280px;margin:0 auto;padding:0 0 var(--section-pad);background:transparent;border:0}
  main#app.paste{max-width:680px;margin:var(--sp-48) auto;padding:var(--sp-48) var(--sp-56) var(--sp-48);background:var(--page);border:1px solid var(--hair);border-radius:22px}
  /* Back/Next sit 24px below the card, not ~70px (main.app-main's own
     48px margin-bottom, pulled back up by 24 here) - question-spacing-
     focus item 3. .nav div's max-width matches the card's own content
     box (680px outer, minus 40px padding and the 1px border on each side:
     598px), not its outer edge, so the buttons line up with the card's
     text/fields, not its border. */
  .nav{position:static;background:transparent;border-top:0;margin-top:calc(var(--sp-24) * -1);padding:0 0 var(--sp-48)}
  .nav div{max-width:598px}
  .app-foot{display:block;max-width:none;margin:0;padding:0 var(--sp-20) var(--sp-32);text-align:center;font-size:var(--fs-small);color:var(--soft)}
  .restart-btn{width:44px;height:44px}
  main#app.pack .pack-top{max-width:1200px;margin:0 auto;padding:var(--sp-16) var(--sp-64) var(--sp-12)}
  .opts button,.checks button{border-radius:14px}
  .tiles{flex-direction:row;align-items:stretch;flex-wrap:wrap;max-width:1200px;margin:var(--sp-32) auto 0;padding:0 var(--sp-64)}
  .tile{flex:1 1 260px}
  .save-strip{flex-direction:row;align-items:center;justify-content:space-between;max-width:1200px;margin:var(--sp-16) auto 0}
  .save-strip .wide{width:auto;flex:none}
}

/* ---------------------------------------------------------------------
   Marketing / content pages (homepage, guides, check, about, privacy,
   terms) - the shared header and footer, and the approved AA homepage
   design (design/homepage-mock-v2.html), reproduced with the site's own
   tokens instead of a separate stylesheet. Every selector here is scoped
   under .mk so it can never affect the interview app's own screens, which
   keep their existing rules above untouched. See tools/render_site.mjs.
   --------------------------------------------------------------------- */
.mk{font-size:var(--fs-body)}
.mk-wrap{max-width:calc(var(--w-wide) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.mk-center{text-align:center;display:flex;flex-direction:column;align-items:center}

/* Header: mark + wordmark, shared across every page on the marketing
   (threesisters.app) and landing (www) hosts - see prompts/
   rebuild-www-and-homepage.md item 4. Exactly var(--head-h) tall (112px
   from 641px, 80px on phones) and fully opaque in light and dark, so
   nothing shows through it when scrolled. Logo on the left, nav on the
   right; the independence line lives in the footer. */
.mk-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--page);border-bottom:1px solid var(--hair)}
.mk-head .mk-wrap{display:flex;align-items:center;justify-content:space-between;height:var(--head-h)}
/* The brand lockup - mark + live-text wordmark - the one component every
   header (landing, AA homepage, guides, check, helper app), footer and
   dark band uses: tools/render_site.mjs's lockup(), and nowhere else.
   design/brand/mark*.svg have a tight viewBox (the artwork fills the
   box), so the mark's box is the artwork's own. 44px mark / 27px wordmark
   in desktop headers, 40/24 in the helper app and on phones, 34/20 in
   footers; the 1px nudge sits the wordmark's x-height on the mark's
   centre line. Colours are --ink/--accent (equal to #14213D/#1E5A46 in
   light mode) so the wordmark keeps its contrast when dark mode flips the
   header's own background; .lockup-dark is the fixed
   #FFFFFF/#7CC7A6 pair for a fixed dark brand band (CLAUDE.md's Fixed
   brand colours), with mark-dark.svg. */
.lockup{--mark:44px;--wm:27px;display:flex;align-items:center;gap:12px;flex:none;text-decoration:none}
.lockup-mark{display:block;flex:none;width:var(--mark);height:var(--mark)}
.lockup-wm{font-family:var(--serif);font-size:var(--wm);line-height:1;letter-spacing:-0.01em;white-space:nowrap;transform:translateY(1px)}
.lockup-wm b{font-weight:600;font-style:normal;color:var(--ink)}
.lockup-wm i{font-weight:500;font-style:italic;color:var(--accent)}
.lockup-dark .lockup-wm b{color:#FFFFFF}
.lockup-dark .lockup-wm i{color:#7CC7A6}
/* The brand (the lockup) takes the room the nav leaves, and never shrinks
   under the lockup itself. Sizes and the nav: see "Header" in the
   foundation block at the end of this file. */
.mk-brand{display:flex;align-items:center;flex:1 1 auto;min-width:0}

/* Start-again confirm dialog - a native <dialog>, shown with showModal()
   so it renders in the top layer with a free focus trap and Escape-to-
   cancel - see design/app-mock-desktop-start-again.html. */
.confirm-dialog{border:0;border-radius:20px;padding:var(--sp-32) var(--sp-32) var(--sp-28);max-width:440px;width:calc(100% - 32px);color:var(--ink);background:var(--page);box-shadow:0 24px 60px rgba(15,47,39,.35)}
.confirm-dialog[open]{display:flex;flex-direction:column;gap:14px}
.confirm-dialog::backdrop{background:rgba(15,47,39,.55)}
.confirm-icon{width:44px;height:44px;border-radius:50%;background:var(--chk-red-bg);color:var(--chk-red-ink);display:flex;align-items:center;justify-content:center}
.confirm-dialog h2{margin:0;font:500 1.75rem/1.15 var(--serif)}
.confirm-dialog p{margin:0;font-size:1rem;line-height:1.5;color:var(--soft)}
.confirm-dialog .confirm-save{align-self:flex-start;min-height:var(--tap);font-size:16px}
.confirm-row{display:flex;gap:10px;margin-top:var(--sp-8)}
.confirm-row button{flex:1;min-height:52px;border-radius:12px;font-size:1rem;font-weight:600}
.confirm-cancel{border:1px solid var(--line);background:var(--page);color:var(--ink)}
.confirm-go{border:0;background:#B42318;color:#FFFFFF}

.mk h1,.mk h2,.mk h3{font-family:var(--serif);font-weight:600;letter-spacing:-.015em;line-height:1.1;margin:0;text-wrap:balance}
.mk h1{font-size:var(--fs-display);line-height:1.05;margin-bottom:0}
.mk h2{font-size:var(--fs-h2);line-height:1.2;margin:0 0 var(--sp-16);max-width:26ch}
.mk h3{font-family:var(--sans);font-size:var(--fs-h3);font-weight:600;line-height:1.3;letter-spacing:0}
.mk p{max-width:36em}
.mk-em{font-style:italic;color:var(--accent)}
.mk section.mk-deep .mk-em{color:var(--brand-mint)}
.mk-eyebrow{font:600 var(--fs-tag)/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--sp-14);display:block}
.mk-btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 var(--sp-28);border-radius:12px;font-weight:600;text-decoration:none;font-size:1.02rem;border:1.5px solid transparent}
.mk-btn.primary{background:var(--accent);color:var(--accent-ink)}
.mk-btn.quiet{background:transparent;color:var(--ink);border-color:var(--line)}
.mk-btn.mint{background:var(--brand-mint);color:var(--brand-deep)}
.mk-lede2{font-size:1.12rem;max-width:34em;margin:0}
.mk-lede2+.mk-btn{margin-top:var(--space-block)}
.mk section.mk-alt{background:var(--surface)}
.mk section.mk-deep{background:var(--brand-deep);color:var(--brand-deep-ink)}
.mk section.mk-deep .soft{color:var(--brand-deep-soft)}.mk section.mk-deep h2,.mk section.mk-deep h3{color:var(--brand-deep-ink)}.mk section.mk-deep .mk-eyebrow{color:var(--brand-mint)}

/* Hero - centred (not side-by-side): eyebrow, h1, lede, CTAs, the
   Answer/Check/Download step strip, then the phone mock below, all
   centred - see design/homepage-mock-v2.html. */
.mk-herowrap{background:radial-gradient(900px 500px at 85% 15%,var(--mint) 0%,transparent 60%),linear-gradient(180deg,var(--page),var(--surface))}
.mk-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
.mk-hero .mk-sub{font:600 1.05rem/1.4 var(--sans);color:var(--ink);margin:0;max-width:30em}
.mk-hero .lede{font-size:1.2rem;margin:0;max-width:30em}
.mk-cta-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
@media(max-width:640px){.mk-cta-row .mk-btn{width:100%}}

/* Answer / Check / Download step strip - shared by the homepage hero and
   the landing hero (design/landing-mock.html, design/homepage-mock-v2.html) */
.mk-stepstrip{display:flex;align-items:center;gap:24px;font-size:var(--fs-small);font-weight:500}
.mk-stepstrip span.mk-stepitem{display:flex;align-items:center;gap:10px}
.mk-stepnum{width:28px;height:28px;border-radius:50%;background:var(--mint);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font:600 .95rem var(--serif);flex:none}
.mk-steprule{width:28px;height:1px;background:var(--line)}
@media(max-width:480px){.mk-stepstrip{gap:14px;font-size:var(--fs-small)}.mk-steprule{width:16px}}

.mk-grid{display:grid;gap:18px;margin-top:var(--sp-32)}
@media(min-width:760px){.mk-grid.three{grid-template-columns:repeat(3,1fr)}.mk-grid.two{grid-template-columns:repeat(2,1fr)}}
.mk-card{background:var(--page);border:1px solid var(--hair);border-radius:20px;padding:var(--sp-28);text-align:left}
.mk-card p{margin:0;font-size:1rem;color:var(--soft)}
.mk-card h3{margin-bottom:var(--sp-8)}
/* Bare numeral, no background tile - Newsreader 600, 32px, mint - matching
   .mk-tool-num's own numbered-card numeral below (see design/
   homepage-mock-v2.html, design/landing-mock.html). */
.mk-card .mk-ic{color:var(--brand-mint);margin-bottom:var(--sp-16);font:600 2rem/1 var(--serif)}
/* dark variant, used by "Why claims fail" on the dark band */
.mk section.mk-deep .mk-card{background:color-mix(in srgb,var(--brand-deep) 85%,white 6%);border-color:color-mix(in srgb,var(--brand-accent) 60%,var(--brand-deep))}
.mk section.mk-deep .mk-card p{color:var(--brand-deep-soft)}
.mk section.mk-deep .mk-card h3{color:var(--brand-deep-ink)}

/* "The money" - big-number stat cards, not the old dark border-left list */
.mk-statcards{display:grid;gap:18px;margin-top:var(--sp-32);width:100%}
@media(min-width:760px){.mk-statcards{grid-template-columns:repeat(3,1fr)}}
.mk-statcards div{background:var(--surface);border-radius:18px;padding:var(--sp-28) var(--sp-20);text-align:left}
.mk-statcards b{display:block;font:500 3rem/1 var(--serif);letter-spacing:-.02em;color:var(--accent);margin-bottom:var(--sp-8)}
.mk-statcards span{font-size:.95rem;color:var(--soft)}
.mk-statcards small{display:block;margin-top:var(--sp-10);font-size:.95rem;color:var(--soft)}
.mk-statcards small a{display:inline-flex;align-items:center;min-height:var(--tap)}

.mk-split{display:grid;gap:24px;margin-top:var(--sp-32);align-items:stretch;width:100%}
@media(min-width:860px){.mk-split{grid-template-columns:1.4fr 1fr}}
.mk-tick{list-style:none;padding:0;margin:0;text-align:left}
.mk-tick li{padding:var(--sp-12) 0 var(--sp-12) var(--sp-32);position:relative;border-top:1px solid var(--hair)}
.mk-tick li:first-child{border-top:0}
.mk-tick li::before{content:"";position:absolute;left:0;top:16px;width:20px;height:20px;border-radius:50%;background:var(--sel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.5l2.6 2.6L11 4.5' fill='none' stroke='%231E5A46' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.mk-tick-wrap{background:var(--page);border:1px solid var(--hair);border-radius:20px;padding:var(--sp-32);text-align:left}
/* the dark price panel, right-hand side of "What you get" */
.mk-price{background:var(--brand-deep);color:var(--brand-deep-ink);border-radius:20px;padding:var(--sp-32);text-align:left;display:flex;flex-direction:column;gap:8px;justify-content:center}
.mk-price .mk-eyebrow{color:var(--brand-mint);margin-bottom:0}
.mk-price .amt{font:500 3.6rem/1 var(--serif);letter-spacing:-.02em;margin:var(--sp-4) 0}
.mk-price p{font-size:.95rem;color:var(--brand-deep-soft);margin:0}
.mk-price .mk-btn{width:100%;margin-top:var(--sp-10)}
.mk-honest{margin-top:var(--sp-32);font-size:var(--fs-small);color:var(--soft);text-align:center}

.mk-guide{display:block;text-decoration:none;color:inherit;background:var(--page);border:1px solid var(--hair);border-radius:16px;padding:var(--sp-24);text-align:left}
.mk-guide h3{margin-bottom:var(--sp-6)}.mk-guide p{margin:0;font-size:.98rem;color:var(--soft)}
.mk-guide span{display:inline-block;margin-top:var(--sp-14);color:var(--accent);font-weight:600;font-size:.95rem}
.mk-faqlist{width:100%;max-width:720px;margin:0 auto}
.mk details{background:var(--page);border:1px solid var(--hair);border-radius:12px;padding:var(--sp-16) var(--sp-20);margin-top:var(--sp-10);text-align:left}
.mk summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px;font-size:1.05rem}
.mk summary::-webkit-details-marker{display:none}.mk summary::after{content:"+";color:var(--accent);font-weight:700}.mk details[open] summary::after{content:"–"}
.mk details p{margin:var(--sp-10) 0 0;font-size:1rem;color:var(--soft)}
.mk-final h2{margin:0 auto var(--sp-14);max-width:18ch}.mk-final p{margin:0 auto var(--sp-28)}

/* content pages (guides, about, privacy, terms) reuse the interview's
   own narrow-column type styles (h1/h2/p/.plain lists/.note/.todo) inside
   a .mk-wrap so long-form text stays readable under the shared header */
.mk-content{max-width:calc(var(--w-read) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.mk-content h1{font:500 var(--fs-h1)/1.1 var(--serif);letter-spacing:-.01em;margin:0 0 var(--sp-14);text-wrap:balance}
.mk-content h2{font:500 var(--fs-h2)/1.2 var(--serif);margin:var(--sp-48) 0 var(--sp-12);text-wrap:balance}
.mk-content p{margin:0 0 var(--sp-16);max-width:34em}

/* ---------------------------------------------------------------------
   Landing page (www.threesisters.app) - design/landing-mock.html,
   reproduced pixel-for-pixel at the 1440x900 viewport it was designed to
   (unlike the rest of the site's fluid rem/clamp scale): a fixed header,
   a centred hero, and a dark tools band that grows to fill whatever
   vertical space is left, so the whole page fits without scrolling at
   1440x900. Below 900px tall the tools band simply grows past the fold
   (a real page cannot force a shorter viewport to fit); below 900px wide
   the three-column layouts collapse to one column - see the media query
   at the bottom of this block.
   --------------------------------------------------------------------- */
.mk-landing{display:flex;flex-direction:column;min-height:100vh}
.mk-landing .mk-head,.mk-landing .mk-foot{flex:none}
.mk-landing main{flex:1;display:flex;flex-direction:column}
.mk-landing-hero{flex:none;padding-inline:0;display:flex;flex-direction:column;align-items:center;text-align:center}
.mk-landing-hero .mk-center{gap:24px}
.mk-landing-title{display:flex;flex-direction:column;align-items:center;gap:10px}
.mk-landing-title .mk-eyebrow{margin-bottom:0}
.mk-landing-hero h1{font-size:clamp(2.4rem,5.2vw,3.6rem);max-width:900px;margin-top:0;overflow-wrap:break-word}
/* The hero's own .mk-wrap is a flex item, so it would otherwise grow to its
   content's min-content width and overflow a 375px phone. */
.mk-landing-hero .mk-wrap{width:100%;min-width:0;box-sizing:border-box}
.mk-stepstrip{flex-wrap:wrap;justify-content:center;max-width:100%}
.mk-landing-hero .mk-own-words{margin:0;font-size:var(--fs-small);max-width:560px;text-wrap:balance}
.mk-landing-hero .lede{font-size:1.15rem;color:var(--soft);max-width:560px;margin:0}
.mk-tools-band{box-sizing:border-box;padding-inline:var(--sp-96);background:var(--brand-deep);color:var(--brand-deep-ink);flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.mk-tools-band>.mk-wrap{max-width:1200px;width:100%;padding:0;gap:64px}
.mk-tools-band .mk-landing-title{gap:10px}
.mk-tools-band .mk-eyebrow{color:var(--brand-mint);margin-bottom:0}
.mk-tools-band h2{color:#FFF;margin-bottom:0}
.mk-tools-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px;align-items:stretch;width:100%;max-width:1200px}
.mk-tools-grid.pip-live{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;max-width:1248px}
.mk-tool{box-sizing:border-box;border-radius:20px;padding:var(--sp-40) var(--sp-40);min-height:420px;display:flex;flex-direction:column;gap:14px;text-align:left}
.mk-tool.live{background:var(--page)}
.mk-tool:not(.live){background:color-mix(in srgb,var(--brand-deep) 80%,black 8%);border:1px solid var(--brand-accent);opacity:.92}
.mk-tool.soon{background:rgba(255,255,255,.04);border:1.5px solid rgba(124,199,166,.35);opacity:1}
.mk-tool-top{display:flex;align-items:center;justify-content:space-between}
.mk-tool-num{font:600 2rem/1 var(--serif);color:var(--brand-mint)}
.mk-tool:not(.live) .mk-tool-num{opacity:.6}
.mk-tool-badge{font-size:var(--fs-tag);font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:var(--sp-6) var(--sp-12);border-radius:999px}
.mk-tool.live .mk-tool-badge{background:var(--brand-mint-pale);color:var(--brand-accent)}
.mk-tool:not(.live) .mk-tool-badge{background:transparent;color:var(--brand-mint);box-shadow:inset 0 0 0 1.5px rgba(124,199,166,.55)}
.mk-tool-title{display:flex;flex-direction:column;gap:8px}
.mk-tool-eyebrow{font:600 var(--fs-tag)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.mk-tool:not(.live) .mk-tool-eyebrow{color:var(--brand-mint)}
.mk-tool h3{font-size:1.5rem;color:var(--ink)}
.mk-tool:not(.live) h3{color:#FFF}
.mk-tool p{margin:0;font-size:.95rem;flex-grow:1;color:var(--soft)}
.mk-tool:not(.live) p{color:var(--brand-deep-soft)}
.mk-tool-foot{display:flex;flex-direction:column;gap:18px}
.mk-tool-tags{display:flex;gap:8px;flex-wrap:wrap}
.mk-tool-price{margin:0;font-size:var(--fs-small);font-weight:600;color:var(--ink)}
.mk-tool-tags span{font-size:var(--fs-small);font-weight:600;padding:var(--sp-6) var(--sp-12);border-radius:999px;background:var(--surface);color:var(--ink)}
.mk-tool:not(.live) .mk-tool-tags span{background:rgba(255,255,255,.08);color:var(--brand-deep-soft)}
.mk-tool-slot{display:flex;align-items:center;justify-content:center;min-height:56px;border-radius:12px;font:600 .95rem var(--sans);border:1.5px dashed rgba(124,199,166,.4);color:var(--brand-deep-soft)}
.mk-tools-band .mk-note{margin:0;font-size:var(--fs-small);color:var(--brand-deep-soft);max-width:520px}
.mk-not-sure{margin:calc(var(--sp-40) * -1) 0 calc(var(--sp-56) * -1);font-size:var(--fs-small);color:var(--brand-deep-soft)}
.mk-not-sure a{color:var(--brand-mint-pale)}
@media(max-width:900px){
  .mk-tools-band{padding-left:var(--sp-24);padding-right:var(--sp-24)}
}
@media(max-width:640px){
  .mk-tools-grid,.mk-tools-grid.pip-live{grid-template-columns:1fr;gap:24px}
  .mk-tool{min-height:0}
  .mk-tool .mk-btn{width:100%}
}

/* ---------------------------------------------------------------------
   Guide question pages (/guides/<slug>/) - design/guide-mock.html, see
   prompts/seo-discovery.md item 2. "gd-" prefixed so nothing here can
   collide with .mk-content (about/privacy/terms have since moved off it
   too - see renderInfoPage in tools/render_site.mjs) - except .gd-crumb
   and .gd-author, which prompts/seo-aa-pass.md's trust-signal/breadcrumb
   work deliberately reuses site-wide, rather than maintaining a second,
   near-identical copy of each. The old .gd-article/.gd-head wrapper this
   section used before the site polish pass (prompts/
   site-polish-2026-09-24.md item A) is gone - every AA plain-answer page
   now sits in the shared .pip-hero/.gd-layout shape instead.
   --------------------------------------------------------------------- */
.gd-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:var(--fs-small);color:var(--soft)}
.gd-crumb a{color:var(--soft);text-decoration:none}
.gd-crumb a:hover{color:var(--accent)}
.gd-checked{font-size:var(--fs-small);color:var(--soft)}
/* Long plain answers (AA SEO pass): the direct answer under the H1, and
   the "In short" box at the top of the body. */
.pip-hero .gd-direct{margin:var(--sp-12) 0 var(--sp-12)}
.gd-inshort{background:var(--surface);border-radius:14px;padding:var(--sp-20) var(--sp-24)}
.gd-inshort h2{font:500 1.3rem/1.2 var(--serif);margin:0 0 var(--sp-8)}
.mk-trader{font-size:inherit;color:inherit}
/* Site polish (24 Sep 2026, prompts/site-polish-2026-09-24.md item A): the
   AA plain-answer short-answer card now reuses .pip-answer's dark-card
   shape directly (see renderGuideQuestion) rather than its own light mint
   card, so .gd-answer only still needs the yes/no badge sitting beside the
   opening sentence. */
.gd-yn-badge{flex:none;display:inline-flex;align-items:center;justify-content:center;padding:var(--sp-4) var(--sp-12);margin-right:var(--sp-8);border-radius:999px;background:var(--brand-mint);color:var(--brand-deep);font:700 var(--fs-small) var(--sans);letter-spacing:.02em;vertical-align:middle}
.gd-rates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:var(--sp-4)}
.gd-rates div{background:var(--surface);border-radius:14px;padding:var(--sp-20) var(--sp-20);display:flex;flex-direction:column;gap:4px}
.gd-rates b{font:500 2.1rem/1 var(--serif);letter-spacing:-.02em;color:var(--accent)}
.gd-rates span{font-size:var(--fs-small);color:var(--soft)}
.gd-sources{display:flex;flex-direction:column;gap:8px;padding-top:var(--sp-20);border-top:1px solid var(--hair);font-size:var(--fs-small);color:var(--soft);line-height:1.6}
.gd-author{margin:0 !important}
/* .mk-content pages (about/privacy/terms, and every SP-Info page) reuse
   the same visible trust-signal styling as .gd-sources - see
   renderAboutPage etc. in tools/render_site.mjs. */
.mk-content blockquote,.pip-body blockquote{margin:0 0 var(--sp-16);padding:var(--sp-14) var(--sp-20);border-left:3px solid var(--accent);background:var(--surface);border-radius:0 12px 12px 0;font-style:italic}
.mk-content blockquote p,.pip-body blockquote p{margin:0;max-width:none}

/* Site polish - shared dark panel for a hero's right-hand slot when it
   needs a heading + button rather than .pip-answer's eyebrow + short
   answer (the guide index's "Ready to claim?" card, the PIP questions
   page's "Start here" card). Sits inside the same .pip-hero-grid. */
.dk-panel{background:var(--brand-deep);color:var(--brand-deep-ink);border-radius:18px;padding:var(--sp-28);display:flex;flex-direction:column;gap:10px;max-width:380px}
.dk-panel .mk-eyebrow{color:var(--brand-mint);margin-bottom:0}
.dk-panel h2{font:500 1.3rem/1.25 var(--serif);margin:0;color:var(--brand-deep-ink)}
.dk-panel p{margin:0;color:var(--brand-deep-soft);font-size:var(--fs-small)}
.dk-panel .mk-btn{margin-top:var(--sp-6);width:100%}
.pip-hero-grid.center{align-items:center}

/* AA plain-answer body/side-panel grid (SP-Answer) - .pip-layout's rail
   column repurposed for a sticky mint helper panel instead of a contents
   list, gd-body/gd-rates above sit inside the .pip-body column unchanged. */
.gd-layout{max-width:calc(var(--w-wide) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter);display:flex;flex-direction:column;gap:28px}
@media(min-width:900px){.gd-layout{display:grid;grid-template-columns:1fr 280px;gap:40px;align-items:start}}
.gd-side-panel{background:var(--mint);border-radius:18px;padding:var(--sp-24) var(--sp-24);display:flex;flex-direction:column;gap:12px}
@media(min-width:900px){.gd-side-panel{position:sticky;top:var(--sticky-top)}}
.gd-side-panel h2{font:500 1.15rem/1.25 var(--serif);margin:0}
.gd-side-panel .mk-btn{width:100%}
.gd-side-panel .gd-side-link{color:var(--accent);text-decoration:underline;font-size:var(--fs-small);text-align:center}
.gd-side-panel .gd-free{font-size:var(--fs-small);color:var(--soft);text-align:center;margin:0}

/* Related as rows with an arrow (SP-Answer), replacing the old 3-up card
   grid for AA plain-answer pages only - the 6 long AA guides and every
   PIP guide keep the 3-card .pip-related-grid look. */
.gd-related{padding-top:var(--sp-24);border-top:1px solid var(--hair)}
.gd-related-rows{display:flex;flex-direction:column}
.gd-related-rows a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:var(--sp-16) var(--sp-4);border-top:1px solid var(--hair);text-decoration:none;color:var(--ink);font-weight:500}
.gd-related-rows a:first-child{border-top:0}
.gd-related-rows a::after{content:"→";color:var(--accent);flex:none}
.gd-related-rows a:hover{color:var(--accent)}

/* Guide index "Jump to" chips (SP-Guides-Index) - same pill shape as the
   old .gd-jumplinks, plus a count badge. */
.idx-jump{display:flex;flex-wrap:wrap;gap:8px 10px;margin:var(--sp-28) 0 0}
/* The chips close the hero, inside its own bottom padding (as on the info
   pages' .info-hero) - their bottom margin used to collapse out through
   the hero, leaving the last row sitting on the hero's bottom edge. */
.idx-body{max-width:var(--w-wide)}
.idx-jump a{padding:var(--sp-6) var(--sp-14);border-radius:999px;border:1px solid var(--hair);text-decoration:none;color:var(--ink);font-size:var(--fs-small);font-weight:500;display:inline-flex;align-items:center;gap:6px}
.idx-jump a:hover{border-color:var(--accent)}
.idx-jump .count{background:var(--mint);color:var(--accent);border-radius:999px;padding:var(--sp-2) var(--sp-8);font-size:var(--fs-small);font-weight:700}

/* Eligibility check (SP-Check): a card around the running question, and a
   visual progress bar above it. Back/Next reuse .mk-btn; Next's disabled
   look already comes from the shared .mk-btn:disabled rule above. */
.chk-progress{height:6px;border-radius:999px;background:var(--hair);overflow:hidden;margin-bottom:var(--sp-20)}
.chk-progress-fill{height:100%;background:var(--accent);border-radius:999px;transition:width .2s ease}
.chk-card{border:1px solid var(--hair);border-radius:20px;padding:var(--sp-28) var(--sp-24);background:var(--page)}
.chk-nav{display:flex;justify-content:space-between;gap:12px;margin-top:var(--sp-20)}

/* ---------------------------------------------------------------------
   R-PIP-Guide - the shared PIP guide article template (design canvas,
   "Remock 24 Sep" rows): pale hero + dark short-answer panel side by
   side on desktop (stacked on phone), a sticky "in this guide" contents
   list built from the page's own h2s (left rail on desktop, collapsible
   on phone - a single <details class="pip-toc"> does both, see the
   media query below), a 720px body supporting key-fact tiles/numbered
   steps/one note/collapsible details, a dark CTA band routed by topic,
   and 3 related cards before the sources list. Every PIP guide except
   pip-descriptors (its own dark R-Descriptors template below) uses this.
   --------------------------------------------------------------------- */
/* .pip-hero's own pale background (#F3F6F4) is a fixed design colour, like
   the dark marketing bands' --brand-* tokens above - it never becomes a
   dark background under prefers-color-scheme/data-theme. Its descendants
   still reference the theme-adaptive --ink/--soft/--hair/--accent tokens
   though (.gd-crumb, .mk-eyebrow, .pip-chip, h1 em, and so on), which flip
   to light-on-dark values in dark mode - unusable on a background that
   never darkens. Re-declaring those custom properties here, scoped to
   .pip-hero, pins every descendant back to its light-mode colour
   regardless of theme, the same fix .mk-tools-band/.mk-deep already apply
   with their own literal --brand-* values, without touching each of the
   many rules that reference these tokens one by one. */
.pip-hero{background:#F3F6F4;color:#14213D;--page:#FFFFFF;--surface:#F3F6F4;--ink:#14213D;--soft:#4A5670;--line:#C9CFDA;--hair:#E4E7ED;--accent:#1E5A46;--accent-ink:#FFFFFF;--sel:#EEF5F1;--mint:#E7F3EC}
.pip-hero-inner{max-width:calc(var(--w-wide) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.pip-hero-grid{display:flex;flex-direction:column;gap:24px;padding-top:var(--sp-12)}
@media(min-width:900px){.pip-hero-grid{display:grid;grid-template-columns:1fr 340px;gap:32px;align-items:start}}
.pip-hero h1{font:500 var(--fs-h1)/1.1 var(--serif);letter-spacing:-.02em;margin:var(--sp-10) 0 0;text-wrap:balance}
.pip-hero h1 em{font-style:italic;color:var(--accent)}
.pip-hero .lede{font-size:1.1rem;color:var(--soft);margin:var(--sp-12) 0 0;max-width:34em}
.pip-hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin:var(--sp-16) 0 0}
.pip-chip{font-size:var(--fs-small);font-weight:500;color:var(--soft);border:1px solid var(--hair);border-radius:999px;padding:var(--sp-6) var(--sp-12)}
.pip-answer{background:var(--brand-deep);color:var(--brand-deep-ink);border-radius:18px;padding:var(--sp-24) var(--sp-28);margin:0}
.pip-answer .mk-eyebrow{color:var(--brand-mint);margin-bottom:var(--sp-10)}
.pip-answer p{margin:0;font:500 1.15rem/1.4 var(--serif)}

.pip-layout{max-width:calc(var(--w-wide) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter);display:flex;flex-direction:column;gap:28px}
/* A contents sidebar and the body side by side - only when there is a
   sidebar. With the body alone, it keeps one full-width column. */
@media(min-width:900px){.pip-layout:has(>:nth-child(2)){display:grid;grid-template-columns:220px 1fr;gap:40px;align-items:start}}
.pip-toc{border:1px solid var(--hair);border-radius:14px;padding:var(--sp-14) var(--sp-16)}
.pip-toc summary{cursor:pointer;font-weight:600;font-size:var(--fs-small)}
.pip-toc nav{display:flex;flex-direction:column;gap:8px;margin-top:var(--sp-12)}
.pip-toc nav a{color:var(--soft);text-decoration:none;font-size:var(--fs-small);line-height:1.4}
.pip-toc nav a:hover{color:var(--accent)}
@media(min-width:900px){
  .pip-toc{position:sticky;top:var(--sticky-top)}
  .pip-toc summary{cursor:default;pointer-events:none}
  .pip-toc nav{display:flex !important}
}
.pip-body{max-width:var(--w-read);display:flex;flex-direction:column;gap:var(--sp-24);font-size:var(--fs-body);line-height:var(--lh-body)}
.pip-body h2{font:500 var(--fs-h2)/1.2 var(--serif);margin:0}
.pip-body p{margin:0;max-width:none}

.pip-keyfacts{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin:0}
.pip-keyfacts div{background:var(--surface);border-radius:14px;padding:var(--sp-16) var(--sp-20);display:flex;flex-direction:column;gap:4px}
.pip-keyfacts b{font:500 1.7rem/1 var(--serif);letter-spacing:-.02em;color:var(--accent)}
.pip-keyfacts span{font-size:var(--fs-small);color:var(--soft)}

.pip-steps{display:flex;flex-direction:column;gap:20px;margin:0}
.pip-step{display:flex;gap:14px}
.pip-step-n{flex:none;width:32px;height:32px;border-radius:50%;background:var(--mint);color:var(--accent);display:flex;align-items:center;justify-content:center;font:600 .95rem var(--serif)}
.pip-step-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.pip-step-body h2{margin:0;font:500 1.1rem/1.2 var(--serif)}
.pip-step-body p{margin:0}

.pip-note{background:var(--mint);border-left:4px solid var(--accent);border-radius:0 14px 14px 0;padding:var(--sp-20) var(--sp-20);margin:0}
.pip-note p{margin:0}
.pip-note b{color:var(--ink)}

.pip-cta{padding:var(--sp-28) var(--sp-28);border-radius:16px;background:var(--brand-deep);color:var(--brand-deep-ink);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:0}
.pip-cta strong{font:500 1.3rem/1.25 var(--serif);display:block}
.pip-cta .sub{font-size:var(--fs-small);color:var(--brand-deep-soft);margin:var(--sp-4) 0 0}
.pip-cta .row{display:flex;gap:10px;flex-wrap:wrap}
.pip-cta .mk-btn.quiet{border-color:var(--brand-mint);color:var(--brand-deep-ink)}
.pip-cta .mk-btn.mint{background:var(--brand-mint);color:var(--brand-deep)}

.pip-related h2{font:500 1.4rem/1.15 var(--serif);margin:0 0 var(--sp-14)}
.pip-related-grid{display:grid;gap:14px}
@media(min-width:640px){.pip-related-grid{grid-template-columns:repeat(3,1fr)}}
/* The end of every long guide: the dark CTA band, Related and Sources (with
   "Written and checked by") - two blocks' worth of space between each, and
   <main>'s own padding-bottom below the last. */
.gd-tail{display:flex;flex-direction:column;gap:calc(var(--space-block) * 2)}

/* Two-route block: aa-or-pip, and any other guide covering both benefits
   (renderGuideQuestion's "twoRoute" section type). Plain link cards, not
   a form control, so no radio semantics here. */
.pip-route-cards{display:grid;gap:14px;margin:var(--sp-4) 0}
@media(min-width:560px){.pip-route-cards{grid-template-columns:repeat(2,1fr)}}
.pip-route-card{display:block;border:1px solid var(--line);border-radius:16px;padding:var(--sp-20) var(--sp-24)}
.pip-route-card .k{display:block;font-size:var(--fs-tag);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--sp-6)}
.pip-route-card strong{display:block;font:500 1.6rem/1.2 var(--serif);color:var(--ink);margin-bottom:var(--sp-6)}
.pip-route-card .sub{display:block;font-size:var(--fs-small);color:var(--soft);margin-bottom:var(--sp-16)}
.pip-route-btn{width:100%;text-align:center}
/* SP-404: the hero keeps its own bottom padding, so the route cards start
   clear of its edge; the links below them get a standard block gap. */
.nf-body{max-width:var(--w-wide);display:flex;flex-direction:column;gap:var(--space-block)}
.nf-body>*{margin:0}

/* ---------------------------------------------------------------------
   R-Descriptors (/pip/guides/pip-descriptors/) - dark hero, grouped
   sticky contents (Daily living 1-10 / Mobility 11-12), 3 rule tiles,
   one collapsible card per activity (letter badge, plain-English line,
   points table, "Top score N" in the summary) - first activity open,
   the rest collapsed.
   --------------------------------------------------------------------- */
.pip-desc-hero{background:var(--brand-deep);color:var(--brand-deep-ink);padding-inline:var(--gutter)}
.pip-desc-hero-inner{max-width:var(--w-wide);margin:0 auto}
.pip-desc-hero .gd-crumb{margin-bottom:var(--sp-16)}
.pip-desc-hero h1{font:500 2.3rem/1.12 var(--serif);margin:var(--sp-10) 0 0;max-width:22em}
.pip-desc-hero .mk-eyebrow{color:var(--brand-mint)}
.pip-desc-hero p.lede{color:var(--brand-deep-soft);margin:var(--sp-12) 0 0;max-width:34em;font-size:1.05rem}
.pip-rule-tiles{display:grid;gap:14px;margin:var(--sp-28) 0 0}
@media(min-width:640px){.pip-rule-tiles{grid-template-columns:repeat(3,1fr)}}
.pip-rule-tiles div{background:color-mix(in srgb,var(--brand-deep) 85%,white 6%);border:1px solid color-mix(in srgb,var(--brand-accent) 60%,var(--brand-deep));border-radius:14px;padding:var(--sp-16) var(--sp-20);font-size:var(--fs-small);color:var(--brand-deep-ink)}

.pip-desc-toc{border:1px solid var(--hair);border-radius:14px;padding:var(--sp-14) var(--sp-16)}
.pip-desc-toc summary{cursor:pointer;font-weight:600;font-size:var(--fs-small)}
.pip-desc-toc-group{margin-top:var(--sp-12)}
.pip-desc-toc-group .pip-desc-toc-label{margin:0 0 var(--sp-6);font-weight:600;font-size:var(--fs-tag);letter-spacing:.05em;text-transform:uppercase;color:var(--soft)}
.pip-desc-toc-group nav{display:flex;flex-direction:column;gap:6px}
.pip-desc-toc-group nav a{color:var(--soft);text-decoration:none;font-size:var(--fs-small)}
.pip-desc-toc-group nav a:hover{color:var(--accent)}
@media(min-width:900px){
  .pip-desc-toc{position:sticky;top:var(--sticky-top)}
  .pip-desc-toc summary{cursor:default;pointer-events:none}
  .pip-desc-toc-group{display:block !important}
}

.pip-activity{border:1px solid var(--hair);border-radius:16px;padding:var(--sp-20) var(--sp-24);margin:0}
.pip-activity summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:14px}
.pip-activity summary::-webkit-details-marker{display:none}
.pip-activity summary::marker{content:""}
.pip-activity .pip-activity-letter{flex:none;width:34px;height:34px;border-radius:50%;background:var(--mint);color:var(--accent);display:flex;align-items:center;justify-content:center;font:600 1rem var(--serif)}
.pip-activity summary h3{margin:0;font:500 1.15rem/1.3 var(--serif);flex:1}
.pip-activity summary .meta{font-size:var(--fs-small);color:var(--soft);white-space:nowrap}
.pip-activity[open] summary{margin-bottom:var(--sp-16)}
.pip-activity table{width:100%;border-collapse:collapse;font-size:var(--fs-small);margin-top:var(--sp-6)}
.pip-activity table td,.pip-activity table th{padding:var(--sp-8) var(--sp-6);border-bottom:1px solid var(--hair);text-align:left;vertical-align:top}
.pip-activity table th{color:var(--soft);font-weight:600;font-size:var(--fs-small)}

/* ---------------------------------------------------------------------
   Points checker (/pip/points-checker/) - the two-column dark landing
   hero with its example card, the three-block award scale (shared by the
   hero, the "How it works" explainer and the live result), grouped
   desktop sidebar labels, the phone 10+2 split progress bar, the
   running-state app header, the dark arrival band, the side-by-side
   result cards and the closing "Next step" band.
   --------------------------------------------------------------------- */
.pc-hero-grid{display:flex;flex-direction:column;gap:32px;padding:var(--sp-8) 0 var(--sp-12)}
@media(min-width:900px){.pc-hero-grid{display:grid;grid-template-columns:1fr 340px;gap:48px;align-items:center;padding:var(--sp-24) 0}}
.pc-hero-copy h1{margin:var(--sp-12) 0 0}
.pc-hero-copy h1 .mk-em{display:block;font-size:.6em;margin-top:var(--sp-6)}
.pc-hero-copy .lede{margin:var(--sp-16) 0 0;max-width:34em}
.pc-hero-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:var(--sp-24)}
.pc-hero-cta .go{display:inline-block;width:auto;padding:var(--sp-14) var(--sp-32)}
.pc-hero-note{font-size:var(--fs-small);max-width:16em}
.pc-hero-example{display:flex;justify-content:center}
.pc-example-card{position:relative;border:1px solid var(--line);border-radius:16px;padding:var(--sp-24) var(--sp-24) var(--sp-20);background:var(--page);color:var(--ink);max-width:340px;width:100%}
/* The "Example only" tag sits inside the card, top left - never across
   its border (tests/layout-spacing.spec.mjs check h). */
.pc-example-card .tag{display:inline-block;margin:0;font-size:var(--fs-tag);font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--brand-mint);color:var(--brand-deep);padding:var(--sp-4) var(--sp-10);border-radius:999px}

.pc-scale3{display:flex;gap:8px;margin:var(--sp-12) auto 0;max-width:560px}
.pc-scale3-seg{flex:1;text-align:center;padding:var(--sp-10) var(--sp-6);border-radius:10px;background:var(--surface);border:1px solid var(--line)}
.pc-scale3-seg b{display:block;font:700 .95rem/1.2 var(--sans);color:var(--ink)}
.pc-scale3-seg span{display:block;font-size:var(--fs-small);color:var(--soft);margin-top:var(--sp-2)}
.pc-scale3-seg.current{background:var(--accent);border-color:var(--accent)}
.pc-scale3-seg.current b,.pc-scale3-seg.current span{color:var(--accent-ink)}
.mk section.mk-deep .pc-scale3-seg{background:color-mix(in srgb,var(--brand-deep-ink) 12%,transparent);border-color:transparent}
.mk section.mk-deep .pc-scale3-seg b{color:var(--brand-deep-ink)}
.mk section.mk-deep .pc-scale3-seg span{color:var(--brand-deep-soft)}
.mk section.mk-deep .pc-scale3-seg.current{background:var(--brand-mint)}
.mk section.mk-deep .pc-scale3-seg.current b,.mk section.mk-deep .pc-scale3-seg.current span{color:var(--brand-deep)}
/* .pc-example-card keeps its own light card background even inside the
   checker landing's dark hero section - without this, the .mk-deep
   overrides above (and h2's own dark-section colour) leave its text
   low-contrast or invisible against that light background (a11y_test.mjs
   caught this before: color-contrast on nested .soft text and white-on-
   white headings). Higher specificity than the plain .mk-deep rules
   above, so this always wins regardless of source order. */
.mk section.mk-deep .pc-example-card h2{color:var(--ink)}
.mk section.mk-deep .pc-example-card .soft{color:var(--soft)}
.mk section.mk-deep .pc-example-card .pc-scale3-seg{background:var(--surface);border-color:var(--line)}
.mk section.mk-deep .pc-example-card .pc-scale3-seg b{color:var(--ink)}
.mk section.mk-deep .pc-example-card .pc-scale3-seg span{color:var(--soft)}
.mk section.mk-deep .pc-example-card .pc-scale3-seg.current{background:var(--accent);border-color:var(--accent)}
.mk section.mk-deep .pc-example-card .pc-scale3-seg.current b,.mk section.mk-deep .pc-example-card .pc-scale3-seg.current span{color:var(--accent-ink)}

.pc-group-label{font-size:var(--fs-tag);letter-spacing:.06em;text-transform:uppercase;color:var(--soft);margin:var(--sp-14) 0 var(--sp-4);padding:0 var(--sp-12)}
.pc-group-label:first-child{margin-top:0}
.pc-splitbar{display:flex;gap:10px;margin-bottom:var(--sp-6)}
.pc-splitbar-group{display:flex;gap:3px}
.pc-splitbar-group.dl{flex:10}
.pc-splitbar-group.mob{flex:2}
.pc-splitbar-group i{display:block;flex:1;height:6px;border-radius:3px;background:var(--hair)}
.pc-splitbar-group i.done{background:var(--accent)}
@media(min-width:900px){.pc-splitbar{display:none}}

.pc-app-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:var(--sp-16)}
.pc-app-head h1.pc-app-head-title{font:600 1.05rem/1.2 var(--sans);color:var(--ink);margin:0;text-wrap:initial}
.pc-restart{background:none;border:0;color:var(--accent);font-weight:600;font-size:var(--fs-small);padding:0;cursor:pointer;text-decoration:underline}

.pc-arrival{background:var(--brand-deep);color:var(--brand-deep-ink);border-radius:18px;padding:var(--sp-28) var(--sp-24);margin-bottom:var(--sp-16)}
.pc-arrival h2{color:var(--brand-deep-ink);margin:var(--sp-6) 0 0}
.pc-arrival .mk-eyebrow{color:var(--brand-mint);margin-bottom:var(--sp-8)}
.pc-arrival p{color:var(--brand-deep-soft);margin:var(--sp-8) 0 0}

.pc-result-grid{display:flex;flex-direction:column;gap:16px;margin-bottom:var(--sp-20)}
@media(min-width:760px){.pc-result-grid{display:grid;grid-template-columns:1fr 1fr;align-items:start}}
.pc-result-grid>.card{margin:0}
.pc-result-grid .band{margin-top:var(--sp-12)}
.pc-points-total{font:700 2.4rem/1 var(--serif);color:var(--ink);margin:var(--sp-6) 0 0}
.pc-score-list{margin-top:var(--sp-14)}
.pc-score-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:var(--sp-10) 0;border-bottom:1px solid var(--hair)}
.pc-score-row:last-child{border-bottom:0}
.pc-change-link{background:none;border:0;color:var(--accent);font-weight:600;font-size:var(--fs-small);padding:0;text-decoration:underline;cursor:pointer}
.pc-can-tiles{display:grid;gap:14px;grid-template-columns:repeat(2,1fr);margin-top:var(--sp-28)}
@media(min-width:760px){.pc-can-tiles{grid-template-columns:repeat(4,1fr)}}

.pc-next{background:var(--brand-deep);color:var(--brand-deep-ink);border-radius:18px;padding:var(--sp-28) var(--sp-24);text-align:center;margin-top:var(--sp-8);margin-bottom:var(--space-block)}
.pc-next .mk-eyebrow{color:var(--brand-mint);margin-bottom:var(--sp-6)}
.pc-next p{color:var(--brand-deep-soft);margin:var(--sp-6) 0 var(--sp-20)}
.pc-next .mk-btn{min-width:min(260px,100%)}

/* While the checker is actually running (any activity or the result),
   the marketing/landing sections hide so the question or result is the
   only screen on show (item 4, prompts/pip-remock-fixes-2026-09-24.md) -
   the hero (#pc-hero) and everything after the app mount, never the
   #checker-app-wrap itself or the site header/footer. */
body.pc-running #pc-hero,body.pc-running #checker-app-wrap~section{display:none}

/* Selectable radio cards (helper start's 3 routes, prompts/pip-phase2b.md
   section 5's radiogroup pattern reused for a whole-page choice, not just
   an interview question) - the existing plain .door pill above gains a
   checked state, same visual language as .opts button[aria-checked]. */
.door[role="radio"]{cursor:pointer}
.door[aria-checked="true"]{border:2px solid var(--accent);background:var(--sel);font-weight:600}

/* Guides index (/guides/) - categories grouping the question pages and
   the two older narrative guides, so "Guides" in the header nav and every
   breadcrumb's "Guides" crumb both resolve to a real page. */
.gd-index-cat{margin-top:var(--sp-40)}
.gd-index-cat:first-child{margin-top:0}
.gd-index-cat h2{font:500 1.5rem/1.2 var(--serif);margin:0 0 var(--sp-16)}

/* ---------------------------------------------------------------------
   Accessibility floor (25 Sep review, prompts/fix-queue-aa-2026-09-25.md
   PR A2). Last in the file so it wins over the component rules above.
   --------------------------------------------------------------------- */
/* Tap targets: 44x44 at least, for every control named in the review. */
.restart-btn{width:44px;height:44px}
.pwa-hint-close,.sw-update .dismiss,.desktop-save .dismiss,.crisis-banner .dismiss{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.sw-update{min-height:44px;display:flex;align-items:center;justify-content:center}
.sw-update button{min-height:44px}
.app-menu button,.chip,.paste-toggle button,.pc-change-link{min-height:44px}
.idx-jump a{min-height:44px}
/* Form controls: a border at 3:1 or more against the page, so a box can be
   seen as a box. */
input[type=text],input[type=number],input[type=email],input[type=date],textarea,.opts button,.checks button{border-color:var(--field-line)}
/* Focus: a solid --accent ring (well over 3:1 in both themes), never only
   the pale --mint glow. */
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
a:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
/* Reduced motion: no transitions or animations anywhere. */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;transition-delay:0s!important;animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}

/* A choice with a trade-off line under its label (screens.js radioRows'
   `hint` - the "How will you get the form?" routes). */
.opts button.has-hint .opt-text{display:flex;flex-direction:column;gap:4px;text-align:left}
.opts button.has-hint .opt-hint{font-weight:400;font-size:.95rem;color:var(--soft)}

/* The info icon beside the decided "Claiming is free" line (.claim-free,
   below; the icon comes from site-data.js's FREE_NOTE). */
.free-note-icon{flex:none;width:22px;height:22px;color:#1E5A46}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .free-note-icon{color:#7CC7A6}}
:root[data-theme="dark"] .free-note-icon{color:#7CC7A6}
/* The decided helper-start line (.claim-free, CLAUDE.md "Decided
   wording"): one mint-pale sentence with an info icon. The price line
   (.price-line) is its own element, only when payments are live. */
.claim-free{display:flex;align-items:flex-start;gap:var(--sp-12);background:#E7F3EC;border:1px solid #C4DFD0;border-radius:14px;padding:var(--sp-16) var(--sp-24);text-align:left;font-size:var(--fs-body);line-height:1.5;color:#22304F}
.claim-free .free-note-icon{margin-top:var(--sp-2)}
.price-line{margin:var(--sp-12) 0 0;font-size:var(--fs-small);color:var(--soft)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .claim-free{background:#15251E;border-color:#2C4A3D;color:#D3DBE8}}
:root[data-theme="dark"] .claim-free{background:#15251E;border-color:#2C4A3D;color:#D3DBE8}

/* ---------------------------------------------------------------------
   Helper tidy-up (prompts/helper-tidy.md, design/helper-tidy/*.html).
   The start screen, answer sections and pack layout, in the helpers'
   own tokens. The section helper (.acc) is screens.js's answerSections(),
   shared so the AA helper can use it too.
   --------------------------------------------------------------------- */

/* Visually hidden, still read: a section's own label, kept as the sibling
   right before its control so the control is named from it, while the
   section header shows the same words once. */
.acc-label{position:absolute;width:1px;height:1px;margin:calc(var(--hairline) * -1);padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Start (HT-Start): a shorter dark hero, two facts side by side, "What to
   expect" as one row, then the routes - so the routes and Continue fit
   above the fold at 1440x900 - and the free note as one mint line. */
.start-deep-hero{gap:6px;padding:var(--sp-20) var(--sp-20) var(--sp-24)}
.start-deep-hero .q-sub{font-size:var(--fs-small);margin:0}
.start-deep-hero h1{font-size:30px;line-height:1.12;margin:0}
.start-deep-hero p{margin:0;font-size:16px;line-height:1.5}
@media(min-width:900px){
  .start-deep-hero{padding:var(--sp-20)}
  .start-deep-hero h1{font-size:34px;letter-spacing:-.015em;text-wrap:nowrap}
}
.start-facts{display:grid;grid-template-columns:1fr;gap:12px;margin:var(--sp-12) 0 0}
@media(min-width:600px){.start-facts{grid-template-columns:1fr 1fr}}
.start-facts .note{margin:0;padding:var(--sp-10) var(--sp-16);border:0;font-size:var(--fs-small);line-height:1.45;max-width:none}
.expect-label{margin:var(--sp-10) 0 var(--sp-6);font:600 var(--fs-tag)/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.expect-tiles.expect-row{display:grid;grid-template-columns:1fr;gap:10px;margin:0}
@media(min-width:600px){.expect-tiles.expect-row{grid-template-columns:repeat(3,1fr);gap:16px}}
.expect-row .expect-tile{flex-direction:row;align-items:flex-start;gap:8px;border:0;padding:0;font-size:var(--fs-small);line-height:1.4;color:var(--soft)}
.expect-row .expect-tile b{font-size:var(--fs-small);color:var(--ink)}
.expect-icon{flex:none;margin-top:var(--hairline);color:var(--accent)}
.screen>.start-routes-h{margin:var(--sp-12) 0 var(--sp-10);padding-top:var(--sp-12);border-top:1px solid var(--hair);font-size:22px}
.start-routes-h+.doors{margin-top:0}
.start-routes-h~.go.wide{margin-top:var(--sp-12);min-height:54px}
.door{padding:var(--sp-10) var(--sp-20);gap:2px}
.door .door-title{line-height:1.3}
.door .door-sub{line-height:1.35}
.start-routes-h+.doors{gap:8px}
main#app>.rail-wrap:has(+.screen>.start-deep-hero){margin-bottom:var(--sp-14)}
.start-links{display:flex;flex-wrap:wrap;justify-content:center;column-gap:24px;margin:var(--sp-4) 0}
.start-links .import-control{display:contents}
.start-links .err{flex-basis:100%;text-align:center;margin:0}
.start-links .err:empty{display:none}
.start-links .link{font-size:15px}

/* Activity screens (HT-Question): the title with two help pills beside
   it, each opening its words in place, then the answer groups as
   sections - one open at a time. */
.q-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px 16px;flex-wrap:wrap}
.screen>.q-title-row{margin-bottom:var(--sp-12)}
.q-title-row h1{margin:0}
.q-pills{display:flex;gap:8px;flex-wrap:wrap}
.q-pill{min-height:40px;padding:0 var(--sp-14);border-radius:999px;border:1px solid var(--line);background:var(--page);color:var(--accent);font-size:var(--fs-small);font-weight:600}
.q-pill[aria-expanded="true"]{border-color:var(--accent);background:var(--mint)}
@media(max-width:599px){
  .q-pill{min-height:44px;padding:0;border:0;background:none;text-decoration:underline;text-underline-offset:4px}
  .q-pills{gap:16px}
  .q-pill[aria-expanded="true"]{background:none}
}
.q-disc{margin:0 0 var(--sp-16)}
.q-disc>.why-we-ask{margin:0}
.q-examples{font-size:15px;line-height:1.55}
.q-examples h3{font:600 16px/1.3 var(--sans);margin:var(--sp-16) 0 var(--sp-6)}
.q-examples p,.q-examples blockquote{margin:0 0 var(--sp-10);max-width:none}
.q-examples blockquote{padding:var(--sp-12) var(--sp-14);border-radius:10px;background:var(--surface)}
.q-disc .guide-link{margin:var(--sp-8) 0 0}
.screen>.q-title-row+.q-disc+.q-disc{margin-top:calc(var(--sp-8) * -1)}

.acc{display:flex;flex-direction:column;gap:10px;margin:var(--sp-14) 0 0}
.acc>.q-sub,.acc>p{margin:var(--sp-8) 0 0}
.acc-sec{border:1px solid var(--hair);border-radius:12px;background:var(--page)}
.acc-sec.open{border:2px solid var(--accent)}
.acc-heading{margin:0;font:inherit}
.acc-head{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:var(--sp-10) var(--sp-16);background:none;border:0;border-radius:12px;text-align:left;font:inherit;color:var(--ink)}
.acc-sec.open .acc-head{padding:calc(var(--sp-10) - var(--hairline)) calc(var(--sp-16) - var(--hairline))}
.acc-num{flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line);color:var(--soft);display:flex;align-items:center;justify-content:center;font-size:var(--fs-small);font-weight:700}
.acc-sec.answered .acc-num,.acc-sec.open .acc-num{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.acc-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.acc-title{font-size:16px;font-weight:700;line-height:1.3}
.acc-summary{font-size:var(--fs-small);font-weight:400;color:var(--soft);line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-sec.open .acc-summary{display:none}
.acc-change{flex:none;font-size:var(--fs-small);font-weight:600;color:var(--accent)}
.acc-body{padding:0 calc(var(--sp-16) - var(--hairline)) calc(var(--sp-16) - var(--hairline))}
.acc-body>.acc-label+*{margin-top:0}
.acc-body>.note{margin:var(--sp-14) 0 0}
.acc-done{display:flex;justify-content:flex-end;margin-top:var(--sp-14)}
.acc-next{min-height:44px;padding:0 var(--sp-20);border-radius:10px;border:1px solid var(--accent);background:var(--page);color:var(--accent);font-size:15px;font-weight:600}

/* Unlocked packs (HT-Pack): an "In your pack" rail card from 1100px, then
   one 680px card - rail, light header, the pack. */
@media(min-width:900px){
  main.app-main.pip-pack{max-width:none;padding:0;background:transparent;border:0;border-radius:0}
  .pip-pack .screen{display:grid;grid-template-columns:minmax(0,680px);column-gap:var(--sp-24);justify-content:center;align-items:start}
  .pack-main{grid-column:1;padding:var(--sp-24) var(--sp-40) var(--sp-32);background:var(--page);border:1px solid var(--hair);border-radius:20px}
}
.pack-rail{display:none}
@media(min-width:1100px){
  .pip-pack .screen{grid-template-columns:248px 680px}
  .pack-main{grid-column:2}
  .pack-rail{display:flex;flex-direction:column;grid-column:1;grid-row:1;position:sticky;top:var(--sticky-top);padding:var(--sp-16) var(--sp-12) var(--sp-20);background:var(--page);border:1px solid var(--hair);border-radius:16px}
  .save-row{display:none}
}
.pack-head{display:flex;align-items:center;gap:18px;padding-bottom:var(--sp-8)}
.pack-tick{flex:none;width:44px;height:44px;border-radius:50%;background:var(--mint);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700}
.pack-head-text{display:flex;flex-direction:column;gap:6px;min-width:0}
.pack-head .q-sub{margin:0}
.pack-head h1{margin:0;font-size:2rem;line-height:1.1}
.pack-head p{margin:0;font-size:15px;color:var(--soft)}
.save-row{flex-direction:row;align-items:center;justify-content:space-between;gap:14px;padding:var(--sp-12) var(--sp-14)}
.save-row-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.save-row h2{font-size:15px}
.save-row p{font-size:var(--fs-small);line-height:1.45;color:var(--soft)}
.save-row .go{flex:none;width:auto;min-height:44px;padding:0 var(--sp-16);font-size:15px}
.ans-head-row{margin-top:var(--sp-28);padding-top:var(--sp-28);border-top:1px solid var(--hair)}
.ans-head-row h2{margin:0 0 var(--sp-6)}
.ans-head-row p{margin:0 0 var(--sp-14);font-size:var(--fs-small)}
.ans-list{display:flex;flex-direction:column;gap:10px;margin-bottom:var(--sp-16)}
.ans-row{border:1px solid var(--hair);border-radius:12px;background:var(--page)}
.ans-row.open{border:2px solid var(--accent)}
.ans-heading{margin:0;font:inherit}
.ans-head{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:var(--sp-8) var(--sp-20);background:none;border:0;border-radius:12px;text-align:left;font-size:15px;color:var(--ink)}
.ans-row.open .ans-head{padding:calc(var(--sp-8) - var(--hairline)) calc(var(--sp-20) - var(--hairline))}
.ans-title{flex:1;font-weight:700}
.ans-status{flex:none;font-size:var(--fs-small);font-weight:400;color:var(--soft)}
.ans-status.done{font-weight:600;color:var(--accent)}
.ans-panel{display:flex;flex-direction:column;gap:14px;padding:0 calc(var(--sp-20) - var(--hairline)) calc(var(--sp-20) - var(--hairline))}
.ans-panel>*{margin:0}
.ans-panel .answer-actions{justify-content:space-between}
.ans-do{display:flex;align-items:center;gap:14px;margin-left:auto}
.len-pill{display:inline-block;padding:var(--sp-6) var(--sp-12);border-radius:999px;background:var(--mint);color:var(--accent);font-size:var(--fs-small);font-weight:600}
.len-seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.len-seg button{min-height:44px;padding:0 var(--sp-14);border:0;background:var(--page);color:var(--soft);font-size:var(--fs-small);font-weight:600}
.len-seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.answer-title .len-pill,.answer-title .len-seg{flex:none}
.ans-more{width:100%;min-height:56px;border-radius:12px;border:1px solid var(--hair);background:var(--page);color:var(--accent);font-size:15px;font-weight:600}
.pack-sec{margin:var(--sp-16) 0}
.pack-sec>h2{margin:0 0 var(--sp-10)}
.expect-row .expect-tile b::after{content:"."}
.save-row h2{font:600 15px/1.3 var(--sans);margin:0}
@media(max-width:599px){
  .pack-head{align-items:flex-start;gap:14px}
  .pack-tick{width:36px;height:36px;font-size:17px}
  .pack-head h1{font-size:30px}
  .save-row p{font-size:var(--fs-small)}
}
/* At least 8px between stacked blocks (tools/pip_spacing_test.mjs rule e):
   an open section's or answer's header and its body, and the start
   screen's note, links and badges. */
.acc-body,.ans-panel{margin-top:var(--sp-8)}
.acc-sec.open .acc-head,.ans-row.open .ans-head{padding-bottom:0}
.start-links{margin:0 0 var(--sp-8)}

/* Pack v2 (design/helper-tidy/HT-Pack-v2.html). "In your pack": one row
   per part, a small stroke icon in a pale 32px tile, rows at least 52px
   with a 1px divider between them; the part being read is pale mint
   (aria-current); "Your answers" adds a thin bar and "N of M pasted";
   Save a copy and where the answers live under a divider. */
.pack-rail-label{margin:0;padding:0 var(--sp-12) var(--sp-10);font:700 var(--fs-tag)/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.pack-toc{list-style:none;margin:0;padding:0}
.pack-toc li+li{border-top:1px solid var(--hair);margin:0 var(--sp-12);padding:0}
.pack-toc li+li a{margin:0 calc(var(--sp-12) * -1)}
.pack-toc a{display:flex;flex-direction:column;justify-content:center;gap:8px;min-height:52px;padding:var(--sp-10) var(--sp-12);border-radius:10px;font-size:var(--fs-small);font-weight:600;line-height:1.3;color:var(--ink);text-decoration:none}
.pack-toc a:hover{background:var(--surface)}
.pack-toc a[aria-current]{background:var(--mint)}
.pack-toc a[aria-current] .pack-toc-label{font-weight:700}
.pack-toc-row{display:flex;align-items:center;gap:12px}
.pack-toc-ico{flex:none;width:32px;height:32px;border-radius:8px;background:var(--surface);color:var(--accent);display:flex;align-items:center;justify-content:center}
.pack-toc a[aria-current] .pack-toc-ico{background:var(--page)}
.pack-toc-label{flex:1;min-width:0}
.pack-toc-progress{display:flex;align-items:center;gap:10px;padding-left:calc(var(--sp-32) + var(--sp-12))}
.pack-toc-bar{flex:1;height:6px;border-radius:3px;background:var(--page);overflow:hidden;box-shadow:inset 0 0 0 1px var(--hair)}
.pack-toc-bar i{display:block;height:100%;background:var(--accent);border-radius:3px}
.pack-toc-count{flex:none;font-size:var(--fs-small);font-weight:600;color:var(--accent);white-space:nowrap}
.pack-rail-save{display:flex;flex-direction:column;gap:10px;margin-top:var(--sp-12);padding:var(--sp-14) var(--sp-8) 0;border-top:1px solid var(--hair)}
.pack-rail-save .wide{margin:0;min-height:46px;font-size:var(--fs-small);color:var(--accent);border-color:var(--accent)}
.pack-rail-note{margin:0;font-size:var(--fs-small);line-height:1.5;color:var(--soft)}

/* The letter's date, as one row: words left, the date right; stacked
   below 600px. */
.date-card-row{display:flex;flex-direction:column;gap:14px}
.date-card-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.date-card-text h2{margin:0;font:700 16px/1.35 var(--sans)}
.date-card-text p{margin:0;font-size:var(--fs-small);line-height:1.5;color:var(--soft)}
.date-card-field{display:flex;flex-direction:column;gap:6px}
.date-card-field label{font-size:var(--fs-small);font-weight:600;line-height:1.35;color:var(--soft)}
@media(min-width:600px){
  .date-card-row{flex-direction:row;align-items:center;gap:16px}
  .date-card-text{flex:1}
  .date-card-field{flex:none;width:220px}
}

/* "What to do next" as a numbered list: a bold title and one line of
   detail per step; the step this pack is for is pale mint (a plain
   highlight, no tag). */
.pack-main>h2.next-h{margin:var(--sp-28) 0 var(--sp-10);font-size:24px}
.next-steps{list-style:none;margin:0 0 var(--sp-12);padding:0;display:flex;flex-direction:column;gap:6px}
.next-steps li{display:flex;gap:16px;padding:var(--sp-16) calc(var(--sp-16) + var(--sp-2));border-radius:12px}
.next-steps li.highlight{background:var(--mint)}
.next-num{flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);color:var(--soft);display:flex;align-items:center;justify-content:center;font-size:var(--fs-small);font-weight:700}
.next-steps li.highlight .next-num{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.next-body{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.next-title{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
.next-title b{font-size:16px;line-height:1.35}
.next-detail{font-size:15px;line-height:1.5;color:var(--soft)}
.next-steps li.highlight .next-detail{color:var(--ink)}
@media(max-width:599px){.next-steps li{gap:12px;padding:var(--sp-14) var(--sp-12)}}

/* PIP start spacing (28 Sep, same as the AA start): 24px between blocks,
   32px above Continue, the card padded 32px 40px, the hero 32px 36px,
   the fact cards 18px 20px, and "What to expect" with each title on its
   own line and a 20px column gap. */
@media(min-width:900px){main.app-main.pip-start{padding:var(--sp-32) var(--sp-40)}}
main#app>.rail-wrap:has(+.screen>.start-deep-hero){margin-bottom:calc(var(--sp-24) - var(--sp-6))}
.start-deep-hero{padding:var(--sp-32) calc(var(--sp-32) + var(--sp-4))}
@media(min-width:900px){.start-deep-hero{padding:var(--sp-32) calc(var(--sp-32) + var(--sp-4))}}
.start-facts{margin-top:var(--sp-24)}
.start-facts .note{padding:calc(var(--sp-16) + var(--sp-2)) var(--sp-20)}
.expect-label{margin:var(--sp-24) 0 var(--sp-8)}
@media(min-width:600px){.expect-tiles.expect-row{column-gap:var(--sp-20)}}
.expect-row .expect-tile b{display:block;margin-bottom:var(--sp-2)}
.expect-row .expect-tile b::after{content:none}
.screen>.start-routes-h{margin-top:var(--sp-24);padding-top:var(--sp-24)}
.start-routes-h~.go.wide{margin-top:var(--sp-32)}
.start-links{margin-top:var(--sp-24);margin-bottom:0}
.screen>.start-links+.badges,.screen>.start-links+p+.badges{margin-top:var(--sp-24)}

/* =====================================================================
   FOUNDATION (reskin, 28 Sep 2026 - prompts/reskin/BRIEF.md). The shared
   primitives, one each, drawn from design/templates/F00-Foundations,
   F01-States, F02-Forms (and its phone board) and D08-States-Dark, plus
   the chrome on every board. Last but for the two lane blocks, so the
   primitive wins over any older per-screen rule. New markup uses the
   canonical class (.btn-primary, .alert-info, .option, ...); older class
   names are listed beside it so existing screens get the same look until
   their lane rebuilds them. Pages use these, never their own versions.
   ===================================================================== */

/* --- Focus: a 3px ring, 2px offset, on everything you can tab to --- */
a:focus-visible,button:focus-visible,summary:focus-visible,[role=button]:focus-visible,[role=radio]:focus-visible,[role=checkbox]:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
a:focus-visible{border-radius:4px}
h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus,h1[tabindex="-1"]:focus-visible,h2[tabindex="-1"]:focus-visible{outline:none}

/* --- Beta strip: one token (--strip-bg) everywhere --- */
.betastrip{min-height:28px;display:flex;align-items:center;justify-content:center;padding:var(--sp-4) var(--gutter);background:var(--strip-bg);color:var(--strip-ink);font:400 var(--fs-small)/1.3 var(--sans);letter-spacing:.04em;text-align:center}
@media(max-width:599px){.betastrip{min-height:24px}}

/* --- Header: one container, one nav pattern --- */
.mk-head{background:var(--card);border-bottom:1px solid var(--hair)}
.mk-head .mk-wrap{height:var(--head-h);gap:var(--sp-16)}
.lockup{--mark:36px;--wm:24px;gap:var(--sp-16);min-height:var(--tap)}
@media(max-width:599px){.lockup{--mark:32px;--wm:20px;gap:var(--sp-12)}}
.mk-head-link{display:inline-flex;align-items:center;min-height:var(--tap);padding:0;background:none;border:0;font:500 16px/1.3 var(--sans);color:var(--ink);text-decoration:none;white-space:nowrap;cursor:pointer}
.mk-head-link:visited{color:var(--ink)}
.mk-head-link:hover{color:var(--ink);text-decoration:underline;text-underline-offset:.2em}
.mk-head-link[aria-current]{font-weight:600;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:.35em}
.mk-nav{display:none;align-items:center;gap:var(--sp-32)}
.mk-menu,.mk .mk-menu{flex:none;margin:0;padding:0;border:0;border-radius:0;background:none}
.mk .mk-menu>summary::after,.mk .mk-menu[open]>summary::after{content:none}
.mk-head-link[hidden]{display:none}
.mk-menu>summary{display:flex;align-items:center;gap:var(--sp-8);min-height:var(--tap);padding:0 var(--sp-12);margin-right:calc(var(--sp-12) * -1);list-style:none;font:600 16px/1 var(--sans);color:var(--ink);cursor:pointer;border-radius:var(--radius)}
.mk-menu>summary::-webkit-details-marker{display:none}
.mk-menu-icon .close,.mk-menu[open] .mk-menu-icon .open,.mk-menu-close,.mk-menu[open] .mk-menu-open{display:none}
.mk-menu[open] .mk-menu-icon .close{display:inline}
.mk-menu[open] .mk-menu-close{display:inline}
.mk-head{position:sticky}
.mk-menu-panel{position:absolute;left:0;right:0;top:100%;z-index:6;height:calc(100dvh - var(--head-h));overflow:auto;display:flex;flex-direction:column;padding:var(--sp-8) var(--gutter) var(--sp-32);background:var(--page);border-top:1px solid var(--hair)}
.mk-menu-link{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-16);min-height:60px;border-bottom:1px solid var(--hair);font:600 19px/1.3 var(--sans);color:var(--ink);text-decoration:none}
.mk-menu-link:visited{color:var(--ink)}
.mk-menu-link svg{flex:none;color:var(--soft)}
.mk-menu-link[aria-current]{color:var(--accent)}
.mk-menu-panel>nav{display:flex;flex-direction:column}
/* "Carry on where you left off" (W01b): shown by ui.js only when a helper
   has answers saved on this device. */
.mk-carry{display:flex;flex-direction:column;gap:var(--sp-12);margin-top:var(--sp-32);padding:var(--sp-24);border-radius:var(--radius-card);background:var(--surface)}
.mk-carry p{margin:0;max-width:none;color:var(--soft)}
.mk-carry .mk-carry-title{font:600 var(--fs-h3)/1.3 var(--sans);color:var(--ink)}
.mk-carry[hidden],.mk-carry a[hidden]{display:none}
html.menu-open{overflow:hidden}
/* An open menu sits above the sticky Back/Next bar (z-index 5), so the page behind isn't tappable. */
html.menu-open .mk-head{z-index:7}
@media(min-width:1100px){.mk-nav{display:flex}.mk-menu{display:none}}
/* The helper variant: "PIP helper", Save a copy, Back to site. */
.mk-nav-app{display:flex;align-items:center;gap:var(--sp-32)}
.mk-nav-app .app-label{display:none;color:var(--soft);font:400 16px/1.3 var(--sans);margin:0}
@media(min-width:1100px){.mk-nav-app .app-label{display:inline}}
@media(max-width:599px){
  .mk-nav-app{gap:var(--sp-16)}
  .mk-nav-app .save-copy:not([hidden])~.back-site{display:none}
}
/* Helper header menu (T19): shown on desktop too, as a small dropdown under
   the button instead of the full-width phone panel. */
.mk-nav-app .mk-menu{display:block}
@media(min-width:1100px){
  .mk-nav-app .mk-menu{position:static}
  .mk-nav-app .mk-menu-panel{left:auto;right:max(var(--gutter),calc((100% - var(--w-wide)) / 2));top:100%;margin-top:var(--sp-8);width:360px;height:auto;padding:var(--sp-8) var(--sp-16);border:1px solid var(--hair);border-radius:var(--radius)}
}

/* --- Footer: starts "Independent by design." --- */
.mk-foot{background:var(--card);border-top:1px solid var(--hair);color:var(--soft);font-size:var(--fs-small);line-height:1.5;padding-block:var(--sp-32)}
/* Two rows, on purpose: the "Independent by design." line, then the
   links, each a 48px target. */
.mk-foot .mk-footrow{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-12)}
.mk-foot-lead{margin:0;max-width:none;font-size:var(--fs-small)}
.mk-foot-lead b{color:var(--ink)}
.mk-foot-note{margin:0;max-width:none;font-size:var(--fs-small)}
.mk-foot-note a,.mk-org a{color:inherit;text-decoration:underline}
.mk-foot .row{display:flex;flex-wrap:wrap;column-gap:var(--sp-24)}
.mk-foot .row a{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--soft);font-weight:500;font-size:var(--fs-small);text-decoration:none;white-space:nowrap}
.mk-foot .row a:hover{text-decoration:underline}
@media(max-width:599px){.mk-foot{padding-block:var(--sp-32) var(--sp-48)}}

/* --- Buttons: primary, secondary, tertiary, link; danger for a dialog's
   destructive choice. Primary is 56 tall and grows for two lines;
   secondary and tertiary 48. Hover, focus, pressed and busy in both
   themes. No disabled buttons: pressing one explains what's missing. --- */
.btn,.mk-btn,.chk-cta,.copy,.confirm-row button{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-12);box-sizing:border-box;border-radius:var(--radius);font:600 var(--fs-body)/1.25 var(--sans);text-align:center;text-decoration:none;white-space:normal;cursor:pointer;transition:background-color var(--motion),border-color var(--motion),color var(--motion)}
.go,.wide{display:flex;align-items:center;justify-content:center;gap:var(--sp-12);width:100%;border-radius:var(--radius);font:600 var(--fs-body)/1.25 var(--sans);text-align:center;text-decoration:none;cursor:pointer;transition:background-color var(--motion),border-color var(--motion)}
.btn-primary,.go,.go.wide,.mk-btn.primary,.chk-cta:not(.outline){min-height:var(--btn-h);padding:var(--sp-8) var(--sp-24);background:var(--btn);color:var(--btn-ink);border:1px solid var(--btn)}
.nav #next{min-height:var(--btn-h);padding:var(--sp-8) var(--sp-24);background:var(--btn);color:var(--btn-ink);border:1px solid var(--btn);border-radius:var(--radius);font:600 var(--fs-body)/1.25 var(--sans)}
a.btn-primary:visited,a.go:visited,a.mk-btn.primary:visited,a.chk-cta:not(.outline):visited{color:var(--btn-ink)}
.btn-primary:hover,.go:hover,.mk-btn.primary:hover,.chk-cta:not(.outline):hover,.nav #next:hover{background:var(--btn-hover);border-color:var(--btn-hover);color:var(--btn-ink)}
.btn-primary:active,.go:active,.mk-btn.primary:active,.chk-cta:not(.outline):active,.nav #next:active{background:var(--btn-press);border-color:var(--btn-press);transform:translateY(1px)}
.btn-secondary,.wide:not(.go),.mk-btn.quiet,.chk-cta.outline,.copy,.confirm-cancel{min-height:var(--btn2-h);padding:var(--sp-8) var(--sp-24);background:var(--card);color:var(--ink);border:1px solid var(--control)}
.nav #back{min-height:var(--btn-h);padding:0 var(--sp-24);background:var(--card);color:var(--ink);border:1px solid var(--control);border-radius:var(--radius);font:600 var(--fs-body)/1.25 var(--sans)}
a.btn-secondary:visited,a.wide:not(.go):visited,a.mk-btn.quiet:visited,a.chk-cta.outline:visited{color:var(--ink)}
.btn-secondary:hover,.wide:not(.go):hover,.mk-btn.quiet:hover,.chk-cta.outline:hover,.copy:hover,.confirm-cancel:hover,.nav #back:hover{background:var(--btn2-hover);color:var(--ink)}
.btn-secondary:active,.wide:not(.go):active,.mk-btn.quiet:active,.chk-cta.outline:active,.copy:active,.confirm-cancel:active,.nav #back:active{background:var(--btn2-press)}
.btn-tertiary,.add-row,.acc-next{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-8);min-height:var(--btn2-h);padding:0 var(--sp-16);background:transparent;color:var(--accent);border:1px solid var(--btn);border-radius:var(--radius);font:600 16px/1.25 var(--sans);text-decoration:none;white-space:nowrap;cursor:pointer}
a.btn-tertiary:visited{color:var(--accent)}
.btn-tertiary:hover,.add-row:hover,.acc-next:hover{background:var(--mint);color:var(--accent)}
.btn-tertiary:active,.add-row:active,.acc-next:active{background:var(--sel);transform:translateY(1px)}
.btn-link,.link,.remove-row{display:inline-flex;align-items:center;min-height:var(--tap);padding:0;background:none;border:0;color:var(--accent);font:600 16px/1.3 var(--sans);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.btn-link:hover,.link:hover,.remove-row:hover{color:var(--link-hover)}
.btn-danger,.confirm-go{min-height:var(--btn2-h);padding:var(--sp-8) var(--sp-24);background:var(--card);color:var(--err-ink);border:2px solid var(--err-ink)}
.btn-danger:hover,.confirm-go:hover{background:var(--err-bg);color:var(--err-ink)}
/* Busy: the label stays, a spinner joins it. */
.btn[aria-busy="true"]::before,.go[aria-busy="true"]::before,.mk-btn[aria-busy="true"]::before{content:"";flex:none;width:18px;height:18px;box-sizing:border-box;border-radius:50%;border:2px solid color-mix(in srgb,currentColor 40%,transparent);border-top-color:currentColor;animation:ts-spin .8s linear infinite}
@keyframes ts-spin{to{transform:rotate(360deg)}}
/* On an always-dark band a primary button turns mint with deep text, in
   both themes, so its edge always shows. */
.mk-deep :is(.btn-primary,.go),.arrival-band :is(.btn-primary,.go),.start-deep-hero :is(.btn-primary,.go),.pip-desc-hero :is(.btn-primary,.go){background:var(--brand-mint);border-color:var(--brand-mint);color:var(--brand-deep)}
.mk-deep :is(.btn-primary,.go):hover,.arrival-band :is(.btn-primary,.go):hover,.start-deep-hero :is(.btn-primary,.go):hover,.pip-desc-hero :is(.btn-primary,.go):hover{background:var(--brand-mint-hover);border-color:var(--brand-mint-hover);color:var(--brand-deep)}
/* Fixed brand buttons on the always-dark bands keep their own colours. */
.mk-btn.mint{min-height:var(--btn-h);padding:var(--sp-8) var(--sp-24);background:var(--brand-mint);color:var(--brand-deep);border:1px solid var(--brand-mint)}
.mk-btn.mint:hover{background:var(--brand-mint-hover);border-color:var(--brand-mint-hover);color:var(--brand-deep)}
/* Buy button on the dark pay card (AA and PIP): pressed keeps the mint, never the dark card colour. */
.pay-card .mk-btn.mint:active,.aa-pay-card .aa-buy:active{background:var(--brand-mint);border-color:var(--brand-mint);color:var(--brand-deep)}

/* --- Choices: option card, chip and row button. Selected: a 2px border,
   pale mint and a tick - never colour alone. --- */
.option,.opts button{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-16);width:100%;min-height:64px;box-sizing:border-box;padding:var(--sp-16) var(--sp-24);text-align:left;background:var(--card);border:1px solid var(--control);border-radius:var(--radius);color:var(--ink);font:400 var(--fs-body)/1.4 var(--sans);cursor:pointer}
.option::after,.opts button::after{content:"";flex:none;width:32px;height:32px;box-sizing:border-box;border-radius:50%;border:1.5px solid var(--control);background:transparent;display:flex;align-items:center;justify-content:center;font:700 var(--fs-small)/1 var(--sans)}
.option:hover,.opts button:hover{border-color:var(--ink)}
.option[aria-checked="true"],.option[aria-pressed="true"],.option.is-selected,.opts button[aria-checked="true"],.opts button[aria-pressed="true"]{border:2px solid var(--btn);background:var(--mint);font-weight:600;padding:calc(var(--sp-16) - var(--hairline)) calc(var(--sp-24) - var(--hairline))}
.option[aria-checked="true"]::after,.option[aria-pressed="true"]::after,.option.is-selected::after,.opts button[aria-checked="true"]::after,.opts button[aria-pressed="true"]::after{content:"✓";background:var(--btn);border-color:var(--btn);color:var(--btn-ink);width:32px;height:32px}
.option-text{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}
.option-hint{font-size:var(--fs-small);font-weight:400;color:var(--soft)}
.chip,.rel-pills button{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-8);min-height:var(--tap);box-sizing:border-box;padding:var(--sp-12) var(--sp-16);border-radius:999px;border:1px solid var(--control);background:var(--card);color:var(--ink);font:400 16px/1.3 var(--sans);cursor:pointer}
.chip.on,.chip[aria-pressed="true"],.chip[aria-checked="true"],.rel-pills button[aria-checked="true"]{border:2px solid var(--btn);background:var(--mint);color:var(--ink);font-weight:600;padding:calc(var(--sp-12) - var(--hairline)) calc(var(--sp-16) - var(--hairline))}
.chip.on::before,.chip[aria-pressed="true"]::before,.chip[aria-checked="true"]::before,.rel-pills button[aria-checked="true"]::before{content:"✓";font-weight:700;color:var(--accent)}
.row-btn{display:flex;align-items:center;gap:var(--sp-16);width:100%;min-height:60px;box-sizing:border-box;padding:var(--sp-12) var(--sp-24);border-radius:var(--radius);border:1px solid var(--control);background:var(--card);color:var(--ink);text-align:left;font:400 var(--fs-body-min)/1.4 var(--sans);cursor:pointer}
.row-btn:hover{border-color:var(--ink)}
.num{flex:none;width:32px;height:32px;box-sizing:border-box;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--control);color:var(--soft);font:700 var(--fs-small)/1 var(--sans)}
.num.done{background:var(--btn);border-color:var(--btn);color:var(--btn-ink)}
.num.current{background:var(--card);border:2px solid var(--btn);color:var(--accent)}

/* --- Plain card (design/templates/A01-Start.html, option C): a white
   card with a 1px hairline edge and no shadow - 32px padding, 16px on
   phones. A variant on its own; .card itself is unchanged. --- */
.card--plain{display:flex;flex-direction:column;gap:var(--sp-16);margin:0;padding:var(--sp-32);background:var(--card);border:1px solid var(--hair);border-radius:var(--radius-card);box-shadow:none}
@media(max-width:599px){.card--plain{gap:var(--sp-12);padding:var(--sp-16)}}

/* --- Alerts: info, done, warning, error. A plain coloured card with an
   icon and a bold title; no edge stripe. --- */
.alert{display:flex;gap:var(--sp-12);box-sizing:border-box;padding:var(--sp-16) var(--sp-24);border-radius:var(--radius);background:var(--mint);color:var(--ink);font-size:16px;line-height:1.5;--alert-icon:var(--accent);--alert-title:var(--ink)}
.alert::before{content:"";flex:none;width:20px;height:20px;margin-top:var(--sp-4);background:var(--alert-icon);-webkit-mask:var(--alert-mask) center/contain no-repeat;mask:var(--alert-mask) center/contain no-repeat}
.alert-body{display:flex;flex-direction:column;gap:var(--sp-8);min-width:0}
.alert-body>*{margin:0;max-width:none}
.alert-title{font-weight:700;font-size:var(--fs-body-min);color:var(--alert-title)}
.alert-actions{display:flex;flex-wrap:wrap;gap:var(--sp-12);padding-top:var(--sp-8)}
.alert-info{--alert-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E")}
.alert-done{--alert-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12l3 3 5-6'/%3E%3C/svg%3E")}
.alert-warning{background:var(--warn-bg);--alert-icon:var(--warn-ink);--alert-title:var(--warn-ink);--alert-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 3l10 18H2z'/%3E%3Cpath d='M12 10v4M12 17h.01'/%3E%3C/svg%3E")}
.alert-error,.error-summary{background:var(--err-bg);--alert-icon:var(--err-ink);--alert-title:var(--err-ink);--alert-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16h.01'/%3E%3C/svg%3E")}
.error-summary ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.error-summary a{color:var(--err-ink);font-weight:600}
/* Older alert-like boxes, now plain warning cards (no dashed edge). */
.todo,.late-warning{border:0;background:var(--warn-bg);color:var(--warn-ink);border-radius:var(--radius);padding:var(--sp-12) var(--sp-16);font-size:16px}

/* --- Toast: bottom centre, role=status, 4 seconds (ui.js toast()) --- */
.toast{position:fixed;left:50%;bottom:calc(var(--sp-24) + env(safe-area-inset-bottom,0px) + var(--kb,0px));transform:translateX(-50%);z-index:60;display:inline-flex;align-items:center;gap:var(--sp-12);max-width:calc(100vw - 2 * var(--gutter));box-sizing:border-box;padding:var(--sp-12) var(--sp-16);border-radius:999px;background:var(--toast-bg);color:var(--toast-ink);font:600 16px/1.3 var(--sans);box-shadow:0 6px 20px rgba(20,33,61,.18);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--motion),visibility var(--motion)}
.toast.show{opacity:1;visibility:visible}
.toast-tick{color:var(--mint-strong)}
body:has(.sticky-bar) .toast{bottom:calc(var(--bar-h) + var(--sp-16) + var(--kb,0px))}

/* --- Dialog: deep green scrim at 72% over everything, header included;
   focus stays inside; the destructive choice is outlined red and last. --- */
.dialog,.confirm-dialog{border:0;border-radius:var(--radius-card);padding:var(--sp-32);width:min(600px,calc(100% - 2 * var(--sp-16)));max-width:none;box-sizing:border-box;background:var(--card);color:var(--ink);box-shadow:var(--shadow-pop)}
.dialog[open],.confirm-dialog[open]{display:flex;flex-direction:column;gap:var(--sp-16)}
.dialog::backdrop,.confirm-dialog::backdrop{background:var(--scrim)}
.dialog h2,.confirm-dialog h2{margin:0;font:500 var(--fs-h2)/1.2 var(--serif)}
.dialog p,.confirm-dialog p{margin:0;max-width:none;font-size:var(--fs-body-min);line-height:1.5;color:var(--soft)}
.dialog-actions,.confirm-row{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--sp-12);margin:0;padding-top:var(--sp-8)}
.confirm-row button{flex:0 1 auto;min-height:var(--btn2-h)}
@media(max-width:599px){
  .dialog,.confirm-dialog{padding:var(--sp-24)}
  .dialog-actions,.confirm-row{flex-direction:column;align-items:stretch}
  .dialog-actions>*,.confirm-row>*{width:100%}
}

/* --- Update bar (service worker): above the header, never interrupts --- */
.sw-update{display:flex;align-items:center;justify-content:center;gap:var(--sp-16);min-height:0;padding:var(--sp-8) var(--sp-16);background:var(--mint);color:var(--ink);border-bottom:1px solid color-mix(in srgb,var(--accent) 20%,var(--mint));font:400 var(--fs-small)/1.3 var(--sans);text-align:center}
.sw-update>span{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--sp-8) var(--sp-16)}
.sw-update button:not(.dismiss){display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--sp-16);background:transparent;color:var(--accent);border:1px solid var(--btn);border-radius:var(--radius);font:600 16px/1.25 var(--sans);text-decoration:none}
.sw-update .dismiss{min-width:var(--tap);min-height:var(--tap);color:var(--ink)}

/* --- Samaritans note (PIP free text): a plain tinted card under the
   text box. Never blocks, never clears the text. --- */
.samaritans,.crisis-banner{display:flex;gap:var(--sp-12);align-items:flex-start;box-sizing:border-box;padding:var(--sp-16) var(--sp-24);border-radius:var(--radius);background:var(--surface);color:var(--ink);font-size:16px;line-height:1.5}
.samaritans::before{content:"";flex:none;width:20px;height:20px;margin-top:var(--sp-2);background:var(--accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E") center/contain no-repeat}
.samaritans p,.crisis-banner p{margin:0;max-width:none}
.samaritans a[href^="tel:"],.crisis-banner a[href^="tel:"]{font-weight:700;white-space:nowrap}
.samaritans .field-hint{display:block;margin-top:var(--sp-4);font-size:var(--fs-small)}

/* --- Loading: a spinner with words; never a spinner with no way out --- */
.loading{display:flex;gap:var(--sp-16);align-items:center;box-sizing:border-box;padding:var(--sp-24);border-radius:var(--radius);background:var(--surface)}
.spinner{flex:none;width:28px;height:28px;box-sizing:border-box;border-radius:50%;border:3px solid var(--mint);border-top-color:var(--accent);animation:ts-spin .9s linear infinite}
.loading-text{display:flex;flex-direction:column;gap:var(--sp-4)}
.loading-text span{font-size:var(--fs-small);color:var(--soft)}

/* --- Deadline box: date, then the result and Add to calendar --- */
.deadline{display:flex;flex-direction:column;gap:var(--sp-16)}
.deadline-result:empty{display:none}

/* --- Step indicator: 4 dots from 1100px; a bar and "Step x of 4" below --- */
.steps{display:none;flex-wrap:wrap;align-items:center;gap:var(--sp-12);margin:0;padding:0;list-style:none;font-size:var(--fs-small)}
.steps li{display:flex;align-items:center;gap:var(--sp-8);white-space:nowrap;color:var(--soft);font-weight:500}
.steps li::before{content:"";flex:none;width:16px;height:16px;box-sizing:border-box;border-radius:50%;border:1.5px solid var(--control)}
.steps li.done::before{background:var(--btn);border-color:var(--btn)}
.steps li[aria-current]{color:var(--ink);font-weight:700}
.steps li[aria-current]::before{background:var(--card);border:5px solid var(--btn)}
.steps li:not(:last-child)::after{content:"";width:20px;height:2px;border-radius:1px;background:var(--control);margin-left:var(--sp-4)}
.steps-bar{display:flex;flex-direction:column;gap:var(--sp-8)}
.steps-bar-row{display:flex;justify-content:space-between;gap:var(--sp-12);font:600 var(--fs-small)/1.3 var(--sans);color:var(--soft)}
.steps-bar-row b{color:var(--ink)}
@media(min-width:1100px){.steps{display:flex}.steps-bar{display:none}}

/* --- Progress bars: animate transform: scaleX, never width --- */
.progress{height:6px;border-radius:3px;background:var(--hair);overflow:hidden}
.progress>i{display:block;width:100%;height:100%;border-radius:3px;background:var(--accent);transform-origin:left center;transform:scaleX(var(--p,0));transition:transform var(--motion)}
.bar i,.pack-toc-bar i,.chk-progress-fill{width:100% !important;transform-origin:left center;transform:scaleX(var(--p,0));transition:transform var(--motion)}

/* --- Rail column: a hairline on the right, not a box. The work frame is
   a 248 rail, 32, then the 680 column from 1100px; one 680 column below. --- */
.frame{display:flex;justify-content:center;align-items:flex-start;gap:var(--sp-32);max-width:var(--w-work);margin:0 auto}
.frame-main{flex:1 1 auto;width:100%;max-width:var(--w-read);min-width:0}
.side-rail{display:none;flex:none;width:var(--w-rail);box-sizing:border-box;padding-right:var(--sp-24);border-right:1px solid var(--hair);flex-direction:column;gap:var(--sp-4)}
.side-rail-label{padding-bottom:var(--sp-8)}
.side-rail-link{display:flex;align-items:center;gap:var(--sp-12);min-height:var(--tap);font-size:var(--fs-small);color:var(--soft);text-decoration:none}
.side-rail-link:visited{color:var(--soft)}
.side-rail-link[aria-current]{padding:var(--sp-12);border-radius:var(--radius);background:var(--mint);color:var(--ink);font-weight:700}
.side-rail-sep{height:1px;margin:var(--sp-12) 0;background:var(--hair)}
@media(min-width:1100px){.side-rail{display:flex;position:sticky;top:var(--sticky-top)}}

/* --- Sticky Back/Next bar: desktop and phone, above the keyboard (--kb,
   ui.js); the page gets bottom padding equal to the bar. --- */
.sticky-bar{position:fixed;left:0;right:0;bottom:var(--kb,0px);z-index:5;box-sizing:border-box;padding:var(--sp-12) var(--gutter) calc(var(--sp-16) + env(safe-area-inset-bottom,0px));background:var(--page);border-top:1px solid var(--hair);box-shadow:var(--shadow-bar)}
.sticky-bar-inner{display:flex;gap:var(--sp-12);max-width:var(--w-read);margin:0 auto}
.sticky-bar-inner>.btn-secondary{flex:none;min-width:96px;min-height:var(--btn-h)}
.sticky-bar-inner>.btn-primary{flex:1 1 auto}
body:has(.sticky-bar){padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px))}
@media(min-width:1100px){
  .sticky-bar{padding-block:var(--sp-16)}
  .sticky-bar-inner{gap:var(--sp-16)}
  .sticky-bar-inner>.btn-secondary{min-width:120px}
  .sticky-bar.with-rail .sticky-bar-inner{max-width:var(--w-work);padding-left:calc(var(--w-rail) + var(--sp-32))}
}

/* --- Form fields: label 18 bold, hint 16 muted, 8 to the box, boxes 56
   high with the control border; 24 between fields. --- */
input[type=text],input[type=number],input[type=email],input[type=tel],input[type=date],input[type=search],input:not([type]),select,textarea{box-sizing:border-box;min-height:var(--btn-h);padding:0 var(--sp-16);border:1px solid var(--control);border-radius:var(--radius);background:var(--page);color:var(--ink);font:400 var(--fs-body)/1.4 var(--sans)}
textarea{min-height:120px;padding:var(--sp-12) var(--sp-16);line-height:1.5}
input:focus-visible,select:focus-visible,textarea:focus-visible,input:focus,textarea:focus{border-color:var(--focus);box-shadow:inset 0 0 0 1px var(--focus);outline:3px solid var(--focus);outline-offset:2px}
input[aria-invalid="true"],textarea[aria-invalid="true"],select[aria-invalid="true"]{border:2px solid var(--err-ink)}
.field{display:flex;flex-direction:column;gap:var(--sp-8)}
.field>label,.field-label{font:700 var(--fs-body)/1.4 var(--sans);color:var(--ink)}
.field-hint{font:400 16px/1.5 var(--sans);color:var(--soft)}
.field-optional{font-weight:400;color:var(--soft)}
.fields{display:flex;flex-direction:column;gap:var(--sp-24)}
.fieldset{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:var(--sp-16)}
.fieldset>legend{padding:0 0 var(--sp-8)}
input.input-day{width:72px}
input.input-year{width:100px}
input.input-short{width:200px;max-width:100%}
input.input-number{width:96px;flex:none}
.check-line{display:flex;gap:var(--sp-12);align-items:flex-start;min-height:var(--tap);font-size:var(--fs-body-min);line-height:1.5;cursor:pointer}
.check-line input{flex:none;width:24px;height:24px;margin:var(--sp-2) 0 0;accent-color:var(--accent)}
/* Inline error: above the box, with an icon, in words. */
.field-error,.field-msg{display:flex;gap:var(--sp-8);margin:0;color:var(--err-ink);font:600 16px/1.4 var(--sans)}
.field-error::before,.field-msg::before{content:"";flex:none;width:20px;height:20px;background:var(--err-ink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16h.01'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16h.01'/%3E%3C/svg%3E") center/contain no-repeat}
.field-msg:empty{display:none}
.err{color:var(--err-ink)}

/* --- Date field: Day, Month, Year, or "Pick a date" (ui.js dateField()) --- */
.date-field{position:relative;border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:var(--sp-12)}
.date-field>legend{display:flex;flex-direction:column;gap:var(--sp-4);padding:0 0 var(--sp-4)}
.date-parts{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--sp-12)}
.date-part{display:flex;flex-direction:column;gap:var(--sp-8);font:600 var(--fs-small)/1.3 var(--sans);color:var(--ink)}
.date-pick{min-height:var(--btn-h)}
.cal{display:flex;flex-direction:column;gap:var(--sp-12);width:max-content;max-width:100%;box-sizing:border-box;padding:var(--sp-16);border:1px solid var(--hair);border-radius:var(--radius-card);background:var(--card);box-shadow:0 8px 24px rgba(20,33,61,.12)}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12)}
.cal-title{font-size:var(--fs-body-min)}
.cal-nav{width:var(--tap);min-width:var(--tap);min-height:var(--tap);padding:0;font-size:22px}
.cal-grid{display:flex;flex-direction:column;gap:var(--sp-4)}
.cal-row{display:grid;grid-template-columns:repeat(7,48px);justify-content:space-between;column-gap:var(--sp-4)}
.cal-dow{display:flex;align-items:center;justify-content:center;font:700 var(--fs-small)/1 var(--sans);color:var(--soft)}
.cal-day{width:48px;height:48px;padding:0;border:0;border-radius:10px;background:transparent;color:var(--ink);font:400 16px/1 var(--sans);cursor:pointer}
.cal-day:hover{background:var(--surface)}
.cal-day[aria-current="date"]{box-shadow:inset 0 0 0 2px var(--accent)}
.cal-day[aria-pressed="true"]{background:var(--btn);color:var(--btn-ink);font-weight:700}
.cal-foot{display:flex;justify-content:space-between;gap:var(--sp-12)}
@media(max-width:599px){
  .cal{width:auto;max-width:none;margin:0 calc(var(--gutter) * -1);border-radius:var(--radius-card) var(--radius-card) 0 0;padding:var(--sp-12) var(--sp-16)}
  .cal-row{column-gap:0}
}

/* --- Repeatable rows (conditions, medicines, people) --- */
.repeat-row,.grid-row{display:flex;flex-direction:column;gap:var(--sp-16);box-sizing:border-box;margin:0 0 var(--sp-12);padding:var(--sp-24);border:0;border-radius:var(--radius);background:var(--surface)}
.repeat-row-head{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-12)}
.repeat-row-fields{display:grid;grid-template-columns:1fr 160px;gap:var(--sp-16)}
@media(max-width:599px){.repeat-row-fields{grid-template-columns:1fr}}
.add-row,.repeat-add{width:auto;align-self:flex-start}
.grid-row .field{margin:0}
.grid-row label{font-size:16px;font-weight:600;color:var(--ink)}

/* --- Journey rail (journey.js): the step dots above, until the helper
   lanes move to .steps. Dots from 1100px, the bar below. --- */
.rail{display:none}
.rail-mobile{display:flex}
@media(min-width:1100px){
  .rail{display:block}
  .rail-mobile{display:none}
  .rail-step{font-size:var(--fs-small);gap:var(--sp-8)}
  .rail-dot{width:16px;height:16px;box-sizing:border-box;border:1.5px solid var(--control)}
  .rail-step.done .rail-dot{background:var(--btn);border-color:var(--btn)}
  .rail-step.current{color:var(--ink);font-weight:700}
  .rail-step.current .rail-dot{background:var(--card);border:5px solid var(--btn)}
  .rail-step:not(:last-child)::after{width:20px;height:2px;border-radius:1px;background:var(--control)}
}

/* =====================================================================
   FLOORS - tap targets 48, text 15 (eyebrows and tags 14), control
   borders 3:1. Checked on every page by tests/foundation-floors.spec.mjs.
   ===================================================================== */
.restart-btn{width:var(--tap);height:var(--tap);border-color:var(--control)}
.pwa-hint-close,.desktop-save .dismiss,.crisis-banner .dismiss,.dismiss{min-width:var(--tap);min-height:var(--tap);display:inline-flex;align-items:center;justify-content:center}
.app-menu button,.paste-toggle button,.pc-change-link,.pc-restart,.idx-jump a,.q-pill,.len-seg button,.pwa-hint-install,.skip-link{min-height:var(--tap)}
.q-pill,.paste-toggle button,.len-seg button{border-color:var(--control)}
.ans-more{min-height:var(--btn-h);border-color:var(--control)}
.progress-panel-note .link{min-height:var(--tap)}
summary{min-height:var(--tap);box-sizing:border-box}
.mk summary,.pip-activity summary{align-items:center}
.pip-toc summary,.pip-desc-toc summary{display:flex;align-items:center}
/* Breadcrumbs, contents and rail links: 48 tall. */
.gd-crumb a,.pip-toc nav a,.pip-desc-toc-group nav a,.pack-toc a,.gd-side-link,.gd-related-rows a{display:inline-flex;align-items:center;min-height:var(--tap)}
.pip-toc nav,.pip-desc-toc-group nav{gap:0}
/* A link on its own (a standalone line, a list of sources, "Read more")
   gets a 48px hit area from vertical padding, which leaves an inline
   link's line box exactly as it was. No specificity, so any component's
   own padding wins. */
:where(main a:not([class])){padding-block:calc((var(--tap) - 1em) / 2)}
.mk-head-link,.mk-foot .row a,.gd-crumb a{min-width:var(--tap);justify-content:center}
.gd-side-panel .gd-side-link{justify-content:center}
.mk-guide span{display:inline-flex;align-items:center;min-height:var(--tap);margin-top:var(--sp-8)}
.door{min-height:64px;border-color:var(--control)}
.wide:not(.go),.copy,.remove-row{border-color:var(--control)}
.checks button{border-color:var(--control)}
.rail-dot{font-size:0}

/* =====================================================================
   SITE PAGES (Lane 1): info and legal pages (W09), the 404 (W10) and
   We've moved (W11).
   ===================================================================== */
.page-hero{background:var(--card)}
.page-hero .gd-crumb{margin-bottom:var(--sp-16)}
.page-hero h1{margin:0;font:500 48px/1.1 var(--serif);letter-spacing:-.01em}
.page-hero .lede{margin:var(--sp-16) 0 0;max-width:760px;font-size:var(--fs-lead);line-height:1.5;color:var(--soft)}
.page-meta{margin:var(--sp-16) 0 0;font-size:var(--fs-small);color:var(--soft)}
@media(max-width:599px){.page-hero h1{font-size:34px}.page-hero .lede{font-size:var(--fs-body)}}
.page-body{background:var(--surface)}
.page-cols{display:flex;flex-direction:column;gap:var(--sp-48)}
.page-toc{display:none;flex-direction:column}
.page-toc .mk-eyebrow{margin:0;padding-bottom:var(--sp-8)}
.page-toc a{display:flex;align-items:center;min-height:var(--tap);font:500 16px/1.3 var(--sans);color:var(--accent);text-decoration:none}
.page-toc a:hover{text-decoration:underline}
@media(min-width:1100px){
  .page-cols{display:grid;grid-template-columns:280px minmax(0,var(--w-read));justify-content:center;align-items:start}
  .page-cols.no-toc{grid-template-columns:minmax(0,var(--w-read));justify-content:start}
  .page-toc{display:flex;position:sticky;top:var(--sticky-top)}
}
.page-article{width:100%;max-width:var(--w-read);margin:0;min-width:0;font-size:var(--fs-body);line-height:var(--lh-body)}
@media(min-width:1100px){.page-article{margin:0}}
.page-article>*{margin:0 0 var(--sp-16)}
.page-article>:last-child{margin-bottom:0}
.page-article p,.page-article li{max-width:none}
.page-article h2{margin:var(--sp-48) 0 var(--sp-16);font:500 var(--fs-h2)/1.2 var(--serif)}
.page-article>h2:first-child{margin-top:0}
.page-article h3{margin:var(--sp-24) 0 var(--sp-8);font:600 var(--fs-h3)/1.3 var(--sans)}
.page-article>.pip-keyfacts{margin-bottom:var(--sp-48);grid-template-columns:1fr;gap:var(--sp-12)}
@media(min-width:600px){.page-article>.pip-keyfacts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.page-article .pip-keyfacts div{background:var(--card);border:1px solid var(--hair);border-radius:var(--radius-card);padding:var(--sp-24)}
.page-article blockquote{margin:0 0 var(--sp-16);padding:var(--sp-16) var(--sp-24);border:0;border-radius:var(--radius);background:var(--card);font-style:normal}
/* One card on the tinted page, with link rows (W10, W11). */
.solo-band{background:var(--surface);padding-inline:var(--gutter)}
@media(min-width:600px){.solo-band{padding-block:var(--sp-96)}}
.solo-card{box-sizing:border-box;max-width:var(--w-read);margin:0 auto;display:flex;flex-direction:column;gap:var(--sp-24);padding:var(--sp-48);background:var(--card);border:1px solid var(--hair);border-radius:var(--radius-card)}
.solo-card>*{margin:0;max-width:none}
.solo-card h1{font-size:var(--fs-h1)}
.solo-card .lede{font-size:var(--fs-body);color:var(--soft)}
.solo-card .mk-eyebrow{margin:0}
.solo-card>.btn{align-self:flex-start}
@media(max-width:599px){.solo-card{padding:var(--sp-24)}}
.link-rows{display:flex;flex-direction:column;gap:var(--sp-12)}
.link-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-16);min-height:64px;box-sizing:border-box;padding:var(--sp-16) var(--sp-24);border:1px solid var(--control);border-radius:var(--radius);background:var(--card);color:var(--ink);font:500 var(--fs-body)/1.4 var(--sans);text-decoration:none}
.link-row:visited{color:var(--ink)}
.link-row:hover{border-color:var(--ink);color:var(--ink)}
.link-row svg{flex:none;color:var(--soft)}

/* Guides (W04 long guide, W05 plain answer): the W09 page frame, with a
   side column (contents, then the dark helper card, sticky) from 1100px.
   Below 1100px the helper card shows inline, before the questions. */
.guide-side{display:none;flex-direction:column;gap:var(--sp-32)}
@media(min-width:1100px){
  .guide-side{display:flex;position:sticky;top:var(--sticky-top)}
  .guide-side .page-toc{position:static}
  .guide-cta.guide-cta-inline{display:none}
}
.guide-cta{display:flex;flex-direction:column;gap:var(--sp-16);padding:var(--sp-32);border-radius:var(--radius-card);background:var(--brand-deep);color:var(--brand-deep-ink)}
.guide-cta>*,.page-article .guide-cta>*{margin:0;max-width:none}
.page-article .guide-cta{margin:var(--sp-48) 0}
.guide-cta .guide-cta-title{font:600 var(--fs-h3)/1.3 var(--sans);color:var(--brand-deep-ink);letter-spacing:0}
.guide-cta p{font-size:16px;line-height:1.5;color:#B9D6CA}
.guide-cta .btn-primary{background:var(--brand-mint);border-color:var(--brand-mint);color:var(--brand-deep)}
.guide-cta .btn-primary:hover{background:var(--brand-mint-hover);border-color:var(--brand-mint-hover);color:var(--brand-deep)}
.guide-cta .btn-link{color:var(--brand-mint);align-self:flex-start}
.guide-cta .btn-link:hover{color:#B8E6CF}
/* The short answer card: first in the article. */
.answer-card{display:flex;gap:var(--sp-24);align-items:flex-start;margin:0 0 var(--sp-48);padding:var(--sp-32);background:var(--card);border:2px solid var(--btn);border-radius:var(--radius-card)}
.answer-yn{flex:none;display:inline-flex;align-items:center;min-height:36px;padding:0 var(--sp-16);border-radius:999px;background:var(--btn);color:var(--btn-ink);font:700 16px/1 var(--sans);text-transform:uppercase;letter-spacing:.06em}
.answer-card-text{display:flex;flex-direction:column;gap:var(--sp-8);min-width:0}
.answer-card-text>*,.page-article .answer-card-text>*{margin:0;max-width:none}
.answer-card-text .mk-eyebrow{margin:0}
.answer-card-lead{font:600 var(--fs-lead)/1.4 var(--sans);color:var(--ink)}
@media(max-width:599px){.answer-card{flex-direction:column;gap:var(--sp-16);padding:var(--sp-24)}}
/* How-to guides: the steps in short, in place of a short answer. */
.guide-summary{margin:0 0 var(--sp-48);padding:var(--sp-24);border-radius:var(--radius);background:var(--card);border:1px solid var(--hair)}
.guide-summary .guide-summary-title{margin:0 0 var(--sp-8);font:700 var(--fs-body)/1.4 var(--sans)}
.guide-summary ul{margin:0}
/* Questions people ask: rows divided by hairlines, no boxes. */
.guide-article .mk-faqlist,.prod-faq .mk-faqlist{max-width:none;margin:0}
.guide-article .mk-faqlist details,.prod-faq .mk-faqlist details{margin:0;padding:0;border:0;border-bottom:1px solid var(--hair);border-radius:0;background:none}
.guide-article .mk-faqlist summary,.prod-faq .mk-faqlist summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-16);min-height:64px;padding:var(--sp-8) 0;font:600 var(--fs-body)/1.4 var(--sans);color:var(--ink)}
.guide-article .mk-faqlist summary::after,.prod-faq .mk-faqlist summary::after{content:"";flex:none;width:20px;height:20px;background:var(--soft);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat}
.guide-article .mk-faqlist details[open] summary::after,.prod-faq .mk-faqlist details[open] summary::after{content:"";transform:rotate(180deg)}
.guide-article .mk-faqlist details p,.prod-faq .mk-faqlist details p{margin:0 0 var(--sp-24);font-size:var(--fs-body-min);color:var(--soft)}
/* Related guides and sources close the article. */
.guide-related{margin:var(--sp-48) 0 0}
.guide-related h2{margin:0 0 var(--sp-16)}
.guide-article .gd-sources{margin:var(--sp-48) 0 0;padding:0;border:0;display:block;font-size:var(--fs-small);color:var(--soft)}
.guide-article .gd-sources h2{margin:0 0 var(--sp-16);color:var(--ink)}
.guide-article .gd-sources ul{margin:0 0 var(--sp-16)}
.guide-article .gd-sources li{margin:0}
.guide-article .gd-sources p{font-size:var(--fs-small)}
/* Notes and quotes: plain tinted cards, never an edge stripe. */
.pip-note{border:0;border-radius:var(--radius);background:var(--mint);padding:var(--sp-16) var(--sp-24)}
.pip-body blockquote,.mk-content blockquote{border:0;border-radius:var(--radius);padding:var(--sp-16) var(--sp-24);font-style:normal}
/* A title's italic accent wraps as one phrase. */
h1 em,h1 .em,h1 .mk-em{display:inline-block}

/* Guide hubs (W03): hero text beside the dark card from 1100px; chips,
   then each group as three-across cards. */
.hub-hero{display:flex;flex-direction:column;gap:var(--sp-32)}
.hub-hero .mk-eyebrow{display:block;margin:0 0 var(--sp-16)}
.hub-hero .guide-cta{align-self:stretch}
@media(min-width:1100px){.hub-hero{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:var(--sp-64);align-items:center}}
.hub-body{display:flex;flex-direction:column;gap:var(--sp-48)}
.hub-jump{display:flex;flex-wrap:wrap;gap:var(--sp-12)}
.hub-jump .chip{text-decoration:none}
.hub-jump .chip:visited{color:var(--ink)}
.hub-group>h2{margin:0 0 var(--sp-24);font:500 var(--fs-h2)/1.2 var(--serif)}
.hub-cards{display:grid;gap:var(--sp-16)}
@media(min-width:600px){.hub-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.hub-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-32)}}
.hub-card{display:flex;flex-direction:column;gap:var(--sp-12);min-height:170px;box-sizing:border-box;padding:var(--sp-32);background:var(--card);border:1px solid var(--hair);border-radius:var(--radius-card);color:var(--ink);text-decoration:none}
.hub-card:visited{color:var(--ink)}
.hub-card:hover{border-color:var(--control)}
.hub-card>*{margin:0;max-width:none}
.hub-kind{font:600 var(--fs-small)/1.3 var(--sans);color:var(--soft)}
.hub-card h3,.hub-card h4{font:600 var(--fs-h3)/1.3 var(--sans);letter-spacing:0;color:var(--ink)}
.hub-card p{font-size:var(--fs-small);color:var(--soft)}
@media(max-width:599px){.hub-card{min-height:0;padding:var(--sp-24)}}
/* The one guides hub (/guides/, FX-Guides-Hub): a "Not sure which?" line in
   the hero, a cross-link line on each product list, then one section per
   product with topic groups of cards and a link to its full list. */
.hub-notsure{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--sp-8);margin:var(--sp-24) 0 0;font-size:var(--fs-body)}
.hub-cross{margin:var(--sp-16) 0 0}
.hub-head{display:flex;flex-direction:column;gap:var(--sp-8)}
.hub-head .mk-eyebrow{margin:0}
.hub-head .hub-section-title{margin:0;max-width:none;font:500 var(--fs-h2)/1.2 var(--serif)}
.hub-sub{margin:0;color:var(--soft)}
.hub-group>h3{margin:0 0 var(--sp-16);font:600 var(--fs-h3)/1.3 var(--sans)}
.hub-all{margin:0}
.hub-top .gd-crumb a{color:var(--accent);text-decoration:underline}

/* Product homes (design/templates/W02-Product-Home.html, T01 tablet) and
   the landing hero (W01). White and tinted bands alternate; one card
   level: the answer example, the rates and the pack list are the boxes. */
.prod-white{background:var(--card)}
.prod-stack{display:flex;flex-direction:column;gap:var(--sp-48)}
.prod-stack-sm{display:flex;flex-direction:column;gap:var(--sp-24)}
.prod-stack>*,.prod-stack-sm>*,.prod-head>*,.prod-hero-main>*,.prod-side>*{margin:0;max-width:none}
.prod-head{display:flex;flex-direction:column;gap:var(--sp-12)}
.prod-head p,.prod-meta{color:var(--soft)}
.prod-meta{font-size:var(--fs-small)}
.prod-hero-grid{display:flex;flex-direction:column;gap:var(--sp-48)}
.prod-hero-main{display:flex;flex-direction:column;gap:var(--sp-24)}
.prod-hero h1{font:500 var(--fs-display)/1.1 var(--serif);letter-spacing:-.01em}
.prod-sub{font-weight:600}
.prod-hero .lede{font-size:var(--fs-lead);line-height:1.5;color:var(--soft)}
.prod-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-24)}
.prod-hero .price-line{margin:0}
.prod-side{display:flex;flex-direction:column;gap:var(--sp-16)}
.prod-side h2{font:600 var(--fs-h3)/1.3 var(--sans);letter-spacing:0}
.prod-side .mk-tick{margin:0}
.prod-diff-grid{display:grid;gap:var(--sp-24)}
.prod-diff figure{display:flex;flex-direction:column;gap:var(--sp-16);margin:0;padding:var(--sp-32);border-radius:var(--radius-card)}
.prod-before{border:1px solid var(--hair)}
.prod-after{background:var(--card);border:2px solid var(--btn)}
.prod-diff blockquote{margin:0;padding:0;border:0;background:none}
.prod-diff blockquote p{margin:0;max-width:none;font-size:var(--fs-body);line-height:1.6;color:var(--ink)}
.prod-before blockquote p{font:italic 400 var(--fs-lead)/1.5 var(--serif)}
.prod-label{font:600 var(--fs-tag)/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.prod-after .prod-label{color:var(--accent)}
.prod-note{margin:0;font-size:var(--fs-small);color:var(--soft)}
.prod-two{display:grid;gap:var(--sp-64)}
.prod-list,.prod-steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-16)}
.prod-list li{display:flex;align-items:center;gap:var(--sp-16)}
.prod-num{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--brand-mint-pale);color:var(--brand-accent);font:600 var(--fs-body)/1 var(--serif)}
/* FX-PIP-Rates / FX-AA-Rates: a card per part, its rates split by "or". */
.prod-rate-cards{display:grid;gap:var(--sp-16)}
.prod-rate-card{display:flex;flex-direction:column;gap:var(--sp-16);padding:var(--sp-24);border-radius:var(--radius-card);background:var(--surface)}
.prod-rate-card h3{margin:0;font:600 var(--fs-lead)/1.3 var(--sans)}
.prod-rate{display:flex;flex-direction:column;gap:var(--sp-4);margin:0}
.prod-rate-name{font:600 var(--fs-small)/1.5 var(--sans);color:var(--ink)}
.prod-rate-amt{font-size:var(--fs-body-min);color:var(--soft)}
.prod-rate-amt b{font:500 40px/1.1 var(--serif);color:var(--ink)}
.prod-rate-note{font-size:var(--fs-small);line-height:1.5;color:var(--soft)}
.prod-rate-or{display:flex;align-items:center;gap:var(--sp-12);margin:0;font:600 var(--fs-small)/1.5 var(--sans);color:var(--soft)}
.prod-rate-or::before,.prod-rate-or::after{content:"";flex:1;height:var(--hairline);background:var(--hair)}
p.prod-rate-one{max-width:none;margin:0;font-size:var(--fs-body-min)}
.prod-steps{gap:var(--sp-32)}
.prod-steps li{display:flex;align-items:flex-start;gap:var(--sp-16)}
.prod-steps h3{margin:0 0 var(--sp-4);font:600 var(--fs-h3)/1.3 var(--sans);letter-spacing:0}
.prod-steps p{margin:0;color:var(--soft)}
.prod-faq{display:grid;gap:var(--sp-24)}
.prod-faq>h2{margin:0}
.prod-head-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-16)}
.prod-head-row h2{margin:0}
.prod-stack>.prod-intro{margin-top:calc(var(--sp-24) * -1)}
.prod-final-row{display:flex;flex-direction:column;gap:var(--sp-24)}
.prod-final-row h2,.prod-final-row p{margin:0}
.prod-final-row h2{margin-bottom:var(--sp-12)}
.prod-final p{color:var(--brand-deep-soft)}
@media(min-width:600px){.prod-rate-cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){
  .prod-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--sp-64);align-items:center}
  .prod-diff-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:var(--sp-32);align-items:start}
  .prod-two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prod-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .prod-faq{grid-template-columns:360px minmax(0,1fr);gap:var(--sp-64);align-items:start}
  .prod-final-row{flex-direction:row;align-items:center;justify-content:space-between}
}
@media(max-width:599px){
  .prod-hero h1{font-size:38px}
  .prod-hero .lede{font-size:var(--fs-body)}
  .prod-diff figure{padding:var(--sp-24)}
  .prod-actions .btn-primary,.prod-final-row .btn-primary{width:100%}
}
/* W01 (FX-Home-Hero): a 72px mark, "Which are you claiming?" over the two
   helper buttons - equal, both secondary, neither primary - and the free
   line. No price on this page. */
.mk-mark{width:72px;height:72px}
.mk-landing-choose,.mk-landing-hero .claim-free{align-self:center;box-sizing:border-box;width:100%;max-width:var(--w-read);margin:0}
.mk-landing-choose{display:flex;flex-direction:column;gap:var(--sp-24)}
.mk-landing-ask{align-self:center;margin:0;font:600 var(--fs-small)/1.5 var(--sans);color:var(--ink)}
.mk-landing-actions{display:flex;gap:var(--sp-16)}
.mk-landing-actions a{flex:1 1 0;min-width:0}
@media(max-width:599px){.mk-landing-actions{flex-direction:column}}

/* The printed A5 card (design/templates/P02-A5-Card-Front.html, P03):
   fixed print colours, one A5 sheet per side, printed double-sided. On
   screen the sides sit on the page as a preview. */
@page a5{size:A5;margin:0}
.a5-print{margin:0}
.a5{page:a5;box-sizing:border-box;width:148mm;height:210mm;display:flex;flex-direction:column;overflow:hidden;break-after:page;background:#FFFFFF;color:#14213D;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.a5:last-child{break-after:auto}
@media screen{.a5-print{background:var(--surface)}.a5-sheets{display:flex;flex-direction:column;align-items:center;gap:var(--sp-32);padding:var(--sp-32) 0}.a5{box-shadow:0 0 0 1px #E4E7ED}}
/* A phone shows the preview scaled to fit (559px sheet in a 320px screen). */
@media screen and (max-width:599px){.a5{zoom:.54}}
.a5 p{max-width:none}
.a5-front .a5-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;padding:var(--sp-64) var(--sp-48) var(--sp-48)}
.a5-top{display:flex;flex-direction:column;align-items:center;gap:var(--sp-24)}
.a5-mark{width:104px;height:104px}
.a5 h1{margin:0;font:500 44px/1.06 var(--serif);letter-spacing:-.02em;text-wrap:balance;color:#14213D}
.a5 .mk-em{font-style:italic;color:#1E5A46}
.a5-lede{margin:0;font-size:18px;line-height:1.5;color:#4A5670;max-width:400px}
.a5-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-8)}
.a5-tags span{font-size:15px;font-weight:600;padding:var(--sp-8) var(--sp-16);border-radius:999px;background:#E7F3EC;color:#1E5A46}
.a5-url{display:flex;flex-direction:column;align-items:center;gap:var(--sp-8)}
.a5-eyebrow{font:700 14px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#4A5670}
.a5-url b{font:600 34px/1.1 var(--serif);color:#14213D}
.a5-foot{flex:none;height:112px;box-sizing:border-box;padding:0 var(--sp-48);background:#0F2F27;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-16)}
.a5-foot p{margin:0;font-size:15px;line-height:1.5;color:#B9D6CA;text-align:right}
.a5-foot p b{color:#FFFFFF}
.a5-back{background:#F3F6F4;padding:var(--sp-48);justify-content:space-between}
.a5-back .a5-eyebrow{color:#1E5A46}
.a5-stack{display:flex;flex-direction:column;gap:var(--sp-12)}
.a5-stack p{margin:0;font-size:16px;line-height:1.45}
.a5-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-12)}
.a5-checks li{display:flex;align-items:center;gap:var(--sp-12);font-size:17px}
.a5-checks li span{flex:none;width:30px;height:30px;border-radius:50%;background:#E7F3EC;color:#1E5A46;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px}
.a5 .a5-soft{font-size:15px;color:#4A5670}
.a5-rates{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-12)}
.a5-rates div{display:flex;flex-direction:column;gap:var(--sp-4);padding:var(--sp-16);border-radius:14px;background:#FFFFFF;border:1px solid #E4E7ED}
.a5-rates b{font:400 32px/1.1 var(--serif);color:#1E5A46}
.a5-rates span{font-size:15px;color:#4A5670}
.a5-call{display:flex;flex-direction:column;gap:var(--sp-8);padding:var(--sp-16) var(--sp-24);border-radius:14px;background:#0F2F27;color:#FFFFFF}
.a5-call b{font:400 21px/1.3 var(--serif)}
.a5-call span{font-size:15px;line-height:1.45;color:#B9D6CA}
.a5-sign{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-16)}
.a5-sign>div{display:flex;flex-direction:column;align-items:flex-end;gap:var(--sp-4);font-size:15px}
.a5-sign span{color:#4A5670}

/* Print, any page (P01's rules for the site's own pages): black on
   white, 12pt text, no site furniture or buttons, and an answer or card
   never split across pages. The PIP answer sheet and the A5 card carry
   their own print layouts. */
@media print{
  :root{color-scheme:light}
  body:not(.a5-print){background:#FFFFFF;color:#000000;font-size:12pt}
  .betastrip,.mk-head,.mk-foot,.sticky-bar,.nav,#nav,.toast,.skip-link,.guide-cta,.copy,.app-foot,button{display:none !important}
  .card,.answer-card,.link-row,.hub-card,.prod-diff figure,details{break-inside:avoid}
}
/* === PIP helper === */
/* Lane 2 (app/pip/**, the points checker, the shared section helper):
   screen-level rules for the PIP helper go here, and only here. Boards:
   design/templates/A01-A18, A21, A22, T02, T03, D03-D07. Everything is
   scoped to main.pip-app so the older helper rules above never reach in. */

/* --- Shell: one card level. Every screen sits straight on the white
   page; no outer card, no grey behind. --- */
body:has(main#app.pip-app){background:var(--page)}
main#app.app-main.pip-app,main#app.app-main.pip-app.pack,main#app.app-main.pip-app.pip-start,main#app.app-main.pip-app.inprogress,main#app.app-main.pip-app.paste{display:block;max-width:none;margin:0;padding:var(--sp-48) var(--gutter) var(--sp-64);background:transparent;border:0;border-radius:0;box-shadow:none}
@media(max-width:599px){main#app.app-main.pip-app,main#app.app-main.pip-app.inprogress,main#app.app-main.pip-app.pack{padding-top:var(--sp-24)}}
/* The date field's legend: 8 to its boxes (the section-spacing floor). */
.pip-app .date-field>legend{padding-bottom:var(--sp-8)}
.pip-app .pip-rail-note{margin-top:0}
body:has(main.pip-app) .app-foot{display:none}
body:has(#nav.pip-bar[hidden]){padding-bottom:0}
.pip-col{max-width:var(--w-read);margin:0 auto}
.pip-col>.rail-wrap{margin:0 0 var(--sp-32)}
.pip-app .screen>h1{margin:0 0 var(--sp-16);font:500 var(--fs-h1)/1.1 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.pip-app .screen>h1+p{margin-bottom:var(--sp-24)}

/* --- Work frame (A06): rail 248, 32, the 680 column, from 1100px.
   Below, the rail gives way to the part bar on top (T02). --- */
.pip-frame{max-width:var(--w-work)}
.pip-frame .rail-wrap{margin:0 0 var(--sp-32)}
@media(min-width:1100px){.pip-frame .rail-wrap{display:none}}
.pip-next-dest{display:none}
@media(min-width:1100px){.pip-next-dest{display:inline}}
.pip-rail{gap:var(--sp-8)}
.pip-rail .side-rail-label{color:var(--accent)}
.pip-rail .num{width:28px;height:28px}
.pip-rail-link{width:100%;padding:0;background:none;border:0;text-align:left;font:400 var(--fs-small)/1.3 var(--sans);color:var(--soft);cursor:pointer}
div.pip-rail-link{cursor:default}
button.pip-rail-link:hover{color:var(--ink);text-decoration:underline}
.pip-rail-current{display:flex;flex-direction:column;gap:var(--sp-12);padding:var(--sp-12);border-radius:var(--radius);background:var(--mint)}
.pip-rail-part{display:flex;align-items:center;gap:var(--sp-12);font-size:var(--fs-small)}
.pip-rail-current .progress{background:var(--card)}
.pip-rail-pos{font-size:var(--fs-small);color:var(--soft)}
.pip-rail-note{margin:0;font-size:var(--fs-small);color:var(--soft)}
.pip-rail-action{font-size:var(--fs-small)}
.pip-app .remind-inline{margin:var(--sp-24) 0 0}
@media(min-width:1100px){.pip-app .remind-inline{display:none}}
/* The sticky bar on a rail screen lines up with the 680 column. */
#nav.pip-bar .btn{white-space:normal}

/* --- Sections (A06, the shared answerSections()): one open at a time.
   A closed section is a row button; the open one a 2px accent box.
   "Done, next section" is a link. --- */
.pip-app .acc{display:flex;flex-direction:column;gap:var(--sp-12);margin:var(--sp-24) 0 0}
.pip-app .acc-sec{border:1px solid var(--control);border-radius:var(--radius);background:var(--card)}
.pip-app .acc-sec.open{border:2px solid var(--btn)}
.pip-app .acc-head{display:flex;align-items:center;gap:var(--sp-16);width:100%;min-height:68px;box-sizing:border-box;padding:var(--sp-12) var(--sp-24);background:none;border:0;border-radius:var(--radius);text-align:left;font:inherit;color:var(--ink);cursor:pointer}
.pip-app .acc-sec.open .acc-head{min-height:0;padding:calc(var(--sp-24) - var(--hairline)) calc(var(--sp-24) - var(--hairline)) var(--sp-8)}
.pip-app .acc-sec.open .acc-body{margin-top:var(--sp-8)}
.pip-app .acc-num{flex:none;width:32px;height:32px;box-sizing:border-box;border-radius:50%;border:1.5px solid var(--control);background:transparent;color:var(--soft);display:flex;align-items:center;justify-content:center;font:700 var(--fs-small)/1 var(--sans)}
.pip-app .acc-sec.answered .acc-num{background:var(--btn);border-color:var(--btn);color:var(--btn-ink)}
.pip-app .acc-sec.open .acc-num{background:var(--card);border:2px solid var(--btn);color:var(--accent)}
.pip-app .acc-text{display:flex;flex-direction:column;gap:var(--sp-4);flex:1;min-width:0}
.pip-app .acc-title{font:700 var(--fs-body)/1.3 var(--sans)}
.pip-app .acc-summary{font:400 var(--fs-small)/1.4 var(--sans);color:var(--soft);white-space:normal;overflow:visible}
.pip-app .acc-change{flex:none;font:600 var(--fs-small)/1.3 var(--sans);color:var(--accent)}
.pip-app .acc-chevron{flex:none;width:12px;height:12px;border-right:2px solid var(--soft);border-bottom:2px solid var(--soft);transform:translateY(-3px) rotate(45deg);margin-right:var(--sp-4)}
.pip-app .acc-chevron[hidden],.pip-app .acc-change[hidden]{display:none}
.pip-app .acc-body{padding:0 calc(var(--sp-24) - var(--hairline)) calc(var(--sp-24) - var(--hairline));margin:0}
.pip-app .acc-done{display:flex;justify-content:flex-start;margin-top:var(--sp-16)}
.pip-app .acc-next-link{font-size:16px}
@media(max-width:599px){
  .pip-app .acc-head{padding:var(--sp-12) var(--sp-16)}
  .pip-app .acc-sec.open .acc-head{padding:calc(var(--sp-16) - var(--hairline)) calc(var(--sp-16) - var(--hairline)) var(--sp-4)}
  .pip-app .acc-body{padding:0 calc(var(--sp-16) - var(--hairline)) calc(var(--sp-16) - var(--hairline))}
}

/* --- Question title (A06): eyebrow and h1 on the left, the help pills
   on the right, bottoms lined up; the pills drop under on a phone. --- */
.pip-app .q-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-16);flex-wrap:wrap;margin:0 0 var(--sp-24)}
.pip-app .q-title{display:flex;flex-direction:column;gap:var(--sp-12);min-width:0}
.pip-app .q-title h1{margin:0;font:500 var(--fs-h1)/1.1 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.pip-app .q-pills{display:flex;gap:var(--sp-8);flex-wrap:wrap;margin:0}
.pip-app .q-pill{font-size:var(--fs-small)}
.pip-app .q-disc{margin:0 0 var(--sp-24)}
@media(max-width:599px){.pip-app .q-title-row{flex-direction:column;align-items:flex-start}}
.pip-app .chips{display:flex;flex-wrap:wrap;gap:var(--sp-12)}

/* --- Start (A01): two columns in the 960 frame, 1fr and 400, 48
   apart; one column below 1100. --- */
.pip-col:has(.pip-start-grid){max-width:var(--w-work)}
.pip-start-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;grid-template-rows:auto auto 1fr auto;grid-template-areas:"head right" "lead right" "left right" "free free";column-gap:var(--sp-48);row-gap:var(--sp-24);align-items:start}
.pip-start-head{grid-area:head}.pip-lead{grid-area:lead}.pip-start-left{grid-area:left}.pip-start-right{grid-area:right}.pip-claiming-free{grid-area:free}
/* The choice card (A01 option C) is the foundation .card--plain. */
@media(max-width:1099px){
  .pip-start-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"head" "right" "lead" "free" "left";row-gap:var(--sp-24)}
  .pip-start-left{padding-top:var(--sp-32);border-top:1px solid var(--hair)}
}
.pip-start-left,.pip-start-right{display:flex;flex-direction:column;min-width:0}
.pip-start-left{gap:var(--sp-24)}
.pip-start-right{gap:var(--sp-16)}
.pip-start-head{display:flex;flex-direction:column;gap:var(--sp-12)}
.pip-app .pip-start-head h1{margin:0;font:500 44px/1.1 var(--serif);letter-spacing:-.01em;text-wrap:balance}
@media(max-width:599px){.pip-app .pip-start-head h1{font-size:var(--fs-h1)}}
.pip-app .pip-start-head h1 .em{font-style:italic;color:var(--accent)}
.pip-lead,.pip-expect p{margin:0;font-size:var(--fs-body);line-height:1.6;color:var(--soft)}
.pip-fact{margin:0;padding:var(--sp-16) var(--sp-24);border-radius:var(--radius);background:var(--surface);font-size:16px;line-height:1.5}
.pip-expect{display:flex;flex-direction:column;gap:var(--sp-8)}
.pip-expect h2{margin:0}
.pip-h3{margin:0;font:600 var(--fs-h3)/1.3 var(--sans)}
.pip-routes{display:flex;flex-direction:column;gap:var(--sp-12)}
.pip-routes .option b{font-weight:600}
.pip-small{margin:0;font-size:var(--fs-small);line-height:1.5;color:var(--soft)}
.pip-continue{width:100%}
.pip-claiming-free{margin:var(--sp-8) 0 0}
@media(max-width:1099px){.pip-claiming-free{margin:0}}
.pip-start-links{display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:var(--sp-24);margin:var(--sp-16) 0 0}
.pip-start-links .import-control{display:contents}
.pip-start-links .btn-link,.pip-start-links .link{text-align:left}
@media(max-width:599px){.pip-start-links{flex-direction:column}}
.pip-start-links .import-control .err:empty{display:none}

/* --- Shared bits of the plain 680 screens (A02, A04, A05, A08...) --- */
/* Eyebrows sit 12 above their title: the flex gaps set it, so the site
   eyebrow's own bottom margin comes off inside the helper. */
.pip-app .mk-eyebrow,.recover-dialog .mk-eyebrow{margin:0}
.pip-app .pip-eyebrow{display:block;margin:0 0 var(--sp-12)}
.pip-app .screen>.pip-lead{margin:0 0 var(--sp-32)}
.pip-rows{list-style:none;margin:0 0 var(--sp-24);padding:0}
.pip-rows li{display:flex;flex-direction:column;gap:var(--sp-4);padding:var(--sp-16) 0;border-bottom:1px solid var(--hair);font-weight:600;line-height:1.4}
.pip-rows li:first-child{padding-top:0}
.pip-actions{display:flex;flex-wrap:wrap;gap:var(--sp-12);margin:var(--sp-24) 0 0}
/* The primary grows along the row only. Stacked on a phone, a flex-basis
   would become the button's height (280px on Safari and Chromium alike),
   so there every button keeps its natural height. */
@media(min-width:600px){.pip-actions>.btn-primary{flex:1 1 280px}}
@media(max-width:599px){.pip-actions{flex-direction:column}.pip-actions>.btn{flex:none;width:100%}}
/* Back / Next (A05, A08): side by side on a phone too, as the boards
   show - Back its own width, Next takes the rest of the row. */
@media(max-width:599px){.pip-actions-nav{flex-direction:row;flex-wrap:nowrap}.pip-actions-nav>.btn-secondary{flex:none;width:auto;min-width:96px}.pip-actions-nav>.btn-primary{flex:1 1 auto;width:auto;min-width:0}}

/* --- Refused route (A04): the date, the deadline, the picks --- */
.pip-app .date-field{margin:0 0 var(--sp-16)}
.pip-deadline-slot:empty{display:none}
.pip-deadline-slot{margin:0 0 var(--sp-24)}
.pip-figures{display:flex;flex-direction:column;gap:var(--sp-12);margin:var(--sp-24) 0 0;font-size:var(--fs-small);color:var(--soft)}
.pip-figures p{margin:0}
.pip-options{gap:var(--sp-12);margin:0 0 var(--sp-24)}
.pip-options>legend{padding:0 0 var(--sp-4)}
.pip-show-all{width:100%}
.pip-after{margin:var(--sp-24) 0 0}

/* --- Part end (A08): ticked heading, answered and skipped rows --- */
.pip-done-head{display:flex;align-items:center;gap:var(--sp-16);margin:0 0 var(--sp-16)}
.pip-app .pip-done-head h1{margin:0}
.num.pip-done-tick{width:40px;height:40px;background:var(--mint);border:0;color:var(--accent)}
.pip-done-list{list-style:none;margin:0 0 var(--sp-24);padding:0}
.pip-done-list li{display:flex;align-items:center;gap:var(--sp-12);min-height:var(--tap);border-bottom:1px solid var(--hair);font-size:var(--fs-body-min)}
.pip-done-list .num{width:24px;height:24px}
.pip-done-label{flex:1;min-width:0}
.pip-actions-nav>.btn-secondary{flex:none;min-width:120px;min-height:var(--btn-h)}
.pip-stop{margin:var(--sp-16) 0 0}
.pip-app .visually-hidden-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- The shared journey rail on a dark arrival band (the AA paywall,
   until Lane 3 rebuilds it): the .steps from journey.js stay legible. --- */
.arrival-band .steps li,.arrival-band .steps-bar-row{color:var(--brand-deep-soft)}
.arrival-band .steps li.done,.arrival-band .steps li[aria-current],.arrival-band .steps-bar-row b{color:var(--brand-deep-ink)}
.arrival-band .steps li::before{border-color:var(--brand-mint)}
.arrival-band .steps li.done::before{background:var(--brand-mint)}
.arrival-band .steps li[aria-current]::before{background:transparent;border-color:var(--brand-mint)}

/* --- Plain screen text: question labels are field labels (18 bold,
   F02), never tiny uppercase; help lines sit 24 above what follows. --- */
.pip-app .q-sub:not(.acc-label){display:block;margin:var(--sp-24) 0 var(--sp-12);font:700 var(--fs-body)/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink)}
.pip-app .screen>p.soft,.pip-app .acc-body>p.soft{margin:0 0 var(--sp-24);font-size:var(--fs-body-min);line-height:1.6}
.pip-app .opts{gap:var(--sp-12);margin:0}
.pip-app .screen>.opts,.pip-app .screen>.chips,.pip-app .screen>.checks,.pip-app .acc-body>.opts,.pip-app .acc-body>.chips{margin-bottom:var(--sp-24)}
.pip-app .screen>.opts:last-child,.pip-app .screen>.chips:last-child,.pip-app .acc-body>.opts:last-child,.pip-app .acc-body>.chips:last-child{margin-bottom:0}
.pip-app .checks{gap:var(--sp-12)}

/* --- Check (A12) --- */
.pip-see{width:100%}
.pip-check-group{display:flex;flex-direction:column;margin:var(--sp-24) 0 0;padding:var(--sp-24) 0 0;border-top:1px solid var(--hair)}
.pip-h2{margin:0 0 var(--sp-8);font:500 var(--fs-h3)/1.3 var(--serif)}
.pip-check-group .pip-h2{font-size:24px}
.pip-check-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-16);padding:var(--sp-12) 0;border-bottom:1px solid var(--hair)}
.pip-check-row:last-child{border-bottom:0}
.pip-check-text{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}
.pip-check-text span{font-size:var(--fs-small);color:var(--soft)}
.pip-check-row.skipped .pip-check-text span{font-style:italic}
.pip-check-group .alert{margin:var(--sp-8) 0 0}
.pip-check-group+.pip-see{margin:var(--sp-32) 0 0}

/* --- Pack (A17, 6A; T03; D05, D07) --- */
.pip-pack-rail{gap:var(--sp-8)}
.pip-pack-rail .side-rail-label{color:var(--accent)}
.pip-pack-main>.rail-wrap{margin:0 0 var(--sp-32)}
@media(min-width:1100px){.pip-pack-main>.rail-wrap{display:none}}
.pip-save-gate{margin:0 0 var(--sp-32)}
.pip-letter{margin:0 0 var(--sp-24)}
.pip-four-tests{margin:0 0 var(--sp-24)}
.pip-recon-deadline{margin:0 0 var(--sp-32)}
.pip-pack-actions .import-control{display:contents}
.pip-pack-actions .import-control .err:empty{display:none}
.pip-app .pack-toc{display:flex;flex-direction:column;gap:var(--sp-8);margin:0;padding:0;list-style:none}
.pip-app .pack-toc li+li{border:0;margin:0}
.pip-app .pack-toc li+li a{margin:0}
.pip-app .pack-toc a{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--sp-12);min-height:var(--tap);padding:var(--sp-12);border-radius:var(--radius);font:600 var(--fs-small)/1.3 var(--sans);color:var(--ink)}
.pip-app .pack-toc a[aria-current]{background:var(--mint);font-weight:700}
.pack-toc-count{flex:none;font-weight:700}
.pack-rail-save{width:100%;margin:var(--sp-8) 0 0}
.pip-app .pack-head{display:flex;align-items:flex-start;gap:var(--sp-16);padding:0;margin:0 0 var(--sp-24)}
.num.pack-tick{width:48px;height:48px;background:var(--mint);border:0;color:var(--accent);font-size:20px}
.pip-app .pack-head-text{display:flex;flex-direction:column;gap:var(--sp-8)}
.pip-app .pack-head h1{margin:0;font:500 var(--fs-h1)/1.1 var(--serif);text-wrap:balance}
.pip-app .pack-head h1 .em,.pip-app .pip-ready-main h1 .em,.pip-app .pay-wall h1 .em{font-style:italic;color:var(--accent)}
.pip-app .pack-head p{margin:0;font-size:var(--fs-body-min);color:var(--soft)}
/* The pack's stacked notes (unlocked alert, next-step line) share one width and a gap. */
.pip-pack-main>.alert+.pip-now{margin-top:var(--sp-16)}
.pip-now{max-width:none;margin:0 0 var(--sp-32);padding:var(--sp-16) var(--sp-24);border-radius:var(--radius);background:var(--mint);font-size:var(--fs-body-min);line-height:1.5}
.pip-now a{font-weight:700;white-space:nowrap}
.pip-app .ans-head-row{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-8) var(--sp-16);margin:0 0 var(--sp-12);padding:0;border:0}
.pip-app .ans-head-row h2,.pip-app .pack-sec>h2,.pip-around-h{margin:0;font:500 var(--fs-h2)/1.2 var(--serif)}
.pip-app .ans-head-row p{margin:0;font-size:var(--fs-small);color:var(--soft)}
.ans-wrap{position:relative;padding-right:var(--sp-24);margin:0 0 var(--sp-24);--seen:0}
.ans-track{position:absolute;top:0;bottom:var(--sp-16);right:0;width:4px;border-radius:2px;background:var(--hair);overflow:hidden}
.ans-track>i{display:block;width:100%;height:100%;background:var(--accent);transform-origin:top;transform:scaleY(var(--seen));transition:transform var(--motion)}
@media(prefers-reduced-motion:reduce){.ans-track>i{transition:none}}
.pip-app .ans-list{display:flex;flex-direction:column;gap:var(--sp-12);margin:0}
.pip-app .ans-row{border:1px solid var(--control);border-radius:var(--radius);background:var(--card)}
.pip-app .ans-row.open{border:2px solid var(--btn)}
.pip-app .ans-head{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-12);width:100%;min-height:60px;box-sizing:border-box;padding:var(--sp-12) var(--sp-24);background:none;border:0;border-radius:var(--radius);text-align:left;font:inherit;color:var(--ink);cursor:pointer}
.pip-app .ans-row.open .ans-head{padding:calc(var(--sp-16) - var(--hairline)) calc(var(--sp-24) - var(--hairline)) var(--sp-8)}
.pip-app .ans-title{flex:1 1 auto;min-width:0;font:700 var(--fs-body)/1.3 var(--sans)}
.pip-app .ans-row:not(.open) .ans-head{flex-wrap:nowrap}
.pip-app .ans-status{flex:none}
.pip-app .ans-status{font-size:var(--fs-small)}
.pip-app .ans-row .acc-chevron{flex:none;width:10px;height:10px;border-right:2px solid var(--soft);border-bottom:2px solid var(--soft);transform:translateY(-3px) rotate(45deg)}
.pip-app .len-pill{display:inline-flex;align-items:center;min-height:32px;padding:var(--sp-4) var(--sp-12);border-radius:999px;background:var(--mint);color:var(--accent);font:600 var(--fs-small)/1.3 var(--sans)}
.pip-app .ans-bar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-8) var(--sp-12);padding-right:calc(var(--sp-24) - var(--hairline))}
.pip-app .ans-bar .ans-heading{flex:1 1 200px;min-width:0}
.pip-app .ans-bar .ans-head{padding-right:0}
.pip-app .ans-bar .len-pill,.pip-app .ans-bar .len-seg{margin-left:calc(var(--sp-24) - var(--hairline))}
.pip-app .len-seg{display:inline-flex;gap:var(--sp-8)}
.pip-app .len-seg button{min-height:var(--tap);padding:0 var(--sp-12);border:1px solid var(--control);border-radius:999px;background:var(--card);color:var(--ink);font:600 var(--fs-small)/1 var(--sans)}
.pip-app .len-seg button[aria-pressed="true"]{border:2px solid var(--btn);background:var(--mint)}
.pip-app .ans-panel{display:flex;flex-direction:column;gap:var(--sp-16);padding:0 calc(var(--sp-24) - var(--hairline)) calc(var(--sp-24) - var(--hairline))}
.pip-app .ans-panel .answer-text{margin:0;padding:0;background:none;border-radius:0;font-size:19px;line-height:1.65;white-space:pre-wrap}
.pip-app .boxes-line{margin:0;font-size:var(--fs-small);color:var(--soft)}
.pip-app .box-instruction{margin:0;font:700 var(--fs-body)/1.4 var(--sans);color:var(--ink)}
.pip-app .answer-actions{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-16)}
.pip-app .pasted-row{min-height:var(--tap);align-items:center;font:400 var(--fs-body)/1.3 var(--sans);color:var(--ink)}
.pip-app .pasted-row input{margin:0}
.pip-app .ans-more{width:100%}
@media(max-width:599px){
  .ans-wrap{padding-right:var(--sp-16)}
  .pip-app .ans-head{padding:var(--sp-12) var(--sp-16)}
  .pip-app .ans-row.open .ans-head{padding:calc(var(--sp-16) - var(--hairline)) calc(var(--sp-16) - var(--hairline)) var(--sp-8)}
  .pip-app .ans-panel{padding:0 calc(var(--sp-16) - var(--hairline)) calc(var(--sp-16) - var(--hairline))}
  .pip-app .ans-bar{padding-right:calc(var(--sp-16) - var(--hairline))}
  .pip-app .ans-bar .len-pill,.pip-app .ans-bar .len-seg{margin-left:calc(var(--sp-16) - var(--hairline))}
}
.pip-save-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-16);margin:0 0 var(--sp-32);padding:var(--sp-16);border-radius:var(--radius);background:var(--mint)}
.pip-save-row p{margin:0;font-size:var(--fs-body-min)}
@media(min-width:1100px){.pip-save-row{display:none}}
.pip-around-h{margin:var(--sp-32) 0 var(--sp-16)}
.pip-around{display:flex;flex-direction:column;gap:var(--sp-12);margin:0 0 var(--sp-48);padding:0;list-style:none}
.pip-around-row{justify-content:space-between;min-height:80px;text-decoration:none;border-color:var(--hair)}
.pip-around-row:visited{color:var(--ink)}
.pip-around-row b{font-weight:700}
.pip-chevron-right{flex:none;width:10px;height:10px;border-right:2px solid var(--soft);border-top:2px solid var(--soft);transform:rotate(45deg);margin-right:var(--sp-8)}
.pip-app .pack-sec{margin:0 0 var(--sp-32);padding:var(--sp-32) 0 0;border-top:1px solid var(--hair)}
.pip-app .pack-sec>h2{margin:0 0 var(--sp-16)}
.pip-app .pack-sec p{max-width:none}
.pip-app .pack-sec .date-card{margin:var(--sp-24) 0 0;padding:var(--sp-24) 0 0}
.pip-app .next-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-8)}
.pip-app .next-steps li{display:flex;gap:var(--sp-16);align-items:flex-start;padding:var(--sp-12);border-radius:var(--radius)}
.pip-app .next-steps li.highlight{background:var(--mint)}
.pip-app .next-body{display:flex;flex-direction:column;gap:var(--sp-4)}
.pip-app .next-detail{font-size:var(--fs-small);color:var(--soft)}
.pip-app .date-card-text h2{margin:0 0 var(--sp-8);font:600 var(--fs-h3)/1.3 var(--sans)}
.pip-app .date-card-text p{margin:0 0 var(--sp-8);font-size:var(--fs-small);color:var(--soft)}

/* --- Ready, free (A13): the answer on the left, the pack on the right --- */
.pip-col-wide{max-width:var(--w-work)}
.pip-ready-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:var(--sp-48);align-items:start}
@media(max-width:1099px){.pip-ready-grid{grid-template-columns:minmax(0,1fr);gap:var(--sp-32)}}
.pip-ready-main{display:flex;flex-direction:column;gap:var(--sp-12)}
.pip-app .pip-ready-main h1{margin:0;font:500 44px/1.1 var(--serif);text-wrap:balance}
@media(max-width:599px){.pip-app .pip-ready-main h1{font-size:var(--fs-h1)}}
.pip-ready-main .pip-lead{margin:0 0 var(--sp-24)}
.pip-first-answer.card{display:flex;flex-direction:column;gap:var(--sp-12);margin:0;padding:var(--sp-32);border:1px solid var(--hair);border-radius:var(--radius-card);background:var(--card)}
@media(max-width:599px){.pip-first-answer.card{padding:var(--sp-24)}}
.pip-first-answer .answer-text{margin:0;padding:0;background:none;font-size:19px;line-height:1.65}
.pip-clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pip-ready-side{display:flex;flex-direction:column;gap:var(--sp-16);padding:var(--sp-24);border-radius:var(--radius-card);background:var(--mint)}
.pip-ready-side p{margin:0}
.pip-tag{align-self:flex-start;padding:var(--sp-4) var(--sp-12);border-radius:999px;background:var(--btn);color:var(--btn-ink);font:700 var(--fs-tag)/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase}

/* --- Paywall (A14, 1A; D04): the answer left, the deep pack card right --- */
.pip-app .pay-wall{display:block;margin:0 auto;padding:0;background:none}
.pip-app .pay-wall>.rail-wrap{margin:0 0 var(--sp-32)}
.pay-grid .pip-first-answer .answer-text{white-space:pre-wrap}
.pay-side{display:flex;flex-direction:column;align-items:center;gap:var(--sp-8)}
.pay-side>.pay-note{margin-block-start:var(--sp-8)}
.pay-card{display:flex;flex-direction:column;gap:var(--sp-16);width:100%;box-sizing:border-box;padding:var(--sp-32);border-radius:var(--radius-card);background:var(--deep);color:var(--deep-ink)}
@media(max-width:599px){.pay-card{padding:var(--sp-24)}}
.pay-card .mk-eyebrow{color:var(--brand-mint)}
.pay-features{display:flex;flex-direction:column;gap:var(--sp-16);margin:0;padding:0;list-style:none;font-size:var(--fs-body-min);line-height:1.5}
.pay-features li{display:flex;gap:var(--sp-12);align-items:flex-start}
.pay-feature-tick{flex:none;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--brand-mint);color:var(--brand-deep);font:700 var(--fs-small)/1 var(--sans)}
.pay-sep{height:1px;background:color-mix(in srgb,var(--deep-ink) 20%,transparent)}
.pay-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--sp-12);margin:0}
.pay-price b{font:500 52px/1 var(--serif)}
.pay-price span{font-size:var(--fs-body-min);color:var(--deep-soft)}
.pay-buy{width:100%}
.pay-quiet{margin:0;font-size:var(--fs-small);color:var(--deep-soft);text-align:left}
.pay-refund{margin:0;font-size:16px}
.pay-refund a{color:var(--deep-ink);text-decoration:underline;text-underline-offset:3px}
.pay-card .pay-err[hidden]{display:none}
.pay-card .pay-included{display:flex;flex-direction:column;gap:var(--sp-12)}
.pay-card .pay-included p{margin:0}
.pay-card .pay-pending .alert-actions{flex-direction:column;align-items:flex-start}
.pay-card .soft{color:var(--deep-soft)}
.pay-not-now{text-align:center}
.pay-side>.btn-link{justify-content:center;text-align:center}
.pay-footnote{margin:var(--sp-32) 0 0}

/* --- Recover (A16), in the foundation dialog --- */
.recover-dialog .mk-eyebrow{margin:0}
.recover-dialog .fields{gap:var(--sp-16)}
.recover-dialog input[type=email]{width:100%}
.recover-status:empty{display:none}
.pip-app .pay-pending{margin:0}

/* --- Notices (not saving, another tab, didn't load): alerts above the
   screen, in its column. --- */
.pip-notices{display:flex;flex-direction:column;gap:var(--sp-12);max-width:var(--w-read);margin:0 auto var(--sp-24)}
.pip-notices:empty{display:none}
.pip-ways li{font-weight:400;gap:var(--sp-8)}
.pip-ways li b{font-weight:700}
.pip-ways li>span{color:var(--soft);font-size:var(--fs-body-min)}
.pip-ways li>.btn-link,.pip-ways li>a{align-self:flex-start}

/* --- Part 1 tables (no board: A06 + F02 pattern 8) --- */
.pip-app .repeat-rows{display:flex;flex-direction:column;gap:var(--sp-12)}
.pip-app .repeat-rows .grid-row{margin:0}
.pip-app .repeat-row-head b{font-size:var(--fs-body)}
.pip-app .repeat-rows .add-row{margin:var(--sp-4) 0 0}
.pip-app .grid-row label{font-size:var(--fs-body-min)}

/* --- Empty (A22) --- */
.pip-empty{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-16);padding:var(--sp-32);border-radius:var(--radius-card);background:var(--surface)}
.pip-empty p{margin:0}
.pip-empty-title{font:700 var(--fs-h3)/1.3 var(--sans)}
.pip-empty .import-control .err:empty{display:none}
@media(max-width:599px){.pip-empty{padding:var(--sp-24)}}

/* --- Hidden means hidden, for primitives that set their own display --- */
.pip-app .samaritans[hidden],.pip-app .alert[hidden]{display:none}
.pip-app .samaritans{margin:var(--sp-12) 0 0}

/* --- Missing-answer alert: what Next needs, in words --- */
.pip-app .pip-missing{margin:0 0 var(--sp-24)}

/* Start again (batch 4, FX-PIP-Reset-Start/-Check/-Phone): the pill at the
   right end of the progress rail (in the "Step x of 4" line on a phone),
   the quiet link under Continue, and the dialog (reset-ui.js). */
.pip-app .pip-rail-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-16);margin:0 0 var(--sp-32)}
.pip-app .pip-rail-row>.rail-wrap{flex:1 1 auto;min-width:0;margin:0}
/* Desktop: every step label on one line beside the pill (the shared .steps wraps). */
@media(min-width:1100px){.pip-app .pip-rail-row .steps{flex-wrap:nowrap;gap:var(--sp-8)}.pip-app .pip-rail-row .steps li:not(:last-child)::after{width:var(--sp-12);margin-left:0}}
@media(min-width:1100px){.pip-app .pip-pack-main>.pip-rail-row>.rail-wrap,.pip-app .pip-frame .pip-rail-row>.rail-wrap{display:none}}
.pip-app .pip-reset-pill{flex:none;display:inline-flex;align-items:center;gap:var(--sp-8);min-height:var(--tap);margin-left:auto;padding:0 var(--sp-16);border:1px solid var(--control);border-radius:999px;background:var(--page);color:var(--ink);font:600 var(--fs-small)/1.2 var(--sans);cursor:pointer}
.pip-app .pip-reset-pill:hover{border-color:var(--ink)}
.pip-app .pip-reset-quiet{align-self:center;gap:var(--sp-8);min-width:var(--tap);color:var(--soft);font-weight:500}
.pip-app .pip-reset-quiet svg{flex:none}
body:has(main.pip-app) .reset-dialog{width:min(480px,calc(100% - 2 * var(--sp-16)))}
body:has(main.pip-app) .reset-dialog .reset-lead,body:has(main.pip-app) .reset-dialog .reset-strong{color:var(--ink)}
body:has(main.pip-app) .reset-dialog .reset-actions{flex-direction:column;align-items:stretch}
body:has(main.pip-app) .reset-dialog .reset-actions>*{width:100%}
body:has(main.pip-app) .reset-dialog .reset-actions>.reset-cancel{align-self:center;width:auto;justify-content:center}
body:has(main.pip-app) .reset-dialog .reset-go,body:has(main.pip-app) .reset-dialog .reset-go:hover{background:var(--err-ink);color:var(--card);border-color:var(--err-ink)}
body:has(main.pip-app) .reset-dialog .alert{margin:0}
/* Recover my pack (batch 4, FX-PIP-Recover-Lost): the soft "No saved copy?" panel (recover-copy.js). */
body:has(main.pip-app) .recover-lost{margin:var(--sp-24) 0;padding:var(--sp-16) var(--sp-24);border-radius:var(--radius-card);background:var(--surface)}
body:has(main.pip-app) .recover-lost p{margin:0}
body:has(main.pip-app) .recover-lost>*+*{margin-top:var(--sp-8)}
body:has(main.pip-app) .recover-lost p.recover-lost-title{font-weight:700}
body:has(main.pip-app) .recover-lost p.recover-lost-limit{color:var(--soft)}
/* Undo (batch 4, FX-PIP-Reset-Undo, FX-PIP-Undo-Phone): the one-line bar at
   the top of the start screen, and the restore line above Continue. */
.pip-app .undo-bar{align-items:center;margin:0 0 var(--sp-24)}
.pip-app .recovered-notice{margin:0 0 var(--sp-24)}
.pip-app .undo-bar::before{margin-top:0}
.pip-app .undo-bar .alert-body{flex:1 1 auto}
.pip-app .undo-bar .alert-title{font-size:inherit}
.pip-app .reset-undo{flex:none;justify-content:center;min-width:var(--tap)}
@media(max-width:599px){.pip-app .reset-undo-more{display:none}}
.pip-app .pip-restore{margin:0;color:var(--soft);font-size:var(--fs-small);line-height:1.5}
.pip-app .pip-restore a{color:var(--accent);font-weight:500}
.pip-app .screen>p.pip-more-prompt{margin:var(--sp-16) 0 0}
.pip-more-prompt[hidden]{display:none}
.pip-app .pack-sec .pip-send-link{margin:var(--sp-16) 0 0}
.pip-app .pack-sec .pip-evidence-back{margin:var(--sp-8) 0 0}.pip-app .draft-check{margin:var(--sp-8) 0 0}
/* === end PIP helper === */

/* --- Points checker (boards W06 landing, W07 question, W08 result): one
   .solo-card column on the tinted .solo-band, the site type scale. --- */
.pc-land .solo-card h1,.pc-card h1{font-size:var(--fs-h1)}
.pc-land .lede{margin:0;font-size:var(--fs-body);line-height:1.6;color:var(--soft)}
.pc-ticks,.pc-rows{list-style:none}
.pc-ticks{display:flex;flex-direction:column;gap:var(--sp-12);margin:0;padding:0}
.pc-ticks li{display:flex;align-items:flex-start;gap:var(--sp-12);margin:0;font-size:var(--fs-body);line-height:1.5}
.pc-tick{flex:none;width:28px;height:28px;box-sizing:border-box;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--mint);color:var(--accent);font:700 var(--fs-small)/1 var(--sans)}
.solo-card>.pc-start{align-self:stretch}
.solo-card>.pc-skip{align-self:center;text-align:center}
.pc-claiming-free{margin:0;font-size:var(--fs-small);line-height:1.5;color:var(--soft)}
#pc-load-error{margin:0}
.pc-run #checker-app{display:flex;flex-direction:column;gap:var(--sp-24)}
.pc-q-head{display:flex;justify-content:space-between;gap:var(--sp-16);margin:0;font:700 var(--fs-small)/1.3 var(--sans);color:var(--soft)}
.pc-sep{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pc-q-head+.progress{margin-top:calc(var(--sp-8) * -1)}
.pc-hint{margin:0;font-size:var(--fs-small);line-height:1.5;color:var(--soft)}
.pc-card h1+.pc-hint{margin-top:calc(var(--sp-8) * -1)}
.pc-card .opts{display:flex;flex-direction:column;gap:var(--sp-12);margin:0}
.pc-nav{display:flex;gap:var(--sp-12)}
.pc-nav .btn-secondary{flex:none;min-width:120px;min-height:var(--btn-h)}
.pc-nav .btn-primary{flex:1 1 auto}
.solo-card>.pc-restart{align-self:flex-start}
.pc-parts{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-12)}
.pc-part{display:flex;flex-direction:column;gap:var(--sp-8);padding:var(--sp-24);border-radius:var(--radius);background:var(--surface)}
.pc-part>*{margin:0}
.pc-part h2{font:700 16px/1.3 var(--sans);color:var(--ink)}
.pc-part-band{font:500 var(--fs-h3)/1.25 var(--serif);color:var(--accent)}
.pc-part-points{font-size:var(--fs-small);color:var(--soft)}
.pc-card .btn-primary{width:100%}
.pc-card .btn-primary+.pc-hint{margin-top:calc(var(--sp-8) * -1)}
.pc-card h2{margin:0}
.pc-rows{display:flex;flex-direction:column;margin:0;padding:0}
.pc-row{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-16);margin:0;padding-block:var(--sp-16);border-bottom:1px solid var(--hair)}
.pc-row-text{min-width:0}
.pc-row-text p{margin:0}
.pc-row-title{font-weight:700;font-size:var(--fs-body);line-height:1.4}
.pc-row-sub{font-size:var(--fs-small);line-height:1.5;color:var(--soft)}
.pc-row-end{flex:none;display:flex;align-items:center;gap:var(--sp-12);margin-top:calc(var(--sp-12) * -1)}
.pc-row-points{font-weight:700;color:var(--accent);white-space:nowrap}
.pc-show-all{width:100%}
.pc-after{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-8);max-width:var(--w-read);margin:0 auto;width:100%}
.pc-after p{margin:0;font-size:var(--fs-small);color:var(--soft)}
@media(max-width:599px){
  .pc-part{padding:var(--sp-16)}
  .pc-nav .btn-secondary{min-width:96px}
  .pc-row{flex-wrap:wrap}
}

/* Refused route: the deadline before paying (stress test, 29 Sep). */
.pip-pay-deadline{display:flex;flex-direction:column;gap:var(--sp-8)}
.pip-pay-deadline .pip-small,.pip-pay-deadline .alert{margin:0}

/* === AA helper === */
/* Lane 3 (app/attendance-allowance/app/**, the eligibility check):
   screen-level rules for the AA helper go here, and only here. */

/* Anything the helper hides with the hidden attribute stays hidden, even
   where a primitive sets its own display (.btn, .alert). */
main#app.aa [hidden]{display:none!important}

/* The Samaritans note under a free-text box, and beside a pack answer
   (the shared .samaritans card; spacing only). */
main#app.aa .samaritans{margin:var(--sp-12) 0 0}

/* --- Question screens (A06, A10, A11): the work frame on a white page --- */
/* No outer card: the 248 rail, 32, then the 680 column (.frame). The older
   helper card and grid rules are switched off for the AA helper here. */
body:has(main#app.aa:not(.pack):not(.paste)){background:var(--page)}
main#app.aa:not(.pack):not(.paste){max-width:calc(var(--w-read) + 2 * var(--gutter));margin:0 auto;padding:var(--section-pad) var(--gutter);background:transparent;border:0;border-radius:0}
main#app.aa.inprogress:not(.pack):not(.paste){display:block;max-width:calc(var(--w-work) + 2 * var(--gutter));margin:0 auto;padding:var(--section-pad) var(--gutter);background:transparent;border:0;border-radius:0}
main#app.aa.inprogress>.rail-wrap{margin:0 0 var(--sp-24)}
@media(min-width:1100px){main#app.aa.inprogress>.rail-wrap{display:none}}
.aa-frame .frame-main{display:flex;flex-direction:column;gap:var(--sp-24)}
.aa-frame .frame-main>.screen{display:flex;flex-direction:column;gap:var(--sp-24)}
.aa-frame .frame-main>.screen>*{margin:0}
.aa-frame .frame-main>.screen>h1+.soft{margin-top:calc(var(--sp-8) * -1)}
.aa-frame h1{text-wrap:balance}

/* The sticky Back/Next bar lines up with the column, beside the rail. */
main#app.aa~.nav>div{max-width:var(--w-read);margin:0 auto;padding:0}
@media(min-width:1100px){main#app.aa.inprogress~.nav>div{max-width:var(--w-work);padding-left:calc(var(--w-rail) + var(--sp-32))}}

/* Rail: "Your progress", parts, the current one in mint with its count. */
.aa-rail .side-rail-label{display:block;text-align:left;margin:0}
.aa-rail-part{display:flex;align-items:center;gap:var(--sp-12);min-height:var(--tap);font-size:var(--fs-small);color:var(--soft)}
.aa-rail-part.is-current{min-height:0;color:var(--ink);font-weight:700}
.aa-rail-num{flex:none;width:28px;height:28px;box-sizing:border-box;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--control);font:700 var(--fs-small)/1 var(--sans);color:var(--soft)}
.aa-rail-num.is-done{background:var(--btn);border-color:var(--btn);color:var(--btn-ink)}
.aa-rail-num.is-current{background:var(--card);border:2px solid var(--btn);color:var(--accent)}
.aa-rail-current{display:flex;flex-direction:column;gap:var(--sp-12);padding:var(--sp-12);border-radius:var(--radius);background:var(--mint)}
.aa-rail-bar{background:var(--card)}
.aa-rail-count{font-size:var(--fs-small);color:var(--soft)}
.aa-rail-note{margin:0;font-size:var(--fs-small);color:var(--soft)}
.aa-rail .btn-link{font-size:var(--fs-small);align-self:flex-start}

/* Eyebrow row: the part and form question, with Start again at the end. */
.aa-q-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-16);margin-bottom:calc(var(--sp-12) * -1)}
.aa-eyebrow{font:700 var(--fs-tag)/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.aa-frame .goal-gradient{margin:0}

/* A05 as a header block: a compact band on each part's first question. */
.aa-part-intro{display:flex;flex-direction:column;gap:var(--sp-8);padding:var(--sp-16) var(--sp-24);border-radius:var(--radius);background:var(--mint)}
.aa-part-intro p{margin:0}
.aa-part-intro-name{font:700 var(--fs-body)/1.3 var(--sans);color:var(--ink)}
.aa-part-intro-line{font-size:var(--fs-body-min);line-height:1.5;color:var(--ink)}
.aa-part-intro-tags{display:flex;flex-wrap:wrap;gap:var(--sp-8)}
.aa-tag{display:inline-flex;align-items:center;padding:var(--sp-4) var(--sp-12);border-radius:999px;background:var(--card);color:var(--ink);font:700 var(--fs-tag)/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase}

/* Remind me to finish: in the rail from 1100px, under the question below. */
.aa-remind-under{margin:0}
@media(min-width:1100px){.aa-remind-under{display:none}}

/* A10 / A11 grouped fields. */
.aa-frame .fields{gap:var(--sp-24)}
.aa-frame .field>label{display:block}
.aa-frame .field .sub{margin:0}
.aa-h2{margin:var(--sp-8) 0 0;font:500 var(--fs-h2)/1.2 var(--serif)}
.aa-date{display:flex;flex-direction:column;gap:var(--sp-8)}
.aa-date-raw{margin:0}
.aa-vh{position:absolute;width:1px;height:1px;margin:calc(var(--hairline) * -1);padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* A06 sections: the foundation option look inside, 12px apart. */
.aa-frame .acc{gap:var(--sp-12);margin:0}
.aa-frame .acc-sec{border-color:var(--control)}
.aa-frame .acc-sec.open{border-color:var(--btn)}
.aa-frame .acc-head{min-height:68px;padding:var(--sp-12) var(--sp-24);gap:var(--sp-16)}
.aa-frame .acc-sec.open .acc-head{padding:calc(var(--sp-12) - var(--hairline)) calc(var(--sp-24) - var(--hairline))}
.aa-frame .acc-num{width:32px;height:32px;box-sizing:border-box;border-color:var(--control)}
.aa-frame .acc-sec.answered .acc-num{background:var(--btn);border-color:var(--btn);color:var(--btn-ink)}
.aa-frame .acc-sec.open .acc-num{background:var(--card);border:2px solid var(--btn);color:var(--accent)}
.aa-frame .acc-title{font-size:var(--fs-body)}
.aa-frame .acc-body:not([hidden]){display:flex;flex-direction:column;gap:var(--sp-16);padding:0 calc(var(--sp-24) - var(--hairline)) calc(var(--sp-24) - var(--hairline))}
.aa-frame .acc-body>*{margin:0}
.aa-frame .acc-done{justify-content:flex-start;margin:0}
@media(max-width:599px){
  .aa-frame .acc-head{padding:var(--sp-12) var(--sp-16);gap:var(--sp-12)}
  .aa-frame .acc-sec.open .acc-head{padding:calc(var(--sp-12) - var(--hairline)) calc(var(--sp-16) - var(--hairline))}
  .aa-frame .acc-body:not([hidden]){padding:0 calc(var(--sp-16) - var(--hairline)) calc(var(--sp-16) - var(--hairline))}
}
/* --- Check (A12): one group per part, all open; rows divided by hairlines --- */
main#app.aa .screen:has(.aa-check-group){display:flex;flex-direction:column;gap:var(--sp-24)}
main#app.aa .screen:has(.aa-check-group)>*{margin:0}
.aa-check-go{width:100%}
.aa-check-group{display:flex;flex-direction:column;border-top:1px solid var(--hair);padding-top:var(--sp-24)}
.aa-check-group h2{margin:0 0 var(--sp-8);font:500 var(--fs-h3)/1.3 var(--serif)}
.aa-check-group .aa-check-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-16);margin:0;padding:var(--sp-16) 0;border:0;border-bottom:1px solid var(--hair)}
.aa-check-group .aa-check-row:last-child{border-bottom:0}
.aa-check-text{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0;line-height:1.4}
.aa-check-text strong{font-size:var(--fs-body-min)}
.aa-check-text span,.aa-check-text em{font-size:var(--fs-small);color:var(--soft);overflow-wrap:anywhere}
.aa-check-row .btn-link{flex:none}
.aa-check-text .aa-check-flag{margin:0;font-size:var(--fs-small);font-weight:600;color:var(--warn-ink)}
/* --- Ready (A13) and paywall (A14): two columns from 1100px --- */
body:has(main#app.aa.ready){background:var(--page)}
main#app.aa.pack.ready{max-width:calc(var(--w-work) + 2 * var(--gutter));margin:0 auto;padding:var(--section-pad) var(--gutter);background:transparent;border:0;border-radius:0}
main#app.aa.ready .screen{display:flex;flex-direction:column;gap:var(--sp-32)}
main#app.aa.ready .screen>*{margin:0}
.aa-ready{display:flex;flex-direction:column;gap:var(--sp-32)}
@media(min-width:1100px){.aa-ready{display:grid;grid-template-columns:minmax(0,532px) minmax(0,380px);justify-content:space-between;align-items:start;gap:var(--sp-48)}}
.aa-ready-lead,.aa-ready-side{display:flex;flex-direction:column;gap:var(--sp-16);min-width:0}
.aa-ready-lead>*,.aa-ready-side>*,.aa-ready-free>*{margin:0}
.aa-ready-lead h1{margin:0}
.aa-ready-lead h1 .em{font-style:italic;color:var(--accent)}
.aa-first-answer{display:flex;flex-direction:column;gap:var(--sp-12);margin-top:var(--sp-16);padding:var(--sp-32);border:1px solid var(--hair);border-radius:var(--radius-card);background:var(--card)}
.aa-first-answer>*{margin:0}
.aa-first-answer h2{font:700 var(--fs-body)/1.35 var(--sans)}
.aa-first-answer-text{font-size:var(--fs-body);line-height:1.65;white-space:pre-wrap}
.aa-first-answer-foot{font-size:var(--fs-small)}
.aa-ready-free{padding:var(--sp-24);border-radius:var(--radius-card);background:var(--mint)}
.aa-ready-free h2{font:700 var(--fs-body)/1.35 var(--sans)}
.aa-ready-free .btn-primary{width:100%}
.aa-badge{align-self:flex-start;display:inline-flex;padding:var(--sp-4) var(--sp-12);border-radius:999px;background:var(--btn);color:var(--btn-ink);font:700 var(--fs-tag)/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase}
.aa-pay-card{display:flex;flex-direction:column;gap:var(--sp-16);padding:var(--sp-32);border-radius:var(--radius-card);background:var(--deep);color:var(--deep-ink)}
.aa-pay-card>*{margin:0}
.aa-pay-card .aa-eyebrow{color:var(--deep-soft)}
.aa-pay-list{display:flex;flex-direction:column;gap:var(--sp-12);margin:0;padding:0 0 var(--sp-16);list-style:none;border-bottom:1px solid color-mix(in srgb,var(--deep-ink) 20%,transparent)}
.aa-pay-list li{display:flex;gap:var(--sp-12);align-items:flex-start;font-size:var(--fs-body-min);line-height:1.5}
.aa-tick{flex:none;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--brand-mint);color:var(--brand-deep);font:700 var(--fs-small)/1 var(--sans)}
.aa-price{display:flex;align-items:baseline;gap:var(--sp-8)}
.aa-price b{font:500 var(--fs-display)/1 var(--serif)}
.aa-price span{color:var(--deep-soft)}
.aa-pay-card .aa-buy{width:100%;background:var(--brand-mint);border-color:var(--brand-mint);color:var(--brand-deep)}
.aa-pay-card .aa-buy:hover{background:var(--brand-mint-hover);border-color:var(--brand-mint-hover)}
.aa-pay-small{font-size:var(--fs-small);line-height:1.5;color:var(--deep-soft)}
.aa-pay-card a{color:var(--deep-ink)}
.aa-refund{color:var(--deep-ink)}
.aa-partner{font-size:var(--fs-small);color:var(--deep-ink)}
.aa-ready-side .btn-link{align-self:center;text-align:center}
.aa-quiet-link{color:var(--soft)}
/* --- Pack (A19): "In your pack" rail, the form tile, then the rest --- */
body:has(main#app.aa.finished){background:var(--page)}
main#app.aa.pack.finished{max-width:calc(var(--w-work) + 2 * var(--gutter));margin:0 auto;padding:var(--section-pad) var(--gutter);background:transparent;border:0;border-radius:0}
main#app.aa.finished .screen>*{margin:0}
.aa-pack{display:flex;flex-direction:column;gap:var(--sp-32)}
.aa-pack>*{margin:0}
.aa-pack-rail .btn-secondary{align-self:stretch;margin-top:var(--sp-8)}
.aa-pack-rail-links,.aa-jump-links{display:flex;flex-direction:column;gap:var(--sp-4)}
.aa-pack-link{display:flex;align-items:center;min-height:var(--tap);padding:0 var(--sp-12);border-radius:var(--radius);color:var(--ink);font:700 var(--fs-small)/1.3 var(--sans);text-decoration:none}
.aa-pack-link:hover{background:var(--mint)}
.aa-jump{display:flex;flex-direction:column;gap:var(--sp-8)}
.aa-jump-label{font:700 var(--fs-tag)/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.aa-jump-links{flex-direction:row;flex-wrap:wrap;gap:var(--sp-8)}
.aa-jump-links .aa-pack-link{border:1px solid var(--control);border-radius:999px;padding:0 var(--sp-16);font-weight:600}
@media(min-width:1100px){.aa-jump{display:none}}
.aa-pack-head{display:flex;gap:var(--sp-16);align-items:flex-start}
.aa-pack-head>div{display:flex;flex-direction:column;gap:var(--sp-8);min-width:0}
.aa-pack-head>div>*{margin:0}
.aa-pack-head h1 .em{font-style:italic;color:var(--accent)}
.aa-pack-tick{flex:none;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--mint);color:var(--accent);font:700 var(--fs-body)/1 var(--sans)}
.aa-pack-sec{display:flex;flex-direction:column;gap:var(--sp-16)}
.aa-pack-sec>*{margin:0}
.aa-pack-sec h2,.aa-row-link h2{font:500 var(--fs-h2)/1.2 var(--serif)}
.aa-pack-sec h3{margin:0;font:700 var(--fs-body)/1.35 var(--sans)}
.aa-pdf-tile{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-24);padding:var(--sp-24);border:2px solid var(--btn);border-radius:var(--radius-card);background:var(--card)}
.aa-pdf-icon{flex:none;width:64px;height:84px;display:flex;align-items:center;justify-content:center;border:1px solid var(--control);border-radius:4px;background:var(--surface);color:var(--accent);font:700 var(--fs-small)/1 var(--sans)}
.aa-pdf-text{flex:1 1 220px;display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}
.aa-pdf-text b{font:700 var(--fs-body)/1.3 var(--sans)}
.aa-pdf-text span{font-size:var(--fs-small);color:var(--soft)}
.aa-pdf-tile .btn-primary{flex:1 1 240px}
.next-grid.aa-steps{display:flex;flex-direction:column;gap:var(--sp-8);margin:0;padding:0;list-style:none}
.next-grid.aa-steps .aa-step{display:flex;flex-direction:row;gap:var(--sp-16);align-items:flex-start;margin:0;padding:var(--sp-12) var(--sp-16);border:0;border-radius:var(--radius);background:transparent}
.next-grid.aa-steps .aa-step p{margin:0;font-size:var(--fs-body-min);line-height:1.5}
.next-grid.aa-steps .aa-step-num{flex:none;margin:0;width:32px;height:32px;box-sizing:border-box;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--control);font:700 var(--fs-small)/1 var(--sans);color:var(--ink)}
.aa-answers{display:flex;flex-direction:column}
.aa-answer{display:flex;flex-direction:column;gap:var(--sp-12);align-items:flex-start;padding:var(--sp-24) 0;border-top:1px solid var(--hair)}
.aa-answer>*{margin:0}
.aa-answer[hidden]{display:none}
.aa-answer-text{max-width:none;font-size:19px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}
.aa-more{align-self:flex-start}
.aa-row-link{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-16);padding:var(--sp-24);border:1px solid var(--hair);border-radius:var(--radius-card)}
.aa-row-link>div{display:flex;flex-direction:column;gap:var(--sp-8);flex:1 1 280px}
.aa-row-link>div>*{margin:0}
.aa-pack-foot{display:flex;flex-wrap:wrap;gap:var(--sp-24)}
/* --- Paste view (A20): the pack rail, one card per answer --- */
body:has(main#app.aa.paste){background:var(--page)}
main#app.aa.paste{max-width:calc(var(--w-work) + 2 * var(--gutter));margin:0 auto;padding:var(--section-pad) var(--gutter);background:transparent;border:0;border-radius:0}
main#app.aa.paste .screen>*{margin:0}
.aa-pack-title{display:flex;flex-direction:column;gap:var(--sp-12)}
.aa-pack-title>*{margin:0}
.aa-pack-link[aria-current]{justify-content:space-between;background:var(--mint)}
.aa-paste-count{font-variant-numeric:tabular-nums;color:var(--accent)}
main#app.aa .paste-list{display:flex;flex-direction:column;gap:var(--sp-24);margin:0}
main#app.aa .aa-paste-card{display:flex;flex-direction:column;gap:var(--sp-16);margin:0;padding:var(--sp-24);border:1px solid var(--hair);border-radius:var(--radius-card);background:var(--card)}
main#app.aa .aa-paste-card>*{margin:0}
main#app.aa .aa-paste-card .paste-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-12);margin:0}
main#app.aa .aa-paste-card h2{margin:0;font:700 var(--fs-body)/1.35 var(--sans)}
.aa-pasted-tag{flex:none;font:700 var(--fs-small)/1.3 var(--sans);color:var(--accent)}
.aa-paste-text{max-width:none;padding:var(--sp-12) var(--sp-16);border-radius:var(--radius);background:var(--surface);font-size:var(--fs-body-min);line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
main#app.aa .aa-paste-card .paste-count{font-size:var(--fs-small);color:var(--soft)}
main#app.aa .aa-paste-card .paste-toggle{display:flex;gap:var(--sp-8)}
main#app.aa .aa-paste-card .paste-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-16);margin:0}
main#app.aa .aa-paste-card .paste-actions .copy.btn-primary{min-width:120px;min-height:var(--btn-h);background:var(--btn);border-color:var(--btn);color:var(--btn-ink)}
main#app.aa .aa-paste-card .paste-actions .copy.btn-primary:hover{background:var(--btn-hover);border-color:var(--btn-hover)}
main#app.aa .paste-nav{display:flex;gap:var(--sp-12);margin:0}
main#app.aa .paste-nav .btn-primary{flex:1 1 auto}
@media(min-width:600px){main#app.aa .paste-nav{display:none}}
@media(max-width:599px){main#app.aa .aa-paste-card:not(.current){display:none}}
/* --- Empty states (A22) and dialog status --- */
.aa-empty{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-16);padding:var(--sp-32);border-radius:var(--radius-card);background:var(--surface)}
.aa-empty>*{margin:0}
.aa-empty h2{font:700 var(--fs-body)/1.35 var(--sans)}
.aa-dialog-status:empty{display:none}
main#app.aa .aa-files{display:flex;flex-direction:column;gap:var(--sp-12);margin:0;padding:var(--sp-24);border:1px solid var(--hair);border-radius:var(--radius-card)}
main#app.aa .aa-files>*{margin:0}
main#app.aa .aa-date-card{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-16);margin:0;padding:var(--sp-24);border:1px solid var(--hair);border-radius:var(--radius-card)}
main#app.aa .aa-date-card>*{margin:0}
main#app.aa .aa-date-card p:empty{display:none}
/* --- Start (A01, option C): the choices in one plain card --- */
main#app.aa.start:not(.pack){max-width:calc(var(--w-work) + 2 * var(--gutter))}
main#app.aa.start .screen{display:flex;flex-direction:column;gap:var(--sp-32)}
main#app.aa.start .screen>*{margin:0}
.aa-start{display:flex;flex-direction:column;gap:var(--sp-24)}
.aa-start>*{margin:0}
@media(min-width:1100px){
  .aa-start{display:grid;grid-template-columns:minmax(0,1fr) 400px;grid-template-areas:"lead card" "sub card" "more card" ". card";column-gap:var(--sp-48);row-gap:var(--sp-16);align-items:start}
  .aa-start-lead{grid-area:lead}.aa-start-sub{grid-area:sub}.aa-start-more{grid-area:more;margin-top:var(--sp-16)}.aa-start-card{grid-area:card}
}
.aa-start-lead{display:flex;flex-direction:column;gap:var(--sp-12)}
.aa-start-lead>*{margin:0}
.aa-start-lead h1 .em{font-style:italic;color:var(--accent)}
.aa-start-sub{font-size:var(--fs-lead);line-height:1.5}
/* The card itself is Lane 1's .card--plain (option C). */
.aa-start-card>*{margin:0}
.aa-start-card h2{font:700 var(--fs-body)/1.35 var(--sans)}
.aa-start-card .opts{display:flex;flex-direction:column;gap:var(--sp-12)}
.aa-start-go{width:100%}
.aa-start-small{font-size:var(--fs-small);line-height:1.5;color:var(--soft)}
.aa-start-more{display:flex;flex-direction:column;gap:var(--sp-16)}
.aa-start-more>*{margin:0}
.aa-start-fact{padding:var(--sp-16) var(--sp-24);border-radius:var(--radius);background:var(--surface);font-size:var(--fs-body-min);line-height:1.5}
.aa-start-expect{display:flex;flex-direction:column;gap:var(--sp-8)}
.aa-start-expect>*{margin:0}
.aa-claiming-free{margin:0}
.aa-start-links{display:flex;flex-wrap:wrap;gap:var(--sp-24)}
.aa-start-pack{display:flex;flex-direction:column;gap:var(--sp-12)}
.aa-start-pack>*{margin:0}
.aa-start-pack h2{font:500 var(--fs-h3)/1.3 var(--serif)}
/* --- AA eligibility check (W06-W08): Lane 1's .solo-band / .solo-card,
   one white card on a tinted band inside main#check, so the body stays
   white and main adds no space of its own. --- */
main#check.app-main{max-width:none;margin:0;padding:0;background:transparent;border:0;border-radius:0}
main#check .screen>*{margin:0}
main#check .screen{display:flex;flex-direction:column;gap:var(--sp-24)}
main#check h1{text-wrap:balance}
.chk-eyebrow{font:700 var(--fs-tag)/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
main#check .screen>.chk-eyebrow+h1{margin-top:calc(var(--sp-12) * -1)}
.chk-lead{font-size:var(--fs-body);line-height:1.6;color:var(--soft)}
.chk-ticks{display:flex;flex-direction:column;gap:var(--sp-12);margin:0;padding:0;list-style:none}
.chk-ticks li{display:flex;gap:var(--sp-12);align-items:flex-start;font-size:var(--fs-body-min);line-height:1.5}
.chk-tick{flex:none;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--mint);color:var(--accent);font:700 var(--fs-small)/1 var(--sans)}
.chk-start{width:100%}
.chk-skip{align-self:center}
.chk-claiming-free{max-width:none;margin:0;padding-top:var(--sp-16);border-top:var(--hairline) solid var(--hair);font-size:var(--fs-small);line-height:1.5;color:var(--soft)}
.chk-top{display:flex;justify-content:space-between;gap:var(--sp-12);font:700 var(--fs-small)/1.3 var(--sans);color:var(--soft)}
.chk-count{flex:none;white-space:nowrap;color:var(--ink);font-variant-numeric:tabular-nums}
main#check .chk-progress{margin:calc(var(--sp-12) * -1) 0 0}
main#check .chk-nav{display:flex;gap:var(--sp-12);margin:0}
main#check .chk-nav .btn-secondary{flex:none;min-width:120px;min-height:var(--btn-h)}
main#check .chk-nav .btn-primary{flex:1 1 auto}
main#check .chk-result{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-16);margin:0;padding:0;border:0;background:transparent;text-align:left}
.chk-result-head{display:flex;align-items:center;gap:var(--sp-12)}
main#check .chk-result-icon{width:48px;height:48px}
main#check .chk-result p{margin:0;max-width:none;color:var(--ink);font-size:var(--fs-body);line-height:1.6}
main#check .chk-result .chk-result-footer{align-self:stretch;padding:var(--sp-12) var(--sp-16);border-radius:var(--radius);background:var(--mint);font-size:var(--fs-body-min);font-weight:600}
main#check .chk-result .chk-cta{width:100%}
.chk-who{display:flex;flex-direction:column;gap:var(--sp-12);padding-top:var(--sp-24);border-top:1px solid var(--hair)}
.chk-who>*{margin:0}
.chk-who h2{font:500 var(--fs-h3)/1.3 var(--serif)}
.chk-who .btn-secondary{align-self:flex-start}
/* The pack while it builds: status, progress, the current step. */
main#app.aa .aa-preparing{display:flex;flex-direction:column;gap:var(--sp-12);max-width:var(--w-read)}
main#app.aa .aa-preparing p{margin:0}
/* Start again (batch 4): the labelled pill in the progress row (it was an
   icon-only 30px circle), and the shared dialog (reset-ui.js). */
main#app.aa .aa-reset-pill{flex:none;display:inline-flex;align-items:center;gap:var(--sp-8);min-height:var(--tap);margin-left:auto;padding:0 var(--sp-16);border:1px solid var(--control);border-radius:999px;background:var(--page);color:var(--ink);font:600 var(--fs-small)/1.2 var(--sans);cursor:pointer}
main#app.aa .aa-reset-pill:hover{border-color:var(--ink)}
body:has(main#app.aa) .reset-dialog{width:min(480px,calc(100% - 2 * var(--sp-16)))}
body:has(main#app.aa) .reset-dialog .reset-lead,body:has(main#app.aa) .reset-dialog .reset-strong{color:var(--ink)}
body:has(main#app.aa) .reset-dialog .reset-actions{flex-direction:column;align-items:stretch}
body:has(main#app.aa) .reset-dialog .reset-actions>*{width:100%}
body:has(main#app.aa) .reset-dialog .reset-actions>.reset-cancel{align-self:center;width:auto;justify-content:center}
body:has(main#app.aa) .reset-dialog .reset-go,body:has(main#app.aa) .reset-dialog .reset-go:hover{background:var(--err-ink);color:var(--card);border-color:var(--err-ink)}
body:has(main#app.aa) .reset-dialog .alert{margin:0}
/* Recover my pack (batch 4, FX-PIP-Recover-Lost): the soft "No saved copy?" panel (recover-copy.js). */
body:has(main#app.aa) .recover-lost{margin:var(--sp-24) 0;padding:var(--sp-16) var(--sp-24);border-radius:var(--radius-card);background:var(--surface)}
body:has(main#app.aa) .recover-lost p{margin:0}
body:has(main#app.aa) .recover-lost>*+*{margin-top:var(--sp-8)}
body:has(main#app.aa) .recover-lost p.recover-lost-title{font-weight:700}
body:has(main#app.aa) .recover-lost p.recover-lost-limit{color:var(--soft)}
/* Undo (batch 4, as FX-PIP-Reset-Undo): the one-line bar at the top of the
   start screen, and the restore line above Continue. */
main#app.aa .undo-bar{align-items:center;margin:0 0 var(--sp-24)}
main#app.aa .recovered-notice{margin:0 0 var(--sp-24)}
main#app.aa .undo-bar::before{margin-top:0}
main#app.aa .undo-bar .alert-body{flex:1 1 auto}
main#app.aa .undo-bar .alert-title{font-size:inherit}
main#app.aa .reset-undo{flex:none;justify-content:center;min-width:var(--tap)}
@media(max-width:599px){main#app.aa .reset-undo-more{display:none}}
main#app.aa .aa-restore{margin:0;color:var(--soft);font-size:var(--fs-small);line-height:1.5}
main#app.aa .aa-restore a{color:var(--accent);font-weight:500}
.aa-draft-check{margin:var(--sp-8) 0 var(--sp-16);font-size:var(--fs-small)}
/* === end AA helper === */

/* Visit counting control on /privacy/ (T18): button, then its note and status, spaced on the scale. */
#visit-counting-control .btn{margin-block-end:var(--sp-16)}
#visit-counting-control p{margin-block:0 var(--sp-8)}