/* Simpa Labs design system — shared by every page.
   Dark by default via :root; :root.theme-light restores the ivory-paper register.
   Tokens bound to brand-spec.md. */
    /* ─── tokens · bound to brand-spec.md (Atelier Zero / editorial-monocle) ── */
    :root {
      --bg:      oklch(12.5% 0.016 250);  /* deep navy-black ground */
      --surface: oklch(18% 0.02 250);     /* lifted navy panel */
      --fg:      oklch(95% 0.012 90);     /* ivory-ink text */
      --muted:   oklch(70% 0.016 90);     /* warm grey */
      --border:  oklch(28% 0.018 250);    /* hairline */
      --accent:  oklch(56% 0.18 27);      /* signal red (the mark recolored) */
      --on-accent: oklch(97% 0.006 92);   /* text seated on an accent surface */

      --accent-soft: color-mix(in oklch, var(--accent) 22%, transparent);
      --fg-soft:     color-mix(in oklch, var(--fg) 9%, transparent);
      --logo-chip:   oklch(23% 0.03 250);   /* brand navy chip */
      --panel:       oklch(18.5% 0.02 250); /* code terminal / raised dark */
      --panel-ink:   oklch(94% 0.012 90);   /* text on panel */

      --font-display: 'Iowan Old Style', 'Charter', Georgia, 'Times New Roman', serif;
      --font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
      --font-mono:    ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;

      --fs-h1: clamp(46px, 6.4vw, 82px);
      --fs-h2: clamp(34px, 4.2vw, 54px);
      --fs-h3: 22px;
      --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: 1160px;
      --gutter: 32px;

      --radius: 10px;
      --radius-lg: 16px;
    }
    /* light theme (the ivory-paper register), reachable via the toggle */
    :root.theme-light {
      --bg:      oklch(96.5% 0.008 90);   /* ivory paper */
      --surface: oklch(98.5% 0.006 92);   /* lighter paper */
      --fg:      oklch(16% 0.018 250);    /* deep navy-black ink */
      --muted:   oklch(45% 0.014 80);     /* warm grey */
      --border:  oklch(87% 0.010 90);     /* hairline */
      --accent:  oklch(51% 0.20 27);      /* signal red */
      --on-accent: oklch(98.5% 0.006 92); /* text seated on an accent surface */

      --accent-soft: color-mix(in oklch, var(--accent) 14%, transparent);
      --fg-soft:     color-mix(in oklch, var(--fg) 6%, transparent);
      --logo-chip:   oklch(23% 0.032 250);  /* brand navy chip */
      --panel:       oklch(17% 0.018 250);  /* dark terminal on paper */
      --panel-ink:   oklch(97% 0.006 92);   /* text on panel */
    }

    /* ─── 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; }
    html { scroll-behavior: smooth; }
    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
    a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
      outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px;
    }
    .skip-link:not(:focus-visible) { position: fixed; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .skip-link:focus-visible { position: fixed; z-index: 1000; top: 16px; left: 16px; min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px; border: 1px solid color-mix(in oklch, var(--accent) 78%, white); border-radius: 999px; background: var(--accent); color: white; font-family: var(--font-mono); font-size: 13px; font-weight: 650; letter-spacing: .02em; box-shadow: 0 12px 30px rgba(0,0,0,.28); }

    /* ─── layout primitives ─────────────────────────────────────────── */
    .container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
    .section { padding-block: clamp(56px, 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.02; letter-spacing: -0.02em; margin: 0; }
    .h2, h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.018em; 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; }
    .caps { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

    /* ─── brand mark (Simpa Labs "S" recolored to red) ──────────────── */
    .brand { display: inline-flex; align-items: center; gap: 11px; }
    .brand-mark { width: 30px; height: 30px; flex: none; }
    .brand-mark-chip { fill: var(--logo-chip); stroke: color-mix(in oklch, var(--fg) 22%, transparent); stroke-width: 0.7; }
    :root.theme-light .brand-mark-chip { stroke: none; }
    .brand-mark-sweep { stroke: var(--accent); fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
    .brand-mark-dot { fill: var(--accent); }
    .brand-mark-dot-2 { fill: var(--accent); opacity: .45; }
    .brand-word { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
    .brand-group { display: flex; flex-direction: column; line-height: 1.15; }
    .brand-sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; color: var(--muted); margin-top: 2px; }

    /* ─── 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);
      transition: transform .38s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, background .3s ease;
    }
    .topnav.is-hidden { transform: translateY(-105%); }
    .topnav.is-scrolled { background: color-mix(in oklch, var(--bg) 96%, transparent); box-shadow: 0 10px 30px color-mix(in oklch, var(--fg) 9%, transparent); }
    .topnav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-lg); padding-block: 14px; }
    .topnav-actions { display: flex; align-items: center; gap: 12px; }
    .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-nav { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 16px; padding-top: 18px; border-top: 1px solid var(--border); }
    .pagefoot-nav a { font-size: 13px; color: var(--muted); }
    .pagefoot-nav a:hover { color: var(--fg); }
    .pagefoot .row-between { flex-wrap: wrap; gap: var(--gap-md); }

    /* ─── theme toggle ──────────────────────────────────────────────── */
    .theme-toggle {
      display: inline-flex; align-items: center; justify-content: center;
      width: 40px; height: 40px; border-radius: 999px; flex: none;
      border: 1px solid var(--border); background: transparent; color: var(--fg);
      transition: border-color .15s ease, background .15s ease, transform .05s ease;
    }
    .theme-toggle:hover { border-color: var(--fg); }
    .theme-toggle:active { transform: translateY(1px); }
    .theme-toggle svg { width: 18px; height: 18px; }
    .theme-toggle .i-moon { display: none; }
    :root.theme-light .theme-toggle .i-moon { display: block; }
    :root.theme-light .theme-toggle .i-sun { display: none; }

    /* ─── 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, color 0.15s ease;
    }
    .btn:active { transform: translateY(1px); }
    .btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
    .btn-primary:hover { background: color-mix(in oklch, var(--accent) 86%, black); border-color: color-mix(in oklch, var(--accent) 86%, 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); }
    .link-arrow {
      font-family: var(--font-mono); font-size: 13px; letter-spacing: .01em;
      color: var(--fg); display: inline-flex; align-items: center; gap: 6px;
    }
    .link-arrow::after { content: '→'; transition: transform .15s ease; }
    .link-arrow:hover { color: var(--accent); }
    .link-arrow:hover::after { transform: translateX(2px); }

    .intent-links { display:flex; flex-wrap:wrap; gap:12px 22px; padding-top:18px; padding-bottom:24px; font-size:13px; }
    .intent-links a { color:var(--muted); text-decoration:underline; text-decoration-color:transparent; text-underline-offset:4px; }
    .intent-links a:hover, .intent-links a:focus-visible { color:var(--fg); text-decoration-color:var(--accent); }

    .error-page { min-height:calc(100svh - 110px); display:grid; align-items:center; padding-block:clamp(56px,10vw,120px); }
    .error-layout { display:grid; grid-template-columns:minmax(180px,.65fr) minmax(0,1fr); gap:clamp(36px,8vw,120px); align-items:center; }
    .error-code { margin:0; color:var(--accent); font-family:var(--font-mono); font-size:clamp(96px,18vw,250px); font-weight:700; line-height:.75; letter-spacing:-.08em; font-variant-numeric:tabular-nums; }
    .error-copy h1 { max-width:12ch; margin:10px 0 20px; text-wrap:balance; }
    .error-copy .lead { max-width:54ch; margin-bottom:28px; }
    .error-help { max-width:62ch; margin-top:34px; padding-top:22px; border-top:1px solid var(--border); color:var(--muted); }
    .error-help a { color:var(--fg); text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:4px; }
    @media (max-width:720px) { .error-layout { grid-template-columns:1fr; gap:32px; } .error-code { font-size:clamp(88px,34vw,150px); } }

    .contact-modal { width:min(620px,calc(100% - 28px)); max-height:min(760px,calc(100svh - 28px)); padding:0; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); color:var(--fg); box-shadow:0 30px 100px rgba(0,0,0,.55); }
    .contact-modal::backdrop { background:rgba(2,5,8,.78); backdrop-filter:blur(8px); }
    .contact-modal-panel { position:relative; padding:clamp(24px,5vw,44px); }
    .contact-modal-close { position:absolute; top:14px; right:14px; display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--border); border-radius:50%; background:transparent; color:var(--fg); font-size:28px; line-height:1; cursor:pointer; }
    .contact-modal-close:hover, .contact-modal-close:focus-visible { border-color:var(--accent); color:var(--accent); }
    .contact-modal h2 { margin:8px 52px 10px 0; font-size:clamp(34px,6vw,52px); }
    .contact-modal-lead { max-width:48ch; margin:0 0 26px; color:var(--muted); font-size:16px; line-height:1.6; }
    .contact-options { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .contact-option { min-height:88px; display:flex; flex-direction:column; justify-content:center; padding:18px 20px; border:1px solid var(--border); border-radius:var(--radius); color:var(--fg); }
    .contact-option:hover, .contact-option:focus-visible { border-color:var(--fg); transform:translateY(-1px); }
    .contact-option-primary { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
    .contact-option-primary:hover, .contact-option-primary:focus-visible { border-color:var(--on-accent); }
    .contact-option span { font-size:18px; font-weight:650; }
    .contact-option-heading { display:flex; align-items:center; gap:10px; }
    .contact-option-heading svg { width:22px; height:22px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
    .contact-option small { margin-top:5px; color:inherit; opacity:.72; font-size:13px; }
    .contact-divider { display:flex; align-items:center; gap:12px; margin:22px 0; color:var(--muted); font-family:var(--font-mono); font-size:12px; text-transform:uppercase; }
    .contact-divider::before, .contact-divider::after { content:""; height:1px; flex:1; background:var(--border); }
    .callback-form label { display:block; margin-bottom:9px; font-size:14px; color:var(--fg); }
    .callback-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; }
    .callback-row input { min-width:0; width:100%; min-height:48px; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg); color:var(--fg); font:inherit; font-size:16px; }
    .callback-row input:focus { outline:2px solid var(--accent-soft); border-color:var(--accent); }
    .callback-row button { min-height:48px; }
    .callback-row button[disabled] { opacity:.65; cursor:wait; }
    .callback-status { min-height:22px; margin:8px 0 0; color:var(--muted); font-size:13px; }
    .callback-status.is-error { color:#ff7063; }
    .contact-start-card { text-align:center; }
    .contact-start-card p { max-width:48ch; margin:10px auto 22px; color:var(--muted); }
    @media (max-width:560px) { .contact-modal { max-height:calc(100svh - 16px); } .contact-modal-panel { padding:24px 18px; } .contact-options, .callback-row { grid-template-columns:1fr; } .contact-option { min-height:72px; } .callback-row button { width:100%; justify-content:center; } }

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

    /* ─── hero ──────────────────────────────────────────────────────── */
    .hero { padding-block: clamp(56px, 9vw, 120px); }
    .hero-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--gap-2xl); align-items: center; }
    .hero-split h1 { max-width:17ch; font-size:clamp(46px,5vw,68px); text-wrap:balance; }
    @media (max-width: 920px) { .hero-split { grid-template-columns: 1fr; gap: var(--gap-xl); } }
    .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-note { margin-top: var(--gap-lg); padding-top: var(--gap-md); border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: var(--gap-md); }
    .hero-assurance { max-width:62ch; margin:16px 0 0; color:var(--muted); font-size:14px; line-height:1.65; }
    .hero-assurance strong { color:var(--fg); font-weight:650; }

    /* ─── collage plate (the decisive editorial image) ──────────────── */
    .collage {
      position: relative; aspect-ratio: 4 / 5;
      border: 1px solid var(--border); border-radius: var(--radius-lg);
      overflow: hidden; background: var(--surface);
    }
    .collage-grid { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border); }
    .collage-plate { position: absolute; background: var(--accent); }
    .collage-ink { position: absolute; background: color-mix(in oklch, var(--fg) 24%, var(--surface)); }
    .collage-figure { position: absolute; inset: 0; display: grid; place-items: center; }
    .collage-art { width: 72%; height: auto; }
    .ca-ink { stroke: var(--fg); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
    .ca-soft { stroke: var(--muted); stroke-width: 1.2; fill: none; stroke-linecap: round; }
    .ca-accent { stroke: var(--accent); stroke-width: 2; fill: none; stroke-linecap: round; }
    .ca-dotted { stroke-dasharray: 2 5; }
    .ca-txt { fill: var(--fg); font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 10px; letter-spacing: .02em; }
    .ca-txt-l { fill: var(--fg); font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
    .ca-mut { fill: var(--muted); font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 9px; letter-spacing: .04em; text-transform: uppercase; }
    .collage-glyph {
      position: absolute; font-family: var(--font-display); font-weight: 600;
      color: var(--fg); opacity: .07; line-height: .78; letter-spacing: -.04em;
      user-select: none; pointer-events: none;
    }
    .collage-cap {
      position: absolute; left: 12px; right: auto; bottom: 12px; max-width: 70%;
      font-family: var(--font-mono); font-size: 11px; letter-spacing: .03em; color: var(--fg);
      background: color-mix(in oklch, var(--surface) 82%, transparent);
      backdrop-filter: blur(8px);
      padding: 6px 11px; border-radius: 7px; border: 1px solid var(--border);
      box-shadow: 0 10px 26px color-mix(in oklch, var(--fg) 14%, transparent);
    }

    /* ─── process steps ─────────────────────────────────────────────── */
    .process-step { display: grid; grid-template-columns: 64px 1fr; gap: var(--gap-lg); padding: 26px 0; border-top: 1px solid var(--border); align-items: start; }
    .process-step:first-child { border-top: 0; padding-top: 0; }
    .process-num { font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em; color: var(--fg); }
    .process-step h3 { margin-bottom: 6px; }
    .process-step p { margin: 0; color: var(--muted); font-size: 15px; max-width: 56ch; }
    @media (max-width: 640px) { .process-step { grid-template-columns: 1fr; gap: 8px; } }

    /* ─── facet labels ──────────────────────────────────────────────── */
    .facet { border-top: 1px solid var(--border); padding-top: 14px; }
    .facet .facet-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--fg); }
    .facet p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }

    /* ─── deliverable cells ─────────────────────────────────────────── */
    .deliverable { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; background: transparent; }
    .deliverable .d-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
    .deliverable .d-tag::before { content: ''; width: 16px; height: 2px; background: var(--accent); }
    .deliverable h3 { margin: 12px 0 6px; }
    .deliverable p { margin: 0; color: var(--muted); font-size: 14px; }
    .deliverable--plate { background: var(--accent); border-color: var(--accent); }
    .deliverable--plate .d-tag { color: color-mix(in oklch, var(--on-accent) 80%, transparent); }
    .deliverable--plate .d-tag::before { background: var(--on-accent); }
    .deliverable--plate h3 { color: var(--on-accent); }
    .deliverable--plate p { color: color-mix(in oklch, var(--on-accent) 84%, transparent); }

    /* ─── code sample (terminal plate) ──────────────────────────────── */
    .code-snip { background: var(--panel); color: var(--panel-ink); border-radius: var(--radius-lg); overflow: hidden; }
    .code-snip-head { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid color-mix(in oklch, var(--panel-ink) 18%, transparent); }
    .code-snip-head .dot { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in oklch, var(--panel-ink) 40%, transparent); }
    .code-snip-head .fname { font-family: var(--font-mono); font-size: 12px; color: color-mix(in oklch, var(--panel-ink) 78%, transparent); }
    .code-snip pre { margin: 0; padding: 22px 24px; font-family: var(--font-mono); font-size: 13px; line-height: 1.75; overflow-x: auto; white-space: pre; }
    .code-snip .tok-accent { color: color-mix(in oklch, var(--accent) 70%, var(--panel-ink)); }
    .code-snip .tok-dim { color: color-mix(in oklch, var(--panel-ink) 55%, transparent); }

    /* ─── research: featured + article rows ─────────────────────────── */
    .featured {
      border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
      padding: clamp(28px, 5vw, 48px);
      display: grid; grid-template-columns: 1fr auto; gap: var(--gap-xl); align-items: center;
    }
    @media (max-width: 920px) { .featured { grid-template-columns: 1fr; gap: var(--gap-md); } }
    .featured .f-tag { display: inline-flex; align-items: center; padding: 5px 11px; background: var(--accent-soft); color: var(--accent); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 18px; }
    .featured h3 { font-family: var(--font-display); font-size: clamp(26px, 3.2vw, 40px); font-weight: 600; letter-spacing: -.015em; line-height: 1.12; }
    .featured p { margin: 14px 0 0; color: var(--muted); font-size: 16px; max-width: 52ch; }
    .featured .f-cta { margin-top: 24px; }

    .group-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; display: flex; align-items: center; gap: 10px; }
    .group-eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--accent); }

    .article-row { display: grid; grid-template-columns: 150px 1fr auto; gap: var(--gap-lg); padding: 22px 0; border-top: 1px solid var(--border); align-items: baseline; }
    .article-row .cat { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
    .article-row h3 { font-size: 18px; font-weight: 600; letter-spacing: -.005em; }
    .article-row h3 a:hover { color: var(--accent); }
    .article-row p { margin: 5px 0 0; color: var(--muted); font-size: 14px; max-width: 56ch; }
    .article-row .cta { align-self: center; }
    @media (max-width: 920px) {
      .article-row { grid-template-columns: 1fr; gap: 6px; }
      .article-row .cta { align-self: start; margin-top: 8px; }
    }

    /* ─── CTA strip ─────────────────────────────────────────────────── */
    .cta-strip { text-align: center; }
    .cta-strip .h2 { max-width: 22ch; margin-inline: auto; }
    .cta-strip .lead { margin: 16px auto 32px; }

    /* ─── reveal + headroom state ───────────────────────────────────── */
    html.js [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .7s cubic-bezier(.16,1,.3,1); }
    html.js [data-reveal].is-in { opacity: 1; transform: none; }
    @media (prefers-reduced-motion: reduce) {
      html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
    }
    .rule { border: 0; border-top: 1px solid var(--border); margin: 0; }
    .rule-accent { border: 0; border-top: 1px solid var(--accent); margin: 0; }

    /* ─── SReverse: capability matrix ───────────────────────────────── */
    .matrix { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); border-top: 1px solid var(--border); border-left: 1px solid var(--border); margin: 0; }
    .matrix .cell { padding: 13px 16px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .02em; color: var(--fg); }
    .matrix .cell.dim { color: var(--muted); }

    /* ─── SReverse: before/after outcome ────────────────────────────── */
    .outcome { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-xl); align-items: stretch; }
    .outcome > * { min-width: 0; }
    .outcome .panel { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; }
    .outcome pre { max-width: 100%; overflow-x: auto; }

    .contact-dock { position: fixed; z-index: 30; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); display: flex; align-items: stretch; border: 1px solid var(--border); background: var(--bg); box-shadow: 0 12px 34px color-mix(in oklch, var(--bg) 75%, transparent); }
    .contact-dock a { min-height: 48px; display: inline-flex; align-items: center; gap:9px; padding: 10px 15px; font-size: 14px; font-weight: 650; }
    .contact-dock svg { width:20px; height:20px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
    .contact-dock a:first-child { background: var(--accent); color: var(--on-accent); }
    .contact-dock a + a { border-left: 1px solid var(--border); }
    .contact-dock a:hover, .contact-dock a:focus-visible { filter: brightness(1.12); }

    .depth-section { border-top: 1px solid var(--border); }
    .depth-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .4fr); gap: clamp(32px, 6vw, 78px); align-items: start; }
    .depth-copy { min-width: 0; }
    .comparison-scroll { width: 100%; max-width: 100%; margin: 24px 0 38px; overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--line); border-radius: 12px; }
    .comparison-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
    .service-comparison { width: 100%; min-width: 720px; border-collapse: collapse; text-align: left; }
    .service-comparison th, .service-comparison td { padding: 18px 20px; border-bottom: 1px solid var(--line); vertical-align: top; }
    .service-comparison thead th { color: var(--muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
    .service-comparison tbody th { width: 24%; color: var(--fg); }
    .service-comparison tbody td { color: var(--muted); }
    .service-comparison tr:last-child th, .service-comparison tr:last-child td { border-bottom: 0; }
    .service-comparison .comparison-primary { background: color-mix(in srgb, var(--accent) 8%, transparent); }
    .service-comparison .comparison-primary th { color: var(--accent); }
    .depth-copy { max-width: 72ch; }
    .depth-copy h2 { margin-top: 48px; font-size: clamp(28px, 3.4vw, 42px); }
    .depth-copy h2:first-child { margin-top: 0; }
    .depth-copy h3 { margin-top: 30px; font-size: 20px; }
    .depth-copy p, .depth-copy li { color: var(--muted); font-size: 17px; line-height: 1.72; }
    .depth-copy p { margin: 14px 0 0; }
    .depth-copy ul, .depth-copy ol { margin: 16px 0 0; padding-left: 22px; }
    .depth-copy li + li { margin-top: 9px; }
    .depth-copy code { font-family: var(--font-mono); font-size: .9em; color: var(--fg); overflow-wrap: anywhere; }
    .depth-copy a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
    .depth-aside { position: sticky; top: 104px; border-top: 3px solid var(--accent); padding-top: 18px; }
    .depth-aside h2 { font-family: var(--font-body); font-size: 20px; letter-spacing: 0; }
    .depth-aside p { color: var(--muted); font-size: 15px; line-height: 1.65; }
    .depth-aside .btn { width: 100%; justify-content: center; margin-top: 12px; }
    .source-list { border-top: 1px solid var(--border); margin-top: 46px; padding-top: 20px; }
    .source-list h2 { font-family: var(--font-body); font-size: 18px; letter-spacing: 0; margin-top: 0; }
    .source-list li { font-size: 14px; }
    .page-updated { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-top: 28px; }

    @media (max-width: 760px) {
      :root { --gutter: 24px; }
      .depth-grid { grid-template-columns: 1fr; }
      .depth-aside { position: static; }
      .contact-dock { left: auto; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); max-width: calc(100vw - 24px); }
      .contact-dock a { flex: 0 1 auto; justify-content: center; padding-inline: 12px; font-size: 13px; }
      .contact-dock svg { width: 18px; height: 18px; }
      .pagefoot { padding-bottom: 86px; }
    }
    @media (max-width: 560px) {
      :root { --fs-h1: 38px; --fs-lead: 17px; }
      .hero-split h1 { font-size:38px; }
      .hero { padding-block: 44px 72px; }
      .topnav-actions > .btn { display: none; }
      .hero-note { gap: 12px 18px; }
    }
    .outcome .after { background: var(--panel); border-color: color-mix(in oklch, var(--border) 60%, var(--panel)); }
    .outcome .label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
    .outcome .after .label { color: color-mix(in oklch, var(--panel-ink) 70%, transparent); }
    .outcome .stepsbare { list-style: none; margin: 0; padding: 0; }
    .outcome .stepsbare li { padding: 9px 0; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 15px; }
    .outcome .stepsbare li:last-child { border-bottom: 0; }
    .outcome .after code { font-family: var(--font-mono); font-size: 16px; color: var(--panel-ink); }

    /* ─── SReverse: protected systems + tech lists ──────────────────── */
    .systems-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .prot-tag { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 2px; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
    .prot-tag-link { justify-content: space-between; color: var(--fg); text-decoration: none; }
    .prot-tag-link::after { content: '→'; margin-left: 12px; color: var(--accent); }
    .prot-tag-link:hover, .prot-tag-link:focus-visible { color: var(--accent); border-bottom-color: var(--accent); }
    .mat-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 28px; }
    .mat-list li { font-family: var(--font-mono); font-size: 13px; color: var(--muted); padding: 8px 0; border-bottom: 1px solid var(--border); }
    @media (max-width: 640px) { .systems-grid { grid-template-columns: 1fr; } .mat-list { grid-template-columns: 1fr; } .outcome { grid-template-columns: 1fr; } }

    /* ─── SReverse: figure annotation ───────────────────────────────── */
    .figure-note { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: .03em; color: var(--muted); }
    .figure-note::before { content: ''; width: 26px; height: 1px; background: var(--accent); }
    .kbd { font-family: var(--font-mono); font-size: 12px; background: var(--fg-soft); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--border); }

    /* ─── SReverse: article / research-prose components ───────────── */
    .prose { max-width: 66ch; }
    .prose > * + * { margin-top: 22px; }
    .prose h2 { font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; letter-spacing: -0.015em; margin: 0; margin-top: 52px; }
    .prose h3 { font-size: 20px; margin: 0; }
    .prose p, .prose li { color: var(--muted); font-size: 17px; line-height: 1.72; margin: 0; }
    .prose p strong { color: var(--fg); font-weight: 600; }
    .prose code { font-family: var(--font-mono); font-size: 0.88em; background: var(--fg-soft); padding: 2px 6px; border-radius: 4px; }
    .prose .lead { font-size: 19px; }
    .prose blockquote { border-left: 2px solid var(--accent); padding-left: 20px; margin: 0; }
    .article-hero { padding-block: clamp(56px, 9vw, 128px) clamp(32px, 6vw, 64px); }
    .article-hero .eyebrow { margin-bottom: 20px; }
    .article-hero h1 { font-size: clamp(40px, 5.6vw, 72px); max-width: 20ch; }
    .article-hero .lead { margin-top: 24px; max-width: 58ch; }
    .figure-label { display: flex; align-items: center; gap: 10px; margin: 26px 0 10px; }
    .figure-label::before { content: ''; width: 20px; height: 1px; background: var(--accent); }
    .figure-label .caps { color: var(--muted); }
    .takeaway { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-lg); padding: 26px 30px; margin: 40px 0; }
    .takeaway .caps { color: var(--fg); }
    .takeaway p { font-family: var(--font-display); font-size: clamp(20px, 2vw, 26px); line-height: 1.35; color: var(--fg); margin: 10px 0 0; letter-spacing: -0.01em; }

    /* ─── SReverse: nav dropdown + mobile menu ──────────────────────── */
    .navitem { position: relative; }
    .navitem > a { display: inline-flex; align-items: center; gap: 5px; }
    .navitem .caret { width: 9px; height: 9px; opacity: .6; }
    .navpanel { position: absolute; top: 100%; left: -14px; margin-top: 12px; min-width: 250px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 10px; box-shadow: 0 18px 48px color-mix(in oklch, var(--fg) 14%, transparent); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease, visibility .16s; }
    .navitem:hover .navpanel, .navitem:focus-within .navpanel { opacity: 1; visibility: visible; transform: none; }
    .navpanel a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 14px; color: var(--muted); }
    .navpanel a:hover { background: var(--fg-soft); color: var(--fg); }
    .navpanel .np-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 8px 12px 4px; }
    .menu-toggle { display: none; }
    .menu-bar { display: none; }
    @media (max-width: 920px) {
      .menu-toggle { display: inline-flex; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--fg); align-items: center; justify-content: center; }
      .topnav nav, .topnav .navitem { display: none; }
      .topnav.menu-open nav { display: flex; flex-direction: column; gap: 2px; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg); border-top: 1px solid var(--border); padding: 14px var(--gutter) 22px; }
      .topnav.menu-open nav a { padding: 9px 0; font-size: 15px; color: var(--fg); }
      .navpanel { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: transparent; border: 0; padding: 0; margin: 2px 0 6px 12px; }
      .navpanel a { padding: 7px 10px; font-size: 14px; }
      .topnav.menu-open .navitem { display: block; }
    }

    .delivery-promise { border-top: 1px solid var(--border); }
    .delivery-promise-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--border); border-left:1px solid var(--border); margin-top:24px; }
    .delivery-promise-grid > div { padding:24px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); }
    .delivery-promise-grid h3 { margin:0 0 8px; font-size:18px; }
    .delivery-promise-grid p { margin:0; color:var(--muted); line-height:1.65; }
    .related-buyer-guides { padding-top:0; }
    .related-buyer-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--border); margin-top:20px; }
    .related-buyer-links a { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px 0; border-bottom:1px solid var(--border); color:var(--fg); }
    .related-buyer-links a span { color:var(--accent); transition:transform .16s ease; }
    .related-buyer-links a:hover span, .related-buyer-links a:focus-visible span { transform:translateX(3px); }

    .breadcrumbs { padding-top:22px; padding-bottom:0; }
    .breadcrumbs ol { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:0; padding:0; list-style:none; font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
    .breadcrumbs li { display:flex; align-items:center; gap:7px; min-width:0; }
    .breadcrumbs li + li::before { content:'/' ; color:var(--border-strong); }
    .breadcrumbs a { color:var(--muted); text-decoration:underline; text-decoration-color:transparent; text-underline-offset:4px; }
    .breadcrumbs a:hover, .breadcrumbs a:focus-visible { color:var(--fg); text-decoration-color:var(--accent); }
    .breadcrumbs [aria-current="page"] { color:var(--fg); }

    .buyer-faq { border-top:1px solid var(--border); }
    .faq-layout { display:grid; grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr); gap:clamp(36px,7vw,96px); align-items:start; }
    .faq-layout h2 { max-width:13ch; }
    .faq-intro { max-width:36ch; margin-top:16px; color:var(--muted); line-height:1.65; }
    .faq-list { border-top:1px solid var(--border); }
    .faq-list details { border-bottom:1px solid var(--border); }
    .faq-list summary { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:17px 2px; color:var(--fg); font-size:17px; font-weight:650; cursor:pointer; list-style:none; }
    .faq-list summary::-webkit-details-marker { display:none; }
    .faq-list summary::after { content:'+'; flex:0 0 auto; color:var(--accent); font-family:var(--font-mono); font-size:22px; font-weight:400; }
    .faq-list details[open] summary::after { content:'−'; }
    .faq-list details p { max-width:62ch; margin:0; padding:0 42px 20px 2px; color:var(--muted); line-height:1.7; }
    @media (max-width:700px) { .delivery-promise-grid, .related-buyer-links, .faq-layout { grid-template-columns:1fr; } .breadcrumbs { padding-top:16px; } }

    .locale-nav { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:5px 12px; }
    .locale-nav a, .pagefoot nav[aria-label="Language"] a { min-height:24px; display:inline-flex; align-items:center; color:var(--muted); font-size:12px; }
    .locale-nav a[aria-current="page"], .pagefoot nav[aria-label="Language"] a[aria-current="page"] { color:var(--fg); text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:4px; }
    .language-footer { padding-top:20px; }
    .language-footer nav { display:flex; flex-wrap:wrap; gap:8px 18px; }
    .localized-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:28px; border-top:1px solid var(--border); border-left:1px solid var(--border); }
    .localized-steps > div { padding:24px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); }
    .localized-steps h3 { margin:0 0 10px; font-size:18px; }
    .localized-steps p, .card-min p { margin:0; color:var(--muted); line-height:1.7; }
    html[dir="rtl"] body { text-align:right; }
    html[dir="rtl"] .hero-cta, html[dir="rtl"] .row-between, html[dir="rtl"] .topnav-inner { flex-direction:row-reverse; }
    html[dir="rtl"] .breadcrumbs ol { flex-direction:row-reverse; justify-content:flex-end; }
    html[dir="rtl"] .breadcrumbs li + li::before { content:'\\'; }
    @media (max-width:920px) { .locale-nav { display:none; } .localized-steps { grid-template-columns:1fr; } }