:root{
  --paper:#f8f5ed;
  --paper-2:#f1ecdf;
  --paper-3:#e9e3d2;
  --card:#fffdf7;
  --ink:#26221a;
  --ink-soft:rgba(38,34,26,.68);
  --ink-faint:rgba(38,34,26,.45);
  --rule:rgba(38,34,26,.22);
  --rule-soft:rgba(38,34,26,.1);
  --green:#186a4b;
  --green-bright:#1e8a60;
  --green-soft:rgba(24,106,75,.08);
  --red:#c2402a;
  --red-soft:rgba(194,64,42,.85);
  --hl:rgba(255,203,64,.5);
  --display:'Young Serif',Georgia,serif;
  --body:'Newsreader',Georgia,serif;
  --mono:'Fragment Mono',ui-monospace,monospace;
  --hand:'Caveat',cursive;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-weight:300;
  font-size:1.05rem;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--hl);color:var(--ink)}

/* paper grain */
.grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:70;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- voices ---------- */
.mono{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}
.mono b{color:var(--green);font-weight:400}
.hand{font-family:var(--hand);color:var(--red);font-size:1.4em;line-height:1.1;display:inline-block;transform:rotate(-2deg)}
.money{color:var(--green);font-weight:500}
h2{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,4.4vw,3.2rem);line-height:1.08;letter-spacing:-.01em;margin-bottom:1.3rem}
h2 .g{color:var(--green)}
h2 .r{color:var(--red)}
.lede{font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--ink-soft);max-width:36em}
.eyebrow{font-family:var(--mono);font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:var(--green);margin-bottom:1.4rem;display:flex;align-items:center;gap:.9rem}
.eyebrow::before{content:'¶';color:var(--red);font-family:var(--body)}

/* highlighter sweep: the machine's mark */
.hl{background-image:linear-gradient(var(--hl),var(--hl));background-repeat:no-repeat;background-position:0 62%;background-size:0% .62em;transition:background-size 1s cubic-bezier(.22,1,.36,1) .3s;padding:0 .08em;margin:0 -.08em}
.in .hl,.hl.in{background-size:100% .62em}

/* ---------- reveals ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}.rv.d3{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none}
  .rv{opacity:1;transform:none;transition:none}
  .hl{background-size:100% .62em;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- red ink marks ---------- */
.stamp{display:inline-block;font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--red-soft);border:2px solid var(--red-soft);border-radius:3px;padding:.5em .9em;transform:rotate(-5deg);
  mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.3' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.5 -0.22'/%3E%3CfeComposite operator='in' in2='SourceGraphic'/%3E%3C/filter%3E%3Crect width='200' height='60' filter='url(%23r)'/%3E%3C/svg%3E");
  mask-size:cover;-webkit-mask-size:cover;opacity:0;scale:1.5}
.in .stamp{animation:stampIn .45s 1.4s cubic-bezier(.2,1.6,.35,1) forwards}
@keyframes stampIn{0%{opacity:0;scale:1.6;rotate:-1deg}70%{opacity:1;scale:.95}100%{opacity:1;scale:1;rotate:0deg}}
.circle-mark{position:absolute;pointer-events:none}
.circle-mark ellipse{fill:none;stroke:var(--red);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:600;stroke-dashoffset:600}
.in .circle-mark ellipse{animation:drawMark .7s 1.1s ease forwards}
@keyframes drawMark{to{stroke-dashoffset:40}}

/* ---------- masthead / nav ---------- */
.mast{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(248,245,237,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule-soft);transition:box-shadow .4s}
.mast.scrolled{box-shadow:0 10px 30px -18px rgba(38,34,26,.25)}
.mast-inner{max-width:1240px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:.95rem clamp(1.2rem,4vw,3rem)}
.wordmark{font-family:var(--display);font-size:1.05rem;letter-spacing:.02em;color:var(--ink);text-decoration:none}
.wordmark span{color:var(--green)}
.nav-links{display:flex;gap:1.7rem;align-items:center}
.nav-links a{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);text-decoration:none;transition:.3s}
.nav-links a:hover{color:var(--green)}
.nav-cta{border:1.5px solid var(--green);color:var(--green)!important;padding:.55em 1em;border-radius:2px}
.nav-cta:hover{background:var(--green);color:var(--paper)!important}
@media(max-width:780px){.nav-links a:not(.nav-cta){display:none}}

