/* CORE: Syntra's public site — the tymko.tech 2026 design system (dark, big display type, thin grid lines, glass
   crystals). One stylesheet for the landing (LandingPage.jsx loads it next to landing.css), /features/, /faq/,
   /compare/, /solutions/, /templates/, /tools/ (scripts/seo/build_pages.py), /connectors/ and 404.html.
   Everything is scoped to .site (the <body> of a static page, the landing's root <div>), so it never reaches the app
   when the landing hands over to it. Accents (buttons, links, chips, eyebrows, focus) are violet; background lighting
   is Syntra's emerald (--glow-rgb), never the accent. The «Оформлення» picker overrides both through --s-* (theme.js).
   Dark by default; the picker's «Тема» sets html[data-site-theme='light'] (theme.js, before the first paint), which swaps
   the tokens below for the light ones — every colour on the site comes from a token, so both themes stay in step.
   Every page renders complete without JavaScript; motion only changes how things arrive (html.js-anim). */
.site {
  --bg: #08080d; --bg-2: #0f0f18; --card: #12121c; --card-2: #171724;
  --bg-rgb: 8, 8, 13; --card-rgb: 18, 18, 28;
  --line-rgb: 196, 188, 255;
  --line: rgba(var(--line-rgb), 0.08); --line-2: rgba(var(--line-rgb), 0.16); --line-3: rgba(var(--line-rgb), 0.28);
  --text: #eeedf8; --sub: #a9a7c6; --muted: #8a88a8;
  --violet: #6853db; --violet-hover: #5641cb; --violet-2: #8b7cf0; --violet-mid: #b4a8ff; --violet-end: #7fe0c2;
  --violet-2-rgb: 139, 124, 240; --violet-end-rgb: 127, 224, 194; --emerald-rgb: 16, 185, 129; --emerald-2-rgb: 52, 211, 153;
  --accent: var(--s-accent, var(--violet)); --accent-hover: var(--s-accent-hover, var(--violet-hover));
  --accent-2: var(--s-accent-2, var(--violet-2)); --accent-mid: var(--s-accent-mid, var(--violet-mid)); --accent-end: var(--s-accent-end, var(--violet-end));
  --accent-rgb: 104, 83, 219; --accent-2-rgb: var(--s-accent-2-rgb, var(--violet-2-rgb)); --accent-end-rgb: var(--s-accent-end-rgb, var(--violet-end-rgb));
  --glow-rgb: var(--s-glow-rgb, var(--emerald-rgb)); --glow-2-rgb: var(--s-glow-2-rgb, var(--emerald-2-rgb));
  --ok: #7ee2a0; --warn: #f6cf6e; --risk: #ff9ba6; --risk-rgb: 255, 155, 166; --live-rgb: 92, 194, 119;
  /* surfaces and effects: subtle fills (hovers, chips), popovers, the lit panels, screenshot frames, shadows, scrims */
  --fill-rgb: 255, 255, 255; --pop: #141420; --panel-1: #0e0d1c; --panel-2: #09090f; --shot-bg: #0b0b12;
  --sh-pop: 0 20px 50px rgba(0, 0, 0, 0.5); --sh-sheet: 0 30px 80px rgba(0, 0, 0, 0.6); --sh-float: rgba(0, 0, 0, 0.6); --scrim: rgba(4, 4, 8, 0.55);
  --sel-a: 0.4; --sel-text: #fff; --on-accent: #fff;
  /* the white tymko.tech logotype and the dark glass crystal as drawn; the light theme turns each for its light page */
  --logo-filter: none; --crystal-filter: saturate(1); --grain-o: 0.045;
  --display: 'Onest', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --pad: clamp(16px, 4vw, 64px); --max: 1440px; --header-h: 82px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --radius: 28px; --r-card: 24px; --r-panel: 32px;
  color-scheme: dark;
  position: relative; min-height: 100vh; margin: 0; background: var(--bg); color: var(--text);
  font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip;
}
/* The light theme: the Syntra app's own light palette (frontend/src/utils/constants.js THEMES.light) — the lavender
   page #ededf3, near-white frosted cards, hairlines in the app's ink, text #111128 / #3d3d60 / #5f5f86, the same violet
   buttons (white text 5.5:1), lighter emerald glows. tymko.tech's light theme uses the same values, so the two sites read
   as one family. Every text tone reads at 4.5:1 or more on the page, the cards and the tinted chips. */
