:root {
      --ink-950: #08101f;
      --ink-900: #0b1426;
      --ink-800: #14213a;
      --ink-700: #273550;
      --ink-600: #46546c;
      --ink-500: #667187;
      --line: #d8deea;
      --line-strong: #b9c3d4;
      --paper: #ffffff;
      --paper-soft: #f4f7fb;
      --paper-blue: #eef4ff;
      --blue: #2463eb;
      --blue-deep: #1747b0;
      --cyan: #29c3d2;
      --green: #13875b;
      --amber: #a86108;
      --purple: #7253d6;
      --radius-sm: 6px;
      --radius-md: 10px;
      --radius-lg: 14px;
      /* --radius-blob is blog only, and deliberately so — not drift. The notes
         are a reading surface, the product pages are a selling surface, and they
         are meant to feel different: 28px radii belong to /blog/ alone, and
         everything outside src/blog/ stays on --radius-lg. The tint steps
         below started blog-only and are now shared, because every page carries a
         diagram drawn in the same vocabulary. */
      --radius-blob: 28px;
      --pill: 999px;
      --blue-100: #eff5fe;
      --blue-200: #dbe8fd;
      --blue-400: #7ba6f6;
      --blue-800: #143a8c;
      --blue-900: #0e2a66;
      --cyan-100: #e9fbfd;
      --cyan-200: #cdf1f6;
      --cyan-400: #6ad6e2;
      --cyan-700: #146f7c;
      --line-soft: #e7edf7;
      --shadow: 0 18px 44px rgba(8, 16, 31, .09);
      --max: 1180px;
      /* one gutter for every full-bleed wrapper: header, section, CTA band,
         footer. Shorthand paddings used to set these independently, so on a
         phone four different left edges stacked down the page. */
      --gutter: 24px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 84px; }
    body {
      margin: 0;
      color: var(--ink-900);
      background: var(--paper);
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 17px;
      line-height: 1.62;
      -webkit-font-smoothing: antialiased;
    }
    body.menu-open { overflow: hidden; }
    a { color: inherit; }
    button, input, select, textarea { font: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    img { max-width: 100%; }
    section { padding: 78px var(--gutter); }
    .container { width: min(100%, var(--max)); margin-inline: auto; }
    .narrow { width: min(100%, 820px); }
    .skip-link {
      position: fixed; left: 16px; top: -80px; z-index: 999;
      padding: 10px 14px; color: white; background: var(--blue); border-radius: var(--radius-sm);
    }
    .skip-link:focus { top: 12px; }
    /* Blue, not cyan: cyan is 2.14:1 on paper and 1.99:1 on paper-soft, under the
       3:1 that WCAG 1.4.11 wants from a focus indicator. Blue is 5.17:1. */
    :focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
    /* The dark grounds keep cyan, where it measures 8.61:1 and blue would not. */
    .site-footer :focus-visible,
    .blog-cta:focus-visible, .blog-cta :focus-visible,
    .model-section :focus-visible, .founder-card :focus-visible { outline-color: var(--cyan); }

    h1, h2, h3, p { margin-top: 0; }
    h1, h2, h3 { color: var(--ink-950); line-height: 1.14; letter-spacing: -.018em; text-wrap: balance; }
    h1 { max-width: 21ch; margin-bottom: 22px; font-size: clamp(2.15rem, 3.7vw, 3.05rem); font-weight: 680; }
    h2 { max-width: 22ch; margin-bottom: 18px; font-size: clamp(1.6rem, 2.3vw, 2.05rem); font-weight: 680; }
    h3 { margin-bottom: 10px; font-size: 1.2rem; font-weight: 700; letter-spacing: -.012em; }
    p { margin-bottom: 18px; }
    .lede { max-width: 62ch; color: var(--ink-600); font-size: clamp(1.02rem, 1.2vw, 1.12rem); line-height: 1.6; }
    /* The kicker used to be a 12.5px all-caps tag floating on a rule, two steps
       and a horizontal line away from the heading it belonged to. It now sits in
       the heading's own block: sentence case, close above, no dash. */
    .eyebrow {
      display: block; margin-bottom: 10px;
      color: var(--ink-500); font-size: .92rem; line-height: 1.3; font-weight: 600;
      letter-spacing: 0; text-transform: none;
    }
    .section-head { display: grid; grid-template-columns: 1fr .8fr; gap: 48px; align-items: end; margin-bottom: 40px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
    .section-head p { max-width: 52ch; margin: 0; color: var(--ink-600); font-size: 1rem; line-height: 1.55; }
    /* A head with no support paragraph spans the full width — otherwise the
       heading sits in the 1fr column with an empty .8fr beside it. */
    .section-head:has(> *:only-child) { grid-template-columns: 1fr; }

    .site-header {
      position: sticky; top: 0; z-index: 100; height: 76px;
      border-bottom: 1px solid rgba(216, 222, 234, .8);
      background: rgba(255, 255, 255, .92); backdrop-filter: blur(18px);
      padding-inline: var(--gutter);
    }
    .header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; }
    .brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font-size: 1.12rem; font-weight: 780; letter-spacing: -.03em; }
    .brand-mark { width: 28px; height: 28px; flex-shrink: 0; color: currentColor; }
    .nav-list { display: flex; align-items: center; gap: 30px; margin: 0; padding: 0; list-style: none; }
    .nav-list a { color: var(--ink-700); text-decoration: none; font-size: .92rem; font-weight: 600; }
    .nav-list a:hover { color: var(--blue); }
    .nav-toggle { display: none; border: 0; background: transparent; padding: 8px; color: var(--ink-900); }
    .nav-toggle span { display: block; width: 24px; height: 2px; margin: 5px 0; background: currentColor; transition: .2s ease; }
    .header-cta, .button {
      display: inline-flex; align-items: center; justify-content: center; gap: 9px;
      min-height: 44px; padding: 0 18px; border: 1px solid transparent; border-radius: 8px;
      text-decoration: none; font-size: .9rem; font-weight: 650; cursor: pointer; transition: .18s ease;
    }
    .header-cta, .button-primary { color: white !important; background: var(--blue); }
    .header-cta:hover, .button-primary:hover { background: var(--blue-deep); }
    .button-secondary { color: var(--ink-900); border-color: var(--line-strong); background: white; }
    .button-secondary:hover { border-color: var(--blue); color: var(--blue); }

    .hero {
      position: relative; overflow: hidden; padding-top: 74px; padding-bottom: 78px;
      background:
        linear-gradient(90deg, rgba(255,255,255,.98) 0 48%, rgba(255,255,255,.75) 64%, rgba(255,255,255,.3) 100%),
        radial-gradient(circle at 86% 18%, rgba(41,195,210,.17), transparent 28%),
        linear-gradient(135deg, #eef4ff, #fff 58%);
    }
    .hero::after {
      content: ""; position: absolute; inset: auto 0 0; height: 1px;
      background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
    }
    .hero-grid { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; gap: 68px; align-items: center; }
    .hero .lede { max-width: 680px; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
    .hero-note { margin-top: 26px; color: var(--ink-500); font-size: .86rem; }
    .trust-row { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 42px; }
    .trust-item { padding-right: 22px; border-right: 1px solid var(--line); }
    .trust-item:last-child { padding-right: 0; border: 0; }
    .trust-item strong { display: block; color: var(--ink-950); font-size: 1.05rem; line-height: 1.25; }
    .trust-item span { color: var(--ink-500); font-size: .78rem; }

    .system-window {
      position: relative; overflow: hidden; border: 1px solid #23344f; border-radius: var(--radius-lg);
      color: #dce8ff; background: var(--ink-900); box-shadow: var(--shadow);
    }
    .system-window::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 90% 0, rgba(41,195,210,.17), transparent 36%); }
    .window-bar { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid #273650; font-size: .76rem; color: #8fa2c1; }
    .window-dots { display: flex; gap: 6px; }
    .window-dots i { width: 7px; height: 7px; border-radius: 50%; background: #455572; }
    .system-body { position: relative; padding: 26px; }
    .system-title { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
    .system-title strong { color: white; font-size: .95rem; }
    .live-pill { padding: 4px 8px; border: 1px solid rgba(41,195,210,.4); border-radius: 20px; color: #7ee8ef; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
    .flow { display: grid; gap: 10px; }
    .flow-row { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: center; padding: 13px 14px; border: 1px solid #2a3b58; border-radius: 10px; background: rgba(21, 34, 57, .82); }
    .flow-index { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #9dc1ff; background: #1b3158; font-size: .78rem; font-weight: 700; }
    .flow-copy strong { display: block; color: #f6f9ff; font-size: .84rem; line-height: 1.2; }
    .flow-copy span { color: #8fa2c1; font-size: .78rem; }
    .flow-state { color: #73e7bd; font-size: .74rem; font-weight: 700; }
    .review-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; padding-top: 18px; border-top: 1px solid #273650; color: #9fb0ca; font-size: .74rem; }
    .confidence { display: flex; align-items: center; gap: 8px; }
    .confidence::before { content: ""; width: 46px; height: 5px; border-radius: 8px; background: linear-gradient(90deg, var(--cyan) 82%, #34445e 82%); }

    .proof-band { padding: 0 var(--gutter); background: var(--paper); border-block: 1px solid var(--line); }
    .proof-inner { display: grid; grid-template-columns: repeat(3, 1fr); }
    .proof-cell { padding: 30px 34px; border-left: 1px solid var(--line); }
    .proof-cell:first-child { padding-left: 0; border-left: 0; }
    .proof-cell strong { display: block; margin-bottom: 5px; color: var(--ink-950); font-size: 1.22rem; line-height: 1.3; letter-spacing: -.015em; }
    .proof-cell span { color: var(--ink-500); font-size: .92rem; }

    .products { background: var(--paper); }
    .product-feature { display: grid; grid-template-columns: 1.05fr .95fr; margin-bottom: 22px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper-soft); }
    .product-copy { padding: 40px 40px 44px; }
    .status { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 20px; color: var(--green); font-size: .76rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
    .status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
    .status.progress { color: var(--blue-deep); }
    .status.labs { color: var(--ink-600); }
    .product-copy h3 { font-size: 1.5rem; }
    .product-copy p { max-width: 560px; color: var(--ink-600); }
    .product-points { display: grid; gap: 9px; margin: 22px 0 26px; padding: 0; list-style: none; }
    .product-points li { display: flex; gap: 10px; color: var(--ink-700); font-size: .92rem; }
    .product-points li::before { content: "✓"; color: var(--green); font-weight: 800; }

    .product-visual { min-height: 380px; display: flex; align-items: center; padding: 34px; background: var(--paper-blue); }
    .research-ui { width: 100%; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: white; box-shadow: var(--shadow); }
    .research-top { display: flex; justify-content: space-between; gap: 16px; padding: 15px 17px; border-bottom: 1px solid var(--line); font-size: .74rem; font-weight: 700; }
    .not-live { color: var(--amber); }
    .research-content { padding: 19px; }
    .research-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 16px; }
    .research-summary div { padding: 11px; border-radius: 8px; background: var(--paper-soft); }
    .research-summary span { display: block; color: var(--ink-500); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
    .research-summary strong { display: block; margin-top: 2px; font-size: .84rem; }
    .mini-table { width: 100%; border-collapse: collapse; font-size: .76rem; }
    .mini-table th { color: var(--ink-500); font-weight: 650; text-align: left; }
    .mini-table th, .mini-table td { padding: 9px 7px; border-bottom: 1px solid var(--line); }
    .mini-table tr:last-child td { border: 0; }
    .bar { width: 60px; height: 5px; border-radius: 10px; background: var(--line); }
    .bar i { display: block; height: 100%; border-radius: inherit; background: var(--blue); }
    .provenance { padding: 10px 18px; border-top: 1px solid var(--line); color: var(--ink-500); font-size: .72rem; }

    .product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
    .product-card { position: relative; display: flex; flex-direction: column; min-height: 250px; padding: 32px; border: 1px solid var(--line); border-radius: var(--radius-md); background: white; }
    .product-card::after { content: "↗"; position: absolute; top: 28px; right: 28px; color: var(--ink-500); font-size: 1rem; }
    .product-card h3 { font-size: 1.3rem; }
    .product-card p { color: var(--ink-600); }
    .product-card .product-points { margin: 20px 0 0; }
    .product-card .product-meta { margin-top: 22px; }
    .product-card .text-link { align-self: start; margin-top: auto; padding-top: 20px; }
    .product-card .tag { display: inline-block; margin-bottom: 24px; padding: 5px 9px; border-radius: 6px; color: var(--blue-deep); background: var(--paper-blue); font-size: .74rem; font-weight: 700; }
    .product-meta { display: flex; gap: 18px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--ink-500); font-size: .76rem; }

    .model-section { border-top: 1px solid var(--line); background: var(--paper-soft); }
    /* .model-card supplies its own --ink-900 ground, so the dark-type reset has to
       follow the card, not the section. /ai-product-development/ uses the cards
       without the section wrapper, and its three h3s were rendering #08101f on
       #0b1426 — a 1.04:1 contrast ratio, effectively invisible. */
    .model-card h3 { color: var(--ink-950); }
    
    .model-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--line); }
    .model-card { padding: 32px; background: var(--paper); }
    .model-index { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 26px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--blue); font-size: .74rem; font-weight: 700; }
    .model-card p { color: var(--ink-600); font-size: 1rem; }
    .model-card a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 4px; }

    .industry-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 22px; }
    .industry-card { padding: 36px; border-radius: var(--radius-lg); }
    .industry-card.primary { min-height: 380px; color: white; background: var(--blue-deep); }
    .industry-card.primary h3 { color: white; font-size: 1.45rem; }
    .industry-card.primary p { color: #ccdcff; }
    .industry-stack { display: grid; gap: 22px; }
    .industry-card.secondary { border: 1px solid var(--line); background: var(--paper-soft); }
    .workflow-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; margin-top: 40px; }
    .workflow-list span { padding: 11px 12px; border: 1px solid rgba(255,255,255,.2); border-radius: 8px; color: white; font-size: .8rem; }
    .industry-card.secondary .workflow-list { margin-top: 24px; }
    .industry-card.secondary .workflow-list span { border-color: var(--line); color: var(--ink-700); background: white; }
    .secondary-proof { margin-top: 26px; color: var(--ink-500); font-size: .8rem; }

    .concept-strip { padding-top: 0; }
    .concept-inner { display: grid; grid-template-columns: .75fr 1.25fr; gap: 48px; align-items: center; padding: 40px 42px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper-soft); }
    .concept-label { display: inline-flex; margin-bottom: 14px; color: var(--ink-500); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
    .concept-inner p { margin-bottom: 0; color: var(--ink-600); }
    .labs-line { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; color: var(--ink-500); font-size: .78rem; }
    .labs-line strong { color: var(--ink-700); }

    .founder { background: var(--paper-soft); }
    .founder-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 56px; align-items: start; }
    .founder-card { position: sticky; top: 100px; padding: 30px; border-radius: var(--radius-lg); color: white; background: var(--ink-900); }
    .initials { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 40px; border-radius: var(--radius-sm); color: var(--ink-900); background: var(--cyan); font-size: 1rem; font-weight: 750; }
    .founder-card h3 { color: white; font-size: 1.25rem; }
    .founder-card p { margin: 0; color: #9fafc5; font-size: .88rem; }
    .founder-copy h2 { max-width: 22ch; }
    .founder-copy > p { max-width: 66ch; color: var(--ink-600); font-size: 1rem; }
    /* The founder page used to park a dark card in a sticky .72fr column beside
       a much taller copy column, which left a ~350px hole down the left of the
       page. The identity is a single strip across the full measure now, and it
       does not repeat the name already carried by the h1 above it. The monogram
       is the slot a real portrait drops into. */
    .founder-id { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 46px; }
    .founder-id .initials { flex: none; margin: 0; }
    .founder-id p { margin: 0; color: var(--ink-700); font-size: .95rem; }
    /* margin-left:auto strands the address at the far right of its own row once
       the strip wraps on a phone, aligned to nothing above it. */
    .founder-id .text-link { font-size: .88rem; }
    @media (min-width: 700px) { .founder-id .text-link { margin-left: auto; } }
    .founder-why p + p { margin-top: 14px; }

    /* Four bordered cells repeating the four companies the hero timeline had just
       named read as a second, unrelated list. A rail with the same node vocabulary
       - blue for the operating years, cyan for the one that leads here - reads as
       that timeline expanded, which is what it is. */
    .career-rail { position: relative; display: grid; gap: 26px; margin: 46px 0 0; padding: 2px 0 2px 30px; list-style: none; }
    .career-rail::before { content: ""; position: absolute; top: 9px; bottom: 9px; left: 5px; width: 1px; background: var(--line); }
    .career-rail li { position: relative; }
    .career-rail li::before {
      content: ""; position: absolute; top: 4px; left: -30px; width: 11px; height: 11px;
      box-sizing: border-box; border: 2px solid var(--blue); border-radius: 50%; background: var(--paper);
    }
    .career-rail li:last-child::before { border-color: var(--cyan); }
    .career-rail strong { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 5px; font-size: .95rem; }
    .career-rail strong:only-child { margin-bottom: 0; }
    /* Tabular figures so the year column stays aligned down the rail. */
    .career-rail .yrs { color: var(--ink-500); font-weight: 500; font-variant-numeric: tabular-nums; }
    /* The bar spends the one number this rail actually owns: 22px per year, so
       twelve years reads as twelve years instead of as arithmetic. The current
       role fades out to the right rather than ending on a hard edge. */
    .career-rail .bar {
      display: block; width: min(calc(var(--y) * 22px), 100%); height: 5px;
      margin: 7px 0 9px; border-radius: 3px; background: var(--blue); opacity: .45;
    }
    .career-rail li:last-child .bar {
      opacity: 1; background: linear-gradient(90deg, var(--cyan), rgba(41, 195, 210, .12));
    }
    .career-rail span { display: block; max-width: 62ch; color: var(--ink-600); font-size: .89rem; line-height: 1.5; }

    /* Numbered rows instead of three equal cards: the principles are read in
       order, and rules carry that better than a row of boxes. */
    .principle-rows { display: grid; margin: 0; padding: 0; list-style: none; }
    .principle-rows li:first-child { border-top: 0; padding-top: 0; }
    .principle-rows li { display: grid; grid-template-columns: 66px 1fr; gap: 22px; padding: 28px 0; border-top: 1px solid var(--line); }
    .principle-rows li:last-child { padding-bottom: 0; }
    .principle-rows .num { color: var(--blue); font-size: .82rem; font-weight: 750; letter-spacing: .08em; }
    .principle-rows h3 { margin-bottom: 7px; font-size: 1.08rem; }
    .principle-rows p { max-width: 58ch; margin: 0; color: var(--ink-600); }

    /* Contact sits on the same light template as every other page; the form
       carries its own weight as a bordered card rather than inverting the page. */
    .contact-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 56px; align-items: start; }
    .contact-copy p { max-width: 490px; color: var(--ink-600); }
    .fit-list { display: grid; gap: 12px; margin: 34px 0 0; padding: 0; list-style: none; }
    .fit-list li { display: flex; gap: 11px; color: var(--ink-700); font-size: .88rem; }
    .fit-list li::before { content: "•"; color: var(--cyan); font-size: 1.2rem; }
    .contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 32px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); }
    .field { display: grid; gap: 7px; }
    .field.full { grid-column: 1 / -1; }
    label { color: var(--ink-700); font-size: .78rem; font-weight: 650; }
    input, select, textarea { width: 100%; color: var(--ink-900); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--paper); }
    input, select { height: 44px; padding: 0 13px; }
    textarea { min-height: 112px; padding: 11px 13px; resize: vertical; }
    input::placeholder, textarea::placeholder { color: var(--ink-500); }
    input:focus, select:focus, textarea:focus { border-color: var(--blue); outline: 2px solid rgba(36,99,235,.22); }
    .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
    .consent-field { grid-column: 1 / -1; }
    .consent-label { display: flex; align-items: flex-start; gap: 9px; color: var(--ink-600); font-size: .78rem; font-weight: 500; }
    .consent-label input { width: auto; height: auto; flex: none; margin-top: 3px; }
    .consent-label a { color: var(--blue-deep); }
    .form-footer { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 4px; }
    .form-note { max-width: 42ch; margin: 0; color: var(--ink-500); font-size: .76rem; }
    .form-status { grid-column: 1 / -1; display: none; margin: 0; padding: 11px 13px; border: 1px solid rgba(36,99,235,.35); border-radius: 8px; color: var(--blue-deep); background: var(--paper-blue); font-size: .8rem; }
    .form-status.show { display: block; }

    /* Waitlist modal reuses .contact-form's field styling inside an overlay. */
    .status.internal { color: var(--ink-600); }
    .status.prototype { color: var(--cyan); }
    .status.module { color: var(--ink-600); }

    .modal-overlay { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(6,12,23,.6); }
    .modal-overlay.open { display: flex; }
    .modal-panel { position: relative; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; padding: 32px; border-radius: var(--radius-lg); background: var(--paper); }
    .modal-panel h2 { margin: 0 0 6px; }
    .modal-panel .lede { margin: 0 0 22px; color: var(--ink-600); }
    .modal-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper); color: var(--ink-700); font-size: 1rem; line-height: 1; cursor: pointer; }
    .modal-panel form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
    @media (max-width: 640px) {
      .modal-panel { padding: 24px 18px; }
      .modal-panel form { grid-template-columns: 1fr; }
      .field.full, .form-footer, .form-status { grid-column: auto; }
      .form-footer { align-items: stretch; }
      .form-footer .button { width: 100%; }
    }

    .site-footer { padding: 40px var(--gutter) 24px; color: #78869d; background: #060c17; }
    .footer-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; padding-bottom: 32px; }
    .site-footer .brand { color: white; }
    .footer-links { display: flex; flex-wrap: wrap; gap: 24px; margin: 0; padding: 0; list-style: none; }
    /* Inline-block so the padding makes a real tap target; the row still wraps. */
    .footer-links a { display: inline-block; padding: 4px 0; color: #a9b5c8; text-decoration: none; font-size: .8rem; }
    .footer-links a:hover { color: white; }
    .legal-copy { padding-top: 22px; border-top: 1px solid #1d293c; font-size: .78rem; line-height: 1.55; }

    @media (max-width: 920px) {
      :root { --gutter: 22px; }
      section { padding-block: 64px; }
      .nav-toggle { display: block; }
      .nav-list {
        position: fixed; inset: 76px 0 auto; display: none; padding: 22px;
        border-bottom: 1px solid var(--line); background: white; box-shadow: 0 18px 35px rgba(8,16,31,.12);
      }
      .nav-list.open { display: grid; gap: 6px; }
      .nav-list li, .nav-list a { width: 100%; }
      .nav-list a { display: block; padding: 12px; }
      .nav-list .header-cta { display: flex; margin-top: 5px; }
      .hero-grid, .section-head, .product-feature, .industry-grid, .concept-inner, .founder-grid, .contact-grid { grid-template-columns: 1fr; }
      .hero-grid { gap: 54px; }
      .concept-inner, .founder-grid { gap: 26px; }
      .section-head { gap: 12px; align-items: start; }
      .proof-inner { grid-template-columns: 1fr 1fr; }
      .proof-cell:first-child { grid-column: 1 / -1; padding-left: 0; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
      .product-visual { min-height: 360px; }
      .model-grid { grid-template-columns: 1fr; }
      .model-index { margin-bottom: 34px; }
      .founder-card { position: static; }
    }

    @media (max-width: 620px) {
      :root { --gutter: 18px; }
      section { padding-block: 56px; }
      h1, .page-hero h1 { max-width: none; font-size: clamp(2rem, 7.6vw, 2.15rem); }
      h2, .legal-section h2 { max-width: none; font-size: clamp(1.55rem, 5.6vw, 1.6rem); }
      h3 { font-size: 1.04rem; }
      .product-copy h3, .industry-card.primary h3 { font-size: 1.3rem; }
      .lede { font-size: 1.04rem; }
      /* legibility floor: nothing below ~13px on a phone */
      .eyebrow, .concept-label, .flow-copy span, .flow-index, .breadcrumbs,
      .etf-question, .product-card .tag, .status, .tag { font-size: .84rem; }
      .flow-state, .live-pill, .mini-table, .legal-copy, .footer-summary,
      .research-summary span, .provenance, .etf-flag, .etf-facts span,
      .trust-item span, .proof-cell span, .hero-note, .feature-list span { font-size: .82rem; }
      .hero { padding-top: 64px; }
      .trust-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
      .trust-item { padding: 0 14px 0 0; }
      .system-body { padding: 18px; }
      .flow-row { grid-template-columns: 29px 1fr; }
      .flow-state { grid-column: 2; }
      .proof-inner, .product-grid, .contact-form { grid-template-columns: 1fr; }
      /* 66px of number gutter is affordable at 1180px and not at 390. */
      .principle-rows li { grid-template-columns: 40px 1fr; gap: 14px; padding: 24px 0; }
      .proof-cell, .proof-cell:first-child { min-height: auto; padding: 23px 0; border-left: 0; border-bottom: 1px solid var(--line); }
      .proof-cell:last-child { border-bottom: 0; }
      .product-copy, .industry-card, .concept-inner { padding: 30px 24px; }
      .product-visual { min-height: 330px; padding: 18px; }
      .research-summary { grid-template-columns: 1fr; }
      .mini-table th:nth-child(3), .mini-table td:nth-child(3) { display: none; }
      .model-card { min-height: 0; padding: 30px 24px; }
      .workflow-list { grid-template-columns: 1fr; }
      .contact-form { padding: 22px 18px; }
      .field.full, .form-footer, .form-status { grid-column: auto; }
      .form-footer { align-items: stretch; }
      .form-footer .button { width: 100%; }
      .footer-main { display: grid; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    }

/* Multi-page additions */
.nav-list a[aria-current="page"] { color: var(--blue); }
/* Page hero. Same ground and same bottom edge as the home .hero, so an inner
   page reads as the same template rather than a differently-tinted one. */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-top: 74px;
  padding-bottom: 78px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.98) 0 48%, rgba(255,255,255,.75) 64%, rgba(255,255,255,.3) 100%),
    radial-gradient(circle at 86% 18%, rgba(41,195,210,.17), transparent 28%),
    linear-gradient(135deg, var(--paper-blue), var(--paper) 62%);
}
.page-hero::after {
  content: ""; position: absolute; inset: auto 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}
.page-hero h1 { max-width: 21ch; font-size: clamp(2.15rem, 3.7vw, 3.05rem); }
.page-hero .lede { max-width: 62ch; }
/* Every page carries one diagram, in the vocabulary the blog notes use: blue is
   computed, cyan is supplied by a person or a published source, dashed is what
   the design refuses to do. The hero splits in two so the figure lands where the
   home page's system window lands, and the caption states the claim in words for
   anyone who does not read diagrams. */
.hero-split { display: grid; grid-template-columns: 1.02fr .98fr; gap: 54px; align-items: center; }
/* Deliberately lighter than a product card: the figure is the page's subject,
   not a peer of the cards below it. No border - at --line-soft on this paper it
   measured about 1.1:1 and did nothing. The tint and caption rule carry it. */
.hero-figure {
  margin: 0; padding: 26px 26px 20px;
  border-radius: var(--radius-lg); background: rgba(255, 255, 255, .55);
}
.hero-figure svg { display: block; width: 100%; height: auto; overflow: visible; }
.hero-figure figcaption {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft);
  color: var(--ink-600); font-size: .84rem; line-height: 1.55;
}
.hero-figure figcaption b { color: var(--ink-950); font-weight: 680; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; color: var(--ink-500); font-size: .78rem; }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { color: var(--blue); }
.page-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.compact-section { padding-top: 78px; padding-bottom: 78px; }
.surface-soft { background: var(--paper-soft); }
.intro-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 72px; align-items: start; }
.intro-grid:has(.principle-list) { align-items: center; }
.intro-grid > p { color: var(--ink-600); font-size: 1.12rem; }
.content-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.detail-card { padding: 32px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); }
.detail-card p { margin-bottom: 0; color: var(--ink-600); }
.detail-card .eyebrow { margin-bottom: 16px; }
.principle-list { display: grid; gap: 1px; border: 1px solid var(--line); background: var(--line); }
.principle-item { display: grid; grid-template-columns: 52px 1fr; gap: 20px; padding: 28px; background: white; }
.principle-item > span { color: var(--blue); font-weight: 750; }
.principle-item p { margin: 7px 0 0; color: var(--ink-600); }
.comparison { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.comparison > div { padding: 40px; }
.comparison > div:first-child { background: var(--paper-soft); }
.comparison > div:last-child { color: white; background: var(--ink-900); }
.comparison > div:last-child h3 { color: white; }
.comparison > div:last-child p, .comparison > div:last-child li { color: #aebbd0; }
.check-list { display: grid; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.check-list li { display: flex; gap: 10px; color: var(--ink-700); font-size: .9rem; }
.check-list li::before { content: "✓"; color: var(--green); font-weight: 800; }
.comparison > div:last-child .check-list li::before { color: var(--cyan); }
/* The page used to close with a solid --blue-deep slab sitting straight on the
   near-black footer: two heavy bars stacked, identical on six pages, so every
   page ended in the same brick. The close is typographic now. A hairline opens
   it, the ask carries itself in large type on the page's own paper, and the link
   is the only mark. padding-top is zeroed rather than pinned so the bottom still
   inherits the block padding that steps down at each breakpoint. */
.page-cta { padding-top: 0; background: var(--paper); }
.page-cta .container { padding-top: 58px; border-top: 1px solid var(--line); }
.page-cta h2 { max-width: 17ch; font-size: clamp(2rem, 3.5vw, 2.8rem); }
.page-cta p { max-width: 54ch; margin-top: 18px; color: var(--ink-600); font-size: 1.05rem; }
/* The open edge is about removing the full-bleed slab, not about removing the
   commitment. This reuses the site's own .button, one step larger than the
   header's, so the page's own ask outranks the persistent nav control. */
.page-cta .button { min-height: 52px; margin-top: 32px; padding: 0 26px; font-size: .98rem; }
.legal-section h2 { margin-top: 52px; }
.legal-section h2:first-child,
.legal-section .section-head h2,
.legal-section .section-head + h2 { margin-top: 0; }
.legal-section p { max-width: 820px; color: var(--ink-600); }
.faq-list { display: grid; gap: 14px; }
.faq-item { padding: 22px 26px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); }
.faq-item summary { cursor: pointer; color: var(--ink-950); font-weight: 700; font-size: 1.02rem; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; float: right; color: var(--blue-deep); font-weight: 700; }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { margin: 14px 0 0; color: var(--ink-600); }
.footer-summary { max-width: 330px; margin: 14px 0 0; color: #78869d; font-size: .76rem; }
.text-link { color: var(--blue-deep); font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.feature-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin-top: 34px; }
.feature-list div { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: white; }
.feature-list strong { display: block; margin-bottom: 5px; font-size: .88rem; }
.feature-list span { color: var(--ink-500); font-size: .78rem; }
@media (max-width: 920px) {
  .intro-grid, .content-grid { grid-template-columns: 1fr; }
  .intro-grid { gap: 18px; }
  .content-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .page-hero { padding-top: 58px; padding-bottom: 58px; }
  .compact-section { padding-top: 58px; padding-bottom: 58px; }
  .content-grid, .comparison, .feature-list { grid-template-columns: 1fr; }
  .comparison > div { padding: 28px 24px; }
  .principle-item { grid-template-columns: 38px 1fr; padding: 22px 18px; }
  .feature-list span, .footer-summary { font-size: .82rem; }
  /* these live after the main mobile block, so they must be re-stated here to win on source order */
  .page-hero h1 { max-width: none; font-size: clamp(2rem, 7.6vw, 2.15rem); }
  .legal-section h2 { max-width: none; }
}

/* InvETF illustrative preview */
.etf-panel { width: 100%; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: white; box-shadow: var(--shadow); }
.etf-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 17px; border-bottom: 1px solid var(--line); font-size: .74rem; font-weight: 700; }
.etf-head .not-live { color: var(--amber); }
.etf-question { padding: 13px 17px; border-bottom: 1px solid var(--line); color: var(--ink-600); font-size: .72rem; }
.etf-question strong { color: var(--ink-900); font-weight: 700; }
.etf-option { display: grid; grid-template-columns: 1fr auto; gap: 12px 14px; padding: 14px 17px; border-bottom: 1px solid var(--line); }
.etf-option:last-child { border-bottom: 0; }
.etf-option > strong { font-size: .86rem; }
.etf-flag { align-self: center; color: var(--green); font-size: .72rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.etf-flag.gap { color: var(--amber); }
.etf-facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.etf-facts span { display: block; color: var(--ink-500); font-size: .72rem; }
.etf-facts strong { display: block; margin-top: 3px; font-size: .74rem; font-weight: 650; }

/* Route map: the three engagement models as a diagram rather than three paragraphs. */
.route-map { display: grid; justify-items: center; }
.route-entry {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px; border: 1px solid var(--line-strong); border-radius: 999px;
  color: var(--ink-900); background: var(--paper); font-size: .92rem; font-weight: 650;
}
.route-entry::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); }
.route-branch { position: relative; width: 100%; height: 42px; }
.route-branch::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 20px;
  background: var(--line-strong); transform: translateX(-50%);
}
.route-branch::after {
  content: ""; position: absolute; left: 16.67%; right: 16.67%; top: 20px; height: 1px; background: var(--line-strong);
}
.route-branch i { position: absolute; top: 20px; width: 1px; height: 22px; background: var(--line-strong); }
.route-branch i:nth-child(1) { left: 16.67%; }
.route-branch i:nth-child(2) { left: 50%; }
.route-branch i:nth-child(3) { left: 83.33%; }
.route-lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; width: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--line); }
.route-lane { display: grid; align-content: start; gap: 14px; padding: 28px 26px 30px; background: var(--paper); }
.route-step { display: flex; align-items: center; gap: 11px; }
.route-step span {
  display: grid; place-items: center; width: 30px; height: 30px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--blue); font-size: .78rem; font-weight: 700;
}
.route-step strong { color: var(--ink-950); font-size: 1.18rem; letter-spacing: -.015em; }
.route-meter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.route-meter i { height: 5px; border-radius: 3px; background: var(--line); }
.route-meter i.on { background: var(--blue); }
.route-fact { display: grid; gap: 3px; }
.route-fact b { color: var(--ink-500); font-size: .8rem; font-weight: 700; letter-spacing: 0; }
.route-fact span { color: var(--ink-700); font-size: .95rem; line-height: 1.45; }
.route-foot { margin: 26px 0 0; color: var(--ink-500); font-size: .9rem; text-align: center; }

