/* ==========================================================================
   The Undeniable Stack: offer page layout
   Depends on tokens.css (load tokens.css first). Emerald Standard, dark-first.
   Page-specific structure and components only; all color/type/space comes
   from the token layer.
   ========================================================================== */

/* ---- Primitives -------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxwidth);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.prose {
  max-width: var(--measure);
}

/* Spacing utilities. These replace inline style="margin-top:..." attributes so
   the page can ship a strict Content-Security-Policy with no style-src
   'unsafe-inline'. Values map to the token spacing scale. */
.section {
  padding-block: var(--space-9);
  border-top: var(--border-hairline) solid var(--border);
}
.section-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-4);
}
h2.section-title {
  font-size: var(--text-3xl);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-5);
  /* Was 20ch, which was tuned for the original short headings ("Selective on
     purpose."). Longer headings broke into three cramped lines with the whole
     right side of the container empty. 32ch keeps display type from running
     the full 1080px while letting a real sentence sit on two lines.
     Body copy fills the column at --measure; headings breaking earlier than
     body copy is the intended hierarchy, not an oversight. */
  max-width: 32ch;
}
.lead {
  font-size: var(--text-md);
  color: var(--text-muted);
  line-height: var(--leading-normal);
}
p {
  margin: 0 0 var(--space-4);
}
p:last-child {
  margin-bottom: 0;
}

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
  padding: 0.8em 1.4em;
  border: var(--border-hairline) solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}
.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
}
.btn-primary:hover {
  background: var(--accent-hover);
  color: var(--on-accent);
}
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---- Top nav ----------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--on-accent);
  padding: var(--space-2) var(--space-4);
  z-index: 100;
}
.skip-link:focus {
  left: var(--space-4);
  top: var(--space-2);
}
.topnav {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Opaque, deliberately. This was 88% opacity plus blur(8px), which let 12%
     of whatever scrolled underneath show through, and on a near-black page
     with large near-white serif headings that is a legible smudge sitting
     behind the wordmark, not a subtle frost. Measured: text at #f1f4f2 over
     #0c0f0e composites to luminance 39 at 88% against a background of 12.
     The blur softened it without hiding it.

     Nothing is lost by going solid. The hero's accent glow is centred above
     the viewport and its visible falloff already begins below the nav, so
     scroll-top renders identically either way (compared side by side at
     1000px, 2x). backdrop-filter went with it, since it only costs a
     compositing layer once the background is opaque. */
  background: var(--bg);
  border-bottom: var(--border-hairline) solid var(--border);
}
.topnav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
}
.wordmark .mark {
  width: 12px;
  height: 12px;
  background: var(--accent);
  display: inline-block;
}
.wordmark b {
  color: var(--text);
  font-weight: 600;
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.theme-toggle {
  background: transparent;
  border: var(--border-hairline) solid var(--border-strong);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.55em 0.8em;
  cursor: pointer;
}
.theme-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
}
@media (max-width: 640px) {
  .nav-actions .btn {
    display: none;
  }
}

