/* LifeOS home · krea-3 art direction. One design, no theme switch.
   Colours: LifeOS UI Kit v6, Figma «Color Tokens» · Light (read 2026-10-17). Nothing outside :root may hold a raw colour.
   Rhythm 12/16/24/32 (D-427). Animate transform/opacity only. */

@font-face { font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonts/inter-cyrillic-opsz-normal.woff2) format("woff2-variations"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonts/inter-cyrillic-ext-opsz-normal.woff2) format("woff2-variations"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonts/inter-latin-ext-opsz-normal.woff2) format("woff2-variations"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonts/inter-latin-opsz-normal.woff2) format("woff2-variations"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Geist Mono Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonts/geist-mono-latin-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0000-00FF,U+2000-206F; }
@font-face { font-family: "Geist Mono Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonts/geist-mono-cyrillic-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0400-045F; }

:root {
  /* ---- LifeOS UI Kit v6 · Color Tokens · Light ---- */
  --bg-canvas: #f6f5f4;
  --bg-subtle: #ece9e7;
  --bg-elevated: #fbfaf9;
  --bg-inverse: #1d1b1a;
  --bg-scrim: #110f0e66;              /* #110f0e at 40% */
  --bg-canvas-a88: #f6f5f4e0;         /* bg/canvas-a88: bg/canvas at 88% */
  --surface-default: #ffffff;
  --surface-muted: #f6f5f4;
  --surface-sunken: #ece9e7;
  --surface-pressed: #e3e0df;
  --surface-inverse: #2e2c2b;
  --surface-media: #110f0e;
  --text-primary: #1e1c1b;
  --text-secondary: #4c4a49;
  --text-muted: #686564;
  --text-faint: #888584;
  --text-inverse: #f6f5f4;
  --text-inverse-muted: #8e8b8a;
  --text-on-accent: #ffffff;
  --accent-primary: #151312;
  --accent-hover: #2e2c2b;
  --accent-pressed: #3f3d3b;
  --accent-soft: #e5e2e1;
  --accent-secondary: #6e6b6a;
  --accent-strong: #12100f;
  --accent-on-inverse: #f1eeec;
  --accent-on-inverse-hover: #e0dddc;
  --border-subtle: #e0dddc;
  --border-strong: #888584;
  --border-control: #888584;
  --status-success: #00793b; --status-success-soft: #d3f3da;
  --status-info: #006bba;    --status-info-soft: #ddedff;
  --status-warning: #7d6700; --status-warning-soft: #f5ebc8;
  --status-danger: #c52e45;  --status-danger-soft: #ffe6e6;
  --tone-mint-surface: #d4f3d9; --tone-mint-ink: #007a35;
  --tone-sky-surface: #d6efff;  --tone-sky-ink: #00709d;
  --tone-sand-surface: #fee7ca; --tone-sand-ink: #905f00;
  --tone-rose-surface: #ffe5ea; --tone-rose-ink: #b63c62;
  --glass-fill: #00000066;            /* 40% */
  --glass-fill-hover: #00000085;      /* 52% */
  --glass-fill-pressed: #000000a3;    /* 64% */
  --glass-on: #ffffff;
  --shadow-v6-ring: #14142012;        /* 7% */
  --shadow-v6-key: #14142014;         /* 8% */
  --shadow-v6-ambient: #14142017;     /* 9% */
  --shadow-v6-deep: #14142021;        /* 13% */
  /* Brand */
  --logo-accent: #cb4b09;             /* the logo brackets only */
  --logo-on-accent: #ffffff;
  /* App v6 screen status-bar fills, sampled from the real screen images (part of the screenshots, not UI colours) */
  --app-sb-f7f6f9: #f7f6f9;
  --app-sb-f7f5f4: #f7f5f4;
  --app-sb-f7f7f7: #f7f7f7;

  /* ---- composites (tokens only) ---- */
  --elev-1: 0 0 0 1px var(--shadow-v6-ring), 0 1px 2px 0 var(--shadow-v6-key), 0 3px 8px -2px var(--shadow-v6-ambient);
  --elev-2: 0 0 0 1px var(--shadow-v6-ring), 0 1px 3px 0 var(--shadow-v6-key), 0 6px 16px -4px var(--shadow-v6-ambient), 0 16px 36px -10px var(--shadow-v6-deep);
  --elev-3: 0 0 0 1px var(--shadow-v6-ring), 0 2px 4px 0 var(--shadow-v6-key), 0 12px 28px -6px var(--shadow-v6-ambient), 0 32px 64px -16px var(--shadow-v6-deep);

  /* ---- page aliases ---- */
  --ink: var(--accent-primary);
  --ink-2: var(--text-muted);
  --ink-3: var(--text-faint);
  --paper: var(--surface-default);
  --card: var(--surface-muted);
  --card-2: var(--surface-sunken);
  --line: var(--border-subtle);
  --night: var(--bg-inverse);

  --r-s: 12px; --r-m: 16px; --r-l: 24px; --r-xl: 32px;
  --s1: 12px; --s2: 16px; --s3: 24px; --s4: 32px;
  --pad: 16px;                        /* kit side padding: 16 mobile · 24 tablet · 32 desktop */
  --sec: clamp(80px, 11vw, 168px);
  --ease: cubic-bezier(.22, .8, .24, 1);
  --sans: "Inter Variable", Inter, system-ui, sans-serif;
  --mono: "Geist Mono Variable", ui-monospace, monospace;
  /* fixed chrome heights, used to fit a block into one screen (capabilities) */
  --hd-h: 76px; --dock-h: 72px;
  --cta-ease: cubic-bezier(.23, 1, .32, 1);
  /* iOS status-bar glyphs (alpha masks, painted with currentColor): cellular, Wi-Fi, battery; Apple UI kit sizes in pt */
  --sb-cell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.2 12.2'%3E%3Crect x='0.00' y='8.20' width='3.2' height='4.00' rx='1'/%3E%3Crect x='5.33' y='5.80' width='3.2' height='6.40' rx='1'/%3E%3Crect x='10.67' y='3.40' width='3.2' height='8.80' rx='1'/%3E%3Crect x='16.00' y='0.00' width='3.2' height='12.20' rx='1'/%3E%3C/svg%3E");
  --sb-wifi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17.142 12.328'%3E%3Cpath d='M0.508 3.145 A12.050 12.050 0 0 1 16.634 3.145 A1.300 1.300 0 0 1 14.894 5.077 A9.450 9.450 0 0 0 2.248 5.077 A1.300 1.300 0 0 1 0.508 3.145Z M3.318 6.266 A7.850 7.850 0 0 1 13.824 6.266 A1.300 1.300 0 0 1 12.084 8.198 A5.250 5.250 0 0 0 5.058 8.198 A1.300 1.300 0 0 1 3.318 6.266Z M8.571 12.100 L6.095 9.350 A3.700 3.700 0 0 1 11.047 9.350Z' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sb-batt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27.328 13'%3E%3Cpath fill-opacity='.38' fill-rule='evenodd' d='M4.30 0.00h16.73a4.30 4.30 0 0 1 4.30 4.30v4.40a4.30 4.30 0 0 1 -4.30 4.30h-16.73a4.30 4.30 0 0 1 -4.30 -4.30v-4.40a4.30 4.30 0 0 1 4.30 -4.30zM4.30 1.00h16.73a3.30 3.30 0 0 1 3.30 3.30v4.40a3.30 3.30 0 0 1 -3.30 3.30h-16.73a3.30 3.30 0 0 1 -3.30 -3.30v-4.40a3.30 3.30 0 0 1 3.30 -3.30z'/%3E%3Cpath d='M4.60 2.20h16.10a2.40 2.40 0 0 1 2.40 2.40v3.80a2.40 2.40 0 0 1 -2.40 2.40h-16.10a2.40 2.40 0 0 1 -2.40 -2.40v-3.80a2.40 2.40 0 0 1 2.40 -2.40z'/%3E%3Cpath fill-opacity='.4' d='M26.1 4.4h.2a1.03 1.03 0 0 1 1.03 1.03v2.14a1.03 1.03 0 0 1-1.03 1.03h-.2z'/%3E%3C/svg%3E");
}
@media (max-width: 759px) { :root { --hd-h: 64px; --dock-h: 64px; } }
@media (min-width: 760px) { :root { --pad: 24px; } }
@media (min-width: 1440px) { :root { --pad: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
body { margin: 0; background: var(--paper); color: var(--text-primary); font: 400 16px/1.5 var(--sans); font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.nw { white-space: nowrap; }
.mono { font-family: var(--mono); font-feature-settings: normal; letter-spacing: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* full width: the layout reaches the viewport edges minus the kit side padding; only text keeps a measure */
.wrap { width: 100%; padding: 0 var(--pad); }
.sec { padding: var(--sec) 0 0; }
:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 3px; border-radius: 8px; }
.on-dark :focus-visible, .close :focus-visible, body.hd-dark .hd > :focus-visible { outline-color: var(--accent-on-inverse); }

/* ---------- type ---------- */
.h1 { font-weight: 500; font-size: clamp(40px, 4.6vw, 68px); line-height: .98; letter-spacing: -.035em; }
.h2 { font-weight: 500; font-size: clamp(38px, 5vw, 76px); line-height: .98; letter-spacing: -.035em; text-wrap: balance; max-width: 16em; }
.h2--mega { font-size: clamp(48px, 7.4vw, 112px); line-height: .94; }
.center .h2 { margin-left: auto; margin-right: auto; }
.h2 .dim, .h1 .dim { color: var(--text-muted); }
.on-dark .h2 .dim { color: var(--text-inverse-muted); }
.lead { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.45; letter-spacing: -.01em; color: var(--text-muted); max-width: 36em; text-wrap: pretty; }
.on-dark .lead { color: var(--text-inverse-muted); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--card); font-size: 14px; font-weight: 500; letter-spacing: -.01em; }
.eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }
.head { display: grid; gap: var(--s3); }
.head--split { grid-template-columns: 1fr; align-items: end; }
@media (min-width: 960px) { .head--split { grid-template-columns: 1.2fr 1fr; gap: var(--s4); } }

/* ---------- buttons (krea pills, 52 px) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 26px; border-radius: 999px; font-size: 16px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; transition: transform .25s var(--ease), background-color .25s, color .25s, opacity .3s; }
.btn .ico { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.btn:hover .ico { transform: translateX(3px); }
.btn:active { transform: scale(.97); }
.btn--ink { background: var(--accent-primary); color: var(--text-on-accent); }
.btn--ink:hover { background: var(--accent-hover); }
.btn--ink:active { background: var(--accent-pressed); }
.btn--inv { background: var(--accent-on-inverse); color: var(--accent-primary); }
.btn--inv:hover { background: var(--accent-on-inverse-hover); }
.btn--glass { background: var(--glass-fill); color: var(--glass-on); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.btn--glass:hover { background: var(--glass-fill-hover); }
.btn--glass:active { background: var(--glass-fill-pressed); }
.btn--line { background: var(--surface-muted); color: var(--text-primary); }
.btn--line:hover { background: var(--surface-sunken); }
.btn--line:active { background: var(--surface-pressed); }
.btn--sm { height: 44px; padding: 0 20px; font-size: 15px; }
.link { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.link .ico { width: 18px; height: 18px; }
.ctas { display: flex; flex-wrap: wrap; gap: var(--s1); }

/* ---------- reveal (IO adds .in) ---------- */
.rv { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.rv.in { opacity: 1; transform: none; }
.no-js .rv { opacity: 1; transform: none; }

/* ---------- header: bare logo; thin canvas backing once scrolled (off over dark blocks) ---------- */
.hd { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 16px var(--pad); pointer-events: none; }
.hd::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bg-canvas-a88); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: none; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s, background-color .3s; }
body.scrolled .hd::before { opacity: 1; visibility: visible; transition: opacity .3s, background-color .3s; }
body.scrolled.hd-dark .hd::before { background: var(--bg-scrim); }
.hd > * { pointer-events: auto; }
.hd-brand { display: inline-flex; align-items: center; height: 44px; color: var(--text-primary); transition: color .3s; }
body.hd-dark .hd-brand { color: var(--text-inverse); }
.hd-logo { width: 114px; height: 24px; display: block; overflow: visible; } /* canonical wordmark geometry (assets/logo-wordmark-currentColor.svg), cap height ~ CTA label x 1.4 */
.hd-nav { display: none; }
@media (min-width: 1100px) {
  .hd-nav { display: flex; position: absolute; left: 50%; top: 16px; height: 44px; align-items: center; gap: 2px; transform: translateX(-50%); }
  .hd-nav a { height: 36px; display: flex; align-items: center; padding: 0 14px; border-radius: 999px; font-size: 15px; font-weight: 500; letter-spacing: -.01em; color: var(--text-secondary); transition: color .25s, background-color .25s; }
  .hd-nav a:hover { color: var(--text-primary); background: var(--surface-muted); }
  body.hd-dark .hd-nav a { color: var(--text-inverse); }
  body.hd-dark .hd-nav a:hover { color: var(--text-inverse); background: var(--glass-fill); }
}
@media (max-width: 759px) { .hd { padding-top: 10px; padding-bottom: 10px; } }

/* ---------- header menu below 1100 px (review 2026-10-18d): a 44 px button opens a sheet with the same 3 links + CTA.
   Sheet and scrim animate opacity/transform only; krea.js handles Esc, outside tap, link tap and focus. ---------- */
.hd { gap: 8px; }
.hd-brand { margin-right: auto; }
.hd-menu { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--surface-sunken); color: var(--text-primary);
  transition: background-color .25s, color .25s, transform 120ms var(--cta-ease); -webkit-tap-highlight-color: transparent; }
