/* nucifera components. Every value comes from tokens.css; add new components here, not one-off styles. */

*, *::before, *::after { box-sizing: border-box; }
.app { background: var(--bg-0); color: var(--fg-1); font: var(--t-body); letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100%; position: relative; }
.app :where(h1, h2, h3, p, ul, ol, li, figure) { margin: 0; padding: 0; list-style: none; }
/* a night window resolves its own text colour; inherited colour would come from the light parent (dark on dark) */
.night { color: var(--fg-1); }
.pad { padding-inline: var(--pad-screen); }
.stack > * + * { margin-top: var(--s-6); }

/* type */
.t-display { font: var(--t-display); letter-spacing: var(--ls-display); }
.t-title { font: var(--t-title); letter-spacing: var(--ls-title); }
.t-headline { font: var(--t-headline); letter-spacing: var(--ls-headline); }
.t-body-lg { font: var(--t-body-lg); }
.t-small { font: var(--t-small); }
.fg-2 { color: var(--fg-2); } .fg-3 { color: var(--fg-3); } .accent { color: var(--accent); }
.t-time { font: var(--t-time); color: var(--fg-2); }   /* timestamps only; all other secondary text is .t-small */
.link { color: var(--link); text-decoration: var(--link-line); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.price, .counter { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lead { margin-top: var(--s-2); color: var(--fg-2); font: var(--t-body-lg); }

/* buttons: filled main action, quiet secondary, text-only ghost */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--tap);
  padding: 0 var(--s-5); border-radius: var(--r-md); border: 0; font: var(--t-label); cursor: pointer;
  transition: transform var(--dur-exit) var(--ease-out), background-color var(--dur-exit) var(--ease-color); }
.btn:active { transform: scale(var(--press-scale)); transition-duration: var(--dur-press); }
.btn:focus-visible, .chip:focus-visible, .row:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn--primary { background: var(--cta-bg); color: var(--cta-fg); min-height: var(--btn-h); width: 100%; }
.btn--secondary { background: var(--bg-2); color: var(--fg-1); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn--ghost { background: transparent; color: var(--link); padding: 0 var(--s-3);
  text-decoration: var(--link-line); text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* chips: filters and choices; selected = lighter, not more colourful */
.chips { display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; padding-inline: var(--pad-screen); }
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--r-pill);
  background: var(--bg-1); color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line-2); font: var(--t-label); font-size: 14px;
  position: relative; }
.chip::after { content: ""; position: absolute; inset: -4px 0; } /* 44px touch area */
.chip[aria-pressed="true"] { background: var(--bg-3); color: var(--fg-1); box-shadow: inset 0 0 0 1px var(--line-3); }
.chip { transition: background-color var(--dur-exit) var(--ease-color), color var(--dur-exit) var(--ease-color), transform var(--dur-exit) var(--ease-out); }
.chip:active { transform: scale(var(--press-scale)); transition-duration: var(--dur-press); }
/* action and status chips: wrap onto a second row instead of being cut at the edge; full 44px */
.chips--wrap { flex-wrap: wrap; overflow: visible; padding-inline: 0; }
.chips--wrap .chip { height: var(--tap); color: var(--fg-1); font-size: 15px; }
.chips--wrap .chip::after { display: none; }

/* fields */
.field { display: flex; align-items: center; gap: var(--s-3); min-height: var(--field-h); padding: 0 var(--s-4);
  border-radius: var(--r-md); background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-2); }
.field input, .field textarea { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--fg-1);
  font: var(--t-body-lg); font-size: 16px; }
.field input::placeholder { color: var(--fg-3); }
.field:focus-within { box-shadow: inset 0 0 0 1px var(--focus); }
.field--error { box-shadow: inset 0 0 0 1px var(--err); }
.field-msg { margin-top: 6px; font: var(--t-small); color: var(--err); }

/* query summary: the user's request as one readable block with an edit action */
.query { display: flex; align-items: center; gap: var(--s-3); min-height: 56px; padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
  border-radius: var(--r-md); background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-1), var(--shadow-card); }
.query__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.query__main { font: var(--t-label); }
.query__sub { font: var(--t-small); color: var(--fg-2); }

/* raised panel: at most one per screen, for the signature; .card--edge adds the top-left edge highlight (Linear corner light) */
.card { position: relative; border-radius: var(--r-lg); background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-1), var(--shadow-card); }
.card--edge::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(75% 55% at 0% 0%, var(--edge-hi), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }

/* hero: the one main object of the screen; media is full-bleed and keeps its clarity */
.hero { position: relative; border-radius: var(--r-xl); background: var(--bg-1); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line-1), var(--shadow-card); }
.hero__media { position: relative; aspect-ratio: 16 / 10; background: var(--bg-2); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: var(--photo-fx); }
.hero__media::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; pointer-events: none;
  background: linear-gradient(transparent, var(--bg-1)); }
[data-theme="light"] .hero:not(.night) .hero__media::after { display: none; } /* in light theme photos never fade into white */
.hero__body { padding: var(--s-4); }
.hero__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.hero__name, .hero__price { font: var(--t-title); letter-spacing: var(--ls-title); }

/* badge: opaque, no dot, one per media at most */
.badge { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: var(--r-pill);
  background: var(--bg-2); color: var(--fg-1); box-shadow: inset 0 0 0 1px var(--line-2); font: var(--t-small); font-weight: 500; }
.hero__media .badge { position: absolute; left: var(--s-3); top: var(--s-3); z-index: 1; }

/* list rows: flat, separated by hairlines */
.rows > .row + .row { border-top: 1px solid var(--line-1); }
.row { display: flex; align-items: center; gap: var(--s-3); min-height: 64px; padding: var(--s-3) 0; }
.row__thumb { flex: none; width: 88px; height: 64px; border-radius: var(--r-sm); overflow: hidden; background: var(--bg-2); }
.row__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.row__main { flex: 1; min-width: 0; }
.row__title { font: var(--t-label); font-size: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row__meta { margin-top: 2px; font: var(--t-small); color: var(--fg-2); }
.row__aside { flex: none; text-align: right; }
.row__value { font: var(--t-label); font-size: 16px; font-variant-numeric: tabular-nums; }
.row__note { font: var(--t-small); color: var(--fg-2); font-variant-numeric: tabular-nums; }

/* stat: a number as the object, label beside it */
.stat { display: flex; align-items: center; gap: var(--s-3); }
.stat__num { font: 600 52px/0.95 var(--font-sans); letter-spacing: -0.03em; }
.stat__unit { font: 600 24px/1 var(--font-sans); color: var(--fg-2); margin-left: 2px; }
.stat__label { font: var(--t-label); }
.stat__sub { font: var(--t-small); color: var(--fg-2); }

/* key-value list on the canvas (specs, summary, receipt): label left, value right, a hairline between rows.
   No box and no grid of cells: data cut into boxes is hard to read. */
.kv { margin: 0; }
.kv__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); min-height: var(--tap); padding: 10px 0; }
.kv__row + .kv__row { border-top: 1px solid var(--line-1); }
.kv__k { color: var(--fg-2); }
.kv__v { color: var(--fg-1); font-weight: var(--w-medium); text-align: right; }
@media (max-width: 430px) { .kv--stack .kv__row { display: block; } .kv--stack .kv__k { display: block; font: var(--t-small); } .kv--stack .kv__v { display: block; margin: 2px 0 0; text-align: left; } }
.kv__total { display: flex; justify-content: space-between; align-items: baseline; padding: var(--s-4) 0; border-top: 1px solid var(--line-2); }
.kv__total .price { font: 600 28px/1 var(--font-sans); letter-spacing: -0.02em; }