/* ---- Hero -------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-9) var(--space-8);
  background: radial-gradient(
    120% 80% at 82% -10%,
    color-mix(in srgb, var(--accent) 12%, transparent),
    transparent 60%
  );
}
.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-5);
}
.hero h1 {
  font-size: var(--text-4xl);
  line-height: 1.03;
  letter-spacing: -0.015em;
  /* Was 16ch, which broke the headline across four lines and left most of the
     container empty. 21ch still breaks early enough for display impact and
     will hold a replacement headline without re-tuning. */
  max-width: 21ch;
}
.hero-sub {
  margin-top: var(--space-5);
  /* Was 56ch. Matches body prose now so the hero does not stop short of the
     stat strip sitting directly beneath it. */
  max-width: var(--measure);
  font-size: var(--text-md);
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

/* ---- Tagline band ------------------------------------------------------ */
.tagline {
  border-top: var(--border-hairline) solid var(--border);
  border-bottom: var(--border-hairline) solid var(--border);
  background: var(--surface-1);
  padding-block: var(--space-8);
}
.tagline p {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.25;
  /* Was 30ch, which forced three short lines in a full-width band. This is
     display type, so it still breaks earlier than body copy, but 46ch lets it
     sit on two lines and stop looking truncated. */
  max-width: 46ch;
  margin: 0;
}
.tagline .hl {
  color: var(--accent);
}

/* ---- Pillars ----------------------------------------------------------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--border-hairline);
  background: var(--border);
  border: var(--border-hairline) solid var(--border);
  margin-top: var(--space-6);
}
.pillar {
  background: var(--surface-1);
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
}
.pillar .p-num {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--accent);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-4);
}
.pillar h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
  line-height: 1.15;
}
.pillar p {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}
.pillar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--border-hairline) solid var(--border);
  padding-top: var(--space-4);
  margin-top: auto;
}
.pillar li {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  padding-left: var(--space-4);
  position: relative;
  margin-bottom: var(--space-2);
}
.pillar li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 5px;
  height: 5px;
  background: var(--accent);
}
.order-note {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--text);
}
.order-note b {
  color: var(--accent);
}
@media (max-width: 820px) {
  .pillars {
    grid-template-columns: 1fr;
  }
}

/* ---- From / To --------------------------------------------------------- */

/* ---- Phases table ------------------------------------------------------ */
.table-scroll {
  overflow-x: auto;
  margin-top: var(--space-6);
  border: var(--border-hairline) solid var(--border);
}

/* ---- Two-column fit / not-fit ----------------------------------------- */

/* ---- Proof ------------------------------------------------------------- */
.proof-list {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.proof-item {
  border-left: 2px solid var(--gold);
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
}
.proof-item h3 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.proof-item p {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ---- Callout ----------------------------------------------------------- */

/* ---- Steps (apply path) ------------------------------------------------ */
.steps {
  list-style: none;
  counter-reset: step;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--border-hairline);
  background: var(--border);
  border: var(--border-hairline) solid var(--border);
}
.steps li {
  counter-increment: step;
  background: var(--bg);
  padding: var(--space-5);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: start;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.steps h3 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.steps p {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ---- FAQ --------------------------------------------------------------- */
.faq {
  margin-top: var(--space-6);
  border-top: var(--border-hairline) solid var(--border);
}
.faq details {
  border-bottom: var(--border-hairline) solid var(--border);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-5) 0;
  font-weight: 600;
  font-size: var(--text-md);
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: center;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: var(--text-lg);
}
.faq details[open] summary::after {
  content: "\2013";
}
.faq details p {
  padding-bottom: var(--space-5);
  color: var(--text-muted);
  font-size: var(--text-sm);
  max-width: var(--measure);
}

/* ---- Final CTA --------------------------------------------------------- */
.finalcta {
  border-top: var(--border-hairline) solid var(--border);
  background: radial-gradient(
    120% 120% at 50% 0%,
    color-mix(in srgb, var(--accent) 10%, transparent),
    transparent 60%
  );
  padding-block: var(--space-9);
  text-align: center;
}
/* The final CTA stays deliberately narrower than the rest of the page. It is
   centre-aligned, and centred text is harder to read at long line lengths
   because the left edge shifts on every line. Narrow here is a choice, not the
   same ch-unit inconsistency fixed in tokens.css. */
.finalcta h2 {
  font-size: var(--text-3xl);
  letter-spacing: -0.01em;
  max-width: 24ch;
  margin-inline: auto;
}
.finalcta p {
  color: var(--text-muted);
  max-width: 60ch;
  margin: var(--space-4) auto var(--space-6);
}

/* ---- Footer ------------------------------------------------------------ */
.sitefooter {
  border-top: var(--border-hairline) solid var(--border);
  background: var(--surface-1);
  padding-block: var(--space-7);
}
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-6);
}
.footer-brand {
  font-family: var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: var(--text-sm);
  color: var(--text);
}

/* The footer legal nav had NO rule of its own until 2026-08-12, so its links
   sat directly against each other with only the inter-element whitespace
   between them and every one of them underlined. Rendered, that reads as a
   single continuous underlined run: "Privacy PolicyTerms of ServiceSMS
   Terms...". These are the links a carrier reviewer, a regulator and anyone
   exercising a privacy right actually has to find, so they cannot be the
   worst-separated thing on the page.

   The row gap is the load-bearing half, not the column gap: at narrow widths
   these wrap onto several lines, and without a row gap the wrapped lines
   collide. Vertical padding brings each link to a >=24px target (WCAG 2.2
   SC 2.5.8); measured, they come out 37px tall.

   The first version of this rule also carried `margin-block: -0.35rem` to
   cancel the padding so the footer's visual rhythm did not change. That was
   wrong and measurement caught it: the negative margin shrinks the LAYOUT
   height to 25px while the HIT BOX stays 37px, so with an 8px row gap the
   rows sat 33px apart and the targets of adjacent links overlapped by 4px on
   every viewport that wrapped. Three overlapping pairs at 390px. A tap near
   the boundary would open Terms when the visitor aimed at Privacy, on exactly
   the links someone exercising a privacy right needs to hit. No negative
   margin, and the row gap is sized against the real 37px box rather than
   against the collapsed one. */
/* THE ONLY DEFINITION. A second one lived in forms.css until 2026-08-12 and,
   because the legal pages loaded forms.css after this file, it won there: the
   footer nav rendered 16px accent on the homepage and 14px muted on privacy,
   terms and 404. Unified on the homepage treatment, since these links are the
   legal wayfinding a carrier reviewer or a regulator has to find and the
   homepage is where they land first.

   The row gap is 0.25rem against a 24px column gap on purpose. Links carry
   padding-block to reach a 37px hit box for WCAG 2.2 SC 2.5.8, and an earlier
   attempt paired that padding with a negative margin, which collapsed the
   layout height to 25px and left adjacent wrapped targets overlapping by 4px
   at 390px wide. Measure target overlap after changing either value. */
.footer-legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem var(--space-5);
  align-items: center;
}
.footer-legal-nav a {
  padding-block: 0.35rem;
}
.footer-legal-nav a:hover {
  color: var(--text);
}
.footer-legal {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--border-hairline) solid var(--border);
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.6;
  /* Was 80ch, but at --text-xs that is only about half the container, so the
     footer disclaimer sat in a narrow column under a full-width footer rule.
     Unbounded here: it is fine print, and it should run the width it is given. */
}

