/* ════════════════════════════════════════════════════════════════
   Claire — The AI Trust Company · shared design system
   Voice: Quiet Intelligence. Calm, spare, credible.
   ════════════════════════════════════════════════════════════════ */
:root{
  --ink:#101216; --ink-2:#14161A; --surface:#1B1E25; --surface-2:#20242C;
  --cobalt:#1F3FD8; --cobalt-lt:#6079FF;
  --paper:#F6F3EC; --txt:#EDEAE2; --txt-2:rgba(246,243,236,.82); --muted:#8E9098;
  --hairline:rgba(246,243,236,.13);
  --ok:#4FB477;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--txt);font-family:'Work Sans',sans-serif;font-weight:400;line-height:1.65;-webkit-font-smoothing:antialiased}
.serif{font-family:'Gloock',serif;font-weight:400}
.mono{font-family:'Work Sans',sans-serif;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.narrow{max-width:820px}
a{color:inherit}
em{font-style:italic}
.cobalt{color:var(--cobalt-lt)}

/* ── nav ───────────────────────────────────────────────── */
nav{position:sticky;top:0;background:rgba(16,18,22,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--hairline);z-index:20}
.nav-in{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:16px 28px;max-width:1180px;margin:0 auto}
.logo{display:flex;align-items:center;text-decoration:none}
.logo img{height:24px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{font-family:'Work Sans',sans-serif;font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--txt-2);transition:color .15s}
.nav-links a:hover,.nav-links a.on{color:var(--paper)}
.nav-cta{font-family:'Work Sans',sans-serif;font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border:1px solid var(--paper);padding:9px 16px;transition:all .2s;color:var(--paper);white-space:nowrap}
.nav-cta:hover{background:var(--paper);color:var(--ink)}
.nav-toggle{display:none}
/* Developers dropdown */
.nav-drop{position:relative;display:inline-flex;align-items:center}
.nav-drop-t{font-family:'Work Sans',sans-serif;font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-2);cursor:default;transition:color .15s}
.nav-drop-t::after{content:'▾';font-size:8px;margin-left:6px;opacity:.55}
.nav-drop:hover .nav-drop-t{color:var(--paper)}
.nav-drop-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:14px;display:none}
.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{display:block}
.nav-drop-in{min-width:210px;background:rgba(16,18,22,.98);border:1px solid var(--hairline);border-radius:10px;padding:7px;box-shadow:0 14px 34px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:2px}
.nav-drop-in a{font-family:'Work Sans',sans-serif;font-weight:500;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-2);text-decoration:none;padding:9px 12px;border-radius:7px;white-space:nowrap;transition:all .15s}
.nav-drop-in a:hover{color:var(--paper);background:var(--ink-2)}
@media(max-width:860px){
  .nav-links{display:none}
  .nav-in{flex-wrap:wrap}
}

/* ── buttons ───────────────────────────────────────────── */
.btn{display:inline-block;font-family:'Work Sans',sans-serif;font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;padding:16px 32px;transition:all .2s}
.btn-primary{background:var(--cobalt);color:#fff}
.btn-primary:hover{background:var(--cobalt-lt);color:var(--ink)}
.btn-ghost{border:1px solid var(--paper);color:var(--paper);margin-left:14px}
.btn-ghost:hover{background:var(--paper);color:var(--ink)}
@media(max-width:520px){.btn-ghost{margin-left:0;margin-top:12px}}

/* ── hero ──────────────────────────────────────────────── */
.hero{padding:104px 0 84px;text-align:center;background:radial-gradient(ellipse 70% 55% at 50% 0%,rgba(31,63,216,.16),transparent 70%)}
.hero .kicker{font-size:11px;color:var(--cobalt-lt);margin-bottom:30px}
.hero h1{font-size:clamp(42px,7vw,82px);line-height:1.07;max-width:900px;margin:0 auto 28px;color:var(--paper)}
.hero h1 .ai{color:var(--cobalt-lt)}
.hero p{font-size:19px;max-width:660px;margin:0 auto 42px;color:var(--txt-2)}
.hero.small{padding:78px 0 8px}
.hero.small h1{font-size:clamp(36px,5.4vw,60px);max-width:920px}

/* ── stat strip ────────────────────────────────────────── */
.strip{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:42px 0;background:var(--ink-2)}
.strip .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;text-align:center}
.stat .n{font-family:'Gloock',serif;font-size:40px;color:var(--cobalt-lt);line-height:1.05}
.stat .l{font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.5}

/* ── sections ──────────────────────────────────────────── */
section{padding:92px 0}
.sec-label{font-size:11px;color:var(--cobalt-lt);margin-bottom:20px}
h2{font-family:'Gloock',serif;font-size:clamp(28px,4vw,42px);line-height:1.15;margin-bottom:24px;font-weight:400;color:var(--paper)}
h3{color:var(--paper)}
.lede{font-size:18px;max-width:660px;color:var(--txt-2)}
.lede.center{margin-left:auto;margin-right:auto;text-align:center}

