/* Tone website — dating design, ported from design/mockups/dating-20261012/site/site.css.
   Colours, type, radii, shadows and motion come only from assets/tokens.css («Малина»), except the fixed neutral
   third-party host colours at the end (BRIEF §11 «Hosts»). Reading text is sized in rem so it follows the
   reader's text size; decorative device chrome stays in px. Layout lengths are local to this page. */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--space-6);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-brand);font-size:var(--text-body-size);line-height:var(--leading-body);letter-spacing:var(--tracking-body);overflow-wrap:break-word;overflow-x:clip}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button,a,textarea{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{cursor:default}
a{color:inherit;text-underline-offset:.22em}
p,h1,h2,h3,h4,figure,dl,dd{margin:0}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px;border-radius:var(--radius-xs)}
::selection{background:var(--brand-lift);color:var(--ink-900)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

:root{--gutter:40px;--shell:1240px}
.shell{width:calc(100% - 2 * var(--gutter));max-width:var(--shell);margin-inline:auto}

/* ---------- skip link, header */
.skip-link{position:fixed;z-index:20;left:var(--space-4);top:var(--space-4);min-height:48px;display:inline-flex;align-items:center;padding:var(--space-3) var(--space-5);background:var(--panel);color:var(--ink);border:2px solid var(--brand);border-radius:var(--radius-md);font-weight:600;transform:translateY(-220%)}
.skip-link:focus{transform:none}
main:focus{outline:none}

.site-header{display:flex;align-items:center;gap:var(--space-7);min-height:96px;padding-block:var(--space-4)}
.wordmark{display:inline-flex;align-items:center;gap:10px;min-height:48px;color:var(--brand);font-family:var(--font-display);font-size:34px;font-weight:800;letter-spacing:-.06em;text-decoration:none}
.wordmark svg{width:24px;height:28px;fill:currentColor}
.site-nav{display:flex;gap:var(--space-2);margin-left:auto}
.site-nav a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:48px;padding-inline:var(--space-4);border-radius:var(--radius-pill);font-size:var(--text-small);font-weight:500;text-decoration:none;color:var(--text-muted)}
.site-nav a:hover{color:var(--text-body);background:var(--surface-sunken)}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);min-height:48px;min-width:48px;padding:0 var(--space-5);border:1px solid var(--border-default);border-radius:var(--radius-pill);background:transparent;color:var(--text-body);font-size:var(--text-small);font-weight:500}
.theme-toggle svg{width:18px;height:18px;flex:none}
.theme-toggle:hover{background:var(--surface-sunken)}

/* ---------- hero */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--space-9);align-items:center;background:var(--hero-bg);color:var(--hero-ink);border-radius:36px;padding:var(--space-10) var(--space-10) var(--space-9);position:relative;isolation:isolate;overflow:hidden}
.hero::before{content:"";position:absolute;z-index:-1;right:-140px;top:-160px;width:620px;height:620px;border-radius:50%;border:1px solid var(--hero-line);box-shadow:0 0 0 90px color-mix(in srgb,var(--hero-ink) 4%,transparent),0 0 0 180px color-mix(in srgb,var(--hero-ink) 3%,transparent)}
.hero-copy{min-width:0}
.eyebrow{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-label);font-weight:700;letter-spacing:var(--tracking-label);text-transform:uppercase}
.signal-dot{width:8px;height:8px;border-radius:50%;background:var(--hero-ink);flex:none}
.hero h1{margin-block:var(--space-7) var(--space-6);font-family:var(--font-display);font-size:clamp(46px,6.4vw,var(--text-hero));font-weight:800;line-height:var(--leading-tight);letter-spacing:var(--tracking-display);text-wrap:balance}
.hero-lead{max-width:34rem;font-size:var(--text-lead);line-height:1.45;color:var(--hero-ink);letter-spacing:-.015em}
.hero-promises{list-style:none;margin:var(--space-7) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-3)}
.hero-promises li{display:inline-flex;align-items:center;gap:var(--space-3);min-height:36px;padding:var(--space-1) var(--space-4);border:1px solid var(--hero-line);border-radius:var(--radius-pill);font-size:var(--text-caption);font-weight:500;color:var(--hero-ink)}
.hero-promises li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--hero-ink-2)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-6);margin-top:var(--space-8)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-5);min-height:56px;padding:var(--space-3) var(--space-7);border-radius:var(--radius-pill);font-weight:700;text-decoration:none;text-align:center;transition:transform var(--dur-fast) var(--ease)}
.button[aria-disabled="true"]{cursor:default;background:transparent;border:2px dashed currentColor}
.button-hero[aria-disabled="true"]{color:var(--hero-ink)}
.button-brand[aria-disabled="true"]{color:var(--text-body);border-color:var(--text-muted);background:var(--surface-sunken)}
.button[aria-disabled="false"]:hover{transform:translateY(-2px)}
.button-hero{background:var(--hero-ink);color:var(--on-hero)}
.button-brand{background:var(--brand);color:var(--on-brand)}
.demo-link{display:inline-flex;align-items:center;gap:var(--space-3);min-height:48px;font-size:var(--text-small);font-weight:600;text-decoration:none}
.demo-link:hover{text-decoration:underline}
.hero :focus-visible{outline-color:var(--hero-ink)}
.hero-metadata{margin-top:var(--space-4);font-size:var(--text-caption);color:var(--hero-ink-2)}
.no-script{margin-top:var(--space-4);font-size:var(--text-small);font-weight:600}

