/* =====================================================================
   Feather & Spine — site v3 stylesheet. Contract: site-f/DESIGN-v3.md
   Editorial letter, not a SaaS page. Cards only for real bounded objects.
   ===================================================================== */

:root {
  --ivory:#FBF7F2; --sand:#F3EAE0; --oat:#EFE3D6; --white:#FFFFFF;
  --ink:#3B2E2A; --ink-soft:#6B5A52; --ink-faint:#8C7C74;
  --terra:#C4705B; --terra-text:#9A4A38; --terra-deep:#8A4232;
  --sage-text:#5A6B52; --sage-deep:#4E5D47; --blush:#E8C7BC;
  --line:rgba(59,46,42,.14); --line-strong:rgba(59,46,42,.28);

  --shadow-sm:0 2px 3px -1px rgba(0,0,0,.1),0 1px 0 0 rgba(25,28,33,.02),0 0 0 1px rgba(25,28,33,.08);
  --shadow-md:0 0 0 1px rgba(0,0,0,.06),0 1px 1px -.5px rgba(0,0,0,.06),0 3px 3px -1.5px rgba(0,0,0,.06),0 6px 6px -3px rgba(0,0,0,.06),0 12px 12px -6px rgba(0,0,0,.06),0 24px 24px -12px rgba(0,0,0,.06);
  --shadow-lg:0 0 0 1px rgba(0,0,0,.05),0 2.8px 2.2px rgba(0,0,0,.034),0 6.7px 5.3px rgba(0,0,0,.048),0 12.5px 10px rgba(0,0,0,.06),0 22.3px 17.9px rgba(0,0,0,.072),0 41.8px 33.4px rgba(0,0,0,.086),0 100px 80px rgba(0,0,0,.12);

  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);

  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Nunito Sans", -apple-system, "Segoe UI", system-ui, sans-serif;

  --wrap:1180px; --gutter:clamp(1.25rem,4vw,2.5rem);
  --r-card:20px; --r-input:12px;
}

/* ------------------------------------------------------------ reset ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--sans);font-size:1.0625rem;line-height:1.6;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:var(--terra-text);text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.18em;text-decoration-skip-ink:auto;transition:color .15s ease}
a:hover{color:var(--terra-deep)}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--terra-text);outline-offset:3px;border-radius:4px}
::selection{background:var(--blush);color:var(--ink)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--ivory);padding:.6rem 1rem;border-radius:999px;z-index:100}
.skip-link:focus{left:8px}

/* ------------------------------------------------------------- type ---- */
h1,h2,h3{font-family:var(--serif);font-optical-sizing:auto;margin:0;color:var(--ink);text-wrap:balance}
h1{font-weight:350;font-size:clamp(2.5rem,6vw,4.75rem);line-height:1.04;letter-spacing:-.025em}
h2{font-weight:400;font-size:clamp(1.85rem,3.6vw,2.75rem);line-height:1.12;letter-spacing:-.015em}
h3{font-weight:560;font-size:1.25rem;line-height:1.3;letter-spacing:-.005em}
p{margin:0 0 1em;text-wrap:pretty}
p:last-child{margin-bottom:0}
strong{font-weight:700}
.lead{font-size:clamp(1.125rem,1.5vw,1.25rem);line-height:1.55;max-width:34em}
.muted{color:var(--ink-soft)}
.frame{font-family:var(--serif);font-style:italic;color:var(--terra-text);margin:0 0 .75rem;font-size:1.0625rem}
.amp{color:var(--terra);font-weight:inherit}
.cite{display:block;font-size:.875rem;line-height:1.5;color:var(--ink-soft);margin-top:.6rem}
.cite a{color:var(--ink-soft)}
.num{font-variant-numeric:tabular-nums lining-nums}

/* ----------------------------------------------------------- layout ---- */
.wrap{width:min(var(--wrap),100% - 2*var(--gutter));margin-inline:auto}
.section{padding:6rem 0}
.section.tight{padding:4rem 0}
.rule-top{border-top:1px solid var(--line)}
.band{background:var(--sand)}
.band-ink{background:var(--ink);color:var(--ivory)}
.band-ink h1,.band-ink h2,.band-ink h3{color:var(--ivory)}
.band-ink a{color:var(--blush)}
.center{text-align:center}
.section-head{max-width:40rem;margin-bottom:2.75rem}
.section-head .lead{margin-top:1.1rem}

