/* v2: the landing after emilkowal.ski, animations.dev and benji.org (owner 2026-11-11). One file: scales, roles,
   components, layout. Measures: docs/research/refs-systems.md (Emil), docs/research/refs-benji.md. */

/* ---------- Scales ---------- */
:root {
  color-scheme: light;
  /* grey: Emil's 12 steps (Radix Sand), light / dark */
  --g1: light-dark(#fdfdfc, #111110);
  --g2: light-dark(#f9f9f8, #191918);
  --g3: light-dark(#f1f0ef, #222221);
  --g4: light-dark(#e9e8e6, #2a2a28);
  --g5: light-dark(#e2e1de, #31312e);
  --g6: light-dark(#dad9d6, #3b3a37);
  --g7: light-dark(#cfceca, #494844);
  --g8: light-dark(#bcbbb5, #62605b);
  --g9: light-dark(#8d8d86, #6f6d66);
  --g10: light-dark(#72726c, #7c7b74);  /* light darker than Radix (#82827c): 4.6:1 for 14px text (owner 2026-11-11) */
  --g11: light-dark(#63635e, #b5b3ad);
  --g12: light-dark(#21201c, #eeeeec);
  --violet: #834cf2;
  --violet-hover: #7c3aed;
  --violet-tint: #f3edff;
  --ill-teal: light-dark(oklch(62% .12 180), oklch(76% .12 180));
  --ill-blue: light-dark(oklch(58% .15 250), oklch(72% .13 250));
  --ill-coral: light-dark(oklch(62% .17 28), oklch(74% .14 28));
  --ill-amber: light-dark(oklch(70% .15 75), oklch(82% .13 80));

  /* ---------- Roles ---------- */
  --page: var(--g1);
  --surface: light-dark(#fff, var(--g2));       /* cards, widgets, white buttons */
  --plate: var(--g2);                           /* the stage under an inline demo */
  --track: var(--g3);                           /* a segmented track, a quiet fill */
  --knob: light-dark(#fff, var(--g5));         /* the lifted plate on a track: lighter than the track in dark (Geist, Radix, iOS) */
  --line: var(--g4);                            /* hairlines between rows */
  --text-1: var(--g12);
  --text-2: var(--g11);
  --text-3: var(--g10);
  --accent: var(--violet);
  --accent-hover: var(--violet-hover);
  --on-accent: #fff;
  --focus: var(--g11);
  --ring: light-dark(rgba(0, 0, 0, .08), rgba(255, 255, 255, .08));
  --edge: light-dark(rgba(0, 0, 0, .12), var(--g5));  /* control outline: alpha on light, solid on dark (Emil) */
  --shadow-card: 0 0 0 1px var(--ring), 0 2px 2px light-dark(rgba(0, 0, 0, .04), rgba(0, 0, 0, .24));
  --shadow-float: 0 0 0 1px var(--ring), 0 8px 24px light-dark(rgba(0, 0, 0, .08), rgba(0, 0, 0, .4));
  --shadow-knob: inset 0 1px 0 light-dark(rgba(255, 255, 255, 0), rgba(255, 255, 255, .06)), 0 0 0 1px var(--ring), 0 1px 3px light-dark(rgba(0, 0, 0, .12), rgba(0, 0, 0, .5));
  --shadow-accent: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 0 1px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .14);
  --dot: light-dark(rgba(0, 0, 0, .07), rgba(255, 255, 255, .06));
  /* hero backdrop (lab 2026-11-12, ?bg=grey, ?pt=none): a linear wash over the whole hero into the page,
     and the logo-build construction lines (.hero-art). */
  --wash-brand: light-dark(color-mix(in oklab, var(--violet) 5%, var(--page)), color-mix(in oklab, oklch(74% .15 295) 10%, var(--page))); /* dark 7 → 10 (owner 2026-11-12: «чуть ярче») */
  --wash-grey: light-dark(var(--g3), var(--g2));
  --pattern: light-dark(rgba(0, 0, 0, .08), rgba(255, 255, 255, .08));
  --pattern-dot: light-dark(rgba(0, 0, 0, .16), rgba(255, 255, 255, .16));
  --screen: #000;

  /* type: Inter, 14 / 16 / 18 / 24 / 40; Medium for heads and what is pressed */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-s: 14px;  --lh-s: 20px;
  --fs-b: 16px;  --lh-b: 24px;
  --fs-l: 18px;  --lh-l: 28px;
  --fs-h: 24px;  --lh-h: 32px;
  --fs-d: 40px;  --lh-d: 48px;
  --w-r: 400; --w-m: 500; --w-sb: 600;         /* semibold: the hero head only */
  --ls-b: -.022em;                             /* dense iOS-like text tracking (owner 2026-11-12) */
  --opsz-head: "opsz" 32;                       /* Inter Display cut for heads and big numbers */

  /* space, radius, motion */
  --col: 640px;
  --wide: 1072px;                              /* the one wide width: reel, case pages, calculator (owner 2026-11-12: two widths, 640 and wide) */
  --gut: 24px;
  --sec: 128px;
  --bar: 64px;                                  /* the sticky top bar */
  /* radii by role, not by size (owner 2026-11-11: blocks drifted to 12 / 16 / 24): every surface (card, media, calculator,
     CTA, popover, chat bubble, device plate) is --r-card; every control is --r-pill; small tags --r-tag */
  --r-card: 24px; --r-pill: 999px; --r-tag: 6px;
  --r-icon: 22.5%;
  --t-fast: 100ms; --t-state: 150ms; --t-move: 300ms; --t-roll: 380ms; --t-marquee: 40s; --t-showcase: 160s;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --ease-swipe: cubic-bezier(.32, .72, 0, 1);
  /* colour, fill and shadow changes on hover (owner 2026-11-12: «ховер резкий»): softer and a bit longer than --ease,
     whose fast start finished a colour change in ~40 ms; press and movement keep --ease */
  --t-hover: 200ms; --ease-hover: cubic-bezier(.4, 0, .2, 1);
  --live: light-dark(oklch(64% .17 150), oklch(76% .17 150));
  --live-glow: light-dark(oklch(64% .17 150 / .14), oklch(76% .17 150 / .18));
  --t-pulse: 2.4s; --t-sheen: 6s;
  --t-orbit: 120s; --t-orbit-far: 180s;        /* hero pattern: the diamonds travel their rings */
  --mark-line: light-dark(var(--violet), oklch(74% .15 295));   /* footer wordmark under the pointer */
  --mark-glow: light-dark(color-mix(in oklab, var(--violet) 45%, transparent), oklch(74% .15 295 / .55));
  --press: .98;
  --tap: 44px;
}
:root[data-theme="dark"] { color-scheme: dark; }
@media (max-width: 640px) { :root { --sec: 96px; --fs-d: 32px; --lh-d: 40px; --fs-h: 22px; --lh-h: 28px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; overflow-x: clip; background: var(--page); color: var(--text-1);
  font: var(--w-r) var(--fs-b) / var(--lh-b) var(--font); font-optical-sizing: auto; letter-spacing: var(--ls-b);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ol, ul, figure, blockquote, fieldset { margin: 0; padding: 0; }
ol, ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; letter-spacing: inherit; }
h1, h2, h3, .stat-n, .calc-sum, .price { font-variation-settings: var(--opsz-head); }
::selection { background: var(--g5); color: var(--text-1); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
[id] { scroll-margin-top: calc(var(--bar) + 32px); }
/* Old price: grey digits under a hand-drawn coral double stroke that runs a little past them (logo discount 2026-11-11). */
.was { position: relative; display: inline-block; color: var(--text-3); text-decoration: none; font-weight: var(--w-r); }
.was-x { position: absolute; left: -8%; top: 22%; width: 116%; height: 60%; overflow: visible; fill: none; stroke: var(--ill-coral); stroke-width: 2.5px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.was-x path + path { stroke-width: 1.5px; opacity: .7; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.t-3 { color: var(--text-3); }
strong { font-weight: var(--w-m); color: var(--text-1); }

/* ---------- Layout: one 640 column, sections 128 apart ---------- */
main, .foot { width: min(var(--col), 100% - 2 * var(--gut)); margin-inline: auto; }
.sec { margin-top: var(--sec); }
.sec > h2 { font-size: var(--fs-h); line-height: var(--lh-h); font-weight: var(--w-m); letter-spacing: -.02em; text-wrap: balance; }
.sec-lead { margin-top: 8px; font-size: var(--fs-l); line-height: var(--lh-l); color: var(--text-2); letter-spacing: -.01em; text-wrap: pretty; }
.sec > h2 + :not(.sec-lead), .sec-lead + * { margin-top: 32px; }
.sub { margin: 64px 0 8px; font-size: var(--fs-b); line-height: var(--lh-b); font-weight: var(--w-m); }

/* ---------- Top: brand and manager button both stay on scroll (owner 2026-11-12: «полностью его закреплять»), no bar fill
   behind them («полоской не надо»). Sticky in flow, so the hero still starts under its 64. ---------- */
.top { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; height: var(--bar); padding: 0 var(--gut); pointer-events: none; }
.top > * { pointer-events: auto; }
.brand { font-weight: var(--w-m); display: inline-flex; align-items: center; gap: 8px; }
.brand-mark { width: 32px; height: 32px; flex: none; }
.brand-mark rect { fill: var(--violet); }
.brand-mark path { fill: var(--on-accent); }
/* Phone: the same button docks at the bottom once the hero is gone and hides at the final card (v2.js sets .is-bar). */
@media (max-width: 999px) {
  .top .btn { position: fixed; left: var(--gut); right: var(--gut); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 10; height: var(--tap); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--t-move) var(--ease), transform var(--t-move) var(--ease), visibility 0s linear var(--t-move); }
  .is-bar .top .btn { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}
@media (max-width: 999px) and (prefers-reduced-motion: reduce) { .top .btn { transform: none; transition: none; } }

/* ---------- Buttons: all round (owner 2026-11-11); accent, quiet (white), ghost (no fill), on-accent (white on violet) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 20px; border: 0; border-radius: var(--r-pill);
  font-size: var(--fs-s); line-height: var(--lh-s); font-weight: var(--w-m); white-space: nowrap;
  cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none;
  transition: background-color var(--t-hover) var(--ease-hover), box-shadow var(--t-hover) var(--ease-hover), color var(--t-hover) var(--ease-hover), scale var(--t-state) var(--ease);
}
.btn:active { scale: var(--press); }
.btn svg { width: 16px; height: 16px; flex: none; fill: currentColor; }
.btn:has(svg:first-child) { padding-left: 16px; }
.btn > svg:last-child:not(:first-child) { margin-right: -4px; }
.btn [viewBox="0 0 16 16"] { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.btn-accent { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-accent); }
.btn-quiet { background: var(--surface); color: var(--text-1); box-shadow: var(--shadow-card); }
.btn-quiet svg { color: var(--text-2); }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-on-accent { background: #fff; color: var(--violet); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.btn-sm { height: 32px; padding: 0 14px; }
.btn-sm:has(svg:first-child) { padding-left: 12px; }
@media (hover: hover) and (pointer: fine) {
  .btn-accent:hover { background: var(--accent-hover); }
  .btn-quiet:hover { background: light-dark(var(--g2), var(--g3)); } /* dark: one step up, the surface is already g2 */
  .btn-ghost:hover { background: var(--track); color: var(--text-1); }
  .btn-on-accent:hover { background: var(--violet-tint); }
}
@media (pointer: coarse) { .btn { height: var(--tap); } .btn-sm { height: 40px; } }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Hero (animations.dev): centred, two tones, a byline ---------- */
/* top under the bar: 96, phone 48 (owner 2026-11-12) */
.hero { position: relative; isolation: isolate; padding-top: 96px; text-align: center; }
@media (max-width: 640px) { .hero { padding-top: 48px; } }
/* Backdrop: full bleed out of the 640 column, from the page top (under the sticky bar) to the hero's end.
   ::before = the wash; .hero-art = the logo-build construction lines, 1px, fading to the edges. */
.hero::before, .hero-art {
  position: absolute; z-index: -1; pointer-events: none;
  top: calc(-1 * var(--bar)); left: 50%; width: 100vw; translate: -50% 0;
}
.hero::before { content: ""; bottom: 0; background: linear-gradient(var(--wash-brand), var(--page)); }
[data-hero-bg="grey"] .hero::before { background: linear-gradient(var(--wash-grey), var(--page)); }
.hero-art { height: 720px; overflow: visible;
  -webkit-mask: radial-gradient(ellipse 60% 56% at 50% 36%, #000 50%, transparent 100%);
          mask: radial-gradient(ellipse 60% 56% at 50% 36%, #000 50%, transparent 100%); }
.hero-art :is(circle, path) { fill: none; stroke: var(--pattern); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.hero-art .ha-dash { stroke-dasharray: 3 3; }
.hero-art .ha-dia path { fill: var(--pattern-dot); stroke: none; }
/* Slight life (owner 2026-11-12): the diamonds ride their rings, inner and outer in opposite directions; paused off screen (v2.js). */
.ha-orbit { transform-origin: 720px 280px; animation: ha-orbit var(--t-orbit) linear infinite; }
.ha-orbit.is-far { animation-duration: var(--t-orbit-far); animation-direction: reverse; }
.hero-art.is-off .ha-orbit { animation-play-state: paused; }
@keyframes ha-orbit { to { transform: rotate(360deg); } }
[data-hero-pt="none"] .hero-art { display: none; }
.lp-hero::before, .case-hero::before { content: none; }
/* Hero badge (owner 2026-11-12 experiment, «fancy бадж, чтоб сайт живым сделать»): a live dot that pings, a sheen that
   crosses the pill now and then, the arrow nudges on hover. The only ambient motion in the hero. */
.live { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px 0 12px; margin-bottom: 24px;
  border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--shadow-card); color: var(--text-1); font-size: var(--fs-s); line-height: var(--lh-s); font-weight: var(--w-m); text-decoration: none;
  transition: box-shadow var(--t-hover) var(--ease-hover), scale var(--t-state) var(--ease); }
.live::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 35%, var(--live-glow) 50%, transparent 65%); translate: -100% 0; animation: live-sheen var(--t-sheen) var(--ease) infinite; }
.live-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--live); }
.live-dot::before, .live-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--live); opacity: .5; animation: live-ping var(--t-pulse) var(--ease) infinite; }
.live-dot::after { animation-delay: calc(var(--t-pulse) / 4); }
.live .lg-to { width: 16px; height: 16px; fill: none; stroke: var(--text-3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: translate var(--t-state) var(--ease), stroke var(--t-hover) var(--ease-hover); }
@media (hover: hover) { .live:hover { box-shadow: var(--shadow-float); } .live:hover .lg-to { translate: 2px 0; stroke: var(--text-1); } }
.live:active { scale: var(--press); }
@keyframes live-ping { 0% { scale: 1; opacity: .5; } 70%, 100% { scale: 3; opacity: 0; } }
@keyframes live-sheen { 0%, 70% { translate: -100% 0; } 100% { translate: 100% 0; } }
@media (prefers-reduced-motion: reduce) { .live::after, .live-dot::before, .live-dot::after { animation: none; opacity: 0; } }
/* kit Title: the page head, Semibold, the same on the landing, the logo page and case pages (owner 2026-11-12);
   a cover (.hero) breaks it into two lines, a case claim runs as one sentence */
.title { font-size: var(--fs-d); line-height: var(--lh-d); font-weight: var(--w-sb); letter-spacing: -.025em; text-wrap: balance; }
.hero .title > span { display: block; text-wrap: balance; }
.tone { color: var(--text-3); }
.hero-lead { max-width: 600px; margin: 20px auto 0; font-size: var(--fs-l); line-height: var(--lh-l); color: var(--text-2); letter-spacing: -.01em; text-wrap: balance; }
.hero .actions { justify-content: center; margin-top: 32px; }
@media (max-width: 640px) { .hero .actions { flex-direction: column; } .hero .actions .btn { width: 100%; } }
.byline { display: inline-flex; align-items: center; gap: 10px; margin-top: 32px; font-size: var(--fs-s); line-height: var(--lh-s); color: var(--text-2); }
.faces { display: inline-flex; }
.face { width: 24px; height: 24px; border-radius: var(--r-icon); box-shadow: 0 0 0 2px var(--page); }
.face + .face { margin-left: -6px; }
.faces.is-lg { display: flex; gap: 8px; }
.faces.is-lg .face { width: 48px; height: 48px; margin: 0; box-shadow: 0 0 0 1px var(--ring); }
.sec .faces.is-lg + .actions { margin-top: 24px; }

/* ---------- Rows: one unit everywhere (owner 2026-11-11). Medium title, grey line 4 under it, both 16;
   an icon 32 at the top left, an optional value or arrow on the right. ---------- */
.row-txt { display: grid; gap: 4px; min-width: 0; }
.row-t { font-size: var(--fs-b); line-height: var(--lh-b); font-weight: var(--w-m); color: var(--text-1); }
.row-x { color: var(--text-2); text-wrap: pretty; }
.rows.is-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
@media (max-width: 640px) { .rows.is-grid { grid-template-columns: 1fr; gap: 32px; } }
.has-icon { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 16px; align-items: start; }
.has-icon.has-aside { grid-template-columns: 32px minmax(0, 1fr) auto; }

/* duotone icons (aave): the back shape at 40 % of the hue, the front in full. Hovering the row lifts the layers apart:
   the back drifts down-left and brightens, the front rises up-right (an answer to the pointer only). */
.ic { width: 32px; height: 32px; flex: none; overflow: visible; }
.ic path { transition: translate var(--t-move) var(--ease), opacity var(--t-move) var(--ease), scale var(--t-move) var(--ease); transform-box: fill-box; transform-origin: center; }
.ic-b { fill: var(--hue); opacity: .4; }
.ic-a { fill: var(--hue); }
@media (hover: hover) and (pointer: fine) {
  .has-icon:hover .ic-b { translate: -1px 1px; opacity: .55; }
  .has-icon:hover .ic-a { translate: 1px -1px; scale: 1.06; }
  .has-icon:hover .ic:not(:has(.ic-a)) path:nth-child(1) { translate: -1px -1px; }
  .has-icon:hover .ic:not(:has(.ic-a)) path:nth-child(2) { translate: 1px -1px; }
  .has-icon:hover .ic:not(:has(.ic-a)) path:nth-child(3) { translate: 0 1px; }
}

/* stats (Pitch Protocol): three numbers over grey labels; no hairline, space is the boundary (owner 2026-11-11) */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.stats li { display: grid; align-content: start; gap: 4px; }
.stat-n { font-size: var(--fs-d); line-height: var(--lh-d); font-weight: var(--w-m); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat-l { font-size: var(--fs-s); line-height: var(--lh-s); color: var(--text-2); text-wrap: pretty; }
.stats + .rows { margin-top: 64px; }
@media (max-width: 640px) {
  .stats { grid-template-columns: 1fr; gap: 12px; }
  .stats li { grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 16px; }
  .stats + .rows { margin-top: 48px; }
}

/* ---------- Work: a media plate, the case head under it (edinabazi.com) ---------- */
.cases { display: grid; gap: 64px; }
.case-head { margin-top: 16px; }
.cases-more { margin-top: 40px; }
@media (max-width: 640px) { .cases-more .btn { width: 100%; } }
.case.is-in { animation: case-in var(--t-move) var(--ease-out) both; }
@keyframes case-in { from { opacity: 0; translate: 0 8px; } }
@media (prefers-reduced-motion: reduce) { .case.is-in { animation: none; } }
.case-icon { width: 32px; height: 32px; border-radius: var(--r-icon); box-shadow: 0 0 0 1px var(--ring); }
.btn-round { display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-card); color: var(--text-3); cursor: pointer;
  transition: color var(--t-hover) var(--ease-hover), background-color var(--t-hover) var(--ease-hover), opacity var(--t-hover) var(--ease-hover), scale var(--t-state) var(--ease); }
.btn-round svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.btn-round:active { scale: .96; }
.btn-round:disabled { opacity: .4; cursor: default; scale: 1; }
.case-go { margin-left: 8px; }
@media (hover: hover) and (pointer: fine) {
  .case-head:hover .case-go, .case:has(.case-media:hover) .case-go, .btn-round:not(:disabled):not(.case-go):hover { color: var(--text-1); background: light-dark(var(--g2), var(--g3)); }
}
.case-media { position: relative; display: block; overflow: hidden; border-radius: var(--r-card); background: var(--plate); }
.case-media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--ring); pointer-events: none; } /* image outline (Emil) */
.case-slot { display: grid; place-items: center; aspect-ratio: 2880 / 2048; padding: 24px; text-align: center; }
.scene { position: relative; aspect-ratio: 2880 / 2048; overflow: hidden; }
.shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.screen { position: absolute; left: var(--l); top: var(--t); width: var(--w); height: var(--h); background: var(--screen); pointer-events: none; }
.is-phone .screen { border-radius: 13.7% / 6.3%; object-fit: fill; }
.is-laptop .screen { border-radius: .75% / 1.13%; object-fit: cover; object-position: top; }
/* per-glass kind (anime streaming scenes: a tablet and a phone in one scene) */
.screen.s-tablet { border-radius: 2.4% / 3.4%; object-fit: cover; object-position: top; }
.screen.s-phone { border-radius: 12.5% / 5.8%; object-fit: cover; object-position: top; }
.is-cut .shot { z-index: 1; }
.is-cut .screen { border-radius: 0; object-fit: cover; object-position: top; }

/* ---------- Client logo strip (under the hero) and reviews ---------- */
.clients { margin-top: 64px; }
.logos { --bg-page: var(--page); overflow: hidden; color: var(--text-3);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent); }
.logos-track { display: flex; width: max-content; animation: marquee var(--t-marquee) linear infinite; }
.logos-set { display: flex; align-items: center; gap: 48px; padding-right: 48px; }
.logos-set svg { display: block; height: 24px; fill: currentColor; }
@media (hover: hover) and (pointer: fine) { .logos:hover .logos-track { animation-play-state: paused; } }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Showcase strip (after skroll.studio): full width out of the column; every tile landscape 1.41 and 440 high (owner
   2026-11-12: landscape only, no fade, no distortion); phones stand in the middle of a landscape plate. */
.showcase { --sc-h: 440px; --sc-gap: 24px; width: 100vw; margin: 64px 0 0 calc(50% - 50vw); overflow: hidden; }
.sc-track { display: flex; width: max-content; animation: marquee var(--t-showcase) linear infinite; }
.sc-set { display: flex; align-items: center; gap: var(--sc-gap); padding: 0 var(--sc-gap) 0 0; margin: 0; list-style: none; }
.sc-tile { position: relative; flex: none; height: var(--sc-h); aspect-ratio: 1.41; overflow: hidden; border-radius: var(--r-card); background: var(--plate); }
.sc-tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--ring); pointer-events: none; }
.sc-tile > img, .sc-tile > video { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; }
.sc-tile.is-phone { display: grid; place-items: center; }
.sc-tile.is-phone .device-stage { width: calc(var(--sc-h) * .84 * 1000 / 2044); } /* explicit: container-type collapses an auto width */
.sc-tile.is-phone .phone { width: 100%; }
@media (hover: hover) and (pointer: fine) { .showcase:hover .sc-track { animation-play-state: paused; } }
/* v2.js drives the strip: drag, swipe and wheel; vertical swipes still scroll the page */
.showcase.is-js { touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.showcase.is-js .sc-track { animation: none; will-change: transform; }
.showcase.is-dragging { cursor: grabbing; }
@media (max-width: 1000px) { .showcase { --sc-h: 360px; } }
@media (max-width: 640px) { .showcase { --sc-h: 240px; --sc-gap: 16px; margin-top: 48px; } }
@media (prefers-reduced-motion: reduce) { .showcase { overflow-x: auto; scrollbar-width: none; } .sc-set[aria-hidden] { display: none; } }

/* Showreel in the showcase's place: one 16:9 plate, centred out of the column at the case-page media width; same
   surface as .case-media (card radius, plate, inset ring). */
.reel { position: relative; width: min(var(--wide), 100vw - 2 * var(--gut)); margin: 64px 0 0 50%; translate: -50% 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-card); background: var(--plate); }
.reel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--ring); pointer-events: none; }
.reel > video { width: 100%; height: 100%; object-fit: cover; }
.reel > iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 640px) { .reel { margin-top: 48px; } }

/* the rail bleeds 4 on each side so card shadows are not cut; each card is exactly the column wide */
.logos + .rail { margin-top: 32px; }
.rail { container-type: inline-size; margin-inline: -4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 4px; scrollbar-width: none; overscroll-behavior-x: contain; }
.rail::-webkit-scrollbar { display: none; }
.rail:focus-visible { outline-offset: -2px; }
.rail-track { display: flex; gap: 16px; width: max-content; padding: 4px; }
.rail-track > li { display: flex; width: calc(100cqw - 8px); scroll-snap-align: start; }
.rail-nav { display: flex; gap: 8px; margin-top: 16px; }
.rail-nav[hidden] { display: none; }
.rv { display: flex; flex-direction: column; width: 100%; padding: 32px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-card); }
.rv blockquote { margin: 0; font-size: var(--fs-l); line-height: var(--lh-l); color: var(--text-2); letter-spacing: -.01em; text-wrap: pretty; }
.rv figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 24px; font-size: var(--fs-s); line-height: var(--lh-s); }
@media (max-width: 640px) { .rv { padding: 24px; } .rv blockquote { font-size: var(--fs-b); line-height: var(--lh-b); } }
.rv-ava { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--r-icon); box-shadow: 0 0 0 1px var(--ring); font-weight: var(--w-m); color: var(--on-accent); }
.rv-ava[data-hue="amber"] { background: var(--ill-amber); } .rv-ava[data-hue="blue"] { background: var(--ill-blue); } .rv-ava[data-hue="teal"] { background: var(--ill-teal); }
.rv-who { display: grid; }
.rv-name { color: var(--text-1); }
.rv-role { color: var(--text-2); }

/* ---------- Definition rows (benji): the row unit between hairlines, a value right ---------- */
.defs { border-bottom: 1px solid var(--line); }
.def { padding: 16px 0; border-top: 1px solid var(--line); }
.def-v { padding-left: 8px; font-weight: var(--w-m); font-variant-numeric: tabular-nums; white-space: nowrap; }
.def-v .t-3 { font-weight: var(--w-r); }
/* phone: the value goes under the title, so the text keeps the full width (owner 2026-11-11) */
@media (max-width: 640px) {
  .def.has-aside { grid-template-columns: 32px minmax(0, 1fr); row-gap: 4px; }
  .def.has-aside > :first-child { grid-row: 1 / span 3; }
  .def.has-aside .row-txt { display: contents; }
  .def.has-aside .row-t { grid-column: 2; grid-row: 1; }
  .def.has-aside .def-v { grid-column: 2; grid-row: 2; padding-left: 0; }
  .def.has-aside .row-x { grid-column: 2; grid-row: 3; }
}

/* ---------- Calculator: builder left, result right (owner 2026-11-13, «идеально»), in the 640 column ---------- */
.calc-wrap { margin-top: 48px; }
.calc-note { margin-top: 12px; font-size: var(--fs-s); line-height: var(--lh-s); color: var(--text-3); }
.calc {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden;
  border-radius: var(--r-card); background: linear-gradient(to top, var(--wash-brand), var(--page) 60%); /* page colour, the border and the hero wash (owner 2026-11-12) */ box-shadow: var(--shadow-card);
  font-size: var(--fs-s); line-height: var(--lh-s);
}
/* the builder: the inset question card (4px inside the border, concentric corners), three groups, one control family */
.calc-form { display: flex; flex-direction: column; gap: 20px; margin: 4px; padding: 16px; border-radius: calc(var(--r-card) - 4px); background: var(--surface); box-shadow: var(--shadow-card); }
.calc-g:last-child { margin-top: auto; } /* the spare height of a shorter size list opens above the extras */
.calc-k { display: block; padding: 0; margin-bottom: 8px; color: var(--text-2); }
.calc-hint { min-height: calc(2 * var(--lh-s)); margin-top: 8px; color: var(--text-2); }
/* size: the segmented track turned vertical, the plate slides down; each row carries its from-price */
.choices.is-col { flex-direction: column; border-radius: calc(var(--r-card) - 6px); }
.choices.is-col .opt-box { justify-content: space-between; min-height: 36px; padding: 0 12px; }
.opt-aside { font-weight: var(--w-r); color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.choices.is-col input:checked + .opt-box .opt-aside { color: var(--text-2); }
/* extras and rush: switch rows in the same grey track, the same row height and inset as the sizes */
.calc-sw { display: grid; gap: 2px; padding: 2px; border-radius: calc(var(--r-card) - 6px); background: var(--track); }
.calc-ex { display: contents; }
.opt.is-switch { flex: none; }
.opt.is-switch .opt-box { justify-content: flex-start; gap: 12px; min-height: 36px; padding: 0 8px 0 12px; color: var(--text-1); }
.opt.is-switch .opt-box > :first-child { margin-right: auto; }
.opt.is-switch input:checked + .opt-box { background: transparent; box-shadow: none; }
.opt.is-switch input:checked + .opt-box .sw { background: var(--accent); }
.opt.is-switch input:checked + .opt-box .sw::after { transform: translateX(16px); }
.opt.is-switch input:focus-visible + .opt-box { outline: 0; }
.opt.is-switch input:focus-visible + .opt-box .sw { outline: 2px solid var(--focus); outline-offset: 2px; }
.opt.is-switch:active .opt-box { scale: 1; }
.sw { position: relative; flex: none; width: 36px; height: 20px; border-radius: var(--r-pill); background: var(--g6); transition: background var(--t-hover) var(--ease-hover); }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: var(--r-pill); background: var(--on-accent); box-shadow: var(--shadow-knob); transition: transform var(--t-move) var(--ease); }
/* the result: mark, price from / to, one list (gains with a check), the button at the bottom */
.calc-doc { display: flex; flex-direction: column; gap: 20px; padding: 20px 20px 20px 24px; }
.doc-top { display: flex; align-items: center; justify-content: space-between; color: var(--text-2); }
.doc-mark { width: 20px; height: 20px; }
.doc-mark rect { fill: var(--text-3); }
.doc-mark path { fill: var(--page); }
.doc-num { display: grid; font-size: var(--fs-d); line-height: var(--lh-d); font-weight: var(--w-m); letter-spacing: -.03em; font-variant-numeric: tabular-nums; font-variation-settings: var(--opsz-head); }
.doc-num .tone { color: var(--text-3); }
.doc-lines { display: grid; align-content: start; gap: 8px; font-size: var(--fs-s); line-height: var(--lh-s); }
.doc-lines li { display: flex; gap: 8px; }
.doc-lines li::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 2px; background: var(--text-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.5'/%3E%3Cpath d='m5.5 8.2 1.8 1.8 3.3-3.6'/%3E%3C/svg%3E") center / 16px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.5'/%3E%3Cpath d='m5.5 8.2 1.8 1.8 3.3-3.6'/%3E%3C/svg%3E") center / 16px no-repeat; }
.doc-lines li.is-new { animation: doc-in var(--t-move) var(--ease) both; }
@keyframes doc-in { from { opacity: 0; transform: translateY(6px); } }
.calc-doc > .btn { width: 100%; margin-top: auto; }
@media (prefers-reduced-motion: reduce) { .doc-lines li.is-new { animation: none; } .sw, .sw::after { transition: none; } }
@media (max-width: 640px) {
  .calc { grid-template-columns: 1fr; }
  .calc-doc { padding: 20px; }
  .opt.is-switch .opt-box, .choices.is-col .opt-box { min-height: 40px; }
}

/* segmented track: one white plate slides to the picked item (app.js places .plate) */
.choices { position: relative; isolation: isolate; display: flex; gap: 2px; padding: 2px; border-radius: var(--r-pill); background: var(--track); }
.opt { position: relative; display: flex; flex: 1 1 0; min-width: 0; -webkit-tap-highlight-color: transparent; }
.opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opt-box {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 32px; padding: 0 8px;
  border-radius: var(--r-pill); font-weight: var(--w-m); color: var(--text-2); white-space: nowrap;
  transition: color var(--t-hover) var(--ease-hover), background-color var(--t-hover) var(--ease-hover), box-shadow var(--t-hover) var(--ease-hover), scale var(--t-state) var(--ease);
}
.opt input:checked + .opt-box { color: var(--text-1); background: var(--knob); box-shadow: var(--shadow-knob); }
.opt input:focus-visible + .opt-box { outline: 2px solid var(--focus); outline-offset: 2px; }
.opt:active .opt-box { scale: var(--press); }
.choices > .plate { position: absolute; left: 0; top: 0; z-index: -1; border-radius: var(--r-pill); background: var(--knob); box-shadow: var(--shadow-knob); pointer-events: none;
  transition: transform var(--t-move) var(--ease-swipe), width var(--t-move) var(--ease-swipe), height var(--t-move) var(--ease-swipe); }
.choices > .plate.is-snap { transition: none; }
.choices.has-plate .opt input[type="radio"]:checked + .opt-box { background: transparent; box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .opt:hover input:not(:checked) + .opt-box { color: var(--text-1); } }

/* chips: off = a hairline, on = a quiet fill with a check */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips .opt { flex: none; }
.chips .opt-box { min-height: 32px; padding: 0 14px 0 12px; color: var(--text-1); box-shadow: inset 0 0 0 1px var(--edge); }
.chips .opt input:checked + .opt-box { background: var(--track); box-shadow: inset 0 0 0 1px transparent; }
@media (hover: hover) and (pointer: fine) { .chips .opt:hover input:not(:checked) + .opt-box { background: var(--g2); } }
.mark { position: relative; display: inline-block; width: 14px; height: 14px; flex: none; }
.mark::before, .mark::after { content: ""; position: absolute; inset: 0; background: currentColor; transition: opacity var(--t-fast) var(--ease), scale var(--t-fast) var(--ease); }
.mark::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3 8h10' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3 8h10' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.mark::after { opacity: 0; scale: .6; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8.5 3.2 3.2L13 4.8' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8.5 3.2 3.2L13 4.8' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.choices .mark { display: none; }
input:checked + .opt-box .mark::before { opacity: 0; scale: .6; }
input:checked + .opt-box .mark::after, input:not(:checked) + .opt-box .mark::before { opacity: 1; scale: 1; transition-duration: var(--t-state); }

/* range: a thin track filled in ink up to a white knob */
.range { --f: 0; --k: 20px; -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 24px; margin: 0; background: transparent; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(var(--text-1), var(--text-1)) 0 / calc(var(--k) / 2 + (100% - var(--k)) * var(--f)) 100% no-repeat, var(--g4); }
.range::-moz-range-track { height: 4px; border-radius: 4px; background: linear-gradient(var(--text-1), var(--text-1)) 0 / calc(var(--k) / 2 + (100% - var(--k)) * var(--f)) 100% no-repeat, var(--g4); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: var(--k); height: var(--k); margin-top: -8px; border: 0; border-radius: 50%; background: #fff; box-shadow: var(--shadow-knob); transition: scale var(--t-state) var(--ease); }
.range::-moz-range-thumb { width: var(--k); height: var(--k); border: 0; border-radius: 50%; background: #fff; box-shadow: var(--shadow-knob); transition: scale var(--t-state) var(--ease); }
.range:active::-webkit-slider-thumb { scale: 1.1; }
.range:active::-moz-range-thumb { scale: 1.1; }
.range:focus-visible { outline: 0; }
.range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--focus); outline-offset: 2px; }

/* numbers that change: digits roll, a changed line rises in (app.js) */
.roll { white-space: nowrap; font-variant-numeric: tabular-nums; }
.roll-d, .roll-c { display: inline-block; vertical-align: top; height: 1lh; transition: width var(--t-roll) var(--ease-swipe), opacity var(--t-move) var(--ease); }
.roll-d { width: 1ch; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.roll-s { display: block; white-space: pre; transform: translateY(calc(var(--n) * -1lh)); transition: transform var(--t-roll) var(--ease-swipe); }
.calc-sum, .calc-sum .roll { white-space: normal; }
.is-tick { animation: tick var(--t-move) var(--ease); }
@keyframes tick { from { opacity: 0; transform: translateY(2px); } }

/* ---------- Inline term (benji's inline component): dotted words, a card over them ---------- */
.pop { position: relative; }
.pop-btn { color: var(--text-1); cursor: help; text-decoration: underline dotted var(--g8); text-decoration-thickness: 1px; text-underline-offset: .25em; transition: text-decoration-color var(--t-hover) var(--ease-hover); }
.pop.is-open .pop-btn { text-decoration-color: currentColor; }
@media (hover: hover) and (pointer: fine) { .pop-btn:hover { text-decoration-color: currentColor; } }
@media (pointer: coarse) { .pop-btn { padding-block: calc((var(--tap) - 1lh) / 2); } }
.pop-card {
  position: absolute; left: var(--shift, 0px); bottom: calc(100% + 8px); z-index: 20;
  display: none; width: 280px; max-width: calc(100vw - 32px); padding: 16px;
  border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-float); color: var(--text-1);
  opacity: 0; scale: .96; transform-origin: left bottom;
  transition: opacity var(--t-fast) var(--ease), scale var(--t-fast) var(--ease), display var(--t-fast) allow-discrete;
}
.pop.is-open .pop-card { display: block; opacity: 1; scale: 1; transition-duration: var(--t-move); }
@starting-style { .pop.is-open .pop-card { opacity: 0; scale: .96; } }
.sys { display: grid; justify-items: start; font-size: var(--fs-s); line-height: var(--lh-s); }
.sys-core { padding: 2px 8px; border-radius: var(--r-tag); box-shadow: inset 0 0 0 1.5px var(--text-1); font-weight: var(--w-m); }
.sys-tree { display: grid; gap: 16px; width: 100%; margin-left: 16px; padding-top: 16px; }
.sys-hub { position: relative; display: grid; gap: 8px; padding-left: 24px; }
.sys-hub::before { content: ""; position: absolute; left: 0; top: -16px; bottom: 0; width: 1px; background: var(--g6); }
.sys-hub:last-child::before { bottom: auto; height: calc(16px + var(--lh-s) / 2); }
.sys-hub::after { content: ""; position: absolute; left: 0; top: calc(var(--lh-s) / 2); width: 16px; height: 1px; background: var(--g6); }
.sys-hub b { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--w-m); }
.sys-hub b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--hue); }
.sys .tags { display: flex; flex-wrap: wrap; gap: 4px; padding-right: 16px; }
.sys .tag { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--r-tag); background: var(--track); color: var(--text-2); white-space: nowrap; }
/* the same tree at page size in a case chapter (Banana Wallet «Система», 2026-11-12): body type, 32 tags, the root's
   counts as tags beside it, each branch: its name, its screen count in grey on its own line, its flows as tags */
.sys.is-lg { margin-top: 40px; font-size: var(--fs-b); line-height: var(--lh-b); }
.sys.is-lg .sys-root { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sys.is-lg .sys-core { padding: 4px 12px; }
.sys.is-lg .sys-tree { width: auto; gap: 24px; margin-left: 20px; padding-top: 24px; }
.sys.is-lg .sys-hub { gap: 8px; padding-left: 32px; }
.sys.is-lg .sys-hub::before { top: -24px; }
.sys.is-lg .sys-hub:last-child::before { height: calc(24px + var(--lh-b) / 2); }
.sys.is-lg .sys-hub::after { top: calc(var(--lh-b) / 2); width: 24px; }
.sys-n { margin-top: -4px; font-size: var(--fs-s); line-height: var(--lh-s); color: var(--text-3); }
.sys.is-lg .tags { gap: 8px; padding-right: 0; }
.sys.is-lg .tag { height: 32px; padding: 0 12px; font-size: var(--fs-s); }

/* ---------- Steps: a stepper (owner 2026-11-11). The number in a 32 circle on the icon slot of a row (gap 16),
   centred on the title line; a hairline joins the circles with 4 of air at each end. ---------- */
.steps { display: grid; gap: 24px; counter-reset: s; }
.steps > .row { position: relative; padding-left: 48px; counter-increment: s; }
.steps > .row::before {
  content: counter(s); position: absolute; left: 0; top: -4px;
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface); box-shadow: var(--shadow-card);
  font-size: var(--fs-s); line-height: var(--lh-s); color: var(--text-2); font-variant-numeric: tabular-nums;
}
.steps > .row:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 32px; bottom: -16px; width: 1px; margin-left: -.5px; background: var(--line); }
/* a step with a picture: the tray under its text, the rail runs past it; steps with trays sit 40 apart */
.step-pic { display: grid; place-items: center; height: 208px; margin-top: 16px; padding: 24px; overflow: hidden; border-radius: var(--r-card); background: var(--plate); }
.steps:has(.step-pic) { gap: 40px; }
.steps + .actions { margin-top: 32px; }
.steps:has(.step-pic) > .row:not(:last-child)::after { bottom: -32px; }