/* ---------- demo phone (Android, product UI uses the platform face) */
.demo-stage{min-width:0;width:100%;max-width:372px;justify-self:center}
.demo-caption{margin-bottom:var(--space-5);font-size:var(--text-small);font-weight:500;text-align:center}
.demo-number{color:var(--hero-ink-2);font-variant-numeric:tabular-nums;margin-right:var(--space-2)}
.phone{display:flex;flex-direction:column;background:var(--scr);color:var(--ink);border:8px solid var(--ink-900,var(--ink));border-radius:40px;overflow:hidden;box-shadow:var(--shadow-l);font-family:var(--font-android);letter-spacing:0;scroll-margin-top:var(--space-6)}
.phone-status{display:flex;justify-content:space-between;align-items:center;height:28px;padding:0 var(--space-6);font-size:12px;font-weight:600}
.status-icons{display:flex;gap:4px}.status-icons i{width:12px;height:8px;border-radius:2px;background:var(--ink-2)}.status-icons i:last-child{width:18px;background:var(--ink)}
.host-bar{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4) var(--space-3);border-bottom:1px solid var(--scr-line)}
.host-back{flex:none;font-size:18px;color:var(--ink-2);width:20px}
.avatar{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--brand-tint);color:var(--brand-deep);font-size:14px;font-weight:700}
.avatar-other{background:var(--paper-2);color:var(--ink-2)}
.avatar-sm{width:28px;height:28px;font-size:11px}
.host-who{min-width:0;flex:1}
.host-who strong{display:block;font-size:.9375rem;line-height:1.25}
.host-who span{display:block;font-size:.75rem;color:var(--ink-2)}
.tone-dot{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--brand);color:var(--on-brand);box-shadow:var(--shadow-popup)}
.tone-dot svg{width:15px;height:16px;fill:currentColor}
.tone-dot-sm{width:36px;height:36px}
.host-chat{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4) var(--space-4) var(--space-5);background:var(--scr-chat);min-height:150px}
.day-chip{align-self:center;padding:2px var(--space-3);border-radius:var(--radius-pill);background:var(--scr);color:var(--ink-2);font-size:11px}
.match-note{align-self:center;text-align:center;font-size:.75rem;color:var(--ink-3)}
.bubble{max-width:86%;padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);font-size:.9375rem;line-height:var(--leading-ui)}
.bubble-other{align-self:flex-start;background:var(--bub-in);color:var(--ink);border-bottom-left-radius:var(--radius-xs)}
.bubble-time{display:block;margin-top:2px;text-align:right;font-size:11px;color:var(--ink-3)}
.host-compose{display:flex;align-items:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--scr);border-top:1px solid var(--scr-line)}
.host-field{flex:1;min-width:0;min-height:48px;max-height:12em;padding:var(--space-3) var(--space-5);border:0;border-radius:var(--radius-xl);background:var(--scr-chat);font-family:inherit;font-size:.9375rem;line-height:var(--leading-ui);resize:none;field-sizing:content}
.host-field::placeholder{color:var(--ink-3);opacity:1}
.host-field.is-fresh{animation:tone-rise var(--dur-base) var(--ease)}
.host-send{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--paper-2);color:var(--ink-3)}
.host-send svg{width:18px;height:18px}

