/* Cade landing v3, the hero. Loaded after comic.css.
   Informational pass (2026-10-03, Scotty: "that top hero coloring and dots might need to go. if we do the background
   flare we should center the image with it. lets reduce the hero copy on the left. just title, description, CTA"):
   the hero ground is plain calm dark (no dot field); the flare now lives INSIDE the product object (.hx-obj), so its
   centre is the object's centre on both axes at every width; it fades out smoothly (no halftone dissolve) well before
   the header band; the object no longer bleeds into the right gutter, so the whole flare reads centred on it. The copy
   is the title, one line and the updates form, vertically centred against the object.
   Earlier: /archive/landing-v3-burst-2026-10-03/ (this hero before that pass). Pass 5 notes below.
   (2026-10-02, pass 5: the burst comes back, contained.)
   Owner on pass 4: "e mai clean totusi acum ... dar nu imi plac shape-urile alea ... si erau mai mari lucrurile in dreapta".
   Earlier: /archive/landing-v3-splash1-2026-10-02/ (full-bleed explosion), /archive/landing-v3-clean-2026-10-02/ (duel plates).

   1 the grid: 12 columns. The copy takes 5, the product object takes 7 and bleeds a little into the right gutter
     (about 570px of card at 1440).
   2 the art: one painted burst (assets/art/hero-burst*), contained to the object's column, centred behind the object
     so the card sits at its heart. It never reaches the header band (top 96px stays dark) or the copy column: a
     wrapper (.hx-art) fades it out on its top, left and bottom edges, and the burst itself dissolves into a halftone
     mask (a solid core, then dots, then the ground). No plates behind the card any more.
   3 the object: the category tabs sit flush on the card's top edge, the card stands straight, the entries panel is
     attached to its right at the same height (under it below 1181px).
   4 the rival pair (their battle hexagon via CadeCategory.medallion, the kit's speech bubble) docked small on the
     object's top right corner. Never near the header.
   5 motion (splash.js): transform and opacity only, nothing changes a box. html.slam hides only what is about to land.
     The burst breathes very slowly (scale only); reduced motion and ?static hold it still.
   Shapes: their battle hexagon, their bubble polygon, plain rectangles, a painted image. Nothing drawn here by hand. */

/* ── the ground ───────────────────────────────────────────────────────────────────────────────── */
.lp main>.hero:first-child{padding-top:132px;padding-bottom:120px;isolation:isolate}
.hero>.w{z-index:1}
@media (min-width:1181px){.lp .hero>.w{max-width:1360px}}
/* the ground is the page's plain dark: no dot field (2026-10-03) */

/* ── the grid: 5 + 7 ──────────────────────────────────────────────────────────────────────────── */
.lp .hero .hgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:56px;align-items:center}
.lp .hero .copy{grid-column:1/span 5;position:relative;z-index:2;min-width:0}
.lp .hero .hm{grid-column:6/-1;width:auto;max-width:none;justify-self:stretch;padding-top:56px;container-type:normal}
/* no bleed any more (2026-10-03): the object stays inside the column, so the flare around it is whole and centred */

/* ── the art: the flare, centred on the object ─────────────────────────────────────────────────── */
/* .hx-art is the object's first child: it reaches --ax past the object's sides and --ay past its top and bottom, so its
   centre IS the object's centre. Its mask is one smooth ellipse (solid core hidden under the card, a soft fade, nothing
   at its edge), no dots. The picture inside is 150% of the box, so only the painted rays show, never the art's own
   dotted fringe. The top edge sits at the object's top minus --ay: under the header band there is nothing to see */
