/* Shared by the landing page (/) and the developer page (/developers).
   Moved out of landing.html when the second page arrived, so the two cannot
   drift apart. Page-specific rules (the coverage map) live here too; they are
   inert on a page without those elements. */
  /* Neutral (zinc) tokens in the shadcn/ui scale. The page is greyscale: the
     "accent" is the foreground colour itself, so emphasis comes from weight,
     contrast and borders rather than hue. Status colours (ok/warn/bad) and the
     map's categorical colours are the only hues left, because they carry
     meaning. */
  :root{
    --page:#ffffff; --bg:#fafafa; --panel:#ffffff; --ink:#09090b; --muted:#71717a;
    --line:#e4e4e7; --accent:#18181b; --accent-fg:#fafafa; --accent-soft:#f4f4f5;
    --ring:#a1a1aa;
    --warn:#a16207; --warn-soft:#fefce8; --ok:#15803d; --ok-soft:#f0fdf4;
    --bad:#b91c1c; --bad-soft:#fef2f2;
    --info:#1d4ed8; --info-soft:#eff6ff;
    --radius:12px; --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
    --sans:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
    --shadow-xs:0 1px 2px rgba(0,0,0,.05);
    --shadow-lg:0 10px 30px -10px rgba(0,0,0,.18),0 2px 6px -2px rgba(0,0,0,.06);
  }
  @media (prefers-color-scheme: dark){
    :root{ --page:#09090b; --bg:#111113; --panel:#09090b; --ink:#fafafa; --muted:#a1a1aa;
      --line:#27272a; --accent:#fafafa; --accent-fg:#18181b; --accent-soft:#1f1f23;
      --ring:#52525b;
      --warn:#facc15; --warn-soft:#1f1a07; --ok:#4ade80; --ok-soft:#0c1f13;
      --bad:#f87171; --bad-soft:#2a1010;
      --info:#60a5fa; --info-soft:#0c1a33;
      --shadow-xs:0 1px 2px rgba(0,0,0,.4);
      --shadow-lg:0 10px 30px -10px rgba(0,0,0,.7); }
  }
  *{box-sizing:border-box}
  html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
  body{margin:0;background:var(--page);color:var(--ink);
    font:16px/1.6 var(--sans);font-feature-settings:"cv11","ss01"}
  a{color:var(--ink);text-underline-offset:3px;text-decoration-color:var(--ring)}
  a:hover{text-decoration-color:currentColor}
  ::selection{background:var(--ink);color:var(--page)}
  :focus-visible{outline:2px solid var(--ring);outline-offset:2px}
  /* Header: the shadcn sticky bar -- translucent, blurred, one hairline. Its
     padding lines the brand and the last nav item up with the content column. */
  header{position:sticky;top:0;z-index:20;
    background:color-mix(in srgb,var(--page) 82%,transparent);
    -webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);
    border-bottom:1px solid var(--line);min-height:64px;
    padding:10px max(22px,calc((100% - 1080px)/2));
    display:flex;align-items:center;gap:18px;flex-wrap:wrap}
  header .brand{font-weight:650;letter-spacing:-.025em;font-size:16.5px;
    text-decoration:none;color:var(--ink)}
  header nav{margin-left:auto;display:flex;align-items:center;gap:6px;
    font-size:14px;flex-wrap:wrap}
  header nav > a,header nav .menu > button{text-decoration:none;color:var(--muted);font-weight:500;
    padding:7px 11px;border-radius:8px;transition:color .15s,background .15s}
  header nav > a:hover,header nav .menu > button:hover{color:var(--ink);background:var(--accent-soft)}
  header nav > a.cta{margin-left:6px}
  /* Buttons: primary is solid foreground, ghost is the shadcn "outline". */
  .cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;
    background:var(--accent);color:var(--accent-fg)!important;text-decoration:none;
    border:1px solid var(--accent);border-radius:8px;padding:0 18px;font-weight:500;font-size:14.5px;
    box-shadow:var(--shadow-xs);transition:opacity .15s,background .15s,border-color .15s}
  .cta:hover{opacity:.9}
  header .cta{height:36px;padding:0 14px;font-size:14px}
  header nav > a.cta:hover{background:var(--accent);color:var(--accent-fg)}
  .cta.ghost{background:var(--panel);color:var(--ink)!important;border:1px solid var(--line)}
  .cta.ghost:hover{background:var(--accent-soft);opacity:1;border-color:var(--line)}
  main{max-width:1080px;margin:0 auto;padding:0 22px 96px}
  section{padding:88px 0;border-bottom:0}
  section + section{border-top:1px solid var(--line)}
  h1{font-size:clamp(36px,5.2vw,58px);line-height:1.06;letter-spacing:-.04em;margin:0 0 20px;
    font-weight:650;max-width:18ch;text-wrap:balance}
  /* Section labels read as a shadcn Badge (outline) above the section title. */
  h2{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;line-height:1;margin:0 0 18px;
    font-weight:550;letter-spacing:0;text-transform:none;color:var(--ink);
    border:1px solid var(--line);border-radius:999px;padding:6px 11px;background:var(--panel);
    box-shadow:var(--shadow-xs)}
  h3{font-size:16.5px;margin:0 0 6px;font-weight:600;letter-spacing:-.015em}
  .lede{font-size:clamp(17px,1.6vw,19.5px);line-height:1.55;color:var(--muted);max-width:62ch;margin:0 0 30px}
  .hero{padding:96px 0 80px}
  .hero .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
  .hero .fine{font-size:13.5px;color:var(--muted);margin:16px 0 0}
  .works-with{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:18px 0 0}
  .works-with .ww-label{font-size:13px;color:var(--muted);margin-right:4px}
  .works-with .ww-chip{position:relative;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px;
    border:1px solid var(--line);border-radius:99px;background:var(--panel);color:var(--ink);
    font-size:13.5px;font-weight:500;text-decoration:none;transition:border-color .15s,color .15s}
  .works-with .ww-chip:hover{border-color:var(--accent);color:var(--accent)}
  .works-with .ww-chip img{width:22px;height:22px;object-fit:contain;display:block}
  .works-with .ww-chip.has-logo{width:40px;height:40px;padding:0;justify-content:center}
  .works-with .ww-chip.has-logo .ww-name{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap}
  @media (prefers-color-scheme: dark){.works-with .ww-chip img.mono{filter:invert(1)}}
  .grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
  .grid p{margin:0;color:var(--muted);font-size:14.5px}
  .ex{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
    padding:18px 20px;margin:0 0 14px}
  .ex .q{font-weight:600;margin:0 0 8px}
  .ex .a{color:var(--muted);font-size:14.5px;margin:0}
  .ex .a b{color:var(--ink);font-weight:600}
  /* Seven examples read better two across than as one long column; each card
     names who asks it, because the same data answers a regulator, a utility
     and a vendor differently. */
  .examples{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
  .examples .ex{margin:0}
  /* Seven cards leave one alone in the last row; the odd one out is also the
     one for a different audience, so it takes the full width. */
  .examples .ex.wide{grid-column:1/-1}
  .sell{margin-top:40px}
  #vendors .sell{margin-top:0}
  /* Tap-to-Muriel flow. An ordered list, so it reads in order with no CSS at
     all; five across on a wide screen, stacked on a phone, with the connecting
     arrow drawn between steps rather than as a separate element. */
  .flow-title{font-size:26px;line-height:1.2;letter-spacing:-.02em;margin:0 0 10px;
    font-weight:680;max-width:26ch}
  .flow-lede{font-size:16.5px;color:var(--muted);max-width:62ch;margin:0 0 26px}
  .flow{list-style:none;margin:0;padding:0;display:grid;gap:14px;
    grid-template-columns:repeat(5,minmax(0,1fr));counter-reset:step}
  .flow li{position:relative;background:var(--panel);border:1px solid var(--line);
    border-radius:var(--radius);padding:16px 14px 14px;counter-increment:step}
  .flow li::before{content:counter(step);display:inline-flex;align-items:center;
    justify-content:center;width:24px;height:24px;border-radius:50%;
    background:var(--accent-soft);color:var(--accent);font-size:12.5px;
    font-weight:700;margin-bottom:10px}
  .flow li:not(:last-child)::after{content:"";position:absolute;top:28px;right:-12px;
    width:10px;height:10px;border-top:2px solid var(--accent);
    border-right:2px solid var(--accent);transform:rotate(45deg);z-index:1}
  .flow li.muriel{border-color:var(--accent);background:var(--accent-soft)}
  .flow li.muriel::before{background:var(--panel)}
  .flow h4{margin:0 0 6px;font-size:14.5px;font-weight:650;letter-spacing:-.01em}
  .flow p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.45}
  .flow .when{display:block;margin-top:10px;font-family:var(--mono);font-size:11.5px;
    color:var(--accent)}
  .speed{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    margin:22px 0 0}
  .speed div{border-left:3px solid var(--accent);padding:2px 0 2px 14px}
  .speed b{display:block;font-size:22px;letter-spacing:-.02em}
  .speed span{font-size:13.5px;color:var(--muted)}
  .flow-note{font-size:13px;color:var(--muted);margin:18px 0 0;max-width:70ch}
  /* The problem, as a picture: many state shapes in, one schema out, two ways
     to use it. Three columns on a wide screen with a chevron between each;
     stacked on a phone with the chevrons turned downward. The portal cards
     are illustrative, but every format in them is one the normalizer in
     pipeline/wqr/normalize.py actually has to handle -- keep them that way. */
  .schema{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr) minmax(0,1fr);
    gap:34px;align-items:center;margin:4px 0 0}
  .schema > div{position:relative}
  .schema > div:not(:last-child)::after{content:"";position:absolute;top:50%;right:-23px;
    width:12px;height:12px;border-top:2px solid var(--accent);
    border-right:2px solid var(--accent);transform:translateY(-50%) rotate(45deg)}
  .schema .col-h{font-size:12px;font-weight:650;letter-spacing:.05em;
    text-transform:uppercase;color:var(--muted);margin:0 0 10px}
  .chips{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 12px}
  .chips span{font:600 10.5px/1 var(--mono);padding:4px 5px;border-radius:5px;
    background:var(--panel);border:1px solid var(--line);color:var(--muted)}
  .portals{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .portal{background:var(--panel);border:1px solid var(--line);border-radius:10px;
    padding:10px 11px 9px;font:12px/1.5 var(--mono);min-width:0}
  .portal:nth-child(2){border-style:dashed}
  .portal:nth-child(3){border-radius:3px}
  .portal:nth-child(4){border-left:3px solid var(--line)}
  .portal .ph{font:650 11px/1.3 var(--sans);
    color:var(--muted);margin:0 0 6px;letter-spacing:.02em}
  .portal dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:1px 8px}
  .portal dt{color:var(--muted)}
  .portal dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
  .portal dd mark{background:var(--warn-soft);color:var(--warn);border-radius:3px;padding:0 2px}
  .portal .why{font:12px/1.4 var(--sans);
    color:var(--muted);margin:7px 0 0;padding-top:6px;border-top:1px solid var(--line)}
  .hub{background:var(--accent-soft);border:1.5px solid var(--accent);border-radius:var(--radius);
    padding:18px 18px 16px}
  .hub .name{font-size:22px;font-weight:700;letter-spacing:-.02em;margin:0}
  .hub .sub{font-size:13.5px;color:var(--muted);margin:2px 0 12px}
  .hub ul{list-style:none;margin:0;padding:0;font-size:13.5px}
  .hub li{padding:6px 0;border-top:1px solid var(--line);display:flex;gap:8px}
  .hub li b{color:var(--accent);font-weight:650;min-width:88px}
  .outs{display:grid;gap:12px}
  .out{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 13px}
  .out h4{margin:0 0 8px;font-size:14px;font-weight:650;display:flex;gap:8px;align-items:center}
  .out h4 span{font:600 10.5px/1 var(--mono);color:var(--accent);background:var(--accent-soft);
    padding:4px 6px;border-radius:5px}
  .out .bubble{background:var(--bg);border-radius:10px 10px 10px 3px;padding:8px 10px;
    font-size:13px;margin:0 0 6px}
  .out .reply{font-size:12.5px;color:var(--muted);margin:0}
  .out pre{margin:0;font:11.5px/1.5 var(--mono);color:var(--ink);white-space:pre;overflow-x:auto}
  .out pre i{font-style:normal;color:var(--accent)}
  .problem-note{font-size:12.5px;color:var(--muted);margin:14px 0 0;max-width:80ch}
  @media (max-width:860px){
    .schema{grid-template-columns:1fr;gap:40px}
    .schema > div:not(:last-child)::after{top:auto;bottom:-27px;right:auto;left:50%;
      transform:translateX(-50%) rotate(135deg)}
  }
  @media (max-width:420px){ .portals{grid-template-columns:1fr} }
  /* In the three-column layout a card is ~150px wide: stack each label over
     its value, and never break a timestamp mid-token. */
  @media (min-width:861px){
    .portal dl{grid-template-columns:1fr;gap:0}
    .portal dt{font-size:10.5px;margin-top:3px}
    .portal dd{white-space:nowrap;overflow-wrap:normal;font-size:11.5px}
    .hub li{flex-direction:column;gap:0}
  }
  /* "Build it in": one line of code, then a mock of somebody else's app with
     Muriel's answer arriving as a notification. The app is deliberately
     generic -- grey placeholder blocks, no product name -- so the eye goes
     to the notification. */
  .embed{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;
    align-items:center;position:relative}
  /* Arrows from each response field to where it lands in the app, drawn by
     drawLinks() from the live positions of the pins. Wide layout only: once
     the two columns stack, the numbered pins carry the match on their own. */
  .embed .links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
    overflow:visible;z-index:2}
  .embed .links path{fill:none;stroke:var(--accent);stroke-width:2}
  .embed .links circle{fill:var(--accent)}
  .code .hl{background:rgba(79,179,212,.16);border-radius:4px;box-shadow:0 0 0 2px rgba(79,179,212,.16)}
  .toast [data-to]{border-radius:5px;box-shadow:0 0 0 3px transparent}
  .toast [data-to],.answer [data-to]{background:linear-gradient(var(--accent-soft),var(--accent-soft)) no-repeat;
    background-size:100% 100%;margin-left:-4px;padding-left:4px;border-radius:5px}
  .code{background:#18181b;color:#e4e4e7;border-radius:12px;padding:14px 16px;
    border:1px solid var(--line);min-width:0}
  .code .lbl{margin:0 0 6px;font-size:11px;font-weight:650;letter-spacing:.06em;
    text-transform:uppercase;color:#a1a1aa}
  .code pre{margin:0;font:12.5px/1.55 var(--mono);overflow-x:auto}
  .code pre.req{font-size:14.5px;white-space:pre;overflow-x:auto}
  .code.req-box{padding:16px 18px;margin:0 0 34px}
  .step{display:flex;gap:12px;align-items:flex-start;margin:0 0 14px}
  .step .num{flex:none;display:inline-flex;align-items:center;justify-content:center;
    width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--accent-fg);
    font-weight:700;font-size:14px;margin-top:1px}
  .step h3{margin:0 0 2px}
  .step p{margin:0;font-size:14.5px;color:var(--muted)}
  /* Syntax colour is the one place the greyscale pages keep hue: in a code
     box it does a job (telling a key from a value from a comment). */
  .code .fn{color:#7fd0ea}
  .code .str{color:#f0b37e}
  .code .k{color:#b9c8cf}
  .code .arg{color:#c9a6f0}
  .code .kw{color:#ef8fa6}
  /* Language tabs on the request box. Real tabs: arrow keys move between
     them, and the choice is remembered for this viewer. */
  .code .tabbar{display:flex;gap:4px;margin:-4px 0 14px;border-bottom:1px solid #27272a}
  .code .tabbar button{background:none;border:0;border-bottom:2px solid transparent;
    color:#a1a1aa;font:500 13px/1 var(--sans);
    padding:8px 12px 10px;margin-bottom:-1px;cursor:pointer}
  .code .tabbar button:hover{color:#fafafa}
  .code .tabbar button[aria-selected="true"]{color:#fafafa;border-bottom-color:#4fb3d4}
  .code .tabbar button:focus-visible{outline:2px solid #a1a1aa;outline-offset:-2px;border-radius:4px}
  .pin{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;
    border-radius:50%;background:#fafafa;color:#18181b;font:700 10.5px/1 -apple-system,
    BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;margin-left:6px;vertical-align:1px}
  .toast .pin{background:var(--accent);color:var(--accent-fg)}
  /* Step 2 stays inside the page's 940px column: a narrow JSON panel and a
     wide mock app. The app is generic software -- its own navbar, KPI cards
     with sparklines, a chart -- so the notification reads as arriving inside
     something real. Labels are deliberately bland; nothing in the app is a
     claim about water. */
  #build .embed,#connector .embed{grid-template-columns:340px minmax(0,1fr);gap:50px}
  #build .embed .code pre,#connector .embed .code pre{font-size:12.5px}
  .mockapp{border:1px solid var(--line);border-radius:14px;overflow:hidden;
    background:var(--panel);box-shadow:0 14px 36px rgba(0,0,0,.08)}
  .mockapp .bar{display:flex;align-items:center;gap:7px;padding:10px 14px;
    border-bottom:1px solid var(--line);background:var(--bg)}
  .mockapp .bar i{width:11px;height:11px;border-radius:50%;background:var(--line)}
  .mockapp .bar span{margin-left:10px;font-size:12.5px;color:var(--muted)}
  .mockapp .appnav{display:flex;align-items:center;gap:18px;padding:11px 18px;
    border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
  .mockapp .appnav .logo{width:22px;height:22px;border-radius:6px;background:var(--ink);opacity:.85}
  .mockapp .appnav b{color:var(--ink);font-weight:650;position:relative}
  .mockapp .appnav b::after{content:"";position:absolute;left:0;right:0;bottom:-12px;
    height:2px;background:var(--ink)}
  .mockapp .appnav .me{margin-left:auto;width:26px;height:26px;border-radius:50%;background:var(--line)}
  .mockapp .body{position:relative}
  .mockapp .main{padding:18px;display:grid;gap:14px;align-content:start}
  .mockapp .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .mockapp .kpi{border:1px solid var(--line);border-radius:10px;padding:10px 12px 8px}
  .mockapp .kpi span{display:block;font-size:11.5px;color:var(--muted)}
  .mockapp .kpi b{display:block;font-size:19px;font-weight:650;letter-spacing:-.01em;margin:1px 0 4px}
  .mockapp svg.spark{display:block;width:100%;height:30px;overflow:visible}
  .mockapp svg.spark .ln{fill:none;stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke;
    stroke-linejoin:round;stroke-linecap:round}
  .mockapp svg.spark .ar{fill:var(--accent-soft);stroke:none}
  .mockapp .chart{border:1px solid var(--line);border-radius:10px;padding:12px 14px}
  .mockapp .chart .t{height:9px;width:32%;border-radius:5px;background:var(--line);margin:2px 0 12px}
  .mockapp .chart svg{display:block;width:100%;height:150px}
  .mockapp .rows{display:grid;gap:8px}
  .mockapp .rows i{display:block;height:30px;border-radius:7px;background:var(--bg)}
  .mockapp .chart .grid{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
  .mockapp .chart .ln{fill:none;stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke;
    stroke-linejoin:round}
  .mockapp .chart .ln2{fill:none;stroke:var(--muted);stroke-width:1.5;stroke-dasharray:4 4;
    vector-effect:non-scaling-stroke;opacity:.7}
  .toast{position:absolute;top:128px;left:18px;width:360px;max-width:calc(100% - 36px);
    background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--accent);
    border-radius:12px;padding:16px 18px;box-shadow:0 18px 40px rgba(0,0,0,.16);z-index:1}
  .toast .top{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin:0 0 8px}
  .toast .top > b{color:var(--accent);font-weight:700}
  .toast .top span:last-child{margin-left:auto}
  .toast h4{margin:0 0 6px;font-size:17px;font-weight:650}
  .toast p{margin:0 0 12px;font-size:14px;color:var(--muted);line-height:1.45}
  .toast p.meta{margin:0 0 6px;font-size:13.5px;color:var(--ink)}
  .toast .acts{display:flex;gap:8px}
  .toast .acts span{font-size:13.5px;font-weight:600;padding:7px 13px;border-radius:8px;
    border:1px solid var(--line);color:var(--accent)}
  .toast .acts span:first-child{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
  .toast .pin,.answer .pin{background:var(--accent);color:var(--accent-fg);width:19px;height:19px;font-size:11.5px}
  .mock-note{font-size:12.5px;color:var(--muted);margin:12px 0 0}
  /* "Use Muriel in your AI harness": the same two-step picture as Build it in,
     but the destination is somebody's AI assistant rather than their app. The
     left panel is the tool call the assistant made and what Muriel returned;
     the right is the assistant's chat, with the returned fields in its answer. */
  .badge{display:inline-block;font-size:11px;font-weight:650;letter-spacing:.04em;
    text-transform:uppercase;color:var(--warn);background:var(--warn-soft);
    border-radius:6px;padding:3px 7px;margin-left:8px;vertical-align:2px}
  .mockchat{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel);
    box-shadow:0 14px 36px rgba(0,0,0,.08)}
  .mockchat .bar{display:flex;align-items:center;gap:7px;padding:10px 14px;
    border-bottom:1px solid var(--line);background:var(--bg)}
  .mockchat .bar i{width:11px;height:11px;border-radius:50%;background:var(--line)}
  .mockchat .bar span{margin-left:10px;font-size:12.5px;color:var(--muted)}
  .mockchat .convo{padding:18px;display:grid;gap:14px}
  .mockchat .you{justify-self:end;max-width:80%;background:var(--accent);color:var(--panel);
    border-radius:14px 14px 4px 14px;padding:10px 14px;font-size:14.5px}
  .mockchat .used{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);
    border:1px solid var(--line);border-radius:999px;padding:4px 11px;justify-self:start}
  .mockchat .used b{color:var(--ink);font-weight:650}
  .mockchat .used code{font:12px var(--mono);color:var(--accent)}
  .mockchat .answer{max-width:92%;font-size:14.5px;line-height:1.5}
  .mockchat .answer p{margin:0 0 8px}
  .mockchat .answer h4{margin:0 0 8px;font-size:16.5px;font-weight:650}
  .mockchat .answer .meta{font-size:14px;color:var(--ink)}
  .mockchat .answer .body{color:var(--muted)}
  .mockchat .composer{margin:4px 0 0;border:1px solid var(--line);border-radius:12px;
    padding:11px 14px;font-size:13.5px;color:var(--muted);display:flex;justify-content:space-between}
  .mockchat .composer i{width:26px;height:26px;border-radius:8px;background:var(--line);display:block;margin:-4px -6px -4px 0}
  .code .call{font-size:12.5px;margin:0 0 14px;padding:0 0 12px;border-bottom:1px solid #27272a}
  /* One button that copies a ready-made prompt for a coding assistant. The
     prompt lives in the page (inside the preview) so what is copied is exactly
     what can be read first. */
  .agent-copy{margin:26px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
  .copy-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;
    border-radius:10px;border:0;background:var(--accent);color:var(--accent-fg);cursor:pointer;flex:none;
    font:600 14.5px/1 inherit;font-family:inherit}
  .copy-btn:hover{filter:brightness(1.08)}
  .copy-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .copy-btn svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .copy-btn .i-ok{display:none}
  .copy-btn.done{background:var(--ok)}
  .copy-btn.done .i-copy{display:none}
  .copy-btn.done .i-ok{display:block}
  .agent-copy .hint{font-size:13.5px;color:var(--muted);max-width:52ch}
  .agent-copy .try-btn{height:40px;display:inline-flex;align-items:center;padding:0 18px}
  .agent-copy details{flex-basis:100%;font-size:13.5px}
  .agent-copy summary{cursor:pointer;color:var(--accent);width:max-content}
  .agent-copy pre{margin:10px 0 0;background:var(--panel);border:1px solid var(--line);
    border-radius:10px;padding:14px 16px;font:12.5px/1.55 var(--mono);white-space:pre-wrap;
    color:var(--ink);max-height:340px;overflow:auto}
  @media (max-width:880px){ #build .embed,#connector .embed{grid-template-columns:1fr;gap:18px} .embed .links{display:none} }
  @media (max-width:640px){
    .code pre.req{font-size:12px}
    .mockapp .appnav span:not(.logo){display:none}
    .mockapp .kpis{grid-template-columns:1fr 1fr}
    .mockapp .kpi:nth-child(3){display:none}
    .toast{position:relative;top:auto;right:auto;left:auto;margin:0 14px 14px;width:auto;max-width:none}
    .mockapp .body{min-height:0}
  }
  @media (max-width:760px){
    .flow{grid-template-columns:1fr}
    .flow li:not(:last-child)::after{top:auto;bottom:-12px;right:auto;left:26px;
      transform:rotate(135deg)}
  }
  .sell h3{margin:0 0 6px;font-size:19px}
  .sell .lede2{margin:0 0 16px;color:var(--muted);font-size:15px;max-width:720px}
  .ex .who{font-size:11.5px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;
    color:var(--accent);margin:0 0 6px}
  .stats{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    margin:0 0 26px}
  .stat b{display:block;font-size:30px;font-weight:660;letter-spacing:-.02em;
    line-height:1.1}
  .stat span{font-size:13.5px;color:var(--muted)}
  table{width:100%;border-collapse:collapse;font-size:14px}
  th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
  th{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;
    color:var(--muted);font-weight:600}
  td.n{text-align:right;font-family:var(--mono);white-space:nowrap}
  /* Status never by colour alone: every pill carries its word, and a shape. */
  .pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;
    font-weight:600;border-radius:99px;padding:2px 9px;white-space:nowrap}
  .pill::before{content:"";width:7px;height:7px;border-radius:50%;
    background:currentColor;flex:none}
  .pill.current{background:var(--ok-soft);color:var(--ok)}
  .pill.stale{background:var(--warn-soft);color:var(--warn)}
  /* Historical: the archive is there, it just is not refreshing. Not an alarm. */
  .pill.dead{background:var(--info-soft);color:var(--info)}
  .pill.never{background:var(--bg);color:var(--muted)}
  .plans{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
  .plan{background:var(--panel);border:1px solid var(--line);
    border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;gap:9px}
  .plan.feature{border-color:var(--accent)}
  .plan .nm{font-weight:650}
  .plan .pr{font-size:31px;font-weight:660;letter-spacing:-.025em;line-height:1}
  .plan .pr small{font-size:13.5px;font-weight:500;color:var(--muted);
    letter-spacing:0}
  .plan ul{margin:6px 0 0;padding:0 0 0 17px;color:var(--muted);font-size:14px}
  .plan li{margin:0 0 5px}
  .plan .foot{margin-top:auto;padding-top:14px}
  .callout{background:var(--warn-soft);border:1px solid var(--warn);
    border-radius:var(--radius);padding:18px 20px;margin:26px 0 0}
  .callout h3{color:var(--warn);margin:0 0 7px;font-size:15px}
  .callout p{margin:0;font-size:14.5px;color:var(--ink)}
  .muted{color:var(--muted)}
  .small{font-size:13.5px}
  footer{border-top:1px solid var(--line);background:var(--panel);
    padding:30px 22px 44px}
  footer .in{max-width:940px;margin:0 auto;font-size:13.5px;color:var(--muted)}
  footer a{color:var(--muted)}
  .loading{color:var(--muted);font-size:14px;padding:10px 0}

  /* ---- coverage map --------------------------------------------------------
     One-hue sequential ramp (light -> dark = fewer -> more), from the dataviz
     reference palette; dark mode gets its own steps, low values receding into
     the dark surface. Analyte categories use the categorical slots in a FIXED
     order, so a category is the same colour on every state's card. */
  :root{
    --seq-1:#e4e4e7; --seq-2:#a1a1aa; --seq-3:#71717a; --seq-4:#3f3f46; --seq-5:#18181b;
    --seq-none:#f4f4f5; --map-edge:#ffffff;
    --cat-bacteria:#2a78d6; --cat-dbp:#eb6834; --cat-lead_copper:#1baf7a;
    --cat-inorganic:#eda100; --cat-organic:#e87ba4; --cat-pfas:#008300;
    --cat-radio:#4a3aa7; --cat-other:#898781;
  }
  @media (prefers-color-scheme: dark){
    :root{
      --seq-1:#27272a; --seq-2:#3f3f46; --seq-3:#71717a; --seq-4:#a1a1aa; --seq-5:#e4e4e7;
      --seq-none:#18181b; --map-edge:#09090b;
      --cat-bacteria:#3987e5; --cat-dbp:#d95926; --cat-lead_copper:#199e70;
      --cat-inorganic:#c98500; --cat-organic:#d55181; --cat-pfas:#008300;
      --cat-radio:#9085e9; --cat-other:#898781;
    }
  }
  .covmap-wrap{margin:6px 0 30px}
  .covmap-head{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;
    justify-content:space-between;margin:0 0 10px}
  .seg{display:inline-flex;border:1px solid var(--line);border-radius:99px;padding:3px;
    background:var(--panel)}
  .seg button{font:inherit;font-size:13px;border:0;background:none;color:var(--muted);
    padding:6px 13px;border-radius:99px;cursor:pointer}
  .seg button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);
    font-weight:600}
  .legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:12px;
    color:var(--muted)}
  .legend .ramp{display:flex;align-items:center;gap:0}
  .legend .ramp i{display:block;width:34px;height:10px}
  .legend .ramp i:first-child{border-radius:3px 0 0 3px}
  .legend .ramp i:last-child{border-radius:0 3px 3px 0}
  .legend .ends{display:flex;justify-content:space-between;width:170px;margin-top:3px}
  .legend .none{display:inline-flex;align-items:center;gap:6px}
  .legend .none i{display:block;width:12px;height:10px;border-radius:3px;
    background:var(--seq-none);border:1px solid var(--line)}
  #covmap{height:460px;background:var(--panel);border:1px solid var(--line);
    border-radius:var(--radius);overflow:hidden}
  #covmap .leaflet-control-attribution{background:transparent;color:var(--muted);
    font-size:10.5px}
  #covmap .leaflet-control-attribution a{color:var(--muted)}
  .covmap-note{font-size:12.5px;color:var(--muted);margin:8px 0 0}
  .covmap-detail{margin:12px 0 0;display:none}
  .covmap-detail.on{display:block;background:var(--panel);border:1px solid var(--line);
    border-radius:var(--radius);padding:14px 16px}
  @media (max-width:560px){ #covmap{height:300px} }
  /* The hover card. Leaflet paints its own white tooltip; this one follows the
     page's tokens so it reads in dark mode too. */
  .leaflet-tooltip.covtt{background:var(--panel);color:var(--ink);border:1px solid var(--line);
    border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.14);padding:0;white-space:normal}
  .leaflet-tooltip.covtt::before{display:none}
  .tt{width:292px;padding:13px 14px;font-size:12.5px;line-height:1.4}
  .tt-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 9px}
  .tt-h b{font-size:15px}
  .tt-nums{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 10px}
  .tt-nums b{display:block;font-size:17px;letter-spacing:-.01em}
  .tt-nums span{color:var(--muted);font-size:11.5px}
  .tt-sub{font-size:10.5px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;
    color:var(--muted);margin:10px 0 5px}
  .tt-latest{list-style:none;margin:0;padding:0}
  .tt-latest li{display:flex;gap:8px;padding:2px 0}
  .tt-latest time{flex:0 0 46px;color:var(--muted);font-variant-numeric:tabular-nums}
  .tt-latest span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tt-mix{display:flex;gap:12px;align-items:center}
  .tt-mix svg{flex:0 0 68px}
  .tt-mix ul{list-style:none;margin:0;padding:0;flex:1;min-width:0}
  .tt-mix li{display:flex;align-items:center;gap:6px;padding:1px 0}
  .tt-mix li i{flex:0 0 9px;height:9px;border-radius:2px}
  .tt-mix li span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tt-mix li em{font-style:normal;color:var(--muted);font-variant-numeric:tabular-nums}
  .tt-foot{margin:10px 0 0;padding-top:8px;border-top:1px solid var(--line);
    color:var(--muted);font-size:11.5px}
  /* ---- coverage by contaminant ---------------------------------------------
     Same tokens as the map: category colours from --cat-*, magnitude from the
     greyscale --seq-* ramp. Text stays in ink tokens; colour marks identity. */
  .ac{display:grid;gap:18px;margin-top:4px}
  .ac-stats{margin:0 0 4px}
  .ac-stats .stat b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ac-filters{display:flex;flex-wrap:wrap;gap:8px}
  .ac-filters button{font:inherit;font-size:13px;display:inline-flex;align-items:center;gap:7px;
    border:1px solid var(--line);background:var(--panel);color:var(--muted);
    border-radius:99px;padding:6px 12px;cursor:pointer}
  .ac-filters button i{width:8px;height:8px;border-radius:50%;flex:none}
  .ac-filters button:hover{color:var(--ink)}
  .ac-filters button[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg);
    border-color:var(--accent);font-weight:600}
  .ac-grid{display:grid;gap:18px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  @media (max-width:820px){ .ac-grid{grid-template-columns:minmax(0,1fr)} }
  .ac-card{margin:0;background:var(--panel);border:1px solid var(--line);
    border-radius:var(--radius);padding:18px 18px 16px;min-width:0;box-shadow:var(--shadow-xs)}
  .ac-card figcaption{margin:0 0 14px;font-size:13px;color:var(--muted);line-height:1.45}
  .ac-card figcaption b{display:block;color:var(--ink);font-size:15px;font-weight:620;
    letter-spacing:-.01em;margin-bottom:2px}
  .ac-card figcaption .link{font:inherit;color:var(--ink);background:none;border:0;padding:0;
    text-decoration:underline;text-underline-offset:2px;cursor:pointer}
  .ac-cap-row{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:flex-end;
    justify-content:space-between}
  .ac-cap-row b{display:inline!important}
  .ac-cap-row > div > span{display:block}
  /* ranked bars: name | track | value */
  .ac-rank{display:grid;gap:3px}
  .ac-bar{display:grid;grid-template-columns:minmax(0,38%) 1fr 46px;align-items:center;gap:10px;
    font:inherit;font-size:13px;color:var(--ink);background:none;border:0;border-radius:8px;
    padding:5px 6px;margin:0 -6px;text-align:left;cursor:pointer}
  .ac-bar:hover,.ac-bar.on{background:var(--accent-soft)}
  .ac-bar.on .ac-bar-l{font-weight:620}
  .ac-bar-l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ac-bar-t{height:10px}
  .ac-bar-t i{display:block;height:100%;border-radius:0 4px 4px 0}
  .ac-bar-v{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums;font-size:12.5px}
  /* year columns */
  .ac-years svg{display:block;overflow:visible}
  .ac-years .ax text{font-size:10.5px;fill:var(--muted);font-variant-numeric:tabular-nums}
  .ac-years .ax .grid{stroke:var(--line);stroke-width:1;stroke-dasharray:2 3}
  .ac-years .ax .base{stroke:var(--ring);stroke-width:1}
  .ac-years .xhair{stroke:var(--ring);stroke-width:1}
  .ac-years .bars path{transition:opacity .12s}
  .ac-years .bars path.dim{opacity:.35}
  /* heatmap */
  .ac-heat-scroll{overflow-x:auto;margin:0 -4px;padding:0 4px 4px}
  .ac-heat{display:grid;grid-template-columns:minmax(150px,200px) repeat(var(--cols,32),minmax(19px,1fr)) auto;
    gap:2px;min-width:calc(240px + var(--cols,32) * 21px);font-size:12px}
  .ac-heat-corner{position:sticky;left:0;background:var(--panel);z-index:1}
  .ac-heat-col{text-align:center;color:var(--muted);font-size:10.5px;padding:0 0 4px;
    font-variant-numeric:tabular-nums}
  .ac-heat-row{position:sticky;left:0;z-index:1;display:flex;align-items:center;gap:7px;
    font:inherit;font-size:12.5px;color:var(--ink);background:var(--panel);border:0;
    padding:0 8px 0 0;text-align:left;cursor:pointer;min-width:0}
  .ac-heat-row i{width:8px;height:8px;border-radius:2px;flex:none}
  .ac-heat-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ac-heat-row:hover span,.ac-heat-row.on span{text-decoration:underline;text-underline-offset:2px}
  .ac-heat-row.on{font-weight:620}
  .ac-cell{height:20px;border-radius:3px}
  .ac-cell:hover{outline:2px solid var(--ink);outline-offset:-1px}
  /* Explore: the way from a contaminant to the agent */
  .ac-explore,.ac-heat-go{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;
    font-weight:550;color:var(--ink);text-decoration:none;border:1px solid var(--line);
    background:var(--panel);border-radius:7px;padding:4px 10px;white-space:nowrap}
  .ac-explore::after,.ac-heat-go::after{content:"\2192";color:var(--muted)}
  .ac-explore:hover,.ac-heat-go:hover{background:var(--accent);color:var(--accent-fg);
    border-color:var(--accent)}
  .ac-explore:hover::after,.ac-heat-go:hover::after{color:inherit}
  .ac-explore:focus-visible,.ac-heat-go:focus-visible{outline:2px solid var(--ring);outline-offset:1px}
  .ac-heat-go{font-size:11.5px;padding:1px 8px;margin-left:6px;align-self:center}
  td.ac-go{text-align:right;width:1%}
  .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* table */
  .ac-table{overflow-x:auto}
  .ac-table table{font-size:13.5px}
  .ac-table tbody tr{cursor:pointer}
  .ac-table tbody tr:hover,.ac-table tbody tr.on{background:var(--accent-soft)}
  .ac-table tbody tr:focus-visible{outline:2px solid var(--ring);outline-offset:-2px}
  .ac-name{display:flex;align-items:center;gap:8px;font-weight:550}
  .ac-name i{width:8px;height:8px;border-radius:2px;flex:none}
  .ac-cat{display:block;color:var(--muted);font-size:12px;margin-left:16px}
  .ac-span{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--muted)}
  .ac-sp{width:104px}
  .ac-sp svg{display:block}
  @media (max-width:640px){ .ac-sp,.ac-sp-h{display:none}
    .ac-bar{grid-template-columns:minmax(0,50%) 1fr 40px;gap:8px} }
  #ac-search{font:inherit;font-size:13.5px;border:1px solid var(--line);background:var(--page);
    color:var(--ink);border-radius:8px;padding:7px 11px;width:220px;max-width:100%}
  #ac-search:focus{outline:2px solid var(--ring);outline-offset:1px}
  .ac-more{margin:12px 0 0;font:inherit;font-size:13.5px;border:1px solid var(--line);
    background:var(--panel);color:var(--ink);border-radius:8px;padding:7px 14px;cursor:pointer}
  .ac-more:hover{background:var(--accent-soft)}
  /* tooltip */
  .ac-tip{position:fixed;z-index:60;pointer-events:none;background:var(--panel);color:var(--ink);
    border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.14);
    padding:10px 12px;font-size:12.5px;line-height:1.45;min-width:180px;max-width:280px}
  .ac-tip b{display:block;font-size:13.5px;margin-bottom:5px}
  .ac-tip div{display:flex;justify-content:space-between;gap:16px}
  .ac-tip span{color:var(--muted)}
  .ac-tip em{font-style:normal;font-variant-numeric:tabular-nums}
  @media (max-width:560px){ h1{font-size:31px} .lede{font-size:17px} }

/* ---- Products menu --------------------------------------------------------
   One button, one panel, two audiences. The panel is plain links, so with
   scripting off it still reads as a list (the button just does nothing). */
.menu{position:relative}
.menu > button{background:none;border:0;font:inherit;font-size:14px;color:var(--muted);
  cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:5px}
.menu > button:hover,.menu > button[aria-expanded="true"]{color:var(--accent)}
.menu > button svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2.2;
  transition:transform .15s}
.menu > button[aria-expanded="true"] svg{transform:rotate(180deg)}
.menu .panel{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
  width:560px;max-width:calc(100vw - 32px);background:var(--panel);border:1px solid var(--line);
  border-radius:14px;box-shadow:0 18px 44px rgba(0,0,0,.12);padding:16px;
  display:grid;grid-template-columns:1fr 1.25fr;gap:14px;z-index:30}
.menu .panel[hidden]{display:none}
.menu .grp-h{font-size:11px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:2px 10px 6px}
.menu .panel a{display:block;text-decoration:none;color:var(--ink);border-radius:10px;
  padding:9px 10px}
.menu .panel a:hover,.menu .panel a:focus-visible{background:var(--accent-soft);outline:none}
.menu .panel a b{display:block;font-size:14.5px;font-weight:650}
.menu .panel a span{display:block;font-size:13px;color:var(--muted);line-height:1.4;margin-top:2px}
.menu .panel a span.badge{display:inline-block;margin:0 0 0 6px;font-size:10px;padding:2px 5px;
  color:var(--warn);vertical-align:1px}
.menu .teams{background:var(--bg);border-radius:10px;padding:6px 4px}
@media (max-width:640px){
  .menu .panel{position:fixed;top:64px;left:16px;right:16px;width:auto;transform:none;
    grid-template-columns:1fr}
}
.dev-link{margin:26px 0 0;font-size:15px;color:var(--muted)}
.dev-link a{font-weight:600}
/* ---- Developer page ---------------------------------------------------- */
.research{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr));margin:6px 0 0}
@media (max-width:640px){ .research{grid-template-columns:1fr} }
.research div{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.research h3{font-size:16px}
.research p{margin:0;font-size:14.5px;color:var(--muted)}
.research code{font:13px var(--mono);color:var(--ink)}

/* ---- Agent product page ------------------------------------------------ */
.eyebrow{font-size:13px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent);margin:0 0 12px}
.feature-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.feature-grid > div{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px}
.feature-grid h3{font-size:16px}
.feature-grid p{margin:0;font-size:14.5px;color:var(--muted)}
.theme-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.ask-more{display:flex;justify-content:center;margin-top:32px}
.theme-col .grp-h{font-size:11.5px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:0 0 8px}
.ask{display:block;text-decoration:none;color:var(--ink);background:var(--panel);
  border:1px solid var(--line);border-radius:10px;padding:10px 13px;margin:0 0 8px;
  font-size:14.5px;line-height:1.4}
