/* ============================================================
   Kompound marketing site — the prototype's stylesheet, verbatim.
   Source: docs/marketing/site-handoff/prototype/site.css

   The ONLY addition is the .site-root rule at the end of this file, which points --sans and
   --mono at the app's self-hosted fonts. Everything above it is the prototype author's and is
   not ours to revise.
   ============================================================ */

:root{--canvas:#F8FAFC;--border:#E2E8F0;--ink:#0F172A;--ink2:#475569;--ink3:#94A3B8;
--cobalt:#0B5CC9;--cobalt-h:#0949A3;--cobalt-4:#6EA8F0;--cobalt-2:#B7CFF2;--cobalt-50:#E8F0FB;
--navy:#00306D;--azure:#0082CA;--teal:#00A99D;--sky:#4EC3EC;--ink-blue:#001148;--graphite:#8A8F98;
--good:#059669;--good-bg:#D1FAE5;--bad:#DC2626;--warn:#D97706;--warn-bg:#FEF3C7;
--sans:Inter,-apple-system,"Segoe UI",sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
--max:1320px;--shadow:0 8px 24px -8px rgba(15,23,42,.18),0 2px 6px rgba(15,23,42,.06);--shadow-lg:0 30px 70px -20px rgba(15,23,42,.28),0 4px 12px rgba(15,23,42,.06);
--grid:linear-gradient(rgba(11,92,201,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(11,92,201,.09) 1px,transparent 1px);
--grid-size:56px 56px}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:hidden}
body{font-family:var(--sans);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;line-height:1.55;font-size:16px}
a{color:var(--cobalt);text-decoration:none}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
h1{font-size:clamp(44px,7.2vw,96px);font-weight:800;letter-spacing:-.04em;line-height:1}
h2{font-size:clamp(30px,3.8vw,48px);font-weight:800;letter-spacing:-.03em;line-height:1.1}
h3{font-size:clamp(24px,2.4vw,32px);font-weight:800;letter-spacing:-.025em;line-height:1.15}
h4{font-size:17px;font-weight:700}
.k{color:var(--cobalt)}
.lede{font-size:19px;color:var(--ink2);line-height:1.55;max-width:34em}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:10px;padding:16px 24px;font-weight:700;font-size:16px;line-height:1;white-space:nowrap}
.btn-primary{background:var(--cobalt);color:#fff;box-shadow:0 6px 16px rgba(11,92,201,.28)}
.btn-primary:hover{background:var(--cobalt-h)}
.btn-secondary{background:#fff;color:var(--ink);border:1px solid #CBD5E1}
.btn-link{color:var(--cobalt);font-weight:700;padding:16px 4px}
.cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.fine{font-size:13px;color:var(--ink3);margin-top:14px}
.center{text-align:center}.center .lede{margin:14px auto 0}
.intro{padding:112px 0 56px}
.grid{display:grid;gap:56px;align-items:center}.g55{grid-template-columns:1fr 1fr}.grid>*{min-width:0}
.rule{border-top:1px solid var(--border)}
@media (max-width:900px){.g55{grid-template-columns:1fr}.grid{gap:36px}.intro{padding:72px 0 36px}}
/* reveal */
.rv{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}*{animation:none!important}}

/* nav */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(12px) saturate(160%);border-bottom:1px solid var(--border)}
.ann{background:var(--ink);color:#fff;font-size:13px;text-align:center;padding:9px 16px}
.ann a{color:var(--cobalt-4);font-weight:600;margin-left:8px}
nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:21px;color:var(--ink);letter-spacing:-.02em}
.links{display:flex;gap:6px;font-weight:600;font-size:15px}
.links>div{position:relative}
.links a,.links button{color:var(--ink);background:none;border:none;font:inherit;padding:10px 14px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.links a:hover,.links button:hover{background:var(--canvas)}
.chev{width:10px;height:10px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s}
.links>div:hover .chev{transform:rotate(225deg) translateY(-2px)}
.mega{position:absolute;top:100%;left:-40px;width:820px;background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lg);padding:24px;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:24px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .4s,transform .4s,visibility .4s}
.links>div:hover .mega{opacity:1;visibility:visible;transform:none}
.mega h5{font-size:11px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px}
.mega ul{list-style:none;display:grid;gap:4px}
.mega li a{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:8px 10px;border-radius:10px;align-items:start;color:var(--ink)}
.mega li a:hover{background:var(--cobalt-50)}
.mega i{width:34px;height:34px;border-radius:9px;background:var(--cobalt-50);color:var(--cobalt);display:grid;place-items:center;font-style:normal;font-size:14px;font-weight:700}
.mega b{display:block;font-size:14px}.mega small{display:block;color:var(--ink2);font-size:12px;line-height:1.35;font-weight:400}
.mega .side{background:var(--canvas);border-radius:12px;padding:18px}
.mega .side b{font-size:14px}.mega .side p{font-size:13px;color:var(--ink2);margin-top:6px}
.right{display:flex;gap:10px;align-items:center}
.right .btn{padding:12px 18px;font-size:14px}
@media (max-width:1000px){.links,.right .btn-link{display:none}}