.hd-menu:hover { background: color-mix(in srgb, var(--surface-sunken) 92%, #000); }
.hd-menu:active { transform: scale(.94); }
.hd-menu .ico { width: 22px; height: 22px; }
.hd-menu .ico path { transform-origin: 12px 12px; transition: transform .35s var(--cta-ease); }
.hd-menu[aria-expanded="true"] .hd-menu-a { transform: rotate(45deg) translateY(3px); }
.hd-menu[aria-expanded="true"] .hd-menu-b { transform: rotate(-45deg) translateY(-3px); }
body.hd-dark:not(.menu-open) .hd-menu { background: var(--glass-fill); color: var(--glass-on); }
body.hd-dark:not(.menu-open) .hd-menu:hover { background: var(--glass-fill-hover); }
/* over dark photos the black glass vanished (review header-menu-2): the kit's light glass, fill only (D-424: fills, never strokes) */
body.scrolled.hd-dark:not(.menu-open) .hd-menu { background: #ffffff33; }
body.scrolled.hd-dark:not(.menu-open) .hd-menu:hover { background: #ffffff47; }
/* scrolled, the header band is canvas-a88, the same tone as surface-muted: one kit tone darker keeps the circle visible, no ring (review 2026-10-18 rev5) */
body.scrolled:not(.hd-dark):not(.menu-open) .hd-menu { background: var(--surface-sunken); }
body.scrolled:not(.hd-dark):not(.menu-open) .hd-menu:hover { background: color-mix(in srgb, var(--surface-sunken) 92%, #000); }
.hd::after { content: ""; position: fixed; inset: 0; z-index: -2; background: var(--bg-scrim); opacity: 0; pointer-events: none; transition: opacity .3s; }
body.menu-open .hd::after { opacity: 1; pointer-events: auto; }
body.menu-open .hd::before { opacity: 1; visibility: visible; background: var(--surface-default); transition: opacity .3s; }
body.menu-open.hd-dark .hd-brand { color: var(--text-primary); }
body.menu-open .hd > .cta { opacity: 0; pointer-events: none; }
.hd-sheet { position: fixed; z-index: -1; top: var(--hd-h); left: var(--pad); right: var(--pad); display: grid; gap: var(--s1); padding: var(--s1);
  max-height: calc(100svh - var(--hd-h) - var(--s2)); overflow-y: auto; overscroll-behavior: contain; border-radius: var(--r-l); background: var(--surface-default); box-shadow: var(--elev-3);
  opacity: 0; transform: translate3d(0, -8px, 0) scale(.98); transform-origin: 100% 0; transition: opacity .25s var(--cta-ease), transform .35s var(--cta-ease); }
.hd-sheet[hidden] { display: none; }
.hd-sheet.is-on { opacity: 1; transform: none; }
.hd-sheet-nav { display: grid; gap: 2px; }
.hd-sheet-nav a { display: flex; align-items: center; min-height: 52px; padding: 0 var(--s2); border-radius: var(--r-m); font-size: 20px; font-weight: 500; letter-spacing: -.02em; color: var(--text-primary); transition: background-color .2s; }
.hd-sheet-nav a:hover, .hd-sheet-nav a[aria-current="page"] { background: var(--surface-muted); }
.hd-sheet .cta { width: 100%; }
html.menu-lock, html.menu-lock body { overflow: hidden; }
body.menu-open .dock { transform: translate3d(-50%, 140%, 0); }
@media (min-width: 1100px) { .hd-menu, .hd-sheet, .hd::after { display: none; } }

/* ---------- phone: iPhone 17 Pro (2026-10-18c, Nick: «панель уведомлений норм сделать и вырез под камеру по последним моделям»)
   Screen 402 x 874 pt; --u = 1 pt. Thin even black bezel (1.2 % of the width) inside a light metal edge (gradient of kit
   greys), side buttons as small bumps (action + volume left, side button + Camera Control right).
   Dynamic Island 125 x 37 pt at top 11 pt. Status bar 62 pt: «9:41» Semibold 17 pt centred in the left ear and on the
   island's centre line; cellular, Wi-Fi, battery (Apple UI kit glyphs, alpha masks) centred in the right ear.
   The App v6 screen exports have no status bar of their own: they start under the 62 pt bar; the 30 pt left at the
   bottom holds the home indicator. Markup unchanged (scripts/build.py phone()). ---------- */
.phone { --w: 300px; --pf: max(1px, calc(var(--w) * .006)); --pb: calc(var(--w) * .012); --u: calc((var(--w) - 2 * var(--pf) - 2 * var(--pb)) / 402);
  --pbtn: max(1.5px, calc(var(--w) * .0075)); --pbg: linear-gradient(90deg, var(--accent-secondary), var(--text-faint));
  position: relative; width: var(--w); padding: var(--pb); border: var(--pf) solid transparent; border-radius: calc(var(--u) * 62 + var(--pb) + var(--pf));
  background: linear-gradient(var(--surface-media), var(--surface-media)) padding-box,
              linear-gradient(150deg, var(--bg-subtle) 0%, var(--text-faint) 24%, var(--border-subtle) 48%, var(--accent-secondary) 74%, var(--bg-subtle) 100%) border-box;
  box-shadow: 0 40px 80px -30px var(--shadow-v6-deep), 0 12px 30px -12px var(--shadow-v6-deep), 0 2px 6px 0 var(--shadow-v6-key); flex: none; }
.phone::before, .phone::after { content: ""; position: absolute; top: 0; bottom: 0; width: var(--pbtn); pointer-events: none; }
.phone::before { right: calc(100% + var(--pf) - .5px); border-radius: 2px 0 0 2px;
  background: var(--pbg) 0 19.6% / 100% 3.4% no-repeat, var(--pbg) 0 28.8% / 100% 6.2% no-repeat, var(--pbg) 0 38.4% / 100% 6.2% no-repeat; }
.phone::after { left: calc(100% + var(--pf) - .5px); border-radius: 0 2px 2px 0;
  background: var(--pbg) 0 33.4% / 100% 9.6% no-repeat, var(--pbg) 0 64.6% / 100% 6.4% no-repeat; }
.phone-in { position: relative; width: 100%; aspect-ratio: 402 / 874; border-radius: calc(var(--u) * 62); overflow: hidden; background: var(--sb, var(--surface-default));
  color: var(--sbfg, var(--text-primary)); display: flex; flex-direction: column; isolation: isolate; }
.phone[data-dark] { --sbfg: var(--text-inverse); }
.phone-di { position: absolute; top: calc(var(--u) * 11); left: 50%; width: calc(var(--u) * 125); height: calc(var(--u) * 37); border-radius: 999px; background: var(--surface-media); transform: translateX(-50%); z-index: 5; }
.phone-sb { position: relative; flex: 0 0 calc(var(--u) * 62); font: 600 calc(var(--u) * 17)/1 var(--sans); letter-spacing: -.02em; font-feature-settings: "tnum"; }
.phone-sb > span:first-child { position: absolute; left: 0; top: calc(var(--u) * 29.5); width: calc(var(--u) * 138.5); text-align: center; transform: translateY(-50%); }
.phone-sb .sb-r { position: absolute; right: 0; top: calc(var(--u) * 23); width: calc(var(--u) * 138.5); height: calc(var(--u) * 13); display: flex; justify-content: center; align-items: center; gap: calc(var(--u) * 6); }
.phone-sb .sb-r::before, .phone-sb .sb-r i { content: ""; display: block; flex: none; background: currentColor; -webkit-mask: var(--m) center / 100% 100% no-repeat; mask: var(--m) center / 100% 100% no-repeat; }
.phone-sb .sb-r i:nth-child(1) { order: 1; width: calc(var(--u) * 19.2); height: calc(var(--u) * 12.2); --m: var(--sb-cell); }
.phone-sb .sb-r::before { order: 2; width: calc(var(--u) * 17.14); height: calc(var(--u) * 12.33); --m: var(--sb-wifi); }
.phone-sb .sb-r i:nth-child(2) { order: 3; width: calc(var(--u) * 27.33); height: calc(var(--u) * 13); --m: var(--sb-batt); }
.phone-in::after { content: ""; position: absolute; left: 50%; bottom: calc(var(--u) * 8); width: calc(var(--u) * 139); height: calc(var(--u) * 5); margin-left: calc(var(--u) * -69.5); border-radius: 999px; background: currentColor; z-index: 4; }
.phone-scr { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.phone-scr img { position: absolute; left: 0; top: 0; width: 100%; height: auto; }

/* ---------- hero (krea: full-bleed studio photo, title bottom-left, pills bottom-right) ---------- */
.hero { position: relative; color: var(--text-inverse); }
.hero-media { position: relative; height: 100svh; min-height: 640px; max-height: 1080px; overflow: hidden; background: var(--surface-media); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; transform: scale(1.04); animation: heroIn 1.6s var(--ease) both; }
@keyframes heroIn { from { transform: scale(1.1); opacity: .2; } to { transform: scale(1.04); opacity: 1; } }
.hero-body { position: absolute; inset: auto 0 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s4); padding: 0 var(--pad) clamp(28px, 4vw, 56px); }
.hero h1 { max-width: 9.5em; }
.hero .h1 .dim { color: var(--text-inverse-muted); }
.hero .lead { color: var(--text-inverse); margin-top: var(--s3); max-width: 30em; }
.hero-in > * { animation: up 1.1s var(--ease) both; }
.hero-in > *:nth-child(2) { animation-delay: .12s; }
.hero .ctas { animation: up 1.1s .24s var(--ease) both; }
@keyframes up { from { opacity: 0; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: none; } }
/* Nick 2026-10-18 (logo): the header never sits on the photo. From 760 px the hero photo is an inset card under the
   header, so logo (canonical colours), nav and CTA stand on the canvas; the copy stays bottom-left inside the photo */
@media (min-width: 760px) {
  .hero { padding-top: var(--hd-h); }
  .hero-media { height: calc(100svh - var(--hd-h) - var(--pad)); min-height: 560px; max-height: 1000px; margin: 0 var(--pad); border-radius: var(--r-l); }
  .hero-body { padding: 0 calc(var(--pad) + clamp(24px, 3vw, 48px)) clamp(28px, 4vw, 56px); }
}
@media (max-width: 759px) {
  .hero { color: var(--text-primary); padding-top: 64px; }
  .hero-media { height: auto; min-height: 0; aspect-ratio: 4 / 4.4; margin: 0 var(--pad); border-radius: var(--r-l); }
  .hero-media img { object-position: 72% 40%; }
  .hero-body { position: static; grid-template-columns: 1fr; padding-top: var(--s3); padding-bottom: 0; gap: var(--s3); }
  .hero .h1 .dim { color: var(--text-muted); }
  .hero .lead { color: var(--text-muted); margin-top: var(--s2); }
  .hero .btn--glass { background: var(--surface-muted); color: var(--text-primary); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hero .btn--glass:hover { background: var(--surface-sunken); }
  .hero .ctas .btn, .hero .ctas .cta { flex: 1 1 auto; }
}

/* ---------- dock: fixed bottom, tabs + CTA; shows on scroll-up, hides while a block's own CTA is in view ---------- */
.dock { position: fixed; left: 50%; bottom: 16px; z-index: 60; display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; background: var(--bg-elevated); box-shadow: var(--elev-2); transform: translate3d(-50%, 140%, 0); transition: transform .5s var(--ease); }
body.dock-on .dock { transform: translate3d(-50%, 0, 0); }
.dock-tabs { display: flex; position: relative; }
.dock-tabs a { position: relative; z-index: 1; height: 44px; display: flex; align-items: center; padding: 0 18px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--text-muted); transition: color .25s; }
.dock-tabs a.on { color: var(--text-primary); }
.dock-pill { position: absolute; top: 0; left: 0; height: 44px; border-radius: 999px; background: var(--surface-default); box-shadow: var(--elev-1); transition: transform .45s var(--ease), width .45s var(--ease), opacity .3s; opacity: 0; }
body.dock-cta-off .dock .cta { display: none; }
@media (max-width: 759px) {
  .dock-tabs { display: none; }
  .dock { padding: 0; background: none; box-shadow: none; bottom: 12px; }
  .dock .cta { --h: 52px; --dot: 40px; padding-left: 24px; font-size: 16px; box-shadow: var(--elev-2); }
  body.dock-cta-off .dock { transform: translate3d(-50%, 140%, 0); }
  body.dock-cta-off .dock .cta { display: inline-flex; }
}
/* Nick 2026-10-18: the header CTA is always on screen, so the dock carries no second CTA; on phones (where the dock
   was only that CTA) it is gone */
.dock .cta, body.dock-cta-off .dock .cta { display: none; }
@media (max-width: 759px) { .dock { display: none; } }

/* ---------- 02 stats ---------- */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s1); margin-top: clamp(40px, 5vw, 72px); }
@media (min-width: 960px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); } }
.stat { background: var(--card); border-radius: var(--r-l); padding: var(--s3); min-height: clamp(200px, 22vw, 300px); display: flex; flex-direction: column; justify-content: space-between; gap: var(--s3); }
.stat b { font-weight: 500; font-size: clamp(56px, 7vw, 112px); line-height: .9; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.stat b small { font-size: .42em; letter-spacing: -.02em; margin-left: .08em; }
.stat b em { font-style: normal; }
.stat p { font-size: clamp(15px, 1.2vw, 18px); line-height: 1.35; color: var(--text-muted); max-width: 14em; }
.stat:nth-child(1) { background: var(--bg-inverse); color: var(--text-inverse); }
.stat:nth-child(1) p { color: var(--text-inverse-muted); }
@media (max-width: 759px) { .stat { padding: var(--s2); min-height: 168px; border-radius: 20px; } }

/* ---------- 03 setup ---------- */
.split { display: grid; gap: clamp(40px, 5vw, 80px); align-items: center; }
@media (min-width: 960px) { .split { grid-template-columns: 1fr 1fr; } .split--rev > :first-child { order: 2; } }
.split .lead { margin-top: var(--s3); }
.split .ctas { margin-top: var(--s4); }
.stage { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 5; max-height: min(88svh, 960px); width: 100%; background: var(--bg-subtle); display: flex; justify-content: center; }
.stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage .phone { --w: min(44cqw, 270px); position: absolute; bottom: 21%; left: 50%; transform: translateX(-50%); }
@media (max-width: 759px) { .stage { border-radius: var(--r-l); } .stage .phone { --w: 50cqw; } }

/* ---------- 04 capabilities showcase ---------- */
.chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: var(--s4); }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--card); font-size: 15px; font-weight: 500; color: var(--text-muted); transition: background-color .25s, color .25s; }
.chip .mono { font-size: 12px; color: var(--text-faint); }
.chip:hover { color: var(--text-primary); }
.chip.on { background: var(--accent-primary); color: var(--text-on-accent); }
.chip.on .mono { color: var(--text-inverse-muted); }
@media (max-width: 759px) { .chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: var(--s3) calc(var(--pad) * -1) 0; padding: 0 var(--pad); scrollbar-width: none; } .chips::-webkit-scrollbar { display: none; } .chip { flex: none; } }

