/* ===== FONTS ===== */
@font-face {
  font-family: 'DIN Next LT Pro';
  src: url('../fonts/DINNextLTPro-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DIN Next LT Pro';
  src: url('../fonts/DINNextLTPro-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DIN Next LT Pro';
  src: url('../fonts/DINNextLTPro-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'DIN Next LT Pro';
  src: url('../fonts/DINNextLTPro-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DIN Next LT Pro';
  src: url('../fonts/DINNextLTPro-MediumItalic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'DIN Next LT Pro';
  src: url('../fonts/DINNextLTPro-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DIN Next LT Pro';
  src: url('../fonts/DINNextLTPro-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'DIN Next LT Pro Condensed';
  src: url('../fonts/DINNextLTPro-Condensed.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DIN Next LT Pro Condensed';
  src: url('../fonts/DINNextLTPro-CondensedBold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DIN Condensed';
  src: url('../fonts/DINCondensed-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ===== RESET ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ===== VARIABLES ===== */
:root {
  --font-headline: 'DIN Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'DIN Next LT Pro', Arial, sans-serif;
  --font-nav: 'DIN Next LT Pro Condensed', 'Arial Narrow', sans-serif;
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-pink: #ff3c7c;
  --color-green: #42c8a2;
  --color-yellow: #ffc85c;
  --color-purple: #5f4099;
  --color-eggplant: #781268;
  --color-red: #b70c34;
  --color-gray: #666666;
  --color-light-gray: #fafafa;
  --color-card-desc: #bbb;
  --max-width: 1440px;
}

html { scroll-behavior: smooth; }

body {
  background: var(--color-white);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--color-black);
}

/* ===== NAV ===== */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 10px clamp(24px, 5vw, 70px);
  background: var(--color-white);
}
.nav-logo {
  padding: 10px;
  display: flex;
  align-items: center;
}
.nav-logo img {
  height: 16px;
  width: auto;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 10px;
  padding-top: 10px;
  padding-bottom: 8px;
}
.nav-link {
  font-family: var(--font-nav);
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  color: var(--color-gray);
  text-decoration: none;
  transition: color 0.2s;
}
.nav-link:hover { color: var(--color-black); }
.nav-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-purple);
  color: var(--color-white);
  font-family: var(--font-nav);
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 7px 22px 4px;
  transition: background 0.2s;
}
.nav-cta:hover { background: #4e3480; }

/* ===== HERO ===== */
.hero {
  display: flex;
  flex-direction: column;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 200px clamp(24px, 10vw, 160px) 100px;
  gap: 46px;
}
.hero-headline {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 75px;
  line-height: 70px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-black);
}
.hero-headline .pink { color: var(--color-pink); }
.hero-headline .green { color: var(--color-green); }
.hero-subcopy {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  color: var(--color-black);
  max-width: 800px;
}
.hero-subcopy .bold-pink {
  font-weight: 700;
  color: var(--color-pink);
}

/* ===== STATS BAR ===== */
.stats-bar-wrapper {
  max-width: var(--max-width);
  margin: 0 auto;
  background: var(--color-white);
  padding: 0 clamp(24px, 5vw, 80px) 120px;
}
.stats-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--color-black);
  padding: 40px clamp(24px, 10vw, 150px);
}
.stat-graphic {
  position: relative;
  flex-shrink: 0;
}
.stat-start-finish-graphic {
  width: 60px;
  height: 87px;
}
.stat-30-days-graphic {
  width: 80px;
  height: 88px;
}
.stat-svg {
  display: block;
}

/* ===== PROBLEM ===== */
.problem {
  display: flex;
  flex-direction: column;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 clamp(24px, 9vw, 140px) 120px;
  gap: 50px;
  align-items: center;
}
.problem-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 825px;
  width: 100%;
}
.section-headline {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 55px;
  line-height: 55px;
  letter-spacing: 0.44px;
  text-transform: uppercase;
  color: var(--color-black);
}
.section-body {
  font-size: 20px;
  line-height: 28px;
  color: var(--color-gray);
}
.problem-content {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 60px;
  align-items: center;
  justify-content: center;
  padding-bottom: 40px;
  width: 100%;
}
.pain-bars-area {
  display: flex;
  align-items: center;
}
.bracket-svg {
  width: 60px;
  height: 307px;
  flex-shrink: 0;
  margin-right: -38px;
  position: relative;
  z-index: 1;
}
.bracket-svg line,
.bracket-svg polyline {
  stroke: var(--color-black);
  stroke-width: 1.5;
  fill: none;
}
.pain-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pain-bar {
  display: inline-flex;
  align-items: center;
  padding: 9px 20px 8px;
  color: var(--color-white);
  font-weight: 500;
  font-style: italic;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: -0.46px;
  width: fit-content;
}
.pain-bar.pink { background: var(--color-pink); }
.pain-bar.yellow { background: var(--color-yellow); }
.pain-bar.purple { background: var(--color-purple); }
.pain-bar.green { background: var(--color-green); }
.pain-bar.eggplant { background: var(--color-eggplant); }

.pull-quote {
  display: flex;
  flex-direction: column;
  gap: 36px;
  flex: 1 0 0;
  min-width: 290px;
  max-width: 580px;
  align-items: flex-end;
}
.quote-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
}
.quote-icon {
  flex-shrink: 0;
  width: 31px;
  height: 27px;
  margin-top: 2px;
}
.quote-text {
  font-weight: 300;
  font-size: 21px;
  line-height: 29px;
  letter-spacing: 0.2px;
  color: var(--color-gray);
  flex: 1;
}
.quote-caption {
  font-style: italic;
  font-size: 16px;
  line-height: 22px;
  color: var(--color-gray);
  padding: 0 40px;
  width: 100%;
}
.quote-caption strong {
  font-weight: 700;
  font-style: italic;
  color: var(--color-black);
}

/* ===== PROCESS ===== */
.process {
  display: flex;
  flex-direction: column;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 clamp(24px, 6vw, 100px) 100px;
  gap: 60px;
  align-items: center;
}
.process-header {
  display: flex;
  gap: 93px;
  align-items: flex-start;
  justify-content: center;
  padding: 0 clamp(0px, 8vw, 120px);
  width: 100%;
}
.process-header-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 0 0;
  min-width: 225px;
}
.process-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding-top: 20px;
  flex-shrink: 0;
}
.process-stat img {
  display: block;
}
.process-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  padding: 10px;
  width: 100%;
}
.process-card {
  width: 249px;
  height: 331px;
  position: relative;
  flex-shrink: 0;
}
/* Pink offset background — peeks out at right + bottom */
.process-card-bg {
  position: absolute;
  top: 7px;
  left: 7px;
  right: 0;
  bottom: 0;
  background: var(--color-pink);
}
/* White foreground card — offset up-left from pink */
.process-card-front {
  position: absolute;
  top: 0;
  left: 0;
  right: 7px;
  bottom: 7px;
  background: var(--color-light-gray);
  display: flex;
  flex-direction: column;
  padding: 0;
}
.process-card-body {
  display: flex;
  flex-direction: column;
  padding: 36px 28px 0 49px;
  flex: 1;
}
.process-card-step {
  font-family: var(--font-nav);
  font-size: 24px;
  line-height: 22px;
  letter-spacing: 1.1px;
  color: var(--color-black);
  margin-bottom: 18px;
}
.process-card-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--color-pink);
  margin-right: 10px;
  flex-shrink: 0;
  margin-top: 6px;
}
.process-card-desc-row {
  display: flex;
  align-items: flex-start;
}
.process-card-desc {
  font-style: italic;
  font-size: 16px;
  line-height: 22px;
  color: var(--color-gray);
}
.process-card-footer {
  display: flex;
  align-items: flex-start;
  padding: 0 28px 24px 49px;
}
.process-card-action {
  font-weight: 700;
  font-size: 15px;
  line-height: 22px;
  color: var(--color-gray);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ===== DELIVERABLES ===== */
.deliverables {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 0;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 clamp(24px, 13vw, 200px) 160px;
}
.deliverables-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 0 0;
  min-width: 165px;
  padding-left: 20px;
}
.deliverables-header .bold-intro {
  font-weight: 700;
  font-style: italic;
  font-size: 20px;
  line-height: 28px;
  color: var(--color-black);
}
.deliverables-header .section-body {
  margin-top: 14px;
}
.deliverables-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 505px;
  max-width: 505px;
  flex-shrink: 0;
  padding: 24px 31px;
  background: var(--color-white);
}
.deliverable-item {
  display: flex;
  flex-direction: column;
  gap: 23px;
  align-items: center;
  min-width: 195px;
}
.deliverable-top {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  padding: 0 20px;
}
.deliverable-num-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}
.deliverable-num-label {
  flex: 1;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-black);
}
.deliverable-num-label .num {
  font-size: 50px;
  line-height: 50px;
  letter-spacing: -1.7px;
}
.deliverable-num-label .label {
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0;
  margin-left: 4px;
}
.deliverable-checkbox {
  width: 31px;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  flex-shrink: 0;
}
.deliverable-checkbox svg {
  width: 100%;
  height: 100%;
}
.deliverable-desc {
  font-style: italic;
  font-size: 16px;
  line-height: 22px;
  color: var(--color-gray);
  width: 100%;
}
.deliverable-divider {
  width: 100%;
  height: 1px;
  background: var(--color-gray);
}

