/**
 * Prompts site: global tokens, base elements and shared chrome.
 *
 * Section-specific styling lives in the section components as Astro scoped
 * styles. Only tokens, base elements, buttons and the legal modal live here: the
 * legal modal markup is injected at runtime by epi-disclaimer.js, so its
 * classes cannot be scoped to a component.
 */

:root {
  --green: #3fae3f;
  --green-hover: #46bf46;
  --green-shadow: #2f8a2f;
  --green-tint: #eaf7ea;
  /* Green for text on a light surface. The brand green is 2.60:1 on the grey
     band, which misses even the 3:1 large-text bar, so display copy there uses
     this one at 3.98:1. Never swap it back for --green on a light surface. On
     the navy hero band the ranking inverts: --green is 6.00:1 there and this
     one only 3.92:1, so that band uses --green. */
  --green-ink: #2f8a2f;
  --red: #e60000;
  --blue: #1f6fb2;
  --blue-hover: #144d7d;
  --blue-tint: #e9f1f9;
  --yellow: #ffd100;
  --navy: #0b1a3a;
  --page: #f4f4f4;
  --ink: #111;
  --text-soft: #555;
  --muted: #777;
  --border: #ccc;
  --border-soft: #ececec;
  /* Hero headline gold, rated against the navy hero band it sits on: 7.10:1,
     which clears AA for body copy, never mind the 3:1 large-text bar the
     headline actually has to meet. The previous #a2701a was picked for the
     grey band and is only 3.98:1 on navy: passing, but the weakest thing in
     the band. Re-rate this if the headline ever moves off navy. */
  --gold: #c9a227;
  --font: Poppins, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
input, button, textarea { font-family: inherit; }

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-hover); text-decoration: underline; }

/* ── Buttons ─────────────────────────────────────────────────────────── */

.btn {
  background: var(--green);
  color: #fff;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.btn:hover { background: var(--green-hover); }
.btn:disabled { opacity: .6; cursor: not-allowed; }

.btn-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  padding: 12px 26px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .02em;
  box-shadow: 0 4px 0 var(--green-shadow);
}

.btn-block {
  width: 100%;
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: 0 5px 0 var(--green-shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.btn-main { font-weight: 800; font-size: 18px; letter-spacing: .02em; }
/* Fluid so the longest sublabel stays on one line down to a 320px viewport.
   The line has 100vw - 64px to work in: .page-body and .btn-block each add
   12px and 20px of horizontal padding. Full 13px from ~355px up; below that
   it eases down to 11.3px rather than wrapping to a second line. */
.btn-sub {
  font-size: clamp(11.3px, calc(4.4vw - 2.9px), 13px);
  font-weight: 600;
  opacity: .9;
}

.btn-ghost {
  align-self: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 16px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  color: var(--ink);
  font-family: inherit;
}
.btn-ghost:hover { background: #f7f7f7; }

/* ── Page shell ──────────────────────────────────────────────────────── */

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* The hero band bleeds out of .col with 100vw, which counts the desktop
     scrollbar. `clip` contains that without making .page a scroll container. */
  overflow-x: clip;
}

/* Grey strip under the navy hero band, holding the hero CTA. The band paints
   its own top edge, so there is no padding above it. */
.page-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 12px 46px;
}

/* White content column, pulled up over the grey strip */
.page-body {
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 12px 60px;
}

.col {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.col-main { margin-top: -24px; }

/* ── Spinner (button loading state) ──────────────────────────────────── */

@keyframes epi-spin { to { transform: rotate(360deg); } }
.spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  animation: epi-spin .8s linear infinite;
  box-sizing: border-box;
  display: inline-block;
}

/* ── Legal modal: markup injected by epi-disclaimer.js ──────────────── */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .7);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal__panel {
  background: #fff;
  border-radius: 14px;
  max-width: 720px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .4);
}
.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border-soft);
}
.modal__head span { font-size: 17px; font-weight: 800; color: var(--ink); }
.modal__close {
  appearance: none;
  background: #f0f0f0;
  border: 0;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  font-size: 15px;
  color: var(--text-soft);
  cursor: pointer;
  font-family: inherit;
}
.modal__close:hover { background: #e4e4e4; }
.modal__scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 22px 26px 30px; }

.legal__body h3 { font-size: 16px; margin: 20px 0 8px; color: var(--ink); font-weight: 800; }
.legal__body p { color: var(--text-soft); line-height: 1.65; margin: 0 0 10px; font-size: 14px; overflow-wrap: break-word; }
.legal__body ul { margin: 0 0 12px; padding-left: 20px; color: var(--text-soft); font-size: 14px; line-height: 1.65; list-style: disc; }
.legal__body li { margin: 5px 0; }
.legal__body .meta { color: var(--muted); font-size: 13px; }

/* Footer links rendered by epi-disclaimer.js */
.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  justify-content: center;
  margin-bottom: 14px;
}
.site-footer-links button,
.site-footer-links span {
  color: #6b7280;
  font-weight: 700;
  font-size: 12px;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}
/* Persistent, not hover-only: hover does not exist on touch. The underline is
   the non-colour affordance that keeps these identifiable as links. Buttons
   only: the data-dialogs="false" <span> fallback is not interactive. */
.site-footer-links button { text-decoration: underline; }
.site-footer-links button:hover { color: #4b5563; }

/* Pages without a hero band (e.g. thank-you) start flush at the top. */
.page-body.no-hero { padding-top: 40px; }
.page-body.no-hero .col-main { margin-top: 0; }