/* ===== KinArv theme plumbing ===== */
:root{
 /* Green — dark teal-green ground with a lime accent. */
 --colors--light-100:#e4e8de;--colors--light-200:#c2cbba;--colors--light-300:#808f84;
 --colors--green:#0f2424;--colors--light-bg:#edf1e6;
 --k-bg-1:#1b3c39;--k-bg-2:#163030;--k-nav:rgba(22,48,48,.35);
 --k-panel:#eef5d3;--k-ink:#0f2424;--k-ink-muted:#7d8a63;--k-panel-shadow:rgba(5,18,18,.35);
 --k-chip:#274a45;--k-tint:rgba(230,248,167,.1);--k-tint-strong:rgba(230,248,167,.16);
 --k-ghost-border:#3a5751;--k-ghost-hover:rgba(230,248,167,.12);--k-btn2:rgba(228,234,216,.08);
 --k-track:rgba(228,234,216,.16);--k-hairline:rgba(228,234,216,.22);
 --k-ink-hairline:rgba(15,36,36,.18);--k-ink-track:rgba(15,36,36,.16);
 --k-accent:#e6f8a7;--k-accent-ink:#0f2424;
}
/* Other themes keep their own light tone as the primary-button fill. */
html[data-theme]{--k-accent:var(--colors--light-100);--k-accent-ink:var(--colors--green)}
html[data-theme=blue]{
 --colors--light-100:#dfe9f2;--colors--light-200:#c6d6e4;--colors--light-300:#8299ad;--colors--green:#24486b;--colors--light-bg:#eaf0f5;
 --k-bg-1:#24486b;--k-bg-2:#1e3450;--k-nav:rgba(36,72,107,.25);
 --k-panel:#e7eef5;--k-ink:#1f4265;--k-ink-muted:#7f93a6;--k-panel-shadow:rgba(15,28,42,.3);
 --k-chip:#2b4c6b;--k-tint:rgba(88,128,168,.14);--k-tint-strong:rgba(88,128,168,.24);
 --k-ghost-border:#3d5a76;--k-ghost-hover:rgba(223,233,242,.12);--k-btn2:rgba(223,233,242,.08);
 --k-track:rgba(223,233,242,.16);--k-hairline:rgba(223,233,242,.25);
 --k-ink-hairline:rgba(31,66,101,.18);--k-ink-track:rgba(31,66,101,.16);
}
html[data-theme=noir]{
 --colors--light-100:#eee3c9;--colors--light-200:#dccfae;--colors--light-300:#9d9179;--colors--green:#2b2723;--colors--light-bg:#f2ede1;
 --k-bg-1:#2b2723;--k-bg-2:#211e1a;--k-nav:rgba(43,39,35,.35);
 --k-panel:#f0e9d8;--k-ink:#3b3226;--k-ink-muted:#988c72;--k-panel-shadow:rgba(18,15,11,.35);
 --k-chip:#453a2b;--k-tint:rgba(150,130,95,.14);--k-tint-strong:rgba(150,130,95,.24);
 --k-ghost-border:#5a4f3c;--k-ghost-hover:rgba(238,227,201,.12);--k-btn2:rgba(238,227,201,.08);
 --k-track:rgba(238,227,201,.16);--k-hairline:rgba(238,227,201,.25);
 --k-ink-hairline:rgba(59,50,38,.18);--k-ink-track:rgba(59,50,38,.16);
}
html[data-theme=light]{
 --colors--light-100:#20402a;--colors--light-200:#3c5a44;--colors--light-300:#87927b;--colors--green:#eef2e4;--colors--light-bg:#20402a;
 --k-bg-1:#f7f6f1;--k-bg-2:#eeede5;--k-nav:rgba(247,246,241,.72);
 --k-panel:#edf1d8;--k-ink:#24512c;--k-ink-muted:#8a9370;--k-panel-shadow:rgba(32,64,42,.14);
 --k-chip:#2d5636;--k-chip-text:#eef2e4;--k-tint:rgba(84,137,93,.1);--k-tint-strong:rgba(84,137,93,.16);
 --k-ghost-border:#ccd3bf;--k-ghost-hover:rgba(42,93,51,.08);--k-btn2:rgba(42,93,51,.06);
 --k-track:rgba(42,93,51,.14);--k-hairline:rgba(42,93,51,.22);
 --k-ink-hairline:rgba(42,93,51,.18);--k-ink-track:rgba(42,93,51,.16);
}
html[data-theme=light] .noise-bg{opacity:.45}
html[data-theme=light] .logo-wrapper.nav-logo svg.kinarv-lockup,
html[data-theme=light] .navbar{text-shadow:none}
html[data-theme=light] .logo-wrapper.nav-logo svg{filter:none}
html[data-theme=light] .v3-swatch[data-theme-set=light]{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}