/* ===== PRICING ===== */
.pricing {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 clamp(24px, 15vw, 220px) 120px;
}
.pricing-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 65px;
  align-items: center;
  justify-content: center;
  position: relative;
}
.pricing-bg {
  position: absolute;
  top: -61px;
  left: -340px;
  width: 1200px;
  height: 700px;
  background: var(--color-light-gray);
  z-index: 0;
}
.pricing-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 0 0;
  max-width: 425px;
  min-width: 252px;
  position: relative;
  z-index: 1;
}
.pricing-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 0 0;
  max-width: 500px;
  min-width: 475px;
  background: var(--color-black);
  position: relative;
  z-index: 1;
}
.pricing-pink-bar {
  width: 100%;
  height: 5px;
  background: var(--color-pink);
}
.pricing-card-inner {
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding: 60px 80px;
}
.pricing-tier {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pricing-price {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.pricing-amount-row {
  display: flex;
  align-items: baseline;
  color: var(--color-white);
}
.pricing-amount {
  font-weight: 700;
  font-size: 55px;
  line-height: 28px;
}
.pricing-period {
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  text-transform: uppercase;
  margin-left: 4px;
}
.pricing-tier-name {
  font-family: var(--font-nav);
  font-size: 24px;
  line-height: 22px;
  letter-spacing: 1.1px;
  color: var(--color-white);
}
.pricing-tier-desc {
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  color: var(--color-card-desc);
}
.pricing-tier-desc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pricing-tier-desc ul li::before {
  content: "\2022\00a0";
}
.pricing-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.pricing-divider-line {
  flex: 1;
  height: 1px;
  background: #444;
}
.pricing-divider-plus {
  color: var(--color-white);
  font-weight: 300;
  font-size: 18px;
}

/* ===== CTA ===== */
.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  background: var(--color-black);
  padding-bottom: 100px;
}
.cta-stripe {
  width: 100%;
  height: 13px;
  background: var(--color-eggplant);
}
.cta-heading {
  padding-top: 50px;
  max-width: var(--max-width);
  margin: 0 auto;
}
.cta-headline {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 75px;
  line-height: 70px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-white);
  text-align: center;
}
.cta-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-purple);
  border: none;
  padding: 22px 60px;
  text-decoration: none;
  transition: background 0.2s;
}
.cta-button:hover { background: #4e3480; }
.cta-button-text {
  font-weight: 700;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-white);
}

