/* ═══════════════════════════════════════════════════
   VoiceAI funnel landing pages + legal documents

   REQUIRES css/tokens.css, linked BEFORE this file.
   Used by:  detailing/  confidentialitate/  cookies/

   This is a direct-response funnel, not a product page. The
   genre signal comes from four things, in this order:
     1. ONE action colour (--green) on every CTA, nothing else
     2. Uppercase display type at opsz 96 / wght 800
     3. One continuous dark surface, no light sections
     4. The same button, same words, repeated down the page
   --accent is deliberately demoted to highlights and links so
   it never competes with a button.

   The .doc* block near the bottom is shared with the two live
   legal pages. Do not restyle it as part of funnel work.
═══════════════════════════════════════════════════ */

/* ── RESET ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--font-body);
  color: var(--white);
  background: var(--dark);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
ul { list-style: none; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
input, textarea { font: inherit; }

/* NOTE: no text-transform here. The legal pages use h1/h2/h3 and must
   stay sentence case; uppercase belongs to .f-display only. */
h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
p { text-wrap: pretty; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}
.narrow { max-width: 780px; }

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  background: var(--white);
  color: var(--text);
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  transition: top 0.2s;
}
.skip-link:focus { top: 12px; }

/* ── DISPLAY TYPE ─────────────────────────────────────
   Bricolage Grotesque here carries opsz 12..96 and wght 200..800
   but NO width axis, so true condensed is impossible without adding
   a font. opsz 96 at wght 800, uppercase, with tight tracking is the
   substitute and gets most of the way there.
─────────────────────────────────────────────────── */
.f-display {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 96, 'wght' 800;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.94;
  text-wrap: balance;
}

/* The highlight box: the most recognisable direct-response type move,
   and it costs no new colour. Reserve it for the words carrying the promise. */
.hl {
  background: var(--green);
  color: var(--dark);
  padding: 0 0.16em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hl-blue {
  background: var(--accent);
  color: var(--white);
  padding: 0 0.16em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* Underline-strike variant for mid-sentence emphasis without a full slab. */
.ul-green {
  color: var(--green);
  text-decoration: underline;
  text-decoration-thickness: 0.14em;
  text-underline-offset: 0.12em;
}

/* ── BUTTONS ──────────────────────────────────────────
   .btn-cta is THE button. Same class, same words, six times down
   the page. Everything else is secondary by construction.
─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  border-radius: 12px;
  padding: 15px 26px;
  font-size: 1rem;
  transition: transform 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
  text-align: center;
}
.btn:active { transform: translateY(1px); }
.btn-full { width: 100%; }
.btn-sm { padding: 9px 18px; font-size: 0.875rem; border-radius: 9px; }

.btn-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 520px;
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 40, 'wght' 800;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  font-size: clamp(1rem, 2.4vw, 1.3rem);
  line-height: 1.15;
  padding: 21px 28px;
  border-radius: 14px;
  background: var(--green);
  color: #042118;
  /* Hard offset shadow rather than a soft glow: reads as a physical button. */
  box-shadow: 0 5px 0 0 #00845F, 0 14px 34px rgba(0,200,150,0.28);
  transition: transform 0.12s ease, background-color 0.16s ease, box-shadow 0.12s ease;
}
.btn-cta:hover { background: #12DBA8; }
.btn-cta:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 0 #00845F, 0 6px 18px rgba(0,200,150,0.22);
}
.btn-cta svg { flex-shrink: 0; }
.btn-cta-center { margin-inline: auto; }

/* Sub-CTA under the main one: the phone option, never styled to compete. */
.btn-line {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.26);
}
.btn-line:hover { border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.05); }

