/* ===========================================================================
   ee-free-site-funnel — theme
   Inherited from the estimateelite.info look (the $100K in 100 Days funnel).
   Tokens + background layers come from ~/ee-gift-funnel-archive/theme.css;
   everything below "components" is new and specific to this funnel.

   No third-party origins: fonts are self-hosted, the grain is an inline data URI.
   =========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */

@font-face {
  font-family: "Bebas Neue";
  src: url("fonts/bebas-neue-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/plus-jakarta-sans-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/* --- Tokens --------------------------------------------------------------- */

:root {
  --ee-black: #000000;
  --ee-card: #0a0a0a;
  --ee-border: #1f2937;
  --ee-white: #ffffff;

  --ee-gold: #d8a440;
  --ee-gold-light: #f4d03f;
  --ee-gold-dark: #b0822d;
  --ee-glow: #151208;

  --ee-dim: rgba(255, 255, 255, 0.68);
  --ee-faint: rgba(255, 255, 255, 0.42);
  --ee-hairline: rgba(255, 255, 255, 0.08);

  --ee-font-display: "Bebas Neue", Impact, Haettenschweiler, sans-serif;
  --ee-font-sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;

  --ee-shell: 660px;
}

/* --- Reset ---------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  background-color: var(--ee-black);
  color: var(--ee-white);
  margin: 0;
  font-family: var(--ee-font-sans);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

/* Base link. Set here rather than per-component: the first version styled only the
   fine print, so a link in a body paragraph rendered in default browser blue on a
   black-and-gold page. */
a {
  color: var(--ee-gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--ee-gold-light);
}

/* --- Background layers ----------------------------------------------------
   This is what makes the theme read expensive. Do not drop a layer.
   -------------------------------------------------------------------------- */

.sunlight-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
  background: radial-gradient(circle at 50% -10%, var(--ee-glow) 0%, var(--ee-black) 70%);
}

.sunlight-beam {
  position: absolute;
  top: -20%;
  width: 180%;
  height: 140%;
  opacity: 0.08;
  background: repeating-linear-gradient(
    70deg,
    transparent 0%,
    transparent 8%,
    var(--ee-gold-light) 12%,
    transparent 16%,
    transparent 35%,
    var(--ee-gold) 40%,
    transparent 45%
  );
  filter: blur(100px);
  transform-origin: top center;
  animation: beamMove 25s ease-in-out infinite alternate;
}

@keyframes beamMove {
  from {
    transform: translateX(-15%) rotate(-2deg);
  }
  to {
    transform: translateX(10%) rotate(2deg);
  }
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.80' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.15;
  pointer-events: none;
  z-index: 50;
  mix-blend-mode: overlay;
}

/* --- Gold treatments ------------------------------------------------------ */

.gold-gradient {
  background: linear-gradient(135deg, var(--ee-gold) 0%, var(--ee-gold-light) 50%, var(--ee-gold) 100%);
}

.gold-text-gradient {
  background: linear-gradient(135deg, var(--ee-gold-light) 0%, var(--ee-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ===========================================================================
   Components
   =========================================================================== */

/* ---------------------------------------------------------------------------
   MOBILE FIRST, AND NOT AS A SLOGAN.

   ~90% of this funnel's traffic is phones, and every pixel above the first form
   field is paid for. The base spacing here is the PHONE scale, measured against a
   375x667 iPhone SE (the smallest screen still in real use) so the first input
   lands on the fold. Desktop gets its air back in the min-width query at the
   bottom of this file, not the other way round.

   Measured budget to the first input on a 390px phone: ~549px.
   --------------------------------------------------------------------------- */

.shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--ee-shell);
  margin: 0 auto;
  /* Side insets keep copy off the rounded corners / notch in landscape. */
  padding: 20px calc(20px + env(safe-area-inset-left)) calc(56px + env(safe-area-inset-bottom))
    calc(20px + env(safe-area-inset-right));
}

/* --- Brand ---------------------------------------------------------------- */

/* `.shell` prefix on purpose: on the long-form pages the wordmark is a <p> inside
   .prose, and `.prose p` would otherwise out-specify a bare `.brand` and grey it out. */
.shell .brand {
  font-family: var(--ee-font-display);
  font-size: 22px;
  letter-spacing: 0.12em;
  color: var(--ee-white);
  text-align: center;
  margin: 0 0 18px;
  opacity: 0.85;
}

.shell .brand span {
  color: var(--ee-gold);
}

/* --- Top bar --------------------------------------------------------------
   Pinned, so it is on screen at the exact moment he decides whether to type a
   real number. Carries the capacity cap — REAL scarcity, not theatre. z-index
   sits above the grain overlay (50).

   In preview mode the same bar turns red and says nothing is saved, rather than
   stacking a second bar. One strip, two states, impossible to miss.
   -------------------------------------------------------------------------- */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  /* Red, white, loud. This is the only element on the page allowed to shout. */
  background: #C21A0F;
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-align: center;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  overflow: hidden;
  transition: padding 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
}

.topbar:empty {
  display: none;
}

/* Condenses and lifts once the page moves, so it reads as pinned rather than parked. */
.topbar.is-stuck {
  background: #A81409;
  padding-top: calc(6px + env(safe-area-inset-top));
  padding-bottom: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.32);
}

