/* ===========================================================
   Contour Light® — provider-side design system
   Cloned from contourlight.com (Divi child theme) computed styles.
   Tokens verified live 2026-08-12 against /contour-light-pricing/

   TYPE SCALE v2 (2026-08-12, per Jerry): body copy raised from
   16px to 18px and muted greys darkened from #666/#999 to
   #4a5163/#667085 (7.9:1 and 5.0:1 on white). Small light-grey
   text was the recurring complaint — do not shrink these again.
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  --navy:#1f4198;          /* primary brand navy - buttons, headings */
  --navy-dark:#163272;     /* h4 / deep accents */
  --navy-deep:#274472;
  --navy-mid:#3c4c8f;
  --teal:#82c0c7;
  --teal-on-navy:#9fd4da;  /* lifted for contrast on navy */
  --ink:#282828;           /* body copy */
  --muted:#4a5163;         /* secondary copy — 7.9:1 on white */
  --muted-2:#667085;       /* meta / captions — 5.0:1 on white */
  --line:#e2e2e2;
  --line-soft:#e8e8e8;
  --bg-soft:#f7f7f7;
  --bg-tint:#eef1f9;
  --white:#fff;
  --warn:#a63a17;
  --good:#186b42;
  --shadow:0 12px 40px rgba(31,65,152,.10);
  --shadow-lg:0 18px 60px rgba(37,32,90,.17);
  --maxw:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,Helvetica,Arial,Lucida,sans-serif;
  font-size:18px;
  line-height:1.72;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-decoration:none}
p{margin:0 0 1.15em}

h1,h2,h3,h4,h5{font-family:Inter,Helvetica,Arial,Lucida,sans-serif;margin:0 0 .5em;color:var(--navy);line-height:1.2}
h1{font-size:50px;font-weight:700}
h2{font-size:36px;font-weight:700}
h3{font-size:23px;font-weight:700}
h4{font-size:17px;font-weight:800;color:var(--navy-dark)}

