:root{
  color-scheme:dark;
  --canary:#FFFF39;--ink:#1C1B17;
  /* Warm surface ladder with a GENUINE mid-grey step (--bg-mid), because the
     previous values were all near-black and read as one flat wall: adjacent
     steps were ~1.18:1. Now base->mid is 2.31:1 — a real tonal difference, not
     a slightly lighter black. Anchored on the brand warm grey-brown family, so
     every step stays warm (R>G>B). Still dark-first; no light page background.
     Text on the mid tones needs its own values to hold AA — see .g-mid below. */
  --bg:#1C1B17;          /* Black Bird, page base            */
  --bg-2:#2E2A23;        /* raised band        base +1.21:1  */
  --bg-3:#453E33;        /* elevated band      base +1.63:1  */
  --bg-mid:#5C5448;      /* MID GREY band      base +2.31:1  */
  --surface:#3A342B;     /* card on base                     */
  --surface-2:#544C40;   /* card on raised/elevated          */
  --surface-3:#6B6355;   /* card on the mid band             */
  --line:rgba(255,255,255,.14);--line-2:rgba(255,255,255,.26);
  --line-mid:rgba(255,255,255,.30);
  --text:#F7F5EF;--muted:#B5B0A6;--subtle:#8A8478;
  /* Secondary text on the mid tones: #B5B0A6 only reaches 3.45:1 there. */
  --on-mid-muted:#EDE9E0;
  --sans:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --wrap:1180px;--r:12px;--r-lg:18px;--r-pill:999px;
  --shadow:0 30px 70px -30px rgba(0,0,0,.7);
  --ease:cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;letter-spacing:-.01em}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:800;line-height:.98;letter-spacing:-.04em;text-wrap:balance;color:var(--text)}
h1{font-size:clamp(3rem,6.4vw,5.4rem);font-weight:900;line-height:1.04}
h2{font-size:clamp(2.1rem,4vw,3.3rem);font-weight:900}
h3{font-size:1.2rem;letter-spacing:-.02em}
p{margin:0}
::selection{background:var(--canary);color:var(--ink)}

.hd{position:sticky;top:0;z-index:200;background:rgba(28,27,23,.86);backdrop-filter:saturate(150%) blur(12px);border-bottom:1px solid var(--line)}
.hd__in{max-width:var(--wrap);margin:0 auto;padding:0 26px;height:68px;display:flex;align-items:center;gap:10px}
.logo{display:inline-flex;align-items:center;margin-right:22px}
.logo img{height:22px;width:auto;display:block}
.nav{display:none;align-items:center;gap:2px}
.nav a,.nav button{font:inherit;font-size:.95rem;font-weight:500;color:var(--text);background:none;border:0;cursor:pointer;padding:.5rem .7rem;border-radius:9px;display:inline-flex;align-items:center;gap:.32rem}
.nav a:hover,.nav button:hover{background:var(--surface);color:var(--canary)}
.right{margin-left:auto;display:none;align-items:center;gap:15px}
.right .contact{font-weight:500;font-size:.95rem}
.right .contact:hover{color:var(--canary)}
.burger{margin-left:auto;width:44px;height:44px;border:1px solid var(--line-2);border-radius:11px;background:var(--surface);display:grid;place-items:center;cursor:pointer}
@media(min-width:1000px){.nav{display:flex}.right{display:flex}.burger{display:none}}

.mm{position:relative}
.mm__p{position:absolute;top:calc(100% + 6px);left:0;min-width:600px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:20px;display:none;grid-template-columns:1fr 1fr;gap:12px 28px;align-items:start}
.mm.open .mm__p{display:grid}
.mm__h{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--subtle);margin-bottom:9px}
.mm__p a{display:block;padding:.48rem .55rem;border-radius:8px;font-size:.92rem;font-weight:500;color:var(--text)}
.mm__p a:hover{background:var(--surface);color:var(--canary)}
.mm__all{grid-column:1/-1;margin-top:6px;padding-top:12px!important;border-top:1px solid var(--line);font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--canary)!important}
.caret{transition:transform .2s var(--ease)}.mm.open .caret{transform:rotate(180deg)}

