:root{
    --ground:#0B1014; --surface:#121A20; --raise:#18232B;
    --line:#1E2A33; --line-soft:#161F26;
    --ink:#E8EEF2; --ink-2:#A9B8C2; --muted:#71838F;
    --accent:#FF6B35; --accent-dim:#7A3720;
    --live:#4ADE80; --warn:#FBBF24; --bad:#EF4444;
    --mono:"Azeret Mono",ui-monospace,"SF Mono",Menlo,monospace;
    --sans:"Schibsted Grotesk",system-ui,-apple-system,sans-serif;
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0; background:var(--ground); color:var(--ink);
    font-family:var(--sans); font-size:17px; line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:1000px;margin:0 auto;padding:0 24px}
  a{color:var(--ink)}
  a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

  /* ---------- masthead ---------- */
  header.top{border-bottom:1px solid var(--line-soft)}
  .top .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:22px;padding-bottom:22px}
  .brand{display:flex;align-items:baseline;gap:10px;text-decoration:none}
  .brand .mark{font-family:var(--mono);font-weight:700;font-size:19px;letter-spacing:-.02em}
  .brand .by{font-size:12px;color:var(--muted);letter-spacing:.04em}
  nav.top-nav{display:flex;gap:22px;font-size:14px}
  nav.top-nav a{color:var(--ink-2);text-decoration:none}
  nav.top-nav a:hover{color:var(--ink)}

  /* ---------- hero ---------- */
  .hero{padding:60px 0 52px;border-bottom:1px solid var(--line-soft)}
  .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 18px}
  h1{
    font-family:var(--mono); font-weight:400;
    font-size:clamp(22px,3.1vw,37px); line-height:1.22; letter-spacing:-.035em;
    margin:0 0 22px; max-width:26ch;
  }
  h1 .fixed{color:var(--ink)}
  h1 .qm{color:var(--ink)}
  h1 .ugly.len-mid{font-size:.82em}
  h1 .ugly.len-long{font-size:.66em;letter-spacing:-.02em}
  h1 .ugly.len-xl{font-size:.52em;letter-spacing:-.01em;line-height:1.35}
  h1 .ugly{
    color:var(--accent); overflow-wrap:anywhere;
    text-decoration:line-through; text-decoration-thickness:1px;
    text-decoration-color:var(--accent-dim);
  }
  .lede{font-size:clamp(16.5px,1.6vw,18.5px);color:var(--ink-2);max-width:72ch;margin:0}
  .hero-action{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:24px 0 0}
  .hero-action-link{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:42px;
    padding:9px 14px;background:var(--accent);border:1px solid var(--accent);border-radius:4px;
    color:var(--ground);font-family:var(--mono);font-size:13px;font-weight:700;text-decoration:none;
  }
  .hero-action-link:hover{background:#ff8356;border-color:#ff8356}
  .hero-action-link span{font-size:17px;line-height:1}
  .hero-action p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.5;max-width:48ch}

  /* ---------- the demo: the whole product in four lines ---------- */

  .demo{margin:34px 0 0;border:1px solid var(--line);background:var(--surface);border-radius:4px;overflow:hidden}
  .demo-head{
    display:flex;justify-content:space-between;align-items:center;gap:16px;
    padding:11px 16px;border-bottom:1px solid var(--line);background:var(--raise);
    font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  }
  .demo-body{padding:20px 16px;overflow-x:auto}
  .contrast{
    display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;
    padding:4px 0 20px;border-bottom:1px solid var(--line);margin-bottom:16px;
  }
  .side{display:flex;flex-direction:column;gap:7px;min-width:0}
  .side-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
  .side-v{font-family:var(--mono);font-size:clamp(15px,1.7vw,20px);letter-spacing:-.01em;overflow-wrap:anywhere;line-height:1.25}
  .side-v.addr{color:var(--accent)}
  .side-v.name{color:var(--live)}
  .side-note{font-size:12.5px;color:var(--muted);line-height:1.5}
  .arrow{font-family:var(--mono);font-size:20px;color:var(--line);padding:0 4px}
  .mech{opacity:.85}
  .row{display:grid;grid-template-columns:132px 1fr;gap:14px;align-items:baseline;padding:7px 0;font-family:var(--mono);font-size:14.5px;white-space:nowrap}
  .row .k{color:var(--muted);font-size:12px;letter-spacing:.05em;text-transform:uppercase}
  .row .v{color:var(--ink)}
  .row .v.addr{color:var(--accent)}
  .row .v.ok{color:var(--live)}
  .demo-note{padding:2px 16px 18px;font-size:13.5px;color:var(--muted);max-width:78ch;white-space:normal;line-height:1.6}

  /* ---------- shared section furniture ---------- */
  section{padding:52px 0;border-bottom:1px solid var(--line-soft)}
  h2{font-family:var(--mono);font-weight:400;font-size:clamp(19px,1.9vw,23px);letter-spacing:-.025em;margin:0 0 9px}
  .sec-lede{color:var(--ink-2);max-width:68ch;margin:0 0 28px;font-size:16px}

  /* ---------- home / business: one spine, two sides ---------- */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:0}
  .col{padding:0 38px}
  .col:first-child{padding-left:0;border-right:1px solid var(--line);}
  .col:last-child{padding-right:0}
  .split--plain .col:first-child{border-right:0;padding-right:22px}
  .split--plain .col:last-child{padding-left:22px}
  .col h3{font-family:var(--mono);font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin:0 0 6px}
  .col .who{color:var(--ink-2);font-size:15px;margin:0 0 20px}
  .col ul{list-style:none;margin:0 0 22px;padding:0}
  .col li{position:relative;padding-left:20px;margin-bottom:9px;font-size:15.5px;color:var(--ink)}
  .col li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--accent)}
  .bonus{
    margin:0 0 16px;padding:11px 14px;font-size:14px;line-height:1.58;
    color:var(--ink-2);background:var(--surface);
    border-left:2px solid var(--live);border-radius:0 3px 3px 0;max-width:52ch;
  }
  .bonus b{color:var(--live);font-weight:700}
  .bonus--critical{border-left-color:var(--accent)}
  .bonus--critical b{color:var(--accent)}
  .example{font-family:var(--mono);font-size:13.5px;color:var(--muted);border-left:2px solid var(--line);padding-left:13px}
  .example b{color:var(--ink);font-weight:700}

  /* ---------- setup ---------- */
  .fields{border:1px solid var(--line);border-radius:4px;overflow:hidden}
  .field{display:grid;grid-template-columns:190px 1fr;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line-soft);font-size:14.5px}
  .field:last-child{border-bottom:0}
  .field .fk{color:var(--muted);font-size:13px}
  .field .fv{font-family:var(--mono);color:var(--ink);overflow-wrap:anywhere;word-break:normal;line-height:1.5}
  .routers{margin-top:20px;font-size:14px;color:var(--muted)}
  .routers b{color:var(--ink-2);font-weight:700}
  .docs-link{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-dim);white-space:nowrap}
  .docs-link:hover{border-bottom-color:var(--accent)}

  /* ---------- the protocol vocabulary ---------- */
  .codes{width:100%;border-collapse:collapse;font-size:14.5px}
  .codes th{text-align:left;font-family:var(--mono);font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:0 0 10px;border-bottom:1px solid var(--line)}
  .codes td{padding:11px 16px 11px 0;border-bottom:1px solid var(--line-soft);vertical-align:top}
  .codes td:first-child{font-family:var(--mono);white-space:nowrap;width:150px}
  .codes .c-good{color:var(--live)} .codes .c-warn{color:var(--warn)} .codes .c-bad{color:var(--bad)}
  .codes td.why{color:var(--ink-2)}
  .aside{margin-top:26px;padding:16px 18px;border-left:2px solid var(--accent-dim);background:var(--surface);font-size:14.5px;color:var(--ink-2);max-width:72ch}
  .aside b{color:var(--ink);font-weight:700}

  /* ---------- business fleet ---------- */
  .soon-lg{font-size:10.5px;padding:3px 8px;vertical-align:4px;margin-left:8px}
  .spec{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0 0 32px}
  .spec-item{
    display:flex;flex-direction:column;gap:5px;
    border-left:2px solid var(--accent-dim);padding:2px 0 2px 14px;
  }
  .spec-n{font-family:var(--mono);font-size:clamp(20px,2.2vw,27px);color:var(--ink);letter-spacing:-.02em;line-height:1.1}
  .spec-l{font-size:13px;color:var(--muted);line-height:1.45}
  .fleet-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:34px 40px;margin-bottom:8px}
  .fleet-col h3{font-family:var(--mono);font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--accent);margin:0 0 8px}
  .fleet-lede{margin:0 0 16px;font-size:14.5px;line-height:1.6;color:var(--muted);max-width:52ch}
  .fleet-col .codes td{padding:9px 14px 9px 0;font-size:14px}
  .fleet-col .codes td:first-child{width:auto;padding-right:18px}
  .fleet-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
  .fleet-list li{font-size:14.5px;line-height:1.58;color:var(--ink-2);max-width:52ch}
  .fleet-list b{color:var(--ink);font-weight:700}
  .fleet-list code{font-family:var(--mono);font-size:.9em;color:var(--accent)}

  /* ---------- getting started: a real sequence, so it is numbered ---------- */
  .steps{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:26px;counter-reset:none}
  .steps li{display:grid;grid-template-columns:38px 1fr;gap:16px;align-items:start}
  .step-n{
    font-family:var(--mono);font-size:13px;font-weight:700;color:var(--accent);
    border:1px solid var(--accent-dim);border-radius:50%;
    width:30px;height:30px;display:flex;align-items:center;justify-content:center;
    margin-top:1px;
  }
  .step-body h3{font-family:var(--mono);font-size:15.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink);margin:0 0 7px}
  .step-body p{margin:0 0 9px;font-size:15px;line-height:1.62;color:var(--ink-2);max-width:64ch}
  .step-body p:last-child{margin-bottom:0}
  .step-body a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-dim)}
  .step-body a:hover{border-bottom-color:var(--accent)}
  .step-body code{font-family:var(--mono);font-size:.93em;color:var(--ink)}
  .step-note{
    border-left:2px solid var(--accent-dim);padding:9px 0 9px 14px;
    background:var(--surface);padding-right:14px;border-radius:0 3px 3px 0;
    font-size:14.5px!important;
  }
  .step-note b{color:var(--ink);font-weight:700}
  .already{margin:0;font-size:15px;color:var(--muted)}
  .already a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-dim)}
  .already a:hover{border-bottom-color:var(--accent)}

  /* ---------- sovereignty ---------- */
  .sov-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px 44px}
  .sov-item h3{
    font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:.03em;
    color:var(--accent);margin:0 0 8px;
  }
  .sov-link{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-dim)}
  .sov-link:hover{border-bottom-color:var(--accent)}
  .sov-item p{margin:0;font-size:15px;line-height:1.62;color:var(--ink-2);max-width:52ch}
  .sov-item code{font-family:var(--mono);font-size:.93em;color:var(--ink)}

  .soon{
    font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
    border:1px solid var(--accent-dim);color:var(--accent);border-radius:2px;
    padding:1px 5px;margin-right:7px;vertical-align:1px;white-space:nowrap;
  }

  /* ---------- footer: the shared WAYSCloud structure ---------- */
  .site-footer{padding:46px 0 40px;border-top:1px solid var(--line)}
  .footer-grid{display:grid;grid-template-columns:2.05fr 1fr 1fr 1fr;gap:34px 28px}
  .footer-brand .footer-wordmark{display:flex;align-items:center;gap:11px;text-decoration:none;margin-bottom:15px}
  .footer-brand .footer-wordmark img{display:block;height:38px;width:auto}
  .footer-brand .footer-wordmark .sub{
    font-family:var(--mono);font-size:15px;color:var(--accent);
    padding-left:11px;border-left:1px solid var(--line);line-height:1.1;
  }
  .footer-brand p{margin:0 0 17px;font-size:14px;line-height:1.62;color:var(--muted);max-width:44ch}
  .footer-col h4{
    font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.09em;
    text-transform:uppercase;color:var(--ink-2);margin:0 0 13px;
  }
  .footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
  .footer-col a{font-size:14px;color:var(--muted);text-decoration:none}
  .footer-col a:hover{color:var(--ink)}
  .badges{display:flex;gap:7px;flex-wrap:wrap}
  .badge{
    font-family:var(--mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;
    border:1px solid var(--line);border-radius:2px;padding:3px 7px;color:var(--ink-2);white-space:nowrap;
  }
  .footer-bottom{
    display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;align-items:center;
    margin-top:38px;padding-top:20px;border-top:1px solid var(--line-soft);
  }
  .footer-bottom p{margin:0;font-size:13px;color:var(--muted)}
  .footer-legal{display:flex;gap:18px}
  .footer-legal a{font-size:13px;color:var(--muted);text-decoration:none}
  .footer-legal a:hover{color:var(--ink)}

  @media (max-width:720px){
    .split{grid-template-columns:1fr}
    .col{padding:0}
    .col:first-child{border-right:0;border-bottom:1px solid var(--line);padding-bottom:30px;margin-bottom:30px}
    .contrast{grid-template-columns:1fr;gap:14px;text-align:left}
    .arrow{transform:rotate(90deg);padding:0;font-size:17px}
    .row{grid-template-columns:1fr;gap:3px;font-size:12.5px;white-space:normal;padding:10px 0}
    .row .k{font-size:10.5px}
    .row .v{overflow-wrap:anywhere;line-height:1.45}
    .demo-body{padding:14px 14px}
    .demo-head{font-size:10.5px;padding:10px 14px}
    .demo-note{padding:0 14px 16px;font-size:12.5px}
    .field{grid-template-columns:1fr;gap:3px}
    nav.top-nav{display:none}
    section{padding:48px 0}
    .hero{padding:56px 0 48px}
    .spec{grid-template-columns:1fr 1fr;gap:14px}
    /* "authentication failing" is nowrap in the base table style, which sets a
       floor the fleet table cannot shrink below on a narrow phone. Let the
       state name wrap here; it is a label, not a value that must stay intact. */
    .fleet-col .codes td:first-child{white-space:normal;padding-right:12px}
    .fleet-col .codes td{font-size:13px}
    .fleet-grid{grid-template-columns:1fr;gap:30px}
    .sov-grid{grid-template-columns:1fr;gap:24px}
    .steps li{grid-template-columns:30px 1fr;gap:12px}
    .step-n{width:26px;height:26px;font-size:12px}
    .footer-grid{grid-template-columns:1fr;gap:28px}
    .footer-bottom{flex-direction:column;align-items:flex-start;gap:12px}
  }
  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

  /* utility classes replacing former inline style attributes, so the CSP
     no longer needs 'unsafe-inline' for style-src */
  .mono{font-family:var(--mono)}
  .ink{color:var(--ink)}
  .accent{color:var(--accent)}