/* Kept for the legal pages' header and the cookie banner. */
.btn-call { background: var(--green); color: #042118; }
.btn-call:hover { background: #12DBA8; }
.btn-primary { background: var(--accent); color: var(--white); }
.btn-primary:hover { background: var(--accent-h); }
.btn-quiet { background: var(--bg-2); color: var(--text); }
.btn-quiet:hover { background: #E3E3E8; }

/* ── SECTIONS ─────────────────────────────────────── */
.sec {
  position: relative;
  padding: clamp(58px, 8vw, 96px) 0;
}
.sec-dark { background: var(--dark); }
.sec-dark-2 { background: var(--dark-2); }
.sec-dark-3 { background: var(--dark-3); }

/* Angled dividers. The wedge is the FIRST child of the lower section and
   carries the upper section's colour, so the lower background shows through
   the clipped corner. No overlap maths, no z-index fights. */
.wedge {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(26px, 4vw, 62px);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  pointer-events: none;
  z-index: 0;
}
.wedge-r { clip-path: polygon(0 0, 100% 0, 100% 100%); }
.w-dark { background: var(--dark); }
.w-dark-2 { background: var(--dark-2); }
.w-dark-3 { background: var(--dark-3); }
.w-green { background: var(--green); }
.w-accent { background: var(--accent); }
@supports not (clip-path: polygon(0 0, 100% 0, 0 100%)) {
  .wedge { display: none; }
}
.sec > .container { position: relative; z-index: 1; }

.tag {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  display: block;
  margin-bottom: 14px;
}
.sec-title {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 96, 'wght' 800;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.96;
  font-size: clamp(1.8rem, 5.2vw, 3.2rem);
  color: var(--white);
  margin-bottom: 16px;
  text-wrap: balance;
}
.sec-lead {
  font-size: clamp(1rem, 2vw, 1.1rem);
  color: rgba(255,255,255,0.66);
  line-height: 1.65;
  max-width: 56ch;
}
.sec-lead strong { color: var(--white); }

/* ── HEADER ─────────────────────────────────────────
   No nav links by design: a funnel page should not offer exits. */
.lp-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(10,22,40,0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.lp-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 62px;
}
.lp-nav img { height: 28px; width: auto; }

/* ── HERO ─────────────────────────────────────────── */
.lp-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(34px, 5vw, 60px) 0 clamp(52px, 7vw, 84px);
  background: var(--dark);
}
.lp-hero-bg {
  position: absolute;
  inset: 0;
  background-image: url(../assets/images/detailing/hero-dark-paint.webp);
  background-size: cover;
  background-position: center 60%;
  opacity: 0.5;
}
.lp-hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,22,40,0.66) 0%, rgba(10,22,40,0.84) 58%, var(--dark) 100%),
    linear-gradient(90deg, rgba(10,22,40,0.92) 0%, rgba(10,22,40,0.42) 100%);
}
.lp-hero .container { position: relative; z-index: 1; }

.lp-hero-grid { display: grid; gap: clamp(30px, 4vw, 52px); align-items: start; }
@media (min-width: 980px) {
  .lp-hero-grid { grid-template-columns: 1.08fr 0.92fr; gap: 56px; }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(0,200,150,0.13);
  border: 1px solid rgba(0,200,150,0.34);
  color: var(--green);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 15px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.badge-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.hero-title {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 96, 'wght' 800;
  text-transform: uppercase;
  letter-spacing: -0.035em;
  line-height: 0.92;
  /* Capped at 4.1rem, not larger: past this the five-line headline pushes the
     demo number, which is the page's hook, below the fold at 1000px. */
  font-size: clamp(2.3rem, 6.6vw, 4.1rem);
  color: var(--white);
  margin-bottom: 18px;
  text-wrap: balance;
}
/* Breathing room before the highlighted payoff line. It has to be a block
   wrapper, not margin on .hl itself: .hl stays inline so it keeps wrapping
   into two separate slabs on narrow screens. */
.hero-hl-line {
  display: block;
  margin-top: 0.3em;
}

.hero-sub {
  font-size: clamp(1.02rem, 2.2vw, 1.2rem);
  color: rgba(255,255,255,0.76);
  line-height: 1.6;
  max-width: 46ch;
  margin-bottom: 26px;
}
.hero-sub strong { color: var(--white); font-weight: 800; }

/* Real constraint, stated with its reason. Not a countdown. */
.capacity {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 22px;
  padding: 13px 16px;
  background: rgba(51,88,232,0.14);
  border: 1px solid rgba(51,88,232,0.4);
  border-radius: 12px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.82);
  max-width: 520px;
}
.capacity b { color: var(--white); }
.capacity svg { flex-shrink: 0; color: var(--accent-light); }