.ask:hover,.ask:focus-visible{border-color:var(--accent);color:var(--accent);outline:none}
.ask::after{content:" \2192";color:var(--accent)}
#start .row{display:flex;gap:12px;flex-wrap:wrap}
/* Four audiences read as a 2x2, not three-and-an-orphan. */
#who .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){ #who .feature-grid{grid-template-columns:1fr} }
/* ---- Home: the data ---------------------------------------------------- */
.data-grid{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
.data-grid > div{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px}
.data-grid h3{font-size:16px}
.data-grid p{margin:0;font-size:14.5px;color:var(--muted)}
.data-grid p b{color:var(--ink);font-weight:600}
.data-not{margin:16px 0 0;font-size:14px;color:var(--muted);max-width:75ch}
.data-not b{color:var(--ink)}
@media (max-width:640px){ .data-grid{grid-template-columns:1fr} }
/* ---- Brand mark: many sources converging into one answer ---------------- */
header .brand{display:inline-flex;align-items:center;gap:9px}
.mark{flex:none}
.mark .tile{fill:var(--accent)}
.mark .lines{fill:none;stroke:var(--panel);stroke-width:2.3;stroke-linecap:round}
.mark .node{fill:var(--panel)}
/* ---- Company page --------------------------------------------------------- */
.stack{display:grid;gap:10px;margin:8px 0 0}
.stack .layer{border-radius:var(--radius);padding:16px 18px}
.stack .products{display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr));padding:0}
.stack .products a{display:block;text-decoration:none;color:var(--ink);background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.stack .products a:hover{border-color:var(--accent)}
.stack .products b{display:block;font-size:16px;margin:0 0 6px}
.stack .products span{display:block;font-size:14px;color:var(--muted)}
.stack .products span.badge{display:inline-block;color:var(--warn);font-size:10px;margin-left:6px}
.stack .products em{display:block;font-style:normal;font-size:12px;font-weight:650;letter-spacing:.04em;
  text-transform:uppercase;color:var(--accent);margin-top:10px}
.stack .core{background:var(--accent);color:var(--accent-fg)}
.stack .core b{display:block;font-size:17px}
.stack .core span{font-size:14.5px;opacity:.9}
.stack .sources{background:var(--accent-soft);border:1px dashed var(--accent)}
.stack .sources b{display:block;font-size:15.5px}
.stack .sources span{font-size:14px;color:var(--muted)}

.person{display:flex;gap:20px;align-items:flex-start;max-width:760px}
.person .avatar{flex:none;width:72px;height:72px;border-radius:50%;background:var(--accent-soft);
  color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:22px}
.person p{color:var(--muted);margin:0 0 10px}
@media (max-width:760px){ .stack .products{grid-template-columns:1fr} }

/* ---- Motion -----------------------------------------------------------------
   Small, purposeful animation: data visibly moving from where it starts to
   where it is used. Everything here stops for anyone who has asked their
   system for reduced motion. */
@keyframes flowdash{to{stroke-dashoffset:-24}}
@keyframes stepglow{0%,22%{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
  30%,100%{border-color:var(--line);box-shadow:none}}
@keyframes nudge{0%,100%{opacity:.45;translate:0 0}50%{opacity:1;translate:3px 0}}
/* Company page: sources converge into the platform, which feeds each product. */
.stack .flowline{display:block;width:100%;height:34px;margin:-4px 0}
.stack .flowline:last-of-type{height:44px}
.stack .flowline path{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:6 6;
  vector-effect:non-scaling-stroke;animation:flowdash 1.2s linear infinite reverse}
@media (max-width:760px){ .stack .flowline:first-of-type{display:none} }
/* Overview: a sample travels the five steps from tap to Muriel. */
.flow li{animation:stepglow 10s ease-in-out infinite}
.flow li:nth-child(2){animation-delay:2s}
.flow li:nth-child(3){animation-delay:4s}
.flow li:nth-child(4){animation-delay:6s}
.flow li:nth-child(5){animation-delay:8s}
.flow li:not(:last-child)::after,
.schema > div:not(:last-child)::after{animation:nudge 1.6s ease-in-out infinite}
/* Integration diagrams: the arrows carry the data. */
.embed .links path{stroke-dasharray:7 5;animation:flowdash 1s linear infinite}
@media (prefers-reduced-motion: reduce){
  .stack .flowline path,.flow li,.flow li::after,.schema > div::after,.embed .links path{animation:none!important}
}

/* ---- Product screenshots and the demo video ------------------------------ */
.shot{margin:28px 0 0;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:var(--panel);box-shadow:0 18px 50px rgba(0,0,0,.10)}
.shot-bar{display:flex;align-items:center;gap:7px;padding:9px 14px;background:var(--bg);
  border-bottom:1px solid var(--line)}
.shot-bar i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.shot-bar span{margin-left:10px;font:12px var(--mono);color:var(--muted)}
.shot img,.shot video{display:block;width:100%;height:auto}
.shot figcaption{font-size:13px;color:var(--muted);padding:10px 14px;border-top:1px solid var(--line)}
.hero .shot{margin-top:34px}

/* ---- MCP reference (developers page) --------------------------------------
   A reference, so it reads like documentation: a table of contents that stays
   in view on a wide screen, real headings, tables that scroll sideways on a
   phone rather than squashing their code. */
.code .cm{color:#8b9aa1}
.code .lbl .trim{font-weight:400;letter-spacing:0;text-transform:none;opacity:.7}
.docs{font-size:15px;line-height:1.6}
.docs > h3{font-size:21px;letter-spacing:-.015em;margin:44px 0 12px;scroll-margin-top:84px}
.docs h4{font-size:15.5px;margin:22px 0 6px;font-weight:650}
.docs p{margin:0 0 12px;max-width:72ch}
.docs ol,.docs ul{margin:0 0 14px;padding-left:22px;max-width:72ch}
.docs li{margin:4px 0}
.docs :not(pre)>code{font:13px var(--mono);background:var(--accent-soft);
  color:var(--ink);padding:1px 5px;border-radius:5px;word-break:break-word}
.docs .note{font-size:13.5px;color:var(--muted)}
.docs .toc{display:flex;flex-wrap:wrap;gap:6px 8px;margin:0 0 6px}
.docs .toc a{font-size:13.5px;text-decoration:none;color:var(--accent);
  border:1px solid var(--line);border-radius:99px;padding:4px 11px;background:var(--panel)}
.docs .toc a:hover{border-color:var(--accent)}
.docs .table-wrap{overflow-x:auto;margin:0 0 14px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--panel)}
.docs table{font-size:14px}
.docs table th[scope=row]{width:30%;min-width:150px;font-size:12px;vertical-align:top}
.docs table td{vertical-align:top}
.docs table tr:last-child>*{border-bottom:0}
.docs table.tools td:first-child{white-space:nowrap}
.docs table.tools td.group{font-size:11.5px;font-weight:650;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);background:var(--bg);padding-top:10px}
.docs .cols{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin:0 0 12px}
.docs .cols > div{border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px 4px;background:var(--panel)}
.docs .cap{font-size:12px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);margin:0 0 6px}
.docs .prompts li{color:var(--ink)}
.docs dl.faq{margin:0 0 14px;max-width:72ch}
.docs dl.faq dt{font-weight:650;margin:16px 0 4px}
.docs dl.faq dd{margin:0;color:var(--muted)}
@media (max-width:640px){ .docs > h3{font-size:19px} .docs table th[scope=row]{min-width:110px} }
.docs pre.plain{font:12.5px/1.5 var(--mono);background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:12px 14px;overflow-x:auto;margin:0 0 12px;white-space:pre}