html[data-site-theme='light'] .site {
  --bg: #ededf3; --bg-2: #e6e6ef; --card: #f6f6fa; --card-2: #fbfbfd;
  --bg-rgb: 237, 237, 243; --card-rgb: 246, 246, 250;
  --line-rgb: 20, 18, 50;
  --line: rgba(var(--line-rgb), 0.11); --line-2: rgba(var(--line-rgb), 0.18); --line-3: rgba(var(--line-rgb), 0.32);
  --text: #111128; --sub: #3d3d60; --muted: #5f5f86;
  --violet-2: #5a46d4; --violet-mid: #5240c4; --violet-end: #08664f;
  --violet-2-rgb: 90, 70, 212; --violet-end-rgb: 8, 102, 79; --emerald-rgb: 100, 210, 173; --emerald-2-rgb: 123, 226, 189;
  --ok: #137a3a; --warn: #855400; --risk: #b3243a; --risk-rgb: 179, 36, 58; --live-rgb: 22, 163, 74;
  --fill-rgb: 20, 18, 50; --pop: #fbfbfd; --panel-1: #f6f6fa; --panel-2: #ececf4; --shot-bg: #e3e3ec;
  --sh-pop: 0 20px 50px rgba(38, 30, 84, 0.16); --sh-sheet: 0 30px 80px rgba(38, 30, 84, 0.2); --sh-float: rgba(38, 30, 84, 0.14); --scrim: rgba(20, 18, 50, 0.28);
  --sel-a: 0.22; --sel-text: #15131e;
  --logo-filter: brightness(0) opacity(0.85); --crystal-filter: invert(1) hue-rotate(180deg); --grain-o: 0.035;
  color-scheme: light;
}
html.site-html { background: #08080d; overflow-x: clip; }
/* the page behind a public page (the static pages' <html>, the SPA's <body> on the landing and the legal pages) is the
   theme's page colour from the first paint; html[data-site-page] never reaches the app's own screens (App.jsx) */
html.site-html[data-site-theme='light'], html[data-site-page][data-site-theme='light'] body { background: #ededf3; }
html[data-site-page][data-site-theme='light'] { color-scheme: light; }
/* the app's cookie card (components/CookieBanner.jsx, inline colours for the dark app) on a light public page */
html[data-site-page][data-site-theme='light'] .cookie-card { background: rgba(251, 251, 253, 0.95); border-color: rgba(20, 18, 50, 0.1); box-shadow: 0 12px 40px rgba(38, 30, 84, 0.14); }
html[data-site-page][data-site-theme='light'] .cookie-card span { color: #111128 !important; }
html[data-site-page][data-site-theme='light'] .cookie-card a { color: #5a46d4 !important; }
/* a switch of theme is instant: no hover transition runs half-way through it (theme.js sets the class for two frames) */
html.site-switching .site, html.site-switching .site *, html.site-switching .site *::before, html.site-switching .site *::after { transition: none !important; }
.site *, .site *::before, .site *::after { box-sizing: border-box; }
.site img, .site svg { display: block; max-width: 100%; }
.site img { height: auto; }
.site a { color: inherit; }
.site p { margin: 0; }
.site ul, .site ol { margin: 0; padding: 0; }
.site figure { margin: 0; }
.site button { font: inherit; color: inherit; }
.site strong, .site b { font-weight: 600; }
.site h1, .site h2, .site h3 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; text-wrap: balance; -webkit-hyphens: manual; hyphens: manual; overflow-wrap: break-word; }
.site :focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 8px; }
.site ::selection { background: rgba(var(--accent-2-rgb), var(--sel-a)); color: var(--sel-text); }
.site .vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.site .nw { white-space: nowrap; }
.site [id] { scroll-margin-top: 96px; }
.site .ic { flex: none; }

.site .wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }
.site main, .site .site-header, .site .site-footer { position: relative; z-index: 1; }
.site main { display: block; overflow-x: clip; }
.site .section { padding-block: clamp(80px, 9vw, 136px); }
.site .guides { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.site .guides .wrap { height: 100%; display: grid; grid-template-columns: repeat(4, 1fr); }
.site .guides span { border-left: 1px solid var(--line); }
.site .guides span:last-child { border-right: 1px solid var(--line); }
.site .grain { position: fixed; inset: -50%; z-index: 40; pointer-events: none; opacity: var(--grain-o);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: site-grain 1.2s steps(6) infinite; }
@keyframes site-grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-4%)} 60%{transform:translate(-4%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }

/* ---------- type ---------- */
.site .eyebrow { display: inline-block; font: 500 12px/1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-2); }
.site .eyebrow--muted { color: var(--muted); }
.site .grad { background: linear-gradient(100deg, var(--accent-2) 0%, var(--accent-mid) 45%, var(--accent-end) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.site .lead { color: var(--sub); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; }
.site .h-xl { font-size: clamp(40px, 6.4vw, 104px); line-height: 0.96; letter-spacing: -0.05em; }
.site .h-lg { font-size: clamp(34px, 4.6vw, 72px); line-height: 0.98; letter-spacing: -0.045em; }
.site .mask { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.site .mask > span { display: inline-block; }
.js-anim .site .mask > span, .js-anim.site .mask > span { animation: site-rise 1.3s var(--ease-out) both; animation-delay: calc(0.08s + var(--i, 0) * 0.11s); }
.js-anim .site .fade-in, .js-anim.site .fade-in { animation: site-fade-up 1.1s var(--ease-out) both; animation-delay: calc(0.35s + var(--i, 0) * 0.1s); }
@keyframes site-rise { from { transform: translateY(110%); } to { transform: none; } }
@keyframes site-fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ---------- buttons, links ---------- */
.site .btn { display: inline-flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 8px 8px 26px; border: 1px solid transparent; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 500 15px/1.25 var(--body); text-decoration: none; cursor: pointer; text-align: left; transition: background 0.3s ease; }
.site .btn:hover, .site .btn:focus-visible { background: var(--accent-hover); }
.site .btn .arr { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--on-accent); color: var(--accent); transition: transform 0.35s var(--ease); }
.site .btn .arr svg { width: 14px; height: 14px; }
.site .btn:hover .arr, .site .btn:focus-visible .arr { transform: rotate(45deg); }
.site .btn--sm { min-height: 46px; padding: 6px 6px 6px 20px; font-size: 14px; }
.site .btn--sm .arr { width: 34px; height: 34px; }
.site .btn--ghost { background: transparent; border: 1px solid var(--line-2); color: var(--text); }
.site .btn--ghost .arr { background: rgba(var(--fill-rgb), 0.08); color: var(--text); }
.site .btn--ghost:hover, .site .btn--ghost:focus-visible { background: rgba(var(--fill-rgb), 0.06); }
.site .btn--block { width: 100%; justify-content: space-between; }
.site .btn--plain { padding: 8px 26px; }
.site .link { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line-3); padding-bottom: 3px; font-weight: 500; transition: border-color 0.3s; }
.site .link:hover, .site .link:focus-visible { border-color: var(--text); }
.site .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.site .tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.site .tags > * { font: 500 11.5px/1 var(--mono); letter-spacing: 0.04em; color: var(--sub); border: 1px solid var(--line-2); border-radius: 999px; padding: 7px 10px; }
.site .ticks { list-style: none; padding: 0; display: grid; gap: 10px; }
.site .ticks li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; align-items: start; }
.site .ticks .ic { width: 16px; height: 16px; margin-top: 0.22em; color: var(--accent-end); }
/* round icon tile: 44px, glyph 20px — the glyph sits in the exact centre (grid place-items) */
.site .tile { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(var(--accent-2-rgb), 0.08); color: var(--accent-2); font: 500 13px/1 var(--mono); }
.site .tile .ic, .site .tile svg { width: 20px; height: 20px; }
.site .chip { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(var(--fill-rgb), 0.03); color: var(--sub); font-size: 14px; white-space: nowrap; text-decoration: none; transition: background 0.25s, color 0.25s, border-color 0.25s; }
.site a.chip:hover, .site a.chip:focus-visible { color: var(--text); background: rgba(var(--accent-2-rgb), 0.12); border-color: rgba(var(--accent-2-rgb), 0.45); }
.site .chip .ic { width: 15px; height: 15px; color: var(--accent-2); }
.site .badge { font: 500 10.5px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-end); padding: 7px 9px; border-radius: 999px; border: 1px solid rgba(var(--accent-end-rgb), 0.4); background: rgba(var(--accent-end-rgb), 0.08); white-space: nowrap; }

