/* Generated by scripts/render_brand_sites.py for brand profile paniris. Do not edit. */

@font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/outfit-latin-ext.0f53d1c03b.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/outfit-latin.6c18d579fd.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --cu-cobalt: #101827;
  --cu-azure: #9BFF53;
  --cu-ink: #101827;
  --cu-cobalt-050: rgba(16, 24, 39, 0.05);
  --cu-cobalt-100: rgba(16, 24, 39, 0.14);
  --cu-cobalt-200: rgba(16, 24, 39, 0.24);
  --cu-cobalt-300: rgba(16, 24, 39, 0.3);
  --cu-cobalt-400: #4B5461;
  --cu-cobalt-500: #101827;
  --cu-cobalt-600: #313845;
  --cu-cobalt-700: #4E545F;
  --cu-azure-050: rgba(16, 24, 39, 0.035);
  --cu-azure-100: #B5ABDF;
  --cu-azure-200: #D0C5FD;
  --cu-azure-300: #D0C5FD;
  --cu-azure-400: #9BFF53;
  --cu-azure-500: #5B45B8;
  --cu-azure-600: #5B45B8;
  --cu-ink-050: #E6E4DC;
  --cu-ink-100: rgba(16, 24, 39, 0.28);
  --cu-ink-200: #98A0AE;
  --cu-ink-300: #4B5461;
  --cu-ink-400: #232D40;
  --cu-ink-500: #101827;
  --cu-ink-600: #0C121E;
  --cu-ink-700: #05080F;
  --cu-white: #FFFFFF;
  --cu-paper: #F4F3EE;
  --cu-fog: #E6E4DC;
  --cu-mist: rgba(16,24,39,0.12);
  --cu-silver: rgba(16, 24, 39, 0.28);
  --cu-slate: #4B5461;
  --cu-graphite: #2B3341;
  --cu-obsidian: #0C121E;
  --cu-success: #1E7A4F;
  --cu-success-bg: #E4EFEA;
  --cu-warning: #94560A;
  --cu-warning-bg: #F1E9DF;
  --cu-danger: #C2292F;
  --cu-danger-bg: #F8E7E8;
  --cu-info: #5B45B8;
  --cu-info-bg: rgba(16, 24, 39, 0.035);
  --brand-on-ink: #F4F3EE;
  --brand-on-ink-muted: #98A0AE;
  --brand-ink-raised: #1A2333;
  --brand-ink-border: rgba(244,243,238,0.14);
  --brand-ink-border-strong: rgba(244, 243, 238, 0.35);
  --brand-light-1: #9BFF53;
  --brand-light-2: #D0C5FD;
  --brand-link: #5B45B8;
  --brand-link-hover: #483A94;
  --brand-focus: #5B45B8;
  --brand-focus-on-ink: #9BFF53;
  --brand-on-action: #F4F3EE;
  --brand-success-on-ink: #3DD68C;
  --brand-warning-on-ink: #F5B84A;
  --brand-danger-on-ink: #FF6B6B;
  --brand-ink-selected: rgba(244, 243, 238, 0.10);
  --brand-action-on-ink-hover: #D5D6D4;
  --cu-ink-rgb: 16, 24, 39;
  --fg-1: var(--cu-ink); --fg-2: var(--cu-graphite); --fg-3: var(--cu-slate);
  --fg-mute: var(--cu-silver); --fg-on-dark: var(--brand-on-ink);
  --fg-link: var(--brand-link); --fg-link-hover: var(--brand-link-hover);
  --bg-1: var(--cu-white); --bg-2: var(--cu-paper); --bg-3: var(--cu-fog);
  --bg-inverse: var(--cu-ink); --bg-inverse-2: var(--cu-obsidian);
  --border-1: var(--cu-mist); --border-2: var(--cu-silver); --border-focus: var(--brand-focus);
  --accent-1: var(--cu-cobalt); --accent-2: var(--brand-light-2);
  --s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;
  --s-16: 64px; --s-20: 80px; --s-24: 96px;
  --r-xs: 6px;
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-pill: 999px;
  --r-circle: 50%;
  --shadow-xs: 0 1px 2px rgba(16, 24, 39, 0.08);
  --shadow-sm: 0 1px 2px rgba(16, 24, 39, 0.08);
  --shadow-md: 0 12px 32px -18px rgba(16, 24, 39, 0.4);
  --shadow-lg: 0 24px 64px -24px rgba(16, 24, 39, 0.5);
  --shadow-glow: 0 0 0 2px var(--brand-focus);
  --shadow-glow-danger: 0 0 0 3px var(--cu-danger-bg);
  --dur-fast: 100ms;
  --dur-base: 180ms;
  --dur-slow: 260ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.25, 1);
  --font-display: "Outfit", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-sans: "Outfit", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, monospace;
  --fs-11: 0.6875rem; --fs-12: 0.75rem; --fs-13: 0.8125rem; --fs-14: 0.875rem;
  --fs-15: 0.9375rem; --fs-16: 1rem; --fs-18: 1.125rem; --fs-20: 1.25rem;
  --fs-24: 1.5rem; --fs-30: 1.875rem; --fs-36: 2.25rem; --fs-48: 3rem; --fs-60: 3.75rem;
  --lh-tight: 1.05; --lh-snug: 1.2; --lh-base: 1.5; --lh-loose: 1.65;
  --ls-tight: -0.03em; --ls-snug: -0.01em; --ls-base: 0;
  --ls-wide: 0.04em; --ls-eyebrow: 0.1em;
  --text-display: 56px;
  --text-display-lh: 1;
  --text-title: 36px;
  --text-title-lh: 1.1;
  --text-subtitle: 24px;
  --text-subtitle-lh: 1.25;
  --text-body: 18px;
  --text-body-lh: 1.55;
}

