/* ============================================================
   NEBULA — Marketing site design system
   Dark, space-forward. Matches the Nebula app login aesthetic.

   Single stylesheet for the whole site. Page-specific sections are
   grouped at the bottom; nothing lives in per-page <style> blocks,
   so a rule can never drift between pages.

   Fonts are self-hosted in assets/fonts — the site makes no
   third-party requests at all.
   ============================================================ */

/* ============================ FONTS ============================ */
/* Variable faces: one file per family covers every weight we use. */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("assets/fonts/schibsted-grotesk-latin.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;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("assets/fonts/schibsted-grotesk-latin-ext.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: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/jetbrains-mono-latin.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;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/jetbrains-mono-latin-ext.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;
}

/* ============================ TOKENS ============================ */
:root {
  /* Brand — Nebula spiral: teal -> indigo -> violet on deep space */
  --brand-teal: #2bc4bd;
  --brand-cyan: #56e3d8;
  --brand-violet: #7b61ff;
  --brand-indigo: #4f6bff;
  --brand-space: #0a1030;

  /* Space backgrounds (cool, near-black navy) */
  --space-0: #060a22;        /* deepest */
  --space-1: #0a1030;        /* brand space */
  --space-2: #0d1438;        /* section */
  --space-3: #111a47;        /* elevated */

  /* Surfaces — glass on space */
  --surface: rgba(255,255,255,0.035);
  --surface-2: rgba(255,255,255,0.06);
  --surface-3: rgba(255,255,255,0.09);
  --border: rgba(255,255,255,0.10);
  --border-2: rgba(255,255,255,0.16);
  --border-glow: rgba(123,97,255,0.35);

  /* alternating band */
  --band-bg: rgba(255,255,255,0.022);
  --band-border: rgba(255,255,255,0.06);

  /* Light section (for contrast moments) */
  --paper: #f4f5fb;
  --paper-2: #ffffff;
  --paper-border: oklch(0.9 0.006 264);
  --ink: oklch(0.22 0.012 266);
  --ink-2: oklch(0.42 0.012 266);
  --ink-3: oklch(0.56 0.01 266);

  /* Text on dark.
     --text-faint is 4.7:1 on --space-1; anything lighter fails WCAG AA
     for the small text it is used on (eyebrows, meta, captions). */
  --text: oklch(0.97 0.005 268);
  --text-2: rgba(255,255,255,0.70);
  --text-3: rgba(255,255,255,0.52);
  --text-faint: rgba(255,255,255,0.56);

  /* Accents */
  --accent: oklch(0.66 0.16 268);
  --accent-strong: oklch(0.72 0.15 268);
  --teal: oklch(0.78 0.12 192);
  --green: oklch(0.74 0.15 152);
  --amber: oklch(0.8 0.13 75);
  --red: oklch(0.66 0.2 22);
  --rec: #ff4d4d;

  /* Speaker palette */
  --spk-1: oklch(0.68 0.16 268);
  --spk-2: oklch(0.72 0.13 195);
  --spk-3: oklch(0.72 0.15 152);
  --spk-4: oklch(0.76 0.14 60);
  --spk-5: oklch(0.7 0.18 350);

  /* Gradients */
  --grad-brand: linear-gradient(100deg, var(--brand-violet), var(--brand-indigo) 52%, var(--brand-teal));
  --grad-text: linear-gradient(100deg, #c9b6ff, #8ea2ff 45%, var(--brand-cyan));
  --grad-soft: linear-gradient(135deg, rgba(123,97,255,0.18), rgba(43,196,189,0.12));

  /* Shadows / glow */
  --shadow-md: 0 8px 30px rgba(0,0,0,0.35);
  --shadow-lg: 0 24px 70px rgba(0,0,0,0.5);
  --glow-violet: 0 0 60px rgba(123,97,255,0.45);
  --glow-teal: 0 0 50px rgba(43,196,189,0.35);

  /* Radii */
  --r-sm: 9px; --r-md: 13px; --r-lg: 18px; --r-xl: 26px; --r-2xl: 34px; --r-pill: 999px;

  --maxw: 1240px;
  --nav-h: 74px;

  --font: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 20px); }

body {
  font-family: var(--font);
  background: var(--space-1);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv01";
  overflow-x: hidden;
}
::selection { background: rgba(123,97,255,0.4); color: #fff; }

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
.mono { font-family: var(--mono); font-feature-settings: "tnum"; }

/* Keyboard focus — one visible treatment everywhere */
:focus-visible {
  outline: 2px solid var(--brand-cyan);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible, .nav-burger:focus-visible { outline-offset: 3px; }

/* Skip link */
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--space-3); color: var(--text); padding: 11px 18px;
  border-radius: var(--r-sm); border: 1px solid var(--border-2); font-weight: 600; font-size: 14px;
  transition: top .18s ease;
}
.skip:focus { top: 16px; }

/* Scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.28); background-clip: content-box; }

/* ============================ PAGE BACKDROP ============================ */
.page-bg {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(1100px 700px at 78% -8%, rgba(123,97,255,0.18), transparent 60%),
    radial-gradient(900px 600px at 12% 4%, rgba(43,196,189,0.12), transparent 58%),
    linear-gradient(180deg, var(--space-0), var(--space-1) 36%, var(--space-1));
}
.page-bg::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 120px 80px, rgba(255,255,255,0.35), transparent),
    radial-gradient(1.4px 1.4px at 200px 160px, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 320px 60px, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 420px 200px, rgba(255,255,255,0.4), transparent);
  background-size: 480px 280px;
  opacity: 0.5;
}

/* ============================ LAYOUT ============================ */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.wrap-wide { max-width: 1240px; }
.wrap-narrow { max-width: 880px; }
section { position: relative; }
section[id] { scroll-margin-top: calc(var(--nav-h) + 20px); }
.section { padding: 88px 0; }
.section-sm { padding: 64px 0; }
@media (max-width: 760px) { .section { padding: 64px 0; } .wrap { padding: 0 20px; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3);
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 99px; background: var(--brand-cyan); box-shadow: 0 0 10px var(--brand-cyan); }

.section-head { max-width: 640px; }
.section-head.center { margin: 0 auto; text-align: center; }
.section-head h2 {
  font-size: clamp(28px, 4vw, 44px); font-weight: 800; line-height: 1.08;
  letter-spacing: -0.03em; margin-top: 16px; text-wrap: balance;
}
.section-head p { font-size: clamp(15px, 1.7vw, 18px); color: var(--text-2); margin-top: 16px; line-height: 1.6; }

