/* =============================================================================
   LeisureCheck Buyer Intelligence — shared stylesheet (V2)
   Single stylesheet, single design generation, used by every page.
   No build step, no external CSS framework. Custom properties drive theme.
   ============================================================================= */

:root {
  /* Brand colour system — see redesign strategy document for rationale.
     Do not add new colours without checking WCAG 2.2 AA contrast first. */
  --navy: #12304a;         /* primary authority: header, headings, footer, dark sections */
  --navy-ink: #0c2135;     /* deeper navy for text-on-ivory headings, better contrast */
  --teal: #087a72;         /* primary action */
  --teal-hover: #05645e;   /* primary action hover/focus */
  --ivory: #f7f5f0;        /* warm page background */
  --white: #ffffff;        /* cards, surfaces, forms */
  --slate: #344a5e;        /* body copy */
  --line: #d8e0e5;         /* borders/dividers */
  --amber: #a1580c;        /* caution signal only — darkened from initial #b86b12 for WCAG AA text contrast (4.7:1 on --amber-tint, verified) */
  --red: #b42318;          /* high-risk signal only */
  --green: #237a4b;        /* positive/verified signal only */

  /* Tints derived from the palette above for soft fills (kept subtle so
     status is never communicated by colour tint alone — icon + label
     always accompany these). */
  --teal-tint: #e5f3f1;
  --amber-tint: #fbeee0;
  --red-tint: #fbe9e7;
  --green-tint: #e8f4ec;
  --navy-tint: #e9eef3;

  --shadow-sm: 0 1px 2px rgba(12, 33, 53, 0.06), 0 1px 1px rgba(12, 33, 53, 0.04);
  --shadow-md: 0 8px 24px rgba(12, 33, 53, 0.09);
  --shadow-lg: 0 18px 40px rgba(12, 33, 53, 0.14);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --container: 1180px;
  --container-narrow: 800px;

  --font-heading: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --transition: 0.16s ease;
  --transition-slow: 0.28s ease;
}

/* =============================================================================
   RESET + BASE
   ============================================================================= */

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

html {
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--ivory);
  color: var(--slate);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--navy-ink);
  line-height: 1.18;
  margin: 0 0 0.5em;
  font-weight: 800;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 4.4vw, 2.9rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.25rem); }
h3 { font-size: 1.2rem; }

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

ul, ol { margin: 0; padding: 0; }

img { max-width: 100%; display: block; }

a {
  color: var(--teal);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}
a:hover { color: var(--teal-hover); }

button { font: inherit; }

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

/* Teal fails contrast against our navy surfaces (~2.6:1) — use a light
   outline for any focusable control inside a navy/dark section instead. */
.cta-band :focus-visible,
.founding-callout :focus-visible,
.site-footer :focus-visible,
.section-navy :focus-visible,
.report-preview-bar :focus-visible,
.btn-on-dark:focus-visible {
  outline-color: var(--white);
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: var(--white);
  padding: 12px 18px;
  z-index: 1000;
  border-radius: 0 0 8px 0;
  font-weight: 700;
}
.skip-link:focus {
  left: 0;
}

.container {
  width: min(100% - 40px, var(--container));
  margin-inline: auto;
}
.container-narrow {
  width: min(100% - 40px, var(--container-narrow));
  margin-inline: auto;
}