html{background-image:linear-gradient(268deg,var(--k-bg-1) 4.2%,var(--k-bg-2) 98.63%);background-color:var(--k-bg-1)}
body{background-image:linear-gradient(268deg,var(--k-bg-1) 4.2%,var(--k-bg-2) 98.63%)}
.navbar{background-color:var(--k-nav)}
.banner{background:var(--k-tint-strong)}
.button-wrapper .button--primary{background-color:var(--k-accent);color:var(--k-accent-ink)}
.button-wrapper--primary{border-color:var(--k-accent)}
.button-wrapper--secondary{border-color:var(--k-ghost-border)}
.button-wrapper .button--secondary{background-color:var(--k-btn2);color:var(--colors--light-100)}
.button-wrapper .button--secondary:hover{background-color:var(--k-ghost-hover)}
.draw-stage-ilu .line,.draw-stage-ilu .marker{stroke:var(--colors--light-300)}
.draw-stage-ilu .marker{fill:var(--colors--light-300)}
/* Footer illustration: the cascading records, drawn in currentColor so every theme
   carries it. Overall presence is this one opacity, not baked into the art. */
.footer .footer-ilu-bg{color:var(--colors--light-300);opacity:.7}
html,body,.navbar,.specimen-card,.axis-panel{transition:background-color .35s ease}
.nav-mobile-menu:before,.nav-mobile-menu.is-open:before{background-image:linear-gradient(268deg,var(--k-bg-1) 4.2%,var(--k-bg-2) 98.63%)}
.learn-more-icon,.faq-list-wrapper .faq-list-item .faq-icon,.products-ilu-wrapper,.cookie-consent{background:var(--k-tint-strong)}
.faq-list-wrapper .faq-list-item:hover .faq-icon{background-color:var(--k-tint-strong)}
.radial-gradient{background:radial-gradient(75.88% 59.69% at 50% 111.69%,var(--k-track) 0,transparent 100%)}
.products-content-columns .products-tabs{border-color:var(--k-hairline)}

/* KinArv brand customisations for the v3 hero */

/* navbar logo: full KinArv lockup */
.logo-wrapper.nav-logo svg.kinarv-lockup{width:auto;height:30px;color:var(--colors--light-100)}

/* nav ghost links: Sign In style, transparent by default, background on hover */
.navbar .nav-links .nav-ghost-group{display:flex;gap:8px;padding-right:12px}
.nav-ghost{border-color:transparent}
.nav-ghost .button--secondary{background-color:transparent;transition:background-color .2s ease}
.nav-ghost:hover{border-color:var(--k-ghost-border)}
.nav-ghost .button--secondary:hover{background-color:var(--k-ghost-hover);border-radius:3px}

