/*
 * Compass marketing website prototype, shared styles.
 *
 * Palette tokens copied verbatim from
 * /Users/liamfisher/starlight-tech/compass-website/src/styles/tokens.css
 * per feedback_no_invented_visuals_in_prototypes MANDATORY.
 *
 * No Tailwind defaults per feedback_compass_palette_only MANDATORY.
 * No italics per feedback_no_italics MANDATORY.
 * No em dashes anywhere per feedback_anti_ai_formulaic_writing MANDATORY.
 */

:root {
  /* Core brand */
  --navy: #1b2a4a;
  --teal: #2a7b88;
  --amber: #e8913a;
  --coral: #e06b5e;
  --sage: #8ba89a;
  --slate: #64748b;
  --warm-sand: #f5f0e8;
  --white: #fafafa;

  /* Neutrals (v2 deck) */
  --gray-border: #e5e7eb;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-900: #111827;
  --teal-dark: #1f5f6a;
  --off-white: #fafafa;

  /* Typography */
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Radii */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;

  /* Scale */
  --container-narrow: 720px;
  --container-medium: 960px;
  --container-wide: 1320px;
}

/* Reset + base */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--navy);
  background-color: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--teal);
  text-decoration: none;
}

a:hover {
  color: var(--teal-dark);
}

a:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 2px;
}

button {
  font-family: inherit;
  cursor: pointer;
}

h1,
h2,
h3,
h4 {
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0;
}

p {
  margin: 0;
}

/* Layout containers */

.container {
  width: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (max-width: 1080px) {
  .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.container-medium {
  width: 100%;
  max-width: var(--container-medium);
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Header (site chrome) */

.site-header {
  background-color: var(--white);
  border-bottom: 1px solid var(--gray-border);
  position: sticky;
  top: 0;
  z-index: 50;
}

/* More vertical padding around top nav at desktop; trimmed at mobile.
   Longhand padding so .container's horizontal padding isn't reset. */

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.625rem;
  padding-bottom: 1.625rem;
}

@media (max-width: 1080px) {
  .site-header__inner {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

.site-header__logo img {
  height: 32px;
  width: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.site-nav__link {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--navy);
  padding: 0.375rem 0;
  border-bottom: 1.5px solid transparent;
  transition: border-color 150ms ease;
}

.site-nav__link:hover {
  color: var(--navy);
  border-bottom-color: var(--teal);
}

/* Conversion-focused CTA: teal default, no hover colour change. */

.site-nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--teal);
  color: var(--white);
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--teal);
}

.site-nav__cta:hover {
  background-color: var(--teal);
  border-color: var(--teal);
  color: var(--white);
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.875rem 1.5rem;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

/* Conversion-focused primary CTA: teal default, no hover colour change. */

.btn--primary {
  background-color: var(--teal);
  color: var(--white);
  border-color: var(--teal);
}

.btn--primary:hover {
  background-color: var(--teal);
  border-color: var(--teal);
  color: var(--white);
}

.btn--secondary {
  background-color: transparent;
  color: var(--navy);
  border-color: var(--navy);
}

.btn--secondary:hover {
  background-color: var(--navy);
  color: var(--white);
}

.btn--amber {
  background-color: var(--amber);
  color: var(--navy);
  border-color: var(--amber);
}

.btn--amber:hover {
  background-color: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

/* Hero patterns */

.hero {
  padding: 4.5rem 0 4rem;
  background-color: var(--white);
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 880px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 4rem;
  }
}

.hero__eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 1rem;
}

.hero__headline {
  font-size: 2.5rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
  color: var(--navy);
}

@media (min-width: 880px) {
  .hero__headline {
    font-size: 3.25rem;
  }
}

.hero__subhead {
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--gray-700);
  margin-bottom: 2rem;
}

.hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-bottom: 1.75rem;
}

.hero__trust {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--gray-600);
  max-width: 480px;
}

.hero__illustration {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__illustration img {
  width: 100%;
  max-width: 540px;
  border-radius: var(--radius-lg);
}

/* Navy hero variant (used on Pricing) */

.hero--navy {
  background-color: var(--navy);
  color: var(--white);
  padding: 5rem 0 4.5rem;
}

.hero--navy .hero__headline {
  color: var(--white);
}

.hero--navy .hero__eyebrow {
  color: var(--amber);
}

.hero--navy .hero__subhead {
  color: rgba(250, 250, 250, 0.78);
}

.hero--navy .hero__trust {
  color: rgba(250, 250, 250, 0.66);
}

/* Section */

.section {
  padding: 4.5rem 0;
}

.section--warm-sand {
  background-color: var(--warm-sand);
}

.section--off-white {
  background-color: var(--gray-50);
}

.section--navy {
  background-color: var(--navy);
  color: var(--white);
}

.section--navy h2,
.section--navy h3 {
  color: var(--white);
}

.section__eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 0.875rem;
}

.section__headline {
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-bottom: 1rem;
  max-width: 720px;
}

@media (min-width: 880px) {
  .section__headline {
    font-size: 2.375rem;
  }
}

.section__subhead {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--gray-700);
  max-width: 640px;
  margin-bottom: 2.5rem;
}

.section--navy .section__subhead {
  color: rgba(250, 250, 250, 0.78);
}

.section__lead {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--gray-700);
  max-width: 720px;
  margin-bottom: 1.25rem;
}

.section--navy .section__lead {
  color: rgba(250, 250, 250, 0.85);
}

/* Card patterns */

.card {
  background-color: var(--white);
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-lg);
  padding: 1.875rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card--warm-sand {
  background-color: var(--warm-sand);
  border-color: transparent;
}

.card__label {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 0.625rem;
}

.card__title {
  font-size: 1.25rem;
  margin-bottom: 0.625rem;
}

.card__body {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--gray-700);
  margin-bottom: 0.5rem;
}

.card__body:last-child {
  margin-bottom: 0;
}

/* Grid utilities */

.grid {
  display: grid;
  gap: 1.5rem;
}

.grid--2 {
  grid-template-columns: 1fr;
}

.grid--3 {
  grid-template-columns: 1fr;
}

.grid--5 {
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid--5 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid--5 {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* Motions grid (home) */

.motion-card {
  background-color: var(--white);
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  transition: border-color 150ms ease, transform 150ms ease;
}

.motion-card:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
}

.motion-card__title {
  font-size: 1.0625rem;
  margin-bottom: 0.5rem;
  color: var(--navy);
}

.motion-card__body {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--gray-700);
}

/* How it works (home) */

.step {
  padding: 1.5rem 0;
  border-top: 1px solid var(--gray-border);
}

.step:first-child {
  border-top: 0;
  padding-top: 0;
}

.step__number {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 0.5rem;
}