/* ── THE CALL BLOCK (occupies the reference funnels' video slot) ── */
.callbox {
  background: linear-gradient(165deg, rgba(0,200,150,0.16), rgba(10,22,40,0.1));
  border: 1px solid rgba(0,200,150,0.34);
  border-radius: 20px;
  padding: clamp(20px, 3.2vw, 30px);
  text-align: center;
}
.callbox-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 12px;
}
.callbox-num {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 96, 'wght' 800;
  font-size: clamp(2rem, 7vw, 3.1rem);
  letter-spacing: -0.03em;
  color: var(--white);
  line-height: 1;
  margin-bottom: 6px;
}
.callbox-num:hover { color: var(--green); }
.callbox-hint-label {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  margin-bottom: 18px;
}
.callbox .btn-cta { margin-inline: auto; }

/* The press-1 instruction shows the key instead of describing it.
   A caller who hangs up during the English greeting is a lead lost. */
.call-hint {
  display: flex;
  align-items: center;
  gap: 13px;
  text-align: left;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  padding: 12px 15px;
  margin-top: 16px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.78);
}
.call-hint b { color: var(--white); }

.keycap {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.07));
  border: 1px solid rgba(255,255,255,0.26);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.34), 0 2px 6px rgba(0,0,0,0.24);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--white);
}

.try-say { margin-top: 18px; text-align: left; }
.try-say > p {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 9px;
}
.try-say li {
  font-size: 0.94rem;
  color: rgba(255,255,255,0.82);
  padding: 6px 0 6px 20px;
  position: relative;
  font-style: italic;
}
.try-say li::before {
  content: '"';
  position: absolute;
  left: 0;
  color: var(--green);
  font-size: 1.25rem;
  line-height: 1.15;
}

/* ── LEAD CARD / FORM ─────────────────────────────── */
#formular { scroll-margin-top: 80px; }

.lead-card {
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 20px;
  padding: clamp(22px, 3.4vw, 30px);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(6px);
}
.lead-card h2, .lead-card h3 {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 48, 'wght' 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  color: var(--white);
  margin-bottom: 8px;
}
.lead-card-sub {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.62);
  margin-bottom: 20px;
  line-height: 1.55;
}

.lead-form { display: grid; gap: 14px; }
.form-group { display: grid; gap: 6px; }
.form-group label {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.form-input {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 11px;
  padding: 15px 16px;
  color: var(--white);
  font-size: 1.02rem;
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input::placeholder { color: rgba(255,255,255,0.34); }
.form-input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(0,200,150,0.2);
}
.form-input[aria-invalid="true"] {
  border-color: #FF7A7A;
  box-shadow: 0 0 0 3px rgba(255,122,122,0.16);
}

.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.58);
}
.consent input {
  width: 18px; height: 18px;
  margin-top: 2px;
  accent-color: var(--green);
  flex-shrink: 0;
}
.consent a { color: var(--accent-light); text-decoration: underline; }

/* Honeypot: off-screen, never announced, never tab-reachable. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.lead-note {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
  text-align: center;
  line-height: 1.5;
}
.lead-msg {
  font-size: 0.875rem;
  line-height: 1.55;
  border-radius: 11px;
  padding: 12px 14px;
  background: rgba(255,122,122,0.13);
  border: 1px solid rgba(255,122,122,0.34);
  color: #FFC9C9;
}
.lead-msg a { color: var(--white); text-decoration: underline; font-weight: 800; }
.lead-msg[hidden] { display: none; }

.lead-success { text-align: center; padding: 8px 0; }
.lead-check {
  width: 58px; height: 58px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--green);
  color: var(--dark);
  font-size: 1.7rem;
  font-weight: 800;
}
.lead-success h3 { margin-bottom: 8px; }
.lead-success p { color: rgba(255,255,255,0.68); font-size: 0.95rem; line-height: 1.6; }
.lead-success .btn-cta { margin: 20px auto 0; }

/* ── STAT SLAB ────────────────────────────────────── */
.slab {
  background: var(--green);
  color: var(--dark);
  padding: clamp(30px, 4.4vw, 48px) 0;
}
.slab-grid {
  display: grid;
  gap: 26px;
  text-align: center;
}
@media (min-width: 720px) {
  .slab-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .slab-item + .slab-item { border-left: 1px solid rgba(4,33,24,0.22); }
}
.slab-num {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 96, 'wght' 800;
  font-size: clamp(2.4rem, 7.4vw, 3.9rem);
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: #042118;
}
.slab-label {
  display: block;
  margin-top: 8px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(4,33,24,0.72);
}