/* kit Price: one value at the head size, as the calculator total */
.price { font-size: var(--fs-h); line-height: var(--lh-h); font-weight: var(--w-m); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* kit Meta: page properties after Notion, justified (owner 2026-11-12). Rows 40 between hairlines (owner: «добавим
   в мета бордеры»), a grey icon 16 and label 14 on the left, values on the right edge: one value as text, several as tags 24. */
.meta { display: grid; border-bottom: 1px solid var(--line); }
.meta-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-block: 8px; border-top: 1px solid var(--line); }
.meta dt { display: flex; align-items: center; gap: 8px; flex: none; font-size: var(--fs-s); line-height: 24px; color: var(--text-3); }
.meta dt svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.meta dd { margin: 0; font-size: var(--fs-s); line-height: 24px; color: var(--text-1); text-align: right; }
.meta dd.is-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.tag { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--r-tag); background: var(--track); font-size: var(--fs-s); line-height: var(--lh-s); color: var(--text-1); white-space: nowrap; }

/* ---------- FAQ: a chat with the studio; the visitor in ink on the right, the studio on a white card left ---------- */
.fc-log { display: grid; gap: 24px; }
.fc-pair { display: grid; gap: 8px; }
.fc-pair[hidden] { display: none; }
.bubble { padding: 10px 14px; border-radius: var(--r-card); text-wrap: pretty; }
.bubble-out { justify-self: end; max-width: 80%; border-bottom-right-radius: 4px; background: var(--text-1); color: var(--page); font-weight: var(--w-m); }
.bubble-in { min-width: 0; border-bottom-left-radius: 4px; background: var(--surface); box-shadow: var(--shadow-card); color: var(--text-1); }
.fc-in { display: flex; align-items: flex-end; gap: 8px; max-width: 88%; }
.fc-ava { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--text-1); }
.fc-ava svg { width: 20px; height: 20px; fill: var(--page); }
.fc-pair.is-in .bubble-out { animation: pop var(--t-move) var(--ease) both; transform-origin: right bottom; }
.fc-pair.is-in .fc-in { animation: pop var(--t-move) var(--ease) var(--t-move) both; transform-origin: left bottom; }
@keyframes pop { from { opacity: 0; scale: .96; } }
.fc-foot { display: grid; gap: 16px; justify-items: end; margin-top: 40px; }
.fc-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.fc-chips:empty { display: none; }
/* suggested questions rhyme with the calculator chips: 32, outline, no shadow; the own question stays a real button */
.fc-chip { height: auto; min-height: 32px; padding: 6px 14px; background: transparent; box-shadow: inset 0 0 0 1px var(--edge); white-space: normal; text-align: left; }
@media (hover: hover) and (pointer: fine) { .fc-chip:hover { background: var(--g2); } }
@media (max-width: 640px) { .bubble-out { max-width: 88%; } .fc-in { max-width: 96%; } .fc-foot { margin-top: 32px; } .fc-own { width: 100%; } }