/* editorial grid: notes in the margin, text in the middle */
.ed{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:1.5rem}
.ed-note{grid-column:1 / span 3;grid-row:1;padding-top:.35rem}
.number-band .ed-note{align-self:end;padding-bottom:.5rem}
.ed-body{grid-column:4 / span 7}
.ed-wide{grid-column:4 / span 9}
.note{font-size:.875rem;line-height:1.5;color:var(--ink-soft);border-top:1px solid var(--line-strong);padding-top:.7rem}
.note a{color:var(--ink-soft)}

/* ----------------------------------------------------------- buttons --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3rem;font-weight:700;font-size:1rem;line-height:1.2;padding:.85rem 1.4rem;border-radius:999px;
  border:1.5px solid var(--line-strong);background:transparent;color:var(--ink);text-decoration:none;white-space:nowrap;
  transition:transform 160ms var(--ease-out),background-color .2s ease,border-color .2s ease,color .2s ease}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--terra-text);border-color:var(--terra-text);color:#fff}
.btn-ink{background:var(--ink);border-color:var(--ink);color:var(--ivory)}
.btn-lg{min-height:3.5rem;font-size:1.0625rem;padding:1rem 1.6rem}
.btn-quiet{border-color:transparent;padding-inline:.5rem;text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.btn .arrow{display:inline-grid;place-items:center;width:1.1rem;height:1.1rem;transition:transform 160ms var(--ease-out)}
.btn .arrow svg{width:100%;height:100%}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:rgba(59,46,42,.05);border-color:rgba(59,46,42,.4)}
  .btn-primary:hover{background:var(--terra-deep);border-color:var(--terra-deep);color:#fff}
  .btn-ink:hover{background:#2c2320;border-color:#2c2320;color:var(--ivory)}
  .btn-quiet:hover{background:transparent;border-color:transparent;color:var(--terra-deep)}
  .btn:hover .arrow{transform:translateX(3px)}
}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center}

/* ----------------------------------------------------------- header ---- */
.site-header{position:sticky;top:0;z-index:40;background:rgba(251,247,242,.78);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%)}
.site-header::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px;pointer-events:none;background:linear-gradient(rgba(251,247,242,.7),rgba(251,247,242,0))}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4.25rem}
.brand img{height:2.5rem;width:auto}
.site-nav{display:flex;gap:.15rem;align-items:center}
.site-nav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.9375rem;padding:.55rem .8rem;border-radius:999px;transition:background-color .15s ease}
.site-nav a.active{text-decoration:underline;text-underline-offset:.35em;text-decoration-thickness:1.5px;text-decoration-color:var(--terra)}
.site-nav a.nav-cta{background:var(--ink);color:var(--ivory);margin-left:.6rem;padding:.6rem 1.1rem}
@media (hover:hover) and (pointer:fine){ .site-nav a:not(.nav-cta):hover{background:rgba(59,46,42,.06)} .site-nav a.nav-cta:hover{background:#2c2320} }
.nav-toggle{display:none;width:2.75rem;height:2.75rem;border:0;background:transparent;border-radius:50%;position:relative}
.nav-toggle span{position:absolute;left:.8rem;right:.8rem;height:2px;background:var(--ink);border-radius:2px;transition:transform 250ms var(--ease-out),opacity .2s ease}
.nav-toggle span:nth-child(1){top:.95rem}.nav-toggle span:nth-child(2){top:1.35rem}.nav-toggle span:nth-child(3){top:1.75rem}
.nav-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(.4rem) rotate(45deg)}
.nav-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-.4rem) rotate(-45deg)}

/* ------------------------------------------------------------- hero ---- */
.hero{padding:clamp(3.5rem,8vw,7rem) 0 clamp(3rem,6vw,5rem)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(2.5rem,6vw,5.5rem);align-items:end}
.hero h1{margin-bottom:1.5rem;max-width:12.5em}
.hero .lead{margin-bottom:2rem}
.hero-note{font-size:.9375rem;color:var(--ink-soft);margin-top:1.25rem;max-width:34em}
.hero-note a{color:var(--ink-soft)}
.hero.hero-long h1{font-size:clamp(2.2rem,4.4vw,3.5rem)}
/* one orchestrated entrance; visible by default where unsupported */
.settle{transition:opacity 500ms ease-out,transform 500ms var(--ease-out)}
@starting-style{.settle{opacity:0;transform:translateY(8px)}}
.settle.s2{transition-delay:60ms}.settle.s3{transition-delay:120ms}.settle.s4{transition-delay:180ms}

