/* ============================================================
   AZMX AI — v2 design system
   Light, airy, premium. Structure modelled on claude.com;
   palette is AZMX's own warm-neutral (not Anthropic's brand).
   Shared by every page.
   ============================================================ */
:root {
  --bg:        #FBFAF7;
  --bg-soft:   #F4F2EC;
  --bg-deep:   #11110F;   /* dark device frames / inverted blocks */
  --surface:   #FFFFFF;

  --ink:       #1A1A18;
  --ink-2:     #54524B;
  --ink-3:     #8B897E;
  --ink-4:     #B4B1A5;

  --line:      #E9E6DC;
  --line-2:    #DCD8CB;

  --accent:    #1A1A18;   /* solid CTA — dark pill on light */
  --accent-2:  #34332E;
  --halo:      rgba(26,26,24,.07);

  --maxw: 1180px;
  --gutter: 28px;
  --r:   16px;
  --r-sm: 11px;
  --ease: cubic-bezier(.22,1,.36,1);

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html,body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--ink); color: var(--bg); }
a { color: var(--ink); text-decoration: none; }
img,svg { display: block; max-width: 100%; }
h1,h2,h3,h4 { color: var(--ink); font-weight: 700; letter-spacing: -.032em; line-height: 1.06; margin: 0; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 760px; }
.mono { font-family: var(--mono); }
.skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--ink); color: var(--bg); font-size: 13px; padding: 10px 16px; border-radius: 0 0 8px 0; }
.skip:focus { left: 0; top: 0; }

/* ---- buttons ---------------------------------------------- */
.btn {
  font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: -.01em;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; white-space: nowrap; cursor: pointer;
  border: 1px solid transparent;
  transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .18s var(--ease);
}
.btn .arrow { transition: transform .2s var(--ease); }
.btn:hover .arrow { transform: translate(2px,-2px); }
.btn.solid { background: var(--accent); color: #fff; }
.btn.solid:hover { background: var(--accent-2); transform: translateY(-1px); }
.btn.ghost { color: var(--ink); border-color: var(--line-2); background: var(--surface); }
.btn.ghost:hover { border-color: var(--ink-3); }
.btn.sm { padding: 9px 16px; font-size: 14px; }
.btn.lg { padding: 15px 28px; font-size: 16px; }

/* ---- header ----------------------------------------------- */
header.site { position: sticky; top: 0; z-index: 60;
  background: rgba(251,250,247,.8); backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); }
header.site .inner { height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.brand .mark { width: 28px; height: 28px; border-radius: 8px; display: block; flex: none; }
.brand .name { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
nav.links { display: flex; align-items: center; gap: 6px; }
nav.links > a, .nav-group > button {
  font: inherit; font-size: 15px; font-weight: 450; color: var(--ink-2);
  background: none; border: 0; cursor: pointer; padding: 8px 14px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px; transition: color .15s var(--ease), background .15s var(--ease); }
nav.links > a:hover, .nav-group:hover > button, nav.links a[aria-current="page"] { color: var(--ink); background: var(--bg-soft); }
.nav-group { position: relative; }
.nav-group .menu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 230px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  box-shadow: 0 18px 48px -24px var(--halo); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s; }
.nav-group:hover .menu, .nav-group:focus-within .menu { opacity: 1; visibility: visible; transform: none; }
.nav-group .menu a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 14.5px; color: var(--ink-2); }
.nav-group .menu a:hover { background: var(--bg-soft); color: var(--ink); }
.nav-group .menu a small { display: block; color: var(--ink-3); font-size: 12.5px; margin-top: 2px; }
.header-cta { display: flex; align-items: center; gap: 10px; }
@media (max-width: 940px){ nav.links { display: none; } }

