/* AERASE home page: rules that only it needs. Loaded after pdp.css. The home uses the lavender ("her") tokens
   because FAY's home does: purple headings, #f3eeff soft sections, a #faf7fd hero (FAY_SITE_SPEC.md section 9). */

/* ---------- section rhythm: FAY home alternates white / #f3eeff, 56 px padding, 1100 px content ---------- */
.home .sec{padding:56px var(--gutter)}
.home .sec h2{letter-spacing:-.025em;max-width:none}
@media (min-width:900px){.home .sec h2{letter-spacing:-.015em}}
.home .sec .sub{font-size:16px;margin:12px auto 0;max-width:520px;line-height:1.5}

/* ---------- hero (FAY 9.1): 16:9 still life (home-hero-desktop.jpg) at every width, copy centred below it on phones and
   over the empty left part of the image on desktop. The whole set (can, carton, spatula) stays in frame everywhere:
   phones show the right 3/4 of the file as a 4:3 crop (the set sits in that part, FAY's hero is 4:3 too), 600-899 px
   show the file whole, and from 900 px the hero is capped at 660 px tall with the crop taken from the empty wall at the
   top (object-position 81 %), centred up to 1400 px wide with a soft edge fade on wider screens. */
.hh{background:#faf7fd;color:var(--text)}
.hh .hh-pic{display:block;background:#faf7fd}
.hh .hh-pic img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:100% 50%}
@media (min-width:600px){.hh .hh-pic img{aspect-ratio:16/9;object-position:center}}
.hh .hh-copy{padding:28px 20px 36px;text-align:center}
.hh .rating{display:inline-flex;align-items:center;gap:8px;font-size:13px;text-decoration:none;color:var(--text)}
.hh .rating b{font-weight:400}
.hh .rating .stars{font-size:15px;letter-spacing:1px}
.hh h1{font-size:34px;line-height:1.06;font-weight:800;color:var(--head);margin:14px 0 0;letter-spacing:-.03em}
.hh .sub{font-size:16px;line-height:1.5;color:var(--text);margin:14px auto 0;max-width:420px}
.hh .pair{margin-top:24px}
.trust{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;align-items:center;gap:8px 18px;font-size:13px;color:var(--head)}
.trust li{display:flex;align-items:center;gap:6px}
.trust svg{width:16px;height:16px;color:var(--accent);flex:none}
@media (min-width:900px){
  .hh{position:relative}
  .hh .hh-pic img{aspect-ratio:auto;height:clamp(520px,48vw,660px);max-width:1400px;margin:0 auto;object-position:center 81%}
}
@media (min-width:1400px){
  .hh .hh-pic img{-webkit-mask:linear-gradient(90deg,transparent,#000 90px,#000 calc(100% - 90px),transparent);mask:linear-gradient(90deg,transparent,#000 90px,#000 calc(100% - 90px),transparent)}
}
@media (min-width:900px){
  .hh .hh-copy{position:absolute;inset:0;width:100%;max-width:1440px;margin:0 auto;padding:56px 32px 56px 100px;text-align:left;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;pointer-events:none}
  .hh .hh-copy>*{pointer-events:auto}
  .hh .rating{color:#1c1236}
  .hh h1{font-size:58px;max-width:470px}
  .hh .sub{font-size:18px;max-width:460px;margin-left:0}
  .hh .pair{max-width:440px}
  .trust{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;max-width:720px;color:#1c1236}
}
/* 900-1199 px: the empty wall left of the carton is only ~40 % of the width, so the copy block shrinks to fit it */
@media (min-width:900px) and (max-width:1199px){
  .hh .hh-copy{padding-left:40px}
  .hh h1{font-size:44px;max-width:360px}
  .hh .sub{font-size:16px;max-width:340px}
  .hh .pair{max-width:340px}
  .trust{max-width:360px;font-size:12.5px;gap:6px 14px}
}

/* ---------- her / him button pair (FAY: 54 px, radius 8, 16 px / 700, 10 px apart, 440 px on desktop) ---------- */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:440px;margin:0 auto}
.pair .cta{margin:0;min-height:54px;font-size:16px;font-weight:700;border-radius:8px;padding:8px 10px}
.pair .cta.her{background:var(--accent);color:#fff}
.pair .cta.him{background:#3b2470;color:#fff}
.pair.center{margin-top:28px}
.pair.left{margin:24px 0 0}
@media (min-width:900px){.hh .pair{margin-left:0}}

/* ---------- 3 simple steps + demo loop (FAY 9.3) ---------- */
.home .steps{margin-top:32px;gap:14px}
.home .step{border-radius:14px;border-color:#f3eeff;box-shadow:0 6px 18px rgba(61,31,110,.07)}
.home .step .n{width:38px;height:38px;font-size:16px;font-weight:700;background:var(--head);color:#fff}
.home .step h3{margin:0 0 4px;font-size:17px;font-weight:700;line-height:1.25}
.home .step p{font-size:14.5px;line-height:1.45;color:var(--text)}
.demo-v{display:block;border-radius:14px;width:100%;aspect-ratio:343/372;object-fit:cover;background:#1b1520;margin:28px auto 0}
@media (min-width:900px){.home .steps{gap:18px}.demo-v{width:420px;aspect-ratio:420/456}}

/* ---------- results grid (FAY 9.4: 2x2 on mobile, 4 across on desktop); card = BEFORE | AFTER header + photos ---------- */
.results{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:var(--wrap);margin:28px auto 0}
.results .ba-card{padding:8px;border-radius:12px;background:#fff;border-color:#e9e0f6}
.results .ba-card .lab{font-size:11px;padding:0 0 6px}
.results .ba-card .pics{border-radius:8px}
.results.three>:last-child{grid-column:1/-1;width:calc(50% - 6px);justify-self:center}
@media (min-width:900px){
  .results{grid-template-columns:repeat(4,1fr);gap:16px}
  .results.three{grid-template-columns:repeat(3,1fr);max-width:820px}
  .results.three>:last-child{grid-column:auto;width:auto}
  .results .ba-card{padding:12px}
  .results .ba-card .lab{font-size:12.5px}
}

/* ---------- comparison table (FAY 9.5): lavender AERASE column, grey cells with check / x discs, then Her / Him ---------- */
.home .vs{margin-top:34px;max-width:640px;font-size:14px}
.home .vs th{font-size:12px;padding:12px 2px 10px}
.home .vs thead .us{font-size:14px;padding:12px 2px}
.home .vs td{padding:14px 4px;border-bottom:0}
.home .vs td:first-child{font-size:14px;font-weight:500;color:#1a1a1a;padding-left:0;width:52%}
.home .vs td:not(:first-child):not(.us){background:#f1eef5}
.home .vs tbody tr:not(:last-child) td:first-child{border-bottom:1px solid #ece6f3}
.home .vs .us{width:36px}
.home .vs .ok{background:var(--accent);color:#fff}
.home .vs .us .ok{background:#fff;color:var(--head)}
.home .vs .no{background:#e98a9a;color:#fff}
@media (min-width:900px){.home .vs .us{width:52px}.home .vs td:not(:first-child){width:34px}.home .vs td:first-child{width:auto;padding-left:0}}

/* ---------- real stories (FAY 9.6): rating line, quote cards, then video cards ---------- */
.home .rating-line{display:flex;justify-content:center;align-items:center;gap:8px;font-size:13px;color:var(--text);margin:12px 0 0}
.home .rating-line .stars{font-size:15px;letter-spacing:1px}
.home .hscroll{padding-top:28px;padding-bottom:8px}
.home .hscroll.quotes>*{flex:0 0 278px}
.home .hscroll.vrow>*{flex:0 0 278px}
.quote{background:#fff;border:1px solid #f3eeff;border-radius:14px;padding:22px 20px;display:flex;flex-direction:column}
.quote .stars{font-size:16px;letter-spacing:1px}
.quote p{margin:10px 0 0;font-size:15px;line-height:1.5;color:var(--text);flex:1}
.quote small{display:flex;gap:6px;font-size:14px;font-weight:600;color:var(--text);margin-top:12px}
.quote small span{font-weight:500;color:#6d388b}
.home .hscroll.vrow{margin-top:8px}
.home .vcard{border-radius:18px}
.home .vcard .mute{width:36px;height:36px;background:rgba(0,0,0,.55)}
@media (min-width:900px){
  .home .hscroll.quotes>*{flex:0 0 calc(25% - 11px)}
  .home .hscroll.vrow>*{flex:0 0 calc(25% - 11px)}
}

/* ---------- safety / nothing hidden (FAY 9.7 = 5.6): eyebrow, left H2, check list, square image ---------- */
.home .safe .eyebrow{background:#f3eeff;border-radius:999px;font-size:12px;letter-spacing:.02em;text-transform:none;padding:6px 12px;margin-bottom:12px}
.home .safe h2{margin-bottom:20px}
.home .tick-list{gap:12px}
.home .tick-list li{font-size:16px;line-height:1.45;color:#1a1a1a;padding-left:34px}
.home .tick-list li:before{width:22px;height:22px;background-color:var(--accent)}
.home .safe img{border-radius:14px}
@media (min-width:900px){.home .safe{gap:48px}.home .safe h2{font-size:40px}}

/* ---------- guarantee (FAY 9.8): #faf7fd card on the lavender band, dotted lavender badge, Her / Him ---------- */
.home .guarantee{background:#faf7fd;border:2px solid #f3eeff;border-radius:20px;padding:28px 20px;gap:18px}
.home .seal{width:120px;height:120px;border:3px dotted var(--accent);color:var(--accent)}
.home .seal b{font-size:32px}
.home .seal small{font-size:9px}
.home .guarantee h2{margin-bottom:10px}
.home .guarantee p{font-size:16px;color:#1a1a1a;line-height:1.5}
@media (min-width:900px){.home .guarantee{padding:36px 40px;gap:32px}.home .guarantee h2{font-size:40px;line-height:1.15}.home .guarantee .pair{margin-left:0}}

/* ---------- about page (/about): hero, story split, her/him cards, steps, promise cards, CTA ---------- */
.ab-hero{background:#faf7fd;text-align:center;padding:56px var(--gutter) 52px}
.ab-hero .eyebrow{background:#f3eeff}
.ab-hero h1{text-wrap:balance;font-size:36px;line-height:1.08;font-weight:800;color:var(--head);margin:8px auto 0;max-width:560px;letter-spacing:-.025em}
.ab-hero h1 span{color:var(--accent);font-style:italic}
.ab-hero p{font-size:16.5px;line-height:1.6;color:var(--text);max-width:480px;margin:18px auto 0}
.ab-values{padding-top:44px;padding-bottom:44px}
.ab-vals{display:grid;gap:12px;max-width:860px;margin:0 auto}
.ab-val{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;border:1px solid #e9e0f6;border-radius:16px;padding:24px 20px;text-align:center;box-shadow:0 1px 2px rgba(60,30,100,.04)}
.ab-val svg{width:28px;height:28px;color:var(--accent);margin-bottom:10px}
.ab-val b{display:block;font-size:16px;line-height:1.3;color:var(--head)}
.ab-val p{margin:4px 0 0;font-size:14.5px;line-height:1.5;color:var(--text)}
.ab-cta{padding-top:52px;padding-bottom:52px}
.ab-cta h2{margin-bottom:22px}
.ab-contact{text-align:center;font-size:14.5px;color:var(--text);margin:24px 0 0}
.ab-contact a{color:var(--head);font-weight:600}
@media (min-width:900px){
  .ab-hero{padding:104px 32px 92px}
  .ab-hero h1{font-size:58px;max-width:760px}
  .ab-hero p{font-size:19px;max-width:600px}
  .ab-values{padding-top:72px;padding-bottom:72px}
  .ab-vals{grid-template-columns:repeat(4,1fr);gap:18px;max-width:var(--wrap)}
  .ab-val{padding:34px 22px}
  .ab-cta{padding-top:80px;padding-bottom:80px}
}

/* ---------- FAQ (FAY 9.9): white rows with a lavender border and a "+" ---------- */
.home .faq{margin-top:28px;gap:12px}
.home .faq details{border:1px solid var(--accent);border-radius:12px;background:#fff}
.home .faq summary{font-size:16px;font-weight:400;padding:18px 48px 18px 18px;position:relative;line-height:1.5}
.home .faq summary:after{position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:20px;font-weight:700;color:var(--head)}
.home .faq details p{font-size:15px;line-height:1.55;padding:0 18px 18px;color:var(--text)}
/* About: brand story blocks */
.ab-story-in{max-width:680px;margin:0 auto}
.ab-story-in h2{margin-bottom:18px}
.ab-story-in p{font-size:16px;line-height:1.65;color:var(--text);margin:0 0 14px}
.ab-story-in p:last-child{margin-bottom:0}
.ab-story-in p b{color:var(--head)}
@media (min-width:900px){.ab-story-in p{font-size:17px}}