/* pull quote in the margin column (was a card) */
.pull{border-top:2px solid var(--ink);padding-top:1.1rem}
.pull blockquote{margin:0;font-family:var(--serif);font-optical-sizing:auto;font-style:italic;font-weight:400;font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.3;letter-spacing:-.01em}
.pull .attribution{font-size:.9375rem;color:var(--ink-soft);margin-top:1rem;line-height:1.5}
.pull .count{display:flex;align-items:baseline;gap:.6rem;margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--line)}
.pull .count b{font-family:var(--serif);font-optical-sizing:auto;font-weight:400;font-size:2.25rem;line-height:1;color:var(--terra);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pull .count span{font-size:.9375rem;color:var(--ink-soft)}

/* --------------------------------------------------------- her words --- */
.words{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 3rem;margin:0;padding:0;list-style:none}
.words li{font-family:var(--serif);font-optical-sizing:auto;font-size:clamp(1.15rem,1.7vw,1.35rem);line-height:1.35;padding:1.1rem 0;border-top:1px solid var(--line)}
.words li::before{content:"\201C"}.words li::after{content:"\201D"}
.words-source{font-size:.875rem;color:var(--ink-soft);margin-top:1.25rem}

/* ------------------------------------------------------- told (strike) - */
.told-list{margin:0;padding:0;list-style:none}
.told{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:1rem 3rem;padding:2rem 0;border-top:1px solid var(--line)}
.told:last-child{border-bottom:1px solid var(--line)}
.told .wrong{font-family:var(--serif);font-optical-sizing:auto;font-weight:400;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.15;letter-spacing:-.015em;margin:0;color:var(--ink)}
.told .wrong span{position:relative;display:inline}
.told .wrong svg{position:absolute;left:-2%;width:104%;top:calc(50% - .32em);height:.5em;overflow:visible;pointer-events:none}
.told .wrong svg path{stroke:var(--terra);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-dasharray:600;stroke-dashoffset:600}
.told.seen .wrong svg path{transition:stroke-dashoffset 700ms var(--ease-out) 80ms;stroke-dashoffset:0}
.told .right{margin:0;max-width:36em}
.pivot{margin-top:3rem;background:var(--ink);color:var(--ivory);border-radius:var(--r-card);padding:clamp(2rem,5vw,3.5rem)}
.pivot .wrong{font-family:var(--serif);font-optical-sizing:auto;font-weight:400;font-size:clamp(1.6rem,3vw,2.35rem);line-height:1.15;letter-spacing:-.015em;margin:0 0 1.25rem;color:var(--ivory)}
.pivot .wrong em{font-style:italic;color:var(--blush);font-size:.7em;display:block;margin-top:.4rem;letter-spacing:0}
.pivot p{font-size:1.125rem;line-height:1.6;max-width:38em;color:rgba(251,247,242,.88)}

/* --------------------------------------------------------- the number -- */
.number-band{padding:clamp(5rem,10vw,9rem) 0}
.number-copy .big-number,.big-number{font-family:var(--serif);font-optical-sizing:auto;font-weight:350;font-size:clamp(6rem,15vw,11rem);line-height:.85;letter-spacing:-.045em;color:var(--terra);font-variant-numeric:tabular-nums;margin:0 0 1.5rem}
.number-copy p{font-size:clamp(1.15rem,1.7vw,1.375rem);line-height:1.5;max-width:28em}

/* ---------------------------------------------------------- method ----- */
.steps{margin:0;padding:0;list-style:none;counter-reset:step}
.steps li{display:grid;grid-template-columns:4.5rem minmax(0,1fr);gap:0 1.5rem;padding:1.75rem 0;border-top:1px solid var(--line)}
.steps li::before{counter-increment:step;content:counter(step);font-family:var(--serif);font-optical-sizing:auto;font-weight:350;font-size:3rem;line-height:.9;color:var(--terra);font-variant-numeric:tabular-nums}
.steps .step-name{font-family:var(--serif);font-style:italic;color:var(--terra-text);margin:0 0 .3rem;font-size:1rem}
.steps h3{margin-bottom:.5rem}
.steps p{max-width:36em}
.steps.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 3rem}