/* ---- section rhythm --------------------------------------- */
main { display: block; }
section { padding: 92px 0; }
section.tight { padding: 60px 0; }
section.alt { background: var(--bg-soft); }
section.deep { background: var(--bg-deep); color: #C9C7BD; }
section.deep h2, section.deep h3 { color: #FBFAF7; }
.eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 18px; }
.sec-head { max-width: 720px; margin: 0 0 56px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head h2 { font-size: clamp(30px, 4.4vw, 52px); font-weight: 700; letter-spacing: -.035em; }
.sec-head p { font-size: clamp(17px,1.5vw,20px); color: var(--ink-2); margin: 20px 0 0; }
.lede { font-size: clamp(17px,1.6vw,20px); color: var(--ink-2); line-height: 1.55; }

/* ---- hero ------------------------------------------------- */
.hero { padding: 96px 0 70px; text-align: center; }
.hero .pill { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono);
  font-size: 12.5px; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line);
  padding: 7px 15px 7px 9px; border-radius: 999px; margin-bottom: 30px; }
.hero .pill b { background: var(--ink); color: var(--bg); font-weight: 600; font-size: 10.5px;
  letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; }
.hero h1 { font-size: clamp(40px, 6.6vw, 84px); font-weight: 800; letter-spacing: -.04em;
  line-height: 1.02; max-width: 16ch; margin: 0 auto; }
.hero h1 .grad { background: linear-gradient(110deg,#1a1a18 0%, #6b6a61 55%, #1a1a18 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .sub { font-size: clamp(18px,1.9vw,22px); color: var(--ink-2); max-width: 44ch;
  margin: 26px auto 0; font-weight: 400; }
.hero .cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 36px 0 0; }
.hero .dl-meta { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); margin: 20px 0 0; }
.hero .dl-meta b { color: var(--ink-2); font-weight: 600; }

/* ---- trust strip ------------------------------------------ */
.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg); }
.trust .row { display: flex; gap: 12px 30px; align-items: center; justify-content: center;
  flex-wrap: wrap; padding: 22px 0; font-family: var(--mono); font-size: 13px; color: var(--ink-3); }
.trust .row a { color: var(--ink-3); }
.trust .row a:hover { color: var(--ink); }
.trust .row .on { color: var(--ink-2); }

/* ---- product device frame --------------------------------- */
.device { max-width: 1040px; margin: 0 auto; border-radius: 14px; overflow: hidden;
  background: var(--bg-deep); border: 1px solid #26261F;
  box-shadow: 0 50px 120px -50px rgba(20,20,16,.4), 0 0 0 1px rgba(255,255,255,.02) inset;
  font-family: var(--mono); }
