/* BackReserve – landing page
   Self-hosted fonts, no third-party requests. Animations are progressive: without JavaScript
   or with "reduced motion" all content is visible and static. */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces-full.woff2') format('woff2-variations'), url('fonts/fraunces-full.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces-full-italic.woff2') format('woff2-variations'), url('fonts/fraunces-full-italic.woff2') format('woff2');
  font-weight: 100 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-var.woff2') format('woff2-variations'), url('fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/jetbrains-mono-var.woff2') format('woff2-variations'), url('fonts/jetbrains-mono-var.woff2') format('woff2');
  font-weight: 100 800; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
@property --bg { syntax: '<color>'; inherits: true; initial-value: #100C09; }
@property --bg-2 { syntax: '<color>'; inherits: true; initial-value: #19130F; }
@property --fg { syntax: '<color>'; inherits: true; initial-value: #F6EEE3; }
@property --fg-2 { syntax: '<color>'; inherits: true; initial-value: #B9AA9B; }
@property --line { syntax: '<color>'; inherits: true; initial-value: rgba(246, 238, 227, .12); }
@property --card { syntax: '<color>'; inherits: true; initial-value: rgba(255, 246, 235, .045); }
@property --accent { syntax: '<color>'; inherits: true; initial-value: #E9A35A; }
@property --angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
  --terra: #B5562B;
  --terra-2: #D06A35;
  --amber: #E9A35A;
  --honey: #F4CB8F;
  --crust: #8A4A22;
  --espresso: #1E1712;
  --night: #100C09;
  --cream: #F6F0E7;
  --paper: #FBF7F1;
  --green: #2F7A4B;

  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1320px;
  --radius-xl: clamp(24px, 3vw, 40px);
}

body[data-theme='night'] {
  --bg: #100C09; --bg-2: #19130F; --fg: #F6EEE3; --fg-2: #B9AA9B;
  --line: rgba(246, 238, 227, .12); --card: rgba(255, 246, 235, .045); --accent: #E9A35A;
}
body[data-theme='day'] {
  --bg: #F6F0E7; --bg-2: #EEE5D8; --fg: #1E1712; --fg-2: #6B5C50;
  --line: rgba(30, 23, 18, .12); --card: #FFFCF8; --accent: #B5562B;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
html.reduced, html.intro-running { scroll-behavior: auto; }
html.intro-running, html.menu-open { overflow: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  transition: --bg .9s var(--ease-in-out), --bg-2 .9s var(--ease-in-out), --fg .9s var(--ease-in-out),
    --fg-2 .9s var(--ease-in-out), --line .9s var(--ease-in-out), --card .9s var(--ease-in-out), --accent .9s var(--ease-in-out);
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2, h3, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
em { font-style: italic; }
::selection { background: var(--amber); color: #1E1712; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 6px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 16px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 10px;
  background: var(--amber); color: #1E1712; font-weight: 600; transition: top .2s;
}
.skip-link:focus { top: 16px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.center { text-align: center; }

/* ---------- Type ---------- */
.h2 {
  font-family: var(--font-display);
  font-weight: 380;
  font-size: clamp(2.5rem, 5.4vw, 5.25rem);
  line-height: 1;
  letter-spacing: -.03em;
  font-variation-settings: 'SOFT' 50, 'WONK' 0;
  text-wrap: balance;
}
.h2 em, .finale-title em, .statement-text em {
  font-style: italic;
  color: var(--accent);
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
}
.lead { font-size: clamp(1.05rem, 1.25vw, 1.22rem); line-height: 1.6; color: var(--fg-2); max-width: 56ch; text-wrap: pretty; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2);
}
.eyebrow::before { content: ''; width: 28px; height: 1px; background: currentColor; opacity: .5; }
.eyebrow-no { color: var(--accent); }
.section-head { max-width: 780px; display: grid; gap: 22px; }
.section-head.center { margin: 0 auto; justify-items: center; }
.section-head.center .lead { margin: 0 auto; }

/* ---------- Buttons ---------- */
.btn {
  --h: 50px;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: var(--h); padding: 0 24px; border-radius: 999px;
  font-weight: 550; font-size: 15.5px; letter-spacing: -.005em; white-space: nowrap;
  overflow: hidden;
  transition: background-color .3s, color .3s, border-color .3s, box-shadow .4s var(--ease-out), translate .45s var(--ease-out);
}
.btn-sm { --h: 42px; padding: 0 18px; font-size: 14.5px; }
.btn-lg { --h: 58px; padding: 0 30px; font-size: 16px; }
.btn-lg:has(.btn-icon) { padding-right: 10px; }
.btn-lg:has(.btn-icon-play) { padding: 0 28px 0 10px; }
.btn-block { width: 100%; }
.btn-icon {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255, 255, 255, .16); transition: transform .5s var(--ease-out), background-color .3s;
}
.btn-icon svg { width: 18px; height: 18px; }
.btn:hover .btn-icon:not(.btn-icon-play) { transform: translateX(3px); }
.btn-icon-play svg { width: 14px; height: 14px; margin-left: 2px; }
.btn-primary {
  color: #FFF8F0;
  background: linear-gradient(180deg, #CC6A35, var(--terra));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 10px 30px -10px rgba(213, 105, 50, .7);
}
.btn-primary::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 236, 210, .45) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .9s var(--ease-out);
}
.btn-primary:hover::after { transform: translateX(120%); }
.btn-primary:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 16px 40px -12px rgba(213, 105, 50, .85); }
.btn-ghost { color: var(--fg); border: 1px solid var(--line); background: color-mix(in srgb, var(--fg) 3%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn-ghost:hover { background: color-mix(in srgb, var(--fg) 9%, transparent); border-color: color-mix(in srgb, var(--fg) 25%, transparent); }
.btn-ghost .btn-icon { background: color-mix(in srgb, var(--fg) 10%, transparent); }
.btn-dark { color: var(--cream); background: var(--espresso); }
.btn-dark:hover { background: #000; }
.btn-light { color: var(--espresso); background: #FDF5EA; box-shadow: 0 14px 40px -14px rgba(0, 0, 0, .5); }
.btn-light .btn-icon { background: var(--espresso); color: #FDF5EA; }
.btn-light:hover { background: #fff; }
.btn-ghost-light { color: #FDF5EA; border: 1px solid rgba(253, 245, 234, .4); background: rgba(253, 245, 234, .06); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn-ghost-light:hover { background: rgba(253, 245, 234, .14); }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--accent); }
.text-link svg { width: 18px; height: 18px; transition: transform .4s var(--ease-out); }
.text-link:hover svg { transform: translateX(4px); }

/* ---------- Grain + progress ---------- */
.grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .45  0 0 0 0 .4  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 200px;
}
.scroll-progress { position: fixed; inset: 0 0 auto; z-index: 70; height: 2px; pointer-events: none; }
.scroll-progress span {
  display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--sp, 0));
  background: linear-gradient(90deg, var(--honey), var(--amber), var(--terra));
}

/* ---------- Intro ---------- */
.intro { display: none; }
.js:not(.reduced):not(.no-intro) .intro {
  position: fixed; inset: 0; z-index: 150; display: grid; place-items: center;
  background: #0B0806; color: var(--cream);
  clip-path: inset(0 0 0 0);
  transition: clip-path 1s var(--ease-in-out);
  animation: intro-failsafe .01s 4.5s forwards;
}
.intro.is-out { clip-path: inset(0 0 100% 0); }
.intro-center { text-align: center; }
.intro-clock {
  font-family: var(--font-display); font-weight: 300; font-size: clamp(4.5rem, 15vw, 11rem);
  line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums lining-nums;
  font-variation-settings: 'SOFT' 100;
  background: linear-gradient(180deg, #FDF2E2, #E9A35A); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.intro-label { margin-top: 14px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; color: rgba(246, 238, 227, .55); }
.intro-bar { position: absolute; left: 50%; bottom: 12vh; width: 140px; height: 1px; translate: -50% 0; background: rgba(246, 238, 227, .14); overflow: hidden; }
.intro-bar span { display: block; height: 100%; background: var(--amber); transform-origin: 0 50%; animation: intro-bar 1.1s var(--ease-in-out) forwards; }
@keyframes intro-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes intro-failsafe { to { visibility: hidden; opacity: 0; pointer-events: none; } }

/* ---------- Navigation ---------- */
.nav { position: fixed; top: 14px; left: var(--gutter); right: var(--gutter); z-index: 60; transition: transform .6s var(--ease-out); }
.nav.is-hidden { transform: translateY(calc(-100% - 24px)); }
.nav-pill {
  max-width: 1240px; margin: 0 auto; height: 62px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 8px 0 16px; border-radius: 999px;
  border: 1px solid transparent;
  transition: background-color .5s, border-color .5s, box-shadow .5s, backdrop-filter .5s;
}
.nav.is-scrolled .nav-pill, html.menu-open .nav-pill {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  border-color: var(--line);
  box-shadow: 0 10px 40px -20px rgba(0, 0, 0, .35);
  backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 1.22rem; letter-spacing: -.02em; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--terra); color: #FBEFE2; --mark-cut: var(--terra); box-shadow: 0 6px 18px -6px rgba(213, 105, 50, .7); }
.brand-mark svg { width: 26px; height: 26px; }
.nav-links { display: flex; gap: 2px; }
.nav-links a { position: relative; padding: 8px 14px; border-radius: 999px; font-size: 14.5px; font-weight: 500; color: var(--fg-2); transition: color .25s, background-color .25s; }
.nav-links a:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 7%, transparent); }
.nav-links a.is-active { color: var(--fg); }
.nav-links a.is-active::after { content: ''; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; translate: -50% 0; background: var(--accent); }
.nav-actions { display: flex; align-items: center; gap: 6px; }
.nav-login { padding: 8px 14px; font-size: 14.5px; font-weight: 500; color: var(--fg-2); transition: color .25s; }
.nav-login:hover { color: var(--fg); }
.menu-toggle { display: none; width: 44px; height: 44px; border-radius: 50%; place-items: center; border: 1px solid var(--line); }
.menu-icon { position: relative; width: 18px; height: 10px; }
.menu-icon i { position: absolute; left: 0; width: 100%; height: 1.6px; border-radius: 2px; background: currentColor; transition: transform .45s var(--ease-out), top .45s var(--ease-out); }
.menu-icon i:first-child { top: 0; }
.menu-icon i:last-child { top: 8px; }
.menu-toggle[aria-expanded='true'] .menu-icon i:first-child { top: 4px; transform: rotate(45deg); }
.menu-toggle[aria-expanded='true'] .menu-icon i:last-child { top: 4px; transform: rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; justify-content: space-between;
  padding: 120px var(--gutter) max(32px, env(safe-area-inset-bottom));
  background: #0F0B08; color: var(--cream);
  clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--ease-in-out);
}
.menu.is-open { clip-path: inset(0 0 0 0); }
.menu[hidden] { display: none; }
.menu nav { display: grid; }
.menu nav a {
  display: flex; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(246, 238, 227, .1);
  font-family: var(--font-display); font-size: clamp(2rem, 9vw, 3.2rem); font-weight: 380; letter-spacing: -.02em; line-height: 1.15;
  opacity: 0; transform: translateY(30px); transition: opacity .6s var(--ease-out), transform .8s var(--ease-out);
}
.menu nav a span { font-family: var(--font-mono); font-size: 12px; color: var(--amber); letter-spacing: .1em; }
.menu.is-open nav a { opacity: 1; transform: none; }
.menu.is-open nav a:nth-child(2) { transition-delay: .05s; }
.menu.is-open nav a:nth-child(3) { transition-delay: .1s; }
.menu.is-open nav a:nth-child(4) { transition-delay: .15s; }
.menu.is-open nav a:nth-child(5) { transition-delay: .2s; }
.menu-foot { display: grid; gap: 10px; }
.menu-foot .btn-ghost { --fg: #F6EEE3; --line: rgba(246, 238, 227, .2); }

/* ---------- Reveal system ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out); transition-delay: calc(var(--rd, 0) * 1ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-split] .w { display: inline-block; white-space: nowrap; }
.js [data-reveal-words] .w { overflow: clip; overflow-clip-margin: .2em; vertical-align: top; padding: 0 .04em .12em; margin: 0 -.04em -.12em; }
.js [data-reveal-words] .wi { display: inline-block; transform: translateY(110%); transition: transform 1.2s var(--ease-out); transition-delay: calc(var(--wi) * 70ms); }
.js [data-reveal-words].is-in .wi { transform: none; }
.js [data-split='chars'] .ch { display: inline-block; }
.js [data-reveal-chars] .ln, .js .footer-word { overflow: clip; overflow-clip-margin: .15em; }
.js [data-reveal-chars] .ch { transform: translateY(105%); transition: transform 1.2s var(--ease-out); transition-delay: calc(var(--ci) * 32ms); }
.js [data-reveal-chars].is-in .ch { transform: none; }

/* ---------- HERO ---------- */
.hero {
  position: relative; z-index: 0; isolation: isolate;
  min-height: 100svh;
  background: #100C09; color: #F6EEE3;
  overflow: hidden;
  --hp: 0; --mx: 0; --my: 0;
}
.hero.is-covered { visibility: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(60vmax 50vmax at 82% 92%, rgba(232, 128, 62, .42), rgba(181, 86, 43, .14) 45%, transparent 70%),
    radial-gradient(50vmax 40vmax at 8% -6%, rgba(98, 74, 132, .22), transparent 70%),
    radial-gradient(40vmax 30vmax at 60% 40%, rgba(233, 163, 90, .06), transparent 70%);
  animation: glow-breathe 9s ease-in-out infinite alternate;
}
@keyframes glow-breathe { to { opacity: .78; transform: scale(1.06) translateY(-1.5%); } }
.hero-light {
  position: absolute; inset: 0;
  background: radial-gradient(520px circle at var(--lx, 70%) var(--ly, 50%), rgba(255, 200, 140, .085), transparent 62%);
}
.hero-dust { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-lines {
  position: absolute; inset: 0;
  background-image: linear-gradient(to right, rgba(246, 238, 227, .045) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%);
}
.hero-inner {
  position: relative;
  max-width: 1440px; margin: 0 auto; min-height: 100svh;
  padding: 130px var(--gutter) 110px;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(24px, 4vw, 64px);
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; border-radius: 999px;
  border: 1px solid rgba(246, 238, 227, .14); background: rgba(246, 238, 227, .04);
  font-size: 13.5px; font-weight: 500; color: rgba(246, 238, 227, .82);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.live-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #6FD49A; }
.live-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid #6FD49A; animation: ping 2.2s var(--ease-out) infinite; }
@keyframes ping { from { transform: scale(.5); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }

.hero-title {
  margin: .32em 0 .3em;
  font-family: var(--font-display); font-weight: 380;
  font-size: clamp(3.4rem, min(7.6vw, 12.6svh), 8.8rem);
  line-height: .93; letter-spacing: -.04em;
  font-variation-settings: 'SOFT' 60, 'WONK' 0;
}
.hero-title .ln { display: block; padding: 0 .08em .1em; margin: 0 -.08em -.1em; }
.js .hero-title .ln { overflow: clip; overflow-clip-margin: .25em; }
.hero-title em {
  position: relative; font-style: italic; font-weight: 400;
  font-variation-settings: 'SOFT' 100, 'WONK' 0;
  color: var(--amber);
  padding-right: .06em;
  letter-spacing: -.012em;
}
.hero-title em .ch { color: color-mix(in oklab, #F7CF94, #D3602A calc(var(--ei, 0) * 100%)); }
.swash { position: absolute; left: 0; bottom: -.06em; width: 100%; height: .2em; overflow: visible; pointer-events: none; }
.swash path { fill: none; stroke: var(--terra-2); stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 320; stroke-dashoffset: 0; }
.js:not(.reduced) .swash path { stroke-dashoffset: 320; }
.js.is-ready:not(.reduced) .swash path { animation: draw 1.2s var(--ease-in-out) 1.25s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.js:not(.reduced) .hero-title .ch { transform: translateY(110%) rotate(5deg); }
.js.is-ready:not(.reduced) .hero-title .ch { animation: char-in 1.15s var(--ease-out) both; animation-delay: calc(var(--ci) * 30ms + 120ms); }
@keyframes char-in { from { transform: translateY(110%) rotate(5deg); } to { transform: none; } }

.hero-lead { max-width: 34rem; font-size: clamp(1.04rem, 1.2vw, 1.2rem); line-height: 1.6; color: rgba(246, 238, 227, .72); text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero .btn-ghost { --fg: #F6EEE3; --line: rgba(246, 238, 227, .18); }
.hero-proof { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 28px; font-size: 14px; color: rgba(246, 238, 227, .66); }
.hero-proof li { display: inline-flex; align-items: center; gap: 8px; }
.hero-proof svg { width: 16px; height: 16px; color: var(--amber); }

.js:not(.reduced) [data-hero-in] { opacity: 0; transform: translateY(24px); }
.js.is-ready:not(.reduced) [data-hero-in] { animation: rise-in 1.1s var(--ease-out) both; animation-delay: calc(var(--hi) * 75ms + 250ms); }
@keyframes rise-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

.hero-foot {
  position: absolute; left: 0; right: 0; bottom: 26px; z-index: 2;
  max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(246, 238, 227, .5);
}
.scroll-cue { display: inline-flex; align-items: center; gap: 14px; transition: color .3s; }
.scroll-cue:hover { color: #F6EEE3; }
.scroll-cue-line { position: relative; width: 1px; height: 38px; background: rgba(246, 238, 227, .2); overflow: hidden; }
.scroll-cue-line::after { content: ''; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: var(--amber); animation: cue 2.2s var(--ease-in-out) infinite; }
@keyframes cue { to { top: 100%; } }
.hero-foot-note { display: flex; gap: 18px; }
.hero-foot-note span + span::before { content: '·'; margin-right: 18px; color: var(--amber); }

/* Hero stage */
.hero-stage {
  position: relative; height: min(80svh, 700px); min-height: 520px;
  display: grid; place-items: center;
  --pw: clamp(220px, min(23vw, 36svh), 310px);
}
.stage-halo {
  position: absolute; width: calc(var(--pw) * 2.2); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(233, 140, 70, .32), rgba(233, 140, 70, .08) 60%, transparent);
  filter: blur(10px);
}
.js:not(.reduced) .hero-stage > * { opacity: 0; }
.js.is-ready:not(.reduced) .hero-stage > .stage-halo { animation: fade-in 2s ease .4s both; }
.js.is-ready:not(.reduced) .phone-hero { animation: phone-in 1.6s var(--ease-out) .45s both; }
.js.is-ready:not(.reduced) .chip { animation: chip-in 1s var(--ease-spring) both; }
.js.is-ready:not(.reduced) .chip-a { animation-delay: 1.3s; }
.js.is-ready:not(.reduced) .chip-b { animation-delay: 1.5s; }
.js.is-ready:not(.reduced) .chip-c { animation-delay: 1.7s; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes phone-in { from { opacity: 0; transform: translateY(80px) rotate(4deg) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes chip-in { from { opacity: 0; transform: translateY(18px) scale(.85); } to { opacity: 1; transform: none; } }

/* Phone component (all inner sizes in em; 1em = phone width / 30) */
.phone { position: relative; z-index: 2; width: var(--pw); aspect-ratio: 300 / 626; font-size: calc(var(--pw) / 30); }
.phone-frame {
  position: absolute; inset: 0; border-radius: 4.9em; padding: .62em;
  background: linear-gradient(145deg, #4A3E36 0%, #15100D 22%, #0D0A08 60%, #33291F 85%, #5A4A3E 100%);
  box-shadow: inset 0 0 0 .1em rgba(255, 255, 255, .1), inset 0 0 .3em rgba(0, 0, 0, .8),
    0 4em 7em -2em rgba(0, 0, 0, .7), 0 2em 3em -1.5em rgba(0, 0, 0, .5);
  transform-style: preserve-3d;
}
.phone-hero .phone-frame { transform: perspective(1400px) rotateY(calc(var(--mx) * -9deg)) rotateX(calc(var(--my) * 7deg)); transition: transform .2s linear; }
.phone-screen { position: relative; height: 100%; border-radius: 4.3em; overflow: hidden; background: #FAF6F0; color: #2B211C; font-family: var(--font-sans); line-height: 1.35; }
.phone-screen::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(125deg, rgba(255, 255, 255, .22), transparent 28%, transparent 70%, rgba(255, 255, 255, .06)); }
.status { position: relative; z-index: 3; height: 4.6em; display: flex; align-items: center; justify-content: space-between; padding: .4em 2.6em 0; font-weight: 600; }
.status > span:first-child { font-size: 1.3em; }
.island { position: absolute; left: 50%; top: 1em; width: 9.4em; height: 2.7em; border-radius: 99em; background: #0A0806; translate: -50% 0; }
.status-r { display: flex; gap: .25em; align-items: flex-end; height: 1.1em; }
.status-r i { width: .38em; border-radius: .1em; background: #2B211C; }
.status-r i:nth-child(1) { height: .5em; }
.status-r i:nth-child(2) { height: .8em; }
.status-r i:nth-child(3) { height: 1.1em; }
.app { position: absolute; inset: 4.6em 0 0; padding: .4em 1.4em 1.4em; }

/* Shop screen */
.shop-head { display: flex; align-items: center; gap: 1em; margin-bottom: 1.1em; }
.shop-logo { display: grid; place-items: center; flex: none; width: 2.2em; height: 2.2em; border-radius: .55em; background: var(--terra); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.8em; }
.shop-head b { display: block; font-family: var(--font-display); font-size: 1.55em; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.shop-head small { display: block; margin-top: .2em; font-size: 1.02em; color: #85766A; }
.shop-days { display: flex; gap: .5em; }
.day { flex: 1; display: grid; justify-items: center; padding: .55em 0; border-radius: .9em; border: 1px solid #E8DCCD; background: #fff; }
.day small { font-size: .85em; text-transform: uppercase; letter-spacing: .04em; color: #85766A; }
.day b { font-size: 1.25em; }
.day.is-on { background: #2B211C; border-color: #2B211C; color: #fff; }
.day.is-on small { color: rgba(255, 255, 255, .7); }
.day.is-off { opacity: .45; border-style: dashed; background: transparent; }
.shop-slot { display: flex; align-items: center; gap: .5em; margin: 1em 0 .2em; padding: .75em .9em; border-radius: .9em; background: #F2E6D7; font-size: 1.08em; }
.shop-slot svg { width: 1.25em; height: 1.25em; color: var(--terra); }
.slot-free { margin-left: auto; padding: .15em .6em; border-radius: 99em; background: #E1F0E5; color: var(--green); font-size: .85em; font-weight: 600; }
.shop-h { margin: .9em 0 .55em; font-family: var(--font-display); font-weight: 700; font-size: 1.35em; letter-spacing: -.01em; }
.item {
  display: grid; grid-template-columns: 4.3em 1fr auto; gap: .9em; align-items: center;
  margin-bottom: .6em; padding: .65em; border-radius: 1.2em; border: 1px solid #EEE2D4; background: #fff;
  transition: transform .4s var(--ease-out), box-shadow .4s;
}
.item-img { display: grid; place-items: center; width: 4.3em; height: 4.3em; border-radius: .9em; }
.item-img svg { width: 3.2em; height: 3.2em; }
.tint-a { background: #F3E3D2; } .tint-b { background: #F6EAD6; } .tint-c { background: #F8E1E4; } .tint-d { background: #EFE6E0; }
.item-body b { display: block; font-size: 1.18em; font-weight: 600; letter-spacing: -.01em; }
.stock { display: inline-flex; align-items: center; gap: .4em; margin-top: .15em; font-size: .98em; color: var(--green); font-weight: 500; }
.stock i { width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
.item.is-low .stock { color: #B7791F; }
.item.is-out { opacity: .5; }
.item.is-out .stock { color: #A3483A; }
.item-side { display: grid; justify-items: end; gap: .35em; }
.price { font-size: 1.12em; font-weight: 650; }
.stepper { display: flex; align-items: center; gap: .5em; }
.qty { min-width: 1em; text-align: center; font-weight: 700; font-size: 1.15em; color: #C8B9AB; transition: color .3s; }
.qty.has { color: #2B211C; }
.plus { display: grid; place-items: center; width: 2.5em; height: 2.5em; border-radius: 50%; background: var(--terra); color: #fff; }
.plus svg { width: 1.3em; height: 1.3em; }
.item.bump { transform: scale(1.025); box-shadow: 0 .6em 1.6em -.6em rgba(181, 86, 43, .35); }
.item.bump .plus { animation: press .35s var(--ease-out); }
@keyframes press { 40% { transform: scale(.82); } }
.cart {
  position: absolute; left: 1.2em; right: 1.2em; bottom: 1.5em; z-index: 3;
  display: flex; align-items: center; gap: .9em; padding: .75em .75em .75em .9em; border-radius: 1.6em;
  background: #2B211C; color: #fff; box-shadow: 0 1.4em 2.4em -1em rgba(43, 33, 28, .6);
  transform: translateY(160%); transition: transform .7s var(--ease-spring);
}
.cart.has-items { transform: none; }
.cart.bump { animation: bump .4s var(--ease-out); }
@keyframes bump { 40% { scale: 1.04; } }
.cart-bag { display: grid; place-items: center; width: 2.9em; height: 2.9em; border-radius: .8em; background: rgba(255, 255, 255, .12); font-weight: 700; font-size: 1.1em; }
.cart-info small { display: block; font-size: .92em; opacity: .65; }
.cart-info b { font-size: 1.3em; font-variant-numeric: tabular-nums; }
.cart-btn { margin-left: auto; padding: .85em 1.25em; border-radius: 1.1em; background: var(--terra); font-weight: 650; font-size: 1.1em; transition: transform .2s, background-color .3s; }
.cart-btn.press { transform: scale(.92); background: #9E4A24; }
.toast {
  position: absolute; left: 50%; top: .6em; z-index: 4;
  display: flex; align-items: center; gap: .6em; padding: .75em 1.2em; border-radius: 99em; white-space: nowrap;
  background: var(--green); color: #fff; font-size: 1.1em; box-shadow: 0 1em 2em -1em rgba(47, 122, 75, .7);
  translate: -50% -180%; opacity: 0; transition: translate .7s var(--ease-spring), opacity .4s;
}
.toast svg { width: 1.3em; height: 1.3em; }
.toast.show { translate: -50% 0; opacity: 1; }
.tap {
  position: absolute; left: 0; top: 0; z-index: 5; width: 3.6em; height: 3.6em; border-radius: 50%;
  background: rgba(43, 33, 28, .16); border: .18em solid rgba(255, 255, 255, .95);
  box-shadow: 0 .4em 1em rgba(0, 0, 0, .25);
  opacity: 0; transition: transform .75s var(--ease-in-out), opacity .4s;
  pointer-events: none;
}
.tap.on { opacity: 1; }
.tap.press { animation: tap-press .35s var(--ease-out); }
@keyframes tap-press { 50% { scale: .75; background-color: rgba(181, 86, 43, .35); } }

/* Receipt */
.receipt {
  position: absolute; z-index: 1;
  right: calc(50% + var(--pw) * .46); top: 9%;
  width: clamp(170px, 15vw, 224px);
  transform: rotate(-7deg);
  filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .45));
}
.receipt::before {
  content: ''; position: absolute; left: -8px; right: -8px; top: -10px; height: 16px; z-index: 2; border-radius: 8px;
  background: linear-gradient(#3A2F28, #1A1411); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.receipt-paper {
  position: relative; padding: 22px 16px 28px;
  background: #FFFCF6; color: #2B211C;
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1.55;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 7px repeat-x;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 7px repeat-x;
  clip-path: inset(0 0 0 0);
}
.js:not(.reduced) .receipt { transform: translateX(45%) rotate(0deg); transition: transform 1.1s var(--ease-out), opacity .35s; }
.js:not(.reduced) .hero-stage.is-printed .receipt { opacity: 1; transform: rotate(-7deg); }
.js:not(.reduced) .hero-stage.is-tearing .receipt { opacity: 0; transform: translateY(30px) rotate(-10deg); transition: transform .6s var(--ease-in-out), opacity .5s; }
.js:not(.reduced) .receipt-paper { clip-path: inset(0 0 100% 0); transform: translateY(-30%); transition: clip-path 1.8s steps(18, end) .35s, transform 1.8s steps(18, end) .35s; }
.js:not(.reduced) .hero-stage.is-printed .receipt-paper { clip-path: inset(0 0 0 0); transform: none; }
.r-head { text-align: center; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 11px; }
.r-sub { text-align: center; opacity: .6; }
.r-rule { margin: 8px 0; border-top: 1px dashed rgba(43, 33, 28, .35); }
.r-row { display: flex; justify-content: space-between; gap: 8px; }
.r-total { font-weight: 700; font-size: 12px; }
.r-note { margin-top: 6px; text-align: center; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.r-code { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgba(43, 33, 28, .35); }
.r-code small { display: block; font-size: 9px; opacity: .6; text-transform: uppercase; letter-spacing: .1em; }
.r-code b { font-size: 13px; letter-spacing: .06em; }
.qr { display: block; flex: none; width: 52px; aspect-ratio: 1; color: #2B211C; }
.qr svg { width: 100%; height: 100%; shape-rendering: crispEdges; }

/* Chips */
.chip {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 16px;
  background: rgba(30, 23, 19, .62); color: #F6EEE3;
  border: 1px solid rgba(246, 238, 227, .13);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6);
  font-size: 13.5px; font-weight: 500; line-height: 1.3; white-space: nowrap;
}
.chip small { display: block; font-size: 11px; font-weight: 500; color: rgba(246, 238, 227, .58); }
.chip-a { top: 9%; left: calc(50% + var(--pw) * .36); }
.chip-b { bottom: 19%; right: calc(50% + var(--pw) * .4); flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 16px; }
.chip-c { bottom: 30%; left: calc(50% + var(--pw) * .42); }
.chip-ok { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--green); color: #fff; }
.chip-ok svg { width: 16px; height: 16px; }
.chip-clock { width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: rgba(233, 163, 90, .16); color: var(--amber); }
.chip-bar { display: block; height: 5px; border-radius: 99px; background: rgba(246, 238, 227, .12); overflow: hidden; }
.chip-bar i { display: block; height: 100%; width: 30%; border-radius: inherit; background: linear-gradient(90deg, var(--amber), var(--terra-2)); transform-origin: 0 50%; transform: scaleX(2.33); }
.js:not(.reduced) .chip-bar i { animation: bar-fill 6s var(--ease-in-out) infinite alternate; }
@keyframes bar-fill { from { transform: scaleX(1.2); } to { transform: scaleX(2.6); } }
.js.is-ready:not(.reduced) .chip { will-change: translate; }

/* Hero scroll-out (only where the hero is pinned) */
@media (min-width: 900px) and (min-height: 640px) {
  .hero { position: sticky; top: 0; height: 100svh; min-height: 0; }
  .hero-inner { height: 100svh; min-height: 0; }
  .hero-inner, .hero-foot {
    transform: translateY(calc(var(--hp) * -8vh)) scale(calc(1 - var(--hp) * .07));
    opacity: calc(1 - var(--hp) * .85);
  }
  .hero-bg { opacity: calc(1 - var(--hp) * .5); }
  .statement { border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: 0 -30px 80px -10px rgba(0, 0, 0, .55); }
}

/* ---------- STATEMENT ---------- */
.statement { position: relative; z-index: 1; background: var(--bg); padding: clamp(110px, 17vh, 190px) 0 clamp(60px, 9vh, 110px); }
.statement-text {
  margin-top: 30px; max-width: 22ch;
  font-family: var(--font-display); font-weight: 360;
  font-size: clamp(2.1rem, 5vw, 5rem); line-height: 1.07; letter-spacing: -.028em;
  font-variation-settings: 'SOFT' 50;
  text-wrap: pretty;
}
.statement-text { max-width: 1100px; }
.js:not(.reduced) .statement-text .sw { opacity: clamp(.13, calc((var(--p, 0) * (var(--n) + 7) - var(--i)) / 7), 1); }
.pill-ic {
  display: inline-grid; place-items: center; vertical-align: middle;
  width: 1.75em; height: 1em; margin: 0 .06em; border-radius: 99em; position: relative; top: -.06em;
  background: var(--card); border: 1px solid var(--line);
}
.pill-ic svg { width: .82em; height: .82em; }
.pill-ic-accent { background: rgba(233, 163, 90, .16); border-color: rgba(233, 163, 90, .35); }
.statement-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 90px);
  margin-top: clamp(60px, 10vh, 110px); padding-top: 40px; border-top: 1px solid var(--line);
}
.strike-title { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.strike-list li {
  padding: 4px 0;
  font-family: var(--font-display); font-size: clamp(1.3rem, 2vw, 1.85rem); font-weight: 380; letter-spacing: -.015em; line-height: 1.3; color: var(--fg-2);
}
.strike-list li span {
  background: linear-gradient(var(--terra-2), var(--terra-2)) 0 58% / 100% 2px no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.js:not(.reduced) .strike-list li span { background-size: 0% 2px; transition: background-size 1s var(--ease-in-out), color 1s; transition-delay: calc(var(--sd) * 220ms + 400ms); }
.js .strike-list.is-in li span { background-size: 100% 2px; color: color-mix(in srgb, var(--fg-2) 70%, transparent); }
.statement-aside { align-self: end; font-size: clamp(1.08rem, 1.35vw, 1.3rem); line-height: 1.6; color: var(--fg-2); max-width: 32rem; }

/* ---------- MARQUEE ---------- */
.marquee { position: relative; z-index: 1; background: var(--bg); padding: clamp(30px, 6vh, 70px) 0; overflow: hidden; }
.marquee-row { margin: 0 -6vw; padding: 16px 0; background: var(--terra); color: #FCEFE0; rotate: -1.8deg; overflow: hidden; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .5); }
.marquee-row-alt { position: relative; margin-top: 22px; background: var(--honey); color: var(--espresso); rotate: 1.4deg; }
.marquee-track {
  display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); width: max-content; padding-left: 20px;
  font-family: var(--font-display); font-size: clamp(1.9rem, 4.2vw, 3.8rem); font-weight: 380; letter-spacing: -.02em; line-height: 1.15;
  will-change: transform;
}
.marquee-row-alt .marquee-track { font-style: italic; font-variation-settings: 'SOFT' 100, 'WONK' 1; font-size: clamp(1.5rem, 3vw, 2.6rem); }
.marquee-track svg { width: 1.05em; height: 1.05em; flex: none; }
.marquee-track i { font-style: normal; font-size: .6em; color: var(--terra); }
.reduced .marquee-track, html:not(.js) .marquee-track { animation: none; }

/* ---------- STORY ---------- */
.story { position: relative; z-index: 1; height: 440vh; background: #0D0A10; color: #F6EEE3; --sp: 0; }
.story-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.story-sky { position: absolute; inset: 0; }
.story-sky::after { content: ''; position: absolute; inset: 0 0 auto; height: 22vh; background: linear-gradient(#100C09, rgba(16, 12, 9, 0)); }
.sky { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--ease-in-out); }
.story[data-step='0'] .sky-0, .story[data-step='1'] .sky-1, .story[data-step='2'] .sky-2, .story[data-step='3'] .sky-3 { opacity: 1; }
.sky-0 { background: radial-gradient(60vmax 40vmax at 80% 70%, rgba(233, 140, 70, .16), transparent 70%), linear-gradient(180deg, #0B0912 0%, #120E1C 55%, #1B1322 100%); }
.sky-1 { background: radial-gradient(50vmax 40vmax at 78% 50%, rgba(80, 170, 120, .16), transparent 70%), linear-gradient(180deg, #0A0B12 0%, #10131C 60%, #161821 100%); }
.sky-2 { background: radial-gradient(70vmax 50vmax at 78% 95%, rgba(236, 120, 50, .55), rgba(181, 86, 43, .2) 40%, transparent 70%), linear-gradient(180deg, #120B08 0%, #1A0F0A 100%); }
.sky-3 { background: radial-gradient(80vmax 40vmax at 60% 110%, rgba(255, 196, 120, .7), rgba(232, 128, 72, .35) 40%, transparent 70%), linear-gradient(180deg, #19131F 0%, #33202D 40%, #6A3528 75%, #B9643A 100%); }
.stars {
  position: absolute; inset: 0 0 40%;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 8%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 44% 22%, #fff, transparent), radial-gradient(1px 1px at 63% 12%, #fff, transparent),
    radial-gradient(1px 1px at 79% 26%, #fff, transparent), radial-gradient(1.5px 1.5px at 90% 9%, #fff, transparent),
    radial-gradient(1px 1px at 6% 40%, #fff, transparent), radial-gradient(1px 1px at 36% 44%, #fff, transparent),
    radial-gradient(1px 1px at 55% 35%, #fff, transparent), radial-gradient(1px 1px at 71% 48%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 95% 38%, #fff, transparent);
  opacity: .5; animation: twinkle 4s ease-in-out infinite alternate;
}
@keyframes twinkle { to { opacity: .18; } }
.story-inner {
  position: relative; height: 100%; max-width: var(--maxw); margin: 0 auto;
  padding: 110px var(--gutter) 60px;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 4vw;
}
.story .eyebrow { color: rgba(246, 238, 227, .6); }
.story .eyebrow-no { color: var(--amber); }
.story-title { margin-top: 10px; font-family: var(--font-sans); font-size: 1rem; font-weight: 500; letter-spacing: 0; color: rgba(246, 238, 227, .55); }
.story-clock {
  display: flex; align-items: flex-end; margin: 3.5vh 0 3vh;
  font-family: var(--font-display); font-weight: 300; font-size: clamp(4.6rem, min(10vw, 17svh), 10rem); line-height: 1; letter-spacing: -.03em;
  font-variation-settings: 'SOFT' 100;
  color: #FBE7CB;
}
.roll { display: inline-block; height: 1em; width: .6em; overflow: hidden; text-align: center; }
.roll > span { display: block; line-height: 1em; transform: translateY(calc(var(--d, 0) * -1em)); transition: transform 1.1s var(--ease-out); }
.roll[data-roll='1'] > span { transition-delay: .06s; }
.roll[data-roll='2'] > span { transition-delay: .12s; }
.roll[data-roll='3'] > span { transition-delay: .18s; }
.colon { width: .32em; text-align: center; color: var(--amber); animation: blink 2s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: .35; } }
.clock-unit { margin: 0 0 .9em .35em; font-family: var(--font-mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: rgba(246, 238, 227, .5); }
.story-steps { position: relative; height: 15.5em; max-width: 31rem; }
.step { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(26px); filter: blur(4px); transition: opacity .6s var(--ease-out), transform .9s var(--ease-out), filter .6s; pointer-events: none; }
.story[data-step='0'] .step:nth-child(1), .story[data-step='1'] .step:nth-child(2),
.story[data-step='2'] .step:nth-child(3), .story[data-step='3'] .step:nth-child(4) { opacity: 1; transform: none; filter: none; transition-delay: .15s; pointer-events: auto; }
html:not(.js) .story-steps { height: auto; display: grid; gap: 28px; }
html:not(.js) .step { position: static; opacity: 1; transform: none; filter: none; }
.step-kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }
.step h3 { margin: 10px 0 12px; font-family: var(--font-display); font-weight: 380; font-size: clamp(1.9rem, 3.2vw, 3rem); line-height: 1.05; letter-spacing: -.025em; }
.step p:last-child { color: rgba(246, 238, 227, .7); font-size: 1.06rem; line-height: 1.6; }
.story-rail { position: relative; width: min(340px, 100%); height: 2px; margin-top: 3vh; background: rgba(246, 238, 227, .14); border-radius: 2px; }
.rail-fill { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--sp)); background: linear-gradient(90deg, var(--honey), var(--amber)); border-radius: inherit; }
.story-rail i { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #2A2230; border: 2px solid rgba(246, 238, 227, .3); transition: background-color .4s, border-color .4s, transform .4s var(--ease-spring); }
.story-rail i:nth-of-type(1) { left: 0; } .story-rail i:nth-of-type(2) { left: 33.33%; } .story-rail i:nth-of-type(3) { left: 66.66%; } .story-rail i:nth-of-type(4) { left: 100%; }
.story[data-step='0'] .story-rail i:nth-of-type(-n+1), .story[data-step='1'] .story-rail i:nth-of-type(-n+2),
.story[data-step='2'] .story-rail i:nth-of-type(-n+3), .story[data-step='3'] .story-rail i:nth-of-type(-n+4) { background: var(--amber); border-color: var(--amber); transform: scale(1.15); }
.story-device { position: relative; display: grid; place-items: center; }
.story-device::before { content: ''; position: absolute; width: 170%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(233, 163, 90, .18), transparent); }
.phone-story { --pw: clamp(220px, min(24vw, 38svh), 320px); transform: rotate(calc((var(--sp) - .5) * -5deg)); }

/* Story screens */
.screen { opacity: 0; transform: translateY(5%) scale(.97); transition: opacity .55s ease, transform .9s var(--ease-out); }
.story[data-step='0'] .screen[data-s='0'], .story[data-step='1'] .screen[data-s='1'],
.story[data-step='2'] .screen[data-s='2'], .story[data-step='3'] .screen[data-s='3'] { opacity: 1; transform: none; transition-delay: .1s; }
html:not(.js) .screen[data-s='0'] { opacity: 1; transform: none; }
.scr-back { color: var(--terra); font-size: 1.1em; font-weight: 500; }
.scr-title { margin: .25em 0 .15em; font-family: var(--font-display); font-weight: 700; font-size: 2.1em; letter-spacing: -.02em; line-height: 1.1; }
.scr-sub { color: #85766A; font-size: 1.1em; }
.co-items { margin-top: .9em; padding: .2em 1em; border-radius: 1.2em; border: 1px solid #EEE2D4; background: #fff; }
.co-items p { display: flex; justify-content: space-between; align-items: center; padding: .65em 0; font-size: 1.12em; border-bottom: 1px solid #F1E7DB; }
.co-items p:last-child { border: 0; }
.co-items span { display: inline-flex; align-items: center; gap: .5em; }
.co-items svg { width: 1.9em; height: 1.9em; }
.co-sum { font-weight: 700; }
.co-slot { display: flex; align-items: center; gap: .5em; margin: .8em 0; padding: .7em .9em; border-radius: .9em; background: #F2E6D7; font-size: 1.08em; }
.co-slot svg, .code-card p svg, .pick-card p svg { width: 1.2em; height: 1.2em; color: var(--terra); flex: none; }
.field { margin-bottom: .55em; padding: .5em .9em .6em; border-radius: .9em; border: 1px solid #E5D9CC; background: #fff; }
.field small { display: block; font-size: .88em; color: #85766A; }
.type { display: inline-block; font-size: 1.2em; font-weight: 500; white-space: nowrap; }
.js:not(.reduced) .type { clip-path: inset(0 100% 0 0); }
.story[data-step='0'] .screen[data-s='0'] .type { animation: type 1s steps(var(--ch)) .6s forwards; }
.story[data-step='0'] .screen[data-s='0'] .type-2 { animation-delay: 1.5s; animation-duration: 1.4s; }
.story[data-step='3'] .type-code { animation: type 1.1s steps(var(--ch)) .5s forwards; }
@keyframes type { to { clip-path: inset(0 0 0 0); } }
.co-consent { display: flex; align-items: center; gap: .6em; margin: .7em 0; font-size: 1em; color: #5E5047; }
.co-consent i { display: grid; place-items: center; flex: none; width: 1.6em; height: 1.6em; border-radius: .4em; background: var(--terra); color: #fff; }
.co-consent svg { width: 1.1em; height: 1.1em; }
.co-btn { display: block; margin-top: .4em; padding: 1em; border-radius: 1.1em; text-align: center; background: var(--terra); color: #fff; font-weight: 650; font-size: 1.22em; }
.story[data-step='0'] .co-btn { animation: press .4s var(--ease-out) 3.2s; }
.co-note { margin-top: .6em; text-align: center; color: #85766A; font-size: .98em; }
.screen-confirm { text-align: center; padding-top: 2.4em; }
.big-check { width: 7em; height: 7em; margin: 0 auto .6em; }
.big-check circle { fill: #E3F1E7; stroke: #BFDDC9; stroke-width: 2; }
.big-check path { fill: none; stroke: var(--green); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 44; stroke-dashoffset: 0; }
.js:not(.reduced) .big-check path { stroke-dashoffset: 44; }
.story[data-step='1'] .big-check path { animation: draw .8s var(--ease-out) .45s forwards; }
.story[data-step='1'] .big-check { animation: pop .7s var(--ease-spring) .2s both; }
@keyframes pop { from { transform: scale(.5); opacity: 0; } }
.center { text-align: center; }
.code-card { margin: 1.5em .2em 0; padding: 1.4em 1.2em; border-radius: 1.6em; border: 1px solid #EEE2D4; background: #fff; box-shadow: 0 1.5em 3em -2em rgba(43, 33, 28, .35); }
.code-card small { display: block; color: #85766A; font-size: 1em; }
.code-card b { display: block; margin-top: .15em; font-family: var(--font-mono); font-size: 2.25em; letter-spacing: .06em; }
.qr-lg { width: 11em; margin: 1em auto; }
.code-card p { display: flex; align-items: center; justify-content: center; gap: .5em; font-size: 1.05em; color: #5E5047; }
.prod-legend { display: flex; gap: 1.2em; margin: 1em 0 .4em; font-size: .98em; color: #85766A; }
.prod-legend span { display: inline-flex; align-items: center; gap: .4em; }
.prod-legend i { width: .8em; height: .8em; border-radius: .2em; }
.lg-a { background: var(--terra); } .lg-b { background: #EADCCB; }
.prod-list li { padding: .75em 0; border-bottom: 1px solid #EEE2D4; }
.prod-list p { display: flex; justify-content: space-between; font-size: 1.12em; margin-bottom: .45em; }
.prod-list p span { font-family: var(--font-mono); color: #5E5047; }
.prod-list li > i { display: block; height: .7em; border-radius: 99em; background: #EADCCB; overflow: hidden; }
.prod-list li > i > i { display: block; height: 100%; width: calc(var(--r) * 100%); border-radius: inherit; background: var(--terra); transform-origin: 0 50%; }
.prod-list li.is-low > i > i { background: #D69A2D; }
.js:not(.reduced) .prod-list li > i > i { transform: scaleX(0); }
.story[data-step='2'] .prod-list li > i > i { transform: scaleX(1); transition: transform 1.2s var(--ease-out) calc(var(--pi) * 110ms + .35s); }
.prod-slots { display: flex; gap: .45em; margin-top: 1.1em; }
.prod-slots span { padding: .4em .75em; border-radius: 99em; border: 1px solid #E5D9CC; font-size: .95em; background: #fff; }
.prod-slots .on { background: #2B211C; border-color: #2B211C; color: #fff; }
.pick-input { margin-top: 1em; padding: .8em 1em; border-radius: 1em; border: .2em solid var(--terra); background: #fff; font-family: var(--font-mono); font-weight: 700; font-size: 1.8em; letter-spacing: .1em; min-height: 2.6em; }
.pick-input .type { font-size: 1em; font-weight: 700; }
.pick-btn { display: flex; align-items: center; justify-content: center; gap: .5em; margin: .7em 0 1em; padding: .9em; border-radius: 1em; background: var(--terra); color: #fff; font-weight: 650; font-size: 1.2em; }
.pick-btn svg { width: 1.2em; height: 1.2em; }
.pick-card { position: relative; padding: 1.2em; border-radius: 1.4em; border: 1px solid #EEE2D4; background: #fff; }
.js:not(.reduced) .pick-card { opacity: 0; transform: translateY(1em); }
.story[data-step='3'] .pick-card { animation: rise-in .8s var(--ease-out) 1.7s forwards; }
.pick-card small { font-family: var(--font-mono); font-weight: 700; letter-spacing: .1em; color: var(--terra); font-size: 1em; }
.pick-card b { display: block; margin: .15em 0 .4em; font-size: 1.8em; letter-spacing: -.02em; }
.pick-card p { display: flex; align-items: center; gap: .5em; font-size: 1.05em; color: #5E5047; }
.pick-items { margin-top: .3em; }
.pick-done { display: flex; align-items: center; justify-content: center; gap: .5em; margin-top: .9em; padding: .85em; border-radius: 1em; background: #2F6B45; color: #fff; font-weight: 650; font-size: 1.12em; }
.pick-done svg { width: 1.2em; height: 1.2em; }
.stamp { position: absolute; right: .8em; top: .9em; padding: .25em .6em; border: .18em solid #2F6B45; border-radius: .5em; color: #2F6B45; font-family: var(--font-mono); font-weight: 800; font-size: 1.15em; letter-spacing: .12em; text-transform: uppercase; rotate: -12deg; }
.js:not(.reduced) .stamp { opacity: 0; }
.story[data-step='3'] .stamp { animation: stamp .5s var(--ease-out) 2.9s forwards; }
@keyframes stamp { from { opacity: 0; transform: scale(2.2); } to { opacity: 1; transform: scale(1); } }

/* ---------- FEATURES (horizontal) ---------- */
.features { position: relative; z-index: 1; background: var(--bg); }
.hscroll { position: relative; }
.hscroll-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.hscroll-track { display: flex; align-items: stretch; gap: 22px; width: max-content; padding: 40px var(--gutter) 0; will-change: transform; }
.h-intro { flex: none; width: min(560px, 84vw); padding-right: 3vw; display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.h-hint { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); }
.h-hint span { position: relative; width: 50px; height: 1px; background: var(--line); overflow: hidden; }
.h-hint span::after { content: ''; position: absolute; inset: 0; width: 40%; background: var(--accent); animation: hint 2s var(--ease-in-out) infinite; }
@keyframes hint { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.fcard {
  position: relative; flex: none; display: flex; flex-direction: column;
  width: clamp(290px, 27vw, 392px); height: min(66svh, 560px); min-height: 450px;
  padding: 18px 18px 26px; border-radius: 28px;
  background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 30px 50px -36px rgba(80, 45, 20, .35);
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.fcard:hover { transform: translateY(-6px); box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 40px 60px -36px rgba(80, 45, 20, .45); }
.fviz {
  position: relative; flex: 1; min-height: 0; margin-bottom: 22px; padding: 22px;
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
  border-radius: 18px; overflow: hidden;
  background: linear-gradient(160deg, #F7EDE0, #EEDFCB);
  color: #2B211C;
}
.fno { padding: 0 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; color: var(--accent); }
.fcard h3 { margin: 6px 0 8px; padding: 0 8px; font-family: var(--font-display); font-weight: 420; font-size: 1.65rem; letter-spacing: -.02em; line-height: 1.1; }
.fcard > p:last-child, .fcard > p:not(.fno) { padding: 0 8px; color: var(--fg-2); font-size: .98rem; line-height: 1.55; }
.fcard-end { justify-content: flex-end; background: linear-gradient(150deg, #C8652F, #9C4521); color: #FCEFE0; border-color: transparent; overflow: hidden; }
.fcard-end::before { content: ''; position: absolute; right: -30%; top: -20%; width: 120%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 210, 150, .45), transparent); }
.fcard-end .fno { color: var(--honey); }
.fcard-end > p:not(.fno) { color: rgba(252, 239, 224, .82); }
.fcard-end .btn { margin: 26px 8px 0; align-self: flex-start; padding-right: 8px; }
.fcard-end .btn-icon { background: rgba(255, 255, 255, .14); }
.hscroll-progress { position: absolute; left: 50%; bottom: max(28px, 4svh); width: 160px; height: 2px; translate: -50% 0; background: var(--line); border-radius: 2px; overflow: hidden; }
.hscroll-progress span { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--hp, 0)); background: var(--accent); }

/* Feature visuals */
.vs-head { display: flex; align-items: center; justify-content: space-between; }
.vs-head > span { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.vs-head svg { width: 34px; height: 34px; }
.vs-count { font-family: var(--font-display); font-weight: 400; font-size: 54px; line-height: 1; font-variant-numeric: tabular-nums; }
.vs-count > span { display: block; }
.vs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.vs-grid i { position: relative; aspect-ratio: 1.3; border-radius: 14px; background: #fff; border: 1px solid #EADBC8; transition: background-color .4s, transform .5s var(--ease-spring), border-color .4s; }
.vs-grid i::after { content: ''; position: absolute; inset: 0; margin: auto; width: 34%; aspect-ratio: 1; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat; opacity: 0; transform: scale(.4); transition: opacity .3s, transform .5s var(--ease-spring); }
.vs-grid i.is-res { background: var(--terra); border-color: var(--terra); transform: scale(.94); }
.vs-grid i.is-res::after { opacity: 1; transform: none; }
.vs-sold { align-self: flex-start; padding: 6px 12px; border-radius: 99px; background: #2B211C; color: #fff; font-size: 12.5px; font-weight: 600; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s var(--ease-spring); }
.viz-stock.is-sold .vs-sold { opacity: 1; transform: none; }
.reduced .vs-sold, html:not(.js) .vs-sold { opacity: 1; transform: none; }
.viz-slots p { display: grid; grid-template-columns: 46px 1fr 44px; align-items: center; gap: 10px; font-size: 13px; }
.viz-slots p span { font-family: var(--font-mono); font-weight: 600; }
.viz-slots p b { text-align: right; font-weight: 600; color: #6B5C50; }
.viz-slots p > i { display: block; height: 12px; border-radius: 99px; background: #fff; overflow: hidden; border: 1px solid #EADBC8; }
.viz-slots p > i > i { display: block; height: 100%; width: calc(var(--w) * 100%); border-radius: inherit; background: var(--terra); transform-origin: 0 50%; }
.js:not(.reduced) .viz-slots p > i > i { transform: scaleX(0); transition: transform 1.4s var(--ease-out); }
.js:not(.reduced) .fcard.is-in .viz-slots p > i > i { transform: scaleX(1); }
.viz-slots p:nth-child(2) > i > i { transition-delay: .12s; }
.viz-slots p:nth-child(3) > i > i { transition-delay: .24s; }
.viz-slots p:nth-child(4) > i > i { transition-delay: .36s; }
.viz-slots p.full > i > i { background: #A3483A; }
.viz-slots p.full b { color: #A3483A; }
.viz-slots .vsl-note { display: flex; gap: 6px; margin-top: 6px; color: #6B5C50; font-size: 12.5px; }
.vsl-note svg { width: 16px; height: 16px; color: var(--terra); }
.viz-code { align-items: center; text-align: center; }
.qr-anim { width: 116px; padding: 10px; border-radius: 14px; background: #fff; box-shadow: 0 16px 30px -18px rgba(43, 33, 28, .45); }
.js:not(.reduced) .qr-anim rect { opacity: 0; }
.js:not(.reduced) .fcard.is-in .qr-anim rect { animation: fade-in .3s ease both; animation-delay: calc(var(--q) * 1.1s); }
.vc-code { font-family: var(--font-mono); font-weight: 700; font-size: 22px; letter-spacing: .08em; }
.vc-code span { display: inline-block; }
.js:not(.reduced) .vc-code span { opacity: 0; transform: translateY(8px); }
.js:not(.reduced) .fcard.is-in .vc-code span { animation: rise-in .5s var(--ease-out) forwards; }
.fcard.is-in .vc-code span:nth-child(1) { animation-delay: .9s; } .fcard.is-in .vc-code span:nth-child(2) { animation-delay: 1s; }
.fcard.is-in .vc-code span:nth-child(3) { animation-delay: 1.08s; } .fcard.is-in .vc-code span:nth-child(4) { animation-delay: 1.16s; }
.fcard.is-in .vc-code span:nth-child(5) { animation-delay: 1.24s; } .fcard.is-in .vc-code span:nth-child(6) { animation-delay: 1.32s; }
.fcard.is-in .vc-code span:nth-child(7) { animation-delay: 1.4s; }
.vc-mail { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 99px; background: #E1F0E5; color: var(--green); font-size: 12.5px; font-weight: 600; }
.vc-mail i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: #fff; font-style: normal; font-size: 12px; }
.js:not(.reduced) .vc-mail { opacity: 0; }
.js:not(.reduced) .fcard.is-in .vc-mail { animation: chip-in .8s var(--ease-spring) 1.8s forwards; }
.vb-chart { display: flex; align-items: flex-end; gap: 10px; height: 64%; min-height: 120px; }
.vb-chart span { position: relative; flex: 1; height: calc(var(--g) * 100%); border-radius: 8px 8px 4px 4px; background: rgba(181, 86, 43, .16); overflow: hidden; }
.vb-chart span i { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--h) / var(--g) * 100%); border-radius: inherit; background: linear-gradient(180deg, var(--terra-2), var(--terra)); transform-origin: 50% 100%; }
.js:not(.reduced) .vb-chart span i { transform: scaleY(0); transition: transform 1.2s var(--ease-out); }
.js:not(.reduced) .fcard.is-in .vb-chart span i { transform: scaleY(1); }
.vb-chart span:nth-child(2) i { transition-delay: .08s; } .vb-chart span:nth-child(3) i { transition-delay: .16s; }
.vb-chart span:nth-child(4) i { transition-delay: .24s; } .vb-chart span:nth-child(5) i { transition-delay: .32s; }
.vb-chart span:nth-child(6) i { transition-delay: .4s; }
.vb-legend { display: flex; gap: 16px; font-size: 12.5px; color: #6B5C50; }
.vb-legend span { display: inline-flex; align-items: center; gap: 6px; }
.vb-legend i { width: 10px; height: 10px; border-radius: 3px; }
.vb-legend .a { background: var(--terra); } .vb-legend .b { background: rgba(181, 86, 43, .2); }
.vl-map { position: relative; height: 46%; min-height: 100px; border-radius: 14px; overflow: hidden; background-color: #EADCCB; background-image: linear-gradient(rgba(255, 255, 255, .45) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .45) 1px, transparent 1px); background-size: 22px 22px; }
.vl-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vl-map path { fill: none; stroke: #BFD6E2; stroke-width: 14; }
.pin { position: absolute; z-index: 1; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: var(--terra); border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .25); }
.pin::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid var(--terra); opacity: 0; }
.js:not(.reduced) .fcard.is-in .pin::after { animation: ping 2.4s var(--ease-out) infinite; }
.p1 { left: 30%; top: 40%; } .p2 { left: 64%; top: 28%; } .p3 { left: 52%; top: 72%; }
.p2::after { animation-delay: .8s !important; } .p3::after { animation-delay: 1.6s !important; }
.viz-locs > p { display: flex; justify-content: space-between; padding: 6px 2px; border-bottom: 1px solid rgba(43, 33, 28, .1); font-size: 13.5px; }
.viz-locs > p span { color: #6B5C50; font-family: var(--font-mono); font-size: 12px; }
.viz-team p { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 14px; background: #fff; border: 1px solid #EADBC8; font-size: 14px; }
.js:not(.reduced) .viz-team p { opacity: 0; transform: translateX(-16px); }
.js:not(.reduced) .fcard.is-in .viz-team p { animation: slide-in .7s var(--ease-out) forwards; animation-delay: calc(var(--t) * 140ms + .2s); }
@keyframes slide-in { to { opacity: 1; transform: none; } }
.viz-team b { flex: 1; font-weight: 600; }
.av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-style: normal; font-size: 12px; font-weight: 700; color: #fff; }
.av1 { background: var(--terra); } .av2 { background: #6B7F5A; } .av3 { background: #5B6E8C; }
.tg { position: relative; width: 36px; height: 21px; border-radius: 99px; background: #DCCFC1; transition: background-color .4s; }
.tg::after { content: ''; position: absolute; left: 3px; top: 3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .4s var(--ease-spring); }
.tg.on { background: var(--green); }
.tg.on::after { transform: translateX(15px); }
.js:not(.reduced) .fcard.is-in .viz-team p:nth-child(3) .tg { animation: tg-bg .01s 1.6s forwards; }
.js:not(.reduced) .fcard.is-in .viz-team p:nth-child(3) .tg::after { animation: tg-knob .4s var(--ease-spring) 1.6s forwards; }
@keyframes tg-bg { to { background: var(--green); } }
@keyframes tg-knob { to { transform: translateX(15px); } }
.vt-invite { align-self: center; margin-top: 4px; padding: 6px 12px; border-radius: 99px; border: 1px dashed rgba(43, 33, 28, .3); font-size: 12.5px; color: #6B5C50; }
.viz-chart { justify-content: flex-end; }
.viz-chart svg { width: 100%; height: 65%; overflow: visible; }
.viz-chart .area { fill: url(#vch-fill); }
.viz-chart .line { fill: none; stroke: var(--terra); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 420; stroke-dashoffset: 0; }
.js:not(.reduced) .viz-chart .line { stroke-dashoffset: 420; }
.js:not(.reduced) .viz-chart .area { opacity: 0; transition: opacity 1s ease 1s; }
.js:not(.reduced) .fcard.is-in .viz-chart .line { animation: draw-420 1.8s var(--ease-in-out) .2s forwards; }
.js:not(.reduced) .fcard.is-in .viz-chart .area { opacity: 1; }
@keyframes draw-420 { to { stroke-dashoffset: 0; } }
.vch-csv { position: absolute; top: 18px; right: 18px; padding: 6px 12px; border-radius: 99px; background: #fff; border: 1px solid #EADBC8; font-size: 12.5px; font-weight: 600; }
.viz-privacy { align-items: center; text-align: center; }
.shield { width: 64px; height: 64px; fill: rgba(181, 86, 43, .12); stroke: var(--terra); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.anon { display: grid; font-family: var(--font-mono); font-weight: 600; font-size: 21px; }
.anon span { grid-area: 1 / 1; transition: opacity .6s, filter .6s; }
.anon-b { opacity: 0; }
.js:not(.reduced) .fcard.is-in .anon-a { animation: anon-out 6s ease-in-out infinite; }
.js:not(.reduced) .fcard.is-in .anon-b { animation: anon-in 6s ease-in-out infinite; }
@keyframes anon-out { 0%, 35% { opacity: 1; filter: blur(0); } 45%, 90% { opacity: 0; filter: blur(6px); } 100% { opacity: 1; filter: blur(0); } }
@keyframes anon-in { 0%, 35% { opacity: 0; filter: blur(6px); } 45%, 90% { opacity: 1; filter: blur(0); } 100% { opacity: 0; filter: blur(6px); } }
.anon-note { font-size: 12.5px; color: #6B5C50; }

/* ---------- SHOWCASE ---------- */
.showcase { position: relative; z-index: 1; background: var(--bg); padding: clamp(110px, 15vh, 170px) 0 clamp(120px, 16vh, 200px); overflow: hidden; }
.tabs { display: inline-flex; gap: 4px; margin-top: 36px; padding: 5px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 10px 30px -20px rgba(80, 45, 20, .35); }
.tabs button { position: relative; overflow: hidden; padding: 10px 20px; border-radius: 999px; font-size: 15px; font-weight: 550; color: var(--fg-2); transition: color .3s, background-color .3s; }
.tabs button:hover { color: var(--fg); }
.tabs button[aria-selected='true'] { background: var(--fg); color: var(--bg); }
.tabs button i { position: absolute; left: 18px; right: 18px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--amber); transform-origin: 0 50%; transform: scaleX(0); }
.tabs.is-auto button[aria-selected='true'] i { animation: tab-prog 6s linear forwards; }
@keyframes tab-prog { to { transform: scaleX(1); } }
.showcase-stage { position: relative; max-width: 1240px; margin: clamp(40px, 7vh, 70px) auto 0; padding: 0 calc(var(--gutter) + 4vw); perspective: 1800px; --p: 1; }
.browser {
  position: relative; border-radius: 18px; overflow: hidden; background: #FAF6F0;
  border: 1px solid var(--line);
  box-shadow: 0 60px 120px -40px rgba(80, 45, 20, .45), 0 30px 60px -30px rgba(0, 0, 0, .25);
  transform-origin: 50% 0;
  transform: rotateX(calc((1 - var(--p)) * 24deg)) scale(calc(.86 + var(--p) * .14)) translateY(calc((1 - var(--p)) * 40px));
}
.browser-bar { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; background: #F1E9DE; border-bottom: 1px solid #E6DACB; }
.browser-bar i { width: 11px; height: 11px; border-radius: 50%; }
.browser-bar i:nth-child(1) { background: #E2826D; } .browser-bar i:nth-child(2) { background: #E9BB5F; } .browser-bar i:nth-child(3) { background: #8DBA7A; }
.browser-bar span { flex: 1; margin-right: 54px; text-align: center; font-size: 12.5px; color: #8A7A6C; }
.browser-view { position: relative; aspect-ratio: 2400 / 1267; background: #FAF6F0; }
.browser-view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; opacity: 0; transform: scale(1.025); transition: opacity .8s var(--ease-in-out), transform 1.4s var(--ease-out); }
.browser-view img.is-on { opacity: 1; transform: none; }
.float-phone { position: absolute; z-index: 2; width: clamp(120px, 15vw, 214px); }
.float-phone img { border-radius: clamp(18px, 2.2vw, 30px); border: clamp(4px, .5vw, 7px) solid #1E1712; box-shadow: 0 40px 70px -30px rgba(40, 20, 10, .6); background: #1E1712; }
.float-phone figcaption { margin-top: 14px; text-align: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); }
.float-phone-l { left: 0; bottom: -22%; }
.float-phone-r { right: 0; bottom: 18%; }

/* ---------- FACTS ---------- */
.facts { position: relative; z-index: 1; background: var(--bg); padding: clamp(40px, 6vh, 80px) 0 clamp(50px, 7vh, 90px); }
.facts-title { margin-bottom: clamp(36px, 6vh, 60px); }
.facts-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.fact { padding: 34px 28px 8px 0; }
.fact + .fact { padding-left: 28px; border-left: 1px solid var(--line); }
.fact-num { font-family: var(--font-display); font-weight: 330; font-size: clamp(4rem, 8vw, 7.6rem); line-height: .9; letter-spacing: -.045em; font-variant-numeric: tabular-nums lining-nums; font-variation-settings: 'SOFT' 80; }
.fact-num small { margin-left: .06em; font-size: .42em; color: var(--accent); letter-spacing: 0; }
.fact-label { margin: 18px 0 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.fact-text { color: var(--fg-2); font-size: .98rem; line-height: 1.55; max-width: 26ch; }

/* ---------- PRICING ---------- */
.pricing { position: relative; z-index: 1; background: var(--bg); padding: clamp(100px, 13vh, 150px) 0; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; margin-top: clamp(44px, 7vh, 70px); }
.plan {
  position: relative; isolation: isolate; display: flex; flex-direction: column;
  padding: 32px 30px 30px; border-radius: 28px; overflow: hidden;
  background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 30px 50px -40px rgba(80, 45, 20, .35);
}
.plan::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px circle at var(--x, 50%) var(--y, 0%), rgba(181, 86, 43, .1), transparent 62%); opacity: 0; transition: opacity .4s; }
.plan:hover::before { opacity: 1; }
.plan h3 { font-family: var(--font-display); font-weight: 480; font-size: 1.6rem; letter-spacing: -.02em; }
.plan-desc { margin: 6px 0 22px; color: var(--fg-2); font-size: .98rem; }
.price { display: flex; align-items: baseline; gap: 10px; }
.amount { font-family: var(--font-display); font-weight: 360; font-size: clamp(3.4rem, 4.6vw, 4.4rem); line-height: 1; letter-spacing: -.04em; font-variation-settings: 'SOFT' 80; }
.per { color: var(--fg-2); font-size: .95rem; }
.plan .btn { margin: 26px 0 24px; }
.plan ul { display: grid; }
.plan li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: .96rem; }
.plan li svg { width: 17px; height: 17px; flex: none; color: var(--accent); }
.plan-featured {
  --line: rgba(246, 238, 227, .12);
  background: #1A1310; color: #F6EEE3; border-color: transparent;
  box-shadow: 0 50px 90px -40px rgba(80, 40, 20, .65);
}
.js:not(.reduced) .plan-featured.is-in { transform: translateY(-14px); }
.plan-featured .plan-desc, .plan-featured .per { color: rgba(246, 238, 227, .62); }
.plan-featured li svg { color: var(--amber); }
.plan-featured::before { background: radial-gradient(420px circle at var(--x, 50%) var(--y, 0%), rgba(233, 163, 90, .16), transparent 62%); }
.plan-featured::after {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--angle), transparent 0 55%, rgba(233, 163, 90, .9) 72%, var(--terra-2) 82%, transparent 94%);
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  animation: spin-angle 6s linear infinite;
}
@keyframes spin-angle { to { --angle: 360deg; } }
.badge { position: absolute; top: 28px; right: 26px; padding: 5px 11px; border-radius: 99px; background: rgba(233, 163, 90, .14); border: 1px solid rgba(233, 163, 90, .32); color: #F3C68E; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.fine-print { margin-top: 36px; text-align: center; color: var(--fg-2); font-size: .88rem; }

/* ---------- FAQ ---------- */
.faq { position: relative; z-index: 1; background: var(--bg); padding: clamp(80px, 11vh, 130px) 0 clamp(110px, 15vh, 170px); }
.faq-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(36px, 6vw, 100px); align-items: start; }
.faq-side { position: sticky; top: 120px; display: grid; gap: 22px; justify-items: start; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0;
  list-style: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 420; font-size: clamp(1.15rem, 1.6vw, 1.42rem); letter-spacing: -.012em; line-height: 1.3;
  transition: color .3s;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--accent); }
.faq-list summary i { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); transition: transform .5s var(--ease-out), background-color .3s, border-color .3s; }
.faq-list summary i::before, .faq-list summary i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; margin: -.8px 0 0 -6px; background: currentColor; border-radius: 2px; }
.faq-list summary i::after { transform: rotate(90deg); }
.faq-list details[open] summary i { transform: rotate(45deg); background: var(--accent); border-color: var(--accent); color: #fff; }
.faq-a { overflow: hidden; }
.faq-a p { padding: 0 56px 26px 0; color: var(--fg-2); line-height: 1.65; }

/* ---------- FINALE ---------- */
.finale { position: relative; z-index: 1; background: var(--bg); padding: 0 calc(var(--gutter) * .6) calc(var(--gutter) * .6); }
.finale-card {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(96svh, 980px); display: grid; place-items: center;
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, #0F0B10 0%, #1F1319 26%, #4A2219 55%, #9A4323 80%, #D27A3C 100%);
  color: #FBF1E4; text-align: center;
  --p: 1;
  transform: scale(calc(.94 + var(--p) * .06));
}
.finale-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.finale-sky::before {
  content: ''; position: absolute; inset: 0 0 45%;
  background-image: radial-gradient(1px 1px at 15% 20%, #fff, transparent), radial-gradient(1px 1px at 35% 12%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 62% 18%, #fff, transparent), radial-gradient(1px 1px at 82% 10%, #fff, transparent),
    radial-gradient(1px 1px at 90% 32%, #fff, transparent), radial-gradient(1px 1px at 8% 38%, #fff, transparent);
  opacity: calc(.5 - var(--p) * .3);
}
.sun {
  position: absolute; left: 50%; bottom: 0; width: min(110vw, 1000px); aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, calc(80% - var(--p) * 30%));
  background: radial-gradient(circle, #FFE7BC 0%, #FBC277 16%, rgba(244, 150, 80, .75) 30%, rgba(225, 115, 60, .25) 50%, transparent 68%);
}
.rays {
  position: absolute; inset: -30%; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 224, 180, .11) 0deg 5deg, transparent 5deg 15deg);
  mask: radial-gradient(closest-side, #000 20%, transparent 75%); -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 75%);
  animation: spin 80s linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }
.horizon { position: absolute; left: 0; right: 0; bottom: 0; height: 18%; background: linear-gradient(180deg, rgba(120, 50, 25, 0), rgba(90, 35, 18, .65)); border-top: 1px solid rgba(255, 220, 170, .25); }
.finale-inner { position: relative; padding-top: 80px; padding-bottom: 160px; display: grid; justify-items: center; gap: 24px; }
.eyebrow-light { color: rgba(251, 241, 228, .72); }
.finale-title {
  font-family: var(--font-display); font-weight: 360; font-size: clamp(3.1rem, 8.4vw, 8.6rem); line-height: .95; letter-spacing: -.04em;
  font-variation-settings: 'SOFT' 70;
}
.finale-title .ln { display: block; padding: 0 .06em .1em; margin: 0 -.06em -.1em; }
.finale-title em { color: #FFD9A0; }
.finale-title em .ch { color: color-mix(in oklab, #FFE6BE, #F2A25A calc(var(--ei, 0) * 100%)); }
.finale-lead { max-width: 36rem; font-size: clamp(1.05rem, 1.3vw, 1.25rem); color: rgba(251, 241, 228, .82); }
.finale-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; }

/* ---------- FOOTER ---------- */
.footer { position: relative; z-index: 1; background: #0E0A08; color: #F6EEE3; padding: clamp(70px, 10vh, 100px) 0 28px; overflow: hidden; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.footer-brand p { margin-top: 16px; max-width: 26ch; color: rgba(246, 238, 227, .6); }
.footer .brand-mark { --mark-cut: var(--terra); }
.footer-col { display: grid; align-content: start; gap: 4px; }
.footer-col p { margin-bottom: 12px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(246, 238, 227, .45); }
.footer-col a { width: fit-content; padding: 3px 0; color: rgba(246, 238, 227, .82); background: linear-gradient(var(--amber), var(--amber)) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--ease-out), color .3s; }
.footer-col a:hover { color: #fff; background-size: 100% 1px; }
.footer-word {
  margin: clamp(50px, 9vh, 90px) 0 18px; text-align: center; white-space: nowrap;
  font-family: var(--font-display); font-weight: 340; font-size: 15.4vw; line-height: .82; letter-spacing: -.055em;
  font-variation-settings: 'SOFT' 100;
  color: #2A211B;
  user-select: none;
  mask-image: linear-gradient(#000 35%, transparent 100%); -webkit-mask-image: linear-gradient(#000 35%, transparent 100%);
  margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1);
}
.footer-word .ch { transition: color .6s, transform 1.2s var(--ease-out); transition-delay: 0s, calc(var(--ci) * 40ms); }
.footer-word .ch:hover { color: var(--amber); transition-delay: 0s; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 22px; border-top: 1px solid rgba(246, 238, 227, .1); font-size: 13.5px; color: rgba(246, 238, 227, .55); }
.to-top { display: inline-flex; align-items: center; gap: 8px; color: rgba(246, 238, 227, .8); transition: color .3s; }
.to-top:hover { color: #fff; }
.to-top svg { width: 16px; height: 16px; rotate: -90deg; transition: transform .4s var(--ease-out); }
.to-top:hover svg { transform: translateX(3px); }

/* ---------- Legal pages ---------- */
.legal-page { min-height: 100svh; display: flex; flex-direction: column; }
.legal-head { max-width: 820px; width: 100%; margin: 0 auto; padding: 28px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.legal { flex: 1; max-width: 820px; width: 100%; margin: 0 auto; padding: clamp(30px, 6vh, 70px) var(--gutter) 100px; }
.legal h1 { font-family: var(--font-display); font-weight: 380; font-size: clamp(2.6rem, 6vw, 4.4rem); letter-spacing: -.035em; line-height: 1; margin-bottom: 28px; font-variation-settings: 'SOFT' 60; }
.legal h2 { margin: 36px 0 10px; font-family: var(--font-display); font-weight: 450; font-size: 1.5rem; letter-spacing: -.015em; }
.legal p { color: var(--fg-2); }
.notice { padding: 16px 18px; border-radius: 16px; background: rgba(233, 163, 90, .12); border: 1px solid rgba(233, 163, 90, .35); color: var(--fg) !important; }
.not-found { flex: 1; display: grid; place-items: center; text-align: center; padding: 60px var(--gutter); }
.not-found h1 { font-family: var(--font-display); font-weight: 340; font-size: clamp(5rem, 18vw, 12rem); line-height: 1; letter-spacing: -.05em; color: var(--amber); font-variation-settings: 'SOFT' 100; }
.not-found p { margin: 12px 0 28px; color: var(--fg-2); font-size: 1.15rem; }


/* Story screen extras */
.cf-btn { display: block; margin: 1.1em .2em 0; padding: .9em; border-radius: 1em; border: 1px solid #E0D2C2; background: #fff; text-align: center; font-weight: 600; font-size: 1.1em; }
.cf-note { margin-top: .8em; text-align: center; color: #85766A; font-size: .98em; }
.prod-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; margin-top: .9em; }
.prod-stats p { padding: .55em .7em; border-radius: .9em; background: #fff; border: 1px solid #EEE2D4; }
.prod-stats small { display: block; font-size: .85em; color: #85766A; }
.prod-stats b { font-size: 1.45em; font-variant-numeric: tabular-nums; }
.tabbar { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); padding: .8em .6em 2em; background: #fff; border-top: 1px solid #EEE2D4; }
.tabbar span { display: grid; justify-items: center; gap: .3em; font-size: .82em; color: #85766A; }
.tabbar i { width: 1.9em; height: 1.9em; border-radius: .5em; border: .16em solid currentColor; opacity: .7; }
.tabbar .on { color: var(--terra); font-weight: 600; }
.tabbar .on i { opacity: 1; background: rgba(181, 86, 43, .12); }
.screen-prod .prod-list li { padding: .6em 0; }

/* Feature end card art */
.end-art { position: absolute; inset: 0 0 45% 0; pointer-events: none; }
.end-art svg { position: absolute; filter: drop-shadow(0 18px 24px rgba(60, 20, 5, .35)); }
.ea-1 { width: 46%; left: 40%; top: 10%; rotate: 14deg; }
.ea-2 { width: 34%; left: 10%; top: 32%; rotate: -12deg; }
.ea-3 { width: 28%; left: 66%; top: 52%; rotate: 8deg; }
.js:not(.reduced) .end-art svg { animation: float-y 6s ease-in-out infinite alternate; }
.js:not(.reduced) .ea-2 { animation-delay: -2s; }
.js:not(.reduced) .ea-3 { animation-delay: -4s; }
@keyframes float-y { to { transform: translateY(-14px) rotate(6deg); } }

/* Sun disc */
.sun::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 50% 40%, #FFF3DA, #FFD08A 55%, #F7A85C 100%);
  box-shadow: 0 0 80px 30px rgba(255, 196, 120, .45), 0 0 200px 80px rgba(240, 140, 70, .3);
}

/* ---------- Responsive ---------- */
@media (max-width: 999px) {
  .nav-links { display: none; }
  .menu-toggle { display: grid; }
}
@media (max-width: 899px) {
  .hero-inner { grid-template-columns: 1fr; padding-top: 120px; padding-bottom: 120px; gap: 10px; }
  .hero-title { font-size: clamp(3.2rem, 14.5vw, 6rem); }
  .hero-stage { height: auto; min-height: 0; padding: 30px 0 10px; --pw: min(250px, 64vw); }
  .receipt { display: none; }
  .chip-a { top: 4%; left: auto; right: -2%; }
  .chip-b { bottom: 6%; right: auto; left: -2%; }
  .chip-c { display: none; }
  .hero-foot { position: relative; bottom: auto; padding-bottom: 26px; }
  .hero-foot-note { display: none; }
  .statement { border-radius: var(--radius-xl) var(--radius-xl) 0 0; margin-top: -24px; }
  .statement-grid { grid-template-columns: 1fr; }

  .story-inner { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); align-items: start; gap: 2svh; padding-top: 92px; padding-bottom: 20px; }
  .story-title { display: none; }
  .story-clock { margin: 1.4svh 0 1svh; font-size: clamp(3.4rem, min(16vw, 9svh), 5.4rem); }
  .story-steps { height: 9.6em; }
  .step h3 { font-size: clamp(1.5rem, 6.4vw, 2rem); margin: 6px 0 6px; }
  .step p:last-child { font-size: .95rem; line-height: 1.5; }
  .story-rail { margin-top: 1svh; }
  .story-device { align-self: center; }
  .phone-story { --pw: clamp(150px, min(58vw, calc((100svh - 430px) * .48)), 260px); }

  .fcard { width: min(82vw, 360px); height: min(64svh, 540px); min-height: 420px; }
  .h-intro { width: 86vw; }
  .showcase-stage { padding: 0 var(--gutter); }
  .float-phone { width: clamp(86px, 25vw, 150px); }
  .float-phone figcaption { display: none; }
  .float-phone-l { left: 5%; bottom: -34%; }
  .float-phone-r { right: 5%; bottom: -46%; }
  .showcase { padding-bottom: clamp(170px, 46vw, 260px); }
  .tabs { max-width: 100%; overflow-x: auto; }
  .tabs button { padding: 9px 14px; font-size: 14px; }

  .facts-grid { grid-template-columns: 1fr 1fr; }
  .fact:nth-child(3) { border-left: 0; padding-left: 0; }
  .fact:nth-child(n+3) { border-top: 1px solid var(--line); }
  .plans { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
  .js:not(.reduced) .plan-featured.is-in { transform: none; }
  .faq-grid { grid-template-columns: 1fr; }
  .faq-side { position: static; }
  .faq-a p { padding-right: 0; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .finale-inner { padding-bottom: 120px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .nav-login { display: none; }
  .nav .btn-sm { padding: 0 14px; }
  .hero-actions .btn { width: 100%; }
  .hero-proof { gap: 6px 16px; font-size: 13px; }
  .fact { padding-right: 14px; }
  .fact + .fact { padding-left: 14px; }
  .fact:nth-child(3) { padding-left: 0; }
  .fact-num { font-size: 3.6rem; }
  .finale-actions .btn { width: 100%; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 440px) {
  .nav .btn-sm { display: none; }
}

/* ---------- Reduced motion / no JS ---------- */
.reduced .hscroll { height: auto !important; }
.reduced .hscroll-sticky, html:not(.js) .hscroll-sticky { position: relative; height: auto; padding: 100px 0 60px; }
.reduced .hscroll-track, html:not(.js) .hscroll-track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 30px; transform: none !important; }
.reduced .hscroll-track > *, html:not(.js) .hscroll-track > * { scroll-snap-align: start; }
.reduced .hscroll-progress, html:not(.js) .hscroll-progress, html:not(.js) .h-hint { display: none; }
html:not(.js) .story { height: auto; }
html:not(.js) .story-sticky { position: relative; height: auto; }
html:not(.js) .story-clock, html:not(.js) .story-rail { display: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}