/* ============================================================ NeuroRoute — Marketing/blog/legal site design system Ported from the "NeuroRoute Site" Claude Design project. Scoped to the server-rendered chapter pages (/, /how, /capabilities, /enterprise, /security, /pricing, /compare, /blog, /start, /privacy, /terms, /code) — the dashboard app keeps its own styles.css untouched. TWO THEMES off one token set. Dark is the default (matches the NeuroRoute product); light is the same hues raised into a cool paper scale. Toggle sets data-theme on ; see site.js. COLOR RULES: 1. Accent blue = interactive + emphasis ONLY (links, buttons, active nav, chapter numbers). 2. Data palette = --d1..--d4, always used in that order inside diagrams/tables. Never for UI chrome. 3. --pos green appears only on savings/positive figures. --warn only on cautionary notes. 4. Everything else is the neutral paper/ink scale. ============================================================ */ /* Fonts are NOT @import-ed here on purpose. An @import inside a stylesheet is discovered only after this file has been fetched and parsed, so it adds a serial round trip in front of first paint. The page instead preconnects and links the font stylesheet directly (see sitePageTemplate), which lets the browser start both fetches in parallel. The stack below degrades to system-ui until the webfont lands (font-display:swap). */ /* ---- shared, theme-independent ---- */ :root{ --r:10px; --r-lg:14px; --sans:'IBM Plex Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace; --nav-h:62px; --sub-h:47px; --on-accent:#fff; } /* ---- DARK (default) ---- */ :root,:root[data-theme="dark"]{ color-scheme:dark; --paper:#07080d; --surface:#11141f; --surface-2:#1a1e2c; --inset:#0c0f18; --line:rgba(255,255,255,.085); --line-2:rgba(255,255,255,.16); --ink:#eef1f8; --ink-2:#a9b1c4; --ink-3:#767f95; --accent:#4d8dff; --accent-2:#82b1ff; --accent-soft:rgba(77,141,255,.15); --accent-line:rgba(77,141,255,.34); --pos:#34d399; --pos-soft:rgba(16,185,129,.13); --pos-line:rgba(16,185,129,.34); --warn:#fbbf24; --warn-soft:rgba(245,158,11,.12); --warn-line:rgba(245,158,11,.3); --d1:#4d8dff; --d2:#22d3ee; --d3:#e24fd6; --d4:#f59e0b; --nav-bg:rgba(7,8,13,.82); --code-bg:#05060b; --hero-glow:radial-gradient(120% 130% at 0% 0%,rgba(77,141,255,.18),transparent 46%),radial-gradient(110% 130% at 100% 0%,rgba(226,79,214,.11),transparent 48%); --thumb:#0b0d15; --shadow-1:0 1px 3px rgba(0,0,0,.6); } /* ---- LIGHT (same hues, lighter shades) ---- */ :root[data-theme="light"]{ color-scheme:light; --paper:#f5f8fd; --surface:#fff; --surface-2:#eaf0f9; --inset:#f2f6fc; --line:#e1e8f3; --line-2:#ccd7e8; --ink:#0d1119; --ink-2:#4d5768; --ink-3:#78829a; --accent:#2563eb; --accent-2:#1544b8; --accent-soft:#e7effe; --accent-line:#bcd2fb; --pos:#0e8a63; --pos-soft:#e6f6ef; --pos-line:#b7e2cd; --warn:#9a6207; --warn-soft:#fdf3e0; --warn-line:#eddaae; --d1:#2563eb; --d2:#0e8fa3; --d3:#b03fa5; --d4:#b57314; --nav-bg:rgba(245,248,253,.86); --code-bg:#12151f; --hero-glow:radial-gradient(120% 130% at 0% 0%,rgba(37,99,235,.07),transparent 46%),radial-gradient(110% 130% at 100% 0%,rgba(176,63,165,.05),transparent 48%); --thumb:#fff; --shadow-1:0 1px 4px rgba(15,23,42,.18); } *{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + var(--sub-h) + 24px)} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;transition:background .2s,color .2s} h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.022em;line-height:1.15} p{margin:0} a{color:var(--accent);text-decoration:none} a:hover{color:var(--accent-2)} button{font-family:inherit;cursor:pointer} ::selection{background:var(--accent-soft)} .mono{font-family:var(--mono)} .tnum{font-variant-numeric:tabular-nums} .wrap{max-width:1280px;margin:0 auto;padding:0 32px} .eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)} .lead{color:var(--ink-2);font-size:17px;line-height:1.7} .small{font-size:14px;color:var(--ink-2)} .faint{color:var(--ink-3)} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:8px;font-weight:500;font-size:14.5px;padding:10px 17px;line-height:1.2;white-space:nowrap;transition:.15s} .btn-pri{background:var(--accent);color:var(--on-accent)} .btn-pri:hover{background:var(--accent-2);color:var(--on-accent)} .btn-sec{background:var(--surface);border-color:var(--line-2);color:var(--ink)} .btn-sec:hover{border-color:var(--ink-3);color:var(--ink)} .btn-quiet{color:var(--ink-2);padding:10px 12px} .btn-quiet:hover{color:var(--ink)} .btn-lg{padding:12px 22px;font-size:15.5px} /* ---------- top nav (tier 1: chapters) ---------- */ .topnav{position:sticky;top:0;z-index:60;background:var(--nav-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .tn-in{max-width:1280px;margin:0 auto;padding:0 32px;height:var(--nav-h);display:flex;align-items:center;gap:20px} .tn-brand{display:flex;align-items:center;gap:10px;flex:none} .tn-name{font-weight:600;font-size:16.5px;letter-spacing:-.02em} .tn-by{font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:.04em} .tn-tabs{display:flex;gap:1px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none} .tn-tabs::-webkit-scrollbar{display:none} .tn-tab{display:flex;align-items:center;gap:7px;padding:8px 9px;border:none;background:none;border-radius:7px;color:var(--ink-2);font-size:14px;font-weight:500;white-space:nowrap;transition:.13s} .tn-tab:hover{background:var(--surface-2);color:var(--ink)} .tn-tab .n{font-family:var(--mono);font-size:11px;color:var(--ink-3);transition:.13s} .tn-tab.active{background:var(--accent-soft);color:var(--accent-2);font-weight:600} .tn-tab.active .n{color:var(--accent)} .tn-act{display:flex;align-items:center;gap:8px;flex:none} /* brand lockup: NeuroRoute mark + wordmark, divider, SISL CloudWorx mark */ .tn-div{width:1px;height:22px;background:var(--line-2);flex:none;margin:0 2px} /* The CloudWorx mark's layout lives here, not in an inline style — an inline display:block would win over the narrow-screen rule below and the mark could never be hidden. */ .tn-cw{width:auto;object-fit:contain;display:block;flex:none} /* theme: one small icon button, sun in dark mode (click for light) and moon in light mode (click for dark) — only the icon for the mode you'd switch TO is shown, so the button reads as an action rather than a status. */ .theme-btn{display:grid;place-items:center;width:34px;height:34px;flex:none;border:1px solid var(--line-2); border-radius:9px;background:var(--inset);color:var(--ink-2);transition:.14s;padding:0} .theme-btn:hover{color:var(--ink);border-color:var(--ink-3)} .theme-ico{display:none;line-height:0} :root .theme-ico-sun,:root[data-theme="dark"] .theme-ico-sun{display:block} :root[data-theme="light"] .theme-ico-sun{display:none} :root[data-theme="light"] .theme-ico-moon{display:block} .tn-prog{height:2px;background:var(--accent);transition:width .35s cubic-bezier(.4,0,.2,1)} /* ---------- sub nav (tier 2: sections in this chapter) ---------- */ .subnav{position:sticky;top:var(--nav-h);z-index:55;background:var(--surface);border-bottom:1px solid var(--line)} .sn-in{max-width:1280px;margin:0 auto;padding:0 32px;height:var(--sub-h);display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none} .sn-in::-webkit-scrollbar{display:none} .sn-lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-right:12px;white-space:nowrap} .sn-link{padding:6px 11px;border-radius:6px;font-size:13.5px;color:var(--ink-2);white-space:nowrap;transition:.13s} .sn-link:hover{background:var(--surface-2);color:var(--ink)} .sn-link.on{color:var(--accent-2);background:var(--accent-soft);font-weight:500} .sn-cta{margin-left:auto;font-size:13.5px;color:var(--ink-2);display:flex;align-items:center;gap:6px;white-space:nowrap} /* ---------- chapter hero (identical geometry on every tab) ---------- */ .hero{border-bottom:1px solid var(--line);background:var(--hero-glow),linear-gradient(180deg,var(--surface),var(--paper))} .hero-in{max-width:1280px;margin:0 auto;padding:60px 32px 56px;display:grid;grid-template-columns:1.18fr .82fr;gap:56px;align-items:start} .chap{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:20px} .chap .bar{width:26px;height:1px;background:var(--accent-line)} .chap .of{color:var(--ink-3)} .hero h1{font-size:clamp(33px,3.9vw,48px);max-width:15ch} .hero .deck{color:var(--ink-2);font-size:18px;line-height:1.65;margin-top:20px;max-width:52ch} .cta-row{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap} .glance{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} .glance-hd{padding:11px 18px;border-bottom:1px solid var(--line);background:var(--inset);font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)} .glance-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:14px 18px;border-bottom:1px solid var(--line)} .glance-row:last-child{border-bottom:none} .glance-k{font-size:13.5px;color:var(--ink-2)} .glance-v{font-family:var(--mono);font-size:15px;font-weight:500;color:var(--ink);text-align:right} /* ---------- sections ---------- */ .sec{padding:68px 0;border-bottom:1px solid var(--line)} .sec:last-of-type{border-bottom:none} .sec-alt{background:var(--surface)} .sec-hd{max-width:660px;margin-bottom:36px} .sec-num{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--accent);margin-bottom:10px} .sec-hd h2{font-size:29px} .sec-hd .lead{margin-top:13px} /* ---------- panels & grids ---------- */ .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)} .pad{padding:24px} .pad-sm{padding:18px} .g2{display:grid;grid-template-columns:1fr 1fr;gap:18px} .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .g4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center} .split-w{grid-template-columns:1.15fr .85fr} .row{display:flex;align-items:center;gap:12px} .stack{display:flex;flex-direction:column;gap:14px} .tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;transition:.16s} .tile:hover{border-color:var(--line-2)} .tile-ico{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);margin-bottom:15px} .tile h3{font-size:16px;margin-bottom:7px} .tile p{font-size:14px;color:var(--ink-2);line-height:1.6} .stat{border-left:2px solid var(--line-2);padding:2px 0 2px 18px} .stat .v{font-size:31px;font-weight:600;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums} .stat .k{font-size:13.5px;color:var(--ink-2);margin-top:6px} .stat.on{border-left-color:var(--accent)} /* numbered step flow */ .flow{display:grid;gap:0} .step{display:grid;grid-template-columns:44px 1fr;gap:20px;padding:22px 0;border-top:1px solid var(--line)} .step:first-child{border-top:none;padding-top:0} .step-n{font-family:var(--mono);font-size:12px;color:var(--accent);border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:7px;height:30px;display:grid;place-items:center} .step h3{font-size:16.5px;margin-bottom:6px} .step p{font-size:14.5px;color:var(--ink-2)} .step .note{margin-top:10px;font-family:var(--mono);font-size:12.5px;color:var(--ink-3)} /* spec / definition table */ .spec{width:100%;border-collapse:collapse;font-size:14px} .spec th{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:400;padding:11px 18px;border-bottom:1px solid var(--line);background:var(--inset)} .spec td{padding:13px 18px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top} .spec tr:last-child td{border-bottom:none} .spec td b{color:var(--ink);font-weight:600} .spec .num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap} .spec tr.win td{background:var(--pos-soft)} .pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:3px 9px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);white-space:nowrap} .pill-a{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-2)} .pill-p{background:var(--pos-soft);border-color:var(--pos-line);color:var(--pos)} .pill-w{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn)} .callout{display:flex;gap:14px;padding:18px 20px;border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:var(--r);font-size:14.5px;color:var(--ink-2)} .callout b{color:var(--ink)} .code{background:var(--code-bg);border:1px solid var(--line);border-radius:var(--r);padding:20px;font-family:var(--mono);font-size:13px;line-height:1.85;color:#d7dae1;overflow-x:auto} .code .k{color:#93a7ff}.code .s{color:#7fd2a6}.code .c{color:#767d8c}.code .d{color:#e8b475} .meter{height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden;min-width:70px} .meter>span{display:block;height:100%;background:var(--accent)} /* product shot slot */ .shot{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--inset);display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;color:var(--ink-3);font-size:13px;text-align:center;padding:20px} /* next chapter */ .next{border-top:1px solid var(--line);background:var(--surface)} .next-in{max-width:1280px;margin:0 auto;padding:34px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;transition:.16s} .next-in:hover{background:var(--inset)} .next-k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px} .next-t{font-size:23px;font-weight:600;letter-spacing:-.02em;color:var(--ink)} .next-d{font-size:14.5px;color:var(--ink-2);margin-top:6px;max-width:56ch} .next-arrow{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--accent);flex:none;transition:.16s} .next-in:hover .next-arrow{background:var(--accent);color:var(--on-accent);border-color:var(--accent)} /* footer */ .foot{background:var(--surface);border-top:1px solid var(--line);padding:44px 0 34px} .foot-in{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:36px} .foot h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:400;margin-bottom:14px} .foot-links{display:flex;flex-direction:column;gap:9px;font-size:14px} .foot-links a{color:var(--ink-2)} .foot-links a:hover{color:var(--accent)} .foot-btm{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:36px;padding-top:22px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-3)} .roi-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:44px;align-items:center} /* range */ .range{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:99px;background:linear-gradient(90deg,var(--accent) var(--p,50%),var(--surface-2) var(--p,50%));outline:none} .range::-webkit-slider-thumb{-webkit-appearance:none;width:19px;height:19px;border-radius:50%;background:var(--thumb);border:2px solid var(--accent);cursor:pointer;box-shadow:var(--shadow-1)} @media(max-width:1320px){ .tn-by{display:none} .tn-tab{padding:7px 7px;font-size:13px} .tn-in{gap:14px;padding:0 20px} .tn-tabs{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 20px),transparent)} /* Login deliberately NOT hidden here (the source design dropped it below 1320px, which hides it on every ordinary laptop). The tab strip already scrolls, so the nav absorbs the width instead. */ } @media(max-width:940px){ .hero-in{grid-template-columns:1fr;gap:36px;padding:44px 24px 40px} .split,.split-w,.g2,.g3,.g4{grid-template-columns:1fr} .wrap,.tn-in,.sn-in,.next-in{padding-left:20px;padding-right:20px} .roi-grid{grid-template-columns:1fr;gap:28px} .foot-in{grid-template-columns:1fr 1fr} .sec{padding:48px 0} } /* Narrow phones: the parent-company mark is the first thing to go, matching the old landing page's own breakpoint. Login stays. */ @media(max-width:560px){ .tn-div,.tn-cw{display:none} .tn-act .btn-pri{padding:9px 13px;font-size:13.5px} } /* pricing tiers */.tier-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:start} .tier{display:flex;flex-direction:column} .tier.hot{border-color:var(--accent-line);box-shadow:0 0 0 1px var(--accent-line)} .tier-price{font-size:34px;font-weight:600;letter-spacing:-.03em} /* compare matrix */ .cmp{width:100%;border-collapse:collapse;font-size:13.5px;min-width:760px} .cmp th{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:400;padding:13px 14px;border-bottom:1px solid var(--line-2);white-space:nowrap;background:var(--surface)} .cmp th.me{color:var(--accent-2)} .cmp td{padding:10px 14px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:middle} .cmp td.cap{color:var(--ink);min-width:250px} .cmp td.me{background:var(--accent-soft)} .cmp th.me{background:var(--accent-soft)} .cmp tr.grp td{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);background:var(--inset);padding:9px 14px} .cmp tbody tr:last-child td{border-bottom:none} @media(max-width:940px){.tier-grid{grid-template-columns:1fr}} @media(min-width:941px) and (max-width:1180px){.tier-grid{grid-template-columns:1fr 1fr}} /* ---- savings calculator (Pricing) ---- */ .cx{display:grid;grid-template-columns:340px 1fr;gap:18px;align-items:start} .cx-side{display:grid;gap:18px} .cx-main{display:grid;gap:18px} .cx-eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)} .cx-row{display:flex;justify-content:space-between;align-items:baseline;margin:18px 0 12px} .cx-label{font-size:14.5px;font-weight:500;color:var(--ink)} .cx-num{font-size:19px;font-weight:500} .cx-help{margin:9px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-3)} .cx-ft{display:block;margin-top:22px;margin-bottom:8px} .cx-sel{width:100%;appearance:none;background:var(--inset);border:1px solid var(--line-2);border-radius:var(--r);padding:11px 34px 11px 13px;font-family:var(--sans);font-size:14px;color:var(--ink);cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat} .cx-sel:focus{outline:none;border-color:var(--accent-line)} /* tier picker — the calculator's first control: which tier you're on decides which optimization levers are even available, so it sits above them. Two-way synced with the four comparison rows further down the page. */ .cx-tierpick{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:14px} .cx-tierbtn{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left; background:var(--inset);border:1px solid var(--line-2);border-radius:var(--r);padding:9px 11px;transition:.14s} .cx-tierbtn:hover{border-color:var(--ink-3)} .cx-tierbtn b{font-size:13.5px;font-weight:500;color:var(--ink)} .cx-tierbtn span{font-family:var(--mono);font-size:10.5px;color:var(--ink-3)} .cx-tierbtn.on{background:var(--accent-soft);border-color:var(--accent-line)} .cx-tierbtn.on b{color:var(--accent-2)} .cx-tierbtn.on span{color:var(--accent)} .cx-tokens{margin-top:16px;background:var(--inset);border:1px solid var(--line);border-radius:var(--r);padding:11px 13px;font-size:12.5px;color:var(--ink-2)} .cx-lever{margin-top:20px} .cx-lever:first-child{margin-top:16px} .cx-lever-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:11px} .cx-lever-n{font-size:14.5px;font-weight:500;color:var(--ink)} .cx-lever-v{font-size:14px;font-weight:500;color:var(--ink)} .cx-lever.off{opacity:.42} .cx-lever.off .range{cursor:not-allowed} .cx-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .cx-stat-v{font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1.1;margin-top:10px} .cx-stat-v.acc{color:var(--accent)} .cx-stat-v.pos{color:var(--pos)} .cx-stat-s{margin-top:7px;font-size:12.5px;color:var(--ink-3)} .cx-bill{margin-top:16px} .cx-bill-r{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:13px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--ink-2)} .cx-bill-r b{font-size:16px;font-weight:500;color:var(--ink);white-space:nowrap} .cx-bill-r .mono{font-size:13px} .cx-bill-r.tot{border-bottom:none;border-top:1px solid var(--line-2);color:var(--ink);font-weight:500} .cx-bill-r.net{border-bottom:none;border-top:1px solid var(--line-2)} .cx-bill-r.net b.pos{color:var(--pos)} .cx-dot{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:9px;vertical-align:middle} .cx-dot.n{background:var(--ink-3)}.cx-dot.a{background:var(--accent)}.cx-dot.p{background:var(--pos)} .cx-byok{margin-top:18px;background:var(--inset);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;font-size:13px;line-height:1.6;color:var(--ink-2)} .cx-tiers{margin-top:16px;display:grid;gap:4px} .cx-trow{display:grid;grid-template-columns:150px 1fr 92px;align-items:center;gap:16px;width:100%;text-align:left;background:none;border:1px solid transparent;border-radius:var(--r);padding:12px 12px;cursor:pointer;transition:.14s} .cx-trow:hover{background:var(--inset)} .cx-trow.on{background:var(--accent-soft);border-color:var(--accent-line)} .cx-trow-n b{display:block;font-size:14.5px;font-weight:500;color:var(--ink)} .cx-trow-n span{display:block;margin-top:3px;font-size:11.5px;color:var(--ink-3)} .cx-bars{display:grid;gap:5px} .cx-track{display:block;height:11px;border-radius:3px;background:var(--inset);border:1px solid var(--line);overflow:hidden} .cx-fill{display:block;height:100%;border-radius:2px} .cx-fill.pos{background:var(--pos)}.cx-fill.acc{background:var(--accent)} .cx-trow-v{font-size:17px;font-weight:500;text-align:right} .cx-trow-v.pos{color:var(--pos)} .cx-legend{display:flex;flex-wrap:wrap;gap:18px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)} .cx-proof{margin-top:20px} .cx-prow{display:grid;grid-template-columns:170px 1fr 84px;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)} .cx-prow:last-child{border-bottom:none} .cx-prow.off{opacity:.4} .cx-prow-n b{display:block;font-size:14.5px;font-weight:500;color:var(--ink)} .cx-prow-n span{display:block;margin-top:3px;font-size:12px;color:var(--ink-3)} .cx-prow .cx-track{height:14px} .cx-prow-v{font-size:15px;font-weight:500;text-align:right} .cx-prow-v.pos{color:var(--pos)} @media(max-width:1020px){.cx{grid-template-columns:1fr}.cx-stats{grid-template-columns:1fr}} @media(max-width:620px){.cx-trow,.cx-prow{grid-template-columns:1fr auto;gap:10px}.cx-bars,.cx-prow .cx-track{display:none}} /* ---- blog ---- */ .bchips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px} .bchip{border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:500;letter-spacing:.01em;transition:.14s} .bchip:hover{border-color:var(--ink-3);color:var(--ink)} .bchip.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-2)} .bcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;cursor:pointer;display:flex;flex-direction:column;gap:12px;transition:.16s} .bcard:hover{border-color:var(--accent-line);transform:translateY(-1px)} .bcard-top{display:flex;align-items:center;justify-content:space-between;gap:14px} .bcard-meta{font-size:11.5px;color:var(--ink-3)} .bcard h3{font-size:18px;line-height:1.3} .bcard p{font-size:14px;color:var(--ink-2);line-height:1.6;flex:1} .bcard-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:12px;border-top:1px solid var(--line)} .bcard-go{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:500;color:var(--accent)} .bcard-feat{background:var(--hero-glow),var(--surface);padding:30px 30px 24px} .bcard-feat h3{font-size:26px;letter-spacing:-.022em;max-width:26ch} .bcard-feat p{font-size:16px;max-width:62ch} .bavatar{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--inset);border:1px solid var(--line)} /* ---- blog reading view ---- */ .post{padding:52px 0 0} .post-hd{max-width:74ch;margin:0 auto;padding-bottom:30px;border-bottom:1px solid var(--line)} .post-back{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)} .post-back:hover{color:var(--accent)} .post-hd h1{font-size:clamp(29px,3.2vw,40px);margin-top:20px;text-wrap:pretty} .post-hd .deck{color:var(--ink-2);font-size:18px;line-height:1.6;margin-top:16px} .post-meta{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-top:22px;font-size:13.5px;color:var(--ink-3)} .post-meta .dot{color:var(--line-2)} .prose{max-width:74ch;margin:0 auto;padding:8px 0 10px} .prose h2{font-size:23px;margin:44px 0 0;letter-spacing:-.02em;scroll-margin-top:calc(var(--nav-h) + var(--sub-h) + 28px)} .prose p{margin-top:17px;font-size:16.5px;line-height:1.75;color:var(--ink-2);text-wrap:pretty} .prose ul{margin:20px 0 0;padding-left:0;list-style:none;display:grid;gap:13px} .prose li{position:relative;padding-left:22px;font-size:16px;line-height:1.7;color:var(--ink-2)} .prose li:before{content:"";position:absolute;left:2px;top:11px;width:6px;height:6px;border-radius:2px;background:var(--accent-line)} .prose-tbl{margin-top:26px;overflow-x:auto} .prose-tbl .spec{min-width:640px} .prose-tbl .spec td:first-child{width:26%} .post-next{max-width:74ch;margin:46px auto 0;padding:30px 0 12px;border-top:1px solid var(--line)} @media(max-width:940px){.post{padding-top:34px}.bcard-feat{padding:24px}.bcard-feat h3{font-size:22px}} /* ---- home: landing hero, stats, routing demo ---- */ .hhero{border-bottom:1px solid var(--line);background:var(--hero-glow),linear-gradient(180deg,var(--surface),var(--paper));text-align:center} .hhero-in{max-width:900px;margin:0 auto;padding:64px 32px 56px} .hhero-chip{display:inline-flex;align-items:center;gap:9px;padding:5px 13px 5px 6px;border:1px solid var(--line-2);background:var(--surface);border-radius:999px;font-size:13px;color:var(--ink-2);margin-bottom:24px} .hhero h1{font-size:clamp(33px,4.4vw,54px);letter-spacing:-.028em;line-height:1.1} .hhero-em{color:var(--accent)} .hhero .deck{max-width:64ch;margin:20px auto 0;font-size:18px;line-height:1.65;color:var(--ink-2)} .hviz-card{margin-top:42px;padding:20px 18px 14px;text-align:left} .hviz-cap{margin-top:8px;text-align:center;font-size:11.5px;letter-spacing:.06em;color:var(--ink-3)} .hstats{border-bottom:1px solid var(--line);background:var(--surface)} .hstats-in{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-top:26px;padding-bottom:26px} .hstat .v{font-size:29px;font-weight:600;letter-spacing:-.03em;color:var(--accent)} .hstat .k{font-size:13px;color:var(--ink-2);margin-top:5px} .hdot{width:9px;height:9px;border-radius:3px;flex:none} .hbreach{display:grid;gap:10px;align-content:start} .hbreach-h{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase} .hbreach.bad{border-color:var(--warn-line)} .hbreach.bad .hbreach-h{color:var(--warn)} .hbreach.good{border-color:var(--pos-line)} .hbreach.good .hbreach-h{color:var(--pos)} .hcta{border:1px solid var(--accent-line);background:var(--hero-glow),var(--surface);border-radius:var(--r-lg);padding:44px 32px;text-align:center} .hcta h2{font-size:30px} .hcta p{max-width:56ch;margin:14px auto 0;color:var(--ink-2);font-size:16px} /* interactive routing demo */ .hdemo{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start} .hdemo-col{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px} .hdemo-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px} .hdemo-qs{display:grid;gap:7px} .hdemo-q{display:grid;grid-template-columns:28px 1fr;gap:11px;align-items:start;text-align:left;width:100%;background:var(--inset);border:1px solid var(--line);border-radius:var(--r);padding:11px 12px;transition:.14s} .hdemo-q:hover{border-color:var(--line-2)} .hdemo-q.on{background:var(--accent-soft);border-color:var(--accent-line)} .hdemo-q-ic{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);color:var(--accent)} .hdemo-q-l{display:block;font-size:13.5px;font-weight:500;color:var(--ink)} .hdemo-q-p{display:block;margin-top:3px;font-size:11.5px;line-height:1.5;color:var(--ink-3)} .hdemo-pipe{display:grid;gap:10px} .hdemo-step{border:1px solid var(--line);background:var(--inset);border-radius:var(--r);padding:13px 14px;opacity:.42;transition:.28s} .hdemo-step.lit{opacity:1;border-color:var(--line-2)} .hdemo-step-t{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:500;color:var(--ink)} .hdemo-n{width:19px;height:19px;border-radius:6px;display:grid;place-items:center;background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent);font-family:var(--mono);font-size:10.5px} .hdemo-cands{display:grid;gap:8px;margin-top:12px} .hdemo-cand{display:grid;grid-template-columns:1fr 66px 20px;gap:10px;align-items:center;transition:.28s} .hdemo-cand.dim{opacity:.4} .hdemo-cand-n{font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hdemo-cand.win .hdemo-cand-n{color:var(--ink);font-weight:500} .hdemo-routed{display:flex;align-items:center;gap:9px;margin-top:11px;font-size:13px;color:var(--ink-2)} .hdemo-routed b{color:var(--ink)} .hdemo-res{display:grid;gap:14px;opacity:0;transition:opacity .3s} .hdemo-res.on{opacity:1} .hdemo-costs{display:grid;gap:9px;background:var(--inset);border:1px solid var(--line);border-radius:var(--r);padding:14px} .hdemo-cr{display:flex;align-items:baseline;justify-content:space-between;gap:14px;font-size:13px;color:var(--ink-2)} .hdemo-cr.big{padding-top:9px;border-top:1px solid var(--line);color:var(--ink);font-weight:500} .hdemo-why{font-size:12.5px;line-height:1.6;color:var(--ink-2)} .hdemo-why-k{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px} .hdemo-tally{background:var(--inset);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:grid;gap:8px} @media(max-width:1020px){.hdemo{grid-template-columns:1fr}} @media(max-width:940px){.hstats-in{grid-template-columns:1fr 1fr}.hhero-in{padding:44px 20px 40px}.hcta{padding:30px 20px}.hcta h2{font-size:24px}} /* routing viz — CSS-only cycling highlight (no JS): 6 rows, 1.3s each, 7.8s loop */ .hviz{position:relative} .hviz svg .hviz-row{animation:hvizCycle 7.8s linear infinite} .hviz svg .hviz-row:nth-child(1){animation-delay:0s} .hviz svg .hviz-row:nth-child(2){animation-delay:-1.3s} .hviz svg .hviz-row:nth-child(3){animation-delay:-2.6s} .hviz svg .hviz-row:nth-child(4){animation-delay:-3.9s} .hviz svg .hviz-row:nth-child(5){animation-delay:-5.2s} .hviz svg .hviz-row:nth-child(6){animation-delay:-6.5s} @keyframes hvizCycle{0%,16.6%{opacity:1}16.7%,100%{opacity:.34}} @media (prefers-reduced-motion: reduce){.hviz svg .hviz-row{animation:none;opacity:1}} /* ---- legal documents (privacy / terms / code of conduct) ---- */ .lg-hero{border-bottom:1px solid var(--line);background:var(--hero-glow),linear-gradient(180deg,var(--surface),var(--paper));padding:52px 0 30px} .lg-hero h1{font-size:clamp(30px,3.4vw,42px);margin-top:12px} .lg-meta{margin-top:14px;font-size:13.5px;color:var(--ink-3);font-family:var(--mono)} .lg-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px} .lg-tab{padding:7px 14px;border:1px solid var(--line-2);background:var(--surface);border-radius:999px;font-size:13px;color:var(--ink-2)} .lg-tab:hover{border-color:var(--ink-3);color:var(--ink)} .lg-tab.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-2);font-weight:500} .lg-body{max-width:860px;padding-top:38px;padding-bottom:70px} .lg-intro{font-size:17px;line-height:1.7;color:var(--ink-2);max-width:74ch} .lg-toc{margin:26px 0 40px} .lg-toc ol{margin:0;padding-left:20px;columns:2;column-gap:30px} .lg-toc li{font-size:13.5px;line-height:1.95;color:var(--ink-2);break-inside:avoid} .lg-toc a{color:var(--ink-2)} .lg-toc a:hover{color:var(--accent)} .lg-sec{margin-bottom:38px;scroll-margin-top:calc(var(--nav-h) + 28px)} .lg-sec h2{display:flex;gap:12px;align-items:baseline;font-size:20px;line-height:1.35;margin-bottom:14px} .lg-n{font-family:var(--mono);font-size:12px;color:var(--accent);flex:none} .lg-sec p{font-size:15.5px;line-height:1.75;color:var(--ink-2);margin-top:13px;text-wrap:pretty} .lg-sec ul{margin:14px 0 0;padding-left:0;list-style:none;display:grid;gap:11px} .lg-sec li{position:relative;padding-left:20px;font-size:15px;line-height:1.7;color:var(--ink-2)} .lg-sec li:before{content:"";position:absolute;left:2px;top:10px;width:5px;height:5px;border-radius:2px;background:var(--accent-line)} .lg-call{margin-top:16px;font-size:15px} .lg-tbl{margin-top:18px;overflow-x:auto} .lg-tbl .spec{min-width:560px} .lg-note{margin-top:34px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-3);line-height:1.7} .lg-foot{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap} @media(max-width:700px){.lg-toc ol{columns:1}.lg-hero{padding:36px 0 24px}} /* ---- contact-sales modal (site_lead.go) ---- Ported from the SPA's lead-form.jsx LeadFormStyles, with its hardcoded fallback hexes replaced by this stylesheet's own tokens so the form follows the light/dark theme instead of being dark-only. */ .lf-overlay{position:fixed;inset:0;z-index:2000;background:rgba(4,6,12,.78);backdrop-filter:blur(7px); display:flex;align-items:flex-start;justify-content:center;padding:28px 16px;overflow-y:auto; animation:lfFade .18s ease} :root[data-theme="light"] .lf-overlay{background:rgba(15,23,42,.42)} .lf-overlay[hidden]{display:none} @keyframes lfFade{from{opacity:0}to{opacity:1}} .lf{position:relative;width:100%;max-width:640px;background:var(--surface);border:1px solid var(--line-2); border-radius:18px;box-shadow:0 30px 90px rgba(0,0,0,.45);animation:lfUp .22s cubic-bezier(.2,.8,.3,1)} @keyframes lfUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .lf-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px; padding:22px 24px 16px;border-bottom:1px solid var(--line)} .lf-eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;font-weight:500;color:var(--accent);margin-bottom:7px} .lf-title{font-size:19px;font-weight:600;color:var(--ink);letter-spacing:-.01em} .lf-x{background:transparent;border:1px solid var(--line-2);color:var(--ink-3); width:32px;height:32px;border-radius:9px;cursor:pointer;display:grid;place-items:center;flex:none} .lf-x:hover{color:var(--ink);border-color:var(--ink-3)} .lf-bd{padding:20px 24px 24px;display:flex;flex-direction:column;gap:14px} .lf-bd[hidden],.lf-done[hidden],.lf-err[hidden],.lf-hint[hidden]{display:none} .lf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} .lf-f{display:flex;flex-direction:column;gap:7px;min-width:0} .lf-f>span{font-size:12.5px;font-weight:500;color:var(--ink-2)} .lf-f>span>i{color:var(--d3);font-style:normal} .lf-f input,.lf-f select,.lf-f textarea{width:100%;background:var(--inset);color:var(--ink); border:1px solid var(--line-2);border-radius:10px;padding:11px 13px;font-size:14px; font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s} .lf-f textarea{resize:vertical;min-height:96px;line-height:1.55} .lf-f input::placeholder,.lf-f textarea::placeholder{color:var(--ink-3)} .lf-f input:focus,.lf-f select:focus,.lf-f textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)} .lf-verify{align-items:stretch} .lf-otp-btn{width:100%;justify-content:center;padding:11px 14px;font-size:14px;border-radius:10px} .lf-otp-btn:disabled{opacity:.6;cursor:not-allowed} .lf-hint{font-size:12px;color:var(--ink-3);margin-top:2px} .lf-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none} .lf-consent{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--ink-2);cursor:pointer} .lf-consent input{width:16px;height:16px;flex:none;margin-top:1px;accent-color:var(--accent);cursor:pointer} .lf-consent i{color:var(--d3);font-style:normal} .lf-err{display:flex;align-items:center;gap:8px;font-size:13px;color:#ff8b8b; background:rgba(255,90,90,.09);border:1px solid rgba(255,90,90,.25);border-radius:9px;padding:10px 12px} :root[data-theme="light"] .lf-err{color:#b42318;background:#fef3f2;border-color:#fecdca} .lf-btn-xl{width:100%;justify-content:center;padding:14px;font-size:15.5px;border-radius:12px;margin-top:2px} .lf-btn-xl:disabled{opacity:.65;cursor:not-allowed} .lf-foot{font-size:11.5px;color:var(--ink-3);text-align:center;line-height:1.5} .lf-done{padding:38px 28px 34px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px} .lf-done-ic{color:var(--pos);line-height:0} .lf-done h3{margin:0;font-size:19px;color:var(--ink)} .lf-done p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.6} .lf-done b{color:var(--ink)} .lf-done .lf-btn-xl{max-width:220px;margin-top:10px} @media (max-width:640px){ .lf-overlay{padding:0} .lf{max-width:none;min-height:100%;border-radius:0;border:none} .lf-row{grid-template-columns:1fr} .lf-hd{position:sticky;top:0;background:var(--surface);z-index:2;border-radius:0} .lf-bd{padding:18px 18px 34px} } /* ---- Routing Rules panel (Capabilities 03.3) ---- A live-markup reproduction of the admin screen, not a screenshot: sharp at any zoom, theme-aware, readable to a crawler. Purely illustrative — the "controls" are spans, never inputs, and the block is aria-hidden with a real
carrying the meaning. */ .rr-fig{margin:0} .rr-ui{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden} .rr-ui-hd{padding:20px 22px 16px;border-bottom:1px solid var(--line);background:var(--inset)} .rr-crumb{font-size:11px;letter-spacing:.06em;color:var(--ink-3);margin-bottom:8px} .rr-ui-hd h3{font-size:18px;color:var(--ink)} .rr-ui-hd p{margin-top:6px;font-size:13.5px;color:var(--ink-2)} .rr-row{padding:18px 22px;border-bottom:1px solid var(--line)} .rr-row:last-child{border-bottom:none} .rr-row-compact{display:flex;align-items:center;gap:14px;padding:13px 22px} .rr-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .rr-task{font-size:15px;font-weight:500;color:var(--ink);flex:1;min-width:150px} .rr-row-compact .rr-task{flex:1} .rr-seg{display:inline-flex;gap:3px;padding:3px;background:var(--inset);border:1px solid var(--line);border-radius:8px;flex:none} .rr-segbtn{padding:5px 13px;border-radius:6px;font-size:12.5px;font-weight:500;color:var(--ink-2);white-space:nowrap} .rr-segbtn.on{background:var(--accent);color:var(--on-accent)} .rr-count{font-size:11.5px;font-family:var(--mono);color:var(--accent-2);background:var(--accent-soft); border:1px solid var(--accent-line);border-radius:999px;padding:3px 10px;flex:none} .rr-presets{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px} .rr-presets-l{font-size:12.5px;color:var(--ink-3);margin-right:2px} .rr-preset{font-size:12.5px;color:var(--ink-2);background:var(--inset);border:1px solid var(--line-2); border-radius:7px;padding:5px 12px;white-space:nowrap} .rr-preset.on{border-color:var(--accent);color:var(--accent-2);background:var(--accent-soft)} .rr-slot{display:grid;grid-template-columns:118px 1fr;align-items:center;gap:12px;margin-top:9px} .rr-slot-l{font-size:12.5px;color:var(--ink-3);text-align:right;white-space:nowrap} .rr-select{display:flex;align-items:center;justify-content:space-between;gap:10px; background:var(--inset);border:1px solid var(--line-2);border-radius:9px;padding:9px 12px; font-size:13.5px;color:var(--ink)} .rr-select:after{content:"";width:7px;height:7px;border-right:1.5px solid var(--ink-3); border-bottom:1.5px solid var(--ink-3);transform:rotate(45deg) translateY(-2px);flex:none} .rr-order{margin-top:14px;font-size:11.5px;line-height:1.7;color:var(--ink-3); overflow-x:auto;white-space:nowrap;padding-bottom:2px} .rr-fig figcaption{margin-top:14px;font-size:13px;line-height:1.65;color:var(--ink-3);max-width:78ch} @media(max-width:700px){ .rr-slot{grid-template-columns:1fr;gap:5px} .rr-slot-l{text-align:left} .rr-row,.rr-row-compact{padding-left:16px;padding-right:16px} .rr-row-compact{flex-wrap:wrap} }