/* Foydy website, design "2b v2" (round 16). Lifted from the design handover's reference
   stylesheet (design/round-3/.../handover/reference/styles.css) and set to the values in the
   founder-approved mockups: phone (below 768, drawn at 390), tablet (768 to 1199, drawn at
   834), desktop (1200 and up, drawn at 1280), small phone (below 360).
   Every word is in the HTML. Motion styles apply only when <html> has the "js" class and the
   visitor has not asked for reduced motion; only opacity and transform move. */

/* ---------- Fonts (self-hosted, Latin and Latin Extended; the rupee sign is in Extended) ---------- */
@font-face{font-family:"Noto Sans";src:url("fonts/notosans-400-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Noto Sans";src:url("fonts/notosans-400-latin-ext.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Noto Sans";src:url("fonts/notosans-600-latin.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Noto Sans";src:url("fonts/notosans-600-latin-ext.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Anek Latin";src:url("fonts/anek-600-latin.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Anek Latin";src:url("fonts/anek-600-latin-ext.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/plexmono-500-latin.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/plexmono-500-latin-ext.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader";src:url("fonts/newsreader-var.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}

/* ---------- Tokens (handover 01-design-system.md section 1; --on-inset to --v-on-verdant are text colours
   measured in 05-accessibility.md section 1) ---------- */
:root{
  --ink:#0F1117; --ink-body:#30343E; --ink-2:#4B5060; --ink-3:#6B7080;
  --white:#FFFFFF; --band:#F5F6F8; --track:#EEF0F3; --rule:#E6E8EC; --rule-2:#DCDEE4;
  --indigo:#32356B; --indigo-hover:#25285A; --indigo-press:#1B1D45;
  --indigo-deep:#15163A; --indigo-inset:#1E2050; --indigo-pale:#ECEDF5; --indigo-pale-rule:#DCDEEE;
  --indigo-muted:#C3C6E0; --indigo-faint:#8E93BF;
  --verdant:#35694F; --verdict-tint:#E3EBE5; --sage:#DBDFCB; --sage-tint:#EEF1E6; --sage-tint-2:#F3F5EC; --sage-rule:#C5CBAF; --sage-ink:#24493A;
  --error:#8E2F25; --error-rule:#B5473B;
  --tag-high-bg:#F6E3E1; --tag-high:#8E2F25; --tag-med-bg:#F6EDE3; --tag-med:#8A5A2B; --tag-low-bg:#EEF0F3; --tag-low:#4B5060;
  --v-ground:#FAF5EC; --v-ink:#1F2030; --v-ink-2:#4A4335; --v-ink-3:#615A48; --v-rule:#E6DDCB; --v-field:#FFFDF8; --v-field-rule:#D9CFBB;
  --on-inset:#E6E7F2; --on-indigo-2:#D9DBEE; --illus-ink:#2A2D55; --verdict-ink:#2E4A3C; --olive:#3E4232;
  --v-hint:#77705F; --v-on-verdant:#E1EDE6;

  --indigo-line:rgba(195,198,224,.2);
  --f-display:"Anek Latin",system-ui,sans-serif; --f-body:"Noto Sans",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace; --f-word:"Newsreader",Georgia,serif;
  --r-btn:6px; --r-row:8px; --r-card:10px; --r-panel:12px; --r-band:14px; --r-chip:999px;
  --sh-card:0 1px 2px rgba(15,17,23,.05),0 18px 48px rgba(21,22,58,.12);
  --sh-card-sm:0 1px 2px rgba(15,17,23,.05),0 14px 36px rgba(21,22,58,.12);
  --sh-btn:0 6px 16px rgba(50,53,107,.22);
  --focus:0 0 0 3px var(--white),0 0 0 5px var(--indigo);
  --focus-dark:0 0 0 3px var(--indigo-deep),0 0 0 5px var(--white);
  --ease-soft:cubic-bezier(.2,.7,.2,1);

  /* Layout: phone first. */
  --container:1120px; --gutter:20px; --head-h:64px;
}
@media (min-width:768px){:root{--gutter:48px;--head-h:68px}}
@media (min-width:1200px){:root{--gutter:max(48px,calc((100vw - var(--container)) / 2));--head-h:72px}}
@media (max-width:359px){:root{--gutter:16px}}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--head-h) + 16px)}
body{margin:0;font:400 17px/1.6 var(--f-body);color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
@media (min-width:768px){body{font-size:18px}}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:var(--f-display);font-weight:600;margin:0;text-wrap:balance}
p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--indigo);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--ink)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:none;box-shadow:var(--focus);border-radius:4px}
.on-dark a:focus-visible,.on-dark [tabindex]:focus-visible,.on-dark summary:focus-visible{box-shadow:var(--focus-dark)}
.wrap{padding-inline:var(--gutter)}
.inner{max-width:var(--container);margin-inline:auto}
.sr-only,.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:8px;z-index:50;background:var(--indigo);color:var(--white);padding:12px 16px;border-radius:var(--r-btn);font-weight:600}
.skip:focus{left:8px;color:var(--white)}

/* Section label (Plex Mono, uppercase by CSS; the HTML keeps the copy's case). */
.label{font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--indigo);margin-bottom:18px}
.h2{font-size:30px;line-height:1.1;letter-spacing:-.02em}
.lead{font-size:17px;line-height:1.6;color:var(--ink-2)}
@media (min-width:768px){.label{margin-bottom:20px}.h2{font-size:36px}.lead{font-size:18px}}
@media (min-width:1200px){.label{font-size:12px;margin-bottom:18px}.h2{font-size:40px}}
@media (max-width:359px){.h2{font-size:26px}}

/* ---------- Buttons and arrow links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;border-radius:var(--r-btn);border:1px solid transparent;font:600 16px/1.2 var(--f-body);text-align:center;text-decoration:none;white-space:nowrap;transition:background-color .15s ease,box-shadow .15s ease,border-color .15s ease}
.btn-primary{background:var(--indigo);color:var(--white)}
.btn-primary:hover{background:var(--indigo-hover);color:var(--white)}
.btn-primary:active{background:var(--indigo-press)}
.btn-hero{box-shadow:var(--sh-btn)}
.btn-secondary{background:var(--white);color:var(--ink);border-color:var(--rule);padding:0 20px}
.btn-secondary:hover{border-color:var(--ink-3);color:var(--ink)}
.btn-on-dark{background:var(--white);color:var(--indigo-deep);padding:0 24px}
.btn-on-dark:hover{background:var(--indigo-pale);color:var(--indigo-deep)}
.link-arrow{display:inline-flex;align-items:center;min-height:44px;font:600 16px/1.2 var(--f-body);color:var(--indigo);text-decoration:none}
.link-arrow::after{content:"\2192";margin-left:6px;font-family:var(--f-mono);font-weight:500;transition:transform .2s ease}
.link-arrow:hover::after{transform:translateX(3px)}
.on-dark .link-arrow{color:var(--white)}
@media (max-width:359px){.btn{white-space:normal}}

/* ---------- Header ---------- */
/* The blur sits on a layer behind the header: a filter on the header itself would make it the
   containing block of the fixed menu sheet. */
.site-header{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--rule)}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.9)}
@supports ((-webkit-backdrop-filter:blur(12px)) or (backdrop-filter:blur(12px))){.site-header::before{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}}
.site-header .inner{height:var(--head-h);display:flex;align-items:center;justify-content:space-between;gap:24px}
.wordmark{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--ink);text-decoration:none;font:600 17px/1 var(--f-word);letter-spacing:.08em;text-transform:uppercase}
.wordmark:hover{color:var(--ink)}
.wordmark img{width:24px;height:24px}
.nav-main{display:none}
.nav-main ul{display:flex;align-items:center;gap:28px}
.nav-main a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-body);font-size:15px;line-height:1;text-decoration:none}
.nav-main a:hover{color:var(--ink)}
.nav-main a[aria-current]{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--indigo);text-decoration-thickness:2px;text-underline-offset:10px}
.nav-right{display:flex;align-items:center;gap:12px}
.nav-voices{display:none;color:var(--ink-3);font-size:14px;line-height:1;text-decoration:none;padding-right:20px;border-right:1px solid var(--rule)}
.nav-voices:hover{color:var(--ink)}
.nav-voices[aria-current]{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--verdant);text-decoration-thickness:2px;text-underline-offset:10px}
.nav-cta{display:none;min-height:44px;padding:0 16px;font-size:14px;line-height:1}
@media (min-width:768px){.wordmark{font-size:18px;gap:10px}.nav-cta{display:inline-flex}}
@media (min-width:1200px){
  .site-header .inner{justify-content:flex-start;gap:48px}
  .wordmark{font-size:19px}.wordmark img{width:26px;height:26px}
  .nav-main{display:block}
  .nav-right{margin-left:auto;gap:20px}
  .nav-voices{display:inline-flex;align-items:center;min-height:44px}
  .menu{display:none}
}

/* Menu (native details: opens and closes without JavaScript). */
.menu>summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px;padding:0 14px;border:1px solid var(--rule);border-radius:var(--r-row);font:600 15px/1 var(--f-body);color:var(--ink)}
.menu>summary::-webkit-details-marker{display:none}
.menu-icon{display:grid;gap:4px}
.menu-icon::before,.menu-icon::after{content:"";display:block;width:16px;height:2px;background:var(--ink)}
.menu .lbl-open,.menu[open] .lbl-closed,.menu[open] .menu-icon{display:none}
.menu[open] .lbl-open{display:inline}
.menu[open]>summary{border-color:var(--ink)}
.menu[open]>summary::before{content:"\00D7";font:500 18px/1 var(--f-mono)}
.menu-panel{position:fixed;inset:var(--head-h) 0 0 0;z-index:30;display:flex;flex-direction:column;background:var(--white);overflow-y:auto}
.menu-panel nav{flex:1;display:grid;padding:16px var(--gutter)}
.menu-panel .primary{display:contents}
.menu-panel .primary li{display:grid}
.menu-panel .primary a{display:flex;justify-content:space-between;align-items:center;min-height:64px;border-bottom:1px solid var(--rule);font:600 26px/1 var(--f-display);color:var(--ink);text-decoration:none}
.menu-panel .primary a::after{content:"\2192";font:500 18px/1 var(--f-mono);color:var(--indigo)}
.menu-panel .primary a[aria-current]{color:var(--indigo)}
.menu-panel .secondary{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;padding-top:20px}
.menu-panel .secondary a{display:flex;align-items:center;min-height:44px;color:var(--ink-2);font-size:16px;line-height:1.2;text-decoration:none}
.menu-foot{padding:20px var(--gutter);background:var(--band);border-top:1px solid var(--rule)}
.menu-foot .btn{width:100%}
.menu-foot p{margin-top:12px;font-size:13px;line-height:1.45;color:var(--ink-2);text-align:center}
@media (min-width:768px){.menu-icon{display:none}}

/* ---------- Pinned phone button ---------- */
.pin-cta{position:fixed;left:0;right:0;bottom:0;z-index:15;padding:12px 16px calc(20px + env(safe-area-inset-bottom));background:rgba(255,255,255,.94);border-top:1px solid var(--rule);transform:translateY(110%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s}
@supports ((-webkit-backdrop-filter:blur(10px)) or (backdrop-filter:blur(10px))){.pin-cta{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}
.pin-cta .btn{width:100%}
.pin-cta.is-on{transform:none;visibility:visible;transition:transform .25s ease,visibility 0s}
html:not(.js) .pin-cta{display:none}
@media (min-width:768px){.pin-cta{display:none}}

/* ---------- Home: hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--rule)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(80% 40% at 80% 70%,rgba(50,53,107,.12),rgba(50,53,107,0) 70%)}
.hero .inner{position:relative;padding-block:48px 56px}
.hero h1{font-size:48px;line-height:.98;letter-spacing:-.035em;margin-bottom:20px}
.hero .lead{margin-bottom:28px;text-wrap:pretty}
.hero-btns{display:grid;gap:10px}
.hero-btns .btn{width:100%}
.assure{display:flex;gap:10px;margin-top:16px;font-size:14px;line-height:1.45;color:var(--ink-2)}
.assure::before{content:"";flex:none;width:7px;height:7px;margin-top:6px;border-radius:50%;background:var(--verdant)}
.proof{position:relative;margin-top:40px}
.proof-page{display:none}
.proof-card{position:relative;background:var(--white);border:1px solid var(--rule);border-radius:var(--r-card);box-shadow:var(--sh-card-sm);overflow:hidden}
.proof-tag{padding:12px 16px;border-bottom:1px solid var(--track);font:500 10px/1.4 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.proof-quote{padding:18px 16px 4px;font:600 22px/1.15 var(--f-display);letter-spacing:-.015em;color:var(--indigo-deep)}
.proof-bars{padding:16px;display:grid;gap:12px}
.proof-foot{padding:14px 16px 18px;border-top:1px solid var(--track);display:grid;gap:12px;font-size:16px;line-height:1.5;color:var(--ink-2)}
.proof-foot .link-arrow{font-size:15px}
.bar-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:7px;font:500 13px/1 var(--f-mono)}
.bar{height:8px;border-radius:4px;background:var(--track);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:4px;background:var(--indigo);transform-origin:left center;transform:scaleX(var(--v))}
/* Tablet keeps the mockup's card sizes (the 16px floor is for phones, CRO answer 3). */
@media (min-width:768px) and (max-width:1199px){
  body .evidence .ev p,body .trust p,body .offer-main p:not(.label):not(.price),body .decisions p,body .glance p:not(.stat),body .claim p:not(.tag),body .crit-lead,body .price-after,body .crit-after{font-size:15px!important}
  body .offer-gets p:not(.label),body .claims-note{font-size:14px!important}
}
@media (min-width:768px){
  .hero::before{background:radial-gradient(60% 50% at 80% 75%,rgba(50,53,107,.12),rgba(50,53,107,0) 70%)}
  .hero .inner{padding-block:72px 80px}
  .hero h1{font-size:72px;margin-bottom:24px}
  .hero-intro{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end}
  .hero .lead{margin-bottom:0}
  .hero-btns .btn-primary{padding:0 20px}
  .assure{margin-top:18px}
  .proof{margin-top:48px;padding:28px 28px 0 0}
  .proof-page{display:block;position:absolute;background:var(--white);border:1px solid var(--rule);border-radius:var(--r-card);box-shadow:0 18px 48px rgba(21,22,58,.1)}
  .proof-page span{display:block;padding:3px 14px;font:500 9px/1 var(--f-mono);letter-spacing:.06em;color:var(--ink-3);text-align:right;text-transform:uppercase}
  .proof-page.p2{top:0;left:28px;right:0;bottom:28px}
  .proof-page.p1{top:14px;left:14px;right:14px;bottom:14px}
  .proof-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"tag bars" "quote bars" "quote foot" ". foot";box-shadow:0 18px 48px rgba(21,22,58,.12)}
  .proof-tag{grid-area:tag;padding:24px 24px 16px;border-bottom:0;border-right:1px solid var(--track)}
  .proof-quote{grid-area:quote;padding:0 24px 24px;font-size:24px;border-right:1px solid var(--track)}
  .proof-bars{grid-area:bars;padding:24px 24px 14px;gap:14px}
  .proof-foot{grid-area:foot;padding:0 24px 24px;border-top:0;gap:14px;font-size:14px;align-content:start}
  .proof-foot .link-arrow{font-size:14px;min-height:0}
}
@media (min-width:1200px){
  .hero::before{background:radial-gradient(42% 60% at 76% 46%,rgba(50,53,107,.13),rgba(50,53,107,0) 70%),radial-gradient(30% 40% at 94% 82%,rgba(219,223,203,.6),rgba(219,223,203,0) 70%)}
  .hero .inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center;padding-block:96px 112px}
  .hero h1{font-size:80px;margin-bottom:30px}
  .hero-intro{display:block}
  .hero .lead{font-size:20px;max-width:500px;margin-bottom:36px}
  .hero-btns{display:flex;flex-wrap:wrap;gap:12px}
  .hero-btns .btn{width:auto}
  .hero-btns .btn-primary{padding:0 22px}
  .assure{align-items:center;margin-top:22px;line-height:1.4}
  .assure::before{margin-top:0}
  .proof{margin-top:0;padding:40px 40px 0 0}
  .proof-page{box-shadow:var(--sh-card)}
  .proof-page.p2{left:40px;bottom:40px}
  .proof-page.p2 span{padding:8px 16px;font-size:10px}
  .proof-page.p1{top:20px;left:20px;right:20px;bottom:20px}
  .proof-page.p1 span{padding:6px 16px;font-size:10px}
  .proof-card{display:block;box-shadow:var(--sh-card)}
  .proof-tag{padding:16px 24px;border-bottom:1px solid var(--track);border-right:0;font-size:11px}
  .proof-quote{padding:28px 24px 8px;font-size:28px;border-right:0}
  .proof-bars{padding:20px 24px}
  .proof-foot{padding:16px 24px 22px;border-top:1px solid var(--track);gap:12px;font-size:15px}
  .proof-foot .link-arrow{font-size:15px}
  .bar-head{font-size:14px;margin-bottom:8px}
}
@media (max-width:359px){.hero h1{font-size:40px}}

