:root {
  --bg-dark: #180700;
  --accent-gold: #d7c6a8;
  --text-white: #f7f0e8;
  --text-gold-dim: #a08c71;

  --font-heading: "Fraunces", serif;
  --font-body: "Inter", sans-serif;

  --bg-black: #020202;
  --text-brown: #503017;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--bg-dark);
  color: var(--text-white);
  font-family: var(--font-body);
  overflow-x: hidden;
  line-height: 1.5;
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.top-bar {
  background-color: var(--accent-gold);
  color: black;
  text-align: center;
  padding: 16px 10px;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 80px;
  padding-bottom: 0;
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background-color: var(--bg-dark);
}

.hero-header-label {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* As per snippet alignment */
  margin-bottom: 32px;
}

.hero-label-title {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 300;
  font-size: 36px;
  color: var(--text-white);
  line-height: 1.4;
}

.hero-label-year {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 16px;
  color: var(--text-gold-dim);
}

.hero-content {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
  z-index: 10;
}

.main-title {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 32px;
  color: var(--text-white);
  line-height: 1.2;
}

.main-title .italic {
  font-style: italic;
  font-weight: 400;
}

.hero-description {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  color: var(--text-gold-dim);
  margin-top: 12px;
  line-height: 1.5;
}

.hero-description strong {
  font-weight: 700;
}

.hero-cta-container {
  margin-top: 32px;
  margin-bottom: 40px;
  display: flex;
  justify-content: center;
  width: 100%;
}

.hero-cta {
  padding: 14px 24px;
  background: #180700;
  border-radius: 4px;
  outline: 1px solid var(--accent-gold);
  outline-offset: -1px;
  color: var(--accent-gold);
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 16px;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s ease;
  z-index: 10;
}

.hero-cta:hover {
  background: var(--accent-gold);
  color: #180700;
}

/* Hero Collage */
.hero-collage {
  position: relative;
  width: 100%;
  height: 400px; /* Adjust based on content */
  display: flex;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 0px;
}

.collage-wrapper {
  position: relative;
  width: 360px; /* Mobile base width reference */
  height: 100%;
}

.collage-img {
  position: absolute;
  object-fit: cover;
  border-radius: 2px;
}

/* Adapt specific images from snippet logic */
.collage-img-1 {
  /* Rotated image */
  width: 220px;
  height: 300px;
  top: 40px;
  right: -40px;
  transform: rotate(15deg);
  z-index: 1;
  opacity: 0.8;
}

.collage-img-2 {
  /* Left image */
  width: 180px;
  height: 260px;
  top: 0;
  left: -20px;
  z-index: 2;
  transform: rotate(-5deg);
}

.collage-img-3 {
  /* Center focal image */
  width: 200px;
  height: 280px;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Marquee / Roll Section */
.hero-roll {
  width: 100%;
  background: #470509;
  padding: 14px 0;
  overflow: hidden;
  display: flex;
  position: relative;
  margin-top: 0; /* Connects to usage */
}

.roll-track {
  display: flex;
  align-items: center;
  gap: 24px;
  white-space: nowrap;
  animation: scrollText 20s linear infinite;
  padding-left: 24px; /* Initial offset */
}

.roll-text {
  color: var(--accent-gold);
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 24px;
}

@keyframes scrollText {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  } /* Assuming content is duplicated */
}

.vsl-container {
  width: calc(100% - 32px);
  max-width: 800px; /* Or adapt as needed */
  margin: 32px 0 24px;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  background: #000;
}

.video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  /* If video isn't 16:9, adjust or let video dictate height if not using padding hack */
}

#vsl-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* or contain */
  display: block;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(
    100% - 4px
  ); /* Leave space for progress bar if bar is below overlay */
  z-index: 10;
  cursor: pointer;
  /* Transparent overlay to capture clicks */
}

.click-to-unmute {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: var(--text-white);
  padding: 8px 16px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  z-index: 20;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.3s ease;
  animation: pulse 2s infinite;
  pointer-events: none; /* Clicking overlay handles it via JS, or let it capture clicks if above overlay */
}

/* Allow click on button itself if overlay logic permits, 
   but overlay covers resizing/controls. 
   We will handle click on .video-wrapper or overlay to unmute.
*/

@keyframes pulse {
  0% {
    transform: translateX(-50%) scale(1);
  }
  50% {
    transform: translateX(-50%) scale(1.05);
  }
  100% {
    transform: translateX(-50%) scale(1);
  }
}

