/* ============================================================
   FUNNEL — extends css/styles.css (brand tokens, nav, buttons)
   Landing: marketing team's structure, Second Prime skin.
   Apply / Booking / Thank-you: dark ground, teal punctuation,
   modeled on the ghl/book + thankyou pages.
   ============================================================ */

/* ─────────────────────────────────────────────
   LANDING
   ───────────────────────────────────────────── */

/* Hero: dark, centered, text-first (their structure) */
.f-hero {
  background: var(--grad-dark);
  color: var(--surface-light);
  min-height: 92vh;
  display: flex;
  align-items: center;
  text-align: center;
  padding: 160px 0 110px;
}
.f-hero .hero-tag {
  display: block;
  font-size: 13px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--teal-bright);
  margin-bottom: 28px;
}
.f-hero h1 { color: #fff; margin-bottom: 8px; }
.f-hero h1 .accent {
  display: block; font-style: italic; color: var(--teal-bright);
}
.f-hero .f-hero-sub {
  font-size: 18px; color: rgba(253,251,248,0.68);
  max-width: 640px; margin: 26px auto 38px; line-height: 1.7;
}
.f-hero-stats {
  display: flex; justify-content: center; gap: 64px;
  margin-top: 72px; flex-wrap: wrap;
}
.f-hero-stats .num {
  font-family: var(--font-display); font-size: 44px; line-height: 1;
  color: #fff; display: block; margin-bottom: 8px;
}
.f-hero-stats .lbl {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(253,251,248,0.45);
}
.f-hero-note {
  font-size: 13px; color: rgba(253,251,248,0.5);
  margin-top: 14px; letter-spacing: 0.02em;
}
.m-br { display: none; }
@media (max-width: 640px) {
  .f-hero { min-height: auto; padding: 128px 0 64px; }
  .f-hero h1 { font-size: clamp(29px, 8.5vw, 40px); text-wrap: initial; }
  .f-hero h1 .accent { font-size: 0.94em; white-space: nowrap; }
  .m-br { display: inline; }
  .f-hero .f-hero-sub { font-size: 16px; max-width: 480px; margin: 20px auto 30px; line-height: 1.65; }
  .f-hero-stats { gap: 28px; margin-top: 44px; }
  .f-hero-stats .num { font-size: 30px; }
  .f-hero-stats .lbl { font-size: 10px; }
}

/* Section intro turn line + CTA (problem section) */
.f-turn {
  font-family: var(--font-display); font-size: clamp(21px, 2.6vw, 27px);
  line-height: 1.45; text-align: center; max-width: 720px;
  margin: 72px auto 0; text-wrap: balance;
}
.f-section-cta { text-align: center; margin-top: 44px; }

/* What we do: three pillars */
.f-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .f-pillars { grid-template-columns: 1fr; } }
.f-pillar {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 38px 34px;
  display: flex; flex-direction: column;
  transition: transform var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease);
}
.f-pillar:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(22,23,25,0.08); }
.f-pillar .num {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: var(--teal);
  margin-bottom: 18px;
}
.f-pillar h3 { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.f-pillar .sub {
  font-family: var(--font-display); font-size: 24px; line-height: 1.2;
  margin-bottom: 16px;
}
.f-pillar p { font-size: 15px; color: var(--gray); }
.f-pillar .stat {
  margin-top: auto; padding-top: 22px;
}
.f-pillar .stat blockquote {
  border-left: 2px solid var(--teal); padding: 2px 0 2px 16px;
  font-size: 14.5px; color: var(--ink); font-weight: 500;
}
.f-pillar .stat .src {
  display: block; font-size: 12px; color: var(--gray);
  margin-top: 8px; padding-left: 18px;
}

/* Stats band (dark) */
.f-stats {
  background: var(--grad-band); color: var(--surface-light);
  padding: 90px 0;
}
.f-stats-row {
  display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  text-align: center;
}
.f-stats-row > div { flex: 1; min-width: 150px; }
.f-stats-row .num {
  font-family: var(--font-display); font-size: clamp(34px, 3.6vw, 48px);
  line-height: 1; color: var(--teal-bright); display: block; margin-bottom: 10px;
}
.f-stats-row .lbl {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(253,251,248,0.5);
}

/* Method phases */
.f-phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .f-phases { grid-template-columns: 1fr; } }
.f-phase {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 38px 34px;
  transition: transform var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease);
}
.f-phase:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(22,23,25,0.08); }
.f-phase .phase-tag {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--teal); display: block; margin-bottom: 6px;
}
.f-phase .phase-verb {
  font-family: var(--font-display); font-size: 30px; line-height: 1.1;
  display: block; margin-bottom: 18px;
}
.f-phase h3 { font-family: var(--font-display); font-size: 22px; font-weight: 400; line-height: 1.25; margin-bottom: 10px; }
.f-phase p { font-size: 15px; color: var(--gray); margin-bottom: 20px; }
.f-phase ul { border-top: 1px solid var(--border); }
.f-phase li {
  display: flex; gap: 10px; align-items: baseline;
  font-size: 14.5px; padding: 10px 0; border-bottom: 1px solid var(--border);
}
.f-phase li::before { content: "\2192"; color: var(--teal); flex: none; }