/* ─────────────────────────────────────────────────────────────────────────
   Blog. Built on soft cards and pills rather than the hairline rules the
   product pages use: a note is a thing you sit down and read, and the
   rounded ground signals that before a word is read. Same palette as the
   rest of the site, different geometry.
   ───────────────────────────────────────────────────────────────────── */
/* Cards supply their own inner padding, so the sections that hold them sit
   closer together than the rule-separated product sections. */
.blog-section { padding-top: 0; }
.blog-section:first-of-type { padding-top: 56px; }

/* Pill label. Replaces .eyebrow inside the blog so the label sits on the
   same rounded ground as everything else on the page. */
.chip {
  display: inline-flex; align-items: center; gap: 9px;
  margin-bottom: 22px; padding: 8px 15px; border-radius: var(--pill);
  background: var(--cyan-200); color: var(--ink-900);
  font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.chip::before {
  content: ""; width: 7px; height: 7px; flex: none;
  border-radius: 50%; background: var(--cyan-700);
}
.chip.on-blue { background: rgba(255,255,255,.22); color: white; }
.chip.on-blue::before { background: white; }
.status-pill {
  display: inline-flex; align-items: center; align-self: start;
  padding: 9px 15px; border-radius: var(--pill);
  border: 1px solid var(--blue-400); color: var(--blue-800);
  font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.status-pill.solid { border-color: transparent; background: white; color: var(--blue-800); }
.pill-link {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 22px; border-radius: var(--pill);
  background: var(--paper-soft); color: var(--ink-900);
  font-size: .92rem; font-weight: 700; text-decoration: none;
}
.pill-link:hover { background: var(--blue-200); color: var(--blue-800); }
.pill-link.on-blue { background: white; color: var(--blue-800); }
.pill-link.on-blue:hover { background: var(--blue-200); }

/* Index hero. The counts sit beside the headline because the honest scale of
   the archive — and the zero — is part of what the page is claiming. */
.blog-lead { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 52px; align-items: center; }
.blog-lead h1 { max-width: 19ch; margin-bottom: 0; }
.blog-lead .lede { margin-top: 24px; }
.blog-stats { display: grid; gap: 14px; }
.stat-card {
  display: grid; grid-template-columns: 62px 1fr; gap: 18px; align-items: center;
  padding: 22px 24px; border-radius: var(--radius-blob); background: var(--paper-soft);
}
.stat-card b {
  display: grid; place-items: center; width: 62px; height: 62px;
  border-radius: 50%; background: var(--blue-200); color: var(--blue-800);
  font-size: 1.5rem; font-weight: 700;
}
.stat-card:nth-child(2) b { background: var(--cyan-200); color: var(--ink-900); }
.stat-card:nth-child(3) b { background: var(--blue); color: white; }
.stat-card strong { display: block; font-size: 1rem; }
.stat-card span { display: block; margin-top: 3px; color: var(--ink-600); font-size: .9rem; line-height: 1.4; }

/* Featured note. One post carried as a full blue card — a single teaser in a
   grid reads as a page that failed to load. */
.feature-post {
  display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 44px; align-items: start;
  padding: 40px 40px 44px; border-radius: var(--radius-blob);
  background: var(--blue); color: white; text-decoration: none;
}
a.feature-post:hover { background: var(--blue-deep); }
.feature-post h3 { max-width: 24ch; margin-bottom: 20px; color: white; font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.feature-post .dek { max-width: 60ch; margin-bottom: 26px; color: white; font-size: 1.06rem; }
.post-rail { display: grid; align-content: start; gap: 12px; padding-top: 6px; font-size: .9rem; }
.post-rail div {
  display: flex; justify-content: space-between; gap: 10px;
  padding-bottom: 11px; border-bottom: 1px solid rgba(255,255,255,.28);
}
.post-rail span:first-child { opacity: .75; }
.post-rail b, .post-rail time { font-weight: 700; text-align: right; }

/* Archive. The published notes stack in the left column, the standing context
   about how a note is made sits beside them. */
.list-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 44px; align-items: start; }
.post-list { display: grid; gap: 14px; }
/* Everything behind the lead note: same anatomy, reduced to a row. */
.post-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 24px; align-items: center;
  padding: 26px 30px; border-radius: var(--radius-blob);
  background: var(--paper-soft); color: var(--ink-950); text-decoration: none;
}
.post-row:hover { background: var(--blue-200); }
.post-row .meta { display: block; margin-bottom: 9px; color: var(--ink-600); font-size: .84rem; }
.post-row h3 { margin-bottom: 8px; font-size: 1.3rem; }
.post-row p { max-width: 56ch; margin: 0; color: var(--ink-600); font-size: .96rem; }
.post-row .go {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; background: var(--blue-200); color: var(--blue-800);
  font-size: 1.05rem; font-weight: 700;
}
.post-row:hover .go { background: var(--blue); color: white; }
.list-aside { position: sticky; top: 104px; display: grid; gap: 16px; }
.aside-card { padding: 26px 26px 28px; border-radius: var(--radius-blob); background: var(--paper-soft); }
.aside-card h3 { margin-bottom: 12px; font-size: 1.3rem; }
.aside-card p { margin: 0; color: var(--ink-600); font-size: .95rem; line-height: 1.7; }
.aside-card.dark { background: var(--cyan-700); color: white; }
.aside-card.dark h3 { font-size: 1.45rem; }
.aside-card.dark p { color: rgba(255,255,255,.88); }
.aside-steps { display: grid; gap: 12px; margin-top: 20px; font-size: .95rem; font-weight: 600; }

/* Topic cards. */
.topic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.topic-item { padding: 28px 26px 30px; border-radius: var(--radius-blob); background: var(--paper-soft); }
.topic-item h3 { margin-bottom: 10px; font-size: 1.35rem; }
.topic-item p { margin: 0; color: var(--ink-600); font-size: .97rem; }

/* Blog CTA. A card rather than the full-bleed band the product pages use, so
   the rounded ground carries through to the bottom of the page. */
.blog-cta {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 36px; align-items: center;
  padding: 44px 40px 48px; border-radius: var(--radius-blob);
  background: var(--ink-900); color: white;
}
.blog-cta h2 { max-width: 24ch; margin-bottom: 0; color: white; }
.blog-cta p { max-width: 50ch; margin: 14px 0 0; color: #c2cfe2; font-size: 1.02rem; }

/* Article. */
.article-top { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 52px; align-items: start; }
.article-top h1 { max-width: 21ch; margin-bottom: 0; }
.article-top .lede { max-width: 56ch; margin-top: 24px; font-size: 1.2rem; }
.note-record { padding: 26px 24px 28px; border-radius: var(--radius-blob); background: var(--paper-soft); }
.note-record h2 {
  max-width: none; margin-bottom: 16px; color: var(--ink-500);
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.note-record dl { display: grid; gap: 13px; margin: 0 0 18px; font-size: .92rem; }
.note-record div { display: flex; justify-content: space-between; gap: 12px; }
.note-record dt { color: var(--ink-500); }
.note-record dd { margin: 0; font-weight: 700; text-align: right; }

.article-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; align-items: start; }
.toc { position: sticky; top: 104px; padding: 22px 20px 24px; border-radius: var(--radius-blob); background: var(--paper-soft); }
.toc h2 {
  max-width: none; margin-bottom: 12px; color: var(--ink-500);
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.toc ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.toc a {
  display: block; padding: 9px 13px; border-radius: var(--pill);
  color: var(--ink-600); font-size: .9rem; line-height: 1.35; text-decoration: none;
}
.toc a:hover, .toc a.current { background: var(--line-soft); color: var(--ink-900); }

.article-body { max-width: 720px; font-size: 1.08rem; line-height: 1.75; }
.article-body > * { max-width: none; }
.article-body h2 { margin: 52px 0 18px; font-size: 1.85rem; scroll-margin-top: 110px; }
.article-body h3 { margin: 34px 0 10px; font-size: 1.12rem; }
.article-body p { margin-bottom: 18px; color: var(--ink-800); }
.article-body ul { display: grid; gap: 12px; margin: 22px 0; padding: 0; list-style: none; color: var(--ink-800); }
/* Absolute dot, not a grid column: the list items mix <strong> with bare text,
   and a grid would make each run its own item and push an implicit column. */
.article-body ul li { position: relative; padding-left: 25px; }
.article-body ul li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 11px; height: 11px;
  border-radius: 50%; background: var(--blue);
}
.article-body ul li strong { color: var(--ink-950); }
/* Numbered commitments carry their own card — each one is a claim the note
   has to defend, not a bullet. */
.article-body ol.card-list { display: grid; gap: 12px; margin: 24px 0; padding: 0; list-style: none; }
.article-body ol.card-list li { padding: 22px 24px; border-radius: var(--radius-blob); background: var(--paper-soft); font-size: 1rem; line-height: 1.65; }
.article-body ol.card-list strong { display: block; margin-bottom: 5px; color: var(--ink-950); font-size: 1.06rem; }

.pull-quote {
  margin: 44px 0; padding: 32px 34px; border-radius: var(--radius-blob);
  background: var(--ink-900); color: white;
  font-size: 1.5rem; font-weight: 680; line-height: 1.32; letter-spacing: -.015em;
}
/* Note diagram. One per note, carrying the shape the prose is describing. The
   SVG is inline and unsized in the markup so it scales with the column; the
   caption is the alt text, visible, because a diagram nobody can read is worse
   than no diagram. */
.note-figure {
  margin: 40px 0; padding: 30px 30px 24px; border-radius: var(--radius-blob);
  background: var(--paper-soft);
}
.note-figure svg { display: block; width: 100%; height: auto; overflow: visible; }
.note-figure figcaption {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line-soft);
  color: var(--ink-600); font-size: .9rem; line-height: 1.6;
}
.note-figure figcaption b { color: var(--ink-950); font-weight: 680; }
/* Diagram vocabulary, shared by all four notes so a reader who learns one
   reads the rest: blue is what the system computes, cyan is what a person or a
   published source supplies, dashed grey is what the design refuses to do. */
.dg-box { fill: var(--paper); stroke: var(--line-strong); stroke-width: 1.5; }
.dg-box.on { fill: var(--blue-100); stroke: var(--blue-400); }
.dg-box.src { fill: var(--cyan-100); stroke: var(--cyan-400); }
.dg-box.off { fill: none; stroke: var(--line-strong); stroke-dasharray: 5 5; }
.dg-t { fill: var(--ink-950); font-size: 13px; font-weight: 680; }
.dg-s { fill: var(--ink-600); font-size: 11.5px; }
.dg-s.off { fill: var(--ink-500); }
.dg-line { stroke: var(--line-strong); stroke-width: 1.5; fill: none; }
.dg-line.on { stroke: var(--blue); }
.dg-line.off { stroke: var(--line-strong); stroke-dasharray: 5 5; }
.dg-cap { fill: var(--ink-500); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; }

.callout {
  margin: 28px 0; padding: 24px 26px; border-radius: var(--radius-blob);
  background: var(--blue-100); color: var(--blue-900); font-size: 1rem;
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--blue-900); }
.callout.scope { border: 1px solid var(--cyan-400); background: var(--cyan-100); color: var(--ink-900); }
.callout.scope strong { color: var(--ink-950); }
/* The kill condition is the one commitment in a note that binds us, so it
   gets the accent ground rather than a quieter tint. */
