/**
 * 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 embr-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;
  /* Fine print: the disclaimer, the form's consent line, the thank-you
     footnotes. It was #777, which is 4.478:1 on white and just under the
     4.5:1 AA floor (WCAG 2.2, 1.4.3; none of this copy is "large text").
     #767676 is 4.542:1 and clears it. It is the one lever that matters here,
     because the Privacy Policy and T&C links inherit this colour rather than
     carrying one of their own, so the copy and its links move together. Every
     use of --muted sits inside the white .page-body or the white modal panel;
     nothing renders it on the grey --page, where it would be 4.13:1. */
  --muted: #767676;
  --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;
  /* White above the content column on a page with no hero band. It is a token
     because a section that wants to paint the top of such a page (the toolkit
     masthead) has to cancel exactly this much, and a literal in two files is
     the kind of pair that silently drifts. */
  --body-top: 40px;
}

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

/* A page rendering in the platform's own grotesque rather than the webfonts.
   `BaseLayout` sets data-fonts from its `webFonts` prop, and `/toolkit` is the
   one page that opts out: it is a long reference document rather than a funnel
   page, so it gains nothing from the brand face and pays nothing for one.

   Every family here ships with an operating system, so there is no @font-face,
   no request and no `font-display` period during which the page can reflow.
   "Helvetica Neue" resolves on macOS and iOS; the unspaced HelveticaNeue is the
   alias some older iOS builds expose; Helvetica then Arial cover the rest, and
   Android maps Arial onto Roboto. The two preloads are dropped in the head for
   the same reason, since nothing on the page would render with either file. */
html[data-fonts="system"] {
  --font: "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
}

* { 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 embr-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: embr-spin .8s linear infinite;
  box-sizing: border-box;
  display: inline-block;
}

/* ── Legal modal: markup injected by embr-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 embr-disclaimer.js.
 *
 * 11.5px because that is what `.embr-disclaimer p` renders the copyright and
 * disclaimer at, and these links have to be indistinguishable from the copy
 * they sit in. The row would otherwise inherit the footer's 12px. */
.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  justify-content: center;
  margin-bottom: 14px;
  font-size: 11.5px;
}
/* Buttons only, and the `span` that used to share this rule is gone from it
 * deliberately.
 *
 * The `span` is the non-interactive fallback, which "must not look clickable"
 * per CLAUDE.md. It used to get `cursor: pointer` from a shared block anyway:
 * the same affordance the underline was being withheld to avoid, applied by
 * the one property nobody looks at. There is no `<span>` in this footer any
 * more in any case, since the copy is rendered at build time and the script
 * only opens the modals, so the selector was styling nothing, which is exactly
 * how it kept `cursor: pointer` through review. Dropping it means any future
 * fallback inherits the footer's own body style, which is what static text
 * should look like.
 *
 * Appearance: none. `color` and `font` inherit, so these render as the
 * disclaimer copy around them and can never be dimmer than it. That replaces
 * the old `#6b7280` bold, which was measured at 4.83:1 and passed, but read as
 * two highlighted words inside the block that actually has to be read. See
 * CLAUDE.md, "Presenting the Privacy Policy / T&C links".
 *
 * The underline is hover-only, which is the whole of the visual cue and does
 * not exist on touch. That is a known, deliberate departure from WCAG 1.4.1,
 * not an oversight. Do not restore the persistent underline as a fix. */
.site-footer-links button {
  color: inherit;
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}
.site-footer-links button:hover { text-decoration: underline; }

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