/* ============================================================
   CATJAK / THE TENTH LIFE
   Professional cartoon / comic-archive system
   ============================================================ */

:root{
  /* ink + paper */
  --ink:#17130f;
  --ink-2:#221b15;
  --ink-3:#2c241c;
  --paper:#f6efe1;
  --paper-2:#ffe6b8;
  --paper-3:#ffd28c;

  /* character palette, pulled from the artwork */
  --green:#5ce35c;
  --green-hi:#8dff89;
  --green-dark:#1c6b34;
  --green-soft:#c2f0a8;
  --sky:#8fc2e8;
  --tan:#e6c199;
  --red:#e2523f;
  --sun:#ffc44a;

  --muted:#7d7263;
  --line:rgba(23,19,15,.18);
  --edge:rgba(246,239,225,.16);
  --edge-2:rgba(246,239,225,.28);

  --shell:min(1240px,calc(100vw - 40px));
  --display:'Fraunces',Georgia,serif;
  --sans:'Fredoka',system-ui,sans-serif;
  --mono:'DM Mono',ui-monospace,monospace;

  --stroke:3px;
  --r:22px;
  --r-sm:14px;
  --pop:7px 7px 0 var(--ink);
  --pop-lg:11px 11px 0 var(--ink);
  --pop-green:7px 7px 0 var(--green-dark);

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
  --boing:cubic-bezier(.34,1.56,.64,1);

  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
  --halftone-dark:radial-gradient(circle at center,rgba(23,19,15,.2) 1.7px,transparent 1.9px);
  --halftone-light:radial-gradient(circle at center,rgba(246,239,225,.16) 1.7px,transparent 1.9px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:400;letter-spacing:0;
  font-variation-settings:'wdth' 100;
  overflow-x:clip;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img{display:block;max-width:100%}
picture{display:contents}
.shell{width:var(--shell);margin-inline:auto}
::selection{background:var(--green);color:var(--ink)}

h1,h2,h3,.display-face{
  font-family:var(--display);
  font-variation-settings:'SOFT' 70,'WONK' 1,'opsz' 120;
}

.skip-link{position:fixed;z-index:200;left:12px;top:-60px;background:var(--green);color:var(--ink);padding:11px 18px;border:var(--stroke) solid var(--ink);border-radius:99px;font:600 11px/1 var(--sans);letter-spacing:.08em;transition:top .2s}
.skip-link:focus{top:12px}
:focus-visible{outline:3px solid var(--green);outline-offset:3px}

/* ---------- Texture + cursor ----------------------------- */
.grain{position:fixed;inset:-10%;z-index:200;pointer-events:none;background-image:var(--grain);opacity:.3;mix-blend-mode:overlay}
.cursor{position:fixed;z-index:210;left:0;top:0;pointer-events:none;display:none}
html.has-cursor .cursor{display:block}
html.has-cursor,html.has-cursor a,html.has-cursor button{cursor:none}
.cursor i{position:absolute;display:block;border-radius:50%;transform:translate(-50%,-50%)}
.cursor-ring{width:32px;height:32px;border:2px solid var(--green);transition:width .3s var(--boing),height .3s var(--boing),background .3s,opacity .2s;opacity:.9}
.cursor-dot{width:6px;height:6px;background:var(--green)}
html.cursor-hot .cursor-ring{width:60px;height:60px;background:rgba(92,227,92,.16)}

/* ---------- Intro ---------------------------------------- */
.intro{display:none}
html.js:not(.rm) .intro{
  position:fixed;z-index:300;inset:0;display:grid;place-items:center;
  background:var(--ink);color:var(--paper);
  clip-path:inset(0 0 0 0);transition:clip-path .9s var(--ease-io);
}
html.js:not(.rm) .intro:before{content:"";position:absolute;inset:0;background-image:var(--halftone-light);background-size:14px 14px;opacity:.7}
.intro-inner{position:relative;display:grid;justify-items:center;gap:16px}
.intro-ten{
  font-family:var(--display);font-variation-settings:'SOFT' 90,'WONK' 1,'opsz' 144;
  font-weight:900;font-size:clamp(130px,24vw,260px);line-height:.8;letter-spacing:-.05em;
  color:var(--green);-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;
  animation:introTen 1s var(--boing) both;
}
.intro-word{font:600 10px/1 var(--sans);letter-spacing:.36em;opacity:0;animation:introWord .7s var(--ease) .24s both}
.intro-bar{display:block;width:150px;height:8px;background:rgba(246,239,225,.14);border:2px solid rgba(246,239,225,.3);border-radius:99px;overflow:hidden}
.intro-bar i{display:block;height:100%;width:0;background:var(--green);animation:introBar 1s var(--ease-io) .08s both}
.intro.done{clip-path:inset(0 0 100% 0);pointer-events:none}
@keyframes introTen{from{opacity:0;transform:translateY(40px) scale(.7) rotate(-8deg)}to{opacity:1;transform:none}}
@keyframes introWord{to{opacity:.75}}
@keyframes introBar{to{width:100%}}

/* ---------- Progress ------------------------------------- */
.page-progress{position:fixed;z-index:100;left:0;right:0;top:0;height:4px;background:rgba(23,19,15,.16)}
.page-progress span{display:block;height:100%;width:0;background:var(--green);box-shadow:0 0 12px rgba(92,227,92,.7);border-right:2px solid var(--ink)}

/* ---------- Nav ------------------------------------------ */
.nav-shell{
  position:fixed;z-index:50;top:14px;left:50%;transform:translateX(-50%);
  width:min(1320px,calc(100vw - 24px));height:68px;padding:0 10px 0 12px;
  display:grid;grid-template-columns:auto auto 1fr auto auto;align-items:center;gap:14px;
  border:var(--stroke) solid var(--ink);border-radius:99px;
  background:var(--paper);color:var(--ink);
  box-shadow:0 6px 0 var(--ink);
  transition:height .35s var(--ease),top .35s var(--ease),box-shadow .35s var(--ease),background .35s;
}
.nav-shell.compact{height:58px;top:8px;box-shadow:0 4px 0 var(--ink)}
.brand{display:flex;align-items:center;gap:11px}
.brand-mark{position:relative;width:48px;height:48px;flex:none;transition:transform .45s var(--boing)}
.brand-face{
  display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;
  border:var(--stroke) solid var(--ink);background:var(--green-soft);
}
.brand-face img{width:100%;height:100%;object-fit:cover;object-position:50% 34%;transform:scale(1.08)}
.brand-mark i{
  position:absolute;right:-5px;bottom:-4px;display:grid;place-items:center;
  width:23px;height:23px;border-radius:50%;background:var(--green);color:var(--ink);
  border:2.5px solid var(--ink);font:600 10px/1 var(--sans);font-style:normal;
}
.brand:hover .brand-mark{transform:rotate(-9deg) scale(1.07)}
.brand b,.brand small{display:block}
.brand-text b{font:600 13px/1 var(--sans);letter-spacing:.02em}
.brand-text small{margin-top:4px;font:400 7px/1 var(--mono);letter-spacing:.14em;opacity:.6}
.network-pill{
  font:700 9px/1 var(--sans);letter-spacing:.1em;display:flex;align-items:center;gap:8px;
  padding:9px 13px;border:2px solid var(--ink);border-radius:99px;background:var(--green-soft);
}
.network-pill i{width:8px;height:8px;border-radius:50%;background:var(--green-dark);animation:blink 2.2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.desktop-nav{position:relative;justify-self:end;display:flex;align-items:center;gap:2px}
.desktop-nav a{position:relative;z-index:2;padding:11px 15px;border-radius:99px;font:600 11px/1 var(--sans);letter-spacing:.03em;opacity:.7;transition:opacity .25s,color .25s,transform .3s var(--boing)}
.desktop-nav a:hover{opacity:1;transform:translateY(-2px)}
.desktop-nav a.current{opacity:1}
.nav-glide{position:absolute;z-index:1;left:0;top:50%;height:36px;width:0;transform:translateY(-50%);background:var(--green);border:2px solid var(--ink);border-radius:99px;opacity:0;transition:transform .42s var(--boing),width .42s var(--boing),opacity .3s}
.desktop-nav:hover .nav-glide,.nav-glide.pinned{opacity:1}
.menu-button{display:none;width:46px;height:46px;background:var(--green);border:var(--stroke) solid var(--ink);border-radius:50%;cursor:pointer}
.menu-button span{display:block;width:18px;height:2.5px;border-radius:2px;background:var(--ink);margin:4px auto;transition:transform .3s var(--boing)}
.menu-button:hover span:first-child{transform:translateX(-3px)}
.menu-button:hover span:last-child{transform:translateX(3px)}

.mobile-menu{
  position:fixed;z-index:80;inset:0;background:var(--ink);color:var(--paper);
  padding:84px 22px 26px;display:flex;flex-direction:column;justify-content:center;
  clip-path:inset(0 0 100% 0);transition:clip-path .55s var(--ease-io);overflow-y:auto;
}
.mobile-menu:before{content:"";position:absolute;inset:0;background-image:var(--halftone-light);background-size:16px 16px;pointer-events:none;opacity:.6}
.mobile-menu.open{clip-path:inset(0 0 0 0)}
.menu-close{position:absolute;right:16px;top:16px;width:50px;height:50px;border:var(--stroke) solid var(--paper);border-radius:50%;background:transparent;display:grid;place-items:center;cursor:pointer}
.menu-close span{position:absolute;width:18px;height:2.5px;border-radius:2px;background:var(--paper)}
.menu-close span:first-child{transform:rotate(45deg)}
.menu-close span:last-child{transform:rotate(-45deg)}
.menu-eyebrow{position:relative;margin:0 0 12px;font:700 9px/1 var(--sans);letter-spacing:.24em;opacity:.5}
.mobile-menu a{
  position:relative;display:flex;align-items:baseline;gap:14px;
  font-family:var(--display);font-variation-settings:'SOFT' 70,'WONK' 1;font-weight:800;
  font-size:clamp(28px,7.6vw,52px);line-height:1.08;letter-spacing:-.03em;padding:14px 0;
  border-bottom:2px solid var(--edge);
  opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .5s var(--boing),color .25s;
}
.mobile-menu.open a{opacity:1;transform:none}
.mobile-menu.open a:nth-child(3){transition-delay:.06s}
.mobile-menu.open a:nth-child(4){transition-delay:.11s}
.mobile-menu.open a:nth-child(5){transition-delay:.16s}
.mobile-menu.open a:nth-child(6){transition-delay:.21s}
.mobile-menu.open a:nth-child(7){transition-delay:.26s}
.mobile-menu a b{font:600 12px/1 var(--sans);color:var(--green);flex:none}
.mobile-menu a:active{color:var(--green)}
.menu-foot{position:relative;display:flex;justify-content:space-between;gap:14px;margin-top:26px;font:400 8px/1 var(--mono);letter-spacing:.14em;opacity:.45}

/* ---------- Reveal system -------------------------------- */
html.js .reveal{opacity:0;transform:translateY(30px) scale(.985);transition:opacity .7s var(--ease),transform .8s var(--boing)}
html.js .reveal.visible{opacity:1;transform:none}
.delay-1{transition-delay:.08s}
.delay-2{transition-delay:.16s}
.delay-3{transition-delay:.24s}
.delay-4{transition-delay:.32s}

html.js .line{display:block;overflow:hidden;padding-bottom:.08em;white-space:nowrap}
html.js .char{display:inline-block;transform:translateY(108%) rotate(6deg);opacity:0;transition:transform .85s var(--boing),opacity .45s ease;transition-delay:calc(var(--i) * 30ms + var(--ld,0ms))}
html.js .char.in{transform:none;opacity:1}
html.js [data-words] .word{display:inline-block;opacity:.18;transition:opacity .55s var(--ease);transition-delay:calc(var(--i) * 24ms)}
html.js [data-words].lit .word{opacity:1}

/* ---------- Shared cartoon pieces ------------------------ */
.sticker{
  position:absolute;z-index:12;display:grid;place-items:center;gap:1px;
  width:92px;height:92px;border-radius:50%;
  background:var(--sun);color:var(--ink);border:var(--stroke) solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
  transform:rotate(-11deg);animation:stickerWobble 4.5s ease-in-out infinite;
}
.sticker b{font-family:var(--display);font-variation-settings:'SOFT' 90,'WONK' 1;font-weight:900;font-size:30px;line-height:.9}
.sticker i{font:600 8px/1 var(--sans);letter-spacing:.14em;font-style:normal}
@keyframes stickerWobble{0%,100%{transform:rotate(-11deg)}50%{transform:rotate(-4deg) scale(1.04)}}
.sticker-hero{right:-26px;bottom:58px;transform:rotate(9deg)}
@keyframes stickerWobbleR{0%,100%{transform:rotate(9deg)}50%{transform:rotate(3deg) scale(1.05)}}
.sticker-hero{animation-name:stickerWobbleR}
.sticker-gallery{left:-24px;top:34%;background:var(--red);color:#fff;width:84px;height:84px}
.sticker-gallery b{font-size:24px}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;min-height:100svh;background:var(--ink);color:var(--paper);
  padding:138px 0 34px;overflow:hidden;display:flex;flex-direction:column;justify-content:center;
}
.hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:130px;pointer-events:none;background:linear-gradient(transparent,rgba(0,0,0,.45))}
.hero-atmos{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sunburst{
  position:absolute;right:-16vw;top:50%;width:105vw;height:105vw;transform:translateY(-50%);
  background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(92,227,92,.075) 0deg 5deg,transparent 5deg 10deg);
  mask-image:radial-gradient(circle at center,#000 8%,transparent 62%);
  -webkit-mask-image:radial-gradient(circle at center,#000 8%,transparent 62%);
  animation:spin 90s linear infinite;
}
@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}
.hero-dots{
  position:absolute;inset:0;
  background-image:var(--halftone-light);background-size:16px 16px;
  mask-image:radial-gradient(ellipse 120% 100% at 30% 70%,#000 30%,transparent 88%);
  -webkit-mask-image:radial-gradient(ellipse 120% 100% at 30% 70%,#000 30%,transparent 88%);
  opacity:1;
}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55}
.orb-a{width:44vw;height:44vw;right:-4vw;top:-10vw;background:radial-gradient(circle,rgba(92,227,92,.3),transparent 66%);animation:drift 22s ease-in-out infinite alternate}
.orb-b{width:36vw;height:36vw;left:-10vw;bottom:-12vw;background:radial-gradient(circle,rgba(143,194,232,.18),transparent 68%);animation:drift 27s ease-in-out infinite alternate-reverse}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(4vw,3vw,0) scale(1.12)}}
.hero-scan{position:absolute;left:0;right:0;height:32vh;top:-32vh;background:linear-gradient(transparent,rgba(92,227,92,.05),transparent);animation:heroScan 9s linear infinite}
@keyframes heroScan{to{top:100%}}

.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,.96fr);gap:clamp(30px,4.6vw,72px);align-items:center}
.hero-overline{
  display:inline-flex;align-items:center;gap:12px;
  font:600 10px/1 var(--sans);letter-spacing:.16em;color:var(--ink);
  background:var(--green);border:2.5px solid var(--ink);border-radius:99px;padding:9px 15px;
  box-shadow:3px 3px 0 var(--ink);
}
.hero-overline i{width:7px;height:7px;background:var(--ink);border-radius:50%;flex:none}
.hero-title{
  font-weight:900;font-size:clamp(58px,8.4vw,134px);line-height:.86;letter-spacing:-.045em;
  font-variation-settings:'SOFT' 90,'WONK' 1,'opsz' 144;
  margin:26px 0 18px;
}
.hero-title .line{display:block}
.hero-title .line:nth-child(2){margin-left:3.2vw}
.hero-title .life-word{
  color:var(--green);
  text-shadow:5px 5px 0 rgba(28,107,52,.55),0 0 70px rgba(92,227,92,.35);
}
.hero-lead,.hero-thesis{max-width:46ch;font-size:16.5px;line-height:1.68;color:rgba(246,239,225,.88);margin:0 0 12px;font-weight:400}
.hero-thesis strong{color:var(--green);font-weight:600}
.hero-actions{display:flex;gap:18px;align-items:center;margin-top:30px;flex-wrap:wrap}