.step__title {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.step__body {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--gray-700);
  max-width: 640px;
}

/* Founder rate panel */

.founder-panel {
  background-color: var(--warm-sand);
  border-radius: var(--radius-lg);
  padding: 3rem 2rem;
  text-align: center;
}

.founder-panel__count {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  background-color: var(--white);
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}

.founder-panel__title {
  font-size: 2rem;
  line-height: 1.15;
  margin-bottom: 0.875rem;
}

.founder-panel__price {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 1.5rem;
}

/* Pricing cards */

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 800px) {
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.plan {
  background-color: var(--white);
  border: 1.5px solid var(--gray-border);
  border-radius: var(--radius-lg);
  padding: 2rem 1.875rem;
  display: flex;
  flex-direction: column;
  position: relative;
}

.plan--founding {
  border-color: var(--amber);
  border-width: 2px;
}

.plan__ribbon {
  position: absolute;
  top: -14px;
  left: 1.875rem;
  background-color: var(--amber);
  color: var(--navy);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
}

.plan__tier {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 1rem;
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  margin-bottom: 0.625rem;
}

.plan__price-amount {
  font-size: 2.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy);
  line-height: 1;
}

.plan__price-period {
  font-size: 0.9375rem;
  color: var(--slate);
}

.plan__price-strike {
  font-size: 0.875rem;
  color: var(--gray-500);
  margin-bottom: 1rem;
}

.plan__description {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--gray-700);
  margin-bottom: 1.5rem;
}

.plan__cta {
  margin-bottom: 1.5rem;
}

.plan__cta .btn {
  width: 100%;
}

.plan__features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
}

.plan__features li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--gray-700);
}

.plan__features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 12px;
  height: 12px;
  background-image: url("assets/icons/checkmark.svg");
  background-repeat: no-repeat;
  background-size: contain;
  filter: brightness(0) saturate(100%) invert(35%) sepia(48%) saturate(485%) hue-rotate(140deg) brightness(94%) contrast(89%);
}

.plan__features--excluded li {
  color: var(--gray-400);
}

.plan__features--excluded li::before {
  display: none;
}

.plan__lock-note {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--gray-600);
  padding: 0.875rem 1rem;
  background-color: var(--warm-sand);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius-sm);
  margin-top: auto;
}

/* FAQ block */

.faq__item {
  border-bottom: 1px solid var(--gray-border);
  padding: 1.125rem 0;
}

.faq__item:first-child {
  border-top: 1px solid var(--gray-border);
}

.faq__question {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.5rem;
}

.faq__answer {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--gray-700);
  max-width: 720px;
}

/* Marketing-for layout patterns */

.icp-channels {
  list-style: none;
  padding: 0;
  margin: 0;
}

.icp-channels li {
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--gray-border);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--gray-700);
}

.icp-channels li:last-child {
  border-bottom: 0;
}

.icp-channels li strong {
  font-weight: 600;
  color: var(--navy);
  display: block;
  margin-bottom: 0.125rem;
}

/* Legal page chrome */

.legal-page {
  background-color: var(--white);
  min-height: 100vh;
}

.legal-page__header {
  background-color: var(--warm-sand);
  padding: 3.5rem 0 2.5rem;
  border-bottom: 1px solid var(--gray-border);
}

.legal-page__title {
  font-size: 2.25rem;
  line-height: 1.15;
  margin-bottom: 1rem;
  color: var(--navy);
}

.legal-page__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-size: 0.875rem;
  color: var(--gray-600);
}

.legal-page__meta strong {
  font-weight: 600;
  color: var(--navy);
  display: block;
}

.legal-page__body {
  padding: 3rem 0 5rem;
}

.legal-prose {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--navy);
}

.legal-prose h2 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--navy);
  margin-top: 2.5rem;
  margin-bottom: 0.875rem;
}

.legal-prose h3 {
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--navy);
  margin-top: 1.875rem;
  margin-bottom: 0.625rem;
}

.legal-prose h2:first-child,
.legal-prose h3:first-child {
  margin-top: 0;
}

.legal-prose p {
  margin-bottom: 1rem;
}

.legal-prose ul,
.legal-prose ol {
  padding-left: 1.625rem;
  margin: 0 0 1.125rem 0;
}

.legal-prose li {
  margin-bottom: 0.5rem;
}

.legal-prose strong {
  font-weight: 600;
  color: var(--navy);
}

.legal-prose a {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.legal-prose a:hover {
  color: var(--teal-dark);
  text-decoration-thickness: 2px;
}

.legal-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75rem 0 1.5rem 0;
  font-size: 0.9375rem;
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.legal-prose thead {
  background-color: var(--warm-sand);
}

.legal-prose th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  color: var(--navy);
  border-bottom: 1px solid var(--gray-300);
}

.legal-prose td {
  padding: 0.75rem 1rem;
  vertical-align: top;
  border-bottom: 1px solid var(--gray-border);
}

.legal-prose tbody tr:nth-child(even) {
  background-color: var(--gray-50);
}

.legal-prose tbody tr:last-child td {
  border-bottom: none;
}

.legal-prose tbody tr > td:first-child {
  font-weight: 600;
  color: var(--navy);
}

/* Footer (site chrome) */

.site-footer {
  background-color: var(--navy);
  color: rgba(250, 250, 250, 0.85);
  padding: 4rem 0 2rem;
}

.site-footer__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}

@media (min-width: 720px) {
  .site-footer__columns {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .site-footer__columns {
    grid-template-columns: repeat(4, 1fr);
  }
}

.site-footer__column-title {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 1rem;
}

.site-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer__list li {
  margin-bottom: 0.625rem;
}

.site-footer__list a {
  color: rgba(250, 250, 250, 0.78);
  font-size: 0.9375rem;
}

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

.site-footer__bottom {
  padding-top: 2rem;
  border-top: 1px solid rgba(250, 250, 250, 0.15);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  font-size: 0.8125rem;
  color: rgba(250, 250, 250, 0.6);
}

.site-footer__wordmark img {
  height: 22px;
  opacity: 0.85;
}

.site-footer__climate {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  background-color: rgba(232, 145, 58, 0.15);
  border-radius: 999px;
  color: var(--amber);
  font-weight: 500;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Home page (mockup-aligned, 26 May 2026)
   Sources: Liam mockup PNG + Harry home.md.
   Adds: sticky mega-menu nav, mobile burger, 5-card carousel, FAQ accordion,
   coral numbered badges, navy framed-illustration panel, footer 7-column grid.
───────────────────────────────────────────────────────────────────────────── */

/* Sticky nav (overrides .site-header for home page only via .site-header--sticky) */

/* Background drift fix: white default per mockup, not warm-sand. */

.site-header--sticky {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--white);
  border-bottom: 1px solid transparent;
  transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.site-header--sticky.is-scrolled {
  background-color: rgba(250, 250, 250, 0.96);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom-color: var(--gray-border);
  box-shadow: 0 1px 2px rgba(27, 42, 74, 0.04);
}

/* Mega menu */

.site-nav__group {
  position: relative;
}

.site-nav__group-trigger {
  background: transparent;
  border: 0;
  padding: 0.375rem 0;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--navy);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-bottom: 1.5px solid transparent;
  transition: border-color 150ms ease;
}

.site-nav__group-trigger:hover,
.site-nav__group:hover .site-nav__group-trigger {
  border-bottom-color: var(--teal);
}

.site-nav__group-trigger[aria-expanded="true"] {
  border-bottom-color: var(--teal);
}

.site-nav__group-chevron {
  width: 11px;
  height: 11px;
  transition: transform 150ms ease;
}

.site-nav__group-trigger[aria-expanded="true"] .site-nav__group-chevron {
  transform: rotate(180deg);
}

.mega-menu {
  position: absolute;
  top: calc(100% + 1.125rem);
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--white);
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: 0 24px 60px -28px rgba(27, 42, 74, 0.28);
  display: none;
  z-index: 90;
  min-width: 280px;
}