/* section head */
.section-head { display: flex; justify-content: space-between; align-items: baseline; margin: var(--s-8) 0 var(--s-2); }
.section-head h2 { font: var(--t-headline); letter-spacing: var(--ls-headline); }
.section-head .btn--ghost { min-height: var(--tap); margin: -12px -12px -12px 0; }

/* sticky glass bar (one of at most two glass details) */
.glassbar { position: sticky; top: 0; z-index: 2; background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-fx); backdrop-filter: var(--glass-fx);
  border-bottom: 1px solid var(--line-1); }

/* states */
.skeleton { border-radius: var(--r-sm); background: var(--bg-2); animation: pulse 1.8s var(--ease) infinite; }
@keyframes pulse { 0%, 100% { opacity: .4 } 50% { opacity: .7 } }
.empty { padding: var(--s-12) var(--pad-screen); text-align: center; color: var(--fg-2); }
.empty h2 { font: var(--t-headline); color: var(--fg-1); margin-bottom: var(--s-2); }
.status { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--r-pill); font: var(--t-small); font-weight: 500; }
.status--ok { color: var(--ok); background: var(--ok-tint); }
.status--warn { color: var(--warn); background: var(--warn-tint); }
.status--err { color: var(--err); background: var(--err-tint); }

/* landing only: one soft light behind the hero */
.wash { position: absolute; inset: 0 0 auto; height: 520px; background: var(--wash); pointer-events: none; }

/* ============================ motion recipes ============================
   Durations and curves are roles from tokens.css; behaviour that needs a script is in assets/motion.js.
   When and why to use each one: references/motion.md. */

/* the theme switches without transitions: add .nu-no-tx to <html> for two frames (motion.js setTheme does it) */
.nu-no-tx *, .nu-no-tx *::before, .nu-no-tx *::after { transition: none !important; }

/* press and highlight: the highlight appears at once and fades out; hover only where a real pointer exists */
.tap, .menu__item { transition: background-color var(--dur-exit) var(--ease-color); -webkit-tap-highlight-color: transparent; }
.tap:active, .menu__item:active { background: var(--bg-3); transition-duration: 0s; }
@media (hover: hover) and (pointer: fine) {
  .tap:hover, .menu__item:hover { background: var(--bg-2); transition-duration: 0s; }
  .btn--secondary:hover { background: var(--bg-3); transition-duration: 0s; }
}

/* menu and popover: grow from the trigger (set --origin to the trigger's side), leave faster */
.pop { position: absolute; z-index: 20; transform-origin: var(--origin, top left);
  opacity: 0; transform: scale(var(--scale-menu)); visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-exit) var(--ease-out), transform var(--dur-exit) var(--ease-out), visibility 0s linear var(--dur-exit); }
.pop.open { opacity: 1; transform: none; visibility: visible; pointer-events: auto;
  transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out), visibility 0s; }
.menu { min-width: 220px; padding: var(--s-1); border-radius: var(--r-md); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-float); }
[data-theme="light"] .menu { background: var(--bg-1); }
.menu__item { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); width: 100%; min-height: var(--tap);
  padding: 0 var(--s-3); border: 0; border-radius: var(--r-sm); background: none; color: var(--fg-1); font: var(--t-body); text-align: left; cursor: pointer; }

/* tooltip: put .tip inside a trigger with [data-tip]; the first one waits, neighbours open at once (motion.js) */
[data-tip] { position: relative; }
.tip { position: absolute; bottom: calc(100% + 6px); left: 50%; translate: -50% 0; z-index: 30; padding: 6px 10px; border-radius: var(--r-sm);
  background: var(--fg-1); color: var(--bg-0); font: var(--t-small); font-weight: 500; white-space: nowrap; pointer-events: none;
  transform-origin: bottom center; opacity: 0; transform: scale(var(--scale-tip));
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.tip.open { opacity: 1; transform: none; transition-duration: var(--dur-exit); }
.tip.instant { transition: none; }

/* dialog from the centre with a scrim; bottom sheet from below (motion.js moves it with a spring and lets it be dragged down) */
.scrim { position: fixed; inset: 0; z-index: 40; background: var(--scrim); opacity: 0; visibility: hidden;
  transition: opacity var(--dur-exit) var(--ease-out), visibility 0s linear var(--dur-exit); }
.scrim.open { opacity: 1; visibility: visible; transition: opacity var(--dur-enter) var(--ease-out), visibility 0s; }
.dialog { position: fixed; left: 50%; top: 50%; translate: -50% -50%; z-index: 50; width: min(360px, calc(100% - 32px)); padding: var(--s-5);
  border-radius: var(--r-lg); background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-float);
  opacity: 0; transform: scale(var(--scale-dialog)); visibility: hidden;
  transition: opacity var(--dur-exit) var(--ease-out), transform var(--dur-exit) var(--ease-out), visibility 0s linear var(--dur-exit); }
.dialog.open { opacity: 1; transform: none; visibility: visible;
  transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out), visibility 0s; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; max-height: 85svh; overflow: auto; overscroll-behavior: contain;
  border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--bg-1); box-shadow: inset 0 1px 0 var(--line-2), var(--shadow-float);
  transform: translateY(105%); visibility: hidden; }
.sheet.open { visibility: visible; }
.sheet__grab { padding: var(--s-3) var(--pad-screen) var(--s-2); touch-action: none; cursor: grab; }
.sheet__grab::before { content: ""; display: block; width: 40px; height: 5px; margin: 0 auto var(--s-3); border-radius: 3px; background: var(--line-3); }

/* selection: one pill or underline slides to the chosen option (set --i, the index, and --n, the count) */
.seg { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 2px; border-radius: var(--r-md);
  background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-2); --i: 0; --n: 2; }
[data-theme="light"] .seg { background: var(--bg-2); }
.seg__pill { position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc((100% - 4px) / var(--n)); border-radius: calc(var(--r-md) - 2px);
  background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--line-3); transform: translateX(calc(var(--i) * 100%));
  transition: transform var(--dur-enter) var(--ease-spring); }