.video-progress-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.2);
  z-index: 20;
}

.hero-footer {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 0 16px; /* Prevent button from touching edges */
  animation: fadeIn 1s ease-out 0.2s backwards;
}

.brand-signature {
  text-align: center;
}

.glow-mode {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 300;
  font-size: 44px;
  color: var(--text-white);
  line-height: 1;
}

.notion-ver {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 20px;
  color: var(--text-gold-dim);
  margin-top: 4px;
}

.cta-button {
  background-color: #5bc15c;
  color: #f7f0e8;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 18px;
  text-transform: uppercase;
  line-height: 25.2px;
  text-decoration: none;
  padding: 24px 21px;
  border-radius: 4px;
  outline: 1px solid #18611e;
  outline-offset: -1px;
  box-shadow:
    2px 2px 13.9px rgba(97, 24, 31, 0.12),
    4px 6px 6.3px rgba(97, 24, 31, 0.14) inset;

  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;

  transition: all 0.3s ease;
  width: 100%;
  max-width: 400px;
  text-align: center;
}

.cta-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.2); /* Slightly brighter on hover */
  box-shadow:
    2px 4px 16px rgba(24, 97, 35, 0.3),
    4px 6px 6.3px rgba(24, 97, 30, 0.2) inset;
}

.cta-button:active {
  transform: translateY(1px);
  filter: brightness(0.9);
  box-shadow: 1px 1px 4px rgba(24, 97, 28, 0.1) inset;
}

.community-text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  color: var(--text-white);
  text-align: center;
  margin-top: 10px;
}

/* Desktop Responsiveness */
@media (min-width: 1024px) {
  .hero {
    padding-top: 134px;
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    text-align: center;
  }

  .hero-content {
    text-align: center;
    margin: 0 auto;
    padding: 0 16px;
    width: 100%;
    max-width: 800px;
  }

  .main-title {
    font-size: 56px;
  }

  .hero-description {
    font-size: 18px;
    max-width: 600px;
    margin: 0 auto;
  }

  /* Image container removed in VSL version, valid to ignore or hide */
  .hero-image-container {
    display: none;
  }

  .hero-footer {
    align-items: center;
    padding: 0;
    margin-top: 0px;
    width: 100%;
    max-width: 600px;
  }

  .brand-signature {
    text-align: center;
    order: 0; /* Reset order if changed */
  }

  .cta-button {
    width: 100%;
    max-width: 400px;
  }

  .community-text {
    text-align: left;
  }
}

/* Question Section */
.question-section {
  background-color: var(--accent-gold);
  padding: 72px 16px;
  display: flex;
  justify-content: center;
}

.question-content {
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

.question-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 24px;
  color: var(--bg-dark); /* #180700 */
}

.question-text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  color: var(--text-brown);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.question-text strong {
  font-weight: 700;
}

/* About Section */
.about-section {
  background-color: var(--bg-black);
  padding: 72px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  position: relative;
  overflow: hidden;
}

.glow-mode-bg-text {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-heading);
  font-size: 80px;
  font-weight: 100;
  text-transform: uppercase;
  color: var(--text-gold-dim);
  opacity: 0.2;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}

/* New Collage Gallery Styles */
.about-collage {
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 1;
  height: 180px;
  align-items: flex-start;
  margin-top: 10px;
}

.about-collage-hero {
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 1;
  height: 180px;
  align-items: flex-start;
  margin-top: 10px;
}

