/* Same Day Leads landing pages (2026-10-16 design handoff, 5 themes).
   One layout; every theme-specific value is a custom property set by the
   page's theme block (generated from _src/lead-gen/themes.mjs). Layout and
   type values come from the design references; responsive rules follow the
   handoff: mobile < 640, tablet 640-1023, desktop >= 1024. */

/* ---------- self-hosted fonts (latin subsets, OFL) ---------- */
@font-face { font-family: 'SDL Outfit'; src: url('/lead-gen/fonts/outfit-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'SDL Archivo'; src: url('/lead-gen/fonts/archivo-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'SDL Syne'; src: url('/lead-gen/fonts/syne-latin.woff2') format('woff2'); font-weight: 400 800; font-display: swap; }
@font-face { font-family: 'SDL Bowlby One'; src: url('/lead-gen/fonts/bowlby-one-400-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'SDL Archivo Black'; src: url('/lead-gen/fonts/archivo-black-400-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'SDL Bungee'; src: url('/lead-gen/fonts/bungee-400-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'SDL Bungee Outline'; src: url('/lead-gen/fonts/bungee-outline-400-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'SDL Anton'; src: url('/lead-gen/fonts/anton-400-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'SDL Shrikhand'; src: url('/lead-gen/fonts/shrikhand-400-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }
/* FALLBACK-FACES (metric-matched local fallbacks, generated by _src/lead-gen/fallbacks.mjs) */
@font-face { font-family: 'Outfit Fallback'; src: local('Arial'), local('ArialMT'), local('Helvetica'), local('Roboto'); font-weight: 400; size-adjust: 98.57%; ascent-override: 101.45%; descent-override: 26.38%; line-gap-override: 0%; }
@font-face { font-family: 'Outfit Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'), local('Roboto Bold'); font-weight: 600; size-adjust: 93.07%; ascent-override: 107.45%; descent-override: 27.94%; line-gap-override: 0%; }
@font-face { font-family: 'Outfit Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'), local('Roboto Bold'); font-weight: 800; size-adjust: 97.36%; ascent-override: 102.72%; descent-override: 26.71%; line-gap-override: 0%; }
@font-face { font-family: 'Archivo Fallback'; src: local('Arial'), local('ArialMT'), local('Helvetica'), local('Roboto'); font-weight: 400; size-adjust: 97.93%; ascent-override: 89.86%; descent-override: 21.44%; line-gap-override: 0%; }
@font-face { font-family: 'Archivo Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'), local('Roboto Bold'); font-weight: 600; size-adjust: 94.63%; ascent-override: 92.99%; descent-override: 22.19%; line-gap-override: 0%; }
@font-face { font-family: 'Archivo Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'), local('Roboto Bold'); font-weight: 800; size-adjust: 103.83%; ascent-override: 84.75%; descent-override: 20.23%; line-gap-override: 0%; }
@font-face { font-family: 'Syne Fallback'; src: local('Arial Black'), local('Arial-Black'), local('Arial Bold'), local('Arial-BoldMT'), local('Roboto Black'); font-weight: 800; size-adjust: 141.21%; ascent-override: 65.86%; descent-override: 19.12%; line-gap-override: 0%; }
@font-face { font-family: 'Bowlby One Fallback'; src: local('Arial Black'), local('Arial-Black'), local('Arial Bold'), local('Arial-BoldMT'), local('Roboto Black'); font-weight: 400; size-adjust: 111.51%; ascent-override: 99.54%; descent-override: 41.25%; line-gap-override: 0%; }
@font-face { font-family: 'Archivo Black Fallback'; src: local('Arial Black'), local('Arial-Black'), local('Arial Bold'), local('Arial-BoldMT'), local('Roboto Black'); font-weight: 400; size-adjust: 99.99%; ascent-override: 88.01%; descent-override: 21.00%; line-gap-override: 0%; }
@font-face { font-family: 'Bungee Fallback'; src: local('Arial Black'), local('Arial-Black'), local('Arial Bold'), local('Arial-BoldMT'), local('Roboto Black'); font-weight: 400; size-adjust: 92.54%; ascent-override: 110.22%; descent-override: 32.42%; line-gap-override: 0%; }
@font-face { font-family: 'Bungee Outline Fallback'; src: local('Arial Black'), local('Arial-Black'), local('Arial Bold'), local('Arial-BoldMT'), local('Roboto Black'); font-weight: 400; size-adjust: 92.54%; ascent-override: 110.22%; descent-override: 32.42%; line-gap-override: 0%; }
@font-face { font-family: 'Anton Fallback'; src: local('Impact'), local('Arial Narrow Bold'), local('ArialNarrow-Bold'), local('Roboto Condensed Bold'); font-weight: 400; size-adjust: 94.58%; ascent-override: 124.77%; descent-override: 34.89%; line-gap-override: 0%; }
@font-face { font-family: 'Shrikhand Fallback'; src: local('Georgia Bold Italic'), local('Georgia-BoldItalic'), local('Times New Roman Bold Italic'), local('Georgia Bold'); font-weight: 400; size-adjust: 99.19%; ascent-override: 103.84%; descent-override: 43.35%; line-gap-override: 0%; }
/* /FALLBACK-FACES */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--body-bg); color: var(--ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
img, svg { display: block; }
a { color: var(--accent2); text-decoration: none; }
h1, h2, p { margin: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
.btn:focus-visible, .btn-nav:focus-visible { border-radius: 999px; }
section[id] { scroll-margin-top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* label = the theme's small-caps workhorse (Outfit/Archivo 800, Bungee/Anton 400) */
.lbl { font-family: var(--font-label); font-weight: var(--w-label); }
/* d1 = headline face (Bowlby/Syne/Archivo Black/Bungee/Shrikhand); d2 = big-number face */
.d1 { font-family: var(--font-d1); font-weight: var(--w-d); letter-spacing: var(--ls-d); }
.d2 { font-family: var(--font-d2); font-weight: var(--w-d); letter-spacing: var(--ls-d); }

/* ---------- frame ---------- */
.frame { min-height: 100vh; padding: 0 18px 18px; background: var(--frame-bg); font-family: var(--font-body); }
.bar { display: flex; justify-content: center; align-items: center; gap: 14px; height: 44px; font-size: 15px; letter-spacing: .4em; color: var(--bar-ink); text-align: center; }
.page { position: relative; overflow: hidden; border-radius: 40px; background-color: var(--bg); color: var(--ink); }

/* ---------- nav ---------- */
.nav { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 28px clamp(22px, 4vw, 48px); }
.logo { font-size: 28px; letter-spacing: .32em; color: var(--ink); line-height: 1; }
.links { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; }
.links .txt { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 16px; color: var(--ink); }
.links .txt:hover { color: var(--link-hover); }
.btn-nav { display: inline-flex; align-items: center; height: 48px; padding: 0 26px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg); font-size: 17px; letter-spacing: .1em; white-space: nowrap; }
.btn-nav:hover, .btn:hover { background: var(--btn-hover-bg); color: var(--btn-hover-fg); }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; padding: clamp(24px, 5vw, 64px) clamp(22px, 4vw, 48px) clamp(48px, 7vw, 96px); }
.hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.eyebrow { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 10px; font-size: 16px; letter-spacing: .2em; color: var(--label, var(--accent2)); }
.h1 { display: flex; flex-direction: column; line-height: .95; }
.h1 span { display: block; } /* wraps only at the space ("Same / Day" in Haze, as in the reference); sizes keep every word inside its column */
.h1a { font-family: var(--font-h1a); font-weight: var(--w-d); letter-spacing: var(--ls-h1a); font-size: var(--h1a-size); color: var(--heading); text-shadow: var(--sh1-6, none); }
.h1b { font-family: var(--font-d2); font-weight: var(--w-d); letter-spacing: .01em; font-size: var(--h1b-size); color: var(--accent); text-shadow: var(--sh2-7, none); }
.lede { max-width: 540px; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.chips { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; font-size: 19px; letter-spacing: .06em; color: var(--label, var(--accent2)); }
.chips .chip { white-space: nowrap; }
.chips .sep { color: var(--ink); margin-left: 18px; }
.ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 62px; padding: 0 36px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg); font-size: 21px; letter-spacing: .1em; white-space: nowrap; }
.btn-ghost { background: transparent; border: 2px solid var(--ghost); color: var(--ghost); padding: 0 32px; font-size: 19px; }
.btn-ghost:hover { background: transparent; border-color: var(--ghost-hover); color: var(--ghost-hover); }
.hero-art { display: flex; justify-content: center; align-items: center; min-width: 0; }
.hero-art img { width: min(100%, var(--art-w)); height: auto; border-radius: var(--art-radius, 0); box-shadow: var(--art-shadow, none); }