/* ---------- buttons ---------- */
.btn{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  padding:1em 1.6em;border-radius:2px;transition:.3s;display:inline-block}
.btn-green{background:var(--green);color:#f6f3e9;box-shadow:0 14px 30px -12px rgba(24,106,75,.5)}
.btn-green:hover{background:var(--green-bright);transform:translateY(-2px);box-shadow:0 18px 38px -12px rgba(24,106,75,.55)}
.btn-ghost{border:1px solid var(--rule);color:var(--ink-soft)}
.btn-ghost:hover{border-color:var(--green);color:var(--green)}

/* ---------- hero ---------- */
.hero{padding:7.5rem clamp(1.2rem,4vw,3rem) 0;max-width:1240px;margin:0 auto}
.hero-rules{border-top:3px double var(--rule);border-bottom:1px solid var(--rule-soft);display:flex;justify-content:space-between;gap:1rem;padding:.6rem .1rem;flex-wrap:wrap;position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2rem,4vw,4rem);align-items:center;padding:clamp(2.4rem,5vw,4.5rem) 0 0}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr}}
h1{font-family:var(--display);font-weight:400;font-size:clamp(2.5rem,5.6vw,4.4rem);line-height:1.05;letter-spacing:-.012em}
h1 .g{color:var(--green)}
.hero-sub{margin-top:1.5rem;font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--ink-soft);max-width:30em}
.hero-ctas{margin-top:2.2rem;display:flex;gap:.9rem;flex-wrap:wrap;align-items:center}
.hero-note{margin-top:1.1rem}
.hero-grid{display:block;position:relative;min-height:clamp(28rem,58vh,38rem)}
.hero-copy{position:relative;z-index:2;max-width:37em}
.plate{position:absolute;top:-4rem;right:max(-6vw,-5rem);bottom:-4rem;width:66%;overflow:hidden;pointer-events:none}
.plate video,.plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 32%;filter:saturate(.94)}
.plate::before{content:'';position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg,var(--paper) 0%,rgba(248,245,237,.94) 12%,rgba(248,245,237,.5) 36%,rgba(248,245,237,.16) 58%,rgba(248,245,237,.05) 78%,rgba(248,245,237,.45) 100%),
  linear-gradient(to bottom,var(--paper) 2%,rgba(248,245,237,.28) 32%,rgba(248,245,237,.12) 55%,rgba(248,245,237,.55) 85%,var(--paper) 100%)}
.plate .plate-tag{position:absolute;right:.4rem;bottom:2.6rem;z-index:2;font-family:var(--mono);font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
@media(max-width:960px){
  .hero{overflow:hidden}
  .hero-grid{min-height:0}
  .plate{position:absolute;inset:-2rem -6vw;width:auto;opacity:.5}
  .plate::before{background:linear-gradient(to bottom,var(--paper) 0%,rgba(248,245,237,.82) 35%,rgba(248,245,237,.86) 70%,var(--paper) 100%)}
  .plate .plate-tag{display:none}
}

/* ---------- odometer strip ---------- */
.tally{max-width:1240px;margin:clamp(3rem,6vw,5rem) auto 0;padding:0 clamp(1.2rem,4vw,3rem)}
.tally-box{border-top:3px double var(--rule);border-bottom:3px double var(--rule);padding:clamp(2rem,4.5vw,3.4rem) 1rem;text-align:center;position:relative}
.tally .mono{display:block;margin-bottom:1.2rem}
.odo{display:inline-flex;align-items:baseline;font-family:var(--display);font-size:clamp(3.4rem,10.5vw,8.2rem);line-height:1;color:var(--green);letter-spacing:.01em}
.odo .sym{margin-right:.06em}
.odo .dg{display:inline-block;height:1em;overflow:hidden}
.odo .dg span{display:block;line-height:1;transform:translateY(0);transition:transform 2.1s cubic-bezier(.16,1,.3,1)}
.odo .sep{margin:0 .04em}
.tally-sub{margin-top:1.3rem;font-size:1rem;color:var(--ink-soft);font-style:italic}
.tally-sub a{color:var(--green);text-decoration:none;border-bottom:1px solid rgba(24,106,75,.4)}
.tally-note{position:absolute;right:clamp(.5rem,4vw,3rem);top:-1.1rem;background:var(--paper);padding:0 .8em}

/* ---------- ticker ---------- */
.ticker{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--paper-2);overflow:hidden;padding:.85rem 0;margin-top:clamp(2.6rem,5vw,4rem)}
.ticker-track{display:flex;width:max-content;animation:tick 52s linear infinite;font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}
.ticker-track b{color:var(--green);font-weight:400}
.ticker-track .rd{color:var(--red)}
.ticker-track>span{padding-right:3.2rem}
@keyframes tick{to{transform:translateX(-50%)}}
.ticker:hover .ticker-track{animation-play-state:paused}


/* ---------- section scaffolding ---------- */
section{position:relative;padding:clamp(4.5rem,8.5vw,7.5rem) clamp(1.2rem,4vw,3rem)}
.wrap{max-width:1240px;margin:0 auto;position:relative}
.folio{display:flex;align-items:center;gap:1.2rem;margin-bottom:clamp(2.4rem,5vw,4rem)}
.folio::after{content:'';flex:1;height:1px;background:var(--rule-soft)}
.folio .mono{white-space:nowrap}