.hx-art{--ax:150px;--ay:44px;position:absolute;z-index:-1;inset:calc(var(--ay) * -1) calc(var(--ax) * -1);pointer-events:none;overflow:hidden;
  -webkit-mask:radial-gradient(closest-side,#000 60%,rgba(0,0,0,.5) 82%,transparent 100%);mask:radial-gradient(closest-side,#000 60%,rgba(0,0,0,.5) 82%,transparent 100%)}
.hx-burst{position:absolute;inset:-25%;display:block;animation:hxBreathe 11s ease-in-out infinite alternate}
.hx-burst img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:brightness(.94) saturate(.95)}
@keyframes hxBreathe{from{transform:scale(1)}to{transform:scale(1.035)}}
@media (prefers-reduced-motion:reduce){.hx-burst{animation:none}}
html.static .hx-burst{animation:none}

/* the one description line, and the updates form's helper */
.lp .hero .sub{max-width:500px}
.lp .hero .hsign .bhelp{margin:12px 0 0;font-family:var(--data);font-weight:700;font-size:12px;line-height:1.45;letter-spacing:.02em;color:var(--meta)}
.lp .hero .hsign .msg:empty{display:none}

/* the copy as comic shout type. Each word owns a fixed line box; the slam moves it inside that box (transform only) */
.lp .hero h1{position:relative;margin-top:22px}
@media (min-width:761px){.lp .hero h1{font-size:clamp(70px,7.8vw,112px);line-height:.88}}
.lp .hero h1>span{display:block;width:fit-content;-webkit-text-stroke:4px #0B0B0B;paint-order:stroke fill;text-shadow:6px 6px 0 #000;transform-origin:0 85%}
.lp .hero h1 .o{color:var(--orange)}

/* ── the object ───────────────────────────────────────────────────────────────────────────────── */
.hx-obj{--ew:clamp(200px,16vw,232px);position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1fr) var(--ew);grid-template-rows:auto auto;align-items:stretch}
/* the tabs: the card's own tabs, flush on its top edge, over the card's width */
.lp .hx-obj .hm-tabs{position:relative;z-index:1;grid-row:1;grid-column:1;margin:0 0 -2px;gap:8px}
.lp .hx-obj .hm-tab{filter:none}
.lp .hx-obj .hm-tab b{border-bottom:0}
.lp .hm-tab:not([aria-selected=true]) b{background:#0E0D0C}

/* the card + the entries: one body */
.lp .hx-obj .hm-card{position:relative;z-index:2;grid-row:2;grid-column:1;min-width:0;container-type:inline-size}
.lp .hx-obj .ent{position:relative;z-index:1;grid-row:2;grid-column:2;margin:0;display:flex;flex-direction:column;min-width:0;padding:46px 12px 14px 14px;
  background:#0E0D0C;border:2px solid #0B0B0B;border-left:0;outline:0;box-shadow:8px 8px 0 #000}
.lp .hx-obj .ent-l{flex:none}
.lp .hx-obj .ent-f{margin-top:auto;padding-top:12px}
@media (min-width:1181px){.lp .hx-obj .ent{--step:clamp(54px,4.3vw,62px);padding-top:50px}.lp .hx-obj .ent-r{height:calc(var(--step) - 8px)}
  .lp .hx-obj .ent-n{font-size:clamp(17px,1.35vw,19px)}.lp .hx-obj .ent-a{font-size:14px}.lp .hx-obj .ent-pot b{font-size:clamp(30px,2.5vw,36px)}}

/* the note under the object */
.lp .hero .hm-cap{position:relative;z-index:1;justify-self:start;width:fit-content;max-width:none;margin:26px 0 0;padding:7px 10px 6px;background:#0E0D0C;border:0;box-shadow:none}

/* ── the pair, docked on the object's top right corner ─────────────────────────────────────────── */
.duo{position:absolute;z-index:4;right:-6px;top:-40px;width:calc(var(--ew) + 24px);height:96px;margin:0;pointer-events:none}
.hch{position:absolute;bottom:0;width:84px;aspect-ratio:232/234}
.hch.a{left:4px}
.hch.b{right:0}
.ch-p{position:absolute;inset:0;display:block;animation:chBob 4.6s ease-in-out infinite alternate}
.hch.b .ch-p{animation-duration:5.4s;animation-delay:-2s}
.ch-p svg{display:block;width:100%;height:auto;overflow:visible}
@keyframes chBob{from{transform:translateY(-2px) rotate(-1.5deg)}to{transform:translateY(3px) rotate(1.5deg)}}
.ch-k{position:absolute;z-index:2;left:50%;bottom:-8px;transform:translateX(-50%) rotate(-3deg);padding:3px 8px 2px;border:2px solid #0B0B0B;box-shadow:2px 2px 0 #000;
  font-family:var(--shout);font-style:italic;font-weight:800;font-size:13px;line-height:1;letter-spacing:.06em;text-transform:uppercase;color:#0B0B0B;background:var(--yes);white-space:nowrap}
.hch.b .ch-k{background:var(--no);color:#fff;text-shadow:1px 1px 0 #000;transform:translateX(-50%) rotate(3deg)}
.duo-vs{position:absolute;z-index:3;left:50%;top:56%;transform:translate(-50%,-50%) rotate(-6deg);margin:0;
  font-family:var(--shout);font-style:italic;font-weight:900;font-size:36px;line-height:1;color:#FAF424;-webkit-text-stroke:2.5px #0B0B0B;paint-order:stroke fill;text-shadow:3px 3px 0 #000}
.duo .cm-tag{--cm-fs:15px;bottom:calc(100% - 4px);padding:.28em .55em .5em;z-index:5;white-space:nowrap}
.duo .hch.a .cm-tag{left:40%}
.duo .hch.b .cm-tag{left:58%}
.duo .cm-tag[data-tone=cream]{--cm-face:#EFE9D8}
.hch.swap .ch-p{animation:chIn 340ms cubic-bezier(.34,1.56,.64,1) both,chBob 4.6s ease-in-out 340ms infinite alternate}
@keyframes chIn{from{opacity:0;transform:scale(.4) rotate(-14deg)}}

/* ── the opening: what waits for its beat (only while html.slam; splash.js lifts it, 2.4s at most). Opacity only ── */
html.slam .hero h1>span,html.slam .hx-obj,html.slam .hch,html.slam .duo-vs,html.slam .hx-art{opacity:0}
.sp-wait{opacity:0}
@media (prefers-reduced-motion:reduce){.ch-p,.hch.swap .ch-p{animation:none}}
html.static .ch-p,html.static .hch.swap .ch-p{animation:none}

/* ── responsive ───────────────────────────────────────────────────────────────────────────────── */
/* 1180 and under: the entries go under the chart, attached to the card's foot; the pair docks above the tabs */
@media (max-width:1180px){
  .lp .hero .hm{padding-top:96px}
  .hx-obj{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto}
  .lp .hx-obj .ent{grid-row:3;grid-column:1;margin-top:-2px;padding:14px 14px 12px;border-left:2px solid #0B0B0B;border-top:0}
  /* the object is tall here (the entries under the card): the copy starts level with the card's tabs, so the form
     stays in the first screen; the flare reaches less far sideways, so it stays off the copy */
  .hx-art{--ax:56px}
  .duo{top:auto;bottom:calc(100% + 10px);right:-6px;width:230px}
}
@media (max-width:1180px) and (min-width:961px){
  .lp .hero .copy{align-self:start;padding-top:136px}
  /* the copy column is narrow here: the email field takes the line, the button goes under it */
  .lp .hsign .brow{flex-wrap:wrap;gap:14px}
  .lp .hsign .bfield{flex:1 1 100%}
}
/* one column (a tablet): the copy, then the object */
@media (max-width:959px){
  .lp .hero .hgrid{grid-template-columns:minmax(0,1fr);row-gap:24px}
  .lp .hero .copy,.lp .hero .hm{grid-column:1/-1}
  .lp .hero .hm{max-width:620px}
}
@media (max-width:760px){
  .lp main>.hero:first-child{padding-top:96px;padding-bottom:56px}
  .lp .hero h1{margin-top:18px}
  .lp .hero h1>span{-webkit-text-stroke:3px #0B0B0B;text-shadow:4px 4px 0 #000}
  .lp .hero .hm{padding-top:92px}
  .hx-art{--ax:72px;--ay:64px}
  .lp .hx-obj .hm-tabs{gap:6px}
  .lp .hx-obj .ent{box-shadow:5px 5px 0 #000;padding:12px 10px 10px}
  .duo{right:-4px;width:172px;height:70px;bottom:calc(100% + 6px)}
  .hch{width:62px}
  .ch-k{font-size:11px;padding:3px 6px 2px;bottom:-6px}
  .duo-vs{font-size:26px;-webkit-text-stroke:2px #0B0B0B}
  .duo .cm-tag{--cm-fs:13px}
  .lp .hero .hm-cap{margin:22px 0 0}
}
@media (max-width:374px){
  .duo{width:150px}
  .hch{width:56px}
}

/* ══ the rest of the page, lifted in the same spirit ═════════════════════════════════════════════ */
/* ── crew: the friends are characters (their battle hexagon carrying a painted avatar), a handle tag under each;
      a fee coin travels to YOU and YOU answers with the kit's bubble (splash.js) ── */
.crew .orbit{max-width:420px}
.crew .fr{width:25cqw;height:25cqw;margin:-12.5cqw 0 0 -12.5cqw;filter:none}
.crew .fr i::before,.crew .fr i::after{display:none}
.crew .fr i{display:block;font-size:0}
.frp{position:absolute;inset:0;display:block}
.frp svg{display:block;width:100%;height:auto;overflow:visible}
.frh{position:absolute;left:50%;bottom:-4%;transform:translateX(-50%) rotate(-3deg);padding:3px 7px 2px;background:#EFE9D8;border:2px solid #0B0B0B;box-shadow:2px 2px 0 #000;
  font-family:var(--data);font-style:normal;font-weight:800;font-size:11px;line-height:1;color:#0B0B0B;white-space:nowrap}
.crew .fr.send .frh{background:var(--yellow)}
.crew .oyou{z-index:4}
.oyou .cm-tag{--cm-fs:15px;z-index:6}

/* ── numbers: the count lands with a stamp (splash.js): the burst pops, the figure knocks, rings go out ── */
.nfig>div{--pop:1}
.nfig .cm-ring{border-width:3px}

/* ── how it works: each step opens with a comic narration box and a character who reacts when the step plays ── */
.cpanel{--kap-tilt:-2deg}
.kap{position:absolute;z-index:4;left:-6px;top:-30px;margin:0;padding:5px 10px 4px;background:var(--yellow);border:2px solid #0B0B0B;box-shadow:3px 3px 0 #000;transform:rotate(var(--kap-tilt));
  font-family:var(--shout);font-style:italic;font-weight:800;font-size:14px;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:#0B0B0B;pointer-events:none}
.cpanel:nth-child(2) .kap{--kap-tilt:1.5deg;background:#EFE9D8}
.cpanel:nth-child(3) .kap{--kap-tilt:-1deg;background:var(--orange)}
.react{position:absolute;z-index:4;right:2px;top:-18px;width:76px;aspect-ratio:232/234;pointer-events:none}
.react>span{display:block;animation:chBob 5s ease-in-out infinite alternate}
.cpanel:nth-child(2) .react>span{animation-delay:-1.6s}.cpanel:nth-child(3) .react>span{animation-delay:-3.2s}
.react svg{display:block;width:100%;height:auto;overflow:visible}
.react .cm-tag{--cm-fs:14px;left:20%}
.strip{padding-top:30px}
@media (prefers-reduced-motion:reduce){.react>span{animation:none}}
html.static .react>span{animation:none}

/* ── compare: a comic VERSUS. Our column is stamped CADE on their starburst; a VS slams on the seam ── */
.lp .ctag{left:auto;right:-46px;top:-78px;width:168px;height:126px;padding:0;display:grid;place-items:center;background:none;clip-path:none;
  transform:rotate(-8deg);filter:drop-shadow(5px 5px 0 #000);z-index:3}
.lp .ctag::before{content:"";position:absolute;inset:0;background:var(--yellow);clip-path:var(--clip-burst)}
.lp .ctag::after{content:"";position:absolute;inset:6px;background:var(--orange);clip-path:var(--clip-burst)}
.lp .ctag img{position:relative;z-index:1;height:38px;width:auto}
.cvsb{position:absolute;z-index:3;top:-58px;left:calc(220px + (100% - 220px)*2/3);transform:translate(-50%,0) rotate(-8deg);margin:0;pointer-events:none;
  font-family:var(--shout);font-style:italic;font-weight:900;font-size:64px;line-height:1;color:#FAF424;-webkit-text-stroke:3px #0B0B0B;paint-order:stroke fill;text-shadow:5px 5px 0 #000}
@media (max-width:760px){
  .cvsb{display:none}
  .cvs-k{font-family:var(--shout)!important;font-style:italic;font-weight:900!important;font-size:24px!important;letter-spacing:.02em!important;color:var(--yellow)!important;text-shadow:2px 2px 0 #000}
  .kap{font-size:13px;top:-26px}
  .react{width:64px;top:-14px;right:44px}
}
html.static .ospin,html.static .fr i{animation:none}

/* ══ fewer dots (2026-10-03, Scotty: "lets reduce the 'dots' texture, way too much of that") ═════════════════════
   Gone: the page-wide house pattern (hexes + halftone) under main, the numbers band's dot field, the compare band's dot
   field, the hero's dot field and the burst's halftone dissolve. The grounds keep their soft glows on plain dark.
   Kept, as the one comic accent: the starburst halftone shadows under the three figures (comic.css .nfig>div::before).
   The crew rays art carries painted halftone in its far rays: its mask is held tighter around YOU so little of it shows. */
.lp main::before{content:none}
.nground{background:radial-gradient(ellipse 22% 42% at 20% 58%,rgba(145,187,79,.16),transparent 70%),radial-gradient(ellipse 24% 46% at 50% 58%,rgba(255,168,0,.15),transparent 70%),radial-gradient(ellipse 24% 46% at 80% 58%,rgba(150,82,239,.2),transparent 70%)}
.cground{background:radial-gradient(ellipse 40% 40% at 78% 64%,rgba(150,82,239,.14),transparent 70%)}
.oart{-webkit-mask:radial-gradient(ellipse 40% 44% at 37.5% 47%,#000 26%,rgba(0,0,0,.5) 54%,transparent 76%);mask:radial-gradient(ellipse 40% 44% at 37.5% 47%,#000 26%,rgba(0,0,0,.5) 54%,transparent 76%)}

/* ══ how it works, two panels (2026-10-03, Scotty: "lets use gnars video there as a sample instead with 2 panel, left info
   and then the video"). Left: the heading and the three steps in words; right: the explainer in a plain 9:16 plate (ink
   keyline, hard shadow, no device drawing). The left column is centred on the video's height ═══════════════════════════ */
#how::after{background:radial-gradient(ellipse 26% 40% at 28% 55%,rgba(145,187,79,.10),transparent 70%),radial-gradient(ellipse 22% 44% at 72% 52%,rgba(255,168,0,.14),transparent 70%)}
.hw{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);column-gap:72px;align-items:center}
.hw-info{min-width:0}
.hw-info .h2{margin:0}
.hw-steps{list-style:none;margin:36px 0 0;padding:0;display:flex;flex-direction:column;gap:26px;max-width:560px}
.hw-steps li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:18px;align-items:start}
.hw-steps i{display:grid;place-items:center;width:44px;height:44px;background:#0B0B0B;border:2px solid var(--tone);box-shadow:3px 3px 0 #000;color:var(--yellow);
  font-family:var(--data);font-style:normal;font-weight:800;font-size:19px}
.hw-steps h3{margin:2px 0 0;font-family:var(--shout);font-style:italic;font-weight:800;font-size:30px;line-height:1;text-transform:uppercase;color:var(--paper);text-shadow:3px 3px 0 #000}
.hw-steps p{margin:8px 0 0;font-family:var(--read);font-size:17px;line-height:1.5;color:#d9d3c3;text-wrap:pretty}
.hw-info .note{margin-top:30px}
.hw-vid{margin:0;justify-self:end;width:100%;max-width:400px}
.vplate{position:relative;aspect-ratio:9/16;background:#0E0D0C;border:3px solid #0B0B0B;outline:1px solid rgba(240,234,217,.14);box-shadow:10px 10px 0 #000}
.vv{display:block;width:100%;height:100%;object-fit:cover;background:#0E0D0C}
.vmute{position:absolute;z-index:2;top:12px;right:12px;min-width:44px;height:44px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;
  background:#EFE9D8;color:#0B0B0B;border:2px solid #0B0B0B;box-shadow:3px 3px 0 #000;cursor:pointer;
  font-family:var(--data);font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.vmute[data-on=true]{background:var(--yellow)}
.vmute:hover{background:var(--yellow)}
.vmute:focus-visible{outline:3px solid #FFA800;outline-offset:3px}
.vmute b{font-weight:inherit}
.hw-vid figcaption{margin:18px 0 0;font-family:var(--data);font-weight:700;font-size:12px;line-height:1.5;letter-spacing:.04em;color:var(--meta)}
@media (max-width:1180px){.hw{column-gap:48px;grid-template-columns:minmax(0,1fr) minmax(0,340px)}}
@media (max-width:860px){
  .hw{grid-template-columns:minmax(0,1fr);row-gap:40px}
  .hw-vid{justify-self:center;max-width:360px}
}
@media (max-width:760px){
  .hw-steps{margin-top:26px;gap:20px}
  .hw-steps h3{font-size:25px}
  .hw-steps p{font-size:16px}
  .vplate{box-shadow:6px 6px 0 #000}
}
/* the compare band's speed field: its painted halftone sits in two corners; an ellipse mask keeps only the streaks */
.sfield{-webkit-mask:radial-gradient(ellipse 50% 50% at 50% 50%,#000 30%,rgba(0,0,0,.5) 60%,transparent 88%);mask:radial-gradient(ellipse 50% 50% at 50% 50%,#000 30%,rgba(0,0,0,.5) 60%,transparent 88%)}