:root{
    --paper:#fbfbfa;
    --ink:#111111;
    --body:#4e4e4c;
    --faint:#8a8a86;
    --rule:#dedddA;
    --rule-soft:#ebeae7;
    --invert-bg:#111111;
    --invert-ink:#fbfbfa;
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --paper:#101010; --ink:#f4f3f1; --body:#a6a5a1; --faint:#77766f;
      --rule:#2b2b29; --rule-soft:#1e1e1c;
      --invert-bg:#f4f3f1; --invert-ink:#101010;
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"]{
    --paper:#101010; --ink:#f4f3f1; --body:#a6a5a1; --faint:#77766f;
    --rule:#2b2b29; --rule-soft:#1e1e1c;
    --invert-bg:#f4f3f1; --invert-ink:#101010;
    color-scheme: dark;
  }

  *{ box-sizing:border-box }
  html{ scroll-behavior:smooth }
  @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } *{ transition:none !important } }

  body{
    margin:0; background:var(--paper); color:var(--body);
    font-family:Archivo, "Helvetica Neue", Arial, sans-serif;
    font-size:18px; line-height:1.6; font-weight:400;
    -webkit-font-smoothing:antialiased;
  }

  .wrap{ max-width:1200px; margin:0 auto; padding-inline:clamp(20px, 4vw, 56px) }

  /* ---------- mono utility face ---------- */
  .mono{
    font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size:.75rem; font-weight:500; letter-spacing:.07em; text-transform:uppercase;
  }

  h1,h2,h3{ color:var(--ink); margin:0; font-weight:500 }
  h1{
    font-size:clamp(2.6rem, 7.4vw, 5.1rem);
    line-height:1.02; letter-spacing:-.04em; font-weight:400;
    text-wrap:balance;
  }
  h2{
    font-size:clamp(1.9rem, 4.2vw, 3rem);
    line-height:1.08; letter-spacing:-.032em; font-weight:400;
    text-wrap:balance;
  }
  h3{ font-size:1.25rem; line-height:1.25; letter-spacing:-.018em; font-weight:500 }
  p{ margin:0 }
  a{ color:var(--ink) }

  /* ---------- header ---------- */
  .top{
    position:sticky; top:env(safe-area-inset-top, 0px); z-index:50;
    background:var(--paper); border-bottom:1px solid var(--rule);
  }
  .top-in{ display:flex; align-items:center; justify-content:space-between; gap:22px; height:64px }
  .brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink) }
  .brand svg{ width:21px; height:21px; flex:none }
  .brand .bn{
    font-family:"JetBrains Mono", ui-monospace, monospace;
    font-size:.78rem; font-weight:500; letter-spacing:.04em; white-space:nowrap;
  }
  .topnav{ display:flex; align-items:center; gap:clamp(16px, 2.6vw, 34px) }
  .topnav a{
    font-family:"JetBrains Mono", ui-monospace, monospace;
    font-size:.72rem; font-weight:400; letter-spacing:.07em; text-transform:uppercase;
    color:var(--faint); text-decoration:none; transition:color .15s;
  }
  .topnav a:hover{ color:var(--ink) }
  @media (max-width:720px){ .topnav .opt{ display:none } }

  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
    outline:2px solid var(--ink); outline-offset:3px;
  }

  /* ---------- buttons ---------- */
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    background:var(--invert-bg); color:var(--invert-ink);
    font-family:"JetBrains Mono", ui-monospace, monospace;
    font-size:.78rem; font-weight:500; letter-spacing:.05em; text-transform:uppercase;
    padding:15px 26px; border:1px solid var(--invert-bg); border-radius:0;
    text-decoration:none; cursor:pointer; transition:opacity .15s;
  }
  .btn:hover{ opacity:.82 }
  .btn-o{ background:transparent; color:var(--ink); border-color:var(--rule) }
  .btn-o:hover{ border-color:var(--ink); opacity:1 }

  /* ---------- rhythm ---------- */
  section{ scroll-margin-top:84px }
  .pad{ padding-block:clamp(72px, 11vw, 150px) }
  .edge{ border-top:1px solid var(--rule) }

  .kicker{ color:var(--faint); margin-bottom:clamp(26px, 4vw, 46px) }
  .lede{ font-size:clamp(1.125rem, 1.7vw, 1.375rem); line-height:1.5; color:var(--body); max-width:50ch;
         text-wrap:pretty }

  /* ---------- hero ---------- */
  .hero{ padding-block:clamp(78px, 13vw, 190px) }
  /* Headline left, lede and buttons right, their blocks ending on the same
     line. Collapses to one column before the headline gets squeezed. */
  .hero-in{
    display:grid; gap:clamp(34px, 5vw, 78px);
    grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr);
    align-items:end;
  }
  .hero h1{ max-width:none }
  .hero .lede{ max-width:none }
  .acts{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(32px, 4vw, 48px) }
  @media (max-width:900px){
    .hero-in{ grid-template-columns:1fr; align-items:start; gap:clamp(26px, 3.5vw, 40px) }
    .hero .lede{ max-width:50ch }
  }
  .specs{
    margin-top:clamp(56px, 8vw, 96px); border-top:1px solid var(--rule);
    display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0 28px;
  }
  @media (max-width:720px){ .specs{ grid-template-columns:1fr; gap:0 }
    .spec{ padding:18px 0 0 } }
  .spec{ padding:22px 20px 0 0 }
  .spec dt{ color:var(--faint); margin-bottom:7px }
  .spec dd{ margin:0; color:var(--ink); font-size:.9375rem; line-height:1.45 }

  /* ---------- numbered capability rows ---------- */
  .rows{ margin-top:clamp(34px, 5vw, 58px); border-top:1px solid var(--rule) }
  .row{
    display:grid; grid-template-columns:4.5rem minmax(0,20ch) minmax(0,1fr);
    gap:10px 28px; align-items:start;
    padding-block:clamp(22px, 2.8vw, 32px);
    border-bottom:1px solid var(--rule-soft);
  }
  @media (max-width:780px){
    .row{ grid-template-columns:3.2rem minmax(0,1fr); }
    .row p{ grid-column:2 }
  }
  .row .n{ color:var(--faint); padding-top:.42em }
  .row p{ font-size:1rem; line-height:1.55 }

  /* ---------- two-column ---------- */
  .two{ display:grid; gap:clamp(36px, 6vw, 84px); grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
  @media (max-width:860px){ .two{ grid-template-columns:1fr } }
  /* Optical nudge so running text starts level with the heading, not the kicker. */
  .two .side{ padding-top:clamp(0px, 1.4vw, 14px) }
  .prose p{ max-width:54ch }
  .prose p + p{ margin-top:18px }

  .detail{ border-top:1px solid var(--rule) }
  .detail .d{ display:grid; grid-template-columns:minmax(0,11ch) minmax(0,1fr); gap:20px;
              padding-block:16px; border-bottom:1px solid var(--rule-soft) }
  .detail dt{ color:var(--faint) }
  .detail dd{ margin:0; color:var(--ink); font-size:.9375rem; line-height:1.5 }

  /* ---------- form ---------- */
  .f{ margin-bottom:22px }
  .f label{ display:block; color:var(--faint); margin-bottom:9px }
  .f input, .f textarea{
    width:100%; font:inherit; font-size:1rem; color:var(--ink);
    background:transparent; border:0; border-bottom:1px solid var(--rule);
    border-radius:0; padding:9px 0; transition:border-color .15s;
  }
  .f textarea{ min-height:112px; resize:vertical }
  .f input:focus, .f textarea:focus{ outline:none; border-bottom-color:var(--ink) }
  .f input[aria-invalid="true"], .f textarea[aria-invalid="true"]{ border-bottom-color:#c0392b }
  .f .e{ color:#c0392b; font-size:.8125rem; margin-top:7px }
  .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
  .msg{ margin-top:18px; padding-top:16px; border-top:1px solid var(--rule); font-size:.9375rem; color:var(--ink) }
  .msg.bad{ color:#c0392b }
  .two-f{ display:grid; grid-template-columns:1fr 1fr; gap:0 26px }
  @media (max-width:560px){ .two-f{ grid-template-columns:1fr } }

  /* ---------- footer ---------- */
  .foot{ border-top:1px solid var(--rule); padding-block:30px }
  .foot-in{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 24px; color:var(--faint) }

  /* ---------- skip link ---------- */
  .skip{
    position:absolute; left:-9999px; top:0; z-index:100;
    background:var(--invert-bg); color:var(--invert-ink);
    font-family:"JetBrains Mono", ui-monospace, monospace;
    font-size:.78rem; letter-spacing:.05em; text-transform:uppercase;
    padding:13px 20px; text-decoration:none;
  }
  .skip:focus{ left:0 }
  main:focus{ outline:none }