.mega-menu--wide {
  min-width: 760px;
}

.mega-menu--wide:has(.mega-menu__columns--two) {
  min-width: 540px;
}

.mega-menu.is-open {
  display: block;
}

.mega-menu__columns {
  display: grid;
  gap: 2rem;
}

.mega-menu--wide .mega-menu__columns {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mega-menu__columns--two {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.mega-menu__column-title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 0.875rem 0;
}

.mega-menu__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mega-menu__list a {
  color: var(--navy);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
  padding: 0.125rem 0;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease;
}

.mega-menu__list a:hover {
  border-bottom-color: var(--teal);
  color: var(--navy);
}

/* Mobile burger menu */

/* Burger menu: thicker bars for a clear burger icon. */

.site-nav__burger {
  display: none;
  background: transparent;
  border: 0;
  padding: 0.5rem;
  cursor: pointer;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}

.site-nav__burger-bar {
  display: block;
  width: 26px;
  height: 3px;
  background-color: var(--navy);
  border-radius: 2px;
  transition: transform 200ms ease, opacity 200ms ease;
}

.site-nav__burger[aria-expanded="true"] .site-nav__burger-bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.site-nav__burger[aria-expanded="true"] .site-nav__burger-bar:nth-child(2) {
  opacity: 0;
}

.site-nav__burger[aria-expanded="true"] .site-nav__burger-bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.mobile-nav {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(360px, 100%);
  background-color: var(--white);
  z-index: 110;
  transform: translateX(100%);
  transition: transform 240ms ease;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-shadow: -8px 0 32px -16px rgba(27, 42, 74, 0.25);
}

.mobile-nav.is-open {
  transform: translateX(0);
}

.mobile-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--gray-border);
}

.mobile-nav__close {
  background: transparent;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--navy);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}

.mobile-nav__body {
  padding: 1.5rem;
  flex: 1;
}

.mobile-nav__section {
  border-bottom: 1px solid var(--gray-border);
  padding: 0.875rem 0;
}

.mobile-nav__section-trigger {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  text-align: left;
}

.mobile-nav__section-trigger-chevron {
  width: 12px;
  height: 12px;
  transition: transform 150ms ease;
}

.mobile-nav__section-trigger[aria-expanded="true"] .mobile-nav__section-trigger-chevron {
  transform: rotate(180deg);
}

.mobile-nav__sublist {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0 0;
  display: none;
  flex-direction: column;
  gap: 0.5rem;
}

.mobile-nav__section-trigger[aria-expanded="true"] + .mobile-nav__sublist {
  display: flex;
}

.mobile-nav__sublist a {
  font-size: 0.9375rem;
  color: var(--navy);
  text-decoration: none;
}

.mobile-nav__sublist a:hover {
  color: var(--teal);
}

.mobile-nav__direct-link {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--gray-border);
}

.mobile-nav__cta {
  margin-top: 1.5rem;
  display: block;
  width: 100%;
}

.mobile-nav__cta .btn {
  width: 100%;
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(27, 42, 74, 0.5);
  z-index: 105;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}

.nav-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Home hero (cream / warm-sand), mockup pattern */

.home-hero {
  background-color: var(--white);
  padding: 3.5rem 0 5rem;
}

@media (min-width: 880px) {
  .home-hero {
    padding: 5rem 0 6.5rem;
  }
}

/* Drift 1 fix: single-column centred stack. Eyebrow, H1, sub-head, CTAs, illustration all centred. No two-column split. No navy panel on hero illustration. */

.home-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}

.home-hero__eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 1.25rem;
}

.home-hero__headline {
  font-size: 2.75rem;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--navy);
  margin-bottom: 1.375rem;
  max-width: 1180px;
  text-align: center;
}

@media (min-width: 880px) {
  .home-hero__headline {
    font-size: 3.75rem;
  }
}

.home-hero__subhead {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--gray-700);
  max-width: 880px;
  margin: 0 auto 2rem auto;
  text-align: center;
}

/* Both hero CTAs on one line, equal size, centred. */

.home-hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.home-hero__cta-row .btn {
  min-width: 260px;
}

/* Hero illustration: 2x at max desktop, scales down at narrower viewports. */

.home-hero__illustration {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.home-hero__illustration img {
  width: 100%;
  max-width: 1040px;
  height: auto;
}

@media (max-width: 1200px) {
  .home-hero__illustration img {
    max-width: 820px;
  }
}

@media (max-width: 880px) {
  .home-hero__illustration img {
    max-width: 640px;
  }
}

@media (max-width: 600px) {
  .home-hero__illustration img {
    max-width: 480px;
  }
}

/* "What Compass Is" section (navy framed illustration pattern) */

.what-section {
  background-color: var(--navy);
  color: var(--white);
  padding: 5rem 0;
}

.what-section__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 880px) {
  .what-section__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4.5rem;
  }
}

.what-section__title {
  font-size: 2.25rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 1.5rem;
}

@media (min-width: 880px) {
  .what-section__title {
    font-size: 2.75rem;
  }
}

.what-section__body p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(250, 250, 250, 0.82);
  margin-bottom: 1.125rem;
}

.what-section__body p:last-child {
  margin-bottom: 0;
}