/* ---- Last section to footer junction: NO OVERRIDE, deliberately ---------
   A `main > :last-child { padding-bottom: var(--space-7) }` rule lived here
   briefly on 2026-08-12 and was reverted the same day. It cut the final
   junction from 145px to 97px on the theory that 145px of stacked padding
   (96 section + 48 footer) was an unintended void.

   Measuring every junction on the page afterwards showed the opposite:

     hero -> tagline    129px
     tagline -> what    162px
     what -> method     193px
     method -> who      193px
     who -> standards   193px
     standards -> footer 145px  (97px with the override)

   145px was already the tightest junction on the page. The override made it
   tighter still and broke the rhythm rather than restoring it. Do not
   re-add it. If the bottom of this page ever looks wrong again, the cause is
   content, not spacing: the real complaint that started this was a
   four-paragraph legal slab in the footer, since trimmed. */

/* ---- Short-page footer pin --------------------------------------------
   Opt-in via <body class="page-short">, currently 404.html only. Every other
   page is taller than any viewport, so pinning there would be a no-op that
   still adds a flex context around the sticky nav for no reason.

   min-height uses dvh with a vh fallback: on mobile Safari, 100vh is the
   viewport WITHOUT the retracted browser chrome, which would push the footer
   just below the fold and reintroduce a scrollbar on a page that has nothing
   to scroll to.

   flex-shrink is 0 on main so a long 404 (it is not, but it could be
   translated or reworded) grows the page rather than compressing the footer. */
.page-short {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.page-short main {
  flex: 1 0 auto;
}

/* ---- Mobile sticky CTA: REMOVED 2026-08-12 ------------------------------
   This was a fixed bottom "Apply" bar for viewports under 640px, where the
   nav's Apply button was hidden. The Apply button left every page when the
   offer moved to GoHighLevel, and no published page has carried a
   .mobile-cta element since.

   The rule that mattered was not the bar, it was its counterweight:
   body { padding-bottom: 4.75rem } under 640px, added so the fixed bar could
   never cover the footer's last line. With the bar gone that padding was
   reserving space for nothing, and it was measured doing exactly that:
   76px of dead scrollable emptiness below the footer on every page at 390px
   wide. It reads as a layout bug because it is one, and it is invisible in
   the markup because it lives entirely in CSS keyed to an element that is
   no longer there.

   If a sticky mobile CTA ever comes back, the bar and its body padding come
   back together or neither does. They are one control. */

/* ---- Load-in (restrained; reduced-motion handled in tokens.css) -------- */
.hero > .wrap > * {
  animation: rise 0.6s ease both;
}
/* Selectors below match the base rule's specificity (0,2,0) and come later,
   so the stagger delays win instead of being reset by the shorthand. */
.hero .hero-sub {
  animation-delay: 0.05s;
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---- Consent bar (Meta Pixel gate; shown to EEA/UK only, see
   scripts/consent.js). Sharp edges per brand rule; sits above the sticky nav
   and mobile CTA. ------------------------------------------------------------ */
.consent-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-2);
  border-top: var(--border-hairline) solid var(--border-strong);
}
.consent-bar p {
  margin: 0;
  max-width: var(--measure);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--text-muted);
}
.consent-actions {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-3);
}

