/* ==========================================================================
   Entrepreneur Options - entrepreneuroptions.com
   Self-contained. Fonts are self-hosted; no frameworks, no CDN requests.

   Type pairing: Instrument Serif for display (elegant, high contrast, editorial)
   against Inter for UI and body copy. Instrument Serif ships a single weight, so
   display sizes carry presence through scale and tight leading rather than bold.
   ========================================================================== */

@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/fonts/instrument-serif.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/fonts/instrument-serif-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter.woff2") format("woff2");
  font-weight: 400 700;   /* variable weight axis */
  font-style: normal;
  font-display: swap;
}

:root {
  /* surface ramp, darkest to lightest */
  --bg:        #080d14;
  --bg-2:      #0b121b;
  --surface:   #101a26;
  --surface-2: #16222f;
  --surface-3: #1d2b3a;

  /* ink ramp */
  --ink:   #f4f8fc;
  --body:  #a3b6ca;
  --muted: #6d8299;

  --line:       rgba(255, 255, 255, 0.085);
  --line-bright: rgba(255, 255, 255, 0.17);

  /* brand */
  --gold:    #d4972f;
  --gold-2:  #f2bd5e;
  --gold-dim: rgba(212, 151, 47, 0.14);
  --gold-glow: rgba(212, 151, 47, 0.34);

  --ok:  #43c98a;
  --err: #ff7a70;

  --grad-gold: linear-gradient(135deg, #f2bd5e 0%, #d4972f 55%, #b87d1d 100%);

  --maxw: 1180px;
  --r: 14px;
  --r-lg: 22px;

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

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
}

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

html {
  scroll-behavior: smooth;
  /* keeps anchored sections clear of the fixed header */
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.68;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* page-wide ambient wash so sections never look like flat bands */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 600px at 12% 0%,   rgba(43, 87, 140, 0.20), transparent 60%),
    radial-gradient(800px 620px at 92% 22%,  rgba(212, 151, 47, 0.09), transparent 62%),
    radial-gradient(900px 700px at 50% 100%, rgba(30, 62, 105, 0.18), transparent 65%);
}
body > * { position: relative; z-index: 1; }

h1, h2, h3, h4 {
  color: var(--ink);
  margin: 0 0 0.55em;
}

/* Display sizes: serif, single weight, tight leading, optical letter-spacing. */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.018em;
}
h1 { font-size: clamp(3rem, 7.2vw, 5.3rem); }
h2 { font-size: clamp(2.15rem, 4.6vw, 3.5rem); }

/* Sub-heads stay in Inter - a serif this delicate gets muddy below ~24px. */
h3, h4 {
  font-family: var(--font);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
}
h3 { font-size: 1.18rem; }

p { margin: 0 0 1.15em; }

a { color: var(--gold-2); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: #ffd487; }

strong { color: var(--ink); font-weight: 700; }

::selection { background: var(--gold); color: #10151b; }

:focus-visible {
  outline: 2px solid var(--gold-2);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 26px; }

.section { padding: clamp(70px, 10vw, 132px) 0; position: relative; }

/* hairline divider between sections */
.section + .section::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(1180px, calc(100% - 52px));
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-bright), transparent);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-2);
  margin-bottom: 20px;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--gold);
}

.lede { font-size: clamp(1.06rem, 1.6vw, 1.22rem); max-width: 60ch; color: var(--body); }

/* Keep measure readable on wide screens. Long lines are the fastest way to make a
   generous layout feel like an unstyled document. */
.section h2 { max-width: 17ch; }
.section p  { max-width: 68ch; }

/* "what happens next" list under the form intro */
.next-list { list-style: none; margin: 36px 0 0; padding: 0; counter-reset: nx; }
.next-list li {
  counter-increment: nx;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 16px;
  align-items: start;
  padding: 15px 0;
  border-top: 1px solid var(--line);
  font-size: 0.96rem;
}
.next-list li::before {
  content: counter(nx);
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--gold-2);
  background: var(--gold-dim);
  border: 1px solid rgba(212,151,47,0.3);
}
.next-list strong { display: block; margin-bottom: 2px; }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay: calc(var(--i, 0) * 85ms);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  transition: background-color .35s var(--ease), backdrop-filter .35s var(--ease), border-color .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: rgba(8, 13, 20, 0.82);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom-color: var(--line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 78px;
  gap: 18px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.42rem;
  letter-spacing: 0.004em;
}
.brand:hover { color: var(--ink); }
.brand:hover .brand-mark { transform: translateX(2px); }

