/* hoptail.app (#151, #153). Стили — из макетов OD screens/09–12-site-*.html (docs/plans/landing-od-prompt.md),
 * токены — DESIGN.md (блок ниже сгенерирован build_od_design_system.py; при правке DESIGN.md — перенести).
 * Отличия от макетов: экраны приложения — картинки, а не HTML-копии; иконки — свои SVG вместо SF Symbols (лицензия
 * SF Symbols — только интерфейс приложений Apple); @container артбордов → @media по ширине окна. */
:root {
  --bg: #F6F7F9;
  --surface: #FFFFFF;
  --fg: #0F0F12;
  --muted: #595A60;
  --border: #D6D7DB;
  --accent: #F86111;
  --accent-on: #111114;
  --danger: #D70015;
  --on-danger: #FFFFFF;
  --accent-text: #B14500;
  --fill: #E2E5E9;
  --diff-added: #E3F3E7;
  --diff-removed: #FBE7E6;
  --status-working: #2468A6;
  --status-done: #1E733A;
  --surface-warm: var(--surface);
  --fg-2: var(--fg);
  --meta: var(--muted);
  --border-soft: var(--border);
  --accent-hover: color-mix(in srgb, var(--accent) 88%, black);
  --accent-active: color-mix(in srgb, var(--accent) 78%, black);
  --success: var(--status-done);
  --warn: var(--accent);
  --font-display: -apple-system, "SF Pro Display", system-ui, sans-serif;
  --font-body: -apple-system, "SF Pro Text", system-ui, sans-serif;
  --font-mono: "SF Mono", ui-monospace, Menlo, monospace;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 17px;
  --text-lg: 22px;
  --text-xl: 28px;
  --text-2xl: 34px;
  --text-3xl: 40px;
  --text-4xl: 40px;
  --leading-body: 1.29;
  --leading-tight: 1.05;
  --tracking-display: -0.02em;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --section-y-phone: 24px;
  --section-y-tablet: 32px;
  --section-y-desktop: 48px;
  --container-max: 375px;
  --container-gutter-phone: 16px;
  --container-gutter-tablet: 16px;
  --container-gutter-desktop: 16px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 9999px;
  --elev-flat: none;
  --elev-ring: 0 0 0 1px var(--border);
  --elev-raised: 0 1px 2px rgb(0 0 0 / 0.06), 0 0 0 1px var(--border);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent);
  --motion-fast: 150ms;
  --motion-base: 250ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

[data-theme="dark"] {
  --bg: #050507;
  --surface: #101013;
  --fg: #EFF0F3;
  --muted: #9EA0A6;
  --border: #2F3034;
  --danger: #FF453A;
  --accent-text: #F86111;
  --fill: #26282D;
  --diff-added: #0F2A1A;
  --diff-removed: #2E1214;
  --status-working: #5294D6;
  --status-done: #50A064;
  --elev-raised: 0 0 0 1px var(--border);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #050507;
    --surface: #101013;
    --fg: #EFF0F3;
    --muted: #9EA0A6;
    --border: #2F3034;
    --danger: #FF453A;
    --accent-text: #F86111;
    --fill: #26282D;
    --diff-added: #0F2A1A;
    --diff-removed: #2E1214;
    --status-working: #5294D6;
    --status-done: #50A064;
    --elev-raised: 0 0 0 1px var(--border);
  }
}



