@charset "utf-8";
/* ═══════════════════════════════════════════════
   CHANGING THIS FILE? BUMP THE VERSION TOKEN.

   Every page loads it as `tooplate-neon-carbon-style.css?v=20260814a`.
   Cloudflare serves it with a four-hour cache and no revalidation, so a
   returning visitor keeps their old copy for up to four hours after a
   change ships — and a page missing its new rules does not look slightly
   wrong, it looks broken. That is exactly what happened on 2026-08-14: the
   confirmation pages were correct on the server and rendered as a giant
   unstyled envelope in a browser still holding the morning's stylesheet.

   So: change this file, change `?v=` in ALL SIX pages, in the same commit.
   e2e/asset-versioning.spec.ts fails if a page carries no token or if the
   six disagree. It cannot tell whether the token was bumped — that part is
   a habit, not a check.
   ═══════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════
   Compliance MVP — Site Stylesheet
   Brand: "Meridian + Sentinel" (Claude Design), aligned to the
   app's own token/style decisions (2026-07-22) — see
   Design/Marketing Site.dc.html for the source mockup and
   compliancemvp-frontend/app/globals.css for the app's tokens.
   ═══════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   1. RESET & VARIABLES
   ═══════════════════════════════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* 2026-07-31: synced to the app's "surface ladder" dark theme (see
   compliancemvp-frontend/app/globals.css) — page darkest, panels a step
   lighter, same navy hue family. Values must match the app's dark theme
   whenever it changes. */
:root {
  --carbon: #080D1E;
  --carbon-panel: #0E1633;
  --carbon-field: #1A2450;
  --carbon-line: #272D4D;
  --carbon-line-bright: #313A63;
  --cyan: #4D8CFF;
  --cyan-dim: rgba(77, 140, 255, 0.14);
  --cyan-ghost: rgba(77, 140, 255, 0.05);
  --cyan-glow: rgba(77, 140, 255, 0.3);
  --cyan-fill-hover: rgba(77, 140, 255, 0.063);
  --white: #E8ECF0;
  --white-dim: #A6AEC6;
  --green: #00FFA3;
  --purple: #CF59FF;
  --header-h: 64px;
  --ease-expo: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'IBM Plex Sans', sans-serif;
  background: var(--carbon);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* Subtle scanline overlay across the whole page */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(77, 140, 255, 0.008) 2px,
    rgba(77, 140, 255, 0.008) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

/* ═══════════════════════════════════════════════
   2. BUTTONS — matches the app's button system (2026-07-31,
   Claude Design): field-shade fill, quiet neutral border, accent
   ONLY on the 2px bottom edge via the semantic variants. Hover
   lightens the surface (a solid mix — the old semi-transparent
   tint composited darker than rest, a real bug); pressing
   collapses the bottom edge 1px as the press cue. The green
   .btn-go edge marks the page's advancing action (Join Waitlist);
   Contact Us / Send Message stay neutral.
   ═══════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--carbon-field);
  color: var(--white);
  border: 1px solid var(--carbon-line-bright);
  border-bottom-width: 2px;
  border-radius: 6px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 13px 26px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:hover {
  background: color-mix(in srgb, var(--carbon-line-bright) 45%, var(--carbon-field));
  color: var(--white);
}
.btn:active {
  border-bottom-width: 1px;
  margin-top: 1px;
}
.btn:focus-visible {
  outline: 2px solid #E7EAF2;
  outline-offset: 2px;
}
.btn-go { border-bottom-color: var(--green); }
.btn-go:hover { background: color-mix(in srgb, var(--green) 8%, var(--carbon-field)); }
.btn-go:active { background: color-mix(in srgb, var(--green) 14%, var(--carbon-field)); }

/* ═══════════════════════════════════════════════
   3. NAV LINKS — shared by the header nav and the mobile
   flyout nav. Same dim -> white hover -> blue (current
   section) convention used throughout the app.
   ═══════════════════════════════════════════════ */
.nav-link {
  color: var(--white-dim);
  text-decoration: none;
  transition: color 0.3s;
}
.nav-link:hover { color: #fff; }
.nav-link.active { color: var(--cyan); }

/* ═══════════════════════════════════════════════
   4. HEADER (top nav — replaces the old icon sidebar so the
   nav stays visible no matter where you are on the page)
   ═══════════════════════════════════════════════ */
.hud-header {
  position: sticky;
  top: 0;
  z-index: 500;
  height: var(--header-h);
  background: var(--carbon-panel);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 40px;
  border-bottom: 1px solid var(--carbon-line);
}

.hud-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.hud-logo-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.hud-title {
  font-family: 'Source Serif 4', serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
}

.hud-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.hud-nav .nav-link {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
}

.hud-right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.hud-status {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--white-dim);
  white-space: nowrap;
}

.hud-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
}

