/* 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 the Cade explainer frame
   (lib/explainer.css, 2026-10-03; it was a plain 9:16 plate). 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,460px);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:50px minmax(0,1fr);column-gap:18px;align-items:start}
/* the step markers (polish 2026-10-03, owner: "1.2.3 ... mai cade, not too much"): a small comic plate, the crew kicker's
   slanted plate (.bkick path) in the step's colour, ink outline, hard shadow, the numeral in Futura PT Cond oblique */
.hw-steps i{position:relative;display:grid;place-items:center;width:50px;height:42px;margin-top:-2px;font-style:normal;color:#0B0B0B;
  filter:drop-shadow(3px 3px 0 #000);transition:transform 220ms cubic-bezier(.34,1.56,.64,1)}
.hw-steps i svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hw-steps i path{fill:var(--tone);stroke:#0B0B0B;stroke-width:2.5px;stroke-linejoin:round}
.hw-steps i b{position:relative;font-family:var(--call);font-style:oblique;font-weight:500;font-size:30px;line-height:1;padding-top:3px}
/* a thin rule in the step's colour under the title */
.hw-steps h3::after{content:"";display:block;width:56px;height:3px;margin-top:9px;background:var(--tone);transform-origin:0 50%;transform:scaleX(.7);transition:transform 260ms cubic-bezier(0,0,.2,1)}
.hw-steps li{transition:opacity 260ms ease}
/* in sync with the video: the step whose chapter is playing lights up, the others step back (opacity / transform only) */
.hw-steps[data-on] li{opacity:.5}
.hw-steps[data-on="0"] li:nth-child(1),.hw-steps[data-on="1"] li:nth-child(2),.hw-steps[data-on="2"] li:nth-child(3){opacity:1}
.hw-steps[data-on="0"] li:nth-child(1) i,.hw-steps[data-on="1"] li:nth-child(2) i,.hw-steps[data-on="2"] li:nth-child(3) i{transform:translate(-2px,-2px) rotate(-4deg) scale(1.06)}
.hw-steps[data-on="0"] li:nth-child(1) h3::after,.hw-steps[data-on="1"] li:nth-child(2) h3::after,.hw-steps[data-on="2"] li:nth-child(3) h3::after{transform:scaleX(1.3)}
@media (prefers-reduced-motion:reduce){.hw-steps i,.hw-steps h3::after,.hw-steps li{transition:none}}
.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:460px}
@media (max-width:1180px){.hw{column-gap:48px;grid-template-columns:minmax(0,1fr) minmax(0,400px)}}
@media (max-width:860px){
  .hw{grid-template-columns:minmax(0,1fr);row-gap:40px}
  .hw-vid{justify-self:center;max-width:420px;padding:0 14px}
}
@media (max-width:760px){
  .hw-steps{margin-top:26px;gap:20px}
  .hw-steps h3{font-size:25px}
  .hw-steps p{font-size:16px}
  }
/* 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%)}

/* ══ hero blend (2026-10-03, Scotty: "for the hero I think we need to blend the top hero better somehow") ═════════════
   The hero and the crew band are one opening now: no flat dark top, no contained disc, no seam.
   1 the hero no longer clips or isolates: its ground (::after) sits in main's stacking context at z -1, the same layer
     as the crew's rays and glow (comic.css .oart, .crew::after), and reaches 320px into the crew band, so the two grounds
     overlap instead of meeting at an edge.
   2 the ground is light only (radial glows, no dots): the flare's warm core around the object, a faint violet spill up
     and to the left (the burst's own violet), a faint warm spill behind the copy, and at its foot the same orange glow
     the crew band carries, so the explosion below reads as the flare landing.
   3 the nav stays legible: the ground is masked to nothing over the top 84px and only reaches full strength at 230px.
   4 the painted flare loses its disc edge: a wider box and a long, low falloff (it thins to 8% before it ends), so it
     dissolves into the glow rather than stopping. The card object still sits at its heart. ══ */
.lp main>.hero:first-child{isolation:auto;overflow:visible}
.lp main>.hero:first-child::after{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;bottom:-320px;pointer-events:none;
  background:
    radial-gradient(ellipse 34% 30% at 66% 38%,rgba(255,168,0,.17),transparent 72%),
    radial-gradient(ellipse 48% 34% at 44% 16%,rgba(150,82,239,.12),transparent 70%),
    radial-gradient(ellipse 34% 30% at 20% 34%,rgba(255,122,0,.07),transparent 70%),
    radial-gradient(ellipse 44% 26% at 72% 82%,rgba(255,168,0,.2),transparent 72%),
    radial-gradient(ellipse 70% 22% at 52% 86%,rgba(255,122,0,.07),transparent 70%);
  -webkit-mask:linear-gradient(180deg,transparent 0,transparent 84px,#000 230px);mask:linear-gradient(180deg,transparent 0,transparent 84px,#000 230px)}
.hx-art{--ax:230px;--ay:96px;
  -webkit-mask:radial-gradient(closest-side,#000 30%,rgba(0,0,0,.62) 50%,rgba(0,0,0,.26) 72%,rgba(0,0,0,.08) 88%,transparent 100%);
  mask:radial-gradient(closest-side,#000 30%,rgba(0,0,0,.62) 50%,rgba(0,0,0,.26) 72%,rgba(0,0,0,.08) 88%,transparent 100%)}
@media (max-width:1180px){.hx-art{--ax:170px}}
@media (max-width:760px){
  .hx-art{--ax:90px;--ay:70px;
    -webkit-mask:radial-gradient(closest-side,#000 44%,rgba(0,0,0,.7) 62%,rgba(0,0,0,.3) 80%,rgba(0,0,0,.08) 92%,transparent 100%);
    mask:radial-gradient(closest-side,#000 44%,rgba(0,0,0,.7) 62%,rgba(0,0,0,.3) 80%,rgba(0,0,0,.08) 92%,transparent 100%)}
  .lp main>.hero:first-child::after{bottom:-200px;
    background:
      radial-gradient(ellipse 70% 22% at 60% 62%,rgba(255,168,0,.17),transparent 72%),
      radial-gradient(ellipse 80% 18% at 30% 22%,rgba(150,82,239,.12),transparent 70%),
      radial-gradient(ellipse 80% 14% at 60% 92%,rgba(255,168,0,.14),transparent 72%);
    -webkit-mask:linear-gradient(180deg,transparent 0,transparent 64px,#000 200px);mask:linear-gradient(180deg,transparent 0,transparent 64px,#000 200px)}
}
/* the explainer cabinet takes the full phone width (its YOU and LIVE stickers reach a few px into the gutter) */
@media (max-width:420px){.hw-vid{padding:0 8px}}

/* ══ polish 2026-10-03 (owner) ══════════════════════════════════════════════════════════════════════════════════════════
   1 how it works: the cabinet fits one screen. lib/explainer.css trimmed its grid to 400 x 750; here its width is also held
     to the viewport's height (minus the nav and a margin), so marquee to base shows whole at 1440 x 900 and 1280 x 800.
   2 crew: more air above and below the band (+80px each side), and the rays out of YOU are softer: a lower opacity, a
     shorter reach and a long falloff, so they thin out before the hero and the numbers instead of meeting them. ══ */
.hw-vid{max-width:min(460px,max(300px,calc((100svh - 124px) * 400 / 756)))}
@media (max-width:1180px){.hw-vid{max-width:min(400px,max(300px,calc((100svh - 124px) * 400 / 756)))}}
@media (max-width:860px){.hw-vid{max-width:420px}}
.crew{padding:104px 0 120px}
.oart img{opacity:.8}
.oart{-webkit-mask:radial-gradient(ellipse 34% 40% at 37.5% 47%,#000 14%,rgba(0,0,0,.62) 34%,rgba(0,0,0,.26) 56%,rgba(0,0,0,.08) 74%,transparent 90%);
  mask:radial-gradient(ellipse 34% 40% at 37.5% 47%,#000 14%,rgba(0,0,0,.62) 34%,rgba(0,0,0,.26) 56%,rgba(0,0,0,.08) 74%,transparent 90%)}
.crew::after{background:radial-gradient(ellipse 32% 40% at 74% 52%,rgba(255,168,0,.15),rgba(255,168,0,.05) 50%,transparent 74%)}
@media (max-width:760px){.crew{padding:48px 0 56px}}
/* the hero's foot glow (where the flare lands on the crew) a touch lower, so the gap between the two reads as air */
@media (min-width:761px){.lp main>.hero:first-child::after{background:
    radial-gradient(ellipse 34% 30% at 66% 38%,rgba(255,168,0,.17),transparent 72%),
    radial-gradient(ellipse 48% 34% at 44% 16%,rgba(150,82,239,.12),transparent 70%),
    radial-gradient(ellipse 34% 30% at 20% 34%,rgba(255,122,0,.07),transparent 70%),
    radial-gradient(ellipse 44% 26% at 72% 84%,rgba(255,168,0,.13),transparent 72%),
    radial-gradient(ellipse 70% 22% at 52% 86%,rgba(255,122,0,.05),transparent 70%)}}

/* ══ calm ground (owner 2026-10-03: "prea mult gradient, bulele vin peste text"): no ambient colour blobs.
   The only light left is the art itself (the hero flare, the crew burst), each kept off the copy. ══ */
.lp main>.hero:first-child::after,.crew::after,#how::after{background:none!important}
.nground,.cground{background:none!important}
.lp .ctable::before{background:none!important}
/* the hero flare: a tighter falloff, never reaching the copy column */
.hx-art{-webkit-mask:radial-gradient(closest-side,#000 34%,rgba(0,0,0,.45) 58%,rgba(0,0,0,.12) 78%,transparent 92%)!important;
  mask:radial-gradient(closest-side,#000 34%,rgba(0,0,0,.45) 58%,rgba(0,0,0,.12) 78%,transparent 92%)!important}
/* the crew burst stays on YOU's side and fades before the copy */
.oart{-webkit-mask:radial-gradient(ellipse 30% 38% at 37.5% 47%,#000 14%,rgba(0,0,0,.5) 34%,rgba(0,0,0,.14) 56%,transparent 76%)!important;
  mask:radial-gradient(ellipse 30% 38% at 37.5% 47%,#000 14%,rgba(0,0,0,.5) 34%,rgba(0,0,0,.14) 56%,transparent 76%)!important}

/* phone: the pair beside the headline, stacked (YES on top, VS, NO below), filling the right of SHORT. QUICK. SPLIT. */
.duo-m{display:none}
@media (max-width:760px){
  .lp .hero .copy{position:relative}
  /* the pair lives inside the headline's height (the h1 box), never over the description */
  .duo-m{display:block;position:absolute;z-index:2;right:0;top:var(--dmt,10px);width:clamp(118px,38vw,160px);height:var(--dmh,180px);pointer-events:none}
  .duo-m .mch{position:absolute;width:52%;aspect-ratio:232/234}
  .duo-m .mch.a{right:0;top:0}
  .duo-m .mch.b{left:0;bottom:12px}
  .duo-m .ch-p{position:absolute;inset:0;display:block;animation:chBob 4.6s ease-in-out infinite alternate}
  .duo-m .mch.b .ch-p{animation-duration:5.4s;animation-delay:-2s}
  .duo-m .ch-p svg{display:block;width:100%;height:auto;overflow:visible}
  .duo-m .ch-k{position:absolute;z-index:2;left:50%;bottom:-6px;transform:translateX(-50%) rotate(-3deg);padding:3px 7px 2px;border:2px solid #0B0B0B;box-shadow:2px 2px 0 #000;
    font-family:var(--shout);font-style:italic;font-weight:800;font-size:12px;line-height:1;letter-spacing:.06em;text-transform:uppercase;color:#0B0B0B;background:var(--yes);white-space:nowrap}
  .duo-m .mch.b .ch-k{background:var(--no);color:#fff;text-shadow:1px 1px 0 #000;transform:translateX(-50%) rotate(3deg)}
  .duo-m .mvs{position:absolute;z-index:3;left:54%;top:46%;transform:translate(-50%,-50%) rotate(-8deg);margin:0;
    font-family:var(--shout);font-style:italic;font-weight:900;font-size:28px;line-height:1;color:#FAF424;-webkit-text-stroke:2px #0B0B0B;paint-order:stroke fill;text-shadow:3px 3px 0 #000}
  .lp .hx-obj .duo{display:none}
  .lp .hero .hm{padding-top:24px}
}
@media (prefers-reduced-motion:reduce){.duo-m .ch-p{animation:none}}
html.static .duo-m .ch-p{animation:none}
@media (max-width:359px){.duo-m .mvs{display:none}.duo-m .mch{width:50%}}

/* ══ brand pass 2026-10-03 (owner: "putin stilul cade ... mici lucruri bune", "mai ales ca din video mai ai branded"):
   a few devices out of gnar's explainers, used sparingly, nothing re-laid out.
   1 the section kickers are the explainers' cream question plate: #EFE9D8, an ink keyline, ink condensed caps, a hard
     shadow (a plain rectangle, as in the video). The crew band keeps its orange plate (approved).
   2 the hero's entries panel wears --clip-quiet, its keyline and hard shadow drawn on the same silhouette (as .cus).
   3 the close: the explainers' end card, the cream mark over REAL-TIME PREDICTIONS, ONLY ON CADE.MARKET. ══ */
.lp .qk{display:flex;width:fit-content;max-width:100%;margin:0 0 20px;padding:7px 12px 6px;background:var(--paper);border:1.5px solid #0B0B0B;box-shadow:4px 4px 0 #000;
  color:#0B0B0B;font-family:var(--shout);font-style:italic;font-weight:800;font-size:14px;line-height:1.1;letter-spacing:.07em;text-transform:uppercase}
.lp .qk b{font:inherit}
.lp .nums .nk.qk{order:-1;margin:0 0 18px;font-family:var(--shout);font-size:14px;letter-spacing:.07em;color:#0B0B0B}
@media (max-width:760px){.lp .qk,.lp .nums .nk.qk{font-size:12px;letter-spacing:.06em;margin-bottom:16px;box-shadow:3px 3px 0 #000}}

.lp .hx-obj .ent{border-color:transparent;background:none;box-shadow:none;filter:drop-shadow(8px 8px 0 #000)}
.lp .hx-obj .ent::before,.lp .hx-obj .ent::after{content:"";position:absolute;z-index:-1;clip-path:var(--clip-quiet);pointer-events:none}
.lp .hx-obj .ent::before{inset:-2px -2px -2px 0;background:#0B0B0B}
.lp .hx-obj .ent::after{inset:0 0 0 0;background:#0E0D0C}
@media (max-width:760px){.lp .hx-obj .ent{box-shadow:none;filter:drop-shadow(5px 5px 0 #000)}.lp .hx-obj .ent::before{inset:0 -2px -2px -2px}}

.endc{padding:40px 0 120px;text-align:center}
.endc .w{display:flex;flex-direction:column;align-items:center}
.endc-m{display:block;width:180px;height:auto;filter:drop-shadow(5px 5px 0 #000)}
.endc-l{margin:22px 0 0;font-family:var(--shout);font-style:italic;font-weight:800;font-size:clamp(24px,2.6vw,36px);line-height:1.02;letter-spacing:.01em;text-transform:uppercase;color:var(--paper);text-shadow:3px 3px 0 #000}
.endc-l em{font-style:inherit;color:var(--yellow)}
@media (max-width:760px){.endc{padding:24px 0 88px}.endc-m{width:140px}.endc-l br{display:none}}

/* ══ crew, desktop (owner 2026-10-03: "prea goala, prea spatiata; dreapta mai mare, mai putin fade circle") ══ */
@media (min-width:761px){
  .crew{padding:40px 0 56px}
  .lp .crew .bpanel{padding:16px 0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
  .crew .orbit{max-width:560px;width:100%;justify-self:center}
  /* the burst: wider, brighter, a long soft falloff instead of a tight fading disc */
  .oart img{opacity:.95}
  /* wide to the right, but the top fades out well before the hero (no hard edge, no painted dots under the demo note) */
  .oart{-webkit-mask:radial-gradient(ellipse 46% 40% at 37.5% 50%,#000 30%,rgba(0,0,0,.65) 54%,rgba(0,0,0,.25) 74%,transparent 92%),linear-gradient(180deg,transparent 18%,#000 34%,#000 80%,transparent 94%)!important;
    -webkit-mask-composite:source-in!important;
    mask:radial-gradient(ellipse 46% 40% at 37.5% 50%,#000 30%,rgba(0,0,0,.65) 54%,rgba(0,0,0,.25) 74%,transparent 92%),linear-gradient(180deg,transparent 18%,#000 34%,#000 80%,transparent 94%)!important;
    mask-composite:intersect!important}
}