/* 2026-10-18c: compact concave carousel (Nick: «полусферой как бы карусель ... в fisheye-перспективе расширяется по краям,
   посередине компактная»). Cards sit on a half-cylinder seen from inside: CSS 3D (perspective + preserve-3d,
   rotateY + translateZ per card) from one rotation value in krea.js; the centre card is the smallest, cards toward
   the edges come closer, grow and turn toward the viewer. The block (heading -> description) is sized to the
   viewport minus the header and the dock, so it always fits one screen. */
.caps-fit { display: flex; flex-direction: column; height: calc(100svh - var(--hd-h) - var(--dock-h) - 24px); min-height: 430px; max-height: 1040px; }
.caps-head { flex: none; }
.caps-head .h2--mega { font-size: clamp(40px, min(7.4vw, 10.5svh), 112px); }
.caps-head .lead { margin-top: clamp(8px, 1.8svh, 24px); }
.caps-head .chips { margin-top: clamp(12px, 2.6svh, 32px); }
.car3 { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin-top: clamp(4px, 1svh, 16px); border-radius: var(--r-l); }
.car3:focus-visible { outline-offset: -2px; }
.car3-stage { position: relative; flex: 1 1 auto; min-height: 150px; perspective: 1400px; overflow: hidden; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.car3.drag .car3-stage { cursor: grabbing; }
.car3-ring { position: absolute; inset: 0; transform-style: preserve-3d; --cw: 320px; --ch: 240px; }
.c3 { position: absolute; left: 50%; top: 50%; width: var(--cw); height: var(--ch); margin: calc(var(--ch) / -2) 0 0 calc(var(--cw) / -2); border-radius: var(--r-l); overflow: hidden;
  background: var(--card); box-shadow: var(--elev-2); -webkit-backface-visibility: hidden; backface-visibility: hidden; outline: 1px solid transparent; transform-origin: 50% 50%; }
.car3.moving .c3 { will-change: transform, opacity; }
.c3 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.c3-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: calc(var(--ch) * .22) calc(var(--cw) * .055) calc(var(--cw) * .05); background: linear-gradient(transparent, var(--glass-fill) 45%, var(--glass-fill-pressed)); color: var(--glass-on); }
.c3-cap .mono { font-size: 12px; opacity: .8; }
.c3-cap h3 { margin-top: 4px; font-size: clamp(15px, calc(var(--cw) * .058), 24px); line-height: 1.12; font-weight: 500; letter-spacing: -.02em; text-wrap: balance; }
.car3-foot { flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s2); width: 100%; max-width: 820px; margin: clamp(8px, 1.6svh, 20px) auto 0; }
.car3-desc { display: grid; text-align: center; }
.car3-desc p { grid-area: 1 / 1; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.45; letter-spacing: -.01em; color: var(--text-secondary); opacity: 0; transition: opacity .35s var(--ease); text-wrap: pretty; }
.car3-desc p.on { opacity: 1; }
.car-btn { width: 52px; height: 52px; border-radius: 50%; background: var(--card); display: grid; place-items: center; transition: background-color .25s, transform .25s var(--ease); }
.car-btn:hover { background: var(--card-2); }
.car-btn:active { transform: scale(.94); background: var(--surface-pressed); }
.car-btn--next .ico { transform: scaleX(-1); }
.caps-cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s2); margin-top: var(--s4); }
/* secondary «Смотреть все возможности» -> catalog (2026-10-18f): the site's .btn--line, same 52px height as the CTA */
@media (max-width: 759px) { .caps-cta { flex-direction: column; align-items: center; } }
@media (max-width: 759px) {
  .car3-foot { gap: var(--s1); }
  .car-btn { width: 44px; height: 44px; }
  .car3-desc p { font-size: 15px; }
}

