/* =========================================================================
   CURVALICIOUS — SHARED STYLESHEET
   One stylesheet, linked from every page. Fix a shared component here and
   it updates everywhere at once — that's the whole point of this file.
   Sections below are grouped: TOKENS/BASE → SHARED COMPONENTS (used on 2+
   page types) → PAGE-SPECIFIC (used on exactly one page type) → RESPONSIVE.
   ========================================================================= */

/* ===== TOKENS ===== */
:root{
  /* Curvalicious brand palette — anchored to brand primary #F17C78 */
  --cream:      #FFF8F5;   /* page background */
  --blush:      #FDEBE8;   /* soft section background (tint of primary) */
  --harbor:      #174158;  /* deep harbor blue — primary text + dark sections, pulled from the logo's outline colour (#2D6F94) */
  --harbor-soft: #4C7285;  /* muted harbor blue — secondary text */
  --coral:      #F17C78;   /* BRAND PRIMARY */
  --coral-deep: #DE5F5A;   /* deeper shade of brand primary — CTAs, hovers */
  --peach:      #F6C9AE;   /* warm peach accent */
  --gold:       #E8A44C;   /* occasional bright accent, per brand brief */
  --line:       rgba(23,65,88,0.12);
}

/* ===== BASE / RESET ===== */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Quicksand', sans-serif;
  background:var(--cream);
  color:var(--harbor);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:'Fraunces', serif; font-weight:500; letter-spacing:-0.01em;}
.script{font-family:'Caveat', cursive; font-weight:600;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}

/* =========================================================================
   SHARED COMPONENTS — appear on 2+ page types. Fix here, not per page.
   ========================================================================= */

/* ----- Eyebrow pill badge (hero eyebrows, section-head eyebrows, page-hero
   eyebrows — every "small label above a heading" on the site uses this one
   base rule, then a context layers a colour override on top if it sits on
   a dark/photo background). ----- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:700;font-size:0.8rem;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--coral-deep);background:rgba(241,124,120,0.14);
  padding:7px 15px;border-radius:100px;margin-bottom:18px;
}
.eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--coral-deep);}
.section-head .eyebrow{margin:0 auto 18px;width:fit-content;}
/* dark/photo-background context override — same component, readable on dark */
.testimonials .eyebrow{background:rgba(255,255,255,0.1);color:var(--peach);}
.testimonials .eyebrow::before{background:var(--peach);}

/* ----- Buttons — three-tier system used across every page ----- */
.btn-primary{
  background:var(--coral-deep);
  color:#fff;
  padding:14px 30px;
  border-radius:100px;
  font-weight:700;
  font-size:0.98rem;
  box-shadow:0 10px 26px rgba(0,0,0,0.28);
  transition:transform .2s ease, box-shadow .2s ease;
  display:inline-block;
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,0.34);}
.btn-ghost{
  font-weight:700;
  color:var(--harbor);
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-bottom:2px solid var(--harbor);
  padding-bottom:3px;
}
.hero .btn-ghost{color:#fff;border-bottom-color:rgba(255,255,255,0.65);}
.btn-white{
  background:#fff;
  color:var(--coral-deep);
  padding:17px 38px;
  border-radius:100px;
  font-weight:700;
  font-size:1.02rem;
  display:inline-block;
  position:relative;z-index:1;
  box-shadow:0 14px 30px rgba(0,0,0,0.15);
  transition:transform .2s ease;
}
.btn-white:hover{transform:translateY(-3px);}

/* ----- Top navigation row — logo + Log In + Join Free.
   .hero-topbar = sits directly on the full-bleed hero photo (homepage only).
   .topbar      = sits on a plain/light page background (all content pages).
   Same logo size, same pill button, same breakpoint behaviour either way —
   only the text/shadow colour changes for legibility against what's behind it. ----- */
.hero-topbar,.topbar{
  position:relative;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.topbar{padding:28px 0;}
.hero-topbar{z-index:3;}
.logo img{height:3.1rem;width:auto;max-width:12rem;object-fit:contain;}
.hero-topbar .logo img{height:3.75rem;max-width:14.5rem;} /* hero variant: bigger, dramatic entrance */
.hero-top-actions,.top-actions{display:flex;align-items:center;gap:16px;white-space:nowrap;}
.nav-login{font-weight:700;font-size:0.92rem;color:var(--harbor);}
.hero .nav-login{color:#fff;}
/* Hero variant: inverted pill (coral outline, coral text, empty centre) so it
   reads as a distinct secondary action next to the solid Join Free button —
   same shade as Join Free, just outlined instead of filled. */
.hero-topbar .nav-login{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 24px;
  border-radius:100px;
  border:1.5px solid var(--coral-deep);
  color:var(--coral-deep);
  background:transparent;
  transition:background .2s ease, border-color .2s ease;
}
.hero-topbar .nav-login:hover{background:rgba(222,95,90,0.14);border-color:#fff;}
.nav-cta{
  background:var(--coral-deep);
  color:#fff;
  padding:11px 26px;
  border-radius:100px;
  font-weight:700;
  font-size:0.9rem;
  box-shadow:0 6px 18px rgba(222,95,90,0.32);
  transition:transform .2s ease, box-shadow .2s ease;
}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(222,95,90,0.42);}
/* on the photo hero the coral-tinted shadow disappears into the image — use a neutral dark shadow instead */
.hero-topbar .nav-cta{box-shadow:0 6px 18px rgba(0,0,0,0.3);}
.hero-topbar .nav-cta:hover{box-shadow:0 10px 22px rgba(0,0,0,0.38);}

/* ----- Header nav menu — a hamburger icon that opens a dropdown of site
   section links. Shown at every width (desktop included) so the header
   itself stays just logo + hamburger + Log In + Join Free, no inline
   nav links ever. Built with native <details>/<summary> (same disclosure
   pattern as the FAQ accordions) so it needs no JavaScript. ----- */
.nav-menu{position:relative;}
.nav-menu summary{
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;
  cursor:pointer;list-style:none;
}
.nav-menu summary::-webkit-details-marker{display:none;}
.nav-menu-bars{position:relative;width:20px;height:13px;}
.nav-menu-bars span{
  position:absolute;left:0;width:100%;height:2.5px;border-radius:2px;
  background:var(--coral-deep);transition:transform .2s ease, opacity .2s ease;
}
.nav-menu-bars span:nth-child(1){top:0;}
.nav-menu-bars span:nth-child(2){top:5.5px;}
.nav-menu-bars span:nth-child(3){top:11px;}
.nav-menu[open] .nav-menu-bars span:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
.nav-menu[open] .nav-menu-bars span:nth-child(2){opacity:0;}
.nav-menu[open] .nav-menu-bars span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}
/* hero variant: sits on a photo — same solid coral bars, just a soft drop
   shadow (not a background chip) so they stay legible over bright areas
   of the photo, matching how the Join Free button gets a shadow there. */
.hero-topbar .nav-menu-bars span{filter:drop-shadow(0 1px 3px rgba(6,18,25,0.45));}

.nav-menu-panel{
  position:absolute;top:calc(100% + 12px);right:0;
  min-width:224px;max-width:calc(100vw - 32px);
  background:#fff;border-radius:16px;
  padding:10px;
  box-shadow:0 18px 38px rgba(23,65,88,0.2);
  display:flex;flex-direction:column;gap:2px;
  z-index:20;
}
.nav-menu-panel a{
  padding:11px 14px;border-radius:10px;
  font-weight:600;font-size:0.95rem;color:var(--harbor);
  transition:background .15s ease, color .15s ease;
}
.nav-menu-panel a:hover{background:var(--blush);color:var(--coral-deep);}

/* ----- Breadcrumb (every content page below the homepage) ----- */
.breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:4px 0 28px;
  color:var(--harbor-soft);
  font-size:0.88rem;
  font-weight:600;
}
.breadcrumb a{color:var(--coral-deep);}
.breadcrumb a:hover{text-decoration:underline;}
.breadcrumb-sep{opacity:0.5;}
.breadcrumb [aria-current="page"]{color:var(--harbor);}

/* ----- Page hero band (articles landing + article detail; homepage uses its
   own full-bleed .hero instead, see PAGE-SPECIFIC — HOMEPAGE below) -----
   Flat page-background colour rather than a blush/peach block — a distinct
   colour band here read as a hard seam between the title and the article
   body directly below it, so the title area now sits on the same cream
   background as the rest of the page. */
.page-hero{
  background:var(--cream);
  padding:8px 0 64px;
}
.page-hero h1{font-size:clamp(2.1rem, 4.4vw, 3.2rem); line-height:1.1; margin-bottom:16px;}
.page-hero p{font-size:1.1rem; line-height:1.6; color:var(--harbor-soft); max-width:620px;}
/* Landing variant (articles.html) — plain page background instead of the
   blush/peach colour block, since this hero carries a photo instead. */
.page-hero--plain{background:var(--cream);padding-top:8px;}
.page-hero-img{
  margin:24px 0 28px;
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 20px 44px rgba(23,65,88,0.12);
  max-width:900px;
}
.page-hero-img img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;}
@media (max-width:560px){
  .page-hero-img{border-radius:20px;margin:18px 0 22px;}
  .page-hero-img img{aspect-ratio:4/3;}
}