/* ── PAIN CHECKLIST ───────────────────────────────── */
.checklist { margin-top: 34px; display: grid; gap: 14px; }
.checklist li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 15px;
  align-items: center;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 16px 18px;
  font-size: clamp(0.98rem, 2vw, 1.08rem);
  font-weight: 600;
  line-height: 1.45;
  color: rgba(255,255,255,0.92);
}
.check-dot {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--green);
  color: var(--dark);
  display: grid;
  place-items: center;
}
.check-dot svg { width: 17px; height: 17px; }

/* ── A NORMAL TUESDAY ─────────────────────────────── */
.day-grid { display: grid; gap: clamp(28px, 4.4vw, 52px); align-items: start; }
@media (min-width: 940px) { .day-grid { grid-template-columns: 1fr 0.82fr; gap: 56px; } }

.day-list { display: grid; }
.day-row {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  align-items: baseline;
}
.day-row:last-child { border-bottom: 1px solid rgba(255,255,255,0.1); }
.day-time {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 32, 'wght' 800;
  font-size: 1.1rem;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}
.day-what { font-weight: 800; font-size: 1rem; color: var(--white); }
.day-why { font-size: 0.9rem; color: rgba(255,255,255,0.6); margin-top: 3px; line-height: 1.55; }

.tally {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 20px;
  padding: clamp(24px, 3.6vw, 34px);
}
.tally h3 {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 40, 'wght' 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: 1.2rem;
  color: var(--white);
  margin-bottom: 18px;
}
.tally-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.66);
  border-bottom: 1px solid rgba(255,255,255,0.09);
}
.tally-row b { color: var(--white); font-variant-numeric: tabular-nums; }
.tally-total { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.18); }
.tally-total span {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  display: block;
  margin-bottom: 8px;
}
.tally-total strong {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 96, 'wght' 800;
  font-size: clamp(2.2rem, 6vw, 3rem);
  color: var(--green);
  letter-spacing: -0.035em;
  display: block;
  line-height: 1;
}
.tally-note {
  margin-top: 15px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.44);
  line-height: 1.55;
}

/* ── STEPS ────────────────────────────────────────── */
.lp-how { position: relative; overflow: hidden; }
.lp-how-bg {
  position: absolute;
  inset: 0;
  background-image: url(../assets/images/detailing/hands-polisher.webp);
  background-size: cover;
  background-position: center 40%;
  opacity: 0.12;
}
.lp-how-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--dark-3) 0%, rgba(22,32,53,0.3) 45%, var(--dark-3) 100%);
}

.steps { display: grid; gap: 26px; margin-top: 40px; counter-reset: step; }
@media (min-width: 840px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 28px; } }

.step { position: relative; padding-top: 26px; border-top: 3px solid var(--green); }
.step::before {
  counter-increment: step;
  content: counter(step);
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 32, 'wght' 800;
  font-size: 0.9rem;
  color: var(--dark);
  background: var(--green);
  width: 30px; height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  position: absolute;
  top: -16px;
  left: 0;
}
.step h3 {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 40, 'wght' 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: 1.16rem;
  color: var(--white);
  margin-bottom: 9px;
}
.step p { font-size: 0.94rem; color: rgba(255,255,255,0.66); line-height: 1.65; }

/* ── TRANSCRIPT ───────────────────────────────────── */
.try-grid { display: grid; gap: clamp(28px, 4.4vw, 52px); align-items: start; }
@media (min-width: 980px) { .try-grid { grid-template-columns: 0.9fr 1.1fr; gap: 52px; } }

.dialog {
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 20px;
  padding: clamp(20px, 3.2vw, 28px);
}
.dialog-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.44);
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.09);
}
.dialog-line { display: grid; gap: 4px; margin-bottom: 15px; }
.dialog-who {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
.dialog-line p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.88);
  background: rgba(255,255,255,0.055);
  border-radius: 13px;
  padding: 11px 14px;
}
.dialog-line.ai .dialog-who { color: var(--accent-light); }
.dialog-line.ai p {
  background: rgba(51,88,232,0.2);
  border: 1px solid rgba(51,88,232,0.34);
}
.dialog-foot {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.45);
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.09);
  line-height: 1.55;
}