/* ---------- Final: a violet card, everything centred, a white button (owner 2026-11-11) ---------- */
.cta { display: grid; justify-items: center; padding: 80px 32px; border-radius: var(--r-card); background: var(--accent); color: var(--on-accent); text-align: center; box-shadow: var(--shadow-accent); }
.cta h2 { font-size: var(--fs-h); line-height: var(--lh-h); font-weight: var(--w-m); letter-spacing: -.02em; text-wrap: balance; }
.cta-lead { max-width: 440px; margin-top: 8px; font-size: var(--fs-l); line-height: var(--lh-l); color: rgba(255, 255, 255, .9); letter-spacing: -.01em; text-wrap: balance; }
.cta .btn { margin-top: 32px; }
@media (max-width: 640px) { .cta { padding: 56px 24px; } .cta .btn { width: 100%; } }

/* ---------- Case page (owner 2026-11-11, after competitors' cases): the landing's grid and units ---------- */
/* Text in the landing's 640 column; pictures (cover, chapter shots) break out to the media measure 1072, as competitors do (merge
   1078, lazarev 1344: narrow text, wide media). Cards (next case, final) and the footer stay in the column, as on the landing. Vertical steps from the landing:
   content starts at 176 (the hero's top), pictures 32 under their head, sections 128; a header and its own picture
   and numbers 64 apart. */