/* ═══════════════════════════════════════════════
   5. HERO SECTION
   ═══════════════════════════════════════════════ */
.hero-core {
  position: relative;
  padding: 96px 48px 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  overflow: hidden;
}

.hero-core-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 60% at 50% 50%, rgba(77, 140, 255, 0.06) 0%, transparent 70%),
    radial-gradient(circle at 20% 80%, rgba(77, 140, 255, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(77, 140, 255, 0.02) 0%, transparent 40%);
  pointer-events: none;
}

.hero-grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, var(--carbon-line) 1px, transparent 1px),
    linear-gradient(180deg, var(--carbon-line) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: 0.3;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, black 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, black 20%, transparent 80%);
}

.hero-content {
  text-align: center;
  position: relative;
  z-index: 2;
  max-width: 780px;
}

.hero-badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
  opacity: 0;
  animation: fadeSlideUp 0.8s var(--ease-expo) 0.1s forwards;
}

.hero-badge {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 0.06em;
  border-radius: 5px;
  padding: 6px 12px;
}

.hero-badge.blue { color: var(--cyan); border: 1px solid rgba(77, 140, 255, 0.35); }
.hero-badge.green { color: var(--green); border: 1px solid rgba(0, 255, 163, 0.35); }
.hero-badge.purple { color: var(--purple); border: 1px solid rgba(207, 89, 255, 0.35); }

.hero-tag {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-bottom: 18px;
  opacity: 0;
  animation: fadeSlideUp 0.8s var(--ease-expo) 0.2s forwards;
}

.hero-glow-title {
  font-family: 'Source Serif 4', serif;
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 700;
  line-height: 1.05;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  opacity: 0;
  animation: fadeGlow 1.2s var(--ease-expo) 0.4s forwards;
}

.hero-logo-icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

.hero-sub {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--white-dim);
  margin-top: 18px;
  line-height: 1.5;
  opacity: 0;
  animation: fadeSlideUp 0.8s var(--ease-expo) 0.7s forwards;
}

.hero-sub strong {
  color: var(--white);
  font-weight: 600;
}

.hero-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
  opacity: 0;
  animation: fadeSlideUp 0.8s var(--ease-expo) 0.9s forwards;
}

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeGlow {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

/* ═══════════════════════════════════════════════
   6. DASHBOARD WRAPPER
   ═══════════════════════════════════════════════ */
.dashboard {
  display: block;
  background: var(--carbon-line);
}

.dashboard > * {
  background: var(--carbon);
}

/* ═══════════════════════════════════════════════
   7. CONTENT SECTIONS
   ═══════════════════════════════════════════════ */
.content-section {
  padding: 100px 24px;
  border-bottom: 1px solid var(--carbon-line);
}

.content-section-inner {
  max-width: 880px;
  margin: 0 auto;
}

.content-eyebrow {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.content-heading {
  font-family: 'Source Serif 4', serif;
  font-size: 2rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 24px;
}

.content-lead {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--white-dim);
  line-height: 1.6;
  margin-bottom: 16px;
}

.feature-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 32px;
}

.feature-column {
  padding: 22px;
  background: var(--carbon-panel);
  border: 1px solid var(--carbon-line);
  border-radius: 12px;
}

/* Glow + icon color match each card's development-status color */
.feature-column.completed { box-shadow: 0 0 12px -2px rgba(77, 140, 255, 0.35), 0 10px 28px -12px rgba(77, 140, 255, 0.55); }
.feature-column.testing { box-shadow: 0 0 12px -2px rgba(207, 89, 255, 0.35), 0 10px 28px -12px rgba(207, 89, 255, 0.55); }
.feature-column.in-development { box-shadow: 0 0 12px -2px rgba(0, 255, 163, 0.35), 0 10px 28px -12px rgba(0, 255, 163, 0.55); }

.feature-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke-width: 1.5;
  margin-bottom: 16px;
}

