/* Morrow One — High tier example. System fonts only, all motion respects prefers-reduced-motion. */
:root {
  --bg: #0d0d0f;
  --bg-2: #141417;
  --text: #f1eee8;
  --muted: #b3aea6;          /* on --bg: 8.6:1 */
  --dim: #8d8982;            /* on --bg: 5.6:1 */
  --copper: #d08a52;
  --copper-hi: #e3a06a;
  --line: rgba(241, 238, 232, .12);
  --finish: #c4c8cd;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .1, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
html.reduced { scroll-behavior: auto; }
body {
  margin: 0; color: var(--text); font-family: var(--sans); font-size: 17px; line-height: 1.6; overflow-x: hidden;
  background:
    radial-gradient(1200px 800px at 70% 40%, rgba(208, 138, 82, .13), transparent 60%),
    radial-gradient(900px 700px at 20% 90%, rgba(80, 90, 120, .14), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2 { font-family: var(--display); font-weight: 650; letter-spacing: -0.035em; line-height: 1; margin: 0 0 .35em; }
h1 { font-size: clamp(3.6rem, 10vw, 9.5rem); letter-spacing: -0.05em; }
h2 { font-size: clamp(2.3rem, 4.8vw, 4.4rem); }
p { margin: 0 0 1em; }
a { color: var(--copper-hi); }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--copper-hi); outline-offset: 4px; border-radius: 6px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--copper); color: #160d06; padding: 10px 14px; border-radius: 8px; font-weight: 700; }
.skip-link:focus { top: 12px; }
.wrap { width: min(1240px, 100% - 48px); margin-inline: auto; }

/* Grain overlay (inline SVG, no request) */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

/* Stage: a fixed layer under the story (desktop: full screen) */
.stage { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 0; }
#stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; outline: none; }
.grabbing #stage { cursor: grabbing; }
.poster { display: none; }
.no-webgl #stage { display: none; }
.no-webgl .poster { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage-touch, .buybar, .sw-dot { display: none; }
.sw-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header */
.progress { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 70; }
.progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--copper), #f3c79d); transform-origin: 0 50%; transform: scaleX(0); }
.reduced .progress { display: none; }
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; gap: 28px; padding: 18px clamp(20px, 3vw, 40px); background: linear-gradient(180deg, rgba(13,13,15,.85), rgba(13,13,15,0)); }
.logo { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--text); text-decoration: none; font-family: var(--display); font-weight: 650; letter-spacing: .3em; text-transform: uppercase; font-size: .95rem; }
.logo svg { width: 28px; height: 28px; }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(13,13,15,.55); box-shadow: inset 0 0 0 1px rgba(241,238,232,.08); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
/* the links sit over a bright, moving steel render: a frosted pill keeps them readable */
.nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: none; font-size: .9rem; font-weight: 500; padding: 8px 12px; border-radius: 999px; transition: color .2s; }
.nav a:hover { color: var(--text); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 52px; padding: .85em 1.6em; border-radius: 999px; font-weight: 600; font-size: 1rem; text-decoration: none; border: 1px solid transparent; transition: background-color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); }
.btn:hover { transform: translateY(-1px); }
.btn-copper { background: var(--copper); color: #1a0f07; }
.btn-copper:hover { background: var(--copper-hi); }
.btn-ghost { color: var(--text); border-color: rgba(241,238,232,.3); background: rgba(13,13,15,.35); backdrop-filter: blur(8px); }
.btn-ghost:hover { border-color: var(--text); }
.btn-sm { min-height: 40px; padding: .5em 1.15em; font-size: .9rem; }
.reduced .btn:hover { transform: none; }

/* Story */
main { position: relative; z-index: 2; pointer-events: none; overflow-x: clip; }
main a, main button, main .panel, .specs { pointer-events: auto; }
.scene { position: relative; min-height: 140vh; display: flex; align-items: center; padding: 120px clamp(20px, 5vw, 80px); }
.hero { min-height: 100vh; min-height: 100svh; }
.panel { position: relative; max-width: 500px; text-shadow: 0 2px 28px rgba(13, 13, 15, .65); }
.panel-right { margin-left: auto; }
.eyebrow { font-family: var(--mono); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--copper-hi); margin-bottom: 1.4em; display: flex; gap: 14px; align-items: center; }
.eyebrow span { color: var(--dim); }
.eyebrow::after { content: ""; flex: 0 0 48px; height: 1px; background: currentColor; opacity: .5; }
.panel > p:not(.eyebrow):not(.counter):not(.price):not(.finish-name) { color: var(--muted); font-size: 1.08rem; }
.lead { font-size: clamp(1.15rem, 1.6vw, 1.35rem) !important; color: var(--text) !important; max-width: 26em; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0 26px; }
.meta { font-size: .88rem !important; color: var(--dim) !important; }
.scroll-cue { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); margin: 0; font-family: var(--mono); font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--dim); padding-bottom: 46px; }
.scroll-cue::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: 36px; background: linear-gradient(var(--copper), transparent); animation: cue 2.2s var(--ease) infinite; }
@keyframes cue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.reduced .scroll-cue::after { animation: none; }