[data-theme="light"] .seg__pill { background: var(--bg-1); box-shadow: var(--shadow-card), inset 0 0 0 1px var(--line-2); }
.seg__opt { position: relative; z-index: 1; min-height: var(--tap); padding: 0 var(--s-3); border: 0; background: none; color: var(--fg-2);
  font: var(--t-label); font-size: 15px; white-space: nowrap; cursor: pointer; transition: color var(--dur-exit) var(--ease-color); }
.seg__opt[aria-checked="true"] { color: var(--fg-1); }
.tabs { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-bottom: 1px solid var(--line-2); --i: 0; --n: 3; }
.tabs__tab { min-height: var(--tap); border: 0; background: none; color: var(--fg-2); font: var(--t-label); cursor: pointer;
  transition: color var(--dur-exit) var(--ease-color); }
.tabs__tab[aria-selected="true"] { color: var(--fg-1); }
.tabs__ink { position: absolute; left: 0; bottom: -1px; width: calc(100% / var(--n)); height: 2px; border-radius: 1px; background: var(--accent);
  transform: translateX(calc(var(--i) * 100%)); transition: transform var(--dur-enter) var(--ease-spring); }

/* toasts: newest in front, older ones behind and smaller (motion.js keeps --i); at the top, clear of a bottom main button */
.toasts { position: fixed; top: calc(var(--s-3) + env(safe-area-inset-top, 0px)); left: 50%; translate: -50% 0; z-index: 60;
  width: min(420px, calc(100% - 24px)); height: 0; }
.toast { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: var(--s-3); min-height: 52px;
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-float);
  font: var(--t-label); transform-origin: top center; z-index: calc(10 - var(--i, 0));
  transform: translateY(calc(var(--i, 0) * 10px)) scale(calc(1 - var(--i, 0) * .05)); opacity: calc(1 - var(--i, 0) * .3);
  transition: transform var(--dur-sheet) var(--ease-out), opacity var(--dur-enter) var(--ease-out); }
[data-theme="light"] .toast { background: var(--bg-1); }
.toast.in { transform: translateY(calc(-120% * var(--travel))); opacity: 0; }
.toast.out { transform: translateY(calc(var(--i, 0) * 10px - var(--move-md))); opacity: 0; transition-duration: var(--dur-exit); }

/* new content: wrap a row as .grow > .grow__in; it grows in and collapses out, the rows around it follow smoothly */
.grow { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--dur-enter) var(--ease-out), opacity var(--dur-exit) var(--ease-out); }
.grow.gone { grid-template-rows: 0fr; opacity: 0; }
.grow__in { min-height: 0; overflow: hidden; }

/* accordion: height through grid rows, no script */
.fold + .fold { border-top: 1px solid var(--line-1); }
.fold__head { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 52px; padding: 0; border: 0; background: none;
  color: var(--fg-1); font: var(--t-label); text-align: left; cursor: pointer; }
.fold__chev { flex: none; color: var(--fg-2); transition: transform var(--dur-enter) var(--ease-out); }
.fold.open .fold__chev { transform: rotate(90deg); }
.fold__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-enter) var(--ease-out); }
.fold.open .fold__body { grid-template-rows: 1fr; }
.fold__in { min-height: 0; overflow: hidden; }
.fold__content { padding-bottom: var(--s-3); opacity: 0; transition: opacity var(--dur-exit) var(--ease-color); }
.fold.open .fold__content { opacity: 1; transition-duration: var(--dur-enter); }

/* number roll (motion.js roll): changed digits move in the direction of the change */
.roll { font-variant-numeric: tabular-nums; white-space: nowrap; }
.roll .digit { position: relative; display: inline-block; }
.roll .ghost { position: absolute; left: 0; top: 0; }

/* success: draw the check (pathLength="1" on the circle and the path); inline loader inside a button */
.check-draw circle, .check-draw path { fill: none; stroke: var(--ok); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: nu-draw var(--dur-moment) var(--ease-out) forwards; }
.check-draw path { stroke-width: 2.6; animation-duration: calc(var(--dur-moment) * .7); animation-delay: calc(var(--dur-moment) * .4); }
@keyframes nu-draw { to { stroke-dashoffset: 0; } }
.spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: nu-spin .7s linear infinite; }
@keyframes nu-spin { to { transform: rotate(360deg); } }

/* landing pages only: hero lines rise once on load (set --i per line); the header hairline appears on scroll (motion.js hairline) */
.rise { animation: nu-rise var(--dur-hero) var(--ease-out) both; animation-delay: calc(var(--i, 0) * var(--stagger-hero)); }
@keyframes nu-rise { from { opacity: 0; transform: translateY(var(--move-md)); } }
.glassbar--quiet { border-bottom-color: transparent; transition: border-color var(--dur-exit) var(--ease-color); }
.glassbar--quiet.scrolled { border-bottom-color: var(--line-1); }

/* landing pages on phones: the main action follows the reader once the hero button has scrolled away (nuMotion.ctaBar) */
.cta-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  background: var(--bg-0); box-shadow: inset 0 1px 0 var(--line-1); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-exit) var(--ease-out), visibility 0s linear var(--dur-exit); }
.cta-bar.show { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--dur-exit) var(--ease-out), visibility 0s; }
@media (min-width: 641px) { .cta-bar { display: none; } }

/* websites only: a dock at the bottom and the place where a minimized window lands (nuMotion.genie adds .on) */
.dock { position: fixed; left: 50%; bottom: var(--s-4); translate: -50% 0; z-index: 40; display: flex; align-items: center; gap: 6px; padding: 6px;
  border-radius: var(--r-lg); background: var(--bg-1); box-shadow: inset 0 1px 0 var(--edge-top), inset 0 0 0 1px var(--line-2), var(--shadow-float); }
.dock__item { display: grid; place-items: center; min-width: var(--tap); height: var(--tap); padding: 0 var(--s-3); border: 0; border-radius: var(--r-md);
  background: var(--bg-2); color: var(--fg-2); font: var(--t-small); font-weight: 500; cursor: pointer; }
.dock__slot { min-width: 72px; height: var(--tap); padding: 0 var(--s-3); border: 0; border-radius: var(--r-md); background: var(--bg-3);
  box-shadow: inset 0 0 0 1px var(--line-3); color: var(--fg-1); font: var(--t-small); font-weight: 600; white-space: nowrap; cursor: pointer;
  opacity: 0; pointer-events: none; }
.dock__slot.on { opacity: 1; pointer-events: auto; }
.nu-genie { position: fixed; z-index: 70; pointer-events: none; }

