/** Shopify CDN: Minification failed

Line 610:22 Unexpected "="

**/

:root{
  /* SIIL palette — black, white, micro-gold accent only */
  --ink:#0F0F0F;          /* near-black, deeper than #2C for premium */
  --ink-soft:#6F6F6F;     /* secondary text — neutral grey */
  --ink-muted:#A8A8A8;    /* tertiary text */
  --paper:#FFFFFF;        /* primary background */
  --paper-warm:#FBFAF7;   /* subtle warm tint for sections (almost white) */
  --line:rgba(15,15,15,0.08);
  --line-strong:rgba(15,15,15,0.16);
  /* Gold — used only sparingly: stars, badge, single accents */
  --gold:#B89B6A;
  --gold-soft:#D4BC8C;
  --gold-deep:#9A7E4F;
  --frost:rgba(255,255,255,0.7);
  --ease:cubic-bezier(0.32, 0.72, 0, 1);
  --shadow-card:0 1px 1px rgba(15,15,15,0.04), 0 12px 40px rgba(15,15,15,0.06);
  --shadow-glass:0 1px 1px rgba(255,255,255,0.5) inset, 0 12px 40px rgba(15,15,15,0.08);
  --radius:18px;
  --radius-sm:10px;
}
/* ALL prototype styles are scoped under .siil-proto-root so they
   don't leak onto the WordPress theme header/footer when this HTML
   is dropped into a real Elementor template. */
.siil-proto-root,
.siil-proto-root *,
.siil-proto-root *::before,
.siil-proto-root *::after{box-sizing:border-box}
.siil-proto-root *{margin:0;padding:0}
.siil-proto-root{
  font-family:'Albert Sans',-apple-system,BlinkMacSystemFont,'SF Pro Display',sans-serif !important;
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-weight:400;
  letter-spacing:-0.011em;
  font-size:16px;
}
/* Anchor reset — but EXCLUDE buttons so .btn-primary white text isn't clobbered */
.siil-proto-root a:not(.btn):not(.btn-primary):not(.btn-ghost){color:inherit;text-decoration:none;transition:color 0.2s var(--ease)}
.siil-proto-root a:not(.btn):not(.btn-primary):not(.btn-ghost):visited{color:inherit}
.siil-proto-root a:not(.btn):not(.btn-primary):not(.btn-ghost):hover{color:inherit}
.siil-proto-root a.btn,
.siil-proto-root a.btn-primary,
.siil-proto-root a.btn-ghost{text-decoration:none;transition:all 0.3s var(--ease)}
.siil-proto-root img{max-width:100%;height:auto;display:block}
.siil-proto-root button{cursor:pointer;border:none;background:none;font-family:inherit;font-size:inherit;color:inherit}
.siil-proto-root ul,
.siil-proto-root ol{list-style:none}

/* ======= SEO HIDDEN BLOCK PATTERN (same as product pages) =======
   Hidden visually but indexed by Google. Preserves all keyword-rich
   H1/H2/H3 from current home (page 1672) so SEO ranking is preserved. */
.siil-seo-hidden,
.siil-seo-hidden-bedrock{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);pointer-events:none}

/* ======= LAYOUT — Apple-style generous whitespace ======= */
.siil-proto-root{position:relative;overflow-x:hidden;background:var(--paper)}
.siil-proto-root .container{max-width:1240px;margin:0 auto;padding:0 32px}
@media(max-width:768px){.siil-proto-root .container{padding:0 20px}}
.siil-proto-root section{padding:64px 0; border-top:1px solid var(--line)}
@media(max-width:980px){.siil-proto-root section{padding:56px 0}}
@media(max-width:520px){.siil-proto-root section{padding:44px 0}}
/* Authority strip is its own micro-bar — already styled, just keep the top hairline */
.siil-proto-root .authority-strip{border-top:1px solid var(--line)}

/* ============================================================
   MOBILE OVERRIDES — clamp() uses layout viewport so it doesn't
   actually shrink at 390px wide; we force the typography here.
   Plus: swipe carousels, alternation, viewport-overflow guards.
   ============================================================ */

/* Authority eyebrow — desktop vs mobile copy switch */
.siil-proto-root .authority-eyebrow .ae-mobile{display:none}
.siil-proto-root .authority-eyebrow .ae-desktop{display:inline}

/* Hero FUDs + Stats — desktop default (long copy), mobile swaps to short */
.siil-proto-root .hero-fuds .fud-short,
.siil-proto-root .hero-stats .hero-stat-short{display:none}
.siil-proto-root .hero-fuds .fud-long,
.siil-proto-root .hero-stats .hero-stat-long{display:inline}

/* Hero mobile overlay — hidden on desktop by default */
.siil-proto-root .hero-mobile-overlay,
.siil-proto-root .hero-mobile-sub-overlay{display:none}

/* Authority logos — medical/manufacturer brands kept +50% bigger
   (Welland, Mount Sinai, Marlen, Pelican, Coloplast, Hollister, ConvaTec)
   but slimmer overall so the marquee fits inside the hero viewport. */
.siil-proto-root .marquee-item.logo-big img{
  height:36px; max-width:150px;     /* slimmer: was 54/200 */
}
@media(max-width:768px){
  .siil-proto-root .marquee-item.logo-big img{height:32px; max-width:130px}
}

/* Sections 3-5: Pain Point + Confidence + Nurses
   On mobile, force ALL three sections to render as TEXT → IMAGE → CTA
   (CTA inline, sitting below the image instead of stacked under text).
   This also kills any image→image back-to-back stacks when scrolling
   from one section into the next.
   NOTE: must use !important on order/display because the original
   prototype CSS later in the file has @media(980px) rules with the
   same specificity that would otherwise win on source order. */
