/* ============================================================
   FUNNELS DESIGN SYSTEM — Abanoub Fahim · conversion funnels
   Shared tokens + components. Per-funnel variation via body classes:
   .f-clinics / .f-home / .f-b2b
   Palette: emerald #059669 · ink #111111 · paper #ffffff · stone #f5f5f5 · gray #6B7280
   type: Geist (400–700, self-hosted) + Instrument Serif italic accents
   ============================================================ */

/* ---------- fonts ---------- */
@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/instrument-serif-latin-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  --green: #059669;
  --green-dark: #047857;
  --green-deep: #065f46;
  --green-soft: #ecfdf5;
  --green-tint: #f0fdf7;
  --ink: #111111;
  --ink-70: #374151;
  --gray: #6b7280;
  --gray-soft: #9ca3af;
  --line: #e5e7eb;
  --line-soft: #eef0f2;
  --paper: #ffffff;
  --stone: #f5f5f5;
  --stone-2: #fafafa;
  --focus: color-mix(in srgb, var(--green) 35%, white);

  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  --radius-s: 10px;
  --radius-m: 14px;
  --radius-l: 20px;
  --radius-xl: 28px;

  --shadow-s: 0 1px 2px rgb(17 17 17 / .05), 0 2px 10px rgb(17 17 17 / .05);
  --shadow-m: 0 2px 6px rgb(17 17 17 / .05), 0 14px 34px rgb(17 17 17 / .08);
  --shadow-l: 0 6px 18px rgb(17 17 17 / .07), 0 28px 60px rgb(17 17 17 / .12);
  --shadow-green: 0 8px 22px rgb(5 150 105 / .28);

  --container: 1120px;
  --section-pad: clamp(64px, 9vw, 116px);
  --header-h: 64px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; letter-spacing: inherit; }
:focus-visible { outline: 2.5px solid var(--green); outline-offset: 2px; border-radius: 4px; }
::selection { background: rgb(5 150 105 / .18); }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(20px, 4.4vw, 28px); }
.section { padding-block: var(--section-pad); }
.section--stone { background: var(--stone); }
.section--stone2 { background: var(--stone-2); }
.main { overflow-wrap: normal; }

.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;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 0 0 10px 10px;
  font-size: .85rem; transition: top .2s ease;
}
.skip-link:focus { top: 0; }