/* hero CTA row (replaces email form + AI summary) */
.hero-cta-row{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.hero-etymology{margin-top:20px;font-style:italic}

/* specimen card — v3 product-screen language: cream panel, green ink, offset shadow */
.hero-specimen{position:relative;width:100%;max-width:460px;margin:72px 32px}
.specimen-card{box-sizing:border-box;background:var(--k-panel);border-radius:16px;padding:30px 30px 26px;color:var(--k-ink);box-shadow:16px 16px 0 var(--k-panel-shadow)}
.specimen-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:20px;border-bottom:1px solid var(--k-ink-hairline)}
.specimen-brand{display:flex;align-items:center;gap:12px}
.specimen-brand svg.kinarv-monogram{width:26px;height:auto;color:var(--k-ink);flex-shrink:0}
.specimen-name{font-family:var(--fonts-family--font-family-primary);font-weight:500;font-size:18px;color:var(--k-ink);line-height:1.2}
.specimen-sub{font-size:9px;color:var(--k-ink-muted);letter-spacing:.1em;margin-top:4px}
.specimen-meta{font-size:10px;color:var(--k-ink-muted);text-align:right;line-height:2;display:flex;flex-direction:column}
.specimen-redact{display:inline-block;width:78px;height:10px;background:var(--k-ink-track);border-radius:2px;vertical-align:middle;margin-left:4px}
.specimen-composite{display:flex;justify-content:space-between;align-items:baseline;margin-top:20px}
.specimen-label{font-size:10px;color:var(--k-ink-muted);letter-spacing:.1em}
.specimen-num{font-family:var(--fonts-family--font-family-primary);font-weight:500;font-size:58px;line-height:1;color:var(--k-ink)}
.specimen-num span{font-family:var(--fonts-family--font-family-tertiary);font-size:16px;font-weight:400;color:var(--k-ink-muted);margin-left:6px}
.specimen-meter{margin-top:18px}
.specimen-meter-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.specimen-meter-label{font-size:11px;letter-spacing:.1em;color:var(--k-ink)}
.specimen-score{font-family:var(--fonts-family--font-family-tertiary);font-size:14px;color:var(--k-ink)}
.specimen-track{height:6px;background:var(--k-ink-track);border-radius:100px;overflow:hidden}
.specimen-fill{height:100%;background:var(--k-ink);border-radius:100px}
/* From a score to a review (client note, 2026-09-02): a status in words, and three
   positions against families in this range, instead of a figure out of a hundred. */
.specimen-status{font-family:var(--fonts-family--font-family-primary);font-weight:500;font-size:30px;line-height:1.1;letter-spacing:-.5px;color:var(--k-ink);text-align:right}
.specimen-score{font-family:var(--fonts-family--font-family-tertiary);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--k-ink)}
.specimen-track--pos{position:relative;background:transparent;overflow:visible;display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px}
.specimen-track--pos i{background:var(--k-ink-track);border-radius:100px}
.specimen-track--pos b{position:absolute;top:-3px;width:12px;height:12px;border-radius:50%;background:var(--k-ink);transform:translateX(-50%)}
.specimen-note{margin-top:24px;padding-top:18px;border-top:1px solid var(--k-ink-hairline);font-size:13px;line-height:1.6;color:var(--k-ink-muted)}
.specimen-note span{color:var(--k-ink)}
@media (max-width:900px){
  .hero-specimen{margin:48px 20px;max-width:420px}
  .specimen-card{padding:24px 22px 20px;box-shadow:10px 10px 0 var(--k-panel-shadow)}
  .specimen-status{font-size:24px}
}
.specimen-meta span{white-space:nowrap}
@media (max-width:480px){.specimen-sub{letter-spacing:.06em}.specimen-meta{font-size:9px}}

/* stages section reworked as "the bench" (six professionals) */
.stage-ilu-bg .stage-text.stage-text-6{max-width:none;bottom:71%;left:84%}
.stage-emph{color:var(--colors--light-100)}

