/* ============================================================================
   THE SMALL BUSINESS AI GROWTH KIT — SITE STYLES
   Tokens inherited from the product's design system so the site and the book
   look like one thing. Every foreground/background pair meets WCAG AA.
   ========================================================================== */

/* ---------- fonts (self-hosted, OFL, already in the repo) ---------- */
@font-face{font-family:Inter;src:url(fonts/inter-1.woff2) format('woff2');
  font-weight:100 900;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212}
@font-face{font-family:'Source Serif 4';src:url(fonts/sourceserif4-1.woff2) format('woff2');
  font-weight:200 900;font-display:swap}

/* ---------- tokens ---------- */
:root{
  --ink:#101823; --ink-2:#2C3948; --slate:#55636F; --mute:#65707C;
  --rule:#E1E6EC; --rule-2:#CDD5DE; --paper:#FFFFFF; --tint:#F5F7FA; --tint-2:#EDF1F6;
  --navy:#16324F; --navy-deep:#0B1B2B; --navy-tint:#EAF0F6;
  --teal:#0E6E6D; --teal-tint:#E7F2F2; --teal-bright:#6FC7C5;
  --amber:#8F5F13; --amber-tint:#FBF3E4; --ochre:#D08B2C;
  --clay:#A2372A; --clay-tint:#FBEEEC; --green:#2A6B4F; --green-tint:#E9F3EE;

  --sans:Inter,'Segoe UI',system-ui,-apple-system,sans-serif;
  --serif:'Source Serif 4',Georgia,serif;

  --max:1140px; --gut:clamp(1.25rem,4vw,2.5rem);
  --r:10px; --r-lg:16px;
  --shadow:0 1px 2px rgba(16,24,35,.05), 0 8px 24px -12px rgba(16,24,35,.12);
  --shadow-lg:0 2px 4px rgba(16,24,35,.06), 0 24px 56px -20px rgba(16,24,35,.22);
  --step:clamp(3.5rem,7vw,6rem);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{margin:0;font-family:var(--sans);font-size:1.0625rem;line-height:1.65;
  color:var(--ink-2);background:var(--paper);-webkit-font-smoothing:antialiased}
img,svg,audio{display:block;max-width:100%}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);margin:0;line-height:1.15;
  letter-spacing:-.015em;font-weight:700}
p{margin:0 0 1em}
a{color:var(--navy)}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--teal-bright);outline-offset:3px;border-radius:4px}

/* skip link — first tab stop */
.skip{position:absolute;left:-9999px;top:0;background:var(--navy-deep);color:#fff;
  padding:.75rem 1.25rem;z-index:200;border-radius:0 0 var(--r) 0}
.skip:focus{left:0}

.hdr{--h:72px}
section[id],main [id]{scroll-margin-top:calc(72px + 1.5rem)}

/* ---------- layout ---------- */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
section{padding-block:var(--step)}
.eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal);margin:0 0 1rem}
.h2{font-size:clamp(1.85rem,4vw,2.75rem);margin:0 0 .75rem;max-width:22ch}
.lede{font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--slate);max-width:60ch;margin:0 0 2.5rem}
.center{text-align:center}
.center .h2,.center .lede{margin-inline:auto}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font:600 1rem/1 var(--sans);padding:1rem 1.6rem;border-radius:var(--r);
  border:1.5px solid transparent;cursor:pointer;text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--navy-deep);color:#fff;box-shadow:var(--shadow)}
.btn-primary:hover{background:#123049;box-shadow:var(--shadow-lg)}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn-secondary:hover{border-color:var(--navy);background:var(--tint)}
.btn-ghost-light{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.28)}
.btn-ghost-light:hover{background:rgba(255,255,255,.16)}
.btn-block{width:100%}
/* On the dark sections the navy primary button disappeared into the background.
   Invert it there: white face, navy text — the highest contrast available. */
.hero .btn-primary,.final .btn-primary{background:#fff;color:var(--navy-deep);
  box-shadow:0 2px 4px rgba(0,0,0,.2),0 18px 40px -18px rgba(0,0,0,.5)}