@media(max-width:980px){
  /* PAIN POINT: text → image → CTA */
  .siil-proto-root .painpoint-grid{
    display:flex !important;
    flex-direction:column !important;
    gap:24px !important;
  }
  .siil-proto-root .painpoint-text{display:contents !important}
  .siil-proto-root .painpoint-text > *{order:1 !important}
  .siil-proto-root .painpoint-text .painpoint-cta{order:3 !important; margin-top:18px}
  .siil-proto-root .painpoint-photo-cell{order:2 !important}

  /* CONFIDENCE + NURSES: both → text → image → CTA */
  .siil-proto-root .confidence-grid,
  .siil-proto-root .confidence-grid--reverse{
    display:flex !important;
    flex-direction:column !important;
    gap:24px !important;
  }
  .siil-proto-root .confidence-grid .confidence-text,
  .siil-proto-root .confidence-grid--reverse .confidence-text{display:contents !important}
  .siil-proto-root .confidence-grid .confidence-text > *,
  .siil-proto-root .confidence-grid--reverse .confidence-text > *{order:1 !important}
  .siil-proto-root .confidence-grid .confidence-text .confidence-cta,
  .siil-proto-root .confidence-grid--reverse .confidence-text .confidence-cta{order:3 !important; margin-top:18px}
  .siil-proto-root .confidence-grid .confidence-photo,
  .siil-proto-root .confidence-grid .confidence-photo-cell,
  .siil-proto-root .confidence-grid--reverse .confidence-photo,
  .siil-proto-root .confidence-grid--reverse .confidence-photo-cell{order:2 !important}

  /* CTAs go inline ONE ROW (no wrap) on mobile — both buttons share width 50/50 */
  .siil-proto-root .painpoint-cta,
  .siil-proto-root .confidence-cta{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    gap:8px !important;
    width:100%;
  }
  .siil-proto-root .painpoint-cta .btn,
  .siil-proto-root .confidence-cta .btn{
    flex:1 1 0 !important;          /* equal width 50/50 */
    min-width:0 !important;
    padding:13px 14px !important;
    font-size:13px !important;
    letter-spacing:-0.005em;
    justify-content:center;
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .siil-proto-root .painpoint-cta .btn span,
  .siil-proto-root .confidence-cta .btn span{margin-left:2px}
}

/* Section 5: Testimonials — on mobile become a horizontal swipe carousel */
@media(max-width:520px){
  .siil-proto-root .testimonials-track{
    display:flex !important;
    grid-template-columns:none !important;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    gap:14px;
    padding:8px 16px 18px;
    margin:32px -16px 0;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .siil-proto-root .testimonials-track::-webkit-scrollbar{display:none}
  .siil-proto-root .testimonial{
    flex:0 0 84%;
    scroll-snap-align:center;
    padding:24px 22px;
    gap:14px;
  }
  .siil-proto-root .testimonial-quote{font-size:16px; line-height:1.4}
  .siil-proto-root .testimonials-cta{margin-top:28px}
}

/* Section 6: How It Works (1-2-3 steps) — swipe carousel on mobile */
@media(max-width:768px){
  .siil-proto-root .howitworks-grid{
    display:flex !important;
    grid-template-columns:none !important;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    gap:14px;
    padding:8px 16px 18px;
    margin:0 -16px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .siil-proto-root .howitworks-grid::-webkit-scrollbar{display:none}
  .siil-proto-root .howstep{
    flex:0 0 80%;
    scroll-snap-align:center;
  }
  .siil-proto-root .howitworks-header{margin-bottom:32px}
}

/* Bestsellers carousel already exists — just ensure it doesn't fight us */

/* Subtle Apple/Tesla-style fade-up — extends existing .fade-in with a
   stagger and a more refined easing. We add a "reveal" class for headings. */
.siil-proto-root .reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity 0.85s cubic-bezier(0.22, 0.61, 0.36, 1),
             transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change:opacity, transform;
}
.siil-proto-root .reveal.visible{opacity:1; transform:translateY(0)}
.siil-proto-root .reveal-delay-1{transition-delay:80ms}
.siil-proto-root .reveal-delay-2{transition-delay:160ms}
.siil-proto-root .reveal-delay-3{transition-delay:240ms}

/* ============================================================
   CORE MOBILE BLOCK (≤520px)
   ============================================================ */
@media(max-width:520px){
  /* Container side padding */
  .siil-proto-root .container{padding:0 16px}
  /* Universal overflow guard so absolute children can't push the page right */
  .siil-proto-root,
  .siil-proto-root .painpoint,
  .siil-proto-root .confidence,
  .siil-proto-root .promises,
  .siil-proto-root .testimonials,
  .siil-proto-root .bestsellers,
  .siil-proto-root .howitworks,
  .siil-proto-root .learn-more,
  .siil-proto-root .family,
  .siil-proto-root .closer,
  .siil-proto-root .faq,
  .siil-proto-root .blog-teasers{overflow-x:hidden}

  /* Typography ====================================================== */
  .siil-proto-root .section-title{font-size:26px !important; line-height:1.1; letter-spacing:-0.024em}
  .siil-proto-root .hero h1.hero-h1-seo,
  .siil-proto-root .hero .hero-marketing{font-size:38px !important; line-height:1.02; letter-spacing:-0.028em}
  .siil-proto-root .painpoint h2,
  .siil-proto-root .confidence h2,
  .siil-proto-root .closer-text h2{font-size:28px !important; line-height:1.1}
  .siil-proto-root .benefit-headline{font-size:28px !important; line-height:1.05}
  .siil-proto-root .eyebrow{font-size:10.5px; letter-spacing:0.18em}
  .siil-proto-root .section-sub{font-size:14.5px; line-height:1.5}

  /* Body paragraphs — friendlier reading size on mobile */
  .siil-proto-root .painpoint-text p,
  .siil-proto-root .confidence-text p,
  .siil-proto-root .closer-text > p,
  .siil-proto-root .family-header .section-sub,
  .siil-proto-root .howitworks-header .section-sub,
  .siil-proto-root .testimonials .text-center > p,
  .siil-proto-root .blog-teasers .text-center > p,
  .siil-proto-root .faq .text-center > p{
    font-size:15px !important;
    line-height:1.55 !important;
  }
  .siil-proto-root .painpoint-list li{font-size:14.5px}
  .siil-proto-root .howstep-body{font-size:14px}
  .siil-proto-root .closer-text > p{font-size:14.5px !important}
  .siil-proto-root .closer-guides li{gap:12px}
  .siil-proto-root .closer-guide-text b{font-size:14.5px}
  .siil-proto-root .closer-guide-text span{font-size:13px; line-height:1.45}

  /* Hero — compact, image-FIRST with eyebrow + headline OVERLAID on photo. */
  .siil-proto-root .hero{padding:0 0 14px}     /* flush top, no gap above photo */
  .siil-proto-root .hero .container{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
    grid-template-columns:none !important;
    padding:0 !important;                       /* photo edge-to-edge */
  }
  /* Image first, text second */
  .siil-proto-root .hero .hero-photo-wrap{
    order:1;
    aspect-ratio:auto;
    position:relative;
    width:100%;
    margin:0;
  }
  /* Center text block under photo */
  .siil-proto-root .hero .hero-text{
    order:2;
    text-align:center;
    padding:0 16px;
  }
  /* Strong top fade so the overlaid eyebrow + headline read crisp.
     Now covers the full text band (~40%) and is more opaque at the top. */
  .siil-proto-root .hero-photo-wrap::before{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:42%;
    background:linear-gradient(180deg,
      rgba(255,255,255,0.96) 0%,
      rgba(255,255,255,0.78) 30%,
      rgba(255,255,255,0.35) 65%,
      rgba(255,255,255,0) 100%);
    z-index:3;
    pointer-events:none;
    border-radius:inherit;
  }
  /* Bottom subtle fade so the Crystal Glass sub-card has soft contrast under it */
  .siil-proto-root .hero-photo-wrap::after{
    content:"";
    position:absolute;
    bottom:0; left:0; right:0;
    height:24%;
    background:linear-gradient(0deg,
      rgba(15,15,15,0.18) 0%,
      rgba(15,15,15,0) 100%);
    z-index:3;
    pointer-events:none;
    border-radius:inherit;
  }
  .siil-proto-root .hero .hero-text{order:2}
  /* HIDE the desktop tagline + headline on mobile — they live in the overlay now */
  .siil-proto-root .hero .hero-text > .hero-tagline,
  .siil-proto-root .hero .hero-text > .hero-marketing,
  .siil-proto-root .hero .hero-text > .hero-h1-seo{display:none}
  /* Mobile TOP overlay — centered, strong contrast eyebrow + headline */
  .siil-proto-root .hero-mobile-overlay{
    display:block;
    position:absolute;
    top:14px; left:16px; right:16px;
    z-index:5;
    text-align:center;        /* centered, not left */
    pointer-events:none;
  }
  .siil-proto-root .hero-mobile-tagline{
    font-family:'Albert Sans',sans-serif !important;
    font-weight:700;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:0.2em;
    color:var(--ink);          /* darker — was --ink-muted, hard to read */
    margin:0 0 6px;
    opacity:0.78;
  }
  .siil-proto-root .hero-mobile-headline{
    font-family:'Albert Sans',sans-serif !important;
    font-size:32px;
    line-height:1.0;
    letter-spacing:-0.03em;
    font-weight:600;
    color:var(--ink);
    margin:0;
  }
  .siil-proto-root .hero-mobile-headline em{
    font-family:'Cormorant Garamond',Georgia,serif !important;
    font-style:italic !important;
    font-weight:500;
    color:var(--gold-deep);
    letter-spacing:-0.005em;
  }

  /* Mobile BOTTOM sub-overlay — small Crystal Glass card with the pain hook */
  .siil-proto-root .hero-mobile-sub-overlay{
    display:block;
    position:absolute;
    bottom:12px; left:12px; right:12px;
    z-index:5;
    /* Crystal Glass */
    background:rgba(255,255,255,0.78);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,0.7);
    box-shadow:0 4px 18px rgba(15,15,15,0.10), inset 0 1px 0 rgba(255,255,255,0.85);
    border-radius:10px;
    padding:9px 14px;
    font-family:'Albert Sans',sans-serif !important;
    font-size:13px;
    font-weight:600;
    color:var(--ink);
    text-align:center;
    line-height:1.32;
    letter-spacing:-0.01em;
    pointer-events:none;
  }
  /* Hide the regular sub on mobile — it's now inside the photo */
  .siil-proto-root .hero .hero-text > .hero-sub{display:none}
  /* Sub — keep the pain hook visible on mobile (was hidden) */
  .siil-proto-root .hero .hero-sub b{font-size:15px; line-height:1.32; font-weight:600}
  .siil-proto-root .hero .hero-sub-long{display:none}  /* hide long detail on mobile, keep pain hook */
  .siil-proto-root .hero .hero-sub{margin-bottom:12px}
  /* Social proof #1 (stars + reviews) — centered */
  .siil-proto-root .hero .hero-social-proof{
    margin:10px 0 12px;
    display:flex;
    justify-content:center;
  }
  .siil-proto-root .hero .hero-sp-rating{justify-content:center}
  .siil-proto-root .hero .hero-sp-rating-text{text-align:left}
  /* CTA single, big, centered */
  .siil-proto-root .hero .cta-row{
    margin:0 0 10px;
    display:flex;
    justify-content:center;
  }
  .siil-proto-root .hero .cta-row .btn-primary{
    width:auto;
    min-width:200px;
    padding:14px 28px;
    font-size:14.5px;
    justify-content:center;
  }
  /* FUDs — single line, centered */
  .siil-proto-root .hero .hero-fuds{
    gap:2px 8px;
    font-size:10.5px;
    margin-top:8px;
    line-height:1.35;
    flex-wrap:nowrap;
    overflow:hidden;
    justify-content:center;        /* centered */
  }
  .siil-proto-root .hero .hero-fuds .fud{font-size:10.5px}
  .siil-proto-root .hero .hero-fuds .fud::before{font-size:10px; margin-right:2px}
  /* Match selector specificity to override the desktop default */
  .siil-proto-root .hero-fuds .fud-long{display:none !important}
  .siil-proto-root .hero-fuds .fud-short{display:inline !important}
  /* Stats — single line, centered */
  .siil-proto-root .hero-stats{
    gap:3px 10px;
    margin-top:8px;
    padding-top:8px;
    font-size:11px;
    line-height:1.35;
    flex-wrap:nowrap;
    justify-content:center;        /* centered */
  }
  .siil-proto-root .hero-stats .hero-stat b{font-size:12.5px}
  .siil-proto-root .hero-stats .hero-stat-long{display:none !important}
  .siil-proto-root .hero-stats .hero-stat-short{display:inline !important}
  /* Photo — wider/shorter crop on mobile so the brand marquee lands in fold.
     Was 1/1.05 + 54vh — too tall. Now ~1/0.85 capped to 44vh. */
  .siil-proto-root .hero-photo{aspect-ratio:1/0.95; max-height:44vh; border-radius:0}
  .siil-proto-root .hero-photo-wrap{margin:0; border-radius:0}
  .siil-proto-root .hero-photo-badge{display:none}

  /* MOBILE: kill the Benefits Strip entirely.
     2 of its 4 items duplicate the hero FUDs (Try It On = 30-day returns,
     Ships Worldwide = Worldwide shipping) and the section eats a full
     viewport of vertical real estate right after the hero — pure waste. */
  .siil-proto-root .benefits-strip{display:none !important}

  /* Tighten authority strip too — eyebrow + marquee shouldn't eat much */
  .siil-proto-root .authority-strip{padding:10px 0 12px !important}
  .siil-proto-root .authority-eyebrow{margin-bottom:6px !important; font-size:9px !important; line-height:1.45 !important}

  /* Authority strip mobile copy switch (sizes set globally above) */
  .siil-proto-root .authority-eyebrow .ae-desktop{display:none}
  .siil-proto-root .authority-eyebrow .ae-mobile{display:inline}

  /* Pain Point — viewport overflow fix */
  .siil-proto-root .painpoint .container{overflow:hidden}
  .siil-proto-root .painpoint-photo-overlay{
    left:14px; right:14px; bottom:14px;
    padding:14px 16px; gap:14px;
  }
  .siil-proto-root .painpoint-photo-stat{font-size:38px}
  .siil-proto-root .painpoint-photo-stat-label{font-size:12.5px; line-height:1.4}

  /* Confidence/Nurses photo overlay tighter */
  .siil-proto-root .confidence-photo-overlay{
    left:14px; right:14px; bottom:14px;
    padding:14px 16px; gap:14px;
  }

  /* Benefits Strip — 2-col, tight */
  .siil-proto-root .benefits-strip{padding:36px 0}
  .siil-proto-root .benefit{padding:8px 6px}
  .siil-proto-root .benefit-label{font-size:11.5px; max-width:140px; line-height:1.35}

  /* Closer 3-FUDs row */
  .siil-proto-root .closer-fuds{flex-wrap:wrap; gap:8px 14px}
  .siil-proto-root .closer{padding:56px 0}

  /* Mosaic — tighter header */
  .siil-proto-root .family-header{margin-bottom:24px}
  .siil-proto-root .family-header h2{font-size:24px !important; line-height:1.15}
  .siil-proto-root .family-header h2 br{display:none}
  .siil-proto-root .family-header .section-sub{font-size:14px; margin-top:10px}
  .siil-proto-root .family-mosaic{grid-auto-rows:160px; gap:8px}
  .siil-proto-root .family-cta{margin-top:24px}

  /* FAQ + Learn More — fix right-edge cut on long accordion titles
     CRITICAL: change trigger from flex to block + absolute "+" so the
     title text WRAPS instead of overflowing. Applies to ALL accordions
     (Learn More uses plain .accordion, FAQ uses .faq-accordion). */
  .siil-proto-root .accordion{
    margin:24px auto 0 !important;
    max-width:100% !important;
    box-sizing:border-box;
  }
  .siil-proto-root .accordion-item{
    box-sizing:border-box;
    width:100%;
    overflow:hidden;
  }
  .siil-proto-root .accordion-trigger{
    display:block !important;
    position:relative !important;
    width:100%;
    box-sizing:border-box;
    font-size:15.5px !important;
    line-height:1.32 !important;
    padding:18px 38px 18px 0 !important;
    text-align:left;
    word-wrap:break-word !important;
    overflow-wrap:break-word !important;
    hyphens:auto;
    white-space:normal !important;  /* CRITICAL: theme CSS sets nowrap on buttons */
    word-break:normal !important;
  }
  .siil-proto-root .accordion-trigger::after{
    position:absolute;
    right:0;
    top:50%;
    margin-left:0 !important;
    transform:translateY(-50%);
  }
  .siil-proto-root .accordion-item.open .accordion-trigger::after{
    transform:translateY(-50%) rotate(45deg);
  }
  .siil-proto-root .accordion-content-inner{padding:0 0 22px; font-size:14.5px}
  .siil-proto-root .faq-accordion{padding:0 4px}

  /* Blog teasers (Live more / Worry less) — clean horizontal mini-card.
     CRITICAL: must reset the desktop position:absolute setup or the
     Crystal Glass body keeps floating over the cover image. */
  .siil-proto-root .blog-teasers{padding:36px 0}
  .siil-proto-root .blog-grid{gap:12px; margin-top:24px}
  .siil-proto-root .blog-card{
    position:static !important;
    aspect-ratio:auto !important;
    background:transparent !important;
    border-radius:0 !important;
    overflow:visible !important;
    display:grid !important;
    grid-template-columns:108px 1fr;
    gap:14px;
    padding:10px 0;
    align-items:center;
    border-bottom:1px solid var(--line);
    box-shadow:none !important;
  }
  .siil-proto-root .blog-card:hover{transform:none; box-shadow:none}
  .siil-proto-root .blog-card:last-child{border-bottom:0}
  .siil-proto-root .blog-cover{
    position:relative !important;
    inset:auto !important;
    aspect-ratio:1/1;
    border-radius:10px;
    overflow:hidden;
    width:108px;
    height:108px;
  }
  .siil-proto-root .blog-cover img{object-position:center 30%}
  .siil-proto-root .blog-body{
    position:static !important;
    inset:auto !important;
    background:transparent !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    border:0 !important;
    box-shadow:none !important;
    border-radius:0 !important;
    padding:0 !important;
    z-index:auto !important;
    gap:4px !important;
  }
  .siil-proto-root .blog-eyebrow{font-size:9.5px; letter-spacing:0.18em; margin-bottom:2px}
  .siil-proto-root .blog-title{font-size:14.5px; line-height:1.25; margin:0; font-weight:600}
  .siil-proto-root .blog-excerpt{display:none}  /* hide on mobile, title carries weight */
  .siil-proto-root .blog-link{font-size:10.5px; margin-top:4px}

  /* HIW header tighter */
  .siil-proto-root .howitworks-header{margin-bottom:28px}
  .siil-proto-root .howitworks-header .section-sub{font-size:14.5px}
}

/* Slightly bigger phones (521-768) — keep wide-ish cards but still tame */
@media(min-width:521px) and (max-width:768px){
  .siil-proto-root .blog-card{grid-template-columns:1fr; padding:0}
  .siil-proto-root .blog-cover{aspect-ratio:16/10}
}

/* ======= TYPOGRAPHY — Albert Sans dominant, Apple-grade hierarchy ======= */
.siil-proto-root h1,
.siil-proto-root h2,
.siil-proto-root h3,
.siil-proto-root h4,
Apple-grade hierarchy ======= */
.siil-proto-root .bc-h1,
.siil-proto-root .bc-h2,
.siil-proto-root .bc-h3,
.siil-proto-root .bc-h4{
  font-family:'Albert Sans',-apple-system,BlinkMacSystemFont,sans-serif !important;
  font-weight:600;
  line-height:1.08;
  letter-spacing:-0.025em;
  color:var(--ink);
}
/* Tagline — only place Cormorant survives, italic micro-accent */
.tagline{
  font-family:'Cormorant Garamond',Georgia,serif !important;
  font-style:italic !important;
  font-weight:500;
  letter-spacing:0.005em;
  color:var(--gold-deep);
  font-size:18px;
}
.eyebrow{
  font-size:11px;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--ink-muted);
  font-feature-settings:"ss01";
}
.section-title{
  font-family:'Albert Sans',sans-serif !important;
  font-size:clamp(32px,3.6vw,52px);
  line-height:1.04;
  letter-spacing:-0.032em;
  font-weight:600;
  color:var(--ink);
}
.section-sub{
  font-size:clamp(17px,1.4vw,20px);
  line-height:1.5;
  color:var(--ink-soft);
  max-width:680px;
  margin-top:20px;
  letter-spacing:-0.005em;
}