.kb{background:var(--kb-bg);padding:var(--space-3) var(--space-3) var(--space-2);color:var(--kb-key-ink)}
.kb-strip{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-1) var(--space-1) var(--space-3)}
.kb-mark{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:var(--radius-sm);background:var(--brand);color:var(--on-brand)}
.kb-mark svg{width:12px;height:13px;fill:currentColor}
.kb-context{min-width:0}
.kb-who{font-size:.8125rem;font-weight:600;line-height:1.3}
.kb-meta{display:flex;flex-wrap:wrap;column-gap:var(--space-3);font-size:.71875rem;color:var(--ink-2);line-height:1.35}
.kb-goal::after{content:"·";margin-left:var(--space-3)}
.variants{display:grid;gap:var(--space-2)}
.variant{position:relative;display:block;width:100%;text-align:left;padding:var(--space-3) var(--space-4);border:2px solid transparent;border-radius:var(--kb-suggestion-radius);color:var(--ink);transition:border-color var(--dur-fast) var(--ease),transform var(--dur-key) var(--ease)}
.variant:active{transform:scale(.99)}
.variant-cool{background:var(--tone-cool-bg)}.variant-warm{background:var(--tone-warm-bg)}.variant-fun{background:var(--tone-fun-bg)}
.variant:hover{border-color:color-mix(in srgb,currentColor 25%,transparent)}
.variant[aria-pressed="true"]{border-color:var(--ink)}
.variant-label{display:flex;align-items:center;gap:var(--space-2);font-size:.75rem;font-weight:700;margin-bottom:2px}
.variant-cool .variant-label{color:var(--tone-cool)}
.variant-warm .variant-label{color:color-mix(in srgb,var(--tone-warm) 82%,var(--ink))}
.variant-fun .variant-label{color:color-mix(in srgb,var(--tone-fun) 82%,var(--ink))}
.variant-num{flex:none;display:inline-grid;place-items:center;width:1.5em;height:1.5em;border-radius:50%;border:1.5px solid currentColor;font-size:.875em;font-variant-numeric:tabular-nums;line-height:1}
.variant-check{margin-left:auto;opacity:0;color:var(--ink);font-size:.875rem}
.variant[aria-pressed="true"] .variant-check{opacity:1}
.variant-text{display:block;font-size:.90625rem;line-height:1.35}
.kb-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3)}
.kb-actions button{flex:1 1 auto;min-height:48px;padding:var(--space-2) var(--space-4);border:0;border-radius:var(--radius-md);font-size:.9375rem;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3)}
.kb-insert{background:var(--brand);color:var(--on-brand)}
.kb-undo{background:var(--kb-key);color:var(--kb-key-ink);box-shadow:var(--kb-key-shadow)}
.kb-actions button:disabled{opacity:.45}
.kb-status{min-height:2.7em;margin:var(--space-2) var(--space-1) 0;font-size:.75rem;line-height:1.35;color:var(--ink-2)}
.kb-keys{display:flex;gap:var(--kb-and-key-gap);margin-top:var(--space-1)}
.kb-keys span{min-width:30px;height:40px;display:flex;align-items:center;justify-content:center;gap:var(--space-1);padding:0 var(--space-2);border-radius:var(--kb-and-key-radius);background:var(--kb-key-fn);font-size:13px;box-shadow:var(--kb-key-shadow)}
.kb-keys .kb-space{flex:1;min-width:0;overflow:hidden;background:var(--kb-key);color:var(--ink-2)}
.kb-keys .kb-enter{min-width:44px}
.kb-keys .kb-enter svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kb-keys .kb-tone{flex:none;padding:0 var(--space-3);background:var(--brand);color:var(--on-brand);font-weight:700;box-shadow:inset 0 0 0 2px var(--on-brand),var(--kb-key-shadow)}
.kb-tone-mark{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.kb-tone-mark b{display:block;width:3px;border-radius:1px;background:currentColor}
.kb-tone-mark b:nth-child(1){height:5px}.kb-tone-mark b:nth-child(2){height:8px}.kb-tone-mark b:nth-child(3){height:12px}
.phone-nav{display:block;height:22px;background:var(--kb-bg);position:relative}
.phone-nav::after{content:"";position:absolute;left:50%;top:9px;width:108px;height:4px;margin-left:-54px;border-radius:var(--radius-pill);background:var(--ink-3)}
.fixture-note{margin-top:var(--space-5);font-size:var(--text-caption);line-height:1.5;text-align:center;color:var(--hero-ink-2)}
.fixture-note-plain{color:var(--text-muted)}

/* ---------- sections */
.section{padding-block:var(--space-11)}
.section-heading{max-width:52rem}
.section-kicker{margin-bottom:var(--space-5);color:var(--brand);font-size:var(--text-label);font-weight:700;letter-spacing:var(--tracking-label);text-transform:uppercase}
h2{font-family:var(--font-display);font-size:clamp(34px,4.4vw,var(--text-h1));font-weight:800;line-height:var(--leading-heading);letter-spacing:var(--tracking-heading);text-wrap:balance}
h3{font-family:var(--font-display);font-size:var(--text-h3);font-weight:700;line-height:1.2;letter-spacing:-.015em}
.section-lead{margin-top:var(--space-6);max-width:38rem;font-size:var(--text-lead);line-height:1.45;color:var(--text-muted)}

/* scenarios */
.story{list-style:none;margin:var(--space-10) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-7)}
.story-card{position:relative;display:flex;flex-direction:column;gap:var(--space-5);min-width:0;padding:var(--space-7);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);box-shadow:var(--shadow-s)}
.story-step{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);font-size:var(--text-caption);font-weight:600;color:var(--text-muted)}
.story-step span{display:inline-grid;place-items:center;min-width:34px;height:26px;padding:0 var(--space-2);border-radius:var(--radius-pill);background:var(--brand-tint);color:var(--brand-deep);font-variant-numeric:tabular-nums;font-weight:700}
.story-lead{color:var(--text-muted);font-size:var(--text-small);line-height:1.55}
.story-card-link::before{content:"→";position:absolute;z-index:1;left:0;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--brand);color:var(--on-brand);font-size:15px;font-weight:700;white-space:nowrap;box-shadow:var(--shadow-s)}
.mini{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-lg);background:var(--scr-chat);font-family:var(--font-android);letter-spacing:0}
.mini-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);font-size:.875rem;font-weight:600}
.mini-app{margin-left:auto;padding:2px var(--space-3);border-radius:var(--radius-pill);background:var(--scr);color:var(--ink-2);font-size:.71875rem;font-weight:500}
.mini-bubble{font-size:.875rem}
.dot-chip{display:flex;align-items:center;gap:var(--space-3);align-self:flex-start;max-width:100%;padding:var(--space-2) var(--space-4) var(--space-2) var(--space-2);border-radius:var(--radius-xl);background:var(--panel);box-shadow:var(--shadow-popup);font-size:.78125rem;font-weight:500;line-height:1.3}
.dot-chip-mark{width:22px;height:22px;flex:none;border-radius:50%;background:var(--brand)}
.link-card{padding:var(--space-4);border-radius:var(--radius-md);background:var(--panel);box-shadow:var(--shadow-popup)}
.link-title{font-size:.90625rem;font-weight:700}
.link-why{margin-top:2px;font-size:.78125rem;color:var(--ink-2)}
.link-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4)}
.fake-btn{display:inline-flex;align-items:center;min-height:36px;padding:var(--space-1) var(--space-4);border-radius:var(--radius-pill);border:1px solid var(--line);font-size:.8125rem;font-weight:600}
.fake-btn-primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.facts{display:grid;gap:var(--space-4);padding-top:var(--space-1)}
.facts div{display:grid;grid-template-columns:7.2rem minmax(0,1fr);gap:var(--space-4);font-size:var(--text-caption);line-height:1.45}
.facts dt{color:var(--text-subtle)}
.facts dd{color:var(--text-body);font-weight:500}
.reply-pick{margin-top:auto;padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);font-family:var(--font-android);font-size:.9375rem;line-height:1.4;letter-spacing:0}
.reply-pick-label{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-1);font-size:.75rem;font-weight:700}
.reply-warm{background:var(--tone-warm-bg)}.reply-warm .reply-pick-label{color:color-mix(in srgb,var(--tone-warm) 82%,var(--ink))}