/* ---------- Home: the gap ---------- */
.sec{padding-top:64px}
.gap-sec .label{margin-bottom:18px}
.split-h2{display:grid;gap:8px;font-size:26px;line-height:1.15;letter-spacing:-.015em}
.split-h2>span{display:block;border-radius:var(--r-card);padding:24px 20px}
.split-h2>span:first-child{background:var(--band)}
.split-h2>span:last-child{background:var(--indigo-deep);color:var(--white)}
.gap-sec .lead{margin-top:24px}
.stats{display:grid;gap:32px;margin-top:36px;padding-top:24px;border-top:1px solid var(--ink)}
.stat{font:500 40px/1 var(--f-mono);letter-spacing:-.03em;color:var(--indigo);margin-bottom:14px}
.stat-text{font-size:16px;line-height:1.55;margin-bottom:10px}
.source{font:500 11px/1.4 var(--f-mono);color:var(--ink-3)}
.source a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.source a:hover{color:var(--ink)}
.pull-pair{display:grid;gap:16px;margin-top:56px}
.pull-pair p{font:600 30px/1.05 var(--f-display);letter-spacing:-.02em;padding-bottom:14px;border-bottom:5px solid var(--indigo)}
.pull-pair p:first-child{color:var(--ink-3);border-bottom-color:var(--indigo-pale-rule)}
@media (min-width:768px){
  .sec{padding-top:80px}
  .gap-sec .label{margin-bottom:20px}
  .split-h2{grid-template-columns:1fr 1fr;gap:12px;font-size:28px;line-height:1.12;letter-spacing:-.02em}
  .split-h2>span{border-radius:var(--r-panel);padding:32px 28px}
  .stats{grid-template-columns:1fr 1fr;gap:40px;margin-top:40px;padding-top:28px}
  .stat{font-size:44px;margin-bottom:16px}
  .pull-pair{grid-template-columns:1fr 1fr;gap:4px;align-items:end;margin-top:64px}
  .pull-pair p{font-size:32px;padding-bottom:18px}
}
@media (min-width:1200px){
  .sec{padding-top:112px}
  .gap-sec .label{margin-bottom:24px}
  .split-h2{gap:16px;font-size:36px}
  .split-h2>span{padding:44px 40px;min-height:238px}
  .gap-sec .lead{margin-top:32px;font-size:20px;max-width:720px}
  .stats{gap:64px;margin-top:56px;padding-top:36px}
  .stat{font-size:56px;margin-bottom:20px}
  .stat-text{font-size:17px;margin-bottom:12px}
  .source{font-size:12px}
  .pull-pair{margin-top:96px}
  .pull-pair p{font-size:44px;letter-spacing:-.025em;padding-bottom:24px;border-bottom-width:6px}
}
@media (max-width:359px){.split-h2{font-size:24px}.stat{font-size:36px}.pull-pair p{font-size:26px}}

/* ---------- Section head (H2 and intro) ---------- */
.sec-head .h2{margin-bottom:12px}
.sec-head .lead{margin-bottom:24px}
@media (min-width:768px){.sec-head .lead{margin-bottom:28px}}
@media (min-width:1200px){
  .sec-head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:64px;align-items:end;margin-bottom:40px}
  .sec-head .h2,.sec-head .lead{margin-bottom:0}
}

/* ---------- Home: the four answers (stacked without JS; tabs with JS) ---------- */
.answers-sec{padding-top:72px}
.answers{display:grid;gap:8px}
.answer{border:1px solid var(--rule);border-radius:var(--r-card);overflow:hidden}
.answer-q{display:grid;grid-template-columns:32px minmax(0,1fr) 24px;align-items:center;min-height:60px;padding:14px 16px;background:var(--indigo-pale);color:var(--indigo-deep);font-size:18px;line-height:1.25}
.answer-q .n{font:500 12px/1 var(--f-mono);color:var(--indigo)}
.answer-a{display:grid;gap:14px;padding:20px 16px;background:var(--indigo-deep);color:var(--white)}
.answer-a .q-echo{display:none;font:500 11px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--indigo-muted)}
.verdict{font:600 24px/1.1 var(--f-display);letter-spacing:-.02em}
.evidence{border-radius:var(--r-row);padding:14px;background:var(--indigo-inset)}
.evidence .tag{margin-bottom:8px;font:500 9px/1.4 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--indigo-faint)}
.evidence .ev{display:grid;gap:6px}
.evidence .ev p{font-size:16px;line-height:1.5;color:var(--on-inset)}
.evidence .link-arrow{margin-top:4px;font-size:14px;color:var(--white)}
.answers-after{margin-top:20px}
.answers-after p{font-size:16px;line-height:1.6;color:var(--ink-2)}
/* With JS: one answer open at a time. Phone: each answer opens under its question. */
.js .answers[data-tabs] .answer-q{cursor:pointer;background:var(--white);color:var(--ink-body)}
.js .answers[data-tabs] .answer-q .n{color:var(--ink-3)}
.js .answers[data-tabs] .answer-q::after{content:"+";font:500 18px/1 var(--f-mono);color:var(--ink-3);text-align:right}
.js .answers[data-tabs] .answer-q[aria-selected="true"]{background:var(--indigo-pale);color:var(--indigo-deep)}
.js .answers[data-tabs] .answer-q[aria-selected="true"] .n,.js .answers[data-tabs] .answer-q[aria-selected="true"]::after{color:var(--indigo)}
.js .answers[data-tabs] .answer-q[aria-selected="true"]::after{content:"\2212"}
.js .answers[data-tabs] .answer:has(.answer-q[aria-selected="true"]){border-color:var(--indigo-pale-rule)}
.js .answers[data-tabs] .answer-a[hidden]{display:none}
@media (min-width:768px){
  .answers-sec{padding-top:88px}
  .answers-sec .h2{max-width:620px}
  .answer-q{grid-template-columns:30px minmax(0,1fr);padding:16px;font-size:17px}
  .answer-q .n{font-size:11px}
  .answer-a{padding:28px;gap:20px}
  .verdict{font-size:30px;line-height:1.08}
  .evidence{padding:16px}
  .answers-after{margin-top:28px}
  .answers-after p{font-size:18px}
  .js .answers[data-tabs]{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:repeat(4,auto) minmax(0,1fr);gap:6px 16px;align-items:start}
  .js .answers[data-tabs] .answer{display:contents}
  .js .answers[data-tabs] .answer-q{grid-column:1;border:1px solid var(--rule);border-radius:var(--r-row)}
  .js .answers[data-tabs] .answer-q[aria-selected]::after{content:none}
  .js .answers[data-tabs] .answer-q[aria-selected="true"]{border-color:var(--indigo-pale-rule)}
  .js .answers[data-tabs] .answer-a{grid-column:2;grid-row:1 / -1;align-self:stretch;align-content:start;border-radius:var(--r-panel)}
  .js .answers[data-tabs] .answer-a .q-echo{display:block}
  .js .answers[data-tabs] .evidence{margin-top:auto}
}
@media (min-width:1200px){
  .answers-sec{padding-top:128px}
  .answers-sec .h2{max-width:none}
  .answer-q{grid-template-columns:40px minmax(0,1fr) auto;padding:22px 20px;font-size:21px}
  .answer-q .n{font-size:12px}
  .answer-a{padding:40px;gap:28px}
  .verdict{font-size:40px}
  .evidence{border:1px solid var(--indigo-line);border-radius:var(--r-card);padding:24px}
  .evidence .tag{margin-bottom:12px;font-size:10px}
  .evidence .ev{gap:10px}
  .evidence .ev p{font-size:17px}
  .evidence .link-arrow{margin-top:18px;padding-top:16px;border-top:1px solid var(--indigo-line);display:flex;min-height:0;font-size:15px}
  .answers-after{display:flex;justify-content:space-between;align-items:baseline;gap:48px}
  .answers-after p{max-width:760px}
  .js .answers[data-tabs]{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:6px 24px}
  .js .answers[data-tabs] .answer-q[aria-selected="true"]::after{content:"\2192";font-size:16px}
  .js .answers[data-tabs] .answer-a{min-height:460px;display:flex;flex-direction:column}
  .js .answers[data-tabs] .answer-a .q-echo{font-size:12px}
}

/* ---------- Home: how it works (grey band) ---------- */
.band{margin-top:64px;padding-block:64px;background:var(--band);border-block:1px solid var(--rule)}
.steps{display:grid;gap:8px}
.steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px;padding:18px;background:var(--white);border:1px solid var(--rule);border-radius:var(--r-card)}
.steps .n{font:600 32px/1 var(--f-display);color:var(--indigo-muted)}
.steps li:nth-child(3) .n{color:var(--indigo-faint)}
.steps li:last-child{background:var(--indigo);border-color:var(--indigo);color:var(--white)}
.steps li:last-child .n{color:var(--white)}
.steps h3{font-size:19px;line-height:1.2;margin-bottom:4px}
.steps p{font-size:16px;line-height:1.5;color:var(--ink-2)}
.steps li:last-child p{color:var(--on-indigo-2)}
.fit{margin-top:36px;padding-top:28px;border-top:1px solid var(--rule-2)}
.fit h3{font-size:22px;line-height:1.2;margin-bottom:10px}
.fit p{font-size:16px;line-height:1.6;color:var(--ink-2)}
@media (min-width:768px){
  .band{margin-top:88px;padding-block:72px}
  .steps{grid-template-columns:1fr 1fr;gap:12px}
  .steps li{display:block;padding:24px}
  .steps .n{display:block;font-size:44px;margin-bottom:16px}
  .steps li:first-child .n{color:var(--indigo-pale-rule)}
  .steps h3{font-size:20px;line-height:1;margin-bottom:8px}
  .steps p{font-size:16px}
  .fit h3{font-size:24px;line-height:1.15}
  .fit p{font-size:17px}
}
@media (min-width:1200px){
  .band{margin-top:128px;padding-block:104px}
  .band .sec-head{margin-bottom:48px}
  .steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .steps li{padding:28px}
  .steps .n{font-size:64px;margin-bottom:28px}
  .steps h3{font-size:22px;margin-bottom:10px}
  .steps p{font-size:17px}
  .fit{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:start;margin-top:48px;padding-top:36px}
  .fit h3{font-size:28px;letter-spacing:-.015em;margin-bottom:0}
  .fit p{font-size:18px}
}

/* ---------- Home: trust ---------- */
.trust-sec .h2{margin-bottom:12px}
.trust-sec .lead{margin-bottom:24px}
.trust{border:1px solid var(--rule);border-radius:var(--r-card);overflow:hidden}
.trust li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:start;padding:20px;background:var(--white)}
/* A verdant tick beside each item, as the promise ticks on /voices (founder decision, 15 October 2026:
   green marks what is confirmed, handover 01). Decorative: aria-hidden; the item's words carry it. */
.trust-tick{margin-top:-4px}
.trust li+li{border-top:1px solid var(--rule)}
.trust h3{font:600 17px/1.3 var(--f-body);margin-bottom:6px}
.trust p{font-size:16px;line-height:1.55;color:var(--ink-2)}
.trust-close{margin-top:18px;font-size:16px;line-height:1.5;font-weight:600;color:var(--indigo)}
@media (min-width:768px){
  .trust-sec .lead{margin-bottom:28px}
  .trust{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule)}
  .trust li{padding:24px}
  .trust li+li{border-top:0}
  .trust h3{margin-bottom:8px}
}
@media (min-width:1200px){
  .trust-sec{padding-top:120px}
  .trust-sec .inner{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);grid-template-rows:auto 1fr;column-gap:64px}
  .trust-head{grid-column:1;grid-row:1}
  .trust{grid-column:2;grid-row:1 / span 2;align-self:start}
  .trust-close{grid-column:1;grid-row:2;margin-top:0;font-size:17px}
  .trust-sec .h2{margin-bottom:18px}
  .trust li{padding:32px}
  .trust h3{font-size:19px;margin-bottom:10px}
  .trust p{font-size:17px}
}

/* ---------- Home: founding offer ---------- */
.offer-sec{padding-top:64px}
.offer{background:var(--indigo-deep);color:var(--white);border-radius:var(--r-panel);overflow:hidden}
.offer .label{color:var(--indigo-muted)}
.offer-main{display:grid;gap:14px;padding:28px 22px}
.offer-main .label,.offer-gets .label{margin:0}
.offer-main h2{font-size:28px;line-height:1.1;letter-spacing:-.02em}
.price{display:flex;align-items:baseline;gap:10px}
.price b{font:600 44px/1 var(--f-display);letter-spacing:-.03em}
.price s{font-size:16px;line-height:1;color:var(--indigo-faint)}
.offer-main p:not(.label):not(.price){font-size:16px;line-height:1.6;color:var(--indigo-muted)}
.offer-main .link-arrow{font-size:15px}
.offer-gets{padding:6px 22px 24px;border-top:1px solid var(--indigo-line)}
.offer-gets .label{margin:20px 0 6px}
.offer-gets li{padding:14px 0;border-bottom:1px solid var(--indigo-line)}
.offer-gets li:last-child{padding-bottom:0;border-bottom:0}
.offer-gets h3{font:600 16px/1.3 var(--f-body);margin-bottom:4px}
.offer-gets p:not(.label){font-size:16px;line-height:1.5;color:var(--indigo-muted)}
@media (min-width:768px){
  .offer-sec{padding-top:80px}
  .offer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;padding:36px;border-radius:var(--r-band)}
  .offer-main{padding:0;align-content:start}
  .price b{font-size:48px}
  .offer-main .link-arrow{min-height:0}
  .offer-gets{padding:0;border-top:0}
  .offer-gets .label{margin:0 0 6px}
  .offer-gets li{padding:12px 0}
}
@media (min-width:1200px){
  .offer-sec{padding-top:120px}
  .offer{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:0;padding:0}
  .offer .label{font-size:12px}
  .offer-main{display:flex;flex-direction:column;gap:20px;padding:52px;border-right:1px solid var(--indigo-line)}
  .offer-main h2{font-size:36px}
  .price{gap:14px;margin-top:8px}
  .price b{font-size:64px}
  .price s{font-size:18px}
  .offer-main p:not(.label):not(.price){font-size:17px}
  .offer-main .link-arrow{margin-top:auto;font-size:16px}
  .offer-gets{padding:52px}
  .offer-gets .label{margin-bottom:24px}
  .offer-gets li{padding:18px 0}
  .offer-gets li:first-child{padding-top:0}
  .offer-gets h3{font-size:18px;margin-bottom:6px}
  .offer-gets p:not(.label){font-size:16px}
}

/* ---------- Questions (native disclosures; every answer is open without JS) ---------- */
.faq-sec{padding-block:64px}
.faq-sec .h2{margin-bottom:24px}
.faq{display:grid;gap:8px}
.faq details{border:1px solid var(--rule);border-radius:var(--r-card);background:var(--white);transition:background-color .2s ease,border-color .2s ease}
.faq details[open]{background:var(--band);border-color:var(--indigo-pale-rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:16px 18px;font:600 17px/1.3 var(--f-display);border-radius:var(--r-card)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font:500 18px/1 var(--f-mono);color:var(--indigo)}
.faq details[open] summary::after{content:"\2212"}
.faq details>p{padding:0 18px 16px;margin-top:-6px;font-size:16px;line-height:1.55;color:var(--ink-2)}
.faq-more{margin-top:8px}
@media (min-width:768px){
  .faq-sec{padding-block:80px}
  .faq summary{padding:18px 22px;font-size:19px}
  .faq details>p{padding:0 22px 18px;margin-top:-8px;font-size:16px}
}
@media (min-width:1200px){
  .faq-sec{padding-block:120px}
  .faq-sec .inner{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);grid-template-rows:auto 1fr;column-gap:64px}
  .faq-head{grid-column:1;grid-row:1}
  .faq{grid-column:2;grid-row:1 / span 2;align-self:start}
  .faq-more{grid-column:1;grid-row:2;align-self:start;margin-top:0}
  .faq summary{padding:22px 24px;gap:24px;font-size:20px}
  .faq summary::after{font-size:20px}
  .faq details>p{padding:0 24px 22px;margin-top:-10px;font-size:17px}
}

