:root {
  --cream:       #FDF8F3;
  --cream-deep:  #F5EDE4;
  --primary:     #D4654A;
  --primary-hov: #C05539;
  --primary-lt:  #F2DDD6;
  --navy:        #2C2438;
  --navy-soft:   #4A3F56;
  --sage:        #7B9E87;
  --sage-lt:     #E8F0EB;
  --gold:        #C4973B;
  --gold-lt:     #F5EDD8;
  --gray:        #8E8490;
  --border:      #E8E2E0;
  --fd: 'DM Serif Display', Georgia, serif;
  --fb: 'Plus Jakarta Sans', system-ui, sans-serif;
  --r: 14px;
  --max: 1100px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--fb); color:var(--navy); background:var(--cream); line-height:1.7; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
img { display:block; max-width:100%; }

/* ─── NAV ─── */
.nav {
  position:sticky; top:0; z-index:200;
  background:rgba(253,248,243,.95); backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(232,226,224,.7);
}
.nav-inner {
  max-width:var(--max); margin:0 auto; padding:0 32px;
  display:flex; align-items:center; justify-content:space-between; height:64px;
}
.nav-logo { text-decoration:none; }
.nav-logo img { height:42px; }
.nav-links { display:flex; align-items:center; gap:28px; list-style:none; }
.nav-links a { text-decoration:none; color:var(--navy-soft); font-size:14px; font-weight:500; transition:color .2s; }
.nav-links a:hover { color:var(--primary); }
.nav-cta {
  background:var(--primary) !important; color:#fff !important;
  padding:9px 22px !important; border-radius:100px !important;
  font-weight:600 !important; font-size:13.5px !important; transition:background .2s !important;
}
.nav-cta:hover { background:var(--primary-hov) !important; }

/* ─── LAYOUT SHELL ─── */
.page-shell {
  max-width:var(--max); margin:0 auto; padding:0 32px;
  display:grid; grid-template-columns:1fr 260px; gap:56px; align-items:start;
}
.main-col {}
.sidebar { position:sticky; top:88px; }

/* ─── BREADCRUMB ─── */
.breadcrumb {
  max-width:var(--max); margin:0 auto; padding:18px 32px 0;
  font-size:13px; color:var(--gray); display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.breadcrumb a { text-decoration:none; color:var(--gray); }
.breadcrumb a:hover { color:var(--primary); }
.breadcrumb .sep { opacity:.4; }
.breadcrumb .current { color:var(--navy); font-weight:600; }
.biz-tag {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--sage-lt); color:var(--sage);
  font-size:11.5px; font-weight:700; padding:4px 12px; border-radius:100px;
  text-transform:uppercase; letter-spacing:.5px; margin-left:8px;
}

/* ─── HERO ─── */
.hero {
  padding:40px 0 48px;
  border-bottom:1px solid var(--border);
  margin-bottom:56px;
}
.hero h1 {
  font-family:var(--fd); font-size:clamp(34px,3.8vw,50px);
  line-height:1.13; letter-spacing:-.4px; margin-bottom:16px; color:var(--navy);
}
.hero h1 em { color:var(--primary); font-style:italic; }
.hero-sub {
  font-size:17px; color:var(--navy-soft); max-width:580px;
  line-height:1.75; margin-bottom:32px;
}
/* Three stats row */
.hero-stats {
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:36px;
}
.stat-card {
  background:white; border:1px solid var(--border); border-radius:var(--r);
  padding:20px 24px; position:relative; overflow:hidden;
}
.stat-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--primary);
}
.stat-card .num {
  font-family:var(--fd); font-size:26px; color:var(--navy); margin-bottom:2px;
}
.stat-card .lbl { font-size:12px; color:var(--gray); font-weight:500; }

