/* ============================================================
   THE BLUE COLLAR FOUNDER — sales page system
   Brand: Gold #B88F44 · Dark #1A1A1A · White (BCF Brand Guidelines)
   Added blue per client note; layout rhythm referenced from Nick's site.
   Signature device: the gold hairline rule from the logo lockup.
   ============================================================ */

:root{
  /* color */
  --ink:#1A1A1A;
  --navy:#16293D;
  --navy-2:#1F374F;
  --navy-3:#26415C;
  --blue:#1D63A8;
  --blue-hover:#17517F;
  --blue-tint:#E7EFF7;
  --gold:#B88F44;
  --gold-lift:#D4A959;
  --bone:#F5F2EC;
  --bone-2:#EDE8DF;
  --white:#FFFFFF;
  --slate:#3E4A57;
  --muted-dark:#A9B6C6;      /* body text on navy */
  --line-dark:rgba(212,169,89,.28);
  --line-light:rgba(26,26,26,.12);

  /* type */
  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --body:'Inter',Arial,-apple-system,BlinkMacSystemFont,sans-serif;

  /* spacing (8pt) */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;
  --pad:clamp(64px,9vw,116px);
  --gutter:clamp(20px,5vw,40px);
  --wide:1160px;
  --narrow:760px;
  --radius:4px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  color:var(--slate);
  background:var(--bone);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.022em;line-height:1.05;margin:0;color:var(--ink)}
h1{font-size:clamp(2.35rem,6.2vw,4.05rem)}
h2{font-size:clamp(1.95rem,4.4vw,3rem);line-height:1.08}
h3{font-size:clamp(1.15rem,2vw,1.42rem);line-height:1.2;letter-spacing:-.014em}
h4{font-size:1.02rem;line-height:1.3;letter-spacing:-.008em}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
strong{font-weight:600;color:var(--ink)}
a{color:var(--blue)}

/* The letterspaced small caps come straight off the running foot of the brand PDF */
.eyebrow{
  font-family:var(--display);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--blue);
  margin:0 0 var(--s3);
  display:flex;
  align-items:center;
  gap:14px;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--gold);opacity:.55;max-width:64px}
.eyebrow--center{justify-content:center}
.eyebrow--center::before{content:"";flex:1;height:1px;background:var(--gold);opacity:.55;max-width:64px}

.lede{font-size:clamp(1.06rem,1.6vw,1.21rem);line-height:1.62}

/* ---------- layout ---------- */
.wrap{max-width:var(--wide);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.wrap--narrow{max-width:var(--narrow)}
.col-narrow{max-width:820px}
.section{padding-top:var(--pad);padding-bottom:var(--pad)}
.section--tight{padding-top:clamp(48px,6vw,76px);padding-bottom:clamp(48px,6vw,76px)}
.section--flush-bottom{padding-bottom:0}

.on-bone{background:var(--bone);color:var(--slate)}
.on-white{background:var(--white);color:var(--slate)}
.on-navy{background:var(--navy);color:var(--muted-dark)}
.on-ink{background:var(--ink);color:var(--muted-dark)}
.on-navy h1,.on-navy h2,.on-navy h3,.on-navy h4,
.on-ink h1,.on-ink h2,.on-ink h3,.on-ink h4{color:var(--white)}
.on-navy .eyebrow,.on-ink .eyebrow{color:var(--gold-lift)}
.on-navy strong,.on-ink strong{color:var(--white)}
.price strong,.card--navy strong,.scheduler strong{color:var(--white)}

.center{text-align:center}
.head{max-width:min(100%,720px)}
.head--center{margin-left:auto;margin-right:auto;text-align:center}
.head p{margin-top:var(--s3)}

/* the gold hairline from the logo, used as the structural divider */
.rule{height:2px;background:var(--gold);border:0;width:56px;margin:var(--s4) 0}
.rule--center{margin-left:auto;margin-right:auto}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:15px 30px;
  font-family:var(--display);font-size:1rem;font-weight:700;letter-spacing:-.01em;
  border:2px solid transparent;border-radius:var(--radius);
  text-decoration:none;cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.btn--blue{background:var(--blue);color:var(--white);border-color:var(--blue)}
.btn--blue:hover{background:var(--blue-hover);border-color:var(--blue-hover)}
.btn--gold{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.btn--gold:hover{background:var(--gold-lift);border-color:var(--gold-lift)}
.btn--ghost-light{background:transparent;color:var(--white);border-color:rgba(255,255,255,.4)}
.btn--ghost-light:hover{border-color:var(--gold);color:var(--gold-lift)}
.btn--ghost-dark{background:transparent;color:var(--navy);border-color:rgba(26,26,26,.25)}
.btn--ghost-dark:hover{border-color:var(--blue);color:var(--blue)}
.btn--wide{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:var(--s5)}
.btn-note{font-size:.87rem;line-height:1.5;margin:14px 0 0}
.on-navy .btn-note,.on-ink .btn-note{color:var(--muted-dark)}

a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--gold-lift);outline-offset:3px;border-radius:2px;
}

