:root{
  --ink:#17151A; --ink-2:#4A4550; --muted:#79737F;
  --ground:#FFFFFF; --sand:#F4EEE6; --panel:#FBF9F6;
  --rule:#E4DED4; --rule-2:#CFC7BA;
  --accent:#0F52BA; --accent-ink:#0B3D8C; --accent-soft:#E8EFFA;
  --warn:#B4542A; --warn-soft:#FAEDE4;
  --shadow:0 1px 2px rgba(23,21,26,.05), 0 12px 32px -16px rgba(23,21,26,.22);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#F2EFEA; --ink-2:#C4BDB4; --muted:#8F887F;
    --ground:#121013; --sand:#1A171B; --panel:#181519;
    --rule:#2B262C; --rule-2:#3B353D;
    --accent:#6E9BF0; --accent-ink:#9CBCF6; --accent-soft:#16223A;
    --warn:#E0895B; --warn-soft:#2B1D16;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 34px -18px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --ink:#F2EFEA; --ink-2:#C4BDB4; --muted:#8F887F;
  --ground:#121013; --sand:#1A171B; --panel:#181519;
  --rule:#2B262C; --rule-2:#3B353D;
  --accent:#6E9BF0; --accent-ink:#9CBCF6; --accent-soft:#16223A;
  --warn:#E0895B; --warn-soft:#2B1D16;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 34px -18px rgba(0,0,0,.8);
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:"Public Sans",ui-sans-serif,system-ui,sans-serif;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Archivo",ui-sans-serif,system-ui,sans-serif;font-weight:800;
  letter-spacing:-.03em;line-height:1.02;text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit}
/* 1120 left ~400px dead on each side of a 1920 screen - 58% of the display in
   use. 1280 fills a common laptop and still stops well short of the edges on
   anything wider. Prose is not affected: the hero sub-line, legal pages and
   article bodies all carry their own ch-based caps, so lines of text stay the
   same length and only structural blocks get the extra room. */
.wrap{max-width:1280px;margin:0 auto;padding:0 24px}
section{padding:88px 0}
.lab{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-ink)}


/* nav */
nav{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:20px 0;border-bottom:1px solid var(--rule)}
.logo{font-family:"Archivo";font-weight:800;font-size:1.3rem;letter-spacing:-.03em}
.logo span{color:var(--accent)}
.nlinks{display:flex;gap:28px;font-size:.92rem;font-weight:500;color:var(--ink-2)}
/* The announcement bar is gone from the source, but pages already pasted into
   GHL still carry the markup in their Custom Code element. This hides it there
   without re-pasting 31 pages. Safe to drop once every page has been re-pasted. */
