/* ============================================================
   THEME V2 — visual pass (2026-09-24)
   Loaded AFTER each page's own CSS. Remove the <link id="theme-v2">
   line (or add ?theme=classic to any URL) to get the old look back.
   Research basis: Podium / Owner / ServiceTitan / Jobber homepages
   all use one saturated accent on warm off-white + near-black ink,
   a real grotesk font (Inter / Graphik / Sofia Pro), big tight headlines.
   ============================================================ */
@import url("./fonts/fonts.css");

:root{
  /* green scale (one brand hue, 50 to 900) */
  --g-50:#EEFBF4; --g-100:#D5F5E3; --g-200:#AAE9C9; --g-300:#72D6A8;
  --g-400:#34BD83; --g-500:#119E68; --g-600:#0B8055; --g-700:#0A6645;
  --g-800:#0B5039; --g-900:#0A3527; --g-950:#062219;
  /* warm neutrals */
  --n-0:#FFFFFF; --n-25:#FBFAF7; --n-50:#F6F5F0; --n-100:#ECEAE3;
  --n-200:#DEDBD1; --n-400:#9A968B; --n-600:#5E5B53; --n-800:#2A2925; --n-900:#171714;

  --accent:var(--g-600); --accent-soft:var(--g-50);
  --ink:var(--n-900); --muted:var(--n-600);
  --paper:var(--n-25); --card:var(--n-0); --border:var(--n-100);
  --ring:0 0 0 4px color-mix(in srgb,var(--g-400) 35%,transparent);
  --sh-1:0 1px 2px rgba(23,23,20,.05),0 1px 1px rgba(23,23,20,.03);
  --sh-2:0 1px 2px rgba(23,23,20,.04),0 8px 24px -8px rgba(23,23,20,.12);
  --sh-3:0 2px 4px rgba(23,23,20,.04),0 24px 48px -16px rgba(10,53,39,.22);
  --r-card:18px; --r-lg:26px;
  --f-body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --f-head:"Inter Tight","Inter",ui-sans-serif,system-ui,sans-serif;
}

body{font-family:var(--f-body);color:var(--ink);background:var(--paper);
  font-feature-settings:"cv11","ss01","ss03";text-rendering:optimizeLegibility;letter-spacing:-.005em}
h1,h2,h3,h4,.brand-word,.price{font-family:var(--f-head)}
::selection{background:var(--g-200);color:var(--g-950)}

/* top strip + header */
.demo-banner{background:var(--g-950);color:var(--g-100);letter-spacing:.02em}
.site-header{background:color-mix(in srgb,var(--n-25) 82%,transparent);border-bottom-color:transparent;
  box-shadow:0 1px 0 var(--n-100)}
.brand-word{font-weight:800;letter-spacing:-.035em}
.nav{color:var(--n-600)} .nav a{transition:color .15s} .nav a:hover{color:var(--g-700)}

/* buttons */
.btn{font-weight:650;letter-spacing:-.01em;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s}
.btn-primary{background:var(--g-600);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(6,34,25,.25),0 6px 16px -6px color-mix(in srgb,var(--g-600) 70%,transparent)}
.btn-primary:hover{background:var(--g-700);filter:none;transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:var(--n-0);border:1px solid var(--n-200);box-shadow:var(--sh-1)}
.btn-ghost:hover{border-color:var(--n-400)}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}

/* hero */
.hero{background:
  radial-gradient(900px 420px at 88% 8%,color-mix(in srgb,var(--g-300) 30%,transparent),transparent 62%),
  radial-gradient(700px 360px at 0% 100%,color-mix(in srgb,var(--g-100) 70%,transparent),transparent 60%),
  linear-gradient(180deg,var(--n-25),var(--n-50));
  position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--n-100) 1px,transparent 1px),linear-gradient(90deg,var(--n-100) 1px,transparent 1px);
  background-size:44px 44px;mask-image:radial-gradient(ellipse 70% 60% at 70% 30%,#000 20%,transparent 75%)}
.hero .wrap{position:relative}
.hero-kicker{display:inline-flex;align-items:center;gap:.5rem;background:var(--n-0);color:var(--g-700);
  border:1px solid var(--g-100);box-shadow:var(--sh-1);border-radius:999px;padding:.4rem .8rem;
  font-weight:650;letter-spacing:.01em;text-transform:none;font-size:.8rem}
.hero-kicker::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--g-400);
  box-shadow:0 0 0 3px var(--g-100)}