/* Client voices */
.f-featured {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 46px 52px;
  max-width: 820px; margin: 0 auto 26px; text-align: center;
}
.f-stars { color: var(--teal); letter-spacing: 4px; font-size: 15px; margin-bottom: 20px; }
.f-featured .quote {
  font-family: var(--font-display); font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.6; margin-bottom: 22px;
}
.f-featured .who { font-size: 14px; font-weight: 700; }
.f-featured .who span { display: block; font-weight: 500; color: var(--gray); font-size: 13px; margin-top: 2px; }
.f-voice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .f-voice-grid { grid-template-columns: 1fr; } }
.f-voice {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 26px 26px 22px;
  transition: transform var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease);
}
.f-voice:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(22,23,25,0.08); }
.f-voice .f-stars { font-size: 12px; margin-bottom: 12px; }
.f-voice p { font-size: 14.5px; margin-bottom: 16px; }
.f-voice .who { font-size: 13px; font-weight: 700; }
.f-voice .who span { display: block; font-weight: 500; color: var(--gray); font-size: 12.5px; }
.f-anon { text-align: center; font-size: 13px; color: var(--gray); margin: 10px 0 40px; }

/* Measured results */
.f-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .f-cases { grid-template-columns: 1fr; } }
.f-case {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 34px 30px;
  transition: transform var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease);
}
.f-case:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(22,23,25,0.08); }
.f-case-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.f-case-avatar {
  flex: none; width: 56px; height: 56px; border-radius: 50%;
  object-fit: cover; border: 2px solid var(--teal);
}

/* Provaeon's case studies are anonymised at the clients' request, so these
   portraits are illustrations rather than the actual people. Every page that
   shows one carries that in its disclosure line. The monogram below is kept
   as the fallback for any case with no portrait. */