/* ---------- Closing band and footer ---------- */
.closing{background:var(--indigo-deep);color:var(--white);padding-block:56px 48px}
.closing .inner{display:grid;gap:24px}
.closing h2{font-size:32px;line-height:1.08;letter-spacing:-.02em}
.closing-text p{margin:16px 0 24px;font-size:16px;line-height:1.6;color:var(--indigo-muted)}
.closing .btn{width:100%}
.founder-card{display:flex;align-items:center;gap:14px;order:-1}
.founder-card img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 22%;border:2px solid rgba(255,255,255,.15)}
.founder-card p{font:600 17px/1.2 var(--f-display)}
.closing-short h2{margin-bottom:24px}
@media (min-width:768px) and (max-width:1199px){.closing-short{padding-top:56px}}
@media (min-width:768px){
  .closing{padding-block:72px 40px}
  .closing .inner{grid-template-columns:minmax(0,1fr) 180px;gap:32px;align-items:center}
  .closing h2{font-size:36px}
  .closing .btn{width:auto;padding:0 22px}
  .founder-card{order:0;flex-direction:column;gap:12px;text-align:center;padding:20px;background:var(--indigo-inset);border-radius:var(--r-panel)}
  .founder-card img{width:88px;height:88px;border:0}
  .closing-short .inner{display:block}
}
@media (min-width:1200px){
  .closing{padding-block:104px}
  .closing .inner{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:64px}
  .closing h2{font-size:48px;line-height:1.05;letter-spacing:-.025em}
  .closing-text p{margin:20px 0 32px;font-size:18px}
  .closing .btn{padding:0 24px}
  .founder-card{justify-self:end;width:300px;gap:18px;padding:28px;border:1px solid var(--indigo-line);border-radius:var(--r-band)}
  .founder-card img{width:112px;height:112px;border:3px solid rgba(255,255,255,.12)}
  .founder-card p{font-size:20px}
  .closing-short{padding-block:96px}
  .closing-short .inner{display:flex;justify-content:space-between;align-items:center;gap:48px}
  .closing-short h2{max-width:700px;margin-bottom:0}
}
@media (max-width:359px){.closing h2{font-size:28px}}

/* Footer. Below 1200 it continues the closing band (deep indigo) on pages that have one;
   from 1200 it is a white row under the band. */
.site-footer{padding-block:32px 40px;font-size:14px;line-height:1.2;color:var(--ink-3)}
.site-footer .inner{display:grid;gap:16px}
.site-footer .wordmark{font-size:15px;gap:10px;color:var(--ink)}
.site-footer .wordmark img{width:20px;height:20px}
.foot-nav ul{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px}
.foot-nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-3);font-size:15px;text-decoration:none}
.foot-nav a:hover{color:var(--ink)}
.foot-nav a[aria-current]{color:var(--ink);font-weight:600}
.foot-legal{font-size:13px;line-height:1.5}
.site-footer.after-band{background:var(--indigo-deep);color:var(--indigo-faint);padding-top:0}
.site-footer.after-band .inner{padding-top:24px;border-top:1px solid var(--indigo-line)}
.site-footer.after-band .wordmark{display:none}
.site-footer.after-band .foot-nav a{color:var(--indigo-muted)}
.site-footer.after-band .foot-nav a:hover,.site-footer.after-band .foot-nav a[aria-current]{color:var(--white)}
.site-footer.after-band a:focus-visible{box-shadow:var(--focus-dark)}
.has-pin .site-footer{padding-bottom:110px}
@media (min-width:768px){
  .site-footer .inner{gap:8px}
  .foot-nav ul{display:flex;flex-wrap:wrap;gap:0 20px}
  .foot-nav a{font-size:14px}
  .foot-legal{font-size:14px}
  .site-footer.after-band .foot-legal{color:var(--indigo-muted)}
  .has-pin .site-footer{padding-bottom:40px}
}
@media (min-width:1200px){
  .site-footer,.site-footer.after-band{padding-block:28px;background:var(--white);color:var(--ink-3)}
  .site-footer.after-band .inner{padding-top:0;border-top:0}
  .site-footer .inner{grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:0 14px}
  .foot-nav ul{justify-content:flex-end}
  .site-footer .wordmark,.site-footer.after-band .wordmark{display:inline-flex;grid-column:1;grid-row:1}
  .foot-legal,.site-footer.after-band .foot-legal{grid-column:2;grid-row:1;color:var(--ink-3)}
  .foot-nav{grid-column:3}
  .foot-nav ul{gap:0 24px}
  .foot-nav ul+ul{margin-top:-8px}
  .site-footer.after-band .foot-nav a{color:var(--ink-3)}
  .site-footer.after-band .foot-nav a:hover,.site-footer.after-band .foot-nav a[aria-current]{color:var(--ink)}
  .site-footer.after-band a:focus-visible{box-shadow:var(--focus)}
}

/* ---------- Sample report ---------- */
.illus{position:sticky;top:var(--head-h);z-index:19;background:var(--indigo-pale);border-bottom:1px solid var(--indigo-pale-rule);color:var(--illus-ink)}
.illus .inner{padding-block:10px;font-size:13px;line-height:1.45}
.illus b{display:block;margin-bottom:4px;font:500 10px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--indigo)}
.report-hero{background:var(--indigo-deep);color:var(--white);padding-block:48px 44px}
.report-hero h1{font-size:44px;line-height:.98;letter-spacing:-.03em;margin-bottom:20px}
.report-hero p{font-size:16px;line-height:1.6;color:var(--indigo-muted)}
.report-layout{padding-bottom:64px}
.toc{position:sticky;top:var(--toc-top,calc(var(--head-h) + 92px));z-index:5;display:flex;gap:6px;overflow-x:auto;margin-inline:calc(var(--gutter) * -1);padding:14px var(--gutter);background:var(--white);border-bottom:1px solid var(--rule);scrollbar-width:none}
.toc::-webkit-scrollbar{display:none}
.toc .toc-title{display:none}
.toc ul{display:flex;gap:6px}
.toc a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--rule);border-radius:var(--r-chip);color:var(--ink);font-size:14px;font-weight:500;line-height:1;text-decoration:none;white-space:nowrap}
.toc a[aria-current="true"]{background:var(--indigo);border-color:var(--indigo);color:var(--white)}
.report-body{display:grid;gap:64px;padding-top:48px}
.report-sec{scroll-margin-top:170px}
.report-sec .label{margin-bottom:14px}
.report-sec h2{font-size:28px;line-height:1.1;letter-spacing:-.02em;margin-bottom:20px}
.kv{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-card);overflow:hidden}
.kv div{background:var(--white);padding:18px}
.kv dt{margin-bottom:8px;font:500 10px/1 var(--f-mono);text-transform:uppercase;color:var(--ink-3)}
.kv dd{font-size:16px;line-height:1.4}
.kv div:first-child dd{font-weight:600}
.verdict-box{background:var(--indigo);color:var(--white);border-radius:var(--r-panel);padding:26px 22px;font:600 28px/1.1 var(--f-display);letter-spacing:-.02em;text-wrap:balance}
.report-sec .body-2{font-size:16px;line-height:1.6;color:var(--ink-2)}
.decisions-intro{margin:20px 0 12px}
.decisions{border-top:1px solid var(--ink)}
.decisions li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:8px;padding:18px 0;border-bottom:1px solid var(--rule)}
.decisions .n{font:500 22px/1 var(--f-mono);color:var(--indigo)}
.decisions h3{font-size:19px;line-height:1.25;margin-bottom:6px}
.decisions p{font-size:16px;line-height:1.55;color:var(--ink-2)}
.glance{display:grid;gap:8px}
.glance li{padding:20px;border:1px solid var(--rule);border-radius:var(--r-card)}
.glance .stat{font-size:44px;letter-spacing:-.04em;margin-bottom:8px}
.glance p:not(.stat){font-size:16px;line-height:1.4}
.price-sec h2{margin-bottom:10px}
.price-sec .price-intro{margin-bottom:18px}
.price-wrap{display:grid;gap:20px;align-items:start;padding:16px;border:1px solid var(--rule);border-radius:var(--r-card)}
.price-table{width:100%;border-collapse:separate;border-spacing:0}
.price-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.price-table tbody{display:grid;gap:6px}
.price-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:14px;min-height:44px;border:1px solid var(--track);border-radius:var(--r-row);background:var(--white)}
.price-table td{padding:0;font:500 16px/1.3 var(--f-mono)}
.price-table td:first-child{font:400 16px/1.3 var(--f-body)}
.price-table td:nth-child(3){grid-column:1 / -1;display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--ink-2)}
.price-table td:nth-child(3)::before{content:attr(data-label) ":";font-family:var(--f-body);font-weight:400;color:var(--ink-3)}
.price-table tr[aria-selected="true"],html:not(.js) .price-table tr[data-default]{background:var(--indigo-pale);border-color:var(--indigo-muted)}
.price-table tr[aria-selected="true"] td:first-child,html:not(.js) .price-table tr[data-default] td:first-child{font-weight:600}
.js .price-table tbody tr{cursor:pointer}
.hundred{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;max-width:240px}
/* Two layers per dot (03-motion.md #7): the "on" layer fades with opacity, so nothing but
   opacity changes when a price row is chosen. */
.hundred i{position:relative;aspect-ratio:1;border-radius:50%;background:var(--rule)}
.hundred i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--indigo);opacity:0}
.hundred i.on::after{opacity:1}
.hundred-read{display:flex;align-items:baseline;gap:10px;margin-top:12px}
.hundred-read .n{font:500 30px/1 var(--f-mono);color:var(--indigo)}
.hundred-read .of{font-size:14px;line-height:1;color:var(--ink-3)}
.price-after{margin-top:16px;font-size:16px!important}
.claims{display:grid;gap:8px}
.claim{padding:22px;border-radius:var(--r-card)}
.claim.earned{background:var(--verdict-tint)}
.claim.lost{background:var(--band)}
.claim .tag{margin-bottom:14px;font:500 10px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.claim.earned .tag{color:var(--verdant)}
.claim.lost .tag{color:var(--tag-med)}
.claim h3{font-size:20px;line-height:1.25;margin-bottom:8px}
.claim p:not(.tag){font-size:16px;line-height:1.55}
.claim.earned p:not(.tag){color:var(--verdict-ink)}
.claim.lost p:not(.tag){color:var(--ink-2)}
.quote-dark{margin-top:8px;padding:22px;border-radius:var(--r-card);background:var(--indigo-deep);color:var(--white);font-size:17px;line-height:1.5}
.claims-note{margin-top:12px;font-size:16px;line-height:1.55;color:var(--ink-3)}
.crit-sec h2{margin-bottom:8px}
.crit-lead{margin-bottom:18px;font-size:16px;line-height:1.5;font-weight:600}
.crit{border-top:1px solid var(--ink);counter-reset:crit}
.crit li{counter-increment:crit;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"what sev" "bar val";gap:8px 12px;align-items:center;padding:16px 0;border-bottom:1px solid var(--rule)}
.crit .what{grid-area:what;align-self:baseline;font-size:16px;line-height:1.3;font-weight:600}
.crit .what::before{content:counter(crit) ". "}
.crit .bar{grid-area:bar;height:6px;border-radius:3px}
.crit .bar>i{border-radius:3px}
.crit .val{grid-area:val;font:500 13px/1 var(--f-mono);white-space:nowrap}
.sev{grid-area:sev;justify-self:end;padding:5px 8px;border-radius:4px;font:600 11px/1 var(--f-body);text-align:center}
.sev.high{background:var(--tag-high-bg);color:var(--tag-high)}
.sev.medium{background:var(--tag-med-bg);color:var(--tag-med)}
.sev.low{background:var(--tag-low-bg);color:var(--tag-low)}
.sev-note{margin-top:8px;font:500 10px/1 var(--f-mono);text-transform:uppercase;color:var(--ink-3);text-align:right}
.quotes{display:grid;gap:8px;margin-top:18px}
.quotes blockquote{padding:18px;border-radius:var(--r-card);background:var(--band);font-size:16px;line-height:1.5}
.crit-after{margin-top:16px;font-size:16px!important}
.full-sec h2{margin-bottom:12px}
.full-sec p{line-height:1.65!important}
@media (min-width:768px){
  .illus .inner{font-size:13px}
  .report-hero h1{font-size:64px}
  .report-hero p{font-size:18px}
  .report-sec h2{font-size:34px}
  .kv{grid-template-columns:1fr 1fr}
  .verdict-box{padding:36px;font-size:38px}
  .glance{grid-template-columns:repeat(3,minmax(0,1fr))}
  .price-wrap{grid-template-columns:minmax(0,1fr) 220px;gap:32px;padding:28px}
  .claims{grid-template-columns:1fr 1fr}
  .quotes{grid-template-columns:1fr 1fr}
}
@media (min-width:1200px){
  .illus .inner{display:flex;align-items:baseline;gap:16px;padding-block:12px;font-size:14px}
  .illus b{display:inline;margin:0;font-size:11px;white-space:nowrap}
  .report-hero{padding-block:80px}
  .report-hero .inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:end}
  .report-hero h1{font-size:80px;margin:0}
  .report-hero p{line-height:1.65}
  .report-layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:64px;align-items:start;padding-block:72px 112px}
  .toc{top:calc(var(--head-h) + 44px + 24px);flex-direction:column;align-self:start;gap:2px;margin:0;padding:0;border:0;overflow:visible;background:none}
  .toc .toc-title{display:block;margin-bottom:12px;font:500 11px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
  .toc ul{flex-direction:column;gap:2px}
  .toc a{gap:10px;min-height:0;padding:10px 12px;border:0;border-radius:6px;color:var(--ink-2);font-size:15px;font-weight:400}
  .toc a::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--rule-2)}
  .toc a[aria-current="true"]{background:var(--indigo-pale);color:var(--indigo);font-weight:600}
  .toc a[aria-current="true"]::before{background:var(--indigo)}
  .report-body{gap:96px;padding-top:0}
  .report-sec .label{font-size:12px;margin-bottom:16px}
  .report-sec h2{font-size:32px;margin-bottom:24px}
  .report-sec .body-2{font-size:18px}
  .kv div{padding:22px 24px}
  .kv dt{font-size:11px;margin-bottom:10px}
  .kv dd{font-size:18px}
  .verdict-box{padding:48px;font-size:44px;line-height:1.08;letter-spacing:-.025em}
  .decisions-intro{margin:28px 0 20px}
  .decisions li{grid-template-columns:56px minmax(0,2fr) minmax(0,3fr);gap:24px;padding:24px 0;align-items:baseline}
  .decisions li>div{display:contents}
  .decisions .n{font-size:28px}
  .decisions h3{font-size:22px;line-height:1.2;margin:0}
  .decisions p{font-size:17px}
  .glance{gap:0;border:1px solid var(--rule);border-radius:var(--r-card)}
  .glance li{padding:32px;border:0;border-radius:0}
  .glance li+li{border-left:1px solid var(--rule)}
  .glance .stat{font-size:60px;margin-bottom:14px}
  .glance p:not(.stat){font-size:17px}
  .price-sec h2{margin-bottom:12px}
  .price-sec .price-intro{margin-bottom:24px}
  .price-wrap{grid-template-columns:minmax(0,1fr) 240px}
  .price-table thead{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}
  .price-table tbody{display:table-row-group}
  .price-table tr{display:table-row;border:0;padding:0;background:none}
  .price-table th{padding:0 12px 12px;border-bottom:1px solid var(--ink);font:500 11px/1.3 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);text-align:left}
  .price-table th:nth-child(2){width:130px}
  .price-table th:nth-child(3){width:150px;text-align:right}
  .price-table td,.price-table td:first-child{padding:16px 12px;border-top:4px solid var(--white);background:var(--white)}
  .price-table td:first-child{font-size:17px;border-radius:6px 0 0 6px}
  .price-table td:nth-child(3){display:table-cell;font-size:16px;color:var(--ink);text-align:right;border-radius:0 6px 6px 0}
  .price-table td:nth-child(3)::before{content:none}
  .price-table tr[aria-selected="true"],html:not(.js) .price-table tr[data-default]{background:none}
  .price-table tr[aria-selected="true"] td,html:not(.js) .price-table tr[data-default] td{background:var(--indigo-pale)}
  .hundred-read{justify-content:space-between;margin-top:16px}
  .hundred-read .n{font-size:36px}
  .price-after{margin-top:20px;font-size:17px!important}
  .claims{gap:16px}
  .claim{padding:32px}
  .claim .tag{font-size:11px;margin-bottom:20px}
  .claim h3{font-size:24px;margin-bottom:10px}
  .claim p:not(.tag){font-size:17px}
  .quote-dark{margin-top:16px;padding:32px;font-size:20px}
  .claims-note{margin-top:16px;font-size:15px}
  .crit-sec h2{margin-bottom:10px}
  .crit-lead{margin-bottom:24px;font-size:17px}
  .crit li{grid-template-columns:40px minmax(0,1fr) auto 74px;grid-template-areas:"n what val sev" "n bar bar sev";gap:10px 16px;padding:18px 0}
  .crit li::before{content:counter(crit);grid-area:n;font:500 14px/1 var(--f-mono);color:var(--ink-3)}
  .crit .what::before{content:none}
  .crit .what{font-size:17px}
  .crit .val{align-self:baseline;font-size:14px;line-height:1.3}
  .sev{width:74px;padding:6px 9px;font-size:12px}
  .sev-note{margin-top:10px;font-size:11px}
  .quotes{gap:16px;margin-top:24px}
  .quotes blockquote{padding:24px;font-size:18px}
  .crit-after{margin-top:24px;font-size:18px!important}
  .full-sec h2{margin-bottom:16px}
}
@media (max-width:359px){.report-hero h1{font-size:34px}.report-sec h2{font-size:26px}.verdict-box{font-size:26px}.glance .stat{font-size:36px}}

