/* ═══════════════════════════════════════════════════════════
   BRAND TOKENS — sampled directly from the ClickFunnels site
   ═══════════════════════════════════════════════════════════ */
:root{
  --plum:#996699;        /* official brand purple, from your branding sheet */
  --plum-deep:#7c537c;   /* brand purple at 81% — the deeper section bands + footer */
  --plum-dark:#6a466a;   /* button hover only */
  --ink:#000000;         /* brand black */
  --grey:#eeeeee;        /* the light grey section background */
  --line:#dcdcdc;
  --white:#ffffff;

  /* Brand typeface is New Century Schoolbook. It isn't available as a free
     web font, so this stack uses the real thing for anyone who has it
     installed (it ships with Microsoft Office) and falls back to Georgia,
     which comes from the same design lineage — sturdy, high x-height,
     built for legibility. No third-party font loading, so pages are fast
     and nothing about your visitors leaves your site. */
  --display:"New Century Schoolbook","Century Schoolbook","Century Schoolbook L","TeX Gyre Schola",Georgia,"Times New Roman",serif;
  --body:"New Century Schoolbook","Century Schoolbook","Century Schoolbook L","TeX Gyre Schola",Georgia,"Times New Roman",serif;
  /* Your other two brand faces, unused so far but here if you want them.
     Impact is a system font on Windows and Mac so it needs no loading.
     Starfish is a licensed script — it would need buying to use on the web. */
  --accent-face:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;

  --wrap:1000px;
  --gap:clamp(52px,7vw,92px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

body{
  margin:0;
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.6;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--plum-deep)}
a:hover{color:var(--plum-dark)}
:focus-visible{outline:3px solid var(--plum-deep);outline-offset:3px}

h1,h2,h3{font-family:var(--display);color:var(--ink);line-height:1.15;margin:0 0 .5em;font-weight:700}
h3{font-family:var(--body);font-weight:700;font-size:1.3rem;line-height:1.3}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.band{padding:var(--gap) 0}
.band--grey{background:var(--grey)}
.band--plum{background:var(--plum);color:var(--white)}
.band--deep{background:var(--plum-deep);color:var(--white)}
.band--plum h1,.band--plum h2,.band--plum h3,
.band--deep h1,.band--deep h2,.band--deep h3{color:var(--white)}

/* ── section heading + the underline rule under it ── */
.sec-head{text-align:center;max-width:640px;margin:0 auto 3rem}
.sec-head h2{font-size:clamp(1.75rem,3.6vw,2.4rem);margin-bottom:0}
.rule{width:200px;max-width:60%;height:3px;background:var(--plum);border:0;margin:1.1rem auto 1.5rem}
.band--plum .rule,.band--deep .rule{background:var(--white)}
.sec-head p{font-size:1.05rem;margin:0}

/* ── buttons ── */
.btn{
  display:inline-block;font-family:var(--body);font-weight:700;font-size:1rem;
  padding:14px 30px;background:var(--plum);color:var(--white);
  border:1px solid var(--plum);text-decoration:none;text-align:center;
  transition:background .18s ease,border-color .18s ease;
}
.btn:hover{background:var(--plum-dark);border-color:var(--plum-dark);color:var(--white)}
.btn--deep{background:var(--plum-deep);border-color:var(--plum-deep)}
.btn--deep:hover{background:var(--plum-dark);border-color:var(--plum-dark)}
.btn--outline{background:transparent;border-color:var(--white);color:var(--white)}
.btn--outline:hover{background:rgba(255,255,255,.16);border-color:var(--white);color:var(--white)}
.btn--white{background:var(--white);border-color:var(--white);color:var(--ink)}
.btn--white:hover{background:var(--grey);border-color:var(--grey);color:var(--ink)}

/* ── top bar ── */
.topbar{background:var(--plum);padding:4px 0}
.topbar .wrap{display:flex;justify-content:center}
.topbar a{
  font-family:var(--body);font-size:.85rem;color:var(--white);text-decoration:none;
  border:1px solid rgba(255,255,255,.55);padding:3px 18px;
}
.topbar a:hover{background:rgba(255,255,255,.16);color:var(--white)}

/* ── hero ──
   REPLACE the background-image URL with your own hero photo
   (the desk/monitor/invoice shot). Keep the white gradient on top
   of it — that's what makes the black type readable. */
.hero{
  text-align:center;
  padding:clamp(44px,6vw,70px) 0 clamp(52px,7vw,80px);
  background-image:linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,.45)),url("img/hero-desk.jpg");
  background-color:#f4f4f4;
  background-size:cover;
  background-position:center;
}
.hero .logo{max-width:280px;margin:0 auto clamp(28px,4vw,44px)}
.hero .kicker{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1rem,2.2vw,1.4rem);letter-spacing:.06em;text-transform:uppercase;
  margin:0 0 .4rem;
}
.hero h1{
  font-size:clamp(1.75rem,4.4vw,3rem);text-transform:uppercase;
  letter-spacing:.005em;margin:0 0 clamp(26px,3.5vw,40px);
}
.hero .scrollnote{font-weight:700;font-size:.98rem;margin:1.6rem 0 0}