.what-section__body a {
  color: var(--amber);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.what-section__body a:hover {
  color: var(--white);
}

/* Drift 2 fix: illustration sits directly on navy. No overlay panel, no padding, no border-radius. */
/* Image fills its grid column so it matches the text container's visual presence. */

.what-section__illustration {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.what-section__illustration img {
  width: 100%;
  height: auto;
  border-radius: 25px;
}

/* Carousel section ("Built around the way your business wins customers") */

.carousel-section {
  background-color: var(--white);
  padding: 5rem 0;
}

/* Carousel headline + lead match Section 1 container widths. */

.carousel-section__headline {
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-align: center;
  margin: 0 auto 1.25rem auto;
  max-width: 1180px;
}

@media (min-width: 880px) {
  .carousel-section__headline {
    font-size: 2.375rem;
  }
}

.carousel-section__lead {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--gray-700);
  max-width: 880px;
  margin: 0 auto 2.5rem auto;
  text-align: center;
}

/* Drift 5 fix: trailing centred paragraph + circular teal arrow at bottom-right. */

.carousel-section__trailing {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--gray-700);
  max-width: 720px;
  margin: 2rem auto 0 auto;
  text-align: center;
}

.carousel-section__cta-icon-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.5rem;
}

.carousel-section__cta-icon {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background-color: var(--teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  text-decoration: none;
  transition: background-color 150ms ease, transform 150ms ease;
}

.carousel-section__cta-icon:hover {
  background-color: var(--teal-dark);
  transform: translateY(-1px);
}

.carousel-section__cta-icon svg {
  width: 18px;
  height: 18px;
}

/* Carousel: native horizontal scroll, scroll-snap, mouse drag + touch swipe. No arrows, no dots. */

.carousel {
  position: relative;
}

.carousel__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE / Edge legacy */
  margin: 0 -0.75rem;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}

.carousel__viewport::-webkit-scrollbar {
  display: none; /* Chromium / Safari */
}

.carousel__viewport.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.carousel__track {
  display: flex;
  gap: 1.5rem;
  padding: 0.5rem 0.75rem 1.5rem 0.75rem;
}

/* Card: slate-blue block, white header at top, white-bg image inset, white body below. */

/* Peek affordance: 3.25 cards visible on desktop (3 full + 25% peek of next). */

.carousel__card {
  flex: 0 0 calc((100% - 4.5rem) / 3.25);
  background-color: var(--slate);
  padding: 2rem 1.875rem;
  border: 0;
  border-radius: 25px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  text-decoration: none;
  scroll-snap-align: start;
  transition: transform 200ms ease;
}

.carousel__card:hover {
  transform: translateY(-3px);
}

.carousel__card-title {
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--white);
  margin: 0;
  text-align: center;
}

.carousel__card-text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1 1 auto;
}

/* Image renders edge-to-edge inside the card, no white space around the illustration. 13px rounded corners. */

.carousel__card-illustration {
  width: 100%;
  border-radius: 13px;
  overflow: hidden;
  display: block;
  background-color: transparent;
  padding: 0;
  aspect-ratio: auto;
}

.carousel__card-illustration img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 13px;
}

.carousel__card-audience {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--white);
  font-weight: 500;
  margin: 0;
  text-align: center;
}

.carousel__card-body {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--white);
  margin: 0;
  text-align: center;
}

@media (max-width: 880px) {
  .carousel__card {
    flex: 0 0 85%;
  }
}

.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.5rem;
  gap: 1.5rem;
}

.carousel__dots {
  display: flex;
  gap: 0.5rem;
}

.carousel__dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background-color: var(--gray-300);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background-color 150ms ease, transform 150ms ease;
}

.carousel__dot.is-active {
  background-color: var(--teal);
  transform: scale(1.2);
}

.carousel__buttons {
  display: flex;
  gap: 0.625rem;
}

.carousel__button {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background-color: var(--white);
  border: 1.5px solid var(--navy);
  color: var(--navy);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 150ms ease, color 150ms ease;
}

.carousel__button:hover {
  background-color: var(--navy);
  color: var(--white);
}

.carousel__button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.carousel__button:disabled:hover {
  background-color: var(--white);
  color: var(--navy);
}

.carousel__button-icon {
  width: 18px;
  height: 18px;
}

.carousel__button-icon--prev {
  transform: rotate(180deg);
}

/* How Compass Works section */

.how-section {
  background-color: var(--white);
  padding-top: 3rem;
  padding-bottom: 5rem;
}

.how-section__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-top: 3rem;
}

@media (min-width: 880px) {
  .how-section__steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
  }
}

/* Numbered badge centred horizontally above each step block. */

.how-step__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background-color: var(--coral);
  color: var(--white);
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 auto 1.125rem auto;
}

.how-step__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.75rem;
  letter-spacing: -0.005em;
}

.how-step__body {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--gray-700);
}

.how-section__cta {
  margin-top: 3rem;
  text-align: center;
}

/* Marketing science underneath */

.science-section {
  background-color: var(--white);
  padding: 5rem 0;
}

.science-section__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 880px) {
  .science-section__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 4.5rem;
  }
}

/* Drift 6 fix: illustration sits directly on cream. No navy frame, no padding, no border-radius. */

.science-section__illustration {
  display: flex;
  align-items: center;
  justify-content: center;
}

.science-section__illustration img {
  width: 100%;
  max-width: 460px;
  height: auto;
}

.science-section p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--gray-700);
  margin-bottom: 1.125rem;
}

/* Coral CTA: no hover colour change (consistency with conversion CTAs). */

.btn--coral {
  background-color: var(--coral);
  color: var(--white);
  border-color: var(--coral);
}

.btn--coral:hover {
  background-color: var(--coral);
  color: var(--white);
  border-color: var(--coral);
}

/* Drift 7 fix: full-width warm-sand band. No nested white outer, no rounded inner panel. */

.founder-section {
  background-color: var(--warm-sand);
  padding: 5rem 0;
}

.founder-section__inner {
  text-align: center;
}

.founder-counter {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--teal);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  margin-bottom: 1.5rem;
}

.founder-counter__num {
  color: var(--white);
}

.founder-section__title {
  font-size: 2.25rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin-bottom: 0.875rem;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 880px) {
  .founder-section__title {
    font-size: 2.625rem;
  }
}

.founder-section__subhead {
  font-size: 1.125rem;
  color: var(--navy);
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.founder-section__body {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--gray-700);
  max-width: 600px;
  margin: 0 auto 2rem auto;
}

.founder-section__body a {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* FAQ accordion */

.faqs-section {
  background-color: var(--white);
  padding: 5rem 0;
}

.faqs-section__heading {
  font-size: 2.25rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--navy);
  text-align: center;
  margin-bottom: 3rem;
}

/* Drift 8 fix: flat list with thin bottom-border separators. No card background, no border, no border-radius, no gap. */

.faq-accordion {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--gray-border);
}

.faq-item {
  background-color: transparent;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--gray-border);
  overflow: hidden;
}

