:root {
  --navy-950: #07111d;
  --navy-900: #0b1726;
  --navy-800: #12243a;
  --navy-700: #1f3853;
  --blue-500: #2f7de1;
  --blue-400: #65a3ee;
  --sky-100: #e8f1fb;
  --paper: #f4f2ed;
  --paper-deep: #ebe8e1;
  --white: #fff;
  --ink: #101b28;
  --muted: #5d6977;
  --line-dark: rgba(255, 255, 255, 0.17);
  --line-light: rgba(16, 27, 40, 0.14);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --shell: 76rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Aptos", "Segoe UI Variable", "Segoe UI", sans-serif;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button, a { font: inherit; }

.skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 20;
  padding: .75rem 1rem;
  color: var(--navy-950);
  background: var(--white);
  transform: translateY(-160%);
  transition: transform 160ms var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

.section-shell,
.site-header,
.hero-grid {
  width: min(var(--shell), calc(100% - 4rem));
  margin-inline: auto;
}

.hero {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  color: var(--white);
  background: var(--navy-950);
}
.hero-media,
.hero-shade,
.landing-media { position: absolute; inset: 0; }
.hero-media { z-index: -3; }
.landing-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity 480ms var(--ease-out);
}
.landing-media.is-active { opacity: 1; }
.hero-shade {
  z-index: -2;
  background:
    radial-gradient(circle at 78% 42%, rgba(35, 92, 151, .18), transparent 32%),
    linear-gradient(90deg, rgba(5, 14, 25, .96) 0%, rgba(5, 14, 25, .82) 46%, rgba(5, 14, 25, .49) 100%),
    linear-gradient(0deg, rgba(5, 14, 25, .72), transparent 42%);
}

.site-header {
  min-height: 6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  border-bottom: 1px solid var(--line-dark);
}
.brand,
.site-footer img {
  display: inline-flex;
  width: 10rem;
}
.brand img,
.site-footer img { display: block; width: 100%; height: auto; }
.brand img,
.site-footer img { filter: brightness(0) invert(1); }
.site-nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.5vw, 2.2rem); }
.site-nav a {
  color: rgba(255, 255, 255, .72);
  font-size: .88rem;
  font-weight: 600;
  transition: color 150ms ease, background-color 150ms ease, transform 150ms var(--ease-out);
}
.site-nav a:hover { color: var(--white); }
.site-nav a:focus-visible,
.button:focus-visible,
.text-link:focus-visible,
.quiet-link:focus-visible,
.support-contact a:focus-visible,
.site-footer a:focus-visible { outline: 3px solid var(--blue-400); outline-offset: 4px; }
.sign-in-link {
  min-height: 2.75rem;
  padding: 1rem 1rem;
  gap: .55rem;
  color: var(--white) !important;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: .35rem;
}
.sign-in-link:active { transform: scale(.97); }

