@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('./inter-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('./jost-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./jost-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./manrope-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./manrope-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./manrope-600.woff2') format('woff2');
}


    /* ─── tokens ─────────────────────────────────────────────────────────
       Six variables. Bind them to the active DESIGN.md and stop.
       Do not introduce raw hex anywhere else in this file. */
    :root {
      --bg: oklch(19.11478% 0.0348751 249.63553); --surface: oklch(98.61026% 0.0034606 219.53224); --fg: oklch(98.90856% 0.0034580 219.53214);
      --muted: oklch(90.67007% 0.0000000 89.87556); --border: oklch(90.46568% 0.0127240 236.63873); --accent: oklch(84.41508% 0.1456544 209.28508);
      --accent-soft: color-mix(in oklch, var(--accent) 14%, transparent);
      --fg-soft: color-mix(in oklch, var(--fg) 6%, transparent);
      --font-display: 'Manrope', sans-serif;
      --font-body: 'Inter', sans-serif;
      --font-mono: ui-monospace, 'Cascadia Code', monospace;
      --fs-h1: clamp(40px, 6.45833vw, 124px); --fs-h2: 36.571px; --fs-h3: 22.857px;
      --fs-lead: 19px; --fs-body: 16px; --fs-meta: 13px;
      --gap-xs: 8px; --gap-sm: 12px; --gap-md: 20px; --gap-lg: 32px;
      --gap-xl: 56px; --gap-2xl: 96px; --container: 1920px; --gutter: 60px;
      --radius: 5px; --radius-lg: 18.286px;
      --u: min(1px, calc(100vw / 1920)); --symbol-scale: 1;
    }

    /* ─── reset & base ──────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; }
    body {
      margin: 0;
      background: var(--bg);
      color: var(--fg);
      font-family: var(--font-body);
      font-size: var(--fs-body);
      line-height: 1.55;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }
    img, svg { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; cursor: pointer; }
    p { text-wrap: pretty; }
    h1, h2, h3, h4 { text-wrap: balance; }

    /* ─── layout primitives ─────────────────────────────────────────── */
    .container {
      max-width: var(--container);
      margin-inline: auto;
      padding-inline: var(--gutter);
    }
    .section {
      padding-block: clamp(48px, 8vw, var(--gap-2xl));
    }
    .section + .section { border-top: 1px solid var(--border); }
    .stack { display: flex; flex-direction: column; }
    .stack > * + * { margin-top: var(--gap-md); }
    .row { display: flex; align-items: center; gap: var(--gap-md); }
    .row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); }
    .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-lg); }
    .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-lg); }
    .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-md); }
    .grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--gap-xl); align-items: start; }
    .grid-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: var(--gap-xl); align-items: start; }
    @media (max-width: 920px) {
      .grid-2, .grid-3, .grid-4, .grid-2-1, .grid-1-2 { grid-template-columns: 1fr; }
    }

    /* ─── type ──────────────────────────────────────────────────────── */
    .h1, h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -0.02em; margin: 0; }
    .h2, h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -0.015em; margin: 0; }
    .h3, h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; margin: 0; }
    .lead   { font-size: var(--fs-lead); line-height: 1.55; color: var(--muted); max-width: 60ch; margin: 0; }
    .eyebrow {
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--accent);
      margin: 0 0 var(--gap-md);
    }
    .meta { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--muted); }
    .num  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

    /* ─── chrome: nav + footer ──────────────────────────────────────── */
    .topnav {
      position: sticky; top: 0; z-index: 10;
      background: color-mix(in oklch, var(--bg) 92%, transparent);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
    }
    .topnav-inner { display: flex; align-items: center; justify-content: space-between; padding-block: 14px; }
    .topnav .logo { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
    .topnav nav { display: flex; gap: var(--gap-lg); }
    .topnav nav a { font-size: 14px; color: var(--muted); }
    .topnav nav a:hover { color: var(--fg); }
    .pagefoot { padding-block: var(--gap-xl); color: var(--muted); font-size: 13px; border-top: 1px solid var(--border); }
    .pagefoot .row-between { flex-wrap: wrap; gap: var(--gap-md); }

    /* ─── buttons ───────────────────────────────────────────────────── */
    .btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 11px 20px;
      border-radius: var(--radius);
      border: 1px solid transparent;
      font-size: 15px;
      font-weight: 500;
      letter-spacing: -0.005em;
      transition: transform 0.05s ease, background 0.15s ease, border-color 0.15s ease;
    }
    .btn:active { transform: translateY(1px); }
    .btn-primary { background: var(--accent); color: var(--surface); border-color: var(--accent); }
    .btn-primary:hover { background: color-mix(in oklch, var(--accent) 88%, black); }
    .btn-secondary { background: transparent; color: var(--fg); border-color: var(--border); }
    .btn-secondary:hover { border-color: var(--fg); }
    .btn-ghost { background: transparent; color: var(--fg); border-color: transparent; padding-inline: 8px; }
    .btn-ghost:hover { color: var(--accent); }
    .btn-arrow::after { content: '→'; transition: transform 0.15s ease; }
    .btn-arrow:hover::after { transform: translateX(2px); }

    /* ─── card / surface ────────────────────────────────────────────── */
    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 28px;
    }
    .card-flat { background: transparent; border: 0; padding: 0; }
    .card-rule { background: transparent; border: 0; border-top: 1px solid var(--fg); padding: 24px 0 0; border-radius: 0; }

    /* ─── feature cell (icon + h3 + p) ──────────────────────────────── */
    .feature .feature-mark {
      width: 36px; height: 36px;
      display: grid; place-items: center;
      border: 1px solid var(--border);
      border-radius: 10px;
      color: var(--accent);
      margin-bottom: var(--gap-md);
    }
    .feature .feature-mark svg { width: 18px; height: 18px; }
    .feature h3 { margin-bottom: 6px; }
    .feature p  { margin: 0; color: var(--muted); font-size: 15px; }

    /* ─── stat (big number + label) ─────────────────────────────────── */
    .stat .stat-num {
      font-family: var(--font-display);
      font-size: clamp(56px, 8vw, 96px);
      line-height: 0.95;
      letter-spacing: -0.04em;
      color: var(--accent);
      font-weight: 600;
    }
    .stat .stat-label { color: var(--muted); font-size: 14px; margin-top: 8px; max-width: 24ch; }
    .stat .stat-unit  { font-size: 0.5em; opacity: 0.7; margin-left: 2px; }

    /* ─── quote / testimonial ───────────────────────────────────────── */
    .quote {
      font-family: var(--font-display);
      font-size: clamp(24px, 2.6vw, 32px);
      line-height: 1.32;
      letter-spacing: -0.01em;
      max-width: 28ch;
    }
    .quote-author { color: var(--muted); font-size: 14px; margin-top: var(--gap-md); }
    .quote-mark   {
      font-family: var(--font-display);
      font-size: 140px; line-height: 0.7;
      color: var(--accent); opacity: 0.18;
      margin-bottom: -28px;
    }

    /* ─── pill / badge / tag ────────────────────────────────────────── */
    .pill {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 10px;
      background: var(--accent-soft);
      color: var(--accent);
      border-radius: 999px;
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .tag {
      display: inline-flex; align-items: center;
      padding: 4px 10px;
      background: transparent;
      color: var(--muted);
      border: 1px solid var(--border);
      border-radius: 999px;
      font-size: 12px;
    }

    /* ─── form field ────────────────────────────────────────────────── */
    .field { display: flex; flex-direction: column; gap: 6px; }
    .field label { font-size: 13px; color: var(--muted); }
    .input, .textarea {
      width: 100%;
      padding: 11px 14px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
      color: var(--fg);
      font: inherit;
      font-size: 15px;
    }
    .input:focus, .textarea:focus {
      outline: 2px solid var(--accent-soft);
      border-color: var(--accent);
    }
    .textarea { min-height: 96px; resize: vertical; line-height: 1.55; }

    /* ─── table (data-style, no chrome) ─────────────────────────────── */
    .ds-table { width: 100%; border-collapse: collapse; font-size: 14px; }
    .ds-table th, .ds-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); }
    .ds-table th { color: var(--muted); font-weight: 500; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
    .ds-table tbody tr:hover { background: var(--fg-soft); }
    .ds-table .num-col { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }

    /* ─── image placeholder (DS-tinted block, never broken <img>) ──── */
    .ph-img {
      background:
        linear-gradient(135deg, var(--accent-soft), var(--fg-soft)),
        var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      aspect-ratio: 16 / 10;
      display: grid; place-items: center;
      color: var(--muted);
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: 0.04em;
    }
    .ph-img.square    { aspect-ratio: 1 / 1; }
    .ph-img.portrait  { aspect-ratio: 3 / 4; }
    .ph-img.wide      { aspect-ratio: 16 / 9; }

    /* ─── divider ───────────────────────────────────────────────────── */
    .rule  { border: 0; border-top: 1px solid var(--border); margin: 0; }
    .rule-strong { border: 0; border-top: 1px solid var(--fg); margin: 0; }

    /* ─── hero variants used by layouts.md ──────────────────────────── */
    .hero          { padding-block: clamp(80px, 12vw, 160px); }
    .hero-center   { text-align: center; max-width: 32ch; margin-inline: auto; }
    .hero h1       { margin-bottom: var(--gap-md); }
    .hero .lead    { margin-bottom: var(--gap-lg); }
    .hero-cta      { display: inline-flex; gap: var(--gap-sm); flex-wrap: wrap; }
    .hero-center .hero-cta { justify-content: center; }
    .hero-split    { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-2xl); align-items: center; }
    @media (max-width: 920px) { .hero-split { grid-template-columns: 1fr; } }

    /* ─── log row (newsletter, blog list, changelog) ────────────────── */
    .log-row { display: grid; grid-template-columns: 120px 1fr 100px; gap: var(--gap-lg); padding: 22px 0; border-top: 1px solid var(--border); align-items: baseline; }
    .log-row .meta { color: var(--muted); }
    .log-row h3 { font-size: 19px; }
    .log-row .pull { text-align: right; }
  
    /* Figma 441:889: adapt the bundled centered hero to the supplied composition. */
    body { line-height: 1.5; }
    button, a, input { -webkit-tap-highlight-color: transparent; }
    button { color: inherit; }
    button:disabled { cursor: not-allowed; }
    :focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
    [hidden] { display: none !important; }
    .scene { position: relative; isolation: isolate; width: 100%; overflow: clip; }
    .scene p { margin: 0; }
    .scene-background { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; z-index: -4; }
    .scene-background { pointer-events: none; }
    .scene-poster img { width: 100%; height: 100%; object-fit: cover; object-position: inherit; }
    .scene-video { opacity: 0; transition: opacity .25s ease; }
    .scene-video.is-ready { opacity: 1; }
    .scene::before { content: ''; position: absolute; inset: 0; z-index: -3; background: color-mix(in srgb, black 45%, transparent); }
    .scene::after { content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(90deg, transparent, oklch(13.034% .01924 258.55 / .16) 22%, oklch(13.034% .01924 258.55 / .34) 50%, oklch(13.034% .01924 258.55 / .16) 78%, transparent); }
    .construction-grid { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
    .construction-grid i { position: absolute; background: color-mix(in srgb, var(--accent) 6%, transparent); }
    .construction-grid .vertical { top: 0; bottom: 0; width: 1px; left: calc(3.125% + var(--column) * 10.4166667%); }
    .construction-grid .horizontal { left: 0; right: 0; height: 1px; top: var(--line); }
    .site-header { position: absolute; inset: 0 0 auto; padding: calc(23 * var(--u)) calc(60 * var(--u)); display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
    .brand { position: relative; display: flex; align-items: flex-start; gap: calc(14.73 * var(--u)); min-height: calc(84 * var(--u)); }
    .brand-symbol { position: relative; display: block; width: calc(73.27 * var(--u)); height: calc(84 * var(--u)); flex: none; }
    .brand-symbol img { position: absolute; left: 50%; top: 50%; max-width: none; transform: translate(-50%, -45.44%) scale(var(--symbol-scale)); }
    .brand-copy { font-family: 'Jost', sans-serif; padding-top: calc(8 * var(--u)); color: oklch(100.00000% 0.0000000 89.87556); }
    .brand-name { display: block; font-size: calc(26 * var(--u)); font-weight: 600; line-height: 1.45; }
    .brand-tagline { display: block; font-size: calc(16 * var(--u)); font-weight: 300; line-height: 1; }
    .header-contacts { display: flex; align-items: center; gap: calc(8.07 * var(--u)); padding-top: calc(20 * var(--u)); }
    .phone { display: inline-flex; align-items: center; min-height: 44px; margin-right: calc(22 * var(--u)); font-size: calc(16 * var(--u)); line-height: 16px; font-weight: 500; letter-spacing: .08em; color: oklch(100.00000% 0.0000000 89.87556); }
    .phone:hover { text-decoration: underline; text-underline-offset: 5px; }
    .icon-button { width: 44px; height: 44px; min-width: 44px; flex: none; display: grid; place-items: center; position: relative; border: 1.375px solid color-mix(in srgb, var(--fg) 17%, transparent); background: oklch(100.00000% 0.0000000 89.87556); color: var(--bg); border-radius: 50%; padding: 0; transition: box-shadow .18s, transform .18s; }
    .icon-button:hover { box-shadow: 0 0 0 4px color-mix(in oklch, var(--fg) 18%, transparent); }
    .icon-button:active { transform: translateY(1px); }
    .max-icon { width: 19.25px; height: 19.25px; object-fit: contain; }
    .notice { position: absolute; top: 17.0103093%; left: 50%; transform: translateX(-50%); width: min(calc(882 * var(--u)), calc(100% - 48px)); text-align: center; font-size: calc(14 * var(--u)); line-height: calc(30 * var(--u)); font-weight: 300; color: color-mix(in srgb, var(--muted) 80%, transparent); }
    .hero { position: absolute; top: 44.6391753%; left: 50%; transform: translate(-50%, -50%); width: min(1040px, calc(100% - 48px)); padding: 0; text-align: center; }
    .hero-center { max-width: none; }
    .hero .hero-pretitle { font-family: var(--font-display); font-size: calc(32 * var(--u)); font-weight: 400; letter-spacing: -.01em; line-height: calc(44 * var(--u)); margin-bottom: calc(12 * var(--u)); text-shadow: 0 2px 10px color-mix(in srgb, var(--bg) 30%, transparent); }
    .hero h1 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 calc(26 * var(--u)); font-size: calc(124 * var(--u)); font-weight: 500; line-height: calc(146 * var(--u)); letter-spacing: -.04em; margin: 0; text-shadow: 0 2px 10px color-mix(in srgb, var(--bg) 30%, transparent); }
    .hero h1 strong { font-weight: 600; color: oklch(86.64321% 0.1064804 202.10415); }
    .hero-actions { position: absolute; top: 73.1958763%; left: 50%; transform: translateX(-50%); }
    .analysis-button { width: 366.429px; min-height: 60px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 0 24px; border: 0; border-radius: 30px; background: linear-gradient(90deg, var(--accent), oklch(64.84243% 0.1888335 258.52001)); color: oklch(14.92736% 0.0358747 266.56159); font-size: 17.143px; font-weight: 600; letter-spacing: -.01em; box-shadow: 0 0 25.714px color-mix(in srgb, oklch(64.84243% 0.1888335 258.52001) 40%, transparent), 0 8.571px 34.286px -4.286px color-mix(in srgb, var(--accent) 50%, transparent); transition: box-shadow .18s, filter .18s, transform .18s; }
    .analysis-button:hover { filter: brightness(1.08); box-shadow: 0 0 32px color-mix(in srgb, var(--accent) 48%, transparent); }
    .analysis-button:active { transform: translateY(1px); }
    .cta-arrow { display: grid; place-items: center; position: relative; width: 30px; height: 30px; font-size: 15px; }
    .cta-arrow img { position: absolute; inset: 0; }
    .cta-arrow span { position: relative; }
    .socials { position: absolute; top: 84.1237113%; left: 50%; transform: translateX(-50%); display: flex; gap: 8.067px; }
    .social-button { border: 0; overflow: hidden; }
    .rutube-mark { position: absolute; width: 27.912px; height: 26.95px; left: 10.174px; top: 7.7px; }
    .site-footer { position: absolute; top: 94.6391753%; left: 0; width: 100%; padding: 0 calc(60 * var(--u)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; font-size: calc(14 * var(--u)); line-height: 16px; color: color-mix(in srgb, var(--muted) 80%, transparent); }
    .copyright { font-weight: 300; }
    .legal-nav { display: flex; gap: calc(32 * var(--u)); }
    .text-button { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; font-size: inherit; font-weight: 500; color: inherit; line-height: inherit; text-align: inherit; }
    .text-button::before { content: ''; position: absolute; inset: -14px -3px; }
    .text-button:hover { color: oklch(100.00000% 0.0000000 89.87556); text-decoration: underline; text-underline-offset: 4px; }
    .studio-credit { justify-self: end; font-weight: 500; }
    .studio-credit strong { color: oklch(100.00000% 0.0000000 89.87556); font-weight: 600; }
    dialog { border: 0; color: var(--bg); background: var(--surface); }
    dialog::backdrop { background: oklch(15.527% .0356 268.38 / .68); backdrop-filter: blur(4px); }
    .analysis-dialog { --font-display: 'Jost', sans-serif; --muted: oklch(48.48171% 0.0279218 244.55569); width: min(1280px, calc(100% - 48px)); height: min(816px, calc(100dvh - 48px)); max-width: none; max-height: none; padding: 45.714px; border-radius: 18.286px; box-shadow: 0 27.429px 73.143px oklch(14.22% .025 252 / .28); }
    .analysis-dialog[open] { display: flex; flex-direction: column; gap: 32px; }
    .modal-heading { position: relative; flex: none; }
    .modal-service { height: 50.286px; display: flex; align-items: flex-start; justify-content: space-between; }
    .modal-brand { display: flex; gap: 8.82px; font-family: 'Jost', sans-serif; }
    .modal-brand-symbol { position: relative; width: 43.85px; height: 50.286px; }
    .modal-brand-symbol img { position: absolute; max-width: none; left: -19.75px; top: -16.93px; }
    .modal-brand-copy { padding-top: 3px; }
    .modal-brand-copy b { display: block; font-size: 15.565px; line-height: 24px; font-weight: 600; }
    .modal-brand-copy span { display: block; font-size: 9.578px; line-height: 9.578px; font-weight: 300; }
    .close-button {
      display: grid;
      place-items: center;
      flex: none;
      width: max(44px, calc(50.286px * (.88 + .12 * var(--modal-fit, 1))));
      height: max(44px, calc(50.286px * (.88 + .12 * var(--modal-fit, 1))));
      border: 0;
      border-radius: 5px;
      background: transparent;
      color: var(--bg);
      -webkit-tap-highlight-color: transparent;
    }
    .close-button:hover { background: oklch(94.87323% 0.0083949 236.56227); }
    .close-button:focus { outline: none; }
    dialog[data-keyboard-focus] .close-button:focus-visible {
      outline: 2px solid var(--bg);
      outline-offset: 2px;
    }
    .modal-heading h2 { margin-top: 9.143px; font-size: 36.571px; line-height: 45.714px; font-weight: 600; max-width: calc(100% - 270px); }
    .modal-heading p { margin: 9.143px 0 0; font-size: 17.143px; line-height: 27.429px; color: var(--muted); max-width: calc(100% - 270px); }
    .plan-decoration { position: absolute; top: 43.43px; right: 19px; width: 246.857px; height: 96px; }
    .step-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 13.714px; flex: none; font-size: 13.714px; line-height: 20.571px; color: var(--muted); }
    .step-list li::before { content: ''; display: block; height: 3.429px; background: var(--border); margin-bottom: 11.429px; }
    .step-list li[aria-current] { color: var(--bg); font-weight: 600; }
    .step-list li[aria-current]::before { background: var(--accent); }
    .analysis-form { min-height: 0; display: flex; flex-direction: column; gap: 32px; flex: 1; }
    .modal-body { display: grid; grid-template-columns: minmax(0, 786.286fr) minmax(0, 384fr); gap: 18.286px; min-height: 0; overflow: visible; flex: none; }
    .form-column { min-width: 0; }
    .source-tabs { height: 82.286px; background: oklch(94.87323% 0.0083949 236.56227); padding: 6px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; border-radius: 12px; }
    .source-tab { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 12px; background: oklch(100.00000% 0.0000000 89.87556); color: var(--muted); border: 1px solid var(--border); border-radius: 5px; font-size: 16px; font-weight: 500; line-height: 22.857px; }
    .source-tab:hover { background: oklch(94.87323% 0.0083949 236.56227); color: var(--bg); border-color: var(--bg); }
    .source-tab[aria-selected="true"] { background: var(--bg); color: oklch(100.00000% 0.0000000 89.87556); border-color: var(--bg); font-weight: 600; }
    .source-tab[aria-selected="true"]:hover { background: color-mix(in oklch, var(--bg) 85%, black); }
    .tab-icon { display: grid; place-items: center; width: 22.857px; height: 22.857px; flex: none; }
    .source-tab[aria-selected="true"] .tab-icon .inactive-icon, .source-tab[aria-selected="false"] .tab-icon .active-icon { display: none; }
    .source-panel { margin-top: 18.286px; }
    .analysis-dialog .field { gap: 9.143px; }
    .analysis-dialog .field label { font-size: 16px; line-height: 22.857px; color: var(--bg); font-weight: 500; }
    .analysis-dialog .input { height: 64px; border: 1.143px solid var(--border); border-radius: 8px; background: oklch(100.00000% 0.0000000 89.87556); font-size: 18.29px; line-height: 27.429px; padding: 0 18.286px; color: var(--bg); }
    .analysis-dialog .input::placeholder { color: var(--muted); opacity: 1; }
    .analysis-dialog .input:focus { border-color: var(--bg); outline: 2px solid var(--accent); outline-offset: 2px; }
    .analysis-dialog :focus-visible, .notice-dialog :focus-visible { outline-color: var(--bg); }
    .analysis-dialog .input[aria-invalid="true"] { border-width: 2px; border-color: var(--bg); }
    .helper-row { display: flex; align-items: flex-start; gap: 11.429px; margin-top: 18.286px; color: var(--muted); font-size: 14.857px; line-height: 22.857px; }
    .helper-icon { flex: none; display: grid; place-items: center; width: 20.571px; height: 20.571px; }
    .helper-row p { margin: 0; }
    .info-panel { margin-top: 18.286px; border-radius: 10px; background: color-mix(in srgb, oklch(94.87323% 0.0083949 236.56227) 65%, transparent); padding: 12px; }
    .info-panel h3 { font-family: var(--font-body); color: var(--bg); font-size: 16px; line-height: 22.857px; font-weight: 500; margin-bottom: 8px; }
    .info-panel p { margin: 0; font-size: 14.857px; line-height: 23px; color: var(--muted); }
    .coordinates { display: grid; grid-template-columns: 1fr 1fr; gap: 18.286px; }
    .coordinates .info-panel { margin-top: 18.286px; }
    .coordinates h3 { margin-bottom: 6px; }
    .coordinates output { font-size: 18.286px; line-height: 27.429px; color: var(--bg); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
    .concept-column { min-width: 0; padding-left: 27.429px; border-left: 1.143px solid var(--border); }
    .concept-image { position: relative; width: 100%; height: 228.571px; border-radius: 11.429px; overflow: clip; }
    .concept-image > img { width: 100%; height: 100%; object-fit: cover; }
    .concept-caption { position: absolute; top: 14px; left: 14px; border: 1px solid oklch(100.00000% 0.0000000 89.87556); border-radius: 8px; background: oklch(100.00000% 0.0000000 89.87556); color: var(--bg); padding: 7px 12px; font-size: 12px; font-weight: 500; line-height: 18px; box-shadow: 0 2px 4px color-mix(in srgb, var(--bg) 14%, transparent); }
    .concept-column h3 { font-family: var(--font-display); font-size: 22.857px; line-height: 32px; font-weight: 600; margin: 13.714px 0; }
    .concept-column p { color: var(--muted); font-size: 16px; line-height: 25.143px; margin: 0; }
    .form-actions { flex: none; border-top: 1.143px solid var(--border); padding-top: 27.429px; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 88px; }
    .form-action-note { color: var(--muted); font-size: 13.714px; line-height: 20.571px; margin: 0; }
    .form-submit { flex: none; width: 355px; height: 59px; border-radius: 30px; border: 0; background: linear-gradient(90deg, var(--accent), oklch(64.84243% 0.1888335 258.52001)); color: var(--bg); font-size: 17.14px; font-weight: 600; }
    .form-submit:hover { filter: brightness(1.08); }
    .form-submit:disabled { background: oklch(91.42390% 0.0109989 234.82822); color: oklch(50.56186% 0.0264618 242.28611); filter: none; }
    .drop-zone { height: 194px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px 24px; background: color-mix(in srgb, oklch(94.87323% 0.0083949 236.56227) 55%, transparent); border: 1px dashed var(--border); border-radius: 12px; text-align: center; }
    .drop-zone.is-dragging { border: 2px solid var(--bg); background: color-mix(in oklch, var(--accent) 10%, var(--surface)); }
    .drop-zone strong { color: var(--bg); font-size: 17.143px; line-height: 24px; font-weight: 600; overflow-wrap: anywhere; max-width: 100%; }
    .drop-zone p { margin: 0; color: var(--muted); font-size: 14.857px; line-height: 22px; }
    .file-picker { position: relative; height: 44px; min-width: 200px; padding: 0 16px; display: inline-flex; justify-content: center; align-items: center; border: 1px solid var(--border); border-radius: 5px; background: oklch(100.00000% 0.0000000 89.87556); color: var(--bg); font-size: 14.857px; font-weight: 600; cursor: pointer; }
    .file-picker:hover { border-color: var(--bg); background: oklch(94.87323% 0.0083949 236.56227); }
    .file-picker:focus-within { outline: 3px solid var(--accent); outline-offset: 3px; }
    .file-picker input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
    .form-feedback { margin: 12px 0 0; color: var(--bg); font-size: 14px; line-height: 22px; font-weight: 500; }
    .notice-dialog { width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 28px; border-radius: 18px; }
    .notice-dialog .close-button { position: absolute; top: 12px; right: 12px; }
    .notice-dialog h2 { font-family: 'Jost', sans-serif; font-size: 28px; line-height: 1.2; margin: 30px 0 16px; }
    .notice-dialog p { margin: 0; font-size: 16px; line-height: 1.6; color: oklch(48.48171% 0.0279218 244.55569); }

    /* Fit the composition to the actual preview or device viewport. */
    html, body { width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
    .scene { --page-fit: 1; --flow-gap: calc(4px + 28px * var(--page-fit)); height: var(--viewport-height, 100dvh); min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto auto auto; align-items: center; row-gap: var(--flow-gap); padding: calc(10px + 13px * var(--page-fit)) clamp(20px, 3.125vw, 60px); }
    .site-header, .notice, .hero, .hero-actions, .socials, .site-footer { position: relative; inset: auto; transform: none; margin: 0; }
    .site-header { width: 100%; padding: 0; min-height: 0; }
    .brand-name { font-size: max(18px, calc(26 * var(--u))); }
    .brand-tagline { font-size: max(10px, calc(16 * var(--u))); line-height: 1.3; }
    .phone { font-size: max(12px, calc(16 * var(--u))); }
    .notice { padding-top: 40px; justify-self: center; width: min(882px, 100%); font-size: calc(12px + 2px * var(--page-fit)); line-height: calc(18px + 12px * var(--page-fit)); }
    .hero { width: 100%; min-width: 0; min-height: 0; align-self: stretch; padding: 0; display: grid; place-items: center; }
    .hero-center { width: 100%; }
    .hero .hero-pretitle { font-size: clamp(18px, 2.2vw, 32px); line-height: 1.35; margin-bottom: calc(4px + 8px * var(--page-fit)); }
    .hero h1 { font-size: min(124px, calc(6.458333vw * (.82 + .18 * var(--page-fit))), calc(15dvh * (.82 + .18 * var(--page-fit)))); line-height: 1.18; gap: 0 calc(10px + 16px * var(--page-fit)); }
    .hero-actions { justify-self: center; width: min(366.429px, 100%); }
    .analysis-button { width: 100%; min-height: calc(48px + 12px * var(--page-fit)); font-size: clamp(14px, 1.19vw, 17.143px); }
    .socials { top: var(--social-offset, 0px); justify-self: center; }
    .site-footer { width: 100%; padding: 0; gap: 16px; font-size: clamp(11px, .729167vw, 14px); line-height: 1.35; }
    .legal-nav { gap: clamp(10px, 1.667vw, 32px); }
    .legal-nav .text-button { min-height: 44px; }
    .legal-nav .text-button::before { inset: 0; }
    .analysis-dialog { --modal-fit: 1; height: auto; max-height: calc(var(--viewport-height, 100dvh) - 24px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: calc(10px + 35.714px * var(--modal-fit)); }
    .analysis-dialog[open], .analysis-form { gap: calc(6px + 26px * var(--modal-fit)); }
    .analysis-form { flex: none; }
    .modal-service { height: calc(44px + 6.286px * var(--modal-fit)); }
    .modal-heading h2 { font-size: calc(20px + 16.571px * var(--modal-fit)); line-height: 1.25; margin-top: calc(4px + 5.143px * var(--modal-fit)); }
    .modal-heading p { font-size: calc(12px + 5.143px * var(--modal-fit)); line-height: 1.5; margin-top: calc(4px + 5.143px * var(--modal-fit)); }
    .step-list { font-size: calc(10px + 3.714px * var(--modal-fit)); line-height: 1.4; gap: 6px; }
    .step-list li::before { margin-bottom: calc(4px + 7.429px * var(--modal-fit)); }
    .modal-body { flex: none; overflow: visible; }
    .source-tabs { height: calc(52px + 30.286px * var(--modal-fit)); padding: 4px; gap: 5px; }
    .source-tab { min-height: 44px; padding: 4px; font-size: calc(11px + 5px * var(--modal-fit)); line-height: 1.35; gap: 6px; }
    .source-panel, .helper-row, .info-panel, .coordinates .info-panel { margin-top: calc(4px + 14.286px * var(--modal-fit)); }
    .analysis-dialog .field { gap: calc(4px + 5.143px * var(--modal-fit)); }
    .analysis-dialog .field label { font-size: calc(12px + 4px * var(--modal-fit)); line-height: 1.4; }
    .analysis-dialog .input { height: calc(44px + 20px * var(--modal-fit)); font-size: max(16px, calc(18.29px * (.88 + .12 * var(--modal-fit)))); padding-inline: 12px; }
    .helper-row, .info-panel p { font-size: calc(11px + 3.857px * var(--modal-fit)); line-height: 1.45; }
    .helper-row { gap: 8px; }
    .info-panel { padding: calc(6px + 6px * var(--modal-fit)); }
    .info-panel h3 { font-size: calc(13px + 3px * var(--modal-fit)); line-height: 1.4; margin-bottom: 4px; }
    .coordinates { gap: 8px; }
    .coordinates output { font-size: calc(16px + 2.286px * var(--modal-fit)); line-height: 1.4; }
    .concept-column { padding-left: calc(12px + 15.429px * var(--modal-fit)); }
    .concept-image { height: calc(92px + 136.571px * var(--modal-fit)); }
    .concept-column h3 { font-size: calc(17px + 5.857px * var(--modal-fit)); line-height: 1.35; margin: calc(4px + 9.714px * var(--modal-fit)) 0; }
    .concept-column p { font-size: calc(12px + 4px * var(--modal-fit)); line-height: 1.45; }
    .form-actions { min-height: 0; padding-top: calc(8px + 19.429px * var(--modal-fit)); gap: 8px; }
    .form-action-note { font-size: calc(11px + 2.714px * var(--modal-fit)); line-height: 1.4; }
    .form-submit { width: min(355px, 44%); height: calc(44px + 15px * var(--modal-fit)); font-size: calc(14px + 3.14px * var(--modal-fit)); }
    .drop-zone { height: auto; min-height: calc(112px + 82px * var(--modal-fit)); padding: calc(8px + 12px * var(--modal-fit)); gap: 4px; }
    .drop-zone > img { width: 24px; height: 24px; object-fit: contain; }
    .drop-zone strong { font-size: calc(13px + 4.143px * var(--modal-fit)); line-height: 1.35; }
    .drop-zone p, .file-picker { font-size: calc(11px + 3.857px * var(--modal-fit)); line-height: 1.4; }
    .file-picker { min-width: 160px; }
    .form-feedback { font-size: calc(11px + 3px * var(--modal-fit)); line-height: 1.4; margin-top: 6px; }
    .notice-dialog { --notice-fit: 1; max-height: calc(var(--viewport-height, 100dvh) - 24px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: calc(12px + 16px * var(--notice-fit)); }
    .notice-dialog h2 { font-size: calc(20px + 8px * var(--notice-fit)); }
    .notice-dialog p { font-size: calc(12px + 4px * var(--notice-fit)); line-height: 1.5; }
    .analysis-dialog[data-density="compact"] { --modal-fit: 0 !important; padding: 6px; }
    .analysis-dialog[data-density="compact"][open], .analysis-dialog[data-density="compact"] .analysis-form { gap: 2px; }
    .analysis-dialog[data-density="compact"] .modal-heading h2 { font-size: 18px; margin-top: 2px; }
    .analysis-dialog[data-density="compact"] .modal-heading p { font-size: 11px; line-height: 1.4; margin-top: 2px; }
    .analysis-dialog[data-density="compact"] .source-tabs { height: 44px; padding: 0; }
    .analysis-dialog[data-density="compact"] .source-tab { min-height: 44px; padding: 2px; }
    .analysis-dialog[data-density="compact"] .tab-icon, .analysis-dialog[data-density="compact"] .helper-icon { width: 16px; height: 16px; }
    .analysis-dialog[data-density="compact"] .source-panel, .analysis-dialog[data-density="compact"] .helper-row, .analysis-dialog[data-density="compact"] .info-panel { margin-top: 2px; }
    .analysis-dialog[data-density="compact"] .field { gap: 2px; }
    .analysis-dialog[data-density="compact"] .field label, .analysis-dialog[data-density="compact"] .helper-row, .analysis-dialog[data-density="compact"] .info-panel p { font-size: 11px; line-height: 1.4; }
    .analysis-dialog[data-density="compact"] .info-panel { padding: 4px; }
    .analysis-dialog[data-density="compact"] .info-panel h3 { font-size: 12px; margin-bottom: 2px; }
    .analysis-dialog[data-density="compact"] .step-list li::before { margin-bottom: 2px; }
    .analysis-dialog[data-density="compact"] .modal-body { gap: 2px; }
    .analysis-dialog[data-density="compact"] .concept-column { grid-template-columns: 80px minmax(0, 1fr); gap: 0 8px; padding-top: 2px; }
    .analysis-dialog[data-density="compact"] .concept-image { height: 48px; }
    .analysis-dialog[data-density="compact"] .concept-caption { top: 4px; left: 4px; max-width: calc(100% - 8px); font-size: 8px; padding: 2px; }
    .analysis-dialog[data-density="compact"] .concept-column h3 { font-size: 13px; margin: 0 0 2px; }
    .analysis-dialog[data-density="compact"] .concept-column p { font-size: 11px; line-height: 1.4; }
    .analysis-dialog[data-density="compact"] .form-actions { flex-direction: row; align-items: center; padding-top: 4px; }
    .analysis-dialog[data-density="compact"] .form-action-note { max-width: 44%; }
    .analysis-dialog[data-density="compact"] .form-submit { width: 52%; }
    @media (max-width: 1120px) {
      .site-footer { grid-template-columns: 1fr 1fr; row-gap: 2px; }
      .legal-nav { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: 1.5fr 1fr .6fr; gap: 8px; justify-self: center; width: min(520px, 100%); text-align: center; }
      .copyright { grid-column: 1; }
      .modal-heading h2, .modal-heading p { max-width: calc(100% - 190px); }
      .plan-decoration { right: 0; width: 170px; height: auto; }
    }
    @media (min-width: 701px) and (max-width: 1199px) and (min-height: 521px) {
      .scene { --flow-gap: calc(2px + 24px * var(--page-fit)); grid-template-rows: auto auto minmax(0, 1fr) auto auto auto minmax(0, 1fr) auto; padding: calc(10px + 14px * var(--page-fit)) clamp(24px, 3.90625vw, 40px); }
      .site-header { grid-row: 1; align-items: flex-start; gap: 20px; }
      .brand { gap: 12px; min-height: calc(52px + 17px * var(--page-fit)); }
      .brand-symbol { width: calc(46px + 14px * var(--page-fit)); height: calc(52px + 17px * var(--page-fit)); }
      .brand-symbol img { transform: translate(-50%,-45.44%) scale(calc(.628 + .192 * var(--page-fit))); }
      .brand-copy { padding-top: 4px; }
      .brand-name { font-size: calc(21px + 5px * var(--page-fit)); }
      .brand-tagline { font-size: calc(12px + var(--page-fit) * 1px); line-height: 1.3; }
      .header-contacts { padding-top: 8px; gap: 8px; }
      .phone { font-size: 14px; margin-right: 12px; letter-spacing: .04em; }
      .scene .icon-button { width: calc(44px + 8px * var(--page-fit)); height: calc(44px + 8px * var(--page-fit)); }
      .rutube-mark { left: calc(10.174px + 4px * var(--page-fit)); top: calc(7.7px + 4px * var(--page-fit)); }
      .notice { grid-row: 2; width: min(760px, 100%); font-size: calc(13px + 3px * var(--page-fit)); line-height: calc(20px + 6px * var(--page-fit)); }
      .notice p:first-child { margin-bottom: 6px; }
      .hero { grid-row: 4; align-self: center; }
      .hero .hero-pretitle { font-size: calc(26px + 4px * var(--page-fit)); margin-bottom: calc(4px + 8px * var(--page-fit)); }
      .hero h1 { font-size: min(clamp(64px, 10vw, 104px), 12dvh); font-size: min(calc(clamp(64px, 10vw, 104px) * (.86 + .14 * var(--page-fit))), calc(12dvh * (.86 + .14 * var(--page-fit)))); gap: 0 20px; }
      .hero-actions { grid-row: 5; width: min(400px, 100%); }
      .analysis-button { min-height: calc(48px + 16px * var(--page-fit)); font-size: calc(16px + 2px * var(--page-fit)); }
      .socials { grid-row: 6; gap: 12px; }
      .site-footer { grid-row: 8; grid-template-columns: 1fr 1fr; row-gap: 2px; font-size: calc(11px + var(--page-fit) * 1px); }
      .legal-nav { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: 1.5fr 1fr .6fr; gap: 12px; justify-self: center; width: min(640px, 100%); text-align: center; }
      .copyright { grid-column: 1; }
    }
    @media (max-width: 700px) {
      .scene { --flow-gap: calc(3px + 15px * var(--page-fit)); padding: calc(8px + 8px * var(--page-fit)) 20px; }
      .scene-background { object-position: 63% center; }
      .construction-grid .vertical { left: calc(20px + var(--column) * (100% - 40px) / 4); }
      .construction-grid .vertical:nth-child(n+6) { display: none; }
      .site-header { min-height: 88px; gap: 12px; }
      .brand { min-height: 52px; gap: 9px; }
      .brand-symbol { width: 45px; height: 52px; }
      .brand-symbol img { transform: translate(-50%,-45.44%) scale(.614); }
      .brand-copy { padding-top: 4px; }
      .brand-name { font-size: 19px; }
      .brand-tagline { font-size: 10px; line-height: 14px; max-width: min(138px, calc(100vw - 234px)); }
      .header-contacts { padding-top: 4px; gap: 8px; }
      .phone { position: absolute; top: 44px; right: 0; font-size: 12px; margin: 0; letter-spacing: .04em; }
      .notice { font-size: calc(11px + var(--page-fit) * 1px); line-height: calc(15px + var(--page-fit) * 5px); }
      .notice p:first-child { margin-bottom: calc(4px + var(--page-fit) * 6px); }
      .hero .hero-pretitle { font-size: calc(18px + var(--page-fit) * 3px); }
      .hero h1 { font-size: min(65px, calc(10.6vw * (.83 + .17 * var(--page-fit)))); gap: 0 10px; }
      .analysis-button { min-height: calc(44px + 12px * var(--page-fit)); font-size: 16px; }
      .site-footer { font-size: 11px; }
      .analysis-dialog { width: calc(100% - 20px); padding: calc(10px + 10px * var(--modal-fit)); border-radius: 14px; }
      .analysis-dialog[open], .analysis-form { gap: calc(6px + 8px * var(--modal-fit)); }
      .modal-heading h2 { font-size: calc(20px + 8px * var(--modal-fit)); max-width: none; }
      .modal-heading p { font-size: calc(12px + 2px * var(--modal-fit)); max-width: none; }
      .plan-decoration { display: none; }
      .step-list { font-size: calc(9.5px + 1.5px * var(--modal-fit)); text-align: center; }
      .step-label span { display: block; }
      .modal-body { grid-template-columns: minmax(0, 1fr); gap: calc(6px + 8px * var(--modal-fit)); }
      .source-tab { flex-direction: column; gap: 2px; font-size: 11px; }
      .concept-column { border-left: 0; border-top: 1px solid var(--border); padding: calc(6px + 6px * var(--modal-fit)) 0 0; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 0 12px; }
      .concept-image { grid-row: 1 / 3; height: calc(80px + 52px * var(--modal-fit)); align-self: center; }
      .concept-caption { top: 6px; left: 6px; max-width: calc(100% - 12px); padding: 3px 5px; font-size: 10px; line-height: 1.3; }
      .concept-column h3 { margin: 0 0 4px; align-self: end; }
      .form-actions { flex-direction: column; align-items: stretch; gap: 4px; }
      .form-submit { width: 100%; }
    }
    @media (min-width: 560px) and (max-height: 520px) {
      .scene { --flow-gap: calc(2px + 6px * var(--page-fit)); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; column-gap: 20px; padding: 8px 20px; }
      .site-header { grid-column: 1 / -1; min-height: 52px; }
      .header-contacts { padding-top: 0; }
      .phone { position: relative; top: auto; right: auto; margin-right: 8px; font-size: 12px; }
      .brand-tagline { max-width: none; }
      .notice { top: 40px; padding-top: 0; grid-column: 2; grid-row: 2 / 4; font-size: 11px; line-height: 1.4; }
      .hero { grid-column: 1; grid-row: 2; }
      .hero .hero-pretitle { font-size: 18px; }
      .hero h1 { font-size: min(48px, calc(6.458333vw * (.82 + .18 * var(--page-fit)))); }
      .hero-actions { grid-column: 1; grid-row: 3; }
      .socials { grid-column: 1; grid-row: 4; }
      .site-footer { grid-column: 2; grid-row: 4; font-size: 10px; column-gap: 8px; }
      .analysis-dialog { width: calc(100% - 20px); padding: calc(8px + 8px * var(--modal-fit)); }
      .modal-heading { display: grid; grid-template-columns: 150px minmax(0, 1fr) 44px; gap: 2px 12px; }
      .modal-service { display: contents; }
      .modal-brand { grid-column: 1; grid-row: 1 / 3; align-self: center; }
      .modal-heading .close-button { grid-column: 3; grid-row: 1 / 3; align-self: start; }
      .modal-heading h2, .modal-heading p { grid-column: 2; max-width: none; margin: 0; }
      .plan-decoration { display: none; }
      .analysis-dialog[open], .analysis-form { gap: calc(4px + 6px * var(--modal-fit)); }
      .modal-body { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; }
      .source-tab { flex-direction: row; }
      .form-column { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 0 8px; align-items: start; }
      .source-tabs { grid-column: 1; grid-row: 1 / 3; height: auto !important; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(3, minmax(44px, auto)); }
      .source-panel { grid-column: 2; grid-row: 1; margin-top: 0; }
      .form-feedback { grid-column: 2; grid-row: 2; }
      .step-label span { display: inline; }
      .concept-column { display: block; padding: 0 0 0 12px; border-top: 0; border-left: 1px solid var(--border); }
      .concept-image { height: calc(64px + 36px * var(--modal-fit)); }
      .concept-column h3 { margin: 4px 0; }
      .form-actions { flex-direction: row; align-items: center; }
      .form-submit { width: 45%; }
    }
    /* Legal documents share the existing consent dialog geometry. */
    .legal-dialog { width: min(800px, calc(100% - 32px)); height: min(720px, calc(var(--viewport-height, 100dvh) - 32px)); max-height: calc(var(--viewport-height, 100dvh) - 32px); padding: 28px; overflow: hidden; box-shadow: 0 27px 73px oklch(14.22% .025 252 / .28); }
    .legal-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 0; }
    .legal-dialog .legal-header { display: flex; align-items: flex-start; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
    .legal-dialog h2 { flex: 1; min-width: 0; margin: 0; font-size: 28px; line-height: 1.25; font-weight: 600; text-wrap: balance; }
    .legal-dialog .close-button { position: static; width: 44px; height: 44px; }
    .legal-body { min-height: 0; min-width: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: color-mix(in oklch, var(--bg) 38%, var(--surface)) var(--surface); padding: 20px 14px 4px 0; }
    .legal-body p, .legal-body li { margin: 0 0 16px; font-size: 16px; line-height: 1.65; color: var(--bg); overflow-wrap: anywhere; }
    .legal-body ol { margin: 0 0 20px; padding-left: 24px; } .legal-body li { padding-left: 4px; margin-bottom: 12px; } .legal-body > p:last-child, .legal-body li:last-child { margin-bottom: 0; }
    .legal-body:focus-visible { outline: 2px solid var(--bg); outline-offset: -2px; }
    .legal-body h3 { margin: 24px 0 12px; font-family: 'Jost', sans-serif; font-size: 21px; line-height: 1.35; font-weight: 600; color: var(--bg); text-wrap: pretty; }
    .legal-body .legal-date { margin-bottom: 20px; font-size: 14px; }
    .legal-body ul { margin: 0 0 20px; padding-left: 24px; } .legal-body a { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; color: var(--bg); text-decoration: underline; text-underline-offset: 3px; } .legal-body a:hover { text-decoration-thickness: 2px; } .legal-body section:last-child > p:last-child { margin-bottom: 0; }
    @media (max-width: 600px) { .legal-dialog { width: calc(100% - 24px); height: calc(var(--viewport-height, 100dvh) - 24px); max-height: calc(var(--viewport-height, 100dvh) - 24px); padding: 16px; border-radius: 14px; } .legal-dialog .legal-header { gap: 8px; padding-bottom: 16px; } .legal-dialog h2 { font-size: 22px; } .legal-body { padding: 16px 10px 4px 0; } .legal-body p, .legal-body li { font-size: 14px; line-height: 1.6; } }
    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

    /* Figma 499:14 — second step, composed from the existing modal system. */
    .context-dialog { height: min(816px, calc(var(--viewport-height, 100dvh) - 24px)); overflow: hidden; }
    .context-dialog .analysis-form { flex: 1; min-height: 0; }
    .context-scroll { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 5px; margin: -5px; }
    .context-fields { display: flex; flex-direction: column; gap: calc(6px + 12.286px * var(--modal-fit)); }
    .context-source { display: flex; align-items: center; gap: 10px; min-height: 44px; min-width: 0; }
    .context-source > img { flex: none; }
    .context-source p { margin: 0; flex: 1; min-width: 0; font-size: 16px; line-height: 24px; font-weight: 500; overflow-wrap: anywhere; }
    .context-change { min-height: 44px; flex: none; font-size: 14.857px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; }
    .context-change:hover { color: var(--bg); text-decoration-thickness: 2px; }
    .context-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18.286px; }
    .context-pair label { flex: 1; }
    .context-select { position: relative; }
    .context-dialog select.input { appearance: none; width: 100%; font-size: 16px; padding-right: 46px; color: var(--bg); }
    .context-dialog select.input:invalid { color: var(--muted); }
    .context-dialog select option { background: var(--surface); color: var(--bg); }
    .context-select > img { position: absolute; right: 18.286px; top: 50%; transform: translateY(-50%); pointer-events: none; }
    .context-fields .helper-row { margin: 0; }
    .context-confirm { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 0; font-size: 16px; line-height: 24px; cursor: pointer; }
    .context-confirm input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--bg); cursor: pointer; }
    .context-dialog .step-list li.is-complete { color: var(--bg); }
    .context-dialog .step-list li.is-complete::before { background: var(--accent); }
    .context-dialog .concept-column p { margin: 0; }
    .context-dialog .context-actions { display: grid; grid-template-columns: 128px minmax(0, 1fr) minmax(160px, 355px); gap: 13.714px; }
    .context-back { display: inline-flex; align-items: center; justify-content: center; height: calc(44px + 15px * var(--modal-fit)); border: 1px solid var(--border); border-radius: 29.5px; background: var(--surface); color: var(--bg); font-size: 16px; font-weight: 600; }
    .context-back:hover { background: oklch(94.87323% 0.0083949 236.56227); border-color: var(--bg); }
    .context-dialog .form-submit { width: 100%; }
    .context-feedback { flex: none; margin: 0; }
    @media (max-width: 700px) {
      .context-dialog .modal-body { display: grid; grid-template-columns: minmax(0, 1fr); }
      .context-fields { gap: 12px; }
      .context-source p, .context-confirm { font-size: 14px; line-height: 21px; }
      .context-pair { gap: 12px; }
      .context-dialog .context-actions { grid-template-columns: minmax(84px, .65fr) minmax(0, 1.35fr); gap: 8px; }
      .context-actions .form-action-note { grid-column: 1 / -1; grid-row: 1; }
      .context-back { grid-column: 1; grid-row: 2; font-size: 14px; }
      .context-actions .form-submit { grid-column: 2; grid-row: 2; font-size: 14px; }
    }
    @media (max-width: 359px) { .context-pair { grid-template-columns: minmax(0, 1fr); } }