.feature-column.completed .feature-icon svg { stroke: var(--cyan); }
.feature-column.testing .feature-icon svg { stroke: var(--purple); }
.feature-column.in-development .feature-icon svg { stroke: var(--green); }

.feature-title {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 8px;
}

.feature-desc {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--white-dim);
  line-height: 1.55;
  margin-bottom: 14px;
}

.card-tag {
  display: inline-block;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid;
}

.card-tag.completed { color: var(--cyan); border-color: rgba(77, 140, 255, 0.35); }
.card-tag.testing { color: var(--purple); border-color: rgba(207, 89, 255, 0.35); }
.card-tag.in-development { color: var(--green); border-color: rgba(0, 255, 163, 0.35); }

.foundation-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 24px 0;
}

.foundation-item {
  display: flex;
  gap: 16px;
  background: var(--carbon-panel);
  border: 1px solid var(--carbon-line);
  border-radius: 12px;
  padding: 22px;
}

.foundation-check {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0, 255, 163, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.foundation-check svg {
  width: 14px;
  height: 14px;
  stroke: var(--green);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.foundation-item-title {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 6px;
}

.foundation-item-desc {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--white-dim);
  line-height: 1.55;
}

/* ═══════════════════════════════════════════════
   9. SCROLL REVEAL ANIMATION
   ═══════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-expo), transform 0.7s var(--ease-expo);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════
   10. CONTACT SECTION
   ═══════════════════════════════════════════════ */
.contact-section {
  padding: 70px 32px;
}

.contact-inner {
  max-width: 520px;
  margin: 0 auto;
}

.contact-heading {
  font-family: 'Source Serif 4', serif;
  font-size: 1.6rem;
  font-weight: 600;
  text-align: center;
  color: var(--white);
  margin-bottom: 28px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-form input,
.contact-form textarea {
  background: var(--carbon-panel);
  border: 1px solid var(--carbon-line);
  border-radius: 8px;
  padding: 13px 16px;
  color: var(--white);
  font-size: 14px;
  font-family: 'IBM Plex Sans', sans-serif;
}

.contact-form textarea { resize: vertical; }

.contact-form .btn {
  width: 100%;
  text-align: center;
}

.site-footer {
  text-align: center;
  padding: 32px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px;
  color: var(--white-dim);
}

/* ═══════════════════════════════════════════════
   11. MOBILE NAVIGATION (HAMBURGER)
   ═══════════════════════════════════════════════ */
.hamburger {
  display: none;
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 2000;
  width: 40px;
  height: 40px;
  background: var(--carbon-panel);
  border: 1px solid var(--carbon-line);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.hamburger span {
  display: block;
  width: 18px;
  height: 1px;
  background: var(--cyan);
  transition: transform 0.4s var(--ease-expo), opacity 0.3s;
}

.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(3px, 4px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(3px, -4px); }

.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(9, 17, 34, 0.97);
  z-index: 1500;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 80px 40px;
  overflow-y: auto;
}

.mobile-nav.open { display: flex; }

.mobile-nav .nav-link {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════
   12. ACCESSIBILITY — REDUCED MOTION
   ═══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════
   13. RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════ */
@media (max-width: 900px) {
  .hud-nav { display: none; }
  .hamburger { display: flex; }
}

@media (max-width: 768px) {
  :root { --header-h: 56px; }

  .hud-header { padding: 0 16px; }
  .hud-right .hud-status { display: none; }

  .hero-core { padding: 60px 20px 48px; min-height: 280px; }

  .content-section { padding: 60px 20px; }

  .content-heading { font-size: 1.5rem; }

  .feature-columns { grid-template-columns: 1fr; }
  .foundation-grid { grid-template-columns: 1fr; }

  .mobile-nav {
    padding: 80px 32px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* --- Site footer (added 2026-08-05) ------------------------------------
   Quiet by design: muted text, a hairline rule above, accent colour on
   hover only. A footer that competes with the page above it is a footer
   nobody reads. Stacks on narrow screens. */
/* A filled band rather than a hairline with text beneath it. With the
   rule alone and no links yet, the copyright read as floating below the
   footer instead of sitting in it (Shawn, 2026-08-05). */
/* One band, flush against the content above it. The earlier version had
   a 64px margin above a filled panel, which left a strip of page
   background between content and footer and read as two bands, plus a
   border sitting on top of the fill for a third edge. */
.site-footer {
  background: var(--carbon-panel);
  padding: 24px 0;
}

.site-footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  /* Switched to space-between 2026-08-14, when the Privacy Notice link
     became the footer's second item. The note it replaces anticipated a
     security-page link arriving first; the privacy notice got there
     first (#110). */
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.site-footer-copy {
  color: var(--white-dim);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px;
}

.site-footer-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.site-footer-links a {
  color: var(--white-dim);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px;
  text-decoration: none;
  transition: color 0.15s ease;
}

.site-footer-links a:hover,
.site-footer-links a:focus-visible {
  color: var(--green);
}

@media (max-width: 560px) {
  .site-footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* The header status indicator became a link (2026-08-05). These rules
   only stop it picking up default anchor styling — the appearance is
   unchanged. The pointer cursor is the one intentional difference: it is
   what tells a visitor the indicator can be clicked. */
a.hud-status {
  text-decoration: none;
  cursor: pointer;
}

a.hud-status:hover .hud-status-dot,
a.hud-status:focus-visible .hud-status-dot {
  box-shadow: 0 0 8px var(--green);
}

/* Status indicator as a mobile menu item (2026-08-05). Inherits
   .nav-link typography so it matches the other items; the flex row and
   gap are only there to sit the dot beside the text. The rule above it
   separates an external link from the in-page anchors without adding a
   heading nobody asked for. */
.mobile-nav-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--carbon-line);
  width: 100%;
  justify-content: center;
}

/* Live system-status states (2026-08-05).
   The dot is grey until the real status is known. Nothing here asserts
   the platform is healthy before the feed says so. */
.hud-status-dot {
  background: var(--white-dim);
  box-shadow: none;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.js-system-status.is-up .hud-status-dot {
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
}

/* Any incident — partial or total — shows purple. Two states only, both
   from the existing brand palette (Shawn, 2026-08-05). The wording still
   distinguishes a partial outage from a full one; the colour does not. */
.js-system-status.is-degraded .hud-status-dot,
.js-system-status.is-down .hud-status-dot {
  background: var(--purple);
  box-shadow: 0 0 6px var(--purple);
}

/* ═══════════════════════════════════════════════
   12. LEGAL PAGES (privacy.html) — added 2026-08-14 for #108/#110.

   A reading page, not a marketing one. Wider line height and a hard
   measure cap because the content is long prose that people scan for a
   specific clause; everything else on this site is short blocks meant to
   be taken in at a glance, so none of the existing type rules fit.

   No new colours: page/panel/field come from the same three tokens the
   rest of the site uses, per the standing rule that a theme has exactly
   three shades and special cases are not minted for one page.
   ═══════════════════════════════════════════════ */
.legal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 820px;
  margin: 0 auto;
  padding: 24px;
  border-bottom: 1px solid var(--carbon-line);
}

.legal-header-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.legal-page {
  max-width: 820px;
  margin: 0 auto;
  padding: 48px 24px 72px;
  font-family: 'IBM Plex Sans', sans-serif;
  color: var(--white-dim);
  line-height: 1.7;
}

.legal-title {
  font-family: 'Source Serif 4', serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 6px;
}

/* The date is the first thing a reader checks to decide whether the
   document is current, so it sits directly under the title rather than
   at the foot of the page. */
.legal-updated {
  font-size: 0.85rem;
  color: var(--white-dim);
  margin-bottom: 40px;
}

.legal-page h2 {
  font-family: 'Source Serif 4', serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--white);
  margin: 40px 0 12px;
}

.legal-page p { margin-bottom: 16px; }

.legal-page ul {
  margin: 0 0 16px 20px;
  padding: 0;
}

.legal-page li { margin-bottom: 10px; }

.legal-page strong { color: var(--white); font-weight: 600; }

.legal-page a {
  color: var(--cyan);
  text-decoration: underline;
}

.legal-page a:hover,
.legal-page a:focus-visible { color: var(--white); }

/* The sentences a reader most wants to find — "we do not sell your
   information" and its California equivalent. Lifted out of the body
   text with the panel shade rather than a new colour or a larger size,
   so it reads as emphasis and not as a banner. */
.legal-lead {
  background: var(--carbon-panel);
  border-left: 2px solid var(--green);
  border-radius: 0 6px 6px 0;
  padding: 14px 18px;
  color: var(--white);
}

.legal-address {
  background: var(--carbon-panel);
  border: 1px solid var(--carbon-line);
  border-radius: 6px;
  padding: 16px 18px;
}

/* The provider table is the widest thing on the page and the one most
   likely to overflow a phone. It scrolls inside its own box so the page
   body never scrolls sideways. */
.legal-table-wrap {
  overflow-x: auto;
  margin-bottom: 16px;
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  min-width: 520px;
}

.legal-table th,
.legal-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--carbon-line);
  vertical-align: top;
}

.legal-table th {
  color: var(--white);
  font-weight: 600;
  border-bottom-color: var(--carbon-line-bright);
}

/* ═══════════════════════════════════════════════
   13. BREVO WAITING-LIST FORM — added 2026-08-14 for #146, replacing
   the freewaitlists block that used to sit at 8b.

   Brevo's Share-step markup carries its own inline styles (Palatino,
   Helvetica, its own greys) and its own stylesheet loaded ahead of this
   file. Inline styles beat any selector, so !important is the only way
   to reach them. The markup is deliberately left verbatim so that
   regenerating the form in Brevo stays a straight paste — every visual
   decision lives here instead.

   No new colours. Everything below is the site's existing tokens.
   ═══════════════════════════════════════════════ */

/* Brevo's own head <style> hides these panels until its script decides to
   show one. That rule is not copied into index.html, so it is restated
   here — without it, "successful" and "could not be saved" are both on
   screen the moment the page loads. */
.sib-form-message-panel { display: none; }
.sib-form-message-panel .sib-notification__icon { width: 20px; height: 20px; }

.brevo-form-shell {
  background: var(--carbon-panel);
  border: 1px solid var(--carbon-line);
  border-radius: 8px;
  padding: 24px;
}

.sib-form { background: transparent !important; padding: 0 !important; }

#sib-container {
  background: transparent !important;
  border: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
}