.drawer{position:fixed;inset:0;z-index:400;visibility:hidden}
.drawer.open{visibility:visible}
.drawer__ov{position:absolute;inset:0;background:rgba(0,0,0,.6);opacity:0;transition:.2s}.drawer.open .drawer__ov{opacity:1}
.drawer__p{position:absolute;top:0;right:0;bottom:0;width:min(88vw,330px);background:var(--bg-2);border-left:1px solid var(--line);transform:translateX(100%);transition:.28s var(--ease);padding:20px;display:flex;flex-direction:column;gap:.1rem;overflow:auto}
.drawer.open .drawer__p{transform:none}
.drawer__p a{padding:.75rem .3rem;font-weight:600;border-bottom:1px solid var(--line);color:var(--text)}
.drawer__close{align-self:flex-end;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:#fff;font-size:1.2rem;cursor:pointer;margin-bottom:.3rem}

.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:1rem;padding:.82rem 1.5rem;border-radius:var(--r-pill);border:1.6px solid transparent;cursor:pointer;transition:.18s var(--ease);min-height:48px}
.btn--accent{background:var(--canary);color:var(--ink);border-color:var(--canary)}
.btn--accent:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--canary);color:var(--canary)}
.btn--dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn--dark:hover{background:#000}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px}
.sec{padding:clamp(52px,6vw,84px) 0}
.sec--t{padding:clamp(38px,4.4vw,62px) 0}
.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--canary);display:inline-flex;align-items:center;gap:.55rem;margin-bottom:1.1rem}
.eyebrow::before{content:"";width:18px;height:1.6px;background:var(--canary)}
.lede{font-size:clamp(1.08rem,1.5vw,1.28rem);color:var(--muted);max-width:42ch;line-height:1.5}
.head{max-width:720px;margin-bottom:clamp(28px,4vw,46px)}
.head--c{margin-left:auto;margin-right:auto;text-align:center}.head--c .eyebrow{justify-content:center}
.split{display:grid;gap:clamp(34px,5vw,56px);align-items:center}
@media(min-width:920px){.split{grid-template-columns:1fr 1fr}.split--a{grid-template-columns:1.02fr .98fr}}
.grid{display:grid;gap:14px}
.g4{grid-template-columns:repeat(auto-fit,minmax(228px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.stack>*+*{margin-top:1rem}
.cluster{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center}
.muted{color:var(--muted)}
.mark{white-space:nowrap;background-image:linear-gradient(var(--canary),var(--canary));background-repeat:no-repeat;background-position:0 100%;background-size:100% .12em;padding-bottom:.06em}

/* SECTION GROUNDS — three tones only, on a calm repeating rhythm: the dark base,
   one mid tone, one light band, plus the occasional canary block. .g-2 and .g-3
   are kept as aliases of the mid tone so existing markup keeps working; a new
   shade per section was the thing that read as noise. Backgrounds are SOLID and
   meet at a hard edge — no gradients, no feathering, no divider rules. */
.g-2,.g-3,.g-mid{background:var(--bg-mid)}
.g-canary{background:var(--canary);color:var(--ink)}
/* Cards sit LIGHTER than the band behind them, so they read as raised. */
.g-2 .card,.g-2 .doc,.g-2 .party,.g-2 .case,.g-2 .docx,.g-2 .ograph,
.g-3 .card,.g-3 .doc,.g-3 .party,.g-3 .case,.g-3 .docx,.g-3 .ograph,
.g-mid .card,.g-mid .doc,.g-mid .party,.g-mid .case,.g-mid .docx,.g-mid .ograph{
  background:var(--surface-3);border-color:var(--line-mid)}
.g-2 a.card:hover,.g-3 a.card:hover,.g-mid a.card:hover{
  background:var(--surface-2);border-color:var(--canary)}

.g-canary h1,.g-canary h2,.g-canary h3{color:var(--ink)}.g-canary .muted{color:#4b4934}.g-canary .eyebrow{color:#4b4934}.g-canary .eyebrow::before{background:var(--ink)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;display:flex;flex-direction:column;gap:.55rem;height:100%}
.card__k{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--subtle)}
.card__t{font-size:1.08rem;font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--text)}
a.card{transition:.2s var(--ease)}
a.card:hover{border-color:var(--line-2);background:var(--surface-2);transform:translateY(-3px)}
a.card:hover .card__t{color:var(--canary)}
.numo{width:42px;height:42px;border-radius:50%;background:var(--canary);color:var(--ink);display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:.95rem;margin-bottom:.3rem}
.arrow{margin-top:auto;font-weight:600;font-size:.88rem;color:var(--muted);display:inline-flex;gap:.35rem;align-items:center}
.arrow::after{content:"\2192";transition:transform .18s var(--ease)}
a.card:hover .arrow{color:var(--canary)}a.card:hover .arrow::after{transform:translateX(4px)}

.badge{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;padding:.26rem .55rem;border:1px solid var(--line-2);border-radius:var(--r-pill);color:var(--muted)}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.badge--live{color:var(--text);border-color:var(--line-2)}.badge--live .dot{background:var(--canary);box-shadow:0 0 0 3px rgba(255,255,57,.25)}
.badge--soon{border-style:dashed;color:var(--subtle)}
.tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);padding:.24rem .5rem;border-radius:6px}
.bchip{cursor:pointer;background:transparent;line-height:1.4}
.bchip:hover{border-color:var(--line-2);color:var(--text)}
.bchip.on{background:var(--canary);color:var(--ink);border-color:var(--canary)}