.f-case-initials {
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-deep); color: var(--blue-light);
  font-family: var(--font-display); font-weight: 600;
  font-size: 17px; letter-spacing: 0.04em;
}
img.f-case-avatar { object-fit: cover; object-position: center 30%; background: var(--bg-cool); }
/* Required alongside any results claim. Source: brand-context/strategy/proof.md */
.f-cases-disc {
  max-width: var(--container); margin: 20px auto 0; padding: 0 24px;
  font-size: 12.5px; line-height: 1.5; color: var(--gray); text-align: center;
}
.f-case .tag {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--teal); display: block;
}
.f-case .age { font-size: 12.5px; color: var(--gray); display: block; margin-top: 2px; }
.f-case .title {
  font-family: var(--font-display); font-size: 21px; line-height: 1.3;
  margin-bottom: 20px;
}
.f-case ul { border-top: 1px solid var(--border); }
.f-case li {
  display: flex; gap: 10px; align-items: baseline;
  font-size: 14.5px; font-weight: 500; padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.f-case li::before { content: "\2192"; color: var(--teal); flex: none; }
.f-disc { text-align: center; font-size: 12.5px; color: var(--gray); margin-top: 34px; }

/* Comparison table */
.f-compare-wrap { overflow-x: auto; }
.f-compare {
  width: 100%; border-collapse: collapse; min-width: 640px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.f-compare th, .f-compare td {
  padding: 15px 18px; font-size: 14.5px; text-align: center;
  border-bottom: 1px solid var(--border);
}
.f-compare th {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gray); background: var(--bg-light);
}
.f-compare th:first-child, .f-compare td:first-child { text-align: left; }
.f-compare td:first-child { font-weight: 500; }
.f-compare th.sp-col { color: var(--teal-deep); }
.f-compare td.yes { color: var(--teal); font-weight: 700; }
.f-compare td.no { color: #C3C6CE; }
.f-compare td.partial { color: var(--gray); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.06em; }
.f-compare tr:last-child td { border-bottom: none; }

/* Founder (dark) */
.f-founder { background: var(--grad-band); color: var(--surface-light); }
.f-founder .eyebrow { color: var(--teal-bright); }
.f-founder h2 { color: #fff; max-width: 760px; }
.f-founder p {
  max-width: 720px; color: rgba(253,251,248,0.72);
  font-size: 16.5px; margin-top: 22px;
}
.f-founder-stats { display: flex; gap: 56px; margin-top: 44px; flex-wrap: wrap; }
.f-founder-stats .num {
  font-family: var(--font-display); font-size: 34px; color: var(--teal-bright);
  display: block; margin-bottom: 6px;
}
.f-founder-stats .lbl {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(253,251,248,0.45);
}

/* Final CTA (dark) */
.f-cta {
  background: var(--grad-deep);
  color: var(--surface-light); text-align: center;
}
.f-cta .eyebrow { color: var(--teal-bright); }
.f-cta h2 { color: #fff; max-width: 820px; margin: 0 auto; }
.f-cta .lead { color: rgba(253,251,248,0.65); margin: 22px auto 36px; }
.f-cta .note { font-size: 13px; color: rgba(253,251,248,0.45); margin-top: 18px; }

/* Funnel footer (dark, minimal, no external links) */
.f-footer {
  background: var(--grad-deep); color: var(--surface-light);
  padding: 54px 0; text-align: center;
}
.f-footer .f-logo {
  width: 168px; height: 32px; margin: 0 auto 14px;
  background: currentColor;
  -webkit-mask: url("../assets/logo.svg") no-repeat center / contain;
          mask: url("../assets/logo.svg") no-repeat center / contain;
}
.f-footer .tagline {
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--teal-bright); margin-bottom: 20px;
}
.f-footer .copy { font-size: 12.5px; color: rgba(253,251,248,0.4); }
.f-footer .disc {
  font-size: 11.5px; color: rgba(253,251,248,0.32);
  max-width: 640px; margin: 16px auto 0; line-height: 1.6;
}

/* ─────────────────────────────────────────────
   APPLICATION / BOOKING / THANK-YOU
   Light page, teal glass card (the card is the
   jewel). Ported from the site's apply v4 +
   booking pages.
   ───────────────────────────────────────────── */
body.ap-page { background: var(--white); }

/* Nav: one look on these pages, no theme flipping */
.ap-nav, .ap-nav.scrolled {
  background: rgba(255,255,255,0.96); color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 18px 44px -26px rgba(43,92,96,0.18);
}
.ap-nav .btn-cta { background: var(--near-black); color: var(--surface-light); }

.ap { padding: 148px 0 96px; min-height: 100dvh; }
@media (max-width: 700px) { .ap { padding: 116px 0 72px; } }
.ap-head { max-width: 640px; margin: 0 auto 30px; text-align: center; padding: 0 24px; }
.ap-head .eyebrow { color: var(--teal); }
.ap-head h1 { font-size: clamp(36px, 4.4vw, 54px); color: var(--ink); margin-bottom: 12px; }
.ap-head .ap-sub { font-size: 16.5px; color: var(--gray); line-height: 1.6; max-width: 460px; margin: 0 auto; }

/* Process strip */
.ap-process { display: flex; justify-content: center; gap: 0; max-width: 760px; margin: 0 auto 44px; padding: 0 24px; }
.ap-p { flex: 1; text-align: center; padding: 0 14px; position: relative; }
.ap-p + .ap-p::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: var(--border); }
.ap-p b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 15px; color: var(--teal); margin-bottom: 4px; }
.ap-p div { font-size: 13.5px; font-weight: 600; color: var(--ink); }
/* Direct child only. This is the caption under each step title. An unscoped
   `.ap-p span` also caught the nested `.ty-len` span that carries the call
   length, turning "Your 30-minute call" into three stacked lines on desktop and
   hiding the duration entirely on mobile. */
.ap-p > span { display: block; font-size: 12px; color: var(--gray); margin-top: 2px; line-height: 1.4; }
/* Keep "30-minute" whole; the hyphen is a legal break point and narrow viewports
   were splitting it as "Your 30-" / "minute call". */
.ap-p .ty-len { white-space: nowrap; }
@media (max-width: 600px) { .ap-p > span { display: none; } .ap-process { margin-bottom: 36px; } }

/* The jewel: deep teal glass card */
.ap-card { max-width: 640px; margin: 0 auto; padding: 0 20px; }
.ap-shell { position: relative; border-radius: 20px; padding: 38px 40px 40px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% -10%, #3A72CE 0%, #274E94 55%, #274E94 100%) #274E94;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 34px 74px -42px rgba(22,56,61,0.6); }
@media (max-width: 560px) { .ap-shell { padding: 26px 22px 30px; } }
.qghost { position: absolute; top: 14px; right: 24px; font-family: var(--font-display); font-size: 64px; line-height: 1;
  letter-spacing: -0.04em; color: rgba(255,255,255,0.08); pointer-events: none; user-select: none; }

.ap-progress { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; position: relative; z-index: 1; max-width: 70%; }
.ap-bar { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.14); overflow: hidden; }
.ap-bar i { display: block; height: 100%; width: 0; background: var(--teal-bright); border-radius: 3px; transition: width .45s var(--ease); }
.ap-count { font-size: 12.5px; color: rgba(225,242,243,0.6); letter-spacing: 0.05em; white-space: nowrap; }

.qstep { display: none; position: relative; z-index: 1; padding: 0; }
.qstep.on { display: block; animation: qIn .4s var(--ease) both; }
@keyframes qIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.qstep h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(23px, 2.5vw, 29px); line-height: 1.2; color: var(--surface-light); margin-bottom: 8px; }
.qstep .qsub { font-size: 14.5px; color: rgba(225,242,243,0.72); margin-bottom: 22px; line-height: 1.5; }