/* ==========================================================================
   Second batch, B1: What you get, Pricing, Questions, Walkthrough, Thanks.
   Mockups 6a to 6e (desktop 1280), 14a to 16f (phone 390, iPad 834). Type sizes are the
   mockups' (CRO answer 3: tablet and desktop keep them); full sentences are at least 16px on
   phones. Each page's body carries a page class (pg-wyg, pg-pricing, pg-questions, pg-book,
   pg-thanks) from its front matter.
   ========================================================================== */

/* ---------- Shared parts of these pages ---------- */
.pg-wyg .label,.pg-pricing .label,.pg-questions .label{margin-bottom:14px}
.pg-wyg .h2,.pg-pricing .h2{font-size:26px}
.page-hero .inner{padding-top:48px}
.page-hero h1{font-size:40px;line-height:1;letter-spacing:-.03em;margin-bottom:20px}
.page-hero .lead{font-size:16px;line-height:1.6;color:var(--ink-2)}
.btn-outline-dark{background:transparent;color:var(--white);border-color:rgba(255,255,255,.35)}
.btn-outline-dark:hover{color:var(--white);border-color:var(--white)}
/* Closing bands on these pages: heading and line (Pricing, Questions), or heading and two buttons (What you get). */
.closing-band h2,.closing-two h2{font-size:30px;line-height:1.08;letter-spacing:-.02em}
.closing-band .closing-text p{margin:14px 0 0;font-size:16px}
.closing-band .btn{width:100%}
.closing-two h2{margin-bottom:0}
.closing-btns{display:grid;gap:10px}
.closing-btns .btn{width:100%}
/* The founder, small (Walkthrough and Thanks). */
.founder-chip{display:flex;align-items:center;gap:14px;padding:14px;background:var(--sage-tint);border-radius:var(--r-panel)}
.founder-chip img{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:50% 22%}
.founder-chip figcaption{font:600 16px/1.2 var(--f-body)}
/* Footer under a white page (Walkthrough, Thanks): a hairline above it, as in 6d and 6e. */
.foot-ruled .site-footer .inner{padding-top:24px;border-top:1px solid var(--rule)}
@media (min-width:768px){
  .pg-wyg .h2,.pg-pricing .h2{font-size:32px}
  .page-hero h1{font-size:60px}
  .page-hero .lead{font-size:18px}
  .closing-band,.closing-two{padding-top:56px}
  .closing-band h2,.closing-two h2{font-size:36px}
  .closing-band .inner,.closing-two .inner{display:block}
  .closing-band .btn{width:auto}
  .closing-band .closing-text p{margin-bottom:22px}
  .closing-two h2{margin-bottom:24px}
  .closing-btns{grid-template-columns:1fr 1fr}
}
@media (min-width:1200px){
  .pg-wyg .label,.pg-pricing .label,.pg-questions .label{margin-bottom:18px}
  .pg-wyg .h2,.pg-pricing .h2{font-size:40px}
  .page-hero .inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:end;padding-top:96px}
  .page-hero h1{font-size:72px;letter-spacing:-.035em;margin-bottom:0}
  .page-hero .lead{font-size:19px;line-height:1.65}
  .page-hero-xl h1{font-size:80px;line-height:.98}
  .page-hero-xl .lead{font-size:20px;line-height:1.6}
  .closing-band,.closing-two{padding-block:96px}
  .closing-band .inner{display:grid;grid-template-columns:minmax(0,7fr) auto;gap:48px;align-items:end}
  .closing-band h2,.closing-two h2{font-size:48px;line-height:1.05;letter-spacing:-.025em}
  .closing-band .closing-text p{margin:16px 0 0;font-size:18px}
  .closing-band .btn{padding:0 24px}
  .closing-two .inner{display:flex;justify-content:space-between;align-items:center;gap:48px}
  .closing-two h2{max-width:640px;margin-bottom:0}
  .closing-btns{display:flex;gap:12px}
  .closing-btns .btn{width:auto;padding:0 24px}
  .closing-btns .btn-outline-dark{padding:0 22px}
  .founder-chip{gap:18px;padding:20px}
  .founder-chip img{width:64px;height:64px}
  .founder-chip figcaption{font-size:17px}
  .foot-ruled .site-footer{padding-top:0}
  .foot-ruled .site-footer .inner{padding-top:28px}
}
@media (max-width:359px){.page-hero h1{font-size:34px}.closing-band h2,.closing-two h2{font-size:28px}}

/* ---------- What you get ---------- */
.wyg-answers{padding-top:64px}
.wyg-answers .sec-head .h2{margin-bottom:12px}
.wyg-answers .sec-head .lead{margin-bottom:20px;font-size:16px}
.four{display:grid;gap:8px}
.four li{display:grid;grid-template-columns:32px minmax(0,1fr);padding:22px;background:var(--indigo-deep);color:var(--white);border-radius:var(--r-panel)}
.four .n{font:500 20px/1 var(--f-mono);color:var(--indigo-faint)}
.four h3{font-size:20px;line-height:1.2;margin-bottom:8px}
.four p{font-size:16px;line-height:1.5;color:var(--indigo-muted);margin-bottom:10px}
.four p.v{margin-bottom:0;font-weight:600;line-height:1.4;color:var(--sage)}
.behind-intro{margin:28px 0 14px;font-size:16px;line-height:1.6;color:var(--ink-2)}
.behind{display:grid;gap:1px;background:var(--sage);border:1px solid var(--sage);border-radius:var(--r-card);overflow:hidden}
.behind li{padding:18px;background:var(--sage-tint-2);font-size:16px;line-height:1.5}
.behind b{font-size:16px;line-height:1.4;font-weight:600;color:var(--sage-ink)}
.behind span{font-size:16px;line-height:1.5;color:var(--ink-2)}
.wyg-report{margin-top:64px;padding-block:56px;background:var(--band);border-block:1px solid var(--rule)}
.wyg-report .h2{margin-bottom:10px}
.strong-line{margin-bottom:18px;font-size:17px;line-height:1.5;font-weight:600}
.rule-list{border-top:1px solid var(--rule-2);font-size:16px;line-height:1.55;color:var(--ink-body)}
.rule-list li{padding:14px 0;border-bottom:1px solid var(--rule-2)}
.diagram{display:grid;gap:8px;margin-top:24px;padding:18px;background:var(--white);border:1px solid var(--rule);border-radius:var(--r-panel)}
.diagram-head{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--track);font:500 9px/1.3 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.d-row{display:flex;align-items:baseline;padding:12px 14px;border:1px solid var(--rule);border-radius:var(--r-row)}
.d-row .dn{flex:none;margin-right:10px;font:500 12px/1 var(--f-mono);color:var(--indigo)}
.d-row p{font:600 14px/1.3 var(--f-body)}
.d-bar{display:none}
.d-read{background:var(--indigo);border:0;color:var(--white)}
.d-read .dn{color:var(--indigo-muted)}
.d-next{background:var(--verdict-tint);border:0;color:var(--sage-ink)}
.d-next .dn{color:var(--verdant)}
.wyg-report-link{margin-top:12px}
.wyg-report-link .link-arrow{font-size:15px}
.wyg-timing{padding-top:56px}
.wyg-timing .h2{margin-bottom:20px}
.days{display:grid;gap:8px}
.days li{padding:20px;border:1px solid var(--rule);border-radius:var(--r-panel)}
.days-bars{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:3px;margin-bottom:16px}
.days-bars i{height:26px;border-radius:2px;background:var(--indigo)}
.days-bars i.wk1{background:var(--sage)}
.days-bars i.off{background:var(--track)}
.days p{font-size:16px;line-height:1.55}
.days b{font-weight:600}
.days-after{margin-top:16px;font-size:16px;line-height:1.5;font-weight:600;color:var(--verdant)}
.wyg-products{padding-top:56px}
.wyg-products .h2{margin-bottom:14px}
.chips-intro{margin-bottom:14px;font-size:16px;line-height:1.6}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips li{padding:10px 13px;border:1px solid var(--rule);border-radius:var(--r-chip);background:var(--band);font-size:16px;line-height:1.2}
.chips li.last{background:var(--sage-tint);border-color:var(--sage-rule);color:var(--sage-ink)}
.wyg-who{padding-block:56px 64px}
.wyg-who .h2{margin-bottom:20px}
.who{border-top:2px solid var(--verdant)}
.who li{padding:16px 0;border-bottom:1px solid var(--rule);font-size:16px;line-height:1.5}
.who h3,.who p{display:inline}
.who h3{font-size:17px;line-height:1.4}
.who p{font-size:16px;line-height:1.5;color:var(--ink-2)}
.fit-pair{display:grid;gap:8px;margin-top:24px}
.fit-pair p{padding:20px;border-radius:var(--r-panel);font-size:16px;line-height:1.55}
.fit-pair p:first-child{background:var(--sage-tint);color:var(--olive)}
.fit-pair p:last-child{background:var(--indigo-deep);color:var(--white)}
@media (min-width:768px){
  .four{grid-template-columns:1fr 1fr}
  .four p{font-size:15px}
  .four p.v{font-size:15px}
  .behind{grid-template-columns:1fr 1fr}
  .behind li,.behind span{font-size:15px}
  .wyg-report .h2{margin-bottom:10px}
  .rule-list{font-size:15px}
  .days{grid-template-columns:1fr 1fr}
  .days p{font-size:15px}
  .chips li{font-size:15px}
  .who{display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
  .who li,.who p{font-size:15px}
  .fit-pair{grid-template-columns:1fr 1fr}
  .fit-pair p{font-size:15px}
}
@media (min-width:1200px){
  .wyg-answers{padding-top:112px}
  .wyg-answers .sec-head .h2{margin-bottom:0}
  .wyg-answers .sec-head .lead{margin-bottom:0;font-size:18px}
  .four{gap:16px}
  .four li{grid-template-columns:56px minmax(0,1fr);gap:8px;padding:36px}
  .four .n{font-size:28px}
  .four h3{font-size:26px;line-height:1.15;margin-bottom:12px}
  .four p{font-size:17px;line-height:1.55;margin-bottom:14px}
  .four p.v{font-size:17px}
  .behind-intro{margin:48px 0 20px;font-size:18px}
  .behind{grid-template-columns:repeat(5,minmax(0,1fr))}
  .behind li{padding:24px}
  .behind b{display:block;margin-bottom:8px;font-size:18px;line-height:1.3}
  .behind span{display:block;font-size:16px}
  .wyg-report{margin-top:120px;padding-block:104px}
  .wyg-report .inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:auto auto;column-gap:64px;align-content:center}
  .wyg-report-text{grid-column:1;grid-row:1;align-self:end}
  .wyg-report-link{grid-column:1;grid-row:2;align-self:start;margin-top:0}
  .wyg-report-link .link-arrow{font-size:16px}
  .diagram{grid-column:2;grid-row:1 / span 2;align-self:center;margin-top:0;gap:10px;padding:28px;box-shadow:var(--sh-card)}
  .wyg-report .h2{margin-bottom:14px}
  .strong-line{margin-bottom:28px;font-size:19px}
  .rule-list{font-size:17px}
  .rule-list li{padding:16px 0}
  .diagram-head{padding-bottom:12px;font-size:10px;line-height:1;letter-spacing:.06em}
  .d-row{display:grid;grid-template-columns:28px minmax(0,1fr);gap:6px;align-items:start;padding:16px 18px}
  .d-row .dn{margin:0;font-size:13px;line-height:1.4}
  .d-row p{font-size:15px}
  .d-bar{display:block;width:var(--w);height:8px;margin-top:6px;border-radius:4px;background:var(--track)}
  .d-row p+.d-bar{margin-top:10px}
  .d-read .d-bar{background:rgba(255,255,255,.25)}
  .d-next .d-bar{background:rgba(53,105,79,.2)}
  .d-nums .d-bar{background:var(--indigo)}
  .d-nums .d-bar+.d-bar{background:var(--indigo-faint)}
  .d-nums .d-bar+.d-bar+.d-bar{background:var(--indigo-muted)}
  .wyg-timing{padding-top:112px}
  .wyg-timing .h2{margin-bottom:40px}
  .days{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:16px}
  .days li{padding:32px}
  .days-bars{gap:4px;margin-bottom:24px}
  .days-bars i{height:36px;border-radius:3px}
  .days p{font-size:18px}
  .days-after{margin-top:24px;font-size:18px}
  .wyg-products{padding-top:112px}
  .wyg-products .inner{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:64px}
  .wyg-products .h2{margin-bottom:0}
  .chips-intro{margin-bottom:20px;font-size:19px}
  .chips{gap:8px}
  .chips li{padding:12px 16px;font-size:17px;line-height:1}
  .wyg-who{padding-block:112px}
  .wyg-who .h2{margin-bottom:40px}
  .who{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;padding-top:28px}
  .who li{padding:0;border:0}
  .who h3,.who p{display:block}
  .who h3{margin-bottom:10px;font-size:20px;line-height:1.3}
  .who p{font-size:17px;line-height:1.55}
  .fit-pair{gap:16px;margin-top:56px}
  .fit-pair p{padding:32px;font-size:18px}
}