/* ===== FOOTER ===== */
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 10px clamp(24px, 5vw, 70px);
  background: var(--color-white);
}
.footer-logo {
  padding: 10px;
  display: flex;
  align-items: center;
}
.footer-logo img {
  height: 16px;
  width: auto;
}
.footer-copyright {
  font-family: var(--font-nav);
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  color: var(--color-gray);
  padding: 10px;
  padding-top: 10px;
  padding-bottom: 8px;
}

/* ===== HOME PAGE ===== */
.home {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 100vh;
  background: var(--color-black);
}
.home-stripe {
  width: 100%;
  height: 6px;
  background: var(--color-pink);
}
.home-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}
.home-logo img {
  width: 300px;
  height: 42px;
}
.home-tagline {
  font-family: var(--font-nav);
  font-size: 24px;
  line-height: 22px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #aaa;
}
.home-accent {
  width: 60px;
  height: 2px;
  background: var(--color-green);
}
.home-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-bottom: 70px;
}
.home-contact {
  font-family: var(--font-nav);
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  color: var(--color-white);
  text-decoration: none;
  transition: color 0.2s;
}
.home-contact:hover { color: var(--color-pink); }

/* ===== PAIN BARS WRAP (1024px) ===== */
@media (max-width: 1024px) {
  .pain-bars { max-width: 420px; }
  .bracket-svg { height: 380px; }
}