/* ---------- logo lockup (mirrors the BCF logo: text / gold rule / text) ---------- */
.logo{display:inline-flex;flex-direction:column;justify-content:center;min-height:44px;width:max-content;justify-self:start;text-decoration:none;line-height:1}
.logo__a{
  display:block;font-family:var(--display);font-weight:400;
  font-size:.94rem;letter-spacing:-.012em;color:var(--white);
}
.logo__rule{display:block;height:2px;background:var(--gold);margin:3px 0}
.logo__b{
  display:block;font-family:var(--display);font-weight:700;
  font-size:1.16rem;letter-spacing:.055em;color:var(--white);
}
.logo--dark .logo__a,.logo--dark .logo__b{color:var(--ink)}
.logo--lg .logo__a{font-size:1.2rem}
.logo--lg .logo__b{font-size:1.5rem}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:100;background:var(--navy);border-bottom:1px solid rgba(255,255,255,.09)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:76px;padding-top:12px;padding-bottom:12px}
.nav__links{display:none;align-items:center;gap:28px;list-style:none;margin:0;padding:0}
.nav__links a{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:.93rem;font-weight:500;color:var(--white);text-decoration:none;opacity:.82;
  transition:opacity .16s ease,color .16s ease;
}
.nav__links a:hover{opacity:1;color:var(--gold-lift)}
.nav__right{display:flex;align-items:center;gap:var(--s3)}
.nav .btn{min-height:46px;padding:11px 22px;font-size:.92rem;white-space:nowrap}
@media (max-width:560px){
  .nav__inner{gap:var(--s2);min-height:66px}
  .nav .btn{padding:11px 15px;font-size:.85rem}
  .logo__a{font-size:.85rem}
  .logo__b{font-size:1.04rem}
}
.nav__toggle{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:46px;padding:0 11px;background:transparent;
  border:1px solid rgba(255,255,255,.28);border-radius:var(--radius);cursor:pointer;
}
.nav__toggle span{display:block;height:2px;background:var(--white);border-radius:2px}
.nav__drawer{display:none;border-top:1px solid rgba(255,255,255,.09);padding:var(--s2) 0 var(--s4)}
.nav__drawer.is-open{display:block}
.nav__drawer ul{list-style:none;margin:0;padding:0}
.nav__drawer a{
  display:block;padding:14px 0;font-size:1.02rem;font-weight:500;color:var(--white);
  text-decoration:none;border-bottom:1px solid rgba(255,255,255,.08);
}
@media (min-width:960px){
  .nav__links{display:flex}
  .nav__toggle{display:none}
  .nav__drawer{display:none !important}
}

/* ---------- hero ---------- */
.hero{padding-top:clamp(56px,7vw,88px);padding-bottom:clamp(56px,7vw,88px)}
.hero__grid{display:grid;gap:clamp(36px,5vw,60px);align-items:center}
.hero h1{margin-bottom:var(--s4)}
.hero .lede{color:var(--muted-dark);max-width:56ch}
.hero__accent{color:var(--gold-lift)}
@media (min-width:900px){
  .hero__grid{grid-template-columns:1.08fr .92fr}
}

/* ---------- photo placeholder ---------- */
.ph{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;aspect-ratio:4/5;
  background:var(--navy-2);border:1px solid var(--line-dark);border-radius:var(--radius);
  padding:var(--s4);
}
.ph::after{content:"";position:absolute;inset:12px;border:1px solid rgba(212,169,89,.16);pointer-events:none}
.ph--wide{aspect-ratio:16/10}
.ph--light{background:var(--bone-2);border-color:var(--line-light)}
.ph--light::after{border-color:rgba(26,26,26,.08)}
.ph__label{
  font-family:var(--display);font-size:.7rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-lift);margin:0;
}
.ph--light .ph__label{color:var(--blue)}
.ph__note{font-size:.9rem;line-height:1.5;margin:0;max-width:26ch;color:var(--muted-dark)}
.ph--light .ph__note{color:var(--slate)}