/* Night Market art: beam + planet + moon + sparkles */
.art-nm { position: relative; min-height: 420px; align-items: flex-start; }
.art-nm .beam { position: absolute; left: 50%; top: 44%; width: 120%; height: 70%; transform: translateX(-50%); clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(242, 93, 184, .45), rgba(242, 93, 184, 0)); }
.art-nm img { position: relative; }
.art-nm .moon { position: absolute; right: 6%; top: 0; width: 64px; height: 64px; }
.art-nm .spark1 { position: absolute; left: 8%; top: 12%; width: 22px; height: 22px; }
.art-nm .spark2 { position: absolute; right: 2%; top: 58%; width: 16px; height: 16px; }

/* ---------- shared section chrome ---------- */
.sec { padding: clamp(48px, 6vw, 88px) clamp(22px, 4vw, 48px); border-top: 1px solid var(--rule); }
.sec-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; }
/* --label: accent2 nudged darker where the references' small accent text falls under 4.5:1 */
.kicker { font-size: 16px; letter-spacing: .22em; color: var(--label, var(--accent2)); }
.h2 { font-size: clamp(40px, 5vw, 68px); line-height: 1.05; color: var(--heading); text-shadow: var(--sh1-4, none); }
.card { border-radius: 24px; background: var(--card-bg); border: 1px solid var(--card-border); }