/* ---------- Pricing ---------- */
.pr-offer-sec{padding-top:40px}
.pr-offer{background:var(--indigo-deep);color:var(--white);border-radius:var(--r-band);overflow:hidden}
.pr-offer .label{margin:0;color:var(--indigo-muted)}
.pr-offer-head{display:grid;gap:14px;padding:28px 24px;border-bottom:1px solid var(--indigo-line)}
.pr-offer h2{font-size:24px;line-height:1.1}
.pr-price b{display:block;font:600 60px/1 var(--f-display);letter-spacing:-.04em}
.pr-price span{display:block;margin-top:10px;font-size:16px;line-height:1;color:var(--indigo-faint)}
.pr-price s{color:inherit}
.pr-table{display:block;padding:8px 24px 0;border-collapse:collapse}
.pr-table tbody{display:block}
.pr-table tr{display:block;padding:14px 0;border-bottom:1px solid var(--indigo-line)}
.pr-table th{display:block;margin-bottom:6px;padding:0;font:500 10px/1 var(--f-mono);text-transform:uppercase;text-align:left;color:var(--indigo-muted)}
.pr-table td{display:block;padding:0;font-size:16px;line-height:1.45}
.pr-offer-btn{padding:20px 24px 24px}
.pr-offer-btn .btn{width:100%}
.pr-completed{padding-top:64px}
.pr-completed .inner{display:grid;gap:28px;align-items:center}
.pr-completed .h2{margin-bottom:14px}
.pr-completed .lead{font-size:16px}
.fifty-dots{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px;max-width:260px}
.fifty-dots i{aspect-ratio:1;border-radius:50%;background:var(--verdant)}
.fifty-cap{margin-top:12px;font:500 11px/1 var(--f-mono);text-transform:uppercase;color:var(--ink-2)}
.pr-panels{padding-top:56px}
.pr-panels .inner{display:grid;gap:8px}
.pr-panels h2{font-size:24px;line-height:1.1;letter-spacing:-.02em;margin-bottom:14px}
.pr-founding,.pr-larger{padding:24px;border-radius:var(--r-panel)}
.pr-founding{background:var(--sage-tint)}
.pr-founding .label{margin-bottom:12px;color:var(--verdant)}
.pr-founding ul{display:grid;gap:12px}
.pr-founding li{padding-top:10px;border-top:2px solid var(--verdant);font-size:16px;line-height:1.5}
.pr-larger{border:1px solid var(--rule)}
.pr-larger .label{margin-bottom:12px}
.pr-larger p:not(.label){font-size:16px;line-height:1.55;color:var(--ink-2)}
.pr-worth{padding-block:56px 64px}
.pr-worth .h2{margin-bottom:18px}
.pr-worth-body{padding-top:18px;border-top:1px solid var(--ink)}
.pr-worth-line{margin-bottom:14px;font:600 20px/1.3 var(--f-display);letter-spacing:-.015em;text-wrap:pretty}
.pr-worth .source{font:400 13px/1.5 var(--f-body)}
@media (min-width:768px){
  .pr-price b{font-size:80px}
  .pr-price span{font-size:15px}
  .pr-completed .inner{grid-template-columns:1fr 1fr}
  .pr-panels .inner{grid-template-columns:1fr 1fr}
  .pr-founding li,.pr-larger p:not(.label){font-size:15px}
  .pr-worth-line{font-size:26px}
}
@media (min-width:1200px){
  .pr-offer-sec{padding-top:64px}
  .pr-offer{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:auto 1fr}
  .pr-offer-head{grid-column:1;grid-row:1;gap:24px;padding:48px 48px 24px;border-bottom:0}
  .pr-offer .label{font-size:12px}
  .pr-offer h2{font-size:28px}
  .pr-price b{font-size:88px}
  .pr-price span{margin-top:12px;font-size:17px}
  .pr-table{grid-column:2;grid-row:1 / span 2;padding:20px 48px;border-left:1px solid var(--indigo-line)}
  .pr-table tr{display:grid;grid-template-columns:160px minmax(0,1fr);padding:22px 0}
  .pr-table tr:last-child{border-bottom:0}
  .pr-table th{margin:0;font-size:12px;line-height:1.8}
  .pr-table td{font-size:18px}
  .pr-offer-btn{grid-column:1;grid-row:2;align-self:end;padding:0 48px 48px}
  .pr-offer-btn .btn{width:auto}
  .pr-completed{padding-top:120px}
  .pr-completed .inner{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:64px}
  .pr-completed .h2{margin-bottom:18px}
  .pr-completed .lead{font-size:18px}
  .fifty{justify-self:end;width:320px}
  .fifty-dots{gap:6px;max-width:none}
  .fifty-cap{margin-top:16px;font-size:12px}
  .pr-panels{padding-top:120px}
  .pr-panels .inner{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .pr-founding{grid-column:span 2}
  .pr-founding,.pr-larger{padding:36px}
  .pr-panels h2{font-size:30px}
  .pr-founding .label,.pr-larger .label{margin-bottom:18px}
  .pr-founding h2{margin-bottom:24px}
  .pr-larger h2{margin-bottom:20px}
  .pr-founding ul{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .pr-founding li{padding-top:16px;font-size:17px}
  .pr-larger p:not(.label){font-size:17px}
  .pr-worth{padding-block:120px}
  .pr-worth .h2{margin-bottom:28px}
  .pr-worth-body{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,3fr);gap:48px;align-items:end;padding-top:32px}
  .pr-worth-line{margin:0;font-size:32px}
  .pr-worth .source{font-size:14px}
}
@media (max-width:359px){.pr-price b{font-size:48px}}

/* ---------- Questions ---------- */
.qs-page .inner{padding-block:48px 56px}
.qs-page h1{font-size:40px;line-height:1;letter-spacing:-.03em;margin-bottom:28px}
.faq-sage details[open]{background:var(--sage-tint-2);border-color:var(--sage-rule)}
.faq .faq-a{display:grid;justify-items:start;gap:2px;padding:0 18px 8px;margin-top:-6px}
.faq .faq-a p{font-size:16px;line-height:1.6;color:var(--ink-body)}
.faq .faq-a p:last-child{padding-bottom:8px}
.faq .faq-a .link-arrow{font-size:14px}
.more-qs{margin-top:32px;padding:22px;background:var(--sage-tint);border-radius:var(--r-panel)}
.more-qs .label{margin-bottom:12px;color:var(--verdant)}
.more-qs li+li{border-top:1px solid var(--rule-2)}
.more-qs a{position:relative;display:block;padding:14px 30px 14px 0;font:600 16px/1.4 var(--f-body);color:var(--indigo);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.more-qs li:first-child a{padding-top:0}
.more-qs li:last-child a{padding-bottom:0}
.more-qs a::after{content:"\2192";position:absolute;right:0;top:14px;width:20px;font:500 15px/1.4 var(--f-mono)}
.more-qs li:first-child a::after{top:0}
@media (min-width:768px){
  .qs-page h1{font-size:60px}
  .faq-sage summary{padding:16px 18px;font-size:17px}
  .faq-sage .faq-a{padding:0 18px 8px;margin-top:-6px}
  .faq-sage .faq-a p{font-size:15px}
  .more-qs a{font-size:15px}
}
@media (min-width:1200px){
  .qs-page .inner{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);grid-template-rows:auto 1fr;column-gap:64px;align-items:start;padding-block:96px 112px}
  .qs-page h1{grid-column:1;grid-row:1;font-size:72px;letter-spacing:-.035em;margin-bottom:48px}
  .qs-page .faq{grid-column:2;grid-row:1 / span 2}
  .more-qs{grid-column:1;grid-row:2;margin-top:0;padding:28px}
  .more-qs .label{margin-bottom:18px}
  .more-qs ul{border-top:1px solid var(--rule-2)}
  .more-qs a,.more-qs li:first-child a,.more-qs li:last-child a{padding:16px 36px 16px 0;font-size:17px;line-height:1.35}
  .more-qs a::after,.more-qs li:first-child a::after{top:16px;width:24px;line-height:1.5}
  .faq-sage summary{padding:22px 24px;font-size:20px}
  .faq-sage .faq-a{gap:0;padding:0 24px 8px;margin-top:-8px}
  .faq-sage .faq-a p{font-size:17px}
  .faq-sage .faq-a p:last-child{padding-bottom:14px}
  .faq-sage .faq-a .link-arrow{font-size:15px}
}
@media (max-width:359px){.qs-page h1{font-size:34px}}

/* ---------- Walkthrough ---------- */
/* "20-minute" stays whole: a balanced heading would otherwise break after its hyphen ("Book a 20- / minute"). */
.book h1 .nb{white-space:nowrap}
.book .inner{padding-block:44px 0}
.book h1{font-size:36px;line-height:1;letter-spacing:-.03em;margin-bottom:18px}
.book .lead{margin-bottom:24px;font-size:16px;line-height:1.6;color:var(--ink-2)}
.book-next{padding-top:36px}
.book-next h2{margin-bottom:14px;font-size:22px;line-height:1.15;letter-spacing:-.01em}
.next-steps{border-top:1px solid var(--ink)}
.next-steps li{display:grid;grid-template-columns:32px minmax(0,1fr);padding:14px 0;border-bottom:1px solid var(--rule);font-size:16px;line-height:1.55}
.next-steps .n{font:500 14px/1.6 var(--f-mono);color:var(--verdant)}
.form-card{margin-top:36px;padding:22px;border:1px solid var(--rule);border-radius:var(--r-band)}
.capture-form{display:grid;gap:18px}
.field-row{display:grid;gap:18px}
.field{display:grid;gap:8px;align-content:start;min-width:0}
.field>label{display:grid;gap:8px;align-content:start}
.field-label{font:600 15px/1.2 var(--f-body);color:var(--ink)}
.field-label .req{color:var(--error)}
.field-label .opt{font-weight:400;color:var(--ink-3)}
.field input:not([type="radio"]),.field textarea,.field select{width:100%;min-height:52px;padding:0 14px;border:1.5px solid var(--rule-2);border-radius:var(--r-btn);background:var(--white);font:400 17px/1.3 var(--f-body);color:var(--ink)}
.field textarea{min-height:92px;padding:12px 14px;line-height:1.5;resize:vertical}
.field select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer}
.select-wrap{position:relative;display:block}
.select-wrap::after{content:"\25BE";position:absolute;right:14px;top:50%;transform:translateY(-50%);font:500 14px/1 var(--f-mono);color:var(--ink-3);pointer-events:none}
.field input:not([type="radio"]):focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--indigo);border-radius:var(--r-btn);box-shadow:0 0 0 3px rgba(50,53,107,.18)}
/* Keyboard focus on a field also gets the handover's 2px ring (CRO, batch 1 check, answer 3); mouse
   focus keeps the soft glow. Browsers count a click into a text field as :focus-visible, so with
   JavaScript the ring follows the keyboard (html.kbd, set by site.js); without it, :focus-visible. */
html:not(.js) .field input:not([type="radio"]):focus-visible,html:not(.js) .field textarea:focus-visible,html:not(.js) .field select:focus-visible,
.js.kbd .field input:not([type="radio"]):focus,.js.kbd .field textarea:focus,.js.kbd .field select:focus{box-shadow:var(--focus)}
.field [aria-invalid="true"]{border-color:var(--error-rule)!important}
.help{font-size:16px;line-height:1.4;color:var(--ink-3)}
.field-error{font-size:16px;line-height:1.4;color:var(--error)}
.field-error:empty{align-self:start;margin-top:-8px}
.choices{margin:0;padding:0;border:0;min-width:0}
.choices legend{float:left;width:100%;margin-bottom:10px;padding:0}
.chips-row{clear:both;display:flex;flex-wrap:wrap;gap:6px}
.choice{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1.5px solid var(--rule-2);border-radius:var(--r-chip);background:var(--white);font-size:16px;line-height:1.2;color:var(--ink-body);cursor:pointer;transition:background-color .15s ease,border-color .15s ease}
.choice input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.choice:has(input:checked){border-color:var(--indigo);background:var(--indigo-pale);color:var(--indigo-deep)}
.choice:has(input:focus-visible){box-shadow:var(--focus)}
.form-send{display:grid;gap:14px;margin-top:6px}
.form-send .btn{width:100%;font-size:17px}
.form-note{font-size:16px;line-height:1.5;color:var(--ink-2)}
.form-note a{font-weight:600}
@media (min-width:768px){
  .book h1{font-size:52px}
  .book .lead{font-size:16px}
  .next-steps li{font-size:15px}
  .field-row{grid-template-columns:1fr 1fr;gap:16px}
  .field-label{line-height:1}
  .help,.field-error{font-size:14px}
  .help{font-size:13px}
  .form-note{font-size:13px}
  .choice{font-size:15px}
}
@media (min-width:1200px){
  .book .inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:start;padding-block:88px 112px}
  .book-intro{display:flex;flex-direction:column}
  .book-intro .founder-chip{order:3;margin-top:40px}
  .book-intro .book-next{order:2;padding-top:0}
  .book h1{font-size:64px;margin-bottom:24px}
  .book .lead{margin-bottom:48px;font-size:19px}
  .book-next h2{margin-bottom:20px;font-size:26px}
  .next-steps li{grid-template-columns:44px minmax(0,1fr);padding:18px 0;font-size:17px}
  .next-steps .n{font-size:15px;line-height:1.5}
  .form-card{margin-top:0;padding:40px;box-shadow:0 1px 2px rgba(15,17,23,.05),0 18px 48px rgba(21,22,58,.1)}
  .capture-form{gap:22px}
  .field textarea{min-height:104px}
  .help{font-size:14px}
  .form-note{font-size:14px}
  .choice{gap:8px;padding:0 16px;font-size:16px}
  .choice::before{content:"";flex:none;width:14px;height:14px;border:1.5px solid var(--rule-2);border-radius:50%;background:var(--white)}
  .choice:has(input:checked)::before{border-color:var(--indigo);background:var(--indigo)}
}
@media (max-width:359px){.book h1{font-size:30px}}

/* ---------- Thanks ---------- */
.thanks{position:relative;overflow:hidden}
.thanks::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 50% at 70% 60%,rgba(50,53,107,.1),rgba(50,53,107,0) 70%)}
.thanks .inner{position:relative;padding-block:88px 96px}
.tick{display:grid;place-items:center;width:52px;height:52px;margin-bottom:28px;border-radius:50%;background:var(--verdict-tint);color:var(--verdant);font:600 24px/1 var(--f-body)}
.thanks h1{font-size:40px;line-height:.98;letter-spacing:-.035em;margin-bottom:20px}
.thanks-lines{display:grid;gap:12px;margin-bottom:28px}
.thanks-lines p{font-size:16px;line-height:1.6;color:var(--ink-2)}
.thanks .founder-chip{max-width:360px;margin-bottom:28px}
.thanks .founder-chip img{width:56px;height:56px}
.thanks-back .link-arrow{font-size:16px}
@media (min-width:768px){
  .thanks h1{font-size:60px}
  .thanks-lines p{font-size:18px}
}
@media (min-width:1200px){
  .thanks::before{background:radial-gradient(40% 70% at 70% 50%,rgba(50,53,107,.1),rgba(50,53,107,0) 70%)}
  .thanks .inner{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);grid-template-rows:auto auto;column-gap:64px;align-items:center;padding-block:160px 180px}
  .thanks-main{grid-column:1;grid-row:1}
  .thanks-back{grid-column:1;grid-row:2}
  .thanks .founder-chip{grid-column:2;grid-row:1 / span 2;justify-self:end;flex-direction:column;gap:16px;width:280px;max-width:none;margin:0;padding:28px;border-radius:var(--r-band);text-align:center}
  .thanks .founder-chip img{width:112px;height:112px}
  .thanks .founder-chip figcaption{font:600 20px/1.2 var(--f-display)}
  .tick{width:56px;height:56px;margin-bottom:32px;font-size:26px}
  .thanks h1{font-size:80px;margin-bottom:28px}
  .thanks-lines{margin-bottom:24px}
  .thanks-lines p{max-width:560px;font-size:21px}
  .thanks-back .link-arrow{font-size:17px}
}
@media (max-width:359px){.thanks h1{font-size:34px}}

.thanks [data-sent][hidden]{display:none}

/* ==========================================================================
   Second batch, B2: Insights and the articles. Mockups 7a to 7d (desktop 1280), 17a to 20b
   (phone 390, iPad 834); handover 02 "Article layout", 04 "Lists that grow". Type sizes are the
   mockups' (tablet and desktop keep them); full sentences are at least 16px on phones (CRO
   answer 3). Body classes: pg-insights, pg-article (front matter).
   ========================================================================== */

