/*========
  FONTS & ROOT VARIABLES
===========*/
@font-face {
  font-family: 'AnoBlackWideItalic';
  src: url('../fonts/AnoBlack-WideItalic.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'AnoBlac';
  src: url('../fonts/AnoBlack-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'AnoBold';
  src: 
    url('../fonts/AnoBold-Regular.otf')   format('opentype');
  font-weight: normal;
  font-style:  normal;
  font-display: swap;
}

@font-face {
  font-family: 'AnoRegular';
  src: 
    url('../fonts/AnoRegular-Regular.otf')   format('opentype');
  font-weight: normal;
  font-style:  normal;
  font-display: swap;
}
@font-face {
  font-family: 'AnoBoldItalic';
  src: 
    url('../fonts/AnoBold-Italic.otf')   format('opentype');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}


:root {
  --primary-color: #000;
  --secondary-color: #666;
  --accent-color: #c00;
  --bg-color: #dd7370;
  --highlight-color: #b7eba4;
}

/*========
  GLOBAL RESET & BASE STYLES
===========*/
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100%;
  font-family: sans-serif;
  line-height: 1.6;
  color: var(--primary-color);
  background-color: var(--bg-color);
  /* REMOVE any overflow: hidden; */
  overflow-y: auto;  /* ← enable vertical */
}

/*========
  FULLPAGE SECTION LAYOUT
===========*/
.section {
  position: relative;
  width: 100%; height: 100vh;
  display: flex;
  justify-content: center;
  align-items: stretch;
  background-size: cover;
  background-position: center;
}
.section-inner {
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;

  transform-origin: center;
}
.fp-overflow {
  height: 100% !important;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/*========
  HERO SECTION
===========*/
.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  text-align: center;
  background: url('../img/hero-background.jpeg') center/cover no-repeat;
}
.hero img.logo {
  width: 50vw;
  margin-bottom: 1rem;
}
.hero .tagline {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 2px solid var(--primary-color);
  font-family: 'AnoBlackWideItalic', sans-serif;
  font-size: 2.5rem;
  transform: translateY(40px);
  opacity: 0;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .hero img.logo { width: 80vw; }
  .hero .tagline {
    font-size: 2rem;
    padding: 0.4rem 0.75rem;
    line-height: 1.2;
  }
}

/*========
  SCROLLING TEXT
===========*/
.scrolling-text {
  position: absolute;
  bottom: 0.2rem;
  left: 0; right: 0;
  display: flex;
  gap: 2rem;
  overflow-x: hidden;
  padding: 0 1rem;
}
.scrolling-text span {
  display: inline-block;
  flex-shrink: 0;
  animation: scroll-left 45s linear infinite;
  font-family: 'AnoBlackWideItalic', sans-serif;
  font-weight: 400;
  white-space: nowrap;
  font-size: 4.8em;
  line-height: 1.0;
}
@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
@media (max-width: 768px) {
  .scrolling-text span { font-size: 3.8rem; }
}

/*========
  CONTENT SECTION (SECTION 2)
===========*/
.content-section {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
.content-top {
  flex: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('../img/hero-background.jpeg') center/cover no-repeat;
}
.content-top img.logo { width: 40vw; margin-top: 1rem; }
@media (max-width: 768px) {
  .content-top img.logo { max-width: 40vw; margin-top: 0; }
}

/* Bottom WHY Section Layout (10% | 20% | 70%) */
.content-bottom {
  display: flex;
  align-items: flex-start;
  padding: 1rem;
  background: url('../img/red-bracelet.png') center/cover no-repeat;
  background-position: left center;
  background-size: cover;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}
.box-1 { flex: 0 0 15%; }
.box-2 {
  flex: 0 0 20%;
  font-family: 'AnoBlackWideItalic', sans-serif;
  font-size: 1.8rem;
  display: flex;
  align-items: flex-start;
}
.why-box {
  flex: 0 0 65%;
  display: flex;
  gap: 1rem;
}
.why-box .box-3,
.why-box .box-5 {
  flex: 1;
  font-family: 'AnoBold', sans-serif;
  font-size: 0.75rem;
  line-height: 1.4;
}
@media (max-width: 768px) {
  .content-bottom {
    flex-direction: column;
    background: #dd7370 !important;
  }
  .box-1, .box-2, .why-box {
    flex: none;
    width: 100%;
  }
  .why-box { flex-direction: column; }
}

.box-2 {
  flex: 0 0 20%;
  font-family: 'AnoBlackWideItalic', sans-serif;
  font-size: 5.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.content-bottom {
  overflow-y: auto;
}
.why-box .box-3,
.why-box .box-5 {
  max-height: 60vh;  /* or another suitable value */
  overflow-y: auto;
  padding: 0.5rem;   /* for breathing room */
}



/*========
  FAQ SECTION (SECTION 3)
===========*/
.faq-section {
  display: flex;
  flex-direction: column;
  /* allow it to grow with its content */
  height: auto;
  /* if you still want at least one-screen height: */
  min-height: 100vh;
}

.faq-top {
  flex: 1;
  display: flex;
}
.faq-left, .faq-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.faq-left {
  background: url('../img/left-faq-background.png') center/cover no-repeat;
}
.faq-left img.logo { width: 40vw; }
.faq-right {
  background: url('../img/right-faq-background.jpg') center/cover no-repeat;
  padding: 2rem;
}
.faq-title {
  font-family: 'AnoBlackWideItalic', sans-serif;
  font-size: 7rem;
  color: var(--highlight-color);
  margin-bottom: 1rem;
  -webkit-text-stroke: 1px black;

}
.accordion {
  width: 100%;
  border: 2px solid #000;
  margin-bottom: 0.75rem;
}
.accordion-header {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  padding: 1rem 2.5rem 1rem 1rem;
  cursor: pointer;
  font-family: 'AnoBoldItalic', sans-serif;
  font-size: 1.5rem;
  position: relative;
}
.accordion-header::after {
  content: '+';
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}
.accordion[aria-expanded="true"] .accordion-header::after {
  content: '-';
}
.accordion-body {
  height: 0;
  overflow: hidden;
  padding: 1rem 1rem;
  background: #a7fbbf00;
  border-top: 1px solid #000;
}
.accordion[aria-expanded="true"] .accordion-body {
  display: block;
}
.faq-bottom {
  display: flex;
  align-items: center;
  padding: 1rem;
  background: url('../img/green-bracelet.png') center/cover no-repeat;
  background-size: cover;
  border-top: 1px solid black;
}
.faq-bottom .content-box { flex: 0.5; }
.faq-bottom .box-2 {
  flex: 2;
  font-family: 'AnoBlackWideItalic', sans-serif;
  font-size: 7rem;
}
.faq-bottom .box-3 {
  flex: 2;
  font-family: 'AnoBlackWideItalic', sans-serif;
  font-size: 1.1rem;
  text-decoration: underline;
}
.faq-bottom .box-4 img {
  max-height: 100px;
  object-fit: contain;
}
@media (max-width: 768px) {
  .faq-top { flex-direction: column; }
  .faq-left { display: none; }
  .faq-bottom {
    flex-direction: column;
    background: #d0edc2 !important;
  }
  .faq-bottom .box-2 { font-size: 4rem; }
}

    .faq-right {
      text-align: center;
      padding: 0 1rem;
      max-width: 50%;
      margin: 0 auto;
    }

    /* ========
   CENTERED SINGLE-COLUMN FAQ
===========*/

/* Center the inner wrapper vertically & horizontally */
.faq-section .section-inner {
  display: flex;              /* already flex */
  flex-direction: column;     /* already column */
  justify-content: center;    /* vertical centering */
  align-items: center;        /* horizontal centering */
  padding: 2rem;              /* optional breathing room */
}

/* Make .faq-top a vertical stack, centered */
.faq-section .faq-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 800px;           /* constrain line-length */
  gap: 1.5rem;                /* space between items */
}

/* Center the FAQ title */
.faq-section .faq-title {
  font-family: 'AnoBlackWideItalic', sans-serif;
  font-size: 7rem;
  color: black;
  -webkit-text-stroke: 1px black;

  text-align: center;
  margin-bottom: 1rem;
}

/* Full-width accordions within the max-width container */
.faq-section .accordion {
  width: 100%;
}

/* Optional: give the accordion group a bit of vertical spacing */
.faq-section .accordion + .accordion {
  margin-top: 0.75rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .faq-section .faq-title {
    font-size: 6.7rem;
  }
}


/*========
  SIGNUP BUTTON
===========*/
.signup-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #dd7370;
  border: 2px solid #000;
  padding: 1rem 1.5rem;
  gap: 1rem;
  font-family: 'AnoBoldItalic', sans-serif; 
  font-size: 1.25rem;
  width: 100%;
  cursor: pointer;
  transition: all 0.3s ease;
}
.signup-button .signup-label { flex: 1; }
.signup-button input[type="checkbox"] { display: none; }
.signup-button .custom-checkbox {
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid #000;
  background: #fff;
  position: relative;
}
.signup-button input[type="checkbox"]:checked + .custom-checkbox::after {
  content: "✓";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}
@media (max-width: 768px) {
  .signup-button {
    justify-content: space-between;
    min-width: 100%;
  }
  .signup-label { text-align: left; font-size: 0.9rem; }
}

/*========
  UTILITY & ANIMATIONS
===========*/
.animate-text span {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px);
}
.fullpage-nav, .fp-watermark {
  display: none !important;
}