/* ---------- surfaces ---------- */
.site .sec-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 40px; margin-bottom: clamp(36px, 4vw, 56px); }
.site .sec-head > div { display: grid; gap: 18px; max-width: 980px; }
.site .sec-head > p { max-width: 440px; color: var(--sub); }
.site .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); }
.site .panel { position: relative; overflow: hidden; border-radius: var(--r-panel); border: 1px solid var(--line-2); background: radial-gradient(120% 140% at 85% 0%, rgba(var(--glow-rgb), 0.42), transparent 60%), linear-gradient(180deg, var(--panel-1), var(--panel-2)); }
.site .shot { position: relative; overflow: hidden; border-radius: var(--r-card); border: 1px solid var(--line-2); background: var(--shot-bg); box-shadow: 0 40px 100px -40px rgba(var(--glow-rgb), 0.45); }
.site .shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.site .glass { position: relative; pointer-events: none; }
.site .glass::before { content: ''; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--glow-rgb), 0.32), transparent); z-index: -1; filter: blur(10px); }
.site .glass img { width: 100%; height: auto; }
.site img[src*='glass-asterisk'] { filter: var(--crystal-filter); }
/* product screenshots in both app themes: .sd (the dark app) by default, .sl (the light app) on the light site; the hidden
   one is display:none and lazy, so it is never downloaded (/features/ adds a switch under each screenshot: shots.css) */
.site .sl { display: none; }
html[data-site-theme='light'] .site .sl { display: block; }
html[data-site-theme='light'] .site .sd { display: none; }
.js-anim .site .glass__float, .js-anim.site .glass__float { animation: site-float 8s ease-in-out infinite alternate; }
@keyframes site-float { from { transform: translateY(-1.5%) rotate(-2deg); } to { transform: translateY(1.5%) rotate(3deg); } }