/* ── the QuickBooks promo band ── */
.promo{background:var(--plum);padding:9px 0}
.promo .wrap{display:flex;justify-content:center}
.promo a{
  display:block;width:100%;max-width:760px;text-align:center;
  font-family:var(--display);font-weight:700;font-size:clamp(.85rem,1.5vw,1.02rem);
  color:var(--white);text-decoration:none;
  border:1px solid rgba(255,255,255,.6);padding:8px 20px;
}
.promo a:hover{background:rgba(255,255,255,.16);color:var(--white)}

/* ── 3-across icon columns ── */
.cols{display:grid;gap:38px 34px;grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.col{text-align:center}
.icon{
  width:46px;height:46px;border-radius:50%;background:var(--plum);
  display:flex;align-items:center;justify-content:center;margin:0 auto 1.1rem;
}
.icon svg{width:23px;height:23px;fill:none;stroke:var(--white);stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}
.col h3{margin-bottom:.55em}
.col p{font-size:1rem;margin:0}

/* the 5 services sit 3-up then 2-up, centred — matches the original */
.svc-grid{max-width:900px;margin:0 auto}
.svc-grid .cols + .cols{margin-top:44px;max-width:600px;margin-inline:auto}

/* ── Kellie band ── */
.kellie{display:grid;gap:clamp(28px,4vw,54px);grid-template-columns:300px minmax(0,1fr);align-items:center}
@media (max-width:760px){.kellie{grid-template-columns:1fr;text-align:center;justify-items:center}}
.kellie .portrait{
  width:100%;max-width:300px;aspect-ratio:4/5;border-radius:50%;
  background:none;border:none;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:26px;font-size:.9rem;color:var(--white);
}
.kellie h2{font-size:clamp(1.7rem,3.4vw,2.3rem);margin-bottom:.15em}
.kellie .role{font-style:italic;font-weight:600;margin:0 0 1.1rem}
.kellie .btn{margin-top:.6rem}

/* ── contact row ── */
.contact{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));text-align:center}
.contact svg{width:26px;height:26px;margin:0 auto .9rem;fill:var(--ink)}
.contact .cue{font-style:italic;font-size:.93rem;margin:0 0 .3rem}
.contact .val{font-weight:700;font-size:1.05rem;margin:0;word-break:break-word}
.contact .val a{color:var(--ink);text-decoration:none}
.contact .val a:hover{text-decoration:underline}