/* context band */
.context{background:var(--surface-sunken)}
.context-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--space-10);align-items:start}
.context-copy{min-width:0}
.triggers{list-style:none;margin:var(--space-8) 0 0;padding:0;display:grid;gap:var(--space-4)}
.triggers li{display:flex;gap:var(--space-5);padding:var(--space-6);border-radius:var(--radius-xl);background:var(--surface-card);border:1px solid var(--border-subtle)}
.triggers li>div{min-width:0;flex:1}
.triggers h3{margin:var(--space-2) 0 var(--space-4)}
.trigger-dl{display:grid;gap:var(--space-3)}
.trigger-dl div{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:var(--space-4);font-size:var(--text-small);line-height:1.5}
.trigger-dl dt{color:var(--text-subtle)}
.trigger-dl dd{color:var(--text-body);font-weight:500}
.step-n{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--surface-card);border:1px solid var(--border-default);color:var(--brand);font-weight:700;font-variant-numeric:tabular-nums}
.context-scope{margin-top:var(--space-6);font-size:var(--text-small);line-height:1.6;color:var(--text-muted)}
.context-scope strong{color:var(--text-body)}
.context-never{margin-top:var(--space-6);padding:var(--space-6);border:1px solid var(--border-subtle);border-left:4px solid var(--brand);background:var(--surface-card);border-radius:0 var(--radius-md) var(--radius-md) 0;color:var(--text-muted);font-size:var(--text-small)}
.context-never strong{display:block;margin-bottom:var(--space-1);color:var(--text-body);font-family:var(--font-display);font-size:var(--text-h3)}
.sheet-stage{position:sticky;top:var(--space-6);min-width:0}
/* dot walk-through (inside the context band) */
.dot-walk{margin-top:var(--space-10);scroll-margin-top:var(--space-6)}
.dot-walk-head{max-width:46rem}
.dot-walk-head p{margin-top:var(--space-4);color:var(--text-muted);font-size:var(--text-small);line-height:1.6}
.walk{list-style:none;margin:var(--space-8) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}
.walk-step{display:flex;flex-direction:column;gap:var(--space-4);min-width:0;padding:var(--space-5);border-radius:var(--radius-xl);background:var(--surface-card);border:1px solid var(--border-subtle)}
.walk-n{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);font-size:var(--text-caption);font-weight:600;color:var(--text-body)}
.walk-n span{display:inline-grid;place-items:center;min-width:26px;height:26px;border-radius:50%;background:var(--brand-tint);color:var(--brand-deep);font-variant-numeric:tabular-nums;font-weight:700}
.walk-fig{position:relative;margin:0;min-height:8.5rem;justify-content:center}
.walk-dot{position:absolute;right:calc(-1 * var(--space-2));top:62%;width:28px;height:28px;border-radius:50%;background:var(--brand);box-shadow:var(--shadow-s),0 0 0 4px color-mix(in srgb,var(--brand) 22%,transparent)}
.walk-quote{margin-top:var(--space-3);padding:var(--space-2) var(--space-3);border-left:3px solid var(--line);font-size:.8125rem;line-height:1.4}
.walk-text{color:var(--text-muted);font-size:var(--text-small);line-height:1.55}
.dot-flow{margin-top:var(--space-8)}
.flow-when{margin:calc(-1 * var(--space-3)) 0 var(--space-4);color:var(--text-muted);font-size:var(--text-small)}
.sheet{padding:var(--space-6);border-radius:var(--radius-xl);background:var(--surface-card);border:1px solid var(--border-subtle);box-shadow:var(--shadow-l);font-family:var(--font-android);letter-spacing:0}
.sheet-head{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-5)}
.sheet-head>div{min-width:0}
.sheet-head h3{font-family:var(--font-android);font-size:1.1875rem;letter-spacing:0}
.sheet-head h3:focus{outline:none}
.sheet-head p{font-size:.8125rem;color:var(--ink-2)}
.fields{margin:0;padding:0;border:0;min-width:0;display:grid;gap:var(--space-2)}
.field{display:flex;gap:var(--space-4);align-items:flex-start;padding:var(--space-4);border-radius:var(--radius-md);border:1px solid var(--line-2);cursor:pointer;font-size:.90625rem;line-height:1.4}
.field>span{min-width:0}
.field:has(input:checked){border-color:var(--brand);background:var(--brand-tint)}
.field input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--brand)}
.field b{display:block;margin-bottom:2px;font-size:.75rem;font-weight:600;color:var(--ink-2)}
.sheet-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-5)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:48px;padding:var(--space-2) var(--space-6);border-radius:var(--radius-pill);border:1px solid transparent;font-weight:600;font-size:.9375rem}
.btn-primary{background:var(--brand);color:var(--on-brand);flex:1 1 14rem}
.btn-primary:disabled{opacity:.45}
.btn-ghost{background:transparent;color:var(--brand-deep)}
.btn-ghost:hover{background:var(--brand-tint)}
.btn-danger{background:var(--danger-bg);color:var(--danger)}
.sheet-status{margin-top:var(--space-4);min-height:2.8em;font-size:.8125rem;line-height:1.4;color:var(--ink-2)}
.sources{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2)}
.sources li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2) var(--space-4);padding:var(--space-4);border-radius:var(--radius-md);border:1px solid var(--line-2)}
.sources li>div{flex:1 1 12rem;min-width:0}
.sources b{display:block;font-size:.90625rem}
.sources span{display:block;font-size:.8125rem;color:var(--ink-2)}
.link-danger{flex:none;min-height:48px;min-width:48px;padding:0 var(--space-4);border:0;border-radius:var(--radius-pill);background:transparent;color:var(--danger);font-weight:600;font-size:.875rem}
.link-danger:hover{background:var(--danger-bg)}
.sources-empty{padding:var(--space-5);border-radius:var(--radius-md);background:var(--paper-2);color:var(--ink-2);font-size:.875rem}

