/* =========================================================
   Unlock Your Best Image – Black Friday VIP Waitlist
   Visual base: original Unlock Your Best Image page
   ========================================================= */

:root {
  --gold: #e6b656;
  --red: #b00005;          /* titles on light bg + footer */
  --wine: #660607;
  --dark: #1a1a1a;
  --light: #f0f0f0;
  --blush: #e8dcdc;       /* light background of the hero photo */
  --card: #eeeeee;
  --green: #079a0c;
  --green-hover: #05800a;
  --text: #1a1a1a;
  --white: #ffffff;

  --font-title: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --container: 1140px;
  --gutter: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; border: 0; }
a { color: inherit; }
b, strong { font-weight: 700; }
p { margin: 0; }

/* ---------- Layout ---------- */
.sec { position: relative; }
.wrap {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.wrap--col { display: flex; flex-direction: column; align-items: center; }
.split { display: flex; align-items: center; justify-content: center; gap: 34px; }

/* ---------- Type ---------- */
.h { margin: 0; font-family: var(--font-title); font-weight: 700; line-height: 1.25; }
.h--md { font-size: 38px; }
.gold { color: var(--gold); }
.nowrap { white-space: nowrap; }
.txt p { margin: 0 0 0.9em; }
.txt > :last-child { margin-bottom: 0; }

.eyebrow {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--gold);
  border-radius: 3px;
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.2;
}

/* ---------- Button (same as original page) ---------- */
.btn {
  display: block;
  width: 100%;
  padding: 19px 24px;
  border-radius: 3px;
  background: var(--green);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color .3s;
}
.btn:hover, .btn:focus-visible { background: var(--green-hover); }

/* =========================================================
   TOP BAR
   ========================================================= */
.topbar {
  padding: 14px var(--gutter);
  background: var(--gold);
  color: var(--wine);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 2px;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
}

/* =========================================================
   1. HERO
   ========================================================= */
.hero {
  display: flex;
  align-items: center;
  min-height: 0;
  padding: 50px 0 55px;
  background: var(--blush) url("../img/hero-desktop-v3.jpg") center center / cover no-repeat;
  color: var(--text);
}
/* light background: accents in red instead of gold */
.hero .gold { color: var(--red); }
.hero .eyebrow { border-color: var(--red); color: var(--red); }
.hero .kform #kajabi-form input[type="text"],
.hero .kform #kajabi-form input[type="email"] {
  background: var(--white) !important;
  border: 1px solid #cbb9b9 !important;
}
.hero__content { width: 100%; max-width: 530px; }
.hero__logo { width: 130px; margin-bottom: 18px; }
.hero__kicker { margin: 14px 0; font-size: 16px; letter-spacing: .4px; }
.hero__title { font-size: 44px; line-height: 1.25; margin-bottom: 20px; }
.hero__text { font-size: 16px; line-height: 1.55; margin-bottom: 24px; }
.hero__form { width: 100%; max-width: 100%; }

/* =========================================================
   2. UNLOCK IS BACK  (light section, like "You don't need…")
   ========================================================= */
.story { background: var(--dark); color: var(--white); padding: 75px 0; }
.story__img { width: 540px; flex: 0 1 540px; min-width: 0; }
.story__content { flex: 0 1 520px; }
.story__content .h { margin-bottom: 22px; }
.story__content .txt { font-size: 18px; line-height: 1.55; }

/* =========================================================
   3. WHAT IS
   ========================================================= */
.whatis { background: var(--wine); color: var(--white); padding: 75px 0; }
.whatis .split { gap: 55px; }
.whatis__content { flex: 0 1 520px; }
.whatis__content .h { margin-bottom: 22px; line-height: 1.3; max-width: 450px; }
.whatis__content .txt { font-size: 16px; line-height: 1.5; margin-bottom: 26px; }
.whatis__mock--desktop { flex: 0 1 490px; width: 490px; min-width: 0; }
.whatis__mock--mobile { display: none; }