/* ======= ANNOUNCEMENT BAR — Apple-thin ======= */
.announcement{
  background:var(--ink);
  color:var(--paper);
  text-align:center;
  font-size:12px;
  letter-spacing:0.005em;
  padding:10px 16px;
  font-weight:400;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.announcement b{font-weight:500}
.announcement .star{color:var(--gold-soft);letter-spacing:0.06em}

/* ======= HERO — Apple-grade, white/black, micro-gold accent ======= */
.hero{
  position:relative;
  background:var(--paper);
  padding:36px 0 32px;
  overflow:hidden;
  /* Reserve room within 100vh for: WP nav (~80) + announcement (~36) + dark trust band (~36) + authority strip compressed (~95) + hero padding.
     The authority logo slider MUST be entirely visible inside the hero viewport. */
  min-height:calc(100vh - 320px);
  max-height:calc(100vh - 280px);
  display:flex;
  align-items:center;
}
@media(max-width:980px){.hero{max-height:none}}
@media(max-width:768px){.hero{padding:32px 0 40px;min-height:auto}}
.hero .container{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:64px;
  align-items:center;
  width:100%;
}
@media(max-width:980px){.hero .container{grid-template-columns:1fr;gap:36px}}

.hero-text{display:flex;flex-direction:column;gap:0;animation:heroTextIn 1.1s var(--ease) both}
@keyframes heroTextIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

.hero-tagline{
  font-family:'Cormorant Garamond',Georgia,serif !important;
  font-style:italic !important;
  font-size:20px;
  letter-spacing:0.005em;
  color:var(--gold-deep);
  margin-bottom:14px;
  animation:tagSlide 1s var(--ease) 0.1s both;
}
@keyframes tagSlide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

/* SEO H1 — visually hidden but present for screen readers + crawlers */
.hero-h1-seo{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.hero-marketing{
  font-family:'Albert Sans',-apple-system,BlinkMacSystemFont,sans-serif !important;
  font-size:clamp(48px,6vw,88px);
  line-height:0.98;
  letter-spacing:-0.04em;
  font-weight:700;
  color:var(--ink);
  margin:0;
  animation:heroH1In 1.3s var(--ease) 0.15s both;
  white-space:nowrap;
}
.hero-marketing .line2{
  display:block;
  font-weight:600;
  font-style:normal;
  white-space:nowrap;
}
@media(max-width:980px){
  .hero-marketing{font-size:clamp(48px,11vw,84px);white-space:normal}
  .hero-marketing .line2{white-space:normal}
}
.hero-marketing .accent{
  color:var(--ink);
  position:relative;
  display:inline-block;
  font-style:italic !important;
  font-family:'Cormorant Garamond',Georgia,serif !important;
  font-weight:500;
  letter-spacing:-0.03em;
}
/* Gold underline — drawn once, then subtle pulse */
.hero-marketing .accent::after{
  content:"";
  position:absolute;
  left:0;right:0;
  bottom:0.04em;
  height:0.045em;
  background:linear-gradient(90deg, var(--gold-soft) 0%, var(--gold) 50%, var(--gold-soft) 100%);
  border-radius:2px;
  transform:scaleX(0);
  transform-origin:left;
  animation:underlineDraw 1.4s var(--ease) 1s forwards, underlineGlow 4s var(--ease) 2.5s infinite;
}
@keyframes underlineDraw{to{transform:scaleX(1)}}
@keyframes underlineGlow{
  0%,100%{opacity:1;filter:brightness(1)}
  50%{opacity:0.7;filter:brightness(1.15)}
}
@keyframes heroH1In{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

.hero-sub{
  font-size:clamp(16px,1.3vw,19px);
  line-height:1.45;
  color:var(--ink-soft);
  max-width:520px;
  margin-top:22px;
  letter-spacing:-0.005em;
  animation:heroSubIn 1.1s var(--ease) 0.3s both;
}
@keyframes heroSubIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* ATF social proof blocks — TWO forms, ABOVE the CTA (ThrillX rule) */
.hero-social-proof{
  display:flex;
  align-items:center;
  gap:24px;
  margin-top:22px;
  flex-wrap:wrap;
  animation:heroSubIn 1s var(--ease) 0.4s both;
}
.hero-sp-rating{
  display:flex;
  align-items:center;
  gap:10px;
}
.hero-sp-stars{color:var(--gold);font-size:15px;letter-spacing:0.06em}
.hero-sp-rating-text{
  font-size:13px;
  color:var(--ink);
  letter-spacing:-0.005em;
  line-height:1.3;
}
.hero-sp-rating-text b{font-weight:600}
.hero-sp-rating-text .small{display:block;font-size:11px;color:var(--ink-muted);font-weight:500;letter-spacing:0.01em}
.hero-sp-divider{width:1px;height:32px;background:var(--line-strong);opacity:0.6}
.hero-sp-avatars{
  display:flex;
  align-items:center;
  gap:10px;
}
.hero-sp-avatar-stack{display:flex}
.hero-sp-avatar-stack .av{
  width:30px;height:30px;
  border-radius:50%;
  border:2px solid var(--paper);
  background:#F0EEE9;
  background-size:cover;
  background-position:center;
  margin-left:-8px;
  filter:contrast(0.97) saturate(0.94);
}
.hero-sp-avatar-stack .av:first-child{margin-left:0}
.hero-sp-avatars-text{
  font-size:13px;
  color:var(--ink);
  line-height:1.3;
}
.hero-sp-avatars-text b{font-weight:600}
.hero-sp-avatars-text .small{display:block;font-size:11px;color:var(--ink-muted);font-weight:500}

/* FUD reducers — explicit row BELOW the CTAs (ThrillX rule) */
.hero-fuds{
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
  margin-top:16px;
  font-size:13px;
  color:var(--ink-soft);
  letter-spacing:-0.005em;
  animation:heroSubIn 1s var(--ease) 0.65s both;
}
.hero-fuds .fud{
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}
.hero-fuds .fud b{
  color:var(--ink);
  font-weight:700;
  letter-spacing:-0.01em;
}
.hero-fuds .fud::before{
  content:"✓";
  color:var(--gold-deep);
  font-weight:700;
  font-size:11px;
}

/* ===== STICKY MINI-PILL (mobile only) — bottom-center, between Brevo (left)
   and theme's scroll-to-top (right). Same vertical level as the two icons. */
.siil-sticky-fab{
  display:none;          /* desktop hides it */
  position:fixed;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  right:auto;
  z-index:9990;
  align-items:center;
  gap:7px;
  padding:10px 16px 10px 13px;
  background:var(--ink);
  color:var(--paper) !important;
  border-radius:999px;
  box-shadow:0 8px 24px rgba(15,15,15,0.32), 0 1px 1px rgba(255,255,255,0.08) inset;
  text-decoration:none !important;
  font-family:'Albert Sans',sans-serif !important;
  font-size:12px;
  font-weight:600;
  letter-spacing:-0.005em;
  white-space:nowrap;
  transition:transform 0.4s var(--ease), opacity 0.3s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.siil-sticky-fab:hover,
.siil-sticky-fab:focus{color:var(--paper) !important; transform:translate(-50%, -2px)}
.siil-sticky-fab.is-hidden{transform:translate(-50%, 140%); opacity:0; pointer-events:none}
.siil-sticky-fab-icon{flex-shrink:0; color:var(--gold-soft)}
.siil-sticky-fab-label{
  font-weight:600;
  font-size:12px;
  letter-spacing:0.005em;
  color:var(--paper);
}
@media(max-width:768px){
  .siil-sticky-fab{display:inline-flex}
}

/* Hero stats — second social proof block (was previously in hero-fuds) */
.hero-stats{
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line);
  font-size:12.5px;
  color:var(--ink-soft);
  letter-spacing:-0.005em;
}
.hero-stats .hero-stat{
  display:inline-flex;
  align-items:baseline;
  gap:5px;
  white-space:nowrap;
}
.hero-stats .hero-stat b{
  color:var(--ink);
  font-weight:700;
  font-size:14.5px;
  letter-spacing:-0.012em;
}
@media(max-width:520px){
  .hero-social-proof{gap:14px;margin-top:24px}
  .hero-sp-divider{display:none}
  .hero-fuds{gap:6px 14px;font-size:12px}
}
.cta-row{display:flex;gap:12px;align-items:center;margin-top:28px;flex-wrap:wrap;animation:heroCtaIn 1s var(--ease) 0.45s both}
@keyframes heroCtaIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* Apple-style buttons — pill, generous padding, hairline border on ghost */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:17px 30px;
  border-radius:999px;
  font-size:15px;
  font-weight:500;
  letter-spacing:-0.005em;
  transition:all 0.32s var(--ease);
  cursor:pointer;
  white-space:nowrap;
  font-family:inherit;
}
.btn-primary{
  background:var(--ink) !important;
  color:var(--paper) !important;
  border:1px solid var(--ink);
}
.btn-primary:hover{
  background:#000 !important;
  color:var(--paper) !important;
  transform:translateY(-1px);
}
.btn-primary:visited{color:var(--paper) !important}
.btn-ghost{
  background:transparent;
  color:var(--ink) !important;
  border:1px solid var(--line-strong);
}
.btn-ghost:hover{background:rgba(15,15,15,0.04);border-color:var(--ink);color:var(--ink) !important}
.btn-ghost:visited{color:var(--ink) !important}

.hero-microline{
  margin-top:32px;
  font-size:13px;
  color:var(--ink-muted);
  font-weight:500;
  letter-spacing:0.005em;
  animation:heroSubIn 1s var(--ease) 0.6s both;
}
.hero-microline span+span::before{content:" · ";color:var(--ink-muted);margin:0 10px;opacity:0.5}
.hero-microline .stars-mini{color:var(--gold);letter-spacing:0.04em}

/* Hero photo — Apple-product-style framing + floating bento accent */
.hero-photo-wrap{
  position:relative;
  animation:heroPhotoIn 1.3s var(--ease) 0.2s both;
}
@keyframes heroPhotoIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.hero-photo{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  aspect-ratio:3/4;
  background:#F5F2ED;
  box-shadow:0 40px 100px -28px rgba(15,15,15,0.28), 0 8px 24px rgba(15,15,15,0.06);
  transform:translateY(0);
  animation:heroPhotoFloat 8s ease-in-out infinite alternate;
}
@keyframes heroPhotoFloat{
  0%{transform:translateY(0)}
  100%{transform:translateY(-8px)}
}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 32%}

/* Floating thumbs — THREE supporting photos (mixed gender), Apple-bento style */
.hero-photo-thumb{
  position:absolute;
  width:128px;height:165px;
  border-radius:14px;
  overflow:hidden;
  background:#F0EEE9;
  border:4px solid var(--paper);
  box-shadow:0 18px 44px -10px rgba(15,15,15,0.24);
  z-index:2;
}
.hero-photo-thumb-1{
  top:10%;left:-60px;
  animation:heroThumbFloat 10s ease-in-out infinite alternate-reverse;
}
.hero-photo-thumb-2{
  top:42%;left:-22px;
  animation:heroThumbFloat2 11s ease-in-out infinite alternate;
  z-index:3;
}
.hero-photo-thumb-3{
  bottom:10%;left:-46px;
  animation:heroThumbFloat 12s ease-in-out infinite alternate;
}
.hero-photo-thumb img{width:100%;height:100%;object-fit:cover;object-position:center 18%;filter:contrast(0.97) saturate(0.95) brightness(1.02)}
@keyframes heroThumbFloat{
  0%{transform:translateY(0) rotate(-3deg)}
  100%{transform:translateY(10px) rotate(-1deg)}
}
@keyframes heroThumbFloat2{
  0%{transform:translateY(0) rotate(2deg)}
  100%{transform:translateY(-10px) rotate(4deg)}
}
@media(max-width:1180px){
  .hero-photo-thumb{width:120px;height:155px}
  .hero-photo-thumb-1{left:-44px}
  .hero-photo-thumb-2{left:-14px}
  .hero-photo-thumb-3{left:-32px}
}
@media(max-width:980px){.hero-photo-thumb{display:none}}
/* Floating review card — clean white card, gold star accent only */
.hero-photo-badge{
  position:absolute;
  bottom:48px;right:-16px;
  /* Crystal Glass — clean white, no warm bleed */
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,0.7);
  box-shadow:0 12px 40px rgba(15,15,15,0.14), inset 0 1px 0 rgba(255,255,255,0.85);
  border-radius:14px;
  padding:14px 16px;
  font-size:12.5px;
  line-height:1.38;
  color:var(--ink);
  max-width:240px;
  z-index:4;
}
.hero-photo-badge .stars{color:var(--gold);font-size:13px;letter-spacing:0.06em;margin-bottom:6px;display:block}
.hero-photo-badge .quote{
  font-family:'Albert Sans',sans-serif !important;
  font-weight:500;
  font-size:14px;
  line-height:1.4;
  letter-spacing:-0.01em;
  color:var(--ink);
}
.hero-photo-badge .who{
  display:block;
  margin-top:8px;
  font-size:11px;
  color:var(--ink-muted);
  letter-spacing:0.04em;
  font-weight:500;
}
@media(max-width:980px){
  .hero-photo{aspect-ratio:4/5;max-width:480px;margin:0 auto}
  .hero-photo-badge{left:auto;right:12px;bottom:-12px;max-width:220px;font-size:12px}
}
@media(max-width:520px){.hero-photo-badge{display:none}}

/* ======= SKELETON LOADER (placeholder for photos before they arrive) ======= */
.skeleton{
  background:linear-gradient(90deg, #F0EEE9 0%, #F8F6F1 50%, #F0EEE9 100%);
  background-size:200% 100%;
  animation:skeletonShine 1.8s var(--ease) infinite;
  border-radius:var(--radius-sm);
  position:relative;
}
.skeleton::after{
  content:attr(data-skeleton-label);
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Albert Sans',sans-serif !important;
  color:var(--ink-muted);
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  text-align:center;
  padding:12px;
  font-weight:500;
}
@keyframes skeletonShine{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}

/* ====== HERO FASHION (full-bleed editorial — luxury fashion brand vibe) ====== */
.hero-fashion{
  position:relative;
  width:100%;
  /* 78vh sweet spot — fashion editorial vibe without aggressive image crop.
     Capped at 860px so it doesn't get monstrous on tall monitors. */
  height:clamp(560px, 78vh, 860px);
  overflow:hidden;
  background:#0F0F0F;
  isolation:isolate;
  margin:0;
}
/* MOBILE/TABLET: hide landscape Hero A + divider — mobile uses portrait Hero B (variant).
   Breakpoint 980px to cover tablets in portrait + small laptops in narrow window. */
@media(max-width:980px){
  .hero-fashion,
  .hero-variant-divider{display:none !important}
}
/* DESKTOP: hide portrait Hero B + divider — desktop uses landscape Hero A only.
   Each viewport gets its optimal hero variant; comparison divider no longer needed. */
@media(min-width:981px){
  .hero-portrait,
  .hero-variant-divider{display:none !important}
}
/* Slider stack — every slide layered on top, fades cross-dissolve */
.hero-fashion__slider{position:absolute;inset:0;z-index:1}
.hero-fashion__slide{
  position:absolute;inset:0;
  opacity:0;
  transition:opacity 1.4s cubic-bezier(0.4,0,0.2,1);
  pointer-events:none;
}
.hero-fashion__slide.is-active{opacity:1;pointer-events:auto}
.hero-fashion__slide picture,
.hero-fashion__slide picture img,
.hero-fashion__img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center var(--hf-img-y, 35%);  /* per-slide override via CSS var */
  display:block;
  transform-origin:center;
}
/* Per-slide object-position-y — anchored higher when model's head is near top of frame
   to prevent cropping. Default 35%. Override per slide via data-slide-index selectors. */