/* ---------- Insights ---------- */
.pg-insights .page-hero h1{font-size:44px;line-height:.98;letter-spacing:-.035em;margin-bottom:18px}
.ins-sec .inner{padding-top:36px}
/* The featured card: the whole card is the title's link (the link's box is stretched over it). */
.feat{position:relative;display:grid;gap:14px;padding:26px;background:var(--indigo-deep);color:var(--white);border-radius:var(--r-band)}
.feat-main{display:grid;gap:14px}
.feat-meta{display:flex;gap:14px;font:500 11px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--indigo-muted)}
.feat-title{font-size:26px;line-height:1.08;letter-spacing:-.02em}
.feat-title a{color:var(--white);text-decoration-line:underline;text-decoration-thickness:2px;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:6px}
.feat-title a:hover{color:var(--white)}
.feat-title a::after{content:"";position:absolute;inset:0;border-radius:var(--r-band)}
.feat-title a:focus-visible{box-shadow:none}
.feat-title a:focus-visible::after{box-shadow:var(--focus)}
.feat-sum{font-size:16px;line-height:1.6;color:var(--indigo-muted)}
.feat-side{display:grid;gap:16px;margin-top:6px}
.feat-pull{display:none}
.feat-by{display:flex;align-items:center;gap:10px;font-size:13px;line-height:1.3;color:var(--indigo-muted)}
.feat-by img{width:34px;height:34px;border-radius:50%;object-fit:cover;object-position:50% 22%}
.ins-list{margin-top:20px;border-top:1px solid var(--ink)}
.ins-list li{position:relative;display:grid;gap:8px;padding:22px 0;border-bottom:1px solid var(--rule)}
.ins-date{font:500 11px/1 var(--f-mono);color:var(--ink-3)}
.ins-title{font-size:20px;line-height:1.25}
.ins-title a::after{content:"";position:absolute;inset:0}
.ins-sum{font-size:16px;line-height:1.55;color:var(--ink-2)}
.ins-arrow{display:none}
.ins-close{margin-top:56px}
.pg-insights .closing-band h2,.pg-article .closing-band h2{font-size:28px}
.pg-article .closing-band{padding-top:48px}
/* 03-motion.md #8: insight cards lift 4px on hover (pointer only), 250ms; no lift with reduced motion.
   Only the lift animates (brief 3.5: opacity and transform only); the shadow comes with it at once. */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .feat{transition:transform .25s ease}
  .feat:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(15,17,23,.09)}
}
@media (min-width:768px){
  .pg-insights .page-hero h1{font-size:64px}
  .feat-title{font-size:36px}
  .feat-sum,.ins-sum{font-size:15px}
  .pg-insights .closing-band h2,.pg-article .closing-band h2{font-size:36px}
}
@media (min-width:1200px){
  .pg-insights .page-hero h1{margin-bottom:0;font-size:80px}
  .ins-sec .inner{padding-top:64px}
  .feat{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:0;padding:0;overflow:hidden}
  .feat-main{align-content:start;gap:20px;padding:48px}
  .feat-meta{gap:16px;font-size:12px}
  .feat-title{font-size:44px;line-height:1.05;letter-spacing:-.025em}
  .feat-title a{text-underline-offset:8px}
  .feat-sum{max-width:620px;font-size:18px}
  .feat-side{align-content:end;margin:0;padding:48px;background:var(--indigo-inset);border-left:1px solid var(--indigo-line)}
  .feat-pull{display:grid;grid-template-columns:1fr 1fr;gap:4px;align-items:end}
  .feat-pull p{padding-bottom:14px;border-bottom:5px solid var(--sage);font:600 20px/1.1 var(--f-display)}
  .feat-pull p:first-child{color:var(--indigo-muted);border-bottom-color:var(--indigo-faint)}
  .feat-by{margin-top:12px;gap:12px;font-size:14px}
  .feat-by img{width:40px;height:40px}
  .ins-list{margin-top:64px}
  .ins-list li{grid-template-columns:160px minmax(0,5fr) minmax(0,5fr) 40px;gap:32px;align-items:baseline;padding:28px 12px;border-radius:6px;transition:background-color .2s ease}
  .ins-list li:hover{background:var(--band)}
  .ins-date{font-size:12px}
  .ins-title{font-size:22px}
  .ins-title a{color:var(--ink)}
  .ins-sum{font-size:16px}
  .ins-arrow{display:block;font:500 18px/1 var(--f-mono);color:var(--indigo)}
  .ins-close{margin-top:112px}
  .pg-insights .closing-band h2,.pg-article .closing-band h2{font-size:48px}
}
@media (max-width:359px){.pg-insights .page-hero h1{font-size:34px}.feat-title{font-size:24px}.pg-insights .closing-band h2,.pg-article .closing-band h2{font-size:26px}}

/* ---------- Articles: header ---------- */
.art-head{background:var(--indigo-deep);color:var(--white)}
.art-head .inner{padding-block:44px 36px}
/* The visible trail (CRO answer 1): the hub's name, linked; a 44px tap area around the label. */
.trail{margin:-16px 0 4px;font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.trail a{display:inline-flex;align-items:center;min-height:44px;color:var(--indigo-muted);text-decoration-color:var(--indigo-faint);text-underline-offset:4px}
.trail a:hover{color:var(--white)}
.art-head h1{margin-bottom:26px;font-size:32px;line-height:1.04;letter-spacing:-.025em}
.art-by{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:start;padding-top:20px;border-top:1px solid var(--indigo-line)}
.art-photo img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 22%}
.art-author{font-size:16px;line-height:1.5;color:var(--indigo-muted)}
.art-dates{display:grid;gap:8px;margin-top:12px}
.art-date{font:500 11px/1 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--indigo-muted)}

/* ---------- Articles: answer, contents, body ---------- */
.art-main .inner{padding-block:24px 56px}
.art-answer{padding:22px;background:var(--indigo-pale);border-radius:var(--r-panel);color:var(--indigo-deep)}
.art-answer p{font-size:17px;line-height:1.55}
.art-answer p+p{margin-top:12px}
/* "On this page" below 1200: a tap-to-open box (native details; site.js starts it closed). */
.art-toc{margin-top:20px}
.art-toc details{border:1px solid var(--rule);border-radius:var(--r-card)}
.art-toc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:52px;padding:0 16px;border-radius:var(--r-card);font:500 12px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.art-toc summary::-webkit-details-marker{display:none}
.art-toc summary::after{content:"+";font:500 18px/1 var(--f-mono);color:var(--indigo)}
.art-toc details[open] summary::after{content:"\2212"}
.art-toc ul{border-top:1px solid var(--rule)}
.art-toc li+li{border-top:1px solid var(--track)}
.art-toc a{display:flex;align-items:center;min-height:44px;padding:10px 16px;font-size:16px;line-height:1.4;color:var(--ink-body);text-decoration:none}
.art-toc a:hover{color:var(--indigo)}
.art-rail{display:none}
.art-body{padding-top:12px}
.art-body h2{margin:40px 0 14px;font-size:23px;line-height:1.18;letter-spacing:-.01em}
.art-body>p{margin-bottom:16px;font-size:16px;line-height:1.7;color:var(--ink-body);text-wrap:pretty}
.art-body>p a{font-weight:600}
.art-body .pull{margin:28px 0;padding:20px 0;border-block:1px solid var(--indigo-pale-rule);font:600 22px/1.28 var(--f-display);color:var(--indigo-deep)}
/* Tables: cards below 1200 (the first column is the card title, each other column a labelled
   line, from the data-label build.py writes); a table with an indigo header row from 1200. */