/* ---------- typography ---------- */
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 600; letter-spacing: -.02em; line-height: 1.12; }
.display-1 {
  font-size: clamp(2.35rem, 1.1rem + 5.3vw, 4.15rem);
  line-height: 1.05; letter-spacing: -.028em; font-weight: 640;
}
.display-2 {
  font-size: clamp(1.75rem, 1.15rem + 2.5vw, 2.75rem);
  line-height: 1.12; font-weight: 640;
}
.display-3 { font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.65rem); line-height: 1.25; }
.acc { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -.005em; }
p { margin: 0; }
.lead { font-size: clamp(1.04rem, .98rem + .4vw, 1.2rem); color: var(--ink-70); line-height: 1.72; }
.fineprint { font-size: .84rem; color: var(--gray); line-height: 1.55; }
.mono-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 650;
  letter-spacing: .12em; text-transform: uppercase; color: var(--green-deep);
}
.mono-label::before {
  content: ""; flex: 0 0 22px; height: 2px; border-radius: 2px;
  background: var(--green);
}
.kicker {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 18px; font-size: .8rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--green-dark);
}
.kicker::before {
  content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%;
  background: var(--green); flex-shrink: 0; margin-top: 1px;
}
.kicker--onink { color: #6ee7b7; }
.kicker--onink::before { background: #34d399; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 999px; border: 1.5px solid transparent;
  font-weight: 600; letter-spacing: -.01em; line-height: 1;
  text-align: center; white-space: nowrap; min-width: 0;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
  min-height: 50px; padding: 15px 26px; font-size: .985rem;
}
.btn--primary { background: var(--green); color: #fff; }
.btn--primary:hover { background: var(--green-dark); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: #000; }
.btn--ghost { background: transparent; color: var(--ink); border-color: color-mix(in srgb, var(--ink) 22%, transparent); }
.btn--ghost:hover { border-color: var(--ink); background: rgb(17 17 17 / .05); }
.btn--ghost-inv { background: transparent; color: #fff; border-color: rgb(255 255 255 / .34); }
.btn--ghost-inv:hover { border-color: rgb(255 255 255 / .72); background: rgb(255 255 255 / .08); }
.btn--lg { min-height: 58px; padding: 18px 32px; font-size: 1.03rem; }
.btn--sm { min-height: 42px; padding: 9px 18px; font-size: .9rem; }
.btn .arrow { transition: transform .18s ease; }
.btn .bicon { flex-shrink: 0; }

/* long-label buttons: scale down on small screens so text never wraps or bleeds */
.sticky-lbl--short { display: none; }
@media (max-width: 429.98px) {
  .hero__actions .btn, .lf-cta .btn, .sticky-cta .btn { font-size: .95rem; padding: 14px 18px; }
}
@media (max-width: 559.98px) {
  .lf-cta .btn { width: 100%; }
}
@media (max-width: 379.98px) {
  .hero__actions .btn, .lf-cta .btn, .sticky-cta .btn { font-size: .84rem; padding: 12px 14px; min-height: 48px; }
  .hero__actions .btn .bicon, .lf-cta .btn .bicon, .sticky-cta .btn .bicon { display: none; }
  .sticky-lbl--full { display: none; }
  .sticky-lbl--short { display: inline; }
}
.btn:hover .arrow { transform: translate(2.5px, -2.5px); }
.btn--down:hover .arrow { transform: translateY(2.5px); }
.btn[disabled] { opacity: .55; pointer-events: none; }
.btn--lg { min-height: 58px; padding: 18px 32px; font-size: 1.03rem; }
.btn--sm { min-height: 42px; padding: 9px 18px; font-size: .9rem; }
.btn .arrow { transition: transform .18s ease; }
.btn:hover .arrow { transform: translate(2.5px, -2.5px); }
.btn--down:hover .arrow { transform: translateY(2.5px); }
.btn[disabled] { opacity: .55; pointer-events: none; }

.text-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; color: var(--ink); border-bottom: 1.5px solid rgb(5 150 105 / .5);
  padding-bottom: 2px; transition: color .15s ease, border-color .15s ease;
}
.text-link:hover { color: var(--green-dark); border-color: var(--green); }
.text-link .arrow { color: var(--green); }

/* ---------- header ---------- */
.fnav {
  position: sticky; top: 0; z-index: 90;
  background: rgb(255 255 255 / .88);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.fnav__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand__mark {
  inline-size: 38px; block-size: 38px; border-radius: 11px;
  background: var(--ink); color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: .82rem; letter-spacing: .02em;
}
.brand__name { display: block; font-weight: 640; font-size: .96rem; letter-spacing: -.01em; line-height: 1.2; }
.brand__role { display: block; font-size: .74rem; color: var(--gray); line-height: 1.35; }
.fnav__right { display: flex; align-items: center; gap: 18px; }
.fnav__context { display: none; }
.fnav__email {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .86rem; font-weight: 600; color: var(--ink-70);
}
.fnav__email:hover { color: var(--green-dark); }
@media (min-width: 760px) {
  .fnav__context { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--gray); }
  .fnav__context b { color: var(--ink); font-weight: 620; }
  .fnav__email { display: none; }
}
@media (max-width: 759.98px) {
  .fnav__role { display: none; }
}

/* ---------- fact bar (verified stats strip) ---------- */
.factbar { border-block: 1px solid var(--line-soft); }
.factbar__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; padding-block: 30px; }
@media (min-width: 860px) { .factbar__grid { grid-template-columns: repeat(4, 1fr); padding-block: 34px; } }
.factbar .fact__label { font-size: .8rem; font-weight: 550; color: var(--gray); line-height: 1.45; display: block; margin-bottom: 4px; }
.factbar .fact__value { font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem); font-weight: 640; color: var(--green-dark); margin: 0; letter-spacing: -.015em; white-space: nowrap; }
.factbar dd, .factbar dt { margin: 0; }

@media (max-width: 859.98px) {
  .factbar__grid > .fact:nth-last-child(-n + 1) { display: none; }
}
@media (max-width: 479.98px) {
  .factbar__grid > .fact:nth-last-child(-n + 2) { display: none; }
}

/* ---------- hero variants ---------- */
.hero { position: relative; overflow: clip; padding-block: clamp(46px, 7vw, 88px) clamp(52px, 7vw, 92px); }
.hero--band { background:
  radial-gradient(1100px 480px at 82% -12%, rgb(5 150 105 / .075), transparent 62%),
  var(--stone-2); }

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid color-mix(in srgb, var(--green) 32%, transparent);
  background: var(--green-tint); color: var(--green-deep);
  border-radius: 999px; padding: 8px 16px;
  font-size: .74rem; font-weight: 650; letter-spacing: .13em; text-transform: uppercase;
  margin: 0 0 22px;
}
.hero__eyebrow::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--green); }
.hero__sub { margin-top: 22px; max-width: 58ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 30px; }
.hero__micro {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 18px; font-size: .84rem; color: var(--gray); max-width: 52ch; line-height: 1.55;
}
.hero__micro svg { flex-shrink: 0; margin-top: 2.5px; color: var(--green); }