.topbar .tb-sep {
  opacity: 0.5;
  font-weight: 700;
}

/* The deadline is the half with a clock on it, so it is the half that breathes. */
.topbar .tb-deadline {
  animation: tb-pulse 2.6s ease-in-out infinite;
}

@keyframes tb-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.58; }
}

/* Fills across the bar as the page is read. Scarcity tied to progress, not to a fake timer. */
.topbar .tb-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: #fff;
  opacity: 0.85;
  transition: width 0.1s linear;
}

@media (prefers-reduced-motion: reduce) {
  .topbar,
  .topbar .tb-progress { transition: none; }
  .topbar .tb-deadline { animation: none; }
}

/* PREVIEW MODE MUST NEVER LOOK LIKE THE LIVE BAR. It used to be red, which the live
   scarcity bar now is. Black on yellow instead: unmistakable, and impossible to mistake
   for a real funnel at a glance. */
.topbar.is-preview {
  background: #111;
  color: #FFD400;
  animation: none;
  box-shadow: none;
}

/* Clear the pinned bar. Applies only when it actually has content. */
body:has(.topbar:not(:empty)) .shell {
  padding-top: 62px;
}

/* --- Eyebrow -------------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ee-gold);
  background: rgba(216, 164, 64, 0.09);
  border: 1px solid rgba(216, 164, 64, 0.45);
  border-radius: 999px;
  padding: 8px 16px;
  margin-bottom: 12px;
}

.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ee-gold);
  animation: pulse 2.2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* --- Entrance motion ------------------------------------------------------
   Staggered rise via a per-element --d delay. Short and small on purpose: this
   should read as the page settling, not as an animation someone is waiting out.
   Everything is visible with no JS and with motion disabled.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .rise {
    animation: rise 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--d, 0ms);
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --- Headline split test --------------------------------------------------
   Both variants ship in the markup and the winner is chosen by a class stamped on
   <html> before the hero paints. Hidden with display:none so the losing variant is
   out of the tab order and invisible to a screen reader, not merely transparent.
   -------------------------------------------------------------------------- */

.var {
  display: none;
}

html.v-a .var-a,
html.v-b .var-b {
  display: block;
}

/* No JS at all: show A rather than a page with no headline. */
html:not(.v-a):not(.v-b) .var-a {
  display: block;
}

/* --- Hero ----------------------------------------------------------------- */

.hero {
  text-align: center;
}

/* Collier's "enter the conversation already taking place in his head". Sits above
   the headline and does the work of naming the moment before the offer arrives. */
.prehead {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ee-dim);
  margin: 0 0 10px;
}