.device .bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  border-bottom: 1px solid #24241D; }
.device .bar i { width: 11px; height: 11px; border-radius: 50%; background: #33332B; }
.device .bar .ttl { margin: 0 auto; font-size: 11.5px; color: #7E7C70; }
.device .body { color: #C9C7BD; font-size: 13px; line-height: 1.95; padding: 22px 24px; min-height: 300px; }
.device .grid { display: grid; grid-template-columns: 180px 1fr 280px; min-height: 420px; }
.device .grid .col + .col { border-left: 1px solid #24241D; }
.device .ch { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #6c6a5f; padding: 13px 14px 9px; }
.device .tree { font-size: 12px; color: #8d8b7f; line-height: 2.05; padding: 0 12px 14px; }
.device .tree .f { color: #6c6a5f; padding-left: 14px; }
.device .tree .on { color: #f3f1e7; background: rgba(255,255,255,.05); border-radius: 4px; padding-left: 14px; }
.device .tabs { display: flex; border-bottom: 1px solid #24241D; }
.device .tabs .tb { font-size: 11.5px; color: #6c6a5f; padding: 10px 16px; }
.device .tabs .tb.on { color: #f3f1e7; box-shadow: inset 0 -1px 0 #c9c7bd; }
.device .code { font-size: 12.5px; line-height: 1.9; padding: 12px 0; white-space: pre; overflow: hidden; }
.device .code .ln { display: flex; gap: 14px; padding: 0 16px; }
.device .code .no { color: #57564b; width: 20px; text-align: right; flex: none; user-select: none; }
.device .code .add { background: rgba(126,196,148,.12); }
.device .kw{color:#cbb48f}.device .st{color:#9fb0a6}.device .cm{color:#57564b}.device .fn{color:#cfcdc2}.device .gp{color:#86b394}
.device .review { display: flex; align-items: center; gap: 12px; border-top: 1px solid #24241D;
  padding: 11px 16px; font-size: 11.5px; color: #8d8b7f; }
.device .review b { color: #f3f1e7; font-weight: 600; }
.device .review .sp { margin-left: auto; display: flex; gap: 8px; }
.device .pillbtn { border: 1px solid #36352c; border-radius: 6px; padding: 4px 11px; color: #a8a699; }
.device .pillbtn.go { color: #f3f1e7; border-color: #56554a; }
.device .ai { display: flex; flex-direction: column; }
.device .msg { padding: 13px 15px; font-size: 12px; line-height: 1.62; }
.device .msg .who { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #6c6a5f; margin-bottom: 7px; }
.device .msg.a { border-top: 1px solid #24241D; }
.device .msg b, .device .msg .hl { color: #f3f1e7; }
.device .dcard { border: 1px solid #2f2e26; border-radius: 6px; margin-top: 11px; font-size: 11px; overflow: hidden; }
.device .dcard .dh { padding: 7px 10px; color: #6c6a5f; border-bottom: 1px solid #24241D; }
.device .dcard .dl { padding: 2px 10px; color: #86b394; background: rgba(126,196,148,.08); }
.device .ask { margin-top: auto; border-top: 1px solid #24241D; padding: 12px 15px; font-size: 12px; color: #6c6a5f; }
.device .status { display: flex; gap: 18px; border-top: 1px solid #24241D; padding: 9px 16px; font-size: 11px; color: #6c6a5f; }
.device .status .tk { margin-left: auto; }
@media (max-width: 880px){ .device .grid { grid-template-columns: 1fr; } .device .col.tcol, .device .col.acol { display: none; } }

/* ---- tabbed capability pillars (no-JS, CSS :checked) ------ */
.pillars { margin-top: 44px; }
.pillars input { position: absolute; opacity: 0; pointer-events: none; }
.pillars .tablist { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 30px; }
.pillars .tablist label {
  font-size: 15px; font-weight: 500; color: var(--ink-2); cursor: pointer;
  padding: 10px 20px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface);
  transition: all .18s var(--ease); }
.pillars .tablist label:hover { border-color: var(--ink-3); }
.pillars .panel { display: none; }
.pillars #pt1:checked ~ .tablist label[for=pt1],
.pillars #pt2:checked ~ .tablist label[for=pt2],
.pillars #pt3:checked ~ .tablist label[for=pt3],
.pillars #pt4:checked ~ .tablist label[for=pt4] { background: var(--ink); color: #fff; border-color: var(--ink); }
.pillars #pt1:checked ~ .panels #p1,
.pillars #pt2:checked ~ .panels #p2,
.pillars #pt3:checked ~ .panels #p3,
.pillars #pt4:checked ~ .panels #p4 { display: grid; }
.pillars .panel { grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; }
.pillars .panel .copy h3 { font-size: clamp(24px,2.6vw,34px); font-weight: 700; letter-spacing: -.03em; }
.pillars .panel .copy p { color: var(--ink-2); margin: 16px 0 0; font-size: 17px; }
.pillars .panel .copy ul { margin: 20px 0 0; padding: 0; list-style: none; }
.pillars .panel .copy li { font-size: 15px; color: var(--ink-2); padding: 8px 0 8px 22px; position: relative; }
.pillars .panel .copy li::before { content: ""; position: absolute; left: 0; top: 14px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--ink-4); }
@media (max-width: 900px){ .pillars .panel { grid-template-columns: 1fr; gap: 28px; } }

/* ---- 3-up value cards ------------------------------------- */
.triad { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.triad .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 34px 30px; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.triad .card:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -34px var(--halo); }
.triad .card .ic { width: 40px; height: 40px; border-radius: 11px; background: var(--bg-soft);
  border: 1px solid var(--line); display: grid; place-items: center; margin-bottom: 20px; }
.triad .card .ic svg { width: 20px; height: 20px; stroke: var(--ink); fill: none; stroke-width: 1.6; }
.triad .card h3 { font-size: 21px; font-weight: 700; }
.triad .card p { color: var(--ink-2); font-size: 15.5px; margin: 10px 0 0; line-height: 1.6; }
@media (max-width: 860px){ .triad { grid-template-columns: 1fr; } }

/* ---- generic feature grid / cards ------------------------- */
.grid3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.grid2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.fcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 30px; }
.fcard.alt { background: var(--bg); }
.fcard h3 { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.fcard p { color: var(--ink-2); font-size: 15px; margin: 10px 0 0; line-height: 1.6; }
.fcard .k { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.fcard code, .prose code, .vs code { font-family: var(--mono); font-size: .88em;
  background: var(--bg-soft); border: 1px solid var(--line); padding: 1px 6px; border-radius: 5px; color: var(--ink); }
@media (max-width: 900px){ .grid3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .grid3,.grid2 { grid-template-columns: 1fr; } }

.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; background: var(--surface); }
.stats > div { padding: 30px 28px; }
.stats > div + div { border-left: 1px solid var(--line); }
.stats .v { font-size: 34px; font-weight: 800; color: var(--ink); letter-spacing: -.03em; }
.stats .k { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-top: 8px; }
@media (max-width: 760px){ .stats { grid-template-columns: 1fr 1fr; } .stats >div:nth-child(3){border-left:0;} .stats>div:nth-child(n+3){border-top:1px solid var(--line);} }

/* ---- comparison ------------------------------------------- */
.vs { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.vs-row { display: grid; grid-template-columns: 1.5fr 1fr 1fr; }
.vs-row + .vs-row { border-top: 1px solid var(--line); }
.vs-row > div { padding: 16px 22px; font-size: 14.5px; }
.vs-row > div + div { border-left: 1px solid var(--line); }
.vs-row .ft { color: var(--ink-3); font-family: var(--mono); font-size: 13px; }
.vs-row .az { background: var(--bg-soft); color: var(--ink); font-weight: 500; }
.vs-row .n  { color: var(--ink-3); }
.vs-head > div { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding: 18px 22px; }
.vs-head .az { color: var(--ink); }
.vs .y::before { content: "✓"; color: var(--ink); margin-right: 9px; }
.vs .x::before { content: "✕"; color: var(--ink-4); margin-right: 9px; }
@media (max-width: 720px){ .vs-row{ grid-template-columns:1fr; } .vs-row>div+div{ border-left:0; border-top:1px solid var(--line);} .vs-head{display:none;} }

/* ---- pricing teaser --------------------------------------- */
.tiers { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.tier { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 32px 30px; display: flex; flex-direction: column; }
.tier.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.tier .pn { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.tier .price { font-size: 36px; font-weight: 800; color: var(--ink); letter-spacing: -.03em; margin: 14px 0 4px; }
.tier .price small { font-family: var(--mono); font-size: 13px; font-weight: 400; color: var(--ink-3); }
.tier ul { list-style: none; margin: 20px 0 26px; padding: 0; flex: 1; }
.tier li { font-size: 14.5px; color: var(--ink-2); padding: 8px 0 8px 22px; position: relative; }
.tier li::before { content: "✓"; position: absolute; left: 0; color: var(--ink-4); }
.tier .btn { width: 100%; justify-content: center; }
@media (max-width: 880px){ .tiers { grid-template-columns: 1fr; } }

/* ---- prose / legal / docs --------------------------------- */
.prose { color: var(--ink-2); font-size: 17px; }
.prose h2 { font-size: clamp(24px,3vw,34px); font-weight: 700; color: var(--ink); margin: 56px 0 18px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 20px; font-weight: 700; color: var(--ink); margin: 38px 0 12px; }
.prose p { margin: 0 0 18px; line-height: 1.72; }
.prose ul,.prose ol { margin: 0 0 18px; padding-left: 22px; }
.prose li { margin: 0 0 10px; }
.prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.prose a:hover { text-decoration-color: var(--ink); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 44px 0; }
.callout { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 20px 24px; margin: 28px 0; font-size: 16px; }
.callout strong { color: var(--ink); }
.legal-meta { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); margin: 0 0 28px; }
.toc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 26px; margin: 0 0 40px; }
.toc .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.toc ol { margin: 0; padding-left: 20px; } .toc li { margin: 7px 0; font-size: 15px; }
.toc a { color: var(--ink-2); } .toc a:hover { color: var(--ink); }

/* page-head (subpages) */
.page-head { padding: 84px 0 0; text-align: center; }
.page-head .eyebrow { margin-bottom: 16px; }
.page-head h1 { font-size: clamp(38px,5.4vw,68px); font-weight: 800; letter-spacing: -.04em; }
.page-head h1 .grad { background: linear-gradient(110deg,#1a1a18,#6b6a61 55%,#1a1a18);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.page-head .sub { font-size: clamp(17px,1.7vw,21px); color: var(--ink-2); max-width: 56ch; margin: 20px auto 0; }

/* steps / download cards */
.os-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.os { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 30px 28px; display: flex; flex-direction: column; }
.os .glyph { width: 44px; height: 44px; border-radius: 12px; background: var(--bg-soft); border: 1px solid var(--line); display: grid; place-items: center; }
.os .glyph svg { width: 22px; height: 22px; stroke: var(--ink); fill: none; stroke-width: 1.5; }
.os h3 { font-size: 21px; font-weight: 700; margin: 18px 0 4px; }
.os .fmt { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.os p { font-size: 14.5px; color: var(--ink-2); margin: 14px 0 22px; flex: 1; }
.os .btn { align-self: flex-start; }
@media (max-width: 820px){ .os-grid { grid-template-columns: 1fr; } }
.steps { counter-reset: s; margin: 0; padding: 0; list-style: none; }
.steps li { position: relative; padding: 0 0 28px 54px; border-left: 1px solid var(--line); margin-left: 14px; }
.steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps li::before { counter-increment: s; content: counter(s,decimal-leading-zero); position: absolute;
  left: -15px; top: -3px; width: 30px; height: 30px; border-radius: 50%; background: var(--surface);
  border: 1px solid var(--line-2); color: var(--ink); font-family: var(--mono); font-size: 12px;
  display: grid; place-items: center; }
.steps li h3 { font-size: 18px; font-weight: 700; margin: 0 0 5px; }
.steps li p { font-size: 15px; color: var(--ink-2); margin: 0; }
.cmd { font-family: var(--mono); font-size: 13px; background: var(--bg-deep); color: #d7d5cb;
  border-radius: var(--r-sm); padding: 14px 18px; margin: 14px 0; overflow-x: auto; }
.cmd .p { color: #7e7c70; user-select: none; }

/* timeline (changelog) */
.timeline { margin: 0; padding: 0; list-style: none; }
.timeline > li { position: relative; padding: 0 0 40px 38px; border-left: 1px solid var(--line); margin-left: 6px; }
.timeline > li:last-child { padding-bottom: 0; }
.timeline > li::before { content: ""; position: absolute; left: -5px; top: 5px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--surface); border: 1px solid var(--ink-3); }
.timeline h2 { font-size: 22px; font-weight: 800; }
.timeline h2 em { font-style: normal; font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--ink-3); }
.timeline ul { margin: 14px 0 0; padding-left: 20px; } .timeline li.it { font-size: 14.5px; color: var(--ink-2); margin: 0 0 8px; }

/* 404 */
.nf { min-height: 64vh; display: grid; place-items: center; text-align: center; }
.nf .code { font-size: clamp(80px,15vw,180px); font-weight: 800; color: var(--ink); letter-spacing: -.05em; line-height: 1; }
.nf p { color: var(--ink-3); font-family: var(--mono); font-size: 14px; margin: 8px 0 30px; }

/* contact form */
.form { display: grid; gap: 16px; max-width: 560px; }
.form label { font-size: 13px; font-weight: 600; color: var(--ink); display: block; margin-bottom: 7px; }
.form input,.form select,.form textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 12px 14px; }
.form input:focus,.form select:focus,.form textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.form textarea { min-height: 130px; resize: vertical; }

/* ---- final CTA -------------------------------------------- */
.final { text-align: center; }
.final h2 { font-size: clamp(34px,5vw,64px); font-weight: 800; letter-spacing: -.04em; max-width: 18ch; margin: 0 auto; }
.final p { color: var(--ink-2); font-size: 18px; margin: 22px auto 0; max-width: 50ch; }
.final .cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }

/* ---- footer ----------------------------------------------- */
footer.site { background: var(--bg-soft); border-top: 1px solid var(--line); padding: 72px 0 56px; }
footer.site .cols { display: grid; grid-template-columns: 1.6fr repeat(4,1fr); gap: 36px; }
footer.site .bcol .brand { margin-bottom: 14px; }
footer.site .triad-line { font-family: var(--mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); }
footer.site .legal { color: var(--ink-3); font-size: 13px; margin-top: 18px; max-width: 42ch; line-height: 1.7; }
footer.site h4 { font-size: 13px; font-weight: 700; color: var(--ink); margin: 0 0 14px; letter-spacing: .01em; }
footer.site ul { list-style: none; margin: 0; padding: 0; }
footer.site li { margin: 0 0 10px; }
footer.site a { color: var(--ink-2); font-size: 14px; }
footer.site a:hover { color: var(--ink); }
@media (max-width: 900px){ footer.site .cols { grid-template-columns: 1fr 1fr; gap: 30px; } }

/* ---- reveal / motion -------------------------------------- */
/* Hidden-until-revealed is GATED on the `.js` class set by an inline
   head script. If JS never runs (Safari ITP quirk, blocked inline
   script, parse error in another IIFE) the content stays VISIBLE
   rather than the page going blank. Same gate for the transform.       */
[data-reveal] { transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js [data-reveal]:not(.in) { opacity: 0; transform: translateY(16px); }
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; } [data-reveal], .js [data-reveal]:not(.in) { opacity: 1; transform: none; }
}
@media (max-width: 820px){ :root { --gutter: 20px; } section { padding: 64px 0; } .hero { padding: 64px 0 50px; } }

/* how-it-works — one connected instrument, not three detached boxes.
   The signal rail runs through all three steps and terminates inside
   step 3 (a return loop) — the figure itself shows nothing exits. */
.flow3 { position: relative; display: grid; grid-template-columns: repeat(3,1fr);
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  overflow: hidden; }
.flow3 .step { position: relative; padding: 38px 34px 40px; }
.flow3 .step + .step { border-left: 1px solid var(--line); }
.flow3::before { content: ""; position: absolute; left: 51px; right: 51px; top: 90px;
  height: 1px; z-index: 0;
  background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 11px); }
.flow3 .node { position: relative; z-index: 1; width: 36px; height: 36px;
  display: grid; place-items: center; background: var(--surface);
  border: 1px solid var(--line-2); border-radius: 10px; color: var(--ink);
  margin-bottom: 22px; transition: border-color .25s var(--ease), transform .25s var(--ease); }
.flow3 .node svg { width: 18px; height: 18px; display: block; }
.flow3 .step:hover .node { transform: translateY(-2px); border-color: var(--ink-3); }
.flow3 .ix { font-family: var(--mono); font-size: 12px; color: var(--ink-3); letter-spacing: .14em; }
.flow3 h3 { font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin: 7px 0 10px; }
.flow3 p { color: var(--ink-2); font-size: 15px; line-height: 1.62; margin: 0; }
.flow3 .step.last .node { border-color: var(--ink); }
.flow3 .step.last .rail-end { position: absolute; left: 0; top: 72px; z-index: 0;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 820px){ .flow3 { grid-template-columns: 1fr; }
  .flow3 .step + .step { border-left: 0; border-top: 1px solid var(--line); }
  .flow3::before { display: none; }
  .flow3 .step.last .rail-end { display: none; } }

/* capability board — one connected panel, every real verb (no comparison) */
.board { display: grid; grid-template-columns: repeat(4,1fr);
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); overflow: hidden; }
.board .col { padding: 32px 26px; position: relative; }
.board .col + .col { border-left: 1px solid var(--line); }
.board .col::before { content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 2px; background: var(--ink); opacity: .68; }
.board .bay { display: flex; align-items: center; gap: 9px; font-family: var(--mono);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.board .bay::before { content: ""; width: 6px; height: 6px; border-radius: 2px;
  background: var(--ink); flex: none; }
.board h3 { font-size: 17px; font-weight: 700; letter-spacing: -.02em; margin: 12px 0 0; }
.board ul { list-style: none; margin: 16px 0 0; padding: 0; }
.board li { font-family: var(--mono); font-size: 12.5px; line-height: 1.5;
  color: var(--ink-2); padding: 10px 0; border-top: 1px solid var(--line);
  display: flex; gap: 9px; align-items: flex-start; }
.board li::before { content: "›"; color: var(--ink-3); flex: none; }
.board kbd { font-family: var(--mono); font-size: 11px; background: var(--bg-soft);
  border: 1px solid var(--line); color: var(--ink); padding: 1px 6px; border-radius: 5px; }
@media (max-width: 900px){ .board { grid-template-columns: 1fr 1fr; }
  .board .col:nth-child(3){ border-left: 0; }
  .board .col:nth-child(n+3){ border-top: 1px solid var(--line); } }
@media (max-width: 560px){ .board { grid-template-columns: 1fr; }
  .board .col + .col { border-left: 0; border-top: 1px solid var(--line); } }

/* proof = receipts board: same connected instrument, claim + verify link */
.board .col p { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2);
  line-height: 1.58; margin: 10px 0 0; }
.board .col a.k { font-family: var(--mono); font-size: 12px; color: var(--ink);
  display: inline-flex; align-items: center; gap: 5px; margin-top: 15px;
  border-bottom: 1px solid var(--line-2); padding-bottom: 1px;
  transition: gap .2s var(--ease), border-color .2s var(--ease); }
.board .col a.k:hover { gap: 9px; border-color: var(--ink-3); }
.board.six { grid-template-columns: repeat(3,1fr); }
.board.six .col:nth-child(n+4) { border-top: 1px solid var(--line); }
@media (max-width: 900px){ .board.six { grid-template-columns: 1fr 1fr; }
  .board.six .col:nth-child(3) { border-left: 0; }
  .board.six .col:nth-child(odd) { border-left: 0; }
  .board.six .col:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 560px){ .board.six { grid-template-columns: 1fr; }
  .board.six .col { border-left: 0; } }

/* product = the loop: a 4-up connected instrument (rail curls back) */
.flow3.four { grid-template-columns: repeat(4,1fr); }

/* pricing = connected plans on the same board instrument */
.board .col .price { font-size: clamp(28px,3vw,36px); font-weight: 800;
  letter-spacing: -.03em; color: var(--ink); margin: 12px 0 0; line-height: 1; }
.board .col .price small { font-size: 13px; font-weight: 500; color: var(--ink-3);
  letter-spacing: 0; }
.board .col .btn { margin-top: 22px; width: 100%; justify-content: center; }
.board .col.on::before { opacity: 1; height: 3px; }
.board .col.on .bay { color: var(--ink); }
.board.three { grid-template-columns: repeat(3,1fr); }
@media (max-width: 900px){ .board.three { grid-template-columns: 1fr; }
  .board.three .col + .col { border-left: 0; border-top: 1px solid var(--line); } }