.opt { display: flex; align-items: center; gap: 13px; padding: 13px 15px; border-radius: 12px;
  margin-bottom: 10px; cursor: pointer; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14);
  transition: border-color var(--dur-ui), background var(--dur-ui), transform var(--dur-ui); }
.qstep.on .opt { opacity: 0; animation: qOpt .35s var(--ease) forwards; }
.qstep.on .opt:nth-child(3) { animation-delay: .04s; } .qstep.on .opt:nth-child(4) { animation-delay: .08s; }
.qstep.on .opt:nth-child(5) { animation-delay: .12s; } .qstep.on .opt:nth-child(6) { animation-delay: .16s; }
.qstep.on .opt:nth-child(7) { animation-delay: .2s; } .qstep.on .opt:nth-child(8) { animation-delay: .24s; }
.qstep.on .opt:nth-child(9) { animation-delay: .28s; } .qstep.on .opt:nth-child(10) { animation-delay: .32s; }
.qstep.on .opt:nth-child(11) { animation-delay: .36s; }
@keyframes qOpt { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.opt:hover { border-color: rgba(143,184,245,0.6); }
.opt:active { transform: scale(0.99); }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt .key { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 7px;
  font-size: 12px; font-weight: 700; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.7); transition: background var(--dur-ui), color var(--dur-ui), border-color var(--dur-ui); }
