/* Lead funnel: every CTA opens this 3-step popup. Monochrome, glass, page fonts. */
.fn { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; visibility: hidden; }
.fn.open { visibility: visible; }
.fn-back { position: absolute; inset: 0; background: rgba(9,9,11,.42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity .35s; }
.fn.open .fn-back { opacity: 1; }
.fn-box { position: relative; width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow: auto; border-radius: 28px; background: #fff; padding: 30px 28px 26px;
  box-shadow: 0 1px 2px rgba(9,9,11,.08), 0 30px 80px -20px rgba(9,9,11,.5), inset 0 0 0 1px rgba(9,9,11,.06);
  opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .35s cubic-bezier(.2,.8,.2,1), transform .45s cubic-bezier(.2,.8,.2,1); }
.fn.open .fn-box { opacity: 1; transform: none; }
.fn-x { position: absolute; right: 14px; top: 14px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--mist); cursor: pointer; display: grid; place-items: center; color: var(--ink); }
.fn-x svg { width: 16px; height: 16px; }
.fn-bar { height: 4px; border-radius: 4px; background: var(--mist); overflow: hidden; margin: 4px 50px 22px 0; }
.fn-bar i { display: block; height: 100%; width: 33%; background: #09090b; border-radius: 4px; transition: width .5s cubic-bezier(.2,.8,.2,1); }
.fn-k { font: 600 .74rem/1 var(--sf); letter-spacing: .16em; text-transform: uppercase; color: var(--soft); }
.fn h2 { margin: 10px 0 6px; font: 700 clamp(1.6rem, 4.5vw, 2rem)/1.08 var(--sf); letter-spacing: -.045em; color: var(--ink); }
.fn-sub { margin: 0 0 20px; color: var(--text); font: 400 .98rem/1.5 var(--sf); }
.fn-step { display: none; }
.fn-step.on { display: block; animation: fn-in .4s cubic-bezier(.2,.8,.2,1); }
@keyframes fn-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.fn-lbl { display: block; margin: 16px 0 8px; font: 600 .86rem/1.2 var(--sf); color: var(--ink); }
.fn-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fn-chip { position: relative; }
.fn-chip input { position: absolute; opacity: 0; pointer-events: none; }
.fn-chip span { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 14px; cursor: pointer; font: 500 .95rem/1 var(--sf); color: var(--ink);
  background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); transition: background .2s, box-shadow .2s, color .2s; }
.fn-chip span svg { width: 18px; height: 18px; }
.fn-chip input:checked + span { background: #09090b; color: #fff; box-shadow: none; }
.fn-chip input:focus-visible + span { outline: 2px solid #09090b; outline-offset: 2px; }
.fn input[type="text"], .fn input[type="email"], .fn input[type="tel"] { width: 100%; height: 50px; padding: 0 16px; border-radius: 14px; border: 0; font: 400 1rem/1 var(--sf); color: var(--ink);
  background: var(--mist); box-shadow: inset 0 0 0 1px var(--line); outline: none; transition: box-shadow .2s, background .2s; }
.fn input:focus { background: #fff; box-shadow: inset 0 0 0 2px #09090b; }
.fn input.bad { box-shadow: inset 0 0 0 2px #dc2626; }
.fn-opt { font-weight: 400; color: var(--soft); }
.fn-ok { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font: 400 .84rem/1.45 var(--sf); color: var(--text); cursor: pointer; }
.fn-ok input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: #09090b; flex: none; }
.fn-ok a { color: var(--ink); }
.fn-nav { display: flex; gap: 10px; margin-top: 24px; }
.fn-nav .btn { flex: 1; height: 52px; }
.fn-nav .btn.ghost { flex: 0 0 auto; }
.fn-err { min-height: 1.2em; margin: 10px 0 0; font: 500 .84rem/1.3 var(--sf); color: #dc2626; }
.fn-done { text-align: center; padding: 20px 0 6px; }
.fn-done .fn-check { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%; background: #09090b; color: #fff; display: grid; place-items: center; animation: fn-pop .6s cubic-bezier(.2,1.4,.4,1); }
.fn-done .fn-check svg { width: 28px; height: 28px; }
@keyframes fn-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.fn-trust { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; margin-top: 18px; font: 500 .78rem/1 var(--sf); color: var(--soft); }
.fn-trust span::before { content: "✓ "; color: var(--ink); }
html.fn-lock { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .fn-box, .fn-back, .fn-step.on { transition: none; animation: none; } }

/* Google rating badge (only shown with real values from config.google). */
.gr { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: var(--radius); background: #fff; text-decoration: none; color: var(--ink);
  box-shadow: 0 0 0 1px var(--line), 0 10px 24px -16px rgba(9,9,11,.35); font: 500 .85rem/1 var(--sf); }
.gr svg.g { width: 20px; height: 20px; }
.gr b { font-weight: 700; }
.gr .st { color: var(--ink); letter-spacing: 1px; font-size: .95rem; }
.gr small { color: var(--soft); font-size: .8rem; }
.hero .gr { margin-top: 26px; }