.solid-button{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-height:58px;padding:0 30px;border-radius:99px;overflow:hidden;isolation:isolate;
  background:var(--green);color:var(--ink);border:var(--stroke) solid var(--ink);
  font:600 15px/1 var(--sans);letter-spacing:.01em;
  box-shadow:5px 5px 0 var(--ink);
  transition:transform .2s var(--boing),box-shadow .2s var(--ease);
}
/* On the ink hero the ink outline vanishes, so switch to paper. */
.hero .solid-button{border-color:var(--paper);box-shadow:5px 5px 0 var(--paper)}
.hero .solid-button:hover{box-shadow:8px 8px 0 var(--paper)}
.hero .solid-button:active{box-shadow:1px 1px 0 var(--paper)}
.solid-button span{position:relative;z-index:2}
.solid-button:before{content:"";position:absolute;inset:0;z-index:1;background:var(--sun);transform:translateY(101%);transition:transform .4s var(--ease-io)}
.solid-button:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.solid-button:hover:before{transform:none}
.solid-button:active{transform:translate(4px,4px);box-shadow:1px 1px 0 var(--ink)}
.text-button{
  position:relative;display:inline-flex;align-items:center;gap:7px;
  font:600 15px/1 var(--sans);letter-spacing:.01em;padding:10px 2px;color:var(--paper);
}
.text-button:after{content:"";position:absolute;left:0;bottom:2px;width:100%;height:3px;border-radius:3px;background:var(--green);transform-origin:left;transition:transform .4s var(--boing)}
.text-button:hover:after{transform:scaleX(.4)}
.text-button span{display:inline-block;transition:transform .35s var(--boing)}
.text-button:hover span{transform:translate(5px,5px)}

.hero-mantra{display:flex;gap:9px;flex-wrap:wrap;margin-top:32px}
.hero-mantra span{
  border:2.5px solid var(--paper);border-radius:99px;padding:11px 17px;
  font:600 12px/1 var(--sans);letter-spacing:.05em;color:var(--paper);
  background:var(--ink-3);box-shadow:3px 3px 0 var(--paper);
  transition:background .25s,color .25s,transform .3s var(--boing),box-shadow .25s;
}
.hero-mantra span:nth-child(1){rotate:-1.5deg}
.hero-mantra span:nth-child(2){rotate:1deg}
.hero-mantra span:nth-child(3){rotate:-.8deg}
.hero-mantra span:nth-child(1):hover{background:var(--green)}
.hero-mantra span:nth-child(2):hover{background:var(--sun)}
.hero-mantra span:nth-child(3):hover{background:var(--sky)}
.hero-mantra span:hover{color:var(--ink);transform:translateY(-4px);box-shadow:5px 5px 0 var(--paper)}

