/* ============================================================
   thornberry.ai — site styles (Groovy)
   Built on the design-system tokens in colors_and_type.css.
   Local aliases below mirror the brand-guide token names.
   ============================================================ */
:root{
  --bg-deep:var(--deep); --bg-primary:var(--primary); --bg-secondary:var(--secondary);
  --bg-tertiary:var(--tertiary); --bd:var(--border);
  --f-head:var(--font-display); --f-ui:var(--font-ui);
  --f-body:var(--font-body); --f-mono:var(--font-mono);
  --glow-purple:rgba(167,139,250,.20); --glow-cyan:rgba(20,184,166,.22);
  --ez:var(--ease-standard);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1000px 560px at 82% -8%, rgba(167,139,250,.13), transparent 60%),
    radial-gradient(820px 520px at -4% 8%, rgba(20,184,166,.10), transparent 55%),
    radial-gradient(560px 360px at 96% 70%, rgba(236,72,153,.07), transparent 60%),
    var(--bg-deep);
  color:var(--text); font-family:var(--f-body); line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--f-head);letter-spacing:-.01em;line-height:1.05;font-weight:700}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
img{display:block}

/* fixed brandbar — purple|cyan split, the brand signature */
.brandbar{position:fixed;top:0;left:0;right:0;height:4px;z-index:60;
  background:linear-gradient(90deg,var(--purple) 0 50%,var(--cyan) 50% 100%)}

/* ---- top nav ---- */
header.nav{position:sticky;top:4px;z-index:50;display:flex;align-items:center;gap:22px;
  padding:14px 34px;background:rgba(2,6,23,.72);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(71,85,105,.5)}
.brand{display:flex;align-items:center;gap:3px;margin-right:auto;cursor:pointer}
.brand img{width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 0 12px rgba(45,212,191,.45))}
.wordmark{font-family:var(--f-head);font-weight:800;font-size:20px;letter-spacing:-.02em;
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
nav.links{display:flex;gap:6px}
nav.links a{font-family:var(--f-ui);font-size:14px;letter-spacing:.02em;cursor:pointer;
  color:var(--text-muted,#94A3B8);padding:8px 14px;border-radius:9px;transition:.2s var(--ez)}
nav.links a:hover{color:var(--text);background:rgba(167,139,250,.10)}
nav.links a.active{color:var(--text);background:rgba(20,184,166,.14);
  box-shadow:inset 0 0 0 1px rgba(20,184,166,.4)}
.btn{font-family:var(--f-ui);font-size:14px;cursor:pointer;border:none;
  padding:10px 18px;border-radius:10px;transition:.2s var(--ez)}
.btn-primary{background:linear-gradient(120deg,var(--cyan),var(--green));color:#04201d;
  font-weight:700;box-shadow:0 0 22px var(--glow-cyan)}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--bd)}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}

