@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("vendor/fonts/newsreader-latin-500.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.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.woff2") format("woff2");
}

:root{
  --page:#FFFFFF; --surface:#F3F6F4; --ink:#14213D; --soft:#4A5670; --line:#C9CFDA; --hair:#E4E7ED; --field-line:#7A8599;
  --accent:#1E5A46; --accent-ink:#FFFFFF; --sel:#EEF5F1; --warn:#7A2E1F;
  --deep:#0F2F27; --deep-ink:#EAF4EF; --deep-soft:#9FC3B4; --mint:#E7F3EC;
  /* Fixed brand colours (CLAUDE.md) for the marketing dark bands - deep
     #0F2F27, accent #1E5A46, mint #7CC7A6, pale mint #E7F3EC. Unlike the
     tokens above, these never change under prefers-color-scheme/data-theme:
     the approved marketing mocks (design/landing-mock.html, design/
     homepage-mock-v2.html) are a fixed design with no dark-mode variant of
     their own, so a dark band must stay legible - never near-black text on
     a near-black background - regardless of the visitor's OS theme. */
  --brand-deep:#0F2F27; --brand-deep-ink:#FFFFFF; --brand-deep-soft:#9FC3B4;
  --brand-accent:#1E5A46; --brand-mint:#7CC7A6; --brand-mint-pale:#E7F3EC;
  /* /check/ result states (item 9, prompts/fixes-and-host-restructure.md) -
     unlike --brand-* above, these DO adapt for dark mode (see the two
     blocks below) - "Colours must pass contrast in light and dark". */
  --chk-green-bg:#E7F3EC; --chk-green-ink:#1E5A46;
  --chk-amber-bg:#FEF3C7; --chk-amber-ink:#B45309;
  --chk-red-bg:#FEE4E2; --chk-red-ink:#B42318;
  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --sans:"Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--page:#0F1420;--surface:#161C2B;--ink:#E8ECF4;--soft:#A3AEC2;--line:#34405A;--hair:#232C40;--field-line:#6E7B96;--accent:#7CC7A6;--accent-ink:#0C1F17;--sel:#15251E;--warn:#F2A593;--deep:#0B1F1A;--deep-ink:#EAF4EF;--deep-soft:#8FB8A6;--mint:#15251E;--chk-green-bg:#15251E;--chk-green-ink:#8FB8A6;--chk-amber-bg:#3A2A0A;--chk-amber-ink:#F2B657;--chk-red-bg:#3A1512;--chk-red-ink:#F2A593;}
}
:root[data-theme="dark"]{--page:#0F1420;--surface:#161C2B;--ink:#E8ECF4;--soft:#A3AEC2;--line:#34405A;--hair:#232C40;--field-line:#6E7B96;--accent:#7CC7A6;--accent-ink:#0C1F17;--sel:#15251E;--warn:#F2A593;--deep:#0B1F1A;--deep-ink:#EAF4EF;--deep-soft:#8FB8A6;--mint:#15251E;--chk-green-bg:#15251E;--chk-green-ink:#8FB8A6;--chk-amber-bg:#3A2A0A;--chk-amber-ink:#F2B657;--chk-red-bg:#3A1512;--chk-red-ink:#F2A593;}
*,*::before,*::after{box-sizing:inherit}
/* Spacing system (27 Sep 2026 - 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. Every margin and padding in
                       this file uses one of these (or 0, auto, em/rem, or
                       another token) - never a raw px value.
   --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. 40px on phones, 64px from 641px.
   --gutter            a page's side gutter, inside every section.
   --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, so every
                       offset below stays in step with it at every width:
                       80px on phones, 112px from 641px (64px in the
                       helpers), 96px in the helpers from 900px.
   --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. */
: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-48:48px;--sp-56:56px;
  --sp-64:64px;--sp-80:80px;--sp-96:96px;--sp-128:128px;
  --section-pad:var(--sp-40);--gutter:var(--sp-24);--space-block:var(--sp-24);--head-h:80px;
  --nav-clear:150px;--hairline:1px}