.collage-item {
  width: 114px;
  height: 100%;
  background: var(--accent-gold);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.collage-item img {
  position: absolute;
  max-width: none; /* Allow overflowing container */
}

/* Specific styling from snippet */
.collage-item:nth-child(1) img {
  width: 248px;
  height: 230px;
  left: -67px;
  top: -25px;
}

.collage-item:nth-child(2) img {
  width: 114px;
  height: 198px;
  left: 0px;
  top: -9px;
}

.collage-item:nth-child(3) img {
  width: 172px;
  height: 298px;
  left: -29px;
  top: -59px;
}

/* Card Background Variants */
.bg-light-1 {
  background-color: #f7f0e8 !important; /* Base white/cream */
}
.bg-light-2 {
  background-color: #e6dcc3 !important; /* Beige */
}
.bg-light-3 {
  background-color: #d7c6a8 !important; /* Gold */
}

/* Ensure list items in cards look good */
.card-description ul {
  list-style-position: inside;
  padding-left: 4px;
}
.card-description li {
  margin-bottom: 4px;
}

.about-content {
  z-index: 1;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

/* Members Area Section */
.members-section {
  width: 100%;
  padding: 0 0px 0 16px; /* Removing bottom padding */
  padding-top: 0;
  background-color: var(--bg-black);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  position: relative;
  overflow: hidden;
}

.members-content {
  width: 100%;
  max-width: 358px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
  z-index: 1;
}

.members-title {
  color: var(--text-white);
  font-size: 24px;
  font-family: var(--font-heading);
  font-weight: 600;
}

.members-list-text {
  color: var(--text-white);
  font-size: 18px;
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.7;
}

.members-image-container {
  width: 100%;
  max-width: 500px;
  position: relative;
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
  padding-right: 0;
  display: flex;
  justify-content: flex-end; /* Align to right based on request implying edge placement */
}

.members-img {
  width: 100%;
  height: auto;
  border-top-left-radius: 17px;
  display: block;
}

.about-title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 600;
  color: var(--text-white);
}

.about-text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  color: var(--text-white);
  font-weight: 300;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.about-text strong {
  font-weight: 700;
}

/* Desktop Styles for New Sections */
@media (min-width: 1024px) {
  .question-content {
    max-width: 800px;
  }

  .question-title {
    font-size: 32px;
  }

  .question-text {
    font-size: 18px;
  }

  .about-section {
    padding: 100px 16px;
  }

  .about-content {
    max-width: 800px;
  }

  .about-title {
    font-size: 32px;
  }

  .about-text {
    font-size: 18px;
  }

  .about-gallery {
    height: 300px; /* Larger on desktop */
    gap: 16px;
    margin-bottom: 32px;
  }

  .gallery-item {
    width: 200px;
    height: 300px;
  }

  .glow-mode-bg-text {
    font-size: 150px;
    top: 10px;
  }

  /* How it Works Section Desktop */
  .how-it-works-section {
    padding: 100px 16px;
  }

  /* Bonuses Section Desktop */
  .bonuses-section {
    padding: 100px 16px;
  }
}

/* How it Works Section - Mobile & Base */

.how-it-works-section {
  background-color: var(--text-white); /* #f7f0e8 */
  padding: 72px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.section-header {
  text-align: center;
  max-width: 400px;
}

.section-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 24px;
  color: var(--bg-dark);
}

.cards-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 400px;
  position: relative;
  /* Ensure container is tall enough for sticky to work comfortably if needed, but flex col works well */
}

/* Base card styling */
.stack-card {
  position: sticky;
  margin-bottom: 20px; /* Spacer */
  width: 100%;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  padding: 16px;

  /* Stacking offset logic */
  top: calc(80px + (var(--i) * 30px));
  /* 
     Base offset = 80px (clearance from top)
     Increment = 30px so each card peeks 30px below the prev one top edge?
     Actually if we want them to STACK on top of each other, 
     sticky elements will stack if they have different top values?
     If Card 1 is sticky at 100px, it stays there.
     Card 2 comes up. If Card 2 is sticky at 100px, it will slide OVER Card 1.
     If Card 2 is sticky at 130px, it will slide UP TO 130px and stop, 
     leaving 30px of Card 1 visible.
     So increasing 'top' value creates the "stack of papers" look.
  */

  z-index: var(--i);
}

.card-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.card-image {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.card-image img {
  width: 100%;
  height: auto;
  display: block;
}

.card-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 8px;
}

.card-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 28px;
  text-transform: uppercase;
  color: #180700;
  margin-bottom: 4px;
}

.card-divider {
  width: 60px;
  height: 4px;
  background-color: #ebc960;
  margin-bottom: 8px;
  border-radius: 2px;
}

.card-description {
  font-family: var(--font-body);
  font-size: 16px;
  color: #555;
  line-height: 1.5;
}

.card-description strong {
  font-weight: 700;
  color: #180700;
}

@media (min-width: 1024px) {
  .cards-stack {
    max-width: 500px; /* Wider cards on desktop */
  }

  .bonuses-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    width: 100%;
    max-width: 1200px;
    justify-items: center; /* Center content loosely if needed, but cards usually stretch */
  }

  .bonus-card {
    width: 100%;
    max-width: none; /* Remove max-width limit to let grid control */
    height: 100%; /* Uniform height */
  }
}

/* Bonuses Section */
.bonuses-section {
  background-color: var(--bg-black);
  padding: 72px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.bonuses-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 24px;
  color: var(--text-white);
  text-align: center;
  max-width: 320px;
}

