/* ==========================================================================
   The Lead Gen Company — "The Growth Lab" (v2 design system)
   Dark laboratory aesthetic. Mono readouts, graph-paper grid, reactive lime.
   ========================================================================== */

:root {
  --bg:        #070b15;
  --bg-2:      #0a1020;
  --panel:     #0f1730;
  --panel-2:   #131d3b;
  --line:      rgba(150,180,255,.12);
  --line-2:    rgba(150,180,255,.22);
  --ink:       #eaf0fb;
  --ink-2:     #aab6d4;
  --ink-3:     #6f7da3;
  --lime:      #b8ff3a;
  --lime-2:    #d6ff7a;
  --lime-dim:  #7fae26;
  --cyan:      #54d8ff;
  --amber:     #ffb454;
  --danger:    #ff6b6b;
  --glow:      0 0 28px rgba(184,255,58,.40);
  --glow-sm:   0 0 14px rgba(184,255,58,.35);
  --orange:    #ff8c2b;
  --orange-2:  #ffa24f;
  --orange-glow: 0 0 24px rgba(255,140,43,.48);
  --mono:      'Space Mono', ui-monospace, SFMono-Regular, monospace;
  --sans:      'Space Grotesk', system-ui, -apple-system, sans-serif;
  --radius:    16px;
  --radius-sm: 11px;
  --ease:      cubic-bezier(.4,0,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* graph-paper grid that fades down the page */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(150,180,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150,180,255,.045) 1px, transparent 1px);
  background-size: 44px 44px;
}
/* faint radial lab-light glow top-centre */
body::after {
  content: "";
  position: fixed;
  top: -30%; left: 50%;
  width: 1100px; height: 700px;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(184,255,58,.10), transparent 62%);
  filter: blur(20px);
}

img { max-width: 100%; display: block; }
a { color: var(--lime); text-decoration: none; }
a:hover { color: var(--lime-2); }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 26px; position: relative; z-index: 1; }
.section { padding: 96px 0; position: relative; z-index: 1; }
@media (max-width: 720px) { .section { padding: 64px 0; } }

/* ---- type ------------------------------------------------------------- */
h1, h2, h3 { font-family: var(--sans); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; margin: 0; }
h1 { font-size: clamp(2.6rem, 1.5rem + 4.4vw, 5rem); }
h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.1rem); }
h3 { font-size: 1.25rem; letter-spacing: -.01em; }
p  { margin: 0; color: var(--ink-2); }

.label {
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--lime);
}
.label--muted { color: var(--ink-3); }
.label::before { content: "// "; opacity: .8; }

.hl { color: var(--lime); }
.hl-box { color: var(--bg); background: var(--lime); padding: 0 .14em; border-radius: 4px; box-decoration-break: clone; }

/* ---- buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -.01em;
  padding: 15px 26px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .12s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.btn--go {
  background: var(--lime);
  color: #08120a;
  box-shadow: var(--glow);
}
.btn--go:hover { color: #08120a; transform: translateY(-2px); box-shadow: 0 0 36px rgba(184,255,58,.6); }
.btn--go:active { transform: translateY(0); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
  box-shadow: none;
}
.btn--ghost:hover { color: var(--ink); border-color: var(--lime); background: rgba(184,255,58,.06); }

/* ---- header ----------------------------------------------------------- */
.lab-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7,11,21,.78);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.lab-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.brand { display: inline-flex; align-items: center; gap: 0; font-weight: 700; font-size: 1.32rem; letter-spacing: -.03em; color: var(--ink); }
/* The wordmark's two halves are separate flex items, so the container gap
   cannot be used for word spacing (it would also space the icon) and an HTML
   space would be stripped as flex-item trailing whitespace. .318em is the
   measured advance of a real space in this face at this tracking, so the gap
   before "Company" matches the gaps inside "The Lead Gen" exactly. */
.brand svg { margin-right: 10px; }
.brand b { margin-left: .318em; }
.brand b { color: var(--lime); font-weight: 700; }
.brand svg { width: 26px; height: 26px; }
.nav { display: flex; align-items: center; gap: 30px; }
.nav a.navlink { color: var(--ink-2); font-size: .95rem; font-weight: 500; }
.nav a.navlink:hover { color: var(--ink); }
/* ---- mobile navigation --------------------------------------------------
   The wordmark is far longer than the old one, so it must be told not to
   break: without this it wrapped onto three lines and overflowed the 70px
   header. Below 860px the links collapse into a burger dropdown.

   The dropdown is gated on .js-nav, which the script adds to <html>. With JS
   unavailable the links simply wrap into a row under the brand — navigation
   still works, which matters more here than it does for decoration.
   ------------------------------------------------------------------------ */
.brand { white-space: nowrap; }
.navtoggle { display: none; }