/* =========================================================
   Site skin for profile-generated looks (#4095)
   ---------------------------------------------------------
   scripts/render_brand_sites.py appends this file to the token
   sheet it generates for every brand except the one the sites
   are authored in (cudator, whose committed styles/cudator.css
   is published unchanged). It restyles what styles/marketing.css
   and the page <style> blocks paint with literal colours, using
   only the generated variables, so it carries no brand value.

   Rules start with :root so they outrank the same selector in
   marketing.css and the page styles whatever the load order.
   !important appears only where a page sets the colour in a
   style attribute.

   Light accents (--brand-light-1, --brand-light-2) appear only as
   dots, lines and text on ink, never as a fill.
   ========================================================= */

/* ---------- Base element defaults (as in styles/cudator.css) ---------- */
* { box-sizing: border-box; }
html { color: var(--fg-1); background: var(--bg-2); }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-14);
  line-height: var(--lh-base);
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--fg-1);
  margin: 0;
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--fg-3);
}
code, kbd, samp, pre { font-family: var(--font-mono); }
.mono { font-family: var(--font-mono); font-feature-settings: 'tnum' 1; }
.tnum { font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums; }
a { color: var(--fg-link); text-decoration: none; }

:root ::selection { background: var(--cu-fog); color: var(--cu-ink); }
:root *:focus-visible {
  outline: var(--brand-focus-width, 2px) solid var(--brand-focus);
  outline-offset: 3px;
  box-shadow: none;
  border-radius: var(--r-xs);
}
:root :is(.hero, .on-dark, .sovereign, .cta-band, .footer, .reg-hero) *:focus-visible { outline-color: var(--brand-focus-on-ink); }

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--cu-silver); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- Type: the guide's marketing scale, medium weight ---------- */
:root :is(h1, h2, h3, h4, h5, .h-display) { font-weight: 500; }
:root :is(.stat .big, .inv-total .big, .stier .tp .amt, .quote blockquote) { font-weight: 500; }
:root .hero h1 {
  font-weight: 500;
  font-size: clamp(40px, 5vw, var(--text-display));
  line-height: var(--text-display-lh);
  letter-spacing: -0.035em;
}
:root .section-head h2 {
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, var(--text-title));
  line-height: var(--text-title-lh);
  letter-spacing: -0.03em;
}
:root .cta-band h2 { font-weight: 500; letter-spacing: -0.03em; }
:root :is(.section-head p, .hero-sub, .cta-band p:not(.note)) {
  font-size: var(--text-body);
  line-height: var(--text-body-lh);
}
:root .eyebrow::before { background: var(--cu-ink); }
:root :is(.hero, .on-dark, .sovereign, .cta-band) .eyebrow { color: var(--brand-light-2); }
:root :is(.hero, .on-dark, .sovereign, .cta-band) .eyebrow::before { background: var(--brand-light-1); }

/* ---------- Brand lockup ---------- */
:root .brand { gap: 9px; }
:root .brand .brand-lockup { display: block; color: var(--cu-ink); }
:root .footer .brand .brand-lockup { color: var(--brand-on-ink); }