/*========
  HOW SECTION (formerly FAQ #1)
===========*/
.how-section {
  display: flex;
  flex-direction: column;
  height: auto;
}

.how-top {
  flex: 1;
  display: flex;
}

.how-top {
  background: url('../img/how-bg.jpg') center/cover no-repeat;
  background-size: cover;
}

.how-left,
.how-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

.how-top {
  display: flex;                /* already was */
}

.how-left,
.how-right {
  /* each takes exactly half the container */
  flex: 0 0 50%;
  max-width: 50%;
  box-sizing: border-box;       /* include padding in that 50% */
}

/* Title in left column */
.how-left .box-2 {
  font-family: 'AnoBlackWideItalic', sans-serif;
  font-size: 6.7rem;
  margin-bottom: 0.1rem;
  font-weight: 400;
}

/* List styling */
.how-left ul {
  list-style: disc inside;
}
.how-left ul li {
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

/* Right column text */
.how-right strong {
  font-family: 'AnoBlac', sans-serif;
  font-weight: bold;
  text-align: center;
  margin-bottom: 1rem;
  font-size: 1.1rem;
  line-height: 1.0;
}
.how-right p {
  font-family: 'AnoRegular', sans-serif;
  font-size: 1.1rem;
  line-height: 1.0;
  margin-bottom: 1rem;
  max-width: 600px;
  text-align: center;
}

/* 1) Base OL styling (content font & layout) */
.how-left ol {
  list-style-type: decimal;     /* numbered list */
  list-style-position: outside; /* markers outside the text box */
  padding-left: 1rem;           /* adjust so markers sit in the gutter */
  padding-right:1rem;
  margin-top: 0.25rem;       /* instead of 1rem */
  margin-bottom: 1rem;       /* keep a bit of breathing room below */
  
  /* body text styling */
  font-family: sans-serif;
  font-size: 1rem;
  text-align: left;
  line-height: 1.1;
}

/* Keep your big AnoBlackWideItalic markers */
.how-left ol li::marker {
  font-family: 'AnoBlackWideItalic', sans-serif;
  font-size: 1.8rem;
  color: var(--primary-color);
  font-weight: normal;
}

/* spacing between items */
.how-left ol li {
  margin-bottom: 0.5rem;
}

/* 1) Reset the ol — no native markers, no gutter here */
.how-left ol {
  counter-reset: how-counter;
  list-style: none;
  margin: 1rem 0;
  padding-left: 2rem;            /* ← remove any gutter from the ol */
  font-family: sans-serif;
  font-size: 1.2rem;
  text-align: left;
}

/* 2) Each li gets its own gutter and counter */
.how-left ol li {
  position: relative;         /* for absolute ::before */
  counter-increment: how-counter;
  margin-bottom: 1.8rem;
  padding-left: 4rem;         /* ← reserve space for the marker here */
  font-family: 'AnoBlac', sans-serif;
  font-size: 1.3rem;     
}

/* 3) The big, centered marker */
.how-left ol li::before {
  content: counter(how-counter) ".";
  position: absolute;
  left: 0;                    /* sticks to the very left of the li */
  top: 50%;
  transform: translateY(-50%);
  font-family: 'AnoBlackWideItalic', sans-serif;
  font-size: 2.8rem;
  line-height: 1;             /* no extra leading */
  color: var(--primary-color);
}


/* ========
   Add side padding to HOW columns only
===========*/

.how-right {
  /* push everything down to match the list’s top edge */
  padding-top: 8rem;  
  /* keep your side padding */
  padding-left: 10rem;
  padding-right: 10rem;
}

.how-left {
  /* 0 = top/bottom, 2rem = left/right (adjust as needed) */
  padding: 0 5rem;
}


/* Bottom signup call-to-action */
.how-bottom {
  display: flex;
  align-items: center;
  padding: 1rem;
  background: url('../img/green-bracelet.png') center/cover no-repeat;
  background-size: cover;
  border-top: 1px solid #000;
  border-bottom: 1px solid black
}


.how-bottom .content-box {
  flex: 2;
}

.how-bottom .box-2 {
  flex: 2;
  font-family: 'AnoBlackWideItalic', sans-serif;
  font-size: 6rem;
}

.how-bottom .box-3 {
  flex: 2;
  font-family: 'AnoBlackWideItalic', sans-serif;
  font-size: 1.1rem;
  text-decoration: underline;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .how-top {
    flex-direction: column;
  }
 
  .how-bottom {
    flex-direction: column;
    background: #ccffba !important;
  }
  .how-bottom .box-2 {
    font-size: 4rem;
  }
}


@media (min-width: 1024px) {
  /* WHY section bottom */
  .content-bottom {
    flex: 0 0 250px;      /* don’t grow, don’t shrink */
    max-height: 250px;    /* safety */
    overflow-y: auto;     /* if its inner text overflows */
  }

  /* HOW section bottom */
  .how-bottom {
    flex: 0 0 185px;
    max-height: 185px;
    overflow-y: auto;
  }
}
/* ========
   WHY section – border around the two-column text
===========*/
.why-box {
  border: 2px solid var(--primary-color); /* or simply “#000” */
  padding: 0.2rem;                          /* give the text some breathing room */
  /* optional: match your other boxes’ box-sizing */
  box-sizing: border-box;
}

/* 1) Make only box-2 fill the full height of .content-bottom */
.content-bottom .content-box.box-2 {
  /* stretch this box to the container’s height */
  align-self: stretch;

  /* now we can flex‐center the text inside */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 1) Turn .content-top into a two–row grid */
.content-top {
  /* remove or override the old flex rules */
  display: grid;
  grid-template-rows: 1fr auto;    /* “1fr” for the logo area, “auto” for the scrolling text */
  justify-items: center;           /* center children horizontally */
  position: relative;              /* keep your existing background */
}

/* 2) Drop the absolute on the marquee so it participates in the grid */
.content-top .scrolling-text {
  position: static;
  width: 100%;
  /* optional breathing room */
  padding: 1rem 0;
}

/* 3) Center the logo in that top 1fr track */
.content-top .logo-wrapper {
  grid-row: 1;       /* place in the first track */
  align-self: center;/* vertically center within that track */
}


/* ==========================================================================
   WHY Bottom Section — Flexbox layout matching the HOW bottom style
   ========================================================================== */
.content-bottom {
  display: flex;
  align-items: center;
  gap: 1rem;

  /* carve out the left slice of your red-bracelet background */
  background: url('../img/red-bracelet.png') left/cover no-repeat;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;

  /* horizontal padding for your content boxes */
  padding: 0 1rem;
}

/* 1) Left gutter showing zig-zag + “203456” baked into the BG */
.content-bottom .box-1 {
  flex: 0 0 20%;    /* ← tweak % until the full baked-in area peeks through */
}

/* 2) “why?” title box */
.content-bottom .box-2 {
  flex: 0 0 20%;    /* reserve 20% for the header */
  font-family: 'AnoBlackWideItalic', sans-serif;
  font-size: 6rem;  /* adjust for desktop size */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* 3) Two-column text area */
.content-bottom .why-box {
  flex: 1;                 /* fill the remaining width */
  display: flex;
  gap: 1rem;               /* space between the two paragraphs */
  box-sizing: border-box;  
}

/* 3a) Each paragraph column inside the why-box */
.content-bottom .why-box .box-3,
.content-bottom .why-box .box-5 {
  flex: 1;                 /* equal width columns */
  overflow-y: auto;        /* scroll if text grows too tall */
  padding: 0.5rem;         /* breathing room inside each column */
  font-family: 'AnoRegular', sans-serif;
  font-size: 0.8rem;
  line-height: 1.4;
}

/* ==========================================================================
   Responsive: stack & scale on mobile
   ========================================================================== */
@media (max-width: 768px) {
  .content-bottom {
    flex-direction: column;
    padding: 2rem 1rem 5.5rem 1rem; /* top | right | bottom | left */
  }

  .content-bottom .box-1,
  .content-bottom .box-2,
  .content-bottom .why-box {
    flex: none;
    width: 100%;
    max-width: 95%;
    padding: 0rem 0;
  }

  .content-bottom .box-2 {
    font-size: 6.7rem;   /* scale down the title for mobile */
  }
}


/* HOW bottom: show the full left-hand baked background in box-1 */
.how-bottom {
  display: flex;
  align-items: center;
  background: url('../img/green-bracelet.png') left/cover no-repeat;
  border-top: 1px solid #000;
  padding: 0 1rem;    /* optional horizontal padding */
  gap: 1rem;          /* space between boxes */
}

/* carve out 20% of the row for your background’s left slice */
.how-bottom .box-1 {
  flex: 0 0 15%;      /* ← tweak this until your zig-zag+number is fully visible */
}

/* “SIGN UP!” area */
.how-bottom .box-2 {
  flex: 0 0 25%;      /* reserve 25% for the heading */
  font-family: 'AnoBlackWideItalic', sans-serif;
  font-size: 6rem;
  text-align: center;
}

/* “Read terms & conditions” copy */
.how-bottom .box-3 {
  flex: 0 0 20%;      /* enough room to wrap onto two lines */
  font-family: 'AnoBoldItalic', sans-serif; 
  font-size: 2.25rem;
  line-height: 1.1;
  white-space: normal;
  text-align: center;
}

/* CTA toggle on the right */
.how-bottom .box-4 {
  flex: 1;            /* take up the remaining space */
  display: flex;
  justify-content: flex-end;
}


@media (max-width: 768px) {

  /* 1) Let every section grow to fit its content */
  .how-section,
  .section,
  .section-inner,
  .content-section {
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  /* 2) Stack left above right, center them, and ensure both are visible */
  .how-top {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 1.5rem;
    flex: none !important;
    height: auto !important;
  }

  .how-left,
  .how-right {
    display: flex !important;     /* make sure both panels show */
    width: auto;
    max-width: 95%;               /* keep them from filling beyond the screen */
    padding: 2rem 0rem 2rem;              /* snug side padding */
    box-sizing: border-box;
  }

  .how-left { order: 0; }         /* left on top */
  .how-right { order: 1; }        /* right underneath */

}


@media (max-width: 768px) {
  .how-bottom {
    /* existing mobile padding might be something like: */
    /* padding: 1rem 1rem; */

    /* override to add extra bottom space: */
    padding: 1rem 1rem 4rem; /* top 1rem | left/right 1rem | bottom 2rem */
  }
}

@media (max-width: 768px) {
  .how-top {
    /* move the BG from center-center to left-center */
    background-position: left center !important;
  }
}

/* style the new CTA to look like your other buttons */
.signup-cta {
  margin-top: 1rem;
  padding: 1rem 1.5rem;
  font-family: 'AnoBlackWideItalic', sans-serif;
  font-size: 1.25rem;
  border: 2px solid #000;
  background: #dd7370;
  cursor: pointer;
}
.signup-cta:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Default state */
.signup-button {
  background-color: #dd7370;
  color: #000;
  border-color: #000;
}

/* Checked state */
.signup-button.checked {
  background-color: #a7fbbf;   /* or any color you like */
  color: #000;                                 /* ensure text contrast */
  border-color: var(--primary-color);
}


/* ==========================================================================
   FAQ Accordions: shrink‐to‐fit headers & move the “+” outside
   ========================================================================== */

/* 1) Make each accordion only as wide as its header text */
.faq-section .accordion {
  width: auto;              /* override the default 100% */
  display: inline-block;    /* shrink to fit content */
  margin-bottom: 0.25rem;   /* preserve your spacing */
}

/* 2) Also shrink the header itself */
.faq-section .accordion-header {
  width: auto;              /* override the 100% width */
  padding: 0.5rem 0.2rem 0.5rem 0.2rem;  /* reduce right‐padding if desired */
  box-sizing: content-box;  /* ensure padding doesn’t force the box wider */
}

/* 3) Push the “+” marker outside the right edge */
.faq-section .accordion-header::after {
  right: -2rem;             /* move it 1rem beyond the border */
  /* keep the vertical centering you already have: */
  top: 50%;
  transform: translateY(-50%);
}

/* 4) When expanded, the “–” also sits outside */
.faq-section .accordion[aria-expanded="true"] .accordion-header::after {
  content: '-';
}

/* Override centered FAQ accordions */
.faq-section .faq-top {
  align-items: flex-start;  /* left-align headers and accordions */
}

/* ========
   FAQ: Reduce gap between accordion items
===========*/
.faq-section .accordion {
  /* shrink the bottom margin */
  margin-bottom: 0rem;
}

.faq-section .accordion + .accordion {
  /* shrink the top margin on subsequent items */
  margin-top: 0rem;
}

/* ========
   FAQ: tighten up spacing between title & accordions
===========*/
.faq-section .faq-top {
  gap: 0.5rem;    /* instead of 1.5rem */
}

/* ========
   FAQ: tighten up each accordion item
===========*/
.faq-section .accordion {
  margin-bottom: 0.25rem;  /* instead of your old 0.5–0.75rem */
}

.faq-section .accordion + .accordion {
  margin-top: 0;           /* remove any extra top-margin */
}

/* FAQ: center the entire header+accordions block, but keep items left-aligned */
.faq-section .faq-top {
  width: auto !important;       /* override the old 100% */
  max-width: 800px;             /* keep whatever cap you like */
  align-items: flex-start;      /* children stay flush left */
  /* no need for margin:auto—parent .section-inner already centers it */
}

/* Center the FAQ title inside the left-aligned accordion block */
.faq-section .faq-top .faq-title {
  align-self: center;   /* push this item to the horizontal center */
  text-align: center;   /* ensure the text inside is centered */
}

/* Change the “+” / “–” marker’s font */
.faq-section .accordion-header::after {
  font-family: 'AnoRegular', sans-serif;  /* your chosen font */
  font-size: 1.5rem;                         /* adjust to taste */
  line-height: 1;                            /* keep it tight */
  color: var(--primary-color);               /* or any color you prefer */
}

@media (max-width: 768px) {
  /* 1) Add padding around the logo wrapper */
  .content-top .logo-wrapper {
    padding: 2rem 1rem;      /* 2rem top/bottom, 1rem left/right */
  }

  /* 2) Increase the logo image width (and cap it if you like) */
  .content-top .logo-wrapper img.logo {
    width: 95vw;             /* take up 70% of the viewport width */
    max-width: 350px;        /* never get wider than 300px */
  }

 
  }


/* Box only the headline + copy in the right column */
.how-right-inner {
  border: 2px solid var(--primary-color);
  padding: 1.5rem;
  background-clip: padding-box; /* ensures bg doesn’t bleed under the border */
  
  /* optional: add a background if you want contrast */
  /* background-color: rgba(255,255,255,0.8); */
}

/* 1) Box wrapper around the headline + copy */
.how-right-inner {
  border: 2px solid var(--primary-color);
  padding: 1.5rem;
  background-clip: padding-box;

  /* keep the text from sprawling the entire flex-item: */
  width: 100%;
  max-width: 600px;       /* match your old p { max-width:600px } */
  box-sizing: border-box;
  
  /* stack children with a little gap */
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* 2) Restore your “strong” styling inside the wrapper */
.how-right-inner strong {
  font-family: 'AnoBlac', sans-serif;
  font-weight: 400;
  text-align: center;
  font-size: 1.1rem;      /* same as before */
  line-height: 1.0;
  /* no need for margin-bottom if gap handles it */
}

/* 3) Restore your <p> styling */
.how-right-inner p {
  font-family: 'AnoRegular', sans-serif;
  font-size: 1.1rem;
  line-height: 1.1;        /* a comfortable reading line-height */
  margin: 0;               /* gap is handled by the wrapper’s `gap` */
  text-align: center;
}






/* 1) Under 1300px wide → center the bg horizontally */
@media (max-width: 1300px) {
  .content-bottom,
  .how-bottom {
    background-position: center right;  /* center-right */
  }

    /* Hide the left‐gutter box-1 in both sections */
  .content-bottom .content-box.box-1,
  .how-bottom   .content-box.box-1 {
    display: none;
  }

  /* Increase flex-basis of box-2 (the "SIGN UP!" area) */
  
  .how-bottom   .content-box.box-2 {
    flex: 0 0 35%;   /* up from 20–25% → now 35% */

  }

  /* Increase flex-basis of box-3 (the "Read terms…" area) */

  .how-bottom   .content-box.box-3 {
    flex: 0 0 30%;   /* up from 25~% → now 30% */
  }

  .how-right {
  padding-top: 8rem;
  padding-left: 4rem;
  padding-right: 4rem;
}

}

@media (max-width: 768px) {
  /* Increase the long‐copy font in the WHY section on phones */
  .content-bottom .why-box .box-3,
  .content-bottom .why-box .box-5 {
    font-size: 1.1rem;      /* up from 0.75rem */
    line-height: 1.5;     /* optional tweak for readability */
  }

    .how-right {
  padding-top: 0rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 4rem;
}

  /* Let the WHY copy grow naturally on phones */
  .why-box .box-3,
  .why-box .box-5 {
    max-height: none !important;
    overflow-y: visible !important;
  }

  /* Also make sure the container itself isn’t clipping */
  .content-bottom {
    overflow-y: visible !important;
  }

  .content-bottom .why-box {
    flex: none;
    width: 100%;
    max-width: 95%;
    padding: 5px 0;
  }

  .content-bottom .content-box.box-2 {
  line-height: 1.2;
 }


}


/* Basic Modal Overlay */
.modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  display: none;                /* hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* The white “window” */
.modal-content {
  background: #fff;
  max-width: 800px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  font-family: 'AnoRegular', sans-serif;
  border-radius: 4px;
  padding: 4rem;
  position: relative;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

/* Close button (“×”) */
.modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
}

/* Optional: ease in/out */
.modal.show {
  display: flex;
  animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }


/* style the Read-Terms button to match your .box-3 text */
.read-terms-btn {
  display: block;                /* fill the container */
  width: 100%;                   /* full width of .box-3 */
  background: none;              /* no default button colors */
  border: none;                  /* remove default border */
  padding: 0;                    /* remove default padding */
  font-family: 'AnoBoldItalic', sans-serif;
  font-size: 1.9rem;            /* same size as .how-bottom .box-3 */
  line-height: 1.2;              /* match your container’s line-height */
  text-align: center;              /* left-align the text */
  text-decoration: underline;    /* if you want the underline */
  color: var(--primary-color);   /* inherit your text color */
  cursor: pointer;               /* pointer on hover */
}

/* (Optional) add some breathing room if you like) */
.read-terms-btn:hover {
  opacity: 0.8;
}

/* ===== Terms & Conditions Styling ===== */

.modal-body {
  max-height: 70vh;
  overflow-y: auto;
  padding: 1rem 0;
  font-family: 'AnoRegular', sans-serif;
  line-height: 1.6;
  color: var(--primary-color);
}

/* Each logical block */
.terms-section {
  margin-bottom: 2rem;
}

/* Section titles */
.terms-section h3 {
  font-family: 'AnoBlackWideItalic', sans-serif;
  font-size: 1.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 2px solid var(--primary-color);
  padding-bottom: 0.25rem;
}

/* Ordered lists */
.terms-section ol {
  margin: 0 0 1rem 1.5rem; /* indent the list */
  padding: 0;
}

/* List items */
.terms-section ol li {
  margin-bottom: 0.75rem;
  font-size: 1rem;
}

/* Paragraphs under lists */
.terms-section p {
  margin: 1rem 0;
  font-size: 1rem;
}

/* Links inside the terms */
.terms-section a {
  color: var(--accent-color);
  text-decoration: underline;
}

/* Responsive tweak: smaller text on tiny screens */
@media (max-width: 480px) {
  .modal-body {
    padding: 0.5rem 0;
  }
  .terms-section h3 {
    font-size: 1.5rem;
  }
  .terms-section ol li,
  .terms-section p {
    font-size: 0.9rem;
  }
}

/* 1) Outer container scrolls */
.modal-content {
  max-height: 80vh;      /* keeps the whole box from growing beyond the viewport */
  overflow-y: auto;      /* scroll the entire content */
}

/* 2) Turn off inner scrolling so you don’t get two bars */
.modal-body {
  max-height: none !important;
  overflow: visible !important;
}

@media (max-width: 768px) {
  /* Tighter left/right padding on the modal window for phones */
  .modal-content {
    /* top/bottom 2rem (keep for breathing), left/right 1rem instead of 1.5rem */
    padding: 2rem 1rem;
  }
}

@media (max-width: 768px) {
  /* Make sure the HOW container is never wider than the viewport */
  .how-left {
    width: 100%;
    max-width: 100%;
    padding: 0 1rem;          /* comfy side‐padding */
    box-sizing: border-box;
  }

  /* Shrink the list’s left gutter so it can’t overflow */
  .how-left ol {
    padding-left: 0.5rem;     /* instead of the desktop 2rem or more */
    margin: 0;
    max-width: 100%;
    overflow-wrap: break-word; /* wrap long lines */
  }

  .how-left ol li {
    padding-left: 2rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
  }


  /* Make sure the number marker still sits in that new gutter */
  .how-left ol li::before {
    left: -0.5rem;            /* nudge it into the new padding area */
    font-size: 2rem;          /* or whatever size feels right on mobile */
  }

}

/* ==========================================================================
   Force FAQ questions into the right color & AnoBoldItalic font
   ========================================================================== */

/* Style the accordion headers (the question text) */
.faq-section .accordion-header {
  color: var(--primary-color) !important;              /* ensure black text */
  font-family: 'AnoBoldItalic', sans-serif !important; /* your chosen face */
  text-decoration: none !important;                    /* strip any underlines */
}

/* If your plugin/theme wrapped the header text in a link */
.faq-section .accordion-header a {
  color: inherit !important;
  font-family: inherit !important;
  text-decoration: none !important;
}

@media (max-width: 768px) {
  /* Ensure the WHY section stacks vertically */
  .content-bottom {
    flex-direction: column !important;
  }

  /* Center the “WHY?” title box */
  .content-bottom .box-2 {
    /* shrink to content width */
    width: auto !important;
    /* center the text inside */
    text-align: center !important;
    /* center the flex item in its container */
    align-self: center !important;
    margin: 0 auto !important;
  }
}


/* ==========================================================================
   Fixed-width FAQ headers with “+” at the right
   ========================================================================== */

.faq-section .accordion {
  /* let the container shrink to fit its header */
  display: inline-block;
  margin-bottom: 1rem;          /* space between each accordion */
  position: relative;           /* for any absolute children if needed */
}

.faq-section .accordion-header {
  /* turn the header into a fixed-width flex container */
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 800px !important;      /* ← set your desired width here */
  box-sizing: border-box;       /* include padding in that width */
  padding: 0.75rem 1rem;        /* tweak for your design */
  font-family: 'AnoBoldItalic', sans-serif !important;
  font-size: 1.2rem;
  color: var(--primary-color) !important;
          /* or transparent, whichever you need */
  border: 1px solid var(--primary-color);
    background-color: #ccffba; 
}

.faq-section .accordion-header::after {
  /* override the old marker */
  content: '+' !important;
  /* no absolute positioning needed—flex puts it at the right */
  font-family: 'AnoBoldItalic', sans-serif;
  font-size: 1.2rem;
  margin-left: 0.5rem;          /* small gap from the text */
}

/* ==========================================================================
   FAQ: let each expanded answer show its full height
   ========================================================================== */

/* 1) Remove any height caps or scrolling */
.faq-section .accordion-body {
  position: static !important;    /* back in the normal flow */
  max-height: none !important;    /* no more max-height */
  height: auto !important;        /* size to its content */
  overflow: visible !important;   /* no scrollbars */
  display: none;                  /* keep collapsed by default */
  background-color: #ccffba;
}

/* 2) When expanded, just display the body fully */
.faq-section .accordion[aria-expanded="true"] .accordion-body {
  display: block !important;
}

@media (max-width: 768px) {
  /* Make each accordion full-width on mobile */
  .faq-section .accordion {
    display: block !important;       /* stack them */
    width: 100% !important;          /* span the container */
    margin-bottom: 0.75rem;          /* keep some vertical gap */
  }

  .faq-section .accordion-header {
    display: block !important;       /* remove the inline-flex */
    width: 100% !important;          /* fill the parent */
    box-sizing: border-box;          /* include padding in that width */
    padding: 0.75rem 1rem;           /* your usual padding */
    text-align: left;                /* keep question text left-aligned */
  }
}

/* ==========================================================================
   Increase line-height of FAQ accordion headers
   ========================================================================== */
.faq-section .accordion-header {
  /* Make sure it’s not constrained to a fixed height */
  height: auto !important;
  /* More breathing room between lines */
  line-height: 1.5rem !important;      /* or any value you prefer */
  /* Optional: add a bit more vertical padding to match */
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}