/* ---------- header ---------- */
.site .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; border-bottom: 1px solid transparent; transition: background 0.4s ease, border-color 0.4s ease; }
.site .site-header.is-solid { background: rgba(var(--bg-rgb), 0.74); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: var(--line); }
@media (pointer: coarse), (hover: none), (max-width: 860px) { .site .site-header.is-solid { background: rgba(var(--bg-rgb), 0.94); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.site .site-header__bar { display: flex; align-items: center; gap: 10px; min-height: var(--header-h); }
/* «Syntra by tymko.tech». Optical centring: the x-height centre of «by» and the visual centre of the logotype (its
   alpha centroid, 47.5% of its height) sit on the centre of the cap height of «Syntra» — measured in Chrome */
/* The app's own touch rule (responsive.css: links and buttons at least 44 px on coarse pointers) does not belong on the
   public site: it stretched block links taller than their text, so on a phone «Syntra» sat 10 px above the header
   buttons and some links lost their spacing. The site sets its own tap targets (header buttons are 44 px). */
@media (pointer: coarse) { .site a, .site button, .site select, .site [role='button'] { min-height: 0; min-width: 0; } }
.site .brand { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; flex: none; --by-dy: -0.96px; --tt-dy: -0.14px; }   /* never squeezed */
.site .brand__name { display: block; font: 600 24px/1 var(--display); letter-spacing: -0.04em; color: var(--text); text-decoration: none; }
.site .brand__by { display: block; font: 500 11px/1 var(--mono); color: var(--muted); translate: 0 var(--by-dy, 0px); }
.site .brand__tt { display: flex; line-height: 1; translate: 0 var(--tt-dy, 0px); }
.site .brand__tt img { display: block; height: 14px; width: auto; opacity: 0.6; filter: var(--logo-filter); transition: opacity 0.25s; }
.site .brand__tt:hover img { opacity: 0.9; }
/* the landing's way back to tymko.tech (?from=tymko.tech, its referrer or this tab's earlier visit) */
/* back to tymko.tech: a round button with an arrow, the same size as the other header buttons (no words, so it never
   crowds the brand on a phone) */
.site .back-site { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; margin-right: 6px; border: 1px solid var(--line-2); border-radius: 50%; color: var(--sub); text-decoration: none; transition: color 0.25s, background 0.25s; }
.site .back-site:hover, .site .back-site:focus-visible { color: var(--text); background: rgba(var(--fill-rgb), 0.05); }
.site .back-site > svg { width: 18px; height: 18px; }
.site .site-nav { margin-right: 10px; }
.site .site-nav ul { display: flex; gap: 2px; list-style: none; }
.site .site-nav a { display: inline-flex; padding: 10px 12px; border-radius: 999px; color: var(--sub); font-size: 15px; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: color 0.25s, background 0.25s; }
.site .site-nav a:hover, .site .site-nav a:focus-visible, .site .site-nav a[aria-current] { color: var(--text); background: rgba(var(--fill-rgb), 0.05); }
.site .pill-link { display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--text); font-size: 14px; text-decoration: none; white-space: nowrap; transition: background 0.25s; flex: none; }
.site .pill-link:hover, .site .pill-link:focus-visible { background: rgba(var(--fill-rgb), 0.06); }
.site .site-header__cta { margin-left: 4px; flex: none; }
/* language menu: panel padding 6, items 36px with 4px gaps, item radius 14 - 6 = 8 (tymko.tech LangMenu) */
.site .lang-menu { position: relative; flex: none; }
.site .lang-menu__toggle { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; color: var(--text); font: 500 13px/1 var(--mono); cursor: pointer; white-space: nowrap; transition: background 0.25s; }
.site .lang-menu__toggle .ic { width: 12px; height: 12px; transition: transform 0.2s ease; }
.site .lang-menu__toggle:hover, .site .lang-menu.is-open .lang-menu__toggle { background: rgba(var(--fill-rgb), 0.06); }
.site .lang-menu.is-open .lang-menu__toggle .ic { transform: rotate(180deg); }
.site .lang-menu__list { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; display: grid; gap: 4px; min-width: 176px; padding: 6px; list-style: none; background: var(--pop); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--sh-pop); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; }
.site .lang-menu--up .lang-menu__list { top: auto; bottom: calc(100% + 8px); transform: translateY(-6px); }
.site .lang-menu--up .lang-menu__toggle .ic { transform: rotate(180deg); }
.site .lang-menu--up.is-open .lang-menu__toggle .ic { transform: none; }
.site .lang-menu.is-open .lang-menu__list, html:not(.js) .site .lang-menu:focus-within .lang-menu__list { opacity: 1; visibility: visible; transform: none; }
.site .lang-menu__list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 36px; padding: 0 12px; border-radius: 8px; color: var(--sub); font: 500 14px/1 var(--body); text-decoration: none; white-space: nowrap; transition: background 0.15s, color 0.15s; }
.site .lang-menu__list a[aria-current] { color: var(--text); background: rgba(var(--fill-rgb), 0.05); }
.site .lang-menu__list a[aria-current]::after { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-end); }
.site .lang-menu__list a:hover, .site .lang-menu__list a:focus-visible { color: var(--text); background: rgba(var(--accent-2-rgb), 0.2); }
.site .lang-tick { display: none; }
.site .icon-btn { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-2); border-radius: 50%; background: transparent; color: var(--text); cursor: pointer; transition: background 0.25s; }
.site .icon-btn:hover { background: rgba(var(--fill-rgb), 0.06); }
.site .icon-btn .ic { width: 18px; height: 18px; }
.site .burger { display: none; gap: 5px; align-content: center; }
.site .burger span { display: block; width: 16px; height: 1.5px; background: currentColor; border-radius: 2px; }
@media (max-width: 1180px) { .site .site-nav { display: none; } .site .burger { display: inline-grid; } }
/* The row is measured (site.js fitHeader; LandingPage.jsx with landing/headerFit.js): where a language's words do not
   fit, first «by tymko.tech» goes (is-tight), then the section links move into the menu (is-narrow: the burger layout),
   then the sign-in link, which the menu has too (is-compact). Without them the row is the full one, so nothing moves on
   load where it fits. */
.site .site-header.is-tight .brand__by, .site .site-header.is-tight .brand__tt { display: none; }
.site .site-header.is-narrow .site-nav { display: none; }
.site .site-header.is-narrow .burger { display: inline-grid; }
.site .site-header.is-compact .pill-link { display: none; }
@media (max-width: 640px) {
  .site { --header-h: 70px; }
  .site .site-header__cta { padding: 5px; min-height: 44px; }
  .site .site-header__cta .btn__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .site .site-header__cta .arr { width: 34px; height: 34px; }
  .site .site-header .pill-link { display: none; }
  .site .site-header .sp-open:not(.sp-open--keep) { display: none; }   /* phones: the picker is in the menu */
}
@media (max-width: 480px) { .site .site-header .brand__by, .site .site-header .brand__tt { display: none; } }
/* without JavaScript the burger cannot open anything: the section links stay in the header, scrolling sideways */
html:not(.js) .site .burger { display: none; }
@media (max-width: 1180px) { html:not(.js) .site .site-nav { display: block; overflow-x: auto; min-width: 0; } }