.brand-mark {
  width: 44px; height: 36px;
  flex: none;
  display: block;
  transition: transform .5s var(--ease);
}
.brand-mark .ring { stroke: url(#eoGold); }
.brand-mark .bar  { stroke: url(#eoGold); }

.brand-sub {
  color: var(--muted);
  font-family: var(--font);
  font-weight: 400;
  font-size: 0.83rem;
  letter-spacing: 0.02em;
  align-self: center;
  padding-top: 2px;
}

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

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 100px;
  padding: 15px 30px;
  font: inherit;
  font-weight: 700;
  font-size: 0.97rem;
  letter-spacing: -0.005em;
  cursor: pointer;
  overflow: hidden;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.btn:active { transform: translateY(1px) scale(0.995); }

.btn--primary {
  background: var(--grad-gold);
  color: #0d1219;
  box-shadow: 0 8px 26px rgba(212, 151, 47, 0.26);
}
.btn--primary:hover {
  color: #0d1219;
  transform: translateY(-2px);
  box-shadow: 0 14px 38px rgba(212, 151, 47, 0.4);
}
/* sheen sweep */
.btn--primary::after {
  content: "";
  position: absolute;
  top: 0; left: -140%;
  width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transition: left .65s var(--ease);
}
.btn--primary:hover::after { left: 150%; }

.btn--ghost {
  background: rgba(255,255,255,0.045);
  color: var(--ink);
  border: 1px solid var(--line-bright);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover {
  background: rgba(255,255,255,0.1);
  color: var(--ink);
  transform: translateY(-2px);
  border-color: rgba(212,151,47,0.5);
}

.btn--block { display: flex; width: 100%; padding: 17px; font-size: 1.02rem; }

.btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  padding: clamp(140px, 19vh, 200px) 0 clamp(80px, 11vw, 130px);
  overflow: hidden;
}

/* slow-drifting light behind the headline */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(92px);
  pointer-events: none;
  opacity: 0.75;
}
.hero-orb--gold {
  width: 620px; height: 620px;
  right: -180px; top: -160px;
  background: radial-gradient(circle, rgba(212,151,47,0.5), transparent 68%);
  animation: drift 19s ease-in-out infinite alternate;
}
.hero-orb--blue {
  width: 700px; height: 700px;
  left: -240px; top: 40px;
  background: radial-gradient(circle, rgba(48,102,166,0.44), transparent 68%);
  animation: drift 24s ease-in-out infinite alternate-reverse;
}
@keyframes drift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(38px, 52px, 0) scale(1.13); }
}

/* faint engineering grid, fading out downward */
.hero-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.85), transparent 72%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.85), transparent 72%);
}

.hero .wrap { position: relative; z-index: 2; }

.hero h1 { max-width: 14ch; margin-bottom: 0.4em; }
/* The italic is the whole point of this typeface - let it carry the emphasis. */
.hero h1 em {
  font-style: italic;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-copy { font-size: clamp(1.08rem, 1.75vw, 1.28rem); max-width: 56ch; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px 7px 11px;
  border: 1px solid var(--line-bright);
  border-radius: 100px;
  background: rgba(255,255,255,0.04);
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--body);
  margin-bottom: 30px;
}
.pill .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold-2);
  box-shadow: 0 0 0 4px rgba(212,151,47,0.16);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(212,151,47,0.14); }
  50%      { box-shadow: 0 0 0 8px rgba(212,151,47,0.02); }
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-top: clamp(56px, 8vw, 88px);
}
.stat {
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.014));
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.stat:hover { border-color: rgba(212,151,47,0.42); transform: translateY(-3px); }
.stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.8vw, 2.9rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 9px;
}
.stat span { font-size: 0.9rem; color: var(--muted); line-height: 1.45; display: block; }

/* ==========================================================================
   Sector ticker
   ========================================================================== */

.marquee {
  position: relative;
  overflow: hidden;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.018);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 46s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 30px;
  padding-right: 30px;
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  white-space: nowrap;
  transition: color .25s var(--ease);
}
.marquee-item::after {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.55;
}
.marquee:hover .marquee-item { color: var(--body); }

@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ==========================================================================
   Cards
   ========================================================================== */

.grid { display: grid; gap: 22px; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }

.card {
  position: relative;
  padding: 32px 30px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
  overflow: hidden;
  transition: transform .38s var(--ease), border-color .38s var(--ease), box-shadow .38s var(--ease);
}
/* light that follows the cursor */
.card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .38s var(--ease);
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(212,151,47,0.16), transparent 42%);
  pointer-events: none;
}
.card:hover {
  transform: translateY(-5px);
  border-color: rgba(212,151,47,0.36);
  box-shadow: 0 22px 48px rgba(0,0,0,0.42);
}
.card:hover::before { opacity: 1; }
.card h3 { margin-bottom: 11px; }
.card p:last-child { margin-bottom: 0; }
.card-num {
  display: block;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin-bottom: 16px;
}

/* ==========================================================================
   Process timeline
   ========================================================================== */

/* --dot-size is the single source of truth for the rail's x-position: the rail must run
   through the centre of the numbered dots, and .step's first grid column is exactly one
   dot wide. Keep the 4px indent as a MARGIN, not padding - an absolutely positioned
   pseudo-element offsets from the padding box, so padding here would shift the dots
   without shifting the rail and put the line 4px left of the dots (it did, until
   2026-08-04). Margin moves the box and the rail together. */
.steps { position: relative; margin-top: 54px; margin-left: 4px; --dot-size: 56px; }

/* the rail, and the gold portion that fills as you scroll */
.steps::before,
.steps::after {
  content: "";
  position: absolute;
  left: calc(var(--dot-size) / 2 - 1px);   /* -1px = half the 2px rail width */
  top: 12px;
  bottom: 12px;
  width: 2px;
  border-radius: 2px;
  /* Must stay below .step. Each .step carries will-change:transform from the reveal,
     which creates a stacking context and traps .step-dot's z-index inside it - so
     without these explicit layers the rail (last child) paints over the dots. */
  z-index: 0;
}
.steps::before { background: var(--line-bright); }
.steps::after {
  background: var(--grad-gold);
  transform-origin: top;
  transform: scaleY(var(--progress, 0));
  transition: transform .18s linear;
  box-shadow: 0 0 16px var(--gold-glow);
}

.step {
  position: relative;
  z-index: 1;              /* above the rail - see the note on .steps::before */
  display: grid;
  grid-template-columns: var(--dot-size) 1fr;
  gap: 24px;
  padding: 0 0 34px 0;
  align-items: start;
}
.step:last-child { padding-bottom: 0; }

.step-dot {
  position: relative;
  z-index: 2;
  width: var(--dot-size); height: var(--dot-size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line-bright);
  transition: color .45s var(--ease), background .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.step.is-active .step-dot {
  background: var(--grad-gold);
  border-color: transparent;
  color: #0d1219;
  box-shadow: 0 0 0 6px rgba(212,151,47,0.13), 0 8px 24px rgba(212,151,47,0.3);
}

.step-body { padding-top: 9px; }
.step-body h3 { margin-bottom: 7px; }
.step-body p { margin-bottom: 0; font-size: 0.99rem; }

.step-meta {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 12px;
  border-radius: 100px;
  background: var(--gold-dim);
  border: 1px solid rgba(212,151,47,0.26);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold-2);
}

/* ==========================================================================
   Feature callout
   ========================================================================== */

.callout {
  position: relative;
  border-radius: var(--r-lg);
  padding: clamp(38px, 5.5vw, 66px);
  overflow: hidden;
  border: 1px solid rgba(212,151,47,0.24);
  background:
    radial-gradient(760px 300px at 88% 0%, rgba(212,151,47,0.16), transparent 62%),
    linear-gradient(150deg, var(--surface-2), var(--bg-2));
}
.callout h2 { max-width: 18ch; }
.callout p { max-width: 66ch; }
.callout p:last-of-type { margin-bottom: 0; }
.callout .fineprint {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
  color: var(--muted);
}

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