.case-page { position: relative; --w: min(var(--wide), 100vw - 2 * var(--gut)); }
.case-cover, .chap-plate { width: var(--w); margin-inline: calc((100% - var(--w)) / 2); }

/* header: back link 48 above the content start; the project as one row (icon 32 + name, the case card's head on the
   landing; owner 2026-11-12: the big icon over a grey name read noisy), then the claim, lead, actions, the meta */
.case-hero { padding-top: calc(96px - var(--bar)); }
.case-hero .back { margin: 0 0 48px; } /* icon only (owner 2026-11-12), the kit round button like ↗ on case cards */
.case-name { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; font-weight: var(--w-m); color: var(--text-1); }
.case-mark { flex: none; width: 32px; height: 32px; border-radius: var(--r-icon); box-shadow: 0 0 0 1px var(--ring); }
.ch-main .hero-lead { max-width: none; margin: 20px 0 0; text-wrap: pretty; }
.ch-main .actions { margin-top: 32px; }
.case-hero .meta { margin-top: 48px; }
.case-cover { margin-top: 64px; }
@media (max-width: 640px) {
  .case-hero { padding-top: calc(80px - var(--bar)); } .case-hero .back { margin-bottom: 32px; }
  .ch-main .actions { flex-direction: column; } .ch-main .actions .btn { width: 100%; }
  .case-hero .meta { margin-top: 40px; }
}