/* hero display -------------------------------------------- */
.hero-display{
  position:relative;rotate:-1.4deg;border:var(--stroke) solid var(--ink);border-radius:var(--r);padding:12px;
  background:var(--paper-2);box-shadow:var(--pop-lg);
  transform-style:preserve-3d;transition:transform .5s var(--ease);
}
.bracket{position:absolute;width:14px;height:14px;border:3px solid var(--ink);border-radius:3px;opacity:.5}
.bracket.tl{left:8px;top:8px;border-right:0;border-bottom:0}
.bracket.tr{right:8px;top:8px;border-left:0;border-bottom:0}
.bracket.bl{left:8px;bottom:8px;border-right:0;border-top:0}
.bracket.br{right:8px;bottom:8px;border-left:0;border-top:0}
.display-label{display:flex;justify-content:space-between;gap:15px;font:700 8px/1 var(--mono);letter-spacing:.13em;color:rgba(23,19,15,.6);padding:5px 10px 11px}
.display-label.bottom{padding:11px 10px 3px}
.live-dot{display:flex;align-items:center;gap:6px}
.live-dot:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green-dark);animation:blink 1.8s ease-in-out infinite}
.display-window{
  position:relative;aspect-ratio:4/4.5;overflow:hidden;isolation:isolate;
  border:2.5px solid var(--ink);border-radius:var(--r-sm);
  background:linear-gradient(180deg,#3a4a37 0%,#22301f 55%,#141a12 100%);
}
.display-window:before{content:"";position:absolute;inset:0;z-index:1;background-image:var(--halftone-light);background-size:13px 13px;opacity:.5}
.display-window:after{content:"";position:absolute;inset:auto 0 0;height:38%;background:linear-gradient(transparent,rgba(0,0,0,.5));z-index:3}
.display-window img{
  position:absolute;z-index:4;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 46%;
  filter:drop-shadow(0 22px 30px rgba(0,0,0,.55));
}
.display-ten{
  position:absolute;z-index:2;left:-4%;top:-8%;
  font-family:var(--display);font-variation-settings:'SOFT' 90,'WONK' 1,'opsz' 144;font-weight:900;
  font-size:min(34vw,500px);line-height:1;letter-spacing:-.07em;
  color:rgba(92,227,92,.14);animation:tenBreathe 12s ease-in-out infinite;
}
@keyframes tenBreathe{0%,100%{opacity:1;transform:translateY(0)}50%{opacity:.6;transform:translateY(-10px)}}
.display-halo{position:absolute;z-index:2;left:50%;bottom:-10%;width:66%;height:52%;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(92,227,92,.26),transparent 68%);filter:blur(24px)}
.scanline{position:absolute;z-index:5;inset:0;background:repeating-linear-gradient(180deg,transparent 0 4px,rgba(0,0,0,.12) 4px 5px);pointer-events:none;opacity:.55}
.sweep{position:absolute;z-index:6;left:0;right:0;height:24%;top:-24%;background:linear-gradient(transparent,rgba(92,227,92,.1),transparent);animation:heroScan 6.5s linear infinite;pointer-events:none}

/* ledger --------------------------------------------------- */
.hero-ledger{
  position:relative;z-index:2;margin-top:clamp(28px,4vw,52px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}
.hero-ledger div{
  display:grid;grid-template-columns:auto 1fr;align-items:center;gap:16px;
  padding:18px 20px;border:2.5px solid var(--paper);border-radius:var(--r);
  background:var(--ink-3);box-shadow:4px 4px 0 var(--paper);
  transition:background .3s,transform .35s var(--boing),box-shadow .25s;
}
.hero-ledger div:nth-child(1){rotate:-.8deg}
.hero-ledger div:nth-child(2){rotate:.6deg}
.hero-ledger div:nth-child(3){rotate:-.5deg}
.hero-ledger div:hover{transform:translateY(-5px);box-shadow:7px 7px 0 var(--paper)}
.hero-ledger b{
  width:60px;height:60px;flex:none;display:grid;place-items:center;border-radius:50%;
  border:2.5px solid var(--ink);background:var(--green);color:var(--ink);
  font-family:var(--display);font-variation-settings:'SOFT' 90,'WONK' 1;font-weight:900;
  font-size:30px;line-height:1;font-variant-numeric:tabular-nums;
}
.hero-ledger div:nth-child(2) b{background:var(--sun)}
.hero-ledger div:nth-child(3) b{background:var(--sky)}
.hero-ledger span{font:500 13.5px/1.35 var(--sans);color:rgba(246,239,225,.86)}


/* ---------- Ticker --------------------------------------- */
.ticker{overflow:hidden;padding:15px 0;white-space:nowrap;border-block:var(--stroke) solid var(--ink)}
.ticker-green{background:var(--green);color:var(--ink)}
.ticker-ink{background:var(--ink);color:var(--paper)}
.ticker-track{display:flex;width:max-content;animation:marquee var(--dur,34s) linear infinite;will-change:transform}
.ticker-track.reverse{animation-direction:reverse}
.ticker-set{display:flex;align-items:center;flex:none}
.ticker span{font:700 15px/1 var(--sans);letter-spacing:.14em;flex:none;padding-right:28px}
.ticker-ink span:nth-child(even){color:var(--green)}
.ticker-green span:nth-child(even){opacity:.45}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--shift,50%)))}}
.ticker:hover .ticker-track{animation-play-state:paused}

/* ============================================================
   STORY
   ============================================================ */
.story{position:relative;padding:clamp(78px,9vw,118px) 0;background:var(--paper-2);overflow:hidden}
.story:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--halftone-dark);background-size:18px 18px;opacity:.28}
.story-head,.archive-wall,.lesson{position:relative}

.eyebrow{
  margin:0 0 26px;display:inline-flex;align-items:center;gap:9px;
  font:600 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  border:2.5px solid currentColor;border-radius:99px;padding:8px 14px;
}
.eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.eyebrow.light{color:var(--green)}

h2{margin:0}
.story-title-row h2,.lives-intro h2,.map-head h2,.principle-copy h2,.run-head h2,.finale-copy h2{
  font-weight:900;font-size:clamp(46px,6.2vw,96px);line-height:.94;letter-spacing:-.04em;
  font-variation-settings:'SOFT' 80,'WONK' 1,'opsz' 144;
}
.story-title-row{display:grid;grid-template-columns:1.22fr .78fr;gap:46px;align-items:end}
.story-title-row h2 em,.principle-copy h2 em{color:var(--green-dark);font-style:italic}
.story-title-row p{font-size:16px;line-height:1.68;margin:0;font-weight:400;color:#4a4437;max-width:44ch}

.archive-wall{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;margin-top:clamp(36px,4.6vw,56px);align-items:stretch}
.frame-wide{grid-column:1/8}
.frame-copy{grid-column:8/13}
.frame-square{grid-column:1/7}
.archive-note{grid-column:7/13}

.archive-frame{
  position:relative;border:var(--stroke) solid var(--ink);border-radius:var(--r);
  background:var(--paper);padding:10px;box-shadow:var(--pop);
  transition:transform .4s var(--boing),box-shadow .4s var(--ease);
  transform-style:preserve-3d;
}
.archive-frame:hover{box-shadow:var(--pop-lg)}
.frame-wide{display:flex;flex-direction:column}
.frame-bar{
  height:36px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex:none;
  font:700 8px/1 var(--mono);letter-spacing:.12em;padding:0 8px 10px;color:rgba(23,19,15,.6);
}
.frame-image{
  overflow:hidden;position:relative;flex:1;
  border:2.5px solid var(--ink);border-radius:var(--r-sm);background:var(--tan);
}
.frame-image:after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.45) 48%,transparent 58%);
  transform:translateX(-120%);transition:transform .9s var(--ease-io);
}
.archive-frame:hover .frame-image:after{transform:translateX(120%)}
.frame-image img{transition:transform .7s var(--boing)}
.archive-frame:hover .frame-image img{transform:scale(1.04)}
.crowd-frame{aspect-ratio:1517/1037}
.crowd-frame img{width:100%;height:100%;object-fit:cover;object-position:center}
.frame-caption{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:14px 8px 4px;flex:none}
.frame-caption b{font-family:var(--display);font-variation-settings:'SOFT' 70,'WONK' 1;font-weight:800;font-size:19px;line-height:1.15}
.frame-caption span{font:700 8px/1 var(--mono);letter-spacing:.1em;color:var(--muted)}

.frame-copy{background:var(--ink);color:var(--paper);display:flex;flex-direction:column;box-shadow:var(--pop-green)}
.frame-copy:hover{box-shadow:var(--pop-green);transform:none}
.frame-copy .frame-bar{color:rgba(246,239,225,.6);border-bottom:2px solid var(--edge)}
.copy-panel{padding:clamp(22px,2.6vw,32px) 18px;flex:1;display:flex;flex-direction:column;justify-content:center}
.copy-panel p{
  font-family:var(--display);font-variation-settings:'SOFT' 70,'WONK' 1;font-weight:600;
  font-size:clamp(20px,2.2vw,30px);line-height:1.24;margin:0 0 22px;
}
.copy-panel p:last-child{margin-bottom:0}
.copy-panel .green-line{color:var(--green);font-weight:600}