/* Long-form legal pages (Terms, Privacy, Refund Policy, Report Disclaimer) */
.legal-doc h2 { margin-top: 2.2em; font-size: 1.35rem; }
.legal-doc h2:first-of-type { margin-top: 1.2em; }
.legal-doc h3 { margin-top: 1.6em; }
.legal-doc > p:first-child { font-size: 1.05rem; color: var(--navy-ink); }
.legal-doc ul.check-list { margin: 0 0 1em; }
.legal-doc .short-form-notice {
  background: var(--navy-tint);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  margin-bottom: 1.6em;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* =============================================================================
   SECTIONS
   ============================================================================= */

.section { padding: 76px 0; }
.section-sm { padding: 48px 0; }
.section-tight { margin-top: 28px; }

.section-navy { background: var(--navy); color: #cfe0e9; }
.section-navy h2, .section-navy h3 { color: var(--white); }
.section-navy p { color: #c3d6e0; }

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

.section-header {
  max-width: 720px;
  margin: 0 auto 42px;
  text-align: center;
}
.section-header.align-left { margin: 0 0 32px; text-align: left; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--teal-tint);
  color: var(--teal-hover);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.section-navy .eyebrow {
  background: rgba(255,255,255,0.12);
  color: #bfe6e1;
}

/* =============================================================================
   BUTTONS
   ============================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.98rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
  line-height: 1.2;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

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

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

.btn-on-dark {
  background: transparent;
  border-color: rgba(255,255,255,0.55);
  color: var(--white);
}
.btn-on-dark:hover { background: rgba(255,255,255,0.12); border-color: var(--white); color: var(--white); }

.btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--navy);
}
.btn-ghost:hover { border-color: var(--navy); background: var(--navy-tint); }

.btn-block { width: 100%; }
.btn-lg { padding: 15px 26px; font-size: 1.03rem; }
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

/* =============================================================================
   HEADER + NAVIGATION (single generation, shared by every page)
   ============================================================================= */

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

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--navy-ink);
  font-family: var(--font-heading);
}
.brand:hover { color: var(--navy-ink); }

.brand-mark {
  width: 38px;
  height: 38px;
  flex: none;
  color: var(--teal);
}
.brand-mark svg { display: block; width: 100%; height: 100%; }

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.brand-word {
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}
.brand-word .brand-word-accent { color: var(--teal); }
.brand-sub {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  margin-top: 1px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}
.site-nav a {
  color: var(--navy-ink);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--teal-hover);
  border-bottom-color: var(--teal);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-toggle {
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--white);
  cursor: pointer;
  /* Progressive enhancement: this button is `hidden` in the markup by
     default. main.js removes the `hidden` attribute only once it has
     successfully wired up the toggle behaviour, so a no-JS visitor never
     sees a button that does nothing. */
  display: none;
}
.nav-toggle svg { width: 22px; height: 22px; color: var(--navy-ink); }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* --- No-JS baseline: the full nav stays inline and simply wraps onto its
   own row on narrow screens. Nothing is hidden, so every link remains
   reachable even if JavaScript fails to load or is disabled. --- */
@media (max-width: 880px) {
  .site-nav {
    order: 3;
    flex-basis: 100%;
    flex-wrap: wrap;
    gap: 4px 18px;
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid var(--line);
  }
}

/* --- JS-enhanced baseline (html.js added by an early inline script): the
   nav collapses into a dropdown behind the toggle button on narrow
   screens. See assets/main.js. --- */
@media (max-width: 880px) {
  html.js .nav-toggle:not([hidden]) { display: inline-flex; }

  html.js .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0;
    margin-top: 0;
    border-top: none;
    display: none;
  }
  html.js .site-nav[data-open="true"] { display: flex; }
  html.js .site-nav a {
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
    border-left: 3px solid transparent;
  }
  html.js .site-nav a:hover, html.js .site-nav a[aria-current="page"] {
    border-bottom-color: var(--line);
    border-left-color: var(--teal);
    background: var(--ivory);
  }
}

/* --- Narrowest phones: the logo, toggle and header CTA button no longer
   fit on one row. Hide the separate header CTA button and rely on the
   equivalent link already present at the end of .site-nav (nav-cta-mobile),
   which stays reachable in both the no-JS wrapped nav and the JS dropdown. --- */
.nav-cta-mobile { display: none; }
@media (max-width: 560px) {
  .header-actions { display: none; }
  .nav-cta-mobile {
    display: block;
    font-weight: 800;
    color: var(--teal-hover);
  }
}

@media (max-width: 560px) {
  .header-actions .btn { padding: 11px 14px; font-size: 0.9rem; }
  .brand-sub { display: none; }
}

/* =============================================================================
   HERO
   ============================================================================= */

.hero {
  padding: 56px 0 72px;
  background: linear-gradient(180deg, var(--ivory) 0%, var(--ivory) 60%, var(--white) 100%);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.hero-copy h1 { margin-bottom: 18px; }
.hero-copy .lead {
  font-size: 1.12rem;
  color: var(--slate);
  max-width: 54ch;
}

.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.hero-microlist {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--slate);
  font-size: 0.94rem;
}
.hero-microlist li { display: flex; align-items: flex-start; gap: 8px; list-style: none; }
.hero-microlist svg { flex: none; width: 18px; height: 18px; color: var(--teal); margin-top: 2px; }

