/* Cade landing v6 (2026-10-03, redo from v5): the hero's demo round in gnar's explainer language (round.js).
   v5's object stays (tabs, the pair, the torn card with the flare centred on it); the entries column is gone, the card
   takes the object's full width and carries: the cream question plate, the view (field or chart) with the purple clock chip
   and RIGHT NOW, the PAYS plates with coins, the pot table. Shadows from the DS scale only (--sh2/3/4/5/8). */

/* the card spans the object (no entries column) */
.lp .hx-obj .hm-card{grid-column:1/-1}
.rd .rd-in{position:relative;z-index:1;padding:26px 26px 24px}

/* ── the question plate: cream, ink condensed caps, hard shadow (the video's top plate) ── */
.rd-q{position:relative;margin:0 0 24px;padding:12px 18px 11px;background:var(--paper);border:2px solid #0B0B0B;box-shadow:var(--sh5)}
.rd-qt{margin:0;font-family:var(--shout);font-style:italic;font-weight:800;font-size:clamp(26px,2.6vw,38px);line-height:.95;letter-spacing:.005em;text-transform:uppercase;color:#0B0B0B;text-align:center;
  min-height:1.9em;display:grid;place-items:center;text-wrap:balance}

/* ── body: the view left, the pays + table right; one column when the card is narrow ── */
.rd-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:24px;align-items:center}