/* hero */
.hero{padding:88px 0 0;position:relative;text-align:center}
.hero .pill{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow);font-weight:600;font-size:14px;padding:8px 16px 8px 10px;border-radius:999px;margin-bottom:34px;color:var(--ink2)}
.hero .pill b{color:var(--ink)}
.hero .pill .k{background:var(--cobalt-50);padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700}
.hero h1{max-width:18ch;margin:0 auto}.hero h1 .nw{white-space:nowrap}@media (max-width:640px){.hero h1 .nw{white-space:normal}h1{font-size:40px}.hero .pill{white-space:normal;text-align:left;line-height:1.3}.kpi:nth-child(5){grid-column:1/-1;border-right:none}}
.type{color:var(--cobalt);display:inline-block;position:relative}
.XX::after{content:"";position:absolute;right:-.06em;top:.08em;bottom:.08em;width:.05em;background:var(--cobalt);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hero .lede{font-size:21px;margin:28px auto 0;max-width:40em}
.hero .cta{justify-content:center;margin-top:34px}
.hero .fine{margin-top:16px;position:relative;z-index:1}
.stage{position:relative;margin:64px auto 0;max-width:1320px;padding:0 32px}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:560px;background:var(--canvas) var(--grid);background-size:var(--grid-size);z-index:-1;-webkit-mask-image:linear-gradient(180deg,transparent,#000 18%);mask-image:linear-gradient(180deg,transparent,#000 18%)}
.frame{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden;max-width:760px;margin:0 auto}
.bar{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--border);font-size:13px;color:var(--ink2)}
.bar b{color:var(--ink);font-size:15px;font-weight:700}
.tag{display:inline-block;border:1px solid var(--border);border-radius:999px;padding:4px 10px;font-size:12px;color:var(--ink2);background:var(--canvas);margin-left:6px}
.tag.on{background:var(--cobalt-50);border-color:var(--cobalt-2);color:var(--cobalt)}
.kpis{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid var(--border)}
.kpi{padding:16px 18px;border-right:1px solid var(--border)}.kpi:last-child{border-right:none}
.kpi .l{font-size:12px;color:var(--ink2);font-weight:500}
.kpi .v{font-family:var(--mono);font-weight:700;font-size:23px;letter-spacing:-.02em;margin:4px 0 3px}
.kpi .d{font-size:11px;font-family:var(--mono);font-weight:600;color:var(--good)}.kpi .d.down{color:var(--bad)}
.chart{padding:16px 20px 12px}
.chart .t{font:11px var(--sans);fill:var(--ink3)}
.bars rect{transform-origin:50% 100%;transform:scaleY(0);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.in .bars rect{transform:scaleY(1)}
.line{stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 1.8s ease .4s}
.in .line{stroke-dashoffset:0}
.sat{position:absolute;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg)}
.sat-logos{left:24px;bottom:36px;width:196px;padding:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sat-logos span{aspect-ratio:1;border-radius:10px;border:1px solid var(--border);display:grid;place-items:center;font-size:10px;font-weight:700;color:var(--ink2);background:var(--canvas)}
.sat-logos .t{grid-column:1/-1;aspect-ratio:auto;border:none;background:none;font-size:12px;color:var(--ink2);font-weight:600;text-align:center;margin-top:2px}
.sat-stat{right:24px;top:44px;padding:18px 22px}
.sat-stat b{display:block;font-family:var(--mono);font-size:30px;font-weight:700;letter-spacing:-.02em}
.sat-stat span{font-size:13px;color:var(--ink2)}
.sat-ladder{right:24px;bottom:-34px;width:268px;overflow:hidden}
.sat-ladder table{width:100%;border-collapse:collapse;font-size:13px}
.sat-ladder td{padding:8px 16px;border-bottom:1px solid #EEF2F6}
.sat-ladder td:last-child{text-align:right;font-family:var(--mono);font-weight:700}
.sat-ladder tr.n td{border-top:2px solid var(--ink);border-bottom:none;color:var(--good)}.sat-ladder tr.n td:first-child{color:var(--ink);font-weight:700}
.neg{color:var(--bad)}.unset{color:var(--ink3);font-weight:500}
.sat{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.in .sat{opacity:1;transform:none}.in .sat-stat{transition-delay:.5s}.in .sat-logos{transition-delay:.7s}.in .sat-ladder{transition-delay:.9s}
@media (max-width:1000px){.stage{padding:0 20px}.sat{position:static;margin:14px auto 0;width:auto;max-width:820px;opacity:1;transform:none}.sat-logos{grid-template-columns:repeat(6,1fr)}.kpis{grid-template-columns:repeat(2,1fr)}.kpi:nth-child(2n){border-right:none}}

/* stats */
.stats{padding:120px 0 80px}
.stats .box{background:var(--canvas) var(--grid);background-size:var(--grid-size);border:1px solid var(--border);border-radius:20px;padding:56px;display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:40px;align-items:center}
.stat{display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:center}
.stat i{width:48px;height:48px;border-radius:12px;background:#fff;border:1px solid var(--border);display:grid;place-items:center;color:var(--cobalt);font-style:normal;box-shadow:var(--shadow)}
.stat b{display:block;font-family:var(--mono);font-size:26px;font-weight:700;letter-spacing:-.02em}
.stat span{font-size:13px;color:var(--ink2)}
.stats .col{display:grid;gap:28px}
@media (max-width:900px){.stats .box{grid-template-columns:1fr;padding:32px}}

/* pillars */
.pillar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-top:1px solid var(--border)}
/* A wide table inside a mock must scroll inside its card, never size the grid track — a bare 1fr
   track has a min-content floor, and on a phone that floor pulled the text column to 572px. */
.pillar .mock .mpanel{max-width:100%}
.pillar .mockcard{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:900px){.pillar .ann-row{flex-wrap:wrap;justify-content:center}}
.pillar .txt{padding:96px 64px 96px 0;display:flex;flex-direction:column;justify-content:center}
.pillar .txt p.sub{color:var(--ink2);margin-top:10px;font-size:16px}
.pillar .mock{background:var(--canvas) var(--grid);background-size:var(--grid-size);border-left:1px solid var(--border);padding:72px 40px;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center}
.pillar:nth-child(even) .txt{order:2;padding:96px 0 96px 64px}
.pillar:nth-child(even) .mock{order:1;border-left:none;border-right:1px solid var(--border);padding:72px 40px;align-items:center}
.acc{margin-top:26px;border-top:1px solid var(--border)}
.acc details{border-bottom:1px solid var(--border)}
.acc summary{list-style:none;cursor:pointer;padding:16px 0;font-weight:700;font-size:17px;color:var(--ink3);display:flex;justify-content:space-between;align-items:center;transition:color .2s}
.acc summary::-webkit-details-marker{display:none}
.acc details[open] summary{color:var(--ink)}
.acc details p{color:var(--ink2);font-size:15px;padding:0 0 18px;max-width:52ch}
.learn{display:inline-block;margin-top:24px;font-weight:700;font-size:14px;letter-spacing:.02em;text-transform:uppercase}
.mockcard{background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);width:100%;max-width:540px;overflow:hidden;margin:0 auto}
.ann-row{display:flex;gap:10px;flex-wrap:wrap;margin:34px auto 0;position:relative;max-width:540px;width:100%;justify-content:center}
.ann-row::before{content:"";position:absolute;left:50%;top:-34px;height:22px;width:1px;background:#CBD5E1}
.ann-row::after{content:"";position:absolute;left:12%;right:12%;top:-12px;height:1px;background:#CBD5E1}
.ann-row span{background:#fff;border:1px solid var(--border);border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;color:var(--ink);box-shadow:var(--shadow);position:relative}
.ann-row span::before{content:"";position:absolute;left:50%;top:-12px;height:12px;width:1px;background:#CBD5E1}
@media (max-width:900px){.pillar{grid-template-columns:minmax(0,1fr)}.pillar .txt,.pillar:nth-child(even) .txt{order:1;padding:56px 0 32px}.pillar .mock,.pillar:nth-child(even) .mock{order:2;border:none;padding:32px 0;align-items:center}}
/* mock internals */
.dt{width:100%;border-collapse:collapse;font-size:12.5px}
.dt th{font-size:11px;color:var(--ink3);font-weight:600;text-align:right;padding:8px 12px;border-bottom:1px solid var(--border)}
.dt td{padding:9px 12px;text-align:right;border-bottom:1px solid #EEF2F6;font-family:var(--mono);font-weight:600;white-space:nowrap}
.dt th:first-child,.dt td:first-child{text-align:left;font-family:var(--sans)}
.dt td:first-child{font-weight:600}.dt td:first-child small{display:block;font-weight:400;color:var(--ink3);font-size:11px}
.dt tr.tot td{border-top:1px solid #CBD5E1;background:#FBFCFD}
.bar-in{display:inline-block;height:8px;border-radius:4px;vertical-align:middle;margin-right:6px}
.vs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--border)}
.vs>div{padding:20px 22px}.vs>div:first-child{border-right:1px solid var(--border)}
.vs .who{font-size:12px;color:var(--ink2);font-weight:600}
.vs .num{font-family:var(--mono);font-weight:700;font-size:42px;letter-spacing:-.03em;line-height:1;margin-top:6px}
.vs .num small{font-size:15px;color:var(--ink3);margin-left:4px}
.vs .ghost{color:var(--ink3)}
.legend{display:flex;gap:16px;font-size:12px;color:var(--ink2);padding:12px 20px 0}
.legend span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.legend .a::before{background:#CBD5E1}.legend .b::before{background:var(--navy)}
.coh{width:100%;border-collapse:separate;border-spacing:3px;font-size:12px}
.coh th{font-weight:600;color:var(--ink3);font-size:11px;padding:6px 4px;text-align:center}.coh th:first-child{text-align:left}
.coh td{text-align:center;padding:10px 4px;border-radius:5px;font-family:var(--mono);font-weight:700;color:#fff}
.coh td:first-child{text-align:left;font-family:var(--sans);font-weight:600;color:var(--ink);padding-left:8px}
.coh td.dk{color:#0B1B33}.coh td.pb{box-shadow:inset 0 0 0 2px var(--good)}
.coh td.pr{background-image:repeating-linear-gradient(135deg,transparent 0 3px,rgba(255,255,255,.35) 3px 6px)}
.ltv{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--border)}
.ltv div{padding:12px 14px;border-right:1px solid var(--border)}.ltv div:last-child{border-right:none}
.ltv small{display:block;font-size:11px;color:var(--ink3)}.ltv b{font-family:var(--mono);font-size:20px;font-weight:700}

/* cost tabs */
.costs{padding:120px 0}
.pills{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:40px}
.pills button{font:inherit;font-weight:600;font-size:14px;padding:10px 20px;border-radius:999px;border:1px solid var(--border);background:#fff;color:var(--ink2);cursor:pointer}
.pills button[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.costcard{margin:40px auto 0;max-width:1160px;border:1px solid var(--border);border-radius:20px;background:#fff;box-shadow:var(--shadow);display:grid;grid-template-columns:1.1fr 1fr;gap:32px;padding:20px;align-items:center}
.diagram{background:var(--canvas) var(--grid);background-size:40px 40px;border-radius:14px;border:1px solid var(--border);padding:32px;min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
.srcs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.srcs span{background:#fff;border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-size:12px;font-weight:700;box-shadow:var(--shadow);min-width:76px;text-align:center}
.srcs span small{display:block;font-weight:500;color:var(--ink3);font-size:10px}
.down{width:1px;height:26px;background:#CBD5E1;position:relative}
.down::after{content:"";position:absolute;bottom:-3px;left:-3px;width:7px;height:7px;border-radius:50%;background:#CBD5E1}
.sink{background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px 18px;box-shadow:var(--shadow);display:flex;gap:14px;align-items:center}
.sink b{font-size:14px}.sink .mono{font-weight:700;font-size:18px}
.costcopy{padding:12px 20px 12px 0}
.costcopy h3{font-size:26px}.costcopy p{color:var(--ink2);margin-top:12px;font-size:15px}
.costcopy ul{list-style:none;margin-top:18px;display:grid;gap:8px;font-size:14px;color:var(--ink2)}
.costcopy li::before{content:"✓";color:var(--good);font-weight:700;margin-right:8px}
.cp{display:none}.cp[data-on]{display:contents}
@media (max-width:900px){.costcard{grid-template-columns:1fr}.costcopy{padding:8px}}

/* dark why */
.why{background:var(--ink);color:#CBD5E1;padding:120px 0;position:relative}
.why h2{color:#fff}.why .lede{color:#94A3B8}
.whygrid{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:56px;align-items:start}
.wd{border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.03) linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:44px 44px;padding:36px;min-height:420px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center}
.wd .top{display:flex;gap:10px}
.wd .app{width:64px;height:64px;border-radius:16px;background:#fff;color:var(--ink);display:grid;place-items:center;font-weight:800;font-size:12px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.wd .app.k{background:var(--cobalt);color:#fff;font-size:22px}
.wd .conn{width:1px;height:28px;background:rgba(255,255,255,.3)}
.wd .hub{border:1px solid rgba(110,168,240,.5);color:#fff;border-radius:10px;padding:10px 16px;font-size:13px;font-weight:700;background:rgba(11,92,201,.25)}
.wd .outs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wd .outs span{border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:8px 12px;font-size:12px;color:#E2E8F0;background:rgba(255,255,255,.04)}
.wd .cap{font-size:12px;color:#94A3B8;max-width:36ch}
.wacc details{border-bottom:1px solid rgba(255,255,255,.12)}
.wacc summary{list-style:none;cursor:pointer;padding:20px 0;font-size:20px;font-weight:700;color:#94A3B8;display:flex;justify-content:space-between;align-items:center}
.wacc summary::-webkit-details-marker{display:none}
.wacc details[open] summary{color:#fff}
.wacc p{color:#CBD5E1;padding-bottom:20px;font-size:15px;max-width:50ch}
.wd [data-v]{display:none}.wd [data-v].on{display:flex;flex-direction:column;align-items:center;gap:16px}
@media (max-width:900px){.whygrid{grid-template-columns:1fr}}

/* personas */
.personas{padding:120px 0 0}
.personas .cards{display:grid;grid-template-columns:repeat(3,1fr);margin-top:56px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.personas .cards>div{padding:48px 40px;border-right:1px solid var(--border);background:var(--canvas) var(--grid);background-size:var(--grid-size)}
.personas .cards>div:last-child{border-right:none}
.personas i{width:56px;height:56px;border-radius:14px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow);display:grid;place-items:center;color:var(--cobalt);font-style:normal;margin-bottom:22px}
.personas h4{font-size:22px;font-weight:800;letter-spacing:-.02em}
.personas p{color:var(--ink2);font-size:15px;margin-top:8px}
.personas a{display:inline-block;margin-top:16px;font-weight:700;font-size:14px}
@media (max-width:900px){.personas .cards{grid-template-columns:1fr}.personas .cards>div{border-right:none;border-bottom:1px solid var(--border)}}

/* integrations */
.ints{padding:120px 0}
.intgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:48px}
.intgrid div{border:1px solid var(--border);border-radius:14px;background:#fff;padding:22px 14px;text-align:center;font-weight:700;font-size:14px;box-shadow:var(--shadow)}
.intgrid div i{display:block;width:40px;height:40px;border-radius:10px;margin:0 auto 12px;background:var(--canvas);border:1px solid var(--border);font-style:normal;display:grid;place-items:center;font-size:14px;font-weight:800;color:var(--ink2)}
.intgrid small{display:block;font-weight:500;color:var(--ink3);font-size:11px;margin-top:4px}
@media (max-width:900px){.intgrid{grid-template-columns:repeat(3,1fr)}}

/* pricing */
.pricing{padding:120px 0;background:var(--canvas)}
.toggle{display:inline-flex;border:1px solid var(--border);border-radius:999px;padding:4px;background:#fff;margin:32px 0 40px}
.toggle button{border:none;background:none;font:inherit;font-weight:600;font-size:14px;padding:9px 18px;border-radius:999px;cursor:pointer;color:var(--ink2)}
.toggle button[aria-pressed="true"]{background:var(--ink);color:#fff}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.plan{background:#fff;border:1px solid var(--border);border-radius:18px;padding:30px;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.plan.rec{border:2px solid var(--cobalt);position:relative}
.plan.rec::before{content:"Most Popular";position:absolute;top:-13px;left:24px;background:var(--cobalt);color:#fff;font-size:11px;font-weight:700;padding:5px 11px;border-radius:999px}
.plan h4{font-size:20px}.plan .for{font-size:13px;color:var(--ink2);margin:6px 0 20px;min-height:38px}
.plan .price{font-family:var(--mono);font-size:42px;font-weight:700;letter-spacing:-.03em;line-height:1}
.plan .price small{font-family:var(--sans);font-size:14px;color:var(--ink3);font-weight:500}
.plan .alt{font-size:12px;color:var(--ink3);margin-top:8px;min-height:16px}
.plan ul{list-style:none;margin:22px 0;display:grid;gap:10px;font-size:14px;color:var(--ink2);flex:1}
.plan li{padding-left:22px;position:relative}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--good);font-weight:700}
.plan li b{color:var(--ink)}.plan .btn{justify-content:center}
@media (max-width:1000px){.plans{grid-template-columns:1fr 1fr}}@media (max-width:600px){.plans{grid-template-columns:1fr}}

/* faq + steps + final + footer */
.faq{max-width:800px;margin:48px auto 0}
.faq details{border-bottom:1px solid var(--border);padding:22px 0}
.faq summary{cursor:pointer;font-weight:700;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";color:var(--ink3);font-weight:400;font-size:24px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:10px;color:var(--ink2);font-size:15px;max-width:62ch}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:56px}
.step{background:#fff;border:1px solid var(--border);border-radius:18px;padding:28px;box-shadow:var(--shadow)}
.step .n{font-family:var(--mono);font-size:12px;color:var(--cobalt);font-weight:700;margin-bottom:12px}
.step h4{font-size:18px;margin-bottom:8px}.step p{font-size:14px;color:var(--ink2)}
@media (max-width:900px){.steps{grid-template-columns:1fr}}
.final{background:var(--ink);color:#fff;text-align:center;padding:120px 0;position:relative}
.final::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:56px 56px}
.final .wrap{position:relative}
.final h2{color:#fff}.final .lede{color:#94A3B8}
.final .btn-primary{box-shadow:none}.final .btn-secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.final .fine{color:#64748B}
footer{padding:72px 0 32px;font-size:14px;border-top:1px solid var(--border)}
.fcols{display:grid;grid-template-columns:2fr repeat(4,1fr);gap:32px}
.fcols h5{font-size:13px;font-weight:700;margin-bottom:14px}
.fcols ul{list-style:none;display:grid;gap:9px}.fcols a{color:var(--ink2)}
.fbot{margin-top:48px;padding-top:24px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--ink3);font-size:13px}
@media (max-width:900px){.fcols{grid-template-columns:1fr 1fr}}

/* hero rotator */
.rot{display:flex;gap:0;justify-content:center;margin:34px auto 0;max-width:860px;border:1px solid var(--border);border-radius:14px;background:#fff;overflow:hidden;box-shadow:var(--shadow)}
.rot button{flex:1;border:none;background:none;font:inherit;text-align:left;padding:16px 20px 18px;cursor:pointer;border-right:1px solid var(--border);position:relative;color:var(--ink2)}
.rot button:last-child{border-right:none}
.rot b{display:block;font-size:15px;font-weight:700;color:var(--ink3);transition:color .3s}
.rot span{display:block;font-size:12.5px;margin-top:3px;color:var(--ink3);transition:color .3s}
.rot button[aria-selected="true"] b{color:var(--ink)}
.rot button[aria-selected="true"] span{color:var(--ink2)}
.rot .prog{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--cobalt)}
.rot button[aria-selected="true"] .prog{animation:fill 5.25s linear forwards}
@keyframes fill{to{width:100%}}
.hp{display:none}.hp.on{display:block;animation:fade .5s ease}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:700px){.rot{flex-direction:column}.rot button{border-right:none;border-bottom:1px solid var(--border)}}
/* feature selector (replaces accordion) */
.fsel{margin-top:28px;display:grid;gap:10px}
.fsel button{display:grid;grid-template-columns:40px 1fr;gap:14px;text-align:left;font:inherit;background:#fff;border:1px solid var(--border);border-radius:14px;padding:16px;cursor:pointer;transition:border-color .25s,box-shadow .25s,background .25s;position:relative}
.fsel button:hover{border-color:#CBD5E1}
.fsel button[aria-selected="true"]{border-color:var(--cobalt);box-shadow:0 0 0 3px var(--cobalt-50)}
.fsel i{width:40px;height:40px;border-radius:11px;background:var(--canvas);color:var(--ink3);display:grid;place-items:center;font-style:normal;transition:background .25s,color .25s}
.fsel button[aria-selected="true"] i{background:var(--cobalt);color:#fff}
.fsel b{display:block;font-size:16px;font-weight:700}
.fsel p{font-size:14px;color:var(--ink2);margin-top:3px;max-height:0;overflow:hidden;opacity:0;transition:max-height .35s ease,opacity .25s ease,margin .35s}
.fsel button[aria-selected="true"] p{max-height:120px;opacity:1}
.mock .mpanel{display:none}.mock .mpanel.on{display:block;animation:fade .45s ease}
/* AI section */
.ai{background:var(--ink);color:#CBD5E1;padding:130px 0;position:relative;overflow:hidden}
.ai::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:56px 56px}
.ai .wrap{position:relative}
.ai h2{color:#fff}.ai .lede{color:#94A3B8}
.aigrid{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:60px;align-items:start}
.hub{border:1px solid rgba(255,255,255,.14);border-radius:20px;background:rgba(255,255,255,.03);padding:36px 28px;display:flex;flex-direction:column;align-items:center;gap:0}
.hub .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hub .app{width:74px;height:74px;border-radius:18px;background:#fff;display:grid;place-items:center;box-shadow:0 12px 30px rgba(0,0,0,.45);gap:4px}
.hub .app small{font-size:9px;font-weight:700;color:var(--ink2)}
.wire{width:100%;height:56px}
.wire path{fill:none;stroke:rgba(110,168,240,.45);stroke-width:1.5;stroke-dasharray:5 5;animation:flow 1.4s linear infinite}
@keyframes flow{to{stroke-dashoffset:-20}}
.core{border:1.5px solid var(--cobalt-4);background:linear-gradient(180deg,rgba(11,92,201,.35),rgba(11,92,201,.15));border-radius:16px;padding:18px 26px;text-align:center;box-shadow:0 0 40px rgba(11,92,201,.35)}
.core b{display:block;color:#fff;font-size:17px;font-weight:800;letter-spacing:-.02em}
.core span{font-size:12px;color:var(--cobalt-2)}
.outs{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;margin-top:4px}
.outs span{border:1px solid rgba(255,255,255,.14);border-radius:9px;padding:9px 12px;font-size:12px;color:#E2E8F0;background:rgba(255,255,255,.04);text-align:center}
.chatbox{border:1px solid rgba(255,255,255,.14);border-radius:18px;background:#151E36;overflow:hidden}
.chatbox .bar{border-color:rgba(255,255,255,.12);color:#94A3B8}.chatbox .bar b{color:#fff}
.chat{padding:18px;display:grid;gap:12px;font-size:14px}
.msg{padding:13px 15px;border-radius:13px;line-height:1.5;max-width:88%}
.msg.u{background:var(--cobalt);color:#fff;justify-self:end;border-bottom-right-radius:4px;font-weight:500}
.msg.a{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#E2E8F0;border-bottom-left-radius:4px}
.msg.a .mono{color:#fff;font-weight:700}
.opn{display:inline-flex;gap:6px;align-items:center;margin-top:12px;font-size:12.5px;font-weight:700;color:var(--cobalt-4);background:rgba(110,168,240,.12);border:1px solid rgba(110,168,240,.3);padding:7px 11px;border-radius:8px}
.tool{font-family:var(--mono);font-size:11.5px;color:#94A3B8;padding:8px 12px;border-left:2px solid var(--cobalt-4);background:rgba(255,255,255,.04)}
.tool b{color:#fff;font-weight:500}
.aifeat{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.aifeat div{border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:22px;background:rgba(255,255,255,.03)}
.aifeat b{display:block;color:#fff;font-size:15px;margin-bottom:6px}
.aifeat p{font-size:13.5px;color:#94A3B8}
@media (max-width:900px){.aigrid,.aifeat{grid-template-columns:1fr}}
/* logo grid */
.lg{border:1px solid var(--border);border-radius:14px;background:#fff;padding:20px 12px;text-align:center;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:8px}
.lg svg{width:26px;height:26px}
.lg b{font-size:13.5px;font-weight:700;line-height:1.2}
.lg small{color:var(--ink3);font-size:11px}
.lgmono{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:800}
.pixel{margin-top:36px;border:1px solid var(--border);border-radius:18px;background:#fff;box-shadow:var(--shadow);padding:28px 32px;display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;text-align:left}
.pixel i{width:52px;height:52px;border-radius:14px;background:var(--cobalt-50);color:var(--cobalt);display:grid;place-items:center;font-style:normal}
.pixel b{font-size:17px}.pixel p{font-size:14px;color:var(--ink2);margin-top:4px}
@media (max-width:900px){.pixel{grid-template-columns:1fr;text-align:center;justify-items:center}}

.ph{background:var(--warn-bg);color:#92400E;font-family:var(--mono);font-size:12px;padding:1px 5px;border-radius:4px}

.type{position:relative;display:inline-block}
.type::after{content:"";position:absolute;right:-.07em;top:.1em;bottom:.1em;width:.05em;background:var(--cobalt);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---- inner page additions ---- */
.detail{display:grid;gap:18px;margin-top:48px}
.detail.c3{grid-template-columns:repeat(3,1fr)}
.detail.c4{grid-template-columns:repeat(4,1fr)}
.detail.c2{grid-template-columns:repeat(2,1fr)}
.detail>div{background:#fff;border:1px solid var(--border);border-radius:16px;padding:26px;box-shadow:var(--shadow)}
.detail b{display:block;font-size:16px;font-weight:700;margin-bottom:8px}
.detail p{font-size:14.5px;color:var(--ink2)}
@media (max-width:900px){.detail.c3,.detail.c4,.detail.c2{grid-template-columns:1fr}}
.pillar:first-of-type{border-top:none}
.hero .pill .k{background:none;padding:0;font-size:14px}
.crumb{font-size:13px;color:var(--ink3);padding:20px 0 0}
.crumb a{color:var(--ink3)}
.tbl{width:100%;border-collapse:collapse;margin-top:40px;font-size:14.5px;background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden}
.tbl th{text-align:left;padding:14px 20px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink3);border-bottom:1px solid var(--border);background:var(--canvas)}
.tbl td{padding:14px 20px;border-bottom:1px solid var(--border);color:var(--ink2)}
.tbl td:first-child{font-weight:600;color:var(--ink);white-space:nowrap}
.tbl tr:last-child td{border-bottom:none}
.tbl .yes{color:var(--good);font-weight:700}.tbl .no{color:var(--ink3)}
.facts{display:flex;flex-wrap:wrap;border:1px solid var(--border);border-radius:16px;background:#fff;overflow:hidden;box-shadow:var(--shadow)}
.facts>div{flex:1 1 200px;padding:20px 22px;font-size:14px;color:var(--ink2);border-right:1px solid var(--border)}
.facts>div:last-child{border-right:none}
.facts b{display:block;color:var(--ink);font-weight:700;margin-bottom:3px;font-size:15px}
@media (max-width:900px){.facts>div{flex:1 1 100%;border-right:none;border-bottom:1px solid var(--border)}}
.hero .stage .sat-stat{right:-18px;top:auto;bottom:-26px}

.hero .frame,.hero .sat{text-align:left}
.hero .sat-stat{text-align:center}


/* ── The one addition ────────────────────────────────────────────────────────────────────────
   The prototype loaded Inter and JetBrains Mono from the Google CDN by name. Inside the app the
   same families are self-hosted by next/font under --font-inter and --font-jetbrains-mono, so
   the bare names above match nothing and the page would silently render in a fallback — a real
   visual difference the port was promised not to introduce.

   ⚠ WHY THIS IS SCOPED HERE AND NOT EDITED INTO :root ABOVE — this cost a debugging round.
   A custom property is substituted where it is DEFINED, not where it is used. next/font puts
   --font-inter on <body>, so writing --sans:var(--font-inter),… up in :root leaves that var
   undefined at the point of definition, which makes --sans invalid at computed-value time.
   body{font-family:var(--sans)} then becomes invalid too and the whole site inherits Tailwind's
   default stack. .site-root sits inside <body>, so the font variables are in scope and the
   substitution resolves. Same typefaces as the prototype, self-hosted, no flash on load. */
.site-root{
  --sans:var(--font-inter),Inter,-apple-system,"Segoe UI",sans-serif;
  --mono:var(--font-jetbrains-mono),"JetBrains Mono",ui-monospace,Menlo,monospace;
  font-family:var(--sans);
  color:var(--ink);
  background:#fff;
  line-height:1.55;
  font-size:16px;
  /* ⚠ 400, NOT INHERITED. The app's global body rule sets font-weight:450 — a deliberate choice
     for the variable Inter used in the product UI. Inherited into the site it renders every
     glyph fractionally wider, which pushed paragraphs onto an extra line and changed page
     heights. The prototype is designed at 400 and stays at 400. The other six properties that
     body rule sets are neutralised above for the same reason. */
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

/* ⚠ UNDO TAILWIND'S PREFLIGHT FOR REPLACED ELEMENTS, INSIDE THE SITE ONLY.
   The app loads Tailwind globally, and its preflight sets `svg,img,video,canvas{display:block}`.
   The prototype was built without Tailwind, where an <svg> is display:inline — it sits on the text
   baseline and carries the line box's descender space beneath it. Forced to block, every chart
   lost ~7px, which shortened each hero frame and pushed every section below it out of alignment:
   three pages differed by ~8% of their pixels for this one reason.
   Restoring the browser defaults here costs the app nothing — the rule is scoped to .site-root —
   and it is what the prototype's layout was designed against. */
.site-root svg,
.site-root img,
.site-root video,
.site-root canvas{display:inline;vertical-align:baseline}


/* ⚠ MOBILE NAVIGATION — the second and last addition after the prototype's own rules.
   Hand-off open item D1: below 1000px the prototype hides `.links` and the Log In button and
   offers nothing in their place, so a phone visitor has no way to reach any page. The burger
   sits in `.right` and only appears at that same breakpoint; the drawer hangs off the sticky
   header, scrolls inside itself when the viewport is short, and reuses the mega-menu's item
   treatment (icon tile, bold label, muted description) so the two menus read as one system.
   Desktop is untouched: above 1000px both elements are display:none. */
.burger{display:none;width:44px;height:44px;margin-left:2px;border:1px solid var(--border);border-radius:10px;background:#fff;cursor:pointer;padding:0;position:relative}
.burger span{position:absolute;left:12px;width:20px;height:2px;border-radius:2px;background:var(--ink);transition:transform .25s,opacity .2s,top .25s}
.burger span:nth-child(1){top:14px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:28px}
.burger[aria-expanded="true"] span:nth-child(1){top:21px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){top:21px;transform:rotate(-45deg)}
.drawer{display:none;position:absolute;top:100%;left:0;right:0;max-height:calc(100vh - 120px);overflow-y:auto;background:#fff;border-bottom:1px solid var(--border);box-shadow:var(--shadow-lg);padding:8px 0 24px}
.drawer h5{font-size:11px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.06em;margin:18px 0 8px}
.drawer ul{list-style:none;display:grid;gap:2px;margin:0;padding:0}
.drawer li a{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:8px 10px;border-radius:10px;align-items:start;color:var(--ink)}
.drawer li a:hover{background:var(--cobalt-50)}
.drawer i{width:34px;height:34px;border-radius:9px;background:var(--cobalt-50);color:var(--cobalt);display:grid;place-items:center;font-style:normal;font-size:14px;font-weight:700}
.drawer b{display:block;font-size:15px}.drawer small{display:block;color:var(--ink2);font-size:12px;line-height:1.35;font-weight:400}
.drawer ul.top{margin-top:14px;padding-top:10px;border-top:1px solid var(--border)}
.drawer ul.top li a{display:block;padding:11px 10px;font-weight:600;font-size:16px}
.drawer .cta{margin-top:18px;padding:0 10px}
.drawer .cta .btn{flex:1 1 0;justify-content:center;padding:14px 18px;font-size:15px}
@media (max-width:1000px){
  .burger{display:block}
  .drawer:not([hidden]){display:block}
}
@media (max-width:640px){
  /* The prototype never had a burger in the header, so at phone widths the wordmark and the
     trial button were already touching; with a third element they overlapped. Tighter, not
     smaller: the button keeps its weight, the wordmark keeps its size, and the row gets room. */
  nav{height:66px}
  .logo{font-size:19px;gap:8px}
  .logo svg{width:26px;height:26px}
  .right{gap:8px}
  .right .btn-primary{padding:11px 13px;font-size:13px}
  .burger{width:40px;height:40px}
  .burger span{left:10px}
  .burger span:nth-child(1){top:12px}.burger span:nth-child(2){top:19px}.burger span:nth-child(3){top:26px}
  .burger[aria-expanded="true"] span:nth-child(1),.burger[aria-expanded="true"] span:nth-child(3){top:19px}
}

/* ⚠ INTEGRATIONS GRID MARKS (2026-09-12). The prototype's tiles held 24px tracings at 26px and
   seven coloured initials; the tiles now render the official files from the brand registry (see
   components/site/integrations.tsx). A square glyph sits in a 28px slot; a brand that publishes
   only a wordmark gets a wide slot so the name is legible instead of a smudge. */
.lg .mark{height:30px;display:flex;align-items:center;justify-content:center}
.lg .mark img{height:28px;width:auto;max-width:96px;display:block}
.lg .mark.wide img{height:20px;max-width:104px}

/* Hero chart (rebuilt 2026-09-12 — the prototype's bars and line were hard to read and its legend
   was 11px). Bars in a lighter blue, profit line thicker with a soft area, dual axes, 12px labels. */
.chart .hct{font:600 12px var(--sans);fill:var(--ink2)}
.chart .hct.hcp{fill:#059669}
.chart .hcl text{font:700 13px var(--sans);fill:var(--ink)}

/* Cost-flow source boxes: one size, an icon slot, brand marks from the registry (2026-09-12). */
.srcs span{width:100px;height:78px;padding:8px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0}
.srcs span b{font-size:12px;font-weight:700;line-height:1.1}
.srcs .ic{display:flex;align-items:center;justify-content:center;height:24px;width:100%;color:var(--cobalt);font-style:normal}
.srcs .ic svg{width:22px;height:22px}
.srcs .ic img{height:22px;width:auto;max-width:44px}
.srcs .ic img.wide{height:14px;max-width:72px}
.srcs span small{font-size:10px}
.sink .tag{text-transform:none}

/* AI section: bigger client marks, no captions inside the box; chat presentation (2026-09-12). */
.hub .app{width:80px;height:80px;border-radius:20px;padding:0}
.hub .app img{width:44px;height:44px;object-fit:contain;display:block}
.hub .app.kp{background:var(--cobalt)}
.hub .app.kp img{width:48px;height:48px}
.chatbox .bar b{display:inline-flex;align-items:center;gap:8px}
.chatbox .bar .av{width:20px;height:20px;border-radius:6px;display:inline-block}
.chat{padding:20px;gap:14px;font-size:14.5px}
.msg{padding:14px 16px;border-radius:14px;line-height:1.55}
.msg.a{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
.msg.a .opn{display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding:8px 12px;border-radius:9px;background:rgba(110,168,240,.14);border:1px solid rgba(110,168,240,.35);color:var(--cobalt-4);font-weight:700;font-size:13px}
.msg.a .opn:hover{background:rgba(110,168,240,.22)}
.tool{display:grid;grid-template-columns:auto auto 1fr auto;gap:10px;align-items:center;border-radius:10px;padding:9px 12px;border-left-width:3px}
.tool i{font-style:normal;color:var(--cobalt-4)}
.tool span{color:#94A3B8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tool em{font-style:normal;color:#64748B}

/* Logo marquee (home Integrations section + /integrations hero), 2026-09-12. */
.mq{display:grid;gap:14px;margin-top:44px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-row{overflow:hidden}
.mq-track{display:flex;gap:14px;width:max-content;animation:mq 42s linear infinite}
.mq-row.rev .mq-track{animation-direction:reverse}
.mq:hover .mq-track{animation-play-state:paused}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq-tile{display:inline-flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border:1px solid var(--border);border-radius:14px;background:#fff;box-shadow:var(--shadow);white-space:nowrap}
.mq-tile .mark{height:32px;display:flex;align-items:center;justify-content:center}
.mq-tile .mark img{height:30px;width:auto;max-width:96px;display:block}
.mq-tile .mark.wide img{height:20px;max-width:100px}
.mq-tile b{font-size:14px;font-weight:700}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none}}

/* /integrations page */
.intg-hero{padding-bottom:0}
.intg-hero .mq{margin-top:56px}
.intg{padding:72px 0 110px}
.intg-bar{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:28px}
.intg-tabs{display:flex;gap:6px;flex-wrap:wrap}
.intg-tabs button{border:1px solid var(--border);background:#fff;border-radius:999px;padding:9px 14px;font:600 13px var(--sans);color:var(--ink2);cursor:pointer}
.intg-tabs button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.intg-search{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:10px;padding:9px 12px;background:#fff;color:var(--ink3);min-width:260px}
.intg-search input{border:none;outline:none;font:500 14px var(--sans);color:var(--ink);background:transparent;width:100%}
.intg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.intg-card{display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:start;border:1px solid var(--border);border-radius:16px;background:#fff;padding:20px;box-shadow:var(--shadow)}
.intg-card .mark{width:64px;height:64px;border-radius:14px;border:1px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:center}
.intg-card .mark img{height:32px;width:auto;max-width:48px}
.intg-card .mark.wide img{height:16px;max-width:52px}
.intg-card small{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink3)}
.intg-card h3{font-size:16px;margin:4px 0 6px}
.intg-card p{font-size:13.5px;color:var(--ink2);line-height:1.5}
.intg-empty{color:var(--ink2);padding:40px 0;text-align:center}
@media (max-width:900px){.intg-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.intg-grid{grid-template-columns:1fr}}

/* /early-access */
.ea{padding:88px 0 120px}
.ea-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.ea-copy h1{font-size:44px;margin:18px 0 14px}
.ea-list{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:14px}
.ea-list li{padding-left:28px;position:relative;color:var(--ink2);line-height:1.5}
.ea-list li::before{content:"✓";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:6px;background:var(--cobalt-50);color:var(--cobalt);font-weight:800;font-size:12px;display:grid;place-items:center}
.ea-list b{color:var(--ink)}
.ea-fine{font-size:12.5px;color:var(--ink3);margin-top:18px}
.ea-card{border:1px solid var(--border);border-radius:20px;background:#fff;box-shadow:var(--shadow-lg);padding:32px}
.ea-form{display:grid;gap:16px}
.ea-form h2{font-size:22px;margin-bottom:4px}
.ea-form label{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--ink2)}
.ea-form label em{color:#DC2626;font-style:normal}
.ea-form input,.ea-form select,.ea-form textarea{border:1px solid #CBD5E1;border-radius:10px;padding:12px 14px;font:500 15px var(--sans);color:var(--ink);background:#fff;width:100%}
.ea-form input:focus,.ea-form select:focus,.ea-form textarea:focus{outline:none;border-color:var(--cobalt);box-shadow:0 0 0 3px rgba(11,92,201,.15)}
.ea-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ea-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ea-form .btn{justify-content:center;margin-top:4px}
.ea-err{background:#FEF2F2;border:1px solid #FECACA;color:#991B1B;border-radius:10px;padding:10px 12px;font-size:13.5px;font-weight:600}
.ea-done{text-align:center;padding:24px 8px;display:grid;gap:14px;justify-items:center}
.ea-check{width:56px;height:56px;border-radius:50%;background:#ECFDF5;color:#059669;font-size:26px;font-weight:800;display:grid;place-items:center}
.ea-done p{color:var(--ink2);max-width:36ch}
@media (max-width:900px){.ea-grid{grid-template-columns:1fr}.ea-copy h1{font-size:34px}}
.ea .pill{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow);font-weight:600;font-size:14px;padding:8px 16px 8px 10px;border-radius:999px;color:var(--ink2)}
.ea .pill .k{background:var(--cobalt-50);padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700}

/* Announcement bar, bigger and bolder (operator, 2026-09-12). */
.ann{font-size:15px;font-weight:700;padding:13px 16px;letter-spacing:-.01em}
.ann a{font-weight:800;margin-left:10px}

/* Closing band embellishments: two product cards floating either side of the copy. */
.final{position:relative;overflow:hidden}
.final .wrap{position:relative;z-index:1}
.fx{position:absolute;top:50%;width:300px;pointer-events:none;opacity:.55}
.fx-l{left:max(24px,calc(50% - 720px));transform:translateY(-50%) rotate(-5deg)}
.fx-r{right:max(24px,calc(50% - 720px));transform:translateY(-50%) rotate(5deg)}
.fx-card{background:#fff;border-radius:16px;box-shadow:0 30px 60px rgba(0,0,0,.45);overflow:hidden;color:var(--ink);text-align:left}
.fx-bar{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--border);font-size:12px;color:var(--ink3)}
.fx-bar b{color:var(--ink);font-size:13px}
.fx-kpis{display:grid;grid-template-columns:1fr 1fr;gap:0}
.fx-kpis>div{padding:12px 14px;border-bottom:1px solid var(--border);border-right:1px solid var(--border)}
.fx-kpis>div:nth-child(2n){border-right:none}
.fx-kpis small{display:block;font-size:11px;color:var(--ink3)}
.fx-kpis b{display:block;font:700 18px var(--mono);margin-top:2px}
.fx-kpis b.good{color:#059669}
.fx-kpis em{display:block;font:600 10.5px var(--mono);color:#059669;font-style:normal;margin-top:2px}
.fx-kpis em.bad{color:#DC2626}
.fx-spark{width:100%;height:56px;display:block}
.fx-table{width:100%;border-collapse:collapse;font-size:12.5px}
.fx-table td{padding:8px 14px;border-bottom:1px solid var(--border)}
.fx-table td:last-child{text-align:right;font-family:var(--mono);font-weight:600}
.fx-table .neg td:last-child{color:#DC2626}
.fx-table .sum td{font-weight:700;background:var(--canvas)}
.fx-table .good{color:#059669}
.fx-table .net td{font-size:13.5px}
@media (max-width:1240px){.fx{opacity:.3;width:240px}.fx-kpis b{font-size:15px}}
@media (max-width:1000px){.fx{display:none}}
/* Stats are now claims, not counts (operator pick 2026-09-12): titles in the text face, not mono. */
.stats .stat b{font:700 16.5px/1.25 var(--sans);letter-spacing:-.01em}
.stats .stat i svg{width:22px;height:22px}

/* Feature cards on the pillar pages (rewritten 2026-09-12). */
.fcards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px;text-align:left}
.fcard{border:1px solid var(--border);border-radius:16px;background:#fff;padding:22px 22px 24px;box-shadow:var(--shadow)}
.fcard-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--cobalt-50);color:var(--cobalt);margin-bottom:14px}
.fcard b{display:block;font-size:16px;font-weight:700;margin-bottom:6px;letter-spacing:-.01em}
.fcard p{font-size:14px;color:var(--ink2);line-height:1.55}
@media (max-width:900px){.fcards{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.fcards{grid-template-columns:1fr}}
/* Room between the eyebrow and the heading it introduces (operator, 2026-09-12). */
.pillar .eyebrow{margin-bottom:14px}
/* Solutions dropdown: the Product mega-menu's treatment, one column (2026-09-12). */
.mega.sm{width:400px;grid-template-columns:1fr;left:-20px}

/* Tabs: slower, smoother panel change + a progress line on the active tab (operator, 2026-09-12).
   Vertical fill on the stacked feature selectors, horizontal on the cost pills — both run the
   auto-advance interval (5.25s) so the line reaches the end exactly as the next tab takes over. */
@keyframes fadeSlow{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.mock .mpanel.on{animation:fadeSlow .85s cubic-bezier(.2,.7,.2,1)}
.cp[data-on]{animation:fadeSlow .85s cubic-bezier(.2,.7,.2,1)}
.fsel button{position:relative;overflow:hidden;transition:border-color .35s,box-shadow .35s,background .35s}
.fsel button[aria-selected="true"]::after{content:"";position:absolute;left:0;top:0;width:3px;height:0;border-radius:0 3px 3px 0;background:var(--cobalt);animation:vfill 5.25s linear forwards}
@keyframes vfill{from{height:0}to{height:100%}}
.pills button{position:relative;overflow:hidden}
.pills button[aria-selected="true"]::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:rgba(255,255,255,.8);animation:fill 5.25s linear forwards}
@media (prefers-reduced-motion:reduce){.fsel button[aria-selected="true"]::after,.pills button[aria-selected="true"]::after{animation:none;height:100%;width:100%}}
/* Eyebrow spacing everywhere, not only inside a pillar. */
.eyebrow{margin-bottom:14px}

/* Ask Kompass block: a row of marks so the dark panel has a visual anchor (2026-09-12). */
.ai-marks{display:flex;align-items:center;gap:10px;margin-bottom:22px;flex-wrap:wrap}
.ai-tile{width:44px;height:44px;border-radius:12px;background:#fff;display:grid;place-items:center;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.ai-tile img{width:26px;height:26px;object-fit:contain;display:block}
.ai-tile.kp{background:var(--cobalt)}.ai-tile.kp img{width:30px;height:30px}
.ai-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(110,168,240,.4);color:var(--cobalt-4);font-weight:700;font-size:12.5px;padding:8px 12px;border-radius:999px;margin-left:4px}
.fx-logos{display:flex;gap:8px;padding:12px 14px;border-bottom:1px solid var(--border)}
.fx-logos span{width:34px;height:34px;border-radius:9px;border:1px solid var(--border);display:grid;place-items:center}
.fx-logos img{width:20px;height:20px;object-fit:contain}
.fx-chat{padding:14px;display:grid;gap:10px;font-size:12.5px;line-height:1.45}
.fx-chat p{margin:0;padding:10px 12px;border-radius:12px;max-width:92%}
.fx-chat .u{background:var(--cobalt);color:#fff;justify-self:end;border-bottom-right-radius:4px}
.fx-chat .a{background:var(--canvas);border:1px solid var(--border);border-bottom-left-radius:4px}
.fx-chat .a b{font-family:var(--mono)}
.fact-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--cobalt-50);color:var(--cobalt);margin:0 auto 10px}
.step-ic{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--cobalt-50);color:var(--cobalt);margin-bottom:10px}
.fact-ic{margin:0 0 10px}
/* /pricing comparison table */
.ptable-wrap{overflow-x:auto;margin-top:36px;border:1px solid var(--border);border-radius:16px;background:#fff;box-shadow:var(--shadow)}
.ptable{width:100%;border-collapse:collapse;font-size:14px;min-width:720px}
.ptable th,.ptable td{padding:12px 16px;border-bottom:1px solid var(--border);text-align:center}
.ptable th:first-child,.ptable td:first-child{text-align:left;color:var(--ink)}
.ptable th{font-size:13px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.05em;background:var(--canvas)}
.ptable .hl{background:var(--cobalt-50)}
.ptable th.hl{color:var(--cobalt)}
.ptable tr.group td{background:var(--canvas);font-weight:700;color:var(--ink);text-align:left;font-size:13px;text-transform:uppercase;letter-spacing:.05em}
.ptable td{color:var(--ink2)}
.ptable .tick{color:#059669;font-weight:800}
@media (max-width:900px){.fcards[style]{grid-template-columns:1fr 1fr!important}}

/* end */

/* ⚠ WIDTH PASS (operator, 2026-09-12): the container grows from 1200 to 1320px so a desktop screen
   is used the way the quality benchmark uses it; product frames scale with it because they are
   width:100% inside .stage. Everything below 1000px is untouched — the mobile layout was right. */
@media (min-width:1400px){:root{--max:1360px}.lede{font-size:19px}}
@media (min-width:1400px){.stage{max-width:1360px}}
/* Closing band: the floating cards keep a fixed gap from the copy at every width. The copy is
   capped at 640px; each card sits outside that plus a 56px gap, shrinks at 1300–1600px, and is
   hidden below 1300px where it could only collide. */
.final .wrap{max-width:640px}
.fx{width:300px;top:50%}
.fx-l{left:auto;right:calc(50% + 320px + 56px)}
.fx-r{right:auto;left:calc(50% + 320px + 56px)}
@media (max-width:1600px){.fx{width:240px;opacity:.45}.fx-kpis b{font-size:15px}.fx-table{font-size:11.5px}}
@media (max-width:1300px){.fx{display:none}}
@media (max-width:1240px){.fx{opacity:.45}}

/* Legal pages: see the consolidated rules further down. */
.about-story{max-width:820px;margin:0 auto}
.about-story h2{font-size:clamp(28px,3.4vw,40px);margin-bottom:18px}
.about-story p{font-size:17px;color:var(--ink2);line-height:1.7;margin-bottom:16px}
.about-loops{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;text-align:left}
.about-loops>div{border:1px solid rgba(255,255,255,.14);border-radius:18px;background:rgba(255,255,255,.04);padding:24px}
.about-loops .ai-tile{margin-bottom:14px;color:var(--cobalt)}
.about-loops b{display:block;color:#fff;font-size:17px;margin-bottom:8px}
.about-loops p{color:#CBD5E1;font-size:14.5px;line-height:1.55}
@media (max-width:900px){.about-loops{grid-template-columns:1fr}}

/* Legal TOC: was a <nav>, which the header's global nav rule (flex, 74px tall) squashed. */
.legal-toc{display:block;height:auto}

/* Hero pill: an AI mark, a gradient edge and a soft glow; wraps to two centred lines on phones. */
.hero .pill-ai{gap:10px;padding:7px 12px 7px 8px;border:1px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,#0B5CC9,#38BDF8 55%,#0B5CC9) border-box;box-shadow:0 10px 28px -10px rgba(11,92,201,.45)}
.hero .pill-ai .pk{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--cobalt);color:#fff}
.hero .pill-ai b{font-size:14.5px}
.hero .pill-ai .pt{color:var(--ink2);font-weight:500}
.hero .pill-ai .k{margin-left:2px}
@media (max-width:640px){
  .hero .pill-ai{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;max-width:330px;padding:10px 14px;line-height:1.3}
  .hero .pill-ai .pt{flex-basis:100%;order:3;font-size:13px;margin-top:4px}
  .hero .pill-ai .k{order:2}
}

/* Mobile: product frames scroll sideways inside their card instead of spilling off the page;
   inline widget grids collapse to two columns. */
@media (max-width:640px){
  .frame{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
  .frame .dt{min-width:560px}
  .frame>div[style*="grid-template-columns"]{grid-template-columns:1fr 1fr!important}
}

/* About: two-column story with a compounding-curve card; no orphaned eyebrow. */
.about-story{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:center;max-width:none}
.about-copy .eyebrow{margin-bottom:14px}
.about-visual .fx-card{box-shadow:var(--shadow-lg);border:1px solid var(--border)}
.about-curve{width:100%;height:auto;display:block;padding:12px 8px 0}
.about-legend{display:flex;justify-content:space-between;padding:10px 14px 14px;font-size:12.5px;color:var(--ink2)}
.about-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;background:#059669;margin-right:8px;vertical-align:-1px}
.about-legend .m{font-family:var(--mono);color:#059669;font-weight:700}
.about-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.about-chips span{border:1px solid var(--border);background:#fff;border-radius:999px;padding:7px 12px;font-size:12.5px;font-weight:700;color:var(--ink2)}
@media (max-width:900px){.about-story{grid-template-columns:1fr;gap:32px}}

/* Legal pages: the site's own light layout (pill · title · lede · sticky contents), reading measure. */
.legal{padding:72px 0 120px}
.legal-head{max-width:900px;margin:0 auto 8px;text-align:center}
.legal-head h1{font-size:clamp(34px,4vw,52px);margin:20px 0 16px}
.legal-head .lede{margin:0 auto;max-width:72ch}
.legal-meta{margin-top:16px;font-size:13.5px;color:var(--ink3)}
.legal-meta a{color:var(--cobalt);font-weight:600}
.legal-grid{display:grid;grid-template-columns:260px 1fr;gap:56px;margin-top:56px;padding-top:48px;border-top:1px solid var(--border);align-items:start}
.legal-toc{position:sticky;top:110px;border:1px solid var(--border);border-radius:14px;background:#fff;padding:16px 18px;display:block;height:auto}
.legal-toc ol{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:13.5px}
.legal-toc a{color:var(--ink2);font-weight:600;line-height:1.35}.legal-toc a:hover{color:var(--cobalt)}
.legal-body{max-width:none}
.legal-body section{padding:0 0 30px;margin-bottom:6px;border-bottom:1px solid var(--border)}
.legal-body h2{font-size:21px;margin:26px 0 12px;letter-spacing:-.01em}
.legal-sub{font-size:15.5px;font-weight:700;margin:18px 0 6px;color:var(--ink)}
.legal-body p{color:var(--ink2);line-height:1.65;margin-bottom:12px;font-size:15.5px}
.legal-body a{color:var(--cobalt);font-weight:600}
.legal-ul{margin:0 0 12px 18px;color:var(--ink2);line-height:1.6;font-size:15.5px;display:grid;gap:6px}
.legal-ul b{color:var(--ink)}
.legal-table{width:100%;border-collapse:collapse;font-size:14px;margin:12px 0 16px}
.legal-table th,.legal-table td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:top}
.legal-table th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink3)}
.legal-contact{margin-top:28px;font-size:14px;color:var(--ink3)}
@media (max-width:1200px){.legal-toc{position:static}}
@media (max-width:900px){.legal-grid{grid-template-columns:1fr}}
.legal .pill{display:inline-flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow);font-weight:600;font-size:14px;padding:8px 16px 8px 10px;border-radius:999px;color:var(--ink2)}
.legal .pill .k{background:var(--cobalt-50);padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700}