.frame-square{display:flex;flex-direction:column}
.throne-frame{aspect-ratio:1334/1179;background:#151a12;flex:none}
.throne-frame img{width:100%;height:100%;object-fit:cover}

.archive-note{
  rotate:.7deg;display:flex;flex-direction:column;border:var(--stroke) dashed var(--ink);border-radius:var(--r);
  padding:22px 20px 18px;background:rgba(255,255,255,.32);position:relative;overflow:hidden;
}
.note-tag{font:700 9px/1 var(--sans);letter-spacing:.18em;color:var(--muted)}
.archive-note p{
  margin:auto 0;padding:24px 0;
  font-family:var(--display);font-variation-settings:'SOFT' 90,'WONK' 1,'opsz' 144;font-weight:800;
  font-size:clamp(28px,3.6vw,52px);line-height:1.02;letter-spacing:-.035em;
}
.archive-note p em{color:var(--green-dark);font-style:italic}
.note-rows{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;border-top:2.5px solid var(--ink);padding-top:14px}
.note-rows div{display:grid;gap:6px}
.note-rows b{font:400 7px/1 var(--mono);letter-spacing:.15em;color:var(--muted)}
.note-rows span{font:600 12px/1 var(--sans);letter-spacing:.02em}
.note-strip{display:flex;gap:5px;margin-top:16px}
.note-strip i{flex:1;height:8px;border-radius:99px;border:2px solid var(--ink);background:transparent}
.note-strip i:nth-child(-n+9){background:var(--red)}
.note-strip i:last-child{background:var(--green)}

.lesson{display:grid;grid-template-columns:150px 1fr;gap:26px;align-items:start;margin-top:clamp(50px,6vw,78px)}
.lesson>span{font:600 10px/1 var(--sans);letter-spacing:.16em;padding:14px 0 0}
.bubble{
  position:relative;margin:0;background:var(--paper);border:var(--stroke) solid var(--ink);
  border-radius:32px;padding:clamp(26px,3.4vw,42px);box-shadow:var(--pop-lg);
  font-family:var(--display);font-variation-settings:'SOFT' 80,'WONK' 1,'opsz' 144;font-weight:800;
  font-size:clamp(28px,4.2vw,60px);line-height:1.06;letter-spacing:-.035em;
}
.bubble em{color:var(--green-dark);font-style:italic}
.bubble:before,.bubble:after{content:"";position:absolute;left:56px;width:0;height:0;border-style:solid}
.bubble:before{bottom:calc(-1 * (26px + var(--stroke)));border-width:26px 22px 0 0;border-color:var(--ink) transparent transparent transparent}
.bubble:after{bottom:-21px;border-width:21px 17px 0 0;border-color:var(--paper) transparent transparent transparent}

/* ============================================================
   NINE LIVES
   ============================================================ */
.lives{position:relative;background:var(--ink);color:var(--paper);padding:clamp(80px,9vw,116px) 0 clamp(80px,9vw,120px)}
.lives:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 50% at 18% 0%,rgba(92,227,92,.1),transparent 70%)}
.lives-intro{position:relative;display:grid;grid-template-columns:1fr minmax(230px,.42fr);gap:clamp(24px,3vw,44px);align-items:end}
.lives-note{
  display:grid;gap:12px;padding:22px 22px 20px;align-self:end;
  border:2.5px solid var(--green);border-radius:var(--r);background:var(--ink-2);box-shadow:5px 5px 0 var(--green-dark);
}
.lives-note b{
  font-family:var(--display);font-variation-settings:'SOFT' 90,'WONK' 1;font-weight:900;
  font-size:54px;line-height:.8;color:var(--green);
}
.lives-note p{margin:0;font-size:15.5px;line-height:1.6;color:rgba(246,239,225,.84);font-weight:400}
.lives-note span{font:600 8px/1 var(--sans);letter-spacing:.2em;color:rgba(246,239,225,.4)}

.cycle-rail{position:relative;display:grid;grid-template-columns:320px 1fr;gap:22px;margin-top:clamp(40px,5vw,60px)}
.cycle-monitor{
  position:sticky;top:98px;align-self:start;
  border:var(--stroke) solid var(--paper);border-radius:var(--r);padding:26px 24px;
  display:flex;flex-direction:column;background:var(--ink-3);box-shadow:6px 6px 0 var(--green-dark);
}
.monitor-label{font:700 9px/1 var(--sans);letter-spacing:.16em;color:rgba(246,239,225,.5)}
.cycle-monitor strong{
  font-family:var(--display);font-variation-settings:'SOFT' 90,'WONK' 1,'opsz' 144;font-weight:900;
  font-size:clamp(110px,12vw,168px);line-height:.8;letter-spacing:-.06em;color:var(--green);
  margin-top:26px;font-variant-numeric:tabular-nums;
  transition:opacity .18s,transform .18s;
}
.cycle-monitor strong.flip{opacity:0;transform:translateY(-14px) rotate(-6deg)}
.cycle-monitor>b{font:700 clamp(24px,2.4vw,32px)/1 var(--sans);letter-spacing:-.01em;margin-top:16px;transition:opacity .18s}
.cycle-monitor>b.flip{opacity:0}
.monitor-life{display:flex;gap:6px;margin-top:22px}
.monitor-life i{
  width:16px;height:16px;border-radius:50%;border:2.5px solid rgba(246,239,225,.35);background:transparent;
  transition:background .35s var(--boing),border-color .35s,transform .35s var(--boing);
}
.monitor-life i.burned{background:var(--red);border-color:var(--paper);transform:scale(1.12)}
.monitor-life i.learned{background:var(--green);border-color:var(--paper);transform:scale(1.12)}
.monitor-meter{margin-top:20px;height:10px;border:2.5px solid rgba(246,239,225,.35);border-radius:99px;overflow:hidden}
.monitor-meter i{display:block;height:100%;width:11%;background:var(--green);transition:width .5s var(--boing)}
.cycle-monitor small{margin-top:22px;font:700 8px/1 var(--mono);letter-spacing:.15em;color:rgba(246,239,225,.4)}

.cycle-list{display:grid;gap:14px}
.cycle-entry{
  position:relative;display:grid;grid-template-columns:72px minmax(0,1fr) 120px;
  gap:22px;align-items:center;padding:26px 24px;isolation:isolate;
  border:2.5px solid var(--edge-2);border-radius:var(--r);background:var(--ink-2);
  transition:background .35s var(--ease),border-color .35s,transform .4s var(--boing);
}
.cycle-entry:hover{transform:translateX(6px);border-color:var(--green)}
.cycle-entry>span{
  font-family:var(--display);font-variation-settings:'SOFT' 80,'WONK' 1;font-weight:900;
  font-size:38px;line-height:1;color:rgba(246,239,225,.32);
  transition:color .35s,transform .45s var(--boing);
}
.cycle-entry h3{
  font-weight:900;font-size:clamp(36px,4.4vw,66px);line-height:.94;letter-spacing:-.04em;margin:0;
  font-variation-settings:'SOFT' 80,'WONK' 1,'opsz' 144;
}
.cycle-entry p{max-width:56ch;font-size:14.5px;line-height:1.66;color:rgba(246,239,225,.68);margin:10px 0 0;font-weight:400}
.cycle-entry>b{
  justify-self:end;font:700 9px/1 var(--sans);letter-spacing:.12em;color:rgba(246,239,225,.4);
  border:2.5px solid rgba(246,239,225,.24);border-radius:99px;padding:8px 12px;
  transform:rotate(-6deg);transition:color .3s,border-color .3s,transform .4s var(--boing),background .3s;
}
.cycle-entry.active{background:#16220f;border-color:var(--green);box-shadow:5px 5px 0 var(--green-dark)}
.cycle-entry.active>span{color:var(--green);transform:translateX(3px) scale(1.08)}
.cycle-entry.active>b{color:var(--ink);background:var(--red);border-color:var(--paper);transform:rotate(-4deg) scale(1.05);color:#fff}
.cycle-entry.learned.active>b{background:var(--green);border-color:var(--paper);color:var(--ink)}

/* ============================================================
   TENTH LIFE
   ============================================================ */
.tenth-life{position:relative;padding:clamp(80px,9vw,116px) 0;background:var(--green-soft);border-block:var(--stroke) solid var(--ink);overflow:hidden}
.tenth-life:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--halftone-dark);background-size:18px 18px;opacity:.3}
.tenth-wrap{position:relative;display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(34px,4.6vw,66px);align-items:center}
.tenth-copy{position:relative}
.giant-ten{
  display:block;pointer-events:none;will-change:transform;
  font-family:var(--display);font-variation-settings:'SOFT' 100,'WONK' 1,'opsz' 144;font-weight:900;
  font-size:clamp(150px,23vw,360px);line-height:.7;letter-spacing:-.07em;
  color:transparent;-webkit-text-stroke:3px rgba(28,107,52,.34);
  margin:0 0 -22px -12px;
}
.tenth-copy h2{font-weight:900;font-size:clamp(46px,6vw,92px);line-height:.94;letter-spacing:-.04em;font-variation-settings:'SOFT' 80,'WONK' 1,'opsz' 144;margin:0}
.tenth-copy h3{font-weight:800;font-style:italic;font-size:clamp(30px,3.6vw,54px);line-height:1.06;color:var(--green-dark);margin:14px 0 0}
.tenth-copy>p:last-child{font-size:16px;line-height:1.7;max-width:44ch;margin:24px 0 0;font-weight:400;color:#2c3326}
.tenth-display{position:relative;margin:0;transform-style:preserve-3d}
.gallery-card{
  rotate:1.1deg;background:var(--ink);color:var(--paper);padding:12px;
  border:var(--stroke) solid var(--ink);border-radius:var(--r);box-shadow:var(--pop-lg);
  transition:box-shadow .4s var(--ease);
}
.gallery-meta{display:flex;justify-content:space-between;gap:12px;padding:5px 8px 12px;font:700 8px/1 var(--mono);letter-spacing:.13em;color:rgba(246,239,225,.55)}
.gallery-image{aspect-ratio:1448/1086;background:#0d100b;overflow:hidden;border:2.5px solid rgba(246,239,225,.2);border-radius:var(--r-sm)}
.gallery-image img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--boing)}
.tenth-display:hover .gallery-image img{transform:scale(1.04)}
.gallery-card figcaption{
  font-family:var(--display);font-variation-settings:'SOFT' 70,'WONK' 1;font-weight:600;font-style:italic;
  font-size:20px;line-height:1.3;padding:14px 8px 3px;color:rgba(246,239,225,.82);
}