/* ---------- 05 tasks: one list on both platforms (2026-10-18f). The desktop web app (App v6 «4.1 Desktop») in a light
   browser window, the iPhone with «4.1 Mobile» over its lower-right corner. Heading -> link is sized to the viewport
   minus the header and the dock (like .caps-fit), so the block always fits one screen; the board is a size container and
   the composition scales from one value --bw (browser width) that fits both its width and its height.
   Geometry in --bw: browser 1 x .665 (bar .04 + screen .625), phone .3 wide (~.64 tall), group 1.12 x .715. ---------- */
.board { position: relative; margin-top: clamp(40px, 5vw, 72px); border-radius: var(--r-xl); background: var(--card); overflow: hidden; display: flex; justify-content: center; align-items: center; padding: clamp(48px, 6vw, 96px) var(--pad); }
.board .phone { --w: min(260px, 64vw); }
.board-foot { display: flex; justify-content: center; margin-top: var(--s3); }
@media (max-width: 899px) { .board { border-radius: var(--r-l); padding: var(--s4) var(--s2); } }
.tasks-fit { display: flex; flex-direction: column; height: calc(100svh - var(--hd-h) - var(--dock-h) - 24px); min-height: 500px; max-height: 1080px; }
.tasks-head { flex: none; }
.tasks-head .h2--mega { font-size: clamp(36px, min(6.4vw, 8.4svh), 104px); }
.tasks-head .lead { margin-top: clamp(8px, 1.6svh, 20px); }
.board--duo { display: block; flex: 1 1 auto; min-height: 0; margin-top: clamp(16px, 3svh, 40px); padding: 0; container-type: size; }
.tasks-fit .board-foot { flex: none; margin-top: clamp(12px, 2svh, 24px); }
.tb { --bw: min(calc((100cqw - 64px) / 1.12), calc((100cqh - 48px) / .715)); position: absolute; left: 50%; top: 50%;
  width: calc(var(--bw) * 1.12); height: calc(var(--bw) * .715); transform: translate(-50%, -50%); }
