/* Собрано scripts/landing_build.py — не править руками. */
/* Outwiry design tokens — Casual Edgepunk (owner-approved 2026-07-14).
 *
 * Canon of the visual layer. Source mockup: claude.ai/design project
 * "Outwiry design system start" (cb01c896-5339-473e-b30d-bdec6863445c),
 * file "Outwiry Design System - Casual Edgepunk.dc.html" + edgepunk-theme.js.
 * The mockup is a mirror; if this file and the mockup diverge, this file wins
 * only after the divergence is deliberate — otherwise re-sync from the mockup.
 *
 * One theme: mid-graphite, deliberately reading as neither dark nor light.
 * No light/dark pair, no per-service accent — single palette for Scout and
 * Deck (owner decisions 2026-07-14, superseding the same morning's light/dark
 * + per-service-seed contract; rationale in the embedding change's design.md).
 *
 * 2026-07-14 AA pass (owner): --muted/--blue-text/--danger-text/--danger nudged
 * lighter than the then-mockup so every pair on --raised clears WCAG AA — see
 * scripts/ds_check.py CONTRAST_PAIRS. (The mockup has since caught up to these —
 * see v4 below; the divergence this note recorded no longer stands.)
 *
 * 2026-07-15 contrast v2 (owner, after live review on real screens): --sub/
 * --muted/--blue-text one more step lighter — AA with headroom (6.40/5.03/4.99
 * on --raised), not at the 4.5 edge. Disabled fills raised 40%→60% in surfaces.
 *
 * 2026-07-15 contrast v3 (owner: body text in posts still read thin): --sub to
 * #d8dce2 — 7.01 on --raised, the AAA bar. Body copy is the reading surface;
 * title/body hierarchy is carried by weight (600 vs 400), not by dimming.
 *
 * 2026-07-17 contrast v4 (owner re-tuned the mockup itself for contrast, then
 * asked to inherit it): surfaces one step darker (--ground/--raised/--sunken)
 * and text one step lighter (--ink #f7f7f8, --sub #e6e8ea, --muted #c5c9ce).
 * This re-syncs the six tokens FROM the mockup — mockup and canon now agree on
 * them. Accents/on-colours unchanged. All CONTRAST_PAIRS improve (text↑,
 * surfaces↓ both raise ratios); verified by scripts/ds_check.py.
 */