/* =========================================================================
   shadcn layer: card, badge and surface treatments applied across the pages.
   Kept last so it settles the look without touching any page's markup.
   ========================================================================= */
.flow-title{font-size:clamp(28px,3.4vw,40px);line-height:1.12;letter-spacing:-.035em;
  font-weight:650;margin:0 0 14px;max-width:24ch;text-wrap:balance}
.flow-lede,.sell .lede2{font-size:17px;line-height:1.55}
/* Every card: hairline border, 12px radius, the faintest shadow. */
.ex,.feature-grid > div,.data-grid > div,.research div,.plan,.flow li,.out,.portal,
.stack .products a,.docs .cols > div,.covmap-detail.on,.mockapp,.mockchat,.hub{
  border-color:var(--line);box-shadow:var(--shadow-xs)}
.ex,.feature-grid > div,.data-grid > div,.research div,.plan,.stack .products a{
  padding:22px 22px 20px;border-radius:var(--radius);transition:border-color .15s,box-shadow .15s}
.ex:hover,.feature-grid > div:hover,.data-grid > div:hover,.research div:hover,.stack .products a:hover{
  border-color:var(--ring)}
.feature-grid,.data-grid,.research,.examples{gap:16px}
.grid{gap:28px}
.ex .who,.stack .products em{color:var(--muted);font-weight:600}
/* Plain text, not a pill: a bordered chip above the headline read as a button
   people tried to click. */
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin:0 0 18px}
/* Badges ("New"): secondary badge, no hue. */
.badge,.menu .panel a span.badge,.stack .products span.badge{color:var(--ink);background:var(--accent-soft);
  border:1px solid var(--line);border-radius:6px;font-weight:600;letter-spacing:.02em}
