/* FLICK · v2 polish (owner 11-13: "touch up the website so its totally professional, it looks amateuristic now. Make it beautiful to
   look at" + "make it look good and feel good to use"). Loaded after flick.css. Rules:
   - IVORY IS THE COIN CARD ONLY (the deck card, the Likes mini cards, the profile, the how-step minis). Every other surface is dark
     smoked glass with hairlines, so the card is the one bright object on the page.
   - The room has light: deep ink at the edges, mulberry in the middle, a soft spotlight behind the card, a floor shadow under it,
     fine grain and a vignette. Nothing moves on its own.
   - One scale each: type 60 / 40 / 22 / 16 / 14 / 12, spacing 8 px steps, radius 10 / 14 / 18 / 22 (card) / 999, shadow 1-2-3.
   - Mint is the action colour only (buy, the primary button, live dots); gold = the second setup. */

:root {
  --ink-0: #060a17; --room-d: #0c1328;
  --g1: linear-gradient(180deg, rgba(236, 243, 255, .075), rgba(236, 243, 255, .028));
  --g2: linear-gradient(180deg, rgba(236, 243, 255, .11), rgba(236, 243, 255, .05));
  --hair: rgba(232, 240, 255, .09); --hair-2: rgba(232, 240, 255, .16);
  --panel: #17223f; --panel-2: #121b33;
  --sh-1: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 0 0 1px var(--hair) inset, 0 10px 24px -14px rgba(0, 0, 0, .7);
  --sh-2: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 0 0 1px var(--hair) inset, 0 28px 60px -36px rgba(0, 0, 0, .85);
  --sh-3: 0 1px 0 rgba(255, 255, 255, .07) inset, 0 0 0 1px var(--hair-2) inset, 0 40px 90px -40px rgba(0, 0, 0, .9);
  --w-display: 800;
  --spot-x: 50%; --spot-y: 38%;
}

/* ---- the room: light, depth, grain, vignette (all static) */
body {
  background:
    radial-gradient(560px 460px at var(--spot-x) var(--spot-y), rgba(120, 170, 255, .16), transparent 70%),
    radial-gradient(140% 100% at 50% -10%, #263c6b 0%, #14203d 34%, #0d1630 64%, var(--ink-0) 100%) fixed;
  background-color: var(--ink-0);
}
body::before { opacity: .32; }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(120% 100% at 50% 40%, transparent 55%, rgba(2, 4, 12, .55) 100%); }
#app, .landing { position: relative; z-index: 1; }

