/* ============================================================ 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} /* hero proof strip — fills the space under the CTAs with the three numbers that matter most on this chapter */ .hproof{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px;padding-top:24px;border-top:1px solid var(--line)} .hproof-i{display:grid;gap:7px;align-content:start} .hproof-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-line)} .hproof-v{font-size:17.5px;font-weight:600;letter-spacing:-.02em;color:var(--ink);line-height:1.2} .hproof-k{font-size:12px;color:var(--ink-3);line-height:1.45} @media(max-width:620px){.hproof{grid-template-columns:1fr 1fr;gap:14px}} .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:1040px;margin:0 auto;padding:clamp(26px,4.2vh,64px) 32px clamp(22px,3.4vh,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:clamp(14px,2vh,24px)} .hhero h1{font-size:clamp(30px,3.6vw,46px);letter-spacing:-.028em;line-height:1.1;text-wrap:balance} .hhero-em{color:var(--accent)} .hhero .deck{max-width:68ch;margin:clamp(12px,1.8vh,20px) auto 0;font-size:clamp(15.5px,1.9vh,18px);line-height:1.6;color:var(--ink-2)} .hhero .cta-row{margin-top:clamp(16px,2.4vh,28px)} /* The hero must fit one screen: the routing diagram is the flexible element, sized from the viewport height so it is never cut off at the fold. The card's max-width is derived from that height and the diagram's own 440:265 viewBox aspect (1.6604), so the card hugs the svg exactly — capping height alone would letterbox the diagram inside a too-wide card. */ .hviz-card{--hviz-h:clamp(165px,32vh,340px);--hviz-h:clamp(165px,32svh,340px); margin:clamp(16px,2.4vh,42px) auto 0;padding:16px 18px 12px;text-align:left; max-width:min(100%,calc(var(--hviz-h) * 1.6604 + 36px))} .hviz svg{max-height:var(--hviz-h)} @media (max-height:860px){ .hhero h1{font-size:clamp(28px,3.2vw,41px)} .hhero-chip{margin-bottom:12px} .hviz-card{--hviz-h:clamp(155px,29vh,300px);--hviz-h:clamp(155px,29svh,300px)} /* Short laptop screens (1366x768 and friends): trim the type and the diagram a little more so the whole hero still clears the fold. Measured, not guessed — at 768 the untrimmed hero overshot by 7px. */ } /* Tall desktops have room to spare (166px of slack measured at 1920x1080), so let the diagram grow rather than leaving the space empty. */ @media (min-height:1000px){ .hviz-card{--hviz-h:clamp(165px,36vh,420px);--hviz-h:clamp(165px,36svh,420px)} } .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} /* Per-row delays are set INLINE in siteHomeVizSVG (site_home.go), not here: the six row s are children #12-#17 of the , so nth-child(1..6) would match nothing and every row would run at delay 0 — all six pulsing together instead of the highlight sweeping down the list. This bit us once already. */ @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} } /* =========================================================================== NeuroChat (chapter 04) — site_neurochat.go The two product screens are drawn as live markup rather than embedded as screenshots, same reasoning as the .rr-* Routing Rules illustration above: sharp at any zoom, follows the theme, readable to a crawler, a fraction of the bytes, and it cannot go stale against the product. Everything here is inert chrome — no inputs, no JS, the parent is aria-hidden. =========================================================================== */ .nc-fig{margin:0 0 26px} .nc-fig:last-child{margin-bottom:0} .nc-ui{display:grid;grid-template-columns:46px 232px 1fr;min-height:392px; border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);overflow:hidden} /* slim icon rail */ .nc-rail{display:flex;flex-direction:column;align-items:center;gap:12px;padding:14px 0; background:var(--inset);border-right:1px solid var(--line)} .nc-rail-i{color:var(--ink-3);display:grid;place-items:center;width:28px;height:28px;border-radius:8px} .nc-rail-i.on{color:var(--accent-2);background:var(--accent-soft)} /* conversation sidebar */ .nc-side{background:var(--inset);border-right:1px solid var(--line);padding:14px 12px;overflow:hidden} .nc-side-brand{padding:2px 6px 14px} .nc-side-brand img{height:20px;width:auto;max-width:100%;display:block;opacity:.92} /* The CloudWorx wordmark is a WHITE-INK asset — it is drawn for the product's own dark sidebar — so on a light page it washes out to a faint outline. It gets the dark chip it was designed for rather than a CSS filter: invert() would turn the red chevron cyan, and there is no dark-ink variant of the asset. This also happens to be truer to the product, whose sidebar is dark in either case. (The nav and footer carry the same asset and the same light-theme contrast limit; fixing those needs a dark-ink export, not CSS.) */ :root[data-theme="light"] .nc-side-brand{margin:0 0 8px;padding:7px 8px; background:#11141f;border-radius:9px;display:inline-block} :root[data-theme="light"] .nc-side-brand img{opacity:1} .nc-side-search{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:9px; color:var(--ink-3);font-size:13px;background:var(--surface);border:1px solid var(--line)} .nc-side-item{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:9px; color:var(--ink-2);font-size:13.5px;margin-top:8px} .nc-side-item.on{background:var(--accent-soft);color:var(--accent-2);font-weight:500} .nc-side-item svg,.nc-side-search svg,.nc-side-chat svg{flex:none} .nc-side-sec{display:flex;align-items:center;gap:6px;margin:16px 0 4px;padding:0 9px; font-size:12.5px;font-weight:500;color:var(--ink-2)} .nc-side-sec svg{color:var(--ink-3)} .nc-side-grp{padding:12px 9px 4px;font-size:11px;letter-spacing:.04em;color:var(--ink-3); font-family:var(--mono)} .nc-side-chat{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:8px; color:var(--ink-2);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .nc-side-chat span{overflow:hidden;text-overflow:ellipsis} /* main pane */ .nc-main{display:flex;flex-direction:column;padding:14px 18px 18px;min-width:0} /* composer screen */ .nc-topbar{display:flex;align-items:center;gap:10px} .nc-modelpill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:10px; background:var(--surface);border:1px solid var(--line-2);color:var(--ink);font-size:13.5px;font-weight:500} .nc-modelpill svg{color:var(--accent)} .nc-plus{display:grid;place-items:center;width:32px;height:32px;border-radius:10px; color:var(--ink-3);border:1px solid var(--line);background:var(--surface)} .nc-empty{flex:1;display:flex;align-items:center;justify-content:center;gap:14px;padding:26px 0} .nc-empty-ic{color:var(--accent);display:grid;place-items:center} .nc-empty-t{font-size:clamp(20px,2.6vw,30px);font-weight:600;letter-spacing:-.02em;color:var(--ink)} .nc-composer{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg); padding:14px 16px 11px} .nc-composer-ph{display:block;font-size:14px;color:var(--ink-3);padding-bottom:14px} .nc-composer-row{display:flex;align-items:center;gap:10px} .nc-cbtn{color:var(--ink-3);display:grid;place-items:center} .nc-cspace{flex:1} .nc-send{display:grid;place-items:center;width:30px;height:30px;border-radius:999px; background:var(--surface);border:1px solid var(--line-2);color:var(--ink-3)} /* agent marketplace screen */ .nc-mk-hd{text-align:center;padding:14px 0 16px} .nc-mk-t{font-size:clamp(20px,2.4vw,28px);font-weight:600;letter-spacing:-.02em;color:var(--ink)} .nc-mk-d{margin-top:6px;font-size:13.5px;color:var(--ink-2)} .nc-mk-search{display:flex;align-items:center;gap:10px} .nc-mk-input{flex:1;display:flex;align-items:center;gap:9px;padding:10px 14px;border-radius:11px; background:var(--surface);border:1px solid var(--line-2);color:var(--ink-3);font-size:13.5px;min-width:0} .nc-mk-shield{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;flex:none; background:var(--surface);border:1px solid var(--line-2);color:var(--ink-3)} .nc-chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:16px} .nc-chip{font-size:12.5px;color:var(--ink-2);background:var(--surface);border:1px solid var(--line); padding:6px 12px;border-radius:9px;white-space:nowrap} .nc-chip.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-2);font-weight:500} .nc-mk-sub{margin-top:20px;font-size:15px;font-weight:600;color:var(--ink)} .nc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-top:12px} .nc-card{display:flex;gap:12px;padding:16px;border-radius:var(--r-lg); background:var(--surface);border:1px solid var(--line)} .nc-card-ic{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center; background:var(--accent-soft);color:var(--accent)} .nc-card-body{min-width:0;flex:1} /* Title and tag share a row. The tag was originally pinned absolutely, which truncated the agent name under a long category like "Research & Development" — flex keeps them side by side at any label length. */ .nc-card-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:8px} .nc-card-tag{flex:none;font-size:10.5px;font-family:var(--mono); color:var(--ink-3);background:var(--inset);border:1px solid var(--line);padding:2px 7px;border-radius:999px} .nc-card-t{font-size:14px;font-weight:600;color:var(--ink);min-width:0} .nc-card-d{margin-top:5px;font-size:12.5px;line-height:1.55;color:var(--ink-2)} /* Below the sidebar's useful width the rail and conversation list are dropped rather than squeezed: the main pane is what carries the meaning, and a 3-column shell at phone width would be illegible in all three. */ @media(max-width:860px){ .nc-ui{grid-template-columns:1fr;min-height:0} .nc-rail,.nc-side{display:none} .nc-main{padding:14px} } /* --------------------------------------------------------------------------- Chapter 04 hero — the animated chat screen (siteNCHeroChat). It lives inside .fig, which is what gives it the card chrome AND the prefers-reduced-motion opt-out for free (site-motion.css turns off `.fig *` animations). Unlike the SVG chapter figures it carries text, so it is aria-hidden the same way the 04.2 illustrations are. --------------------------------------------------------------------------- */ .nch{padding:0;overflow:hidden} /* .fig svg is sized to fill (width:100%;height:auto) for the SVG chapter figures; these are small inline glyphs, so that has to be undone. ⚠ The selector must be .fig.nch svg, NOT .nch svg: `.fig svg` lives in site-motion.css, which loads AFTER this file, so at equal specificity it wins and the glyph renders at ~60px. Two classes beat one. */ .fig.nch svg{width:auto;height:auto;max-height:none;display:inline-block;flex:none} .nch-bar{display:flex;align-items:center;justify-content:space-between;gap:10px; padding:10px 13px;border-bottom:1px solid var(--line);background:var(--inset)} .nch-pill{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:9px; background:var(--surface);border:1px solid var(--line-2);color:var(--ink);font-size:12.5px;font-weight:500} .nch-pill svg{color:var(--accent)} .nch-status{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono); font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)} .nch-live{width:6px;height:6px;border-radius:999px;background:var(--pos);flex:none; animation:nchLive 2.6s ease-in-out infinite} @keyframes nchLive{0%,100%{opacity:1}50%{opacity:.3}} .nch-feed{display:flex;flex-direction:column;gap:10px;padding:14px 13px 4px} .nch-turn{display:flex;flex-direction:column;gap:6px;animation:nchTurn 11s ease-out infinite} .nch-user{align-items:flex-end} .nch-bot{align-items:flex-start} .nch-bub{max-width:84%;padding:8px 12px;border-radius:12px 12px 3px 12px; background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2); font-size:12.5px;line-height:1.45} /* The model chip: a coloured dot plus the model id. The colour is the only thing distinguishing the turns, so it comes from the data palette. */ .nch-chip{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:999px; font-family:var(--mono);font-size:10.5px;background:var(--inset);border:1px solid var(--line-2)} .nch-chip:before{content:"";width:6px;height:6px;border-radius:999px;background:currentColor;flex:none} .nch-c1{color:var(--d2)} .nch-c2{color:var(--accent-2)} /* The reply is a skeleton, never invented prose — see siteNCHeroChat. */ .nch-lines{display:flex;flex-direction:column;gap:5px;width:84%} .nch-lines i{display:block;height:7px;border-radius:4px;background:var(--surface-2)} .nch-foot{padding:4px 13px 13px} .nch-dots{display:inline-flex;gap:4px;padding:8px 11px;border-radius:12px 12px 12px 3px; background:var(--surface-2);border:1px solid var(--line)} .nch-dots i{width:5px;height:5px;border-radius:999px;background:var(--ink-3); animation:nchDot 1.4s ease-in-out infinite} /* :nth-child is safe HERE, and only here: these
are the sole children of .nch-dots. Everywhere else in this stylesheet a positional selector over non-first children is the documented hazard — see .hviz-row. */ .nch-dots i:nth-child(2){animation-delay:.18s} .nch-dots i:nth-child(3){animation-delay:.36s} @keyframes nchDot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-3px);opacity:1}} /* Starts AND ends on the visible resting state, like every other loop on this site: the turn clears and slides back in mid-cycle, so a frozen render (no frames at all, and therefore no animation) shows the whole conversation rather than a blank card. */ @keyframes nchTurn{ 0%,3%{opacity:1;transform:none} 6%{opacity:0;transform:translateY(9px)} 17%{opacity:1;transform:none} 100%{opacity:1;transform:none} } /* comparison matrix cells (04.3) */ .nc-cmp{min-width:680px} .nc-cmp td.cap{min-width:170px;white-space:nowrap} .nc-cmp td{font-size:13px;line-height:1.5;vertical-align:top;padding-top:12px;padding-bottom:12px} .nc-cell{display:flex;gap:9px;align-items:flex-start} /* No danger colour: this site's palette carries none (see the header note), so an absent capability is a hollow muted dot, not a red one. */ .nc-dot{flex:none;width:9px;height:9px;margin-top:5px;border-radius:999px; border:1.5px solid var(--ink-3);background:transparent} .nc-dot-y{background:var(--pos);border-color:var(--pos)} .nc-dot-p{background:var(--warn);border-color:var(--warn)} .nc-dot-s{background:var(--accent);border-color:var(--accent)} .nc-legend{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:14px} .nc-legend-i{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2)} .nc-legend-i .nc-dot{margin-top:0} /* roadmap rows (04.5) */ .nc-road{padding:6px 0} .nc-road-r{display:flex;gap:16px;align-items:flex-start;padding:16px 22px;border-bottom:1px solid var(--line)} .nc-road-r:last-child{border-bottom:none} .nc-road-r>.pill{flex:none;margin-top:2px;min-width:82px;justify-content:center} .nc-road-t{font-size:14.5px;font-weight:600;color:var(--ink)} .nc-road-d{margin-top:5px;font-size:13.5px;line-height:1.6;color:var(--ink-2)} @media(max-width:640px){ .nc-road-r{flex-direction:column;gap:9px;padding:16px} } /* .lnk — an inline text button that reads as a link. Used where a CTA sits mid-sentence and must open the lead form rather than navigate. */ .lnk{background:none;border:0;padding:0;font:inherit;color:var(--accent);cursor:pointer; text-decoration:underline;text-underline-offset:2px} .lnk:hover{color:var(--accent-2)}