:root{
    --paper:#EFF1F3;
    --surface:#FFFFFF;
    --surface-2:#F7F8F9;
    --ink:#131820;
    --ink-soft:#525C69;
    --line:#D3D7DD;
    --line-soft:#E3E6EA;
    --accent:#1F6A57;
    --accent-ink:#134437;
    --accent-soft:#E2EDE9;
    --gold:#8C6C24;
    --gold-soft:#F0E9D8;
    --shadow:0 1px 2px rgba(19,24,32,.05), 0 8px 24px -16px rgba(19,24,32,.28);
    --spine:min(100%, 680px);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --paper:#0F1319;
      --surface:#161B22;
      --surface-2:#1B212A;
      --ink:#E7EAEE;
      --ink-soft:#98A2AE;
      --line:#2A313B;
      --line-soft:#222932;
      --accent:#63BCA0;
      --accent-ink:#A9DCCA;
      --accent-soft:#162B25;
      --gold:#C9A65C;
      --gold-soft:#2A2418;
      --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -18px rgba(0,0,0,.9);
    }
  }
  :root[data-theme="dark"]{
    --paper:#0F1319;
    --surface:#161B22;
    --surface-2:#1B212A;
    --ink:#E7EAEE;
    --ink-soft:#98A2AE;
    --line:#2A313B;
    --line-soft:#222932;
    --accent:#63BCA0;
    --accent-ink:#A9DCCA;
    --accent-soft:#162B25;
    --gold:#C9A65C;
    --gold-soft:#2A2418;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -18px rgba(0,0,0,.9);
  }

  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:"Source Serif 4", Georgia, "Times New Roman", serif;
    font-size:17px;
    line-height:1.62;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{
    width:100%;
    max-width:1080px;
    margin:0 auto;
    padding-inline:20px;
  }
  h1,h2,h3,.sans{font-family:"Archivo", "Helvetica Neue", Arial, sans-serif;}
  h1,h2,h3{text-wrap:balance; margin:0;}
  p{margin:0;}
  a{color:inherit;}
  .mono{font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;}

  /* ---------- header ---------- */
  header.site{
    border-bottom:1px solid var(--line);
    background:var(--paper);
    position:sticky;
    top:env(safe-area-inset-top, 0px);
    z-index:20;
  }
  .headrow{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:10px 22px;
    padding-block:14px;
  }
  .mark{
    font-family:"Archivo", sans-serif;
    font-weight:700;
    font-size:17px;
    letter-spacing:-.022em;
    text-decoration:none;
    display:flex;
    align-items:baseline;
    gap:9px;
  }
  .mark .dot{
    width:7px;height:7px;border-radius:50%;
    background:var(--accent);
    display:inline-block;
    transform:translateY(-1px);
  }
  .mark small{
    font-family:"IBM Plex Mono", monospace;
    font-weight:400;
    font-size:10.5px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--ink-soft);
  }
  nav.site{
    margin-left:auto;
    display:flex;
    flex-wrap:wrap;
    gap:4px 2px;
  }
  nav.site a{
    font-family:"IBM Plex Mono", monospace;
    font-size:11.5px;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--ink-soft);
    text-decoration:none;
    padding:6px 10px;
    border-radius:2px;
    white-space:nowrap;
  }
  nav.site a:hover{color:var(--ink); background:var(--surface);}
  nav.site a[aria-current="page"]{
    color:var(--accent-ink);
    background:var(--accent-soft);
  }
  nav.site a:focus-visible, a:focus-visible, button:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
  }

  /* ---------- page scaffolding ---------- */
  main{display:block;}
  .band{padding-block:58px; border-bottom:1px solid var(--line-soft);}
  .band.tight{padding-block:40px;}
  .band.last{border-bottom:0;}

  .sect{
    display:grid;
    grid-template-columns:1fr;
    gap:14px 40px;
  }
  @media (min-width:900px){
    .sect{grid-template-columns:170px minmax(0,var(--spine));}
  }
  .rail{
    font-family:"IBM Plex Mono", monospace;
    font-size:11px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--ink-soft);
    padding-top:6px;
    border-top:2px solid var(--ink);
    align-self:start;
  }
  .spine{max-width:var(--spine);}
  .spine > * + *{margin-top:18px;}

  h1{
    font-size:clamp(34px, 6.4vw, 56px);
    font-weight:700;
    letter-spacing:-.033em;
    line-height:1.05;
  }
  h2{
    font-size:clamp(23px, 3.2vw, 30px);
    font-weight:600;
    letter-spacing:-.024em;
    line-height:1.18;
  }
  h3{
    font-size:17px;
    font-weight:600;
    letter-spacing:-.012em;
  }
  .lede{font-size:clamp(18px,2.1vw,20.5px); line-height:1.55;}
  .eyebrow{
    font-family:"IBM Plex Mono", monospace;
    font-size:11px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--ink-soft);
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
  }
  .eyebrow .bar{width:26px;height:1px;background:var(--accent);display:inline-block;}
  .soft{color:var(--ink-soft);}

  /* ---------- hero ---------- */
  .hero{padding-block:clamp(44px,7vw,84px) 34px;}
  .hero h1{margin-top:20px;}
  .hero .lede{margin-top:22px; max-width:600px; color:var(--ink-soft);}
  .cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px;}
  .btn{
    font-family:"IBM Plex Mono", monospace;
    font-size:12px;
    letter-spacing:.08em;
    text-transform:uppercase;
    text-decoration:none;
    padding:12px 18px;
    border:1px solid var(--accent);
    border-radius:2px;
    background:var(--accent);
    color:#fff;
    transition:opacity .15s ease;
  }
  :root[data-theme="dark"] .btn{color:#0F1319;}
  @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn{color:#0F1319;}}
  .btn:hover{opacity:.86;}
  .btn.ghost{
    background:transparent;
    color:var(--ink);
    border-color:var(--line);
  }
  :root[data-theme="dark"] .btn.ghost{color:var(--ink);}
  @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn.ghost{color:var(--ink);}}
  .btn.ghost:hover{border-color:var(--ink); opacity:1;}

  /* ---------- flow diagram ---------- */
  .diagram-holder{
    border:1px solid var(--line);
    background:var(--surface);
    border-radius:3px;
    box-shadow:var(--shadow);
    overflow:hidden;
  }
  .diagram-cap{
    display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;
    padding:13px 16px;
    border-bottom:1px solid var(--line-soft);
    font-family:"IBM Plex Mono", monospace;
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--ink-soft);
  }
  .diagram-cap b{color:var(--ink); font-weight:500;}
  .diagram-scroll{overflow-x:auto;}
  .diagram-scroll svg{display:block; min-width:660px; width:100%; height:auto;}
  .legend{
    display:flex;flex-wrap:wrap;gap:8px 20px;
    padding:12px 16px;
    border-top:1px solid var(--line-soft);
    font-family:"IBM Plex Mono", monospace;
    font-size:11px;
    color:var(--ink-soft);
  }
  .legend span{display:flex;align-items:center;gap:7px;}
  .swatch{width:10px;height:10px;border-radius:2px;display:inline-block;}
  .swatch.manual{background:transparent;border:1.5px dashed var(--gold);}
  .swatch.auto{background:var(--accent);}

  /* A typographic row of products worked on. Names rather than logo files:
     the marks belong to their owners and we have no licence to ship them. */
  .marks-cap{
    font-family:"IBM Plex Mono", ui-monospace, monospace;
    font-size:11px;letter-spacing:1.7px;text-transform:uppercase;
    color:var(--ink-soft);margin-bottom:16px;
  }
  .marks-row{
    list-style:none;margin:0;padding:0;
    display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px;
  }
  .marks-row li{
    font-family:"Archivo", system-ui, sans-serif;
    font-weight:600;font-size:18px;letter-spacing:.15px;
    color:var(--ink);opacity:.8;
  }
  .marks-note{
    margin-top:16px;color:var(--ink-soft);
    font-size:14.5px;line-height:1.55;
  }
  @media (max-width:640px){
    .marks-row{gap:10px 22px;}
    .marks-row li{font-size:16px;}
  }
  @keyframes flowdot{
    0%{transform:translateX(0)}
    12%{transform:translateX(175px)}
    26%{transform:translateX(175px)}
    36%{transform:translateX(350px)}
    45%{transform:translateX(350px)}
    55%{transform:translateX(525px)}
    80%{transform:translateX(525px)}
    92%{transform:translateX(700px)}
    100%{transform:translateX(700px)}
  }
  .flowdot{
    transform-box:view-box;
    transform-origin:0 0;
    animation:flowdot 9.5s cubic-bezier(.65,.02,.32,1) infinite;
  }
  @media (prefers-reduced-motion: reduce){
    .flowdot{animation:none;}
  }

  /* ---------- content pieces ---------- */
  .cards{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    border-radius:3px;
    overflow:hidden;
  }
  .card{
    background:var(--surface);
    padding:22px 20px 24px;
    display:flex;
    flex-direction:column;
    gap:9px;
  }
  .card .num{
    font-family:"IBM Plex Mono", monospace;
    font-size:11px;
    letter-spacing:.1em;
    color:var(--accent);
  }
  .card p{font-size:15.5px; line-height:1.55; color:var(--ink-soft);}

  ol.steps{list-style:none; margin:0; padding:0;}
  ol.steps li{
    display:grid;
    grid-template-columns:44px minmax(0,1fr);
    gap:0 18px;
    padding-bottom:26px;
    position:relative;
  }
  ol.steps li::before{
    content:"";
    position:absolute;
    left:13px; top:26px; bottom:0;
    width:1px;
    background:var(--line);
  }
  ol.steps li:last-child{padding-bottom:0;}
  ol.steps li:last-child::before{display:none;}
  ol.steps .step-n{
    font-family:"IBM Plex Mono", monospace;
    font-size:11px;
    color:var(--accent-ink);
    background:var(--accent-soft);
    border-radius:2px;
    width:27px;height:27px;
    display:flex;align-items:center;justify-content:center;
    letter-spacing:.02em;
  }
  ol.steps h3{margin-bottom:5px; padding-top:2px;}
  ol.steps p{color:var(--ink-soft); font-size:16px;}

  ul.signals{
    list-style:none;margin:0;padding:0;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
    gap:0 34px;
  }
  ul.signals li{
    padding:12px 0;
    border-bottom:1px solid var(--line-soft);
    display:grid;
    grid-template-columns:22px minmax(0,1fr);
    gap:10px;
    font-size:16px;
    line-height:1.5;
  }
  ul.signals li::before{
    content:"→";
    font-family:"IBM Plex Mono", monospace;
    font-size:12px;
    color:var(--gold);
    line-height:1.75;
  }

  ul.plain{list-style:none;margin:0;padding:0;}
  ul.plain li{
    padding:11px 0;
    border-bottom:1px solid var(--line-soft);
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:12px;
    font-size:16px;
  }
  ul.plain li::before{
    content:"—";
    font-family:"IBM Plex Mono", monospace;
    color:var(--accent);
    font-size:13px;
    line-height:1.7;
  }

  .note{
    border-left:2px solid var(--accent);
    background:var(--surface-2);
    padding:16px 18px;
    border-radius:0 3px 3px 0;
    font-size:16px;
    color:var(--ink-soft);
  }

  .panel{
    border:1px solid var(--line);
    background:var(--surface);
    border-radius:3px;
    padding:24px 22px;
    box-shadow:var(--shadow);
  }
  .panel + .panel{margin-top:16px;}
  .kv{
    display:grid;
    grid-template-columns:1fr;
    gap:0;
  }
  .kv div{
    display:grid;
    grid-template-columns:130px minmax(0,1fr);
    gap:14px;
    padding:11px 0;
    border-bottom:1px solid var(--line-soft);
    font-size:16px;
    align-items:baseline;
  }
  .kv div:last-child{border-bottom:0;}
  .kv dt, .kv .k{
    font-family:"IBM Plex Mono", monospace;
    font-size:11px;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--ink-soft);
  }
  @media (max-width:520px){
    .kv div{grid-template-columns:1fr; gap:3px;}
  }

  .ph{
    font-family:"IBM Plex Mono", monospace;
    font-size:.86em;
    color:var(--gold);
    background:var(--gold-soft);
    border-bottom:1px dotted var(--gold);
    padding:1px 5px;
    border-radius:2px;
    white-space:normal;
  }

  .inline-link{
    color:var(--accent-ink);
    text-decoration:none;
    border-bottom:1px solid var(--accent);
    padding-bottom:1px;
  }
  .inline-link:hover{background:var(--accent-soft);}

  footer.site{
    border-top:1px solid var(--line);
    padding-block:26px 34px;
    font-family:"IBM Plex Mono", monospace;
    font-size:11.5px;
    letter-spacing:.05em;
    color:var(--ink-soft);
    display:flex;
    flex-wrap:wrap;
    gap:10px 24px;
    align-items:baseline;
  }
  footer.site a{text-decoration:none;}
  footer.site a:hover{color:var(--ink);}
  footer.site .spacer{margin-left:auto;}