/* ---------- full-screen menu (tymko.tech pattern): numbered sections, CTA, sign-in, languages ---------- */
.site .mmenu { position: fixed; inset: 0; z-index: 80; overflow-y: auto; overscroll-behavior: contain; background: radial-gradient(90% 60% at 90% 0%, rgba(var(--glow-rgb), 0.3), transparent 70%), var(--bg); opacity: 0; transition: opacity 0.3s ease; }
.site .mmenu[hidden] { display: none; }
.site .mmenu.is-open { opacity: 1; }
.site .mmenu__inner { min-height: 100%; display: flex; flex-direction: column; padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px) + var(--cookie-card-h, 0px)); }   /* the cookie strip (phones) stays above the menu: its foot (languages, «Оформлення») ends above the strip */
.site .mmenu__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--header-h); }
.site .mmenu__list { list-style: none; margin-top: clamp(16px, 4vh, 48px); border-top: 1px solid var(--line); }
.site .mmenu__list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: baseline; border-bottom: 1px solid var(--line); }
.site .mmenu__n { font: 500 12px/1 var(--mono); color: var(--accent-2); }
.site .mmenu__list a { display: block; padding: 14px 0; color: var(--text); font: 600 clamp(26px, 7vw, 44px)/1.1 var(--display); letter-spacing: -0.04em; text-decoration: none; }
.site .mmenu__list a:hover, .site .mmenu__list a:focus-visible { color: var(--accent-2); }
.site .mmenu__foot { margin-top: auto; padding-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 14px; }
.site .mmenu__lang { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; width: 100%; }
.site .mmenu__lang a { display: inline-grid; place-items: center; min-width: 48px; height: 40px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--sub); font: 500 13px/1 var(--mono); text-decoration: none; }
.site .mmenu__lang a[aria-current] { color: var(--text); background: rgba(var(--fill-rgb), 0.07); border-color: var(--line-3); }
html.menu-open, html.menu-open body { overflow: hidden; }