/* ---------- Buttons: pill, ink on light, paper on ink ---------- */
:root .btn { border-radius: var(--r-pill); font-weight: 500; }
:root .btn-primary { background: var(--cu-cobalt); color: var(--brand-on-action); box-shadow: none; }
:root .btn-primary:hover { background: var(--cu-cobalt-600); box-shadow: none; }
:root .btn-ghost:hover { color: var(--cu-ink); border-color: var(--cu-cobalt-300); }
:root :is(.hero, .on-dark, .sovereign, .cta-band) .btn-primary { background: var(--brand-on-ink); color: var(--cu-ink); }
:root :is(.hero, .on-dark, .sovereign, .cta-band) .btn-primary:hover { background: var(--brand-action-on-ink-hover); }
:root :is(.hero, .on-dark, .sovereign, .cta-band) .btn-ghost { color: var(--brand-on-ink); border-color: var(--brand-ink-border-strong); }
:root :is(.hero, .on-dark, .sovereign, .cta-band) .btn-ghost:hover { color: var(--brand-on-ink); border-color: var(--brand-on-ink-muted); background: var(--brand-ink-selected); }

/* ---------- Header ---------- */
:root .site-header { background: color-mix(in srgb, var(--cu-paper) 86%, transparent); }

/* ---------- Ink bands: flat ink, no coloured glow ---------- */
:root :is(.hero, .sovereign, .cta-band) { background: var(--cu-ink); color: var(--brand-on-ink); }
:root .hero-badge { color: var(--brand-on-ink); background: transparent; border-color: var(--brand-ink-border-strong); }
:root .hero-badge .dot { background: var(--brand-light-1); box-shadow: none; }
:root .hero h1 .accent { background: none; -webkit-text-fill-color: currentColor; color: var(--brand-light-1); }
:root .hero-meta { color: var(--brand-on-ink-muted); }
:root .hero-sub { color: var(--brand-on-ink-muted); }

