/* Cade landing v3, the comic book pass (2026-10-02), second pass "blend + motion" (owner, same day: not every section in a
   box, blend it into one comic world, motion as promised to Scotty, the numbers more WOW). Loaded after landing.css.
   Earlier passes: /archive/landing-v3-plain-2026-10-02/, /archive/landing-v3-comic1-2026-10-02/.
   ONE framed moment: the hero panel. Everything under it is open ground that runs on without seams:
   1 hero: the framed comic panel (their landing hero-panel-face silhouette), the painted burst breathing very slowly,
     three of the kit's coins drifting; the headline slams in word by word (CadeMotion.slamIn)
   2 crew: no box; the generated orange rays explode out of YOU and bleed up under the hero panel and down into the numbers
   3 numbers: three comic numerals straight on the ground, each on their starburst (packages/shapes) in its own colour with a
     halftone shadow; they roll up on view (CadeMotion.rollIn)
   4 how it works: the three steps open on the ground, a glow in each step's tone, the caption box kept; their animations kept
   5 compare: the generated speed field runs behind the seam, a halftone ground fades out under the table
   Grounds are section pseudo elements that reach past their section's edges (z-index -1 in main), so the seams overlap.
   Shapes: their hero-panel-face path, starburst, --clip-quiet, plain rectangles. Nothing drawn here by hand. */

:root{--pk:1;
  /* their starburst (packages/shapes, lib/cade-shapes.js), as a share of the box */
  --clip-burst:polygon(76.96% 15.82%,68.58% 0.65%,57.99% 18.01%,48.92% 0%,39.78% 21.01%,33.76% 5.83%,25.42% 21.43%,4.99% 17.72%,12.17% 38.54%,0% 51.54%,10.43% 61.88%,4.58% 76.64%,22.61% 80.52%,31% 100%,41.48% 83.43%,47.48% 99.65%,55.78% 81.8%,65.96% 97.17%,73.75% 78.49%,92.45% 84.33%,85.47% 67.52%,99.18% 65.05%,91.2% 53.02%,100% 37.99%,84.74% 30.57%,91.29% 13.45%);
  /* their landing hero panel (landing/figma/cade-landing/hero-panel-face.svg, 1357x797), corners kept at their
     own size (x --pk), the long edges and the two mid notches as a share of the box */
  --clip-panel:polygon(calc(var(--pk) * 2.5px) calc(var(--pk) * 34.1px),calc(var(--pk) * 36.5px) calc(var(--pk) * 5.7px),calc(var(--pk) * 64.5px) calc(var(--pk) * 23.8px),calc(var(--pk) * 94.5px) calc(var(--pk) * 3.1px),40% calc(var(--pk) * 8.3px),42% calc(var(--pk) * 0.5px),45% calc(var(--pk) * 8.3px),calc(100% - var(--pk) * 96.5px) calc(var(--pk) * 3.1px),calc(100% - var(--pk) * 64.5px) calc(var(--pk) * 26.4px),calc(100% - var(--pk) * 30.5px) calc(var(--pk) * 5.7px),calc(100% - var(--pk) * 2.5px) calc(var(--pk) * 39.3px),calc(100% - var(--pk) * 0.5px) calc(100% - var(--pk) * 39.3px),calc(100% - var(--pk) * 40.5px) calc(100% - var(--pk) * 8.3px),calc(100% - var(--pk) * 70.5px) calc(100% - var(--pk) * 28.9px),calc(100% - var(--pk) * 104.5px) calc(100% - var(--pk) * 5.7px),60% calc(100% - var(--pk) * 8.3px),58% calc(100% - var(--pk) * 0.5px),55% calc(100% - var(--pk) * 8.3px),calc(var(--pk) * 104.5px) calc(100% - var(--pk) * 3.1px),calc(var(--pk) * 68.5px) calc(100% - var(--pk) * 26.4px),calc(var(--pk) * 34.5px) calc(100% - var(--pk) * 5.7px),calc(var(--pk) * 0.5px) calc(100% - var(--pk) * 36.7px));
  /* their panelTornB (packages/shapes, the question panel), as styles.css --tear-wide carries it */
  --clip-tear:polygon(1.72% 94.26%,0% 82.61%,1.51% 65.76%,0% 48.22%,3.4% 34.16%,0% 18.81%,1.72% 4.83%,8.89% 4.83%,29.46% 10.84%,27.97% 4.83%,67.58% 4.83%,66.38% 0%,89.41% 4.83%,98.55% 4.84%,97.73% 23.96%,100% 50%,97.66% 72.81%,98.55% 94.26%,75.52% 87.53%,77.19% 94.26%,49.31% 94.26%,50.74% 100%,31.08% 94.26%)}