.faq-item__trigger {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 1.25rem 1.5rem;
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
  line-height: 1.4;
}

.faq-item__trigger:hover {
  color: var(--teal);
}

.faq-item__chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--navy);
  transition: transform 220ms ease;
}

.faq-item__trigger[aria-expanded="true"] .faq-item__chevron {
  transform: rotate(180deg);
}

.faq-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 280ms ease;
}

.faq-item__trigger[aria-expanded="true"] + .faq-item__panel {
  grid-template-rows: 1fr;
}

.faq-item__panel-inner {
  overflow: hidden;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--gray-700);
}

.faq-item__panel-inner > div {
  padding: 0 1.5rem 1.25rem 1.5rem;
}

.faq-item__panel-inner a {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.faqs-section__cta {
  margin-top: 3rem;
  text-align: center;
}

/* Home footer (mockup-aligned, 6-column grid + brand bar + bottom strip) */

.home-footer {
  background-color: var(--navy);
  color: rgba(250, 250, 250, 0.85);
  padding: 3.5rem 0 0;
}

.home-footer__brand-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(250, 250, 250, 0.12);
}

.home-footer__brand-bar img {
  height: 36px;
}

/* Tagline: cream/white, hidden below iPad portrait width (≤767px). */

.home-footer__tagline {
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--white);
  letter-spacing: -0.005em;
}

@media (max-width: 767px) {
  .home-footer__tagline {
    display: none;
  }
}

/* Footer grid aligned with main nav. 4 top-level groups; Solutions and Resources contain nested sub-grids. */

.home-footer__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding: 4.5rem 0;
}

@media (min-width: 720px) {
  .home-footer__columns {
    grid-template-columns: repeat(2, 1fr);
    gap: 3.5rem;
  }
  /* Solutions carries three sub-columns; give it the full row on tablet so nothing wraps. */
  .home-footer__group--solutions {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1000px) {
  .home-footer__columns {
    /* 3 top-level groups (Platform removed): Compass, Solutions (3 sub-cols), Resources (2 sub-cols). */
    grid-template-columns: 1.1fr 3.6fr 2.3fr;
    gap: 3rem 4.5rem;
    align-items: start;
  }
  .home-footer__group--solutions {
    grid-column: auto;
  }
}

.home-footer__subgrid {
  display: grid;
  gap: 2.75rem;
}

@media (min-width: 1000px) {
  .home-footer__subgrid--three {
    grid-template-columns: repeat(3, 1fr);
  }
  .home-footer__subgrid--two {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Top-level category heading (Compass, Platform, Solutions, Resources): amber. */
/* Sub-category heading (By Business, By Industry, By Role, Discover, Learn): white. Both same size/weight/uppercase. */

.home-footer__top-head {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 2rem 0;
}

.home-footer__sub-head {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 0.875rem 0;
}

/* Legacy class kept harmlessly for any stragglers. */
.home-footer__column-title {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 0.875rem 0;
}

.home-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.home-footer__list a {
  color: rgba(250, 250, 250, 0.78);
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
  transition: color 120ms ease;
}

.home-footer__list a:hover {
  color: var(--white);
}

/* Bottom strip: same navy as the block (no tint). Top border keeps visual separation if needed. */

.home-footer__bottom-strip {
  background-color: transparent;
  padding: 1.25rem 0 1.75rem 0;
}

.home-footer__bottom-strip-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8125rem;
  color: rgba(250, 250, 250, 0.65);
}

.home-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
}

.home-footer__legal a {
  color: rgba(250, 250, 250, 0.78);
  text-decoration: none;
}

.home-footer__legal a:hover {
  color: var(--white);
  text-decoration: underline;
}

.home-footer__legal-sep {
  color: rgba(250, 250, 250, 0.4);
}

.home-footer__social {
  display: flex;
  gap: 0.625rem;
}

.home-footer__social-icon {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background-color: rgba(250, 250, 250, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  transition: background-color 150ms ease;
}

.home-footer__social-icon:hover {
  background-color: var(--teal);
  color: var(--white);
}

.home-footer__social-icon svg {
  width: 16px;
  height: 16px;
}

/* Responsive: hide desktop nav at narrow viewports, show burger */

@media (max-width: 1080px) {
  .site-nav {
    display: none;
  }
  .site-nav__burger {
    display: inline-flex;
  }
  .home-hero__headline {
    font-size: 2.5rem;
  }
}

@media (max-width: 720px) {
  .home-hero__headline {
    font-size: 2.125rem;
  }
  .what-section__title,
  .founder-section__title,
  .faqs-section__heading {
    font-size: 1.875rem;
  }
}

/* Lock-body-scroll when mobile nav open */

body.nav-open {
  overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Shared page patterns (reusable across about, pricing, AI MC, motion hubs,
   ICP pages, legal). All inherit the home-hero rhythm + locked palette.
───────────────────────────────────────────────────────────────────────────── */

/* Page breadcrumb (motion hub + ICP pages) */

.page-breadcrumb {
  background-color: var(--white);
  border-bottom: 1px solid var(--gray-border);
  padding: 0.875rem 0;
}

.page-breadcrumb__inner {
  font-size: 0.8125rem;
  color: var(--gray-600);
}

.page-breadcrumb__inner a {
  color: var(--gray-600);
  text-decoration: none;
}

.page-breadcrumb__inner a:hover {
  color: var(--teal);
}

.page-breadcrumb__sep {
  color: var(--gray-400);
  margin: 0 0.5rem;
}

.page-breadcrumb__current {
  color: var(--navy);
  font-weight: 500;
}

/* Standard content section (white bg by default). */

.page-section {
  padding-top: 3rem;
  padding-bottom: 5rem;
  background-color: var(--white);
}

.page-section--warm-sand {
  background-color: var(--warm-sand);
}

.page-section--narrow .container,
.page-section--narrow .container-medium {
  max-width: 880px;
}

.page-section__eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 1rem;
  text-align: center;
  width: 100%;
}

.page-section__headline {
  font-size: 2.25rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--navy);
  margin: 0 auto 1.25rem auto;
  max-width: 1180px;
}

@media (min-width: 880px) {
  .page-section__headline {
    font-size: 2.625rem;
  }
}

.page-section__lead {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--gray-700);
  max-width: 880px;
  margin: 0 auto 1.25rem auto;
  text-align: center;
}

.page-section__lead:last-child {
  margin-bottom: 0;
}

.page-section__lead--left {
  text-align: left;
}

.page-section__cta {
  margin-top: 2.5rem;
  text-align: center;
}

/* Card grid (about values, motion hub ICPs, granular ICP what-Compass-does). Reuses slate carousel-card visual treatment. */

.page-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