.opt span.txt { font-size: 15px; color: #F5F6F8; line-height: 1.35; }
.opt:has(input:checked) { border-color: var(--teal-bright); background: rgba(143,184,245,0.12); }
.opt:has(input:checked) .key { background: var(--teal-bright); border-color: var(--teal-bright); color: #16304F; }

.fld { display: block; margin-bottom: 18px; }
.fld__k { display: block; font-size: 13px; font-weight: 600; color: #F5F6F8; margin-bottom: 8px; }
.fld input, .fld textarea { width: 100%; padding: 13px 15px; font-family: var(--font-sans); font-size: 15px; color: #fff;
  background: rgba(0,35,45,0.32); border: 1px solid rgba(255,255,255,0.22); border-radius: 10px;
  transition: border-color var(--dur-ui), box-shadow var(--dur-ui); }
.fld input:focus, .fld textarea:focus { outline: none; border-color: var(--teal-bright); box-shadow: 0 0 0 3px rgba(143,184,245,0.22); }
.fld input::placeholder, .fld textarea::placeholder { color: rgba(255,255,255,0.4); }
.fld textarea { resize: vertical; min-height: 110px; }
.fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .fld-row { grid-template-columns: 1fr; gap: 0; } }

.qnav { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; position: relative; z-index: 1; }
.qback { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 0;
  color: rgba(225,242,243,0.6); font-size: 14px; cursor: pointer; transition: color var(--dur-ui); }
.qback:hover { color: #fff; }
.qnext { min-width: 150px; }
.qerr { display: none; margin-top: 14px; color: #FFE0E0; font-size: 14px; line-height: 1.5; position: relative; z-index: 1; }
.qerr.on { display: block; }
.qfine { font-size: 12.5px; color: rgba(225,242,243,0.55); text-align: center; margin-top: 14px; line-height: 1.5; }
.qkeys { font-size: 12px; color: var(--gray); margin-top: 14px; text-align: center; }
@media (hover: none) { .qkeys { display: none; } }

/* Testimonial / quote under the card */
.ap-quote { max-width: 560px; margin: 64px auto 0; padding: 0 24px; text-align: center; }
.ap-quote .ap-qmark { font-family: var(--font-display); font-size: 54px; line-height: 0.5; color: var(--teal); display: block; margin-bottom: 18px; }
.ap-quote p { font-family: var(--font-display); font-size: clamp(19px, 2.2vw, 23px); line-height: 1.45; color: var(--ink); margin-bottom: 20px; }
.ap-quote .ap-who { display: flex; align-items: center; justify-content: center; gap: 12px; }
img.ap-ava { object-fit: cover; object-position: center 30%; background: var(--bg-cool); }
.ap-quote .ap-ava { width: 40px; height: 40px; border-radius: 50%; background: var(--blue-deep); color: #fff; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; letter-spacing: 0.03em; }
.ap-quote .ap-name { text-align: left; }
.ap-quote .ap-name b { display: block; font-size: 14px; color: var(--ink); font-weight: 600; }
.ap-quote .ap-name span { font-size: 12.5px; color: var(--gray); }

/* ---- Booking calendar (same teal shell) ---- */
.book-wrap { padding: 0 0 40px; }
.book-shell { max-width: 640px; margin: 0 auto; border-radius: 20px; padding: 40px;
  background: radial-gradient(120% 90% at 50% -10%, #3A72CE 0%, #274E94 55%, #274E94 100%) #274E94;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 34px 74px -42px rgba(22,56,61,0.6); }
@media (max-width: 560px) { .book-shell { padding: 24px; } }

.spb__eyebrow { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-bright); font-weight: 600; margin-bottom: 6px; }
.spb__month { font-family: var(--font-display); font-weight: 400; font-size: 24px; color: var(--surface-light); }
.spb__head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 22px; }
.spb__nav { display: flex; gap: 8px; }
.spb__nav-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.18); color: #F5F6F8;
  transition: border-color var(--dur-ui), color var(--dur-ui); }
.spb__nav-btn:hover { border-color: var(--teal-bright); color: var(--teal-bright); }

.spb__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 8px; }
.spb__weekdays span { text-align: center; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(225,242,243,0.55); }
.spb__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.spb__day { aspect-ratio: 1; display: grid; place-items: center; border: 1px solid transparent; border-radius: 10px;
  background: transparent; color: rgba(255,255,255,0.28); font-size: 15px; font-family: var(--font-sans); cursor: default; }
.spb__day.is-available { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); color: #F5F6F8; cursor: pointer; font-weight: 600;
  transition: border-color var(--dur-ui), background var(--dur-ui); }
.spb__day.is-available:hover { border-color: var(--teal-bright); background: rgba(143,184,245,0.14); }
.spb__day.is-today { box-shadow: inset 0 0 0 1px var(--teal-bright); }
.spb__day.is-empty { border: none; background: none; }

.spb__key { display: flex; gap: 20px; margin-top: 18px; }
.spb__key-item { display: flex; align-items: center; gap: 7px; font-size: 12px; color: rgba(225,242,243,0.6); }
.spb__swatch { width: 11px; height: 11px; border-radius: 3px; }
.spb__swatch--available { background: rgba(255,255,255,0.1); border: 1px solid var(--teal-bright); }
.spb__swatch--unavailable { background: rgba(255,255,255,0.08); }

.spb__loading { text-align: center; padding: 20px 0; color: rgba(225,242,243,0.65); font-size: 14px; }
.spb__spinner { width: 22px; height: 22px; border: 2px solid rgba(255,255,255,0.2); border-top-color: var(--teal-bright); border-radius: 50%; margin: 0 auto 10px; animation: spb-spin 0.8s linear infinite; }
@keyframes spb-spin { to { transform: rotate(360deg); } }

.spb__back { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; color: var(--teal-bright); font-size: 14px; cursor: pointer; margin-bottom: 16px; padding: 0; }
.spb__selected-date { font-family: var(--font-display); font-size: 20px; color: var(--surface-light); margin-bottom: 18px; }
.spb__slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.spb__slot { padding: 13px; border-radius: 10px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); color: #F5F6F8;
  font-size: 15px; font-family: var(--font-sans); cursor: pointer; transition: border-color var(--dur-ui), background var(--dur-ui); }