/* ---- page system + router ---- */
.page{display:none;animation:fade .4s var(--ez)}
.page.active{display:block}
@keyframes fade{from{transform:translateY(10px)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.page{animation:none}}
section{padding:60px 34px;max-width:1180px;margin:0 auto}
.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cyan);margin-bottom:14px}
.lead{color:var(--text-dim,#CBD5E1);font-size:18px;max-width:62ch}
.h-xl{font-size:clamp(38px,6vw,66px)}
.h-lg{font-size:clamp(28px,4vw,42px)}
.grad-text{background:var(--grad-title);-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-brand{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- hero ---- */
.hero{position:relative;border:1px solid var(--a20);border-radius:24px;overflow:hidden;
  min-height:600px;display:grid;grid-template-columns:1.08fr .92fr;margin-top:6px;
  background:var(--grad-hero)}
.hero::before{content:"";position:absolute;inset:0;mix-blend-mode:screen;pointer-events:none;
  background:
    radial-gradient(460px 460px at 80% 40%, rgba(45,212,191,.20), transparent 70%),
    radial-gradient(360px 360px at 58% 90%, rgba(236,72,153,.13), transparent 70%)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;mix-blend-mode:screen;
  background:url("/assets/textures/hero-letters.webp") center/720px auto;
  opacity:.28;-webkit-mask-image:linear-gradient(90deg,transparent 4%,#000 34%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 4%,#000 34%,#000 100%)}
.hero-content{position:relative;z-index:3;max-width:660px;padding:64px 52px;align-self:center}
.hero-art{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;padding:30px 44px 30px 0;overflow:hidden}
@media(max-width:920px){.hero{grid-template-columns:1fr}.hero-content{max-width:none;padding:40px 26px}.hero-art{padding:6px 26px 48px;min-height:430px}}

/* hero tarot spread — glyph cards fanned around a character card */
.spread{position:relative;width:408px;height:480px}
.tcard{position:absolute;width:224px;height:340px;padding:28px 24px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;
  transition:transform .45s var(--ez)}
.tcard.l,.tcard.r{background:url('/assets/paper/tarot-dark-1.webp') center/100% 100% no-repeat;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.55))}
.tcard.r{background-image:url('/assets/paper/tarot-dark-2.webp')}
.tcard .ti{width:144px;height:144px;object-fit:contain;filter:drop-shadow(0 0 18px rgba(20,184,166,.42))}
.tcard .tn{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim,#CBD5E1)}
.tcard .te{font-family:var(--f-mono);font-size:9px;letter-spacing:.22em;color:var(--cyan)}
.tcard.l{left:0;top:72px;transform:rotate(-11deg);z-index:1}
.tcard.r{right:0;top:72px;transform:rotate(11deg);z-index:1}
.tcard.c{left:50%;top:0;margin-left:-112px;z-index:4}
.spread:hover .tcard.l{transform:rotate(-15deg) translateY(-6px)}
.spread:hover .tcard.r{transform:rotate(15deg) translateY(-6px)}
/* character card — drop real character art into .charcard */
/* character card now holds the wizard mascot */
.tcard.c.charcard{border:none;background:none;box-shadow:none;overflow:visible}
.charcard::before{content:"";position:absolute;left:50%;top:48%;width:340px;height:340px;
  transform:translate(-50%,-50%);border-radius:50%;z-index:0;
  background:radial-gradient(circle, rgba(180,255,70,.30), rgba(45,212,191,.16) 46%, transparent 70%)}
.charcard .wizard{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  width:330px;max-width:none;height:auto;z-index:1;cursor:pointer;
  filter:drop-shadow(0 18px 32px rgba(0,0,0,.5)) drop-shadow(0 0 26px rgba(180,255,70,.32));
  transition:transform .5s var(--ez)}
.spread:hover .charcard .wizard{transform:translateX(-50%) translateY(-8px)}
.charcard .wizard.poofing{animation:wizpoofout .2s var(--ez) forwards}
.charcard .wizard.poofin{animation:wizpoofin .32s var(--ez)}
@keyframes wizpoofout{to{transform:translateX(-50%) scale(.35) rotate(-10deg);opacity:0;filter:blur(8px) drop-shadow(0 0 34px rgba(190,255,70,.7))}}
@keyframes wizpoofin{0%{transform:translateX(-50%) scale(.5);opacity:0;filter:blur(6px)}100%{transform:translateX(-50%) scale(1);opacity:1}}
.wizpoof{position:absolute;left:50%;bottom:78px;width:280px;height:280px;transform:translate(-50%,0) scale(.25);
  border-radius:50%;pointer-events:none;opacity:0;z-index:2;
  background:radial-gradient(circle, rgba(190,255,80,.95), rgba(45,212,191,.55) 36%, rgba(167,139,250,.22) 58%, transparent 72%)}
.wizpoof.go{animation:wizburst .55s var(--ez)}
@keyframes wizburst{0%{opacity:.95;transform:translate(-50%,0) scale(.25)}55%{opacity:.85}100%{opacity:0;transform:translate(-50%,0) scale(1.75)}}
@media (prefers-reduced-motion:reduce){.charcard .wizard.poofing,.charcard .wizard.poofin,.wizpoof.go{animation-duration:.01ms}}
@media(max-width:920px){.spread{transform:scale(.92)}}
/* small phones: keep the full three-card fan, scaled to fit (negative margin
   reclaims the layout box the transform leaves behind) */
@media(max-width:520px){.spread{transform:scale(.72);transform-origin:top center;margin-bottom:-134px}}
@media(max-width:360px){.spread{transform:scale(.6);margin-bottom:-192px}}

.live{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-mono);
  font-size:12px;color:var(--green)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);
  box-shadow:0 0 10px var(--green);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.trust{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.trust span{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);
  font-size:11.5px;color:var(--text-dim,#CBD5E1);background:rgba(30,41,59,.5);
  border:1px solid rgba(71,85,105,.55);border-radius:20px;padding:6px 12px}
.trust span b{color:var(--cyan);font-weight:400}

/* answer capsule */
.capsule{background:rgba(20,184,166,.07);border:1px solid rgba(20,184,166,.3);
  border-left:3px solid var(--cyan);border-radius:12px;padding:16px 20px;
  font-family:var(--f-body);font-size:16px;color:var(--text-dim,#CBD5E1);max-width:74ch;margin-top:16px}
.capsule strong{color:var(--text)}
/* product hero — full-bleed band, one notch lighter (primary), letters pattern stretched full width */
.prodhero-band{position:relative;overflow:hidden;background:var(--primary);
  border-top:1px solid var(--a15);
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 120px),transparent);
  mask-image:linear-gradient(180deg,#000 calc(100% - 120px),transparent)}
.prodhero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("/assets/textures/product-hero.webp") center/cover no-repeat;opacity:.11}
.prodhero-inner{position:relative;z-index:1}
/* pricing hero — full-bleed band with the colored voronoi behind the title */
.pricehero-band{position:relative;overflow:hidden;background:var(--primary);
  border-top:1px solid var(--a15);
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 120px),transparent);
  mask-image:linear-gradient(180deg,#000 calc(100% - 120px),transparent)}
.pricehero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("/assets/textures/pricing-hero.png") center/cover no-repeat;opacity:.09}
.pricehero-grain{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("/assets/textures/grain-pricing.webp") repeat;background-size:700px;
  filter:invert(1);mix-blend-mode:screen;opacity:.62}
.pricehero-inner{position:relative;z-index:1}
.disclose{font-family:var(--f-body);font-size:12.5px;color:var(--text-muted,#94A3B8);
  max-width:64ch;margin:12px auto 0;line-height:1.5}

/* numbered steps — premium glyph cards */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px;counter-reset:s}
.step{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--secondary),var(--deep));
  border:1px solid var(--a20);border-radius:20px;padding:28px 24px;
  box-shadow:var(--shadow-glass);transition:transform .3s var(--ez),border-color .3s,box-shadow .3s}
.step:hover{transform:translateY(-4px);border-color:var(--a50);box-shadow:var(--shadow-glass-hover),0 0 34px rgba(20,184,166,.16)}
.step::before{counter-increment:s;content:"0" counter(s);position:absolute;top:20px;right:24px;
  font-family:var(--f-mono);font-weight:700;font-size:36px;line-height:1;color:var(--a25)}
.step .gi{width:72px;height:72px;object-fit:contain;filter:drop-shadow(0 0 16px rgba(20,184,166,.4));margin-bottom:16px}
.step h3{font-size:20px;margin-bottom:8px}
.step p{color:var(--text-muted,#94A3B8);font-size:14.5px}

/* how-it-works paper cards — torn handmade sheets stretched to card size,
   alpha deckled edges, so the glow is a drop-shadow that follows the paper */
.step.paperstep{background:none;border:none;border-radius:0;overflow:visible;box-shadow:none;
  isolation:isolate;padding:34px 30px 30px}
.step.paperstep::after{content:"";position:absolute;inset:-16px -12px;z-index:-1;
  background-image:var(--paper);background-size:100% 100%;background-repeat:no-repeat;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.45)) drop-shadow(0 0 34px rgba(20,184,166,.22));
  transition:filter .3s}
.step.paperstep:hover{transform:translateY(-4px);border:none;box-shadow:none}
.step.paperstep:hover::after{filter:drop-shadow(0 14px 26px rgba(0,0,0,.5)) drop-shadow(0 0 46px rgba(20,184,166,.34))}
.step.paperstep::before{color:rgba(150,230,214,.45)}
.step.paperstep h3{color:#f3ede0}
.step.paperstep p{color:rgba(243,237,224,.82)}
.step.paperstep .gi{filter:drop-shadow(0 0 14px rgba(20,184,166,.55))}

/* chips */
.pills{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.pill{font-family:var(--f-mono);font-size:12.5px;color:var(--text-dim,#CBD5E1);
  background:rgba(30,41,59,.5);border:1px solid rgba(71,85,105,.55);
  border-radius:8px;padding:7px 12px}
.pill b{color:var(--cyan);font-weight:400}

/* cards (glass) */
.grid{display:grid;gap:18px}
.card{position:relative;background:var(--secondary);
  border:1px solid var(--a20);border-radius:16px;padding:22px;
  box-shadow:var(--shadow-glass);transition:transform .3s var(--ez),border-color .3s,box-shadow .3s}
.card:hover{transform:translateY(-3px);border-color:var(--a50);box-shadow:var(--shadow-glass-hover)}
.card h3{font-size:19px;margin-bottom:8px}
.card p{color:var(--text-muted,#94A3B8);font-size:14.5px}
.card .gi{width:40px;height:40px;object-fit:contain;margin-bottom:12px}
.tag{font-family:var(--f-mono);font-size:11px;color:var(--purple);
  border:1px solid rgba(167,139,250,.4);border-radius:20px;padding:3px 10px;display:inline-block}
.card .cardglyph{display:block;width:34px;height:34px;object-fit:contain}

/* spellbook market cards (markets & brokers) — a handmade-paper cutout per
   market with a tome resting on it; paper + book keep their baked-in alpha
   edges and glows, so all shadows are drop-shadows that follow the art */
.bookcard{position:relative;aspect-ratio:880/1245}
.bookface{position:absolute;inset:0;text-align:center;
  --ink:#211810;--ink-soft:rgba(33,24,16,.9);--stamp-ink:#07564c;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--paper) center/100% 100% no-repeat;
  padding:11% 9%;transform:rotate(var(--tilt,0deg));
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.36)) drop-shadow(0 30px 44px rgba(0,0,0,.4));
  transition:transform .45s var(--ez)}
.bookcard:hover .bookface{transform:rotate(0deg) translateY(-7px)}
.bookimg{width:62%;max-width:210px;aspect-ratio:5/4;object-fit:contain;margin:0 auto 6px;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.3))}
.bk-vol{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--stamp-ink);border:1.5px solid currentColor;
  border-radius:6px;padding:4px 11px;transform:rotate(-1.6deg)}
.bookface h3{margin:12px 0 0;font-size:clamp(22px,2.2vw,27px);color:var(--ink)}
.bk-note{font-family:var(--f-mono);font-size:11px;color:var(--stamp-ink);
  letter-spacing:.06em;margin-top:4px}
.bk-brokers{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:14px}
.bk-brokers span{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-soft);
  background:rgba(255,255,255,.28);border:1px solid rgba(33,24,16,.32);
  border-radius:16px;padding:4px 11px}
@media(max-width:900px){
  .bookcard{max-width:400px;width:100%;margin:0 auto}}
@media (prefers-reduced-motion:reduce){
  .bookcard:hover .bookface{transform:rotate(var(--tilt,0deg))}}

/* paper deck (product FAQ) — one large handmade-paper sheet pinned mid-viewport;
   each next sheet rides up on scroll and stacks over the last (js/site.js drives
   the scale/dim of the covered sheet). Sheets are real cutout PNGs→webp with
   alpha deckled edges, so shadows are drop-shadows that follow the paper. */
.paperdeck{padding-bottom:14vh}
.papersheet{position:sticky;top:max(86px,calc(50svh - 330px));width:min(100%,920px);
  margin:0 auto 62vh;aspect-ratio:1600/1131;}
.papersheet:first-of-type{margin-top:34px}
.papersheet:last-of-type{margin-bottom:4vh}
.papersheet{
  transform:rotate(var(--tilt,0deg)) scale(var(--stack-s,1)) translateY(var(--stack-y,0px));
  filter:brightness(var(--stack-b,1)) saturate(var(--stack-sat,1));
  will-change:transform,filter}
.sheetface{position:absolute;inset:0;color:var(--ink);
  --ink:#211810;--ink-soft:rgba(33,24,16,.92);--stamp-ink:#07564c;
  --txt-glow:0 0 16px rgba(255,250,238,.65),0 0 4px rgba(255,250,238,.5);
  background-image:var(--paper-l);background-size:100% 100%;background-repeat:no-repeat;
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.38)) drop-shadow(0 42px 60px rgba(0,0,0,.42));
  padding:clamp(38px,9%,92px) clamp(38px,10%,104px);
  display:flex;flex-direction:column;justify-content:center}
