/* BuildMyCredit.io — waitlist landing page.
   Extends assets/site.css and stays inside the Deep Teal & Gold system used by
   the rest of the site: bg #F2F6F3 · surface #FFFFFF · teal #0E6B5C ·
   teal-light #E1F0EC · gold #96692C · border #D8E2D9 · text #12201A.

   What's different here is scale, not vocabulary — this page has one job, so
   the type and the icons are set larger than on the marketing pages. Every
   surface, radius, gradient and accent is the site's own. */

/* ---- Type scale ------------------------------------------------------- */

.wl-display {
  font-family: 'Lora', Georgia, serif;
  font-weight: 600;
  /* vw-driven through the middle so it fits a 320px phone and still fills a
     desktop hero without a breakpoint jump. */
  font-size: clamp(2.05rem, 7.4vw, 3.9rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #12201A;
}
.wl-h2 {
  font-family: 'Lora', Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.55rem, 4.4vw, 2.5rem);
  line-height: 1.16;
  letter-spacing: -0.015em;
  color: #12201A;
}
.wl-lead { font-size: clamp(1rem, 2.4vw, 1.25rem); line-height: 1.62; color: #4C5B52; }

/* Headline accent — colour only. The phrase carrying the benefit shifts to
   teal; no rule, wash or underline behind it. At this size the colour change
   is enough to mark the phrase, and the headline stays clean. */
.wl-hl { color: #0E6B5C; }

/* The offer, sitting directly under the headline. Set in the display face so
   it reads as part of the headline block rather than as body copy — the
   benefit gets the h1, the promotion gets the line beneath it. */
.wl-offer {
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  line-height: 1.4;
  font-weight: 500;
  color: #0E6B5C;
}

/* Three reassurances a first-time visitor needs before they'll type an email. */
.wl-assure {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  font-size: 0.95rem;
  color: #4C5B52;
}
.wl-assure li { display: inline-flex; align-items: center; gap: 0.5rem; }
.wl-assure i { color: #0E6B5C; font-size: 0.85rem; }
.wl-body { font-size: clamp(0.97rem, 1.8vw, 1.05rem); line-height: 1.65; color: #4C5B52; }

/* ---- Section marker ---------------------------------------------------
   Not a pill. Credit reporting is a records business, and the theme notes
   already reserve mono for prices, counts, IDs and timestamps — so section
   labels are set in that register, under a short gold rule, the way a heading
   is marked on a printed statement. Quiet on purpose: the headline and the
   offer timeline carry the page, and a badge competing with them is noise. */
:root { --wl-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Menlo, Consolas, monospace; }

.wl-marker {
  display: block;
  font-family: var(--wl-mono);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #96692C;
}
.wl-marker::before {
  content: '';
  display: block;
  width: 2.25rem;
  border-top: 2px solid #96692C;
  margin-bottom: 0.85rem;
}

/* ---- Icons ------------------------------------------------------------
   Inline SVG sprite references. Sized in em so every place that previously
   sized a Font Awesome <i> by font-size keeps working unchanged. */
.ico {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Header -----------------------------------------------------------
   The waitlist header carries a slightly larger lockup than the marketing
   pages. Both it and the CTA step down on narrow screens so the wordmark
   never runs under the button and the label never wraps to two lines. */
.wl-brand .brand-ico { width: 2.4rem; height: 2.4rem; }
.wl-brand .brand-wordmark { font-size: 1.45rem; }
.wl-header-cta { white-space: nowrap; }

/* Give the lockup a comfortable tap height without changing how it looks. */
header .brand-lockup { padding: 0.4rem 0; }

@media (max-width: 460px) {
  .wl-brand .brand-ico { width: 2rem; height: 2rem; }
  .wl-brand .brand-wordmark { font-size: 1.15rem; }
  /* line-height is pinned because Tailwind v4 expresses text-sm's leading as a
     ratio rather than v3's absolute 1.25rem — without this, shrinking the font
     shrinks the leading too and the button falls to a 36px tap target. */
  .wl-header-cta { font-size: 0.9rem; line-height: 1.25rem; padding: 0.7rem 1.15rem; }
}

/* On narrow phones the full label can't share the bar with the lockup, so the
   button says just "Join". The destination is unchanged. */
@media (max-width: 420px) {
  .wl-cta-long { display: none; }
  .wl-header-cta { padding: 0.7rem 1.05rem; }
}

/* The prototype header also carries a nav toggle, so it runs out of room
   sooner — its label collapses while the toggle is still on screen. */
@media (max-width: 1023px) {
  .wl-header-compact .wl-cta-long { display: none; }
}

/* At the narrow end the lockup is the widest thing in the bar. Step it down
   so the wordmark, the button and the nav toggle all fit on one line. */
@media (max-width: 400px) {
  header .brand-lockup .brand-ico { width: 1.85rem; height: 1.85rem; }
  header .brand-lockup .brand-wordmark { font-size: 1.05rem; }
}

/* The header is sticky, so anything an in-page link jumps to must reserve room
   for it — otherwise the section's eyebrow lands underneath the bar. */
section[id],
details[id],
#join { scroll-margin-top: clamp(5.5rem, 10vw, 7rem); }

/* ---- Section rhythm ----------------------------------------------------
   Vertical and horizontal padding both scale with the viewport, so the page
   never feels cramped on a phone or stranded on a wide monitor. */
.wl-section { padding: clamp(3.25rem, 7vw, 6rem) clamp(1.5rem, 4vw, 2.5rem); }
/* 80rem === Tailwind max-w-7xl, the width every other page on the site uses.
   Anything narrower reads as a boxed column floating on a wide monitor. */
.wl-wrap { max-width: 80rem; margin: 0 auto; }
.wl-narrow { max-width: 46rem; margin: 0 auto; }
/* Reading measure inside the full-width column — long body copy still needs a
   line length you can actually track. */
.wl-prose { max-width: 46rem; }

/* ---- Icons ------------------------------------------------------------
   The site's icon tile: teal gradient, rounded-2xl, white glyph. Scaled up
   from the 3rem used on the marketing pages. */
.wl-tile {
  width: clamp(3rem, 6vw, 3.5rem);
  height: clamp(3rem, 6vw, 3.5rem);
  border-radius: 1rem;
  background: linear-gradient(135deg, #0E6B5C 0%, #1a8a78 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  flex-shrink: 0;
}
.wl-tile-gold { background: linear-gradient(135deg, #96692C 0%, #b3823c 100%); }

/* ---- Process ----------------------------------------------------------
   A connected flow, because the order is the point: each step gates the next,
   and people want to see how far signing up is from rent reaching the bureau. */
/* Default (phone and tablet): a vertical run. Five columns only stop being
   cramped somewhere past 1024px, and a squeezed column of three-word lines is
   worse than an honest list. */
.wl-process {
  list-style: none;
  /* The gap below the run lives here, not in a utility class: this file loads
     after Tailwind, so a `margin: 0` reset here silently beat any mb-* put on
     the element. Columns end at different heights on desktop, so the space is
     measured from the tallest one and needs to be generous. */
  margin: 0 0 clamp(2.75rem, 5vw, 4rem);
  padding: 0;
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.25rem);
}
.wl-process-step {
  position: relative;
  text-align: left;
  padding-left: calc(clamp(3rem, 6vw, 3.5rem) + clamp(1rem, 3vw, 1.5rem));
  min-height: clamp(3rem, 6vw, 3.5rem);
}
.wl-process-step .wl-tile { position: absolute; left: 0; top: 0; }

/* Dotted run from one tile down to the next. */
.wl-process-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: calc(clamp(3rem, 6vw, 3.5rem) / 2 - 1px);
  top: clamp(3rem, 6vw, 3.5rem);
  bottom: calc(clamp(1.75rem, 4vw, 2.25rem) * -1);
  border-left: 2px dotted #C3D6CD;
}

.wl-process-n {
  font-size: 0.79rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #96692C;
  margin-bottom: 0.4rem;
}
.wl-process-t { font-size: clamp(1rem, 1.6vw, 1.1rem); font-weight: 600; color: #12201A; margin-bottom: 0.4rem; line-height: 1.35; }
.wl-process-d { font-size: clamp(0.9rem, 1.4vw, 0.97rem); line-height: 1.6; color: #4C5B52; }

/* Desktop: lay the same steps out left to right with a connecting rule. */
@media (min-width: 1024px) {
  .wl-process { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; }
  .wl-process-step { text-align: center; padding: 0 0.85rem; min-height: 0; }
  .wl-process-step .wl-tile { position: relative; z-index: 1; margin: 0 auto 1.35rem; }

  /* Horizontal connector, drawn behind the tiles and clipped at both ends. */
  .wl-process-step:not(:last-child)::before,
  .wl-process-step::after {
    content: '';
    position: absolute;
    top: 1.75rem;
    bottom: auto;
    border-left: 0;
    border-top: 2px dotted #C3D6CD;
  }
  .wl-process-step:not(:last-child)::before { left: 50%; right: 0; }
  .wl-process-step::after { left: 0; right: 50%; }
  .wl-process-step:first-child::after { display: none; }
}

/* ---- The offer, told with the product's own timeline motif ------------
   Same shape as the reporting timeline in site.css. Teal and ticked for the
   three months already covered; gold for the months still ahead of you. The
   tick matters more than the hue — it survives a greyscale print and the
   ~8% of men with red-green colour vision deficiency. */
.offer-timeline { display: flex; gap: clamp(3px, 0.8vw, 6px); align-items: flex-end; }
.offer-timeline .om {
  flex: 1;
  height: clamp(34px, 7vw, 54px);
  border-radius: clamp(4px, 1vw, 7px);
  background: #E8F0EA;
  border: 1px solid #D8E2D9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: clamp(0.9rem, 1.9vw, 1.15rem);
}
.offer-timeline .om.free { background: #0E6B5C; border-color: #0E6B5C; }
.offer-timeline .om.paid { background: #96692C; border-color: #96692C; }
.offer-timeline .om .ico { stroke-width: 2.6; }
.offer-key { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; font-size: 0.92rem; color: #4C5B52; }
.offer-key span { display: inline-flex; align-items: center; gap: 0.6rem; }
.offer-key i { width: 0.85rem; height: 0.85rem; border-radius: 3px; display: inline-block; }

/* ---- Signup column ----------------------------------------------------
   Two columns: the form sits against the right edge of its own column.
   One column: it centres. The card caps at 32rem, so on a 768–1023px screen a
   left-aligned form would leave a few hundred pixels of dead space down its
   right side — centring balances that. Below ~560px the card is already full
   width, so this changes nothing there. */
.wl-form-col { width: 100%; max-width: 32rem; justify-self: center; }
@media (min-width: 1024px) {
  .wl-form-col { justify-self: end; }
}

/* ---- Signup card ------------------------------------------------------
   The site's auth-card surface: white, bordered, deeply rounded, lifted on a
   soft teal shadow. */
.signup-card {
  background: #fff;
  border: 1px solid #D8E2D9;
  border-radius: 1.5rem;
  box-shadow: 0 20px 60px rgba(14,107,92,0.10), 0 4px 20px rgba(0,0,0,0.05);
  padding: clamp(1.6rem, 4vw, 2.5rem);
}

/* Inputs a touch larger than the rest of the site — this form is the page. */
.signup-card .inp { font-size: 1rem; padding: 0.85rem 1rem; }
.signup-card .lbl { font-size: 0.9rem; margin-bottom: 0.45rem; }
.signup-card .field { margin-bottom: 1.15rem; }

/* Scarcity note above the fields. Gold rather than red: the offer having a
   limit is information, not a warning, and the card should not open with an
   alarm colour. Sits inside the card's own padding as a tinted band. */
.wl-scarcity {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: #FBF6EC;
  border: 1px solid #EBDCC0;
  border-radius: 0.85rem;
  padding: 0.75rem 0.9rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #6B5426;
}
.wl-scarcity strong { color: #4E3D18; font-weight: 600; }
.wl-scarcity .ico { color: #96692C; flex-shrink: 0; margin-top: 0.18rem; }

/* Honeypot — hidden from people, visible to naive bots */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Form status ------------------------------------------------------ */
.form-status {
  display: none;
  font-size: 0.9rem;
  border-radius: 0.75rem;
  padding: 0.7rem 0.9rem;
  margin-bottom: 1rem;
}
.form-status.show { display: block; }
.form-status.tone-error { background: #FBE9E7; color: #A63A3A; }
.form-status.tone-info { background: #E1F0EC; color: #0E6B5C; }

/* ---- FAQ --------------------------------------------------------------
   Card accordions, matching faq.html on the marketing site.

   One column while a question still needs the width to stay on two lines;
   two from 1024px, where a single reading-width column left half the section
   empty. Grid rather than CSS columns: a `column-count` layout reflows every
   card when one <details> opens, which moves the answer you just clicked out
   from under the cursor. align-items:start lets an open card grow without
   stretching its neighbour. */
.wl-faq { display: grid; gap: 0.75rem; align-items: start; max-width: 46rem; }
@media (min-width: 1024px) {
  .wl-faq { grid-template-columns: 1fr 1fr; gap: 0.9rem 1.5rem; max-width: none; }
}
.wl-faq details {
  background: #fff;
  border: 1px solid #D8E2D9;
  border-radius: clamp(0.9rem, 2vw, 1.25rem);
  padding: 0.25rem clamp(1.1rem, 3vw, 1.5rem);
}
.wl-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 2rem 1.15rem 0;
  position: relative;
  font-size: clamp(0.98rem, 1.6vw, 1.05rem);
  font-weight: 500;
  color: #12201A;
}
.wl-faq summary::-webkit-details-marker { display: none; }
/* Chevron drawn as a background SVG rather than a Font Awesome glyph, so the
   accordion marker doesn't depend on an icon font loading. */
.wl-faq summary::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 0.85rem;
  height: 0.85rem;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E6B5C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform 0.3s ease;
}
.wl-faq details[open] summary::after { transform: translateY(-50%) rotate(180deg); }
.wl-faq summary:focus-visible { outline: 2px solid #0E6B5C; outline-offset: 3px; border-radius: 6px; }
.wl-faq .answer { padding: 0 clamp(0.5rem, 2vw, 2rem) 1.3rem 0; font-size: clamp(0.94rem, 1.5vw, 1rem); line-height: 1.65; color: #4C5B52; }

/* ---- Footer -----------------------------------------------------------
   The footer lockup runs at 1.8x the base .brand-lockup size, so the mark and
   the wordmark scale together and the gap keeps the same proportion. */
footer .brand-lockup { gap: 0.99rem; }
footer .brand-lockup .brand-ico { width: 3.42rem; height: 3.42rem; }
footer .brand-lockup .brand-wordmark { font-size: 2.16rem; }

/* On touch widths the footer links get vertical padding so each one is a
   comfortable target instead of a 24px line of text. */
@media (max-width: 767px) {
  footer nav a,
  footer ul a { display: inline-block; padding: 0.62rem 0; }
  footer .brand-lockup { padding: 0.4rem 0; }
}

/* ---- Success state ---------------------------------------------------- */
.success-mark {
  width: 4rem;
  height: 4rem;
  border-radius: 9999px;
  background: #E1F0EC;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  color: #0E6B5C;
  font-size: 1.65rem;
}

/* ---- UX Pilot product-system refresh ---------------------------------
   The waitlist now uses the same compact, record-oriented components as the
   product screens: 10px surfaces, hairline elevation, status chips, mono data
   and a glass header with the gold account-context rule. */

:root {
  --wl-dark-bg: #0D1512;
  --wl-dark-surface: #172420;
  --wl-dark-surface-2: #1E2C26;
  --wl-dark-ink: #EAF0EA;
  --wl-dark-ink-soft: #A7B6AD;
  --wl-dark-ink-faint: #8FA097;
  --wl-dark-border: #26352D;
  --wl-dark-accent: #3FC6A6;
  --wl-dark-accent-soft: #123A31;
  --wl-dark-gold: #DDAB63;
}

html { scroll-behavior: smooth; }
body { transition: background-color 0.2s ease, color 0.2s ease; }

.wl-statusbar {
  background: #12201A;
  color: #EAF0EA;
  font-family: var(--wl-mono);
  font-size: 0.72rem;
  letter-spacing: 0.035em;
}
.wl-statusbar-inner {
  max-width: 80rem;
  min-height: 2.35rem;
  margin: 0 auto;
  padding: 0.55rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.wl-statusbar span { display: inline-flex; align-items: center; gap: 0.5rem; }
.wl-statusbar .ico { color: #DDAB63; }
.wl-statusbar-note { color: #A7B6AD; }

.wl-site-header {
  background: rgba(255,255,255,0.76);
  border-bottom: 1px solid #D8E2D9;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.wl-header-inner {
  max-width: 80rem;
  min-height: 4.5rem;
  margin: 0 auto;
  padding: 0.65rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.wl-primary-nav { display: flex; align-items: center; justify-content: center; gap: 1.7rem; margin-left: auto; }
.wl-primary-nav a { color: #4C5B52; font-size: 0.87rem; font-weight: 500; transition: color 0.15s ease; }
.wl-primary-nav a:hover { color: #0E6B5C; }
.wl-header-actions { display: flex; align-items: center; gap: 0.7rem; }
.wl-theme-toggle {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  border: 1px solid #D8E2D9;
  background: rgba(255,255,255,0.7);
  color: #4C5B52;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.wl-theme-toggle:hover { color: #0E6B5C; border-color: #C3D1C4; background: #fff; }
.wl-theme-toggle:focus-visible,
.wl-primary-nav a:focus-visible,
.wl-header-cta:focus-visible { outline: 2px solid #1E8FBF; outline-offset: 2px; }
.wl-theme-toggle .ico { width: 1rem; height: 1rem; }
.theme-sun { display: none; }
.wl-header-cta { padding: 0.72rem 1.35rem; font-size: 0.88rem; }

.hero-gradient {
  background:
    radial-gradient(circle at 16% 8%, rgba(14,107,92,0.12), transparent 31%),
    radial-gradient(circle at 86% 75%, rgba(30,143,191,0.09), transparent 34%),
    #F2F6F3;
}
.wl-hero-copy { max-width: 43rem; }
.wl-hero-kicker { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.15rem; color: #627168; font-size: 0.82rem; font-weight: 500; }
.wl-hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: rgba(255,255,255,0.68);
  border: 1px solid #D8E2D9;
  border-radius: 10px;
  margin: 0 0 1.35rem;
  box-shadow: 0 1px 2px rgba(18,32,26,0.05);
  overflow: hidden;
}
.wl-hero-metrics > div { padding: 0.95rem 1rem; }
.wl-hero-metrics > div + div { border-left: 1px solid #D8E2D9; }
.wl-hero-metrics dt { color: #627168; font-size: 0.7rem; margin-bottom: 0.3rem; }
.wl-hero-metrics dd { color: #4C5B52; font-size: 0.78rem; }
.wl-hero-metrics dd span { color: #12201A; font-family: var(--wl-mono); font-size: 1.2rem; font-weight: 600; margin-right: 0.2rem; }

.card,
.signup-card,
.wl-faq details {
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(18,32,26,0.06), 0 1px 3px rgba(18,32,26,0.04);
}
.signup-card {
  box-shadow: 0 18px 50px rgba(14,107,92,0.09), 0 2px 8px rgba(18,32,26,0.06);
}
.signup-card .inp { border-radius: 6px; }
.wl-scarcity,
.form-status { border-radius: 10px; }
.wl-card-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  color: #627168;
  font-family: var(--wl-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.wl-live-dot { width: 0.48rem; height: 0.48rem; display: inline-block; flex: 0 0 auto; border-radius: 999px; background: #2E7D5B; box-shadow: 0 0 0 4px #E4F2EA; }

.wl-offer-card { position: relative; overflow: hidden; }
.wl-offer-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid #D8E2D9; }
.wl-offer-head h3 { margin-top: 0.7rem; font-family: 'Lora', Georgia, serif; color: #12201A; font-size: clamp(1.15rem,2vw,1.45rem); font-weight: 600; }
.wl-offer-stats { display: flex; align-items: stretch; }
.wl-offer-stats > div { min-width: 8.5rem; padding-left: 1.25rem; border-left: 1px solid #D8E2D9; }
.wl-offer-stats dt { color: #627168; font-size: 0.68rem; margin-bottom: 0.25rem; }
.wl-offer-stats dd { color: #12201A; font-family: var(--wl-mono); font-size: 1.45rem; font-weight: 600; }
.wl-offer-stats dd span { color: #627168; font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 400; }
.offer-timeline .om { border-radius: 6px; }
.wl-benefit-card { background: #fff; border: 1px solid #D8E2D9; border-radius: 10px; padding: 1.5rem; box-shadow: 0 1px 2px rgba(18,32,26,0.04); }
.wl-service-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.wl-service-grid > .card { grid-column: span 2; }
.wl-service-grid > .card:nth-last-child(2) { grid-column: 2 / span 2; }
.wl-service-grid > .card:last-child { grid-column: 4 / span 2; }

.wl-tile {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 10px;
  background: #E1F0EC;
  border: 1px solid rgba(14,107,92,0.18);
  color: #0E6B5C;
  font-size: 1.05rem;
}
.wl-tile-gold { background: #F3E9DA; border-color: rgba(150,105,44,0.2); color: #96692C; }

.wl-statement-card {
  display: grid;
  grid-template-columns: minmax(0,0.85fr) minmax(0,1.15fr);
  gap: 0 4rem;
  background: #fff;
  border: 1px solid #D8E2D9;
  border-radius: 10px;
  padding: clamp(1.7rem,4vw,3rem);
  box-shadow: 0 1px 3px rgba(18,32,26,0.05);
}
.wl-statement-card .wl-marker { grid-column: 1; grid-row: 1; }
.wl-statement-card .wl-h2 { grid-column: 1; grid-row: 2 / span 2; }
.wl-statement-card .wl-body { grid-column: 2; }

.wl-coverage-summary {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  background: #fff;
  border: 1px solid #D8E2D9;
  border-radius: 10px;
  margin-bottom: 2rem;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(18,32,26,0.05);
}
.wl-coverage-summary > div { padding: 1rem 1.2rem; }
.wl-coverage-summary > div + div { border-left: 1px solid #D8E2D9; }
.wl-coverage-summary dt { color: #627168; font-size: 0.7rem; margin-bottom: 0.35rem; }
.wl-coverage-summary dd { color: #12201A; font-family: var(--wl-mono); font-size: 0.9rem; font-weight: 500; display: flex; align-items: center; gap: 0.55rem; }

.wl-final-section { background: #E8F0EA; }
.wl-final-panel {
  background: #12201A;
  border: 1px solid #26352D;
  border-radius: 10px;
  padding: clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,5vw,4rem);
  box-shadow: 0 20px 45px rgba(18,32,26,0.14);
}
.wl-final-panel .chip { margin-bottom: 1.25rem; background: rgba(221,171,99,0.14); color: #DDAB63; border: 1px solid rgba(221,171,99,0.28); text-transform: uppercase; letter-spacing: 0.08em; }
.wl-final-panel .wl-h2 { color: #EAF0EA; }
.wl-final-panel .wl-lead { max-width: 42rem; margin-left: auto; margin-right: auto; color: #A7B6AD; }

footer .brand-lockup { gap: 0.75rem; }
footer .brand-lockup .brand-ico { width: 2.5rem; height: 2.5rem; }
footer .brand-lockup .brand-wordmark { font-size: 1.55rem; }

/* Dark mode follows the UX Pilot Theme 1 token set. */
html.dark { color-scheme: dark; }
html.dark body,
html.dark body.bg-bg { background: var(--wl-dark-bg); color: var(--wl-dark-ink); }
html.dark .hero-gradient { background: radial-gradient(circle at 15% 10%, rgba(63,198,166,0.11), transparent 31%), radial-gradient(circle at 85% 75%, rgba(111,203,238,0.07), transparent 34%), var(--wl-dark-bg); }
html.dark .wl-site-header { background: rgba(23,36,32,0.78); border-bottom-color: var(--wl-dark-border); }
html.dark .wl-statusbar { background: #06120F; }
html.dark .wl-primary-nav a,
html.dark .wl-statusbar-note { color: var(--wl-dark-ink-soft); }
html.dark .wl-primary-nav a:hover { color: var(--wl-dark-accent); }
html.dark .brand-wordmark,
html.dark .text-text,
html.dark .wl-display,
html.dark .wl-h2,
html.dark .wl-process-t,
html.dark .wl-offer-head h3,
html.dark .wl-offer-stats dd,
html.dark .wl-hero-metrics dd span,
html.dark .wl-coverage-summary dd,
html.dark .wl-faq summary,
html.dark .lbl { color: var(--wl-dark-ink); }
html.dark .brand-wordmark .t,
html.dark .text-teal,
html.dark .wl-hl,
html.dark .wl-offer { color: var(--wl-dark-accent); }
html.dark .brand-wordmark .io,
html.dark .text-secondary,
html.dark .wl-lead,
html.dark .wl-body,
html.dark .wl-process-d,
html.dark .wl-faq .answer,
html.dark .offer-key,
html.dark .hint { color: var(--wl-dark-ink-soft); }
html.dark .wl-hero-kicker,
html.dark .wl-card-label,
html.dark .wl-hero-metrics dt,
html.dark .wl-offer-stats dt,
html.dark .wl-offer-stats dd span,
html.dark .wl-coverage-summary dt { color: var(--wl-dark-ink-faint); }
html.dark .bg-white,
html.dark .card,
html.dark .signup-card,
html.dark .wl-benefit-card,
html.dark .wl-statement-card,
html.dark .wl-coverage-summary,
html.dark .wl-faq details { background: var(--wl-dark-surface); }
html.dark .border-border,
html.dark .card,
html.dark .signup-card,
html.dark .wl-benefit-card,
html.dark .wl-statement-card,
html.dark .wl-coverage-summary,
html.dark .wl-faq details { border-color: var(--wl-dark-border); }
html.dark .wl-theme-toggle { background: var(--wl-dark-surface); border-color: var(--wl-dark-border); color: var(--wl-dark-ink-soft); }
html.dark .theme-moon { display: none; }
html.dark .theme-sun { display: inline-block; }
html.dark .btn-primary { background: var(--wl-dark-accent); color: var(--wl-dark-bg); }
html.dark .chip-teal { background: var(--wl-dark-accent-soft); color: var(--wl-dark-accent); }
html.dark .chip-good { background: #153026; color: #57C48D; }
html.dark .chip-warn { background: #2E2612; color: #E3AC50; }
html.dark .wl-hero-metrics { background: rgba(23,36,32,0.7); border-color: var(--wl-dark-border); }
html.dark .wl-hero-metrics > div + div,
html.dark .wl-coverage-summary > div + div,
html.dark .wl-offer-head,
html.dark .wl-offer-stats > div { border-color: var(--wl-dark-border); }
html.dark .signup-card .inp { background: var(--wl-dark-surface-2); border-color: var(--wl-dark-border); color: var(--wl-dark-ink); }
html.dark .signup-card .inp::placeholder { color: var(--wl-dark-ink-faint); }
html.dark .wl-scarcity { background: #2E2612; border-color: rgba(227,172,80,0.3); color: #D7C6A6; }
html.dark .wl-scarcity strong { color: #EAF0EA; }
html.dark .wl-tile { background: var(--wl-dark-accent-soft); border-color: rgba(63,198,166,0.25); color: var(--wl-dark-accent); }
html.dark .wl-tile-gold { background: #2E2416; border-color: rgba(221,171,99,0.25); color: var(--wl-dark-gold); }
html.dark .offer-timeline .om { background: var(--wl-dark-surface-2); border-color: var(--wl-dark-border); }
html.dark .offer-timeline .om.free { background: var(--wl-dark-accent); border-color: var(--wl-dark-accent); color: var(--wl-dark-bg); }
html.dark .offer-timeline .om.paid { background: var(--wl-dark-gold); border-color: var(--wl-dark-gold); }
html.dark .wl-live-dot { background: #57C48D; box-shadow: 0 0 0 4px #153026; }
html.dark .wl-final-section { background: var(--wl-dark-surface-2); }
html.dark footer { background: var(--wl-dark-bg); }

@media (max-width: 980px) {
  .wl-primary-nav { display: none; }
  .wl-header-inner { gap: 1rem; }
  .wl-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wl-service-grid > .card,
  .wl-service-grid > .card:nth-last-child(2),
  .wl-service-grid > .card:last-child { grid-column: auto; }
}

@media (max-width: 700px) {
  .wl-statusbar-note { display: none !important; }
  .wl-statusbar-inner { justify-content: center; }
  .wl-offer-head { align-items: flex-start; flex-direction: column; }
  .wl-offer-stats { width: 100%; }
  .wl-offer-stats > div { flex: 1; padding: 0 1rem 0 0; border-left: 0; }
  .wl-offer-stats > div + div { padding-left: 1rem; border-left: 1px solid #D8E2D9; }
  .wl-statement-card { display: block; }
  .wl-statement-card .wl-h2 { margin-bottom: 1.5rem; }
  .wl-coverage-summary { grid-template-columns: 1fr; }
  .wl-coverage-summary > div + div { border-left: 0; border-top: 1px solid #D8E2D9; }
}

@media (max-width: 560px) {
  .wl-service-grid { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
  .wl-header-inner { min-height: 4rem; padding-left: 1rem; padding-right: 1rem; }
  .wl-theme-toggle { width: 2.25rem; height: 2.25rem; }
  .wl-header-cta { padding: 0.65rem 1rem; }
  .wl-hero-metrics > div { padding: 0.8rem 0.65rem; }
  .wl-hero-metrics dt { min-height: 2em; }
  .wl-hero-metrics dd { font-size: 0.68rem; }
  .wl-hero-metrics dd span { display: block; font-size: 1.05rem; margin-bottom: 0.1rem; }
}