/* ==========================================================
   The Dairy Free Cheese Lab
   Built to match the Figma design (values pulled from the file)
   Fonts: Playfair (display), DM Sans (body), Inter (buttons)
   ========================================================== */

:root{
  --ink:        #292727;   /* main body text */
  --ink-soft:   #484444;   /* quote text */
  --black:      #000000;
  --green:      #5C6B3C;   /* accent */
  --green-dark: #4C5A31;
  --stat-bar:   #423E3E;   /* dark numbers band (Figma) */
  --stat-text:  #BFBDC1;
  --cream:      #F6F2EC;
  --page:       #FFFFFF;
  --maxw:       1440px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{ -webkit-text-size-adjust:100% }

body{
  font-family:"DM Sans",system-ui,Arial,sans-serif;
  color:var(--ink);
  background:var(--page);
  line-height:1.6;
  overflow-x:hidden;
}

img{max-width:100%;display:block}

.wrap-narrow{
  max-width:760px;
  margin:0 auto;
  padding:0 24px;
}

/* ---------- NAV (Figma: top_bar 1440x49, #F5F5F5) ---------- */
.nav{
  position:absolute;
  inset:0 0 auto 0;
  z-index:5;
  background:#F5F5F5;
  height:49px;
  display:flex;
  align-items:center;
}
.nav-in{
  max-width:var(--maxw);
  margin:0 auto;
  width:100%;
  padding:0 37px 0 37px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.nav-ico{display:none}
.nav-brand{
  font-size:14px;
  font-weight:400;
  letter-spacing:.02em;
  color:var(--black);
  text-decoration:none;
  white-space:nowrap;
}
.nav-links{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:14px;
}
.nav-links a{
  color:var(--black);
  text-decoration:none;
}
.nav-links a:hover{text-decoration:underline}
.nav-links span{color:var(--black);opacity:.55}
.nav-join{font-weight:500}

/* ---------- HERO ---------- */
/* Measured off the designer's export: from the top of the page down to the
   stats bar is 685px at 1440 wide. The nav takes 33 of those, so the hero
   itself is 652. Capped against the viewport so it still clears the fold on
   short laptop screens. */
.hero{
  position:relative;
  height:685px;          /* designer: top-of-page to stats band = 685px @1440 */
  min-height:685px;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.hero picture{display:contents}
.m{display:none}
.hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center right;
  z-index:0;
}
.hero-in{
  position:relative;
  z-index:2;
  max-width:var(--maxw);
  margin:0 auto;
  width:100%;
  padding:0 28px;
}
/* Figma: hero copy column sits at page-x 86, width 544, ALL CENTERED */
.hero-copy{
  width:544px;
  margin-left:86px;
  text-align:left;
  padding-top:10px;
}
.hero-mark{margin:-14px 0 30px -14px}
.hero-mark img{width:118px;height:118px;margin:0;object-fit:contain}
.eyebrow{
  font-size:17px;
  font-weight:700;
  letter-spacing:.85px;
  color:var(--black);
  margin-bottom:16px;
}
h1{
  font-family:"Playfair",Georgia,serif;
  font-size:62px;
  font-weight:900;
  line-height:1.12;
  letter-spacing:0;
  color:var(--black);
}
h1 .green{color:var(--green)}
.hero-sub{
  font-size:17px;
  font-weight:600;
  line-height:1.34;
  color:var(--black);
  margin:26px 0 32px;
  max-width:486px;
}
.hero-cta{display:flex;gap:36px;flex-wrap:wrap;align-items:center;justify-content:flex-start}
.hero-micro{
  font-size:12px;
  font-weight:400;
  color:var(--black);
  margin-top:16px;
}
.hero-micro.dark{color:var(--ink)}

/* ---------- BUTTONS ---------- */
/* Figma: buttons are 39px tall, radius 8 */
.btn{
  font-family:"Inter",system-ui,Arial,sans-serif;
  font-size:16px;
  font-weight:700;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:39px;
  padding:0 22px;
  border-radius:8px;
  transition:transform .15s ease, background-color .15s ease, box-shadow .15s ease;
  white-space:nowrap;
}
.hero-cta .btn-solid{width:171px;padding:0}
.hero-cta .btn-ghost{width:185px;padding:0}
.btn-solid{
  background:var(--green);
  color:#fff;
  border:1.5px solid var(--green);
}
.btn-solid:hover{background:var(--green-dark);border-color:var(--green-dark);transform:translateY(-1px)}
.btn-ghost{
  background:transparent;
  color:var(--black);
  border:1.5px solid rgba(0,0,0,.75);
}
.btn-ghost:hover{background:rgba(0,0,0,.05);transform:translateY(-1px)}
.btn:focus-visible{outline:3px solid var(--green);outline-offset:3px}

/* ---------- STATS (Figma: 1440x124, #423E3E) ---------- */
.statquote{display:flex;flex-direction:column}
.stats{background:var(--stat-bar);height:122px;display:flex;align-items:center}
.stats-in{
  max-width:772px;
  margin:0 auto;
  width:100%;
  padding:0 28px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.stat{
  text-align:center;
  position:relative;
  padding:0 12px;
}
.stat + .stat::before{
  content:"";
  position:absolute;
  left:0;top:6px;bottom:6px;
  width:1px;
  background:rgba(191,189,193,.32);
}
.stat-num{
  display:block;
  font-size:45px;
  font-weight:200;
  line-height:1.05;
  color:var(--stat-text);
  letter-spacing:.01em;
}
.stat-num i{font-size:25px;font-weight:300;font-style:normal;vertical-align:super}
.stat-lbl{
  display:block;
  font-family:"Playfair",Georgia,serif;
  font-size:15px;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--stat-text);
  margin-top:4px;
}

/* ---------- QUOTE ---------- */
.quote{
  padding:45px 24px 44px;   /* Figma: quote section = 234px total (stats→rule) */
  text-align:center;
}
.quote p{
  font-family:"Playfair",Georgia,serif;
  font-style:italic;
  font-size:40px;           /* Figma: quote text ~34px, block ~122px tall for 3 lines */
  font-weight:500;
  line-height:1.28;
  color:var(--ink-soft);
}
/* Figma: 1440x29, #F1F0F2 */
.rule-band{height:29px;background:#F1F0F2}

/* ---------- HONEST ---------- */
.honest{padding:74px 0 86px}
.honest h2{
  font-size:30px;
  font-weight:500;
  color:var(--ink);
  text-align:center;
  margin-bottom:26px;
}
.honest h2.mt{margin-top:56px}
.lead{
  font-size:17px;
  font-weight:400;
  line-height:1.72;
  color:var(--ink);
  text-align:center;
}
.hairline{
  border:0;
  border-top:1px solid #C9BE9B;
  margin:34px auto;
  max-width:560px;
}
.drill{
  font-size:19px;
  font-weight:700;
  color:var(--green);
  text-align:center;
  margin-bottom:16px;
}
.drill-list{
  list-style:none;
  max-width:700px;   /* Figma: wide enough that each bullet stays on one line (no orphan words) */
  margin:0 auto;
}
.drill-list li{
  font-size:17px;
  font-weight:500;
  line-height:1.75;
  color:var(--ink);
  padding-left:18px;
  position:relative;
}
.drill-list li::before{
  content:"•";
  position:absolute;
  left:0;
  color:var(--ink);
}

/* ---------- WELCOME (Figma: 1440x579 with a photo background) ---------- */
.welcome{
  background:#F6F2EC url("img/img27.jpg") center/cover no-repeat;
  min-height:579px;
  padding:38px 0 46px;
  text-align:center;
  display:flex;
  align-items:center;
}
.welcome-eyebrow{
  font-size:20px;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--green);
  margin-bottom:14px;
}
.welcome-title{
  font-family:"Playfair",Georgia,serif;
  font-size:50px;
  font-weight:700;
  line-height:1.2;
  color:var(--ink);
  margin-bottom:28px;
}
.welcome-body{
  font-size:17px;
  font-weight:400;
  line-height:1.55;
  color:var(--ink);
  margin-bottom:22px;
}
.welcome-quote{
  font-size:28px;
  font-weight:600;
  color:var(--ink);
  margin:16px 0 34px;
}
.welcome-cta .btn{padding:15px 34px;font-weight:500;text-align:center}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width:1100px){
  h1{font-size:52px}
  .hero-copy{max-width:60%}
  .quote p{font-size:34px}
  .welcome-title{font-size:42px}
}

@media (max-width:820px){
  /* NAV — designer mobile: centered wordmark, small logo icon on the left */
  .nav{position:static;height:auto}
  .nav-in{padding:13px 20px;flex-direction:row;gap:8px;align-items:center;justify-content:center;position:relative}
  .nav-links{display:none}
  .nav-brand{font-size:15px;font-weight:700;letter-spacing:.05em;text-align:center}
  .nav-ico{display:block;position:absolute;left:18px;top:50%;transform:translateY(-50%);width:28px;height:28px}

  /* HERO — designer mobile: logo bar; photo that FADES softly into a neutral
     greyish section; H1 left-aligned; sub centered with her exact line breaks */
  /* הצילום ממשיך כרקע מרוכך מאחורי כל הטקסט עד פס הנתונים (כמו אצל המעצבת) */
  .hero{display:block;height:auto;min-height:0;padding:0;position:relative;
    background:#F3F2EF url("img/hero-mob.jpg") no-repeat center 42%/cover}
  .hero-bg{position:relative;width:100%;height:320px;opacity:1;object-fit:cover;object-position:center 40%;z-index:1}
  .hero::after{content:"";position:absolute;left:0;right:0;top:226px;bottom:0;
    background:linear-gradient(to bottom, rgba(243,242,239,0) 0,
      rgba(243,242,239,.62) 70px, rgba(243,242,239,.88) 120px,
      rgba(243,242,239,.90) 190px, rgba(243,242,239,.90) 100%);
    pointer-events:none;z-index:2}
  .hero-in{padding:20px 33px 8px;min-width:0;position:relative;z-index:3}
  .hero-copy{max-width:100%;width:100%;margin-left:0;padding-top:0;min-width:0;text-align:left}
  .hero-mark{display:none}
  .eyebrow{display:none}
  .m{display:inline}
  h1{font-size:35.5px;line-height:1.16}
  .hero-sub{font-size:15.5px;max-width:100%;margin:17px 0 0;text-align:center}
  .hero-cta{gap:13px;margin-top:22px;flex-direction:row;justify-content:center;align-items:stretch}
  .btn{width:100%;}
  .hero-cta .btn-solid,.hero-cta .btn-ghost{flex:1 1 0;width:auto;max-width:none;padding:15px 6px;font-size:14.5px;white-space:nowrap;display:flex;align-items:center;justify-content:center;border-radius:11px}
  .hero-micro{text-align:center;margin-top:16px;font-size:11px;letter-spacing:-.2px;white-space:nowrap}

  /* STATS — designer mobile: one row of 4 with dividers, compact */
  .stats{height:auto}
  .stats-in{grid-template-columns:repeat(4,1fr);gap:0;padding:13px 8px}
  .stat{padding:0 4px}
  .stat + .stat::before{display:block;top:4px;bottom:4px}
  .stat-num{font-size:21px}
  .stat-num i{font-size:14px}
  .stat-lbl{font-size:7.5px;letter-spacing:.06em;margin-top:4px}

  /* QUOTE — designer mobile: sits ABOVE the stats bar, on cream, two lines */
  .statquote .quote{order:-1}
  /* הציטוט ממשיך את רקע הצילום המרוכך של ההירו, עד פס הנתונים */
  .quote{padding:26px 22px 22px;position:relative;
    background:#F3F2EF url("img/hero-mob.jpg") no-repeat center 88%/cover}
  .quote::before{content:"";position:absolute;inset:0;background:rgba(243,242,239,.90);
    pointer-events:none}
  .quote>*{position:relative;z-index:2}
  .quote p{font-size:19px;line-height:1.42}
  .quote p br:first-of-type{display:none}

  /* HONEST — designer mobile: headings + paragraphs left-aligned, thin
     rules flanking the headings, text flows naturally (no forced breaks) */
  .honest{padding:52px 0 60px}
  .honest h2{font-size:25px;text-align:left}
  .lead,.drill-list li{font-size:16px}
  .lead{line-height:1.55}
  .drill{font-size:17px;margin-bottom:12px}
  .drill-list li{line-height:1.5;margin-bottom:9px}
  .lead,.drill{text-align:left}
  .lead br{display:none}
  .honest .hairline{display:none}
  .honest h2:first-of-type{border-bottom:1px solid #C9BE9B;padding-bottom:26px}
  .honest h2.mt{border-top:1px solid #C9BE9B;border-bottom:1px solid #C9BE9B;padding:28px 0;margin-top:40px}

  /* WELCOME — designer mobile: eyebrow + title centered, body left, CTA centered pill */
  .welcome{padding:58px 0 64px;text-align:left;min-height:0}
  .welcome-eyebrow,.welcome-title,.welcome-cta{text-align:center}
  .welcome-title{font-size:32px}
  .welcome-eyebrow{font-size:17px}
  .welcome-quote{text-align:left}
  .welcome-cta .btn{width:auto;max-width:none;display:inline-block}

  /* mobile typography: tighter leading + let text flow (drop desktop forced breaks) */
  .welcome-body{line-height:1.55}
  .welcome-body br,.tile p br,.wide p br,.milk p br,.bcard-desc br,
  .offer-intro br,.math-line br,.imagine .imagine-line br,.afterclick-note br{display:none}
  .tile p,.wide p,.milk p,.offer-intro,.math-line,
  .imagine .imagine-line,.afterclick-note,.faq details p{line-height:1.55}
  .bcard-desc{line-height:1.5}
}

/* ==========================================================
   SHARED SECTION PIECES
   ========================================================== */
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
.center{text-align:center}
.display{
  font-family:"Playfair",Georgia,serif;
  font-size:50px;
  font-weight:700;
  line-height:1.18;
  color:var(--ink);
}
.section-sub{
  font-size:20px;
  font-weight:500;
  color:var(--ink);
  text-align:center;
  margin:22px auto 46px;
  max-width:760px;
}
.eyebrow-green{
  font-size:20px;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--green);
  margin-bottom:14px;
}
/* Figma exact column widths so text wraps identically to the design */
.grid-3{display:grid;grid-template-columns:repeat(3,311px);gap:44px 94px;justify-content:center}
.grid-2{display:grid;grid-template-columns:repeat(2,532px);gap:38px 82px;justify-content:center}
.howto .grid-3{gap:26px 98px}
/* tag: exact Figma values — #F1BB26, radius 7, 21px left / 34px top */
.tag{
  position:absolute;left:0;top:0;
  background:#F2C13C;
  color:#fff;
  font-size:12px;font-weight:600;letter-spacing:.07em;
  padding:9px 14px;border-radius:0 0 7px 0;
  line-height:1;
}

/* ---------- CHEESE MENU ---------- */
.menu{padding:92px 0 96px}
/* Figma: menu title is Playfair 50 / weight 500 / pure black */
.menu .display{font-weight:500;color:#000}
.menu .display .green{color:var(--green)}
.card{
  /* Figma: white card that fades to a soft grey along the BOTTOM, with a grey drop shadow beneath */
  background:linear-gradient(to bottom,#FCFBFA 0%,#FCFBFA 72%,#E8E7E5 100%);
  border:1px solid #E3E2E4;
  box-shadow:0 20px 28px -6px rgba(0,0,0,.16);
}
.card-media{position:relative;overflow:hidden;border-radius:5px}
.card-media img{width:100%;aspect-ratio:311/269;height:auto;object-fit:cover;display:block;border-radius:5px}
/* the BONUS card uses a GREEN angled corner ribbon (Figma #2AAA57) that
   overhangs the top-left corner of the card */
.card-hasbonus{position:relative}
/* Figma: green price-tag — squared left end, pointed RIGHT end with a hole, tilted up ~30° over the card corner */
.tag.tag-bonus{background:#2AAA57;color:#fff;left:-18px;top:20px;transform:rotate(-30deg);transform-origin:left center;box-shadow:0 4px 9px rgba(0,0,0,.22);padding:8px 15px 8px 30px;z-index:3;border-radius:0;letter-spacing:.06em;clip-path:polygon(20% 0,100% 0,100% 100%,20% 100%,0 50%)}
.tag.tag-bonus::after{content:"";position:absolute;left:14px;top:50%;transform:translateY(-50%);width:7px;height:7px;border-radius:50%;background:#1E1C19}
/* white fade strip at the bottom of the photo (Figma: 32px gradient) */
.card-media::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:32px;
  background:linear-gradient(to bottom, rgba(246,245,244,0), #F6F5F4);
  pointer-events:none;
}
.card h3{
  font-size:17px;font-weight:700;color:var(--ink);
  margin:6px 20px 8px;line-height:1.35;white-space:nowrap;
}
.card p{font-size:16px;font-weight:400;line-height:1.45;color:var(--ink);margin:0 20px 26px}

/* ---------- HOW IT WORKS ---------- */
.howto{background:var(--cream);padding:92px 0 96px}
/* Figma: How It Works tiles are DARK cards (#484242), white text,
   title ABOVE the photo, description BELOW it */
.tile{background:#484242;border-radius:3px;overflow:hidden;box-shadow:0 3px 20px rgba(0,0,0,.10);display:flex;flex-direction:column}
.tile h3{font-size:22px;font-weight:500;color:#fff;text-align:center;padding:24px 20px 20px}
.tile img{width:100%;height:259px;object-fit:cover;display:block}
.tile p{font-size:17px;font-weight:400;line-height:1.68;color:#EDEAE7;padding:24px 24px 30px}
.pull-quote{
  max-width:820px;margin:52px auto 0;text-align:center;
  font-size:20px;font-weight:500;line-height:1.7;color:var(--ink);
}

/* ---------- THE LAB ---------- */
.lab{padding:92px 0 96px}
/* Figma: Lab cards = light grey card, DARK tag pill + title in a header row
   ABOVE the photo, description below */
.wide{background:#F1F0ED;border-radius:8px;overflow:hidden;display:flex;flex-direction:column;padding-bottom:4px}
.wide-head{display:flex;align-items:center;gap:15px;padding:18px 20px 14px}
.wtag{background:#303030;color:#fff;font-size:12px;font-weight:700;letter-spacing:.07em;padding:8px 15px;border-radius:4px;line-height:1;flex-shrink:0}
.wide-head h3{font-size:22px;font-weight:600;color:var(--ink);margin:0}
.wide-media{margin:0 14px;overflow:hidden;border-radius:6px}
.wide-media img{width:100%;height:192px;object-fit:cover;display:block}
.wide p{font-size:17px;line-height:1.65;color:var(--ink);padding:16px 20px 20px;margin:0}
.lab-note{
  max-width:900px;margin:56px auto 0;text-align:center;
  font-size:17px;line-height:1.72;color:var(--ink);
}

/* ---------- BONUSES ---------- */
.bonus-intro{padding:70px 0 10px;text-align:center}
.script{
  font-family:"Square Peg",cursive;
  font-size:80px;
  font-weight:400;
  line-height:1.15;
  color:#48854D;
}
.bonus-lead{font-size:19px;font-weight:600;color:var(--ink);margin-top:6px}
/* small green diamond divider (2nd & 4th faded, like the Figma) */
.diamond-row{color:var(--green);font-size:24px;letter-spacing:.42em;text-align:center;margin:24px 0}
.diamond-row span{color:#B9C4A0}
/* the small intro divider diamonds are smaller in the Figma */
.bonus-intro .diamond-row{font-size:14px;letter-spacing:.6em}
.bonus1-top .diamond-row{letter-spacing:.5em;margin:12px 0 20px}

.bonus1{padding:0 0 92px;text-align:center}
/* Figma: BONUS 1 badge through the milk photo sit on a light grey block */
/* Figma: the grey block carries the same left→right lightening as the milk photo, so the photo blends seamlessly */
.bonus1-top{background:linear-gradient(to right,#E0DFDD,#EFEFEF);padding:46px 0 0;display:flex;flex-direction:column}
.bonus1-top>.bonus-badge{order:1;align-self:center}
.bonus1-top>.wrap{order:2}
.bonus1-top>.bonus-hero,.bonus1-top>.bonus-hero-pic{order:3}
.bonus-badge{
  display:inline-block;
  background:var(--green);color:#fff;
  font-size:33px;font-weight:600;
  padding:10px 30px;border-radius:8px;
  margin-bottom:34px;
}
.bonus-body{
  max-width:648px;margin:20px auto 0;
  font-size:17px;line-height:1.6;color:var(--ink);
}
.value{font-size:20px;font-weight:800;color:var(--ink);margin-top:16px}
.value.sm{font-size:16px;margin:12px 0 10px}
.bonus-hero{
  display:block;width:100%;max-width:100%;margin:40px 0 0;
  border-radius:0;height:auto;
}
.milk-title{
  font-size:26px;font-weight:400;line-height:1.5;color:var(--ink);
  margin:52px 0 40px;
}
.milks{display:grid;text-align:center}
.milks-3{grid-template-columns:repeat(3,320px);justify-content:center;gap:8px 30px;max-width:none}
.milks-4{grid-template-columns:repeat(4,252px);justify-content:center;gap:8px 24px;max-width:none}
.milk-divider{border:0;border-top:1px solid #DAD7CF;max-width:1010px;margin:46px auto}
.milk img{width:145px;height:145px;border-radius:50%;object-fit:cover;margin:0 auto 18px;border:1px solid #E6E4DE}
.milk h4{font-size:22px;font-weight:700;color:var(--ink);margin-bottom:10px}
.milk p{font-size:17px;line-height:1.62;color:var(--ink)}
.milk-close{font-size:26px;font-weight:400;line-height:1.55;color:var(--ink);margin:56px 0 28px}
.btn-lg{font-size:16px;padding:17px 34px}

.bonus-more{padding:20px 0 100px}
.bcard{position:relative;background:#fff;border-radius:12px;box-shadow:0 3px 20px rgba(0,0,0,.07);overflow:hidden;text-align:center;display:flex;flex-direction:column}
.bcard-head{position:relative;background:#85906D;padding:22px 20px 26px}
.bcard-head .bnum{display:inline-block;background:#1E1C19;color:#fff;font-size:15px;font-weight:700;letter-spacing:.08em;padding:8px 28px;border-radius:16px;margin-bottom:16px}
.bcard-head h3{font-family:"Playfair",Georgia,serif;font-size:34px;font-weight:700;line-height:1.14;color:#fff;margin:0}
.bcard .free{position:absolute;left:-6px;top:14px;transform:rotate(-20deg);transform-origin:left center;background:#EFA43C;color:#fff;font-size:14px;font-weight:800;letter-spacing:.05em;padding:8px 24px;box-shadow:0 3px 8px rgba(0,0,0,.25);z-index:3}
.bcard-body{padding:24px 22px 26px;display:flex;flex-direction:column;flex:1}
.bcard-body .value{text-align:left;margin:0 0 10px}
.bcard-desc{font-size:16px;line-height:1.65;color:var(--ink);text-align:left;margin-bottom:22px}
.bcard-body img{display:block;width:calc(100% + 44px);margin:auto -22px -26px -22px;height:210px;object-fit:cover;border-radius:0 0 12px 12px}

/* ---------- TESTIMONIALS (Figma: bg #F5F5F5, cards 382x208 r41) ---------- */
.display.green{color:var(--green)}
.testi{background:#F5F5F5;padding:84px 0 92px}
.testi-grid{
  display:grid;
  grid-template-columns:repeat(3,382px);
  gap:58px 61px;
  justify-content:center;
  margin-top:46px;
}
.tcard{
  background:#fff;
  border-radius:41px;
  padding:23px 23px 20px;
  min-height:208px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.tq{font-size:16px;font-weight:400;line-height:1.38;color:var(--ink)}
.tperson{display:flex;align-items:center;gap:14px;margin-top:16px}
.tavatar{
  width:67px;height:67px;border-radius:50%;
  background:#BFBDC1;flex-shrink:0;
  object-fit:cover;object-position:center 28%;display:block;
}
.tname{font-size:16px;font-weight:600;color:var(--ink)}
.testi-note{
  max-width:790px;margin:52px auto 30px;text-align:center;
  font-size:17px;line-height:1.42;color:var(--ink);
}
.btn-wide{padding:0 30px;height:50px}

/* ---------- ABOUT JOY ---------- */
.joy{padding:96px 0 0}
.joy-in{max-width:643px;margin:0 auto}
.joy-photo{margin-bottom:26px}
.joy-photo img{width:146px;height:146px;border-radius:50%;object-fit:cover;display:block}
.joy-title{text-align:left;margin-bottom:22px}
.joy-copy p{font-size:17px;font-weight:400;line-height:1.55;color:var(--ink);margin-bottom:18px;text-align:left}
.joy-copy p strong{font-weight:700}
.joy-invite{
  max-width:660px;margin:44px auto 0;text-align:center;
  font-size:17px;font-weight:700;line-height:1.42;color:var(--ink);
}
.joy-students{
  max-width:520px;margin:22px auto 0;text-align:center;
  font-size:16px;line-height:1.5;color:#666;
}

/* ---------- RESPONSIVE (new sections) ---------- */
@media (max-width:1100px){
  .display{font-size:40px}
  .grid-3{gap:32px 24px}
  .milks{grid-template-columns:repeat(3,1fr)}
  .script{font-size:60px}
  .bcard-head h3{font-size:32px}
}
@media (max-width:820px){
  /* שוליים כמו אצל המעצבת: התוכן מתחיל ב-44 ונגמר ב-346 (מדידה מהעיצוב שלה) */
  .wrap{padding:0 44px}
  .display{font-size:30px}
  .section-sub{font-size:17px;margin:16px auto 32px}
  .eyebrow-green{font-size:17px}
  .grid-3,.grid-2{grid-template-columns:1fr;gap:28px}
  .menu,.howto,.lab{padding:58px 0 62px}
  .card-media img{height:auto;aspect-ratio:5/3}
  .tile img{height:auto;aspect-ratio:311/259}
  .wide-media img{height:auto;aspect-ratio:532/192}
  .milks{grid-template-columns:1fr;gap:30px}
  .script{font-size:44px}
  /* designer's MOBILE mockup swaps these two colours vs desktop:
     lab tags become green, the BONUS-1 badge becomes dark. (Flagged for Noa.) */
  .wtag{background:#48854D}
  .bonus-badge{font-size:24px;padding:8px 22px;background:#292727}
  .milk-title,.milk-close{font-size:21px}
  .bonus1{padding:34px 0 60px}
  /* designer's MOBILE: BONUS-1 milk image sits right under the badge (top),
     no diamond divider there. Desktop keeps image at the bottom. */
  .bonus1-top>.bonus-hero{order:2}
  .bonus1-top>.wrap{order:3}
  .bonus1-top .diamond-row{display:none}
  .bonus-more{padding:10px 0 62px}
  /* designer's MOBILE: bonus-card image sits ABOVE the value/description
     (desktop keeps it at the bottom). CSS-only reorder inside the flex body. */
  .bcard-body img{order:-1;margin:-24px -22px 20px -22px;border-radius:0;height:190px}
  .btn-lg{font-size:15px;padding:15px 20px;white-space:normal;text-align:center}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}

/* ==========================================================
   CONVERSION SECTIONS (transcribed from the designer's Figma)
   For You If → Offer → Math → Imagine → Wait → After Click →
   FAQ → Final CTA → Footer → Sticky CTA
   ========================================================== */

/* --- amber button (the offer CTA color from the design) --- */
.btn-amber{background:#EFA43C;color:#fff;border:1.5px solid #EFA43C}
.btn-amber:hover{background:#E1912A;border-color:#E1912A;transform:translateY(-1px)}

/* --- THIS COURSE IS FOR YOU IF --- */
.forme{padding:88px 0 92px;background:#F5F5F5}
.forme .display{margin-bottom:34px}
.forme-img{width:100%;max-width:960px;margin:0 auto 44px;border-radius:12px;display:block}
.check-cols{display:grid;grid-template-columns:430px 430px;justify-content:center;gap:14px 74px;max-width:none;margin:0 auto}
.check-diamond{list-style:none;display:grid;gap:18px;align-content:start}
.check-diamond li{position:relative;padding-left:34px;font-size:16px;line-height:1.5;color:var(--ink)}
.check-diamond li.bold{font-weight:700}
.check-diamond li::before{content:"\25C6";position:absolute;left:0;top:-1px;color:var(--green);font-size:19px}

/* --- OFFER --- */
.offer{padding:92px 0 40px}
.offer .display{margin-bottom:26px}
.offer-intro{font-size:17px;line-height:1.7;color:var(--ink);max-width:680px;margin:0 auto 14px}
.stack-title{font-size:18px;font-weight:700;color:var(--ink);margin:30px auto 18px}
.stack{max-width:600px;margin:0 auto 8px;text-align:left}
.stack-row{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:12px 4px;border-bottom:1px dotted #C9BE9B;font-size:17px;color:var(--ink)}
.stack-row .item{font-weight:600}
.stack-row:first-child .item{position:relative;padding-left:18px}
.stack-row:first-child .item::before{content:"\25CF";position:absolute;left:0;color:#EFA43C;font-size:12px}
.stack-row.bonus .item{position:relative;padding-left:70px}
.stack-row.bonus .item::before{content:"BONUS";position:absolute;left:-4px;top:50%;transform:translateY(-50%) rotate(-12deg);background:#EFA43C;color:#fff;font-size:9px;font-weight:800;letter-spacing:.03em;padding:4px 8px 4px 11px;border-radius:9px 3px 3px 9px;line-height:1;box-shadow:0 2px 5px rgba(0,0,0,.18)}
.stack-row .v{font-weight:800;color:#E1912A;white-space:nowrap;font-size:25px}
.stack-row .v em{font-style:normal;font-weight:500;font-size:13px;color:var(--ink);opacity:.65;margin-left:4px}
.stack-row .free-v{color:#E1912A}
.total-value{font-size:28px;font-weight:700;color:var(--ink);margin:30px 0 8px}
.total-value .struck{position:relative;text-decoration:none;padding:0 2px}
.total-value .struck::before,.total-value .struck::after{content:"";position:absolute;left:-16%;right:-16%;top:50%;height:3px;background:#D0342B;border-radius:2px;transform-origin:center center;transition:transform .6s cubic-bezier(.65,0,.25,1) .35s}
.total-value .struck::before{transform:translateY(-50%) rotate(23deg) scaleX(0)}
.total-value .struck::after{transform:translateY(-50%) rotate(-23deg) scaleX(0)}
.total-value.crossed .struck::before{transform:translateY(-50%) rotate(23deg) scaleX(1)}
.total-value.crossed .struck::after{transform:translateY(-50%) rotate(-23deg) scaleX(1)}
.offer-noway{font-size:21px;font-weight:600;color:var(--ink);margin:22px 0 12px}
.price-now{margin:14px 0 6px;display:flex;justify-content:center;align-items:stretch;gap:8px}
.price-now .jd{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:12px 0}
.price-now .just{font-size:34px;font-weight:700;color:var(--ink);letter-spacing:.04em;line-height:1}
.price-now .dollar{font-family:"DM Sans",system-ui,Arial,sans-serif;font-size:60px;font-weight:800;color:var(--stat-bar);line-height:1}
.price-now .amt{font-family:"DM Sans",system-ui,Arial,sans-serif;font-size:150px;font-weight:800;color:var(--stat-bar);line-height:.82;letter-spacing:-.02em}
.price-sub{font-size:16px;font-weight:600;color:var(--ink);margin:2px auto}
.price-sub.small{font-weight:400;color:#6E675C;margin-bottom:26px}
.offer .btn-wide{padding:0 40px;height:52px}

/* --- THE MATH --- */
.math{padding:70px 0 90px;text-align:center}
.math .display{margin-bottom:40px}
.math-img{width:112px;height:112px;object-fit:cover;border-radius:50%;margin:26px auto 14px;border:1px solid #E3E2E4}
.math-wrap{max-width:720px;margin:0 auto;padding:0 22px}
.math-head{background:var(--green);color:#fff;font-family:"Playfair",Georgia,serif;font-weight:700;font-size:32px;line-height:1.15;padding:26px 18px;margin:0;text-align:center}
.math-cols{display:grid;grid-template-columns:1fr 1fr;gap:0}
.math-col{margin:0;background:#EFEDE8;display:flex;flex-direction:column}
.math-col img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.math-col figcaption{padding:16px 12px;font-size:15px;color:var(--ink);line-height:1.4;text-align:center}
.math-band{background:var(--green);color:#fff;font-weight:600;font-size:17px;line-height:1.45;padding:20px 18px;margin:0 0 34px;text-align:center}
.math-paras{max-width:560px;margin:0 auto}
.math-line{font-size:17px;line-height:1.7;color:var(--ink);max-width:540px;margin:0 auto 14px}

/* --- IMAGINE THIS (dark) --- */
.imagine{background:#131110;padding:84px 0 92px;text-align:center}
.imagine-title{font-family:"Square Peg",cursive;font-size:60px;font-weight:400;color:#fff;margin-bottom:26px}
.imagine .imagine-line{font-size:17px;line-height:1.7;color:#E4E0D8;max-width:640px;margin:0 auto 12px}
.imagine-img{display:block;width:100%;max-width:600px;margin:26px auto;border-radius:0}
.imagine-close{font-family:"Square Peg",cursive;font-size:54px;color:#fff;margin:24px 0 34px}

/* --- EVERY WEEK YOU WAIT --- */
.waityou{padding:84px 0 80px;text-align:center}
.waityou .display{font-size:33px;white-space:nowrap;margin-bottom:22px}
.waityou-sub{font-size:18px;color:var(--ink);margin-bottom:32px}
.party{font-weight:800;color:#fff;white-space:nowrap;padding:10px 26px;background:url('img/party-brush.svg') no-repeat center/100% 100%}
.waityou-sub .party{font-size:21px;padding:12px 34px}
.diamonds{color:var(--green);font-size:17px;letter-spacing:.5em;margin-top:44px}

/* --- WHAT HAPPENS AFTER YOU CLICK --- */
.afterclick{padding:20px 0 90px;text-align:center}
.afterclick-title{font-size:22px;font-weight:700;color:var(--ink);margin-bottom:26px}
.steps{list-style:none;counter-reset:s;max-width:560px;margin:0 auto;text-align:left;border-top:1px solid #E3DECB;border-bottom:1px solid #E3DECB;padding:22px 0}
.steps li{counter-increment:s;font-size:16px;line-height:1.5;color:var(--ink);padding:7px 0 7px 30px;position:relative}
.steps li::before{content:counter(s) ".";position:absolute;left:0;color:var(--ink);font-weight:700}
.afterclick-note{max-width:560px;margin:22px auto 0;font-size:16px;line-height:1.6;color:var(--ink)}

/* --- FAQ --- */
.faq{padding:88px 0 92px}
.faq .display{margin-bottom:42px}
.faq-list{max-width:820px;margin:0 auto}
.faq details{border-bottom:1px solid #E3DECB}
.faq summary{cursor:pointer;list-style:none;padding:20px 4px;font-size:17px;font-weight:700;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"\25BE";color:#9A948A;flex-shrink:0;transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq details p{padding:0 4px 22px;font-size:16px;line-height:1.7;color:#4A453D}
.faq-foot{max-width:820px;margin:34px auto 0;text-align:center;font-size:16px;line-height:1.6;color:var(--ink)}
.faq-foot a{color:var(--green);font-weight:600}

/* --- FINAL CTA --- */
.finalcta{padding:70px 0 92px}
.finalcta-in{display:grid;grid-template-columns:288px 1fr;gap:0 56px;align-items:start;max-width:1180px;position:relative;min-height:470px}
.finalcta-photo{position:relative;z-index:1}
.finalcta-photo img{display:block;width:100%;border-radius:12px;object-fit:cover;aspect-ratio:415/500}
.finalcta-copy{margin-top:214px}
/* Figma: the title spans across the photo edge — "Your Health." sits white
   over the photo, the rest reads dark on the white area */
.finalcta-title{position:absolute;top:72px;left:56px;right:0;font-family:"Playfair",Georgia,serif;font-size:44px;font-weight:700;line-height:1.18;color:var(--ink);white-space:nowrap;text-align:left;z-index:3}
.finalcta-title .fc-white{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.finalcta-lead{font-size:18px;font-weight:600;line-height:1.55;color:var(--ink);margin-bottom:28px}
.finalcta .btn-wide{padding:0 34px;height:52px}
.finalcta .hero-micro{margin-top:16px}

/* --- FOOTER (Figma: WHITE bg, dark text, thin top rule) --- */
.site-footer{background:#fff;border-top:1px solid #E3DECB;padding:40px 0;color:var(--ink)}
.foot-brand{font-size:14px;font-weight:700;letter-spacing:.18em;color:var(--ink);margin-bottom:12px}
.foot-copy{font-size:14px;color:#6E675C;margin-bottom:10px}
.foot-links{font-size:14px}
.foot-links a{color:#6E675C;text-decoration:none}
.foot-links a:hover{text-decoration:underline;color:var(--ink)}

/* --- COOKIE CONSENT BAR --- */
.cookie-bar{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;max-width:760px;margin:0 auto;background:#2b2926;color:#f4f1ec;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.3);padding:16px 18px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;justify-content:space-between}
.cookie-bar[hidden]{display:none}
.cookie-bar p{font-size:14px;line-height:1.5;margin:0;flex:1;min-width:220px}
.cookie-bar a{color:#cdd6b6;text-decoration:underline}
.cookie-actions{display:flex;gap:10px}
.cookie-btn{font-family:"DM Sans",system-ui,Arial,sans-serif;font-size:14px;font-weight:600;padding:9px 20px;border-radius:8px;border:0;cursor:pointer}
.cookie-btn.accept{background:#5C6B3C;color:#fff}
.cookie-btn.decline{background:transparent;color:#f4f1ec;border:1px solid rgba(255,255,255,.4)}

/* --- STICKY CTA --- */
.sticky-cta{
  position:fixed;right:24px;bottom:24px;z-index:40;
  font-family:"Inter",system-ui,Arial,sans-serif;font-size:15px;font-weight:600;
  text-decoration:none;padding:14px 26px;border-radius:40px;
  box-shadow:0 8px 26px rgba(0,0,0,.24);
  opacity:0;transform:translateY(20px);pointer-events:none;
  transition:opacity .25s ease, transform .25s ease, background-color .15s ease;
}
.sticky-cta.show{opacity:1;transform:translateY(0);pointer-events:auto}

/* --- responsive for conversion sections --- */
@media (max-width:820px){
  .forme,.offer,.math,.imagine,.waityou,.faq,.finalcta{padding:56px 0 60px}
  /* MATH — מבנה המעצבת: פס כותרת ירוק, שני טורים, פס ירוק, ואז הפסקאות */
  .math{padding:0 0 46px}
  .math-wrap{padding:0;max-width:none}
  .math-head{font-size:26px;padding:22px 16px;line-height:1.2}
  .math-col figcaption{font-size:13px;padding:13px 10px;line-height:1.35}
  .math-band{font-size:15px;padding:16px 14px;margin:0 0 26px}
  .math-paras{padding:0 24px}
  .math-line{font-size:15.5px;line-height:1.62;margin-bottom:18px}
  .math-instead{background:#fff;padding-top:4px}

  .afterclick{padding:10px 0 56px}
  .waityou .display{font-size:26px;white-space:normal}
  .check-cols{grid-template-columns:1fr;gap:14px}
  .milks-3,.milks-4{grid-template-columns:1fr;gap:34px}
  .milk-divider{display:none}
  /* let the hard-coded desktop line breaks flow naturally on phones */
  .milk p br,.check-diamond li br{display:none}
  .bonus-hero{margin-top:26px}
  .forme-img{margin-bottom:30px}
  .price-now .amt{font-size:100px}
  .price-now .dollar{font-size:42px}
  .price-now .just{font-size:24px}
  /* IMAGINE — אצל המעצבת: צילום לרוחב מלא בראש המקטע, הכותרת מתחתיו */
  .imagine{padding:0 0 56px}
  .imagine-img{width:100%;max-width:none;margin:0 0 6px;display:block}
  .imagine-title{font-size:44px;margin-top:-10px;margin-bottom:20px}
  .imagine .imagine-line{font-size:15.5px;line-height:1.62;margin-bottom:18px}
  .imagine-close{font-size:32px}
  .imagine .btn-wide{width:100%;border-radius:8px}
  /* FINAL CTA — אצל המעצבת: צילום לרוחב מלא, קופסת כותרת ממורכזת בתוכו
     בשלוש שורות, והטקסט, הכפתור והמיקרו ממורכזים */
  .finalcta{padding:0 0 54px}
  .finalcta-in{grid-template-columns:1fr;gap:20px;min-height:0;position:relative;padding:0}
  .finalcta-photo{margin:0}
  .finalcta-photo img{aspect-ratio:5/7;border-radius:0;width:100%;display:block}
  .finalcta-copy{margin-top:0;padding:0 17px;text-align:center}
  .finalcta-title{position:absolute;top:34px;left:48px;right:48px;z-index:3;font-size:27px;line-height:1.22;
    white-space:normal;text-align:center;margin:0;background:rgba(247,244,238,.92);padding:17px 14px;border-radius:2px}
  .finalcta-title .fc-white,.finalcta-title .fc-l{display:block}
  .finalcta-title .fc-white{color:var(--green);text-shadow:none}
  .finalcta-lead{text-align:center}
  .finalcta .btn-wide{width:100%;border-radius:8px}
  .finalcta .hero-micro{text-align:center;white-space:normal}
  .sticky-cta{right:12px;left:12px;bottom:12px;text-align:center;padding:15px 20px}
  /* FOOTER — אצל המעצבת הכל ממורכז ובטקסט קטן */
  .site-footer{padding:22px 0 26px;text-align:center}
  .site-footer .wrap{text-align:center;padding:0 24px}
  .site-footer *{text-align:center}
  .foot-brand{font-size:9px;letter-spacing:.14em;margin-bottom:7px}
  .foot-copy{font-size:9px;line-height:1.75;margin-bottom:5px}
  .foot-links{font-size:9px;line-height:1.75}

}

/* ---------- mobile overflow fixes ---------- */
@media (max-width:820px){
  html{overflow-x:hidden}
  .testi-grid{grid-template-columns:1fr;gap:24px}
  .stats-in,.stat,.hero-in,.hero-copy,.wrap,.wrap-narrow,.finalcta-in,.check-cols,.milks-3,.milks-4{min-width:0}
  img,video{max-width:100%;height:auto}
}

/* ==========================================================
   MOBILE — section-by-section match to the designer's mobile frame (07.10)
   ========================================================== */
.welcome-img{display:none}
@media (max-width:820px){
  /* HERO title: two centred lines like hers */
  h1{font-size:27px;font-weight:700;line-height:1.22;text-align:center}
  /* HONEST headings are serif in her mobile */
  .honest h2{font-family:"Playfair",Georgia,serif;font-size:23px;font-weight:500;letter-spacing:.01em}
  /* 16.10: tighter like her mobile: less air above the first heading and before its rule */
  .honest{padding-top:27px}
  .honest h2:first-of-type{padding-bottom:17px;margin-bottom:22px}

  /* WELCOME: plain grey, title in two lines, cheese photo under the title, edge to edge */
  .welcome{background:#F3F2EF;padding:44px 0 50px}
  .welcome-eyebrow{font-size:15px;margin-bottom:8px}
  .welcome-title{font-size:30px;line-height:1.16;margin-bottom:22px}
  .welcome-img{display:block;width:100vw;max-width:none;margin:0 0 26px calc(50% - 50vw);height:auto}
  .welcome-body{font-size:14.5px}
  .welcome-body strong{display:block}
  .welcome-quote{font-size:19px;font-weight:500;margin:10px 0 24px}
  .welcome-cta .btn{padding:11px 24px;font-size:13.5px}

  /* MENU title: bold, three lines, green two */
  .menu .display{font-size:31px;font-weight:700;line-height:1.14}
  .menu .section-sub{font-size:15.5px;line-height:1.4}
  .menu .card:last-child h3{display:none}

  /* HOW IT WORKS: olive strip under each photo, smaller pull quote */
  .tile img{border-bottom:14px solid #6F7E52}
  .pull-quote{font-size:14px;line-height:1.5}

  /* THE LAB: pill centred above title, photo edge to edge, cards full width */
  .lab .grid-2{margin:0 -44px;gap:30px}
  .wide{border-radius:0;padding-bottom:0}
  .wide-head{flex-direction:column;gap:10px;padding:18px 16px 14px;text-align:center}
  .wide-head h3{font-size:18px}
  .wide-media{margin:0;border-radius:0}
  .wide p{font-size:14px;line-height:1.5;padding:14px 20px 18px}
  .lab-note{text-align:left}

  /* BONUS INTRO: light sub line, no diamonds */
  .bonus-lead{font-size:15px;font-weight:400}
  .bonus-intro .diamond-row{display:none}

  /* BONUS 1: bottles photo full width, breathing room before the eyebrow */
  .bonus-hero{width:100%;max-width:none;margin:22px 0 4px}
  .bonus1-top .eyebrow-green{margin-top:20px}
  .bonus1 .display{font-size:30px}
  .milk-title .mt-hi{color:var(--green);font-weight:600;font-size:23px}
  .milk img{box-shadow:0 0 0 6px #fff,0 0 0 7px #DAD7CF}

  /* BONUS 2-4: photo fills the card width */
  .bcard-body img{max-width:none;width:calc(100% + 44px)}

  /* TESTIMONIALS: dark title, small italic quotes */
  .testi .display{color:var(--ink)}
  .tq{font-size:13.5px;font-style:italic;color:#555}

  /* FOR YOU IF: cheese strip edge to edge, all bullets regular */
  .forme-img{width:100vw;max-width:none;margin:0 0 30px calc(50% - 50vw);border-radius:0}
  .check-diamond li.bold{font-weight:400}
  .check-diamond li{font-size:14.5px}

  /* PACKAGE: name, then price underneath (her mobile layout) */
  .stack-row{flex-direction:column;align-items:flex-start;gap:2px}
  .stack-row .v{font-size:21px}

  /* WAIT: brush highlight on its own line, compact centred button */
  .waityou-sub .party{display:block;width:fit-content;margin:12px auto 0}
  .waityou .btn-wide{width:auto;display:inline-block;padding:13px 30px}

  /* FINAL CTA: bigger title box, button never spills off screen */
  .finalcta-title{font-size:30px;padding:18px 12px}
  .finalcta-title .fc-white{color:#4C9157}
  .finalcta .btn-wide{white-space:normal;font-size:14px;padding:15px 14px;max-width:100%;box-sizing:border-box}
}

.bonus-hero-pic{display:block}
@media (max-width:820px){
  .bonus1-top>.bonus-hero-pic{order:2}
  .hero-in{padding-left:20px;padding-right:20px}
  h1{font-size:33px}
  .honest h2{font-size:31px}
  .rule-band{display:none}
  /* 16.10: 'That Ends Here.' sits tight and centred between its two rules, like her mobile */
  .honest h2.mt{padding:20px 0 18px;margin-top:26px;line-height:1.15}
  .honest .drill-list{margin-bottom:0}
  .honest h2.mt + *{margin-top:22px}
  .welcome-title{font-size:40px;font-weight:700;line-height:1.12}
  .display{font-size:40px;line-height:1.14}
  .menu .display{font-size:40px}
  .testi .display,.forme .display{font-size:26px}
  .bonus1 .display{font-size:36px}
  .waityou .display{font-size:31px}
  .faq .display{font-size:34px}
}
@media (max-width:820px){
  .milks-3,.milks-4{gap:44px}
  .diamond-row span{color:inherit}
}
@media (max-width:820px){
  .welcome-quote{text-align:center}
}
@media (max-width:820px){
  /* welcome photo = the designer's exact image (img_236); section tone matches its backdrop so it blends */
  .welcome{background:#E8E8E8}
  .welcome-title{margin-bottom:6px}
}
@media (max-width:820px){
  .welcome-img{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16%);mask-image:linear-gradient(to bottom,transparent 0,#000 16%)}
}
@media (max-width:820px){
  .welcome-body{font-size:15.8px;line-height:1.44}
  .welcome-body br.wb{display:inline}
  .welcome-body{letter-spacing:-.05px}
  .welcome-quote{font-size:22px}
  .welcome-body strong br.m{display:inline}
}
@media (max-width:820px){
  .lab .section-sub{white-space:nowrap;font-size:15px}
}
@media (max-width:820px){
  .howto{border-radius:32px;overflow:hidden;background:#F6F4F4}
}
@media (max-width:820px){
  /* spacing measured from her frame: 48px above the script line, 16px below it */
  .lab{padding-bottom:35px}
  .bonus-intro{padding-top:0}
  .bonus-lead{margin-top:14px}
}
@media (max-width:820px){
  /* BONUS 1 per her frame: small badge straddling the top edge of the grey block, bottles close under it */
  .bonus1{padding-top:34px}
  .bonus1-top{padding-top:0}
  .bonus-badge{font-size:16px;padding:9px 21px;margin:-20px 0 22px;border-radius:9px}
  .bonus-hero{margin:0}
  .bonus1-top .eyebrow-green{margin-top:34px}
}
@media (max-width:820px){
  .bonus-badge{margin-bottom:0}
  .bonus1-top .eyebrow-green{margin-top:22px}
  .bonus-body{font-size:15.5px;margin-left:-12px;margin-right:-12px}
}
@media (max-width:820px){
  .bonus-body{text-align:left}
}
@media (max-width:820px){
  .milk-title .mt-hi{font-size:24px;font-weight:700}
}

/* BONUS-1 closing line, matched to her mobile frame */
.m-only{display:none}
@media (max-width:820px){
  .m-only{display:block}
  .bonus1 .diamond-row.m-only{font-size:17px;letter-spacing:.55em;margin:46px 0 36px}
  .milk-close{line-height:1.22}
  .milk-close .mc-lead{display:block;font-size:20px;font-weight:400;margin-bottom:6px}
  .milk-close strong,.milk-close .party{font-size:23px;font-weight:700}
  .milk-close .party{color:#fff;padding:3px 4px 3px 52px;margin-left:-52px;
    background:url('img/party-brush.svg') no-repeat left center/100% 92%}
  .milk-close .party .py{color:var(--ink)}
  .bonus1 .center .btn-lg{width:100%;white-space:nowrap;font-size:12.4px;letter-spacing:-.1px;padding:17px 8px;border-radius:9px;margin-top:22px}
}
@media (max-width:820px){
  .bonus1 .diamond-row.m-only{font-size:23px;letter-spacing:.42em;margin:46px 0 40px}
  .milk-close .mc-lead{font-size:20.5px;margin-bottom:2px}
  .milk-close .party{padding:9px 4px 11px 30px;margin-left:-30px;background-size:100% 100%;background-position:left center}
  .bonus1 .center .btn-lg{width:calc(100% + 54px);margin:28px -27px 0;font-size:12.2px}
}
@media (max-width:820px){
  .milk-close .party{background-image:url('img/free-brush.svg');padding:12px 10px 14px 44px;margin-left:-44px;background-size:100% 100%}
  .bonus1 .center .btn-lg{font-weight:500;font-size:12.8px;letter-spacing:0}
}
@media (max-width:820px){
  .bonus1 .diamond-row.m-only{margin-bottom:14px}
  .milk-close{margin-top:0}
  .milk-close .mc-lead{font-size:24.5px;line-height:1.2}
  .milk-close strong,.milk-close .party{font-size:26px}
  .bonus1 .center .btn-lg{margin-top:8px;font-size:13.6px;padding:20px 8px}
}
@media (max-width:820px){
  .milk-close{margin-left:-32px;margin-right:-32px}
  .milk-close .mc-lead{font-size:24px}
}
@media (max-width:820px){
  /* BONUS 2-4 cards per her frame: wider card, number tab flush on the top edge, tighter green head */
  .bonus-more .grid-3{margin-left:-22px;margin-right:-22px}
  .bcard{border-radius:14px}
  .bcard-head{padding:0 16px 18px}
  .bcard-head .bnum{margin:0 0 10px;border-radius:0 0 11px 11px;padding:7px 20px 8px;font-size:15px}
  .bcard-head h3{font-size:35px;line-height:1.1}
  /* FREE = an orange price tag hanging on the photo */
  .bcard .free{left:20px;top:calc(100% + 26px);transform:rotate(-42deg);transform-origin:center;
    padding:9px 16px 9px 26px;font-size:17px;letter-spacing:.06em;border-radius:3px;
    clip-path:polygon(14px 0,100% 0,100% 100%,14px 100%,0 50%);box-shadow:none;z-index:4}
  .bcard .free::before{content:"";position:absolute;left:11px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#fff}
}
@media (max-width:820px){
  /* TESTIMONIALS per her frame: wider soft cards, avatar sitting on the bottom edge */
  .testi .testi-dia{font-size:23px;letter-spacing:.42em;margin:0 0 30px}
  .testi-grid{margin-left:-20px;margin-right:-20px;gap:44px}
  .tcard{border-radius:16px;background:#FAFAFA;padding:20px 18px 0;min-height:0}
  .tq{font-size:13.6px;line-height:1.4}
  .tperson{margin:18px 0 -14px;gap:12px}
  .tavatar{width:58px;height:58px}
  .tname{font-size:14px}
}
@media (max-width:820px){
  .testi .display{margin-bottom:-14px}
  .tq{color:#6b6b6b}
}
@media (max-width:820px){
  .joy-invite{font-size:15.5px;font-weight:600;line-height:1.45;margin:40px 34px 0;max-width:none}
}
@media (max-width:820px){
  .joy-invite{font-size:16.4px;margin-left:33px;margin-right:33px}
}
@media (max-width:820px){
  .joy{padding-top:34px}
}
@media (max-width:820px){
  .forme picture{display:block}
  .forme-img{margin-top:-6px;margin-bottom:26px}
}
@media (max-width:820px){
  .forme .display{margin-bottom:6px}
  .forme-img{margin-top:0}
}
@media (max-width:820px){
  /* PACKAGE LIST per her mobile frame */
  .stack-title{font-size:17px;font-weight:700;padding-bottom:12px;border-bottom:1.5px solid #333;margin-bottom:22px}
  .stack{margin:0 -8px}
  .stack-row{position:relative;display:block;border-bottom:0;padding:8px 0 12px 74px}
  .stack-row::after{content:"";position:absolute;left:74px;right:0;bottom:0;height:1.5px;
    background:linear-gradient(to right,#9a9a9a,#cfcfcf 60%,rgba(207,207,207,0))}
  .stack-row .item{display:block;font-weight:400;font-size:15.5px;line-height:1.35;padding-left:0}
  .stack-row:first-child .item{font-weight:700;padding-left:0}
  .stack-row:first-child .item::before{left:-22px;top:2px;font-size:13px;color:#F5A93B}
  .stack-row .v{display:block;margin-top:4px;font-size:25px;font-weight:700;color:#F7AE45}
  .stack-row .v em{font-size:13px;font-weight:500;color:#222;opacity:1;margin-left:6px}
  /* hanging BONUS price tag with a little ring and string */
  .stack-row.bonus .item{padding-left:0}
  .stack-row.bonus .item::before{left:-72px;top:18px;transform:rotate(-16deg);
    background:#F7B24C;color:#fff;font-size:7px;font-weight:700;letter-spacing:.04em;
    padding:6px 9px 6px 14px;border-radius:2px;clip-path:polygon(8px 0,100% 0,100% 100%,8px 100%,0 50%)}
  .stack-row.bonus .item::after{content:"";position:absolute;left:-16px;top:6px;width:9px;height:9px;
    border:1.5px solid #F7B24C;border-radius:50%;background:#fff}
}
@media (max-width:820px){
  .stack-row .item{position:relative}
}
@media (max-width:820px){
  .stack-row.bonus .item::before{left:-64px;top:6px;transform:rotate(-14deg)}
  .stack-row.bonus .item::after{left:-13px;top:5px}
  .stack-row .v em{margin-left:3px}
}

/* 16.10: WELCOME like her mobile: less air on top, cheeses right under the title (crop the empty top of the photo) */
@media (max-width:820px){
  .welcome{padding-top:24px}
  .welcome-title{margin-bottom:0}
  .welcome-img{height:232px;object-fit:cover;object-position:center 88%;margin-top:4px}
}
/* 16.10: hero photo = the designer's mobile composition (desktop photo turned upright), shown from the top */
@media (max-width:820px){
  .hero-bg{object-position:center top}
}
/* 16.10: less white between the MILK LAB button and the diamonds below */
@media (max-width:820px){
  .bonus1{padding-bottom:26px}
  .bonus-more{padding-top:0}
  .bonus-more .diamond-row:first-child{margin-top:10px}
}
/* 16.10: testimonials: grey band above the diamonds as short as hers */
@media (max-width:820px){
  .testi{padding-top:32px}
  .testi .testi-dia{margin:0 0 4px;line-height:1.2}
}
/* 16.10: 'But you won't pay anywhere near that!' on one line on phones */
@media (max-width:820px){
  .offer-noway{font-size:min(18px,4.5vw);white-space:nowrap}
}
/* 16.10: offer block like hers: text set as a neat box, button the same width as the text */
@media (max-width:820px){
  .offer-block{display:inline-flex;flex-direction:column;align-items:stretch;max-width:100%}
  .offer-block .price-sub{white-space:nowrap}
  .offer-block .buy-btn{width:auto;max-width:none;align-self:stretch}
}
/* 16.10: THE MATH exactly like her mobile (colours sampled from her frame) */
@media (max-width:820px){
  .math-head,.math-band{background:#838E6B}
  .math-col{background:#fff}
  .math-col:first-child picture{display:block;background:#DFDFDC}
  .math-col:first-child img{background:#DFDFDC;width:100%}
  .math .math-dia{display:block;font-size:17px;letter-spacing:.55em;margin:30px 0 0}
  .math-col img{aspect-ratio:auto;height:156px;object-fit:contain}
  .math-col:nth-child(2) img{width:118px;height:118px;border-radius:50%;object-fit:contain;padding:16px;box-sizing:border-box;background:#DEDEDE;margin:19px auto}
  .math-col:first-child figcaption{background:#fff;color:#6F7F52}
  .math-col:nth-child(2) figcaption{background:#F4F2F2}
  .math-col figcaption{font-size:min(15px,3.85vw);line-height:1.4;padding:14px 6px 16px}
  .math-col figcaption br.m{display:inline}
  .math-band{margin-bottom:0}
  .math-grey{background:#F4F2F2;padding:26px 0 8px;margin:0 calc(50% - 50vw)}
  .math-paras .math-line{font-size:min(15.5px,3.95vw);line-height:1.55;margin:0 auto 22px;white-space:nowrap}
  .math-paras .math-line br.m{display:inline}
  .math-green,.math-green strong{color:#6F7F52}
  .math-instead{padding-top:22px}
  /* IMAGINE: charcoal gradient like hers, not flat black; her line breaks */
  .imagine{background:linear-gradient(90deg,#0F0F11 0%,#151517 45%,#222126 100%)}
  .imagine .imagine-line br.m{display:inline}
  .imagine-pic{display:block}
  .imagine .btn-wide{width:auto;display:inline-flex;font-size:13.5px;padding:13px 18px;border-radius:6px;letter-spacing:.01em}
  .imagine .imagine-img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 100%);mask-image:linear-gradient(to bottom,#000 72%,transparent 100%)}
}


/* mobile-only bits added with mobile.css (hidden on desktop) */
.bonus-sticker,.m-only-i{display:none}
.bcard-body picture{display:contents}
.dk{display:none}

/* hand-drawn X over the full price: price shows clean for a second, then two thin strokes are drawn */
.total-value .struck{position:relative !important;display:inline-block}
.total-value .struck::before,.total-value .struck::after,.total-value.crossed .struck::before,.total-value.crossed .struck::after{content:none !important}
.xdraw{position:absolute;left:50%;top:50%;width:112%;height:190%;transform:translate(-50%,-50%);overflow:visible;pointer-events:none}
.xdraw line{stroke:#D41D1D;stroke-opacity:.7;stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke;fill:none;stroke-dasharray:140;stroke-dashoffset:140}
.total-value.crossed .xdraw .x1{animation:xdraw .38s cubic-bezier(.55,0,.35,1) 1s forwards}
.total-value.crossed .xdraw .x2{animation:xdraw .38s cubic-bezier(.55,0,.35,1) 1.45s forwards}
@keyframes xdraw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.total-value.crossed .xdraw line{animation:none;stroke-dashoffset:0}}

/* no orphan words anywhere (Noa's rule) */
p,li,h1,h2,h3,h4,figcaption,summary{text-wrap:pretty}
.foot-links,.foot-copy,.waityou .display{text-wrap:balance}