/* =========================================================
   4. THE UNLOCK METHOD
   ========================================================= */
.method { background: var(--dark); color: var(--white); padding: 75px 0 85px; }
.method__title { text-align: center; }
.method__sub {
  margin-top: 8px;
  font-family: var(--font-title);
  font-size: 26px;
  line-height: 1.3;
  color: var(--gold);
  text-align: center;
}

.skills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 21px;
  width: 100%;
  max-width: 1116px;
  margin-top: 30px;
}
.skill {
  position: relative;
  padding: 26px 26px 28px 78px;
  background: var(--card);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
}
.skill__num {
  position: absolute;
  left: 22px;
  top: 24px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--wine);
  color: var(--gold);
  font-family: var(--font-title);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}
.skill__title { margin: 0 0 6px; font-size: 16px; font-weight: 700; line-height: 1.35; }

/* =========================================================
   5. VIP BENEFITS  (wine, like "Bonuses")
   ========================================================= */
.perks { background: var(--wine); color: var(--white); padding: 75px 0 80px; }
.perks__title { text-align: center; }
.perks__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 21px;
  width: 100%;
  max-width: 1116px;
  margin-top: 45px;
}
.perk {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 34px 28px 32px;
  background: var(--card);
  border-top: 4px solid var(--gold);
  color: var(--text);
  text-align: center;
  font-size: 15px;
  line-height: 1.5;
}
.perk__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--wine);
  color: var(--gold);
}
.perk__icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.perk__title {
  margin: 0 0 10px;
  font-family: var(--font-title);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--red);
}
.notice {
  width: 100%;
  max-width: 1116px;
  margin-top: 30px;
  padding: 22px 26px;
  border: 1px solid rgba(230, 182, 86, .55);
  border-left: 4px solid var(--gold);
  background: rgba(0, 0, 0, .22);
  font-size: 15px;
  line-height: 1.6;
}
.notice__tag { color: var(--gold); letter-spacing: .5px; }

/* =========================================================
   6. FORM  (light, like FAQ / testimonials)
   ========================================================= */
.signup { background: var(--light); padding: 75px 0 80px; text-align: center; }
.signup__title { font-size: 44px; color: var(--red); }
.signup__lead { max-width: 560px; margin-top: 14px; font-size: 17px; }
.signup__btn { max-width: 440px; margin-top: 28px; font-size: 15px; }
.signup__last {
  margin-top: 26px;
  font-family: var(--font-title);
  font-size: 22px;
  font-style: italic;
  font-weight: 600;
}

/* Kajabi form: transparent bg, full-width fields, green CTA like the rest of the page */
/* Full width + aligned with the text: cancel Kajabi's own padding / max-width */
.kform #kajabi-form,
.kform #kajabi-form.kajabi-form--inline,
.kform #kajabi-form form,
.kform #kajabi-form .kajabi-form__content,
.kform #kajabi-form fieldset {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.kform #kajabi-form .kajabi-form__form-item {
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
}
.kform #kajabi-form .recaptcha-field { margin: 0 !important; }
.kform #kajabi-form input[type="text"],
.kform #kajabi-form input[type="email"] {
  display: block;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
.kform #kajabi-form .kajabi-form__btn {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 4px 0 0 !important;
}
.kform #kajabi-form .kajabi-form__title:empty,
.kform #kajabi-form .kajabi-form__subtitle:empty { display: none; }
.kform #kajabi-form input[type="text"],
.kform #kajabi-form input[type="email"] { width: 100%; }
.kform #kajabi-form .kajabi-form__btn {
  width: 100%;
  background-color: var(--green) !important;
  font-weight: 700;
  text-transform: uppercase;
}
.kform #kajabi-form .kajabi-form__btn:not(.kajabi-form__btn--disabled):hover {
  background-color: var(--green-hover) !important;
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer { background: var(--red); color: var(--white); padding: 40px 0 45px; text-align: center; font-size: 15px; }
.footer__logo { width: 140px; margin-bottom: 18px; }
.footer .txt { margin-bottom: 14px; }
.footer .txt:last-child { margin-bottom: 0; }
.footer__links a { color: var(--white); }