.tag{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  margin-top:var(--s2);padding:9px 16px;background:var(--gold);color:var(--ink);
  font-family:var(--display);font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  border-radius:var(--radius);
}

/* ---------- grids & cards ---------- */
.grid{display:grid;gap:var(--s3)}
.grid--2{grid-template-columns:1fr}
.grid--3{grid-template-columns:1fr}
@media (min-width:700px){.grid--2{grid-template-columns:1fr 1fr}.grid--3{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.grid--3{grid-template-columns:repeat(3,1fr)}}

.card{
  background:var(--white);border:1px solid var(--line-light);border-radius:var(--radius);
  padding:clamp(24px,3vw,32px);
}
.card--navy{background:var(--navy-2);border-color:rgba(255,255,255,.1)}
.card--navy h3,.card--navy h4{color:var(--white)}
.card--navy p{color:var(--muted-dark)}
.card__top{display:flex;align-items:center;gap:12px;margin-bottom:var(--s2)}
.card p{margin-top:var(--s2);font-size:.98rem}
.card p:first-child{margin-top:0}
/* card with a CTA: pin the button to the bottom so side-by-side cards line up */
.card--flow{display:flex;flex-direction:column}
.card--flow.card .btn-row{margin-top:auto;padding-top:var(--s4)}

/* Included Tools: no card, sits flat on the section */
.tools{padding:0}
.tools .checks{margin-top:var(--s3)}

/* ---------- checklist ---------- */
.checks{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.checks li{display:flex;gap:14px;align-items:flex-start;font-size:1rem;line-height:1.55}

/* ---------- numbered sequence (only where order is real) ---------- */
.seq{list-style:none;margin:0;padding:0;counter-reset:seq}
.seq li{
  counter-increment:seq;display:grid;grid-template-columns:auto 1fr;gap:var(--s3);
  padding:var(--s3) 0;border-top:1px solid var(--line-light);
}
.seq li:last-child{border-bottom:1px solid var(--line-light)}
.seq li::before{
  content:counter(seq,decimal-leading-zero);
  font-family:var(--display);font-size:1.05rem;font-weight:700;letter-spacing:.02em;
  color:var(--gold);line-height:1.4;
}
.on-navy .seq li,.on-ink .seq li{border-color:var(--line-dark)}
.seq h3{font-size:1.02rem;line-height:1.3;letter-spacing:-.008em;margin-bottom:6px}
.seq p{font-size:.97rem;margin:0}

/* ---------- steps (4-up) ---------- */
.steps{display:grid;gap:var(--s4)}
@media (min-width:800px){.steps{grid-template-columns:repeat(4,1fr);gap:var(--s3)}}
.step{padding-top:var(--s3);border-top:2px solid var(--gold)}
/* explicit number, not a CSS counter: each step is its own block in the Kajabi build,
   where a counter would restart at 01 in every column */
.step__n{
  display:block;font-family:var(--display);font-size:2.1rem;font-weight:700;
  color:var(--gold);line-height:1;margin-bottom:var(--s2);
}
.step h3{font-size:1.02rem;line-height:1.3;letter-spacing:-.008em;margin-bottom:8px}
.step p{font-size:.95rem;margin:0}

/* ---------- pull / statement ---------- */
.statement{font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.5rem,3.2vw,2.3rem);line-height:1.16;color:var(--white)}
.statement em{font-style:normal;color:var(--gold-lift)}
.pull{border-left:2px solid var(--gold);padding-left:var(--s3)}

/* ---------- testimonials ---------- */
.quote{position:relative;padding-top:var(--s3);border-top:2px solid var(--gold)}
.quote p{font-size:1.03rem;line-height:1.6}
.quote cite{
  display:block;margin-top:var(--s3);font-style:normal;
  font-family:var(--display);font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
}
.on-navy .quote cite{color:var(--gold-lift)}
.on-bone .quote cite{color:var(--blue)}
.placeholder-note{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:var(--s3);
  padding:6px 12px;border:1px dashed var(--gold);border-radius:var(--radius);
  font-family:var(--display);font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-lift);
}
.on-bone .placeholder-note{color:#7A5E2C;border-color:rgba(184,143,68,.7)}

/* ---------- price block ---------- */
.price{
  background:var(--navy);border-radius:var(--radius);padding:clamp(32px,5vw,60px);
  border-top:4px solid var(--gold);
}
.price__amount{
  font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1;
  font-size:clamp(3.2rem,9vw,5.2rem);color:var(--white);margin:0;
}
.price__meta{font-family:var(--display);font-size:.78rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-lift);margin:0 0 var(--s2)}
.price__sub{color:var(--muted-dark);margin-top:var(--s3)}
.guarantee{
  display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:start;
  margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line-dark);
}
.guarantee p{margin:0;font-size:.97rem;color:var(--muted-dark)}

