/* ═══════════════════════════════════════════════════════════════════
KRYVOX MARKETING SITE — house style
assets/brand/kryvox.v3.css
The filename carries the version. /assets/* is served with a one-year
immutable cache, so a change ships under a new name rather than waiting
for caches to expire — never edit a published file in place.
v3 adds the legal and error-page components that ten pages were carrying
inline, and takes over from v2 in the same commit that repoints every link.
v2 stays on disk one release for anyone holding it in cache.
Supersedes assets/site.css. Every class name there is preserved, so a
page migrates by swapping one . site.css stays for one release to
cover browsers holding the old cached copy, then goes.
── Colour is a signal, structure is a rule ──
Approved 2026-07-16. Before adding a colour, decide which layer it is in.
If it is none of them, it does not belong on the page.
Signal (state, changes) red = danger, breach, below minimum
amber = do this now, warning, near limit
green = complete, approved, valid, money in
teal = primary, live, now, the brand
Domain (identity, fixed) purple = learning and intelligence, ONLY
blue = neutral information and identity
Neutral (no colour) every statistic. Numbers carry no state, and
colouring them drowns the ones that do.
Orange is not in the constitution and is not in this file. It used to
mark role badges (now blue — identity), problem bullets (now amber —
something needing attention) and decoration (now teal or neutral).
tools/brand-audit.sh counts anything outside these tokens.
═══════════════════════════════════════════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box}
:root{
/* Type */
--sora:'Sora',sans-serif;
--dm:'DM Sans',sans-serif;
--mono:'IBM Plex Mono',monospace;
/* Signal — teal: primary, live, brand */
--teal:#0D9488; /* primary */
--tl:#14B8A6; /* lifted */
--t2:#5EEAD4; /* bright */
--t3:#99F6E4; /* pale */
--t4:#CCFBF1; /* palest */
--teal-deep:#0B7A70; /* gradient anchor, hover */
/* Signal — state */
--red:#DC2626; /* danger, breach, below minimum */
--amber:#F59E0B; /* do this now, warning, near limit */
--green:#059669; /* complete, approved, valid, money in */
/* Domain — identity, fixed */
--purple:#7C3AED; /* learning and intelligence ONLY */
--blue:#3B82F6; /* neutral information, roles, identity */
/* Neutral — the dark marketing shell */
--navy:#061210;
--navy2:#0A1E1A;
--navy3:#0F2D27;
--ink:#E2E8F0; /* body text */
--slate:#94A3B8; /* secondary text */
--slate2:#CBD5E1; /* lede text */
--white:#F0FDF9;
/* Surfaces — derived, not new colours */
--card-bg:rgba(255,255,255,.02);
--card-border:rgba(255,255,255,.05);
--teal-glow:rgba(13,148,136,.15);
--teal-dim:rgba(13,148,136,.08);
--ease:cubic-bezier(.4,0,.2,1);
}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body{font-family:var(--dm);color:var(--ink);background:var(--navy);overflow-x:hidden}
a{color:inherit;text-decoration:none}
/* ═══ GRAIN TEXTURE (Stripe-style organic feel) ═══ */
body::after{content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.018;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-repeat:repeat;background-size:256px}
/* ═══ PAGE TRANSITIONS ═══ */
body.page-enter{opacity:0;transform:translateY(6px)}
body.page-enter.page-ready{opacity:1;transform:none;transition:opacity .45s var(--ease),transform .45s var(--ease)}
body.page-exit{opacity:0!important;transform:translateY(-6px)!important;transition:opacity .22s var(--ease),transform .22s var(--ease)}
/* ═══ SCROLL PROGRESS BAR ═══ */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:9998;background:linear-gradient(90deg,var(--teal),var(--t2));transform:scaleX(0);transform-origin:left;will-change:transform}
/* ═══ SKIP LINK ═══ */
.skip-link{position:absolute;top:-100%;left:16px;padding:8px 16px;background:var(--teal);color:white;border-radius:0 0 8px 8px;z-index:10000;font-size:13px;font-weight:600;transition:top .2s}
.skip-link:focus{top:0}
/* ═══ NAV ═══ */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(6,18,16,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.04);box-shadow:0 1px 0 0 rgba(255,255,255,.02) inset}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:0 48px;height:64px;max-width:1400px;margin:0 auto}
.nav-brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.nav-brand svg{flex-shrink:0}
.nav-name{font-family:var(--sora);font-size:22px;font-weight:800;letter-spacing:-.5px;color:white}
.nav-name em{color:var(--tl);font-style:normal}
.nav-links{display:flex;align-items:center;gap:8px}
.nav-link{font-size:13px;font-weight:500;color:rgba(255,255,255,.55);padding:8px 16px;border-radius:8px;transition:all .2s var(--ease);text-decoration:none;position:relative}
.nav-link::after{content:'';position:absolute;bottom:4px;left:50%;width:0;height:1.5px;background:var(--tl);border-radius:1px;transition:all .25s var(--ease);transform:translateX(-50%)}
.nav-link:hover{color:white;background:rgba(255,255,255,.04)}
.nav-link:hover::after,.nav-link.active::after{width:50%}
.nav-link.active{color:white}
.nav-right{display:flex;align-items:center;gap:8px}
.login-wrap{position:relative}
.login-btn{font-family:var(--dm);font-size:13px;font-weight:500;color:rgba(255,255,255,.55);padding:8px 16px;border-radius:8px;background:none;border:1px solid rgba(255,255,255,.1);cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .2s}
.login-btn:hover{color:white;border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.04)}
.login-drop{position:absolute;top:calc(100% + 8px);right:0;background:rgba(10,30,26,.95);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:8px;min-width:210px;opacity:0;visibility:hidden;transform:translateY(-4px);transition:all .2s;box-shadow:0 12px 40px rgba(0,0,0,.4)}
.login-wrap:hover .login-drop{opacity:1;visibility:visible;transform:none}
.login-drop a{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;font-size:13px;font-weight:500;color:rgba(255,255,255,.7);transition:all .15s}
.login-drop a:hover{background:rgba(255,255,255,.06);color:white}
.login-sep{height:1px;background:rgba(255,255,255,.06);margin:4px 0}
.nav-cta{font-family:var(--dm);font-size:13px;font-weight:600;color:white;background:var(--teal);padding:9px 22px;border-radius:9px;transition:all .25s var(--ease);border:none;cursor:pointer;display:inline-flex;align-items:center;text-decoration:none}
.nav-cta:hover{background:var(--teal-deep);box-shadow:0 0 24px rgba(13,148,136,.4);transform:translateY(-1px)}
/* ═══ PAGE HERO ═══ */
.page-hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:120px 48px 80px;text-align:center;background:linear-gradient(180deg,var(--navy) 0%,var(--navy2) 100%)}
.page-chip{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:3px;text-transform:uppercase;padding:6px 18px;border-radius:20px;margin-bottom:16px;background:rgba(13,148,136,.08);color:var(--tl);border:1px solid rgba(13,148,136,.12)}
.page-title{font-family:var(--sora);font-size:clamp(32px,5vw,52px);font-weight:800;letter-spacing:-1.5px;color:white;margin-bottom:16px;line-height:1.1}
.page-title em{font-style:normal;background:linear-gradient(135deg,var(--tl),var(--t2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.page-sub{font-size:clamp(15px,1.8vw,18px);color:var(--slate);line-height:1.7;max-width:600px;margin:0 auto}
/* ═══ SECTION COMMON ═══ */
.section{padding:100px 48px}
.section-dark{background:var(--navy2)}
.section-darker{background:var(--navy3)}
.sect-chip{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:3px;text-transform:uppercase;padding:5px 14px;border-radius:16px;margin-bottom:12px;background:rgba(13,148,136,.08);color:var(--tl);border:1px solid rgba(13,148,136,.12)}
.sect-title{font-family:var(--sora);font-size:clamp(26px,3.5vw,38px);font-weight:700;letter-spacing:-.8px;color:white;text-align:center;margin-bottom:12px}
.sect-sub{font-size:15px;color:var(--slate);text-align:center;max-width:580px;margin:0 auto 48px;line-height:1.7}
.sect-inner{max-width:1100px;margin:0 auto}
/* ═══ BUTTONS ═══ */
.btn{font-family:var(--dm);font-size:14px;font-weight:600;padding:12px 28px;border-radius:10px;transition:all .25s var(--ease);display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;text-decoration:none}
.btn-primary{background:linear-gradient(135deg,var(--teal-deep),var(--teal) 40%,var(--tl));color:white;box-shadow:0 4px 20px rgba(13,148,136,.3)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(13,148,136,.45)}
.btn-secondary{background:rgba(255,255,255,.06);color:white;border:1px solid rgba(255,255,255,.1)}
.btn-secondary:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);transform:translateY(-1px)}
.btn-sm{font-size:13px;padding:9px 20px;border-radius:8px}
.btn-lg{font-size:15px;padding:14px 32px;border-radius:11px}
.btn-arrow{font-size:16px;transition:transform .2s}
.btn:hover .btn-arrow{transform:translateX(3px)}
/* ═══ CARDS ═══ */
.card{padding:28px 24px;border-radius:16px;background:var(--card-bg);border:1px solid var(--card-border);transition:all .35s var(--ease)}
.card:hover{background:rgba(13,148,136,.04);border-color:rgba(13,148,136,.15);transform:translateY(-3px)}
.card h3{font-family:var(--sora);font-size:16px;font-weight:700;color:white;margin-bottom:8px}
.card p{font-size:13px;color:var(--slate);line-height:1.65}
/* ═══ PRICING CARDS ═══ */
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1100px;margin:0 auto}
.price-card{padding:32px 24px;border-radius:20px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);display:flex;flex-direction:column;transition:all .35s var(--ease)}
.price-card:hover{border-color:rgba(13,148,136,.2);transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,.25)}
.price-card.featured{border-color:rgba(13,148,136,.3);background:rgba(13,148,136,.04);position:relative}
.price-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:4px 14px;border-radius:20px;background:var(--teal);color:white;white-space:nowrap}
.price-name{font-family:var(--sora);font-size:14px;font-weight:600;color:var(--tl);margin-bottom:8px;letter-spacing:.5px;text-transform:uppercase}
.price-amount{font-family:var(--sora);font-size:42px;font-weight:800;color:white;letter-spacing:-2px;line-height:1}
.price-period{font-size:14px;color:var(--slate);font-weight:400;margin-left:2px}
.price-for{font-size:13px;color:var(--slate);margin-top:8px;margin-bottom:20px;line-height:1.5}
.price-divider{height:1px;background:rgba(255,255,255,.06);margin:0 -24px 20px}
.price-features{list-style:none;display:flex;flex-direction:column;gap:10px;flex:1;margin-bottom:24px}
.price-features li{font-size:13px;color:rgba(226,232,240,.65);display:flex;align-items:flex-start;gap:8px;line-height:1.45}
.price-features li svg{flex-shrink:0;margin-top:2px;color:var(--tl)}
.price-overage{font-size:11px;color:rgba(148,163,184,.5);margin-bottom:16px;line-height:1.5}
.price-cta{width:100%;text-align:center;justify-content:center}
/* ═══ ADD-ON GRID ═══ */
.addon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1100px;margin:0 auto}
.addon-card{padding:24px 20px;border-radius:14px;background:rgba(255,255,255,.015);border:1px solid rgba(255,255,255,.04);transition:all .3s var(--ease)}
.addon-card:hover{border-color:rgba(255,255,255,.1);transform:translateY(-2px)}
.addon-name{font-family:var(--sora);font-size:14px;font-weight:700;color:white;margin-bottom:4px}
.addon-price{font-family:var(--mono);font-size:13px;color:var(--tl);margin-bottom:8px}
.addon-desc{font-size:12px;color:var(--slate);line-height:1.55}
/* ═══ FAQ ═══ */
.faq-list{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:0}
.faq-item{border-bottom:1px solid rgba(255,255,255,.06);padding:20px 0}
.faq-item:last-child{border-bottom:none}
.faq-q{font-family:var(--sora);font-size:15px;font-weight:600;color:white;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq-q svg{flex-shrink:0;transition:transform .2s;color:var(--slate)}
.faq-item.open .faq-q svg{transform:rotate(45deg)}
.faq-a{font-size:14px;color:var(--slate);line-height:1.7;max-height:0;overflow:hidden;transition:max-height .3s var(--ease),padding .3s;padding-top:0}
.faq-item.open .faq-a{max-height:200px;padding-top:12px}
/* ═══ FORM ═══ */
.form-wrap{max-width:520px;margin:0 auto}
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:13px;font-weight:600;color:rgba(255,255,255,.7);margin-bottom:6px}
.form-input,.form-select,.form-textarea{width:100%;font-family:var(--dm);font-size:14px;color:white;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:12px 16px;transition:all .2s;outline:none}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--tl);background:rgba(13,148,136,.04);box-shadow:0 0 0 3px rgba(13,148,136,.1)}
.form-input::placeholder,.form-textarea::placeholder{color:rgba(148,163,184,.4)}
.form-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.form-select option{background:var(--navy2);color:white}
.form-textarea{min-height:100px;resize:vertical}
.form-checks{display:flex;flex-wrap:wrap;gap:8px}
.form-check{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:8px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);cursor:pointer;font-size:13px;color:var(--slate);transition:all .2s}
.form-check:hover{border-color:rgba(255,255,255,.12);color:white}
.form-check input{accent-color:var(--tl)}
.form-check:has(input:checked){border-color:rgba(13,148,136,.3);background:rgba(13,148,136,.06);color:var(--tl)}
/* ═══ INCLUDED FEATURES GRID ═══ */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;max-width:1100px;margin:0 auto}
.features-col h4{font-family:var(--sora);font-size:14px;font-weight:700;color:var(--tl);margin-bottom:14px;letter-spacing:.5px;text-transform:uppercase}
.features-col ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.features-col li{font-size:13px;color:rgba(226,232,240,.6);display:flex;align-items:center;gap:8px;line-height:1.4}
.features-col li svg{flex-shrink:0;color:rgba(13,148,136,.5);width:14px;height:14px}
/* ═══ CTA SECTION ═══ */
.site-cta{padding:120px 48px;background:var(--navy);text-align:center;position:relative;overflow:hidden}
.site-cta::before{content:'';position:absolute;top:50%;left:50%;width:600px;height:600px;background:radial-gradient(circle,rgba(13,148,136,.06),transparent 70%);border-radius:50%;transform:translate(-50%,-50%)}
.site-cta .sect-inner{position:relative;z-index:1}
.site-cta h2{font-family:var(--sora);font-size:clamp(28px,4vw,42px);font-weight:700;letter-spacing:-1px;color:white;margin-bottom:14px}
.site-cta p{font-size:16px;color:var(--slate);margin-bottom:36px;line-height:1.7}
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* ═══ FOOTER ═══ */
.site-footer{padding:60px 48px 32px;background:var(--navy);border-top:1px solid rgba(255,255,255,.04)}
.footer-inner{max-width:1100px;margin:0 auto}
.footer-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:40px;margin-bottom:48px}
.footer-brand{display:flex;flex-direction:column;gap:12px}
.footer-brand-name{font-family:var(--sora);font-size:20px;font-weight:800;color:white}
.footer-brand-name em{color:var(--tl);font-style:normal}
.footer-brand-desc{font-size:13px;color:var(--slate);line-height:1.6;max-width:240px}
.footer-col h5{font-family:var(--sora);font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:16px}
.footer-col a{display:block;font-size:13px;color:var(--slate);padding:4px 0;transition:color .2s}
.footer-col a:hover{color:var(--tl)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;border-top:1px solid rgba(255,255,255,.04);flex-wrap:wrap;gap:12px}
.footer-copy{font-size:12px;color:rgba(148,163,184,.4)}
.footer-socials{display:flex;gap:16px}
.footer-socials a{color:var(--slate);transition:color .2s}
.footer-socials a:hover{color:var(--tl)}
/* ═══ TAB SWITCHER ═══ */
.tab-switch{display:flex;justify-content:center;gap:4px;margin-bottom:48px;padding:4px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:12px;display:inline-flex}
.tab-switch-wrap{text-align:center}
.tab-btn{font-family:var(--dm);font-size:14px;font-weight:600;padding:10px 28px;border-radius:9px;border:none;background:transparent;color:var(--slate);cursor:pointer;transition:all .2s}
.tab-btn.active{background:var(--teal);color:white;box-shadow:0 2px 12px rgba(13,148,136,.3)}
.tab-btn:hover:not(.active){color:white;background:rgba(255,255,255,.04)}
.tab-content{display:none}.tab-content.active{display:block}
/* ═══ PROOF SIDEBAR ═══ */
.proof-card{padding:28px;border-radius:16px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05)}
.proof-quote{font-size:15px;color:rgba(255,255,255,.75);line-height:1.6;font-style:italic;margin-bottom:16px}
.proof-quote::before{content:'\201C';color:var(--tl);font-size:32px;font-weight:700;line-height:0;vertical-align:middle;margin-right:4px;font-style:normal}
.proof-author{font-size:13px;font-weight:600;color:white}
.proof-role{font-size:12px;color:var(--slate)}
.proof-stats{margin-top:24px;display:flex;flex-direction:column;gap:12px}
.proof-stat{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--slate)}
.proof-stat svg{color:var(--tl);flex-shrink:0}
/* ═══ DEMO LAYOUT ═══ */
.demo-grid{display:grid;grid-template-columns:1fr 380px;gap:48px;max-width:1000px;margin:0 auto;align-items:start}
.form-note{font-size:13px;color:var(--slate);margin-top:16px;line-height:1.6}
.form-note a{color:var(--tl);text-decoration:underline;text-underline-offset:2px}
.form-success{display:none;text-align:center;padding:48px 24px}
.form-success.show{display:block}
.form-success h2{font-family:var(--sora);font-size:28px;font-weight:700;color:white;margin-bottom:12px}
.form-success p{font-size:15px;color:var(--slate);line-height:1.7;margin-bottom:24px}
.form-success ol{list-style:none;counter-reset:s;max-width:400px;margin:0 auto 32px;text-align:left}
.form-success ol li{counter-increment:s;display:flex;align-items:flex-start;gap:12px;padding:10px 0;font-size:14px;color:rgba(226,232,240,.7);line-height:1.55}
.form-success ol li::before{content:counter(s);font-family:var(--sora);font-size:12px;font-weight:700;color:var(--teal);background:rgba(13,148,136,.1);border:1px solid rgba(13,148,136,.15);border-radius:50%;min-width:28px;height:28px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
/* ═══ ABOUT LAYOUT ═══ */
.story-block{max-width:720px;margin:0 auto;font-size:16px;color:rgba(226,232,240,.7);line-height:1.8}
.story-block p{margin-bottom:20px}
.story-block strong{color:white;font-weight:600}
.team-card{display:flex;gap:32px;align-items:flex-start;max-width:720px;margin:0 auto;padding:32px;border-radius:20px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05)}
.team-avatar{width:100px;height:100px;border-radius:16px;background:linear-gradient(135deg,rgba(13,148,136,.2),rgba(13,148,136,.05));display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--sora);font-size:36px;font-weight:800;color:var(--tl)}
.team-info h3{font-family:var(--sora);font-size:20px;font-weight:700;color:white;margin-bottom:4px}
.team-role{font-family:var(--mono);font-size:12px;color:var(--tl);letter-spacing:1px;text-transform:uppercase;margin-bottom:12px}
.team-bio{font-size:14px;color:var(--slate);line-height:1.7}
.team-location{margin-top:12px;font-size:13px;color:rgba(148,163,184,.6);display:flex;align-items:center;gap:6px}
.team-location svg{color:var(--tl)}
.values-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:820px;margin:0 auto}
.value-card{padding:28px 24px;border-radius:16px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);transition:all .35s var(--ease)}
.value-card:hover{border-color:rgba(13,148,136,.15);transform:translateY(-2px)}
.value-card h3{font-family:var(--sora);font-size:15px;font-weight:700;color:white;margin-bottom:10px;display:flex;align-items:center;gap:10px}
.value-card h3 svg{color:var(--tl);flex-shrink:0}
.value-card p{font-size:13px;color:var(--slate);line-height:1.65}
.contact-row{display:flex;gap:32px;justify-content:center;flex-wrap:wrap;max-width:600px;margin:0 auto}
.contact-item{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--slate)}
.contact-item svg{color:var(--tl);flex-shrink:0}
.contact-item a{color:var(--tl);text-decoration:underline;text-underline-offset:2px}
/* ═══ SOLUTION PAGE LAYOUT ═══ */
.problem-list{max-width:660px;margin:0 auto;list-style:none;display:flex;flex-direction:column;gap:14px}
.problem-list li{font-size:15px;color:rgba(226,232,240,.65);line-height:1.6;display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-radius:12px;background:rgba(255,255,255,.015);border:1px solid rgba(255,255,255,.03)}
.problem-list li svg{flex-shrink:0;margin-top:3px;color:var(--amber)}
.solution-row{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;max-width:1000px;margin:0 auto;padding:60px 0}
.solution-row:not(:last-child){border-bottom:1px solid rgba(255,255,255,.04)}
.solution-row.reverse{direction:rtl}.solution-row.reverse>*{direction:ltr}
.solution-img{border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden}
.solution-img-placeholder{font-family:var(--mono);font-size:12px;color:rgba(148,163,184,.3);text-transform:uppercase;letter-spacing:1px}
.solution-text h3{font-family:var(--sora);font-size:22px;font-weight:700;color:white;margin-bottom:10px}
.solution-text p{font-size:14px;color:var(--slate);line-height:1.7}
.ai-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:820px;margin:0 auto}
.connected-block{max-width:660px;margin:0 auto;font-size:15px;color:rgba(226,232,240,.65);line-height:1.8;text-align:center}
.connected-block strong{color:white;font-weight:600}
.steps-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:900px;margin:0 auto}
.step-card{text-align:center;padding:24px 16px}
.step-num{font-family:var(--sora);font-size:32px;font-weight:800;color:var(--tl);margin-bottom:8px}
.step-label{font-family:var(--sora);font-size:14px;font-weight:600;color:white;margin-bottom:6px}
.step-desc{font-size:12px;color:var(--slate);line-height:1.5}
.audience-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:820px;margin:0 auto}
.audience-card{padding:24px 20px;border-radius:14px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);transition:all .3s var(--ease)}
.audience-card:hover{border-color:rgba(13,148,136,.15);transform:translateY(-2px)}
.audience-card h3{font-family:var(--sora);font-size:15px;font-weight:700;color:white;margin-bottom:8px}
.audience-card p{font-size:13px;color:var(--slate);line-height:1.6}
.privacy-box{max-width:660px;margin:0 auto;padding:32px;border-radius:16px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05)}
.privacy-box h3{font-family:var(--sora);font-size:18px;font-weight:700;color:white;margin-bottom:16px;text-align:center}
.privacy-box ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.privacy-box li{font-size:14px;color:rgba(226,232,240,.6);display:flex;align-items:center;gap:10px}
.privacy-box li svg{color:var(--red);flex-shrink:0}
.privacy-box p{font-size:14px;color:var(--slate);line-height:1.6}
.pilot-features{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:820px;margin:0 auto}
.pilot-feature{padding:24px 20px;border-radius:14px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);transition:all .3s var(--ease)}
.pilot-feature:hover{border-color:rgba(13,148,136,.15);transform:translateY(-2px)}
.pilot-feature h3{font-family:var(--sora);font-size:15px;font-weight:700;color:white;margin-bottom:4px}
.pilot-feature .feature-sub{font-family:var(--mono);font-size:11px;color:var(--tl);margin-bottom:8px}
.pilot-feature p{font-size:13px;color:var(--slate);line-height:1.6}
@media(max-width:900px){
.demo-grid{grid-template-columns:1fr}
.team-card{flex-direction:column;align-items:center;text-align:center}
.values-grid{grid-template-columns:1fr}
.solution-row{grid-template-columns:1fr;gap:24px}
.solution-row.reverse{direction:ltr}
.ai-cards{grid-template-columns:1fr}
.steps-row{grid-template-columns:1fr 1fr;gap:12px}
.audience-grid{grid-template-columns:1fr}
.pilot-features{grid-template-columns:1fr}
}
/* ═══ AURORA CANVAS ═══ */
.page-aurora{position:absolute;inset:0;z-index:0;pointer-events:none}
.page-hero>*:not(.page-aurora){position:relative;z-index:1}
/* ═══ AMBIENT HERO GLOW ═══ */
.page-hero{position:relative;overflow:hidden}
.page-hero::before,.page-hero::after{content:'';position:absolute;border-radius:50%;pointer-events:none;filter:blur(80px);will-change:transform;z-index:0}
.page-hero::before{width:500px;height:500px;background:radial-gradient(circle,rgba(13,148,136,.12),transparent 70%);top:-100px;right:-100px;animation:heroGlow1 18s ease-in-out infinite alternate}
.page-hero::after{width:400px;height:400px;background:radial-gradient(circle,rgba(20,184,166,.07),transparent 70%);bottom:-80px;left:-80px;animation:heroGlow2 22s ease-in-out infinite alternate}
@keyframes heroGlow1{0%{transform:translate(0,0)}100%{transform:translate(-60px,40px)}}
@keyframes heroGlow2{0%{transform:translate(0,0)}100%{transform:translate(50px,-30px)}}
/* ═══ SECTION ACCENT LINE ═══ */
.sect-chip{position:relative}
.section .sect-title::before{content:'';display:block;width:48px;height:2px;background:linear-gradient(90deg,var(--teal),var(--t2));margin:0 auto 20px;border-radius:2px;opacity:.6}
/* ═══ CARD GLOW (cursor-following) ═══ */
.price-card::after,.value-card::after,.card::after,.addon-card::after,.pilot-feature::after,.audience-card::after,.proof-card::after,.team-card::after{
content:'';position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .35s;pointer-events:none;
background:radial-gradient(400px circle at var(--glow-x,50%) var(--glow-y,50%),rgba(13,148,136,.08),transparent 60%)}
.price-card,.value-card,.card,.addon-card,.pilot-feature,.audience-card,.proof-card,.team-card{position:relative;overflow:hidden}
.price-card:hover::after,.value-card:hover::after,.card:hover::after,.addon-card:hover::after,.pilot-feature:hover::after,.audience-card:hover::after,.proof-card:hover::after,.team-card:hover::after{opacity:1}
/* ═══ FEATURED PRICING PULSE ═══ */
.price-card.featured{animation:featuredPulse 4s ease-in-out infinite}
@keyframes featuredPulse{0%,100%{box-shadow:0 0 30px rgba(13,148,136,.08)}50%{box-shadow:0 0 50px rgba(13,148,136,.18)}}
/* ═══ BUTTON PRESS ═══ */
.btn:active,.nav-cta:active{transform:scale(.97)!important;transition-duration:.1s}
/* ═══ TEXT SHIMMER ═══ */
.shimmer-text{background:linear-gradient(110deg,var(--tl) 20%,var(--t2) 40%,var(--t3) 50%,var(--t2) 60%,var(--tl) 80%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 4s ease-in-out infinite}
@keyframes shimmer{0%,100%{background-position:100% 50%}50%{background-position:0% 50%}}
/* ═══ MOBILE DRAWER ═══ */
.mobile-menu-btn{display:none;background:none;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:7px;cursor:pointer;color:rgba(255,255,255,.6);transition:all .2s;line-height:0}
.mobile-menu-btn:hover{color:white;border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.04)}
.mobile-drawer{position:fixed;top:0;right:0;bottom:0;width:min(320px,85vw);background:rgba(6,18,16,.97);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);z-index:200;transform:translateX(100%);transition:transform .35s var(--ease);padding:24px;border-left:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column}
.mobile-drawer.open{transform:none}
.mobile-close{align-self:flex-end;background:none;border:none;color:rgba(255,255,255,.5);cursor:pointer;padding:8px;border-radius:8px;transition:all .2s;line-height:0}
.mobile-close:hover{color:white;background:rgba(255,255,255,.06)}
.mobile-nav{display:flex;flex-direction:column;gap:4px;margin-top:32px}
.mobile-nav a{font-size:15px;font-weight:500;color:rgba(255,255,255,.6);padding:12px 16px;border-radius:10px;transition:all .2s}
.mobile-nav a:hover{color:white;background:rgba(255,255,255,.05)}
.mobile-sep{height:1px;background:rgba(255,255,255,.06);margin:8px 0}
.mobile-cta{background:var(--teal)!important;color:white!important;text-align:center;border-radius:10px!important;font-weight:600!important}
.mobile-drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:199;opacity:0;visibility:hidden;transition:all .3s}
.mobile-drawer-overlay.open{opacity:1;visibility:visible}
/* ═══ ANIMATIONS ═══ */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.reveal{opacity:0;transform:translateY(30px);transition:all .7s var(--ease)}.reveal.vis{opacity:1;transform:translateY(0)}
/* ═══ RESPONSIVE ═══ */
/* ═══ REDUCED MOTION ═══ */
@media(prefers-reduced-motion:reduce){
.reveal{opacity:1;transform:none;transition:none}
.shimmer-text{animation:none}
.price-card.featured{animation:none}
.page-hero::before,.page-hero::after{animation:none}
body.page-enter{opacity:1;transform:none}
}
@media(max-width:900px){
.nav-inner{padding:0 20px}.nav-links{display:none}.login-wrap{display:none}.nav-cta{display:none}
.mobile-menu-btn{display:block}
.page-hero,.section,.site-cta,.site-footer{padding-left:24px;padding-right:24px}
.page-hero{min-height:100svh;padding-top:110px;padding-bottom:60px}
.price-grid{grid-template-columns:1fr 1fr;gap:12px}
.addon-grid{grid-template-columns:1fr 1fr}
.features-grid{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1fr 1fr;gap:24px}
}
@media(max-width:600px){
.price-grid{grid-template-columns:1fr}
.addon-grid{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1fr}
.cta-actions{flex-direction:column;align-items:center}
}
/* ═══════════════════════════════════════════════════════════════════
HOME — the seven sections
Every section carries an objection comment in home-v2.html. If you cannot
write one, the section does not belong on the home page.
═══════════════════════════════════════════════════════════════════ */
.h-wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.h-eyebrow{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--tl)}
.h-section{padding:88px 0}
.h-head{max-width:660px;margin:0 auto 52px;text-align:center}
.h-head h2{font-family:var(--sora);font-size:clamp(27px,3.4vw,38px);font-weight:800;letter-spacing:-.03em;margin:12px 0;text-wrap:balance}
.h-head p{color:var(--slate);font-size:16px;line-height:1.6}
.h-more{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--t2);transition:gap .2s var(--ease)}
.h-more:hover{gap:11px}
/* ── S1 hero ── */
.h-hero{position:relative;padding:96px 0 72px;overflow:hidden}
.h-hero::before{content:'';position:absolute;top:-34%;left:50%;transform:translateX(-50%);width:940px;height:940px;
background:radial-gradient(circle,var(--teal-glow),transparent 62%);z-index:0;pointer-events:none}
.h-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center}
.h-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 8px;border-radius:40px;
background:var(--teal-dim);border:1px solid rgba(20,184,166,.28);margin-bottom:22px}
.h-badge b{width:7px;height:7px;border-radius:50%;background:var(--t2);box-shadow:0 0 10px var(--t2);animation:hpulse 2.4s infinite}
.h-badge span{font-size:12px;font-weight:600;color:var(--t3);letter-spacing:.02em}
.h-hero h1{font-family:var(--sora);font-size:clamp(36px,5vw,58px);font-weight:800;letter-spacing:-.035em;line-height:1.04;
text-wrap:balance;margin-bottom:20px;color:var(--white)}
.h-lede{font-size:clamp(16px,1.75vw,18px);color:var(--slate2);max-width:520px;margin-bottom:30px;line-height:1.65}
.h-lede b{color:var(--white);font-weight:600}
.h-cta-row{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.h-cta{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:700;padding:14px 26px;border-radius:12px;
background:linear-gradient(135deg,var(--teal-deep),var(--teal) 42%,var(--tl));color:var(--white);
box-shadow:0 6px 26px rgba(13,148,136,.4);transition:.24s var(--ease);border:1px solid transparent}
.h-cta:hover{transform:translateY(-2px);box-shadow:0 10px 34px rgba(13,148,136,.55)}
.h-cta-text{font-size:14px;font-weight:600;color:var(--slate2);border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:2px}
.h-cta-text:hover{color:var(--white);border-bottom-color:var(--t2)}
.h-hero-note{margin-top:20px;font-size:12.5px;color:var(--slate);display:flex;align-items:center;gap:8px}
/* Hero visual — a real screen, never a drawing of one. */
.h-shot{border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.09);
box-shadow:0 30px 70px rgba(0,0,0,.55);background:var(--navy2)}
.h-shot img{display:block;width:100%;height:auto}
.h-shot-cap{margin-top:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--slate);text-align:center}
/* ── S2 proof ── */
.h-proof{border-top:1px solid var(--card-border);border-bottom:1px solid var(--card-border);
background:rgba(255,255,255,.012);padding:44px 0}
.h-proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.h-proof-item b{display:block;font-family:var(--sora);font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--white);margin-bottom:5px}
.h-proof-item span{font-size:13.5px;color:var(--slate);line-height:1.55}
.h-proof-cap{font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:var(--slate);opacity:.75;margin-top:6px;display:block}
.h-proof-line{margin-top:30px;padding-top:26px;border-top:1px solid var(--card-border);text-align:center;
font-size:15px;color:var(--slate2);line-height:1.7;max-width:720px;margin-left:auto;margin-right:auto}
.h-proof-line b{color:var(--t3);font-weight:600}
.h-proof-line em{font-style:normal;color:var(--slate);display:block;margin-top:8px;font-size:13.5px}
/* ── S3 a flight day ── */
.h-day{max-width:760px;margin:0 auto}
.h-day-row{display:grid;grid-template-columns:78px 1fr;gap:22px;padding:20px 0;border-top:1px solid var(--card-border);align-items:start}
.h-day-row:first-child{border-top:none}
.h-day-t{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--tl);padding-top:2px}
.h-day-x{font-size:15.5px;color:var(--slate2);line-height:1.6}
.h-day-x b{color:var(--white);font-weight:600}
/* ── S4 persona routing ── */
.h-persona{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.h-card{padding:28px 24px;border-radius:16px;background:var(--card-bg);border:1px solid var(--card-border);
transition:.3s var(--ease);display:flex;flex-direction:column}
.h-card:hover{border-color:rgba(20,184,166,.28);transform:translateY(-4px);background:rgba(13,148,136,.04)}
.h-card .rk{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--tl);font-weight:600}
.h-card h3{font-family:var(--sora);font-size:18px;font-weight:800;margin:10px 0 8px;letter-spacing:-.01em;color:var(--white)}
.h-card p{font-size:14px;color:var(--slate);line-height:1.6;flex:1}
.h-card .h-more{margin-top:16px}
/* ── S5 what's inside ── */
.h-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.h-tile{padding:26px 22px;border-radius:16px;background:var(--card-bg);border:1px solid var(--card-border);transition:.3s var(--ease)}
.h-tile:hover{border-color:rgba(20,184,166,.24);background:rgba(13,148,136,.03)}
.h-tile .ic{width:42px;height:42px;border-radius:12px;background:var(--teal-dim);display:grid;place-items:center;color:var(--t2);margin-bottom:15px}
.h-tile h3{font-family:var(--sora);font-size:16px;font-weight:700;margin-bottom:8px;letter-spacing:-.01em;color:var(--white)}
.h-tile p{font-size:13.5px;color:var(--slate);line-height:1.6}
/* ── S6 why us ── */
.h-why{background:linear-gradient(180deg,var(--navy),var(--navy3));
border-top:1px solid var(--card-border);border-bottom:1px solid var(--card-border)}
.h-why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:900px;margin:0 auto}
.h-why-item{padding:24px;border-radius:14px;background:var(--card-bg);border:1px solid var(--card-border)}
.h-why-item h3{font-family:var(--sora);font-size:16px;font-weight:700;margin-bottom:8px;color:var(--white)}
.h-why-item p{font-size:14px;color:var(--slate);line-height:1.6}
.h-why-foot{text-align:center;margin-top:36px;font-size:14px;color:var(--slate)}
/* ── S7 finale ── */
.h-finale{text-align:center;padding:100px 0;position:relative;overflow:hidden}
.h-finale::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 50% 0,var(--teal-glow),transparent 70%)}
.h-finale-in{position:relative;z-index:1}
.h-finale h2{font-family:var(--sora);font-size:clamp(29px,4.2vw,44px);font-weight:800;letter-spacing:-.035em;margin-bottom:16px;text-wrap:balance;color:var(--white)}
.h-finale p{color:var(--slate2);font-size:17px;max-width:520px;margin:0 auto 32px;line-height:1.65}
.h-finale .h-cta-row{justify-content:center}
.h-finale small{display:block;margin-top:22px;font-size:13px;color:var(--slate)}
@keyframes hpulse{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){
.h-badge b{animation:none}
.h-card,.h-tile,.h-cta,.h-more{transition:none}
}
@media(max-width:920px){
.h-hero-grid{grid-template-columns:1fr;gap:44px}
.h-proof-grid{grid-template-columns:repeat(2,1fr);gap:26px}
.h-persona,.h-tiles,.h-why-grid{grid-template-columns:1fr}
.h-section{padding:64px 0}
.h-hero{padding:64px 0 52px}
}
@media(max-width:560px){
.h-proof-grid{grid-template-columns:1fr}
.h-day-row{grid-template-columns:64px 1fr;gap:16px}
.h-cta-row{flex-direction:column;align-items:stretch}
.h-cta{justify-content:center}
.h-cta-text{text-align:center}
}
.h-centre{text-align:center;margin-top:36px}
/* ═══════════════════════════════════════════════════════════════════
PILOT — the app page
The site runs dark and the app runs light. Both are the same teal family,
and the contrast is the point: a light product screen sitting inside a dark
page reads as a real thing held up, not as a picture of one.
The light tokens are declared on .kx-phone, never on :root. Put them at the
root and the light shell leaks into the page — the dark marketing surface
collapses and nobody notices until a screenshot looks wrong.
═══════════════════════════════════════════════════════════════════ */
.kx-phone{
/* Teal Ink — the app's light surface. Scoped here on purpose. */
--li-bg:#F7F9FB;
--li-card:#FFFFFF;
--li-ink:#0B3D34;
--li-teal:#0E8F7E;
--li-tl2:#2FBFA8;
--li-muted:#5E837B;
--li-line:rgba(11,61,52,.14);
position:relative;width:298px;height:606px;border-radius:44px;background:#0A1512;padding:11px;
box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06),inset 0 0 0 2px rgba(94,234,212,.08);
transform:rotateY(-13deg) rotateX(4deg);transition:transform .5s var(--ease)}
.kx-phone:hover{transform:rotateY(-6deg) rotateX(2deg)}
.kx-phone::after{content:'';position:absolute;top:14px;left:50%;transform:translateX(-50%);
width:96px;height:22px;background:#0A1512;border-radius:0 0 16px 16px;z-index:5}
.kx-stage{display:flex;justify-content:center;perspective:1400px}
.kx-screen{width:100%;height:100%;border-radius:34px;background:var(--li-bg);overflow:hidden;
font-family:var(--dm);color:var(--li-ink);position:relative}
.kx-top{background:linear-gradient(160deg,var(--li-teal),#0B6C62);padding:34px 18px 16px;color:#fff}
.kx-top .row{display:flex;align-items:center;justify-content:space-between}
.kx-top .hi{font-size:11px;opacity:.85;font-weight:500}
.kx-top .nm{font-size:17px;font-weight:800;letter-spacing:-.01em;margin-top:1px;font-family:var(--sora)}
.kx-av{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;font-weight:800;font-size:13px}
.kx-role{display:inline-block;margin-top:12px;font-size:9.5px;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;padding:4px 10px;border-radius:20px;background:rgba(255,255,255,.16)}
.kx-body{padding:14px 14px 0}
.kx-lbl{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--li-muted);margin:2px 0 8px}
.kx-card{background:var(--li-card);border:1px solid var(--li-line);border-radius:14px;padding:13px;box-shadow:0 6px 18px rgba(11,61,52,.06)}
.kx-card .ft{display:flex;justify-content:space-between;align-items:flex-start}
.kx-card .rt{font-size:15px;font-weight:800;letter-spacing:-.01em}
.kx-card .ac{font-size:11px;color:var(--li-muted);margin-top:2px}
.kx-go{font-size:9px;font-weight:800;letter-spacing:.06em;padding:4px 8px;border-radius:7px;background:rgba(14,143,126,.12);color:var(--li-teal)}
.kx-leg{display:flex;align-items:center;gap:8px;margin-top:12px}
.kx-leg .dot{width:8px;height:8px;border-radius:50%;border:2px solid var(--li-teal)}
.kx-leg .dot.f{background:var(--li-teal)}
.kx-leg .ln{flex:1;height:2px;background:linear-gradient(90deg,var(--li-teal),var(--li-tl2))}
.kx-leg .code{font-size:12px;font-weight:800}
.kx-frat{display:flex;align-items:center;gap:8px;margin-top:13px;padding-top:12px;border-top:1px solid var(--li-line)}
.kx-frat .g{flex:1;height:6px;border-radius:6px;background:#E6EDE9;overflow:hidden}
.kx-frat .g i{display:block;height:100%;width:34%;border-radius:6px;background:linear-gradient(90deg,#1B9E58,var(--li-tl2))}
.kx-frat .lbl{font-size:10px;font-weight:700;color:#1B9E58}
.kx-acts{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:14px}
.kx-act{background:var(--li-card);border:1px solid var(--li-line);border-radius:12px;padding:10px 4px;text-align:center}
.kx-act .ic{width:26px;height:26px;margin:0 auto 5px;border-radius:8px;background:rgba(14,143,126,.1);display:grid;place-items:center;color:var(--li-teal)}
.kx-act .t{font-size:8.5px;font-weight:700}
.kx-row{display:flex;align-items:center;gap:9px;background:var(--li-card);border:1px solid var(--li-line);border-radius:11px;padding:9px 11px;margin-top:7px}
.kx-row .d{font-family:var(--mono);font-size:9px;font-weight:600;color:var(--li-muted);width:34px}
.kx-row .m{flex:1}
.kx-row .m b{font-size:11px;font-weight:800;display:block}
.kx-row .m span{font-size:9.5px;color:var(--li-muted)}
.kx-row .h{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--li-teal)}
.kx-tabs{position:absolute;bottom:0;left:0;right:0;background:var(--li-card);border-top:1px solid var(--li-line);
display:flex;justify-content:space-around;padding:9px 0 15px}
.kx-tab{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:8px;font-weight:700;color:var(--li-muted)}
.kx-tab.on{color:var(--li-teal)}
/* the bridge strip that names the two-surface contract */
.kx-bridge{padding:26px 0;border-top:1px solid var(--card-border);border-bottom:1px solid var(--card-border);background:rgba(255,255,255,.012)}
.kx-bridge-in{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;text-align:center;font-size:13px;color:var(--slate)}
.kx-bridge-in b{color:var(--t3);font-weight:600}
.kx-sw{display:inline-flex;gap:5px;vertical-align:middle}
.kx-sw i{width:16px;height:16px;border-radius:5px;display:inline-block}
/* install cards */
.kx-install{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:820px;margin:0 auto}
.kx-icard{padding:28px;border-radius:18px;background:var(--card-bg);border:1px solid var(--card-border)}
.kx-icard .ih{display:flex;align-items:center;gap:11px;margin-bottom:18px}
.kx-icard .ih .p{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.05);border:1px solid var(--card-border);display:grid;place-items:center;color:var(--t2)}
.kx-icard .ih b{font-size:16px;font-weight:800;font-family:var(--sora);color:var(--white)}
.kx-icard .ih span{display:block;font-size:11px;color:var(--slate);font-weight:500}
.kx-step{display:flex;gap:12px;padding:11px 0;border-top:1px solid var(--card-border);font-size:13.5px;color:var(--slate2);line-height:1.55}
.kx-step:first-of-type{border-top:none}
.kx-step .n{width:22px;height:22px;border-radius:50%;background:rgba(13,148,136,.14);color:var(--t2);font-size:11px;font-weight:800;font-family:var(--mono);display:grid;place-items:center;flex-shrink:0}
.kx-step b{color:var(--white);font-weight:600}
.kx-dl{margin-top:16px;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--t2);
border:1px solid rgba(94,234,212,.2);border-radius:10px;padding:9px 16px;transition:.2s var(--ease)}
.kx-dl:hover{background:var(--teal-dim)}
@media(prefers-reduced-motion:reduce){.kx-phone{transition:none}}
@media(max-width:920px){
.kx-phone{transform:none}
.kx-install{grid-template-columns:1fr}
}
/* Swatches naming the two surfaces. Classes, not inline colours, so the audit
can see them and so the strip changes when the tokens do. */
.kx-sw i.s-ink{background:var(--navy)}
.kx-sw i.s-teal{background:var(--teal)}
.kx-sw i.s-tl{background:var(--tl)}
.kx-sw i.s-t2{background:var(--t2)}
.kx-sw i.s-li{background:#0E8F7E} /* Teal Ink primary — the app surface */
.kx-sw i.s-libg{background:#F7F9FB} /* Teal Ink ground */
.kx-lbl-gap{margin-top:16px}
/* ═══ LEGAL AND ERROR PAGES — moved out of inline