*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--fg); font:400 var(--text-base)/var(--leading-body) var(--font-body); }
p,h1,h2,h3,figure,blockquote,pre { margin:0; }
a { color:var(--fg); text-decoration-color:var(--border); text-underline-offset:calc(var(--space-1) / 1.33); }
a:hover { color:var(--fg); text-decoration-color:var(--fg); text-decoration-thickness:calc(var(--space-1) / 2); }
a:active { color:var(--fg); text-decoration-thickness:calc(var(--space-1) / 2); text-decoration-color:var(--fg); }
:focus-visible { outline:calc(var(--space-1) / 2) solid var(--fg); outline-offset:calc(var(--space-1) / 2); }
.text-link { display:inline; min-height:0; padding:0; vertical-align:baseline; }
strong { font-weight:600; }
h1,h2,h3 { text-wrap:balance; }
p,li,td,th { text-wrap:pretty; overflow-wrap:break-word; }
h2 { font:700 var(--text-xl)/calc(var(--text-xl) + var(--space-1) * 1.5) var(--font-display); margin-bottom:var(--space-4); }
h3 { font:600 var(--text-base)/var(--text-lg) var(--font-body); margin-bottom:var(--space-2); }
.display { font:700 var(--text-3xl)/var(--leading-tight) var(--font-display); letter-spacing:var(--tracking-display); }
.small { font:400 var(--text-sm)/calc(var(--space-4) + var(--space-1) / 2) var(--font-body); color:var(--muted); }
.mono { font:500 var(--text-xs)/var(--space-4) var(--font-mono); color:var(--muted); }
code { font:400 calc(var(--text-base) - var(--space-1) * .75)/var(--space-5) var(--font-mono); overflow-wrap:anywhere; }
.command { white-space:pre-wrap; overflow-wrap:normal; padding:var(--space-4); border:calc(var(--space-1) / 4) solid var(--border); border-radius:var(--radius-sm); background:var(--surface); margin-top:var(--space-3); }
.command code { white-space:pre-wrap; overflow-wrap:normal; font-size:var(--text-xs); line-height:var(--space-5); }
.wide,.header-inner,.footer-inner { width:calc(100% - var(--space-8) * 2); max-width:calc(var(--space-4) * 70); margin-inline:auto; }
.reading { width:calc(100% - var(--space-8) * 2); max-width:calc(var(--space-4) * 42.5); margin-inline:auto; }
.compare-width { width:calc(100% - var(--space-8) * 2); max-width:calc(var(--space-12) * 20); margin-inline:auto; }
.site-header { border-bottom:calc(var(--space-1) / 4) solid var(--border); }
.header-inner { display:flex; align-items:center; min-height:calc(var(--space-12) * 2); gap:var(--space-8); }
.brand { display:inline-flex; align-items:center; gap:var(--space-3); font:600 var(--text-lg)/var(--space-8) var(--font-display); text-decoration:none; min-height:calc(var(--space-8) + var(--space-3)); }
.hoptail-icon { width:var(--space-8); height:auto; aspect-ratio:1; border-radius:var(--radius-sm); flex:none; }
.header-links { margin-left:auto; display:flex; gap:var(--space-6); }
.header-links a,.footer-links a { display:inline-flex; align-items:center; min-height:calc(var(--space-8) + var(--space-3)); }
.header-links a { font-size:var(--text-sm); text-decoration:none; }
.header-links a:hover { text-decoration:underline; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); border:calc(var(--space-1) / 4) solid transparent; border-radius:var(--radius-pill); min-height:calc(var(--space-12) + var(--space-1) / 2); padding:var(--space-3) var(--space-5); text-decoration:none; font:600 var(--text-base)/var(--text-lg) var(--font-body); text-align:center; }
.button-primary { background:var(--accent); color:var(--accent-on); }
.button-secondary { background:var(--fill); color:var(--fg); }
.button-primary:hover { background:var(--accent); color:var(--accent-on); border-color:var(--accent-on); }
.button-secondary:hover { background:color-mix(in oklch,var(--fill) 70%,var(--bg)); color:var(--fg); border-color:var(--fg); }
.btn:active { transform:translateY(calc(var(--space-1) / 4)); }
.button-primary:active { background:var(--accent); color:var(--accent-on); border-color:var(--accent-on); }
.button-secondary:active { background:var(--bg); color:var(--fg); border-color:var(--fg); }
.actions { display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-6); }
.header-beta { font-size:var(--text-sm); margin:0; }
.hero { display:grid; grid-template-columns:minmax(0,1fr) calc(var(--space-4) * 25); gap:calc(var(--space-12) * 1.5); align-items:start; padding-top:calc(var(--space-12) * 2); padding-bottom:0; border-bottom:calc(var(--space-1) / 4) solid var(--border); }
.hero-copy { max-width:calc(var(--space-4) * 40); min-width:0; padding-bottom:var(--space-12); }
.hero .display { font-size:calc(var(--text-3xl) * 2); line-height:1; letter-spacing:var(--tracking-display); margin-bottom:var(--space-6); }
.hero p.lead { line-height:calc(var(--space-6) + var(--space-1) / 2); }
.hero .requirements { margin:0; line-height:var(--space-5); }
.hero .small { margin:0; }
.hero-visual { display:flex; justify-content:center; align-self:stretch; min-width:0; overflow:hidden; }
.notification { background:var(--surface); border:calc(var(--space-1) / 4) solid var(--border); border-radius:var(--radius-lg); min-width:0; }
.notification-heading { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-4) var(--space-4) var(--space-3); }
.notification-heading .hoptail-icon { width:var(--space-6); border-radius:calc(var(--radius-sm) / 1.33); }
.notification-heading strong { font:600 var(--text-sm)/var(--space-5) var(--font-body); min-width:0; }
.notification p { padding:0 var(--space-4) var(--space-4); font-size:var(--text-base); }
.notification-actions { display:grid; grid-template-columns:1fr 1fr; border-top:calc(var(--space-1) / 4) solid var(--border); }
.notification-actions span { text-align:center; min-height:calc(var(--space-12) + var(--space-1) / 2); display:grid; place-items:center; font-weight:600; }
.notification-actions span+span { border-left:calc(var(--space-1) / 4) solid var(--border); }
.section { margin-block:calc(var(--space-12) * 1.5); }
.section p { line-height:calc(var(--space-6) + var(--space-1) / 2); }
.section > .text-link,.section > div > .text-link { display:inline-block; margin-top:var(--space-4); min-height:calc(var(--space-8) + var(--space-3)); line-height:var(--space-6); }
.how { border-top:0; padding-top:calc(var(--space-12) * 1.5); margin-top:0; }
.how-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-8); list-style:none; padding:0; margin:var(--space-8) 0; }
/* Команда шага 01 — во всю ширину секции, под тремя шагами (#160, решение 2026-10-11): li шага 01 занимает обе строки
 * сетки и через subgrid кладёт текст в первую колонку, а команду — во вторую строку на все колонки. В DOM команда
 * остаётся внутри шага 01. Одна колонка (≤600 px) — обычный поток. */