/* "Why it matters now" stat ledger band */
.stat-band-section .container{padding-bottom:60px}
.stat-band-head{flex-flow:row;justify-content:space-between;align-items:flex-end;gap:48px;flex-wrap:wrap;padding-bottom:56px}
.stat-band-title{max-width:15ch}
.stat-band-intro{max-width:46ch;margin:0}
.stat-band{display:grid;grid-template-columns:repeat(3,1fr);border-top:var(--border-line-width) solid var(--colors--light-300);border-bottom:var(--border-line-width) solid var(--colors--light-300)}
.stat-band.with-padding{margin:0 30px}
.stat-cell{display:flex;flex-direction:column;gap:14px;padding:36px 32px 30px}
.stat-cell+.stat-cell{border-left:var(--border-line-width) solid var(--colors--light-300)}
.stat-num{font-family:var(--fonts-family--font-family-primary);font-weight:500;font-size:56px;line-height:1;color:var(--colors--light-100);letter-spacing:-1px}
.stat-desc{margin:0}
.stat-source{font-size:11px;letter-spacing:.1em;color:var(--colors--light-300);margin-top:auto;padding-top:8px}
@media (max-width:991px){
  .stat-band.with-padding{margin:0 10px}
  .stat-band{grid-template-columns:1fr}
  .stat-cell+.stat-cell{border-left:none;border-top:var(--border-line-width) solid var(--colors--light-300)}
  .stat-cell{padding:28px 16px 24px}
  .stat-num{font-size:44px}
  .stat-band-head{padding-bottom:36px}
}

/* The Arv Review section (kinarv-in-action layout) */
.axis-panel{box-sizing:border-box;background:var(--k-panel);border-radius:16px;padding:26px 26px 22px;color:var(--k-ink);box-shadow:14px 14px 0 var(--k-panel-shadow);width:100%;max-width:400px;display:flex;flex-direction:column;gap:14px;margin:auto}
.axis-panel-head{display:flex;justify-content:space-between;align-items:baseline}
.axis-panel-label{font-size:11px;letter-spacing:.1em;color:var(--k-ink)}
.axis-panel-ref{font-size:10px;color:var(--k-ink-muted)}
.axis-panel-score{font-family:var(--fonts-family--font-family-primary);font-weight:500;font-size:56px;line-height:1;color:var(--k-ink)}
.axis-panel-score span{font-family:var(--fonts-family--font-family-tertiary);font-size:16px;font-weight:400;color:var(--k-ink-muted);margin-left:6px}
.axis-panel-foot{font-size:9px;letter-spacing:.1em;color:var(--k-ink-muted);margin-top:4px}
@media (max-width:767px){.axis-panel{max-width:none;margin:0 0 8px;box-shadow:10px 10px 0 var(--k-panel-shadow)}}

.axes-composite{display:flex;justify-content:space-between;align-items:center;gap:48px;flex-wrap:wrap;border:var(--border-line-width) solid var(--colors--light-300);border-radius:6px;background:var(--k-tint);margin:48px 30px 64px;padding:36px 40px}
.axes-composite-title{font-family:var(--fonts-family--font-family-primary);font-weight:500;font-size:var(--fonts-sizes--text-2xl);letter-spacing:-.4px;color:var(--colors--light-100);margin:0 0 12px;line-height:1.2}
.axes-composite-sub{margin:0;max-width:62ch}
.axes-composite .button-wrapper{flex-shrink:0}
@media (max-width:991px){.axes-composite{margin:0 10px 40px;padding:24px 20px}}

/* the-review spacing + anchor offsets */
#the-review,#questions{scroll-margin-top:100px}
#the-review .kinarv-steps{gap:40px}
#the-review .action-card-content-wrapper .action-card-content{margin-top:24px}
#the-review .action-card-content-wrapper{justify-content:flex-start;gap:0}

/* "Every gap" domain marquee band */
.gap-section .container{padding-bottom:80px}
.gap-head{padding-bottom:48px}
.gap-marquee-band{margin:0 30px;border-top:var(--border-line-width) solid var(--colors--light-300)}
.gap-marquee-row{overflow:hidden;border-bottom:var(--border-line-width) solid var(--colors--light-300);padding:26px 0}
.gap-marquee-track{display:flex;width:max-content;animation:gap-scroll 48s linear infinite}
.gap-marquee-row--reverse .gap-marquee-track{animation-direction:reverse;animation-duration:56s}
.gap-marquee-row:hover .gap-marquee-track{animation-play-state:paused}
.gap-marquee-group{display:flex;gap:72px;padding-right:72px;flex-shrink:0}
.gap-item{display:flex;align-items:baseline;gap:12px;white-space:nowrap}
.gap-num{font-size:11px;color:var(--colors--light-300)}
.gap-label{font-size:15px;letter-spacing:.06em;color:var(--colors--light-100)}
@keyframes gap-scroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.gap-marquee-track{animation:none}}
@media (max-width:991px){.gap-marquee-band{margin:0 10px}.gap-marquee-row{padding:18px 0}.gap-label{font-size:13px}.gap-marquee-group{gap:48px;padding-right:48px}}

