/* Ad Scaling funnel kit · base.css
   Swap ONLY the brand block below per client. Never edit the scales. */

:root{
  /* ---- BRAND (the only lines you change per client) ---- */
  --brand:        #7c3aed;   /* their main colour: buttons, accents */
  --brand-dark:   #6d28d9;   /* hover / pressed */
  --brand-tint:   #f3edff;   /* soft background band */

  /* ---- NEUTRALS (never change) ---- */
  --ink:          #0e0a1c;   /* headlines */
  --body:         #2b2147;   /* body text */
  --muted:        #5b4794;   /* small print */
  --line:         #e4d9fb;   /* hairlines */
  --bg:           #ffffff;
  --bg-soft:      #faf7ff;   /* alternating sections */

  /* ---- TYPE SCALE (mobile → desktop via clamp) ---- */
  --h1: clamp(34px, 7vw, 60px);
  --h2: clamp(26px, 4.2vw, 40px);
  --h3: clamp(19px, 2.4vw, 23px);
  --lead: clamp(17px, 2.2vw, 21px);
  --text: 17px;
  --small: 14.5px;
  --lh-tight: 1.1;
  --lh-body: 1.6;

  /* ---- SPACING (8px scale) ---- */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;
  --section-y: clamp(48px, 8vw, 96px);
  --wrap: 1120px;
  --wrap-narrow: 720px;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(46,16,101,.04), 0 8px 24px rgba(46,16,101,.06);
  --shadow-lift: 0 2px 4px rgba(46,16,101,.05), 0 16px 40px rgba(46,16,101,.10);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--body);
  font:400 var(--text)/var(--lh-body) -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block; height:auto}
h1,h2,h3{color:var(--ink); line-height:var(--lh-tight); margin:0 0 var(--s2); letter-spacing:-.02em}
h1{font-size:var(--h1); font-weight:800}
h2{font-size:var(--h2); font-weight:800}
h3{font-size:var(--h3); font-weight:700; letter-spacing:-.01em}
p{margin:0 0 var(--s2)}
.lead{font-size:var(--lead); color:var(--body)}
.small{font-size:var(--small); color:var(--muted)}
a{color:var(--brand)}

/* ---- LAYOUT ---- */
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
.narrow{max-width:var(--wrap-narrow); margin:0 auto}
section{padding:var(--section-y) 0}
.alt{background:var(--bg-soft)}
.tint{background:var(--brand-tint)}
.grid{display:grid; gap:var(--s3)}
@media(min-width:820px){
  .g2{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(3,1fr)}
  .g4{grid-template-columns:repeat(4,1fr)}
  .split{grid-template-columns:1.05fr .95fr; align-items:start; gap:var(--s5)}
}
.center{text-align:center}

/* ---- BUTTON: the only loud thing on the page ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--brand); color:#fff; font-weight:700; font-size:18px;
  padding:18px 28px; min-height:56px; border:0; border-radius:var(--radius-sm);
  text-decoration:none; cursor:pointer; width:100%;
  box-shadow:var(--shadow); transition:transform .15s ease, background .15s ease;
}
.btn:hover{background:var(--brand-dark); transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
@media(min-width:560px){ .btn{width:auto} }
.btn-ghost{background:#fff; color:var(--ink); border:1px solid var(--line)}

/* ---- HERO ---- */
.hero{padding:var(--s5) 0 var(--s4); background:linear-gradient(180deg,var(--brand-tint),#fff)}
.hero h1{margin-bottom:var(--s2)}
.eyebrow{
  display:inline-block; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--brand); background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:7px 14px; margin-bottom:var(--s3);
}
.trustline{display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s3); color:var(--muted); font-size:var(--small)}
.trustline b{color:var(--ink)}

/* ---- CARD / FORM ---- */
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); box-shadow:var(--shadow)}
.card-lift{box-shadow:var(--shadow-lift)}
.field{margin-bottom:var(--s2)}
label{display:block; font-size:var(--small); font-weight:600; color:var(--ink); margin-bottom:6px}
input,select,textarea{
  width:100%; padding:15px 14px; font-size:16px; /* 16px stops iOS zoom */
  border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff; color:var(--ink);
}
input:focus,select:focus{outline:2px solid var(--brand); outline-offset:1px; border-color:var(--brand)}
.consent{font-size:12.5px; color:var(--muted); margin-top:var(--s2); line-height:1.45}