/* =========================================================
   Entrance animation
   ========================================================= */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   TABLET (≤ 1024px)
   ========================================================= */
@media (max-width: 1024px) {
  .hero { background-position: 65% center; }
  .hero__content { max-width: 470px; }
  .hero__title { font-size: 40px; }
  .h--md { font-size: 32px; }

  .story .split,
  .whatis .split { flex-direction: column; }
  .story__img { flex: 0 0 auto; max-width: 100%; width: 520px; }
  .story__content,
  .whatis__content { flex: 0 1 auto; width: 100%; max-width: 640px; }
  .whatis__mock--desktop { display: none; }
  .whatis__mock--mobile { display: block; width: 100%; margin-bottom: 26px; }

  .skills, .perks__grid { gap: 16px; }
  .skills { grid-template-columns: repeat(2, 1fr); }
  .perk { padding: 28px 18px; }
}

/* =========================================================
   MOBILE (≤ 767px)
   ========================================================= */
@media (max-width: 767px) {
  .h--md { font-size: 28px; }

  /* Photo on top, text right below it (tighter gap than before) */
  .hero {
    display: block;
    min-height: 0;
    /* text starts right where the legs fade out in the photo */
    padding: 96vw 0 36px;
    background: var(--blush) url("../img/hero-mobile-v3.jpg") center top / 100% auto no-repeat;
  }
  .hero__content { max-width: 100%; }
  .hero__logo { width: 104px; margin-bottom: 12px; }
  .eyebrow { font-size: 12px; letter-spacing: 1.5px; }
  .hero__kicker { margin: 10px 0 8px; font-size: 15px; }
  .hero__title { font-size: 32px; margin-bottom: 14px; }
  /* text scales with the screen so the 2nd paragraph always fits in 4 lines */
  .hero .wrap { padding: 0 16px; }
  .hero__text { font-size: min(3.64vw, 16px); margin-bottom: 22px; }
  .hero__text b { font-weight: 600; }
  .hero__form { max-width: 100%; }

  .story, .whatis, .method, .perks, .signup { padding: 55px 0 60px; }
  .story .split { gap: 28px; }
  .story__img { width: 100%; }
  .story__content .txt { font-size: 16px; }

  .method__sub { font-size: 21px; }
  .skills { grid-template-columns: 1fr; gap: 14px; margin-top: 24px; }
  .skill { padding: 22px 20px 22px 72px; }
  .skill__num { left: 18px; top: 20px; }

  .perks__grid { grid-template-columns: 1fr; gap: 18px; margin-top: 32px; }
  .perk { padding: 28px 22px; }
  .perk__title { font-size: 21px; }
  .notice { padding: 18px; font-size: 14px; }

  .signup__title { font-size: 32px; }
  .signup__lead { font-size: 16px; }
  .signup__last { font-size: 20px; }

  .btn { padding: 17px 18px; font-size: 13px; }
  .topbar { font-size: 15px; letter-spacing: 1px; padding: 12px 14px; }
}

/* =========================================================
   TABLET HERO (768–1024px): photo on top, text below
   (the desktop photo would sit behind the text here)
   ========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
  .hero {
    display: block;
    min-height: 0;
    padding: 560px 0 50px;
    background:
      linear-gradient(90deg, var(--blush) 0%, rgba(232, 220, 220, 0) 18%, rgba(232, 220, 220, 0) 82%, var(--blush) 100%) center top / 580px 723px no-repeat,
      url("../img/hero-mobile-v3.jpg") center top / 580px auto no-repeat,
      var(--blush);
  }
  .hero__content { max-width: 600px; margin: 0 auto; }
  .hero__form { max-width: 100%; }
}