/* ---- dark surfaces: every panel, sheet, toast and page reads its tokens dark … */
.page, .sheet, .toast, .learn, .tour-coach, .lcol, .trail, .landing, .phone-pop, .wp-wrap, .top {
  --stock: var(--panel); --stock-2: rgba(232, 240, 255, .055); --stock-3: rgba(232, 240, 255, .1);
  --edge: transparent; --edge-2: rgba(0, 0, 0, .4);
  --ink: #f5f8ff; --ink-2: rgba(245, 248, 255, .72); --ink-3: rgba(245, 248, 255, .46);
  --line: var(--hair); --line-2: var(--hair-2);
  --up: var(--up-d); --down: var(--down-d);
  --sh-btn: var(--sh-1); --sh-pop: 0 1px 0 rgba(255, 255, 255, .07) inset, 0 0 0 1px var(--hair-2), 0 30px 70px -30px rgba(0, 0, 0, .9);
}
/* … and the coin card (and its small copies) stays ivory card stock */
.card, .bub-w, .mc, .profile, .tr-r .c-logo, .lr .c-logo {
  --stock: #f7f3ec; --stock-2: #ede6da; --stock-3: #e3dacb; --edge: #d6cab6; --edge-2: #b9ab94;
  --ink: #161b2b; --ink-2: #555c70; --ink-3: #8e95a7; --line: rgba(20, 24, 40, .1); --line-2: rgba(20, 24, 40, .18);
  --up: #0f9f6a; --down: #d93a4a;
}
.sh-panel { background: linear-gradient(180deg, #1c2a4d 0%, #131e3a 60%, #0e1730 100%); box-shadow: 0 -1px 0 var(--hair-2), 0 -30px 80px -30px rgba(0, 0, 0, .9); }
.sh-grab i { background: var(--hair-2); }
.sh-x { background: rgba(232, 240, 255, .08); color: var(--on-2); }
.pg-card, .hw, .menu > *, .page .menu > *, .lks, .od-r, .wl-card, .su-card, .ds-row, .fl-row, .ex-row, .hr, .tk-r, .pf-grid div, .air-st {
  background: var(--g1); box-shadow: var(--sh-1);
}
.pg-card, .hw { box-shadow: var(--sh-2); border-radius: 18px; }
.pg-card.base { background: transparent; box-shadow: inset 0 0 0 1px var(--hair); }
.pg-card.paper { outline: none; }
.wl-card.paper { outline: none; box-shadow: var(--sh-1); }
.ex-on { background: rgba(232, 240, 255, .16); }
.ex-row.on .ex-on, .fl-row.on .ex-on, .ds-row.on .ex-on { background: var(--buy-lo); }
.stepper button { background: rgba(232, 240, 255, .08); box-shadow: inset 0 0 0 1px var(--hair-2); color: var(--on); }
.stepper button:hover { background: rgba(232, 240, 255, .14); }
.segs { background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 1px var(--hair); }
.segs button.on { background: rgba(232, 240, 255, .14); color: var(--on); box-shadow: inset 0 0 0 1px var(--hair-2); }
.rng::before { background: rgba(232, 240, 255, .14); }
.rng-fill { background: var(--buy); }
.wl-form input, .air-in { background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 1px var(--hair-2); color: var(--on); border-color: var(--hair-2); }
.pill.ghost, .page .pill.ghost, .page .pg-card .pill.ghost { background: rgba(232, 240, 255, .07); color: var(--on); box-shadow: inset 0 0 0 1px var(--hair-2); }
.pill.ghost:hover { background: rgba(232, 240, 255, .12); }
.ps-sell [data-sell] { background: rgba(232, 240, 255, .1); color: var(--on); box-shadow: inset 0 0 0 1px var(--hair-2); }
.ps-sell [data-sell]:hover { background: rgba(232, 240, 255, .16); }
.pts-r, .page .pts-r { background: transparent; box-shadow: inset 0 -1px 0 var(--hair); border-radius: 0; }
.pts-r.me { background: rgba(25, 211, 138, .1) !important; box-shadow: inset 0 0 0 1px rgba(25, 211, 138, .35) !important; border-radius: 12px; color: var(--on) !important; }
.pts-r.me i { color: var(--buy) !important; }
.lg-row { background: var(--g1); box-shadow: var(--sh-1); }
.lg-split span { box-shadow: inset 0 0 0 1px var(--hair); }
.hw-w { background: var(--g2); box-shadow: var(--sh-2); color: var(--on); }
.hw-qr i { border-color: var(--on-2); }
.how-n { background: var(--buy); color: var(--buy-ink); box-shadow: 0 0 0 3px rgba(25, 211, 138, .18); }
.hw .how-n { box-shadow: 0 0 0 2px var(--panel); }
.toast { background: rgba(19, 28, 54, .96); color: var(--on); box-shadow: var(--sh-3); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.toast button { background: var(--buy); color: var(--buy-ink); }
.learn { background: rgba(19, 28, 54, .96); color: var(--on); box-shadow: var(--sh-3); }
.learn > div::before { background: rgba(232, 240, 255, .12); }
.tour-coach { background: #1b2848; color: var(--on); box-shadow: var(--sh-3); }
.tour-coach::before { background: #1b2848; }
.tour-dots i { background: var(--hair-2); }
.tour-ring { box-shadow: 0 0 0 2px var(--buy), 0 0 0 8px rgba(25, 211, 138, .18); }
.tour-ring::after { box-shadow: 0 0 0 2px rgba(25, 211, 138, .5); }
.page .pts-r i { color: var(--on-3); }
.page .you-stats div { background: var(--g1); box-shadow: var(--sh-1); }
.pg-back { background: transparent; box-shadow: none; padding: 0 2px; color: var(--on-2); font-weight: 700; }
.pg-back:hover { color: var(--on); }
.pg-eye { color: var(--on-3); letter-spacing: .18em; font-weight: 800; }

/* ---- type: one calm scale (60 / 40 / 22 / 16 / 14 / 12); display 800, never 900 outside the card */
.pg-h { font-weight: var(--w-display); font-size: clamp(32px, 5.4vw, 44px); letter-spacing: -.045em; line-height: 1.04; }
.pg-sub { font-size: 16px; line-height: 1.6; color: var(--on-2); }
.sh-title, .lk-title, .hw h3, .pg-card h3, .sty-h b, .ch-h b, .tour-t, .learn b, .air-st b { font-weight: var(--w-display); }
.pg-card h3, .hw h3 { font-size: 20px; letter-spacing: -.04em; }
.hw p, .pg-card > p, .pg-p { font-size: 15px; line-height: 1.6; }
.c-name .sym, .cap-v, .pf-name .sym, .ps-nm .sym { font-weight: 800; }
.mark-t { font-weight: var(--w-display); }

/* ---- buttons: one family. Primary = mint, ghost = glass; every press squishes a little and springs back (press.js), focus ring mint */
.btn { height: 52px; padding: 0 22px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 800 15px var(--ui); letter-spacing: -.005em; white-space: nowrap; transition: background .15s var(--ease), box-shadow .15s var(--ease), color .15s var(--ease); }
.btn.primary { background: linear-gradient(180deg, var(--buy-hi), var(--buy-lo)); color: var(--buy-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 1px 0 #078a56, 0 18px 36px -16px rgba(25, 211, 138, .7); }
.btn.primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 0 #078a56, 0 22px 44px -16px rgba(25, 211, 138, .85); }
.btn.ghost { background: rgba(232, 240, 255, .06); color: var(--on); box-shadow: inset 0 0 0 1px var(--hair-2); }
.btn.ghost:hover { background: rgba(232, 240, 255, .11); }
button:focus-visible, a:focus-visible { outline: 2px solid var(--buy); outline-offset: 3px; }
.pill:active, .btn:active, .ibtn:active, .hph:active { transform: scale(.97); }

/* ---- the deck's round buttons: smoked glass discs; buy (mint) and the second setup (gold) keep their colour */
.dk-btn { background: radial-gradient(120% 120% at 50% 0%, rgba(236, 243, 255, .2), rgba(236, 243, 255, .07) 60%); color: var(--on);
  box-shadow: inset 0 0 0 1px rgba(232, 240, 255, .18), inset 0 1px 0 rgba(255, 255, 255, .16), 0 18px 32px -16px rgba(0, 0, 0, .8);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.dk-btn.pass { color: #fff; } .dk-btn.rewind { color: var(--on-3); } .dk-btn.bolt { color: var(--super-hi); }
.dk-btn.rewind.armed { color: var(--super-hi); box-shadow: inset 0 0 0 2px var(--super), 0 18px 32px -16px rgba(0, 0, 0, .8); }
.dk-btn.buy { backdrop-filter: none; -webkit-backdrop-filter: none; }
.dk-btn.super { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ---- header: his set logo (the wordmark from the kit) as the mark; site nav quiet, active = a mint underline (never a clipped pill) */
.mark { gap: 10px; padding: 0; display: inline-flex; align-items: center; }
.mark-badge { position: relative; display: block; width: 36px; height: 36px; border-radius: 11px; overflow: hidden; background: var(--room-lo); flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 8px 20px -10px rgba(0, 0, 0, .6); }
.mark-badge img { position: absolute; left: -12px; top: -12px; width: 60px; height: 60px; max-width: none; display: block; }
.mark-t { position: static; white-space: nowrap; font: var(--w-display) 21px/1 var(--display); letter-spacing: -.045em; color: var(--on); }
.mark.no-logo .mark-badge { display: none; }

.mark-logo[hidden] { display: none; }
/* 11-14 rename to Cardly: until the kit sets a Cardly logo the tile carries the two-card glyph (the set logo is still the old flick
   wordmark). When the new logo lands: drop the two rules below and the tile shows /img/logo.png's centre again */
.mark-badge { background: linear-gradient(160deg, var(--buy-hi), var(--buy-lo)); color: var(--buy-ink); display: grid !important; place-items: center; }
.mark .mark-badge .mark-g { display: block !important; width: 72%; height: 72%; color: var(--buy-ink); } .mark-badge img { display: none !important; }
.hph { height: 38px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px 0 11px; border-radius: 999px; background: rgba(232, 240, 255, .06); box-shadow: inset 0 0 0 1px var(--hair-2); color: var(--on-2); font: 700 13px var(--ui); position: relative; }
.hph svg { width: 17px; height: 17px; } .hph:hover, .hph.on { color: var(--on); background: rgba(232, 240, 255, .1); }
.phone-pop { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; display: flex; align-items: center; gap: 14px; width: 330px; padding: 12px 16px 12px 12px; border-radius: 16px;
  background: rgba(19, 28, 54, .97); box-shadow: var(--sh-3); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--on); }
.phone-pop[hidden] { display: none; }
.phone-pop .qr { width: 96px; height: 96px; border-radius: 10px; overflow: hidden; flex: 0 0 auto; background: #fff; padding: 2px; } .phone-pop .qr svg { width: 100%; height: 100%; }
.phone-pop b { display: block; font: var(--w-display) 15px/1.25 var(--display); letter-spacing: -.035em; } .phone-pop span { font: 500 13px/1.45 var(--ui); color: var(--on-2); }
.top-r { position: relative; }
.hca, .hph { white-space: nowrap; flex: 0 0 auto; }
.hca, .hx { background: rgba(232, 240, 255, .06); box-shadow: inset 0 0 0 1px var(--hair-2); }
.hca:hover:not(:disabled), .hx:hover { background: rgba(232, 240, 255, .11); }
@media (max-width: 959px) { .hph, .phone-pop { display: none !important; } }
@media (max-width: 1599px) { .hph { width: 38px; padding: 0; justify-content: center; } .hph span { display: none; } }

/* ---- the deck's own controls: a quiet segmented strip, the selected tab a glass pill (ivory is for cards only) */
.stabs button.on { color: var(--on); } .stabs button.on::before { background: rgba(232, 240, 255, .14); box-shadow: inset 0 0 0 1px var(--hair-2); }
.stabs button:not(.on):hover { color: var(--on-2); }
/* the PnL pill: solid glass, never dashed; with nothing open it keeps its place but shows nothing (no placeholder dot) */
.pnl, .pnl.paper { outline: none; background: rgba(232, 240, 255, .07); box-shadow: inset 0 0 0 1px var(--hair-2); }
body:not(.has-likes) .pnl { visibility: hidden; }
.bal.paper { outline: none !important; box-shadow: inset 0 0 0 1px var(--hair-2) !important; }
.bal.paper .bal-dot { background: var(--on-3); box-shadow: none; }

/* ---- the stage: a soft spotlight behind the card and a floor shadow under it */
.stage::before { content: ""; position: absolute; left: 50%; top: 46%; width: min(760px, 160%); height: 78%; transform: translate(-50%, -50%); pointer-events: none; z-index: 0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(130, 175, 255, .14), rgba(130, 175, 255, .05) 45%, transparent 72%); }
.deck { z-index: 1; }
.deck::before, .deck::after { z-index: 0; }
.stage::after { content: ""; position: absolute; left: 50%; bottom: 76px; width: 78%; max-width: 420px; height: 46px; transform: translateX(-50%); pointer-events: none; z-index: 0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(1, 3, 10, .65), transparent 70%); }
.keys { display: none; }

/* ---- empty states, designed: one ghost card + one plain line */
.lk-ghost { border: 0; border-radius: 12px; background: var(--g1); box-shadow: var(--sh-1); position: relative; }
.lk-ghost::before { content: ""; position: absolute; left: 50%; top: 42%; width: 28px; height: 36px; margin: -18px 0 0 -14px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--hair-2); transform: rotate(-8deg); }
.lk-ghost::after { content: ""; position: absolute; left: 50%; top: 42%; width: 28px; height: 36px; margin: -18px 0 0 -10px; border-radius: 6px; background: rgba(25, 211, 138, .16); box-shadow: inset 0 0 0 1.5px rgba(25, 211, 138, .6); transform: rotate(7deg); }
.lk-ghost:nth-child(2), .lk-ghost:nth-child(3) { display: none; }
.lk-hint { color: var(--on-2); font-weight: 600; }
.lk-none, .tr-none { color: var(--on-3); }
.dk-empty { border: 0; background: var(--g1); box-shadow: var(--sh-2); }

/* ---- phone */
@media (max-width: 959px) {
  :root { --spot-y: 30%; }
  .top { --stock: var(--panel); }
  .mark-badge { width: 32px; height: 32px; border-radius: 10px; }
  .mark-badge img { left: -11px; top: -11px; width: 54px; height: 54px; }
  .mark { gap: 8px; } .mark-t { font-size: 18px; }
  .tabs { background: linear-gradient(180deg, transparent, rgba(2, 5, 13, .55)); }
  .tabs a.on::after { background: var(--buy); }
  .stage::after { bottom: 84px; }
}

/* ---- desktop: a lit stage. Row 1 = mark + site nav · CA, X, phone; the deck's own tabs sit just above the card; the hero copy +
   the live market on the left, your likes on the right as quiet rails (no boxes); a calm landing below the fold */
@media (min-width: 1240px) {
  #app { grid-template-columns: minmax(400px, 1fr) minmax(430px, 470px) minmax(270px, 330px); grid-template-rows: 76px 52px minmax(0, 1fr);
    grid-template-areas: "nl nl nr" "trail bar likes" "trail stage likes"; height: 100vh; max-width: 1680px; margin: 0 auto; }
  .top { display: contents; }
  .top-l { grid-area: nl; display: flex; align-items: center; gap: 36px; padding-left: clamp(28px, 4.2vw, 72px); position: relative; z-index: 20; }
  .top-r { grid-area: nr; display: flex; align-items: center; gap: 10px; justify-self: end; padding-right: clamp(28px, 4.2vw, 72px); z-index: 30; }
  .top-c { grid-area: bar; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 6px; position: relative; z-index: 20; }
  #app::before { content: ""; grid-row: 1; grid-column: 1 / -1; align-self: end; height: 1px; background: linear-gradient(90deg, transparent, var(--hair) 12%, var(--hair) 88%, transparent); pointer-events: none; }
  .mark-badge { width: 40px; height: 40px; border-radius: 12px; } .mark-badge img { left: -13px; top: -13px; width: 66px; height: 66px; } .mark-t { font-size: 22px; }
  .dnav { gap: 2px; } .dnav a { height: 40px; padding: 0 12px; border-radius: 0; background: none !important; box-shadow: none !important; color: var(--on-3); font: 700 14px var(--ui); position: relative; }
  .dnav a:hover { color: var(--on-2); } .dnav a.on { color: var(--on) !important; }
  .dnav a.on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--buy); }
  .stabs { flex: 0 1 auto; height: 40px; padding: 3px; border-radius: 999px; background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px var(--hair); }
  .stabs button { height: 34px; padding: 0 14px; font-size: 13.5px; } .stabs button::before { inset: 0; }
  .top-c .ibtn, .top-c .pnl { height: 40px; }
  #pnl { display: flex; }
  body:not([data-page="deck"]) .top-c { visibility: hidden; }

  /* the hero, left: lots of air, one line, one primary action; the live market under it as plain rows */
  .trail { grid-area: trail; display: flex !important; flex-direction: column; justify-content: center; gap: 44px; align-items: flex-start; padding: 0 clamp(32px, 3.4vw, 56px) 64px clamp(28px, 4.2vw, 72px); min-height: 0; overflow: hidden; }
  .trail > * { max-width: 640px; width: 100%; }
  .tr-panel { max-width: 560px; }
  .tr-hero { display: flex; flex-direction: column; gap: 22px; }
  .tr-hero .eyebrow { margin: 0; display: inline-flex; align-items: center; gap: 10px; font: 800 12px var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--on-3); }
  .eyebrow .live-dot { margin: 0; }
  .tr-hero h1 { margin: 0; font: var(--w-display) clamp(40px, 3.7vw, 60px)/1.02 var(--display); letter-spacing: -.055em; color: var(--on); text-wrap: balance; }
  .tr-hero h1 em { display: block; font-style: normal; color: transparent; -webkit-text-stroke: 1.5px rgba(245, 248, 255, .88); margin-top: 4px; }
  .tr-hero p#tr-sub { display: block; margin: 0; font: 500 17px/1.6 var(--ui); color: var(--on-2); max-width: 46ch; }
  .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
  .tr-panel { background: none; box-shadow: none; padding: 0; gap: 4px; flex: 0 1 auto; min-height: 0; }
  .tr-panel .tr-head { padding: 0 0 10px; border-bottom: 1px solid var(--hair); }
  .tr-head b { font: 800 11.5px var(--ui); letter-spacing: .16em; } .tr-head span { font: 600 12px var(--ui); color: var(--on-3); }
  .tr-today { border-radius: 0; background: none; gap: 0; box-shadow: inset 0 -1px 0 var(--hair); }
  .tr-today div { background: none; padding: 12px 0 12px; }
  .tr-list { mask-image: none; -webkit-mask-image: none; gap: 0; overflow: hidden; max-height: 290px; }
  .tr-r, .tr-r.mk { background: none; box-shadow: inset 0 -1px 0 var(--hair); border-radius: 0; min-height: 56px; padding: 9px 4px 9px 0; }
  .tr-r.mk:hover { background: linear-gradient(90deg, rgba(232, 240, 255, .05), transparent); box-shadow: inset 0 -1px 0 var(--hair); }
  .tr-r .c-logo { width: 32px; height: 32px; }
  .tr-r.you { background: linear-gradient(90deg, rgba(25, 211, 138, .08), transparent); }

  /* your likes, right: a quiet rail */
  .lcol, body[data-page="likes"] .lcol { grid-area: likes; padding: 4px clamp(28px, 4.2vw, 72px) 40px 24px; gap: 2px; }
  .lcol > * { max-width: 300px; margin: 0; }
  .you-strip { margin-bottom: 14px; }
  .lk-top { padding: 0 0 10px; border-bottom: 1px solid var(--hair); }
  .lk-title { font-size: 15px; letter-spacing: -.02em; } .lk-sum { font-size: 12.5px; color: var(--on-3); }
  .lk-sec { margin: 18px 0 10px; font-size: 10.5px; }
  .lk-empty { flex-direction: column; align-items: flex-start; gap: 12px; }
  .lk-ghost { width: 76px; height: 92px; }
  .lks { background: none; box-shadow: inset 0 -1px 0 var(--hair); border-radius: 0; padding: 12px 0; }
  .lr { background: none; box-shadow: inset 0 -1px 0 var(--hair); border-radius: 0; padding: 10px 0; }

  /* the stage */
  .stage { grid-area: stage; }
  .deck { top: 6px; bottom: 132px; max-height: 790px; }
  .profile { top: 6px; bottom: 132px; }
  .dk-btns { bottom: 50px; }
  .stage::after { bottom: 118px; }
  .keys { display: flex; position: absolute; left: 0; right: 0; bottom: 14px; justify-content: center; gap: 18px; font: 600 12.5px var(--ui); color: var(--on-3); z-index: 2; }
  .keys kbd { min-width: 26px; height: 22px; padding: 0 6px; border-radius: 6px; font: 800 12px var(--ui); color: var(--on-2); background: rgba(232, 240, 255, .07); box-shadow: inset 0 0 0 1px var(--hair-2); }
  .pg-arrow { top: calc(6px + min(100% - 138px, 790px) * .32); background: rgba(232, 240, 255, .06); box-shadow: inset 0 0 0 1px var(--hair-2); }
  .pg-arrow:hover { background: rgba(232, 240, 255, .14); color: var(--on); }

  /* pages over the stage span the whole width under the header */
  body:not([data-page="deck"]):not([data-page="likes"]) .page { grid-row: 2 / 4; grid-column: 1 / -1; padding: 24px clamp(28px, 4.2vw, 72px) 48px; }
  body:not([data-page="deck"]):not([data-page="likes"]) .trail, body:not([data-page="deck"]):not([data-page="likes"]) .lcol { display: none !important; }
  .pg { max-width: 1120px; }
}
@media (min-width: 1240px) and (max-height: 820px) {
  .trail { gap: 28px; padding-bottom: 32px; } .tr-hero { gap: 16px; } .tr-hero h1 { font-size: clamp(38px, 3.4vw, 54px); }
  .tr-list { max-height: 230px; } .tr-hero p#tr-sub { font-size: 16px; } .tr-hero .eyebrow { display: none; }
}

/* ---- the landing below the fold (desktop) */
body.has-landing { overflow-y: auto; overflow-x: hidden; }
.landing { max-width: 1240px; margin: 0 auto; padding: 24px clamp(28px, 4.2vw, 72px) 0; }
.landing[hidden] { display: none; }
.ld-sec { padding: 88px 0 16px; border-top: 1px solid var(--hair); }
.ld-head { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: end; gap: 24px; margin-bottom: 36px; }
.ld-n { font: 800 13px var(--ui); letter-spacing: .14em; color: var(--on-3); padding-bottom: 8px; }
.ld-head .eyebrow { display: block; margin-bottom: 12px; font: 800 12px var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--on-3); }
.ld-head h2 { margin: 0; font: var(--w-display) 40px/1.06 var(--display); letter-spacing: -.05em; color: var(--on); }
.ld-more { font: 700 14px var(--ui); color: var(--on-2); padding-bottom: 8px; } .ld-more:hover { color: var(--on); }
.ld-how .hw-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.ld-fees { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.ld-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border-radius: 18px; overflow: hidden; background: var(--hair); box-shadow: inset 0 0 0 1px var(--hair); }
.ld-tiers div { background: rgba(12, 19, 38, .92); padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 6px; }
.ld-tiers b { font: var(--w-display) 34px/1 var(--display); letter-spacing: -.05em; color: var(--on); } .ld-tiers span { font: 600 13px var(--ui); color: var(--on-3); }
.ld-tiers div:first-child b { color: var(--buy); }
.ld-p { margin: 0; font: 500 16px/1.65 var(--ui); color: var(--on-2); max-width: 54ch; }
.ld-cta { border-top: 0; padding-top: 96px; }
.ld-cta-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center; padding: 48px 56px; border-radius: 24px; background: var(--g2); box-shadow: var(--sh-3); position: relative; overflow: hidden; }
.ld-cta-in::before { content: ""; position: absolute; right: -10%; top: -60%; width: 60%; height: 220%; background: radial-gradient(50% 50% at 50% 50%, rgba(25, 211, 138, .12), transparent 70%); pointer-events: none; }
.ld-cta-in h2 { margin: 10px 0 14px; font: var(--w-display) 40px/1.06 var(--display); letter-spacing: -.05em; color: var(--on); }
.ld-cta-in .eyebrow { display: block; font: 800 12px var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--on-3); margin: 0; }
.ld-cta-in .hero-cta { margin-top: 24px; }
.ld-qr { padding: 12px; border-radius: 18px; background: #fff; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); position: relative; }
.ld-qr .qr { width: 150px; height: 150px; } .ld-qr svg { width: 100%; height: 100%; display: block; }
.ld-foot { display: flex; align-items: center; gap: 32px; padding: 64px 0 56px; margin-top: 96px; border-top: 1px solid var(--hair); }
.ld-foot nav { display: flex; gap: 24px; } .ld-foot nav a { font: 700 14px var(--ui); color: var(--on-3); } .ld-foot nav a:hover { color: var(--on); }
.ld-nfa { margin-left: auto; font: 600 13px var(--ui); color: var(--on-3); }
@media (max-width: 1239px) { .ld-how .hw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ld-fees { grid-template-columns: 1fr; } }

/* ---- 960-1240: the hero copy steps aside (the deck + likes as before) */
@media (min-width: 960px) and (max-width: 1239px) {
  .dnav a { background: none !important; box-shadow: none !important; position: relative; color: var(--on-3); }
  .dnav a.on { color: var(--on) !important; } .dnav a.on::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--buy); }
}