/* ---------- who I am ---------- */
.who-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
@media(max-width:900px){.who-grid{grid-template-columns:1fr}}
.who-grid .lede{color:var(--ink-soft);max-width:34em}
.who-grid .lede b{color:var(--ink);font-weight:500}
.who-grid .lede p{margin-bottom:1.1rem}
.bio-photo{float:right;width:min(270px,50%);margin:.3rem 0 1rem 1.6rem;background:var(--card);border:1px solid var(--rule-soft);
  padding:.6rem .6rem 1rem;border-radius:3px;box-shadow:0 20px 44px -22px rgba(38,34,26,.5);transform:rotate(1.8deg);position:relative}
.bio-photo img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 38%;display:block;border-radius:2px}
.bio-photo .tape{position:absolute;top:-11px;left:50%;transform:translateX(-50%) rotate(-2deg);width:92px;height:22px;
  background:rgba(240,235,215,.8);border-left:1px dashed rgba(38,34,26,.12);border-right:1px dashed rgba(38,34,26,.12);box-shadow:0 2px 5px rgba(0,0,0,.18)}
.bio-photo .cap{font-family:var(--hand);color:var(--red);font-size:1.1rem;text-align:center;margin-top:.55rem;transform:rotate(-1.5deg)}
@media(max-width:600px){.bio-photo{float:none;margin:0 auto 1.4rem;transform:rotate(-1.2deg)}}
.sig-row{display:flex;align-items:center;gap:1.2rem;margin-top:1.6rem}
.sig-row .sig-img{flex-shrink:0;height:56px;width:auto;transform:rotate(-2deg)}
.sig-row .byline{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);line-height:2}
.sig-row .byline b{color:var(--ink);font-weight:400}
.who-card{background:var(--card);border:1px solid var(--rule-soft);border-radius:5px;padding:clamp(1.6rem,3vw,2.2rem);box-shadow:0 24px 55px -30px rgba(38,34,26,.35)}
.who-card .mono{display:block;margin-bottom:1.2rem}
.who-row{padding:1.1rem 0;border-top:1px solid var(--rule-soft)}
.who-row .amt{display:block;font-family:var(--display);font-size:clamp(1.35rem,2.2vw,1.75rem);color:var(--green);line-height:1.15}
.who-row .what{display:block;font-size:.95rem;color:var(--ink-soft);margin-top:.4rem;line-height:1.55}
.who-card .note{margin-top:1rem;font-size:.85rem;font-style:italic;color:var(--ink-faint)}
.alt{background:var(--paper-2)}


/* ---------- ledger summary ---------- */
.ledger-rows{margin:2.6rem 0 3.4rem;border-top:1px solid var(--rule)}
.ledger-row{display:flex;align-items:baseline;gap:1rem;padding:1.05rem .2rem;border-bottom:1px solid var(--rule-soft);font-family:var(--mono);font-size:clamp(.66rem,1.4vw,.8rem);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);text-decoration:none;transition:background .3s}
.ledger-row:hover{background:var(--green-soft)}
.ledger-row .dots{flex:1;border-bottom:2px dotted var(--rule);transform:translateY(-.35em)}
.ledger-row .amt{color:var(--green);font-size:1.15em}
.ledger-row .idx{color:var(--ink-faint)}

/* ---------- case spreads ---------- */
.spread{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:center;padding:clamp(2.2rem,4vw,3.6rem) 0}
.spread + .spread{border-top:1px solid var(--rule-soft)}
@media(max-width:960px){.spread{grid-template-columns:1fr}.spread .flip{order:-1}}
.case-kicker{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.6rem}
.dial{display:flex;align-items:center;gap:1.3rem;margin-bottom:1.5rem}
.dial svg{width:96px;height:96px;flex-shrink:0}
.dial .track{fill:none;stroke:var(--rule-soft);stroke-width:6}
.dial .arc{fill:none;stroke:var(--green);stroke-width:6;stroke-linecap:round;stroke-dasharray:0 999;transition:stroke-dasharray 1.7s cubic-bezier(.22,1,.36,1)}
.dial .val{font-family:var(--display);font-size:1.7rem;fill:var(--ink);text-anchor:middle}
.dial .of{font-family:var(--mono);font-size:.5rem;fill:var(--ink-faint);text-anchor:middle;letter-spacing:.12em}
.dial-read h3{font-family:var(--body);font-weight:400;font-style:italic;font-size:1.35rem;line-height:1.3}
.case p.story{color:var(--ink-soft);margin-bottom:1.2rem;max-width:34em}
.case p.story b{color:var(--ink);font-weight:500}
.case p.story .money{font-weight:500}
.case-margin{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-top:1.6rem;flex-wrap:wrap}
.chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.4rem}
.chip{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;padding:.55em .9em;border-radius:2px;border:1px solid var(--rule)}
.chip.money{border-color:rgba(24,106,75,.45);color:var(--green)}
.chip.rd{border-color:rgba(194,64,42,.4);color:var(--red)}