/* Equal prominence for Accept and Decline. Neither is the page's primary
   emerald button: a filled Accept next to an outlined Decline reads as a nudge,
   and on mobile it also put a green filled button exactly where the sticky
   "Apply" CTA had been. Keep them identical to each other. */
.btn-consent {
  background: var(--surface-1);
  color: var(--text);
  border-color: var(--border-strong);
  min-width: 7.5rem;
  justify-content: center;
}
.btn-consent:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* While the gate is up it owns the bottom of the screen, and the page gets out
   of its way. Set by scripts/consent.js, which measures the banner because it
   wraps to two and three lines as the viewport narrows.
     - body padding stops content resting underneath it.
     - scroll-padding-bottom is what keeps KEYBOARD FOCUS out from under it:
       without it, tabbing into the lower form fields or the submit button
       scrolled them to the viewport bottom, directly behind the banner
       (WCAG 2.2 SC 2.4.11, measured at 10 focus stops).
     - the mobile sticky CTA is suppressed rather than stacked. Two fixed bars
       on an 844px screen eat 28% of it, and the banner covered the CTA
       completely anyway. The CTA returns the moment a choice is made. */
.us-consent-open {
  scroll-padding-bottom: calc(var(--consent-bar-h, 12rem) + var(--space-6));
}
.us-consent-open body {
  padding-bottom: calc(var(--consent-bar-h, 12rem) + var(--space-4));
}
.us-consent-open .mobile-cta {
  display: none;
}

/* ---- Print --------------------------------------------------------------
   There was no print stylesheet, and the consequence was specific rather than
   cosmetic: browsers do not print background colours by default, so the dark
   --bg was dropped while --text stayed near-white. The Terms and the Privacy
   Policy, the two documents on this site a buyer or a lawyer is most likely to
   save as PDF, printed as near-white text on white paper. Measured in print
   emulation before this existed: body #f1f4f2 on paper white, paragraphs
   #9aa8a1, both effectively invisible.

   Forcing a light palette here rather than adding print rules per component,
   so anything added later inherits a readable print form by default. */
@media print {
  :root,
  :root[data-theme="dark"],
  :root[data-theme="light"] {
    --bg: #ffffff;
    --surface-1: #ffffff;
    --surface-2: #ffffff;
    --overlay: #ffffff;
    --border: #cccccc;
    --border-strong: #999999;
    --text: #000000;
    --text-muted: #333333;
    --text-faint: #555555;
    --accent: #005a3c;
    --accent-hover: #005a3c;
    --gold: #6b5210;
    --on-accent: #ffffff;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  /* Chrome hides fixed and sticky elements on every printed page but the
     first; better to drop them outright than have them stamped on page one of
     a contract. */
  .topnav,
  .mobile-cta,
  .consent-bar,
  .skip-link,
  .backlink {
    display: none !important;
  }

  /* Reserved space belongs to an on-screen banner that is not printed. */
  .us-consent-open body {
    padding-bottom: 0;
  }

  .section,
  .legal {
    padding-block: var(--space-5);
    border-top: none;
  }

  /* A URL in brackets after each link, because a printed contract that says
     "see the Privacy Policy" with no address is not much use. Restricted to
     the legal pages: on the offer page it would litter the copy. */
  .legal a[href^="http"]::after,
  .legal a[href$=".html"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
    word-break: break-all;
  }

  /* Keep headings with their text and never split a table row across pages. */
  h1,
  h2,
  h3 {
    break-after: avoid;
    page-break-after: avoid;
  }
  tr,
  li {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* The horizontal scroller is a screen affordance; on paper it clips. */
  .table-scroll {
    overflow: visible !important;
  }
  table {
    width: 100% !important;
  }

  /* FAQ answers are collapsed on screen and would print empty. */
  details > *:not(summary) {
    display: revert !important;
  }
  details {
    break-inside: avoid;
  }
}