/* ============ ABOUT PAGE ============ */

/* Gradient + glow headings (same treatment as the homepage) */
.a-h1,.a-h2,.a-hero-sub,.a-choice-title,.a-pull{
  --g:linear-gradient(180deg,#ffffff 15%,#cdf7fb 100%);
  --gs:rgba(225,250,252,.85);
  --glow:rgba(101,232,244,.35);
  background:var(--g);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-stroke:.5px var(--gs);
  filter:drop-shadow(0 0 10px var(--glow));
  font-family:var(--serif);
  font-weight:400;
}
.a-hero-sub,.a-choice-title,.a-pull{
  --g:linear-gradient(180deg,#d4fbff 0%,#86eefa 45%,#4fd9e8 100%);
  --gs:rgba(134,238,250,.8);
  --glow:rgba(101,232,244,.45);
}

.a-h2{
  font-size:clamp(1.75rem,2.6vw,2.5rem);
  line-height:1.12;
  margin-bottom:14px;
}
.a-h2-sm{font-size:clamp(1.5rem,2vw,1.9rem);}
.about-page .eyebrow{color:var(--cyan);margin-bottom:10px;}
.a-lead{color:#e3e7ee;font-size:1.02rem;line-height:1.5;max-width:680px;margin-bottom:26px;}

.a-prose > p{
  color:#dfe4ec;
  font-size:1rem;
  line-height:1.6;
  max-width:680px;
  margin-bottom:14px;
}
.a-prose strong{color:#fff;font-weight:600;}
.a-strong-line{color:#fff !important;font-weight:500;}
.a-em{
  color:var(--cyan) !important;
  font-weight:600;
  font-size:1.08rem !important;
  text-shadow:0 0 12px rgba(101,232,244,.35);
}

/* Shared: full-bleed side photo that fades into the page */
.a-choice-media,.a-for-media,.a-partners-media{
  position:absolute;
  top:0;
  bottom:0;
  overflow:hidden;
}
.a-choice-media img,.a-for-media img,.a-partners-media img,
.a-method-media img,.a-hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ============ HERO ============ */
.a-hero{
  position:relative;
  min-height:480px;
  display:flex;
  align-items:center;
  overflow:hidden;
  border-bottom:1px solid rgba(101,232,244,.3);
}
.a-hero-media{position:absolute;inset:0;}
.a-hero-media img{object-position:50% 18%;transform:scaleX(-1);}
.a-hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(3,4,8,.92) 0%, rgba(3,4,8,.8) 32%, rgba(3,4,8,.35) 55%, rgba(3,4,8,0) 72%),
    linear-gradient(0deg, rgba(3,4,8,.5) 0%, rgba(3,4,8,0) 25%);
}
.a-hero-inner{position:relative;z-index:2;padding-top:28px;padding-bottom:48px;}
.a-logo-link{display:inline-block;margin-bottom:22px;}
.a-logo{width:170px;height:auto;}
.a-hero-copy{max-width:640px;}
.a-h1{
  font-size:clamp(2.8rem,4.6vw,4.4rem);
  line-height:1.02;
  margin-bottom:10px;
}
.a-hero-sub{
  font-size:clamp(1.6rem,2.6vw,2.4rem);
  line-height:1.12;
  margin-bottom:18px;
}
.a-hero-text{
  color:#eef1f5;
  font-size:1rem;
  line-height:1.55;
  max-width:560px;
  margin-bottom:12px;
  text-shadow:0 1px 4px rgba(0,0,0,.7);
}
.a-hero .btn{margin-top:12px;}
.a-hero-note{color:#aab4c2;font-size:.86rem;letter-spacing:.4px;margin-top:14px;}

/* ============ BEAU IS A CHOICE ============ */
.a-choice{
  position:relative;
  overflow:hidden;
  background:var(--bg);
  border-bottom:1px solid rgba(101,232,244,.3);
}
.a-choice-media{
  right:0;
  width:max(26%, calc(50% - 400px));
  -webkit-mask-image:linear-gradient(270deg,#000 55%,transparent 100%);
  mask-image:linear-gradient(270deg,#000 55%,transparent 100%);
}
.a-choice-media img{object-position:62% 30%;}
.a-choice-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:320px minmax(0,560px);
  column-gap:48px;
  align-items:center;
  padding-top:64px;
  padding-bottom:64px;
}
.a-choice-title{
  font-size:clamp(2.8rem,4.6vw,4.6rem);
  line-height:.98;
  text-transform:uppercase;
  letter-spacing:1px;
  padding-bottom:22px;
  border-bottom:2px solid var(--cyan);
  box-shadow:0 8px 10px -8px rgba(101,232,244,.6);
}
.a-choice-beau{
  display:block;
  --g:linear-gradient(180deg,#9ff5ff 0%,#3fc8dc 60%,#1f8fa8 100%);
}
.a-pull{
  font-size:clamp(1.35rem,2vw,1.8rem) !important;
  line-height:1.25 !important;
  margin-top:18px;
}

/* ============ WHO IS BEAU FOR ============ */
.a-for{
  position:relative;
  overflow:hidden;
  background:linear-gradient(90deg, var(--bg) 30%, #0a0d16 100%);
  border-bottom:1px solid rgba(101,232,244,.3);
}
.a-for-media{
  left:0;
  width:max(34%, calc(50% - 240px));
  -webkit-mask-image:linear-gradient(90deg,#000 60%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 60%,transparent 100%);
}
.a-for-media img{object-position:62% 25%;}
.a-for-inner{
  position:relative;
  z-index:1;
  padding-top:56px;
  padding-bottom:56px;
  padding-left:400px;
}
.a-for-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px 36px;
}
.a-for-item{display:flex;gap:18px;align-items:flex-start;}
.a-for-item > img{
  width:40px;
  height:40px;
  flex-shrink:0;
  filter:drop-shadow(0 0 5px rgba(101,232,244,.5));
}
.a-for-item h3{
  font-family:var(--sans);
  font-weight:700;
  font-size:1.02rem;
  color:var(--cyan);
  margin-bottom:6px;
}
.a-for-item p{color:#dfe4ec;font-size:.92rem;line-height:1.5;}

/* ============ FOR PARTNERS ============ */
.a-partners{
  position:relative;
  overflow:hidden;
  background:var(--bg);
  border-bottom:1px solid rgba(101,232,244,.3);
}
.a-partners-media{
  right:0;
  width:max(32%, calc(50% - 280px));
  -webkit-mask-image:linear-gradient(270deg,#000 55%,transparent 100%);
  mask-image:linear-gradient(270deg,#000 55%,transparent 100%);
}
.a-partners-media img{object-position:45% 30%;}
.a-partners-inner{position:relative;z-index:1;padding-top:56px;padding-bottom:56px;}
.a-partners-copy{max-width:700px;}
.a-callout{
  display:inline-flex !important;
  align-items:center;
  gap:18px;
  margin-top:10px;
  padding:14px 26px 14px 20px;
  border:1.5px solid rgba(101,232,244,.6);
  border-radius:10px;
  background:rgba(6,18,26,.55);
  box-shadow:0 0 14px rgba(101,232,244,.18), inset 0 0 14px rgba(101,232,244,.07);
  color:var(--cyan) !important;
  font-weight:600;
  max-width:none !important;
}
.a-callout img{width:30px;height:30px;flex-shrink:0;filter:drop-shadow(0 0 5px rgba(101,232,244,.55));}
.a-callout-quote{line-height:1.55 !important;font-size:1.02rem !important;}

/* ============ METHOD / WHY EROTIC ============ */
.a-method{
  position:relative;
  overflow:hidden;
  background:var(--bg-alt);
  border-bottom:1px solid rgba(101,232,244,.3);
}
.a-method-media{
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  width:50%;
}
.a-method-media img{object-position:70% 30%;}
.a-method-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(20,6,16,.97) 0%, rgba(20,6,16,.88) 45%, rgba(20,6,16,.45) 75%, rgba(20,6,16,.2) 100%),
    rgba(255,46,147,.08);
}
.a-method-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
}
.a-method-col{padding-top:56px;padding-bottom:56px;}
.a-method-col:first-child{padding-right:48px;}
.a-method-erotic{
  padding-left:48px;
  border-left:1px solid rgba(101,232,244,.2);
}
.a-method-erotic > p{max-width:520px;}

/* ============ HOW BEAU WORKS ============ */
.a-how{background:var(--bg);border-bottom:1px solid rgba(101,232,244,.3);}
.a-how-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
}
.a-how-main{padding:56px 40px 56px 0;}
.a-how-side{
  padding:56px 0 56px 40px;
  border-left:1px solid rgba(101,232,244,.2);
}
.a-panels{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.a-panel{
  --tint:4,16,22;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  min-height:340px;
  border-radius:12px;
  background:rgb(var(--tint));
}
.a-panel.cyan{
  border:1.5px solid rgba(101,232,244,.7);
  box-shadow:0 0 18px rgba(101,232,244,.25), inset 0 0 18px rgba(101,232,244,.1);
}
.a-panel.pink{
  --tint:40,6,26;
  border:1.5px solid rgba(255,79,163,.75);
  box-shadow:0 0 18px rgba(255,46,147,.28), inset 0 0 18px rgba(255,46,147,.12);
}
.a-panel-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:right 25%;
}
.a-panel::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(0deg, rgb(var(--tint)) 42%, rgba(var(--tint),.75) 62%, rgba(var(--tint),.15) 100%);
}
.a-panel-body{position:relative;z-index:2;padding:24px 24px 22px;}
.a-panel-icon{width:46px;height:46px;margin-bottom:12px;filter:drop-shadow(0 0 6px rgba(101,232,244,.55));}
.a-panel.pink .a-panel-icon{filter:drop-shadow(0 0 6px rgba(255,79,163,.6));}
.a-panel h3{
  font-family:var(--sans);
  font-weight:700;
  font-size:1.2rem;
  color:var(--cyan);
  margin-bottom:8px;
}
.a-panel.pink h3{color:var(--pink-bright);}
.a-panel p{color:#e3e7ee;font-size:.92rem;line-height:1.5;}
.a-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.a-badges li{
  color:var(--cyan);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  padding:5px 12px;
  border:1px solid rgba(101,232,244,.55);
  border-radius:6px;
  background:rgba(6,18,26,.6);
}
.a-side-text{color:#dfe4ec;font-size:.93rem;line-height:1.5;margin-bottom:18px;}
.a-side-close{margin:18px 0 0;}
.about-page .version-title{
  color:var(--cyan);
  font-family:var(--sans);
  font-weight:700;
  font-size:.82rem;
  letter-spacing:1.2px;
  text-transform:uppercase;
  margin-bottom:6px;
}

/* ============ FAQ ============ */
.faq{background:var(--bg-alt);padding:56px 0 64px;}
.faq .a-h2{margin-bottom:24px;}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;align-items:start;}
.faq details{
  border:1px solid rgba(101,232,244,.3);
  border-radius:8px;
  background:rgba(8,14,22,.7);
  margin-bottom:10px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.faq details[open]{
  border-color:rgba(101,232,244,.65);
  box-shadow:0 0 14px rgba(101,232,244,.12);
}
.faq summary{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 18px;
  cursor:pointer;
  list-style:none;
  color:#f1f3f6;
  font-weight:500;
  font-size:.97rem;
  border-radius:8px;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::before{
  content:"";
  flex-shrink:0;
  width:12px;
  height:12px;
  background:url("../assets/icons/chevron-right.svg") center/contain no-repeat;
  transition:transform .2s ease;
}
.faq summary::after{
  content:"";
  flex-shrink:0;
  margin-left:auto;
  width:16px;
  height:16px;
  background:url("../assets/icons/plus.svg") center/contain no-repeat;
}
.faq details[open] > summary::before{transform:rotate(90deg);}
.faq details[open] > summary::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M22 50h56' fill='none' stroke='%2365e8f4' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.faq summary:hover{color:#fff;background:rgba(101,232,244,.05);}
.faq-answer{padding:0 22px 18px 44px;}
.faq-answer p{color:#dfe4ec;font-size:.94rem;line-height:1.6;max-width:680px;}

/* ============ FINAL CTA (extends homepage .cta) ============ */
.a-cta .cta-bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%;}
.a-cta .cta-copy .eyebrow{margin-bottom:10px;}
.a-cta .cta-copy > p.a-follow{
  font-family:var(--serif);
  font-size:1.4rem;
  color:var(--cyan);
  text-shadow:0 0 12px rgba(101,232,244,.45);
  margin-bottom:18px;
}

/* ============ FOOTER ============ */
.a-footer-grid{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:32px;
}
.footer-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 34px;}
.footer-nav a{
  color:#e3e7ee;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:1.4px;
  text-transform:uppercase;
  padding:4px 0;
  border-bottom:1.5px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.footer-nav a:hover{color:var(--cyan);}
.footer-nav a[aria-current="page"]{color:var(--cyan);border-bottom-color:var(--cyan);}
.a-footer-legal{text-align:right;max-width:380px;}
.a-footer-legal p{color:#8d97a6;font-size:.76rem;line-height:1.5;}
.a-footer-legal p + p{margin-top:6px;font-style:italic;}

/* ============ ACCESSIBILITY ============ */
.about-page a:focus-visible,
.about-page .btn:focus-visible,
.faq summary:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
}
@media (prefers-reduced-motion:reduce){
  .about-page *,.about-page *::before,.about-page *::after{
    transition:none !important;
    animation:none !important;
  }
  html{scroll-behavior:auto;}
}

/* ============ RESPONSIVE ============ */
@media (max-width:1200px){
  .a-for-inner{padding-left:36%;}
  .a-how-grid{grid-template-columns:minmax(0,1fr) 320px;}
  .a-how-side{padding-left:30px;}
  .a-how-main{padding-right:30px;}
}

@media (max-width:1100px){
  .a-how-grid{grid-template-columns:1fr;}
  .a-how-main{padding:56px 0 36px;}
  .a-how-side{
    padding:36px 0 56px;
    border-left:none;
    border-top:1px solid rgba(101,232,244,.2);
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
    column-gap:36px;
    align-items:start;
  }
  .a-how-side .eyebrow,.a-how-side .a-h2,.a-how-side .a-side-text:not(.a-side-close){grid-column:1;}
  .a-how-side .versions-boxes{grid-column:2;grid-row:1 / span 3;max-width:none;}
  .a-how-side .a-side-close{grid-column:1 / -1;}
}

@media (max-width:1024px){
  .a-choice-grid{grid-template-columns:250px minmax(0,1fr);column-gap:36px;padding-right:28%;}
  .a-choice-title{font-size:3rem;}
  .a-choice-media{width:30%;}
  .a-partners-copy{max-width:62%;}
  .a-method-col:first-child{padding-right:32px;}
  .a-method-erotic{padding-left:32px;}
}

/* Tablet portrait & below: stack side photos above their content */
@media (max-width:900px){
  .a-choice-media,.a-for-media,.a-partners-media{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    -webkit-mask-image:linear-gradient(180deg,#000 60%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 60%,transparent 100%);
  }
  .a-choice-grid{grid-template-columns:1fr;row-gap:28px;padding-right:32px;padding-top:0;margin-top:-30px;}
  .a-choice-title{max-width:420px;}
  .a-for-inner{padding-left:32px;padding-top:0;margin-top:-30px;}
  .a-partners-inner{padding-top:0;margin-top:-30px;}
  .a-partners-copy{max-width:none;}
  .a-method-media{width:100%;top:auto;height:55%;}
  .a-method-media::after{background:linear-gradient(180deg, rgba(20,6,16,.97) 0%, rgba(20,6,16,.85) 45%, rgba(20,6,16,.55) 100%), rgba(255,46,147,.08);}
  .a-method-grid{grid-template-columns:1fr;}
  .a-method-col:first-child{padding-right:0;padding-bottom:40px;}
  .a-method-erotic{padding-left:0;padding-top:40px;border-left:none;border-top:1px solid rgba(101,232,244,.2);}
  .a-footer-grid{grid-template-columns:1fr;justify-items:center;text-align:center;gap:20px;}
  .a-footer-legal{text-align:center;max-width:520px;}
}

/* Mobile */
@media (max-width:768px){
  .a-hero{display:block;min-height:0;}
  .a-hero-media{position:relative;inset:auto;aspect-ratio:4/3;}
  .a-hero-media img{object-position:50% 20%;}
  .a-hero-media::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(5,7,12,.35) 0%, rgba(5,7,12,0) 30%, rgba(5,7,12,.7) 75%, var(--bg) 100%);
  }
  .a-hero-overlay{display:none;}
  .a-hero-inner{margin-top:-70px;padding:0 20px 44px;}
  .a-logo-link{display:block;margin:0 0 18px;}
  .a-logo{width:140px;}
  .a-hero .btn{width:min(100%,380px);justify-content:center;}
  .a-choice-grid,.a-for-inner{padding-left:20px;padding-right:20px;}
  .a-choice-media,.a-for-media,.a-partners-media{aspect-ratio:4/3;}
  .a-for-grid{grid-template-columns:1fr;gap:24px;}
  .a-for-inner,.a-partners-inner{padding-bottom:48px;}
  .a-choice-grid{padding-bottom:48px;}
  .a-method-col{padding-top:48px;}
  .a-panels{grid-template-columns:1fr;}
  .a-panel{min-height:300px;}
  .a-how-main{padding-top:48px;}
  .a-how-side{display:block;padding-bottom:48px;}
  .faq{padding:48px 0 52px;}
  .faq-grid{grid-template-columns:1fr;}
  .faq summary{padding:14px 14px;}
  .faq-answer{padding:0 16px 16px 40px;}
  .a-cta .cta-copy .btn{width:min(100%,380px);}
  .a-callout{display:flex !important;padding:14px 16px;}
}

@media (max-width:400px){
  .a-h1{font-size:2.5rem;}
  .a-choice-title{font-size:2.8rem;}
}

/* FAQ cross-link to Bambi Sleep */
.faq-xlink{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid rgba(255,79,163,.28);
}
.faq-xlink p{color:#c9cfd9;font-size:.9rem;line-height:1.55;max-width:680px;}
.faq-xlink .faq-xlink-q{color:#fff;font-weight:600;margin-bottom:2px;}
.faq-xlink-cta{
  display:inline-block;
  margin-top:10px;
  color:var(--pink-bright);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:1.4px;
  text-transform:uppercase;
  padding:7px 14px;
  border:1px solid rgba(255,79,163,.6);
  border-radius:20px;
  box-shadow:0 0 10px rgba(255,46,147,.18);
  transition:background .2s ease, box-shadow .2s ease;
}
.faq-xlink-cta:hover{background:rgba(255,46,147,.1);box-shadow:0 0 14px rgba(255,46,147,.35);}