/* ─── 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(0.137136 0.048456 272.538);   /* page background — never token */
      --surface: oklch(0.204916 0.075871 270.467);   /* cards, modals, raised areas */
      --fg:      oklch(0.977663 0.010677 280.479);   /* primary text — never token */
      --muted:   oklch(0.803204 0.039432 270.887);   /* secondary text, captions */
      --border:  oklch(0.387177 0.062623 266.868);   /* hairlines, dividers */
      --accent:  oklch(0.809573 0.151510 69.290);   /* one accent — used at most 2× per screen */

      /* derived — do not change */
      --accent-soft: color-mix(in oklch, var(--accent) 14%, transparent);
      --fg-soft:     color-mix(in oklch, var(--fg) 6%, transparent);

      /* type — display = serif (default), body = sans, mono for numerics */
      --font-display: 'ATC Manrope', 'Trebuchet MS', sans-serif;
      --font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
      --font-mono:    ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;

      /* scale — clamp() so it works at 1280, 1440, 1920 without media queries */
      --fs-h1: clamp(38px, 4.4vw, 64px);
      --fs-h2: clamp(28px, 3.2vw, 44px);
      --fs-h3: 22px;
      --fs-lead: 19px;
      --fs-body: 16px;
      --fs-meta: 13px;

      /* spacing — 8-point grid */
      --gap-xs: 8px;
      --gap-sm: 12px;
      --gap-md: 20px;
      --gap-lg: 32px;
      --gap-xl: 56px;
      --gap-2xl: 96px;
      --container: 1320px;
      --gutter: 32px;

      --radius: 10px;
      --radius-lg: 16px;
    }

    /* ─── 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; }
    .content-img {
      display: block;
      max-width: 100%;
      max-height: min(70vh, 720px);
      width: auto;
      height: auto;
      object-fit: contain;
      justify-self: center;
      border-radius: var(--radius-lg);
    }

    /* ─── 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; }
  

@font-face {font-family:'ATC Manrope';src:url('atc-extended/manrope-bold.ttf') format('truetype');font-weight:700 900;font-display:swap;}
body[data-atc-page="extended"] {--text:var(--fg);--line:var(--border);--atc-hue:272.538;--orange:var(--accent);--blue:var(--accent);--cyan:var(--accent);--atc-color-a:var(--accent);--atc-color-b:var(--accent);--atc-link-base:var(--accent);--shadow:0 24px 64px color-mix(in oklch,var(--bg) 80%,transparent);}
.container {width:100%;}
.atc-site-header {position:sticky;top:0;z-index:100;border-bottom:1px solid var(--border);font-family:var(--font-body);}
.atc-site-header .brand {display:flex;align-items:center;gap:12px;}
.atc-site-header .brand .atc-brand-name {font-family:var(--font-display);}
.atc-site-header .atc-section-links {gap:0 24px;}
.atc-site-header .btn {border-radius:999px;min-height:44px;}
.btn {justify-content:center;min-height:46px;max-width:100%;text-align:center;}
.btn.primary,.btn-primary {background:var(--accent);color:var(--bg);border-color:var(--accent);box-shadow:inset 0 1px 0 color-mix(in oklch,var(--accent) 60%,var(--fg)),0 8px 24px color-mix(in oklch,var(--accent) 15%,transparent);}
.btn.primary:hover,.btn-primary:hover {background:oklch(from var(--accent) calc(l + .06) c h);color:var(--bg);}
.btn-secondary {background:var(--surface);color:var(--text);border-color:var(--border);box-shadow:inset 0 1px 0 var(--border),0 3px 12px color-mix(in oklch,var(--bg) 45%,transparent);}
.btn-ghost:hover {color:var(--text);text-decoration:underline;text-underline-offset:5px;}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible {outline:2px solid var(--accent);outline-offset:4px;}
a:not(.btn):hover {text-decoration:underline;text-underline-offset:4px;}
.skip {position:absolute;top:8px;left:16px;transform:translateY(-160%);padding:12px;background:var(--fg);color:var(--bg);z-index:200;}
.skip:focus {transform:none;}
.extended-hero {padding-block:72px 80px;}
.extended-hero .hero-split {grid-template-columns:1.02fr .98fr;gap:64px;}
.extended-hero h1 {max-width:15ch;}
.extended-hero .lead {margin-top:24px;max-width:46ch;}
.breadcrumb {font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:30px;}
.breadcrumb a {display:inline-flex;align-items:center;min-height:44px;}
.extended-visual {margin:0;border:1px solid var(--border);border-radius:24px;background:color-mix(in oklch,var(--surface) 96%,var(--fg));padding:32px;min-width:0;display:grid;place-items:center;}
.extended-visual .content-img {max-height:470px;width:auto;height:auto;max-width:100%;border-radius:10px;object-fit:contain;}
.extended-benefits {padding-block:56px;background:var(--surface);}
.extended-benefits h2 {font-size:24px;margin-bottom:32px;}
.extended-benefits .feature {padding-top:20px;border-top:1px solid var(--border);}
.extended-benefits .feature h3 {font-family:var(--font-display);font-size:20px;}
.feature p {font-size:16px;}
.extended-detail .grid-2-1 {grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);gap:64px;}
.extended-detail .section-intro {max-width:760px;margin-bottom:36px;}
.extended-detail .section-intro .meta {display:block;margin-bottom:16px;}
.extended-copy {min-width:0;max-width:76ch;}
.extended-copy p {color:var(--muted);font-size:16px;line-height:1.8;margin:0 0 16px;}
.extended-copy h3 {font-family:var(--font-display);font-size:20px;margin:30px 0 12px;}
.extended-copy h3:first-child {margin-top:0;}
.extended-detail .extended-visual {position:sticky;top:160px;}
.extended-detail .content-img {max-height:420px;}
.extended-cta h2 {max-width:24ch;margin-inline:auto;}
.extended-cta .lead {margin:20px auto 28px;}
.extended-cta {background:var(--surface);}
.extended-footer {border-top:1px solid var(--border);padding-block:44px;color:var(--muted);font-size:13px;}
.extended-footer .row-between {align-items:flex-start;flex-wrap:wrap;gap:24px;}
.extended-footer nav {display:flex;flex-wrap:wrap;gap:8px 24px;}
.extended-footer a {display:inline-flex;align-items:center;min-height:44px;}
.catalogue-head {max-width:850px;}
.catalogue-head h1 {max-width:19ch;}
.catalogue-head .lead {margin:24px 0 0;}
.catalogue-tools {display:flex;gap:20px;align-items:end;flex-wrap:wrap;margin:40px 0 22px;}
.catalogue-tools .field {min-width:220px;flex:1;}
.catalogue-tools label {color:var(--text);}
.catalogue-tools input,.catalogue-tools select {min-height:48px;border:1px solid var(--border);border-radius:12px;background:var(--bg);color:var(--text);font:inherit;padding:12px 14px;width:100%;box-shadow:inset 0 2px 5px color-mix(in oklch,var(--bg) 50%,transparent);}
.catalogue-meta {font-size:14px;color:var(--muted);margin:0 0 32px;}
.catalogue-list .log-row {grid-template-columns:190px minmax(0,1fr) 110px;align-items:center;}
.catalogue-list .log-row h3 {font-family:var(--font-display);font-size:21px;margin:0 0 6px;}
.catalogue-list .log-row p {color:var(--muted);margin:0;max-width:64ch;font-size:15px;}
.catalogue-list .log-row .btn {padding-inline:12px;}
[hidden] {display:none !important;}
.legal-body {max-width:860px;margin:auto;}
.legal-body h2 {font-size:26px;margin:40px 0 18px;}
.legal-body p {color:var(--muted);line-height:1.85;overflow-wrap:anywhere;}
.legal-body a {text-decoration:underline;}
.legal-note {margin-top:24px;padding-block:16px;border-block:1px solid var(--border);font-size:14px;color:var(--muted);}
html[data-atc-theme="light"] body[data-atc-page="extended"] {--fg:var(--text);--border:var(--line);}
html[data-atc-theme="light"] body[data-atc-page="extended"] .btn-primary {color:oklch(.18 .03 272.538);}
@media(max-width:920px){.extended-hero .hero-split,.extended-detail .grid-2-1 {grid-template-columns:minmax(0,1fr);gap:36px;}.extended-hero h1 {max-width:18ch;}.extended-detail .extended-visual {position:static;}.catalogue-list .log-row {grid-template-columns:minmax(0,1fr) 100px;gap:8px 16px;}.catalogue-list .log-row>.meta {grid-column:1/-1;}.extended-visual .content-img {max-height:380px;}}
@media(max-width:600px){:root {--gutter:20px;}.extended-hero {padding-block:34px 52px;}.extended-visual {padding:20px;border-radius:18px;}.atc-site-header .atc-header-row {padding:0;}.extended-hero h1 {font-size:clamp(34px,9vw,46px);}.catalogue-tools .field {min-width:100%;}.catalogue-list .log-row {grid-template-columns:1fr;}.catalogue-list .log-row .pull {text-align:left;}.catalogue-list .log-row .btn {padding-left:0;}.extended-detail .section-intro {margin-bottom:24px;}}
@media(prefers-reduced-motion:reduce){* {scroll-behavior:auto!important;transition:none!important;}}