.how-steps > li:nth-child(2) { grid-area:1 / 2; }
.how-steps > li:nth-child(3) { grid-area:1 / 3; }
.how-step-install { display:grid; grid-column:1 / -1; grid-row:1 / span 2; grid-template-columns:subgrid; grid-template-rows:subgrid; }
.how-step-install > div { grid-column:1; grid-row:1; }
.how-step-install > .command { grid-column:1 / -1; grid-row:2; margin-top:0; }
.step-number { display:block; color:var(--muted); font:500 var(--text-xs)/var(--space-4) var(--font-mono); margin-bottom:var(--space-4); }
.how-steps p { line-height:var(--space-6); }
.network { padding:0; border:0; border-radius:0; margin-top:var(--space-12); }
.network-main { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr); align-items:stretch; }
.network-node { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-2); padding:var(--space-5); background:var(--surface); border:calc(var(--space-1) / 4) solid var(--border); border-radius:var(--radius-md); text-align:center; height:calc(var(--space-12) * 3); }
.network-direct { display:flex; flex-direction:column; gap:var(--space-3); align-self:center; text-align:center; font:500 var(--text-xs)/var(--space-4) var(--font-mono); color:var(--muted); }
.network-line { border-top:calc(var(--space-1) / 4) solid var(--border); height:0; }
.network-relay { position:relative; display:flex; align-items:center; justify-content:center; padding-inline:12.5%; margin-top:var(--space-6); }
.network-relay::before,.network-relay::after { content:""; position:absolute; top:calc(var(--space-6) * -1); height:calc(var(--space-6) + var(--space-4) + var(--space-1) / 4); border-left:calc(var(--space-1) / 4) dashed var(--muted); }
.network-relay::before { left:12.5%; }
.network-relay::after { right:12.5%; }
.dashed-line { flex:1; border-top:calc(var(--space-1) / 4) dashed var(--muted); }
.relay-node { background:var(--surface); border:calc(var(--space-1) / 4) solid var(--border); border-radius:var(--radius-sm); padding:var(--space-2) var(--space-4); font:500 var(--text-xs)/var(--space-4) var(--font-mono); }
.network-label { text-align:center; color:var(--muted); font:500 var(--text-xs)/var(--space-4) var(--font-mono); margin-top:var(--space-3); }
.split-feature { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:calc(var(--space-12) * 1.5); align-items:center; }
.notification-stack { display:grid; gap:var(--space-2); padding:0; background:transparent; border-radius:0; max-width:calc(var(--space-12) * 9); }
/* Три колонки до 300 px, при нехватке места сжимаются пропорционально (до ~200 px на 721); уже — одна колонка. Без прокрутки. */
.screenshot-gallery { display:grid; grid-template-columns:repeat(3, minmax(0, calc(var(--container-max) * .8))); justify-content:space-between; align-items:start; gap:var(--space-8); padding:0 0 var(--space-6); }
.screenshot-gallery figure { min-width:0; }
.screenshot-gallery figcaption { text-align:center; margin-top:var(--space-4); font:400 var(--text-sm)/calc(var(--space-4) + var(--space-1) / 2) var(--font-body); color:var(--muted); }
.founder blockquote { padding:0; }
.founder blockquote p { font-size:var(--text-lg); line-height:var(--space-8); }
.founder blockquote footer { margin-top:var(--space-5); color:var(--muted); font-size:var(--text-sm); }
.faq-list { margin-top:var(--space-8); }
.faq-item { padding:var(--space-6) 0; border-bottom:calc(var(--space-1) / 4) solid var(--border); }
.faq-item:first-child { padding-top:0; }
.faq-item h3 { font-size:var(--text-base); }
.faq-item p { line-height:var(--space-6); }
.final-cta { background:var(--bg); border:0; padding:var(--space-12) 0; margin-top:var(--space-12); }
.site-footer { border-top:calc(var(--space-1) / 4) solid var(--border); margin-top:var(--space-12); padding:var(--space-8) 0 var(--space-12); }
.footer-inner { max-width:calc(var(--space-4) * 70); }
.footer-links { display:flex; align-items:center; flex-wrap:wrap; gap:0 var(--space-2); font-size:var(--text-sm); margin-bottom:var(--space-4); }
.separator { color:var(--muted); }
.footer-inner .small { max-width:calc(var(--space-4) * 42.5); margin-top:var(--space-3); }
.article-title { padding-top:calc(var(--space-12) * 1.5); padding-bottom:var(--space-8); }
.article-title .mono { margin-top:var(--space-5); }
.summary { padding:var(--space-6); background:var(--surface); border-radius:var(--radius-lg); }
.summary h2 { font:600 var(--text-base)/var(--text-lg) var(--font-body); margin-bottom:var(--space-3); }
.summary p { line-height:var(--space-6); }
.option-list { padding:0; list-style:none; margin:var(--space-6) 0; }
.option-list li { margin-top:var(--space-6); }
.setup-steps { padding-left:var(--space-6); margin:var(--space-6) 0; }
.setup-steps li { padding-left:var(--space-2); margin-bottom:var(--space-6); }
.setup-steps li::marker { font:500 var(--text-sm)/var(--space-5) var(--font-mono); color:var(--muted); }
.article-notification { margin:var(--space-8) auto 0; max-width:var(--container-max); }
.troubleshooting,.plain-list { padding-left:var(--space-5); margin:var(--space-6) 0; }
.troubleshooting li,.plain-list li { padding-left:var(--space-1); margin-bottom:var(--space-3); line-height:var(--space-6); }
table { border-collapse:collapse; width:100%; table-layout:fixed; font:400 var(--text-base)/var(--space-6) var(--font-body); }
th,td { text-align:left; vertical-align:top; padding:var(--space-5); border-bottom:calc(var(--space-1) / 4) solid var(--border); overflow-wrap:anywhere; }
th { font-weight:600; }
.comparison-table th:first-child { width:24%; }
.comparison-table thead { background:var(--surface); }
.comparison-table tbody td:last-child { background:var(--surface); }
.sources { margin-top:var(--space-4); }
.comparison-disclaimer { margin-top:var(--space-8); margin-bottom:var(--space-8); }
.document.reading { padding:0; }
.document > p { margin-bottom:var(--space-4); line-height:var(--space-6); }
.document .section { margin-block:var(--space-12); }
.document .section p { margin-bottom:var(--space-4); }
.document-table { font-size:var(--text-sm); line-height:var(--space-5); }
.document-table th,.document-table td { padding:var(--space-3); }
.document-table th:first-child { width:30%; }
mark.todo { background:none; color:var(--accent-text); font:600 var(--text-xs)/var(--space-5) var(--font-mono); }
mark.todo:target { outline:calc(var(--space-1) / 2) solid var(--fg); outline-offset:calc(var(--space-1) / 2); }
.empty-page { padding-block:calc(var(--space-12) * 3); }
.empty-page p { margin-top:var(--space-6); line-height:var(--space-6); max-width:calc(var(--space-12) * 10); }
.skip { position:absolute; top:var(--space-2); left:var(--space-2); z-index:10; padding:var(--space-3) var(--space-4); border-radius:var(--radius-sm); background:var(--surface); color:var(--fg); transform:translateY(calc(-100% - var(--space-5))); opacity:0; pointer-events:none; }
.skip:focus-visible { transform:none; opacity:1; pointer-events:auto; }
@media (max-width: 600px) {
 .wide,.reading,.compare-width,.header-inner,.footer-inner { width:calc(100% - var(--space-4) * 2); }
 .header-inner { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 var(--space-2); padding-top:var(--space-4); min-height:calc(var(--space-12) * 2); }
 .brand { gap:var(--space-2); font-size:var(--text-base); }
 .header-beta { grid-column:2; grid-row:1; padding-inline:var(--space-4); }
 .header-links { grid-column:1/-1; grid-row:2; margin:0; gap:var(--space-5); }
 .header-links a { font-size:var(--text-xs); }
 .hero { grid-template-columns:minmax(0,1fr); gap:var(--space-8); padding-top:var(--space-12); padding-bottom:0; }
 .hero .display { font-size:calc(var(--text-3xl) + var(--space-1)); line-height:1; }
 .actions { flex-direction:column; }
 .actions .btn { width:100%; }
 .hero .requirements { line-height:var(--space-5); }
 .hero-visual { width:100%; }
 .section { margin-block:var(--space-12); }
 .how { padding-top:var(--space-12); margin-top:0; }
 .how-steps { grid-template-columns:1fr; gap:var(--space-8); }
 .how-steps > li:nth-child(n),.how-step-install { display:block; grid-area:auto; }
 .how-step-install > .command { margin-top:var(--space-3); }
 .step-number { margin-bottom:var(--space-2); }
 .how-steps .command { font-size:var(--text-xs); }
 .network { padding:0; margin-top:var(--space-8); }
 .network-main { grid-template-columns:1fr; gap:var(--space-4); }
 .network-node { height:calc(var(--space-12) * 2.5); padding:var(--space-4); }
 .network-direct { padding:var(--space-3) 0; }
 .network-line { margin-top:var(--space-3); }
 .network-relay { padding:0; }
 .network-relay::before,.network-relay::after { display:none; }
 .network-label { line-height:var(--space-5); }
 .split-feature { grid-template-columns:1fr; gap:var(--space-8); }
 .notification-stack { padding:0; }
 .founder blockquote p { font-size:var(--text-lg); line-height:var(--space-8); }
 .article-title { padding-top:var(--space-12); padding-bottom:var(--space-6); }
 .article-title .display { font-size:var(--text-2xl); line-height:calc(var(--text-2xl) + var(--space-2)); }
 .summary { padding:var(--space-5); }
 .comparison-table,.comparison-table tbody { display:block; }
 .comparison-table thead { display:none; }
 .comparison-table tr { display:block; background:var(--surface); border-radius:var(--radius-md); padding:var(--space-4); margin-bottom:var(--space-3); }
 .comparison-table th,.comparison-table td { display:block; width:100% !important; padding:0; border:0; }
 .comparison-table th { font-size:var(--text-base); margin-bottom:var(--space-3); }
 .comparison-table td { font-size:var(--text-sm); line-height:var(--space-5); margin-top:var(--space-3); }
 .comparison-table td::before { content:attr(data-label) ": "; font-weight:600; }
 .document-table th,.document-table td { padding:var(--space-2); }
 .document-table th:first-child { width:32%; }
 .footer-links { display:block; }
 .footer-links a { margin-right:var(--space-2); }
 .footer-links .separator { margin-right:var(--space-2); }
 .footer-inner .small { line-height:var(--space-5); }
 .empty-page { padding-block:calc(var(--space-12) * 2); }
}