/* ============================================================
   CYCLE MAP
   ============================================================ */
.map{position:relative;padding:clamp(80px,9vw,116px) 0 clamp(84px,9vw,124px);background:var(--paper);overflow:hidden}
.map:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--halftone-dark);background-size:18px 18px;opacity:.2}
.map>.shell{position:relative;z-index:1}
.map-layout{position:relative;margin-top:clamp(40px,5vw,62px);padding-left:96px;display:grid;gap:16px}
.map-line{position:absolute;left:34px;top:6px;bottom:6px;width:4px;border-radius:4px;background:rgba(23,19,15,.16)}
.map-line span{position:absolute;left:0;top:0;width:4px;border-radius:4px;height:0;background:var(--green-dark);transition:height .12s linear}
.map-stop{
  position:relative;display:grid;grid-template-columns:84px 1fr;gap:22px;padding:24px 24px;
  border:2.5px solid var(--ink);border-radius:var(--r);background:var(--paper);
  transition:transform .4s var(--boing),box-shadow .4s var(--ease),background .35s;
}
.map-stop:hover{transform:translateX(8px);box-shadow:var(--pop)}
.map-stop:before{
  content:"";position:absolute;left:-68px;top:34px;width:16px;height:16px;border-radius:50%;
  background:var(--paper);border:3px solid var(--ink);
  transition:background .4s,transform .4s var(--boing);
}
.map-stop.visible:before{background:var(--green);transform:scale(1.15)}
.map-stop>b{
  font-family:var(--display);font-variation-settings:'SOFT' 90,'WONK' 1;font-weight:900;
  font-size:clamp(38px,4.2vw,52px);line-height:1;color:var(--green-dark);
}
.map-stop small{font:700 9px/1 var(--sans);letter-spacing:.14em;color:var(--muted)}
.map-stop h3{font-weight:900;font-size:clamp(28px,3.5vw,50px);line-height:1;letter-spacing:-.035em;margin:9px 0 7px;font-variation-settings:'SOFT' 80,'WONK' 1,'opsz' 144}
.map-stop p{font-size:14.5px;line-height:1.66;color:#57503f;max-width:58ch;margin:0;font-weight:400}
.final-stop{background:var(--ink);color:var(--paper);box-shadow:var(--pop-green)}
.final-stop:hover{box-shadow:9px 9px 0 var(--green-dark)}
.final-stop:before{background:var(--green)}
.final-stop>b{color:var(--green)}
.final-stop p{color:rgba(246,239,225,.66)}
.final-stop small{color:var(--green)}

/* ============================================================
   PRINCIPLES
   ============================================================ */
.principles{position:relative;background:var(--ink-3);color:var(--paper);padding:clamp(80px,9vw,116px) 0;overflow:hidden}
.principles:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--halftone-light);background-size:18px 18px;opacity:.35}
.principles-grid{position:relative;display:grid;grid-template-columns:.88fr 1.12fr;gap:clamp(34px,4.6vw,58px);align-items:center}
.principle-visual{margin:0;transform-style:preserve-3d}
.portrait-card{border:var(--stroke) solid var(--paper);border-radius:var(--r);padding:11px;background:var(--sky);box-shadow:10px 10px 0 var(--green-dark)}
.portrait-title{display:flex;justify-content:space-between;gap:12px;padding:4px 8px 11px;font:700 8px/1 var(--mono);letter-spacing:.12em;color:rgba(23,19,15,.65)}
.portrait-window{
  aspect-ratio:1/1;overflow:hidden;position:relative;
  border:2.5px solid var(--ink);border-radius:var(--r-sm);
  background:linear-gradient(180deg,#eaf3ff,#bcd6ea);
}
.portrait-window:after{content:"";position:absolute;inset:0;background-image:var(--halftone-dark);background-size:14px 14px;opacity:.35;pointer-events:none}
.portrait-window img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .8s var(--boing)}
.principle-visual:hover .portrait-window img{transform:scale(1.03)}
.principle-copy h2 em{color:var(--green)}
.principle-lines{margin-top:clamp(26px,3.6vw,42px);display:grid;gap:10px}
.principle-lines span{
  position:relative;display:flex;align-items:center;gap:14px;padding:16px 18px;
  border:2.5px solid var(--edge-2);border-radius:99px;background:var(--ink-2);
  font:600 clamp(12px,1.5vw,18px)/1.2 var(--sans);letter-spacing:.005em;
  transition:transform .35s var(--boing),background .3s,border-color .3s,color .3s;
}
.principle-lines span i{
  font:600 10px/1 var(--sans);font-style:normal;flex:none;
  width:26px;height:26px;display:grid;place-items:center;border-radius:50%;
  background:var(--green);color:var(--ink);
}
.principle-lines span:hover{transform:translateX(8px);background:#1b2a17;border-color:var(--green)}
.principle-lines span:last-child{border-color:var(--green);color:var(--green)}

/* ============================================================
   ARCADE
   ============================================================ */
.run{padding:clamp(80px,9vw,116px) 0 clamp(84px,9vw,124px);background:var(--paper-2);position:relative;overflow:hidden}
.run:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--halftone-dark);background-size:18px 18px;opacity:.26}
.run-head,.arcade{position:relative}
.run-head{display:grid;grid-template-columns:1fr .66fr;gap:46px;align-items:end}
.run-head>p{font-size:16px;line-height:1.68;margin:0;font-weight:400;color:#4a4437;max-width:42ch}

/* ============================================================
   FINALE + FOOTER
   ============================================================ */
.finale{position:relative;padding:clamp(80px,9vw,120px) 0;background:var(--paper);border-top:var(--stroke) solid var(--ink);overflow:hidden}
.finale:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--halftone-dark);background-size:18px 18px;opacity:.2}
.finale-grid{position:relative;z-index:1}
.finale-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(34px,4.6vw,62px);align-items:center}
.finale-copy h2{font-size:clamp(40px,5.2vw,76px)}
.finale-copy h3{font-weight:900;font-size:clamp(36px,4.8vw,70px);line-height:.98;letter-spacing:-.04em;margin:14px 0 0;font-variation-settings:'SOFT' 80,'WONK' 1,'opsz' 144}
.finale-copy h3 em{color:var(--green-dark);font-style:italic}
.final-tags{display:flex;gap:9px;flex-wrap:wrap;margin-top:34px}
.final-tags span{
  padding:11px 16px;border:2.5px solid var(--ink);border-radius:99px;background:var(--paper-2);
  font:600 10px/1 var(--sans);letter-spacing:.1em;
  transition:background .25s,color .25s,transform .3s var(--boing);
}
.final-tags span:hover{background:var(--green);transform:translateY(-3px) rotate(-2deg)}
.final-frame{margin:0 auto;width:min(100%,478px);rotate:-1.1deg;border:var(--stroke) solid var(--ink);border-radius:var(--r);padding:11px;background:var(--paper-3);box-shadow:var(--pop-lg);transform-style:preserve-3d;transition:box-shadow .4s var(--ease)}
.final-card-head{display:flex;justify-content:space-between;gap:12px;padding:4px 8px 11px;font:700 8px/1 var(--mono);letter-spacing:.12em;color:rgba(23,19,15,.65)}
.final-card-image{
  position:relative;aspect-ratio:1/1;overflow:hidden;isolation:isolate;
  border:2.5px solid var(--ink);border-radius:var(--r-sm);
  background:linear-gradient(180deg,#dbe8d5,#9db59c);
}
.final-card-image:before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:var(--halftone-dark);background-size:15px 15px;opacity:.4;
}
.final-ten{
  position:absolute;z-index:0;left:50%;top:48%;transform:translate(-50%,-50%);
  font-family:var(--display);font-variation-settings:'SOFT' 100,'WONK' 1,'opsz' 144;font-weight:900;
  font-size:82%;line-height:.7;letter-spacing:-.07em;
  color:transparent;-webkit-text-stroke:3px rgba(28,107,52,.28);
}
.final-card-image img{position:relative;z-index:2;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 16px 22px rgba(0,0,0,.3));transition:transform .7s var(--boing)}
.final-frame:hover .final-card-image img{transform:scale(1.04)}

