/* ===========================================================================
   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;
  background: var(--ee-gold);
  color: #000;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-align: center;
  padding: calc(7px + env(safe-area-inset-top)) 12px 7px;
}

.topbar:empty {
  display: none;
}

.topbar.is-preview {
  background: #b3341f;
  color: #fff;
}

/* 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;
}

.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;
  }
}