/* ── benefits: text left, photo right ── */
.split{display:grid;gap:clamp(30px,4vw,52px);grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
@media (max-width:820px){.split{grid-template-columns:1fr}}
.split .sec-head{text-align:center;margin-bottom:2rem}
.benefit-list{list-style:none;margin:0;padding:0}
.benefit-list li{position:relative;padding:0 0 1.4rem 34px;font-size:1rem}
.benefit-list li:last-child{padding-bottom:0}
.benefit-list li::before{
  content:"";position:absolute;left:0;top:4px;width:17px;height:17px;border-radius:50%;
  background:var(--plum) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}
.photo-slot{
  background:var(--white);border:1px solid var(--line);aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:24px;font-size:.9rem;color:#666;
}

/* ── numbered steps ── */
.steps{display:grid;gap:40px 34px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.step{text-align:center}
.step .num{
  width:52px;height:52px;border-radius:50%;border:2px solid var(--white);
  display:flex;align-items:center;justify-content:center;margin:0 auto 1.1rem;
  font-family:var(--body);font-weight:700;font-size:1.5rem;
}
.step h3{margin-bottom:.6em}
.step p{font-size:1rem}

/* ── pricing ── */
.tiers{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));align-items:start}
.tier{text-align:left}
.tier h3{
  font-family:var(--body);font-weight:700;font-size:1.02rem;letter-spacing:.05em;
  text-transform:uppercase;text-align:center;margin-bottom:.5em;
}
/* Your live page isn't rendering these prices even though they're in the page.
   Delete this .tier .price block if you'd rather keep pricing off the site. */
.tier .price{
  text-align:center;font-family:var(--display);font-weight:700;font-size:2.1rem;
  color:var(--plum-deep);margin:0 0 1.3rem;
}
.tier .price small{font-family:var(--body);font-weight:400;font-size:.85rem;color:var(--ink)}
.tier ul{list-style:none;margin:0;padding:0}
.tier ul li{position:relative;padding:0 0 .85rem 26px;font-size:.98rem}
.tier ul li::before{
  content:"";position:absolute;left:0;top:7px;width:14px;height:9px;
  border-left:2.4px solid var(--plum);border-bottom:2.4px solid var(--plum);
  transform:rotate(-45deg);
}
.tier-actions{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));margin-top:3rem}
.tier-actions .btn{width:100%}
.tier-actions--two{max-width:660px;margin-inline:auto}

/* "All Packages Include" — rescued from the old order page */
.includes{max-width:780px;margin:3.2rem auto 0;background:var(--grey);padding:34px 32px}
.includes h3{text-align:center;font-size:1.3rem;margin-bottom:1.3rem}
.includes ul{list-style:none;margin:0;padding:0;columns:2;column-gap:36px}
.includes li{position:relative;padding:0 0 .85rem 26px;font-size:.98rem;break-inside:avoid}
.includes li::before{
  content:"";position:absolute;left:0;top:7px;width:14px;height:9px;
  border-left:2.4px solid var(--plum);border-bottom:2.4px solid var(--plum);
  transform:rotate(-45deg);
}
@media (max-width:620px){.includes ul{columns:1}}
.nocontract{text-align:center;max-width:640px;margin:2.4rem auto 0}
.nocontract strong{font-size:1.15rem}

/* ── FAQ (all answers visible, like the original) ── */
.faq{max-width:800px;margin:0 auto;text-align:center}
.faq .q{
  font-family:var(--body);font-weight:700;font-size:1.08rem;
  color:var(--plum-deep);margin:0 0 .55rem;
}
.faq .a{font-size:1rem;margin:0 0 2.5rem}
.faq .a:last-child{margin-bottom:0}

/* ── footer ── */
.footer{background:var(--plum-deep);color:var(--white);text-align:center;padding:44px 0 38px;font-size:.95rem}
.footer img{max-width:190px;margin:0 auto 20px}
.footer a{color:var(--white)}
.footer p{margin:0 0 .35rem}

/* ═══════════════════════════════════════════════════════════
   SUB-PAGE STYLES (request a quote, privacy, terms)
   ═══════════════════════════════════════════════════════════ */