/* devices: our iPhone bezel, the iPad drawn in CSS */
.device-stage { display: grid; place-items: center; width: 100%; container-type: inline-size; }
.phone { position: relative; width: min(100%, 288px); }
.phone-bezel { position: relative; z-index: 1; width: 100%; height: auto; pointer-events: none; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .16)); }
.phone-screen { position: absolute; left: 5.333%; top: 2.5%; width: 89.333%; height: 95%; object-fit: cover; border-radius: 13.7% / 6.3%; background: var(--screen); }
.tablet { --tw: 100cqw; position: relative; width: var(--tw); padding: calc(var(--tw) * .03); border-radius: calc(var(--tw) * .045); background: #0b0b0c;
  box-shadow: inset 0 0 0 calc(var(--tw) * .004) #c7c7cc; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .16)); }
.tablet-screen { display: block; width: 100%; aspect-ratio: 1440 / 1024; object-fit: cover; object-position: top; border-radius: calc(var(--tw) * .016); background: var(--screen); }

/* numbers: the landing stats row under the cover (results up front, lazarev) */
.case-cover + .cmeta { margin-top: 64px; }

/* chapters: head in the column; a phone as its scene photo, an iPad straight on the page, a flat shot with a hairline */
.chap-txt h2 { font-size: var(--fs-h); line-height: var(--lh-h); font-weight: var(--w-m); letter-spacing: -.02em; text-wrap: balance; }
.chap-plate { display: grid; place-items: center; margin-top: 96px; } /* no plate under a mockup: the device frame is the edge (owner 2026-11-11) */
.chap + .chap { margin-top: 96px; } /* text sits halfway between two mockups: 96 above and below (owner 2026-11-11) */
.chap-plate .tablet { --tw: 100cqw; }
.chap-plate .phone { width: min(100%, 320px); }

.chap-plate > .scene { width: 100%; border-radius: var(--r-card); overflow: hidden; outline: 1px solid var(--ring); outline-offset: -1px; }

/* case shots (Banana Wallet, 2026-11-12): phones in our bezel while a scene is not rendered, a pair side by side;
 sized up after «всё довольно мелкое» (owner 2026-11-12) */
.dev-row { display: flex; justify-content: center; gap: 32px; width: 100%; }
.dev-row .device-stage { --pw: 360px; width: var(--pw); max-width: 100%; } /* container-type collapses an auto width in flex */
.dev-row .phone { width: 100%; }
.dev-row.is-pair .device-stage { --pw: 320px; max-width: calc(50% - 16px); }
@media (max-width: 640px) {
  .dev-row { gap: 16px; }
  .dev-row .device-stage { --pw: 280px; }
  .dev-row.is-pair .device-stage { --pw: 168px; max-width: calc(50% - 8px); }
}

/* contents: on the brand's gutter under the sticky bar, from 1440
   where it clears the 1072 media by 32; a pill with the current chapter below that */
.toc, .toc-m { position: fixed; z-index: 5; opacity: 0; visibility: hidden; transition: opacity var(--t-move) var(--ease), visibility 0s linear var(--t-move); }
.tocs.is-on .toc, .tocs.is-on .toc-m { opacity: 1; visibility: visible; transition: opacity var(--t-move) var(--ease); }
.toc { top: calc(var(--bar) + 24px); left: var(--gut); width: 128px; }
.toc-h { margin-bottom: 12px; font-size: var(--fs-s); line-height: var(--lh-s); font-weight: var(--w-m); }
.toc ol { display: grid; border-left: 1px solid var(--line); }
.toc a { display: block; margin-left: -1px; white-space: nowrap; padding: 6px 0 6px 16px; border-left: 1px solid transparent; font-size: var(--fs-s); line-height: var(--lh-s); color: var(--text-3);
  transition: color var(--t-hover) var(--ease-hover), border-color var(--t-hover) var(--ease-hover); }
.toc a[aria-current] { border-left-color: var(--text-1); color: var(--text-1); }
.toc-m { top: calc(var(--bar) + 8px); /* under the sticky bar */ left: 50%; width: min(320px, 100vw - 2 * var(--gut)); transform: translateX(-50%); }
.toc-m-btn { display: grid; grid-template-columns: auto minmax(0, 1fr) 16px; align-items: center; gap: 8px; width: 100%; height: 40px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--shadow-float); font-size: var(--fs-s); line-height: var(--lh-s); text-align: left; cursor: pointer; }
.toc-m-n { color: var(--text-3); font-variant-numeric: tabular-nums; }
.toc-m-t { overflow: hidden; font-weight: var(--w-m); white-space: nowrap; text-overflow: ellipsis; }
.toc-m-btn svg { width: 16px; height: 16px; fill: none; stroke: var(--text-3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t-state) var(--ease); }
.toc-m.is-open .toc-m-btn svg { transform: rotate(180deg); }
.toc-m-list { position: absolute; top: calc(100% + 8px); left: 0; right: 0; padding: 8px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-float); opacity: 0; transform: scale(.96); transform-origin: top center; pointer-events: none; transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.toc-m.is-open .toc-m-list { opacity: 1; transform: none; pointer-events: auto; transition-duration: var(--t-state); }
.toc-m-list a { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; padding: 10px 12px; border-radius: var(--r-pill); font-size: var(--fs-s); line-height: var(--lh-s); color: var(--text-2); }
.toc-m-list a::before { content: attr(data-n); color: var(--text-3); font-variant-numeric: tabular-nums; }
.toc-m-list a[aria-current] { background: var(--track); color: var(--text-1); }
@media (hover: hover) and (pointer: fine) { .toc a:not([aria-current]):hover, .toc-m-list a:hover { color: var(--text-1); } }
@media (min-width: 1440px) { .toc-m { display: none; } }
@media (max-width: 1439px) { .toc { display: none; } }