/* ----- CTA banner — the one conversion card reused at the bottom of every
   page. Canonical sizing lives here once; every page gets the same card. ----- */
.cta-banner{padding:0;}
.cta-inner{
  max-width:1180px;
  margin:0 auto;
  padding:0 40px 32px;
  min-height:550px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:url('img/cta-loves-curves.webp') center top/cover no-repeat;
  border-radius:48px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.cta-inner::before{
  content:'';
  position:absolute;
  left:0;right:0;bottom:0;height:55%;
  background:linear-gradient(to top, rgba(222,95,90,0.82) 0%, rgba(222,95,90,0.48) 55%, rgba(222,95,90,0) 100%);
}
.cta-inner h2{
  color:#fff;
  font-size:clamp(1.6rem, 3.2vw, 2.3rem);
  margin-bottom:8px;
  position:relative;z-index:1;
  text-shadow:0 2px 16px rgba(23,20,20,0.35);
}
.cta-inner p{
  color:rgba(255,255,255,0.95);
  font-size:1rem;
  max-width:480px;
  margin:0 auto 14px;
  position:relative;z-index:1;
  text-shadow:0 1px 10px rgba(23,20,20,0.3);
}
.cta-actions{display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;z-index:1;}
.cta-login{color:#fff;font-weight:600;font-size:0.92rem;border-bottom:1px solid rgba(255,255,255,0.6);padding-bottom:2px;text-shadow:0 1px 8px rgba(23,20,20,0.35);}

/* ----- Compact CTA ("member cluster") — dark solid card, no photo background,
   text left + a small cluster of member photo avatars + button. Used on
   article & article-index pages so the bottom CTA doesn't dominate the page.
   Homepage keeps the full-size photo .cta-inner above, untouched. ----- */
.cta-compact .cta-inner{
  background:var(--harbor);
  min-height:0;
  padding:36px 40px;
  border-radius:32px;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  text-align:left;
}
.cta-compact .cta-inner::before{display:none;}
.cta-compact .cta-copy{flex:1 1 auto;min-width:0;}
.cta-compact .cta-inner h2{
  font-size:clamp(1.25rem, 1.8vw, 1.55rem);
  margin-bottom:6px;
  text-align:left;
  text-shadow:none;
}
.cta-compact .cta-inner p{
  font-size:0.92rem;
  max-width:360px;
  margin:0;
  text-align:left;
  text-shadow:none;
  color:rgba(255,255,255,0.82);
}
.cta-compact .cta-avatars{display:flex;flex:0 0 auto;position:relative;z-index:1;}
.cta-compact .cta-avatars img{
  width:64px;height:64px;border-radius:50%;object-fit:cover;
  border:3px solid var(--harbor);box-shadow:0 6px 14px rgba(0,0,0,0.25);
  margin-left:-18px;
}
.cta-compact .cta-avatars img:first-child{margin-left:0;}
.cta-compact .cta-inner .btn-white{flex:0 0 auto;padding:13px 28px;font-size:0.92rem;}

@media (max-width:860px){
  .cta-compact .cta-inner{
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
    padding:28px 26px;
    gap:16px;
    aspect-ratio:auto;
    background:var(--harbor);
  }
  .cta-compact .cta-inner::after{display:none;}
  .cta-compact .cta-inner h2{font-size:1.2rem;margin-bottom:0;}
  .cta-compact .cta-inner p{display:block;font-size:0.88rem;}
  .cta-compact .cta-avatars img{width:52px;height:52px;}
  .cta-compact .cta-inner .btn-white{width:100%;text-align:center;padding:13px 28px;font-size:0.92rem;}
}

/* ----- Footer — identical on every page ----- */
footer{background:var(--cream);padding:70px 0 34px;}
.footer-grid{
  display:grid;
  grid-template-columns:1.3fr repeat(4, 1fr);
  gap:36px;
  padding-bottom:44px;
  border-bottom:1px solid var(--line);
}
.footer-logo img{height:2.6rem;margin-bottom:16px;}
.footer-grid > div:first-child p{color:var(--harbor-soft);font-size:0.92rem;line-height:1.6;max-width:260px;margin-bottom:22px;}
.footer-join{
  display:inline-block;
  background:var(--coral-deep);
  color:#fff;
  padding:10px 22px;
  border-radius:100px;
  font-weight:700;
  font-size:0.86rem;
}
.footer-col h4{
  font-size:0.82rem;text-transform:uppercase;letter-spacing:0.05em;
  color:var(--harbor);margin-bottom:18px;font-weight:700;
}
.footer-col a{
  display:block;color:var(--harbor-soft);font-size:0.9rem;
  margin-bottom:12px;font-weight:600;transition:color .2s;
}
.footer-col a:hover{color:var(--coral-deep);}
.footer-bottom{
  padding-top:26px;
  display:flex;justify-content:space-between;align-items:center;
  font-size:0.85rem;color:var(--harbor-soft);
  flex-wrap:wrap;gap:12px;
}

/* ----- Generic section rhythm (homepage sections; content pages set their
   own spacing per block since they don't use <section> the same way) ----- */
section{padding:110px 0;position:relative;}

/* A handful of section-to-section transitions read as too much empty space
   on desktop — the content flanking the boundary is sparse (a single link,
   a lone quote line, one CTA card), so the standard 110px+110px gap looks
   emptier there than it does between the denser card-grid sections. Tighten
   just those four boundaries; leave the rest at the default rhythm. Scoped
   to desktop only — mobile already has its own tighter section padding. */
@media (min-width:861px){
  .audience{padding-bottom:65px;}
  .how{padding-top:65px;padding-bottom:65px;}
  .local{padding-top:65px;padding-bottom:65px;}
  .community{padding-top:65px;}
  .testimonials{padding-bottom:65px;}
  .advice{padding-top:65px;padding-bottom:65px;}
  .faq{padding-top:65px;}
}
.section-head{
  max-width:660px;
  margin:0 auto 60px;
  text-align:center;
}
.section-head h2{
  font-size:clamp(2rem, 3.6vw, 2.7rem);
  line-height:1.15;
  color:var(--harbor);
}
.section-head p{
  color:var(--harbor-soft);
  font-size:1.06rem;
  margin-top:16px;
  line-height:1.6;
}

/* =========================================================================
   PAGE-SPECIFIC — HOMEPAGE ONLY
   ========================================================================= */

/* ===== HERO — full-bleed image behind everything, no separate nav bar.
   A logo + CTA row sits at the top of the hero; the headline block sits
   at the bottom. The hero fills the full viewport on every breakpoint so
   it's all visible with no scroll. ===== */
.hero{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
  padding:2rem 0 2.5rem;
  min-height:100vh;
  min-height:100dvh;
  background:var(--harbor); /* shows briefly while the photo loads */
}
.hero-bg{position:absolute;inset:0;z-index:0;}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 22%;}
.hero-bottom-scrim{
  position:absolute;
  left:0; right:0; bottom:0;
  height:65%;
  background:linear-gradient(to bottom, rgba(10,32,44,0) 0%, rgba(10,32,44,0.38) 45%, rgba(10,32,44,0.78) 100%);
  z-index:1;
  pointer-events:none;
}
.hero-inner{position:relative;z-index:2;width:100%;}
.hero-content{max-width:560px;}
.hero h1{
  font-size:clamp(1.9rem, 4.4vw, 3.4rem);
  line-height:1.12;
  color:#fff;
  margin-bottom:14px;
}
.hero h1 em{font-style:italic;color:var(--coral);}
.hero p.lead{
  font-size:clamp(1.05rem, 1.6vw, 1.22rem);
  font-weight:600;
  line-height:1.55;
  color:rgba(255,248,245,0.95);
  max-width:440px;
  margin-bottom:22px;
}
.hero-actions{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:20px;
}

/* ===== FEATURES (Why Curvalicious) ===== */
.features{background:var(--cream);}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.feature-card{
  background:#fff;
  border-radius:32px;
  overflow:hidden;
  position:relative;
  box-shadow:0 10px 24px rgba(23,65,88,0.06);
  transition:transform .3s ease, box-shadow .3s ease;
}
.feature-card:hover{transform:translateY(-8px);box-shadow:0 22px 40px rgba(23,65,88,0.14);}
.feature-photo{width:100%;height:190px;overflow:hidden;}
.feature-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.feature-body{padding:28px 32px 34px;}
.feature-card h3{font-size:1.32rem;margin-bottom:12px;color:var(--harbor);}
.feature-card p{color:var(--harbor-soft);line-height:1.6;font-size:0.98rem;}
.feature-dots{display:none;}
.feature-swipe-hint{display:none;}

/* ===== AUDIENCE (Come As You Are) ===== */
.audience{background:var(--blush);}
.audience-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.audience-card{
  position:relative;
  border-radius:26px;
  overflow:hidden;
  aspect-ratio:3/4;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:24px 22px;
  text-align:left;
  color:#fff;
  box-shadow:0 10px 26px rgba(23,65,88,0.06);
  transition:transform .3s ease, box-shadow .3s ease;
}
.audience-card:hover{transform:translateY(-6px);box-shadow:0 18px 32px rgba(23,65,88,0.14);}
.audience-card .audience-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.audience-card .audience-photo-mobile{display:none;}
.audience-card::after{
  content:'';
  position:absolute;left:0;right:0;bottom:0;height:65%;z-index:1;
  background:linear-gradient(to top, rgba(10,32,44,0.85) 0%, rgba(10,32,44,0.5) 55%, rgba(10,32,44,0) 100%);
}
.audience-card > *{position:relative;z-index:2;}
.audience-card h3{font-size:1.05rem;color:#fff;margin-bottom:6px;text-shadow:0 2px 12px rgba(6,18,25,0.4);}
.audience-card p{color:rgba(255,248,245,0.92);font-size:0.86rem;line-height:1.5;text-shadow:0 1px 8px rgba(6,18,25,0.3);}
.audience-note{
  text-align:center;
  margin-top:44px;
  font-family:'Fraunces';
  font-style:italic;
  font-size:1.3rem;
  color:var(--coral-deep);
}

/* ===== HOW IT WORKS — connection ribbon (4 steps) ===== */
.how{background:linear-gradient(180deg, var(--blush) 0%, var(--cream) 100%);position:relative;}
.ribbon-wrap{position:relative;max-width:1080px;margin:0 auto;}
.ribbon-line{
  position:absolute;
  top:35px;
  left:9%; right:9%;
  height:0;
  border-top:2px dashed var(--coral);
  opacity:0.55;
  z-index:0;
}
.ribbon-steps{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.ribbon-step{text-align:center;padding:0 10px;}
.ribbon-badge{
  width:70px;height:70px;
  border-radius:50%;
  background:#fff;
  border:3px solid var(--coral);
  display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces';font-style:italic;font-weight:600;
  font-size:1.5rem;
  color:var(--coral-deep);
  margin:0 auto 20px;
  box-shadow:0 12px 24px rgba(222,95,90,0.18);
}
.ribbon-step h3{font-size:1.1rem;margin-bottom:8px;color:var(--harbor);}
.ribbon-step p{color:var(--harbor-soft);font-size:0.92rem;line-height:1.55;max-width:220px;margin:0 auto;}
.how-cta{text-align:center;margin-top:56px;}

/* ===== COMMUNITY ===== */
.community{background:var(--cream);}
.community-inner{
  display:grid;
  grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr);
  gap:60px;
  align-items:center;
}
.community-copy{min-width:0;}
.community-visual{
  background:#fff;
  border-radius:28px;
  padding:8px 28px;
  box-shadow:0 20px 44px rgba(23,65,88,0.1);
  min-width:0;
}
.community-feed-item{
  background:none;
  border:none;
  border-bottom:1px solid var(--line);
  border-radius:0;
  padding:20px 0;
  margin-bottom:0;
  display:flex;
  gap:14px;
  align-items:center;
}
.community-feed-item:last-child{border-bottom:none;}
.feed-avatar{
  width:40px;height:40px;border-radius:50%;
  background:var(--coral-deep);
  display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces';font-weight:600;color:#fff;
  flex-shrink:0;font-size:0.9rem;
}
.community-feed-item strong{display:block;font-size:0.9rem;margin-bottom:3px;color:var(--harbor);}
.community-feed-item span{font-size:0.85rem;color:var(--harbor-soft);line-height:1.5;}
.community-copy h2{margin-bottom:20px;}
.community-copy p{color:var(--harbor-soft);font-size:1.06rem;line-height:1.65;margin-bottom:16px;}

/* ===== SOCIAL PROOF / TESTIMONIALS ===== */
.testimonials{background:var(--harbor);color:var(--cream);}
.testimonials .section-head h2{color:#fff;}
.testimonials .section-head p{color:rgba(255,248,245,0.7);}
.rating-row{display:flex;justify-content:center;gap:36px;margin-bottom:40px;flex-wrap:wrap;}
.rating-item{text-align:center;}
.rating-item .num{font-family:'Fraunces';font-size:1.1rem;font-weight:600;color:var(--peach);}
.rating-item .lbl{font-size:0.78rem;color:rgba(255,248,245,0.65);font-weight:600;}
.t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.t-card{
  background:rgba(255,255,255,0.06);
  border:1px dashed rgba(255,255,255,0.25);
  border-radius:28px;
  padding:34px 30px;
  position:relative;
}
.t-placeholder-tag{
  position:absolute;
  top:14px; right:14px;
  font-size:0.68rem;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:rgba(255,248,245,0.55);
  background:rgba(255,255,255,0.08);
  padding:4px 10px;
  border-radius:100px;
}
.t-quote{
  font-family:'Fraunces';font-style:italic;
  font-size:2.4rem;
  color:var(--coral);
  line-height:0.4;
  margin-bottom:18px;
  display:block;
}
.t-card p.quote-text{
  font-family:'Quicksand';
  font-size:0.98rem;
  line-height:1.65;
  color:rgba(255,248,245,0.85);
  margin-bottom:26px;
}
.t-person{display:flex;align-items:center;gap:12px;}
.t-avatar{
  width:46px;height:46px;border-radius:50%;
  background:var(--coral);
  display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces';font-weight:600;color:#fff;
  flex-shrink:0;
}
.t-person strong{display:block;font-size:0.95rem;}
.t-person span{font-size:0.82rem;color:rgba(255,248,245,0.55);}

/* ----- Testimonials — "spotlight" variant: one story at a time, swipeable.
   (kept .t-grid/.t-card above intact so we can revert to the 3-up cards.) ----- */
.t-spotlight{position:relative;}
.t-spot-track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  margin:0 -8px;
}
.t-spot-track::-webkit-scrollbar{display:none;}
.t-spot-slide{
  flex:0 0 100%;
  scroll-snap-align:center;
  display:flex;
  justify-content:center;
}
.t-spot-inner{
  width:100%;
  max-width:640px;
  text-align:center;
  padding:0 28px;
}
.t-spot-slide .t-placeholder-tag{position:static;display:inline-block;margin-bottom:22px;}
.t-spot-avatar{
  width:64px;height:64px;border-radius:50%;
  background:var(--coral);color:#fff;
  font-family:'Fraunces';font-weight:600;font-size:1.3rem;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 20px;
}
.t-spot-stars{color:var(--gold);font-size:1.1rem;letter-spacing:3px;margin-bottom:20px;}
.t-spot-inner p{
  font-family:'Fraunces';font-style:italic;
  font-size:clamp(1.2rem, 2.4vw, 1.5rem);
  line-height:1.5;color:#fff;margin-bottom:22px;
}
.t-spot-name{font-size:0.95rem;font-weight:700;color:var(--peach);}
.t-spot-name span{color:rgba(255,248,245,0.55);font-weight:600;}
.t-spot-dots{display:flex;justify-content:center;gap:9px;margin-top:36px;}
.t-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,0.28);}
.t-dot.active{background:var(--peach);width:20px;border-radius:4px;}
.t-swipe-hint{
  text-align:center;margin-top:14px;font-size:0.8rem;font-weight:600;
  color:rgba(255,248,245,0.5);
}
@media (min-width:769px){
  .t-swipe-hint{display:none;} /* the hint is a mobile-gesture cue only */
}