.spb__slot:hover { border-color: var(--teal-bright); background: rgba(143,184,245,0.14); }

.spb__confirm-line { color: rgba(225,242,243,0.72); font-size: 15px; margin-bottom: 20px; }
.spb__field { margin-bottom: 16px; }
.spb__field label { display: block; font-size: 13px; font-weight: 600; color: #F5F6F8; margin-bottom: 7px; }
.spb__field input { width: 100%; padding: 13px 15px; font-family: var(--font-sans); font-size: 15px; color: #fff;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.18); border-radius: 10px; }
.spb__field input:focus { outline: none; border-color: var(--teal-bright); box-shadow: 0 0 0 3px rgba(143,184,245,0.22); }
.spb__submit { width: 100%; justify-content: center; margin-top: 8px; }
.spb__error { display: none; margin-top: 14px; color: #FFE0E0; font-size: 14px; }
.spb__confirmed { text-align: center; padding: 20px 0; }
.spb__confirmed h3 { font-family: var(--font-display); font-weight: 400; font-size: 28px; color: var(--surface-light); margin-bottom: 10px; }
.spb__confirmed p { color: rgba(225,242,243,0.75); font-size: 16px; line-height: 1.55; }
.spb__check { width: 56px; height: 56px; border-radius: 50%; background: rgba(143,184,245,0.16); color: var(--teal-bright); display: grid; place-items: center; margin: 0 auto 18px; }

/* GHL widget fallback (static hosting, no /api) */
.spb__fallback { display: none; }
.spb__fallback iframe { width: 100%; min-height: 740px; border: none; display: block; border-radius: 12px; background: #fff; }

/* Light minimal footer */
.apply-footer { border-top: 1px solid var(--border); padding: 32px 0; text-align: center; }
.apply-footer .f-logo {
  width: 140px; height: 28px; margin: 0 auto 12px;
  color: var(--ink); background: currentColor; opacity: 0.8;
  -webkit-mask: url("../assets/logo.svg") no-repeat center / contain;
          mask: url("../assets/logo.svg") no-repeat center / contain;
}
.apply-footer .tagline { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal); margin-bottom: 12px; }
.apply-footer .copy { font-size: 11.5px; color: var(--gray); }

/* ─────────────────────────────────────────────
   V2 ADDITIONS
   ───────────────────────────────────────────── */

/* Normal vs optimal range cards */
.f-ranges .lead { max-width: 640px; }
.f-rangecards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 56px; }
@media (max-width: 900px) { .f-rangecards { grid-template-columns: 1fr; } }
.f-rangecard {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 32px 30px 28px;
  transition: transform var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease);
}
.f-rangecard:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(22,23,25,0.08); }
.f-range-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 26px; }
.f-rangecard h3 { font-size: 19px; font-weight: 700; }
.f-range-unit { font-size: 12px; color: var(--gray); letter-spacing: 0.04em; }
.f-rangebar { position: relative; height: 56px; margin-bottom: 10px; }
.f-rb-track {
  position: absolute; left: 0; right: 0; top: 26px; height: 10px; border-radius: 6px;
  background: #E7E9ED;
}
.f-rb-opt {
  position: absolute; top: 26px; height: 10px; border-radius: 6px;
  background: linear-gradient(90deg, var(--teal), #1ABAED);
}
.f-rb-you { position: absolute; top: 21px; width: 20px; height: 20px; margin-left: -10px; }
.f-rb-you::before {
  content: ""; display: block; width: 14px; height: 14px; margin: 3px auto 0;
  border-radius: 50%; background: var(--ink); border: 3px solid #fff;
  box-shadow: 0 1px 6px rgba(26,26,26,0.35);
}
.f-rb-you span {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--ink); background: var(--accent-tint); padding: 3px 9px; border-radius: 999px;
}
.f-range-labels { display: flex; justify-content: space-between; gap: 12px; font-size: 11.5px; color: var(--gray); margin-bottom: 16px; }
.f-range-labels .opt { color: var(--teal-deep); font-weight: 700; }
.f-rangecard > p { font-size: 14px; color: var(--gray); line-height: 1.55; }
.f-range-note { text-align: center; font-size: 12.5px; color: var(--gray); margin-top: 30px; }