/* ---------- scheduler placeholder ---------- */
.scheduler{
  background:var(--navy-2);border:1px solid var(--line-dark);border-radius:var(--radius);
  padding:clamp(28px,4vw,40px);
}
.scheduler__bar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  padding-bottom:var(--s3);margin-bottom:var(--s3);border-bottom:1px solid var(--line-dark);
}
.scheduler__month{font-family:var(--display);font-weight:700;color:var(--white);font-size:1.05rem}
.scheduler__dots{display:flex;gap:6px}
.scheduler__dots span{width:7px;height:7px;border-radius:50%;background:var(--gold);opacity:.5}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal span{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  font-size:.82rem;font-family:var(--display);font-weight:500;
  color:var(--muted-dark);background:rgba(255,255,255,.045);border-radius:3px;
}
.cal span.is-open{background:var(--blue);color:var(--white);font-weight:700}
.cal span.is-head{background:none;color:var(--gold-lift);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase}
.scheduler__note{margin-top:var(--s3);font-size:.86rem;color:var(--muted-dark);text-align:center}

/* ---------- opt-in form ---------- */
.form{
  background:var(--navy-2);border:1px solid var(--line-dark);border-top:4px solid var(--gold);
  border-radius:var(--radius);padding:clamp(26px,3.5vw,38px);
}
.form--light{background:var(--white);border-color:var(--line-light);border-top-color:var(--gold)}
.form__lead{font-size:1rem;line-height:1.55;margin:0 0 var(--s4);color:var(--muted-dark)}
.form--light .form__lead{color:var(--slate)}
.field{display:block;margin-bottom:var(--s3)}
.field > span:first-child{
  display:block;font-family:var(--display);font-size:.7rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-lift);margin-bottom:8px;
}
.form--light .field > span:first-child{color:var(--blue)}
.field input{
  width:100%;min-height:54px;padding:14px 16px;
  font-family:var(--body);font-size:1rem;line-height:1.4;
  color:var(--white);background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.24);border-radius:var(--radius);
}
.form--light .field input{color:var(--ink);background:var(--bone);border-color:rgba(26,26,26,.18)}
.field input::placeholder{color:rgba(255,255,255,.42)}
.form--light .field input::placeholder{color:rgba(26,26,26,.38)}
.field input:focus-visible{outline:3px solid var(--gold-lift);outline-offset:2px;border-color:var(--gold)}
.form__fine{font-size:.87rem;line-height:1.55;margin:var(--s3) 0 0;color:var(--muted-dark)}
.form--light .form__fine{color:var(--slate)}
.form__privacy{display:flex;gap:10px;align-items:flex-start;margin:var(--s2) 0 0;font-size:.83rem;line-height:1.5;color:var(--muted-dark)}
.form--light .form__privacy{color:var(--slate)}
.form__privacy .ico{width:16px;height:16px;margin-top:3px}

/* NATIVE KAJABI FORM: add  bcf bcf--dark kjform  to the Kajabi Form block.
   !important is required: Kajabi writes a per-block <style> using #block-xxxx ID
   selectors, which outrank any class rule. Same reason the CTA rules use it. */