/* not-do */
.not-grid{list-style:none;margin:var(--space-10) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--border-default)}
.not-grid li{min-width:0;padding:var(--space-8) var(--space-8) var(--space-8) 0;border-bottom:1px solid var(--border-default)}
.not-grid li:nth-child(even){padding-left:var(--space-8);padding-right:0;border-left:1px solid var(--border-default)}
.not-word{display:block;font-family:var(--font-display);font-size:clamp(34px,4vw,var(--text-h1));font-weight:800;line-height:1.12;letter-spacing:var(--tracking-display);color:var(--text-subtle);text-decoration:line-through;text-decoration-color:var(--brand);text-decoration-thickness:.09em;margin-bottom:var(--space-6)}
.not-grid h3{margin-bottom:var(--space-3)}
.not-grid p{max-width:30rem;color:var(--text-muted);font-size:var(--text-small);line-height:1.6}

/* privacy */
.pipeline{list-style:none;margin:var(--space-10) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.pipeline li{position:relative;min-width:0;padding:var(--space-7);border:1px solid var(--border-default);border-radius:var(--radius-xl)}
.pipeline li+li::before{content:"";position:absolute;left:calc(-1 * var(--space-4) - 1px);top:50%;width:var(--space-4);border-top:2px dashed var(--border-default)}
.pipe-n{display:block;margin-bottom:var(--space-6);color:var(--brand);font-size:var(--text-caption);font-weight:700;font-variant-numeric:tabular-nums}
.pipeline h3{margin-bottom:var(--space-3)}
.pipeline p{color:var(--text-muted);font-size:var(--text-small);line-height:1.6}
.flow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);margin-top:var(--space-7)}
.flow-col{min-width:0;padding:var(--space-7);border-radius:var(--radius-xl)}
.flow-yes{background:var(--surface-card);box-shadow:var(--shadow-s)}
.flow-no{background:var(--surface-sunken)}
.flow-col h3{margin-bottom:var(--space-5)}
.privacy-facts{list-style:none;margin:var(--space-7) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.privacy-facts li{min-width:0;padding:var(--space-7);border:1px solid var(--border-default);border-radius:var(--radius-xl);scroll-margin-top:var(--space-6)}
.privacy-facts h3{margin-bottom:var(--space-4)}
.privacy-facts p{color:var(--text-muted);font-size:var(--text-small);line-height:1.6}
.events-dl{margin-top:var(--space-5)}
.flow-col ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.flow-col li{display:flex;gap:var(--space-4);font-size:var(--text-small);line-height:1.45}
.flow-col li::before{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:12px;font-weight:700}
.flow-yes li::before{content:"✓";background:var(--brand-tint);color:var(--brand-deep)}
.flow-no li::before{content:"✕";background:var(--surface-card);color:var(--text-muted)}

/* release + install */
.release{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--space-10);align-items:start;border-top:1px solid var(--border-default)}
.release-intro{min-width:0}
.install-steps{list-style:none;margin:var(--space-9) 0 0;padding:0;display:grid;gap:var(--space-6)}
.install-steps li{display:flex;gap:var(--space-5)}
.install-steps li>div{min-width:0}
.install-steps li>span{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--border-default);color:var(--brand);font-weight:700}
.install-steps h3{margin:var(--space-2) 0;font-size:1.125rem}
.install-steps p{color:var(--text-muted);font-size:var(--text-small);line-height:1.6;max-width:32rem}
.badge{display:inline-flex;align-items:center;margin-left:var(--space-1);padding:1px var(--space-3);border-radius:var(--radius-md);background:var(--brand-tint);color:var(--brand-deep);font-size:var(--text-caption);font-weight:600}
/* «Скоро»: the same badge marks every feature that is not in the app yet (the dot, saved profiles, linked chats).
   Inside headings it keeps the body face and size instead of the heading's. */
