/* ============================================================
   Sunnybrook — modern SaaS visual system
   Tokens, typography, base components
   ============================================================ */

:root {
  /* Brand */
  --brand-indigo: #252E78;
  --brand-indigo-700: #1B2360;
  --brand-indigo-900: #121847;
  --brand-teal: #198574;
  --brand-teal-600: #14705E;
  /* Teal as TEXT only. #198574 measures 4.22:1 on --bg and 3.83:1 inside the chip
     wash, both under the 4.5:1 that WCAG 2.2 AA wants for text this size. This
     darker step is 5.3:1 on --bg. Fills, dots and borders keep --brand-teal,
     where the contrast minimum does not apply. */
  --brand-teal-text: #146B5E;
  /* Same idea for amber: never set small --brand-sun on a light surface. */
  --brand-sun-text: #8C5A12;
  --brand-sun: #F4A93D;       /* warm accent — subtle nod to "sunny" */
  --brand-sun-soft: #F8D49A;

  /* Neutrals (warm) */
  --ink-900: #0F1530;
  --ink-700: #2A3158;
  --ink-500: #5A6184;
  --ink-400: #7A82A6;
  --ink-300: #A8AFC7;
  --line:    #E6E2D8;
  --line-strong: #D4CFC1;

  /* Form validation. Not a brand colour — the one place the palette needs a red,
     kept muted so it reads as correction rather than alarm. 5.1:1 on --surface. */
  --form-error: #B4392F;

  /* Surface */
  --bg:      #FAF7F0;          /* warm off-white */
  --bg-alt:  #F3EFE4;          /* slightly deeper */
  --surface: #FFFFFF;
  --surface-ink: #0F1530;

  /* Dark sections */
  --dark-bg: #0E1230;
  --dark-bg-alt: #161B45;
  --dark-line: rgba(255,255,255,0.08);
  --dark-ink: rgba(255,255,255,0.78);

  /* Radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(15,21,48,0.06);
  --shadow-md: 0 8px 24px -8px rgba(15,21,48,0.12), 0 2px 6px rgba(15,21,48,0.04);
  --shadow-lg: 0 24px 60px -20px rgba(15,21,48,0.25), 0 8px 20px -6px rgba(15,21,48,0.08);
  --shadow-glow-indigo: 0 24px 80px -24px rgba(37,46,120,0.45);
  --shadow-glow-teal: 0 24px 80px -24px rgba(25,133,116,0.4);

  /* Type */
  --font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;

  /* Spacing scale */
  --container: 1280px;
  --gutter: clamp(20px, 4vw, 40px);
  --section: clamp(80px, 12vw, 144px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-feature-settings: "ss01", "cv11", "tnum";
  color: var(--ink-900);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ----- Typography ----- */
.h-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-teal-text);
}
.h-display {
  font-weight: 800;
  font-size: clamp(40px, 6.4vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--ink-900);
  text-wrap: balance;
}
.h-1 {
  font-weight: 800;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.h-2 {
  font-weight: 700;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.h-3 {
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.h-4 {
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.lede {
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.5;
  color: var(--ink-500);
  font-weight: 400;
  text-wrap: pretty;
  max-width: 64ch;
}
.body { color: var(--ink-700); }
.muted { color: var(--ink-500); }

/* ----- Layout ----- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section); }
.section-sm { padding-block: clamp(56px, 8vw, 96px); }

/* Skip link — first focusable element on every page, so a keyboard user can jump
   past ~20 repeated nav stops. WCAG 2.2 SC 2.4.1. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  /* Pinned, not tokenised: --brand-indigo lifts to #7A86F2 in dark mode, where
     white text on it measures 3.2:1. This bar is the same in both themes. */
  background: #1B2360;
  color: #fff;
  font-weight: 600;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; }

/* ----- Buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.2s ease;
  white-space: nowrap;
  line-height: 1;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--brand-indigo);
  color: #fff;
  box-shadow: 0 6px 18px -8px rgba(37,46,120,0.6), inset 0 1px 0 rgba(255,255,255,0.12);
}
.btn-primary:hover { background: var(--brand-indigo-700); box-shadow: 0 10px 28px -10px rgba(37,46,120,0.7); }
.btn-teal {
  background: var(--brand-teal);
  color: #fff;
  box-shadow: 0 6px 18px -8px rgba(25,133,116,0.55), inset 0 1px 0 rgba(255,255,255,0.12);
}
.btn-teal:hover { background: var(--brand-teal-600); }
.btn-outline {
  background: transparent;
  color: var(--ink-900);
  border-color: var(--line-strong);
}
.btn-outline:hover { border-color: var(--ink-900); background: rgba(15,21,48,0.04); }
.btn-ghost { background: transparent; color: var(--ink-700); }
.btn-ghost:hover { color: var(--ink-900); background: rgba(15,21,48,0.04); }
.btn-light {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border-color: rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
}
.btn-light:hover { background: rgba(255,255,255,0.16); }
.btn-lg { padding: 16px 26px; font-size: 16px; }

/* Focus ring. DESIGN.md makes the indigo ring a brand responsibility; without this
   every button and link fell back to the UA ring, which sits dark-on-dark inside
   the #0E1230 CTA band. WCAG 2.2 SC 2.4.7. */
:focus-visible {
  outline: 3px solid var(--brand-indigo);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
.bg-dark :focus-visible,
.footer :focus-visible,
.btn-teal:focus-visible,
.btn-light:focus-visible { outline-color: #fff; }

/* ----- Chips / Eyebrows ----- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  border-radius: var(--r-pill);
  background: rgba(25,133,116,0.08);
  border: 1px solid rgba(25,133,116,0.18);
  color: var(--brand-teal-text);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.01em;
}
.chip .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-teal);
  box-shadow: 0 0 0 3px rgba(25,133,116,0.18);
}
.chip-indigo {
  background: rgba(37,46,120,0.07);
  border-color: rgba(37,46,120,0.18);
  color: var(--brand-indigo);
}
.chip-indigo .dot { background: var(--brand-indigo); box-shadow: 0 0 0 3px rgba(37,46,120,0.18); }
.chip-sun {
  background: rgba(244,169,61,0.12);
  border-color: rgba(244,169,61,0.32);
  color: #8C5A12;
}
.chip-sun .dot { background: var(--brand-sun); box-shadow: 0 0 0 3px rgba(244,169,61,0.22); }
.chip-dark {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
  color: #fff;
}
.chip-dark .dot { background: var(--brand-sun); box-shadow: 0 0 0 3px rgba(244,169,61,0.22); }

/* ----- Cards ----- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}

/* ----- Nav ----- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  background: rgba(250,247,240,0.78);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.nav.scrolled {
  border-bottom-color: var(--line);
  background: rgba(250,247,240,0.92);
}
.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 3px;
  /* Without these the logo shrinks below its own content as the viewport narrows
     and the wordmark runs under the first nav link. */
  flex-shrink: 0;
  white-space: nowrap;
  /* Matches the master lockup: caps, medium weight, light tracking. Montserrat's
     caps run ~7% wider than the lockup's face, so tracking stays near zero to
     keep the wordmark-to-mark proportion right. */
  text-transform: uppercase;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.04em;
  /* Green from the mark on light backgrounds. Dark mode overrides this in
     dark-theme.css, and the footer pins itself to white inline. */
  color: var(--brand-teal-text);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}
.nav-link {
  position: relative;
  padding: 8px 14px;
  font-weight: 500;
  font-size: 14.5px;
  color: var(--ink-700);
  border-radius: var(--r-sm);
  transition: color 0.15s ease, background 0.15s ease;
}
.nav-link:hover { color: var(--ink-900); background: rgba(15,21,48,0.04); }
.nav-link.is-active { color: var(--brand-indigo); }
.nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-indigo);
}
.nav-cta { display: flex; align-items: center; gap: 10px; }

/* mobile nav */
/* flex-shrink:0 because .nav-logo also refuses to shrink; without it the toggle
   was squeezed to 16px wide at 320px, under the 24px of WCAG 2.2 SC 2.5.8. */
.nav-toggle { display: none; flex-shrink: 0; background: none; border: 0; color: var(--ink-900); padding: 8px; border-radius: var(--r-sm); }
/* Logo + 7 links + CTA need ~1116px. Below that the links used to stay visible and
   collide with the wordmark, so the switch to the hamburger happens here rather
   than at 880px. Between 1160px and 880px you still get the "Book a demo" button
   next to the hamburger; production.css drops that at 880. */
@media (max-width: 1160px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  /* .nav-links carried flex:1, which is what pushed the right-hand controls over.
     With the links hidden that spacer is gone, so the theme toggle, CTA and
     hamburger have to be pinned right explicitly. */
  .nav-cta { margin-left: auto; }
}

/* ----- Hero band ----- */
.hero {
  position: relative;
  padding-top: clamp(56px, 8vw, 96px);
  padding-bottom: clamp(64px, 9vw, 120px);
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 15% 0%, rgba(244,169,61,0.22), transparent 70%),
    radial-gradient(50% 60% at 100% 15%, rgba(25,133,116,0.18), transparent 70%),
    radial-gradient(80% 60% at 50% 100%, rgba(37,46,120,0.12), transparent 70%);
  pointer-events: none;
}
.hero-grid-mask {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(15,21,48,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,21,48,0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(60% 60% at 50% 40%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(60% 60% at 50% 40%, #000 0%, transparent 75%);
  pointer-events: none;
}

/* ----- Footer ----- */
.footer {
  background: var(--dark-bg);
  color: rgba(255,255,255,0.7);
  padding: 80px 0 32px;
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(50% 40% at 90% 0%, rgba(244,169,61,0.12), transparent 65%),
    radial-gradient(50% 40% at 10% 0%, rgba(25,133,116,0.15), transparent 65%);
  pointer-events: none;
}
.footer a { color: rgba(255,255,255,0.7); }
.footer a:hover { color: #fff; }
/* Footer column headings are h2 (siblings of the page's other section headings).
   They were h5, which skipped two levels after every page's h2s. */
.footer .footer-h {
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 16px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 48px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-col li { font-size: 14px; }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 32px;
  margin-top: 56px;
  border-top: 1px solid var(--dark-line);
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  position: relative;
}
@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ----- Reveal on scroll -----
   Gated on html.js, which the inline head script sets. Only an IntersectionObserver
   ever adds .in, so without this gate a blocked or failed script leaves every
   section at opacity:0 and the page renders as a hero over blank canvas. */
html.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.22,.61,.36,1);
}
html.js .reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.06s; }
.reveal-delay-2 { transition-delay: 0.12s; }
.reveal-delay-3 { transition-delay: 0.18s; }
.reveal-delay-4 { transition-delay: 0.24s; }
.reveal-delay-5 { transition-delay: 0.3s; }

/* ----- Stats ----- */
.stat {
  padding: 28px 0;
  border-top: 1px solid var(--line);
}
.stat-value {
  font-size: clamp(36px, 4.8vw, 56px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.stat-value .unit { color: var(--brand-teal); }
.stat-label {
  margin-top: 14px;
  font-size: 14px;
  color: var(--ink-500);
  max-width: 28ch;
}

/* ----- Feature cards ----- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.feature-grid > * { background: var(--surface); padding: 36px 32px; }
@media (max-width: 880px) {
  .feature-grid { grid-template-columns: 1fr; }
}
.feature-ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, var(--brand-indigo), var(--brand-indigo-700));
  color: #fff;
  margin-bottom: 22px;
  box-shadow: 0 8px 24px -10px rgba(37,46,120,0.5);
}
.feature-ico.teal { background: linear-gradient(180deg, var(--brand-teal), var(--brand-teal-600)); box-shadow: 0 8px 24px -10px rgba(25,133,116,0.5); }
.feature-ico.sun { background: linear-gradient(180deg, var(--brand-sun), #D88A1D); box-shadow: 0 8px 24px -10px rgba(244,169,61,0.5); }

/* ----- Modal ----- */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(14,18,48,0.55);
  backdrop-filter: blur(8px);
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  /* opacity:0 alone leaves the close button and every form field in the tab order.
     visibility takes them out of it; it is transitioned so the fade still plays. */
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.modal-backdrop.open { opacity: 1; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.modal {
  width: min(560px, 100%);
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: 36px;
  box-shadow: var(--shadow-lg);
  /* The demo form runs longer than the viewport on short screens; scroll inside
     the card rather than clipping the submit button. 48px = backdrop padding. */
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(8px) scale(0.98);
  transition: transform 0.3s cubic-bezier(.22,.61,.36,1);
}
.modal-backdrop.open .modal { transform: translateY(0) scale(1); }

/* ---- HubSpot form (developer embed) ----------------------------------
   The developer embed renders HubSpot's markup into our DOM, and their v4
   stylesheet reads --hsf-* custom properties with fallbacks. So the form is
   themed by mapping those onto our tokens rather than fighting their CSS with
   overrides — which also means dark mode follows for free, since the tokens
   are what [data-theme="dark"] already redefines.
   Their rules are `[data-hsfc-id=Renderer] .hsfc-x` (0,2,0) and are injected
   after ours, so the few real overrides below qualify with [data-portal-id]
   to win on specificity instead of resorting to !important. */
.hs-form-html {
  --hsf-global__font-family: var(--font);
  --hsf-global__font-size: 15px;
  --hsf-global__color: var(--ink-700);
  --hsf-global__error-color: var(--form-error);

  --hsf-field-label__font-family: var(--font);
  --hsf-field-label__font-size: 13px;
  --hsf-field-label__color: var(--ink-700);
  --hsf-field-label-requiredindicator__color: var(--ink-400);
  --hsf-field-description__font-family: var(--font);
  --hsf-field-description__font-size: 13px;
  --hsf-field-description__color: var(--ink-500);

  /* Inputs mirror `.field input` above. The dropdown popup derives from these
     same variables, so it inherits the treatment without extra rules. */
  --hsf-field-input__font-family: var(--font);
  --hsf-field-input__font-size: 15px;
  --hsf-field-input__color: var(--ink-900);
  --hsf-field-input__background-color: var(--surface);
  --hsf-field-input__placeholder-color: var(--ink-400);
  --hsf-field-input__border-color: var(--line-strong);
  --hsf-field-input__border-style: solid;
  --hsf-field-input__border-width: 1px;
  --hsf-field-input__border-radius: var(--r-md);
  --hsf-field-input__padding: 12px 14px;
  --hsf-field-dropdown-options__border-radius: var(--r-md);

  --hsf-field-checkbox__background-color: var(--surface);
  --hsf-field-checkbox__border-color: var(--line-strong);
  --hsf-field-checkbox__border-style: solid;
  --hsf-field-checkbox__border-width: 1px;
  --hsf-field-checkbox__color: var(--brand-indigo);

  --hsf-richtext__font-family: var(--font);
  --hsf-richtext__font-size: 13px;
  --hsf-richtext__color: var(--ink-500);
  --hsf-field-footer__font-family: var(--font);
  --hsf-field-footer__font-size: 13px;
  --hsf-field-footer__color: var(--ink-500);
  --hsf-erroralert__font-family: var(--font);
  --hsf-erroralert__font-size: 13px;
  --hsf-erroralert__color: var(--form-error);
  --hsf-infoalert__font-family: var(--font);
  --hsf-infoalert__font-size: 13px;
  --hsf-infoalert__color: var(--ink-500);

  /* Submit button matches .btn / .btn-primary, full-width inside the modal. */
  --hsf-button__font-family: var(--font);
  --hsf-button__font-size: 15px;
  --hsf-button__font-weight: 600;
  --hsf-button__color: #fff;
  --hsf-button__background-color: var(--brand-indigo);
  --hsf-button__border-color: transparent;
  --hsf-button__border-style: solid;
  --hsf-button__border-width: 1px;
  --hsf-button__border-radius: var(--r-pill);
  --hsf-button__padding: 12px 24px;
  --hsf-button__width: 100%;
  --hsf-button__box-shadow: 0 6px 18px -8px rgba(37,46,120,0.6), inset 0 1px 0 rgba(255,255,255,0.12);
  --hsf-button--hover__background-color: var(--brand-indigo-700);
  --hsf-button--hover__color: #fff;
  --hsf-button--hover__border-color: transparent;
  --hsf-button--focus__background-color: var(--brand-indigo-700);
  --hsf-button--focus__color: #fff;
  --hsf-button--focus__border-color: transparent;

  --hsf-background__background-color: transparent;
  --hsf-background__border-width: 0;
  --hsf-background__padding: 0;
  --hsf-row__vertical-spacing: 16px;
  --hsf-row__horizontal-spacing: 14px;
  --hsf-module__vertical-spacing: 16px;
}

/* On a .bg-dark band the form sits on deep indigo in *both* themes, so it needs
   the translucent-white field treatment rather than the token defaults. Values
   match the contact card this replaced. */
.bg-dark .hs-form-html {
  --hsf-global__color: rgba(255,255,255,0.78);
  --hsf-field-label__color: rgba(255,255,255,0.7);
  --hsf-field-label-requiredindicator__color: rgba(255,255,255,0.45);
  --hsf-field-input__color: #fff;
  --hsf-field-input__background-color: rgba(255,255,255,0.06);
  --hsf-field-input__border-color: rgba(255,255,255,0.14);
  --hsf-field-input__placeholder-color: rgba(255,255,255,0.4);
  --hsf-field-checkbox__background-color: rgba(255,255,255,0.06);
  --hsf-field-checkbox__border-color: rgba(255,255,255,0.24);
  --hsf-richtext__color: rgba(255,255,255,0.6);
  --hsf-field-description__color: rgba(255,255,255,0.6);
  --hsf-field-footer__color: rgba(255,255,255,0.6);
  --hsf-infoalert__color: rgba(255,255,255,0.7);
  --hsf-global__error-color: #FF9A8C;
  --hsf-erroralert__color: #FF9A8C;
  --hsf-button__background-color: var(--brand-teal);
  --hsf-button--hover__background-color: var(--brand-teal-600);
  --hsf-button--focus__background-color: var(--brand-teal-600);
  --hsf-button__box-shadow: none;
}
.bg-dark .hs-form-html[data-portal-id] .hsfc-TextInput:focus {
  border-color: rgba(255,255,255,0.5);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.10);
}

/* No --hsf-* variable covers focus, and HubSpot ships no :focus rule for text
   inputs at all — so without this the field falls back to the UA outline. */
.hs-form-html[data-portal-id] .hsfc-TextInput:focus {
  outline: 0;
  border-color: var(--brand-indigo);
  box-shadow: 0 0 0 4px rgba(37,46,120,0.12);
}
/* Their hover glow reads as a smudge next to our flat fields, which only
   respond on focus. */
.hs-form-html[data-portal-id] .hsfc-TextInput:hover { box-shadow: none; }

/* Utility */
.bg-alt { background: var(--bg-alt); }
.bg-dark { background: var(--dark-bg); color: rgba(255,255,255,0.85); }
.bg-dark .h-1, .bg-dark .h-2, .bg-dark .h-display, .bg-dark .stat-value { color: #fff; }
.bg-dark .lede, .bg-dark .muted, .bg-dark .body { color: rgba(255,255,255,0.7); }
.bg-dark .card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); }
.bg-dark .h-eyebrow { color: var(--brand-sun); }

/* selection */
::selection { background: var(--brand-indigo); color: #fff; }