.kjform{
  background:var(--navy-2) !important;
  border:1px solid var(--line-dark) !important;
  border-top:4px solid var(--gold) !important;
  border-radius:var(--radius) !important;
  padding:clamp(26px,3.5vw,38px) !important;
  text-align:left !important;
  box-shadow:none !important;
}
.kjform input[type="text"],.kjform input[type="email"],.kjform input[type="tel"],
.kjform input[type="number"],.kjform select,.kjform textarea{
  width:100% !important;min-height:54px !important;padding:14px 16px !important;
  margin-bottom:var(--s3) !important;
  font-family:var(--body) !important;font-size:1rem !important;line-height:1.4 !important;
  color:var(--white) !important;background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.24) !important;border-radius:var(--radius) !important;
  box-shadow:none !important;
}
.kjform input::placeholder,.kjform textarea::placeholder{color:rgba(255,255,255,.42) !important}
.kjform input:focus,.kjform input:focus-visible{
  outline:3px solid var(--gold-lift) !important;outline-offset:2px !important;
  border-color:var(--gold) !important;
}
.kjform label{
  font-family:var(--display) !important;font-size:.7rem !important;font-weight:600 !important;
  letter-spacing:.18em !important;text-transform:uppercase !important;color:var(--gold-lift) !important;
}
.kjform button,.kjform input[type="submit"],.kjform .btn{
  width:100% !important;min-height:54px !important;padding:15px 30px !important;
  font-family:var(--display) !important;font-size:1rem !important;font-weight:700 !important;
  letter-spacing:-.01em !important;
  background:var(--gold) !important;color:var(--ink) !important;
  border:2px solid var(--gold) !important;border-radius:var(--radius) !important;
  cursor:pointer !important;box-shadow:none !important;
}
.kjform button:hover,.kjform input[type="submit"]:hover,.kjform .btn:hover{
  background:var(--gold-lift) !important;border-color:var(--gold-lift) !important;
}
.kjform .disclaimer-text,.kjform .form__disclaimer{
  font-size:.83rem !important;line-height:1.5 !important;
  color:var(--muted-dark) !important;margin:var(--s3) 0 0 !important;
}

/* real, sourced numbers from Zac's own businesses */
.figures{display:grid;gap:var(--s4);margin:var(--s5) 0 0;padding-top:var(--s4);border-top:1px solid var(--line-dark)}
@media (min-width:760px){.figures{grid-template-columns:repeat(3,1fr);gap:var(--s3)}}
.figure__n{font-family:var(--display);font-size:clamp(1.7rem,3vw,2.15rem);font-weight:700;
  letter-spacing:-.02em;line-height:1;color:var(--gold-lift);margin:0 0 8px}
.figure__l{font-size:.93rem;line-height:1.5;margin:0;color:var(--muted-dark)}
.on-bone .figures{border-top-color:var(--line-light)}
.on-bone .figure__n{color:var(--navy)}
.on-bone .figure__l{color:var(--slate)}

/* confirmation mark, thank-you page */
.confirm{
  width:64px;height:64px;border-radius:50%;border:2px solid var(--gold);
  display:flex;align-items:center;justify-content:center;margin:0 auto var(--s4);
}
.confirm .ico{width:30px;height:30px}

/* ---------- salary replacement calculator ---------- */
.calc{display:grid;gap:var(--s3)}
@media (min-width:640px){.calc{grid-template-columns:1fr 1fr;gap:var(--s3) var(--s4)}}
.calc .field{margin-bottom:0}
.field__hint{display:block;margin-top:6px;font-size:.83rem;line-height:1.45;color:var(--muted-dark)}
.field__wrap{position:relative;display:block}
.field input[type="number"]{-moz-appearance:textfield;appearance:textfield}
.field input[type="number"]::-webkit-outer-spin-button,
.field input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.field__unit{
  position:absolute;top:50%;transform:translateY(-50%);
  font-family:var(--display);font-weight:600;font-size:1rem;color:var(--gold-lift);pointer-events:none;
}
.field__unit--pre{left:16px}
.field__unit--post{right:16px}
.field__wrap--pre input{padding-left:34px}
.field__wrap--post input{padding-right:38px}

/* the answer */
.answer{text-align:center;padding:clamp(28px,4vw,44px) 0}
.answer-panel{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:var(--navy-2);border:1px solid var(--line-dark);border-top:4px solid var(--gold);
  border-radius:var(--radius);padding:clamp(28px,4vw,44px);height:100%;
}
.answer-panel .eyebrow{margin-bottom:var(--s3)}
.answer__n{
  font-family:var(--display);font-weight:700;letter-spacing:-.04em;line-height:.9;
  font-size:clamp(5rem,18vw,10rem);color:var(--gold-lift);margin:0;
}
.answer__unit{
  font-family:var(--display);font-size:clamp(1.1rem,2.2vw,1.5rem);font-weight:700;
  letter-spacing:-.01em;color:var(--white);margin:var(--s2) 0 0;
}
.answer__sub{margin:var(--s2) 0 0;color:var(--muted-dark)}