.bonuses-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 1000px;
}

.bonus-card {
  background-color: #180700;
  border-radius: 18px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
}

.bonus-image-container {
  height: 173px;
  background-color: #989c95;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.bonus-img {
  width: 100%;
  height: auto;
  min-height: 100%;
  object-fit: cover;
  /* Adjust based on mockups if needed, e.g. top alignment */
  object-position: bottom;
}

.bonus-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bonus-card-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 20px;
  color: var(--text-white);
}

.bonus-card-description {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  color: var(--text-gold-dim);
  line-height: 1.4;
  text-align: justify;
}

.bonus-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.old-price {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 18px;
  color: var(--text-white);
  text-decoration: line-through;
}

.free-badge {
  background-color: var(--accent-gold);
  color: #020202;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 18px;
  padding: 6px 14px;
  border-radius: 2px;
  text-transform: uppercase;
}

/* Testimonials Section */
.testimonials-section {
  background-color: var(--bg-black);
  padding: 72px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.testimonials-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 24px;
  color: var(--text-white);
  text-align: center;
  max-width: 600px;
}

.carousel-container {
  position: relative;
  width: 100%;
  max-width: 500px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.carousel-track-container {
  overflow: hidden;
  width: 100%;
  border-radius: 12px;
  position: relative;
}

.carousel-track {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
  transition: transform 0.4s ease-in-out;
}

.carousel-slide {
  min-width: 100%;
  box-sizing: border-box;
}

.carousel-slide img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

.carousel-btn {
  background-color: var(--accent-gold);
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition:
    transform 0.2s,
    background-color 0.2s;
  flex-shrink: 0;
}

.carousel-btn:hover {
  transform: scale(1.1);
  background-color: #c7b596;
}

.carousel-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

.carousel-indicator {
  border: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #555;
  cursor: pointer;
  transition: background-color 0.3s;
}

.carousel-indicator.current-slide {
  background-color: var(--accent-gold);
}

@media (min-width: 768px) {
  .carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .carousel-btn.prev-btn {
    left: -60px;
  }

  .carousel-btn.next-btn {
    right: -60px;
  }
}

/* About Raquel Section */
.about-raquel-section {
  background-color: var(--text-white); /* Beige/White background #F7F0E8 */
  padding: 72px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}

.raquel-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 24px;
  color: var(--bg-dark); /* #180700 */
}

.italic-highlight {
  font-style: italic;
  font-weight: 600;
  color: #61181f; /* Specific red/brown from design */
}

.raquel-image-container {
  width: 100%;
  max-width: 400px;
  border-radius: 4px;
  overflow: hidden;
}

.raquel-img {
  width: 100%;
  height: auto;
  display: block;
}

.raquel-content {
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.raquel-subtitle {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 24px;
  color: var(--bg-dark);
}

.raquel-text {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--bg-dark);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.raquel-text strong {
  font-weight: 700;
}

/* Decision Section */
.decision-section {
  background-color: var(
    --bg-black
  ); /* #020202 usually, but snippet says #180700 for background of section? check design.. actually snippet shows section bg #180700 */
  background-color: #180700;
  padding: 72px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.decision-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 24px;
  color: var(--text-white);
  text-align: center;
}

.decision-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 800px;
  align-items: center;
}

.decision-card {
  background-color: #61181f; /* Card 1 bg */
  border-radius: 18px;
  padding: 24px;
  width: 100%;
  max-width: 358px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  color: var(--text-white);
}

.decision-card.option-2 {
  background-color: var(--accent-gold); /* #D7C6A8 */
  color: var(--bg-dark);
}

.decision-badge {
  padding: 14px 24px;
  border-radius: 4px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 20px;
  text-align: center;
}

.badge-1 {
  background-color: #61181f;
  border: 1px solid var(--text-white);
  color: var(--text-white);
}

.badge-2 {
  background-color: var(--accent-gold);
  border: 1px solid var(--bg-dark);
  color: var(--bg-dark);
}