.hero-fashion__slide[data-slide-index="0"]{ --hf-img-y: 35% }   /* Kim · friends garden (now position 1) */
.hero-fashion__slide[data-slide-index="1"]{ --hf-img-y: 18% }   /* Mollie · terrace v2 */
.hero-fashion__slide[data-slide-index="2"]{ --hf-img-y: 22% }   /* Amara · tuck */
.hero-fashion__slide[data-slide-index="3"]{ --hf-img-y: 25% }   /* Sofia · friends garden (now position 4) */
/* Ken Burns — each active slide slowly zooms+pans for cinematic depth */
.hero-fashion__slide.is-active .hero-fashion__img{
  animation:hfKenBurns 9s cubic-bezier(0.4,0,0.2,1) both;
}
@keyframes hfKenBurns{
  from{transform:scale(1.03) translateX(0)}
  to{transform:scale(1.10) translateX(-1%)}
}
/* Dots navigation */
.hero-fashion__dots{
  position:absolute;
  bottom:28px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
  z-index:4;
  padding:8px 14px;
  background:rgba(15,15,15,0.30);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
}
.hero-fashion__dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,0.42);
  border:none;
  padding:0;
  cursor:pointer;
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
}
.hero-fashion__dot:hover{background:rgba(255,255,255,0.72)}
.hero-fashion__dot.is-active{
  background:#fff;
  width:24px;
  border-radius:4px;
}
/* Slide arrows (desktop only — keeps mobile clean) */
.hero-fashion__arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px;height:48px;
  border-radius:50%;
  background:rgba(255,255,255,0.12);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.22);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  z-index:4;
  font-family:inherit;font-size:18px;
  transition:background 0.25s ease, transform 0.3s cubic-bezier(0.34,1.45,0.55,1);
  opacity:0;
}
.hero-fashion:hover .hero-fashion__arrow{opacity:1}
.hero-fashion__arrow:hover{background:rgba(255,255,255,0.22);transform:translateY(-50%) scale(1.06)}
.hero-fashion__arrow--prev{left:24px}
.hero-fashion__arrow--next{right:24px}
@media(max-width:760px){.hero-fashion__arrow{display:none}}
@keyframes hfImgIn{
  from{opacity:0;transform:scale(1.06)}
  to{opacity:1;transform:scale(1)}
}
/* Scrim — subtle gradient from left for text legibility, plus bottom darken */
.hero-fashion__scrim{
  position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(90deg, rgba(15,15,15,0.45) 0%, rgba(15,15,15,0.18) 38%, rgba(15,15,15,0) 65%),
    linear-gradient(180deg, rgba(15,15,15,0.05) 0%, rgba(15,15,15,0) 50%, rgba(15,15,15,0.32) 100%);
  pointer-events:none;
}
.hero-fashion__content{
  position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 max(40px, 6vw);
  max-width:1320px;
  margin:0 auto;
  color:#fff;
  pointer-events:none;
}
.hero-fashion__content > *{pointer-events:auto}
.hero-fashion__eyebrow{
  font-family:'Albert Sans',sans-serif !important;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.85);
  margin:0 0 18px;
  opacity:0;transform:translateY(20px);
}
.hero-fashion__slide.is-active .hero-fashion__eyebrow{animation:hfTextIn 1s cubic-bezier(0.16,0.84,0.32,1) 0.25s forwards}
.hero-fashion__title{
  font-family:'Albert Sans',-apple-system,sans-serif !important;
  font-size:clamp(48px, 7.6vw, 116px);
  line-height:0.95;
  letter-spacing:-0.04em;
  font-weight:600;
  color:#fff;
  margin:0 0 18px;
  text-shadow:0 1px 24px rgba(0,0,0,0.18);
  max-width:14ch;
  opacity:0;transform:translateY(20px);
}
.hero-fashion__slide.is-active .hero-fashion__title{animation:hfTextIn 1.1s cubic-bezier(0.16,0.84,0.32,1) 0.4s forwards}
.hero-fashion__title em{
  font-family:'Cormorant Garamond',Georgia,serif !important;
  font-style:italic !important;
  font-weight:500;
  color:var(--hf-accent, #E8C9A5);
  letter-spacing:-0.01em;
}
/* Per-slide tone palettes — each slide can opt-in via data-tone attribute.
   Default = warm gold. Override per slide by setting data-tone="cool|neutral|sand|rose|dark". */
.hero-fashion__slide{--hf-accent:#E8C9A5; --hf-text:#fff; --hf-eyebrow:rgba(255,255,255,0.85); --hf-sub:rgba(255,255,255,0.92); --hf-sub-soft:rgba(255,255,255,0.72)}
.hero-fashion__slide[data-tone="cool"]{--hf-accent:#A8C8D0}
.hero-fashion__slide[data-tone="sand"]{--hf-accent:#D9C5A0}
.hero-fashion__slide[data-tone="rose"]{--hf-accent:#E5C0B8}
.hero-fashion__slide[data-tone="neutral"]{--hf-accent:#F0EDE6}
/* Dark slides — for light backgrounds (very rare in editorial), inverts text to ink */
.hero-fashion__slide[data-tone="dark-on-light"]{
  --hf-text:#0F0F0F;
  --hf-eyebrow:rgba(15,15,15,0.78);
  --hf-sub:rgba(15,15,15,0.85);
  --hf-sub-soft:rgba(15,15,15,0.55);
  --hf-accent:#9A7E4F;
}
.hero-fashion__slide[data-tone="dark-on-light"] .hero-fashion__cta--primary{background:#0F0F0F;color:#fff !important}
.hero-fashion__slide[data-tone="dark-on-light"] .hero-fashion__cta--ghost{color:#0F0F0F !important;border-color:rgba(15,15,15,0.4)}
.hero-fashion__slide[data-tone="dark-on-light"] .hero-fashion__scrim{
  background:
    linear-gradient(90deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 38%, rgba(255,255,255,0) 65%),
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.30) 100%);
}
/* Apply tone variables to text */
.hero-fashion__title{color:var(--hf-text)}
.hero-fashion__eyebrow{color:var(--hf-eyebrow)}
.hero-fashion__sub{color:var(--hf-sub)}
.hero-fashion__sub span{color:var(--hf-sub-soft)}
.hero-fashion__proof{color:var(--hf-sub-soft)}
.hero-fashion__proof .hf-stars{color:var(--hf-accent)}

/* Crystal Glass review badge — one per slide, fades with its parent slide.
   Initial state hidden; activates only when its parent .hero-fashion__slide has .is-active. */
.hero-fashion__review{
  position:absolute;
  right:max(40px, 6vw);
  bottom:108px;            /* sits above dots nav with breathing room */
  z-index:5;
  width:300px;
  padding:18px 20px 16px;
  border-radius:18px;
  background:rgba(255,255,255,0.18);
  backdrop-filter:blur(28px) saturate(1.6);
  -webkit-backdrop-filter:blur(28px) saturate(1.6);
  border:1px solid rgba(255,255,255,0.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.40),
    0 22px 50px -12px rgba(0,0,0,0.32),
    0 8px 18px rgba(0,0,0,0.10);
  font-family:'Albert Sans',sans-serif !important;
  color:#fff;
  opacity:0;
  transform:translateY(16px);
}
.hero-fashion__slide.is-active .hero-fashion__review{
  animation:hfReviewIn 1s cubic-bezier(0.16,0.84,0.32,1) 1.2s forwards;
}
.hero-fashion__review .hf-r-stars{
  display:block;
  color:var(--hf-accent, #E8C9A5);
  font-size:13px;
  letter-spacing:0.06em;
  margin-bottom:8px;
}
.hero-fashion__review .hf-r-quote{
  display:block;
  font-size:14.5px;
  font-weight:500;
  letter-spacing:-0.01em;
  line-height:1.42;
  color:#fff;
  margin-bottom:10px;
}
.hero-fashion__review .hf-r-quote::before{content:"\201C"; opacity:0.5; margin-right:1px}
.hero-fashion__review .hf-r-quote::after{content:"\201D"; opacity:0.5; margin-left:1px}
.hero-fashion__review .hf-r-foot{
  display:flex;align-items:center;gap:10px;
  font-size:11.5px;
  letter-spacing:0.005em;
  line-height:1.3;
}
.hero-fashion__review .hf-r-photo{
  width:34px;height:34px;
  border-radius:50%;
  overflow:hidden;
  flex-shrink:0;
  background:rgba(255,255,255,0.15);
}
.hero-fashion__review .hf-r-photo img{width:100%;height:100%;object-fit:cover;display:block}
.hero-fashion__review .hf-r-meta{flex:1;min-width:0}
.hero-fashion__review .hf-r-meta b{display:block;font-weight:600;color:#fff;font-size:12.5px}
.hero-fashion__review .hf-r-meta span{color:rgba(255,255,255,0.7);font-size:11px}
.hero-fashion__review .hf-r-verified{
  font-size:10px;
  color:var(--hf-accent, #E8C9A5);
  font-weight:600;
  letter-spacing:0.05em;
  white-space:nowrap;
}
@keyframes hfReviewIn{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}
@media(max-width:980px){
  .hero-fashion__review{
    width:calc(100vw - 28px);max-width:340px;
    right:14px;left:14px;
    bottom:88px;
    padding:14px 16px 12px;
  }
  .hero-fashion__review .hf-r-quote{font-size:13.5px;margin-bottom:8px}
}
@media(max-width:520px){
  .hero-fashion__review{display:none}        /* mobile small: hide to keep CTAs free */
}
.hero-fashion__sub{
  font-family:'Albert Sans',sans-serif !important;
  font-size:clamp(15px, 1.4vw, 19px);
  font-weight:500;
  letter-spacing:-0.01em;
  color:rgba(255,255,255,0.92);
  margin:0 0 28px;
  max-width:42ch;
  line-height:1.45;
  opacity:0;transform:translateY(20px);
}
.hero-fashion__slide.is-active .hero-fashion__sub{animation:hfTextIn 1s cubic-bezier(0.16,0.84,0.32,1) 0.55s forwards}
.hero-fashion__sub span{display:block;color:rgba(255,255,255,0.72);font-weight:400}
.hero-fashion__actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:26px;
  opacity:0;transform:translateY(20px);
}
.hero-fashion__slide.is-active .hero-fashion__actions{animation:hfTextIn 1s cubic-bezier(0.16,0.84,0.32,1) 0.7s forwards}
.hero-fashion__cta{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Albert Sans',sans-serif !important;
  font-size:14.5px;
  font-weight:600;
  letter-spacing:-0.005em;
  padding:14px 28px;
  border-radius:999px;
  text-decoration:none;
  transition:transform 0.3s cubic-bezier(0.34,1.45,0.55,1), background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  cursor:pointer;
  white-space:nowrap;
}
.hero-fashion__cta--primary{
  background:#fff;
  color:#0F0F0F !important;
  box-shadow:0 8px 28px rgba(0,0,0,0.18), 0 1px 0 rgba(255,255,255,0.6) inset;
}
.hero-fashion__cta--primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 14px 40px rgba(0,0,0,0.28)}
.hero-fashion__cta--primary span{transition:transform 0.3s cubic-bezier(0.34,1.45,0.55,1)}
.hero-fashion__cta--primary:hover span{transform:translateX(4px)}
.hero-fashion__cta--ghost{
  background:transparent;
  color:#fff !important;
  border:1px solid rgba(255,255,255,0.5);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.hero-fashion__cta--ghost:hover{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.85);transform:translateY(-2px)}
.hero-fashion__proof{
  font-family:'Albert Sans',sans-serif !important;
  font-size:12px;
  font-weight:500;
  letter-spacing:0.02em;
  color:rgba(255,255,255,0.78);
  margin:0;
  display:flex;align-items:center;gap:8px;
  opacity:0;transform:translateY(20px);
}
.hero-fashion__slide.is-active .hero-fashion__proof{animation:hfTextIn 1s cubic-bezier(0.16,0.84,0.32,1) 0.85s forwards}
.hero-fashion__proof .hf-stars{color:#E8C9A5;letter-spacing:0.04em;font-size:13px}
@keyframes hfTextIn{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}
/* Mobile — keep editorial impact; 4:5 portrait with text bottom-anchored, more compact */
@media(max-width:760px){
  .hero-fashion{height:clamp(620px, 86vh, 780px)}
  .hero-fashion__img{object-position:center 22%}
  .hero-fashion__scrim{
    background:
      linear-gradient(180deg, rgba(15,15,15,0.18) 0%, rgba(15,15,15,0.05) 30%, rgba(15,15,15,0.55) 100%);
  }
  .hero-fashion__content{
    justify-content:flex-end;
    padding:0 22px 36px;
  }
  .hero-fashion__eyebrow{font-size:10px;letter-spacing:0.28em;margin-bottom:14px}
  .hero-fashion__title{font-size:clamp(42px, 13vw, 60px);max-width:none}
  .hero-fashion__sub{font-size:14.5px;margin-bottom:22px}
  .hero-fashion__sub span{display:inline}
  .hero-fashion__actions{flex-direction:column;align-items:stretch;gap:10px;width:100%;max-width:340px}
  .hero-fashion__cta{justify-content:center;padding:13px 24px;font-size:14px}
  .hero-fashion__proof{font-size:11.5px}
}

/* ============================================================
   ===== HERO VARIANT B — PORTRAIT MOBILE CONCEPT  =============
   For comparison only. Sits BELOW main landscape hero.
   On desktop: portrait centered with dark blurred bg sides (Apple iPhone-pro style).
   On mobile: portrait fills viewport (native aspect-ratio match).
   ============================================================ */
.hero-variant-divider{
  display:flex;align-items:center;gap:14px;
  padding:32px max(40px, 6vw);
  background:#F5F2ED;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.hero-variant-divider .hvd-line{flex:1;height:1px;background:linear-gradient(90deg, transparent, rgba(15,15,15,0.2), transparent)}
.hero-variant-divider .hvd-label{
  font-family:'Albert Sans',sans-serif !important;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--gold-deep);
  white-space:nowrap;
}
.hero-portrait{
  position:relative;
  width:100%;
  height:clamp(620px, 86vh, 920px);
  overflow:hidden;
  background:#0F0F0F;
  isolation:isolate;
  margin:0;
}
.hero-portrait__slider{position:absolute;inset:0;z-index:1}
.hero-portrait__slide{
  position:absolute;inset:0;
  opacity:0;
  transition:opacity 1.4s cubic-bezier(0.4,0,0.2,1);
  pointer-events:none;
}
.hero-portrait__slide.is-active{opacity:1;pointer-events:auto}
/* On desktop: blurred background fill + portrait image centered (Apple iPhone Pro style) */
.hero-portrait__img{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  height:96%;
  width:auto;
  max-width:96%;
  object-fit:contain;
  z-index:2;
  box-shadow:0 30px 80px -16px rgba(0,0,0,0.45), 0 12px 30px rgba(0,0,0,0.25);
  border-radius:8px;
  animation:hpKenBurns 9s cubic-bezier(0.4,0,0.2,1) both;
}
.hero-portrait__slide.is-active .hero-portrait__img{
  animation:hpKenBurns 9s cubic-bezier(0.4,0,0.2,1) both;
}
/* Blurred bg fill behind centered portrait (uses same image, scaled up + blurred) */
.hero-portrait__slide::before{
  content:"";
  position:absolute;inset:0;z-index:1;
  background-image:var(--hp-bg-img, none);
  background-size:cover;
  background-position:center;
  filter:blur(40px) saturate(0.9) brightness(0.55);
  transform:scale(1.1);
}
.hero-portrait__slide[data-pslide-index="0"]{--hp-bg-img:url('https://www.siilostomy.com/wp-content/uploads/2026/05/home-hero/kim-cream-friends-garden-portrait.jpg')}
.hero-portrait__slide[data-pslide-index="1"]{--hp-bg-img:url('https://www.siilostomy.com/wp-content/uploads/2026/05/home-hero/amara-black-tuck-portrait.jpg')}
.hero-portrait__slide[data-pslide-index="2"]{--hp-bg-img:url('https://www.siilostomy.com/wp-content/uploads/2026/05/home-hero/reed-navy-belt-active-portrait.jpg')}
.hero-portrait__slide[data-pslide-index="3"]{--hp-bg-img:url('https://www.siilostomy.com/wp-content/uploads/2026/05/home-hero/men-navy-beach-exit-portrait.jpg')}
@keyframes hpKenBurns{
  from{transform:translate(-50%,-50%) scale(1.0)}
  to{transform:translate(-50%,-50%) scale(1.04)}
}
.hero-portrait__scrim{
  position:absolute;inset:0;z-index:3;
  background:linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.4) 100%);
  pointer-events:none;
}
.hero-portrait__content{
  position:absolute;
  bottom:108px;left:50%;
  transform:translateX(-50%);
  z-index:4;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  width:min(560px, 88vw);
  color:#fff;
  pointer-events:none;
}
.hero-portrait__content > *{pointer-events:auto}
.hero-portrait__slide:not(.is-active) .hero-portrait__eyebrow,
.hero-portrait__slide:not(.is-active) .hero-portrait__title,
.hero-portrait__slide:not(.is-active) .hero-portrait__sub,
.hero-portrait__slide:not(.is-active) .hero-portrait__actions,
.hero-portrait__slide:not(.is-active) .hero-portrait__proof{opacity:0;transform:translateY(20px)}
.hero-portrait__eyebrow{
  font-family:'Albert Sans',sans-serif !important;font-size:10.5px;font-weight:700;
  letter-spacing:0.32em;text-transform:uppercase;
  color:rgba(255,255,255,0.92);
  margin:0 0 14px;
  text-shadow:0 1px 14px rgba(0,0,0,0.4);
  opacity:0;transform:translateY(20px);
}
.hero-portrait__slide.is-active .hero-portrait__eyebrow{animation:hpTextIn 1s cubic-bezier(0.16,0.84,0.32,1) 0.25s forwards}
.hero-portrait__title{
  font-family:'Albert Sans',-apple-system,sans-serif !important;
  font-size:clamp(40px, 5vw, 76px);
  line-height:0.96;letter-spacing:-0.04em;font-weight:600;color:#fff;
  margin:0 0 14px;
  /* Stronger text-shadow → keeps title legible on photos with light areas (cream blouses, sand, sky) */
  text-shadow:
    0 2px 18px rgba(0,0,0,0.55),
    0 1px 4px rgba(0,0,0,0.35);
  opacity:0;transform:translateY(20px);
}
.hero-portrait__slide.is-active .hero-portrait__title{animation:hpTextIn 1.1s cubic-bezier(0.16,0.84,0.32,1) 0.4s forwards}
.hero-portrait__title em{
  font-family:'Cormorant Garamond',Georgia,serif !important;
  font-style:italic !important;font-weight:500;
  color:var(--hf-accent, #E8C9A5);
  letter-spacing:-0.01em;
  /* Stronger shadow on italic — preserves contrast against light photos */
  text-shadow:
    0 2px 14px rgba(0,0,0,0.65),
    0 1px 3px rgba(0,0,0,0.45);
}
.hero-portrait__sub{
  font-family:'Albert Sans',sans-serif !important;font-size:clamp(13px, 1.2vw, 16px);font-weight:500;
  letter-spacing:-0.01em;color:rgba(255,255,255,0.92);
  margin:0 0 22px;line-height:1.45;
  max-width:42ch;
  text-shadow:0 1px 12px rgba(0,0,0,0.3);
  opacity:0;transform:translateY(20px);
}
.hero-portrait__slide.is-active .hero-portrait__sub{animation:hpTextIn 1s cubic-bezier(0.16,0.84,0.32,1) 0.55s forwards}
.hero-portrait__actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:14px;opacity:0;transform:translateY(20px)}
.hero-portrait__slide.is-active .hero-portrait__actions{animation:hpTextIn 1s cubic-bezier(0.16,0.84,0.32,1) 0.7s forwards}
.hero-portrait__cta{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Albert Sans',sans-serif !important;font-size:13.5px;font-weight:600;
  letter-spacing:-0.005em;padding:11px 22px;border-radius:999px;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform 0.3s cubic-bezier(0.34,1.45,0.55,1), background 0.3s ease;
}
.hero-portrait__cta--primary{background:#fff;color:#0F0F0F !important;box-shadow:0 8px 24px rgba(0,0,0,0.28)}
.hero-portrait__cta--primary:hover{transform:translateY(-2px) scale(1.02)}
.hero-portrait__cta--ghost{background:transparent;color:#fff !important;border:1px solid rgba(255,255,255,0.55);backdrop-filter:blur(8px)}
.hero-portrait__cta--ghost:hover{background:rgba(255,255,255,0.12);transform:translateY(-2px)}
.hero-portrait__proof{
  font-family:'Albert Sans',sans-serif !important;font-size:11.5px;font-weight:500;
  letter-spacing:0.02em;color:rgba(255,255,255,0.78);margin:0;
  display:flex;align-items:center;gap:6px;justify-content:center;
  opacity:0;transform:translateY(20px);
}
.hero-portrait__slide.is-active .hero-portrait__proof{animation:hpTextIn 1s cubic-bezier(0.16,0.84,0.32,1) 0.85s forwards}
.hero-portrait__proof .hp-stars{color:var(--hf-accent, #E8C9A5);font-size:12.5px;letter-spacing:0.04em}
@keyframes hpTextIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* Dots — bottom-center */
.hero-portrait__dots{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  display:flex;gap:10px;z-index:5;padding:8px 14px;
  background:rgba(15,15,15,0.30);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-radius:999px;border:1px solid rgba(255,255,255,0.12);
}
.hero-portrait__dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.42);border:none;padding:0;cursor:pointer;transition:all 0.4s cubic-bezier(0.4,0,0.2,1)}
.hero-portrait__dot:hover{background:rgba(255,255,255,0.72)}
.hero-portrait__dot.is-active{background:#fff;width:24px;border-radius:4px}

/* Arrows */
.hero-portrait__arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,0.12);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.22);
  color:#fff;display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:6;font-family:inherit;font-size:18px;
  transition:background 0.25s, transform 0.3s cubic-bezier(0.34,1.45,0.55,1);
  opacity:0;
}
.hero-portrait:hover .hero-portrait__arrow{opacity:1}
.hero-portrait__arrow:hover{background:rgba(255,255,255,0.22);transform:translateY(-50%) scale(1.06)}
.hero-portrait__arrow--prev{left:24px}
.hero-portrait__arrow--next{right:24px}
@media(max-width:760px){.hero-portrait__arrow{display:none}}

/* Crystal Glass award badge — top-right of portrait hero. Authority signal. */
.hp-award{
  position:absolute;
  top:24px;right:24px;
  z-index:6;
  display:flex;align-items:center;gap:12px;
  padding:11px 16px 11px 13px;
  border-radius:14px;
  background:rgba(255,255,255,0.20);
  backdrop-filter:blur(22px) saturate(1.5);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid rgba(255,255,255,0.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 10px 28px rgba(0,0,0,0.24);
  font-family:'Albert Sans',sans-serif !important;
  color:#fff;
  text-decoration:none;
  opacity:0;transform:translateY(-12px);
  animation:hpAwardIn 1s cubic-bezier(0.16,0.84,0.32,1) 1.4s forwards;
}
.hp-award__icon{
  width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  color:#E8C9A5;          /* gold trophy outline — universal "award" symbol */
}
.hp-award__icon svg{width:30px;height:30px;display:block}
.hp-award__text{display:flex;flex-direction:column;line-height:1.18}
.hp-award__text b{font-size:11.5px;font-weight:700;letter-spacing:0.03em;color:#fff}
.hp-award__text span{font-size:9.5px;font-weight:500;color:rgba(255,255,255,0.82);letter-spacing:0.08em;text-transform:uppercase;margin-top:2px}
@keyframes hpAwardIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:980px){
  .hp-award{top:16px;right:16px;padding:9px 13px 9px 11px;border-radius:12px;gap:10px}
  .hp-award__icon{width:30px;height:30px}
  .hp-award__icon svg{width:26px;height:26px}
  .hp-award__text b{font-size:11px}
  .hp-award__text span{font-size:9px}
}

/* MOBILE/TABLET: portrait fills viewport exactly (no min/max constraint, fills 100svh).
   Breakpoint matched with Hero A hide rule above (980px). */
@media(max-width:980px){
  .hero-portrait{
    height:100svh;
    min-height:100svh;
    max-height:none;
    width:100vw;
  }
  @supports not (height: 100svh){
    .hero-portrait{height:100vh; min-height:100vh}
  }
  .hero-portrait__img{
    position:absolute !important;
    top:0;left:0;
    transform:none;
    width:100% !important;
    height:100% !important;
    max-width:none;
    object-fit:cover;
    object-position:center center;        /* model centered, no offset */
    border-radius:0;
    box-shadow:none;
    animation:none;                        /* re-set below */
  }
  .hero-portrait__slide.is-active .hero-portrait__img{animation:hpKenBurnsMobile 9s cubic-bezier(0.4,0,0.2,1) both}
  @keyframes hpKenBurnsMobile{
    from{transform:scale(1.03)}
    to{transform:scale(1.10)}
  }
  .hero-portrait__slide::before{display:none}  /* hide blurred bg, image fills */
  /* Bottom scrim — strong enough to make white text readable on any photo
     (light cream blouses, sand, sky), starts at 45% to keep top half clean. */
  .hero-portrait__scrim{
    background:
      linear-gradient(180deg,
        rgba(0,0,0,0.20) 0%,
        rgba(0,0,0,0) 25%,
        rgba(0,0,0,0) 45%,
        rgba(0,0,0,0.32) 65%,
        rgba(0,0,0,0.62) 100%);
  }
  /* Content positioned high enough to keep stars + dots inside 100svh viewport
     AND clear Brevo chat (left ~24-80px) + back-to-top arrow (right ~24-80px). */
  .hero-portrait__content{
    bottom:160px;        /* lifted from 120 → 160 — leaves 160px for proof + dots stack below */
    width:calc(100vw - 32px);
    padding:0 16px;
  }
  .hero-portrait__title{font-size:clamp(32px, 9.5vw, 46px); line-height:0.96; margin-bottom:10px}
  .hero-portrait__eyebrow{font-size:10px; margin-bottom:10px}
  .hero-portrait__sub{font-size:13px; margin-bottom:14px; line-height:1.4}
  .hero-portrait__actions{flex-direction:column;width:100%;max-width:300px;gap:7px;margin-bottom:10px}
  .hero-portrait__cta{justify-content:center;padding:10px 20px;font-size:13px}
  .hero-portrait__proof{font-size:11px}
  /* Dots between content bottom (proof) and the chat-icon zone — visible above Brevo */
  .hero-portrait__dots{bottom:100px; padding:6px 12px}
  .hero-portrait__dot{width:7px; height:7px}
  .hero-portrait__dot.is-active{width:20px}
}

/* Authority strip — siil-brands style (matches /en/ostomy-panties-siil-ostomy/),
   compressed to ~86px to match prior home preview height */
.authority-strip,
.siil-brands{
  background:#FFFFFF;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:14px 0 12px !important;
  margin:24px 0 !important;     /* breathing room top + bottom */
  overflow:hidden;
  line-height:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  box-shadow:0 1px 0 rgba(15,15,15,.04), 0 -1px 0 rgba(15,15,15,.04);
}
@media(max-width:520px){
  .siil-proto-root section.authority-strip,
  .authority-strip,
  .siil-brands{padding:8px 0 6px !important; margin:14px 0 !important}
}
.authority-eyebrow,
.siil-brands__eyebrow{
  display:block;
  text-align:center;
  font-size:9px;
  font-weight:600;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--ink-muted);
  margin:0 0 4px;
  line-height:1.3;
  padding:0;
}
.siil-brands__strip{
  position:relative;
  overflow:hidden;
  width:100%;
  line-height:0;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
/* Track wraps SIX identical sets. Each set is a flex row; -16.667% per cycle
   advances by EXACTLY one set's width. With 6 sets the track is always wider
   than 2x viewport (even on 4K monitors), preventing white-space tail. */
.siil-brands__track{
  display:flex;
  align-items:center;
  width:max-content;
  animation:siilBrandsScroll 60s linear infinite;
  line-height:0;
}
.siil-brands__set{
  display:flex;
  align-items:center;
  gap:36px;
  padding-right:36px;          /* ← critical for seamless loop boundary */
  flex:0 0 auto;
}
.siil-brands:hover .siil-brands__track,
.siil-brands__strip:hover .siil-brands__track{animation-play-state:paused}
@keyframes siilBrandsScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-16.6667%)}
}
.siil-proto-root .siil-brands__logo,
.siil-brands__logo{
  flex:0 0 auto;
  height:52px !important;       /* bumped 36 -> 52 for proper visual weight */
  width:auto;
  max-width:170px;
  object-fit:contain;
  object-position:center;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
  transition:transform .3s var(--ease);
  border-radius:4px;
}
.siil-brands__logo:hover{transform:scale(1.04)}
@media(max-width:768px){
  .siil-brands__set{gap:28px;padding-right:28px}
  .siil-proto-root .siil-brands__logo,
  .siil-brands__logo{height:38px !important;max-width:140px}
}
/* Wordmark styled — for brands without logo image yet (Apple-grade typography fallback) */
.wordmark{
  font-family:'Albert Sans',sans-serif !important;
  font-size:24px;
  font-weight:600;
  letter-spacing:-0.02em;
  text-transform:none;
  color:var(--ink);
  line-height:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
}
.wordmark-uoaa{font-weight:800;letter-spacing:0.16em;font-size:21px;text-transform:uppercase}
.wordmark-wocn{font-weight:800;letter-spacing:0.14em;font-size:21px;text-transform:uppercase}
.wordmark-wcet{font-weight:800;letter-spacing:0.16em;font-size:21px;text-transform:uppercase}
.wordmark-stealth{font-weight:700;letter-spacing:-0.025em;font-size:24px;font-style:italic !important}
.wordmark-nuhope{font-weight:800;letter-spacing:-0.02em;font-size:24px;text-transform:uppercase}
.wordmark-johnshopkins{font-family:Georgia,'Times New Roman',serif !important;font-weight:600;font-size:22px;letter-spacing:0.005em}
.wordmark-mskcc{font-family:Georgia,'Times New Roman',serif !important;font-weight:500;font-size:20px;letter-spacing:0.05em;text-transform:uppercase}
.wordmark-ostomycanada{font-weight:800;font-size:21px;letter-spacing:0.03em}
.wordmark-colostomyuk{font-weight:700;font-size:21px;letter-spacing:0.03em}
.wordmark-crohns{font-family:Georgia,'Times New Roman',serif !important;font-style:italic !important;font-weight:600;font-size:21px}
@media(max-width:768px){
  .marquee-track{gap:36px;animation-duration:30s}
  .marquee-item{font-size:17px}
  .authority-strip{padding:18px 0 20px}
}

/* ======= SECTION 2c: PAIN POINT — Problem · Agitate · Solve (ThrillX) ======= */
.painpoint{
  background:var(--paper);
  padding:56px 0;
  border-bottom:1px solid var(--line);
}
.painpoint-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
  max-width:1100px;
  margin:0 auto;
}
@media(max-width:980px){.painpoint-grid{grid-template-columns:1fr;gap:40px}}
.painpoint-text .eyebrow{margin-bottom:18px;display:block;color:var(--gold-deep)}
.painpoint-text h2,
.painpoint-text .bc-h2{
  font-family:'Albert Sans',sans-serif !important;
  font-size:clamp(30px,3.2vw,44px);
  line-height:1.06;
  letter-spacing:-0.03em;
  font-weight:600;
  color:var(--ink);
  margin-bottom:20px;
  max-width:520px;
}
.painpoint-text h2 em,
.painpoint-text .bc-h2 em{
  font-family:'Cormorant Garamond',Georgia,serif !important;
  font-style:italic !important;
  font-weight:500;
}
.painpoint-text p{
  font-size:17px;
  line-height:1.55;
  color:var(--ink-soft);
  letter-spacing:-0.005em;
  margin-bottom:14px;
}
.painpoint-text p:last-child{margin-bottom:0;color:var(--ink);font-weight:500}
.painpoint-list{
  list-style:none;
  margin:24px 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.painpoint-list li{
  display:flex;
  align-items:flex-start;
  gap:14px;
  font-size:16px;
  line-height:1.5;
  color:var(--ink);
  letter-spacing:-0.005em;
}
.painpoint-list li::before{
  content:"";
  flex-shrink:0;
  width:8px;height:8px;
  border-radius:50%;
  background:transparent;
  border:1.5px solid var(--ink-muted);
  margin-top:8px;
}
.painpoint-cta{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap}
.painpoint-photo-cell{position:relative}
.painpoint-photo{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  aspect-ratio:4/5;
  background:var(--paper-warm);
  box-shadow:0 8px 32px rgba(15,15,15,0.08);
}
.painpoint-photo img{width:100%;height:100%;object-fit:cover}
.painpoint-photo-thumb{
  position:absolute;
  top:14%;left:-58px;
  width:140px;height:180px;
  border-radius:14px;
  overflow:hidden;
  background:#F0EEE9;
  border:4px solid var(--paper);
  box-shadow:0 18px 44px -10px rgba(15,15,15,0.24);
  z-index:3;
  animation:heroThumbFloat 11s ease-in-out infinite alternate;
}
.painpoint-photo-thumb img{width:100%;height:100%;object-fit:cover}
@media(max-width:1100px){.painpoint-photo-thumb{width:110px;height:140px;left:-30px}}
@media(max-width:980px){.painpoint-photo-thumb{display:none}}
.painpoint-photo-overlay{
  position:absolute;
  left:24px;right:24px;bottom:24px;
  /* Crystal Glass — clean white, no warm bleed */
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.7);
  box-shadow:0 8px 32px rgba(15,15,15,0.10), inset 0 1px 0 rgba(255,255,255,0.85);
  border-radius:var(--radius-sm);
  padding:18px 22px;
  display:flex;
  align-items:center;
  gap:18px;
}
.painpoint-photo-stat{
  font-family:'Albert Sans',sans-serif !important;
  font-size:48px;
  line-height:0.95;
  letter-spacing:-0.04em;
  font-weight:700;
  color:var(--ink);
  flex-shrink:0;
}
.painpoint-photo-stat .accent{
  font-family:'Cormorant Garamond',Georgia,serif !important;
  font-style:italic !important;
  font-weight:500;
  color:var(--gold-deep);
}
.painpoint-photo-stat-label{
  font-size:13px;
  line-height:1.4;
  color:var(--ink-soft);
  letter-spacing:-0.005em;
}

/* ======= CONFIDENCE SECTION — image-left, text-right (reverse of Pain Point) ======= */
.confidence{
  background:var(--paper-warm);
  padding:56px 0;
  border-bottom:1px solid var(--line);
}
.confidence-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
  max-width:1100px;
  margin:0 auto;
}
@media(max-width:980px){.confidence-grid{grid-template-columns:1fr;gap:40px}}
/* Reverse modifier — image goes RIGHT, text goes LEFT (used by Nurses section so it alternates with Confidence) */
.confidence-grid--reverse .confidence-photo{order:2}
.confidence-grid--reverse .confidence-text{order:1}
@media(max-width:980px){
  .confidence-grid--reverse .confidence-photo{order:1}
  .confidence-grid--reverse .confidence-text{order:2}
}
.confidence-photo-cell{position:relative}
.confidence-photo{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  aspect-ratio:4/5;
  background:#F5F2ED;
  box-shadow:0 8px 32px rgba(15,15,15,0.08);
}
.confidence-photo img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.confidence-photo-thumb{
  position:absolute;
  top:14%;right:-58px;
  width:140px;height:180px;
  border-radius:14px;
  overflow:hidden;
  background:#F0EEE9;
  border:4px solid var(--paper);
  box-shadow:0 18px 44px -10px rgba(15,15,15,0.24);
  z-index:3;
  animation:heroThumbFloat2 12s ease-in-out infinite alternate-reverse;
}
.confidence-photo-thumb img{width:100%;height:100%;object-fit:cover}
@media(max-width:1100px){.confidence-photo-thumb{width:110px;height:140px;right:-30px}}
@media(max-width:980px){.confidence-photo-thumb{display:none}}
.confidence-photo-overlay{
  position:absolute;
  left:24px;right:24px;bottom:24px;
  /* Crystal Glass — clean white, no warm bleed */
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.7);
  box-shadow:0 8px 32px rgba(15,15,15,0.10), inset 0 1px 0 rgba(255,255,255,0.85);
  border-radius:var(--radius-sm);
  padding:18px 22px;
  display:flex;
  align-items:center;
  gap:18px;
}
.confidence-text .eyebrow{margin-bottom:18px;display:block;color:var(--gold-deep)}
.confidence-text h2,
.confidence-text .bc-h2{
  font-family:'Albert Sans',sans-serif !important;
  font-size:clamp(30px,3.2vw,44px);
  line-height:1.06;
  letter-spacing:-0.03em;
  font-weight:600;
  color:var(--ink);
  margin-bottom:20px;
  max-width:520px;
}
.confidence-text h2 em,
.confidence-text .bc-h2 em{
  font-family:'Cormorant Garamond',Georgia,serif !important;
  font-style:italic !important;
  font-weight:500;
}
.confidence-text p{
  font-size:17px;
  line-height:1.55;
  color:var(--ink-soft);
  letter-spacing:-0.005em;
  margin-bottom:14px;
}
.confidence-text p:last-of-type{margin-bottom:0;color:var(--ink);font-weight:500}
.confidence-cta{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:980px){
  .confidence-grid .confidence-photo{order:1}
  .confidence-grid .confidence-text{order:2}
}

/* ======= SECTION 3: SIIL FAMILY MOSAIC ======= */
.family{background:var(--paper-warm)}
.family-header{text-align:center;margin-bottom:64px}
.family-mosaic{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:280px;
  gap:12px;
}
.family-mosaic .item{
  border-radius:var(--radius-sm);
  overflow:hidden;
  position:relative;
  aspect-ratio:1/1;
  display:block;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
}
.family-mosaic .item.tall{grid-row:span 2;aspect-ratio:auto}
.family-mosaic .item.wide{grid-column:span 2;aspect-ratio:auto}
.family-mosaic .item img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s var(--ease);filter:contrast(0.97) saturate(0.96) brightness(1.01)}
.family-mosaic .item:hover img{transform:scale(1.03)}
.family-mosaic .item .tag{
  position:absolute;
  bottom:10px;left:10px;right:10px;
  padding:8px 12px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:8px;
  font-size:11px;
  letter-spacing:0.04em;
  color:var(--ink);
  opacity:0;
  transform:translateY(6px);
  transition:all 0.32s var(--ease);
}
.family-mosaic .item:hover .tag{opacity:1;transform:translateY(0)}
.family-cta{margin-top:40px;text-align:center}
@media(max-width:980px){
  .family-mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px}
  .family-mosaic .item.wide{grid-column:span 1}
  .family-mosaic .item.tall{grid-row:span 1}
}

