/* ============================================================
   TableOne Studio — Marketing Site, section styles (part 2)
   ============================================================ */

/* ============================================================
   COST OF RENTING — the math, made visual (editorial, no card).
   A plain-spoken setup reads top-down; below it the two paths "duel".
   No boxed card, no chrome — just two big numbers and two bars where a
   full-bleed crimson bar towers over a short lime one. The length gap
   IS the argument ("not close"). Type is large and unmissable: the
   descriptive lines read at body size, not fine print. Crimson stays
   rationed to this loss frame only. Bars fill on reveal via .is-in.
   ============================================================ */
.rent { position: relative; background: var(--surface-sunken); border-top: 1px solid var(--border-subtle); overflow: hidden; }
/* faint crimson wash up top behind the loss, a lime hint low behind the win */
.rent__wash { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(46% 54% at 14% 20%, rgba(214,64,46,0.13), transparent 70%),
    radial-gradient(48% 60% at 86% 92%, rgba(201,227,38,0.07), transparent 72%); }

/* ---- the setup: headline left, supporting line bottom-right ---- */
.rent__head { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(32px, 5vw, 70px); align-items: end; }
.rent__head .display { max-width: 18ch; }
.rent__head .lede { margin-top: 0; max-width: 46ch; }
@media (max-width: 860px) { .rent__head { grid-template-columns: 1fr; gap: 22px; align-items: start; } }

/* ---- the duel: two paths, no card ---- */
.duel { --rail-gutter: clamp(32px, 4.5vw, 58px); position: relative; z-index: 1; margin-top: clamp(46px, 6vw, 84px);
  padding-left: var(--rail-gutter); display: grid; gap: clamp(40px, 5vw, 64px); }
.duel__side { position: relative; min-width: 0; }

/* vertical rail binding the two paths: crimson bleed up top в†’ lime ownership below */
.duel__rail { position: absolute; left: calc(var(--rail-gutter) / 2); top: 8px; bottom: 8px; width: 1px; background: var(--border-subtle); overflow: hidden; }
.duel__rail > i { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: linear-gradient(var(--danger), color-mix(in srgb, var(--danger) 40%, var(--accent)) 54%, var(--accent)); box-shadow: 0 0 12px rgba(214,64,46,0.4); transition: height 1.8s var(--ease-emphasis) 0.2s; }
.duel.is-in .duel__rail > i { height: 100%; }

/* a glowing node per path, sitting on the rail beside each label */
.duel__node { position: absolute; top: 3px; left: calc(-1 * var(--rail-gutter) / 2 - 6px); width: 13px; height: 13px; border-radius: 50%; background: var(--ink-700); border: 1px solid var(--border-strong); z-index: 1; transition: var(--t-control); }
.duel__side--rent .duel__node { color: var(--danger); }
.duel__side--own .duel__node { color: var(--accent); }
.duel.is-in .duel__node { background: currentColor; border-color: currentColor; box-shadow: 0 0 14px currentColor; }

/* real, staggered fade-in. The site's .reveal only animates transform (opacity
   is instant), and the parallax engine owns the numbers' transform — so we fade
   the pieces on their own opacity, which nothing else touches. */
.duel.reveal { transition: none; }   /* parent just gates visibility instantly; pieces animate themselves */
.duel__meta, .duel__bar, .duel__line, .duel__node, .duel__num {
  opacity: 0; transition: opacity 0.8s var(--ease-emphasis), transform 0.8s var(--ease-emphasis); }
.duel__meta, .duel__bar, .duel__line { transform: translateY(16px); }
.duel.is-in .duel__meta, .duel.is-in .duel__bar, .duel.is-in .duel__line,
.duel.is-in .duel__node, .duel.is-in .duel__num { opacity: 1; transform: none; }
/* cascade: rent path arrives, then own path */
.duel__side--rent .duel__meta { transition-delay: 0.04s; }
.duel__side--rent .duel__num  { transition-delay: 0.12s; }
.duel__side--rent .duel__bar  { transition-delay: 0.22s; }
.duel__side--rent .duel__line { transition-delay: 0.30s; }
.duel__side--own  .duel__meta { transition-delay: 0.30s; }
.duel__side--own  .duel__num  { transition-delay: 0.38s; }
.duel__side--own  .duel__bar  { transition-delay: 0.48s; }
.duel__side--own  .duel__line { transition-delay: 0.56s; }

.duel__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 14px; }
.duel__tag { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-sans); font-size: var(--text-sm); letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-body); }
.duel__sub { font-family: var(--font-sans); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); }
.duel__mark { font-size: 1.05em; line-height: 1; }
.duel__mark--x { color: var(--danger); }
.duel__mark--tick { color: var(--accent); }

.duel__num { display: block; font-family: var(--font-sans); font-weight: 800; letter-spacing: -0.04em; line-height: 0.92;
  font-size: clamp(2.75rem, 9vw, 6.25rem); font-variant-numeric: tabular-nums; }
.duel__side--rent .duel__num { color: var(--danger); text-shadow: 0 0 54px rgba(214,64,46,0.34); }
.duel__side--own .duel__num { color: var(--accent); text-shadow: 0 0 46px var(--lime-glow); }

.duel__bar { position: relative; height: 18px; margin-top: clamp(18px, 2.2vw, 26px); border-radius: var(--radius-pill); background: rgba(255,255,255,0.05); overflow: hidden; }
.duel__bar > i { display: block; position: relative; height: 100%; width: 0; border-radius: inherit; transition: width 1.5s var(--ease-emphasis) 0.2s; }
.duel__side--rent .duel__bar > i { background: linear-gradient(90deg, color-mix(in srgb, var(--danger) 55%, #000), var(--danger)); box-shadow: 0 0 20px rgba(214,64,46,0.5); }
/* a moving "bleed" shimmer travels along the crimson bar */
.duel__side--rent .duel__bar > i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.22) 50%, transparent 70%); background-size: 220% 100%; animation: bleedShimmer 2.8s linear infinite; }
@keyframes bleedShimmer { from { background-position: 200% 0; } to { background-position: -60% 0; } }
.duel__side--own .duel__bar > i { background: linear-gradient(90deg, var(--accent-press), var(--accent)); box-shadow: 0 0 18px var(--lime-glow); }
.duel.is-in .duel__side--rent .duel__bar > i { width: 100%; }
.duel.is-in .duel__side--own .duel__bar > i { width: var(--own-w, 19%); }

.duel__line { margin: clamp(16px, 1.8vw, 22px) 0 0; max-width: 58ch; font-size: var(--text-md); line-height: var(--lh-body); color: var(--text-muted); }
.duel__line b { color: var(--accent); font-weight: 600; }

/* ---- the payoff: what stays on your side of the table ---- */
.rent__payoff { position: relative; z-index: 1; margin-top: clamp(44px, 5vw, 68px); padding-top: clamp(28px, 3vw, 36px); border-top: 1px solid var(--border-subtle);
  display: flex; align-items: baseline; gap: 6px 22px; flex-wrap: wrap; }
.rent__payoff-k { font-family: var(--font-sans); font-size: var(--text-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.rent__payoff-v { font-family: var(--font-sans); font-weight: 800; font-size: clamp(2.5rem, 6vw, 4rem); letter-spacing: -0.04em; line-height: 0.95; color: var(--accent); text-shadow: 0 0 30px var(--lime-glow); font-variant-numeric: tabular-nums; }
.rent__payoff-c { margin: 0; flex: 1 1 18ch; min-width: 16ch; font-size: var(--text-lg); line-height: var(--lh-snug); color: var(--text-body); }
.rent__forever { font-family: var(--font-display); font-style: italic; color: var(--accent); text-shadow: 0 0 22px var(--lime-glow); }

.rent__cage { position: absolute; right: -6%; top: 50%; transform: translateY(-50%); width: 38%; max-width: 500px; opacity: 0.09; pointer-events: none; filter: grayscale(0.4); z-index: 0; }
@media (max-width: 900px) { .rent__cage { display: none; } }

/* faint technical grid feathered into the left — texture + depth behind the numbers */
.rent__grid-bg { position: absolute; left: 0; top: 0; bottom: 0; width: 56%; z-index: 0; pointer-events: none; will-change: transform;
  background-image: var(--grid-lines); background-size: 64px 64px; opacity: 0.7;
  -webkit-mask-image: radial-gradient(78% 86% at 14% 40%, #000 0%, rgba(0,0,0,0.5) 46%, transparent 74%);
          mask-image: radial-gradient(78% 86% at 14% 40%, #000 0%, rgba(0,0,0,0.5) 46%, transparent 74%); }
@media (max-width: 900px) { .rent__grid-bg { width: 92%; opacity: 0.5; } }

/* floating glass render — the section's hero object. Sits behind the
   left-aligned numbers; parallax / zoom / spin are driven in site.js so it
   drifts up, scales toward you and rotates gently as you scroll through. */
.rent__art { position: absolute; z-index: 0; right: -1%; top: 54%; width: clamp(260px, 32vw, 500px); transform: translateY(-50%); pointer-events: none; }
.rent__art img { display: block; width: 100%; height: auto; filter: drop-shadow(0 44px 100px rgba(0,0,0,0.6)); will-change: transform;
  -webkit-mask-image: radial-gradient(72% 72% at 50% 50%, #000 52%, transparent 100%);
          mask-image: radial-gradient(72% 72% at 50% 50%, #000 52%, transparent 100%); }
/* labelled placeholder shown until the bespoke PNG is dropped in */
.rent__art.is-empty { aspect-ratio: 3 / 4; border: 1px dashed var(--border-accent); border-radius: var(--radius-lg); background: var(--accent-soft); display: flex; align-items: center; justify-content: center; }
.rent__art.is-empty::before { content: "< >"; font-family: var(--font-sans); font-size: 2rem; letter-spacing: 0.12em; color: var(--accent); opacity: 0.7; }
.rent__art.is-empty::after { content: "add " attr(data-ph); position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; font-family: var(--font-sans); font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
@media (max-width: 900px) { .rent__art { display: none; } }

/* small ambient glass render on the left, sitting behind the numbers */
.rent__art-l { position: absolute; z-index: 0; left: -4%; top: 48%; transform: translateY(-50%); width: clamp(220px, 26vw, 380px); opacity: 0.55; pointer-events: none; }
.rent__art-l img { display: block; width: 100%; height: auto; will-change: transform; filter: drop-shadow(0 30px 70px rgba(0,0,0,0.5));
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 48%, transparent 100%);
          mask-image: radial-gradient(70% 70% at 50% 50%, #000 48%, transparent 100%); }
@media (max-width: 900px) { .rent__art-l { opacity: 0.3; width: 52%; left: -10%; } }

/* the big numbers pop toward you on scroll (data-zoom in site.js); keep the
   growth anchored so they don't drift off their left margin. */
.duel__num[data-zoom] { transform-origin: left center; }

/* guarantee the bars are shown even if .is-in / transitions never fire */
@media (prefers-reduced-motion: reduce) {
  .duel__bar > i { transition: none; }
  .duel__side--rent .duel__bar > i { width: 100%; }
  .duel__side--own .duel__bar > i { width: var(--own-w, 19%); }
  .duel__side--rent .duel__bar > i::after { animation: none; }
  .duel__rail > i { transition: none; height: 100%; }
  .duel__node { background: currentColor; border-color: currentColor; }
  .duel__meta, .duel__bar, .duel__line, .duel__node, .duel__num { opacity: 1; transform: none; transition: none; }
}

/* ---- Section 01 on phones: the desktop section-opener type lands oversized
   here and the section reads as a wall. Pull the headline + copy down and
   tighten the rhythm so it scans; the big duel numbers stay the focal point. */
/* phone copy swap: the verbose desktop prose is replaced with tighter lines so
   the section isn't a wall of text — the hook, numbers + payoff stay intact */
.rent .m-only { display: none; }
@media (max-width: 768px) {
  .rent__head { gap: 30px; }                                  /* headline → lede */
  .rent__head .display { font-size: clamp(1.7rem, 6.4vw, 2.3rem); line-height: 1.16; max-width: 22ch; }
  .rent__head .lede { font-size: 1rem; line-height: 1.6; margin-top: 8px; }
  .duel { margin-top: 56px; gap: 52px; }                      /* head → duel, and between the two paths */
  .duel__meta { margin-bottom: 18px; }                        /* label → big number */
  .duel__num { font-size: clamp(2.25rem, 12.5vw, 3.1rem); }
  .duel__tag { font-size: var(--text-xs); }
  .duel__bar { margin-top: 22px; }                            /* number → bar */
  .duel__line { margin-top: 18px; font-size: 0.95rem; line-height: 1.55; }
  .rent__payoff { margin-top: 56px; padding-top: 34px; gap: 12px 20px; }
  .rent__payoff-v { font-size: clamp(2rem, 10.5vw, 2.85rem); }
  .rent__payoff-c { font-size: 1rem; line-height: 1.5; }
  .rent .d-only { display: none; }
  .rent .m-only { display: inline; }
}

/* ---------- WHAT WE BUILD — calm wired platform stack ---------- */
#build { overflow: hidden; }
#build .wrap { position: relative; z-index: 1; }   /* content above the ambient bg */

/* ambient background layers */
.sec-bg { position: absolute; z-index: 0; pointer-events: none; }
.sec-bg--wash { inset: 0; background: radial-gradient(46% 56% at 80% 16%, var(--lime-glow-soft), transparent 70%); }
.sec-bg--grid { inset: 0; background-image: var(--grid-lines); background-size: 72px 72px; opacity: 0.55; will-change: transform;
  -webkit-mask-image: radial-gradient(64% 72% at 84% 26%, #000 0%, transparent 72%);
          mask-image: radial-gradient(64% 72% at 84% 26%, #000 0%, transparent 72%); }
.sec-bg--render { top: -6%; right: -7%; width: clamp(240px, 28vw, 460px); }
.sec-bg--render img { display: block; width: 100%; height: auto; opacity: 0.2; will-change: transform; filter: drop-shadow(0 30px 70px rgba(0,0,0,0.5));
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 46%, transparent 100%);
          mask-image: radial-gradient(70% 70% at 50% 50%, #000 46%, transparent 100%); }
@media (max-width: 820px) { .sec-bg--render { opacity: 0.7; right: -16%; } }

.build__head { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; }
@media (max-width: 820px) { .build__head { grid-template-columns: 1fr; gap: 24px; } }
.build__body { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 70px; margin-top: 70px; align-items: center; }
@media (max-width: 820px) {
  .build__body { grid-template-columns: 1fr; gap: 40px; }
  /* the render is a tall 2:3 portrait — once the column goes full-width, sizing
     it by WIDTH makes it ~470px tall and it overflows the stage (and the scroll
     parallax then pushes it out of view). Size it by HEIGHT so it sits fully
     inside the frame instead. */
  .build__visual { min-height: 440px; }
  .build__visual img { width: auto; height: 400px; max-width: 90%; }
}

/* the glass stack — a soft, centered, heavily-blurred lime glow that fades to
   nothing well inside its own bounds, so it never reads as a box/edge. */
.build__visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 460px; }
/* subtle lime-tinted grid behind the stack — lit by the green pool in front of
   it and feathered with a radial fade so it melts into the gradient (no box) */
.build__grid { position: absolute; left: 50%; top: 54%; width: 132%; aspect-ratio: 1 / 1.08; transform: translate(-50%, -50%); z-index: -3; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(201,227,38,0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(201,227,38,0.10) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(closest-side, #000 28%, rgba(0,0,0,0.4) 58%, transparent 82%);
          mask-image: radial-gradient(closest-side, #000 28%, rgba(0,0,0,0.4) 58%, transparent 82%); }

/* green gradient pool behind the stack — exposed lime, blurred and transparent
   at the edges so it stays smooth (no box) but clearly reads as a green glow */
.build__backdrop { position: absolute; left: 50%; top: 54%; width: 145%; aspect-ratio: 1 / 1.04; transform: translate(-50%, -50%); z-index: -2; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(216,243,60,0.85) 0%, rgba(201,227,38,0.55) 30%, rgba(201,227,38,0.24) 52%, rgba(201,227,38,0.08) 68%, transparent 80%);
  filter: blur(40px); opacity: 1; animation: buildPulse 5s ease-in-out infinite; }
.build__visual img { width: 92%; max-width: 460px; object-fit: contain; will-change: transform; filter: drop-shadow(0 30px 80px rgba(0,0,0,0.6));
  -webkit-mask-image: radial-gradient(84% 84% at 50% 56%, #000 66%, transparent 100%);
          mask-image: radial-gradient(84% 84% at 50% 56%, #000 66%, transparent 100%); }
/* broad ambient wash — centered, blurred, transparent by ~65% radius */
.build__visual::after { content: ""; position: absolute; left: 50%; top: 54%; width: 94%; aspect-ratio: 1 / 1.05; transform: translate(-50%, -50%); z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, var(--lime-glow-soft) 0%, transparent 66%); filter: blur(58px); opacity: 0.9; animation: buildPulse 5s ease-in-out infinite; }
/* brighter tight core */
.build__visual::before { content: ""; position: absolute; left: 50%; top: 54%; width: 52%; aspect-ratio: 1; transform: translate(-50%, -50%); z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, var(--lime-glow) 0%, var(--lime-glow-soft) 45%, transparent 72%); filter: blur(40px); opacity: 0.6; animation: buildCore 3.4s ease-in-out infinite; }
@keyframes buildPulse { 0%, 100% { opacity: 0.72; transform: translate(-50%, -50%) scale(0.96); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } }
@keyframes buildCore { 0%, 100% { opacity: 0.42; transform: translate(-50%, -50%) scale(0.92); } 50% { opacity: 0.78; transform: translate(-50%, -50%) scale(1.1); } }

/* the list as a quiet wired pipeline: a rail with an ambient lime pulse */
.stack-list { --rail-x: 18px; position: relative; display: flex; flex-direction: column; padding-left: 40px; }
.stack-rail { position: absolute; left: var(--rail-x); top: 14px; bottom: 14px; width: 1px; background: var(--border-subtle); overflow: hidden; }
.stack-rail::after { content: ""; position: absolute; left: -1px; right: -1px; height: 24%; top: -24%; background: linear-gradient(to bottom, transparent, var(--accent)); box-shadow: 0 0 12px var(--lime-glow); animation: stackBeam 3.6s linear infinite; }
@keyframes stackBeam { from { top: -26%; } to { top: 100%; } }

.stack-row { position: relative; padding: 22px 4px; border-bottom: 1px solid var(--border-subtle); }
.stack-row:last-child { border-bottom: none; }
.stack-row.reveal.is-in { transition-delay: calc(var(--i, 0) * 80ms); }
/* a small static marker dot on the rail (no numbers, no hover) */
.stack-row__node { position: absolute; top: 30px; left: -26px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 9px var(--lime-glow); }
.stack-row__t { color: var(--text-heading); font-weight: 600; font-size: 1.3rem; letter-spacing: var(--tracking-snug); }
.stack-row__d { color: var(--text-muted); font-size: 1rem; margin-top: 6px; line-height: 1.55; max-width: 52ch; }

@media (prefers-reduced-motion: reduce) {
  .stack-rail::after { animation: none; top: 0; height: 100%; opacity: 0.35; }
  .build__visual::after, .build__visual::before { animation: none; }
}

/* ---------- WHAT YOU OWN — pinned, scroll-scrubbed ---------- */
.own { position: relative; overflow: visible; }
.own::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--spotlight-lime); opacity: 0.7; pointer-events: none;
  /* the spotlight peaks at the section's top edge — fade it in over the first
     ~180px so it never lands as a hard bright seam against the section above */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 180px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 180px); }
.own__pin { overflow: hidden; }            /* clip the glow/render spill, not the sticky ancestor */
.own__pin { position: relative; padding-block: var(--section-y); }
/* desktop: pin the section and scrub the features in */
@media (min-width: 941px) and (prefers-reduced-motion: no-preference) {
  .own[data-own] { min-height: 280vh; padding: 0; }
  /* clear the fixed nav so the "03 / What you actually own" heading never tucks under it */
  .own__pin { position: sticky; top: 0; min-height: 100vh; box-sizing: border-box; padding: 92px 0 40px; display: flex; align-items: center; }
}
.own__grid { position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 80px; align-items: center; }
@media (max-width: 940px) { .own__grid { grid-template-columns: 1fr; gap: 48px; } }

/* glass visual */
.own__visual { display: flex; flex-direction: column; align-items: center; }
.own__art { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; min-height: 420px; }
.own__art img { width: 92%; max-width: 440px; object-fit: contain; filter: drop-shadow(0 40px 90px rgba(0,0,0,0.65)); will-change: transform; }
/* phone mockup is a tall portrait — constrain by height so it sits elegantly in the column */
.own__phone { width: auto !important; max-width: 100% !important; max-height: 560px; filter: drop-shadow(0 50px 100px rgba(0,0,0,0.7)) !important; }
/* lime-tinted grid behind the render, radially feathered to melt into the glow */
.own__artgrid { position: absolute; left: 50%; top: 52%; width: 122%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(201,227,38,0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(201,227,38,0.10) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(closest-side, #000 26%, rgba(0,0,0,0.4) 56%, transparent 80%);
          mask-image: radial-gradient(closest-side, #000 26%, rgba(0,0,0,0.4) 56%, transparent 80%); }
/* exposed green gradient pool behind the render (matches the build section) */
.own__halo { position: absolute; left: 50%; top: 56%; width: 128%; aspect-ratio: 1 / 1.04; inset: auto; height: auto; transform: translate(-50%, -50%); z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(216,243,60,0.72) 0%, rgba(201,227,38,0.4) 32%, rgba(201,227,38,0.16) 54%, transparent 76%);
  filter: blur(44px); opacity: 0.95; }

/* "source code / 100% yours" — a free-standing ownership signature (not a card) */
.own__seal { margin-top: 30px; }
.own__seal-text { display: flex; flex-direction: column; gap: 6px; }
.own__seal-k { font-family: var(--font-sans); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
/* the value uses the brand type pairing — bold lime numeral + Cormorant italic — with a glowing underline */
.own__seal-v { position: relative; display: inline-block; width: max-content; font-size: 2.15rem; line-height: 1.02; padding-bottom: 9px; }
.own__seal-v b { font-family: var(--font-sans); font-weight: 800; letter-spacing: -0.03em; color: var(--accent); text-shadow: 0 0 24px var(--lime-glow); }
.own__seal-v em { font-family: var(--font-display); font-style: italic; font-weight: 500; color: var(--text-heading); }
.own__seal-v::after { content: ""; position: absolute; left: 1px; bottom: 0; width: 100%; height: 1.5px;
  background: linear-gradient(90deg, var(--accent), rgba(201,227,38,0.12) 82%, transparent); box-shadow: 0 0 10px var(--lime-glow); }

.own__head { margin-bottom: 16px; }

/* ambient glass render behind the feature list — subtle depth, never competes with the text.
   dimmed + softened + feathered so it reads as atmosphere, not a second hero object. */
.own__list { position: relative; }
.own__listart { position: absolute; inset: -16% -10% -16% -4%; z-index: -1; pointer-events: none;
  display: flex; align-items: center; justify-content: center; overflow: visible; }
.own__listart img { width: auto; height: 128%; max-width: 132%; object-fit: contain; opacity: 0.22;
  filter: saturate(0.95) blur(0.5px) drop-shadow(0 30px 70px rgba(0,0,0,0.6)); will-change: transform;
  -webkit-mask-image: radial-gradient(96% 88% at 56% 48%, #000 28%, rgba(0,0,0,0.42) 60%, transparent 82%);
          mask-image: radial-gradient(96% 88% at 56% 48%, #000 28%, rgba(0,0,0,0.42) 60%, transparent 82%); }
@media (max-width: 940px) { .own__listart { display: none; } }

/* sequential feature list with a filling rail */
.ownseq { position: relative; margin-top: 36px; padding-left: 38px; }
.ownseq__rail { position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: var(--border-subtle); overflow: hidden; }
.ownseq__rail i { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: linear-gradient(var(--accent), var(--accent-press)); box-shadow: 0 0 10px var(--lime-glow); transition: height 1.8s var(--ease-emphasis); }
.ownseq.is-filled .ownseq__rail i { height: 100%; }

.ofeat { position: relative; padding: 18px 0 20px; border-bottom: 1px solid var(--border-subtle); opacity: 0; transform: translateX(54px); transition: opacity 0.7s var(--ease-emphasis), transform 0.7s var(--ease-emphasis); }
.ofeat:last-child { border-bottom: none; }
.ofeat.is-in, .ofeat.is-lit { opacity: 1; transform: none; }
/* while pinned, JS sets opacity/transform every frame — kill transitions so it tracks the scroll exactly */
.own.is-pinned .ofeat { transition: none; }
.own.is-pinned .ownseq__rail i { transition: none; }
/* compact the pinned column so the whole list fits one viewport — otherwise the
   centered block overflows and the headline gets clipped off the top */
@media (min-width: 941px) {
  .own.is-pinned .ofeat { padding: 11px 0 12px; }
  .own.is-pinned .ofeat p { font-size: 0.9rem; margin-top: 7px; }
  .own.is-pinned .ownseq { margin-top: 22px; }
  .own.is-pinned .own__head { margin-bottom: 10px; }
}
.ofeat__node { position: absolute; left: -38px; top: 24px; width: 11px; height: 11px; border-radius: 50%; background: var(--ink-700); border: 1px solid var(--border-strong); transition: var(--t-control); }
.ofeat.is-in .ofeat__node, .ofeat.is-lit .ofeat__node { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 14px var(--lime-glow); }
.ofeat__head { display: flex; align-items: baseline; gap: 14px; }
.ofeat__k { font-family: var(--font-sans); font-size: 0.7rem; color: var(--accent); letter-spacing: 0.1em; }
.ofeat h4 { font-size: 1.375rem; font-weight: 600; color: var(--text-heading); letter-spacing: var(--tracking-snug); }
.ofeat p { color: var(--text-muted); font-size: 0.975rem; line-height: 1.62; margin-top: 10px; max-width: 52ch; }
.ofeat--accent h4 { color: var(--accent); }

/* reduced-motion / no-JS safety: features always visible, rail pre-filled */
@media (prefers-reduced-motion: reduce) {
  .ofeat { opacity: 1; transform: none; }
  .ownseq__rail i { transition: none; height: 100%; }
  .own__seal-dot::after { animation: none; }
  .own__seal-v { animation: none; }
}

/* ---------- ORIGINAL GAMES — pinned + scrubbed ---------- */
.games { background: var(--ink-1000); border-top: 1px solid var(--border-subtle); position: relative; overflow: visible; }
.games__pin { padding-block: var(--section-y); }
@media (min-width: 941px) and (prefers-reduced-motion: no-preference) {
  .games[data-games] { min-height: 250vh; padding: 0; }
  /* clear the fixed nav so the centred block never tucks the headline under it */
  .games__pin { position: sticky; top: 0; min-height: 100vh; box-sizing: border-box; padding: 96px 0 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
  .games__pin .games__reels { margin-top: 30px; }
  .games__pin .games__machine { width: min(360px, 44vh); margin: 0 auto; }
}
.games__hero { display: flex; flex-direction: column; align-items: center; text-align: center; }
.games__machine { width: min(440px, 80vw); margin: 12px auto 0; filter: drop-shadow(0 0 80px var(--lime-glow)); will-change: transform; }

/* original-games "reel readout" — annotated like a spec sheet, not cards */
.games__reels { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; max-width: 960px; margin: 54px auto 0; }
@media (max-width: 820px) { .games__reels { grid-template-columns: 1fr; gap: 44px; max-width: 420px; margin-top: 40px; } }
.greel { position: relative; text-align: center; padding: 0 30px; }
/* hairline dividers between the three readouts (desktop) */
.greel + .greel::before { content: ""; position: absolute; left: 0; top: 14%; bottom: 8%; width: 1px;
  background: linear-gradient(180deg, transparent, var(--border-strong) 26%, var(--border-strong) 74%, transparent); }
/* connector hairline + node rising toward the machine */
.greel__line { position: absolute; left: 50%; top: -32px; width: 1px; height: 28px; transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--accent)); opacity: 0.55; }
.greel__line::after { content: ""; position: absolute; left: 50%; bottom: -2px; width: 6px; height: 6px; transform: translateX(-50%); border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--lime-glow); }
@media (max-width: 820px) { .greel + .greel::before, .greel__line { display: none; } }
.greel__glyph { display: inline-flex; color: var(--accent); margin-bottom: 16px; }
.greel__glyph svg { width: 44px; height: 44px; filter: drop-shadow(0 0 12px var(--lime-glow)); }
.greel__k { display: block; font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent); }
.greel h4 { font-size: 1.375rem; margin: 12px 0 10px; color: var(--text-heading); }
.greel p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; max-width: 30ch; margin-inline: auto; }
/* reveal cascade reuses the .gtile JS hook */
.gtile { opacity: 0; transform: translateY(46px); transition: opacity 0.65s var(--ease-emphasis), transform 0.65s var(--ease-emphasis); }
.gtile.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .gtile { opacity: 1; transform: none; } }

/* ---------- SCALE PROOF — pinned + scroll-scrubbed ---------- */
.proof { min-height: 260vh; padding: 0; position: relative; background: var(--ink-1000); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.proof__pin { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
/* green gradient pool around the logo — lifts the section out of near-black */
.proof__pin::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 0; pointer-events: none;
  width: 92vmin; height: 92vmin; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(216,243,60,0.22) 0%, rgba(201,227,38,0.12) 32%, rgba(201,227,38,0.04) 55%, transparent 74%);
  filter: blur(26px); }
@supports not (position: sticky) { .proof { min-height: 100vh; } .proof__pin { position: relative; height: 100vh; } }
.proof__bg { position: absolute; z-index: 0; width: 66%; max-width: 740px; opacity: 0.5; filter: blur(2px); will-change: transform; }
/* faint speed-streak grid that the number punches through */
.proof__streak { position: absolute; inset: 0; z-index: 0; background-image: var(--grid-lines); background-size: 90px 90px; opacity: 0.12; mask-image: radial-gradient(60% 55% at 50% 50%, #000, transparent 78%); -webkit-mask-image: radial-gradient(60% 55% at 50% 50%, #000, transparent 78%); will-change: transform; }
.proof__num { position: relative; z-index: 2; font-family: var(--font-sans); font-weight: 800; font-variant-numeric: tabular-nums; font-size: clamp(5rem, 22vw, 18rem); line-height: 0.86; color: var(--accent); text-shadow: 0 0 60px var(--lime-glow); letter-spacing: -0.04em; will-change: transform; }
.proof__plus { color: var(--text-heading); }
.proof__cap { position: relative; z-index: 2; font-family: var(--font-sans); font-size: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-body); margin-top: 24px; }
.proof__sub { position: relative; z-index: 2; max-width: 40ch; margin: 22px auto 0; color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .proof { min-height: 100vh; } .proof__pin { position: relative; height: auto; padding-block: var(--section-y); } }

/* ---------- ARCHETYPES — concise three-operator gallery, glass emblem + one line ---------- */
.arch { margin-top: 60px; display: grid; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .arch { grid-template-columns: 1fr; gap: 46px; } }
.aitem { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 38px; }
/* hairline dividers between operators (desktop) */
.aitem + .aitem::before { content: ""; position: absolute; left: 0; top: 10%; bottom: 10%; width: 1px;
  background: linear-gradient(180deg, transparent, var(--border-subtle) 24%, var(--border-subtle) 76%, transparent); }
@media (max-width: 820px) { .aitem + .aitem::before { display: none; } }
/* signature glass emblem (on-brand placeholder shown until the PNG is supplied) */
.aitem__emblem { position: relative; width: 132px; height: 132px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; transition: transform var(--dur-base) var(--ease-emphasis); }
.aitem:hover .aitem__emblem { transform: translateY(-6px); }
.aitem__emblem img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 0 36px var(--lime-glow)); will-change: transform; }
.aitem__emblem.is-empty { border: 1px dashed var(--border-accent); border-radius: var(--radius-md); background: var(--accent-soft); }
.aitem__emblem.is-empty::before { content: "< >"; font-family: var(--font-sans); font-size: 1.4rem; color: var(--accent); opacity: 0.7; letter-spacing: 0.1em; }
.aitem__emblem.is-empty::after { content: "add " attr(data-ph); position: absolute; bottom: 9px; left: 0; right: 0; text-align: center; font-family: var(--font-sans); font-size: 0.52rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
.aitem__who { font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.aitem__line { font-family: var(--font-sans); font-weight: 600; font-size: 1.24rem; line-height: 1.32; color: var(--text-heading); max-width: 17ch; }

/* ---------- TIMELINE ---------- */
.timeline { background: var(--surface-sunken); border-top: 1px solid var(--border-subtle); overflow: hidden; }
.timeline .wrap { position: relative; z-index: 1; }   /* content above the ambient bg */
/* the stepper used to sit on a flat dark panel — give it the soft lime depth the
   other sections carry (top-right + a low counter-glow) so it lifts off black */
.timeline .sec-bg--wash {
  background:
    radial-gradient(56% 58% at 84% 8%, rgba(201,227,38,0.12), transparent 72%),
    radial-gradient(52% 52% at 8% 100%, rgba(201,227,38,0.07), transparent 74%);
}
.tl { margin-top: 56px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; }
@media (max-width: 900px) { .tl { grid-template-columns: 1fr; } }
.tl__rail { position: absolute; top: 7px; left: 0; right: 0; height: 1px; background: var(--border-subtle); }
.tl__rail i { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: var(--accent); box-shadow: 0 0 10px var(--lime-glow); transition: width 1.6s var(--ease-emphasis); }
.tl.is-filled .tl__rail i { width: 100%; }
/* mobile: the rail turns vertical, runs through the dot centres, and its green
   fill grows downward as the timeline scrolls into view */
@media (max-width: 900px) {
  .tl__rail { top: 8px; bottom: 16px; left: 5px; right: auto; width: 1px; height: auto; }
  .tl__rail i { width: 100%; height: 0; transition: height 1.6s var(--ease-emphasis); }
  .tl.is-filled .tl__rail i { height: 100%; }
  .tlstep { padding-left: 26px; }   /* clear the rail + dots */
  .tlstep::before { left: 0; }       /* 11px dot, centre 5.5px — sits on the rail */
}
.tlstep { padding: 28px 22px 0 0; position: relative; }
.tlstep::before { content: ""; position: absolute; top: 2px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--ink-700); border: 1px solid var(--border-strong); transition: var(--t-control); }
.tlstep.lit::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px var(--lime-glow); }
.tlstep__day { font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.tlstep__t { color: var(--text-heading); font-weight: 600; margin-top: 10px; }
.tlstep__d { color: var(--text-muted); font-size: 0.875rem; margin-top: 6px; line-height: 1.5; }
.tl__foot { margin-top: 44px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 0.95rem; color: var(--text-muted); }
.tl__foot .x { font-family: var(--font-sans); color: var(--danger); }

/* ---------- LICENSING — regulatory proof wall ---------- */
.licensing { position: relative; overflow: hidden; }
/* header mirrors "what we build": heading left, lede right, collapsing to one column */
.lic__head { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; }
@media (max-width: 820px) { .lic__head { grid-template-columns: 1fr; gap: 24px; } }

/* the composite is a transparent PNG — no plate. The certificates float on the
   page over a soft lime pool, drifting gently as if suspended. */
.lic__frame { position: relative; margin: 64px 0 0; }
.lic__glow { position: absolute; left: 50%; top: 52%; width: 86%; height: 86%; transform: translate(-50%, -50%); z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--lime-glow-soft) 0%, transparent 70%); filter: blur(60px); opacity: 0.8; }
.lic__scroll { position: relative; }
.lic__img { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 70px rgba(0,0,0,0.5));
  animation: licFloat 9s var(--ease-in-out, ease-in-out) infinite; will-change: transform; }
/* a slow, shallow vertical drift — suspended, not bobbing */
@keyframes licFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) { .lic__img { animation: none; } }

/* phones: show the whole 5-up composite, scaled to fit the screen width */
@media (max-width: 760px) {
  .lic__frame { margin-top: 44px; }
}

/* ---------- CTA ---------- */
.cta { position: relative; text-align: center; overflow: hidden; }
/* restrained top hairline that crowns the closing section */
.cta::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--border-subtle) 26%, var(--border-strong) 50%, var(--border-subtle) 74%, transparent); opacity: 0.8; }
/* background — one precise fine grid + a single soft overhead wash. Quiet and engineered, not busy. */
.cta__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.cta__bg::before { content: ""; position: absolute; inset: -2px; background-image: var(--grid-lines); background-size: 46px 46px; opacity: 0.2;
  -webkit-mask-image: radial-gradient(96% 78% at 50% 34%, #000 0%, rgba(0,0,0,0.4) 46%, transparent 76%);
          mask-image: radial-gradient(96% 78% at 50% 34%, #000 0%, rgba(0,0,0,0.4) 46%, transparent 76%); }
.cta__bg::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(58% 46% at 50% -4%, rgba(201,227,38,0.10), transparent 66%); }
/* lime pool sitting high, behind the headline only — kept subtle */
.cta__glow { position: absolute; left: 50%; top: 30%; transform: translate(-50%,-50%); z-index: 0; pointer-events: none;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(201,227,38,0.15) 0%, rgba(201,227,38,0.05) 44%, transparent 72%); filter: blur(30px); }
/* the glass splash, crisp and glowing, framed BEHIND THE HEADLINE so it never sits over the paragraph.
   the wrapper handles centring; the parallax/zoom/spin transform lives on the <img> so it can't fight it. */
.cta__art { position: absolute; left: 50%; top: 30%; transform: translate(-50%,-50%); z-index: 1; pointer-events: none;
  width: min(580px, 84vw); display: flex; align-items: center; justify-content: center;
  -webkit-mask-image: radial-gradient(closest-side, #000 50%, rgba(0,0,0,0.5) 74%, transparent 90%);
          mask-image: radial-gradient(closest-side, #000 50%, rgba(0,0,0,0.5) 74%, transparent 90%); }
.cta__splash { width: 100%; opacity: 0.72; filter: drop-shadow(0 30px 80px rgba(0,0,0,0.6)) drop-shadow(0 0 64px var(--lime-glow)); will-change: transform; }
.cta__inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }
/* soft dark scrim behind the copy so text stays crisp wherever the glass reaches */
.cta__inner::before { content: ""; position: absolute; left: 50%; top: 52%; transform: translate(-50%,-50%); z-index: -1; pointer-events: none;
  width: 130%; height: 128%; background: radial-gradient(58% 56% at 50% 50%, rgba(8,8,9,0.72) 0%, rgba(8,8,9,0.45) 46%, transparent 76%); }
.cta h2 { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-display-2); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); color: var(--text-heading); text-shadow: 0 2px 30px rgba(0,0,0,0.6); }
.cta__sub { color: var(--text-body); font-size: var(--text-lg); margin: 24px auto 0; max-width: 46ch; text-shadow: 0 1px 14px rgba(0,0,0,0.7); }
.cta__act { margin-top: 36px; display: flex; justify-content: center; }
.cta__note { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--text-faint); margin-top: 22px; letter-spacing: 0.06em; }

/* ---------- FOOTER ---------- */
.foot { border-top: 1px solid var(--border-subtle); padding-block: 56px 40px; }
.foot__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.foot__brand { display: inline-flex; align-items: center; gap: 11px; }
.foot__logo { height: 38px; width: auto; }
.foot__word { font-family: var(--font-sans); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--text-heading); text-transform: lowercase; line-height: 1; }
.foot__word span { color: var(--text-muted); font-weight: 400; }
.foot__cols { display: flex; gap: 70px; flex-wrap: wrap; }
.foot__col h6 { font-family: var(--font-sans); font-size: 0.65rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); margin: 0 0 16px; font-weight: 500; }
.foot__col a { display: block; color: var(--text-muted); font-size: 0.9rem; margin-bottom: 11px; transition: color var(--dur-fast) var(--ease-out); }
.foot__col a:hover { color: var(--accent); }
.foot__bottom { margin-top: 50px; padding-top: 24px; border-top: 1px solid var(--border-subtle); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--font-sans); font-size: 0.7rem; color: var(--text-faint); letter-spacing: 0.04em; }

/* ============================================================
   SCROLL STORYTELLING LAYER
   ============================================================ */

/* thin scroll-progress bar (JS sets --sp 0..1) */
.scrollbar { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200; transform: scaleX(var(--sp, 0)); transform-origin: 0 50%; background: var(--accent); box-shadow: 0 0 12px var(--lime-glow); }
@media (prefers-reduced-motion: reduce) { .scrollbar { display: none; } }

/* ---------------------------------------------------------------------------
   GRADIENT DE-BANDING — fine grain dither over the whole canvas.
   8-bit mobile panels quantise the lime-glow→black ramps into visible steps.
   A grayscale fractal-noise layer in soft-light has a neutral (~0.5) mean, so
   it leaves the flat pure-black floor alone and only perturbs the banded ramp
   — which dithers the steps into a smooth blend. Fixed + own GPU layer = no
   scroll repaint; pointer-events:none so it never intercepts taps. */
.grain {
  position: fixed; inset: 0; z-index: 9000; pointer-events: none;
  opacity: 0.6; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  transform: translateZ(0); will-change: transform;
}

/* always-alive proof marquee */
.marquee { position: relative; overflow: hidden; padding-block: 20px; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); background: var(--surface-sunken); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: inline-flex; align-items: center; gap: 26px; white-space: nowrap; will-change: transform; animation: marquee 38s linear infinite; }
.marquee__item { font-family: var(--font-sans); font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-body); }
/* a small glowing lime diamond (card-suit nod) replaces the plain "/" */
.marquee__sep { display: inline-flex; align-items: center; font-size: 0; }
.marquee__sep::before { content: ""; width: 7px; height: 7px; border-radius: 1.5px; transform: rotate(45deg);
  background: linear-gradient(135deg, var(--lime-300), var(--lime-500)); box-shadow: 0 0 9px var(--lime-glow), inset 0 0 2px rgba(255,255,255,0.4); }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ============================================================
   ORIGINALS LIBRARY — interactive deck of game cards
   Pinned, scroll-dealt: the section sticks while you scroll, the
   buckled stack fans open, then deals through every card one by
   one before the page releases. Positions/opacity/z are driven
   by JS (data-deck), mapped to pinned-scroll progress. Scales to
   any number of cards — just add more <figure data-deck-card>.
   ============================================================ */
.originals { position: relative; }
.originals__pin { position: relative; padding-block: var(--section-y); overflow: hidden; }
.originals__pin::before { /* green glows in the corners + a soft overhead wash */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(68% 64% at 0% 100%, rgba(201,227,38,0.20), transparent 78%),
    radial-gradient(66% 62% at 100% 0%, rgba(201,227,38,0.18), transparent 76%),
    radial-gradient(62% 60% at 100% 100%, rgba(166,205,46,0.15), transparent 78%),
    radial-gradient(60% 60% at 0% 0%, rgba(166,205,46,0.12), transparent 80%),
    radial-gradient(90% 64% at 50% 22%, rgba(201,227,38,0.09), transparent 72%);
}
/* desktop: pin the section and deal the deck across the scroll */
@media (min-width: 941px) and (prefers-reduced-motion: no-preference) {
  .originals[data-originals] { min-height: 340vh; padding: 0; }
  .originals__pin {
    position: sticky; top: 0; min-height: 100vh; box-sizing: border-box;
    padding: 92px 0 48px; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
  }
}
.originals__head { position: relative; text-align: center; z-index: 2; }
.originals__sub {
  max-width: 54ch; margin: 22px auto 0; color: var(--text-muted);
  font-size: 1.04rem; line-height: 1.62;
}

.deck-wrap {
  position: relative; z-index: 1;
  margin-top: 64px; display: flex; flex-direction: column; align-items: center; gap: 34px;
}

/* ambient glass cluster on the right (cards deal off to the LEFT, so this stays clear) */
.originals__art {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  width: clamp(170px, 21vw, 290px); height: auto;
  filter: brightness(0.55) contrast(1.05) drop-shadow(0 26px 52px rgba(0,0,0,0.62));
  opacity: 0.82;
  animation: originals-float 7.5s ease-in-out infinite;
}
.originals__art--right { right: clamp(8px, 3.5vw, 84px); bottom: 9%; }
.originals__art--left {
  left: clamp(8px, 3vw, 66px); top: 12%;
  width: clamp(140px, 17vw, 240px);
  filter: brightness(0.5) contrast(1.05) drop-shadow(0 26px 52px rgba(0,0,0,0.62));
  opacity: 0.78;
  animation-duration: 8.8s; animation-delay: -2.6s;
}
@keyframes originals-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(1.6deg); }
}
/* mobile: keep both ambient renders as faint corner depth, tucked partly
   off-screen so they frame the deck without crowding the cards or copy */
/* mobile: pin and scroll-deal just like desktop, but tuned for phones. The tall
   section gives ~2.2 viewport-heights of scrub for the full hand, so the cards
   swipe through slowly and deliberately. */
@media (max-width: 940px) and (prefers-reduced-motion: no-preference) {
  .originals[data-originals] { min-height: 280vh; padding: 0; }
  .originals__pin {
    position: sticky; top: 0; min-height: 100vh; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
  }
  .deck-wrap { margin-top: clamp(28px, 5vh, 46px); }
}
@media (max-width: 940px) {
  .originals__art--left  { left: -26px; top: 4%; width: 104px; opacity: 0.4; }
  .originals__art--right { right: -22px; bottom: 5%; width: 120px; opacity: 0.46; }
  /* the glowing pin fills the section edge-to-edge — kill the section's own
     padding so the glow runs to both edges with no black bands above/below */
  .originals { padding-block: 0; }
  .originals__pin { padding-block: clamp(72px, 13vh, 120px); }
  /* lighter card shadows on phones — drop-shadow is the heavy paint; trimming
     it makes the scroll-dealt animation noticeably smoother */
  .gcard img { filter: drop-shadow(0 12px 24px rgba(0,0,0,0.5)); }
  .gcard.is-front img { filter: drop-shadow(0 0 18px var(--lime-glow)) drop-shadow(0 16px 30px rgba(0,0,0,0.55)); }
}
@media (prefers-reduced-motion: reduce) { .originals__art { animation: none; } }

/* drifting green particles up both sides — lift the darkness with a little life */
.originals__particles { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.opart {
  position: absolute; bottom: -12px; left: var(--x);
  width: var(--s); height: var(--s); border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px 1px var(--lime-glow);
  opacity: 0; will-change: transform, opacity;
  animation: opart-rise var(--d) linear var(--dl) infinite;
}
@keyframes opart-rise {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  12%  { opacity: var(--o); }
  88%  { opacity: var(--o); }
  100% { transform: translate3d(var(--drift), calc(-1 * var(--rise)), 0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .originals__particles { display: none; } }

/* The stage. Cards are absolutely stacked inside; JS positions them. */
.deck {
  position: relative; width: min(580px, 88vw); aspect-ratio: 1672 / 941;
  perspective: 1500px; cursor: pointer; outline: none;
  /* breathing room so the fanned back-cards aren't clipped */
  margin: 22px 60px 8px 0;
}
.deck::after { /* lime pool the deck sits on */
  content: ""; position: absolute; left: 50%; bottom: -7%; transform: translateX(-50%);
  width: 76%; height: 30px; border-radius: 50%; z-index: 0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(201,227,38,0.16), transparent 72%);
  filter: blur(7px);
}

.gcard {
  position: absolute; inset: 0; margin: 0;
  transform-origin: 50% 64%; backface-visibility: hidden;
  transition: transform 0.7s var(--ease-emphasis), opacity 0.7s var(--ease-emphasis);
  will-change: transform, opacity;
}
.gcard img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  filter: drop-shadow(0 22px 44px rgba(0,0,0,0.58));
  transition: filter 0.7s var(--ease-emphasis);
}
.gcard.is-front img { /* the dealt, face-up card gets the lime glow */
  filter: drop-shadow(0 0 30px var(--lime-glow)) drop-shadow(0 30px 60px rgba(0,0,0,0.62));
}

@media (max-width: 720px) {
  .deck { width: 92vw; margin: 18px 40px 6px 0; }
  .deck-wrap { margin-top: 46px; gap: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .gcard { transition: none; }
}

/* ============================================================
   MOBILE LAYER — small-screen polish (desktop ≥ 921px untouched).
   The desktop grids already collapse at 820–940px; this layer is a
   dedicated pass for phones/tablets: a real nav menu, hero depth +
   gutters, tighter density, fluid type, a vertical timeline stepper,
   touch-sized CTAs and a centred deck. Every rule is gated to a small
   max-width, so nothing here can reach the desktop layout.
   ============================================================ */

/* hamburger button is mobile-only; never rendered on desktop */
.nav__toggle { display: none; }
/* lock the page behind the open menu */
body.nav-locked { overflow: hidden; }

/* ---- Flattened hero: bring back one signature glass object + side gutters ---- */
@media (max-width: 920px) {
  .hero { padding-inline: var(--gutter); }
  /* the desktop 3D cluster is hidden when flat; re-introduce just the central
     game-pieces render as ambient depth behind the headline (veil keeps text crisp) */
  .plate--objL { display: block; left: 50%; top: 47%; width: min(82vw, 400px); opacity: 0.5; }
  .plate--objL img { filter: saturate(1.04) brightness(1) drop-shadow(0 0 38px rgba(201,227,38,0.18)); }
}

/* ---- Mobile nav: hamburger + slide-down menu panel ---- */
@media (max-width: 880px) {
  .nav { padding-block: 13px; }
  .nav__brand { margin-left: 0; position: relative; z-index: 3; }
  .nav__logo { height: 34px; }
  .nav__word { font-size: 1.3rem; }

  .nav__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-right: -8px; position: relative; z-index: 3;
    background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .nav__toggle-box { position: relative; width: 24px; height: 16px; }
  .nav__toggle-box i {
    position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--text-heading);
    transition: transform .34s var(--ease-emphasis), opacity .18s ease, top .34s var(--ease-emphasis);
  }
  .nav__toggle-box i:nth-child(1) { top: 0; }
  .nav__toggle-box i:nth-child(2) { top: 7px; }
  .nav__toggle-box i:nth-child(3) { top: 14px; }
  .nav.is-open .nav__toggle-box i:nth-child(1) { top: 7px; transform: rotate(45deg); }
  .nav.is-open .nav__toggle-box i:nth-child(2) { opacity: 0; }
  .nav.is-open .nav__toggle-box i:nth-child(3) { top: 7px; transform: rotate(-45deg); }

  /* the menu drops in from the top as a blurred dark panel */
  .nav__links {
    position: fixed; top: 0; left: 0; right: 0; z-index: 2;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 84px clamp(20px, 6vw, 34px) 30px;
    background: color-mix(in srgb, var(--ink-950) 97%, transparent);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.7);
    transform: translateY(-102%); opacity: 0; pointer-events: none;
    transition: transform .42s var(--ease-emphasis), opacity .42s var(--ease-emphasis);
  }
  .nav.is-open .nav__links { transform: none; opacity: 1; pointer-events: auto; }
  /* override the desktop rule that hides links below 880px */
  .nav__links .nav__link {
    display: block; font-size: 1.12rem; font-weight: 500; color: var(--text-body);
    padding: 17px 2px; border-bottom: 1px solid var(--border-subtle);
  }
  .nav__links .nav__link::after { display: none; }
  .nav__links .btn { margin-top: 22px; width: 100%; height: 56px; }
}

/* ---- Phone density, fluid spacing and component tuning ---- */
@media (max-width: 768px) {
  :root { --section-y: clamp(3.5rem, 9vh, 5.25rem); }

  .hero { padding-top: clamp(96px, 17vh, 140px); padding-bottom: 104px; }
  .hero__sub { font-size: 1.075rem; margin-top: 22px; }
  .hero__cta { flex-direction: column; align-items: stretch; gap: 12px; width: 100%; max-width: 360px; margin: 30px auto 0; }
  .hero__cta .btn { width: 100%; }
  /* slimmer CTAs on phones — the desktop --lg height/arrow are oversized here */
  .hero__cta .btn--lg { height: 54px; padding: 0 10px 0 26px; font-size: 0.96rem; }
  .hero__cta .btn--lg .btn__arrow { width: 34px; height: 34px; }
  .hero__stats { margin-top: 38px; gap: 22px 30px; }
  /* keep the scroll cue clear of "platform fees, forever" */
  .scroll-hint { bottom: 18px; }

  /* (build__visual height is set in the ≤820px block so the tall render fits) */
  .build__body { margin-top: 44px; }
  .own__art { min-height: 320px; }
  .own__phone { max-height: 440px; }

  /* a less tedious pinned scrub for the $200M moment on a small screen */
  .proof { min-height: 200vh; }

  /* timeline → clean vertical stepper; .tl__rail is the connecting line */
  .tl { padding-left: 0; margin-top: 38px; }
  .tlstep { padding: 0 0 26px 26px; }
  .tlstep:last-child { padding-bottom: 0; }
  .tlstep::before { left: 0; top: 4px; }
  .tl__foot { margin-top: 30px; }

  /* footer: pull the columns together */
  .foot { padding-block: 44px 34px; }
  .foot__cols { gap: 26px 38px; }
  .foot__bottom { margin-top: 36px; }
}

/* ---- Originals deck: centre it and keep the fan clear of the edges ---- */
@media (max-width: 600px) {
  .deck { width: 84vw; margin: 16px 26px 4px 0; }
  .deck-wrap { margin-top: 40px; gap: 22px; }
  .originals__sub { font-size: 0.98rem; }
}

/* ---- Small phones: rein in the largest display type so it never overflows ---- */
@media (max-width: 480px) {
  :root { --text-display-2: clamp(2.05rem, 8.5vw, 3rem); }
  .hero h1 { font-size: clamp(2.7rem, 13.5vw, 3.6rem); }
  .duel { --rail-gutter: 18px; }
  .duel__num { font-size: clamp(2.1rem, 11vw, 3rem); }
  .rent__payoff-v { font-size: clamp(2.1rem, 10vw, 3rem); }
}

/* ============================================================
   MOBILE FLOW — make the page read as ONE continuous canvas, with no
   detectable division between sections.

   The root cause of the "stacked blocks" feel is that sections paint
   three different near-blacks (#000 / #060707 / #0a0a0b) and separate
   them with 1px hairlines. On phones we collapse all of that: every
   section shares the page's exact near-black and loses its borders, so
   adjacent sections are literally the same colour (zero boundary). The
   only thing left distinguishing a section is its ambient glow — which
   we feather generously so it fades into the page instead of ending on
   an edge. The result is soft light floating on one uninterrupted
   canvas. Desktop keeps its crisp section delineation (phone-only).
   ============================================================ */
@media (max-width: 940px) {
  /* 1 — one canvas: unify every section background to the page colour… */
  .rent, .games, .proof, .timeline, .marquee { background: var(--surface-page); }
  /* …and drop every hard hairline between the stacked sections */
  .rent, .games, .proof, .timeline, .marquee { border-color: transparent; }
  .cta::before { opacity: 0; }

  /* 2 — feather the ambient glow/wash/grid layers generously so their
         colour dissolves into the page at the top & bottom edges */
  .originals__pin::before {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
  }
  .sec-bg--wash, .sec-bg--grid, .rent__wash {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 76%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 76%, transparent 100%);
  }
  /* the CTA's overhead lime wash is centred just above its top edge, so it
     would hit the seam brightest — fade its top right out */
  .cta__bg::after, .cta__glow {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 32%, #000 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 32%, #000 100%);
  }
}