/* ---------- accountability ---------- */
.quote { padding: clamp(56px, 7vw, 104px) clamp(22px, 4vw, 48px); border-top: 1px solid var(--rule); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.q1 { font-size: clamp(40px, 5.4vw, 84px); line-height: 1.05; color: var(--heading); text-shadow: var(--sh1-5, none); }
.q2 { max-width: 980px; font-size: clamp(30px, 3.8vw, 58px); line-height: 1.1; color: var(--ink); text-wrap: balance; }

/* ---------- what you own ---------- */
.own .sec-head { gap: 14px; max-width: 820px; }
.own .lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.own-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.own-card { display: flex; flex-direction: column; gap: 12px; padding: 26px 24px; }
.own-card h3, .vert h3, .step h3 { margin: 0; font-size: 26px; letter-spacing: .04em; line-height: 1.1; }
.own-card h3 { color: var(--accent); }
.own-card h3.alt { color: var(--heading); }
.own-card p { font-size: 17px; line-height: 1.5; color: var(--muted); }

/* ---------- how it works ---------- */
.steps .h2 { font-family: var(--font-d2); font-size: clamp(44px, 6vw, 88px); line-height: 1; letter-spacing: .01em; color: var(--accent); text-shadow: var(--sh2-5, none); }
.step-grid { display: grid; grid-template-columns: 1fr; gap: 28px; list-style: none; margin: 0; padding: 0; }
.step { display: flex; flex-direction: column; gap: 10px; }
.step .num { font-size: 72px; line-height: 1; color: var(--heading); }
.step:nth-child(even) .num { color: var(--accent); }
.step h3 { font-size: 28px; color: var(--ink); line-height: 1.15; }
.step p { font-size: 18px; line-height: 1.5; color: var(--muted); max-width: 340px; }

/* ---------- verticals ---------- */
.vert-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.vert { display: flex; flex-direction: column; gap: 16px; padding: 28px 26px; }
.vert h3 { color: var(--accent); }
.vert ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.vert li { display: flex; gap: 10px; align-items: baseline; font-size: 17px; line-height: 1.4; color: var(--muted); }
.vert li::before { content: "\2726"; flex: none; color: var(--accent2); font-size: 12px; }

/* ---------- about ---------- */
.about { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.about .photo { width: 100%; max-width: 520px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: 32px; border: 1px solid var(--card-border); justify-self: center; }
.about-copy { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.about .h2 { font-size: clamp(38px, 4.6vw, 64px); }
.about .bio { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--stat-min, 150px), 1fr)); gap: 18px; padding-top: 6px; }
.stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* sized so the widest value ("$300M+") fits its column at every width; the references overflow here */
.stat .val { font-size: var(--stat-size, clamp(32px, 2.9vw, 42px)); line-height: 1; white-space: nowrap; }
.stat:nth-child(1) .val { color: var(--accent); }
.stat:nth-child(2) .val { color: var(--heading); }
.stat:nth-child(3) .val { color: var(--accent2); }
.stat .cap { font-size: 15px; line-height: 1.4; color: var(--muted2); }