@media (min-width: 720px) {
  .page-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .page-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .page-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .page-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .page-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Slate card (reused for AI MC comparison + motion ICPs + granular what-Compass-does). */

.slate-card {
  background-color: var(--slate);
  padding: 1.875rem 1.625rem;
  border-radius: 25px;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  text-decoration: none;
  transition: transform 200ms ease;
  color: var(--white);
}

.slate-card:hover {
  transform: translateY(-3px);
  color: var(--white);
}

.slate-card__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(250, 250, 250, 0.72);
  margin: 0;
}

.slate-card__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--white);
  margin: 0;
  line-height: 1.25;
}

.slate-card__body {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--white);
  margin: 0;
}

.slate-card--accent {
  background-color: var(--slate);
  outline: 3px solid var(--amber);
  outline-offset: -3px;
  position: relative;
}

.slate-card--accent .slate-card__label {
  color: var(--amber);
}

/* Pricing plan cards (Free + Pro) */

.plan-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 880px;
  margin: 0 auto;
}

@media (min-width: 800px) {
  .plan-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.plan-card {
  background-color: var(--white);
  border: 1.5px solid var(--gray-border);
  border-radius: 25px;
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  position: relative;
}

.plan-card--featured {
  border-color: var(--amber);
  border-width: 2px;
}

.plan-card__ribbon {
  position: absolute;
  top: -14px;
  left: 2rem;
  background-color: var(--amber);
  color: var(--navy);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
}

.plan-card__tier {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 1rem;
}

.plan-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  margin-bottom: 0.5rem;
}

.plan-card__amount {
  font-size: 2.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy);
  line-height: 1;
}

.plan-card__period {
  font-size: 0.9375rem;
  color: var(--slate);
}

.plan-card__strike {
  font-size: 0.875rem;
  color: var(--gray-500);
  margin-bottom: 1.25rem;
}

.plan-card__description {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--gray-700);
  margin-bottom: 1.5rem;
}

.plan-card__cta {
  margin-bottom: 1.5rem;
}

.plan-card__cta .btn {
  width: 100%;
}

.plan-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
}

.plan-card__features li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--gray-700);
}

.plan-card__features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--teal);
  font-weight: 700;
}

.plan-card__features--muted li {
  color: var(--gray-400);
}

.plan-card__features--muted li::before {
  content: "—";
  color: var(--gray-400);
}

.plan-card__lock-note {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--gray-700);
  padding: 0.875rem 1rem;
  background-color: var(--warm-sand);
  border-left: 3px solid var(--amber);
  border-radius: 6px;
  margin-top: auto;
}

/* Channel list (granular ICP page) */

.channel-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0 0;
  max-width: 880px;
}

.channel-list li {
  padding: 1rem 0;
  border-bottom: 1px solid var(--gray-border);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--gray-700);
}

.channel-list li:last-child {
  border-bottom: 0;
}

.channel-list li strong {
  display: block;
  color: var(--navy);
  font-weight: 600;
  margin-bottom: 0.25rem;
}

/* Read-next block */

.read-next {
  display: grid;
  gap: 1rem;
  margin: 2rem auto 0 auto;
  max-width: 880px;
}

.read-next__item {
  padding: 1.125rem 1.375rem;
  background-color: var(--warm-sand);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-decoration: none;
  transition: transform 150ms ease;
}

.read-next__item:hover {
  transform: translateY(-2px);
  color: var(--navy);
}

.read-next__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}

.read-next__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
}

/* Editorial pull-quote (About page Mission section) */

.pull-quote {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  padding: 1rem 0;
}

.pull-quote__mark {
  display: block;
  font-size: 2.5rem;
  color: var(--teal);
  line-height: 1;
  margin-bottom: 1rem;
}

.pull-quote__text {
  font-size: 1.5rem;
  line-height: 1.4;
  color: var(--navy);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}

@media (min-width: 880px) {
  .pull-quote__text {
    font-size: 1.875rem;
  }
}

/* Numbered list blocks (About 8 Values, principled / serious feel — no slate cards) */

.numbered-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-width: 880px;
  margin: 2rem auto 0 auto;
}

@media (min-width: 720px) {
  .numbered-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 0 2.5rem;
  }
}

.numbered-list__item {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--gray-border);
  display: flex;
  gap: 1rem;
  align-items: baseline;
}

.numbered-list__num {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--teal);
  flex-shrink: 0;
  width: 1.75rem;
}

.numbered-list__body {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--navy);
}

.numbered-list__body strong {
  font-weight: 600;
  color: var(--navy);
}

.numbered-list__body span {
  display: block;
  color: var(--gray-700);
  margin-top: 0.125rem;
  font-weight: 400;
}

/* ICP slate card with image inset (motion hub pages) */

.slate-card--with-image {
  padding: 1.25rem 1.25rem 1.625rem 1.25rem;
}

.slate-card__image {
  background-color: var(--white);
  border-radius: 13px;
  overflow: hidden;
  margin-bottom: 1rem;
  aspect-ratio: 5 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slate-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Editorial founder portrait illustration treatment (About hero) */

.editorial-hero__illustration {
  max-width: 480px;
  margin: 0 auto;
}

.editorial-hero__illustration img {
  width: 100%;
  height: auto;
  border-radius: 25px;
}

/* Legal page chrome (privacy etc.) */

.legal-header {
  background-color: var(--warm-sand);
  padding: 2.25rem 0 1.75rem;
  border-bottom: 1px solid var(--gray-border);
}

.legal-header__title {
  font-size: 2.25rem;
  line-height: 1.15;
  margin-bottom: 1rem;
  color: var(--navy);
  letter-spacing: -0.02em;
}

@media (min-width: 880px) {
  .legal-header__title {
    font-size: 2.625rem;
  }
}

.legal-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-size: 0.875rem;
  color: var(--gray-600);
}

.legal-header__meta strong {
  font-weight: 600;
  color: var(--navy);
  display: block;
}

.legal-body {
  padding: 3rem 0 5rem;
  background-color: var(--white);
}

/* Prototype index page (INDEX.html only) */

.prototype-index {
  background-color: var(--warm-sand);
  min-height: 100vh;
  padding: 3.5rem 0;
}

.prototype-index__header {
  margin-bottom: 2.5rem;
}

.prototype-index__title {
  font-size: 2rem;
  margin-bottom: 0.75rem;
}

.prototype-index__lede {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--gray-700);
  max-width: 640px;
}

.prototype-index__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 720px) {
  .prototype-index__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.prototype-index__card {
  background-color: var(--white);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.625rem;
  display: block;
  color: var(--navy);
  border: 1px solid transparent;
  transition: border-color 150ms ease;
}

.prototype-index__card:hover {
  border-color: var(--teal);
  color: var(--navy);
}

.prototype-index__card-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 0.5rem;
}