h1 {
  font-family: var(--ee-font-display);
  font-weight: 400;
  font-size: clamp(2.75rem, 10.6vw, 4.6rem);
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

h1 .line {
  display: block;
}

.lede {
  font-size: clamp(1rem, 4vw, 1.15rem);
  color: var(--ee-dim);
  margin: 0 auto 14px;
  max-width: 30em;
}

.lede strong {
  color: var(--ee-white);
  font-weight: 600;
}

/* The deal. Line one is the "effort and sacrifice" lever from the board — name the
   one thing required, or a giveaway reads as a trick. Line two is the risk reversal,
   which is the hardest part of this offer to copy. Kept as one bordered block: two
   separate elements cost two sets of margins in the most expensive space on the page. */
.deal {
  border-top: 1px solid rgba(216, 164, 64, 0.22);
  border-bottom: 1px solid rgba(216, 164, 64, 0.22);
  padding: 10px 8px 11px;
  margin: 0 0 16px;
}

.deal p {
  margin: 0;
}

.deal-cost {
  font-size: clamp(1rem, 4.2vw, 1.15rem);
  font-weight: 700;
  color: var(--ee-white);
  line-height: 1.35;
}

.deal-stake {
  margin-top: 4px !important;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ee-gold);
  line-height: 1.4;
}

/* --- The stack (what gets built) ------------------------------------------ */

/* --- Reason why -----------------------------------------------------------
   Set as editorial, not as another card: it should read like the founder wrote
   it rather than like a feature panel. The gold rule replaces a heading rule.
   -------------------------------------------------------------------------- */

.why {
  margin-top: 38px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* On the confirm page the block follows the hero directly, and the deal above it
   already closes with a rule — two rules with a dead band between them read as a
   layout bug. On the landing page it follows the form card, where the rule is the
   only thing separating them, so it stays. */
.hero + .why {
  margin-top: 26px;
  padding-top: 0;
  border-top: 0;
}

.why-title {
  font-family: var(--ee-font-display);
  font-size: 25px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.why p {
  color: var(--ee-dim);
  font-size: 14.5px;
  margin: 0 0 12px;
}

.why-villain {
  border-left: 2px solid var(--ee-gold);
  padding-left: 14px;
  margin-top: 18px !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Numbered reasons on the confirm page. */
.reasons {
  list-style: none;
  counter-reset: reason;
  margin: 0;
  padding: 0;
}

.reasons li {
  counter-increment: reason;
  position: relative;
  padding: 0 0 20px 42px;
  color: var(--ee-dim);
  font-size: 14.5px;
}

.reasons li:last-child {
  padding-bottom: 0;
}

.reasons li::before {
  content: counter(reason);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(216, 164, 64, 0.4);
  color: var(--ee-gold);
  font-family: var(--ee-font-display);
  font-size: 15px;
  padding-top: 2px;
}

/* The one sentence on this page that must not be skimmed. */
.reasons strong.hard {
  display: inline;
  color: var(--ee-gold-light);
  font-size: inherit;
}

.reasons strong {
  display: block;
  color: var(--ee-white);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 2px;
}

/* The YES he is being asked to send, treated as a thing rather than a word. */
.yes {
  color: var(--ee-gold-light);
  font-weight: 800;
}

.fix-link {
  display: inline-block;
  font-size: 13px;
  white-space: nowrap;
}

.proof {
  margin-top: 34px;
}

.proof-title {
  font-family: var(--ee-font-display);
  font-size: 24px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 20px;
}

/* Numbered, connected by a hairline so it reads as a sequence rather than a
   list of features. Same device as the confirm page, on purpose. */
.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 20px 46px;
  color: var(--ee-dim);
  font-size: 14.5px;
}

.steps li:last-child {
  padding-bottom: 0;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -1px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(216, 164, 64, 0.4);
  color: var(--ee-gold);
  font-family: var(--ee-font-display);
  font-size: 16px;
  padding-top: 2px;
}

.steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 32px;
  bottom: 8px;
  width: 1px;
  background: rgba(216, 164, 64, 0.2);
}

.steps strong {
  display: block;
  color: var(--ee-white);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 2px;
}

.stack {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.stack li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ee-hairline);
  border-radius: 999px;
  padding: 7px 13px 7px 10px;
}

