/* Kaizen Roofing — direct mail QR landing page
   Palette and type per Brand Direction Sheet v1 (2025-12-02).

   Scope: one screen. Headline, subheadline, form, call button, legal links.
   Nothing else. This is a lead capture off a mailer QR scan, not a website.
   Graphic language is construction precision: ruler ticks, registration
   brackets, blueprint grid. No roof clichés anywhere. */

:root {
  --blue: #0050FF;
  --blue-hot: #2E6DFF;
  --blue-text: #4A80FF;    /* small text only. #0050FF is 3.37:1 on dark, fails AA below 18px */
  --blue-pale: #8FB0FF;    /* small text sitting on the promo bloom, where --blue-text drops to 3.27:1 */
  --ink: #06070A;
  --surface: #0E1013;
  --surface-2: #14171B;
  --surface-3: #191D22;
  --muted: #8E939A;        /* small body text. 6:1 on --surface */
  --muted-dim: #808790;
  --silver: #C7CACE;
  --white: #FFFFFF;
  --line: rgba(199, 202, 206, 0.13);
  --line-strong: rgba(199, 202, 206, 0.28);

  --display: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --frame: 1280px;
  --gutter: clamp(20px, 4vw, 56px);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

/* The UA sets [hidden] { display: none }, but any author rule with a display
   value beats it on specificity. .btn and .consent both set display, so
   hidden buttons and the hidden consent row rendered anyway and overflowed
   the card. This has to win. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.frame {
  max-width: var(--frame);
  margin: 0 auto;
  padding-inline: var(--gutter);
  width: 100%;
}

.page { min-height: 100dvh; display: flex; flex-direction: column; }

/* ============================================================
   Precision motif
   ============================================================ */

/* Hairline with ruler ticks. The brand sheet asks for accents drawn from
   construction precision; this is that, rather than a decorative flourish. */
.tickrule {
  position: relative;
  height: 1px;
  background: var(--line);
  width: 100%;
}

.tickrule::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 6px;
  width: 100%;
  background-image: repeating-linear-gradient(
    90deg,
    var(--line-strong) 0 1px,
    transparent 1px 48px
  );
}

/* Registration brackets, like corner marks on a drawing */
.brackets { position: relative; }

.brackets::before,
.brackets::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  pointer-events: none;
}

.brackets::before {
  top: -1px; left: -1px;
  border-top: 1px solid var(--blue);
  border-left: 1px solid var(--blue);
}

.brackets::after {
  bottom: -1px; right: -1px;
  border-bottom: 1px solid var(--blue);
  border-right: 1px solid var(--blue);
}

/* ============================================================
   Type
   ============================================================ */

.eyebrow {
  font-family: var(--display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue-text);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--blue);
  flex-shrink: 0;
}

/* Sized to the real headline. At 80px the approved copy ran five lines and
   left the ampersand orphaned at the start of one; 64px holds it to three or
   four and keeps the subheadline on the first screen. */
h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(38px, 4.5vw, 64px);
  line-height: 0.96;
  letter-spacing: -0.038em;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0;
}

h1 em { font-style: normal; color: var(--blue); }

h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 27px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.lede {
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.55;
  color: var(--silver);
  margin: 0;
  max-width: 44ch;
}

/* ============================================================
   Promo banner. $1,000 off, rolling 7-day countdown.

   Full-strength brand blue behind white text is 5.85:1, so unlike the body
   copy this one can carry small type at --blue without the lighter tint.
   ============================================================ */

.promo {
  position: relative;
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid rgba(0, 80, 255, 0.5);

  /* Deep gradient rather than a flat blue flood. The bar reads as part of the
     page instead of something stapled on top, and the bloom sits under the
     countdown so the eye lands on the timer instead of the left edge. */
  background:
    radial-gradient(132% 210% at 76% 50%, rgba(0, 80, 255, 0.34) 0%, transparent 60%),
    linear-gradient(97deg, #05060A 0%, #090F1E 34%, #0F1A38 68%, #0B1428 100%);
}

/* Charged top hairline. Blue only through the middle so the ends fade into
   the page rather than boxing the bar in. */
.promo::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--blue) 20%,
    var(--blue-hot) 56%,
    var(--blue) 80%,
    transparent 100%
  );
  pointer-events: none;
}