/* hero router diagram (inline SVG painted with the source palette) */
:root .router { background: var(--brand-ink-raised); border-color: var(--brand-ink-border); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
:root .router-svg { color: var(--brand-on-ink); }
:root .router-svg [stroke="#33406B"] { stroke: var(--brand-ink-border-strong); }
:root .router-svg [stroke="#2B59E0"] { stroke: var(--brand-light-2); }
:root .router-svg :is([fill="#0A0E20"], [fill="#11173A"], [fill="#10183C"]) { fill: var(--cu-ink); }
:root .router-svg :is([fill="#8E97B6"], [fill="#9298B6"]) { fill: var(--brand-on-ink-muted); }
:root .router-svg [fill="#D6DEF8"] { fill: var(--brand-on-ink); }
:root .router-svg [stop-color="#2B59E0"] { stop-color: var(--brand-light-2); }
:root .router-svg [stop-color="#29A7F0"] { stop-color: var(--brand-light-1); }
:root .router-svg :is([fill="#29A7F0"], [fill="#5FC1F5"]) { fill: var(--brand-light-1); }

/* ---------- Sovereign band ---------- */
:root .sov-list .ico { background: transparent; border-color: var(--brand-ink-border-strong); color: var(--brand-light-2); }
:root .sov-panel { background: var(--brand-ink-raised); border-color: var(--brand-ink-border); box-shadow: none; }
:root .sov-row { background: var(--cu-ink); }
:root .sov-panel-head .lock { background: transparent; border-color: var(--brand-ink-border-strong); color: var(--brand-success-on-ink); }
:root .sov-row .v.ok { color: var(--brand-success-on-ink); }

/* ---------- Code ---------- */
:root .code-card { background: var(--cu-ink); border-color: var(--brand-ink-border); box-shadow: none; }
:root .code-card code { color: var(--brand-on-ink); }
:root .tk-com { color: var(--brand-on-ink-muted); }
:root .tk-key { color: var(--brand-light-2); }
:root .tk-str { color: var(--brand-light-1); }
:root .tk-fn { color: var(--brand-light-2); }
:root .tk-num { color: var(--brand-warning-on-ink); }
:root .tk-hl { color: var(--brand-on-ink); background: var(--brand-ink-selected); }

/* ---------- Cards and chips ---------- */
:root :is(.pillar, .feat, .stier, .invoice) { box-shadow: none; }
:root :is(.pillar, .feat, .stier):hover { box-shadow: none; }
:root .stier.feat-tier { border-color: var(--cu-ink); box-shadow: none; }
:root .cc { background: var(--cu-ink) !important; color: var(--brand-on-ink); }
:root .quote .av { background: var(--cu-ink) !important; color: var(--brand-on-ink); }
:root .footer-bottom .pill .ld { box-shadow: none; }
:root .footer-col h5 { color: var(--brand-on-ink-muted); }
:root .side-search .kbd { color: var(--cu-slate); }

/* ---------- Chat previews (welcome, docs) ---------- */
:root :is(.cprev-head .lg, .demo-head .lg) { background: var(--cu-ink); color: var(--brand-on-ink); }
:root :is(.cmsg.b .av, .dmsg.b .av) { background: var(--cu-ink); color: var(--brand-on-ink); }
:root :is(.cmsg.u .bubble, .dmsg.u .bubble) { background: var(--cu-fog); color: var(--cu-ink); border-color: var(--cu-fog); }
:root .cprev-composer .send { background: var(--cu-ink); color: var(--brand-light-1); border-radius: var(--r-pill); }
:root .cprev { border-color: var(--brand-ink-border); box-shadow: none; }
:root .prod-eyebrow .pd { background: var(--cu-ink); }
:root :is(.hero, .on-dark, .sovereign, .cta-band) .prod-eyebrow .pd { background: var(--brand-light-1); }

/* ---------- Page heroes and plates on ink (pricing, register, models, enterprise) ---------- */
:root :is(.reg-plate, .models-hero) { background: var(--cu-ink); color: var(--brand-on-ink); }
:root :is(.hero, .reg-plate, .models-hero) .accent { background: none; -webkit-text-fill-color: currentColor; color: var(--brand-light-1); }
:root :is(.hero h1, .plate-h, .models-hero h1, .cmp-hero h1, .pr-hero h1) { font-weight: 500; }
:root .pr-hero .soon { color: var(--brand-on-ink); background: transparent; border-color: var(--brand-ink-border-strong); }
:root .plate-list .ico { background: transparent; border-color: var(--brand-ink-border-strong); color: var(--brand-light-2); }
:root .mh-stat { background: var(--cu-ink); }
:root .dw-code { background: var(--cu-ink); border-color: var(--brand-ink-border); }
:root .dw-code pre { color: var(--brand-on-ink); }
:root :is(.code-card, .dw-code) .tk-com { color: var(--brand-on-ink-muted); }
:root :is(.code-card, .dw-code) :is(.tk-key, .tk-fn) { color: var(--brand-light-2); }
:root :is(.code-card, .dw-code) .tk-str { color: var(--brand-light-1); }
:root :is(.code-card, .dw-code) .tk-hl { color: var(--brand-on-ink); background: var(--brand-ink-selected); }

/* comparison matrix (sites/com/styles/compare.css) */
:root .cmp-legend .dot { box-shadow: none; }
:root .cmp-legend .dot.ok { background: var(--brand-success-on-ink); }
:root .cmp-legend .dot.warn { background: var(--brand-warning-on-ink); }
:root .cmp-legend .dot.risk { background: var(--brand-danger-on-ink); }
:root .mx-head .col-host { background: var(--cu-ink); }
:root .mx-head .col-cud { background: var(--brand-ink-raised); box-shadow: inset 0 3px 0 var(--brand-light-1); }
:root .mx-head :is(.col-host, .col-cud) .ttl .mx-badge { color: var(--brand-on-ink); background: transparent; border-color: var(--brand-ink-border-strong); }
:root .mx-head .col-cud .ttl .mx-badge { color: var(--brand-light-1); border-color: var(--brand-light-1); }
:root .mx-row:nth-child(even) .mx-cell:not(.mx-dim) { background: var(--cu-white); }
:root .mx-cell.col-host-body { background: var(--cu-white) !important; }
:root .mx-cell.col-cud-body { background: var(--cu-paper) !important; border-left-color: var(--cu-ink); }
:root :is(.verdict.api, .mx-cell .st.warn) { color: var(--cu-warning); }

/* ---------- Cookie notice (sites/_shared/cookie-consent.js, on ink) ---------- */
:root .cc-title { font-weight: 500; }
:root .cc-btn { background: var(--brand-on-ink); color: var(--cu-ink); border-radius: var(--r-pill); font-weight: 500; }
:root .cc-btn:hover { background: var(--brand-action-on-ink-hover); }
:root .cc-notice :focus-visible { outline-color: var(--brand-focus-on-ink); }

/* ---------- Narrow screens: the header row fits at 390 px ---------- */
@media (max-width: 560px) {
  :root .site-header .container { gap: 10px; }
  :root .site-header .brand-lockup { height: 24px; width: auto; }
  :root .site-header .header-right { gap: 6px; }
  :root .site-header .header-right .btn { padding: 9px 12px; font-size: var(--fs-14); }
  :root .site-header .header-right .btn .arrow { display: none; }
  :root .ptable { display: block; overflow-x: auto; }
  :root .site-header .plat-badge { margin-left: 6px; padding: 3px 7px; }
}