/* Gold check: the gradient is the paint, the tick path is the mask. */
.stack li::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  background: linear-gradient(135deg, var(--ee-gold) 0%, var(--ee-gold-light) 100%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* --- The stake ------------------------------------------------------------ */

/* Still used on the confirm page. */
.stake {
  border-top: 1px solid rgba(216, 164, 64, 0.22);
  border-bottom: 1px solid rgba(216, 164, 64, 0.22);
  padding: 13px 12px;
  margin: 0 0 20px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ee-gold);
  text-align: center;
}

/* --- Form card ------------------------------------------------------------ */

.card {
  position: relative;
  overflow: hidden;
  background: rgba(10, 10, 10, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(216, 164, 64, 0.2);
  border-radius: 16px;
  padding: 22px 20px 22px;
  text-align: left;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

/* A lit top edge, brightest in the middle. Marks the card as the thing to do
   rather than one more section. */
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ee-gold-light), transparent);
}

/* The card heading and the "four questions" line are both gone: the card was the
   most crowded thing on the page and none of that text told him anything he could
   not see. One line, saying what happens when he fills it in. */
.card-lead {
  font-size: 15px;
  font-weight: 600;
  color: var(--ee-white);
  margin: 0 0 14px;
}

/* Progress rail */
.rail {
  height: 2px;
  background: rgba(255, 255, 255, 0.09);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 16px;
}

.rail-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--ee-gold-dark), var(--ee-gold-light));
  transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Fields ---------------------------------------------------------------
   Fields reveal one at a time. A hidden field is display:none so it is out of
   the tab order and invisible to screen readers, not just visually gone.
   -------------------------------------------------------------------------- */

.field {
  display: none;
  margin-bottom: 14px;
}

.field.is-visible {
  display: block;
  animation: fieldIn 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes fieldIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.field label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ee-faint);
  margin-bottom: 7px;
}

.field input {
  width: 100%;
  font-family: inherit;
  font-size: 16px; /* 16px minimum or iOS zooms the viewport on focus */
  font-weight: 500;
  color: var(--ee-white);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 14px 15px;
  transition: border-color 160ms ease, background 160ms ease;
}

.field input::placeholder {
  color: rgba(255, 255, 255, 0.28);
}

.field input:focus {
  outline: none;
  border-color: rgba(216, 164, 64, 0.7);
  background: rgba(255, 255, 255, 0.06);
}

.field.has-error input {
  border-color: rgba(239, 108, 108, 0.75);
}

.field-error {
  display: none;
  font-size: 12.5px;
  color: #ef8c8c;
  margin-top: 7px;
}

.field.has-error .field-error {
  display: block;
}

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: block;
  width: 100%;
  font-family: var(--ee-font-display);
  font-size: 21px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #000;
  background: linear-gradient(135deg, var(--ee-gold) 0%, var(--ee-gold-light) 50%, var(--ee-gold) 100%);
  border: none;
  border-radius: 10px;
  padding: 15px 18px 13px;
  margin-top: 18px;
  cursor: pointer;
  transition: transform 140ms ease, filter 140ms ease;
  /* The text-first thanks page renders this on an <a>, where the browser's link styles
     would otherwise win: underline it, centre it, and keep the gold. */
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}

/* `display: block` above would beat the hidden attribute; the form hides Continue until
   the last field is on screen. */
.btn[hidden] {
  display: none;
}

.btn:hover:not(:disabled) {
  filter: brightness(1.08);
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid var(--ee-gold-light);
  outline-offset: 2px;
}

/* --- Fine print ----------------------------------------------------------- */

/* Centred: it reads as a closing note under the button rather than a ragged
   left-aligned block hanging off the form. */
.consent {
  font-size: 11.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.36);
  margin: 14px 0 0;
  text-align: center;
}

/* The one link in the fine print gets to be legible. */
.consent a {
  display: inline-block;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.62);
}