.gt { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Shared page-hero scaffolding (every inner page) */
.page-hero { padding: calc(var(--nav-h) + 72px) 0 40px; overflow: hidden; }
.page-h1 {
  font-size: clamp(36px, 5.4vw, 60px); font-weight: 800; line-height: 1.04;
  letter-spacing: -0.035em; margin-top: 20px; text-wrap: balance;
}
.page-lede { font-size: clamp(16px, 1.9vw, 19px); color: var(--text-2); margin: 20px auto 0; max-width: 620px; line-height: 1.6; }

/* Shared card typography */
.card-title { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin-top: 16px; }
.card-title.sm { font-size: 16px; margin-top: 13px; }
.card-body { font-size: 14.5px; color: var(--text-2); margin-top: 9px; line-height: 1.6; }
.card-body.sm { font-size: 13.5px; }

/* Shared feature-row typography */
.frow-h { font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; margin-top: 16px; text-wrap: balance; }
.frow-p { font-size: 16px; color: var(--text-2); margin-top: 16px; line-height: 1.65; }

/* Shared avatar chip */
.qa { width: 40px; height: 40px; border-radius: 99px; background: var(--grad-brand); display: grid; place-items: center; font-weight: 700; font-size: 14px; color: #fff; flex-shrink: 0; }
.qa.sm { width: 30px; height: 30px; font-size: 12px; }

/* ============================ PILL / BADGE ============================ */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.06); border: 1px solid var(--border-2);
  font-size: 12.5px; font-weight: 600; color: var(--text-2); white-space: nowrap;
}
.pill .dot { width: 7px; height: 7px; border-radius: 99px; background: var(--brand-cyan); box-shadow: 0 0 9px var(--brand-cyan); }
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700; letter-spacing: 0.01em;
}
.badge.violet { background: rgba(123,97,255,0.16); color: #c2b3ff; }
.badge.teal { background: rgba(43,196,189,0.16); color: #7fe6dd; }
.badge.green { background: rgba(52,211,153,0.16); color: #6ee7b7; }
.badge.amber { background: rgba(251,191,36,0.16); color: #fcd34d; }

/* ============================ BUTTONS ============================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 46px; padding: 0 22px; border-radius: var(--r-md);
  font-weight: 600; font-size: 15px; letter-spacing: -0.005em; white-space: nowrap;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, filter .2s ease;
}
.btn svg { width: 18px; height: 18px; }
.btn-sm { height: 38px; padding: 0 15px; font-size: 14px; }
.btn-lg { height: 52px; padding: 0 28px; font-size: 16px; }
.btn-primary { background: var(--grad-brand); color: #fff; box-shadow: 0 8px 24px rgba(79,107,255,0.35); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(79,107,255,0.5); filter: brightness(1.06); }
.btn-ghost { background: rgba(255,255,255,0.05); color: var(--text); border: 1px solid var(--border-2); }
.btn-ghost:hover { background: rgba(255,255,255,0.1); border-color: var(--border-glow); transform: translateY(-2px); }
.btn-line { background: transparent; color: var(--text); border: 1px solid var(--border-2); }
.btn-line:hover { background: rgba(255,255,255,0.06); transform: translateY(-2px); }
.btn-light { background: #fff; color: var(--space-1); }
.btn-light:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,0.25); }
/* Secondary pill that keeps the same contrast relationship in both themes:
   a solid white chip on deep space, a bordered white chip on light paper. */
.btn-contrast { background: #fff; color: #0a1030; border: 1px solid transparent; }
.btn-contrast:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,0.28); }
[data-theme="light"] .btn-contrast { background: #fff; color: #161a2e; border-color: var(--border-2); }
[data-theme="light"] .btn-contrast:hover { background: #fff; box-shadow: var(--shadow-md); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .6; pointer-events: none; }
.btn-block { width: 100%; }

/* Button rows — used on every page, so it lives here, not in a page <style> */
.hero-actions { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.hero-actions.center { justify-content: center; }
/* Stacked buttons at different content widths read as ragged; match them. */
@media (max-width: 560px) { .hero-actions .btn { width: 100%; } }

/* ============================ GLASS CARD ============================ */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 26px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.card-hover:hover { transform: translateY(-4px); border-color: var(--border-glow); box-shadow: var(--shadow-md); background: var(--surface-2); }
.glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
  border: 1px solid var(--border); border-radius: var(--r-lg);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}

/* feature icon chip */
.ichip {
  width: 46px; height: 46px; border-radius: var(--r-md); display: grid; place-items: center;
  background: var(--grad-soft); border: 1px solid var(--border-2); color: var(--brand-cyan); flex-shrink: 0;
}
.ichip svg { width: 22px; height: 22px; }
.ichip.sm { width: 40px; height: 40px; }
.ichip.xs { width: 36px; height: 36px; }
.ichip.xs svg, .ichip.sm svg { width: 19px; height: 19px; }

/* ============================ NAV ============================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h);
  display: flex; align-items: center;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom: 1px solid transparent;
}
/* At the top there is no bar, so the links sit directly on the aurora and lose
   contrast. A soft scrim gives the header presence without a hard edge, and
   fades out once the real glass bar takes over on scroll. */
.nav::before {
  content: ""; position: absolute; inset: -1px 0 auto 0; height: calc(var(--nav-h) + 26px);
  background: linear-gradient(180deg, rgba(4,7,26,0.62), rgba(4,7,26,0.28) 55%, transparent);
  pointer-events: none; z-index: -1; transition: opacity .3s ease;
}
.nav.scrolled::before { opacity: 0; }
.nav.scrolled {
  background: rgba(8,12,34,0.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
[data-theme="light"] .nav::before {
  background: linear-gradient(180deg, rgba(247,248,252,0.82), rgba(247,248,252,0.4) 55%, transparent);
}
.nav .wrap { display: flex; align-items: center; gap: 24px; max-width: 1240px; }
.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
/* The mark is a transparent SVG, so it needs no container chip and must not be
   cropped — object-fit:cover on the old non-square raster was clipping its sides. */
.brand .mark { width: 34px; height: 34px; flex-shrink: 0; display: block; }
.brand .mark img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 9px rgba(86,227,216,0.28)); }
[data-theme="light"] .brand .mark img { filter: drop-shadow(0 2px 8px rgba(79,107,255,0.22)); }
.brand .name { font-weight: 800; font-size: 19px; letter-spacing: -0.02em; }
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: 10px; }
.nav-links a {
  padding: 8px 13px; border-radius: var(--r-sm); font-size: 14.5px; font-weight: 500; color: var(--text-2);
  transition: color .15s, background .15s;
}
.nav-links a:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.nav-links a.active { color: var(--text); }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nav-cta .signin { font-size: 14.5px; font-weight: 600; color: var(--text-2); padding: 10px 12px; white-space: nowrap; }
.nav-cta .signin:hover { color: var(--text); }
/* Pill CTAs in the bar — the bar reads lighter than square buttons do. */
.nav-cta .btn { border-radius: var(--r-pill); height: 40px; padding: 0 18px; font-size: 14.5px; }
/* the secondary pill is the first thing to go when the bar gets tight */
@media (max-width: 1180px) { .nav-secondary { display: none; } }
.nav-burger { display: none; width: 42px; height: 42px; border-radius: var(--r-pill); align-items: center; justify-content: center; color: var(--text); border: 1px solid var(--border-2); }
.mobile-menu { display: none; }
@media (max-width: 940px) {
  .nav-links, .nav-cta .signin, .nav-cta .btn:not(.burger-cta) { display: none; }
  .nav-burger { display: flex; }
  .mobile-menu {
    position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 99; display: block;
    background: rgba(8,12,34,0.97); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border);
    padding: 16px 20px 26px; transform: translateY(-110%); transition: transform .3s ease; visibility: hidden;
    max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
  }
  .mobile-menu.open { transform: translateY(0); visibility: visible; }
  .mobile-menu a { display: block; padding: 13px 8px; font-size: 16px; font-weight: 600; border-bottom: 1px solid var(--border); color: var(--text); }
  .mobile-menu .m-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
  .mobile-menu .m-actions a { border-bottom: 0; }
}
/* On very narrow phones the brand + toggle + CTA + burger no longer fit on one
   row. Drop the CTA from the bar — it is already the first thing in the menu. */
@media (max-width: 410px) {
  .nav-cta .burger-cta { display: none; }
  .nav .wrap { gap: 12px; }
}

/* ============================ FOOTER ============================ */
.footer { border-top: 1px solid var(--border); background: var(--space-0); padding: 72px 0 36px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 40px; }
.footer h2 { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 12px; font-family: var(--mono); }
.footer-col a { display: block; font-size: 14px; color: var(--text-2); padding: 9px 0; transition: color .15s; }
.footer-col a:hover { color: var(--text); }
.footer-about p { font-size: 14px; color: var(--text-3); margin-top: 16px; max-width: 280px; line-height: 1.6; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 52px; padding-top: 28px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.footer-bottom .small { font-size: 13px; color: var(--text-faint); }
.footer-social { display: flex; gap: 10px; }
.footer-social a { width: 38px; height: 38px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); color: var(--text-2); transition: color .15s, border-color .15s, background .15s; }
.footer-social a:hover { color: var(--text); border-color: var(--border-glow); background: var(--surface-2); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .footer-about { grid-column: 1 / -1; } }

/* ============================ AURORA / STARFIELD ============================ */
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.aurora .blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.7; }
.aurora .b1 { width: 560px; height: 560px; left: -140px; top: -120px; background: radial-gradient(circle, rgba(123,97,255,0.55), transparent 65%); animation: floaty 11s ease-in-out infinite; }
.aurora .b2 { width: 500px; height: 500px; right: -120px; bottom: -160px; background: radial-gradient(circle, rgba(43,196,189,0.42), transparent 65%); animation: floaty 13s ease-in-out infinite reverse; }
.aurora .b3 { width: 360px; height: 360px; right: 160px; top: 40px; background: radial-gradient(circle, rgba(79,107,255,0.4), transparent 65%); animation: floaty 9s ease-in-out infinite; }

@keyframes floaty { 0%,100% { transform: translate(0,0); } 50% { transform: translate(0,-26px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes pingRing { 0% { transform: scale(0.8); opacity: 0.7; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes barEq { 0%,100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
@keyframes driftUp { from { transform: translateY(14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes fadeUp { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ============================ SCROLL REVEAL ============================ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; } .reveal.d5 { transition-delay: .4s; }

/* ============================ APP UI MOCKS ============================ */
.app-frame {
  border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--border-2);
  background: linear-gradient(180deg, #0e1640, #0a1030);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
.app-topbar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.03); }
.app-dots { display: flex; gap: 7px; }
.app-dots i { width: 11px; height: 11px; border-radius: 99px; display: block; }
.app-dots i:nth-child(1){ background:#ff5f57; } .app-dots i:nth-child(2){ background:#febc2e; } .app-dots i:nth-child(3){ background:#28c840; }
.app-url { margin-left: 10px; flex: 1; height: 28px; border-radius: var(--r-pill); background: rgba(255,255,255,0.05); border: 1px solid var(--border); display: flex; align-items: center; padding: 0 12px; font-family: var(--mono); font-size: 11.5px; color: var(--text-3); gap: 7px; }
.mock-pad { padding: 22px; }

.m-stat { background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 15px; }
.m-stat .lbl { font-size: 12px; color: var(--text-3); font-weight: 600; }
.m-stat .val { font-family: var(--mono); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin-top: 6px; }

.eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; }
.eq i { width: 3px; background: var(--brand-cyan); border-radius: 2px; transform-origin: bottom; animation: barEq 1s ease-in-out infinite; }
.eq i:nth-child(2){ animation-delay: .15s; } .eq i:nth-child(3){ animation-delay: .3s; } .eq i:nth-child(4){ animation-delay: .45s; } .eq i:nth-child(5){ animation-delay: .2s; }

.rec-dot { position: relative; width: 12px; height: 12px; }
.rec-dot::before { content:""; position: absolute; inset: 0; border-radius: 99px; background: var(--rec); }
.rec-dot::after { content:""; position: absolute; inset: 0; border-radius: 99px; background: var(--rec); animation: pingRing 1.6s ease-out infinite; }

.tline { display: flex; gap: 10px; padding: 9px 0; }
.tline .sp { font-size: 12px; font-weight: 700; flex-shrink: 0; width: 76px; }
.tline .tx { font-size: 13.5px; color: var(--text-2); line-height: 1.5; }
.cursor { display: inline-block; width: 7px; height: 15px; background: var(--brand-cyan); vertical-align: middle; margin-left: 2px; animation: blink 1s step-end infinite; border-radius: 1px; }

.hr { height: 1px; background: var(--border); border: 0; }

.link-arrow { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--brand-cyan); font-size: 15px; transition: gap .2s; padding: 6px 0; }
.link-arrow:hover { gap: 11px; }
.link-arrow svg { width: 17px; height: 17px; }

/* grids */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; } }

/* feature row (alternating) */
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
/* min-width:0 lets a column shrink below the intrinsic width of a <pre>
   or long token inside it, instead of forcing the page wider than the viewport. */
.frow > * { min-width: 0; }
.frow.rev .frow-media { order: -1; }
@media (max-width: 880px) { .frow { grid-template-columns: 1fr; gap: 32px; } .frow.rev .frow-media { order: 0; } }

/* checklist */
.checks { list-style: none; display: flex; flex-direction: column; gap: 13px; margin-top: 22px; }
.checks li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; color: var(--text-2); }
.checks .ck { width: 22px; height: 22px; border-radius: 99px; background: rgba(52,211,153,0.16); color: #6ee7b7; display: grid; place-items: center; flex-shrink: 0; margin-top: 1px; }
.checks .ck svg { width: 13px; height: 13px; }

.band { background: var(--band-bg); border-top: 1px solid var(--band-border); border-bottom: 1px solid var(--band-border); }

/* CTA band */
.cta-band { position: relative; overflow: hidden; border-radius: var(--r-2xl); border: 1px solid var(--border-2); background: linear-gradient(135deg, #131c52, #0a1030 70%); padding: 64px; text-align: center; }
.cta-band h2 { font-size: clamp(28px, 4vw, 46px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.06; text-wrap: balance; }
.cta-band p { font-size: 18px; color: var(--text-2); margin-top: 16px; }
@media (max-width: 640px) { .cta-band { padding: 40px 24px; } }

/* utility */
.center { text-align: center; }
.muted { color: var(--text-3); }
.row { display: flex; align-items: center; gap: 12px; }
.row-wrap { flex-wrap: wrap; }
.mx-auto { margin-inline: auto; }
.mt-8{margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;} .mt-40{margin-top:40px;} .mt-56{margin-top:56px;}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   PAGE SECTIONS
   Each block below is used by one page. They live here so the
   whole site is one stylesheet and rules cannot drift.
   ============================================================ */

/* ---------------- HOME: hero ---------------- */
.hero { padding: calc(var(--nav-h) + 56px) 0 60px; overflow: hidden; }
.hero-inner { display: grid; grid-template-columns: 1.02fr 1fr; gap: 52px; align-items: center; position: relative; z-index: 1; }
.hero-copy h1 { font-size: clamp(40px, 6vw, 70px); font-weight: 800; line-height: 1.02; letter-spacing: -0.035em; margin-top: 22px; }
.hero-copy > p { font-size: clamp(16px, 1.8vw, 19px); color: var(--text-2); margin-top: 22px; max-width: 545px; line-height: 1.62; }
/* The three differentiators. They were a 13px muted sentence — the smallest
   thing on the page — which is the wrong weight for the reason people buy. */
.hero-proof { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.hero-proof li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.045); border: 1px solid var(--border);
  font-size: 13px; font-weight: 500; color: var(--text-2); white-space: nowrap;
}
.hero-proof svg { width: 14px; height: 14px; color: var(--brand-cyan); flex-shrink: 0; }
[data-theme="light"] .hero-proof li { background: rgba(20,24,60,0.04); }
[data-theme="light"] .hero-proof svg { color: #0f8c83; }
.hero-media { position: relative; }

/* No 3D tilt. The mock is the product argument — a skewed screenshot reads as
   decoration, a square one reads as real software. */
.xmock { transform: none; }
/* just enough bottom room for the floating chip to overlap the frame edge
   without ever covering the last line of content */
.xmock-body { padding: 20px 20px 42px; }
.said-line { display: flex; gap: 12px; }
.said-av { width: 32px; height: 32px; border-radius: 99px; background: var(--grad-brand); color: #fff; font-weight: 700; font-size: 13px; display: grid; place-items: center; flex-shrink: 0; }
.said-meta { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.said-meta .mono { font-size: 11.5px; color: var(--text-3); }
.said-tx { font-size: 14px; color: var(--text); line-height: 1.5; margin-top: 3px; }
.flow-sep { display: flex; align-items: center; gap: 12px; margin: 16px 2px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
.flow-sep::before, .flow-sep::after { content: ""; height: 1px; flex: 1; background: var(--border); }
/* A second capture source, shown so the mock reads as multimodal rather than
   a transcript: what Nebula saw feeds the plan as much as what it heard. */
.seen-line { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 9px 11px; border-radius: var(--r-md); background: rgba(43,196,189,0.07); border: 1px solid rgba(43,196,189,0.2); }
.seen-ic { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; flex-shrink: 0; background: rgba(43,196,189,0.16); color: var(--brand-cyan); }
.seen-ic svg { width: 14px; height: 14px; }
.seen-tx { font-size: 12px; color: var(--text-2); line-height: 1.45; }
.seen-tx .mono { font-size: 10.5px; color: var(--text-3); }
.seen-tx b { color: var(--text); font-weight: 600; }

.act-list { display: flex; flex-direction: column; gap: 8px; }
.act-card { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: var(--r-md); background: rgba(255,255,255,0.04); border: 1px solid var(--border); }
/* a1..a5 stagger the entrance only — the row's state lives in .is-* below, so
   reordering the list can never change what a row claims happened. */
html.anim-ready .act-card.a1 { animation: fadeUp .5s cubic-bezier(.2,.7,.2,1) .30s both; }
html.anim-ready .act-card.a2 { animation: fadeUp .5s cubic-bezier(.2,.7,.2,1) .52s both; }
html.anim-ready .act-card.a3 { animation: fadeUp .5s cubic-bezier(.2,.7,.2,1) .74s both; }
html.anim-ready .act-card.a4 { animation: fadeUp .5s cubic-bezier(.2,.7,.2,1) .96s both; }
html.anim-ready .act-card.a5 { animation: fadeUp .5s cubic-bezier(.2,.7,.2,1) 1.18s both; }
.act-ico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.act-ico svg { width: 16px; height: 16px; }
.act-ico.mail { background: rgba(123,97,255,0.16); color: #b6a4ff; }
.act-ico.crm { background: rgba(43,196,189,0.16); color: var(--brand-cyan); }
.act-ico.time { background: rgba(86,227,216,0.14); color: #7fe6dc; }
.act-ico.doc { background: rgba(86,227,216,0.14); color: #7fe6dc; }
.act-ico.team { background: rgba(123,97,255,0.16); color: #b6a4ff; }
.act-ico.stop { background: rgba(255,120,120,0.14); color: #ff9a9a; }
.act-main { flex: 1; min-width: 0; }
.act-t { font-size: 12.5px; font-weight: 600; }
.act-s { font-size: 11px; margin-top: 2px; }
/* Literal colors, not tokens: this frame stays dark in light mode, so a
   theme-swapped --amber/--red would go dark-on-dark here. */
.act-s.done { color: #6ee7b7; }
.act-s.staged { color: #eab765; }
.act-s.wait { color: #c2b3ff; }
.act-s.blocked { color: #ff9a9a; }
.act-card.is-blocked { border-color: rgba(255,120,120,0.26); background: rgba(255,120,120,0.05); }
.act-card.is-blocked .act-t { text-decoration: line-through; text-decoration-color: rgba(255,154,154,0.5); }
.act-chk { width: 19px; height: 19px; border-radius: 99px; flex-shrink: 0; position: relative; border: 1.6px solid var(--border-2); }
.act-card.is-done .act-chk { border-color: rgba(52,211,153,0.5); background: rgba(52,211,153,0.14); }
.act-card.is-done .act-chk::after { content: ""; position: absolute; left: 6px; top: 3px; width: 5px; height: 8px; border: solid #6ee7b7; border-width: 0 2px 2px 0; transform: rotate(42deg); }
.act-card.is-staged .act-chk { border-color: rgba(234,183,101,0.6); }
.act-card.is-staged .act-chk::after { content: ""; position: absolute; inset: 5px; border-radius: 99px; background: #eab765; }
.act-card.is-wait .act-chk { border-color: rgba(194,179,255,0.55); }
.act-card.is-wait .act-chk::after { content: ""; position: absolute; inset: 4px; border-radius: 99px; border: 1.6px solid #c2b3ff; border-right-color: transparent; }
.act-card.is-blocked .act-chk { border-color: rgba(255,154,154,0.6); background: rgba(255,120,120,0.12); }
.act-card.is-blocked .act-chk::before, .act-card.is-blocked .act-chk::after { content: ""; position: absolute; left: 4px; top: 7.6px; width: 9px; height: 1.8px; border-radius: 2px; background: #ff9a9a; }
.act-card.is-blocked .act-chk::before { transform: rotate(45deg); }
.act-card.is-blocked .act-chk::after { transform: rotate(-45deg); }
.act-more { font-size: 11px; color: var(--text-3); padding: 2px 2px 0; }
.xmock-foot { margin-top: 14px; }
.grounded { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: #6ee7b7; }
.grounded svg { width: 14px; height: 14px; }
.float-chip { position: absolute; display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-radius: var(--r-md); box-shadow: var(--shadow-md); }
/* sits below the mock's content, clear of the action list and the footer line */
.fc1 { bottom: -30px; left: -38px; animation: floaty 7s ease-in-out infinite; }
.fc1 .fc-t { font-weight: 700; font-size: 13px; }
.fc1 .fc-s { font-size: 11.5px; color: var(--text-3); }
@media (max-width: 1100px) { .fc1 { left: -12px; } }
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; gap: 44px; }
  .xmock { transform: none; }
  .xmock-body { padding-bottom: 20px; }
  .float-chip { display: none; }
}

/* ---------------- HOME: rhythm + sections ---------------- */
#problem { padding: 92px 0 84px; }
#how { padding: 116px 0 104px; }
#proof { padding: 100px 0; }
#trust { padding: 116px 0 104px; }
#integrations { padding: 100px 0; }
#apps { padding: 108px 0; }
#beta { padding: 96px 0 104px; }
@media (max-width: 760px) { #how, #trust, #apps { padding: 72px 0; } #problem, #proof, #integrations, #beta { padding: 64px 0; } }

/* Two-column section head. The headline and the supporting line have to read
   as a pair: at 50px against 16px/52% the right column looked like an orphaned
   caption, so the headline comes down, the sub goes up in size and contrast,
   and a short rule anchors it to the baseline it shares with the headline. */
.sec-lead { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: end; margin-bottom: 60px; }
.sec-lead .eyebrow { margin-bottom: 20px; }
.lead-h { font-size: clamp(30px, 3.9vw, 45px); font-weight: 800; line-height: 1.04; letter-spacing: -0.04em; }
.lead-sub {
  font-size: clamp(16px, 1.45vw, 18.5px);
  color: var(--text-2);
  line-height: 1.6;
  max-width: 430px;
  padding-bottom: 4px;
  position: relative;
}
.lead-sub::before {
  content: ""; display: block; width: 34px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--brand-cyan), rgba(86,227,216,0));
  margin-bottom: 16px;
}
@media (max-width: 820px) {
  .sec-lead { grid-template-columns: 1fr; gap: 22px; align-items: start; margin-bottom: 40px; }
  .lead-sub { max-width: none; }
  .lead-sub::before { margin-bottom: 14px; }
}

.proof-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.proof-head .eyebrow { justify-content: center; margin-bottom: 18px; }
.proof-h { font-size: clamp(30px, 4.6vw, 54px); font-weight: 800; line-height: 1.02; letter-spacing: -0.045em; }
.proof-intro { font-size: 17px; color: var(--text-3); line-height: 1.6; margin-top: 20px; max-width: 560px; margin-inline: auto; }
.apps-head { max-width: 640px; margin-bottom: 52px; }
.apps-head .eyebrow { margin-bottom: 18px; }

/* The gap card — what every meeting tool delivers, and where it stops.
   The divider is the argument: everything above it is solved, everything
   below it is still a person doing it again by hand. */
.gap-card { padding: 26px 28px; }
.gap-h { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
.gap-list { list-style: none; display: flex; flex-direction: column; margin-top: 14px; }
.gap-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; font-size: 14.5px; }
.gap-row .ic { width: 20px; height: 20px; border-radius: 99px; display: grid; place-items: center; flex-shrink: 0; }
.gap-row .ic svg { width: 12px; height: 12px; }
.gap-row.done { color: var(--text-3); }
.gap-row.done .ic { background: rgba(52,211,153,0.14); color: #6ee7b7; }
.gap-row.todo { color: var(--text); font-weight: 600; }
.gap-row.todo .ic { border: 1.6px dashed rgba(230,168,60,0.65); }
.gap-row .tag { margin-left: auto; font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--amber); white-space: nowrap; }
.gap-sep { display: flex; align-items: center; gap: 12px; margin: 14px 0 4px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); white-space: nowrap; }
.gap-sep::before, .gap-sep::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, rgba(230,168,60,0.45)); }
.gap-sep::after { background: linear-gradient(90deg, rgba(230,168,60,0.45), transparent); }
@media (max-width: 420px) { .gap-row { font-size: 13.5px; } .gap-row .tag { font-size: 10px; } }

.how-grid { row-gap: 22px; }
.step-n { display: block; font-family: var(--mono); font-size: 12px; color: var(--brand-cyan); letter-spacing: 0.14em; margin-bottom: 16px; }

/* ---------------- HOME: proof ---------------- */
.proof { background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); border: 1px solid var(--border-2); border-radius: var(--r-2xl); padding: 34px; box-shadow: var(--shadow-lg); }
.proof-stage { display: grid; grid-template-columns: 1fr 92px 1fr; gap: 8px; align-items: center; }
.pcol { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; min-height: 260px; }
.pcol-head { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 18px; }
.pdot { width: 8px; height: 8px; border-radius: 99px; }
.pdot.said { background: var(--brand-violet); box-shadow: 0 0 10px var(--brand-violet); }
.pdot.done { background: #34d399; box-shadow: 0 0 10px #34d399; }
.proof-said { display: flex; gap: 12px; }
.proof-said p { font-size: 16px; line-height: 1.5; color: var(--text); }
.proof-note { font-size: 11px; color: var(--text-faint); margin-top: 18px; }
.proof-mid { position: relative; height: 100%; display: grid; place-items: center; }
.proof-mid::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: linear-gradient(90deg, var(--brand-violet), var(--brand-teal)); opacity: 0.5; }
.scan { position: absolute; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; border-radius: 99px; background: var(--brand-cyan); box-shadow: 0 0 16px var(--brand-cyan); }
html.anim-ready .scan { animation: scanRun 3.4s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes scanRun { 0% { left: 4px; opacity: 0; } 12% { opacity: 1; } 60% { left: calc(100% - 18px); opacity: 1; } 78%, 100% { left: calc(100% - 18px); opacity: 0; } }
/* Sits above the connector rather than on top of it, so the line runs
   unbroken. No opaque background needed once it is clear of the line —
   which also removes a solid colour that no longer matched the tinted panel. */
.proof-verify {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  align-items: center; gap: 4px; padding: 0; background: none;
  transform: translateY(-34px);
  color: #6ee7b7; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.proof-verify svg { width: 26px; height: 26px; }
.pact { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border); }
.pact:first-of-type { border-top: none; }
html.anim-ready .after .pact.p1 { animation: fadeUp .5s ease 1.2s both; }
html.anim-ready .after .pact.p2 { animation: fadeUp .5s ease 1.7s both; }
html.anim-ready .after .pact.p3 { animation: fadeUp .5s ease 2.2s both; }
html.anim-ready .after .pact.p4 { animation: fadeUp .5s ease 2.7s both; }
.pact-ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; background: var(--grad-soft); color: var(--brand-cyan); }
.pact-ico svg { width: 17px; height: 17px; }
.pact-t { font-size: 13.5px; font-weight: 600; }
.pact-s { font-size: 11.5px; margin-top: 2px; }
.pact-s.done { color: #6ee7b7; } .pact-s.staged { color: var(--amber); }
/* The refused row. Unlike the hero mock this sits on a theme-aware surface,
   so it uses tokens and gets a light-mode override further down. */
.pact-s.blocked { color: var(--red); }
.pact.p4 .pact-ico { background: rgba(240,90,90,0.14); color: var(--red); }
.pact.p4 .pact-t { text-decoration: line-through; text-decoration-color: rgba(240,90,90,0.5); }
.pact-chk { margin-left: auto; width: 20px; height: 20px; border-radius: 99px; flex-shrink: 0; position: relative; background: rgba(52,211,153,0.14); border: 1.6px solid rgba(52,211,153,0.5); }
.pact.p1 .pact-chk { background: rgba(230,168,60,0.16); border-color: rgba(230,168,60,0.55); }
.pact-chk::after { content: ""; position: absolute; left: 6px; top: 3px; width: 5px; height: 9px; border: solid #6ee7b7; border-width: 0 2px 2px 0; transform: rotate(42deg); }
.pact.p1 .pact-chk::after { left: 0; right: 0; top: 0; bottom: 0; margin: 5px; width: auto; height: auto; border: none; border-radius: 99px; background: var(--amber); transform: none; }
.pact.p4 .pact-chk { background: rgba(240,90,90,0.12); border-color: rgba(240,90,90,0.5); }
.pact.p4 .pact-chk::after { left: 4px; right: 4px; top: 8px; bottom: auto; width: auto; height: 1.8px; border: none; border-radius: 2px; background: var(--red); transform: rotate(-45deg); }
.pact.p4 .pact-chk::before { content: ""; position: absolute; left: 4px; right: 4px; top: 8px; height: 1.8px; border-radius: 2px; background: var(--red); transform: rotate(45deg); }
.proof-cap { margin-top: 22px; font-size: 12px; color: var(--text-faint); }
@media (max-width: 860px) {
  .proof-stage { grid-template-columns: 1fr; gap: 16px; }
  .proof-mid { height: 74px; }
  /* vertical connector, with a gap masked out of its middle so the badge
     sits inside the break instead of covering the line */
  .proof-mid::before {
    top: auto; bottom: 0; left: 50%; right: auto; width: 2px; height: 100%;
    background: linear-gradient(180deg, var(--brand-violet), var(--brand-teal));
    -webkit-mask-image: linear-gradient(180deg, #000 0 18%, transparent 18% 82%, #000 82% 100%);
    mask-image: linear-gradient(180deg, #000 0 18%, transparent 18% 82%, #000 82% 100%);
  }
  /* stays centred here — the row is only tall enough for the badge itself */
  .proof-verify { transform: none; flex-direction: row; gap: 7px; }
  .proof-verify svg { width: 20px; height: 20px; }
  /* The scan dot tracks the horizontal line; with its animation off it parks
     dead centre and lands on the badge. It has no job in the stacked layout. */
  .scan { display: none; }
  .pcol { min-height: 0; }
}

/* ---------------- HOME: integrations + split ---------------- */
.intg-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 14px; list-style: none; }
.intg { display: flex; align-items: center; gap: 11px; min-width: 0; flex-wrap: wrap; padding: 16px 18px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); font-weight: 600; font-size: 15px; transition: transform .2s, border-color .2s, background .2s; }
.intg:hover { transform: translateY(-3px); border-color: var(--border-glow); background: var(--surface-2); }
.intg-mk { width: 30px; height: 30px; border-radius: 8px; background: var(--grad-soft); display: grid; place-items: center; color: var(--brand-cyan); font-size: 15px; flex-shrink: 0; }
@media (max-width: 820px) { .intg-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.split-card { display: flex; flex-direction: column; position: relative; padding: 30px; }
.split-card.feature { border-color: var(--border-glow); box-shadow: 0 0 0 1px var(--border-glow), var(--glow-violet); background: linear-gradient(180deg, rgba(123,97,255,0.1), rgba(255,255,255,0.02)); }
.split-tag { align-self: flex-start; padding: 4px 12px; border-radius: var(--r-pill); font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; }
.split-tag.available { background: rgba(52,211,153,0.16); color: #6ee7b7; }
.split-tag.beta { background: rgba(123,97,255,0.18); color: #b6a4ff; }
.split-h { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.split-p { font-size: 14.5px; color: var(--text-2); margin-top: 12px; line-height: 1.6; }
.split-os { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 18px; font-size: 13px; color: var(--text-2); }
.split-os span { display: inline-flex; align-items: center; gap: 7px; }
.split-card .btn, .split-card .checks { margin-top: auto; }
.split-card .checks + .btn { margin-top: 22px; }
.split-note { font-size: 12.5px; color: var(--text-3); margin-top: 12px; text-align: center; }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; } }

/* ---------------- Shared: signup / newsletter form ---------------- */
.beta-form { display: flex; gap: 12px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.beta-form input { width: 320px; max-width: 100%; height: 52px; padding: 0 18px; border-radius: var(--r-md); background: rgba(255,255,255,0.06); border: 1px solid var(--border-2); color: #fff; font-size: 15px; }
.beta-form input::placeholder { color: rgba(255,255,255,0.5); }
.beta-form input:focus { outline: none; border-color: var(--brand-cyan); box-shadow: 0 0 0 3px rgba(86,227,216,0.2); }
.beta-form input[aria-invalid="true"] { border-color: var(--red); }

/* Form status messages — never shown unless something really happened */
.form-msg { margin-top: 16px; font-size: 14.5px; font-weight: 600; line-height: 1.55; }
.form-msg[hidden] { display: none; }
.form-msg.ok { color: #6ee7b7; }
.form-msg.err { color: #ff9a9a; }
.form-msg a { color: inherit; text-decoration: underline; }
.btn .spinner {
  width: 16px; height: 16px; border-radius: 99px; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;
  animation: spin .7s linear infinite;
}

.founder-line { display: inline-flex; align-items: flex-start; gap: 9px; margin-top: 26px; font-size: 13.5px; color: var(--text-3); max-width: 560px; line-height: 1.55; text-align: left; }
.founder-dot { width: 7px; height: 7px; border-radius: 99px; background: var(--brand-cyan); box-shadow: 0 0 9px var(--brand-cyan); flex-shrink: 0; margin-top: 6px; }
.cta-band .founder-line { margin-left: auto; margin-right: auto; }

/* ---------------- PRODUCT ---------------- */
.feat-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.fs-item { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 16px 18px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); font-weight: 700; font-size: 15px; transition: transform .2s, border-color .2s, background .2s; }
.fs-item:hover { transform: translateY(-3px); border-color: var(--border-glow); background: var(--surface-2); }
@media (max-width: 760px) { .feat-strip { grid-template-columns: repeat(2,minmax(0,1fr)); } }
.rec-mini { display: flex; flex-direction: column; align-items: center; text-align: center; }
.rec-timer { font-weight: 700; letter-spacing: -0.02em; }
.rec-sub { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.rec-stop { width: 52px; height: 52px; border-radius: 99px; background: rgba(255,77,77,0.16); display: grid; place-items: center; }
.rec-stop span { width: 18px; height: 18px; border-radius: 4px; background: var(--rec); box-shadow: 0 0 18px var(--rec); }

/* Capture sources — audio, mic, screen and camera are independent inputs the
   user switches per session, so the mock shows them as toggles, not a fixed set. */
.src-grid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; width: 100%; margin-top: 20px; }
.src {
  display: flex; align-items: center; gap: 8px; padding: 9px 11px;
  border-radius: var(--r-sm); border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  font-size: 12px; font-weight: 600; color: var(--text-3); text-align: left;
}
.src svg { width: 14px; height: 14px; flex-shrink: 0; }
.src .sw { margin-left: auto; width: 22px; height: 13px; border-radius: 99px; background: rgba(255,255,255,0.12); position: relative; flex-shrink: 0; }
.src .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 9px; height: 9px; border-radius: 99px; background: var(--text-faint); }
.src.on { color: var(--text); border-color: rgba(86,227,216,0.32); background: rgba(86,227,216,0.08); }
.src.on svg { color: var(--brand-cyan); }
.src.on .sw { background: rgba(86,227,216,0.4); }
.src.on .sw::after { left: auto; right: 2px; background: var(--brand-cyan); }
@media (max-width: 420px) { .src { font-size: 11.5px; padding: 8px 9px; gap: 6px; } }
.t-static .tline { border-top: 1px solid var(--border); }
.t-static .tline:first-child { border-top: 0; }
.insight-row { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--border); }
.chart { padding-top: 6px; }
.bars { display: flex; align-items: flex-end; gap: 10px; height: 120px; }
.bars span { flex: 1; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, var(--brand-indigo), rgba(123,97,255,0.25)); }
.bars span:nth-child(4) { background: var(--grad-brand); }
.bars-x { display: flex; gap: 10px; margin-top: 9px; }
.bars-x span { flex: 1; text-align: center; font-size: 10.5px; color: var(--text-faint); }

/* ---------------- PRICING ---------------- */
.billing-toggle { display: inline-flex; gap: 4px; margin-top: 30px; padding: 5px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border); }
.billing-toggle button { padding: 9px 20px; border-radius: var(--r-pill); font-size: 14px; font-weight: 600; color: var(--text-3); display: inline-flex; align-items: center; gap: 8px; transition: background .2s, color .2s; }
.billing-toggle button.on { background: var(--grad-brand); color: #fff; box-shadow: 0 4px 14px rgba(79,107,255,0.4); }
.billing-toggle .save { font-size: 11px; font-family: var(--mono); background: rgba(0,0,0,0.28); padding: 2px 6px; border-radius: 99px; }
.billing-toggle button:not(.on) .save { background: rgba(110,231,183,0.16); color: #6ee7b7; }

.plans { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; align-items: stretch; }
.plan { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 26px 24px; position: relative; }
.plan-pop { border-color: var(--border-glow); box-shadow: 0 0 0 1px var(--border-glow), var(--glow-violet); background: linear-gradient(180deg, rgba(123,97,255,0.1), rgba(255,255,255,0.02)); }
.plan-flag { position: absolute; top: -11px; left: 24px; }
.plan-name { font-size: 18px; font-weight: 700; }
.plan-desc { font-size: 13.5px; color: var(--text-3); margin-top: 6px; min-height: 40px; line-height: 1.4; }
/* Fixed-height price block keeps the CTA and feature list on the same
   baseline across all four cards, whatever each card's price looks like. */
.plan-price { display: flex; align-items: baseline; gap: 2px; margin: 16px 0 0; flex-wrap: wrap; min-height: 64px; }
.plan-price .cur { font-size: 22px; font-weight: 700; color: var(--text-2); }
.plan-price .amt { font-size: 46px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.plan-price .amt.word { font-size: 34px; }
.plan-price .per { font-size: 13px; color: var(--text-3); font-weight: 600; margin-left: 4px; }
.plan-price .per [data-period] { display: block; font-size: 11px; color: var(--text-faint); font-weight: 500; }
.plan-period { font-size: 12px; color: var(--text-faint); margin: 6px 0 18px; min-height: 18px; }
.plan .btn { margin-top: 0; }
.plan-feats { list-style: none; margin-top: 22px; display: flex; flex-direction: column; gap: 11px; }
.plan-feats li { font-size: 13.5px; color: var(--text-2); padding-left: 26px; position: relative; line-height: 1.4; }
.plan-feats li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 99px; background: rgba(110,231,183,0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%236ee7b7' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center no-repeat; }
@media (max-width: 980px) { .plans { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .plans { grid-template-columns: 1fr; } .plan-desc, .plan-price, .plan-period { min-height: 0; } }

.cmp-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--border); }
.cmp { width: 100%; border-collapse: collapse; min-width: 680px; }
.cmp caption { text-align: left; padding: 14px 18px; font-size: 13px; color: var(--text-3); border-bottom: 1px solid var(--border); }
.cmp th, .cmp td { padding: 15px 18px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--border); }
.cmp thead th { font-weight: 700; font-size: 14.5px; background: rgba(255,255,255,0.03); text-align: center; }
.cmp thead th:first-child { text-align: left; }
.cmp td:not(:first-child) { text-align: center; color: var(--text-2); }
.cmp td:first-child, .cmp tbody th { color: var(--text); font-weight: 500; text-align: left; }
.cmp .hl { background: rgba(123,97,255,0.07); }
.cmp thead .hl { background: rgba(123,97,255,0.14); color: #c2b3ff; }
.cmp tbody tr:last-child td, .cmp tbody tr:last-child th { border-bottom: 0; }
.cmp .y::after { content: ""; display: inline-block; width: 18px; height: 18px; border-radius: 99px; background: rgba(110,231,183,0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236ee7b7' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center no-repeat; vertical-align: middle; }

/* ---------------- FAQ (pricing + home) ---------------- */
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq-item { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; text-align: left; font-size: 15.5px; font-weight: 600; }
.faq-ic { width: 20px; height: 20px; flex-shrink: 0; position: relative; }
.faq-ic::before, .faq-ic::after { content: ""; position: absolute; background: var(--brand-cyan); border-radius: 2px; transition: transform .25s; }
.faq-ic::before { left: 4px; right: 4px; top: 9px; height: 2px; }
.faq-ic::after { top: 4px; bottom: 4px; left: 9px; width: 2px; }
.faq-item.open .faq-ic::after { transform: scaleY(0); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { padding: 0 20px 20px; font-size: 14.5px; color: var(--text-2); line-height: 1.65; }
.faq-a p + p { padding-top: 0; }

/* ---------------- SECURITY ---------------- */
.shield-badge { width: 72px; height: 72px; border-radius: var(--r-lg); display: grid; place-items: center; margin: 0 auto; background: var(--grad-soft); border: 1px solid var(--border-2); color: var(--brand-cyan); box-shadow: var(--glow-violet); }
.compliance { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; list-style: none; }
.comp-item { text-align: center; }
.comp-ring { width: 88px; height: 88px; border-radius: 99px; margin: 0 auto; display: grid; place-items: center; font-family: var(--mono); font-weight: 700; font-size: 18px; color: var(--text); background: var(--surface); border: 1px solid var(--border-2); box-shadow: inset 0 0 24px rgba(123,97,255,0.12); }
.comp-l { font-size: 12.5px; color: var(--text-3); margin-top: 12px; }
@media (max-width: 640px) { .compliance { grid-template-columns: repeat(2,1fr); gap: 22px; } }
.flow { display: flex; flex-direction: column; }
.flow-step { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); }
.flow-ic { width: 42px; height: 42px; border-radius: var(--r-sm); flex-shrink: 0; display: grid; place-items: center; background: var(--grad-soft); border: 1px solid var(--border-2); color: var(--brand-cyan); }
.flow-ic svg { width: 21px; height: 21px; }
.flow-t { font-weight: 700; font-size: 15px; }
.flow-d { font-size: 13px; color: var(--text-3); margin-top: 2px; }
.flow-line { width: 2px; height: 22px; margin-left: 37px; background: linear-gradient(var(--brand-violet), var(--brand-teal)); opacity: 0.5; }
.trust-strip { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 36px 40px; border-radius: var(--r-2xl); flex-wrap: wrap; }
.trust-strip p { max-width: 520px; }

/* ---------------- INTEGRATIONS ---------------- */
.int-head { display: flex; align-items: center; justify-content: space-between; }
.prov-ic { width: 40px; height: 40px; border-radius: 11px; background: var(--grad-soft); display: grid; place-items: center; color: var(--brand-cyan); font-size: 19px; }
.int-cat { margin-top: 40px; }
.int-cat:first-child { margin-top: 0; }
.int-cat-t { font-size: 16px; font-weight: 700; color: var(--text-2); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.int-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.int-tile { display: flex; align-items: center; gap: 12px; min-width: 0; flex-wrap: wrap; padding: 16px 18px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); font-weight: 600; font-size: 15px; transition: transform .2s, border-color .2s, background .2s; }
.int-tile:hover { transform: translateY(-3px); border-color: var(--border-glow); background: var(--surface-2); }
.int-tile .st { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.it-ic { width: 32px; height: 32px; border-radius: 9px; background: rgba(255,255,255,0.06); display: grid; place-items: center; font-size: 16px; color: var(--brand-cyan); flex-shrink: 0; }
@media (max-width: 760px) { .int-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.code-frame { background: #070b24; }
.code { padding: 20px 22px; font-family: var(--mono); font-size: 13px; line-height: 1.75; color: #c9d4ff; overflow-x: auto; white-space: pre; }
.c-com { color: var(--text-faint); } .c-key { color: #c2b3ff; } .c-fn { color: var(--brand-cyan); } .c-str { color: #6ee7b7; }

/* ---------------- ABOUT ---------------- */
.prose .lead { font-size: clamp(19px, 2.4vw, 25px); font-weight: 600; line-height: 1.45; letter-spacing: -0.01em; color: var(--text); text-wrap: pretty; }
.prose p { font-size: 16.5px; color: var(--text-2); line-height: 1.7; margin-top: 22px; }
.founder-card { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: start; padding: 32px; border-radius: var(--r-xl); }
.founder-av { width: 96px; height: 96px; border-radius: 99px; display: grid; place-items: center; font-weight: 700; font-size: 30px; color: #fff; background: var(--grad-brand); box-shadow: 0 8px 26px rgba(0,0,0,0.35); }
.founder-n { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.founder-r { font-size: 14px; color: var(--brand-cyan); margin-top: 3px; font-weight: 600; }
.founder-b { font-size: 15px; color: var(--text-2); line-height: 1.65; margin-top: 14px; }
@media (max-width: 620px) { .founder-card { grid-template-columns: 1fr; gap: 18px; } }
.hq-card { padding: 30px; border-radius: var(--r-xl); }
.hq-map { width: 64px; height: 64px; border-radius: var(--r-lg); display: grid; place-items: center; background: var(--grad-soft); border: 1px solid var(--border-2); color: var(--brand-cyan); }
.hq-t { font-size: 19px; font-weight: 800; margin-top: 18px; letter-spacing: -0.01em; }
.hq-d { font-size: 14px; color: var(--text-3); margin-top: 4px; }
.hq-row { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; padding: 7px 0; }

/* ---------------- CUSTOMERS ---------------- */
.case-feature { position: relative; overflow: hidden; padding: 46px; border-radius: var(--r-2xl); }
.cf-inner { position: relative; display: grid; grid-template-columns: 1.3fr 1fr; gap: 44px; align-items: center; }
.cf-quote { font-size: clamp(19px, 2.4vw, 26px); font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; margin-top: 22px; text-wrap: balance; }
.cf-person { display: flex; align-items: center; gap: 12px; margin-top: 26px; }
.qn { font-weight: 700; font-size: 14px; }
.qr { font-size: 12.5px; color: var(--text-3); }
.cf-stats { display: flex; flex-direction: column; gap: 18px; }
.cf-stat { padding: 18px 20px; border-radius: var(--r-md); background: rgba(255,255,255,0.04); border: 1px solid var(--border); }
.cf-n { font-family: var(--mono); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.cf-l { font-size: 13px; color: var(--text-3); margin-top: 4px; }
@media (max-width: 820px) { .cf-inner { grid-template-columns: 1fr; gap: 30px; } .case-feature { padding: 30px 24px; } }
.case-card { display: flex; flex-direction: column; }
.cc-top { margin-bottom: 14px; }
.cc-q { font-size: 14.5px; color: var(--text); line-height: 1.55; margin-top: 12px; flex: 1; }

/* ---------------- BLOG ---------------- */
.feat-post { display: grid; grid-template-columns: 1fr 1.1fr; gap: 0; border-radius: var(--r-xl); overflow: hidden; }
.fp-media { min-height: 280px; background: linear-gradient(135deg, #1a1252, #0b1640); display: grid; place-items: center; position: relative; overflow: hidden; }
.fp-copy { padding: 38px; display: flex; flex-direction: column; justify-content: center; }
.fp-title { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin-top: 16px; text-wrap: balance; }
.fp-sub { font-size: 15.5px; color: var(--text-2); margin-top: 14px; line-height: 1.6; }
.fp-meta { display: flex; align-items: center; gap: 11px; margin-top: 24px; font-size: 13px; color: var(--text-3); }
@media (max-width: 820px) { .feat-post { grid-template-columns: 1fr; } .fp-media { min-height: 180px; } .fp-copy { padding: 28px; } }
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip { padding: 9px 16px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 600; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); transition: color .15s, border-color .15s, background .15s; }
.chip:hover { border-color: var(--border-glow); color: var(--text); }
.chip[aria-pressed="true"] { background: var(--grad-brand); color: #fff; border-color: transparent; }
.post { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.post[hidden] { display: none; }
.post-art { height: 150px; margin: 0; }
.post-art.a1 { background: linear-gradient(135deg, #16224f, #2a1a5e); }
.post-art.a2 { background: linear-gradient(135deg, #0f2b3a, #123a4a); }
.post-art.a3 { background: linear-gradient(135deg, #2a2150, #3a1f4a); }
.post-art.a4 { background: linear-gradient(135deg, #102544, #1a2f5e); }
.post-art.a5 { background: linear-gradient(135deg, #122e29, #1a3f3a); }
.post-art.a6 { background: linear-gradient(135deg, #1e1a52, #251f63); }
.post .badge { margin: 20px 22px 0; }
.post-title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; margin: 12px 22px 0; }
.post-sub { font-size: 13.5px; color: var(--text-2); line-height: 1.55; margin: 9px 22px 0; flex: 1; }
.post-meta { font-size: 12px; color: var(--text-faint); font-family: var(--mono); margin: 16px 22px 22px; }
.news { position: relative; overflow: hidden; padding: 40px 44px; border-radius: var(--r-2xl); }
.news-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.news-form { display: flex; gap: 10px; flex-wrap: wrap; }
.news-form input { width: 280px; max-width: 100%; padding: 0 16px; height: 48px; border-radius: var(--r-md); background: rgba(255,255,255,0.05); border: 1px solid var(--border-2); color: var(--text); font-size: 14.5px; outline: none; }
.news-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(123,97,255,0.25); }
.news-form input[aria-invalid="true"] { border-color: var(--red); }
@media (max-width: 560px) { .news-form { width: 100%; } .news-form input { flex: 1; } }

/* ---------------- CONTACT ---------------- */
.contact-wrap { padding: calc(var(--nav-h) + 56px) 0 24px; overflow: hidden; position: relative; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: start; }
.contact-left .page-h1 { font-size: clamp(40px, 6vw, 64px); margin-top: 20px; }
.contact-left .page-lede { margin: 18px 0 0; max-width: 440px; }
.contact-methods { display: flex; flex-direction: column; gap: 16px; }
.cm { display: flex; align-items: center; gap: 14px; }
.cm-ic { width: 44px; height: 44px; border-radius: var(--r-md); flex-shrink: 0; display: grid; place-items: center; background: var(--grad-soft); border: 1px solid var(--border-2); color: var(--brand-cyan); }
.cm-ic svg { width: 21px; height: 21px; }
.cm-t { font-weight: 700; font-size: 14px; }
.cm-d { font-size: 14px; color: var(--text-3); display: inline-block; padding: 4px 0; }
a.cm-d:hover { color: var(--brand-cyan); }
.contact-card { padding: 34px; border-radius: var(--r-xl); }
.cf-title { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
.fld { display: flex; flex-direction: column; gap: 7px; margin-top: 16px; position: relative; }
.fld:first-of-type, .field-grid .fld { margin-top: 0; }
.fld > span { font-size: 13px; font-weight: 600; color: var(--text-2); }
.fld input, .fld select, .fld textarea {
  width: 100%; padding: 12px 14px; border-radius: var(--r-md); background: rgba(255,255,255,0.04);
  border: 1px solid var(--border); color: var(--text); font-size: 14.5px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.fld textarea { resize: vertical; min-height: 96px; font-family: inherit; }
.fld select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff88' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(123,97,255,0.25); }
/* The dropdown list is painted by the OS, not the page, so it ignored the card's
   styling and inherited light text onto a light popup — unreadable. color-scheme
   flips the native popup to dark; the explicit option colours are the fallback
   for engines that ignore it. The contact card is dark in both themes, so this
   is unconditional. */
.fld select { color-scheme: dark; }
.fld select option,
.fld select optgroup { background-color: #131a3d; color: #e9ecf7; }
.fld select option:checked { background-color: #24306b; color: #fff; }
.fld select:hover { border-color: var(--border-2); }
.fld input[aria-invalid="true"], .fld textarea[aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 3px rgba(240,90,90,0.18); }
.fld-err { font-size: 12.5px; color: #ff9a9a; font-weight: 600; }
.fld-err[hidden] { display: none; }
/* A submit button sitting flush against the last field reads as part of it.
   Scoped to the pattern rather than all block buttons, so the compact beta
   and newsletter forms keep their tighter rhythm. */
.fld + .btn-block { margin-top: 20px; }
#contact-form .btn { margin-top: 22px; }
.cf-fine { font-size: 12px; color: var(--text-faint); margin-top: 16px; text-align: center; line-height: 1.5; }
.cf-success { text-align: center; padding: 28px 8px; }
.cf-success[hidden] { display: none; }
.cf-check { width: 64px; height: 64px; border-radius: 99px; margin: 0 auto 18px; display: grid; place-items: center; background: rgba(110,231,183,0.16); color: #6ee7b7; }
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; gap: 36px; } }

/* ---------------- LOGIN ---------------- */
.login-body { min-height: 100dvh; }
.auth { min-height: 100dvh; display: grid; grid-template-columns: 1.05fr 1fr; }
.auth-brand { position: relative; overflow: hidden; background: var(--space-1); display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 44px 52px; }
.auth-brand .aurora .blob { opacity: 0.6; }
.auth-logo { position: relative; z-index: 1; }
.auth-brand-mid { position: relative; z-index: 1; max-width: 470px; }
.ab-h { font-size: clamp(30px, 3.4vw, 40px); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; margin-top: 22px; text-wrap: balance; }
.ab-p { font-size: 15.5px; line-height: 1.6; color: var(--text-2); margin-top: 16px; max-width: 430px; }
.ab-points { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-top: 30px; }
.ab-points li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: var(--text-2); }
.ab-points .ck { width: 20px; height: 20px; border-radius: 99px; background: rgba(52,211,153,0.16); color: #6ee7b7; display: grid; place-items: center; flex-shrink: 0; margin-top: 1px; }
.ab-points .ck svg { width: 12px; height: 12px; }
.ab-foot { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-3); }
.ab-foot svg { color: var(--brand-cyan); flex-shrink: 0; }
.auth-form { position: relative; display: grid; place-items: center; padding: 78px 40px 48px; background: var(--space-0); }
.auth-home { position: absolute; top: 22px; left: 26px; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--text-3); padding: 8px 6px; }
.auth-home:hover { color: var(--text); }
/* 440, not 400: the card now holds a two-column name row, and 400 squeezed
   those inputs to about 165px of usable text width. */
.auth-card { width: 100%; max-width: 440px; }
.auth-h1 { font-size: 27px; font-weight: 800; letter-spacing: -0.025em; }
.auth-sub { font-size: 14.5px; color: var(--text-3); margin-top: 8px; line-height: 1.5; }
.auth-sub b { color: var(--text); }
.stack { display: flex; flex-direction: column; gap: 13px; }
.afld { display: flex; flex-direction: column; gap: 7px; }
.afld > span { font-size: 13px; font-weight: 600; color: var(--text-2); }
.afld-in { position: relative; display: flex; align-items: center; }
.afld-ic { position: absolute; left: 13px; color: var(--text-faint); pointer-events: none; }
.afld-in input { width: 100%; height: 46px; padding: 0 14px 0 40px; border-radius: var(--r-md); background: rgba(255,255,255,0.04); border: 1px solid var(--border); color: var(--text); font-size: 14.5px; outline: none; transition: border-color .15s, box-shadow .15s; }
.afld-in input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(123,97,255,0.25); }
.afld-in input[aria-invalid="true"] { border-color: var(--red); }
.afld-err { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #ff8585; font-weight: 600; }
/* The [hidden] attribute must win over the display above, or the error
   is visible before the user has typed anything. */
.afld-err[hidden] { display: none; }
.auth-div { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: var(--text-faint); font-size: 12.5px; }
.auth-div::before, .auth-div::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.auth-fine { font-size: 12px; color: var(--text-faint); margin-top: 18px; line-height: 1.5; text-align: center; }
.auth-fine a { color: var(--text-3); text-decoration: underline; }
.auth-fine a:hover { color: var(--text); }
.auth-back { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--text-3); margin-bottom: 18px; padding: 6px 4px; }
.auth-back:hover { color: var(--text); }
.otp { display: flex; gap: 9px; justify-content: space-between; margin-top: 26px; }
.otp input { width: 52px; height: 60px; text-align: center; font-size: 24px; font-weight: 700; border-radius: var(--r-md); border: 1px solid var(--border); background: rgba(255,255,255,0.04); color: var(--text); outline: none; transition: border-color .15s, box-shadow .15s; }
.otp input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(123,97,255,0.25); }
.auth-done { text-align: center; }
.auth-done .orb { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto; background: conic-gradient(from 0deg, var(--brand-violet), var(--brand-cyan), var(--brand-teal), var(--brand-violet)); animation: spin 1.1s linear infinite; mask: radial-gradient(circle, transparent 52%, #000 54%); -webkit-mask: radial-gradient(circle, transparent 52%, #000 54%); }
.step { animation: driftUp .45s ease both; }
.step[hidden] { display: none; }
.demo-banner {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 22px; padding: 12px 14px;
  border-radius: var(--r-md); background: rgba(230,168,60,0.1); border: 1px solid rgba(230,168,60,0.3);
  font-size: 13px; color: var(--text-2); line-height: 1.5;
}
.demo-banner svg { color: var(--amber); flex-shrink: 0; margin-top: 1px; }
@media (max-width: 880px) {
  .auth { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .auth-form { background: var(--space-1); }
  .otp input { width: 100%; height: 56px; font-size: 21px; }
}

/* ---------------- 404 ---------------- */
.err-page { min-height: 100dvh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 40px 0; }

/* ============================================================
   LIGHT MODE  —  [data-theme="light"] on <html>
   Flips page tokens to light. Product mocks, the CTA band, and
   the login brand panel stay dark "islands" by re-asserting the
   dark tokens locally (custom-property cascade).
   ============================================================ */
[data-theme="light"] {
  --space-0: #eceef7;
  --space-1: #f5f6fb;
  --space-2: #ffffff;
  --space-3: #ffffff;

  --surface: #ffffff;
  --surface-2: #f6f7fc;
  --surface-3: #eef0f8;
  --border: oklch(0.9 0.008 264);
  --border-2: oklch(0.84 0.01 264);
  --border-glow: rgba(123,97,255,0.4);

  --text: oklch(0.24 0.014 266);
  --text-2: oklch(0.42 0.012 266);
  --text-3: oklch(0.54 0.01 266);
  --text-faint: oklch(0.5 0.012 266);

  --grad-text: linear-gradient(100deg, #6d4bd6, #4f6bff 46%, #128b80);
  --grad-soft: linear-gradient(135deg, rgba(123,97,255,0.12), rgba(43,196,189,0.1));

  --band-bg: #ebedf6;
  --band-border: oklch(0.9 0.006 264);

  --shadow-md: 0 8px 26px rgba(36,40,80,0.10);
  --shadow-lg: 0 24px 60px rgba(36,40,80,0.16);
  --glow-violet: 0 14px 40px rgba(123,97,255,0.22);
  --glow-teal: 0 12px 34px rgba(43,196,189,0.2);

  color-scheme: light;
}

/* ============================================================
   LIGHT MODE — DARK GRADIENT MASTHEAD
   Every page opens on a deep-space gradient that the fixed header
   sits on, then resolves to light below. The masthead is a dark
   island: the dark tokens apply inside it, so all the components
   it contains stay correct without per-component patching.
   ============================================================ */
[data-theme="light"] .hero,
[data-theme="light"] .page-hero,
[data-theme="light"] .contact-wrap,
[data-theme="light"] .err-page {
  background: linear-gradient(177deg, #0a1030 0%, #142257 48%, #2b48a2 100%);
}

/* Dark islands — re-assert dark tokens for the masthead, product UI,
   CTA band and auth brand panel */
[data-theme="light"] .hero,
[data-theme="light"] .page-hero,
[data-theme="light"] .contact-wrap,
[data-theme="light"] .err-page,
[data-theme="light"] .app-frame,
[data-theme="light"] .code-frame,
[data-theme="light"] .cta-band,
[data-theme="light"] .auth-brand {
  --surface: rgba(255,255,255,0.035);
  --surface-2: rgba(255,255,255,0.06);
  --surface-3: rgba(255,255,255,0.09);
  --border: rgba(255,255,255,0.10);
  --border-2: rgba(255,255,255,0.16);
  --text: oklch(0.97 0.005 268);
  --text-2: rgba(255,255,255,0.70);
  --text-3: rgba(255,255,255,0.52);
  --text-faint: rgba(255,255,255,0.56);
  --grad-text: linear-gradient(100deg, #c9b6ff, #8ea2ff 45%, var(--brand-cyan));
  color: var(--text);
}

[data-theme="light"] .page-bg {
  background:
    radial-gradient(1100px 700px at 80% -10%, rgba(123,97,255,0.1), transparent 60%),
    radial-gradient(900px 600px at 8% 2%, rgba(43,196,189,0.08), transparent 58%),
    linear-gradient(180deg, #f7f8fc, #eef0f8 40%, #f2f3fa);
}
[data-theme="light"] .page-bg::after { opacity: 0; }
[data-theme="light"] .aurora .blob { opacity: 0.34; }

/* The header sits on the dark masthead, so it stays dark in light mode too —
   including once scrolled, otherwise the bar would flip to white while the
   gradient is still behind it. */
[data-theme="light"] .nav { color: #fff; }
[data-theme="light"] .nav.scrolled { background: rgba(8,12,34,0.82); border-bottom: 1px solid rgba(255,255,255,0.10); }
[data-theme="light"] .nav::before {
  background: linear-gradient(180deg, rgba(4,7,26,0.55), rgba(4,7,26,0.24) 55%, transparent);
}
[data-theme="light"] .nav .brand .name { color: #fff; }
[data-theme="light"] .nav-links a { color: rgba(255,255,255,0.72); }
[data-theme="light"] .nav-links a:hover { color: #fff; background: rgba(255,255,255,0.10); }
[data-theme="light"] .nav-links a.active { color: #fff; }
[data-theme="light"] .nav-cta .signin { color: rgba(255,255,255,0.78); }
[data-theme="light"] .nav-cta .signin:hover { color: #fff; }
[data-theme="light"] .nav .theme-toggle { color: rgba(255,255,255,0.75); }
[data-theme="light"] .nav .theme-toggle:hover { color: #fff; background: rgba(255,255,255,0.12); }
[data-theme="light"] .nav-cta .btn-contrast { background: #fff; color: #0a1030; border-color: transparent; }
[data-theme="light"] .nav-burger { color: #fff; border-color: rgba(255,255,255,0.28); }
[data-theme="light"] .mobile-menu { background: rgba(8,12,34,0.97); }
[data-theme="light"] .mobile-menu a { color: #fff; border-bottom-color: rgba(255,255,255,0.10); }
[data-theme="light"] .pill { background: rgba(20,24,60,0.04); }
[data-theme="light"] .skip { background: #fff; }

[data-theme="light"] .btn-ghost { background: rgba(20,24,60,0.05); color: var(--text); border-color: var(--border-2); }
[data-theme="light"] .btn-ghost:hover { background: rgba(20,24,60,0.09); }
[data-theme="light"] .btn-line { color: var(--text); border-color: var(--border-2); }
[data-theme="light"] .btn-line:hover { background: rgba(20,24,60,0.05); }
[data-theme="light"] .cta-band .btn-ghost { background: rgba(255,255,255,0.05); color: #fff; border-color: rgba(255,255,255,0.2); }
[data-theme="light"] .cta-band .btn-ghost:hover { background: rgba(255,255,255,0.1); }
[data-theme="light"] .cta-band .btn-line { color: #fff; border-color: rgba(255,255,255,0.25); }

[data-theme="light"] .glass { background: linear-gradient(180deg, #ffffff, #fbfcff); border: 1px solid var(--border); box-shadow: var(--shadow-md); }

/* Accent (cyan-as-text) needs more contrast on light */
[data-theme="light"] .ichip { color: #0f8c83; background: var(--grad-soft); border-color: oklch(0.88 0.02 200); }
[data-theme="light"] .app-frame .ichip { color: var(--brand-cyan); }
[data-theme="light"] .link-arrow { color: #0f8c83; }
[data-theme="light"] .prov-ic,
[data-theme="light"] .it-ic,
[data-theme="light"] .cm-ic,
[data-theme="light"] .flow-ic,
[data-theme="light"] .hq-map,
[data-theme="light"] .shield-badge { color: #0f8c83; }
[data-theme="light"] .step-n { color: #0f8c83; }
[data-theme="light"] .lead-sub::before { background: linear-gradient(90deg, #0f8c83, rgba(15,140,131,0)); }
[data-theme="light"] .founder-r { color: #0f8c83; }
[data-theme="light"] .eyebrow .dot,
[data-theme="light"] .pill .dot { box-shadow: none; }
[data-theme="light"] :focus-visible { outline-color: #0f8c83; }

[data-theme="light"] .badge.violet { background: rgba(123,97,255,0.14); color: #5b3fc4; }
[data-theme="light"] .badge.teal { background: rgba(20,150,140,0.14); color: #0c7a71; }
[data-theme="light"] .badge.green { background: rgba(26,140,90,0.14); color: #168a55; }
[data-theme="light"] .badge.amber { background: rgba(180,120,0,0.14); color: #9a6a00; }

[data-theme="light"] .m-stat { background: #fff; box-shadow: var(--shadow-md); }
[data-theme="light"] .app-frame .m-stat { background: rgba(255,255,255,0.04); box-shadow: none; }
[data-theme="light"] *::-webkit-scrollbar-thumb { background: rgba(20,24,60,0.22); background-clip: content-box; }
[data-theme="light"] *::-webkit-scrollbar-thumb:hover { background: rgba(20,24,60,0.34); background-clip: content-box; }
[data-theme="light"] ::selection { background: rgba(123,97,255,0.22); color: var(--brand-space); }

[data-theme="light"] .plan-pop { background: linear-gradient(180deg, rgba(123,97,255,0.08), #ffffff); }
[data-theme="light"] .split-card.feature { background: linear-gradient(180deg, rgba(123,97,255,0.08), #ffffff); }
[data-theme="light"] .billing-toggle .save { background: rgba(0,0,0,0.22); }
[data-theme="light"] .cmp thead th { background: #f4f5fb; }
[data-theme="light"] .cmp thead .hl { background: rgba(123,97,255,0.12); color: #5b3fc4; }
[data-theme="light"] .cf-stat { background: #fff; box-shadow: var(--shadow-md); }
[data-theme="light"] .it-ic { background: rgba(20,24,60,0.05); }
[data-theme="light"] .proof { background: linear-gradient(180deg, #ffffff, #fafbff); }
/* The gap card sits on light paper, so the amber needs real ink behind it —
   the dark-theme value is 2.1:1 on white. */
[data-theme="light"] .gap-row .tag,
[data-theme="light"] .gap-sep { color: #8a5a10; }
[data-theme="light"] .gap-sep::before { background: linear-gradient(90deg, transparent, rgba(138,90,16,0.4)); }
[data-theme="light"] .gap-sep::after { background: linear-gradient(90deg, rgba(138,90,16,0.4), transparent); }
[data-theme="light"] .gap-row.todo .ic { border-color: rgba(138,90,16,0.6); }
[data-theme="light"] .gap-row.done .ic { background: rgba(26,140,90,0.14); color: #12795a; }

/* ------------------------------------------------------------
   Light mode: the mint green (#6ee7b7) is designed for deep space.
   On a white card it measures 1.4:1 — below even the 3:1 floor for
   meaningful graphics, so the tick marks all but vanish. Everything
   below sits on a light surface (items inside dark islands keep the
   bright green and are deliberately not listed here).
   #0e7a52 is 5.4:1 on white.
   ------------------------------------------------------------ */
[data-theme="light"] .checks .ck { background: rgba(14,122,82,0.12); color: #0e7a52; }
[data-theme="light"] .split-tag.available { background: rgba(14,122,82,0.12); color: #0e7a52; }
[data-theme="light"] .pact-s.done { color: #0e7a52; }
[data-theme="light"] .proof-verify { color: #0e7a52; }
[data-theme="light"] .pact-chk { background: rgba(14,122,82,0.12); border-color: rgba(14,122,82,0.45); }
[data-theme="light"] .pact-chk::after { border-color: #0e7a52; }
/* Refused row on light. --red is rgb(244,80,88) = 3.42:1 on the #fff .pcol
   surface, under the 4.5:1 this 11.5px label needs; #b3261e measures 6.54:1. */
[data-theme="light"] .pact-s.blocked { color: #b3261e; }
[data-theme="light"] .pact.p4 .pact-ico { background: rgba(179,38,30,0.10); color: #b3261e; }
[data-theme="light"] .pact.p4 .pact-chk { background: rgba(179,38,30,0.10); border-color: rgba(179,38,30,0.45); }
[data-theme="light"] .pact.p4 .pact-chk::after,
[data-theme="light"] .pact.p4 .pact-chk::before { background: #b3261e; border-color: transparent; }
[data-theme="light"] .pdot.done { background: #0e7a52; box-shadow: none; }
[data-theme="light"] .plan-feats li::before {
  background: rgba(14,122,82,0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%230e7a52' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center no-repeat;
}
[data-theme="light"] .cmp .y::after {
  background: rgba(14,122,82,0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230e7a52' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center no-repeat;
}
[data-theme="light"] .act-card,
[data-theme="light"] .app-frame .act-card { background: rgba(255,255,255,0.04); }

/* background-color, never the shorthand: the shorthand resets
   background-repeat/position and the select's chevron tiles across the field. */
[data-theme="light"] .fld input,
[data-theme="light"] .fld select,
[data-theme="light"] .fld textarea,
[data-theme="light"] .afld-in input,
[data-theme="light"] .otp input,
[data-theme="light"] .news-form input { background-color: #fff; border-color: var(--border-2); }
[data-theme="light"] .fld select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23556' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
[data-theme="light"] .form-msg.ok { color: #12795a; }
[data-theme="light"] .form-msg.err { color: #b03030; }
[data-theme="light"] .fld-err, [data-theme="light"] .afld-err { color: #b03030; }
[data-theme="light"] .cta-band .form-msg.ok { color: #6ee7b7; }
[data-theme="light"] .cta-band .form-msg.err { color: #ff9a9a; }

[data-theme="light"] a.cm-d:hover { color: #0f8c83; }
[data-theme="light"] .auth-brand { background: #0a1030; }
[data-theme="light"] .auth-form { background: var(--space-1); }
[data-theme="light"] .faq-ic::before,
[data-theme="light"] .faq-ic::after { background: #0f8c83; }

/* ------------------------------------------------------------
   Components sitting inside a dark island must keep their
   dark-theme treatment. The light-mode rules above assume a light
   surface, so undo them here — this block must stay last in the
   light section to win on source order.
   ------------------------------------------------------------ */
[data-theme="light"] :is(.hero,.page-hero,.contact-wrap,.err-page) {
  /* accents go back to the bright brand cyan against deep space */
}
[data-theme="light"] :is(.hero,.page-hero,.contact-wrap,.err-page) :is(.pill,.hero-proof li) {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.16);
}
[data-theme="light"] :is(.hero,.page-hero,.contact-wrap,.err-page) :is(
  .hero-proof svg, .ichip, .link-arrow, .shield-badge, .cm-ic, .prov-ic, .it-ic, .flow-ic, .eyebrow .dot
) { color: var(--brand-cyan); }
[data-theme="light"] :is(.hero,.page-hero,.contact-wrap,.err-page) .ichip { border-color: rgba(255,255,255,0.16); }
[data-theme="light"] :is(.hero,.page-hero,.contact-wrap,.err-page) :is(.eyebrow .dot,.pill .dot) {
  box-shadow: 0 0 9px var(--brand-cyan);
}
[data-theme="light"] :is(.hero,.page-hero,.contact-wrap,.err-page) .btn-ghost {
  background: rgba(255,255,255,0.05); color: #fff; border-color: rgba(255,255,255,0.2);
}
[data-theme="light"] :is(.hero,.page-hero,.contact-wrap,.err-page) .btn-ghost:hover { background: rgba(255,255,255,0.1); }
[data-theme="light"] :is(.hero,.page-hero,.contact-wrap,.err-page) .btn-line { color: #fff; border-color: rgba(255,255,255,0.24); }
[data-theme="light"] :is(.hero,.page-hero,.contact-wrap,.err-page) .btn-line:hover { background: rgba(255,255,255,0.08); }
[data-theme="light"] :is(.hero,.page-hero,.contact-wrap,.err-page) .glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
  border-color: rgba(255,255,255,0.10);
  box-shadow: var(--shadow-md);
}
/* background-color, not the background shorthand — the shorthand resets
   background-repeat/position and tiles the select's chevron across the field. */
[data-theme="light"] .contact-wrap :is(.fld input,.fld select,.fld textarea) {
  background-color: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.16); color: #fff;
}
[data-theme="light"] .contact-wrap .fld select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff88' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
[data-theme="light"] .contact-wrap :is(.form-msg.ok,.cf-success .cf-check) { color: #6ee7b7; }
[data-theme="light"] .contact-wrap .form-msg.err { color: #ff9a9a; }
[data-theme="light"] .page-hero .billing-toggle { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); }
[data-theme="light"] .page-hero .billing-toggle button:not(.on) { color: rgba(255,255,255,0.7); }


/* ============================================================
   BRAND ICONS
   Authentic marks (Simple Icons, CC0) rendered as CSS masks so a
   single class paints them in currentColor — one visual weight in
   both themes, no per-logo colour to fight the palette, and no
   third-party requests. Trademarks belong to their owners; shown
   here to identify the tools Nebula connects to.
   ============================================================ */
.bi {
  display: inline-block; width: 18px; height: 18px; flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--bi) center / contain no-repeat;
          mask: var(--bi) center / contain no-repeat;
}
/* Logos read as logos, not as UI accents — so they take the text
   colour rather than the cyan the chip container uses. */
.it-ic .bi, .intg-mk .bi, .prov-ic .bi { background-color: var(--text); }
.prov-ic .bi { width: 20px; height: 20px; }
/* Brands with no authentic mark available get a monogram, never an invented logo. */
.mono-ic { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: -0.03em; color: var(--text); }
.prov-ic.mono-ic { font-size: 13px; }
/* must outrank the light-mode accent colour on .it-ic / .prov-ic, or the
   monograms go teal while the real marks stay ink */
[data-theme="light"] .mono-ic { color: var(--text); }
.bi-asana{--bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.78 12.653c-2.882 0-5.22 2.336-5.22 5.22s2.338 5.22 5.22 5.22 5.22-2.34 5.22-5.22-2.336-5.22-5.22-5.22zm-13.56 0c-2.88 0-5.22 2.337-5.22 5.22s2.338 5.22 5.22 5.22 5.22-2.338 5.22-5.22-2.336-5.22-5.22-5.22zm12-6.525c0 2.883-2.337 5.22-5.22 5.22-2.882 0-5.22-2.337-5.22-5.22 0-2.88 2.338-5.22 5.22-5.22 2.883 0 5.22 2.34 5.22 5.22z'/%3E%3C/svg%3E")}  /* Asana */
.bi-coda{--bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.194 0H2.806A2.01 2.01 0 0 0 .8 2v20c0 1.1.903 2 2.006 2h18.388a2.01 2.01 0 0 0 2.006-2v-.933c-.033-1.2-.067-3.7-.067-4.834 0-.633-.468-1.166-1.07-1.166-.668 0-1.103.4-1.437.733-1.003.9-2.508 1.067-3.812.833-.601-.133-1.17-.3-1.638-.6-1.438-.833-2.374-2.4-2.374-4.066 0-1.667.936-3.2 2.374-4.067.502-.3 1.07-.467 1.638-.6 1.27-.233 2.809-.067 3.812.833.367.334.802.734 1.437.734.602 0 1.07-.534 1.07-1.167 0-1.1.034-3.633.067-4.833V2c0-1.1-.903-2-2.006-2Z'/%3E%3C/svg%3E")}  /* Coda */
.bi-confluence{--bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M.87 18.257c-.248.382-.53.875-.763 1.245a.764.764 0 0 0 .255 1.04l4.965 3.054a.764.764 0 0 0 1.058-.26c.199-.332.454-.763.733-1.221 1.967-3.247 3.945-2.853 7.508-1.146l4.957 2.337a.764.764 0 0 0 1.028-.382l2.364-5.346a.764.764 0 0 0-.382-1 599.851 599.851 0 0 1-4.965-2.361C10.911 10.97 5.224 11.185.87 18.257zM23.131 5.743c.249-.405.531-.875.764-1.25a.764.764 0 0 0-.256-1.034L18.675.404a.764.764 0 0 0-1.058.26c-.195.335-.451.763-.734 1.225-1.966 3.246-3.945 2.85-7.508 1.146L4.437.694a.764.764 0 0 0-1.027.382L1.046 6.422a.764.764 0 0 0 .382 1c1.039.49 3.105 1.467 4.965 2.361 6.698 3.246 12.392 3.029 16.738-4.04z'/%3E%3C/svg%3E")}  /* Confluence */
.bi-dropbox{--bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 1.807L0 5.629l6 3.822 6.001-3.822L6 1.807zM18 1.807l-6 3.822 6 3.822 6-3.822-6-3.822zM0 13.274l6 3.822 6.001-3.822L6 9.452l-6 3.822zM18 9.452l-6 3.822 6 3.822 6-3.822-6-3.822zM6 18.371l6.001 3.822 6-3.822-6-3.822L6 18.371z'/%3E%3C/svg%3E")}  /* Dropbox */
.bi-gcal{--bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.316 5.684H24v12.632h-5.684V5.684zM5.684 24h12.632v-5.684H5.684V24zM18.316 5.684V0H1.895A1.894 1.894 0 0 0 0 1.895v16.421h5.684V5.684h12.632zm-7.207 6.25v-.065c.272-.144.5-.349.687-.617s.279-.595.279-.982c0-.379-.099-.72-.3-1.025a2.05 2.05 0 0 0-.832-.714 2.703 2.703 0 0 0-1.197-.257c-.6 0-1.094.156-1.481.467-.386.311-.65.671-.793 1.078l1.085.452c.086-.249.224-.461.413-.633.189-.172.445-.257.767-.257.33 0 .602.088.816.264a.86.86 0 0 1 .322.703c0 .33-.12.589-.36.778-.24.19-.535.284-.886.284h-.567v1.085h.633c.407 0 .748.109 1.02.327.272.218.407.499.407.843 0 .336-.129.614-.387.832s-.565.327-.924.327c-.351 0-.651-.103-.897-.311-.248-.208-.422-.502-.521-.881l-1.096.452c.178.616.505 1.082.977 1.401.472.319.984.478 1.538.477a2.84 2.84 0 0 0 1.293-.291c.382-.193.684-.458.902-.794.218-.336.327-.72.327-1.149 0-.429-.115-.797-.344-1.105a2.067 2.067 0 0 0-.881-.689zm2.093-1.931l.602.913L15 10.045v5.744h1.187V8.446h-.827l-2.158 1.557zM22.105 0h-3.289v5.184H24V1.895A1.894 1.894 0 0 0 22.105 0zm-3.289 23.5l4.684-4.684h-4.684V23.5zM0 22.105C0 23.152.848 24 1.895 24h3.289v-5.184H0v3.289z'/%3E%3C/svg%3E")}  /* Google Calendar */
.bi-gdrive{--bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.01 1.485c-2.082 0-3.754.02-3.743.047.01.02 1.708 3.001 3.774 6.62l3.76 6.574h3.76c2.081 0 3.753-.02 3.742-.047-.005-.02-1.708-3.001-3.775-6.62l-3.76-6.574zm-4.76 1.73a789.828 789.861 0 0 0-3.63 6.319L0 15.868l1.89 3.298 1.885 3.297 3.62-6.335 3.618-6.33-1.88-3.287C8.1 4.704 7.255 3.22 7.25 3.214zm2.259 12.653-.203.348c-.114.198-.96 1.672-1.88 3.287a423.93 423.948 0 0 1-1.698 2.97c-.01.026 3.24.042 7.222.042h7.244l1.796-3.157c.992-1.734 1.85-3.23 1.906-3.323l.104-.167h-7.249z'/%3E%3C/svg%3E")}  /* Google Drive */
.bi-gmail{--bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M24 5.457v13.909c0 .904-.732 1.636-1.636 1.636h-3.819V11.73L12 16.64l-6.545-4.91v9.273H1.636A1.636 1.636 0 0 1 0 19.366V5.457c0-2.023 2.309-3.178 3.927-1.964L5.455 4.64 12 9.548l6.545-4.91 1.528-1.145C21.69 2.28 24 3.434 24 5.457z'/%3E%3C/svg%3E")}  /* Gmail */
.bi-googledocs{--bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.727 6.727H14V0H4.91c-.905 0-1.637.732-1.637 1.636v20.728c0 .904.732 1.636 1.636 1.636h14.182c.904 0 1.636-.732 1.636-1.636V6.727h-6zm-.545 10.455H7.09v-1.364h7.09v1.364zm2.727-3.273H7.091v-1.364h9.818v1.364zm0-3.273H7.091V9.273h9.818v1.363zM14.727 6h6l-6-6v6z'/%3E%3C/svg%3E")}  /* Google Docs */
.bi-googlemeet{--bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.53 2.13 0 7.75h5.53zm.398 0v5.62h7.608v3.65l5.47-4.45c-.014-1.22.031-2.25-.025-3.46-.148-1.09-1.287-1.47-2.236-1.36zM23.1 4.32c-.802.295-1.358.995-2.047 1.49-2.506 2.05-4.982 4.12-7.468 6.19 3.025 2.59 6.04 5.18 9.065 7.76 1.218.671 1.428-.814 1.328-1.64v-13a.828.828 0 0 0-.877-.825zM.038 8.15v7.7h5.53v-7.7zm13.577 8.1H6.008v5.62c3.864-.006 7.737.011 11.58-.009 1.02-.07 1.618-1.12 1.468-2.07v-2.51l-5.47-4.68v3.65zm-13.577 0c.02 1.44-.041 2.88.033 4.31.162.948 1.158 1.43 2.047 1.31h3.464v-5.62z'/%3E%3C/svg%3E")}  /* Google Meet */
.bi-hubspot{--bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.164 7.93V5.084a2.198 2.198 0 001.267-1.978v-.067A2.2 2.2 0 0017.238.845h-.067a2.2 2.2 0 00-2.193 2.193v.067a2.196 2.196 0 001.252 1.973l.013.006v2.852a6.22 6.22 0 00-2.969 1.31l.012-.01-7.828-6.095A2.497 2.497 0 104.3 4.656l-.012.006 7.697 5.991a6.176 6.176 0 00-1.038 3.446c0 1.343.425 2.588 1.147 3.607l-.013-.02-2.342 2.343a1.968 1.968 0 00-.58-.095h-.002a2.033 2.033 0 102.033 2.033 1.978 1.978 0 00-.1-.595l.005.014 2.317-2.317a6.247 6.247 0 104.782-11.134l-.036-.005zm-.964 9.378a3.206 3.206 0 113.215-3.207v.002a3.206 3.206 0 01-3.207 3.207z'/%3E%3C/svg%3E")}  /* HubSpot */
.bi-jira{--bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.571 11.513H0a5.218 5.218 0 0 0 5.232 5.215h2.13v2.057A5.215 5.215 0 0 0 12.575 24V12.518a1.005 1.005 0 0 0-1.005-1.005zm5.723-5.756H5.736a5.215 5.215 0 0 0 5.215 5.214h2.129v2.058a5.218 5.218 0 0 0 5.215 5.214V6.758a1.001 1.001 0 0 0-1.001-1.001zM23.013 0H11.455a5.215 5.215 0 0 0 5.215 5.215h2.129v2.057A5.215 5.215 0 0 0 24 12.483V1.005A1.001 1.001 0 0 0 23.013 0Z'/%3E%3C/svg%3E")}  /* Jira */
.bi-linear{--bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.886 4.18A11.982 11.982 0 0 1 11.99 0C18.624 0 24 5.376 24 12.009c0 3.64-1.62 6.903-4.18 9.105L2.887 4.18ZM1.817 5.626l16.556 16.556c-.524.33-1.075.62-1.65.866L.951 7.277c.247-.575.537-1.126.866-1.65ZM.322 9.163l14.515 14.515c-.71.172-1.443.282-2.195.322L0 11.358a12 12 0 0 1 .322-2.195Zm-.17 4.862 9.823 9.824a12.02 12.02 0 0 1-9.824-9.824Z'/%3E%3C/svg%3E")}  /* Linear */
.bi-make{--bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.38 3.498c-.27 0-.511.19-.566.465L9.85 18.986a.578.578 0 0 0 .453.678l4.095.826a.58.58 0 0 0 .682-.455l2.963-15.021a.578.578 0 0 0-.453-.678l-4.096-.826a.589.589 0 0 0-.113-.012zm-5.876.098a.576.576 0 0 0-.516.318L.062 17.697a.575.575 0 0 0 .256.774l3.733 1.877a.578.578 0 0 0 .775-.258l6.926-13.781a.577.577 0 0 0-.256-.776L7.762 3.658a.571.571 0 0 0-.258-.062zm11.74.115a.576.576 0 0 0-.576.576v15.426c0 .318.258.578.576.578h4.178a.58.58 0 0 0 .578-.578V4.287a.578.578 0 0 0-.578-.576Z'/%3E%3C/svg%3E")}  /* Make */
.bi-notion{--bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.459 4.208c.746.606 1.026.56 2.428.466l13.215-.793c.28 0 .047-.28-.046-.326L17.86 1.968c-.42-.326-.981-.7-2.055-.607L3.01 2.295c-.466.046-.56.28-.374.466zm.793 3.08v13.904c0 .747.373 1.027 1.214.98l14.523-.84c.841-.046.935-.56.935-1.167V6.354c0-.606-.233-.933-.748-.887l-15.177.887c-.56.047-.747.327-.747.933zm14.337.745c.093.42 0 .84-.42.888l-.7.14v10.264c-.608.327-1.168.514-1.635.514-.748 0-.935-.234-1.495-.933l-4.577-7.186v6.952L12.21 19s0 .84-1.168.84l-3.222.186c-.093-.186 0-.653.327-.746l.84-.233V9.854L7.822 9.76c-.094-.42.14-1.026.793-1.073l3.456-.233 4.764 7.279v-6.44l-1.215-.139c-.093-.514.28-.887.747-.933zM1.936 1.035l13.31-.98c1.634-.14 2.055-.047 3.082.7l4.249 2.986c.7.513.934.653.934 1.213v16.378c0 1.026-.373 1.634-1.68 1.726l-15.458.934c-.98.047-1.448-.093-1.962-.747l-3.129-4.06c-.56-.747-.793-1.306-.793-1.96V2.667c0-.839.374-1.54 1.447-1.632z'/%3E%3C/svg%3E")}  /* Notion */
.bi-outlook{--bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.88 12.04q0 .45-.11.87-.1.41-.33.74-.22.33-.58.52-.37.2-.87.2t-.85-.2q-.35-.21-.57-.55-.22-.33-.33-.75-.1-.42-.1-.86t.1-.87q.1-.43.34-.76.22-.34.59-.54.36-.2.87-.2t.86.2q.35.21.57.55.22.34.31.77.1.43.1.88zM24 12v9.38q0 .46-.33.8-.33.32-.8.32H7.13q-.46 0-.8-.33-.32-.33-.32-.8V18H1q-.41 0-.7-.3-.3-.29-.3-.7V7q0-.41.3-.7Q.58 6 1 6h6.5V2.55q0-.44.3-.75.3-.3.75-.3h12.9q.44 0 .75.3.3.3.3.75V10.85l1.24.72h.01q.1.07.18.18.07.12.07.25zm-6-8.25v3h3v-3zm0 4.5v3h3v-3zm0 4.5v1.83l3.05-1.83zm-5.25-9v3h3.75v-3zm0 4.5v3h3.75v-3zm0 4.5v2.03l2.41 1.5 1.34-.8v-2.73zM9 3.75V6h2l.13.01.12.04v-2.3zM5.98 15.98q.9 0 1.6-.3.7-.32 1.19-.86.48-.55.73-1.28.25-.74.25-1.61 0-.83-.25-1.55-.24-.71-.71-1.24t-1.15-.83q-.68-.3-1.55-.3-.92 0-1.64.3-.71.3-1.2.85-.5.54-.75 1.3-.25.74-.25 1.63 0 .85.26 1.56.26.72.74 1.23.48.52 1.17.81.69.3 1.56.3zM7.5 21h12.39L12 16.08V17q0 .41-.3.7-.29.3-.7.3H7.5zm15-.13v-7.24l-5.9 3.54Z'/%3E%3C/svg%3E")}  /* Microsoft Outlook */
.bi-salesforce{--bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.006 5.415a4.195 4.195 0 013.045-1.306c1.56 0 2.954.9 3.69 2.205.63-.3 1.35-.45 2.1-.45 2.85 0 5.159 2.34 5.159 5.22s-2.31 5.22-5.176 5.22c-.345 0-.69-.044-1.02-.104a3.75 3.75 0 01-3.3 1.95c-.6 0-1.155-.15-1.65-.375A4.314 4.314 0 018.88 20.4a4.302 4.302 0 01-4.05-2.82c-.27.062-.54.076-.825.076-2.204 0-4.005-1.8-4.005-4.05 0-1.5.811-2.805 2.01-3.51-.255-.57-.39-1.2-.39-1.846 0-2.58 2.1-4.65 4.65-4.65 1.53 0 2.85.705 3.72 1.8'/%3E%3C/svg%3E")}  /* Salesforce */
.bi-slack{--bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z'/%3E%3C/svg%3E")}  /* Slack */
.bi-teams{--bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.625 8.127q-.55 0-1.025-.205-.475-.205-.832-.563-.358-.357-.563-.832Q18 6.053 18 5.502q0-.54.205-1.02t.563-.837q.357-.358.832-.563.474-.205 1.025-.205.54 0 1.02.205t.837.563q.358.357.563.837.205.48.205 1.02 0 .55-.205 1.025-.205.475-.563.832-.357.358-.837.563-.48.205-1.02.205zm0-3.75q-.469 0-.797.328-.328.328-.328.797 0 .469.328.797.328.328.797.328.469 0 .797-.328.328-.328.328-.797 0-.469-.328-.797-.328-.328-.797-.328zM24 10.002v5.578q0 .774-.293 1.46-.293.685-.803 1.194-.51.51-1.195.803-.686.293-1.459.293-.445 0-.908-.105-.463-.106-.85-.329-.293.95-.855 1.729-.563.78-1.319 1.336-.756.557-1.67.861-.914.305-1.898.305-1.148 0-2.162-.398-1.014-.399-1.805-1.102-.79-.703-1.312-1.664t-.674-2.086h-5.8q-.411 0-.704-.293T0 16.881V6.873q0-.41.293-.703t.703-.293h8.59q-.34-.715-.34-1.5 0-.727.275-1.365.276-.639.75-1.114.475-.474 1.114-.75.638-.275 1.365-.275t1.365.275q.639.276 1.114.75.474.475.75 1.114.275.638.275 1.365t-.275 1.365q-.276.639-.75 1.113-.475.475-1.114.75-.638.276-1.365.276-.188 0-.375-.024-.188-.023-.375-.058v1.078h10.875q.469 0 .797.328.328.328.328.797zM12.75 2.373q-.41 0-.78.158-.368.158-.638.434-.27.275-.428.639-.158.363-.158.773 0 .41.158.78.159.368.428.638.27.27.639.428.369.158.779.158.41 0 .773-.158.364-.159.64-.428.274-.27.433-.639.158-.369.158-.779 0-.41-.158-.773-.159-.364-.434-.64-.275-.275-.639-.433-.363-.158-.773-.158zM6.937 9.814h2.25V7.94H2.814v1.875h2.25v6h1.875zm10.313 7.313v-6.75H12v6.504q0 .41-.293.703t-.703.293H8.309q.152.809.556 1.5.405.691.985 1.19.58.497 1.318.779.738.281 1.582.281.926 0 1.746-.352.82-.351 1.436-.966.615-.616.966-1.43.352-.815.352-1.752zm5.25-1.547v-5.203h-3.75v6.855q.305.305.691.452.387.146.809.146.469 0 .879-.176.41-.175.715-.48.304-.305.48-.715t.176-.879Z'/%3E%3C/svg%3E")}  /* Microsoft Teams */
.bi-webex{--bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.78 7.376c.512 1.181.032 2.644-1.11 3.106-2.157.888-3-1.295-3-1.295-.236-.55-.727-1.496-1.335-1.496-.204 0-.503 0-.94.844-.229.443-.434 1.185-.616 1.84l-.09.32c-.373-1.587-.821-3.454-1.536-4.816-.195-.38-.42-.74-.673-1.08a5.135 5.135 0 0 1 1.743-1.337 4.891 4.891 0 0 1 2.112-.463c1.045 0 2.765.338 4.227 2.227.167.206.317.424.448.654.278.441.52.904.726 1.383l.043.113zM.02 8.4C-.15 7.105.8 5.845 1.953 5.755c1.794-.157 2.36 1.385 2.455 1.89l.022.137c.07.44.29 1.838.48 2.744.078.4.244 1.013.353 1.416l.006.022.026.092c.11.4.232.799.362 1.193.185.548.399 1.085.641 1.61.47.955.93 1.45 1.367 1.45.203 0 .512 0 .96-.878.283-.59.512-1.208.684-1.845.373 1.598.811 3.128 1.495 4.456.205.406.444.794.715 1.16a5.124 5.124 0 0 1-1.742 1.338 4.88 4.88 0 0 1-2.112.461c-1.548 0-3.727-.698-5.339-4.005a22.407 22.407 0 0 1-1.078-2.824 26.848 26.848 0 0 1-.693-2.656 48.56 48.56 0 0 1-.215-1.114C.191 9.603.074 8.872.02 8.4zm22.047-2.645-.202-.022h-.052c.222.392.421.797.597 1.215l.053.113c.322.76.346 1.614.068 2.391a3.079 3.079 0 0 1-1.552 1.749 2.93 2.93 0 0 1-1.228.28 3.115 3.115 0 0 1-.854-.135c-.299 1.182-.768 2.634-1.195 3.511-.427.877-.93 1.451-1.378 1.451-.192 0-.501 0-.95-.877a10.746 10.746 0 0 1-.683-1.845 38.722 38.722 0 0 1-.396-1.575 12.67 12.67 0 0 1-.136-.598l-.002-.01c-.406-1.778-.865-3.645-1.655-5.142A8.263 8.263 0 0 0 11.52 4.8a5.136 5.136 0 0 0-1.748-1.34A4.892 4.892 0 0 0 7.654 3c-1.036 0-2.754.338-4.217 2.228.466.223.867.562 1.164.984.305.433.499.933.565 1.458.076.563.256 1.654.47 2.688l.001.007c.021.11.042.221.073.342.126-.34.25-.642.38-.955l.112-.271.128-.293c.235-.55.726-1.496 1.324-1.496.213 0 .513 0 .95.844.296.606.532 1.239.706 1.89.138.507.276 1.047.394 1.587.04.148.07.296.101.444l.006.028c.427 1.879.875 3.69 1.644 5.187.159.317.34.622.545.911.15.215.31.422.48.62 1.27 1.45 2.733 1.8 3.843 1.8 1.548 0 3.738-.698 5.35-4.006.822-1.7 1.515-4.208 1.772-5.48.256-1.27.449-2.419.534-3.115.04-.307.023-.618-.051-.918-.075-.299-.205-.579-.382-.825a2.247 2.247 0 0 0-.653-.607 2.143 2.143 0 0 0-.826-.296z'/%3E%3C/svg%3E")}  /* Webex */
.bi-zapier{--bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.157 0A4.151 4.151 0 0 0 0 4.161v15.678A4.151 4.151 0 0 0 4.157 24h15.682A4.152 4.152 0 0 0 24 19.839V4.161A4.152 4.152 0 0 0 19.839 0H4.157Zm10.61 8.761h.03a.577.577 0 0 1 .23.038.585.585 0 0 1 .201.124.63.63 0 0 1 .162.431.612.612 0 0 1-.162.435.58.58 0 0 1-.201.128.58.58 0 0 1-.23.042.529.529 0 0 1-.235-.042.585.585 0 0 1-.332-.328.559.559 0 0 1-.038-.235.613.613 0 0 1 .17-.431.59.59 0 0 1 .405-.162Zm2.853 1.572c.03.004.061.004.095.004.325-.011.646.064.937.219.238.144.431.355.552.609.128.279.189.582.185.888v.193a2 2 0 0 1 0 .219h-2.498c.003.227.075.45.204.642a.78.78 0 0 0 .646.265.714.714 0 0 0 .484-.136.642.642 0 0 0 .23-.318l.915.257a1.398 1.398 0 0 1-.28.537c-.14.159-.321.284-.521.355a2.234 2.234 0 0 1-.836.136 1.923 1.923 0 0 1-1.001-.245 1.618 1.618 0 0 1-.665-.703 2.221 2.221 0 0 1-.227-1.036 1.95 1.95 0 0 1 .48-1.398 1.9 1.9 0 0 1 1.3-.488Zm-9.607.023c.162.004.325.026.48.079.207.065.4.174.563.314.26.302.393.692.366 1.088v2.276H8.53l-.109-.711h-.065c-.064.163-.155.31-.272.439a1.122 1.122 0 0 1-.374.264 1.023 1.023 0 0 1-.453.083 1.334 1.334 0 0 1-.866-.264.965.965 0 0 1-.329-.801.993.993 0 0 1 .076-.431 1.02 1.02 0 0 1 .242-.363 1.478 1.478 0 0 1 1.043-.303h.952v-.181a.696.696 0 0 0-.136-.454.553.553 0 0 0-.438-.154.695.695 0 0 0-.378.086.48.48 0 0 0-.193.254l-.99-.144a1.26 1.26 0 0 1 .257-.563c.14-.174.321-.302.533-.378.261-.091.54-.136.82-.129.053-.003.106-.007.163-.007Zm4.384.007c.174 0 .347.038.506.114.182.083.34.211.458.374.257.423.377.911.351 1.406a2.53 2.53 0 0 1-.355 1.448 1.148 1.148 0 0 1-1.009.517c-.204 0-.401-.045-.582-.136a1.052 1.052 0 0 1-.48-.457 1.298 1.298 0 0 1-.114-.234h-.045l.004 1.784h-1.059v-4.713h.904l.117.805h.057c.068-.208.177-.401.328-.56a1.129 1.129 0 0 1 .843-.344h.076v-.004Zm7.559.084h.903l.113.805h.053a1.37 1.37 0 0 1 .235-.484.813.813 0 0 1 .313-.242.82.82 0 0 1 .39-.076h.234v1.051h-.401a.662.662 0 0 0-.313.008.623.623 0 0 0-.272.155.663.663 0 0 0-.174.26.683.683 0 0 0-.027.314v1.875h-1.054v-3.666Zm-17.515.003h3.262v.896L3.73 13.104l.034.113h1.973l.042.9H2.4v-.9l1.931-1.754-.045-.117H2.441v-.896Zm11.815 0h1.055v3.659h-1.055V10.45Zm3.443.684.019.016a.69.69 0 0 0-.351.045.756.756 0 0 0-.287.204c-.11.155-.174.336-.189.522h1.545c-.034-.526-.257-.787-.74-.787h.003Zm-5.718.163c-.026 0-.057 0-.083.004a.78.78 0 0 0-.31.053.746.746 0 0 0-.257.189 1.016 1.016 0 0 0-.204.695v.064c-.015.257.057.507.204.711a.634.634 0 0 0 .253.196.638.638 0 0 0 .314.061.644.644 0 0 0 .578-.265c.14-.223.204-.48.189-.74a1.216 1.216 0 0 0-.181-.711.677.677 0 0 0-.503-.257Zm-4.509 1.266a.464.464 0 0 0-.268.102.373.373 0 0 0-.114.276c0 .053.008.106.027.155a.375.375 0 0 0 .087.132.576.576 0 0 0 .397.11v.004a.863.863 0 0 0 .563-.182.573.573 0 0 0 .211-.457v-.14h-.903Z'/%3E%3C/svg%3E")}  /* Zapier */
.bi-zoom{--bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.033 14.649H.743a.74.74 0 0 1-.686-.458.74.74 0 0 1 .16-.808L3.19 10.41H1.06A1.06 1.06 0 0 1 0 9.35h3.957c.301 0 .57.18.686.458a.74.74 0 0 1-.161.808L1.51 13.59h2.464c.585 0 1.06.475 1.06 1.06zM24 11.338c0-1.14-.927-2.066-2.066-2.066-.61 0-1.158.265-1.537.686a2.061 2.061 0 0 0-1.536-.686c-1.14 0-2.066.926-2.066 2.066v3.311a1.06 1.06 0 0 0 1.06-1.06v-2.251a1.004 1.004 0 0 1 2.013 0v2.251c0 .586.474 1.06 1.06 1.06v-3.311a1.004 1.004 0 0 1 2.012 0v2.251c0 .586.475 1.06 1.06 1.06zM16.265 12a2.728 2.728 0 1 1-5.457 0 2.728 2.728 0 0 1 5.457 0zm-1.06 0a1.669 1.669 0 1 0-3.338 0 1.669 1.669 0 0 0 3.338 0zm-4.82 0a2.728 2.728 0 1 1-5.458 0 2.728 2.728 0 0 1 5.457 0zm-1.06 0a1.669 1.669 0 1 0-3.338 0 1.669 1.669 0 0 0 3.338 0z'/%3E%3C/svg%3E")}  /* Zoom */

/* ============================ THEME TOGGLE ============================ */
/* Icon utility in the bar: no chrome, just the glyph — the chip container
   competed with the CTA pills next to it. */
.theme-toggle {
  width: 38px; height: 38px; border-radius: var(--r-pill); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-2); border: 1px solid transparent; background: transparent;
  transition: color .15s, background .15s, border-color .15s;
}
.theme-toggle:hover { color: var(--text); background: rgba(255,255,255,0.08); }
[data-theme="light"] .theme-toggle:hover { background: rgba(20,24,60,0.06); }
/* the floating one on the login page keeps its container — nothing anchors it there */
.theme-toggle.floating { border-color: var(--border-2); background: var(--surface); }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle.floating { position: fixed; top: 22px; right: 26px; z-index: 50; background: var(--surface); backdrop-filter: blur(8px); }
@media (max-width: 940px) { .theme-toggle { width: 38px; height: 38px; } }

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ============================ PRINT ============================ */
@media print {
  .nav, .mobile-menu, .page-bg, .aurora, .theme-toggle, .footer-social, .skip { display: none !important; }
  body { background: #fff; color: #000; }
  .reveal { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
}