/* Ruler ticks along the bottom edge, same construction-precision motif as
   .tickrule rather than a second decorative language. */
.promo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(74, 128, 255, 0.45) 0 1px,
    transparent 1px 40px
  );
  pointer-events: none;
}

/* Specular pass. Reads far harder against the dark base than it did on flat
   blue, so it carries the attention job without the bar having to shout.
   Long tail on the keyframe keeps it parked off-screen between sweeps
   instead of strobing back and forth. */
.promo__sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 32%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(74, 128, 255, 0.12) 34%,
    rgba(158, 191, 255, 0.34) 50%,
    rgba(74, 128, 255, 0.12) 66%,
    transparent 100%
  );
  animation: promo-sweep 5.2s var(--ease) infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes promo-sweep {
  0%   { transform: translateX(-140%); }
  62%  { transform: translateX(360%); }
  100% { transform: translateX(360%); }
}

/* Live indicator. Broadcast language rather than sale language, which is what
   keeps the urgency from reading cheap. */
.promo__live {
  position: relative;
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue-hot);
  box-shadow: 0 0 10px rgba(46, 109, 255, 0.9);
}

.promo__live::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--blue-hot);
  animation: promo-ping 2.1s var(--ease) infinite;
}

@keyframes promo-ping {
  0%        { transform: scale(1); opacity: 0.75; }
  70%, 100% { transform: scale(3.6); opacity: 0; }
}

.promo__frame {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px clamp(16px, 3vw, 40px);
  padding-block: 11px 14px;
}

.promo__offer {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(12.5px, 1.3vw, 15px);
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--silver);
}

/* Small caps label, no box. A bordered pill next to a countdown is the exact
   visual grammar of a coupon, which is what we are trying not to look like. */
.promo__flag {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--blue-pale);
  white-space: nowrap;
}

/* White rather than blue. #2E6DFF on this base only reaches 4.29:1, which
   misses AA at this size, and white bold carries more weight anyway. The
   glow supplies the colour without touching legibility. */
.promo__deal strong {
  font-weight: 800;
  color: var(--white);
  text-shadow: 0 0 24px rgba(74, 128, 255, 0.6);
}

.promo__timer {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.promo__ends {
  font-family: var(--display);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver);
  white-space: nowrap;
}

.promo__clock {
  display: inline-flex;
  align-items: flex-start;
  gap: 3px;
  font-variant-numeric: tabular-nums;
}

.promo__clock .seg {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 29px;
}

.promo__clock .seg b {
  font-family: var(--display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: 0 0 20px rgba(74, 128, 255, 0.45);
}

/* Retriggered from JS on every value change, so each unit drops in as it
   rolls. Cheap odometer feel and it keeps the eye returning to the clock. */
.promo__clock .seg b.is-tick { animation: promo-digit 0.42s var(--ease); }

@keyframes promo-digit {
  0%   { transform: translateY(-3px); opacity: 0.35; }
  100% { transform: translateY(0); opacity: 1; }
}

.promo__clock .seg i {
  font-style: normal;
  font-family: var(--display);
  font-weight: 600;
  font-size: 8.5px;
  line-height: 1;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--blue-pale);
}