.prototype-index__card-title {
  font-size: 1.0625rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.prototype-index__card-meta {
  font-size: 0.875rem;
  color: var(--gray-600);
}

/* ============================================================ */
/* ABOUT PAGE                                                   */
/* Built to about-mockup.png. Uses the locked design language   */
/* (palette, type, container widths, buttons). Section patterns */
/* are about-specific: editorial 2-col hero, reversed navy      */
/* panel, mission/vision creed, operating-model split, 8-value  */
/* grid with coloured rules. No italics per the standing rule.  */
/* ============================================================ */

/* Hero: copy left, illustration right. Left-aligned, editorial. */
.about-hero {
  background-color: var(--white);
  padding: 3.5rem 0 6rem 0;
}

.about-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 880px) {
  .about-hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 4rem;
  }
}

.about-hero__eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 1.25rem;
}

.about-hero__headline {
  font-size: 2.75rem;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--navy);
  margin-bottom: 1.5rem;
}

@media (min-width: 880px) {
  .about-hero__headline {
    font-size: 3.25rem;
  }
}

.about-hero__subhead {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--gray-700);
  margin-bottom: 2rem;
  max-width: 30rem;
}

.about-hero__illustration {
  width: 100%;
}

.about-hero__illustration img {
  width: 100%;
  height: auto;
  border-radius: 25px;
}

/* Reversed navy panel: illustration left, copy right. */
.what-section--reverse .what-section__illustration {
  order: -1;
}

@media (max-width: 879px) {
  .what-section--reverse .what-section__illustration {
    order: 0;
  }
}

/* Mission + Vision creed. Mission teal left-aligned, Vision amber */
/* right-aligned. Asymmetric per mockup. Decorative quote glyphs,  */
/* weight + colour carry the emphasis. No italics.                */
.creed {
  background-color: var(--white);
  padding: 5rem 0 4rem 0;
}

.creed__block {
  max-width: 760px;
  margin: 0 auto 2.5rem auto;
  text-align: center;
}

.creed__block--vision {
  text-align: center;
}

.creed__label {
  font-size: 2rem;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin-bottom: 1.25rem;
}

.creed__block--mission .creed__label {
  color: var(--navy);
}

.creed__quote {
  font-size: 1.5rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}

@media (min-width: 880px) {
  .creed__quote {
    font-size: 1.875rem;
  }
}

.creed__block--mission .creed__quote {
  color: var(--teal);
}

.creed__block--vision .creed__quote {
  color: var(--amber);
}

.creed__quote-mark {
  font-weight: 700;
}

/* Body line that follows the vision quote. */
.creed__coda {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--gray-700);
}

/* Operating model: heading + body left, illustration right. White. */
.about-split {
  background-color: var(--white);
  padding: 3.5rem 0;
}

.about-split__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 880px) {
  .about-split__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4rem;
  }
}

.about-split__title {
  font-size: 2rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin-bottom: 1.5rem;
}

@media (min-width: 880px) {
  .about-split__title {
    font-size: 2.5rem;
  }
}

.about-split__body p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--gray-700);
  margin-bottom: 1.25rem;
}

.about-split__body p:last-child {
  margin-bottom: 0;
}

.about-split__illustration {
  width: 100%;
}

.about-split__illustration img {
  width: 100%;
  height: auto;
}

/* Values: centred heading + intro, then a 4-col grid (2 tablet, 1 */
/* mobile). Each value = title, coloured rule, body. Top row teal  */
/* rule, bottom row amber rule per the mockup.                     */
.values-section {
  background-color: var(--gray-50);
  padding: 4rem 0 4.5rem 0;
}

.values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem 2.5rem;
  margin-top: 3rem;
}

@media (min-width: 640px) {
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .values-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.value__title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.875rem;
}

.value__rule {
  width: 100%;
  height: 3px;
  border-radius: 2px;
  margin-bottom: 1.125rem;
}

.value__rule--teal {
  background-color: var(--teal);
}

.value__rule--amber {
  background-color: var(--amber);
}

.value__body {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--gray-700);
}

/* ============================================================ */
/* PRICING — collapsible feature comparison table              */
/* ============================================================ */

.cmp {
  max-width: 980px;
  margin: 0 auto;
}

.cmp__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  margin: 0 auto;
  padding: 0.875rem 1.5rem;
  background: none;
  border: 1px solid var(--gray-300);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
}

.cmp__toggle:hover {
  border-color: var(--teal);
  color: var(--teal);
}

.cmp__toggle-chevron {
  width: 14px;
  height: 8px;
  transition: transform 0.2s ease;
}

.cmp__toggle[aria-expanded="true"] .cmp__toggle-chevron {
  transform: rotate(180deg);
}

.cmp__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.cmp__panel.is-open {
  grid-template-rows: 1fr;
  margin-top: 2rem;
}

.cmp__panel-inner {
  overflow: hidden;
}

.cmp-table-wrap {
  overflow-x: auto;
}

.cmp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  min-width: 640px;
}

.cmp-table thead th {
  text-align: left;
  padding: 0.875rem 1rem;
  color: var(--navy);
  font-weight: 700;
  border-bottom: 2px solid var(--gray-200);
}

.cmp-table thead th:nth-child(2),
.cmp-table thead th:nth-child(3) {
  width: 32%;
}

.cmp-table tbody td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--gray-border);
  color: var(--gray-700);
  line-height: 1.5;
  vertical-align: top;
}

.cmp-table__feature {
  font-weight: 600;
  color: var(--navy);
}

.cmp-table tbody tr:nth-child(odd) {
  background-color: var(--gray-50);
}

.cmp-table__check {
  color: var(--teal);
  font-weight: 700;
}

.cmp-table__none {
  display: inline-block;
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background-color: var(--gray-300);
  vertical-align: middle;
}

/* ============================================================ */
/* LEGAL INDEX (/legal landing page)                            */
/* ============================================================ */

.legal-index {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.legal-index a {
  color: var(--navy);
  font-size: 1.0625rem;
  font-weight: 500;
  text-decoration: none;
}

.legal-index a:hover {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Breadcrumb on every legal page, back to the index */
.legal-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--gray-500);
  margin-bottom: 1.125rem;
}

.legal-breadcrumb a {
  color: var(--teal);
  font-weight: 500;
  text-decoration: none;
}

.legal-breadcrumb a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-breadcrumb__sep {
  color: var(--gray-300);
}

.legal-breadcrumb__current {
  color: var(--gray-500);
}

/* Compact button variant used inside the home carousel cards.
   margin-top: auto pushes it to the bottom of .carousel__card-text so all
   CTAs line up across cards regardless of body text length. */
