/* Webfonts — Google Fonts hosted (no font binaries were provided).
   Inter is specified by the logo + website spec §5.2.
   IBM Plex Mono is the data/mono face used in Wattline. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
:root{
/* Brand core — from cuebit-website-spec-v1 §5.1, matches logo files */
--ink:#101722;
--navy:#0F2A43;
--teal:#17B0A6;
--teal-tint:#EAF7F6;
--teal-deep:#106E68;
--amber:#E0A82E;
--grey:#B9C4CE;
--muted:#5A6B7C;
--paper:#FDFDFC;
--white:#FFFFFF;
/* Product accents — each product page keeps navy/paper base + one accent */
--accent-docketflow:#E0A82E;
--accent-wattline:#17B0A6;
--accent-resona:#E2725B;
--accent-kayeli:#4C6FBF;
--accent-secondbrain:#7B5EA7;
/* Semantic aliases */
--text-body:var(--ink);
--text-heading:var(--navy);
--text-muted:var(--muted);
--text-on-dark:var(--paper);
--text-on-teal-tint:var(--teal-deep);
--surface-page:var(--paper);
--surface-card:var(--white);
--surface-band-tint:var(--teal-tint);
--surface-band-dark:var(--navy);
--border-rule:var(--grey);
--border-card:#DDE4EA;
--link:var(--teal-deep);
--link-hover:var(--teal);
--cta:var(--teal);
--cta-hover:#129A91;
--highlight:var(--amber);
/* Status chips (§5.7) */
--status-available-bg:var(--navy);
--status-available-fg:var(--white);
--status-early-fg:var(--teal-deep);
--status-early-border:var(--teal);
--status-pilot-fg:#9A7218;
--status-pilot-border:var(--amber);
--status-design-fg:var(--muted);
--status-design-border:var(--grey);
}
:root{
--font-sans:'Inter',system-ui,-apple-system,sans-serif;
--font-mono:'IBM Plex Mono',ui-monospace,monospace;
/* Desktop scale 64/44/32/24/20/17/14 (§5.2); mobile fluid to 40/32/24/20/17/16/13 */
--fs-display:clamp(40px,5vw,64px); /* @kind font */
--fs-h1:clamp(32px,3.4vw,44px); /* @kind font */
--fs-h2:clamp(24px,2.5vw,32px); /* @kind font */
--fs-h3:clamp(20px,1.9vw,24px); /* @kind font */
--fs-lead:clamp(17px,1.6vw,20px); /* @kind font */
--fs-body:17px; /* @kind font */
--fs-small:14px; /* @kind font */
--fw-heading:600; /* @kind font */
--fw-body:400; /* @kind font */
--fw-medium:500; /* @kind font */
--ls-heading:-0.02em; /* @kind font */
--lh-heading:1.1; /* @kind font */
--lh-body:1.6; /* @kind font */
--measure:65ch; /* @kind other */
}
body{font-family:var(--font-sans);font-size:var(--fs-body);font-weight:var(--fw-body);line-height:var(--lh-body);color:var(--text-body);background:var(--surface-page);margin:0;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-weight:var(--fw-heading);letter-spacing:var(--ls-heading);line-height:var(--lh-heading);color:var(--text-heading);margin:0}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover)}
.data,.tabular{font-variant-numeric:tabular-nums}
:root{
--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;--sp-9:96px;--sp-10:128px;
/* Layout (§5.3): 12-col grid, 1200 content, 1440 full-bleed bands */
--content-max:1200px;
--bleed-max:1440px;
--section-gap:96px;      /* 96–128 desktop, 64 mobile */
--section-gap-lg:128px;
--section-gap-mobile:64px;
/* Radii — marketing site is restrained; product UI rounder */
--r-chip:99px;
--r-btn:8px;
--r-card:12px;
--r-frame:10px;
/* Shadow — cards are border-first, shadow only on lift */
--shadow-card:0 1px 3px rgba(15,42,67,.06);
--shadow-lift:0 6px 18px rgba(15,42,67,.10);
/* Motion budget (§5.6): fade-and-rise 12px, 250ms ease-out, once */
--ease-out:cubic-bezier(.22,.61,.36,1); /* @kind other */
--dur:250ms; /* @kind other */
}