/* ==========================================================================
   MBSG — unified assessment CTA block

   The bottom of every assessment results screen: an "Email me my results"
   form, then one row of exactly three buttons. Shared by stress-test.html,
   gut-check.html and estimator.html.

   WHY A FILE AND NOT THREE <style> BLOCKS — the three pages had each grown
   their own CTA styling (.st-cta, .gc-cta-card, .res-actions .btn), which is
   how they drifted into three different layouts in the first place. One
   stylesheet is the only version of "identical across all three" that stays
   true after the next edit.

   Linked AFTER css/a11y.css and BEFORE each page's inline <style>, so:
     · .ac-cta:focus-visible can outrank a11y.css's blanket orange link ring
       (needed — an orange ring on an orange fill is invisible);
     · a page can still override a spacing detail locally if it must.

   TOKENS — uses only the custom properties all three pages declare:
     --bg --surface --text --muted --blue --orange --border --hairline --mono
   Deliberately NOT --band-red / --band-green: those are declared in
   stress-test.html only, so the error and success lines state their hex
   outright. A var() that resolves on one page and not the other two is
   exactly the bug this file exists to prevent.
   ========================================================================== */

/* ── EMAIL CAPTURE ────────────────────────────────────────────────────────
   The primary action, and the reason the button row below it is secondary.

   Hidden at the stylesheet level as well as by each page's
   ENABLE_EMAIL_CAPTURE flag, so the form can never flash before the script
   runs, and so switching the flag off takes the fields out of the tab order
   and the accessibility tree — which a visually-hidden technique would not. */
.ac-capture {
  display: none;
  padding: 20px 22px;
  background: rgba(7, 11, 20, 0.5);
  border: 1px solid var(--hairline);
  border-radius: 6px;
}
.ac-capture.is-enabled { display: block; }

.ac-capture h3 {
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.ac-capture-hint {
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(234, 242, 255, 0.72);
}

.ac-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.ac-field label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(234, 242, 255, 0.78);
}
/* The asterisk is aria-hidden in the markup — `required` already carries the
   meaning to assistive tech, and "star" read aloud mid-label does not. */
.ac-req { color: var(--orange); }
.ac-field input {
  min-height: 44px;
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--text);
  background: rgba(7, 11, 20, 0.7);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.ac-field input::placeholder { color: rgba(234, 242, 255, 0.45); }

/* Both message lines collapse to nothing while empty, so the form has no gap
   waiting to be filled — :empty rather than a toggled class, because the
   engines only ever set textContent and the two cannot then disagree. */
