@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");
}
@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;
  --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;}
}
: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;}
*,*::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;gap:12px;font-size:.85rem;color:var(--soft);font-weight:500;padding:14px 0 10px}
.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}
.beta{display:inline-block;background:var(--mint);border:1px solid var(--accent);color:var(--accent);border-radius:999px;padding:8px 16px;font-size:.92rem;margin-bottom:18px}
.beta strong{font-weight:700}
.err{color:var(--warn);font-weight:600;margin-top:18px}

/* welcome screen - see design/app-mock-phone-start.html */
.hero-mark{width:96px;height:96px;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:56px;height:56px;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 (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}
  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 img{width:64px;height:64px}
  .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}
.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}
.mk-brand{display:flex;align-items:center;gap:18px;text-decoration:none}
.mk-mark{width:56px;height:56px;flex:none}
.mk-wordmark{height:30px;width:auto;display:block}
.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-mark{width:40px;height:40px}.mk-wordmark{height:20px}.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 .mk-mark{width:34px;height:34px;border-radius:8px}
.mk-head-app .mk-wordmark{height:20px}
.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 .mk-mark{width:48px;height:48px;border-radius:10px}
  .mk-head-app .mk-wordmark{height:26px}
  .mk-head-app .app-label{display:inline}
}

.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 48px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
@media(min-width:900px){.mk-hero{padding:80px 22px 64px}}
.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}}

/* Phone mock: a simple bordered card, not the app-shell chrome the
   previous version used - reproduces design/homepage-mock-v2.html's phone
   exactly, no notch or status bar. */
.mk-phone{margin-top:8px;width:320px;max-width:100%;box-sizing:border-box;padding:20px 20px 22px;border-radius:30px;background:var(--page);border:6px solid var(--deep);display:flex;flex-direction:column;gap:12px;text-align:left}
.mk-phone .mk-pmeta{display:flex;justify-content:space-between;font-size:.68rem;color:var(--soft)}
.mk-phone .mk-pbar{height:4px;border-radius:2px;background:var(--hair)}
.mk-phone .mk-pbar i{display:block;height:100%;border-radius:2px;background:var(--accent);width:31%}
.mk-phone h4{font:500 1.3rem/1.2 var(--serif);margin:0}
.mk-phone .mk-opts{display:flex;flex-direction:column;gap:8px}
.mk-phone .mk-opt{padding:13px 15px;border-radius:10px;border:1px solid var(--line);font-size:.9rem}
.mk-phone .mk-opt.on{border:2px solid var(--accent);background:var(--sel);font-weight:600}
.mk-phone .mk-hint{font-size:.72rem;color:var(--soft);margin:0}
.mk-phone .mk-next{height:46px;border-radius:10px;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.9rem}

.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}
.mk-card p{margin:0;font-size:1rem;color:var(--soft)}
.mk-card h3{margin-bottom:8px}
.mk-card .mk-ic{width:40px;height:40px;border-radius:10px;background:var(--mint);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:16px;font:600 1.1rem 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)}
.mk section.mk-deep .mk-card .mk-ic{background:var(--brand-deep-soft);color:var(--brand-deep)}

/* "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 96px}
.mk-landing main{flex:1;display:flex;flex-direction:column}
.mk-landing-hero{flex:none;padding:16px 96px 20px;display:flex;flex-direction:column;align-items:center;text-align:center}
.mk-landing-hero .mk-center{gap:10px}
.mk-mark-big{width:96px;height:96px}
.mk-landing-hero .mk-eyebrow{margin-bottom:0}
.mk-landing-hero h1{font-size:clamp(2.2rem,4.4vw,3.05rem);max-width:900px;margin-top:8px}
.mk-landing-hero .lede{font-size:1.05rem;color:var(--soft);max-width:560px;margin:0}
.mk-tools-band{box-sizing:border-box;padding:28px 96px 24px;background:var(--brand-deep);color:var(--brand-deep-ink);flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center}
.mk-tools-band .mk-eyebrow{color:var(--brand-mint);margin-bottom:8px}
.mk-tools-band h2{color:#FFF;margin-bottom:0}
.mk-tools-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:20px;align-items:end;width:100%;max-width:1180px}
.mk-tool{box-sizing:border-box;border-radius:18px;display:flex;flex-direction:column;gap:10px;text-align:left}
.mk-tool.live{padding:22px 24px;background:var(--page);min-height:224px}
.mk-tool:not(.live){padding:20px 22px;background:color-mix(in srgb,var(--brand-deep) 80%,black 8%);border:1px solid var(--brand-accent);min-height:170px;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-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:64px;padding:0 96px;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-grid{grid-template-columns:1fr}
  .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}