:root {
  /* ── Surfaces ─────────────────────────────────────────── */
  --ground: #2a2e37;   /* app background; the only surface that carries texture */
  --raised: #3c424e;   /* cards, panels */
  --sunken: #21252b;   /* wells, drawers, headers-in-cards */

  /* ── Text ─────────────────────────────────────────────── */
  --ink: #f7f7f8;      /* primary text */
  --sub: #e6e8ea;      /* body/preview text */
  --muted: #c5c9ce;    /* labels, hints, HUD */

  /* ── Lines ────────────────────────────────────────────── */
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.20);
  /* Граница элемента, который обязан ЧИТАТЬСЯ как индикатор, а не разделять области: на 8x8
   * разделительная линия пропадает, и «выключено» перестаёт быть видимым состоянием. Роль, не
   * место употребления — второй индикатор с той же задачей берёт её же (change
   * deck-beacon-line-token). Полупрозрачный → намеренно НЕ в CONTRAST_PAIRS ds_check: композит
   * зависит от подложки, число по токенам было бы ложной точностью. */
  --line-indicator: rgba(255, 255, 255, 0.40);

  /* ── Overlays (change deck-ds-color-debt) ─────────────────
   * Roles, not one-off values: each of these was repeated across surfaces as a literal —
   * the scrim with three different alphas and two syntaxes, the wash as a raw rgba fed to a
   * vendored editor variable. `--scrim` darkens IMAGERY so controls stay legible on any
   * photo; `--on-scrim` is what sits on it; `--wash` is the light film of an interactive
   * state over a graphite surface (hover/active), and the same value bridges the inherited
   * editor's own surface variable.
   * Translucent by nature, so deliberately NOT in ds_check CONTRAST_PAIRS: the composite
   * depends on the image underneath, and a ratio computed from the tokens alone would be
   * false precision (design D3 of the change).
   */
  --scrim: rgba(0, 0, 0, 0.55);
  --on-scrim: #ffffff;
  --wash: rgba(255, 255, 255, 0.10);

  /* ── Accents ──────────────────────────────────────────── */
  --blue: #4c96d2;        /* primary actions — the only colour that competes for the click */
  --blue-text: #8fc0e7;   /* links, inline accents on graphite */
  --blue-deep: #114c5a;   /* terminal counter bg, mono-avatar bg */
  --yellow: #e3b93b;      /* status marker (Scout badge) + rescue actions (UNDO, +Add) only */
  --danger: #e16e52;      /* destructive fills */
  --danger-text: #f29b85; /* destructive text on graphite */
  --success: #57b89a;

  /* ── On-colours (text on accent fills) ────────────────── */
  --on-blue: #0a2438;
  --on-yellow: #3a2c00;
  --on-deep: #cfe3ea;

  /* ── Brand (change brand-logo) ────────────────────────────
   * Colours of the Outwiry mark that the interface palette doesn't have: the void (two
   * shifted copies of the outline under the mark), the light variant A, the identity
   * variant's own ground. Brand-only — never a state/action colour on a surface. Consumed by
   * scripts/brand_assets.py; design/brand/variants.json names them.
   */
  --brand-void-red: #e6020a;
  --brand-void-cyan: #00d8f2;
  --brand-ink: #17181a;
  --brand-paper: #faf9f6;
  --brand-identity-ground: #151c28;

  /* ── Form: one-corner chamfer (top-right) + rounds ────── */
  /* Chamfer via corner-shape is progressive enhancement (no WKWebView
   * support): degrades to plain border-radius. Owner accepted 2026-07-14. */
  --bevel-lg: 14px;    /* containers, cards, panels, drawer */
  --bevel-md: 8px;     /* accent buttons, avatars, icon tiles */
  --bevel-sm: 5px;     /* accent badges (Scout) */
  --round-lg: 10px;    /* toasts, snackbars — floating neutral layers */
  --round-md: 7px;     /* neutral buttons, segmented, chips, steppers — never chamfered */
  --square: 2px;       /* terminal counter [ N ] */

  /* ── Ground texture & elevation ───────────────────────── */
  /* Dot grid: only ever on --ground (never cards/panels/controls). */
  --texture-dots: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.04) 1px, transparent 0);
  --texture-dots-size: 22px 22px;
  --shadow-float: 0 6px 24px rgba(0, 0, 0, 0.25); /* toasts, snackbars */

  /* ── Typography ───────────────────────────────────────── */
  --font-display: 'Manrope', -apple-system, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace; /* HUD labels, badges, counters, meta */

  /* ── Motion ───────────────────────────────────────────── */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;
  --dur-spin: 700ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
}

/* Лендинг outwiry.com (change scout-landing). Токены — design/tokens.css, их генератор
 * кладёт перед этим файлом в assets/style.css. Вид — макет
 * docs/solution-design/outwiry-landing-mockup.html, принятый владельцем 2026-10-20.
 * Цвета — только токены; исключение одно: градиент-заглушка «картинки» поста в макете чата. */