.callout.kill { background: var(--blue); color: white; }
.callout.kill strong { color: white; }
.callout-head {
  display: block; margin-bottom: 12px;
  font-size: .76rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; opacity: .85;
}
.data-rows { display: grid; gap: 10px; margin: 24px 0; }
.data-rows div {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 120px; gap: 16px; align-items: center;
  padding: 18px 24px; border-radius: var(--radius-blob); background: var(--paper-soft);
  font-size: .95rem; line-height: 1.45;
}
.data-rows b { color: var(--ink-950); }
.data-rows span:nth-child(2) { color: var(--ink-600); }
.data-rows span:last-child { font-weight: 600; text-align: right; }
.data-rows div.excluded { color: var(--ink-500); }
.data-rows div.excluded b { color: var(--ink-500); }

.article-author {
  display: grid; grid-template-columns: 60px 1fr; gap: 20px; align-items: center;
  margin-top: 48px; padding: 24px 26px; border-radius: var(--radius-blob); background: var(--paper-soft);
}
.article-author .initials {
  display: grid; place-items: center; width: 60px; height: 60px;
  border-radius: 50%; color: white; background: var(--cyan-700);
  font-size: 1.2rem; font-weight: 700; letter-spacing: .04em;
}
.article-author strong { display: block; color: var(--ink-950); font-size: 1.2rem; }
.article-author span { color: var(--ink-600); font-size: .93rem; }
.article-foot { margin-top: 28px; }