.sheetface.darksheet{--ink:#faf6ec;--ink-soft:rgba(250,246,236,.93);--stamp-ink:#a8f0e0;
  --txt-glow:0 0 16px rgba(0,0,0,.55),0 0 4px rgba(0,0,0,.4)}
.papersheet h3{font-size:clamp(26px,3.7vw,42px);color:var(--ink);margin:14px 0 14px;max-width:22ch;
  text-shadow:var(--txt-glow)}
.papersheet p{font-family:var(--f-body);font-size:clamp(16px,1.85vw,20px);line-height:1.6;
  color:var(--ink-soft);max-width:56ch;text-shadow:var(--txt-glow)}
.papersheet .stamp{position:absolute;top:clamp(30px,8%,72px);left:clamp(38px,10%,104px);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--stamp-ink);border:1.5px solid currentColor;border-radius:6px;padding:5px 12px;
  transform:rotate(-2.4deg);text-shadow:var(--txt-glow)}
.papersheet .sheetno{position:absolute;top:clamp(32px,8.4%,76px);right:clamp(38px,10%,104px);
  font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;color:var(--ink-soft);
  text-shadow:var(--txt-glow)}
.papersheet .ghostno{position:absolute;right:clamp(30px,8%,84px);bottom:clamp(14px,4%,40px);
  font-family:var(--f-mono);font-weight:700;font-size:clamp(64px,9vw,116px);line-height:1;
  color:var(--ink);opacity:.09;pointer-events:none;user-select:none}
@media(max-width:700px){
  .papersheet{aspect-ratio:880/1245;width:min(100%,440px);top:max(80px,calc(50svh - 44vh))}
  .sheetface{background-image:var(--paper-p);justify-content:center;
    padding:clamp(44px,14%,72px) clamp(30px,11%,52px)}
  .papersheet h3{font-size:26px}
  .papersheet p{font-size:16.5px}
  .papersheet .stamp{left:clamp(30px,11%,52px);top:clamp(40px,9%,72px)}
  .papersheet .sheetno{right:clamp(30px,11%,52px);top:clamp(44px,9.5%,76px)}
}
@media (prefers-reduced-motion:reduce){
  .papersheet{transform:rotate(var(--tilt,0deg));filter:none}}

/* extensibility tarot row (product) — four tall light handmade-paper cards dealt
   in a row, even cards dropped like a fanned hand; same portrait sheets as the
   paper deck, face centered: number, title, glyph, body */
.extdeck{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;align-items:start;
  margin-bottom:44px} /* clearance for the dropped even cards */
.extcard{transform:translateY(var(--drop,0px))}
.extcard:nth-child(even){--drop:36px}
.extface{position:relative;aspect-ratio:880/1245;text-align:center;color:var(--ink);
  --ink:#211810;--ink-soft:rgba(33,24,16,.92);--stamp-ink:#07564c;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  background:var(--paper) center/100% 100% no-repeat;
  padding:13% 11%;transform:rotate(var(--tilt,0deg));
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.34)) drop-shadow(0 30px 44px rgba(0,0,0,.38));
  transition:transform .45s var(--ez)}
.extcard:hover .extface{transform:rotate(0deg) translateY(-7px)}
.extno{font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;color:var(--stamp-ink)}
.extface h3{font-size:clamp(17px,1.6vw,22px);color:var(--ink);line-height:1.12;max-width:12ch}
.extglyph{width:32%;max-width:88px;object-fit:contain;margin:2px 0;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.28))}
.extface p{font-family:var(--f-body);font-size:clamp(12.5px,1.05vw,14.5px);
  line-height:1.5;color:var(--ink-soft)}
@media(max-width:1000px){
  .extdeck{grid-template-columns:1fr 1fr;gap:30px;width:min(100%,760px);margin-inline:auto}}
@media(max-width:540px){
  .extdeck{grid-template-columns:1fr;width:min(100%,400px)}
  .extcard{--drop:0px}
  .extface{gap:11px}
  .extface h3{font-size:23px}
  .extface p{font-size:15.5px}}
@media (prefers-reduced-motion:reduce){
  .extcard:hover .extface{transform:rotate(var(--tilt,0deg))}}

/* parchment scroll (home / agentic OS) — the section head and a horizontal
   scroll pin together mid-viewport; page scroll slides the ink sideways through
   a clip window over the parchment, one full entry at a time (js/site.js
   quantizes progress and eases each slide) */
.scrollstage{height:280vh}
.scrollpin{position:sticky;top:max(86px,calc(50svh - 300px));width:min(100%,980px);
  margin:0 auto}
.scrollhead{margin-bottom:26px}
.scrollart{position:relative;aspect-ratio:2671/1113}
.scrollface{position:absolute;inset:0;color:var(--ink);
  --ink:#211810;--ink-soft:rgba(33,24,16,.92);--stamp-ink:#07564c;
  --txt-glow:0 0 16px rgba(255,250,238,.65),0 0 4px rgba(255,250,238,.5);
  background:url('/assets/paper/scroll-h.webp') center/100% 100% no-repeat;
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.38)) drop-shadow(0 42px 60px rgba(0,0,0,.42))}
.scrollwin{position:absolute;left:13%;right:13%;top:11%;bottom:13%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
.scrollink{display:flex;height:100%;will-change:transform}
.sentry{flex:0 0 100%;height:100%;min-height:0;
  display:flex;flex-direction:column;justify-content:center;padding:2% 4%}
.sentry .gi{width:52px;height:52px;object-fit:contain;margin-bottom:12px;
  filter:drop-shadow(0 1px 6px rgba(0,0,0,.28))}
.sentry .stamp{align-self:flex-start;font-family:var(--f-mono);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--stamp-ink);
  border:1.5px solid currentColor;border-radius:6px;padding:5px 12px;
  transform:rotate(-1.6deg);text-shadow:var(--txt-glow)}
.sentry h3{font-size:clamp(22px,2.8vw,32px);color:var(--ink);margin:12px 0 10px;max-width:24ch;
  text-shadow:var(--txt-glow)}
.sentry p{font-family:var(--f-body);font-size:clamp(15px,1.7vw,18px);line-height:1.55;
  color:var(--ink-soft);max-width:52ch;text-shadow:var(--txt-glow)}
.sentry .entryno{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;
  color:var(--ink-soft);text-shadow:var(--txt-glow);margin-bottom:10px}
.sentry.colophon{align-items:center;text-align:center}
.sentry.colophon p{font-family:var(--f-mono);font-size:13px;letter-spacing:.04em;max-width:40ch}
.sentry.colophon .fin{font-family:var(--f-mono);font-size:12px;letter-spacing:.3em;
  color:var(--stamp-ink);margin-top:18px;text-shadow:var(--txt-glow)}