/* Fine print links stay muted so they never compete with the CTA. */
.consent a,
.footer a {
  color: rgba(255, 255, 255, 0.62);
}

.form-error {
  display: none;
  font-size: 13.5px;
  color: #ef8c8c;
  background: rgba(239, 108, 108, 0.08);
  border: 1px solid rgba(239, 108, 108, 0.3);
  border-radius: 9px;
  padding: 11px 13px;
  margin-top: 14px;
}

.form-error.is-visible {
  display: block;
}

.footer {
  text-align: center;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 40px;
  line-height: 1.7;
}

/* ===========================================================================
   Confirmation page
   =========================================================================== */

.seal {
  width: 62px;
  height: 62px;
  margin: 0 auto 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--ee-gold) 0%, var(--ee-gold-light) 100%);
  color: #000;
  font-family: var(--ee-font-display);
  font-size: 30px;
  line-height: 1;
  padding-top: 4px;
}

.next-steps {
  list-style: none;
  counter-reset: step;
  margin: 26px 0 0;
  padding: 0;
  text-align: left;
}

.next-steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 20px 46px;
  color: var(--ee-dim);
  font-size: 15px;
}

.next-steps li:last-child {
  padding-bottom: 0;
}

.next-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -1px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(216, 164, 64, 0.4);
  color: var(--ee-gold);
  font-family: var(--ee-font-display);
  font-size: 16px;
  padding-top: 2px;
}

/* the connector line between steps */
.next-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 32px;
  bottom: 8px;
  width: 1px;
  background: rgba(216, 164, 64, 0.2);
}

.next-steps strong {
  display: block;
  color: var(--ee-white);
  font-weight: 700;
  font-size: 15.5px;
  margin-bottom: 2px;
}

/* ===========================================================================
   Long-form pages (terms, privacy)
   =========================================================================== */

.prose {
  max-width: 100%;
  text-align: left;
}

.prose h2 {
  font-family: var(--ee-font-display);
  font-size: 25px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 36px 0 10px;
}

.prose h1 {
  font-size: clamp(2.1rem, 8vw, 3rem);
  text-align: left;
  margin-bottom: 8px;
}

.prose p,
.prose li {
  color: var(--ee-dim);
  font-size: 15px;
}

.prose ul {
  padding-left: 20px;
}

.prose li {
  margin-bottom: 8px;
}

.prose .updated {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ee-faint);
  margin-bottom: 30px;
}

.callout {
  border-left: 2px solid var(--ee-gold);
  background: rgba(216, 164, 64, 0.06);
  padding: 14px 16px;
  border-radius: 0 10px 10px 0;
  margin: 18px 0;
}

.callout p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
}

/* ===========================================================================
   Desktop. The base scale above is tuned for a phone fold; this gives the air
   back on screens that have it to spare. Nothing here affects mobile.
   =========================================================================== */

@media (min-width: 700px) {
  .shell {
    padding-top: 48px;
    padding-bottom: 88px;
  }

  .shell .brand {
    margin-bottom: 34px;
  }

  .eyebrow {
    padding: 7px 15px;
    margin-bottom: 22px;
  }

  h1 {
    margin-bottom: 20px;
  }

  .lede {
    margin-bottom: 26px;
  }

  .card {
    padding: 30px 28px 28px;
  }

  .card-sub {
    margin-bottom: 20px;
  }

  .rail {
    margin-bottom: 22px;
  }

  .proof,
  .why {
    margin-top: 46px;
  }

  .prehead {
    font-size: 15px;
    margin-bottom: 12px;
  }
}

/* --- Motion safety -------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .sunlight-beam,
  .eyebrow::before {
    animation: none;
  }
  .field.is-visible {
    animation: none;
  }
  .rail-fill {
    transition: none;
  }
}

/* --- Trade gate ------------------------------------------------------------
   One question, asked before anything is typed. The restriction is stated as a
   fact about us ("remodelers only") rather than as a test of him, so that "No"
   costs him no pride — a gate that makes No feel like losing just teaches people
   to lie, and then you have friction with no filter.

   Both answers are the SAME gold. The first pass styled No as a dark ghost button,
   which on this near-black card was effectively invisible — and an invisible No is
   not a neutral default, it is a thumb on the scale that buys us the exact junk
   leads this gate exists to stop. Equal weight is the honest presentation.
   -------------------------------------------------------------------------- */