/* moments (references/motion.md, section 5): rare, once, on an event; motion.js plays them and shows the end state on weak devices */
/* shared element: one named pair travels from the list into the detail (nuMotion.morph); the rest changes plainly */
::view-transition-group(nu-morph) { animation-duration: var(--dur-moment); animation-timing-function: var(--ease-out); }
:root.nu-back::view-transition-group(nu-morph) { animation-duration: calc(var(--dur-moment) * .75); }
::view-transition-old(nu-morph), ::view-transition-new(nu-morph) { animation: none; mix-blend-mode: normal; height: 100%; object-fit: cover; overflow: clip; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-exit); }
/* main button sheen: one pass of light when the button becomes available (nuMotion.sheen); never a loop, never a look */
.btn--sheen { position: relative; overflow: hidden; }
.btn--sheen::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 30%, var(--sheen) 50%, transparent 70%); }
.btn--sheen.shine::after { animation: nu-sheen var(--dur-sheen) var(--ease-out) 1; }
@keyframes nu-sheen { to { transform: translateX(120%); } }
/* a calm scope: recipes inside it (a landing's live product window) take the moment tempo */
.tempo-calm { --dur-enter: var(--dur-moment); }

/* materiality, still: .lit gives the one raised surface a 1px light top edge; .grain lays a fixed grain over a large dark gradient so it does not band */
.lit { box-shadow: inset 0 1px 0 var(--edge-top), inset 0 0 0 1px var(--line-1), var(--shadow-card); }
.grain { position: relative; isolation: isolate; }
.grain::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: var(--grain-alpha);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
  .grow, .fold__body { transition-property: opacity; }
  .seg__pill, .tabs__ink { transition-duration: 0s; }
}

/* ============================ global-scout: landing ============================
   Project components for the landing page (dark only). Values come from tokens.css roles only. */
.lp { overflow-x: clip; }
.nw { white-space: nowrap; }
a.btn { text-decoration: none; }
.lp .chip { border: 0; }
.lp-wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--pad-screen); }
@media (min-width: 960px) { .lp-wrap { padding-inline: 40px; } }

/* header: sticky, quiet hairline on scroll, no action */
.lp-top { position: sticky; top: 0; z-index: 20; }
.lp-header { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 56px; }
.lp-mark { font: var(--t-label); font-weight: var(--w-semibold); letter-spacing: -0.012em; color: var(--fg-1); text-decoration: none; }
.lp-nav { display: none; gap: var(--s-6); }
.lp-nav a { color: var(--fg-2); text-decoration: none; font: var(--t-small); min-height: var(--tap); display: inline-flex; align-items: center;
  transition: color var(--dur-exit) var(--ease-color); }
@media (hover: hover) and (pointer: fine) { .lp-nav a:hover { color: var(--fg-1); transition-duration: 0s; } }
.lp-header__note { font: var(--t-small); color: var(--fg-2); }
@media (min-width: 960px) { .lp-nav { display: flex; } .lp-header__note { display: none; } }

/* sections and type */
.lp-section { position: relative; padding-block: var(--s-12); }
.lp-section + .lp-section { border-top: 1px solid var(--line-1); }
@media (min-width: 960px) { .lp-section { padding-block: 88px; } }
.lp-h1 { font: 600 34px/1.15 var(--font-sans); letter-spacing: -0.025em; text-wrap: balance; }
.lp-h2 { font: 600 28px/1.15 var(--font-sans); letter-spacing: -0.022em; text-wrap: balance; }
.lp-h3 { font: var(--t-headline); letter-spacing: var(--ls-headline); }
.lp-lead { margin-top: var(--s-3); font: 400 17px/1.5 var(--font-sans); color: var(--fg-2); text-wrap: pretty; }
.lp-p { color: var(--fg-2); text-wrap: pretty; }
.lp-note { margin-top: var(--s-3); font: var(--t-small); color: var(--fg-2); }
.lp-intro { max-width: 760px; }
.lp-tag { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: var(--r-pill);
  background: var(--bg-2); color: var(--fg-2); font: var(--t-small); font-weight: 500; }
.lp-label { font: var(--t-headline); letter-spacing: var(--ls-headline); }
.lp-sub { font: var(--t-small); color: var(--fg-2); }
@media (min-width: 960px) {
  .lp-h1 { font-size: clamp(42px, 3.9vw, 56px); }
  .lp-h2 { font-size: 40px; }
  .lp-lead { font-size: 19px; }
}

/* grids: one column on phones */
.g2, .g3, .g4 { display: grid; gap: var(--s-8); grid-template-columns: minmax(0, 1fr); }   /* one column on phones that never grows past the screen (a one-line chat preview would push it) */
.lp-after-intro { margin-top: var(--s-8); }
@media (min-width: 720px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) {
  .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; }
  .g2--wide-r { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .g2--wide-l { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
  .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--s-6); }
  .sticky { position: sticky; top: 88px; align-self: start; }
}

/* plain lists with a hairline */
.plain { margin-top: var(--s-4); }
.plain li { padding: var(--s-3) 0; }
.plain li + li { border-top: 1px solid var(--line-1); }
.plain b { font-weight: var(--w-medium); display: block; }
.plain li > span { color: var(--fg-2); }

/* ---------- hero ---------- */
.lp-hero { padding-top: var(--s-6); }
.hero-grid { display: grid; gap: var(--s-8); grid-template-areas: "text" "phone" "notes"; }
.hero-text { grid-area: text; }
.hero-text .btn--primary { margin-top: var(--s-6); }
.hero-phone { grid-area: phone; }
.hero-notes { grid-area: notes; }
.hero-facts { grid-area: facts; }
.facts { display: grid; grid-template-columns: 1fr; }
.facts > div { padding: var(--s-3) 0; border-top: 1px solid var(--line-1); }
.facts b { display: block; font: 600 22px/1.25 var(--font-sans); letter-spacing: -0.015em; }
.facts > div > span { color: var(--fg-2); font: var(--t-small); }
.notes__title { font: var(--t-small); color: var(--fg-2); margin-bottom: var(--s-2); }
.notes li { padding: var(--s-3) 0; border-top: 1px solid var(--line-1); }
.notes b { display: block; font-weight: var(--w-medium); }
.notes li > span { color: var(--fg-2); font: var(--t-small); }
@media (min-width: 960px) {
  .lp-hero { padding-top: var(--s-12); }
  .hero-grid { grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: auto 1fr; grid-template-areas: "text phone" "notes phone"; column-gap: 64px; row-gap: var(--s-12); align-items: start; }
  .hero-notes .notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); }
  .hero-text .btn--primary { width: auto; padding-inline: var(--s-8); }
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-6); }
}
/* hero actions: the main button, and the demo video as the quiet second action */
.hero-actions { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
.hero-actions .btn { margin-top: 0; }
.i-play { width: 14px; height: 14px; fill: currentColor; flex: none; }
.btn--play { justify-self: start; padding-inline: 0; color: var(--fg-1); }
@media (min-width: 600px) { .hero-actions { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-6); } .hero-actions .btn--primary { width: auto; padding-inline: var(--s-8); } }
/* the demo video in a dialog: 9:16, as large as the screen allows; the kit's .dialog moves it */
.vdialog { width: min(calc(100vw - 32px), calc((100svh - 120px) * 9 / 16), 400px); padding: var(--s-2) var(--s-3) var(--s-3); }
.vdialog__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-left: var(--s-1); font: var(--t-small); color: var(--fg-2); }
.vdialog__close { flex: none; width: 44px; height: 44px; margin-right: -10px; display: grid; place-items: center; border: 0; border-radius: var(--r-md); background: transparent; color: var(--fg-1); cursor: pointer; }
.vdialog__close svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; fill: none; }
.vdialog__close:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.vdialog video, .vdialog .vframe { display: block; width: 100%; aspect-ratio: 9 / 16; margin-top: var(--s-1); border-radius: var(--r-md); background: var(--bg-0); object-fit: cover; }
@media (hover: hover) and (pointer: fine) { .vdialog__close:hover { background: var(--bg-2); } }
@media (min-width: 1240px) { .hero-grid { column-gap: var(--s-24); } }

