/* fops. landing — "Silk & Graphite" (approved motion concept, 2026-09-22).
   Landing palette: graphite, black, white, soft silver — no orange.
   The concept phone is a light monochrome storefront with the real product photos.
   Every screen with invented or placeholder data is labelled as demo. */
:root {
  --night: #060607;
  --night-2: #0E0F11;
  --graphite: #17181B;
  --silver: #C9CDD2;
  --silver-dim: #9EA3A9;
  --paper: #FFFFFF;
  --light: #F6F6F4;
  --ink: #0B0B0C;
  --ink-soft: #2E2F31;
  --muted: #62656A;
  --line: #E3E3E0;
  --line-night: rgb(255 255 255 / 12%);
  --radius: 28px;
  --gutter: 20px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --cabinet-serif: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; background: var(--night); }
body { margin: 0; background: var(--night); color: var(--ink); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: 5px; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure, dl, dd, ol, ul { margin: 0; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }
.shell { width: min(1320px, calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.skip-link { position: absolute; top: 8px; left: 12px; z-index: 50; padding: 12px 16px; background: var(--paper); color: var(--ink); border-radius: 10px; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.display { font-family: var(--serif); font-weight: 500; letter-spacing: -.04em; line-height: .98; }
.display em { font-style: italic; font-weight: 500; }
.visually-hidden, .step-caption { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Buttons and links */
.cta { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 56px; padding: 0 28px; border: 0; border-radius: 100px; background: var(--ink); color: var(--paper); font: 500 15px/1.2 var(--sans); text-decoration: none; cursor: pointer; transition: background 200ms ease, transform 200ms ease; }
.cta:hover { background: var(--ink-soft); transform: translateY(-1px); }
.cta:disabled { opacity: .6; cursor: wait; transform: none; }
.cta-light { background: var(--paper); color: var(--ink); }
.cta-light:hover { background: #E7E8EA; }
.cta-arrow { font-size: 17px; }
.cta-compact { min-height: 44px; padding: 0 20px; font-size: 13px; }
.text-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 15px; font-weight: 500; text-decoration: none; }
.text-link:hover { text-decoration: underline; }

/* Header: fixed, re-themed by motion.js for the chapter underneath. */
.topbar { position: fixed; inset: 0 0 auto; z-index: 30; border-bottom: 1px solid transparent; transition: background 300ms ease, color 300ms ease, border-color 300ms ease; }
.topbar-inner { position: relative; display: flex; align-items: center; justify-content: space-between; height: 68px; }
.topbar[data-over="dark"] { color: #F2F3F5; }
.topbar[data-over="dark"].is-scrolled { background: rgb(6 6 7 / 72%); border-bottom-color: var(--line-night); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.topbar[data-over="light"] { color: var(--ink); background: rgb(255 255 255 / 84%); border-bottom-color: var(--line); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.topbar[data-over="dark"] .cta-compact { background: var(--paper); color: var(--ink); }
.brand { display: inline-flex; align-items: center; min-height: 44px; font: 600 30px/1 var(--serif); letter-spacing: -.045em; text-decoration: none; }
.main-nav { display: none; }
.main-nav a, .login-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 500; text-decoration: none; }
.main-nav a:hover, .login-link:hover { text-decoration: underline; }
.header-actions { display: flex; align-items: center; gap: 4px; }
.login-link, .header-actions .cta-compact { display: none; }
.mobile-menu > summary { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; list-style: none; cursor: pointer; border-radius: 50%; }
.mobile-menu > summary::-webkit-details-marker { display: none; }
.mobile-menu:not([open]) > .mobile-menu-panel { display: none; }
.mobile-menu-panel { position: absolute; top: 100%; right: 0; left: 0; display: grid; padding: 8px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); color: var(--ink); box-shadow: 0 24px 48px rgb(0 0 0 / 18%); }
.mobile-menu-panel a { display: flex; align-items: center; min-height: 52px; padding: 0 16px; border-radius: 12px; font-size: 16px; text-decoration: none; }
.mobile-menu-panel a:hover { background: var(--light); }
.mobile-menu-panel :focus-visible { outline-color: var(--ink); }

/* Hero */
.hero { position: relative; isolation: isolate; display: grid; align-items: center; min-height: 100svh; overflow: hidden; padding: 96px 0 72px; background: var(--night); color: var(--paper); }
.silk-fallback { position: absolute; inset: 0; z-index: -3; background:
  radial-gradient(60% 34% at 18% 32%, rgb(201 205 210 / 16%), transparent 70%),
  radial-gradient(48% 30% at 84% 72%, rgb(201 205 210 / 12%), transparent 70%),
  linear-gradient(162deg, transparent 38%, rgb(224 227 231 / 9%) 49%, transparent 60%),
  var(--night); }
.silk { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s ease; }
html[data-silk="animated"] .silk, html[data-silk="still"] .silk, html[data-silk="lite"] .silk { opacity: 1; }
/* Lite background (phones by default): one rendered frame drifting slowly. Transform only, so the
   compositor animates it without per-frame JavaScript or repaint; it stops when paused or off-screen. */
html[data-silk="lite"] .silk { animation: silk-drift 16s ease-in-out infinite alternate; will-change: transform; }
/* A slow band of light slides across the folds: color-dodge brightens the bright folds and leaves the
   dark calm zone behind the text almost untouched. Above the silk, below the scrim; no box (and no
   animation) until a mode below gives it content. */
.hero::after { position: absolute; inset: -25% -70%; z-index: -2; pointer-events: none; background: linear-gradient(104deg, transparent 38%, rgb(150 156 164 / 24%) 45%, rgb(196 201 208 / 44%) 50%, rgb(150 156 164 / 24%) 55%, transparent 62%); mix-blend-mode: color-dodge; transform: translate3d(-42%, 0, 0); animation: silk-sheen 12s cubic-bezier(.45, .05, .35, 1) infinite; }
html[data-silk="lite"] .hero::after { content: ""; will-change: transform; }
/* Phones without WebGL: the static CSS layers get the same CSS-only motion. */
@media (max-width: 699px) and (prefers-reduced-motion: no-preference) {
  html[data-silk="fallback"] .silk-fallback { animation: silk-drift 16s ease-in-out infinite alternate; will-change: transform; }
  html[data-silk="fallback"] .hero::after { content: ""; will-change: transform; }
}
html.motion-paused .silk, html.silk-away .silk, html.motion-paused .silk-fallback, html.silk-away .silk-fallback,
html.motion-paused .hero::after, html.silk-away .hero::after { animation-play-state: paused; }
@keyframes silk-drift {
  0% { transform: scale(1.2) translate3d(-3.4%, -2.4%, 0) rotate(-2.2deg); }
  50% { transform: scale(1.26) translate3d(2.6%, 2%, 0) rotate(.8deg); }
  100% { transform: scale(1.2) translate3d(3.6%, -1.4%, 0) rotate(2.4deg); }
}
@keyframes silk-sheen {
  0% { transform: translate3d(-42%, 0, 0); }
  75%, 100% { transform: translate3d(42%, 0, 0); }
}
.hero-scrim { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 62% 44% at 50% 47%, rgb(6 6 7 / 62%), rgb(6 6 7 / 0) 74%), linear-gradient(to bottom, rgb(6 6 7 / 30%), transparent 22%, transparent 78%, var(--night)); }
.hero-inner { display: grid; justify-items: center; text-align: center; }
/* Small hero text carries its own backing, so it stays readable whatever fold of silk passes behind it. */
.hero-meta { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 28px; padding: 8px 14px 8px 12px; border: 1px solid rgb(255 255 255 / 10%); border-radius: 100px; background: rgb(6 6 7 / 58%); color: #B9BDC2; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--silver); box-shadow: 0 0 12px rgb(255 255 255 / 60%); }
/* 13.4vw keeps "Ваши правила." inside a 320px screen; a 50px floor clipped it there. */
.hero-title { font: 500 clamp(38px, 13.4vw, 156px)/.95 var(--serif); letter-spacing: -.045em; }
@media (max-width: 389px) {
  .hero-meta { gap: 8px; padding: 7px 12px 7px 10px; font-size: 10px; letter-spacing: .08em; }
}
.hero-line { display: block; white-space: nowrap; }
.hero-title em { font-style: italic; }
.hero-title .word { display: inline-block; padding: 0 .02em .08em; background: linear-gradient(180deg, #FFFFFF 18%, #DADDE1 62%, #A8ADB3 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-lede { max-width: 640px; margin-top: 28px; color: #CDD0D4; font-size: 18px; line-height: 1.55; text-shadow: 0 0 22px rgb(6 6 7 / 80%), 0 0 6px rgb(6 6 7 / 50%); }
.hero-assist { max-width: 520px; margin-top: 12px; color: #B4B8BD; font-size: 14px; text-shadow: 0 0 16px rgb(6 6 7 / 90%), 0 0 5px rgb(6 6 7 / 70%); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 24px; margin-top: 32px; }
.hero .text-link { color: #E6E8EB; text-shadow: 0 0 16px rgb(6 6 7 / 90%), 0 0 5px rgb(6 6 7 / 70%); }
.motion-toggle { position: absolute; right: var(--gutter); bottom: 20px; z-index: 2; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1px solid rgb(255 255 255 / 20%); border-radius: 100px; background: rgb(255 255 255 / 7%); color: #E6E8EB; font: 500 13px/1 var(--sans); cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.motion-toggle:hover { background: rgb(255 255 255 / 14%); }
.motion-toggle-icon { display: inline-block; width: 10px; height: 12px; border-inline: 3px solid currentColor; }
.motion-toggle[aria-pressed="true"] .motion-toggle-icon { width: 0; height: 0; border-block: 6px solid transparent; border-inline: 10px solid currentColor; border-right: 0; }

/* Entrance: words rise once, calmly. */
.js .hero .enter, .js .hero .word { opacity: 0; transform: translateY(16px); }
.js.is-ready .hero .enter, .js.is-ready .hero .word { opacity: 1; transform: none; transition: opacity 900ms var(--ease) calc(var(--i) * 90ms + 150ms), transform 1000ms var(--ease) calc(var(--i) * 90ms + 150ms); }

/* Section reveals */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 800ms var(--ease) calc(var(--d, 0) * 90ms), transform 800ms var(--ease) calc(var(--d, 0) * 90ms); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* Shared section typography */
.section { padding-block: 80px; }
.eyebrow { margin-bottom: 20px; color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.section-head { display: grid; gap: 24px; margin-bottom: 40px; }
.section-title { font-size: clamp(40px, 10.6vw, 64px); text-wrap: balance; }
.section-intro { max-width: 400px; color: var(--ink-soft); font-size: 16px; line-height: 1.55; }
.section-intro > p + p { margin-top: 16px; }
.principles { color: var(--muted); font-size: 11px !important; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.caption { max-width: 700px; margin-top: 18px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.caption strong { color: var(--ink); font-weight: 600; }
.demo-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border: 1px solid var(--ink); border-radius: 99px; background: var(--paper); color: var(--ink); font: 700 9.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }

/* Chapter seams: dark ↔ light without hard edges. */
.seam { height: 30vh; min-height: 180px; }
.seam-dawn { background: linear-gradient(to bottom, var(--night) 0%, #1C1D20 30%, #8D9095 62%, #E3E4E4 86%, var(--light) 100%); }
.seam-dusk { background: linear-gradient(to bottom, var(--light) 0%, #E3E4E4 14%, #8D9095 38%, #1C1D20 70%, var(--night) 100%); }

/* I · Journey */
/* overflow-x: clip, not hidden: it keeps the ::before glow (min(120%, 100vw))
   from widening the page when a classic scrollbar makes 100vw wider than the
   viewport, and unlike hidden it creates no scroll container, so the sticky
   .stage-sticky above 1000px keeps working. */
.journey { position: relative; overflow-x: clip; background: var(--night); color: var(--paper); padding-top: 72px; }
.journey .eyebrow { color: var(--silver-dim); }
.journey .section-intro { color: #BFC3C8; }
.journey-grid { display: grid; grid-template-areas: "head" "stage" "steps"; gap: 32px; }
.journey-copy { display: contents; }
.journey-head { grid-area: head; }
.journey-stage { grid-area: stage; }
.journey-steps { grid-area: steps; list-style: none; padding: 0; }
.jstep { display: none; }
.jstep.is-active { display: grid; gap: 8px; }
.jstep-num { font: 500 30px/1 var(--serif); color: var(--silver-dim); }
.jstep h3 { font: 500 28px/1.1 var(--serif); letter-spacing: -.03em; }
.jstep p { max-width: 460px; color: #BFC3C8; font-size: 16px; line-height: 1.55; }
.jstep-sentinel { display: block; height: 1px; }
.stage-sticky { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.stage-sticky::before { content: ""; position: absolute; top: 12%; left: 50%; z-index: 0; width: min(120%, 100vw); max-width: 620px; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgb(201 205 210 / 16%), transparent); pointer-events: none; }
.concept-tag { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 14px; border: 1px solid rgb(255 255 255 / 22%); border-radius: 99px; color: var(--silver); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.concept-tag b { color: var(--paper); font-weight: 700; white-space: nowrap; } /* "· демо-данные" never splits at the hyphen (320px) */
.concept-note { position: relative; z-index: 1; max-width: 420px; color: var(--silver-dim); font-size: 13px; line-height: 1.55; text-align: center; }
.step-controls { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: min(100%, 460px); }
.step-btn { display: grid; gap: 2px; justify-items: center; min-height: 56px; padding: 8px 4px; border: 1px solid rgb(255 255 255 / 18%); border-radius: 16px; background: rgb(255 255 255 / 4%); color: #E6E8EB; font: 600 13px/1.2 var(--sans); cursor: pointer; }
.step-btn span { color: var(--silver-dim); font-size: 10px; font-weight: 500; letter-spacing: .12em; }
.step-btn[aria-pressed="true"] { border-color: var(--paper); background: var(--paper); color: var(--ink); }
.step-btn[aria-pressed="true"] span { color: var(--muted); }
.demo-controls { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.demo-btn { min-height: 44px; padding: 0 16px; border: 1px solid rgb(255 255 255 / 22%); border-radius: 99px; background: transparent; color: #E6E8EB; font: 500 13px/1 var(--sans); cursor: pointer; }
.demo-btn:hover { background: rgb(255 255 255 / 8%); }

/* Concept device: CSS-drawn, 390×844 pt screen; 1pt = var(--pt) inside the screen. */
.device { position: relative; z-index: 1; width: min(86vw, 380px); aspect-ratio: 390 / 844; }
.device-frame { position: absolute; inset: 0; padding: 2.3%; border-radius: 15.5% / 7.2%; background: linear-gradient(150deg, #43464B 0%, #17181B 28%, #0A0B0C 62%, #2C2E32 100%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%), 0 0 0 1px rgb(0 0 0 / 70%), 0 48px 90px rgb(0 0 0 / 55%), 0 14px 28px rgb(0 0 0 / 35%); }
.device-frame::before, .device-frame::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(#55585D, #2A2C30); }
.device-frame::before { left: -3px; top: 21%; height: 7%; box-shadow: 0 9.5em 0 #3A3C40; }
.device-frame::after { right: -3px; top: 27%; height: 11%; }
.screen { --pt: 0.25641cqw; position: relative; height: 100%; overflow: hidden; border-radius: 13.6% / 6.3%; background: #F6F6F4; color: #111214; font-family: var(--sans); line-height: 1.25; container-type: inline-size; }
.screen .serif { font-family: var(--serif); font-weight: 600; letter-spacing: -.03em; }
.sb { position: absolute; inset: 0 0 auto; z-index: 6; display: flex; align-items: center; justify-content: space-between; height: calc(50 * var(--pt)); padding: calc(4 * var(--pt)) calc(30 * var(--pt)) 0 calc(34 * var(--pt)); font-size: calc(15 * var(--pt)); font-weight: 600; }
.island { position: absolute; top: calc(11 * var(--pt)); left: 50%; width: calc(118 * var(--pt)); height: calc(34 * var(--pt)); transform: translateX(-50%); border-radius: 99px; background: #030303; }
.sb-icons svg { display: block; width: calc(66 * var(--pt)); height: calc(12 * var(--pt)); }
.tg { position: absolute; top: calc(50 * var(--pt)); left: 0; right: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; height: calc(44 * var(--pt)); padding: 0 calc(14 * var(--pt)); }
.tg-pill { display: inline-flex; align-items: center; height: calc(30 * var(--pt)); padding: 0 calc(12 * var(--pt)); border-radius: 99px; background: rgb(17 18 20 / 8%); font-size: calc(13 * var(--pt)); font-weight: 600; }
.tg-title { font-size: calc(15 * var(--pt)); font-weight: 600; }
.tg-pill-icons { gap: calc(4 * var(--pt)); padding: 0 calc(9 * var(--pt)); }
.tg-pill-icons svg { width: calc(17 * var(--pt)); height: calc(17 * var(--pt)); }

.view { position: absolute; top: calc(94 * var(--pt)); right: 0; bottom: 0; left: 0; overflow: hidden; padding: calc(6 * var(--pt)) calc(20 * var(--pt)) 0; background: #F6F6F4; transition: transform 620ms var(--ease), opacity 620ms var(--ease), visibility 0s linear 620ms; }
.view[data-state="active"] { z-index: 2; transform: none; opacity: 1; visibility: visible; transition: transform 620ms var(--ease), opacity 620ms var(--ease), visibility 0s; }
.view[data-state="past"] { z-index: 1; transform: translateX(-22%); opacity: 0; visibility: hidden; }
.view[data-state="future"] { z-index: 3; transform: translateX(104%); opacity: 1; visibility: hidden; }
.view-product[data-state="future"] { transform: translateY(104%); }
.kicker { display: block; color: #6B6E73; font-size: calc(10 * var(--pt)); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.demo-mini { display: inline-flex; align-items: center; height: calc(18 * var(--pt)); padding: 0 calc(7 * var(--pt)); margin-left: calc(4 * var(--pt)); border: 1px solid #111214; border-radius: 99px; font-size: calc(9 * var(--pt)); font-style: normal; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; }
.chips { display: flex; gap: calc(6 * var(--pt)); margin-top: calc(14 * var(--pt)); white-space: nowrap; }
.chips span { display: inline-flex; align-items: center; height: calc(32 * var(--pt)); padding: 0 calc(14 * var(--pt)); border-radius: 99px; background: #EBEBE8; font-size: calc(12 * var(--pt)); font-weight: 600; }
.chips .is-on { background: #111214; color: #FFFFFF; }
.card { display: block; font-size: calc(13 * var(--pt)); }
.card-img { position: relative; display: grid; place-items: center; overflow: hidden; border: 1px solid #E8E8E5; border-radius: calc(18 * var(--pt)); background: #FFFFFF; aspect-ratio: 2047 / 2560; }
.card-img img { width: 100%; height: 100%; object-fit: contain; }
.card b { display: block; margin-top: calc(8 * var(--pt)); font-weight: 600; line-height: 1.25; }
.card small { display: block; margin-top: calc(3 * var(--pt)); color: #4C4F54; font-size: calc(12 * var(--pt)); }

/* Home */
.home-intro strong { display: block; margin-top: calc(6 * var(--pt)); font-size: calc(32 * var(--pt)); line-height: 1; }
.feature { display: block; overflow: hidden; margin-top: calc(14 * var(--pt)); border: 1px solid #E8E8E5; border-radius: calc(22 * var(--pt)); background: #FFFFFF; }
.feature-media img { width: 100%; height: auto; aspect-ratio: 2560 / 1599; object-fit: contain; }
.feature-copy { display: grid; gap: calc(4 * var(--pt)); padding: calc(4 * var(--pt)) calc(16 * var(--pt)) calc(14 * var(--pt)); }
.feature-copy strong { font-size: calc(20 * var(--pt)); line-height: 1.1; }
.feature-link { margin-top: calc(4 * var(--pt)); font-size: calc(12 * var(--pt)); font-weight: 700; }
.row-head { display: flex; align-items: baseline; justify-content: space-between; margin-top: calc(18 * var(--pt)); }
.row-head strong { font-size: calc(19 * var(--pt)); }
.row-head span { color: #6B6E73; font-size: calc(12 * var(--pt)); }
.card-row { display: grid; grid-template-columns: calc(88 * var(--pt)) 1fr; gap: calc(12 * var(--pt)); align-items: center; margin-top: calc(10 * var(--pt)); padding: calc(8 * var(--pt)); border-radius: calc(18 * var(--pt)); background: #FFFFFF; }
.card-row .card-img { border: 0; border-radius: calc(12 * var(--pt)); }
.card-row b { margin-top: 0; }

/* Catalog */
.cat-head { display: flex; align-items: baseline; justify-content: space-between; }
.cat-head strong { font-size: calc(32 * var(--pt)); }
.cat-head span { color: #6B6E73; font-size: calc(12 * var(--pt)); }
.search { display: flex; align-items: center; gap: calc(8 * var(--pt)); height: calc(44 * var(--pt)); margin-top: calc(12 * var(--pt)); padding: 0 calc(14 * var(--pt)); border-radius: calc(14 * var(--pt)); background: #EBEBE8; color: #6B6E73; font-size: calc(13 * var(--pt)); }
.search svg { width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); flex: none; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12 * var(--pt)); margin-top: calc(14 * var(--pt)); }
.fav { position: absolute; top: calc(8 * var(--pt)); right: calc(8 * var(--pt)); display: grid; place-items: center; width: calc(30 * var(--pt)); height: calc(30 * var(--pt)); border-radius: 50%; background: rgb(255 255 255 / 92%); box-shadow: 0 1px 4px rgb(0 0 0 / 10%); }
.fav::before { content: "♡"; font-size: calc(15 * var(--pt)); font-style: normal; line-height: 1; }
.fav.is-on::before { content: "♥"; color: #111214; }
.card-empty .card-img { border-style: dashed; border-color: #CFCFCB; background: transparent; color: #8A8D92; font-size: calc(26 * var(--pt)); }
.card-empty small { color: #6B6E73; }

/* Product */
.view-product { padding: 0; }
.pd-gallery { position: relative; height: calc(360 * var(--pt)); overflow: hidden; background: #FFFFFF; }
.pd-track { display: flex; width: 200%; height: 100%; transition: transform 700ms var(--ease); }
.pd-track img { width: 50%; height: 100%; object-fit: contain; }
.round { position: absolute; display: grid; place-items: center; width: calc(40 * var(--pt)); height: calc(40 * var(--pt)); border-radius: 50%; background: rgb(246 246 244 / 94%); font-size: calc(16 * var(--pt)); box-shadow: 0 1px 6px rgb(0 0 0 / 10%); }
.round-back { top: calc(10 * var(--pt)); left: calc(16 * var(--pt)); }
.round-fav { top: calc(10 * var(--pt)); right: calc(16 * var(--pt)); }
.pd-dots { position: absolute; bottom: calc(12 * var(--pt)); left: 50%; display: flex; gap: calc(6 * var(--pt)); transform: translateX(-50%); }
.pd-dots i { width: calc(6 * var(--pt)); height: calc(6 * var(--pt)); border-radius: 50%; background: #C9C9C5; transition: width 300ms var(--ease), background 300ms; }
.pd-dots i.is-on { width: calc(18 * var(--pt)); border-radius: 99px; background: #111214; }
.pd-concept { position: absolute; bottom: calc(10 * var(--pt)); left: calc(16 * var(--pt)); padding: calc(3 * var(--pt)) calc(8 * var(--pt)); border: 1px dashed #8A8D92; border-radius: 99px; color: #4C4F54; font-size: calc(9 * var(--pt)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pd-body { display: grid; justify-items: start; padding: calc(16 * var(--pt)) calc(20 * var(--pt)) 0; }
.pd-name { font-size: calc(24 * var(--pt)); line-height: 1.08; }
.pd-price { margin-top: calc(6 * var(--pt)); font-size: calc(16 * var(--pt)); font-weight: 600; }
.label { display: block; margin-top: calc(14 * var(--pt)); color: #6B6E73; font-size: calc(10 * var(--pt)); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.label b { color: #111214; }
.sizes { display: flex; gap: calc(8 * var(--pt)); margin-top: calc(6 * var(--pt)); }
.sizes i { display: grid; place-items: center; min-width: calc(44 * var(--pt)); height: calc(36 * var(--pt)); border: 1px solid #D9D9D5; border-radius: calc(12 * var(--pt)); background: #FFFFFF; font-size: calc(13 * var(--pt)); font-style: normal; font-weight: 600; }
.sizes .is-on { border-color: #111214; background: #111214; color: #FFFFFF; }
.pd-desc { margin-top: calc(6 * var(--pt)); color: #4C4F54; font-size: calc(13 * var(--pt)); line-height: 1.5; }
.pd-bar { position: absolute; right: 0; bottom: 0; left: 0; display: flex; gap: calc(10 * var(--pt)); padding: calc(12 * var(--pt)) calc(16 * var(--pt)) calc(26 * var(--pt)); border-top: 1px solid #E5E5E2; background: #F6F6F4; }
.qty { display: flex; align-items: center; gap: calc(12 * var(--pt)); height: calc(50 * var(--pt)); padding: 0 calc(14 * var(--pt)); border: 1px solid #D9D9D5; border-radius: calc(16 * var(--pt)); font-size: calc(15 * var(--pt)); }
.qty i { font-style: normal; color: #6B6E73; }
.btn-dark { position: relative; display: grid; flex: 1; place-items: center; height: calc(50 * var(--pt)); overflow: hidden; border-radius: calc(16 * var(--pt)); background: #111214; color: #FFFFFF; font-size: calc(15 * var(--pt)); font-weight: 600; }
.btn-label, .btn-done { grid-area: 1 / 1; transition: transform 400ms var(--ease), opacity 400ms; }
.btn-done { transform: translateY(120%); opacity: 0; }
.btn-dark.is-done .btn-label { transform: translateY(-120%); opacity: 0; }
.btn-dark.is-done .btn-done { transform: none; opacity: 1; }

/* Checkout */
.co-head { display: flex; align-items: center; gap: calc(12 * var(--pt)); }
.co-head .round { position: static; }
.co-head strong { display: block; font-size: calc(24 * var(--pt)); line-height: 1; }
.co-head small { display: block; margin-top: calc(3 * var(--pt)); color: #6B6E73; font-size: calc(11 * var(--pt)); }
.co-item { display: grid; grid-template-columns: calc(46 * var(--pt)) 1fr auto; gap: calc(10 * var(--pt)); align-items: center; margin-top: calc(6 * var(--pt)); padding: calc(8 * var(--pt)); border-radius: calc(16 * var(--pt)); background: #FFFFFF; font-size: calc(13 * var(--pt)); }
.co-thumb { display: block; overflow: hidden; border-radius: calc(10 * var(--pt)); background: #FFFFFF; }
.co-thumb img { width: 100%; aspect-ratio: 2047 / 2560; object-fit: contain; }
.co-item b { display: block; font-weight: 600; line-height: 1.25; }
.co-item small { color: #6B6E73; font-size: calc(11 * var(--pt)); }
.co-sum { white-space: nowrap; }
.input { display: flex; align-items: center; height: calc(44 * var(--pt)); margin-top: calc(6 * var(--pt)); padding: 0 calc(14 * var(--pt)); border: 1px solid #DEDEDA; border-radius: calc(12 * var(--pt)); background: #FFFFFF; color: #8A8D92; font-size: calc(14 * var(--pt)); }
.input.is-filled { color: #111214; }
.segment { display: grid; grid-template-columns: 1fr 1fr; gap: calc(4 * var(--pt)); margin-top: calc(6 * var(--pt)); padding: calc(4 * var(--pt)); border-radius: calc(14 * var(--pt)); background: #EBEBE8; }
.segment i { display: grid; place-items: center; height: calc(38 * var(--pt)); border-radius: calc(10 * var(--pt)); font-size: calc(13 * var(--pt)); font-style: normal; font-weight: 600; color: #4C4F54; }
.segment .is-on { background: #FFFFFF; color: #111214; box-shadow: 0 1px 4px rgb(0 0 0 / 8%); }
.co-note { display: block; margin-top: calc(12 * var(--pt)); color: #6B6E73; font-size: calc(12 * var(--pt)); }
.co-cta { position: absolute; right: calc(16 * var(--pt)); bottom: calc(26 * var(--pt)); left: calc(16 * var(--pt)); height: calc(52 * var(--pt)); }

/* Success state and merchant notification (demo) */
.view-success { position: absolute; top: calc(94 * var(--pt)); right: 0; bottom: 0; left: 0; z-index: 8; display: grid; align-content: center; justify-items: center; gap: calc(10 * var(--pt)); padding: 0 calc(34 * var(--pt)); background: #F6F6F4; text-align: center; opacity: 0; visibility: hidden; transform: scale(.98); transition: opacity 500ms var(--ease), transform 500ms var(--ease), visibility 0s linear 500ms; }
.device.is-success .view-success { opacity: 1; visibility: visible; transform: none; transition: opacity 500ms var(--ease), transform 500ms var(--ease), visibility 0s; }
.success-check { display: grid; place-items: center; width: calc(64 * var(--pt)); height: calc(64 * var(--pt)); margin-bottom: calc(6 * var(--pt)); border-radius: 50%; background: #111214; color: #FFFFFF; font-size: calc(28 * var(--pt)); }
.view-success strong { font-size: calc(26 * var(--pt)); }
.view-success > span:not(.success-check):not(.btn-light) { color: #4C4F54; font-size: calc(13 * var(--pt)); line-height: 1.5; }
.btn-light { display: grid; place-items: center; width: 100%; height: calc(48 * var(--pt)); margin-top: calc(12 * var(--pt)); border: 1px solid #111214; border-radius: calc(16 * var(--pt)); font-size: calc(14 * var(--pt)); font-weight: 600; }
.notify { position: absolute; z-index: 4; left: 50%; bottom: 18%; display: grid; gap: 8px; width: min(300px, 84%); padding: 14px 16px; border: 1px solid rgb(255 255 255 / 16%); border-radius: 18px; background: rgb(23 24 27 / 88%); color: #EDEEF0; font-size: 13px; line-height: 1.45; box-shadow: 0 24px 48px rgb(0 0 0 / 40%); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; transform: translate(-50%, 16px); transition: opacity 500ms var(--ease), transform 600ms var(--ease); pointer-events: none; }
.notify.is-on { opacity: 1; transform: translate(-50%, 0); }
.notify-head { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.notify-head small { margin-left: auto; color: var(--silver-dim); }
.notify-avatar { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--paper); color: var(--ink); font: 600 14px/1 var(--serif); font-style: normal; }
/* Phones and tablets: the notification sits in the empty lower part of the phone screen
   (same grid cell as the device), so it never covers the step buttons or demo controls. */
@media (max-width: 999px) {
  .stage-sticky { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 18px; }
  .concept-tag { grid-row: 1; }
  .device, .notify { grid-area: 2 / 1; }
  .notify { align-self: end; position: relative; left: auto; bottom: auto; margin-bottom: 7%; transform: translate(0, 16px); }
  .notify.is-on { transform: none; }
}

/* Tab bar (home and catalog only) */
.tabbar { position: absolute; right: calc(10 * var(--pt)); bottom: calc(24 * var(--pt)); left: calc(10 * var(--pt)); z-index: 5; display: grid; grid-template-columns: repeat(5, 1fr); min-height: calc(64 * var(--pt)); padding: calc(5 * var(--pt)); border: 1px solid rgb(17 18 20 / 8%); border-radius: calc(22 * var(--pt)); background: rgb(255 255 255 / 88%); box-shadow: 0 calc(10 * var(--pt)) calc(30 * var(--pt)) rgb(17 18 20 / 14%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform 520ms var(--ease), opacity 520ms; }
.tab { display: grid; place-items: center; align-content: center; gap: calc(3 * var(--pt)); border-radius: calc(17 * var(--pt)); color: #6B6E73; font-size: calc(9.5 * var(--pt)); font-weight: 600; }
.tab svg { width: calc(21 * var(--pt)); height: calc(21 * var(--pt)); }
.device[data-step="1"] [data-tab="1"], .device[data-step="2"] [data-tab="2"] { background: #111214; color: #FFFFFF; }
.device[data-step="3"] .tabbar, .device[data-step="4"] .tabbar { transform: translateY(160%); opacity: 0; }
.fly { position: absolute; z-index: 9; overflow: hidden; background: #FFFFFF; opacity: 0; pointer-events: none; }
.fly img { width: 100%; height: 100%; object-fit: contain; }
.tap { position: absolute; z-index: 10; width: calc(56 * var(--pt)); height: calc(56 * var(--pt)); border-radius: 50%; background: rgb(17 18 20 / 22%); opacity: 0; pointer-events: none; transform: translate(-50%, -50%); }

/* II · Cabinet (light) */
.cabinet, .how, #audience, .faq { background: var(--light); }
.cabinet-figure { position: relative; }
.stage-labels { margin-bottom: 14px; color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.stage-labels b { color: var(--ink); font-weight: 700; }
.win { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); box-shadow: 0 40px 80px rgb(17 18 20 / 10%), 0 8px 20px rgb(17 18 20 / 6%); }
.win-bar { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-bottom: 1px solid var(--line); background: #FAFAFA; }
.win-bar i { width: 9px; height: 9px; border-radius: 50%; background: #DADADA; }
.win-bar span { margin: 0 auto; padding: 3px 14px; border-radius: 7px; background: var(--light); color: var(--muted); font-size: 11px; transform: translateX(-20px); }
.cab { display: grid; grid-template-columns: 1fr; }
.cab-side { display: none; }
.cab-brand { display: flex; align-items: center; gap: 8px; padding: 0 8px; font: 600 24px/1 var(--serif); letter-spacing: -.045em; }
.cab-brand img { border-radius: 6px; }
.cab-nav { display: grid; gap: 4px; margin-top: 30px; font-size: 13px; }
.cab-nav > span { padding: 10px 12px; border-radius: 10px; color: rgb(255 255 255 / 62%); }
.cab-nav > .is-active { background: rgb(255 255 255 / 12%); color: var(--paper); }
.cab-main { min-width: 0; padding: 18px 18px 22px; }
.cab-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.cab-store { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.cab-store i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px rgb(0 0 0 / 7%); }
.cab-btn { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); font-size: 12px; font-weight: 600; white-space: nowrap; }
.cab-top .cab-btn { display: none; }
.cab-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.cab-head .cab-btn { display: none; }
.cab-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 5px; font: 400 34px/1 var(--cabinet-serif); letter-spacing: -.045em; }
.cab-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 99px; background: #EDEDED; color: var(--muted); font: 600 10.5px/1 var(--sans); letter-spacing: 0; }
.cab-sub { display: block; color: var(--muted); font-size: 12px; }
.cab-chips { display: flex; gap: 6px; margin-bottom: 14px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.cab-chips > span { display: inline-flex; flex: none; align-items: center; min-height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.cab-chips > .is-active { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.cab-card { container-type: inline-size; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.ord { display: grid; grid-template-columns: 1.15fr 1.15fr 1fr .95fr .95fr; gap: 12px; align-items: center; padding: 13px 16px; font-size: 13px; }
.ord + .ord { border-top: 1px solid var(--line); }
.ord-head { padding-block: 10px; background: var(--light); color: var(--muted); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ord b { display: block; font-weight: 700; white-space: nowrap; }
.ord small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.ord strong { white-space: nowrap; }
.ord .pill { justify-self: start; }
.js .cabinet-figure .ord:not(.ord-head) { opacity: 0; transform: translateY(8px); transition: opacity 600ms var(--ease) calc(var(--r) * 110ms + 300ms), transform 600ms var(--ease) calc(var(--r) * 110ms + 300ms); }
.js .cabinet-figure.is-in .ord { opacity: 1; transform: none; }
.cabinet-figure.is-in .ord.is-fresh { animation: fresh 2.2s ease 1.2s 1; }
@keyframes fresh { 0%, 100% { background: transparent; } 35% { background: #F1F1EE; } }
@container (max-width: 560px) { .ord { grid-template-columns: 1.2fr 1.2fr 1fr 1fr; } .ord > :nth-child(5) { display: none; } }
@container (max-width: 440px) { .ord { grid-template-columns: 1.3fr 1fr 1fr; } .ord > :nth-child(2) { display: none; } }
@container (max-width: 330px) { .ord { grid-template-columns: 1fr auto; } .ord > :nth-child(3) { display: none; } }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid transparent; border-radius: 99px; font-size: 11px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.pill::before { content: ""; width: 5px; height: 5px; flex: none; border-radius: 50%; background: currentColor; }
.pill-new { background: var(--ink); color: var(--paper); }
.pill-confirmed { border-color: var(--ink); color: var(--ink); }
.pill-done { background: #EDEDED; color: var(--ink); }
.pill-cancelled { background: var(--light); color: var(--muted); }
.pill-soft { padding-inline: 0; color: var(--muted); font-weight: 600; }
.specs { display: grid; margin-top: 56px; }
.specs > div { display: grid; gap: 6px; padding: 20px 0; border-top: 1px solid var(--line); }
.specs > div:last-child { border-bottom: 1px solid var(--line); }
.specs dt { color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.specs dd { font-size: 17px; line-height: 1.45; }

/* III · How it works */
.steps-wrap { position: relative; }
.steps-line { display: none; }
.steps { display: grid; list-style: none; padding: 0; }
.steps > li { display: grid; align-content: start; gap: 10px; padding: 24px 0 28px; border-top: 1px solid var(--ink); }
.step-num { font: 500 40px/1 var(--serif); letter-spacing: -.04em; }
.steps h3 { margin-top: 8px; font: 500 28px/1.1 var(--serif); letter-spacing: -.03em; }
.steps p { max-width: 380px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.step-foot { margin-top: 8px; color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.steps-note { display: grid; gap: 16px; margin-top: 32px; padding: 24px; border-radius: 20px; background: var(--paper); }
.steps-note p { max-width: 720px; color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
.steps-note strong { color: var(--ink); font-weight: 600; }
.steps-note .text-link { justify-self: start; }

/* IV–V · Night chapter: AI roadmap, beta, terms */
.night { background: var(--night); color: var(--paper); }
.night .eyebrow { color: var(--silver-dim); }
.night .section-intro { color: #BFC3C8; }
.roadmap-tag, .status-tag { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border: 1px dashed currentColor; border-radius: 99px; font-size: 10.5px !important; font-weight: 700; line-height: 1.2 !important; letter-spacing: .1em; text-transform: uppercase; }
.night .roadmap-tag, .night .status-tag { color: var(--paper); }
.ai-grid { display: grid; gap: 12px; list-style: none; padding: 0; }
.ai-grid > li { position: relative; display: flex; flex-direction: column; gap: 8px; overflow: hidden; padding: 22px; border: 1px dashed rgb(255 255 255 / 26%); border-radius: 20px; background: rgb(255 255 255 / 3%); }
/* Sheen band moved with transform (compositor): animating background-position repainted every frame. */
.ai-grid > li::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 250%; background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 6%) 50%, transparent 70%); transform: translateX(-90%); animation: shimmer 7s ease-in-out infinite; pointer-events: none; }
html.motion-paused .ai-grid > li::after { animation-play-state: paused; }
@keyframes shimmer { 0% { transform: translateX(-90%); } 60%, 100% { transform: translateX(60%); } }
.ai-index { color: var(--silver-dim); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.ai-grid h3 { margin-top: auto; padding-top: 12px; font: 500 24px/1.1 var(--serif); letter-spacing: -.03em; }
.ai-grid p { color: #BFC3C8; font-size: 15px; line-height: 1.55; }
.ai-rule { max-width: 760px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line-night); color: #BFC3C8; font-size: 17px; line-height: 1.55; }
.ai-rule strong { color: var(--paper); font-weight: 600; }
.beta { padding-top: 0; }
.beta-panel { display: grid; gap: 40px; padding: 36px 24px; border: 1px solid var(--line-night); border-radius: var(--radius); background: linear-gradient(160deg, #1A1B1E, #0B0C0D 60%); }
.beta-intro > p:not(.eyebrow) { max-width: 460px; margin-top: 20px; color: #BFC3C8; font-size: 16px; line-height: 1.55; }
.beta-intro .cta { margin-top: 28px; }
.beta-details > div { padding: 20px 0; border-top: 1px solid var(--line-night); }
.beta-details dt { margin-bottom: 8px; color: var(--silver-dim); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.beta-details dd { color: #BFC3C8; font-size: 15px; line-height: 1.55; }
.beta-details strong { display: block; margin-bottom: 6px; color: var(--paper); font: 500 22px/1.2 var(--serif); letter-spacing: -.02em; }
.pricing { display: grid; gap: 24px; margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line-night); }
.pricing-title { font-size: clamp(34px, 9vw, 56px); line-height: 1; }
.pricing-copy { display: grid; justify-items: start; gap: 14px; max-width: 520px; }
.pricing-copy > p { font-size: 17px; line-height: 1.55; }
.pricing-copy > .muted { color: var(--silver-dim); font-size: 14px; }
.night :focus-visible { outline-color: var(--paper); }

/* VI · Audience */
.audience { list-style: none; padding: 0; }
.audience > li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; padding: 20px 0; border-top: 1px solid var(--line); }
.audience > li:last-child { border-bottom: 1px solid var(--line); }
.audience-num { grid-row: span 2; padding-top: 8px; color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: .08em; }
.audience h3 { font-size: clamp(28px, 7.6vw, 44px); line-height: 1.05; letter-spacing: -.035em; }
.audience p { color: var(--muted); font-size: 16px; }

/* VII · FAQ */
.faq-grid { display: grid; gap: 32px; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; padding: 16px 0; font-size: 17px; font-weight: 600; line-height: 1.4; list-style: none; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; display: grid; flex: none; place-items: center; width: 32px; height: 32px; border: 1px solid #CFCFCB; border-radius: 50%; font-size: 18px; font-weight: 400; line-height: 1; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { max-width: 640px; padding: 0 48px 24px 0; color: var(--muted); font-size: 16px; line-height: 1.6; }
/* Chapters that end in a seam: no light strip under it at any breakpoint. */
.section.faq, .section.how { padding-bottom: 0; }
.how > .seam { margin-top: 96px; }
.faq::after { content: ""; display: block; height: 30vh; min-height: 180px; margin-top: 96px; background: linear-gradient(to bottom, var(--light) 0%, #E3E4E4 14%, #8D9095 38%, #1C1D20 70%, var(--night-2) 100%); }

/* Lead form: markup, ids and field names are the landing.js contract (/api/lead). */
.lead-section { position: relative; isolation: isolate; overflow: hidden; padding-block: 72px 96px; background: var(--night-2); color: var(--paper); }
.lead-glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 40% at 12% 30%, rgb(201 205 210 / 12%), transparent 70%), radial-gradient(40% 36% at 90% 80%, rgb(201 205 210 / 9%), transparent 70%), linear-gradient(160deg, transparent 40%, rgb(224 227 231 / 5%) 50%, transparent 60%); }
.lead-section .eyebrow { color: var(--silver-dim); }
.lead-inner { display: grid; gap: 40px; }
.lead-copy > p:not(.eyebrow) { max-width: 440px; margin-top: 20px; color: #C4C7CC; font-size: 17px; line-height: 1.55; }
.lead-copy .text-link { margin-top: 16px; color: var(--paper); }
.lead-section :focus-visible { outline-color: var(--paper); }
.lead-panel { padding: 24px 20px; border-radius: 24px; background: var(--paper); color: var(--ink); box-shadow: 0 40px 80px rgb(0 0 0 / 40%); }
.lead-panel :focus-visible { outline-color: var(--ink); }
.assisted-note { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; line-height: 1.55; }
.field-row { margin-bottom: 18px; }
.field-row label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; }
.field-row input { width: 100%; min-height: 54px; padding: 0 16px; border: 1px solid #CFCFCB; border-radius: 12px; background: var(--paper); color: var(--ink); font: 16px/1.4 var(--sans); }
.field-row input::placeholder { color: #767676; opacity: 1; }
.field-row input:focus-visible { border-color: var(--ink); outline-offset: 2px; border-radius: 12px; }
.field-hint { margin-top: 6px; color: var(--muted); font-size: 12px; }
.lead-panel .cta { width: 100%; margin-top: 6px; }
.form-note { margin-top: 14px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.form-status { margin-top: 12px; font-size: 14px; font-weight: 600; line-height: 1.5; }
.form-status:empty { margin: 0; }
.form-status:not(:empty) { padding: 12px 14px; border: 1px solid var(--ink); border-radius: 12px; }
.lead-success { padding: 12px 0; }
.success-mark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 22px; }
.lead-success h3 { margin-top: 20px; font: 500 36px/1.1 var(--serif); letter-spacing: -.03em; }
.lead-success p { margin-top: 12px; color: var(--muted); font-size: 16px; }
.lead-success .text-link { margin-top: 16px; }

/* Footer: a light row with the contacts; the founder sits on its lower edge, his legs hang
   into the dark part, and the logo stands alone below. */
.footer {
  --founder-above: 76px;                             /* the drawing above the edge: head to knees */
  --founder-h: calc(var(--founder-above) / .69799);  /* the edge is at 208/298 of the drawing */
  --founder-w: calc(var(--founder-h) * 152 / 298);
  --ledge-air: 22px;                                 /* light above the head */
  --founder-gap: 36px;                               /* dark between the feet and the logo box */
  background: var(--night); color: var(--paper);
}
.footer-ledge { background: var(--light); color: var(--ink); }
.footer-ledge-inner { position: relative; display: flex; align-items: flex-end; justify-content: flex-end; min-height: calc(var(--founder-above) + var(--ledge-air)); padding-left: calc(var(--founder-w) + 20px); }
.footer-meta { display: grid; justify-items: end; padding: 14px 0 6px; text-align: right; }
.footer-meta p { color: var(--muted); font-size: 14px; }
/* Contacts: four 44 px icon links; the outer ones overhang by 11 px so the glyphs line up with the text. */
.footer-social { display: flex; align-items: center; margin: 0 -11px 0 0; padding: 0; list-style: none; }
.footer-social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--ink); transition: color 200ms ease; }
.footer-social svg { display: block; width: 22px; height: 22px; }
.footer-founder { position: absolute; left: 0; top: calc(100% - var(--founder-above)); height: var(--founder-h); aspect-ratio: 152 / 298; pointer-events: none; }
.footer-founder svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* One drawing, two colourings cut exactly at the edge: ink on the light row, a negative on the dark. */
.founder-ink { --founder-line: var(--ink); --founder-paper: var(--paper); --founder-solid: var(--ink); --founder-counter: var(--paper); clip-path: inset(0 0 calc(100% - var(--founder-above)) 0); }
.founder-neg { --founder-line: #E6E8EB; --founder-paper: var(--night); --founder-solid: #E6E8EB; --founder-counter: var(--night); clip-path: inset(var(--founder-above) 0 0 0); }
.footer-top { display: grid; gap: 16px; padding: calc(var(--founder-h) - var(--founder-above) + var(--founder-gap)) 0 40px; }
/* Logo: grey at rest, white under the pointer or keyboard focus; colour only. */
.footer-brand { justify-self: start; font-size: clamp(64px, 20vw, 120px); line-height: .9; color: #8E9298; transition: color 220ms ease; }
@media (hover: hover) and (pointer: fine) {
  .footer-brand:hover { color: var(--paper); }
  .footer-social a:hover { color: var(--muted); }
}
.footer :focus-visible { outline-color: var(--paper); }
.footer-ledge :focus-visible { outline-color: var(--ink); }
.footer-ledge .footer-social a:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.footer .footer-brand:focus-visible { color: var(--paper); outline: 2px solid var(--paper); outline-offset: 6px; border-radius: 6px; }
.footer-bottom { padding: 20px 0 28px; border-top: 1px solid var(--line-night); color: var(--silver-dim); font-size: 12px; }
/* Narrow phones: the contact lines wrap, so they read left-aligned next to the founder. */
@media (max-width: 374px) {
  .footer-meta { justify-items: start; row-gap: 6px; text-align: left; }
  .footer-meta p { text-wrap: balance; }
  .footer-social { margin: 0 0 0 -11px; }
}

/* Floating CTA: phones only, hidden near the hero CTA and over [data-cta-avoid] blocks. */
.float-cta { position: fixed; z-index: 25; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 24px; border-radius: 100px; background: var(--paper); color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; box-shadow: 0 16px 36px rgb(0 0 0 / 30%), 0 0 0 1px rgb(0 0 0 / 8%); visibility: hidden; transform: translate(-50%, calc(100% + 32px)); transition: transform 320ms var(--ease), visibility 0s linear 320ms; }
.float-cta.is-visible { visibility: visible; transform: translate(-50%, 0); transition: transform 320ms var(--ease); }

@media (min-width: 700px) {
  :root { --gutter: 40px; }
  .topbar-inner { height: 76px; }
  .brand { font-size: 34px; }
  .header-actions .cta-compact { display: inline-flex; }
  .float-cta { display: none; }
  .hero-lede { font-size: 19px; }
  .motion-toggle { bottom: 28px; }
  .section { padding-block: 104px; }
  .section-title { font-size: clamp(52px, 7.4vw, 76px); }
  .cab { grid-template-columns: 150px 1fr; }
  .cab-side { display: flex; flex-direction: column; padding: 22px 12px; background: var(--ink); color: var(--paper); }
  .cab-main { padding: 22px 26px 26px; }
  .cab-top .cab-btn, .cab-head .cab-btn { display: inline-flex; }
  .specs { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .specs > div:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  .steps-note { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 40px; padding: 28px 32px; }
  .ai-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .audience > li { grid-template-columns: 64px minmax(0, 1.4fr) minmax(0, 1fr); align-items: baseline; gap: 24px; padding: 22px 0; }
  .audience-num { grid-row: auto; padding-top: 0; }
  .beta-panel { padding: 48px 40px; }
  .pricing { grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
  .faq-list summary { font-size: 18px; }
  .lead-panel { padding: 32px; }
  .footer { --founder-above: 86px; --ledge-air: 26px; --founder-gap: 40px; }
  .footer-ledge-inner { padding-left: calc(var(--founder-w) + 32px); }
  .footer-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; column-gap: 32px; padding: 16px 0 12px; }
  .footer-social { margin-left: -11px; }
  .footer-top { padding-bottom: 48px; }
  /* After the `.brand` size above, so the footer logo stays a signature on tablets. */
  .footer-brand { font-size: clamp(112px, 15vw, 140px); }
}

@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(3, 1fr); column-gap: 32px; }
  .steps > li { border-top-color: transparent; }
  .steps-line { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 2px; overflow: visible; }
  .steps-line path { fill: none; stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
  .js .steps-line path { stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease) .2s; }
  .js .steps-line.is-in path { stroke-dashoffset: 0; }
  .footer { --founder-above: 96px; --ledge-air: 28px; --founder-gap: 44px; }
  .footer-meta { padding-bottom: 16px; }
  .footer-brand { font-size: 160px; }
}

@media (min-width: 1000px) {
  /* Journey: the copy scrolls, the phone stays in view; scroll is never captured. */
  .journey { padding-top: 120px; }
  .journey-grid { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head stage" "steps stage"; column-gap: 56px; row-gap: 0; }
  .journey-steps { padding-bottom: 46vh; }
  .jstep, .jstep.is-active { display: flex; flex-direction: column; justify-content: center; gap: 12px; min-height: 76vh; opacity: .32; transition: opacity 500ms var(--ease); }
  .jstep.is-active { opacity: 1; }
  .jstep-num { font-size: 56px; }
  .jstep h3 { font-size: clamp(36px, 3.2vw, 46px); }
  .jstep p { font-size: 18px; }
  .jstep:last-child { min-height: 110vh; justify-content: flex-start; padding-top: 30vh; }
  .jstep-sentinel { margin-top: 30vh; }
  .journey-stage { align-self: stretch; }
  .stage-sticky { position: sticky; top: 96px; display: grid; grid-template-columns: clamp(176px, 16vw, 240px) auto; grid-template-areas: "tag device" "controls device" "notify device" "note device"; grid-template-rows: auto auto 1fr auto; justify-content: end; align-items: start; column-gap: 32px; row-gap: 18px; padding-bottom: 24px; }
  .stage-sticky::before { top: 50%; left: auto; right: 0; width: 600px; transform: translateY(-50%); }
  .concept-tag { grid-area: tag; justify-self: start; display: grid; gap: 2px; padding: 10px 14px; border-radius: 14px; line-height: 1.35; }
  .step-controls { grid-area: controls; grid-template-columns: 1fr; width: 100%; }
  .step-btn { grid-template-columns: 30px 1fr; justify-items: start; align-items: center; min-height: 48px; padding: 0 14px; text-align: left; }
  .concept-note { grid-area: note; align-self: end; text-align: left; }
  .device { grid-area: device; --h: min(780px, calc(100svh - 124px)); width: auto; height: var(--h); }
  .notify { position: relative; left: auto; bottom: auto; grid-area: notify; align-self: center; width: calc(100% + 64px); transform: translate(0, 16px); }
  .notify.is-on { transform: none; }
}

@media (min-width: 1100px) {
  :root { --gutter: 56px; }
  .topbar-inner { height: 80px; }
  .main-nav { display: flex; gap: 34px; }
  .login-link { display: inline-flex; padding: 0 12px; }
  .header-actions { gap: 12px; }
  .mobile-menu { display: none; }
  .hero-title { font-size: clamp(110px, 10.4vw, 160px); }
  .hero-lede { font-size: 20px; }
  .motion-toggle { right: var(--gutter); bottom: 32px; }
  .section { padding-block: 120px; }
  .section-head { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); align-items: end; gap: 64px; margin-bottom: 56px; }
  .section-intro { font-size: 17px; }
  .section-title { font-size: clamp(64px, 5.4vw, 84px); }
  .cab { grid-template-columns: 200px 1fr; }
  .cab-side { padding: 26px 14px; }
  .cab-main { padding: 26px 36px 30px; }
  .cab-title { font-size: 44px; }
  .ord { padding: 15px 20px; font-size: 14px; }
  .specs { margin-top: 72px; column-gap: 64px; }
  .specs > div { grid-template-columns: 200px 1fr; gap: 24px; padding: 26px 0; }
  .specs dd { font-size: 18px; }
  .steps { column-gap: 48px; }
  .step-num { font-size: 60px; }
  .steps h3 { font-size: 32px; }
  .steps-note { margin-top: 48px; padding: 32px 40px; }
  .ai-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .ai-grid > li { min-height: 230px; padding: 28px; }
  .ai-rule { margin-top: 48px; }
  .beta-panel { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 80px; padding: 72px; }
  .beta-details > div:first-child { padding-top: 0; border-top: 0; }
  .pricing { grid-template-columns: minmax(0, 1fr) minmax(300px, 520px); gap: 64px; margin-top: 64px; padding-top: 40px; }
  .audience > li { grid-template-columns: 96px minmax(0, 1.5fr) minmax(0, 1fr); padding: 26px 0; }
  .audience h3 { font-size: clamp(36px, 3vw, 44px); }
  .audience p { font-size: 17px; }
  .faq-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 80px; align-items: start; }
  .faq-head { position: sticky; top: 112px; }
  .faq-list summary { min-height: 72px; font-size: 19px; }
  .lead-section { padding-block: 104px 120px; }
  .lead-inner { grid-template-columns: minmax(0, 1fr) minmax(420px, 500px); gap: 80px; align-items: start; }
  .lead-panel { padding: 40px; }
  .footer-top { padding-bottom: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .hero .enter, .js .hero .word, .js .reveal, .js .cabinet-figure .ord { opacity: 1 !important; transform: none !important; }
  .ai-grid > li::after { display: none; }
  .cta:hover { transform: none; }
}

@media (forced-colors: active) {
  .hero-title .word { background: none; color: CanvasText; }
}