/* ======= SECTION 4: 3 PROMISES — Apple-clean cards ======= */
.promises{background:var(--paper)}
.promises-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:64px;
}
@media(max-width:980px){.promises-grid{grid-template-columns:1fr;gap:16px}}
.promise-card{
  position:relative;
  aspect-ratio:3/4;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--paper-warm);
  transition:all 0.4s var(--ease);
}
.promise-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-card);
}
.promise-photo{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:var(--paper-warm);
}
.promise-photo img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform 0.6s var(--ease);
  filter:contrast(0.97) saturate(0.96) brightness(1.01);
}
.promise-card:hover .promise-photo img{transform:scale(1.04)}
.promise-photo-eyebrow{
  position:absolute;
  top:14px;left:14px;
  /* Crystal Glass — clean white, no warm bleed */
  background:rgba(255,255,255,0.7);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.7);
  box-shadow:0 2px 12px rgba(15,15,15,0.08), inset 0 1px 0 rgba(255,255,255,0.85);
  border-radius:6px;
  padding:5px 10px;
  font-size:10px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink);
  z-index:2;
}
.promise-content{
  position:absolute;
  left:16px;right:16px;bottom:16px;
  /* Crystal Glass — clean white, no warm bleed */
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.7);
  box-shadow:0 8px 32px rgba(15,15,15,0.10), inset 0 1px 0 rgba(255,255,255,0.85);
  border-radius:var(--radius-sm);
  padding:18px 20px;
  display:flex;
  flex-direction:column;
  gap:8px;
  z-index:2;
}
.promise-icon{
  display:none;
}
.promise-title{
  font-family:'Albert Sans',sans-serif !important;
  font-size:19px;
  line-height:1.18;
  font-weight:600;
  color:var(--ink);
  letter-spacing:-0.025em;
}
.promise-body{
  font-size:13.5px;
  line-height:1.45;
  color:var(--ink-soft);
  letter-spacing:-0.005em;
}
.promise-link{
  margin-top:6px;
  font-size:12.5px;
  font-weight:600;
  color:var(--ink);
  letter-spacing:0.005em;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.promise-link::after{content:"→";transition:transform 0.32s var(--ease)}
.promise-card:hover .promise-link::after{transform:translateX(4px)}

/* ======= SECTION 5: WALL OF LOVE — static grid, NO carousel (ThrillX rule) ======= */
.testimonials{background:var(--paper-warm)}
.testimonials-track{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:64px;
}
@media(max-width:980px){
  .testimonials-track{grid-template-columns:repeat(2,1fr);gap:14px}
}
@media(max-width:520px){
  .testimonials-track{grid-template-columns:1fr;gap:14px}
}
.testimonial{
  background:var(--paper-warm);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:32px 28px;
  display:flex;
  flex-direction:column;
  gap:20px;
  scroll-snap-align:start;
  transition:all 0.4s var(--ease);
}
.testimonial:hover{border-color:var(--line-strong);box-shadow:var(--shadow-card);transform:translateY(-2px)}
.testimonial-stars{color:var(--gold);font-size:13px;letter-spacing:0.06em}
.testimonial-photo{
  width:48px;height:48px;
  border-radius:50%;
  overflow:hidden;
  background:#F0EEE9;
  flex-shrink:0;
}
.testimonial-photo img{width:100%;height:100%;object-fit:cover;filter:contrast(0.97) saturate(0.96) brightness(1.01)}
.testimonial-quote{
  font-family:'Albert Sans',sans-serif !important;
  font-size:19px;
  line-height:1.35;
  color:var(--ink);
  font-weight:500;
  letter-spacing:-0.015em;
}
.testimonial-footer{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:auto;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.testimonial-meta{
  font-size:13px;
  color:var(--ink-soft);
  letter-spacing:-0.005em;
  flex:1;
  line-height:1.4;
}
.testimonial-meta b{font-weight:600;color:var(--ink);display:block}
.testimonial-meta .product-line{font-size:12px;color:var(--ink-muted)}
.verified{
  display:inline-flex;
  align-items:center;
  gap:4px;
  background:transparent;
  color:var(--ink-soft);
  padding:3px 0;
  font-size:11px;
  font-weight:500;
  letter-spacing:0.04em;
  text-transform:uppercase;
}
.verified::before{content:"✓ ";color:var(--gold);font-weight:600}
.testimonials-cta{margin-top:56px;text-align:center}

/* ======= SECTION 6: COLLECTION CARDS — Apple-product-card style ======= */
.collections{background:var(--paper-warm)}
.collections-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-top:64px;
}
@media(max-width:980px){.collections-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.collections-grid{grid-template-columns:1fr}}
.collection{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  aspect-ratio:3/4;
  background:#F5F2ED;
  cursor:pointer;
  transition:all 0.4s var(--ease);
  border:1px solid var(--line);
}
.collection:hover{transform:translateY(-3px);box-shadow:var(--shadow-card);border-color:var(--line-strong)}
.collection-bg{position:absolute;inset:0}
.collection-bg img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s var(--ease)}
.collection:hover .collection-bg img{transform:scale(1.04)}
.collection-overlay{
  position:absolute;
  bottom:0;left:0;right:0;
  padding:24px 22px 22px;
  background:linear-gradient(180deg, transparent 0%, rgba(15,15,15,0.0) 30%, rgba(15,15,15,0.7) 100%);
  color:var(--paper);
}
.collection-title{
  font-family:'Albert Sans',sans-serif !important;
  font-size:20px;
  line-height:1.15;
  font-weight:600;
  margin-bottom:6px;
  letter-spacing:-0.02em;
}
.collection-hook{
  font-size:13px;
  line-height:1.45;
  opacity:0.88;
  letter-spacing:-0.005em;
}
.collection-link{
  margin-top:14px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
}
.collection-link::after{content:"→";transition:transform 0.32s var(--ease);font-weight:400;letter-spacing:0;font-size:14px}
.collection:hover .collection-link::after{transform:translateX(4px)}