.art-body .table-wrap{margin:10px 0 24px}
.art-body table.compare,.art-body table.compare tbody,.art-body table.compare tr,.art-body table.compare th,.art-body table.compare td{display:block}
.art-body table.compare thead{display:none}
.art-body table.compare tbody{display:grid;gap:8px}
.art-body table.compare tr{display:grid;gap:10px 20px;padding:16px;background:var(--white);border:1px solid var(--rule);border-radius:var(--r-card);color:var(--ink-body)}
.art-body table.compare tbody th{grid-column:1 / -1;font:600 16px/1.35 var(--f-body);text-align:left;color:var(--ink-body)}
.art-body table.compare tbody td{font-size:16px;line-height:1.5}
.art-body table.compare tbody td::before{content:attr(data-label);display:block;margin-bottom:4px;font:500 10px/1.3 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
/* Bold-led bullets as numbered grey rows. */
.art-list{display:grid;gap:8px;margin:6px 0 20px}
.art-list li{display:grid;grid-template-columns:24px minmax(0,1fr);padding:14px;background:var(--band);border-radius:var(--r-row);font-size:16px;line-height:1.6;color:var(--ink-body)}
.art-list .n{font:500 12px/1.7 var(--f-mono);color:var(--indigo)}
.art-list strong{font-weight:600;color:var(--ink)}
/* The two-week line (article 1, after the "In week one" paragraph): week one in the pale rule,
   week two in indigo, as the two-part pull line marks them (handover 01, section 6). */
.weekline-panel{margin:8px 0 24px;padding:20px;border:1px solid var(--rule);border-radius:var(--r-panel)}
.weekline{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.wk-label{margin-bottom:12px;font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.wk2 .wk-label{color:var(--indigo)}
.ticks{display:flex;align-items:flex-end;height:36px;border-bottom:5px solid var(--indigo-pale-rule)}
.ticks span{flex:1;display:flex;align-items:flex-end;height:100%}
.ticks span::before{content:"";display:block;width:2px;height:14px;background:var(--indigo-pale-rule)}
.wk2 .ticks{border-bottom-color:var(--indigo)}
.wk2 .ticks span::before{width:4px;height:100%;background:var(--indigo)}
/* Related, the founder panel, the sources. */
.art-related{margin-top:28px}
.art-related .label{margin-bottom:14px}
.art-related ul{display:grid;gap:8px}
.art-related a{position:relative;display:block;min-height:52px;padding:14px 40px 14px 16px;border:1px solid var(--rule);border-radius:var(--r-row);font:600 16px/1.4 var(--f-body);color:var(--indigo);transition:background-color .2s ease}
.art-related a::after{content:"\2192";position:absolute;right:16px;top:50%;transform:translateY(-50%);font:500 15px/1 var(--f-mono)}
.art-related a:hover{background:var(--band);color:var(--indigo)}
.art-cta{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;align-items:center;margin-top:20px;padding:18px;background:var(--sage-tint);border-radius:var(--r-panel)}
.art-cta img{width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:50% 22%}
.art-cta p{font-size:16px;line-height:1.55;color:var(--ink)}
.art-cta a{font-weight:600}
.art-sources{margin-top:40px;padding-top:20px;border-top:1px solid var(--ink)}
.art-sources .label{margin-bottom:14px}
.sources{display:grid;gap:10px;counter-reset:src}
.sources li{display:grid;grid-template-columns:22px minmax(0,1fr);font-size:13px;line-height:1.6;color:var(--ink-2);counter-increment:src}
.sources li::before{content:counter(src);font:500 11px/1.9 var(--f-mono);color:var(--ink-3)}
.sources span{overflow-wrap:anywhere}
@media (min-width:768px){
  .art-head h1{font-size:46px}
  .art-author{font-size:13px}
  .art-answer p{font-size:20px}
  .art-body{max-width:680px}
  .art-body h2{font-size:28px}
  .art-body>p{font-size:18px}
  .art-body table.compare tr{grid-template-columns:1fr 1fr}
  .art-body table.compare tbody td{font-size:15px}
  .art-list li{font-size:15px}
  .art-related a{font-size:15px}
  .art-cta p{font-size:15px}
  .pg-article .closing-band{padding-block:48px}
  .pg-insights .closing-band{padding-bottom:48px}
}
@media (min-width:1200px){
  .art-head .inner{padding-block:72px 64px}
  .trail{margin:-16px 0 12px;font-size:12px}
  .art-head h1{max-width:900px;margin-bottom:40px;font-size:60px;line-height:1.02;letter-spacing:-.03em}
  .art-by{grid-template-columns:52px minmax(0,1fr);gap:16px;align-items:center;padding-top:28px}
  .art-photo img{width:52px;height:52px}
  .art-byline{display:grid;grid-template-columns:minmax(0,720px) auto;justify-content:space-between;align-items:center;gap:48px}
  .art-author{font-size:15px}
  .art-dates{margin:0;justify-items:end}
  .art-date{font-size:12px;white-space:nowrap}
  .art-main .inner{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:80px;align-items:start;padding-block:64px 96px}
  .art-col{max-width:760px}
  .art-answer{margin-bottom:56px;padding:32px 36px}
  .art-answer p{font-size:21px}
  .art-toc{display:none}
  .art-rail{display:block;position:sticky;top:calc(var(--head-h) + 24px)}
  .art-rail p{margin-bottom:12px;font:500 11px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
  .art-rail ul{display:grid;gap:2px}
  .art-rail a{display:block;padding:9px 12px;border-radius:6px;font-size:14px;line-height:1.4;color:var(--ink-2);text-decoration:none}
  .art-rail a:hover{color:var(--ink)}
  .art-rail a[aria-current="true"]{background:var(--indigo-pale);color:var(--indigo);font-weight:600}
  .art-body{max-width:none;padding-top:0}
  .art-body h2{margin:56px 0 18px;font-size:30px;line-height:1.15;letter-spacing:-.015em}
  .art-body>p{margin-bottom:20px}
  .art-body .pull{margin:36px 0;padding:28px 0;font-size:28px;line-height:1.25;letter-spacing:-.015em}
  .art-body .table-wrap{margin:16px 0 32px;border:1px solid var(--rule);border-radius:var(--r-card);overflow:hidden}
  .art-body table.compare{display:table;width:100%;table-layout:fixed;border-collapse:collapse}
  .art-body table.compare thead{display:table-header-group}
  .art-body table.compare tbody{display:table-row-group}
  .art-body table.compare tr{display:table-row;padding:0;border:0;border-radius:0}
  .art-body table.compare th,.art-body table.compare td{display:table-cell;padding:14px 18px;text-align:left;vertical-align:top}
  .art-body table.compare tr>:first-child{width:180px}
  .art-body table.compare thead tr{background:var(--indigo-deep);color:var(--white)}
  .art-body table.compare thead th{font:600 14px/1.35 var(--f-body)}
  .art-body table.compare tbody tr{border-top:1px solid var(--rule)}
  .art-body table.compare tbody tr:nth-child(even){background:var(--band)}
  .art-body table.compare tbody th{font:600 15px/1.5 var(--f-body)}
  .art-body table.compare tbody td{font-size:15px}
  .art-body table.compare tbody td::before{content:none}
  .art-list{gap:10px;margin:8px 0 24px}
  .art-list li{grid-template-columns:28px minmax(0,1fr);padding:16px 18px;font-size:17px}
  .art-list .n{font-size:13px}
  .weekline-panel{margin:8px 0 28px;padding:28px 36px}
  .wk-label{font-size:12px}
  .ticks{height:48px}
  .ticks span::before{height:20px}
  .art-related{margin-top:40px}
  .art-related .label{margin-bottom:18px}
  .art-related a{padding:18px 44px 18px 20px;font-size:17px}
  .art-related a::after{right:20px;font-size:16px}
  .art-cta{grid-template-columns:64px minmax(0,1fr);gap:20px;margin-top:40px;padding:28px}
  .art-cta img{width:64px;height:64px}
  .art-cta p{font-size:18px}
  .art-sources{margin-top:56px;padding-top:28px}
  .art-sources .label{margin-bottom:18px}
  .sources{gap:12px}
  .sources li{grid-template-columns:28px minmax(0,1fr);font-size:14px}
  .sources li::before{font-size:12px}
  .pg-article .closing-band,.pg-insights .closing-band{padding-block:96px}
}
@media (max-width:359px){.art-head h1{font-size:30px}.art-body h2{font-size:22px}}

/* ==========================================================================
   Second batch, B3: the three question pages. Mockups 8a to 8c (desktop 1280), 21a to 23b
   (phone 390, iPad 834); handover 02 "Question page layout", 06. One layout for every question
   page (body class pg-qpage). Type sizes are the mockups' (tablet and desktop keep them); full
   sentences are at least 16px on phones (CRO answer 3). Reused from B2: .art-toc ("On this
   page" box), .art-list (numbered rows), .art-sources and .sources.
   ========================================================================== */

/* ---------- Question pages: header (trail and date, H1, the answer) ---------- */
.q-head .inner{padding-top:40px}
/* "Questions / Updated [date]": the trail link keeps a 44px tap area; the negative margins keep
   the line where the mockups draw it. The slash is drawn on desktop only (8a to 8c). */
.q-meta{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;min-height:44px;margin:-16.5px 0 1.5px;font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.q-meta .trail{margin:0;font:inherit;letter-spacing:inherit}
.q-meta .trail a{color:var(--indigo);text-decoration-color:var(--indigo-muted)}
.q-meta .trail a:hover{color:var(--ink)}
.q-slash{display:none;color:var(--indigo-muted)}
.q-meta .page-date{color:var(--ink-3)}
.q-head h1{margin-bottom:26px;font-size:32px;line-height:1.04;letter-spacing:-.025em}
.q-answer{position:relative;padding:24px 22px;background:var(--indigo-deep);color:var(--white);border-radius:var(--r-band);overflow:hidden}
.q-answer .label{margin-bottom:12px;color:var(--sage)}
.q-answer p:not(.label){font-size:17px;line-height:1.55}

/* ---------- Question pages: contents box, sections, table ---------- */
.q-main .inner{padding-bottom:56px}
.q-body{padding-top:12px}
.q-body h2{margin:40px 0 14px;font-size:23px;line-height:1.18;letter-spacing:-.01em}
.q-body>p{margin-bottom:16px;font-size:16px;line-height:1.7;color:var(--ink-body);text-wrap:pretty}
/* The options table: cards below 1200 (the option is the card title, each other column a
   labelled line from build.py's data-label); the Foydy row in indigo at every width. */
.q-table{margin:10px 0 24px}
.q-table table,.q-table tbody,.q-table tr,.q-table th,.q-table td{display:block}
.q-table th,.q-table td{padding:0}
.q-table thead{display:none}
.q-table tbody{display:grid;gap:8px}
.q-table tr{display:grid;gap:10px 20px;padding:16px;background:var(--white);border:1px solid var(--rule);border-radius:var(--r-card);color:var(--ink-body)}
.q-table tbody th{grid-column:1 / -1;font:600 16px/1.35 var(--f-body);text-align:left}
.q-table td{font-size:16px;line-height:1.5}
.q-table td::before{content:attr(data-label);display:block;margin-bottom:4px;font:500 10px/1.3 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.q-table .foydy-row{background:var(--indigo);border-color:var(--indigo);color:var(--white)}
.q-table .foydy-row td::before{color:var(--indigo-muted)}

/* ---------- Question pages: related questions, proof card, buttons, closing ---------- */
.q-related{margin-top:28px}
.q-related .label{margin-bottom:14px}
.q-related ul{display:grid;gap:8px}
.q-related a{position:relative;display:block;min-height:52px;padding:14px 40px 14px 16px;border:1px solid var(--rule);border-radius:var(--r-row);font:600 16px/1.4 var(--f-body);color:var(--indigo);transition:background-color .2s ease}
.q-related a::after{content:"\2192";position:absolute;right:16px;top:50%;transform:translateY(-50%);font:500 15px/1 var(--f-mono)}
.q-related a:hover{background:var(--band);color:var(--indigo)}
/* The small proof card is in the desktop right column only (8a to 8c; 21a to 23b do not draw it). */
.q-proof{display:none}
.q-btns{display:grid;gap:8px;margin-top:20px}
.q-btns .btn{width:100%}
.q-btns .btn-secondary{border-color:var(--rule-2)}
.pg-qpage .closing-band{padding-block:48px}
.pg-qpage .closing-band h2{font-size:28px}
@media (min-width:768px){
  .q-head h1{font-size:46px}
  .q-answer p:not(.label){font-size:20px}
  .q-body,.q-side,.q-btns,.q-main .art-sources{max-width:680px}
  .q-body h2{font-size:28px}
  .q-body>p{font-size:18px}
  .q-table tr{grid-template-columns:1fr 1fr}
  .q-table td{font-size:15px}
  .q-related a{font-size:15px}
  .q-btns{grid-template-columns:1fr 1fr}
  .pg-qpage .closing-band h2{font-size:36px}
}
@media (min-width:1200px){
  .q-head .inner{padding-top:80px}
  .q-meta{margin:-16px 0 12px;font-size:12px}
  .q-slash{display:inline}
  .q-head h1{max-width:960px;margin-bottom:40px;font-size:60px;line-height:1.03;letter-spacing:-.03em}
  /* The answer panel: label column and answer, with the soft indigo glow of 8a to 8c (handover 01 section 7). */
  .q-answer{display:grid;grid-template-columns:120px minmax(0,1fr);gap:24px;padding:44px 48px}
  .q-answer::before{content:"";position:absolute;inset:0;background:radial-gradient(45% 90% at 95% 10%,rgba(142,147,191,.22),rgba(142,147,191,0) 70%)}
  .q-answer>*{position:relative}
  .q-answer .label{margin:0;font-size:12px;line-height:1.9}
  .q-answer p:not(.label){font-size:22px}
  /* Two columns: the sections, buttons and sources at left (760 at most); related questions and
     the proof card at right, from the top. */
  .q-main .inner{display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:80px;align-items:start;padding-block:72px 96px}
  .q-body,.q-btns,.q-main .art-sources{grid-column:1;max-width:760px}
  .q-body{grid-row:1;padding-top:0}
  .q-btns{grid-row:2;display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
  .q-btns .btn{width:auto}
  .q-main .art-sources{grid-row:3}
  .q-side{grid-column:2;grid-row:1 / span 3;display:grid;gap:16px;max-width:none}
  .q-body h2{margin:48px 0 18px;font-size:30px;line-height:1.15;letter-spacing:-.015em}
  .q-body>p{margin-bottom:20px}
  /* As drawn, the last paragraph's space and the buttons' 32px are one gap (margins collapse in 8a). */
  .q-body>:last-child{margin-bottom:0}
  .q-table{margin:8px 0 32px;border:1px solid var(--rule);border-radius:var(--r-card);overflow:hidden}
  .q-table table{display:table;width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0}
  .q-table thead{display:table-header-group}
  .q-table tbody{display:table-row-group}
  .q-table tr{display:table-row;padding:0;background:none;border:0;border-radius:0}
  .q-table th,.q-table td{display:table-cell;padding:16px 18px;border-top:1px solid var(--rule);text-align:left;vertical-align:top;font:400 15px/1.45 var(--f-body)}
  .q-table tbody th{font:600 15px/1.45 var(--f-body)}
  .q-table thead th{padding:14px 18px;border-top:0;border-bottom:1px solid var(--ink);background:var(--band);font:500 11px/1.4 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
  .q-table thead th:nth-child(odd){width:36.11%}
  .q-table td::before{content:none}
  .q-table .foydy-row{background:var(--indigo)}
  .q-table .foydy-row>*{border-top-color:var(--indigo)}
  .q-related{margin:0;padding:24px;background:var(--band);border-radius:var(--r-panel)}
  .q-related .label{margin-bottom:14px;font-size:11px;letter-spacing:.06em}
  .q-related ul{gap:0;border-top:1px solid var(--rule-2)}
  .q-related li{border-bottom:1px solid var(--rule-2)}
  .q-related a{min-height:0;padding:14px 30px 14px 0;border:0;border-radius:0;font-size:15px}
  .q-related a::after{top:14px;right:0;transform:none;font-size:14px;line-height:1.4}
  .q-related a:hover{background:none;color:var(--ink)}
  .q-proof{display:block;padding:24px;border:1px solid var(--rule);border-radius:var(--r-panel)}
  .q-proof-tag{margin-bottom:12px;font:500 11px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
  .q-proof-quote{margin-bottom:16px;font:600 19px/1.25 var(--f-display);color:var(--indigo-deep)}
  .q-proof-bars{display:grid;gap:10px}
  .q-proof .bar-head{margin-bottom:6px;font-size:12px}
  .q-proof .bar{height:6px;border-radius:3px}
  .q-proof .bar>i{border-radius:3px}
  .q-proof .link-arrow{margin:1px 0 -15px;font-size:14px;line-height:1}
  .pg-qpage .closing-band{padding-block:96px}
  .pg-qpage .closing-band h2{font-size:48px}
}
@media (max-width:359px){.q-head h1{font-size:30px}.q-body h2{font-size:22px}}

/* ==========================================================================
   Second batch, B4: For Voices (/voices). Mockups 9a (desktop 1280), 24a (phone 390), 24b
   (iPad 834); handover 01 (the Voices sub-theme: ivory ground, sage band, the --v-* tokens,
   same type and layout system), 02 (forms, choice chips, tick boxes), 04 (forms), 06. Body
   class pg-voices. Type sizes are the mockups' (tablet and desktop keep them); full sentences
   are at least 16px on phones (CRO answer 3). The form reuses batch 1's form parts (.field,
   .field-row, .choices, .choice, .select-wrap, the generic validator in site.js).
   ========================================================================== */

/* ---------- Voices: ground, header, pinned bar, labels, headings ---------- */
.pg-voices{background:var(--v-ground);color:var(--v-ink)}
.pg-voices a:hover{color:var(--v-ink)}
.pg-voices .site-header{border-bottom-color:var(--v-rule)}
.pg-voices .site-header::before{background:rgba(250,245,236,.95)}
.pg-voices .wordmark,.pg-voices .wordmark:hover{color:var(--v-ink)}
.pg-voices .nav-main a{color:var(--v-ink-2)}
.pg-voices .nav-main a:hover,.pg-voices .nav-voices[aria-current]{color:var(--v-ink)}
.pg-voices .nav-voices{border-right-color:var(--v-rule)}
.pg-voices .menu>summary{border-color:var(--v-rule);color:var(--v-ink)}
.pg-voices .menu[open]>summary{border-color:var(--v-ink)}
.pg-voices .pin-cta{background:rgba(250,245,236,.95);border-top-color:var(--v-rule)}
.pg-voices .label{margin-bottom:14px;color:var(--verdant)}
.pg-voices .h2{font-size:28px}
.v-head .h2{margin-bottom:20px}

/* ---------- Voices: hero, with the promises card in place of an app screen (07 S9) ---------- */
.v-hero .inner{display:grid;gap:36px;align-items:center;padding-block:48px 56px}
.v-hero h1{margin-bottom:20px;font-size:44px;line-height:.98;letter-spacing:-.035em}
.v-hero .lead{margin-bottom:26px;font-size:16px;line-height:1.6;color:var(--v-ink-2)}
.v-hero .btn{width:100%}
.v-hero-note{margin-top:14px;font-size:16px;line-height:1.5;color:var(--v-ink-3)}
.v-card-wrap{position:relative;padding:14px 14px 0 0}
.v-card-wrap::before{content:"";position:absolute;top:0;right:0;bottom:14px;left:14px;background:var(--sage);border-radius:16px}
.v-card{position:relative;padding:20px 20px 6px;background:var(--white);border:1px solid var(--v-rule);border-radius:16px;box-shadow:0 20px 48px rgba(31,32,48,.1)}
.v-card-label{display:flex;align-items:center;gap:8px;margin-bottom:12px;font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--verdant)}
.v-card-label img{width:18px;height:18px}
.v-card li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:center;padding:14px 0;border-top:1px solid var(--v-rule);font:600 16px/1.35 var(--f-body)}
.v-tick,.trust-tick{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--verdant);color:var(--white);font:600 14px/1 var(--f-body)}

/* ---------- Voices: how it works (sage band) ---------- */
.v-band{padding-block:56px;background:var(--sage)}
.v-band .h2{margin-bottom:24px}
.v-steps{display:grid;gap:8px}
.v-steps li{display:grid;grid-template-columns:40px minmax(0,1fr);padding:20px;background:var(--v-ground);border-radius:var(--r-panel)}
.v-steps .n{font:600 30px/1 var(--f-display);color:var(--sage-rule)}
.v-steps h3{margin-bottom:6px;font-size:19px;line-height:1.2}
.v-steps p{font-size:16px;line-height:1.55;color:var(--v-ink-2)}
.v-steps li:last-child{background:var(--verdant);color:var(--white)}
.v-steps li:last-child p{color:var(--v-on-verdant)}

/* ---------- Voices: what we promise, who we're looking for ---------- */
.v-promise-sec .inner{padding-top:56px}
.v-promise-sec .h2 span{color:var(--v-ink-3)}
.v-promises{border-top:1.5px solid var(--v-ink)}
.v-promises li{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:12px;padding:16px 0;border-bottom:1px solid var(--v-rule)}
.v-promises .v-tick-sm{grid-row:1 / span 2;font:600 16px/1.4 var(--f-body);color:var(--verdant)}
.v-promises strong{display:block;margin-bottom:4px;font-size:16px;font-weight:600;line-height:1.35}
.v-promises li>span:last-child{font-size:16px;line-height:1.5;color:var(--v-ink-2)}
.v-want .inner{padding-top:56px}
.v-want .h2{margin-bottom:20px}
.v-want-list{display:grid;gap:8px}
.v-want-list li{padding:18px;background:var(--white);border:1px solid var(--v-rule);border-radius:var(--r-card);font:600 16px/1.4 var(--f-body)}
.v-want-note{margin-top:18px;font-size:16px;line-height:1.6;color:var(--v-ink-2)}

/* ---------- Voices: the Join panel and its form ---------- */
.v-join{margin-top:56px}
.v-join .inner{background:var(--white);border:1px solid var(--v-rule);border-radius:var(--r-band);overflow:hidden}
.v-join-head{padding:26px 22px;background:var(--sage)}
.pg-voices .v-join-head .label{margin-bottom:10px}
.pg-voices .v-join-head .h2{margin-bottom:10px;font-size:28px}
.v-join-head p:last-child{font-size:16px;line-height:1.6;color:var(--v-ink-2)}
.v-join-form{padding:22px}
.pg-voices .capture-form{gap:16px}
.pg-voices .field,.pg-voices .field>label{gap:7px}
.pg-voices .field[hidden]{display:none}
/* A column of flex items, so the empty message line's negative margin cancels the gap exactly
   (in a grid an empty row keeps its gap). */
.pg-voices .field:not(fieldset){display:flex;flex-direction:column}
.pg-voices .field-label{font-size:14px;color:var(--v-ink)}
.pg-voices .field-label .opt{color:var(--v-hint)}
.pg-voices .field input:not([type="checkbox"]),.pg-voices .field select{border-color:var(--v-field-rule);background:var(--v-field);color:var(--v-ink);font-size:16px}
.pg-voices .field-error:empty{margin-top:-7px}
.pg-voices .select-wrap::after{color:var(--v-hint)}
/* Interests: tick-box chips (02: verdant on sage tint with a tick box). The tick box is drawn;
   the real checkbox covers the chip, invisible, as on Walkthrough's category chips. */
.pg-voices .choices{display:block}
.pg-voices .choices legend{margin-bottom:9px}
.pg-voices .choice{gap:8px;padding:0 14px;border-color:var(--v-field-rule);background:transparent;color:var(--v-ink);font-size:16px}
.pg-voices .choice input{min-height:0;padding:0;border:0}
.pg-voices .choices .choice::before{display:none}
.choice-tick .box{flex:none;display:grid;place-items:center;width:15px;height:15px;border:1.5px solid var(--v-field-rule);border-radius:4px;font:600 10px/1 var(--f-body);color:var(--white)}
.pg-voices .choice-tick:has(input:checked){border-color:var(--verdant);background:var(--sage-tint);color:var(--v-ink)}
.choice-tick:has(input:checked) .box{border-color:var(--verdant);background:var(--verdant)}
.choice-tick:has(input:checked) .box::before{content:"\2713"}
/* The two required tick boxes: 22px, verdant when ticked, in a 44px row; message indented 36px. */
.v-ticks{display:grid;gap:8px;padding-top:4px}
.pg-voices .tick-field{gap:6px}
.pg-voices .tick-field .field-error{padding-left:36px}
.pg-voices .tick-field .field-error:empty{margin-top:-6px}
.tick-row{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;min-height:44px;padding-top:2px;font-size:16px;line-height:1.5;cursor:pointer}
.pg-voices .tick-row input[type="checkbox"]{appearance:none;-webkit-appearance:none;display:grid;place-items:center;width:22px;height:22px;min-height:0;margin:0;padding:0;border:1.5px solid var(--sage-rule);border-radius:5px;background:var(--v-field);cursor:pointer;transition:background-color .15s ease,border-color .15s ease}
.pg-voices .tick-row input[type="checkbox"]::before{content:"";font:600 13px/1 var(--f-body);color:var(--white)}
.pg-voices .tick-row input[type="checkbox"]:checked{border-color:var(--verdant);background:var(--verdant)}
.pg-voices .tick-row input[type="checkbox"]:checked::before{content:"\2713"}
.pg-voices .tick-row input[type="checkbox"]:focus{border-radius:5px}
.tick-row a{font-weight:600}
.tick-row .req{color:var(--error)}
.pg-voices .capture-form>.btn{width:100%;margin-top:4px}

/* ---------- Voices: quick questions (native disclosures, the first open with JavaScript) ---------- */
.v-faq .inner{padding-block:56px 40px}
.pg-voices .faq details{background:var(--v-field);border-color:var(--v-rule)}
.pg-voices .faq details[open]{background:var(--sage-tint-2);border-color:var(--sage-rule)}
.pg-voices .faq summary::after{color:var(--verdant)}
.pg-voices .faq .faq-a p{color:var(--v-ink-2)}

/* ---------- Voices: footer (ivory, a hairline above it, as in 9a and 24a) ---------- */
.pg-voices .site-footer{padding-top:0;color:var(--v-ink-3)}
.pg-voices .site-footer .inner{padding-top:20px;border-top:1px solid var(--v-rule)}
.pg-voices .foot-nav a{color:var(--v-ink-3)}
.pg-voices .foot-nav a:hover,.pg-voices .foot-nav a[aria-current]{color:var(--v-ink)}

@media (min-width:768px){
  .pg-voices .h2{font-size:34px}
  .v-hero .inner{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
  .v-hero h1{font-size:64px}
  .v-hero .lead{font-size:18px}
  .v-hero .btn{width:auto;padding:0 24px}
  .v-hero-note{font-size:14px}
  .v-steps{grid-template-columns:1fr 1fr}
  .v-steps p{font-size:15px}
  .v-promises li>span:last-child{font-size:15px}
  .v-want-list{grid-template-columns:1fr 1fr}
  .v-want-note{font-size:15px}
  .v-join-head p:last-child{font-size:15px}
  .pg-voices .choice{font-size:15px}
  .tick-row{font-size:15px}
  .v-faq .inner{padding-bottom:40px}
}
@media (min-width:1200px){
  .pg-voices .label{margin-bottom:18px}
  .pg-voices .h2{font-size:40px}
  .v-head .h2{margin-bottom:0}
  .v-hero .inner{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:64px;padding-block:96px 112px}
  .v-hero h1{margin-bottom:28px;font-size:80px}
  .v-hero .lead{max-width:540px;margin-bottom:36px;font-size:20px}
  .v-hero .btn{padding:0 26px;font-size:17px}
  .v-hero-note{margin-top:18px;font-size:15px}
  .v-card-wrap{justify-self:end;width:400px;padding:20px 20px 0 0}
  .v-card-wrap::before{bottom:20px;left:20px;border-radius:18px}
  .v-card{padding:28px 28px 10px;border-radius:18px;box-shadow:0 2px 8px rgba(31,32,48,.08),0 24px 56px rgba(31,32,48,.1)}
  .v-card-label{gap:10px;margin-bottom:18px;font-size:12px}
  .v-card-label img{width:22px;height:22px}
  .v-card li{grid-template-columns:36px minmax(0,1fr);gap:14px;padding:18px 0;font-size:19px}
  .v-tick,.trust-tick{width:36px;height:36px;font-size:16px}
  .trust-tick{margin-top:-6px}
  .v-band{padding-block:104px}
  .v-band .h2{margin-bottom:44px}
  .v-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .v-steps li{display:block;padding:28px}
  .v-steps .n{display:block;margin-bottom:24px;font-size:56px}
  .v-steps h3{margin-bottom:10px;font-size:22px}
  .v-steps p{font-size:17px}
  .v-promise-sec .inner{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:64px;padding-top:112px}
  .v-promises li{grid-template-columns:36px minmax(0,2fr) minmax(0,3fr);column-gap:20px;align-items:baseline;padding:22px 0}
  .v-promises .v-tick-sm{grid-row:auto;font-size:18px;line-height:1}
  .v-promises strong{margin-bottom:0;font-size:19px;line-height:1.3}
  .v-promises li>span:last-child{font-size:17px;line-height:1.55}
  .v-want .inner{padding-top:112px}
  .v-want .h2{margin-bottom:40px}
  .v-want-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .v-want-list li{padding:28px;border-radius:var(--r-panel);font-size:19px}
  .v-want-note{max-width:820px;margin-top:28px;font-size:18px}
  .v-join{margin-top:112px}
  .v-join .inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);border-radius:16px}
  .v-join-head{display:flex;flex-direction:column;gap:18px;padding:48px}
  .pg-voices .v-join-head .label,.pg-voices .v-join-head .h2{margin-bottom:0}
  .pg-voices .v-join-head .h2{font-size:40px}
  .v-join-head p:last-child{font-size:18px}
  .v-join-form{padding:48px}
  .pg-voices .capture-form{gap:20px}
  .pg-voices .field,.pg-voices .field>label{gap:8px}
  .pg-voices .field-error:empty{margin-top:-8px}
  .pg-voices .field-label{font-size:15px}
  .pg-voices .field input:not([type="checkbox"]),.pg-voices .field select{font-size:17px}
  .pg-voices .choices legend{margin-bottom:10px}
  .pg-voices .chips-row{gap:8px}
  .pg-voices .choice{padding:0 16px;background:var(--v-field);font-size:16px}
  .choice-tick .box{width:16px;height:16px;background:var(--white);font-size:11px}
  .tick-row{font-size:16px}
  .pg-voices .capture-form>.btn{font-size:17px}
  .v-faq .inner{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:64px;align-items:start;padding-block:112px}
  .pg-voices .site-footer{padding-block:40px;background:var(--v-ground);border-top:1px solid var(--v-rule);color:var(--v-ink-3)}
  .pg-voices .site-footer .inner{padding-top:0;border-top:0}
  .pg-voices .site-footer .wordmark{color:var(--v-ink)}
  .pg-voices .foot-legal{color:var(--v-ink-3)}
}
@media (max-width:359px){.v-hero h1{font-size:34px}.pg-voices .h2,.pg-voices .v-join-head .h2{font-size:26px}}

/* ==========================================================================
   Second batch, B5: About, AI info, Privacy, 404. Mockups 5c, 10a to 10c (desktop 1280), 13a,
   25a to 25c (phone 390), 13b, 25d to 25f (iPad 834); handover 02, 05 (heading levels; the 404
   hundred is decorative), 06. Body classes pg-about, pg-ai, pg-privacy, pg-404. Type sizes are
   the mockups' (tablet and desktop keep them); full sentences are at least 16px on phones (CRO
   answer 3).
   ========================================================================== */

/* ---------- Shared: a full-width hairline above the footer (10a to 10c, 25a to 25f) ---------- */
.foot-line .site-footer{border-top:1px solid var(--rule)}

/* ---------- About: hero and "Why Foydy exists" ---------- */
.pg-about .page-hero h1{font-size:44px;line-height:.98;letter-spacing:-.035em}
.pg-about .label{margin-bottom:14px}
.pg-about .h2{font-size:28px}
.ab-why .inner{padding-top:64px}
.ab-head .h2{margin-bottom:18px}
.ab-why-body>p{font-size:16px;line-height:1.65;color:var(--ink-body)}
.pull-pair.ab-pull{gap:12px;margin:28px 0 20px}
.ab-pull p{font-size:24px;line-height:1.1;padding-bottom:12px}

/* ---------- About: the founder (grey band; the 4:5 portrait with its caption) ---------- */
.ab-founder{margin-top:64px;background:var(--band);border-block:1px solid var(--rule)}
.ab-founder .inner{display:grid;gap:32px;align-items:center;padding-block:56px}
.ab-photo{position:relative}
.ab-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-band);box-shadow:0 20px 48px rgba(21,22,58,.14)}
.ab-photo figcaption{position:absolute;left:14px;bottom:14px;max-width:calc(100% - 28px);padding:10px 12px;border-radius:var(--r-row);background:rgba(255,255,255,.92);font:500 10px/1.3 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-body)}
.ab-founder-text .h2{margin-bottom:16px}
.ab-founder-text>p:not(.label){margin-bottom:14px;font-size:16px;line-height:1.65;color:var(--ink-body)}
.ab-founder-text>p.ab-reply{margin-bottom:20px;font-weight:600;line-height:1.6;color:var(--ink)}
/* Arrow rows (CRO answer 2: arrow links may go without an underline); the arrow nudges 3px on hover (03 #9). */
.ab-links{border-top:1px solid var(--rule-2)}
.ab-links a{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;padding-block:12px;border-bottom:1px solid var(--rule-2);font:600 16px/1.4 var(--f-body);color:var(--indigo);text-decoration:none}
.ab-links a:hover{color:var(--ink)}
/* Below 1200 the mockups size these rows in content-box: 56px plus the first row's 12px padding. */
@media (max-width:1199px){.ab-links a{box-sizing:content-box}.ab-links li+li a{padding-block:0}}
.ab-arrow{flex:none;font:500 16px/1 var(--f-mono);transition:transform .2s ease}
.ab-links a:hover .ab-arrow{transform:translateX(3px)}

/* ---------- About: "We are a startup" and "The company" panels ---------- */
.ab-panels .inner{display:grid;gap:10px;padding-block:56px}
.ab-honest,.ab-company{display:grid;align-content:start;gap:12px;padding:26px;border-radius:var(--r-panel)}
.ab-honest{background:var(--indigo-deep);color:var(--white)}
.ab-company{border:1px solid var(--rule)}
.pg-about .ab-panels .label{margin:0}
.ab-honest .label{color:var(--indigo-muted)}
.ab-panels h2{font-size:24px;line-height:1.15;letter-spacing:-.02em}
.ab-panels p:not(.label){font-size:16px;line-height:1.6}
.ab-honest p:not(.label){color:var(--indigo-muted)}
.ab-company p:not(.label){color:var(--ink-2)}
.ab-company a{font-weight:600}

/* ---------- AI info: the facts as a two-column table (handover 06) ---------- */
.ai-page .inner{padding-block:44px 56px}
.ai-head h1{margin-bottom:16px;font-size:34px;line-height:1.04;letter-spacing:-.025em}
.ai-head .lead{margin-bottom:28px;font-size:16px;line-height:1.6}
.ai-facts{border-top:1.5px solid var(--ink)}
.ai-row{display:grid;gap:8px 28px;padding-block:18px;border-bottom:1px solid var(--rule)}
.ai-row h2{font-size:17px;line-height:1.35}
.ai-row p{font-size:16px;line-height:1.65;color:var(--ink-body)}

/* ---------- Privacy ---------- */
.pv-page .inner{display:grid;gap:32px;padding-block:44px 56px}
.pv-head{display:grid;gap:32px}
.pv-head h1{font-size:44px;line-height:1;letter-spacing:-.03em}
.pv-note{padding:20px;border-radius:var(--r-card);background:var(--indigo-pale);color:var(--indigo-deep)}
.pv-note h2{margin-bottom:8px;font-size:19px;line-height:1.2}
.pv-note p{font-size:16px;line-height:1.55}
.pv-body{display:grid;gap:32px}
.pv-body h2{margin-bottom:10px;font-size:21px;line-height:1.2}
.pv-body section p{font-size:16px;line-height:1.7;color:var(--ink-body)}
.pv-body section p+p{margin-top:10px}
.pv-body a{font-weight:600}
.pv-panel{padding:18px;border:1px solid var(--sage);border-radius:var(--r-card);background:var(--sage-tint-2)}
.pv-last{padding-top:16px;border-top:1px solid var(--rule);font:500 12px/1.5 var(--f-mono);color:var(--ink-3)}

/* ---------- 404 (the hundred with one dot missing is decorative, aria-hidden) ---------- */
.nf{position:relative;overflow:hidden}
.nf::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 50% at 70% 70%,rgba(50,53,107,.1),rgba(50,53,107,0) 70%)}
.nf .inner{position:relative;display:flex;flex-direction:column;padding-block:80px 88px}
.nf .nf-hundred{order:-1;width:150px;gap:4px;margin-bottom:36px}
.nf .nf-code{margin-bottom:20px;font-size:12px}
.nf h1{margin-bottom:20px;font-size:44px;line-height:.98;letter-spacing:-.035em}
.nf .lead{margin-bottom:28px;font-size:16px;line-height:1.6}
.nf-btns{display:grid;gap:10px}
.nf-btns .btn{width:100%}
.nf-btns .btn-secondary{border-color:var(--rule-2)}