@media(max-width:700px){
  /* phones get the tall portrait scroll back — entries step vertically instead.
     The parchment fills the section width; its lower roll runs below the fold
     while pinned, so entries anchor to the top of the window to stay readable */
  .scrollpin{width:100%;top:70px}
  .scrollhead{margin-bottom:12px}
  .scrollhead .lead{font-size:14px;line-height:1.5}
  .scrollart{width:100%;aspect-ratio:880/1300;margin:0 auto}  /* art squashed from its native 880/2015 — reads fine, keeps the pinned scroll on screen */
  .scrollface{background-image:url('/assets/paper/scroll-p.webp')}
  .scrollwin{left:12%;right:12%;top:12.5%;bottom:12.5%;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
  .scrollink{display:block;height:100%}  /* definite height so each entry = one window = one JS step */
  .sentry{height:100%;padding:6% 5%;justify-content:flex-start;padding-top:10%}
  .sentry h3{font-size:25px}
  .sentry p{font-size:16.5px}
}
@media(max-width:360px){
  /* tiny phones: a touch more parchment height + smaller type so entries clear the window */
  .scrollart{aspect-ratio:880/1500}
  .sentry h3{font-size:21px}
  .sentry p{font-size:15px}
  .sentry .gi{width:44px;height:44px}
}
@media (prefers-reduced-motion:reduce){
  .scrollstage{height:auto}
  .scrollwin{overflow:auto}}

/* feature glyph panel */
.gpic{position:relative;border:1px solid var(--a25);border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,var(--secondary),var(--deep));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  padding:40px;min-height:330px;box-shadow:var(--shadow-glass),0 0 40px rgba(20,184,166,.10)}
.gpic::before{content:"";position:absolute;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle, rgba(20,184,166,.20), transparent 65%)}
.gpic img.feat{position:relative;width:200px;height:200px;object-fit:contain;filter:drop-shadow(0 0 28px rgba(20,184,166,.5))}
.gpic .glabel{position:relative;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;color:var(--text-dim,#CBD5E1)}

/* overlapping glyph trio — center icon largest and on top */
.gpic .gtrio{position:relative;display:flex;align-items:center;justify-content:center}
.gpic .gtrio img{object-fit:contain;filter:drop-shadow(0 0 28px rgba(20,184,166,.5))}
.gpic .gtrio .trio-main{position:relative;z-index:2;width:200px;height:200px}
.gpic .gtrio .trio-side{position:relative;z-index:1;width:130px;height:130px}
.gpic .gtrio .trio-side:first-child{margin-right:-38px;transform:rotate(-16deg) translateY(8px)}
.gpic .gtrio .trio-side:last-child{z-index:3;margin-left:-38px;transform:rotate(8deg) translateY(8px)}

/* glyph deck — a hallway of doors, one per room. 10 tracks with each door
   spanning 2 keeps door width identical to a 5-up row while letting the
   4-door and 2-door rows sit centered: 5 / 4 / 2 */
.glyph-deck{display:grid;grid-template-columns:repeat(10,1fr);gap:18px;margin-top:30px}
.glyph-deck .gcard{grid-column:span 2}
.glyph-deck .gcard:nth-child(6){grid-column:2/span 2}   /* centers the 4-door row */
.glyph-deck .gcard:nth-child(10){grid-column:4/span 2}  /* chat + world monitor, centered */
.gcard{position:relative;overflow:hidden;cursor:pointer;aspect-ratio:2/3;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  background:
    linear-gradient(180deg,rgba(2,6,23,.84),rgba(2,6,23,.62) 55%,rgba(2,6,23,.78)),
    var(--wood,linear-gradient(180deg,var(--secondary),var(--deep))) center/cover no-repeat;
  border:1px solid var(--a20);border-radius:999px 999px 14px 14px;padding:15% 12px 16px;text-align:center;
  box-shadow:var(--shadow-glass);transition:transform .35s var(--ez),border-color .3s,box-shadow .35s}
/* inner door frame */
.gcard::before{content:"";position:absolute;inset:8px;pointer-events:none;
  border:1px solid var(--a20);border-radius:999px 999px 9px 9px}
/* doorknob — flat gold lever handle, plate set against the right stile,
   mirrored so the lever points into the door */
.gcard::after{content:"";position:absolute;right:10px;top:54%;width:44px;height:44px;margin-top:-22px;
  background:url('/assets/glyphs/door-knob.svg') center/contain no-repeat;
  transform:scaleX(-1);
  filter:drop-shadow(0 0 4px rgba(251,191,36,.25));transition:filter .3s}
/* hover: the door creaks open, light spills underneath */
.gcard:hover{transform:perspective(900px) rotateY(-7deg) translateY(-4px);transform-origin:left center;
  border-color:var(--a50);
  box-shadow:var(--shadow-glass-hover),0 0 30px rgba(20,184,166,.22),0 26px 28px -16px rgba(20,184,166,.45)}
.gcard:hover::after{filter:drop-shadow(0 0 9px rgba(251,191,36,.7))}
.gcard img{width:64px;height:64px;margin:14% auto 0;object-fit:contain;
  filter:drop-shadow(0 0 12px rgba(20,184,166,.35));transition:transform .3s var(--ez)}
.gcard:hover img{transform:scale(1.08)}
/* nameplate */
.gcard .gn{display:inline-block;font-family:var(--f-ui);font-size:12px;color:var(--text-dim,#CBD5E1);
  padding:5px 11px;border:1px solid var(--a20);border-radius:7px;background:rgba(2,6,23,.45)}
@media(max-width:860px){.glyph-deck{grid-template-columns:repeat(2,1fr);gap:14px}.gcard{aspect-ratio:3/4}
  .glyph-deck .gcard,.glyph-deck .gcard:nth-child(6),.glyph-deck .gcard:nth-child(10){grid-column:auto}}
@media (prefers-reduced-motion:reduce){.gcard:hover{transform:none}}

/* surface modal */
.modal-ov{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:24px;
  background:rgba(2,6,23,.74);backdrop-filter:blur(8px)}
.modal-ov.open{display:flex;animation:mfade .25s var(--ez)}
@keyframes mfade{from{opacity:0}to{opacity:1}}
.modal{position:relative;width:min(520px,100%);text-align:center;
  max-height:calc(100svh - 48px);overflow:auto;
  background:
    linear-gradient(180deg,rgba(2,6,23,.9),rgba(2,6,23,.74) 55%,rgba(2,6,23,.86)),
    var(--wood,linear-gradient(180deg,var(--secondary),var(--deep))) center/cover no-repeat;
  border:1px solid var(--a50);border-radius:22px;padding:38px 34px 30px;
  box-shadow:var(--shadow-glass-hover),0 30px 80px rgba(0,0,0,.6),0 0 60px rgba(167,139,250,.2);
  animation:mpop .3s var(--ez)}
@keyframes mpop{from{transform:translateY(12px) scale(.98)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.modal-ov.open,.modal{animation:none}}
.modal .mclose{position:absolute;top:10px;right:10px;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--a20);background:transparent;color:var(--text-muted,#94A3B8);font-size:18px;
  cursor:pointer;line-height:1;transition:.2s var(--ez)}
.modal .mclose:hover{border-color:var(--cyan);color:var(--cyan)}
.modal img{width:104px;height:104px;object-fit:contain;margin:0 auto 14px;filter:drop-shadow(0 0 24px rgba(20,184,166,.45))}
.modal .meyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);margin-bottom:6px}
.modal h3{font-family:var(--f-head);font-size:24px;margin-bottom:12px}
.modal p{color:var(--text-dim,#CBD5E1);font-size:15.5px;line-height:1.6}
.modal .mlist{list-style:none;text-align:left;margin:16px auto 0;max-width:420px;display:grid;gap:9px}
.modal .mlist li{position:relative;padding-left:20px;color:var(--text-dim,#CBD5E1);font-size:14px;line-height:1.5}
.modal .mlist li::before{content:"◆";position:absolute;left:0;top:3px;color:var(--gold,#FBBF24);font-size:10px}
.modal .mfoot{margin-top:18px;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--text-muted,#94A3B8)}

.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

/* pricing */
.price{font-family:var(--f-mono);font-size:40px;font-weight:700}
.price small{font-size:14px;color:var(--text-muted,#94A3B8);font-weight:400}
.tier{position:relative}
.tier.featured{border-color:var(--cyan);box-shadow:0 0 40px var(--glow-cyan)}
.tier ul{list-style:none;margin:16px 0;display:grid;gap:9px}
.tier li{font-size:14px;color:var(--text-dim,#CBD5E1);display:flex;gap:9px}
.tier li::before{content:"◆";color:var(--cyan);font-size:11px}
/* stitched leather cards (pricing) — graphite leather face with stitching on
   the seat counter and the lifetime-seat card, kin to the leather mode cards
   and the security essays. Art comes in via --leather. */
.card.stitched{overflow:hidden;background:var(--leather) center/cover no-repeat}
.card.stitched::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(2,6,23,.46),rgba(2,6,23,.68))}
.card.stitched::after{content:"";position:absolute;inset:9px;pointer-events:none;border-radius:10px;
  border:1.5px dashed rgba(255,255,255,.17)}  /* stitching */
.card.stitched>*{position:relative;z-index:1}
.card.stitched h3{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.55)}
.card.stitched li,.card.stitched .price small,.card.stitched p{text-shadow:0 1px 6px rgba(0,0,0,.5)}
/* the app-icon plinth (pricing download) on the same leather — the wash and the
   teal halo share ::before so the icon stays on top; ::after is the stitching */
.gpic.stitched{background:var(--leather) center/cover no-repeat}
.gpic.stitched::before{inset:0;width:auto;height:auto;border-radius:0;
  background:
    radial-gradient(320px 320px at 50% 46%, rgba(20,184,166,.20), transparent 65%),
    linear-gradient(180deg,rgba(2,6,23,.46),rgba(2,6,23,.68))}
.gpic.stitched::after{content:"";position:absolute;inset:9px;pointer-events:none;border-radius:14px;
  border:1.5px dashed rgba(255,255,255,.17)}  /* stitching */
/* access (claim your seat) cards — the two plain squares move onto green
   leather with the same stitching as the pricing cards; the form chrome
   brightens so labels and headings hold up on the dark face, and the CTAs
   go amber so they don't sink into the green */
#access .card.stitched::before{background:linear-gradient(180deg,rgba(2,6,23,.22),rgba(2,6,23,.5))}
#access .invitecol .card.stitched{background-position:center 78%;position:relative;z-index:1}  /* short card — aim past the dark cloud band; sits above the wizard art so they never overlap */
#access .card.stitched h2{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.55)}
#access .card.stitched .field label{color:var(--text-dim,#CBD5E1);text-shadow:0 1px 4px rgba(0,0,0,.5)}
#access .card.stitched .eyebrow{color:var(--amber);text-shadow:0 1px 6px rgba(0,0,0,.5)}
#access .card.stitched .btn-primary{background:linear-gradient(120deg,var(--amber),#FFD166);
  color:#3a2403;box-shadow:0 0 22px rgba(255,176,32,.32)}
#access .card.stitched .btn-ghost:hover{border-color:#FFD166;color:#FFD166}
#access .card.stitched .field input:focus,#access .card.stitched .field select:focus{
  border-color:var(--amber);box-shadow:0 0 0 3px rgba(255,176,32,.22)}
.priceguy{position:absolute;left:-175px;bottom:-265px;width:660px;height:auto;z-index:-1;pointer-events:none;
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.45))}
@media(max-width:1024px){.priceguy{display:none}}
/* company hero character */
.cohero{position:relative}
.coguy{position:absolute;right:-40px;top:40px;width:565px;height:auto;z-index:1;pointer-events:none;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.45))}
@media(max-width:1080px){.coguy{display:none}}
/* security hero character */
.sechero{position:relative}
.secguy{position:absolute;right:40px;top:6px;width:500px;height:auto;z-index:1;pointer-events:none;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.45))}
@media(max-width:1080px){.secguy{display:none}}
/* product strategy-section character (griffin) */
.lifehero{position:relative}
.lifeguy{position:absolute;right:-10px;top:-6px;width:400px;height:auto;z-index:0;pointer-events:none;
  transform:scaleX(-1);filter:drop-shadow(0 16px 30px rgba(0,0,0,.45))}
@media(max-width:1080px){.lifeguy{display:none}}
/* access invite column + cooking wizards filling the space */
.invitecol{display:flex;flex-direction:column;align-self:stretch;position:relative}
.checkoutwiz{position:absolute;left:-230px;bottom:-186px;width:560px;max-width:none;height:auto;pointer-events:none;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.4))}
@media(max-width:980px){.checkoutwiz{position:static;left:auto;bottom:auto;width:100%;margin-top:20px}}
/* company grain texture overlay */
#company{position:relative}
.cotexture{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("/assets/textures/grain-company.webp") repeat;background-size:700px;
  filter:invert(1);mix-blend-mode:screen;opacity:.62}
/* home grain texture overlay */
#home{position:relative}
.hmtexture{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("/assets/textures/grain-home.webp") repeat;background-size:700px;
  filter:invert(1);mix-blend-mode:screen;opacity:.62}
/* product grain texture overlay */
#product{position:relative}
.prtexture{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("/assets/textures/grain-product.webp") repeat;background-size:700px;
  filter:invert(1);mix-blend-mode:screen;opacity:.62}
/* security grain texture overlay */
#security{position:relative}
.sctexture{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("/assets/textures/grain-security.webp") repeat;background-size:700px;
  filter:invert(1);mix-blend-mode:screen;opacity:.62}
/* access (claim your seat) grain — image is already dark, so no invert */
#access{position:relative}
.actexture{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("/assets/textures/grain-access.webp") no-repeat center/cover;
  mix-blend-mode:screen;opacity:.36}
/* pricing grain texture overlay */
#pricing{position:relative}
.pgtexture{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:url("/assets/textures/grain-pricing.webp") repeat;background-size:700px;
  filter:invert(1);mix-blend-mode:screen;opacity:.62}

/* forms */
.field{display:block;margin-top:14px}
.field label{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted,#94A3B8)}
.field input,.field select,.field textarea{width:100%;margin-top:6px;background:var(--bg-deep);color:var(--text);
  border:1px solid var(--bd);border-radius:10px;padding:12px 14px;font-family:var(--f-body);font-size:16px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px var(--glow-cyan)}
.code-input{font-family:var(--f-mono);letter-spacing:.14em;text-transform:uppercase;text-align:center;font-size:18px}
.err{color:var(--pink);font-family:var(--f-mono);font-size:12.5px;margin-top:10px;min-height:16px}
.row{display:flex;gap:12px}
.row .field{flex:1}
.summary{display:flex;justify-content:space-between;align-items:baseline;
  padding:10px 0;border-bottom:1px solid rgba(71,85,105,.4)}
.summary:last-of-type{border-bottom:none}
.secure{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-mono);
  font-size:11.5px;color:var(--text-muted,#94A3B8);margin-top:14px}
.licensebox{font-family:var(--f-mono);font-size:18px;letter-spacing:.08em;color:var(--cyan);
  background:var(--bg-deep);border:1px dashed var(--cyan);border-radius:10px;
  padding:14px;text-align:center;margin-top:10px;user-select:all}
.check{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;margin:0 auto 6px;
  background:linear-gradient(120deg,var(--cyan),var(--green));color:#04201d;font-size:30px;font-weight:700;
  box-shadow:0 0 30px var(--glow-cyan)}
.qa{border:1px solid rgba(71,85,105,.5);border-radius:14px;padding:18px 20px;background:rgba(15,23,42,.4)}
.qa h3{font-size:16px;margin-bottom:7px}
.qa p{color:var(--text-muted,#94A3B8);font-size:14.5px}
/* company FAQ cards — mixed torn papers with the teal glow, kin to the home paper steps.
   Paper bleeds 8/10px past the card; the FAQ grids open their gap to 34px so sheets never touch. */
.qa.qa-paper{position:relative;border:none;border-radius:0;background:none;isolation:isolate;
  padding:24px 26px}
.qa.qa-paper::after{content:"";position:absolute;inset:-10px -8px;z-index:-1;
  background-image:var(--paper);background-size:100% 100%;background-repeat:no-repeat;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.45)) drop-shadow(0 0 26px rgba(20,184,166,.18))}
.qa.qa-paper h3{color:#33291f}
.qa.qa-paper p{color:rgba(51,41,31,.82)}
.qa.qa-paper.qa-dark h3{color:#f3ede0}
.qa.qa-paper.qa-dark p{color:rgba(243,237,224,.82)}
#company .g2{gap:34px 34px}

/* voice */
.voice-col h4{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;margin-bottom:12px}
.voice-line{font-family:var(--f-mono);font-size:13px;padding:9px 13px;border-radius:8px;margin-bottom:8px}
.ok{color:var(--green);background:rgba(45,212,191,.08);border-left:2px solid var(--green)}
.no{color:var(--pink);background:rgba(236,72,153,.08);border-left:2px solid var(--pink)}

/* mode cards — leather faces with mode-tinted glow, kin to the paper steps */
.modecard h3{font-size:22px}
.modecard.leather{overflow:hidden;border:1px solid rgba(255,255,255,.14);
  background:var(--leather) center/cover no-repeat}
.modecard.leather::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(2,6,23,.16),rgba(2,6,23,.48))}
.modecard.leather>*{position:relative}
.modecard.leather h3{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.55)}
.modecard.leather p{color:rgba(255,255,255,.88);text-shadow:0 1px 6px rgba(0,0,0,.5)}
.modecard.leather-groovy{box-shadow:var(--shadow-glass),0 0 38px var(--glow-purple)}
.modecard.leather-groovy:hover{border-color:rgba(167,139,250,.5);
  box-shadow:var(--shadow-glass-hover),0 0 48px var(--glow-purple)}
.modecard.leather-normie{box-shadow:var(--shadow-glass),0 0 38px rgba(148,163,184,.22)}
.modecard.leather-normie:hover{border-color:rgba(148,163,184,.5);
  box-shadow:var(--shadow-glass-hover),0 0 48px rgba(148,163,184,.3)}

footer{border-top:1px solid rgba(71,85,105,.5);padding:40px 34px;margin-top:0;
  color:var(--text-muted,#94A3B8);font-size:13px}
.foot-wrap{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between}
.foot-tag{font-family:var(--f-mono);color:var(--purple)}
.foot-wrap .brand img{width:42px;height:42px}
.foot-id{max-width:360px}
.foot-blurb{margin-top:12px;font-size:13px;line-height:1.6;color:var(--text-muted,#94A3B8)}
.foot-nav{display:flex;gap:48px;flex-wrap:wrap}
.foot-h{font-family:var(--f-ui);font-size:13px;color:var(--text);margin:0 0 8px}
.foot-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.foot-nav a:hover{color:var(--text)}
.foot-bottom{margin-top:26px;border-top:1px solid rgba(71,85,105,.4);padding-top:18px}

@media(max-width:860px){
  nav.links{display:none}
  .foot-wrap{flex-direction:column}
  .steps,.g3,.g2,.g4,.two{grid-template-columns:1fr !important}
}

/* prose blocks — long-form narrative copy (manifesto, walkthrough, guardrails) */
.prose{max-width:72ch}
.prose p{color:var(--text-dim,#CBD5E1);font-size:16px;line-height:1.75;margin-top:14px}
.prose strong{color:var(--text)}

/* manifesto band — one huge handmade-paper sheet, edge to edge of the viewport,
   with the manifesto inked on it (same ink palette as the paper system) */
.manifesto-band{position:relative;width:100%;margin:30px 0;padding:clamp(40px,6vw,90px) 0}
.manifesto-paper{position:absolute;inset:0;z-index:0;
  background:url('/assets/paper/manifesto.webp') center/100% 100% no-repeat;
  filter:drop-shadow(0 20px 26px rgba(0,0,0,.38)) drop-shadow(0 44px 70px rgba(0,0,0,.4))}
.manifesto-inner{position:relative;z-index:1;text-align:center;
  --ink:#211810;--ink-soft:rgba(33,24,16,.9);--stamp-ink:#07564c;
  --txt-glow:0 0 16px rgba(255,250,238,.6),0 0 4px rgba(255,250,238,.45)}
.manifesto-inner .h-lg{max-width:24ch;margin-left:auto;margin-right:auto}
.manifesto-inner .prose{max-width:68ch;margin:0 auto}
.manifesto-inner .eyebrow{color:var(--stamp-ink);text-shadow:var(--txt-glow)}
.manifesto-inner .h-lg{color:var(--ink);text-shadow:var(--txt-glow)}
.manifesto-inner .grad-text{background:linear-gradient(110deg,#07564c,#5b3a8c);
  -webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.manifesto-inner .prose p{color:var(--ink);text-shadow:var(--txt-glow);
  font-size:17px;font-weight:600;letter-spacing:.005em}
.manifesto-inner .prose strong{color:var(--ink);font-weight:700}

/* comparison table — thornberry vs the cloud bots */
.cmpwrap{overflow-x:auto;margin-top:24px}
.cmptable{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px}
.cmptable th,.cmptable td{padding:12px 16px;text-align:left;color:var(--text-dim,#CBD5E1);
  border-bottom:1px solid rgba(71,85,105,.4)}
.cmptable thead th{font-family:var(--f-ui);font-size:13px;letter-spacing:.04em;
  color:var(--text-muted,#94A3B8);border-bottom:1px solid rgba(71,85,105,.6)}
.cmptable td:first-child{color:var(--text-muted,#94A3B8);font-size:13.5px}
.cmptable th:last-child,.cmptable td:last-child{color:var(--text);background:rgba(20,184,166,.06)}
.cmptable thead th:last-child{color:var(--cyan)}

/* security dossier — an open, velvet-bound book pinned mid-viewport. One
   control per page. Scroll turns the right-hand leaf over the spine
   (js/site.js drives rotateY + z-order); read pages pile up on the left.
   Left base = title page, right base = end-of-dossier colophon. */
.bookstage{height:680vh}
.bookpin{position:sticky;top:max(86px,calc(50svh - 330px));width:min(100%,960px);
  margin:30px auto 0;perspective:2400px}
.book{position:relative;aspect-ratio:3/2;transform-style:preserve-3d}
.bookcover{position:absolute;inset:-16px -18px;z-index:0;border-radius:16px;
  background:url('/assets/fabric/cover-velvet.jpg') center/cover;
  box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 60px rgba(167,139,250,.18),inset 0 0 40px rgba(0,0,0,.45)}
/* spine groove down the center of the spread */
.book::after{content:"";position:absolute;left:50%;top:-4px;bottom:-4px;width:18px;z-index:35;
  transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.38) 50%,transparent)}
.pageL,.pageR{position:absolute;top:0;bottom:0;width:50%;z-index:1}
.pageL{left:0}
.pageR{right:0}
/* unread page edges peeking out on the right */
.pageR::after{content:"";position:absolute;right:-7px;top:10px;bottom:10px;width:7px;
  background:repeating-linear-gradient(90deg,#ece6d8 0 1.5px,#c9c2b2 1.5px 3px);
  border-radius:0 4px 4px 0}
.leaf{position:absolute;left:50%;right:0;top:0;bottom:0;
  transform-origin:left center;transform-style:preserve-3d;will-change:transform}
.pageface{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;
  overflow:hidden;border-radius:4px 12px 12px 4px;
  background:url('/assets/fabric/page-white.jpg') center/cover;
  box-shadow:inset 0 0 60px rgba(0,0,0,.12),inset 8px 0 16px rgba(0,0,0,.12),0 2px 10px rgba(0,0,0,.3);
  --ink:#211810;--ink-soft:rgba(33,24,16,.86);--stamp-ink:#07564c;color:var(--ink)}
.pageL .pageface{border-radius:12px 4px 4px 12px;
  box-shadow:inset 0 0 60px rgba(0,0,0,.12),inset -8px 0 16px rgba(0,0,0,.12),0 2px 10px rgba(0,0,0,.3)}
/* leaf backs — what a turned page shows on the left: linen, a big potion
   watermark (one bottle per page, set via --potion), and the mark */
.pageface.back{transform:rotateY(180deg);border-radius:12px 4px 4px 12px;
  background:url('/assets/fabric/page-linen.jpg') center/cover;
  box-shadow:inset 0 0 60px rgba(0,0,0,.12),inset -8px 0 16px rgba(0,0,0,.14);
  display:grid;place-items:center}
.pageface.back::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--potion) center/auto 76% no-repeat;opacity:.28}
.pageface.back .bghost{font-family:var(--f-mono);font-weight:700;font-size:clamp(60px,9vw,110px);
  color:rgba(33,24,16,.10);line-height:1}
.pageface.back .watermark{position:absolute;bottom:18px;left:0;right:0;text-align:center;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(33,24,16,.38)}
/* page content — one entry, centered */
.bpage{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(22px,6%,52px)}
.bpage .pagehead{position:absolute;top:clamp(16px,4.5%,30px);left:clamp(22px,6%,52px);right:clamp(22px,6%,52px);
  display:flex;justify-content:space-between;align-items:center}
.bpage .ptitle{font-family:var(--f-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--stamp-ink)}
.bpage .pno{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--ink-soft)}
.bpage .stamp{align-self:flex-start;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--stamp-ink);border:1.5px solid currentColor;border-radius:5px;
  padding:4px 10px;transform:rotate(-1.6deg)}
.bpage h3{font-size:clamp(21px,2.8vw,30px);color:var(--ink);margin:14px 0 10px;max-width:16ch}
.bpage p{font-family:var(--f-body);font-size:clamp(13.5px,1.6vw,16px);line-height:1.6;color:var(--ink-soft)}
.bpage .bghostno{position:absolute;right:clamp(18px,5%,40px);bottom:clamp(10px,3%,26px);
  font-family:var(--f-mono);font-weight:700;font-size:clamp(44px,6vw,76px);line-height:1;
  color:var(--ink);opacity:.08;pointer-events:none;user-select:none}
/* title page (top leaf, first thing you see) — centered, ruled, bookish */
.btitle{align-items:center;justify-content:center;text-align:center}
.btitle .tp-pub{font-family:var(--f-mono);font-size:10px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--ink-soft)}
.btitle .tp-rule{width:62%;border-top:1px solid rgba(33,24,16,.4);position:relative;margin:18px 0}
.btitle .tp-rule::after{content:"";position:absolute;left:6%;right:6%;top:3px;
  border-top:1px solid rgba(33,24,16,.22)}
.btitle h3{font-size:clamp(28px,3.6vw,44px);max-width:none;margin:4px 0 2px;line-height:1.08}
.btitle .tp-sub{font-style:italic;font-size:clamp(13px,1.5vw,15.5px);color:var(--ink-soft);
  max-width:26ch;margin-top:10px}
.btitle .tp-foot{position:absolute;bottom:clamp(16px,5%,34px);left:0;right:0;text-align:center;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-soft)}
/* inner cover (left base) + colophon (right base) */
.binner{align-items:center;justify-content:center;text-align:center}
.binner span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(33,24,16,.4)}
.bcolo{align-items:center;text-align:center}
.bcolo .fin{font-family:var(--f-mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--stamp-ink)}
.bcolo p{font-family:var(--f-mono);font-size:13px;color:var(--ink-soft);margin-top:12px}
@media(max-width:700px){
  .book{aspect-ratio:3/4}
  .bookpin{top:max(80px,calc(50svh - 62vw))}
  .pageL{display:none}
  .pageR{width:100%}  /* leaves run full-width on mobile — the colophon base must too, or the end of the dossier shows half a page on bare velvet */
  .book::after{display:none}
  .leaf{left:0}
  .bpage h3{font-size:20px;max-width:none}
  .bpage p{font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){
  .bookstage{height:auto}
  .bookpin{position:static;perspective:none}
  .book{aspect-ratio:auto;display:grid;gap:18px}
  .book::after,.bookcover,.pageR::after{display:none}
  .pageL,.pageR,.leaf{position:relative;inset:auto;left:auto;right:auto;width:auto}
  .leaf{transform:none !important}
  .pageface{position:relative;inset:auto;min-height:300px}
  .pageface.back{display:none}
}

/* leather essays (security) — guardrails / paper-first / local on stitched
   leather panels, staggered left·right·left; each hinges in once the first
   time it scrolls into view (js/site.js adds .in). Kin to the leather mode
   cards: panel art comes in via --leather. */
.lpanel{position:relative;overflow:hidden;border-radius:18px;max-width:860px;
  padding:clamp(26px,5vw,48px);border:1px solid rgba(255,255,255,.12);
  background:var(--leather) center/cover no-repeat;
  box-shadow:0 18px 44px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.07)}
.lpanel::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,rgba(2,6,23,.80),rgba(2,6,23,.55) 55%,rgba(2,6,23,.7))}
.lpanel::after{content:"";position:absolute;inset:11px;pointer-events:none;border-radius:12px;
  border:1.5px dashed rgba(255,255,255,.17)}  /* stitching */
.lpanel>*{position:relative;z-index:1}
.lpanel--left{margin-right:auto}
.lpanel--right{margin-left:auto}
.lpanel h2{text-shadow:0 1px 10px rgba(0,0,0,.5)}
.lpanel .prose p{text-shadow:0 1px 6px rgba(0,0,0,.45)}
/* hinge-in entrance — panels start slightly turned on their outer edge */
@media (prefers-reduced-motion:no-preference){
  .lpanel{opacity:0;transform:perspective(1200px) rotateY(-14deg) translateX(-26px);
    transform-origin:left center;
    transition:opacity .7s var(--ez),transform .85s var(--ez)}
  .lpanel--right{transform:perspective(1200px) rotateY(14deg) translateX(26px);
    transform-origin:right center}
  .lpanel.in{opacity:1;transform:none}
}

/* trade journal (product / a trade, start to finish) — a closed leather field
   journal pinned mid-viewport; the first scroll opens the cover, then handmade
   paper pages flip one beat at a time (js/site.js drives the leaves, same as
   the security dossier). Page typography reuses the .bpage ink kit. */
.tjstage{height:640vh}
.tjpin{position:sticky;top:max(86px,calc(50svh - 330px));width:min(100%,560px);
  margin:30px auto 0;perspective:2200px}
.tj{position:relative;aspect-ratio:4/5;transform-style:preserve-3d}
.tjboard{position:absolute;inset:-12px -14px;border-radius:14px;  /* back cover board */
  background:url('/assets/leather/journal-board.jpg') center/cover;
  box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 0 36px rgba(0,0,0,.5)}
.tjleaf{position:absolute;inset:0;transform-origin:left center;
  transform-style:preserve-3d;will-change:transform}
.tjleaf--cover{inset:-8px -10px}  /* the cover overhangs the pages */
.tjface{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;
  overflow:hidden;border-radius:4px 12px 12px 4px;
  background:url('/assets/paper/page-paper.jpg') center/cover;
  --ink:#211810;--ink-soft:rgba(33,24,16,.88);--stamp-ink:#07564c;color:var(--ink);
  box-shadow:inset 0 0 50px rgba(0,0,0,.10),inset 8px 0 14px rgba(0,0,0,.10),0 2px 10px rgba(0,0,0,.3)}
.tjface.back{transform:rotateY(180deg);border-radius:12px 4px 4px 12px;
  box-shadow:inset 0 0 50px rgba(0,0,0,.10),inset -8px 0 14px rgba(0,0,0,.12)}
.tjface.back .tjghost{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--f-mono);font-weight:700;font-size:clamp(56px,8vw,96px);
  color:rgba(33,24,16,.10);line-height:1;pointer-events:none}
.tjface.back .watermark{position:absolute;bottom:16px;left:0;right:0;text-align:center;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(33,24,16,.38)}
/* leather cover — embossed type */
.tjface.cover{background:url('/assets/leather/journal-cover.jpg') center/cover;border-radius:12px;
  box-shadow:inset 0 0 44px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,255,255,.08),0 6px 18px rgba(0,0,0,.4);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:clamp(22px,8%,44px)}
.tjface.cover::after{content:"";position:absolute;inset:14px;border-radius:8px;pointer-events:none;
  border:1.5px solid rgba(20,12,6,.35);box-shadow:0 1px 0 rgba(255,255,255,.06)}  /* debossed frame */
.tjcov-pub{font-family:var(--f-mono);font-size:10px;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(28,16,8,.78);text-shadow:0 1px 1px rgba(255,255,255,.12)}
.tjcov-rule{width:54%;border-top:1px solid rgba(28,16,8,.5);margin:16px 0;
  box-shadow:0 1px 0 rgba(255,255,255,.10)}
.tjface.cover h3{font-size:clamp(24px,4.4vw,34px);line-height:1.12;color:rgba(28,16,8,.88);
  text-shadow:0 1px 1px rgba(255,255,255,.14),0 -1px 2px rgba(0,0,0,.45)}
.tjcov-foot{position:absolute;bottom:clamp(18px,7%,36px);left:0;right:0;text-align:center;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(28,16,8,.66);text-shadow:0 1px 1px rgba(255,255,255,.1)}
/* inside of the cover (its back face) — darker leather, quiet mark */
.tjface.cover-in{transform:rotateY(180deg);border-radius:12px;
  background:url('/assets/leather/journal-cover.jpg') center/cover;
  box-shadow:inset 0 0 70px rgba(0,0,0,.62);display:grid;place-items:center}
.tjface.cover-in span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(243,237,224,.5);text-shadow:0 1px 2px rgba(0,0,0,.6)}
@media(max-width:700px){
  .tjpin{width:min(100%,440px);top:max(80px,calc(50svh - 56vw))}
}
@media (prefers-reduced-motion:reduce){
  .tjstage{height:auto}
  .tjpin{position:static;perspective:none}
  .tj{aspect-ratio:auto;display:grid;gap:18px}
  .tjboard{display:none}
  .tjleaf{position:relative;inset:auto;transform:none !important}
  .tjface{position:relative;inset:auto;min-height:300px}
  .tjface.back,.tjface.cover-in{display:none}
}

/* lifecycle steps (from idea to order) — one brand accent per card, a scroll
   sigil where the counter used to be. Kept simple: top accent line, faint
   corner glow, accent on hover. */
.step.lstep::before{content:none}            /* the scroll replaces the number */
.step.lstep{border-top:2px solid var(--acc,var(--cyan))}
.step.lstep::after{content:"";position:absolute;left:-34px;top:-34px;width:150px;height:150px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb, var(--acc,var(--cyan)) 20%, transparent), transparent 70%)}
.step.lstep .lscroll{display:block;width:56px;height:56px;object-fit:contain;margin-bottom:14px;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}   /* in flow, above the title — never over text */
.step.lstep:hover{border-color:var(--a50);border-top-color:var(--acc,var(--cyan));
  box-shadow:var(--shadow-glass-hover),0 0 30px color-mix(in srgb, var(--acc,var(--cyan)) 22%, transparent)}

/* leather crew cards (product / substance, not a tier list) — same cards,
   leather faces via --leather, kin to the mode cards and essay panels */
.card.leathercard{overflow:hidden;border:1px solid rgba(255,255,255,.14);
  background:var(--leather) center/cover no-repeat}
.card.leathercard::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(150deg,rgba(2,6,23,.74),rgba(2,6,23,.46) 55%,rgba(2,6,23,.64))}
.card.leathercard>*{position:relative}
.card.leathercard h3{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.55)}
.card.leathercard p{color:rgba(255,255,255,.9);text-shadow:0 1px 6px rgba(0,0,0,.5)}
.card.leathercard .tag{color:#fff;border-color:rgba(255,255,255,.4);
  background:rgba(0,0,0,.28);text-shadow:0 1px 4px rgba(0,0,0,.5)}

/* CTA buttons that are real links (multi-page split) — match <button> rendering */
a.btn{display:inline-block;text-align:center;text-decoration:none;box-sizing:border-box}

/* ============ MOBILE PASS (2026-06) — append-only; keep below all base rules ============ */

/* touch devices: neutralize sticky-hover transforms (tap shouldn't leave cards stuck mid-lift) */
@media (hover:none){
  .spread:hover .tcard.l{transform:rotate(-11deg)}
  .spread:hover .tcard.r{transform:rotate(11deg)}
  .spread:hover .charcard .wizard{transform:translateX(-50%)}
  .step:hover,.step.paperstep:hover,.card:hover{transform:none}
  .bookcard:hover .bookface{transform:rotate(var(--tilt,0deg))}
  .extcard:hover .extface{transform:rotate(var(--tilt,0deg))}
  .gcard:hover{transform:none}
  .gcard:hover img{transform:none}
  .btn-primary:hover{transform:none}
}

/* hero tarot spread: breathing room in the 520–700px band (sizing only — design untouched) */
@media(max-width:700px) and (min-width:521px){
  .hero-art{padding:6px 16px 44px}
  .spread{transform:scale(.8);transform-origin:top center}
}
@media(max-width:520px){
  .hero-art{padding:4px 16px 32px;min-height:0}
}

