/* ============================================================
   DENSIFOL — design system
   Layout DNA reverse-engineered from Bloomin (structure/spacing only).
   Palette + type = Densifol's own. Contrast-verified (see contrast SOP).
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  /* color */
  --bg:#FFFFFF;            /* page background: WHITE. colour is rationed. */
  --bg-alt:#F6F4EF;        /* barely-there wash, used on 2 sections only */
  --bg-soft:#FAF8F4;       /* softer wash panel */
  --dark:#100F0D;          /* near-black dark sections */
  --ink:#1B170F;           /* body + heading text (16.9:1 on bg = AAA) */
  --ink-dim:#58513F;       /* muted text (still AA) */
  --ink-faint:#8C8471;     /* faint labels only, never body */
  --gold:#C8A24C;          /* THE action color */
  --gold-2:#E6C172;        /* lighter gold, gradients/hover */
  --gold-deep:#B0851E;     /* deep gold: golden hue (H42), NOT the old #B4741E orange-brown */
  --cream-text:#F3EFE6;    /* text on dark sections (18:1 = AAA) */
  --line:rgba(27,23,15,.12);/* hairline borders */
  --gold-soft:rgba(200,162,76,.12);
  --star:#C8A24C;
  /* THE brand gold ramp - matched to Nate's logo screenshot. Bright champagne,
     zero brown. Used for the wordmark + large accents + gold badges. */
  --grad-gold:linear-gradient(96deg,#A5761B 0%,#C89838 30%,#DCB358 54%,#C29536 100%);
  /* stars ramp stays mid-gold end-to-end so 15px glyphs never wash out on white */
  --grad-star:linear-gradient(96deg,#C79A3E 0%,#DBB95F 50%,#CFA84E 100%);

  /* type */
  --font-head:"Outfit",system-ui,-apple-system,sans-serif;
  --font-body:"DM Sans",system-ui,-apple-system,sans-serif;
  --h1:40px; --h2:32px; --h3:24px; --h4:20px;
  --body:16px; --sm:14px; --xs:12px;
  --hero:48px;

  /* spacing */
  --container:1340px;
  --container-narrow:1070px;
  --hero-text:480px;
  --gutter:48px;           /* desktop side padding */
  --sec-pad:56px;          /* default internal section padding (top/bottom) */
  --gap:22px;              /* element rhythm */

  /* shape — soft, rounded (Bloomin-style) */
  --r-card:20px;           /* cards */
  --r-soft:20px;           /* images, cards, sections */
  --r-panel:24px;          /* large soft panels */
  --r-btn:60px;            /* pill button */
  --r-input:8px;
  --shadow:0 5px 20px rgba(27,23,15,.08);
  --shadow-lg:0 18px 50px rgba(27,23,15,.10);
}

/* ---------- reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:var(--body);font-weight:400;
  line-height:1.5;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;line-height:1.05;
  letter-spacing:-.032em;margin:0;color:var(--ink)}
h1{font-size:var(--h1)} h2{font-size:var(--h2)} h3{font-size:var(--h3)} h4{font-size:var(--h4)}
p{margin:0}
.accent{color:var(--gold-deep)}          /* solid fallback, LARGE text only */
/* The flat #B4741E reads brown at size. Large gold moments get the wordmark's
   gradient instead. Small text keeps the solid colour: gradient text under ~16px
   loses contrast, and --gold-deep is the only gold that clears AA on white. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .accent,.stars{
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent}
  .accent{background-image:var(--grad-gold)}
  .stars{background-image:var(--grad-star)}
  .lifestyle .stars,.section--dark .stars,.footer .stars{
    background-image:linear-gradient(96deg,#C8A24C 0%,#E6C172 38%,#F2DCA6 72%,#DDBA6B 100%)}
}
.eyebrow{font-family:var(--font-body);font-weight:600;font-size:var(--xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}
.muted{color:var(--ink-dim)}

/* ---------- layout primitives ---------- */
.section{position:relative;padding:var(--sec-pad) 0}       /* sections butt together; air is INSIDE */
.section--flush{padding:0}
.section--cream{background:var(--bg-alt)}
.section--soft{background:var(--bg-soft)}
.section--dark{background:var(--dark);color:var(--cream-text)}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:var(--cream-text)}
.section--gap{margin-top:80px}                              /* the ONE deliberate gap */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.container--narrow{max-width:var(--container-narrow)}
.stack{display:flex;flex-direction:column;gap:var(--gap)}
.center{text-align:center}
.sec-head{max-width:720px;margin:0 auto 40px;text-align:center}
.sec-head p{margin-top:12px;color:var(--ink-dim)}

/* ---------- buttons (gold pill + INK text — never white on gold) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--gold);color:var(--ink);
  font-family:var(--font-body);font-weight:700;font-size:15px;
  letter-spacing:.04em;text-transform:uppercase;
  padding:15px 30px;border:1.5px solid var(--gold);border-radius:var(--r-btn);
  transition:background .15s,color .15s,box-shadow .15s;white-space:nowrap}
.btn:hover{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);border-color:var(--ink)}
.btn--block{width:100%}
.btn--lg{padding:18px 34px;font-size:16px}
.btn--dark{background:var(--ink);color:var(--cream-text);border-color:var(--ink)}
.btn--dark:hover{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{background:var(--ink);color:var(--cream-text);box-shadow:none}
/* outline "Buy now" button, 602DINK style: white fill, dark border, dark text */
.btn--outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--outline:hover{background:var(--ink);color:var(--cream-text);box-shadow:none;border-color:var(--ink)}

/* ---------- stars ---------- */
.stars{color:var(--star);letter-spacing:2px;font-size:15px;line-height:1}
.rating-row{display:flex;align-items:center;gap:10px;font-size:var(--sm);color:var(--ink-dim)}

/* ---------- announcement bar ---------- */
.announce{background:var(--bg-alt);color:var(--ink);text-align:center;
  font-size:13px;font-weight:500;letter-spacing:.01em;padding:9px 16px;border-bottom:1px solid var(--line)}
.announce b{font-weight:700}

