/* Landing v5 · How it works: a port of gnar's own interactive reference (his 30s screen recording, 2026-10-03).
   Left the five steps (a tablist: dark plates, a numbered chip, the active one outlined orange and open on its copy,
   "6S" at its top right); right the stage (a segmented progress bar, the step in words, the yellow PAUSE plate, the
   pot table drawn by how.js). Every size is read off his frames at 1x. Phone: the steps become a row of chips over
   the stage, the table is cropped to the pots and scaled, and nothing on it reads under 11px (--fmin). */
.hiw-sec .hiw-hd .h2{margin:0}
.hiw{display:grid;grid-template-columns:minmax(0,310px) minmax(0,1fr);column-gap:40px;align-items:start;margin-top:44px}

/* ── the steps ── */
.hiw-list{display:flex;flex-direction:column;gap:16px;min-width:0}
.hiw-tab{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:14px;align-items:center;width:100%;min-height:66px;margin:0;padding:16px 20px;
  background:#121110;border:2px solid #2A2826;box-shadow:5px 5px 0 #000;color:#99928A;text-align:left;cursor:pointer;font:inherit;
  transition:border-color 160ms ease,color 160ms ease}
.hiw-tab{grid-template-columns:36px minmax(0,1fr);column-gap:10px;transition:border-color 160ms ease,color 160ms ease,transform 150ms ease,box-shadow 150ms ease}
/* the numeral on the brand plate (the crew kicker's slanted plate, as the v4 step markers): paper, orange when active,
   ink outline, a hard 2px shadow */