.decision-list {
  list-style: none;
  font-family: var(--font-body);
  font-size: 18px; /* Slightly larger per design */
  line-height: 1.4;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.decision-divider {
  font-family: var(--font-heading);
  font-weight: 100; /* Thin */
  font-size: 72px;
  color: var(--text-white);
}

/* Offer Section */
.offer-section {
  background-color: var(--bg-black); /* #020202 */
  padding: 72px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.offer-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 24px;
  color: var(--text-white);
  text-align: center;
  max-width: 400px;
}

.offer-card {
  background-color: #000; /* Inner card black? or #180700? Snippet says background: black */
  padding: 32px 16px;
  width: 100%;
  max-width: 358px; /* Mobile width */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.offer-image-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}

.offer-mockup {
  max-width: 100%;
  height: auto;
}

.offer-pricing {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.price-from {
  font-family: var(--font-heading);
  font-size: 20px;
  color: var(--text-white);
}

.strikethrough {
  text-decoration: line-through;
  color: #a22430;
}

.price-installments {
  font-family: var(--font-heading);
  font-size: 24px;
  color: #fed283;
}

.price-value {
  font-family: var(--font-heading);
  font-size: 56px;
  color: #fed283; /* Gold */
  line-height: 1;
}

.price-cash {
  font-family: var(--font-heading);
  font-size: 18px;
  color: #2ba948; /* Green */
}

.offer-savings {
  background-color: #180700;
  border: 1px solid var(--text-white);
  border-radius: 999px;
  padding: 6px 14px;
  color: var(--text-white);
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 300;
}

/* Guarantee Section */
.guarantee-section {
  background-color: var(--bg-black); /* Check if different, design looks dark */
  background-color: #180700;
  padding: 72px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.guarantee-title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 600;
  color: var(--text-white);
}

.guarantee-text {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-white);
  max-width: 400px;
  font-weight: 300;
}

/* Desktop Responsive Adjustments for New Sections */
@media (min-width: 1024px) {
  /* About Raquel */
  .about-raquel-section {
    padding: 100px 16px;
  }
  .raquel-content,
  .raquel-title {
    max-width: 800px;
  }

  /* Decision */
  .decision-cards {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
  }
  .decision-card {
    height: auto;
    /* ensure equal height */
  }
  .decision-divider {
    font-size: 48px; /* Smaller when inline? or keep big */
    align-self: center;
  }

  /* Offer */
  .offer-section {
    padding: 100px 16px;
  }
  .offer-card {
    max-width: 900px; /* Wider card layout for desktop? Or keep vertical stack? */
    /* Design typically keeps offer card vertical or side-by-side with details. 
       Let's keep it vertical stack but wider container/padding for potentially side-by-side image/price later.
       For now, centered vertical stack is safe based on mobile prototype.
    */
  }
}

/* FAQ Section */
.faq-section {
  background-color: #180700;
  padding: 72px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.faq-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 24px;
  color: var(--text-white);
  text-align: center;
}

.faq-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 800px;
}

.faq-item {
  border-bottom: 0.5px solid var(--text-white);
}

.faq-question {
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  list-style: none; /* Removes default arrow */
  color: var(--text-white);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.4;
}

/* Remove default marker for details element */
.faq-question::-webkit-details-marker {
  display: none;
}

.faq-icon {
  width: 32px;
  height: 32px;
  position: relative;
  flex-shrink: 0;
}

/* Custom Plus Icon using CSS */
.faq-icon.plus::before,
.faq-icon.plus::after {
  content: "";
  position: absolute;
  background-color: var(--text-white);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
}

/* Horizontal line */
.faq-icon.plus::before {
  width: 18px;
  height: 2px;
}

/* Vertical line */
.faq-icon.plus::after {
  width: 2px;
  height: 18px;
}

/* Rotate icon when open */
details[open] .faq-icon.plus::after {
  transform: translate(-50%, -50%) rotate(90deg); /* Merges into horizontal line */
}

/* Or turn into X? Design shows Plus. Typically plus turns to minus or X. 
   If plus turns to cross (X), rotate entire container 45deg?
   If plus turns to minus, rotate vertical line 90deg.
   Let's assume Plus -> Minus behavior for simplicity or Plus -> Rotate.
*/
details[open] .faq-icon.plus {
  transform: rotate(45deg); /* Optional: nice X effect */
}

.faq-answer {
  padding-bottom: 24px;
  color: var(--text-white); /* Or dim gold? */
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  opacity: 0.8;
}

/* Footer */
.footer {
  background-color: var(--bg-black);
  padding: 48px 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-top: 1px solid #333;
}

.footer p {
  color: var(--text-white);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
}

/* =========================================
   SPECIAL OFFER PAGE (Downsell/Back Redirect)
   ========================================= */

.alert-bar {
  width: 100%;
  padding: 16px 10px;
  background-color: #450307;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.alert-text {
  flex: 1;
  text-align: center;
  color: var(--text-white);
  font-size: 16px;
  font-family: var(--font-heading);
  font-weight: 300;
}

