/* Revena Media — Solar Pay-Per-Lead
   Design system lifted 1:1 from the MSP site. Same tokens, same rhythm. */

:root{
  --navy:#0A1440;--ink:#101528;--body:#3F4767;--muted:#7A82A3;
  --blue:#1414FF;--blue-soft:#4C7DFF;--blue-tint:#EEF2FF;
  /* solar accent — used as fills, bars and glows, never as small text on white */
  --sun:#FFC22E;--sun-soft:#FFD96B;--sun-tint:#FFF6E2;--sun-ink:#7A5200;
  --bg:#FFFFFF;--panel:#F5F7FC;--line:#E3E7F2;--max:1180px
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);overflow-x:hidden;width:100%}
html{scroll-behavior:smooth}
body{min-height:100vh;padding-bottom:env(safe-area-inset-bottom);font-family:'Sora',system-ui,sans-serif;color:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.wrap-narrow{max-width:860px;margin:0 auto;padding:0 28px}

h1,h2,h3,h4{color:var(--navy);font-weight:700;line-height:1.1;letter-spacing:-.025em}
h1{font-size:clamp(2.4rem,4.8vw,3.9rem)}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem);margin-bottom:16px}
h3{font-size:1.1rem;margin-bottom:8px}
h4{font-size:1rem;margin-bottom:6px}
.lead{font-size:1.12rem;max-width:56ch}
.eyebrow{font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:14px;display:block}
.eyebrow::before{content:"";display:inline-block;width:9px;height:9px;border-radius:2px;background:var(--sun);margin-right:10px;vertical-align:baseline}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 28px;border-radius:999px;font-weight:600;font-size:1rem;border:0;cursor:pointer;font-family:inherit;transition:background .15s,transform .15s}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 8px 24px rgba(20,20,255,.22)}
.btn-primary:hover{background:#2A2AFF;transform:translateY(-1px)}
.btn-ghost{color:var(--navy);border:1.5px solid var(--line);background:#fff}
.btn-ghost:hover{border-color:var(--navy)}
.btn-sun{background:var(--sun);color:var(--navy);box-shadow:0 8px 24px rgba(255,194,46,.35)}
.btn-sun:hover{background:var(--sun-soft);transform:translateY(-1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn:focus-visible{outline:2px solid var(--blue-soft);outline-offset:3px}

/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:50;padding:16px 0;background:#fff}
nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
@media (min-width:961px){
  nav{background:transparent;padding:18px 0}
  nav .wrap{max-width:calc(var(--max) - 40px);background:rgba(255,255,255,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:999px;padding:10px 12px 10px 24px;box-shadow:0 10px 30px rgba(10,20,64,.08);transition:box-shadow .2s}
  nav.scrolled .wrap{box-shadow:0 14px 40px rgba(10,20,64,.14)}
}
nav img{height:38px;width:auto;display:block}
nav .links{display:flex;gap:34px;font-weight:600;color:var(--ink);font-size:.95rem}
nav .links a:hover,nav .links a[aria-current]{color:var(--blue)}
nav .btn{padding:12px 22px;font-size:.92rem}

/* ---------- hero ---------- */
.hero{padding:60px 0 90px}
.hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.hero h1{margin:0 0 20px}
.hero .lead{margin-bottom:34px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero-proof{display:flex;gap:32px;flex-wrap:wrap;margin-top:44px;padding-top:24px;border-top:1px solid var(--line)}
.hero-proof strong{display:block;font-size:1.4rem;color:var(--navy);font-weight:700}
.hero-proof span{font-size:.85rem;color:var(--muted)}
.hero-sm{padding:52px 0 44px}
.hero-sm .wrap{display:block}
.hero-sm h1{font-size:clamp(2rem,4vw,3.1rem)}

/* ---------- phone ---------- */
.stage{position:relative;display:flex;justify-content:center;align-items:center;min-height:640px;padding:40px 0;background:#fff}
.stage::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(20,20,255,.10),transparent 65%);filter:blur(10px)}
.stage::after{content:"";position:absolute;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(255,194,46,.28),transparent 68%);filter:blur(16px);transform:translate(38%,-30%);pointer-events:none}
.phone{position:relative;width:320px;height:640px;border-radius:48px;background:#0B0F1F;padding:12px;box-shadow:0 30px 70px rgba(10,20,64,.35),inset 0 0 0 2px #2A3050}
.phone::after{content:"";position:absolute;top:18px;left:50%;transform:translateX(-50%);width:110px;height:30px;border-radius:999px;background:#0B0F1F;z-index:3}
.screen{position:relative;width:100%;height:100%;border-radius:38px;background:#fff;overflow:hidden;display:flex;flex-direction:column}
.status{display:flex;justify-content:space-between;padding:16px 26px 0;font-size:.78rem;font-weight:600;color:var(--ink)}
.thread-head{padding:14px 18px 10px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #E1E4EE;background:#fff}
.thread-head .av{width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:.75rem;font-weight:700}
.thread-head div b{display:block;font-size:.85rem;color:var(--ink)}
.thread-head div span{font-size:.72rem;color:var(--muted)}
.feed{flex:1;overflow-y:auto;padding:14px 12px 22px;display:flex;flex-direction:column;gap:12px;scrollbar-width:none}
.feed::-webkit-scrollbar{display:none}
.bubble{align-self:flex-start;max-width:92%;background:var(--blue);color:#fff;border-radius:18px 18px 18px 6px;padding:12px 14px;font-size:.76rem;line-height:1.5;box-shadow:0 6px 18px rgba(20,20,255,.18)}
.bubble.new{animation:pop .45s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.bubble b{display:block;font-size:.84rem;margin-bottom:6px}
.bubble .row{display:flex;justify-content:space-between;gap:10px;border-top:1px solid rgba(255,255,255,.18);padding:4px 0}
.bubble .row span:first-child{opacity:.75}
.bubble .row span:last-child{font-weight:600;text-align:right}
.bubble .contact{margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.18);font-weight:600}
.bubble .contact small{display:block;font-weight:400;opacity:.85}
.stamp{align-self:center;font-size:.68rem;color:var(--muted)}

/* ---------- sections ---------- */
section{padding:90px 0}
.alt{background:#fff}
.tint{background:var(--panel)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:28px;margin-top:40px}
.cols .mark{width:34px;height:3px;background:linear-gradient(90deg,var(--blue),var(--sun));border-radius:3px;margin-bottom:16px}
.cols p{font-size:.96rem}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.split-even{grid-template-columns:1fr 1fr}

/* ---------- compare ---------- */
.compare{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#fff}
.compare .row{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
.compare .row:last-child{border-bottom:0}
.compare .row>div{padding:17px 22px;font-size:.95rem}
.compare .row>div:first-child{border-right:1px solid var(--line);color:var(--muted)}
.compare .row>div:last-child{color:var(--navy);font-weight:600}
.compare .row.head>div:last-child{background:var(--blue-tint);color:var(--blue)}
.compare.sun .row.head>div:last-child{background:var(--sun-tint);color:var(--sun-ink)}
.compare.sun .row:not(.head):hover>div:last-child{background:var(--sun-tint)}

/* ---------- checks ---------- */
.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:40px}
.check{padding:28px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.check .ico{width:40px;height:40px;border-radius:12px;background:var(--blue-tint);display:grid;place-items:center;margin-bottom:16px}
.check.sun .ico{background:var(--sun-tint)}
.check.sun .ico svg{stroke:var(--sun-ink)}
.check .ico svg{width:20px;height:20px;stroke:var(--blue);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.check p{font-size:.95rem}
.nopay{margin-top:28px;padding:20px 26px;border-left:3px solid var(--sun);background:var(--sun-tint);border-radius:0 14px 14px 0;color:var(--navy);font-weight:600}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;margin-top:32px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff}
th,td{padding:17px 20px;text-align:left;border-bottom:1px solid var(--line)}
th{font-weight:500;color:var(--muted);font-size:.85rem;background:#fff}
tr:last-child td{border-bottom:0}
td strong{color:var(--navy)}
td .x{color:var(--blue);font-weight:700}
.roi-note{margin-top:20px;font-size:.95rem;max-width:66ch}
.table-scroll{overflow-x:auto}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:40px;counter-reset:step}
.step{padding:24px 0 0;border-top:2px solid var(--sun)}
.step::before{counter-increment:step;content:counter(step);font-size:.85rem;color:var(--blue);font-weight:700;display:block;margin-bottom:12px}
.step p{font-size:.93rem}

/* ---------- speed ---------- */
.speed{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.speed .big{font-size:clamp(2.4rem,5.5vw,4.2rem);font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--navy)}
.speed .big span{color:var(--blue)}

/* ---------- cta band ---------- */
.cta{background:#fff;text-align:center;border-top:1px solid var(--line)}
.cta p{margin:14px 0 32px}
.cta .wrap{max-width:720px}
.cta-strip{background:var(--blue-tint);border:1px solid var(--line);border-radius:22px;padding:38px 40px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-top:48px}
.cta-strip h3{font-size:1.35rem;margin-bottom:4px}
.cta-strip p{font-size:.95rem;margin:0}

/* ---------- breadcrumbs ---------- */
.crumbs{font-size:.82rem;color:var(--muted);padding:26px 0 0}
.crumbs a:hover{color:var(--blue)}
.crumbs span{margin:0 8px;opacity:.5}

/* ---------- prose ---------- */
.prose p{margin-bottom:18px;font-size:1rem}
.prose h2{margin-top:52px}
.prose h3{margin-top:34px;font-size:1.15rem}
.prose ul{margin:0 0 20px 20px}
.prose li{margin-bottom:10px;font-size:1rem}
.prose li::marker{color:var(--blue)}
.prose>:first-child{margin-top:0}

/* ---------- FAQ ---------- */
.faq{margin-top:36px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{padding:22px 40px 22px 0;font-weight:600;color:var(--navy);cursor:pointer;list-style:none;position:relative;font-size:1.02rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);color:var(--blue);font-size:1.4rem;font-weight:400;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq .ans{padding:0 0 24px;font-size:.98rem;max-width:74ch}
.faq .ans p+p{margin-top:14px}

/* ---------- locations ---------- */
.loc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:40px}
.loc{display:block;padding:24px 26px;border:1px solid var(--line);border-radius:16px;background:#fff;transition:border-color .15s,transform .15s,box-shadow .15s}
.loc:hover{border-color:var(--blue-soft);transform:translateY(-2px);box-shadow:0 12px 30px rgba(10,20,64,.08)}
.loc b{display:block;color:var(--navy);font-size:1.05rem;font-weight:700;margin-bottom:4px;letter-spacing:-.02em}
.loc span{font-size:.88rem;color:var(--muted)}
.loc-arrow{color:var(--blue);font-weight:600;font-size:.88rem;margin-top:12px;display:block}

/* ---------- stat row ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:24px;margin-top:40px}
.stat{padding:26px;border-radius:16px;background:var(--panel);border:1px solid var(--line)}
.stat b{display:block;font-size:1.8rem;color:var(--navy);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.stat span{font-size:.86rem;color:var(--muted);display:block;margin-top:8px}

/* ---------- pill tabs ---------- */
.pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.pill{padding:9px 18px;border-radius:999px;border:1px solid var(--line);font-size:.88rem;font-weight:600;color:var(--navy);background:#fff}
.pill:hover{border-color:var(--blue-soft);color:var(--blue)}
.pill[aria-current]{background:var(--blue);color:#fff;border-color:var(--blue)}

/* ---------- quiz ---------- */
.quiz{max-width:640px;margin:0 auto;border:1px solid var(--line);border-radius:24px;background:#fff;padding:40px;box-shadow:0 18px 50px rgba(10,20,64,.07)}
.quiz-bar{height:4px;border-radius:4px;background:var(--line);overflow:hidden;margin-bottom:30px}
.quiz-bar i{display:block;height:100%;background:var(--blue);border-radius:4px;transition:width .35s cubic-bezier(.2,.8,.2,1);width:0}
.quiz-step{display:none;animation:fade .3s ease}
.quiz-step.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.quiz-q{font-size:1.35rem;color:var(--navy);font-weight:700;letter-spacing:-.025em;line-height:1.2;margin-bottom:8px}
.quiz-sub{font-size:.92rem;color:var(--muted);margin-bottom:24px}
.opts{display:grid;gap:10px}
.opt{text-align:left;width:100%;padding:16px 20px;border-radius:14px;border:1.5px solid var(--line);background:#fff;font-family:inherit;font-size:.98rem;font-weight:600;color:var(--navy);cursor:pointer;transition:border-color .15s,background .15s;display:flex;justify-content:space-between;align-items:center;gap:12px}
.opt:hover{border-color:var(--blue-soft);background:var(--blue-tint)}
.opt[aria-pressed="true"]{border-color:var(--blue);background:var(--blue-tint);color:var(--blue)}
.opt small{font-weight:400;color:var(--muted);font-size:.82rem}
.opt:focus-visible{outline:2px solid var(--blue-soft);outline-offset:2px}
.field{margin-bottom:16px}
.field label{display:block;font-size:.86rem;font-weight:600;color:var(--navy);margin-bottom:7px}
.field input,.field textarea,.field select{width:100%;padding:14px 16px;border-radius:12px;border:1.5px solid var(--line);font-family:inherit;font-size:.98rem;color:var(--ink);background:#fff}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--blue)}
.field textarea{min-height:96px;resize:vertical}
.quiz-back{background:none;border:0;color:var(--muted);font-family:inherit;font-size:.88rem;font-weight:600;cursor:pointer;padding:10px 0;margin-top:18px}
.quiz-back:hover{color:var(--blue)}
.quiz-done{text-align:center;padding:14px 0}
.quiz-done .tick{width:58px;height:58px;border-radius:50%;background:var(--blue-tint);display:grid;place-items:center;margin:0 auto 20px}
.quiz-done .tick svg{width:26px;height:26px;stroke:var(--blue);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.fineprint{font-size:.8rem;color:var(--muted);margin-top:18px;text-align:center}

/* ---------- contact cards ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:36px}
.ccard{padding:26px;border:1px solid var(--line);border-radius:16px;background:#fff}
.ccard b{display:block;color:var(--muted);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.ccard a,.ccard p{color:var(--navy);font-weight:600;font-size:1.02rem}
.ccard a:hover{color:var(--blue)}

/* ---------- footer ---------- */
footer{padding:56px 0 32px;border-top:1px solid var(--line);font-size:.88rem;color:var(--muted)}
.foot-top{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:30px;padding-bottom:38px}
.foot-top img{height:30px;width:auto;display:block;margin-bottom:16px}
.foot-top p{font-size:.88rem;max-width:30ch}
.foot-top h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--navy);margin-bottom:14px}
.foot-top ul{list-style:none}
.foot-top li{margin-bottom:9px}
.foot-top a:hover{color:var(--blue)}
.foot-bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;padding-top:26px;border-top:1px solid var(--line)}
.foot-bot a:hover{color:var(--blue)}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero{padding:32px 0 64px}
  .hero .wrap,.split,.speed,.split-even{grid-template-columns:1fr;gap:40px}
  .stage{min-height:auto;padding:36px 16px}
  .steps{grid-template-columns:1fr 1fr}
  nav .links{display:none}
  section{padding:64px 0}
  .foot-top{grid-template-columns:1fr 1fr;gap:28px}
  .cta-strip{padding:30px 28px}
}
@media (max-width:520px){
  .wrap,.wrap-narrow{padding:0 20px}
  nav{padding:16px 0}
  nav img{height:36px}
  nav .btn{padding:11px 18px;font-size:.85rem}
  h1{font-size:2.2rem}
  .hero .lead{font-size:1.02rem}
  .hero-ctas .btn{width:100%}
  .hero-proof{gap:18px 26px}
  .steps{grid-template-columns:1fr}
  .phone{width:270px;height:560px;border-radius:42px;padding:10px}
  .screen{border-radius:34px}
  .bubble{font-size:.72rem}
  .compare .row>div{padding:14px 16px;font-size:.9rem}
  th,td{padding:13px 14px;font-size:.9rem}
  .cta .btn,.cta-strip .btn{width:100%}
  .quiz{padding:28px 22px;border-radius:20px}
  .quiz-q{font-size:1.18rem}
  .foot-top{grid-template-columns:1fr}
  .foot-bot{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .bubble.new,.quiz-step{animation:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   MOTION LAYER
   All reveal styles are gated behind .js on <html>, so with
   JavaScript disabled every element renders normally and stays
   fully visible to crawlers.
   ============================================================ */

/* sticky-nav offset for anchor jumps */
section[id], header[id], div[id] { scroll-margin-top: 104px; }

/* ---------- scroll reveal ---------- */
.js [data-reveal]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .72s cubic-bezier(.2,.8,.2,1), transform .72s cubic-bezier(.2,.8,.2,1);
  transition-delay:var(--d,0ms);
}
.js [data-reveal="fade"]{transform:none}
.js [data-reveal="up-sm"]{transform:translateY(14px)}
.js [data-reveal="left"]{transform:translateX(-28px)}
.js [data-reveal="right"]{transform:translateX(28px)}
.js [data-reveal="zoom"]{transform:scale(.965)}
.js [data-reveal].is-in{opacity:1;transform:none}

/* ---------- ambient ---------- */
@keyframes rm-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes rm-glow{0%,100%{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
@keyframes rm-navIn{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}

.js .phone{animation:rm-float 7s ease-in-out infinite}
.js .stage::before{animation:rm-glow 9s ease-in-out infinite}
.js nav .wrap{animation:rm-navIn .65s cubic-bezier(.2,.8,.2,1) both}

/* ---------- scroll progress ---------- */
.scroll-prog{
  position:fixed;top:0;left:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--blue),var(--sun));
  z-index:60;pointer-events:none;
  transition:width .08s linear;
}

/* ---------- button micro-interactions ---------- */
.btn-primary{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.3),transparent 68%);
  transform:translateX(-130%);
  transition:transform .65s cubic-bezier(.2,.8,.2,1);
}
.btn-primary:hover::after{transform:translateX(130%)}
.btn:active{transform:translateY(1px)}

/* ---------- card lift ---------- */
.check,.ccard,.stat{
  transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s ease,border-color .24s ease;
}
.check:hover,.ccard:hover,.stat:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(10,20,64,.09);
  border-color:var(--blue-soft);
}
.check .ico{transition:transform .28s cubic-bezier(.2,.8,.2,1),background .24s ease}
.check:hover .ico{transform:scale(1.08) rotate(-4deg)}
.cols .mark{transition:width .3s cubic-bezier(.2,.8,.2,1)}
.cols > div:hover .mark{width:56px}

/* ---------- table + compare hover ---------- */
.compare .row > div{transition:background .2s ease,color .2s ease}
.compare .row:not(.head):hover > div:last-child{background:var(--blue-tint)}
tbody tr{transition:background .18s ease}
tbody tr:hover{background:var(--blue-tint)}
tbody tr:hover td .x{transform:scale(1.06)}
td .x{display:inline-block;transition:transform .2s cubic-bezier(.2,.8,.2,1)}

/* ---------- locations ---------- */
.loc .loc-arrow{transition:transform .24s cubic-bezier(.2,.8,.2,1)}
.loc:hover .loc-arrow{transform:translateX(5px)}
.pill{transition:transform .2s cubic-bezier(.2,.8,.2,1),border-color .2s,color .2s}
.pill:hover{transform:translateY(-2px)}

/* ---------- animated FAQ accordion ---------- */
.faq .ans{
  overflow:hidden;
  transition:height .34s cubic-bezier(.2,.8,.2,1), opacity .26s ease,
             padding-bottom .34s cubic-bezier(.2,.8,.2,1);
}
.faq summary{transition:color .2s ease}
.faq summary:hover{color:var(--blue)}
.faq summary::after{transition:transform .3s cubic-bezier(.2,.8,.2,1),color .2s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(180deg)}

/* ---------- quiz step transition ---------- */
.quiz-step{animation:none}
.js .quiz-step.on{animation:rm-stepIn .42s cubic-bezier(.2,.8,.2,1) both}
@keyframes rm-stepIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.opt{transition:border-color .16s,background .16s,transform .16s cubic-bezier(.2,.8,.2,1)}
.opt:hover{transform:translateX(3px)}
.quiz-done .tick{animation:rm-pop .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes rm-pop{0%{opacity:0;transform:scale(.6)}60%{transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}

/* ---------- footer links ---------- */
.foot-top a,.foot-bot a{transition:color .18s ease}

/* ---------- print: never leave revealed content invisible ---------- */
@media print{
  .js [data-reveal]{opacity:1 !important;transform:none !important}
  .scroll-prog,nav .btn{display:none}
  .faq .ans{height:auto !important;opacity:1 !important}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important}
  .js .phone,.js .stage::before,.js nav .wrap,.js .quiz-step.on,.quiz-done .tick{animation:none !important}
  .btn-primary::after{display:none}
  .scroll-prog{display:none}
  .faq .ans{transition:none}
  .check:hover,.ccard:hover,.stat:hover,.pill:hover,.opt:hover,.loc:hover{transform:none}
}

/* ============================================================
   QUIZ — enlarged + blue accents
   ============================================================ */
.quiz-band{background:linear-gradient(180deg,var(--blue-tint) 0%,#fff 72%)}
.quiz{
  position:relative;
  max-width:760px;
  padding:52px 54px 48px;
  border-radius:28px;
  border:1px solid var(--line);
  box-shadow:0 26px 70px rgba(10,20,64,.13);
  overflow:hidden;
}
/* blue accent bar, clipped to the card's rounded corners */
.quiz::before{
  content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,var(--blue),var(--blue-soft));
}
.quiz-bar{height:5px;margin-bottom:32px}
.qnum{
  display:inline-block;background:var(--blue-tint);color:var(--blue);
  font-weight:600;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;
  padding:6px 15px;border-radius:999px;margin-bottom:16px;
}
.quiz-q{font-size:1.62rem;margin-bottom:10px}
.quiz-sub{font-size:.96rem;margin-bottom:26px}
.opt{padding:19px 22px;font-size:1.03rem;border-radius:15px}
.opt[aria-pressed="true"]{box-shadow:0 0 0 3px rgba(20,20,255,.12)}
.quiz .field label{font-size:.9rem}
.quiz .field input,.quiz .field textarea{padding:15px 17px;font-size:1rem}
.quiz form .btn{padding:17px 28px;font-size:1.05rem}

/* done-for-you opt-in checkbox */
.chk{
  display:flex;gap:13px;align-items:flex-start;
  padding:16px 18px;margin-bottom:18px;
  border:1.5px solid var(--line);border-radius:14px;
  background:var(--blue-tint);cursor:pointer;
  transition:border-color .16s ease;
}
.chk:hover{border-color:var(--blue-soft)}
.chk input{width:18px;height:18px;accent-color:var(--blue);margin-top:2px;flex:none;cursor:pointer}
.chk span{font-size:.94rem;color:var(--navy);font-weight:600;line-height:1.45}

/* ============================================================
   DONE-FOR-YOU panel
   ============================================================ */
.dfy{
  background:var(--blue-tint);
  border:1px solid var(--line);
  border-radius:24px;
  padding:48px 52px;
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
}
.dfy h2{margin-bottom:14px}
.dfy p{font-size:1.02rem;max-width:44ch}
.dfy-steps{list-style:none;counter-reset:d;margin:0}
.dfy-steps li{position:relative;padding-left:48px;margin-bottom:22px;color:var(--navy);font-weight:700;font-size:1.02rem;letter-spacing:-.01em}
.dfy-steps li:last-child{margin-bottom:0}
.dfy-steps li::before{
  counter-increment:d;content:counter(d);
  position:absolute;left:0;top:-1px;width:31px;height:31px;border-radius:50%;
  background:var(--blue);color:#fff;display:grid;place-items:center;
  font-size:.84rem;font-weight:700;
  box-shadow:0 4px 12px rgba(20,20,255,.28);
}
.dfy-steps li span{display:block;font-weight:400;color:var(--body);font-size:.94rem;margin-top:4px;letter-spacing:0}

@media (max-width:960px){
  .dfy{grid-template-columns:1fr;padding:34px 28px;gap:32px}
  .quiz{padding:36px 30px}
}
@media (max-width:520px){
  .quiz{padding:28px 22px;border-radius:22px}
  .quiz-q{font-size:1.26rem}
  .dfy{padding:28px 22px}
}

/* ============================================================
   ABOUT — pull quote + founder byline
   ============================================================ */
.quote{
  margin:40px 0;padding:30px 36px;
  border-left:3px solid var(--sun);
  background:var(--sun-tint);
  border-radius:0 18px 18px 0;
}
.quote p{
  font-size:1.18rem;color:var(--navy);font-weight:600;
  line-height:1.45;margin:0;letter-spacing:-.015em;max-width:none;
}
.quote cite{
  display:block;margin-top:14px;font-style:normal;
  font-size:.85rem;color:var(--muted);font-weight:500;letter-spacing:.02em;
}
.byline{
  display:flex;align-items:center;gap:16px;
  margin-top:40px;padding-top:26px;border-top:1px solid var(--line);
}
.byline .av{
  width:46px;height:46px;border-radius:50%;flex:none;
  background:var(--blue);color:#fff;display:grid;place-items:center;
  font-size:.95rem;font-weight:700;letter-spacing:-.02em;
}
.byline b{display:block;color:var(--navy);font-size:1rem;font-weight:700}
.byline span{display:block;font-size:.88rem;color:var(--muted)}

/* ============================================================
   PRICING CARDS
   ============================================================ */
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(262px,1fr));gap:20px;margin-top:40px}
.price{
  display:flex;flex-direction:column;
  padding:32px 30px;border:1px solid var(--line);border-radius:20px;background:#fff;
  transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s ease,border-color .24s ease;
}
.price:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(10,20,64,.09);border-color:var(--blue-soft)}
.price.feature{border-color:var(--blue);box-shadow:0 18px 48px rgba(20,20,255,.12)}
.price .tag{
  display:inline-block;align-self:flex-start;
  background:var(--blue-tint);color:var(--blue);
  font-size:.72rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;margin-bottom:16px;
}
.price.feature .tag{background:var(--sun-tint);color:var(--sun-ink)}
.price h3{font-size:1.18rem;margin-bottom:8px}
.price>p{font-size:.94rem;margin-bottom:22px}
.price .amt{
  font-size:2.1rem;color:var(--navy);font-weight:700;
  letter-spacing:-.035em;line-height:1;display:block;
}
.price .amt span{font-size:.92rem;font-weight:500;color:var(--muted);letter-spacing:0}
.price .setup{margin-top:8px;font-size:.92rem;color:var(--body);font-weight:600}
.price .setup b{color:var(--navy)}
.price ul{list-style:none;margin:24px 0 0;padding:20px 0 0;border-top:1px solid var(--line)}
.price li{font-size:.93rem;margin-bottom:11px;padding-left:25px;position:relative;line-height:1.5}
.price li:last-child{margin-bottom:0}
.price li::before{
  content:"";position:absolute;left:0;top:7px;
  width:11px;height:6px;border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);
  transform:rotate(-45deg);
}
.price .foot{margin-top:auto;padding-top:24px}
.price .foot .btn{width:100%}
.price-note{margin-top:26px;font-size:.9rem;color:var(--muted);max-width:62ch}
@media (max-width:520px){.price{padding:26px 22px}}

/* ============================================================
   NAV DROPDOWN
   ============================================================ */
.drop{position:relative}
.drop-btn{
  background:none;border:0;padding:0;cursor:pointer;
  font-family:inherit;font-weight:600;font-size:.95rem;color:var(--ink);
  display:inline-flex;align-items:center;gap:8px;transition:color .18s ease;
}
.drop-btn::after{
  content:"";width:7px;height:7px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .22s cubic-bezier(.2,.8,.2,1);
}
.drop-btn:hover,.drop[data-open="true"] .drop-btn{color:var(--blue)}
.drop[data-open="true"] .drop-btn::after{transform:rotate(-135deg) translateY(2px)}
.drop-btn:focus-visible{outline:2px solid var(--blue-soft);outline-offset:4px;border-radius:4px}

.drop-menu{
  position:absolute;top:calc(100% + 18px);left:50%;
  transform:translateX(-50%) translateY(-6px);
  min-width:264px;padding:8px;z-index:60;
  background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 20px 50px rgba(10,20,64,.16);
  opacity:0;visibility:hidden;
  transition:opacity .2s ease,transform .2s cubic-bezier(.2,.8,.2,1),visibility .2s;
}
/* invisible bridge so the menu survives the gap on hover */
.drop-menu::before{content:"";position:absolute;top:-18px;left:0;right:0;height:18px}
.drop[data-open="true"] .drop-menu,.drop:focus-within .drop-menu{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
.drop-menu a{
  display:block;padding:11px 14px;border-radius:12px;
  font-size:.93rem;font-weight:600;color:var(--navy);
  transition:background .16s ease,color .16s ease;
}
.drop-menu a:hover{background:var(--blue-tint);color:var(--blue)}
.drop-menu a[aria-current]{color:var(--blue);background:var(--blue-tint)}
.drop-menu a span{display:block;font-weight:400;font-size:.79rem;color:var(--muted);margin-top:2px}
.drop-menu a:hover span{color:var(--blue-soft)}

@media (prefers-reduced-motion:reduce){
  .drop-menu{transition:none}
  .drop-btn::after{transition:none}
}

/* ============================================================
   PAGE TRANSITIONS
   Cross-document View Transitions where supported (Chrome, Edge,
   Safari). Browsers without it fall back to a JS fade in app.js,
   and with no JS at all navigation is simply instant.
   ============================================================ */
@view-transition { navigation: auto; }

::view-transition-old(root){ animation:vt-out .2s cubic-bezier(.4,0,1,1) both }
::view-transition-new(root){ animation:vt-in .34s cubic-bezier(.2,.8,.2,1) both }
@keyframes vt-out{ from{opacity:1;transform:none} to{opacity:0;transform:translateY(-6px)} }
@keyframes vt-in{ from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }

/* the header carries across instead of flashing */
nav{ view-transition-name:site-nav }
::view-transition-old(site-nav),::view-transition-new(site-nav){ animation:none }

/* fallback veil, only ever inserted by JS */
.page-veil{
  position:fixed;inset:0;background:#fff;z-index:200;
  opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.page-veil.on{opacity:1}

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){ animation:none }
  .page-veil{display:none}
}

/* ---------- coming soon ---------- */
.soon{
  min-height:64vh;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:80px 0;
}
.soon .eyebrow{display:inline-block}
.soon h1{margin:6px 0 18px}
.soon .lead{margin:0 auto;max-width:46ch}

/* ============================================================
   ABOVE THE FOLD
   On shorter laptop screens the hero compresses so the primary
   CTA is visible on load without scrolling. Tall screens keep
   the original spacing untouched.
   ============================================================ */
@media (min-width:961px) and (max-height:900px){
  .hero{padding:30px 0 64px}
  .hero h1{font-size:clamp(2rem,3.5vw,3rem);margin-bottom:14px}
  .hero .lead{margin-bottom:24px}
  .hero-proof{margin-top:28px;padding-top:18px}
  .hero-proof strong{font-size:1.25rem}
  .stage{min-height:auto;padding:0}
  .phone{width:290px;height:580px}
  .hero-sm{padding:34px 0 34px}
}
@media (min-width:961px) and (max-height:760px){
  .hero{padding:22px 0 52px}
  .hero h1{font-size:clamp(1.9rem,3.1vw,2.6rem)}
  .hero-proof{display:none}
  .phone{width:260px;height:520px}
}

/* ============================================================
   SOLAR ACCENT
   The product name carries a sun highlight so the page reads
   solar rather than generic tech. Headings get the marker
   swipe; smaller text gets amber ink, which still passes
   contrast against the white and panel backgrounds.
   ============================================================ */
.sun-word{white-space:nowrap}
h1 .sun-word,h2 .sun-word,h3 .sun-word{
  background:linear-gradient(180deg,transparent 58%,var(--sun-soft) 58%,var(--sun-soft) 94%,transparent 94%);
  padding:0 .08em;border-radius:3px
}
.eyebrow .sun-word,b .sun-word,p .sun-word,li .sun-word,.crumbs .sun-word{
  color:var(--sun-ink);font-weight:600
}

/* ============================================================
   TWO OFFERS
   Pay per lead and pay per appointment are separate products,
   so the split gets an explicit OR rule between them rather
   than reading as two cards in a grid. Blue marks the lead
   offer, sun marks the appointment offer.
   ============================================================ */
.offer-split{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:stretch;margin-top:40px}
.offer-split .loc{border-top-width:4px;border-top-style:solid;display:flex;flex-direction:column}
.offer-split .loc.o-lead{border-top-color:var(--blue)}
.offer-split .loc.o-appt{border-top-color:var(--sun)}
.offer-split .loc .loc-arrow{margin-top:auto;padding-top:14px}
.offer-tag{display:inline-block;align-self:flex-start;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;margin-bottom:12px}
.o-lead .offer-tag{background:var(--blue-tint);color:var(--blue)}
.o-appt .offer-tag{background:var(--sun-tint);color:var(--sun-ink)}
.offer-or{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-width:54px}
.offer-or::before,.offer-or::after{content:"";flex:1;width:2px;background:var(--line);border-radius:2px}
.offer-or span{flex:none;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;
  background:var(--sun);color:var(--navy);font-weight:700;font-size:.8rem;letter-spacing:.06em;
  box-shadow:0 8px 22px rgba(255,194,46,.4)}
@media (max-width:820px){
  .offer-split{grid-template-columns:1fr;gap:14px}
  .offer-or{flex-direction:row;min-width:0;width:100%;height:54px}
  .offer-or::before,.offer-or::after{width:auto;height:2px;flex:1}
}

/* ============================================================
   MOBILE NAV
   Logo and a close button in the bar, then a clean list of rows.
   Each group is a collapsed accordion, so the whole menu is
   readable at a glance instead of being one long scroll, and the
   two primary actions sit as full-width buttons at the bottom.
   ============================================================ */
.m-only{display:none}
.nav-cta{display:none}

.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 10px;border:0;background:transparent;cursor:pointer;
  border-radius:12px;flex:none}
.nav-toggle span{display:block;height:2px;width:100%;background:var(--navy);border-radius:2px;
  transition:transform .22s ease,opacity .18s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:960px){
  .nav-toggle{display:flex}
  nav .wrap{gap:10px}
  .m-only{display:block}

  /* the bar becomes logo + X while the panel is open */
  nav.open>.wrap>.btn{display:none}

  nav .links{
    display:block;position:absolute;left:0;right:0;top:100%;
    background:#fff;border-top:1px solid var(--line);
    box-shadow:0 24px 44px rgba(10,20,64,.13);
    padding:14px 0 26px;
    max-height:calc(100dvh - 76px);overflow-y:auto;-webkit-overflow-scrolling:touch;
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .2s ease,transform .22s ease,visibility .22s
  }
  nav.open .links{opacity:1;visibility:visible;transform:translateY(0)}

  /* every top row reads the same, whether it opens or navigates */
  nav .links>a,
  nav .links .drop-btn{
    display:flex;align-items:center;justify-content:space-between;
    width:100%;box-sizing:border-box;
    padding:18px 24px;min-height:60px;
    font:inherit;font-size:1.12rem;font-weight:500;letter-spacing:-.01em;
    color:var(--ink);background:none;border:0;text-align:left;cursor:pointer
  }
  nav .links>a:active,nav .links .drop-btn:active{background:var(--panel)}

  /* chevron */
  nav .links .drop-btn::after{
    content:"";display:block;width:10px;height:10px;flex:none;margin-left:16px;
    border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
    transform:rotate(45deg) translate(-2px,-2px);
    transition:transform .22s ease
  }
  nav .links .drop[data-open="true"] .drop-btn::after{
    transform:rotate(-135deg) translate(-3px,-3px)
  }

  /* collapsed by default, opens on tap */
  nav .links .drop{display:block}
  nav .links .drop-menu{
    display:block;position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;background:none;padding:0;margin:0;min-width:0;width:auto;
    max-height:0;overflow:hidden;transition:max-height .28s ease
  }
  /* the desktop open-state rule is more specific than the panel reset above
     and puts back translateX(-50%), which drags the submenu half its width
     off the left edge. This has to outrank it. */
  nav .links .drop[data-open="true"] .drop-menu{
    max-height:620px;transform:none;position:static;padding:0;min-width:0
  }
  nav .links .drop-menu a{
    display:block;padding:14px 24px 14px 38px;min-height:52px;box-sizing:border-box;
    font-size:1rem;font-weight:500;color:var(--body)
  }
  nav .links .drop-menu a span{display:block;font-size:.84rem;color:var(--muted);margin-top:2px}
  nav .links .drop-menu a:active{background:var(--blue-tint)}

  /* the two actions, full width, at the bottom */
  .nav-cta{display:block;padding:18px 24px 4px;margin-top:10px;border-top:1px solid var(--line)}
  .nav-cta .btn{display:flex;width:100%;justify-content:center;align-items:center;
    min-height:56px;font-size:1rem;margin-bottom:12px}

  body.nav-locked{overflow:hidden}
}

/* ============================================================
   MOBILE POLISH
   Phone-width fixes found by measuring in a real 375px viewport:
   the comparison and ROI tables were the only things wider than
   the screen, and overflow-x:hidden was quietly clipping them
   rather than letting anyone read the numbers.
   ============================================================ */
@media (max-width:760px){
  /* grid cells must be allowed to shrink below their content */
  .compare .row>div{min-width:0;overflow-wrap:anywhere}
  .compare{border-radius:16px}

  /* a numbers table is better scrolled than squashed */
  table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
    white-space:nowrap;border-radius:14px}
  table th,table td{padding:12px 14px;font-size:.86rem}

  /* four stats across is too tight on a phone */
  .hero-proof{display:grid;grid-template-columns:1fr 1fr;gap:18px 12px}
  .hero-proof>div{text-align:left}

  .steps{grid-template-columns:1fr;gap:26px}
  .cta-strip{flex-direction:column;align-items:flex-start;text-align:left}
  .cta-strip .btn{width:100%;text-align:center}

  /* full-width primary actions read as buttons, not links */
  .hero-ctas{flex-direction:column;align-items:stretch;gap:12px}
  .hero-ctas .btn{width:100%;text-align:center;padding:15px 22px}

  .phone{width:min(290px,82vw);height:auto;aspect-ratio:9/19}
  .stage{padding:24px 0}
}

@media (max-width:520px){
  /* comfortable tap targets everywhere that matters */
  .btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center}
  .faq summary{padding:20px 44px 20px 0;min-height:48px}
  .loc{padding:20px 20px}
  h1{letter-spacing:-.02em}
  .foot-top{grid-template-columns:1fr;gap:26px}
  .foot-top li{margin-bottom:12px}
  .foot-top li a{display:inline-block;padding:3px 0}
}

/* ============================================================
   PHONE HERO
   On a phone the four proof stats push the mockup so far down
   that nobody sees it, so they come out and the mockup sits
   directly under the CTA. The cutoff sits below iPad mini
   portrait (744px), so tablets and desktop keep the stats and
   the side-by-side layout.
   ============================================================ */
@media (max-width:700px){
  .hero-proof{display:none}
  .hero{padding-bottom:40px}
  .hero .wrap{gap:26px}
  .stage{padding:0;min-height:auto}
}

/* ============================================================
   TABLET HERO
   iPad sits with desktop, not with phones: the mockup stays
   beside the copy and the stats stay on. The columns tighten
   and the mockup scales so a 744px portrait iPad still fits
   without the headline turning into a narrow ribbon.
   ============================================================ */
@media (min-width:701px) and (max-width:960px){
  .hero .wrap{grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}
  .hero{padding:40px 0 64px}
  .hero h1{font-size:clamp(1.9rem,4.4vw,2.6rem)}
  .hero .lead{font-size:1rem;margin-bottom:24px}
  .hero-proof{gap:20px;margin-top:30px;padding-top:18px}
  .hero-proof strong{font-size:1.15rem}
  .hero-proof span{font-size:.78rem}
  .stage{min-height:auto;padding:0}
  .stage::before{width:320px;height:320px}
  .stage::after{width:220px;height:220px}
  .phone{width:238px;height:476px;border-radius:36px;padding:9px}
  .phone::after{width:82px;height:22px;top:13px}
  .screen{border-radius:28px}
  .bubble{font-size:.68rem;padding:10px 12px}
  .bubble b{font-size:.75rem}
  .hero-ctas .btn{padding:13px 20px;font-size:.92rem}
}