.footer{position:relative;background:var(--ink);color:var(--paper);overflow:hidden;border-top:var(--stroke) solid var(--ink)}
.footer:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--halftone-light);background-size:18px 18px;opacity:.35}
.footer-inner{
  position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.15fr);
  gap:clamp(34px,5vw,70px);padding:clamp(48px,6vw,74px) 0 clamp(34px,4vw,46px);align-items:start;
}
.footer-brand{display:flex;gap:22px;align-items:flex-start}
.footer-logo{
  flex:none;width:clamp(112px,13vw,158px);aspect-ratio:1448/1086;overflow:hidden;
  border:var(--stroke) solid var(--paper);border-radius:var(--r);
  background:var(--green-soft);box-shadow:6px 6px 0 var(--green-dark);rotate:-2.5deg;
}
.footer-logo img{width:100%;height:100%;object-fit:cover;display:block}
.footer-id b{display:block;font:700 clamp(24px,2.6vw,32px)/1 var(--sans);letter-spacing:-.01em}
.footer-id small{display:block;margin-top:7px;font:700 9px/1 var(--mono);letter-spacing:.22em;color:var(--green)}
.footer-id p{margin:16px 0 0;max-width:38ch;font-size:15px;line-height:1.66;color:rgba(246,239,225,.68);font-weight:400}
.footer-chain{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:9px 14px;
  border:2.5px solid var(--edge-2);border-radius:99px;font:600 9px/1 var(--sans);letter-spacing:.12em;
}
.footer-chain i{width:8px;height:8px;border-radius:50%;background:var(--green);animation:blink 2.2s ease-in-out infinite}

.footer-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px);justify-self:end;width:100%}
.footer-nav h4{margin:0 0 16px;font:700 9px/1 var(--sans);letter-spacing:.2em;color:var(--green)}
.footer-nav a{
  display:block;padding:7px 0;font:600 14px/1.35 var(--sans);color:rgba(246,239,225,.7);
  transition:color .25s,transform .3s var(--boing);
}
.footer-nav a:hover{color:var(--green);transform:translateX(4px)}
.footer-nav .lw{
  display:inline-flex;align-items:center;gap:9px;padding:12px 16px;margin-top:2px;
  border:2.5px solid var(--edge-2);border-radius:99px;font:600 12px/1 var(--sans);color:var(--paper);
  transition:background .25s,color .25s,border-color .25s,transform .3s var(--boing);
}
.footer-nav .lw:hover{background:var(--green);color:var(--ink);border-color:var(--ink);transform:translateY(-3px)}
.footer-nav .lw svg{width:18px;height:18px;fill:currentColor;flex:none;transition:transform .4s var(--boing)}
.footer-nav .lw:hover svg{transform:translate(3px,-3px)}

.footer-mark{position:relative;overflow:hidden;line-height:0;padding:0 0 6px}
.footer-mark span{
  display:block;text-align:center;white-space:nowrap;
  font-family:var(--display);font-variation-settings:'SOFT' 100,'WONK' 1,'opsz' 144;font-weight:900;
  font-size:min(20.5vw,300px);line-height:.78;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:2.5px rgba(246,239,225,.16);
}
.footer-base{position:relative;border-top:2.5px solid var(--edge)}
.footer-base .shell{
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  padding:20px 0;font:700 10px/1.5 var(--mono);letter-spacing:.1em;color:rgba(246,239,225,.45);
}
.footer-tally{color:var(--green)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1200px){
  .hero-grid{grid-template-columns:1fr .84fr}
  .cycle-rail{grid-template-columns:270px 1fr}
}

@media(max-width:1050px){
  .desktop-nav{display:none}
  .menu-button{display:block;justify-self:end}
  .hero{padding-top:120px}
  .hero-grid{grid-template-columns:1fr .8fr}
  .hero-title{font-size:clamp(56px,10.6vw,110px)}
  .story-title-row,.lives-intro,.run-head{grid-template-columns:1fr}
  .frame-wide{grid-column:1/13}
  .frame-copy{grid-column:1/7}
  .frame-square{grid-column:7/13}
  .archive-note{grid-column:1/13}
  .archive-note p{padding:18px 0}
  .crowd-frame{aspect-ratio:16/9}
  .cycle-rail{grid-template-columns:232px 1fr}
  .cycle-monitor{padding:22px 18px}
  .cycle-monitor strong{font-size:clamp(88px,11vw,130px);margin-top:20px}
  .cycle-entry{grid-template-columns:56px minmax(0,1fr) 108px;padding:22px 18px;gap:16px}
  .tenth-wrap,.principles-grid,.finale-grid{grid-template-columns:1fr 1fr}
  .sticker{width:78px;height:78px}
  .sticker b{font-size:25px}
}

@media(max-width:900px){
  .hero-grid{display:flex;flex-direction:column;gap:34px}
  .hero-copy,.hero-display{width:100%}
  .hero-title{font-size:clamp(62px,12.6vw,116px)}
  .tenth-wrap,.principles-grid,.finale-grid{grid-template-columns:1fr;gap:44px}
  .principle-copy{order:-1}
  .lesson{grid-template-columns:1fr;gap:16px}
  .lesson>span{padding:0}
}

@media(max-width:760px){
  :root{--shell:calc(100vw - 28px);--stroke:2.5px;--r:18px;--r-sm:12px;--pop:5px 5px 0 var(--ink);--pop-lg:7px 7px 0 var(--ink);--pop-green:5px 5px 0 var(--green-dark)}
  .nav-shell{top:7px;width:calc(100vw - 14px);height:60px;padding:0 8px 0 10px;grid-template-columns:auto 1fr auto auto;gap:8px;box-shadow:0 4px 0 var(--ink)}
  .nav-shell.compact{height:54px;top:5px}
  .network-pill{display:none}
  .brand-text small{display:none}
  .brand-mark{width:40px;height:40px}
  .brand-mark i{width:19px;height:19px;font-size:9px;border-width:2px;right:-4px;bottom:-3px}
  .menu-button{width:42px;height:42px}

  .hero{min-height:auto;padding:98px 0 34px}
  .hero-overline{font-size:8px;gap:9px;padding:8px 12px}
  .hero-overline i{width:6px;height:6px}
  .hero-title{font-size:clamp(52px,15.4vw,92px);margin:22px 0 16px}
  .hero-title .line:nth-child(2){margin-left:2.6vw}
  .hero-lead,.hero-thesis{font-size:14.5px}
  .hero-actions{align-items:stretch;flex-direction:column;gap:14px}
  .solid-button{width:100%}
  .text-button{align-self:flex-start}
  .hero-display{padding:9px}
  .display-label{font-size:7px;letter-spacing:.09em;padding:4px 6px 9px}
  .display-label.bottom{padding:9px 6px 2px}
  .hero-ledger{grid-template-columns:1fr;gap:10px}
  .hero-ledger div{padding:14px 16px;rotate:none!important}
  .hero-ledger b{width:50px;height:50px;font-size:25px}
  .hero-ledger span{font-size:13px}
  .sticker-hero{right:-10px;bottom:46px;width:66px;height:66px}
  .sticker-hero b{font-size:21px}
  .sticker-hero i{font-size:6.5px}
  .sticker-gallery{left:-10px;top:32%;width:62px;height:62px}
  .sticker-gallery b{font-size:18px}
  .sticker-gallery i{font-size:6.5px}

  .ticker{padding:12px 0}
  .ticker span{font-size:12px;letter-spacing:.1em}
  .ticker span{padding-right:18px}

  .story-title-row{gap:20px}
  .archive-wall{grid-template-columns:1fr;gap:16px}
  .frame-wide,.frame-copy,.frame-square,.archive-note{grid-column:auto}
  .frame-caption{align-items:flex-start;flex-direction:column;gap:7px}
  .copy-panel{padding:22px 14px}
  .copy-panel p{font-size:clamp(19px,5vw,25px);margin-bottom:16px}
  .bubble{border-radius:26px;padding:24px 20px}
  .bubble:before{left:34px}
  .bubble:after{left:34px}
  .lesson{margin-top:44px}

  .cycle-rail{display:block;margin-top:30px}
  .cycle-monitor{
    position:sticky;top:64px;z-index:5;margin-bottom:16px;
    padding:14px 16px;border-radius:var(--r);box-shadow:4px 4px 0 var(--green-dark);
    display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto auto;gap:0 14px;
    background:var(--ink-2);
  }
  .monitor-label{grid-column:1;grid-row:1}
  .cycle-monitor strong{grid-column:2;grid-row:1/4;font-size:72px;margin:0;align-self:center}
  .cycle-monitor>b{grid-column:1;grid-row:2;font-size:22px;margin:6px 0 0}
  .monitor-life{grid-column:1;grid-row:3;margin:10px 0 2px;gap:4px}
  .monitor-life i{width:11px;height:11px;border-width:2px}
  .monitor-meter,.cycle-monitor small{display:none}
  .cycle-list{gap:12px}
  .cycle-entry{grid-template-columns:40px 1fr;padding:20px 16px;gap:12px}
  .cycle-entry:hover{transform:none}
  .cycle-entry>span{font-size:26px;align-self:start;padding-top:5px}
  .cycle-entry h3{font-size:clamp(36px,10.4vw,56px)}
  .cycle-entry p{grid-column:2;font-size:13.5px}
  .cycle-entry>b{grid-column:2;justify-self:start;margin-top:14px;transform:rotate(-3deg)}

  .giant-ten{font-size:46vw;margin:0 0 -12px -4px;-webkit-text-stroke-width:2.5px}
  .tenth-copy h2{font-size:clamp(42px,12vw,72px)}

  .map-layout{padding-left:38px;margin-top:34px;gap:12px}
  .map-line{left:11px;width:3px}
  .map-line span{width:3px}
  .map-stop{grid-template-columns:1fr;gap:4px;padding:20px 16px}
  .map-stop:hover{transform:none;box-shadow:none}
  .map-stop:before{left:-32px;top:26px;width:13px;height:13px}
  .map-stop>b{font-size:32px}
  .map-stop h3{font-size:clamp(26px,7.6vw,42px)}

  .principle-lines span{font-size:13px;padding:14px 15px;gap:11px}
  .principle-lines span:hover{transform:none}
  .principle-lines span i{width:23px;height:23px;font-size:9px}

  .hero-display,.gallery-card,.final-frame,.archive-note{rotate:none}

  .finale-copy h3{font-size:clamp(34px,9.6vw,54px)}
  .footer{align-items:flex-start;flex-direction:column;gap:20px;padding:28px 20px}
}

