/* Home-only visual system. Loaded after styles.css; every rule is scoped to html.da-home[data-theme="dark"] so guides and other pages are untouched. */
@font-face {
  font-family: inter;
  src: url(/fonts/inter-400.woff2) format("woff2");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: inter;
  src: url(/fonts/inter-600.woff2) format("woff2");
  font-display: swap;
  font-weight: 600;
  font-style: normal;
}

/* Tokens: dark is the default; the inline head script sets data-theme from storage or the OS preference. */
html.da-home[data-theme="dark"] {
  color-scheme: dark;
  background: #0a0a0b;
}
/* styles.css paints body white; without this the glass header and any gap or overscroll show white in dark mode. */
html.da-home[data-theme="dark"] body {
  background: #0a0a0b;
}
html.da-home[data-theme="dark"] {
  --bg: #0a0a0b;
  /* the guide, privacy and partner pages read these older tokens for body text and links */
  --text-color-primary: var(--ink);
  --text-color-secondary: var(--text);
  --primary-color: var(--brand-ink);
  --bg-2: #0e0e10;
  --card: #131316;
  --ink: #f4f4f5;
  --text: #b4b4bc;
  --muted: #8e8e98;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.16);
  --brand: #3e6ff4;
  --brand-btn: #3a68ee;
  --brand-ink: #9db6ff;
  --brand-soft: rgba(62, 111, 244, 0.12);
  --brand-line: rgba(62, 111, 244, 0.4);
  --brand-2: #9db6ff;
  --brand-2-text: #9db6ff;
  --violet: #9db6ff;
  --grad: linear-gradient(135deg, #3e6ff4, #3e6ff4);
  --grad-soft: linear-gradient(135deg, #3e6ff4, #3e6ff4);
  --dark: #070708;
  --dark-2: #131316;
  --on-dark: #f4f4f5;
  --on-dark-2: #a1a1aa;
  --on-dark-line: rgba(255, 255, 255, 0.08);
  --glow: rgba(62, 111, 244, 0.15);
  --glass: rgba(10, 10, 11, 0.72);
  --sh-1: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --sh-2: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  --sh-3: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 60px -24px rgba(0, 0, 0, 0.7);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Type */
html.da-home[data-theme="dark"] {
  color: var(--text);
  background-color: var(--bg);
}
html.da-home[data-theme="dark"] h1,
html.da-home[data-theme="dark"] h2,
html.da-home[data-theme="dark"] h3,
html.da-home[data-theme="dark"] h4 {
  color: var(--ink);
}
html.da-home[data-theme="dark"] .lead {
  color: var(--text);
}
html.da-home[data-theme="dark"] .eyebrow,
html.da-home[data-theme="dark"] .eyebrow.on-dark {
  color: var(--brand-ink);
}
html.da-home[data-theme="dark"] .eyebrow.line:after,
html.da-home[data-theme="dark"] .eyebrow.on-dark.line:after {
  background: var(--brand-line);
}
html.da-home[data-theme="dark"] ::selection {
  background: var(--brand);
  color: #fff;
}
html.da-home[data-theme="dark"] :focus-visible,
html.da-home[data-theme="dark"] .hdr:not(.is-scrolled):not(.nav-open):not(.nav-closing) :focus-visible,
html.da-home[data-theme="dark"] .subhero :focus-visible,
html.da-home[data-theme="dark"] .cta :focus-visible,
html.da-home[data-theme="dark"] .foot :focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 3px;
}

/* Buttons: the accent appears only on CTAs, active states and focus. */
html.da-home[data-theme="dark"] .btn {
  transition: transform 0.2s var(--ease),
    background 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
}
html.da-home[data-theme="dark"] .btn-primary,
html.da-home[data-theme="dark"] .hdr:not(.is-scrolled) .hdr-cta .btn {
  background: var(--brand-btn);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 8px 24px -10px var(--brand);
}
html.da-home[data-theme="dark"] .btn-primary:hover {
  background: var(--brand-btn);
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16) inset, 0 12px 32px -8px var(--brand);
}
html.da-home[data-theme="dark"] .btn-outline,
html.da-home[data-theme="dark"] .btn-ghost-d {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}
html.da-home[data-theme="dark"] .btn-outline:hover,
html.da-home[data-theme="dark"] .btn-ghost-d:hover {
  background: var(--brand-soft);
  border-color: var(--brand-line);
  color: var(--ink);
}
html.da-home[data-theme="dark"] .btn-lite {
  background: var(--brand-btn);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 12px 32px -10px var(--brand);
}
html.da-home[data-theme="dark"] .btn-lite:hover {
  background: var(--brand-btn);
}

/* Header: sticky glass bar */
html.da-home[data-theme="dark"] .hdr,
html.da-home[data-theme="dark"] .hdr.is-scrolled {
  background: transparent;
  box-shadow: none;
  transition: background 0.25s,
    border-color 0.25s;
}
html.da-home[data-theme="dark"] .hdr.is-scrolled {
  background: var(--bg);
  border-bottom-color: var(--line);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  html.da-home[data-theme="dark"] .hdr.is-scrolled {
    background: var(--glass);
    -webkit-backdrop-filter: saturate(1.4) blur(16px);
    backdrop-filter: saturate(1.4) blur(16px);
  }
}
html.da-home[data-theme="dark"] .nav-btn,
html.da-home[data-theme="dark"] .hdr.is-scrolled .nav-btn {
  color: var(--text);
}
html.da-home[data-theme="dark"] .nav-btn:hover,
html.da-home[data-theme="dark"] .hdr.is-scrolled .nav-btn:hover {
  color: var(--ink);
  background: var(--line);
}
html.da-home[data-theme="dark"] .nav-btn.nav-sf {
  border-color: var(--line-2);
}
html.da-home[data-theme="dark"] .brand-mark-dark {
  display: block;
}
html.da-home[data-theme="dark"] .brand-mark-light,
html.da-home[data-theme="dark"] .hdr.is-scrolled .brand-mark-light {
  display: none;
}
html.da-home[data-theme="dark"] .hdr.is-scrolled .brand-mark-dark {
  display: block;
}
html.da-home[data-theme="dark"] .brand-word {
  color: var(--ink);
}
html.da-home[data-theme="dark"] .hdr-burger,
html.da-home[data-theme="dark"] .hdr.is-scrolled .hdr-burger {
  color: var(--ink);
}
html.da-home[data-theme="dark"] .hdr-burger:hover {
  background: var(--line);
}
html.da-home .theme-toggle {
  display: none;
}
html.da-home .theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin-inline-start: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s;
}
html.da-home .theme-toggle:hover {
  background: var(--line);
  border-color: var(--line-2);
}
html.da-home .theme-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html.da-home .theme-toggle .ic-sun {
  display: block;
}
html.da-home .theme-toggle .ic-moon {
  display: none;
}
html.da-home[data-theme="light"] .theme-toggle .ic-sun {
  display: none;
}
html.da-home[data-theme="light"] .theme-toggle .ic-moon {
  display: block;
}
@media (max-width: 1180px) {
  html.da-home[data-theme="dark"] .hdr.nav-closing,
  html.da-home[data-theme="dark"] .hdr.nav-open {
    background: var(--bg);
    box-shadow: none;
    border-bottom-color: var(--line);
  }
  html.da-home[data-theme="dark"] .nav {
    background: var(--bg);
  }
  html.da-home[data-theme="dark"] .nav .nav-btn {
    color: var(--ink);
  }
  html.da-home[data-theme="dark"] .nav .nav-btn:hover {
    background: var(--line);
  }
}
@media (max-width: 600px) {
  html.da-home .theme-toggle {
    margin-inline-start: auto;
  }
}