.bar{display:none!important}
.btn{display:inline-block;background:var(--accent);color:#fff;font-weight:600;
  padding:13px 22px;border-radius:6px;text-decoration:none;font-size:.95rem;
  border:1px solid var(--accent)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn.lg{padding:17px 30px;font-size:1.02rem}
/* white on blue in both themes; the dark palette needs a deeper blue to carry it */
.btn{color:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn{
  background:#2E5FD0;border-color:#2E5FD0;color:#fff}}
:root[data-theme="dark"] .btn{background:#2E5FD0;border-color:#2E5FD0;color:#fff}
.btn.ghost{color:var(--ink)!important}

/* hero */
.hero{padding:76px 0 64px}
.hero .eyeb{color:var(--muted);font-size:1rem;margin-bottom:18px}
.hero h1{font-size:clamp(2.7rem,6.4vw,4.7rem)}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .sub{margin-top:24px;font-size:1.16rem;color:var(--ink-2);max-width:60ch}
.ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.micro{margin-top:16px;font-family:"IBM Plex Mono",monospace;font-size:.78rem;color:var(--muted)}

/* trust strip */
.strip{background:var(--sand);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.strip .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding-top:0;padding-bottom:0}
.strip div{padding:30px 28px;border-right:1px solid var(--rule)}
.strip div:last-child{border-right:0}
.strip b{display:block;font-family:"Archivo";font-weight:700;font-size:1.05rem;margin-bottom:5px}
.strip p{font-size:.93rem;color:var(--ink-2)}

/* replaces */
.repl{text-align:center;padding:64px 0}
.repl h2{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:26px}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:800px;margin:0 auto}
.chips span{border:1px solid var(--rule-2);border-radius:100px;padding:9px 18px;
  font-size:.9rem;color:var(--ink-2);font-weight:500}
.repl .after{margin-top:26px;font-size:1.05rem;color:var(--ink-2)}
.repl .after b{color:var(--ink)}

/* compare */
.cmp{background:var(--sand)}
.cmp .head{max-width:60ch;margin-bottom:36px}
.cmp h2{font-size:clamp(2rem,4.4vw,3.1rem)}
.cmp .head p{margin-top:16px;font-size:1.08rem;color:var(--ink-2)}
.tbl{background:var(--ground);border:1px solid var(--rule);border-radius:10px;overflow:hidden;
  box-shadow:var(--shadow)}
.tbl table{border-collapse:collapse;width:100%;min-width:600px}
.scroll{overflow-x:auto}
.tbl th,.tbl td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--rule);font-size:.97rem}
.tbl thead th{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);background:var(--panel)}
.tbl tbody td{font-variant-numeric:tabular-nums}
.tbl .you{background:var(--accent-soft);font-weight:700;color:var(--accent-ink)}
.tbl tr:last-child td{border-bottom:0}
.cmp .note{margin-top:22px;font-size:.92rem;color:var(--muted)}

/* feature blocks */
/* Gap scales with the page. At a fixed 60px the columns grew when .wrap went
   wider and the channel between illustration and copy stayed put, so the row
   read tighter than before. clamp keeps the old feel on a laptop and opens up
   on a wide screen. */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(56px,5.5vw,104px);
  align-items:center;
  padding:64px 0;border-bottom:1px solid var(--rule)}
.feat:last-of-type{border-bottom:0}
.feat.flip .txt{order:2}
.feat h3{font-size:clamp(1.7rem,3.4vw,2.3rem);margin:12px 0 16px}
.feat p{color:var(--ink-2)}
.feat ul{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.feat li{padding-left:28px;position:relative;color:var(--ink-2);font-size:.98rem}
.feat li::before{content:"";position:absolute;left:0;top:8px;width:14px;height:8px;
  border-left:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);
  transform:rotate(-45deg)}
.shot{background:var(--panel);border:1px solid var(--rule);border-radius:12px;
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow);padding:28px;text-align:center}
.shot .ph{font-family:"IBM Plex Mono",monospace;font-size:.78rem;color:var(--muted);line-height:1.7}
.shot .ph b{display:block;color:var(--ink);font-size:.92rem;margin-bottom:8px;font-family:"Archivo"}

/* capability inventory */
.inv{background:var(--panel);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.invgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
.col{padding:26px 24px 28px;border:1px solid var(--rule);border-radius:10px;background:var(--ground)}
.col h3{font-size:1.06rem;margin-bottom:4px}
.col .cs{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);display:block;margin-bottom:16px}
.col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.col li{font-size:.9rem;color:var(--ink-2);display:flex;justify-content:space-between;
  align-items:baseline;gap:8px;line-height:1.4}
.tg{font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.06em;
  color:var(--accent-ink);background:var(--accent-soft);padding:2px 6px;border-radius:3px;
  white-space:nowrap;flex:none;font-weight:600}
.invfoot{margin-top:24px;font-size:.95rem;color:var(--ink-2)}
.invfoot b{color:var(--ink)}
@media(max-width:1000px){.invgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.invgrid{grid-template-columns:1fr}}

/* pricing */
.pricing{background:var(--sand)}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px;align-items:stretch}
.plan{background:var(--ground);border:1px solid var(--rule);border-radius:10px;padding:26px 22px 28px;
  display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow)}