/* hero markets chips */
.markets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.markets span {
  font-size: .8rem; font-weight: 560; color: var(--ink-70);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 13px;
}

/* hero image treatments */
.hero__media { position: relative; }
.hero__media img { border-radius: var(--radius-l); box-shadow: var(--shadow-l); object-fit: cover; }
.hero__media::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-l);
  box-shadow: inset 0 0 0 1px rgb(17 17 17 / .07); pointer-events: none; }
.hero__badge {
  position: absolute; z-index: 2; left: -14px; bottom: -16px;
  background: var(--paper); border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-m); border-radius: var(--radius-m);
  padding: 12px 16px; display: flex; align-items: center; gap: 11px; max-width: min(320px, 84%);
}
.hero__badge-num { font-weight: 660; color: var(--green-dark); font-size: 1.28rem; letter-spacing: -.02em; }
.hero__badge-text { font-size: .8rem; color: var(--ink-70); line-height: 1.35; }

/* clinics: centered stack */
.hero--clinics { text-align: center; }
.hero--clinics .hero__sub, .hero--clinics .hero__micro { margin-inline: auto; }
.hero--clinics .hero__actions { justify-content: center; }
.hero--clinics .markets { justify-content: center; }
.hero--clinics .hero__grid { display: grid; gap: 40px; }
.hero--clinics .hero__media { max-width: 880px; margin-inline: auto; width: 100%; }
.hero--clinics .hero__media img { aspect-ratio: 16 / 10; width: 100%; }
@media (min-width: 920px) { .hero--clinics .hero__media img { aspect-ratio: 16 / 8.4; } }
@media (min-width: 720px) {
  .hero--clinics .hero__badge { left: 28px; right: auto; }
}

/* home: split photo right */
.hero--home .hero__grid { display: grid; gap: 44px; align-items: center; }
@media (min-width: 940px) {
  .hero--home .hero__grid { grid-template-columns: 1.06fr .94fr; gap: clamp(36px, 5vw, 68px); align-items: start; }
  .hero--home .hero__copy { padding-top: 14px; }
}
.hero--home .hero__media img { aspect-ratio: 16 / 11.5; width: 100%; }
.hero--home .hero__media::before {
  content: ""; position: absolute; inset: 18px -18px -18px 18px;
  border-radius: var(--radius-l); background: linear-gradient(135deg, rgb(5 150 105 / .12), rgb(17 17 17 / .07));
  z-index: -1;
}
@media (min-width: 940px) {
  .hero--home .hero__media::before { inset: 22px -22px -22px 22px; }
}

/* b2b: editorial with mono labels + offset frame */
.hero--b2b .hero__grid { display: grid; gap: 44px; }
@media (min-width: 940px) {
  .hero--b2b .hero__grid { grid-template-columns: 1.08fr .92fr; align-items: center; gap: clamp(40px, 5.5vw, 72px); }
}
.hero--b2b .hero__heads { display: grid; gap: 6px; margin-bottom: -6px; }
.hero--b2b .hero__meta-row {
  display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 26px; padding-top: 20px;
  border-top: 1px solid var(--line);
}
.hero--b2b .hero__meta div { font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--gray); margin-bottom: 3px; }
.hero--b2b .hero__meta b { display: block; font-size: .9rem; color: var(--ink); font-weight: 620; letter-spacing: -.01em; }
.hero--b2b .hero__media { position: relative; }
.hero--b2b .hero__media img { aspect-ratio: 16 / 11.5; width: 100%; }
.hero--b2b .hero__frame {
  position: absolute; inset: 16px -16px -16px 16px; z-index: -1;
  border: 1.5px solid color-mix(in srgb, var(--green) 35%, transparent); border-radius: var(--radius-l);
}