/* ---- LISTS, PROOF, FAQ ---- */
.ticks{list-style:none; padding:0; margin:0; display:grid; gap:14px}
.ticks li{position:relative; padding-left:34px; font-size:var(--lead); color:var(--ink)}
.ticks li::before{
  content:""; position:absolute; left:0; top:6px; width:22px; height:22px; border-radius:50%;
  background:var(--brand-tint);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size:14px; background-repeat:no-repeat; background-position:center;
}
.stats{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s3); text-align:center}
@media(min-width:820px){ .stats{grid-template-columns:repeat(4,1fr)} }
.stat b{display:block; font-size:clamp(28px,4vw,40px); color:var(--ink); font-weight:800; line-height:1}
.stat span{font-size:var(--small); color:var(--muted)}
.quote{background:#fff; border:1px solid var(--line); border-left:3px solid var(--brand); border-radius:var(--radius-sm); padding:var(--s3)}
.quote p{font-size:var(--lead); color:var(--ink)}
.quote footer{font-size:var(--small); color:var(--muted)}
.step{counter-increment:step}
.step h3::before{
  content:counter(step); display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; margin-right:10px; border-radius:50%;
  background:var(--brand); color:#fff; font-size:15px; font-weight:800;
}
.steps{counter-reset:step}
details{border-bottom:1px solid var(--line); padding:var(--s3) 0}
details summary{cursor:pointer; font-weight:700; color:var(--ink); font-size:var(--lead); list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+"; float:right; color:var(--brand); font-weight:800}
details[open] summary::after{content:"\2013"}
details p{margin-top:var(--s2)}

/* ---- STICKY MOBILE CTA ---- */
.sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:50; padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96); border-top:1px solid var(--line); backdrop-filter:saturate(140%) blur(8px);
}
.sticky .btn{width:100%}
@media(min-width:820px){ .sticky{display:none} }
body{padding-bottom:84px}
@media(min-width:820px){ body{padding-bottom:0} }

/* ---- FOOTER ---- */
footer.site{padding:var(--s5) 0; border-top:1px solid var(--line); color:var(--muted); font-size:var(--small)}
footer.site a{color:var(--muted); text-decoration:underline}

/* ---- MOTION: fade + rise, once, 250ms ---- */
@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0; transform:translateY(12px); animation:rise .25s ease forwards}
  .rise:nth-child(2){animation-delay:.05s} .rise:nth-child(3){animation-delay:.1s}
  @keyframes rise{to{opacity:1; transform:none}}
}

/* ================= SECTION LIBRARY EXTRAS ================= */
.badge{display:inline-flex;align-items:center;gap:8px;background:var(--brand-tint);color:var(--brand-dark);
  border-radius:999px;padding:8px 14px;font-size:var(--small);font-weight:700}
.bar{background:var(--ink);color:#fff;text-align:center;padding:12px 16px;font-size:var(--small);font-weight:600}
.bar b{color:#fff}
.video{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lift);background:#000}
.video video,.video iframe{width:100%;aspect-ratio:16/9;display:block;border:0}
.gallery{display:grid;gap:var(--s2);grid-template-columns:repeat(2,1fr)}
@media(min-width:820px){.gallery{grid-template-columns:repeat(4,1fr)}}
.gallery figure{margin:0}
.gallery img{border-radius:var(--radius-sm);aspect-ratio:4/5;object-fit:cover}
.gallery figcaption{font-size:12.5px;color:var(--muted);margin-top:6px;text-align:center}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:6px;border-radius:var(--radius-sm);overflow:hidden}
.ba span{position:relative}
.ba span::after{content:attr(data-label);position:absolute;left:8px;bottom:8px;background:rgba(14,10,28,.82);
  color:#fff;font-size:12px;font-weight:700;padding:4px 8px;border-radius:6px}
.price{border:2px solid var(--brand);border-radius:var(--radius);padding:var(--s4);text-align:center;background:#fff}
.price .amount{font-size:clamp(40px,7vw,64px);font-weight:800;color:var(--ink);line-height:1;letter-spacing:-.03em}
.price .was{color:var(--muted);text-decoration:line-through;font-size:var(--lead)}
.guarantee{display:flex;gap:var(--s3);align-items:flex-start;background:var(--brand-tint);
  border-radius:var(--radius);padding:var(--s4)}
.guarantee .seal{flex:0 0 56px;height:56px;border-radius:50%;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px}
table.compare{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
table.compare th,table.compare td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);font-size:var(--small)}
table.compare th{background:var(--bg-soft);color:var(--ink);font-weight:700}
table.compare td.yes{color:var(--brand);font-weight:800}
table.compare td.no{color:var(--muted)}
.logos{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;justify-content:center;opacity:.75}
.logos img{height:34px;width:auto;filter:grayscale(1)}
.map{border:0;width:100%;height:320px;border-radius:var(--radius)}
.person{text-align:center}
.person img{width:132px;height:132px;border-radius:50%;object-fit:cover;margin:0 auto var(--s2)}
.qa-progress{height:6px;background:var(--line);border-radius:999px;overflow:hidden;margin-bottom:var(--s4)}
.qa-progress i{display:block;height:100%;background:var(--brand);width:33%}
.choice{display:block;width:100%;text-align:left;background:#fff;border:1.5px solid var(--line);
  border-radius:var(--radius-sm);padding:18px;margin-bottom:12px;font-size:var(--lead);color:var(--ink);cursor:pointer}
.choice:hover{border-color:var(--brand);background:var(--brand-tint)}