.hero h1{font-weight:800;letter-spacing:-.045em;line-height:1.02;font-size:clamp(2.2rem,6vw,4rem)}
.hero h1 em,.hero h1 .hl{font-style:normal;color:var(--g-600)}
.hero .lede{color:var(--n-600)}
.phone-chrome{background:linear-gradient(160deg,#23241f,#0f0f0d)}
.mock-phone{filter:drop-shadow(0 40px 60px rgba(10,53,39,.28))}
.float-score{border:1px solid var(--n-100);box-shadow:var(--sh-3);border-radius:16px}
.float-score-kicker{color:var(--g-600)!important}

/* proof strip (added by theme-v2.js) */
.proof-strip{border-top:1px solid var(--n-100);border-bottom:1px solid var(--n-100);background:var(--n-0)}
.proof-strip ul{list-style:none;margin:0 auto;padding:1rem 0;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
  width:min(1120px,calc(100% - 2.5rem))}
.proof-strip li{display:flex;gap:.65rem;align-items:center;font-weight:600;font-size:.92rem;color:var(--n-800);line-height:1.3}
.proof-strip li i{flex:none;width:2rem;height:2rem;border-radius:10px;display:grid;place-items:center;
  background:var(--g-50);color:var(--g-700);font-style:normal;border:1px solid var(--g-100)}
.proof-strip li i svg{width:1rem;height:1rem}
@media (max-width:820px){.proof-strip ul{grid-template-columns:1fr 1fr;gap:.85rem .75rem}.proof-strip li{font-size:.85rem}}

/* bands + section heads */
.band{padding:clamp(3.5rem,7vw,6rem) 0}
.band:nth-of-type(even):not([style]){background:var(--n-50)}
#included{background:linear-gradient(180deg,var(--g-50),var(--n-25))!important}
#plan{background:var(--n-0)!important}
.section-kicker{display:inline-block;color:var(--g-700);background:var(--g-50);border:1px solid var(--g-100);
  border-radius:999px;padding:.3rem .7rem;font-weight:700;font-size:.72rem;letter-spacing:.06em;margin-bottom:1rem}
.band h2{font-weight:800;letter-spacing:-.04em;line-height:1.06;font-size:clamp(1.9rem,4.2vw,3rem);max-width:20ch}
.sub{color:var(--n-600);font-size:clamp(1.02rem,1.6vw,1.15rem);line-height:1.55}

/* cards */
.card,.include-item,.pillar,.sample-card,.cost-block,.plan-card{border:1px solid var(--n-100);border-radius:var(--r-card);box-shadow:var(--sh-1);background:var(--n-0)}
.card,.include-item,.pillar{transition:transform .2s ease,box-shadow .2s ease,border-color .2s}
.card:hover,.include-item:hover,.pillar:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--n-200)}
.card h3,.pillar strong{font-family:var(--f-head);letter-spacing:-.02em;font-weight:700}
.check{color:var(--g-600)}
.step .n{background:var(--g-600);box-shadow:0 0 0 4px var(--g-100)}

/* dark ownership band */
.data-band{background:
  radial-gradient(600px 300px at 100% 0%,color-mix(in srgb,var(--g-500) 35%,transparent),transparent 60%),
  var(--g-950);border-radius:var(--r-lg);box-shadow:var(--sh-3)}
.data-band .section-kicker{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:var(--g-200)!important}

/* samples */
.sample-card{border-radius:var(--r-card)}
.sample-card:hover{transform:translateY(-3px);box-shadow:var(--sh-3)}
.sample-meta .trade{color:var(--g-700)}

/* plans: equal, clean */
.plan-card{border-radius:var(--r-lg);box-shadow:var(--sh-2)}
.plan-card-leads{border-color:var(--g-200);box-shadow:0 0 0 1px var(--g-100),var(--sh-2)}
.plan-eyebrow{color:var(--g-700)!important}
.price{letter-spacing:-.05em;font-weight:800;color:var(--n-900)}
.plan-list li::marker{color:var(--g-500)}

/* audit frame */
.audit-shell{border-radius:var(--r-lg)!important;border:1px solid var(--g-100)!important;
  box-shadow:var(--sh-3)!important;background:var(--n-0)!important;overflow:hidden}

/* faq */
.faq-list{background:var(--n-0);border:1px solid var(--n-100);border-radius:var(--r-card);padding:.5rem 1.25rem;box-shadow:var(--sh-1)}
.faq-item{padding:1.05rem 0}
.faq-item:first-child{padding-top:1.05rem}
.faq-item:last-child{border-bottom:0}
.faq-item button{font-family:var(--f-head);font-weight:700;letter-spacing:-.015em}

/* footer */
.site-footer{background:#1E293B;color:rgba(255,255,255,.75);border-top:0}
.site-footer strong,.footer-inner strong{color:#fff}
.site-footer a{color:#fff} .site-footer a:hover{color:#34C88A}
.site-footer code{color:var(--g-200)}

/* motion (respects reduced motion) */
@media (prefers-reduced-motion:no-preference){
  .v2-reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
  .v2-reveal.in{opacity:1;transform:none}
}

/* answering demo block */
.answer-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.answer-card{background:var(--n-0);border:1px solid var(--n-100);border-radius:var(--r-lg);padding:1.25rem;box-shadow:var(--sh-3);display:grid;gap:.6rem}
.answer-row{display:flex;align-items:center;gap:.55rem;font-size:.9rem;padding-bottom:.6rem;border-bottom:1px solid var(--n-100)}
.answer-row em{margin-left:auto;font-style:normal;color:var(--n-600);font-size:.8rem}
.answer-dot{width:.6rem;height:.6rem;border-radius:50%;background:var(--g-400);box-shadow:0 0 0 4px var(--g-100);animation:v2pulse 1.8s ease-in-out infinite}
.answer-bubble{margin:0;padding:.65rem .85rem;border-radius:14px;font-size:.92rem;line-height:1.4;max-width:88%}
.answer-bubble.ai{background:var(--g-50);border:1px solid var(--g-100);color:var(--g-950)}
.answer-bubble.caller{background:var(--n-50);border:1px solid var(--n-100);justify-self:end}
.answer-text{margin-top:.35rem;background:var(--g-950);color:#fff;border-radius:14px;padding:.75rem .9rem;display:grid;gap:.2rem;font-size:.88rem}
.answer-text strong{color:var(--g-300);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}
@keyframes v2pulse{50%{box-shadow:0 0 0 8px transparent}}
@media (max-width:820px){.answer-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.answer-dot{animation:none}}