.subhero{
  text-align:center;
  padding:clamp(34px,4.5vw,54px) 0 clamp(40px,5vw,62px);
  background-image:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)),url("img/hero-desk.jpg");
  background-color:#f4f4f4;background-size:cover;background-position:center;
}
.subhero .logo{max-width:200px;margin:0 auto clamp(18px,2.5vw,28px)}
.subhero h1{font-size:clamp(1.9rem,5vw,3.1rem);text-transform:uppercase;margin:0 0 .5rem}
.subhero p{font-size:1.05rem;margin:0}

/* two-column: form left, supporting copy right */
.quote-layout{
  display:grid;gap:clamp(34px,4vw,54px);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;
}
@media (max-width:880px){.quote-layout{grid-template-columns:1fr}}

.form-panel{border:1px solid var(--line);padding:clamp(22px,3vw,34px)}
.form-panel h2{font-family:var(--body);font-weight:700;font-size:1.3rem;margin-bottom:.3em}
.form-panel .intro{font-size:.95rem;margin-bottom:1.6rem}
.form-drop{
  border:2px dashed var(--plum);background:#faf7fa;padding:30px 24px;
  text-align:center;font-size:.95rem;
}
.form-drop strong{display:block;margin-bottom:.5rem;font-size:1.02rem}
.form-drop code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem;
  background:var(--white);border:1px solid var(--line);padding:1px 5px;
}

/* the "select X if…" copy blocks */
.pitch + .pitch{margin-top:2.4rem}
.pitch h2{font-family:var(--display);font-size:1.5rem;margin-bottom:.15em}
.pitch .cue{font-weight:700;font-size:1rem;margin:0 0 1rem}
.pitch ul{list-style:none;margin:0;padding:0}
.pitch li{position:relative;padding:0 0 .8rem 26px;font-size:.98rem}
.pitch li:last-child{padding-bottom:0}
.pitch li::before{
  content:"";position:absolute;left:0;top:7px;width:14px;height:9px;
  border-left:2.4px solid var(--plum);border-bottom:2.4px solid var(--plum);
  transform:rotate(-45deg);
}
.helpblock{margin-top:2.6rem}
.helpblock h2{font-family:var(--display);font-size:1.5rem;margin-bottom:.2em}

/* long-form legal pages */
.legal-body{max-width:760px;margin:0 auto}
.legal-body h2{font-size:1.5rem;margin:2.4rem 0 .6em}
.legal-body h2:first-child{margin-top:0}
.legal-body li{margin-bottom:.6rem}

/* real photos fill their slots cleanly */
img.portrait{padding:0;background:none;object-fit:cover}
img.photo-slot{padding:0;object-fit:cover}

/* ── quote form fields ── */
.qform .fld{display:block;margin:0 0 1.15rem}
.qform .fld > span,.qform legend{display:block;font-weight:700;font-size:1rem;margin-bottom:.4rem}
.qform .fld b,.qform legend b{color:var(--plum-deep)}
.qform input[type=text],.qform input[type=email],.qform input[type=tel],.qform textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);
  padding:.6rem .7rem;border:1px solid var(--line);background:var(--white);border-radius:4px;
}
.qform textarea{resize:vertical;min-height:3.2rem}
.qform input:focus,.qform textarea:focus{outline:none;border-color:var(--plum-deep);box-shadow:0 0 0 2px rgba(153,102,153,.28)}
.qform fieldset.fld{border:0;padding:0;margin:0 0 1.15rem;min-width:0}
.qform .chk{display:flex;align-items:flex-start;gap:.55rem;font-weight:400;margin:.4rem 0;cursor:pointer}
.qform .chk input{margin-top:.28rem;accent-color:var(--plum);width:auto}
.qform .cond > span{font-weight:600;font-size:.95rem;font-style:italic;color:#555}
.qform .btn{margin-top:.4rem;cursor:pointer}
.qerr{color:#9b2226;font-weight:700;margin:.2rem 0 1rem}
#quoteThanks h2{font-family:var(--body);font-weight:700;font-size:1.3rem}