@media (max-width: 860px) {
  .lab-header .wrap { gap: 10px; }
  .brand { font-size: 1.04rem; }
  .brand svg { width: 21px; height: 21px; margin-right: 8px; }

  .navtoggle {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; width: 44px; height: 44px; margin-right: -10px;
    padding: 0; border: 0; background: none; color: var(--ink);
    cursor: pointer; -webkit-appearance: none; appearance: none;
  }
  .navtoggle:focus-visible { outline: 2px solid var(--lime); outline-offset: -4px; border-radius: 8px; }
  .navtoggle__bars { position: relative; display: block; width: 22px; height: 2px; }
  .navtoggle__bars, .navtoggle__bars::before, .navtoggle__bars::after {
    background: currentColor; border-radius: 2px;
    transition: transform .22s var(--ease), opacity .22s var(--ease), background .22s var(--ease);
  }
  .navtoggle__bars::before, .navtoggle__bars::after {
    content: ""; position: absolute; left: 0; width: 22px; height: 2px;
  }
  .navtoggle__bars::before { top: -7px; }
  .navtoggle__bars::after  { top: 7px; }
  .navtoggle[aria-expanded="true"] .navtoggle__bars { background: transparent; }
  .navtoggle[aria-expanded="true"] .navtoggle__bars::before { transform: translateY(7px) rotate(45deg); }
  .navtoggle[aria-expanded="true"] .navtoggle__bars::after  { transform: translateY(-7px) rotate(-45deg); }

  /* no-JS fallback: links stay visible, wrapped under the brand */
  .nav { flex-wrap: wrap; gap: 8px 18px; justify-content: flex-end; }

  .js-nav .nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 4px 20px 18px;
    /* Solid, not glass: the sticky header can afford translucency, but a menu
       sitting over the hero headline cannot — even 3% bleed reads as haze
       behind the link text. */
    background: var(--bg);
    border-bottom: 1px solid var(--line-2);
    box-shadow: 0 22px 44px rgba(0,0,0,.55);
  }
  .js-nav .nav.is-open { display: flex; }
  .js-nav .nav .navlink {
    display: block; padding: 15px 2px; font-size: 1.02rem;
    color: var(--ink); border-bottom: 1px solid var(--line);
  }
  .js-nav .nav .btn--go {
    margin-top: 16px; width: 100%; text-align: center; justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .navtoggle__bars, .navtoggle__bars::before, .navtoggle__bars::after { transition: none; }
}

/* ---- hero ------------------------------------------------------------- */
.hero { padding: 70px 0 40px; position: relative; }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 50px; align-items: start; }
@media (max-width: 940px) { .hero__grid { grid-template-columns: 1fr; gap: 36px; } }
.hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.hero__eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: var(--glow-sm); animation: pulse 1.8s var(--ease) infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.7); } }
.hero h1 { margin-bottom: 22px; }
/* The rotating phrase sits on its own line and reserves height for its longest
   variant, so at the global h1 scale the headline ran to 504px and pushed the
   CTA below the fold at 1280x800 and 1366x768. Capped a step lower here only;
   section headings elsewhere are untouched. */
.hero h1 { font-size: clamp(2.2rem, 1.0rem + 3.0vw, 3.5rem); line-height: 1.04; }
.hero h1 .ink { color: var(--ink); }
.hero__sub { font-size: 1.18rem; color: var(--ink-2); max-width: 40ch; margin-bottom: 30px; }
.hero__sub strong { color: var(--ink); font-weight: 700; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero__note { font-family: var(--mono); font-size: .78rem; color: var(--ink-3); }

/* readout stats */
.readouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 42px; }
@media (max-width: 520px) { .readouts { grid-template-columns: 1fr; } }
.readout {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
  padding: 16px 16px 14px;
  position: relative;
  overflow: hidden;
}
.readout::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--lime), transparent); opacity: .5; }
.readout .num { font-size: 1.7rem; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.readout .num .hl { color: var(--lime); }
.readout .cap { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-top: 2px; }

/* apparatus panel */
.apparatus {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(184,255,58,.08), transparent 60%),
    var(--panel);
  padding: 18px;
  position: relative;
}
.apparatus__tag { position: absolute; top: 14px; left: 16px; font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; color: var(--ink-3); text-transform: uppercase; }
.apparatus__corner { position: absolute; width: 14px; height: 14px; border: 1px solid var(--line-2); }
.apparatus__corner.tl { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.apparatus__corner.tr { top: 8px; right: 8px; border-left: 0; border-bottom: 0; }
.apparatus__corner.bl { bottom: 8px; left: 8px; border-right: 0; border-top: 0; }
.apparatus__corner.br { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.apparatus svg { width: 100%; height: auto; display: block; }

/* bubbles + curve animation */
.bubble { animation: rise 2.6s ease-in infinite; transform-origin: center; }
.bubble.b2 { animation-delay: .8s; }
.bubble.b3 { animation-delay: 1.5s; }
.bubble.b4 { animation-delay: 2.1s; }
@keyframes rise {
  0%   { opacity: 0; transform: translateY(0) scale(.6); }
  20%  { opacity: .9; }
  100% { opacity: 0; transform: translateY(-78px) scale(1.1); }
}
.curve-path { stroke-dasharray: 320; stroke-dashoffset: 320; animation: draw 2.6s var(--ease) .3s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.spark { animation: blink 1.4s steps(2) infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* ---- generic section head --------------------------------------------- */
.s-head { max-width: 660px; margin-bottom: 48px; }
.s-head .label { margin-bottom: 16px; display: inline-block; }
.s-head h2 { margin-bottom: 14px; }
.s-head p { font-size: 1.05rem; }
.s-head--center { margin-left: auto; margin-right: auto; text-align: center; }

.method-top { display: grid; grid-template-columns: 1.05fr 1fr; gap: 46px; align-items: center; margin-bottom: 50px; }
@media (max-width: 900px) { .method-top { grid-template-columns: 1fr; gap: 32px; } }

/* ---- specimen / focus ------------------------------------------------- */
.specimen { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 820px) { .specimen { grid-template-columns: 1fr; gap: 30px; } }
.vials { display: flex; gap: 16px; justify-content: center; align-items: flex-start; padding: 10px 0; }
.vial { text-align: center; }
.vial svg { width: 62px; height: 132px; }
.vial .vlabel { font-family: var(--mono); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; margin-top: 12px; color: var(--ink-3); max-width: 88px; }
.vial.is-active .vlabel { color: var(--lime); }

/* ---- formula strip ---------------------------------------------------- */
.formula {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  background: rgba(255,255,255,.015);
  padding: 22px;
  margin-bottom: 44px;
}
.fterm { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-weight: 700; font-size: 1rem; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line-2); padding: 10px 16px; border-radius: 999px; }
.fterm svg { width: 18px; height: 18px; }
.fop { font-family: var(--mono); font-size: 1.4rem; color: var(--ink-3); }
.fterm--out { background: rgba(184,255,58,.12); border-color: var(--lime); color: var(--lime); box-shadow: var(--glow-sm); }
.fterm--test { background: rgba(84,216,255,.12); border-color: var(--cyan); color: var(--cyan); }

/* process stations */
.stations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 820px) { .stations { grid-template-columns: 1fr; } }
.station {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent);
  padding: 26px 24px;
  position: relative;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.station:hover { border-color: var(--line-2); transform: translateY(-3px); }
.station__no { position: absolute; top: 18px; right: 20px; font-family: var(--mono); font-size: .8rem; color: var(--lime); opacity: .8; }
.station__ico { width: 52px; height: 52px; margin-bottom: 18px; }
.station h3 { margin-bottom: 9px; }
.station p { font-size: .95rem; }
.station--wide { grid-column: 1 / -1; display: flex; align-items: center; gap: 24px; background: linear-gradient(180deg, rgba(184,255,58,.05), rgba(255,255,255,.015)); }
.station--wide .station__ico { margin: 0; flex: 0 0 auto; }
.station--wide .station__txt { flex: 1; }
.station--wide h3 { margin-bottom: 5px; }
@media (max-width: 540px) { .station--wide { flex-direction: column; align-items: flex-start; gap: 14px; } }

.process-note {
  margin-top: 30px;
  border-left: 2px solid var(--lime);
  background: linear-gradient(90deg, rgba(184,255,58,.06), transparent);
  padding: 20px 24px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--ink);
  font-size: 1.02rem;
}
.process-note p { margin: 0; }
.process-note p + p { margin-top: 13px; }
.process-note__lead {
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(184, 255, 58, .22);
}

/* ---- modes ------------------------------------------------------------ */
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 820px) { .modes { grid-template-columns: 1fr; } }
.mode {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 30px 28px;
  position: relative;
}
.mode--accent { border-color: var(--line-2); background: linear-gradient(180deg, rgba(184,255,58,.06), var(--panel)); }
.mode__tag { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.mode h3 { margin: 8px 0 12px; }
.mode > p { font-size: .98rem; margin-bottom: 18px; }
.mode ul { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 11px; }
.mode li { display: flex; gap: 11px; align-items: flex-start; font-size: .95rem; color: var(--ink-2); }
.mode li svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; color: var(--lime); }