/* ── 1 hero: the framed comic panel ─────────────────────────────────────────────────────────────── */
.lp main>.hero:first-child{padding-top:138px;padding-bottom:72px}
.hpanel{position:absolute;z-index:0;left:max(16px,calc(50% - 692px));right:max(16px,calc(50% - 692px));top:86px;bottom:24px;pointer-events:none;
  filter:drop-shadow(10px 10px 0 #000)}
.hpanel>div{position:absolute;clip-path:var(--clip-panel)}
.hp-k{inset:0;background:rgba(240,234,217,.34)}          /* the paper hairline outside the ink */
.hp-f{inset:2px;background:#0B0B0B}                       /* the ink keyline, 4px as their outline */
.hp-a{inset:6px;background:#121110;overflow:hidden}
/* the client's grey mascot wall stays, only on the calm left, faint */
.hp-a .hbg{position:absolute;inset:0;background:url(/ds/assets/art/stage-bg.jpg) left center/auto 120% no-repeat;opacity:.16;filter:grayscale(1);
  -webkit-mask:linear-gradient(90deg,#000 0,#000 30%,transparent 52%);mask:linear-gradient(90deg,#000 0,#000 30%,transparent 52%)}
.hp-a .hbg i{display:none}
/* the painted burst (generated 2026-10-02, their palette): behind the card, the left kept dark for the copy */
.hburst,.hburst img{position:absolute;inset:0;display:block;width:100%;height:100%}
.hburst img{object-fit:cover;object-position:100% 50%}
.hburst img{filter:brightness(.86) saturate(.92)}
.hp-shade{position:absolute;inset:0;background:linear-gradient(90deg,#121110 0,#121110 30%,rgba(18,17,16,.9) 37%,rgba(18,17,16,.35) 46%,transparent 54%),
  linear-gradient(0deg,rgba(18,17,16,.55),transparent 22%)}
/* everything that sits on the burst wears a solid plate */
.lp .ent{background:#0E0D0C;border:2px solid #0B0B0B;outline:1px solid rgba(240,234,217,.14);box-shadow:6px 6px 0 #000;padding:14px 12px 12px}
.lp .hm-row{grid-template-columns:minmax(0,480px) 238px}
.lp .hm-cap{justify-self:end;width:fit-content;max-width:714px;margin:22px 0 0 auto;padding:8px 12px 7px;background:#0E0D0C;border:2px solid #0B0B0B;box-shadow:4px 4px 0 #000}
.lp .hm-cap>*{grid-area:1/1}
.lp .hm-tab:not([aria-selected=true]) b{background:#0E0D0C}

/* hero motion: the burst breathes (very slow), the coins drift; nothing scroll-linked */
.hburst img{transform-origin:72% 50%;animation:hbreathe 16s ease-in-out infinite alternate}
@keyframes hbreathe{from{transform:scale(1)}to{transform:scale(1.045) rotate(.4deg)}}
.hcoin{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);z-index:1;
  filter:drop-shadow(2px 2px 0 #0B0B0B);animation:hdrift var(--d,8s) ease-in-out var(--dl,0s) infinite alternate}
.hcoin b{position:absolute;inset:0;border-radius:50%;background:#FFA800;border:2px solid #0B0B0B;box-shadow:inset 0 0 0 3px #FAF424}
@keyframes hdrift{from{transform:translate(0,-5px) rotate(-8deg)}to{transform:translate(3px,6px) rotate(10deg)}}
.hstk .tk{animation:hdrift 7s ease-in-out infinite alternate}
.hstk .tk:nth-child(2){animation-duration:9s;animation-delay:-3s}.hstk .tk:nth-child(3){animation-duration:8s;animation-delay:-5s}
/* the headline slam: words wait (only while html.slam, set in the head when motion is on; dropped after 2.5s at most) */
html.slam .hero h1>span{opacity:0}
@media (prefers-reduced-motion:reduce){.hburst img,.hcoin,.hstk .tk{animation:none}}
html.static .hburst img,html.static .hcoin,html.static .hstk .tk{animation:none}

/* ── the one ground: main paints every section's ground under its content; no hairline breaks ─────── */
.lp main{isolation:isolate}
.lp .sec::before{display:none}
.lp .sec,.crew{position:relative}

/* ── 2 crew: open ground, the rays out of YOU ──────────────────────────────────────────────────── */
.crew{padding:24px 0 40px}
.crew .jwrap{filter:none}
.crew .bpanel{background:none;clip-path:none;overflow:visible;padding:40px 0 40px;color:var(--paper);grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.crew .bpanel::before{display:none}
.crew .bcopy{z-index:2}
.crew .bkick{background:none;color:#0B0B0B;box-shadow:none;filter:drop-shadow(3px 3px 0 #000)}
.crew .bkick>svg path{fill:var(--orange);stroke:#0B0B0B}
.crew .bh{color:var(--paper);text-shadow:4px 4px 0 #000}
.crew .bh em{font-style:inherit;color:var(--orange)}
.crew .bbody{color:#d9d3c3}
.crew .bhint{color:var(--meta)}
.crew .bgo{color:#0B0B0B}
.crew .bgo:focus-visible{outline-color:#FFA800}
.crew .orbit{z-index:auto;max-width:360px}
.crew .oring circle{stroke:#EFE9D8;stroke-width:.5;opacity:.55}
.crew .orbit::before{display:none}
/* the art sits on main's ground (z -1): under the hero panel, over nothing else; its burst point is YOU */
.oart{position:absolute;z-index:-1;left:50%;top:50%;width:1760px;max-width:none;transform:translate(-37.5%,-47%);pointer-events:none;
  -webkit-mask:radial-gradient(ellipse 58% 52% at 37.5% 47%,#000 30%,rgba(0,0,0,.55) 58%,transparent 80%);mask:radial-gradient(ellipse 58% 52% at 37.5% 47%,#000 30%,rgba(0,0,0,.55) 58%,transparent 80%)}
.oart img{display:block;width:100%;height:auto;opacity:.92}
/* the ground under the copy stays dark: the rays are kept to YOU's side */
.crew::after{content:"";position:absolute;z-index:-1;top:-160px;bottom:-200px;left:0;right:0;pointer-events:none;
  background:radial-gradient(ellipse 34% 46% at 74% 52%,rgba(255,168,0,.20),transparent 70%)}

/* ── 3 numbers: comic numerals on the ground ───────────────────────────────────────────────────── */
.lp .sec.nums{padding:72px 0 96px}
.nground{position:absolute;z-index:-1;top:-120px;bottom:-140px;left:0;right:0;pointer-events:none;
  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%),
    radial-gradient(circle,#2A2522 1.6px,transparent 2.2px) 0 0/12px 12px;
  -webkit-mask:linear-gradient(180deg,transparent,#000 26%,#000 74%,transparent);mask:linear-gradient(180deg,transparent,#000 26%,#000 74%,transparent)}
.nhd{display:flex;flex-direction:column;align-items:center;text-align:center}
.nums .h2{margin:0;font-size:clamp(48px,5.4vw,78px);text-shadow:4px 4px 0 #000}
.nums .nk{order:-1;margin:0 0 14px;font-size:12px;letter-spacing:.14em;color:var(--meta)}
.nfig{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:56px 0 0}
.nfig>div{position:relative;isolation:isolate;display:flex;flex-direction:column-reverse;align-items:center;justify-content:center;min-height:300px;padding:0;margin:0;border:0}
/* the burst: their starburst (packages/shapes) in the figure's colour with an ink keyline (.nb), and a halftone copy of it
   as its shadow (::before) */
.nfig>div::before,.nb{position:absolute;z-index:-1;left:50%;top:44%;width:300px;height:250px;margin:-125px 0 0 -150px;transform:rotate(var(--r));pointer-events:none}
.nfig>div::before{content:"";z-index:-2;translate:16px 16px;background:radial-gradient(circle,var(--b) 2px,transparent 2.6px) 0 0/9px 9px;clip-path:var(--clip-burst)}
.nb{filter:drop-shadow(3px 0 0 #0B0B0B) drop-shadow(-3px 0 0 #0B0B0B) drop-shadow(0 3px 0 #0B0B0B) drop-shadow(0 -3px 0 #0B0B0B)}
.nb::before{content:"";position:absolute;inset:0;background:var(--b);clip-path:var(--clip-burst)}
.nfig dd{position:relative;margin:0;padding:0;font-family:var(--shout);font-style:italic;font-weight:900;font-size:clamp(64px,7.4vw,112px);line-height:.9;color:var(--paper);
  font-variant-numeric:tabular-nums;background:none;-webkit-text-stroke:5px #0B0B0B;paint-order:stroke fill;text-shadow:6px 6px 0 #0B0B0B;letter-spacing:.01em}
.nfig dt{position:relative;margin:14px 0 0;padding:5px 12px 4px;background:#0B0B0B;font-family:var(--data);font-weight:800;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper);box-shadow:3px 3px 0 #000}
.nums .nlede{margin:28px auto 0;max-width:520px;text-align:center;font-size:15px;color:var(--meta)}

/* ── 4 how it works: open steps on the ground ─────────────────────────────────────────────────── */
#how::after{content:"";position:absolute;z-index:-1;top:-80px;bottom:-160px;left:0;right:0;pointer-events:none;
  background:radial-gradient(ellipse 18% 34% at 22% 58%,rgba(145,187,79,.12),transparent 70%),radial-gradient(ellipse 18% 34% at 50% 58%,rgba(150,82,239,.18),transparent 70%),radial-gradient(ellipse 18% 34% at 78% 58%,rgba(255,168,0,.13),transparent 70%)}
.strip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;align-items:stretch}
.cpanel{position:relative;isolation:isolate;display:flex;flex-direction:column;min-width:0;background:none;border:0;box-shadow:none}
/* each step's ground: their rays in its tone, faint, and halftone, both fading out before the words */
.cpanel::before,.cpanel::after{content:"";position:absolute;z-index:-1;inset:-10px -20px 30% -20px;pointer-events:none}
.cpanel::before{background:radial-gradient(circle,#2E2925 1.4px,transparent 2px) 0 0/10px 10px;
  -webkit-mask:radial-gradient(ellipse 60% 60% at 50% 50%,#000 30%,transparent 75%);mask:radial-gradient(ellipse 60% 60% at 50% 50%,#000 30%,transparent 75%)}
.cpanel::after{background:url(assets/art/rays-orange.svg) 50% 50%/900px 900px no-repeat;opacity:.5;
  -webkit-mask:radial-gradient(ellipse 52% 48% at 50% 50%,#000 25%,transparent 80%);mask:radial-gradient(ellipse 52% 48% at 50% 50%,#000 25%,transparent 80%)}
.cpanel:nth-child(2)::after{background-image:url(assets/art/rays-violet.svg);opacity:.8}
/* the caption box, as a comic panel opens */
.cap{position:relative;z-index:3;align-self:flex-start;display:flex;align-items:center;gap:12px;margin:0;padding:10px 18px 9px 10px;
  background:#EFE9D8;border:3px solid #0B0B0B;color:#0B0B0B;box-shadow:5px 5px 0 #000;transition:background-color .25s}
.cap i{display:grid;place-items:center;width:32px;height:32px;flex:none;background:#0B0B0B;color:var(--yellow);font-family:var(--data);font-style:normal;font-weight:800;font-size:17px}
.cap h3{margin:0;font-family:var(--shout);font-style:italic;font-weight:800;font-size:28px;line-height:.95;text-transform:uppercase;white-space:nowrap}
.cpanel.on .cap{background:var(--yellow)}
.lp .cpanel .sart.stg{flex:1;--dw:22px;--dh:10px;--fh:86px;--lh:30px;--mh:44px;--stamp-fs:22px;padding:22px 0 18px;min-height:0;overflow:visible;transition:opacity .3s}
.strip.play .cpanel:not(.on) .sart{opacity:.6}
.cpanel .stw{gap:12px}
.cpanel .qplate{font-size:19px;padding:8px 12px 6px;box-shadow:3px 3px 0 #000}
.cpanel .ptbl,.cpanel .pyrow{gap:12px}
.cpanel .lip{padding:0 10px}.cpanel .lip b{font-size:18px;letter-spacing:.1em}.cpanel .lip .amt{font-size:13px}
.cpanel .pot{box-shadow:4px 4px 0 #000}
.cpanel .stg .cm-pays{--cm-fs:11px}
.cpanel .stg .cm-tag{--cm-fs:12px}
.cpanel .mtrs{gap:10px;margin-top:24px}
.cpanel .mh{font-size:11px;letter-spacing:0}
.cpanel .mv{font-size:19px}
/* the words sit on the plain ground under the picture, a short ink rule in the step's tone above them */
.ctext{position:relative;z-index:2;margin:0;padding:16px 0 0;border-top:3px solid var(--tone);font-family:var(--read);font-size:16px;line-height:1.5;color:#d9d3c3;text-wrap:pretty}
@media (prefers-reduced-motion:reduce){.cap,.lp .cpanel .sart.stg{transition:none}}

/* ── 5 compare: the speed field behind the seam, the halftone gone under the rows ──────────────── */
.cground{position:absolute;z-index:-1;inset:-260px 0 0 0;pointer-events:none;overflow:hidden;
  background:radial-gradient(ellipse 40% 40% at 78% 64%,rgba(150,82,239,.14),transparent 70%),radial-gradient(circle,#2E2925 1.7px,transparent 2.3px) 0 0/14px 14px;
  -webkit-mask:linear-gradient(180deg,transparent,#000 22%,#000 70%,transparent);mask:linear-gradient(180deg,transparent,#000 22%,#000 70%,transparent)}
.sfield{position:absolute;left:50%;top:0;width:max(1600px,100%);transform:translateX(-50%);opacity:.42;
  -webkit-mask:linear-gradient(180deg,transparent,#000 30%,#000 55%,transparent 85%);mask:linear-gradient(180deg,transparent,#000 30%,#000 55%,transparent 85%)}
.sfield img{display:block;width:100%;height:auto}
#compare>.w{z-index:auto}
/* under the rows the ground is solid and calm, with soft edges (no box) */
.lp .ctable::before{content:"";position:absolute;z-index:-1;top:-30px;bottom:-30px;left:-60px;right:calc((100% - 220px)/3 - 20px);background:radial-gradient(ellipse 60% 60% at 50% 50%,#0E0D0C 62%,rgba(14,13,12,0) 100%);border:0;box-shadow:none}

/* ── responsive ────────────────────────────────────────────────────────────────────────────────── */
@media (max-width:1180px){
  .lp .hm-row{grid-template-columns:minmax(0,1fr)}
  .lp .ent{margin-top:22px}
  .crew .bpanel{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1100px){.nfig dd{font-size:clamp(52px,7vw,80px)}.nfig>div::before,.nb{width:240px;height:200px;margin:-100px 0 0 -120px}.nfig>div{min-height:250px}}
@media (max-width:999px){
  .strip{grid-template-columns:minmax(0,1fr);max-width:560px;gap:56px}
}
@media (max-width:1180px) and (min-width:960px){
  .hp-shade{background:linear-gradient(90deg,#121110 0,#121110 44%,rgba(18,17,16,.88) 49%,rgba(18,17,16,.3) 54%,transparent 58%),linear-gradient(0deg,rgba(18,17,16,.55),transparent 22%)}
}
@media (max-width:960px){.hpanel{top:72px}}
/* one column (a tablet): the copy runs full width, so the burst sits below it, behind the card */
@media (max-width:959px) and (min-width:761px){
  .hburst{inset:auto 0 0 0;height:72%}
  .hburst img{object-position:62% 40%}
  .hp-shade{background:linear-gradient(180deg,#121110 0,#121110 33%,rgba(18,17,16,.6) 38%,transparent 46%),linear-gradient(0deg,rgba(18,17,16,.5),transparent 18%)}
  .hp-a .hbg{-webkit-mask:linear-gradient(180deg,#000 0,#000 22%,transparent 34%);mask:linear-gradient(180deg,#000 0,#000 22%,transparent 34%)}
  .hcoin{display:none}
}
@media (max-width:760px){
  :root{--pk:.5}
  .lp main>.hero:first-child{padding-top:96px;padding-bottom:44px}
  .hpanel{left:6px;right:6px;top:66px;bottom:14px;filter:drop-shadow(5px 5px 0 #000)}
  .hp-a{inset:5px}
  .hp-f{inset:2px}
  .hp-a .hbg{background-position:right -40px top 0;background-size:auto 520px;opacity:.14;
    -webkit-mask:linear-gradient(180deg,#000 0,#000 25%,transparent 40%);mask:linear-gradient(180deg,#000 0,#000 25%,transparent 40%)}
  /* a phone: the burst goes up behind the headline's tickets (the card below already fills the screen) */
  .hburst{inset:0 0 auto 0;height:380px;-webkit-mask:linear-gradient(180deg,#000 0,#000 120px,transparent 205px);mask:linear-gradient(180deg,#000 0,#000 120px,transparent 205px)}
  .hburst img{inset:auto;position:absolute;left:calc(100% - 44px - 347px);top:-74px;width:560px;max-width:none;height:auto;object-fit:fill}
  .hp-shade{background:linear-gradient(90deg,#121110 0,rgba(18,17,16,.92) 34%,rgba(18,17,16,.45) 56%,transparent 72%)}
  .hcoin{display:none}
  .lp .ent{padding:12px 10px 10px}
  .lp .hm-cap{justify-self:stretch;width:auto}
  .crew{padding:8px 0 16px}
  .lp .crew .bpanel{padding:28px 0 20px;gap:8px}
  .lp .crew .orbit{max-width:230px;margin-top:8px}
  .oart{width:980px}
  .lp .sec.nums{padding:52px 0 64px}
  .nfig{grid-template-columns:minmax(0,1fr);gap:4px;margin-top:22px}
  /* a phone: one row per figure, the numeral on its burst at the left, the label beside it */
  .nfig>div{flex-direction:row-reverse;justify-content:flex-end;align-items:center;gap:16px;min-height:96px;padding-left:18px}
  .nfig>div::before,.nb{left:0;top:50%;width:var(--bw,190px);height:92px;margin:-46px 0 0 0}
  .nfig>div:nth-child(1){--bw:96px}.nfig>div:nth-child(2){--bw:200px}.nfig>div:nth-child(3){--bw:226px}
  .nfig>div::before{translate:8px 8px;background-size:7px 7px}
  .nfig dd{font-size:clamp(44px,14vw,60px);-webkit-text-stroke:4px #0B0B0B;text-shadow:4px 4px 0 #0B0B0B}
  .nfig dt{margin:0;font-size:11px;letter-spacing:.1em}
  .nums .nk{font-size:11px;letter-spacing:.08em}
  .nums .nlede{margin-top:18px;font-size:14px;text-align:left}
  .nhd{align-items:flex-start;text-align:left}
  .cap h3{font-size:24px}
  .ctext{font-size:15.5px}
  .strip{gap:44px}
  .lp .ctable::before{left:-18px;right:-18px}
  .sfield{width:900px;opacity:.45}
}
@media (max-width:374px){
  .nfig>div{gap:10px;padding-left:14px}
  .nfig>div:nth-child(1){--bw:84px}.nfig>div:nth-child(2){--bw:170px}.nfig>div:nth-child(3){--bw:192px}
  .nfig dt{font-size:11px;letter-spacing:.02em;padding:4px 8px 3px}
  .cap h3{font-size:21px}
}