/* ── the view ── */
.rd-view{position:relative;aspect-ratio:16/13.6;background:#0B0B0B;border:2px solid #0B0B0B;outline:1px solid rgb(240 234 217/.16);overflow:hidden;box-shadow:var(--sh5)}
.rd-field,.rd-chart{position:absolute;inset:0}
.rd[data-kind=field] .rd-chart,.rd[data-kind=price] .rd-field{visibility:hidden}
.rd-fsvg{position:absolute;inset:0;width:100%;height:100%;display:block}
.rd-chart canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.rd-fsvg .draw{stroke-dasharray:1000;stroke-dashoffset:1000;animation:rdDraw .67s cubic-bezier(0,0,.2,1) 0s forwards}
@keyframes rdDraw{to{stroke-dashoffset:0}}
.rd-fsvg .pop{transform-box:fill-box;transform-origin:center;animation:rdPop .65s cubic-bezier(.16,1,.3,1) .82s both}
@keyframes rdPop{from{transform:scale(.8);opacity:0}}
.rd-fsvg .late{animation:rdLate .25s ease .72s both}
@keyframes rdLate{from{opacity:0}}

/* the clock: the video's purple chip, top centre, the one timer on the hero */
.rd-clk{position:absolute;z-index:3;left:50%;top:10px;transform:translateX(-50%);margin:0;padding:5px 12px 4px;background:#1B1030;border:2px solid #9652EF;box-shadow:var(--sh3)}
.rd-clk b{display:block;font-family:var(--data);font-weight:800;font-size:20px;line-height:1;color:#D9C6FF;font-variant-numeric:tabular-nums;min-width:3.2ch;text-align:center}
.rd[data-late=true] .rd-clk{border-color:var(--yellow)}.rd[data-late=true] .rd-clk b{color:var(--yellow)}
.rd[data-phase=closed] .rd-clk b,.rd[data-phase=done] .rd-clk b{color:var(--meta)}

/* the score (sports): bottom left */
.rd-sb{position:absolute;z-index:2;left:8px;bottom:8px;display:flex;align-items:center;gap:6px;margin:0;padding:4px 8px 3px;background:#0B0B0B;border:1.5px solid #3A3734;
  font-family:var(--data);font-weight:800;font-size:12px;line-height:1.2;color:var(--paper);white-space:nowrap;font-variant-numeric:tabular-nums}
.rd-sb b{padding:1px 4px 0;background:var(--t);color:#fff}
.rd-sb span{color:var(--meta);font-weight:700}
.rd-sb .dd{margin-left:4px;color:var(--yellow)}
/* the drive's end (Touchdown / Punt), once */
.rd-ev{position:absolute;z-index:3;left:50%;top:34%;margin:0;padding:6px 14px 4px;background:var(--yes);border:2px solid #0B0B0B;box-shadow:var(--sh4);transform:translate(-50%,-50%) rotate(-3deg);opacity:0;
  font-family:var(--shout);font-style:italic;font-weight:800;font-size:22px;line-height:1;text-transform:uppercase;color:#0B0B0B;white-space:nowrap}
.rd-ev[data-tone=no]{background:var(--no);color:#fff}
.rd-ev.on{opacity:1}
/* the result stamps on the view, under the drive's end */
.rd-view .cm-stamp{--cm-fs:30px;top:64%}

/* RIGHT NOW: bottom right, what the answer would be this second */
.rd-now{position:absolute;z-index:2;right:8px;bottom:8px;display:flex;align-items:center;gap:6px;margin:0;padding:3px 3px 3px 8px;background:#0B0B0B;border:1.5px solid #3A3734}
.rd-now small{font-family:var(--data);font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--meta);white-space:nowrap}
.rd-now b{box-sizing:border-box;width:2.9em;text-align:center;padding:3px 6px 2px;background:var(--no);font-family:var(--shout);font-style:italic;font-weight:800;font-size:16px;line-height:1;text-transform:uppercase;color:#fff}
.rd-now[data-v=y] b{background:var(--yes);color:#0B0B0B}

/* the chart's labels: LINE on the dashed line, the price tag on the tip */
.rd-line{position:absolute;right:10px;top:0;font-family:var(--data);font-weight:700;font-size:11px;line-height:1;color:var(--yellow);white-space:nowrap;text-transform:uppercase}
.rd-tip{position:absolute;left:0;top:0;padding:3px 6px 2px;background:var(--paper);border:1.5px solid #0B0B0B;box-shadow:var(--sh2);
  font-family:var(--data);font-weight:800;font-size:13px;line-height:1.1;color:#0B0B0B;white-space:nowrap;font-variant-numeric:tabular-nums}
.rd-tip[data-lean=y]{background:#D6EDB4}.rd-tip[data-lean=n]{background:#FFC4CC}

/* ── the PAYS plates: the video's multiplier plate, a side tab on top, 1 coin in, N coins back, the rolling number ── */
.rd-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.rd-pays{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-top:12px}
.rd-pp{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;padding:8px 10px 7px;background:var(--paper);border:2px solid #0B0B0B;box-shadow:var(--sh4);color:#0B0B0B;min-width:0;transition:opacity .3s}
.rd-pp small{position:absolute;left:8px;bottom:calc(100% - 4px);padding:2px 6px 1px;border:1.5px solid #0B0B0B;font-family:var(--shout);font-style:italic;font-weight:800;font-size:12px;line-height:1;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;background:var(--yes);color:#0B0B0B}
.rd-pp[data-side=n] small{background:var(--no);color:#fff}
.rd-pp b{font-family:var(--data);font-weight:800;font-size:22px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap}
.rd-pp[data-mine=true]{outline:3px solid var(--yellow);outline-offset:2px}
.rd-pp[data-won=false]{opacity:.45}
.rd-cn{display:flex;align-items:center;gap:0;min-width:0}
.rd-coin{position:relative;flex:none;width:14px;height:14px;margin-right:-4px;border-radius:50%;background:#FFA800;border:1.5px solid #0B0B0B;box-shadow:inset 0 0 0 2px #FAF424;box-sizing:border-box}
.rd-coin:first-child{margin-right:0}
.rd-coin.h{width:7px;border-radius:7px 0 0 7px;border-right:0}
.rd-ar{flex:none;width:14px;height:14px;margin:0 3px;transform:rotate(90deg);fill:#0B0B0B}

/* ── the pot table ── */
.rd-pot{position:relative}
.rd-svg{display:block;width:100%;height:auto;aspect-ratio:524/228;overflow:visible}
.rd-svg .lb{font-family:var(--call);font-style:oblique;font-weight:500;font-size:30px;letter-spacing:.18em}
.rd-svg .gy,.rd-svg .gn{transition:opacity .3s}
.rd-pot[data-out=y] .gn,.rd-pot[data-out=n] .gy{opacity:.32}
.rd-pick{position:absolute;top:14%;bottom:0;width:46%;min-height:44px;margin:0;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.rd-pick[data-side=y]{left:3%}.rd-pick[data-side=n]{right:3%}
.rd-pick:focus-visible{outline:3px solid #FFA800;outline-offset:3px}
.rd-pick[aria-disabled=true]{cursor:default}
@media (hover:hover){.rd-pot[data-hover=y] .py,.rd-pot[data-hover=n] .pn{filter:brightness(1.35)}}
.rd-you,.rd-src{position:absolute;width:2px;height:2px;pointer-events:none}
.rd-you .cm-tag{--cm-fs:15px}
.rd-pot .cm-stamp{--cm-fs:30px;top:46%}
.rd-pot .cm-shutter{top:-6%;height:106%}
/* WINNERS SPLIT THE POT: one short beat over the table at the bell */
.rd-beat{position:absolute;z-index:6;left:50%;top:6%;margin:0;transform:translateX(-50%);opacity:0;pointer-events:none;
  font-family:var(--shout);font-style:italic;font-weight:900;font-size:clamp(24px,2.3vw,32px);line-height:.92;text-transform:uppercase;color:var(--paper);white-space:nowrap;
  -webkit-text-stroke:3px #0B0B0B;paint-order:stroke fill;text-shadow:var(--sh3)}
.rd-beat.on{animation:rdBeat 2.4s cubic-bezier(.16,1,.3,1) both}
@keyframes rdBeat{0%{opacity:0;transform:translateX(-50%) scale(1.5)}12%{opacity:1;transform:translateX(-50%) scale(.96)}18%{transform:translateX(-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translateX(-50%) scale(1)}}

/* the pot in one line: total, players, no house */
.rd-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;margin:6px 0 0;font-family:var(--data);font-weight:700;font-size:12px;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:var(--meta)}
.rd-meta b{color:var(--paper);font-weight:800;font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){.rd-fsvg .draw,.rd-fsvg .pop,.rd-fsvg .late,.rd-beat.on{animation:none}.rd-beat.on{opacity:1;transform:translateX(-50%)}}
html.static .rd-fsvg .draw,html.static .rd-fsvg .pop,html.static .rd-fsvg .late{animation:none}

/* ── narrow card (a tablet column, a phone): one column ── */
@container (max-width:620px){
  .rd .rd-in{padding:16px 14px 16px}
  .rd-q{margin-bottom:14px;padding:10px 12px 9px;box-shadow:var(--sh4)}
  .rd-qt{font-size:clamp(22px,7cqw,30px)}
  .rd-body{grid-template-columns:minmax(0,1fr);gap:10px}
  .rd-view{aspect-ratio:16/9;box-shadow:var(--sh4)}
  .rd-side{gap:4px;width:100%;max-width:500px;justify-self:center}
  .rd-pays{padding-top:14px}
  .rd-beat{font-size:clamp(22px,7cqw,30px)}
}
@container (max-width:380px){
  .rd-view{aspect-ratio:16/10}
  .rd-clk b{font-size:17px}
  .rd-pp{padding:7px 8px 6px;gap:4px}
  .rd-pp b{font-size:18px}
  .rd-coin{width:12px;height:12px}.rd-coin.h{width:6px}.rd-ar{width:12px;height:12px;margin:0 2px}
  .rd-sb .dd{display:none}
  .rd-view .cm-stamp,.rd-pot .cm-stamp{--cm-fs:24px}
  .rd-ev{font-size:18px}
  .rd-meta{gap:2px 10px;letter-spacing:.04em}
}

/* ══ polish (v6): one kicker style, DS arrows, the logo never cut ══════════════════════════════════════ */
/* the DS arrow (ds/assets/ds/icons/arrow-up.svg) in the CTAs, in place of typed arrows; right = rotated a quarter */
.lp .cta .ic{position:relative;flex:none;width:24px;height:24px;fill:#0B0B0B;stroke:none}
.lp .cta .ar-r{transform:rotate(90deg)}
/* the crew kicker is the page's one kicker (the cream plate), no longer its own orange slant */
.lp .crew .bcopy .qk{margin-bottom:20px}
/* How it works: the CADE mark in the stage sits whole inside the stage, never cut by its edge */
.lp .hiw-mark{right:18px;bottom:18px;width:min(128px,15%)}
/* zero layout shift: the figures hold their final width while they roll (landing.js sets min-width) */
@media (min-width:761px){.lp .nfig dd{text-align:center}}
/* the pot line never changes its height as the numbers grow */
@container (max-width:380px){.rd-meta{min-height:2.6em;align-content:flex-start}}
.rd-you{left:0;top:0}
.rd-meta>span{white-space:nowrap}
#rTot{display:inline-block;min-width:4.3em;text-align:left}
#rPl{display:inline-block;min-width:6.9em;text-align:left}
/* one shadow scale: every hard shadow on the page sits on the DS ladder (2 / 3 / 4 / 5 / 8px, black, zero blur) */
.lp .hero h1,.lp .hero h1>span{text-shadow:8px 8px 0 #000}
.lp .shout.h2,.lp .shout.h2 em{text-shadow:5px 5px 0 #000}
.lp .ch-k,.lp .hch.b .ch-k,.lp .duo-m .mch.b .ch-k{text-shadow:none}
.lp .wr-sh{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)}
.lp .oyou{filter:drop-shadow(5px 5px 0 #000)}
.lp .nfig dd{text-shadow:5px 5px 0 #0B0B0B}
.lp .xf-art,.lp .cus{filter:drop-shadow(8px 8px 0 #000)}
@media (max-width:760px){
  .lp .hero h1,.lp .hero h1>span{text-shadow:5px 5px 0 #000}
  .lp .shout.h2,.lp .shout.h2 em{text-shadow:4px 4px 0 #000}
  .lp .wr-sh{filter:drop-shadow(1.5px 0 0 #0B0B0B) drop-shadow(-1.5px 0 0 #0B0B0B) drop-shadow(0 1.5px 0 #0B0B0B) drop-shadow(0 -1.5px 0 #0B0B0B) drop-shadow(5px 5px 0 #000)}
  .lp .nfig dd{text-shadow:4px 4px 0 #0B0B0B}
}
/* the narrowest card: the clock steps to the top right corner, the score to the top left, and the pays plates show two coins back at most */
@container (max-width:380px){
  .rd-clk{left:auto;right:8px;transform:none}
  .rd-sb{top:8px;bottom:auto}
  .rd-cn .rd-coin:nth-of-type(n+4){display:none}
}
/* compare: the lede line is gone, the header keeps its air so the VS burst never touches the headline */
@media (min-width:761px){.lp #compare .shd{margin-bottom:80px}}