/* ---- the deck: only the top card casts the long shadow onto the room; the cards under it lie flat on the deck (three stacked drop
   shadows read as a dark slab around the card on the lit room). The next card takes the shadow as it comes up. */
.deck > .card:not(.live) { box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 3px 0 var(--edge), 0 4px 0 rgba(8, 14, 32, .35); }
.deck > .card { transition: box-shadow .28s var(--ease); }
.deck > .card.live { box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 3px 0 var(--edge), 0 4px 0 rgba(8, 14, 32, .35), 0 30px 56px -30px rgba(2, 5, 14, .7), 0 10px 22px -14px rgba(2, 5, 14, .4); }
body.og .tr-hero .eyebrow, body.og .hero-cta { display: none !important; }

/* ---- points: the rules under the tiles get their own band (a hairline, air), two columns on wide screens */
.air-rules { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair); gap: 8px; align-self: stretch; }
.air-rules .wl-k { margin-bottom: 4px; }
.air-rules div { font-size: 14px; } .air-rules b { color: var(--on); font-weight: 750; }
@media (min-width: 960px) {
  .air-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; row-gap: 10px; width: 100%; max-width: none; align-self: stretch; }
  .air-rules .wl-k { grid-column: 1 / -1; }
  .air-rules div { padding-bottom: 10px; box-shadow: inset 0 -1px 0 var(--hair); }
}
/* ---- phone pages: the scroll fades out just under the header instead of a hard cut */
@media (max-width: 959px) {
  body:not([data-page="deck"]):not([data-page="likes"]) .page { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px); mask-image: linear-gradient(180deg, transparent 0, #000 14px); }
}
/* ---- real-only numbers appear once they are > 0 (lead 11-13): the grids close up around the ones shown */
@media (min-width: 1501px) { .tr-today.no-live { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 760px) { .lg-tiles { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); } }