/* ── AUTHORITY ────────────────────────────────────────
   The portrait is already lit against a saturated orange field, so it
   bleeds into the navy with a radial mask instead of needing a cutout.
   Orange against navy is the page's one moment of complementary contrast.
─────────────────────────────────────────────────── */
.who-grid { display: grid; gap: clamp(26px, 4vw, 48px); align-items: center; }
@media (min-width: 940px) { .who-grid { grid-template-columns: 0.82fr 1.18fr; gap: 54px; } }

.who-photo { position: relative; }
.who-photo img {
  width: 100%;
  max-width: 400px;
  /* No frame and no radius: the orange has to dissolve into the navy, otherwise
     this reads as a stock photo in a card. Percentages are sized so the stops
     land INSIDE the image box, which is the whole point of the mask. */
  mask-image: radial-gradient(76% 80% at 50% 38%, #000 44%, transparent 95%);
  -webkit-mask-image: radial-gradient(76% 80% at 50% 38%, #000 44%, transparent 95%);
}
.who-name {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 96, 'wght' 800;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  font-size: clamp(1.7rem, 4.6vw, 2.6rem);
  line-height: 1;
  margin-bottom: 14px;
}
.who-role {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 18px;
}
.who-grid p { color: rgba(255,255,255,0.7); line-height: 1.7; margin-bottom: 14px; }
.who-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}
.who-stat {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 12px;
  padding: 12px 18px;
}
.who-stat b {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 48, 'wght' 800;
  font-size: 1.55rem;
  color: var(--green);
  line-height: 1;
  letter-spacing: -0.02em;
}
.who-stat span {
  display: block;
  margin-top: 5px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* ── OFFER + PRICE ────────────────────────────────── */
.offer-grid { display: grid; gap: clamp(28px, 4.4vw, 52px); align-items: start; }
@media (min-width: 940px) { .offer-grid { grid-template-columns: 1fr 0.8fr; gap: 54px; } }

.incl { margin-top: 26px; display: grid; gap: 13px; }
.incl li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 13px;
  align-items: start;
  font-size: 1rem;
  color: rgba(255,255,255,0.86);
  line-height: 1.55;
}
.incl svg { color: var(--green); margin-top: 3px; flex-shrink: 0; }

.price-card {
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 20px;
  padding: clamp(24px, 3.6vw, 34px);
  box-shadow: var(--shadow-lg);
}
.price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255,255,255,0.11);
}
.price-row:last-of-type { border-bottom: none; }
.price-label {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.price-val {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 64, 'wght' 800;
  font-size: clamp(1.55rem, 4vw, 2rem);
  color: var(--white);
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.price-val small { font-size: 0.5em; font-weight: 700; color: rgba(255,255,255,0.55); }

.guarantee {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  margin-top: 22px;
  padding: 15px 17px;
  background: rgba(0,200,150,0.11);
  border: 1px solid rgba(0,200,150,0.3);
  border-radius: 14px;
}
.guarantee-seal {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--green);
  color: var(--dark);
}
.guarantee b {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 32, 'wght' 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 1rem;
  color: var(--white);
}
.guarantee span { font-size: 0.84rem; color: rgba(255,255,255,0.62); line-height: 1.45; }

.price-fine {
  margin-top: 16px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
}

/* ── FAQ ──────────────────────────────────────────── */
.faq-list { margin-top: 34px; }
.faq-item { border-bottom: 1px solid rgba(255,255,255,0.12); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 21px 0;
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 32, 'wght' 800;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  font-size: clamp(0.98rem, 2.2vw, 1.14rem);
  color: var(--white);
  text-align: left;
  transition: color 0.2s;
}
.faq-q:hover { color: var(--green); }
.faq-q:focus-visible { outline-offset: -2px; }
.faq-icon {
  flex-shrink: 0;
  font-size: 1.4rem;
  color: var(--green);
  transition: transform 0.25s ease;
  line-height: 1;
}
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-a {
  display: grid;
  grid-template-rows: minmax(0, 0fr);
  transition: grid-template-rows 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-item.open .faq-a { grid-template-rows: minmax(0, 1fr); }
.faq-a > * { min-height: 0; overflow: hidden; }
.faq-a p {
  font-size: 0.96rem;
  color: rgba(255,255,255,0.66);
  line-height: 1.75;
  padding-bottom: 22px;
  max-width: 68ch;
}

/* ── FINAL CTA ────────────────────────────────────── */
.final-grid { display: grid; gap: clamp(28px, 4.4vw, 52px); align-items: center; }
@media (min-width: 980px) { .final-grid { grid-template-columns: 1fr 0.88fr; gap: 54px; } }

.final-alt { margin-top: 24px; display: grid; gap: 10px; }
.final-alt a {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.98rem;
  color: rgba(255,255,255,0.8);
  padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  transition: color 0.2s;
}
.final-alt a:hover { color: var(--white); }
.final-alt svg { color: var(--green); flex-shrink: 0; }

/* ── CTA BAND (between sections) ──────────────────── */
.cta-band { padding: clamp(34px, 5vw, 56px) 0; text-align: center; }
.cta-band-line {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 64, 'wght' 800;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 1;
  font-size: clamp(1.4rem, 4.2vw, 2.2rem);
  color: var(--white);
  margin-bottom: 22px;
  text-wrap: balance;
}

/* ── STICKY MOBILE BAR ────────────────────────────── */
.sticky-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(10,22,40,0.95);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,0.11);
  transform: translateY(110%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.sticky-bar.show { transform: translateY(0); }
.sticky-bar .btn {
  padding: 14px 10px;
  font-size: 0.86rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-radius: 10px;
}
@media (min-width: 760px) { .sticky-bar { display: none; } }
@media (max-width: 759px) { body.has-sticky { padding-bottom: 80px; } }

/* ── FOOTER ───────────────────────────────────────── */
.lp-footer {
  background: var(--dark);
  color: rgba(255,255,255,0.55);
  padding: 42px 0 34px;
  border-top: 1px solid rgba(255,255,255,0.09);
  font-size: 0.875rem;
}
.lp-footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  align-items: center;
  justify-content: space-between;
}
.lp-footer a { color: rgba(255,255,255,0.72); }
.lp-footer a:hover { color: var(--white); text-decoration: underline; }
.lp-footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* ── COOKIE BANNER ────────────────────────────────── */
.cookie {
  position: fixed;
  left: 14px; right: 14px; bottom: 14px;
  z-index: 60;
  background: var(--white);
  color: var(--text);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 18px 20px;
  display: grid;
  gap: 14px;
  max-width: 560px;
  margin-inline: auto;
  font-size: 0.875rem;
  line-height: 1.6;
}
.cookie[hidden] { display: none; }
.cookie a { color: var(--accent); text-decoration: underline; }
.cookie-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-btns .btn { flex: 1; padding: 11px 16px; font-size: 0.9rem; }
@media (max-width: 759px) { .cookie { bottom: 90px; } }

/* ── LEGAL DOCUMENT PAGES ─────────────────────────── */
.doc {
  background: var(--bg);
  color: var(--text);
  padding: clamp(48px, 7vw, 88px) 0 clamp(60px, 8vw, 96px);
}
.doc h1 { font-size: clamp(1.9rem, 5vw, 2.7rem); margin-bottom: 10px; }
.doc .doc-updated { color: var(--muted); font-size: 0.9rem; margin-bottom: 40px; }
.doc h2 {
  font-size: 1.25rem;
  margin: 38px 0 12px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.doc h3 { font-size: 1.02rem; margin: 22px 0 8px; }
.doc p, .doc li { color: var(--muted); line-height: 1.75; font-size: 0.98rem; }
.doc p { margin-bottom: 14px; }
.doc ul { margin: 0 0 16px 0; display: grid; gap: 9px; }
.doc ul li { padding-left: 20px; position: relative; }
.doc ul li::before {
  content: '';
  position: absolute;
  left: 4px; top: 11px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.doc a { color: var(--accent); text-decoration: underline; }
.doc strong { color: var(--text); }
.doc table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 0.92rem; }
.doc th, .doc td {
  text-align: left;
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  vertical-align: top;
}
.doc th { color: var(--text); font-weight: 700; }
.doc-scroll { overflow-x: auto; }
/* Slots the user fills in with their registered-entity details. */
.doc-fill {
  background: rgba(255,193,7,0.16);
  border-bottom: 1px dashed #B98900;
  color: #6B4E00;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
}

/* ── REVEAL ───────────────────────────────────────── */
.js-loaded .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.js-loaded .reveal.visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .js-loaded .reveal { opacity: 1; transform: none; }
}