.brw { position: absolute; left: 0; top: 0; width: var(--bw); margin: 0; border-radius: var(--r-s); overflow: hidden; background: var(--surface-default); box-shadow: var(--elev-3);
  transform: translate3d(0, calc(var(--tp, 0) * 8px), 0); }
.brw-bar { position: relative; height: calc(var(--bw) * .04); display: flex; align-items: center; justify-content: center; background: var(--surface-muted); border-bottom: 1px solid var(--border-subtle); }
.brw-dots { position: absolute; left: calc(var(--bw) * .014); top: 50%; display: flex; gap: calc(var(--bw) * .007); transform: translateY(-50%); }
.brw-dots i { width: calc(var(--bw) * .0095); aspect-ratio: 1; border-radius: 50%; background: var(--border-subtle); }
.brw-url { height: 62%; min-width: 26%; padding: 0 2em; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--surface-default);
  box-shadow: 0 0 0 1px var(--border-subtle); font-size: max(8px, calc(var(--bw) * .0135)); line-height: 1; letter-spacing: -.01em; color: var(--text-muted); }
.brw-scr img { width: 100%; aspect-ratio: 1440 / 900; }
.tb-ph { position: absolute; right: 0; bottom: 0; transform: translate3d(0, calc(var(--tp, 0) * -12px), 0); }
.tb-ph .phone { --w: calc(var(--bw) * .3); }
@media (max-width: 759px) {
  /* phone first: the phone is the hero, the browser sits behind it at the top left, cropped by the card */
  .tasks-fit { height: calc(100svh - var(--hd-h) - 24px); min-height: 560px; }
  .board--duo { border-radius: var(--r-l); }
  .tb { --bw: min(150cqw, calc((100cqh - 32px) / .665)); inset: 0; width: auto; height: auto; transform: none; }
  .brw { left: var(--s2); top: var(--s2); }
  .brw-bar { justify-content: flex-start; padding-left: 56px; }
  .brw-url { font-size: max(9px, calc(var(--bw) * .0135)); min-width: 0; padding: 0 1.3em; }
  .tb-ph { right: var(--s2); bottom: var(--s2); }
  .tb-ph .phone { --w: min(58cqw, calc((100cqh - 56px) / 2.14)); }
}
/* 05 tasks = a process film (Nick 2026-10-18: «для вот этого блока давай сделаем видео», no link under the block).
   The 9:16 cut on every width: it has no team chats (D-398) and its interface is large enough to read.
   Wide screens: heading left, film right, the block fits one screen; phones: heading on top, film fills the rest. */
