/* ==========================================================================
   Life in Lofi — one-page site
   Type scale, radii and spacing ported from the Habitline Figma template;
   palette from LILO/public/assets/brand-assets.json.
   ========================================================================== */

/* ---------- fonts ---------- */
@font-face { font-family:'Stack Sans Headline'; src:url('../fonts/stack-sans-headline-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Stack Sans Headline'; src:url('../fonts/stack-sans-headline-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Stack Sans Headline'; src:url('../fonts/stack-sans-headline-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Google Sans Flex'; src:url('../fonts/google-sans-flex-var.woff2') format('woff2-variations'); font-weight:400 700; font-display:swap; }
@font-face { font-family:'Silkscreen'; src:url('../fonts/silkscreen-latin-400-normal.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Silkscreen'; src:url('../fonts/silkscreen-latin-700-normal.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'VT323'; src:url('../fonts/vt323-latin-400-normal.woff2') format('woff2'); font-weight:400; font-display:swap; }

/* ---------- tokens ---------- */
:root {
  --bg:#0c0a08; --bg-deep:#070504;
  --surface:#14100c; --surface-2:#1b1510; --surface-3:#241c14;
  --line:#2c241b; --line-soft:#221b14;
  --ink:#f4e8d2; --body:#cfc2a4; --muted:#8d7f68; --faint:#6b5f4d;
  --amber:#f38432; --cream:#f2c785; --ember:#ff7a1a;

  --z-smoke:#f38432; --z-plant:#6fae5a; --z-walk:#6fae5a; --z-cal:#cbb892;
  --z-lofi:#63b8ae; --z-water:#58a6cf; --z-beer:#cba24e; --z-focus:#e0894a;
  --z-read:#b487c4; --z-coffee:#c8905a; --z-weigh:#b9ad8e; --z-sleep:#7f88c4;

  --r-sm:12px; --r-md:15px; --r-lg:20px; --r-xl:25px; --r-pill:100px;
  --container:1200px; --gutter:24px;
  --shadow-soft:0 24px 60px -30px rgba(0,0,0,.9);
  --shadow-card:0 2px 0 rgba(255,255,255,.02) inset, 0 30px 60px -40px #000;
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px; }
body {
  margin:0; background:var(--bg); color:var(--body);
  font-family:'Google Sans Flex',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:18px; line-height:1.45; font-weight:500;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg,canvas { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible { outline:2px solid var(--amber); outline-offset:3px; border-radius:6px; }

h1,h2,h3,h4 {
  font-family:'Stack Sans Headline','Google Sans Flex',sans-serif;
  font-weight:600; color:var(--ink); margin:0; line-height:1; letter-spacing:-.01em;
}
.display { font-size:clamp(44px,7.2vw,90px); font-weight:500; line-height:1.02; }
.h2 { font-size:clamp(30px,4vw,50px); line-height:1.04; }
.h3 { font-size:clamp(24px,2.4vw,34px); line-height:1.15; }
.h6 { font-size:22px; line-height:1.15; }
.lead { font-size:clamp(18px,1.6vw,22px); line-height:1.4; }
.small { font-size:14px; }
.muted { color:var(--muted); }
.ink { color:var(--ink); }
p { margin:0; }

.container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section { padding-block:104px; position:relative; }
.stack { display:flex; flex-direction:column; }
.gap-8{gap:8px} .gap-10{gap:10px} .gap-12{gap:12px} .gap-16{gap:16px}
.gap-20{gap:20px} .gap-24{gap:24px} .gap-32{gap:32px} .gap-40{gap:40px}
.center { text-align:center; }
.mx-auto { margin-inline:auto; }
.maxw-460{max-width:460px} .maxw-560{max-width:560px} .maxw-640{max-width:640px}

/* ---------- pills / buttons ---------- */
.pretitle {
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 18px; border:1px solid var(--line); border-radius:var(--r-pill);
  background:rgba(255,255,255,.045); font-size:14px; color:var(--body);
  backdrop-filter:blur(6px);
}
.pretitle .dot { width:7px; height:7px; border-radius:50%; background:var(--amber); box-shadow:0 0 12px var(--amber); }
.pretitle .tag { padding:3px 12px; border-radius:var(--r-pill); background:var(--amber); color:#1a0f06; font-size:13px; font-weight:700; }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:55px; padding-inline:28px; border-radius:var(--r-pill);
  font-size:18px; font-weight:600; white-space:nowrap;
  transition:transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.btn:hover { transform:translateY(-2px); }
.btn--primary { background:var(--cream); color:#1a0f06; }
.btn--primary:hover { background:#fff0d2; }
.btn--amber { background:var(--amber); color:#1a0f06; }
.btn--amber:hover { background:#ff9a53; }
.btn--ghost { background:rgba(255,255,255,.06); border:1px solid var(--line); color:var(--ink); }
.btn--ghost:hover { background:rgba(255,255,255,.1); border-color:#3a3025; }
.btn--sm { height:44px; font-size:16px; padding-inline:20px; }
.btn[aria-disabled='true'] { opacity:.5; cursor:not-allowed; }
.btn[aria-disabled='true']:hover { transform:none; }

/* ---------- header ---------- */
.header {
  position:sticky; top:0; z-index:60; padding-block:14px;
  background:linear-gradient(to bottom,rgba(12,10,8,.94),rgba(12,10,8,.6) 70%,transparent);
  backdrop-filter:blur(10px);
}
.header__inner { display:flex; align-items:center; justify-content:space-between; gap:16px; height:60px; }
.logo { display:inline-flex; align-items:center; gap:10px; }
.logo img { height:32px; width:auto; }
.logo__word { font-family:'Silkscreen',monospace; font-size:14px; letter-spacing:.14em; color:var(--cream); font-weight:700; white-space:nowrap; }
.nav { display:flex; align-items:center; gap:4px; }
.nav a {
  display:inline-flex; align-items:center; height:42px; padding-inline:18px;
  border-radius:var(--r-md); font-family:'Stack Sans Headline',sans-serif;
  font-size:15px; font-weight:400; color:var(--body);
  transition:background-color .18s ease,color .18s ease;
}
.nav a:hover, .nav a.is-active { background:rgba(255,255,255,.06); color:var(--ink); }
.header__cta { display:flex; align-items:center; gap:10px; }
.burger { display:none; width:44px; height:44px; border-radius:var(--r-md); border:1px solid var(--line); align-items:center; justify-content:center; }
.burger span { display:block; width:18px; height:2px; background:var(--ink); box-shadow:0 -6px 0 var(--ink),0 6px 0 var(--ink); }

/* scroll progress hairline */
.progress { position:fixed; top:0; left:0; height:2px; width:100%; z-index:80; transform-origin:0 50%; transform:scaleX(var(--sp,0)); background:linear-gradient(90deg,var(--amber),var(--cream)); }

.mobile-nav { position:fixed; inset:0; z-index:70; background:rgba(7,5,4,.97); backdrop-filter:blur(14px); display:none; flex-direction:column; padding:24px; }
.mobile-nav[data-open='true'] { display:flex; }
.mobile-nav a:not(.btn) { padding:18px 4px; border-bottom:1px solid var(--line); font-size:22px; font-family:'Stack Sans Headline',sans-serif; color:var(--ink); }
.mobile-nav__close { align-self:flex-end; width:44px; height:44px; font-size:26px; color:var(--ink); }

/* ---------- night sky ---------- */
.skyline { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.skyline::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% -10%,rgba(243,132,50,.16),transparent 55%),
    radial-gradient(80% 60% at 12% 8%,rgba(99,184,174,.06),transparent 60%),
    linear-gradient(to bottom,#0f0b08,var(--bg) 70%);
}
.stars { position:absolute; inset:0; opacity:.55; }
.stars i { position:absolute; width:2px; height:2px; border-radius:50%; background:var(--cream); animation:twinkle 4s steps(2,end) infinite; }
@keyframes twinkle { 0%,100%{opacity:.2} 50%{opacity:.95} }

/* ==========================================================================
   Scroll choreography
   [data-anim] elements start hidden and are released by IntersectionObserver.
   [data-parallax] and the story rail are driven by a rAF scroll loop that
   writes a 0–1 progress into --p.
   ========================================================================== */
[data-anim] { opacity:0; will-change:opacity,transform; transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
[data-anim='up']    { transform:translateY(26px); }
[data-anim='fade']  { transform:none; }
[data-anim='scale'] { transform:scale(.94); }
[data-anim='left']  { transform:translateX(-24px); }
[data-anim='right'] { transform:translateX(24px); }
[data-anim].is-in { opacity:1; transform:none; }

[data-parallax] { will-change:transform; transform:translate3d(0,calc(var(--par,0) * 1px),0); }

/* headline that resolves word by word */
.reveal-words span { display:inline-block; opacity:0; transform:translateY(.4em) rotate(1.5deg); transition:opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
.reveal-words.is-in span { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  [data-anim], .reveal-words span { opacity:1 !important; transform:none !important; transition:none !important; }
  [data-parallax] { transform:none !important; }
  .stars i { animation:none; }
  *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ---------- hero ---------- */
.hero { position:relative; padding-top:48px; padding-bottom:0; overflow:hidden; }
.hero__inner { position:relative; z-index:2; text-align:center; display:flex; flex-direction:column; align-items:center; gap:22px; }
.hero h1 { max-width:940px; }
.hero .lead { max-width:440px; color:var(--body); }
.hero__buttons { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }
.hero__art {
  position:relative; z-index:1; margin-top:48px;
  border-radius:var(--r-xl) var(--r-xl) 0 0; overflow:hidden;
  border:1px solid var(--line); border-bottom:0; box-shadow:var(--shadow-soft); background:var(--bg-deep);
}
.hero__art img { width:100%; height:auto; transform:scale(calc(1 + var(--zoom,0))); transition:none; }
.hero__fade { position:absolute; left:0; right:0; bottom:0; height:200px; z-index:2; background:linear-gradient(to bottom,transparent,var(--bg) 90%); pointer-events:none; }
.scroll-hint { position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:3; font-family:'Silkscreen',monospace; font-size:9px; letter-spacing:.16em; color:var(--faint); display:flex; flex-direction:column; align-items:center; gap:8px; }
.scroll-hint::after { content:''; width:1px; height:26px; background:linear-gradient(var(--faint),transparent); animation:drop 1.8s ease-in-out infinite; }
@keyframes drop { 0%,100%{opacity:.2;transform:translateY(-4px)} 50%{opacity:1;transform:translateY(2px)} }

/* ---------- story rail (sticky visual + stepped beats) ---------- */
.story { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px); gap:80px; align-items:start; }
.story__sticky { position:sticky; top:104px; display:grid; place-items:center; min-height:min(56vh,480px); }
/* trailing room so the sticky visual stays pinned while the last beat reads */
.story__beats { display:flex; flex-direction:column; padding-bottom:min(34vh,300px); }
.beat { padding-block:clamp(64px,16vh,150px); opacity:.28; transition:opacity .45s ease; }
.beat.is-active { opacity:1; }
.beat__no { font-family:'Silkscreen',monospace; font-size:10px; letter-spacing:.18em; color:var(--amber); display:block; margin-bottom:14px; }
.beat h3 { font-size:clamp(26px,3vw,38px); line-height:1.1; }
.beat p { margin-top:14px; color:var(--muted); max-width:38ch; }

/* the sticky visual: phone with swapping screens */
/* every screen is absolute so the sticky column keeps one fixed height —
   otherwise a taller screen grows the column mid-scroll and the pin drifts */
.story__screens { position:relative; min-height:440px; }
.story__screen { position:absolute; inset:0 0 auto; opacity:0; transform:translateY(14px) scale(.985); transition:opacity .5s ease, transform .5s ease; pointer-events:none; }
.story__screen.is-on { opacity:1; transform:none; pointer-events:auto; }

/* ---------- cards ---------- */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-card); overflow:hidden; }
.card--pad { padding:28px; }

/* ---------- demos ---------- */
.demos { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
.demos > * { min-width:0; }
.demo { display:flex; flex-direction:column; }
.demo__head { padding:26px 26px 0; display:flex; flex-direction:column; gap:8px; }
.demo__kicker { font-family:'Silkscreen',monospace; font-size:9px; letter-spacing:.16em; }
.demo__head p { color:var(--muted); font-size:15px; }
.demo__stage { padding:20px 22px 24px; flex:1; display:flex; flex-direction:column; }
.demo__hint { margin-top:auto; padding-top:14px; font-size:13px; color:var(--faint); display:flex; align-items:center; gap:8px; }
.demo__hint b { color:var(--amber); font-weight:600; }

/* the app's own log list: each time, and the gap before it */
.sz-log { margin-top:12px; display:flex; flex-direction:column; gap:4px; }
.sz-log .row { display:flex; align-items:center; gap:8px; font-size:16px; color:var(--body); line-height:1.1; }
.sz-log .row .tick { width:5px; height:5px; border-radius:50%; background:var(--z-smoke); flex:none; }
.sz-log .row .last { margin-left:auto; font-family:'Silkscreen',monospace; font-size:7px; letter-spacing:.1em; color:var(--amber); }
.sz-log .gap { display:flex; align-items:center; gap:8px; font-family:'Silkscreen',monospace; font-size:7px; letter-spacing:.1em; color:var(--faint); }
.sz-log .gap i { flex:1; height:1px; background:var(--line); }

/* app-chrome shell shared by demos + story screens */
.app {
  border-radius:var(--r-md); border:1px solid var(--line);
  background:#0a0806; padding:14px; font-family:'VT323',monospace; color:var(--body);
}
.app__bar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.app__title { font-family:'Silkscreen',monospace; font-size:9px; letter-spacing:.14em; color:var(--cream); }
.app__sub { font-family:'Silkscreen',monospace; font-size:7px; letter-spacing:.14em; color:var(--faint); margin-top:5px; }

/* app-chrome internals — shared by the story screens and the demos */
.app--lg { padding:18px; border-radius:var(--r-lg); }
.app__cards { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.app__card { border:1px solid var(--line); border-radius:10px; padding:10px; background:rgba(255,255,255,.02); }
.app__card .k { font-family:'Silkscreen',monospace; font-size:7px; letter-spacing:.1em; color:var(--muted); }
.app__card .v { font-size:26px; line-height:1; margin-top:5px; color:var(--ink); }
.app__card .s { font-size:14px; color:var(--faint); line-height:1; margin-top:3px; }
.app__scene { position:relative; margin-top:10px; border-radius:10px; overflow:hidden; border:1px solid var(--line); background:#0a0806; }
.app__scene img { width:100%; height:190px; object-fit:cover; object-position:center bottom; image-rendering:pixelated; }
.app__zones { position:absolute; left:8px; right:8px; bottom:8px; display:flex; gap:6px; flex-wrap:wrap; }
.app__zones span {
  font-family:'Silkscreen',monospace; font-size:7px; letter-spacing:.08em; padding:5px 8px;
  border-radius:999px; background:rgba(10,8,6,.82); border:1px solid var(--line); color:var(--cream); backdrop-filter:blur(2px);
}
.app__rows { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.app__row { display:flex; align-items:center; gap:10px; padding:10px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.02); }
.app__row .dot { width:8px; height:8px; border-radius:3px; flex:none; }
.app__row .t { font-size:16px; color:var(--ink); line-height:1; }
.app__row .d { font-size:13px; color:var(--faint); line-height:1; margin-top:3px; }
.app__row .r { margin-left:auto; font-family:'Silkscreen',monospace; font-size:7px; color:var(--muted); }
.app__rail { display:flex; gap:5px; margin-top:10px; }
.app__rail div {
  flex:1; text-align:center; padding:8px 3px; border-radius:9px; border:1px solid var(--line);
  background:rgba(255,255,255,.02); font-family:'Silkscreen',monospace; font-size:7px; letter-spacing:.05em; color:var(--muted);
}
.app__rail div[data-on] { border-color:var(--amber); color:var(--amber); background:rgba(243,132,50,.1); }
.app__tabs { display:flex; gap:4px; margin-top:8px; }
.app__tabs div { flex:1; text-align:center; font-family:'Silkscreen',monospace; font-size:7px; letter-spacing:.05em; color:var(--faint); padding:8px 2px; border-radius:8px; }
.app__tabs div[data-on] { color:var(--cream); background:rgba(255,255,255,.05); }

.chart { display:flex; align-items:flex-end; gap:5px; height:120px; margin-top:12px; }
.chart .bar { flex:1; border-radius:3px 3px 0 0; min-height:5px; background:linear-gradient(to top,rgba(88,166,207,.2),var(--z-water)); }

/* smoking zone */
.sz-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.sz-stat { border:1px solid var(--line); border-radius:10px; padding:9px; background:rgba(255,255,255,.02); }
.sz-stat .k { font-family:'Silkscreen',monospace; font-size:7px; letter-spacing:.1em; color:var(--muted); }
.sz-stat .v { font-size:24px; line-height:1; margin-top:5px; color:var(--ink); }
.sz-stat .v small { font-size:14px; color:var(--faint); }
.sz-bar { height:4px; border-radius:3px; background:rgba(255,255,255,.08); margin-top:7px; overflow:hidden; }
.sz-bar i { display:block; height:100%; width:0; background:var(--z-smoke); transition:width .5s cubic-bezier(.22,.61,.36,1); }
.sz-bar i.over { background:#e0503a; }

.sz-timeline { margin-top:14px; }
.sz-track { position:relative; height:30px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.02); overflow:hidden; }
.sz-track .hr { position:absolute; top:0; bottom:0; width:1px; background:rgba(255,255,255,.06); }
.sz-track .now { position:absolute; top:0; bottom:0; width:1px; background:var(--cream); opacity:.5; }
.sz-track .cig { position:absolute; top:7px; width:3px; height:16px; border-radius:2px; background:var(--z-smoke); box-shadow:0 0 10px rgba(243,132,50,.8); animation:pop .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes pop { from{transform:scaleY(0);opacity:0} to{transform:scaleY(1);opacity:1} }
.sz-hours { display:flex; justify-content:space-between; font-family:'Silkscreen',monospace; font-size:7px; color:var(--faint); margin-top:5px; }

.ember-btn {
  margin-top:16px; width:100%; height:56px; border-radius:var(--r-pill);
  border:1px solid rgba(243,132,50,.45); background:rgba(243,132,50,.1);
  display:flex; align-items:center; justify-content:center; gap:12px;
  font-family:'Silkscreen',monospace; font-size:10px; letter-spacing:.14em; color:var(--z-smoke);
  transition:transform .12s ease, background-color .2s ease, box-shadow .3s ease;
}
.ember-btn:hover { background:rgba(243,132,50,.18); }
.ember-btn:active { transform:scale(.97); }
.ember-btn .ember { width:12px; height:12px; border-radius:50%; background:var(--ember); box-shadow:0 0 12px var(--ember); }
.ember-btn.lit { box-shadow:0 0 0 6px rgba(243,132,50,.08); }
.ember-btn.lit .ember { animation:flare .7s ease-out; }
@keyframes flare { 0%{box-shadow:0 0 30px 8px var(--ember);transform:scale(1.5)} 100%{box-shadow:0 0 12px var(--ember);transform:scale(1)} }

/* water zone */
.wz-wrap { display:grid; grid-template-columns:96px 1fr; gap:16px; align-items:center; }
.wz-glass { position:relative; height:150px; border-radius:6px 6px 10px 10px; border:2px solid #7e8482; border-top-color:#c4cac6; background:rgba(255,255,255,.03); overflow:hidden; }
.wz-glass .fill {
  position:absolute; left:0; right:0; bottom:0; height:0;
  background:linear-gradient(to bottom,#7fc4e6,var(--z-water));
  transition:height .75s cubic-bezier(.22,.61,.36,1);
}
.wz-glass .fill::before { content:''; position:absolute; left:0; right:0; top:-3px; height:5px; background:#a9dcf5; opacity:.8; }
.wz-glass .shine { position:absolute; left:6px; top:10px; width:3px; bottom:16px; background:rgba(255,255,255,.14); }
.wz-meta { display:flex; flex-direction:column; gap:10px; }
.wz-read { font-size:34px; line-height:1; color:var(--ink); }
.wz-read small { font-size:15px; color:var(--faint); }
.wz-bar { height:5px; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden; }
.wz-bar i { display:block; height:100%; width:0; background:var(--z-water); transition:width .7s cubic-bezier(.22,.61,.36,1); }
.wz-presets { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:16px; }
.wz-preset {
  border:1px solid var(--line); border-radius:10px; padding:10px 4px; background:rgba(255,255,255,.02);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  transition:border-color .2s ease, transform .12s ease, background-color .2s ease;
}
.wz-preset:hover { border-color:var(--z-water); background:rgba(88,166,207,.08); }
.wz-preset:active { transform:scale(.95); }
.wz-preset .vessel { width:22px; height:26px; display:block; }
.wz-preset .ml { font-family:'Silkscreen',monospace; font-size:7px; letter-spacing:.06em; color:var(--muted); }
.splash { position:absolute; left:50%; top:0; width:4px; height:0; background:#a9dcf5; transform:translateX(-50%); }
.splash.on { animation:pour .5s ease-in; }
@keyframes pour { 0%{height:0;opacity:0} 25%{opacity:1} 100%{height:100%;opacity:0} }

/* walk / selfie */
.wk-stage { position:relative; }
.wk-canvas { width:100%; height:auto; border-radius:var(--r-sm); border:1px solid var(--line); background:#0a0806; }
.wk-toggle { display:flex; gap:6px; padding:4px; border:1px solid var(--line); border-radius:var(--r-pill); background:rgba(255,255,255,.03); margin-top:14px; }
.wk-toggle button { flex:1; height:36px; border-radius:var(--r-pill); font-size:13px; color:var(--muted); transition:background-color .2s ease,color .2s ease; }
.wk-toggle button[aria-pressed='true'] { background:var(--surface-3); color:var(--ink); }

/* ---------- get-the-app ---------- */
.get { position:relative; overflow:hidden; }
.get__grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.badges { display:flex; flex-direction:column; gap:10px; }
.badge {
  display:flex; align-items:center; gap:14px; padding:14px 22px;
  border-radius:var(--r-pill); border:1px solid var(--line); background:var(--surface); color:var(--body);
}
.badge b { display:block; color:var(--ink); font-size:16px; font-weight:600; }
.badge span.sub { font-size:12px; color:var(--faint); }
.badge[aria-disabled='true'] { opacity:.55; }

.install { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.install > * { min-width:0; }
.howto { padding:22px; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--surface); }
.howto h4 { font-family:'Stack Sans Headline',sans-serif; font-size:18px; color:var(--ink); margin-bottom:14px; display:flex; align-items:center; gap:9px; }
.howto ol { margin:0; padding-left:18px; display:flex; flex-direction:column; gap:9px; color:var(--muted); font-size:15px; }
.howto ol b { color:var(--body); font-weight:600; }

.facts { display:flex; flex-wrap:wrap; gap:10px; }
.fact { padding:8px 16px; border-radius:var(--r-pill); border:1px solid var(--line-soft); background:rgba(255,255,255,.03); font-size:14px; color:var(--body); }

.note { padding:14px 18px; border-radius:var(--r-sm); border:1px dashed var(--line); background:rgba(255,255,255,.02); font-size:13px; color:var(--muted); }

/* ---------- footer ---------- */
.footer { border-top:1px solid var(--line); padding-block:36px; background:var(--bg-deep); }
.footer__row { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:15px; color:var(--faint); }
.footer__links { display:flex; gap:20px; flex-wrap:wrap; }
.footer__links a:hover { color:var(--ink); }

/* ---------- responsive ---------- */
@media (max-width:1080px) {
  .section { padding-block:80px; }
  .story { grid-template-columns:1fr; gap:0; }
  .story__sticky { position:relative; top:0; min-height:0; margin-bottom:8px; }
  .story__beats { padding-bottom:0; }
  .story__screens { min-height:0; }
  .story__screen { position:absolute; }
  .story__screen.is-on { position:relative; }
  .beat { padding-block:44px; opacity:1; }
  .demos { grid-template-columns:1fr; }
  .get__grid { grid-template-columns:1fr; gap:36px; }
}
@media (max-width:860px) {
  .nav, .header__cta .btn--ghost { display:none; }
  .burger { display:inline-flex; }
  .install { grid-template-columns:1fr; }
}
@media (max-width:620px) {
  :root { --gutter:18px; }
  .section { padding-block:64px; }
  body { font-size:17px; }
  .btn { height:50px; font-size:17px; padding-inline:22px; }
  .header .logo__word { display:none; }
  .wz-wrap { grid-template-columns:76px 1fr; }
}