/* ---- results ---------------------------------------------------------- */
.results { display: grid; grid-template-columns: 1fr; gap: 22px; max-width: 560px; margin: 0 auto; }
.result {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}
.result__bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.result__bar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: var(--glow-sm); }
.result__img { padding: 16px; background: #0b1020; display: flex; justify-content: center; }
.result__img img { width: 100%; max-width: 460px; border-radius: 8px; display: block; }
.result__cap { padding: 0 16px 16px; font-size: .85rem; color: var(--ink-3); }

/* ---- no risk ---------------------------------------------------------- */
.norisk {
  position: relative;
  border: 1px solid var(--lime);
  border-radius: 22px;
  background:
    radial-gradient(130% 120% at 50% 0%, rgba(184,255,58,.14), transparent 60%),
    var(--panel);
  padding: 56px 44px;
  text-align: center;
  box-shadow: var(--glow);
}
.norisk .badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); border: 1px solid var(--lime); border-radius: 999px; padding: 6px 14px; margin-bottom: 20px; }
.norisk .badge svg { width: 15px; height: 15px; }
.norisk h2 { margin-bottom: 14px; }
.norisk p { font-size: 1.08rem; max-width: 60ch; margin: 0 auto 26px; }

/* ---- control panel / form -------------------------------------------- */
.console {
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(184,255,58,.06), transparent 55%),
    var(--panel);
  overflow: hidden;
}
.console__top { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.console__top .dots { display: flex; gap: 7px; }
.console__top .dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--line-2); display: block; }
.console__top .dots i.live { background: var(--lime); box-shadow: var(--glow-sm); }
.console__top .ttl { font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.console__body { padding: 26px 26px 30px; }
.console__assure { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 22px; }
.console__assure span { font-family: var(--mono); font-size: .76rem; color: var(--ink-2); display: inline-flex; align-items: center; gap: 7px; }
.console__assure span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: var(--glow-sm); }

.console-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: start; }
@media (max-width: 860px) { .console-grid { grid-template-columns: 1fr; gap: 28px; } }
.form-aside h2 { margin-bottom: 14px; }
.form-aside p { margin-bottom: 18px; }
.form-aside .miniformula { font-family: var(--mono); font-size: .82rem; color: var(--ink-3); border: 1px dashed var(--line-2); border-radius: 12px; padding: 14px 16px; }
.form-aside .miniformula b { color: var(--lime); }

/* ---- footer ----------------------------------------------------------- */
.lab-footer { border-top: 1px solid var(--line); padding: 50px 0 40px; position: relative; z-index: 1; }
.lab-footer .wrap { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-start; }
.lab-footer .brand { margin-bottom: 12px; }
.lab-footer .fcol h4 { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; }
.lab-footer .fcol a { display: block; color: var(--ink-2); font-size: .92rem; margin-bottom: 9px; }
.lab-footer .fcol a:hover { color: var(--lime); }
.lab-footer .legal { font-family: var(--mono); font-size: .74rem; color: var(--ink-3); margin-top: 26px; width: 100%; border-top: 1px solid var(--line); padding-top: 20px; }

/* =======================================================================
   FORM (reuses leadhq-form.js classes) — lab restyle
   ======================================================================= */
.lead-form { position: relative; }
.lead-form.js .lf-step { display: none; }
.lead-form.js .lf-step.is-active { display: block; animation: labfade .28s var(--ease); }
@keyframes labfade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.lf-progress { height: 6px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--line); overflow: hidden; margin-bottom: 9px; }
.lf-progress__bar { display: block; height: 100%; width: 16.66%; background: var(--lime); box-shadow: var(--glow-sm); border-radius: 999px; transition: width .35s var(--ease); }
.lf-count { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 20px; }
.lead-form:not(.js) .lf-progress, .lead-form:not(.js) .lf-count,
.lead-form:not(.js) .lf-back, .lead-form:not(.js) .lf-next { display: none; }