/* ---------- book ---------- */
.book { position: relative; padding: clamp(56px, 7vw, 104px) clamp(22px, 4vw, 48px) clamp(80px, 9vw, 140px); border-top: 1px solid var(--rule); display: flex; flex-direction: column; align-items: center; gap: 30px; text-align: center; }
.book .cactus { position: absolute; bottom: 0; height: auto; pointer-events: none; }
.book .cactus path { stroke: var(--cactus); }
.book .cactus.l { left: clamp(10px, 3vw, 48px); width: clamp(48px, 6vw, 88px); }
.book .cactus.r { right: clamp(10px, 3vw, 48px); width: clamp(36px, 4.6vw, 68px); }
.book-h { display: flex; flex-direction: column; line-height: .98; }
.book-h .a { font-family: var(--font-d1); font-size: clamp(46px, 6vw, 96px); color: var(--heading); text-shadow: var(--sh1-5, none); }
.book-h .b { font-family: var(--font-d2); font-size: clamp(48px, 6.6vw, 108px); color: var(--accent); text-shadow: var(--sh2-6, none); }
.book .kicker { font-size: 17px; letter-spacing: .2em; }
#e1even-cal { position: relative; z-index: 1; width: 100%; max-width: 1000px; min-height: 660px; overflow: auto; text-align: left; }
.cal-fallback { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--muted2); position: relative; z-index: 1; }
.cal-fallback:hover { color: var(--fallback-hover); }

/* ---------- footer ---------- */
.foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 26px clamp(22px, 4vw, 48px); border-top: 1px solid var(--rule); font-size: 14px; color: var(--muted2); }
.foot .logo-s { letter-spacing: .3em; color: var(--ink); }
.foot nav { display: flex; align-items: center; gap: 20px; }
.foot a { color: var(--muted2); display: inline-flex; align-items: center; min-height: 44px; }
.foot a:hover { color: var(--ink); }

/* ---------- tablet 640-1023 ---------- */
@media (min-width: 640px) {
  .own-grid, .step-grid, .vert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- desktop >= 1024 ---------- */
@media (min-width: 1024px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .own-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
  .step-grid, .vert-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .about { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 1240px) { .page { max-width: 1404px; margin: 0 auto; } }

/* ---------- below desktop: stack the hero, art after the copy ---------- */
@media (max-width: 1023px) {
  /* cap the art at ~60vw tall with a definite width (from its aspect ratio) so its box is reserved before it loads */
  .hero-art img { width: min(100%, var(--art-w), calc(60vw * var(--art-ar))); height: auto; }
  .art-nm { min-height: 0; }
  .about .photo { max-width: 440px; }
}

/* ---------- mobile < 640 ---------- */
@media (max-width: 639px) {
  .frame { padding: 0 8px 8px; }
  .bar { height: 38px; gap: 8px; font-size: 11px; letter-spacing: .26em; }
  .page { border-radius: 26px; }
  .nav { padding: 16px 18px; gap: 12px; flex-wrap: nowrap; }
  .logo { font-size: 21px; letter-spacing: .26em; }
  .links { gap: 0; }
  .links .txt { display: none; }
  .btn-nav { height: 44px; padding: 0 18px; font-size: 14px; letter-spacing: .08em; }
  .hero { padding: 12px 18px 44px; gap: 24px; }
  .hero-copy { gap: 20px; }
  .eyebrow { font-size: 13px; letter-spacing: .14em; gap: 8px; }
  .h1a { font-size: var(--h1a-size-m); }
  .h1b { font-size: var(--h1b-size-m); }
  .lede { font-size: 18px; }
  /* --wide-m < 1 for very wide display faces (Syne 800) so single words fit at 320 */
  .q1 { font-size: calc(min(40px, 11.5vw) * var(--wide-m, 1)); }
  .q2 { font-size: calc(min(30px, 8.6vw) * var(--wide-m, 1)); }
  .book-h .a { font-size: calc(min(46px, 12.6vw) * var(--wide-m, 1)); }
  .book-h .b { font-size: calc(min(48px, 13vw) * var(--wide-m, 1)); }
  .chips { font-size: 16px; gap: 6px 9px; letter-spacing: .03em; }
  .chips .sep { margin-left: 8px; font-size: 13px; }
  .ctas { gap: 10px; }
  .ctas .btn { flex: 1 1 100%; height: 56px; padding: 0 20px; font-size: 18px; }
  .sec, .quote { padding-left: 18px; padding-right: 18px; }
  .sec-head { margin-bottom: 28px; }
  .kicker { font-size: 14px; letter-spacing: .18em; }
  .own-card { padding: 22px 20px; }
  .own-card h3, .vert h3 { font-size: 22px; }
  .step-grid { gap: 26px; }
  .step .num { font-size: 56px; }
  .step h3 { font-size: 24px; }
  .vert { padding: 22px 20px; gap: 14px; }
  .vert li { font-size: 16px; }
  .stat .cap { font-size: 16px; }
  .book { padding: 52px 14px 96px; gap: 22px; }
  .book .kicker { font-size: 14px; letter-spacing: .16em; }
  #e1even-cal { min-height: 520px; }
  .cal-fallback { font-size: 16px; }
  .foot { padding: 18px; font-size: 16px; }
}