/* Bizzby CTA block - inline in hero */
.hero-bizzby {
  background:var(--navy); border-radius:16px; padding:28px 32px;
  display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center;
}
.hero-bizzby-text h3 {
  font-family:var(--fd); font-size:20px; color:white; margin-bottom:6px;
}
.hero-bizzby-text p { font-size:14px; color:rgba(255,255,255,.62); line-height:1.6; }
.hero-bizzby-text p strong { color:var(--primary); }
.btn-primary {
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  background:var(--primary); color:white; text-decoration:none;
  padding:12px 24px; border-radius:100px; font-size:14px; font-weight:700;
  transition:background .2s, transform .15s;
}
.btn-primary:hover { background:var(--primary-hov); transform:scale(1.03); }
.btn-outline {
  display:inline-flex; align-items:center; gap:8px;
  border:1.5px solid var(--border); color:var(--navy); text-decoration:none;
  padding:11px 22px; border-radius:100px; font-size:14px; font-weight:600;
  background:white; transition:border-color .2s;
}
.btn-outline:hover { border-color:var(--navy); }

/* ─── SECTION LABEL ─── */
.sec-label {
  font-size:11px; text-transform:uppercase; letter-spacing:2px;
  color:var(--primary); font-weight:700; margin-bottom:8px;
}
.sec-title {
  font-family:var(--fd); font-size:clamp(26px,3vw,34px);
  line-height:1.2; margin-bottom:12px; color:var(--navy);
}
.sec-desc { font-size:16px; color:var(--navy-soft); max-width:540px; line-height:1.75; margin-bottom:40px; }

/* ─── STEP CARDS ─── */
.steps { display:flex; flex-direction:column; gap:0; margin-bottom:56px; }
.step {
  display:grid; grid-template-columns:56px 1fr; gap:0;
  position:relative;
}
/* connector line */
.step:not(:last-child) .step-spine::after {
  content:''; position:absolute; left:27px; top:56px; bottom:0;
  width:2px; background:var(--border); z-index:0;
}
.step-spine {
  display:flex; flex-direction:column; align-items:center;
  padding-top:6px; position:relative;
}
.step-dot {
  width:40px; height:40px; border-radius:50%;
  background:white; border:2px solid var(--primary);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--fd); font-size:16px; color:var(--primary);
  flex-shrink:0; z-index:1; position:relative;
}
.step-body {
  padding:4px 0 40px 28px;
}
.step-body h3 {
  font-family:var(--fd); font-size:22px; margin-bottom:12px; color:var(--navy);
}
.step-body p, .step-body li { font-size:15px; color:var(--navy-soft); line-height:1.75; }
.step-body ul { padding-left:20px; margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.step-body li::marker { color:var(--primary); }
.step-body strong { color:var(--navy); }
/* Bizzby shortcut pill inside step */
.step-shortcut {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--primary-lt); color:var(--primary);
  border:1px solid rgba(212,101,74,.25);
  border-radius:100px; padding:7px 16px; font-size:13px; font-weight:600;
  margin-top:16px; text-decoration:none; transition:background .2s;
}
.step-shortcut:hover { background:#EDD5CE; }
.step-shortcut svg { width:14px; height:14px; flex-shrink:0; }

/* ─── COST TABLE ─── */
.costs-section { margin-bottom:56px; }
.cost-table { width:100%; border-collapse:collapse; font-size:14px; }
.cost-table th {
  text-align:left; padding:10px 16px; background:var(--navy);
  color:rgba(255,255,255,.85); font-size:12px; font-weight:600;
  letter-spacing:.5px; text-transform:uppercase;
}
.cost-table th:first-child { border-radius:var(--r) 0 0 0; }
.cost-table th:last-child { border-radius:0 var(--r) 0 0; }
.cost-table td { padding:10px 16px; border-bottom:1px solid var(--border); color:var(--navy-soft); }
.cost-table tr:hover td { background:rgba(253,248,243,.7); }
.cost-table tr.total td {
  font-weight:700; color:var(--navy); background:var(--gold-lt);
  border-top:2px solid rgba(196,151,59,.35);
}

/* ─── INCOME CARDS ─── */
.income-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:56px; }
.income-card {
  background:white; border:1px solid var(--border); border-radius:var(--r);
  padding:28px 24px; text-align:center; position:relative; overflow:hidden;
  transition:box-shadow .25s, transform .25s;
}
.income-card:hover { box-shadow:0 8px 32px rgba(44,36,56,.09); transform:translateY(-3px); }
.income-card .tier { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--gray); margin-bottom:10px; }
.income-card .amount { font-family:var(--fd); font-size:30px; color:var(--primary); margin-bottom:4px; }
.income-card .period { font-size:12px; color:var(--gray); margin-bottom:14px; }
.income-card .desc { font-size:13.5px; color:var(--navy-soft); line-height:1.65; }