.hero-notes { display:grid; gap:var(--space-2); margin-top:var(--space-6); }
.requirement-item,.requirement-pair { white-space:nowrap; }
.network-caption { display:flex; justify-content:center; align-items:center; gap:var(--space-2); }
.editorial { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:calc(var(--space-12) * 1.5); align-items:start; }
.editorial > h2 { margin:0; min-width:0; }
.editorial-body { min-width:0; max-width:calc(var(--space-4) * 42.5); }
.editorial-body > .text-link { display:inline-flex; align-items:center; min-height:calc(var(--space-8) + var(--space-3)); margin-top:var(--space-4); }
.editorial-body .notification-stack { margin-top:var(--space-6); }
.editorial-body .faq-list { margin-top:0; }
.site-home .screen-intro { margin-bottom:var(--space-8); }
.final-cta h2 { font:700 calc(var(--text-3xl) + var(--space-4))/var(--leading-tight) var(--font-display); letter-spacing:var(--tracking-display); margin:0; }
.site-home .final-cta .editorial { row-gap:var(--space-6); }
.site-home .final-cta .actions { grid-column:2; grid-row:2; margin:0; }
.compare-width > h2 { width:100%; max-width:calc(var(--space-4) * 42.5); margin-inline:auto; }
@media (max-width: 600px) {
 .hero-copy { padding-bottom:0; }
 .editorial { grid-template-columns:minmax(0,1fr); gap:var(--space-4); }
 .editorial > h2 { margin-bottom:var(--space-2); }
 .editorial-body { max-width:100%; }
 .site-home .screen-intro { margin-bottom:var(--space-6); }
 .final-cta h2 { font-size:calc(var(--text-2xl) + var(--space-1) / 2); }
 .site-home .final-cta .actions { grid-column:1; grid-row:auto; margin:0; }
}