/* ---------- header ---------- */
.header{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:1px solid var(--line)}
.header__in{display:flex;align-items:center;justify-content:space-between;height:70px;
  max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.brand{font-family:var(--font-head);font-weight:700;font-size:25px;letter-spacing:-.045em;color:var(--ink)}
.brand b{color:var(--gold-deep)}   /* solid fallback: if background-clip:text is
   unsupported the wordmark must still be readable, never transparent */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .brand b{
    background-image:var(--grad-gold);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent}
  /* on the dark footer the ramp starts brighter so it never muddies */
  .footer .brand b{
    background-image:linear-gradient(96deg,#C8A24C 0%,#E6C172 38%,#F2DCA6 72%,#DDBA6B 100%);
    -webkit-text-fill-color:transparent}
}
.nav{display:flex;gap:24px}
.nav a{font-size:14px;font-weight:500;color:var(--ink);transition:color .15s}
.nav a:hover{color:var(--gold-deep)}
.header__right{display:flex;align-items:center;gap:18px}
.header__right .btn{padding:10px 20px;font-size:12px}
.burger{display:none;background:none;border:0;flex-direction:column;gap:5px;padding:6px}
.burger span{width:22px;height:2px;background:var(--ink);display:block}
.mobile-nav{display:none;flex-direction:column;padding:12px var(--gutter) 20px;border-bottom:1px solid var(--line);background:var(--bg)}
.mobile-nav a{padding:12px 0;font-size:16px;font-weight:500;border-bottom:1px solid var(--line)}
.mobile-nav.open{display:flex}

/* ---------- hero (narrow text column beside big image) ---------- */
.hero{position:relative;overflow:hidden;background:var(--bg-alt)}
/* full-bleed scene behind, text overlaid on the clean left of the image */
.hero__scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
/* height tracks width (~2.4:1, the scene's aspect) so the scene barely crops at
   any desktop width; clamped so text always fits and it never gets too tall */
.hero__in{position:relative;z-index:1;max-width:var(--container);margin:0 auto;
  min-height:clamp(500px,41vw,700px);display:flex;align-items:center}
/* subpage heroes (how/shades/story) carry a media panel: restore the 2-column layout
   that the homepage full-bleed rebuild turned into a single flex row */
.hero__in:has(.hero__media){display:grid;grid-template-columns:1.05fr .95fr;gap:44px;min-height:auto;align-items:center}
.hero__text{max-width:var(--hero-text);padding:56px var(--gutter);display:flex;flex-direction:column;gap:20px}
.hero__text h1{font-size:var(--hero)}
.hero__media{position:relative;align-self:stretch;min-height:420px;background:var(--bg-soft)}
.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* subpage hero: middle-aligned copy on a clean warm background, no busy scene */
.hero--center{background:radial-gradient(140% 110% at 50% 20%, #FFFCF5 0%, #F8EDD6 50%, #EDDBB4 100%)}
.hero--center .hero__in{min-height:clamp(340px,30vw,440px);flex-direction:column;justify-content:center;gap:0}
.hero--center .hero__text{max-width:min(820px,92vw);margin:0 auto;align-items:center;text-align:center;
  padding:clamp(60px,8vw,96px) var(--gutter) clamp(48px,6vw,72px)}
.hero--center .hero__text .btn{align-self:center}
.hero--center .checks,.hero--center .rating-row{justify-content:center;flex-wrap:wrap}
/* How It Works: three real bottles under the centered copy (never a generated bottle) */
.hero--how .hero__text{padding-bottom:6px}
.hero__bottles{display:flex;justify-content:center;align-items:flex-end;
  width:100%;padding:8px var(--gutter) clamp(40px,5vw,64px)}
.hb{display:block;width:auto;flex:0 0 auto}
.hb--c{height:clamp(176px,19vw,270px);z-index:2;margin:0 -14px;
  filter:drop-shadow(0 20px 24px rgba(70,48,12,.26))}
.hb--l,.hb--r{height:clamp(146px,15.5vw,224px);z-index:1;
  filter:drop-shadow(0 16px 20px rgba(70,48,12,.2))}
.hb--l{transform:translateY(10px)}
.hb--r{transform:translateY(10px)}
@media(max-width:560px){.hb--c{margin:0 -10px}}
/* before/after frame that shows the full wide pair (no square crop / cut-off) */
.ba-frame{border-radius:var(--r-soft);overflow:hidden;border:1px solid var(--line);align-self:center}
.ba-frame img{width:100%;height:auto;display:block}
/* Bloomin-style hero: warm scene bleeding right, stacked CTAs, trust line */
.hero__media--scene{background:#F4E7CC;min-height:560px}
.hero__media--scene img{object-position:center right}
.hero__cta{display:flex;flex-direction:column;gap:12px;margin-top:4px;max-width:430px}
.hero__cta .btn{width:100%}
.hero__trust{display:flex;gap:28px;flex-wrap:wrap;margin-top:6px}
.hero__trust .check{font-size:14px;color:var(--ink-dim)}
.hero__badges{display:flex;gap:8px;flex-wrap:wrap}
.tag{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-dim);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:5px 11px}
.checks{display:flex;flex-direction:column;gap:9px}
.check{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink)}
/* No circle - the checkmark IS the icon, filled with the gold ramp via a mask
   (a stroked SVG can't be gradient-coloured directly; mask paints the gradient
   through the tick shape). Palest stop dropped so it stays legible on white. */
.check::before{content:"";width:19px;height:19px;flex:0 0 19px;
  background:linear-gradient(120deg,#BE8F2E 0%,#DDBA6B 55%,#C79A3E 100%);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---------- chips (interactive reasons + shade swatches) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{font-size:13px;font-weight:600;padding:9px 16px;border-radius:999px;
  border:1px solid var(--line);background:var(--bg);color:var(--ink);transition:.15s}
.chip.is-active,.chip:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}

/* ---------- soft panel (rationed: 3-4 per page) ---------- */
.panel{background:var(--bg-soft);border-radius:var(--r-soft);padding:56px}
.panel--split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;overflow:hidden;padding:0}
.panel--split .panel__text{padding:56px}
.panel--split .panel__media{align-self:stretch;min-height:360px;position:relative}
.panel--split .panel__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- "what we leave out" chip grid ---------- */
.leave-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:840px;margin:0 auto}
.leave{display:flex;align-items:center;gap:12px;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r-soft);padding:20px 22px;font-weight:500;min-height:74px}
.leave .x{width:26px;height:26px;flex:0 0 26px;border-radius:50%;background:var(--gold-soft);
  display:grid;place-items:center;color:var(--gold-deep);font-weight:700}

/* ---------- review marquee (CSS only, dual-direction) ---------- */
.marquee{position:relative;overflow:hidden}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.marquee__row{display:flex;gap:20px;width:max-content;animation:scroll-l 55s linear infinite;
  /* flex default is align-items:stretch, which forced every review card to the
     tallest card's height. Short reviews were carrying up to 122px of dead white
     space. Hug the image instead. */
  align-items:flex-start}
.marquee__row+.marquee__row{margin-top:20px;animation-name:scroll-r}
.marquee:hover .marquee__row{animation-play-state:paused}
@keyframes scroll-l{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes scroll-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.rev-card{width:360px;flex:0 0 360px;background:var(--bg-soft);border:1px solid var(--line);
  border-radius:var(--r-soft);padding:26px 28px}
.rev-card__head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.rev-card__head img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 44px}
.rev-card .name{font-weight:600;font-size:14px}
.rev-card .label{color:var(--gold-deep);font-size:12px;font-weight:600;margin:6px 0}
.rev-card p{font-size:14px;color:var(--ink-dim);line-height:1.55}

/* ---------- review wall: clean testimonial carousel (Bloomin-style) ---------- */
.revwall{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;
  padding:6px 20px 12px;scroll-padding-left:20px}
.revwall::-webkit-scrollbar{display:none}
.revwall .rev-card{flex:0 0 340px;width:auto;scroll-snap-align:start;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-card);
  padding:22px 22px 24px;box-shadow:var(--shadow)}
.rev-card__head{align-items:center}
.rev-av{width:44px;height:44px;flex:0 0 44px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-weight:700;font-size:17px;font-family:var(--font-head);background:var(--gold-deep)}
.rev-card .stars{font-size:14px;margin-top:3px;letter-spacing:1px}
.rev-badge{margin-left:auto;align-self:center;font-size:11px;font-weight:600;
  color:var(--gold-deep);background:var(--gold-soft);border-radius:999px;padding:4px 10px;white-space:nowrap}
.rev-card p{margin-top:2px}

/* ---------- comparison table ---------- */
.compare{max-width:960px;margin:0 auto;border:1px solid var(--line);border-radius:var(--r-soft);overflow:hidden}
.compare table{width:100%;border-collapse:collapse}
.compare th,.compare td{padding:16px 14px;text-align:center;font-size:14px;border-bottom:1px solid var(--line)}
.compare th:first-child,.compare td:first-child{text-align:left;font-weight:500}
.compare thead th{font-family:var(--font-head);font-weight:500;font-size:16px}
.compare .col-us{background:var(--gold-soft)}
.compare thead .col-us{background:var(--gold);color:var(--ink)}
.compare .yes{color:var(--gold-deep);font-weight:700}
.compare .no{color:var(--ink-faint)}
/* mobile: drop the 3rd option column so it fits cleanly (Densifol vs the big brands) */
@media(max-width:600px){
  .compare th:nth-child(4),.compare td:nth-child(4){display:none}
  .compare th,.compare td{padding:14px 10px;font-size:13px}
  .compare thead th{font-size:14px}
  .compare th:first-child,.compare td:first-child{font-size:13px}
}

/* ---------- count-up stats ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;max-width:960px;margin:0 auto}
.stat .num{font-family:var(--font-head);font-size:56px;font-weight:500;color:var(--ink);line-height:1}
.stat .cap{margin-top:8px;color:var(--ink-dim);font-size:14px}
.bar{height:6px;background:var(--line);border-radius:999px;margin-top:14px;overflow:hidden}
.bar span{display:block;height:100%;width:0;background:var(--gold);border-radius:999px;transition:width 1.1s ease}

/* ---------- how-it-works steps ---------- */
.steps{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;max-width:var(--container);margin:0 auto}
.step-list{display:flex;flex-direction:column;gap:26px}
.step{display:flex;gap:18px}
.step__n{flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:var(--gold-soft);
  color:var(--gold-deep);font-family:var(--font-head);font-weight:600;display:grid;place-items:center}
.step h4{margin-bottom:6px}
.step p{color:var(--ink-dim);font-size:15px}
/* gold icon circle for the How-it-works steps */
.step__ic{flex:0 0 58px;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,#A5761B,#DCB358 55%,#C29536);box-shadow:0 10px 24px rgba(150,110,30,.24)}
.step__ic svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* men's-hair shade strip (how page) */
.shade-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;max-width:760px;margin:0 auto}
.shade-strip img{width:74px;height:74px;border-radius:50%;border:2px solid rgba(120,86,20,.22);
  box-shadow:0 6px 16px rgba(120,86,20,.14)}

/* ================= PRODUCT BUY BOX ================= */
.buy{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;
  max-width:var(--container);margin:0 auto;padding:0 var(--gutter);align-items:start}