.exit-hero {
  width: 100%;
  padding: 51px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.exit-content {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: center;
}

.exit-title {
  color: var(--text-white);
  font-size: 32px;
  font-family: var(--font-heading);
  font-weight: 300;
  line-height: 1.2;
}

.exit-title .italic {
  font-style: italic;
  font-weight: 400;
}

.exit-description {
  color: var(--text-gold-dim); /* #a08c71 */
  font-size: 18px;
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.5;
}

.exit-description strong {
  font-weight: 700;
}

.exit-subtitle {
  color: var(--text-white);
  font-size: 24px;
  font-family: var(--font-heading);
  font-weight: 300;
  line-height: 1.3;
}

.exit-subtitle .italic {
  font-style: italic;
  font-weight: 400;
}

.exit-offer-section {
  width: 100%;
  padding: 72px 16px;
  background-color: var(--bg-black);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  overflow: hidden;
}

.exit-offer-title {
  text-align: center;
  color: var(--text-white);
  font-size: 24px;
  font-family: var(--font-heading);
  font-weight: 600;
  max-width: 600px;
}

.exit-price-card {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  background: black;
  border-radius: 18px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  overflow: hidden;
}

.exit-card-image {
  width: 330px;
  max-width: 100%;
  height: auto;
  position: relative;
}

.exit-card-image img {
  width: 100%;
  height: auto;
  display: block;
}

.exit-price-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.exit-price-from {
  color: var(--text-white);
  font-size: 20px;
  font-family: var(--font-heading);
  font-weight: 600;
}

.exit-price-installments {
  color: #fed283;
  font-size: 24px;
  font-family: var(--font-heading);
  font-weight: 600;
}

.exit-price-large {
  color: #fed283;
  font-size: 56px;
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1;
}

.exit-price-cash {
  color: #2ba948;
  font-size: 18px;
  font-family: var(--font-heading);
  font-weight: 400;
}

.exit-savings-badge {
  background: #180700;
  border-radius: 999px;
  outline: 1px solid var(--text-white);
  outline-offset: -1px;
  padding: 6px 14px;
  color: var(--text-white);
  font-size: 18px;
  font-family: var(--font-heading);
  font-weight: 300;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.exit-cta-container {
  width: 100%;
  text-decoration: none;
  display: flex;
  justify-content: center;
}

.exit-cta-button {
  width: 100%;
  max-width: 358px;
  padding: 24px 21px;
  background: #440206;
  border-radius: 4px;
  outline: 1px solid #61181f;
  outline-offset: -1px;
  box-shadow:
    2px 2px 13.9px rgba(97, 24, 31, 0.12),
    4px 6px 6.3px rgba(97, 24, 31, 0.14) inset;

  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  color: var(--text-white);
  font-size: 18px;
  font-family: var(--font-heading);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.4;

  transition: all 0.3s ease;
}

.exit-cta-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.2);
  box-shadow:
    2px 4px 16px rgba(97, 24, 31, 0.3),
    4px 6px 6.3px rgba(97, 24, 31, 0.2) inset;
}

.simple-footer {
  width: 100%;
  padding: 48px 16px;
  background: #020202;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.simple-footer-text {
  color: var(--text-white);
  font-size: 16px;
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.4;
}

/* Desktop Overrides for Offer Page */
@media (min-width: 1024px) {
  .exit-hero {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .exit-title {
    font-size: 48px;
  }

  .exit-subtitle {
    font-size: 32px;
  }

  .exit-offer-section {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}

/* Results/Testimonials Section (New) */
.results-section {
  width: 100%;
  padding: 72px 16px;
  background-color: #020202;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.results-header-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 600px;
  text-align: center;
}

.results-title {
  color: var(--text-white);
  font-size: 24px;
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
}

.result-card {
  width: 100%;
  max-width: 400px; /* Mobile focused but good for desktop too */
  background: #121212;
  border-radius: 18px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
}

.result-image-wrapper {
  width: 100%;
  height: auto;
  background-color: #fff;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.result-image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}

.result-text-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.result-description {
  color: var(--text-white);
  font-size: 16px;
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.4;
  text-align: justify;
}

/* Desktop tweaks */
@media (min-width: 1024px) {
  .results-section {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
    padding: 100px 16px;
  }

  .results-header-container {
    width: 100%; /* Title on top */
    max-width: 1000px;
  }

  .results-title {
    font-size: 36px;
  }
}