/* RobosizeME design tokens: CSS custom properties with the names used on www.robosize.me.
   Source: site.css + theme.css (theme wins). Load before any component CSS.
   Flat "print / docs" theme at the bottom: add data-theme="print" to <html> or print the page. */

@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-Medium.woff2") format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-Bold.woff2") format("woff2"); font-weight: 700 800; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-Black.woff2") format("woff2"); font-weight: 900; font-display: swap; }

:root {
  /* brand */
  --mint: #00CCA1;
  --black: #000000;
  --white: #FFFFFF;
  --mint-hi: #2BE3B8;
  --mint-deep: #00A383;
  --mint-ink: #007A61;
  --mint-soft: #E3F7F0;
  --mint-soft-site: #E6FAF4;
  --mint-200: #A7EEDA;
  --ground: #E9EDEC;
  --ground-2: #F2F4F3;
  --bay: #DCE2E0;
  --field: #F4F6F5;
  --footer-bg: #DFE4E2;
  --seg-track: #E1E6E4;
  --table-head: #F4F7F6;
  --header-bg: rgba(236,240,239,.84);
  --porcelain-top: #FFFFFF;
  --porcelain-mid: #F6F8F7;
  --porcelain-end: #EFF2F1;
  --ink: #0B1110;
  --ink-2: #3A4441;
  --ink-3: #66716D;
  --line: #D3DAD8;
  --crumb-sep: #A4AEAB;
  --stat-rule: #C6CFCC;
  --graphite-top: #2C3533;
  --graphite-mid: #1B2120;
  --graphite-end: #121716;
  --on-graphite-2: #B3BEBA;
  --on-graphite-3: #8A9793;
  --mint-glow-text: #7CF5D6;
  --kpi-glow-text: #8FFBE0;
  --on-mint: #00140F;
  --keycap-mint-top: #3DEBC3;
  --keycap-mint-mid: #10D3A8;
  --keycap-mint-end: #00C29A;
  --keycap-mint-edge: #009C7B;
  --keycap-light-mid: #F3F6F5;
  --keycap-light-end: #E7ECEA;
  --keycap-light-edge: #BCC6C3;
  --switch-on-a: #00B48F;
  --switch-on-b: #19DDB0;
  --switch-off-a: #C9D1CE;
  --switch-off-b: #DCE2E0;
  --badge-self-bg: #EAF0FB;
  --badge-self-text: #2A4A8F;
  --badge-ready-bg: #EEF1F0;
  --tag-rule-bg: #E8EEF8;
  --tag-rule-text: #2C4F86;
  --tag-human-bg: #FBF1DC;
  --tag-human-text: #7A5410;
  --badge-next-bg: #FFF4D6;
  --badge-next-text: #7A5200;
  --wait: #F2C66B;
  --error: #A33A1E;
  --announce-top: #2BE3B8;
  --announce-end: #00C49B;
  --focus: var(--mint-ink);
  /* type */
  --font-sans: "Satoshi", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font: var(--font-sans); --mono: var(--font-mono);
  /* layout */
  --max-width: 1200px;
  --gutter: 24px;
  --section-y: 112px;
  --section-y-tight: 72px;
  --section-y-tablet: 84px;
  --section-y-phone: 64px;
  --section-y-tight-phone: 44px;
  --section-head-max: 780px;
  --lead-max: 720px;
  --split-gap: 64px;
  --grid-gap: 18px;
  --btn-row-gap: 12px;
  --header-h: 72px;
  --article-max: 760px;
  --max: var(--max-width);
  /* spacing, 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-13: 52px;
  --space-14: 56px;
  --space-15: 60px;
  --space-16: 64px;
  --space-17: 68px;
  --space-18: 72px;
  --space-19: 76px;
  --space-20: 80px;
  --space-21: 84px;
  --space-22: 88px;
  --space-23: 92px;
  --space-24: 96px;
  --space-25: 100px;
  --space-26: 104px;
  --space-27: 108px;
  --space-28: 112px;
  --space-29: 116px;
  --space-30: 120px;
  /* radius */
  --radius-card: 20px;
  --radius-btn: 14px;
  --radius-btn-sm: 12px;
  --radius-input: 12px;
  --radius-nav: 10px;
  --radius-eyebrow: 9px;
  --radius-checkbox: 7px;
  --radius-pill: 999px;
  --radius-faq: 16px;
  --radius-drop: 18px;
  --radius-quote: 22px;
  --radius-mock: 26px;
  --radius-board: 28px;
  --radius-trial: 32px;
  --radius-focus: 6px;
  --radius: var(--radius-card);
  /* elevation */
  --raise-sm: inset 0 1px 0 #fff, 0 0 0 1px rgba(20,40,34,.08), 0 1px 1px rgba(20,40,34,.08), 0 4px 10px -4px rgba(20,40,34,.18);
  --raise: inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(20,40,34,.05), 0 0 0 1px rgba(20,40,34,.07), 0 1px 1px rgba(20,40,34,.06), 0 3px 6px -2px rgba(20,40,34,.08), 0 14px 28px -12px rgba(20,40,34,.18), 0 30px 60px -30px rgba(20,40,34,.22);
  --raise-hi: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(20,40,34,.05), 0 0 0 1px rgba(20,40,34,.07), 0 2px 2px rgba(20,40,34,.06), 0 8px 14px -4px rgba(20,40,34,.12), 0 30px 50px -18px rgba(20,40,34,.3);
  --well: inset 0 2px 5px rgba(20,40,34,.13), inset 0 1px 1px rgba(20,40,34,.12), inset 0 0 0 1px rgba(20,40,34,.05), 0 1px 0 rgba(255,255,255,.95);
  --led-glow: 0 0 0 1px rgba(0,110,85,.35), 0 0 6px 1px rgba(0,204,161,.75), 0 0 16px 2px rgba(0,204,161,.35);
  --groove: 0 1px 0 rgba(255,255,255,.9);
  --focus-ring-field: 0 0 0 3px rgba(0,204,161,.35);
  /* surfaces and gradients */
  --porcelain: linear-gradient(180deg, #FFFFFF 0%, #F6F8F7 60%, #EFF2F1 100%);
  --graphite: linear-gradient(180deg, #2C3533 0%, #1B2120 55%, #121716 100%);
  --keycap-mint-gradient: linear-gradient(180deg, #3DEBC3 0%, #10D3A8 45%, #00C29A 100%);
  --keycap-light-gradient: linear-gradient(180deg, #FFFFFF 0%, #F3F6F5 55%, #E7ECEA 100%);
  --switch-on-gradient: linear-gradient(180deg, #00B48F, #19DDB0);
  --switch-off-gradient: linear-gradient(180deg, #C9D1CE, #DCE2E0);
  --announce-gradient: linear-gradient(180deg, #2BE3B8, #00C49B);
  --led: radial-gradient(circle at 38% 32%, #E6FFF7 0 14%, #3CF0C4 32%, #00CCA1 58%, #009274 100%);
  --led-off: radial-gradient(circle at 38% 32%, #FFFFFF 0 12%, #CBD3D0 40%, #A8B2AF 100%);
  --screw: radial-gradient(circle at 40% 35%, #FFFFFF 0 1px, #C3CBC8 2px 3px, #8E9996 3.6px, transparent 4.2px);
  --dots: radial-gradient(circle, rgba(20,40,34,.11) 1.1px, transparent 1.6px);
  --knob: radial-gradient(circle at 45% 30%, #FFFFFF 0 25%, #EEF2F1 55%, #C8D0CD 100%);
  --flap-counter: linear-gradient(180deg, #303A38 0%, #222A29 49.6%, #0D1110 49.6%, #0D1110 50.4%, #1C2322 50.4%, #141918 100%);
  --metal: repeating-linear-gradient(90deg, rgba(255,255,255,0) 0 1px, rgba(255,255,255,.35) 1px 2px, rgba(20,40,34,.025) 2px 3px), linear-gradient(180deg, #FAFBFB 0%, #E3E8E6 55%, #D6DDDA 100%);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-knob: cubic-bezier(.5,1.6,.4,1);
  --duration-btn: .12s;
  --duration-card: .25s;
  --duration-switch: .3s;
  --duration-arrow: .2s;
  --duration-reveal: .8s;
  --duration-reveal-reduced: .7s;
  --stagger-step: .07s;
  --marquee-logos: 60s;
  --marquee-ticker: 90s;
  --marquee-reduced: 120s;
  --lift-card: -3px;
  --lift-btn: -1px;
  --press-btn: 3px;
  --count-up: 1.6s;
  /* sizes */
  --led-size: 9px;
  --led-eyebrow: 8px;
  --led-badge: 7px;
  --switch-w: 42px;
  --switch-h: 24px;
  --switch-auto-w: 38px;
  --switch-auto-h: 22px;
  --checkbox: 22px;
  --touch-min: 44px;
  --logo-h: 30px;
  --step-num: 40px;
  --faq-plus: 30px;
  --quote-photo: 56px;
  --q-nav: 44px;
  --big-switch-w: 156px;
  /* breakpoints (for reference; media queries cannot read custom properties) */
  --bp-trial-btn: 1240px;
  --bp-nav: 1080px;
  --bp-grid: 1000px;
  --bp-hero: 980px;
  --bp-split: 900px;
  --bp-tablet: 760px;
  --bp-cards: 680px;
  --bp-form: 600px;
  --bp-phone: 560px;
  --bp-head-btn: 520px;
  --bp-btn-full: 480px;
  --bp-tiny: 359px;
}

/* ---------- flat print / docs theme: no shadows, no gradients, no textures ---------- */
[data-theme="print"] {
  --porcelain: #FFFFFF; --graphite: #1B2120; --keycap-mint-gradient: #00CCA1; --keycap-light-gradient: #FFFFFF;
  --switch-on-gradient: #00CCA1; --switch-off-gradient: #D3DAD8; --announce-gradient: #00CCA1;
  --led: #00CCA1; --led-off: #D3DAD8; --knob: #FFFFFF; --flap-counter: #1B2120; --screw: none; --dots: none; --metal: #F2F4F3; --noise: none;
  --raise: none; --raise-sm: none; --raise-hi: none; --well: inset 0 0 0 1px #D3DAD8; --led-glow: none; --groove: none; --focus-ring-field: 0 0 0 2px #007A61;
  --ground: #FFFFFF; --ground-2: #F2F4F3; --bay: #F2F4F3; --field: #FFFFFF; --header-bg: #FFFFFF; --footer-bg: #FFFFFF; --seg-track: #F2F4F3; --table-head: #F2F4F3;
  --duration-btn: 0s; --duration-card: 0s; --duration-reveal: 0s; --duration-switch: 0s; --lift-card: 0; --lift-btn: 0; --press-btn: 0;
}
@media print {
  :root {
    --porcelain: #FFFFFF; --graphite: #1B2120; --keycap-mint-gradient: #00CCA1; --keycap-light-gradient: #FFFFFF;
    --switch-on-gradient: #00CCA1; --switch-off-gradient: #D3DAD8; --announce-gradient: #00CCA1;
    --led: #00CCA1; --led-off: #D3DAD8; --knob: #FFFFFF; --flap-counter: #1B2120; --screw: none; --dots: none; --metal: #F2F4F3; --noise: none;
    --raise: none; --raise-sm: none; --raise-hi: none; --well: inset 0 0 0 1px #D3DAD8; --led-glow: none; --groove: none; --focus-ring-field: 0 0 0 2px #007A61;
    --ground: #FFFFFF; --ground-2: #F2F4F3; --bay: #F2F4F3; --field: #FFFFFF; --header-bg: #FFFFFF; --footer-bg: #FFFFFF; --seg-track: #F2F4F3; --table-head: #F2F4F3;
    --duration-btn: 0s; --duration-card: 0s; --duration-reveal: 0s; --duration-switch: 0s; --lift-card: 0; --lift-btn: 0; --press-btn: 0;
  }
}