/* ---------- figure card (chart) ---------- */
.fig-card{background:var(--card);border:1px solid var(--rule-soft);border-radius:4px;padding:1.5rem 1.5rem 1.2rem;position:relative;
  box-shadow:0 24px 55px -30px rgba(38,34,26,.35)}
.fig-card .mc-head{display:flex;justify-content:space-between;gap:1rem;font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);border-bottom:1.5px solid var(--rule);padding-bottom:.55rem}
.fig-card .mc-head b{color:var(--ink);font-weight:400}
.fig-card svg.chart{width:100%;height:auto;display:block;margin-top:.6rem}
.chart .grid{stroke:var(--rule-soft);stroke-width:1;stroke-dasharray:2 4}
.chart .axis{stroke:var(--rule);stroke-width:1.5}
.chart .bar{fill:#3a352a;transform:scaleY(0);transform-origin:bottom;transform-box:fill-box;transition:transform 1s cubic-bezier(.22,1,.36,1)}
.chart .bar.fix{fill:var(--green)}
.in .chart .bar{transform:scaleY(1)}
.chart .val{font-family:var(--mono);font-size:9.5px;fill:var(--ink);text-anchor:middle}
.chart .val.gg{fill:var(--green);font-weight:700}
.chart .mo{font-family:var(--mono);font-size:7px;letter-spacing:.14em;fill:var(--ink);text-anchor:middle}
.chart .svc{font-family:var(--mono);font-size:5.6px;letter-spacing:.06em;fill:var(--ink-faint);text-anchor:middle}
.chart .mc-circle{fill:none;stroke:var(--red);stroke-width:2;stroke-linecap:round;stroke-dasharray:400;stroke-dashoffset:400}
.in .chart .mc-circle{animation:drawMark .7s 1.4s ease forwards}
.chart .mc-hand{font-family:var(--hand);font-size:15px;fill:var(--red);opacity:0}
.chart .mc-arrow{fill:none;stroke:var(--red);stroke-width:1.4;stroke-linecap:round;opacity:0}
.in .chart .mc-hand,.in .chart .mc-arrow{animation:mcIn .5s 1.8s forwards}
@keyframes mcIn{to{opacity:1}}

/* ---------- receipt ---------- */
.receipt-wrap{position:relative;display:flex;justify-content:center}
.receipt{background:var(--card);border:1px solid var(--rule-soft);border-radius:3px;padding:1.5rem 1.5rem 1.7rem;width:min(420px,100%);
  box-shadow:0 24px 55px -30px rgba(38,34,26,.35);position:relative;transform:rotate(-.8deg)}
.receipt .r-head{text-align:center;border-bottom:2px solid var(--ink);padding-bottom:.7rem;margin-bottom:1rem}
.receipt .r-head .t{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;font-weight:400}
.receipt .r-head .s{font-family:var(--mono);font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);display:block;margin-top:.3rem}
.r-rows{font-family:var(--mono);font-size:.66rem;line-height:2.5}
.r-row{display:flex;justify-content:space-between;gap:.8rem;position:relative;padding:0 .2rem}
.r-row .dots{flex:1;overflow:hidden;color:var(--rule);white-space:nowrap}
.r-row del{color:var(--ink-faint);text-decoration-color:var(--red);text-decoration-thickness:2px}
.r-row.bad{background:linear-gradient(90deg,rgba(255,203,64,.28),rgba(255,203,64,.45),rgba(255,203,64,.28));border-radius:2px}
.r-row .rd{color:var(--red)}
.r-row .gg{color:var(--green);font-weight:700}
.r-total{border-top:2px solid var(--ink);margin-top:.7rem;padding-top:.7rem;display:flex;justify-content:space-between;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em}
.r-total .gg{color:var(--green);font-weight:700}
.memo{display:inline-block;background:#e8f2ea;border:1px solid rgba(24,106,75,.35);color:var(--ink);padding:.75rem .95rem;transform:rotate(-1.6deg);margin-top:1.3rem;
  box-shadow:0 16px 34px -14px rgba(38,34,26,.35);font-family:var(--mono);font-size:.54rem;letter-spacing:.1em;text-transform:uppercase;line-height:1.9;border-radius:2px}
.memo b{color:var(--green);font-weight:700}
.honesty-strip{margin-top:2.6rem;text-align:center}