/* the math, shown not hidden */
.breakdown{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-dark)}
.breakdown li{
  display:grid;grid-template-columns:1fr auto;gap:var(--s2) var(--s3);align-items:baseline;
  padding:var(--s3) 0;border-bottom:1px solid var(--line-dark);
}
.breakdown__k{font-size:.98rem;line-height:1.4}
.breakdown__v{
  font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:-.015em;
  color:var(--white);white-space:nowrap;font-variant-numeric:tabular-nums;
}
.breakdown__note{grid-column:1/-1;margin:0;font-size:.86rem;line-height:1.5;color:var(--muted-dark)}
.on-bone .breakdown,.on-bone .breakdown li{border-color:var(--line-light)}
.on-bone .breakdown__v{color:var(--ink)}
.on-bone .breakdown__note{color:var(--slate)}

/* job size x margin grid */
.matrix-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.matrix{width:100%;border-collapse:collapse;min-width:460px;font-variant-numeric:tabular-nums}
.matrix caption{text-align:left;margin-bottom:var(--s3);font-size:.95rem;line-height:1.55;color:var(--muted-dark)}
.matrix th,.matrix td{padding:12px 10px;text-align:center;border:1px solid var(--line-dark)}
.matrix thead th,.matrix tbody th{
  font-family:var(--display);font-size:.78rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-lift);white-space:nowrap;
}
.matrix tbody th{text-align:left}
.matrix td{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--white)}
.matrix .is-you{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.matrix .is-you::after{content:" you";font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.on-bone .matrix caption{color:var(--slate)}
.on-bone .matrix th,.on-bone .matrix td{border-color:var(--line-light)}
.on-bone .matrix thead th,.on-bone .matrix tbody th{color:var(--blue)}
.on-bone .matrix td{color:var(--ink)}

.screen[hidden]{display:none}
.fineprint{font-size:.86rem;line-height:1.55;color:var(--muted-dark);margin-top:var(--s4)}
.on-bone .fineprint{color:var(--slate)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line-light)}
.faq details{border-bottom:1px solid var(--line-light)}
.faq summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3);
  padding:var(--s3) 0;cursor:pointer;list-style:none;
  font-family:var(--display);font-weight:700;font-size:clamp(1.02rem,1.6vw,1.16rem);
  letter-spacing:-.012em;line-height:1.35;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:15px;height:15px;margin-top:6px;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .faq__a{padding:0 0 var(--s3);max-width:70ch}
.faq .faq__a p{font-size:1rem}
@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none}}

/* ---------- final CTA ---------- */
.final{text-align:center}
.final h2{max-width:18ch;margin:0 auto var(--s4)}
.final .lede{max-width:56ch;margin:0 auto;color:var(--muted-dark)}
.on-bone.final .lede,.on-white.final .lede,
.on-bone .final .lede,.on-white .final .lede{color:var(--slate)}
.final .btn-row{justify-content:center}

/* ---------- footer ---------- */
.foot{padding:var(--s6) 0 var(--s5)}
.foot__top{display:grid;gap:var(--s4);padding-bottom:var(--s4);border-bottom:1px solid rgba(255,255,255,.12)}
@media (min-width:800px){.foot__top{grid-template-columns:1fr auto;align-items:center}}
.foot__nav{display:flex;flex-wrap:wrap;gap:0 var(--s4);list-style:none;margin:0;padding:0}
.foot__nav a{display:inline-flex;align-items:center;min-height:44px;font-size:.92rem;color:var(--white);opacity:.75;text-decoration:none}
.foot__nav a:hover{opacity:1;color:var(--gold-lift)}
.foot__bottom{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);justify-content:space-between;
  padding-top:var(--s4);font-size:.85rem;color:var(--muted-dark)}
.foot__bottom a{color:var(--muted-dark)}

/* attribution strip */
.toc{background:var(--ink);border-top:1px solid var(--line-dark);padding:8px 0;text-align:center}
.toc p{margin:0;font-family:var(--display);font-size:.72rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted-dark)}
.toc a{display:inline-block;padding:13px 8px;color:var(--gold-lift);text-decoration:none}
.toc a:hover{text-decoration:underline}