/* Homepage buy box. .buy supplies the two-column grid, but it also carries the page
   container's max-width and gutter; nested inside .container that double-pads, so
   reset both here. The 1000px .buy rule already stacks this to one column, and
   .info{order:3} keeps image-above-info on mobile. */
.buy--home{max-width:none;margin:0;padding:0;gap:40px;align-items:center}
.buy--home .buy__media{background:var(--bg-soft);border-radius:var(--r-card);overflow:hidden}
.buy--home .buy__media img{display:block;width:100%;height:auto}
.gallery__main{position:relative;background:var(--bg-soft)}
.gallery__main img{width:100%;aspect-ratio:1/1;object-fit:cover}
.gallery__thumbs{display:flex;gap:10px;margin-top:12px}
.gallery__thumbs button{width:64px;height:64px;padding:0;border:1px solid var(--line);background:var(--bg-soft);overflow:hidden}
.gallery__thumbs button.is-active{border-color:var(--gold);border-width:2px}
.gallery__thumbs img{width:100%;height:100%;object-fit:cover}
/* mobile swipe carousel is built by JS; hidden on desktop, shown <=1000px */
.gallery__track,.gallery__dots{display:none}
/* mobile-only square hero scene (Bloomin-style, below the copy); desktop uses the wide banner */
.hero__scene--sq{display:none}
.guarantee-bar{background:var(--gold);color:var(--ink);text-align:center;font-weight:700;
  font-size:13px;letter-spacing:.04em;text-transform:uppercase;padding:12px}
.info{position:sticky;top:88px;display:flex;flex-direction:column;gap:16px}
.info h1{font-size:34px}
.info__sub{color:var(--ink-dim)}
.usps{display:flex;flex-direction:column;gap:10px}
.hr{height:1px;background:var(--line);border:0;margin:4px 0}
.offer-pill{background:var(--gold-soft);border:1px solid var(--gold);border-radius:12px;
  padding:11px 16px;font-size:14px;font-weight:600;color:var(--gold-deep)}
.offer-pill b{color:var(--ink)}

/* plan selector */
.plans{display:flex;flex-direction:column;gap:12px}
.plan{position:relative;display:block;border:1px solid var(--line);border-radius:12px;
  padding:15px 16px 15px 46px;cursor:pointer;transition:.15s;background:var(--bg)}
.plan::before{content:"";position:absolute;left:16px;top:18px;width:18px;height:18px;border-radius:50%;
  border:2px solid var(--line);background:var(--bg)}
.plan__top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.plan__name{font-weight:600}
.plan__sub{font-size:13px;color:var(--ink-dim);margin-top:2px}
.plan__price{font-weight:700;white-space:nowrap;font-size:19px}
.plan__price s{color:var(--ink-faint);font-weight:400;margin-right:6px;font-size:.79em}
.plan__per{font-size:12px;color:var(--ink-dim);text-align:right}
.badge{position:absolute;top:-10px;right:14px;font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;background:var(--gold);color:var(--ink);padding:3px 9px;border-radius:999px}
.badge--muted{background:var(--bg-alt);color:var(--ink-dim)}
.plan__benefits{display:none;grid-template-columns:1fr 1fr;gap:6px 14px;margin-top:12px;
  font-size:12.5px;color:var(--ink-dim)}
.plan__benefits div{display:flex;gap:6px;align-items:flex-start}
.onetime{display:flex;justify-content:center;gap:8px;font-size:14px;color:var(--ink-dim);padding-top:2px}
.onetime b{color:var(--ink)}

.ship-line{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-dim);margin-top:2px}

/* video wall */
.vwall__head{text-align:center;margin:6px 0 14px}
.vwall__head .stars{font-size:16px}
.vwall__head b{display:block;font-family:var(--font-head);font-weight:500;font-size:18px;margin-top:4px}
.vrail{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-ms-overflow-style:none;scrollbar-width:none}
.vrail::-webkit-scrollbar{display:none}
.vrail video,.vrail__cell{flex:0 0 110px;width:110px;height:180px;border-radius:10px;object-fit:cover;scroll-snap-align:start;cursor:pointer;background:var(--bg-soft)}

/* rotating single-line review trust bar (sits under the video wall) */
.qbar{position:relative;overflow:hidden;margin-top:30px;contain:content}
/* edge fade via gradient overlays (NOT css mask: masking an animated child forces a
   per-frame re-raster and stutters; gradients sit on top and let the row stay a GPU layer) */
.qbar::before,.qbar::after{content:"";position:absolute;top:0;bottom:0;width:44px;z-index:2;pointer-events:none}
.qbar::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.qbar::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.section--dark .qbar::before{background:linear-gradient(90deg,var(--dark),transparent)}
.section--dark .qbar::after{background:linear-gradient(270deg,var(--dark),transparent)}
.qbar__row{display:flex;width:max-content;animation:scroll-l 66s linear infinite;
  will-change:transform;transform:translateZ(0);backface-visibility:hidden}
.qbar:hover .qbar__row{animation-play-state:paused}
/* spacing via margin (NOT flex gap) so the -50% loop period is exact and seamless */
.qchip{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;margin-right:14px;
  padding:11px 20px;border-radius:999px;
  background:var(--bg-soft);border:1px solid var(--line)}
.qchip .stars{font-size:12px;letter-spacing:1.5px;flex:0 0 auto}
.qchip .qrate{font-size:12.5px;font-weight:700;color:var(--gold-deep);flex:0 0 auto;margin-left:-3px}
.qchip .qtxt{font-size:14.5px;font-weight:500;color:var(--ink)}
.qchip .qname{font-size:12.5px;font-weight:500;color:var(--ink-faint);flex:0 0 auto}
/* dark-section variant (reviews page video wall) */
.section--dark .qchip{background:rgba(243,239,230,.05);border-color:rgba(243,239,230,.16)}
.section--dark .qchip .qtxt{color:var(--cream-text)}
.section--dark .qchip .qname{color:rgba(243,239,230,.52)}
.section--dark .qchip .qrate{color:var(--gold-2)}
@media(max-width:600px){
  .qchip{padding:9px 15px;gap:9px}
  .qchip .qtxt{font-size:13px}
  .qchip .qname{font-size:11.5px}
  .qbar__row{animation-duration:50s}
}
@media(prefers-reduced-motion:reduce){.qbar__row{animation:none;transform:none}}

.video-pop{position:fixed;inset:0;z-index:90;background:rgba(16,15,13,.82);display:none;place-items:center;padding:20px}
.video-pop.open{display:grid}
.video-pop video{width:auto;max-width:360px;aspect-ratio:3.7/5;height:auto;max-height:88vh;border-radius:14px}
.video-pop__x{position:absolute;top:18px;right:22px;font-size:28px;color:#fff;background:none;border:0}

/* accordion (product details) */
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;padding:18px 0;font-weight:600;
  display:flex;justify-content:space-between;align-items:center}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-size:20px;color:var(--gold-deep);font-weight:400}
.acc details[open] summary::after{content:"\2013"}
.acc__body{padding:0 0 18px;color:var(--ink-dim);font-size:14px;line-height:1.6}

/* what-we-leave-out mini (in gallery col) */
.leave-mini{background:var(--bg-soft);border-radius:var(--r-soft);padding:22px;margin-top:14px}
.leave-mini__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;text-align:center;margin-top:12px}
.leave-mini__grid div{font-size:12px;color:var(--ink-dim)}
.leave-mini__grid .ic{width:34px;height:34px;margin:0 auto 6px;border-radius:50%;background:var(--gold-soft);
  display:grid;place-items:center;color:var(--gold-deep)}

/* sticky ATC */
.sticky-atc{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--bg);
  border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(27,23,15,.06);
  transform:translateY(110%);transition:transform .25s ease}