/* ===== RESPONSIVE — MOBILE (768px) ===== */
@media (max-width: 768px) {
  /* Nav: keep logo + CTA, hide text links */
  .nav-links .nav-link { display: none; }
  .nav-logo { padding-left: 0; }
  .nav-links { padding-right: 0; }
  .nav-cta { font-size: 13px; padding: 6px 14px 4px; }

  /* Hero: smaller headline, tighter padding */
  .hero { padding: 60px 24px 40px; gap: 24px; }
  .hero-headline { font-size: 45px; line-height: 42px; }

  /* Stats bar: wrap and scale down */
  .stats-bar-wrapper { padding: 0 24px 60px; }
  .stats-bar { display: grid; grid-template-columns: 1fr 1fr; padding: 24px 30px; gap: 20px; justify-items: center; align-items: center; }
  .stats-bar > * { transform: scale(0.75); transform-origin: center; }

  /* Problem: stack pain bars above quote, hide bracket */
  .problem { padding: 0 24px 60px; gap: 30px; }
  .section-headline { font-size: 43px; line-height: 42px; }
  .section-body { font-size: 18px; line-height: 22px; }
  .hero-subcopy { font-size: 18px; line-height: 22px; }
  .quote-caption { font-size: 18px; line-height: 22px; }
  .quote-text { font-size: 18px; line-height: 26px; }
  .deliverable-desc { font-size: 21px; line-height: 25px; }
  .process-card-desc { font-size: 16px; line-height: 22px; }
  .process-card-action { font-size: 15px; line-height: 22px; }
  .deliverable-num-label .label { font-size: 15px; line-height: 22px; }
  .deliverable-desc { font-size: 16px; line-height: 22px; }
  .pricing-tier-desc { font-size: 16px; line-height: 22px; }
  .pricing-period { font-size: 15px; line-height: 22px; }
  .cta-button-text { font-size: 15px; line-height: 22px; }
  .problem-content { flex-direction: column; }
  .pull-quote { max-width: 100%; }
  .pain-bar { font-size: 17px; line-height: 22px; padding: 8px 16px 7px; }
  .bracket-svg { display: none; }

  /* Process: stack header, single-column cards */
  .process { padding: 0 24px 60px; gap: 32px; }
  .process-header { flex-direction: column; padding: 0; gap: 24px; align-items: center; text-align: center; }
  .process-stat { flex-direction: row; gap: 12px; padding-top: 0; align-items: center; }
  .process-stat img { max-width: 120px; height: auto; }
  .process-cards { flex-direction: column; align-items: center; }
  .process-card { width: 249px; height: 331px; }

  /* Deliverables: stack header above list, list full-width */
  .deliverables { padding: 0 24px 60px; flex-direction: column; }
  .deliverables-header { min-width: 100%; padding-left: 0; }
  .deliverables-list { width: 100%; max-width: 600px; flex-shrink: 1; padding-left: 0; padding-right: 0; }
  .deliverable-num-label .num { font-size: 36px; line-height: 36px; }

  /* Pricing: stack text above card, card full-width */
  .pricing { padding: 0 24px 60px; }
  .pricing-bg { display: none; }
  .pricing-inner { gap: 30px; flex-direction: column; background: var(--color-light-gray); padding: 40px; border-radius: 4px; }
  .pricing-card { min-width: 100%; }
  .pricing-card-inner { padding: 28px 24px; gap: 32px; }
  .pricing-amount { font-size: 40px; line-height: 24px; }

  /* CTA: reduce headline, tighten padding */
  .cta { gap: 32px; padding-bottom: 60px; }
  .cta-headline { font-size: 41px; line-height: 40px; }
  .cta-button { padding: 16px 40px; }

  /* Footer */
  .footer-copyright { font-size: 13px; }

  /* Home */
  .home-logo img { width: 200px; height: auto; }
  .home-tagline { font-size: 18px; }
}

/* ===== SMALL MOBILE (480px) ===== */
@media (max-width: 480px) {
  .hero-headline { font-size: 37px; line-height: 36px; }
  .section-headline { font-size: 35px; line-height: 36px; }
  .cta-headline { font-size: 33px; line-height: 34px; }
  .home-tagline { font-size: 14px; letter-spacing: 0.8px; }
}