/* body-copy helpers — use these instead of inline font sizes */
.lead{font-size:21px;line-height:1.62;color:var(--muted)}
.lead-tight{font-size:20px;line-height:1.6;color:var(--muted)}
.pull{font-size:22px;line-height:1.5;color:var(--navy);font-weight:600}
.meta{font-size:16px;color:var(--muted-2);line-height:1.6}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.narrow{max-width:860px;margin:0 auto}
section{padding:88px 0}
.sec-soft{background:var(--bg-soft)}
.sec-tint{background:var(--bg-tint)}
.sec-navy{background:var(--navy);color:#fff}
.sec-navy h1,.sec-navy h2,.sec-navy h3,.sec-navy h4{color:#fff}
.sec-ink{background:#141414;color:#fff}
.sec-ink h1,.sec-ink h2,.sec-ink h3{color:#fff}
.center{text-align:center}

/* ---------- eyebrow ---------- */
.eyebrow{
  font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:4px;
  color:var(--navy);margin:0 0 14px;
}
.sec-navy .eyebrow,.sec-ink .eyebrow{color:var(--teal-on-navy)}

/* ---------- buttons (pill, per Divi computed style) ---------- */
.btn{
  display:inline-block;border-radius:55px;text-transform:uppercase;
  font-weight:700;font-size:14px;letter-spacing:.5px;
  padding:17px 42px;border:0;cursor:pointer;transition:.2s ease;
  text-align:center;
}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-dark);transform:translateY(-1px)}
.btn-white{background:#fff;color:var(--ink);font-weight:600;letter-spacing:1px;font-size:15px}
.btn-white:hover{background:#f0f0f0}
.btn-ghost{background:transparent;color:var(--navy);border:2px solid var(--navy);padding:15px 40px}
.btn-ghost:hover{background:var(--navy);color:#fff}
.btn-lg{padding:21px 56px;font-size:16px}
.btn-block{display:block;width:100%}
.btn-row{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.btn-note{font-size:16px;color:var(--muted);margin-top:16px}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;background:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
.site-header .wrap{display:flex;align-items:center;gap:28px;padding-top:14px;padding-bottom:14px}
.site-header img{width:150px}
.nav{margin-left:auto;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.nav a{font-size:15px;font-weight:500;color:var(--ink)}
.nav a:hover{color:var(--navy)}
.nav a.active{color:var(--navy);font-weight:700;border-bottom:2px solid var(--navy);padding-bottom:3px}
.nav .btn{padding:13px 28px;font-size:13px}
/* .nav a (0,1,1) outranks .btn-primary (0,1,0) — restate at matching specificity */
.nav a.btn-primary,.nav a.btn-primary:hover{color:#fff}
.nav a.btn-ghost{color:var(--navy)}

/* ---------- hero ---------- */
.hero{
  position:relative;background:#141414;color:#fff;overflow:hidden;
  padding:112px 0 132px;
}
.hero::after{
  content:"";position:absolute;inset:0;left:42%;
  background:url('../assets/hero-led.webp') center/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%);
  mask-image:linear-gradient(90deg,transparent,#000 22%);
  opacity:.9;
}
.hero .wrap{position:relative;z-index:2}
.hero-copy{max-width:660px}
.hero h1{color:#fff;font-size:60px;line-height:1.07;margin-bottom:22px}
.hero p{font-size:20px;line-height:1.62;color:#eaeaea;max-width:580px}
.hero .pull{color:#fff;font-size:20px}
.hero .eyebrow{color:var(--teal-on-navy)}

/* ---------- generic cards ---------- */
.grid{display:grid;gap:26px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:32px}
.card h3{font-size:21px}
.card p{color:var(--muted);font-size:17px;line-height:1.65}
.card p:last-child{margin-bottom:0}
.card ul{color:var(--muted);font-size:17px;line-height:1.6}

/* ---------- phase / ecosystem steps ---------- */
.phase{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:34px 30px;position:relative;box-shadow:var(--shadow);
}
.phase-num{
  font-size:13px;font-weight:800;letter-spacing:3px;text-transform:uppercase;
  color:var(--navy);margin-bottom:10px;
}
.phase h3{font-size:22px;margin-bottom:12px}
.phase ul{margin:0;padding-left:18px;color:var(--muted);font-size:17px;line-height:1.6}
.phase ul li{margin-bottom:9px}

/* ---------- the big offer card ---------- */
.offer{
  border:3px solid var(--navy);border-radius:18px;background:#fff;
  box-shadow:var(--shadow-lg);overflow:hidden;
}
.offer-head{background:var(--navy);color:#fff;padding:32px 40px;text-align:center}
.offer-head .tag{
  display:inline-block;background:rgba(255,255,255,.18);color:#fff;
  font-size:12px;font-weight:800;letter-spacing:4px;text-transform:uppercase;
  padding:8px 20px;border-radius:55px;margin-bottom:14px;
}
.offer-head h2{color:#fff;font-size:31px;margin:0 0 8px;text-transform:uppercase;letter-spacing:.5px}
.offer-head p{margin:0;color:#dbe2f5;font-size:17px}
.offer-body{padding:40px}

.price-line{display:flex;align-items:baseline;justify-content:center;gap:6px;margin:6px 0 4px}
.price-line .cur{font-size:26px;font-weight:700;color:var(--navy)}
.price-line .amt{font-size:64px;font-weight:800;color:var(--navy);line-height:1}
.price-sub{text-align:center;color:var(--muted);font-size:16px;margin-bottom:6px}

/* value stack table */
.stack{width:100%;border-collapse:collapse;margin:26px 0 0;font-size:17px}
.stack th{
  text-align:left;font-size:13px;letter-spacing:3px;text-transform:uppercase;
  color:var(--muted-2);font-weight:800;padding:0 0 10px;border-bottom:2px solid var(--line);
}
.stack th:last-child{text-align:right}
.stack td{padding:14px 0;border-bottom:1px solid var(--line-soft);vertical-align:top}
.stack td:last-child{text-align:right;white-space:nowrap;font-weight:700;color:var(--navy);padding-left:16px}
/* colspan cell is also :last-child, so it inherits the right-align — restate */
.stack .grp td{
  padding-top:28px;font-size:13.5px;letter-spacing:3px;text-transform:uppercase;
  color:var(--navy);font-weight:800;border-bottom:2px solid var(--line);
  text-align:left;
}
.stack .item strong{display:block;color:var(--ink);font-weight:600;font-size:17px}
.stack .item span{display:block;color:var(--muted);font-size:16px;line-height:1.55;margin-top:3px}
.stack .total td{
  border-bottom:0;border-top:3px solid var(--navy);padding-top:18px;
  font-size:19px;font-weight:800;color:var(--navy);
}
.stack .total td:last-child{font-size:24px}

.you-pay{
  background:var(--bg-tint);border-radius:14px;padding:28px 30px;margin-top:26px;text-align:center;
}
.you-pay .lbl{font-size:13px;letter-spacing:4px;text-transform:uppercase;color:var(--navy);font-weight:800}
.you-pay .big{font-size:54px;font-weight:800;color:var(--navy);line-height:1.1;margin:6px 0 2px}
.you-pay .sm{font-size:16px;color:var(--muted);margin:0}

/* guarantee panel */
.guarantee{
  border:2px solid var(--navy);border-radius:14px;background:var(--bg-tint);
  padding:28px 30px;margin:26px 0;
}
.guarantee h4{font-size:19px;margin-bottom:8px;text-transform:none;letter-spacing:0}
.guarantee p{margin:0;font-size:17px;color:var(--ink);line-height:1.65}

/* ---------- the delta callout (the money argument) ---------- */
.delta{
  background:var(--navy);color:#fff;border-radius:18px;padding:54px 44px;text-align:center;
}
.delta h2{color:#fff;font-size:38px;margin-bottom:10px}
.delta .rows{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:34px 0 10px;
  background:rgba(255,255,255,.08);border-radius:14px;overflow:hidden;
}
.delta .rows div{padding:28px 20px}
.delta .rows div+div{border-left:1px solid rgba(255,255,255,.16)}
.delta .rows .k{font-size:13px;letter-spacing:3px;text-transform:uppercase;color:var(--teal-on-navy);font-weight:800;margin-bottom:8px}
.delta .rows .v{font-size:36px;font-weight:800;color:#fff;line-height:1.1}
.delta .rows .n{font-size:16px;color:#d4dbf0;margin-top:8px;line-height:1.5}
.delta .punch{
  font-size:23px;font-weight:600;color:#fff;max-width:780px;margin:28px auto 0;line-height:1.5;
}
.delta .punch em{color:var(--teal-on-navy);font-style:normal;font-weight:700}

/* ---------- comparison table ---------- */
.cmp{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden;box-shadow:var(--shadow);font-size:17px}
.cmp th{
  background:var(--navy);color:#fff;padding:18px 20px;text-align:left;
  font-size:13px;letter-spacing:2px;text-transform:uppercase;font-weight:800;
}
.cmp th:nth-child(2),.cmp th:nth-child(3){text-align:center;width:22%}
.cmp th:nth-child(3){background:var(--navy-deep)}
.cmp td{padding:16px 20px;border-bottom:1px solid var(--line-soft)}
.cmp td:nth-child(2),.cmp td:nth-child(3){text-align:center;font-weight:700}
.cmp tr:last-child td{border-bottom:0}
.cmp tbody tr:nth-child(even){background:#fbfbfc}
.yes{color:var(--good);font-size:20px}
.no{color:var(--warn);font-size:20px}
.cmp .lbl{font-weight:600;color:var(--ink)}

/* ---------- DIY strip (deliberately plain, not a peer card) ---------- */
.diy{
  border:1px dashed #b9b9b9;border-radius:12px;background:#fafafa;
  padding:32px 34px;max-width:840px;margin:0 auto;
}
.diy h3{font-size:19px;color:var(--muted);text-transform:uppercase;letter-spacing:2px;margin-bottom:10px}
.diy .p{font-size:28px;font-weight:700;color:var(--muted);margin:0 0 12px}
.diy p{color:var(--muted);font-size:16.5px;line-height:1.65}
.diy ul{margin:12px 0;padding-left:18px;color:var(--muted);font-size:16.5px;line-height:1.6}
.diy ul li{margin-bottom:6px}
.diy .lock{
  margin-top:18px;padding-top:18px;border-top:1px solid #ddd;
  font-size:16px;color:var(--warn);font-weight:600;
}

/* ---------- proof panel (navy box holding a stat band) ---------- */
.proofbox{
  background:var(--navy);border-radius:18px;padding:50px 40px;max-width:960px;
  margin:0 auto;
}
.proofbox .note-under{
  text-align:center;color:#d4dbf0;font-size:18px;margin:34px auto 0;max-width:700px;line-height:1.6;
}
.proofbox .note-under strong{color:#fff}

/* ---------- stat band ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;text-align:center}
.stats > div{padding:10px 18px}
.stats > div + div{border-left:1px solid rgba(255,255,255,.18)}
.stats .n{font-size:44px;font-weight:800;color:#fff;line-height:1.05}
.stats .l{font-size:16px;color:#d4dbf0;margin-top:10px;line-height:1.5}
.sec-soft .stats .n{color:var(--navy)}
.sec-soft .stats .l{color:var(--muted)}
.sec-soft .stats > div + div{border-left:1px solid var(--line)}

/* ---------- quote ---------- */
.quote{
  background:#fff;border-left:5px solid var(--navy);border-radius:0 14px 14px 0;
  padding:32px 34px;box-shadow:var(--shadow);
}
.quote p{font-size:20px;font-style:italic;color:var(--ink);margin-bottom:14px}
.quote .who{font-size:14px;font-weight:700;color:var(--navy);font-style:normal;letter-spacing:1px;text-transform:uppercase}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:22px 0}
.faq summary{
  cursor:pointer;font-weight:700;font-size:19px;color:var(--navy);list-style:none;
  display:flex;justify-content:space-between;gap:20px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:26px;font-weight:400;color:var(--navy);line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:14px 0 0;color:var(--muted);font-size:17.5px;line-height:1.68}

/* ---------- CTA band ---------- */
.cta-band{background:var(--navy);color:#fff;text-align:center;padding:82px 0}
.cta-band h2{color:#fff;font-size:40px;margin-bottom:14px}
.cta-band p{color:#d4dbf0;font-size:20px;max-width:660px;margin:0 auto 30px;line-height:1.6}

/* ---------- footer ---------- */
.site-footer{background:#141414;color:#b0b0b0;padding:66px 0 30px;font-size:16px;line-height:1.7}
.site-footer h4{color:#fff;font-size:14px;letter-spacing:3px;text-transform:uppercase;margin-bottom:16px}
.site-footer a{color:#b0b0b0}
.site-footer a:hover{color:#fff}
.site-footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:10px}
.site-footer img{width:150px;margin-bottom:18px}
.site-footer .fine{
  margin-top:44px;padding-top:24px;border-top:1px solid #2b2b2b;
  font-size:14.5px;color:#8e8e8e;line-height:1.7;
}

/* ---------- DEMO ribbon (template site only) ---------- */
.demobar{
  background:#141414;color:#e8e8e8;font-size:15px;padding:11px 0;text-align:center;
  border-bottom:2px solid #f0b429;
}
.demobar b{color:#f0b429;letter-spacing:2px}
.demobar a{color:#fff;text-decoration:underline}
.demobar .toggle{
  display:inline-block;margin-left:10px;padding:4px 14px;
  border:1px solid rgba(255,255,255,.35);border-radius:55px;
}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr);gap:26px}
  .stats > div + div{border-left:0}
  .site-footer .cols{grid-template-columns:1fr 1fr}
  .hero::after{left:0;opacity:.26}
  .hero h1{font-size:46px}
  .delta .rows{grid-template-columns:1fr}
  .delta .rows div+div{border-left:0;border-top:1px solid rgba(255,255,255,.16)}
  .nav{display:none}
}
@media (max-width:680px){
  body{font-size:17px}
  section{padding:62px 0}
  h1{font-size:35px}.hero h1{font-size:37px}
  h2{font-size:29px}
  .lead{font-size:19px}.lead-tight{font-size:18px}.pull{font-size:20px}
  /* long unbreakable figures ($17,965) overflow a 2-col grid on phones */
  .stats{grid-template-columns:1fr;gap:22px}
  .stats .n{font-size:36px}
  .proofbox{padding:34px 20px;border-radius:14px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .offer-body{padding:26px 20px}
  .offer-head{padding:26px 22px}
  .offer-head h2{font-size:24px}
  .price-line .amt{font-size:48px}
  .you-pay .big{font-size:42px}
  .delta{padding:36px 22px}
  .delta h2{font-size:29px}
  .delta .punch{font-size:19px}
  .stack{font-size:16px}
  .stack td:last-child{font-size:15px}
  .cmp{font-size:15px}
  .cmp th,.cmp td{padding:12px 10px}
  .site-footer .cols{grid-template-columns:1fr}
}
.table-scroll{overflow-x:auto}