/* Hero headline: between the production (64px) and redesign (72px) sizes, less 2px, in both themes. */
html.da-home body.home .subhero-h1 {
  font-size: clamp(38px, 5.1vw + 2px, 66px);
  text-wrap: balance;
}
@media (max-width: 340px) {
  html.da-home body.home .subhero-h1 {
    font-size: 34px;
  }
}

/* Light theme keeps the production header: the toggle follows its link colours (white on the gradient, ink once scrolled). */
html.da-home:not([data-theme="dark"]) .theme-toggle {
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.35);
}
html.da-home:not([data-theme="dark"]) .theme-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.6);
}
html.da-home:not([data-theme="dark"]) .hdr.is-scrolled .theme-toggle,
html.da-home:not([data-theme="dark"]) .hdr.nav-open .theme-toggle {
  color: var(--ink);
  border-color: var(--line);
}
html.da-home:not([data-theme="dark"]) .hdr.is-scrolled .theme-toggle:hover,
html.da-home:not([data-theme="dark"]) .hdr.nav-open .theme-toggle:hover {
  background: var(--line);
}
html.da-home .theme-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Privacy card: centred at the bottom in both themes (production pinned it bottom-left). */
@media (min-width: 720px) {
  html.da-home .consent {
    left: 0;
    right: 0;
    margin-inline: auto;
  }
}

/* Where the burger shows, the toggle matches it: a bare 44px icon button, no box. */
@media (max-width: 1180px) {
  html.da-home .theme-toggle,
  html.da-home:not([data-theme="dark"]) .theme-toggle,
  html.da-home:not([data-theme="dark"]) .hdr.is-scrolled .theme-toggle,
  html.da-home:not([data-theme="dark"]) .hdr.nav-open .theme-toggle {
    border-color: transparent;
    border-radius: 10px;
  }
}

/* Hero: from 1200px the stat row is one line, so the copy and media columns share a bottom edge and the
   stat cards line up with the partner badge. Below that the stats wrap and the columns stay centred. */
@media (min-width: 1200px) {
  html.da-home .subhero--media .subhero-in {
    align-items: end;
  }
}

/* Hero: production kept two columns down to 760px, where the media column is too narrow for the
   partner badge (it ran past the viewport edge and was clipped). Stack below 1000px instead. */
@media (max-width: 999px) {
  html.da-home .subhero--media .subhero-in {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }
  html.da-home .subhero--media .subhero-media {
    margin-top: 32px;
  }
}