.promo__clock .sep {
  font-family: var(--display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1;
  color: rgba(143, 176, 255, 0.6);
}

@media (max-width: 560px) {
  /* The desktop background is a wide radial bloom offset to 76% across. On a
     375px bar that ellipse spans the entire width, so the bar renders as a
     flat pale-blue block instead of a dark bar with a glow behind the clock.
     Re-aim it low and centred so it lifts the countdown and nothing else. */
  .promo {
    background:
      radial-gradient(150% 125% at 50% 122%, rgba(0, 80, 255, 0.36) 0%, transparent 64%),
      linear-gradient(180deg, #05070E 0%, #0A1020 100%);
  }

  /* A specular sweep needs horizontal room to read as a sweep. Crossing 375px
     it lands as a flicker, which is worse than not having it. */
  .promo__sweep { display: none; }

  .promo::after { height: 3px; opacity: 0.55; }

  /* The offer line breaks mid-phrase once the flag and the deal share a row at
     this width. Drop the label and keep the live dot: the countdown sitting
     right underneath already says "limited time" louder than the words did. */
  .promo__ends,
  .promo__flag { display: none; }

  /* Two rows are unavoidable here (offer + clock need ~365px and there are
     335px of content width), so the job is making both rows tight. This takes
     the bar from 83px to roughly 60px, which is 3% of a phone screen back. */
  .promo__frame { padding-block: 8px 9px; gap: 5px 0; }
  .promo__offer { font-size: 12px; gap: 8px; }
  .promo__timer { gap: 0; }
  .promo__clock { gap: 2px; }
  .promo__clock .seg { min-width: 25px; gap: 1px; }
  .promo__clock .seg b { font-size: 15px; }
  .promo__clock .sep { font-size: 15px; }
  .promo__clock .seg i { font-size: 7.5px; letter-spacing: 0.1em; }
  .promo__clock .seg b.is-tick { animation: none !important; }
}

/* ============================================================
   Masthead
   ============================================================ */

.masthead { border-bottom: 1px solid var(--line); }

.masthead .frame {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 18px;
}

/* Real logotype pulled from the Kaizen GHL media library (Logotype_White.svg).
   Native ratio is 2456x610, so height drives the size and width follows. */
.wordmark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: opacity 0.2s var(--ease);
}

.wordmark img {
  height: clamp(26px, 2.6vw, 34px);
  width: auto;
  display: block;
}

.wordmark:hover { opacity: 0.82; }
.wordmark:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; }

.masthead-tel {
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: color 0.2s var(--ease);

  /* 44px minimum touch target (WCAG 2.5.8 / Apple HIG). The text itself is
     only ~24px tall, which is a miserable tap on a phone, and this link is
     one of the two ways a scanned lead can reach anyone. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 6px;
  margin-right: -6px;
}

.masthead-tel:hover { color: var(--blue-text); }
.masthead-tel:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ============================================================
   Hero. The whole page.
   ============================================================ */

.hero {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  padding-block: clamp(44px, 5.5vw, 84px);
  overflow: hidden;
}

/* Blueprint grid. Very low contrast on purpose: it should register as
   texture, not as a visible pattern. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(199, 202, 206, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(199, 202, 206, 0.045) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(120% 90% at 22% 14%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 90% at 22% 14%, #000 0%, transparent 72%);
  pointer-events: none;
}

/* Blue bloom behind the headline */
.hero::after {
  content: "";
  position: absolute;
  top: -22%;
  left: -12%;
  width: 720px;
  height: 720px;
  background: radial-gradient(circle, rgba(0, 80, 255, 0.16) 0%, transparent 62%);
  pointer-events: none;
  filter: blur(20px);
}

.hero .frame { position: relative; z-index: 1; }

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(36px, 4.5vw, 72px);
  align-items: center;
}

@media (min-width: 1000px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
  }
}

.hero-copy { display: flex; flex-direction: column; gap: 24px; }

/* ============================================================
   Form
   ============================================================ */

.form-card {
  background: linear-gradient(168deg, var(--surface-2) 0%, var(--surface) 100%);
  border: 1px solid var(--line-strong);
  padding: clamp(24px, 2.4vw, 36px);
}

.form-card__label {
  font-family: var(--display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver);
  margin: 0 0 22px;
}

/* ============================================================
   Step flow. One question per screen.
   ============================================================ */

.fw-head { margin-bottom: 22px; }

.fw-count {
  font-family: var(--display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}

.fw-count b {
  font-weight: 800;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}

.fw-bar {
  height: 2px;
  background: var(--line);
  overflow: hidden;
}

.fw-bar span {
  display: block;
  height: 100%;
  width: 20%;
  background: var(--blue);
  box-shadow: 0 0 12px rgba(0, 80, 255, 0.8);
  transition: width 0.45s var(--ease);
}

/* Fixed floor so the card does not jump height between a short question and
   a two-option choice. Matches the tallest step. */
.fw-steps { min-height: 128px; }

.fw-step { display: none; }

.fw-step.is-active {
  display: block;
  animation: fw-in 0.34s var(--ease);
}

@keyframes fw-in {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: none; }
}

.fw-q {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 16px;
  text-wrap: balance;
}