/* Reading progress. Only meaningful on a long note, so it is opt-in per page. */
.read-progress {
  position: fixed; top: 0; left: 0; z-index: 60;
  /* Scaled, not resized: this redraws on every scroll frame, and width would
     relayout each time. */
  width: 100%; height: 4px; border-radius: 0 var(--pill) var(--pill) 0;
  background: var(--blue);
  transform: scaleX(0); transform-origin: left; transition: transform .08s linear;
}

/* Small-screen legibility floor. Must stay last in the file: the preview-panel, route-map
   and page-hero rules above are appended blocks that would otherwise win on source order.
   Applied from 920px down so tablets get it too, not just phones. */
@media (max-width: 920px) {
  .etf-head, .etf-question, .etf-flag, .etf-facts span, .etf-facts strong,
  .provenance, .research-summary span, .mini-table, .research-top { font-size: .82rem; }
  .etf-option { grid-template-columns: 1fr; gap: 8px 0; }
  .etf-option > strong { font-size: .95rem; }
  .etf-flag { justify-self: start; }
  .etf-facts { grid-template-columns: 1fr 1fr; }
  .breadcrumbs, .status, .product-card .tag, .footer-summary, .footer-links a, .feature-list span,
  .review-row, .window-bar, .flow-copy span, .flow-state, .live-pill,
  .flow-index, .model-index, .eyebrow, .concept-label, .toc h2 { font-size: .82rem; }
  .route-fact b { font-size: .78rem; }
  /* the branch only reads as a diagram while the lanes sit side by side */
  .route-lanes { grid-template-columns: 1fr; }
  .route-branch { height: 26px; }
  .route-branch::after, .route-branch i { display: none; }
  .route-branch::before { height: 26px; }
  .route-lane { padding: 24px 22px 26px; }
  .post-rail { font-size: .82rem; }
  .blog-lead, .article-top, .article-layout { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .blog-section:first-of-type { padding-top: 34px; }
  .feature-post { grid-template-columns: 1fr; gap: 24px; padding: 28px 24px 30px; }
  .feature-post h3 { max-width: none; font-size: 1.5rem; }
  .feature-post .dek { font-size: 1rem; }
  .article-top .lede { font-size: 1.06rem; }
  .topic-grid { grid-template-columns: 1fr; gap: 14px; }
  .topic-item { padding: 24px 22px 26px; }
  .topic-item h3 { font-size: 1.2rem; }
  .blog-cta { grid-template-columns: 1fr; gap: 22px; padding: 30px 24px 32px; }
  .article-body { font-size: 1.02rem; }
  .article-body h2 { margin-top: 40px; font-size: 1.45rem; }
  .pull-quote { padding: 24px 24px; font-size: 1.2rem; }
  /* Sticky only helps while the contents sits beside the text; stacked it
     would cover the note it indexes. */
  .toc { position: static; padding: 18px 18px 20px; }
  .list-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .list-aside { position: static; }
  .post-row { grid-template-columns: 1fr; gap: 16px; padding: 22px 22px 24px; }
  .post-row h3 { font-size: 1.15rem; }
  /* The hero figure drops below the copy rather than beside it; at 440 viewBox
     units in a ~340px column its 13px labels still land near 10px, so unlike the
     720-unit note diagrams it does not need to scroll. */
  .hero-split { grid-template-columns: 1fr; gap: 34px; }
  /* Same policy as .note-figure. Squeezed into a ~282px column a 440-unit
     diagram renders its 13px labels near 8px and its captions near 7px, which
     is decoration, not an argument. Hold it at 1:1 with its own viewBox and let
     it scroll inside the frame. min-width only bites below ~480px; above that
     the stacked figure is far wider than 440 and nothing scrolls. */
  /* The scroller has to say it scrolls. The mask rides the border box, so the
     fade stays pinned to the right edge while the diagram moves under it.
     ponytail: the last 26px stay faded at full scroll; a scroll-driven
     animation would clear that if it ever reads as a defect. */
  .hero-figure {
    padding: 20px 0 16px; overflow-x: auto;
    mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
  }
  .hero-figure svg { min-width: 440px; padding: 0 20px; box-sizing: border-box; }
  .hero-figure.fit { overflow-x: visible; mask-image: none; }
  .hero-figure.fit svg { min-width: 0; }
  .hero-figure figcaption { margin-inline: 20px; font-size: .82rem; }
  /* Thumb-sized footer targets, and the row needs its own gap once each link
     is tall enough to collide with the one below it. */
  .footer-links { gap: 4px 22px; }
  .footer-links a { padding: 11px 0; }
  /* A 720-unit diagram scaled into a 320px column renders its 13px labels at
     about 6px. Better to hold the diagram at a legible width and let it scroll
     sideways inside the figure than to shrink it into decoration. */
  .note-figure { padding: 24px 0 20px; overflow-x: auto; }
  .note-figure svg { min-width: 660px; padding: 0 22px; box-sizing: border-box; }
  .note-figure figcaption { margin: 18px 22px 0; font-size: .82rem; }
  .callout, .article-body ol.card-list li, .data-rows div { padding: 20px 22px; }
  .data-rows div { grid-template-columns: 1fr; gap: 6px; }
  .data-rows span:last-child { text-align: left; }
  .stat-card { grid-template-columns: 50px 1fr; gap: 14px; padding: 18px 20px; }
  .stat-card b { width: 50px; height: 50px; font-size: 1.25rem; }
  .article-author { grid-template-columns: 48px 1fr; gap: 16px; padding: 20px 22px; }
  .article-author .initials { width: 48px; height: 48px; font-size: 1rem; }
  .article-author strong { font-size: 1.06rem; }
}