/* ---------- iPhone with a Telegram chat (depicted, inert, approximate) ---------- */
.iphone { position: relative; width: min(100%, 360px); aspect-ratio: 380 / 780; margin-inline: auto; padding: 11px; border-radius: 58px;
  background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-3), inset 0 0 0 4px var(--bg-1), var(--shadow-float); }
@media (min-width: 960px) { .iphone { width: 380px; } }
.iphone__screen { position: relative; height: 100%; border-radius: 47px; overflow: hidden; background: var(--bg-0); display: flex; flex-direction: column; }
.iphone__island { position: absolute; z-index: 3; top: 11px; left: 50%; translate: -50% 0; width: 108px; height: 31px; border-radius: 16px; background: var(--bg-0);
  box-shadow: inset 0 0 0 1px var(--line-1); }
.iphone__status { display: flex; justify-content: space-between; align-items: center; height: 50px; padding: 12px 28px 0 34px; background: var(--bg-1);
  font: 600 15px/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.iphone__status svg { display: block; height: 12px; width: auto; fill: var(--fg-1); }
.iphone__icons { display: flex; gap: 6px; align-items: center; }
.iphone__home { position: absolute; z-index: 3; bottom: 8px; left: 50%; translate: -50% 0; width: 128px; height: 5px; border-radius: 3px; background: var(--fg-1); opacity: .8; }
.tgx-head { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; padding: 6px 12px 8px; background: var(--bg-1); border-bottom: 1px solid var(--line-1); }
.tgx-back { font: 400 16px/1 var(--font-sans); color: var(--fg-1); }
.tgx-title { text-align: center; }
.tgx-title b { display: block; font: 600 16px/1.2 var(--font-sans); }
.tgx-title span { font: var(--t-time); color: var(--fg-2); }
.tgx-ava { justify-self: end; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-3); font: 600 15px/1 var(--font-sans); }
.tgx-chat { position: relative; flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  gap: 6px; padding: 10px 10px 8px; background: var(--bg-0); }
.tgx-input { display: flex; align-items: center; gap: 10px; padding: 8px 12px 26px; background: var(--bg-1); border-top: 1px solid var(--line-1); }
.tgx-input span { flex: 1; height: 34px; border-radius: 17px; background: var(--bg-2); color: var(--fg-2); font: 400 15px/34px var(--font-sans); padding-left: 14px; }
.tgx-input svg { width: 22px; height: 22px; fill: none; stroke: var(--fg-2); stroke-width: 1.6; flex: none; }
.bub { max-width: 88%; border-radius: 16px 16px 16px 6px; background: var(--bg-2); overflow: hidden; font: 400 14px/1.4 var(--font-sans); }
.bub--me { align-self: flex-end; border-radius: 16px 16px 6px 16px; background: var(--bg-3); }
.bub__body { padding: 8px 10px 4px; }
.bub__body p + p { margin-top: 1px; }
.bub__body b { font-weight: var(--w-semibold); }
.bub__fwd { font: var(--t-time); color: var(--fg-2); margin-bottom: 2px; }
.bub__time { text-align: right; font: 400 12px/1 var(--font-sans); color: var(--fg-2); padding: 0 10px 7px; }
.bub img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.bub__keys { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; max-width: 88%; }
.bub__keys span { display: flex; align-items: center; justify-content: center; min-height: 34px; border-radius: 10px; background: var(--bg-2);
  font: 500 13px/1.2 var(--font-sans); cursor: default; user-select: none; }
.typing { display: inline-flex; gap: 4px; align-items: center; padding: 12px 14px; border-radius: 16px 16px 16px 6px; background: var(--bg-2); align-self: flex-start; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-2); animation: nu-dot 1s var(--ease-out) infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes nu-dot { 0%, 60%, 100% { opacity: .35; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .typing i { animation: none; opacity: .7; } }
/* a chat item grows in: height through grid rows, the rest of the chat moves up with it */
.tgx-item { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--dur-moment) var(--ease-out), opacity var(--dur-moment) var(--ease-out); }
.tgx-item > div { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 4px; }
.tgx-item.gone { grid-template-rows: 0fr; opacity: 0; }
@media (max-width: 430px) { .tgx-chat { justify-content: flex-start; } .tgx-item[data-early], .tgx-item[data-step="drop"] { display: none; } }   /* the lot, and only the lot, under the chat header */

/* ---------- photo slots for generated images (until the owner's files arrive) ---------- */
.slot { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background: var(--bg-1);
  box-shadow: inset 0 0 0 1px var(--line-2); text-align: center; padding: var(--s-6); }
.slot--wide { aspect-ratio: 16 / 9; }
.slot--tall { aspect-ratio: 9 / 16; }
.slot__in b { display: block; font: var(--t-label); }
.slot__in span { display: block; margin-top: 4px; color: var(--fg-2); font: var(--t-small); }
.slot img, .slot video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slot video { z-index: 0; } .slot .slot__badge { z-index: 2; }
.slot__badge { position: absolute; left: var(--s-3); top: var(--s-3); z-index: 1; }
.media-cap { margin-top: var(--s-2); font: var(--t-small); color: var(--fg-2); }

