/* ==========================================================================
   global.css: tokens, reset, typography, layout, header, footer, buttons
   Palette: custom deep teal. Deliberately not a default framework blue.
   Contrast verified: primary #0A6E5F on #FFFFFF = 6.25:1
                      primary #2FBFA6 on #161615 = 8.02:1
                      body ink #0B0B0B on #FFFFFF = 20.4:1
                      body ink #FFFFFF on #161615 = 18.3:1
   Status colors carry an icon and a text label in every use, so color never
   carries meaning alone.
   ========================================================================== */

:root {
  color-scheme: light;

  --page: #f8f8f5;
  --surface: #ffffff;
  --tint: #f1f1ec;
  --tint-2: #ebebe4;

  --ink: #0b0b0b;
  --ink-2: #52514e;
  --ink-muted: #6f6d67;

  --rule: rgba(11, 11, 11, 0.11);
  --rule-strong: rgba(11, 11, 11, 0.2);

  --primary: #0a6e5f;
  --primary-hover: #07544a;
  --primary-soft: #e4f1ee;
  --primary-edge: rgba(10, 110, 95, 0.28);
  /* Ink that sits ON the primary fill. Light mode: white on deep teal = 6.25:1.
     Dark mode flips this: white on the bright teal is only 2.28:1, so the dark
     theme uses near-black instead (7.27:1). */
  --on-primary: #ffffff;

  --good: #0ca30c;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;
  --good-soft: rgba(12, 163, 12, 0.1);
  --warning-soft: rgba(224, 150, 10, 0.13);
  --critical-soft: rgba(208, 59, 59, 0.1);

  --ink-invert: #ffffff;
  --band: #0c2b26;

  --shadow-1: 0 1px 2px rgba(6, 40, 34, 0.05), 0 2px 6px rgba(6, 40, 34, 0.045);
  --shadow-2: 0 1px 2px rgba(6, 40, 34, 0.06), 0 10px 26px -8px rgba(6, 40, 34, 0.14);

  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-head: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", monospace;

  --max-width: 1160px;
  --max-wide: 1320px;
  --max-narrow: 780px;
  --radius: 12px;
  --radius-sm: 8px;
  --gutter: 1.5rem;
  --ease: cubic-bezier(0.34, 1.4, 0.64, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --page: #0d0d0d;
    --surface: #161615;
    --tint: #121211;
    --tint-2: #1c1c1a;

    --ink: #ffffff;
    --ink-2: #c3c2b7;
    --ink-muted: #979589;

    --rule: rgba(255, 255, 255, 0.13);
    --rule-strong: rgba(255, 255, 255, 0.24);

    --primary: #2fbfa6;
    --primary-hover: #63d6c1;
    --primary-soft: rgba(47, 191, 166, 0.15);
    --primary-edge: rgba(47, 191, 166, 0.4);
    --on-primary: #06231e;

    --good-soft: rgba(12, 163, 12, 0.17);
    --warning-soft: rgba(250, 178, 25, 0.15);
    --critical-soft: rgba(208, 59, 59, 0.16);

    --band: #0a2320;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.45), 0 12px 30px -10px rgba(0, 0, 0, 0.6);
  }
}

/* ------------------------------- reset --------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 0.2vw + 1.03rem, 1.125rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  max-width: 100%;
}

/* Grid and flex children default to min-width: auto and refuse to shrink below
   their min-content width, which is how a single wide child widens the whole
   document. Every layout track on this page is allowed to shrink instead. */