/* ---- Report preview mock (hero visual) ---- */

.report-preview {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.report-preview-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 20px;
  background: var(--navy);
  color: var(--white);
}
.report-preview-bar .rp-dots { display: flex; gap: 6px; }
.report-preview-bar .rp-dots span {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.35);
}
.report-preview-bar .rp-title {
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

.report-preview-body { padding: 22px; }

.rp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.rp-row:last-child { border-bottom: 0; }
.rp-row-label {
  font-size: 0.92rem;
  color: var(--slate);
  font-weight: 600;
}
.rp-row-label span.rp-sub {
  display: block;
  font-weight: 400;
  font-size: 0.82rem;
  color: #5c7080;
  margin-top: 2px;
}

/* Status pill: icon + text, never colour alone */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
}
.status-pill svg { width: 14px; height: 14px; flex: none; }

.status-positive { background: var(--green-tint); color: var(--green); }
.status-caution  { background: var(--amber-tint); color: var(--amber); }
.status-risk     { background: var(--red-tint); color: var(--red); }
.status-neutral  { background: var(--navy-tint); color: var(--navy); }
.status-info     { background: var(--teal-tint); color: var(--teal-hover); }

.report-preview-foot {
  padding: 16px 22px 20px;
  background: var(--ivory);
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: #5c7080;
}

/* =============================================================================
   TRUST STRIP
   ============================================================================= */

.trust-strip {
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  padding: 26px 0;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--navy-ink);
}
.trust-item svg { width: 20px; height: 20px; color: var(--teal); flex: none; }

@media (max-width: 880px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .trust-grid { grid-template-columns: 1fr; }
}

/* =============================================================================
   GRIDS + CARDS
   ============================================================================= */

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 26px;
}
.card-flat {
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 26px;
}

.step-card .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-weight: 800;
  font-size: 0.95rem;
  margin-bottom: 14px;
}

.check-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.check-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--slate);
}
.check-list svg { width: 19px; height: 19px; color: var(--teal); flex: none; margin-top: 2px; }

/* =============================================================================
   TWO-PATH SECTION
   ============================================================================= */

.path-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.path-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
}
.path-card.is-primary {
  border-color: var(--teal);
  box-shadow: var(--shadow-md);
}
.path-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-hover);
  background: var(--teal-tint);
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  margin-bottom: 14px;
}
.path-card p { color: var(--slate); }
.path-card .btn { margin-top: auto; align-self: flex-start; }

@media (max-width: 780px) {
  .path-grid { grid-template-columns: 1fr; }
}

/* =============================================================================
   COMPARISON / PRICING
   ============================================================================= */

.plan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.plan-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px;
  display: flex;
  flex-direction: column;
}
.plan-card.is-flagship {
  border: 2px solid var(--teal);
  box-shadow: var(--shadow-lg);
}
.plan-flag {
  position: absolute;
  top: -13px;
  left: 28px;
  background: var(--teal);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}