/* Шрифты — файлы npm @fontsource, их кладёт в /fonts/ стадия сборки образа (design D7). */
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:400;src:url(/fonts/manrope-cyrillic-400-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:400;src:url(/fonts/manrope-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:500;src:url(/fonts/manrope-cyrillic-500-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:500;src:url(/fonts/manrope-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:600;src:url(/fonts/manrope-cyrillic-600-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:600;src:url(/fonts/manrope-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:700;src:url(/fonts/manrope-cyrillic-700-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:700;src:url(/fonts/manrope-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:800;src:url(/fonts/manrope-cyrillic-800-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:800;src:url(/fonts/manrope-latin-800-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:500;src:url(/fonts/ibm-plex-mono-cyrillic-500-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:500;src:url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:600;src:url(/fonts/ibm-plex-mono-cyrillic-600-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:600;src:url(/fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ground);color:var(--ink);font-family:var(--font-display);-webkit-text-size-adjust:100%}

/* Страница. overflow-x: clip — поле точек выходит за край чата и обрезается, а не прокручивается. */
.pg{background-color:var(--ground);background-image:var(--texture-dots);background-size:var(--texture-dots-size);
  container-type:inline-size;color:var(--sub);font-size:16px;line-height:1.55;overflow-x:clip;min-height:100vh}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px}
@container (max-width:640px){.wrap{padding:0 16px}}
a{color:var(--blue-text)}

/* Шапка */
.top{display:flex;align-items:center;gap:12px;padding:18px 0}
.top .mark{width:22px;height:22px}
.top .name{font:800 18px var(--font-display);color:var(--ink);letter-spacing:-.01em}
.badge{font:600 11px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-yellow);
  background:var(--yellow);padding:3px 7px;border-radius:3px var(--bevel-sm) 3px 3px;corner-shape:round bevel round round}
.top .sp{flex:1}
.lang{display:inline-flex;border:1px solid var(--line-strong);border-radius:var(--round-md);overflow:hidden}
.lang a{color:var(--muted);font:600 12px var(--font-mono);letter-spacing:.06em;padding:6px 9px;text-decoration:none}
.lang a:hover{color:var(--ink)}
.lang a[aria-current]{background:var(--raised);color:var(--ink)}
.lang a:focus-visible{outline:2px solid var(--blue-text);outline-offset:-2px}
.signin{font:600 14px var(--font-display);color:var(--sub);text-decoration:none;padding:6px 4px}
.signin:hover{color:var(--ink)}
@container (max-width:640px){.signin{display:none}}

/* Кнопки — как Button.svelte канона: primary синяя со скосом, neutral скруглённая */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;
  font:700 15px var(--font-display);text-decoration:none;cursor:pointer;transition:filter var(--dur-fast) var(--ease-out)}
.btn.primary{background:var(--blue);color:var(--on-blue);border:0;border-radius:5px var(--bevel-md) 5px 5px;corner-shape:round bevel round round}
.btn.neutral{background:transparent;color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--round-md)}
.btn:hover{filter:brightness(1.08)}
.btn:focus-visible{outline:2px solid var(--blue-text);outline-offset:2px}
/* «скоро» — пометка, а не действие: без наведения, фокуса и курсора-руки */
.btn.soon{background:transparent;color:var(--muted);border:1px dashed var(--line-strong);border-radius:var(--round-md);
  font-weight:600;cursor:default;filter:none}

/* Первый экран */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;padding:56px 0 72px}
@container (max-width:900px){.hero{grid-template-columns:1fr;gap:40px;padding:28px 0 48px}}
.hud{font:600 11px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hud .y{color:var(--yellow)}
/* Знак перед заголовком: высота — две строки h1; войд только от 96 px (design D4) */
.h1-row{display:flex;align-items:center;gap:18px;margin:14px 0 18px}
.ident-h1{flex:0 0 auto;width:116px;height:116px;margin-left:-6px}
h1{font:800 56px/1.04 var(--font-display);letter-spacing:-.025em;color:var(--ink);margin:0}
@container (max-width:640px){.h1-row{gap:12px}h1{font-size:34px}.ident-h1{width:96px;height:96px;margin-left:-4px}}
.lead{font-size:19px;line-height:1.55;color:var(--sub);max-width:34em;margin:0 0 28px}
@container (max-width:640px){.lead{font-size:17px}}
.ctas{display:flex;gap:12px;flex-wrap:wrap}
@container (max-width:640px){.ctas .btn{flex:1 1 100%}}
.note{margin-top:14px;font-size:14px;color:var(--muted);max-width:36em}

/* Чат с ботом на поле точек */
.chat-stage{position:relative;justify-self:center;width:100%;max-width:420px}
.chat-stage .field{position:absolute;left:-10%;top:-12%;width:120%;height:124%;pointer-events:none}
.chat{position:relative;background:var(--sunken);border:1px solid var(--line);border-radius:7px var(--bevel-lg) 7px 7px;corner-shape:round bevel round round;
  padding:14px;display:flex;flex-direction:column;gap:12px}
.chat-h{display:flex;align-items:center;gap:10px;padding:2px 4px 10px;border-bottom:1px solid var(--line)}
.chat-h img{width:30px;height:30px;border-radius:50%}
.chat-h b{color:var(--ink);font-size:14px;display:block}
.chat-h small{font:500 11px var(--font-mono);color:var(--muted);letter-spacing:.04em}
.post{background:var(--raised);border-radius:4px 12px 12px 12px;padding:10px 12px 8px;font-size:14px;line-height:1.45}
.post .src{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.av{width:22px;height:22px;display:grid;place-items:center;background:var(--blue-deep);color:var(--yellow);
  font:600 11px var(--font-mono);border-radius:3px 6px 3px 3px;corner-shape:round bevel round round}
.post .src span:last-child{font:600 11px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.post p{margin:0 0 6px;color:var(--sub)}
.post p b{color:var(--ink)}
.post .img{height:92px;border-radius:6px;margin:4px 0 8px;background:linear-gradient(135deg,#3f6d8c 0%,#2b4a5f 45%,#5b4a2a 100%)}
.post .kb{display:flex;gap:6px;margin-top:6px;color:var(--sub)}
.post .kb span{flex:1;display:grid;place-items:center;background:var(--line);border-radius:6px;padding:4px 0}
.post .t{font:500 10px var(--font-mono);color:var(--muted);text-align:right}
.held{display:flex;align-items:center;gap:8px;font:500 12px var(--font-mono);color:var(--muted);
  border:1px dashed var(--line-strong);border-radius:var(--round-md);padding:8px 10px}
.held .ic{color:var(--yellow)}

/* Значки — Material Symbols Outlined, тот же набор, что у бота (custom emoji) и Mini App
 * (`@material-symbols/svg-400`). Файлы кладёт в /icons/ стадия сборки образа по icons.txt;
 * цвет — маской из currentColor, как Telegram красит значки бота в цвет текста. */
.ic{display:inline-block;width:18px;height:18px;background-color:currentColor;
  -webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.i-add_circle{--icon:url(/icons/add_circle.svg)}
.i-do_not_disturb_on{--icon:url(/icons/do_not_disturb_on.svg)}
.i-bookmark{--icon:url(/icons/bookmark.svg)}
.i-settings{--icon:url(/icons/settings.svg)}
.i-filter_alt{--icon:url(/icons/filter_alt.svg)}
.i-ad_off{--icon:url(/icons/ad_off.svg)}
.i-perm_media{--icon:url(/icons/perm_media.svg)}
.i-query_stats{--icon:url(/icons/query_stats.svg)}
.i-trending_up{--icon:url(/icons/trending_up.svg)}

/* Секции и полосы точек */
section{padding:0 0 64px}
@container (max-width:640px){section{padding:0 0 44px}}
.divider{display:block;width:100%;height:20px;margin:0 0 44px}
h2{font:800 34px/1.15 var(--font-display);letter-spacing:-.02em;color:var(--ink);margin:10px 0 28px}
@container (max-width:640px){h2{font-size:27px}}
.card{background:var(--raised);border-radius:7px var(--bevel-lg) 7px 7px;corner-shape:round bevel round round;padding:22px}
.card h3{font:700 18px var(--font-display);color:var(--ink);margin:10px 0 8px}
.card p{margin:0;font-size:15px;color:var(--sub)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@container (max-width:900px){.steps{grid-template-columns:1fr}}
.num{display:inline-block;font:600 12px var(--font-mono);background:var(--blue-deep);color:var(--on-deep);padding:2px 7px;border-radius:var(--square)}
.feats{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.feats .card{grid-column:span 2}
.feats .card:nth-child(n+4){grid-column:span 3}
@container (max-width:900px){.feats{grid-template-columns:1fr 1fr}.feats .card,.feats .card:nth-child(n+4){grid-column:auto}.feats .card:last-child{grid-column:1/-1}}
@container (max-width:640px){.feats{grid-template-columns:1fr}.feats .card:last-child{grid-column:auto}}
.ico{width:36px;height:36px;display:grid;place-items:center;background:var(--sunken);color:var(--yellow);
  border-radius:4px 7px 4px 4px;corner-shape:round bevel round round}
.ico .ic{width:22px;height:22px}
.chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.chip{font:600 14px var(--font-display);color:var(--ink);background:var(--raised);border-radius:var(--round-md);padding:9px 14px}
.chip.part{background:transparent;border:1px solid var(--line-strong);color:var(--sub)}
.small{font-size:14px;color:var(--muted);margin-top:16px}

/* Блок закрытой беты */
.beta{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;background:var(--sunken);
  border-radius:7px var(--bevel-lg) 7px 7px;corner-shape:round bevel round round;padding:36px}
@container (max-width:900px){.beta{grid-template-columns:1fr;padding:24px;gap:24px}}
.beta h2{margin-bottom:12px}
.beta .ctas{margin-top:24px}
.beta ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.beta li{display:flex;gap:12px;font-size:15px}
.beta li::before{content:"";flex:0 0 8px;height:8px;margin-top:8px;background:var(--yellow);border-radius:1px 3px 1px 1px}

/* Подвал */
.foot-field{display:block;width:100%;height:96px;margin-top:40px}
footer{border-top:1px solid var(--line);padding:28px 0 40px;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;
  font-size:14px;color:var(--muted)}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--ink)}
footer .sp{flex:1}

@media (prefers-reduced-motion:reduce){.btn{transition:none}}