@media(max-width:420px){
  .hero-title{font-size:clamp(46px,14.4vw,74px)}
  .hero-mantra span{font-size:9px;padding:9px 12px}
  .cycle-entry h3{font-size:clamp(32px,10vw,46px)}
  .bubble{font-size:clamp(25px,7.4vw,36px)}
  .ticker span{font-size:11px}
  .note-rows{grid-template-columns:1fr 1fr}
}

@media(hover:none){
  .archive-frame:hover,.map-stop:hover,.cycle-entry:hover,.final-tags span:hover,.hero-mantra span:hover{transform:none}
  .solid-button:hover:before{transform:translateY(101%)}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;transition-delay:0ms!important;scroll-behavior:auto!important;
  }
  html.js .reveal,html.js .char,html.js [data-words] .word{opacity:1!important;transform:none!important;filter:none!important}
  .intro{display:none!important}
  .grain,.hero-scan,.sweep,.orb,.sunburst{display:none}
  .ticker-track{animation:none!important;transform:none!important}
}

/* ============================================================
   ROBINHOOD RUN  (canvas game skin)
   catjak-game.css ships the layout; this retunes it to the
   cartoon-archive palette and drops its standalone chrome.
   ============================================================ */
.catjak-game-section{
  --game-ink:var(--ink);
  --game-paper:var(--paper);
  --game-green:var(--green-dark);
  --game-green-dark:var(--green-dark);
  --game-gold:var(--green);
  --game-red:var(--red);
  position:relative;
  margin-top:clamp(36px,4.6vw,56px);
  padding:clamp(14px,1.8vw,22px);
  border:var(--stroke) solid var(--ink);border-radius:var(--r);border-block-width:var(--stroke);
  background:linear-gradient(150deg,#3f7a48 0%,#2b5c39 52%,#1c4530 100%);
  box-shadow:var(--pop-lg);
  overflow:hidden;
}
.catjak-game-section:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:var(--halftone-light);background-size:16px 16px;
}
.catjak-game-shell{position:relative;z-index:1;width:100%;margin:0}
.catjak-game-layout{grid-template-columns:minmax(0,1fr) 286px;gap:clamp(12px,1.4vw,18px)}
.catjak-game-card,.catjak-ranking{border-width:var(--stroke);border-radius:var(--r);box-shadow:var(--pop)}
.catjak-game-card{padding:12px}

.catjak-game-hud{grid-template-columns:repeat(4,minmax(0,1fr)) auto;padding:4px 6px 12px}
.catjak-hud-buttons{display:flex;gap:8px}
.catjak-stat-label{color:var(--muted);font-family:var(--sans);letter-spacing:.14em}
.catjak-stat strong{
  font-family:var(--display);font-variation-settings:'SOFT' 90,'WONK' 1;font-weight:900;
  font-size:clamp(1.1rem,2.5vw,1.5rem);color:var(--ink);
}
.catjak-icon-button{
  border-width:2.5px;background:var(--paper-2);box-shadow:3px 3px 0 var(--ink);
  transition:transform .2s var(--boing),box-shadow .2s var(--ease),background .2s;
}
.catjak-icon-button:hover{background:var(--green);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.catjak-icon-button.is-muted{background:var(--paper-3);opacity:.75}

.catjak-canvas-wrap{border-width:2.5px;border-radius:var(--r-sm);background:#4e7f56}
#catjak-game-canvas:focus-visible{outline-color:var(--green)}

.catjak-game-overlay{background:rgba(14,22,15,.7);border-radius:var(--r)}
.catjak-game-dialog{border-width:var(--stroke);border-radius:var(--r);box-shadow:var(--pop)}
.catjak-game-avatar{
  width:clamp(76px,17vw,104px);aspect-ratio:1;overflow:hidden;border-radius:50%;
  border:var(--stroke) solid var(--ink);background:var(--green-soft);margin-bottom:14px;
}
.catjak-game-avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.catjak-game-dialog h3{
  font-family:var(--display);font-variation-settings:'SOFT' 90,'WONK' 1,'opsz' 144;font-weight:900;
  letter-spacing:-.03em;text-transform:none;
}
.catjak-game-dialog p{font-weight:600;color:#4a463d}
.catjak-game-result{color:var(--ink)!important;font-weight:800}
.catjak-name-label{letter-spacing:.16em;color:var(--muted)}
.catjak-name-input{border-width:2.5px;border-radius:12px;background:var(--paper-2)}
.catjak-primary-button{
  border-width:var(--stroke);box-shadow:5px 5px 0 var(--ink);letter-spacing:.05em;
  transition:transform .2s var(--boing),box-shadow .2s var(--ease);
}
.catjak-primary-button:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.catjak-controls-help{color:var(--muted);font-family:var(--mono);font-weight:400;letter-spacing:.06em}

.catjak-move-button{border-width:2.5px;border-radius:99px;background:var(--green-soft);box-shadow:3px 3px 0 var(--ink)}
.catjak-move-button:active{transform:translate(3px,3px);box-shadow:none}

.catjak-ranking{padding:18px}
.catjak-ranking-head{border-bottom-width:2.5px}
.catjak-ranking h3{
  font-family:var(--display);font-variation-settings:'SOFT' 90,'WONK' 1,'opsz' 144;font-weight:900;
  font-size:1.9rem;letter-spacing:-.03em;text-transform:none;
}
.catjak-ranking p{color:var(--muted);font-weight:700;letter-spacing:.06em}
#catjak-ranking-scope{color:var(--green-dark);font-weight:900}
.catjak-ranking-item{border-width:2px;border-radius:99px;background:var(--paper-2);padding:.5rem .8rem}
.catjak-ranking-empty{
  padding:14px 12px;border:2px dashed var(--line);border-radius:var(--r-sm);
  color:var(--muted);font-size:.76rem;font-weight:700;line-height:1.45;
}

@media(max-width:1050px){
  .catjak-game-layout{grid-template-columns:1fr}
  .catjak-ranking{order:2}
}
@media(max-width:760px){
  .catjak-game-section{padding:10px;border-radius:var(--r)}
  .catjak-game-card{padding:9px}
  .catjak-game-hud{grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem;padding:4px 4px 10px}
  .catjak-hud-buttons{grid-column:1/-1;justify-content:flex-end}
  .catjak-stat-label{font-size:.58rem}
  .catjak-mobile-controls{display:grid}
  .catjak-ranking{padding:14px}
}

/* ============================================================
   HOW TO BUY
   ============================================================ */
.buy{
  position:relative;overflow:hidden;
  padding:clamp(76px,8.5vw,112px) 0 clamp(80px,9vw,116px);
  background:linear-gradient(165deg,var(--green-soft) 0%,#e9f7bf 42%,var(--paper-2) 100%);
  border-block:var(--stroke) solid var(--ink);
  color:var(--ink);
}
.buy-atmos{position:absolute;inset:0;pointer-events:none}
.buy-sun{
  position:absolute;left:50%;top:-38%;width:120vw;height:120vw;transform:translateX(-50%);
  background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(28,107,52,.09) 0deg 4.5deg,transparent 4.5deg 9deg);
  -webkit-mask-image:radial-gradient(circle at center,#000 4%,transparent 52%);
  mask-image:radial-gradient(circle at center,#000 4%,transparent 52%);
  animation:spin 110s linear infinite;
}
.buy:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--halftone-dark);background-size:19px 19px;opacity:.3;
}
.coin{
  position:absolute;display:grid;place-items:center;border-radius:50%;
  background:var(--sun);color:var(--ink);border:var(--stroke) solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);font:700 13px/1 var(--sans);letter-spacing:.04em;
  animation:coinFloat 7s ease-in-out infinite;
}
@keyframes coinFloat{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-16px) rotate(7deg)}}
/* Decorations live in the gutters outside the content column, never over text. */
.buy-atmos{--gutter:calc((100vw - min(1240px,100vw - 40px)) / 2)}
.coin.c1{width:62px;height:62px;left:calc(var(--gutter) * .5 - 31px);top:17%;font-size:22px}
.coin.c2{width:74px;height:74px;right:calc(var(--gutter) * .5 - 37px);top:11%;background:var(--sky);animation-delay:-2.2s}
.coin.c3{width:50px;height:50px;left:calc(var(--gutter) * .5 - 25px);bottom:19%;background:var(--green);animation-delay:-4s;font-size:17px}
.coin.c4{width:56px;height:56px;right:calc(var(--gutter) * .5 - 28px);bottom:13%;animation-delay:-1.1s;font-size:20px}
@media(max-width:1430px){.coin{display:none}}
.buy>.shell{position:relative;z-index:2}