/* --------------------------------------------------------- receipts ---- */
.ledger{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 2.5rem}
.ledger-row{border-top:2px solid var(--ink);padding-top:1.25rem}
.ledger-figure{font-family:var(--serif);font-optical-sizing:auto;font-weight:400;font-size:3rem;line-height:1;color:var(--terra);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ledger-figure small{display:block;font-family:var(--sans);font-size:.875rem;font-weight:600;color:var(--ink-soft);margin-top:.5rem;letter-spacing:0}
.ledger-row h3{font-size:1.125rem;margin:1.1rem 0 .5rem}
.ledger-row p{font-size:.9375rem;line-height:1.6}

/* ----------------------------------------------------- products -------- */
.offers{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr);gap:1.25rem;align-items:stretch}
.offer{background:var(--white);border-radius:var(--r-card);box-shadow:var(--shadow-md);padding:2rem;display:flex;flex-direction:column;gap:.7rem}
.offer.featured{box-shadow:var(--shadow-lg);padding:2.4rem}
.offer .kind{font-size:.875rem;font-weight:700;color:var(--ink-soft);margin:0}
.offer.featured .kind{color:var(--sage-deep)}
.offer h3{font-size:1.5rem;font-weight:500}
.offer.featured h3{font-size:1.75rem}
.offer .price{font-family:var(--serif);font-optical-sizing:auto;font-weight:400;font-size:2.4rem;line-height:1;margin:.25rem 0 .4rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.offer .price em{font-family:var(--sans);font-style:normal;font-size:.9375rem;font-weight:600;color:var(--ink-soft);margin-left:.3rem;letter-spacing:0}
.offer ul{margin:0 0 .5rem;padding-left:1.1rem;font-size:.9375rem;display:grid;gap:.4rem}
.offer .btn{margin-top:auto;align-self:stretch}

/* -------------------------------------------------------------- faq ---- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;font-family:var(--serif);font-optical-sizing:auto;font-weight:500;font-size:clamp(1.125rem,1.6vw,1.3rem);line-height:1.35;padding:1.4rem 3rem 1.4rem 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.25rem;top:50%;width:.9rem;height:.9rem;margin-top:-.45rem;
  background:linear-gradient(var(--ink),var(--ink)) center/100% 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1.5px 100% no-repeat;
  transition:transform 200ms var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 1.5rem;max-width:40em;margin:0}

/* ------------------------------------------------------------ forms ---- */
.email-form{display:flex;gap:.6rem;flex-wrap:wrap;align-items:stretch;max-width:36rem}
.email-form input[type=email]{flex:1 1 15rem;min-width:0;font:inherit;font-size:1rem;min-height:3.5rem;padding:.9rem 1.1rem;border-radius:var(--r-input);border:0;background:var(--white);color:var(--ink);box-shadow:var(--shadow-sm);transition:box-shadow .15s ease}
.email-form input[type=email]::placeholder{color:var(--ink-faint)}
.email-form input[type=email]:focus{outline:none;box-shadow:var(--shadow-sm),0 0 0 3px rgba(154,74,56,.35)}
.email-form .btn{min-height:3.5rem}
.band-ink .email-form input[type=email]{background:#4a3b36;color:var(--ivory);box-shadow:inset 0 0 0 1px rgba(251,247,242,.18)}
.band-ink .email-form input[type=email]::placeholder{color:rgba(251,247,242,.6)}
.band-ink .email-form input[type=email]:focus{box-shadow:inset 0 0 0 1px rgba(251,247,242,.18),0 0 0 3px rgba(232,199,188,.45)}
.form-note{font-size:.875rem;color:var(--ink-soft);margin-top:.9rem}
.band-ink .form-note{color:rgba(251,247,242,.7)}

/* ------------------------------------------------------------ exhale --- */
.exhale{padding:clamp(5rem,10vw,8rem) 0 clamp(4rem,7vw,6rem)}
.exhale h2{font-weight:350;font-size:clamp(2.2rem,5vw,3.75rem);line-height:1.08;max-width:15em;letter-spacing:-.02em}
.exhale .lead{color:rgba(251,247,242,.85);margin:1.75rem 0 2rem}

/* ------------------------------------------------------------ footer --- */
.site-footer{background:var(--ink);color:rgba(251,247,242,.78);padding:0 0 2.5rem;font-size:.9375rem}
.footer-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:2rem;padding:2.75rem 0 2rem;border-top:1px solid rgba(251,247,242,.14)}
.site-footer .tagline{font-family:var(--serif);font-style:italic;color:rgba(251,247,242,.7);margin-top:.75rem}
.footer-nav{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:.5rem 1rem}
.footer-nav a{color:rgba(251,247,242,.88);text-decoration:none}
.footer-nav a:hover{color:#fff;text-decoration:underline}
.site-footer .legal{font-size:.8125rem;line-height:1.6;color:rgba(251,247,242,.62);max-width:78ch}
.site-footer .legal a{color:rgba(251,247,242,.82)}
.footer-logo{filter:brightness(0) invert(.93)}

/* ------------------------------------------------------------ prose ---- */
.article-page{padding:clamp(3rem,6vw,5rem) 0 6rem}
.prose{width:min(42rem,100% - 2*var(--gutter));margin-inline:auto}
.prose.center{text-align:center}
.prose h1{font-size:clamp(2.2rem,4.8vw,3.4rem);margin-bottom:1.25rem}
.prose h2{font-size:clamp(1.5rem,2.8vw,2rem);margin:3rem 0 .9rem}
.prose h3{margin:2rem 0 .5rem}
.prose p,.prose li{font-size:1.0625rem;line-height:1.7;text-wrap:wrap}
.prose ul,.prose ol{padding-left:1.3rem}
.prose li{margin:.4rem 0}
.prose blockquote{margin:1.75rem 0;padding:.25rem 0 .25rem 1.25rem;border-left:2px solid var(--terra);font-family:var(--serif);font-style:italic;font-size:1.15rem}
.prose hr{border:0;height:1px;background:var(--line);margin:3rem 0}
.prose .lead{font-size:1.2rem}
.article-meta{display:flex;gap:1rem;align-items:center;font-size:.875rem;color:var(--ink-soft);margin-bottom:1.5rem}
.cta-box{background:var(--sand);border-radius:var(--r-card);padding:clamp(1.5rem,3vw,2.25rem);margin:3rem 0}
.cta-box .btn{margin:.5rem .5rem 0 0}
.article-index{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(18rem,1fr))}
.article-card{background:var(--white);border-radius:var(--r-card);box-shadow:var(--shadow-md);padding:1.75rem;text-decoration:none;color:var(--ink);display:grid;gap:.5rem}

/* ------------------------------------------------------ sticky bars ---- */
.stickybar{position:sticky;bottom:0;background:rgba(251,247,242,.86);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);padding:.9rem 0;z-index:30;box-shadow:0 -1px 0 var(--line)}
.stickybar .inner{width:min(var(--wrap),100% - 2*var(--gutter));margin-inline:auto;display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.stickybar .msg{margin:0;font-size:.9375rem}
.stickybar .email-form input[type=email],.stickybar .email-form .btn{min-height:3rem}
.has-stickybar .site-footer{padding-bottom:5rem}
.mobile-cta{display:none}

/* ------------------------------------------------------------- quiz ---- */
.quiz-page .site-nav,.quiz-page .nav-toggle{display:none}
.quiz-shell{padding:clamp(1.5rem,4vw,3.5rem) 0 6rem}
#quiz-app{width:min(40rem,100% - 2*var(--gutter));margin-inline:auto}
.q-progress{height:3px;background:var(--line);border-radius:999px;overflow:hidden;margin-bottom:1.5rem}
.q-progress-fill{height:100%;width:0;background:var(--terra-text);transition:transform 300ms var(--ease-out),width 300ms var(--ease-out)}
.quiz-card .core{background:var(--white);border-radius:var(--r-card);box-shadow:var(--shadow-lg);padding:clamp(1.5rem,4.5vw,2.75rem)}
.quiz-kind{font-family:var(--serif);font-style:italic;color:var(--terra-text);margin:0 0 .6rem}
.quiz-card h1{font-size:clamp(2rem,4.6vw,2.9rem)}
.quiz-card h2{font-size:clamp(1.6rem,3.6vw,2.15rem)}
.q-count{font-size:.875rem;font-weight:700;color:var(--ink-soft);margin:0 0 1rem;font-variant-numeric:tabular-nums}
.q-text{font-family:var(--serif);font-optical-sizing:auto;font-weight:400;font-size:clamp(1.3rem,2.7vw,1.7rem);line-height:1.35;margin:0 0 1.75rem;text-wrap:pretty}
.q-actions{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.q-actions .btn{min-height:3.5rem;font-size:1.0625rem}
.q-back{margin-top:1rem}
.q-back button{border:0;background:none;color:var(--ink-soft);text-decoration:underline;text-underline-offset:.2em;padding:.5rem 0;min-height:2.75rem}
.kbd-hint{font-size:.8125rem;color:var(--ink-soft);margin:1rem 0 0}
@media (hover:none){.kbd-hint{display:none}}
.q-note{font-size:.9375rem;color:var(--ink-soft);margin:1rem 0 0}
.quiz-legal{font-size:.8125rem;line-height:1.6;color:var(--ink-soft);margin-top:2rem;max-width:70ch}
.chip{display:inline-flex;align-items:center;gap:.45rem;font-size:.875rem;font-weight:700;padding:.4rem .8rem;border-radius:999px;background:var(--oat);color:var(--ink);white-space:nowrap}
.chip.sage{background:#E3E9DF;color:var(--sage-deep)}
.result-meta{font-family:var(--serif);font-style:italic;color:var(--terra-text);margin:0 0 .5rem}
.result-headline{font-size:clamp(1.8rem,4vw,2.4rem);margin:0 0 1.25rem}
.score-badge{font-family:var(--serif);font-style:normal;font-weight:400;color:var(--terra);font-variant-numeric:tabular-nums}
.pattern{background:var(--sand);border-radius:14px;padding:1.25rem 1.3rem;margin:0 0 1.75rem}
.pattern .frame{margin-bottom:.75rem;font-size:1rem}
.pattern-chips{display:flex;flex-wrap:wrap;gap:.45rem}
.pattern-chips .chip{background:var(--white);box-shadow:var(--shadow-sm);white-space:normal}
.pattern-chips .chip::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:var(--terra);flex:none}
.pattern-chips .chip{opacity:1;transform:none;transition:opacity 300ms ease-out,transform 300ms var(--ease-out)}
@starting-style{.pattern-chips .chip{opacity:0;transform:translateY(4px)}}
.pattern-chips .chip:nth-child(2){transition-delay:40ms}.pattern-chips .chip:nth-child(3){transition-delay:80ms}.pattern-chips .chip:nth-child(4){transition-delay:120ms}.pattern-chips .chip:nth-child(5){transition-delay:160ms}.pattern-chips .chip:nth-child(6){transition-delay:200ms}.pattern-chips .chip:nth-child(n+7){transition-delay:240ms}
.urgent{background:#F6E3DE;border-left:3px solid var(--terra-deep);border-radius:0 12px 12px 0;padding:1rem 1.15rem;margin:0 0 1.25rem}
.share-line{border-top:1px solid var(--line);margin-top:1.75rem;padding-top:1.1rem;font-size:.9375rem;color:var(--ink-soft)}
.share-line code{font-family:var(--sans);font-weight:700;color:var(--ink);background:var(--oat);padding:.15rem .45rem;border-radius:6px;overflow-wrap:anywhere}

.quiz-lead{margin:1rem 0 1.25rem}
.read-time{font-size:.875rem;color:var(--ink-soft)}
.table-wrap{overflow-x:auto;margin:1.5rem 0}
.table-wrap table{border-collapse:collapse;width:100%;font-size:.9375rem;font-variant-numeric:tabular-nums}
.table-wrap th,.table-wrap td{text-align:left;padding:.65rem .75rem;border-bottom:1px solid var(--line);vertical-align:top}
.table-wrap th{font-weight:700;border-bottom-color:var(--line-strong)}

/* ------------------------------------------- method & program pages ---- */
.toc{margin:0;padding:0}
.toc-row{display:grid;grid-template-columns:3rem minmax(0,1fr);gap:0 1.25rem;padding:1.1rem 0;border-top:1px solid var(--line);align-items:baseline}
.toc-row:last-child{border-bottom:1px solid var(--line)}
.toc-row .n{font-family:var(--serif);font-optical-sizing:auto;font-weight:400;font-size:1.75rem;line-height:1;color:var(--terra);font-variant-numeric:tabular-nums}
.toc-row h3{font-size:1.125rem;margin:0 0 .25rem}
.toc-row p{font-size:.9375rem;color:var(--ink-soft);margin:0}
.toc-row.core-ch h3::after{content:"the practice";font-family:var(--sans);font-size:.75rem;font-weight:700;color:var(--sage-deep);background:#E3E9DF;border-radius:999px;padding:.15rem .55rem;margin-left:.6rem;vertical-align:.2em;white-space:nowrap}
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 3rem}
.split > div{border-top:2px solid var(--ink);padding-top:1.25rem}
.split > div.soft{border-top-color:var(--line-strong)}
.split h3{margin-bottom:.75rem}
.price-card{background:var(--white);border-radius:var(--r-card);box-shadow:var(--shadow-lg);padding:clamp(2rem,4vw,2.75rem);text-align:center;display:grid;gap:.6rem;justify-items:center}
.price-card .price{font-family:var(--serif);font-optical-sizing:auto;font-weight:350;font-size:4rem;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin:.25rem 0}
.price-card .price em{font-family:var(--sans);font-style:normal;font-weight:600;font-size:1rem;color:var(--ink-soft);margin-left:.35rem;letter-spacing:0}
.price-card ul{list-style:none;padding:0;margin:.4rem 0 1rem;display:grid;gap:.4rem;font-size:.9375rem}
.price-card .btn{width:100%}

/* reduced motion: keep fades, drop movement; strikes already drawn */
@media (prefers-reduced-motion:reduce){
  .settle,.pattern-chips .chip{transition:opacity 200ms ease}
  @starting-style{.settle,.pattern-chips .chip{transform:none}}
  .told .wrong svg path{stroke-dashoffset:0;transition:none}
  .btn,.btn .arrow,.mobile-cta{transition:none}
  .btn:active{transform:none}
}

/* ------------------------------------------------------- responsive ---- */
@media (max-width:1024px){
  .ed{display:block}
  .ed-note{padding:0;margin-top:1.5rem}
  .ed-note.before{margin:0 0 1.5rem}
  .hero-grid{grid-template-columns:1fr;align-items:start}
  .offers{grid-template-columns:1fr;max-width:32rem}
  .offer.featured{order:-1}
  .ledger{grid-template-columns:1fr;gap:2rem}
}
@media (max-width:820px){
  .site-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--ivory);padding:.75rem var(--gutter) 1.25rem;flex-direction:column;align-items:stretch;gap:.2rem;box-shadow:var(--shadow-md)}
  .site-nav.open{display:flex}
  .site-nav a{padding:.9rem 1rem}
  .site-nav a.nav-cta{margin:.5rem 0 0;text-align:center}
  .nav-toggle{display:block}
  .section{padding:4.5rem 0}
  .words{grid-template-columns:1fr}
  .told{grid-template-columns:1fr;gap:.75rem;padding:1.6rem 0}
  .steps.two,.split{grid-template-columns:1fr;gap:2rem}
  .steps li{grid-template-columns:3rem minmax(0,1fr);gap:0 1rem}
  .steps li::before{font-size:2.25rem}
  .footer-grid{grid-template-columns:1fr}
  .mobile-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:35;padding:.75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom));
    background:rgba(251,247,242,.86);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);box-shadow:0 -1px 0 var(--line);
    transform:translateY(110%);transition:transform 300ms var(--ease-drawer);visibility:hidden}
  .mobile-cta.visible{transform:none;visibility:visible}
  .mobile-cta .btn{width:100%}
  body.has-mobile-cta .site-footer{padding-bottom:6rem}
  .quiz-page .mobile-cta{display:none}
}
@media (max-width:480px){
  h1{font-size:clamp(2.35rem,10.5vw,2.9rem)}
  .hero{padding-top:2.5rem}
  .btn-lg{width:100%}
  .btn-quiet.btn-lg{width:auto}
  .q-actions{grid-template-columns:1fr}
  .number-copy .big-number,.big-number{font-size:clamp(5rem,26vw,7rem)}
  .offer,.offer.featured{padding:1.6rem}
  .email-form .btn{width:100%}
  .quiz-card .core{padding:1.4rem 1.1rem}
  .pattern{padding:1rem .85rem;margin-inline:-.25rem}
  .pattern-chips{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
  .pattern-chips .chip{font-size:.8125rem;line-height:1.25;padding:.45rem .6rem;gap:.4rem;border-radius:12px;align-items:flex-start}
  .pattern-chips .chip::before{margin-top:.3rem}
}