@media(min-width:641px){
  :root{--section-pad:var(--sp-64);--head-h:112px}
  :root:has(.mk-head-app){--head-h:64px}
}
@media(min-width:900px){:root:has(.mk-head-app){--head-h:96px}}
: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 20px/1.5 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)}
/* 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}
/* 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}

.testbanner{background:var(--accent);color:var(--accent-ink);text-align:center;font:600 .875rem var(--sans);padding:var(--sp-8) var(--sp-12);letter-spacing:.02em}

.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:.92rem;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:560px;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:.875rem;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)}
  .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:8px;font-size:.875rem;font-weight:600;color:var(--soft);white-space:nowrap}
  .rail-step:not(:last-child)::after{content:"";display:block;width:28px;height:1.5px;background:var(--line);margin:0 var(--sp-12)}
  .rail-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:14px;line-height:1;color:transparent;box-sizing:border-box}
  .rail-step.done{color:var(--ink)}
  .rail-step.done .rail-dot{background:var(--mint);border-color:var(--mint);color:var(--accent);font-weight:700}
  .rail-step.current{color:var(--ink)}
  .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:.875rem;font-weight:600;color:var(--soft)}

/* Breathing room between the step bar and whatever comes next (question-
   spacing-focus): a thin divider then at least 40px of clear space, on
   every question/check screen. Scoped to the rail's own top-level use
   (a direct child of #app - see main.js's render()), not the second copy
   the dark arrival band embeds inside itself, which stays as it was. */
main#app>.rail-wrap{border-bottom:1px solid var(--hair);margin-bottom:var(--sp-40)}

/* C. In-progress: desktop (>=1100px) gets a left "Your progress" panel
   next to the question card; 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.inprogress{max-width:980px}
  main#app.inprogress .progress-row{display:flex;align-items:flex-start;gap:48px}
  main#app.inprogress .screen-col{flex:1;min-width:0}
  /* padding-top matches .top's own padding-top below, so the rail's first
     row lines up with the question's eyebrow rather than sitting higher. */
  .progress-panel{flex:0 0 240px;position:sticky;top:var(--sticky-top);padding-top:var(--sp-14);display:flex;flex-direction:column;gap:14px}
  /* Once the left rail sits beside the question (>=1100px), Back/Next must
     line up with the question column alone, not the empty width the rail
     itself takes up: 980px card minus 96px padding minus the 1px border
     each side minus the rail's own 240px plus the 48px gap between them
     (question-spacing-focus item 3). .nav div is otherwise centred in the
     full viewport (margin:0 auto), which only lines up with a card whose
     own content is itself centred - not true here, where the rail pushes
     the question column off-centre, so its offset is reproduced directly:
     half the viewport, minus half the card's own 980px, plus the fixed
     49px (padding+border) to the card's content, plus the rail's own
     240px+48px gap. */
  main#app.inprogress ~ .nav div{max-width:594px;--nav-shift:153px;margin-left:calc(50% - var(--nav-shift));margin-right:auto}
}
.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:.92rem;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:14px;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:.875rem;color:var(--soft)}
.progress-panel-note{font-size:.875rem;color:var(--soft);line-height:1.5;padding-top:var(--sp-6);border-top:1px solid var(--hair);margin-top:var(--sp-4)}
.progress-panel-note a,.progress-panel-note button.link{font-size:.875rem}

/* 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:.875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--soft);margin:0 0 var(--sp-4)}
.goal-gradient{display:block;font-size:.875rem;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:.9rem;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 .875rem/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 2rem/1.15 var(--serif);letter-spacing:-.01em;margin:0 0 var(--sp-14);text-wrap:balance}
h2{font:500 1.4rem/1.25 var(--serif);margin:var(--sp-40) 0 var(--sp-10);text-wrap:balance}
h1+p,h2+p{margin-top:0}
p{margin:0 0 var(--sp-16);max-width:34em;font-size:1rem}
.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,
   not a natively focusable element - the same house focus-ring convention
   as above, not the browser's raw default outline. */
h1:focus,h2:focus{outline:none}
h1:focus-visible,h2:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* 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:.875rem;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 .875rem/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:.875rem;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:.92rem;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:.875rem;color:var(--soft);line-height:1.4}