.fw-step input[type="text"],
.fw-step input[type="tel"],
.fw-step input[type="email"] {
  font-family: var(--body);
  font-size: 16px;   /* below 16px, iOS Safari zooms the page on focus */
  color: var(--white);
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 16px;
  width: 100%;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.fw-step input::placeholder { color: var(--muted-dim); }
.fw-step input:hover { border-color: var(--line-strong); }

.fw-step input:focus {
  outline: none;
  border-color: var(--blue);
  background: #171C24;
  box-shadow: 0 0 0 3px rgba(0, 80, 255, 0.16);
}

.fw-step input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

.fw-step.has-err input {
  border-color: #FF6B5A;
  box-shadow: 0 0 0 3px rgba(255, 107, 90, 0.14);
}

.fw-hint {
  font-size: 12.5px;
  color: var(--muted);
  margin: 9px 0 0;
}

/* ---------- multi-field step (address) ---------- */

.fw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.fw-cell { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.fw-cell--full { grid-column: 1 / -1; }

.fw-cell label {
  font-family: var(--display);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.fw-cell input,
.fw-cell select {
  font-family: var(--body);
  font-size: 16px;   /* below 16px, iOS Safari zooms the page on focus */
  color: var(--white);
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 14px;
  width: 100%;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

/* Native select arrow is a light-mode grey chevron on most platforms and
   disappears against the dark field, so it is drawn here instead. */
.fw-cell select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 36px;
  cursor: pointer;
}

.fw-cell select option { background: var(--surface-2); color: var(--white); }

.fw-cell input:hover,
.fw-cell select:hover { border-color: var(--line-strong); }

.fw-cell input:focus,
.fw-cell select:focus {
  outline: none;
  border-color: var(--blue);
  background-color: #171C24;
  box-shadow: 0 0 0 3px rgba(0, 80, 255, 0.16);
}

.fw-cell input:focus-visible,
.fw-cell select:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

.fw-step.has-err .fw-cell input,
.fw-step.has-err .fw-cell select { border-color: rgba(255, 107, 90, 0.55); }

/* #FF9A8D rather than a saturated red: 7.4:1 on the card, and it reads as a
   correction instead of an alarm. */
.fw-err {
  font-size: 13px;
  color: #FF9A8D;
  margin: 9px 0 0;
  min-height: 1px;
}

.fw-err:empty { display: none; }

/* ---------- choice step ---------- */

.fw-choices { display: flex; flex-direction: column; gap: 10px; }

.fw-choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 17px 18px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.fw-choice:hover { border-color: var(--line-strong); background: #1C2129; }

.fw-choice input {
  width: 19px;
  height: 19px;
  margin: 0;
  accent-color: var(--blue);
  flex-shrink: 0;
  cursor: pointer;
}

.fw-choice span {
  font-family: var(--body);
  font-size: 15.5px;
  line-height: 1.35;
  color: var(--white);
}

.fw-choice:has(input:checked) {
  border-color: var(--blue);
  background: rgba(0, 80, 255, 0.09);
}

.fw-choice:has(input:focus-visible) {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* ---------- nav ---------- */

.fw-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
}

.fw-nav .btn { margin-top: 0; }

.fw-back {
  flex-shrink: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: none;
  /* 44px minimum touch target. At 14px padding this landed on 43px. */
  min-height: 44px;
  padding: 0 8px;
  margin-left: -8px;
  cursor: pointer;
  transition: color 0.2s var(--ease);
}

.fw-back:hover { color: var(--white); }
.fw-back:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.fields { display: flex; flex-direction: column; gap: 16px; }

.field { display: flex; flex-direction: column; gap: 8px; }

.field label {
  font-family: var(--display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--silver);
}

.field input {
  font-family: var(--body);
  font-size: 16px;   /* below 16px, iOS Safari zooms the page on focus */
  color: var(--white);
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 15px 16px;
  width: 100%;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.field input::placeholder { color: var(--muted-dim); }

.field input:hover { border-color: var(--line-strong); }

.field input:focus {
  outline: none;
  border-color: var(--blue);
  background: #171C24;
  box-shadow: 0 0 0 3px rgba(0, 80, 255, 0.16);
}

.field input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  margin-top: 6px;
}

.consent input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--blue);
  flex-shrink: 0;
}

.consent input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.consent label { font-size: 12px; line-height: 1.5; color: var(--muted); }

.consent a { color: var(--silver); }

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 18px 22px;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease),
              transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.btn:focus-visible { outline: 2px solid var(--blue-hot); outline-offset: 3px; }

.btn--primary {
  background: var(--blue);
  color: var(--white);
  margin-top: 24px;
}

.btn--primary:hover {
  background: var(--blue-hot);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px -12px rgba(0, 80, 255, 0.75);
}

.btn--primary:active { transform: translateY(0); }

.btn:disabled { opacity: 0.55; cursor: wait; transform: none; box-shadow: none; }
.btn:disabled:hover { background: var(--blue); transform: none; box-shadow: none; }

.btn--call {
  background: transparent;
  color: var(--white);
  border-color: var(--line-strong);
}

.btn--call:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.045);
  transform: translateY(-1px);
}