.badge-soon{font-family:var(--font-brand);letter-spacing:var(--tracking-body);line-height:1.5;vertical-align:.15em;white-space:nowrap}
h2 .badge-soon{vertical-align:.5em}
.sheet-example{margin-bottom:var(--space-4)}
.sheet-example .badge{margin-left:0;padding-block:var(--space-1);line-height:1.4}
.release-card{position:sticky;top:var(--space-6);padding:var(--space-8);border-radius:var(--radius-xl);background:var(--surface-card);border:1px solid var(--border-subtle);box-shadow:var(--shadow-s);min-width:0}
.release-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-6)}
.android-label{font-size:var(--text-label);font-weight:700;letter-spacing:var(--tracking-label);color:var(--text-muted)}
.release-indicator{width:10px;height:10px;border-radius:50%;background:var(--brand)}
.release-card[data-state="unpublished"] .release-indicator{background:var(--text-subtle)}
.release-card[data-state="loading"] .release-indicator{animation:tone-blink 1s steps(1) infinite}
.release-card[data-state="error"] .release-indicator{background:var(--danger)}
.release-card h3{font-size:max(28px,1.25rem);line-height:1.15}
.release-card>p{margin-top:var(--space-4);color:var(--text-muted);font-size:var(--text-small)}
.release-card .button{width:100%;margin-top:var(--space-7)}
.release-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,8.5rem),1fr));gap:var(--space-4);margin:var(--space-6) 0}
.release-meta div{min-width:0}
.release-meta dt{font-size:var(--text-caption);color:var(--text-muted)}
.release-meta dd{font-weight:700;overflow-wrap:anywhere}
.requirements{font-size:var(--text-caption);color:var(--text-muted);margin-bottom:var(--space-5)}
.release-card h4{font-size:var(--text-small);margin:0}
.release-notes{margin:var(--space-2) 0 0;padding-left:var(--space-6);color:var(--text-muted);font-size:var(--text-small)}
.verification-details{margin-top:var(--space-5);border-top:1px solid var(--border-subtle);font-size:var(--text-caption)}
.verification-details summary{display:flex;align-items:center;min-height:48px;cursor:pointer;font-weight:600;color:var(--brand-deep)}
.verification-details p{margin-bottom:var(--space-1);color:var(--text-muted)}
.verification-details code{display:block;padding-bottom:var(--space-4);font-family:var(--font-mono);font-size:.75rem;overflow-wrap:anywhere}
.check-release{display:block;width:100%;min-height:48px;margin-top:var(--space-2);border:0;border-radius:var(--radius-md);background:transparent;color:var(--brand-deep);font-weight:600;font-size:var(--text-small)}
.check-release:hover{background:var(--brand-tint)}
.check-release:disabled{opacity:.55}
.installation-footnote{margin-top:var(--space-3);text-align:center;color:var(--text-muted);font-size:var(--text-caption)}

