/* AI Ads and GEO v18.html styles, fix pass E. Every stylesheet and head style block of the page in its original order, in one render-blocking file (same cascade). Rebuild from the page sources when a shared file changes. */
/* ==== site-shell-v7.css ==== */
/* Site shell v7 (forked from v6): adds the For Agencies panel and the Agencies sheet segment. Site shell v6 (forked from v5): Services and Industries mega panels (desktop), full-screen menu sheet (mobile). Injected by site-shell-v6.js.
v6-only rules use .mx6 / .mx6-sheet so they win if a page also loads the v5 sheet. */
.nav-inner{position:relative}
.nav-links>.nav-dd.mx-on{position:static}
.mx-panel{position:absolute;left:0;right:0;top:100%;z-index:120;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s;pointer-events:none}
.nav-dd.mx-on:hover:not(.is-closed) .mx-panel,.nav-dd.mx-on:focus-within:not(.is-closed) .mx-panel,.nav-dd.mx-on.is-open .mx-panel{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .18s ease,transform .18s ease,visibility 0s}
.nav-dd.mx-on:hover:not(.is-closed)>a .nav-dd-caret,.nav-dd.mx-on:focus-within:not(.is-closed)>a .nav-dd-caret{transform:rotate(180deg)}
.mx-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(220px,264px);gap:4px;padding:12px;border:1px solid var(--border-strong,#323944);border-radius:14px;background:rgba(9,13,24,.97);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 28px 70px rgba(0,0,0,.5)}
.mx-col{min-width:0;padding:8px 4px}
.mx-h{margin:0 8px 6px;padding:2px 0 10px;border-bottom:1px solid var(--border-2,#232935);font:500 11px/1.2 var(--font-mono,ui-monospace,monospace);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3,#8C98AB)}
.mx-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.nav .mx-panel a.mx-it{display:flex;align-items:flex-start;gap:11px;min-height:44px;padding:8px;border-radius:8px;color:var(--fg-1);text-decoration:none;box-shadow:none!important;white-space:normal;font-size:inherit}
.nav .mx-panel a.mx-it:hover,.nav .mx-panel a.mx-it:focus-visible{background:rgba(127,140,160,.12);padding-bottom:8px}
.nav .mx-panel a.mx-it:focus-visible{outline:2px solid var(--signal);outline-offset:-2px}
.mx-ico{width:32px;height:32px;flex:none;display:grid;place-items:center;border:1px solid var(--border-2,#232935);border-radius:8px;background:rgba(58,160,210,.08);color:var(--signal);transition:border-color .18s ease,background .18s ease}
.mx-ico svg{width:17px;height:17px}
.mx-it:hover .mx-ico{border-color:var(--signal);background:rgba(58,160,210,.16)}
.mx-tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.mx-tx b{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font:600 13.5px/1.25 var(--font-sans);color:var(--fg-1);letter-spacing:-.005em}
.mx-tx small{font:400 12px/1.35 var(--font-sans);color:var(--fg-3)}
.mx-it[aria-current="page"] b{color:var(--signal)}
.mx-new{font:600 9.5px/1 var(--font-mono,monospace);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:#05131D;background:var(--brand-sun,#F5B83D);padding:3px 5px;border-radius:4px}
.mx-feat{display:flex;flex-direction:column;gap:12px;margin:4px;padding:18px;border:1px solid var(--border-2,#232935);border-radius:10px;background:linear-gradient(180deg,rgba(58,160,210,.12),rgba(58,160,210,.02) 70%)}
.mx-feat .mx-h{margin:0;border:0;padding:0}
.mx-feat h3{margin:0;font:800 19px/1.08 var(--font-display);letter-spacing:-.025em;text-transform:uppercase;color:var(--fg-1)}
.mx-feat p{margin:0;font-size:13px;line-height:1.5;color:var(--fg-2)}
.mx-cap{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:6px 10px;border:1px solid var(--border-strong);border-radius:999px;font:500 11.5px/1.3 var(--font-mono,monospace);color:var(--fg-1)}
.mx-cap i{width:7px;height:7px;flex:none;border-radius:50%;background:#3DDC97;box-shadow:0 0 0 3px rgba(61,220,151,.18)}
.mx-cap.is-last i{background:var(--brand-sun,#F5B83D);box-shadow:0 0 0 3px rgba(245,184,61,.2)}
.mx-cap.is-full i{background:#8C98AB;box-shadow:none}
.nav .mx-panel a.mx-book{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;margin-top:auto;padding:12px 14px;border-radius:var(--radius-sm,8px);background:var(--signal);color:#05131D;font-weight:600;font-size:13.5px;box-shadow:none!important;text-decoration:none}
.nav .mx-panel a.mx-book:hover{background:var(--blue-300,#7FC4EA);padding-bottom:12px}
.nav .mx-panel a.mx-book svg,.mx-sheet .mx-book svg{width:14px;height:14px}
.nav .mx-panel a.mx-all{display:inline-flex;align-items:center;min-height:36px;font-size:13px;color:var(--fg-2);box-shadow:none!important;padding:0}
.nav .mx-panel a.mx-all:hover{color:var(--fg-1);padding-bottom:0}
@media (max-width:1280px){.mx-in{grid-template-columns:repeat(4,minmax(0,1fr)) 210px}.mx-tx small{font-size:11.5px}.mx-feat{padding:14px}}
[data-theme="light"] .mx-in{background:rgba(250,252,254,.98);box-shadow:0 28px 70px rgba(12,20,36,.16)}
/* mobile sheet */
.mx-sheet{position:fixed;inset:0;z-index:400;display:flex;flex-direction:column;background:rgba(7,9,13,.985);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:var(--fg-1);font-family:var(--font-sans)}
.mx-sheet[hidden]{display:none}
.mx-sh-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px clamp(16px,5vw,28px);border-bottom:1px solid var(--border-2)}
.mx-sh-top img{height:52px;width:auto;display:block}
.mx-x{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--border-strong);border-radius:var(--radius-sm,8px);background:transparent;color:var(--fg-1);cursor:pointer}
.mx-x svg{width:18px;height:18px}
.mx-sh-body{flex:1;overflow-y:auto;overscroll-behavior:contain;width:100%;max-width:640px;margin:0 auto;padding:16px clamp(16px,5vw,28px) 20px;display:flex;flex-direction:column;gap:16px}
.mx-seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:4px;border:1px solid var(--border-strong);border-radius:12px;background:rgba(255,255,255,.02)}
.mx-seg button{min-height:44px;padding:0 4px;border:0;border-radius:8px;background:transparent;color:var(--fg-2);font:600 13px/1 var(--font-sans);cursor:pointer;transition:background .18s ease,color .18s ease}
.mx-seg button[aria-selected="true"]{background:var(--signal);color:#05131D}
.mx-seg button:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.mx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mx-tile{display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-height:84px;padding:12px;border:1px solid var(--border-2);border-radius:10px;background:rgba(255,255,255,.025);color:var(--fg-1);text-decoration:none;font:600 13.5px/1.25 var(--font-sans);animation:mxIn .32s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 35ms)}
.mx-tile .mx-ico{width:30px;height:30px}
.mx-tile span.mx-nm{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.mx-tile[aria-current="page"]{border-color:var(--signal)}
.mx-tile:active{background:rgba(58,160,210,.12)}
@keyframes mxIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.mx-sheet a.mx-all{display:inline-flex;align-items:center;gap:8px;min-height:44px;align-self:flex-start;color:var(--fg-2);font-size:14px;text-decoration:none}
.mx-sheet a.mx-all svg{width:14px;height:14px}
.mx-lbl{margin:0 0 -6px;font:500 11px/1 var(--font-mono,monospace);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.mx-chips{display:flex;flex-wrap:wrap;gap:8px}
.mx-chips a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--border-strong);border-radius:999px;color:var(--fg-1);text-decoration:none;font:500 14px/1 var(--font-sans)}
.mx-chips a[aria-current="page"]{border-color:var(--signal);color:var(--signal)}
.mx-util{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:4px}
.mx-langs{display:flex;border:1px solid var(--border-strong);border-radius:var(--radius-sm,8px);overflow:hidden}
.mx-langs button{min-width:52px;min-height:44px;border:0;border-right:1px solid var(--border-strong);background:transparent;color:var(--fg-3);font:500 12px/1 var(--font-mono,monospace);letter-spacing:.1em;cursor:pointer}
.mx-langs button:last-child{border-right:0}
.mx-langs button.is-on{background:rgba(58,160,210,.14);color:var(--signal)}
.mx-theme{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--border-strong);border-radius:var(--radius-sm,8px);background:transparent;color:var(--fg-1);font:500 14px/1 var(--font-sans);cursor:pointer}
.mx-theme svg{width:16px;height:16px}
.mx-sh-foot{display:flex;gap:8px;width:100%;max-width:640px;margin:0 auto;padding:12px clamp(16px,5vw,28px) calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--border-2)}
.mx-sheet a.mx-book{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;border-radius:10px;background:var(--signal);color:#05131D;font:600 15px/1 var(--font-sans);text-decoration:none}
.mx-sheet a.mx-wa{width:52px;min-height:52px;flex:none;display:grid;place-items:center;border:1px solid var(--border-strong);border-radius:10px;color:var(--fg-1)}
.mx-sheet a.mx-wa svg{width:20px;height:20px}
[data-theme="light"] .mx-sheet{background:rgba(250,252,254,.99)}
[data-theme="light"] .mx-tile,[data-theme="light"] .mx-seg{background:#fff}
@media (prefers-reduced-motion:reduce){.mx-panel,.mx-tile,.mx-seg button{transition:none!important;animation:none!important}}
/* ===== v6 ===== */
.nav-links .nav-ind{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;color:var(--fg-2);font:500 14px/inherit var(--font-sans);cursor:pointer;transition:color var(--dur-base,.2s) var(--ease-out,ease)}
.nav-links .nav-ind:hover,.nav-links .nav-ind.is-active{color:var(--fg-1);box-shadow:inset 0 -2px 0 var(--brand-sun);padding-bottom:2px}
.nav-links .nav-ind.is-active{color:var(--signal)}
.nav-links .nav-ind:focus-visible{outline:2px solid var(--signal);outline-offset:4px;border-radius:4px}
.nav-ind .nav-dd-caret{width:10px;height:10px;transition:transform .18s ease}
.nav-dd.mx6:hover:not(.is-closed)>.nav-ind .nav-dd-caret,.nav-dd.mx6:focus-within:not(.is-closed)>.nav-ind .nav-dd-caret{transform:rotate(180deg)}
.nav-dd.mx6 .mx-in.mx-in--svc{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(240px,280px)}
.nav-dd.mx6 .mx-in.mx-in--ind{grid-template-columns:minmax(0,1.35fr) minmax(260px,1fr);max-width:860px}
.nav-dd.mx6 .mx-in--ind .mx-col ul{gap:4px}
.nav-dd.mx6 .mx-in--ind a.mx-it{padding:12px 10px}
.nav-dd.mx6 .mx-in--ind .mx-tx b{font-size:14.5px}
.nav-dd.mx6 .mx-in--ind .mx-tx small{font-size:12.5px}
.nav-dd.mx6 .mx-feat--ind{background:linear-gradient(180deg,rgba(245,184,61,.12),rgba(245,184,61,.02) 70%)}
@media (max-width:1280px){.nav-dd.mx6 .mx-in.mx-in--svc{grid-template-columns:repeat(3,minmax(0,1fr)) 220px}}
.mx6-sheet .mx6-lbls{display:grid;grid-template-columns:3fr 1fr;gap:12px;margin:0 0 -8px;padding:0 6px;font:500 11px/1 var(--font-mono,monospace);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.mx6-sheet .mx6-lbls span+span{text-align:center}
.mx6-sheet .mx-seg.mx6-seg{grid-template-columns:repeat(3,minmax(0,1fr)) 1px minmax(0,1.15fr)}
.mx6-sheet .mx6-seg button.is-ind{grid-column:5;position:relative}
.mx6-sheet .mx6-seg::after{content:"";grid-column:4;grid-row:1;align-self:stretch;margin:6px 0;background:var(--border-strong)}
.mx6-sheet .mx-grid.is-ind{grid-template-columns:1fr}
.mx6-sheet .mx-tile--wide{flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;min-height:72px}
.mx6-sheet .mx-tile--wide .mx-nm{flex-direction:column;align-items:flex-start;gap:4px}
.mx6-sheet .mx-tile--wide small{font:400 12.5px/1.35 var(--font-sans);color:var(--fg-3)}
/* ===== v7 ===== */
.nav-dd.mx6 .mx-in.mx-in--agn{grid-template-columns:minmax(0,1fr) minmax(260px,300px);max-width:980px;margin-left:auto}
.mx-agn-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 8px!important}
.nav-dd.mx6 .mx-in--agn a.mx-it{padding:11px 10px}
.nav-dd.mx6 .mx-feat--agn{background:linear-gradient(180deg,rgba(255,92,122,.13),rgba(255,92,122,.02) 70%)}
.nav .mx-panel a.mx-all.mx-tel{min-height:30px;margin-top:-6px;font-family:var(--font-mono,monospace);font-size:12px;color:var(--fg-3)}
/* 9 header items since the For Agencies tab: the phone collapses to its icon (number stays in the For Agencies panel and the aria-label) below 1460 */
@media (min-width:1081px) and (max-width:1460px){.nav-tools .ck-phone .num{display:none!important}.nav-tools .ck-phone{width:auto!important;padding-left:4px!important;padding-right:4px!important}}
@media (min-width:1361px) and (max-width:1460px){.nav-inner{gap:20px!important}.nav-links{gap:18px!important}.nav-links a,.nav-links .nav-ind{font-size:13.5px!important}.nav-auth span{display:none!important}.nav-logo .logo-img{height:76px!important}}
@media (min-width:1081px) and (max-width:1360px){.nav-inner{gap:16px!important}.nav-links{gap:15px!important}.nav-links a,.nav-links .nav-ind{font-size:13px!important}.nav .nav-cta{display:none!important}.nav-auth span{display:none!important}.nav-tools .lang-switch{display:none!important}.nav-logo .logo-img{height:64px!important}.nav-links>li:first-child{display:none!important}}
@media (min-width:1081px) and (max-width:1220px){.nav-links{gap:12px!important}.nav-links a,.nav-links .nav-ind{font-size:12.5px!important}.nav-logo .logo-img{height:56px!important}.nav-tools .nav-auth{display:none!important}}
.mx7-sheet,.mx6-sheet .mx-seg.mx7-seg{grid-template-columns:repeat(3,minmax(0,1fr)) 1px minmax(0,1.15fr) minmax(0,1.05fr)}
.mx6-sheet .mx7-seg button{font-size:12.5px;padding:0 2px}
.mx6-sheet .mx7-seg button.is-agn{grid-column:6}
.mx6-sheet .mx6-lbls.mx7-lbls{grid-template-columns:repeat(3,minmax(0,1fr)) 1px minmax(0,1.15fr) minmax(0,1.05fr);gap:4px;padding:0 4px}
.mx6-sheet .mx7-lbls span:first-child{grid-column:1/4}
.mx6-sheet .mx7-lbls span:nth-child(2){grid-column:5;text-align:center}
.mx6-sheet .mx7-lbls span:nth-child(3){grid-column:6;text-align:center}
.mx6-sheet .mx7-seg button.is-agn[aria-selected="true"]{background:#FF5C7A;color:#1A0610}
/* ==== inline style #fixD-shell ==== */
/* fix pass D: header rules the shell adds, present from first paint so the header never jumps */a[href*="Sign In"],a[href*="Sign%20In"],a[aria-label="Sign in"]{display:none !important}.lang-switch{overflow:visible}.lang-switch button{position:relative}.lang-switch button:first-child{border-radius:var(--radius-sm,8px) 0 0 var(--radius-sm,8px)}.lang-switch button:last-child{border-radius:0 var(--radius-sm,8px) var(--radius-sm,8px) 0}.theme-toggle,.nav-auth,.nav-burger,.nav-tools .ck-phone{position:relative}.lang-switch button::after,.theme-toggle::after,.nav-auth::after,.nav-burger::after,.nav-tools .ck-phone::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}.mx-panel{opacity:0;visibility:hidden}.mx-sheet[hidden]{display:none}.nav-links a.nav-hot{position:relative}.sh-hot{position:relative;display:inline-block;width:8px;height:11px;margin-left:3px;vertical-align:super;line-height:0;pointer-events:none}.nav-hot > .sh-hot{position:absolute;top:-6px;left:calc(100% + 1px);margin:0;vertical-align:baseline}.sh-hot svg{position:absolute;display:block;overflow:visible}.sh-flame{left:0;top:0;width:8px;height:11px;filter:drop-shadow(0 0 4px rgba(252,185,19,.55));transform-origin:50% 100%;animation:shFlick 1.6s ease-in-out infinite}.sh-spark{left:7px;top:-3px;width:5px;height:5px;opacity:0;transform-origin:50% 50%;animation:shTwink 2.8s ease-in-out infinite .4s}.mx-tile .sh-hot,.mx-it .sh-hot{width:7px;height:10px;margin-left:5px;vertical-align:2px}.mx-tile .sh-flame,.mx-it .sh-flame{width:7px;height:10px}.nav-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}@keyframes shFlick{0%,100%{transform:scale(.95)}50%{transform:scale(1.05)}}@keyframes shTwink{0%,55%,100%{opacity:0;transform:scale(.4) rotate(0)}70%{opacity:1;transform:scale(1) rotate(45deg)}85%{opacity:0;transform:scale(.5) rotate(90deg)}}@media (prefers-reduced-motion:reduce){.sh-flame{animation:none}.sh-spark{display:none}}
/* ==== tokens-v2.css ==== */
/* ============================================================
OUNTERNET — Colors & Type
Design system tokens for ounternet.agency and ounternet.io
Brand heritage: Lochmara blue, Green Haze, Sun (from 2015 brand book)
2026 refresh: engineered, data-dense, AI-native, dark-first
============================================================ */
:root {
/* ---------- BRAND HERITAGE (from 2015 brand book) ---------- */
--brand-lochmara: #0080C3; /* primary blue */
--brand-lochmara-dark: #016095;
--brand-green-haze: #00A551; /* secondary — use sparingly */
--brand-green-dark: #007E3B;
--brand-sun: #FCB913; /* accent — use sparingly */
--brand-sun-dark: #B8890D;
/* ---------- CORE PALETTE (2026 refresh) ---------- */
/* Desaturated, technical extensions of Lochmara */
--blue-50: #EBF6FC;
--blue-100: #D2EAF6;
--blue-200: #A6D5ED;
--blue-300: #6FBBE0;
--blue-400: #3AA0D2;
--blue-500: #0080C3; /* = Lochmara */
--blue-600: #016095;
--blue-700: #064A74;
--blue-800: #0A3955;
--blue-900: #0B2838;
--blue-950: #071A27;
/* Near-neutral ink — slightly blue-biased so it reads engineered */
--ink-0: #FFFFFF;
--ink-50: #F7F8FA;
--ink-100: #EEF0F3;
--ink-200: #DDE1E7;
--ink-300: #C2C8D1;
--ink-400: #8E95A1;
--ink-500: #6B7280;
--ink-600: #4A5260;
--ink-700: #323944;
--ink-800: #1F242C;
--ink-900: #12151B;
--ink-950: #0A0C11;
/* Semantic color */
--success: #00A551; /* Green Haze */
--warning: #FCB913; /* Sun */
--danger: #D64545;
--info: #0080C3;
/* ---------- SEMANTIC TOKENS — LIGHT ---------- */
--bg: var(--ink-0);
--bg-subtle: var(--ink-50);
--bg-muted: var(--ink-100);
--bg-inverse: var(--ink-950);
--surface: var(--ink-0);
--surface-raised: var(--ink-0);
--surface-sunken: var(--ink-50);
--fg-1: var(--ink-950); /* primary text */
--fg-2: var(--ink-700); /* secondary text */
--fg-3: var(--ink-500); /* tertiary / meta */
--fg-4: var(--ink-400); /* disabled / placeholder */
--fg-inverse: var(--ink-0);
--dim: #74839D; /* AA-safe dim meta text, 5.04:1 on dark bg */
--border-1: var(--ink-200); /* default border */
--border-2: var(--ink-100); /* subtle dividers */
--border-strong: var(--ink-300);
--border-focus: var(--blue-500);
--accent: var(--blue-500);
--accent-hover: var(--blue-600);
--accent-press: var(--blue-700);
--accent-soft: var(--blue-50);
--accent-fg: var(--ink-0); /* text on accent bg */
/* ---------- TYPOGRAPHY ---------- */
/* Display: Satoshi (Fontshare). Body: Instrument Sans. Per build spec §02. */
--font-display: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--font-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
/* Yellow = structural third colour: highlights, underlines, tags, hover ticks.
Green = verified metrics ONLY (never status dots, never decoration). */
--structural: var(--brand-sun);
--verified: var(--brand-green-haze);
--font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
/* Scale — 1.2 minor-third, tightened at display end */
--fs-xs: 12px;
--fs-sm: 13px;
--fs-base: 15px;
--fs-md: 17px;
--fs-lg: 20px;
--fs-xl: 24px;
--fs-2xl: 32px;
--fs-3xl: 44px;
--fs-4xl: 60px;
--fs-5xl: 80px;
--fs-6xl: 112px;
/* Line heights */
--lh-tight: 1.05;
--lh-snug: 1.2;
--lh-normal: 1.45;
--lh-relaxed:1.6;
/* Weights */
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold:600;
--fw-bold: 700;
/* Letter-spacing — tight for display, open for eyebrow/caps */
--tracking-tight: -0.02em;
--tracking-tighter:-0.035em;
--tracking-normal: 0;
--tracking-wide: 0.06em;
--tracking-caps: 0.12em;
/* ---------- SPACING (4px base) ---------- */
--space-0: 0;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10:40px;
--space-12:48px;
--space-16:64px;
--space-20:80px;
--space-24:96px;
--space-32:128px;
/* ---------- RADII ---------- */
/* Kept small/tight — engineered, not friendly-blob */
--radius-xs: 2px;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 10px;
--radius-xl: 14px;
--radius-2xl: 20px;
--radius-full: 9999px;
/* ---------- ELEVATION ---------- */
/* Restrained; prefer borders over shadows on light surfaces */
--shadow-xs: 0 1px 2px rgba(10, 12, 17, 0.04);
--shadow-sm: 0 1px 2px rgba(10, 12, 17, 0.06), 0 1px 3px rgba(10, 12, 17, 0.04);
--shadow-md: 0 4px 8px -2px rgba(10, 12, 17, 0.06), 0 2px 4px -2px rgba(10, 12, 17, 0.04);
--shadow-lg: 0 12px 24px -8px rgba(10, 12, 17, 0.10), 0 4px 8px -4px rgba(10, 12, 17, 0.06);
--shadow-xl: 0 24px 48px -12px rgba(10, 12, 17, 0.18);
/* Inner/focus */
--ring-focus: 0 0 0 3px rgba(0, 128, 195, 0.28);
--inset-line: inset 0 0 0 1px rgba(10, 12, 17, 0.06);
/* ---------- MOTION ---------- */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--dur-fast: 120ms;
--dur-base: 200ms;
--dur-slow: 360ms;
/* ---------- LAYOUT ---------- */
--container-max: 1280px;
--container-pad: clamp(20px, 4vw, 48px);
--grid-gutter: 24px;
}
/* ---------- DARK THEME ---------- */
/* This is the PRIMARY context for the 2026 refresh. Most surfaces
in the agency/io sites ship dark by default. */
[data-theme="dark"], .theme-dark {
--bg: var(--ink-950);
--bg-subtle: #0D1017;
--bg-muted: #141821;
--bg-inverse: var(--ink-0);
--surface: #0F131A;
--surface-raised: #161B24;
--surface-sunken: #0A0C11;
--fg-1: #F2F4F7;
--fg-2: #BCC3CF;
--fg-3: #8C94A2;
--fg-4: #5D6471;
--fg-inverse: var(--ink-950);
--border-1: #232935;
--border-2: #1A1F28;
--border-strong: #323944;
--border-focus: var(--blue-400);
--accent: var(--blue-400);
--accent-hover: var(--blue-300);
--accent-press: var(--blue-500);
--accent-soft: rgba(58, 160, 210, 0.12);
--accent-fg: var(--ink-950);
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.35);
--shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.55), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 12px 24px -8px rgba(0, 0, 0, 0.6), 0 4px 8px -4px rgba(0, 0, 0, 0.4);
--shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.7);
--ring-focus: 0 0 0 3px rgba(58, 160, 210, 0.32);
--inset-line: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
/* ============================================================
SEMANTIC TYPE ROLES
Use these on real elements, not the raw --fs-* vars.
============================================================ */
.t-display-xl,
.t-display-lg,
.t-display-md,
.t-display-sm,
.t-heading-xl,
.t-heading-lg,
.t-heading-md,
.t-heading-sm {
font-family: var(--font-display);
color: var(--fg-1);
}
.t-display-xl { font-size: var(--fs-6xl); line-height: 0.96; letter-spacing: var(--tracking-tighter); font-weight: 500; }
.t-display-lg { font-size: var(--fs-5xl); line-height: 1.00; letter-spacing: var(--tracking-tighter); font-weight: 500; }
.t-display-md { font-size: var(--fs-4xl); line-height: 1.02; letter-spacing: var(--tracking-tight); font-weight: 500; }
.t-display-sm { font-size: var(--fs-3xl); line-height: 1.06; letter-spacing: var(--tracking-tight); font-weight: 500; }
.t-heading-xl { font-size: var(--fs-2xl); line-height: 1.15; letter-spacing: var(--tracking-tight); font-weight: 600; }
.t-heading-lg { font-size: var(--fs-xl); line-height: 1.2; letter-spacing: var(--tracking-tight); font-weight: 600; }
.t-heading-md { font-size: var(--fs-lg); line-height: 1.25; letter-spacing: var(--tracking-normal); font-weight: 600; }
.t-heading-sm { font-size: var(--fs-md); line-height: 1.3; letter-spacing: var(--tracking-normal); font-weight: 600; }
.t-body-lg { font-family: var(--font-sans); font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--fg-2); }
.t-body { font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--fg-2); }
.t-body-sm { font-family: var(--font-sans); font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--fg-2); }
.t-label { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 500; color: var(--fg-1); letter-spacing: 0; }
.t-meta { font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--fg-3); }
.t-eyebrow {
font-family: var(--font-mono);
font-size: var(--fs-xs);
font-weight: 500;
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
color: var(--fg-3);
}
.t-mono { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--fg-2); }
.t-code { font-family: var(--font-mono); font-size: 0.9em; background: var(--bg-muted); padding: 2px 6px; border-radius: var(--radius-xs); color: var(--fg-1); }
/* ============================================================
ELEMENT DEFAULTS
============================================================ */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body {
font-family: var(--font-sans);
font-size: var(--fs-base);
line-height: var(--lh-normal);
color: var(--fg-1);
background: var(--bg);
}
h1 { font: 500 var(--fs-4xl)/1.02 var(--font-display); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
h2 { font: 500 var(--fs-3xl)/1.06 var(--font-display); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
h3 { font: 600 var(--fs-2xl)/1.15 var(--font-display); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
h4 { font: 600 var(--fs-xl)/1.2 var(--font-display); color: var(--fg-1); }
h5 { font: 600 var(--fs-lg)/1.25 var(--font-sans); color: var(--fg-1); }
h6 { font: 600 var(--fs-md)/1.3 var(--font-sans); color: var(--fg-1); }
p { color: var(--fg-2); line-height: var(--lh-normal); }
a { color: var(--accent); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
code, pre { font-family: var(--font-mono); }
pre { background: var(--bg-muted); padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--border-1); overflow-x: auto; }
hr { border: 0; border-top: 1px solid var(--border-1); }
::selection { background: var(--blue-500); color: white; }
/* ==== conversion-kit.css ==== */
/* OUNTERNET conversion kit. One stylesheet, drop into any page after tokens-v2.css.
Uses tokens-v2 only. Signal blue for action, never green (green is reserved for verified metrics). */
:root{--ck-sig:var(--signal,#3AA0D2);--ck-sig-hover:var(--blue-300,#6FBBE0);--ck-on:#05131D;--ck-err:#FF9A8F;--ck-panel:color-mix(in srgb,var(--surface) 72%,transparent);--ck-panel-solid:var(--surface-raised)}
[data-theme="light"]{--ck-sig:#016095;--ck-sig-hover:#064A74;--ck-on:#FFFFFF;--ck-err:#B42318;--ck-panel:color-mix(in srgb,var(--surface) 88%,transparent)}
[data-ck] [hidden],.ck-overlay [hidden],.ck-demo [hidden]{display:none!important}
.ck-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ck-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.ck-eyebrow{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--fg-3);display:inline-flex;align-items:center;gap:10px;margin:0}
.ck-eyebrow::before{content:"";width:24px;height:1px;background:currentColor}
.ck-eyebrow--sig{color:var(--ck-sig)}
.ck-h2{font-family:var(--font-display);font-weight:800;font-size:clamp(32px,4.6vw,64px);line-height:.98;letter-spacing:-.035em;text-transform:uppercase;color:var(--fg-1);margin:0;text-wrap:balance}
.ck-lede{color:var(--fg-2);font-size:clamp(15px,1.2vw,17px);line-height:1.6;max-width:56ch;margin:0;text-wrap:pretty}
.ck :focus-visible,.ck-btn:focus-visible,.ck-phone:focus-visible,.ck-mbar a:focus-visible,.ck-chip:has(input:focus-visible),.ck-demo button:focus-visible{outline:2px solid var(--ck-sig);outline-offset:3px}
/* Buttons */
.ck-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:14px 22px;border-radius:var(--radius-sm);border:1px solid transparent;font-family:var(--font-sans);font-size:14px;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer;transition:background var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out);text-align:center}
body[style*="cursor: none"] .ck-btn,body.ck-nocursor .ck-btn{cursor:none}
.ck-btn:hover{text-decoration:none}
.ck-btn--primary{background:var(--ck-sig);border-color:var(--ck-sig);color:var(--ck-on)}
.ck-btn--primary:hover{background:var(--ck-sig-hover);border-color:var(--ck-sig-hover);color:var(--ck-on)}
.ck-btn--ghost{background:transparent;border-color:var(--border-strong);color:var(--fg-1)}
.ck-btn--ghost:hover{border-color:var(--fg-1);color:var(--fg-1)}
.ck-btn--link{background:none;border:0;padding:12px 2px;color:var(--ck-sig);text-decoration:underline;text-underline-offset:4px;min-height:44px;font-weight:500}
.ck-btn--link:hover{color:var(--fg-1)}
.ck-btn[disabled]{opacity:.7;cursor:progress}
.ck-btn svg{width:16px;height:16px;flex:none}
.ck-wa-ico{width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:url("/assets/si/whatsapp.svg") center/contain no-repeat;mask:url("/assets/si/whatsapp.svg") center/contain no-repeat}
.ck-spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:ckspin .8s linear infinite;flex:none}
@keyframes ckspin{to{transform:rotate(360deg)}}
.ck-ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
/* C3 + C4: capacity pill, one-line note, trust row. No box; sits under the CTA row and never wider than it. */
.ck-under{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:18px;min-width:0}
.ck-capacity{display:inline-flex;align-items:center;gap:9px;height:36px;margin:0;padding:0 16px 0 13px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(10,14,26,.55);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);font-family:var(--font-sans);font-size:13.5px;font-weight:500;line-height:1;color:#EEF2F8;white-space:nowrap}
.ck-cap-dot{position:relative;width:7px;height:7px;border-radius:50%;background:#2DD4BF;flex:none}
.ck-cap-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#2DD4BF;opacity:.55;animation:ckpulse 2.4s ease-out infinite}
@keyframes ckpulse{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(2.6);opacity:0}}
.ck-cap-note{margin:0;font-family:var(--font-sans);font-size:14px;line-height:1.45;color:rgba(255,255,255,.72);text-wrap:pretty;text-shadow:0 1px 2px rgba(5,7,11,.55)}
.ck-trust-wrap{overflow:hidden;max-width:100%}
.ck-trust{list-style:none;margin:0 0 0 -11px;padding:0;display:flex;flex-wrap:wrap;row-gap:6px;font-family:var(--font-sans);font-size:13px;line-height:1.3;color:rgba(255,255,255,.78);text-shadow:0 1px 2px rgba(5,7,11,.55)}
.ck-trust li{display:inline-flex;align-items:center;gap:6px;padding:0 10px;border-left:1px solid rgba(255,255,255,.22);white-space:nowrap}
.ck-tick{width:13px;height:13px;flex:none;color:#2DD4BF}
[data-theme="light"] .ck-capacity{background:rgba(255,255,255,.78);border-color:rgba(10,14,26,.1);color:var(--fg-1)}
[data-theme="light"] .ck-cap-note{color:var(--fg-2);text-shadow:none}
[data-theme="light"] .ck-trust{color:var(--fg-2);text-shadow:none}
[data-theme="light"] .ck-trust li{border-left-color:var(--border-strong)}
[data-theme="light"] .ck-tick{color:#0F8F80}
/* Off-photo placements (final CTA band, Apply aside, Contact): same shape, token colours */
.ck-final .ck-cap-note,.ck-aside .ck-cap-note{color:var(--fg-2);text-shadow:none}
.ck-final .ck-trust,.ck-aside .ck-trust{color:var(--fg-2);text-shadow:none}
.ck-final .ck-capacity,.ck-aside .ck-capacity{background:color-mix(in srgb,var(--surface) 70%,transparent);border-color:var(--border-1);color:var(--fg-1)}
/* Over photography (page heroes): a feathered, borderless dark halo keeps every glyph at 4.5:1 or better,
even over the brightest pixel of the image. It reads as shade, not a box. */
.hero .ck-under,.ck-on-photo .ck-under{position:relative;isolation:isolate}
.hero .ck-under::before,.ck-on-photo .ck-under::before{content:"";position:absolute;inset:-44px -56px -44px -52px;z-index:-1;background:rgba(5,7,11,.8);filter:blur(22px);border-radius:48px;pointer-events:none}
[data-theme="light"] .hero .ck-under::before,[data-theme="light"] .ck-on-photo .ck-under::before{background:rgba(255,255,255,.84)}
@media (prefers-reduced-motion:reduce){.ck-cap-dot::after{animation:none;opacity:0}}
/* Panels (C2, forms, dialogs) */
.ck-panel{border:1px solid var(--border-1);background:var(--ck-panel);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-radius:var(--radius-md);padding:clamp(20px,2.6vw,32px)}
/* C2 call deliverable card */
.ck-deliver h2,.ck-deliver h3{font-family:var(--font-display);font-weight:700;font-size:clamp(20px,1.8vw,24px);letter-spacing:-.02em;line-height:1.15;color:var(--fg-1);margin:0 0 18px}
.ck-deliver ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;counter-reset:ckd}
.ck-deliver li{counter-increment:ckd;display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;color:var(--fg-2);font-size:15px;line-height:1.55}
.ck-deliver li::before{content:counter(ckd,decimal-leading-zero);font-family:var(--font-mono);font-size:11px;color:var(--ck-sig);padding-top:4px}
.ck-deliver li b{color:var(--fg-1);font-weight:600}
.ck-deliver-foot{margin:20px 0 0;padding-top:16px;border-top:1px dashed var(--border-1);font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3)}
/* Form fields */
.ck-form{display:flex;flex-direction:column;gap:18px}
.ck-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px;align-items:start}
.ck-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.ck-field>label,.ck-label{font-size:14px;font-weight:600;color:var(--fg-1)}
.ck-label .opt,.ck-field>label .opt{font-weight:400;color:var(--fg-3)}
.ck-input{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface-sunken);color:var(--fg-1);font-family:var(--font-sans);font-size:16px;line-height:1.4}
textarea.ck-input{min-height:96px;resize:vertical}
.ck-input:focus{outline:none;border-color:var(--ck-sig);box-shadow:var(--ring-focus)}
.ck-input[aria-invalid="true"]{border-color:var(--ck-err)}
.ck-input:disabled{opacity:.5}
.ck-help{margin:0;font-size:13px;line-height:1.5;color:var(--fg-3)}
.ck-err{margin:0;font-size:13px;line-height:1.45;color:var(--ck-err);font-weight:500;display:flex;gap:6px}
.ck-err::before{content:"!";font-family:var(--font-mono);font-weight:700}
.ck-err[hidden]{display:none}
.ck-count{font-family:var(--font-mono);font-size:11px;color:var(--fg-3);align-self:flex-end}
.ck-check{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-size:14px;color:var(--fg-2);cursor:pointer}
.ck-check input{width:20px;height:20px;accent-color:var(--ck-sig);margin:0;flex:none}
.ck-consent{margin:0;font-size:12.5px;line-height:1.5;color:var(--fg-3)}
.ck-consent a{color:var(--fg-2);text-decoration:underline}
.ck-submit-row{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.ck-alert{border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:16px 18px;display:flex;flex-direction:column;gap:12px;font-size:14.5px;line-height:1.5;color:var(--fg-1);background:var(--surface-sunken)}
.ck-alert[hidden]{display:none}
.ck-alert--err{border-color:var(--ck-err)}
.ck-alert--ok{border-color:var(--ck-sig)}
.ck-alert p{margin:0;color:var(--fg-1)}
/* Chips: multi = buttons with aria-pressed, single = radio inputs */
.ck-chips{display:flex;flex-wrap:wrap;gap:10px}
.ck-chip{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 16px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:transparent;color:var(--fg-1);font-family:var(--font-sans);font-size:15px;font-weight:500;cursor:pointer;text-align:left;transition:border-color var(--dur-fast),background var(--dur-fast)}
.ck-chip:hover{border-color:var(--fg-2)}
.ck-chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.ck-chip .box{width:18px;height:18px;border:1.5px solid var(--fg-3);border-radius:var(--radius-xs);flex:none;display:grid;place-items:center}
.ck-chip--radio .box{border-radius:50%}
.ck-chip[aria-pressed="true"],.ck-chip:has(input:checked){border-color:var(--ck-sig);background:color-mix(in srgb,var(--ck-sig) 12%,transparent)}
.ck-chip[aria-pressed="true"] .box,.ck-chip:has(input:checked) .box{border-color:var(--ck-sig);background:var(--ck-sig)}
.ck-chip[aria-pressed="true"] .box::after{content:"";width:9px;height:5px;border-left:2px solid var(--ck-on);border-bottom:2px solid var(--ck-on);transform:translateY(-1px) rotate(-45deg)}
.ck-chip:has(input:checked) .box::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--ck-on)}
.ck-chips--col{flex-direction:column;align-items:stretch}
@media(min-width:640px){.ck-chips--col{flex-direction:row;align-items:center}}
/* C1 application */
.ck-apply{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);align-items:start}
@media(max-width:960px){.ck-apply{grid-template-columns:minmax(0,1fr)}}
.ck-app{padding:clamp(20px,3vw,40px);min-height:460px;display:flex;flex-direction:column;gap:24px}
.ck-prog{display:flex;flex-direction:column;gap:10px}
.ck-prog-t{margin:0;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2)}
.ck-prog-bar{height:3px;background:var(--border-1);border-radius:3px;overflow:hidden}
.ck-prog-bar i{display:block;height:100%;background:var(--ck-sig);transition:width var(--dur-slow) var(--ease-out)}
.ck-step{display:flex;flex-direction:column;gap:18px}
.ck-step[hidden]{display:none}
.ck-step-h{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,2.6vw,34px);line-height:1.12;letter-spacing:-.025em;color:var(--fg-1);margin:0;text-wrap:balance}
.ck-step-h:focus{outline:none}
.ck-step-h:focus-visible{outline:2px solid var(--ck-sig);outline-offset:6px}
.ck-step-h .opt{font-weight:500;color:var(--fg-3);font-size:.7em;letter-spacing:0}
.ck-app-nav{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:auto;padding-top:8px}
.ck-app-nav .ck-btn--primary{min-width:160px}
.ck-screen{display:flex;flex-direction:column;gap:18px}
.ck-screen[hidden]{display:none}
.ck-proc{display:flex;align-items:center;gap:14px;font-family:var(--font-display);font-size:clamp(22px,2.4vw,30px);font-weight:700;color:var(--fg-1)}
.ck-proc .ck-spin{width:24px;height:24px}
.ck-cal{border:1px solid var(--border-1);border-radius:var(--radius-sm);overflow:hidden;background:var(--surface-sunken)}
.ck-cal iframe{display:block;width:100%;height:680px;border:0}
.ck-cal-empty{padding:28px;display:flex;flex-direction:column;gap:12px;align-items:flex-start;border:1px dashed var(--border-strong);border-radius:var(--radius-sm)}
.ck-cal-empty .t{font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--fg-1);margin:0}
.ck-cal-empty p{margin:0;color:var(--fg-2);font-size:14.5px;line-height:1.55;max-width:52ch}
.ck-aside{display:flex;flex-direction:column;gap:20px;position:sticky;top:120px}
@media(max-width:960px){.ck-aside{position:static}}
.ck-aside .ck-under{margin-top:0;padding:0 4px}
/* C5 risk reversal */
.ck-risk{display:flex;flex-direction:column;gap:clamp(28px,4vw,48px)}
.ck-risk-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--border-1)}
@media(max-width:1100px){.ck-risk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.ck-risk-grid{grid-template-columns:minmax(0,1fr)}}
.ck-risk-grid li{padding:24px 24px 24px 0;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--border-2)}
@media(min-width:621px){.ck-risk-grid li+li{padding-left:24px;border-left:1px solid var(--border-2)}.ck-risk-grid li:nth-child(3){border-left:0;padding-left:0}}
@media(min-width:1101px){.ck-risk-grid li:nth-child(3){border-left:1px solid var(--border-2);padding-left:24px}}
.ck-risk-grid .n{font-family:var(--font-mono);font-size:11px;color:var(--ck-sig);letter-spacing:.08em}
.ck-risk-grid b{font-family:var(--font-display);font-size:18px;line-height:1.25;font-weight:700;color:var(--fg-1);letter-spacing:-.01em}
.ck-risk-grid p{margin:0;font-size:14.5px;line-height:1.55;color:var(--fg-2)}
/* C6 visibility check */
.ck-vis{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:start}
@media(max-width:900px){.ck-vis{grid-template-columns:minmax(0,1fr)}}
.ck-vis-copy{display:flex;flex-direction:column;gap:16px}
.ck-vis-t{font-family:var(--font-display);font-weight:800;font-size:clamp(26px,3vw,40px);line-height:1.02;letter-spacing:-.03em;text-transform:uppercase;color:var(--fg-1);margin:0;text-wrap:balance}
.ck-vis--compact{grid-template-columns:minmax(0,1fr);gap:16px}
.ck-vis--compact .ck-vis-t{font-size:clamp(20px,2vw,24px);text-transform:none;letter-spacing:-.02em;font-weight:700}
/* C7 exit intent dialog */
.ck-overlay{position:fixed;inset:0;z-index:10001;background:rgba(5,7,11,.72);display:grid;place-items:center;padding:20px}
.ck-overlay[hidden]{display:none}
.ck-dialog{width:min(560px,100%);max-height:calc(100vh - 40px);overflow:auto;background:var(--ck-panel-solid);border:1px solid var(--border-strong);border-radius:var(--radius-md);padding:clamp(22px,3vw,32px);box-shadow:var(--shadow-xl);display:flex;flex-direction:column;gap:16px}
.ck-dialog h2{font-family:var(--font-display);font-weight:800;font-size:clamp(24px,2.6vw,32px);text-transform:uppercase;letter-spacing:-.03em;line-height:1;margin:0;color:var(--fg-1)}
.ck-dialog h2:focus{outline:none}
.ck-dialog-close{align-self:flex-start}
/* C8 header phone */
.ck-phone{display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;justify-content:center;padding:0 8px;color:var(--fg-2);font-family:var(--font-mono);font-size:12.5px;letter-spacing:.02em;text-decoration:none;white-space:nowrap;border-radius:var(--radius-sm)}
.ck-phone:hover{color:var(--ck-sig);text-decoration:none}
.ck-phone svg{width:16px;height:16px;flex:none}
@media(max-width:1279px){.ck-phone .num{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
/* C9 sticky mobile bar */
.ck-mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:97;padding-bottom:env(safe-area-inset-bottom);grid-template-columns:1fr 1fr;border-top:1px solid var(--border-strong);background:color-mix(in srgb,var(--bg) 94%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.ck-mbar a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:12px;font-size:14px;font-weight:600;text-decoration:none;color:var(--fg-1)}
.ck-mbar .apply{background:var(--ck-sig);color:var(--ck-on)}
.ck-mbar--solo{grid-template-columns:1fr}
@media(max-width:767px){.ck-mbar{display:grid}body.ck-has-mbar{padding-bottom:calc(56px + env(safe-area-inset-bottom))}body.ck-app-open .ck-mbar{display:none}body.ck-app-open.ck-has-mbar{padding-bottom:0}}
/* C11 FAQ */
.ck-faq{max-width:860px;border-top:1px solid var(--border-1)}
.ck-faq-item{border-bottom:1px solid var(--border-1)}
.ck-faq-q{margin:0;font:inherit}
.ck-faq-q button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:18px 2px;background:none;border:0;color:var(--fg-1);font-family:var(--font-display);font-weight:700;font-size:clamp(16px,1.5vw,20px);letter-spacing:-.01em;text-align:left;cursor:pointer}
.ck-faq-q button:hover{color:var(--ck-sig)}
.ck-faq-q .ico{font-family:var(--font-mono);color:var(--ck-sig);font-size:20px;flex:none;width:20px;text-align:center}
.ck-faq-a{padding:0 2px 22px;color:var(--fg-2);font-size:15px;line-height:1.6;max-width:64ch}
.ck-faq-a p{margin:0}
.ck-faq-a[hidden]{display:none}
/* C12 testimonials */
.ck-testi{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:14px}
.ck-testi figure{margin:0;display:flex;flex-direction:column;gap:14px}
.ck-testi blockquote{margin:0;font-size:16.5px;line-height:1.55;color:var(--fg-1)}
.ck-testi figcaption{font-size:13px;color:var(--fg-3);display:flex;flex-direction:column;gap:3px}
.ck-testi figcaption strong{color:var(--fg-1)}
.ck-testi .res{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
/* C13 article inline CTA */
.ck-inline{margin:40px 0;padding:clamp(20px,2.6vw,28px)}
.ck-inline-t{margin:0 0 14px;font-family:var(--font-display);font-weight:700;font-size:20px;line-height:1.25;color:var(--fg-1)}
.ck-inline .ck-ctas{margin-top:14px}
/* Final CTA band */
.ck-final{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,5vw,72px);align-items:center}
@media(max-width:960px){.ck-final{grid-template-columns:minmax(0,1fr)}}
.ck-final-copy{display:flex;flex-direction:column;gap:20px}
.ck-final .ck-h2 .sig{color:var(--ck-sig)}
/* Demo switch (review only) */
.ck-demo{position:fixed;right:16px;bottom:16px;z-index:10002;display:flex;flex-direction:column-reverse;align-items:flex-end;gap:8px}
@media(max-width:767px){.ck-demo{bottom:calc(16px + env(safe-area-inset-bottom))}body.ck-has-mbar:not(.ck-app-open) .ck-demo{bottom:72px}}
.ck-demo>button{min-height:44px;padding:10px 14px;border:1px dashed var(--border-strong);border-radius:var(--radius-sm);background:var(--ck-panel-solid);color:var(--fg-2);font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.ck-demo-menu{display:flex;flex-direction:column;gap:4px;padding:6px;background:var(--ck-panel-solid);border:1px solid var(--border-strong);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg)}
.ck-demo-menu[hidden]{display:none}
.ck-demo-menu button{min-height:44px;padding:8px 14px;text-align:left;background:none;border:0;border-radius:var(--radius-xs);color:var(--fg-1);font-family:var(--font-sans);font-size:14px;cursor:pointer}
.ck-demo-menu button:hover{background:var(--bg-muted)}
@media (prefers-reduced-motion:reduce){.ck-spin{animation-duration:2.4s}.ck-prog-bar i,.ck-btn,.ck-chip{transition:none}}
/* Text link: "Apply for [service]" and "Want a plan like this?" lines */
.ck-textlink{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:20px;color:var(--ck-sig);font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:4px}
.ck-textlink:hover{color:var(--fg-1)}
.ck-textlink svg{width:14px;height:14px}
.ck-caseline{margin:14px 0 0;font-size:14.5px;color:var(--fg-2)}
.ck-caseline a{color:var(--ck-sig);font-weight:600;text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px}
.ck-caseline a:hover{color:var(--fg-1)}
.ck-band{padding:clamp(64px,8vw,128px) 0;border-top:1px solid var(--border-2)}
/* Article rail */
.ck-rail{display:none}
@media(min-width:1280px){.ck-rail{display:block;position:sticky;top:104px;align-self:start}}
.ck-rail-card{opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),visibility 0s linear var(--dur-base);padding:20px}
.ck-rail-card.is-on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.ck-rail-card .ck-inline-t{font-size:17px;margin-bottom:14px}
.ck-ctas--col{flex-direction:column;align-items:stretch}
.ck-ctas--col .ck-btn{width:100%}
@media (prefers-reduced-motion:reduce){.ck-rail-card{transition:none;transform:none}}
/* Inline CTAs inside article prose: neutralise prose heading and paragraph spacing */
.prose .ck-inline h2.ck-vis-t,.prose .ck-inline .ck-inline-t{margin:0 0 6px;font-size:clamp(20px,2vw,24px);line-height:1.2}
.prose .ck-inline p{margin:0 0 12px}
.prose .ck-inline .ck-vis{gap:12px}
.prose .ck-inline .ck-form{gap:14px}
.ck-vis-band{padding:clamp(20px,3vw,36px)}.ck-vis-band .ck-panel{border:0;background:none;padding:0;-webkit-backdrop-filter:none;backdrop-filter:none}
/* Auto mobile menu (pages without their own) */
.ck-mburger{display:none;width:44px;height:44px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:transparent;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer}
.ck-mburger span{display:block;width:18px;height:1.5px;background:var(--fg-1)}
.ck-mburger:focus-visible{outline:2px solid var(--ck-sig);outline-offset:3px}
@media(max-width:1080px){.ck-mburger{display:inline-flex}}
.ck-mmenu{position:fixed;left:0;right:0;top:84px;z-index:99;padding:16px clamp(20px,4vw,48px) 24px;background:var(--ck-panel-solid);border-bottom:1px solid var(--border-strong);display:flex;flex-direction:column;gap:16px}
.ck-mmenu[hidden]{display:none}
.ck-mmenu ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ck-mmenu li a{display:flex;align-items:center;min-height:48px;color:var(--fg-1);font-size:17px;font-weight:500;text-decoration:none;border-bottom:1px solid var(--border-2)}
.ck-mmenu li a[aria-current]{color:var(--ck-sig)}
.nav-links a[aria-current="page"],.m-menu a[aria-current="page"]{color:var(--ck-sig)}
/* ==== consent-v1.css ==== */
/* OUNTERNET consent v1: banner, preferences dialog, embed gate. Tokens from tokens-v2.css with safe fallbacks. */
.cc-banner,.cc-dlg,.cc-gate{--cc-fg:var(--fg-1,#F2F5F9);--cc-fg2:var(--fg-2,#C4CCD6);--cc-bd:var(--border-strong,#3A4250);--cc-sig:var(--ck-sig,#3AA0D2);font-family:var(--font-sans,system-ui,sans-serif);color:var(--cc-fg)}
.cc-banner{position:fixed;left:16px;bottom:16px;z-index:9990;width:min(440px,calc(100vw - 32px));padding:22px 22px 20px;display:flex;flex-direction:column;gap:12px;border:1px solid var(--cc-bd);border-radius:var(--radius-md,14px);background:color-mix(in srgb,var(--surface,#11151C) 90%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 18px 50px rgba(0,0,0,.4)}
.cc-banner[hidden],.cc-dlg-wrap[hidden]{display:none!important}
.cc-title{margin:0;font-family:var(--font-display,inherit);font-weight:700;font-size:19px;letter-spacing:-.01em;line-height:1.25;color:var(--cc-fg)}
.cc-body{margin:0;font-size:15px;line-height:1.55;color:var(--cc-fg2)}
.cc-body a,.cc-links a{color:var(--cc-fg);text-decoration:underline;text-underline-offset:3px}
.cc-body a:hover,.cc-links a:hover{color:var(--cc-sig)}
.cc-links{margin:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px}
.cc-gpc{margin:0;padding:8px 12px;border-radius:8px;border:1px solid color-mix(in srgb,var(--cc-sig) 50%,transparent);font-size:14px;line-height:1.45;color:var(--cc-fg)}
.cc-btns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:4px}
.cc-btn{min-height:46px;padding:10px 12px;border:1px solid var(--cc-fg2);border-radius:var(--radius-sm,10px);background:var(--surface-sunken,rgba(255,255,255,.04));color:var(--cc-fg);font:600 14.5px/1.2 var(--font-sans,system-ui,sans-serif);cursor:pointer;transition:border-color .15s,background .15s}
.cc-btn:hover{border-color:var(--cc-fg);background:color-mix(in srgb,var(--cc-fg) 8%,transparent)}
.cc-btn:focus-visible,.cc-sw:focus-visible,.cc-see:focus-visible,.cc-x:focus-visible,.cc-links a:focus-visible,.cc-body a:focus-visible,.cc-gate-link:focus-visible{outline:2px solid var(--cc-sig);outline-offset:3px}
.cc-btn--sig{background:var(--cc-sig);border-color:var(--cc-sig);color:var(--ck-on,#05131D)}
.cc-btn--sig:hover{background:var(--ck-sig-hover,var(--cc-sig));border-color:var(--ck-sig-hover,var(--cc-sig))}
@media (max-width:767px){
.cc-banner{left:0;right:0;bottom:0;width:100%;border-radius:16px 16px 0 0;border-left:0;border-right:0;border-bottom:0;padding:18px 18px calc(16px + env(safe-area-inset-bottom))}
body.cc-open .ck-mbar{bottom:var(--cc-h,0px)}
.cc-btns{grid-template-columns:1fr 1fr 1fr}
.cc-btn{font-size:14px;padding:10px 6px}
}
/* dialog */
.cc-dlg-wrap{position:fixed;inset:0;z-index:10010;display:flex;align-items:center;justify-content:center;padding:16px}
.cc-scrim{position:absolute;inset:0;background:rgba(5,8,14,.55)}
.cc-dlg{position:relative;width:min(620px,100%);max-height:min(88vh,860px);overflow:auto;padding:24px;display:flex;flex-direction:column;gap:14px;border:1px solid var(--cc-bd);border-radius:var(--radius-md,14px);background:var(--surface,#11151C);box-shadow:0 24px 70px rgba(0,0,0,.5)}
.cc-dlg:focus{outline:none}
.cc-dlg-h{display:flex;align-items:center;justify-content:space-between;gap:16px}
.cc-dlg-h h2{margin:0;font-family:var(--font-display,inherit);font-weight:700;font-size:22px;color:var(--cc-fg)}
.cc-x{flex:none;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--cc-bd);border-radius:var(--radius-sm,10px);background:transparent;color:var(--cc-fg);cursor:pointer}
.cc-x svg{width:16px;height:16px}
.cc-rows{display:flex;flex-direction:column}
.cc-row{padding:14px 0;border-top:1px solid var(--border-1,#262C36);display:flex;flex-direction:column;gap:6px}
.cc-row-t{display:flex;align-items:center;gap:12px}
.cc-row-t h3{margin:0;flex:1;font-size:16px;font-weight:600;color:var(--cc-fg)}
.cc-row p{margin:0;font-size:14.5px;line-height:1.5;color:var(--cc-fg2)}
.cc-always{font:500 12.5px var(--font-mono,ui-monospace,monospace);color:var(--cc-fg2)}
.cc-sw{position:relative;flex:none;width:52px;height:30px;margin:7px 0;border:1px solid var(--cc-fg2);border-radius:99px;background:var(--surface-sunken,rgba(255,255,255,.04));cursor:pointer;padding:0}
.cc-sw::before{content:"";position:absolute;inset:-8px -4px}
.cc-sw .k{position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:var(--cc-fg2);transition:transform .18s,background .18s}
.cc-sw[aria-checked="true"]{background:var(--cc-sig);border-color:var(--cc-sig)}
.cc-sw[aria-checked="true"] .k{transform:translateX(22px);background:var(--ck-on,#05131D)}
.cc-sw:disabled{cursor:not-allowed;opacity:.75}
.cc-see{align-self:flex-start;min-height:44px;padding:0;border:0;background:none;color:var(--cc-fg);font:600 14px var(--font-sans,system-ui,sans-serif);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cc-list ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.cc-list li{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-radius:8px;background:var(--surface-sunken,rgba(255,255,255,.04));font-size:14px;line-height:1.45;color:var(--cc-fg2)}
.cc-list b{font:500 13.5px var(--font-mono,ui-monospace,monospace);color:var(--cc-fg);word-break:break-word}
.cc-none{font-size:14px;color:var(--cc-fg2)}
body.cc-dlg-open{overflow:hidden}
@media (max-width:520px){.cc-dlg{padding:18px}.cc-dlg .cc-btns{grid-template-columns:1fr}}
/* embed gate */
.cc-gate{display:flex;flex-direction:column;gap:12px;padding:20px;border:1px solid var(--cc-bd);border-radius:var(--radius-md,14px);background:var(--ck-panel,color-mix(in srgb,var(--surface,#11151C) 72%,transparent));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.cc-gate p{margin:0;font-size:15.5px;line-height:1.5;color:var(--cc-fg)}
.cc-gate-a{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.cc-gate-a .cc-btn{min-width:150px}
.cc-gate-link{color:var(--cc-fg);font-size:14.5px;text-decoration:underline;text-underline-offset:3px}
.cc-gate--ask{margin-bottom:12px}
/* form consent (form-consent-v1.js) */
.fc-opt{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:6px 0;font-size:14.5px;line-height:1.5;color:var(--fg-2,#C4CCD6);cursor:pointer}
.fc-opt input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--ck-sig,#3AA0D2);cursor:pointer}
.fc-opt input:focus-visible{outline:2px solid var(--ck-sig,#3AA0D2);outline-offset:3px}
.ck-consent a{color:var(--fg-1,#F2F5F9)}
@media print{.cc-banner,.cc-dlg-wrap{display:none!important}}
@media (prefers-reduced-motion:reduce){.cc-sw .k,.cc-btn{transition:none}}
/* ==== inline style ==== */
/* ============================================================
OUNTERNET, AI Platform Advertising & GEO
Inherits the site system: Satoshi display, Instrument Sans body,
v13 (forked from v12): the dental clinic case is replaced by the shared Zegaz case component (zegaz-case-v1.css/js). v12 (forked from v11): Roboto only, new hero (rotating platform word with logos, explainer chips, orbit scene), scroll-scrubbed chat walkthrough, SEO/AEO/GEO section, AEO FAQ, team v4. New styles in aag-v12.css, new behaviour in aag-v12.js.
Lochmara signal, grain + custom cursor.
============================================================ */
:root{--font-display:"Satoshi",ui-sans-serif,system-ui,sans-serif;--signal:var(--blue-400);--signal-strong:var(--blue-500);--grain-opacity:0.06}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip;scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg-1);font-family:var(--font-sans);cursor:none}
@media (hover:none){body{cursor:auto}.cursor,.cursor-ring{display:none !important}}
@media (prefers-reduced-motion:reduce){body{cursor:auto}.cursor,.cursor-ring{display:none !important}*{animation-duration:0.01ms !important;transition-duration:0.01ms !important}}
::selection{background:var(--brand-sun);color:#0A0C11}
a,button,[data-magnetic]{cursor:none}
/* texture + cursor (site-wide) */
.grain{position:fixed;inset:0;pointer-events:none;z-index:2;opacity:var(--grain-opacity);mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,")}
.cursor{border-radius:50%;position:fixed;width:22px;height:22px;background:url("assets/favicon-ounternet.png") center / contain no-repeat;top:0;left:0;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:transform var(--dur-fast) var(--ease-out),width var(--dur-base) var(--ease-out),height var(--dur-base) var(--ease-out)}
.cursor-ring{display:none;position:fixed;width:32px;height:32px;border-radius: 50%;border:1px solid var(--fg-3);top:0;left:0;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width var(--dur-slow) var(--ease-out),height var(--dur-slow) var(--ease-out),border-color var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out);mix-blend-mode:difference}
.cursor.is-hover{width:30px;height:30px;border-radius:50%;}
.cursor-ring.is-hover{width:64px;height:64px;border-color:var(--signal);background:rgba(58,160,210,0.06)}
.loader{position:fixed;inset:0;z-index:10000;background:var(--bg);display:flex;align-items:center;justify-content:center;transition:opacity 500ms var(--ease-out),visibility 500ms var(--ease-out)}
.loader img{width:56px;height:56px;object-fit:contain;animation:loaderPulse 1.1s ease-in-out infinite}
.loader.is-done{opacity:0;visibility:hidden}
@keyframes loaderPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(0.85);opacity:0.5}}
/* primitives */
.container{width:100%;max-width:1440px;margin:0 auto;padding:0 clamp(20px,4vw,48px);position:relative}
.section{position:relative;padding:clamp(72px,9vw,120px) 0;border-top:1px solid var(--border-2)}
.eyebrow{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--fg-3);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--fg-3);display:inline-block}
.eyebrow--signal{color:var(--brand-sun)}
.eyebrow--signal::before{background:var(--brand-sun)}
.sec-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(40px,5vw,64px)}
@media (max-width:900px){.sec-head{grid-template-columns:1fr;gap:20px}}
.sec-head h2{font-family:var(--font-display);font-weight:800;font-size:clamp(28px,3.4vw,48px);line-height:1;letter-spacing:-0.035em;text-transform:uppercase;margin-top:20px;max-width:20ch}
.sec-head h2 .signal{color:var(--signal)}
.sec-head p{color:var(--fg-2);font-size:17px;line-height:1.6;max-width:62ch}
@media (max-width:640px){.sec-head p{font-size:15.5px}}
.note{font-family:var(--font-mono);font-size:11px;line-height:1.7;color:var(--fg-4);letter-spacing:0.02em;max-width:74ch}
/* nav (site) */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:20px 0;backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);background:rgba(10,12,17,0.55);border-bottom:1px solid rgba(35,41,53,0);transition:border-color var(--dur-slow) var(--ease-out),background var(--dur-slow) var(--ease-out)}
.nav.is-scrolled{border-bottom-color:var(--border-1);background:rgba(10,12,17,0.85)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:40px}
.nav-logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:-0.02em;color:var(--fg-1);text-decoration:none}
.nav-logo .logo-img{height:84px;width:auto;display:block;filter:drop-shadow(0 1px 10px rgba(0,0,0,0.4)) brightness(1.2) saturate(1.05)}
@media (max-width:640px){.nav-logo .logo-img{height:68px}}
.nav-links{display:flex;gap:28px;list-style:none}
.nav-links a{color:var(--fg-2);text-decoration:none;font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:6px;transition:color var(--dur-base) var(--ease-out)}
.nav-links a:hover{color:var(--fg-1);box-shadow:inset 0 -2px 0 var(--brand-sun);padding-bottom:2px}
.nav-links a.is-active{color:var(--signal);box-shadow:inset 0 -2px 0 var(--brand-sun);padding-bottom:2px}
.nav-cta{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);font-size:13px;font-weight:500;color:var(--fg-1);text-decoration:none;background:transparent;transition:all var(--dur-base) var(--ease-out)}
.nav-cta:hover{border-color:var(--signal);color:var(--signal)}
.nav-cta .arrow{width:14px;height:14px}
.nav-auth{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--fg-2);text-decoration:none;transition:color var(--dur-base) var(--ease-out)}
.nav-auth:hover{color:var(--signal)}
.nav-auth svg{width:16px;height:16px;flex:none}
@media (max-width:560px){.nav-auth span{display:none}}
@media (max-width:1080px){.nav-links{display:none}}
/* buttons (site) */
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 24px;border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:14px;font-weight:500;text-decoration:none;cursor:none;border:1px solid transparent;transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);white-space:nowrap;min-height:44px}
.btn--primary{background:var(--signal);color:#05131D;border-color:var(--signal)}
.btn--primary:hover{background:var(--blue-300);border-color:var(--blue-300)}
.btn--ghost{background:transparent;color:var(--fg-1);border-color:var(--border-strong)}
.btn--ghost:hover{border-color:var(--fg-1)}
.btn .arrow{width:16px;height:16px;transition:transform var(--dur-base) var(--ease-out)}
.btn:hover .arrow{transform:translate(2px,-2px)}
/* reveal system: opacity + 14px rise, 500ms, staggered 60ms */
html.js-reveal .rv:not(.is-in){opacity:0;transform:translateY(14px);transition:opacity 500ms cubic-bezier(.2,.8,.2,1),transform 500ms cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0ms)}
.rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}
/* ============================================================
HERO, ten blue links became one answer
============================================================ */
.hero{position:relative;padding:calc(120px + clamp(28px,5vw,64px)) 0 clamp(64px,8vw,104px);overflow:hidden}
.hero::before{content:"";position:absolute;left:50%;top:-10%;width:min(1100px,120vw);height:min(1100px,120vw);transform:translateX(-50%);background:radial-gradient(circle,rgba(58,160,210,0.16),rgba(58,160,210,0.04) 42%,transparent 66%);pointer-events:none}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:start}
@media (max-width:1000px){.hero-inner{grid-template-columns:1fr;gap:44px}}
.hero-eyebrow{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--signal);margin-bottom:26px;display:inline-flex;align-items:center;gap:12px}
.hero-eyebrow::before{content:"";width:32px;height:1px;background:var(--signal)}
.hero h1{font-family:var(--font-display);font-weight:800;font-size:clamp(44px,7vw,104px);line-height:0.95;letter-spacing:-0.03em;text-transform:uppercase;max-width:15ch}
.hero h1 .accent{color:var(--signal);font-style:italic;font-weight:500}
.hero .hero-sub{margin-top:26px;font-size:17px;line-height:1.6;color:var(--fg-2);max-width:60ch}
.hero .hero-sub strong{color:var(--fg-1);font-weight:500}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:30px;font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--fg-3)}
.hero-meta span{display:inline-flex;align-items:center;gap:8px}
.hero-meta .live-dot{width:6px;height:6px;border-radius:999px;background:var(--signal);box-shadow:0 0 10px var(--signal);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.4;transform:scale(0.85)}}
/* ---- hero scene: ambient glow + the assistant card as the hero visual ---- */
.scene{position:relative;min-width:0;display:flex;flex-direction:column}
.scene-glow{position:absolute;left:50%;top:44%;width:min(760px,125%);height:min(760px,125%);transform:translate(-50%,-50%);pointer-events:none;background:radial-gradient(circle at 38% 34%,rgba(58,160,210,0.2),transparent 58%),radial-gradient(circle at 68% 70%,rgba(252,185,19,0.09),transparent 62%)}
.hc{position:relative;z-index:2;width:100%;border:1px solid rgba(58,160,210,0.25);border-radius:16px;background:linear-gradient(168deg,rgba(18,23,31,0.9),rgba(10,13,18,0.94));-webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15);box-shadow:0 0 90px rgba(58,160,210,0.2),0 30px 80px rgba(0,0,0,0.55);display:flex;flex-direction:column;overflow:hidden}
.hc-top{display:flex;align-items:center;gap:11px;padding:15px 18px;border-bottom:1px solid var(--border-2)}
.hc-mark{width:20px;height:20px;border-radius:999px;background:radial-gradient(circle at 34% 30%,#6FBBE0,#2C7FA8);flex:none;box-shadow:0 0 12px rgba(58,160,210,0.5)}
.hc-model{font-family:var(--font-mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--fg-3);transition:opacity 200ms var(--ease-out)}
.hc-model.is-fading{opacity:0}
.hc-dots{margin-left:auto;display:flex;gap:5px}
.hc-dots i{width:7px;height:7px;border-radius:999px;background:var(--fg-4);opacity:0.4}
.hc-body{padding:20px 18px;min-height:430px;display:flex;flex-direction:column;gap:15px;transition:opacity 400ms var(--ease-out)}
@media (max-width:1000px){.hc-body{min-height:392px}}
.hc-body.is-out{opacity:0}
.hc-user{align-self:flex-end;max-width:86%;padding:12px 16px;border-radius:15px 15px 5px 15px;background:rgba(58,160,210,0.14);border:1px solid rgba(58,160,210,0.26);font-size:15px;line-height:1.5;color:var(--fg-1);opacity:0;transform:translateY(8px);transition:opacity 300ms var(--ease-out),transform 300ms var(--ease-out)}
.hc-user.is-in{opacity:1;transform:none}
.hc-think{display:flex;gap:6px;align-items:center;padding:4px 2px}
.hc-think i{width:6px;height:6px;border-radius:999px;background:var(--signal);animation:hcBlink 1.1s ease-in-out infinite}
.hc-think i:nth-child(2){animation-delay:0.15s}
.hc-think i:nth-child(3){animation-delay:0.3s}
@keyframes hcBlink{0%,100%{opacity:0.25;transform:scale(0.82)}50%{opacity:1;transform:scale(1)}}
.hc-ans{display:flex;flex-direction:column;gap:14px;opacity:0;transition:opacity 260ms var(--ease-out)}
.hc-ans.is-in{opacity:1}
.hc-atext{font-size:15px;line-height:1.6;color:var(--fg-1)}
.hc-atext.is-streaming::after{content:"";display:inline-block;width:6px;height:13px;margin-left:3px;background:var(--signal);vertical-align:-1px;animation:hcCaret 1s steps(1) infinite}
@keyframes hcCaret{0%,49%{opacity:0.9}50%,100%{opacity:0}}
.hc-opts{display:flex;flex-direction:column;gap:8px}
.hc-opt{display:flex;align-items:center;gap:13px;min-height:54px;padding:13px 15px 13px 17px;border:1px solid var(--border-2);border-left:2px solid transparent;border-radius:9px;background:rgba(10,12,17,0.45);opacity:0;transform:translateY(6px);transition:opacity 320ms var(--ease-out),transform 320ms var(--ease-out)}
.hc-opt.is-in{opacity:1;transform:none}
.hc-opt.is-bought{border-color:rgba(252,185,19,0.32);border-left-color:var(--brand-sun);background:rgba(252,185,19,0.075)}
.hc-opt.is-earned{border-color:rgba(63,184,168,0.3);border-left-color:#3FB8A8;background:rgba(63,184,168,0.05)}
.hc-opt.is-neither{opacity:0}
.hc-opt.is-neither.is-in{opacity:0.55}
.hc-rank{font-family:var(--font-mono);font-size:11px;color:var(--fg-4);flex:none;width:10px}
.hc-opt.is-bought .hc-rank{color:var(--brand-sun)}
.hc-opt.is-earned .hc-rank{color:#3FB8A8}
.hc-redact{display:flex;gap:5px;align-items:center;min-width:0}
.hc-redact i{display:block;height:11px;border-radius:2px;background:var(--fg-4);opacity:0.55}
.hc-opt.is-bought .hc-redact i{background:#F7EFD9;opacity:0.95}
.hc-opt.is-earned .hc-redact i{background:#3FB8A8;opacity:0.9}
.hc-tag{margin-left:auto;font-family:var(--font-mono);font-size:9px;line-height:1;letter-spacing:0.12em;text-transform:uppercase;padding:5px 8px;border-radius:3px;font-weight:600;flex:none}
.hc-tag.t-bought{color:#0A0C11;background:var(--brand-sun)}
.hc-tag.t-earned{color:#04201C;background:#3FB8A8}
.hc-legend{display:flex;flex-wrap:wrap;gap:8px 18px;font-family:var(--font-mono);font-size:11px;letter-spacing:0.05em;text-transform:uppercase;color:var(--fg-3)}
.hc-legend span{display:inline-flex;align-items:center;gap:7px}
.hc-legend i{width:7px;height:7px;border-radius:999px;flex:none}
.hc-legend .l-bought i{background:var(--brand-sun)}
.hc-legend .l-earned i{background:#3FB8A8}
.hc-legend .l-neither i{background:var(--fg-4)}
.hc-note{font-size:13px;line-height:1.6;color:var(--fg-3)}
.hc-src{display:flex;align-items:center;gap:11px;padding-top:13px;border-top:1px solid var(--border-2);opacity:0;transition:opacity 300ms var(--ease-out)}
.hc-src.is-in{opacity:1}
.hc-thumbs{display:flex;gap:6px}
.hc-thumbs i{width:28px;height:28px;border-radius:6px;background-size:cover;background-position:center;border:1px solid var(--border-1);display:block}
.hc-thumbs i:nth-child(2){opacity:0.6}
.hc-thumbs i:nth-child(3){opacity:0.35}
.hc-srclb{font-family:var(--font-mono);font-size:10px;letter-spacing:0.06em;color:var(--fg-4)}
.hc-input{display:flex;align-items:center;gap:11px;padding:13px 15px;margin:0 16px 16px;border:1px solid var(--border-strong);border-radius:999px;background:rgba(8,10,15,0.7);min-height:54px}
.hc-clip{width:17px;height:17px;color:var(--fg-4);flex:none}
.hc-txt{flex:1;min-width:0;font-size:15px;line-height:1.4;color:var(--fg-1);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hc-txt.is-empty::before{content:attr(data-ph);color:var(--fg-4)}
.hc-send{width:34px;height:34px;border-radius:999px;border:1px solid var(--border-strong);background:transparent;color:var(--fg-4);display:grid;place-items:center;flex:none;padding:0;cursor:none;transition:background 180ms var(--ease-out),color 180ms var(--ease-out),border-color 180ms var(--ease-out),transform 180ms var(--ease-out)}
.hc-send svg{width:16px;height:16px}
.hc-send.is-live{background:var(--signal);border-color:var(--signal);color:#05131D}
.hc-send.is-pulse{transform:scale(0.86)}
.scene-closer{position:relative;z-index:2;margin-top:18px;font-size:14px;color:var(--fg-3);opacity:0;transition:opacity 400ms var(--ease-out)}
.scene-closer.is-in{opacity:1}
.scene-cap{position:relative;z-index:2;margin-top:14px;font-family:var(--font-mono);font-size:10px;line-height:1.6;letter-spacing:0.04em;color:var(--fg-4);max-width:60ch}
.scene .tb-caption{position:relative;z-index:2;margin-top:8px}
/* ---- shared answer-card bits, used by the query trace ---- */
.tb-caption{font-family:var(--font-mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--fg-3)}
.tr-answer .tb-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.tr-answer .tb-who{font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--signal);display:inline-flex;align-items:center;gap:8px}
.tr-answer .tb-who::before{content:"";width:7px;height:7px;border-radius:999px;background:var(--signal);box-shadow:0 0 10px var(--signal)}
.chip-sponsored{font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.1em;text-transform:uppercase;color:#0A0C11;background:var(--brand-sun);padding:4px 8px;border-radius:var(--radius-xs);font-weight:600}
.tb-cite{margin-top:16px;padding-top:14px;border-top:1px solid var(--border-1);font-family:var(--font-mono);font-size:10.5px;color:var(--fg-3);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tb-cite .sq{width:6px;height:6px;background:var(--brand-sun);flex:none}
/* ============================================================
VISIBILITY CHECK
============================================================ */
.check-wrap{display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);gap:clamp(24px,3vw,44px);align-items:start}
@media (max-width:960px){.check-wrap{grid-template-columns:1fr}}
.check-panel{border:1px solid var(--border-1);background:rgba(15,19,26,0.5);padding:clamp(22px,2.6vw,32px);border-radius:var(--radius-md)}
.check-panel h3{font-family:var(--font-display);font-weight:800;font-size:22px;text-transform:uppercase;letter-spacing:-0.02em}
.check-panel p.hint{color:var(--fg-3);font-size:13.5px;margin-top:8px;line-height:1.6}
.fld{display:flex;flex-direction:column;gap:7px;margin-top:18px}
.fld label{font-family:var(--font-mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--fg-3)}
.fld input,.fld select,.fld textarea{width:100%;padding:13px 14px;background:transparent;border:1px solid var(--border-strong);border-radius:var(--radius-sm);color:var(--fg-1);font-family:var(--font-sans);font-size:15px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--signal)}
.fld select option{background:#10141C;color:#EAF1F8}
.fld .err{font-family:var(--font-mono);font-size:10.5px;color:#E8836F;display:none}
.fld.is-bad input,.fld.is-bad select{border-color:#D64545}
.fld.is-bad .err{display:block}
.submit{margin-top:22px;width:100%;padding:15px 22px;border:1px solid var(--signal);border-radius:var(--radius-sm);background:var(--signal);color:#05131D;font-family:var(--font-sans);font-size:14px;font-weight:600;min-height:48px;cursor:none;transition:background var(--dur-base) var(--ease-out)}
.submit:hover{background:var(--blue-300)}
.submit[disabled]{opacity:0.55}
.scan{border:1px solid var(--border-1);border-radius:var(--radius-md);background:linear-gradient(180deg,#0C1017,#0A0C11);min-height:440px;padding:clamp(18px,2.2vw,26px);position:relative;overflow:hidden;display:flex;flex-direction:column}
.tr-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.tr-tab{font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.06em;text-transform:uppercase;color:var(--fg-3);background:transparent;border:1px solid var(--border-1);border-radius:var(--radius-full);padding:8px 13px;cursor:none;min-height:34px;transition:all 160ms var(--ease-out)}
.tr-tab:hover{border-color:var(--border-strong);color:var(--fg-1)}
.tr-tab.is-on{color:var(--signal);border-color:var(--signal);background:rgba(58,160,210,0.1)}
.scan-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--border-1);font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--fg-3)}
.scan-head .st{display:inline-flex;align-items:center;gap:8px;color:var(--fg-4);text-align:right}
.scan-head .st .dot{width:7px;height:7px;border-radius:999px;background:var(--fg-4);flex:none}
.scan.is-running .scan-head .st{color:var(--signal)}
.scan.is-running .scan-head .st .dot{background:var(--signal);box-shadow:0 0 10px var(--signal);animation:pulse 1.1s ease-in-out infinite}
.scan-idle{padding:40px 0;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.scan-idle .big{font-family:var(--font-display);font-weight:800;font-size:clamp(22px,2.4vw,32px);line-height:1.05;letter-spacing:-0.03em;text-transform:uppercase;color:var(--fg-2);max-width:24ch}
.scan-idle .sm{font-family:var(--font-mono);font-size:11px;color:var(--fg-4);letter-spacing:0.05em;text-transform:uppercase}
.tr-input{display:flex;align-items:baseline;gap:9px;margin:18px 0 0;padding:13px 14px;border:1px solid var(--border-1);border-radius:var(--radius-sm);background:rgba(10,12,17,0.6);font-family:var(--font-mono);font-size:13px;color:var(--fg-1);line-height:1.5;flex-wrap:wrap}
.tr-input .tr-prompt{color:var(--signal);flex:none}
.tr-input .caret{display:inline-block;width:7px;height:14px;background:var(--signal);opacity:0.9;animation:blink 1s steps(1) infinite;flex:none;align-self:center}
@keyframes blink{0%,49%{opacity:0.9}50%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.tr-input .caret{animation:none}}
.tr-log{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:16px}
.tl{display:grid;grid-template-columns:16px minmax(0,1fr);gap:10px;align-items:start;font-family:var(--font-mono);font-size:11px;line-height:1.5;color:var(--fg-4);opacity:0;transform:translateY(6px);transition:opacity 260ms cubic-bezier(.2,.8,.2,1),transform 260ms cubic-bezier(.2,.8,.2,1)}
.tl.is-in{opacity:1;transform:none}
.tl-mark{width:16px;height:16px;display:grid;place-items:center;font-size:10px;color:var(--fg-4)}
.tl.is-done{color:var(--fg-3)}
.tl.is-done .tl-mark{color:var(--verified)}
.tl-spin{width:9px;height:9px;border:1.5px solid var(--border-strong);border-top-color:var(--signal);border-radius:999px;animation:sp 0.7s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}
.tr-answer{margin-top:20px;border:1px solid var(--border-strong);border-radius:var(--radius-md);background:linear-gradient(165deg,rgba(58,160,210,0.07),rgba(15,19,26,0.75));padding:clamp(16px,2vw,22px);opacity:0;transform:translateY(8px);transition:opacity 300ms cubic-bezier(.2,.8,.2,1),transform 300ms cubic-bezier(.2,.8,.2,1)}
.tr-answer.is-on{opacity:1;transform:none}
.tr-answer .ans{font-size:15.5px;line-height:1.7;color:var(--fg-1)}
.tr-answer .ans::after{content:"";display:inline-block;width:6px;height:14px;margin-left:3px;background:var(--signal);vertical-align:-2px;animation:blink 1s steps(1) infinite}
.scan:not(.is-running) .tr-answer .ans::after{display:none}
.rchip{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.03em;color:var(--brand-sun);border:1px solid rgba(252,185,19,0.45);background:rgba(252,185,19,0.09);padding:2px 8px;border-radius:var(--radius-xs);opacity:0;transform:scale(0.92);transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out)}
.rchip.is-in{opacity:1;transform:none}
.tr-verdict{display:none;margin-top:16px;padding:14px 16px;border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:11.5px;line-height:1.6;letter-spacing:0.03em;align-items:baseline;gap:10px;flex-wrap:wrap}
.tr-verdict.is-on{display:flex}
.tr-verdict.is-out{color:#F0A08E;border:1px solid rgba(214,69,69,0.45);background:rgba(214,69,69,0.08)}
.tr-verdict .dot{width:7px;height:7px;border-radius:999px;background:#D64545;flex:none;align-self:center}
.tr-verdict .vsub{color:var(--fg-3)}
.res-cta{display:none;flex-wrap:wrap;gap:12px;align-items:center;margin-top:auto;padding-top:20px}
.res-cta.is-on{display:flex}
/* ============================================================
PROOF BAR
============================================================ */
.proof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--border-1);border-bottom:1px solid var(--border-1)}
@media (max-width:900px){.proof{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.proof{grid-template-columns:1fr}}
.pf{padding:clamp(26px,3vw,40px) clamp(18px,2vw,28px);border-right:1px solid var(--border-1);display:flex;flex-direction:column;gap:12px}
.pf:last-child{border-right:0}
@media (max-width:900px){.pf:nth-child(2){border-right:0}.pf:nth-child(1),.pf:nth-child(2){border-bottom:1px solid var(--border-1)}}
@media (max-width:480px){.pf{border-right:0;border-bottom:1px solid var(--border-1)}.pf:last-child{border-bottom:0}}
.pf .fig{font-family:var(--font-display);font-weight:800;font-size:clamp(44px,5vw,72px);line-height:0.9;letter-spacing:-0.05em;font-variant-numeric:tabular-nums;white-space:nowrap}
.pf .fig .unit{color:var(--signal)}
.pf .cap{font-size:14px;line-height:1.5;color:var(--fg-2);max-width:26ch}
.pf .src{font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--fg-4);margin-top:auto;padding-top:18px}
/* ============================================================
PLATFORM GRID
============================================================ */
.plat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--border-1);border:1px solid var(--border-1)}
@media (max-width:980px){.plat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.plat-grid{grid-template-columns:1fr}}
.plat{background:#0B0E14;padding:clamp(22px,2.5vw,32px);display:flex;flex-direction:column;gap:16px;transition:transform 160ms var(--ease-out),background 160ms var(--ease-out),box-shadow 160ms var(--ease-out)}
.plat:hover{transform:translateY(-2px);background:#0D1219;box-shadow:inset 0 0 0 1px var(--signal)}
.plat.is-noads:hover{box-shadow:inset 0 0 0 1px var(--brand-sun)}
.plat-top{display:flex;align-items:center;justify-content:space-between;gap:14px}
.glyph{display:flex;align-items:center;gap:11px;min-width:0}
.glyph svg{width:26px;height:26px;flex:none}
.glyph .wm{font-family:var(--font-display);font-weight:800;font-size:17px;letter-spacing:-0.02em;white-space:nowrap}
.status{font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.1em;text-transform:uppercase;padding:5px 9px;border-radius:var(--radius-xs);border:1px solid;white-space:nowrap}
.status.live{color:var(--signal);border-color:rgba(58,160,210,0.5);background:rgba(58,160,210,0.08)}
.status.soon{color:var(--fg-3);border-color:var(--border-strong)}
.status.noads{color:var(--brand-sun);border-color:rgba(252,185,19,0.5);background:rgba(252,185,19,0.07)}
.plat p{font-size:14.5px;line-height:1.62;color:var(--fg-2);max-width:44ch}
.plat .how{font-family:var(--font-mono);font-size:10.5px;color:var(--fg-4);letter-spacing:0.04em;text-transform:uppercase;margin-top:auto;padding-top:16px;border-top:1px solid var(--border-2)}
.plat.is-noads{background:#0C1016}
.plat.is-noads .wm{color:var(--brand-sun)}
.plat.is-noads p{color:var(--fg-1)}
/* ============================================================
HOW IT WORKS
============================================================ */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--border-1);border-top:1px solid var(--border-1);border-bottom:1px solid var(--border-1)}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.step{background:var(--bg);padding:clamp(24px,2.6vw,34px) clamp(18px,2vw,26px);display:flex;flex-direction:column;gap:14px}
.step .idx{font-family:var(--font-mono);font-size:10.5px;letter-spacing:var(--tracking-caps);color:var(--brand-sun)}
.step h3{font-family:var(--font-display);font-weight:800;font-size:24px;text-transform:uppercase;letter-spacing:-0.025em}
.step p{font-size:14.5px;line-height:1.6;color:var(--fg-2)}
.step ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:2px}
.step li{font-family:var(--font-mono);font-size:10.5px;color:var(--fg-3);letter-spacing:0.03em;display:flex;gap:9px;line-height:1.5}
.step li::before{content:"";width:5px;height:5px;background:var(--signal);flex:none;margin-top:5px}
/* ============================================================
CHARTS
============================================================ */
.charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--border-1);border:1px solid var(--border-1)}
@media (max-width:980px){.charts{grid-template-columns:1fr}}
.chart{background:#0B0E14;padding:clamp(20px,2.3vw,28px);display:flex;flex-direction:column;gap:14px}
.chart-head .t{font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:-0.015em}
.chart-head .s{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:0.09em;color:var(--fg-4);margin-top:7px}
.chart svg{width:100%;height:auto;display:block}
.chart text{font-family:"JetBrains Mono",monospace}
.chart .draw{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);transition:stroke-dashoffset 1400ms cubic-bezier(.2,.8,.2,1)}
.chart.is-in .draw{stroke-dashoffset:0}
.chart .bar{transform:scaleY(0);transform-origin:bottom;transform-box:fill-box;transition:transform 900ms cubic-bezier(.2,.8,.2,1)}
.chart.is-in .bar{transform:scaleY(1)}
.chart .bar:nth-of-type(2){transition-delay:80ms}
.chart .bar:nth-of-type(3){transition-delay:160ms}
.chart .bar:nth-of-type(4){transition-delay:240ms}
.chart .bar:nth-of-type(5){transition-delay:320ms}
@media (prefers-reduced-motion:reduce){.chart .draw{stroke-dashoffset:0}.chart .bar{transform:none}}
.chart .foot{font-family:var(--font-mono);font-size:9.5px;color:var(--fg-4);letter-spacing:0.05em;text-transform:uppercase;margin-top:auto;padding-top:14px;border-top:1px solid var(--border-2);line-height:1.6}
/* ============================================================
PRICING
============================================================ */
.price-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:stretch}
@media (max-width:1280px){.price-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.price-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.price-grid{grid-template-columns:1fr}}
.tier{display:flex;flex-direction:column;border:1px solid var(--border-1);border-radius:var(--radius-md);padding:24px 20px;background:#0B0E14;transition:transform 160ms var(--ease-out),border-color 160ms var(--ease-out);position:relative}
.tier:hover{transform:translateY(-2px);border-color:var(--signal)}
.tier .nm{font-family:var(--font-display);font-weight:800;font-size:16px;text-transform:uppercase;letter-spacing:-0.01em;line-height:1.15;min-height:2.3em}
.tier .amt{font-family:var(--font-display);font-weight:800;font-size:clamp(30px,3vw,40px);letter-spacing:-0.045em;font-variant-numeric:tabular-nums;margin-top:14px;line-height:1}
.tier .per{font-family:var(--font-mono);font-size:10.5px;color:var(--fg-3);text-transform:uppercase;letter-spacing:0.08em;margin-top:8px}
.tier p{font-size:13.5px;line-height:1.6;color:var(--fg-2);margin-top:16px}
.tier ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:16px}
.tier li{font-size:13px;line-height:1.5;color:var(--fg-2);display:flex;gap:9px}
.tier li::before{content:"";width:5px;height:5px;background:var(--signal);flex:none;margin-top:6px}
.tier .tier-cta{margin-top:auto;padding-top:20px}
.tier .tier-cta a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:12px 14px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);color:var(--fg-1);font-size:13px;font-weight:600;text-decoration:none;transition:all 160ms var(--ease-out)}
.tier .tier-cta a:hover{border-color:var(--signal);color:var(--signal)}
.tier.is-rec{border-color:var(--signal);background:linear-gradient(180deg,rgba(58,160,210,0.08),#0B0E14 55%);box-shadow:0 0 40px rgba(58,160,210,0.1)}
@media (min-width:1281px){.tier.is-rec{transform:translateY(-14px)}.tier.is-rec:hover{transform:translateY(-17px)}}
.tier .rec-badge{position:absolute;top:-1px;left:-1px;right:-1px;text-align:center;font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.14em;text-transform:uppercase;background:var(--signal);color:#05131D;padding:6px;border-radius:var(--radius-md) var(--radius-md) 0 0;font-weight:600}
.tier.is-rec{padding-top:40px}
.tier.is-rec .tier-cta a{background:var(--signal);border-color:var(--signal);color:#05131D}
.tier.is-rec .tier-cta a:hover{background:var(--blue-300);color:#05131D}
.price-notes{margin-top:26px;display:flex;flex-direction:column;gap:8px}
/* ============================================================
FAQ
============================================================ */
.faq{border-top:1px solid var(--border-1)}
.faq details{border-bottom:1px solid var(--border-1)}
.faq summary{list-style:none;cursor:none;padding:24px 40px 24px 0;position:relative;font-family:var(--font-display);font-weight:700;font-size:clamp(17px,1.7vw,21px);letter-spacing:-0.015em;color:var(--fg-1);transition:color 160ms var(--ease-out)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--signal)}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;margin-top:-6px;border-right:1.5px solid var(--fg-3);border-bottom:1.5px solid var(--fg-3);transform:rotate(45deg);transition:transform 200ms var(--ease-out)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .a{padding:0 clamp(0px,6vw,80px) 26px 0;font-size:16px;line-height:1.7;color:var(--fg-2);max-width:68ch}
.faq .a strong{color:var(--fg-1);font-weight:600}
.faq .a p+p{margin-top:12px}
/* ============================================================
FORM, 3 steps
============================================================ */
.lf-shell{display:grid;grid-template-columns:minmax(0,0.78fr) minmax(0,1.22fr);gap:clamp(24px,4vw,56px);align-items:start}
@media (max-width:960px){.lf-shell{grid-template-columns:1fr}}
.lf-card{position:relative;border:1px solid var(--border-1);border-radius:var(--radius-lg);background:linear-gradient(165deg,rgba(58,160,210,0.06),rgba(15,19,26,0.62));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:clamp(22px,3vw,34px);box-shadow:0 0 50px rgba(58,160,210,0.07)}
.lf-grid{display:grid;grid-template-columns:132px minmax(0,1fr);gap:clamp(18px,2.4vw,32px)}
@media (max-width:620px){.lf-grid{grid-template-columns:1fr;gap:22px}}
.lf-rail{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:26px;padding-left:4px}
.lf-rail::before{content:"";position:absolute;left:10px;top:11px;bottom:11px;width:1px;background:var(--border-1)}
.rail-fill{position:absolute;left:10px;top:11px;width:1px;background:var(--signal);height:0;transition:height 300ms cubic-bezier(.2,.8,.2,1);box-shadow:0 0 8px var(--signal)}
@media (max-width:620px){.lf-rail{flex-direction:row;justify-content:flex-start;gap:20px;padding-left:0}.lf-rail::before{left:6px;right:6px;top:10px;bottom:auto;width:auto;height:1px}.rail-fill{left:6px;top:10px;width:0;height:1px;transition:width 300ms cubic-bezier(.2,.8,.2,1)}}
.rail-step{position:relative;display:flex;align-items:center;gap:12px;z-index:2}
.rail-dot{width:21px;height:21px;border-radius:999px;border:1px solid var(--border-strong);background:#0A0C11;display:grid;place-items:center;font-size:10px;color:var(--signal);flex:none;transition:border-color 200ms var(--ease-out)}
.rail-step.is-on .rail-dot{border-color:var(--signal);box-shadow:0 0 0 4px rgba(58,160,210,0.12)}
.rail-step.is-done .rail-dot{border-color:var(--signal)}
.rail-step .rail-lb{font-family:var(--font-mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--fg-4);line-height:1.3}
.rail-step.is-on .rail-lb{color:var(--signal)}
.rail-step.is-done .rail-lb{color:var(--fg-3)}
@media (max-width:620px){.rail-step .rail-lb{display:none}}
.lf-steps{position:relative;min-height:290px}
.lf-step{display:none;opacity:1;transform:none;transition:opacity 260ms cubic-bezier(.2,.8,.2,1),transform 260ms cubic-bezier(.2,.8,.2,1)}
.lf-step.is-on{display:block}
.lf-step.is-in-right{opacity:0;transform:translateX(12px)}
.lf-step.is-in-left{opacity:0;transform:translateX(-12px)}
.lf-step.is-out-left{opacity:0;transform:translateX(-12px);position:absolute;inset:0}
.lf-step.is-out-right{opacity:0;transform:translateX(12px);position:absolute;inset:0}
.lf-step h4{font-family:var(--font-display);font-weight:800;font-size:22px;text-transform:uppercase;letter-spacing:-0.02em;line-height:1.1}
.lf-step .sub{color:var(--fg-3);font-size:13.5px;margin-top:8px;line-height:1.6;max-width:52ch}
.frow{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:18px}
.fld .help{font-family:var(--font-mono);font-size:10.5px;color:var(--fg-4);line-height:1.5}
.fld .err{font-family:var(--font-mono);font-size:10.5px;color:#F0A08E;display:none;line-height:1.5}
.fld.is-bad .err{display:block}
.fld.is-bad .help{display:none}
.fld.is-bad input,.fld.is-bad select,.fld.is-bad textarea{border-color:#D64545}
.fld.is-ok input,.fld.is-ok select,.fld.is-ok textarea{border-left:2px solid var(--verified)}
.fld textarea{min-height:96px;resize:vertical;line-height:1.6}
.url-wrap{display:flex;align-items:stretch;border:1px solid var(--border-strong);border-radius:var(--radius-sm);overflow:hidden}
.url-wrap:focus-within{border-color:var(--signal)}
.url-wrap .pfx{font-family:var(--font-mono);font-size:12.5px;color:var(--fg-4);display:flex;align-items:center;padding:0 2px 0 13px;flex:none}
.url-wrap input{border:0 !important;padding-left:4px}
.fld.is-ok .url-wrap{border-left:2px solid var(--verified)}
.fld.is-bad .url-wrap{border-color:#D64545}
.qchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.qchip{font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.03em;color:var(--fg-3);border:1px dashed var(--border-strong);background:transparent;border-radius:var(--radius-full);padding:8px 12px;cursor:none;min-height:34px;text-align:left;transition:all 160ms var(--ease-out)}
.qchip:hover{color:var(--signal);border-color:var(--signal)}
.seg-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:0;border:1px solid var(--border-strong);border-radius:var(--radius-sm);overflow:hidden;margin-top:4px}
.seg-opt{position:relative;display:flex}
.seg-opt input{position:absolute;inset:0;opacity:0;margin:0}
.seg-opt span{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;min-height:48px;padding:10px 8px;font-family:var(--font-mono);font-size:11px;letter-spacing:0.03em;color:var(--fg-3);border-right:1px solid var(--border-1);transition:all 160ms var(--ease-out)}
.seg-opt:last-child span{border-right:0}
.seg-opt input:checked+span{color:var(--signal);background:rgba(58,160,210,0.12)}
.seg-opt input:focus-visible+span{box-shadow:var(--ring-focus)}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:16px}
.opt{position:relative}
.opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0}
.opt span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:52px;padding:12px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);font-size:13.5px;font-weight:500;color:var(--fg-2);transition:all 160ms var(--ease-out)}
.opt input:checked+span{border-color:var(--signal);color:var(--signal);background:rgba(58,160,210,0.08)}
.lf-nav{display:flex;gap:12px;align-items:center;margin-top:26px;flex-wrap:wrap}
.lf-nav button{min-height:46px;padding:13px 22px;border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:14px;font-weight:600;cursor:none;border:1px solid var(--border-strong);background:transparent;color:var(--fg-1);transition:all 160ms var(--ease-out)}
.lf-nav button.pri{background:var(--signal);border-color:var(--signal);color:#05131D}
.lf-nav button.pri:hover{background:var(--blue-300)}
.lf-nav button.pri[disabled]{background:transparent;color:var(--fg-4);border-color:var(--border-1)}
.lf-reason{font-family:var(--font-mono);font-size:10.5px;color:var(--fg-4);line-height:1.5;flex:1 1 180px;min-width:140px}
.lf-shell.is-sent .lf-card{display:none}
.lf-done{display:none;border:1px solid rgba(58,160,210,0.4);border-radius:var(--radius-lg);background:linear-gradient(165deg,rgba(58,160,210,0.08),rgba(15,19,26,0.65));padding:clamp(22px,3vw,34px)}
.lf-done.is-on{display:block}
.lf-done .ok{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--verified);border:1px solid rgba(0,165,81,0.4);background:rgba(0,165,81,0.08);padding:8px 13px;border-radius:var(--radius-full)}
.lf-done h4{font-family:var(--font-display);font-weight:800;font-size:clamp(24px,2.6vw,34px);text-transform:uppercase;letter-spacing:-0.03em;margin:18px 0 6px;line-height:1.05}
.lf-done .lf-sum{font-family:var(--font-mono);font-size:11px;color:var(--signal);letter-spacing:0.05em;margin-bottom:20px}
.lf-done .blocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--border-1);border:1px solid var(--border-1);border-radius:var(--radius-sm);overflow:hidden}
.lf-done .blk{background:rgba(10,12,17,0.6);padding:18px}
.lf-done .blk .bl{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:0.1em;color:var(--fg-4)}
.lf-done .blk p{font-size:14.5px;line-height:1.6;color:var(--fg-1);margin-top:10px}
.lf-done .land{margin-top:20px;font-size:16px;color:var(--fg-1);font-weight:500}
.trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.trust span,.trust a{font-family:var(--font-mono);font-size:10px;letter-spacing:0.06em;text-transform:uppercase;color:var(--fg-3);border:1px solid var(--border-1);padding:7px 11px;border-radius:999px;text-decoration:none}
.trust a{display:inline-flex;align-items:center;gap:7px;transition:color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
.trust a:hover{color:var(--signal);border-color:var(--signal);text-decoration:none}
.trust a b{color:var(--signal);font-weight:600}
/* ============================================================
CUSTOMER PROOF
============================================================ */
.res-half{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--fg-3);margin:0 0 16px;font-weight:500;padding-bottom:14px;border-bottom:1px solid var(--border-1)}
.res-half+.res-half,.case+.res-half{margin-top:48px}
.case{position:relative;border:1px solid var(--border-1);border-radius:var(--radius-md);background:#0B0E14;padding:clamp(22px,2.6vw,34px);display:flex;flex-direction:column;gap:18px}
.case.is-featured{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr);gap:clamp(24px,3vw,44px);align-items:center}
@media (max-width:900px){.case.is-featured{grid-template-columns:1fr}}
.case-body{display:flex;flex-direction:column;gap:18px;min-width:0}
.case .cmeta{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--fg-4);line-height:1.6}
.case .cbrand{font-family:var(--font-display);font-weight:800;font-size:clamp(26px,3vw,40px);line-height:1;letter-spacing:-0.035em;text-transform:uppercase;max-width:22ch}
.case .cmetrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
@media (max-width:620px){.case .cmetrics{grid-template-columns:1fr;gap:18px}}
.case .cval{font-family:var(--font-display);font-weight:800;font-size:48px;line-height:1;letter-spacing:-0.045em;font-variant-numeric:tabular-nums;color:var(--signal)}
.case .clabel{font-size:14px;line-height:1.45;color:var(--fg-1);margin-top:10px;max-width:22ch}
.case .cwin{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:0.1em;color:var(--fg-4);margin-top:6px}
.case .ctext{font-size:15.5px;line-height:1.65;color:var(--fg-2);max-width:62ch}
.case .cfoot{padding-top:16px;border-top:1px solid var(--border-2);font-family:var(--font-mono);font-size:10.5px;line-height:1.7;color:var(--fg-4);letter-spacing:0.02em;max-width:70ch}
.case-shot{border:1px solid var(--border-1);border-radius:var(--radius-sm);overflow:hidden;background:#0A0C11}
.case-shot img{width:100%;height:auto;display:block}
.case.is-live{border-color:rgba(58,160,210,0.35);background:linear-gradient(165deg,rgba(58,160,210,0.06),#0B0E14 60%)}
.case.is-live .clive{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--signal);border:1px solid rgba(58,160,210,0.5);background:rgba(58,160,210,0.08);padding:5px 10px;border-radius:var(--radius-xs);align-self:flex-start}
.case.is-live .clive .dot{width:6px;height:6px;border-radius:999px;background:var(--signal);box-shadow:0 0 8px var(--signal);animation:pulse 2s ease-in-out infinite}
/* ============================================================
TEAM
============================================================ */
.team-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);border-top:1px solid var(--border-1);padding-top:clamp(28px,3vw,40px)}
.person{display:flex;flex-direction:column;gap:14px;min-width:0}
/* one circle for all five: same size, same baseline, same gap */
.pshot{width:96px;height:96px;border-radius:50%;display:block;flex:none;position:relative}
.pshot img{width:100%;height:100%;display:block;border-radius:50%}
/* plain photographs: crop to the face, inset 3px so the added ring's OUTER
edge lands on 96px, matching the baked-in rings exactly */
.pshot.is-photo img{width:calc(100% - 6px);height:calc(100% - 6px);margin:3px;object-fit:cover;object-position:50% 28%;box-shadow:0 0 0 3px #A8D4F0;background:#10141C}
/* baked-in ring artwork: the blue disc is 0.895 of the source box, so scale by
1/0.895 to sit the ring flush with the 96px edge. No CSS ring, no background,
so the transparent PNG shows the page behind it. */
.pshot.is-art img{object-fit:contain;background:none;border-radius:0;transform:scale(1.117)}
.person .pname{font-family:var(--font-display);font-weight:600;font-size:15px;letter-spacing:-0.01em;color:var(--fg-1);line-height:1.25}
.person .prole{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:0.09em;color:var(--fg-3);margin-top:-8px;line-height:1.4}
@media (max-width:1024px){.team-row{gap:12px}.pshot{width:80px;height:80px}.person .pname{font-size:15px}}
/* two rows, three then two, centred: flex wrap does this without nth-child hacks */
@media (max-width:768px){.team-row{display:flex;flex-wrap:wrap;justify-content:center;gap:28px 20px}.person{flex:0 0 calc(33.333% - 14px);align-items:center;text-align:center}}
@media (max-width:360px){.person{flex:0 0 calc(50% - 10px)}}
/* ---- credential badges: two groups, one earned, one built on ---- */
.credrow{display:flex;align-items:flex-start;gap:clamp(18px,2.4vw,32px);margin-top:clamp(28px,3vw,40px);padding-top:clamp(20px,2.4vw,28px);border-top:1px solid var(--border-2)}
.credgroup{min-width:0}
.credgroup:first-child{flex:1 1 auto}
.credlabel{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:0.14em;color:var(--fg-4);margin-bottom:12px}
.credtiles{display:flex;flex-wrap:wrap;gap:10px}
.creddiv{width:1px;align-self:stretch;background:var(--border-strong);flex:none}
.cred{display:flex;align-items:center;gap:14px;padding:18px;border:1px solid var(--border-1);border-radius:12px;background:var(--surface);transition:transform 200ms var(--ease-out),border-color 200ms var(--ease-out),background 200ms var(--ease-out)}
.cred:hover{transform:translateY(-2px);border-color:var(--border-strong);background:var(--surface-raised)}
.cred-tile{width:40px;height:40px;flex:none;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:var(--surface-raised);border:1px solid var(--border-2)}
.cred-tile--pair{width:68px;gap:8px}
.cred-hair{width:1px;align-self:stretch;margin:7px 0;background:var(--border-2);flex:none}
.cred-mark{display:block;flex:none}
.cred:hover .cred-tile{background:var(--surface-sunken);border-color:var(--border-strong)}
.cred-txt{display:flex;flex-direction:column;gap:6px;min-width:0}
.cred-nm{font-size:14px;font-weight:600;line-height:1.35;color:var(--fg-1);letter-spacing:-0.005em}
.cred-src{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:0.1em;color:var(--fg-4)}
/* desktop: genuinely one row. Tiles share their group's width and long names
wrap inside the tile rather than pushing a tile onto a second line. */
@media (min-width:1260px){.credtiles{flex-wrap:nowrap}.cred{flex:1 1 0;min-width:210px}.credgroup:first-child{min-width:650px}.credgroup:last-child{flex:0 0 auto}}
@media (prefers-reduced-motion:reduce){.cred,.cred-tile{transition:none}.cred:hover{transform:none}}
@media (max-width:1259px){.credrow{flex-direction:column;gap:26px}.creddiv{width:100%;height:1px;align-self:auto}}
@media (max-width:768px){.cred{flex:1 1 calc(50% - 5px)}}
@media (max-width:360px){.cred{flex:1 1 100%}}
/* ============================================================
THE SHIFT, one SVG, scroll-scrubbed
============================================================ */
.shift{position:relative;border:1px solid var(--border-1);border-radius:var(--radius-md);background:linear-gradient(180deg,#0B0E14,#0A0C11);padding:clamp(14px,2vw,26px);overflow:hidden}
.shift::before{content:"";position:absolute;left:62%;top:50%;width:min(620px,70%);height:300px;transform:translate(-50%,-50%);background:radial-gradient(ellipse,rgba(58,160,210,0.12),transparent 70%);pointer-events:none}
.shift svg{position:relative;width:100%;height:auto;display:block}
.shift text{font-family:"JetBrains Mono",monospace}
.shift .sh-brand{font-family:"Satoshi",sans-serif;font-weight:800}
.shift-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--border-1);border:1px solid var(--border-1);margin-top:12px}
@media (max-width:720px){.shift-figs{grid-template-columns:1fr}}
.shift-fig{background:#0B0E14;padding:clamp(20px,2.4vw,28px)}
.sf-head{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--fg-3);margin-bottom:20px}
.sf-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,24px)}
.sf-n{font-family:var(--font-display);font-weight:800;font-size:32px;line-height:1;letter-spacing:-0.035em;font-variant-numeric:tabular-nums;color:var(--fg-1)}
.sf-item.is-hot .sf-n{color:var(--signal)}
.sf-l{font-family:var(--font-mono);font-size:12px;line-height:1.5;letter-spacing:0.05em;color:var(--fg-4);margin-top:10px}
.shift-cap{margin-top:20px;font-size:17px;line-height:1.6;color:var(--fg-2);max-width:68ch}
/* ============================================================
PRICING LEAD + ENTERPRISE LINE
============================================================ */
.price-lead{margin:-16px 0 26px}
.price-lead .note{font-size:13px;color:var(--fg-2);max-width:72ch}
/* ============================================================
MOBILE PASS
============================================================ */
@media (max-width:400px){
.scene .hc{border-radius:14px}
.hero h1{font-size:clamp(34px,10.5vw,44px);letter-spacing:-0.025em}
.hero .hero-sub{font-size:16px}
.hc-body{min-height:210px}
.lf-card,.lf-done{padding:18px 16px}
.check-panel,.scan{padding:18px 16px}
.case{padding:20px 16px}
.tier{padding:20px 16px}
.tier.is-rec{padding-top:38px}
.shift{padding:12px 10px}
}
@media (max-width:560px){
.price-grid{grid-template-columns:1fr}
.sec-head h2{font-size:clamp(26px,8vw,34px)}
}
/* sticky conversion rails */
.slim{position:fixed;top:0;left:0;right:0;z-index:99;transform:translateY(-100%);transition:transform 320ms cubic-bezier(.2,.8,.2,1);background:rgba(8,10,15,0.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-1)}
.slim.is-on{transform:none}
.slim-inner{display:flex;align-items:center;gap:16px;padding:11px 0}
.slim .txt{flex:1}
.slim-mark{flex:none;display:flex;align-items:center}
.slim-mark img{width:22px;height:22px;object-fit:contain;display:block}
.slim .txt{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:0.1em;color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slim .txt b{color:var(--fg-1);font-weight:500}
.slim .acts{display:flex;gap:10px;flex:none}
.slim a{display:inline-flex;align-items:center;min-height:36px;padding:8px 15px;border-radius:var(--radius-sm);font-size:12.5px;font-weight:600;text-decoration:none;border:1px solid var(--border-strong);color:var(--fg-1)}
.slim a.pri{background:var(--signal);border-color:var(--signal);color:#05131D}
@media (max-width:1080px){.slim{display:none}}
.om-sticky{display:none;position:fixed;left:0;right:0;bottom:0;z-index:97;grid-template-columns:1fr 1fr;border-top:1px solid var(--border-strong);background:rgba(10,12,17,0.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transform:translateY(100%);transition:transform 320ms cubic-bezier(.2,.8,.2,1)}
.om-sticky.is-on{transform:none}
.om-sticky a{display:flex;align-items:center;justify-content:center;gap:8px;padding:15px 10px;font-size:14px;font-weight:600;text-decoration:none;min-height:44px}
.om-sticky .call{background:var(--signal);color:#05131D}
.om-sticky .wa{color:var(--fg-1)}
@media (max-width:768px){.om-sticky{display:grid}body{padding-bottom:56px}}
/* NAV TOOLS, language + theme */
.nav-tools { display: flex; align-items: center; gap: 10px; flex: none; }
@media (max-width: 1000px) { .nav-inner { gap: 20px; } .nav-cta { display: none; } }
.lang-switch { display: flex; flex: none; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.lang-switch button { background: transparent; border: 0; border-right: 1px solid var(--border-strong); color: var(--fg-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-caps); padding: 9px 12px; cursor: pointer; transition: color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.lang-switch button:last-child { border-right: 0; }
.lang-switch button:hover { color: var(--fg-1); }
.lang-switch button.is-on { background: rgba(58,160,210,0.12); color: var(--signal); }
.theme-toggle { width: 36px; height: 36px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: transparent; color: var(--fg-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); flex: none; }
.theme-toggle:hover { border-color: var(--signal); color: var(--signal); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .ico-moon { display: none; }
[data-theme="light"] .theme-toggle .ico-sun { display: none; }
[data-theme="light"] .theme-toggle .ico-moon { display: block; }
@media (max-width: 640px) { .lang-switch button { padding: 9px 9px; }
}
/* ==== site-footer.css ==== */
/* ============================================================
OUNTERNET — Shared final CTA + footer styles
SOURCE OF TRUTH. Copied verbatim from Homepage v3.html.
Every page links this file; do not restyle the footer per page.
============================================================ */
/* ---------------- FINAL CTA ---------------- */
.finalcta {
padding: clamp(100px, 14vw, 200px) 0;
text-align: center;
position: relative;
overflow: hidden;
border-top: 1px solid var(--border-1);
}
.finalcta h2 {
font-family: var(--font-display); font-weight: 800;
font-size: clamp(56px, 10vw, 168px); line-height: 0.9; letter-spacing: -0.045em;
text-transform: uppercase;
max-width: 18ch; margin: 0 auto 32px;
}
.finalcta h2 .signal { color: var(--signal); }
.finalcta p { max-width: 52ch; margin: 0 auto 48px; color: var(--fg-2); font-size: 17px; line-height: 1.6; }
.finalcta .ctas { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.finalcta .slots { margin-top: 28px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); letter-spacing: 0.06em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; }
.finalcta .slots .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-sun); box-shadow: 0 0 10px var(--brand-sun); }
/* ---------------- FOOTER ---------------- */
.footer {
position: relative;
padding: 80px 0 40px;
background: #05070B;
border-top: 1px solid var(--border-1);
overflow: hidden;
}
.footer::before {
content: "";
position: absolute; inset: 0;
background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1px, transparent 0);
background-size: 24px 24px;
opacity: 0.5;
pointer-events: none;
}
.footer-top {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 48px;
margin-bottom: 80px;
position: relative;
z-index: 2;
}
@media (max-width: 860px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-top { grid-template-columns: 1fr; } }
.footer-col h4 { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); text-transform: uppercase; letter-spacing: var(--tracking-caps); margin-bottom: 20px; font-weight: 500; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; }
.footer-col li { list-style: none; }
.footer-col a { color: var(--fg-1); text-decoration: none; font-size: 14px; transition: color var(--dur-base) var(--ease-out); display: inline-flex; align-items: center; gap: 8px; }
.footer-col a:hover { color: var(--signal); }
.footer-col li .meta { font-family: var(--font-mono); font-size: 10px; color: var(--fg-4); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.footer-col a .out { width: 11px; height: 11px; flex: none; opacity: 0.55; }
.footer-col a:hover .out { opacity: 1; }
.footer-main .live {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-mono); font-size: 11px; color: var(--fg-3);
text-transform: uppercase; letter-spacing: var(--tracking-caps);
padding: 8px 14px; border: 1px solid var(--border-1); border-radius: var(--radius-full);
margin-bottom: 24px;
}
.footer-main .live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 10px var(--signal); animation: pulse 2s ease-in-out infinite; }
.footer-main h3 { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; max-width: 18ch; margin-bottom: 16px; }
.footer-main p { color: var(--fg-2); font-size: 14px; line-height: 1.6; max-width: 34ch; margin-bottom: 24px; }
.subscribe {
display: flex;
gap: 8px;
max-width: 400px;
padding: 6px;
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
background: rgba(10,12,17,0.6);
transition: border-color var(--dur-base) var(--ease-out);
}
.subscribe:focus-within { border-color: var(--signal); box-shadow: var(--ring-focus); }
.subscribe input {
flex: 1;
background: transparent;
border: 0;
outline: 0;
color: var(--fg-1);
font-family: var(--font-sans);
font-size: 14px;
padding: 10px 12px;
}
.subscribe input::placeholder { color: var(--fg-4); }
.subscribe button {
background: var(--signal);
color: #05131D;
border: 0;
padding: 10px 20px;
border-radius: var(--radius-sm);
font-family: var(--font-sans);
font-weight: 500;
font-size: 13px;
cursor: none;
transition: background var(--dur-base) var(--ease-out);
}
.subscribe button:hover { background: var(--blue-300); }
.footer-wordmark {
font-family: var(--font-display); font-weight: 900;
font-size: clamp(48px, 10vw, 140px);
line-height: 0.85;
letter-spacing: -0.05em;
text-align: center;
white-space: nowrap;
color: transparent;
-webkit-text-stroke: 1px var(--fg-3);
text-transform: uppercase;
user-select: none;
padding: 40px 0 0.14em;
position: relative;
z-index: 2;
overflow-x: clip;
overflow-y: visible;
}
.footer-wordmark .dot-accent { color: var(--signal); -webkit-text-stroke: 0; }
.footer-bottom {
display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
padding: 32px 0 0;
margin-top: 40px;
border-top: 1px solid var(--border-1);
font-family: var(--font-mono); font-size: 10px; color: var(--fg-4); text-transform: uppercase; letter-spacing: var(--tracking-caps);
position: relative; z-index: 2;
}
.footer-bottom .legal { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-bottom a { color: var(--fg-4); text-decoration: none; transition: color var(--dur-base) var(--ease-out); }
.footer-bottom a:hover { color: var(--signal); }
[data-theme="light"] .footer { background: var(--ink-100); }
[data-theme="light"] .footer::before { background-image: radial-gradient(circle at 1px 1px, rgba(10,12,17,0.10) 1px, transparent 0); }
/* ---------------- HEADER NAV: seven items ---------------- */
/* One authoritative breakpoint for the whole site: the seven-item row
shows above 1080px, the burger menu owns everything below it. */
@media (max-width: 1080px) {
.nav-links { display: none !important; }
.nav .nav-cta { display: none !important; }
.nav-burger { display: inline-flex !important; }
}
.nav-links { gap: 22px; }
@media (max-width: 1320px) { .nav-links { gap: 18px; } .nav-links a { font-size: 13.5px; } }
@media (max-width: 1180px) { .nav-links { gap: 14px; } .nav-links a { font-size: 13px; } .nav-cta { padding: 10px 13px; font-size: 12.5px; } }
.nav-links a { white-space: nowrap; }
.nav-links a .out { width: 10px; height: 10px; opacity: 0.5; flex: none; }
.nav-links a:hover .out { opacity: 1; }
.om-footer .place{color:var(--fg-2)}
.om-footer .legal span{color:var(--fg-3)}
/* v2 footer: service pages indented under Services */
.footer-col li.ft-sub a{padding-left:14px;font-size:.94em}
/* legal row (v2 footer) */
.footer-bottom .ft-co{margin:0;max-width:72ch;line-height:1.55}
.footer-bottom .legal a{color:inherit;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.footer-bottom .legal a:hover,.footer-bottom .legal a[aria-current="page"]{color:var(--fg-1);text-decoration:underline;text-underline-offset:3px}
.footer-bottom .legal a:focus-visible{outline:2px solid var(--ck-sig,#3AA0D2);outline-offset:2px}
.lg-miss{padding:1px 6px;border-radius:4px;background:color-mix(in srgb,#F5A524 22%,transparent);border:1px solid #F5A524;color:var(--fg-1);font:600 .82em var(--font-mono,monospace)}
/* ==== inline style #om-navlight ==== */
[data-theme="light"] .nav{background:color-mix(in srgb, var(--surface) 92%, transparent);border-bottom:1px solid var(--border-1)}
[data-theme="light"] .nav.is-scrolled{background:color-mix(in srgb, var(--surface) 92%, transparent);border-bottom-color:var(--border-1)}
/* ==== inline style #om-signal-contrast ==== */
[data-theme="light"] .clutch-badge b,[data-theme="light"] .trust a b,[data-theme="light"] .testi-stars .score{color:var(--blue-600)}
/* ==== inline style #om-check-v2 ==== */
/* real marks, resolved at runtime, with a monogram underneath */
.lg{position:relative;display:inline-grid;place-items:center;width:40px;height:40px;flex:none;border-radius:var(--radius-xs);background:rgba(58,160,210,0.14);box-shadow:inset 0 0 0 1px var(--border-1);overflow:hidden}
.lg i{font-style:normal;font-family:var(--font-mono);font-size:13px;font-weight:600;letter-spacing:0.04em;color:var(--signal)}
.lg img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:6px;background:rgba(255,255,255,0.92)}
.lg--sm{width:30px;height:30px}.lg--sm i{font-size:10.5px}.lg--sm img{padding:4px}
.lg--xs{width:18px;height:18px;border-radius:3px}.lg--xs i{font-size:8px}.lg--xs img{padding:2px}
/* the mask. A solid block. Nothing here can be read as a measurement. */
.mask{display:inline-block;font-family:var(--font-mono);font-size:13px;line-height:1.05;letter-spacing:-0.06em;color:var(--fg-4);background:rgba(120,132,150,0.16);border-radius:2px;padding:2px 4px;user-select:none;-webkit-user-select:none}
.strip-wrap{margin-top:20px;padding:16px;border:1px solid var(--border-1);border-radius:var(--radius-sm);background:rgba(10,12,17,0.35)}
.strip-lab{display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-4);line-height:1.5}
.strip{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tr-brand{display:flex;align-items:center;gap:12px;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--border-1)}
.tr-brand .tb{display:flex;flex-direction:column;gap:3px;min-width:0}
.tr-brand .tbn{font-family:var(--font-mono);font-size:12.5px;color:var(--fg-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-brand .tbs{font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-4)}
#ckTile.is-on .tbn,.tr-brand #ckTile.is-on+.tb .tbn{color:var(--fg-1)}
.tr-tab{display:inline-flex;align-items:center;gap:7px}
.scan.is-held .scan-head .st{color:var(--brand-sun)}
.scan.is-held .scan-head .st .dot{background:var(--brand-sun);box-shadow:0 0 10px rgba(252,185,19,0.6);animation:none}
.tr-answer .ans{display:flex;flex-direction:column;gap:7px}
.tr-answer .ans::after{display:none}
.ansk{font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-4)}
.ansrow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.eng-list{list-style:none;display:none;flex-direction:column;gap:8px;margin-top:18px}
.eng-list.is-on{display:flex}
.eng{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--border-1);border-radius:var(--radius-sm);background:rgba(10,12,17,0.45);opacity:0;transform:translateY(6px);transition:opacity 300ms var(--ease-out) var(--d,0ms),transform 300ms var(--ease-out) var(--d,0ms)}
.eng.is-in{opacity:1;transform:none}
.eng .wrap{display:flex;flex-direction:column;gap:5px;min-width:0}
.eng .nm{font-size:14px;font-weight:600;color:var(--fg-1)}
.eng .vd{font-family:var(--font-mono);font-size:11px;color:var(--fg-4);display:flex;align-items:center}
.badge--held{font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--brand-sun);border:1px solid rgba(252,185,19,0.4);background:rgba(252,185,19,0.08);border-radius:var(--radius-full);padding:5px 10px;white-space:nowrap}
.tr-gate{display:none;margin-top:18px;padding:clamp(16px,2vw,22px);border:1px solid var(--border-strong);border-radius:var(--radius-md);background:rgba(58,160,210,0.05)}
.tr-gate.is-on{display:block;animation:gateIn 320ms var(--ease-out) both}
@keyframes gateIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tr-gate.is-on{animation:none}}
.tr-gate h4{font-family:var(--font-display);font-weight:800;font-size:18px;text-transform:uppercase;letter-spacing:-0.02em}
.tr-gate .gtxt{margin-top:8px;font-size:13.5px;line-height:1.6;color:var(--fg-3);max-width:52ch}
.tr-gate .req{font-family:var(--font-mono);font-size:9px;letter-spacing:0.08em;color:var(--fg-4);margin-left:6px}
.tr-gate .note{font-family:var(--font-mono);font-size:10.5px;line-height:1.6;color:var(--fg-4);margin-top:12px;max-width:56ch}
.tr-gate.is-sent form{display:none}
.gate-done{display:none;flex-direction:column;align-items:flex-start;gap:10px}
.gate-done.is-on{display:flex}
.gate-done .ok{font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--verified)}
.gate-done .note{margin-top:0}
.gate-done .btn{margin-top:6px}
.submit[disabled]{cursor:not-allowed;background:transparent;color:var(--fg-4);border-color:var(--border-strong)}
.submit[disabled]:hover{background:transparent}
[data-theme="light"] .scan{background:linear-gradient(180deg,var(--surface-raised),var(--surface))}
[data-theme="light"] .check-panel{background:var(--surface)}
[data-theme="light"] .mask{color:#6B7280;background:rgba(90,100,115,0.2)}
[data-theme="light"] .lg img{background:#fff}
[data-theme="light"] .eng,[data-theme="light"] .strip-wrap,[data-theme="light"] .tr-input{background:var(--surface-raised)}
.logo-slot{display:inline-flex;flex:none}
.hc-mark{width:auto;height:auto;border-radius:0;background:none;box-shadow:none;display:inline-flex}
.hc-mark .lg{width:20px;height:20px}
[data-theme="light"] .plat{background:var(--surface-raised)}
[data-theme="light"] .plat:hover{background:var(--surface)}
[data-theme="light"] .tr-answer{background:linear-gradient(165deg,color-mix(in srgb,var(--signal) 8%,transparent),var(--surface-raised))}
[data-theme="light"] .ansk,[data-theme="light"] .tb-cite{color:var(--fg-3)}
[data-theme="light"] .scan-idle .big{color:var(--fg-2)}
[data-theme="light"] .chip-sponsored{color:var(--fg-2)}
[data-theme="light"] .cred-tile{background:var(--surface-sunken);border-color:var(--border-1)}
[data-theme="light"] .cred:hover .cred-tile{background:#fff;border-color:var(--border-strong)}
[data-theme="light"] .cred:hover{background:var(--surface-sunken)}
/* ==== nav-dd.css ==== */
/* Main nav: Services dropdown (All services and each service page). Loaded by the latest version of each page. */
.nav-dd{position:relative;display:flex;align-items:center}
.nav-dd>a .nav-dd-caret{width:9px;height:9px;flex:none;opacity:.7;transition:transform .18s ease}
.nav-dd:hover:not(.is-closed)>a .nav-dd-caret,.nav-dd:focus-within:not(.is-closed)>a .nav-dd-caret{transform:rotate(180deg)}
.nav-dd-menu{position:absolute;top:100%;left:-16px;z-index:60;min-width:210px;margin:0;padding:12px 0 0;list-style:none;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s}
.nav-dd-menu::before{content:"";position:absolute;inset:12px 0 0;z-index:-1;border:1px solid var(--border-strong,#323944);border-radius:var(--radius-sm,10px);background:rgba(10,14,26,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 18px 40px rgba(0,0,0,.35)}
[data-theme="light"] .nav-dd-menu::before{background:rgba(250,252,254,.96);box-shadow:0 18px 40px rgba(12,20,36,.12)}
.nav-dd:hover:not(.is-closed) .nav-dd-menu,.nav-dd:focus-within:not(.is-closed) .nav-dd-menu{opacity:1;visibility:visible;transform:none;transition:opacity .16s ease,transform .16s ease,visibility 0s}
.nav-dd-menu li{display:block;padding:0 6px}
.nav-dd-menu li:first-child{padding-top:6px}
.nav-dd-menu li:last-child{padding-bottom:6px}
.nav-links .nav-dd-menu a{display:flex;align-items:center;min-height:44px;padding:10px 12px;border-radius:6px;white-space:nowrap;box-shadow:none!important;color:var(--fg-2)}
.nav-links .nav-dd-menu a:hover,.nav-links .nav-dd-menu a:focus-visible{background:rgba(127,140,160,.12);color:var(--fg-1);padding-bottom:10px}
.nav-links .nav-dd-menu a[aria-current="page"]{color:var(--signal,#4A9EFF)}
.nav-dd-menu li.nav-dd-grp{padding:8px 6px 0}
.nav-dd-grp span{display:block;padding:10px 12px 4px;border-top:1px solid var(--border-1,#262C36);font:500 12px/1.4 var(--font-mono,ui-monospace,monospace);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3,#8C98AB);white-space:nowrap}
/* mobile menus: Services becomes a label with indented service links */
.m-menu a.m-dd-label,.ck-mmenu a.m-dd-label{cursor:default;opacity:.62}
.m-menu a.m-dd-sub,.ck-mmenu a.m-dd-sub{padding-left:22px!important;font-size:clamp(18px,5vw,24px);letter-spacing:-.01em}
.ck-mmenu a.m-dd-sub{font-size:inherit}
@media (prefers-reduced-motion:reduce){.nav-dd-menu,.nav-dd>a .nav-dd-caret{transition:none!important}}
/* ==== node-chip-v2.css ==== */
/* Keycap node v2. Shared chip component for every latest page. Load after the page CSS.
Two layers: a role-tinted base slab (host ::after, 5px below the face) and a top face (.kc-face, added by node-chip-v2.js).
Without JS the host itself takes the keycap look (face plus a solid 5px edge) and keeps its old dot.
Roles: blue = reach, teal = system, amber = the client or the active item. Transform and opacity motion only. No blur layers. */
:root{--kc-blue:#4A9EFF;--kc-teal:#2DD4BF;--kc-amber:#F5A524}
/* role colours, used by both the no-JS look and the enhanced look */
:is(.nf-node,.da-src,.da-chip,.da-pn,.pr-chip,.pr2-chip,.hc-chip,.hc-src,.hc-q-src,.sc-chip,.sc-float,.bd-chip,.in-chip,.in-ringlbl,.mk-f,.pm-ring,.mv-live,.mv-final figcaption,.aia-clock,.aia-chip,.wd-chip,.stk-tab,.ck-capacity,.ck-chip,.mb-att-chip,.mv-tag,.in-src,.aia-tools li,.ix-chip,.ae-chip,.kc){--kc-c:#7FB8FF;--kc-edge:#1B3F72;--kc-glow:rgba(74,158,255,.42)}
:is(.mk-f,.wd-chip,.mv-live,.aia-clock,.ck-capacity,.mv-final figcaption,.mv-tag,.aia-tools li,.ix-chip,.kc-teal,.t):is(.nf-node,.da-src,.da-chip,.da-pn,.pr-chip,.pr2-chip,.hc-chip,.hc-src,.hc-q-src,.sc-chip,.sc-float,.bd-chip,.in-chip,.in-ringlbl,.mk-f,.pm-ring,.mv-live,.mv-final figcaption,.aia-clock,.aia-chip,.wd-chip,.stk-tab,.ck-capacity,.ck-chip,.mb-att-chip,.mv-tag,.in-src,.aia-tools li,.ix-chip,.ae-chip,.kc){--kc-c:#5EEAD4;--kc-edge:#0E5550;--kc-glow:rgba(45,212,191,.38)}
:is(.a,.rev,.is-you,.kc-amber,[aria-current="true"],[aria-current="step"],[aria-current="page"],[aria-selected="true"],[aria-pressed="true"],.is-active,.is-cur,:has(>input:checked),:has(>.kc-face>input:checked)):is(.nf-node,.da-src,.da-chip,.da-pn,.pr-chip,.pr2-chip,.hc-chip,.hc-src,.hc-q-src,.sc-chip,.sc-float,.bd-chip,.in-chip,.in-ringlbl,.mk-f,.pm-ring,.mv-live,.mv-final figcaption,.aia-clock,.aia-chip,.wd-chip,.stk-tab,.ck-capacity,.ck-chip,.mb-att-chip,.mv-tag,.in-src,.aia-tools li,.ix-chip,.ae-chip,.kc){--kc-c:#FFC768;--kc-edge:#7A4D06;--kc-glow:rgba(245,165,36,.5)}
/* ---------- no-JS look: the host is the face ---------- */
:is(.nf-node,.da-src,.da-chip,.da-pn,.pr-chip,.pr2-chip,.hc-chip,.hc-src,.hc-q-src,.sc-chip,.sc-float,.bd-chip,.in-chip,.in-ringlbl,.mk-f,.pm-ring,.mv-live,.mv-final figcaption,.aia-clock,.aia-chip,.wd-chip,.stk-tab,.ck-capacity,.ck-chip,.mb-att-chip,.mv-tag,.in-src,.aia-tools li,.ix-chip,.ae-chip):not(.kc-on){border-radius:12px!important;border:1px solid rgba(170,196,232,.3)!important;background:linear-gradient(180deg,rgba(44,60,92,.97),rgba(20,29,49,.97))!important;box-shadow:0 5px 0 0 var(--kc-edge),0 12px 24px -10px var(--kc-glow),inset 0 1px 0 rgba(255,255,255,.16)!important;color:#EEF3FA;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* ---------- enhanced: host becomes a frame, ::after is the base slab ---------- */
.kc-on.kc-on.kc-on{padding:0!important;border:0!important;background:none!important;box-shadow:none!important;border-radius:12px!important;min-height:0!important;height:auto!important;overflow:visible!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;isolation:isolate;gap:0!important;line-height:1!important;flex-shrink:0!important}
.kc-on.kc-rel{position:relative}
.kc-on::after{content:""!important;display:block!important;position:absolute!important;left:0!important;right:0!important;top:var(--kc-depth,5px)!important;bottom:calc(var(--kc-depth,5px) * -1)!important;width:auto!important;height:auto!important;margin:0!important;border:0!important;border-radius:12px!important;background:linear-gradient(180deg,var(--kc-edge),color-mix(in srgb,var(--kc-edge) 62%,#000))!important;box-shadow:0 12px 24px -10px var(--kc-glow),inset 0 -1px 0 rgba(0,0,0,.35)!important;z-index:-1!important;opacity:1!important;transform:none!important;translate:none!important;animation:none!important;pointer-events:none;transition:background .25s}
.kc-on::before{display:none!important}
.kc-inline{--kc-depth:2px}
.kc-inline.kc-on::after{box-shadow:0 8px 14px -10px var(--kc-glow),inset 0 -1px 0 rgba(0,0,0,.35)!important}
.kc-face{position:relative;z-index:1;box-sizing:border-box;width:100%;display:inline-flex;align-items:center;gap:10px;min-height:var(--kc-h,44px);padding:0 16px 0 8px;border-radius:12px;border:1px solid rgba(170,196,232,.3);background:linear-gradient(180deg,rgba(46,62,96,.95),rgba(19,28,48,.95));box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.25);color:#EEF3FA;font:600 14px/1.2 var(--font-sans,"Instrument Sans",system-ui,sans-serif);letter-spacing:0;text-transform:none;text-align:left;white-space:nowrap;overflow:hidden;transform:perspective(600px) rotateX(var(--kc-rx,0deg)) rotateY(var(--kc-ry,0deg)) translateY(var(--kc-y,0px));transition:transform .18s cubic-bezier(.2,.8,.2,1),border-color .2s,background .2s,color .2s}
.kc-nowell>.kc-face{padding:0 16px}
.kc-mono>.kc-face{font:600 13px/1.2 var(--font-mono,"JetBrains Mono",ui-monospace,monospace);letter-spacing:.02em}
.kc-compact{--kc-h:36px}
.kc-compact>.kc-face{gap:8px;padding:0 12px 0 5px;font-size:13px}
.kc-compact .kc-well{width:24px;height:24px}
@media (max-height:760px){.aia-clock.kc-on{right:clamp(200px,23vw,240px)!important}}
/* Performance funnel ring labels sit beside the hero copy: smallest key, no well on mid widths */
.pm-ring.kc-on{--kc-h:30px;--kc-depth:4px}
.pm-ring.kc-on>.kc-face{gap:6px;padding:0 10px 0 4px;font-size:12px}
.pm-ring.kc-on .kc-well{width:22px;height:22px}
@media (max-width:1180px){.pm-ring.kc-on .kc-well{display:none}.pm-ring.kc-on>.kc-face{padding:0 10px}}
.kc-face::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(110px circle at var(--kc-mx,50%) var(--kc-my,0%),rgba(255,255,255,.2),rgba(255,255,255,0) 62%);opacity:0;transition:opacity .2s;pointer-events:none}
.kc-face>:is(i:empty,.ck-cap-dot,.sw){display:none!important}
.kc-face b,.kc-face strong{font-weight:inherit}
.kc-face .kc-t{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* icon well */
.kc-well{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(6,10,20,.78);box-shadow:inset 0 2px 4px rgba(0,0,0,.65),inset 0 -1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(255,255,255,.05);color:var(--kc-c);transition:box-shadow .25s,color .25s}
.kc-well svg{display:block;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* hover, focus, press */
.kc-node:is(:hover,:focus-visible,:focus-within)>.kc-face{--kc-y:-2px;border-color:rgba(200,220,245,.5)}
.kc-inline:is(:hover,:focus-visible,:focus-within)>.kc-face{--kc-y:-1px;border-color:rgba(200,220,245,.5)}
.kc-on:hover>.kc-face::after,.kc-on.kc-hot>.kc-face::after{opacity:1}
.kc-node.kc-press>.kc-face{--kc-y:4px;transition-duration:.06s}
.kc-inline.kc-press>.kc-face{--kc-y:1px;transition-duration:.06s}
.kc-on:focus-visible,.kc-on:has(input:focus-visible){outline:2px solid #F5A524!important;outline-offset:4px!important;border-radius:12px}
/* active or selected: amber well, one pulse; the slab turns amber through the role vars */
.kc-on:is(.is-you,[aria-current="true"],[aria-current="step"],[aria-current="page"],[aria-selected="true"],[aria-pressed="true"],.is-active,.is-cur,.kc-act) .kc-well,.kc-on:has(input:checked) .kc-well{color:#FFC768;box-shadow:inset 0 2px 4px rgba(0,0,0,.6),0 0 0 1px rgba(245,165,36,.65),0 0 14px rgba(245,165,36,.55);animation:kcPulse .9s ease-out 1}
@keyframes kcPulse{0%{transform:scale(1)}35%{transform:scale(1.14)}100%{transform:scale(1)}}
/* selected form chips sink and take the amber face */
.kc-inline:is([aria-pressed="true"],[aria-selected="true"],:has(input:checked))>.kc-face{--kc-y:1px;background:linear-gradient(180deg,rgba(245,165,36,.34),rgba(122,77,6,.62));border-color:#F5A524;color:#FFF6E6}
.kc-inline:is([aria-pressed="true"],:has(input:checked))>.kc-face .box{border-color:#FFC768!important;background:#F5A524!important}
/* idle float, staggered */
.kc-node>.kc-face{animation:kcFloat 7s ease-in-out var(--kc-d,0s) infinite}
@keyframes kcFloat{0%,100%{translate:0 0}50%{translate:0 -1.5px}}
/* ports: a 6px socket where a connector line plugs in */
.kc-on[data-port]::before{content:""!important;display:block!important;position:absolute!important;z-index:3!important;width:6px!important;height:6px!important;margin:0!important;border-radius:50%!important;background:#0A0E1A!important;border:0!important;box-shadow:0 0 0 1.5px var(--kc-c),0 0 0 3.5px rgba(10,14,26,.92)!important;top:calc(50% - 3px)!important;left:auto;right:auto;bottom:auto;opacity:1!important;transform:none!important;translate:none!important;animation:none!important;transition:background .25s,box-shadow .25s}
.kc-on[data-port="r"]::before{right:-3px!important;left:auto!important}
.kc-on[data-port="l"]::before{left:-3px!important;right:auto!important}
.kc-on[data-port="t"]::before{top:-3px!important;left:calc(50% - 3px)!important}
.kc-on[data-port="b"]::before{top:auto!important;bottom:-8px!important;left:calc(50% - 3px)!important}
.kc-on.kc-port-on::before{background:var(--kc-c)!important;box-shadow:0 0 0 1.5px var(--kc-c),0 0 0 3.5px rgba(10,14,26,.92),0 0 12px var(--kc-c)!important}
/* light theme, outside the always-dark stages */
[data-theme="light"] .kc-on:not(:is(.mv,.nf-hero,.ty-hero,.stk,.jr,.shp-on .stk,[data-kc-dark]) *){--kc-edge:#C3CCD8;--kc-glow:rgba(20,40,80,.16)}
[data-theme="light"] .kc-on:not(:is(.mv,.nf-hero,.ty-hero,.stk,.jr,[data-kc-dark]) *)>.kc-face{background:linear-gradient(180deg,#FFFFFF,#EEF2F7);border-color:rgba(10,20,40,.14);color:#0F1729;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(10,20,40,.06)}
[data-theme="light"] .kc-on:not(:is(.mv,.nf-hero,.ty-hero,.stk,.jr,[data-kc-dark]) *) .kc-well{background:#E6EBF2;box-shadow:inset 0 2px 3px rgba(10,20,40,.2),inset 0 -1px 0 #fff;color:#1D5FB8}
[data-theme="light"] .kc-teal.kc-on:not(:is(.mv,.nf-hero,.ty-hero,.stk,.jr,[data-kc-dark]) *) .kc-well{color:#0F766E}
[data-theme="light"] .kc-inline:is([aria-pressed="true"],:has(input:checked)):not(:is(.mv,.nf-hero,.ty-hero,[data-kc-dark]) *)>.kc-face{background:linear-gradient(180deg,#FFF3DC,#FBE2B4);border-color:#C98210;color:#3D2600}
[data-theme="light"] .kc-inline:is([aria-pressed="true"],:has(input:checked)):not(:is(.mv,.nf-hero,.ty-hero,[data-kc-dark]) *){--kc-edge:#D9A54A}
[data-theme="light"] :is(.ck-capacity,.ck-chip,.mb-att-chip,.aia-tools li,.ix-chip,.ae-chip):not(.kc-on):not(:is(.mv,.nf-hero,.ty-hero,[data-kc-dark]) *){background:linear-gradient(180deg,#FFFFFF,#EEF2F7)!important;color:#0F1729;border-color:rgba(10,20,40,.14)!important;box-shadow:0 5px 0 0 #C3CCD8,inset 0 1px 0 #fff!important}
@media (prefers-reduced-motion:reduce){.kc-face,.kc-well,.kc-on::after{transition:none!important}.kc-node>.kc-face{animation:none}.kc-on .kc-well{animation:none!important}}
/* ==== capacity-v1.css ==== */
/* Capacity (intake) v1. Motion is finite (two pulses, then a steady glow): no endless loops. Shared by every service page. Mount with data-capacity="" and an optional
data-capacity-variant="pill|panel|bar". Numbers come from OUNTERNET_CONFIG.capacity only (capacity-v1.js).
State is always written out in text; colour only repeats it. Keycap tiles follow node-chip-v2. No blur layers. */
.cap{--cap-c:#5EEAD4;--cap-edge:#0E5550;--cap-glow:rgba(45,212,191,.38)}
.cap[data-state="last"]{--cap-c:#FFC768;--cap-edge:#7A4D06;--cap-glow:rgba(245,165,36,.45)}
.cap[data-state="full"]{--cap-c:#9AA6B8;--cap-edge:#2A3140;--cap-glow:rgba(154,166,184,0)}
.cap-dot{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:var(--cap-c);box-shadow:0 0 0 3px color-mix(in srgb,var(--cap-c) 22%,transparent)}
.cap[data-state="full"] .cap-dot{background:transparent;box-shadow:inset 0 0 0 1.5px var(--cap-c)}
.cap:not([data-state="full"]) .cap-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--cap-c);opacity:0;animation:capPing 2.4s cubic-bezier(.2,.8,.2,1) 2}
@keyframes capPing{0%{transform:scale(.6);opacity:.7}70%,100%{transform:scale(1.8);opacity:0}}
/* a) pill */
.cap-pill{display:inline-flex;align-items:center;gap:10px;min-height:36px;padding:8px 14px 8px 12px;border-radius:999px;border:1px solid var(--border-strong,rgba(170,196,232,.3));background:color-mix(in srgb,var(--surface,#10141C) 70%,transparent);color:var(--fg-1,#EEF3FA);font:500 13px/1.3 var(--font-sans,"Instrument Sans",system-ui,sans-serif);letter-spacing:0;margin:0;max-width:100%;border-radius:20px;text-wrap:pretty}
@media (min-width:421px){.cap[data-state="open"] .cap-pill,.cap[data-state="last"] .cap-pill{white-space:nowrap;border-radius:999px}}
@media (min-width:641px){.cap[data-state="full"] .cap-pill{white-space:nowrap;border-radius:999px}.cap[data-state="full"] .cap-pill .cap-dot{align-self:center;margin-top:0}}
.cap-pill .cap-dot{align-self:flex-start;margin-top:5px}
.cap-pill .cap-t{min-width:0}
/* b) intake panel */
.cap-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
@media (max-width:900px){.cap-panel{grid-template-columns:1fr;gap:36px}}
.cap-eyebrow{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:var(--tracking-caps,.14em);color:var(--brand-sun,#F5A524);display:inline-flex;align-items:center;gap:10px;margin:0}
.cap-eyebrow::before{content:"";width:24px;height:1px;background:currentColor}
.cap-h{font-size:clamp(30px,3.6vw,52px);line-height:1.02;letter-spacing:-.025em;margin:18px 0 0;max-width:16ch;text-wrap:balance;color:var(--fg-1)}
.cap-body{color:var(--fg-2);font-size:17px;line-height:1.6;max-width:48ch;margin:20px 0 0;text-wrap:pretty}
.cap-board{display:flex;flex-direction:column;gap:26px;align-items:flex-start}
.cap-slots{list-style:none;margin:0;padding:0 0 6px;display:flex;flex-wrap:wrap;gap:clamp(10px,1.4vw,16px);width:100%}
.cap-slot{position:relative;isolation:isolate;flex:1 1 0;min-width:84px;max-width:150px;width:clamp(112px,10vw,150px)}
.cap-slot::after{content:"";position:absolute;left:0;right:0;top:6px;bottom:-6px;border-radius:14px;background:linear-gradient(180deg,var(--slot-edge),color-mix(in srgb,var(--slot-edge) 62%,#000));box-shadow:0 14px 26px -12px var(--slot-glow),inset 0 -1px 0 rgba(0,0,0,.35);z-index:-1}
.cap-face{position:relative;box-sizing:border-box;width:100%;min-height:96px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:14px;padding:14px 16px;border-radius:14px;border:1px solid rgba(170,196,232,.3);background:linear-gradient(180deg,rgba(46,62,96,.97),rgba(19,28,48,.97));box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.25);color:#EEF3FA;font:600 15px/1.2 var(--font-sans,"Instrument Sans",system-ui,sans-serif);text-decoration:none;text-align:left;transition:transform .18s cubic-bezier(.2,.8,.2,1),border-color .2s}
.cap-ico{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(6,10,20,.78);box-shadow:inset 0 2px 4px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.05);color:var(--slot-c)}
.cap-ico svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cap-slot.is-open{--slot-c:#5EEAD4;--slot-edge:#0E5550;--slot-glow:rgba(45,212,191,.5)}
.cap-slot.is-open .cap-face{cursor:pointer;border-color:rgba(94,234,212,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 22px -4px rgba(45,212,191,.32);animation:capGlow 3s ease-in-out 2}
.cap-slot.is-open .cap-face:hover{transform:translateY(-2px);border-color:rgba(94,234,212,.8)}
.cap-slot.is-open .cap-face:active{transform:translateY(3px)}
.cap-slot.is-open .cap-face:focus-visible{outline:2px solid #5EEAD4;outline-offset:4px}
@keyframes capGlow{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 22px -4px rgba(45,212,191,.32)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 26px -2px rgba(45,212,191,.42)}}
.cap-slot.is-taken{--slot-c:#8793A6;--slot-edge:#232A36;--slot-glow:rgba(0,0,0,0)}
.cap-slot.is-taken::after{top:1px;bottom:-1px}
.cap-slot.is-taken .cap-face{transform:translateY(5px);background:linear-gradient(180deg,rgba(30,38,54,.96),rgba(15,20,32,.96));border-color:rgba(170,196,232,.14);color:#8E9AAD;box-shadow:inset 0 2px 6px rgba(0,0,0,.55)}
.cap .cap-slots .cap-slot a.cap-face{color:#EEF3FA;text-decoration:none}
.cap-cta{white-space:nowrap}
/* compact tiles: cards, tables, review sheets */
.cap-slots--compact{gap:8px;padding-bottom:4px}
.cap-slots--compact .cap-slot{flex:1 1 0;min-width:60px;max-width:104px;width:auto}
.cap-slots--compact .cap-slot::after{top:4px;bottom:-4px;border-radius:10px}
.cap-slots--compact .cap-slot.is-taken::after{top:1px;bottom:-1px}
.cap-slots--compact .cap-face{min-height:60px;padding:9px 10px;gap:6px;border-radius:10px;font-size:12.5px}
.cap-slots--compact .cap-slot.is-taken .cap-face{transform:translateY(3px)}
.cap-slots--compact .cap-ico{width:22px;height:22px}
.cap-slots--compact .cap-ico svg{width:11px;height:11px}
.cap-status{display:flex;align-items:center;gap:10px;margin:0;color:var(--fg-1);font-size:15px;font-weight:500;line-height:1.4}
.cap-cta{min-height:44px}
/* c) mobile sticky bar */
.cap-bar{display:none}
@media (max-width:767px){
.cap-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:97;align-items:center;gap:12px;padding:10px clamp(14px,4vw,20px) calc(10px + env(safe-area-inset-bottom));background:rgba(10,12,17,.97);border-top:1px solid var(--border-strong);transform:translateY(105%);transition:transform 320ms cubic-bezier(.2,.8,.2,1)}
.cap-bar.is-on{transform:none}
.cap-bar-t{flex:1;min-width:0;display:flex;align-items:center;gap:10px;margin:0;color:#EEF3FA;font:500 13px/1.3 var(--font-sans,system-ui,sans-serif)}
.cap-bar-cta{flex:none;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border-radius:var(--radius-sm,8px);background:var(--ck-sig,#3AA0D2);color:var(--ck-on,#05131D);font-size:14px;font-weight:600;text-decoration:none}
.cap-bar-cta:focus-visible{outline:2px solid #fff;outline-offset:2px}
body.cap-has-bar .ck-mbar,body.cap-has-bar .om-sticky{display:none!important}
body.cap-has-bar{padding-bottom:calc(66px + env(safe-area-inset-bottom))!important}
}
[data-theme="light"] .cap-bar{background:rgba(250,251,253,.97)}
[data-theme="light"] .cap-bar-t{color:var(--fg-1)}
@media (prefers-reduced-motion:reduce){.cap-dot::after,.cap-slot.is-open .cap-face{animation:none!important}.cap-bar{transition:none}.cap-face{transition:none}}
/* full state: pool tiles stay truthful, but open tiles are not offered on a full lane */
.cap[data-state="full"] .cap-slot.is-open .cap-face{animation:none;cursor:default;border-color:rgba(170,196,232,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.cap[data-state="full"] .cap-slot.is-open{--slot-c:#9AA6B8;--slot-edge:#2A3140;--slot-glow:rgba(0,0,0,0)}
/* generic waitlist form (swapped in for the page form) */
.cap-wl{display:flex;flex-direction:column;gap:18px}
.cap-wl[hidden],.cap-wl [hidden],.cap-wl-on form[hidden]{display:none!important}
.cap-wl-h{margin:0;font-size:clamp(24px,2.6vw,34px);line-height:1.08;letter-spacing:-.02em;color:var(--fg-1)}
.cap-wl-h:focus{outline:none}
.cap-wl .ck-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){.cap-wl .ck-row{grid-template-columns:1fr}}
.cap-wl-note{margin:0;color:var(--fg-2);font-size:14px;line-height:1.5}
.cap-wl-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.cap-wl-send{min-height:44px;white-space:nowrap;flex:none}
.cap-wl-row .ck-consent{flex:1 1 260px;margin:0}
.cap-wl-back{background:none;border:0;padding:0;min-height:44px;color:var(--ck-sig,#3AA0D2);font:600 14px var(--font-sans,system-ui,sans-serif);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cap-wl-back:focus-visible{outline:2px solid var(--ck-sig,#3AA0D2);outline-offset:3px}
.cap-wl-ok:focus{outline:none}
.cap-wl-ok p{margin:10px 0 0;color:var(--fg-2);font-size:16px;line-height:1.55}
/* intake panel section on service pages */
.cap-sec .cap-h{max-width:18ch}
.cap-hero{margin-top:16px}
/* ==== footer-fix-v1.css ==== */
/* Footer fix v1. Pins the shared footer to the Homepage v4 measurements on pages whose own CSS changed them
(case studies use a 1200px container, the visibility monitor uses a system font). Same container, font and rhythm as
Homepage v4; also stops long service names in the Navigate column from overlapping at tablet widths. */
footer.footer{font-family:var(--font-sans,"Instrument Sans",system-ui,sans-serif)}
footer.footer>.container{width:100%;max-width:1440px;margin:0 auto;padding:0 clamp(20px,4vw,48px);position:relative}
footer.footer .footer-col h4{line-height:1.2}
footer.footer .footer-col li{height:auto;line-height:22px}
footer.footer .footer-col a{font-size:14px;line-height:1.45}
footer.footer .footer-col li.ft-sub a{font-size:.94em}
/* ==== lang-switch-v1.css ==== */
/* Language switch v1. Copied verbatim from Homepage v4 (header switch + mobile panel row). Loaded only by pages that
had no switch of their own. Mobile: header switch hidden under 768px, the row lives in the menu panel, as on Homepage v4. */
.lang-switch { display: flex; flex: none; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.lang-switch button { background: transparent; border: 0; border-right: 1px solid var(--border-strong); color: var(--fg-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-caps); padding: 9px 12px; cursor: pointer; transition: color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.lang-switch button:last-child { border-right: 0; }
.lang-switch button:hover { color: var(--fg-1); }
.lang-switch button.is-on { background: rgba(58,160,210,0.12); color: var(--signal); }
.lang-switch button:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
@media (max-width: 640px) { .lang-switch button { padding: 9px 9px; } }
@media (max-width: 767px) { .nav-tools .lang-switch { display: none !important; } }
.m-menu .m-langs{display:flex;gap:8px;margin:26px 0 0}
.m-menu .m-langs button{border:1px solid var(--border-strong);background:transparent;color:var(--fg-3);font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;padding:10px 16px;border-radius:var(--radius-sm);min-height:44px;cursor:pointer}
.m-menu .m-langs button.is-on{color:var(--signal);border-color:var(--signal);background:rgba(58,160,210,.1)}
/* ==== aag-v12.css ==== */
/* AI Ads and GEO v12 page styles (new in v12). Roboto only, brand colours: Lochmara #0080C3, Sun #FCB913 (primary CTA), Green Haze #00A551 (positive only), Ink #1F1F1F.
Hero (rotating platform word + logo tiles, explainer chips, orbit scene), scroll-scrubbed chat walkthrough, SEO/AEO/GEO cards and AEO checklist.
Platform logos are shown unaltered on white tiles; the Grok lockup is shown through a square window so only its mark is visible next to the word. */
html body,html body *:not(svg):not(svg *),html body svg text{font-family:"Roboto",system-ui,-apple-system,"Segoe UI",sans-serif!important}
:root{--font-display:"Roboto",system-ui,sans-serif;--font-sans:"Roboto",system-ui,sans-serif;--font-mono:"Roboto",system-ui,sans-serif;--aag-sun:#FCB913;--aag-loch:#0080C3;--aag-green:#00A551;--aag-ink:#1F1F1F}
.sec-head h2,.hero h1,.check-panel h3,.m-menu ul a{font-weight:700!important}
a{color:#3AA0D2}a:hover{color:#FCB913}
/* logo tiles */
.lt{display:inline-flex;align-items:center;justify-content:center;flex:none;width:1em;height:1em;border-radius:.24em;background:#fff;box-shadow:0 0 0 1px rgba(31,31,31,.08),0 .08em .2em rgba(0,0,0,.25);overflow:hidden;vertical-align:middle}
.lt img{display:block;width:76%;height:76%;object-fit:contain}
.lt--chatgpt{background:transparent;box-shadow:0 .08em .2em rgba(0,0,0,.25)}
.lt--chatgpt img{width:100%;height:100%}
.lt--google svg{width:62%;height:62%}
.lg-clip{display:block;width:64%;height:64%;overflow:hidden}
.lg-clip img{display:block;height:100%;width:auto;max-width:none}
/* shared */
.aag-eb{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-sun,#FCB913)}
.aag-eb::before{content:"";width:28px;height:1px;background:currentColor}
.aag-h2{margin-top:16px;font-weight:700;font-size:clamp(30px,3.6vw,52px);line-height:1.04;letter-spacing:-.03em;color:var(--fg-1);max-width:20ch;text-wrap:balance}
.aag-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:10px;font-size:15px;font-weight:500;text-decoration:none;border:1px solid transparent;transition:transform .2s,background .2s,border-color .2s,color .2s}
.aag-btn .arrow{width:16px;height:16px;transition:transform .2s}
.aag-btn:hover .arrow{transform:translate(2px,-2px)}
.aag-btn--sun{background:#FCB913;color:#1F1F1F;border-color:#FCB913}
.aag-btn--sun:hover{background:#FFCB45;border-color:#FFCB45;color:#1F1F1F}
.aag-btn--ghost{background:transparent;color:var(--fg-1);border-color:var(--border-strong,rgba(255,255,255,.3))}
.aag-btn--ghost:hover{border-color:var(--fg-1);color:var(--fg-1)}
.aag-btn:focus-visible,.aag-x-b:focus-visible,.aw-tab:focus-visible,.a3:focus-visible{outline:2px solid #FCB913;outline-offset:3px}
.aag-tm{margin-top:18px;font-size:12.5px;line-height:1.5;color:var(--fg-3);max-width:62ch}
/* ---------- hero ---------- */
.aag-hero-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,64px);align-items:center}
.aag-h1{margin-top:22px;font-weight:700;font-size:clamp(40px,5.4vw,82px);line-height:1.02;letter-spacing:-.035em;color:var(--fg-1);max-width:14ch}
.rot{position:relative;display:inline-flex;vertical-align:bottom;color:#3AA0D2}
.rw{position:absolute;left:0;bottom:0;display:inline-flex;align-items:center;gap:.16em;white-space:nowrap;opacity:0;transform:translate3d(0,.35em,0);transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.rw.is-on{position:relative;opacity:1;transform:none}
.aag-h1{text-transform:none!important}
.rw.is-out{opacity:0;transform:translate3d(0,-.35em,0)}
.rw .lt{width:.74em;height:.74em;margin-right:.04em}
.aag-sub{margin-top:22px;font-size:clamp(18px,1.5vw,22px);line-height:1.5;color:var(--fg-2);max-width:40ch;text-wrap:pretty}
.aag-x{margin-top:24px}
.aag-x-row{display:flex;flex-wrap:wrap;gap:8px}
.aag-x-b{white-space:nowrap;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--border-strong,rgba(255,255,255,.3));background:rgba(0,128,195,.08);color:var(--fg-1);font-size:14px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background .2s,border-color .2s}
.aag-x-b::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.aag-x-b[aria-expanded="true"]{background:rgba(252,185,19,.14);border-color:#FCB913}
.aag-x-b[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-1px)}
.aag-x-defs{margin:12px 0 0;display:grid;gap:8px}
.aag-x-d{display:flex;gap:10px;align-items:baseline;font-size:15.5px;line-height:1.5;color:var(--fg-2)}
.aag-x-d dt{flex:none;font-weight:700;color:var(--fg-1);min-width:52px}
.aag-x-d dd{margin:0}
.aag-live .aag-x-defs{display:grid;grid-template-areas:"d";min-height:3em}
.aag-live .aag-x-d{grid-area:d;opacity:0;transform:translate3d(0,6px,0);transition:opacity .22s,transform .22s;pointer-events:none}
.aag-live .aag-x-d.is-on{opacity:1;transform:none;pointer-events:auto}
.aag-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.aag-hero .cap-hero{margin-top:18px}
/* orbit scene */
.ao{position:relative;--p:0}
.ao-scene{position:relative;aspect-ratio:1/.9;width:100%;max-width:560px;margin-left:auto;perspective:1300px;transform-style:preserve-3d}
.ao-plane{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transform:rotateX(66deg)}
.ao-ring{position:absolute;left:calc(var(--R)*-1);top:calc(var(--R)*-1);width:calc(var(--R)*2);height:calc(var(--R)*2);border-radius:50%;border:1px solid rgba(58,160,210,.45);box-shadow:0 0 40px rgba(0,128,195,.25),inset 0 0 40px rgba(0,128,195,.12)}
.ao-ring--2{--R:calc(var(--Rb)*.62);border-style:dashed;border-color:rgba(252,185,19,.35);box-shadow:none}
.ao{--Rb:min(220px,36vw);--R:calc(var(--Rb)*(1 - var(--p)*.34))}
.ao-rot{position:absolute;left:0;top:0;transform-style:preserve-3d;animation:aoSpin 28s linear infinite}
.ao-sp{position:absolute;left:0;top:0;transform-style:preserve-3d;transform:rotateZ(var(--a)) translateX(var(--R))}
.ao-c1{transform-style:preserve-3d;transform:rotateZ(calc(var(--a)*-1))}
.ao-c2{transform-style:preserve-3d;animation:aoSpin 28s linear infinite reverse}
.ao-face{transform-style:preserve-3d;transform:rotateX(-66deg)}
.ao-face .lt{position:absolute;left:-30px;top:-60px;width:60px;height:60px;font-size:60px;border-radius:15px;box-shadow:0 18px 30px -12px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.15)}
@keyframes aoSpin{to{transform:rotateZ(360deg)}}
.ao-card{position:absolute;left:50%;top:50%;width:min(300px,62%);padding:18px 20px;border-radius:16px;background:#fff;color:#1F1F1F;box-shadow:0 30px 60px -24px rgba(0,0,0,.75),0 0 0 1px rgba(0,128,195,.25),0 0 60px rgba(0,128,195,calc(.15 + var(--p)*.25));transform:translate(-50%,-56%) translateZ(calc(40px + var(--p)*150px)) scale(calc(1 + var(--p)*.06))}
.ao-k{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#00A551}
.ao-k i{width:8px;height:8px;border-radius:50%;background:#00A551;box-shadow:0 0 0 4px rgba(0,165,81,.15)}
.ao-n{margin-top:8px;font-size:24px;font-weight:700;letter-spacing:-.02em}
.ao-r{margin-top:6px;font-size:14px;line-height:1.45;color:#4a4a4a}
.ao-cite{display:inline-flex;margin-top:12px;padding:5px 10px;border-radius:999px;background:rgba(0,128,195,.1);color:#0068A0;font-size:12.5px;font-weight:500}
.ao-ill,.aw-ill{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.ao-ill{position:absolute;right:0;bottom:0;color:var(--fg-3)}
.ao.is-off .ao-rot,.ao.is-off .ao-c2{animation-play-state:paused}
/* ---------- chat walkthrough ---------- */
.aw{position:relative;padding-top:clamp(72px,9vw,120px);border-top:1px solid var(--border-2)}
.aw-head{margin-bottom:clamp(20px,3vw,40px)}
.aw-grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(24px,4vw,64px);align-items:center}
.aw-count{display:flex;align-items:center;gap:16px;font-size:14px;font-weight:500;color:var(--fg-3)}
.aw-count b{color:var(--fg-1);font-weight:700}
.aw-rail{display:flex;gap:6px}
.aw-rail i{width:22px;height:4px;border-radius:2px;background:var(--border-strong,rgba(255,255,255,.2));transition:background .3s}
.aw-rail i.is-done{background:#3AA0D2}.aw-rail i.is-on{background:#FCB913}
.aw-steps{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:22px}
.aw-steps h3{font-size:clamp(24px,2.3vw,34px);font-weight:700;letter-spacing:-.02em;color:var(--fg-1)}
.aw-steps p{margin-top:8px;font-size:clamp(17px,1.4vw,21px);line-height:1.5;color:var(--fg-2);max-width:30ch;text-wrap:pretty}
.aw-live .aw-steps{grid-template-areas:"s";gap:0}
.aw-live .aw-steps li{grid-area:s;opacity:0;transform:translate3d(0,12px,0);transition:opacity .3s,transform .35s cubic-bezier(.2,.8,.2,1)}
.aw-live .aw-steps li.is-on{opacity:1;transform:none}
.aw-chat{--ac:#10A37F;--ac2:rgba(16,163,127,.12);position:relative;margin:0;border-radius:18px;overflow:hidden;background:#fff;color:#1F1F1F;box-shadow:0 50px 100px -40px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.1);display:flex;flex-direction:column}
.aw-chat p,.aw-chat li,.aw-chat b{color:#1F1F1F}
.ao-card p{color:#1F1F1F}.ao-card .ao-r{color:#4a4a4a}.ao-card .ao-k{color:#007A3D}
.aw-chat[data-p="gemini"]{--ac:#3186FF;--ac2:rgba(49,134,255,.12)}
.aw-chat[data-p="grok"]{--ac:#1F1F1F;--ac2:rgba(31,31,31,.08)}
.aw-top{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #ECEDEF;background:#FAFAFB}
.aw-tabs{display:flex;gap:4px;flex-wrap:wrap}
.aw-tab{white-space:nowrap;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 10px;border:1px solid transparent;border-radius:10px;background:none;color:#4a4a4a;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.aw-tab .lt{width:22px;height:22px;font-size:22px;border-radius:6px}
.aw-tab[aria-selected="true"]{background:#fff;border-color:#DADCE0;color:#1F1F1F;box-shadow:0 2px 6px rgba(0,0,0,.06)}
.aw-ill{margin-left:auto;padding:5px 9px;border-radius:999px;background:#EEF0F2;color:#4a4a4a}
.aw-body{position:relative;height:min(520px,62vh);overflow:hidden;background:#fff}
.aw-flow{display:flex;flex-direction:column;gap:16px;padding:20px 22px 24px;transform:translate3d(0,var(--fy,0px),0)}
.aw-q{display:flex;justify-content:flex-end}
.aw-qb{max-width:82%;padding:12px 16px;border-radius:18px 18px 4px 18px;background:#F1F3F5;font-size:16px;line-height:1.45}
.aw-qb .rest,.aw-intro .rest,.aw-f .rest{visibility:hidden}
.aw-src{position:relative;padding:12px;border-radius:14px;border:1px solid #ECEDEF;overflow:hidden}
.aw-chat .aw-src-l{color:#5f6368;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:#5f6368}
.aw-dot{width:8px;height:8px;border-radius:50%;background:var(--ac)}
.aw-src-g{margin-top:10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.aw-sc{--v:1;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:9px 10px;border-radius:10px;background:#F8F9FA;border:1px solid #ECEDEF;opacity:var(--v);transform:translate3d(calc((1 - var(--v))*24px),0,0)}
.aw-sc i{grid-row:1/3;width:28px;height:28px;border-radius:7px;background:var(--ac2);position:relative}
.aw-sc i::after{content:"";position:absolute;inset:8px;border-radius:2px;border:2px solid var(--ac)}
.aw-sc--art i::after{border-radius:1px;border-width:2px 0}
.aw-sc--rev i::after{border-radius:50%}
.aw-sc--dir i::after{border-width:0 0 2px 2px}
.aw-sc b{font-size:13.5px;font-weight:500}
.aw-sc small{font-size:12px;color:#5f6368}
.aw-scan{position:absolute;top:0;bottom:0;left:0;width:30%;background:linear-gradient(90deg,transparent,var(--ac2),transparent);transform:translate3d(calc(var(--sx,1)*340%),0,0);opacity:var(--so,0);pointer-events:none}
.aw-ans{display:flex;gap:12px;align-items:flex-start}
.aw-av .lt{width:30px;height:30px;font-size:30px;border-radius:8px}
.aw-ac{flex:1;min-width:0;display:grid}
.aw-a{grid-area:1/1;font-size:15.5px;line-height:1.5}
.aw-a ol{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.aw-a li{--v:1;display:flex;flex-wrap:wrap;gap:2px 8px;padding:10px 12px;border-radius:10px;background:#F8F9FA;border:1px solid #ECEDEF;opacity:var(--v);transform:translate3d(0,calc((1 - var(--v))*8px),0)}
.aw-a li b{font-weight:700}
.aw-a li span{color:#3c4043;flex-basis:100%;font-size:14.5px}
.aw-a li.you{background:rgba(0,165,81,.07);border-color:rgba(0,165,81,.45)}
.aw-cite{display:inline-flex!important;flex-basis:auto!important;align-items:center;gap:6px;margin-top:6px;padding:4px 10px;border-radius:999px;background:var(--ac2);color:#1F1F1F!important;font-size:13px!important;font-weight:500;transition:transform .2s}
.aw-cite::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ac)}
.aw-cite.is-tap{transform:scale(.94);box-shadow:0 0 0 4px var(--ac2)}
.aw-chat .aw-miss{color:#6b7076}
.aw-miss{--v:1;display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 12px;border-radius:10px;border:1.5px dashed #C4C7CC;color:#80868b;font-size:14px;opacity:var(--v)}
.aw-miss span{font-weight:700;text-decoration:line-through;text-decoration-thickness:1.5px}
.aw-a--no{opacity:var(--no,1)}
.aw-a--yes{opacity:var(--yes,1)}
.aw-br{position:absolute;inset:12px 12px 12px 12px;border-radius:14px;background:#fff;border:1px solid #DADCE0;box-shadow:0 30px 60px -20px rgba(0,0,0,.45);transform:translate3d(0,calc((1 - var(--br,0))*110%),0);display:flex;flex-direction:column;overflow:hidden}
.aw-bbar{display:flex;align-items:center;gap:6px;padding:10px 12px;background:#F1F3F5;border-bottom:1px solid #ECEDEF}
.aw-bbar i{width:9px;height:9px;border-radius:50%;background:#D0D3D7}
.aw-bbar span{margin-left:8px;flex:1;padding:5px 10px;border-radius:999px;background:#fff;font-size:12.5px;color:#4a4a4a}
.aw-bpage{padding:18px 18px 20px;display:flex;flex-direction:column;gap:6px;transform:translate3d(0,var(--by,0px),0)}
@media (max-height:720px){.aw-live .aw-bh{font-size:17px}.aw-live .aw-bs{display:none}.aw-live .aw-bpage{padding:12px 14px 14px}.aw-live .aw-form{gap:7px;margin-top:6px}.aw-live .aw-f{min-height:40px;padding:5px 10px}.aw-live .aw-f--m{min-height:48px}.aw-live .aw-send{min-height:40px}}
.aw-bh{font-size:20px;font-weight:700;letter-spacing:-.01em}
.aw-chat .aw-bs{font-size:14px;color:#5f6368}
.aw-form{margin-top:10px;display:grid;gap:10px}
.aw-f{display:flex;flex-direction:column;gap:4px;padding:8px 12px;border-radius:10px;border:1px solid #DADCE0;font-size:14.5px;min-height:52px}
.aw-f small{font-size:11.5px;color:#80868b}
.aw-f--m{min-height:70px}
.aw-send{position:relative;display:grid;place-items:center;min-height:46px;border-radius:10px;background:#0080C3;color:#fff;font-size:15px;font-weight:500;overflow:hidden}
.aw-send span{grid-area:1/1;transition:opacity .25s}
.aw-send span:last-child{opacity:0}
.aw-send.is-sent{background:#00A551}
.aw-send.is-sent span:first-child{opacity:0}.aw-send.is-sent span:last-child{opacity:1}
.aw-tap{position:absolute;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:rgba(31,31,31,.18);border:2px solid rgba(31,31,31,.35);opacity:var(--to,0);transform:translate3d(var(--tx,0px),var(--ty,0px),0) scale(var(--ts,1));pointer-events:none}
.aw-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.aw-after{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 32px;padding-top:clamp(32px,4vw,56px);padding-bottom:clamp(72px,9vw,120px)}
.aw-line{font-size:clamp(20px,2vw,28px);line-height:1.35;color:var(--fg-2);max-width:34ch}
.aw-line b{color:var(--fg-1);font-weight:700}
/* static (no JS / reduced motion): everything visible, no sticky */
.aw:not(.aw-live) .aw-body{height:auto}
.aw:not(.aw-live) .aw-ac{display:flex;flex-direction:column;gap:16px}
.aw:not(.aw-live) .aw-a--no::before{content:"Without you";display:block;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:#80868b;margin-bottom:6px}
.aw:not(.aw-live) .aw-a--yes::before{content:"With us";display:block;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:#00A551;margin-bottom:6px}
.aw:not(.aw-live) .aw-br{position:relative;inset:auto;margin:0 12px 12px;transform:none}
.aw:not(.aw-live) .aw-scan,.aw:not(.aw-live) .aw-tap{display:none}
.aw-live .aw-track{height:600vh;height:600svh}
.aw-live .aw-stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden}
.aw-live .aw-grid{width:100%}
/* ---------- SEO / AEO / GEO ---------- */
.a3s .aag-h2{max-width:24ch}
.a3g{margin-top:clamp(28px,4vw,48px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.a3{position:relative;padding:26px 24px 24px;border-radius:16px;border:1px solid var(--border-1);background:linear-gradient(160deg,rgba(0,128,195,.12),rgba(0,128,195,0) 60%),var(--surface,rgba(15,19,26,.6));transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .25s,box-shadow .25s;cursor:default;outline:none}
.a3 h3{margin-top:18px;font-size:30px;font-weight:700;letter-spacing:-.02em;color:var(--fg-1)}
.a3-k{margin-top:2px;font-size:13.5px;color:var(--fg-3)}
.a3-p{margin-top:12px;font-size:17px;line-height:1.5;color:var(--fg-2);text-wrap:pretty}
.a3-ic{width:96px;height:80px;perspective:500px}
.a3-st{position:relative;width:64px;height:64px;margin:8px 0 0 14px;transform-style:preserve-3d;transform:rotateX(56deg) rotateZ(-38deg);--g:10px}
.a3-st i{position:absolute;inset:0;border-radius:10px;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.a3-st i:nth-child(1){transform:translateZ(0);background:rgba(0,128,195,.35);border:1px solid rgba(58,160,210,.6)}
.a3-st i:nth-child(2){transform:translateZ(var(--g));background:rgba(0,128,195,.6);border:1px solid rgba(120,200,255,.7)}
.a3-st i:nth-child(3){transform:translateZ(calc(var(--g)*2));background:#fff;box-shadow:0 0 18px rgba(0,128,195,.5)}
.a3-ic--seo .a3-st i:nth-child(3){background:repeating-linear-gradient(180deg,#fff 0 8px,#3AA0D2 8px 10px,#fff 10px 18px)}
.a3-ic--aeo .a3-st i:nth-child(3){background:#FCB913;box-shadow:0 0 22px rgba(252,185,19,.6)}
.a3-ic--geo .a3-st i:nth-child(3){border-radius:50% 50% 50% 8px;background:#fff;box-shadow:0 0 18px rgba(0,165,81,.55);border:3px solid #00A551}
.a3:hover,.a3:focus-visible,.a3.is-on{transform:translateY(-4px);border-color:rgba(58,160,210,.6);box-shadow:0 24px 50px -28px rgba(0,128,195,.8)}
.a3:hover .a3-st,.a3:focus-visible .a3-st,.a3.is-on .a3-st{--g:20px}
.a3-line{margin-top:26px;font-size:clamp(18px,1.6vw,22px);color:var(--fg-1);font-weight:500}
.a3-chk{margin-top:clamp(36px,5vw,56px);padding:clamp(22px,3vw,34px);border-radius:16px;border:1px solid var(--border-1);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 32px;align-items:end}
.a3-chk h3{grid-column:1/-1;font-size:clamp(22px,2vw,28px);font-weight:700;color:var(--fg-1)}
.a3-chk ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px}
.a3-chk li{display:flex;gap:12px;align-items:flex-start;font-size:16.5px;line-height:1.45;color:var(--fg-1)}
.a3-chk li small{display:block;font-size:14px;color:var(--fg-3)}
.a3-chk li i{flex:none;position:relative;width:22px;height:22px;margin-top:1px;border-radius:50%;border:1.5px solid rgba(0,165,81,.6);background:rgba(0,165,81,.12)}
.a3-chk li i::after{content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;border:solid #00A551;border-width:0 2px 2px 0;transform:rotate(45deg) scale(var(--ck,1));transform-origin:center;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.a3-chk.is-wait li i::after{--ck:0}
.a3-chk.is-wait li{opacity:.55}
.a3-chk li{transition:opacity .35s}
/* faq footnote */
#faq .aag-tm{margin-top:22px}
/* ---------- responsive ---------- */
@media (max-width:1000px){
.aag-hero-in{grid-template-columns:1fr}
.ao-scene{max-width:440px;margin:0 auto}
.aw-grid{grid-template-columns:1fr;gap:16px}
.a3g{grid-template-columns:1fr}
.a3-chk{grid-template-columns:1fr}
}
@media (max-width:1000px){
.aw-live .aw-stage{align-items:stretch}
.aw-live .aw-grid{display:flex;flex-direction:column-reverse;justify-content:flex-end;padding-top:calc(var(--navh,84px) + 8px);padding-bottom:14px;height:100%}
.aw-live .aw-chat{flex:1;min-height:0}
.aw-live .aw-body{flex:1;height:auto;min-height:0}
.aw-steps h3{font-size:22px}
.aw-steps p{font-size:17px;margin-top:4px;max-width:none}
.aw-live .aw-steps{margin-top:8px}
.aw-count{font-size:13px}
}
@media (max-width:640px){
.aag-h1{font-size:clamp(36px,10.5vw,48px)}
.aag-sub{font-size:18px}
.aag-ctas .aag-btn{width:100%}
.ao{--Rb:min(150px,36vw)}
.ao-face .lt{left:-24px;top:-48px;width:48px;height:48px;font-size:48px;border-radius:12px}
.ao-card{width:min(240px,66%);padding:14px 16px}
.ao-n{font-size:20px}.ao-r{font-size:13px}
.aw-top{padding:8px}
.aw-tab{padding:0 10px 0 8px;font-size:13.5px;gap:6px}
.aw-top{flex-wrap:wrap;row-gap:4px}
.aw-ill{padding:4px 8px;font-size:10px}
.aw-flow{padding:14px 14px 18px;gap:12px}
.aw-qb{font-size:16px;max-width:90%}
.aw-a{font-size:15.5px}
.aw-a li{padding:8px 10px}
.aw-a li span{font-size:14.5px}
.aw-sc{padding:7px 8px;column-gap:8px}
.aw-sc i{width:24px;height:24px}
.aw-sc i::after{inset:6px}
.aw-sc b{font-size:13px}.aw-sc small{font-size:11.5px}
.aw-after .aag-btn{width:100%}
.a3-chk ul{grid-template-columns:1fr}
.a3-chk .aag-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
.rw,.aag-x-d,.aw-steps li,.a3,.a3-st i,.a3-chk li,.a3-chk li i::after{transition:none!important}
.ao-rot,.ao-c2{animation:none!important}
}
/* ==== zegaz-case-v1.css ==== */
/* Zegaz case component v1 (shared). Same look as the Homepage v16 case panels (glass panels, AI visibility rings, Google position ladder,
keywords as ranked search results), packaged so any page can show it. Markup: . Script: zegaz-case-v1.js.
Figures are owner-supplied, years only, no click-through rate. Roboto only. */
.zc{--zt2:#C9CED6;--zt3:#A3A5A6;--zln:rgba(255,255,255,.12);--zsun:#FCB913;--zloch:#0080C3;--zink:#1F1F1F;--zam:#FFB547;font-family:"Roboto",system-ui,sans-serif;color:#fff;position:relative;padding:clamp(22px,3vw,40px);border-radius:24px;border:1px solid rgba(255,255,255,.1);background:radial-gradient(60% 60% at 15% 20%,rgba(255,181,71,.07),transparent 70%),#080A0F}
.zc-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px 56px;align-items:end}
.zc-client{display:inline-flex;align-items:center;gap:10px;margin:0 0 16px;font-size:14px;color:#FFD08A}
.zc-client::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--zam);box-shadow:0 0 10px var(--zam)}
.zc-h{margin:0;font-weight:700;font-size:clamp(26px,2.8vw,40px);line-height:1.08;letter-spacing:-.025em;color:#fff;max-width:22ch;text-wrap:balance}
.zc-h em{font-style:normal;color:var(--zsun)}
.zc-lede{margin:0;font-size:17px;line-height:1.55;color:var(--zt2);max-width:52ch;text-wrap:pretty}
.zc-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;margin-top:clamp(28px,4vw,48px)}
.zc-panel{padding:clamp(20px,2.2vw,30px);display:flex;flex-direction:column;border:1px solid var(--zln);border-radius:22px;background:linear-gradient(160deg,rgba(255,255,255,.065),rgba(255,255,255,.015) 60%),rgba(10,18,42,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 40px 90px -60px rgba(0,0,0,.95)}
.zc-panel h3{margin:0 0 4px;font-size:15px;font-weight:500;color:#fff}
.zc-src{margin:auto 0 0;padding-top:16px;font-size:13px;line-height:1.45;color:var(--zt3)}
.zc-p-rings{grid-column:span 7}.zc-p-rank{grid-column:span 5;grid-row:span 2}.zc-p-q{grid-column:span 7}
.zc-rings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:22px 0 4px}
.zc-ring{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.zc-ring-w{position:relative;width:100%;max-width:170px}
.zc-ring-w::before{content:"";position:absolute;inset:14%;border-radius:50%;box-shadow:0 0 40px -6px var(--glow,rgba(94,200,255,.5));pointer-events:none}
.zc-ring svg{display:block;width:100%;transform:rotate(-90deg)}
.zc-ring circle{fill:none;stroke-width:9}
.zc-ring .bg{stroke:rgba(255,255,255,.07)}
.zc-ring .fg{stroke-linecap:round;transition:stroke-dasharray 1.8s cubic-bezier(.2,.8,.2,1)}
.zc-live .zc-rings:not(.is-in) .fg{stroke-dasharray:0 100}
.zc-ring-v{position:absolute;inset:0;display:grid;place-items:center;font-weight:700;font-size:clamp(24px,2.6vw,38px);letter-spacing:-.03em;color:#fff}
.zc-ring-n{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;color:var(--zt2)}
.zc-ring-n .zc-lg{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;background:#fff;overflow:hidden;flex:none}
.zc-ring-n .zc-lg img{display:block;width:78%;height:78%;object-fit:contain}
.zc-ring-n .zc-lg--full{background:transparent}.zc-ring-n .zc-lg--full img{width:100%;height:100%}
.zc-ladder{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;margin:18px 0 0;flex:1;min-height:230px}
.zc-lad-ax{position:relative;width:34px;border-right:1px solid var(--zln);font-size:12px;color:var(--zt3)}
.zc-lad-ax span{position:absolute;right:8px;transform:translateY(-50%)}
.zc-lad-f{position:relative}
.zc-lad-m{position:absolute;left:0;right:0;display:flex;align-items:center;gap:10px;transform:translateY(-50%)}
.zc-lad-m::before{content:"";flex:none;width:12px;height:12px;margin-left:-21px;border-radius:50%;background:var(--mc);box-shadow:0 0 12px var(--mc)}
.zc-lad-m:not([data-to]){top:var(--from);opacity:.6}
.zc-lad-m[data-to]{top:var(--to);transition:top 1.8s cubic-bezier(.2,.8,.2,1),opacity .4s}
.zc-live .zc-ladder:not(.is-in) .zc-lad-m[data-to]{top:var(--from);opacity:0}
.zc-lad-m b{font-weight:700;font-size:28px;letter-spacing:-.02em;color:#fff}
.zc-lad-m small{font-size:14px;color:var(--zt3)}
.zc-serp{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.zc-serp li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"q p" "k p";align-items:center;gap:6px 16px;padding:14px 16px;border-radius:14px;border:1px solid var(--zln);background:rgba(4,8,22,.55)}
.zc-serp-q{grid-area:q;display:flex;align-items:center;gap:10px;min-width:0;padding:10px 14px;border-radius:999px;background:#fff;color:var(--zink);font-size:16px}
.zc-serp-q svg{flex:none;width:16px;height:16px;color:var(--zloch)}
.zc-serp-q span{min-width:0;overflow-wrap:anywhere}
.zc-serp-k{grid-area:k;padding-left:16px;font-size:14px;color:var(--zt3)}
.zc-serp-p{grid-area:p;display:flex;flex-direction:column;align-items:flex-end;text-align:right;line-height:1.2;font-size:14px;color:var(--zt3)}
.zc-serp-p b{font-size:clamp(30px,3vw,42px);font-weight:700;letter-spacing:-.03em;color:var(--zsun)}
.zc-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:clamp(28px,4vw,44px)}
.zc-link{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:500;color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.4)}
.zc-link:hover{color:var(--zsun);text-decoration-color:var(--zsun)}
.zc-cta .aag-btn{white-space:nowrap}
@media (max-width:1020px){.zc-head{grid-template-columns:1fr}.zc-p-rings,.zc-p-rank,.zc-p-q{grid-column:1/-1;grid-row:auto}.zc-rings{gap:8px}.zc-ring-v{font-size:22px}.zc-ring-n{font-size:13.5px}}
@media (max-width:760px){.zc-serp li{grid-template-columns:1fr;grid-template-areas:"q" "k" "p";gap:8px}.zc-serp-k{padding-left:4px}.zc-serp-p{flex-direction:row;align-items:baseline;gap:8px;text-align:left}.zc-ring-n{flex-direction:column;gap:6px}.zc-cta .aag-btn{width:100%;white-space:normal}}
@media (prefers-reduced-motion:reduce){.zc-ring .fg,.zc-lad-m[data-to]{transition:none}}
[data-theme="light"] .zc{color:#fff;border-color:rgba(31,31,31,.12)}
@media (max-width:640px){.zc{padding:18px 14px;border-radius:18px}}
/* ==== inline style #fixA-scroll ==== */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* ==== inline style #fixC-contrast ==== */
/* fix pass C: grey text lightened slightly to 4.5:1 on the dark theme (Lighthouse color-contrast) */html:not([data-theme="light"]){--fg-4:#7d8697}/* fix pass E: the chat mock is always white, so its small grey text is darkened to 4.5:1 on white */.aw-chat .aw-src-l,.aw-sc small,.aw-chat .aw-bs,.aw-chat .aw-miss,.aw-chat .aw-miss > span,.aw-f small{color:#5f6368}.aw-send:not(.is-sent){background:#0077B6}.sc-xlink.note a{text-decoration:underline;text-underline-offset:2px}.a3-chk.is-wait li{opacity:.85}
/* ==== inline style #fixD-reserve ==== */
/* fix pass D: space for the capacity line before its script fills it */.cap-hero:empty{min-height:36px}
/* ---- fix pass E: rendering cost ---- */
/* 1. sections below the first screen skip style, layout and paint until near the viewport. Sections holding a pinned scroll engine are left alone. html.cv-off turns it off (anchor jumps). */
/* 2. phones: the first screen keeps its look but stops running effects (no backdrop blur, no CSS loops) */
@media (max-width:767px){
.nav,.nav *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.nav.is-scrolled{background-color:color-mix(in srgb,var(--bg,#05070b) 94%,transparent)}
.grain{animation:none!important}
main > section:first-of-type,main > section:first-of-type *,main > section:first-of-type *::before,main > section:first-of-type *::after,
.hero,.hero *,.hero *::before,.hero *::after,#hero,#hero *,.jr-ch0,.jr-ch0 *,.jr-ch0 *::before,.jr-ch0 *::after{animation:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
/* ---- fix pass F ---- */
/* content-visibility now uses a data attribute set in the HTML (no :has() selector, cheaper style recalc) */
@supports (content-visibility:auto){html:not(.cv-off) [data-cv]{content-visibility:auto;contain-intrinsic-size:auto 900px}}
/* quick contact bar: its space is reserved from first paint, it moves with transform only */
@media (max-width:767px){body{padding-bottom:calc(56px + env(safe-area-inset-bottom))}body.ck-app-open{padding-bottom:0}.ck-mbar{transition:transform .3s cubic-bezier(.2,.8,.2,1);will-change:transform}body.cc-open .ck-mbar{bottom:0!important;transform:translateY(calc(-1 * var(--cc-h,0px)))}}
/* ==== pass M: accessibility (grey text lightened slightly to 4.5:1 on the dark theme) ==== */
html:not([data-theme="light"]){--fg-4:#8B93A0}
/* ==== pass N ==== */
/* pass N: the film grain is a CSS layer on html::after, not an element, so it can never be the largest paint */
html::after{content:"";animation:none!important}
@media (max-width:767px){html::after{animation:none!important}}
.fld:nth-child(4) > .help{color:#fff}
/* ==== pass Q: shared client logos v2 ==== */
/* client logos v2 (pass Q): shared tiles, strips and card badges for client and partner logos (v1 rules plus compact strip and badges) */
.cl-logo{display:inline-flex;align-items:center;justify-content:center;line-height:0;border-radius:12px}
.cl-logo img{display:block;width:auto;height:100%;max-height:100%;max-width:100%}
.cl-tile--own,.cl-tile--dark{background:transparent}
.cl-tile--white{background:#fff;padding:8px 12px}
.cl-tile--text{line-height:1.2;font-weight:700;letter-spacing:.02em;color:var(--fg-1)}
.cl-strip{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center}
.cl-strip li{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.cl-strip a{color:inherit;text-decoration:none;display:flex;flex-direction:column;gap:6px}
.cl-strip .cl-logo{height:56px}
.cl-strip .cl-tile--text{height:56px;padding:0 4px;font-size:18px}
.cl-kind{font-size:12px;color:var(--fg-3);letter-spacing:.04em;text-transform:uppercase}
.cs-hero-name .cl-logo{height:56px}
.cs-hero-name .cl-tile--white{height:64px}
.b3-name .cl-logo{height:40px}
.cs-hero-logos{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:0 0 14px}
.cs-hero-logos .cl-logo{height:56px}
.cs-hero-logos .cl-x{font-size:20px;color:var(--fg-3)}
[data-client-logos]:not([data-cl-done]){min-height:72px}
[data-client-logos][data-variant="compact"]:not([data-cl-done]){min-height:58px}
.cl-strip--compact{flex-wrap:wrap;gap:10px 22px}
.cl-strip--compact .cl-logo{height:40px}
.cl-strip--compact .cl-tile--text{height:40px;font-size:15px}
.cl-strip--compact li{position:relative;flex-direction:row;align-items:center;gap:6px}
.cl-strip--compact a{flex-direction:row;align-items:center;gap:6px}
.cl-strip--compact img{filter:grayscale(1);opacity:.85;transition:filter .25s,opacity .25s}
.cl-strip--compact a:hover img,.cl-strip--compact a:focus-visible img{filter:none;opacity:1}
.cl-strip--compact .cl-kind{font-size:10.5px;padding:2px 6px;border:1px solid var(--border-1);border-radius:999px;color:var(--fg-2)}
.cl-badge{position:absolute;left:14px;bottom:14px;z-index:2}
.cl-badge .cl-logo{height:40px;box-shadow:0 8px 20px -10px rgba(0,0,0,.6)}
.cl-badge .cl-tile--text{background:rgba(10,12,17,.75);color:#fff;padding:0 12px;border-radius:10px;font-size:15px}
.cl-band{padding:clamp(28px,4vw,44px) 0}
.cl-band h2{margin:0 0 14px;font-size:clamp(20px,2.2vw,28px)}
.ft-trust{padding:20px 0;border-top:1px solid var(--border-1)}
.ft-trust p{margin:0 0 10px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.cl-badge{display:flex;gap:8px;align-items:center}
.cl-badge .cl-tile--dark{background:rgba(10,12,17,.72);padding:6px 10px}
.card-cover{position:relative}