/* ── prose (manifesto) ─────────────────────────────────── */
.prose{max-width:720px}
.prose p{font-size:17px;color:var(--txt-2);margin-bottom:22px;line-height:1.72}
.prose p.big{font-size:20px;color:var(--paper);line-height:1.55}
.prose h3{font-family:'Gloock',serif;font-weight:400;font-size:25px;margin:46px 0 14px}
.prose strong{color:var(--paper);font-weight:500}
.prose em{color:var(--paper);font-style:italic}

/* ── card grid ─────────────────────────────────────────── */
.cards{display:grid;gap:2px;background:var(--hairline);border:1px solid var(--hairline);margin-top:44px}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.cards.c4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--ink);padding:30px 26px}
.card .k{font-family:'Work Sans',sans-serif;font-weight:500;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cobalt-lt);margin-bottom:12px}
.card h3{font-family:'Gloock',serif;font-size:20px;font-weight:400;margin-bottom:9px}
.card p{font-size:14px;color:var(--txt-2);line-height:1.62}
@media(max-width:860px){.cards.c3,.cards.c4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cards.c2,.cards.c3,.cards.c4{grid-template-columns:1fr}}

/* ── panel ─────────────────────────────────────────────── */
.panel{border:1px solid var(--hairline);background:linear-gradient(180deg,rgba(96,121,255,.07),transparent 72%);border-radius:16px;padding:38px 34px;position:relative;overflow:hidden;margin-top:12px}
.panel::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#6079FF,transparent 70%)}

/* ── flow (numbered steps) ─────────────────────────────── */
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;background:var(--hairline);border:1px solid var(--hairline);margin-top:44px}
.flow .step{background:var(--ink);padding:26px 20px}
.flow .step .s-n{font-family:'Work Sans',sans-serif;font-weight:500;font-size:11px;letter-spacing:.16em;color:var(--cobalt-lt);margin-bottom:12px}
.flow .step h3{font-family:'Gloock',serif;font-size:17px;font-weight:400;margin-bottom:8px;line-height:1.2}
.flow .step p{font-size:13px;color:var(--txt-2);line-height:1.58}
@media(max-width:860px){.flow{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.flow{grid-template-columns:1fr}}

/* ── spec table (standards mapping) ────────────────────── */
.spec{width:100%;border-collapse:collapse;margin-top:40px;border:1px solid var(--hairline)}
.spec th,.spec td{text-align:left;padding:18px 20px;border-bottom:1px solid var(--hairline);vertical-align:top;font-size:14.5px}
.spec th{font-family:'Work Sans',sans-serif;font-weight:500;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:400;background:var(--ink-2)}
.spec td:first-child{color:var(--paper);width:34%;font-weight:400}
.spec td:first-child .req{font-family:'Work Sans',sans-serif;font-weight:500;font-size:10.5px;letter-spacing:.1em;color:var(--cobalt-lt);display:block;margin-top:5px}
.spec td:last-child{color:var(--txt-2)}
.spec tr:last-child td{border-bottom:none}
@media(max-width:640px){
  .spec,.spec tbody,.spec tr,.spec td{display:block;width:100%!important}
  .spec thead{display:none}
  .spec td{border-bottom:none;padding:4px 18px}
  .spec tr{border-bottom:1px solid var(--hairline);padding:16px 0;display:block}
  .spec td:first-child{padding-top:14px}
}

/* ── notice / disclosure callout ───────────────────────── */
.notice{border:1px solid var(--hairline);border-left:3px solid var(--cobalt-lt);background:var(--ink-2);padding:22px 26px;border-radius:0 10px 10px 0;margin-top:34px}
.notice .nl{font-family:'Work Sans',sans-serif;font-weight:500;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cobalt-lt);margin-bottom:9px}
.notice p{font-size:14.5px;color:var(--txt-2);line-height:1.66}
.notice p+p{margin-top:12px}

/* ── inverted paper section ────────────────────────────── */
.paper{background:var(--paper);color:var(--ink-2)}
.paper h2{color:var(--ink-2)}
.paper .sec-label{color:var(--cobalt)}
.paper .lede{color:#3a3d43}
.paper .card{background:var(--paper)}
.paper .cards{background:rgba(20,22,26,.14);border-color:rgba(20,22,26,.14)}
.paper .card .k{color:var(--cobalt)}
.paper .card h3{color:var(--ink-2)}
.paper .card p{color:#4a4d53}

/* ── two-column split ──────────────────────────────────── */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:start;margin-top:14px}
.split p{margin-bottom:18px;color:var(--txt-2)}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:36px}}