/* ======= SECTION 6b: COMPARISON TABLE — SIIL vs ordinary ostomy underwear ======= */
.compare{background:var(--paper-warm)}
.compare-table{
  margin:48px auto 0;
  max-width:760px;
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  background:var(--paper);
  box-shadow:0 1px 1px rgba(15,15,15,0.04), 0 12px 40px rgba(15,15,15,0.04);
}
.compare-row{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr;
  align-items:stretch;
}
.compare-row:not(:last-child){border-bottom:1px solid var(--line)}
.compare-cell{
  padding:18px 20px;
  font-size:14.5px;
  color:var(--ink);
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1.35;
}
.compare-cell.compare-feature{
  text-align:left;
  font-weight:500;
  letter-spacing:-0.005em;
  justify-content:flex-start;
}
.compare-row.compare-head .compare-cell{
  font-size:11px;
  font-weight:600;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink-muted);
  background:var(--paper-warm);
  padding:14px 16px;
}
.compare-row.compare-head .compare-cell.compare-feature{color:var(--ink)}
.compare-row.compare-head .compare-cell.compare-us{
  background:var(--ink);
  color:var(--paper);
  letter-spacing:0.04em;
  font-size:13px;
}
.compare-cell.compare-us{
  background:rgba(184,155,106,0.04);
  font-weight:600;
}
.compare-cell.compare-them{color:var(--ink-muted)}
.tick{color:var(--gold-deep);font-weight:700;font-size:20px;line-height:1}
.cross{color:var(--ink-muted);font-weight:400;font-size:20px;line-height:1;opacity:0.6}
.compare-cta{margin-top:36px;text-align:center}
.compare-cta-fud{
  margin-top:14px;
  font-size:12.5px;
  color:var(--ink-muted);
  letter-spacing:-0.005em;
}
@media(max-width:640px){
  .compare-table{margin-top:28px;border-radius:14px}
  .compare-row{grid-template-columns:1.6fr 1fr 1fr}
  .compare-cell{padding:12px 8px;font-size:12.5px}
  .compare-cell.compare-feature{padding-left:14px}
  .compare-row.compare-head .compare-cell{padding:10px 8px;font-size:9px;letter-spacing:0.12em;line-height:1.25}
  .compare-row.compare-head .compare-cell.compare-us{font-size:11px;letter-spacing:0.04em}
  .tick,.cross{font-size:18px}
}

/* HIW + Compare section CTAs (bottom-of-section conversion path) */
.howitworks-cta,
.compare-cta{margin-top:48px;text-align:center}
.howitworks-cta-fud,
.compare-cta-fud{
  margin-top:14px;
  font-size:12.5px;
  color:var(--ink-muted);
  letter-spacing:-0.005em;
}

/* ======= SECTION 6c: HOW IT WORKS — 3 simple steps (ThrillX) ======= */
.howitworks{
  background:var(--paper);
  padding:64px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.howitworks-header{text-align:center;margin-bottom:80px;max-width:680px;margin-left:auto;margin-right:auto}
.howitworks-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
  position:relative;
}
@media(max-width:768px){.howitworks-grid{grid-template-columns:1fr;gap:40px}}
.howstep{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:18px;
  text-align:left;
}
.howstep-photo{
  position:relative;
  aspect-ratio:4/5;
  border-radius:var(--radius);
  overflow:hidden;
  background:#F5F2ED;
  box-shadow:0 8px 32px rgba(15,15,15,0.08);
}
.howstep-photo img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform 0.6s var(--ease);
}
.howstep:hover .howstep-photo img{transform:scale(1.04)}
.howstep-num-badge{
  position:absolute;
  top:14px;left:14px;
  /* Crystal Glass numbered badge */
  background:rgba(255,255,255,0.7);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.7);
  box-shadow:0 2px 12px rgba(15,15,15,0.08), inset 0 1px 0 rgba(255,255,255,0.85);
  width:38px;height:38px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Cormorant Garamond',Georgia,serif !important;
  font-size:18px;
  font-weight:600;
  font-style:italic !important;
  color:var(--gold-deep);
  letter-spacing:-0.02em;
  z-index:2;
}
.howstep-title{
  font-family:'Albert Sans',sans-serif !important;
  font-size:22px;
  line-height:1.2;
  font-weight:600;
  color:var(--ink);
  letter-spacing:-0.025em;
}
.howstep-body{
  font-size:15px;
  line-height:1.55;
  color:var(--ink-soft);
  letter-spacing:-0.005em;
}

/* ======= SECTION 7: 3 PILLARS — minimal Apple ======= */
.pillars{background:var(--paper);padding:88px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pillars-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:48px;
  margin-top:40px;
}
@media(max-width:768px){.pillars-grid{grid-template-columns:1fr;gap:32px}}
.pillar{display:flex;flex-direction:column;gap:10px;padding:8px 0}
.pillar-icon{font-size:22px;margin-bottom:4px;filter:saturate(0.85)}
.pillar-title{font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-0.015em}
.pillar-body{font-size:14.5px;line-height:1.55;color:var(--ink-soft);letter-spacing:-0.005em}