.hero .btn-primary:hover,.final .btn-primary:hover{background:#EAF0F6}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--rule)}
.hdr-in{display:flex;align-items:center;gap:1.5rem;min-height:72px}
.brand{font-family:var(--serif);font-weight:700;font-size:1.0625rem;color:var(--ink);
  text-decoration:none;letter-spacing:-.02em;white-space:nowrap;
  display:flex;align-items:center;min-height:44px}
.brand span{color:var(--teal)}
.nav{display:flex;gap:1.4rem;margin-left:auto;align-items:center}
.nav a{color:var(--slate);text-decoration:none;font-size:.9375rem;font-weight:500;
  white-space:nowrap;display:flex;align-items:center;min-height:44px}
.nav a:hover{color:var(--ink)}
.hdr-cta{display:flex;align-items:center;gap:1rem}
.hdr-cta .btn{padding:.7rem 1.15rem;font-size:.9375rem;white-space:nowrap;min-height:44px}
.login{color:var(--slate);text-decoration:none;font-size:.9375rem;font-weight:500;
  white-space:nowrap;display:flex;align-items:center;min-height:44px}
.login:hover{color:var(--ink)}
.burger{display:none;background:none;border:1.5px solid var(--rule-2);border-radius:8px;
  width:44px;height:44px;cursor:pointer;margin-left:auto;align-items:center;justify-content:center}
.burger span{display:block;width:18px;height:1.5px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;
  height:1.5px;background:var(--ink)}
.burger span::before{top:-5px}.burger span::after{top:5px}

@media (max-width:940px){
  .nav,.hdr-cta{display:none}
  .burger{display:flex}
  .hdr.open .nav{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;
    gap:0;background:#fff;border-bottom:1px solid var(--rule);padding:.5rem 0;margin:0}
  .hdr.open .nav a{padding:.9rem var(--gut);border-top:1px solid var(--rule)}
  .hdr.open .hdr-cta{display:flex;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:.75rem;background:#fff;padding:1rem var(--gut) 1.25rem;
    border-bottom:1px solid var(--rule)}
  .hdr.open .hdr-cta .btn{width:100%;padding:.95rem}
}

/* ---------- hero ---------- */

.hero::after{content:"";position:absolute;right:-18%;top:-32%;width:56rem;height:56rem;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(111,199,197,.14) 0%,rgba(111,199,197,0) 62%)}
.hero .wrap{position:relative;z-index:1}

.hero .eyebrow{color:var(--teal-bright)}



.trust{font-size:.875rem;color:#7E93A6;margin:0}

.hero-stats .fig{font-family:var(--serif);font-size:clamp(1.4rem,2.6vw,2rem);color:#fff;line-height:1}
.hero-stats .lbl{font-size:.75rem;color:#7E93A6;margin-top:.35rem;letter-spacing:.04em}

/* product visual */










.mock-bars i{flex:1;background:var(--teal-bright);opacity:.55;border-radius:1px}

.mock-play::after{content:"";border-left:7px solid #0B1B2B;border-block:4.5px solid transparent;
  margin-left:2px}

@media (max-width:860px){
  
  
  
  /* the phone overlay was covering the cover's sub-line, which repeats the
     hero copy anyway — drop it and give the phone more clearance */
  
  
  
}

/* ---------- generic cards ---------- */
.grid{display:grid;gap:1.25rem}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:1.6rem;transition:border-color .15s ease,box-shadow .15s ease}
.card:hover{border-color:var(--rule-2);box-shadow:var(--shadow)}
.card h3{font-size:1.125rem;margin:0 0 .4rem}
.card p{font-size:.9375rem;color:var(--slate);margin:0}
.tag{display:inline-block;font-size:.6875rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--teal);background:var(--teal-tint);
  padding:.28rem .55rem;border-radius:5px;margin-bottom:.85rem}
.num{font-family:var(--serif);font-size:1.5rem;color:var(--navy);opacity:.34;line-height:1;
  display:block;margin-bottom:.6rem}

/* problem */
.problem{background:var(--tint)}
.problem .card{background:var(--paper)}
.problem .card h3{font-size:1rem}
.transition-line{margin-top:2.5rem;font-family:var(--serif);font-size:clamp(1.15rem,2.2vw,1.5rem);
  color:var(--ink);max-width:46ch}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
@media (max-width:1000px){.pillars{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.pillars{grid-template-columns:1fr}}
.pillar{border-top:3px solid var(--navy);padding-top:1.1rem}
.pillar .k{font-size:.6875rem;font-weight:800;letter-spacing:.16em;color:var(--teal);
  text-transform:uppercase}
.pillar h3{font-size:1.2rem;margin:.35rem 0 .45rem}
.pillar p{font-size:.9375rem;color:var(--slate);margin:0}

/* formats */
.formats{background:var(--navy-deep);color:#C4D2DE}
.formats .h2{color:#fff}.formats .lede{color:#9DB2C4}.formats .eyebrow{color:var(--teal-bright)}
.fmt{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-lg);padding:1.75rem;display:flex;flex-direction:column}
.fmt .k{font-size:.6875rem;font-weight:800;letter-spacing:.16em;color:var(--teal-bright);
  text-transform:uppercase}
.fmt h3{color:#fff;font-size:1.35rem;margin:.5rem 0 .6rem}
.fmt p{color:#9DB2C4;font-size:.9375rem;flex:1}
.fmt .btn{margin-top:1.25rem;align-self:flex-start}

/* ---------- audio player ---------- */
.player{background:var(--navy-deep);border-radius:var(--r-lg);padding:clamp(1.5rem,3vw,2.25rem);
  color:#C4D2DE;display:grid;grid-template-columns:auto 1fr;gap:clamp(1.25rem,3vw,2rem);
  align-items:center;border:1px solid rgba(255,255,255,.1)}
.player-art{width:clamp(88px,12vw,132px);aspect-ratio:6/9;border-radius:4px;
  background:linear-gradient(150deg,#16324F,#0B1B2B);border:1px solid rgba(255,255,255,.14);
  padding:.85rem .7rem;display:flex;flex-direction:column}
.player-art .t{font-family:var(--serif);color:#fff;font-size:.75rem;line-height:1.15}
.player-art .r{width:22px;height:2px;background:var(--teal-bright);margin-top:.4rem}
.player-meta .k{font-size:.6875rem;font-weight:800;letter-spacing:.14em;color:var(--teal-bright);
  text-transform:uppercase}
.player-meta h3{color:#fff;font-size:clamp(1.05rem,2vw,1.35rem);margin:.4rem 0 1rem}
.player-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.play-btn{width:52px;height:52px;border-radius:50%;background:var(--ochre);border:none;
  cursor:pointer;display:grid;place-items:center;flex:none}
.play-btn:hover{background:#e09a37}
.play-btn svg{width:18px;height:18px;fill:#0B1B2B}
.scrub{flex:1;min-width:150px;display:flex;align-items:center;gap:.75rem}
.scrub input[type=range]{flex:1;-webkit-appearance:none;appearance:none;
  height:44px;background:transparent;cursor:pointer;margin:0}
.scrub input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;
  background:rgba(255,255,255,.2)}
.scrub input[type=range]::-moz-range-track{height:4px;border-radius:2px;
  background:rgba(255,255,255,.2)}
.scrub input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;
  border-radius:50%;background:var(--teal-bright);cursor:pointer;margin-top:-5px}
.scrub input[type=range]::-moz-range-thumb{width:14px;height:14px;border:none;border-radius:50%;
  background:var(--teal-bright);cursor:pointer}
.time{font-size:.8125rem;color:#7E93A6;font-variant-numeric:tabular-nums;white-space:nowrap}
.speed{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.2);
  border-radius:7px;padding:.7rem .65rem;min-height:44px;font:600 .8125rem var(--sans);cursor:pointer}
.player-note{font-size:.8125rem;color:#7E93A6;margin:1rem 0 0}
@media (max-width:620px){.player{grid-template-columns:1fr}.player-art{display:none}}

/* ---------- not-for ---------- */
.notfor{background:var(--tint)}
.notfor ul{display:grid;gap:.85rem;max-width:62ch}
.notfor li{display:flex;gap:.75rem;font-size:1rem;color:var(--ink-2)}
.notfor li::before{content:"—";color:var(--clay);font-weight:700;flex:none}
.notfor .close{margin-top:2rem;font-family:var(--serif);font-size:1.15rem;color:var(--ink);max-width:52ch}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;counter-reset:s}
@media (max-width:820px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.step{border-top:2px solid var(--rule);padding-top:1.1rem}
.step .n{font-family:var(--serif);font-size:1.6rem;color:var(--teal)}
.step h3{font-size:1.0625rem;margin:.3rem 0 .35rem}
.step p{font-size:.9375rem;color:var(--slate);margin:0}

/* ---------- pricing ---------- */
.tiers{display:grid;gap:1.5rem;justify-content:center;
  grid-template-columns:repeat(auto-fit,minmax(280px,360px))}
.tier{border:1px solid var(--rule);border-radius:var(--r-lg);padding:2rem;background:#fff;
  display:flex;flex-direction:column;position:relative;text-align:left}
.tier.featured{border:2px solid var(--navy);box-shadow:var(--shadow-lg)}
.badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--navy-deep);
  color:#fff;font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:.4rem .85rem;border-radius:20px;white-space:nowrap}
.tier h3{font-size:1.25rem;margin:0 0 .3rem}
.tier .sum{font-size:.9375rem;color:var(--slate);margin:0 0 1.25rem}
.price{display:flex;align-items:baseline;gap:.35rem;margin-bottom:1.5rem}
.price .cur{font-size:1.15rem;color:var(--slate);font-weight:600}
.price .amt{font-family:var(--serif);font-size:3rem;color:var(--ink);line-height:1}
.price .per{font-size:.875rem;color:var(--mute);margin-left:.4rem}
.tier ul{display:grid;gap:.6rem;margin-bottom:1.75rem;flex:1}
.tier li{display:flex;gap:.6rem;font-size:.9375rem;color:var(--ink-2);line-height:1.45}
.tier li svg{flex:none;width:16px;height:16px;margin-top:.22rem;stroke:var(--green);
  stroke-width:2.5;fill:none}
.guarantee{margin-top:2rem;font-size:.9375rem;color:var(--slate);text-align:center;max-width:52ch;
  margin-inline:auto}
.price-note{font-size:.8125rem;color:var(--mute);text-align:center;margin-top:.75rem}

/* ---------- faq ---------- */
.faq-list{max-width:760px;margin-inline:auto;border-top:1px solid var(--rule)}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-q{width:100%;background:none;border:none;text-align:left;cursor:pointer;
  padding:1.35rem 2.5rem 1.35rem 0;position:relative;
  font:600 1.0625rem/1.45 var(--sans);color:var(--ink)}
.faq-q::after{content:"";position:absolute;right:.35rem;top:50%;width:10px;height:10px;
  border-right:2px solid var(--slate);border-bottom:2px solid var(--slate);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s ease}
.faq-q[aria-expanded=true]::after{transform:translateY(-30%) rotate(-135deg)}
.faq-a{display:none;padding:0 2.5rem 1.5rem 0;color:var(--slate);font-size:1rem}
.faq-a.open{display:block}

/* ---------- author ---------- */
.author{background:var(--tint)}
.author-in{display:grid;grid-template-columns:auto 1fr;gap:2rem;align-items:start;
  max-width:820px;margin-inline:auto}
.avatar{width:96px;height:96px;border-radius:50%;background:var(--navy-deep);color:#fff;
  display:grid;place-items:center;font-family:var(--serif);font-size:2rem;flex:none}
@media (max-width:600px){.author-in{grid-template-columns:1fr}}

/* ---------- final cta ---------- */
.final{background:var(--navy-deep);color:#9DB2C4;text-align:center;position:relative;overflow:hidden}
.final::after{content:"";position:absolute;left:50%;top:-60%;width:52rem;height:52rem;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(111,199,197,.12) 0%,rgba(111,199,197,0) 60%)}
.final .wrap{position:relative;z-index:1}
.final h2{color:#fff;font-size:clamp(1.9rem,4.2vw,3rem);max-width:20ch;margin:0 auto .9rem}
.final p{color:#9DB2C4;max-width:48ch;margin:0 auto 2rem}
.final-ctas{display:flex;gap:.85rem;justify-content:center;flex-wrap:wrap}

/* ---------- footer ---------- */
.ftr{background:var(--ink);color:#8A97A4;padding-block:3.5rem 2rem;font-size:.9375rem}
.ftr-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:2rem;margin-bottom:2.5rem}
@media (max-width:800px){.ftr-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.ftr-grid{grid-template-columns:1fr}}
.ftr h3{color:#fff;font-family:var(--sans);font-size:.75rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;margin:0 0 1rem}
.ftr a{color:#98A5B2;text-decoration:none;display:flex;align-items:center;
  min-height:44px;padding:.35rem 0}
.ftr a:hover{color:#fff}
.ftr-brand{font-family:var(--serif);color:#fff;font-size:1.15rem;margin-bottom:.5rem}
.ftr-note{font-size:.875rem;color:#65707C;max-width:34ch}
.ftr-btm{border-top:1px solid #2C3948;padding-top:1.75rem;display:flex;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;font-size:.8125rem;color:#65707C}

/* ---------- document pages (legal, help, contact) ---------- */
.doc{padding-block:clamp(2.5rem,6vw,4.5rem)}
.doc-wrap{max-width:760px}
.doc h1{font-size:clamp(2rem,4.5vw,3rem);margin:0 0 .5rem}
.doc-meta{font-size:.875rem;color:var(--mute);margin:0 0 1.5rem}
.doc h2{font-size:1.3rem;margin:2.5rem 0 .75rem;padding-bottom:.4rem;
  border-bottom:1px solid var(--rule)}
.doc p{margin:0 0 1rem;color:var(--ink-2)}
.doc .lede{margin-bottom:2rem}
ul.doc-list{display:grid;gap:.6rem;margin:0 0 1.25rem}
ul.doc-list li{display:flex;gap:.7rem;color:var(--ink-2)}
ul.doc-list li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--teal);margin-top:.62rem}
.callout{border-left:4px solid var(--navy);background:var(--navy-tint);
  border-radius:0 var(--r) var(--r) 0;padding:1.1rem 1.3rem;margin:0 0 2rem}
.callout.warning{border-left-color:var(--clay);background:var(--clay-tint)}
.callout strong{display:block;color:var(--ink);margin-bottom:.35rem;font-size:1.0625rem}
.callout p{margin:0;color:var(--ink-2)}

/* ---------- crypto-only disclosure + trust ---------- */
.paymethod{display:inline-flex;flex-direction:column;gap:.25rem;align-items:center;
  border:1.5px solid var(--rule-2);border-radius:var(--r);padding:.9rem 1.4rem;
  margin:0 auto 2.5rem;background:var(--tint);max-width:32rem}
.paymethod-k{font-size:.6875rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal)}
.paymethod strong{font-size:1.0625rem;color:var(--ink)}
.paymethod-d{font-size:.875rem;color:var(--slate)}
.cta-note{font-size:.8125rem;color:var(--mute);margin:1rem 0 0}
.trustbox{margin:3rem auto 0;max-width:36rem;text-align:left;border:1px solid var(--rule);
  border-radius:var(--r-lg);padding:1.6rem 1.8rem;background:var(--tint)}
.trustbox h3{font-size:1.1rem;margin:0 0 .4rem}
.trustbox p{font-size:.9375rem;color:var(--slate);margin:0 0 1rem}
.trustbox ul{display:grid;gap:.5rem}
.trustbox li{display:flex;gap:.6rem;font-size:.9375rem;color:var(--ink-2);align-items:flex-start}
.trustbox li svg{flex:none;width:16px;height:16px;margin-top:.2rem;stroke:var(--green);
  stroke-width:2.5;fill:none}

/* ============================================================================
   CHECKOUT + PAYMENT
   ========================================================================== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.co{padding:clamp(2rem,5vw,3.5rem) 0 var(--step)}
.co-wrap{max-width:1040px}
.co-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(1.5rem,3vw,3rem);
  align-items:start}
.co-main h1{font-size:clamp(1.75rem,3.4vw,2.4rem);line-height:1.15;margin:0 0 .6rem}
.co-loading{color:var(--mute);padding:2rem 0}

.co-fieldset{border:0;padding:0;margin:0 0 2.25rem}
.co-fieldset legend{display:flex;align-items:center;gap:.65rem;padding:0;
  font:600 1.125rem/1.3 var(--sans);color:var(--ink);margin-bottom:.5rem}
.co-step{display:inline-grid;place-items:center;width:1.75rem;height:1.75rem;
  border-radius:50%;background:var(--navy-deep);color:#fff;font-size:.875rem;flex:none}
.co-hint{margin:.5rem 0 0;font-size:.9375rem;color:var(--mute);line-height:1.55}

/* -- coin picker -- */
.coins{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:.75rem;margin-top:1rem}
.coin{position:relative;display:flex;gap:.75rem;padding:1rem 1.1rem;cursor:pointer;
  border:1.5px solid var(--rule-2);border-radius:var(--r);background:var(--paper);
  transition:border-color .12s ease, background-color .12s ease}
.coin:hover{border-color:var(--navy)}
.coin input{position:absolute;top:1.15rem;right:1.1rem;width:1.15rem;height:1.15rem;
  accent-color:var(--navy-deep);cursor:pointer;margin:0}
.coin.sel{border-color:var(--navy-deep);background:var(--navy-tint);box-shadow:var(--shadow)}
.coin:focus-within{outline:3px solid var(--teal);outline-offset:2px}
.coin-body{display:flex;flex-direction:column;gap:.15rem;padding-right:1.75rem;min-width:0}
.coin-top{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.coin-sym{font:700 1.0625rem/1.2 var(--sans);color:var(--ink)}
.coin-name{font-size:.9375rem;color:var(--slate)}
.coin-net{font-size:.8125rem;color:var(--slate);letter-spacing:.01em}
.coin-est{display:flex;flex-direction:column;margin-top:.4rem}
.coin-est-n{font:600 .9375rem/1.3 var(--sans);color:var(--teal)}
/* --slate not --mute: on the tinted .coin.sel background --mute is 4.40:1 */
.coin-est-l{font-size:.75rem;color:var(--slate)}
.coin-off{opacity:.6;cursor:not-allowed;background:var(--tint)}
.coin-off:hover{border-color:var(--rule-2)}
.coin-off-why{margin-top:.35rem;font-size:.8125rem;color:var(--clay)}

/* -- fields -- */
.field{margin-bottom:1.25rem}
.field label{display:block;font:600 .9375rem/1.4 var(--sans);color:var(--ink);margin-bottom:.4rem}
.field .opt{font-weight:400;color:var(--mute)}
.field input{width:100%;font:400 1.0625rem/1.4 var(--sans);color:var(--ink);
  padding:.85rem 1rem;border:1.5px solid var(--rule-2);border-radius:var(--r);
  background:var(--paper);min-height:48px}
.field input:focus-visible{outline:3px solid var(--teal);outline-offset:1px;border-color:var(--navy)}
.field-err,.form-err{margin:.5rem 0 0;font-size:.9375rem;color:var(--clay);font-weight:600}
.form-err{margin-bottom:1rem}

.check{display:flex;gap:.75rem;align-items:flex-start}
.check input{width:1.5rem;height:1.5rem;margin:.1rem 0 0;flex:none;accent-color:var(--navy-deep)}
.check label{font-size:.9375rem;line-height:1.6;color:var(--ink-2)}
.btn-lg{width:100%;margin-top:1.25rem;padding:1.05rem 1.6rem;font-size:1.0625rem;min-height:56px}

/* -- order summary -- */
.summary{border:1px solid var(--rule);border-radius:var(--r-lg);padding:1.5rem;
  background:var(--tint);position:sticky;top:5.5rem}
.summary h2{margin:0 0 1rem;font-size:1.0625rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--slate)}
.sum-item{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
.sum-item strong{display:block;color:var(--ink)}
.sum-note{display:block;font-size:.875rem;color:var(--mute);margin-top:.2rem;line-height:1.5}
.sum-price{font:700 1.25rem/1 var(--sans);color:var(--ink);white-space:nowrap}
.sum-list{list-style:none;margin:1.1rem 0;padding:1.1rem 0 0;border-top:1px solid var(--rule-2);
  font-size:.875rem;color:var(--slate);display:grid;gap:.35rem}
.sum-list li{padding-left:1.25rem;position:relative;line-height:1.5}
.sum-list li::before{content:"";position:absolute;left:0;top:.5rem;width:.5rem;height:.5rem;
  border-radius:50%;background:var(--teal)}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;
  padding-top:1rem;border-top:1px solid var(--rule-2);font-weight:600;color:var(--ink)}
.sum-fine{margin:.85rem 0 0;font-size:.8125rem;color:var(--mute);line-height:1.55}
.co-side .trustbox{margin-top:1rem}

/* -- progress -- */
.progress{margin-bottom:clamp(1.75rem,4vw,2.75rem)}
.progress ol{list-style:none;display:flex;margin:0;padding:0;gap:.25rem}
.pstep{flex:1;display:flex;flex-direction:column;align-items:center;gap:.45rem;
  position:relative;min-width:0}
.pstep::before{content:"";position:absolute;top:.9rem;left:calc(-50% + 1.1rem);
  width:calc(100% - 2.2rem);height:2px;background:var(--rule-2)}
.pstep:first-child::before{display:none}
.pstep.done::before,.pstep.now::before{background:var(--teal)}
.pdot{display:grid;place-items:center;width:1.8rem;height:1.8rem;border-radius:50%;
  font:600 .8125rem/1 var(--sans);background:var(--paper);color:var(--mute);
  border:2px solid var(--rule-2);position:relative;z-index:1;flex:none}
.pstep.done .pdot{background:var(--teal);border-color:var(--teal);color:#fff}
.pstep.now .pdot{background:var(--navy-deep);border-color:var(--navy-deep);color:#fff}
.plabel{font-size:.8125rem;color:var(--mute);text-align:center;line-height:1.3}
.pstep.now .plabel{color:var(--ink);font-weight:600}
@media (max-width:560px){
  .plabel{font-size:.6875rem}
  .pstep::before{top:.8rem}
}

/* -- payment page -- */
.pay-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(1.5rem,3vw,2.5rem);
  align-items:start}
.paypanel h1{font-size:clamp(1.5rem,3vw,2rem);line-height:1.2;margin:0 0 1.25rem}

.netwarn{border:1.5px solid var(--clay);background:var(--clay-tint);border-radius:var(--r);
  padding:1rem 1.15rem;margin-bottom:1.5rem}
.netwarn strong{display:block;color:var(--clay);margin-bottom:.3rem}
.netwarn p{margin:0;font-size:.9375rem;line-height:1.55;color:var(--ink-2)}

.qrbox{display:flex;flex-direction:column;align-items:center;gap:.75rem;
  padding:1.5rem;border:1px solid var(--rule);border-radius:var(--r-lg);
  background:var(--paper);margin-bottom:1.5rem}
.qrbox svg{width:min(232px,60vw);height:auto;display:block}
.qrnote{margin:0;font-size:.8125rem;color:var(--mute);text-align:center}

.copyrow{margin-bottom:1.25rem;padding-bottom:1.25rem;border-bottom:1px solid var(--rule)}
.copyrow:last-of-type{border-bottom:0}
.copyrow.urgent{border-left:4px solid var(--clay);padding-left:1rem;background:var(--clay-tint);
  border-radius:0 var(--r) var(--r) 0;padding-top:.85rem}
.copyrow-label{font:600 .8125rem/1.3 var(--sans);letter-spacing:.05em;text-transform:uppercase;
  color:var(--slate);margin-bottom:.5rem}
.copyrow-line{display:flex;gap:.75rem;align-items:stretch;flex-wrap:wrap}
.copyrow-val{flex:1 1 12rem;min-width:0;padding:.8rem 1rem;background:var(--tint);
  border:1px solid var(--rule-2);border-radius:var(--r);font:600 1rem/1.5 var(--sans);
  color:var(--ink);word-break:break-all;display:flex;align-items:center}
.copyrow-val.mono{font:400 .9375rem/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.btn-copy{flex:none;min-height:48px;padding:.75rem 1.1rem;font-size:.9375rem;
  background:transparent;color:var(--navy-deep);border-color:var(--rule-2)}
.btn-copy:hover{border-color:var(--navy);background:var(--tint)}
.btn-copy.copied{background:var(--teal);border-color:var(--teal);color:#fff}

.quote{margin:1.25rem 0 0;font:600 .9375rem/1.4 var(--sans);color:var(--slate)}
.quote.expired{color:var(--clay)}

.payside{border:1px solid var(--rule);border-radius:var(--r-lg);padding:1.5rem;
  background:var(--tint);position:sticky;top:5.5rem}
.paystate{padding:1rem 1.15rem;border-radius:var(--r);background:var(--paper);
  border:1px solid var(--rule-2);margin-bottom:1.25rem}
.paystate-label{font:700 1.0625rem/1.3 var(--sans);color:var(--ink);margin-bottom:.3rem}
.paystate-msg{margin:0;font-size:.9375rem;line-height:1.55;color:var(--slate)}
.paystate .pulse{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;
  background:var(--mute);margin-bottom:.5rem}
/* Tone names must track lib/status.js exactly: waiting | neutral | progress |
   success | warning | error. A tone with no rule renders as an unstyled box. */
.tone-waiting{border-color:var(--ochre);background:var(--amber-tint)}
.tone-waiting .pulse{background:var(--ochre);animation:pulse 1.8s ease-in-out infinite}
.tone-neutral .pulse{background:var(--mute)}
.tone-progress .pulse{background:var(--teal);animation:pulse 1.4s ease-in-out infinite}
.tone-success{border-color:var(--green);background:var(--green-tint)}
.tone-success .pulse{background:var(--green)}
.tone-warning{border-color:var(--ochre);background:var(--amber-tint)}
.tone-error{border-color:var(--clay);background:var(--clay-tint)}
.tone-error .pulse{background:var(--clay)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.paystate .pulse{animation:none}}

.paymeta{display:grid;grid-template-columns:auto 1fr;gap:.4rem .9rem;margin:0 0 1.1rem;
  font-size:.875rem;padding-top:1.1rem;border-top:1px solid var(--rule-2)}
.paymeta dt{color:var(--mute)}
.paymeta dd{margin:0;color:var(--ink);text-align:right;word-break:break-word}

.paydone{border:1.5px solid var(--green);background:var(--green-tint);border-radius:var(--r-lg);
  padding:clamp(1.5rem,3vw,2.25rem)}
.paydone:focus{outline:3px solid var(--teal);outline-offset:3px}
.paydone h2{margin:0 0 .6rem;font-size:clamp(1.3rem,2.6vw,1.75rem);color:var(--ink)}
.paydone p{color:var(--ink-2);line-height:1.6}
.paydone .btn{margin-top:.5rem;width:auto}

@media (max-width:860px){
  .co-grid,.pay-grid{grid-template-columns:1fr}
  .summary,.payside{position:static}
  .co-side{order:-1}
  .pay-grid .payside{order:-1}
}

/* ============================================================================
   CUSTOMER LIBRARY + LOGIN
   ========================================================================== */
.narrow{max-width:640px}
.lib-wrap{max-width:960px}

.loginbox{margin:2rem 0 1.5rem;padding:1.75rem;border:1px solid var(--rule);
  border-radius:var(--r-lg);background:var(--tint)}
.loginbox .btn-lg{margin-top:.5rem}
.loginhelp{margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--rule)}
.loginhelp h2{font-size:1.125rem;margin:0 0 .75rem}

.lib-head{margin-bottom:2rem}
.lib-head h1{font-size:clamp(1.75rem,3.6vw,2.5rem);line-height:1.15;margin:.35rem 0 .6rem}

.lib-bundle{display:flex;gap:1.25rem;align-items:center;justify-content:space-between;
  flex-wrap:wrap;padding:1.35rem 1.5rem;margin-bottom:2.5rem;
  border:1.5px solid var(--navy-deep);border-radius:var(--r-lg);background:var(--navy-tint)}
.lib-bundle strong{display:block;color:var(--ink);font-size:1.0625rem}
.lib-bundle-note{display:block;font-size:.875rem;color:var(--slate);margin-top:.2rem}

.lib-sec{margin-bottom:3rem}
.lib-sec h2{font-size:clamp(1.25rem,2.4vw,1.6rem);margin:0 0 .35rem;
  padding-bottom:.6rem;border-bottom:2px solid var(--rule)}
.lib-blurb{margin:.75rem 0 1.25rem;color:var(--slate)}

.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.lib-card{display:flex;flex-direction:column;gap:.5rem;padding:1.25rem;
  border:1px solid var(--rule);border-radius:var(--r);background:var(--paper);
  box-shadow:var(--shadow)}
.lib-card h3{margin:0;font-size:1.0625rem;line-height:1.3;color:var(--ink)}
.lib-card p{margin:0;font-size:.9375rem;color:var(--slate);line-height:1.55;flex:1}
.lib-card-foot{display:flex;align-items:center;gap:.85rem;margin-top:.5rem;flex-wrap:wrap}
.lib-card-foot .btn{padding:.7rem 1.1rem;font-size:.9375rem;min-height:44px}
.lib-size{font-size:.8125rem;color:var(--mute)}

.lib-tracks{list-style:none;margin:0;padding:0;counter-reset:track}
.lib-track{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem 1rem;
  align-items:center;padding:.9rem 0;border-bottom:1px solid var(--rule)}
.lib-track:last-child{border-bottom:0}
.lib-track-meta{display:flex;flex-direction:column;min-width:0}
.lib-track-title{font-weight:600;color:var(--ink);font-size:.9375rem}
.lib-track-size{font-size:.8125rem;color:var(--mute)}
.lib-track-pending{font-size:.8125rem;color:var(--amber)}
.lib-track.pending .lib-track-title{color:var(--slate)}
.lib-track audio{grid-column:1/-1;width:100%;height:40px}
.lib-track-dl{font-size:.875rem;color:var(--navy-deep);font-weight:600;
  display:inline-flex;align-items:center;min-height:44px;padding:0 .25rem}

.lib-foot{margin-top:3rem;padding-top:1.75rem;border-top:1px solid var(--rule)}
.lib-foot h2{font-size:1.0625rem;margin:0 0 .5rem}
.lib-foot p{margin:0;color:var(--slate);font-size:.9375rem;line-height:1.6}

@media (max-width:560px){
  .lib-bundle{flex-direction:column;align-items:stretch}
  .lib-bundle .btn{width:100%}
  .lib-track{grid-template-columns:1fr}
}

.preview-cta{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:2rem}
.preview-note{font-size:.875rem;color:var(--slate)}
/* .player sits on --navy-deep with light text. An earlier version of this rule
   used --ink here, which is near-black on near-black: invisible. */
.player-pending .player-meta h3{font-size:1.125rem;color:#fff;margin:.25rem 0 .75rem}
.player-pending .player-note{color:#AFC0CF}

/* ============================================================================
   HERO REDESIGN — read it / listen to it / apply it
   ========================================================================== */
.hero{background-color:#0B1B2B;
  background-image:linear-gradient(168deg,#0B1B2B 0%,#102436 58%,#0E2031 100%);
  color:#E8EEF4;padding:clamp(3rem,7vw,5.5rem) 0 clamp(3.5rem,8vw,6rem);
  position:relative;overflow:hidden}
/* One very soft light source, no particles or animated backgrounds (§10). */
.hero::before{content:"";position:absolute;inset:-30% -10% auto auto;width:60%;
  aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(111,199,197,.10),transparent 62%)}
.hero .wrap{position:relative}

.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero-copy .eyebrow{color:var(--teal-bright);letter-spacing:.16em;
  text-transform:uppercase;font-size:.75rem;font-weight:700;margin:0 0 1rem}
.hero h1{font-size:clamp(2.1rem,5vw,3.6rem);line-height:1.06;margin:0 0 1.1rem;
  letter-spacing:-.02em;color:#fff}
.hero .sub{font-size:clamp(1rem,1.6vw,1.1875rem);line-height:1.6;color:#B9C7D4;
  margin:0 0 1.75rem;max-width:34em}
.hero-ctas{display:flex;gap:.85rem;flex-wrap:wrap;margin-bottom:1.1rem}
.hero-ctas .btn{min-height:52px}
.hero .trust{font-size:.875rem;color:#8FA3B5;margin:0 0 2rem}

.hero-stats{display:grid;grid-template-columns:repeat(4,auto);gap:clamp(1rem,3vw,2.25rem);
  justify-content:start;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.12)}
.hstat{display:flex;flex-direction:column;gap:.15rem}
/* Deliberately restrained (§4): these support the claim, they are not the claim. */
.hstat .fig{font:700 clamp(1.25rem,2.2vw,1.6rem)/1 var(--sans);color:#fff}
.hstat .lbl{font-size:.75rem;color:#8FA3B5;letter-spacing:.02em}

/* -- the product composition -- */
.hero-art{display:flex;flex-direction:column;align-items:center;gap:1.5rem}
.scene{position:relative;width:min(100%,420px);aspect-ratio:1/.92;
  perspective:1600px;perspective-origin:35% 40%}

/* The shadow lives on the WRAPPER, never on .book itself: a filter on an
   element with transform-style:preserve-3d forces the browser to flatten it,
   and the spine and fore-edge silently disappear. That is what turns this back
   into the plain rectangle the design is trying to avoid. */
.book-wrap{position:absolute;left:2%;top:0;width:66%;
  filter:drop-shadow(0 34px 44px rgba(0,0,0,.55))}
.book{position:relative;width:100%;transform-style:preserve-3d;
  transform:rotateY(19deg) rotateX(3deg)}
.book-face{display:block;border-radius:2px 4px 4px 2px;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),
             inset -1px 0 0 rgba(255,255,255,.10)}
.book-face img{display:block;width:100%;height:auto}
/* Spine and fore-edge give real depth without a raster mockup. */
.book-spine{position:absolute;left:0;top:0;height:100%;width:30px;
  transform:translateX(-30px) rotateY(-90deg);transform-origin:right center;
  background:linear-gradient(90deg,#050E17,#0F2130 55%,#16293A);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.10)}
/* The page block is barely turned toward us now, so it stays a hint rather
   than a bright white stripe competing with the cover. */
.book-edge{position:absolute;right:0;top:1.4%;height:97.2%;width:9px;
  transform:translateX(9px) rotateY(90deg);transform-origin:left center;
  background:repeating-linear-gradient(180deg,#C8D2DB 0 1px,#A9B6C2 1px 2px);
  opacity:.55}

.disc{position:absolute;right:0;bottom:6%;width:42%;border-radius:6px;
  overflow:hidden;transform:rotate(-2.5deg);
  box-shadow:0 22px 40px -14px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.08)}
.disc img{display:block;width:100%;height:auto}

/* -- inline sample player -- */
.hero-player{display:flex;align-items:center;gap:.9rem;width:min(100%,420px);
  padding:.8rem .95rem;border-radius:var(--r);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13)}
.hp-play{flex:none;width:46px;height:46px;border-radius:50%;cursor:pointer;
  border:0;background:var(--teal-bright);display:grid;place-items:center;
  transition:transform .12s ease,background-color .12s ease}
.hp-play:hover{background:#8ad6d4}
.hp-play:focus-visible{outline:3px solid #fff;outline-offset:2px}
.hp-icon{width:0;height:0;margin-left:3px;
  border-left:13px solid #06222B;border-top:9px solid transparent;
  border-bottom:9px solid transparent}
.hero-player.playing .hp-icon{margin-left:0;width:12px;height:15px;border:0;
  background:linear-gradient(90deg,#06222B 0 4px,transparent 4px 8px,#06222B 8px 12px)}
.hp-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:.2rem}
.hp-label{font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:#8FA3B5}
.hp-track{font-size:.875rem;color:#E8EEF4;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.hp-bar{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.16);
  overflow:hidden;margin-top:.15rem}
.hp-bar i{display:block;height:100%;width:0;background:var(--teal-bright);
  transition:width .2s linear}
.hp-time{font-size:.75rem;color:#8FA3B5;font-variant-numeric:tabular-nums;flex:none}

/* -- trust strip (§11) -- */
.trustbar{background:var(--tint);border-bottom:1px solid var(--rule)}
.trustbar ul{list-style:none;margin:0;padding:1.1rem 0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:1rem}
.trustbar li{display:flex;align-items:center;justify-content:center;gap:.6rem;
  font-size:.9375rem;color:var(--ink-2);font-weight:600;text-align:center}
.ts-ico{flex:none;width:22px;height:22px;border-radius:50%;background:var(--teal-tint);
  position:relative}
.ts-ico::after{content:"";position:absolute;left:7px;top:5px;width:6px;height:11px;
  border:2px solid var(--teal);border-top:0;border-left:0;transform:rotate(42deg)}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:2.5rem}
  /* §27: on mobile the copy and CTAs come first, then the product, then stats. */
  .hero-copy{display:contents}
  .hero-copy .eyebrow{order:1}
  .hero h1{order:2}
  .hero .sub{order:3}
  .hero-ctas{order:4}
  .hero .trust{order:5}
  .hero-art{order:6;margin:.5rem 0}
  .hero-stats{order:7;grid-template-columns:repeat(2,1fr);gap:1.25rem;
    justify-content:stretch;text-align:left}
  .scene{width:min(100%,340px);aspect-ratio:1/.95}
  .trustbar ul{grid-template-columns:repeat(2,1fr);gap:.85rem}
  .trustbar li{justify-content:flex-start;text-align:left;font-size:.875rem}
}
@media (max-width:560px){
  .scene{width:min(100%,290px)}
  .book{transform:rotateY(14deg) rotateX(2deg)}
  .hero-ctas .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .hp-bar i{transition:none}
}

/* ── §18 workflow demonstration ──────────────────────────────────────────── */
.wfdemo{padding:var(--step) 0;background:var(--tint)}
.wfdemo .eyebrow{color:var(--teal);letter-spacing:.14em;text-transform:uppercase;
  font-size:.75rem;font-weight:700;margin:0 0 .6rem}
.wf-chain{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);
  align-items:start;margin-top:2.25rem}
.wf-seed{position:relative;padding:1.25rem 1.35rem;border-radius:var(--r);
  background:var(--navy-deep);color:#fff;font:600 1.0625rem/1.4 var(--sans);
  box-shadow:var(--shadow)}
.wf-seed-l{display:block;font:700 .6875rem/1 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal-bright);margin-bottom:.5rem}
.wf-out{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:.75rem}
.wf-step{display:flex;flex-direction:column;gap:.15rem;padding:.9rem 1rem;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);
  position:relative;transition:border-color .12s ease,transform .12s ease}
.wf-step:hover{border-color:var(--teal);transform:translateY(-2px)}
.wf-n{font:700 .6875rem/1 var(--sans);color:var(--teal);letter-spacing:.1em}
.wf-l{font:600 .9375rem/1.3 var(--sans);color:var(--ink)}
.wf-note{font-size:.8125rem;color:var(--slate);line-height:1.45}
.wf-foot{margin:1.75rem 0 0;font-size:.9375rem;color:var(--slate)}

/* ── §22 value stack ─────────────────────────────────────────────────────── */
.vstack{padding:var(--step) 0;background:var(--paper)}
.vs-list{list-style:none;margin:2rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0}
.vs-list li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.95rem 1.1rem;border-bottom:1px solid var(--rule)}
.vs-k{font-weight:600;color:var(--ink);font-size:.9375rem}
.vs-v{font-size:.875rem;color:var(--slate);text-align:right}

@media (max-width:820px){
  .wf-chain{grid-template-columns:1fr;gap:1.25rem}
  .wf-out{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .wf-step:hover{transform:none}
}

/* ── §25 final call to action ────────────────────────────────────────────── */
.final-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
  gap:clamp(2rem,5vw,4rem);align-items:center}
.final-2{color:var(--teal-bright)}
.final-art{position:relative;min-height:270px}
.final-art .fa-book{width:62%;border-radius:2px;
  box-shadow:0 26px 44px -14px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.10);
  transform:rotate(-3deg)}
.final-art .fa-disc{position:absolute;right:0;bottom:4%;width:44%;border-radius:6px;
  box-shadow:0 20px 34px -12px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.09);
  transform:rotate(3deg)}
@media (max-width:820px){
  .final-grid{grid-template-columns:1fr}
  .final-art{order:-1;min-height:0;max-width:300px;margin:0 auto}
}