:root {
    --navy:#1F3A5F; --slate:#5A6F8C; --ink:#1b2a3d; --line:#e3e7ec;
    --soft:#f5f7fa; --mark:#e9ecf0; --bg:#ffffff;
  }
  * { box-sizing:border-box; margin:0; padding:0; }
  html { scroll-behavior:smooth; }
  body {
    background:var(--bg); color:var(--ink);
    font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
  }
  a { color:var(--navy); }
  .wrap { max-width:1040px; margin:0 auto; padding:0 24px; }

  /* header */
  header { border-bottom:1px solid var(--line); background:#fff; position:relative; z-index:2; }
  header .wrap { display:flex; align-items:center; justify-content:space-between; height:72px; }
  header img { height:30px; width:auto; display:block; }
  header nav a {
    font-size:15px; font-weight:500; text-decoration:none; color:var(--navy);
    border:1px solid var(--navy); padding:8px 16px; border-radius:4px;
  }
  header nav a:hover { background:var(--navy); color:#fff; }

  /* hero with the binary field */
  .hero { position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
  .field {
    position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
    font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:14px; line-height:22px;
    color:var(--mark); letter-spacing:6px; word-break:break-all; user-select:none;
  }
  .hero .inner {
    position:relative; z-index:1; padding:96px 24px 104px; text-align:center;
    background:radial-gradient(ellipse 620px 300px at 50% 50%, rgba(255,255,255,.98) 55%, rgba(255,255,255,0) 100%);
  }
  .hero h1 {
    font-weight:600; color:var(--navy); letter-spacing:-.01em;
    font-size:clamp(30px,5vw,48px); line-height:1.15; max-width:21ch; margin:0 auto 20px;
  }
  .hero p { font-size:clamp(17px,2.1vw,20px); color:var(--slate); max-width:40ch; margin:0 auto 36px; }
  .btn {
    display:inline-block; background:var(--navy); color:#fff; text-decoration:none;
    font-weight:500; font-size:16px; padding:14px 26px; border-radius:4px;
  }
  .btn:hover { background:#16304f; }
  .btn:focus-visible, header nav a:focus-visible { outline:3px solid #9fb6d3; outline-offset:3px; }

  /* sections */
  section { padding:88px 0; }
  section.alt { background:var(--soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .eyebrow {
    font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:13px; font-weight:500;
    letter-spacing:.08em; text-transform:uppercase; color:var(--slate); margin-bottom:10px;
  }
  h2 { font-size:clamp(24px,3.2vw,32px); font-weight:600; color:var(--navy); line-height:1.25; letter-spacing:-.01em; margin-bottom:16px; }
  .lead { color:var(--slate); max-width:60ch; margin-bottom:48px; }

  .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:20px; }
  .card { background:#fff; border:1px solid var(--line); border-radius:6px; padding:26px 24px; }
  .card h3 { font-size:18px; font-weight:600; color:var(--navy); margin-bottom:8px; }
  .card p { font-size:16px; color:#3d4d61; }

  ol.steps { list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); gap:28px; counter-reset:step; }
  ol.steps li { counter-increment:step; border-top:2px solid var(--navy); padding-top:18px; }
  ol.steps li::before {
    content:"0" counter(step); display:block; font-family:"IBM Plex Mono",ui-monospace,monospace;
    font-size:14px; font-weight:500; color:var(--slate); margin-bottom:6px;
  }
  ol.steps h3 { font-size:18px; font-weight:600; color:var(--navy); margin-bottom:6px; }
  ol.steps p { font-size:16px; color:#3d4d61; }

  ul.rules { list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 48px; max-width:900px; }
  @media (max-width:700px) { ul.rules { grid-template-columns:1fr; } }
  ul.rules li { padding-left:22px; position:relative; }
  ul.rules li::before { content:""; position:absolute; left:0; top:.65em; width:10px; height:2px; background:var(--navy); }
  ul.rules b { color:var(--navy); font-weight:600; }

  .contact { text-align:center; }
  .contact .lead { margin-left:auto; margin-right:auto; }
  .addr { font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:clamp(18px,2.6vw,22px); font-weight:500; color:var(--navy); margin:0 auto 22px; user-select:all; -webkit-user-select:all; word-break:break-all; }
  .actions { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
  button.btn { border:0; cursor:pointer; font-family:inherit; }
  .btn.ghost { background:#fff; color:var(--navy); border:1px solid var(--navy); padding:13px 25px; }
  .btn.ghost:hover { background:var(--navy); color:#fff; }
  button.btn:focus-visible, .btn.ghost:focus-visible { outline:3px solid #9fb6d3; outline-offset:3px; }
  .mail { margin-top:18px; font-size:15px; color:var(--slate); }
  .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

  footer { border-top:1px solid var(--line); padding:28px 0 36px; font-size:13px; color:var(--slate); }
  footer .wrap { display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; }

  @media (max-width:600px) {
    body { font-size:16px; }
    header .wrap { height:64px; }
    header img { height:24px; }
    header nav a { padding:7px 12px; font-size:14px; }
    .hero .inner { padding:64px 20px 72px; }
    section { padding:64px 0; }
    .lead { margin-bottom:36px; }
  }
  @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

  /* ---- added 2026-10-02: multi-page site ---- */
  header nav { display:flex; align-items:center; gap:18px; }
  header nav a.plain { border:0; padding:0; font-weight:500; text-decoration:none; }
  header nav a.plain:hover { background:none; color:var(--navy); text-decoration:underline; }
  header nav a.plain[aria-current="page"] { text-decoration:underline; text-underline-offset:4px; }
  @media (max-width:420px) { header nav { gap:12px; } header nav a.plain { font-size:14px; } }

  .starts { margin-top:56px; }
  .starts h3.sub { font-size:20px; font-weight:600; color:var(--navy); margin-bottom:6px; }
  .starts p.sub { color:var(--slate); margin-bottom:20px; }
  a.card { display:block; text-decoration:none; transition:border-color .15s, box-shadow .15s; }
  a.card:hover { border-color:var(--navy); box-shadow:0 2px 10px rgba(31,58,95,.10); }
  a.card:focus-visible { outline:3px solid #9fb6d3; outline-offset:3px; }
  a.card .go { display:inline-block; margin-top:12px; font-size:15px; font-weight:500; color:var(--navy); }
  .more { margin-top:24px; font-weight:500; }

  .page-hero { border-bottom:1px solid var(--line); background:var(--soft); }
  .page-hero .wrap { padding-top:56px; padding-bottom:48px; }
  .page-hero h1 { font-weight:600; color:var(--navy); letter-spacing:-.01em; font-size:clamp(28px,4.4vw,42px); line-height:1.15; margin-bottom:14px; max-width:24ch; }
  .page-hero p { font-size:clamp(17px,2vw,19px); color:var(--slate); max-width:56ch; }
  .crumb { font-size:14px; margin-bottom:14px; color:var(--slate); }
  .crumb a { color:var(--slate); }

  .prose { max-width:68ch; }
  .prose p { margin-bottom:16px; }
  .prose h2 { margin-top:40px; }
  .prose h2:first-child { margin-top:0; }
  ul.checks { list-style:none; margin:0 0 16px; }
  ul.checks li { padding-left:22px; position:relative; margin-bottom:8px; }
  ul.checks li::before { content:""; position:absolute; left:0; top:.65em; width:10px; height:2px; background:var(--navy); }
  .note { border-left:3px solid var(--navy); background:var(--soft); padding:14px 18px; margin:8px 0 20px; font-size:16px; color:#3d4d61; }

  .demo-label { display:inline-block; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--slate); border:1px solid var(--line); border-radius:3px; padding:3px 8px; margin-bottom:14px; background:#fff; }
  .shots { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:16px; margin:18px 0 22px; }
  .shots figure { margin:0; }
  .shots img, .demo img { width:100%; height:auto; display:block; border:1px solid var(--line); border-radius:4px; background:#fff; }
  .shots figcaption { font-size:14px; color:var(--slate); margin-top:6px; }
  .sample + .sample { margin-top:72px; padding-top:56px; border-top:1px solid var(--line); }
  .demo { margin:8px 0 8px; max-width:640px; }
  .demo a { font-weight:500; }