/* ======= SECTION 8: TRUSTED & RECOGNISED — Apple B/W ======= */
.trust{
  background:var(--paper);
  color:var(--ink);
  padding:128px 0;
  position:relative;
}
.trust-header{text-align:center;margin-bottom:80px;position:relative;z-index:1}
.trust-header .eyebrow{color:var(--gold-deep)}
.trust-header h2,
.trust-header .bc-h2{
  font-family:'Albert Sans',sans-serif !important;
  font-size:clamp(40px,5vw,68px);
  line-height:1.02;
  letter-spacing:-0.035em;
  font-weight:600;
  margin-top:18px;
  color:var(--ink);
}
.trust-header p{
  font-size:17px;
  line-height:1.5;
  color:var(--ink-soft);
  max-width:620px;
  margin:18px auto 0;
  letter-spacing:-0.005em;
}

/* 4 stat columns at top */
.trust-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  text-align:center;
  margin-bottom:80px;
  padding:40px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:relative;z-index:1;
}
@media(max-width:768px){.trust-stats{grid-template-columns:repeat(2,1fr);gap:32px 16px;padding:32px 0}}
.trust-stat{display:flex;flex-direction:column;gap:8px}
.trust-stat .num{
  font-family:'Albert Sans',sans-serif !important;
  font-size:clamp(34px,3.6vw,46px);
  line-height:1;
  font-weight:600;
  color:var(--ink);
  letter-spacing:-0.03em;
}
.trust-stat .label{font-size:11px;color:var(--ink-muted);letter-spacing:0.18em;text-transform:uppercase;font-weight:600}

/* 3-row logo bars */
.trust-row{
  position:relative;z-index:1;
  margin-bottom:48px;
  text-align:center;
}
.trust-row:last-child{margin-bottom:0}
.trust-row-label{
  font-family:'Albert Sans',sans-serif !important;
  font-size:11px;
  color:var(--ink-muted);
  letter-spacing:0.22em;
  text-transform:uppercase;
  font-weight:600;
  margin-bottom:24px;
  display:block;
}
.trust-logos{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:20px 40px;
  font-family:'Albert Sans',sans-serif !important;
  color:var(--ink);
  font-weight:500;
  font-size:14px;
  letter-spacing:-0.005em;
}
.trust-logo{
  opacity:0.45;
  transition:opacity 0.32s var(--ease);
  white-space:nowrap;
}
.trust-logo:hover{opacity:1}
.trust-logo b{font-weight:600;letter-spacing:-0.01em}
@media(max-width:768px){.trust-logos{gap:16px 28px;font-size:13px}}

.trust-award-row{
  margin-top:64px;
  text-align:center;
  position:relative;z-index:1;
}
.trust-award{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 22px;
  background:transparent;
  border:1px solid var(--gold);
  border-radius:999px;
  font-size:12px;
  color:var(--gold-deep);
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-weight:600;
}

/* ======= SECTION 9: LEARN MORE — Apple-clean accordions ======= */
.learn-more{background:var(--paper-warm)}
.accordion{
  max-width:880px;
  margin:64px auto 0;
  display:flex;
  flex-direction:column;
}
.accordion-item{
  background:transparent;
  border-bottom:1px solid var(--line);
}
.accordion-item:first-child{border-top:1px solid var(--line)}
.accordion-trigger{
  width:100%;
  display:flex !important;
  justify-content:space-between;
  align-items:center;
  padding:28px 0 !important;
  text-align:left;
  cursor:pointer;
  font-family:'Albert Sans',sans-serif !important;
  font-size:19px !important;
  font-weight:500 !important;
  color:var(--ink) !important;
  line-height:1.3 !important;
  letter-spacing:-0.018em;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  outline:none !important;
  text-shadow:none !important;
  transition:opacity 0.2s var(--ease);
  appearance:none;
  -webkit-appearance:none;
}
.accordion-trigger:hover,
.accordion-trigger:focus,
.accordion-trigger:active{
  background:transparent !important;
  background-color:transparent !important;
  color:var(--ink) !important;
  box-shadow:none !important;
  outline:none !important;
  border:0 !important;
  opacity:0.7;
}
.accordion-trigger::after{
  content:"+";
  font-size:22px;
  font-weight:300;
  color:var(--ink) !important;
  transition:transform 0.32s var(--ease);
  flex-shrink:0;
  margin-left:24px;
  background:transparent !important;
}
.accordion-item.open .accordion-trigger::after{transform:rotate(45deg)}
.accordion-content{
  max-height:0;
  overflow:hidden;
  transition:max-height 0.4s var(--ease);
}
.accordion-item.open .accordion-content{max-height:3000px}
.accordion-content-inner{
  padding:0 0 32px;
  font-size:15.5px;
  line-height:1.65;
  color:var(--ink-soft);
  letter-spacing:-0.005em;
  max-width:680px;
}
.accordion-content-inner h3,
.accordion-content-inner .bc-h3{
  font-family:'Albert Sans',sans-serif !important;
  font-size:17px;
  color:var(--ink);
  margin:20px 0 8px;
  font-weight:600;
  letter-spacing:-0.015em;
}
.accordion-content-inner p{margin-bottom:14px}
.accordion-content-inner ul{padding-left:18px;margin-bottom:14px;list-style:disc}
.accordion-content-inner li{margin-bottom:8px}

/* ======= SECTION 10: FAQ ======= */
.faq{background:var(--paper-warm)}

/* ======= SECTION 11: BLOG TEASERS ======= */
.blog-teasers{background:var(--paper)}
.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:64px;
}
@media(max-width:980px){.blog-grid{grid-template-columns:1fr}}
.blog-card{
  position:relative;
  aspect-ratio:5/6;
  border-radius:var(--radius);
  overflow:hidden;
  background:#F5F2ED;
  text-decoration:none;
  color:inherit;
  transition:transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  display:block;
}
.blog-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 48px -12px rgba(15,15,15,0.18);
}
.blog-cover{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:#F0EEE9;
}
.blog-cover img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 35%;
  transition:transform 0.6s var(--ease);
}
.blog-card:hover .blog-cover img{transform:scale(1.04)}
.blog-body{
  position:absolute;
  left:14px;right:14px;bottom:14px;
  /* Crystal Glass — clean white */
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.7);
  box-shadow:0 8px 24px rgba(15,15,15,0.10), inset 0 1px 0 rgba(255,255,255,0.85);
  border-radius:var(--radius-sm);
  padding:16px 18px;
  display:flex;
  flex-direction:column;
  gap:8px;
  z-index:2;
}
.blog-eyebrow{
  font-size:10px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--gold-deep);
  font-weight:600;
}
.blog-title{
  font-family:'Albert Sans',sans-serif !important;
  font-size:17px;
  line-height:1.22;
  font-weight:600;
  color:var(--ink);
  letter-spacing:-0.02em;
}
.blog-excerpt{font-size:13px;line-height:1.45;color:var(--ink-soft);letter-spacing:-0.005em}
.blog-link{
  margin-top:4px;
  font-size:11.5px;font-weight:600;color:var(--ink);
  display:inline-flex;align-items:center;gap:6px;
  letter-spacing:0.04em;text-transform:uppercase;
}
.blog-link::after{content:"→";letter-spacing:0;text-transform:none;font-size:14px;transition:transform 0.32s var(--ease)}
.blog-card:hover .blog-link::after{transform:translateX(3px)}

/* ======= BENEFITS STRIP — commerce mechanics, premium serif headline style ======= */
.benefits-strip{
  background:var(--paper);
  padding:64px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.benefits-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  align-items:center;
  max-width:1200px;
  margin:0 auto;
}
.benefit{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:8px 24px;
  border-right:1px solid var(--line);
}
.benefit:last-child{border-right:none}
/* Animated icon — sits above the headline. Black, 40px, subtle continuous motion */
.benefit-icon{
  width:42px;height:42px;
  margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink);
}
.benefit-icon svg{width:100%;height:100%;display:block;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
@media(prefers-reduced-motion:no-preference){
  /* Try It On — return arrow rotates slowly forward then snaps back */
  .benefit-icon--return svg{animation:bIconReturnRotate 5s cubic-bezier(0.4,0,0.2,1) infinite}
  @keyframes bIconReturnRotate{
    0%,8%{transform:rotate(0)}
    50%{transform:rotate(-160deg)}
    92%,100%{transform:rotate(0)}
  }
  /* Ships Worldwide — globe rotates continuously and meridian shifts */
  .benefit-icon--globe svg{animation:bIconGlobeFloat 6s ease-in-out infinite}
  .benefit-icon--globe .meridian{transform-origin:center;animation:bIconGlobeMeridian 8s linear infinite}
  @keyframes bIconGlobeFloat{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-3px)}
  }
  @keyframes bIconGlobeMeridian{
    from{transform:scaleX(1)}50%{transform:scaleX(0.15)}to{transform:scaleX(1)}
  }
  /* Safe Checkout — lock subtle pulse + shackle gentle bounce */
  .benefit-icon--lock svg{animation:bIconLockPulse 2.6s ease-in-out infinite}
  @keyframes bIconLockPulse{
    0%,100%{transform:scale(1)}
    50%{transform:scale(1.06)}
  }
  /* Talk To Us — chat bubble bobs, dots fade in sequence */
  .benefit-icon--chat svg{animation:bIconChatBob 3.2s ease-in-out infinite}
  @keyframes bIconChatBob{
    0%,100%{transform:translateY(0) rotate(0)}
    50%{transform:translateY(-3px) rotate(-3deg)}
  }
  .benefit-icon--chat .d1{animation:bDot 1.4s ease-in-out infinite}
  .benefit-icon--chat .d2{animation:bDot 1.4s ease-in-out 0.2s infinite}
  .benefit-icon--chat .d3{animation:bDot 1.4s ease-in-out 0.4s infinite}
  @keyframes bDot{
    0%,100%{opacity:0.35;transform:translateY(0)}
    50%{opacity:1;transform:translateY(-1.2px)}
  }
}
.benefit-headline{
  font-family:'Albert Sans',-apple-system,sans-serif !important;
  font-size:clamp(28px,3vw,40px);
  line-height:1.05;
  font-weight:600;
  letter-spacing:-0.025em;
  color:var(--ink);
  margin-bottom:10px;
  display:inline-block;
}
.benefit-headline .accent{
  color:var(--gold-deep);
  font-weight:600;
}
.benefit-label{
  font-family:'Albert Sans',sans-serif !important;
  font-size:13px;
  color:var(--ink-soft);
  letter-spacing:-0.005em;
  font-weight:400;
  line-height:1.4;
  max-width:200px;
}
@media(max-width:760px){
  .benefits-grid{grid-template-columns:repeat(2,1fr);gap:28px 0}
  .benefit{padding:14px 16px}
  .benefit:nth-child(2){border-right:none}
  .benefit:nth-child(1),
  .benefit:nth-child(2){border-bottom:1px solid var(--line);padding-bottom:32px}
  .benefit-headline{font-size:42px}
}

/* ======= CLOSER SECTION — light cream version (no more black) ======= */
.closer{
  background:#F5F2ED;
  color:var(--ink);
  padding:88px 0;
  position:relative;
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.closer::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(184,155,106,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 0% 100%, rgba(184,155,106,0.06) 0%, transparent 60%);
  pointer-events:none;
}
.closer-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:80px;
  align-items:center;
  position:relative;
  z-index:1;
}
@media(max-width:980px){.closer-grid{grid-template-columns:1fr;gap:40px}}
.closer-text .eyebrow{color:var(--gold-deep);margin-bottom:20px;display:block}
.closer-text h2,
.closer-text .bc-h2{
  font-family:'Albert Sans',sans-serif !important;
  font-size:clamp(40px,5vw,72px);
  line-height:1.02;
  letter-spacing:-0.04em;
  font-weight:700;
  color:var(--ink);
  margin-bottom:16px;
}
.closer-text h2 em,
.closer-text .bc-h2 em{
  font-family:'Cormorant Garamond',Georgia,serif !important;
  font-style:italic !important;
  font-weight:500;
  color:var(--gold-deep);
}
.closer-text > p{
  font-size:17px;
  line-height:1.55;
  color:var(--ink-soft);
  letter-spacing:-0.005em;
  max-width:480px;
  margin-bottom:24px;
}
/* 3-guide list inside closer */
.closer-guides{
  list-style:none;
  margin:0 0 28px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:14px;
  max-width:520px;
}
.closer-guides li{
  display:flex;
  align-items:flex-start;
  gap:14px;
}
.closer-guide-num{
  flex-shrink:0;
  width:32px;height:32px;
  border-radius:8px;
  background:rgba(255,255,255,0.65);
  border:1px solid rgba(255,255,255,0.7);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:'Cormorant Garamond',Georgia,serif !important;
  font-style:italic !important;
  font-weight:600;
  font-size:16px;
  color:var(--gold-deep);
  line-height:1;
}
.closer-guide-text{flex:1;min-width:0}
.closer-guide-text b{
  display:block;
  color:var(--ink);
  font-weight:600;
  font-size:15px;
  letter-spacing:-0.01em;
  line-height:1.25;
}
.closer-guide-text span{
  display:block;
  font-size:13px;
  color:var(--ink-soft);
  line-height:1.4;
  margin-top:2px;
  letter-spacing:-0.005em;
}
/* Inline social proof above form */
.closer-social{
  display:flex;
  align-items:center;
  gap:24px;
  margin-bottom:28px;
  flex-wrap:wrap;
}
.closer-social-stars{color:var(--gold-deep);font-size:14px;letter-spacing:0.06em}
.closer-social-text{
  font-size:13px;
  color:var(--ink-soft);
  letter-spacing:-0.005em;
  line-height:1.4;
}
.closer-social-text b{color:var(--ink);font-weight:600}
/* Form / CTA */
.closer-form{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  max-width:520px;
}
.closer-form input[type=email]{
  flex:1;min-width:240px;
  padding:18px 22px;
  border-radius:999px;
  border:1px solid rgba(15,15,15,0.18);
  background:rgba(255,255,255,0.7);
  color:var(--ink);
  font-size:15px;
  font-family:inherit;
  outline:none;
  transition:all 0.28s var(--ease);
  letter-spacing:-0.005em;
}
.closer-form input[type=email]::placeholder{color:rgba(15,15,15,0.4)}
.closer-form input[type=email]:focus{border-color:var(--gold-deep);background:rgba(255,255,255,1)}
.closer-form button{
  background:var(--ink) !important;
  color:var(--paper) !important;
  border-color:var(--ink);
}
.closer-form button:hover{background:var(--gold-deep) !important;color:var(--paper) !important;border-color:var(--gold-deep)}
/* FUD reducers below form (light variant) */
.closer-fuds{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  margin-top:22px;
  font-size:12.5px;
  color:var(--ink-soft);
  letter-spacing:-0.005em;
}
.closer-fuds .fud{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.closer-fuds .fud::before{content:"✓";color:var(--gold-deep);font-weight:700;font-size:11px}
.closer-disclaimer{font-size:11px;color:var(--ink-muted);margin-top:14px;letter-spacing:0.005em}
/* Right side: stacked photo cards */
.closer-photo{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  aspect-ratio:4/5;
  box-shadow:0 30px 80px -24px rgba(0,0,0,0.5);
}
.closer-photo img{width:100%;height:100%;object-fit:cover}
.closer-photo-quote{
  position:absolute;
  bottom:20px;right:20px;
  /* Crystal Glass — matches hero review badge */
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,0.7);
  box-shadow:0 12px 40px rgba(15,15,15,0.16), inset 0 1px 0 rgba(255,255,255,0.85);
  border-radius:14px;
  padding:14px 16px;
  color:var(--ink);
  font-family:'Albert Sans',sans-serif !important;
  max-width:240px;
  z-index:3;
}
.closer-photo-quote .stars{color:var(--gold);font-size:13px;letter-spacing:0.06em;margin-bottom:6px;display:block}
.closer-photo-quote .quote{
  font-family:'Albert Sans',sans-serif !important;
  font-weight:500;
  font-size:14px;
  line-height:1.4;
  letter-spacing:-0.01em;
  color:var(--ink);
  font-style:normal;
  display:block;
}
.closer-photo-quote .who{
  display:block;
  margin-top:8px;
  font-family:'Albert Sans',sans-serif !important;
  font-style:normal;
  font-size:11px;
  color:var(--ink-muted);
  letter-spacing:0.04em;
  font-weight:500;
}
@media(max-width:980px){.closer-photo-quote{right:12px;bottom:12px;max-width:220px}}
@media(max-width:520px){.closer-photo-quote{display:none}}