/* next case: a plain section with the kit case card (owner 2026-11-12), no own styles */
@media (max-width: 640px) {
  .phone { width: min(100%, 232px); }
}

/* ---------- Footer (competitors, cronicle.me): link columns, the copyright, a pale wordmark on the column, cut by the page edge ---------- */
.foot { margin-top: var(--sec); font-size: var(--fs-s); line-height: var(--lh-s); color: var(--text-3); }
.foot-top { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(max-content, 1fr); gap: 24px; }
.foot-col { display: grid; align-content: start; justify-items: start; }
.foot-h { display: flex; align-items: center; min-height: 32px; }
.foot a, .foot button { display: inline-flex; align-items: center; min-height: 32px; padding: 0; border: 0; background: none; color: var(--text-2); font: inherit; cursor: pointer; transition: color var(--t-hover) var(--ease-hover); }
.foot-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 24px; margin-top: 48px; }
.foot-base > p:first-child { min-height: 32px; display: flex; align-items: center; }
.foot-set { display: flex; align-items: center; gap: 8px; }
/* Theme: an icon-only track with one lifted plate (the calculator's selected look); the plate follows the root theme.
   Language: one button next to it, the same height and fill. */
.seg { --seg-h: 28px; --seg-w: 32px; position: relative; isolation: isolate; display: inline-flex; padding: 2px; border-radius: var(--r-pill); background: var(--track); }
.seg::before { content: ""; position: absolute; z-index: -1; top: 2px; left: 2px; width: var(--seg-w); height: var(--seg-h); border-radius: var(--r-pill); background: var(--knob); box-shadow: var(--shadow-knob); transition: translate var(--t-move) var(--ease-swipe); }
:root[data-theme="dark"] .seg::before { translate: var(--seg-w) 0; }
.foot .seg button { justify-content: center; width: var(--seg-w); min-height: var(--seg-h); border-radius: var(--r-pill); color: var(--text-3); }
.foot .seg button[aria-pressed="true"] { color: var(--text-1); }
.seg svg, .lang-btn svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.foot .lang-btn { gap: 6px; padding: 0 12px 0 10px; border-radius: var(--r-pill); background: var(--track); font-weight: var(--w-m); }
@media (pointer: coarse) { .seg { --seg-h: 40px; --seg-w: 40px; } }
.foot-mark { position: relative; margin-top: 48px; user-select: none; -webkit-user-select: none; }
.foot-mark svg { display: block; width: 100%; height: auto; overflow: hidden; fill: none; stroke: var(--text-1); stroke-opacity: .08; stroke-width: 1px; }
.foot-mark path { vector-effect: non-scaling-stroke; }
/* Under the pointer the letters themselves get a violet outline with a light glow (owner 2026-11-12, was a dashed frame on the box). */
.foot-mark-hot { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--t-move) var(--ease);
  -webkit-mask-image: radial-gradient(circle 160px at var(--mx, -400px) var(--my, -400px), #000 35%, transparent); mask-image: radial-gradient(circle 160px at var(--mx, -400px) var(--my, -400px), #000 35%, transparent); }
.foot-mark-hot svg { stroke: var(--mark-line); stroke-opacity: 1; filter: drop-shadow(0 0 6px var(--mark-glow)); }
@media (hover: hover) and (pointer: fine) { .foot-mark:hover .foot-mark-hot { opacity: 1; } }
@media (hover: hover) and (pointer: fine) { .foot a:hover, .foot button:hover { color: var(--text-1); } }
@media (pointer: coarse) { .foot a, .foot button, .foot-h { min-height: var(--tap); } }
@media (max-width: 640px) { .foot-top { grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto 1fr; } .foot-top > :first-child { grid-row: span 3; } .foot-base { margin-top: 32px; } }

/* ---------- Lab picker (lab pages only): one floating panel, the block on screen lit ---------- */
.pk { position: fixed; z-index: 20; top: 72px; right: 16px; width: 232px; max-height: calc(100vh - 88px); overflow: auto; padding: 8px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-float); font-size: var(--fs-s); line-height: var(--lh-s); }
.pk-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 4px; }
.pk-title { font-weight: var(--w-m); }
.pk-toggle, .pk-label { padding: 0; border: 0; background: none; cursor: pointer; }
.pk-toggle { color: var(--text-3); }
.pk-row { display: grid; gap: 8px; padding: 12px; border-radius: var(--r-card); transition: background-color var(--t-hover) var(--ease-hover); }
.pk-row.is-here { background: var(--g2); }
.pk-label { justify-self: start; font-weight: var(--w-m); color: var(--text-1); text-align: left; }
.pk-seg { display: flex; gap: 2px; padding: 2px; border-radius: var(--r-pill); background: var(--track); }
.pk-seg button { flex: 1; min-width: 0; height: 28px; padding: 0 8px; border: 0; border-radius: var(--r-pill); background: none; color: var(--text-2); font-size: var(--fs-s); cursor: pointer; }
.pk-seg button[aria-pressed="true"] { background: var(--knob); color: var(--text-1); box-shadow: var(--shadow-knob); }
.pk-v, .pk-hint { color: var(--text-3); }
.pk-foot { display: grid; gap: 8px; padding: 12px; }
.pk-copy { height: 36px; border: 0; border-radius: var(--r-pill); background: var(--text-1); color: var(--page); font-weight: var(--w-m); cursor: pointer; }
.pk.is-min .pk-row:not(.is-here), .pk.is-min .pk-foot { display: none; }
@media (max-width: 999px) { .pk { top: auto; right: 12px; bottom: 12px; left: 12px; width: auto; max-height: 64vh; } }