.plan-name { margin-bottom: 4px; }
.plan-tagline { color: var(--slate); font-size: 0.94rem; margin-bottom: 18px; }
.plan-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.plan-price .amount {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--navy-ink);
}
.plan-price .unit { color: var(--slate); font-size: 0.9rem; }
.plan-gst { font-size: 0.82rem; color: #5c7080; margin-bottom: 22px; }

.plan-features { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
.plan-features li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.95rem; }
.plan-features svg { width: 18px; height: 18px; color: var(--teal); flex: none; margin-top: 2px; }
.plan-features li.is-muted { color: #5c7080; }
.plan-features li.is-muted svg { color: #b7c3cc; }

.plan-card .btn { margin-top: auto; }

.founding-callout {
  margin-top: 30px;
  background: var(--navy);
  color: #dfeaf0;
  border-radius: var(--radius-lg);
  padding: 26px 30px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.founding-callout .fc-badge {
  flex: none;
  background: var(--teal);
  color: var(--white);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
}
.founding-callout h3 { color: var(--white); margin-bottom: 6px; }
.founding-callout p { color: #c3d6e0; margin-bottom: 0; font-size: 0.94rem; }
.founding-callout ul { margin-top: 10px; }
/* .check-list is shared with light-background cards (var(--slate) text, var(--teal)
   icons) but is reused here on a navy background; found via a real-browser
   screenshot check to render at ~1.5:1 (text) / ~2.6:1 (icons) against navy,
   effectively unreadable. Scoped override to the same light tone already used
   for .founding-callout p (9.1:1) and the light teal tint for icons (11.9:1). */
.founding-callout .check-list li { color: #c3d6e0; }
.founding-callout .check-list svg { color: var(--teal-tint); }

@media (max-width: 880px) {
  .plan-grid { grid-template-columns: 1fr; }
}

/* =============================================================================
   NOTICES
   ============================================================================= */

.notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  font-size: 0.94rem;
  border: 1px solid transparent;
}
.notice svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.notice-info    { background: var(--teal-tint);  color: var(--navy-ink); border-color: #bfe1dd; }
.notice-info svg { color: var(--teal-hover); }
.notice-caution { background: var(--amber-tint); color: var(--navy-ink); border-color: #f0cfa3; }
.notice-caution svg { color: var(--amber); }
.notice-risk    { background: var(--red-tint);   color: var(--navy-ink); border-color: #f2c2bd; }
.notice-risk svg { color: var(--red); }
.notice strong { font-weight: 800; }

/* =============================================================================
   FAQ (progressive enhancement: <details>/<summary>, no JS required)
   ============================================================================= */

.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 4px 22px;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 0;
  font-weight: 700;
  color: var(--navy-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .faq-chevron {
  width: 20px; height: 20px; flex: none; color: var(--teal);
  transition: transform var(--transition);
}
.faq-item[open] summary .faq-chevron { transform: rotate(180deg); }
.faq-item p { padding-bottom: 18px; color: var(--slate); }

/* =============================================================================
   CTA BAND
   ============================================================================= */

.cta-band {
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 48px;
  text-align: center;
}
.cta-band h2 { color: var(--white); }
.cta-band p { color: #c3d6e0; max-width: 56ch; margin-inline: auto; }
.cta-band .btn-row { justify-content: center; }

/* =============================================================================
   FORMS (used on Terms/legal acknowledgement notes + contact info blocks)
   ============================================================================= */

.form-note-list { display: flex; flex-direction: column; gap: 16px; }
.form-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
}
.form-note input[type="checkbox"] {
  margin-top: 3px;
  width: 18px; height: 18px; flex: none;
  accent-color: var(--teal);
}
.form-note label { font-size: 0.92rem; color: var(--slate); }
.form-note.is-required { border-color: #bfe1dd; }
.form-note .tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  margin-left: 6px;
  vertical-align: middle;
}
.tag-required { background: var(--teal-tint); color: var(--teal-hover); }
.tag-optional { background: var(--navy-tint); color: var(--navy); }

/* =============================================================================
   FOOTER
   ============================================================================= */

.site-footer {
  background: var(--navy);
  color: #b9cdda;
  padding: 56px 0 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.footer-brand { display: flex; flex-direction: column; gap: 12px; }
.footer-brand .brand { color: var(--white); }
.footer-brand .brand-mark { color: #7fd4ca; }
.footer-brand .brand-sub { color: #9db4c2; }
.footer-brand p { color: #9db4c2; font-size: 0.92rem; max-width: 40ch; }

.footer-col h4 {
  color: var(--white);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.footer-col a {
  display: block;
  color: #b9cdda;
  text-decoration: none;
  font-size: 0.92rem;
  padding: 5px 0;
}
.footer-col a:hover { color: var(--white); }

.footer-legal {
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  align-items: center;
  justify-content: space-between;
  font-size: 0.86rem;
  color: #93aabb;
}
.footer-legal .footer-entity { line-height: 1.7; }
.footer-legal .footer-entity strong { color: #d7e5ec; }
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.footer-legal-links a { color: #93aabb; text-decoration: underline; text-underline-offset: 2px; }
.footer-legal-links a:hover { color: var(--white); }

@media (max-width: 980px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-legal { flex-direction: column; align-items: flex-start; }
}

/* =============================================================================
   MISC PAGE PATTERNS (transactional pages, legal pages, sample report)
   ============================================================================= */

.page-hero {
  padding: 52px 0 8px;
  background: var(--ivory);
}
.page-hero .eyebrow { margin-bottom: 12px; }
.page-hero p.lead { max-width: 60ch; color: var(--slate); font-size: 1.05rem; }

.status-page-card {
  max-width: 640px;
  margin: 40px auto 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px;
  text-align: left;
}
.status-page-card .status-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.status-icon.is-success { background: var(--green-tint); color: var(--green); }
.status-icon.is-cancelled { background: var(--amber-tint); color: var(--amber); }
.status-icon.is-notfound { background: var(--navy-tint); color: var(--navy); }
.status-icon svg { width: 28px; height: 28px; }

.legal-doc {
  max-width: var(--container-narrow);
  margin: 0 auto;
}
.legal-doc h2 { margin-top: 2em; }
.legal-doc h3 { margin-top: 1.6em; }
.legal-doc p, .legal-doc li { color: var(--slate); }
.legal-doc ul, .legal-doc ol { padding-left: 1.3em; margin-bottom: 1em; }
.legal-doc li { margin-bottom: 0.4em; }
.legal-updated {
  display: inline-block;
  font-size: 0.85rem;
  color: #5c7080;
  margin-bottom: 24px;
}

.placeholder-banner {
  background: var(--amber-tint);
  border: 1px solid #f0cfa3;
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin-bottom: 32px;
  font-size: 0.92rem;
  color: var(--navy-ink);
}
.placeholder-banner strong { color: var(--amber); }

table.compare-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
table.compare-table th, table.compare-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}
table.compare-table th { background: var(--navy); color: var(--white); font-family: var(--font-heading); }
table.compare-table tr:last-child td { border-bottom: none; }

@media (max-width: 700px) {
  table.compare-table { display: block; overflow-x: auto; }
}

/* utility */
.mt-0 { margin-top: 0; }
.text-center { text-align: center; }
.stack-gap-sm > * + * { margin-top: 10px; }

/* Ensure elements using the HTML hidden attribute remain hidden. */
[hidden] {
  display: none !important;
}

/* =============================================================================
   STAGE B ADDITIONS (content & presentation only; no behaviour)
   ============================================================================= */

/* Product-card helpers */
.plan-for { font-size: 0.9rem; color: var(--navy-ink); margin-bottom: 14px; }
.plan-for strong { font-weight: 800; }
.plan-note {
  font-size: 0.84rem;
  color: #46596a;
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin: 0 0 22px;
}
.plan-price .was { color: #5c7080; font-size: 0.95rem; text-decoration: line-through; }
.plan-subhead { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #46596a; margin: 0 0 10px; }

/* Comparison table: scrollable on small screens, keyboard reachable, row headers readable */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-md); }
.table-scroll:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
table.compare-table caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 12px;
  font-weight: 700;
  color: var(--navy-ink);
}
table.compare-table tbody th {
  background: transparent;
  color: var(--navy-ink);
  font-family: var(--font-body);
  font-weight: 700;
  border-bottom: 1px solid var(--line);
  padding: 14px 16px;
  text-align: left;
  font-size: 0.92rem;
}
table.compare-table tbody tr:last-child th { border-bottom: none; }
table.compare-table .is-cond { color: #46596a; }
table.compare-table .is-none { color: #5c7080; }
table.compare-table.three-way { min-width: 760px; }
table.compare-table.three-way th:first-child, table.compare-table.three-way td:first-child { min-width: 190px; }
@media (max-width: 700px) {
  .table-scroll table.compare-table { display: table; }
}


/* =============================================================================
   STAGE B.2 ADDITIONS -- pre-launch state (presentation only)
   ========================================================================== */
.prelaunch-bar {
  background: var(--amber-tint);
  color: var(--navy-ink);
  border-bottom: 1px solid #f0cfa3;
  font-size: 0.92rem;
  line-height: 1.45;
  padding: 10px 0;
}
.btn:disabled,
.btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}
@media (max-width: 700px) {
  .prelaunch-bar { font-size: 0.88rem; }
}