/* ---------- method ---------- */
.voices{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,2.5vw,2rem);margin-top:2.8rem}
@media(max-width:860px){.voices{grid-template-columns:1fr}}
.voice{background:var(--card);border:1px solid var(--rule-soft);border-radius:4px;padding:clamp(1.7rem,3vw,2.4rem);box-shadow:0 20px 45px -28px rgba(38,34,26,.3);position:relative}
.voice.mach{border-top:3px solid #e2b93b}
.voice.hum{border-top:3px solid var(--red)}
.voice .mono{display:block;margin-bottom:1.2rem}
.voice h3{font-family:var(--display);font-weight:400;font-size:1.45rem;margin-bottom:.8rem}
.voice p{color:var(--ink-soft);font-size:.98rem}
.voice ul{list-style:none;margin-top:1.2rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;line-height:2.2;color:var(--ink-soft)}
.voice ul li::before{content:'> ';color:var(--green)}
.voice .sig{margin-top:1.4rem;display:flex;align-items:center;gap:1.1rem}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule-soft);border:1px solid var(--rule-soft);margin-top:2rem;border-radius:4px;overflow:hidden}
@media(max-width:860px){.steps{grid-template-columns:1fr}}
.step{background:var(--paper);padding:1.7rem 1.8rem}
.step .num{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;color:var(--green);display:block;margin-bottom:.9rem;text-transform:uppercase}
.step h4{font-family:var(--body);font-weight:500;font-size:1.08rem;margin-bottom:.45rem}
.step p{font-size:.92rem;color:var(--ink-soft)}
.credo{margin-top:2.4rem;display:flex;gap:1.1rem;align-items:baseline;flex-wrap:wrap}
.credo p{font-size:clamp(1.1rem,1.8vw,1.35rem);font-style:italic}

/* ---------- categories ---------- */
.cat-table{border-top:1px solid var(--rule);margin-top:2.8rem}
.cat{display:grid;grid-template-columns:3.6rem 1fr minmax(170px,300px) 8rem;gap:1.3rem;align-items:center;padding:1.15rem .4rem;border-bottom:1px solid var(--rule-soft);transition:background .3s,padding-left .3s}
.cat:hover{background:var(--green-soft);padding-left:1rem}
.cat .idx{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;color:var(--ink-faint)}
.cat .name{font-family:var(--display);font-size:clamp(1rem,1.7vw,1.25rem);font-weight:400}
.cat .desc{font-size:.88rem;color:var(--ink-faint);font-style:italic}
.cat .band{display:flex;gap:3px;justify-content:flex-end}
.cat .band i{width:13px;height:5px;border-radius:2px;background:var(--rule-soft);transition:background .5s}
.cat.in .band i.g{background:#2c8a5f}
.cat.in .band i.a{background:#dd9c25}
.cat.in .band i.r{background:var(--red)}
@media(max-width:760px){
  .cat{grid-template-columns:2.4rem 1fr;grid-template-areas:'idx name' 'idx desc' 'idx band'}
  .cat .idx{grid-area:idx}.cat .name{grid-area:name}.cat .desc{grid-area:desc}
  .cat .band{grid-area:band;justify-content:flex-start;margin-top:.4rem}
}
.legend{display:flex;gap:1.8rem;flex-wrap:wrap;margin-top:1.6rem}
.legend span{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);display:flex;align-items:center;gap:.55rem}
.dotk{width:9px;height:9px;border-radius:50%;display:inline-block}
.dotk.g{background:#2c8a5f}.dotk.a{background:#dd9c25}.dotk.r{background:var(--red)}

/* ---------- full audit ---------- */
.parts{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,2.5vw,2rem);margin-top:2.8rem}
@media(max-width:860px){.parts{grid-template-columns:1fr}}
.part{background:var(--card);border:1px solid var(--rule-soft);border-radius:4px;padding:clamp(1.7rem,3vw,2.4rem);box-shadow:0 20px 45px -28px rgba(38,34,26,.3)}
.part .num{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;color:var(--green);text-transform:uppercase;display:block;margin-bottom:1.2rem}
.part h3{font-family:var(--display);font-weight:400;font-size:1.45rem;margin-bottom:1rem}
.part ul{list-style:none}
.part li{padding:.75rem 0;border-top:1px solid var(--rule-soft);font-size:.95rem;color:var(--ink-soft);display:flex;gap:.9rem}
.part li::before{content:'▸';color:var(--green);flex-shrink:0}
.plan{border:1.5px solid rgba(24,106,75,.4);border-radius:4px;margin-top:clamp(1.2rem,2.5vw,2rem);padding:clamp(1.7rem,3vw,2.6rem);
  background:linear-gradient(120deg,var(--green-soft),transparent 55%),var(--card)}
.plan h3{font-family:var(--display);font-weight:400;font-size:clamp(1.35rem,2.4vw,1.9rem);margin:.7rem 0 1.6rem}
.plan h3 .g{color:var(--green)}
.plan-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:1.8rem}
@media(max-width:860px){.plan-cols{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.plan-cols{grid-template-columns:1fr}}
.plan-cols .mono{display:block;margin-bottom:.5rem;color:var(--green)}
.plan-cols p{font-size:.9rem;color:var(--ink-soft)}

/* ---------- pricing ---------- */
.tiers{display:grid;grid-template-columns:1.12fr 1fr 1fr;gap:clamp(1rem,2vw,1.6rem);margin-top:2.8rem;align-items:stretch}
@media(max-width:960px){.tiers{grid-template-columns:1fr}}
.tier{background:var(--card);border:1px solid var(--rule-soft);border-radius:4px;padding:clamp(1.6rem,2.6vw,2.3rem);display:flex;flex-direction:column;transition:transform .35s,box-shadow .35s;box-shadow:0 20px 45px -28px rgba(38,34,26,.3);position:relative}
.tier:hover{transform:translateY(-4px)}
.tier.featured{border:1.5px solid rgba(24,106,75,.5);box-shadow:0 30px 60px -28px rgba(24,106,75,.35)}
.tier.featured::before{content:attr(data-badge);position:absolute;top:-.85em;left:1.4rem;background:var(--green);color:#f6f3e9;font-family:var(--mono);font-size:.54rem;letter-spacing:.18em;text-transform:uppercase;padding:.45em .9em;border-radius:2px}
.tier .t-tag{font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:1.5rem;display:flex;justify-content:space-between;gap:1rem}
.tier.featured .t-tag{color:var(--green)}
.tier h3{font-family:var(--display);font-weight:400;font-size:1.35rem}
.tier .price{font-family:var(--display);font-size:clamp(2.1rem,3.4vw,2.8rem);margin:.6rem 0 .1rem}
.tier .price small{font-family:var(--body);font-size:.95rem;color:var(--ink-faint);font-style:italic}
.tier .per{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:1.4rem}
.tier ul{list-style:none;margin-bottom:1.7rem;flex:1}
.tier li{padding:.55rem 0;border-top:1px solid var(--rule-soft);font-size:.9rem;color:var(--ink-soft);display:flex;gap:.8rem}
.tier li::before{content:'·';color:var(--green);font-weight:700}
.tiers.two{grid-template-columns:1fr 1fr}
@media(max-width:960px){.tiers.two{grid-template-columns:1fr}}
.tier .price-sub{font-size:.92rem;color:var(--ink-soft);margin:-.9rem 0 1.3rem}
.tier .tier-note{font-size:.9rem;color:var(--ink-soft);margin:0 0 1.1rem;padding-top:1rem;border-top:1px solid var(--rule-soft)}
.tier .terms{font-family:var(--mono);font-size:.56rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 1.2rem;line-height:1.7}
.tier-ctas{display:flex;flex-direction:column;gap:.6rem;margin-top:auto}
.anchor-line{max-width:820px;margin:2.2rem auto 0;text-align:center;font-size:.9rem;color:var(--ink-faint)}
.anchor-line a{color:var(--ink-faint);text-decoration:none;border-bottom:1px solid var(--rule)}
.deal-shape{max-width:900px;margin:1.6rem auto 0;text-align:center;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green);line-height:2.1}
.credit-note{padding:.8em 1em;border:1.5px dashed rgba(24,106,75,.5);font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--green);text-align:center;margin-bottom:1.2rem;border-radius:2px}
.free-link{text-align:center;margin-top:2rem;font-size:1rem;color:var(--ink-faint);font-style:italic}
.free-link a{color:var(--green);text-decoration:none;border-bottom:1px solid rgba(24,106,75,.4);padding-bottom:1px}