.lf-q { font-size: 1.22rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; line-height: 1.25; margin: 0 0 18px; }

.lf-options { display: grid; gap: 10px; }
.lf-options--two { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .lf-options--two { grid-template-columns: 1fr; } }
.lf-option {
  position: relative; display: flex; align-items: center; gap: 13px;
  padding: 15px 16px;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 600; font-size: .96rem; color: var(--ink);
  transition: border-color .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease);
}
.lf-option:hover { border-color: var(--lime); background: rgba(184,255,58,.06); }
.lf-option:focus-within { outline: 2px solid var(--lime); outline-offset: 2px; }
.lf-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lf-option::before {
  content: ""; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 6px;
  border: 1.5px solid var(--line-2); transition: all .15s var(--ease);
}
.lf-option.is-selected, .lf-option:has(input:checked) {
  border-color: var(--lime); background: rgba(184,255,58,.10); box-shadow: var(--glow-sm);
}
.lf-option.is-selected::before, .lf-option:has(input:checked)::before {
  border-color: var(--lime); background: var(--lime)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23071421' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.field { margin-bottom: 16px; }
.field label { display: block; font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.field input {
  width: 100%; font-family: var(--sans); font-size: 1rem; color: var(--ink);
  background: rgba(255,255,255,.03); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  padding: 13px 15px; transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field input::placeholder { color: var(--ink-3); }
.field input:focus { outline: none; border-color: var(--lime); box-shadow: var(--glow-sm); }
.field input[aria-invalid="true"] { border-color: var(--danger); }

.field-error { color: var(--danger); font-size: .82rem; margin: 7px 0 0; min-height: 0; display: none; }
.field-error.show { display: block; }
.form-summary { color: var(--danger); font-size: .9rem; margin-bottom: 14px; display: none; }
.form-summary.show { display: block; }

.consent { display: flex; gap: 11px; align-items: flex-start; margin-top: 4px; }
.consent input { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--lime); }
.consent label { font-size: .86rem; color: var(--ink-3); line-height: 1.5; }
.consent a { color: var(--lime); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.lf-nav { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.lf-nav .lead-submit { flex: 1; }
.lead-submit {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--mono); font-weight: 700; font-size: 1.08rem;
  background: #ff8c2b; color: #0a1228; border: 1px solid #ff8c2b;
  border-radius: 0; padding: 15px 22px; cursor: pointer;
  box-shadow: none; transition: background .15s var(--ease), transform .12s var(--ease);
}
.lead-submit:hover { transform: translateY(-1px); box-shadow: none; background: #f47d18; border-color: #f47d18; }
.lead-submit::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #bf5f0d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l8 7-8 7z' fill='%23fff5ea'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.lead-submit:disabled { opacity: .7; cursor: default; transform: none; }
.lf-back { background: none; border: 0; color: var(--ink-3); font-family: var(--mono); font-size: .8rem; letter-spacing: .04em; cursor: pointer; padding: 10px 4px; }
.lf-back:hover { color: var(--ink); }
.lead-foot { font-family: var(--sans); font-size: .82rem; color: var(--ink-3); text-align: center; margin: 16px 0 0; }
.lead-foot strong { color: var(--ink); font-weight: 600; letter-spacing: .01em; }

.spinner { display: none; width: 15px; height: 15px; border: 2px solid rgba(36,18,0,.35); border-top-color: #241200; border-radius: 50%; animation: spin .7s linear infinite; }
.lead-submit.is-loading .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, body::after { animation: none !important; }
  .curve-path { stroke-dashoffset: 0; }
}

/* ==========================================================================
   The operator (profile / credential)
   ========================================================================== */
.operator__grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 50px; align-items: center; }
@media (max-width: 820px) { .operator__grid { grid-template-columns: 1fr; gap: 28px; max-width: 460px; margin: 0 auto; } }
.idcard {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent);
  padding: 30px 26px 26px;
  text-align: center;
}
.idcard__tag { position: absolute; top: 13px; left: 15px; font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.idcard__photo {
  width: 104px; height: 104px;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.03);
  border: 2px solid rgba(184,255,58,.38);
  box-shadow: 0 0 0 5px rgba(184,255,58,.05);
  margin: 8px auto 16px;
  display: block;
}
.idcard__name { font-weight: 700; font-size: 1.18rem; color: var(--ink); letter-spacing: -.01em; }
.idcard__role { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--lime); margin-top: 5px; }
.idcard__meta { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 7px; font-family: var(--mono); font-size: .72rem; color: var(--ink-3); }
.operator__copy .label { display: inline-block; margin-bottom: 16px; }
.operator__copy h2 { margin-bottom: 16px; }
.operator__copy p { margin-bottom: 10px; }
.operator__copy p.op-gap { margin-top: 22px; }
.operator__copy p:last-child { margin-bottom: 0; }
.operator__copy strong { color: var(--ink); font-weight: 600; }

/* ==========================================================================
   Track record (client mini-cards)
   ========================================================================== */
.clientcards { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; max-width: 760px; margin: 0 auto; }
.ccard {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  padding: 15px 26px; text-align: center;
  border: 1px solid var(--line); border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.028), transparent);
  font-weight: 600; font-size: 1.12rem; color: var(--ink);
  transition: border-color .18s var(--ease), transform .18s var(--ease), background .18s var(--ease);
}
.ccard::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: var(--glow-sm); }
.ccard:hover { border-color: var(--line-2); transform: translateY(-2px); background: rgba(184,255,58,.04); }
.ccard--more { color: var(--ink-3); font-family: var(--mono); font-size: .92rem; font-weight: 400; letter-spacing: .04em; }
.ccard--more::before { display: none; }
.ccard--more:hover { transform: none; background: linear-gradient(180deg, rgba(255,255,255,.028), transparent); border-color: var(--line); }
@media (max-width: 520px) { .clientcards { gap: 10px; } .ccard { font-size: 1rem; padding: 13px 20px; } }
.morebuilds { max-width: 700px; margin: 46px auto 0; padding-top: 30px; border-top: 1px solid var(--line); text-align: center; }
.morebuilds .label { display: inline-block; margin-bottom: 12px; }
.morebuilds p { color: var(--ink-2); font-size: .96rem; line-height: 1.7; margin: 0; }
.morebuilds a { color: var(--cyan); text-decoration: none; border-bottom: 1px solid rgba(84,216,255,.38); transition: border-color .15s var(--ease), color .15s var(--ease); }
.morebuilds a:hover { border-bottom-color: var(--cyan); }

