@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;
  --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;--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;--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}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;min-height:100%;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)}

.testbanner{background:var(--accent);color:var(--accent-ink);text-align:center;font:600 .85rem var(--sans);padding:8px 12px;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:14px 44px 14px 16px;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:10px;min-height:44px;padding:0 18px;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:6px;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 is short enough to sit above the page header rather than over it. */
@media(min-width:760px){
  .pwa-hint{left:0;right:0;top:0;bottom:auto;border-radius:0;box-shadow:0 8px 24px -18px rgba(20,33,61,.5);display:flex;align-items:center;gap:16px;padding:10px 48px 10px 20px}
  .pwa-hint-install{display:inline-block;flex:none;margin-top:0;min-height:36px;padding:0 16px}
  .pwa-hint-close{top:50%;transform:translateY(-50%)}
}

main{max-width:560px;margin:0 auto;padding:0 20px 150px}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.85rem;color:var(--soft);font-weight:500;padding:14px 0 10px}
/* "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:12px}
.bar{height:6px;background:var(--hair);border-radius:3px;overflow:hidden;margin-bottom:36px}
.bar i{display:block;height:100%;background:var(--accent);transition:width .35s cubic-bezier(.16,1,.3,1)}
.screen{animation:in .22s 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}}

h1{font:500 2rem/1.15 var(--serif);letter-spacing:-.01em;margin:0 0 14px;text-wrap:balance}
h2{font:500 1.4rem/1.25 var(--serif);margin:40px 0 10px;text-wrap:balance}
h1+p,h2+p{margin-top:0}
p{margin:0 0 16px;max-width:34em;font-size:1rem}
.soft{color:var(--soft)}
ol.plain,ul.plain{margin:0 0 16px;padding-left:1.25em}
ol.plain li,ul.plain li{margin:8px 0;padding-left:4px}
ol.plain li::marker{font-weight:600;color:var(--accent)}
ul.plain li::marker{color:var(--line)}

.sub{font-weight:600;margin:32px 0 10px}
.sub i{display:none}
input[type=text],input[type=number],textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--page);border:1px solid var(--line);border-radius:12px;padding:16px}
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}

/* 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:4px}
.opts button{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:62px;padding:16px 18px;text-align:left;background:var(--page);border:1px solid var(--line);border-radius:12px;font-size:1.05rem}
.opts button[aria-pressed="true"]{border:2px solid var(--accent);background:var(--mint);font-weight:600;padding:15px 17px}
.opts button[aria-pressed="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:.75rem;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:10px 14px;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:50%;top:50%;width:20px;height:2.5px;margin:-1.25px 0 0 -10px;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:16px 18px;margin:22px 0;font-size:1rem}
.todo{border:1.5px dashed var(--warn);color:var(--warn);border-radius:12px;padding:12px 16px;font-weight:600;font-size:.95rem}
.err{color:var(--warn);font-weight:600;margin-top:18px}

/* /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:32px 28px;margin-top:8px;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 .75rem/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:.85rem;color:var(--soft)}
.chk-cta{display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;border-radius:12px;padding:0 20px;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)}

/* welcome screen - see design/app-mock-phone-start.html */
.welcome-sub{text-align:center;max-width:320px;margin-left:auto;margin-right:auto}
.hero-mark{width:80px;height:80px;display:block;margin:0 auto 4px}
.eyebrow{display:block;text-align:center;font:600 .7rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
h1 .em{font-style:italic;color:var(--accent)}
.step-list{display:flex;flex-direction:column;gap:10px;margin:18px 0}
.step-item{display:flex;align-items:center;gap:12px;font-size:1rem}
.step-num{flex:none;width:28px;height:28px;border-radius:50%;background:var(--mint);color:var(--accent);display:flex;align-items:center;justify-content:center;font:600 .9rem var(--serif)}
.pills{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:18px 0}
.pill{font-size:.78rem;font-weight:600;padding:6px 12px;border-radius:999px;background:var(--surface)}

/* grid / table entry (Q16, Q27, Q39) */
.grid-row{border:1px solid var(--line);border-radius:12px;padding:16px;margin:0 0 12px}
.grid-row .field{margin-bottom:12px}
.grid-row .field:last-child{margin-bottom:0}
.grid-row label{display:block;font-size:.92rem;color:var(--soft);margin-bottom:6px}
.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 .7rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);padding:18px 0 4px}
.group-label:first-child{padding-top:0}