/* Title and the paragraph under it. Brevo sets Palatino on the title,
   which appears nowhere else on this site. */
.sib-form-block p {
  font-family: 'Source Serif 4', serif !important;
  color: var(--white) !important;
  font-size: 1.4rem !important;
  line-height: 1.3;
}

.sib-text-form-block p {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  color: var(--white-dim) !important;
  line-height: 1.55;
}

.entry__label,
.entry__specification,
.checkbox__label {
  font-family: 'IBM Plex Sans', sans-serif !important;
  color: var(--white-dim) !important;
  font-size: 0.85rem !important;
}

.entry__label { font-weight: 600 !important; }

/* Field surface is the field token, one step lighter than the panel it
   sits on — the same ladder the app uses. */
#sib-container .input,
#sib-container input.input,
#sib-container textarea.input,
#sib-container select.input {
  background: var(--carbon-field) !important;
  border: 1px solid var(--carbon-line-bright) !important;
  border-radius: 6px !important;
  color: var(--white) !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 0.9rem !important;
  padding: 10px 12px !important;
}

#sib-container .input:focus,
#sib-container textarea.input:focus {
  outline: none !important;
  border-color: var(--cyan) !important;
  box-shadow: 0 0 0 2px var(--cyan-dim) !important;
}

#sib-container input::placeholder,
#sib-container textarea::placeholder {
  font-family: 'IBM Plex Sans', sans-serif !important;
  color: var(--white-dim) !important;
  opacity: 0.65;
}