/* CASE panel — the signature technical visual */
.case{border:1px solid var(--line-2);border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 22%),linear-gradient(180deg,var(--surface),var(--bg-2));box-shadow:0 44px 90px -34px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.02) inset;overflow:hidden;position:relative}
.case__bar{display:flex;align-items:center;gap:.4rem;padding:.65rem .9rem;border-bottom:1px solid var(--line);background:rgba(0,0,0,.25)}
.case__bar i{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.case__bar .nm{margin-left:.5rem;font-family:var(--mono);font-size:.7rem;color:var(--muted)}
.case__bar .wf{font-weight:600;font-size:.9rem;color:var(--text);display:inline-flex;align-items:center;gap:.5rem}
.case__bar .wf::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--canary);box-shadow:0 0 0 3px rgba(255,255,57,.25)}
.case__bar .st{margin-left:auto;font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink);background:var(--canary);padding:.18rem .5rem;border-radius:var(--r-pill)}
.case__body{padding:14px}
.cstep{display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:start;padding:12px 6px;position:relative}
.cstep+.cstep{border-top:1px solid var(--line)}
.cstep .n{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;font-family:var(--mono);font-size:.66rem;color:var(--subtle);background:var(--bg-2);z-index:1;transition:.35s}
.cstep::before{content:"";position:absolute;left:18px;top:0;bottom:0;width:1.5px;background:var(--line);z-index:0}
.cstep:first-child::before{top:50%}.cstep:last-child::before{bottom:50%}
.cstep__t{font-weight:700;font-size:.92rem}
.cstep__d{font-size:.78rem;color:var(--muted);margin-top:1px}
.cstep__s{font-family:var(--mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.06em;color:var(--subtle);white-space:nowrap;padding-top:.35rem}
.cstep.on .n{background:var(--canary);border-color:var(--canary);color:var(--ink);font-weight:700}
.cstep.on{background:linear-gradient(90deg,rgba(255,255,57,.10),transparent);border-radius:10px;box-shadow:inset 2px 0 0 var(--canary)}
.cstep.on .cstep__s{color:var(--canary)}
.caserot{position:relative}
.caserot .case{display:none}
.caserot .case.active{display:block;opacity:1}
@keyframes cfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.caserot__dots{display:flex;gap:.4rem;justify-content:center;margin-top:12px}
.caserot__dots b{width:6px;height:6px;border-radius:50%;background:var(--line-2);transition:.3s}
.caserot__dots b.on{background:var(--canary);width:18px;border-radius:3px}
.case__foot{border-top:1px solid var(--line);padding:12px 14px;display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;background:rgba(0,0,0,.2)}
.chip-k{font-family:var(--mono);font-size:.62rem;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:.22rem .5rem}
.chip-k b{color:var(--text);font-weight:500}

/* mini states */
.state{display:flex;align-items:center;gap:.55rem;font-size:.88rem;font-weight:600;padding:.5rem 0}
.state+.state{border-top:1px solid var(--line)}
.state::before{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font-size:11px;line-height:19px;text-align:center;flex:none;font-weight:700}
.state--ok::before{content:"\2713";background:var(--canary);color:var(--ink)}
.state--miss::before{content:"!";background:#4a4740;color:#fff}
.state--flag::before{content:"\00D7";background:#fff;color:var(--ink)}
.doc{display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:center;padding:.6rem .75rem;border:1px solid var(--line);border-radius:10px;background:var(--bg-2)}
.doc i{width:24px;height:31px;border-radius:4px;background:var(--surface-2);border:1px solid var(--line-2)}
.doc b{font-size:.86rem}.doc small{font-family:var(--mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.06em;color:var(--subtle)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--canary);color:var(--ink);display:grid;place-items:center;font-weight:700;font-size:.72rem;font-family:var(--mono);flex:none}

/* six-stage rail */
.rail{display:grid;gap:1px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--line)}
@media(min-width:760px){.rail{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1080px){.rail{grid-template-columns:repeat(6,1fr)}}
.rnode{background:var(--bg-2);padding:24px 20px;opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.reveal.in .rnode{opacity:1;transform:none}
.rnode:nth-child(1){transition-delay:.03s}.rnode:nth-child(2){transition-delay:.09s}.rnode:nth-child(3){transition-delay:.15s}.rnode:nth-child(4){transition-delay:.21s}.rnode:nth-child(5){transition-delay:.27s}.rnode:nth-child(6){transition-delay:.33s}
.rnode .n{font-family:var(--mono);color:var(--canary);font-weight:500;font-size:.8rem}
.rnode h3{font-size:1.02rem;margin:.55rem 0 .4rem}
.rnode p{font-size:.82rem;color:var(--muted);line-height:1.45}

/* screenshot slot */
.shot{border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--bg-2);overflow:hidden;box-shadow:var(--shadow)}
.shot__bar{display:flex;align-items:center;gap:.4rem;padding:.6rem .85rem;border-bottom:1px solid var(--line);background:rgba(0,0,0,.25)}
.shot__bar i{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.shot__bar span{margin-left:.5rem;font-family:var(--mono);font-size:.68rem;color:var(--subtle)}
.shot__ph{aspect-ratio:16/10;display:grid;place-items:center;text-align:center;gap:.4rem;color:var(--subtle);background:repeating-linear-gradient(45deg,transparent,transparent 12px,rgba(255,255,255,.02) 12px,rgba(255,255,255,.02) 24px)}
.shot__ph .mono{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase}

/* engine flow: Define -> Blackbird engine -> Verified data */
.engine{display:grid;gap:9px}
.ecol{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--surface)}
.ecol--engine{border-color:var(--canary);background:linear-gradient(180deg,var(--surface-2),var(--surface))}
.ecol__h{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:.95rem;margin-bottom:.55rem;color:var(--text)}
.ecol__h .sq{width:12px;height:12px;background:var(--canary);border-radius:3px}
.ecol ul{list-style:none;margin:0;padding:0;display:grid;gap:.32rem}
.ecol li{font-size:.8rem;color:var(--muted);font-family:var(--mono);display:flex;gap:.45rem;align-items:center}
.ecol li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--subtle);flex:none}
.ecol--engine li::before{background:var(--canary)}
.earrow{justify-self:center;color:var(--subtle);font-size:1rem;line-height:1}
.kv{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.kv div{display:flex;justify-content:space-between;gap:1rem;padding:.55rem .78rem;border-bottom:1px solid var(--line);font-size:.84rem}
.kv div:last-child{border-bottom:0}.kv .k{color:var(--subtle)}.kv .v{font-family:var(--mono);font-size:.76rem;display:inline-flex;align-items:center;gap:.5rem}
.vtag{font-family:var(--mono);font-size:.52rem;text-transform:uppercase;letter-spacing:.06em;padding:.12rem .4rem;border-radius:5px;border:1px solid var(--line-2);color:var(--subtle)}
.vtag--v{color:var(--ink);background:var(--canary);border-color:var(--canary)}

.pricebox{max-width:820px;margin:0 auto;border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.pricebox__top{background:var(--surface);padding:32px 32px 28px;border-bottom:1px solid var(--line)}
.pricebox__grid{display:grid;gap:1px;background:var(--line)}
@media(min-width:640px){.pricebox__grid{grid-template-columns:1fr 1fr 1fr}}
.pricebox__cell{background:var(--bg-2);padding:18px 20px}
.pricebox__cta{background:var(--surface);padding:24px 32px;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;border-top:1px solid var(--line)}

.tile{display:flex;align-items:center;justify-content:center;padding:14px;border:1px solid var(--line);border-radius:10px;min-height:58px;font-weight:600;color:var(--muted);font-size:.88rem;text-align:center;background:var(--bg-2)}

.field{margin-bottom:.9rem}
.flabel{display:block;font-size:.8rem;font-weight:600;color:var(--muted);margin-bottom:.35rem}
.inp{width:100%;padding:.7rem .85rem;border:1px solid var(--line-2);border-radius:10px;background:var(--bg-2);color:var(--text);font:inherit;font-size:.95rem}
.inp::placeholder{color:var(--subtle)}
.inp:focus{outline:none;border-color:var(--canary);box-shadow:0 0 0 3px rgba(255,255,57,.18)}
textarea.inp{min-height:110px;resize:vertical}
.certmark{display:inline-grid;place-items:center;min-width:44px;padding:0 .5rem;height:44px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line-2);color:var(--canary);font-family:var(--mono);font-weight:700;font-size:.7rem;margin-bottom:.4rem}
.vidslot{position:relative;border:1px solid var(--line-2);border-radius:20px;background:radial-gradient(120% 120% at 50% 0%,rgba(255,255,57,.05),transparent 60%),linear-gradient(180deg,var(--surface),var(--bg-2));aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;box-shadow:var(--shadow)}
.vidslot .play{width:66px;height:66px;border-radius:50%;background:var(--canary);color:var(--ink);display:grid;place-items:center;font-size:1.4rem;box-shadow:0 0 0 12px rgba(255,255,57,.10);cursor:pointer;transition:transform .2s var(--ease)}
.vidslot:hover .play{transform:scale(1.06)}
.vidslot .cap{position:absolute;bottom:14px;left:16px;font-family:var(--mono);font-size:.64rem;color:var(--subtle);text-transform:uppercase;letter-spacing:.06em}
.bgroup{margin-top:38px;border-top:1px solid var(--line);padding-top:22px}
.bgroup__h{justify-content:space-between;margin-bottom:16px}
.bgroup__h h3{font-size:1.15rem}
/* grounds the page without dropping to pure black, which now reads as a slab */
.ft{background:#15140F;border-top:1px solid var(--line)}
.ft a{color:var(--muted)}.ft a:hover{color:var(--canary)}
.ft__grid{display:grid;gap:24px 30px;grid-template-columns:1.7fr 1fr 1fr 1fr 1fr}
@media(max-width:820px){.ft__grid{grid-template-columns:1fr 1fr}}
.ft h4{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--subtle);margin-bottom:.8rem;font-weight:500}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:.42rem;font-size:.88rem}
.ft__bot{border-top:1px solid var(--line);margin-top:28px;padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.74rem;color:var(--subtle);font-family:var(--mono)}

/* hero glow */
.glow{position:relative;overflow:hidden}
.glow::before{content:"";position:absolute;top:-40%;right:-12%;width:70%;height:150%;background:radial-gradient(closest-side,rgba(255,255,57,.16),rgba(255,255,57,.05) 45%,transparent 72%);pointer-events:none;z-index:0;filter:blur(6px)}
.glow::after{content:"";position:absolute;inset:0;background:radial-gradient(130% 90% at 60% -20%,rgba(255,255,57,.05),transparent 55%),linear-gradient(180deg,rgba(255,255,255,.02),transparent 30%);pointer-events:none;z-index:0}
.glow>*{position:relative;z-index:1}

@media (prefers-reduced-motion:reduce){.reveal .rnode{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .glow .stack>*{opacity:0;animation:heroIn .7s var(--ease) forwards}
  .glow .stack>*:nth-child(1){animation-delay:.06s}
  .glow .stack>*:nth-child(2){animation-delay:.16s}
  .glow .stack>*:nth-child(3){animation-delay:.28s}
  .glow .stack>*:nth-child(4){animation-delay:.4s}
  @keyframes heroIn{from{opacity:0;transform:translateY(16px);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
  .glow::before{animation:drift 16s ease-in-out infinite alternate}
  @keyframes drift{from{transform:translate(0,0)}to{transform:translate(-5%,4%) scale(1.05)}}
  .has-io .head{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
  .has-io .head.in{opacity:1;transform:none}
}

/* ==========================================================================
   Multi-page additions. Everything below was added when the single-file
   preview became a real multi-page site.
   ========================================================================== */

/* --- light surface tokens (warm, per locked palette: no cool greys) ------- */
:root{
  --light:#F3F1EB;        /* warm light band  */
  --light-2:#E7E4DB;      /* raised on light  */
  --light-line:rgba(28,27,23,.14);
  --on-light:var(--ink);
  --on-light-muted:#5E5B54;  /* brand warm grey; 5.9:1 on --light, passes AA */
}

/* --- a11y utilities ------------------------------------------------------- */
.skip{position:absolute;left:-9999px;top:0;z-index:500;background:var(--canary);color:var(--ink);padding:.7rem 1.1rem;font-weight:700;border-radius:0 0 10px 0}
.skip:focus{left:0}
.vis-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--canary);outline-offset:2px;border-radius:4px}
.nav a[aria-current="page"]{color:var(--canary)}
.lnk{color:var(--canary);text-decoration:underline;text-underline-offset:3px}

/* --- breadcrumb ---------------------------------------------------------- */
.crumb{border-bottom:1px solid var(--line);background:var(--bg-2)}
.crumb .wrap{padding-top:.7rem;padding-bottom:.7rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--subtle)}
.crumb a{color:var(--muted)}.crumb a:hover{color:var(--canary)}
.crumb span{color:var(--text)}

/* --- the light inverse band (page rhythm; fixes "one black slab") -------- */
.g-light{background:var(--light);color:var(--on-light)}
.g-light h1,.g-light h2,.g-light h3,.g-light h4{color:var(--on-light)}
.g-light .muted,.g-light p{color:var(--on-light-muted)}
.g-light .lede{color:var(--on-light-muted)}
.g-light .eyebrow{color:var(--on-light-muted)}
.g-light .eyebrow::before{background:var(--ink)}
.g-light .rail{border-color:var(--light-line);background:var(--light-line)}
.g-light .rnode{background:var(--light)}
.g-light .rnode .n{color:var(--on-light-muted)}
.g-light .rnode h3{color:var(--on-light)}
.g-light .rnode p{color:var(--on-light-muted)}
.g-light .card{background:var(--light-2);border-color:var(--light-line)}
.g-light .card__k,.g-light .card small{color:var(--on-light-muted)}
.g-light .card__t{color:var(--on-light)}
.g-light .tag{color:var(--on-light-muted);border-color:var(--light-line)}
/* Canary is unreadable as text on light — accents become ink here. */
.g-light .numo{background:var(--ink);color:#fff}
.g-light .state--ok::before{background:var(--ink);color:var(--canary)}
.g-light .state--miss::before{background:#b9b4a6;color:var(--ink)}
.g-light .state--flag::before{background:var(--ink);color:#fff}

/* --- answer-first block (AEO extraction target) -------------------------- */
.answer{max-width:60ch;border-left:3px solid var(--canary);padding:.1rem 0 .1rem 1.3rem}
.answer__q{font-size:clamp(1.22rem,1.9vw,1.5rem);font-weight:800;letter-spacing:-.03em;margin-bottom:.5rem}
.answer__a{font-size:clamp(1rem,1.25vw,1.08rem);line-height:1.55;color:var(--text)}
/* the answer block is a single tight statement — it shouldn't get a full band */
.sec--answer{padding:clamp(30px,3.4vw,46px) 0}

/* --- FAQ ----------------------------------------------------------------- */
.faqs{max-width:820px;border-top:1px solid var(--light-line)}
.faq{border-bottom:1px solid var(--light-line)}
.faq summary{cursor:pointer;padding:1.05rem 2.2rem 1.05rem 0;position:relative;list-style:none;display:block}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{display:inline;font-size:1.04rem;font-weight:700;letter-spacing:-.02em;color:var(--on-light)}
.faq summary::after{content:"";position:absolute;right:.3rem;top:1.35rem;width:11px;height:11px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);transition:transform .22s var(--ease)}
.faq[open] summary::after{transform:rotate(225deg)}
.faq__a{padding:0 2.2rem 1.15rem 0}
.faq__a p{font-size:.97rem;line-height:1.62;color:var(--on-light-muted)}

/* --- certification band -------------------------------------------------- */
.certgrid .cert{display:flex;align-items:center;gap:.85rem;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.certgrid .cert p{font-weight:600;font-size:.95rem}
.certgrid .certmark{margin-bottom:0;flex:none}

/* --- mobile drawer group headings ---------------------------------------- */
.drawer__h{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--subtle);margin:1.1rem 0 .2rem;padding:0 .3rem}

/* --- hero spacing on inner pages ---------------------------------------- */
.sec--hero{padding-top:clamp(44px,5vw,72px)}
.sec--hero h1{font-size:clamp(2.3rem,4.6vw,3.7rem)}

/* --- static document list (solution "what it collects") ----------------- */
.doc--static{background:var(--surface)}

/* ==========================================================================
   WorkflowCase — motion that shows the product doing work.
   Driven by JS classes (.is-active / .is-done) rather than blind keyframes, so
   the accent tracks real stage progression and can pause off-screen.
   ========================================================================== */
.wfcase{--accent-y:0}
.cstep{transition:background .4s var(--ease)}
.cstep .n{transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease)}

/* directional progress accent: a bar that slides down the steps */
.wfcase .case__body{position:relative}
.cstep.is-done .n{background:var(--surface-2);border-color:var(--line-2);color:var(--muted)}
.cstep.is-done .cstep__s{color:var(--subtle)}
.cstep.is-active{background:linear-gradient(90deg,rgba(255,255,57,.12),transparent 78%);border-radius:10px;box-shadow:inset 2px 0 0 var(--canary)}
.cstep.is-active .n{background:var(--canary);border-color:var(--canary);color:var(--ink);font-weight:700}
.cstep.is-active .cstep__s{color:var(--canary)}
.cstep.is-active .cstep__t{color:var(--text)}

/* document chips arrive as they are collected */
.case__docs{display:grid;gap:.4rem;padding:0 14px 14px;border-top:1px solid var(--line);padding-top:12px}
.case__docs .doc{opacity:0;transform:translateY(6px) scale(.985);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.case__docs .doc.in{opacity:1;transform:none}
.case__docs .doc small{color:var(--canary)}

@media (prefers-reduced-motion:reduce){
  .case__docs .doc{opacity:1;transform:none;transition:none}
  .cstep,.cstep .n{transition:none}
}

/* cards whose destination is not built yet: keep the styling, drop the affordance */
[data-unlinked]{cursor:default}
a.card[data-unlinked]:hover,span.card[data-unlinked]:hover{transform:none;border-color:var(--line);background:var(--surface)}
span.card[data-unlinked] .arrow{display:none}

/* --- density pass: solution pages were running far too long ------------- */
/* documents as a 2-up grid of compact rows, not 8 full-width bars */
.docgrid{gap:8px}
.docgrid .doc{padding:.48rem .65rem;gap:.55rem}
.docgrid .doc i{width:19px;height:24px}
.docgrid .doc b{font-size:.84rem;font-weight:600}
.docgrid .doc small{font-size:.54rem}

/* parties: compact cells, not tall cards with dead space */
.partygrid{gap:10px}
/* 6 parties should read as two clean rows of three, not 4 + a gap */
@media(min-width:900px){.partygrid{grid-template-columns:repeat(3,1fr)}}
.party{border:1px solid var(--line);border-radius:12px;padding:13px 15px;background:var(--surface)}
.party__n{font-size:.92rem;font-weight:700;letter-spacing:-.02em;color:var(--text)}
.party__d{font-size:.8rem;color:var(--muted);margin-top:.18rem;line-height:1.4}
.g-light .party{background:var(--light-2);border-color:var(--light-line)}
.g-light .party__n{color:var(--on-light)}.g-light .party__d{color:var(--on-light-muted)}

/* trust facts as three lines rather than three cards */
.trustrow{margin-top:14px;display:grid;gap:.45rem}
.trustrow p{font-size:.9rem;color:var(--muted);line-height:1.5}
.trustrow b{color:var(--text);font-weight:700}

/* tighter certification row */
.certgrid{gap:10px}
.certgrid .cert{padding:12px 15px}

/* ==========================================================================
   Ownership graph — the "complex workflow" visual. Multi-layer, multi-
   jurisdiction, with the AI's work labelled and the unresolved gap visible.
   Replaces the flat icon list, which couldn't fill its column.
   ========================================================================== */
.ograph{margin:0;border:1px solid var(--line-2);border-radius:20px;overflow:hidden;
  background:radial-gradient(120% 110% at 50% 0%,rgba(255,255,57,.06),transparent 58%),
             linear-gradient(180deg,var(--surface),var(--bg-2));
  box-shadow:0 44px 90px -34px rgba(0,0,0,.85)}
.ograph__bar{display:flex;align-items:center;gap:.6rem;padding:.65rem .9rem;border-bottom:1px solid var(--line);background:rgba(0,0,0,.25)}
.ograph__t{font-weight:600;font-size:.9rem;color:var(--text)}
.ograph__ai{margin-left:auto;font-family:var(--mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink);background:var(--canary);padding:.2rem .5rem;border-radius:var(--r-pill)}
.ograph__body{padding:22px 16px 8px}

.ograph__lv{display:flex;justify-content:center;gap:10px;position:relative}
.ograph__lv+.ograph__lv{margin-top:30px}
/* connectors: a stub down from the parent, a spanning rule, a tick up per child */
.ograph__lv:not([data-d="0"])::before{content:"";position:absolute;top:-16px;left:16%;right:16%;height:1px;background:var(--line-2)}
.ograph__lv[data-d="0"]::after{content:"";position:absolute;bottom:-16px;left:50%;width:1px;height:16px;background:var(--line-2)}
.ograph__lv:not([data-d="0"]) .onode::before{content:"";position:absolute;top:-16px;left:50%;width:1px;height:16px;background:var(--line-2)}

.onode{position:relative;flex:1 1 0;min-width:0;border:1px solid var(--line);border-radius:11px;background:var(--bg-2);padding:9px 11px;text-align:left}
.onode__l{display:block;font-size:.8rem;font-weight:700;letter-spacing:-.02em;color:var(--text);line-height:1.2}
.onode__m{display:block;font-family:var(--mono);font-size:.56rem;text-transform:uppercase;letter-spacing:.06em;color:var(--subtle);margin-top:.22rem}
.onode--root{background:var(--surface-2);border-color:var(--line-2);flex:0 1 62%;text-align:center}
.onode--root .onode__l{font-size:.88rem}
.onode--person{border-style:dashed}
.onode--offshore .onode__m{color:var(--muted)}
.onode--flag{border-color:var(--canary);background:linear-gradient(180deg,rgba(255,255,57,.10),transparent)}
.onode--flag .onode__l{color:var(--canary)}
.onode--flag .onode__m{color:var(--muted)}

.ograph__cap{padding:14px 16px 16px;font-size:.8rem;line-height:1.45;color:var(--muted);border-top:1px solid var(--line);margin-top:20px}

@media(max-width:520px){
  .ograph__lv{flex-wrap:wrap}
  .onode--root{flex-basis:100%}
}

/* who-it's-for column: less text, tighter heading, scannable chips */
.h2--tight{font-size:clamp(1.9rem,3.2vw,2.6rem)}
.sectors{gap:.4rem;margin-top:.2rem}
.fineprint{font-size:.84rem;line-height:1.5;color:var(--subtle);max-width:46ch}

/* ==========================================================================
   Document explorer — replaces the document list plus the separate
   "what it checks" card, which repeated the same information. Pick a document,
   see what the AI reads from it and what it then checks.
   ========================================================================== */
.docx{display:grid;gap:12px;border:1px solid var(--line-2);border-radius:20px;padding:12px;
  background:linear-gradient(180deg,var(--surface),var(--bg-2));box-shadow:0 40px 84px -36px rgba(0,0,0,.8)}
@media(min-width:860px){.docx{grid-template-columns:1.05fr .95fr;gap:14px}}

.docx__list{display:grid;gap:5px;align-content:start}
.docx__t{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.65rem;
  font:inherit;text-align:left;cursor:pointer;padding:.58rem .7rem;border-radius:11px;
  border:1px solid var(--line);background:var(--bg-2);color:var(--muted);
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease)}
.docx__t i{width:18px;height:23px;border-radius:4px;background:var(--surface-2);border:1px solid var(--line-2);flex:none}
.docx__n{font-size:.85rem;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.docx__t small{font-family:var(--mono);font-size:.54rem;text-transform:uppercase;letter-spacing:.07em;color:var(--subtle);white-space:nowrap}
.docx__t:hover{border-color:var(--line-2);color:var(--text);background:var(--surface)}
.docx__t[aria-selected="true"]{background:var(--surface-2);border-color:var(--canary);color:var(--text)}
.docx__t[aria-selected="true"] i{background:var(--canary);border-color:var(--canary)}
.docx__t[aria-selected="true"] small{color:var(--canary)}

.docx__panes{border:1px solid var(--line);border-radius:14px;background:rgba(0,0,0,.22);padding:16px 17px}
.docx__ph{font-family:var(--mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.1em;color:var(--subtle);margin-bottom:.6rem}
.docx__ph+*{margin-bottom:1.1rem}
.fchips{display:flex;flex-wrap:wrap;gap:.35rem}
.fchip{font-family:var(--mono);font-size:.62rem;color:var(--text);border:1px solid var(--line-2);
  border-radius:6px;padding:.26rem .45rem;background:var(--bg-2)}
.docx__p .state{padding:.2rem 0}
.docx__p .state+.state{border-top:0}
.docx__from{font-size:.95rem;font-weight:600;color:var(--text)}
/* centre the detail pane so leftover height reads as balance, not a void */
@media(min-width:860px){.docx__panes{align-self:center}}

/* --- real product media (only rendered when a solution supplies one) ----- */
.pmedia{margin:0;border:1px solid var(--line-2);border-radius:20px;overflow:hidden;background:var(--bg-2);box-shadow:var(--shadow)}
.pmedia img,.pmedia video{display:block;width:100%;height:auto}
.pmedia__cap{padding:12px 16px;border-top:1px solid var(--line);font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.07em;color:var(--subtle)}

/* --- coming-soon workflows: visible breadth, never a dead link ----------- */
.mm__soon{display:flex;align-items:center;gap:.5rem;padding:.48rem .55rem;border-radius:8px;
  font-size:.92rem;font-weight:500;color:var(--subtle);cursor:default}
.mm__soon small{font-family:var(--mono);font-size:.5rem;text-transform:uppercase;letter-spacing:.09em;
  border:1px dashed var(--line-2);border-radius:var(--r-pill);padding:.1rem .35rem;color:var(--subtle)}
.ft__soon{color:var(--subtle);cursor:default}
.ft__soon small{font-family:var(--mono);font-size:.5rem;text-transform:uppercase;letter-spacing:.09em;
  border:1px dashed var(--line-2);border-radius:var(--r-pill);padding:.06rem .32rem;margin-left:.25rem}
.card--soon{cursor:default;background:transparent;border-style:dashed}
.card--soon .card__t{color:var(--muted)}
.card--soon .badge--soon{align-self:flex-start;margin-top:auto}

/* long document filenames must wrap, not get clipped by the card's overflow */
.doc{min-width:0}
.doc b,.doc small{min-width:0;overflow-wrap:anywhere}
@media(max-width:520px){
  .case__docs .doc{grid-template-columns:auto 1fr;row-gap:.15rem}
  .case__docs .doc small{grid-column:2}
}

/* --- mega menu: tighter panel, labelled columns, no catch-all button ----- */
.mm__p--sol{min-width:0;width:max-content;max-width:640px;padding:16px 18px;gap:6px 34px}
.mm__p--sol a,.mm__p--sol .mm__soon{padding:.4rem .5rem;font-size:.9rem;white-space:nowrap}
/* Flagship spans the whole panel as an inset box — a lighter surface inside the
   dropdown so it reads as its own thing, not as the first row of the list.
   Mirrors the .featured card on the page: canary edge, mono eyebrow, arrow. */
.mm__p--sol .mm__flag{grid-column:1/-1;position:relative;display:grid;
  grid-template-columns:1fr auto;align-items:center;gap:0 .9rem;
  margin:0 0 4px;padding:.72rem .9rem .72rem .55rem!important;
  white-space:normal!important;border-radius:10px;
  border:1px solid var(--line-2);background:var(--surface);
  transition:border-color .18s var(--ease),background .18s var(--ease)}
.mm__p--sol .mm__flag::before{content:"";position:absolute;left:0;top:8px;bottom:8px;
  width:3px;border-radius:2px;background:var(--canary)}
.mm__p--sol .mm__flag:hover{background:var(--surface-2);border-color:var(--canary)}
.mm__flag__k{grid-column:1;font-family:var(--mono);font-size:.55rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--canary);line-height:1}
.mm__flag__t{grid-column:1;margin-top:.28rem;font-size:.95rem;font-weight:600;
  letter-spacing:-.01em;color:var(--text);line-height:1.25}
.mm__flag__ext{grid-column:2;grid-row:1/3;color:var(--canary);font-size:1.05rem;
  font-weight:600;transition:transform .18s var(--ease)}
.mm__p--sol .mm__flag:hover .mm__flag__ext{transform:translate(2px,-2px)}
.mm__p--sol .mm__flag:hover .mm__flag__t{color:var(--canary)}
.mm__p--sol .mm__h{margin-bottom:6px;padding-left:.5rem}
/* Only the coming-soon column carries a heading, so the live column reserves
   the same height — otherwise the two lists start at different heights.
   first-of-type, not first-child: the flagship <a> is the panel's first child. */
.mm__p--sol > div:first-of-type::before{content:"\00a0";display:block;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;
  margin-bottom:6px;padding-left:.5rem}
/* the column heading replaces a badge on every row, so rows stay single-line */
.mm__soon{display:block;color:var(--subtle);cursor:default;border-radius:8px}
.mm__soon small{display:none}

/* native select needs its own affordance, the inp reset removes the arrow cue */
select.inp{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.2rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) calc(50% + 2px),calc(100% - 12px) calc(50% + 2px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
select.inp:focus{background-image:linear-gradient(45deg,transparent 50%,var(--canary) 50%),
                   linear-gradient(135deg,var(--canary) 50%,transparent 50%)}
select.inp option{background:var(--bg-2);color:var(--text)}

/* short, confident lede for hero statements — bolder and brighter than body copy */
.lede--bold{font-weight:600;color:var(--text);max-width:34ch;
  font-size:clamp(1.16rem,1.8vw,1.42rem);line-height:1.4;letter-spacing:-.02em}

/* --- founder portraits --------------------------------------------------- */
.people{gap:16px}
.person{margin:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.person img{display:block;width:100%;height:auto;aspect-ratio:908/840;object-fit:cover}
.person figcaption{padding:14px 16px;border-top:1px solid var(--line);display:grid;gap:.15rem}
.person__n{font-size:1.02rem;font-weight:700;letter-spacing:-.02em;color:var(--text)}
.person__r{font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.09em;color:var(--subtle)}

/* --- investor logos ------------------------------------------------------
   Presented on light chips rather than recoloured: investor marks are third-
   party brands and shouldn't be filtered or inverted. Also robust regardless
   of whether the source files carry an alpha channel. */
.investors{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));max-width:820px;margin:0 auto}
.investor{background:#fff;border-radius:14px;padding:20px 22px;display:grid;place-items:center;min-height:88px}
.investor img{display:block;width:100%;height:auto;max-width:190px}

/* ==========================================================================
   WordPress bridge. Maps the theme's semantic --bb-* aliases onto this design
   system's tokens so any existing bb-* component inherits the dark ladder
   instead of the old light palette, and neutralises the block editor's default
   light background on the front end.
   ========================================================================== */
:root{
  --bb-ink:var(--text);
  --bb-ink-muted:var(--muted);
  --bb-surface:var(--bg);
  --bb-surface-alt:var(--bg-2);
  --bb-surface-inverse:var(--light);
  --bb-accent:var(--canary);
  --bb-accent-soft:rgba(255,255,57,.12);
  --bb-text:var(--text);
  --bb-text-muted:var(--muted);
  --bb-text-subtle:var(--subtle);
  --bb-text-inverse:var(--ink);
  --bb-line:var(--line);
  --bb-radius:var(--r-lg);
}
/* Global styles print before theme stylesheets, so anchor the page here. */
html body{background:var(--bg);color:var(--text);font-family:var(--sans)}
body.wp-admin{background:inherit}
.wp-site-blocks,.is-layout-constrained,.entry-content{background:transparent}
/* WP injects top margin on the first block; our sections own their spacing. */
.wp-site-blocks>*+*{margin-block-start:0}
/* Legacy theme containers inherit our measure so mixed pages stay aligned. */
.bb-container{max-width:var(--wrap);margin:0 auto;padding:0 26px}
.bb-section{padding:clamp(52px,6vw,84px) 0}
.bb-section--tight{padding:clamp(38px,4.4vw,62px) 0}

/* ==========================================================================
   Lead forms on the /demo/ and /contact/ pages. Same visual language the modals
   used; the modals themselves are gone in favour of dedicated pages.
   ========================================================================== */
.leadform{position:relative}
.leadform__k{font-family:var(--sans);font-weight:800;font-size:1.05rem;letter-spacing:-.01em;
  text-transform:none;color:var(--text);margin-bottom:1rem}
.leadform__form .field{margin-bottom:.9rem}
.leadform .fieldrow{display:grid;gap:.9rem}
@media(min-width:520px){.leadform .fieldrow{grid-template-columns:1fr 1fr}}
.req{color:var(--canary)}
.leadform__submit{width:100%;justify-content:center;margin-top:.4rem}
.leadform__err{margin:.2rem 0 .7rem;padding:.6rem .75rem;border-radius:9px;
  border:1px solid var(--canary);background:rgba(255,255,57,.10);
  color:var(--text);font-size:.88rem;font-weight:600}
/* Honeypot: off-screen rather than display:none, which some bots skip. */
.leadform__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.leadform__done{text-align:center;padding:22px 4px 10px}
.leadform__tick{display:inline-grid;place-items:center;width:54px;height:54px;border-radius:50%;
  background:var(--canary);color:var(--ink);font-size:1.55rem;font-weight:700;margin-bottom:1rem}
.leadform__h{font-size:clamp(1.3rem,2.2vw,1.65rem);font-weight:800;letter-spacing:-.03em;margin-bottom:.5rem}

/* ==========================================================================
   MID-GREY BAND + SEAM CONTROL
   ========================================================================== */
/* A genuine mid tone, not another near-black. Used for elevated sections and
   as the step between the darkest bands and the light band. */
.g-2 .muted,.g-2 .lede,.g-2 p,.g-3 .muted,.g-3 .lede,.g-3 p,.g-mid .muted,.g-mid .lede,.g-mid p{color:var(--on-mid-muted)}
.g-2 .card__k,.g-2 .party__d,.g-2 small,.g-3 .card__k,.g-3 .party__d,.g-3 small,.g-mid .card__k,.g-mid .party__d,.g-mid small{color:var(--on-mid-muted)}
.g-2 .card,.g-2 .doc,.g-2 .party,.g-2 .case,.g-2 .docx,.g-2 .ograph,
.g-3 .card,.g-3 .doc,.g-3 .party,.g-3 .case,.g-3 .docx,.g-3 .ograph,
.g-mid .card,.g-mid .doc,.g-mid .party,.g-mid .case,.g-mid .docx,.g-mid .ograph{
  background:var(--surface-3);border-color:var(--line-mid)}
.g-2 .tag,.g-3 .tag,.g-mid .tag{color:var(--on-mid-muted);border-color:var(--line-mid)}

/* The canary band is a deliberate hard stop (it's an accent, not a tonal step). */
.g-canary{position:relative}

/* ==========================================================================
   "TODAY, WITHOUT BLACKBIRD" PROBLEM PANEL
   Restyled from a plain list-in-a-box into a deliberate designed element:
   numbered rows, a canary rule, stronger hierarchy and real contrast.
   Targeted with :has() so it applies to already-seeded page content without
   needing the markup re-imported.
   ========================================================================== */
.card:has(> .state),.problem-panel{
  position:relative;padding:26px 26px 22px;border-radius:20px;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line-2);
  box-shadow:0 34px 70px -34px rgba(0,0,0,.85)}
.card:has(> .state)::before,.problem-panel::before{
  content:"";position:absolute;left:0;top:22px;bottom:22px;width:3px;
  background:var(--canary);border-radius:0 3px 3px 0}
/* The label carries the negative framing, so it is deliberately large — at the
   old .6rem the panel read as a neutral feature list. */
/* Eyebrow scale, site font. Oversized type here shouted; the X markers carry
   the negative framing instead. */
.card:has(> .state) .card__k,.problem-panel .card__k{
  font-family:var(--sans);font-weight:700;font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--canary);
  margin-bottom:1.05rem;padding-bottom:.8rem;border-bottom:1px solid var(--line)}
.card:has(> .state) .state,.problem-panel .state{
  counter-increment:bbprob;align-items:flex-start;gap:.85rem;
  padding:.85rem 0;font-size:.98rem;font-weight:600;color:var(--text);line-height:1.35}
.card:has(> .state) .state+.state,.problem-panel .state+.state{
  border-top:1px solid var(--line)}
/* Each row is a PROBLEM, so it gets an X — numbering made these read like an
   ordered list of features we ship, which is the opposite of the point. */
.card:has(> .state) .state::before,.problem-panel .state::before{
  content:"\00D7";
  width:28px;height:28px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  font-family:var(--sans);font-size:1.05rem;font-weight:700;line-height:1;
  background:transparent;color:#F0E9DC;
  border:1.5px solid rgba(255,255,255,.45)}

/* ==========================================================================
   STICKY HEADER IN WORDPRESS
   WordPress renders a template part inside its own wrapper element. That wrapper
   is only as tall as the header, so a position:sticky header inside it has no
   room to travel and never pins. display:contents removes the wrapper from the
   layout so .hd becomes sticky against the page flow instead.
   ========================================================================== */
.wp-block-template-part:has(> .hd){display:contents}
.wp-site-blocks{overflow:visible}
/* Clear the admin bar so the pinned header isn't hidden behind it. */
body.admin-bar .hd{top:32px}
@media screen and (max-width:782px){body.admin-bar .hd{top:46px}}
/* Mobile: nav collapses to the burger below 1000px (see the .nav/.right/.burger
   media query above). The drawer itself is fixed, so it is unaffected by the
   wrapper issue. */
@media(max-width:999px){
  .hd__in{height:60px}
  .drawer__p{padding-top:16px}
}

/* Running step pulses, so the card reads as actively working rather than frozen. */
@media (prefers-reduced-motion:no-preference){
  .cstep.is-active .n{animation:bbPulse 1.6s ease-in-out infinite}
  .cstep.is-active .cstep__s{animation:bbPulseText 1.6s ease-in-out infinite}
  @keyframes bbPulse{
    0%,100%{box-shadow:0 0 0 0 rgba(255,255,57,.55)}
    55%{box-shadow:0 0 0 7px rgba(255,255,57,0)}
  }
  @keyframes bbPulseText{0%,100%{opacity:1}55%{opacity:.55}}
}
/* Flagship product: a slim, whole-surface link out to blackbrd.ai.
   One row — eyebrow, title, canary arrow. Deliberately shorter than a solution
   card so it reads as a pointer off-site, not as a ninth solution. */
.featured{position:relative;display:flex;align-items:center;gap:.5rem 1.1rem;flex-wrap:wrap;
  margin-bottom:22px;padding:16px 22px 16px 26px;border-radius:var(--r-lg);
  border:1px solid var(--line-2);background:var(--surface);
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease)}
/* Canary edge marks it as the flagship without flooding the row in yellow. */
.featured::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  border-radius:var(--r-lg) 0 0 var(--r-lg);background:var(--canary)}
.featured:hover{border-color:var(--canary);background:var(--surface-2);transform:translateY(-1px)}
.featured__k{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--canary);display:inline-flex;align-items:center;gap:.5rem;flex:none}
.featured__k::before{content:"";width:16px;height:1.6px;background:var(--canary)}
.featured__t{font-size:1.02rem;font-weight:650;letter-spacing:-.01em;color:var(--text);
  margin-right:auto}
/* Same north-east arrow the Trust Center link uses, same canary treatment.
   The whole row is the <a>, so this is emphasis only — not the click target. */
.featured__ext{color:var(--canary);font-weight:600;font-size:1.05rem;flex:none;
  transition:transform .2s var(--ease)}
.featured:hover .featured__ext{transform:translate(2px,-2px)}
.g-mid .featured,.g-2 .featured,.g-3 .featured{background:var(--surface-2);border-color:var(--line-mid)}
.g-mid .featured:hover,.g-2 .featured:hover,.g-3 .featured:hover{background:var(--surface-3)}
.g-light .featured{background:#fff;border-color:var(--light-line)}
.g-light .featured__t{color:var(--ink)}
@media(max-width:600px){
  .featured{padding:14px 18px 14px 22px}
  .featured__t{font-size:.96rem;width:100%;margin-right:0;order:3}
  .featured__ext{margin-left:auto}
}