/* welcome screen - see design/app-mock-phone-start.html */
.eyebrow{display:block;text-align:center;font:600 .875rem/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:.875rem;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:.92rem;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 .875rem/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:.9rem;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:.875rem;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. */
.betastrip{height:22px;background:var(--brand-deep);color:var(--brand-deep-ink);font-size:14px;display:flex;align-items:center;justify-content:center;letter-spacing:.06em}

/* 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:14px;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:14px;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:14px;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:14px;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:14px;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:14px;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:14px;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:14px;color:var(--soft)}
.pasted-row{display:flex;align-items:center;gap:8px;font-size:14px;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:14px;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:14px;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:12.5px;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:.9rem;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:.875rem;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:.875rem;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:.9rem;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:560px;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:760px;margin:var(--sp-48) auto;padding:var(--sp-48);background:var(--page);border:1px solid var(--hair);border-radius:22px}
  main#app.pack{max-width:1280px;margin:0 auto;padding:0 0 var(--section-pad);background:transparent;border:0}
  main#app.paste{max-width:760px;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 (760px outer, minus 48px padding and the 1px border on each side),
     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:662px}
  .app-foot{display:block;max-width:none;margin:0;padding:0 var(--sp-20) var(--sp-32);text-align:center;font-size:14px;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)}
  h1{font-size:2.5rem}
  .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:18px}
.mk-wrap{max-width:1080px;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}
.mk-head-app .lockup{--mark:40px;--wm:24px}
.mk-foot .lockup{--mark:34px;--wm:20px}
@media(max-width:640px){.lockup{gap:10px}.mk-head .lockup{--mark:40px;--wm:24px}}
/* The brand (the lockup) takes the room the nav leaves, and never shrinks
   under the lockup itself. */
.mk-brand{display:flex;align-items:center;flex:1 1 auto}
.mk-head nav a{text-decoration:none;color:var(--soft);font-weight:500;margin-left:var(--sp-28);font-size:.95rem}
.mk-head nav a.mk-cta{color:var(--accent-ink);background:var(--accent);padding:var(--sp-10) var(--sp-16);border-radius:10px;font-weight:600}
@media(max-width:640px){.mk-head nav:not(.minimal) a:not(.mk-cta){display:none}}
/* The brand never shrinks under the lockup, so on the narrowest phones the
   CTA gives up a little side padding to fit beside it (still 44px tall). */
@media(max-width:360px){.mk-head nav a.mk-cta{padding-left:var(--sp-12);padding-right:var(--sp-12)}}

/* The interview app's own header (aa.threesisters.app) - see
   prompts/reskin-helper.md item 1: 64px tall from 641px, 96px from 900px
   (--head-h), smaller than the marketing header above; 80px on phones like
   every header, which is what the lockup needs. The "Attendance
   Allowance helper" label only appears at desktop widths, matching
   design/app-mock-desktop-question.html; "Back to site" shows at both. */
.mk-head-app .app-label{display:none;color:var(--soft);font-weight:500;font-size:.95rem;margin-right:var(--sp-28)}
@media(min-width:900px){
  .mk-head-app .app-label{display:inline}
}

/* 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:44px;font-size:.875rem}
.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:clamp(2.6rem,6.4vw,4.4rem);line-height:1.02;margin-bottom:0}
.mk h2{font-size:clamp(1.7rem,3.4vw,2.4rem);margin:0 0 var(--sp-16);max-width:26ch}
.mk h3{font-size:1.2rem}
.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 .875rem/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:.875rem;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:.875rem}.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-block;padding:var(--sp-10) 0}

.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)}
/* The free note under the price card: its own row, in the price column,
   so the tick list and price card keep their equal height; the grid gap
   is the space above it. */
.mk-split>.free-note{margin:0}
@media(min-width:860px){.mk-split>.free-note{grid-column:2}}
.mk-honest{margin-top:var(--sp-32);font-size:.9rem;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)}
.mk-foot{color:var(--soft);font-size:.9rem;background:var(--surface)}
.mk-foot .mk-footrow{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;justify-content:space-between}
.mk-foot .row{display:flex;flex-wrap:wrap;gap:8px 22px}.mk-foot a{color:var(--soft)}