.board--film { display: block; margin: 0; padding: 0; background: none; border-radius: 0; overflow: visible; }
.tv { position: relative; margin: 0; aspect-ratio: 9 / 16; border-radius: var(--r-xl); overflow: hidden; background: var(--surface-sunken); }
.tv-v { display: block; width: 100%; height: 100%; object-fit: cover; }
/* «Со звуком» sits under the lead, not on the film: the film carries its own captions at the bottom */
.tv-snd { display: inline-flex; align-items: center; gap: 10px; height: 44px; margin-top: var(--s3); padding: 0 16px 0 6px;
  border-radius: 999px; background: var(--surface-sunken); color: var(--text-primary); font-size: 15px; font-weight: 500;
  letter-spacing: -.01em; transition: transform .2s var(--cta-ease); -webkit-tap-highlight-color: transparent; }
.tv-snd:hover { transform: translateY(-2px); }
.tv-snd:active { transform: scale(.96); }
.tv-snd .ico { width: 32px; height: 32px; padding: 8px; border-radius: 50%; background: var(--accent-primary); color: var(--text-on-accent); }
.tv-snd .tv-w { display: none; }
.tv-snd[aria-pressed="true"] .tv-w { display: inline; }
.tv-snd[aria-pressed="true"] .tv-x { display: none; }
@media (min-width: 760px) {
  .tasks-fit.tasks-film { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: clamp(32px, 6vw, 120px);
    height: auto; min-height: calc(100svh - var(--hd-h) - 24px); max-height: none; }
  .tasks-film .tasks-head { text-align: left; }
  .tasks-film .tasks-head .lead { margin-left: 0; margin-right: 0; }
  .tasks-film .tv { width: min(calc((100svh - var(--hd-h) - 64px) * 9 / 16), 42vw, 500px); }
}
@media (max-width: 759px) {
  /* phones: the film takes the full column width (Nick 2026-10-18: «увеличил бы мобильник, экран позволяет»);
     the block is taller than one screen, the heading scrolls away and the film fills the screen */
  .tasks-film .board--film { flex: none; margin-top: var(--s3); }
  .tasks-fit.tasks-film { height: auto; min-height: 0; max-height: none; }
  .tv { width: min(100%, 440px, calc((100lvh - 64px - 2 * var(--s3)) * 9 / 16)); margin-inline: auto; border-radius: var(--r-l); }
  .tv-snd { margin-top: var(--s2); height: 40px; font-size: 14px; }
  .tv-snd .ico { width: 28px; height: 28px; padding: 7px; }
}

/* ---------- 06 channels, dark full-bleed ---------- */
.night { position: relative; margin-top: var(--sec); background: var(--night); color: var(--text-inverse); overflow: hidden; }
.night-media { position: absolute; inset: 0; isolation: isolate; z-index: 0; }
.night-media img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.night-in { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: var(--s4); min-height: min(100svh, 920px); padding-top: clamp(80px, 9vw, 140px); padding-bottom: clamp(80px, 9vw, 140px); }
/* Nick 2026-10-18: no card behind the copy; text sits on the photo, a soft left-edge shade on the photo keeps it readable */
.night-copy { max-width: min(600px, 40vw); }
.night-media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--bg-scrim) 0 40%, transparent 62%), linear-gradient(90deg, var(--bg-scrim) 0 30%, transparent 50%); pointer-events: none; }
.night-copy .lead { margin-top: var(--s3); max-width: 32vw; color: var(--text-inverse); }
.night .phone { --w: clamp(250px, 22vw, 320px); justify-self: center; }
@media (max-width: 899px) {
  .night-media { position: relative; height: 62vw; min-height: 240px; }
  .night-media::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(transparent, var(--night)); }
  .night-in { grid-template-columns: 1fr; min-height: 0; padding-top: 0; padding-bottom: var(--sec); margin-top: -32px; }
  .night-copy { padding: 0; background: none; max-width: none; }
  .night-media::before { display: none; }
  .night-copy .lead { max-width: none; color: var(--text-inverse-muted); }
  .night .phone { --w: min(70vw, 280px); }
}