@media (min-width:768px){
  .pg-about .page-hero h1{font-size:64px}
  .pg-about .h2{font-size:34px}
  .ab-why-body>p{font-size:18px}
  .pull-pair.ab-pull{grid-template-columns:1fr 1fr;gap:12px 4px;margin:28px 0 20px}
  .ab-pull p{font-size:24px;padding-bottom:12px}
  .ab-founder .inner{grid-template-columns:300px minmax(0,1fr)}
  .ab-links a{font-size:15px}
  .ab-arrow{font-size:15px}
  .ab-panels .inner{grid-template-columns:1fr 1fr}
  .ab-panels p:not(.label){font-size:15px}
  .ai-head h1{font-size:48px}
  .ai-row{grid-template-columns:200px minmax(0,1fr)}
  .ai-row p{font-size:15px}
  .pv-head h1{font-size:64px}
  .pv-note p{font-size:15px}
  .nf h1{font-size:64px}
  .nf .lead{font-size:18px}
  .nf-btns{grid-template-columns:1fr 1fr}
}
@media (min-width:1200px){
  .pg-about .page-hero h1{font-size:80px}
  .pg-about .label{margin-bottom:18px}
  .pg-about .h2{font-size:40px}
  .ab-why .inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;padding-top:112px}
  .ab-head .h2{margin-bottom:0}
  .ab-why-body>p{font-size:19px}
  .pull-pair.ab-pull{gap:4px;margin:40px 0 24px}
  .ab-pull p{font-size:30px;padding-bottom:20px;border-bottom-width:6px;letter-spacing:-.02em}
  .ab-founder{margin-top:120px}
  .ab-founder .inner{grid-template-columns:420px minmax(0,1fr);gap:72px;padding-block:104px}
  .ab-photo img{box-shadow:0 1px 2px rgba(15,17,23,.05),0 24px 56px rgba(21,22,58,.16)}
  .ab-photo figcaption{left:20px;bottom:20px;padding:12px 14px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .ab-cap-name{display:block;font:600 16px/1.2 var(--f-body);letter-spacing:0;text-transform:none;color:var(--ink)}
  .ab-cap-sep{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .ab-cap-role{display:block;margin-top:6px;font-size:11px;line-height:1;color:var(--ink-2)}
  .ab-founder-text .h2{margin-bottom:24px}
  .ab-founder-text>p:not(.label){margin-bottom:20px;font-size:19px}
  .ab-founder-text>p.ab-reply{margin-bottom:32px}
  .ab-links a{min-height:0;padding-block:18px;font-size:17px}
  .ab-arrow{font-size:16px}
  .ab-panels .inner{gap:16px;padding-block:112px}
  .ab-honest,.ab-company{gap:20px;padding:48px;border-radius:var(--r-band)}
  .ab-panels h2{font-size:34px;line-height:1.1}
  .ab-panels p:not(.label){font-size:18px}
  .ai-page .inner{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:64px;align-items:start;padding-block:88px 112px}
  .ai-head h1{margin-bottom:24px;font-size:56px;line-height:1.02;letter-spacing:-.03em}
  .ai-head .lead{margin-bottom:0;font-size:18px}
  .ai-row{grid-template-columns:220px minmax(0,1fr);gap:32px;padding-block:24px}
  .ai-row h2{font-size:18px}
  .ai-row p{font-size:17px}
  .pv-page .inner{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:64px;align-items:start;padding-block:88px 112px}
  .pv-head{gap:28px}
  .pv-note{padding:24px 26px}
  .pv-note h2{margin-bottom:10px;font-size:20px}
  .pv-note p{font-size:17px}
  .pv-body{gap:44px;max-width:720px}
  .pv-body h2{margin-bottom:12px;font-size:26px;line-height:1.15;letter-spacing:-.01em}
  .pv-body section p{font-size:18px}
  .pv-body section p+p{margin-top:12px}
  .pv-body section:nth-child(-n+2) p:last-child{margin-bottom:12px}
  .pv-panel{padding:24px 26px}
  .pv-last{padding-top:20px;font-size:13px}
  .nf::before{background:radial-gradient(40% 70% at 75% 50%,rgba(50,53,107,.1),rgba(50,53,107,0) 70%)}
  .nf .inner{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:64px;align-items:center;padding-block:160px 180px}
  .nf .nf-hundred{order:0;justify-self:end;width:240px;max-width:none;gap:6px;margin:0}
  .nf .nf-code{margin-bottom:28px;font-size:13px}
  .nf h1{margin-bottom:28px;font-size:80px}
  .nf .lead{max-width:600px;margin-bottom:36px;font-size:21px}
  .nf-btns{display:flex;gap:12px}
  .nf-btns .btn{width:auto}
  .nf-btns .btn-primary{padding:0 22px}
}
@media (max-width:359px){
  .pg-about .page-hero h1,.pv-head h1,.nf h1{font-size:34px}
  .pg-about .h2{font-size:26px}
  .ai-head h1{font-size:30px}
}

/* ---------- Motion (03-motion.md). Enhancement only. ---------- */
@media (prefers-reduced-motion:no-preference){
  .js [data-reveal]{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease-soft),transform .5s var(--ease-soft)}
  .js .proof-quote[data-reveal]{transition-duration:.6s}
  .js [data-reveal].is-in{opacity:1;transform:none}
  .js [data-grow] .bar>i{transform:scaleX(0);transition:transform 1.1s var(--ease-soft)}
  .js [data-grow].is-in .bar>i{transform:scaleX(var(--v))}
  .js .proof-bars[data-grow].is-in .bar-row:nth-child(2) .bar>i{transition-delay:.12s}
  .js .crit[data-grow] .bar>i{transition-duration:1s}
  .js .crit[data-grow].is-in li:nth-child(2) .bar>i{transition-delay:.12s}
  .js .crit[data-grow].is-in li:nth-child(3) .bar>i{transition-delay:.24s}
  .js .crit[data-grow].is-in li:nth-child(4) .bar>i{transition-delay:.36s}
  .js .crit[data-grow].is-in li:nth-child(5) .bar>i{transition-delay:.48s}
  .hundred i::after{transition:opacity .2s ease}
}
@media (prefers-reduced-motion:reduce){
  .link-arrow::after,.ab-arrow,.pin-cta,.pin-cta.is-on{transition:none}
}