/* ==========================================================================
   Pricing
   ========================================================================== */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 880px) { .tiers { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }
.tier {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent);
  padding: 30px 26px;
}
.tier--accent { border-color: rgba(184,255,58,.45); background: linear-gradient(180deg, rgba(184,255,58,.07), var(--panel)); box-shadow: var(--glow-sm); }
.tier__flag { position: absolute; top: -11px; left: 26px; font-family: var(--mono); font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #08120a; background: var(--lime); padding: 4px 10px; border-radius: 999px; }
.tier__tag { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.tier__name { font-size: 1.4rem; font-weight: 700; margin: 5px 0 0; letter-spacing: -.01em; }
.tier__price { font-size: 2.25rem; font-weight: 700; letter-spacing: -.025em; margin: 14px 0 2px; color: var(--ink); }
.tier__price span { font-size: .95rem; font-weight: 500; color: var(--ink-3); font-family: var(--mono); }
.tier__for { color: var(--ink-2); font-size: .95rem; margin-bottom: 4px; }
.tier__addspend { font-family: var(--mono); font-size: .74rem; color: var(--ink-3); margin: 0 0 8px; }
.tier__list { list-style: none; margin: 18px 0 24px; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 11px; flex: 1; }
.tier__list li { display: flex; gap: 10px; font-size: .92rem; color: var(--ink-2); }
.tier__list svg { width: 17px; height: 17px; color: var(--lime); flex: 0 0 auto; margin-top: 2px; }
.tier .btn { width: 100%; }

.enterprise { margin-top: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 26px 30px; display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.enterprise__l { flex: 1; min-width: 260px; }
.enterprise__tag { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); }
.enterprise h3 { margin: 5px 0 7px; }
.enterprise p { font-size: .95rem; max-width: 64ch; }
.enterprise__price { font-family: var(--mono); font-size: .9rem; color: var(--ink-3); }

.pricemodel { margin-top: 24px; border-left: 2px solid var(--lime); background: linear-gradient(90deg, rgba(184,255,58,.06), transparent); padding: 20px 24px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--ink-2); font-size: 1.02rem; }
.pricemodel strong { color: var(--ink); font-weight: 600; }

/* where your money goes */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .compare { grid-template-columns: 1fr; } }
.cmp { border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; background: var(--panel); }
.cmp--bad { border-color: rgba(255,107,107,.28); background: linear-gradient(180deg, rgba(255,107,107,.045), var(--panel)); }
.cmp--good { border-color: rgba(184,255,58,.42); background: linear-gradient(180deg, rgba(184,255,58,.055), var(--panel)); }
.cmp__tag { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.cmp__amt { font-size: 1.45rem; font-weight: 700; margin: 4px 0 16px; color: var(--ink); }
.cmp ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cmp li { display: flex; gap: 11px; font-size: .93rem; color: var(--ink-2); align-items: flex-start; }
.cmp li i { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; border-radius: 4px; display: inline-block; }
.cmp--bad li i { background: rgba(255,107,107,.18); border: 1px solid rgba(255,107,107,.5); }
.cmp--good li svg { flex: 0 0 auto; width: 17px; height: 17px; color: var(--lime); margin-top: 2px; }
.cmp__last { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .92rem; color: var(--ink); font-weight: 600; }

.feesplit { margin-top: 24px; display: grid; gap: 12px; }
.feerow { display: grid; grid-template-columns: 130px 1fr; gap: 14px; align-items: center; }
@media (max-width: 560px) { .feerow { grid-template-columns: 1fr; gap: 6px; } }
.feelabel { font-family: var(--mono); font-size: .78rem; color: var(--ink); font-weight: 700; }
.feelabel span { color: var(--ink-3); font-weight: 400; }
.feebar { display: flex; height: 46px; border-radius: 9px; overflow: hidden; border: 1px solid var(--line); }
.feeseg { display: flex; align-items: center; padding: 0 12px; font-family: var(--mono); font-size: .64rem; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feeseg--oh { background: repeating-linear-gradient(45deg, rgba(255,107,107,.16), rgba(255,107,107,.16) 9px, rgba(255,107,107,.09) 9px, rgba(255,107,107,.09) 18px); color: #e9b7b7; }
.feeseg--work { background: var(--lime); color: #08120a; font-weight: 700; justify-content: center; }
.compare-punch { margin-top: 22px; text-align: center; font-size: 1.05rem; color: var(--ink); }
.compare-punch strong { color: var(--lime); }

/* ==========================================================================
   Pedigree (case file + testimonials)
   ========================================================================== */
.casefile {
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: radial-gradient(120% 100% at 0% 0%, rgba(184,255,58,.08), transparent 55%), var(--panel);
  padding: 34px 32px; margin-bottom: 18px;
}
.casefile__tag { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); }
.casefile h3 { font-size: 1.55rem; margin: 9px 0 13px; }
.casefile p { font-size: 1.05rem; color: var(--ink-2); max-width: 72ch; }
.casefile__stats { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 24px; }
.cstat { border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; font-family: var(--mono); font-size: .8rem; color: var(--ink); background: rgba(255,255,255,.025); }
.cstat b { color: var(--lime); font-weight: 700; }

.quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .quotes { grid-template-columns: 1fr; } }
.quote { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, rgba(255,255,255,.025), transparent); padding: 28px; display: flex; flex-direction: column; }
.quote__co { font-weight: 700; font-size: 1.08rem; color: var(--ink); }
.quote__desc { font-family: var(--sans); font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--cyan); margin: 4px 0 16px; }
.quote__mark { display: block; color: var(--cyan); font-family: Georgia, serif; font-size: 2.4rem; line-height: 0; height: 20px; opacity: .55; margin-top: 10px; }
.quote__mark--close { text-align: right; height: auto; line-height: .35; margin-top: 6px; }
.quote blockquote { margin: 0 0 20px; font-size: .98rem; color: var(--ink-2); line-height: 1.62; flex: 1; }
.quote__who { display: flex; flex-direction: column; gap: 3px; padding-top: 16px; border-top: 1px solid var(--line); }
.quote__who .nm { font-weight: 600; color: var(--ink); font-size: .92rem; }
.quote__who .nm a { color: var(--ink); }
.quote__who .nm a:hover { color: var(--lime); }
.quote__who .rl { font-family: var(--mono); font-size: .73rem; color: var(--ink-3); }