/* ---------- 07 who: krea gallery cards ---------- */
.gal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); margin-top: clamp(40px, 5vw, 72px); }
.gcard { display: flex; flex-direction: column; gap: var(--s2); }
.gcard-media { position: relative; border-radius: var(--r-l); overflow: hidden; aspect-ratio: 4 / 5; background: var(--card); }
.gcard-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.gcard:hover .gcard-media > img { transform: scale(1.04); }
.gcard-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px var(--s2) var(--s2); background: linear-gradient(transparent, var(--glass-fill-hover)); color: var(--glass-on); }
.gcard-cap .mono { font-size: 12px; opacity: .75; }
.gcard-cap b { display: block; margin-top: 4px; font-size: clamp(20px, 1.7vw, 24px); font-weight: 500; letter-spacing: -.025em; line-height: 1.1; }
.gcard p { font-size: 15px; line-height: 1.45; color: var(--text-muted); max-width: 32em; }
.gcard .tags { font-size: 12px; color: var(--text-faint); }
.who-foot { margin-top: var(--s4); }
@media (max-width: 1099px) { .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 759px) {
  .gal { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--s1); margin-left: calc(var(--pad) * -1); margin-right: calc(var(--pad) * -1); padding: 0 var(--pad); scrollbar-width: none; }
  .gal::-webkit-scrollbar { display: none; }
  .gcard { flex: 0 0 80vw; scroll-snap-align: start; scroll-margin-left: var(--pad); }
}

/* ---------- 08 catalog ---------- */
.duo { position: relative; border-radius: var(--r-xl); background: var(--card); aspect-ratio: 1 / 1; max-height: min(88svh, 960px); width: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center; gap: 4%; }
.duo .phone { --w: min(40cqw, 260px); }
.duo .phone:first-child { transform: translateY(-6%); }
.duo .phone:last-child { transform: translateY(8%); }
.duo-chip { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); height: 40px; padding: 0 16px; border-radius: 999px; background: var(--surface-default); color: var(--text-primary); display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; box-shadow: var(--elev-2); white-space: nowrap; }
.duo-chip b { color: var(--text-primary); font-weight: 600; }
@media (max-width: 759px) { .duo { border-radius: var(--r-l); aspect-ratio: 1 / 1.08; } .duo .phone { --w: 42cqw; } }

/* ---------- 09 price ---------- */
.price-mega { display: flex; align-items: flex-start; justify-content: center; gap: .1em; margin-top: clamp(32px, 4vw, 56px); font-weight: 500; font-size: clamp(132px, 24vw, 340px); line-height: .82; letter-spacing: -.065em; }
.price-mega sup { font-size: .32em; line-height: 1; margin-top: .08em; letter-spacing: -.03em; }
.price-tag { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: var(--s3); }
.pill { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--card); font-size: 15px; font-weight: 500; }
.pill--o { background: var(--tone-mint-surface); color: var(--tone-mint-ink); }
.buys-h { margin-top: clamp(48px, 6vw, 88px); font-size: clamp(20px, 1.8vw, 26px); font-weight: 500; letter-spacing: -.025em; }
.buys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); margin-top: var(--s3); text-align: left; }
.buy { background: var(--card); border-radius: var(--r-l); padding: var(--s3); display: flex; flex-direction: column; gap: var(--s1); min-height: 220px; }
.buy b { font-size: clamp(40px, 4vw, 60px); line-height: .95; font-weight: 500; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.buy b em { font-style: normal; color: var(--text-faint); margin-right: .06em; }
.buy strong { margin-top: auto; font-size: 17px; font-weight: 500; letter-spacing: -.015em; }
.buy span { font-size: 15px; color: var(--text-muted); line-height: 1.4; }
.buys-note { margin-top: var(--s3); font-size: 14px; color: var(--text-muted); }
.price-cta { display: flex; justify-content: center; margin-top: var(--s4); }
@media (max-width: 959px) { .buys { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s1); } .buy { padding: var(--s2); min-height: 196px; border-radius: 20px; } }

/* ---------- 10 faq ---------- */
.faq { display: grid; gap: clamp(40px, 5vw, 80px); }
@media (min-width: 960px) { .faq { grid-template-columns: .9fr 1.1fr; align-items: start; } .faq-aside { position: sticky; top: 96px; } }
.faq-aside .ask { margin-top: var(--s3); font-size: 16px; color: var(--text-muted); }
.faq-aside .ask b { color: var(--text-primary); }
.faq-aside .ask a { color: var(--text-primary); border-bottom: 1px solid currentColor; }
.qa { display: grid; gap: 12px; }
.qa details { background: var(--card); border-radius: var(--r-m); }
.qa summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: 20px var(--s3); cursor: pointer; font-size: clamp(17px, 1.4vw, 20px); font-weight: 500; letter-spacing: -.02em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary i { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-default); display: grid; place-items: center; flex: none; transition: transform .35s var(--ease); }
.qa summary i .ico { width: 16px; height: 16px; }
.qa details[open] summary i { transform: rotate(45deg); }
.qa .ans { padding: 0 var(--s3) var(--s3); font-size: 16px; line-height: 1.5; color: var(--text-muted); max-width: 40em; }
.qa .ans a { color: var(--text-primary); border-bottom: 1px solid currentColor; }
@media (max-width: 959px) { .qa summary { padding: var(--s2); } .qa .ans { padding: 0 var(--s2) var(--s2); } }

/* ---------- 11 close ---------- */
.close { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); border-radius: var(--r-xl); overflow: hidden; background: var(--bg-inverse); color: var(--text-inverse); min-height: 640px; }
.close-copy { padding: clamp(32px, 5vw, 72px); display: flex; flex-direction: column; justify-content: space-between; gap: var(--s4); }
.close-copy .lead { margin-top: var(--s3); color: var(--text-inverse-muted); }
.close-media { position: relative; min-height: 320px; }
.close-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
@media (max-width: 899px) { .close { grid-template-columns: minmax(0, 1fr); min-height: 0; border-radius: var(--r-l); } .close-media { order: -1; aspect-ratio: 4 / 3.4; min-height: 0; } .close-copy { padding: var(--s3); } }