/* Alert instead of a coloured callout. */
.callout{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-xs)}
.callout h3{color:var(--ink)}
/* Lists of questions: outline buttons with a trailing arrow. */
.ask{border-radius:10px;padding:12px 14px;box-shadow:var(--shadow-xs);transition:background .15s,border-color .15s}
.ask:hover,.ask:focus-visible{border-color:var(--ring);color:var(--ink);background:var(--accent-soft)}
.ask::after{color:var(--muted)}
/* Steps and stats */
.flow li::before{background:var(--ink);color:var(--page)}
.flow li.muriel{border-color:var(--ink);background:var(--accent-soft)}
.flow li.muriel::before{background:var(--ink)}
.flow .when{color:var(--muted)}
.speed div{border-left:2px solid var(--ink)}
.stat b{font-weight:650;letter-spacing:-.035em;font-size:34px}
.step .num{background:var(--ink);color:var(--page);font-weight:600}
/* Plans */
.plan.feature{border-color:var(--ink);box-shadow:var(--shadow-lg)}
.plan .pr{letter-spacing:-.04em}
/* Segmented control and tabs (the coverage map) */
.seg{background:var(--accent-soft);border-color:var(--line);padding:3px}
.seg button{border-radius:999px;font-weight:500}
.seg button[aria-pressed="true"]{background:var(--panel);color:var(--ink);box-shadow:var(--shadow-xs)}
/* Tables */
th{color:var(--muted);font-weight:500;text-transform:none;letter-spacing:0;font-size:12.5px}
/* Menu */
.menu .panel{border-radius:12px;box-shadow:var(--shadow-lg);padding:12px}
.menu .panel a:hover,.menu .panel a:focus-visible{background:var(--accent-soft)}
.menu .teams{background:var(--bg);border:1px solid var(--line)}
/* Company stack */
.stack .core{background:var(--ink);color:var(--page)}
.stack .sources{background:var(--bg);border:1px dashed var(--ring)}
.person .avatar{background:var(--accent-soft);color:var(--ink);border:1px solid var(--line)}
/* Docs */
.docs :not(pre)>code{background:var(--accent-soft);border:1px solid var(--line)}
.docs .toc a{color:var(--ink);font-weight:500;box-shadow:var(--shadow-xs)}
.docs .toc a:hover{background:var(--accent-soft);border-color:var(--line)}
.docs .table-wrap{box-shadow:var(--shadow-xs)}
.agent-copy summary{color:var(--ink)}
.copy-btn{border-radius:8px;font-weight:500;box-shadow:var(--shadow-xs)}
.copy-btn.done{background:var(--accent)}
/* Screenshots and mock windows */
.shot{border-radius:16px;box-shadow:var(--shadow-lg)}
.shot-bar{background:var(--bg)}
.mockapp,.mockchat{box-shadow:var(--shadow-lg)}
.toast{border-left-width:1px;box-shadow:var(--shadow-lg)}
.toast .top > b{color:var(--ink)}
.toast .acts span{color:var(--ink);border-radius:8px}
.out h4 span{color:var(--ink);background:var(--accent-soft);border:1px solid var(--line)}
/* Footer */
footer{background:var(--page);padding:40px 22px 56px}
footer .in{max-width:1080px}
footer a{text-decoration-color:var(--line)}
@media (max-width:640px){
  section{padding:64px 0}
  .hero{padding:64px 0 56px}
  header{padding:10px 16px}
}

/* In-page jumps (the Developers "Get started" button) glide rather than cut,
   and land with the section title clear of the sticky header. */
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }
main section[id]{scroll-margin-top:72px}
.agent-copy.agent-copy-top{margin:4px 0 34px;padding:18px 20px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--bg)}
@media (max-width:640px){ main section[id]{scroll-margin-top:150px} }