/* "The Evidence" interactive guess-the-split section */
.evidence-section .container{padding-bottom:80px}
#evidence,#gaps{scroll-margin-top:100px}
.evidence-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding:0 30px;align-items:start}
.evidence-copy .heading{margin-bottom:28px;max-width:16ch}
.evidence-copy p{margin:0 0 18px;max-width:52ch}
.evidence-panel{border:var(--border-line-width) solid var(--colors--light-300);border-radius:6px;padding:32px 34px 30px}
.evidence-ask-label{font-size:11px;letter-spacing:.1em;color:var(--colors--light-300);margin:0 0 10px}
.evidence-ask-q{margin:0 0 22px;max-width:44ch}
.evidence-slider-row{display:flex;align-items:center;gap:18px;margin-bottom:22px;transition:opacity .4s ease}
.evidence-guess-val{font-size:15px;color:var(--colors--light-100);min-width:48px;text-align:right}
.evidence-slider{-webkit-appearance:none;appearance:none;flex:1;height:24px;background:transparent;cursor:pointer}
.evidence-slider::-webkit-slider-runnable-track{height:4px;border-radius:100px;background:var(--k-track)}
.evidence-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--colors--light-100);margin-top:-6px;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.evidence-slider::-moz-range-track{height:4px;border-radius:100px;background:var(--k-track)}
.evidence-slider::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;background:var(--colors--light-100)}
.evidence-reveal-wrap{width:fit-content;transition:opacity .3s ease}
.evidence-meters{margin-top:28px;padding-top:24px;border-top:var(--border-line-width) solid var(--k-hairline);filter:blur(7px);opacity:.35;pointer-events:none;transition:filter .7s ease,opacity .7s ease}
.evidence-panel.revealed .evidence-meters{filter:blur(0);opacity:1;pointer-events:auto}
.evidence-panel.revealed .evidence-reveal-wrap{opacity:0;pointer-events:none;height:0;overflow:hidden;border:none}
.evidence-panel.revealed .evidence-slider-row{opacity:.45;pointer-events:none}
.evidence-meter{margin-bottom:22px}
.evidence-meter-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:8px}
.evidence-meter-label{font-size:11px;letter-spacing:.08em;color:var(--colors--light-200)}
.evidence-score{font-size:15px;color:var(--colors--light-100)}
.evidence-track{position:relative;height:5px;background:var(--k-track);border-radius:100px}
.evidence-fill{width:0;height:100%;background:var(--colors--light-100);border-radius:100px;transition:width 1.2s cubic-bezier(.22,1,.36,1)}
.evidence-guess-marker{position:absolute;top:-6px;bottom:-6px;left:50%;width:1.5px;background:var(--colors--light-300);opacity:0;transition:opacity .5s ease .9s}
.evidence-guess-marker span{position:absolute;top:16px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:.08em;color:var(--colors--light-300);white-space:nowrap}
.evidence-panel.revealed .evidence-guess-marker{opacity:1}
.evidence-meter:last-of-type{margin-bottom:34px}
.evidence-caption{margin:8px 0 0;color:var(--colors--light-300)}
.evidence-source{font-size:10px;letter-spacing:.1em;color:var(--colors--light-300);margin:0}
@media (max-width:991px){.evidence-grid{grid-template-columns:1fr;gap:40px;padding:0 10px}.evidence-panel{padding:24px 18px 22px}.evidence-copy .heading{max-width:none}}
.evidence-meter:last-of-type .evidence-caption{margin-top:34px}