/* ---------- footer: solid (D-407), giant wordmark in the real logo colours ---------- */
.ft { margin-top: var(--sec); background: var(--bg-canvas); color: var(--text-primary); padding: clamp(48px, 6vw, 88px) 0 calc(var(--s4) + 72px); }
.ft-mark { color: var(--text-primary); }
.ft { overflow-x: clip; } /* the 3D logo's extrusion runs past the right edge by design: clip it at the page edge, no sideways scroll */
.ft-mark svg { width: 100%; height: auto; display: block; }
/* 2026-10-18 (Nick): volumetric footer logo, the brand lockup light scheme (scripts/ft-logo-3d.py -> assets/logo-3d.svg).
   The SVG carries extra room for its shadow (left 2, top 2, right 7.5, bottom 9.5 logo units of 167.62);
   width and negative margins hang that room outside the column, so the letters keep the full content width. */
.ft-mark .ft-logo3d { display: block; width: 105.6676%; max-width: none; height: auto; margin: -1.1932% -4.4744% -5.6676% -1.1932%; pointer-events: none; user-select: none; }
.ft-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: var(--s4); margin-top: clamp(40px, 5vw, 72px); padding-top: var(--s4); border-top: 1px solid var(--line); }
.ft-grid h3 { font-size: 14px; font-weight: 500; margin-bottom: var(--s2); }
.ft-grid li + li { margin-top: 10px; }
.ft-grid a, .ft-grid p { font-size: 14px; color: var(--text-muted); transition: color .2s; }
.ft-grid a:hover { color: var(--text-primary); }
.ft-about p { max-width: 26em; line-height: 1.5; }
.ft-legal { margin-top: var(--s4); font-size: 13px; color: var(--text-muted); display: flex; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; }
@media (min-width: 760px) and (max-width: 1099px) { .ft-grid { grid-template-columns: repeat(3, max-content); justify-content: space-between; } .ft-about { grid-column: 1 / -1; } }
@media (min-width: 760px) { .ft-grid a { white-space: nowrap; } }
@media (max-width: 759px) { .ft-grid { grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s3); } .ft-about { grid-column: 1 / -1; } }

/* phones size from their card: container units */
.stage, .gcard-media, .duo { container-type: inline-size; }
.close .dim { color: var(--text-inverse-muted); }

/* Who-cards: tag rows sit on one baseline */
.gcard .tags { margin-top: auto; }


/* ---------- primary CTA: ONE component on every page, exactly CTA-SPEC.md (Nick's video, 2026-10-18) ----------
   1 pill 52 px (never under 44), darkest v6 token, weight 500   2 one dot = the logo orange
   3 one svg drawn ↗ at rest   4 hover: the same svg rotate: 45deg (↗ -> →), cubic-bezier(.23,1,.32,1) 350 ms, both ways
   5 a white light follows the cursor: radial-gradient at --mx/--my (krea.js writes px)
   6 magnet: krea.js springs `transform: translate3d` toward the cursor (mass 1, stiffness 220, damping 18; 0.25 x offset, cap 10/6 px)
   7 :active scale .97 (the `scale` property composes with the magnet transform, no transform fight)
   Touch (hover: none): no magnet, no light, no rotation; the press stays. NOT gated on reduced motion (Nick 2026-10-18). */
.cta { --h: 52px; --dot: 40px; position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; height: var(--h); min-height: 44px;
  padding: 0 calc((var(--h) - var(--dot)) / 2) 0 24px; border-radius: 999px; background: var(--accent-primary); color: var(--text-on-accent);
  font-size: 16px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; isolation: isolate; overflow: hidden;
  scale: 1; transition: scale 160ms var(--cta-ease), opacity .3s; -webkit-tap-highlight-color: transparent; }
.cta::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 350ms var(--cta-ease);
  background: radial-gradient(140px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--glass-on) 30%, transparent), color-mix(in srgb, var(--glass-on) 8%, transparent) 55%, transparent 100%); }
.cta:hover::before { opacity: 1; }
.cta-dot { width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--logo-accent); color: var(--logo-on-accent); display: grid; place-items: center; flex: none; }
.cta-dot .ico { width: calc(var(--dot) * .5); height: calc(var(--dot) * .5); stroke-width: 2.2; rotate: 0deg; transition: rotate 350ms cubic-bezier(.23, 1, .32, 1); }
.cta:hover .cta-dot .ico { rotate: 45deg; }
.cta:active { scale: .97; transition-duration: 90ms; }
.cta--sm { --h: 44px; --dot: 34px; gap: 10px; padding-left: 18px; font-size: 15px; }
/* the light pill only where the page itself is dark (closing block); the light there is a soft grey */
.cta--inv { background: var(--accent-on-inverse); color: var(--accent-primary); }
.cta--inv::before, body.hd-dark:not(.menu-open) .hd > .cta::before { background: radial-gradient(140px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent-primary) 14%, transparent), transparent 100%); }
/* over the dark blocks (night, closing CTA) the header CTA turns to the light pill so it stays visible */
body.hd-dark:not(.menu-open) .hd > .cta { background: var(--accent-on-inverse); color: var(--accent-primary); }
.cta:focus-visible { outline-offset: 3px; }
@media (max-width: 759px) { .hd > .cta { --h: 44px; --dot: 32px; padding-left: 16px; font-size: 14px; gap: 8px; } .hd-logo { width: 100px; height: 21px; } }
@media (max-width: 379px) { .hd > .cta { padding-left: 12px; font-size: 13px; gap: 6px; } .hd-logo { width: 90px; height: 19px; } .hd { gap: 6px; } }
@media (hover: none) {
  .cta::before { display: none; }
  .cta-dot .ico { transition: none; }
}
@media (hover: none) { .cta:hover .cta-dot .ico { rotate: 0deg; } }

/* chips-fade: on phones the chip row scrolls sideways; fade its right edge so the cut reads as "more" (reviewer 2026-10-18) */
@media (max-width: 759px) { .chips { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); } .chips.at-end { -webkit-mask-image: none; mask-image: none; } }

/* rev3-fixes (reviewer 2026-10-18) */
/* hero: buttons sit under the copy, left; on the photo the secondary is a text button, so the dark pill reads as the main action */
@media (min-width: 760px) {
  .hero-body { grid-template-columns: 1fr; gap: var(--s4); }
  .hero .btn--glass { background: transparent; color: var(--text-inverse); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hero .btn--glass:hover { background: var(--glass-fill); }
  .hero .btn--glass:active { background: var(--glass-fill-hover); }
}
/* setup band on phones: the whole phone (Dynamic Island, 9:41) stays inside the card */
@media (max-width: 759px) { .stage .phone { --w: 42cqw; bottom: 15%; } }
/* irreversible action: Danger button, no arrow, no orange dot; full width on phones */
.btn--danger { background: var(--status-danger); color: var(--text-inverse); }
.btn--danger:hover { background: color-mix(in srgb, var(--status-danger) 88%, #000); }
.btn--danger:active { transform: scale(.97); }
@media (max-width: 759px) { .btn--danger { width: 100%; } }