/* ── ledger visual (list of sealed rows) ───────────────── */
.ledger{border:1px solid var(--hairline);background:var(--surface)}
.ledger .lh{padding:15px 20px;border-bottom:1px solid var(--hairline);display:flex;justify-content:space-between;font-family:'DM Mono',monospace;font-size:10.5px;letter-spacing:.14em;color:var(--muted)}
.ledger .row{padding:14px 20px;border-bottom:1px solid var(--hairline);display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.ledger .row:last-child{border-bottom:none}
.ledger .row .nm{font-size:14px;color:var(--paper)}
.ledger .row .mt{font-size:12px;color:var(--muted);margin-top:2px}
.ledger .row .hash{font-family:'DM Mono',monospace;font-size:10.5px;color:var(--cobalt-lt);white-space:nowrap}
.ledger .row .seal{font-family:'DM Mono',monospace;font-size:10px;color:var(--ok);white-space:nowrap}

/* ── FAQ ───────────────────────────────────────────────── */
.faqlist{max-width:860px;margin:34px auto 0;border-top:1px solid var(--hairline)}
.faqlist details{border-bottom:1px solid var(--hairline)}
.faqlist summary{cursor:pointer;list-style:none;padding:22px 44px 22px 0;font-size:clamp(16px,2.1vw,19px);color:var(--paper);position:relative;font-weight:400;transition:color .15s}
.faqlist summary:hover{color:var(--cobalt-lt)}
.faqlist summary::-webkit-details-marker{display:none}
.faqlist summary::after{content:'+';position:absolute;right:4px;top:19px;font-size:24px;line-height:1;color:var(--cobalt-lt);transition:transform .2s}
.faqlist details[open] summary::after{content:'\2212'}
.faqlist details p{margin:-2px 0 24px;color:var(--txt-2);font-size:15.5px;line-height:1.72;max-width:760px}
.faqlist details p a{color:var(--cobalt-lt)}

/* ── cta ───────────────────────────────────────────────── */
.cta{text-align:center;border-top:1px solid var(--hairline);background:radial-gradient(ellipse 60% 70% at 50% 100%,rgba(31,63,216,.18),transparent 70%)}
.cta h2{max-width:720px;margin:0 auto 20px}
.cta p{max-width:580px;margin:0 auto 40px;color:var(--txt-2)}
.cta .fine{font-size:12.5px;color:var(--muted);margin-top:26px}
.cta .fine a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(246,243,236,.28)}

/* ── footer ────────────────────────────────────────────── */
footer{border-top:1px solid var(--hairline);padding:40px 0}
.foot{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap}
.foot .logo img{height:18px}
.foot-nav{display:flex;gap:26px;flex-wrap:wrap;font-family:'Work Sans',sans-serif;font-weight:500;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase}
.foot-nav a{color:var(--muted);text-decoration:none;transition:color .15s}
.foot-nav a:hover{color:var(--paper)}
.foot .meta{font-family:'Work Sans',sans-serif;font-weight:500;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:right;line-height:1.7}
.foot .meta .sm{text-transform:none;letter-spacing:0}
@media(max-width:640px){.foot{flex-direction:column}.foot .meta{text-align:left}}

/* ── prod wordmark (SalesOS / MarketingOS / GATE) ──────── */
.prod{font-weight:600;letter-spacing:.005em}
.prod .os{color:var(--cobalt-lt)}
.sm{font-size:.5em;vertical-align:super;font-family:'Work Sans',sans-serif;font-weight:400}

@media(max-width:860px){.strip .grid{grid-template-columns:1fr 1fr;gap:26px}}
@media(max-width:520px){.strip .grid{grid-template-columns:1fr}}

/* ── journal / blog ────────────────────────────────────── */
.postlist{max-width:840px;margin:44px auto 0;border-top:1px solid var(--hairline)}
.postlist a.post{display:block;text-decoration:none;padding:28px 4px;border-bottom:1px solid var(--hairline);transition:background .15s}
.postlist a.post:hover{background:var(--ink-2)}
.post .pmeta{font-family:'Work Sans',sans-serif;font-weight:500;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cobalt-lt);margin-bottom:11px}
.post h3{font-family:'Gloock',serif;font-size:clamp(21px,3vw,27px);font-weight:400;color:var(--paper);line-height:1.16;margin-bottom:10px}
.post .pex{font-size:15.5px;color:var(--txt-2);line-height:1.65;max-width:680px}
.post .pmore{font-family:'Work Sans',sans-serif;font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cobalt-lt);margin-top:14px;display:inline-block}
/* article */
.artmeta{max-width:720px;margin:0 auto;text-align:center}
.artmeta .k{font-family:'Work Sans',sans-serif;font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--cobalt-lt);margin-bottom:18px}
.artmeta h1{font-family:'Gloock',serif;font-weight:400;font-size:clamp(30px,5vw,50px);line-height:1.12;color:var(--paper);margin-bottom:20px}
.artmeta .byline{font-family:'Work Sans',sans-serif;font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.artback{display:inline-block;margin-top:8px;font-family:'Work Sans',sans-serif;font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cobalt-lt);text-decoration:none}
.pullquote{font-family:'Gloock',serif;font-size:clamp(21px,3vw,27px);line-height:1.34;color:var(--paper);border-left:2px solid var(--cobalt-lt);padding-left:24px;margin:34px 0}