/* ---------- було / стало ---------- */
.was { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.was span { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: var(--r-sm); background: var(--bg-2);
  color: var(--fg-2); font: var(--t-small); cursor: default; }
.chats { margin-top: var(--s-4); border-radius: var(--r-lg); background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-1); overflow: hidden; }
.chats__row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); }
.chats__row + .chats__row { border-top: 1px solid var(--line-1); }
.chats__ava { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-3); font: var(--t-headline); }
.chats__main { flex: 1; min-width: 0; }
.chats__top { display: flex; justify-content: space-between; gap: var(--s-2); }
.chats__name { font: var(--t-label); }
.chats__msg { font: var(--t-small); color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chats__count { flex: none; min-width: 24px; height: 24px; padding: 0 7px; border-radius: var(--r-pill); background: var(--cta-bg); color: var(--cta-fg);
  font: 600 14px/24px var(--font-sans); text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- night: day strip and the morning summary over the video ---------- */
.day { margin-top: var(--s-6); }
.day svg { display: block; width: 100%; height: auto; overflow: visible; }
.day__bar { fill: var(--fg-1); }
.day__bar-t { fill: var(--bg-0); font: 600 14px var(--font-sans); }
.day__sleep { fill: none; stroke: var(--fg-2); stroke-width: 1.5; stroke-dasharray: 5 4; }
.day__sleep-t { fill: var(--fg-1); font: 500 14px var(--font-sans); }
.day__axis { stroke: var(--line-3); }
.day__tick { fill: var(--fg-2); font: 400 13px var(--font-sans); font-variant-numeric: tabular-nums; }
.day__mark { stroke: var(--fg-1); stroke-width: 1.5; }
.day__dot { fill: var(--fg-1); }
.over { position: relative; }
.over .bub { position: relative; margin: calc(-1 * var(--s-16)) var(--s-4) 0; max-width: none; box-shadow: var(--shadow-float); }
@media (min-width: 960px) { .over .bub { margin: calc(-1 * var(--s-24)) auto 0 calc(-1 * var(--s-8)); max-width: 360px; } }

/* ---------- selection: «Швидкий» brief ---------- */
.sel-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-top: var(--s-6); }
.sel-bar .seg { width: 100%; max-width: 420px; }
.sel-stats { color: var(--fg-2); font: var(--t-small); }
.sel { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
@media (min-width: 720px) { .sel { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lot { border-radius: var(--r-lg); background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-1); overflow: hidden; }
.lot img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.lot__body { padding: var(--s-3) var(--s-4) var(--s-4); }
.lot__title { font: var(--t-label); }
.lot__meta { margin-top: 2px; font: var(--t-small); color: var(--fg-2); }
.lot__price { margin-top: var(--s-3); font: 600 22px/1.2 var(--font-sans); letter-spacing: -0.015em; }
.lot__why { margin-top: var(--s-2); font: var(--t-small); color: var(--fg-2); }
.lot__rank { position: absolute; }
.lot--pos { position: relative; }
.lot--pos .badge { position: absolute; left: var(--s-3); top: var(--s-3); }
.drop { margin-top: var(--s-6); }
.drop .row__thumb { width: 72px; height: 54px; }
.drop .row__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.warn { color: var(--warn); }
.ok { color: var(--ok); }

/* ---------- the signature: live lot analysis ---------- */
.sig { padding: var(--s-4); }
.sig__top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.sig__lot { display: flex; gap: var(--s-3); align-items: center; }
.sig__lot img { flex: none; width: 96px; height: 72px; border-radius: var(--r-sm); object-fit: cover; }
.sig__allow { margin-top: var(--s-5); }
.sig__allow .chips--wrap { margin-top: var(--s-2); }
.chip__mark { font-weight: 600; display: inline-block; width: 1ch; }
.lp .chips--wrap .chip[aria-pressed="false"] { color: var(--fg-2); }
.lp .chips--wrap .chip[aria-pressed="false"] .chip__mark { opacity: 0; }
.sig__hint { margin-top: var(--s-2); font: var(--t-small); color: var(--fg-2); }
.sig__verdict { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line-1); }
.sig__reasons { margin-top: var(--s-3); }
.sig__reasons li { position: relative; padding: 6px 0 6px 18px; }
.sig__reasons li::before { content: ""; position: absolute; left: 2px; top: 16px; width: 6px; height: 6px; border-radius: 50%; background: var(--fg-2); }
.sig__reasons li.is-check::before { background: var(--warn); }
.sig__reasons li.is-bad::before { background: var(--err); }
.sig__money { margin-top: var(--s-4); }
.sig__money .kv__total { padding-bottom: 6px; }
.sig__max { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line-2); }
.sig__max-num { font: 600 34px/1.15 var(--font-sans); letter-spacing: -0.02em; margin-top: 2px; }
.howto li { padding: var(--s-3) 0; border-top: 1px solid var(--line-1); }
.howto b { display: block; font-weight: var(--w-medium); }
.howto li > span { color: var(--fg-2); }

/* ---------- how it works: four steps with a piece of the product each ---------- */
.step h3 { font: var(--t-headline); letter-spacing: var(--ls-headline); margin-top: var(--s-4); }
.step p { margin-top: 4px; color: var(--fg-2); }
.peek { min-height: 168px; padding: var(--s-4); border-radius: var(--r-lg); background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-1);
  display: flex; flex-direction: column; justify-content: center; gap: var(--s-2); }
.peek .chips--wrap { gap: 6px; }
.peek .chip { height: 34px; font-size: 14px; padding: 0 12px; cursor: default; }
.voice { display: flex; align-items: center; gap: var(--s-3); padding: 8px 12px; border-radius: 16px 16px 6px 16px; background: var(--bg-3); align-self: flex-end; }
.voice__play { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--fg-1); }
.voice__play svg { width: 12px; height: 12px; fill: var(--bg-0); margin-left: 2px; }
.voice__wave { display: flex; align-items: center; gap: 2px; height: 22px; }
.voice__wave i { width: 3px; border-radius: 2px; background: var(--fg-2); }
.peek__line { font: var(--t-small); color: var(--fg-2); }
.peek .kv__row { min-height: 0; padding: 6px 0; }
.peek .chats { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.peek .chats__row { padding-inline: 0; }
.peek .bub { background: none; border-radius: 0; }
.peek .bub__body { padding: 0; }

/* ---------- route: stages until arrival ---------- */
.route { margin-top: var(--s-2); }
.route li { position: relative; display: grid; grid-template-columns: 20px 1fr auto; gap: var(--s-3); padding: var(--s-3) 0; align-items: baseline; }
.route li::before { content: ""; position: absolute; left: 9px; top: 0; bottom: 0; width: 2px; background: var(--line-2); }
.route li:first-child::before { top: 50%; } .route li:last-child::before { bottom: 50%; }
.route__dot { position: relative; z-index: 1; width: 12px; height: 12px; margin: 0 4px; border-radius: 50%; background: var(--bg-0); box-shadow: inset 0 0 0 2px var(--fg-2); align-self: center; }
.route li.done .route__dot { background: var(--fg-1); box-shadow: none; }
.route li.now .route__dot { background: var(--warn); box-shadow: none; }
.route__name { font-weight: var(--w-medium); }
.route__note { display: block; font: var(--t-small); color: var(--fg-2); }
.route li.now .route__note { color: var(--warn); }
.route__date { font: var(--t-small); color: var(--fg-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- more inside: rows with a piece of the product ---------- */
.feat h3 { font: var(--t-headline); letter-spacing: var(--ls-headline); margin-top: var(--s-4); }
.feat p { margin-top: 4px; color: var(--fg-2); }
.meter { height: 8px; border-radius: 4px; background: var(--bg-3); overflow: hidden; }
.meter i { display: block; height: 100%; width: var(--v, 37%); background: var(--fg-1); border-radius: 4px; }
.mini { width: 100%; border-collapse: collapse; font: var(--t-small); }
.mini th { text-align: left; font-weight: 400; color: var(--fg-2); padding: 4px 0; }
.mini td { padding: 6px 0; border-top: 1px solid var(--line-1); font-variant-numeric: tabular-nums; }
.mini td + td, .mini th + th { text-align: right; }

/* ---------- client card ---------- */
.cc { overflow: hidden; }
.cc__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); }
.cc__logo { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--line-3);
  font: 600 14px/1 var(--font-sans); letter-spacing: .04em; color: var(--fg-2); }