.sticky-atc.show{transform:translateY(0)}
.sticky-atc__in{max-width:1100px;margin:0 auto;padding:12px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.sticky-atc__l{display:flex;align-items:center;gap:12px;min-width:0}
.sticky-atc__l img{width:52px;height:52px;object-fit:cover;flex:0 0 52px}
.sticky-atc__title{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sticky-atc__price{font-weight:700}
.sticky-atc__price s{color:var(--ink-faint);font-weight:400;margin-right:6px}
.pill-save{background:var(--gold-soft);color:var(--gold-deep);font-size:12px;font-weight:700;
  padding:3px 9px;border-radius:999px;margin-left:8px}

/* ---------- footer ---------- */
.footer{background:var(--dark);color:var(--cream-text)}
.footer__in{max-width:var(--container);margin:0 auto;padding:56px var(--gutter) 40px;
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.footer h4{color:var(--cream-text);font-size:16px;margin-bottom:14px}
.footer a,.footer p{color:rgba(243,239,230,.72);font-size:14px}
.footer a{display:block;padding:6px 0}
.footer a:hover{color:var(--gold-2)}
.footer .brand{color:var(--cream-text)}
.footer .brand b{color:var(--gold-2)}
.footer__bottom{border-top:1px solid rgba(243,239,230,.14);padding:20px var(--gutter);
  max-width:var(--container);margin:0 auto;display:flex;justify-content:space-between;
  font-size:12px;color:rgba(243,239,230,.55);flex-wrap:wrap;gap:8px}

/* ---------- utilities ---------- */
.center-cta{text-align:center;margin-top:36px}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE  (desktop → mobile: single col, gutter 48→20,
   type ~40% down, hamburger nav)
   ============================================================ */
@media(max-width:1000px){
  :root{--gutter:24px;--sec-pad:44px}
  .hero__in,.buy,.steps,.panel--split,.footer__in{grid-template-columns:1fr}
  .hero__in:has(.hero__media){grid-template-columns:1fr;gap:0}
  .panel--split .panel__media,.hero__media{min-height:280px;order:-1}
  .info{position:static;top:auto}
  .stats{grid-template-columns:1fr;gap:24px;max-width:420px}
  .footer__in{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  :root{
    --gutter:20px;--sec-pad:36px;
    --hero:32px;--h1:28px;--h2:26px;--h3:21px;--h4:18px;--body:15px;
    --hero-text:100%;
  }
  .nav{display:none}
  .burger{display:flex}
  .header__right .btn{display:none}
  .hero__text{padding:36px 20px}
  .info h1{font-size:28px}
  .stat .num{font-size:44px}
  .leave-grid{grid-template-columns:1fr}
  .leave-mini__grid{grid-template-columns:repeat(2,1fr)}
  .plan__benefits{grid-template-columns:1fr}
  .footer__in{grid-template-columns:1fr}
  .panel{padding:32px 24px}
  .panel--split .panel__text{padding:32px 24px}
  .compare{font-size:12px}
  .compare th,.compare td{padding:12px 8px;font-size:12px}
  .sticky-atc__in{padding:10px 16px}
  .sticky-atc__l img{display:none}
  .btn--sticky{padding:12px 18px;font-size:13px}
}

/* ============================================================
   ADDITIONS — trust bar, founder band, WITHOUT/WITH, radio plans, lazy video
   ============================================================ */

/* trust bar under ATC */
.trustbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 18px;
  padding:14px 0 2px;border-top:1px solid var(--line);margin-top:4px}
.trustbar .pay{display:flex;gap:7px;align-items:center}
.trustbar .pay span{font-size:10px;font-weight:700;letter-spacing:.02em;color:var(--ink-dim);
  border:1px solid var(--line);border-radius:5px;padding:4px 7px;background:var(--bg)}
.trustbar .tb-note{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-dim)}
.trustbar .tb-note::before{content:"";width:14px;height:14px;flex:0 0 14px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23B0851E' stroke-width='2.5'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center/contain no-repeat}

/* founder band */
.founder{display:grid;grid-template-columns:minmax(0,512px) 1.15fr;align-items:center;gap:0;
  /* Shaun's portrait is a genuine 1024px phone photo. Cap the media column at
     512px so it is displayed at 2x and never upscaled into blur. */
  background:var(--bg-soft);border-radius:var(--r-soft);overflow:hidden}
.founder__media{position:relative;align-self:stretch;min-height:360px}
.founder__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.founder__text{padding:48px 56px}
.founder__text .eyebrow{margin-bottom:14px;display:block}
.founder__text blockquote{margin:0 0 16px;font-family:var(--font-head);font-weight:500;
  font-size:26px;line-height:1.25;letter-spacing:-.02em;color:var(--ink)}
.founder__text p{color:var(--ink-dim);font-size:15px}
.founder__sig{margin-top:16px;font-weight:600;font-size:14px}
.founder__sig span{color:var(--ink-dim);font-weight:400}

/* WITHOUT / WITH demo */
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:900px;margin:0 auto}
.demo{border:1px solid var(--line);border-radius:var(--r-soft);overflow:hidden;background:var(--bg-soft)}
.demo img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.demo__cap{display:flex;align-items:center;justify-content:center;gap:8px;
  padding:14px;font-weight:600;font-size:14px;letter-spacing:.04em;text-transform:uppercase}
.demo--without .demo__cap{color:var(--ink-dim)}
.demo--with .demo__cap{color:var(--ink);background:var(--gold-soft)}
.demo__note{text-align:center;color:var(--ink-faint);font-size:12px;margin-top:16px}

/* real radio inputs on plans (keeps visual, adds a11y + form value) */
.plan input[type=radio]{position:absolute;opacity:0;width:0;height:0}
.plan:focus-within{outline:2px solid var(--gold);outline-offset:2px}
.plan:has(input:checked){border-color:var(--gold);background:var(--gold-soft)}
.plan:has(input:checked)::before{border-color:var(--gold);background:var(--gold);box-shadow:inset 0 0 0 3px var(--bg)}
.plan:has(input:checked) .plan__benefits{display:grid}

/* lazy video wall: poster until in view; play icon overlay */
.vrail__item{position:relative;flex:0 0 110px;width:110px;height:180px;border-radius:10px;
  overflow:hidden;background:var(--bg-soft);scroll-snap-align:start;cursor:pointer}
.vrail__item img.vposter{width:100%;height:100%;object-fit:cover;display:block}
.vrail__item video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vrail__item .vplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:34px;height:34px;border-radius:50%;background:rgba(16,15,13,.55);display:grid;place-items:center;pointer-events:none}
.vrail__item .vplay::after{content:"";border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.vrail__item.playing .vplay{display:none}

/* 4-feature "why choose" grid (home) */
.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:980px;margin:0 auto}
.feature{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-soft);padding:32px}
.feature__ic{width:44px;height:44px;border-radius:50%;background:var(--gold-soft);display:grid;place-items:center;margin-bottom:16px}
.feature__ic svg{width:22px;height:22px;stroke:var(--gold-deep);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.feature h4{margin-bottom:8px}
.feature p{color:var(--ink-dim);font-size:15px}
@media(max-width:720px){.feature-grid{grid-template-columns:1fr}.feature{padding:24px}}

/* real review screenshots (genuine TikTok Shop reviews) */
.rev-shot{flex:0 0 340px;width:340px;border:1px solid var(--line);border-radius:var(--r-soft);
  overflow:hidden;background:#fff}
.rev-shot img{width:100%;height:auto;display:block}
.rev-wall{columns:3;column-gap:20px;max-width:1160px;margin:0 auto}
.rev-wall img{width:100%;margin:0 0 20px;border:1px solid var(--line);border-radius:var(--r-soft);
  display:block;break-inside:avoid;background:#fff}
@media(max-width:900px){.rev-wall{columns:2}}
@media(max-width:600px){.rev-wall{columns:1}}
/* mobile marquee: wide fades + wide cards leave only a cramped fragment of one
   review visible on a phone. Tighten both so a full card reads in the clear centre. */
@media(max-width:600px){
  .marquee::before,.marquee::after{width:40px}
  .rev-shot{flex:0 0 300px;width:300px}
}

/* shade selector (product buy box) */
.shades-pick{display:flex;flex-direction:column;gap:12px}
.shades-pick__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px;flex-wrap:wrap}
.shades-pick__head b{font-weight:600}
.shades-pick__head a{color:var(--ink-dim);font-size:13px;text-decoration:underline}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.sw{width:28px;height:28px;border-radius:50%;border:2px solid var(--line);
  background-color:var(--c);background-size:cover;background-position:center;background-repeat:no-repeat;
  cursor:pointer;padding:0;transition:transform .1s,box-shadow .12s}
.sw:hover{transform:scale(1.08)}
.sw.is-sel{border-color:var(--ink);box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--gold)}
/* real hair-texture swatches so buyers can match their own hair */
.sw[data-shade="Black"]{background-image:url(/assets/shade-black.webp)}
.sw[data-shade="Dark Brown"]{background-image:url(/assets/shade-dark-brown.webp)}
.sw[data-shade="Medium Brown"]{background-image:url(/assets/shade-medium-brown.webp)}
.sw[data-shade="Light Brown"]{background-image:url(/assets/shade-light-brown.webp)}
.sw[data-shade="Auburn"]{background-image:url(/assets/shade-auburn.webp)}
.sw[data-shade="Dark Blonde"]{background-image:url(/assets/shade-dark-blonde.webp)}
.sw[data-shade="Medium Blonde"]{background-image:url(/assets/shade-medium-blonde.webp)}
.sw[data-shade="Light Blonde"]{background-image:url(/assets/shade-light-blonde.webp)}
.sw[data-shade="Grey"]{background-image:url(/assets/shade-grey.webp)}
.sw[data-shade="White"]{background-image:url(/assets/shade-white.webp)}

/* lifestyle banner */
.lifestyle{position:relative;min-height:440px;display:flex;align-items:center;overflow:hidden;background:var(--bg-alt)}
.lifestyle>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lifestyle__scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,15,13,.62),rgba(16,15,13,.2) 52%,rgba(16,15,13,0) 78%)}
.lifestyle__in{position:relative;width:100%;max-width:var(--container);margin:0 auto;padding:48px var(--gutter)}
.lifestyle__text{max-width:440px}
.lifestyle__text .eyebrow{color:var(--gold-2)}
.lifestyle__text h2{color:var(--cream-text)}
.lifestyle__text h2 .accent{color:var(--gold-2)}
.lifestyle__text p{color:rgba(243,239,230,.86);margin:12px 0 22px}