/* ---------- A fact the owner has not given yet ---------- */
.placeholder { display: inline-block; padding: 2px 8px; border: 1.5px dashed var(--g8); border-radius: var(--r-tag); font-size: var(--fs-s); line-height: var(--lh-s); color: var(--text-2); }
[data-placeholder] { outline: 1.5px dashed var(--accent); outline-offset: 2px; }

/* touch: controls one size up, targets 44 (emil-touch-and-accessibility); last, so it beats the blocks above */
@media (pointer: coarse) {
  .btn-round { width: 40px; height: 40px; }
  .fc-chip { min-height: 40px; padding-block: 10px; }
  .fc-chips { gap: 8px; }
  .brand { display: inline-flex; align-items: center; min-height: var(--tap); }
  .opt-box, .chips .opt-box { min-height: 40px; }
  .chips { gap: 8px; }
  .toc-m-list a { padding-block: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}
.is-theming *, .is-theming *:not(.seg)::before, .is-theming *::after { transition: none !important; } /* the theme plate still slides */

/* ---------- Logo lab, round 2 (2026-11-11): the picture leads; v2/index-lab.html ---------- */
#logo .sec-lead + * { margin-top: 40px; }
#logo .actions { margin-top: 40px; }
.lg-m svg, .lg-you svg, .lg-badge svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* a: the mosaic: 8 x 5 cells, logos and empty cells, fading out to the edges; the big dashed cell orders */
.lg-mosaic-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-auto-flow: dense; gap: 8px;
  mask-image: radial-gradient(ellipse 70% 75% at 50% 45%, #000 55%, transparent 100%); }
.lg-m { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--r-icon); background: var(--track); }
img.lg-m { background: none; box-shadow: 0 0 0 1px var(--ring); }
.lg-m.is-big { grid-column: span 2; grid-row: span 2; }
a.lg-m.is-slot { display: grid; place-content: center; justify-items: center; gap: 8px; background: none; border: 1px dashed var(--g8); color: var(--text-3); font-size: var(--fs-s); line-height: var(--lh-s); text-align: center;
  transition: color var(--t-hover) var(--ease-hover), border-color var(--t-hover) var(--ease-hover); }
a.lg-m.is-slot svg { width: 24px; height: 24px; }
@media (hover: hover) and (pointer: fine) { a.lg-m.is-slot:hover { color: var(--text-1); border-color: var(--text-3); } }
@media (max-width: 640px) { .lg-mosaic-grid { gap: 4px; } a.lg-m.is-slot span { display: none; } }
/* ---------- Logo f (owner 2026-11-11: «f кайф… сделаем в карточке», «доработать контуры, цвета, отступы», «реалистично»):
   Kargul's final (Eagle MV899LRH6JUIU) in a grey card: centred head, the drawing (kit.LogoBuild), the buttons. ---------- */
.lg-kargul { overflow: hidden; padding: 56px 48px 48px; border-radius: var(--r-card); background: var(--track); text-align: center; }
.lg-kargul h2 { font-size: var(--fs-h); line-height: var(--lh-h); font-weight: var(--w-m); letter-spacing: -.02em; text-wrap: balance; }
.lg-kargul-lead { max-width: 440px; margin: 8px auto 0; color: var(--text-2); text-wrap: balance; }
.lg-line-wrap { margin: 16px -48px 0; overflow: hidden; }
/* kit.LogoBuild (owner 2026-11-11: «более чисто по цветам, контуры 1px, аккуратно векторно»): every line 1px,
   three greys only: g4 the grid, g6 the shapes and keylines, g8 the guides and the selection; ink for the mark */
.lb { display: block; width: 100%; height: auto; }
.lb * { vector-effect: non-scaling-stroke; stroke-width: 1px; }
.lb-grid { fill: none; stroke: var(--g4); }
.lb-ring, .lb-keys > * { fill: none; stroke: var(--g6); }
.lb-axis, .lb-arc { fill: none; stroke: var(--g6); stroke-dasharray: 3 3; }
.lb-dia path { fill: var(--g8); stroke: none; }
.lb-plate { fill: var(--surface); stroke: var(--g6); }
.lb-guide { fill: none; stroke: var(--g8); stroke-dasharray: 3 3; }
.lb-mark { fill: var(--text-1); stroke: none; }
/* The live edit is coral (owner 2026-11-11: «f дорабатываем», more alive for the offer): selection, handles, anchors and the
   price tag where an editor shows the size; the scene stays in the three greys. */
.lb-sel { fill: none; stroke: var(--ill-coral); }
.lb-hd rect { fill: var(--surface); stroke: var(--ill-coral); }
.lb-pts circle { fill: var(--surface); stroke: var(--ill-coral); }
.lg-line-wrap { position: relative; }
.lb-tag { position: absolute; left: 50%; top: calc(77.5% + 8px); translate: -50% 0; display: flex; align-items: baseline; gap: 6px; padding: 2px 10px;
  border-radius: var(--r-tag); background: var(--ill-coral); color: var(--g1); font-size: var(--fs-b); line-height: var(--lh-b); font-weight: var(--w-m); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lb-tag .was { color: inherit; opacity: .85; }
.lb-tag .was-x { stroke: currentColor; }
#logo .lg-line-wrap + .actions { justify-content: center; margin-top: 8px; }
/* The build plays once in view (v2.js sets data-build on the drawing's parent: wait = first frame held, on = the whole
   build, edit = hover replays only the edit): scene and keylines, anchors placed one by one, the mark fills, the
   selection and the price tag. Same manner as the logo page's process pictures. */
@keyframes lb-fade { from { opacity: 0; } }
@keyframes lb-pop { from { opacity: 0; scale: .4; } }
@keyframes lb-lift { from { opacity: 0; transform: translateY(8px); } }
[data-build] :is(.lb-scene, .lb-plate, .lb-keys > *, .lb-guide, .lb-mark, .lb-sel, .lb-pts circle, .lb-hd rect), [data-build] > .lb-tag {
  animation: var(--a, lb-fade) var(--dur, var(--t-move)) var(--ease) var(--d, 0s) both var(--play, running); }
[data-build="wait"] { --play: paused; }
.lb-plate, .lb-pts circle, .lb-hd rect { transform-box: fill-box; transform-origin: center; }
.lb-plate { --a: pop; --d: 100ms; }
.lb-keys > * { --d: calc(200ms + var(--i, 0) * 40ms); }
.lb-keys > :nth-child(2) { --i: 1; } .lb-keys > :nth-child(3) { --i: 2; } .lb-keys > :nth-child(4) { --i: 3; } .lb-keys > :nth-child(5) { --i: 4; } .lb-keys > :nth-child(6) { --i: 5; }
.lb-guide { --d: 480ms; }
.lb-pts circle { --a: lb-pop; --dur: var(--t-state); --d: calc(600ms + var(--i, 0) * 40ms); }
.lb-pts circle:nth-child(2) { --i: 1; } .lb-pts circle:nth-child(3) { --i: 2; } .lb-pts circle:nth-child(4) { --i: 3; } .lb-pts circle:nth-child(5) { --i: 4; }
.lb-pts circle:nth-child(6) { --i: 5; } .lb-pts circle:nth-child(7) { --i: 6; } .lb-pts circle:nth-child(8) { --i: 7; } .lb-pts circle:nth-child(9) { --i: 8; } .lb-pts circle:nth-child(10) { --i: 9; }
.lb-mark { --d: 1000ms; }
.lb-sel { --dur: var(--t-state); --d: calc(600ms + 640ms); }
.lb-hd rect { --a: lb-pop; --dur: var(--t-state); --d: calc(600ms + 680ms + var(--i, 0) * 30ms); }
.lb-hd rect:nth-child(2) { --i: 1; } .lb-hd rect:nth-child(3) { --i: 2; } .lb-hd rect:nth-child(4) { --i: 3; }
.lb-tag { --a: lb-lift; --d: calc(600ms + 840ms); }
/* hover: a resize, the mark with its selection grows a little about the icon centre as if a corner is dragged, the
   handles fill coral (the active state); a transition, so leaving midway turns it back */
.lb-edit { transform-box: view-box; transform-origin: 320px 160px; transition: transform var(--t-move) var(--ease); }
.lb-hd rect { transition: fill var(--t-hover) var(--ease-hover); }
@media (hover: hover) and (pointer: fine) {
  :is(.lg-line-wrap, .lp-build):hover .lb-edit { transform: scale(1.06); }
  :is(.lg-line-wrap, .lp-build):hover .lb-hd rect { fill: var(--ill-coral); }
}
@media (prefers-reduced-motion: reduce) { .lb-edit { transition: none; } }
@media (prefers-reduced-motion: reduce) { [data-build] :is(.lb *, .lb-tag) { animation: none; } }
@media (max-width: 640px) {
  .lg-kargul { padding: 40px 24px 32px; }
  .lg-line-wrap { margin: 8px -24px 0; }
  .lg-line-wrap .lb { width: 170%; margin-left: -35%; }
}

/* ---------- Hero badge lab, round 5 (owner 2026-11-12: «оставить А, но не фанси, нет креатива»; «фиолетовым, но subtle»).
   Control size 32, text 14 in two tones like the h1. Subtle violet: a faint tint, a violet hairline, the mark in violet;
   violet is the "message the manager" colour and the badge opens that chat. a is static, b-d move on their own (the
   living part), e and f answer the hover. ---------- */
/* dark: a lighter violet so the cells and arrow carry on the dark page; the tint sits on the page, not the grey surface */
.b3 { --b3-violet: light-dark(var(--violet), oklch(74% .15 295));
  --b3-on: var(--b3-violet); --b3-off: light-dark(color-mix(in oklab, var(--violet) 22%, transparent), oklch(74% .15 295 / .3));
  /* alpha, not a solid fill (owner 2026-11-12): the hero wash shows through */
  --b3-tint: light-dark(color-mix(in oklab, var(--violet) 7%, transparent), oklch(74% .15 295 / .1));
  --b3-tint-hover: light-dark(color-mix(in oklab, var(--violet) 11%, transparent), oklch(74% .15 295 / .16));
  --b3-ring: light-dark(color-mix(in oklab, var(--violet) 22%, transparent), oklch(74% .15 295 / .34)); --b3-loop: 2.4s; --b3-beam: 4s;
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; margin-bottom: 24px; border-radius: var(--r-pill); white-space: nowrap;
  color: var(--text-1); background: var(--b3-tint); /* no outline (owner 2026-11-12) */
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); /* the hero pattern lines do not read through the badge (owner 2026-11-12) */
  font-size: var(--fs-s); line-height: var(--lh-s); font-weight: var(--w-m); text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-hover) var(--ease-hover), scale var(--t-state) var(--ease); }