/* ---------- intake ---------- */
.intake-head{text-align:center;max-width:720px;margin:0 auto 2.6rem}
.intake-head .lede{margin:0 auto}
.form-shell{max-width:860px;margin:0 auto;background:var(--card);border:1px solid var(--rule-soft);border-radius:5px;overflow:hidden;box-shadow:0 34px 80px -35px rgba(38,34,26,.4)}
.form-shell .tray{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 1.2rem;border-bottom:1px solid var(--rule-soft);background:var(--paper-2);flex-wrap:wrap}
.privacy{max-width:700px;margin:2.2rem auto 0;text-align:center;font-size:.9rem;color:var(--ink-faint);font-style:italic}

/* ---------- FAQ ---------- */
.faq-wrap{max-width:840px;margin:2.6rem auto 0}
details{border-top:1px solid var(--rule-soft)}
details:last-of-type{border-bottom:1px solid var(--rule-soft)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:2rem;padding:1.4rem .3rem;font-family:var(--body);font-weight:500;font-size:clamp(1rem,1.7vw,1.15rem);transition:color .3s}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--green)}
summary .pm{font-family:var(--mono);color:var(--green);flex-shrink:0;transition:transform .3s}
details[open] .pm{transform:rotate(45deg)}
details p{padding:0 .3rem 1.5rem;font-size:.95rem;color:var(--ink-soft);max-width:62ch}

/* ---------- footer ---------- */
footer{border-top:3px double var(--rule);padding:3rem clamp(1.2rem,4vw,3rem) 4rem;background:var(--paper-2)}
.foot-grid{max-width:1240px;margin:0 auto;display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;align-items:flex-start}
.foot-grid a{color:var(--ink-soft);text-decoration:none;transition:color .3s}
.foot-grid a:hover{color:var(--green)}
.foot-note{max-width:1240px;margin:2.2rem auto 0;font-size:.85rem;color:var(--ink-faint);font-style:italic}