/* Fit check: two columns */
.f-fit { display: grid; grid-template-columns: 1.25fr 1fr; gap: 22px; max-width: 980px; margin: 0 auto; }
@media (max-width: 820px) { .f-fit { grid-template-columns: 1fr; } }
.f-fit-col { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 36px 34px; }
.f-fit-col h3 { font-family: var(--font-display); font-weight: 400; font-size: 23px; line-height: 1.25; margin-bottom: 20px; }
.f-fit-col ul { border-top: 1px solid var(--border); }
.f-fit-col li {
  display: flex; gap: 12px; align-items: baseline;
  font-size: 15px; line-height: 1.5; padding: 13px 0; border-bottom: 1px solid var(--border);
}
.f-fit-yes li::before { content: "\2713"; color: var(--teal); font-weight: 700; flex: none; }
.f-fit-no li::before { content: "\2715"; color: #C3C6CE; font-weight: 700; flex: none; }
.f-fit-no { background: var(--bg-cool); }
.f-fit-no li { color: var(--gray); }

/* Sticky mobile CTA bar */
.f-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: rgba(16,16,22,0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,255,255,0.1);
  display: none; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  transform: translateY(120%); transition: transform .4s var(--ease);
}
.f-sticky.show { transform: none; }
.f-sticky-txt { color: var(--surface-light); font-size: 13px; line-height: 1.3; }
.f-sticky-txt b { display: block; font-size: 14.5px; color: #fff; font-weight: 600; }
.f-sticky .btn { flex: none; padding: 12px 22px; }
@media (max-width: 760px) { .f-sticky { display: flex; } }
@media (prefers-reduced-motion: reduce) { .f-sticky { transition: none; } }

/* V2 headline is longer than v1's: let the accent line wrap on mobile */
@media (max-width: 640px) {
  .f-hero h1 .accent { white-space: normal; font-size: 0.9em; }
}


/* Client proof on the booking page: three across on desktop, stacked on
   mobile. The practitioner note below is deliberately not in the grid, it
   sets expectations for the call rather than serving as social proof. */
.ap-quotes {
  max-width: var(--container); margin: 64px auto 0; padding: 0 24px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: stretch;
}
.ap-quotes .ap-quote { max-width: none; margin: 0; padding: 26px 22px; text-align: left;
  display: flex; flex-direction: column;
  background: var(--bg-light); border: 1px solid var(--border); border-radius: var(--radius); }
.ap-quotes .ap-quote p { font-size: 17px; line-height: 1.5; }
.ap-quotes .ap-quote .ap-who { justify-content: flex-start; margin-top: auto; padding-top: 18px; }
.ap-quotes-disc { max-width: var(--container); margin: 18px auto 0; padding: 0 24px;
  font-size: 12.5px; line-height: 1.5; color: var(--gray); text-align: center; }
.ap-quote--note { margin-top: 48px; }
@media (max-width: 860px) {
  .ap-quotes { grid-template-columns: 1fr; gap: 20px; }
}