/* pack */
.card{border:1px solid var(--line);border-radius:14px;padding:20px;margin:14px 0;background:var(--page)}
.card h2{font:600 1.05rem var(--sans);margin:0 0 4px}
.card .use{font-size:.9rem;color:var(--soft);margin-bottom:12px}
.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:14px 0 0 auto;min-height:48px;padding:0 18px;border:1px solid var(--line);border-radius:10px;background:var(--page);font-size:.95rem}
.row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;border-top:1px solid var(--hair)}
.row:first-of-type{border-top:0;padding-top:0}.row:last-of-type{padding-bottom:0}
.row div{min-width:0}.row strong{font-weight:600}.row small{display:block;color:var(--soft);font-size:.95rem;margin-top:2px}

/* the "ready" band and the four numbered tiles - see
   design/app-mock-phone-pack.html, design/app-mock-desktop-pack.html */
.pack-ready{background:var(--brand-deep);color:var(--brand-deep-ink);text-align:center;padding:28px 24px 22px;margin:0 -20px 18px;display:flex;flex-direction:column;align-items:center;gap:8px}
.pack-ready img{width:48px;height:48px;border-radius:12px}
.pack-ready h1{color:var(--brand-deep-ink);margin:0}
.pack-ready .em{font-style:italic;color:var(--brand-mint)}
.pack-ready p{color:var(--brand-deep-soft);margin:0}
.tiles{display:flex;flex-direction:column;gap:12px}
.tile{border:1px solid var(--hair);border-radius:14px;padding:18px;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:6px}
.tile .card,.tile h2:not(.tile-head){margin-top:12px}
.save-strip{background:var(--mint);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;margin-top:16px}
.save-strip span{font-size:.85rem;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}

.go,.wide{display:block;width:100%;min-height:56px;border-radius:12px;padding:12px 20px;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:12px}
.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}

