:root {
  /* New Palette */
  --color-light-gray: #f5f5f5;
  --color-cream: #f7f0e8;
  --color-gold: #d7c6a8;
  --color-gold-dim: #a08c71;
  --color-green-bright: #5ec861;
  --color-green-dark: #0a300c;
  --color-green-darker: #041e05;
  --color-green-black: #000f01;

  /* Semantic Mappings */
  --bg-dark: var(--color-green-darker);
  --accent-gold: var(--color-gold);
  --text-white: var(--color-cream);
  --text-gold-dim: var(--color-gold-dim);
  --bg-black: var(--color-green-black);

  /* Text Mappings */
  --text-body: var(--color-cream);
  --text-heading: var(--color-cream);
  --text-dark: var(--color-green-darker);
  --text-brown: var(--color-green-dark); /* Replaces #503017 */

  /* Component Mappings */
  --cta-bg: var(--color-green-bright);
  --cta-text: var(--color-green-darker);
  --cta-shadow: rgba(4, 30, 5, 0.3);

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

* {
  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: 106px; /* 52px original + ~54px header */
  padding-bottom: 40px;
  position: relative;
  width: 100%;
  max-width: 100%;
}

.hero-content {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
  animation: fadeIn 0.8s ease-out;
}

.main-title {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 32px; /* Mobile size */
  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-white);
  opacity: 0.9;
  margin-top: 8px;
}

.hero-image-container {
  margin-top: 40px;
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  padding: 0 20px;
}
.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;
}

.video-progress-bar {
  height: 100%;
  background-color: var(--accent-gold);
  width: 0%;
  transition: width 0.1s linear; /* Smooth visual updates */
}

.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: var(--cta-bg);
  color: var(--cta-text);
  font-family: var(--font-heading);
  font-weight: 600; /* Increased weight for contrast */
  font-size: 18px;
  text-transform: uppercase;
  line-height: 25.2px;
  text-decoration: none;
  padding: 24px 21px;
  border-radius: 4px;
  outline: 1px solid var(--color-green-dark);
  outline-offset: -1px;
  box-shadow:
    2px 2px 13.9px var(--cta-shadow),
    4px 6px 6.3px rgba(255, 255, 255, 0.2) 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.1);
  box-shadow:
    2px 4px 16px var(--cta-shadow),
    4px 6px 6.3px rgba(255, 255, 255, 0.3) inset;
}

.cta-button:active {
  transform: translateY(1px);
  filter: brightness(0.95);
  box-shadow: 1px 1px 4px var(--cta-shadow) 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(--color-green-darker); /* Was #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;
}

.about-gallery {
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 1;
  height: 180px;
  align-items: flex-start;
  margin-top: 10px; /* Space from title if visible */
}

.gallery-item {
  width: 114px;
  height: 100%; /* or vary heights if specific logic needed */
  background: var(--accent-gold);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

/* Specific heights from design snippet to create the staggered look if desired?
   The snippet had:
   1: width 114, img 248x230
   2: width 114, img 114x198
   3: width 114, img 172x298
   The containers themselves:
   Snippet says "align-self: stretch" in a container of height 180px.
   So all items are 180px tall? No, let's check snippet carefully.
   Container: height 180px.
   Items: div (114px) align-self: stretch (so 180px height).
   So all 3 divs are 114x180px.
   Inside them, images are positioned absolutely.
*/
.gallery-item {
  height: 180px;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* If we want to mimic the exact crop/zoom of the prototype: */
.gallery-item:nth-child(1) img {
  transform: scale(1.2) translateX(-10%);
}
.gallery-item:nth-child(3) img {
  transform: scale(1.2) translateX(10%);
}

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

.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 */
}

/* Pricing Section Refreshed */
.pricing-section {
  background-color: #fff;
  padding: 72px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.pricing-title {
  text-align: center;
  color: #121212;
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 24px;
}

.pricing-card-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: 400px; /* Default for mobile */
}

/* Card Common Styles */
.pricing-card-new {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 32px 24px;
  border-radius: 18px;
  position: relative;
  width: 100%;
}

.pricing-card-new.basic {
  background-color: #f5f5f5;
  /* Visual reference shows dashed, snippet says solid. 
     I'll use dashed to match the "visual" of a cut-out coupon or similar if that matches the Figma, 
     but code snippet said outline. Let's start with dashed based on the "reference image" look 
     usually implied by "prototipo", but the user code is explicit.
     User code: outline: 3px #D7C6A8 solid; outline-offset: -1.50px;
     I will stick to the user's code for exactness.
  */
  outline: 3px solid #d7c6a8;
  outline-offset: -1.5px;
}

.pricing-card-new.complete {
  background-color: white;
  outline: 2px solid #e6b947;
  outline-offset: -2px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05); /* Added slight lift */
}