@media (hover: hover) { .b3:hover { background: var(--b3-tint-hover); } }
.b3:active { scale: var(--press); }
/* one line in one colour, no second tone (owner 2026-11-12: «сделай его просто целостным, одна строка») */
.b3-t2 { color: inherit; }
.b3 .lg-to { width: 16px; height: 16px; margin-right: -2px; fill: none; stroke: var(--b3-on); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .7; transition: translate var(--t-state) var(--ease), opacity var(--t-hover) var(--ease-hover); }
@media (hover: hover) { .b3:hover .lg-to { translate: 2px 0; opacity: 1; } }

/* a: the studio mark 2×2, three faint squares and one lit */
.b3-mark { width: 16px; height: 16px; flex: none; overflow: visible; }
.b3-mark rect { fill: var(--b3-off); }
.b3-mark rect.on, .b3-mark rect.run { fill: var(--b3-on); }

/* b: the lit square runs round the mark, one cell at a time, like a slide puzzle */
.b3-mark .run { animation: b3-run calc(var(--b3-loop) * 2) var(--ease) infinite; }
@keyframes b3-run { 0%, 18% { translate: 0 0; } 25%, 43% { translate: 8px 0; } 50%, 68% { translate: 8px 8px; } 75%, 93% { translate: 0 8px; } 100% { translate: 0 0; } }

/* c: a 3×3 pixel display, cells light up in a loop */
.is-pix rect { animation: b3-pix var(--b3-loop) var(--ease) infinite; }
.is-pix rect:nth-child(1) { animation-delay: 0s; } .is-pix rect:nth-child(2) { animation-delay: .15s; } .is-pix rect:nth-child(3) { animation-delay: .3s; }
.is-pix rect:nth-child(6) { animation-delay: .45s; } .is-pix rect:nth-child(9) { animation-delay: .6s; } .is-pix rect:nth-child(8) { animation-delay: .75s; }
.is-pix rect:nth-child(7) { animation-delay: .9s; } .is-pix rect:nth-child(4) { animation-delay: 1.05s; } .is-pix rect:nth-child(5) { animation-delay: 1.2s; }
@keyframes b3-pix { 0%, 100% { fill: var(--b3-off); } 20% { fill: var(--b3-on); } 50% { fill: var(--b3-off); } }

/* d: eight squares (8pt), a violet wave runs through them */
.b3-wave { display: inline-flex; align-items: center; gap: 2px; }
.b3-wave i { width: 4px; height: 4px; border-radius: 1px; background: var(--b3-off); animation: b3-wave var(--b3-loop) var(--ease) infinite; }
.b3-wave i:nth-child(2) { animation-delay: .08s; } .b3-wave i:nth-child(3) { animation-delay: .16s; } .b3-wave i:nth-child(4) { animation-delay: .24s; }
.b3-wave i:nth-child(5) { animation-delay: .32s; } .b3-wave i:nth-child(6) { animation-delay: .4s; } .b3-wave i:nth-child(7) { animation-delay: .48s; } .b3-wave i:nth-child(8) { animation-delay: .56s; }
@keyframes b3-wave { 0%, 40%, 100% { background: var(--b3-off); translate: 0 0; } 15% { background: var(--b3-on); translate: 0 -3px; } }

/* e: on hover the mark turns into the Telegram plane and the line rolls to the action */
.b3-swap { position: relative; display: grid; width: 16px; height: 16px; flex: none; overflow: hidden; }
.b3-swap > * { grid-area: 1 / 1; width: 16px; height: 16px; transition: translate var(--t-move) var(--ease), opacity var(--t-move) var(--ease); }
.b3-swap > svg:last-child { fill: var(--b3-on); translate: 0 16px; opacity: 0; }
.b3-rows { display: grid; height: 20px; overflow: hidden; }
.b3-rows > span { grid-area: 1 / 1; transition: translate var(--t-move) var(--ease), opacity var(--t-move) var(--ease); }
.b3-rows > span:last-child { color: var(--b3-on); translate: 0 20px; opacity: 0; }
@media (hover: hover) {
  .b3-e:hover .b3-swap > svg:first-child, .b3-e:hover .b3-rows > span:first-child { translate: 0 -20px; opacity: 0; }
  .b3-e:hover .b3-swap > svg:last-child, .b3-e:hover .b3-rows > span:last-child { translate: 0 0; opacity: 1; } }

/* f: a violet beam travels the outline */
@property --b3-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.b3-f::before { content: ""; position: absolute; inset: 0; z-index: -1; padding: 1px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--b3-a), transparent 0 70%, var(--b3-on) 85%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: b3-beam var(--b3-beam) linear infinite; }
@keyframes b3-beam { to { --b3-a: 360deg; } }

@media (prefers-reduced-motion: reduce) { .b3 *, .b3::before { animation: none !important; transition: none !important; } }

/* kit page only (site/kit.html): air between two examples in one section, a stand-in picture for a step tray */
.kit-gap { height: 40px; }
.kit-pic { width: 64px; height: 64px; border-radius: var(--r-icon); background: var(--surface); box-shadow: var(--shadow-card); }