.btn--card {
  align-self: center;
  font-size: 0.875rem;
  padding: 0.625rem 1.25rem;
  margin-top: auto;
  padding-top: 0.625rem;
}


/* Stage-2: button rule — #fafafa text on every button, no underline, no hover colour change ever.
   Beats section link rules like .what-section__body a {color:amber} that were tinting button text. */
a.btn, a.btn:link, a.btn:visited, a.btn:hover, a.btn:focus, a.btn:active {
  color: var(--white);
  text-decoration: none;
}
.btn--primary:hover, .btn--primary:focus { background-color: var(--teal);  border-color: var(--teal);  color: var(--white); }
.btn--coral:hover,   .btn--coral:focus   { background-color: var(--coral); border-color: var(--coral); color: var(--white); }

/* Stage-2: home hero trust chips — stand out (bold teal, larger), tight to the CTAs, more space before the illustration */
.home-hero__trust {
  margin: 0 0 3.75rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--teal);
  letter-spacing: -0.005em;
}
/* Stage-2: scannable home bullet lists */
.home-bullets { list-style: none; margin: 1rem 0 0; padding: 0; }
.home-bullets li { position: relative; padding-left: 1.5rem; margin-bottom: 0.75rem; line-height: 1.55; }
.home-bullets li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--teal); }
.what-section .home-bullets li::before { background: #fbbf24; }
.founder-section .home-bullets { max-width: 40rem; margin-left: auto; margin-right: auto; margin-bottom: 1.5rem; text-align: left; }

/* Stage-2: how-steps — centre the title + body under the centred number badge (3rd section) */
.how-step__title, .how-step__body { text-align: center; }

/* Stage-2: carousel section intro line — centred, with breathing room before the cards */
.carousel-section__sub { text-align: center; max-width: 760px; margin: 0 auto 3rem auto; }


/* ===== /waiting-list (rebuild to mockup parity) ===== */
/* Beta Squad navy band */
.beta-section{background:var(--navy);padding:64px 0;}
.beta-section__inner{display:flex;gap:48px;align-items:center;}
.beta-section__body{flex:1 1 56%;color:#FAFAFA;}
.beta-section__eyebrow{display:block;color:var(--amber);font-size:0.8rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:0.6rem;}
.beta-section__title{color:#FAFAFA;font-size:2rem;line-height:1.15;margin:0 0 1rem;}
.beta-section__body p{color:#FAFAFA;margin:0 0 1rem;line-height:1.6;}
.beta-section__list{list-style:none;margin:1rem 0;padding:0;}
.beta-section__list li{position:relative;padding-left:1.6rem;margin-bottom:0.6rem;color:#FAFAFA;line-height:1.5;}
.beta-section__list li::before{content:"";position:absolute;left:0;top:0.5em;width:0.5rem;height:0.5rem;border-radius:50%;background:var(--amber);}
.beta-section__cta{margin-top:1.5rem;}
.beta-section__illustration{flex:1 1 44%;}
.beta-section__illustration img{width:100%;max-width:460px;height:auto;display:block;border:0;margin:0 auto;}
@media (max-width:820px){.beta-section__inner{flex-direction:column;}.beta-section__illustration{order:-1;}}

/* Form section (warm sand) */
.wl-section{background:var(--warm-sand,#F5F0E8);padding:64px 0;}
.wl-section__inner{max-width:760px;}
.wl-section__intro{text-align:center;color:var(--navy);max-width:560px;margin:0.5rem auto 2.5rem;line-height:1.6;}

/* Form inputs CLONED verbatim from contact.html .cfield */
.waitlist-form{display:grid;gap:1.5rem;}
.waitlist-form[hidden]{display:none;}
.waitlist-form .cfield label,.waitlist-form .wl-grouplabel{font-weight:700;color:var(--navy);font-size:0.95rem;}
.waitlist-form .cfield input:not([type="checkbox"]),.waitlist-form .cfield select{font-family:inherit;font-size:1rem;line-height:1.5;color:var(--navy);background:#fafafa;border:1.5px solid var(--navy);border-radius:12px;padding:0.85rem 1rem;width:100%;box-sizing:border-box;}
.waitlist-form .cfield select{appearance:none;-webkit-appearance:none;-moz-appearance:none;height:auto;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%231b2a4a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem;}
/* label-left two-column layout, per the mockup */
.waitlist-form .cfield{display:grid;grid-template-columns:32% 1fr;gap:0.4rem 1.75rem;align-items:start;}
.waitlist-form .cfield > label,.waitlist-form .cfield > .wl-grouplabel{padding-top:0.85rem;}
.wl-control{min-width:0;}
.wl-help{font-size:0.82rem;color:var(--slate,#64748B);line-height:1.45;margin:0.45rem 0 0;}
.wl-help a{color:var(--teal);font-weight:600;text-decoration:none;}
.wl-req{color:var(--coral);}
.wl-check{display:flex;align-items:flex-start;gap:0.6rem;color:var(--navy);line-height:1.5;margin:0.2rem 0 0;cursor:pointer;font-size:0.95rem;font-weight:400;}
.wl-check input[type="checkbox"]{margin-top:0.25rem;width:1rem;height:1rem;accent-color:var(--teal);flex:0 0 auto;}
.wl-check > span{flex:1 1 auto;min-width:0;}
.wl-control > .wl-check{margin-top:0.55rem;}
.wl-submit-row .btn{margin-top:0.25rem;}
.wl-formerr{color:#c0463a;font-size:0.9rem;margin:0.75rem 0 0;}
@media (max-width:720px){.waitlist-form .cfield{grid-template-columns:1fr;}.waitlist-form .cfield > label,.waitlist-form .cfield > .wl-grouplabel{padding-top:0;}.wl-submit-row span{display:none;}}

/* On-page Stage-1 success (cloned from .contact-result--sent look) */
.waitlist-result{background:rgba(42,123,136,0.10);border-radius:16px;padding:2.5rem;text-align:center;max-width:600px;margin:0 auto;}
.waitlist-result h2{margin:0 0 0.6rem;color:var(--navy);font-size:1.5rem;}
.waitlist-result p{margin:0 auto;color:var(--navy);line-height:1.6;max-width:480px;}

/* Thank-you page */
.wl-confirmed{padding:96px 0;text-align:center;}
.wl-confirmed__eyebrow{display:block;color:var(--teal);font-size:0.8rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:0.75rem;}
.wl-confirmed__heading{color:var(--navy);font-size:2.4rem;margin:0 0 1rem;}
.wl-confirmed__body{color:var(--navy);max-width:540px;margin:0 auto 1.75rem;line-height:1.65;font-size:1.05rem;}

/* business-type Other free-text reveal */
.waitlist-form #wl-type-other{margin-top:0.6rem;}