/* ==========================================================
   MOBILE = the designer's Figma frame "Dairy_free_mobile" (402px wide).
   Every value below is read from the Figma file (16.10.2026).
   The page is laid out at exactly 402px and scaled to the phone width
   (see the zoom script in index.html), so lines break exactly as in her frame.
   Loaded only at max-width:820px, desktop is untouched.
   ========================================================== */

html,body{width:402px;min-width:402px;max-width:402px;overflow-x:hidden}
body{background:#fff;line-height:normal}

/* ---------- TOP BAR (Figma: 0-52, #E2DEDB @66% over white) ---------- */
.nav{position:relative;height:52px;background:#ECE9E7;display:block;z-index:5}
.nav-in{position:static;height:52px;padding:0;display:block}
.nav-brand{position:absolute;left:4px;right:0;top:18px;display:block;text-align:center;
  font-family:"DM Sans",system-ui,Arial,sans-serif;font-size:16px;font-weight:500;line-height:24px;
  letter-spacing:.05em;color:#292727}
.nav-ico{position:absolute;left:10px;top:-3px;width:57px;height:57px;transform:none;display:block;z-index:2}

/* ---------- HERO (Figma: photo 52-831 with her two soft overlays baked in) ---------- */
.hero{display:block;position:relative;height:693px;min-height:0;padding:0;overflow:hidden;
  background:#EDE9E6 url("img/hero-fig-804.jpg") no-repeat 0 0/402px 779px}
.hero::after{content:none}
.hero picture,.hero .hero-bg{display:none}
.hero-in{position:relative;z-index:2;padding:350px 0 0;max-width:none;width:402px;margin:0}
.hero-copy{width:402px;max-width:none;margin:0;padding:0;text-align:center}
h1{width:336px;margin:0 auto 0 33px;font-family:"Playfair",Georgia,serif;font-size:38px;font-weight:700;
  line-height:40px;color:#292727;text-align:center;letter-spacing:0}
h1 .green{font-weight:900;color:#5C6B3C}
.hero-sub{width:371px;max-width:none;margin:22px 0 0 16px;font-size:16px;font-weight:400;line-height:22px;
  color:#292727;text-align:center}
.hero-sub.hero-sub2{margin-top:14px;font-size:17px;font-weight:500;line-height:24px}
.hero-cta{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:23px;margin:29px 0 0}
.hero-cta .btn-solid,.hero-cta .btn-ghost{flex:none;height:39px;padding:0;border-radius:8px;
  font-family:"Inter",system-ui,Arial,sans-serif;font-size:16px;font-weight:600;letter-spacing:0;
  display:flex;align-items:center;justify-content:center;white-space:nowrap}
.hero-cta .btn-solid{width:150px;background:#5C6B3C;border:0;color:#fff}
.hero-cta .btn-ghost{width:167px;background:transparent;border:1px solid #5C6B3C;color:#292727}
.hero .hero-micro{margin:-2px 0 0;font-size:11px;line-height:38px;font-weight:400;color:#000;
  letter-spacing:0;text-align:center;white-space:nowrap}

/* ---------- QUOTE (Figma: 745-831, same photo continues under it) ---------- */
.statquote{display:flex;flex-direction:column}
.statquote .quote{order:-1}
.quote{position:relative;height:86px;padding:16px 0 0 8px;
  background:#F1EEEC url("img/hero-fig-804.jpg") no-repeat 0 -693px/402px 779px}
.quote::before{content:none}
.quote p{font-family:"Playfair",Georgia,serif;font-style:italic;font-weight:500;font-size:22px;line-height:26px;
  color:#292727;text-align:center}
.quote p br:first-of-type{display:none}

/* ---------- NUMBERS STRIP (Figma: 831-899, #423E3E) ---------- */
.stats{position:relative;height:68px;background:#423E3E;display:block;
  background-image:linear-gradient(#6B6565,#6B6565),linear-gradient(#6B6565,#6B6565),linear-gradient(#6B6565,#6B6565);
  background-repeat:no-repeat;background-size:.56px 38.55px;
  background-position:79px 15.6px,191px 15.6px,292px 14px}
.stats-in{position:static;display:block;padding:0;max-width:none;width:auto;margin:0}
.stat{position:absolute;top:20px;width:110px;margin-left:-55px;padding:0;text-align:center}
.stat + .stat::before{content:none}
.stat:nth-child(1){left:46px}
.stat:nth-child(2){left:134.6px}
.stat:nth-child(3){left:241.4px}
.stat:nth-child(4){left:342px}
.stat-num{display:block;height:14px;font-family:"DM Sans",system-ui,Arial,sans-serif;font-size:25.14px;font-weight:200;
  line-height:13.97px;letter-spacing:0;color:#BFBDC1}
.stat:nth-child(1) .stat-num{letter-spacing:.07em}
.stat-num i{font-size:13.97px;font-weight:300;font-style:normal;vertical-align:top;position:relative;top:-2.8px;margin-right:-.5px}
.stat-lbl{display:block;margin-top:9px;font-family:"Playfair",Georgia,serif;font-size:8.38px;font-weight:600;
  line-height:8.94px;letter-spacing:0;color:#BFBDC1}

/* ---------- LET'S BE HONEST (Figma frame: 899-1783) ---------- */
.rule-band{display:none}
.honest{padding:28px 22px 36px 29px}
.honest .wrap-narrow{max-width:none;padding:0;margin:0}
.honest h2{font-family:"Playfair",Georgia,serif;font-size:33px;font-weight:300;line-height:43px;letter-spacing:0;
  color:#292727;text-align:left;margin:0}
.honest h2:first-of-type{padding:0 0 23px;margin:0;border-bottom:1px solid #5C6B3C}
.honest .lead{font-size:17px;font-weight:400;line-height:24px;color:#292727;text-align:left;margin-top:29px}
.honest .lead br{display:inline}
.honest .hairline{display:none}
.honest .drill{font-size:17px;font-weight:700;line-height:24px;color:#5C6B3C;text-align:left;margin:15px 0 0}
.honest .drill br.m{display:inline}
.honest .drill-list{margin:13px 0 0;max-width:none;list-style:none}
.honest .drill-list li{font-size:17px;font-weight:400;line-height:26px;color:#292727;padding-left:0;margin:0;position:relative}
.honest .drill-list li::before{content:"\2022";position:absolute;left:-20px;top:0;color:#292727}
.honest h2.mt{margin:30px 0 0;padding:0;height:83px;line-height:81px;border-top:1px solid #5C6B3C;border-bottom:1px solid #5C6B3C}
.honest h2.mt + *{margin-top:29px}
.honest .lead:last-child{width:337px;margin-bottom:0}
.honest .lead:last-child br{display:none}
.honest .lead:last-child br.keep{display:inline}
.honest .lead strong{font-size:19px;font-weight:600;line-height:27px}

picture{display:block}
.wrap,.wrap-narrow{max-width:none;margin:0;padding:0}

/* ---------- WELCOME (Figma "Frame 6": 1783-2774) ---------- */
.welcome{position:relative;display:block;min-height:0;padding:17px 0 33px;background:#F4F2F2;text-align:left}
.welcome .welcome-in{position:static}
.welcome-img{display:block;position:absolute;left:0;top:0;width:402px;height:391px;max-width:none;margin:0;
  object-fit:cover;-webkit-mask-image:none;mask-image:none;z-index:0}
.welcome-eyebrow,.welcome-title{position:relative;z-index:1;text-align:center}
.welcome-eyebrow{margin:0;font-size:18px;font-weight:600;line-height:38px;letter-spacing:.05em;color:#5C6B3C}
.welcome-title{margin:0 0 279px;font-family:"Playfair",Georgia,serif;font-size:45px;font-weight:700;line-height:45px;color:#292727}
.welcome-body{position:relative;width:351px;margin:0 0 0 31px;font-size:17px;font-weight:400;line-height:24px;letter-spacing:0;color:#292727}
.welcome-body + .welcome-body{width:349px;margin-top:33px}
.welcome-body strong{display:block;font-weight:600}
.welcome-body br,.welcome-body br.wb{display:none}
.welcome-body strong br.m{display:inline}
.welcome-quote{margin:16px 0 0 31px;font-size:24px;font-weight:400;line-height:25px;color:#292727;text-align:left}
.welcome-cta{text-align:left}
.welcome-cta .btn{display:inline-flex;width:152px;height:39px;margin:47px 0 0 118px;padding:0;border-radius:8px;
  font-family:"Inter",system-ui,Arial,sans-serif;font-size:16px;font-weight:600;letter-spacing:0;background:#5C6B3C;border:0}
.welcome-cta .hero-micro{width:328px;margin:0 0 0 32px;font-size:12px;line-height:38px;color:#292727;text-align:center;white-space:nowrap}

/* ---------- CHEESE MENU (Figma "The complete": 2774-7119) ---------- */
.menu{padding:40px 0 57px}
.menu .display{font-family:"Playfair",Georgia,serif;font-size:45px;font-weight:700;line-height:45px;color:#292727;text-align:center;margin:0}
.menu .display .green{color:#5C6B3C}
.menu .section-sub{width:301px;max-width:none;margin:15px 0 0 53px;font-size:20px;font-weight:300;line-height:26px;color:#292727;text-align:center}
.menu .grid-3{display:block;margin:31px 0 0 46px;width:311px}
.card{position:relative;width:311px;height:413px;margin:0 0 34px;overflow:hidden;background:#fff;
  border:0;box-shadow:22px 0 26px rgba(0,0,0,.07)}
.card::before{content:"";position:absolute;inset:0;border:1px solid #E3E2E4;z-index:3;pointer-events:none}
.card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(254,251,251,.18),rgba(41,39,39,.18))}
.card-media{position:relative;overflow:visible;border-radius:0;margin:0}
.card-media img{width:311px;height:229px;aspect-ratio:auto;object-fit:cover;border-radius:0;display:block}
.card-media::after{content:"";position:absolute;left:0;right:0;bottom:0;top:auto;height:32px;background:rgba(255,255,255,.89)}
.tag{position:absolute;left:20px;top:0;width:75px;height:33px;padding:11px 0 0;border-radius:0 0 7px 7px;background:#F1BB26;
  font-size:12px;font-weight:700;line-height:22px;letter-spacing:0;text-align:center;color:#fff;z-index:2}
.card h3{margin:17px 0 0 20px;white-space:nowrap;font-size:19px;font-weight:600;line-height:22px;color:#292727}
.card p{margin:0 0 0 20px;width:271px;font-size:17px;font-weight:400;line-height:24px;color:#292727}
.card h3 + p{margin-top:16px}
.menu .card:last-child h3{display:none}
.menu .card:last-child p{margin-top:16px}
.menu .card:last-child{overflow:visible;margin-bottom:0}
.menu .card:last-child .card-media{overflow:hidden}
.card-hasbonus .tag.tag-bonus{display:none}
.card-hasbonus .bonus-sticker{display:block;position:absolute;left:-37px;top:-1px;width:81.16px;height:81.31px;z-index:4}

/* ---------- HOW IT WORKS (Figma: 7119-9117, grey rounded panel) ---------- */
.howto{margin:0;padding:38px 0 0;height:1955px;border-radius:48px;background:#F6F4F4;overflow:hidden}
.howto .eyebrow-green{margin:0;font-size:17px;font-weight:600;line-height:38px;letter-spacing:.05em;color:#5C6B3C;text-align:center}
.howto .display{margin:27px 0 0;font-family:"Playfair",Georgia,serif;font-size:45px;font-weight:700;line-height:25px;color:#292727;text-align:center}
.howto .section-sub{width:350px;margin:32px 0 0 26px;font-size:18px;font-weight:300;line-height:26px;color:#292727;text-align:center}
.howto .grid-3{display:block;margin:32px 0 0 46px;width:311px}
.tile{position:relative;width:311px;margin:0 0 25px;border-radius:8px;background:#484444;box-shadow:none;overflow:hidden;display:block}
.tile:nth-child(1){height:489px}
.tile:nth-child(2){height:496px}
.tile:nth-child(3){height:515px;margin-bottom:0}
.tile h3{padding:32px 20px 0;height:85px;font-size:22px;font-weight:600;line-height:22px;color:#fff;text-align:center}
.tile picture{position:relative}
.tile picture::after{content:"";position:absolute;left:0;right:0;bottom:0;height:32px;background:rgba(92,107,60,.75)}
.tile img{width:311px;height:259px;aspect-ratio:auto;object-fit:cover;border:0}
.tile p{width:264px;margin:15px 0 0 24px;padding:0;font-size:17px;font-weight:400;line-height:24px;color:#fff}
.pull-quote{width:279px;max-width:none;margin:26px 0 0 61px;font-size:17px;font-weight:400;line-height:24px;color:#292727;text-align:center}

/* ---------- THE LAB (Figma: 9127-11225) ---------- */
.lab{padding:0;margin-top:44px}
.lab .eyebrow-green{margin:0;font-size:19px;font-weight:600;line-height:38px;letter-spacing:.05em;color:#5C6B3C;text-align:center}
.lab .display{width:270px;margin:15px 0 0 66px;font-family:"Playfair",Georgia,serif;font-size:45px;font-weight:700;line-height:44px;color:#292727;text-align:center}
.lab .section-sub{margin:25px 0 0;width:402px;font-size:19px;font-weight:300;line-height:13px;color:#292727;text-align:center;white-space:nowrap}
.lab .grid-2{display:block;margin:44px 0 0;gap:0}
.wide{position:relative;width:402px;height:341px;margin:0 0 40px;padding:22px 0 0;background:none;border-radius:0;overflow:visible;display:block}
.wide::before{content:"";position:absolute;left:0;right:0;top:22px;height:319px;background:#F4F2F2;z-index:0}
.wide > *{position:relative;z-index:1}
.wide-head{display:block;padding:0;text-align:center}
.wtag{position:absolute;left:155px;top:-22px;width:92px;height:35px;padding:7px 0 0;border-radius:7px;background:#48854D;
  font-size:12px;font-weight:600;line-height:22px;letter-spacing:0;color:#fff;text-align:center}
.wide-head h3{padding-top:27px;margin:0;font-size:22px;font-weight:600;line-height:22px;color:#000;text-align:center}
.wide-media{margin:22px 0 0;border-radius:0}
.wide-media img{width:402px;height:154px;aspect-ratio:auto;object-fit:cover}
.wide p{width:348px;margin:21px 0 0 28px;padding:0;font-size:17px;font-weight:400;line-height:24px;color:rgba(41,39,39,.8)}
.lab .wide:last-child{margin-bottom:0}
.lab-note{width:341px;max-width:none;margin:36px 0 0 30px;font-size:17px;font-weight:400;line-height:27px;color:#292727;text-align:left}

/* ---------- BONUS INTRO ---------- */
.bonus-intro{padding:48px 0 0;text-align:center}
.bonus-intro .script{width:341px;margin:0 0 0 18px;font-family:"Square Peg",cursive;font-size:50px;font-weight:400;line-height:38px;color:#48854D;text-align:center}
.bonus-lead{width:305px;margin:24px 0 0 41px;font-size:17px;font-weight:300;line-height:27px;color:#292727;text-align:center}
.bonus-intro .diamond-row{display:none}

/* ---------- DIAMOND ROWS (Figma "Group 20": 5 green diamonds) ---------- */
.diamond-row,.diamonds{font-size:0 !important;line-height:0 !important;letter-spacing:0 !important;color:transparent !important;
  display:block;width:168.13px;height:17.86px;margin:0 auto;padding:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168.13' height='17.86' viewBox='0 0 168.13 17.86'%3E%3Cg fill='%235C6B3C'%3E%3Cpath d='M8.93 0 17.86 8.93 8.93 17.86 0 8.93z'/%3E%3Cpath d='M46.5 0 55.43 8.93 46.5 17.86 37.57 8.93z'/%3E%3Cpath d='M84.06 0 92.99 8.93 84.06 17.86 75.13 8.93z'/%3E%3Cpath d='M121.63 0 130.56 8.93 121.63 17.86 112.7 8.93z'/%3E%3Cpath d='M159.2 0 168.13 8.93 159.2 17.86 150.27 8.93z'/%3E%3C/g%3E%3C/svg%3E") no-repeat 0 0/100% 100%}
.diamond-row span{color:transparent}
.dia-sm{width:121px !important;height:12.86px !important}

/* ---------- BONUS 1 (Figma: 11225-14735) ---------- */
.bonus1{padding:42px 0 0;text-align:center}
.bonus1-top{display:block;position:relative;min-height:619px;padding:0;
  background:#fff url("img/m/milklab-full.jpg") no-repeat 0 15px/402px 604px}
.bonus1-top>.bonus-hero-pic,.bonus1-top .bonus-hero{display:none}
.bonus-badge{display:block;width:123px;height:45px;margin:0 auto 0 140px;padding:1px 0 0;border-radius:11px;background:#292727;
  font-size:18px;font-weight:600;line-height:44px;letter-spacing:.05em;color:#fff;text-align:center}
.bonus1-top .diamond-row{display:none}
.bonus1-top .eyebrow-green{width:202px;margin:232px 0 0 103px;font-size:17px;font-weight:700;line-height:38px;letter-spacing:.05em;color:#5C6B3C;text-align:center}
.bonus1 .display{width:304px;margin:11px 0 0 49px;font-family:"Playfair",Georgia,serif;font-size:45px;font-weight:700;line-height:45px;color:#292727;text-align:center}
.bonus1 .display br.m{display:inline}
.bonus-body{width:336px;max-width:none;margin:13px 0 0 33px;font-size:17px;font-weight:400;line-height:24px;color:#292727;text-align:center}
.bonus1-top .value{margin:16px 0 0;font-size:19px;font-weight:800;line-height:24px;color:#292727;text-align:center}
.milk-title{width:402px;margin:29px 0 0;font-size:23px;font-weight:300;line-height:33px;color:#292727;text-align:center}
.milk-title .mt-hi{font-size:27px;font-weight:600;color:#5C6B3C}
.milk-title br{display:inline}
.milks,.milks-3,.milks-4{display:block;margin:0;gap:0;max-width:none}
.milks-3{margin-top:41px}
.milk-divider{display:none}
.milk{position:relative;height:324px;text-align:center}
.milks-3 .milk:nth-child(1){height:333px}
.milks-3 .milk:nth-child(2){height:336px}
.milks-4 .milk:nth-child(4){height:334px}
.milk picture{display:block;width:126px;height:126px;margin:0 0 0 139px}
.milks-3 .milk:nth-child(2) picture{margin-left:140px}
.milk img{width:126px;height:126px;margin:0;border:0;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 10.5px #fff,0 0 0 11.5px #BFBDC1}
.milk h4{margin:32px 0 0 22px;width:357px;font-size:22px;font-weight:600;line-height:22px;color:#292727;text-align:center}
.milk p{margin:14px auto 0;width:308px;font-size:17px;font-weight:400;line-height:24px;color:#292727;text-align:center}
.milks-3 .milk:nth-child(1) p,.milks-3 .milk:nth-child(3) p{width:291px}
.milks-3 .milk:nth-child(2) p{width:279px}
.milks-3 .milk:nth-child(1) p,.milks-3 .milk:nth-child(2) p{margin-top:13px}
.milk p br{display:none}
.bonus1 .diamond-row.m-only{display:block;margin:0 0 0 117px}
.milk-close{position:relative;width:356px;margin:54px 0 0 22px;font-size:28px;font-weight:700;line-height:33px;color:#292727;text-align:center}
.milk-close::before{content:"";position:absolute;left:31px;top:51px;width:198.07px;height:71.87px;
  background:url("img/m/brush-free.svg") no-repeat 0 0/100% 100%;z-index:0}
.milk-close > *{position:relative;z-index:1}
.milk-close .mc-lead{display:block;margin:0 0 16px;font-size:24px;font-weight:400;line-height:27px}
.milk-close .mc-lead br.m{display:inline}
.milk-close > br{display:none}
.milk-close .party,.milk-close strong{font-size:28px;font-weight:700;padding:0;margin:0;background:none;color:#292727}
.milk-close .party{color:#fff}
.milk-close .party .py{color:#292727}
.milk-close strong br.m{display:inline}
.bonus1 div.center{text-align:left}
.bonus1 .center .btn-lg{display:flex;width:365px;height:50px;margin:33px 0 0 18px;padding:0;border-radius:8px;
  font-family:"Inter",system-ui,Arial,sans-serif;font-size:14px;font-weight:600;letter-spacing:0;white-space:nowrap;background:#5C6B3C;border:0}

/* ---------- BONUS 2-4 (Figma: 14735-16688) ---------- */
.bonus-more{padding:0;text-align:center}
.bonus-more .diamond-row:first-child{margin:73px 0 0 117px !important}
.bonus-more .grid-3{display:block;width:356px;margin:68px 0 0 23px;gap:0}
.bcard{position:relative;display:block;width:356px;margin:0 0 23px;border:0;border-radius:26px;background:#fff;box-shadow:none;overflow:hidden;text-align:left}
.bcard::after{content:"";position:absolute;inset:0;border:1px solid #E3E2E4;border-radius:26px;pointer-events:none;z-index:5}
.bcard:nth-child(1){height:556px}
.bcard:nth-child(2){height:607px;margin-bottom:39px}
.bcard:nth-child(3){height:579px;margin-bottom:0}
.bcard-head{position:relative;height:181px;padding:0;background:#85906D;text-align:center}
.bcard-head .bnum{position:absolute;left:116.5px;top:-6px;width:123px;height:45px;margin:0;padding:10px 0 0;border-radius:11px;background:#292727;
  font-size:18px;font-weight:600;line-height:36px;letter-spacing:.05em;color:#fff;text-align:center}
.bcard-head h3{position:absolute;left:10px;top:46px;width:337px;margin:0;font-family:"Playfair",Georgia,serif;font-size:40px;font-weight:700;line-height:40px;color:#fff;text-align:center}
.bcard:nth-child(3) .bcard-head h3{top:48px;line-height:36px}
.bcard-body{display:flex;flex-direction:column;padding:0}
.bcard-body picture{order:-1;display:block}
.bcard-body img,.bcard-body picture img{order:0;display:block;width:356px;max-width:none;height:152px;margin:0;border-radius:0;object-fit:cover}
.bcard-body .value,.bcard-body .value.sm{margin:22px 0 0 21px;font-size:17px;font-weight:800;line-height:23px;color:#292727;text-align:left}
.bcard-desc{width:315px;margin:11px 0 0 21px;font-size:17px;font-weight:400;line-height:24px;color:#292727;text-align:left}
.bcard:nth-child(1) .bcard-desc{margin-top:29px;color:#000}
.bcard:nth-child(3) .bcard-desc{line-height:23px}
.bcard-desc br{display:none}
.bcard .free{left:17px;top:181px}
.bonus-more div.center{text-align:left;margin-top:41px !important}
.bonus-more .btn-wide{display:flex;width:331px;height:50px;margin:0 0 0 36px;padding:0;border-radius:8px;
  font-family:"Inter",system-ui,Arial,sans-serif;font-size:16px;font-weight:600;letter-spacing:0;white-space:nowrap}
.bonus-more{padding-bottom:58px}

/* ---------- TESTIMONIALS (Figma: 16688-18574, #F4F2F2) ---------- */
.testi{padding:47px 0 47px;background:#F4F2F2}
.testi .testi-dia{margin:0 0 0 118px !important}
.testi .display{width:343px;margin:35px 0 0 30px;font-family:"Playfair",Georgia,serif;font-size:29px;font-weight:700;line-height:33px;color:#292727;text-align:center}
.testi-grid{display:block;width:350px;margin:28px 0 0 26px;gap:0}
.tcard{position:relative;display:block;width:350px;height:190.58px;min-height:0;margin:0 0 46.42px;padding:21.07px 0 0 21px;
  border-radius:19px;background:rgba(255,255,255,.8)}
.tq{width:308.78px;font-size:14.66px;font-style:italic;font-weight:400;line-height:20.16px;color:rgba(41,39,39,.75)}
.tperson{position:static;display:block;margin:0}
.tavatar{position:absolute;left:21.07px;top:142.94px;width:61.39px;height:61.39px;border-radius:50%;object-fit:cover;background:#BFBDC1}
.tname{position:absolute;left:95.29px;top:158.51px;font-size:14.66px;font-weight:600;line-height:21.99px;color:#292727}
.testi-grid .tcard:last-child{margin-bottom:0}
.testi-note{width:312px;max-width:none;margin:60.4px 0 0 47px;font-size:17px;font-weight:400;line-height:24px;color:#292727;text-align:left}
.testi div.center{text-align:left}
.testi .btn-wide{display:flex;width:331px;height:50px;margin:39px 0 0 36px;padding:0;border-radius:8px;
  font-family:"Inter",system-ui,Arial,sans-serif;font-size:16px;font-weight:600;letter-spacing:0;white-space:nowrap}

/* ---------- ABOUT JOY (Figma "Frame Bio": 18574-20388) ---------- */
.joy{padding:29px 0 0}
.joy-in{max-width:none;margin:0}
.joy-photo{margin:0 0 0 38px}
.joy-photo img{width:140px;height:140px;border-radius:50%;object-fit:cover}
.joy-title{width:350px;margin:31px 0 0 38px;font-family:"Playfair",Georgia,serif;font-size:40px;font-weight:700;line-height:38px;color:#5C6B3C;text-align:left}
.joy-copy{width:330px;margin:21px 0 0 38px}
.joy-copy p{margin:0 0 8.34px;font-size:17px;font-weight:400;line-height:24px;color:#292727;text-align:left}
.joy-copy p:last-child{margin-bottom:0}
.joy-invite{width:330px;max-width:none;margin:40px 0 0 36px;font-size:17px;font-weight:600;line-height:24px;color:#292727;text-align:center}
.joy-students{width:330px;max-width:none;margin:48px 0 0 36px;font-size:17px;font-weight:400;line-height:24px;color:#292727;text-align:center}
.joy .joy-dia{margin:49px 0 0 141px}

/* ---------- FOR YOU IF (Figma: 20399-21351) ---------- */
.forme{position:relative;margin-top:54px;padding:47px 0 65px;background:#F4F2F2 linear-gradient(#fff,#fff) no-repeat 0 0/402px 14px}
.forme picture{position:absolute;left:0;top:1px;width:402px;height:440px;display:block}
.forme-img{width:402px;max-width:none;height:440px;margin:0;border-radius:0;object-fit:cover}
.forme .display{position:relative;z-index:1;width:368px;margin:0 0 0 17px;font-family:"Playfair",Georgia,serif;font-size:30px;font-weight:700;line-height:33px;color:#5C6B3C;text-align:center}
.check-cols{position:relative;z-index:1;display:block;width:320px;margin:187px 0 0 57px;gap:0}
.check-diamond{display:block;gap:0}
.check-diamond li{position:relative;margin:0 0 9px;padding:0;font-size:16px;font-weight:400;line-height:22px;color:#292727}
.check-diamond li.bold{font-weight:400}
.check-cols .check-diamond:first-child li:nth-child(even),.check-cols .check-diamond:last-child li:nth-child(odd){font-weight:500}
.check-diamond li::before{content:"";position:absolute;left:-30.6px;top:5.76px;width:8.49px;height:8.49px;background:#48854D;transform:rotate(45deg);font-size:0}
.check-cols .check-diamond:last-child li:last-child{margin-bottom:0}

/* ---------- EVERYTHING YOU ARE GETTING (Figma: 21351-22852) ---------- */
.offer{padding:31px 0 44px;text-align:center}
.offer .wrap-narrow{text-align:center}
.offer .display{margin:0;padding-right:10px;font-family:"Playfair",Georgia,serif;font-size:45px;font-weight:700;line-height:48px;color:#292727;text-align:center}
.offer-intro{width:330px;max-width:none;margin:0 0 16px 36px;font-size:17px;font-weight:400;line-height:24px;color:#292727;text-align:center}
.offer .display + .offer-intro{margin-top:26px}
.offer-intro strong{font-weight:400}
.stack-title{width:335px;margin:61px 0 0 34px;padding:0 0 11px;border-bottom:1px solid #292727;font-size:20px;font-weight:700;line-height:24px;color:#292727;text-align:center}
.stack{position:relative;width:402px;height:443.33px;margin:0;
  background-image:linear-gradient(to right,#292727,rgba(41,39,39,.15) 85%,rgba(41,39,39,0)),linear-gradient(to right,#292727,rgba(41,39,39,.15) 85%,rgba(41,39,39,0)),linear-gradient(to right,#292727,rgba(41,39,39,.15) 85%,rgba(41,39,39,0)),linear-gradient(to right,#292727,rgba(41,39,39,.15) 85%,rgba(41,39,39,0)),linear-gradient(to right,#292727,rgba(41,39,39,.15) 85%,rgba(41,39,39,0));
  background-repeat:no-repeat;background-size:283px .97px;
  background-position:96px 121.67px,96px 201.83px,96px 282px,96px 362.17px,96px 442.33px}
.stack-row{position:absolute;left:0;width:402px;height:60px;display:block;margin:0;padding:0;border:0;text-align:left}
.stack-row::after{content:none}
.stack-row:nth-child(1){top:43px}
.stack-row:nth-child(2){top:126px}
.stack-row:nth-child(3){top:209px}
.stack-row:nth-child(4){top:292px}
.stack-row:nth-child(5){top:375px}
.stack-row .item,.stack-row:first-child .item,.stack-row.bonus .item{position:absolute;left:95px;top:0;padding:0;font-size:17px;font-weight:500;line-height:22px;color:#292727;white-space:nowrap}
.stack-row:first-child .item{font-weight:900}
.stack-row .item::before,.stack-row:first-child .item::before,.stack-row.bonus .item::before{content:"";position:absolute;left:-21px;top:5.91px;width:11px;height:11px;border-radius:50%;
  border:1px solid #FDB951;background:none;transform:none;padding:0;box-shadow:none;clip-path:none;font-size:0}
.stack-row:first-child .item::before{background:#FDB951}
.stack-row.bonus .item::after{content:"";position:absolute;left:-77px;top:-8px;width:56px;height:56px;border:0;border-radius:0;
  background:url("img/m/tag-bonus-small.svg") no-repeat 0 0/100% 100%}
.stack-row:nth-child(4) .item::after{top:-10px}
.stack-row:nth-child(5) .item::after{top:-9px}
.stack-row .v{position:absolute;left:95px;top:32px;margin:0;font-size:27px;font-weight:600;line-height:22px;color:#FDB951}
.stack-row .v.free-v{font-size:25px}
.stack-row .v em{position:absolute;left:60px;top:4px;margin:0;font-size:15px;font-weight:500;font-style:normal;line-height:22px;color:#292727;opacity:1}
.stack-row .v.free-v em{left:65px}
.total-value{position:relative;width:245px;margin:57.67px 0 0 79px;padding:0;font-size:31px;font-weight:400;line-height:24px;color:rgba(41,39,39,.85);text-align:left;white-space:nowrap}
.total-value .struck{position:relative;font-weight:700;padding:0}
.total-value .struck::before{content:none}
.total-value .struck::after{content:"";position:absolute;left:auto;right:-6px;top:-13px;width:70.4px;height:64px;margin:0;
  background:url("img/m/x-red.svg") no-repeat 0 0/100% 100%;border-radius:0;transform:scale(0);transform-origin:center;transition:transform .5s cubic-bezier(.65,0,.25,1) .3s}
.total-value.crossed .struck::after{transform:scale(1)}
.offer-noway{width:335px;margin:42px 0 0 34px;padding:24px 0 0;border-top:1px solid #292727;font-size:17px;font-weight:400;line-height:24px;color:rgba(41,39,39,.85);white-space:nowrap;text-align:center}
.price-now{position:relative;display:block;width:402px;height:115px;margin:33px 0 0;opacity:.97;color:rgba(41,39,39,.85)}
.price-now .jd{display:block;padding:0}
.price-now .just,.price-now .dollar,.price-now .amt{position:absolute;display:block;font-family:"DM Sans",system-ui,Arial,sans-serif;line-height:22.28px;color:rgba(41,39,39,.85);text-align:center;letter-spacing:0}
.price-now .just{left:73px;top:5px;width:98.41px;font-size:25px;font-weight:400}
.price-now .dollar{left:92px;top:51px;width:59.41px;font-size:60px;font-weight:700}
.price-now .amt{left:122px;top:45px;width:222px;font-size:140px;font-weight:700;letter-spacing:-.01em}
.offer-block{display:block;width:268px;margin:35px 0 0 67px;max-width:none}
.price-sub,.offer-block .price-sub{margin:0;font-size:17px;font-weight:600;line-height:24px;color:#292727;text-align:center;white-space:normal}
.price-sub.small,.offer-block .price-sub.small{margin:0;font-weight:400;color:#292727}
.offer-block .buy-btn,.offer .btn-wide{display:flex;width:248px;height:50px;margin:39px 0 0 10px;padding:0;border-radius:8px;background:#FDB951;border:0;
  font-family:"Inter",system-ui,Arial,sans-serif;font-size:16px;font-weight:600;letter-spacing:0;white-space:nowrap;align-self:auto}

/* ---------- THE MATH (Figma: 22852-23770) ---------- */
.math{padding:0 0 49px;text-align:center}
.math-wrap{max-width:none;padding:0;margin:0}
.math-head{height:134px;width:402px;margin:0;padding:26px 31px 0 27px;background:#838E6B;font-family:"Playfair",Georgia,serif;font-size:40px;font-weight:600;line-height:40px;color:#fff;text-align:center}
.math-cols{display:grid;grid-template-columns:204px 198px;gap:0}
.math-col{margin:0;background:#fff;display:block}
.math-col picture,.math-col:first-child picture{display:block;height:162px;background:none}
.math-col:first-child img{width:204px;height:162px;object-fit:cover;background:none;aspect-ratio:auto}
.math-col:nth-child(2) picture{padding-top:23px}
.math-col:nth-child(2) img{width:115px;height:115px;margin:0 0 0 42px;padding:0;border-radius:50%;background:none;object-fit:cover;aspect-ratio:auto}
.math-col figcaption,.math-col:first-child figcaption,.math-col:nth-child(2) figcaption{height:81px;padding:21px 0 0;font-size:16px;line-height:22px;text-align:center}
.math-col:first-child figcaption{background:#fff;color:#85906D;font-weight:500;padding-left:20px;padding-right:21px}
.math-col:nth-child(2) figcaption{background:#F4F2F2;color:#292727;font-weight:400;padding-left:17px;padding-right:17px}
.math-col figcaption br.m{display:inline}
.math-band{height:91px;margin:0;padding:25px 58px 0 59px;background:#838E6B;font-size:17px;font-weight:600;line-height:24px;color:#fff;text-align:center}
.math-band br.m{display:inline}
.math-paras{padding:0;margin:0;max-width:none}
.math-grey{margin:0;padding:23px 0 15px;background:#F4F2F2}
.math-paras .math-line{width:402px;max-width:none;margin:0 0 25px;padding-right:9px;font-size:17px;line-height:24px;color:#292727;white-space:nowrap;text-align:center}
.math-paras .math-line br.m{display:inline}
.math-grey .math-line:last-child{margin-bottom:0}
.math-green,.math-green strong{color:#5C6B3C}
.math-line strong{font-weight:600}
.math-paras .math-line.math-instead{margin:12px 0 0;padding-top:0;background:none}
.math .math-dia{display:block;margin:49px 0 0 141px !important}

/* ---------- IMAGINE (Figma: 23770-24662) ---------- */
.imagine{position:relative;padding:0 0 43px;margin-bottom:0;background:linear-gradient(90deg,#0F0F11 0%,#151517 55%,#232227 99%);text-align:center}
.imagine::before{content:"";position:absolute;left:0;right:0;top:0;height:15px;background:#fff;z-index:0}
.imagine-pic{position:relative;z-index:1;display:block}
.imagine .imagine-img{display:block;width:402px;max-width:none;height:297px;margin:0;object-fit:cover;-webkit-mask-image:none;mask-image:none}
.imagine .wrap-narrow{position:relative;z-index:2}
.imagine-title{height:33px;margin:-50px 0 0;font-family:"Square Peg",cursive;font-size:60px;font-weight:400;line-height:15.5px;letter-spacing:.05em;color:#fff}
.imagine .imagine-line{width:274px;max-width:none;height:69px;margin:41px 0 0 64px;font-size:16px;font-weight:300;line-height:24px;color:#fff;text-align:center}
.imagine .imagine-line + .imagine-line{margin-top:29px}
.imagine .imagine-line:nth-of-type(2){height:83.64px}
.imagine .imagine-line:nth-of-type(3),.imagine .imagine-line:nth-of-type(4){width:225.93px;height:40.38px;margin-left:88.04px}
.imagine .imagine-line br.m{display:inline}
.imagine-close{width:330px;margin:50.6px 0 0 36px;font-family:"Square Peg",cursive;font-size:35px;font-weight:400;line-height:50px;color:#fff;text-align:center}
.imagine .btn-wide{display:flex;width:330px;height:35px;margin:41px 0 0 36px;padding:0;border-radius:5.17px;
  font-family:"Inter",system-ui,Arial,sans-serif;font-size:16px;font-weight:600;letter-spacing:0;white-space:nowrap}

/* ---------- EVERY WEEK YOU WAIT (Figma: 24662-25064) ---------- */
.waityou{padding:39px 0 0;text-align:center}
.waityou .wrap-narrow{display:flex;flex-direction:column;align-items:flex-start}
.waityou .display{order:1;width:329px;margin:0 0 0 37px;font-family:"Playfair",Georgia,serif;font-size:33px;font-weight:600;line-height:34px;color:#000;text-align:center;white-space:normal}
.waityou-sub{order:2;position:relative;width:402px;margin:21px 0 0;font-size:17px;font-weight:400;line-height:24px;color:#292727;text-align:center}
.waityou-sub br.m{display:inline}
.waityou-sub .party{display:block;width:auto;margin:9px 0 0;padding:0;background:none;font-size:24px;font-weight:900;line-height:38px;color:#fff;white-space:nowrap}
.waityou-sub::before{content:"";position:absolute;left:81px;top:43px;width:229px;height:63px;background:url("img/m/brush-party.svg") no-repeat 0 0/100% 100%}
.waityou-sub > *{position:relative}
.waityou .diamonds{order:3;margin:36px 0 0 141px}
.waityou .btn-wide{order:4;display:flex;width:173px;height:50px;margin:36.14px 0 0 115px;padding:0;border-radius:8px;
  font-family:"Inter",system-ui,Arial,sans-serif;font-size:16px;font-weight:600;letter-spacing:0;white-space:nowrap}

/* ---------- WHAT HAPPENS AFTER YOU CLICK (Figma: 25064-25568) ---------- */
.afterclick{padding:41px 0 0;text-align:center}
.afterclick-title{width:315px;margin:0 0 0 43px;font-size:20px;font-weight:700;line-height:30px;color:#292727;text-align:center}
.steps{width:330px;max-width:none;margin:36px 0 0 35px;padding:17px 0 9px;border-top:1px solid #292727;border-bottom:1px solid #292727;list-style:none;text-align:left}
.steps li{position:relative;width:338px;margin:0 0 7px -4px;padding:0 0 0 25px;font-size:17px;font-weight:400;line-height:23px;color:#292727}
.steps li::before{content:counter(s) ". ";position:static;font-weight:400;color:#292727}
.steps li::after{content:"•";position:absolute;left:8px;top:0;color:#292727}
.afterclick-note{width:400px;max-width:none;margin:33px 0 0;font-size:17px;font-weight:400;line-height:24px;color:#292727;text-align:center}
.afterclick-note br{display:inline}
.afterclick-note strong{font-weight:700}
.afterclick-note strong br.m{display:inline}
.afterclick .after-dia{margin:53px 0 0 138px}

/* ---------- Q & A (Figma: 25568-26177) ---------- */
.faq{padding:0}
.faq .display{width:135px;margin:68px 0 0 134px;font-family:"Playfair",Georgia,serif;font-size:50px;font-weight:600;line-height:24px;color:#292727;text-align:center;white-space:nowrap}
.faq .display .d-only{display:none}
.faq .display .m-only-i{display:inline}
.faq-list{width:325px;max-width:none;margin:43px 0 0 37px}
.faq details{border-bottom:1px solid rgba(41,39,39,.6)}
.faq summary{position:relative;display:block;padding:29px 30px 33px 0;font-size:17px;font-weight:600;line-height:24px;color:#292727}
.faq details:first-child summary{padding-top:0}
.faq details[open] summary{padding-bottom:18px}
.faq summary::after{content:"";position:absolute;right:-1px;top:38px;width:16.96px;height:9px;background:url("img/m/chev-down.svg") no-repeat 0 0/100% 100%;transform:none;color:transparent}
.faq details:first-child summary::after{top:9px}
.faq details[open] summary::after{background-image:url("img/m/chev-up.svg");transform:none}
.faq details p{width:295px;padding:0 0 31px;font-size:17px;font-weight:400;line-height:24px;color:#292727}
.faq-foot{width:305px;max-width:none;margin:32px 0 0 48px;font-size:17px;font-weight:400;line-height:24px;color:#292727;text-align:center}
.faq-foot a{color:#292727;font-weight:400;text-decoration:none}
.faq-foot br.m{display:inline}
.faq + .wrap.center{padding:0 !important}
.faq + .wrap.center .diamond-row{width:121px;height:12.86px;margin:54px 0 0 140px}

/* ---------- FINAL CTA (Figma "YOUR HEALTH": 26177-26987) ---------- */
.finalcta{padding:0 0 49px;margin-top:50px}
.finalcta-in{display:block;position:relative;padding:0;max-width:none;min-height:0}
.finalcta-photo{margin:0}
.finalcta-photo img{width:402px;height:554px;aspect-ratio:auto;object-fit:cover;border-radius:0}
.finalcta-copy{margin:0;padding:0;text-align:center}
.finalcta-title{position:absolute;left:48px;top:39px;right:auto;width:306px;height:173px;margin:0;padding:18px 8px 0;border-radius:0;background:rgba(255,255,255,.73);
  font-family:"Playfair",Georgia,serif;font-size:45px;font-weight:600;line-height:45px;color:#292727;text-align:center;white-space:nowrap}
.finalcta-title .fc-white,.finalcta-title .fc-l{display:block}
.finalcta-title .fc-white{color:#48854D;text-shadow:none}
.finalcta-lead{width:350px;margin:21px 0 0 20px;font-size:17px;font-weight:400;line-height:24px;color:#292727;text-align:center}
.finalcta-lead br{display:inline}
.finalcta .btn-wide{display:flex;width:355px;height:50px;max-width:none;margin:38px 0 0 17px;padding:0;border-radius:8px;
  font-family:"Inter",system-ui,Arial,sans-serif;font-size:16px;font-weight:600;letter-spacing:0;white-space:nowrap}
.finalcta .hero-micro{width:392px;margin:9px 0 0 5px;font-size:11px;font-weight:400;line-height:17px;color:#292727;text-align:center;white-space:nowrap;word-spacing:2px}

/* ---------- FOOTER (Figma: rule at 27020, text 27040) ---------- */
.site-footer{margin-top:33px;padding:19px 0 23px;border-top:1px solid rgba(41,39,39,.6);background:#fff;text-align:center}
.site-footer .wrap{padding:0 21px 0 22px}
.foot-brand,.foot-copy,.foot-links,.foot-links a{margin:0;font-size:11px;font-weight:400;line-height:19px;letter-spacing:0;color:#292727}
.foot-copy br.m{display:inline}

/* sticky button keeps working at the 402 layout */
.sticky-cta{left:12px;right:12px;bottom:12px}

/* tags from her file */
.menu .card-hasbonus .bonus-sticker{display:block;position:absolute;left:-36px;top:0;width:81.16px;height:81.31px;z-index:4}
.bcard .free{left:17px;top:181px;width:86px;height:86px;padding:0;margin:0;transform:none;clip-path:none;box-shadow:none;border-radius:0;
  background:url("img/m/tag-free.svg") no-repeat 0 0/100% 100%;font-size:0;color:transparent;z-index:4}
.bcard .free::before{content:none}

.math .math-dia,.waityou .diamonds{width:121px !important;height:12.86px !important}

/* dashes: her file uses long/medium dashes; the site keeps short ones but gives them the same width so lines break like hers */
.hy{padding:0 .166em}
.hn{padding:0 .064em}
.d-only{display:none}
.card h3,.card p{position:relative;z-index:1}
.menu .card:last-child .card-media::after{content:none}
.milk-close strong{margin-left:.27em}

/* drawn X (see styles.css) */
.total-value .struck::after,.total-value.crossed .struck::after{content:none !important}
.xdraw line{stroke-width:2.6}

/* 17.10: the two tiny lines a little larger (Noa) */
.hero .hero-micro{font-size:12.2px;letter-spacing:-.1px}
.finalcta .hero-micro{font-size:12px;word-spacing:1px}
