/**
 * 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;
}

/* Self-hosted fonts, latin subset only (52KB for five faces).

   Previously these came from fonts.googleapis.com with display=swap, which
   needs two round trips (the CSS, then the file) and so reliably lost the race
   with first paint. The hero then rendered in Georgia and reflowed when
   Playfair arrived: Georgia is 11.9% wider, which wrapped "16 ChatGPT Super
   Prompts" onto two lines, and the collapse back to one moved the whole page up
   47px. That single reflow was most of this page's CLS.

   font-display: optional is what makes the shift impossible rather than
   unlikely. `swap` still reflows whenever the font loses the race; `optional`
   gives it a ~100ms block period and then keeps the fallback for that pageview,
   so text is laid out once and never re-laid out. Same-origin files plus a
   preload in BaseLayout are what make it usually win that 100ms.

   Only weights actually used are shipped: Playfair 900 (the hero h1 is its only
   consumer) and Poppins 500/600/700/800. Adding a weight to a component means
   adding the file here, or the browser will synthesise it. */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 900;
  font-display: optional;
  src: url("/fonts/playfair-display-900.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url("/fonts/poppins-500.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url("/fonts/poppins-600.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url("/fonts/poppins-700.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: optional;
  src: url("/fonts/poppins-800.woff2") format("woff2");
}

* { box-sizing: border-box; }

/* Visually hidden, still announced. Labels on this site are screen-reader
   only — see packages/form/STANDARDS.md for why that makes naming the field
   in every error message mandatory rather than merely nice. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

html, body {
  margin: 0;
  padding: 0;
  /* Stops iOS inflating text after an orientation change. Paired with the
     16px input floor in LeadModal, which is what actually prevents the
     focus-zoom. */
  -webkit-text-size-adjust: 100%;
  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; }

/* Section banner. Three sections open with a navy bar (the offer card header,
   the "for you if" list, the prompt list). They were three hand-rolled copies
   that agreed on navy and white and on nothing else: 15/16/18px, weights 700
   and 800, three letter-spacings, three paddings, radii 0/6/14. One class so
   they read as one component and a fourth section cannot invent a fifth.

   Solid navy, never a gradient: axe reports a gradient as `undetermined`
   rather than a ratio, which would cost us the contrast check on the one
   surface that carries white text. */
.band {
  background: var(--navy);
  color: #fff;
  text-align: center;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .04em;
  line-height: 1.3;
  padding: 14px 18px;
  border-radius: 12px;
  text-wrap: balance;
}
/* Header variant: sits flush at the top of a clipped card, so only the top
   corners round and the card's own radius has to match. */
.band-flush { border-radius: 12px 12px 0 0; }

.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 ──────────────────────────────────────────────────────── */

/* Shell rows are a grid so that a row absorbs the slack BY DEFINITION. As a
   flex column with no child given flex-grow, the white .page-body was only ever
   as tall as its content, so the grey page colour showed below it. `flex: 1` on
   the child fixes the same symptom, but it is an invariant living in a place
   someone has to remember when they add a row or scaffold a new site.

   100dvh, not 100vh: on iOS Safari 100vh is the expanded viewport, so with the
   URL bar showing the shell is taller than what you can see and resizes when
   the bar collapses. */
.page {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr;  /* grey band / white body */
  /* 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;
}
/* Thank-you pages ship no hero band, so .page-body is the first child. Place it
   in the growing row explicitly; the empty auto row collapses to zero. */
.page-body.no-hero { grid-row: 2; }

/* 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; }