/* "Someone for every generation" (approach section) */
#approach{scroll-margin-top:100px}
.approach-intro{max-width:56ch;margin:12px auto 0}
@media (max-width:991px){.approach-intro{margin:8px 0 0}}
@media (min-width:992px){
  #approach .products-content-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:var(--border-line-width) solid var(--colors--light-300);border-bottom:var(--border-line-width) solid var(--colors--light-300);margin:0 30px}
  #approach .products-content-columns>.role-column{padding:40px 34px 36px}
  #approach .products-content-columns>.role-column+.role-column{border-left:var(--border-line-width) solid var(--colors--light-300)}
}
.role-column{display:flex;flex-direction:column;align-items:flex-start}
.role-label{font-size:11px;letter-spacing:.1em;color:var(--colors--light-300);margin-bottom:14px}
.role-title{font-family:var(--fonts-family--font-family-primary);font-weight:500;font-size:var(--fonts-sizes--text-2xl);letter-spacing:-.4px;color:var(--colors--light-100);margin:0 0 12px;line-height:1.2}
.role-desc{margin:0;max-width:38ch}
#approach .products-content-wrapper .role-column{padding:8px 10px 24px;flex-direction:column}
.approach-independence{flex-direction:column;align-items:stretch;gap:32px}
.approach-ind-label{font-size:11px;letter-spacing:.1em;color:var(--colors--light-300);margin:0 0 12px}
.approach-ind-title{max-width:34ch}
.approach-principles{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;border-top:var(--border-line-width) solid var(--k-hairline);padding-top:28px}
.approach-num{font-size:11px;color:var(--colors--light-300)}
.approach-principle-title{font-family:var(--fonts-family--font-family-primary);font-weight:500;font-size:var(--fonts-sizes--text-base);color:var(--colors--light-100);margin:10px 0 8px}
.approach-principle-desc{margin:0;color:var(--colors--light-300)}
@media (max-width:991px){
  .approach-principles{grid-template-columns:1fr 1fr;gap:24px}
  #approach .products-tabs{flex-wrap:wrap}
}
@media (max-width:520px){.approach-principles{grid-template-columns:1fr}}