/* ─── PRICING CARDS ─── */
.pricing-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.pricing-grid-wide { grid-template-columns:repeat(2,1fr); }
.price-card {
  background:white; border:1px solid var(--border); border-radius:var(--r);
  padding:28px 24px;
}
.price-card .price-type { font-size:11px; text-transform:uppercase; letter-spacing:1.5px; color:var(--gray); font-weight:700; margin-bottom:8px; }
.price-card .price-range { font-family:var(--fd); font-size:26px; color:var(--navy); margin-bottom:6px; }
.price-card .price-desc { font-size:13.5px; color:var(--navy-soft); line-height:1.65; }

/* ─── CHECKLIST ─── */
.checklist-section { margin-bottom:56px; }
.checklist-cols { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.check-group { background:white; border:1px solid var(--border); border-radius:var(--r); padding:28px 24px; }
.check-group h4 { font-family:var(--fd); font-size:18px; color:var(--navy); margin-bottom:18px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.check-list { list-style:none; display:flex; flex-direction:column; gap:10px; }
.check-list li { display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--navy-soft); line-height:1.5; }
.check-list li::before { content:''; width:18px; height:18px; border-radius:50%; border:2px solid var(--sage); flex-shrink:0; margin-top:1px; }

/* ─── FAQ ─── */
.faq-section { margin-bottom:56px; }
.faq-item { border-bottom:1px solid var(--border); padding:20px 0; }
.faq-q {
  font-family:var(--fd); font-size:18px; color:var(--navy);
  cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-q::after { content:'＋'; font-size:20px; color:var(--primary); font-family:var(--fb); flex-shrink:0; font-weight:300; }
.faq-item.open .faq-q::after { content:'－'; }
.faq-a { font-size:15px; color:var(--navy-soft); line-height:1.8; max-height:0; overflow:hidden; transition:max-height .3s ease, padding .3s; }
.faq-item.open .faq-a { max-height:400px; padding-top:12px; }
.faq-a a { color:var(--primary); text-decoration:underline; }

/* ─── LEAD CAPTURE ─── */
.lead-capture {
  background:var(--navy); border-radius:16px; padding:36px 40px;
  margin-bottom:56px; position:relative; overflow:hidden;
}
.lead-capture::before {
  content:''; position:absolute; top:-80px; right:-80px;
  width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle, rgba(212,101,74,.15) 0%, transparent 70%);
}
.lead-capture-inner { position:relative; z-index:1; display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center; }
.lead-capture h3 { font-family:var(--fd); font-size:22px; color:white; margin-bottom:6px; }
.lead-capture p { font-size:14px; color:rgba(255,255,255,.58); line-height:1.65; max-width:380px; }
.lead-form { display:flex; gap:10px; }
.lead-form input {
  padding:12px 18px; border-radius:100px; border:1px solid rgba(255,255,255,.2); outline:none;
  font-size:14px; font-family:var(--fb); background:rgba(255,255,255,.92);
  color:#2C2438; width:220px;
}
.lead-form input::placeholder { color:rgba(44,36,56,.45); }
.lead-form input:focus { border-color:var(--primary); background:white; }
.lead-note { font-size:11.5px; color:rgba(255,255,255,.3); margin-top:10px; }

/* ─── BIZZBY CTA SECTION ─── */
.bizzby-cta {
  background:var(--cream-deep); border:1px solid var(--border);
  border-radius:16px; padding:40px; text-align:center; margin-bottom:56px;
}
.bizzby-cta h2 { font-family:var(--fd); font-size:30px; color:var(--navy); margin-bottom:12px; }
.bizzby-cta h2 em { color:var(--primary); font-style:italic; }
.bizzby-cta p { font-size:16px; color:var(--navy-soft); margin-bottom:28px; line-height:1.7; max-width:500px; margin-left:auto; margin-right:auto; }
.cta-trust { display:flex; align-items:center; justify-content:center; gap:24px; font-size:13px; color:var(--gray); margin-top:16px; flex-wrap:wrap; }
.cta-trust span::before { content:'✓ '; color:var(--sage); font-weight:700; }
.biz-options { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:20px; }
.biz-opt {
  padding:10px 22px; border-radius:100px; border:1.5px solid var(--border);
  background:white; font-size:14px; color:var(--navy); cursor:pointer;
  transition:all .2s; font-family:var(--fb); font-weight:500;
}
.biz-opt:hover { border-color:var(--primary); color:var(--primary); }
.biz-opt.active { background:var(--primary); color:white; border-color:var(--primary); }

/* ─── CHAT WIDGET ─── */
.cta-chat-box {
  max-width:560px; margin:28px auto 0; background:white;
  border-radius:20px; padding:8px; text-align:left; overflow:hidden;
  box-shadow:0 1px 3px rgba(44,36,56,.04), 0 8px 32px rgba(44,36,56,.08), 0 0 0 1px rgba(232,226,224,.5);
  transition:box-shadow .3s;
}
.cta-chat-box:focus-within {
  box-shadow:0 1px 3px rgba(44,36,56,.04), 0 12px 48px rgba(212,101,74,.15), 0 0 0 2px var(--primary);
}
.chat-input-row { display:flex; align-items:center; gap:12px; }
.chat-input-row input {
  flex:1; border:none; outline:none; font-size:16px; font-family:var(--fb);
  padding:16px; color:var(--navy); background:transparent;
}
.chat-input-row input::placeholder { color:var(--gray); }
.chat-send-btn {
  background:var(--primary); color:white; border:none;
  width:52px; height:52px; border-radius:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .2s; flex-shrink:0;
}
.chat-send-btn:hover { background:var(--primary-hov); transform:scale(1.05); }
.chat-send-btn svg { width:20px; height:20px; }
.chat-suggestions { display:flex; flex-wrap:wrap; gap:8px; padding:8px 12px 8px; justify-content:center; }
.chat-suggestion {
  font-size:13px; padding:7px 14px; border-radius:100px;
  border:1px solid var(--border); background:var(--cream);
  color:var(--navy-soft); cursor:pointer; transition:all .2s; white-space:nowrap;
}
.chat-suggestion:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-lt); }
.chat-conversation { padding:16px 16px 8px; max-height:420px; overflow-y:auto; }
.chat-msg { margin-bottom:12px; animation:chatFadeIn .4s ease; }
@keyframes chatFadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.chat-msg-user { text-align:right; }
.chat-msg-user .chat-bubble {
  background:var(--primary); color:white; display:inline-block;
  padding:10px 16px; border-radius:16px 16px 4px 16px;
  font-size:14px; max-width:85%; text-align:left; line-height:1.5;
}
.chat-msg-ai { text-align:left; }
.chat-msg-ai .chat-bubble {
  background:var(--cream-deep); color:var(--navy); display:inline-block;
  padding:12px 16px; border-radius:16px 16px 16px 4px;
  font-size:14px; max-width:90%; line-height:1.6;
}
.chat-msg-ai .chat-bubble strong { color:var(--primary); }
.chat-msg-ai .chat-sender {
  font-size:11px; color:var(--gray); margin-bottom:4px;
  font-weight:600; letter-spacing:.3px;
}
.chat-typing {
  display:inline-flex; gap:4px; padding:12px 18px;
  background:var(--cream-deep); border-radius:16px 16px 16px 4px;
}
.chat-typing span {
  width:7px; height:7px; border-radius:50%; background:var(--gray);
  animation:chatTypingDot 1.4s infinite;
}
.chat-typing span:nth-child(2) { animation-delay:.2s; }
.chat-typing span:nth-child(3) { animation-delay:.4s; }
@keyframes chatTypingDot {
  0%,60%,100%{transform:translateY(0);opacity:.4}
  30%{transform:translateY(-4px);opacity:1}
}
.chat-cta-row { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.chat-cta-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 18px; border-radius:100px; font-size:13px;
  font-weight:600; font-family:var(--fb); cursor:pointer;
  border:none; transition:all .2s; text-decoration:none;
}
.chat-cta-btn.primary { background:#25D366; color:white; }
.chat-cta-btn.primary:hover { background:#1da851; transform:scale(1.03); }
.chat-cta-btn.secondary { background:var(--cream); color:var(--navy-soft); border:1px solid var(--border); }
.chat-cta-btn.secondary:hover { border-color:var(--primary); color:var(--primary); }

/* ─── RELATED ─── */
.related-section { margin-bottom:56px; }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.related-link {
  display:flex; align-items:center; gap:10px;
  background:white; border:1px solid var(--border); border-radius:var(--r);
  padding:14px 18px; text-decoration:none; color:var(--navy);
  font-size:14px; font-weight:500; transition:all .2s;
}
.related-link:hover { border-color:var(--primary); color:var(--primary); box-shadow:0 4px 12px rgba(44,36,56,.07); }
.related-link .emoji { font-size:18px; }

/* ─── SIDEBAR ─── */
.toc {
  background:white; border:1px solid var(--border);
  border-radius:var(--r); padding:24px 20px; margin-bottom:20px;
}
.toc h4 { font-size:12px; text-transform:uppercase; letter-spacing:1.5px; color:var(--gray); font-weight:700; margin-bottom:14px; }
.toc-links { list-style:none; display:flex; flex-direction:column; gap:2px; }
.toc-links a {
  display:block; padding:7px 10px; border-radius:8px;
  text-decoration:none; font-size:13.5px; color:var(--navy-soft);
  transition:all .2s; font-weight:500;
}
.toc-links a:hover { background:var(--cream); color:var(--primary); }
.toc-links a.active { background:var(--primary-lt); color:var(--primary); font-weight:600; }

/* Sidebar Bizzby card */
.sidebar-cta {
  background:var(--navy); border-radius:var(--r); padding:24px 20px; text-align:center;
}
.sidebar-cta img { height:36px; margin:0 auto 14px; filter:brightness(10); opacity:.9; }
.sidebar-cta p { font-size:13px; color:rgba(255,255,255,.55); line-height:1.6; margin-bottom:18px; }
.sidebar-cta .btn-primary { width:100%; justify-content:center; font-size:13.5px; }

/* ─── FOOTER ─── */
.footer { background:var(--navy); color:white; padding:56px 32px 28px; margin-top:80px; }
.footer-inner { max-width:var(--max); margin:0 auto; display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:40px; }
.footer-logo img { height:38px; filter:brightness(10); opacity:.85; margin-bottom:10px; }
.footer-brand p { font-size:13px; color:rgba(255,255,255,.4); max-width:240px; line-height:1.65; }
.footer-links { display:flex; gap:36px; }
.footer-links a { color:rgba(255,255,255,.5); text-decoration:none; font-size:13.5px; transition:color .2s; }
.footer-links a:hover { color:white; }
.footer-bottom { max-width:var(--max); margin:36px auto 0; padding-top:20px; border-top:1px solid rgba(255,255,255,.08); font-size:12px; color:rgba(255,255,255,.28); text-align:center; }

/* ─── RESPONSIVE ─── */
@media (max-width:900px) {
  .page-shell { grid-template-columns:1fr; }
  .sidebar { display:none; }
  .hero-stats { grid-template-columns:repeat(3,1fr); }
  .income-grid { grid-template-columns:1fr; }
  .checklist-cols { grid-template-columns:1fr; }
  .pricing-grid { grid-template-columns:1fr; }
  .related-grid { grid-template-columns:repeat(2,1fr); }
  .hero-bizzby { grid-template-columns:1fr; }
  .lead-capture-inner { grid-template-columns:1fr; }
  .nav-links { display:none; }
}