/* Badges */
.badge-pill {
  padding: 12px 18px;
  border-radius: 999px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.badge-pill.basic {
  background-color: #f7f0e8;
  color: #513117;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
}

.badge-pill.complete {
  background: #e6b947;
  outline: 2px solid #cf9e22;
  outline-offset: -2px;
  color: #513117;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  gap: 10px;
}

/* Images */
.pricing-img {
  width: 220px;
  height: auto;
  object-fit: cover;
  border-radius: 8px; /* Optional enhancement */
}

/* Access Label */
.pricing-access-label {
  text-align: center;
  color: #121212;
  font-size: 20px;
  font-family: var(--font-body);
  font-weight: 500;
}

/* Feature List */
.pricing-features-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.feature-line {
  display: flex;
  gap: 8px;
  color: #180700;
  font-size: 18px;
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.2;
}

.feature-line.excluded {
  text-decoration: line-through;
  opacity: 0.6;
}
.feature-line.excluded span:first-child {
  text-decoration: none; /* Keep the X normal */
  opacity: 1;
}

/* Prices */
.price-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.price-compare {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: #121212;
}

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

.price-current {
  color: #2ba948;
  font-size: 56px;
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1;
}

.price-sub {
  color: #180700;
  font-size: 12px;
  font-family: var(--font-body);
  text-transform: uppercase;
  text-align: center;
}

/* Buttons */
.btn-pricing-new {
  width: 100%;
  padding: 24px;
  border-radius: 4px;
  text-align: center;
  text-decoration: none;
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 18px;
  line-height: 1.4;
  transition:
    transform 0.2s ease,
    filter 0.2s ease;
}

.btn-pricing-new:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.btn-pricing-new.basic {
  background-color: #5ec861;
  color: #020202;
  font-weight: 400;
}

.btn-pricing-new.complete {
  background-color: #e6b947;
  color: #000;
  font-weight: 400; /* Regular per snippet */
}

/* Desktop Layout */
@media (min-width: 1024px) {
  .pricing-card-container {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    max-width: 1000px;
  }

  .pricing-card-new {
    flex: 1;
    max-width: 450px;
  }
}

.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: var(--color-green-darker);
  margin-bottom: 4px;
}

.card-divider {
  width: 60px;
  height: 4px;
  background-color: var(--color-gold);
  margin-bottom: 8px;
  border-radius: 2px;
}

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

.card-description strong {
  font-weight: 700;
  color: var(--text-dark);
}

@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: var(--color-green-dark);
  border-radius: 18px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
}

.bonus-image-container {
  height: 173px;
  background-color: var(--color-light-gray);
  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: var(--color-green-black);
  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(--color-green-darker); /* Was #180700 */
}

.italic-highlight {
  font-style: italic;
  font-weight: 600;
  color: var(--color-gold-dim);
}

.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(--color-green-darker);
  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;
  align-items: center;
  gap: 32px;
  width: 100%;
  max-width: 800px;
}