/* ===== DATING ADVICE (homepage teaser grid — links out to /articles) ===== */
.advice{background:var(--blush);}
.advice-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.advice-card{
  background:#fff;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 10px 24px rgba(23,65,88,0.06);
  transition:transform .3s ease, box-shadow .3s ease;
}
.advice-card:hover{transform:translateY(-6px);box-shadow:0 18px 30px rgba(23,65,88,0.12);}
.advice-thumb{
  height:120px;
  background:linear-gradient(135deg, var(--coral) 0%, var(--gold) 100%);
  display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces';font-style:italic;color:#fff;font-size:1.6rem;
  overflow:hidden;
}
.advice-thumb img{width:100%;height:100%;object-fit:cover;}
.advice-thumb img.crop-top{object-position:center top;}
.advice-body{padding:22px 22px 26px;}
.advice-tag{font-size:0.72rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--coral-deep);margin-bottom:10px;display:block;}
.advice-card h3{font-size:1.02rem;line-height:1.4;color:var(--harbor);}
.advice-more{text-align:center;margin-top:48px;}

/* ===== LOCAL DATING ===== */
.local{background:var(--cream);}
.local-inner{
  background:url('img/local-near-you.webp') center 15%/cover no-repeat;
  border-radius:44px;
  padding:70px 60px;
  text-align:center;
  position:relative;
  overflow:hidden;
  color:var(--cream);
}
.local-inner::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(10,32,44,0.55) 0%, rgba(15,46,63,0.45) 55%, rgba(15,46,63,0.24) 100%);
}
.local-inner h2{color:#fff;position:relative;z-index:1;margin-bottom:10px;text-shadow:0 2px 16px rgba(6,18,25,0.4);}
.local-inner p{color:rgba(255,248,245,0.95);max-width:520px;margin:0 auto 36px;position:relative;z-index:1;font-size:1.05rem;line-height:1.6;text-shadow:0 1px 10px rgba(6,18,25,0.35);}
.local-inner .btn-white{position:relative;z-index:1;color:var(--harbor);padding:13px 34px;}

/* ===== HOMEPAGE FAQ SECTION ===== */
.faq{background:var(--cream);}
.faq-list{max-width:760px;margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line);padding:8px 0;}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 4px;
  font-family:'Fraunces';
  font-weight:500;
  font-size:1.08rem;
  color:var(--harbor);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:'+';
  font-size:1.5rem;
  color:var(--coral-deep);
  flex-shrink:0;
  transition:transform .25s ease;
}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item p{color:var(--harbor-soft);line-height:1.65;padding:0 4px 20px;max-width:640px;}

