/* Cade landing v3, the comic book pass (2026-10-02). Scotty: "a bit better backgrounds and graphics perhaps,
   more 'comic book' feel like the original site". Loaded after landing.css; the plain v3 is frozen at
   /archive/landing-v3-plain-2026-10-02/.
   One focal picture per section, type always on a solid plate or a calm ground:
   1 hero: a framed comic panel (their landing hero-panel-face silhouette) holding a painted burst behind the card
   2 crew: the orange panel inked, their rays as action lines out of YOU
   3 numbers: a cream torn paper strip (their panelTornB), ink figures with coloured hard shadows
   4 how it works: three comic panels in a row, a caption box on top, a caption plate under, the strip reads 1 2 3
   5 compare: a halftone ground (their bg dots), the table on a solid plate
   Shapes: their hero-panel-face path, panelTornB, --clip-quiet, plain rectangles. Nothing drawn here by hand. */

:root{--pk:1;
  /* 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}

/* ── 2 crew: the orange panel, inked, their rays as action lines out of YOU ─────────────────────── */
.crew .jwrap{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) drop-shadow(10px 10px 0 #000)}
.crew .bcopy{z-index:2}
.crew .orbit{z-index:1}
.crew .orbit::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:1700px;height:1700px;margin:-850px 0 0 -850px;pointer-events:none;
  background:url(assets/art/rays-orange.svg) center/100% 100% no-repeat;opacity:.9;mix-blend-mode:multiply;
  /* only on YOU's side of the panel: the copy keeps the plain orange */
  -webkit-mask:radial-gradient(closest-side circle,transparent 15%,#000 19%,#000 34%,transparent 52%),linear-gradient(90deg,transparent 470px,#000 600px);-webkit-mask-composite:source-in;
  mask:radial-gradient(closest-side circle,transparent 15%,#000 19%,#000 34%,transparent 52%) intersect,linear-gradient(90deg,transparent 470px,#000 600px)}
.crew .oring{z-index:0}

/* ── 3 numbers: the torn paper strip ───────────────────────────────────────────────────────────── */
.lp .sec.nums{padding:72px 0}
.nstrip{position:relative;filter:drop-shadow(2px 0 0 #0B0B0B) drop-shadow(-2px 0 0 #0B0B0B) drop-shadow(0 2px 0 #0B0B0B) drop-shadow(0 -2px 0 #0B0B0B) drop-shadow(8px 8px 0 #000)}
.nstrip .nrow{position:relative;isolation:isolate;padding:42px 56px 46px;background:#EFE9D8;clip-path:var(--clip-tear)}
/* the paper's own tone: halftone on cream (#D7CDB4), only in the far corner, never under a figure */
.nstrip .nrow::before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(circle,#D7CDB4 1.5px,transparent 2px) 0 0/11px 11px;
  -webkit-mask:linear-gradient(200deg,transparent 62%,#000 100%);mask:linear-gradient(200deg,transparent 62%,#000 100%)}
.nstrip .nk{display:inline-block;margin:0 0 14px;padding:5px 10px 4px;background:#0B0B0B;color:var(--yellow);box-shadow:3px 3px 0 rgba(0,0,0,.25)}
.nstrip .h2{color:#0B0B0B;text-shadow:none}
.nstrip .h2 em{display:inline-block;padding:0 .1em 0 .06em;background:var(--orange);color:#0B0B0B;box-shadow:4px 4px 0 #0B0B0B}
.nstrip .nlede{color:#2A2724}
.nstrip .nfig>div{border-left-color:#0B0B0B}
.nstrip .nfig dd{color:#0B0B0B;background:none;padding-bottom:0;text-shadow:3px 3px 0 var(--b)}
.nstrip .nfig dt{color:#5B5548}

/* ── 4 how it works: three comic panels, one strip ─────────────────────────────────────────────── */
.strip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.cpanel{position:relative;isolation:isolate;display:flex;flex-direction:column;min-width:0;background:#141210;border:3px solid #EFE9D8;box-shadow:7px 7px 0 #000}
/* the panel's ground: a soft glow in its tone and halftone (::before); their rays faint, only up behind the
   question plate and the pots, gone before the labels (::after) */
.cpanel::before,.cpanel::after{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none}
.cpanel::before{background:radial-gradient(ellipse 70% 46% at 50% 40%,color-mix(in srgb,var(--tone) 24%,transparent),transparent 72%),
    radial-gradient(circle,#2A2724 1.3px,transparent 1.8px) 0 0/9px 9px;
  -webkit-mask:linear-gradient(180deg,#000 55%,transparent 85%);mask:linear-gradient(180deg,#000 55%,transparent 85%)}
.cpanel::after{background:url(assets/art/rays-orange.svg) 50% 34%/820px 820px no-repeat;opacity:.55;
  -webkit-mask:radial-gradient(ellipse 62% 40% at 50% 34%,#000 35%,transparent 100%);mask:radial-gradient(ellipse 62% 40% at 50% 34%,#000 35%,transparent 100%)}
.cpanel:nth-child(2)::after{background-image:url(assets/art/rays-violet.svg);opacity:.85}
/* the caption box, top left, as a comic panel opens */
.cap{position:relative;z-index:3;align-self:flex-start;display:flex;align-items:center;gap:12px;margin:-3px 0 0 -3px;padding:10px 18px 9px 10px;
  background:#EFE9D8;border:3px solid #0B0B0B;color:#0B0B0B;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)}
.cpanel.on{border-color:var(--yellow)}
/* the picture: the phone scale of the pictures, at every width (a panel is phone wide) */
.lp .cpanel .sart.stg{flex:1;--dw:22px;--dh:10px;--fh:86px;--lh:30px;--mh:44px;--stamp-fs:22px;padding:18px 18px 18px;min-height:0;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 caption plate under the picture: solid, so the words never sit on art */
.ctext{position:relative;z-index:2;margin:0;padding:16px 20px 20px;background:#0E0D0C;border-top:3px solid #0B0B0B;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 halftone ground ────────────────────────────────────────────────────────────── */
.cground{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 46% 50% at 78% 62%,rgba(150,82,239,.16),transparent 70%),radial-gradient(circle,#3A3531 1.9px,transparent 2.5px) 0 0/14px 14px;
  -webkit-mask:radial-gradient(ellipse 85% 80% at 70% 60%,#000 40%,transparent 85%);mask:radial-gradient(ellipse 85% 80% at 70% 60%,#000 40%,transparent 85%)}
#compare>.w{z-index:1}
/* the rows sit on one solid plate; the raised Cade column keeps its own */
.lp .ctable::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-24px;right:calc((100% - 220px)/3);background:#141210;border:2px solid #0B0B0B;box-shadow:8px 8px 0 #000}

/* ── responsive ────────────────────────────────────────────────────────────────────────────────── */
@media (max-width:1180px){
  .lp .hm-row{grid-template-columns:minmax(0,1fr)}
  .lp .ent{margin-top:22px}
}
@media (max-width:999px){
  .strip{grid-template-columns:minmax(0,1fr);max-width:560px;gap:26px}
}
@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%)}
}
@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%)}
  .lp .ent{padding:12px 10px 10px}
  .lp .hm-cap{justify-self:stretch;width:auto}
  .crew .orbit::before{width:1100px;height:1100px;margin:-550px 0 0 -550px;
    -webkit-mask:radial-gradient(closest-side circle,transparent 18%,#000 22%,#000 40%,transparent 60%),linear-gradient(180deg,transparent 430px,#000 470px);-webkit-mask-composite:source-in;
    mask:radial-gradient(closest-side circle,transparent 18%,#000 22%,#000 40%,transparent 60%) intersect,linear-gradient(180deg,transparent 430px,#000 470px)}
  .lp .sec.nums{padding:52px 0}
  .nstrip{filter:drop-shadow(2px 0 0 #0B0B0B) drop-shadow(-2px 0 0 #0B0B0B) drop-shadow(0 2px 0 #0B0B0B) drop-shadow(0 -2px 0 #0B0B0B) drop-shadow(5px 5px 0 #000)}
  .nstrip .nrow{padding:30px 22px 32px}
  .nstrip .nfig dd{font-size:clamp(23px,7.4vw,34px);text-shadow:2px 2px 0 var(--b)}
  .nstrip .nfig>div{padding-left:12px;margin-left:12px}
  .nstrip .nk{font-size:11px;letter-spacing:.08em}
  .cap h3{font-size:24px}
  .ctext{font-size:15.5px;padding:14px 16px 18px}
  .cpanel{box-shadow:5px 5px 0 #000}
  .lp .ctable::before{left:-12px;right:-12px}
  .cground{-webkit-mask:linear-gradient(180deg,transparent 0,#000 30%,#000 85%,transparent);mask:linear-gradient(180deg,transparent 0,#000 30%,#000 85%,transparent)}
}
@media (max-width:374px){
  .nstrip .nrow{padding:26px 16px 28px}
  .nstrip .nfig>div{padding-left:9px;margin-left:9px}
  .nstrip .nfig dt{font-size:11px;letter-spacing:0}
  .cap h3{font-size:21px}
}