/* 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:680px;margin:0 auto;padding:0 var(--gutter)}
.mk-content h1{font:600 2.4rem/1.15 var(--serif);letter-spacing:-.01em;margin:0 0 var(--sp-14);text-wrap:balance}
.mk-content h2{font:600 1.4rem/1.25 var(--serif);margin:var(--sp-40) 0 var(--sp-10);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 .mk-head .mk-wrap{padding:0 var(--sp-128)}
.mk-landing main{flex:1;display:flex;flex-direction:column}
.mk-landing-hero{flex:none;padding-inline:var(--sp-96);display:flex;flex-direction:column;align-items:center;text-align:center}
.mk-landing-hero .mk-center{gap:24px}
.mk-mark-big{width:150px;height:150px}
.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 .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:.875rem;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 .875rem/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-tags span{font-size:.875rem;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:.88rem;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:.9rem;color:var(--brand-deep-soft)}
.mk-not-sure a{color:var(--brand-mint-pale)}
@media(max-width:900px){
  .mk-landing .mk-head .mk-wrap,.mk-landing-hero,.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:.875rem;color:var(--soft)}
.gd-crumb a{color:var(--soft);text-decoration:none}
.gd-crumb a:hover{color:var(--accent)}
.gd-checked{font-size:.875rem;color:var(--soft)}
.mk-trader{font-size:.875rem;color:var(--soft)}
/* 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 .875rem 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:.875rem;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:.875rem;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:.92rem}
.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:1080px;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:.9rem;text-align:center}
.gd-side-panel .gd-free{font-size:.875rem;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:1080px}
.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:.875rem;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:.875rem;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:1080px;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 2.3rem/1.12 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:.875rem;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:1080px;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:.9rem}
.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:.88rem;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:720px;display:flex;flex-direction:column;gap:24px;font-size:1.05rem;line-height:1.6}
.pip-body h2{font:500 2rem/1.15 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:.875rem;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:.875rem;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:.875rem;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:.88rem;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:1080px;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:1080px;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:.92rem;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:.9rem}
.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:.875rem;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:.875rem}
.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:.875rem;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:.92rem;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:.875rem}

/* ---------------------------------------------------------------------
   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:.875rem;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:.875rem;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:.875rem;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:.875rem;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:.9rem;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:.88rem;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}
.mk-head nav a{min-height:44px;display:inline-flex;align-items:center}
.mk-foot .row{gap:4px 20px}
.mk-foot .row a{min-height:44px;display:inline-flex;align-items:center;font-size:1rem}
/* 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)}

/* "Claiming is free" - the approved note, one component everywhere it
   appears (tools/render_site.mjs's freeNoteHtml on the static pages,
   app/attendance-allowance/app/js/free-note.js in the helpers; the words
   come from site-data.js's FREE_NOTE). A mint-pale card: an info icon and
   the heading, the body, a hairline, then the price line. Fixed brand
   colours in light mode; its own dark pair below. --space-block above and
   below wherever it sits. */
.free-note{align-self:stretch;background:#E7F3EC;border:1px solid #C4DFD0;border-radius:14px;padding:var(--sp-20);margin:var(--space-block) 0;text-align:left;color:#22304F}
.free-note p{margin:0;max-width:none}
.free-note .free-note-head{display:flex;align-items:center;gap:10px;font:700 16px/1.3 var(--sans);color:#0F2F27}
.free-note-icon{flex:none;width:22px;height:22px;color:#1E5A46}
.free-note .free-note-body{margin-top:var(--sp-8);font-size:14.5px;line-height:1.55;color:#22304F}
.free-note .free-note-price{margin-top:var(--sp-14);padding-top:var(--sp-12);border-top:1px solid #C4DFD0;font:600 13px/1.4 var(--sans);color:#1E5A46}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .free-note{background:#15251E;border-color:#2C4A3D;color:#D3DBE8}
  :root:not([data-theme="light"]) .free-note .free-note-head{color:#EAF4EF}
  :root:not([data-theme="light"]) .free-note-icon,:root:not([data-theme="light"]) .free-note .free-note-price{color:#7CC7A6}
  :root:not([data-theme="light"]) .free-note .free-note-body{color:#D3DBE8}
  :root:not([data-theme="light"]) .free-note .free-note-price{border-top-color:#2C4A3D}
}
:root[data-theme="dark"] .free-note{background:#15251E;border-color:#2C4A3D;color:#D3DBE8}
:root[data-theme="dark"] .free-note .free-note-head{color:#EAF4EF}
:root[data-theme="dark"] .free-note-icon,:root[data-theme="dark"] .free-note .free-note-price{color:#7CC7A6}
:root[data-theme="dark"] .free-note .free-note-body{color:#D3DBE8}
:root[data-theme="dark"] .free-note .free-note-price{border-top-color:#2C4A3D}