.btn--call svg { width: 17px; height: 17px; flex-shrink: 0; }

/* ============================================================
   Call option below the form
   ============================================================ */

.alt { padding-top: 22px; }

.alt__divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.alt__divider::before,
.alt__divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.alt__note {
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
  margin: 14px 0 0;
}

/* ============================================================
   Post-submit states
   ============================================================ */

.success, .failure {
  display: none;
  background: var(--surface-2);
  padding: clamp(26px, 2.8vw, 38px);
}

.success { border: 1px solid var(--blue); }

/* Same visual weight as success on purpose. The job is to route them to
   the phone, not to alarm them. */
.failure { border: 1px solid var(--line-strong); border-left: 3px solid var(--blue); }

.success.is-visible, .failure.is-visible { display: block; }
.form-card.is-hidden, .alt.is-hidden { display: none; }

.success p, .failure p {
  color: var(--silver);
  margin: 0;
  font-size: 15.5px;
  max-width: 42ch;
}

.failure p { margin-bottom: 22px; }
.failure .btn { margin-top: 0; }

/* ============================================================
   Footer
   ============================================================ */

.footer { border-top: 1px solid var(--line); background: var(--surface); }

.footer .frame { padding-block: 26px 28px; }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.footer-links a {
  font-family: var(--display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--silver);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.footer-links a:hover { color: var(--white); border-bottom-color: var(--blue); }
.footer-links a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.footer-legal {
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--muted);
  margin: 16px 0 0;
  max-width: 66ch;
}

/* ============================================================
   Legal pages
   ============================================================ */

/* padding-block only. A `padding` shorthand would override .frame's
   horizontal padding and push copy flush to the viewport edge. */
.legal {
  padding-block: clamp(44px, 6vw, 76px) clamp(40px, 5vw, 60px);
  max-width: 760px;
}

.legal h1 { font-size: clamp(34px, 5vw, 50px); margin-bottom: 12px; }

.legal .updated {
  font-family: var(--display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue-text);
  margin: 0 0 36px;
}

.legal h2 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 38px 0 12px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.legal h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }

.legal p, .legal li { color: var(--silver); font-size: 15.5px; line-height: 1.7; }
.legal p { margin: 0 0 15px; max-width: 68ch; }
.legal ul { margin: 0 0 15px; padding-left: 20px; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--blue-text); }

.legal .placeholder {
  background: var(--surface-2);
  border-left: 3px solid var(--blue);
  padding: 16px 18px;
  margin: 0 0 22px;
  font-size: 13.5px;
  color: var(--silver);
}

.legal .placeholder strong {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--blue-text);
  display: block;
  margin-bottom: 6px;
}

.back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 32px;
  transition: color 0.2s var(--ease);
}

.back:hover { color: var(--white); }
.back:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* The legal pages are the only scrolling documents here, so they need the
   footer pinned rather than floating under short content. */
.legal-page .footer { margin-top: auto; }

/* ============================================================
   Motion. Load-in only. Nothing scrolls, so nothing scroll-triggers.
   ============================================================ */

.rise {
  opacity: 0;
  transform: translateY(16px);
  animation: rise 0.75s var(--ease) forwards;
  animation-delay: var(--d, 0s);
}

@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    /* Without this, an infinite animation restarts every 0.01ms and becomes a
       strobe. The promo banner loops, so the iteration cap is required here. */
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .rise { opacity: 1; transform: none; }
  .promo__sweep { display: none; }
  .promo__live::after { animation: none !important; opacity: 0; }
  .promo__clock .seg b.is-tick { animation: none !important; }
}

/* ============================================================
   Utilities
   ============================================================ */

/* Off-screen but readable by assistive tech. The countdown digits are
   aria-hidden; this carries the actual expiry date instead. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}