.form-shell {
  position: relative;
  border-radius: var(--r-lg);
  padding: 38px;
  background: linear-gradient(180deg, rgba(255,255,255,0.062), rgba(255,255,255,0.018));
  border: 1px solid var(--line-bright);
  box-shadow: 0 30px 70px rgba(0,0,0,0.5);
}
/* gold top edge */
.form-shell::before {
  content: "";
  position: absolute;
  top: 0; left: 26px; right: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.field { margin-bottom: 19px; }
.field label {
  display: block;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: -0.005em;
}
.field .req { color: var(--gold); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: rgba(8, 13, 20, 0.55);
  border: 1px solid var(--line-bright);
  border-radius: 11px;
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease), background-color .22s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: #5d7490; }
.field select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 21px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.field select option { background: var(--surface); color: var(--ink); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(8, 13, 20, 0.78);
  box-shadow: 0 0 0 4px rgba(212,151,47,0.14);
}
.field textarea { min-height: 104px; resize: vertical; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }

/* honeypot: off-screen for people, present for bots */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.consent {
  background: rgba(8, 13, 20, 0.5);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 19px 21px;
  margin: 24px 0;
  transition: border-color .25s var(--ease);
}
.consent:focus-within { border-color: rgba(212,151,47,0.42); }
/* The A2P disclosure paragraph. Smaller than the consent sentence it sits above, but NOT
   --muted: this is the legal disclosure a carrier reviewer reads, so it stays legible. */
.consent-disclosure {
  font-size: 0.79rem;
  line-height: 1.62;
  color: var(--body);
  margin: 0 0 15px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.consent label {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 13px;
  align-items: start;
  font-size: 0.855rem;
  line-height: 1.6;
  color: var(--body);
  cursor: pointer;
}
/* Three separate consents since 2026-08-10, so each box needs to read as its own decision
   rather than one paragraph of small print. The divider is what makes the separation
   visible to the carrier reviewer who opens this page. */
.consent label + label {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.consent input[type="checkbox"] {
  width: 20px; height: 20px;
  margin: 2px 0 0;
  accent-color: var(--gold);
  cursor: pointer;
  flex: none;
}
.consent a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.form-note { font-size: 0.81rem; color: var(--muted); margin: 18px 0 0; line-height: 1.55; }

.form-msg { display: none; border-radius: 11px; padding: 15px 17px; margin-bottom: 21px; font-size: 0.94rem; }
.form-msg.is-error { display: block; background: rgba(255,122,112,0.1); color: var(--err); border: 1px solid rgba(255,122,112,0.3); }
.form-msg.is-ok    { display: block; background: rgba(67,201,138,0.1);  color: var(--ok);  border: 1px solid rgba(67,201,138,0.3); }

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

.legal { padding: 150px 0 100px; }
.legal .wrap { max-width: 810px; }
.legal h1 { font-size: clamp(2.1rem, 4.4vw, 3rem); }
.legal h2 { margin-top: 2.1em; font-size: clamp(1.28rem, 2.2vw, 1.6rem); }
.legal h3 { margin-top: 1.7em; }
.legal ul { padding-left: 1.35em; }
.legal li { margin-bottom: 0.5em; }
.legal a { text-decoration: underline; text-underline-offset: 2px; }
.legal .updated {
  display: inline-block;
  font-size: 0.83rem;
  color: var(--gold-2);
  background: var(--gold-dim);
  border: 1px solid rgba(212,151,47,0.28);
  border-radius: 100px;
  padding: 6px 16px;
  margin-bottom: 26px;
}

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

.site-footer {
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.42));
  padding: 72px 0 40px;
  font-size: 0.93rem;
}
.site-footer h4 {
  color: var(--ink);
  font-size: 0.76rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  margin-bottom: 17px;
}
.site-footer a { color: var(--body); }
.site-footer a:hover { color: var(--gold-2); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--line);
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 11px; }
.footer-legal {
  padding-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 940px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  html { scroll-padding-top: 74px; }
  .site-header .wrap { min-height: 66px; gap: 10px; }
  .brand-sub { display: none; }
  /* At 390px the wordmark and the CTA both wrapped to two lines. Shrink both and
     forbid wrapping so the bar stays one line. */
  .brand { font-size: 1.05rem; gap: 9px; white-space: nowrap; }
  .brand-mark { width: 36px; height: 30px; }
  .site-header .btn--ghost { padding: 10px 16px; font-size: 0.85rem; white-space: nowrap; }
  .hero { padding: 118px 0 70px; }
  .hero h1 { max-width: 100%; }
  .hero-actions .btn { width: 100%; }
  .field-row { grid-template-columns: 1fr; }
  .form-shell { padding: 24px 20px; }
  .card { padding: 26px 22px; }
  /* one value moves the dots and the rail together - see the note on .steps */
  .steps { --dot-size: 44px; }
  .step { grid-template-columns: var(--dot-size) 1fr; gap: 17px; padding-bottom: 28px; }
  .step-dot { width: var(--dot-size); height: var(--dot-size); font-size: 0.92rem; }
  .step-body { padding-top: 5px; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .legal { padding: 110px 0 70px; }
}

/* Below ~360px there is genuinely no room for both. The mark is a real logo now,
   so drop the wordmark rather than let anything wrap. */
@media (max-width: 359px) {
  .brand-name { display: none; }
}

/* ==========================================================================
   Motion preferences - everything above degrades to static
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero-orb { animation: none; }
}