/* mobile hamburger nav (≤860 — pairs with the nav.links{display:none} rule above) */
.navtoggle{display:none}
@media(max-width:860px){
  .navtoggle{display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;flex:0 0 auto;
    background:transparent;border:1px solid var(--bd);border-radius:10px;cursor:pointer}
  .navtoggle-bars{position:relative;display:block;width:20px;height:2px;border-radius:2px;
    background:var(--text);transition:background .2s var(--ez)}
  .navtoggle-bars::before,.navtoggle-bars::after{content:"";position:absolute;left:0;width:20px;height:2px;
    border-radius:2px;background:var(--text);transition:transform .2s var(--ez)}
  .navtoggle-bars::before{top:-6px}
  .navtoggle-bars::after{top:6px}
  .navtoggle[aria-expanded="true"] .navtoggle-bars{background:transparent}
  .navtoggle[aria-expanded="true"] .navtoggle-bars::before{transform:translateY(6px) rotate(45deg)}
  .navtoggle[aria-expanded="true"] .navtoggle-bars::after{transform:translateY(-6px) rotate(-45deg)}
  /* dropdown panel — same surface recipe as the modal */
  nav.links.open{display:flex;flex-direction:column;gap:4px;
    position:absolute;top:calc(100% + 6px);right:14px;left:14px;z-index:55;
    padding:12px;border-radius:16px;
    background:
      linear-gradient(180deg,rgba(2,6,23,.95),rgba(2,6,23,.84) 55%,rgba(2,6,23,.92)),
      var(--wood,linear-gradient(180deg,var(--secondary),var(--deep))) center/cover no-repeat;
    border:1px solid var(--a50);
    box-shadow:var(--shadow-glass-hover),0 24px 60px rgba(0,0,0,.55)}
  nav.links.open a{display:flex;align-items:center;min-height:44px;
    padding:12px 14px;border-radius:10px;font-size:15px}
}

/* leather essays: the hinge-in start state (rotateY + translateX) projects past the
   viewport on mid-size screens — clip it at the section so it never causes h-scroll */
section:has(> .lpanel){overflow-x:clip}

/* compact phones (≤480px): spacing, typography, tap comfort */
@media(max-width:480px){
  section{padding:44px 18px}
  header.nav{padding:12px 16px;gap:10px}
  header.nav .btn-primary{white-space:nowrap;padding:9px 12px;font-size:13px}
  .brand img{width:40px;height:40px}
  .wordmark{font-size:17px}
  footer{padding:36px 18px 24px}
  .step,.card{padding:20px 18px}
  .step h3,.card h3{font-size:18px}
  .modal{padding:30px 22px 24px}
  .modal h3{font-size:21px}
  .modal p{font-size:15px}
  .modal img{width:84px;height:84px}
}