.hiw-tab i{position:relative;display:grid;place-items:center;width:36px;height:30px;color:#0B0B0B;font-family:var(--data);font-style:normal;font-weight:800;font-size:14px;line-height:1;filter:drop-shadow(2px 2px 0 #000)}
.hiw-tab i svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hiw-tab i path{fill:var(--paper);stroke:#0B0B0B;stroke-width:2px;stroke-linejoin:round;transition:fill 160ms ease}
.hiw-tab i span{position:relative;padding-top:1px}
.hiw-tab b{padding-right:22px;font-family:var(--shout);font-style:italic;font-weight:800;font-size:21px;line-height:1;text-transform:uppercase;letter-spacing:.005em;padding-top:2px}
.hiw-tab s{position:absolute;right:14px;top:14px;font-family:var(--data);font-weight:800;font-size:12px;letter-spacing:.06em;text-decoration:none;text-transform:uppercase;color:var(--orange);visibility:hidden}
.hiw-tab .hiw-sh{display:none}
.hiw-tab .hiw-tp{display:none;grid-column:2 / 3;margin:12px 0 2px;font-family:var(--read);font-size:16px;line-height:1.55;color:#d9d3c3;text-wrap:pretty}
.hiw-tab:hover{color:var(--paper);border-color:#3A3733}
/* the house hover / press (the landing's .hit): a lift with the shadow growing, a press back in; pointer devices only */
@media (hover:hover){.hiw-tab:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 #000}}
.hiw-tab:active{transform:translate(2px,2px);box-shadow:3px 3px 0 #000}
@media (prefers-reduced-motion:reduce){.hiw-tab:hover,.hiw-tab:active{transform:none}}
.hiw-tab[aria-selected=true]{border-color:var(--orange);color:var(--paper);padding-top:18px;padding-bottom:18px}
.hiw-tab[aria-selected=true] i path{fill:var(--orange)}
.hiw-tab[aria-selected=true] s{visibility:visible}
.hiw-tab[aria-selected=true] .hiw-tp{display:block}
.hiw-tab:focus-visible,.hiw-pause:focus-visible{outline:3px solid #FFA800;outline-offset:3px}

/* ── the stage ── */
.hiw-stage{position:relative;isolation:isolate;min-width:0;padding:44px 48px 30px}
/* the panel: the house torn edge, lightly (--clip-torn-lite, DS_PANEL_CLIP_COMPACT), drawn as a layer under the stage so the
   coins that fly in from past the edge are never cut: the keyline is the outer silhouette, the face the inner one, the hard
   shadow a filter on the pair (as .mface, the hero's tab plates) */
.hiw-face{position:absolute;inset:0;z-index:-1;filter:drop-shadow(8px 8px 0 #000);pointer-events:none}
.hiw-face::before{content:"";position:absolute;inset:0;background:#2E2B28;clip-path:var(--clip-torn-lite)}
.hiw-fill{position:absolute;inset:2px;overflow:hidden;clip-path:var(--clip-torn-lite);
  background:radial-gradient(ellipse 60% 38% at 70% 100%,rgba(255,168,0,.07),transparent 70%),#121212}
/* the cream mark, faint, off the bottom right corner (behind the table's right end, clear of the copy) */
.hiw-mark{position:absolute;right:-40px;bottom:-30px;width:min(300px,34%);height:auto;opacity:.06}
/* the cabinet's marquee on the stage's corner: the orange plate, the black mark, PREDICTION ARCADE */
.hiw-tag{position:absolute;z-index:2;left:30px;top:-14px;display:flex;align-items:center;gap:9px;height:28px;padding:1px 20px 0 16px;filter:drop-shadow(3px 3px 0 #000);pointer-events:none}
.hiw-tag svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hiw-tag path{fill:var(--orange);stroke:#0B0B0B;stroke-width:2px;stroke-linejoin:round}
.hiw-tag img,.hiw-tag b{position:relative}
.hiw-tag img{display:block;height:15px;width:auto}
.hiw-tag b{font-family:var(--shout);font-style:italic;font-weight:800;font-size:12px;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:#0B0B0B;white-space:nowrap}
/* the top: progress + PAUSE on one row, the 01 / 05 kicker under them (on a phone the bar takes its own row and PAUSE
   sits beside the kicker) */
.hiw-top{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:22px;align-items:center}
.hiw-prog{grid-column:1;grid-row:1;display:flex;gap:6px;min-width:0}
.hiw-prog i{--h:0;position:relative;flex:1;height:4px;background:#2A2826}
.hiw-prog b{display:block;height:100%;background:var(--orange);transform-origin:0 50%;transform:scaleX(0)}
/* a small yellow spark rides the head of the running segment (how.js sets --h on it, 0..1) */
.hiw-prog i[data-run]::after{content:"";position:absolute;top:-3px;left:calc(var(--h) * 100% - 2px);width:4px;height:10px;background:var(--yellow);box-shadow:0 0 8px rgba(250,244,36,.55)}
.hiw-pause{grid-column:2;grid-row:1;position:relative;display:flex;align-items:center;justify-content:center;gap:12px;width:124px;height:44px;margin:0 6px 0 0;padding:0 8px 0 4px;background:none;border:0;cursor:pointer;
  font-family:var(--data);font-weight:800;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:#0B0B0B}
.hiw-pause svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:0}
.hiw-pause .fc{fill:var(--yellow)}
.hiw-pause .sh{fill:#000}
.hiw-pause .ic,.hiw-pause .tx{position:relative;z-index:1}
.hiw-pause .ic{width:12px;height:13px;background:linear-gradient(90deg,#0B0B0B 0 4px,transparent 4px 8px,#0B0B0B 8px 12px)}
.hiw-pause[data-paused] .ic{width:11px;height:13px;background:#0B0B0B;clip-path:polygon(0 0,100% 50%,0 100%)}
.hiw-pause:active svg{transform:translate(3px,3px)}
.static .hiw-pause{display:none}.static .hiw-prog{grid-column:1 / -1}
@media (prefers-reduced-motion:reduce){.hiw-pause{display:none}.hiw-prog{grid-column:1 / -1}}
.hiw-k{grid-column:1 / -1;grid-row:2;margin:30px 0 0;font-family:var(--data);font-weight:800;font-size:13px;letter-spacing:.16em;color:var(--orange)}
.hiw-h{margin:6px 0 0;font-family:var(--shout);font-style:italic;font-weight:800;font-size:54px;line-height:.95;text-transform:uppercase;color:var(--paper)}
.hiw-p{margin:12px 0 0;max-width:620px;min-height:3.2em;font-family:var(--read);font-size:18px;line-height:1.6;color:#d9d3c3;text-wrap:pretty}
.hiw-foot{margin:14px 0 0;font-family:var(--data);font-size:12px;line-height:1.5;color:#8E887E}

/* ── the scene: a 724 x 330 plane (his table's own box) scaled to the stage by how.js (--k) ── */
.hiw-scene{position:relative;margin-top:8px;height:345px;overflow:visible;
  background:radial-gradient(ellipse 44% 62% at 50% 62%,rgb(92 26 26/.30),transparent 72%)}
.hiw-scene::before{content:"";position:absolute;left:50%;top:4%;height:96%;aspect-ratio:1.3;transform:translateX(-50%) rotate(-6deg);pointer-events:none;
  clip-path: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%);
  background:radial-gradient(ellipse 50% 50% at 50% 56%,rgba(255,168,0,.13) 0,rgba(255,122,0,.07) 40%,rgba(150,82,239,.07) 62%,transparent 80%)}
.hiw-plane{--k:1;--fmin:calc(11px / var(--k));position:absolute;left:0;top:0;width:724px;height:330px;transform-origin:0 0}
.hiw-svg{position:absolute;inset:0;width:724px;height:330px;overflow:visible}
.hiw-svg .lb{font-family:var(--call);font-style:oblique;font-weight:500;font-size:max(30px,var(--fmin));letter-spacing:.2em}
.hiw-ov{position:absolute;inset:0;pointer-events:none}
.hiw-ov>*{position:absolute;left:0;top:0;transform-origin:50% 50%;will-change:transform,opacity}
/* the two counters over the pots */
.ho-cnt{display:grid;place-items:center;min-width:54px;height:34px;padding:0 10px;font-family:var(--data);font-weight:800;font-size:max(22px,var(--fmin));line-height:1;color:#0B0B0B;box-shadow:3px 3px 0 #000}
.ho-cnt.y{background:var(--yes)}.ho-cnt.n{background:var(--no)}
/* the clock chip (his 0:04 in violet on night blue; grey at 0:00) */
.ho-clk{display:grid;place-items:center;min-width:86px;height:36px;padding:0 12px 3px;border:2px solid #5B3FC0;border-radius:4px;background:#100D1E;color:#C9B8FF;
  font-family:var(--data);font-weight:800;font-size:max(20px,var(--fmin));line-height:1;box-shadow:3px 3px 0 #000}
.ho-clk::after{content:"";position:absolute;left:8px;right:8px;bottom:4px;height:2px;background:#2B2448}
.ho-clk.z{background:#4A4752;border-color:#7A7682;color:#E6E2EE}
.ho-clk.z::after{background:#66626E}
/* YES WINS: the torn plate (their panelTornB polygon), ink with a paper edge, the words in lime */
.ho-win{display:grid;place-items:center;width:136px;height:40px;padding:2px 0 0;font-family:var(--shout);font-style:italic;font-weight:800;font-size:max(28px,var(--fmin));line-height:1;color:var(--yes);text-transform:uppercase;white-space:nowrap}
.ho-win svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:-1}
.ho-win{isolation:isolate}
/* the +4 / +12 plates over the stacks */
.ho-lbl{display:grid;place-items:center;height:28px;padding:0 9px;background:var(--yes);color:#0B0B0B;font-family:var(--data);font-weight:800;font-size:max(18px,var(--fmin));line-height:1;box-shadow:3px 3px 0 #000;white-space:nowrap}
/* 1/5 x 20 = 4 */
.ho-eq{display:block;height:38px;line-height:38px!important;padding:0 14px;background:var(--paper);color:#0B0B0B;font-family:var(--data);font-weight:800;font-size:max(22px,var(--fmin));line-height:1;box-shadow:4px 4px 0 #000;white-space:nowrap}
.ho-eq em{font-style:normal;color:#3C8214}
/* YES PAYS: paper plate, the lime label on its top edge, one coin into many, the multiplier */
.ho-pays{display:flex;align-items:center;gap:10px;height:40px;padding:0 12px 0 10px;background:var(--paper);color:#0B0B0B;box-shadow:4px 4px 0 #000;white-space:nowrap}
.ho-pays>small{position:absolute;left:8px;bottom:calc(100% - 7px);padding:2px 6px 1px;background:var(--yes);color:#0B0B0B;border:1.5px solid #0B0B0B;font-family:var(--shout);font-style:italic;font-weight:800;font-size:max(11px,var(--fmin));line-height:1;letter-spacing:.06em;text-transform:uppercase}
.ho-pays .cn{display:flex;align-items:center}
.ho-pays .cn i{width:16px;height:16px;border-radius:50%;background:#FFA800;border:1.5px solid #0B0B0B;box-shadow:inset 0 0 0 3px #FFC94D}
.ho-pays .cn i+i{margin-left:-6px}
.ho-pays .cn i.g{background:none;box-shadow:none;border:1.5px dashed #0B0B0B}
.ho-pays .cn u{width:12px;height:2px;margin:0 4px;background:#0B0B0B;position:relative;text-decoration:none}
.ho-pays .cn u::after{content:"";position:absolute;right:-3px;top:-3px;border:4px solid transparent;border-left:5px solid #0B0B0B;border-right:0}
.ho-pays b{position:relative;font-family:var(--data);font-weight:800;font-size:max(30px,var(--fmin));line-height:1;letter-spacing:-.02em}
.ho-pays b sup{position:absolute;right:-9px;top:-6px;width:9px;height:9px}
.ho-pays b sup svg{display:block;width:100%;height:100%}
/* the YOU tag rides on a zero-size anchor at the top of your stack (the kit's tag: their buttonTime bubble) */
.ho-anc{width:0;height:0}
.ho-anc .cm-tag{--cm-fs:max(21px,var(--fmin));transform:translateX(-50%)}

/* ── phone: the steps become a scroller of chips over the stage (their copy stays in the stage) ── */
@media (max-width:1180px){.hiw{grid-template-columns:minmax(0,270px) minmax(0,1fr);column-gap:28px}.hiw-stage{padding:36px 32px 26px}.hiw-h{font-size:46px}}
@media (max-width:960px){
  .hiw{grid-template-columns:minmax(0,1fr);row-gap:14px;margin-top:30px}
  /* the chips: a row that runs to the screen edges, starts on the page gutter (scroll-padding), snaps chip by chip,
     and fades out on the side that has more (how.js sets data-more="l r" from the scroll position) */
  .hiw-list{flex-direction:row;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:18px;
    scrollbar-width:none;margin:0 -18px;padding:2px 18px 8px;
    --fl:0px;--fr:0px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%)}
  .hiw-list[data-more~=l]{--fl:36px}
  .hiw-list[data-more~=r]{--fr:44px}
  .hiw-list::-webkit-scrollbar{display:none}
  .hiw-tab{flex:none;width:auto;min-height:44px;height:44px;padding:0 12px 0 8px;column-gap:8px;box-shadow:4px 4px 0 #000;scroll-snap-align:start}
  .hiw-tab[aria-selected=true]{padding-top:0;padding-bottom:0}
  .hiw-tab{grid-template-columns:32px auto}
  .hiw-tab i{width:32px;height:25px;font-size:12px}
  .hiw-tab b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hiw-tab .hiw-sh{display:block;font-family:var(--shout);font-style:italic;font-weight:800;font-size:17px;line-height:1;text-transform:uppercase;letter-spacing:.005em;padding-top:2px;white-space:nowrap}
  .hiw-tab s,.hiw-tab[aria-selected=true] .hiw-tp{display:none}
}
@media (max-width:760px){
  /* the stage clips its own flying coins on a phone (they come in from past the crop) */
  .hiw-stage{padding:24px 14px 14px}
  .hiw-face{filter:drop-shadow(5px 5px 0 #000)}
  .hiw-mark{display:none}
  .hiw-tag{left:14px;top:-13px;height:26px;gap:7px;padding:1px 16px 0 13px}
  .hiw-tag img{height:13px}
  .hiw-tag b{font-size:11px;letter-spacing:.12em}
  /* the bar on its own full row; PAUSE a compact plate on the kicker's line (still a 44px target) */
  .hiw-top{column-gap:12px;row-gap:8px}
  .hiw-prog{grid-column:1 / -1}
  .hiw-pause{grid-row:2;width:100px;height:44px;gap:9px;font-size:12px;letter-spacing:.12em;margin-right:5px}
  .hiw-pause .ic{width:10px;height:12px;background:linear-gradient(90deg,#0B0B0B 0 3.5px,transparent 3.5px 6.5px,#0B0B0B 6.5px 10px)}
  .hiw-pause[data-paused] .ic{width:10px;height:12px}
  .hiw-k{grid-column:1;margin:0;font-size:12px}
  /* the title and the copy reserve the tallest step's lines (how.js measures them), so the table never jumps */
  /* one line for every step down to 320 (the longest, IT MOVES UNTIL THE BELL., is 9.25 em) */
  .hiw-h{margin-top:6px;font-size:min(32px,calc((100vw - 64px) * .104));line-height:.98}
  .hiw-p{margin-top:10px;font-size:15px;line-height:1.5;min-height:0}
  /* the crop is a real edge on top (the YES WINS rays and the coins flying in stay off the copy), the stage clips the sides */
  .hiw-scene{margin-top:10px;clip-path:inset(0 -14px -12px)}
  .hiw-foot{margin-top:10px}
}

/* ── watch a full round: the cabinet in its own short block ── */
.watch{padding-top:40px}
.watch .hw-info .lede{max-width:520px}
/* the marquee line under the cabinet logo reads 10px at phone width in the shared frame: 11px here (landing floor) */
.watch .xf-mq b{font-size:max(11px,2.7cqw)}

/* phone: the torn edge's points are percentages, so on the tall narrow stage the sides jag far into the copy.
   Use the quiet cut (fixed 4px notches) there (owner 2026-10-03) */
@media (max-width:760px){
  .hiw-face::before,.hiw-fill{clip-path:var(--clip-quiet)}
}