/* newsletter / email capture */
.newsletter{background:var(--bg-soft);text-align:center;padding:var(--sec-pad) var(--gutter);border-top:1px solid var(--line)}
.newsletter__in{max-width:540px;margin:0 auto}
.newsletter form{display:flex;gap:10px;margin-top:20px}
.newsletter input[type=email]{flex:1;height:50px;border:1px solid var(--line);border-radius:var(--r-input);
  padding:0 16px;font-family:inherit;font-size:15px;background:var(--bg);color:var(--ink)}
.newsletter input[type=email]:focus{outline:2px solid var(--gold);outline-offset:1px}
.newsletter .fineprint{font-size:12px;color:var(--ink-faint);margin-top:12px}
.newsletter .thanks{color:var(--gold-deep);font-weight:600;margin-top:16px;display:none}
.newsletter.done form{display:none}
.newsletter.done .thanks{display:block}
@media(max-width:600px){.newsletter form{flex-direction:column}}

/* contact page: info + form */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:24px;max-width:960px;margin:0 auto;align-items:start}
.contact-card{background:var(--tint);border-radius:var(--r-card);padding:30px 32px}
.contact-card h3{margin-bottom:6px}
.contact-card .row{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--line)}
.contact-card .row:first-of-type{border-top:0}
.contact-card .row b{display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:2px}
.form{display:grid;gap:16px}
.form label{display:block;font-size:14px;font-weight:600;margin-bottom:6px;color:var(--ink)}
.form input,.form textarea{width:100%;border:1px solid var(--line);border-radius:var(--r-input);
  padding:13px 15px;font-family:inherit;font-size:16px;background:var(--bg);color:var(--ink)}
.form textarea{min-height:150px;resize:vertical}
.form input:focus,.form textarea:focus{outline:2px solid var(--gold);outline-offset:1px}
.form__note{font-size:13px;color:var(--ink-faint)}
@media(max-width:760px){.contact-grid{grid-template-columns:1fr}}

/* ============================================================
   PRODUCT PAGE v2 — Bloomin-parity buy box
   ============================================================ */

/* --- CRITICAL: stop grid/flex children forcing the buy box wider
       than the viewport (the .vrail min-content was blowing the
       whole mobile product page out to 590px). --- */
.buy>*{min-width:0}
.info{min-width:0}
.vrail{min-width:0}
.gallery__thumbs{min-width:0}

/* --- gallery frame: ribbon flag + floating benefit circles + zoom --- */
.gallery{position:relative}
.gallery__main{position:relative;overflow:hidden}

.flag{position:absolute;top:0;left:0;z-index:3;background:var(--gold);color:var(--ink);
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:9px 16px 9px 14px;clip-path:polygon(0 0,100% 0,88% 50%,100% 100%,0 100%)}

.zoom{position:absolute;right:12px;bottom:12px;z-index:3;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:rgba(253,248,248,.92);display:grid;place-items:center;
  cursor:pointer;padding:0;transition:transform .12s}
.zoom:hover{transform:scale(1.07)}
.zoom svg{width:17px;height:17px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round}

.gbadges{position:absolute;left:14px;top:50%;transform:translateY(-50%);z-index:2;
  display:flex;flex-direction:column;gap:20px;pointer-events:none}
.gbadge{text-align:center;width:92px}
.gbadge__ic{width:56px;height:56px;margin:0 auto 7px;border-radius:50%;background:var(--gold);
  display:grid;place-items:center;box-shadow:0 4px 14px rgb(16 15 13/.18)}
.gbadge__ic svg{width:26px;height:26px;stroke:var(--ink);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.gbadge span{display:block;font-size:11.5px;line-height:1.25;font-weight:600;color:var(--ink);
  text-shadow:0 1px 6px rgb(253 248 248 / .95),0 0 12px rgb(253 248 248 / .9)}

/* --- gallery thumb rail (8 slides: must scroll, never overflow) --- */
.gallery__thumbs{overflow-x:auto;scroll-snap-type:x proximity;
  -ms-overflow-style:none;scrollbar-width:none;padding-bottom:2px}
.gallery__thumbs::-webkit-scrollbar{display:none}
.gallery__thumbs button{flex:0 0 64px;scroll-snap-align:start}

/* --- mobile swipe gallery: below 1000px the gallery is full-width, so the main
       image becomes a native scroll-snap carousel with dot indicators; the thumb
       rail is hidden (swipe replaces tap-to-swap) --- */
@media(max-width:1000px){
  .gallery__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;
    width:100%;aspect-ratio:1/1;background:var(--bg-soft)}
  .gallery__track::-webkit-scrollbar{display:none}
  .gallery__slide{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always}
  .gallery__slide img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;display:block}
  .gallery__main>#galleryMain{display:none}
  .gallery__dots{display:flex;gap:6px;justify-content:center;order:2;margin-top:12px}
  .gallery__dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;
    background:rgb(16 15 13/.2);transition:width .2s ease,background .2s ease}
  .gallery__dots button.is-on{width:20px;border-radius:4px;background:var(--ink)}
  .gallery__thumbs{display:none}
}

/* --- image lightbox --- */
.img-pop{position:fixed;inset:0;z-index:9999;background:rgb(16 15 13/.86);
  display:none;place-items:center;padding:24px}
.img-pop.open{display:grid}
.img-pop img{max-width:min(720px,92vw);max-height:88vh;width:auto;height:auto;
  border-radius:var(--r-soft);background:var(--bg-soft)}
.img-pop__x{position:absolute;top:18px;right:18px;width:42px;height:42px;border-radius:50%;
  border:0;background:rgb(253 248 248/.94);font-size:17px;cursor:pointer;color:var(--ink)}

/* --- "what we leave out" card (upgraded from .leave-mini) --- */
.leave-card{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-soft);
  padding:34px 28px;margin-top:14px;text-align:center}
.leave-card h3{font-size:26px;margin-bottom:10px}
.leave-card>p{color:var(--ink-dim);font-size:14.5px;max-width:420px;margin:0 auto 24px}
.leave-card__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.leave-card__grid>div{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.3}
.leave-card__ic{width:54px;height:54px;margin:0 auto 9px;border-radius:50%;
  border:1.5px solid var(--gold);display:grid;place-items:center;background:var(--bg)}