.hero-grid {
  min-height: calc(100dvh - 6rem);
  padding: clamp(4.5rem, 9vh, 7.5rem) 0 clamp(5rem, 10vh, 8rem);
  display: flex;
  align-items: center;
}
.hero-copy { max-width: 44rem; }
.eyebrow,
.section-kicker {
  margin: 0;
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.eyebrow { color: #a9c9ee; }
.hero h1 {
  max-width: 13ch;
  margin: 1.25rem 0 0;
  font-size: clamp(3.2rem, 6.3vw, 6.2rem);
  line-height: .96;
  font-weight: 650;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.hero-lead {
  max-width: 38rem;
  margin: 1.7rem 0 0;
  color: rgba(255, 255, 255, .72);
  font-size: clamp(1.05rem, 1.5vw, 1.24rem);
  line-height: 1.65;
  text-wrap: pretty;
}
.hero-actions { margin-top: 2.25rem; display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem; }
.button {
  min-height: 3.25rem;
  padding: 0 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  border-radius: .35rem;
  font-size: .92rem;
  font-weight: 700;
  transition: transform 150ms var(--ease-out), background-color 150ms ease, box-shadow 150ms ease;
}
.button-primary { color: var(--white); background: var(--blue-500); box-shadow: 0 1rem 2.5rem rgba(4, 28, 58, .26); }
.button-primary:hover { background: #236fce; transform: translateY(-1px); }
.button:active { transform: scale(.97); }
.text-link,
.quiet-link {
  color: rgba(255, 255, 255, .76);
  font-size: .9rem;
  font-weight: 650;
  transition: color 150ms ease;
}
.text-link:hover { color: var(--white); }
.hero-proof {
  margin: clamp(3rem, 7vh, 5rem) 0 0;
  padding: 1.35rem 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
  list-style: none;
  border-top: 1px solid var(--line-dark);
}
.hero-proof li { display: flex; flex-direction: column; gap: .35rem; }
.hero-proof strong { font-size: .88rem; font-weight: 650; }
.hero-proof span { color: rgba(255, 255, 255, .5); font-size: .75rem; line-height: 1.4; }

.platform-section { padding: clamp(6rem, 11vw, 10rem) 0; background: var(--paper); }
.platform-grid { display: grid; grid-template-columns: minmax(18rem, .78fr) minmax(24rem, 1.22fr); gap: clamp(4rem, 9vw, 9rem); }
.section-kicker { color: #527398; }
.section-intro h2,
.access-section h2,
.support-section h2 {
  margin: 1.2rem 0 0;
  font-size: clamp(2.35rem, 4.5vw, 4.3rem);
  line-height: 1.03;
  letter-spacing: -.045em;
  font-weight: 620;
  text-wrap: balance;
}
.section-intro > p:last-child,
.support-copy {
  max-width: 34rem;
  margin: 1.5rem 0 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
}
.capability-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-light); }
.capability-list li { padding: 1.8rem 0 2rem; display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; border-bottom: 1px solid var(--line-light); }
.capability-list > li > span { padding-top: .15rem; color: #6e7f90; font: 600 .72rem/1 "SFMono-Regular", Consolas, monospace; }
.capability-list strong { font-size: 1.08rem; font-weight: 700; }
.capability-list p { max-width: 35rem; margin: .6rem 0 0; color: var(--muted); line-height: 1.6; }

/* SMS reuses .platform-section; only the ground shifts so the two read as separate chapters. */
.sms-section { background: var(--paper-deep); }
.sms-cta-row { margin: 2rem 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 1.25rem; }
.sms-quiet { color: var(--muted); border-bottom: 1px solid var(--line-light); }
.sms-quiet:hover { color: var(--ink); }

.access-section { padding: clamp(5rem, 9vw, 8rem) 0; color: var(--white); background: var(--blue-500); }
.access-section .section-kicker { color: rgba(255, 255, 255, .68); }
.access-grid { display: grid; grid-template-columns: 1.15fr .75fr; align-items: end; gap: 5rem; }
.access-section h2 { max-width: 12ch; }
.access-action { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.access-action p { max-width: 29rem; margin: 0 0 .5rem; color: rgba(255, 255, 255, .74); line-height: 1.6; }
.button-dark { background: var(--navy-950); }
.button-dark:hover { background: var(--navy-800); transform: translateY(-1px); }
.quiet-link { margin-top: .3rem; border-bottom: 1px solid rgba(255, 255, 255, .4); }
.quiet-link:hover { color: var(--white); }

.support-section { padding: clamp(5rem, 9vw, 8rem) 0; background: var(--paper-deep); }
.support-grid { display: grid; grid-template-columns: 1.2fr .8fr .65fr; gap: clamp(2.5rem, 6vw, 6rem); }
.support-section h2 { font-size: clamp(2.2rem, 3.5vw, 3.5rem); }
.support-contact { margin: 0; padding-top: .35rem; display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; font-style: normal; }
.support-contact span { margin-bottom: .75rem; color: #647281; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.support-contact strong { font-size: 1rem; }
.support-contact a { color: #42566c; font-size: .9rem; line-height: 1.5; overflow-wrap: anywhere; transition: color 150ms ease; }
.support-contact a:hover { color: var(--blue-500); }

.site-footer { padding: 2.2rem 0; color: rgba(255, 255, 255, .58); background: var(--navy-950); }
.footer-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2.5rem; }
.site-footer img { width: 7.5rem; }
.site-footer p { margin: 0; font-size: .72rem; }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1.75rem; }
.site-footer nav { display: flex; gap: 1.5rem; font-size: .72rem; }
.site-footer a { transition: color 150ms ease; }
.site-footer a:hover { color: var(--white); }

@media (hover: hover) and (pointer: fine) {
  .sign-in-link:hover { background: rgba(255, 255, 255, .1); transform: translateY(-1px); }
}

@media (max-width: 900px) {
  .section-shell, .site-header, .hero-grid { width: min(100% - 2.5rem, var(--shell)); }
  .site-nav > a:not(.sign-in-link) { display: none; }
  .hero-copy { padding-top: 1rem; }
  .hero h1 { font-size: clamp(3rem, 11vw, 5.4rem); }
  .platform-grid, .access-grid { grid-template-columns: 1fr; gap: 3.5rem; }
  .support-grid { grid-template-columns: 1fr 1fr; }
  .support-grid > div:first-child { grid-column: 1 / -1; }
  .footer-inner { grid-template-columns: 1fr auto; }
  .site-footer p { grid-row: 2; }
}

@media (max-width: 560px) {
  .section-shell, .site-header, .hero-grid { width: calc(100% - 2rem); }
  .site-header { min-height: 5rem; }
  .brand { width: 8.3rem; }
  .sign-in-link { min-height: 2.5rem; padding: 0 .8rem; }
  .hero-grid { min-height: calc(100dvh - 5rem); padding: 4rem 0 5rem; }
  .hero h1 { max-width: 14ch; font-size: clamp(2.75rem, 13vw, 4.2rem); }
  .hero-lead { font-size: 1rem; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .hero-proof { grid-template-columns: 1fr; gap: .9rem; }
  .hero-proof li { display: grid; grid-template-columns: 7.2rem 1fr; align-items: baseline; }
  .platform-grid { gap: 2.5rem; }
  .support-grid { grid-template-columns: 1fr; }
  .support-grid > div:first-child { grid-column: auto; }
  .support-contact { padding-top: 1.5rem; border-top: 1px solid var(--line-light); }
  .footer-inner { grid-template-columns: 1fr; }
  .site-footer p { grid-row: auto; }
  .footer-links { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .site-footer nav { align-items: flex-start; flex-direction: column; gap: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .landing-media { transform: none; }
}

/* ==========================================================================
   Static content pages (privacy, terms, contact). Plain paper background,
   not the hero video, so the inverted-white logo/nav text from .site-header
   doesn't apply here — these get their own light top bar.
   ========================================================================== */

.static-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--line-light);
}
.static-topbar .brand img { filter: none; }
.static-back {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--muted);
  font-size: .88rem;
  font-weight: 650;
  transition: color 150ms ease;
}
.static-back:hover { color: var(--ink); }

.static-content { padding: clamp(3rem, 7vw, 5rem) 0 clamp(4rem, 8vw, 6rem); }
.static-content h1 {
  margin: 1rem 0 0;
  max-width: 24ch;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  font-weight: 650;
}
.static-updated { margin: .9rem 0 0; color: var(--muted); font-size: .85rem; }
.draft-badge {
  display: inline-flex;
  align-items: center;
  margin-top: .9rem;
  padding: .3rem .65rem;
  border-radius: .3rem;
  background: #fbecec;
  color: #a63838;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.static-body {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  max-width: 46rem;
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}
.static-body h2 { margin: 0 0 .6rem; font-size: 1.25rem; font-weight: 650; color: var(--ink); }
.static-body p,
.static-body li { margin: 0; color: #3c4a58; font-size: 1rem; line-height: 1.7; }
.static-body ul { margin: .6rem 0 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .5rem; }
.static-body a { color: var(--blue-500); font-weight: 600; }
.static-body a:hover { text-decoration: underline; }

.contact-cards {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(14rem, 1fr));
  gap: 1.5rem;
  max-width: 46rem;
}
.contact-card {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  border: 1px solid var(--line-light);
  border-radius: .5rem;
  background: var(--white);
}
.contact-card span:first-child { color: #527398; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.contact-card strong { font-size: 1.05rem; }
.contact-card a { color: var(--ink); font-size: .94rem; }
.contact-card a:hover { color: var(--blue-500); }

@media (max-width: 560px) {
  .contact-cards { grid-template-columns: 1fr; }
}