/* ============================================================
   Yt AI Tools — Funnel pages (upsells / downsells)
   Shared stylesheet — same design language as the main landing
   ============================================================ */
:root{
  --ink:#2b2420;
  --ink-soft:#5c5148;
  --cream:#faf6f0;
  --cream-2:#f2ebe1;
  --card:#ffffff;
  --gold:#b8894f;
  --gold-deep:#8f6535;
  --teal:#2f4a45;
  --teal-deep:#203330;
  --line:#e7ddd0;
  --danger:#c1502e;
  --green:#2f7a63;
  --shadow: 0 20px 50px -20px rgba(43,36,32,0.25);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,.serif{font-family:'Fraunces', Georgia, serif; font-weight:600; letter-spacing:-0.01em;}
img,svg{display:block; max-width:100%;}
a{color:inherit;}
.wrap{max-width:860px; margin:0 auto; padding:0 20px;}
.muted{color:var(--ink-soft);}

/* ---------- CONFIRMATION BAR ---------- */
.confirm-bar{
  background:#e3f2ec; border-bottom:1px solid #c4e0d4;
  padding:11px 16px; text-align:center;
  font-size:13.5px; font-weight:700; color:var(--green);
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.confirm-bar svg{width:17px; height:17px; flex-shrink:0;}

/* ---------- HEADER ---------- */
header.funnel-header{
  background:rgba(250,246,240,0.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 20px; max-width:860px; margin:0 auto;}
.logo{display:flex; align-items:center; gap:10px; font-family:'Fraunces',serif; font-weight:600; font-size:20px; text-decoration:none; color:var(--ink);}
.logo-mark{
  width:36px; height:36px; border-radius:11px;
  background:linear-gradient(135deg,var(--teal),var(--teal-deep));
  display:flex; align-items:center; justify-content:center;
  color:#f4e9d8; font-family:'Fraunces',serif; font-weight:600; font-size:16px;
}
.logo small{display:block; font-family:'Inter',sans-serif; font-size:10px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--gold-deep);}
.step-badge{
  font-size:12px; font-weight:700; color:var(--ink-soft);
  background:var(--cream-2); border:1px solid var(--line);
  padding:7px 14px; border-radius:100px; white-space:nowrap;
}

/* ---------- OFFER HERO ---------- */
.offer-hero{padding:44px 0 8px; text-align:center;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold-deep); background:#f4e9d8; border:1px solid #e7d3ae;
  padding:7px 14px; border-radius:100px;
}
.eyebrow.danger{color:var(--danger); background:#f8e4dc; border-color:#eccbbd;}
.offer-hero h1{font-size:clamp(28px,4.8vw,44px); line-height:1.1; margin:18px auto 16px; max-width:700px;}
.offer-hero h1 em{font-style:normal; color:var(--gold-deep);}
.offer-hero p.lead{font-size:17px; color:var(--ink-soft); max-width:600px; margin:0 auto;}

/* ---------- SECTIONS ---------- */
section{padding:40px 0;}
.section-title{text-align:center; font-size:clamp(21px,3.4vw,28px); margin-bottom:26px;}

/* ---------- BENEFIT CARDS ---------- */
.benefit-grid{display:grid; grid-template-columns:1fr; gap:14px;}
@media(min-width:680px){ .benefit-grid{grid-template-columns:1fr 1fr;} }
.benefit-card{
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:22px; display:flex; gap:14px; align-items:flex-start;
}
.benefit-icon{
  width:40px; height:40px; border-radius:12px; background:var(--cream-2);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.benefit-icon svg{width:20px; height:20px; color:var(--teal);}
.benefit-card h3{font-family:'Inter',sans-serif; font-size:15.5px; margin-bottom:4px;}
.benefit-card p{font-size:13.5px; color:var(--ink-soft);}

/* ---------- TIMELINE (90-day plan style) ---------- */
.timeline{display:grid; grid-template-columns:1fr; gap:14px;}
@media(min-width:680px){ .timeline{grid-template-columns:repeat(3,1fr);} }
.timeline-card{
  background:var(--teal-deep); color:#f4ede0; border-radius:18px; padding:24px;
}
.timeline-card .phase{
  display:inline-block; font-size:11px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:#e9d3a3; background:rgba(244,233,216,0.12);
  border:1px solid rgba(233,211,163,0.3); padding:5px 12px; border-radius:100px; margin-bottom:14px;
}
.timeline-card h3{font-family:'Inter',sans-serif; font-size:16px; margin-bottom:6px; color:#fff;}
.timeline-card p{font-size:13.5px; color:#cfd9d3;}

/* ---------- OFFER BOX (price + CTA) ---------- */
.offer-box{
  background:var(--card); border:2px solid var(--gold); border-radius:26px;
  box-shadow:var(--shadow); padding:36px 28px; text-align:center;
  position:relative; max-width:620px; margin:0 auto;
}
.offer-ribbon{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg,#c99a5f,#a5723a); color:#fff; font-size:11.5px; font-weight:700;
  padding:6px 18px; border-radius:100px; box-shadow:0 8px 18px -6px rgba(165,114,58,0.6); white-space:nowrap;
}
.offer-box .offer-name{font-family:'Inter',sans-serif; font-weight:700; font-size:14px; color:var(--gold-deep); letter-spacing:.03em; text-transform:uppercase;}
.price-row{display:flex; align-items:baseline; justify-content:center; gap:14px; margin:14px 0 4px;}
.price-old{font-size:12.5px; color:#948a7f; font-family:'Inter',sans-serif; font-weight:700; letter-spacing:.05em; text-transform:uppercase; align-self:center;}
.price-now{font-family:'Fraunces',serif; font-size:52px; font-weight:600; color:var(--ink);}
.price-now sup{font-size:22px; top:-20px; margin-right:2px;}
.price-now .cents{font-size:26px;}
.price-note{font-size:12.5px; color:var(--ink-soft); margin-bottom:22px;}
.offer-list{
  list-style:none; text-align:left; display:flex; flex-direction:column; gap:11px;
  max-width:440px; margin:0 auto 26px;
}
.offer-list li{display:flex; gap:10px; font-size:14.5px; align-items:flex-start;}
.offer-list svg{width:17px; height:17px; flex-shrink:0; margin-top:2px; color:var(--green);}
.offer-list li strong{font-weight:700;}

/* ---------- CTA BUTTONS ---------- */
.btn-yes{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; background:linear-gradient(135deg,#c99a5f,#a5723a); color:#fff;
  font-weight:800; font-size:17px; font-family:'Inter',sans-serif;
  padding:19px 28px; border-radius:100px; border:none; cursor:pointer;
  text-decoration:none; box-shadow:0 14px 30px -10px rgba(165,114,58,0.55);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-yes:hover{transform:translateY(-2px); box-shadow:0 18px 34px -8px rgba(165,114,58,0.6);}
.btn-yes small{display:block; font-weight:600; font-size:12px; opacity:.9;}
.cta-legal{
  font-size:11.5px; color:#948a7f; margin-top:14px; line-height:1.6; max-width:480px;
  margin-left:auto; margin-right:auto;
}
.btn-no{
  display:inline-block; margin-top:22px; font-size:13.5px; color:#948a7f;
  text-decoration:underline; background:none; border:none; cursor:pointer; font-family:'Inter',sans-serif;
}
.btn-no:hover{color:var(--ink-soft);}
.no-wrap{text-align:center;}

/* ---------- WHY / EXPLAINER ---------- */
.explain{
  background:var(--cream-2); border:1px solid var(--line); border-radius:20px;
  padding:26px; font-size:14.5px; color:var(--ink-soft); max-width:680px; margin:0 auto;
}
.explain strong{color:var(--ink);}
.explain .sig{margin-top:14px; font-style:italic; font-size:13.5px;}

/* ---------- COMPARISON / VALUE STACK ---------- */
.value-table{width:100%; border-collapse:collapse; max-width:560px; margin:0 auto; font-size:14px;}
.value-table td{padding:11px 8px; border-bottom:1px solid var(--line);}
.value-table td:last-child{text-align:right; font-weight:700; white-space:nowrap;}
.value-table tr.total td{border-bottom:none; font-weight:800; font-size:15px; padding-top:16px;}
.value-table tr.total td:last-child{color:var(--gold-deep);}

/* ---------- QUOTE ---------- */
.quote-card{
  background:var(--cream-2); border-radius:18px; padding:20px 22px; margin:26px auto 0;
  font-size:14.5px; color:var(--ink-soft); font-style:italic;
  border-left:3px solid var(--gold); max-width:620px;
}
.quote-card .who{display:block; margin-top:10px; font-style:normal; font-weight:700; font-size:13px; color:var(--ink);}

/* ---------- GUARANTEE / SECURE ---------- */
.guarantee-row{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:24px; font-size:12.5px; color:var(--ink-soft); text-align:center;}
.guarantee-row svg{width:18px; height:18px; color:var(--gold-deep); flex-shrink:0;}
.secure-row{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:10px; font-size:11.5px; color:#948a7f;}
.secure-row svg{width:14px; height:14px;}

/* ---------- DISCLAIMER + FOOTER ---------- */
.disclaimer-block{
  background:var(--cream-2); border:1px solid var(--line); border-radius:18px;
  padding:22px; max-width:760px; margin:0 auto;
}
.disclaimer-block h4{font-family:'Inter',sans-serif; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--gold-deep); margin-bottom:8px;}
.disclaimer-block p{font-size:12px; color:var(--ink-soft); line-height:1.65; margin-bottom:8px;}
.disclaimer-block p:last-child{margin-bottom:0;}
footer{border-top:1px solid var(--line); padding:30px 0 26px; background:var(--cream-2); margin-top:40px;}
.footer-links{display:flex; gap:20px; font-size:13px; color:var(--ink-soft); flex-wrap:wrap; justify-content:center;}
.footer-links a{text-decoration:none;}
.footer-links a:hover{color:var(--ink);}
.copyright{font-size:11.5px; color:#948a7f; margin-top:14px; line-height:1.7; text-align:center;}