#sib-container textarea.input { resize: vertical; min-height: 64px; }

#sib-container a { color: var(--cyan) !important; }

/* Submit button: the site's .btn, including the green bottom edge that
   marks the page's advancing action. Brevo ships a flat navy block. */
.sib-form-block__button {
  background: var(--carbon-field) !important;
  color: var(--white) !important;
  border: 1px solid var(--carbon-line-bright) !important;
  border-bottom: 2px solid var(--green) !important;
  border-radius: 6px !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  padding: 13px 26px !important;
  width: 100%;
  transition: background 0.15s ease !important;
}

.sib-form-block__button:hover {
  background: color-mix(in srgb, var(--green) 8%, var(--carbon-field)) !important;
}

.entry__choice { margin-bottom: 8px; }
.entry__choice .checkbox__label span:last-child { color: var(--white) !important; }

/* Validation errors keep Brevo's red — a failure state is the one place
   the site's palette should not soften the message. Only the typeface
   and the corner radius are brought into line. */
.entry__error {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 0.8rem !important;
  border-radius: 6px !important;
}

/* The disclosure line beneath the form. Quiet, but the link is the site's
   accent so it reads as a link rather than as small print. */
.form-privacy-note {
  margin-top: 16px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--white-dim);
  text-align: left;
}