.hero__grid > *,
.diagram__grid > *,
.threat-grid > *,
.stepper > *,
.metric-grid > *,
.cta-panel__inner > *,
.cta-band__inner > *,
.site-footer__inner > * {
  min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ----------------------------- typography ------------------------------ */

h1,
h2,
h3,
h4 {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

h2 {
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
}

h3 {
  font-size: clamp(1.2rem, 1.5vw, 1.45rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
}

p {
  margin: 0 0 1.1em;
}

p:last-child {
  margin-bottom: 0;
}

strong {
  font-weight: 650;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 1rem;
}

.prose {
  max-width: 68ch;
}

.prose--narrow {
  max-width: 62ch;
}

.prose > p,
.faq__answer > p {
  color: var(--ink-2);
}

.lede {
  font-size: 1.1875rem;
  line-height: 1.62;
  color: var(--ink) !important;
}

/* First sentence under a heading is the extractable answer. Slightly raised
   ink so it reads as the answer rather than as supporting detail. */
.snippet {
  color: var(--ink) !important;
}

/* ------------------------------- layout -------------------------------- */

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.container--wide {
  max-width: var(--max-wide);
}

.container--narrow {
  max-width: var(--max-narrow);
}

.section {
  padding: clamp(2.75rem, 5vw, 4.5rem) 0;
  border-top: 1px solid var(--rule);
}

.section--tint {
  background: var(--tint);
}

.section > .container > h2,
.section > .container > .prose:first-of-type {
  margin-bottom: 1.25rem;
}

.section h3 {
  margin: 2.25rem 0 0.85rem;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--primary);
  color: var(--on-primary);
  padding: 0.6rem 1rem;
  border-radius: 0 0 var(--radius-sm) 0;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

/* -------------------------------- icons -------------------------------- */

.sprite,
.badge svg,
.btn__icon,
.tcard__icon svg,
.step__icon svg,
.mtile__icon svg,
.cta-panel__icon svg,
.site-mark__glyph,
.nav-toggle svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------- buttons ------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.75rem 1.15rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.18s ease, background-color 0.18s ease,
    border-color 0.18s ease, color 0.18s ease;
}

.btn__icon {
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
  transition: transform 0.18s var(--ease);
}

.btn:hover .btn__icon {
  transform: translateX(2px);
}

.btn--lg {
  font-size: 1rem;
  padding: 0.9rem 1.4rem;
}

.btn--sm {
  font-size: 0.875rem;
  padding: 0.55rem 0.9rem;
}

.btn--primary {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--shadow-1);
}

.btn--primary:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}

.btn--primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-1);
}

.btn--quiet {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}

.btn--quiet:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
}

.btn--quiet:active {
  transform: translateY(0);
}

.btn--ghost {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary-edge);
}

.btn--ghost:hover {
  background: var(--primary-soft);
  transform: translateY(-1px);
}

.btn--ghost:active {
  transform: translateY(0);
}

.btn--invert {
  background: #fff;
  color: #0c2b26;
}

.btn--invert:hover {
  background: #eafaf6;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.5);
}

.btn--invert:active {
  transform: translateY(0);
}

:where(a, button, summary, details):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ------------------------------- header -------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}

.site-header__inner {
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.site-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}

.site-mark__glyph {
  width: 30px;
  height: 30px;
  color: var(--primary);
  flex: 0 0 auto;
}

.site-mark__label {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

.site-mark__label-sep {
  color: var(--primary);
  padding: 0 0.25em;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  cursor: pointer;
}

.nav-toggle svg {
  width: 22px;
  height: 22px;
}

.nav-toggle:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.site-nav {
  display: none;
  width: 100%;
  padding: 0.5rem 0 1rem;
  border-top: 1px solid var(--rule);
}

.site-nav.is-open {
  display: block;
}

.site-nav__list {
  list-style: none;
  margin: 0 0 0.85rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.site-nav__list a {
  display: block;
  padding: 0.5rem 0;
  font-size: 0.9375rem;
  font-weight: 550;
  color: var(--ink-2);
  text-decoration: none;
}

.site-nav__list a:hover {
  color: var(--primary);
}

.site-nav__list a.is-active {
  color: var(--primary);
  font-weight: 650;
}

/* Desktop nav starts at 900px, not 768px. With four page links plus the button,
   the 768 to 899 band was tight enough to wrap the sticky bar, so those widths
   fall back to the hamburger instead. */
@media (min-width: 900px) {
  .nav-toggle {
    display: none;
  }

  .site-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: auto;
    padding: 0;
    border-top: 0;
  }

  .site-nav__list {
    flex-direction: row;
    gap: 1.25rem;
    margin: 0;
  }

  .site-nav__list a {
    padding: 0;
  }
}

/* ------------------------------- footer -------------------------------- */

.site-footer {
  background: var(--tint-2);
  border-top: 1px solid var(--rule);
  padding: 2.25rem 0;
}

.site-footer__inner {
  display: grid;
  gap: 1.25rem;
}

.site-footer__purpose {
  margin: 0;
  max-width: 52ch;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
}

.site-footer__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
}

.site-footer__nav a {
  font-size: 0.875rem;
  font-weight: 550;
  color: var(--ink-2);
  text-decoration: none;
}

.site-footer__nav a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.site-footer__stamp,
.site-footer__copy {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
}

.site-footer__cta {
  justify-self: start;
}

@media (min-width: 768px) {
  .site-footer__inner {
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .site-footer__meta {
    grid-column: 1;
  }

  .site-footer__cta {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
  }
}