.gate,
.decline {
  text-align: center;
}

.gate-eyebrow {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ee-gold);
}

.gate-q {
  margin: 0 auto 24px;
  max-width: 22ch;
  font-size: clamp(1.25rem, 4.2vw, 1.7rem);
  line-height: 1.22;
  text-wrap: balance;
}

.gate-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Side by side once there is room. Equal widths, because equal weight is the point. */
@media (min-width: 560px) {
  .gate-actions { flex-direction: row; }
  .gate-actions .btn { flex: 1 1 0; margin-top: 0; }
}

/* Confirmation the tap landed. The screen changes immediately after, so without this
   there is no moment where the button acknowledges being pressed at all. */
.gate-actions .btn.is-chosen {
  background: #fff;
  color: #000;
  filter: none;
  transform: translateY(1px);
}

.decline .gate-q {
  margin-bottom: 12px;
}

.decline-body {
  margin: 0 auto;
  max-width: 46ch;
  opacity: 0.78;
}

/* --- The money question ---------------------------------------------------
   Lives on its own gate card between the trade question and the form. Borrows the text
   inputs' language — same radius, same hairline border, same gold — so the three screens
   read as one flow rather than as three different products. Six options is too many for
   the gate's two-button row, so they wrap two-up instead.
   ------------------------------------------------------------------------- */

.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  /* Left aligned inside a centred card: .gate-q is centred prose, these are options to
     scan down. Centring them too would make the column edges ragged. */
  text-align: left;
}

.choice {
  flex: 1 1 calc(50% - 4px);
  font-family: inherit;
  /* 16px for the same reason the inputs use it: anything smaller and iOS zooms. */
  font-size: 16px;
  font-weight: 600;
  color: var(--ee-dim);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  /* 48px min: a mis-tap here picks the wrong band and silently changes whether this lead
     is ever reported as a conversion, so the target is sized for a thumb, not for text. */
  min-height: 48px;
  padding: 13px 12px;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

/* The last row is a single item on a two-up grid. Let it fill rather than sit as a
   half-width orphan next to dead space. */
.choice:last-child:nth-child(odd) {
  flex-basis: 100%;
}

.choice:hover {
  border-color: rgba(216, 164, 64, 0.45);
  color: var(--ee-white);
}

.choice.is-selected {
  color: #000;
  background: linear-gradient(135deg, var(--ee-gold) 0%, var(--ee-gold-light) 50%, var(--ee-gold) 100%);
  border-color: var(--ee-gold);
}

/* The next screen replaces this one 140ms later, so without this the tap is never
   acknowledged at all. Mirrors `.gate-actions .btn.is-chosen`. */
.choice.is-chosen {
  background: #fff;
  color: #000;
  border-color: #fff;
  filter: none;
  transform: translateY(1px);
}

.choice:focus-visible {
  outline: 2px solid var(--ee-gold-light);
  outline-offset: 2px;
}

.field.has-error .choice {
  border-color: rgba(239, 108, 108, 0.75);
}

@media (prefers-reduced-motion: reduce) {
  .choice { transition: none; }
}

/* ===========================================================================
   The calculator page (app.html)

   Everything below is additive and namespaced to `.calc-*` / `.ee-range`, so
   index.html and thanks.html render byte for byte as they did before it existed.
   The slider is ported from estimateelite.com's globals.css so the control feels
   identical on both properties, with that file's oklch accent swapped for this
   theme's gold and its track colours expressed in rgba for older Safari.
   =========================================================================== */

/* --- The headline ---------------------------------------------------------
   A full sentence, not three stacked words, so it needs a smaller step than the
   base h1 or it eats the fold on a 390px phone. Line height opens up a touch for
   the same reason: Bebas at 0.92 is unreadable once a line wraps three times.
   -------------------------------------------------------------------------- */

.calc-h1 {
  font-size: clamp(2rem, 7.4vw, 3.15rem);
  line-height: 1.02;
  margin-bottom: 14px;
}

/* --- The range slider -----------------------------------------------------
   44px tall because that is the thumb target, not because the track is. The
   filled portion is painted by a gradient stop driven from JS through
   --ee-range-pct, which is the only way to colour a webkit track's progress.
   -------------------------------------------------------------------------- */

.ee-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  background: transparent;
  cursor: pointer;
  display: block;
  margin: 0;
}