.form-privacy-note a {
  color: var(--cyan);
  text-decoration: underline;
}

.form-privacy-note a:hover { color: var(--white); }

/* Contact page (#171). Narrower than the legal pages — a form is read one
   field at a time, not scanned like prose, so the measure that suits the
   privacy notice is too wide here. */
.contact-page {
  max-width: 600px;
  margin: 0 auto;
  padding: 48px 24px 72px;
}

/* The phone field, after Brevo's script has rebuilt it (#171).

   The markup shipped in contact.html is a plain <select> and <input>. On
   load, Brevo's script tears both out and replaces them with its own
   country picker, whose class names none of the rules above match — so the
   field rendered as a white box in the middle of a dark form. These target
   what is actually on screen rather than what was written. */
.sib-sms-select__title,
.sib-sms-select__number-input {
  background: var(--carbon-field) !important;
  border: 1px solid var(--carbon-line-bright) !important;
  border-radius: 6px !important;
}

.sib-sms-select__label-text,
.sib-sms-select__calling-code,
.sib-sms-select__phone-number {
  background: transparent !important;
  border: 0 !important;
  color: var(--white) !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 0.9rem !important;
}

.sib-sms-select__phone-number::placeholder { color: var(--white-dim) !important; opacity: 0.65; }

/* The country list the picker opens on click. Brevo's script appends it
   directly to <body>, outside the form entirely, so it is reached from the
   top level rather than through any container. Left alone it renders as a
   white panel over a dark page. */
.sib-sms-select__list {
  background: var(--carbon-field) !important;
  border: 1px solid var(--carbon-line-bright) !important;
  border-radius: 6px !important;
  color: var(--white) !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
}

.sib-sms-select__list li {
  background: transparent !important;
  color: var(--white) !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 0.9rem !important;
}

.sib-sms-select__list li:hover {
  background: var(--carbon-line-bright) !important;
}

.sib-sms-tooltip__icon { color: var(--cyan) !important; }

/* ═══════════════════════════════════════════════
   14. CONFIRMATION PAGES — added 2026-08-14 for #173.

   Three pages that replace Brevo's own hosted confirmation screens:
   check-your-email, you're-confirmed, and message-sent. A signup that
   ends on a stranger's page undoes the impression the rest of the site
   works to build, which is the whole reason these exist.

   Centred and short by design — each page carries one instruction, and
   anything else on it competes with that instruction.
   ═══════════════════════════════════════════════ */
.confirm-page {
  max-width: 560px;
  margin: 0 auto;
  padding: 72px 24px 96px;
  text-align: center;
  font-family: 'IBM Plex Sans', sans-serif;
  color: var(--white-dim);
}

.confirm-mark {
  width: 64px;
  height: 64px;
  margin: 0 auto 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--carbon-panel);
  border: 1px solid var(--carbon-line-bright);
}

.confirm-mark svg { width: 30px; height: 30px; }

/* Two states, two colours, and they must never be confused: purple means
   the visitor still has something to do, green means it is finished. The
   site already uses green for healthy and purple for attention in the
   status indicator, so this borrows a convention rather than inventing
   one. */
.confirm-mark--pending {
  color: var(--purple);
  border-color: color-mix(in srgb, var(--purple) 40%, var(--carbon-line-bright));
}

.confirm-mark--done {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 40%, var(--carbon-line-bright));
}

.confirm-title {
  font-family: 'Source Serif 4', serif;
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 14px;
}

.confirm-lead {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--white);
  margin-bottom: 22px;
}

.confirm-note {
  font-size: 0.875rem;
  line-height: 1.65;
  margin-bottom: 14px;
}

.confirm-page a {
  color: var(--cyan);
  text-decoration: underline;
}

.confirm-page a:hover { color: var(--white); }

.confirm-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
}

/* The buttons are the site's .btn and must look like every other button on
   the site: white label, no underline. Both have to be restated here
   because `.confirm-page a` above is the more specific selector and was
   winning — it turned the button labels blue and underlined them, which is
   how they shipped in the first version. */
.confirm-actions .btn {
  color: var(--white);
  text-decoration: none;
}

.confirm-actions .btn:hover { color: var(--white); }