/* ---------- audience chips (home services trades) ---------- */
.audience { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.audience span {
  font-size: .82rem; font-weight: 560; color: var(--ink-70);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 9px; padding: 7px 13px;
}

/* ---------- why media block ---------- */
.why__media { display: grid; gap: 12px; margin-top: 6px; max-width: 420px; }
.why__media img { border-radius: var(--radius-m); box-shadow: var(--shadow-m); aspect-ratio: 4 / 4.3; width: 100%; object-fit: cover; }
.why__media figcaption { font-size: .8rem; color: var(--gray); line-height: 1.5; }

/* ---------- process note filler ---------- */
.step--note .step__num { border-style: dashed; color: var(--green); background: var(--green-tint); }
.f-b2b .step--note .step__num, .f-home .step--note .step__num {
  border: 1.5px dashed color-mix(in srgb, var(--green) 40%, transparent);
  background: var(--green-tint); border-radius: 12px; padding: 10px 14px;
  width: fit-content; justify-self: start;
}
.f-b2b .step--note h3, .f-home .step--note h3 { color: var(--green-dark); }

/* ---------- generic section head ---------- */
.shead { display: grid; gap: 14px; max-width: 780px; }
.shead--center { margin-inline: auto; text-align: center; justify-items: center; }
.shead .intro { font-size: 1.02rem; color: var(--ink-70); max-width: 62ch; }

/* ---------- pain list ---------- */
.painlist { display: grid; gap: 14px; margin-top: clamp(34px, 5vw, 54px); counter-reset: pain; }
@media (min-width: 900px) {
  .painlist { gap: 12px; }
  .f-clinics .painlist { grid-template-columns: repeat(2, 1fr); }
  .f-clinics .pain:nth-child(5) { grid-column: 1 / -1; }
}
.pain {
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--paper); border: 1px solid var(--line-soft);
  border-radius: var(--radius-m); padding: 22px 24px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.pain:hover { border-color: color-mix(in srgb, var(--green) 34%, var(--line)); box-shadow: var(--shadow-s); }
.pain__num {
  counter-increment: pain;
  flex-shrink: 0; inline-size: 34px; block-size: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--green-soft); color: var(--green-deep);
  font-weight: 640; font-size: .9rem;
}
.pain__num::before { content: "0" counter(pain); }
.pain h3 { font-size: 1.04rem; line-height: 1.3; margin-bottom: 6px; }
.pain p { font-size: .94rem; color: var(--ink-70); }
.f-home .pain__num { background: var(--ink); color: #fff; border-radius: 999px; }
.f-b2b .pain { display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto auto; gap: 2px 16px; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 24px 6px; }
.f-b2b .pain__num { background: none; color: var(--gray); font-family: var(--font-mono); font-size: .8rem; letter-spacing: .08em; grid-row: 1 / span 2; padding-top: 3px; }
.f-b2b .pain:last-child { border-bottom: 0; }
.f-b2b .pain__main { grid-column: 2; }
.f-b2b .pain__body { grid-column: 2; }
.f-b2b .pain:hover { border-color: var(--line); box-shadow: none; }
@media (min-width: 900px) {
  .f-b2b .pain { grid-template-columns: 100px 1fr 1.4fr; grid-template-rows: none; align-items: baseline; gap: 10px 26px; }
  .f-b2b .pain__num { grid-row: auto; padding-top: 0; }
  .f-b2b .pain__main { grid-column: auto; }
  .f-b2b .pain__body { grid-column: auto; }
}
.pain__close { margin-top: clamp(26px, 4vw, 40px); }

/* ---------- pillars (system components) ---------- */
.pillars { display: grid; gap: 14px; margin-top: clamp(36px, 5vw, 56px); }
@media (min-width: 700px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .pillars--4 { grid-template-columns: repeat(4, 1fr); } }
.pillar { position: relative; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--radius-m); padding: 26px 24px 28px; }
.section--stone .pillar, .section--stone2 .pillar { background: var(--paper); }
.pillar__num {
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .1em; color: var(--green-dark);
  display: block; margin-bottom: 14px;
}
.pillar h3 { font-size: 1.06rem; margin-bottom: 9px; }
.pillar p { font-size: .93rem; color: var(--ink-70); }
.pillar::after {
  content: ""; position: absolute; inset: auto 24px 0 24px; height: 2.5px;
  background: var(--green); border-radius: 3px 3px 0 0; opacity: .16; transition: opacity .2s ease;
}
.pillar:hover::after { opacity: .8; }