/* ================================================================
   MULTI-PAGE SHELL · added when the site was split into tabs
   ================================================================ */

:root{--mast-h:62px}
body{padding-top:var(--mast-h)}
section{scroll-margin-top:calc(var(--mast-h) + 1rem)}
/* the fixed masthead is now cleared by the body padding, so the hero no
   longer needs to reserve room for it */
.hero{padding-top:clamp(2rem,5vw,3.5rem)}

/* The hero plate bleeds past the 1240px hero box on purpose. Above about
   1400px there is gutter to absorb it; between 960 and 1400 there is not, and
   it pushed a horizontal scrollbar onto the page. Clip at every width. */
.hero{overflow:hidden}

/* The stamp waits at scale 1.5 with opacity 0 until its section reveals. The
   fill mode is forwards, so during that wait the 248px-wide invisible box was
   the thing putting a horizontal scrollbar on /cases/ between 700 and 940px.
   Rest at scale 1 and do the whole pop inside the keyframes instead. */
.stamp{scale:1}
@keyframes stampIn{0%{opacity:0;scale:1.22;rotate:-1deg}70%{opacity:1;scale:.97}100%{opacity:1;scale:1;rotate:0deg}}

/* ---------- masthead: five tabs ----------
   The tabs are the primary way through the site, so they are drawn as
   bordered chips rather than quiet text links: a visible edge is what makes
   them read as clickable at a glance.  Hierarchy in the bar, weakest first:
   resting chip, dark filled "you are here" chip, solid green start button. */
.mast-inner{gap:1.4rem}
.tabs{display:flex;gap:.4rem;align-items:center;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.tabs::-webkit-scrollbar{display:none}
.tab{font-family:var(--mono);font-weight:500;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);text-decoration:none;white-space:nowrap;line-height:1.35;
  padding:.62em 1em;border:1px solid var(--rule-soft);border-radius:3px;background:var(--card);
  transition:color .25s,background .25s,border-color .25s}
.tab:hover{color:var(--green);background:var(--green-soft);border-color:rgba(24,106,75,.45)}
.tab.active,.tab.active:hover{color:var(--paper);background:var(--ink);border-color:var(--ink);font-weight:600}
.mast-right{display:flex;gap:1.1rem;align-items:center;flex-shrink:0}
.nav-quiet{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
  text-decoration:none;white-space:nowrap;transition:color .3s}
.nav-quiet:hover{color:var(--green)}
/* the start button has to stay the loudest thing in the bar now that the
   tabs carry a border, so it moves from outlined to filled */
/* .nav-cta sits in .mast-right, not .nav-links, so it never picked up the mono
   nav font and was inheriting the global link underline */
.nav-cta{white-space:nowrap;background:var(--green);border-color:var(--green);color:var(--paper)!important;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  padding:.62em 1.1em;border-radius:3px;line-height:1.35}
.nav-cta:hover{background:var(--green-bright);border-color:var(--green-bright);color:var(--paper)!important}

@media(max-width:1080px){
  .nav-quiet{display:none}
}
@media(max-width:780px){
  :root{--mast-h:104px}
  .mast-inner{flex-wrap:wrap;gap:.5rem;padding:.7rem clamp(1rem,4vw,3rem) .4rem}
  .wordmark{flex:1}
  .mast-right{order:2}
  .tabs{order:3;flex-basis:100%;gap:.28rem;padding:.15rem 0 .4rem;margin:0 calc(-1 * clamp(1rem,4vw,3rem));
    padding-left:clamp(1rem,4vw,3rem);padding-right:clamp(1rem,4vw,3rem)}
  .tab{padding:.5em .72em;font-size:.62rem;letter-spacing:.08em}
}
@media(max-width:400px){
  .nav-cta{padding:.55em .8em;font-size:.6rem}
  .wordmark{font-size:.95rem}
  .tab{padding:.5em .6em;font-size:.6rem;letter-spacing:.05em}
}

/* ---------- home: proof beats ---------- */
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule-soft);
  border:1px solid var(--rule-soft);border-radius:4px;overflow:hidden;margin-top:2.6rem}
@media(max-width:860px){.proof{grid-template-columns:1fr}}
.beat{background:var(--card);padding:clamp(1.6rem,3vw,2.2rem);display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:background .3s}
.beat:hover{background:var(--green-soft)}
.beat .fig{font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2rem);color:var(--green);line-height:1.1;margin-bottom:.7rem}
.beat h3{font-family:var(--body);font-weight:500;font-size:1.05rem;margin-bottom:.5rem}
.beat p{font-size:.93rem;color:var(--ink-soft);flex:1}
.beat .go{margin-top:1.2rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green)}