.decision-card {
  background-color: var(--color-green-dark); /* 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(--color-green-darker);
}

.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: var(--color-green-dark);
  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(--color-green-darker);
}

.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: var(--color-green-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: var(--color-gold-dim);
}

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

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

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

.offer-savings {
  background-color: var(--color-green-darker);
  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(--color-green-darker);
  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: var(--color-green-darker);
  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 var(--color-green-dark);
}

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

/* Hero Light Section */
.hero-light {
  background-color: var(--color-light-gray);
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 106px;
  padding-bottom: 40px;
  overflow: hidden;
}

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

.hero-light .main-title {
  color: var(--color-green-black);
  font-size: 32px;
  line-height: 1.2;
}

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

.hero-light .hero-description {
  color: #333;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
}

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

.hero-visuals {
  position: relative;
  width: 358px; /* Fixed width from desktop/design ref, will make responsive */
  max-width: 100%;
  height: 250px; /* Approximate based on layout */
  margin: 32px auto;
  display: flex;
  justify-content: center;
}

.visual-main-img {
  width: 302px;
  height: 196px;
  border-radius: 9.6px;
  outline: 2.75px solid var(--color-gold-dim);
  object-fit: cover;
  position: absolute;
  left: 10px; /* Slight offset */
  top: 0;
  z-index: 1;
  background-color: #ddd; /* Placeholder color */
}

.visual-secondary-img {
  width: 87px;
  height: 167px;
  border-radius: 5.5px;
  outline: 1.85px solid var(--color-gold-dim);
  background-color: var(--color-cream);
  object-fit: cover;
  position: absolute;
  right: 10px; /* Offset right */
  top: 40px;
  z-index: 2;
}

.visual-badges {
  position: absolute;
  bottom: -10px;
  left: 20px;
  z-index: 3;
  display: flex;
  gap: 5px;
}

.badge-item {
  height: 42px;
  padding: 5px 10px;
  background: white;
  border-radius: 4.5px;
  border: 0.5px solid #070707;
  box-shadow: 1px 2px 0px #061614;
  display: flex;
  align-items: center;
  gap: 6px;
}

.badge-icon {
  width: 22px;
  height: 22px;
  border-radius: 3px;
  background-color: #eee;
  object-fit: contain;
}

.badge-text {
  color: #513117;
  font-family: var(--font-heading);
  font-size: 14px; /* adjusted from 13.45px */
  font-weight: 300;
  line-height: 1;
}

.hero-cta-container {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0 16px;
  z-index: 4;
}

.hero-light .cta-button {
  background-color: var(--color-green-bright);
  color: var(--color-green-black);
  width: 100%;
  max-width: 358px;
  box-shadow: none; /* Remove red shadow from generic class */
  outline: none;
  font-weight: 600;
}

.hero-light .community-text {
  color: var(--color-green-black);
  margin-top: 24px;
}

/* Desktop override */
@media (min-width: 1024px) {
  .hero-light {
    padding-top: 140px;
  }

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

  .hero-visuals {
    width: 600px;
    height: 400px;
  }

  .visual-main-img {
    width: 500px;
    height: 325px;
    left: 0;
  }

  .visual-secondary-img {
    width: 140px;
    height: 270px;
    right: 0;
    top: 60px;
  }

  .visual-badges {
    bottom: 20px;
    left: 40px;
    gap: 12px;
  }

  .badge-item {
    height: 54px;
    padding: 8px 16px;
    font-size: 16px;
  }

  .badge-icon {
    width: 30px;
    height: 30px;
  }

  .badge-text {
    font-size: 16px;
  }
}
/* Benefits Bar */
.benefits-bar {
  background-color: var(--color-green-darker);
  padding: 14px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px; /* Mobile gap */
  width: 100%;
}

.benefit-item {
  color: var(--color-light-gray);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.4;
  text-align: center;
}

.benefit-dot {
  color: var(--color-light-gray);
  font-size: 12px;
}

@media (min-width: 768px) {
  .benefit-item,
  .benefit-dot {
    font-size: 16px;
  }
  .benefits-bar {
    gap: 24px;
  }
}

/* Difference Section */
.difference-section {
  background-color: var(--color-light-gray);
  padding: 72px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.diff-title {
  color: var(--color-green-black);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 24px;
  text-align: center;
  margin-bottom: 20px;
}

.diff-content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 60px;
  width: 100%;
  max-width: 1000px;
  align-items: center;
}

.diff-group {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: 400px;
  align-items: center;
}

/* Visual Container */
.diff-visual {
  position: relative;
  width: 100%;
  height: 260px;
}

.diff-frame {
  width: 100%;
  height: 223px;
  position: absolute;
  top: 37px;
  left: 0;
  border-radius: 11px;
  outline: 1.6px solid var(--color-gold);
  outline-offset: -1.6px;
  overflow: hidden;
}

.diff-frame.amateur {
  background-color: #0d0d0d;
}

.diff-frame.pro {
  background-color: var(--color-cream);
}

.diff-img-amateur {
  width: 98%;
  height: 90%;
  margin: 6px auto;
  display: block;
  object-fit: cover;
  opacity: 0.8;
}

/* Professional Composition Images */
.diff-img-pro-1 {
  width: 187px;
  height: 88px;
  position: absolute;
  right: 20px;
  top: 18px;
  border-radius: 5px;
  outline: 0.7px solid var(--color-gold-dim);
  object-fit: cover;
  background: #ccc;
}

.diff-img-pro-2 {
  width: 187px;
  height: 90px;
  position: absolute;
  right: 20px;
  top: 114px;
  border-radius: 5px;
  outline: 0.7px solid var(--color-gold-dim);
  object-fit: cover;
  background: #ccc;
}

.diff-img-pro-3 {
  width: 122px;
  height: 188px;
  position: absolute;
  left: 20px;
  top: 18px;
  border-radius: 5px;
  outline: 0.7px solid var(--color-gold-dim);
  object-fit: cover;
  background: #ccc;
}

/* Badge */
.diff-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: white;
  padding: 14px 23px;
  border-radius: 100px;
  outline: 1.6px solid var(--color-green-darker);
  outline-offset: -1.6px;
  white-space: nowrap;
  z-index: 10;

  color: var(--color-green-darker);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Checklist */
.diff-checklist {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.diff-check-item {
  color: var(--color-green-darker);
  font-family: var(--font-heading);
  font-size: 20px;
  text-align: center;
  font-weight: 400;
}

/* Desktop */
@media (min-width: 1024px) {
  .diff-content-wrapper {
    flex-direction: row;
    justify-content: center;
    gap: 80px;
    align-items: flex-start;
  }

  .diff-title {
    font-size: 40px;
    margin-bottom: 40px;
  }
}
/* Personalization Section */
.personalization-section {
  background-color: #e9e9e9;
  padding: 43px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

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

.pers-input-container {
  width: 100%;
  max-width: 400px;
  background: white;
  border-radius: 12px;
  padding: 24px 16px;
  outline: 4px solid #fafafa;
  outline-offset: -4px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.pers-url {
  color: #5f5f5f;
  font-family: var(--font-heading);
  font-size: 16px; /* Adjusted for mobile fit */
  font-weight: 400;
  text-align: center;
  word-break: break-all;
}

.pers-cursor {
  color: #5f5f5f;
  animation: blink 1s infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.pers-pills-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 500px;
}

.pers-pill {
  background: white;
  padding: 12px 18px;
  border-radius: 999px;
  outline: 4px solid #fafafa;
  outline-offset: -4px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  color: var(--color-green-black);
  text-align: center;
}

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

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

.new-bonuses-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 400px;
}

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

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

.new-bonus-img {
  width: 100%;
  height: auto;
  min-height: 100%;
  object-fit: cover;
  display: block;
}

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

.new-bonus-name {
  color: var(--color-cream);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
}

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

.new-bonus-price {
  color: var(--color-cream);
  font-family: var(--font-heading);
  font-size: 18px;
  text-decoration: line-through;
}

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

/* New Testimonials Section */
.new-reviews-section {
  background-color: #f5f5f5;
  padding: 72px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.new-reviews-title {
  color: #191919;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 24px;
  text-align: center;
  max-width: 500px;
}

.new-reviews-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 800px;
}

.review-card {
  background: white;
  border-radius: 18px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.review-header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.review-avatar {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background-color: #d9d9d9;
  flex-shrink: 0;
  overflow: hidden; /* Ensures image stays circular */
}

.review-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.review-user-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.review-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.review-name {
  color: var(--color-green-black);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 20px;
}

.review-stars {
  display: flex;
}

.star-icon {
  width: 16px;
  height: 16px;
  background-color: #ffdc12; /* Masking or simple div as placeholder per design */
  /* Using a clip-path or emoji would be better, but implementing 'div' approach from user code */
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}

.review-verified {
  display: flex;
  align-items: center;
  gap: 8px;
}

.verified-text {
  color: #333;
  opacity: 0.8;
  font-family: var(--font-body);
  font-size: 14px;
}

.verified-icon {
  width: 14px;
  height: 14px;
  background-color: #2694ef;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.verified-icon::after {
  content: "✓";
  color: white;
  font-size: 10px;
  font-weight: bold;
}

.review-text {
  color: #333;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.4;
}

.social-proof-text {
  color: var(--color-green-black);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  text-align: center;
  margin-top: 24px;
}

/* New Guarantee Section */
.new-guarantee-section {
  background-color: var(--color-cream);
  padding: 72px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.guarantee-seal {
  width: 180px;
  height: 180px;
  object-fit: contain;
}

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

.new-guarantee-text {
  color: #333;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.4;
  text-align: center;
  max-width: 400px;
}

/* Desktop Responsiveness for New Sections */
@media (min-width: 1024px) {
  .new-bonuses-list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1000px;
  }

  .new-bonus-card {
    width: calc(50% - 16px);
    max-width: 400px;
  }

  .new-reviews-list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .review-card {
    width: calc(33% - 16px);
    max-width: 400px;
  }
}
/* Pricing Options Section */
html {
  scroll-behavior: smooth;
}

.pricing-section {
  background-color: white;
  padding: 72px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px; /* Increased gap between title and cards */
}

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

.pricing-card {
  width: 100%;
  max-width: 400px;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px; /* Increased internal spacing */
  padding: 40px 32px; /* Increased padding */
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  cursor: default;
}

.pricing-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.pricing-card.basic {
  background-color: #f5f5f5;
  outline: 3px solid var(--color-gold);
  outline-offset: -1.5px;
}

.pricing-card.complete {
  background-color: white;
  outline: 2px solid #e6b947;
  outline-offset: -2px;
}

.pricing-badge {
  padding: 12px 18px;
  border-radius: 999px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease;
}

.pricing-card:hover .pricing-badge {
  transform: scale(1.05);
}

.pricing-badge.basic {
  background-color: var(--color-cream);
}

.pricing-badge.complete {
  background-color: #e6b947;
  outline: 2px solid #cf9e22;
  outline-offset: -2px;
}

.badge-text {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  text-transform: uppercase;
  color: #513117;
}

/* Image Composition in Pricing Card */
/* Image Composition in Pricing Card */
.pricing-visual {
  width: 100%;
  height: auto;
  min-height: 200px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease;
}

.pricing-card:hover .pricing-visual {
  transform: scale(1.02);
}

.pricing-visual img {
  width: 100%;
  height: auto;
  max-width: 250px; /* Limit width */
  object-fit: contain;
  border-radius: 8px; /* Optional rounding */
}

.access-label {
  color: #121212;
  font-size: 20px;
  font-family: var(--font-body);
  font-weight: 500;
  text-align: center;
}

.pricing-features {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.feature-row {
  color: #180700;
  font-size: 18px;
  font-family: var(--font-heading);
  font-weight: 400;
  text-align: center;
}

.pricing-amount {
  color: var(--color-green-bright); /* #2BA948 */
  font-size: 56px;
  font-family: var(--font-heading);
  font-weight: 400;
  text-align: center;
}

.pricing-button {
  width: 100%;
  padding: 24px 21px;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.pricing-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.pricing-button:active {
  transform: translateY(0);
}

.pricing-button.basic {
  background-color: var(--color-green-bright); /* #5EC861ish */
}

.pricing-button.complete {
  background-color: #e6b947;
}

.btn-label {
  text-align: center;
  color: #020202;
  font-size: 18px;
  font-family: var(--font-heading);
  font-weight: 400;
  text-transform: uppercase;
}

/* Fade In Animation Class */
.fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
  opacity: 0;
  transform: translateY(20px);
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* New FAQ Section */
.new-faq-section {
  background-color: var(--color-green-black); /* #000F01 */
  padding: 72px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.new-faq-title {
  color: var(--color-cream);
  font-size: 24px;
  font-family: var(--font-heading);
  font-weight: 600;
  text-align: center;
  width: 100%;
  max-width: 358px;
}

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

.new-faq-item {
  width: 100%;
  border-bottom: 0.5px solid var(--color-cream);
}

.new-faq-summary {
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  list-style: none; /* Hide default triangle */
}
.new-faq-summary::-webkit-details-marker {
  display: none;
}

.new-faq-question {
  flex: 1;
  color: var(--color-cream);
  font-size: 16px;
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.4;
}

.new-faq-icon {
  width: 32px;
  height: 32px;
  position: relative;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease;
}

.new-faq-icon::before,
.new-faq-icon::after {
  content: "";
  position: absolute;
  background-color: var(--color-cream);
  border-radius: 2px;
}

.new-faq-icon::before {
  width: 18px;
  height: 2px;
}

.new-faq-icon::after {
  width: 2px;
  height: 18px;
}

.new-faq-icon-inner {
  display: none;
}

details[open] .new-faq-icon {
  transform: rotate(45deg);
}

.new-faq-answer {
  padding-bottom: 24px;
  color: var(--color-cream);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  opacity: 0.9;
}

/* New Footer */
.new-footer {
  background-color: #020202;
  padding: 48px 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.new-footer-text {
  color: var(--color-cream);
  font-size: 16px;
  font-family: var(--font-body);
  font-weight: 300;
  text-align: center;
}

/* Desktop Responsiveness */
@media (min-width: 1024px) {
  .pricing-section {
    flex-direction: column;
  }

  .pricing-card-container {
    display: flex;
    flex-direction: row;
    gap: 24px;
    justify-content: center;
    width: 100%;
    max-width: 900px;
  }

  .pricing-card {
    flex: 1;
  }
}
/* Hero Single Image Update */
.hero-visuals {
  /* Reset previous relative/absolute positioning */
  position: static;
  width: 100%;
  height: auto;
  max-width: 600px; /* Limit max width for better appearance */
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 32px auto;
}

.hero-single-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 8px; /* Optional rounded corners */
  /* Remove previous absolute positioning styles if they bleed over, 
     but new class name ensures isolation */
}

@media (min-width: 1024px) {
  .hero-visuals {
    max-width: 800px; /* Larger on desktop */
    height: auto;
    margin-bottom: 50px;
  }
}