/* ==========================================================================
   P.S. box (cross-sell note under the form)
   ========================================================================== */
.ps { padding-top: 0; }
.psbox {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: radial-gradient(120% 120% at 100% 0%, rgba(184,255,58,.07), transparent 55%), var(--panel);
  padding: 38px 42px;
  max-width: 780px;
  margin: 0 auto;
}
@media (max-width: 560px) { .psbox { padding: 30px 26px; } }
.psbox__tag { font-family: var(--mono); font-size: .82rem; font-weight: 700; letter-spacing: .16em; color: var(--lime); }
.psbox h3 { font-size: 1.5rem; margin: 11px 0 13px; letter-spacing: -.01em; }
.psbox p { font-size: 1.06rem; color: var(--ink-2); max-width: 64ch; }
.psbox__cta { margin: 18px 0 0; font-family: var(--mono); font-size: .8rem; color: var(--ink-3); }
.psbox__cta b { color: var(--lime); font-weight: 400; }

.feesplit-note { margin: 14px auto 0; max-width: 74ch; text-align: center; font-family: var(--mono); font-size: .74rem; color: var(--ink-3); line-height: 1.65; }

/* multi-segment fee bar */
.feeseg { justify-content: center; padding: 0 8px; border-right: 1px solid rgba(7,11,21,.55); }
.feeseg:last-child { border-right: 0; }
.feeseg--s1 { background: rgba(255,107,107,.24); color: #f0c4c4; }
.feeseg--s2 { background: rgba(255,107,107,.17); color: #e7bcbc; }
.feeseg--s3 { background: rgba(255,107,107,.12); color: #d8b4b4; }
.feeseg--s4 { background: rgba(255,150,86,.20); color: #f1c89c; }
.feelegend { display: flex; flex-wrap: wrap; gap: 9px 18px; justify-content: center; margin-top: 16px; }
.feelegend span { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: .73rem; color: var(--ink-2); }
.feelegend b { color: var(--ink); font-weight: 700; margin-left: 2px; }
.feelegend .lg { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.lg--work { background: var(--lime); }
.lg--s1 { background: rgba(255,107,107,.55); }
.lg--s2 { background: rgba(255,107,107,.40); }
.lg--s3 { background: rgba(255,107,107,.28); }
.lg--s4 { background: rgba(255,150,86,.50); }

/* labels inside fee bar segments (2-line: name over %) */
.feebar { height: 64px; }
.feeseg { flex-direction: column; justify-content: center; align-items: center; text-align: center; white-space: normal; line-height: 1.16; padding: 0 6px; gap: 1px; }
.fs__t { font-size: .6rem; opacity: .94; }
.fs__p { font-size: .76rem; font-weight: 700; }
@media (max-width: 600px) {
  .feeseg { padding: 0 3px; }
  .fs__t { font-size: .5rem; }
  .fs__p { font-size: .62rem; }
}

/* ==========================================================================
   Flagship / Enterprise tier
   ========================================================================== */
.flagship {
  position: relative; overflow: hidden; margin-top: 18px;
  border: 1.5px solid rgba(184,255,58,.42); border-radius: var(--radius);
  background:
    radial-gradient(130% 150% at 100% 0%, rgba(84,216,255,.12), transparent 45%),
    radial-gradient(130% 150% at 0% 100%, rgba(184,255,58,.11), transparent 50%),
    var(--panel);
  padding: 42px 46px; box-shadow: var(--glow-sm);
}
@media (max-width: 700px) { .flagship { padding: 32px 26px; } }
.flagship::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image:
    radial-gradient(1.6px 1.6px at 18% 24%, rgba(234,240,251,.7), transparent),
    radial-gradient(1.4px 1.4px at 72% 16%, rgba(234,240,251,.55), transparent),
    radial-gradient(1.2px 1.2px at 88% 52%, rgba(234,240,251,.5), transparent),
    radial-gradient(1.5px 1.5px at 42% 78%, rgba(234,240,251,.45), transparent),
    radial-gradient(1.3px 1.3px at 91% 30%, rgba(184,255,58,.7), transparent),
    radial-gradient(1.2px 1.2px at 58% 44%, rgba(84,216,255,.6), transparent),
    radial-gradient(1px 1px at 30% 60%, rgba(234,240,251,.4), transparent);
}
.flagship > * { position: relative; }
.flagship__tag { font-family: var(--mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--lime); }
.flagship__title { font-size: 2.5rem; margin: 9px 0 13px; letter-spacing: -.02em; line-height: 1.02; }
@media (max-width: 560px) { .flagship__title { font-size: 2rem; } }
.flagship__sub { font-size: 1.08rem; color: var(--ink-2); max-width: 60ch; }
.flagship__list { list-style: none; margin: 28px 0 30px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 13px 30px; }
@media (max-width: 640px) { .flagship__list { grid-template-columns: 1fr; } }
.flagship__list li { display: flex; gap: 11px; font-size: .98rem; color: var(--ink); }
.flagship__list svg { width: 18px; height: 18px; color: var(--lime); flex: 0 0 auto; margin-top: 3px; }
.flagship__cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.flagship__price { font-family: var(--mono); font-size: 1.5rem; font-weight: 700; color: var(--ink); }

/* ==========================================================================
   Sub-pages (about, contact, faqs, legal, etc.)
   ========================================================================== */
.page-hero { padding-top: 150px; padding-bottom: 8px; }
.page-hero .label { display: inline-block; margin-bottom: 14px; }
.page-hero h1 { font-size: clamp(2.3rem, 5vw, 3.4rem); line-height: 1.04; letter-spacing: -.025em; margin: 0 0 16px; }
.page-hero h1 .hl { color: var(--lime); }
.page-lead { font-size: 1.15rem; color: var(--ink-2); max-width: 62ch; line-height: 1.6; }

.cta-band { margin-top: 8px; border: 1px solid var(--line-2); border-radius: var(--radius); background: radial-gradient(130% 150% at 100% 0%, rgba(184,255,58,.08), transparent 50%), var(--panel); padding: 36px 40px; display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.cta-band h3 { font-size: 1.5rem; margin: 0 0 6px; }
.cta-band p { color: var(--ink-2); margin: 0; max-width: 52ch; }
.cta-band__btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* contact form */
.contact-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 28px; align-items: start; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card { border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--panel); padding: 32px; box-shadow: var(--glow-sm); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.contact-form .field { margin-bottom: 16px; }
.contact-form textarea { width: 100%; min-height: 130px; resize: vertical; background: var(--bg-2, #0b1020); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); font: inherit; padding: 12px 14px; }
.contact-form textarea:focus { outline: none; border-color: var(--lime); box-shadow: 0 0 0 3px rgba(184,255,58,.14); }
.contact-form .consent { margin: 4px 0 20px; }
.contact-aside { display: grid; gap: 16px; }
.aside-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 22px 24px; }
.aside-card h4 { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); margin: 0 0 8px; }
.aside-card p { margin: 0; color: var(--ink-2); font-size: .95rem; line-height: 1.6; }
.aside-card a { color: var(--ink); }
.aside-card a:hover { color: var(--lime); }

/* FAQ accordion */
.faq { display: grid; gap: 11px; max-width: 860px; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); overflow: hidden; }
.faq details[open] { border-color: rgba(184,255,58,.32); }
.faq summary { list-style: none; cursor: pointer; padding: 19px 22px; font-weight: 600; font-size: 1.02rem; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); font-size: 1.3rem; color: var(--lime); flex: 0 0 auto; transition: transform .2s; }
.faq details[open] summary::after { content: "\2212"; }
.faq__a { padding: 0 22px 20px; color: var(--ink-2); font-size: .97rem; line-height: 1.65; }
.faq__a a { color: var(--lime); }

/* legal prose */
.legal-prose { max-width: 780px; }
.legal-prose h2 { font-size: 1.25rem; margin: 32px 0 10px; }
.legal-prose h3 { font-size: 1.05rem; margin: 22px 0 8px; }
.legal-prose p, .legal-prose li { color: var(--ink-2); line-height: 1.7; font-size: .98rem; }
.legal-prose ul { padding-left: 20px; }
.legal-prose a { color: var(--lime); }
.legal-prose strong { color: var(--ink); }

/* simple thanks page */
.thanks-wrap { min-height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 140px 0 80px; }
.thanks-card { max-width: 560px; }
.thanks-tick { width: 64px; height: 64px; margin: 0 auto 22px; border-radius: 50%; border: 2px solid var(--lime); display: flex; align-items: center; justify-content: center; box-shadow: var(--glow-sm); }
.thanks-tick svg { width: 30px; height: 30px; color: var(--lime); }
.thanks-card h1 { font-size: 2.2rem; margin: 0 0 12px; }
.thanks-card p { color: var(--ink-2); font-size: 1.08rem; line-height: 1.6; margin: 0 auto 24px; max-width: 46ch; }

/* implied consent line (replaces tick boxes) */
.form-consent { font-family: var(--mono); font-size: .72rem; line-height: 1.55; color: var(--ink-3); margin: 14px 0 18px; }
.form-consent a { color: var(--ink-2); }
.form-consent a:hover { color: var(--lime); }
/* contact page: drop the triangle badge so it doesn't block the label */
.contact-form .lead-submit::before { display: none; }
.contact-form .lead-submit { width: 100%; margin-top: 4px; }

/* ==========================================================================
   Cookie banner (bottom-left)
   ========================================================================== */
/* Bottom-RIGHT: bottom-left lands directly on the hero's primary CTA at every
   common laptop height (1280x800 / 1440x900 / 1512x982), where it intercepted
   the click entirely. */
.cookie-banner {
  position: fixed; right: 20px; bottom: 20px; z-index: 9999;
  width: 340px; max-width: calc(100vw - 40px);
  background: var(--panel); border: 1px solid var(--line-2); border-left: 3px solid #fff;
  border-radius: var(--radius-sm); padding: 18px 20px;
  box-shadow: 0 14px 44px rgba(0,0,0,.55);
  transform: translateY(18px); opacity: 0; pointer-events: none;
  transition: transform .35s ease, opacity .35s ease;
}
.cookie-banner.show { transform: translateY(0); opacity: 1; pointer-events: auto; }
.cookie-banner__label { font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.cookie-banner__text { font-size: .86rem; color: var(--ink-2); line-height: 1.55; margin: 8px 0 14px; }
.cookie-banner__text a { color: #fff; text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: 10px; }
.cookie-banner__actions .btn { padding: 9px 16px; font-size: .8rem; }
@media (max-width: 480px) { .cookie-banner { left: 12px; right: 12px; bottom: 12px; width: auto; } }
/* cookie accept = Cherenkov blue, no glow */
.cookie-banner .cookie-accept { background: #fff; color: #0a1228; box-shadow: none; }
.cookie-banner .cookie-accept:hover { color: #0a1228; box-shadow: none; transform: translateY(-2px); }
.cookie-banner .cookie-accept:active { transform: translateY(0); }

/* floating cookie reopen button */
.cookie-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 9998;
  width: 46px; height: 46px; border-radius: 50%; padding: 0;
  background: var(--panel); border: 1px solid var(--line-2); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(10px) scale(.92); pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.cookie-fab.show { opacity: .8; transform: none; pointer-events: auto; }
.cookie-fab:hover { opacity: 1; border-color: #fff; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 18px rgba(255,255,255,.22); }
.cookie-fab svg { width: 24px; height: 24px; }
@media (max-width: 480px) { .cookie-fab { right: 14px; bottom: 14px; } }

/* ==========================================================================
   Why PPC works — comparison
   A mark or a figure carries the scan, a short line underneath carries the
   reason. Ticks alone read as marketing; sentences alone do not get read at
   all. Both columns stay left-aligned so the eye can run down either one.
   ========================================================================== */
.pvs { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.pvs__head, .pvs__row { display: grid; grid-template-columns: .92fr 1fr 1fr; }
.pvs__head { background: var(--bg-2); }
.pvs__head > div {
  padding: 14px 22px; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); font-weight: 700;
}
.pvs__head .is-good { color: var(--lime); }
.pvs__row { border-top: 1px solid var(--line); }
.pvs__row > div { padding: 18px 22px; }
.pvs__lab { color: var(--ink); font-weight: 600; font-size: .98rem; align-self: center; }
.pvs__bad  { background: rgba(255,107,107,.035); }
.pvs__good { background: rgba(184,255,58,.045); }
.pvs__txt { font-size: .92rem; line-height: 1.55; color: var(--ink-2); margin: 8px 0 0; }
.pvs__good .pvs__txt { color: var(--ink); }

/* The mark line: tick, cross, figure or one-word verdict. */
.pvs__mark { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; }
.pvs__ico { display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto; }
.pvs__ico svg { width: 14px; height: 14px; }
.pvs__bad  .pvs__ico { color: #ff8f8f; background: rgba(255,107,107,.12); }
.pvs__good .pvs__ico { color: var(--lime); background: rgba(184,255,58,.14); }
.pvs__fig { font-size: 1.3rem; letter-spacing: -.02em; }
.pvs__bad  .pvs__fig { color: var(--ink-2); }
.pvs__good .pvs__fig { color: var(--lime); }
.pvs__word { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 100px; }
.pvs__bad  .pvs__word { color: #ff8f8f; background: rgba(255,107,107,.12); }
.pvs__good .pvs__word { color: var(--lime); background: rgba(184,255,58,.14); }

.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; }

@media (max-width: 860px) {
  .pvs__head { display: none; }
  .pvs__row { grid-template-columns: 1fr; }
  .pvs__lab { padding: 18px 18px 2px; }
  /* Mark beside the text rather than above it: stacked, each cell burned a
     line and the section ran twice as long as it needed to. */
  .pvs__row > div + div {
    padding: 12px 18px;
    display: grid; grid-template-columns: auto 1fr;
    column-gap: 11px; align-items: start;
  }
  .pvs__bad::before, .pvs__good::before { grid-column: 1 / -1; }
  .pvs__mark { grid-column: 1; }
  .pvs__txt { grid-column: 2; margin: 0; }
  .pvs__fig { font-size: 1.05rem; }
  /* column headers become row labels once the columns collapse */
  .pvs__bad::before, .pvs__good::before {
    display: block; margin-bottom: 7px; font-family: var(--mono);
    font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
    font-weight: 700;
  }
  .pvs__bad::before  { content: "Appointment setting"; color: var(--ink); }
  .pvs__good::before { content: "Google Ads"; color: var(--lime); }
}

/* ==========================================================================
   Cost to acquire — the chain
   The single number is the persuasive part, but a bare number invites doubt.
   Showing each step means the reader can check the arithmetic themselves, and
   substitute their own close rate if they disagree with ours.
   ========================================================================== */
.acq { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; }
.acq__col {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px; display: flex; flex-direction: column;
}
.acq__col--bad  { background: rgba(255,107,107,.035); }
.acq__col--good { background: rgba(184,255,58,.05); border-color: rgba(184,255,58,.22); }
.acq__ttl {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 700; margin-bottom: 16px;
}
.acq__col--bad  .acq__ttl { color: var(--ink); }
.acq__col--good .acq__ttl { color: var(--lime); }

.acq__step { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; }
.acq__val { font-weight: 700; font-size: 1.04rem; color: var(--ink); flex: 0 0 auto; min-width: 6.4em; }
.acq__col--good .acq__val { color: var(--lime); }
.acq__cap { font-size: .88rem; color: var(--ink-2); line-height: 1.5; }

/* The chain rule: a short vertical tick between steps, so the eye reads it as
   a sequence rather than a list. */
.acq__step + .acq__step { border-top: 1px solid var(--line); }

.acq__out { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.acq__big { font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.acq__col--bad  .acq__big { color: var(--ink-2); }
.acq__col--good .acq__big { color: var(--lime); }
.acq__lab {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); margin-top: 6px;
}
.acq__note {
  margin-top: 18px; font-size: .86rem; line-height: 1.6; color: var(--ink-3);
  max-width: 68ch;
}

@media (max-width: 860px) {
  .acq { grid-template-columns: 1fr; gap: 14px; }
  .acq__col { padding: 20px; }
  .acq__val { min-width: 5.8em; font-size: .98rem; }
  .acq__big { font-size: 1.6rem; }
}