.ee-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--ee-gold) var(--ee-range-pct, 0%),
    rgba(255, 255, 255, 0.12) var(--ee-range-pct, 0%)
  );
}

.ee-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -10px;
  border-radius: 999px;
  background: var(--ee-gold);
  border: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  transition: transform 120ms ease-out;
}

.ee-range:active::-webkit-slider-thumb {
  transform: scale(1.08);
}

.ee-range::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.ee-range::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--ee-gold);
}

.ee-range::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--ee-gold);
  border: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.ee-range:focus-visible {
  outline: 2px solid var(--ee-gold-light);
  outline-offset: 4px;
  border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
  .ee-range::-webkit-slider-thumb { transition: none; }
}

/* --- The calculator card -------------------------------------------------- */

.calc-title {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--ee-white);
  margin: 0 0 20px;
}

.calc-rows {
  display: grid;
  gap: 18px;
}

.calc-row-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.calc-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--ee-white);
  line-height: 1.25;
}

/* Tabular figures so the number does not jitter sideways while a slider moves. */
.calc-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--ee-gold-light);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.calc-help {
  font-size: 13px;
  line-height: 1.35;
  color: var(--ee-faint);
  margin: 4px 0 2px;
}

.calc-note {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ee-faint);
  margin: 16px 0 0;
}

/* --- The result ----------------------------------------------------------- */

.calc-result {
  margin-top: 18px;
  padding: 16px 14px;
  border: 1px solid var(--ee-hairline);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  text-align: center;
}

.calc-result[hidden],
.calc-zero[hidden] {
  display: none;
}

.calc-result-lead {
  font-size: 14px;
  line-height: 1.35;
  color: var(--ee-dim);
  margin: 0;
}

.calc-tiles {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.calc-tile {
  border: 1px solid rgba(216, 164, 64, 0.3);
  border-radius: 12px;
  background: rgba(216, 164, 64, 0.08);
  padding: 14px 16px;
}

.calc-tile-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ee-gold-light);
}

.calc-tile-figure {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ee-white);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}

.calc-tile-unit {
  font-size: 13.5px;
  color: var(--ee-dim);
  margin-top: 6px;
}

.calc-foot {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ee-faint);
  margin: 12px auto 0;
  max-width: 44ch;
}

/* The honest answer when nothing is wasted. Centred and alone, because there is
   nothing else to say on that screen. */
.calc-zero {
  margin: 18px 0 0;
  text-align: center;
  font-size: 15px;
  color: var(--ee-dim);
}

/* Both cards are on screen at once here, unlike index.html where the gate and the
   form never are. Scoped to `.calc-card +` so index.html's own card sequence is
   untouched. */
.calc-card + .card {
  margin-top: 18px;
}

/* --- The note under the phone field --------------------------------------- */

.field-note {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ee-faint);
  margin: 8px 0 0;
}

/* The CTA flashes white for 140ms so the tap is acknowledged before the form
   card replaces the view. Mirrors `.gate-actions .btn.is-chosen`. */
.btn.is-chosen {
  background: #fff;
  color: #000;
  filter: none;
  transform: translateY(1px);
}

@media (min-width: 480px) {
  .calc-tiles {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 700px) {
  .calc-title {
    font-size: 1.45rem;
  }
  .calc-result {
    padding: 20px 18px;
  }
  .calc-tile-figure {
    font-size: 2.5rem;
  }
}