/* Hero 7: the approved 1120 px scene; all overrides stay inside the hero. */
.hero-header .header-inner { min-height: calc(var(--space-5) * 4); }
.hoptail-hero { display: grid; grid-template-columns: calc(var(--space-4) * 26) minmax(0, 1fr); column-gap: calc(var(--space-12) * 2); row-gap: 0; padding: 0 0 var(--space-8); align-items: start; }
.hoptail-hero .hero-stage { grid-column: 1 / -1; display: grid; grid-template-columns: calc(64% - var(--container-max) / 2) var(--container-max) minmax(0, 1fr); align-items: end; padding-top: var(--space-12); }
.hoptail-hero .hero-copy { grid-column: 1; min-width: 0; max-width: calc(var(--space-4) * 26); align-self: start; padding-bottom: 0; }
.hoptail-hero .hero-title { margin: 0; font: 700 calc(var(--space-8) * 2)/1 var(--font-display); letter-spacing: var(--tracking-display); }
.hoptail-hero p.lead { margin-top: var(--space-6); max-width: 40ch; color: var(--muted); font: 400 var(--space-5)/1.4 var(--font-body); }
.hoptail-hero .actions { display: flex; flex-direction: row; width: calc(var(--space-12) * 10); flex-wrap: nowrap; gap: var(--space-3); margin-top: var(--space-6); }
.hoptail-hero .actions .btn { flex: none; }
.hoptail-hero .screen-viewport { grid-column: 2; position: relative; z-index: 1; width: var(--container-max); height: calc(var(--space-12) * 14 + var(--space-6) + var(--space-1) + var(--space-1) / 2); }
.hoptail-hero .timeline { grid-column: 1 / -1; grid-row: 2; position: relative; z-index: 2; isolation: isolate; display: grid; grid-template-columns: calc(64% - var(--container-max) / 2) var(--container-max) minmax(0, 1fr); grid-template-rows: calc(var(--space-8) * 2) auto; row-gap: var(--space-8); align-self: start; list-style: none; padding: 0; margin: 0; overflow: visible; }
.hoptail-hero .timeline::before { content: ''; position: absolute; top: 0; left: var(--space-3); right: var(--space-3); height: calc(var(--space-1) / 4); background: var(--border); }
.hoptail-hero .moment { position: relative; min-width: 0; padding-top: var(--space-5); font: 500 var(--text-xs)/var(--space-4) var(--font-mono); }
.hoptail-hero .time { display: block; color: var(--fg); white-space: nowrap; }
.hoptail-hero .timeline-dot { position: absolute; z-index: 3; display: grid; place-items: center; top: calc(var(--space-3) * -1); left: 0; width: var(--space-6); height: var(--space-6); border-radius: var(--radius-pill); background: var(--fill); color: var(--fg); }
.hoptail-hero .working-moment { grid-column: 1; grid-row: 1 / 3; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: calc(var(--space-8) * 2) auto; row-gap: var(--space-8); padding-top: 0; align-self: start; }
.hoptail-hero .working-moment > .time { grid-row: 1; padding-top: var(--space-5); }
.hoptail-hero .agent-log { grid-row: 2; width: calc(var(--space-4) * 26); max-width: 100%; margin: 0; color: var(--muted); font: 400 var(--text-xs)/var(--space-4) var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.hoptail-hero .waiting-moment { grid-column: 2; grid-row: 1; text-align: center; }
.hoptail-hero .waiting-moment .timeline-dot { left: calc(50% - var(--space-3)); background: var(--accent); }
.hoptail-hero .moment-label { display: block; margin-top: var(--space-1); color: var(--muted); white-space: nowrap; }
.hoptail-hero .waiting-moment .moment-label { color: var(--accent-text); }
.hoptail-hero .allow-moment,.hoptail-hero .done-moment { grid-column: 3; grid-row: 1; width: max-content; text-align: center; }
.hoptail-hero .allow-moment { margin-left: calc(var(--space-12) + var(--space-2)); }
.hoptail-hero .done-moment { justify-self: end; }
.hoptail-hero .allow-moment .timeline-dot,.hoptail-hero .done-moment .timeline-dot { left: calc(50% - var(--space-3)); }
.hoptail-hero .scene-caption { grid-column: 2; grid-row: 2; margin-top: calc(var(--space-8) * 3); min-width: 0; color: var(--muted); font: 400 calc(var(--text-sm) + var(--space-1) / 4)/var(--space-5) var(--font-body); }
.hoptail-hero .hero-notes { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.hoptail-hero .hero-notes .small,.hoptail-hero .requirements { font: 400 calc(var(--text-sm) + var(--space-1) / 4)/var(--space-5) var(--font-body); color: var(--muted); }
.hoptail-hero .hero-notes .text-link { display: inline; padding-block: var(--space-1); }
.hoptail-hero .requirement-item,.hoptail-hero .requirement-pair { display: inline-block; white-space: nowrap; }
.hoptail-hero .beta-soon { margin-top: var(--space-6); color: var(--muted); font: 400 var(--text-base)/var(--text-lg) var(--font-body); }
/* Сцена героя не помещается уже ~806 px, а метки Allow и done на линии времени сходятся уже ~965 px: ниже — мобильная
 * раскладка (замер 2026-10-11, #153). */
@media (max-width: 960px) {
  .hero-header .header-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--space-2); padding-block: var(--space-3) var(--space-1); }
  .hoptail-hero { display: block; padding-top: 0; }
  .hoptail-hero .hero-stage { display: flex; flex-direction: column; align-items: stretch; padding-top: 0; }
  .hoptail-hero .hero-copy { padding-top: var(--space-8); max-width: 100%; align-self: stretch; }
  .hoptail-hero .hero-title { font-size: var(--text-3xl); line-height: var(--leading-tight); }
  .hoptail-hero p.lead { font-size: calc(var(--space-5) - var(--space-1) / 4); margin-top: var(--space-5); }
  .hoptail-hero .actions { display: grid; width: 100%; max-width: calc(var(--space-12) * 10); gap: var(--space-3); margin-top: var(--space-5); }
  .hoptail-hero .actions .btn { width: 100%; }
  .hoptail-hero .screen-viewport { width: calc(var(--container-max) * .8); max-width: 100%; height: calc((var(--space-12) * 14 + var(--space-6) + var(--space-1) + var(--space-1) / 2) * .8); align-self: center; margin-top: var(--space-12); overflow: clip; }
  .hoptail-hero .timeline { display: flex; flex-direction: column; gap: var(--space-8); margin-top: var(--space-8); padding-left: var(--space-12); }
  .hoptail-hero .timeline::before { top: var(--space-3); bottom: var(--space-3); left: var(--space-3); right: auto; width: calc(var(--space-1) / 4); height: auto; }
  .hoptail-hero .moment,.hoptail-hero .working-moment { display: block; padding-top: var(--space-1); width: auto; text-align: left; margin-left: 0; }
  .hoptail-hero .working-moment { width: 100%; min-width: 0; align-self: stretch; }
  .hoptail-hero .working-moment > .time { padding-top: 0; }
  .hoptail-hero .timeline-dot,.hoptail-hero .waiting-moment .timeline-dot,.hoptail-hero .allow-moment .timeline-dot,.hoptail-hero .done-moment .timeline-dot { left: calc(var(--space-12) * -1); top: 0; }
  .hoptail-hero .agent-log { width: 100%; min-width: 0; margin-top: var(--space-3); font-size: var(--text-sm); line-height: var(--space-5); white-space: normal; overflow-wrap: normal; word-break: normal; }
  .hoptail-hero .agent-log-line { display: block; padding-left: 2ch; text-indent: -2ch; white-space: normal; }
  .hoptail-hero .scene-caption { margin-top: var(--space-8); }
  .hoptail-hero .requirement-pair { white-space: normal; }
}
/* One non-looping scene, opt-in only: agent lines (0–750 ms), Waiting
   (750 ms), Chat screen (1000 ms), Allow (1250 ms), done (1500 ms).
   Artboards omit hero-play and show the final frame. Reduced motion also
   shows that frame immediately; no hidden content outside this media query. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes hoptail-hero-reveal { from { opacity: 0; } to { opacity: 1; } }
  .hoptail-hero.hero-play .agent-log { animation: hoptail-hero-reveal calc(var(--motion-base) * 3) var(--ease-standard) both; }
  .hoptail-hero.hero-play .waiting-moment { animation: hoptail-hero-reveal var(--motion-base) var(--ease-standard) calc(var(--motion-base) * 3) both; }
  .hoptail-hero.hero-play .screen-viewport { animation: hoptail-hero-reveal var(--motion-base) var(--ease-standard) calc(var(--motion-base) * 4) both; }
  .hoptail-hero.hero-play .allow-moment { animation: hoptail-hero-reveal var(--motion-base) var(--ease-standard) calc(var(--motion-base) * 5) both; }
  .hoptail-hero.hero-play .done-moment { animation: hoptail-hero-reveal var(--motion-base) var(--ease-standard) calc(var(--motion-base) * 6) both; }
}

/* Повышенный контраст (настройка системы) — как раньше на сайте. */
@media (prefers-contrast: more) {
  :root { --muted: #333439; --border: #85878D; --fill: #C9CDD3; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root { --muted: #C4C6CB; --border: #6B6D73; --fill: #34363C; }
}

/* Сайт поверх макета */
#main:focus { outline: none; }
.icon { flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
picture, picture img { display: block; }
img { max-width: 100%; height: auto; }
.screen-viewport img { width: 100%; }
.screen-shot { width: 100%; max-width: calc(var(--container-max) * .8); }
.network-node .icon { width: var(--text-xl); height: var(--text-xl); }
.network-caption .icon { width: var(--space-4); height: var(--space-4); }
.hoptail-hero .timeline-dot .icon { width: var(--space-3); height: var(--space-3); stroke-width: 2.5; }
.site-home:has(> .final-cta:last-child) + .site-footer { margin-top: 0; }
/* Пока ссылки TestFlight нет (#134): строка вместо кнопки, главная — Set up your Mac (макет 09, States). */
.actions.is-soon { flex-wrap: wrap; }
.actions .beta-soon { flex: 1 1 100%; margin: 0 0 var(--space-3); color: var(--muted); font: 400 var(--text-base)/var(--text-lg) var(--font-body); }
.hoptail-hero .actions.is-soon { width: auto; }
@media (max-width: 720px) {
  .screenshot-gallery { grid-template-columns: minmax(0, calc(var(--container-max) * .8)); justify-content: center; }
}
@media (max-width: 960px) {
  .hoptail-hero .screen-viewport { height: auto; }
}
/* Документы длиннее макета: блоки кода и подзаголовки внутри разделов. */
.document .command { margin-block: var(--space-3) var(--space-4); }
.document h3 { margin-top: var(--space-6); }
.document .plain-list .command { margin-bottom: 0; }
/* Кнопка Copy у команд (copy.js). Без JS команда выделяется целиком одним касанием. */
pre.command code { -webkit-user-select: all; user-select: all; }
/* Команда слева, Copy справа по вертикальному центру блока (и у многострочных); строки под кнопку нет, горизонтальной
 * прокрутки нет. Разметку строк и аргументов делает build.mjs (commands): строка .cl с висячим отступом 2ch переносится
 * только между аргументами .ca; путь .cs рвётся по «/», лишь когда он длиннее всей строки, длинный сегмент .cp — после
 * «.» или «\ », посреди слова — только если и кусок длиннее строки (overflow-wrap). Отступ code (32 − 20) / 2 = 6 px: однострочный блок той же высоты,
 * что кнопка. */
pre.command.has-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-3); padding-block: var(--space-2); }
pre.command.has-copy > code { display: block; min-width: 0; padding-block: calc((var(--space-8) - var(--space-5)) / 2); }
.command .cl { display: inline-block; max-width: 100%; padding-left: 2ch; text-indent: -2ch; vertical-align: top; }
.command .ca,.command .cs,.command .cp { display: inline-block; max-width: 100%; text-indent: 0; vertical-align: top; overflow-wrap: anywhere; }
/* Видимая капсула 64×32 — padding-box; зона касания 46 px (Apple HIG 44 pt) — прозрачная рамка 7 px той же кнопки
 * (предложение OD, #157). Отрицательный margin возвращает в раскладку 32 px, а рамка, в отличие от псевдоэлемента
 * за краем, не даёт кнопке scrollWidth больше clientWidth. Обводка hover и фокуса — по капсуле. */
.copy { --hit: calc(var(--space-1) * 1.75); min-width: calc(var(--space-12) + var(--space-4) + var(--hit) * 2); height: calc(var(--space-8) + var(--hit) * 2); margin: calc(var(--hit) * -1); padding: var(--space-1) var(--space-3); border: var(--hit) solid transparent; border-radius: var(--radius-pill); background: var(--fill) padding-box; color: var(--fg); font: 600 var(--text-sm)/var(--space-5) var(--font-body); cursor: pointer; }
.copy:hover { box-shadow: inset 0 0 0 calc(var(--space-1) / 4) var(--fg); }
.copy:focus-visible { outline-offset: calc(var(--space-1) / 2 - var(--hit)); }
.copy:active { transform: translateY(calc(var(--space-1) / 4)); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }