:root {
      --bg: #030305;
      --bg-soft: #08090d;
      --panel: rgba(12, 13, 18, 0.9);
      --panel-solid: #0c0d12;
      --text: #f1f1ee;
      --muted: #92939d;
      --faint: #5d5f69;
      --line: rgba(255, 255, 255, 0.11);
      --grid: rgba(255, 255, 255, 0.055);
      --cyan: #22d3ee;
      --green: #34d399;
      --red: #fb4668;
      --yellow: #f4d35e;
      --orange: #ff9f1c;
      --headline: "Anton", Impact, sans-serif;
      --body: "Arimo", Arial, sans-serif;
      --mono: "JetBrains Mono", Consolas, monospace;
      --content: 760px;
      --wide: 1160px;
      --row-h: 36px;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: auto; background: var(--bg); }
    body {
      margin: 0;
      overflow-x: clip;
      background: var(--bg);
      color: var(--text);
      font-family: var(--body);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    button, input, textarea, select { font: inherit; }
    button:focus-visible, a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
    canvas { display: block; }

    .sr-only {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }

    .story-stage {
      position: relative;
      width: 100%;
      background: var(--bg);
    }
    .story-stage__sticky {
      position: sticky;
      top: 0;
      width: 100%;
      height: 100svh;
      min-height: 560px;
      overflow: hidden;
      isolation: isolate;
    }
    .story-stage__canvas,
    .story-stage__background,
    .story-stage__content {
      position: absolute;
      inset: 0;
    }
    .story-stage__canvas { width: 100%; height: 100%; pointer-events: none; z-index: 1; }
    .story-stage__background { z-index: 2; }
    .story-stage__content { z-index: 5; }

    .article-block {
      position: relative;
      z-index: 10;
      padding: clamp(72px, 10vw, 150px) 24px;
      background: #f2f0e9;
      color: #171717;
    }
    .article-block--dark {
      background: var(--bg-soft);
      color: var(--text);
    }
    .article-block__inner { width: min(100%, var(--content)); margin: 0 auto; }
    .article-block__kicker {
      margin: 0 0 16px;
      font: 500 12px/1.4 var(--mono);
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #746f64;
    }
    .article-block--dark .article-block__kicker { color: var(--orange); }
    .article-block h2 {
      margin: 0 0 30px;
      font: 400 clamp(38px, 6vw, 74px)/0.98 var(--headline);
      letter-spacing: 0.01em;
      text-transform: uppercase;
    }
    .article-block p {
      margin: 0 0 1.35em;
      font-size: clamp(18px, 2vw, 21px);
      line-height: 1.72;
    }
    .article-block p:last-child { margin-bottom: 0; }
    .article-block .lead {
      font-size: clamp(22px, 2.5vw, 29px);
      line-height: 1.5;
      font-weight: 500;
    }
    .article-divider {
      width: min(180px, 40%);
      height: 2px;
      margin: 42px 0;
      background: var(--orange);
    }
    .inline-stat {
      display: inline;
      font-weight: 700;
      white-space: normal;
      line-height: inherit;
    }

    .terminal-grid {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 150vw;
      height: 150vh;
      transform: translate(-50%, -50%) perspective(1200px);
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
      grid-auto-rows: minmax(58px, 1fr);
      gap: 1px;
      background: var(--grid);
      transform-style: preserve-3d;
      will-change: transform, opacity;
      overflow: hidden;
    }
    .terminal-cell {
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: var(--bg);
      color: var(--faint);
      font: 400 11px/1.35 var(--mono);
      text-align: center;
      transition: color 220ms ease, background 220ms ease;
    }
    .terminal-cell.is-up { color: var(--green); }
    .terminal-cell.is-down { color: var(--red); }
    .terminal-cell.is-ref { color: var(--yellow); }
    .terminal-cell.is-lit { background: #06070a; }

    #hero { height: 165svh; }
    .hero-vignette {
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;
      background:
        radial-gradient(circle at 50% 44%, transparent 0, rgba(3,3,5,0.16) 42%, rgba(3,3,5,0.82) 100%),
        linear-gradient(to bottom, rgba(3,3,5,0.06), rgba(3,3,5,0.5));
    }
    .hero-date {
      position: absolute;
      top: max(26px, env(safe-area-inset-top));
      left: clamp(20px, 5vw, 76px);
      z-index: 8;
      color: var(--muted);
      font: 400 12px/1.4 var(--mono);
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }
    .hero-center {
      position: absolute;
      inset: 0;
      z-index: 7;
      display: grid;
      place-items: center;
      pointer-events: none;
    }
    .hero-clock {
      font: 300 clamp(58px, 9vw, 142px)/1 var(--mono);
      letter-spacing: -0.06em;
      color: var(--text);
      font-variant-numeric: tabular-nums;
      text-shadow: 0 0 40px rgba(255,255,255,0.08);
    }
    .hero-status {
      position: absolute;
      opacity: 0;
      color: var(--cyan);
      font: 500 clamp(13px, 1.2vw, 18px)/1.4 var(--mono);
      letter-spacing: 0.24em;
      text-transform: uppercase;
    }
    .hero-phone {
      position: absolute;
      z-index: 6;
      right: clamp(5%, 12vw, 16%);
      bottom: -80px;
      width: clamp(210px, 23vw, 330px);
      aspect-ratio: 0.5;
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 42px;
      background: linear-gradient(160deg, rgba(15,16,22,0.96), rgba(1,1,3,0.88));
      transform: perspective(1000px) rotateX(20deg) rotateY(-14deg);
      box-shadow: 0 40px 90px rgba(0,0,0,0.55), inset 0 0 30px rgba(34,211,238,0.035);
      overflow: hidden;
      opacity: 0.68;
    }
    .hero-phone::before {
      content: "";
      position: absolute;
      top: 12px;
      left: 50%;
      width: 34%;
      height: 18px;
      transform: translateX(-50%);
      border-radius: 20px;
      background: #020203;
    }
    .hero-phone__screen {
      position: absolute;
      inset: 44px 14px 18px;
      padding: 24px 18px;
      border-radius: 28px;
      background:
        linear-gradient(rgba(34,211,238,0.04), transparent),
        repeating-linear-gradient(to bottom, transparent 0 31px, rgba(255,255,255,0.045) 31px 32px);
      font-family: var(--mono);
    }
    .hero-phone__label { color: var(--muted); font-size: 10px; letter-spacing: 0.14em; }
    .hero-phone__price { margin-top: 30px; color: var(--green); font-size: clamp(24px, 3vw, 36px); }
    .hero-phone__order {
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: 24px;
      padding: 12px;
      border: 1px solid rgba(34,211,238,0.32);
      color: var(--cyan);
      text-align: center;
      font-size: 11px;
      letter-spacing: 0.12em;
    }
    .hero-tunnel-labels {
      position: absolute;
      inset: 0;
      z-index: 9;
      display: grid;
      place-items: center;
      pointer-events: none;
    }
    .hero-tunnel-label {
      position: absolute;
      opacity: 0;
      color: var(--text);
      font: 500 clamp(17px, 2.2vw, 34px)/1.2 var(--mono);
      letter-spacing: 0.18em;
      text-align: center;
      text-transform: uppercase;
      text-shadow: 0 0 30px rgba(34,211,238,0.36);
    }
    .hero-reveal {
      position: absolute;
      z-index: 12;
      left: 50%;
      top: 50%;
      width: min(92vw, 1120px);
      transform: translate(-50%, -50%) scale(0.92);
      text-align: center;
      opacity: 0;
      pointer-events: none;
    }
    .hero-reveal__number {
      margin: 0;
      color: var(--orange);
      font: 400 clamp(118px, 18vw, 280px)/0.78 var(--headline);
      letter-spacing: -0.025em;
    }
    .hero-reveal__unit {
      margin-top: 22px;
      font: 400 clamp(34px, 5vw, 76px)/1 var(--headline);
      letter-spacing: 0.04em;
    }
    .hero-reveal__headline {
      margin-top: 18px;
      color: var(--muted);
      font: 500 clamp(14px, 1.6vw, 23px)/1.4 var(--mono);
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }
    .hero-reveal__deck {
      width: min(100%, 640px);
      margin: 24px auto 0;
      color: #c8c8c6;
      font-size: clamp(16px, 1.5vw, 20px);
      line-height: 1.55;
    }
    .hero-scroll-hint {
      margin-top: 36px;
      color: var(--muted);
      font: 400 11px/1.4 var(--mono);
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }
    .hero-controls {
      position: absolute;
      z-index: 20;
      left: 50%;
      bottom: max(22px, env(safe-area-inset-bottom));
      transform: translateX(-50%);
      display: flex;
      gap: 12px;
    }
    .hero-button {
      border: 1px solid rgba(255,255,255,0.28);
      border-radius: 999px;
      padding: 10px 18px;
      background: rgba(3,3,5,0.6);
      color: #d6d6d4;
      font: 400 11px/1.2 var(--mono);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      cursor: pointer;
    }
    .hero-button:hover { border-color: var(--text); color: var(--text); }
    .hero-button[hidden] { display: none; }

    #ranking { height: 510svh; }
    .ranking-stage {
      width: min(94%, var(--wide));
      height: 100%;
      margin: 0 auto;
      padding: clamp(22px, 4vh, 48px) 0 clamp(16px, 3vh, 34px);
      display: flex;
      flex-direction: column;
    }
    .stage-eyebrow {
      margin: 0 0 8px;
      color: var(--orange);
      font: 500 11px/1.4 var(--mono);
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }
    .stage-title {
      margin: 0 0 clamp(14px, 2vh, 24px);
      font: 400 clamp(32px, 4.4vw, 68px)/1 var(--headline);
      letter-spacing: 0.01em;
      text-transform: uppercase;
    }
    .ranking-board {
      position: relative;
      flex: 1;
      min-height: 0;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }
    .ranking-header,
    .ranking-row {
      display: grid;
      grid-template-columns: minmax(100px, 1.15fr) minmax(90px, 0.85fr) minmax(90px, 0.85fr) 96px;
      align-items: center;
      column-gap: 14px;
    }
    .ranking-header {
      height: 42px;
      color: var(--muted);
      border-bottom: 1px solid var(--line);
      font: 400 10px/1.2 var(--mono);
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    .ranking-list {
      position: relative;
      height: calc(var(--row-h) * 15);
      max-height: calc(100% - 42px);
      margin-top: 4px;
    }
    .ranking-row {
      position: absolute;
      left: 0;
      right: 0;
      height: var(--row-h);
      padding: 0 6px;
      border-bottom: 1px solid rgba(255,255,255,0.035);
      font-variant-numeric: tabular-nums;
      will-change: transform, opacity;
    }
    .ranking-row__bar {
      position: absolute;
      z-index: -1;
      left: 0;
      top: 5px;
      width: 100%;
      height: calc(var(--row-h) - 10px);
      background: linear-gradient(90deg, rgba(255,159,28,0.16), rgba(255,159,28,0.015));
      border-left: 2px solid var(--orange);
      transform: scaleX(0);
      transform-origin: left center;
      opacity: 0;
    }
    .ranking-row__name { font-size: 15px; font-weight: 700; }
    .ranking-row__metric,
    .ranking-row__rank { color: #d6d6d3; font: 400 12px/1.2 var(--mono); }
    .ranking-row__change { color: var(--green); }
    .ranking-row__unknown { color: var(--faint); }
    .ranking-row.is-focus .ranking-row__name { color: var(--orange); }
    .ranking-row.is-focus { border-bottom-color: rgba(255,159,28,0.28); }

    .ranking-callout {
      position: absolute;
      z-index: 8;
      right: 2.5%;
      top: 21%;
      width: min(360px, 38vw);
      padding: 24px;
      border: 1px solid var(--line);
      background: rgba(7,8,11,0.94);
      opacity: 0;
      visibility: hidden;
      transform: translateY(16px);
      pointer-events: none;
    }
    .ranking-callout h3 {
      margin: 0 0 12px;
      color: var(--orange);
      font: 400 38px/1 var(--headline);
    }
    .ranking-callout p { margin: 0 0 10px; color: #d9d9d6; font-size: 15px; line-height: 1.5; }
    .ranking-callout strong { color: var(--cyan); font: 500 16px/1.4 var(--mono); }

    .ranking-compare {
      position: absolute;
      z-index: 9;
      inset: 0;
      display: grid;
      grid-template-columns: 49fr 51fr;
      gap: 14px;
      align-items: stretch;
      padding: 7vh 3vw;
      background: rgba(3,3,5,0.96);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    .compare-box {
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: clamp(24px, 4vw, 54px);
      border: 1px solid var(--line);
    }
    .compare-box--top { border-color: rgba(255,159,28,0.7); background: rgba(255,159,28,0.055); }
    .compare-box h3 { margin: 0 0 14px; font: 400 clamp(34px, 4.5vw, 68px)/1 var(--headline); }
    .compare-box__value { color: var(--orange); font: 500 clamp(23px, 2.6vw, 38px)/1.2 var(--mono); }
    .compare-box p { margin: 16px 0 0; color: #ccc; font-size: 16px; line-height: 1.5; }
    .ranking-data-note {
      margin-top: 10px;
      color: var(--faint);
      font: 400 10px/1.4 var(--mono);
    }

    #market { height: 450svh; }
    .market-background {
      background:
        radial-gradient(circle at 50% 50%, rgba(34,211,238,0.075), transparent 35%),
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
      background-size: auto, 60px 60px, 60px 60px;
    }
    .market-heading {
      position: absolute;
      z-index: 5;
      left: 50%;
      top: 50%;
      width: min(90%, 900px);
      transform: translate(-50%, -50%);
      text-align: center;
      opacity: 1;
    }
    .market-heading h2 { margin: 0; color: var(--orange); font: 400 clamp(46px, 7vw, 108px)/0.98 var(--headline); }
    .market-heading p { margin: 20px auto 0; color: var(--muted); font-size: clamp(17px, 1.7vw, 22px); }
    .market-panel {
      position: absolute;
      z-index: 7;
      width: min(390px, 38vw);
      padding: clamp(20px, 2.5vw, 32px);
      border: 1px solid var(--line);
      background: var(--panel);
      opacity: 0;
      visibility: hidden;
      transform: translateY(18px);
    }
    .market-panel--index { left: 7%; top: 12%; border-top: 2px solid var(--cyan); }
    .market-panel--liquidity { right: 7%; top: 39%; width: min(470px, 43vw); border-top: 2px solid var(--orange); }
    .market-panel--accounts { left: 11%; bottom: 11%; width: min(430px, 42vw); border-top: 2px solid var(--red); }
    .market-panel__label { color: var(--muted); font: 500 11px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
    .market-panel__value { margin: 8px 0 4px; color: var(--text); font: 400 clamp(46px, 5.6vw, 78px)/1 var(--headline); font-variant-numeric: tabular-nums; }
    .market-panel__unit { color: #ddd; font-size: 15px; font-weight: 700; }
    .market-panel__growth { margin-top: 12px; color: var(--green); font: 500 13px/1.4 var(--mono); }
    .market-panel__note { margin-top: 12px; color: var(--muted); font: 400 11px/1.45 var(--mono); }
    .market-line { width: 100%; height: 64px; margin-top: 14px; overflow: visible; }
    .market-line path { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 420; }
    .market-conclusion {
      position: absolute;
      z-index: 10;
      left: 50%;
      top: 50%;
      width: min(90%, 900px);
      transform: translate(-50%, -50%);
      text-align: center;
      opacity: 0;
      visibility: hidden;
    }
    .market-conclusion h2 { margin: 0; color: var(--cyan); font: 400 clamp(42px, 6vw, 90px)/1 var(--headline); }
    .market-conclusion p { margin: 22px 0 0; font-size: clamp(18px, 2vw, 25px); line-height: 1.55; }

    #ending { height: 310svh; }
    .ending-intro {
      position: absolute;
      z-index: 8;
      left: 50%;
      top: 50%;
      width: min(88%, 760px);
      transform: translate(-50%, -50%);
      color: #d4d4d1;
      text-align: center;
      font-size: clamp(20px, 2.5vw, 31px);
      line-height: 1.5;
    }
    .ending-xray {
      position: absolute;
      z-index: 7;
      inset: 8% 8%;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      align-items: center;
      gap: 18px;
      opacity: 0;
      visibility: hidden;
    }
    .xray-node {
      position: relative;
      min-height: 120px;
      display: grid;
      place-items: center;
      padding: 18px;
      border: 1px solid var(--line);
      background: rgba(3,3,5,0.72);
      color: var(--text);
      text-align: center;
      font: 500 12px/1.5 var(--mono);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .xray-node:not(:last-child)::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 100%;
      width: 18px;
      height: 1px;
      background: linear-gradient(90deg, var(--cyan), transparent);
    }
    .xray-node--budget { border-color: rgba(255,159,28,0.72); color: var(--orange); }
    .ending-copy {
      position: absolute;
      z-index: 11;
      left: 50%;
      top: 50%;
      width: min(90%, 930px);
      transform: translate(-50%, -50%);
      text-align: center;
      pointer-events: none;
    }
    .ending-message {
      margin: 0 0 22px;
      color: #ccc;
      font-size: clamp(20px, 2.4vw, 31px);
      line-height: 1.48;
      opacity: 0;
      visibility: hidden;
      transform: translateY(18px);
    }
    .ending-message--final {
      margin-top: 38px;
      color: var(--text);
      font: 400 clamp(42px, 6vw, 90px)/1.03 var(--headline);
    }
    .ending-reveal {
      position: absolute;
      z-index: 12;
      left: 50%;
      top: 50%;
      width: min(94%, 1120px);
      transform: translate(-50%, -50%) scale(0.9);
      text-align: center;
      opacity: 0;
      visibility: hidden;
    }
    .ending-reveal__number { color: var(--orange); font: 400 clamp(118px, 18vw, 280px)/0.8 var(--headline); }
    .ending-reveal__unit { margin-top: 22px; font: 400 clamp(28px, 4.4vw, 66px)/1.05 var(--headline); }

    .credits {
      position: relative;
      z-index: 10;
      padding: 90px 24px 120px;
      background: var(--bg);
      color: var(--muted);
      text-align: center;
      font: 400 12px/1.8 var(--mono);
    }
    .credits strong { color: var(--text); font-weight: 500; }

    .motion-fallback #ranking,
    .motion-fallback #market,
    .motion-fallback #ending { height: auto; }
    .motion-fallback #ranking .story-stage__sticky,
    .motion-fallback #market .story-stage__sticky,
    .motion-fallback #ending .story-stage__sticky {
      position: relative;
      height: auto;
      min-height: 760px;
      overflow: hidden;
    }
    .motion-fallback #market .story-stage__sticky {
      display: grid;
      gap: 18px;
      padding: 72px 20px;
    }
    .motion-fallback .market-panel,
    .motion-fallback .market-conclusion {
      position: relative;
      inset: auto;
      width: min(100%, 720px);
      margin: 0 auto;
      transform: none !important;
    }
    .motion-fallback .market-conclusion {
      left: auto;
      top: auto;
    }

    .motion-fallback #hero-grid,
    .motion-fallback .hero-clock,
    .motion-fallback .hero-phone,
    .motion-fallback .hero-status,
    .motion-fallback .hero-tunnel-labels { display: none; }
    .motion-fallback .hero-reveal { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    .motion-fallback .market-heading { display: none; }
    .motion-fallback .market-panel { opacity: 1; visibility: visible; transform: none; }
    .motion-fallback .market-conclusion { opacity: 1; visibility: visible; }
    .motion-fallback .ending-intro,
    .motion-fallback .ending-xray,
    .motion-fallback .ending-copy { display: none; }
    .motion-fallback .ending-reveal { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }

    .no-js .hero-clock,
    .no-js .hero-phone,
    .no-js .hero-controls,
    .no-js .hero-tunnel-labels { display: none; }
    .no-js .hero-reveal { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    .no-js #ranking,
    .no-js #market,
    .no-js #ending { height: auto; }
    .no-js #ranking .story-stage__sticky,
    .no-js #market .story-stage__sticky,
    .no-js #ending .story-stage__sticky { position: relative; min-height: 760px; }
    .no-js #market .story-stage__sticky {
      display: grid;
      gap: 18px;
      padding: 72px 20px;
    }
    .no-js .market-heading { display: none; }
    .no-js .market-panel,
    .no-js .market-conclusion {
      position: relative;
      inset: auto;
      width: min(100%, 720px);
      margin: 0 auto;
      transform: none !important;
    }
    .no-js .market-panel,
    .no-js .market-conclusion { opacity: 1; visibility: visible; transform: none; }
    .no-js .ending-reveal { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }

    @media (max-width: 900px) {
      :root { --row-h: 34px; }
      .story-stage__sticky { min-height: 520px; }
      .hero-phone { right: 6%; width: 230px; }
      .ranking-stage { width: 96%; }
      .ranking-header, .ranking-row { grid-template-columns: minmax(84px, 1.2fr) minmax(78px, 0.9fr) minmax(78px, 0.9fr) 74px; column-gap: 8px; }
      .ranking-callout { right: 3%; width: min(330px, 45vw); }
      .market-panel { width: 42vw; }
      .ending-xray { inset: 13% 4%; gap: 8px; }
      .xray-node { min-height: 105px; padding: 12px; font-size: 10px; }
      .xray-node:not(:last-child)::after { width: 8px; }
    }

    @media (max-width: 767px) {
      :root { --row-h: 29px; }
      .article-block { padding-left: 20px; padding-right: 20px; }
      .article-block p { font-size: 18px; line-height: 1.65; }
      #hero { height: 155svh; }
      .terminal-grid { width: 190vw; height: 170vh; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
      .hero-date { left: 20px; top: max(18px, env(safe-area-inset-top)); }
      .hero-clock { margin-top: -22vh; font-size: clamp(50px, 15vw, 78px); }
      .hero-phone { left: 50%; right: auto; bottom: -84px; width: min(54vw, 225px); transform: translateX(-50%) perspective(900px) rotateX(13deg); }
      .hero-reveal__number { font-size: clamp(102px, 30vw, 165px); }
      .hero-reveal__unit { font-size: clamp(33px, 10vw, 52px); }
      .hero-reveal__headline { font-size: 13px; letter-spacing: 0.12em; }
      .hero-reveal__deck { padding: 0 14px; font-size: 16px; }
      .hero-controls { width: 100%; justify-content: center; padding: 0 10px; }
      .hero-button { padding: 9px 14px; font-size: 10px; }

      #ranking { height: 430svh; }
      .ranking-stage { padding: 18px 10px 12px; }
      .stage-title { font-size: clamp(29px, 9vw, 43px); }
      .ranking-header, .ranking-row { grid-template-columns: minmax(72px, 1.25fr) minmax(70px, 0.9fr) 68px; column-gap: 7px; }
      .ranking-header > :nth-child(2),
      .ranking-row > :nth-child(3) { display: none; }
      .ranking-header { height: 34px; font-size: 8px; }
      .ranking-list { max-height: calc(100% - 34px); }
      .ranking-row { padding: 0 2px; }
      .ranking-row__name { font-size: 12px; }
      .ranking-row__metric, .ranking-row__rank { font-size: 10px; }
      .ranking-callout {
        left: 4%;
        right: 4%;
        top: auto;
        bottom: 4%;
        width: auto;
        padding: 15px 17px;
      }
      .ranking-callout h3 { font-size: 28px; margin-bottom: 7px; }
      .ranking-callout p { font-size: 13px; margin-bottom: 7px; }
      .ranking-callout strong { font-size: 13px; }
      .ranking-compare { grid-template-columns: 1fr; grid-template-rows: 49fr 51fr; gap: 8px; padding: 6vh 5vw; }
      .compare-box { padding: 20px; }
      .compare-box h3 { font-size: 31px; }
      .compare-box__value { font-size: 20px; }
      .compare-box p { margin-top: 9px; font-size: 13px; }
      .ranking-data-note { display: none; }

      #market { height: 380svh; }
      .market-heading { top: 47%; }
      .market-panel {
        left: 5%;
        right: 5%;
        top: 50%;
        bottom: auto;
        width: auto;
        transform: translateY(calc(-50% + 18px));
        padding: 22px;
      }
      .market-panel--index,
      .market-panel--liquidity,
      .market-panel--accounts { left: 5%; right: 5%; top: 50%; bottom: auto; width: auto; }
      .market-panel__value { font-size: clamp(48px, 16vw, 74px); }
      .market-conclusion h2 { font-size: clamp(42px, 13vw, 64px); }
      .market-conclusion p { font-size: 18px; }

      #ending { height: 270svh; }
      .ending-xray {
        inset: 10% 8%;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 1fr);
        gap: 10px;
      }
      .xray-node { min-height: 0; }
      .xray-node:not(:last-child)::after {
        top: 100%;
        left: 50%;
        width: 1px;
        height: 10px;
        background: linear-gradient(var(--cyan), transparent);
      }
      .ending-reveal__number { font-size: clamp(104px, 31vw, 168px); }
      .ending-reveal__unit { font-size: clamp(28px, 8.5vw, 47px); padding: 0 12px; }
      .ending-message--final { font-size: clamp(39px, 12vw, 60px); }
    }

    @media (max-height: 650px) and (min-width: 768px) {
      :root { --row-h: 29px; }
      .ranking-stage { padding-top: 18px; padding-bottom: 12px; }
      .stage-title { font-size: 38px; margin-bottom: 10px; }
      .ranking-header { height: 34px; }
      .ranking-list { max-height: calc(100% - 34px); }
      .ranking-callout { top: 16%; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
      }
      #hero, #ranking, #market, #ending { height: 100svh; }
    }


    /* VNTAX 2026 warm editorial palette */
    :root {
      --bg: #76291f;
      --bg-soft: #9d3e2f;
      --panel: rgba(255, 237, 209, 0.96);
      --panel-solid: #ffedd3;
      --text: #fff0d2;
      --muted: #efbd91;
      --faint: #d88e67;
      --line: rgba(255, 228, 188, 0.3);
      --grid: rgba(255, 218, 162, 0.16);
      --cyan: #ffe06d;
      --green: #ffe9a1;
      --red: #ff9a7b;
      --yellow: #fff0b4;
      --orange: #ffd16c;
    }

    html, body { background: #76291f; }
    button:focus-visible, a:focus-visible { outline-color: #ffe06d; }
    #hero { height: 145svh; }
    #ranking { height: 420svh; }

    #hero .story-stage__sticky,
    #market .story-stage__sticky,
    #ending .story-stage__sticky {
      background:
        radial-gradient(ellipse at 50% 64%, rgba(255, 228, 119, 0.2) 0 9%, transparent 35%),
        linear-gradient(180deg, #ffe7c0 0%, #f3b07c 27%, #ef794b 57%, #8d3228 100%);
    }
    #ranking .story-stage__sticky {
      background:
        radial-gradient(ellipse at 50% 72%, rgba(255, 226, 102, 0.32), transparent 36%),
        linear-gradient(180deg, #ffe8c5 0%, #f1a271 42%, #df643f 72%, #8c3027 100%);
    }
    #hero .story-stage__sticky::after,
    #ranking .story-stage__sticky::after,
    #market .story-stage__sticky::after,
    #ending .story-stage__sticky::after {
      content: "";
      position: absolute;
      z-index: 3;
      left: 50%;
      top: 68%;
      width: min(86vw, 980px);
      height: min(27vw, 250px);
      transform: translate(-50%, -50%) rotate(-4deg);
      border: 3px solid rgba(255, 232, 125, 0.34);
      border-radius: 50%;
      box-shadow:
        0 0 13px rgba(255, 235, 133, 0.85),
        0 0 34px rgba(255, 202, 73, 0.48),
        inset 0 0 18px rgba(255, 232, 125, 0.52);
      pointer-events: none;
      filter: blur(0.2px);
    }
    #ranking .story-stage__sticky::after { top: 76%; opacity: 0.78; }
    #ending .story-stage__sticky::after { top: 61%; opacity: 0.66; }

    .hero-vignette {
      background:
        radial-gradient(circle at 50% 45%, transparent 0, rgba(106,31,24,0.08) 44%, rgba(87,24,19,0.72) 100%),
        linear-gradient(to bottom, rgba(255,235,201,0.08), rgba(99,27,21,0.34));
    }
    .terminal-grid { background: rgba(255, 220, 168, 0.2); }
    .terminal-cell { background: rgba(112, 39, 31, 0.94); color: #d99a75; }
    .terminal-cell.is-up { color: #ffe99d; }
    .terminal-cell.is-down { color: #ffad91; }
    .terminal-cell.is-ref { color: #fff2bf; }
    .terminal-cell.is-lit { background: #8a3328; }

    .hero-clock { color: #4b160f; text-shadow: 0 3px 0 rgba(255,255,255,0.12); }
    .hero-status { color: #4b160f; font-weight: 700; }
    .hero-phone {
      border: 2px solid #4b160f;
      background: linear-gradient(155deg, rgba(255,241,218,0.98), rgba(239,151,107,0.96));
      box-shadow: 13px 13px 0 rgba(239, 103, 48, 0.95), 0 34px 70px rgba(91,25,19,0.3);
    }
    .hero-phone::before { background: #4b160f; }
    .hero-phone__screen {
      background:
        linear-gradient(rgba(255,213,122,0.12), transparent),
        repeating-linear-gradient(to bottom, transparent 0 31px, rgba(76,22,15,0.09) 31px 32px);
    }
    .hero-phone__label { color: #8e4937; }
    .hero-phone__price { color: #8d2e22; }
    .hero-phone__order { border-color: #a93724; color: #7d281e; font-weight: 700; }
    .hero-tunnel-label { color: #fff0ca; text-shadow: 0 0 26px rgba(255,218,98,0.75); }
    .hero-reveal__number, .ending-reveal__number { color: #ffe19a; text-shadow: 0 7px 30px rgba(105,30,23,0.32); }
    .hero-reveal__unit, .ending-reveal__unit { color: #fff1d2; }
    .hero-reveal__headline { color: #ffd7a8; }
    .hero-reveal__deck, .ending-message, .ending-intro { color: #ffedcf; }
    .hero-scroll-hint { color: #f3c79c; }
    .hero-button {
      border-color: rgba(255,239,211,0.64);
      background: rgba(111,38,30,0.76);
      color: #fff0d0;
    }

    .article-block { background: #ffead0; color: #46150f; }
    .article-block--dark {
      background: linear-gradient(160deg, #aa4632 0%, #7a2a21 100%);
      color: #fff0d1;
    }
    .article-block__kicker { color: #a34b34; }
    .article-block--dark .article-block__kicker { color: #ffd476; }
    .article-divider { background: #c94d2e; }
    .article-block .inline-stat { color: #9e301f; }
    .article-block--dark .inline-stat { color: #ffe08b; }

    .ranking-stage {
      top: 4.5vh;
      bottom: 4.5vh;
      left: 50%;
      right: auto;
      width: min(92%, 1140px);
      height: auto;
      margin: 0;
      padding: clamp(20px, 3.5vh, 38px) clamp(18px, 3vw, 38px) clamp(14px, 2.5vh, 28px);
      transform: translateX(-50%);
      border: 2px solid #4a160f;
      border-radius: 18px;
      background: rgba(255, 239, 215, 0.97);
      color: #46150f;
      box-shadow: 12px 12px 0 #ef7437, 0 30px 70px rgba(91,25,19,0.24);
    }
    .stage-title { color: #46150f; font-size: clamp(27px, 3.8vw, 56px); max-width: 950px; }
    .ranking-board { border-color: rgba(73,22,15,0.3); }
    .ranking-header { color: #8e4e3c; border-color: rgba(73,22,15,0.25); }
    .ranking-row { border-bottom-color: rgba(73,22,15,0.09); }
    .ranking-row__bar {
      background: linear-gradient(90deg, rgba(241,113,55,0.24), rgba(255,209,108,0.06));
      border-left-color: #d9502c;
    }
    .ranking-row__name { color: #46150f; }
    .ranking-row__metric, .ranking-row__rank { color: #61271d; }
    .ranking-row.is-focus .ranking-row__name { color: #b83220; }
    .ranking-row.is-focus { border-bottom-color: rgba(188,50,31,0.42); }
    .ranking-row.is-decline .ranking-row__metric-b { color: #b12f24; font-weight: 700; }
    .ranking-callout {
      border: 2px solid #4a160f;
      border-radius: 12px;
      background: linear-gradient(150deg, #9a3829, #6f241d);
      box-shadow: 8px 8px 0 #ef7437;
    }
    .ranking-callout h3 { color: #ffe08c; }
    .ranking-callout p { color: #ffedd0; }
    .ranking-callout strong { color: #ffd36e; }
    .ranking-compare { background: rgba(255, 237, 209, 0.985); color: #46150f; }
    .compare-box { border-color: rgba(73,22,15,0.28); background: rgba(255,248,231,0.54); }
    .compare-box--top { border-color: #c74629; background: rgba(242,122,67,0.15); }
    .compare-box__value { color: #b63622; }
    .compare-box p { color: #71372a; }
    .ranking-data-note { color: #92523e; }

    .market-background {
      background:
        radial-gradient(circle at 50% 56%, rgba(255,228,108,0.25), transparent 33%),
        linear-gradient(rgba(103,31,23,0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(103,31,23,0.09) 1px, transparent 1px);
      background-size: auto, 60px 60px, 60px 60px;
    }
    .market-heading h2, .market-conclusion h2 { color: #5a1b13; }
    .market-heading p { color: #8a4938; }
    .market-panel {
      border: 2px solid #4a160f;
      border-radius: 14px;
      background: rgba(255, 240, 216, 0.97);
      box-shadow: 9px 9px 0 rgba(239,116,55,0.92);
      color: #46150f;
    }
    .market-panel--index, .market-panel--liquidity, .market-panel--accounts { border-top-color: #4a160f; }
    .market-panel__label, .market-panel__note { color: #91513e; }
    .market-panel__value, .market-panel__unit { color: #4a160f; }
    .market-panel__growth { color: #b93623; }
    .market-line path { stroke: #cf4c2c; }
    .market-conclusion { color: #4a160f; }

    .ending-intro { color: #4a160f; font-weight: 700; }
    .xray-node {
      border: 2px solid #4a160f;
      border-radius: 12px;
      background: rgba(255,239,213,0.96);
      color: #4a160f;
      box-shadow: 7px 7px 0 rgba(239,116,55,0.86);
    }
    .xray-node:not(:last-child)::after { background: linear-gradient(90deg, #ffd36d, transparent); }
    .xray-node--budget { border-color: #8f2e20; color: #9a2f20; }
    .ending-message--final { color: #fff0d1; }
    .credits { background: #6f251e; color: #eebc91; }
    .credits strong { color: #fff0d2; }

    @media (max-width: 767px) {
      #hero { height: 140svh; }
      #ranking { height: 360svh; }
      .ranking-stage {
        top: 2.5vh;
        bottom: 2.5vh;
        width: 94%;
        padding: 14px 11px 10px;
        border-radius: 13px;
        box-shadow: 7px 7px 0 #ef7437;
      }
      .stage-title { margin-bottom: 9px; font-size: clamp(24px, 7.2vw, 34px); line-height: 1.02; }
      .ranking-row__name { font-size: 10.5px; line-height: 1.05; }
      .ranking-row__metric, .ranking-row__rank { font-size: 9.5px; }
      .ranking-callout { box-shadow: 5px 5px 0 #ef7437; }
      #hero .story-stage__sticky::after,
      #ranking .story-stage__sticky::after,
      #market .story-stage__sticky::after,
      #ending .story-stage__sticky::after {
        width: 115vw;
        height: 38vw;
      }
    }

  

    /* Publication structure added in the final edit */
    .article-block--intro {
      padding-bottom: clamp(48px, 6vw, 82px);
    }
    .article-announcement {
      position: relative;
      z-index: 10;
      overflow: hidden;
      padding: 0 20px clamp(82px, 10vw, 150px);
      background: #ffead0;
      color: #46150f;
    }
    .article-announcement__title-wrap {
      width: min(100%, var(--wide));
      margin: 0 auto clamp(36px, 5vw, 70px);
    }
    .article-announcement__title {
      max-width: 1120px;
      margin: 0 auto;
      color: #46150f;
      font: 400 clamp(45px, 7vw, 104px)/0.98 var(--headline);
      letter-spacing: 0.005em;
      text-align: center;
      text-transform: uppercase;
      text-wrap: balance;
    }
    .article-wide-figure {
      width: min(1180px, calc(100vw - 40px));
      margin: 0 auto;
    }
    .article-wide-figure__image {
      display: block;
      width: 100%;
      height: auto;
      border: 0;
    }
    .article-block--race-intro {
      padding-bottom: clamp(62px, 8vw, 110px);
    }
    .article-block--race-continuation {
      padding-top: clamp(70px, 9vw, 130px);
    }

    /* Keep the final market conclusion anchored to the true center. */
    .market-conclusion {
      left: 50%;
      right: auto;
      width: min(1100px, calc(100vw - 48px));
      max-width: calc(100vw - 48px);
      text-align: center;
      transform: translate(-50%, -50%);
    }
    .market-conclusion h2,
    .market-conclusion p {
      width: 100%;
      max-width: 100%;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      overflow-wrap: anywhere;
    }

    .article-credit {
      position: relative;
      z-index: 10;
      padding: 42px 24px 54px;
      background: #6f251e;
      color: #fff0d2;
    }
    .article-credit__inner {
      width: min(100%, var(--content));
      margin: 0 auto;
      font: 700 clamp(16px, 1.7vw, 20px)/1.5 var(--body);
      text-align: left;
    }
    .article-credit__source {
      margin-top: 4px;
      font-weight: 400;
    }
    .article-credit__source a {
      color: inherit;
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
    }
    .article-credit__source a:hover,
    .article-credit__source a:focus-visible {
      color: #ffd36b;
    }

    @media (max-width: 767px) {
      .article-announcement {
        padding-right: 14px;
        padding-left: 14px;
      }
      .article-announcement__title {
        font-size: clamp(39px, 12vw, 61px);
        line-height: 0.99;
      }
      .article-wide-figure {
        width: calc(100vw - 28px);
      }
      .market-conclusion {
        width: calc(100vw - 28px);
        max-width: calc(100vw - 28px);
      }
      .market-conclusion h2 {
        font-size: clamp(38px, 11.4vw, 58px);
        line-height: 0.98;
      }
    }


    /* Modern editorial hero: VNTAX orange + grayscale hierarchy */
    #hero { height: 142svh; background: #efeee9; }
    #hero .story-stage__sticky {
      background: #efeee9;
      color: #1d1d1d;
    }
    #hero .story-stage__sticky::after { content: none; }
    .hero-editorial { isolation: isolate; }
    .hero-editorial__background {
      position: absolute;
      inset: 0;
      overflow: hidden;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.48), transparent 44%),
        #efeee9;
    }
    .hero-editorial__grid {
      position: absolute;
      inset: 0;
      opacity: 0.72;
      background-image:
        linear-gradient(rgba(29,29,29,0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(29,29,29,0.09) 1px, transparent 1px);
      background-size: clamp(54px, 6vw, 88px) clamp(54px, 6vw, 88px);
      mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.85) 58%, transparent 100%);
    }
    .hero-editorial__accent {
      position: absolute;
      top: 0;
      right: 0;
      width: clamp(360px, 39vw, 700px);
      height: 100%;
      transform-origin: right center;
      background:
        radial-gradient(circle at 34% 65%, rgba(255,220,150,0.44), transparent 25%),
        linear-gradient(165deg, #f7a26f 0%, #ef6f36 52%, #a73826 100%);
      clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%);
      box-shadow: -35px 0 80px rgba(92,43,28,0.08);
    }
    .hero-editorial__accent::before {
      content: "";
      position: absolute;
      left: 8%;
      top: 57%;
      width: 125%;
      height: 22%;
      border: 2px solid rgba(255,227,152,0.72);
      border-radius: 50%;
      transform: rotate(-7deg);
      box-shadow: 0 0 18px rgba(255,222,126,0.72), 0 0 42px rgba(255,185,68,0.42);
    }
    .hero-editorial__rule {
      position: absolute;
      z-index: 1;
      height: 1px;
      background: rgba(29,29,29,0.2);
    }
    .hero-editorial__rule--one { left: 4vw; right: 4vw; top: 16%; }
    .hero-editorial__rule--two { left: 4vw; width: 41%; bottom: 13%; }

    .hero-brand {
      position: absolute;
      z-index: 8;
      top: max(28px, env(safe-area-inset-top));
      left: clamp(22px, 4.6vw, 76px);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      color: #1b1b1b;
      line-height: 1;
    }
    .hero-brand__country {
      font: 400 clamp(25px, 3vw, 44px)/0.88 var(--headline);
      letter-spacing: 0.035em;
    }
    .hero-brand__series {
      margin-top: 5px;
      font: 700 clamp(10px, 1.1vw, 15px)/1 var(--body);
      letter-spacing: 0.085em;
    }
    .hero-brand__tagline {
      margin-top: 7px;
      padding: 5px 11px;
      background: #ef6f36;
      color: #fff8ef;
      font: 700 clamp(7px, 0.65vw, 9px)/1 var(--body);
      letter-spacing: 0.14em;
    }
    .hero-context {
      position: absolute;
      z-index: 8;
      top: max(31px, env(safe-area-inset-top));
      right: clamp(22px, 4.4vw, 72px);
      display: flex;
      align-items: center;
      gap: 10px;
      color: #1b1b1b;
      font: 700 10px/1.2 var(--mono);
      letter-spacing: 0.11em;
    }
    .hero-context span:first-child {
      padding: 7px 10px;
      background: #1d1d1d;
      color: #fff;
    }

    .hero-countdown {
      position: absolute;
      z-index: 8;
      left: clamp(22px, 5.2vw, 88px);
      top: 31%;
      width: min(54vw, 790px);
      color: #1b1b1b;
    }
    .hero-countdown__label {
      margin-bottom: 9px;
      color: #676767;
      font: 700 clamp(10px, 0.9vw, 13px)/1.3 var(--mono);
      letter-spacing: 0.15em;
    }
    .hero-clock {
      display: block;
      margin: 0;
      color: #1b1b1b;
      font: 500 clamp(74px, 10.5vw, 174px)/0.88 var(--mono);
      letter-spacing: -0.085em;
      font-variant-numeric: tabular-nums;
      text-shadow: none;
      white-space: nowrap;
    }
    .hero-countdown__track {
      position: relative;
      width: min(100%, 660px);
      height: 8px;
      margin-top: 25px;
      overflow: hidden;
      background: #d3d2ce;
    }
    .hero-countdown__track span {
      position: absolute;
      inset: 0;
      transform: scaleX(0);
      transform-origin: left center;
      background: #ef6f36;
    }

    .hero-scoreboard {
      position: absolute;
      z-index: 9;
      right: clamp(22px, 5vw, 82px);
      bottom: clamp(60px, 10vh, 110px);
      width: min(48vw, 650px);
      color: #1b1b1b;
    }
    .hero-scoreboard__heading {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
      color: rgba(255,255,255,0.9);
      font: 700 clamp(9px, 0.8vw, 12px)/1.2 var(--mono);
      letter-spacing: 0.1em;
    }
    .hero-scoreboard__row {
      display: grid;
      grid-template-columns: 58px 1fr auto;
      align-items: center;
      min-height: clamp(50px, 6vh, 69px);
      margin-top: 6px;
      padding: 0 clamp(14px, 2vw, 25px);
      border: 2px solid #1d1d1d;
      font-variant-numeric: tabular-nums;
      box-shadow: 6px 6px 0 rgba(29,29,29,0.18);
    }
    .hero-scoreboard__row strong {
      font: 700 clamp(13px, 1.25vw, 18px)/1.15 var(--body);
      letter-spacing: 0.02em;
    }
    .hero-scoreboard__rank {
      font: 700 clamp(12px, 1.1vw, 16px)/1 var(--mono);
    }
    .hero-scoreboard__value {
      font: 700 clamp(17px, 1.75vw, 26px)/1 var(--mono);
    }
    .hero-scoreboard__row--first { background: #ef6f36; color: #1a1a1a; }
    .hero-scoreboard__row--second { background: #262626; color: #fff; }
    .hero-scoreboard__row--third { background: #dededb; color: #1a1a1a; }
    .hero-scoreboard__unit {
      margin-top: 10px;
      color: rgba(255,255,255,0.76);
      text-align: right;
      font: 500 9px/1.2 var(--mono);
      letter-spacing: 0.08em;
    }

    .hero-status {
      position: absolute;
      z-index: 12;
      left: 50%;
      top: 20%;
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 9px 14px 9px 9px;
      transform: translateX(-50%);
      background: #fff;
      border: 2px solid #1d1d1d;
      color: #1d1d1d;
      opacity: 0;
      visibility: hidden;
      box-shadow: 6px 6px 0 #ef6f36;
      font: 700 11px/1.2 var(--mono);
      letter-spacing: 0.08em;
    }
    .hero-status span { padding: 5px 8px; background: #1d1d1d; color: #fff; }

    .hero-reveal {
      position: absolute;
      z-index: 11;
      left: clamp(22px, 5.2vw, 88px);
      top: 49%;
      width: min(78vw, 1120px);
      transform: translateY(-50%);
      text-align: left;
      color: #1d1d1d;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    .hero-reveal__eyebrow {
      display: inline-block;
      margin-bottom: 16px;
      padding: 7px 11px;
      background: #1d1d1d;
      color: #fff;
      font: 700 10px/1.2 var(--mono);
      letter-spacing: 0.12em;
    }
    .hero-reveal__layout {
      display: flex;
      align-items: flex-end;
      gap: clamp(22px, 3.4vw, 56px);
    }
    .hero-reveal__number {
      margin: 0;
      color: #1d1d1d;
      font: 400 clamp(126px, 18vw, 280px)/0.72 var(--headline);
      letter-spacing: -0.025em;
      text-shadow: none;
    }
    .hero-reveal__copy { min-width: clamp(280px, 24vw, 390px); padding-bottom: clamp(3px, 1vw, 16px); }
    .hero-reveal__unit {
      display: inline-block;
      margin: 0 0 12px;
      padding: 8px 13px 7px;
      background: #ef6f36;
      color: #1d1d1d;
      font: 400 clamp(27px, 3.3vw, 52px)/0.95 var(--headline);
      letter-spacing: 0.03em;
    }
    .hero-reveal__headline {
      margin: 0;
      color: #1d1d1d;
      font: 400 clamp(38px, 5vw, 76px)/0.93 var(--headline);
      letter-spacing: 0;
    }
    .hero-reveal__headline span { display: block; white-space: nowrap; }
    .hero-reveal__deck {
      width: min(100%, 670px);
      margin: 26px 0 0;
      color: #4d4d4d;
      font-size: clamp(16px, 1.45vw, 20px);
      line-height: 1.5;
    }
    .hero-scroll-hint {
      margin-top: 23px;
      color: #686868;
      font: 700 10px/1.3 var(--mono);
      letter-spacing: 0.13em;
      text-transform: uppercase;
    }
    .hero-controls {
      z-index: 20;
      left: auto;
      right: clamp(18px, 3vw, 42px);
      bottom: max(18px, env(safe-area-inset-bottom));
      transform: none;
    }
    .hero-button {
      border: 2px solid #1d1d1d;
      border-radius: 0;
      padding: 9px 14px;
      background: rgba(239,238,233,0.9);
      color: #1d1d1d;
      font-weight: 700;
      box-shadow: 4px 4px 0 #ef6f36;
    }
    .hero-button:hover { background: #1d1d1d; color: #fff; border-color: #1d1d1d; }

    .motion-fallback #hero,
    .no-js #hero { height: 100svh; min-height: 620px; }
    .motion-fallback .hero-countdown,
    .motion-fallback .hero-scoreboard,
    .motion-fallback .hero-status,
    .motion-fallback .hero-context,
    .no-js .hero-countdown,
    .no-js .hero-scoreboard,
    .no-js .hero-status,
    .no-js .hero-context,
    .no-js .hero-controls { display: none; }
    .motion-fallback .hero-reveal,
    .no-js .hero-reveal {
      opacity: 1 !important;
      visibility: visible !important;
      transform: translateY(-50%) !important;
    }

    @media (max-width: 900px) {
      .hero-context span:last-child { display: none; }
      .hero-scoreboard { width: min(55vw, 540px); }
      .hero-reveal { width: calc(100vw - 44px); }
      .hero-reveal__layout { gap: 20px; }
    }

    @media (max-width: 767px) {
      #hero { height: 136svh; }
      .hero-editorial__accent {
        top: auto;
        bottom: 0;
        width: 100%;
        height: 45%;
        clip-path: polygon(0 19%, 100% 0, 100% 100%, 0 100%);
      }
      .hero-editorial__accent::before { left: -8%; top: 46%; width: 116%; height: 32%; }
      .hero-editorial__rule--one { top: 14%; }
      .hero-editorial__rule--two { display: none; }
      .hero-brand { top: max(20px, env(safe-area-inset-top)); left: 18px; }
      .hero-brand__country { font-size: 27px; }
      .hero-brand__series { font-size: 9px; }
      .hero-brand__tagline { font-size: 6px; padding: 4px 7px; }
      .hero-context { top: max(23px, env(safe-area-inset-top)); right: 17px; }
      .hero-context span:first-child { padding: 6px 8px; }
      .hero-countdown {
        left: 18px;
        right: 18px;
        top: 24%;
        width: auto;
      }
      .hero-clock { font-size: clamp(50px, 17.5vw, 78px); letter-spacing: -0.08em; }
      .hero-countdown__track { width: 100%; margin-top: 17px; height: 6px; }
      .hero-scoreboard {
        left: 18px;
        right: 18px;
        bottom: 8.5vh;
        width: auto;
      }
      .hero-scoreboard__heading { font-size: 8px; color: rgba(255,255,255,0.86); }
      .hero-scoreboard__row {
        grid-template-columns: 42px 1fr auto;
        min-height: 49px;
        padding: 0 12px;
        box-shadow: 4px 4px 0 rgba(29,29,29,0.2);
      }
      .hero-scoreboard__row strong { font-size: 12px; }
      .hero-scoreboard__rank { font-size: 11px; }
      .hero-scoreboard__value { font-size: 16px; }
      .hero-status {
        top: 17%;
        width: calc(100vw - 36px);
        justify-content: center;
        gap: 8px;
        font-size: 8px;
        white-space: nowrap;
      }
      .hero-reveal {
        left: 18px;
        top: 43%;
        width: calc(100vw - 36px);
        transform: translateY(-50%);
      }
      .hero-reveal__eyebrow { margin-bottom: 12px; font-size: 8px; }
      .hero-reveal__layout { display: block; }
      .hero-reveal__number { font-size: clamp(94px, 28vw, 128px); line-height: 0.76; white-space: nowrap; }
      .hero-reveal__copy { min-width: 0; margin-top: 20px; padding: 0; }
      .hero-reveal__unit { margin-bottom: 9px; font-size: clamp(28px, 8.8vw, 42px); }
      .hero-reveal__headline { font-size: clamp(42px, 12.5vw, 61px); }
      .hero-reveal__deck { margin-top: 18px; font-size: 15px; max-width: 92%; }
      .hero-scroll-hint { margin-top: 17px; font-size: 9px; }
      .hero-controls { right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); }
      .hero-button { padding: 8px 11px; font-size: 9px; box-shadow: 3px 3px 0 #ef6f36; }
    }


    /* Final editorial refinements */
    .hero-symbol {
      position: absolute;
      z-index: 9;
      right: clamp(22px, 6vw, 104px);
      bottom: clamp(48px, 8vh, 94px);
      width: min(36vw, 500px);
      aspect-ratio: 21 / 16;
      color: #1d1d1d;
      transform-origin: 50% 50%;
      will-change: transform, opacity;
    }
    .hero-symbol svg { display: block; width: 100%; height: 100%; overflow: visible; }
    .hero-symbol__panel { fill: rgba(239, 238, 233, 0.9); stroke: #1d1d1d; stroke-width: 4; }
    .hero-symbol__ring { fill: none; transform-box: fill-box; transform-origin: center; }
    .hero-symbol__ring--outer { stroke: #ef6f36; stroke-width: 12; stroke-dasharray: 18 15; }
    .hero-symbol__ring--inner { stroke: #1d1d1d; stroke-width: 2.5; stroke-dasharray: 5 9; }
    .hero-symbol__grid path { fill: none; stroke: rgba(29, 29, 29, 0.16); stroke-width: 1.5; }
    .hero-symbol__candles line { stroke: #1d1d1d; stroke-width: 4; }
    .hero-symbol__candles rect { fill: #ef6f36; stroke: #1d1d1d; stroke-width: 3; }
    .hero-symbol__pulse { fill: none; stroke: #1d1d1d; stroke-width: 6; stroke-linecap: square; }
    .hero-symbol__signal { fill: #ef6f36; stroke: #1d1d1d; stroke-width: 4; }
    .hero-symbol::after {
      content: '';
      position: absolute;
      inset: 14% -4% -4% 8%;
      z-index: -1;
      background: #ef6f36;
      border: 3px solid #1d1d1d;
    }
    .hero-countdown { width: min(57vw, 820px); }
    .hero-countdown__label { margin-bottom: 14px; color: #1d1d1d; }
    .hero-reveal__layout { align-items: center; }
    .hero-reveal__copy { padding-bottom: 0; }
    .hero-reveal__unit { margin-bottom: 18px; line-height: 1.08; }
    .hero-reveal__headline {
      display: grid;
      gap: 0.13em;
      font-size: clamp(38px, 5vw, 76px);
      line-height: 1.08;
    }
    .hero-reveal__headline span { line-height: 1.08; }

    .article-announcement { padding-top: clamp(54px, 7vw, 96px); }
    .vntax-info-box {
      width: min(1080px, calc(100vw - 40px));
      margin: clamp(30px, 4.5vw, 58px) auto 0;
      display: grid;
      grid-template-columns: minmax(190px, 0.28fr) minmax(0, 1fr);
      border: 2px solid #241d1a;
      background: #f3f0e9;
      color: #261e1b;
      box-shadow: 10px 10px 0 #ef7437;
    }
    .vntax-info-box__brand {
      min-height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: clamp(24px, 3vw, 42px);
      border-right: 2px solid #241d1a;
      background: #ef7437;
      color: #241d1a;
      text-transform: uppercase;
    }
    .vntax-info-box__country { font: 400 clamp(37px, 4.2vw, 64px)/0.9 var(--headline); }
    .vntax-info-box__name { margin-top: 8px; font: 700 clamp(11px, 1.25vw, 17px)/1.15 var(--body); letter-spacing: 0.06em; }
    .vntax-info-box__year { margin-top: 19px; font: 700 clamp(42px, 5vw, 76px)/0.86 var(--mono); }
    .vntax-info-box__content { padding: clamp(25px, 3.5vw, 46px); }
    .vntax-info-box__content p { margin: 0 0 1.25em; font-size: clamp(16px, 1.55vw, 19px); line-height: 1.62; }
    .vntax-info-box__content p:last-child { margin-bottom: 0; }
    .vntax-info-box__lists {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 9px;
      margin: 22px 0 25px;
    }
    .vntax-info-box__lists span {
      min-width: 0;
      padding: 13px 12px 12px;
      border: 1.5px solid #241d1a;
      background: #fffaf0;
    }
    .vntax-info-box__lists b { display: block; color: #a73522; font: 700 clamp(14px, 1.3vw, 18px)/1.15 var(--mono); }
    .vntax-info-box__lists small { display: block; margin-top: 6px; font-size: 12px; line-height: 1.35; }
    .vntax-info-box__note {
      padding: 13px 16px;
      border-left: 6px solid #ef7437;
      background: #dedbd4;
      font-weight: 700;
    }

    /* Give all multi-line editorial headlines enough vertical breathing room. */
    .article-block h2,
    .stage-title,
    .compare-box h3,
    .market-heading h2,
    .market-conclusion h2 {
      line-height: 1.1;
      text-wrap: balance;
    }
    .article-block h2 { margin-bottom: 34px; }
    .stage-title { padding-bottom: 0.05em; }
    .compare-box h3 { line-height: 1.12; }
    .market-conclusion h2 { line-height: 1.08; }

    /* More reading time for the ranking story and ensure all 15 rows fit. */
    #ranking { height: 650svh; }
    .ranking-row__name { overflow-wrap: anywhere; }
    #callout-challengers { top: 10%; }
    .ranking-callout--challengers p b { color: #ffe08c; }

    @media (max-width: 900px) {
      .hero-symbol { width: min(42vw, 420px); right: 4vw; }
    }
    @media (max-width: 767px) {
      #hero { height: 140svh; }
      .hero-symbol {
        left: 9vw;
        right: 9vw;
        bottom: 5.5vh;
        width: auto;
        transform: none;
      }
      .hero-countdown { top: 24%; }
      .hero-reveal { top: 42%; }
      .hero-reveal__unit { margin-bottom: 13px; }
      .hero-reveal__headline { gap: 0.16em; line-height: 1.1; }
      .hero-reveal__headline span { line-height: 1.1; }
      .vntax-info-box {
        width: calc(100vw - 28px);
        grid-template-columns: 1fr;
        box-shadow: 7px 7px 0 #ef7437;
      }
      .vntax-info-box__brand { border-right: 0; border-bottom: 2px solid #241d1a; }
      .vntax-info-box__lists { grid-template-columns: 1fr; }
      #ranking { height: 520svh; }
      .stage-title { line-height: 1.12; }
      #callout-challengers { top: 12%; bottom: auto; }
      .ranking-callout--challengers p { font-size: 12px; line-height: 1.38; }
    }



    /* v3: paired ranking covers, justified article copy, dedicated callout rail and tax donut */
    .article-block__inner > p,
    .vntax-info-box__content > p {
      text-align: justify;
      text-justify: inter-word;
      hyphens: auto;
    }

    .announcement-rankings {
      width: min(1440px, calc(100vw - 36px));
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: clamp(14px, 2vw, 28px);
      align-items: start;
    }
    .announcement-rankings .article-wide-figure {
      width: 100%;
      margin: 0;
      min-width: 0;
    }
    .announcement-rankings .article-wide-figure__image {
      width: 100%;
      height: auto;
      object-fit: contain;
    }

    #ranking { height: 760svh; }
    .ranking-stage { position: relative; }
    .ranking-callout-rail { position: static; }

    @media (min-width: 901px) {
      .ranking-board {
        width: calc(100% - 390px);
        max-width: calc(100% - 390px);
      }
      .ranking-callout {
        right: 0;
        top: 24%;
        width: 350px;
      }
    }

    .tax-donut {
      width: min(900px, 100%);
      margin: clamp(38px, 6vw, 72px) auto;
      display: grid;
      grid-template-columns: minmax(250px, 0.9fr) minmax(260px, 1.1fr);
      align-items: center;
      gap: clamp(28px, 5vw, 72px);
    }
    .tax-donut__chart {
      position: relative;
      width: min(360px, 78vw);
      aspect-ratio: 1;
      margin: 0 auto;
      border-radius: 50%;
      background: conic-gradient(
        #ef7437 0 65%,
        #6f251e 65% 94%,
        #f2c75c 94% 100%
      );
      box-shadow: 12px 12px 0 rgba(111,37,30,0.16);
    }
    .tax-donut__chart::after {
      content: '';
      position: absolute;
      inset: 24%;
      border-radius: 50%;
      background: #f2f0e9;
      box-shadow: inset 0 0 0 2px rgba(70,21,15,0.12);
    }
    .tax-donut__center {
      position: absolute;
      z-index: 2;
      inset: 31%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #46150f;
      text-align: center;
    }
    .tax-donut__center strong {
      font: 400 clamp(38px, 5vw, 68px)/0.92 var(--headline);
      letter-spacing: 0.01em;
    }
    .tax-donut__center span {
      margin-top: 8px;
      font: 700 clamp(11px, 1.2vw, 15px)/1.2 var(--mono);
      letter-spacing: 0.12em;
    }
    .tax-donut__legend {
      display: grid;
      gap: 14px;
      color: #3c211b;
      font-size: clamp(16px, 1.5vw, 19px);
      line-height: 1.45;
    }
    .tax-donut__legend span {
      display: grid;
      grid-template-columns: 18px 58px 1fr;
      align-items: center;
      gap: 10px;
      padding: 14px 16px;
      border: 1.5px solid rgba(70,21,15,0.28);
      background: #fff8ed;
    }
    .tax-donut__legend b { font-family: var(--mono); color: #46150f; }
    .tax-donut__swatch { width: 14px; height: 14px; border-radius: 50%; }
    .tax-donut__swatch--personal { background: #ef7437; }
    .tax-donut__swatch--corporate { background: #6f251e; }
    .tax-donut__swatch--other { background: #f2c75c; }

    @media (max-width: 900px) {
      .announcement-rankings { grid-template-columns: 1fr; width: min(760px, calc(100vw - 28px)); }
      #ranking { height: 640svh; }
      .ranking-board { width: 100%; max-width: 100%; }
      .ranking-callout { right: 3%; width: min(330px, 45vw); }
      .tax-donut { grid-template-columns: 1fr; }
    }

    @media (max-width: 767px) {
      .article-block__inner > p,
      .vntax-info-box__content > p { text-align: justify; }
      .ranking-callout {
        left: 5%;
        right: 5%;
        top: 11%;
        width: auto;
      }
      .tax-donut { margin: 34px auto 46px; gap: 26px; }
      .tax-donut__chart { width: min(300px, 82vw); }
      .tax-donut__legend span { grid-template-columns: 16px 52px 1fr; padding: 12px; font-size: 15px; }
    }



    /* Ranking v4: all 15 rows fit in one viewport and comparison uses the full stage. */
    #ranking .story-stage__sticky {
      padding: 0;
    }
    #ranking .ranking-stage {
      top: clamp(10px, 2.2vh, 22px);
      bottom: clamp(10px, 2.2vh, 22px);
      width: min(96%, 1440px);
      padding: clamp(12px, 1.7vh, 20px) clamp(16px, 2.1vw, 30px) clamp(10px, 1.4vh, 16px);
      overflow: hidden;
    }
    #ranking .stage-title {
      max-width: 1050px;
      margin: 0 0 clamp(8px, 1.25vh, 14px);
      padding: 0;
      font-size: clamp(30px, 4.7vh, 54px);
      line-height: 0.98;
      letter-spacing: 0.005em;
      text-wrap: balance;
    }
    #ranking .ranking-board {
      min-height: 0;
      overflow: hidden;
    }
    #ranking .ranking-header {
      height: clamp(28px, 4.2vh, 36px);
      min-height: 28px;
      font-size: clamp(8px, 1.1vh, 10px);
    }
    #ranking .ranking-list {
      margin-top: 2px;
      overflow: hidden;
    }
    #ranking .ranking-row {
      min-height: 0;
      padding: 0 5px;
    }
    #ranking .ranking-row__name {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow-wrap: normal;
      font-size: clamp(10.5px, 1.55vh, 14px);
      line-height: 1;
    }
    #ranking .ranking-row__metric,
    #ranking .ranking-row__rank {
      font-size: clamp(9px, 1.35vh, 12px);
      line-height: 1;
    }

    /* The data board keeps a dedicated right rail for callouts. */
    @media (min-width: 901px) {
      #ranking .ranking-board {
        width: calc(100% - 380px);
        max-width: calc(100% - 380px);
      }
      #ranking .ranking-callout {
        right: 0;
        width: 350px;
        top: 23%;
      }
    }

    /* Full-width comparison scene: no cramped columns, no text collision. */
    #ranking .ranking-compare {
      position: absolute;
      z-index: 40;
      left: clamp(16px, 2.1vw, 30px);
      right: clamp(16px, 2.1vw, 30px);
      top: clamp(88px, 15vh, 132px);
      bottom: clamp(10px, 1.4vh, 16px);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(12px, 1.6vw, 22px);
      align-items: stretch;
      padding: clamp(14px, 2.2vw, 30px);
      border: 2px solid #4a160f;
      border-radius: 14px;
      background: #ffedd3;
      color: #46150f;
      box-shadow: 9px 9px 0 #ef7437;
      overflow: hidden;
    }
    #ranking .ranking-compare::before {
      content: "SO SÁNH QUY MÔ ĐÓNG GÓP";
      position: absolute;
      left: clamp(16px, 2.2vw, 30px);
      top: 10px;
      color: #9a4b37;
      font: 600 clamp(8px, 1vh, 10px)/1.2 var(--mono);
      letter-spacing: 0.14em;
    }
    #ranking .compare-box {
      min-height: 0;
      padding: clamp(20px, 3vw, 42px);
      border: 1.5px solid rgba(73,22,15,0.32);
      border-radius: 10px;
      justify-content: center;
      overflow: hidden;
    }
    #ranking .compare-box--top {
      background: linear-gradient(145deg, rgba(239,116,55,0.24), rgba(255,224,140,0.18));
    }
    #ranking .compare-box h3 {
      max-width: 100%;
      margin: 0 0 clamp(10px, 1.7vh, 16px);
      font-size: clamp(27px, 4.6vh, 48px);
      line-height: 1.04;
      letter-spacing: 0.005em;
      text-wrap: balance;
    }
    #ranking .compare-box__value {
      font-size: clamp(25px, 4.1vh, 42px);
      line-height: 1.05;
      white-space: nowrap;
    }
    #ranking .compare-box p {
      max-width: 560px;
      margin: clamp(10px, 1.7vh, 16px) 0 0;
      font-size: clamp(13px, 1.75vh, 17px);
      line-height: 1.45;
    }

    @media (max-width: 900px) {
      #ranking .ranking-stage {
        width: min(96%, 860px);
      }
      #ranking .ranking-board {
        width: 100%;
        max-width: 100%;
      }
      #ranking .ranking-callout {
        left: auto;
        right: 3%;
        width: min(330px, 46vw);
      }
      #ranking .ranking-compare {
        top: clamp(82px, 14vh, 120px);
      }
    }

    @media (max-width: 767px) {
      #ranking .ranking-stage {
        top: 8px;
        bottom: 8px;
        width: calc(100% - 16px);
        padding: 10px 9px 8px;
      }
      #ranking .stage-title {
        margin-bottom: 7px;
        font-size: clamp(22px, 6.8vw, 31px);
        line-height: 1;
      }
      #ranking .ranking-header,
      #ranking .ranking-row {
        grid-template-columns: minmax(78px, 1.2fr) minmax(64px, 0.85fr) 58px;
        column-gap: 5px;
      }
      #ranking .ranking-row__name {
        font-size: clamp(9px, 2.7vw, 11px);
      }
      #ranking .ranking-row__metric,
      #ranking .ranking-row__rank {
        font-size: clamp(8px, 2.5vw, 10px);
      }
      #ranking .ranking-callout {
        left: 4%;
        right: 4%;
        top: auto;
        bottom: 3%;
        width: auto;
        max-height: 35%;
        overflow: hidden;
      }
      #ranking .ranking-compare {
        left: 9px;
        right: 9px;
        top: clamp(68px, 13vh, 94px);
        bottom: 8px;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 8px;
        padding: 26px 9px 9px;
        box-shadow: 5px 5px 0 #ef7437;
      }
      #ranking .ranking-compare::before {
        left: 12px;
        top: 8px;
      }
      #ranking .compare-box {
        padding: 14px 16px;
      }
      #ranking .compare-box h3 {
        margin-bottom: 6px;
        font-size: clamp(22px, 7vw, 30px);
      }
      #ranking .compare-box__value {
        font-size: clamp(20px, 6vw, 27px);
      }
      #ranking .compare-box p {
        margin-top: 6px;
        font-size: clamp(11px, 3.2vw, 13px);
        line-height: 1.32;
      }
    }

    @media (max-height: 720px) and (min-width: 768px) {
      #ranking .ranking-stage {
        top: 8px;
        bottom: 8px;
        padding-top: 10px;
        padding-bottom: 8px;
      }
      #ranking .stage-title {
        font-size: clamp(28px, 5.2vh, 38px);
        margin-bottom: 7px;
      }
      #ranking .ranking-compare {
        top: 76px;
      }
      #ranking .compare-box h3 {
        font-size: clamp(25px, 5vh, 36px);
      }
      #ranking .compare-box__value {
        font-size: clamp(23px, 4.6vh, 34px);
      }
      #ranking .compare-box p {
        font-size: clamp(12px, 2.1vh, 15px);
      }
    }

/* Mobile edition: preserve every ranking and market scene across phone sizes. */
@media (max-width: 767px) {
  :root {
    --mobile-safe-top: max(8px, env(safe-area-inset-top));
    --mobile-safe-bottom: max(8px, env(safe-area-inset-bottom));
  }

  html, body { width: 100%; max-width: 100%; overflow-x: clip; }
  body { text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }

  .article-block__inner {
    width: min(100% - 32px, 720px);
  }
  .article-block__inner > p {
    font-size: clamp(17px, 4.55vw, 19px);
    line-height: 1.72;
  }
  .article-block h2 {
    font-size: clamp(31px, 9.2vw, 43px);
    line-height: 1.06;
    margin-bottom: 24px;
  }
  .article-block__kicker { margin-bottom: 9px; }

  .announcement-rankings {
    width: calc(100vw - 20px);
    gap: 16px;
  }
  .article-wide-figure__image {
    border-radius: 6px;
  }
  .vntax-info-box {
    width: calc(100vw - 24px);
    margin-top: 28px;
  }
  .vntax-info-box__content {
    padding: 22px 18px;
  }
  .vntax-info-box__content p {
    font-size: 16px;
    line-height: 1.62;
  }

  #hero { height: 132svh; }
  .hero-editorial { min-height: 100svh; }
  .hero-brand {
    top: calc(var(--mobile-safe-top) + 8px);
    left: 16px;
    right: 16px;
    width: auto;
  }
  .hero-brand__country { font-size: clamp(28px, 10vw, 44px); }
  .hero-brand__series { font-size: clamp(11px, 3.4vw, 15px); }
  .hero-brand__tagline { max-width: 290px; font-size: 7px; }
  .hero-countdown {
    top: 25%;
    left: 16px;
    right: 16px;
    transform: none;
    text-align: center;
  }
  .hero-clock {
    font-size: clamp(50px, 16vw, 76px);
    letter-spacing: -0.055em;
  }
  .hero-symbol {
    left: 50%;
    right: auto;
    bottom: 7.5svh;
    width: min(82vw, 360px);
    transform: translateX(-50%);
    opacity: 0.78;
  }
  .hero-status {
    top: 36%;
    left: 50%;
    width: calc(100% - 32px);
    transform: translateX(-50%);
  }
  .hero-reveal {
    top: 37%;
    left: 16px;
    right: 16px;
    width: auto;
    transform: none;
  }
  .hero-reveal__layout {
    display: block;
    text-align: center;
  }
  .hero-reveal__number {
    font-size: clamp(92px, 29vw, 138px);
    line-height: 0.86;
  }
  .hero-reveal__copy { margin-top: 12px; }
  .hero-reveal__unit {
    margin-bottom: 12px;
    font-size: clamp(24px, 7.5vw, 34px);
  }
  .hero-reveal__headline {
    gap: 3px;
    font-size: clamp(36px, 11vw, 52px);
    line-height: 1.06;
  }
  .hero-reveal__headline span { display: block; line-height: 1.06; }
  .hero-reveal__deck {
    max-width: 330px;
    margin: 16px auto 0;
    font-size: 14px;
    line-height: 1.5;
  }
  .hero-scroll-hint { margin-top: 16px; }
  .hero-controls {
    bottom: calc(var(--mobile-safe-bottom) + 6px);
  }

  #ranking { height: 760svh; }
  #ranking .story-stage__sticky {
    min-height: 100svh;
    height: 100svh;
    padding: 0;
  }
  #ranking .ranking-stage {
    top: var(--mobile-safe-top);
    bottom: var(--mobile-safe-bottom);
    width: calc(100% - 12px);
    height: auto;
    padding: 8px 7px 7px;
    border-radius: 12px;
  }
  #ranking .stage-title {
    max-width: none;
    margin: 0 2px 6px;
    font-size: clamp(20px, 5.9vw, 27px);
    line-height: 1.02;
    letter-spacing: 0;
    text-align: left;
  }
  #ranking .ranking-board {
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
    min-height: 0;
    border-top-width: 1px;
  }
  #ranking .ranking-header,
  #ranking .ranking-row {
    grid-template-columns: minmax(92px, 1.45fr) minmax(49px, .78fr) minmax(49px, .78fr) minmax(42px, .58fr);
    column-gap: 3px;
  }
  #ranking .ranking-header > :nth-child(2),
  #ranking .ranking-row > :nth-child(3) {
    display: block !important;
  }
  #ranking .ranking-header {
    height: 25px;
    min-height: 25px;
    padding: 0 3px;
    font-size: clamp(6.7px, 2vw, 8px);
    letter-spacing: 0.035em;
    white-space: nowrap;
  }
  #ranking .ranking-list {
    margin-top: 1px;
    overflow: hidden;
  }
  #ranking .ranking-row {
    padding: 0 3px;
    border-bottom-color: rgba(73,22,15,0.11);
  }
  #ranking .ranking-row__name {
    min-width: 0;
    font-size: clamp(8.8px, 2.75vw, 11px);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #ranking .ranking-row__metric,
  #ranking .ranking-row__rank {
    font-size: clamp(7.8px, 2.35vw, 9.6px);
    line-height: 1;
    white-space: nowrap;
  }
  #ranking .ranking-row__bar {
    border-left-width: 1px;
  }

  #ranking .ranking-callout {
    left: 7px;
    right: 7px;
    top: auto !important;
    bottom: 7px !important;
    width: auto;
    height: clamp(118px, 22svh, 148px);
    max-height: none;
    padding: 11px 13px 10px;
    border-radius: 9px;
    overflow: hidden;
    box-shadow: 4px 4px 0 #ef7437;
  }
  #ranking .ranking-callout h3 {
    margin: 0 0 4px;
    font-size: clamp(22px, 7vw, 29px);
    line-height: 1;
  }
  #ranking .ranking-callout p {
    margin: 0 0 5px;
    font-size: clamp(10.2px, 2.85vw, 12px);
    line-height: 1.28;
  }
  #ranking .ranking-callout strong {
    display: block;
    font-size: clamp(9.5px, 2.65vw, 11.5px);
    line-height: 1.25;
  }
  #ranking .ranking-callout--challengers p {
    font-size: clamp(9.5px, 2.55vw, 11px);
    line-height: 1.22;
  }

  #ranking .ranking-compare {
    left: 7px;
    right: 7px;
    bottom: 7px;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 7px;
    padding: 25px 7px 7px;
    border-radius: 10px;
    box-shadow: 4px 4px 0 #ef7437;
  }
  #ranking .ranking-compare::before {
    left: 10px;
    top: 7px;
    font-size: 7px;
    letter-spacing: 0.1em;
  }
  #ranking .compare-box {
    padding: 11px 13px;
    border-radius: 7px;
  }
  #ranking .compare-box h3 {
    margin: 0 0 4px;
    font-size: clamp(20px, 6.3vw, 27px);
    line-height: 1.03;
  }
  #ranking .compare-box__value {
    font-size: clamp(18px, 5.6vw, 24px);
    line-height: 1.05;
  }
  #ranking .compare-box p {
    margin-top: 5px;
    font-size: clamp(9.8px, 2.75vw, 11.5px);
    line-height: 1.25;
  }

  #market { height: 470svh; }
  #market .story-stage__sticky {
    height: 100svh;
    min-height: 100svh;
  }
  .market-heading {
    top: 14%;
    left: 16px;
    right: 16px;
    width: auto;
    transform: none;
    text-align: center;
  }
  .market-heading h2 {
    font-size: clamp(42px, 13vw, 62px);
    line-height: 1.02;
  }
  .market-heading p {
    max-width: 330px;
    margin: 14px auto 0;
    font-size: 15px;
    line-height: 1.5;
  }
  .market-panel {
    left: 12px !important;
    right: 12px !important;
    top: 50% !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none;
    min-height: 250px;
    padding: 22px 18px;
    border-radius: 12px;
    box-shadow: 6px 6px 0 rgba(122, 47, 33, 0.3);
  }
  .market-panel__label { font-size: 10px; }
  .market-panel__value {
    margin: 8px 0 5px;
    font-size: clamp(58px, 18vw, 82px);
    line-height: .95;
  }
  .market-panel__unit { font-size: 14px; }
  .market-panel__growth { font-size: 11px; line-height: 1.35; }
  .market-panel__note { font-size: 10px; line-height: 1.4; }
  .market-line { height: 54px; margin-top: 12px; }
  .market-conclusion {
    left: 16px;
    right: 16px;
    width: auto;
    max-width: none;
    text-align: center;
  }
  .market-conclusion h2 {
    font-size: clamp(40px, 12.5vw, 58px);
    line-height: 1.03;
  }
  .market-conclusion p {
    max-width: 330px;
    margin: 17px auto 0;
    font-size: 16px;
    line-height: 1.5;
  }

  .tax-donut {
    width: 100%;
    margin: 34px auto 46px;
  }
  .tax-donut__chart { width: min(286px, 82vw); }
  .tax-donut__legend { gap: 9px; }
  .tax-donut__legend span {
    grid-template-columns: 14px 47px 1fr;
    gap: 8px;
    padding: 11px 10px;
    font-size: 14px;
  }

  .article-credit {
    padding-left: 16px;
    padding-right: 16px;
    text-align: center;
  }
}

@media (max-width: 360px) {
  #ranking .ranking-stage { width: calc(100% - 8px); padding-left: 5px; padding-right: 5px; }
  #ranking .stage-title { font-size: 19px; }
  #ranking .ranking-header,
  #ranking .ranking-row {
    grid-template-columns: minmax(86px, 1.4fr) minmax(45px, .76fr) minmax(45px, .76fr) minmax(38px, .56fr);
    column-gap: 2px;
  }
  #ranking .ranking-row__name { font-size: 8.5px; }
  #ranking .ranking-row__metric,
  #ranking .ranking-row__rank { font-size: 7.5px; }
  #ranking .ranking-callout { height: clamp(116px, 23svh, 132px); }
  #ranking .ranking-callout p { font-size: 9.7px; }
  #ranking .ranking-callout--challengers p { font-size: 9.1px; }
  #ranking .compare-box h3 { font-size: 19px; }
  #ranking .compare-box__value { font-size: 17px; }
  #ranking .compare-box p { font-size: 9.2px; }
  .market-panel { min-height: 230px; padding: 18px 15px; }
}

@media (max-width: 767px) and (max-height: 650px) {
  #ranking { height: 820svh; }
  #ranking .ranking-stage { padding-top: 5px; padding-bottom: 5px; }
  #ranking .stage-title { font-size: clamp(18px, 5.4vw, 23px); margin-bottom: 4px; }
  #ranking .ranking-header { height: 22px; min-height: 22px; }
  #ranking .ranking-callout {
    height: 116px;
    padding: 8px 11px;
  }
  #ranking .ranking-callout h3 { font-size: 21px; }
  #ranking .ranking-callout p { font-size: 9.4px; line-height: 1.19; }
  #ranking .ranking-callout strong { font-size: 9px; }
  #ranking .ranking-callout--challengers p { font-size: 8.8px; }
  #ranking .ranking-compare { padding-top: 22px; }
  #ranking .compare-box { padding: 8px 10px; }
  #ranking .compare-box h3 { font-size: 18px; }
  #ranking .compare-box__value { font-size: 16px; }
  #ranking .compare-box p { font-size: 8.8px; line-height: 1.18; }
  .market-panel { min-height: 220px; }
}

@media (orientation: landscape) and (max-height: 520px) {
  #hero { height: 170svh; }
  #ranking { height: 900svh; }
  #ranking .ranking-stage { width: calc(100% - 12px); }
  #ranking .stage-title { font-size: 18px; max-width: 55%; }
  #ranking .ranking-board { width: 61%; max-width: 61%; }
  #ranking .ranking-callout {
    left: auto;
    right: 7px;
    top: 48px !important;
    bottom: 7px !important;
    width: 36%;
    height: auto;
  }
  #ranking .ranking-compare {
    top: 45px !important;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
  }
  #market { height: 540svh; }
  .market-panel { min-height: 190px; top: 53% !important; padding: 14px 16px; }
  .market-panel__value { font-size: 48px; }
}

@media (max-width: 767px) {
  #ranking .ranking-header > :nth-child(1),
  #ranking .ranking-row__name { grid-column: 1; }
  #ranking .ranking-header > :nth-child(2),
  #ranking .ranking-row__metric-a { grid-column: 2; }
  #ranking .ranking-header > :nth-child(3),
  #ranking .ranking-row__metric-b { grid-column: 3; }
  #ranking .ranking-header > :nth-child(4),
  #ranking .ranking-row__rank { grid-column: 4; }
}

/* Mobile layout correction: keep ranking callouts below the data board and center the market conclusion. */
@media (max-width: 767px) and (orientation: portrait) {
  #ranking .ranking-stage {
    overflow: visible;
  }

  #ranking .ranking-callout {
    top: calc(100% + 14px) !important;
    bottom: auto !important;
    left: 10px;
    right: 10px;
    width: auto;
    height: auto;
    min-height: clamp(126px, 18svh, 154px);
    max-height: none;
    padding: 15px 16px 14px;
    overflow: visible;
  }

  #ranking .ranking-callout h3 {
    font-size: clamp(28px, 8.2vw, 36px);
    margin-bottom: 7px;
  }

  #ranking .ranking-callout p {
    font-size: clamp(12.5px, 3.55vw, 15px);
    line-height: 1.38;
    margin-bottom: 8px;
  }

  #ranking .ranking-callout strong {
    font-size: clamp(11.5px, 3.15vw, 13.5px);
    line-height: 1.3;
  }

  #ranking .ranking-callout--challengers p {
    font-size: clamp(11.8px, 3.3vw, 14px);
    line-height: 1.35;
  }

  .market-conclusion {
    top: 50%;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    padding: 0 clamp(20px, 6vw, 32px);
    text-align: center;
    overflow: visible;
  }

  .market-conclusion h2 {
    width: min(100%, 390px);
    margin: 0 auto;
    font-size: clamp(36px, 11vw, 54px);
    line-height: 1.08;
    text-align: center;
    text-wrap: balance;
    overflow-wrap: normal;
    word-break: normal;
  }

  .market-conclusion p {
    width: min(100%, 350px);
    margin: 18px auto 0;
    font-size: clamp(15px, 4.2vw, 18px);
    line-height: 1.5;
    text-align: center;
  }
}

@media (max-width: 360px) and (orientation: portrait) {
  #ranking .ranking-callout {
    top: calc(100% + 10px) !important;
    min-height: 120px;
    padding: 12px 13px;
  }
  #ranking .ranking-callout h3 { font-size: 26px; }
  #ranking .ranking-callout p { font-size: 11.5px; }
  #ranking .ranking-callout strong { font-size: 10.8px; }
  #ranking .ranking-callout--challengers p { font-size: 11px; }
  .market-conclusion h2 { font-size: clamp(34px, 10.8vw, 46px); }
}

@media (max-width: 767px) {
  .hero-brand {
    top: calc(var(--mobile-safe-top) + 1.5cm) !important;
  }
}