/* ======= FAQ ACCORDION (reuses accordion styles) ======= */
.faq-accordion{max-width:760px;margin:48px auto 0}
.faq-accordion .accordion-trigger{font-size:17px;padding:24px 0}
.faq-accordion .accordion-content-inner{padding:0 0 24px;font-size:15px}

/* ======= A+ CONTENT BESTSELLERS — alternating photo+text rows ======= */
.bestsellers{background:var(--paper);padding:56px 0}
.bestsellers-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:48px;
  flex-wrap:wrap;
}
.bestsellers-header-left{text-align:left;max-width:560px}
.bestsellers-header h2,
.bestsellers-header .bc-h2{
  font-family:'Cormorant Garamond',Georgia,serif !important;
  font-size:clamp(34px,4.2vw,56px);
  line-height:1.05;
  letter-spacing:-0.015em;
  font-weight:500;
  color:var(--ink);
  margin-top:14px;
}
.bestsellers-viewall{
  font-size:13px;
  font-weight:600;
  color:var(--ink);
  letter-spacing:0.005em;
  border:1px solid var(--line-strong);
  padding:14px 22px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:all 0.32s var(--ease);
  white-space:nowrap;
}
.bestsellers-viewall:hover,
.bestsellers-viewall:hover span,
.bestsellers-viewall:focus,
.bestsellers-viewall:focus span{
  background:var(--ink) !important;
  color:var(--paper) !important;
  border-color:var(--ink) !important;
}
/* Best Sellers — horizontal scroll carousel with arrows */
.bestsellers-carousel{
  position:relative;
}
.bestsellers-grid{
  display:flex;
  gap:18px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scroll-padding-inline:0;
  padding:8px 4px 16px;
  margin:0 -4px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.bestsellers-grid::-webkit-scrollbar{display:none}
.bestsellers-grid > .bestseller-card{
  flex:0 0 calc((100% - 54px) / 4);
  scroll-snap-align:start;
  min-width:0;
}
@media(max-width:980px){
  .bestsellers-grid > .bestseller-card{flex:0 0 calc((100% - 36px) / 3)}
}
@media(max-width:760px){
  .bestsellers-grid > .bestseller-card{flex:0 0 calc((100% - 18px) / 2)}
}
@media(max-width:480px){
  .bestsellers-grid > .bestseller-card{flex:0 0 78%}
}
.bestsellers-nav{
  position:absolute;
  top:38%;
  width:44px;height:44px;
  border-radius:999px;
  background:var(--paper);
  border:1px solid var(--line-strong);
  box-shadow:0 6px 20px -4px rgba(15,15,15,0.16);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:18px;
  color:var(--ink);
  z-index:5;
  transition:all 0.28s var(--ease);
  appearance:none;
}
.bestsellers-nav:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.bestsellers-nav:disabled{opacity:0.35;cursor:default}
.bestsellers-nav-prev{left:-22px}
.bestsellers-nav-next{right:-22px}
@media(max-width:520px){.bestsellers-nav{display:none}}
.bestseller-card{
  position:relative;
  display:block;
  aspect-ratio:3/4;
  border-radius:18px;
  overflow:hidden;
  background:#F5F2ED;
  text-decoration:none;
  color:inherit;
  transition:transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.bestseller-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 48px -12px rgba(15,15,15,0.18);
}
.bestseller-card-photo{
  position:absolute;
  inset:0;
  overflow:hidden;
}
/* Imagify-safe — class may be hoisted to <picture> wrapper, so cover both:
   the element itself AND the inner <img> get positioned and animated. */
.bestseller-card-photo .bs-photo-life,
.bestseller-card-photo .bs-photo-studio,
.bestseller-card-photo .bs-photo-life > img,
.bestseller-card-photo .bs-photo-studio > img,
.bestseller-card-photo > img{
  position:absolute; inset:0;
  width:100%;height:100%;
  display:block;
  object-fit:cover;
  transition:opacity 0.5s var(--ease), transform 0.6s var(--ease);
}
/* Lifestyle = default (visible) */
.bestseller-card-photo .bs-photo-life{opacity:1; z-index:1}
/* Studio = hover swap (hidden by default) */
.bestseller-card-photo .bs-photo-studio{opacity:0; z-index:2}
.bestseller-card:hover .bestseller-card-photo .bs-photo-life{opacity:0}
.bestseller-card:hover .bestseller-card-photo .bs-photo-studio{opacity:1; transform:scale(1.02)}
/* Touch devices: skip swap to avoid sticky-hover confusion */
@media(hover:none){
  .bestseller-card-photo .bs-photo-studio{display:none}
}
/* Crystal Glass info overlay at bottom of card */
.bestseller-card-info{
  position:absolute;
  left:12px;right:12px;bottom:12px;
  /* Crystal Glass — clean white */
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.7);
  box-shadow:0 8px 24px rgba(15,15,15,0.10), inset 0 1px 0 rgba(255,255,255,0.85);
  border-radius:12px;
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  gap:6px;
  z-index:2;
}
.bestseller-card-name{
  font-family:'Albert Sans',sans-serif !important;
  font-size:13.5px;
  font-weight:600;
  line-height:1.3;
  color:var(--ink);
  letter-spacing:-0.012em;
  margin:0;
}
.bestseller-card-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.bestseller-card-price{
  font-family:'Albert Sans',sans-serif !important;
  font-size:14px;
  font-weight:700;
  color:var(--ink);
  letter-spacing:-0.005em;
}
.bestseller-card-rating{
  font-size:12px;
  font-weight:500;
  color:var(--gold-deep);
  letter-spacing:0.005em;
  display:inline-flex;
  align-items:center;
  gap:3px;
}

/* ======= NURSES CTA — premium dark band ======= */
.nurses-cta{
  background:var(--paper-warm);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:96px 0;
}
.nurses-cta .container{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:64px;
  align-items:center;
}
@media(max-width:768px){.nurses-cta .container{grid-template-columns:1fr;gap:32px;text-align:left}}
.nurses-text .eyebrow{color:var(--gold-deep);margin-bottom:14px;display:block}
.nurses-text h2,
.nurses-text .bc-h2{
  font-family:'Albert Sans',sans-serif !important;
  font-size:clamp(32px,4vw,52px);
  line-height:1.05;
  letter-spacing:-0.03em;
  font-weight:600;
  color:var(--ink);
  margin-bottom:18px;
}
.nurses-text p{
  font-size:16.5px;
  line-height:1.55;
  color:var(--ink-soft);
  letter-spacing:-0.005em;
  max-width:540px;
}
.nurses-cta-actions{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
@media(max-width:768px){.nurses-cta-actions{align-items:flex-start}}
.nurses-cta-actions .btn{width:auto}
.nurses-stats{
  font-size:13px;color:var(--ink-muted);
  letter-spacing:0.04em;
}
.nurses-stats b{color:var(--ink);font-weight:600}

/* ======= UTILITIES ======= */
.text-center{text-align:center}
.muted{color:var(--ink-soft)}
.divider-line{height:1px;background:var(--line);margin:32px 0}

/* ======= ANIMATIONS ======= */
@media(prefers-reduced-motion:no-preference){
  .fade-in{opacity:0;transform:translateY(16px);transition:opacity 0.7s var(--ease),transform 0.7s var(--ease)}
  .fade-in.visible{opacity:1;transform:translateY(0)}
}

/* ============================================
   v2 TOP-TIER UPGRADES (synced from belt-prototype patterns)
   ============================================ */
@media(prefers-reduced-motion:no-preference){
.bp-reveal{opacity:0;transform:translateY(28px);transition:opacity 0.85s cubic-bezier(0.16,0.84,0.32,1),transform 0.85s cubic-bezier(0.16,0.84,0.32,1)}
.bp-reveal.is-in{opacity:1;transform:translateY(0)}
.bp-stagger > *{opacity:0;transform:translateY(24px);transition:opacity 0.7s cubic-bezier(0.16,0.84,0.32,1),transform 0.7s cubic-bezier(0.16,0.84,0.32,1)}
.bp-stagger.is-in > *{opacity:1;transform:translateY(0)}
.bp-stagger.is-in > *:nth-child(1){transition-delay:0ms}
.bp-stagger.is-in > *:nth-child(2){transition-delay:90ms}
.bp-stagger.is-in > *:nth-child(3){transition-delay:180ms}
.bp-stagger.is-in > *:nth-child(4){transition-delay:270ms}
.bp-stagger.is-in > *:nth-child(5){transition-delay:360ms}
.bp-stagger.is-in > *:nth-child(6){transition-delay:450ms}
.bp-stagger.is-in > *:nth-child(7){transition-delay:540ms}
.bp-stagger.is-in > *:nth-child(8){transition-delay:630ms}
.bp-img-reveal{overflow:hidden}
.bp-img-reveal img{opacity:0;transform:scale(1.08);transition:opacity 1s cubic-bezier(0.16,0.84,0.32,1),transform 1.4s cubic-bezier(0.16,0.84,0.32,1)}
.bp-img-reveal.is-in img{opacity:1;transform:scale(1)}
}
.bp-counter{font-variant-numeric:tabular-nums;display:inline-block}

/* Lightbox modal */
.bp-lb{position:fixed;inset:0;z-index:99999;display:none;background:rgba(15,15,15,0.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);align-items:center;justify-content:center;cursor:zoom-out;opacity:0;transition:opacity 0.3s ease;padding:40px}
.bp-lb.is-open{display:flex;opacity:1}
.bp-lb-img{max-width:min(96vw,1400px);max-height:92vh;width:auto;height:auto;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,0.5);object-fit:contain;animation:bpLbIn 0.32s cubic-bezier(0.16,0.84,0.32,1)}
@keyframes bpLbIn{from{opacity:0;transform:scale(0.94)}to{opacity:1;transform:scale(1)}}
.bp-lb-close{position:absolute;top:24px;right:24px;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,0.10);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,0.18);color:#fff;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.2s,transform 0.2s;font-family:inherit}
.bp-lb-close:hover{background:rgba(255,255,255,0.20);transform:scale(1.06)}
@media(max-width:680px){.bp-lb{padding:20px}.bp-lb-close{top:14px;right:14px;width:40px;height:40px}}

/* Recently bought ticker (above Brevo chat) */
.bp-ticker{position:fixed;bottom:106px;left:24px;z-index:9998;display:none;align-items:center;gap:12px;padding:10px 14px 10px 10px;background:rgba(255,255,255,0.97);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);border:1px solid rgba(15,15,15,0.08);border-radius:14px;box-shadow:0 12px 32px rgba(15,15,15,0.16);font-family:inherit;max-width:300px;opacity:0;transform:translateY(16px);transition:opacity 0.5s cubic-bezier(0.16,0.84,0.32,1),transform 0.5s cubic-bezier(0.16,0.84,0.32,1)}
.bp-ticker.is-visible{display:flex;opacity:1;transform:translateY(0)}
.bp-ticker-thumb{width:42px;height:42px;border-radius:8px;overflow:hidden;background:#F0EEE9;flex-shrink:0}
.bp-ticker-thumb img{width:100%;height:100%;object-fit:cover;object-position:center top}
.bp-ticker-text{flex:1;min-width:0;font-size:12px;color:#5F5F5F;letter-spacing:-0.005em;line-height:1.35}
.bp-ticker-text b{color:#0F0F0F;font-weight:600;font-size:12.5px}
.bp-ticker-text .ago{display:block;font-size:11px;color:#9E9E9E;margin-top:1px}
.bp-ticker-text .ago .verif{color:#9A7E4F;font-weight:600}
.bp-ticker-close{flex-shrink:0;width:22px;height:22px;display:flex;align-items:center;justify-content:center;color:#9E9E9E;background:transparent;border:none;cursor:pointer;font-size:16px;border-radius:50%;transition:background 0.2s,color 0.2s;font-family:inherit}
.bp-ticker-close:hover{background:#F5F2ED;color:#0F0F0F}
@media(max-width:680px){.bp-ticker{bottom:96px;left:14px;right:14px;max-width:none}}

/* Mobile sticky pill CTA — between Brevo chat + back-to-top */
.bp-sticky-pill{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));z-index:9998;display:none;background:linear-gradient(180deg,rgba(255,255,255,0.96) 0%,rgba(255,255,255,0.92) 100%);backdrop-filter:blur(28px) saturate(1.8);-webkit-backdrop-filter:blur(28px) saturate(1.8);border:1px solid rgba(255,255,255,0.5);box-shadow:0 1px 0 rgba(255,255,255,0.65) inset,0 18px 50px -8px rgba(15,15,15,0.22),0 6px 14px rgba(15,15,15,0.10),0 0 0 1px rgba(15,15,15,0.04);padding:8px 8px 8px 16px;align-items:center;gap:10px;border-radius:999px;width:calc(100vw - 140px);max-width:380px;transform:translateX(-50%) translateY(180%) scale(0.92);opacity:0;transition:transform 0.55s cubic-bezier(0.34,1.45,0.55,1),opacity 0.4s cubic-bezier(0.4,0,0.2,1);will-change:transform,opacity;pointer-events:none;box-sizing:border-box}
.bp-sticky-pill.is-visible{display:flex;opacity:1;transform:translateX(-50%) translateY(0) scale(1);pointer-events:auto}
.bp-sticky-pill-info{flex:1;min-width:0;font-size:11.5px;color:#5F5F5F;letter-spacing:-0.005em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bp-sticky-pill-info b{display:block;color:#0F0F0F;font-size:13.5px;font-weight:700;letter-spacing:-0.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bp-sticky-pill-cta{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:#0F0F0F;color:#fff !important;font-size:13.5px;font-weight:700;letter-spacing:-0.005em;border-radius:999px;padding:12px 18px;border:none;cursor:pointer;box-shadow:0 4px 12px rgba(15,15,15,0.22);font-family:inherit;white-space:nowrap;text-decoration:none;transition:transform 0.2s,background 0.2s;flex-shrink:0}
.bp-sticky-pill-cta:hover{background:#000;transform:translateY(-1px)}
@media(min-width:981px){.bp-sticky-pill{display:none !important}}
@media(max-width:380px){.bp-sticky-pill{width:calc(100vw - 120px)}.bp-sticky-pill-info{font-size:10.5px}.bp-sticky-pill-info b{font-size:12.5px}.bp-sticky-pill-cta{font-size:12.5px;padding:10px 14px}}