.plan.pop{border:2px solid var(--accent)}
.plan .pn{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.plan.pop .pn{color:var(--accent-ink)}
.plan h3{font-size:1.35rem}
.plan .pr{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:2.2rem;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.plan .pr small{font-size:.8rem;font-weight:400;color:var(--muted);letter-spacing:0}
.plan .for{font-size:.92rem;color:var(--ink-2)}
.plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:.9rem;color:var(--ink-2)}
.plan li{padding-left:20px;position:relative}
.plan li::before{content:"+";position:absolute;left:0;color:var(--accent);font-weight:700}
.plan .cta{margin-top:auto;padding-top:12px}
.plan .cta a{display:block;text-align:center}
.pfoot{margin-top:26px;text-align:center;font-size:.95rem;color:var(--ink-2)}
.pfoot b{color:var(--ink)}

/* benefits */
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.bcard{border:1px solid var(--rule);border-radius:10px;padding:26px 24px;background:var(--panel)}
.bcard h3{font-size:1.12rem;margin-bottom:9px}
.bcard p{font-size:.94rem;color:var(--ink-2)}

/* founder */
.founder{background:var(--ink);color:var(--ground)}
.founder .wrap{max-width:760px;text-align:center}
.founder h2{font-size:clamp(1.8rem,3.8vw,2.6rem);color:var(--ground)}
.founder p{margin-top:20px;font-size:1.08rem;color:#CFC9C2}
.founder .sig{margin-top:26px;font-family:"IBM Plex Mono",monospace;font-size:.82rem;color:#9B948C}

/* faq */
.faq details{border-bottom:1px solid var(--rule);padding:20px 0}
.faq summary{font-family:"Archivo";font-weight:700;font-size:1.08rem;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-weight:700;font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq p{margin-top:12px;color:var(--ink-2);font-size:.98rem;max-width:75ch}

/* final */
.final{text-align:center;background:var(--sand)}
.final h2{font-size:clamp(2.1rem,5vw,3.4rem)}
.final p{margin-top:18px;font-size:1.1rem;color:var(--ink-2)}
.final .ctas{justify-content:center}

footer{border-top:1px solid var(--rule);padding:44px 0;font-size:.9rem;color:var(--muted)}
footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}

@media(max-width:900px){
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .bgrid{grid-template-columns:repeat(2,1fr)}
  .feat{grid-template-columns:1fr;gap:32px}
  .feat.flip .txt{order:0}
  .strip .wrap{grid-template-columns:1fr}
  .strip div{border-right:0;border-bottom:1px solid var(--rule)}
  .nlinks{display:none}
}
@media(max-width:600px){
  .pgrid,.bgrid{grid-template-columns:1fr}
  section{padding:60px 0}
}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* footer */
footer{border-top:1px solid var(--rule);background:var(--panel);padding:64px 0 0}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:40px}
.fbrand .logo{font-size:1.25rem}
.fbrand p{margin-top:14px;font-size:.93rem;color:var(--ink-2);max-width:34ch}
.social{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.social a{width:38px;height:38px;border:1px solid var(--rule-2);border-radius:8px;
  display:flex;align-items:center;justify-content:center;color:var(--ink-2);
  transition:border-color .15s,color .15s}
.social a:hover{border-color:var(--accent);color:var(--accent)}
.social svg{width:17px;height:17px;fill:currentColor}
.fcol h4{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0 0 16px;font-weight:600}
.fcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.fcol a{font-size:.9rem;color:var(--ink-2);text-decoration:none}
.fcol a:hover{color:var(--accent);text-decoration:underline}
.fbar{margin-top:56px;border-top:1px solid var(--rule);padding:22px 0 30px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:.85rem;color:var(--muted)}
.fbar a{text-decoration:none;color:var(--muted)}
.fbar a:hover{color:var(--accent)}
.fbar .legal{display:flex;gap:18px;flex-wrap:wrap}
@media(max-width:960px){.fgrid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:620px){.fgrid{grid-template-columns:1fr 1fr}.fbrand{grid-column:1/-1}}