.buy-head{display:grid;grid-template-columns:1fr minmax(0,.66fr);gap:clamp(24px,3.4vw,52px);align-items:end}
.buy-head h2{font-weight:900;font-size:clamp(46px,6.4vw,98px);line-height:.92;letter-spacing:-.04em;font-variation-settings:'SOFT' 90,'WONK' 1,'opsz' 144;margin:0}
.buy-head h2 em{color:var(--green-dark);font-style:italic}
.buy-head>p{margin:0 0 8px;font-size:16px;line-height:1.68;font-weight:400;color:#4a4437;max-width:44ch}

.ca-card{
  margin-top:clamp(30px,3.6vw,46px);padding:22px 24px 20px;
  border:var(--stroke) solid var(--ink);border-radius:var(--r);
  background:var(--ink);color:var(--paper);box-shadow:var(--pop-lg);rotate:-.5deg;
}
.ca-top{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.ca-label{font:600 10px/1 var(--sans);letter-spacing:.2em;color:var(--green)}
.ca-chain{display:inline-flex;align-items:center;gap:7px;font:700 8px/1 var(--mono);letter-spacing:.14em;color:rgba(246,239,225,.55)}
.ca-chain i{width:8px;height:8px;border-radius:50%;background:var(--green);animation:blink 2.2s ease-in-out infinite}
.ca-row{display:flex;align-items:center;gap:14px;margin-top:15px;flex-wrap:wrap}
.ca-row code{
  flex:1;min-width:0;overflow-x:auto;padding:16px 18px;
  border:2.5px solid var(--edge-2);border-radius:var(--r-sm);background:rgba(255,255,255,.05);
  font:500 clamp(11px,1.35vw,15px)/1.3 var(--mono);letter-spacing:.02em;white-space:nowrap;
}
.ca-card[data-state="pending"] .ca-row code{color:rgba(246,239,225,.5);letter-spacing:.2em}
.ca-copy{
  flex:none;min-height:52px;padding:0 24px;border-radius:99px;cursor:pointer;
  border:var(--stroke) solid var(--ink);background:var(--green);color:var(--ink);
  font:700 12px/1 var(--sans);letter-spacing:.1em;box-shadow:4px 4px 0 var(--paper);
  transition:transform .2s var(--boing),box-shadow .2s var(--ease),background .2s;
}
.ca-copy:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--paper)}
.ca-copy:active:not(:disabled){transform:translate(3px,3px);box-shadow:1px 1px 0 var(--paper)}
.ca-copy:disabled{background:transparent;color:rgba(246,239,225,.42);border-color:var(--edge-2);box-shadow:none;cursor:not-allowed}
.ca-copy.done{background:var(--sun)}
.ca-warn{margin:15px 0 0;font:700 12.5px/1.5 var(--sans);color:var(--sun)}
.ca-card[data-state="live"] .ca-warn{color:rgba(246,239,225,.55)}

.buy-steps{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
  margin:clamp(26px,3vw,38px) 0 0;padding:0;list-style:none;
}
.buy-steps li{
  position:relative;display:flex;flex-direction:column;gap:9px;padding:34px 24px 22px;
  border:var(--stroke) solid var(--ink);border-radius:var(--r);box-shadow:var(--pop);
  transition:transform .38s var(--boing),box-shadow .38s var(--ease);
}
.buy-steps li:nth-child(1){rotate:-1.2deg}
.buy-steps li:nth-child(2){rotate:.9deg}
.buy-steps li:nth-child(3){rotate:-.6deg}
.buy-steps li:hover{transform:translateY(-7px);box-shadow:var(--pop-lg)}
.step-sky{background:var(--sky)}
.step-sun{background:var(--sun)}
.step-green{background:var(--green)}
.step-badge{
  position:absolute;left:22px;top:-22px;width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;background:var(--paper);color:var(--ink);
  border:var(--stroke) solid var(--ink);box-shadow:3px 3px 0 var(--ink);
  font-family:var(--display);font-variation-settings:'SOFT' 90,'WONK' 1;font-weight:900;font-size:22px;
}
.buy-steps h3{margin:8px 0 0;font-weight:900;font-size:clamp(23px,2.4vw,32px);line-height:1;letter-spacing:-.03em;font-variation-settings:'SOFT' 80,'WONK' 1,'opsz' 144}
.buy-steps p{margin:0;font-size:14.5px;line-height:1.62;font-weight:400;color:rgba(23,19,15,.82)}
.step-link{
  margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:6px;
  font:700 11px/1 var(--sans);letter-spacing:.07em;color:var(--ink);
  transition:transform .3s var(--boing);
}
.step-link:hover{transform:translateX(5px)}
.step-link.is-static{color:rgba(23,19,15,.5);pointer-events:none}

.buy-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(28px,3.4vw,42px)}
.buy .solid-button{background:var(--sun)}
.buy .solid-button:before{background:var(--green)}
.ghost-button{
  display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 28px;
  border:var(--stroke) solid var(--ink);border-radius:99px;background:var(--paper);
  font:700 13px/1 var(--sans);letter-spacing:.03em;color:var(--ink);
  box-shadow:5px 5px 0 var(--ink);
  transition:transform .2s var(--boing),box-shadow .2s var(--ease),background .25s;
}
.ghost-button:hover{background:var(--sky);transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.ghost-button:active{transform:translate(4px,4px);box-shadow:1px 1px 0 var(--ink)}
[aria-disabled="true"]{opacity:.45;pointer-events:none;filter:grayscale(.35)}
.buy-note{margin:24px 0 0;font:700 12px/1.6 var(--sans);color:rgba(23,19,15,.5);max-width:640px}

@media(max-width:1050px){
  .buy-head{grid-template-columns:1fr}
  .buy-steps{grid-template-columns:1fr;gap:34px}
}
@media(max-width:760px){
  .buy{padding:64px 0 74px}
  .ca-card{rotate:none;padding:18px 16px 16px}
  .ca-row{flex-direction:column;align-items:stretch}
  .ca-copy{width:100%}
  .buy-steps li{rotate:none!important;padding:32px 20px 20px}
  .buy-actions{flex-direction:column}
  .buy-actions>*{width:100%}
}

/* ---------- Footer responsive --------------------------- */
@media(max-width:1050px){
  .footer-inner{grid-template-columns:1fr;gap:38px}
  .footer-nav{justify-self:start;grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
  .footer-inner{padding:40px 0 30px;gap:30px}
  .footer-brand{gap:16px}
  .footer-logo{width:96px;padding:8px}
  .footer-id p{max-width:none;font-size:14px}
  .footer-nav{grid-template-columns:1fr 1fr;gap:24px 18px}
  .footer-nav div:last-child{grid-column:1/-1}
  .footer-nav h4{margin-bottom:10px}
  .footer-nav a{font-size:14.5px;padding:8px 0}
  .footer-nav a:hover{transform:none}
  .footer-mark span{font-size:18vw;-webkit-text-stroke-width:2px}
  .footer-base .shell{flex-direction:column;align-items:flex-start;gap:10px;padding:16px 0;font-size:9px}
}
@media(max-width:480px){
  .footer-brand{flex-direction:column}
}

/* ---------- Social links --------------------------------- */
.nav-social{display:flex;align-items:center;gap:7px;justify-self:end}
.social-dot{
  width:40px;height:40px;display:grid;place-items:center;border-radius:50%;
  border:2.5px solid var(--ink);background:var(--paper-2);color:var(--ink);
  transition:transform .3s var(--boing),background .25s;
}
.social-dot svg{width:16px;height:16px;fill:currentColor}
.social-dot:hover{background:var(--green);transform:translateY(-3px) rotate(-6deg)}

.menu-social{display:flex;gap:10px;margin-top:24px}
.menu-social a{
  display:inline-flex;align-items:center;gap:9px;padding:13px 18px;border-radius:99px;
  border:2.5px solid var(--edge-2);font:600 13px/1 var(--sans);color:var(--paper);
  opacity:1;transform:none;border-bottom-width:2.5px;
}
.menu-social a svg{width:17px;height:17px;fill:currentColor}
.menu-social a:active{background:var(--green);color:var(--ink);border-color:var(--green)}

.buy-social{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:26px;
  font:600 12px/1 var(--sans);letter-spacing:.02em;
}
.buy-social>span{color:rgba(23,19,15,.5);letter-spacing:.14em;text-transform:uppercase;font-size:10px}
.buy-social a{
  display:inline-flex;align-items:center;gap:9px;padding:12px 17px;border-radius:99px;
  border:2.5px solid var(--ink);background:var(--paper);box-shadow:3px 3px 0 var(--ink);
  transition:transform .25s var(--boing),background .25s,box-shadow .25s;
}
.buy-social a svg{width:15px;height:15px;fill:currentColor}
.buy-social a:hover{background:var(--green);transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}

@media(max-width:760px){
  .nav-social .social-dot:first-child{display:none}
  .social-dot{width:36px;height:36px}
  .social-dot svg{width:14px;height:14px}
  .menu-social{flex-direction:column}
  .menu-social a{justify-content:center}
  .buy-social{gap:9px}
  .buy-social a{flex:1;justify-content:center}
}