/* ==========================================================================
   ICONS AS CSS
   Kajabi's editor strips inline <svg> out of Custom Code blocks, so every icon
   lives here instead. The markup only needs a class.
   ========================================================================== */

.ico{
  display:inline-block;flex:none;
  background-repeat:no-repeat;background-position:center;background-size:contain;
}
.card__icon{width:24px;height:24px}

.ico--crews{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B88F44' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M16 20v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='3.2'/><path d='M22 20v-2a4 4 0 0 0-3-3.87M17 4.1a4 4 0 0 1 0 5.8'/></svg>")}
.ico--pricing{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B88F44' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0l-7.2-7.2A2 2 0 0 1 2.8 12V4.8A2 2 0 0 1 4.8 2.8H12a2 2 0 0 1 1.4.6l7.2 7.2a2 2 0 0 1 0 2.8Z'/><circle cx='7.5' cy='7.5' r='1.3'/></svg>")}
.ico--customers{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B88F44' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='m3 11 15-6v14L3 13Z'/><path d='M3 11v2a2 2 0 0 0 2 2h1'/><path d='M7 15v4a1.5 1.5 0 0 0 3 0v-3.4'/><path d='M21 9.5v4'/></svg>")}
.ico--calls{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B88F44' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2Z'/></svg>")}
.ico--plan{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B88F44' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2.5H6.5a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V8Z'/><path d='M14 2.5V8h5.5'/><path d='M8.5 13h7M8.5 17h4'/></svg>")}
.ico--feedback{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B88F44' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='m12 2.8 2.9 5.9 6.5.9-4.7 4.6 1.1 6.5-5.8-3-5.8 3 1.1-6.5L2.6 9.6l6.5-.9Z'/></svg>")}
.ico--account{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B88F44' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M9 11.5 11.5 14 20 5.5'/><path d='M20 12v7a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h9'/></svg>")}
.ico--playbook{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B88F44' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4.5h6a3 3 0 0 1 3 3v12a2.4 2.4 0 0 0-2.4-2.4H4Z'/><path d='M20 4.5h-6a3 3 0 0 0-3 3v12a2.4 2.4 0 0 1 2.4-2.4H20Z'/></svg>")}
.ico--access{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B88F44' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.2 9.8a16 16 0 0 0 6 6l1.2-1.1a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z'/></svg>")}

/* photo placeholder icons */
.ph__icon{width:34px;height:34px;opacity:.75}
.ico--ph-house{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B88F44' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20h16M7 20V9l5-5 5 5v11M10 20v-5h4v5'/></svg>")}
.ico--ph-person{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B88F44' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21a8 8 0 0 1 16 0'/></svg>")}
.ico--ph-video{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B88F44' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='2.5' y='5' width='19' height='14' rx='2.5'/><path d='M10 9.5v5l4.5-2.5Z'/></svg>")}

.ico--lock{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B88F44' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='10.5' width='16' height='10' rx='2'/><path d='M8 10.5V7a4 4 0 0 1 8 0v3.5'/></svg>")}
.ico--confirm{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B88F44' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='m4 12.5 5 5 11-11'/></svg>")}

/* checklists: the tick and cross are drawn by the list itself, so the markup
   is just <li>text</li> and there is nothing for Kajabi to strip */
.checks li::before{content:"";flex:none;width:21px;height:21px;margin-top:3px;background-repeat:no-repeat;background-position:center;background-size:contain}
.checks--yes li::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B88F44' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='m4 12.5 5 5 11-11'/></svg>")}
.checks--no li::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9B6C6' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M6 6l12 12M18 6 6 18'/></svg>")}
.on-bone .checks--no li::before,.on-white .checks--no li::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B96A2' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M6 6l12 12M18 6 6 18'/></svg>")}

/* guarantee shield */
.guarantee::before{content:"";flex:none;width:38px;height:38px;background-repeat:no-repeat;background-position:center;background-size:contain;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B88F44' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2.5 4 5.8v6.1c0 4.6 3.3 8.4 8 9.6 4.7-1.2 8-5 8-9.6V5.8Z'/><path d='m8.8 12 2.3 2.3 4.3-4.6'/></svg>")}

/* ---------- mockup banner ---------- */
.mock{background:var(--blue);color:var(--white);padding:10px var(--gutter);text-align:center;
  font-family:var(--display);font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.mock a{color:var(--white)}