.ac-capture-error,
.ac-capture-success {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.55;
}
.ac-capture-error { color: #FF8079; }    /* stress-test's --band-red   */
.ac-capture-success { color: #4ED8AE; }  /* stress-test's --band-green */
.ac-capture-error:empty,
.ac-capture-success:empty { display: none; }

.ac-capture-submit {
  min-height: 48px;
  padding: 14px 30px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 14.5px;
  font-weight: 700;
  background: var(--orange);
  color: var(--bg);
  border: 0;
  border-radius: 8px;
  transition: background .2s, color .2s;
}
/* One disabled look for both reasons the button is ever off — required fields
   still empty, and a send in flight.

   Deliberately NO `opacity`. Opacity fades the label and the fill together
   against whatever is behind them, and stacked on two already translucent
   colours it took the composited label down to 3.48:1. Stating both colours
   outright and letting the muted fill do the "off" instead measures 7.05:1
   composited over .ac-capture (against 7.74:1 for the live state above) — both
   clear of the 4.5:1 AA floor, and the fill still reads as unmistakably
   inactive. Measured in-browser over the real backdrop stack, not computed
   against a flat panel colour. */
.ac-capture-submit:disabled {
  cursor: not-allowed;
  background: rgba(240, 138, 36, 0.35);
  color: rgba(234, 242, 255, 0.85);
}
/* Sent: the form is replaced by its own success line, so the visitor cannot
   resubmit the same details by scrolling back up to a still-live button. */
.ac-capture.is-sent form { display: none; }

/* ── THREE-BUTTON ROW ─────────────────────────────────────────────────────
   Exactly three, always in this order: Talk to an Expert (gold) · Call Us
   (outline) · cross-sell (outline). One gold button is the whole visual
   hierarchy — the previous stress-test screen had five competing CTAs.

   Explicit repeat(3, …) rather than auto-fit/minmax: auto-fit reflows to two
   columns at an intermediate width and leaves one button orphaned on its own
   row, which reads as a fourth section. Three across, then one column. */
.ac-cta-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

/* Gold label is var(--bg), NOT white: #070B14 on #F08A24 measures 7.8:1,
   while #FFFFFF on the same orange is 2.5:1 and fails AA outright. */
.ac-cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  min-height: 100px;
  padding: 20px 22px;
  text-decoration: none;
  cursor: pointer;
  background: var(--orange);
  color: var(--bg);
  border: 0;
  border-radius: 8px;
  text-align: left;
  box-shadow: 0 6px 20px rgba(240, 138, 36, 0.28);
  transition: background .25s, transform .25s, box-shadow .25s, border-color .25s, color .25s;
}
.ac-cta:hover,
.ac-cta:focus-visible {
  background: #FFA347;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 14px 36px rgba(240, 138, 36, 0.55);
}
/* a11y.css rings focused links in orange; on an orange fill that is
   invisible, so this takes the light ring a11y.css gives .btn. */
.ac-cta:focus-visible { outline-color: var(--text); }

.ac-cta-title {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: inherit;
}
/* inline-block so the glyph can be transformed; aria-hidden in the markup so
   it never reaches the link's accessible name. */
.ac-cta-arrow { display: inline-block; margin-left: 3px; transition: transform .25s ease; }
.ac-cta:hover .ac-cta-arrow,
.ac-cta:focus-visible .ac-cta-arrow { transform: translateX(5px); }
/* 5.3:1 on the orange fill — de-emphasised without dropping under AA. */
.ac-cta-note {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(7, 11, 20, 0.75);
}

/* The two secondary buttons: no fill, accent border, accent label — the same
   --orange the gold button fills with, so the row reads as one family.

   Border at 55% rather than full strength is what keeps the hierarchy: three
   full-weight orange edges make three primaries, and the gold fill stops being
   the obvious next step. The label stays full strength — #F08A24 measures
   7.40:1 over the composited panel (#0B1322, the report card's translucent
   fill over --bg), identical on all three pages. Measured in-browser over the
   real backdrop stack, not against a flat panel colour.

   Was white-on-blue. Blue is this page's structural colour — grid, rules,
   links — so a blue edge read as a panel, not a button. */
.ac-cta--outline {
  background: none;
  color: var(--orange);
  border: 1.5px solid rgba(240, 138, 36, 0.55);
  box-shadow: none;
}
/* Hover has to do more than brighten now that rest is already orange: the
   border goes full strength, the label takes the gold button's hover orange,
   and a 10% wash gives the shape weight as well as heat. #FFA347 over that
   wash measures 8.22:1. */
.ac-cta--outline:hover,
.ac-cta--outline:focus-visible {
  background: rgba(240, 138, 36, 0.1);
  color: #FFA347;
  border-color: #FFA347;
  box-shadow: none;
  transform: translateY(-3px);
}
/* No outline-color of its own any more. a11y.css rings links in orange, which
   was right against a blue border and is not against an orange one — at 3px
   offset the ring and the border merge into one smudge. .ac-cta:focus-visible
   above already swaps in the light var(--text) ring, and it now serves both
   variants for the same reason: neither has a background the ring can hide in. */
.ac-cta--outline .ac-cta-note { color: rgba(234, 242, 255, 0.72); }

/* Stack below 768px. Matches the breakpoint a11y.css uses for touch targets,
   so the row and the sizing rules change at the same width. */
@media (max-width: 768px) {
  .ac-cta-row { grid-template-columns: 1fr; }
}