/* =========================================================================
   PAGE-SPECIFIC — ARTICLES LANDING (site/articles.html)
   ========================================================================= */
.articles-section{padding:16px 0 110px;}
/* ----- Browse by Topic — pill row of the topic taxonomy, sits above the
   article grid. Pills are visual/navigational (this is a static build, so
   they don't filter) — same pill language as .eyebrow, scaled up. ----- */
.topics-head{margin:0 0 24px;}
.topics-head h2{font-size:1.5rem;margin-bottom:6px;}
.topics-head p{color:var(--harbor-soft);font-size:0.98rem;max-width:560px;}
.topic-pills{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 44px;}
/* Visually-hidden radio inputs driving the filter — kept in the tab order and
   focusable (not display:none) so keyboard/screen-reader users can still
   select a topic pill. */
.cat-filter-input{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.topic-pill{
  display:inline-flex;align-items:center;gap:6px;
  font-weight:700;font-size:0.88rem;
  color:var(--coral-deep);
  background:#fff;
  border:1.5px solid rgba(222,95,90,0.28);
  padding:9px 20px;border-radius:100px;
  box-shadow:0 6px 16px rgba(23,65,88,0.05);
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.topic-pill:hover{border-color:var(--coral-deep);}
.topic-pill-count{font-size:0.85em;opacity:0.65;}
.topic-pill.is-active,
.cat-filter-input:checked + .topic-pill{background:var(--coral-deep);color:#fff;border-color:var(--coral-deep);}
.cat-filter-input:checked + .topic-pill .topic-pill-count{opacity:0.85;}
.cat-filter-input:focus-visible + .topic-pill{outline:2px solid var(--coral-deep);outline-offset:2px;}

/* Filter the grid: when a specific topic's radio is checked, hide every card
   whose data-cat doesn't match. The "All" pill has no rule of its own, so
   checking it leaves every card visible. */
.articles-section:has(#filter-curvy-dating:checked) .article-card:not([data-cat="curvy-dating"]),
.articles-section:has(#filter-plus-size-dating:checked) .article-card:not([data-cat="plus-size-dating"]),
.articles-section:has(#filter-bbw-dating:checked) .article-card:not([data-cat="bbw-dating"]),
.articles-section:has(#filter-chubby-dating:checked) .article-card:not([data-cat="chubby-dating"]),
.articles-section:has(#filter-chubby-women-dating:checked) .article-card:not([data-cat="chubby-women-dating"]),
.articles-section:has(#filter-chubby-men-dating:checked) .article-card:not([data-cat="chubby-men-dating"]),
.articles-section:has(#filter-dating-profiles:checked) .article-card:not([data-cat="dating-profiles"]),
.articles-section:has(#filter-confidence:checked) .article-card:not([data-cat="confidence"]),
.articles-section:has(#filter-messaging:checked) .article-card:not([data-cat="messaging"]),
.articles-section:has(#filter-first-dates:checked) .article-card:not([data-cat="first-dates"]),
.articles-section:has(#filter-relationships:checked) .article-card:not([data-cat="relationships"]),
.articles-section:has(#filter-safety:checked) .article-card:not([data-cat="safety"]){
  display:none;
}
.article-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:28px;}
.article-card{
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 14px 34px rgba(23,65,88,0.08);
  transition:transform .3s ease, box-shadow .3s ease;
}
.article-card:hover{transform:translateY(-6px);box-shadow:0 22px 40px rgba(23,65,88,0.14);}
.card-thumb{
  position:relative;
  aspect-ratio:16/9;
  background:linear-gradient(150deg, var(--coral) 0%, var(--gold) 100%);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  overflow:hidden;
}
.card-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.card-thumb span{
  font-family:'Fraunces';font-style:italic;font-weight:600;color:#fff;
  font-size:1.15rem;line-height:1.3;text-align:center;
}
.card-body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1;}
.card-tag{font-size:0.72rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--coral-deep);margin-bottom:10px;display:block;}
.card-body h2{font-size:1.2rem;line-height:1.3;margin-bottom:10px;}
.card-body p{color:var(--harbor-soft);font-size:0.92rem;line-height:1.6;margin-bottom:16px;}
.card-byline{font-size:0.82rem;color:var(--harbor-soft);font-weight:600;margin-top:auto;}
.card-byline .dot{margin:0 6px;opacity:0.6;}

/* =========================================================================
   PAGE-SPECIFIC — ARTICLE DETAIL (site/articles/<slug>.html)
   ========================================================================= */
.article-hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;color:var(--harbor-soft);font-size:0.92rem;font-weight:600;}
.article-hero-meta .dot{opacity:0.6;}
.article-hero-img{
  max-width:720px;margin:0 auto 8px;
  border-radius:24px;overflow:hidden;
  box-shadow:0 16px 34px rgba(23,65,88,0.12);
}
.article-hero-img img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;}
/* Placeholder variant — used when an article hero photo hasn't been sourced
   yet, so the page still reads as finished rather than broken. Matches the
   .card-thumb fallback treatment used on the articles-landing grid. */
.article-hero-img.is-placeholder{
  aspect-ratio:16/9;
  background:linear-gradient(150deg, var(--coral) 0%, var(--gold) 100%);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
}
.article-hero-img.is-placeholder span{
  font-family:'Fraunces';font-style:italic;font-weight:600;color:#fff;
  font-size:1.25rem;line-height:1.4;text-align:center;
}
@media (max-width:520px){
  .article-hero-img{border-radius:20px;}
  .article-hero-img img{aspect-ratio:4/3;}
  .article-hero-img.is-placeholder{aspect-ratio:4/3;}
}
.article-section{padding:0 0 20px;}
.article-body{max-width:700px;margin:0 auto;padding:56px 0 0;}
.article-body > p{font-size:1.05rem;line-height:1.75;color:var(--harbor-soft);margin-bottom:22px;}
.article-body h2{font-size:1.6rem;line-height:1.28;margin:48px 0 18px;}
.article-body h3{font-family:'Quicksand';font-weight:700;font-size:1.08rem;color:var(--harbor);margin:26px 0 10px;}

.quick-answer{
  background:#fff;border-left:4px solid var(--coral-deep);border-radius:4px 20px 20px 4px;
  padding:24px 28px;margin:6px 0 40px;font-size:1.02rem;line-height:1.65;color:var(--harbor);
  box-shadow:0 14px 34px rgba(23,65,88,0.06);
}
.quick-answer strong{color:var(--coral-deep);}

.example-bio{
  background:#fff;border-radius:22px;padding:34px 32px 28px;margin:12px 0 44px;
  box-shadow:0 14px 34px rgba(23,65,88,0.08);position:relative;
}
.example-bio-label{display:block;font-size:0.76rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--coral-deep);margin-bottom:16px;}
.example-bio p{font-family:'Fraunces';font-style:italic;font-size:1.1rem;line-height:1.7;color:var(--harbor);}

.dos-donts{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:8px 0 44px;}
.do-card,.dont-card{border-radius:22px;padding:28px 26px;}
.do-card{background:rgba(241,124,120,0.09);border:1px solid rgba(241,124,120,0.25);}
.dont-card{background:rgba(23,65,88,0.04);border:1px solid var(--line);}
.do-card h3,.dont-card h3{margin:0 0 16px;font-size:1.05rem;}
.do-card h3{color:var(--coral-deep);}
.dont-card h3{color:var(--harbor-soft);}
.do-card ul,.dont-card ul{list-style:none;}
.do-card li,.dont-card li{font-size:0.95rem;line-height:1.6;color:var(--harbor-soft);margin-bottom:13px;padding-left:26px;position:relative;}
.do-card li::before{content:'✓';position:absolute;left:0;top:0;color:var(--coral-deep);font-weight:700;}
.dont-card li::before{content:'✕';position:absolute;left:0;top:0;color:var(--harbor-soft);font-weight:700;}

/* in-article FAQ block — named .faq-block (not .faq) to avoid colliding
   with the homepage's full-width .faq SECTION, which is a different component */
.faq-block{margin:8px 0 8px;}
.faq-block details{background:#fff;border-radius:18px;padding:0 26px;margin-bottom:14px;box-shadow:0 10px 24px rgba(23,65,88,0.06);}
.faq-block summary{font-family:'Fraunces';font-weight:600;font-size:1.06rem;padding:20px 30px 20px 0;cursor:pointer;list-style:none;position:relative;}
.faq-block summary::-webkit-details-marker{display:none;}
.faq-block summary::after{content:'+';position:absolute;right:0;top:16px;font-size:1.5rem;color:var(--coral-deep);}
.faq-block details[open] summary::after{content:'\2212';}
.faq-block details p{padding:0 0 22px;margin:0;color:var(--harbor-soft);font-size:0.98rem;line-height:1.65;}

.tag-row{display:flex;gap:10px;flex-wrap:wrap;margin:44px 0 0;}
.tag-chip{background:var(--blush);color:var(--coral-deep);font-size:0.8rem;font-weight:700;padding:8px 16px;border-radius:100px;}
.article-footer-spacer{height:56px;}

/* ----- Related articles — 2-4 cross-links at the bottom of every article,
   same card language as the articles-landing grid, scaled down. ----- */
.related-section{max-width:820px;margin:16px auto 0;}
.related-section h2{font-size:1.3rem;margin-bottom:22px;}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:20px;}
.related-card{
  display:flex;flex-direction:column;
  background:#fff;border-radius:22px;overflow:hidden;
  box-shadow:0 10px 24px rgba(23,65,88,0.07);
  transition:transform .25s ease, box-shadow .25s ease;
}
.related-card:hover{transform:translateY(-4px);box-shadow:0 16px 30px rgba(23,65,88,0.12);}
.related-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;}
.related-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.related-thumb.is-placeholder{
  background:linear-gradient(150deg, var(--coral) 0%, var(--gold) 100%);
  display:flex;align-items:center;justify-content:center;padding:12px;
}
.related-thumb.is-placeholder span{
  font-family:'Fraunces';font-style:italic;font-weight:600;color:#fff;
  font-size:0.82rem;line-height:1.3;text-align:center;
}
.related-body{padding:16px 18px 20px;}
.related-tag{font-size:0.68rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--coral-deep);margin-bottom:6px;display:block;}
.related-card h3{font-size:0.98rem;line-height:1.35;color:var(--harbor);}

/* =========================================================================
   PAGE-SPECIFIC — FEATURES (site/features.html)
   ========================================================================= */
/* ----- Centred page hero — every section below the hero uses .section-head,
   which is centred by default, but the shared .page-hero (borrowed from the
   articles landing page) is left-aligned. This modifier centres the
   breadcrumb, eyebrow, h1, hero photo and intro paragraph so the top of the
   page reads consistently with the rest of it. ----- */
.page-hero--centered .breadcrumb{justify-content:center;}
.page-hero--centered .eyebrow{margin:0 auto 18px;width:fit-content;}
.page-hero--centered h1{text-align:center;}
.page-hero--centered .page-hero-img{margin-left:auto;margin-right:auto;}
.page-hero--centered > .wrap > p{text-align:center;margin-left:auto;margin-right:auto;}

/* ----- Profiles & Matching — reuses the homepage's .feature-grid/.feature-card
   (including its mobile swipe-carousel behaviour) but with 2 cards instead of
   3, so the desktop grid is narrowed and centred via this ID scope rather
   than a new modifier class. ----- */
#profiles-matching .feature-grid{grid-template-columns:repeat(2,1fr);max-width:760px;margin:0 auto;}

/* ----- Capability cards — simple text cards for a 2-up "how it works" style
   grid (Messaging & Conversations), reusing the .ribbon-badge numbered
   circle from the homepage's "How It Works" section. ----- */
.capability-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;max-width:820px;margin:0 auto;}
.capability-card{
  background:#fff;
  border-radius:28px;
  padding:36px 32px;
  box-shadow:0 14px 34px rgba(23,65,88,0.08);
}
.capability-card .ribbon-badge{margin:0 0 18px;width:56px;height:56px;font-size:1.2rem;}
.capability-card h3{font-size:1.15rem;margin-bottom:10px;color:var(--harbor);}
.capability-card p{color:var(--harbor-soft);line-height:1.6;font-size:0.96rem;}

/* ----- Free vs VIP comparison — reuses the article template's .dos-donts
   pair (Free = neutral .dont-card, VIP = highlighted .do-card) since both
   columns here are positive lists, this scope swaps the "dont" card's ✕
   icon for a ✓ to match. ----- */
.plan-compare .dont-card li::before{content:'✓';color:var(--harbor-soft);}

/* ----- CTA standout — the compact CTA card normally sits on a light page
   background, but on this page it directly follows the dark-navy
   testimonials section. Left as-is, the two blended into one long navy
   block with no visible seam. This modifier gives the section some
   breathing room above (revealing the page's cream background) and swaps
   the card itself to coral-deep so it reads as its own distinct block. ----- */
.cta-standout{padding-top:72px;}
.cta-standout .cta-inner{background:var(--coral-deep);}
.cta-standout .cta-avatars img{border-color:var(--coral-deep);}
@media (max-width:860px){
  .cta-standout .cta-inner{background:var(--coral-deep);}
  .cta-standout{padding-top:48px;}
}

/* ----- Section rhythm — this page stacks 8 sections between the hero and
   the CTA, several sharing the same background colour (cream or blush) back
   to back. At the site's default 110px top+bottom section padding, two
   same-colour sections in a row left ~220px of unbroken blank space with no
   visual cue that there was more to scroll to. Tightened here, desktop only
   (mobile already drops to 52px via the sitewide breakpoint, which reads
   fine at that scale). ----- */
@media (min-width:861px){
  #profiles-matching{padding:56px 0 72px;}
  #discovery{padding:72px 0;}
  #messaging{padding:72px 0;}
  #local{padding:56px 0;}
  #community{padding:72px 0;}
  #privacy{padding:64px 0;}
  #membership{padding:64px 0 72px;}
  #stories{padding:80px 0;}
}

@media (max-width:640px){
  .capability-grid{grid-template-columns:1fr;}
}

/* =========================================================================
   PAGE-SPECIFIC — PRICING (site/pricing.html)
   ========================================================================= */
.pricing-section{
  padding:16px 0 90px;
  /* VIP+ palette — scoped to this page only. Deliberately the "opposite" of
     VIP's light-white-plus-coral card: dark instead of light, and staying in
     the pink/peach family (a dark pinky-peach gradient) rather than the
     harbor-navy treatment this page shipped with originally. */
  --rose-a:#8F2F4C;      /* gradient start — deep pinky berry */
  --rose-b:#C97A52;      /* gradient end — dark warm peach/terracotta */
  --rose-bright:#FF9CB0; /* bright pink accent — border, checkmarks */
  --rose-cta-a:#FF8FA8;  /* CTA gradient — pink */
  --rose-cta-b:#FFC29E;  /* CTA gradient — peach */
}

/* ----- Tier cards — VIP (light) + VIP+ (dark pinky-peach, elevated). The
   scaffold brand assets that shipped with this page pattern (build-assets/
   pricing/assets/*.svg) are a generic ink/cream lockup, not Curvalicious's
   palette, so each tier name renders as a styled heading in the brand's own
   Fraunces display font + colour instead of importing an off-brand logo
   mark. Both cards use display:flex so a shorter card's CTA still pins to
   the same bottom line as the taller one (see .tier-cta margin-top below),
   and the grid stretches both cards to equal height regardless of content
   length. ----- */
.pricing-tiers{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  max-width:980px;
  margin:0 auto 40px;
  align-items:stretch;
  min-width:0;
}
.tier-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  border-radius:36px;
  padding:44px 40px 40px;
  box-shadow:0 20px 44px rgba(23,65,88,0.1);
}
.tier-card--light{background:#fff;border-top:5px solid var(--coral-deep);}
.tier-card--dark{
  background:linear-gradient(155deg, var(--rose-a) 0%, var(--rose-b) 100%);
  color:var(--cream);
  border-top:5px solid var(--rose-bright);
}
.tier-card-head{margin-bottom:14px;}
.tier-name{font-size:1.9rem;margin-bottom:4px;}
.tier-card--light .tier-name{color:var(--harbor);}
.tier-card--dark .tier-name{color:#fff;}
.tier-tagline{font-family:'Fraunces';font-style:italic;font-weight:500;font-size:1.05rem;}
.tier-card--light .tier-tagline{color:var(--coral-deep);}
.tier-card--dark .tier-tagline{color:var(--peach);}
.tier-description{font-size:0.98rem;line-height:1.65;margin:18px 0 22px;}
.tier-card--light .tier-description{color:var(--harbor-soft);}
.tier-card--dark .tier-description{color:rgba(255,248,245,0.85);}
.tier-features{list-style:none;margin-bottom:28px;}
.tier-features li{font-size:0.94rem;line-height:1.5;padding-left:26px;position:relative;margin-bottom:11px;}
.tier-features li::before{content:'✓';position:absolute;left:0;top:0;font-weight:700;}
.tier-card--light .tier-features li::before{color:var(--coral-deep);}
.tier-card--dark .tier-features li::before{color:var(--rose-bright);}
.tier-card--light .tier-features li{color:var(--harbor-soft);}
.tier-card--dark .tier-features li{color:rgba(255,248,245,0.92);}

/* ----- Pricing display — grouped by currency (not by duration): prime
   (USD/GBP) large, secondary (EUR) medium, the remaining 12 currencies in a
   small always-visible grid. No toggle/collapse — every currency ships on
   every load. ----- */
.tier-price-block{border-top:1px solid rgba(23,65,88,0.1);padding-top:24px;margin-bottom:28px;}
.tier-card--dark .tier-price-block{border-top-color:rgba(255,255,255,0.14);}
.tier-price-prime{margin-bottom:10px;}
.tier-price-row{display:flex;align-items:baseline;gap:14px;padding:9px 0;}
.tier-price-row--prime{font-size:1.05rem;}
.tier-price-cur{font-weight:700;font-size:0.78rem;letter-spacing:0.04em;text-transform:uppercase;width:38px;flex-shrink:0;}
.tier-card--light .tier-price-cur{color:var(--harbor-soft);}
.tier-card--dark .tier-price-cur{color:rgba(255,248,245,0.6);}
.tier-price-amt{font-family:'Fraunces';font-weight:600;}
.tier-price-row--prime .tier-price-amt{font-size:1.3rem;}
.tier-price-secondary .tier-price-amt{font-size:1.05rem;}
.tier-card--light .tier-price-amt{color:var(--harbor);}
.tier-card--dark .tier-price-amt{color:#fff;}
.tier-price-unit{font-family:'Quicksand';font-weight:600;font-size:0.72em;opacity:0.6;margin-left:2px;margin-right:14px;}
.tier-price-secondary{padding-top:6px;border-top:1px dashed rgba(23,65,88,0.12);margin-bottom:16px;}
.tier-card--dark .tier-price-secondary{border-top-color:rgba(255,255,255,0.14);}
/* ----- Other currencies — collapsed by default behind a native <details>
   disclosure, so the card isn't a full wall of currency rows. No JS: the
   browser's own expand/collapse plus a CSS-rotated chevron. ----- */
.tier-price-others summary.tier-price-others-label{
  display:flex;align-items:center;gap:6px;
  cursor:pointer;
  list-style:none;
  -webkit-tap-highlight-color:transparent;
}
.tier-price-others summary.tier-price-others-label::-webkit-details-marker{display:none;}
.tier-price-others-label{font-size:0.72rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;margin-bottom:0;}
.tier-card--light .tier-price-others-label{color:var(--harbor-soft);}
.tier-card--dark .tier-price-others-label{color:rgba(255,248,245,0.7);}
.tier-price-others-chevron{
  width:7px;height:7px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  margin-top:-3px;
  transition:transform .2s ease;
  flex-shrink:0;
}
.tier-price-others[open] .tier-price-others-chevron{transform:rotate(-135deg);margin-top:2px;}
.tier-price-others-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;margin-top:14px;}
.tier-price-other-row{display:flex;justify-content:space-between;gap:8px;font-size:0.78rem;padding:4px 0;}
.tier-card--light .tier-price-other-row{color:var(--harbor-soft);}
.tier-card--dark .tier-price-other-row{color:rgba(255,248,245,0.72);}
.tier-price-other-row .tier-price-cur{width:auto;}

.tier-cta{display:block;width:100%;text-align:center;margin-top:auto;}
/* "Cute" VIP+ CTA — a bright pink/peach candy-gradient pill instead of the
   plain white button, matching the card's new pinky-peach identity. */
.tier-card--dark .tier-cta{
  background:linear-gradient(120deg, var(--rose-cta-a) 0%, var(--rose-cta-b) 100%);
  color:var(--rose-a);
  box-shadow:0 14px 28px rgba(255,143,168,0.4);
}
.tier-card--dark .tier-cta:hover{box-shadow:0 18px 34px rgba(255,143,168,0.55);}

.length-note{
  max-width:560px;margin:0 auto 32px;text-align:center;
  font-size:0.9rem;color:var(--harbor-soft);
}
.trust-strip{
  display:flex;justify-content:center;gap:28px;flex-wrap:wrap;
  font-size:0.88rem;font-weight:600;color:var(--harbor-soft);
}
.trust-strip span{display:inline-flex;align-items:center;gap:7px;}
.trust-icon{width:16px;height:16px;flex-shrink:0;color:var(--coral-deep);}

/* ----- Mobile plan toggle — hidden on desktop (both cards sit side by
   side there). On mobile it's a pair of anchor links to the cards' own
   #vip / #vip-plus ids, so tapping one smoothly scrolls the swipeable
   track below to that card — no JS needed. ----- */
.tier-toggle{
  display:none;
  gap:4px;
  max-width:300px;
  margin:0 auto 24px;
  background:var(--blush);
  border-radius:100px;
  padding:5px;
}
.tier-toggle-btn{
  flex:1;
  text-align:center;
  padding:10px 0;
  border-radius:100px;
  font-weight:700;
  font-size:0.9rem;
  color:var(--harbor-soft);
}
.tier-toggle-btn.is-active{
  background:#fff;
  color:var(--coral-deep);
  box-shadow:0 6px 14px rgba(23,65,88,0.14);
}

@media (max-width:860px){
  .tier-toggle{display:flex;}
  /* Swipeable card-by-card carousel instead of a stacked scroll. Each card
     is sized to exactly fill the visible track width, so "start" snapping
     always lands it filling the view edge-to-edge (matching the same
     .wrap inset either card sits in) — no centering-math drift between
     the two cards. */
  .pricing-tiers{
    display:flex;
    grid-template-columns:unset;
    max-width:100%;
    gap:16px;
    margin:0 0 8px;
    padding:0;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .pricing-tiers::-webkit-scrollbar{display:none;}
  .tier-card{
    flex:0 0 100%;
    scroll-snap-align:start;
    min-width:0;
  }
  .tier-price-others-grid{grid-template-columns:1fr;}
}
@media (max-width:520px){
  .tier-card{padding:32px 24px 28px;}
  .tier-price-row{flex-wrap:wrap;gap:4px 14px;}
  .tier-price-other-row{flex-wrap:wrap;}
}

/* =========================================================================
   PAGE-SPECIFIC — SAFETY (site/safety.html)
   ========================================================================= */
/* ----- Quick-nav — jump links to each category, same pill treatment as
   the pricing-page toggle. Wraps on narrow screens rather than scrolling,
   since there are only 5 short labels. ----- */
.safety-quicknav{padding:4px 0 8px;}
.safety-quicknav-inner{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  max-width:920px;margin:0 auto;
}
.safety-quicknav a{
  padding:9px 18px;border-radius:100px;
  background:var(--blush);color:var(--harbor);
  font-size:0.85rem;font-weight:700;white-space:nowrap;
  transition:background .2s ease, color .2s ease;
}
.safety-quicknav a:hover{background:var(--coral-deep);color:#fff;}

.safety-section{padding:24px 0 100px;}

/* ----- Category sections — icon + heading + one-line description, then a
   responsive grid of feature cards. Hairline divider between categories,
   none above the first. ----- */
.safety-category{max-width:1080px;margin:0 auto;padding:48px 0;border-top:1px solid var(--line);}
.safety-category:first-child{border-top:none;padding-top:8px;}
.safety-category-head{display:flex;gap:18px;align-items:flex-start;margin-bottom:32px;max-width:720px;}
.safety-category-icon{
  width:52px;height:52px;flex-shrink:0;border-radius:50%;
  background:var(--blush);color:var(--coral-deep);
  display:flex;align-items:center;justify-content:center;
}
.safety-category-icon-svg{width:24px;height:24px;}
.safety-category-head h2{font-size:1.5rem;color:var(--harbor);margin-bottom:6px;}
.safety-category-desc{color:var(--harbor-soft);font-size:0.98rem;}

/* Swiping row instead of a stacked grid — five categories stacked as
   3-column grids made this page a very long scroll, so each category's
   cards now sit in a single horizontal, snap-scrolling row (peeking the
   next card) at every width, same swipe mechanics as the homepage's
   .feature-grid carousel. */
.safety-grid{
  display:flex;gap:22px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  margin:0 -4px;
  padding:4px 4px 14px;
}
.safety-grid::-webkit-scrollbar{display:none;}
.safety-card{
  flex:0 0 320px;
  scroll-snap-align:start;
  background:#fff;border-radius:26px;padding:30px 26px;
  box-shadow:0 12px 28px rgba(23,65,88,0.07);
}
.safety-card-icon{
  width:44px;height:44px;border-radius:50%;
  background:var(--blush);color:var(--coral-deep);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
}
.safety-card-icon-svg{width:20px;height:20px;}
.safety-card h3{font-size:1.06rem;color:var(--harbor);margin-bottom:10px;line-height:1.3;}
.safety-card-what{color:var(--harbor-soft);font-size:0.92rem;line-height:1.55;margin-bottom:14px;}
/* "Protects you" — the reassurance line, visually distinct (gold accent,
   left border) so it earns attention on a quick scan without competing
   with the coral CTA color used elsewhere on the site. */
.safety-card-protects{font-size:0.92rem;line-height:1.55;color:var(--harbor);padding-left:14px;border-left:3px solid var(--gold);}
.safety-protects-label{display:block;font-size:0.7rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:#96591A;margin-bottom:3px;}

@media (max-width:980px){
  .safety-card{flex:0 0 300px;}
}
@media (max-width:640px){
  .safety-card{flex:0 0 82%;padding:26px 22px;}
  .safety-category{padding:36px 0;}
  .safety-category-head{gap:14px;margin-bottom:24px;}
  .safety-category-icon{width:44px;height:44px;}
  .safety-category-icon-svg{width:20px;height:20px;}
  .safety-category-head h2{font-size:1.28rem;}
  .safety-quicknav a{padding:8px 14px;font-size:0.8rem;}
}

/* =========================================================================
   PAGE-SPECIFIC — COMMUNITY (site/community.html)
   ========================================================================= */
/* ----- Stat bar — three plain numbers/badges directly under the hero, no
   heading, light background. ----- */
.stat-bar{padding:8px 0 64px;}
.stat-bar-row{display:flex;justify-content:center;align-items:flex-start;gap:64px;flex-wrap:wrap;text-align:center;}
.stat-tile .num{font-family:'Fraunces';font-weight:600;font-size:2.2rem;color:var(--coral-deep);}
.stat-tile .lbl{font-size:0.85rem;font-weight:600;color:var(--harbor-soft);margin-top:4px;}

/* ----- Review ticker — dense, continuously auto-scrolling row of real
   member reviews. Light/cream band matching the rest of the page, with
   white cards (Option B from the review round — flagged that the earlier
   dark-navy-section + dark-navy-cards combo read as too heavy). Cards are
   duplicated in the HTML so the loop is seamless; pauses on hover/focus so
   a card can actually be read, and drops the animation entirely for
   reduced-motion. ----- */
.review-ticker-section{background:var(--cream);color:inherit;padding:90px 0;}
.review-ticker-section .eyebrow{background:var(--blush);color:var(--coral-deep);}
.review-ticker-section .eyebrow::before{background:var(--coral-deep);}
.review-ticker-section .section-head h2{color:var(--harbor);}
.review-ticker-section .section-head p{color:var(--harbor-soft);}
.review-ticker{
  overflow:hidden;
  margin:44px -20px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.review-track{
  display:flex;gap:20px;width:max-content;
  animation:reviewScroll 70s linear infinite;
  padding:0 20px;
}
.review-ticker:hover .review-track,
.review-ticker:focus-within .review-track{animation-play-state:paused;}
@keyframes reviewScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.review-card{
  flex:0 0 290px;
  background:#fff;
  border:none;
  border-radius:22px;
  padding:24px 22px;
  box-shadow:0 12px 28px rgba(23,65,88,0.08);
}
.review-card-top{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.review-avatar{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  background:var(--coral);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces';font-weight:600;font-size:1rem;
}
.review-stars{color:var(--gold);font-size:0.85rem;letter-spacing:2px;}
.review-card p.quote{font-size:0.92rem;line-height:1.55;color:var(--harbor);margin-bottom:14px;}
.review-name{font-size:0.85rem;font-weight:700;color:var(--coral-deep);}
.review-name span{font-weight:600;color:var(--harbor-soft);}
.review-verified{
  display:inline-flex;align-items:center;gap:3px;
  font-size:0.66rem;font-weight:700;letter-spacing:0.03em;text-transform:uppercase;
  color:var(--coral-deep);margin-left:8px;
}
.review-verified svg{width:11px;height:11px;}
@media (prefers-reduced-motion: reduce){
  .review-track{animation:none;overflow-x:auto;-webkit-overflow-scrolling:touch;}
}

/* ----- Member showcase — real member cards, photo + name/age/location +
   short bio, verified badge where the member is ID-verified. Grid on
   desktop/tablet, swipeable row on mobile like the homepage feature grid. ----- */
.member-showcase{padding:100px 0;}
.member-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px;}
.member-card{
  background:#fff;border-radius:22px;overflow:hidden;
  box-shadow:0 12px 28px rgba(23,65,88,0.07);
}
.member-card-photo{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--blush);}
.member-card-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.member-verified-badge{
  position:absolute;top:10px;right:10px;
  background:#fff;color:var(--coral-deep);
  border-radius:100px;padding:4px 10px;
  font-size:0.66rem;font-weight:700;letter-spacing:0.02em;text-transform:uppercase;
  display:flex;align-items:center;gap:4px;
  box-shadow:0 4px 10px rgba(0,0,0,0.15);
}
.member-verified-badge svg{width:11px;height:11px;}
.member-card-body{padding:18px 18px 22px;}
.member-card-name{font-family:'Fraunces';font-weight:600;font-size:1.04rem;color:var(--harbor);margin-bottom:3px;}
.member-card-meta{font-size:0.8rem;color:var(--harbor-soft);margin-bottom:10px;}
.member-card-bio{font-size:0.86rem;line-height:1.5;color:var(--harbor-soft);}

@media (max-width:980px){
  .member-grid{grid-template-columns:repeat(3,1fr);}
  .stat-bar-row{gap:40px;}
}
@media (max-width:860px){
  .member-grid{
    display:flex;grid-template-columns:unset;gap:14px;
    overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin:36px -20px 0;padding:0 20px 6px;
  }
  .member-grid::-webkit-scrollbar{display:none;}
  .member-card{flex:0 0 72%;scroll-snap-align:start;}
  .review-card{flex:0 0 78%;}
}
@media (max-width:640px){
  .stat-bar-row{gap:14px 30px;}
  .stat-tile .num{font-size:1.7rem;}
  .review-ticker-section{padding:64px 0;}
  .member-showcase{padding:64px 0;}
}

/* =========================================================================
   PAGE-SPECIFIC — COMPARISONS (site/comparisons.html, site/comparisons/*.html)
   ========================================================================= */
/* ----- Comparison grid — flat grid of "Curvalicious vs X" cards, each a
   single clickable link through to the (forthcoming) full comparison
   article. Photo on top, badge + title + short positioning blurb below,
   matching the site's existing white-card-on-cream pattern (member-card,
   capability-card). ----- */
.compare-section{padding:100px 0;}
.compare-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px;}
.compare-card{
  display:block;
  background:#fff;border-radius:22px;overflow:hidden;
  box-shadow:0 12px 28px rgba(23,65,88,0.07);
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.compare-card:hover,
.compare-card:focus-visible{
  transform:translateY(-4px);
  box-shadow:0 18px 36px rgba(23,65,88,0.13);
}
.compare-card-img{aspect-ratio:4/3;overflow:hidden;background:var(--blush);}
.compare-card-img img{width:100%;height:100%;object-fit:cover;display:block;}
.compare-card-body{padding:22px 22px 26px;}
.compare-badge{
  display:inline-block;
  background:var(--blush);color:var(--coral-deep);
  border-radius:100px;padding:4px 12px;margin-bottom:12px;
  font-size:0.68rem;font-weight:700;letter-spacing:0.03em;text-transform:uppercase;
}
.compare-card h3{font-family:'Fraunces';font-weight:600;font-size:1.08rem;color:var(--harbor);margin-bottom:8px;line-height:1.25;}
.compare-card p{font-size:0.88rem;line-height:1.55;color:var(--harbor-soft);margin-bottom:16px;}
.compare-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:0.85rem;font-weight:700;color:var(--coral-deep);
}
.compare-card:hover .compare-link span{transform:translateX(3px);}
.compare-link span{display:inline-block;transition:transform 0.2s ease;}

@media (max-width:980px){
  .compare-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .compare-section{padding:64px 0;}
  .compare-grid{grid-template-columns:1fr;}
}

/* ----- Comparison detail article (site/comparisons/*.html) — reuses the
   standard .article-body template (quick-answer, dos-donts, faq-block,
   related-section) with two additions specific to comparison articles: an
   "at a glance" side-by-side table, and a scoped modifier so the closing
   dos-donts pair (WooPlus / Curvalicious "may appeal to you if" lists)
   reads as two positive lists rather than a do/don't judgement — same
   technique the pricing page's .plan-compare uses. ----- */
.table-scroll{overflow-x:auto;margin:8px 0 36px;border-radius:18px;box-shadow:0 10px 24px rgba(23,65,88,0.06);}
.compare-table{width:100%;border-collapse:collapse;background:#fff;min-width:520px;}
.compare-table th,.compare-table td{padding:14px 20px;text-align:left;font-size:0.92rem;line-height:1.5;border-bottom:1px solid var(--line);}
.compare-table th{font-family:'Quicksand';font-weight:700;color:var(--harbor);background:var(--blush);white-space:nowrap;}
.compare-table td:first-child{font-weight:700;color:var(--harbor);white-space:nowrap;}
.compare-table td{color:var(--harbor-soft);}
.compare-table th:nth-child(2),.compare-table td:nth-child(2){background:rgba(241,124,120,0.06);}
.compare-table tr:last-child td{border-bottom:none;}
.compare-fit .dont-card li::before{content:'✓';color:var(--harbor-soft);}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

/* ----- Shared nav (logo / login / join) — one breakpoint, one set of
   values, whether it's sitting on the hero photo or a plain topbar ----- */
@media (max-width:860px){
  .logo img{height:2.4rem;max-width:8.5rem;}
  .hero-topbar .logo img{height:2.4rem;max-width:8.5rem;}
  .hero-top-actions,.top-actions{gap:10px;}
  .nav-login{font-size:0.82rem;}
  .nav-cta{padding:9px 16px;font-size:0.82rem;}
  .hero-topbar .nav-login{padding:8px 18px;font-size:0.8rem;}
  .nav-menu summary{width:38px;height:38px;}
}
/* ----- Small phones — the hamburger button adds width the original
   logo/login/join row didn't need to budget for, so tighten everything
   a bit further to keep the header from overflowing at ~320-400px. ----- */
@media (max-width:400px){
  .logo img{height:2.05rem;max-width:7rem;}
  .hero-topbar .logo img{height:2.05rem;max-width:7rem;}
  .hero-top-actions,.top-actions{gap:6px;}
  .nav-login{font-size:0.76rem;}
  .nav-cta{padding:7px 12px;font-size:0.76rem;}
  .hero-topbar .nav-login{padding:6px 13px;font-size:0.74rem;}
  .nav-menu summary{width:32px;height:32px;}
  .nav-menu-bars{width:15px;height:10px;}
  .nav-menu-bars span:nth-child(2){top:4px;}
  .nav-menu-bars span:nth-child(3){top:8px;}
}

/* ----- Homepage hero + sections ----- */
@media (max-width:980px){
  .feature-grid{grid-template-columns:repeat(3,1fr);}
  .audience-grid{grid-template-columns:repeat(2,1fr);}
  .advice-grid{grid-template-columns:repeat(2,1fr);}
  .ribbon-steps{grid-template-columns:repeat(2,1fr);gap:40px;}
  .ribbon-line{display:none;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:860px){
  /* Hero — compact enough that the top bar, headline, subhead, both CTAs
     and the trust row all sit inside the viewport with no scroll. */
  .hero{padding:1.1rem 0 1.5rem;}
  .hero-content{max-width:100%;}
  .hero h1{font-size:clamp(1.8rem, 8.5vw, 2.4rem);font-weight:600;margin-bottom:10px;}
  .hero p.lead{font-size:1.05rem;font-weight:600;max-width:100%;margin-bottom:16px;}
  .hero-actions{gap:10px;margin-bottom:14px;}
  .hero .btn-primary{padding:12px 24px;font-size:0.92rem;}
  .hero .btn-ghost{font-size:0.86rem;}
  /* Why Curvalicious cards — swipeable carousel on mobile, one full photo
     banner card at a time, same swipe pattern as the testimonials spotlight. */
  .feature-grid{
    display:flex;
    grid-template-columns:unset;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin:0 -20px;
    padding:0 20px 6px;
  }
  .feature-grid::-webkit-scrollbar{display:none;}
  .feature-card{
    flex:0 0 78%;
    scroll-snap-align:start;
  }
  .feature-card:hover{transform:none;}
  .feature-photo{height:150px;}
  .feature-body{padding:18px 20px 20px;}
  .feature-card h3{font-size:1.05rem;margin-bottom:8px;}
  .feature-card p{font-size:0.86rem;}
  .feature-dots{display:flex;justify-content:center;gap:7px;margin-top:16px;}
  .f-dot{width:6px;height:6px;border-radius:50%;background:rgba(23,65,88,0.18);}
  .f-dot.active{background:var(--coral-deep);width:16px;border-radius:4px;}
  .feature-swipe-hint{
    display:block;text-align:center;margin-top:12px;font-size:0.8rem;font-weight:600;
    color:var(--harbor-soft);opacity:0.6;
  }
  /* Getting Started steps — compact vertical timeline on mobile (badge left,
     text right, connected by a line) instead of a tall 2x2 badge grid. */
  .ribbon-steps{
    grid-template-columns:1fr;
    gap:0;
    position:relative;
    padding-left:8px;
  }
  .ribbon-steps::before{
    content:'';
    position:absolute;
    left:29px; top:6px; bottom:26px;
    width:0;
    border-left:2px dashed var(--coral);
    opacity:0.5;
  }
  .ribbon-step{
    display:grid;
    grid-template-columns:42px 1fr;
    grid-template-areas:
      "badge title"
      "badge body";
    column-gap:16px;
    row-gap:4px;
    align-items:start;
    text-align:left;
    padding:0 0 22px;
  }
  .ribbon-step:last-child{padding-bottom:0;}
  .ribbon-badge{
    grid-area:badge;
    width:42px;height:42px;
    font-size:1.05rem;
    margin:0;
    position:relative;
  }
  .ribbon-step h3{grid-area:title; text-align:left; font-size:1rem; margin-bottom:0;}
  .ribbon-step p{grid-area:body; text-align:left; font-size:0.86rem; max-width:none; margin:0;}
  /* Community panel — the feed card list doesn't earn its space on mobile,
     so it's dropped there entirely; copy stands alone. */
  .community-inner{grid-template-columns:1fr;gap:0;}
  .community-visual{display:none;}
  .t-grid{grid-template-columns:1fr;}
  .rating-row{gap:28px;margin-bottom:24px;}
  /* Real stories spotlight — tightened rhythm so the whole card (avatar,
     stars, quote, name, dots) fits in the viewport without scrolling. */
  .testimonials .section-head{margin-bottom:32px;}
  .t-spot-avatar{width:48px;height:48px;font-size:1.05rem;margin:0 auto 12px;}
  .t-spot-stars{font-size:0.95rem;margin-bottom:12px;}
  .t-spot-inner p{font-size:1.05rem;margin-bottom:14px;}
  .t-spot-dots{margin-top:20px;}
  .t-swipe-hint{margin-top:10px;}
  /* Meet chubby singles near you — bottom-anchored caption so the top ~40%
     of the photo stays completely unobstructed instead of the text block
     covering most of the image. */
  .local-inner{
    aspect-ratio:3/4;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:28px 24px 30px;
    border-radius:32px;
    background-position:center top;
  }
  .local-inner::before{
    top:auto;
    bottom:0;
    height:62%;
    background:linear-gradient(to top, rgba(10,32,44,0.82) 0%, rgba(10,32,44,0.5) 55%, rgba(10,32,44,0) 100%);
  }
  .local-inner h2{font-size:1.5rem;}
  .local-inner p{font-size:0.92rem;margin-bottom:22px;}
  .local-inner .btn-white{padding:12px 28px;font-size:0.92rem;}
  section{padding:52px 0;}
  .audience-note{margin-top:28px;}
  .how-cta{margin-top:36px;}
  /* Ready to find someone who loves curves — headline sits right above the
     buttons at the bottom, so her whole face is left clear up top with
     nothing overlaid on it. */
  .cta-inner{
    aspect-ratio:3/3.7;
    min-height:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:24px 24px 26px;
    border-radius:32px;
    background-position:center top;
  }
  .cta-inner::before{
    display:none;
  }
  .cta-inner::after{
    content:'';
    position:absolute;
    left:0;right:0;bottom:0;
    height:52%;
    background:linear-gradient(to top, rgba(222,95,90,0.85) 0%, rgba(222,95,90,0.5) 55%, rgba(222,95,90,0) 100%);
  }
  .cta-inner h2{font-size:clamp(1.05rem, 5vw, 1.35rem);margin-bottom:clamp(6px, 2.4vw, 12px);}
  .cta-inner p{display:none;}
  .cta-actions{gap:10px;}
  .cta-inner .btn-white{padding:11px 28px;font-size:0.88rem;}
  .cta-login{font-size:0.82rem;}
}
@media (max-width:860px) and (max-height:640px){
  /* Safety net for very short viewports (landscape phones, split-screen) —
     trims the hero further so the CTA never requires a scroll. */
  .hero{padding:1rem 0 1.25rem;}
  .hero h1{margin-bottom:8px;}
  .hero p.lead{margin-bottom:12px;}
}
@media (max-width:560px){
  /* Come As You Are — mini banner cards, stacked one per row: photo header
     on top, full title + copy below on white. */
  .audience-grid{grid-template-columns:1fr; gap:14px;}
  .audience-card{
    position:relative;
    aspect-ratio:unset;
    display:block;
    background:#fff;
    padding:0;
    border-radius:20px;
    box-shadow:0 10px 24px rgba(23,65,88,0.06);
  }
  .audience-card:hover{transform:none;}
  .audience-card .audience-photo{display:none;}
  .audience-card .audience-photo-mobile{display:block;position:static;width:100%;height:150px;object-fit:cover;}
  .audience-card::after{display:none;}
  .audience-card h3{
    position:static;z-index:auto;
    color:var(--harbor);text-shadow:none;
    font-size:1rem;line-height:1.25;margin:0;
    padding:16px 18px 6px;
  }
  .audience-card p{
    position:static;z-index:auto;
    color:var(--harbor-soft);text-shadow:none;
    font-size:0.86rem;line-height:1.45;
    padding:0 18px 18px;
  }
  /* Dating advice — 2x2 grid with smaller cards instead of 4 tall stacked
     cards, so all 4 fit in about half the scroll height. */
  .advice-grid{grid-template-columns:1fr 1fr;gap:12px;}
  .advice-card{border-radius:18px;}
  .advice-thumb{height:84px;font-size:1.3rem;}
  .advice-body{padding:12px 12px 14px;}
  .advice-tag{font-size:0.62rem;margin-bottom:5px;}
  .advice-card h3{font-size:0.8rem;line-height:1.3;}
  .footer-grid{grid-template-columns:1fr;}
}

/* ----- Articles landing + article detail ----- */
@media (max-width:720px){
  .page-hero{padding-bottom:44px;}
  .dos-donts{grid-template-columns:1fr;}
}
@media (max-width:520px){
  .card-body{padding:24px 22px;}
  .example-bio{padding:28px 24px 22px;}
  .faq-block summary{padding:18px 26px 18px 0;}
}