/* ============================================================
   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); }
.act-list { display: flex; flex-direction: column; gap: 10px; }
.act-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: rgba(255,255,255,0.04); border: 1px solid var(--border); }
html.anim-ready .act-card.a1 { animation: fadeUp .5s cubic-bezier(.2,.7,.2,1) .3s both; }
html.anim-ready .act-card.a2 { animation: fadeUp .5s cubic-bezier(.2,.7,.2,1) .65s both; }
html.anim-ready .act-card.a3 { animation: fadeUp .5s cubic-bezier(.2,.7,.2,1) 1s both; }
.act-ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.act-ico svg { width: 17px; height: 17px; }
.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-main { flex: 1; min-width: 0; }
.act-t { font-size: 13px; font-weight: 600; }
.act-s { font-size: 11.5px; margin-top: 2px; }
.act-s.done { color: #6ee7b7; } .act-s.staged { color: var(--amber); }
.act-chk { width: 20px; height: 20px; border-radius: 99px; flex-shrink: 0; position: relative; border: 1.6px solid var(--border-2); }
.act-card.a2 .act-chk, .act-card.a3 .act-chk { border-color: rgba(52,211,153,0.5); background: rgba(52,211,153,0.14); }
.act-card.a2 .act-chk::after, .act-card.a3 .act-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); }
.act-card.a1 .act-chk { border-color: rgba(230,168,60,0.6); }
.act-card.a1 .act-chk::after { content: ""; position: absolute; inset: 5px; border-radius: 99px; background: var(--amber); }
.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; }
.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); }
.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; }
.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; gap: 18px; 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; }
#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); }
.auth-card { width: 100%; max-width: 400px; }
.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; }
[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; }
}