.cc img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.cc__body { padding: var(--s-4); }
.cc__price { font: 600 28px/1.15 var(--font-sans); letter-spacing: -0.02em; margin-top: 4px; }

/* ---------- ev ---------- */
.ev-photo { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-lg); }

/* ---------- plans ---------- */
.plans { display: grid; gap: var(--s-6); margin-top: var(--s-8); }
@media (min-width: 960px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); } }
.plan { padding: var(--s-5); border-radius: var(--r-xl); background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-1); }
.plan--main { box-shadow: inset 0 0 0 1px var(--line-3); }
.plan__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.plan__for { margin-top: 4px; color: var(--fg-2); }
.plan__price { font: 600 44px/1.15 var(--font-sans); letter-spacing: -0.025em; }
.plan__once { font: var(--t-small); color: var(--fg-2); text-align: right; }
.plan__list { margin-top: var(--s-4); }
.plan__list li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; padding: 6px 0; }
.plan__list li::before { content: "✓"; color: var(--fg-1); font-weight: 600; }
.plan__list li.off { color: var(--fg-2); }
.plan__list li.off::before { content: "—"; color: var(--fg-2); }
.plan__anchor { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line-1); font: var(--t-label); }
.plan .btn { margin-top: var(--s-4); }

/* ---------- calculator ---------- */
.calc { padding: var(--s-4); }
.calc .seg { margin-bottom: var(--s-2); }
.rng { display: block; padding: var(--s-3) 0 0; }
.rng__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.rng__val { font: var(--t-label); font-variant-numeric: tabular-nums; }
.rng input { display: block; width: 100%; margin: var(--s-1) 0 0; height: var(--tap); background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.rng input::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(var(--fg-1), var(--fg-1)) 0 / var(--fill, 50%) 100% no-repeat, var(--bg-3); }
.rng input::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -12px; border-radius: 50%; background: var(--fg-1); box-shadow: var(--shadow-float); }
.rng input::-moz-range-track { height: 4px; border-radius: 2px; background: var(--bg-3); }
.rng input::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--fg-1); }
.rng input::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--fg-1); }
.rng input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.calc__out { margin-top: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--line-1); }
.calc__out p { margin-top: var(--s-2); color: var(--fg-2); }
.calc__sep { margin-top: var(--s-5); padding-top: var(--s-2); border-top: 1px solid var(--line-2); }
.lp .seg__opt { border: 0; }

/* ---------- work timeline ---------- */
.tl { display: grid; gap: 0; margin-top: var(--s-8); }
.tl li { position: relative; padding: 0 0 var(--s-5) 32px; }
.tl li::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: -8px; width: 2px; background: var(--line-2); }
.tl li:last-child::before { display: none; }
.tl li::after { content: ""; position: absolute; left: 0; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--fg-1); }
.tl b { display: block; font-weight: var(--w-medium); }
.tl li > span { color: var(--fg-2); font: var(--t-small); }
@media (min-width: 960px) {
  .tl { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--s-5); }
  .tl li { padding: 28px 0 0; }
  .tl li::before { left: 6px; right: calc(-1 * var(--s-5)); top: 9px; bottom: auto; width: auto; height: 2px; }
  .tl li::after { top: 4px; }
}

/* ---------- author ---------- */
.kokos { display: flex; gap: var(--s-4); align-items: center; padding: var(--s-4); border-radius: var(--r-lg); background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-1); }
.kokos img { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }

/* ---------- faq ---------- */
.lp .fold__head { min-height: 60px; font-size: 17px; }
.fold__content { color: var(--fg-2); max-width: 640px; }

/* ---------- final call ---------- */
.quiz__q + .quiz__q { margin-top: var(--s-5); }
.quiz__q .chips--wrap { margin-top: var(--s-2); }
.preview { padding: var(--s-3) var(--s-4); border-radius: var(--r-lg) var(--r-lg) var(--r-sm) var(--r-lg); background: var(--bg-2); }
.preview__label { font: var(--t-small); color: var(--fg-2); margin-bottom: 4px; }
.lp-final .btn--primary { margin-top: var(--s-4); }
.copied { margin-top: var(--s-2); font: var(--t-small); color: var(--ok); min-height: 20px; }
.lp-foot { padding-block: var(--s-8) calc(var(--s-12) + 72px); border-top: 1px solid var(--line-1); color: var(--fg-2); font: var(--t-small); }
.lp-foot p + p { margin-top: var(--s-2); }
@media (min-width: 641px) { .lp-foot { padding-bottom: var(--s-12); } }

/* sketch mode: ?only=<id> shows one block for the owner's pictures */
.only-mode .lp-section, .only-mode .lp-foot, .only-mode .lp-top, .only-mode .cta-bar { display: none; }
.only-mode .lp-section.is-only { display: block; border-top: 0; }
.only-mode .lp-top.is-only { display: block; position: static; }

/* ---------- hero background: the dotted world, a scan and arcs to Kyiv (hero-map.js) ---------- */
:root { --brand-device: #2a2934; --brand-device-edge: rgb(255 255 255 / .22); --brand-bezel: #000; }
.lp-hero { overflow: hidden; }
.lp-hero > .lp-wrap { position: relative; z-index: 1; }
.hero-map { position: absolute; left: 0; right: 0; top: 0; z-index: 0; pointer-events: none; }
.hero-map canvas { display: block; }
.hero-map__tags { position: absolute; inset: 0; }
.mtag { position: absolute; left: 0; top: 0; display: grid; gap: 1px; padding: 8px 10px; border-radius: var(--r-md); background: var(--bg-1);
  box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-float); font: var(--t-small); color: var(--fg-2); white-space: nowrap;
  opacity: 0; translate: 0 4px; transition: opacity var(--dur-exit) var(--ease-out), translate var(--dur-exit) var(--ease-out); }