.leave-card__ic svg{width:26px;height:26px;stroke:var(--gold-deep);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

@media(max-width:1000px){
  .gbadges{display:none}
}
@media(max-width:720px){
  .leave-card{padding:26px 18px}
  .leave-card h3{font-size:22px}
  .leave-card__grid{grid-template-columns:repeat(2,1fr);gap:20px 12px}
  .flag{font-size:10px;padding:7px 14px 7px 12px}

  /* comparison table: scroll sideways with the row labels pinned */
  .compare{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .compare table{min-width:540px}
  .compare th:first-child,.compare td:first-child{position:sticky;left:0;z-index:2;
    background:var(--bg);box-shadow:1px 0 0 var(--line)}
  .compare thead th:first-child{z-index:3}
}

/* ============================================================
   DE-TEMPLATE PASS — kill the generic tells, keep the Bloomin bones
   ============================================================ */

/* 1. Eyebrow labels on every single section is the biggest tell.
      Keep them off by default; opt back in with .eyebrow--keep. */
.sec-head .eyebrow{display:none}
.sec-head .eyebrow.eyebrow--keep{display:block}

/* 2. Section headings: tighter, bigger, less airy subhead. */
.sec-head h2{font-size:clamp(32px,3.6vw,50px);letter-spacing:-.028em;line-height:1.02}
.sec-head p{max-width:600px;font-size:16.5px;color:var(--ink-dim)}

/* 3. The 3 rationed soft panels (everything else stays square). */
.leave-card,.plan,.newsletter__in{border-radius:var(--r-panel)}

/* 4. Step numbers: editorial serif numerals, no gold bubble. */
.step__n{background:none!important;border:0!important;width:auto!important;height:auto!important;
  font-family:var(--font-head);font-size:40px;line-height:1;font-weight:500;
  color:var(--line-num,rgba(27,23,15,.22));min-width:52px;display:block;
  border-radius:0!important}

/* 5. Faint hairline instead of tinted panels where we used gold-soft. */
.feature{background:none;border:1px solid var(--line)}
.feature__ic{background:none;border:1px solid var(--line)}

/* 6. Real photos read better square and full-bleed. */
.demo-grid img,.founder__media img,.steps>img{border-radius:0!important}

.gallery__main img{cursor:zoom-in}


/* parked plan tiers must actually disappear */
.plan[hidden]{display:none!important}
/* Purchase type selector (one-time vs subscribe & save). Hidden until the checkout
   can actually process a subscription; the class rule must restate [hidden] or it
   would render anyway, same trap as .plan. */
.buytype{display:flex;flex-direction:column;gap:10px;margin:16px 0 6px}
.buytype[hidden]{display:none!important}
.btype{position:relative;display:flex;align-items:center;gap:11px;border:1px solid var(--line);
  border-radius:var(--r-row);padding:14px 16px;cursor:pointer;background:var(--bg)}
.btype input{accent-color:var(--gold-deep);width:18px;height:18px;flex:0 0 auto}
.btype__txt{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;line-height:1.3}
.btype b{font-size:14px;font-weight:600;color:var(--ink)}
.btype i{font-style:normal;font-size:12.5px;color:var(--ink-dim)}
.btype .off{color:#2e7d46;font-weight:700;font-size:13px;white-space:nowrap;flex:0 0 auto}
.btype:has(input:checked){border-color:var(--gold-deep);background:var(--tint-gold)}

/* ============================================================
   TYPE PASS — Outfit (headings/logo) + DM Sans (body), the
   Sofia Pro / DM Sans pairing Bloomin actually runs.
   ============================================================ */
.sec-head h2{font-weight:600;letter-spacing:-.035em;line-height:1.0}
.info h1{font-weight:600;letter-spacing:-.035em;line-height:1.04}
.compare thead th{font-weight:600;letter-spacing:-.02em}
.stat .num{font-weight:600;letter-spacing:-.04em}
.founder__text blockquote{font-weight:500;letter-spacing:-.025em;line-height:1.22}
.step__n{font-weight:600;letter-spacing:-.04em}
.plan__price{letter-spacing:-.03em}
.btn{letter-spacing:.02em}

/* ============================================================
   MOBILE BUY-BOX ORDER — the offer must come before the extras.
   Was: image, thumbs, guarantee bar, "what we leave out", THEN
   the H1 at 1160px and Add to basket at 1783px. On a phone that
   is a wall of scrolling before the visitor sees a price.
   Bloomin's mobile order is gallery > info > plans > ATC > rest.
   ============================================================ */
@media(max-width:1000px){
  /* align-items:start from the desktop .buy rule survives into this column
     flex container and makes children size to MAX-CONTENT, which is what
     blew the page out to 610px again. stretch is load-bearing. */
  .buy{display:flex;flex-direction:column;gap:24px;align-items:stretch}
  .gallery{display:contents}
  .gallery__main{order:1}
  .gallery__thumbs{order:2}
  .info{order:3}
  .guarantee-bar{order:4}
  .leave-card{order:5;margin-top:0}
}

/* marquee: reserve height so lazy rows do not collapse to nothing on a fast scroll */
.marquee__row{min-height:240px}
/* ...but that 240px reserve is sized for desktop's 340px cards. On mobile the cards
   are 300px (shorter), so the reserve leaves dead white space below them. Images
   carry width/height attrs, so the box is reserved without it. Placed here (after the
   240px rule) so source order wins, since media queries add no specificity. */
@media(max-width:600px){.marquee__row{min-height:0}}
/* shade swatches: real hair texture, bigger so the strands read */
.sw{width:50px;height:50px}
@media(max-width:720px){.sw{width:52px;height:52px}}

/* ============================================================
   COLOR + TYPE PASS  (audit: white band share was 41% on home
   and 2.3% on /reviews, against Bloomin's 68.8%. And we shipped
   82 brand-coloured TEXT elements on /product where Bloomin has
   12. The "beige" feeling is those two numbers, nothing else.)
   ============================================================ */

/* --- 1. neutral muted text. warm brown paragraphs on warm cream
       bands left no neutral anywhere for the gold to read against. --- */
:root{
  --ink-dim:#5A5651;      /* was #58513F, a brown. 7.28:1 on white */
  --ink-faint:#6E6659;    /* was #8C8471, which failed at 12-16px */
  --star:#B0851E;         /* clean gold fallback; supported browsers get --grad-star */
}

/* --- 2. ONE wash, not two. #F6F4EF and #FAF8F4 were 1.04:1 apart:
       a visible seam with no perceived change. Cream is now the
       announcement bar only; every section wash is the single soft. --- */
.section--cream{background:var(--bg-soft)}
.section--soft{background:var(--bg-soft)}

/* --- 3. give the page back its white (hero keeps its warm scene band).
       The text panel under the scene fades the gold out into near-white so it
       reads soft, not saturated, while a whisper of warmth up top avoids a hard
       seam against the gold scene image. --- */
.hero{background:linear-gradient(180deg,#F8EEDD 0%,#FCF7EE 45%,#FEFDFA 100%)}
body.p-reviews .section--cream,
body.p-reviews .section--soft{background:#fff}
body.p-reviews .section--cream + .section--soft{background:var(--bg-soft)}

/* --- 4. eyebrows were deep gold at 12px = 3.5:1, and there were 42.
       Bloomin measured this exact failure and avoided it. --- */
.eyebrow{color:var(--ink)}
.lifestyle__text .eyebrow{color:var(--gold-2)}   /* on dark, still fine */

/* --- 5. stop the buy box competing with its own button. There were
       nine solid gold fills in one column; now the button owns it. --- */
.flag{background:var(--gold-soft);color:var(--ink);box-shadow:inset 0 0 0 1px var(--gold)}
.guarantee-bar{background:#F8F4E9;color:var(--ink);border-top:1px solid var(--gold);
  border-bottom:1px solid var(--gold)}
.gbadge__ic{background:#fff;border:1.5px solid var(--gold)}
.gbadge__ic svg{stroke:var(--gold-deep)}
.badge{background:var(--grad-gold);color:var(--ink)}
.offer-pill{color:var(--ink)}
.offer-pill b{color:var(--ink)}
.pill-save{background:var(--grad-gold);color:var(--ink)}

/* --- 6. never paint a competitor's tick in our brand colour. --- */
.compare td:not(.col-us).yes{color:var(--ink-dim)}
.compare .col-us.yes{color:var(--ink)}

/* --- 7. if the lifestyle photo fails, the copy must not vanish. --- */
.lifestyle{background:var(--dark)}

/* --- 8. type: a geometric sans needs a tracking RAMP. one flat
       -0.032em token at 48px and at 16px is serif-era thinking. --- */
h1{letter-spacing:-.045em}
h2{letter-spacing:-.04em}
h3{letter-spacing:-.03em}
h4{letter-spacing:-.022em}

.hero__text h1{font-size:clamp(32px,4vw,56px);line-height:1.07}
.info h1{font-size:40px;line-height:1.1;letter-spacing:-.03em}
.sec-head h2{font-size:clamp(32px,3.6vw,50px);letter-spacing:-.04em;line-height:1.02}
/* Bloomin runs EVERY section headline at one scale (52px desktop -> 32px mobile),
   including the ones inside split cards. Ours fell back to the 32px base h2 in
   .panel__text, which read as two competing heading sizes down the page. */
.panel__text h2{font-size:clamp(30px,3.3vw,46px);letter-spacing:-.038em;line-height:1.03}
/* Bloomin headlines never drop a single orphan word onto its own line. */
h1,h2,.panel__text h2,.sec-head h2{text-wrap:balance}
.brand{font-size:30px;font-weight:800;letter-spacing:-.04em}
.nav a{font-size:16px}
.acc summary{font-size:20px;font-weight:500;line-height:1.3}

/* buttons use the HEADING font in the reference, not body two sizes down */
.btn{font-family:var(--font-head);font-size:17px;font-weight:600;padding:16px 30px}
.btn--lg{font-size:18px}
.btn--sticky{font-size:15px}

/* --- 9. the two cream hero bands were 57% empty. --- */
body.p-reviews .section--cream,body.p-faq .section--cream{padding:48px 0}

@media(max-width:720px){
  .info h1{font-size:30px}
  .sec-head h2{line-height:1.1}
  .acc summary{font-size:17px}
  .btn{font-size:16px}
  .btn--lg{font-size:16px}
  body{line-height:1.4}
  .brand{font-size:25px}
}

/* ============================================================
   MOBILE PARITY PASS
   ============================================================ */

/* the founder photo was rendering as an 11px vertical sliver on every
   phone: .founder was never added to the mobile grid-collapse list, so
   Shaun's face (the trust anchor of the whole brand) was invisible. */
@media(max-width:1000px){
  .founder{grid-template-columns:1fr}
  /* stacked: keep Shaun's 1024px portrait at 2x rather than letting it stretch */
  .founder__media{max-width:512px;width:100%;margin:0 auto}
  .founder__media{order:-1}
  .founder__media img{width:100%;height:auto;max-height:420px;object-fit:cover;object-position:center top}
}

/* newsletter input was rendering 22px tall on all 7 routes. iOS zooms
   any input under 16px on focus, so both values matter. */
.newsletter input[type=email]{height:52px;min-height:52px;font-size:16px}

/* sticky bar: title was clipping to "Densifol Kerat...", the save pill
   wrapped onto two lines, and the CTA label sat at 13px. */
.sticky-atc__title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.pill-save{white-space:nowrap;display:inline-block}
.btn--sticky{font-size:15px;padding:14px 22px}
@media(max-width:720px){
  .sticky-atc__title{max-width:110px;font-size:13px}
  .btn--sticky{font-size:15px;padding:13px 18px;flex:0 0 auto}
  .sticky-atc__price{font-size:15px}
}

/* nothing doing conversion work should sit at 10-11px */
.badge{font-size:12px;letter-spacing:.06em}
.flag{font-size:12px}
.plan__per{font-size:13px}
.pill-save{font-size:12px}
.guarantee-bar{font-size:13.5px}

/* comparison table: tell the thumb there is more to the right */
@media(max-width:720px){
  .compare{position:relative}
  .compare table{min-width:520px}
  .compare th:first-child,.compare td:first-child{min-width:132px;max-width:132px}
  .compare th,.compare td{font-size:12.5px;padding:12px 6px}
  .compare-hint{display:block}
}
.compare-hint{display:none;text-align:center;font-size:12px;color:var(--ink-dim);margin-top:10px}

/* tap targets */
/* was display:inline-block, which ran the footer links together with no gap
   ("Buy DensifolFind your shadeHow it works"). block keeps the column stack;
   min-height preserves the 34px tap target this rule was added for. */
.footer__in a{display:block;padding:6px 0;min-height:34px}
.burger{width:44px;height:44px}
.shades-pick__head a{display:inline-block;padding:8px 0}

/* NOT 4:5. Six of the eight gallery slides are 1:1 info cards, and a 4:5
   box with object-fit:cover crops 20% off their left and right edges,
   which cuts the text. 1:1 is correct for the set, and it saves 87px of
   scroll above the Add to basket button. */

.anchor-line{font-size:13.5px;color:var(--ink-dim);margin-top:-6px}
.atc-reassure{font-size:13px;color:var(--ink-dim);text-align:center;margin-top:-4px}
a.rating-row{text-decoration:none}
a.rating-row:hover{text-decoration:underline}

/* tighten the mobile buy box so the button comes up sooner */
@media(max-width:720px){
  .buy{gap:18px}
  .info{gap:13px}
  .gallery__thumbs button{flex:0 0 54px;width:54px;height:54px}
  .plan{padding:14px}
  .plan__benefits{gap:4px;margin-top:8px}
  .usps{gap:7px}
}

/* Hero is now ONE full-bleed scene image with the text overlaid on its clean
   left. Mobile stacks: the scene becomes a strip on top, text below it. */
@media(max-width:1000px){
  .hero{display:flex;flex-direction:column}
  /* Bloomin-style hero: centered copy leads, the square product scene sits below it */
  .hero__in{order:1;min-height:auto}
  .hero__scene--wide{display:none}
  .hero__scene--sq{display:block;order:2;position:relative;inset:auto;
    width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:center}
  .hero__text{align-items:center;text-align:center;max-width:600px;margin:0 auto;padding:34px 22px 12px}
  .hero .rating-row{justify-content:center}
  .hero__cta{width:100%;max-width:440px;margin-left:auto;margin-right:auto}
  .hero__trust{justify-content:center}
}
.rev-cta{margin-top:20px}
.trustbar .pay span{font-size:11px}

/* info-card slides carry their own text: no overlays on top of them */
.gallery__main.is-plain .gbadges,
.gallery__main.is-plain .flag{display:none}
/* info cards are 1:1 artwork, show them whole rather than cropping */
.gallery__main.is-plain img{object-fit:contain;background:var(--bg-soft)}


/* skip link */
.skip{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--ink);color:#fff;
  padding:10px 16px;border-radius:0 0 6px 0;font-size:14px}
.skip:focus{left:0}

/* visible focus for keyboard users */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,
.sw:focus-visible,.plan:focus-within{outline:3px solid var(--gold-deep);outline-offset:2px}

/* anchor targets were landing 71px under the sticky header */
:target,#reviews,#shades,#main{scroll-margin-top:96px}

/* the sticky bar was keyboard-focusable while parked off screen */
.sticky-atc:not(.show){visibility:hidden}

/* swipe hint was display:none at every width */
@media(max-width:720px){.compare-hint{display:block!important}}

/* founder band clipped its own content below 387px */
@media(max-width:420px){
  .founder{grid-template-columns:1fr;gap:20px}
  .hero__badges .tag{white-space:normal}
}
/* nav collapsed to a 0px gap and wrapped mid-label between 721 and 845px */
@media(max-width:900px) and (min-width:721px){
  .nav{gap:14px;font-size:14px}
  .header__in{gap:14px}
  .header__right .btn{padding:12px 18px;font-size:14px}
}
/* /shades CTA forced a 13px document overflow at 320px */
@media(max-width:360px){
  .btn{white-space:normal;text-align:center}
}

/* ============================================================
   CARD SYSTEM  (built to the measured Bloomin spec)
   The reference has SIX card archetypes and the discipline is
   subtractive: the default card is FILL + RADIUS and nothing
   else. No border, no shadow, no gradient, no hover, no inner
   dividers. Borders appear in exactly one place (the selectable
   row, where they carry state) and there is exactly one shadow
   (a glass card floating on a photo). Radius is proportional to
   the box, not one global token.
   ============================================================ */
:root{
  --r-hero:40px;    /* full-width feature panels */
  --r-card:26px;    /* standalone content cards */
  --r-block:20px;   /* small blocks, chips, accordion headers */
  --r-row:12px;     /* compact selectable rows */
  --r-pill:999px;
  --tint:#FAF8F4;              /* the one card tint */
  --tint-gold:rgba(200,162,76,.10);
  --shadow-card:4px 8px 20px rgba(180,116,30,.14);  /* gold-tinted, never neutral */
}

/* --- archetype 1: hero tinted panel --- */
.panel{background:var(--tint);border:0;box-shadow:none;border-radius:var(--r-hero);padding:56px 64px}
.panel--split{padding:0;overflow:hidden;border-radius:var(--r-hero)}
.panel--split .panel__text{padding:56px 60px}

/* --- archetype 2: soft tinted card. fill + radius, nothing else --- */
.leave-card{background:var(--tint);border:0;box-shadow:none;border-radius:var(--r-card);padding:34px 40px}
.rev-shot{background:var(--tint);border:0;box-shadow:none;border-radius:var(--r-card);overflow:hidden}
.leave{background:var(--tint);border:0;box-shadow:none;border-radius:var(--r-block);
  padding:18px 22px;min-height:78px}
.compare{border:0;border-radius:var(--r-card);overflow:hidden;background:var(--tint)}
.acc details{background:transparent}

/* --- archetype 4: the ONLY bordered card, because the border carries state --- */
.plan{border-radius:var(--r-row);padding:15px 18px 15px 46px;box-shadow:none}

/* --- archetype 5: pills --- */
.chip,.badge,.tag,.pill-save{border-radius:var(--r-pill)}
.offer-pill{border-radius:var(--r-block)}

/* --- non-cards stay non-cards: dividers and bare type only --- */
.stat,.step{background:none;border:0;box-shadow:none;border-radius:0}

/* --- ONE icon treatment: gold glyph at 20px inside a 36px pale disc.
       (0.556 glyph-to-container, the reference's exact ratio.) --- */
.leave-card__ic,.leave .x{
  width:46px;height:46px;flex:0 0 46px;border-radius:50%;
  background:rgba(200,162,76,.18);border:0;
  display:grid;place-items:center;margin:0 auto 11px;padding:0;color:var(--gold-deep)}
.leave-card__ic svg{width:25px;height:25px;stroke:var(--gold-deep);stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.leave .x{margin:0}

/* --- type hierarchy INSIDE a card: tight heading, loose body.
       That contrast in one box is what makes a small card read authored. --- */
.leave-card h3{font-size:26px;line-height:1.1;letter-spacing:-.03em;margin-bottom:10px}
.leave-card>p{font-size:15px;line-height:1.6;color:var(--ink-dim);max-width:440px;margin:0 auto 26px}
.leave-card__grid>div{font-size:13px;font-weight:600;line-height:1.35}

@media(max-width:1000px){
  .panel,.panel--split{border-radius:var(--r-card)}
  .panel{padding:36px 26px}
  .panel--split .panel__text{padding:32px 24px}
}
@media(max-width:720px){
  .leave-card{padding:26px 22px;border-radius:var(--r-block)}
  .rev-shot{border-radius:var(--r-block)}
  .compare{border-radius:var(--r-block)}
}

/* intrinsic width/height are set on every img for layout stability; CSS still drives size */
img{max-width:100%;height:auto}
.hero__media img,.panel__media img,.gallery__main img,.lifestyle>img,.founder__media img{height:100%}
.demo-grid img,.steps>img,.rev-shot img{height:auto}

/* Shaun's own before/after photos are genuine phone shots at ~430px: cap their display
   size so they are never upscaled into blur. */
.story-proof img{max-width:300px;width:100%;height:auto;margin:0 auto}

/* ============================================================
   MOBILE TYPE SCALE — normalization pass (2026-07-28)
   Problem fixed: the mobile page was rendering ~13 font sizes with
   1px steps + half-pixel values, and section headings clamped to 32px
   (identical to the hero) so nothing ranked above anything = "busy".
   This snaps every mobile size to ONE tight 6-step scale so the
   hierarchy reads calm and complementary. Fully reversible: delete
   this block to revert.
   Scale: hero 33 · section 25 · quote/h3 21 · body 16 · meta 14 · micro 12
   ============================================================ */
@media(max-width:720px){
  :root{ --hero:33px; --h1:29px; --h2:25px; --h3:21px; --h4:19px; --body:16px; --sm:14px; --xs:12px; }

  /* HEADINGS — hero dominates, sections a clear step below */
  .hero__text h1{ font-size:33px; line-height:1.06; }
  .info h1{ font-size:28px; line-height:1.1; }
  .sec-head h2, .panel__text h2{ font-size:25px; line-height:1.12; }
  .founder__text p{ font-size:21px; line-height:1.32; }
  .leave-card h3{ font-size:21px; }
  .acc summary{ font-size:16px; }
  .vwall__head b{ font-size:18px; }

  /* PROSE BODY = 16 */
  .sec-head p, .step p, .feature p, .rev-card p, .acc__body, .leave-card>p{ font-size:16px; }

  /* SMALL META = 14 (snaps the 13 / 13.5 / 14 / 14.5 cluster) */
  .rating-row, .check, .hero__trust .check, .stat .cap, .rev-card .name,
  .footer a, .footer p, .plan__sub, .onetime, .anchor-line, .atc-reassure,
  .guarantee-bar, .founder__sig, .shades-pick__head, .form label{ font-size:14px; }

  /* MICRO = 12 (snaps the 10 / 11 / 11.5 / 12 / 12.5 cluster) */
  .eyebrow, .tag, .badge, .flag, .plan__per, .pill-save, .demo__note,
  .newsletter .fineprint, .compare-hint, .rev-card .label, .btype i,
  .leave-card__grid>div, .gbadge span, .qchip .qname, .qchip .qrate,
  .form__note, .compare th, .compare td{ font-size:12px; }

  /* FUNCTIONAL EMPHASIS kept */
  .plan__price{ font-size:19px; }
  .btn, .btn--lg{ font-size:16px; }

  /* --- audit pass 2 (2026-07-28): snap the leftovers the first pass missed --- */
  blockquote{ font-size:21px; line-height:1.32; }        /* founder pull-quote (was 26) */
  .vwall__head b{ font-size:16px; }                       /* stat caption (was 18) */
  .stars{ font-size:14px; }                               /* rating glyphs (was 15) */
  .plan__price s, .sticky-atc__price{ font-size:14px; }   /* strike / sticky price (was 15) */
  .announce, .announce b{ font-size:12px; }               /* top offer bar (was 13) */
  .chip{ font-size:12px; }                                /* reason pills (was 13) */
  .ship-line, .ship-line span, .off, .btype .off{ font-size:12px; }  /* shipping + savings (was 13) */
  .qchip .qtxt{ font-size:12px; }                         /* marquee review text (was 13) */
  .shades-pick__head a, .anchor-line{ font-size:12px; }   /* helper links (was 13) */
  .trustbar .pay span{ font-size:12px; }                  /* payment labels (was 11) */

  /* plan badges (STARTER / MOST POPULAR / BEST VALUE): smaller, less chunky */
  .badge{ font-size:10px; padding:2px 8px; letter-spacing:.04em; top:-9px; }

  /* comparison table: fit all 4 columns on screen, kill the sideways swipe */
  .compare table{ min-width:0; }
  .compare th, .compare td{ padding:11px 5px; font-size:12px; }
  .compare th:first-child, .compare td:first-child{ min-width:84px; max-width:110px; position:static; }
  .compare thead th{ font-size:11.5px; line-height:1.15; letter-spacing:-.01em; }
  .compare-hint{ display:none !important; }

  /* --- audit pass 3: last two leftovers --- */
  .founder__text blockquote{ font-size:21px; }   /* founder quote: specificity fix, was 26 (dup of section 25) */
  .sticky-atc__title{ font-size:12px; }           /* sticky bar title, was 13 */

  /* --- fine-tune (2026-07-28): buy-box density per Nate --- */
  /* benefit checklist: smaller check + text */
  .check{ font-size:13px; gap:8px; }
  .check::before{ width:15px; height:15px; flex:0 0 15px; }
  /* shade swatches: smaller circles so all 10 shades sit compact (was 52px) */
  .sw{ width:42px; height:42px; }
  .swatches{ gap:7px; }
  .shades-pick{ gap:10px; }
}

/* ============================================================
   HOMEPAGE — Bloomin-style contrast + section rhythm (scoped to .p-home)
   Bloomin's punch = a bold brand colour used constantly + distinct section
   backgrounds that alternate + near-black text. Densifol's brand is gold+black,
   so NEAR-BLACK becomes the bold punctuation (dark panels/bands, like Bloomin's
   magenta) and GOLD stays the accent. The product page is untouched.
   ============================================================ */
body.p-home{ --panel-tint:#F4E9D4; --wash:#FBF5EA; }

/* hero: soft warm blush that RESOLVES TO WHITE so it blends into the first section */
body.p-home .hero{ background:linear-gradient(180deg,#FBEBCF 0%,#FDF5E8 58%,#FFFFFF 100%); }

/* section rhythm: ONE consistent soft cream for every tinted section (cohesive),
   white for the rest, dark bands for punch. No clashing warm tones. */
body.p-home .section--soft{ background:var(--wash); }
body.p-home .section--cream{ background:var(--wash); }

/* "Why Densifol" = clean champagne panel, no product image (kills the redundant middle bottle) */
body.p-home .panel--tint{ background:var(--panel-tint); border-radius:var(--r-panel); padding:40px 26px; }
body.p-home .panel--tint .chip{ background:#fff; }

/* comparison: Densifol column solid near-black for punch (Bloomin's magenta column) */
body.p-home .compare .col-us{ background:var(--dark); color:var(--cream-text); }
body.p-home .compare thead .col-us{ background:var(--dark); color:var(--gold-2); }
body.p-home .compare .col-us.yes{ color:var(--gold-2); font-weight:700; }

/* newsletter: dark full-bleed band (contrast punctuation, like Bloomin's magenta footer band) */
body.p-home .newsletter{ background:var(--dark); color:var(--cream-text); border-top:0; }
body.p-home .newsletter .eyebrow{ color:var(--gold-2); }
body.p-home .newsletter h2{ color:var(--cream-text); }
body.p-home .newsletter .muted{ color:rgba(243,239,230,.72); }
body.p-home .newsletter .fineprint{ color:rgba(243,239,230,.5); }

/* mobile: the "Part of the routine" band's copy was overlapping the bottle.
   Darken the scrim across the full width and push the bottle further off-screen
   so the text always sits on clean dark and the product is a subtle backdrop. */
@media(max-width:600px){
  .lifestyle__scrim{ background:linear-gradient(90deg,rgba(16,15,13,.93) 0%,rgba(16,15,13,.78) 50%,rgba(16,15,13,.45) 100%); }
  .lifestyle__text{ max-width:none; }
  .lifestyle>img{ object-position:88% center; }
}