.stats { display: flex; flex-wrap: wrap; gap: 28px 40px; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.stats li { display: flex; flex-direction: column; }
.stats strong { font-family: var(--display); font-size: 2rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.stats span { font-size: .85rem; color: var(--dim); }
.counter { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 6px 0 22px; font-family: var(--display); }
.counter span { font-size: clamp(4rem, 9vw, 7.5rem); font-weight: 600; letter-spacing: -0.05em; line-height: .9; color: var(--copper-hi); font-variant-numeric: tabular-nums; min-width: 2.2ch; }
.counter small { font-family: var(--mono); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.drift { position: absolute; left: 0; bottom: 8vh; margin: 0; white-space: nowrap; font-family: var(--display); font-weight: 700; font-size: clamp(4rem, 13vw, 12rem); letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1px rgba(241, 238, 232, .14); pointer-events: none; }

/* Finishes */
.swatches { display: flex; gap: 14px; margin: 26px 0 14px; }
.swatches button { width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), rgba(255,255,255,0) 45%), var(--c); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 0 0 2px var(--bg); position: relative; transition: transform .25s var(--ease); }
.swatches button[aria-checked="true"] { box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 0 0 3px var(--bg), 0 0 0 5px var(--copper-hi); }
.swatches button:hover { transform: scale(1.06); }
.finish-name { font-family: var(--mono); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.finish-name span { color: var(--text); }
.rotate { display: flex; gap: 10px; margin-top: 20px; }
.icon-btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(241,238,232,.28); background: rgba(13,13,15,.4); cursor: pointer; display: grid; place-items: center; backdrop-filter: blur(6px); }
.icon-btn:hover { border-color: var(--text); }
.icon-btn svg { width: 20px; height: 20px; }

/* Hotspots */
.hotspots { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.hotspot { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; transition: opacity .4s var(--ease); }
.hotspot.on { opacity: 1; }
.hotspot.on button { pointer-events: auto; }
.hotspot button { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(13,13,15,.55); box-shadow: inset 0 0 0 1.5px var(--copper-hi); backdrop-filter: blur(4px); pointer-events: none; }
.hotspot button::before { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--copper-hi); }
.hotspot button::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--copper-hi); opacity: .6; animation: pulse 2s var(--ease) infinite; }
@keyframes pulse { from { transform: scale(.7); opacity: .8; } to { transform: scale(1.5); opacity: 0; } }
.reduced .hotspot button::after { animation: none; }
.tip { position: absolute; left: var(--tip-dx, 24px); top: -14px; width: 230px; margin: 0; padding: 12px 14px; border-radius: 12px; background: rgba(20,20,23,.92); border: 1px solid var(--line); font-size: .85rem; line-height: 1.45; color: var(--muted); opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; pointer-events: none; }
.tip strong { color: var(--text); display: block; }
.hotspot button[aria-expanded="true"] + .tip, .hotspot.on button:hover + .tip, .hotspot.on button:focus-visible + .tip { opacity: 1; transform: none; }

