/* The Growth Creator (TGC) — lead magnet hub shared styles.
   Everything we sell is TGC-branded regardless of which topic-subdomain hosts it.
   Palette source: 00. PROFILE/BRAND-ASSETS.md (TGC section). Do not mix with DKSpeaks red. */

:root{
  --dark:#2b2b2b;
  --white:#ffffff;
  --yellow:#fdd46b;
  --blue:#5cccf0;
  --cream:#f9f6f3;
  --coral:#fd976d;
  --line:#e9e2d3;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family:'Inter',-apple-system,sans-serif; color:var(--dark); background:var(--white); line-height:1.6; }
h1,h2,h3{ font-family:'Playfair Display',serif; font-weight:700; line-height:1.15; }
img{ max-width:100%; }
.wrap{ max-width:720px; margin:0 auto; padding:0 24px; }
section{ padding:64px 0; }

.kicker{
  display:inline-block; font-weight:800; letter-spacing:1px; text-transform:uppercase;
  font-size:11px; color:var(--dark); background:var(--yellow); padding:7px 16px; border-radius:999px; margin-bottom:22px;
}

.btn{
  display:inline-block; background:var(--dark); color:var(--white); font-weight:700;
  font-size:16px; padding:16px 34px; border-radius:999px; text-decoration:none; border:none;
  cursor:pointer; font-family:'Inter',sans-serif; transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.18); }
.btn-light{ background:var(--yellow); color:var(--dark); }
.btn-block{ width:100%; text-align:center; }

.decline-link{
  display:block; text-align:center; margin-top:18px; font-size:13.5px; color:#8a8a8a;
  text-decoration:underline; text-underline-offset:3px;
}
.decline-link:hover{ color:var(--dark); }

/* ---------- OTO OFFER CARD ---------- */
.offer-page{ background:var(--cream); min-height:100vh; display:flex; align-items:center; }
.offer-card{
  background:var(--white); border-radius:18px; padding:48px; max-width:640px; margin:0 auto;
  border:1px solid var(--line); box-shadow:0 20px 50px rgba(43,43,43,.10); position:relative; overflow:hidden;
}
.offer-card::before{ content:''; position:absolute; width:200px; height:200px; border-radius:50%; background:var(--blue); opacity:.18; top:-90px; right:-70px; }
.offer-card > *{ position:relative; z-index:1; }
.offer-card h1{ font-size:30px; margin-bottom:16px; }
.offer-card .lede{ font-size:16.5px; color:#444; margin-bottom:28px; }
.price-row{ display:flex; align-items:baseline; gap:12px; margin-bottom:6px; }
.price-was{ font-size:18px; color:#999; text-decoration:line-through; }
.price-now{ font-family:'Playfair Display',serif; font-weight:800; font-size:38px; color:var(--dark); }
.price-note{ font-size:13px; color:#888; margin-bottom:28px; }
.offer-list{ list-style:none; margin-bottom:30px; }
.offer-list li{ font-size:15px; color:#333; margin-bottom:10px; padding-left:24px; position:relative; }
.offer-list li::before{ content:'✓'; position:absolute; left:0; color:var(--coral); font-weight:800; }

/* ---------- DOWNLOAD PAGE ---------- */
.download-page{ min-height:100vh; background:var(--white); }
.oto-banner{
  background:var(--dark); color:var(--white); padding:18px 24px; text-align:center; font-size:14.5px;
}
.oto-banner a{ color:var(--yellow); font-weight:700; text-decoration:underline; margin-left:6px; }
.download-hero{ text-align:center; padding:80px 0 60px; }
.download-hero h1{ font-size:28px; margin-bottom:14px; }
.download-hero p{ font-size:16px; color:#555; max-width:480px; margin:0 auto 32px; }

.footer-note{ text-align:center; font-size:12.5px; color:#999; padding:0 0 60px; }

/* ---------- OPT-IN PAGE ---------- */
.optin-page{ background:var(--cream); min-height:100vh; display:flex; align-items:center; }
.optin-card{
  background:var(--white); border-radius:18px; padding:48px; max-width:560px; margin:0 auto;
  border:1px solid var(--line); box-shadow:0 20px 50px rgba(43,43,43,.10); text-align:center;
}
.optin-card h1{ font-size:28px; margin-bottom:14px; }
.optin-card p{ font-size:16px; color:#555; margin-bottom:30px; }
.optin-card form{ display:flex; flex-direction:column; gap:12px; max-width:360px; margin:0 auto; }
.optin-card input[type=text], .optin-card input[type=email]{
  padding:14px 16px; border:1px solid var(--line); border-radius:8px; font-family:'Inter',sans-serif; font-size:15px;
}
.optin-card button{
  background:var(--dark); color:var(--white); font-weight:700; font-size:15.5px; padding:15px 20px;
  border:none; border-radius:999px; cursor:pointer; font-family:'Inter',sans-serif;
}
.optin-card .bs-branding-url{ color:#aaa; }
.optin-card div[class=""]{ font-size:11px; color:#bbb; margin-top:14px; }

/* ---------- PROGRESS BAR ---------- */
.progress{ max-width:420px; margin:0 auto 28px; }
.progress-track{ display:flex; gap:6px; margin-bottom:10px; }
.progress-seg{ flex:1; height:5px; border-radius:3px; background:var(--line); overflow:hidden; }
.progress-seg.done .progress-fill{ width:100%; background:var(--coral); }
.progress-seg.active .progress-fill{ width:100%; background:var(--yellow); animation:fillIn .6s ease forwards; }
.progress-fill{ height:100%; width:0; border-radius:3px; }
.progress-labels{ display:flex; justify-content:space-between; font-size:10.5px; letter-spacing:.4px; text-transform:uppercase; color:#999; font-weight:700; }
.progress-labels .current{ color:var(--dark); }

@keyframes fillIn{ from{ width:0; } to{ width:100%; } }

/* ---------- ENTRANCE ANIMATION ---------- */
@keyframes riseIn{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}
.offer-card, .optin-card{ animation:riseIn .5s ease both; }
.download-hero{ animation:riseIn .5s ease both; }
.oto-banner{ animation:riseIn .4s ease both; }

@media (max-width:600px){
  .offer-card, .optin-card{ padding:32px 24px; }
  .offer-card h1, .optin-card h1{ font-size:24px; }
  .price-now{ font-size:30px; }
}