.mtag b { font: 600 14px/1.3 var(--font-sans); color: var(--fg-1); }
.mtag.on { opacity: 1; translate: 0 0; transition-duration: var(--dur-enter); }

/* ---------- the iPhone: a solid titanium band, a black bezel, side buttons (depicted, inert) ---------- */
.iphone { background: var(--brand-bezel); padding: 12px;
  box-shadow: 0 0 0 1px var(--brand-device-edge), 0 0 0 4px var(--brand-device), 0 0 0 5px var(--line-2), var(--shadow-float); }
.iphone__screen { box-shadow: 0 0 0 1px rgb(255 255 255 / .06); }
.iphone__btn { position: absolute; z-index: -1; width: 4px; border-radius: 2px; background: var(--brand-device); box-shadow: inset 0 0 0 1px var(--line-3); }
.iphone__btn--action { left: -8px; top: 120px; height: 30px; }
.iphone__btn--up { left: -8px; top: 172px; height: 52px; }
.iphone__btn--down { left: -8px; top: 236px; height: 52px; }
.iphone__btn--power { right: -8px; top: 196px; height: 84px; }

/* ---------- demo block: the video card is the one raised surface; chapters open the video at their moment ---------- */
.demo-grid { display: grid; gap: var(--s-6); grid-template-areas: "text" "media" "chapters"; }
.demo-text { grid-area: text; } .demo-media { grid-area: media; } .chapters { grid-area: chapters; }
.vposter { position: relative; display: block; width: min(100%, 360px); aspect-ratio: 9 / 16; margin-inline: auto; padding: 0; border: 0; border-radius: var(--r-xl);
  overflow: hidden; background: var(--bg-1); box-shadow: inset 0 1px 0 var(--edge-top), 0 0 0 1px var(--line-2), var(--shadow-float); cursor: pointer; }
.vposter img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vposter__play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  background: var(--cta-bg); color: var(--cta-fg); box-shadow: var(--shadow-float); transition: transform var(--dur-exit) var(--ease-out); }
.vposter__play .i-play { width: 26px; height: 26px; margin-left: 4px; }
.vposter__len { position: absolute; left: var(--s-3); bottom: var(--s-3); padding: 4px 8px; border-radius: var(--r-sm); background: var(--bg-0);
  font: 600 14px/1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--fg-1); }
.vposter:active .vposter__play { transform: scale(var(--press-scale)); transition-duration: var(--dur-press); }
.vposter:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .vposter:hover .vposter__play { transform: scale(1.04); } }
.chapters { list-style: none; margin: 0; padding: 0; }
.chapters li + li { border-top: 1px solid var(--line-1); }
.chapter { display: grid; grid-template-columns: 52px 1fr; gap: var(--s-3); align-items: baseline; width: 100%; min-height: var(--tap); padding: 10px 0;
  border: 0; background: none; color: var(--fg-1); font: var(--t-body); text-align: left; cursor: pointer; }
.chapter__t { color: var(--fg-2); font: 500 14px/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.chapter { padding: var(--s-3) 0; }
.chapter__text { display: grid; gap: 4px; }
.chapter__text b { font-weight: var(--w-medium); }
.chapter__text > span { color: var(--fg-2); font: var(--t-small); }
.chapter:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
@media (hover: hover) and (pointer: fine) { .chapter:hover .chapter__t { color: var(--fg-1); } }
@media (min-width: 960px) {
  .demo-grid { grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: auto 1fr; grid-template-areas: "text media" "chapters media";
    column-gap: var(--s-24); row-gap: var(--s-6); align-items: start; }
  .demo-media .vposter { margin: 0; }
}

@media (max-width: 640px) { .cta-bar { display: grid; grid-template-columns: 1fr auto; gap: var(--s-2); } }   /* the kit hides the bar from 641px */
.cta-bar__demo { min-height: var(--btn-h); padding-inline: var(--s-4); }

/* ---------- questions: the side column holds the demo and what happens after you write; answers in paragraphs ---------- */
.fold__content p + p { margin-top: var(--s-2); }
.link--btn { padding: 0; border: 0; background: none; font: inherit; color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; }
.vmini { display: grid; grid-template-columns: 96px 1fr; gap: var(--s-4); align-items: center; width: 100%; margin-top: var(--s-8); padding: var(--s-3);
  border: 0; border-radius: var(--r-lg); background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-1); color: var(--fg-1); text-align: left; cursor: pointer; }
.vmini__img { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: var(--r-md); overflow: hidden; }
.vmini__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vmini__play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--cta-bg); }
.vmini__play svg { width: 13px; height: 13px; margin-left: 2px; fill: var(--cta-fg); }
.vmini__text { display: grid; gap: 4px; }
.vmini__text b { font: var(--t-headline); letter-spacing: var(--ls-headline); }
.vmini__text > span:not(.vmini__go) { color: var(--fg-2); font: var(--t-small); }
.vmini__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--fg-1); font: var(--t-label); }
.vmini:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .vmini:hover { background: var(--bg-2); } }
.nextsteps { list-style: none; margin: var(--s-8) 0 0; padding: 0; counter-reset: st; }
.nextsteps li { position: relative; padding: var(--s-3) 0 var(--s-3) 40px; border-top: 1px solid var(--line-1); counter-increment: st; }
.nextsteps li::before { content: counter(st); position: absolute; left: 0; top: var(--s-3); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-2); font: 600 14px/1 var(--font-sans); color: var(--fg-1); }
.nextsteps b { display: block; font-weight: var(--w-medium); }
.nextsteps span { color: var(--fg-2); font: var(--t-small); }
.hero-map__kyiv { position: absolute; left: 0; top: 0; font: var(--t-small); color: var(--fg-2); opacity: .8; }
.sel .lot[hidden] { display: none; }

/* ---------- rhythm: a few key blocks on a slightly lighter band (between the canvas and the raised cards) ---------- */
:root { --brand-band: #0c0b12; }
.lp-section.band { background: var(--brand-band); }
.lp-section.band + .lp-section, .lp-section + .lp-section.band { border-top-color: var(--line-2); }

/* ---------- echoes of the hero map (hero-map.js): still, quieter ---------- */
.map-echo canvas { display: block; }
.map-echo--route { position: relative; margin-top: var(--s-6); aspect-ratio: 116 / 30; }
.map-echo--world { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 45%, #000 40%, transparent 100%); mask-image: radial-gradient(ellipse 80% 75% at 50% 45%, #000 40%, transparent 100%); }
#final > .lp-wrap { position: relative; z-index: 1; }


/* phones: the header holds no links there, so it stays at the top of the page and scrolls away (a pinned glass bar under the
   Telegram browser's own address pill read as a stuck shade with the text showing through); desktop keeps it pinned with the links */
@media (max-width: 959px) { .lp-top { position: relative; background: var(--bg-0); -webkit-backdrop-filter: none; backdrop-filter: none; } }