/* ---------- services grid ---------- */
.services { display: grid; gap: 14px; margin-top: clamp(36px, 5vw, 52px); }
@media (min-width: 660px) { .services { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .services--5 { grid-template-columns: repeat(3, 1fr); } .services--5 .service:nth-last-child(-n+2) { grid-template-columns: 1fr; } }
@media (min-width: 1000px) {
  .services--5 .service:last-child { grid-column: span 1; }
  .services--5 { grid-template-columns: repeat(6, 1fr); }
  .services--5 .service { grid-column: span 2; }
  .services--5 .service:nth-child(4), .services--5 .service:nth-child(5) { grid-column: span 3; }
}
@media (min-width: 1000px) { .services--6 { grid-template-columns: repeat(3, 1fr); } }
.service {
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--radius-m);
  padding: 26px 24px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.service:hover { transform: translateY(-3px); box-shadow: var(--shadow-s); border-color: color-mix(in srgb, var(--green) 30%, var(--line)); }
.service__icon {
  inline-size: 42px; block-size: 42px; border-radius: 12px;
  background: var(--green-soft); color: var(--green-dark);
  display: grid; place-items: center; margin-bottom: 18px;
}
.service h3 { font-size: 1.02rem; margin-bottom: 8px; }
.service p { font-size: .93rem; color: var(--ink-70); }

/* ---------- why module ---------- */
.why__grid { display: grid; gap: clamp(30px, 4.5vw, 54px); margin-top: clamp(30px, 4vw, 44px); }
@media (min-width: 900px) { .why__grid { grid-template-columns: 1.02fr .98fr; align-items: start; } }
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.points li { display: flex; gap: 12px; align-items: flex-start; font-size: .97rem; color: var(--ink-70); }
.points li::before {
  content: ""; flex-shrink: 0; margin-top: 9px; inline-size: 7px; block-size: 7px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 0 3.5px var(--green-soft);
}
.why__card {
  background: var(--ink); color: #fff; border-radius: var(--radius-l);
  padding: clamp(26px, 4vw, 38px);
}
.why__card .kicker { color: #6ee7b7; }
.why__card h3 { color: #fff; font-size: 1.2rem; margin-bottom: 16px; }
.why__card-points { margin-top: 18px; }
.why__card-points li { font-size: .92rem; color: rgb(255 255 255 / .82); }
.why__card li::before { background: #34d399; box-shadow: 0 0 0 3.5px rgb(52 211 153 / .16); }
.why__note {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid rgb(255 255 255 / .14);
  font-size: .9rem; color: rgb(255 255 255 / .78);
}
.why__note b { color: #fff; }

/* ---------- process ---------- */
.process { position: relative; max-width: 760px; margin-top: clamp(36px, 5vw, 52px); }
.process::before { content: ""; position: absolute; left: 26px; top: 12px; bottom: 12px; width: 1.5px; background: var(--line); }
@media (min-width: 760px) { .process::before { left: 31px; } }
.step { position: relative; display: grid; grid-template-columns: 53px 1fr; gap: 18px; padding-bottom: clamp(26px, 4vw, 38px); }
.step:last-child { padding-bottom: 0; }
.step__num {
  inline-size: 53px; block-size: 53px; border-radius: 17px;
  background: var(--paper); border: 1px solid var(--line);
  display: grid; place-items: center;
  font-weight: 640; color: var(--green-dark); font-size: 1.02rem;
  box-shadow: var(--shadow-s); z-index: 1;
}
.step h3 { font-size: 1.08rem; margin-bottom: 7px; padding-top: 4px; }
.step p { font-size: .95rem; color: var(--ink-70); }
@media (min-width: 760px) {
  .f-b2b .process, .f-home .process { max-width: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .f-b2b .process::before, .f-home .process::before { display: none; }
  .f-b2b .step, .f-home .step { grid-template-columns: 1fr; gap: 10px; padding-bottom: 0; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--radius-m); padding: 24px 22px; }
  .f-b2b .step__num, .f-home .step__num { inline-size: auto; block-size: auto; border: 0; background: none; box-shadow: none; padding: 0; justify-items: start; font-family: var(--font-mono); font-size: .8rem; letter-spacing: .1em; }
  .f-b2b .step h3, .f-home .step h3 { padding-top: 0; margin-bottom: 4px; }
  .f-home .step:nth-child(n+4) { grid-column: span 1; }
}

/* ---------- fit (qualification) ---------- */
.fit { display: grid; gap: 16px; margin-top: clamp(34px, 5vw, 50px); }
@media (min-width: 860px) { .fit { grid-template-columns: 1fr 1fr; } }
.fit__card { border-radius: var(--radius-l); padding: clamp(26px, 3.6vw, 36px); }
.fit__card--yes { background: var(--green-tint); border: 1px solid color-mix(in srgb, var(--green) 26%, transparent); }
.fit__card--no { background: var(--paper); border: 1px dashed var(--line); }
.fit__head { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; }
.fit__head h3 { font-size: 1.1rem; }
.fit__pin { inline-size: 34px; block-size: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.fit__card--yes .fit__pin { background: var(--green); color: #fff; }
.fit__card--no .fit__pin { background: var(--stone); color: var(--gray); }
.fit__card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.fit__card li { display: flex; gap: 11px; font-size: .95rem; color: var(--ink-70); align-items: flex-start; }
.fit__sign { flex-shrink: 0; margin-top: 5px; }
.fit__card--yes .fit__sign { color: var(--green); }
.fit__card--no .fit__sign { color: var(--gray-soft); }

/* ---------- conversion form ---------- */
.assess { scroll-margin-top: calc(var(--header-h) + 12px); }
.assess__band { background: var(--ink); color: #fff; }
.assess__grid { display: grid; gap: clamp(30px, 4.5vw, 60px); }
@media (min-width: 960px) { .assess__grid { grid-template-columns: .82fr 1.18fr; align-items: start; } }
.assess__copy h2 { color: #fff; }
.assess__copy .lead { color: rgb(255 255 255 / .8); margin-top: 16px; }
.assess__steps-note { margin-top: 26px; display: grid; gap: 11px; }
.assess__steps-note li { font-size: .93rem; color: rgb(255 255 255 / .78); }
.assess__steps-note li::before { background: #34d399; box-shadow: 0 0 0 3.5px rgb(52 211 153 / .14); }
.assess__dir { margin-top: 26px; font-size: .88rem; color: rgb(255 255 255 / .62); }
.assess__dir b { color: #fff; font-weight: 620; }

.mform {
  background: var(--paper); color: var(--ink);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-l);
  padding: clamp(22px, 3.4vw, 36px);
  position: relative;
}
.mform__progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; }
.mform__bar { grid-column: 1 / -1; height: 5px; background: var(--line-soft); border-radius: 999px; overflow: hidden; }
.mform__bar span {
  display: block; height: 100%; width: 25%;
  background: linear-gradient(90deg, var(--green), var(--green-dark));
  border-radius: 999px; transition: width .3s ease;
}
.mform__labels { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mform__labels span {
  font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gray-soft); text-align: center; line-height: 1.3;
}
.mform__labels span[aria-current="step"] { color: var(--green-dark); }
@media (min-width: 640px) { .mform__labels span { font-size: .72rem; } }

.mform__step { display: grid; gap: 18px; margin-top: 20px; }
.mform__step[hidden] { display: none; }
.fgrid { display: grid; gap: 16px; }
@media (min-width: 620px) {
  .fgrid--2 { grid-template-columns: 1fr 1fr; }
  .fgrid .field--full { grid-column: 1 / -1; }
}
.field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.field label, .field .field__label {
  font-size: .86rem; font-weight: 620; letter-spacing: -.005em; color: var(--ink);
}
.field .req { color: var(--green-dark); font-weight: 700; }
.field .opt { color: var(--gray-soft); font-weight: 500; font-size: .76rem; }
.field input, .field select, .field textarea {
  width: 100%; border: 1.5px solid var(--line); border-radius: var(--radius-s);
  background: var(--stone-2); color: var(--ink);
  padding: 12.5px 14px; font-size: .97rem; line-height: 1.4;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
  appearance: none; -webkit-appearance: none;
}
.field input::placeholder, .field textarea::placeholder { color: var(--gray-soft); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--green); background: #fff; outline: none;
  box-shadow: 0 0 0 3.5px rgb(5 150 105 / .13);
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%236B7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 40px;
}
.field textarea { resize: vertical; min-height: 92px; }
.field__hint { font-size: .78rem; color: var(--gray); }
.field__err {
  display: none; font-size: .8rem; font-weight: 550; color: #b91c1c;
}
.field[data-invalid] input, .field[data-invalid] select, .field[data-invalid] textarea { border-color: #dc2626; background: #fef2f2; }
.field[data-invalid] .field__err { display: inline-flex; align-items: center; gap: 5px; }
.mform .hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* choice cards */
.choices { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.choices--grid { grid-template-columns: 1fr; }
@media (min-width: 720px) { .choices--grid { grid-template-columns: 1fr 1fr; } }
.choices--grid > li { display: grid; }        /* per-row equal heights */
.choices--grid .choice { height: 100%; }
.choice { position: relative; display: flex; align-items: center; gap: 11px; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: var(--radius-s);
  background: var(--stone-2); padding: 13px 16px; font-size: .93rem; line-height: 1.4; color: var(--ink-70);
  transition: border-color .14s ease, background-color .14s ease, color .14s ease;
}
.choice:hover { border-color: color-mix(in srgb, var(--green) 45%, var(--line)); }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.choice__mark {
  inline-size: 19px; block-size: 19px; flex-shrink: 0; border: 1.5px solid var(--gray-soft);
  background: #fff; display: grid; place-items: center; transition: all .14s ease;
}
input[type="radio"] + .choice__mark { border-radius: 50%; }
input[type="checkbox"] + .choice__mark { border-radius: 5px; }
.choice__mark svg { opacity: 0; transform: scale(.5); transition: all .14s ease; }
.choice:has(input:checked) { border-color: var(--green); background: var(--green-tint); color: var(--ink); font-weight: 560; }
.choice:has(input:checked) .choice__mark { background: var(--green); border-color: var(--green); }
.choice:has(input:checked) .choice__mark svg { opacity: 1; transform: scale(1); }
.choice:has(input:focus-visible) { outline: 2.5px solid var(--green); outline-offset: 2px; }
.choices[data-invalid] > .choice { border-color: #dc2626; }
.choices[data-invalid] ~ .field__err { display: inline-flex; align-items: center; gap: 5px; }

.mform__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 12px; margin-top: 8px; align-items: center; }
.mform__nav > .btn { grid-column: 1 / -1; min-width: 0; white-space: nowrap; }
.mform__back { justify-self: start; }
.mform__stepcount { justify-self: end; }
@media (max-width: 719.98px) {
  .mform__nav { row-gap: 8px; }
  .mform__nav > .btn { font-size: .95rem; padding: 12px 14px; }
  .mform__nav > .btn .arrow { display: none; }
}
.mform__back {
  display: inline-flex; align-items: center; gap: 7px; background: none; border: 0;
  font-size: .9rem; font-weight: 600; color: var(--gray); padding: 10px 6px;
}
.mform__back:hover { color: var(--ink); }
.mform__back[hidden] { visibility: hidden; }
.mform__stepcount { margin-left: auto; font-size: .78rem; color: var(--gray); font-variant-numeric: tabular-nums; }

.mform__foot {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft);
  font-size: .8rem; color: var(--gray); line-height: 1.6;
}
.mform__foot b { color: var(--ink-70); font-weight: 600; }

/* success */
.fdone { display: none; text-align: center; padding: clamp(10px, 2vw, 18px) 0 6px; }
.fdone.show { display: block; }
.fdone__mark {
  inline-size: 64px; block-size: 64px; border-radius: 50%;
  background: var(--green-soft); color: var(--green-dark);
  display: grid; place-items: center; margin: 0 auto 20px;
  box-shadow: 0 0 0 10px rgb(5 150 105 / .07);
}
.fdone h3 { font-size: clamp(1.35rem, 1.1rem + 1.4vw, 1.8rem); margin-bottom: 12px; }
.fdone p { color: var(--ink-70); font-size: .98rem; max-width: 50ch; margin-inline: auto; }
.fdone__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.fdone__next { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.fdone__next ol { max-width: 46ch; margin: 14px auto 0; text-align: left; }
.fdone__next li { font-size: .92rem; }
.fdone .fineprint { margin-top: 20px; }

/* ---------- final cta band ---------- */
.final {
  background: var(--ink); color: #fff; text-align: center;
  position: relative; overflow: clip;
}
.final::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(760px 340px at 50% 118%, rgb(5 150 105 / .22), transparent 68%);
  pointer-events: none;
}
.final .kicker { justify-content: center; }
.final h2 { color: #fff; max-width: 21ch; margin-inline: auto; }
.final .lead { color: rgb(255 255 255 / .78); max-width: 56ch; margin: 18px auto 0; }
.final__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 13px; margin-top: 32px; }
.final__micro { margin-top: 20px; font-size: .85rem; color: rgb(255 255 255 / .55); }

/* ---------- sticky mobile cta ---------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  padding: 10px max(14px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-right));
  background: rgb(255 255 255 / .93); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line-soft);
  transform: translateY(110%); transition: transform .28s ease;
}
.sticky-cta.show { transform: translateY(0); }
.sticky-cta__inner { display: flex; align-items: center; gap: 12px; }
.sticky-cta__label { font-size: .8rem; color: var(--gray); line-height: 1.3; display: none; }
@media (min-width: 720px) { .sticky-cta__label { display: block; max-width: 230px; } }
.sticky-cta .btn { flex: 1; }
@media (max-width: 559.98px) { .sticky-cta .btn { width: 100%; } }

/* ---------- floating WhatsApp contact (bottom-right) ---------- */
.wa-float {
  position: fixed; right: 18px; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 130;
  display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%;
  background: #0b8060; color: #fff;
  box-shadow: 0 10px 26px rgb(8 102 77 / .32);
  transition: transform .15s ease, background-color .15s ease, bottom .28s ease;
}
.wa-float:hover { transform: translateY(-2px); background: #08664d; }
.wa-float:focus-visible { outline: 2.5px solid var(--green); outline-offset: 3px; }
.wa-float--lift { bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 559.98px) {
  .wa-float { width: 44px; height: 44px; right: 14px; }
}

/* transformation note under form for sticky spacing */
.sticky-spacer { height: 0; transition: height .28s ease; }

/* ---------- footer ---------- */
.fout { background: var(--stone); border-top: 1px solid var(--line-soft); padding-block: 34px; }
.fout__inner { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; }
.fout p { font-size: .84rem; color: var(--gray); }
.fout__links { display: flex; flex-wrap: wrap; gap: 18px; font-size: .84rem; color: var(--gray); }
.fout__links a { font-weight: 560; }
.fout__links a:hover { color: var(--green-dark); }

/* ---------- mid cta (repetition) ---------- */
.midcta { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 30px; justify-content: center;
  text-align: center; }
.midcta h3 { font-size: clamp(1.18rem, 1rem + 1vw, 1.5rem); max-width: 34ch; }

/* ---------- reveal on scroll ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rv { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
  .rv.show { opacity: 1; transform: none; }
}

/* ---------- promo announcement ticker (config.js : promo) ---------- */
/* Slim top band · premium dark forest green · white type · emerald accents.
   Track holds N identical groups; keyframe shifts exactly one group
   width (100/N %) so the loop repeats seamlessly with no gaps. */
.ticker {
  --tick-h: 36px;   /* desktop band height (34 to 38px window) */
  --tick-fs: .78rem;
  position: relative; z-index: 60;
  background: linear-gradient(90deg, #06281e, #0b3a2b 50%, #06281e);
  border-bottom: 1px solid rgb(52 211 153 / .16);
}
.ticker[hidden] { display: none; }
.ticker__link { display: flex; height: var(--tick-h); color: #f4fbf8; text-decoration: none; }
.ticker__link:focus-visible { outline-offset: -3px; }
.ticker__viewport {
  flex: 1; min-width: 0; display: flex; align-items: center; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ticker__track {
  display: flex; width: max-content;
  animation: ticker-scroll var(--ticker-dur, 32s) linear infinite;
}
.ticker__group { display: flex; align-items: center; }
.ticker__msg { display: inline-flex; align-items: baseline; white-space: nowrap; font-size: var(--tick-fs); }
.ticker__tag { margin-right: 6px; font-weight: 650; font-size: .70rem; letter-spacing: .09em; text-transform: uppercase; color: #6ee7b7; }
.ticker__text { font-weight: 500; letter-spacing: .012em; color: #f4fbf8; }
.ticker__dot {
  flex-shrink: 0; inline-size: 3px; block-size: 3px; border-radius: 50%;
  margin-inline: clamp(14px, 2.8vw, 28px);
  background: #34d399; opacity: .75;
}
/* pause on hover (and keyboard focus) */
.ticker:hover .ticker__track,
.ticker__link:focus-visible .ticker__track { animation-play-state: paused; }
@keyframes ticker-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(var(--ticker-shift, -50%), 0, 0); }
}
/* Reduced motion: no marquee. One static group, swipeable inside the bar
   (page never overflows horizontally). */
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
  .ticker__viewport { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; }
  .ticker__viewport::-webkit-scrollbar { display: none; }
  .ticker__group--dup { display: none; }
}
@media (max-width: 760px) {
  .ticker { --tick-h: 32px; --tick-fs: .72rem; }
}