/* Story dots */
.dots { position: fixed; right: clamp(14px, 2vw, 28px); top: 50%; transform: translateY(-50%); z-index: 40; }
.dots ol { display: flex; flex-direction: column; gap: 4px; }
.dots a { display: grid; place-items: center; width: 24px; height: 24px; }
.dots a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(241,238,232,.32); transition: all .3s var(--ease); }
.dots a.active::before { background: var(--copper-hi); height: 20px; border-radius: 3px; }

/* Specs (opaque, covers the stage) */
.specs { position: relative; z-index: 2; background: #f1eee8; color: #17171a; padding: clamp(80px, 10vw, 140px) 0; border-radius: 28px 28px 0 0; }
.specs .eyebrow { color: #8a4a1c; }
.specs .eyebrow span { color: #6c6862; }
.specs h2 { max-width: 13em; }
.specs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 56px; border-top: 1px solid #d6d1c8; }
.spec { padding: 26px 22px 30px 0; border-bottom: 1px solid #d6d1c8; }
.spec dt { font-family: var(--mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: #6c6862; margin-bottom: 10px; }
.spec dd { font-family: var(--display); font-size: 1.25rem; font-weight: 550; letter-spacing: -0.01em; line-height: 1.3; }
.feature-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.feature-strip li { background: #e6e1d8; border-radius: 18px; padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 6px; }
.feature-strip strong { font-family: var(--display); font-size: 1.2rem; font-weight: 600; }
.feature-strip span { color: #4f4b45; font-size: .97rem; }

.reserve { min-height: 110vh; }
.price { font-family: var(--display); font-size: clamp(2.6rem, 5vw, 3.6rem); font-weight: 600; letter-spacing: -0.04em; color: var(--copper-hi); display: flex; align-items: baseline; flex-wrap: wrap; gap: 14px; line-height: 1; margin: 10px 0 22px; }
.price small { font-family: var(--mono); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }

.site-footer { position: relative; z-index: 2; background: #08080a; border-top: 1px solid var(--line); padding: 30px 0; font-size: .88rem; color: var(--dim); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; }
.site-footer p { margin: 0; }
.site-footer strong { color: var(--text); letter-spacing: .2em; text-transform: uppercase; font-weight: 650; }
.agentx-badge { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 7px 16px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); text-decoration: none; font-weight: 600; font-size: .82rem; }
.agentx-badge svg { width: 14px; height: 14px; }
.agentx-badge:hover { border-color: rgba(241,238,232,.4); }

/* Header + dots over the light Specs section */
.site-header, .site-header .logo, .nav a { transition: background-color .4s, color .4s; }
[data-section="specs"] .site-header { background: rgba(241, 238, 232, .92); backdrop-filter: blur(10px); }
[data-section="specs"] .logo, [data-section="specs"] .nav a { color: #2b2925; }
[data-section="specs"] .nav ul { background: transparent; box-shadow: none; }
[data-section="specs"] .dots a::before { background: rgba(23, 23, 26, .3); }
[data-section="specs"] .dots a.active::before { background: #8a4a1c; }

/* Responsive */
@media (max-width: 1100px) {
  .specs-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Phones: a designed vertical story, not the desktop squeezed ----------
   The machine sits in a fixed stage across the top of the screen (above the copy in the stacking order),
   chapters scroll through the reading zone below it and slide under its faded edge, so copy never covers
   the model. A sticky Reserve bar takes the thumb zone once the hero CTA has scrolled away. */
@media (max-width: 860px) and (orientation: portrait) {
  :root { --stage-h: 52svh; }
  body { background: var(--bg); }
  body::after { display: none; } /* no full-screen grain blend over a live canvas on phones */
  .site-header { gap: 12px; padding: calc(8px + env(safe-area-inset-top)) 16px 8px; background: linear-gradient(180deg, rgba(13,13,15,.78), rgba(13,13,15,0)); }
  .site-header .btn-sm { min-height: 44px; padding: .5em 1.3em; margin-left: auto; transition: opacity .25s, visibility .25s, transform .25s var(--ease); }
  .bar-on .site-header .btn { opacity: 0; visibility: hidden; transform: translateY(-6px); }
  .nav, .dots, .scroll-cue, .drift { display: none; }
  .progress { z-index: 70; }

  .stage { height: var(--stage-h); z-index: 3; background: radial-gradient(110% 80% at 50% 48%, #24211e 0%, #141416 58%, var(--bg) 100%); -webkit-mask-image: linear-gradient(#000 calc(100% - 30px), transparent); mask-image: linear-gradient(#000 calc(100% - 30px), transparent); }
  .poster { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transition: opacity .5s ease .15s; }
  #stage { opacity: 0; transition: opacity .6s ease; }
  .stage-ready #stage { opacity: 1; }
  .stage-ready .poster { opacity: 0; }
  .no-webgl .poster { opacity: 1; }
  .hotspots { z-index: 4; }
  [data-section="specs"] .hotspot, [data-section="reserve"] .hotspot { opacity: 0; }

  main { z-index: auto; }
  /* each chapter opens with a stage-high beat (the camera moves while only the machine is on screen);
     anchor jumps land with the copy just under the stage */
  .scene { display: block; min-height: 0; padding: calc(var(--stage-h) + 8px) 20px 0; }
  .scene .panel, .scene .panel-right { margin: 0; max-width: 560px; padding: 0; background: none; border: 0; text-shadow: none; }
  .hero { min-height: 100svh; display: flex; align-items: flex-end; padding: 0 20px calc(22px + env(safe-area-inset-bottom)); }
  .hero .panel { padding-top: 12px; }
  .reserve { min-height: 0; padding-bottom: calc(44px + env(safe-area-inset-bottom)); }
  .specs { z-index: 5; padding: 76px 0 84px; border-radius: 24px 24px 0 0; margin-top: 16svh; }
  .site-footer { z-index: 5; padding-bottom: calc(30px + env(safe-area-inset-bottom)); }
  .wrap { width: calc(100% - 40px); }

  h1 { font-size: clamp(3.1rem, 15.5vw, 4.4rem); }
  h2 { font-size: clamp(2.05rem, 9.2vw, 2.7rem); }
  .lead { font-size: 1.06rem !important; }
  .panel > p:not(.eyebrow):not(.counter):not(.price):not(.finish-name) { font-size: 1rem; line-height: 1.55; }
  .eyebrow { font-size: .72rem; margin-bottom: 1.1em; }
  .actions { margin: 22px 0 16px; gap: 10px; }
  .actions .btn { flex: 1 1 100%; }
  .reserve .actions .btn { flex: 1 1 0; padding-inline: .9em; font-size: .95rem; }
  .meta { margin: 0; }
  .counter { margin: 0 0 12px; }
  .counter span { font-size: 3.7rem; }
  .stats { gap: 10px 28px; margin-top: 18px; padding-top: 16px; }
  .stats strong { font-size: 1.45rem; }
  .feature-strip { grid-template-columns: 1fr; }

  /* Finishes: thumb-sized, labelled chips in a swipeable strip */
  .swatches { gap: 10px; margin: 18px -20px 4px; padding: 4px 20px 8px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 20px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .swatches::-webkit-scrollbar { display: none; }
  .swatches button { flex: none; display: inline-flex; align-items: center; gap: 10px; width: auto; height: auto; min-height: 58px; padding: 8px 18px 8px 8px; border-radius: 999px; background: rgba(241,238,232,.06); box-shadow: inset 0 0 0 1px rgba(241,238,232,.16); color: var(--text); font-size: .95rem; font-weight: 600; scroll-snap-align: start; -webkit-tap-highlight-color: transparent; }
  .swatches button[aria-checked="true"] { background: rgba(208,138,82,.14); box-shadow: inset 0 0 0 1.5px var(--copper-hi); }
  .swatches button:hover { transform: none; }
  .sw-dot { display: block; width: 42px; height: 42px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), rgba(255,255,255,0) 45%), var(--c); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
  .sw-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .finish-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rotate { margin-top: 12px; }
  .icon-btn { width: 48px; height: 48px; }

  /* Tap-to-turn: rotation is off until the machine (or this chip) is tapped, so swipes always scroll */
  .touch[data-section="finishes"] .stage-touch { display: inline-flex; }
  .stage-touch { position: fixed; z-index: 4; left: 50%; top: calc(var(--stage-h) - 66px); transform: translateX(-50%); align-items: center; gap: 8px; min-height: 44px; padding: 0 18px 0 14px; border-radius: 999px; border: 1px solid rgba(241,238,232,.28); background: rgba(13,13,15,.66); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--text); font-size: .88rem; font-weight: 600; white-space: nowrap; cursor: pointer; }
  .stage-touch svg { width: 18px; height: 18px; flex: none; }
  .stage-touch .st-on, .stage-live .stage-touch .st-off { display: none; }
  .stage-live .stage-touch .st-on { display: inline; }
  .stage-live .stage-touch { background: var(--copper); color: #1a0f07; border-color: transparent; }

  /* Hotspots: 44 px targets, popovers open below the point and stay on screen */
  .hotspot button { left: -22px; top: -22px; width: 44px; height: 44px; background: none; box-shadow: none; backdrop-filter: none; }
  .hotspot button::before { inset: 7px; background: radial-gradient(circle, var(--copper-hi) 0 4.5px, rgba(13,13,15,.6) 5.5px); box-shadow: inset 0 0 0 1.5px var(--copper-hi); }
  .hotspot button::after { inset: 2px; }
  .tip { top: 28px; width: 220px; }

  /* Sticky Reserve bar in the thumb zone */
  .buybar { display: flex; align-items: center; gap: 12px; position: fixed; z-index: 45; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); padding: 8px 8px 8px 12px; border-radius: 22px; background: rgba(22, 22, 25, .9); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border: 1px solid rgba(241,238,232,.14); box-shadow: 0 18px 40px rgba(0,0,0,.5); transform: translateY(calc(100% + 30px)); visibility: hidden; transition: transform .38s var(--ease), visibility 0s linear .38s; }
  .bar-on .buybar { transform: none; visibility: visible; transition: transform .38s var(--ease); }
  .buybar-info { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; margin: 0; }
  .buybar-swatch { flex: none; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), rgba(255,255,255,0) 45%), var(--finish); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); transition: background-color .4s; }
  .buybar-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
  .buybar-text strong { font-family: var(--display); font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; }
  .buybar-text > span { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .buybar .btn { flex: none; min-height: 48px; padding: 0 1.5em; }
  .buybar .btn:hover { transform: none; }
}
/* Short phones (SE-class): a tighter hero so the machine keeps a generous stage */
@media (max-width: 860px) and (max-height: 760px) and (orientation: portrait) {
  .hero h1 { font-size: clamp(2.7rem, 13.5vw, 3.4rem); }
  .hero .lead { font-size: 1rem !important; }
  .hero .actions { margin: 16px 0 0; gap: 8px; }
  .hero .actions .btn { min-height: 48px; }
  .hero .meta { display: none; }
  .scene .panel h2 { font-size: 1.95rem; }
  .counter span { font-size: 3.2rem; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .specs-grid { grid-template-columns: 1fr; margin-top: 36px; }
  .spec { padding: 18px 0 20px; }
  .feature-strip { margin-top: 36px; gap: 12px; }
}
/* Touch screens in the wide composition (tablets, landscape phones): no tiny story dots; 44 px header pill */
@media (pointer: coarse) {
  .dots { display: none; }
  .site-header .btn-sm { min-height: 44px; }
}
/* Landscape phones: the side-by-side composition, scaled to a short screen */
@media (max-height: 520px) and (orientation: landscape) {
  .site-header { padding-block: 10px; }
  h1 { font-size: clamp(3rem, 9vw, 4.4rem); }
  h2 { font-size: clamp(1.9rem, 4.6vw, 2.6rem); }
  .scene { padding-block: 72px 40px; }
  .actions { margin: 18px 0 12px; }
  .counter span { font-size: 3.4rem; }
  .scroll-cue { display: none; }
}
/* Tall desktop / tablet windows keep the earlier card treatment for copy over the full-screen stage */
@media (min-width: 861px) and (max-aspect-ratio: 85/100) {
  .scene { align-items: flex-end; padding-bottom: 12vh; }
  .panel, .panel-right { margin: 0; max-width: 560px; padding: 22px 24px 24px; border-radius: 22px; background: rgba(13,13,15,.72); border: 1px solid var(--line); backdrop-filter: blur(14px) saturate(1.2); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}