:root {
  --bg: #050507;
  --bg-deep: #020204;
  --ink: #f4f2f7;
  --muted: #a29dad;
  --muted-2: #6e6878;
  --line: rgba(255,255,255,.10);
  --glass: rgba(12,11,18,.62);
  --purple: #9a63ff;
  --purple-2: #4c1e9e;
  --purple-soft: rgba(145,89,255,.30);
  --white-soft: rgba(255,255,255,.70);
  --ease: cubic-bezier(.16,.84,.22,1);
}

* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--ink); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-synthesis:none; }
body { overflow:hidden; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; }

.ambient, .grain, .pointer-light { position:fixed; inset:0; pointer-events:none; z-index:0; }
.ambient-a { background: radial-gradient(circle at 77% 46%, rgba(110,51,230,.21), transparent 28%); }
.ambient-b { background: radial-gradient(circle at 12% 80%, rgba(103,73,177,.13), transparent 26%); }
.grain { opacity:.045; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E"); }
.pointer-light { width:280px; height:280px; margin:-140px; left:50vw; top:50vh; inset:auto; border-radius:50%; background:radial-gradient(circle, rgba(159,103,255,.10), transparent 65%); filter:blur(10px); transition:left .16s linear, top .16s linear; z-index:1; }

.site-shell { position:relative; z-index:2; width:100%; height:100svh; overflow:hidden; }
.topbar { position:absolute; top:0; left:0; right:0; height:92px; display:flex; align-items:center; justify-content:space-between; gap:30px; padding:18px 34px; border-bottom:1px solid rgba(255,255,255,.055); z-index:20; backdrop-filter:blur(16px); background:linear-gradient(180deg, rgba(3,3,5,.80), rgba(3,3,5,.26)); }
.brand { display:flex; align-items:center; gap:12px; min-width:230px; }
.brand-logo { width:46px; height:46px; border-radius:14px; overflow:hidden; position:relative; transform:rotate(-8deg); border:1px solid rgba(255,255,255,.18); box-shadow:0 12px 40px rgba(0,0,0,.35), 0 0 32px rgba(132,73,245,.18); }
.brand-logo:after { content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(143,94,255,.30),transparent 55%); mix-blend-mode:screen; }
.brand-logo img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.9) contrast(1.05); }
.brand-wordmark { display:grid; line-height:.95; text-transform:uppercase; letter-spacing:.08em; }
.brand-wordmark b { font-size:12px; font-weight:800; }
.brand-wordmark strong { font-size:18px; letter-spacing:.16em; }
.brand-wordmark small { margin-top:5px; color:var(--muted); font-size:8px; letter-spacing:.25em; }
.scene-nav { display:flex; align-items:center; gap:6px; }
.scene-nav-item { border:0; background:transparent; padding:11px 12px; color:var(--muted); cursor:pointer; text-transform:uppercase; font-size:10px; letter-spacing:.14em; position:relative; transition:color .25s var(--ease); }
.scene-nav-item span { color:var(--muted-2); margin-right:7px; font-size:9px; }
.scene-nav-item:after { content:""; position:absolute; left:12px; right:12px; bottom:4px; height:1px; transform:scaleX(0); transform-origin:left; background:linear-gradient(90deg,var(--purple),transparent); transition:transform .35s var(--ease); }
.scene-nav-item:hover, .scene-nav-item.is-active { color:var(--ink); }
.scene-nav-item.is-active:after { transform:scaleX(1); }
.topbar-status { display:flex; align-items:center; gap:8px; min-width:230px; justify-content:flex-end; color:#8e8a97; font-size:8px; letter-spacing:.18em; }
.topbar-status span { width:6px; height:6px; border-radius:50%; background:#bf86ff; box-shadow:0 0 18px rgba(191,134,255,.75); }

.mono { font-family:"SFMono-Regular", Consolas, "Liberation Mono", monospace; letter-spacing:.13em; }
.scene-viewport { position:absolute; inset:0; touch-action:pan-y; }
.scene-panel { position:absolute; inset:0; padding:112px 7vw 98px; opacity:0; pointer-events:none; transform:translate3d(8%,0,0) scale(.92) rotateY(-6deg); transform-origin:center; transition:opacity .8s var(--ease), transform 1s var(--ease), filter 1s var(--ease); filter:blur(8px); perspective:1600px; overflow:hidden; }
.scene-panel.is-active { opacity:1; pointer-events:auto; transform:translate3d(0,0,0) scale(1) rotateY(0); filter:blur(0); }
.scene-panel.is-leaving { transform:translate3d(-8%,0,0) scale(.92) rotateY(6deg); opacity:0; }
.scene-number { position:absolute; left:7vw; top:111px; color:var(--muted-2); font-size:9px; }
.eyebrow { margin:0 0 14px; font-size:9px; font-weight:700; letter-spacing:.26em; color:#bdb7c8; text-transform:uppercase; }

/* HERO */
.scene-panel[data-panel="home"] { display:grid; grid-template-columns:minmax(360px, .72fr) minmax(470px,1.15fr); align-items:center; gap:30px; }
.hero-copy { position:relative; z-index:8; max-width:680px; margin-top:20px; }
.hero-copy h1 { margin:0; text-transform:uppercase; letter-spacing:-.075em; line-height:.82; font-size:clamp(64px, 9vw, 156px); transform:scaleX(.93); transform-origin:left center; }
.hero-copy h1 span { display:block; }
.hero-copy h1 .solid { color:#f5f3f7; }
.hero-copy h1 .accent { margin-left:.02em; color:transparent; -webkit-text-stroke:1px rgba(169,115,255,.92); text-shadow:0 0 45px rgba(143,82,248,.18); }
.hero-lead { max-width:580px; margin:27px 0 24px; color:#c2bcc8; font-size:15px; line-height:1.7; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.cta { min-width:220px; min-height:70px; display:grid; grid-template-columns:1fr auto; grid-template-rows:auto 1fr; align-items:center; padding:13px 17px 12px 19px; border:1px solid rgba(255,255,255,.12); position:relative; overflow:hidden; transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); }
.cta:hover { transform:translateY(-4px); border-color:rgba(168,112,255,.45); box-shadow:0 20px 70px rgba(50,22,100,.26); }
.cta b { font-size:13px; letter-spacing:.10em; }
.cta i { grid-row:1/3; grid-column:2; font-style:normal; font-size:23px; color:#cfb3ff; }
.cta-top { color:#a8a0b1; font-size:7px; }
.cta-main { background:linear-gradient(135deg, rgba(145,87,255,.26), rgba(21,18,32,.86)); box-shadow:0 0 60px rgba(124,64,230,.13); }
.cta-secondary { background:rgba(12,11,17,.60); }
.cta-glow { position:absolute; inset:-60% 20% auto -20%; width:70%; height:180%; background:radial-gradient(circle, rgba(168,106,255,.28), transparent 62%); transform:rotate(-12deg); pointer-events:none; }
.steam-note { margin:13px 0 0; color:#777180; font-size:10px; letter-spacing:.05em; }
.steam-note strong { color:#b8a8d5; margin-right:8px; font-size:9px; }

.hero-stage { position:relative; height:min(720px, 73vh); min-height:560px; perspective:1600px; transform-style: preserve-3d; will-change:transform; }
.hero-grid { position:absolute; inset:4% 4% 6% 7%; background:linear-gradient(rgba(145,97,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(145,97,255,.13) 1px,transparent 1px); background-size:56px 56px; transform:perspective(720px) rotateX(67deg) translateY(35%); transform-origin:center bottom; opacity:.48; mask-image:linear-gradient(to bottom, transparent, #000 35%, #000 80%, transparent); animation:gridFloat 16s linear infinite; }
@keyframes gridFloat { to { background-position:56px 56px,56px 56px; } }
.hero-ring { position:absolute; border:1px solid rgba(155,100,255,.28); border-radius:50%; transform-style: preserve-3d; }
.ring-a { width:78%; aspect-ratio:1; top:10%; left:11%; transform:rotateX(74deg) rotateZ(-10deg); box-shadow:0 0 60px rgba(113,49,230,.08); animation:spinA 22s linear infinite; }
.ring-b { width:58%; aspect-ratio:1; top:24%; left:20%; border-style:dashed; transform:rotateY(68deg) rotateZ(18deg); animation:spinB 18s linear infinite reverse; }
@keyframes spinA { to { transform:rotateX(74deg) rotateZ(350deg); } }
@keyframes spinB { to { transform:rotateY(68deg) rotateZ(-342deg); } }
.hero-beam { position:absolute; width:1px; height:76%; top:12%; background:linear-gradient(transparent,rgba(165,111,255,.55),transparent); box-shadow:0 0 24px rgba(143,90,255,.34); transform-origin:center; }
.beam-a { left:26%; transform:rotate(23deg); }
.beam-b { right:23%; transform:rotate(-18deg); opacity:.55; }
.hero-poster-assembly { position:absolute; width:min(440px, 54%); aspect-ratio:1 / 1.08; right:8%; top:6%; transform:rotateY(-12deg) rotateX(3deg) rotateZ(-2deg); transform-style: preserve-3d; transition:transform .25s var(--ease); }
.poster-shadow { position:absolute; inset:10% -4% -7% 6%; background:radial-gradient(circle, rgba(150,92,255,.23), transparent 62%); filter:blur(42px); transform:translateZ(-70px); }
.poster-frame { position:absolute; inset:0; padding:10px; border:1px solid rgba(255,255,255,.24); background:linear-gradient(145deg, rgba(15,13,20,.75), rgba(6,6,9,.88)); box-shadow:26px 35px 110px rgba(0,0,0,.52), 0 0 90px rgba(122,62,230,.13); transform-style: preserve-3d; }
.poster-frame:before { content:""; position:absolute; inset:5px; border:1px solid rgba(255,255,255,.055); pointer-events:none; }
.poster-frame img { display:block; width:100%; height:100%; object-fit:cover; filter:brightness(.77) saturate(.8) contrast(1.08); }
.poster-overlay { position:absolute; inset:10px; background:linear-gradient(125deg,rgba(99,48,194,.20),transparent 35%, transparent 68%,rgba(146,89,255,.18)); mix-blend-mode:screen; pointer-events:none; }
.poster-scan { position:absolute; left:10px; right:10px; height:1px; top:24%; background:linear-gradient(90deg,transparent,#d6c7ff,transparent); box-shadow:0 0 22px rgba(183,138,255,.65); opacity:.65; animation:scan 7s linear infinite; }
@keyframes scan { 0% { transform:translateY(0); } 50% { transform:translateY(240px); } 100% { transform:translateY(420px); } }
.poster-top, .poster-bottom { position:absolute; left:24px; right:24px; display:flex; justify-content:space-between; z-index:3; font-size:8px; text-shadow:0 2px 10px #000; }
.poster-top { top:24px; } .poster-bottom { bottom:21px; }
.poster-side-tag { position:absolute; right:-58px; top:28%; writing-mode:vertical-rl; transform:rotate(180deg); color:#9d96a9; font-size:8px; letter-spacing:.22em; }
.poster-side-tag span { color:#c5a8ff; margin-bottom:8px; }
.glass-module { border:1px solid rgba(255,255,255,.14); background:linear-gradient(135deg,rgba(20,18,28,.52),rgba(6,6,9,.72)); backdrop-filter:blur(14px); box-shadow:0 18px 70px rgba(0,0,0,.25); }
.floating-module { position:absolute; padding:13px 14px; color:#97919f; font-size:8px; letter-spacing:.12em; }
.module-a { left:4%; top:22%; min-width:122px; }
.module-a strong { display:block; margin-top:5px; color:#e3dde9; font-size:16px; letter-spacing:.12em; }
.module-dot { display:inline-block; width:5px; height:5px; border-radius:50%; background:#b57dff; box-shadow:0 0 12px rgba(181,125,255,.9); margin-right:6px; }
.module-b { left:8%; bottom:17%; max-width:160px; line-height:1.6; }
.floating-number { position:absolute; right:5%; bottom:2%; font-size:110px; font-weight:800; color:transparent; -webkit-text-stroke:1px rgba(173,129,255,.18); }
.floating-cross { position:absolute; color:#d3c8dc; font-size:17px; opacity:.6; }
.cross-a { left:16%; top:9%; } .cross-b { right:13%; top:18%; }
.hero-bottom { position:absolute; left:7vw; right:7vw; bottom:26px; display:flex; justify-content:space-between; color:#716b79; font-size:8px; }

/* COMMON SLIDES */
.slide-copy { position:absolute; z-index:6; width:min(560px,44vw); }
.slide-copy h2 { margin:0 0 20px; font-size:clamp(34px,4vw,70px); line-height:.98; letter-spacing:-.055em; }
.slide-copy p { margin:0 0 14px; color:#c0bac5; line-height:1.72; font-size:13px; }

/* WHY */
.slide-visual-why { position:absolute; inset:11% 45% 8% 4%; perspective:1300px; transform-style: preserve-3d; }
.giant-word { position:absolute; font-size:clamp(96px,14vw,220px); line-height:.78; font-weight:900; letter-spacing:-.09em; white-space:nowrap; transform:scaleX(.88); }
.giant-word-top { top:19%; left:-2%; color:#ece8ef; opacity:.95; }
.giant-word-bottom { top:39%; left:9%; color:transparent; -webkit-text-stroke:1px rgba(166,118,255,.62); }
.why-core { position:absolute; width:260px; height:260px; right:8%; top:28%; display:grid; place-content:center; text-align:center; border-radius:50%; border:1px solid rgba(161,105,255,.40); background:radial-gradient(circle,rgba(146,83,255,.15),rgba(7,7,10,.86) 68%); box-shadow:0 0 110px rgba(115,57,221,.16); transform:translateZ(65px); }
.core-kicker { color:#8f879d; font-size:7px; margin-bottom:14px; }
.why-core strong { font-size:21px; letter-spacing:-.02em; line-height:1.05; }
.core-line { width:76px; height:1px; background:linear-gradient(90deg,transparent,#be95ff,transparent); margin:18px auto 0; }
.orbit { position:absolute; border:1px solid rgba(157,101,255,.24); border-radius:50%; transform-style: preserve-3d; }
.orbit-one { width:92%; height:42%; left:3%; top:34%; transform:rotateX(70deg) rotateZ(-8deg); animation:orbitA 18s linear infinite; }
.orbit-two { width:80%; height:35%; left:8%; top:38%; transform:rotateY(67deg) rotateZ(10deg); border-style:dashed; animation:orbitB 13s linear infinite reverse; }
@keyframes orbitA { to { transform:rotateX(70deg) rotateZ(352deg); } }
@keyframes orbitB { to { transform:rotateY(67deg) rotateZ(-350deg); } }
.why-copy { right:7vw; top:18%; }
.stat-rail { position:absolute; left:7vw; bottom:8%; display:flex; gap:1px; border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.03); }
.stat-rail div { min-width:155px; padding:14px 18px; border-right:1px solid rgba(255,255,255,.07); }
.stat-rail div:last-child { border-right:0; }
.stat-rail b { display:block; font-size:18px; letter-spacing:.02em; }
.stat-rail span { color:#7e7786; font-size:8px; letter-spacing:.11em; text-transform:uppercase; }

/* FEATURES */
.features-head { position:absolute; top:14%; left:7vw; z-index:20; max-width:min(1080px,78vw); }
.features-head h2 { position:relative; z-index:2; margin:0; font-size:clamp(38px,5vw,84px); line-height:.92; letter-spacing:-.065em; }
.features-head h2 span { color:transparent; -webkit-text-stroke:1px rgba(161,114,255,.65); }
.feature-space { position:absolute; z-index:8; top:39%; left:4.5vw; right:4.5vw; height:clamp(300px,32vh,360px); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:minmax(300px,1fr); gap:20px; align-items:stretch; perspective:1200px; transform-style:preserve-3d; }
.feature-object { position:relative; width:auto; min-height:0; height:100%; padding:18px; border:1px solid rgba(255,255,255,.08); background:linear-gradient(145deg,rgba(18,16,24,.84),rgba(5,5,8,.68)); transform-style:preserve-3d; box-shadow:0 30px 100px rgba(0,0,0,.28); transition:transform .45s var(--ease), border-color .45s var(--ease); }
.feature-object:hover, .feature-balance:hover { transform:translateY(-5px) translateZ(24px) rotateX(1.5deg); border-color:rgba(155,100,255,.38); box-shadow:0 38px 110px rgba(64,28,122,.30); }
.feature-object:before { content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(140,85,246,.11),transparent 55%); pointer-events:none; }
.feature-armor { grid-column:1; grid-row:1; transform:none; }
.feature-infantry { grid-column:2; grid-row:1; transform:none; }
.feature-firepower { grid-column:3; grid-row:1; transform:none; }
.feature-icon-shell { width:72px; height:72px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.10); background:radial-gradient(circle,rgba(137,78,232,.16),rgba(7,7,10,.66)); box-shadow:inset 0 0 30px rgba(155,100,255,.07); }
.feature-icon-shell img { width:54px; height:54px; display:block; object-fit:contain; filter:brightness(1.08) drop-shadow(0 0 10px rgba(155,100,255,.12)); }
.feature-object-copy { margin-top:14px; }

.feature-object-copy h3 { margin:6px 0 7px; font-size:24px; letter-spacing:-.03em; }

.feature-balance { grid-column:4; grid-row:1; }


/* STORY */
.story-stage { position:absolute; z-index:5; inset:13% 52% 8% 4%; perspective:1400px; transform-style: preserve-3d; }
.story-year { position:absolute; font-size:clamp(100px,15vw,240px); font-weight:900; letter-spacing:-.12em; line-height:.7; color:transparent; -webkit-text-stroke:1px rgba(159,103,255,.20); }
.year-left { left:-2%; top:24%; } .year-right { right:-8%; top:46%; color:#efebf1; -webkit-text-stroke:0; opacity:.88; }
.story-axis { position:absolute; width:2px; height:72%; left:48%; top:13%; background:linear-gradient(transparent,rgba(167,113,255,.65),transparent); box-shadow:0 0 24px rgba(149,88,255,.28); transform:rotate(18deg); }
.story-node { position:absolute; display:grid; gap:4px; padding:10px 13px; border:1px solid rgba(255,255,255,.09); background:rgba(11,10,15,.72); font-family:Consolas,monospace; font-size:7px; letter-spacing:.15em; box-shadow:0 16px 40px rgba(0,0,0,.22); }
.story-node span { color:#a980de; } .story-node b { font-size:8px; color:#d0c8d7; }
.node-a { left:18%; top:18%; transform:rotateZ(-4deg) translateZ(55px); }
.node-b { right:7%; top:38%; transform:rotateZ(7deg) translateZ(90px); }
.node-c { left:28%; bottom:9%; transform:rotateZ(-3deg) translateZ(70px); }
.story-panel { position:absolute; width:250px; height:260px; right:11%; top:20%; padding:17px; transform:rotateY(-12deg) rotateZ(5deg) translateZ(100px); display:flex; flex-direction:column; justify-content:space-between; }
.story-panel span { color:#827b89; font-size:7px; }
.story-panel strong { font-size:28px; line-height:1; letter-spacing:-.055em; }
.story-mark { color:transparent; font-size:76px; font-weight:900; -webkit-text-stroke:1px rgba(166,112,255,.28); align-self:flex-end; }
.story-copy { right:6vw; top:16%; z-index:20; width:min(42vw,650px); padding:24px 0 24px 32px; background:none; text-shadow:0 1px 10px rgba(0,0,0,.62); }
.story-sign { color:#81798a; font-size:8px; margin-top:22px !important; }

.scene-controls { position:absolute; left:50%; bottom:22px; transform:translateX(-50%); display:flex; align-items:center; gap:18px; z-index:30; }
.arrow-button { width:38px; height:38px; border:1px solid rgba(255,255,255,.10); background:rgba(10,9,14,.66); border-radius:50%; cursor:pointer; color:#aaa3b0; transition:transform .25s var(--ease), border-color .25s var(--ease); }
.arrow-button:hover { transform:translateY(-2px); border-color:rgba(164,108,255,.5); }
.scene-dots { display:flex; gap:6px; }
.scene-dot { width:44px; height:30px; border:1px solid rgba(255,255,255,.08); background:rgba(8,7,12,.46); cursor:pointer; color:#625d69; font:8px/1 Consolas,monospace; transition:all .3s var(--ease); }
.scene-dot.is-active, .scene-dot:hover { color:#e6e0ea; border-color:rgba(164,108,255,.45); background:rgba(127,69,226,.13); }
.scene-progress { position:absolute; left:0; right:0; bottom:0; height:1px; background:rgba(255,255,255,.05); z-index:30; }
.scene-progress span { display:block; width:25%; height:100%; background:linear-gradient(90deg,transparent,#b88cff,#6d36bb); transition:width .8s var(--ease); box-shadow:0 0 14px rgba(174,127,255,.40); }

@media (max-width: 1100px) {
  .topbar { padding-inline:22px; }
  .topbar-status { display:none; }
  .brand { min-width:180px; }
  .scene-panel { padding-inline:5vw; }
  .scene-number { left:5vw; }
  .hero-copy h1 { font-size:clamp(60px,9vw,110px); }
  .hero-stage { min-height:500px; }
  .hero-poster-assembly { right:0; width:min(400px,56%); }
  .slide-copy { width:43vw; }
  .feature-object { width:auto; }
  .feature-space { inset:42% 5vw 3% 5vw; gap:24px; }
  .feature-infantry { left:auto; }
}

@media (max-width: 820px), (orientation: landscape) and (max-height: 500px) and (max-width: 1100px) {
  body { overflow:hidden; }
  .site-shell { height:100svh; min-height:100svh; overflow:hidden; }
  .topbar {
    position:fixed;
    height:104px;
    padding:10px 14px 8px;
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:40px 38px;
    align-content:center;
    gap:5px;
  }
  .brand { min-width:0; width:max-content; }
  .brand-logo { width:40px; height:40px; }
  .brand-wordmark strong { font-size:15px; }
  .scene-nav {
    width:100%;
    max-width:none;
    min-width:0;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:2px;
    overflow:visible;
  }
  .scene-nav-item {
    min-width:0;
    width:100%;
    padding:7px 3px 8px;
    font-size:8px;
    letter-spacing:.09em;
    white-space:nowrap;
    text-overflow:clip;
    overflow:hidden;
  }
  .scene-nav-item span { display:none; }
  .scene-nav-item:after { left:6px; right:6px; bottom:3px; }
  .scene-viewport {
    position:relative;
    height:calc(100svh - 104px);
    min-height:0;
    margin-top:104px;
  }
  .scene-panel {
    position:absolute;
    height:100%;
    min-height:0;
    padding:52px 18px 70px;
    display:block !important;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    transform:none;
    transform-origin:center;
    filter:none;
    perspective:none;
    transform-style:flat;
    transition:opacity .65s var(--ease);
  }
  .scene-panel.is-active, .scene-panel.is-leaving { transform:none; }
  .scene-number { top:19px; left:18px; }

  .scene-panel[data-panel="home"] { display:block !important; }
  .hero-copy { max-width:none; margin-top:8px; }
  .hero-copy h1 { font-size:clamp(54px,16vw,92px); line-height:.83; }
  .hero-lead { font-size:12px; margin-top:18px; line-height:1.62; max-width:100%; }
  .hero-actions { gap:8px; }
  .cta { flex:1 1 0; min-width:0; min-height:64px; padding:10px 12px; }
  .cta b { font-size:10px; letter-spacing:.06em; }
  .steam-note { font-size:9px; line-height:1.45; max-width:90%; }
  .hero-stage { height:48vh; min-height:320px; max-height:430px; margin-top:8px; }
  .hero-poster-assembly { width:min(300px,70vw); right:12%; top:5%; }
  .module-a { left:0; top:17%; transform:scale(.82); transform-origin:left center; }
  .module-b { left:1%; bottom:4%; transform:scale(.75); transform-origin:left bottom; }
  .poster-side-tag { right:-39px; font-size:6px; }
  .floating-number { font-size:72px; }
  .hero-grid { inset:4% 0 5% 2%; background-size:36px 36px; }
  .hero-bottom { position:relative; left:0; right:auto; bottom:auto; margin-top:3px; }

  /* WHY: mobile uses normal flow so the full copy and stats cannot collide. */
  .scene-panel[data-panel="why"] { display:flex !important; flex-direction:column; }
  .slide-visual-why {
    position:relative;
    inset:auto;
    width:100%;
    height:190px;
    flex:0 0 190px;
    margin:2px 0 8px;
    overflow:hidden;
    perspective:none;
    transform-style:flat;
  }
  .giant-word { font-size:clamp(70px,21vw,165px); }
  .giant-word-top { top:13%; left:1%; }
  .giant-word-bottom { top:34%; left:11%; }
  .why-core { width:160px; height:160px; right:5%; top:27%; transform:none; }
  .why-core strong { font-size:15px; }
  .why-copy,
  .slide-copy,
  .story-copy {
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;
    width:100%;
  }
  .why-copy { padding:0 0 8px; }
  .slide-copy h2 { font-size:clamp(27px,7.8vw,42px); margin-bottom:10px; }
  .slide-copy p { font-size:10.5px; line-height:1.48; max-width:none; }
  .why-copy > p:not(.eyebrow) { margin-bottom:12px; }
  .why-copy > p:not(.eyebrow):last-child { margin-bottom:0; }
  .stat-rail {
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    width:100%;
    flex:none;
    margin-top:4px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .stat-rail div { min-width:0; padding:8px 7px; }
  .stat-rail b { font-size:13px; }
  .stat-rail span { font-size:5.8px; line-height:1.3; }

  /* FEATURES: heading and cards now occupy separate flow rows. */
  .scene-panel[data-panel="features"] { display:flex !important; flex-direction:column; }
  .features-head {
    position:relative;
    top:auto;
    left:auto;
    right:auto;
    max-width:none;
    flex:none;
    margin:5px 0 0;
  }
  .features-head h2 { font-size:clamp(35px,11vw,76px); line-height:.94; }
  .feature-space {
    position:relative;
    z-index:8;
    top:auto;
    left:auto;
    right:auto;
    bottom:auto;
    width:100%;
    height:auto;
    min-height:0;
    margin-top:16px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:auto auto;
    grid-auto-rows:minmax(170px,auto);
    gap:12px;
    perspective:none;
    transform-style:flat;
  }
  .feature-object {
    width:auto;
    min-width:0;
    min-height:176px;
    height:auto;
    padding:12px;
    overflow:hidden;
    transform:none !important;
  }
  .feature-object:hover, .feature-balance:hover { transform:translateY(-4px) !important; }
  .feature-icon-shell { width:50px; height:50px; }
  .feature-icon-shell img { width:38px; height:38px; }
  .feature-object-copy { margin-top:10px; }
  .feature-object-copy h3 { font-size:20px; margin:5px 0; }
  .feature-object-copy p { font-size:8.6px; line-height:1.38; margin-bottom:0; }
  .feature-armor { grid-column:1; grid-row:1; }
  .feature-infantry { grid-column:2; grid-row:1; }
  .feature-firepower { grid-column:1; grid-row:2; }
  .feature-balance { grid-column:2; grid-row:2; }

  /* STORY: preserve the existing composition, but remove the mobile clipping layer. */
  .story-stage { z-index:5; inset:10% 4% 40% 0; }
  .story-year { font-size:24vw; }
  .year-left { left:0; top:18%; } .year-right { right:-2%; top:39%; }
  .story-axis { height:68%; }
  .story-panel { width:180px; height:190px; right:9%; top:18%; padding:12px; }
  .story-panel strong { font-size:20px; }
  .story-copy { position:absolute; left:18px; right:18px; top:auto; bottom:8px; width:auto; padding:18px 0 24px 18px; background:none; }
  .story-copy p:nth-of-type(n+3) { display:none; }
  .story-mark { font-size:52px; }
  .story-node { padding:7px 8px; font-size:6px; }
  .node-a { left:5%; } .node-b { right:5%; } .node-c { left:20%; bottom:6%; }

  .scene-controls { position:fixed; bottom:10px; }
  .arrow-button { width:34px; height:34px; }
  .scene-dot { width:38px; height:27px; }
}

@media (min-width: 521px) and (max-width: 820px), (orientation: landscape) and (max-height: 500px) and (max-width: 1100px) {
  .topbar { height:108px; grid-template-rows:42px 42px; }
  .scene-viewport { height:calc(100svh - 108px); margin-top:108px; }
  .scene-panel { padding:54px 28px 74px; }
  .scene-number { left:28px; }
  .scene-nav-item { font-size:9px; letter-spacing:.12em; }
  .slide-visual-why { height:300px; flex-basis:300px; }
  .giant-word { font-size:clamp(100px,20vw,190px); }
  .why-core { width:220px; height:220px; }
  .slide-copy h2 { font-size:clamp(36px,6vw,60px); }
  .slide-copy p { font-size:13px; }
  .feature-space { grid-auto-rows:minmax(205px,auto); gap:16px; }
  .feature-object { min-height:210px; padding:16px; }
  .feature-icon-shell { width:60px; height:60px; }
  .feature-icon-shell img { width:44px; height:44px; }
  .feature-object-copy h3 { font-size:23px; }
  .feature-object-copy p { font-size:10px; }
}

@media (min-width: 821px) and (max-width: 1100px) and (min-height: 501px) {
  .topbar { padding-inline:22px; }
  .scene-nav { gap:2px; }
  .scene-nav-item { padding-inline:8px; font-size:9px; }
  .scene-panel { padding-inline:5vw; transform:none; filter:none; transition:opacity .65s var(--ease); }
  .scene-panel.is-active, .scene-panel.is-leaving { transform:none; }
  .scene-number { left:5vw; }
  .features-head { left:5vw; top:19%; max-width:78vw; }
  .feature-space { left:5vw; right:5vw; gap:16px; }
  .feature-object { padding:16px; }
  .story-copy { right:5vw; width:min(44vw,610px); }
}

@media (min-width: 821px) and (max-width: 1100px) and (orientation: portrait) {
  .scene-panel { padding:104px 6vw 86px; overflow-y:auto; overflow-x:hidden; }

  .scene-panel[data-panel="why"] {
    display:grid;
    grid-template-columns:minmax(0, .93fr) minmax(0, 1.07fr);
    grid-template-rows:minmax(0, 1fr) auto;
    column-gap:34px;
    row-gap:22px;
    align-items:center;
  }

  .scene-panel[data-panel="why"] .scene-number { grid-column:1 / -1; position:relative; left:auto; top:auto; align-self:start; margin-bottom:0; }

  .slide-visual-why {
    position:relative;
    inset:auto;
    grid-column:1;
    grid-row:2;
    width:100%;
    height:min(55vh, 610px);
    min-height:440px;
    margin:0;
    overflow:visible;
    perspective:1100px;
    transform-style:flat;
    align-self:center;
  }
  .giant-word { font-size:clamp(82px, 9.4vw, 118px); transform:scaleX(.75); transform-origin:left center; }
  .giant-word-top { top:18%; left:0; }
  .giant-word-bottom { top:42%; left:7%; }
  .why-core { width:232px; height:232px; right:1%; top:34%; transform:none; z-index:3; }
  .why-core strong { font-size:20px; }
  .orbit-one { width:94%; height:44%; left:1%; top:39%; }
  .orbit-two { width:82%; height:38%; left:6%; top:42%; }

  .why-copy {
    position:relative;
    grid-column:2;
    grid-row:2;
    left:auto; right:auto; top:auto; bottom:auto;
    width:auto;
    max-width:100%;
    align-self:center;
    padding:10px 0 0;
  }
  .why-copy h2 { font-size:clamp(38px, 4.8vw, 56px); margin-bottom:16px; }
  .why-copy p { font-size:13px; line-height:1.62; margin-bottom:14px; }
  .why-copy > p:not(.eyebrow) { margin-bottom:14px; }

  .stat-rail {
    position:relative;
    grid-column:1 / -1;
    grid-row:3;
    left:auto; right:auto; bottom:auto;
    width:min(700px, 100%);
    justify-self:start;
    margin:0;
  }
  .stat-rail div { min-width:0; flex:1; }
}

@media (max-width: 520px) {
  .topbar { padding-inline:10px; }
  .brand-wordmark b { font-size:9px; }
  .brand-wordmark strong { font-size:14px; }
  .brand-wordmark small { font-size:6px; }
  .scene-nav-item { font-size:7px; padding-inline:2px; letter-spacing:.065em; }
  .scene-nav-item:after { left:3px; right:3px; }
  .hero-poster-assembly { width:62vw; right:12%; }
  .floating-number { right:1%; }
  .hero-lead { display:block; overflow:visible; }
  .feature-object { width:auto; }
}

.legal-links {
  position:fixed;
  right:28px;
  bottom:24px;
  z-index:31;
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  justify-content:flex-end;
  max-width:52vw;
}
.legal-links a {
  color:#6f6877;
  font:7px/1.2 Consolas, monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:color .25s var(--ease);
}
.legal-links a:hover, .legal-links a:focus-visible { color:#d8d0e0; }



/* V13 responsive/legal refinements */
.topbar {
  min-width: 0;
}
.legal-links {
  position:relative;
  left:auto;
  right:auto;
  top:auto;
  bottom:auto;
  z-index:21;
  display:grid;
  grid-template-columns:repeat(2,max-content);
  grid-auto-rows:minmax(0,auto);
  align-items:center;
  justify-content:end;
  gap:5px 14px;
  max-width:none;
  margin:0;
  padding:0;
  text-align:left;
}
.legal-links a {
  min-width:0;
  max-width:170px;
  color:#777080;
  font:7px/1.15 Consolas,monospace;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:normal;
  transition:color .25s var(--ease);
}
.legal-links a:hover,
.legal-links a:focus-visible {
  color:#d8d0e0;
}

@media (max-width: 1100px) {
  .topbar {
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:14px;
  }
  .topbar .scene-nav {
    justify-self:center;
  }
  .topbar .legal-links {
    justify-self:end;
  }
  .topbar-status {
    display:none;
  }
}

@media (max-width: 820px), (orientation: landscape) and (max-height: 500px) and (max-width: 1100px) {
  .topbar {
    height:118px;
    min-height:118px;
    padding:9px 12px 7px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:48px 44px;
    column-gap:10px;
    row-gap:6px;
    align-content:center;
  }
  .brand {
    grid-column:1;
    grid-row:1;
    min-width:0;
    width:max-content;
    align-self:center;
  }
  .topbar .legal-links {
    grid-column:2;
    grid-row:1;
    justify-self:end;
    align-self:center;
    grid-template-columns:repeat(2,minmax(82px,1fr));
    width:min(205px,52vw);
    gap:4px 10px;
  }
  .topbar .legal-links a {
    max-width:none;
    font-size:6.2px;
    letter-spacing:.045em;
  }
  .topbar .scene-nav {
    grid-column:1 / -1;
    grid-row:2;
    width:100%;
    justify-self:stretch;
  }
  .scene-viewport {
    height:calc(100svh - 118px);
    margin-top:118px;
  }
}

@media (min-width: 821px) and (max-width: 1100px) and (orientation: portrait) {
  .scene-panel[data-panel="why"] {
    display:grid;
    grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
    grid-template-rows:auto auto auto;
    align-content:center;
    justify-content:center;
    align-items:center;
    column-gap:40px;
    row-gap:18px;
    padding:74px 7vw 94px;
  }

  .scene-panel[data-panel="why"] .scene-number {
    grid-column:1 / -1;
    grid-row:1;
    position:relative;
    left:auto;
    top:auto;
    align-self:start;
    justify-self:start;
    margin:0 0 4px;
  }

  .scene-panel[data-panel="why"] .slide-visual-why {
    grid-column:1;
    grid-row:2;
    width:min(100%,460px);
    height:330px;
    min-height:0;
    margin:0;
    align-self:center;
    justify-self:center;
    overflow:visible;
  }

  .scene-panel[data-panel="why"] .giant-word {
    font-size:clamp(72px,8.6vw,104px);
    transform:scaleX(.78);
  }
  .scene-panel[data-panel="why"] .giant-word-top {
    top:18%;
    left:0;
  }
  .scene-panel[data-panel="why"] .giant-word-bottom {
    top:43%;
    left:7%;
  }
  .scene-panel[data-panel="why"] .why-core {
    width:190px;
    height:190px;
    right:2%;
    top:31%;
    transform:none;
  }
  .scene-panel[data-panel="why"] .why-core strong {
    font-size:18px;
  }
  .scene-panel[data-panel="why"] .core-kicker {
    margin-bottom:11px;
    font-size:6.5px;
  }
  .scene-panel[data-panel="why"] .core-line {
    margin-top:13px;
  }

  .scene-panel[data-panel="why"] .why-copy {
    grid-column:2;
    grid-row:2;
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;
    width:min(100%,520px);
    max-width:520px;
    align-self:center;
    justify-self:center;
    padding:0;
  }
  .scene-panel[data-panel="why"] .why-copy h2 {
    font-size:clamp(36px,4.6vw,50px);
    line-height:1;
    margin-bottom:14px;
  }
  .scene-panel[data-panel="why"] .why-copy p {
    font-size:12.5px;
    line-height:1.58;
    margin-bottom:12px;
  }

  .scene-panel[data-panel="why"] .stat-rail {
    grid-column:1 / -1;
    grid-row:3;
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    width:min(700px,100%);
    margin:0;
    justify-self:center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .pointer-light { display:none; }
}

/* V25: Features uses the real document scroll on phones and tablets.
   The previous V19-V23 blocks were conflicting and created nested/locked scroll containers.
   This block intentionally leaves the feature cards in normal document flow. */
@media (max-width: 820px), (orientation: landscape) and (max-height: 500px) and (max-width: 1100px) {
  html.features-document-mode,
  body.features-document-mode {
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.features-document-mode .site-shell {
    height: auto !important;
    min-height: 100svh;
    overflow: visible !important;
  }

  body.features-document-mode .topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }

  body.features-document-mode .scene-viewport {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: calc(100svh - 118px);
    margin-top: 118px !important;
    overflow: visible !important;
    touch-action: auto !important;
  }

  body.features-document-mode .scene-panel {
    display: none !important;
  }

  body.features-document-mode .scene-panel[data-panel="features"] {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: calc(100svh - 118px) !important;
    max-height: none !important;
    padding: 28px 5vw 260px !important;
    margin: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  body.features-document-mode .scene-panel[data-panel="features"] .scene-number {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin: 0 0 30px !important;
  }

  body.features-document-mode .scene-panel[data-panel="features"] .features-head {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 22px !important;
  }

  body.features-document-mode .scene-panel[data-panel="features"] .features-head h2 {
    font-size: clamp(34px, 9.4vw, 48px) !important;
    line-height: .94 !important;
    letter-spacing: -.065em !important;
  }

  body.features-document-mode .scene-panel[data-panel="features"] .feature-space {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 14px !important;
    overflow: visible !important;
    align-items: start !important;
    perspective: none !important;
    transform-style: flat !important;
  }

  body.features-document-mode .scene-panel[data-panel="features"] .feature-object,
  body.features-document-mode .scene-panel[data-panel="features"] .feature-balance {
    position: relative !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 14px !important;
    margin: 0 !important;
    overflow: visible !important;
    align-self: start !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  body.features-document-mode .scene-panel[data-panel="features"] .feature-icon-shell {
    width: 52px !important;
    height: 52px !important;
  }

  body.features-document-mode .scene-panel[data-panel="features"] .feature-icon-shell img {
    width: 40px !important;
    height: 40px !important;
  }

  body.features-document-mode .scene-panel[data-panel="features"] .feature-object-copy {
    margin-top: 10px !important;
  }

  body.features-document-mode .scene-panel[data-panel="features"] .feature-object-copy h3 {
    font-size: 20px !important;
    line-height: 1.05 !important;
    margin: 6px 0 8px !important;
  }

  body.features-document-mode .scene-panel[data-panel="features"] .feature-object-copy p {
    margin: 0 !important;
    padding: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    font-size: 10.5px !important;
    line-height: 1.45 !important;
  }

  body.features-document-mode .scene-controls,
  body.features-document-mode .scene-progress {
    position: fixed !important;
    z-index: 50 !important;
  }
}

@media (max-width: 520px) and (max-height: 900px) {
  body.features-document-mode .scene-panel[data-panel="features"] {
    padding-left: 4.4vw !important;
    padding-right: 4.4vw !important;
    padding-bottom: 280px !important;
  }

  body.features-document-mode .scene-panel[data-panel="features"] .feature-space {
    gap: 12px !important;
  }
}

@media (min-width: 821px) and (max-width: 1100px) and (orientation: portrait) {
  html.features-document-mode,
  body.features-document-mode {
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.features-document-mode .site-shell {
    height: auto !important;
    min-height: 100svh;
    overflow: visible !important;
  }

  body.features-document-mode .topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }

  body.features-document-mode .scene-viewport {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    min-height: calc(100svh - 108px);
    margin-top: 108px !important;
    overflow: visible !important;
  }

  body.features-document-mode .scene-panel {
    display: none !important;
  }

  body.features-document-mode .scene-panel[data-panel="features"] {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: calc(100svh - 108px) !important;
    padding: 32px 6vw 220px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    filter: none !important;
    overflow: visible !important;
  }

  body.features-document-mode .scene-panel[data-panel="features"] .scene-number,
  body.features-document-mode .scene-panel[data-panel="features"] .features-head,
  body.features-document-mode .scene-panel[data-panel="features"] .feature-space {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
  }

  body.features-document-mode .scene-panel[data-panel="features"] .scene-number {
    margin-bottom: 28px !important;
  }

  body.features-document-mode .scene-panel[data-panel="features"] .feature-space {
    height: auto !important;
    margin-top: 20px !important;
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 16px !important;
    overflow: visible !important;
    perspective: none !important;
  }

  body.features-document-mode .scene-panel[data-panel="features"] .feature-object,
  body.features-document-mode .scene-panel[data-panel="features"] .feature-balance {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  body.features-document-mode .scene-controls,
  body.features-document-mode .scene-progress {
    position: fixed !important;
    z-index: 50 !important;
  }
}

/* V26: final mobile Features document-flow correction.
   Keep the header in normal flow with sticky positioning so content never
   scrolls underneath it. Keep the bottom controls fixed and reserve only
   a compact bottom safety area. */
@media (max-width: 820px), (orientation: landscape) and (max-height: 500px) and (max-width: 1100px) {
  html.features-document-mode,
  body.features-document-mode {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100%;
  }

  body.features-document-mode .site-shell {
    height: auto !important;
    min-height: 100svh !important;
    overflow: visible !important;
  }

  body.features-document-mode .topbar {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    z-index: 200 !important;
    height: 104px !important;
    min-height: 104px !important;
  }

  body.features-document-mode .scene-viewport {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    overflow: visible !important;
    touch-action: pan-y !important;
  }

  body.features-document-mode .scene-panel {
    display: none !important;
  }

  body.features-document-mode .scene-panel[data-panel="features"] {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: calc(100svh - 104px) !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 28px 4.4vw 108px !important;
    overflow: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  body.features-document-mode .scene-panel[data-panel="features"] .scene-number,
  body.features-document-mode .scene-panel[data-panel="features"] .features-head,
  body.features-document-mode .scene-panel[data-panel="features"] .feature-space {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
  }

  body.features-document-mode .scene-panel[data-panel="features"] .scene-number {
    margin: 0 0 28px !important;
  }

  body.features-document-mode .scene-panel[data-panel="features"] .features-head {
    margin: 0 0 22px !important;
  }

  body.features-document-mode .scene-panel[data-panel="features"] .feature-space {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 12px !important;
    overflow: visible !important;
    align-items: start !important;
    perspective: none !important;
    transform-style: flat !important;
  }

  body.features-document-mode .scene-panel[data-panel="features"] .feature-object,
  body.features-document-mode .scene-panel[data-panel="features"] .feature-balance {
    position: relative !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 14px !important;
    overflow: visible !important;
    align-self: start !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  body.features-document-mode .scene-panel[data-panel="features"] .feature-icon-shell {
    width: 52px !important;
    height: 52px !important;
  }

  body.features-document-mode .scene-panel[data-panel="features"] .feature-icon-shell img {
    width: 40px !important;
    height: 40px !important;
  }

  body.features-document-mode .scene-panel[data-panel="features"] .feature-object-copy {
    margin-top: 10px !important;
  }

  body.features-document-mode .scene-panel[data-panel="features"] .feature-object-copy h3 {
    font-size: 20px !important;
    line-height: 1.05 !important;
    margin: 6px 0 8px !important;
  }

  body.features-document-mode .scene-panel[data-panel="features"] .feature-object-copy p {
    margin: 0 !important;
    padding: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    font-size: 10.5px !important;
    line-height: 1.45 !important;
  }

  body.features-document-mode .scene-controls,
  body.features-document-mode .scene-progress {
    position: fixed !important;
    z-index: 250 !important;
  }
}

@media (max-width: 520px) {
  body.features-document-mode .topbar {
    height: 104px !important;
    min-height: 104px !important;
  }

  body.features-document-mode .scene-panel[data-panel="features"] {
    min-height: calc(100svh - 104px) !important;
    padding-bottom: 96px !important;
  }
}

@media (min-width: 521px) and (max-width: 820px), (orientation: landscape) and (max-height: 500px) and (max-width: 1100px) {
  body.features-document-mode .topbar {
    height: 108px !important;
    min-height: 108px !important;
  }

  body.features-document-mode .scene-panel[data-panel="features"] {
    min-height: calc(100svh - 108px) !important;
    padding-bottom: 108px !important;
  }
}


/* Phones in landscape use the phone layout (see the media queries above), but
   its decorative visuals are sized by screen width and would cover the text on
   a short screen. Here they follow the screen height, and the story copy flows
   below its visual instead of being pinned over it. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1100px) {
  .scene-panel { padding:44px 6vw 70px; }
  .hero-stage { height:72vh; min-height:240px; max-height:none; }
  .slide-visual-why { height:56vh; flex-basis:56vh; }
  .giant-word { font-size:clamp(56px,20vh,120px); }
  .why-core { width:40vh; height:40vh; }
  .why-core strong { font-size:14px; }
  .story-stage { position:relative; inset:auto; width:100%; height:60vh; }
  .story-year { font-size:24vh; }
  .story-panel { width:150px; height:150px; padding:10px; }
  .story-panel strong { font-size:17px; }
  .story-mark { font-size:40px; }
  .story-copy { position:relative; left:auto; right:auto; top:auto; bottom:auto; width:100%; padding:14px 0 0; }
}