/* faq */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--space-10);border-top:1px solid var(--border-default)}
.faq h2{font-size:clamp(30px,3.4vw,var(--text-h2))}
.faq-list{min-width:0;border-top:1px solid var(--border-default)}
.faq details{border-bottom:1px solid var(--border-default)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:var(--space-5);min-height:64px;padding:var(--space-4) var(--space-1);cursor:pointer;list-style:none;font-size:1.125rem;font-weight:600;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--border-default);color:var(--brand);font-weight:500;font-size:20px;line-height:1;transition:transform var(--dur-fast) var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{max-width:44rem;padding:0 var(--space-1) var(--space-6);color:var(--text-muted);font-size:var(--text-small);line-height:1.65}

/* footer */
.site-footer{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-7);min-height:120px;border-top:1px solid var(--border-default)}
.footer-wordmark{color:var(--brand);font-family:var(--font-display);font-size:30px;font-weight:800;letter-spacing:-.06em}
.site-footer p{color:var(--text-muted);font-size:var(--text-small)}
.site-footer a{margin-left:auto;display:inline-flex;align-items:center;gap:var(--space-2);min-height:48px;font-size:var(--text-small);text-decoration:none}

/* ---------- responsive */
@media (max-width:1180px){
  .hero{padding:var(--space-9);gap:var(--space-8)}
  .story{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .story-card:first-child{grid-column:1/-1}
  .context-grid,.release,.faq{grid-template-columns:minmax(0,1fr);gap:var(--space-9)}
  .sheet-stage,.release-card{position:static}
  .sheet-stage{max-width:560px}
  .walk{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .site-header{flex-wrap:wrap;row-gap:0}
  .site-nav{order:3;flex-basis:100%;gap:0;margin:0 calc(-1 * var(--space-4));padding-right:var(--space-9);overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--space-9)),transparent);mask-image:linear-gradient(to right,#000 calc(100% - var(--space-9)),transparent)}
  .site-nav.at-end{-webkit-mask-image:none;mask-image:none}
  .site-nav::-webkit-scrollbar{display:none}
  .site-nav a{flex:none;scroll-snap-align:start}
  .theme-toggle{margin-left:auto}
  .hero{grid-template-columns:minmax(0,1fr)}
  .demo-stage{max-width:390px}
  .story{grid-template-columns:minmax(0,1fr);gap:var(--space-8)}
  .story-card-link::before{content:"та же Лиза ↓";width:auto;height:auto;padding:var(--space-1) var(--space-4);border-radius:var(--radius-pill);font-size:13px;left:50%;top:0;transform:translate(-50%,calc(-50% - var(--space-4)))}
  .not-grid{grid-template-columns:minmax(0,1fr)}
  .not-grid li,.not-grid li:nth-child(even){padding:var(--space-7) 0;border-left:0}
  .pipeline,.flow,.privacy-facts{grid-template-columns:minmax(0,1fr)}
  .pipeline li+li::before{left:50%;top:calc(-1 * var(--space-4) - 1px);width:0;height:var(--space-4);border-top:0;border-left:2px dashed var(--border-default)}
}
@media (max-width:600px){
  :root{--gutter:16px}
  .site-header{min-height:72px;gap:var(--space-4)}
  .wordmark{font-size:28px}
  .theme-toggle{padding:0 var(--space-4)}
  .theme-toggle-label{display:none}
  .hero{border-radius:var(--radius-xl);padding:var(--space-8) var(--space-5) var(--space-7);gap:var(--space-8)}
  .hero::before{right:-260px;top:-220px}
  .hero h1{font-size:clamp(40px,11.4vw,56px);margin-block:var(--space-6) var(--space-5)}
  .hero-lead{font-size:1.125rem}
  .hero-promises{margin-top:var(--space-6)}
  .hero-actions{gap:var(--space-2);margin-top:var(--space-7)}
  .button-hero{width:100%}
  .demo-link{width:100%;justify-content:center}
  .hero-metadata{text-align:center}
  .phone{border-width:6px;border-radius:32px}
  .kb-keys .kb-punct{display:none}
  .section{padding-block:var(--space-10)}
  .story{margin-top:var(--space-8)}
  .story-card{padding:var(--space-5)}
  .facts div{grid-template-columns:minmax(0,1fr);gap:2px}
  .section-lead{font-size:1.125rem}
  .triggers li{gap:var(--space-4);padding:var(--space-5)}
  .trigger-dl div{grid-template-columns:minmax(0,1fr);gap:0}
  .sheet{padding:var(--space-4)}
  .not-word{margin-bottom:var(--space-4)}
  .pipeline li,.flow-col,.privacy-facts li{padding:var(--space-6)}
  .walk{grid-template-columns:minmax(0,1fr)}
  .walk-step{padding:var(--space-4)}
  .dot-walk{margin-top:var(--space-9)}
  .release-card{padding:var(--space-6)}
  .release-meta{gap:var(--space-2)}
  .faq{gap:var(--space-7)}
  .faq summary{font-size:1rem}
  .site-footer{gap:var(--space-3);padding-block:var(--space-6)}
  .site-footer p{order:3;flex-basis:100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .button[aria-disabled="false"]:hover,.variant:active{transform:none}
}

/* ---------- third-party hosts (BRIEF §11 «Hosts»): fixed neutral colours, independent of the Tone palette.
   Values copied from design/mockups/dating-20261012/surfaces/host.css (Telegram-like default, «Пара» monochrome).
   The only literal colours on this page; everything Tone-owned (dot, keyboard, cards) stays on tokens.
   Dark follows prefers-color-scheme without JavaScript and [data-theme] when the toggle is used. */
.site-host{--h-scr:#FFFFFF;--h-chat:#E8ECF0;--h-line:#DCE1E6;--h-line-2:#ECEFF2;--h-ink:#15191E;--h-ink-2:#59636E;--h-ink-3:#6F7882;
  --h-bub-in:#FFFFFF;--h-avatar:#D9E1E9;--h-avatar-ink:#34404C;--h-shadow:0 1px 1px rgba(16,24,32,.10);
  --h-msgs:var(--h-chat);--h-chip:var(--h-scr);--h-field:var(--h-chat);--h-field-ring:none}
.site-host.is-para{--h-chat:#F2F2F3;--h-line:#DADADF;--h-line-2:#EBEBEE;--h-ink:#17171A;--h-ink-2:#5E5E66;--h-ink-3:#727279;--h-bub-in:#F2F2F3;--h-avatar:#EBEBEE;--h-shadow:none;
  --h-msgs:var(--h-scr);--h-chip:var(--h-chat);--h-field:var(--h-scr);--h-field-ring:inset 0 0 0 1px var(--h-line)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .site-host{--h-scr:#161B21;--h-chat:#0E1216;--h-line:#28303A;--h-line-2:#1F262E;--h-ink:#EDF0F3;--h-ink-2:#A1ABB6;--h-ink-3:#8A949E;
    --h-bub-in:#212830;--h-avatar:#2A323B;--h-avatar-ink:#C8D1DA;--h-shadow:none}
  :root:not([data-theme="light"]) .site-host.is-para{--h-scr:#121214;--h-chat:#1E1E22;--h-line:#34343A;--h-line-2:#26262B;--h-ink:#F2F2F4;--h-ink-2:#A9A9B2;--h-ink-3:#8E8E96;--h-bub-in:#1E1E22;--h-avatar:#26262B;--h-avatar-ink:#C8D1DA}
}
:root[data-theme="dark"] .site-host{--h-scr:#161B21;--h-chat:#0E1216;--h-line:#28303A;--h-line-2:#1F262E;--h-ink:#EDF0F3;--h-ink-2:#A1ABB6;--h-ink-3:#8A949E;
  --h-bub-in:#212830;--h-avatar:#2A323B;--h-avatar-ink:#C8D1DA;--h-shadow:none}
:root[data-theme="dark"] .site-host.is-para{--h-scr:#121214;--h-chat:#1E1E22;--h-line:#34343A;--h-line-2:#26262B;--h-ink:#F2F2F4;--h-ink-2:#A9A9B2;--h-ink-3:#8E8E96;--h-bub-in:#1E1E22;--h-avatar:#26262B;--h-avatar-ink:#C8D1DA}
.phone.site-host{background:var(--h-scr);color:var(--h-ink)}
.site-host .phone-status{color:var(--h-ink)}
.site-host .status-icons i{background:var(--h-ink-2)}.site-host .status-icons i:last-child{background:var(--h-ink)}
.site-host .host-bar{background:var(--h-scr);border-bottom-color:var(--h-line-2)}
.site-host .host-back{color:var(--h-ink-2)}
.site-host .avatar-other,.site-host .mini-head .avatar{background:var(--h-avatar);color:var(--h-avatar-ink)}
.site-host .host-who span{color:var(--h-ink-2)}
.site-host .host-chat{background:var(--h-msgs)}
.site-host .day-chip,.site-host .mini-app{background:var(--h-chip);color:var(--h-ink-2)}
.site-host .match-note{color:var(--h-ink-3)}
.site-host .bubble-other{background:var(--h-bub-in);color:var(--h-ink);box-shadow:var(--h-shadow)}
.site-host .bubble-time{color:var(--h-ink-3)}
.site-host .host-compose{background:var(--h-scr);border-top-color:var(--h-line-2)}
.site-host .host-field{background:var(--h-field);color:var(--h-ink);box-shadow:var(--h-field-ring)}
.site-host .host-field::placeholder{color:var(--h-ink-3)}
.site-host .host-send{background:var(--h-chat);color:var(--h-ink-3)}
.mini.site-host{background:var(--h-msgs);color:var(--h-ink);box-shadow:inset 0 0 0 1px var(--h-line-2)}
.site-host .dot-chip,.site-host .link-card{color:var(--ink)}