/* ShredCheck — identity design system (designs/shredcheck-identity-sheet.html,
   Form SC-LOGO Rev. A). Ported onto the shipped site 2026-08-02.

   Self-hosted page fonts. Served from this origin because the worker's CSP allows
   no third-party origins (src/worker.ts: font-src 'self'), and because a product
   whose pitch is that the document never leaves the browser should not hand every
   visitor's IP to a font CDN to render the sentence saying so. The identity sheet
   links Archivo from fonts.googleapis.com; that link is deliberately not carried
   over — it would be blocked, and the page would silently fall back to a system
   sans, which is the "substitute type" the sheet's own misuse panel forbids.
   Copied into public/assets/fonts by scripts/build-client.mjs. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;
  font-display:swap;src:url('/assets/fonts/archivo-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;
  font-display:swap;src:url('/assets/fonts/archivo-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;
  font-display:swap;src:url('/assets/fonts/archivo-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;
  font-display:swap;src:url('/assets/fonts/archivo-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;
  font-display:swap;src:url('/assets/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;
  font-display:swap;src:url('/assets/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;
  font-display:swap;src:url('/assets/fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2')}

:root{
  --ink:#14130F; --paper:#FBFAF7; --field:#E8E5DE; --card:#FFFFFF;
  --line:#C9C4B7; --line-strong:#A39E90; --mut:#6B6659; --faint:#8F8A7C;
  --acc:#8A1B12; --knock:#E0563F; --hi:#FFE55C; --ok:#1a7f4e; --bad:#B3261E;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --sans:"Archivo","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{font-family:var(--sans);background:var(--field);color:var(--ink);line-height:1.55;font-size:16px}
a{color:var(--acc);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.wrap{max-width:880px;margin:0 auto;padding:0 20px}

/* form-strip header — the signature element */
.formstrip{background:var(--paper);border-bottom:2px solid var(--ink)}
.formstrip .wrap{display:flex;align-items:stretch;justify-content:space-between;gap:0}
.formstrip .cell{font-family:var(--mono);font-size:12px;letter-spacing:.08em;padding:14px 0;display:flex;align-items:center}
.formstrip .brand{display:flex;align-items:center;gap:10px}
.formstrip .brand a{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
.mark{width:26px;height:26px;border:2px solid var(--ink);display:flex;flex-direction:column;justify-content:center;gap:2.5px;padding:0 4px;flex:none;box-sizing:border-box}
.mark i{display:block;height:2.5px;background:var(--ink)}
.mark i:nth-child(1){width:100%}.mark i:nth-child(2){width:70%}.mark i:last-child{width:38%;background:var(--acc)}
.mark.on-ink{border-color:var(--paper)}.mark.on-ink i{background:var(--paper)}.mark.on-ink i:last-child{background:var(--knock)}
.wordmark{font-weight:800;font-size:17px;letter-spacing:-0.02em;color:var(--ink)}
.wordmark b{font-weight:800;color:var(--acc)}
.formstrip .brand a{color:inherit;text-decoration:none}
.formstrip nav{display:flex;gap:22px;font-family:var(--sans);font-size:14px;letter-spacing:0;align-items:center}
.formstrip nav a{color:var(--mut)}
.formstrip nav a[aria-current]{color:var(--ink);font-weight:600;border-bottom:2px solid var(--hi)}
@media(max-width:640px){.formstrip .wrap{flex-wrap:wrap}.formstrip nav{gap:14px;padding-bottom:10px}}

main{padding:40px 0 64px}
h1{font-size:clamp(26px,4.5vw,38px);font-weight:700;letter-spacing:-0.03em;line-height:1.12;margin-bottom:8px;text-wrap:pretty}
h1 .mono, .h-mono{font-family:var(--mono)}
h2{font-size:19px;font-weight:700;letter-spacing:-0.01em;margin:36px 0 12px}
.sub{color:var(--mut);max-width:56ch;margin-bottom:24px}
.hl{background:var(--hi);padding:0 .18em;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px}
.card.accent{border:2px solid var(--acc)}
.card.dashed{border:1px dashed var(--line-strong);background:transparent}
.pill{display:inline-block;font-size:11px;font-family:var(--mono);letter-spacing:.05em;padding:3px 10px;border-radius:999px;background:#eceef2;color:var(--mut);margin-bottom:10px}
.pill.blue{background:#e3edff;color:var(--acc)}
.price{font-size:26px;font-weight:600;margin:2px 0 6px}
.small{font-size:13.5px;color:var(--mut);line-height:1.6}
.faint{color:var(--faint)}

/* drop zone */
.drop{border:2px dashed var(--mut);border-radius:10px;background:var(--paper);padding:52px 24px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.drop:hover,.drop.over{border-color:var(--acc);background:#f4f7ff}
.drop .big{font-weight:600;font-size:17px}
.drop .hint{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--mut);margin-top:8px}

/* stamps + verdicts */
.stamp{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.05em;border:2px solid currentColor;border-radius:3px;padding:3px 9px;display:inline-block;transform:rotate(-2.5deg)}
.stamp.ok{color:var(--ok)} .stamp.bad{color:var(--bad)} .stamp.info{color:var(--acc)}
.report{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:20px;margin-top:18px}
.report table{width:100%;border-collapse:collapse;font-size:14px}
.report td{padding:7px 4px;border-bottom:1px solid var(--field);vertical-align:top}
.report td:first-child{font-family:var(--mono);font-size:12px;color:var(--mut);white-space:nowrap;padding-right:14px}
.samplereq{font-family:var(--mono);font-size:12.5px;background:var(--paper);border-left:3px solid var(--hi);padding:8px 10px;margin:6px 0;color:var(--ink)}

/* buttons + forms */
.btn{display:inline-block;background:var(--ink);color:#fff;border:none;padding:13px 22px;border-radius:6px;font-size:15px;font-weight:600;cursor:pointer;font-family:var(--sans)}
.btn:hover{background:#24375c;text-decoration:none}
.btn.full{width:100%;text-align:center}
.btn[disabled]{background:var(--faint);cursor:not-allowed}
input[type=email]{width:100%;padding:11px;border:1px solid var(--line);border-radius:6px;font-size:15px;font-family:var(--sans)}
.attest{display:flex;gap:10px;font-size:13.5px;color:var(--mut);line-height:1.6;margin:14px 0 16px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:22px;max-width:460px;margin:0 auto}

/* support steps */
#how-it-works,#help{scroll-margin-top:16px}
.steps{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:26px}
.step{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px;display:flex;gap:16px;align-items:flex-start;text-align:left}
.step svg{width:90px;flex:none;height:auto}
.stepbody{flex:1;min-width:0}
.step .t{font-weight:600;font-size:14.5px;margin:0 0 4px}
.step .chips{margin-top:10px}
.step-inset{border-left:3px solid var(--hi);background:var(--paper);padding:8px 12px;margin-top:10px;font-size:13.5px}
.step-foot{border-top:1px solid var(--line);margin-top:12px;padding-top:10px;font-size:12.5px;color:var(--mut)}
.refundcard{background:var(--card);border:2px solid var(--ink);border-radius:10px;padding:18px;margin:8px 0 26px}
.checkfirst{border:1px solid var(--line-strong);border-radius:10px;padding:18px;margin:8px 0 22px;background:var(--card)}
.fixrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:12px}
.fix{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--mut);line-height:1.55}
.fix svg{flex-shrink:0}
.fix b{color:var(--ink)}
.mailcard{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px;display:flex;align-items:center;gap:14px}

/* stages list (success/status) */
.stages{font-size:14px;line-height:2.1;color:var(--mut);margin:14px 0}
.stages .ck{color:var(--ok);font-weight:700;margin-right:8px}
.stages .pend{color:var(--faint);margin-right:8px}

/* legal */
.legal h2{font-size:16px;margin:26px 0 8px}
.legal p,.legal li{font-size:14px;color:#3c4557;margin-bottom:10px}
.banner{background:#fff8dc;border:1px solid #e6d87a;border-radius:8px;padding:12px 16px;font-size:13.5px;color:#5f5410;margin-bottom:24px}

footer{background:var(--ink);color:var(--paper);padding:26px 0;margin-top:28px}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px;color:#C9C4B7}
footer .mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em}
footer a{color:#C9C4B7}footer a:hover{color:var(--paper)}
.footbrand{display:flex;align-items:center;gap:10px;border-top:3px solid var(--paper);border-bottom:1px solid var(--paper);padding:7px 0 9px}
.footbrand .fw{font-weight:800;font-size:20px;letter-spacing:-0.03em;color:var(--paper)}
.footbrand .fw span{font-weight:400;color:#C9C4B7}

/* ---------------------------------------------------------------------------
   Preview client (src/client/main.ts) — the DOM it drives and the classes it
   generates. main.ts toggles visibility through the CSSOM (element.style), which
   CSP does not govern, so the hidden-by-default state has to live here.
   --------------------------------------------------------------------------- */
#file{display:none}
#progress{display:none;margin-top:22px;font-family:var(--mono);font-size:13px;color:var(--mut)}
#bar{height:4px;background:var(--line);margin-top:8px;border-radius:2px;overflow:hidden}
#bar i{display:block;height:100%;width:0%;background:var(--acc);transition:width .1s}

#result,#refusal{display:none}
#refusal{border-color:var(--bad)}

/* Order page (src/client/order.ts): checkout-failure line, hidden until used. */
#payerr{display:none;color:var(--bad);margin-top:10px}

/* Spend-link banner (src/client/main.ts): hidden until a #spend= fragment
   lands. Same shape as #sparse, keyed green — good news, not a warning. */
#spendbanner{display:none;border-left:3px solid var(--ok);background:var(--paper);padding:10px 14px;margin:14px 0 0;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em}

/* Support page's retrieval form (src/client/retrieve.ts): input beside button
   inside its .checkfirst card, wrapping on narrow screens; result line hidden
   until the controller has something to say. */
#retrieverow{display:flex;flex-wrap:wrap;gap:10px;max-width:520px;margin-top:12px}
#retrieverow input{flex:1;min-width:220px}
#retrieverow .btn{white-space:nowrap}
#rmsg{display:none;margin-top:8px}

/* Success page (src/client/success.ts): stages and the action link start
   hidden; the controller shows whichever the state calls for. */
#stages,#act{display:none}
.report h2{font-family:var(--mono);font-size:19px;margin:10px 0 6px}
.report>.stamp{margin-bottom:4px}
#refwhy{max-width:58ch;color:var(--mut);font-size:14px}

.count{font-family:var(--mono);font-size:52px;font-weight:600;line-height:1;margin-top:6px}
.countlabel{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);margin-top:6px}

/* Stat cells are built by main.ts as .cell inside #statgrid — a ruled table
   block, deliberately not the rounded .card grid used elsewhere on the page. */
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border-top:1px solid var(--line);border-left:1px solid var(--line);margin-top:24px}
.statgrid .cell{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px}
.statgrid .cell b{font-family:var(--mono);font-size:22px;font-weight:600;display:block}
.statgrid .cell span{font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.06em}

#sparse{display:none;border-left:3px solid var(--bad);background:var(--paper);
  padding:10px 14px;margin-top:20px;font-size:14px}

.sect{margin-top:22px}
.sect h3{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--mono);font-size:12.5px;border:1px solid var(--line);
  padding:4px 10px;border-radius:3px;background:var(--paper)}
#attwrap{display:none}

.excerpt{border-left:3px solid var(--hi);background:var(--paper);padding:10px 14px;
  margin-top:10px;font-size:14px}
.excerpt .pg{font-family:var(--mono);font-size:11px;color:var(--mut);display:block;margin-bottom:3px}

.note{font-size:13px;color:var(--mut);margin-top:10px;max-width:62ch}
.cta{margin-top:28px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cta small{color:var(--mut)}

/* Utilities. These exist because the worker's CSP is style-src 'self' with no
   'unsafe-inline', so a style= attribute is blocked exactly as an inline <style>
   block is — silently, in the browser. Every declaration the identity pages
   carried inline lives here instead. */
.u-mut{color:var(--mut)}
.u-ink{color:var(--ink)}
.u-mt3{margin-top:3px}
.u-mt8{margin-top:8px}
.u-mt10{margin-top:10px}
.u-mt12{margin-top:12px}
.u-mt14{margin-top:14px}
.u-mt16{margin-top:16px}
.u-mt18{margin-top:18px}
.u-mw480{max-width:480px}
.u-mw64{max-width:64ch}
.u-fs145{font-size:14.5px}
.u-center{text-align:center}
.u-center-mt12{text-align:center;margin-top:12px}
.u-lead{font-weight:600;font-size:15px}
.u-num{font-size:20px;font-weight:600}
.u-block-mb6{display:block;margin-bottom:6px}
.u-row-center{display:flex;gap:6px;justify-content:center;margin-top:10px}
.u-row-between{display:flex;justify-content:space-between;align-items:center;gap:10px}
.u-meta{font-family:var(--mono);font-size:13px;color:var(--mut);letter-spacing:.05em}
.u-footnote{border-top:1px solid var(--line);padding-top:12px;text-align:center;margin-top:12px}
.u-panel{background:var(--paper);border-radius:8px;padding:12px 14px;margin:14px 0;display:flex;justify-content:space-between;align-items:center;gap:10px}

/* ---------------------------------------------------------------------------
   GO-BIG LAYER — ported from designs/go-big-source 2026-08-04.

   Four dated passes from the design source, in the order they were authored, so
   the cascade resolves the way it did in the mockup: monumental hero, dark
   masthead, then two reworks of the "$49 buys" block. Everything here overrides
   the base system above by source order, which is why it is appended rather
   than merged in place.

   Two exact duplicates from the source are dropped — `.buys .lead` and
   `.verify`, each defined twice with the later copy winning outright. Nothing
   else is changed. The mockup's fonts.googleapis.com link is deliberately not
   carried; the faces are self-hosted at the top of this file.
   --------------------------------------------------------------------------- */

/* monumental hero, shred motion, stamp slam (2026-08-02) */
/* .heromark i was height:8% until 2026-09-13, and the mark rendered as an empty
   bordered box on the live site — border painted, four bars invisible. A percentage
   height resolves against the parent's height, and .heromark has none of its own: it
   comes from aspect-ratio:1 against width:min(38vw,430px). Where that is not treated
   as a definite height the percentage falls back to auto, and an empty <i> with a
   width and a background but height:auto paints nothing at all.
   The two marks that always rendered — .mark i and .shredrule i — both use px, and
   .heromark i was the only percentage among the three, which is what identified it.
   34px is 8% of the 430px design box, so the intended proportion is unchanged at full
   size; the clamp keeps four bars and three gaps inside the 200px mobile variant.
   NOTE gap:7% below has the same dependency. It degrades to 0 rather than to
   invisible — bars flush instead of spaced — so it is left as it is and recorded here
   rather than changed under a ruling that named the height. */
.hero{position:relative;padding:64px 0 56px;overflow:hidden}
.hero h1{font-size:clamp(40px,7.5vw,88px);font-weight:800;letter-spacing:-0.045em;line-height:0.98;max-width:11ch}
.hero .sub{font-size:clamp(15px,1.6vw,18px);margin-top:18px;max-width:46ch}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:0.22em;color:var(--acc);margin-bottom:18px;display:flex;align-items:center;gap:10px}
.kicker::after{content:"";height:1px;background:var(--line-strong);flex:1;max-width:120px}

/* the symbol at architectural scale, animated: rules get cut until one survives */
.heromark{position:absolute;right:-2%;top:50%;transform:translateY(-50%);width:min(38vw,430px);aspect-ratio:1;border:6px solid var(--ink);display:flex;flex-direction:column;justify-content:center;gap:7%;padding:0 8%;box-sizing:border-box;opacity:.999}
.heromark i{display:block;height:clamp(14px,3vw,34px);background:var(--ink);transform-origin:left center;animation:shredcut 1.1s cubic-bezier(.7,0,.2,1) both}
.heromark i:nth-child(1){width:100%;animation-delay:.15s;--w:100%}
.heromark i:nth-child(2){width:68%;animation-delay:.35s;--w:68%}
.heromark i:nth-child(3){width:40%;animation-delay:.55s;--w:40%}
.heromark i:nth-child(4){width:20%;background:var(--acc);animation-delay:.8s;--w:20%}
@keyframes shredcut{from{width:100%}to{width:var(--w)}}
@media(max-width:860px){.heromark{position:static;transform:none;width:200px;margin:34px auto 0}}
/* Above 1800px the right-bleed stops reading as an edge treatment and starts
   reading as an orphan: the centred 880px .wrap ends around x=1720 on a 2560px
   viewport while the mark sits alone at the far right. Hidden rather than
   repositioned (owner ruling 2026-09-13) — it is decoration, and the hero's
   type carries the band on its own at that width. */
@media(min-width:1800px){.heromark{display:none}}
@media(prefers-reduced-motion:reduce){.heromark i{animation:none}}

/* shred-rule section dividers — the mark as typography */
.shredrule{display:flex;flex-direction:column;gap:5px;margin:52px 0 8px;max-width:220px}
.shredrule i{display:block;height:3px;background:var(--ink)}
.shredrule i:nth-child(1){width:100%}.shredrule i:nth-child(2){width:68%}
.shredrule i:nth-child(3){width:40%}.shredrule i:nth-child(4){width:20%;background:var(--acc)}
/* Tight variant for a rule that sits directly above a page heading. The design
   source set this with a style= attribute, which the CSP blocks. */
.shredrule.tight{margin:6px 0 14px}
h2{margin-top:10px;font-size:clamp(20px,2.6vw,28px);letter-spacing:-0.02em}

/* drop zone: a document that reacts */
.drop{position:relative;border-width:2.5px;transition:transform .18s,border-color .15s,background .15s;max-width:640px}
.drop:hover,.drop.over{transform:scale(1.012);border-color:var(--ink);background:#fff}
.drop.over{border-style:solid}
.drop .big{font-size:19px;font-weight:700}

/* stamp slam */
.report .stamp{animation:slam .38s cubic-bezier(.3,1.6,.4,1) both}
@keyframes slam{from{transform:rotate(-2.5deg) scale(2.1);opacity:0}to{transform:rotate(-2.5deg) scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.report .stamp{animation:none}}

/* oversized money */
.price{font-size:clamp(30px,4vw,44px);font-weight:800;letter-spacing:-0.03em}
.card{padding:22px}
.card.accent{border-width:2.5px}

/* mono ticker of species under the hero */
.ticker{font-family:var(--mono);font-size:11.5px;letter-spacing:0.14em;color:var(--mut);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:9px 0;margin-top:44px;white-space:nowrap;overflow:hidden}
.ticker span{display:inline-block;padding-right:3.2em}
.ticker span b{color:var(--acc);font-weight:600}

/* ===== dark masthead + hero (owner pick, 2026-08-02) ===== */
.formstrip{background:var(--ink);border-bottom:none}
.formstrip .cell{color:#A39E90}
.formstrip .brand a .wordmark{color:var(--paper)}
.formstrip .wordmark b{color:var(--knock)}
.formstrip .mark{border-color:var(--paper)}
.formstrip .mark i{background:var(--paper)}
.formstrip .mark i:last-child{background:var(--knock)}
.formstrip .brand a{cursor:pointer}
.formstrip .brand a:hover .wordmark b{color:var(--paper)}
.formstrip nav a{color:#A39E90}
.formstrip nav a:hover{color:var(--paper)}
.formstrip nav a[aria-current]{color:var(--paper);border-bottom:2px solid var(--knock)}

.hero{background:var(--ink);padding-top:58px;padding-bottom:100px}
/* No margin-inline/padding-inline full-bleed here: the hero is a full-width band in
   the markup and centres with an inner .wrap. calc(50% - 50vw) measured the viewport
   INCLUDING the scrollbar, so the band ran ~15px past both edges and the page scrolled
   sideways. test/site-csp.test.ts pins both halves of that. */
.hero h1{color:var(--paper)}
.hero .sub{color:#A39E90}
.hero .kicker{color:var(--knock)}
.hero .kicker::after{background:#4A463D}
.heromark{border-color:var(--paper)}
.heromark i{background:var(--paper)}
.heromark i:nth-child(4){background:var(--knock)}

#drop{margin-top:-62px;position:relative;z-index:2;background:#fff;box-shadow:0 10px 30px rgba(20,19,15,.30)}

/* ===== "What the $49 buys" rework (2026-08-03) ===== */
.pill.blue{background:#f0e9e0;color:var(--acc)} /* palette-correct fallback anywhere pill.blue survives */

.sechead{display:flex;align-items:baseline;gap:16px;margin:56px 0 6px;border-top:3px solid var(--ink);padding-top:14px}
.sechead .secnum{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--acc);letter-spacing:.1em}
.sechead h2{margin:0}

.tabgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}
.tabcard{padding:24px 22px 26px;border-right:1px solid var(--line);position:relative}
.tabcard:last-child{border-right:none}
@media(max-width:760px){.tabcard{border-right:none;border-bottom:1px solid var(--line)}.tabcard:last-child{border-bottom:none}}
.tabtop{margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--field)}
.tabfile{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--mut)}
.tabcard h3{font-size:19px;font-weight:700;letter-spacing:-0.02em;margin:0 0 8px}
.tabcard p{font-size:13.5px;color:var(--mut);line-height:1.55;margin:0 0 8px}
.tabcard .tabnote{font-size:12.5px;color:var(--ink);border-left:3px solid var(--acc);padding-left:10px;margin-top:12px}
.tabcard:first-child::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--acc)}

/* ===== "$49 buys" as an interactive workbook (2026-08-03) ===== */
.buys .lead{font-size:clamp(16px,2vw,20px);color:var(--mut);max-width:54ch;margin:4px 0 26px;line-height:1.45}
.workbook{border:1px solid var(--ink);border-radius:12px;overflow:hidden;box-shadow:0 14px 40px rgba(20,19,15,.16);background:var(--card)}
.wbchrome{background:var(--ink);display:flex;align-items:center;gap:7px;padding:10px 16px}
.wbdot{width:10px;height:10px;border-radius:50%;background:#4A463D}
.wbchrome .wbtitle{font-family:var(--mono);font-size:12px;color:#C9C4B7;margin-left:10px;letter-spacing:.03em}
.wbtabs{display:flex;background:#26241D;padding:0 8px;gap:2px}
.wbtab{appearance:none;border:none;background:transparent;color:#A39E90;font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;padding:11px 16px;cursor:pointer;border-bottom:3px solid transparent;transition:color .12s}
.wbtab:hover{color:var(--paper)}
.wbtab.active{color:var(--ink);background:var(--paper);border-bottom-color:var(--acc);font-weight:600;border-radius:4px 4px 0 0}
.wbpane{display:none;padding:0}
.wbpane.active{display:block;animation:wbin .22s ease both}
@keyframes wbin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.wbpane.active{animation:none}}
.wbmatrix{width:100%;border-collapse:collapse;font-size:13px}
.wbmatrix th{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);text-align:left;padding:12px 14px 8px;border-bottom:2px solid var(--ink);background:var(--paper);white-space:nowrap}
.wbmatrix td{padding:10px 14px;border-bottom:1px solid var(--field);color:var(--ink);vertical-align:top}
.wbmatrix td:first-child{font-family:var(--mono);font-size:11.5px;color:var(--mut);white-space:nowrap}
.wbmatrix tr:last-child td{border-bottom:none}
.wbmatrix em{color:var(--acc);font-style:normal;font-weight:700}
.wbmatrix td.blank{background:repeating-linear-gradient(45deg,transparent,transparent 5px,#f2efe8 5px,#f2efe8 6px);min-width:52px}
.mtag{font-family:var(--mono);font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:3px;background:var(--field);color:var(--ink);white-space:nowrap}
.mtag.imp{background:#e7dcc4} .mtag.neg{background:#3a1512;color:var(--paper)} .mtag.cond{background:#e9d5a0}
.mtag.flag{background:transparent;border:1px solid var(--line-strong);color:var(--mut);font-weight:400}
.wbcap{font-size:13.5px;color:var(--mut);line-height:1.55;padding:14px 16px 18px;background:var(--paper);border-top:1px solid var(--field);margin:0}
.wbcap b{color:var(--ink)}
.verify{font-size:15px;color:var(--mut);margin-top:22px;max-width:60ch}
.verify strong{color:var(--ink);font-weight:700}

/* ===== unified $49 value package (2026-08-03) ===== */
.buys .sechead .secnum{font-size:16px;color:var(--acc);font-weight:800;letter-spacing:-.02em}
.pkgrow{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
@media(max-width:720px){.pkgrow{grid-template-columns:1fr}}
.pkgcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px}
.pkgverify{border-color:var(--ink)}
.pkgtag{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin-bottom:8px}
.pkgcard h3{font-size:19px;font-weight:700;letter-spacing:-.02em;margin:0 0 8px}
.pkgcard p{font-size:13.5px;color:var(--mut);line-height:1.6;margin:0}
.pkgcard strong{color:var(--ink)}
.pkgsoon{display:inline-block;font-family:var(--mono);font-size:10.5px;color:var(--faint);border:1px dashed var(--line-strong);border-radius:3px;padding:1px 7px;margin-top:2px}
.pkgprice{display:grid;grid-template-columns:1.3fr 1fr;border:2px solid var(--ink);border-radius:14px;overflow:hidden;margin-top:16px}
@media(max-width:720px){.pkgprice{grid-template-columns:1fr}}
.pkgprice-main{background:var(--ink);color:var(--paper);padding:30px 28px;display:flex;flex-direction:column;justify-content:center}
.pkgprice-lead{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#A39E90}
.pkgprice-amt{font-size:64px;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--paper)}
.pkgprice-sub{font-size:13px;color:#A39E90;margin:6px 0 16px;max-width:36ch;line-height:1.5}
.pkgbtn{background:var(--knock);color:var(--ink);align-self:flex-start;font-weight:700}
.pkgbtn:hover{background:var(--paper);text-decoration:none}
.pkgprice-alt{padding:24px 26px;display:flex;flex-direction:column;gap:12px;background:var(--paper);justify-content:center}
.pkgalt-row{display:flex;align-items:baseline;gap:10px;font-size:15px;color:var(--ink)}
.pkgalt-row b{font-weight:800;letter-spacing:-.02em}
.pkgalt-row .pkgalt-note{font-family:var(--mono);font-size:11px;color:var(--mut);margin-left:auto}
.pkgalt-row.soon,.pkgalt-row.soon b{color:var(--faint)}
.pkgalt-link{font-family:var(--mono);font-size:12px;margin-top:6px;color:var(--acc)}