.nav{position:fixed;left:0;right:0;bottom:0;background:var(--page);border-top:1px solid var(--hair);padding:12px 20px calc(12px + 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 18px;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{background:var(--surface)}
  main{max-width:760px;margin:48px auto;padding:44px 52px 48px;background:var(--page);border:1px solid var(--hair);border-radius:22px}
  main#app.pack{max-width:1280px;margin:0 auto;padding:0;background:transparent;border:0}
  .nav{position:static;background:transparent;border-top:0;padding:20px 0 48px}
  .nav div{max-width:760px}
  .app-foot{display:block;max-width:none;margin:0;padding:0 20px 32px;text-align:center;font-size:.65rem;color:var(--soft)}
  .restart-btn{width:32px;height:32px}
  .welcome-sub{max-width:440px}
  main#app.pack .pack-top{max-width:1200px;margin:0 auto;padding:16px 60px 12px}
  h1{font-size:2.5rem}
  .opts button,.checks button{border-radius:14px}
  .pack-ready{margin:0;padding:40px 60px 36px;border-radius:0}
  .pack-ready h1{font-size:2.75rem}
  .tiles{flex-direction:row;align-items:stretch;flex-wrap:wrap;max-width:1200px;margin:32px auto 0;padding:0 60px}
  .tile{flex:1 1 260px}
  .save-strip{flex-direction:row;align-items:center;justify-content:space-between;max-width:1200px;margin:16px 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 main{max-width:none;margin:0;padding:0;border:0;border-radius:0}
.mk-wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.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. 112px tall on desktop; the
   "Independent by design" tagline is added only on the landing page. */
.mk-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--page) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--hair)}
.mk-head .mk-wrap{display:flex;align-items:center;justify-content:space-between;min-height:112px}
/* 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 translucent 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}}
.mk-tagline{font:600 .72rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.mk-head nav a{text-decoration:none;color:var(--soft);font-weight:500;margin-left:28px;font-size:.95rem}
.mk-head nav a.mk-cta{color:var(--accent-ink);background:var(--accent);padding:10px 16px;border-radius:10px;font-weight:600}
@media(max-width:640px){.mk-head nav:not(.minimal) a:not(.mk-cta){display:none}.mk-head .mk-wrap{min-height:76px}.mk-tagline{display:none}}

/* The interview app's own header (aa.threesisters.app) - see
   prompts/reskin-helper.md item 1: 64px tall on phones, 96px on desktop,
   smaller than the marketing header's own sizing above. 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 .mk-wrap{min-height:64px}
.mk-head-app .app-label{display:none;color:var(--soft);font-weight:500;font-size:.95rem;margin-right:28px}
@media(min-width:900px){
  .mk-head-app .mk-wrap{min-height:96px}
  .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:32px 32px 28px;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:8px}
.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 16px;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 .8rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;display:block}
.mk-btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 26px;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 section{padding:88px 0}
.mk-lede2{font-size:1.12rem;max-width:34em;margin:0}
.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{padding:56px 22px 36px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
@media(min-width:900px){.mk-hero{padding:80px 22px 48px}}
.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:.85rem;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:.78rem}.mk-steprule{width:16px}}

.mk-grid{display:grid;gap:18px;margin-top:30px}
@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:28px;text-align:left}
.mk-card p{margin:0;font-size:1rem;color:var(--soft)}
.mk-card h3{margin-bottom:8px}
/* 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:16px;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:30px;width:100%}
@media(min-width:760px){.mk-statcards{grid-template-columns:repeat(3,1fr)}}
.mk-statcards div{background:var(--surface);border-radius:18px;padding:26px 20px;text-align:left}
.mk-statcards b{display:block;font:500 3rem/1 var(--serif);letter-spacing:-.02em;color:var(--accent);margin-bottom:8px}
.mk-statcards span{font-size:.95rem;color:var(--soft)}

.mk-split{display:grid;gap:24px;margin-top:30px;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:12px 0 12px 34px;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:32px;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:32px;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:4px 0}
.mk-price p{font-size:.95rem;color:var(--brand-deep-soft);margin:0}
.mk-price .mk-soon{font-size:.85rem;opacity:.8}
.mk-price .mk-btn{width:100%;margin-top:10px}
.mk-honest{margin-top:30px;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:24px;text-align:left}
.mk-guide h3{margin-bottom:6px}.mk-guide p{margin:0;font-size:.98rem;color:var(--soft)}
.mk-guide span{display:inline-block;margin-top:14px;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:16px 20px;margin-top:10px;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:10px 0 0;font-size:1rem;color:var(--soft)}
.mk-final h2{margin:0 auto 14px;max-width:18ch}.mk-final p{margin:0 auto 26px}
.mk-foot{padding:36px 0 48px;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:48px 22px 88px}
.mk-content h1{font:600 2.4rem/1.15 var(--serif);letter-spacing:-.01em;margin:0 0 14px;text-wrap:balance}
.mk-content h2{font:600 1.4rem/1.25 var(--serif);margin:40px 0 10px;text-wrap:balance}
.mk-content p{margin:0 0 16px;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 120px}
.mk-landing main{flex:1;display:flex;flex-direction:column}
.mk-landing-hero{flex:none;padding:96px 96px 88px;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}
.mk-landing-hero .lede{font-size:1.15rem;color:var(--soft);max-width:560px;margin:0}
.mk-tools-band{box-sizing:border-box;padding:120px 96px 128px;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-tool{box-sizing:border-box;border-radius:20px;display:flex;flex-direction:column;gap:14px;text-align:left}
.mk-tool.live{padding:44px 40px;background:var(--page);min-height:380px;gap:20px}
.mk-tool:not(.live){padding:36px 32px;background:color-mix(in srgb,var(--brand-deep) 80%,black 8%);border:1px solid var(--brand-accent);min-height:380px;opacity:.92}
.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:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;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:var(--brand-accent);color:var(--brand-mint-pale)}
.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.live p{flex-grow:0}
.mk-tool-tags{display:flex;gap:8px;flex-wrap:wrap}
.mk-tool-tags span{font-size:.78rem;font-weight:600;padding:5px 11px;border-radius:999px;background:var(--surface);color:var(--ink)}
.mk-tool .mk-btn{margin-top:4px}
.mk-tools-band .mk-note{margin:0;font-size:.88rem;color:var(--brand-deep-soft);max-width:520px}
.mk-landing .mk-foot{padding:0;background:var(--page);color:var(--soft)}
.mk-landing .mk-foot .mk-wrap.mk-footrow{height:88px;padding:0 120px;flex-wrap:nowrap}
@media(max-width:900px){
  .mk-landing .mk-head .mk-wrap,.mk-landing-hero,.mk-tools-band{padding-left:22px;padding-right:22px}
  .mk-landing .mk-foot .mk-wrap.mk-footrow{padding:14px 22px;height:auto;min-height:64px;flex-wrap:wrap}
  .mk-tools-band{padding-top:72px;padding-bottom:72px}
  .mk-tools-grid{grid-template-columns:1fr;gap:24px}
  .mk-tool.live,.mk-tool:not(.live){min-height:0}
}

/* ---------------------------------------------------------------------
   Guide question pages (/guides/<slug>/) - design/guide-mock.html, see
   prompts/seo-discovery.md item 2. "gd-" prefixed so nothing here can
   collide with the narrower .mk-content pages (about/privacy/terms/the
   two older narrative guides).
   --------------------------------------------------------------------- */