/* footer: final CTA + KinArv bottom row */
.footer .footer-wrapper{flex-wrap:wrap}
.footer-cta{width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;padding:96px 20px 104px;position:relative;z-index:1}
.footer-cta-title{max-width:26ch;margin:0}
.footer-cta-sub{max-width:52ch;margin:22px 0 34px}
.footer-cta-buttons{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.footer-bottom{width:100%;display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;position:relative;z-index:1}
.footer-brand{display:flex;flex-direction:column;gap:12px}
.footer-brand-row{display:flex;align-items:center;gap:10px}
svg.footer-mono{width:15px;height:auto;color:var(--colors--light-200);flex-shrink:0}
.footer-brand-line{color:var(--colors--light-200)}
.footer-legal{display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.footer-disclaimer{max-width:46ch;text-align:right;color:var(--colors--light-300);margin:0}
.footer-legal-links{display:flex;gap:20px}
@media (max-width:767px){
  .footer-cta{padding:64px 8px 72px}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .footer-legal{align-items:flex-start}
  .footer-disclaimer{text-align:left}
}
.footer-brand .copyright-content{display:flex;align-items:center;color:var(--colors--light-300);font-size:var(--fonts-sizes--text-sm)}
.footer-brand .copyright-text{margin-left:5px}
@media (max-width:767px){.footer .footer-wrapper{flex-direction:column}}


/* footer: no bottom hairline */
.footer .footer-wrapper{border-bottom:none}

/* review-aid pills: theme + design switchers */
.v3-pill{position:fixed;bottom:20px;z-index:60;display:flex;align-items:center;gap:2px;border-radius:100px;border:1px solid rgba(255,255,255,.1);background:rgba(18,18,16,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:4px;box-shadow:0 1px 2px rgba(0,0,0,.5),0 12px 32px -10px rgba(0,0,0,.6);font-family:var(--fonts-family--font-family-primary)}
.v3-pill-label{padding:0 6px 0 10px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);user-select:none}
.v3-design-pill{right:20px}
.v3-design-pill a{display:inline-flex;align-items:center;justify-content:center;height:28px;padding:0 12px;border-radius:100px;font-size:12px;font-weight:500;color:rgba(255,255,255,.7);text-decoration:none;transition:background-color .2s ease,color .2s ease}
.v3-design-pill a:hover{color:#fff;background:rgba(255,255,255,.1)}
.v3-design-pill a.active{background:#f4f0e3;color:#121210}
.v3-theme-pill{left:20px}
.v3-swatch{width:22px;height:22px;margin:3px;border-radius:50%;border:2px solid rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);background:var(--sw);cursor:pointer;padding:0;transition:transform .15s ease,border-color .2s ease}
.v3-swatch:hover{transform:scale(1.12)}
.v3-swatch.active{border-color:#f4f0e3}
@media (max-width:767px){.v3-pill{bottom:14px}.v3-theme-pill{left:12px}.v3-design-pill{right:12px}}

/* Scroll reveals — hold split targets until GSAP has measured them.
   .anim is set in the head of index-v3.astro, never under reduced motion. */
html.anim [data-anim]:not([data-anim-ready]){visibility:hidden}

/* ===== 2026-09-01 client copy: hero card, premise, six questions, review note ===== */

/* hero right column: "What you leave with" as three separate sheets. Each one is
   rotated and stepped, and carries a heavier shadow than the sheet behind it, so the
   stack reads as paper rather than as one panel with rules in it. */
.leave-block{width:100%;max-width:444px;margin:72px 32px}
.leave-label{display:block;font-size:11px;letter-spacing:.16em;color:var(--colors--light-300);margin:0 0 26px;padding-left:4px}
.leave-stack{list-style:none;margin:0;padding:0}
.leave-card{position:relative;box-sizing:border-box;width:332px;background:var(--k-panel);color:var(--k-ink);
  border:.5px solid var(--k-ink-hairline);border-radius:3px;padding:20px 22px 22px;
  transform:rotate(var(--r)) translateX(var(--x))}
.leave-card+.leave-card{margin-top:-14px}
.leave-card:nth-child(1){--r:-2.6deg;--x:0px;box-shadow:0 1px 2px rgba(5,18,18,.45),0 10px 20px -8px rgba(5,18,18,.6)}
.leave-card:nth-child(2){--r:1.4deg;--x:46px;box-shadow:0 1px 3px rgba(5,18,18,.5),0 17px 30px -10px rgba(5,18,18,.72)}
.leave-card:nth-child(3){--r:-1.1deg;--x:92px;box-shadow:0 2px 4px rgba(5,18,18,.55),0 26px 46px -12px rgba(5,18,18,.82)}
.leave-tab{display:block;font-size:10px;letter-spacing:.14em;color:var(--k-ink-muted);margin-bottom:12px}
.leave-text{margin:0;font-family:var(--fonts-family--font-family-primary);font-weight:500;font-size:17.5px;line-height:1.35;color:var(--k-ink)}
@media (max-width:1180px){
  .leave-card{width:298px}
  .leave-card:nth-child(2){--x:32px}
  .leave-card:nth-child(3){--x:64px}
}
@media (max-width:900px){
  .leave-block{margin:48px 20px;max-width:none}
  .leave-card{width:min(320px,100%)}
  .leave-card:nth-child(2){--x:24px}
  .leave-card:nth-child(3){--x:48px}
}
@media (max-width:520px){
  /* full width leaves no room to step the sheets sideways, and overlapping them there
     reads as one panel with seams, so they separate instead */
  .leave-card{width:100%;padding:18px 18px 20px}
  .leave-card+.leave-card{margin-top:16px}
  .leave-card:nth-child(1){--r:-1.2deg}
  .leave-card:nth-child(2){--r:.7deg;--x:0px}
  .leave-card:nth-child(3){--r:-.5deg;--x:0px}
  .leave-text{font-size:16px}
}

/* premise: heading left, the two paragraphs right */
.premise-title{max-width:15ch}
.premise-copy{display:flex;flex-direction:column;gap:18px;max-width:42ch;margin:0}

/* six questions: ledger grid, one hairline cell per question */
.questions-title{max-width:24ch}
.questions-grid{display:grid;grid-template-columns:repeat(3,1fr);margin:0 30px;border-top:var(--border-line-width) solid var(--colors--light-300);border-left:var(--border-line-width) solid var(--colors--light-300)}
.question-cell{display:flex;flex-direction:column;padding:32px;border-right:var(--border-line-width) solid var(--colors--light-300);border-bottom:var(--border-line-width) solid var(--colors--light-300)}
.question-num{font-size:11px;letter-spacing:.1em;color:var(--colors--light-300)}
.question-text{margin:16px 0 0;font-family:var(--fonts-family--font-family-primary);font-weight:500;font-size:var(--fonts-sizes--text-xl);line-height:1.3;letter-spacing:-.3px;color:var(--colors--light-100);max-width:26ch}
@media (max-width:991px){.questions-grid{grid-template-columns:1fr 1fr;margin:0 20px}.question-cell{padding:26px 24px}}
@media (max-width:600px){.questions-grid{grid-template-columns:1fr;margin:0 10px}.question-text{font-size:var(--fonts-sizes--text-lg)}}

/* review note: the tinted box carries the positioning line and the CTA */
.review-note{align-items:flex-end}
.review-note-copy{max-width:74ch}
.review-note-copy .axes-composite-sub + .axes-composite-sub{margin-top:18px}
.review-note-title{max-width:26ch;font-size:var(--fonts-sizes--text-3xl)}
@media (max-width:767px){.review-note{align-items:flex-start;gap:28px}}

/* the page carries six blocks now, not twelve, so the rhythm tightens */
.premise-section .container.with-top-padding{padding-top:72px;padding-bottom:16px}
.questions-section .container.with-top-padding,
.review-note-section .container.with-top-padding{padding-top:56px}
.premise-section .heading-wrapper,
.questions-section .heading-wrapper{padding-top:32px;padding-bottom:40px}
.review-note-section .axes-composite{margin-top:0}
@media (max-width:991px){
  .premise-section .heading-wrapper,
  .questions-section .heading-wrapper{padding-top:8px}
}

/* ===== Mobile menu ===== */
/* The reference only styled the overlay shell; this is its content. Closed state
   fades and becomes inert, open state is the page gradient behind stacked links. */
.nav-mobile-menu{left:0;right:0;width:100%;top:calc(var(--nav-h,58px) - 1px);height:calc(100dvh - var(--nav-h,58px) + 1px);min-height:0;margin:0;border-top:none;z-index:999;opacity:0;visibility:hidden;overflow-y:auto;transition:opacity .28s ease,visibility 0s linear .28s,filter .28s ease}
.nav-mobile-menu:before{top:0}
.nav-mobile-menu.is-open{opacity:1;visibility:visible;transition:opacity .28s ease,visibility 0s,filter .28s ease}
html.menu-open,html.menu-open body{overflow:hidden}
/* the page's own .container carries the side hairlines into the open menu */
.nav-mobile-grid{position:relative;z-index:1;min-height:100%;display:flex;box-sizing:border-box}
.nav-mobile-menu-container{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-between;padding:8px 20px 32px;box-sizing:border-box;min-width:0}
.nav-mobile-links{display:flex;flex-direction:column}
.nav-mobile-link{display:flex;align-items:baseline;gap:18px;padding:26px 0;border-bottom:var(--border-line-width) solid var(--colors--light-300);text-decoration:none;color:var(--colors--light-100)}
.nav-mobile-num{color:var(--colors--light-300)}
.nav-mobile-label{font-family:var(--fonts-family--font-family-secondary);font-weight:500;font-size:var(--fonts-sizes--text-3xl);letter-spacing:-.72px;line-height:1}
.nav-mobile-footer{display:flex;flex-direction:column;gap:22px;align-items:flex-start;padding-top:32px}
.nav-mobile-mail{color:var(--colors--light-200);text-decoration:none}
@media (min-width:992px){.nav-mobile-menu{display:none}}