/* ---------- hero ---------- */
.site .hero { position: relative; min-height: 100svh; display: grid; align-items: end; padding-block: calc(var(--header-h) + 48px) 64px; overflow: hidden; isolation: isolate; }
.site .hero__glow { position: absolute; width: 70vw; height: 70vw; right: -20vw; top: -20vw; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--glow-rgb), 0.28), transparent); z-index: -2; pointer-events: none; }
.site .hero__glass { position: absolute; right: -4vw; top: 9vh; width: min(50vw, 700px); z-index: -1; }
.site .hero__glass img { filter: drop-shadow(0 40px 120px rgba(var(--glow-rgb), 0.35)); }
.site .hero__glass img[src*='glass-asterisk'] { filter: var(--crystal-filter) drop-shadow(0 40px 120px rgba(var(--glow-rgb), 0.35)); }
/* hero background (picker): crystal (default), globe, gradient mesh, product screenshot */
.site [data-bgv] { display: none; }
html:not([data-site-bg]) .site [data-bgv='crystal'], html[data-site-bg='crystal'] .site [data-bgv='crystal'], html[data-site-bg='globe'] .site [data-bgv='globe'], html[data-site-bg='mesh'] .site [data-bgv='mesh'], html[data-site-bg='shot'] .site [data-bgv='shot'] { display: block; }
html:not([data-site-bg]).site [data-bgv='crystal'], html[data-site-bg='crystal'].site [data-bgv='crystal'], html[data-site-bg='globe'].site [data-bgv='globe'], html[data-site-bg='mesh'].site [data-bgv='mesh'], html[data-site-bg='shot'].site [data-bgv='shot'] { display: block; }
.site .hero__globe { width: min(44vw, 620px); top: 11vh; right: -2vw; }
.site .hero__mesh { position: absolute; inset: -10% -10% 0 20%; z-index: -1; pointer-events: none; background: radial-gradient(40% 50% at 70% 30%, rgba(var(--glow-rgb), 0.5), transparent 70%), radial-gradient(34% 44% at 48% 62%, rgba(var(--accent-2-rgb), 0.38), transparent 70%), radial-gradient(28% 36% at 88% 72%, rgba(var(--accent-end-rgb), 0.3), transparent 70%); filter: blur(30px); }
.js-anim .site .hero__mesh { animation: site-mesh 14s ease-in-out infinite alternate; }
@keyframes site-mesh { from { transform: translate(0, 0) scale(1); } to { transform: translate(-3%, 4%) scale(1.08); } }
.site .hero__shotbg { position: absolute; right: -6vw; top: calc(var(--header-h) + 5vh); width: min(54vw, 780px); z-index: -1; pointer-events: none; perspective: 1600px; }
.site .hero__shotbg .shot { transform: rotateY(-16deg) rotateX(7deg) rotateZ(1.5deg); transform-origin: right center; box-shadow: 0 60px 140px -30px rgba(var(--glow-rgb), 0.55); -webkit-mask-image: linear-gradient(200deg, #000 45%, transparent 95%); mask-image: linear-gradient(200deg, #000 45%, transparent 95%); }
.site .hero__title { margin-top: 18px; font-size: clamp(44px, 8.6vw, 140px); line-height: 0.94; letter-spacing: -0.055em; }
.site .hero__low { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 48px; align-items: end; margin-top: 44px; }
.site .hero__lead { max-width: 620px; }
.site .hero__proof { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 24px; color: var(--sub); font-size: 14px; list-style: none; }
.site .hero__proof li { display: inline-flex; align-items: center; gap: 8px; }
.site .hero__proof .ic { width: 15px; height: 15px; color: var(--accent-end); }
.site .hero__hint { position: absolute; left: var(--pad); bottom: 18px; display: flex; align-items: center; gap: 12px; font: 500 11px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.site .hero__hint i { display: block; width: 1px; height: 34px; background: linear-gradient(var(--accent-2), transparent); transform-origin: top; animation: site-hint 2s ease-in-out infinite; }
@keyframes site-hint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@media (min-width: 1441px) { .site .hero__hint { left: calc((100vw - var(--max)) / 2 + var(--pad)); } }
@media (max-width: 860px) { .site .hero__low { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .site .hero { min-height: 0; padding-top: calc(var(--header-h) + 150px); padding-bottom: 48px; }
  .site .hero__glass { width: 96vw; right: -34vw; top: 40px; opacity: 0.6; }
  .site .hero__globe { width: 80vw; right: -24vw; top: 50px; }
  .site .hero__mesh { inset: -10% -30% 30% 0; }
  .site .hero__shotbg { width: 120vw; right: -62vw; top: 70px; opacity: 0.45; }
  .site .hero__hint { display: none; }
  .site .hero__proof { flex-direction: column; gap: 8px; }
}
/* a page hero (features hub, content hubs): no full-screen height */
.site .hero--page { min-height: 0; align-items: start; padding-block: calc(var(--header-h) + clamp(72px, 9vw, 130px)) clamp(56px, 7vw, 100px); }
.site .hero--page .hero__title { font-size: clamp(36px, 6.2vw, 100px); line-height: 0.96; }
.site .hero--page .hero__glass { top: 6vh; width: min(42vw, 600px); }
.site .hero--page .hero__globe { width: min(36vw, 500px); }
.site .hero--page .hero__low { margin-top: 36px; }
@media (max-width: 760px) {
  .site .hero--page { padding-top: calc(var(--header-h) + 130px); }
  .site .hero--page .hero__glass { width: 82vw; right: -30vw; top: 36px; opacity: 0.55; }
  .site .hero--page .hero__globe { width: 70vw; right: -22vw; }
}

/* ---------- cards, numbered rows, process line, facts ---------- */
.site .fgrid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 18px; list-style: none; padding: 0; }
.site .fcard { padding: clamp(26px, 2.6vw, 36px); display: flex; flex-direction: column; gap: 14px; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); transition: border-color 0.3s, translate 0.4s var(--ease); }
.site .fcard:hover { border-color: var(--line-2); }
.site .fcard__n { font: 500 12px/1 var(--mono); color: var(--accent-2); letter-spacing: 0.1em; }
.site .fcard h3 { font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.03em; line-height: 1.1; }
.site .fcard p { color: var(--sub); font-size: 16px; }
.site .fcard .tags { margin-top: auto; padding-top: 8px; }
@media (max-width: 1000px) { .site .fgrid { grid-template-columns: repeat(min(var(--cols, 3), 2), minmax(0, 1fr)); } }
@media (max-width: 640px) { .site .fgrid { grid-template-columns: minmax(0, 1fr); } }
.site .rows { list-style: none; border-bottom: 1px solid var(--line); }
.site .row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px 20px; padding: 24px 0; border-top: 1px solid var(--line); }
.site .row__n { font: 500 13px/1 var(--mono); color: var(--accent-2); padding-top: 0.55em; }
.site .row h3 { font-size: clamp(21px, 1.9vw, 27px); letter-spacing: -0.03em; }
.site .row p { grid-column: 2; color: var(--sub); font-size: 16px; }
.site .steps { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 0 28px; position: relative; list-style: none; }
.site .steps::before { content: ''; position: absolute; left: 0; right: 0; top: 23px; height: 1px; background: var(--line-2); }
.site .steps__bar { position: absolute; left: 0; top: 23px; height: 1px; width: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent-end)); transform-origin: left; }
.site .step { min-width: 0; display: flex; flex-direction: column; }
.site .step > i { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line-2); font: 500 13px/1 var(--mono); font-style: normal; color: var(--accent-2); }
.site .step h3 { margin-top: 26px; font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -0.03em; }
.site .step p { margin-top: 10px; color: var(--sub); font-size: 15.5px; }
.site .step .tags { margin-top: 16px; }
.site .step .shot { margin-top: 26px; border-radius: 20px; }
@media (max-width: 860px) {
  .site .steps { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .site .steps::before { left: 23px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .site .steps__bar { display: none; }
  .site .step { padding-left: 66px; position: relative; }
  .site .step > i { position: absolute; left: 0; top: 0; }
  .site .step h3 { margin-top: 6px; }
}
.site .nums { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); list-style: none; }
.site .num { padding: 34px 24px 40px 0; border-right: 1px solid var(--line); min-width: 0; }
.site .num + .num { padding-left: 24px; }
.site .num:last-child { border-right: 0; }
.site .num b { display: block; font: 600 clamp(48px, 6.6vw, 108px)/0.9 var(--display); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.site .num b small { font-size: 0.42em; letter-spacing: -0.02em; color: var(--accent-2); margin-left: 4px; }
.site .num > span { display: block; margin-top: 14px; color: var(--sub); font-size: 15px; }
@media (max-width: 760px) {
  .site .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site .num:nth-child(2n) { border-right: 0; }
  .site .num:nth-child(2n + 1) { padding-left: 0; }
  .site .num:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

/* ---------- MCP / AI-assistant panel ---------- */
.site .mcp { padding: clamp(24px, 4.5vw, 64px); display: grid; gap: 30px; }
.site .mcp__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 48px; align-items: end; }
.site .mcp__head p { color: var(--sub); }
.site .mcp__cards { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 18px; }
.site .mcp__card { padding: clamp(22px, 2.4vw, 32px); display: grid; gap: 14px; align-content: start; background: rgba(var(--bg-rgb), 0.55); border: 1px solid var(--line-2); border-radius: var(--r-card); min-width: 0; }
.site .mcp__card header { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.site .mcp__card h3 { font-size: clamp(22px, 2vw, 28px); }
.site .mcp__card p { color: var(--sub); font-size: 16px; }
.site .mcp__foot { color: var(--sub); font-size: 15px; max-width: 900px; }
@media (max-width: 960px) { .site .mcp__head, .site .mcp__cards { grid-template-columns: minmax(0, 1fr); } }

/* ---------- FAQ accordion (tymko.tech) ---------- */
.site .acc { border-bottom: 1px solid var(--line); }
.site .acc__item { border-top: 1px solid var(--line); }
.site .acc__summary { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 20px; align-items: center; padding: 24px 0; cursor: pointer; list-style: none; font: 600 clamp(19px, 1.7vw, 24px)/1.25 var(--display); letter-spacing: -0.02em; }
.site .acc__summary::-webkit-details-marker { display: none; }
.site .acc__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); transition: transform 0.35s var(--ease), background 0.3s, border-color 0.3s; }
.site .acc__icon .ic { width: 14px; height: 14px; }
.site .acc__item[open] .acc__icon { transform: rotate(45deg); background: var(--accent); border-color: var(--accent); }
html[data-site-theme='light'] .site .acc__item[open] .acc__icon { color: var(--on-accent); }   /* the plus stays white on the violet */
.site .acc__summary:hover .acc__icon { border-color: var(--line-3); }
.site .acc__content { padding: 0 64px 28px 0; color: var(--sub); max-width: 900px; }
@media (max-width: 640px) { .site .acc__content { padding-right: 0; } }

/* ---------- closing CTA ---------- */
.site .final { padding-block: clamp(70px, 9vw, 120px); border-top: 1px solid var(--line); overflow: hidden; }
.site .final__big { font-size: clamp(44px, 8.4vw, 140px); line-height: 0.98; letter-spacing: -0.055em; padding-bottom: 0.08em; max-width: 1240px; }
.site .final__title { font-size: clamp(36px, 6vw, 96px); line-height: 0.98; letter-spacing: -0.05em; max-width: 1200px; padding-bottom: 0.06em; }
.site .final__row { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; justify-content: space-between; margin-top: 46px; }
.site .final__row p { color: var(--sub); max-width: 560px; font-size: 18px; }
.site .final__mail { margin-top: 26px; font: 500 13px/1 var(--mono); letter-spacing: 0.04em; }

/* ---------- footer ---------- */
.site .site-footer { border-top: 1px solid var(--line); padding-top: clamp(56px, 7vw, 96px); color: var(--sub); font-size: 15px; }
.site .site-footer a { color: var(--sub); text-decoration: none; transition: color 0.2s; }
.site .site-footer a:hover, .site .site-footer a:focus-visible { color: var(--text); }
.site .site-footer__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.8fr); gap: 40px; padding-bottom: clamp(48px, 6vw, 80px); }
.site .site-footer__grid--4 { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 0.8fr)); }
.site .site-footer .brand { margin: 0; --by-dy: -1.5px; --tt-dy: -0.58px; }   /* 34px wordmark, 18px logotype */
.site .site-footer .brand__name { font-size: 34px; color: var(--text); }
.site .site-footer .brand__tt img { height: 18px; }
.site .site-footer__tag { margin-top: 22px; max-width: 420px; font: 600 clamp(22px, 2.2vw, 30px)/1.15 var(--display); letter-spacing: -0.03em; color: var(--text); }
.site .site-footer__col { display: grid; gap: 16px; align-content: start; }
.site .site-footer__col ul { list-style: none; display: grid; gap: 10px; }
.site .site-footer__note { max-width: 760px; margin-bottom: 18px; color: var(--muted); font-size: 13.5px; }
.site .site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; padding-block: 24px calc(30px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); font-size: 14px; }
.site .site-footer__copy { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.site .site-footer__copy img { height: 14px; width: auto; opacity: 0.6; filter: var(--logo-filter); }
.site .site-footer__push { flex: 1; }
.site .site-footer .lang-menu__toggle { height: 38px; }
.site .site-footer .lang-menu--up .lang-menu__list { left: auto; right: 0; }
@media (max-width: 960px) { .site .site-footer__grid, .site .site-footer__grid--4 { grid-template-columns: 1fr 1fr; } .site .site-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .site .site-footer__grid, .site .site-footer__grid--4 { grid-template-columns: minmax(0, 1fr); } .site .site-footer__push { display: none; } }

/* ---------- «Оформлення» picker: a round button in the header next to the languages (above 640 px) and a control in
   the phone menu open one popover. From the header it hangs under the button, aligned to its right edge and kept on
   screen (site.js / StylePicker.jsx set --sp-top and --sp-right); from the phone menu, and on phones, it is a bottom
   sheet over everything. Nothing floats over the page while it is closed. Theme first, then colour and background. ---------- */
.site .sp-open { flex: none; }
.site .sp-open .ic { width: 18px; height: 18px; }
.site .sp-open[aria-expanded='true'] { background: rgba(var(--fill-rgb), 0.08); border-color: var(--line-3); }
.site .sp-open--menu { gap: 8px; padding: 0 16px 0 13px; background: transparent; cursor: pointer; }
.site .sp-open--menu .ic { width: 16px; height: 16px; color: var(--accent-2); }
.site .stylepick__pop { position: fixed; z-index: 91; top: var(--sp-top, calc(var(--header-h) + 8px)); right: var(--sp-right, 16px); width: 392px; max-width: calc(100vw - 32px); max-height: calc(100vh - var(--sp-top, 90px) - 16px); overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 14px; padding: 16px; border-radius: 24px; background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--sh-sheet); }
.js-anim .site .stylepick__pop:not([hidden]) { animation: site-pop 0.24s var(--ease-out); }
@keyframes site-pop { from { opacity: 0; transform: translateY(-6px); } }
.site .stylepick__pop[hidden] { display: none; }
.site .sp-top { display: flex; gap: 8px; }
.site .sp-act { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--text); font: 500 13.5px/1.2 var(--body); cursor: pointer; }
.site .sp-act:hover { background: rgba(var(--fill-rgb), 0.06); }
.site .sp-act .ic { width: 15px; height: 15px; color: var(--accent-2); }
.site .sp-h { margin-top: 4px; color: var(--muted); }
/* «Тема»: dark, light, as the system has it */
.site .sp-themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.site .sp-th { display: grid; justify-items: center; align-content: start; gap: 7px; padding: 11px 4px 10px; border: 1px solid var(--line-2); border-radius: 14px; background: transparent; color: var(--sub); font: 500 12.5px/1.25 var(--body); text-align: center; cursor: pointer; }
.site .sp-th .ic { width: 18px; height: 18px; }
.site .sp-th:hover { background: rgba(var(--fill-rgb), 0.04); color: var(--text); }
.site .sp-th[aria-selected='true'] { color: var(--text); border-color: rgba(var(--accent-2-rgb), 0.6); background: rgba(var(--accent-2-rgb), 0.1); }
.site .sp-th[aria-selected='true'] .ic { color: var(--accent-2); }
.site .sp-swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.site .sp-sw { display: grid; justify-items: center; align-content: start; gap: 8px; padding: 10px 4px 9px; border: 1px solid transparent; border-radius: 14px; background: transparent; color: var(--sub); font: 500 12px/1.25 var(--body); text-align: center; cursor: pointer; }
.site .sp-sw:hover { background: rgba(var(--fill-rgb), 0.04); color: var(--text); }
.site .sp-sw[aria-selected='true'] { color: var(--text); border-color: rgba(var(--accent-2-rgb), 0.6); background: rgba(var(--accent-2-rgb), 0.1); }
.site .sp-sw i { width: 34px; height: 34px; border-radius: 50%; background: conic-gradient(from 200deg, var(--a) 0 55%, var(--g) 55% 100%); box-shadow: inset 0 0 0 1px rgba(var(--fill-rgb), 0.18), 0 0 0 3px rgba(var(--fill-rgb), 0.04); }
.site .sp-sw[data-scheme='custom'] i { background: conic-gradient(#ef4444, #f59e0b, #22c55e, #06b6d4, #6366f1, #d946ef, #ef4444); }
.site .sp-custom { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; align-items: center; padding: 12px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(var(--fill-rgb), 0.03); }
.site .sp-custom[hidden] { display: none; }
.site .sp-custom input { width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-3); border-radius: 12px; background: none; cursor: pointer; }
.site .sp-custom input::-webkit-color-swatch-wrapper { padding: 3px; }
.site .sp-custom input::-webkit-color-swatch { border: 0; border-radius: 8px; }
.site .sp-custom b { font: 500 13px/1.3 var(--mono); color: var(--text); }
.site .sp-custom b span { color: var(--muted); }
.site .sp-custom small { grid-column: 1 / -1; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.site .sp-bgs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.site .sp-bg { display: grid; gap: 7px; padding: 6px 6px 8px; border: 1px solid var(--line); border-radius: 16px; background: transparent; color: var(--sub); font: 500 12.5px/1.2 var(--body); text-align: left; cursor: pointer; }
.site .sp-bg:hover { color: var(--text); border-color: var(--line-2); }
.site .sp-bg[aria-selected='true'] { color: var(--text); border-color: var(--accent-2); box-shadow: 0 0 0 1px var(--accent-2); }
.site .sp-bg > span:first-child { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: radial-gradient(70% 90% at 75% 30%, rgba(var(--glow-rgb), 0.45), transparent 70%), var(--shot-bg); }
.site .sp-bg > span:first-child img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.site .sp-bg[data-bg='shot'] > span:first-child img { object-fit: cover; object-position: top left; }
.site .sp-bg[data-bg='mesh'] > span:first-child { background: radial-gradient(45% 70% at 72% 35%, rgba(var(--glow-rgb), 0.7), transparent 70%), radial-gradient(40% 60% at 40% 75%, rgba(var(--accent-2-rgb), 0.55), transparent 70%), radial-gradient(35% 50% at 92% 85%, rgba(var(--accent-end-rgb), 0.45), transparent 70%), var(--shot-bg); }
.site .sp-bg > span:last-child { padding-left: 4px; }
.site .sp-close { display: none; }
.site .sp-scrim { position: fixed; inset: 0; z-index: 90; background: var(--scrim); }
.site .sp-scrim[hidden] { display: none; }
/* the bottom sheet (from the phone menu, or on a phone): over the menu, a scrim behind it, a close button */
.site .stylepick.is-sheet .sp-close { display: inline-grid; }
.site .stylepick.is-sheet .stylepick__pop { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: 82vh; border-radius: 24px 24px 0 0; padding: 18px 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
.js-anim .site .stylepick.is-sheet .stylepick__pop:not([hidden]) { animation: site-sheet 0.32s var(--ease-out); }
@keyframes site-sheet { from { transform: translateY(24px); opacity: 0; } }
/* without JavaScript the picker could do nothing: no buttons for it */
html:not(.js) .site .sp-open, html:not(.js) .site .stylepick { display: none; }
@media (max-width: 600px) { .site .sp-sw { font-size: 11.5px; } }

/* ---------- reveal on scroll (site.js / the landing): only what starts below the fold, always ends visible ---------- */
.site .rv-pre { opacity: 0; transform: translateY(44px); }
.site .rv-in { transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out); }

@media (pointer: coarse), (hover: none), (max-width: 860px) { .site .grain { animation: none; inset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .site *, .site *::before, .site *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .site .grain { animation: none; }
  .site .rv-pre { opacity: 1; transform: none; }
}