.gd-article{max-width:720px;margin:0 auto;padding:40px 22px 80px;display:flex;flex-direction:column;gap:26px}
.gd-crumb{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--soft)}
.gd-crumb a{color:var(--soft);text-decoration:none}
.gd-crumb a:hover{color:var(--accent)}
.gd-head{display:flex;flex-direction:column;gap:12px}
.gd-head h1{font:500 2.2rem/1.1 var(--serif);letter-spacing:-.02em;margin:0;text-wrap:balance}
.gd-checked{font-size:.8rem;color:var(--soft)}
.gd-answer{padding:22px 24px;border-radius:16px;background:var(--mint);border-left:4px solid var(--accent);display:flex;flex-direction:column;gap:8px}
.gd-answer .mk-eyebrow{margin-bottom:0}
.gd-answer p{margin:0;font:500 1.25rem/1.35 var(--serif);color:var(--ink);max-width:none}
.gd-body{display:flex;flex-direction:column;gap:20px;font-size:1.05rem;line-height:1.6}
.gd-body h2{font:500 1.4rem/1.15 var(--serif);margin:0}
.gd-body p{margin:0;max-width:none}
.gd-rates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:4px}
.gd-rates div{background:var(--surface);border-radius:14px;padding:18px 20px;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:.85rem;color:var(--soft)}
.gd-checks{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.gd-checks div{display:flex;align-items:center;gap:12px}
.gd-checks span{flex:none;width:28px;height:28px;border-radius:50%;background:var(--mint);color:var(--accent);display:flex;align-items:center;justify-content:center;font:600 .9rem var(--serif)}
.gd-cta{padding:24px 26px;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}
.gd-cta strong{font:500 1.3rem/1.2 var(--serif);display:block}
.gd-cta em{font-style:italic}
.gd-cta .sub{font-size:.85rem;color:var(--brand-deep-soft);font-weight:400;margin:4px 0 0}
.gd-cta .row{display:flex;gap:10px;flex-wrap:wrap}
.gd-cta .mk-btn.quiet{border-color:var(--brand-mint);color:var(--brand-deep-ink)}
.gd-cta .mk-btn.mint{background:var(--brand-mint);color:var(--brand-deep)}
.gd-related{display:flex;flex-direction:column;gap:12px}
.gd-related-grid{display:grid;gap:12px}
@media(min-width:640px){.gd-related-grid{grid-template-columns:repeat(3,1fr)}}
.gd-related-grid a{padding:16px 18px;border-radius:12px;border:1px solid var(--hair);text-decoration:none;color:var(--ink);font-size:.95rem;font-weight:500;line-height:1.4}
.gd-related-grid a:hover{border-color:var(--accent)}
.gd-sources{display:flex;flex-direction:column;gap:8px;padding-top:20px;border-top:1px solid var(--hair);font-size:.8rem;color:var(--soft);line-height:1.6}
@media(min-width:900px){.gd-article{padding-top:56px}.gd-head h1{font-size:2.9rem}}

/* 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:40px}
.gd-index-cat:first-child{margin-top:0}
.gd-index-cat h2{font:500 1.5rem/1.2 var(--serif);margin:0 0 16px}