/* ---------- home: compressed price summary ---------- */
.mini-tiers{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.6rem);margin-top:2.6rem}
@media(max-width:760px){.mini-tiers{grid-template-columns:1fr}}
.mini{background:var(--card);border:1px solid var(--rule-soft);border-radius:4px;padding:clamp(1.5rem,2.6vw,2.1rem);
  display:flex;flex-direction:column;box-shadow:0 20px 45px -28px rgba(38,34,26,.3);position:relative}
.mini.featured{border:1.5px solid rgba(24,106,75,.5);box-shadow:0 30px 60px -28px rgba(24,106,75,.35)}
.mini .t-tag{font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:1.2rem;display:block}
.mini.featured .t-tag{color:var(--green)}
.mini h3{font-family:var(--display);font-weight:400;font-size:1.3rem}
.mini .price{font-family:var(--display);font-size:clamp(2rem,3.2vw,2.6rem);margin:.5rem 0 .1rem}
.mini .per{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:1.1rem}
.mini p.what{font-size:.95rem;color:var(--ink-soft);flex:1;margin-bottom:1.4rem}
.mini .mini-ctas{display:flex;flex-direction:column;gap:.6rem;margin-top:auto}
.price-more{text-align:center;margin-top:1.8rem;font-size:.95rem;color:var(--ink-faint);font-style:italic}
.price-more a{color:var(--green);text-decoration:none;border-bottom:1px solid rgba(24,106,75,.4)}

/* ---------- end-of-page CTA band ---------- */
.endcap{border-top:3px double var(--rule);background:var(--paper-3);text-align:center}
.endcap .wrap{max-width:760px}
.endcap h2{font-size:clamp(1.6rem,3.4vw,2.4rem);margin-bottom:1rem}
.endcap p.lede{margin:0 auto 2rem}
.endcap-ctas{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}
.endcap .fine{margin-top:1.6rem}

/* ---------- attributed quotes ----------
   One component, two variants. FULL (.quote) carries the pull line, the whole
   quote and the attribution; INLINE (.quote.inline) carries the pull line and
   the attribution only. Single left rule is the only ornament: no card, no
   avatar, no rating, no carousel. Same rules serve every placement, so a new
   testimonial is copy, not CSS. */
.quote{border-left:2px solid var(--rule);padding-left:clamp(1.1rem,2.4vw,2rem);
  margin:clamp(2.8rem,5vw,4.2rem) 0;max-width:46em}
.quote blockquote{margin:0}
.quote .pull{font-family:var(--display);font-weight:400;
  font-size:clamp(1.2rem,2.1vw,1.65rem);line-height:1.3;letter-spacing:-.008em;
  text-wrap:balance;max-width:22em}
.quote .full{margin-top:1.5rem}
.quote .full p{font-size:1rem;color:var(--ink-soft);max-width:62ch}
.quote .full p + p{margin-top:1rem}
.quote figcaption{margin-top:1.5rem;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);line-height:2}
.quote figcaption cite{font-style:normal;color:var(--ink)}
/* Byline links: the person's own site, and on an inline instance a pointer to
   the full quote. Same treatment as .anchor-line a, a hairline rule and no
   colour of its own, so the byline stays a byline and does not turn into a
   call to action sitting next to the price. */
.quote figcaption a{color:var(--ink-faint);text-decoration:none;
  border-bottom:1px solid var(--rule-soft);transition:color .3s,border-color .3s}
.quote figcaption a:hover{color:var(--green);border-color:rgba(24,106,75,.4)}
.quote.inline figcaption{margin-top:1rem}
@media(max-width:520px){
  .quote{padding-left:1rem}
  .quote .pull{max-width:none}
  /* the byline runs to three items on a phone: let it break without the
     doubled line-height opening a gap between the wrapped lines */
  .quote figcaption{line-height:1.9}
}

/* ---------- voices row (home page) ----------
   Two inline quotes side by side. This is layout and nothing else: each quote
   keeps the same left rule, type and byline it carries on every other page, so
   the row adds a column and no new visual language. The quotes lose their own
   vertical margin because the grid gap now owns the spacing, and they lose the
   46em cap because the grid track is already narrower than that.
   Stacks at 780px, where two columns would leave each pull line about four
   words wide and the byline would wrap three times. */
.voices{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,4vw,3.5rem);margin:clamp(2.4rem,4vw,3.4rem) 0 0;
  align-items:start}
.voices .quote{margin:0;max-width:none}
@media(max-width:780px){
  .voices{grid-template-columns:1fr;gap:clamp(1.9rem,6vw,2.6rem)}
}

/* The byline is a run of short items separated by " · ", so it should break at
   the separators and nowhere else. Left to itself it broke inside an item:
   "FULL TESTIMONIAL" on one line and the arrow alone on the next at 375px, and
   "FULL / TESTIMONIAL" split across lines in the home grid at 1280px. Each
   link is one token now, and the wrap points are the separators. */
.quote figcaption a{white-space:nowrap}