/* Shared type scale: readable body copy, restrained headings, native-size form inputs. */ body{font-size:15px;line-height:1.65} body h1{font-size:clamp(30px,3.3vw,44px)!important;line-height:1.16!important;letter-spacing:-.035em} body h2,body .science h2{font-size:clamp(25px,2.6vw,34px)!important;line-height:1.22!important;letter-spacing:-.025em} body h3,body .science-card h3{font-size:clamp(18px,1.7vw,22px)!important;line-height:1.3!important;letter-spacing:-.02em} body h4{font-size:17px!important;line-height:1.4!important} body p.text-xl,body p.text-2xl,body p.text-lg{font-size:16px!important;line-height:1.7!important} body .science-subtitle,body .science-method p{font-size:15px} body .science-card>p{font-size:14px} button.text-lg,a.text-lg{font-size:15px!important} input,select,textarea{font-size:16px} /* Nav: floating pill at rest, solid frosted bar once scrolled so nothing shows past its edges. */ #main-nav{transition:background-color .35s ease,box-shadow .35s ease} #nav-container{box-shadow:0 1px 2px rgba(16,44,38,.05);transition:box-shadow .35s ease,background-color .35s ease,border-color .35s ease} #main-nav>div{transition:padding .35s ease} #main-nav.scrolled{background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(16,44,38,.07)} #main-nav.scrolled>div{padding-top:5px;padding-bottom:5px} #main-nav.scrolled #nav-container{background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none} /* Hero: balanced two-column composition, consistent edges, compact content rhythm. */ /* Hero runs up behind the floating pill nav (body offsets it by 92px). */ #hero{min-height:0;margin-top:-92px;padding:160px 0 80px} #hero>.relative{max-width:1240px} #hero>.relative>.grid{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:76px} #hero .hero-copy{text-align:left} #hero .hero-copy>*+*{margin-top:25px} #hero .hero-copy>div:first-child{padding:7px 11px;border:1px solid #e3eee7;box-shadow:none;background:#f8fcfa;border-radius:7px;gap:9px} #hero .hero-copy>div:first-child>span:last-child{font-size:10px;letter-spacing:.13em} #hero .hero-copy>div:first-child .animate-pulse{animation:none} #hero h1{font-size:clamp(34px,3.8vw,48px)!important;font-weight:750;line-height:1.12!important;color:#19372e;max-width:560px;margin:0} #hero h1>span:nth-child(2){color:#078364;background:none;-webkit-text-fill-color:currentColor} #hero h1>span:last-child{display:block;font-family:inherit;font-style:normal;font-size:.66em;font-weight:500;line-height:1.35;margin-top:12px;letter-spacing:-.025em;color:#4c7061} #hero .hero-copy p{font-size:15px!important;line-height:1.8!important;font-weight:400;max-width:460px;margin:18px 0 0;color:#64736d} #hero .hero-copy button{min-height:48px;padding:13px 24px;border-radius:10px;font-size:14px;box-shadow:0 6px 14px #164d4412;font-weight:600} #hero .hero-copy button:focus-visible{outline:3px solid #6cc9a0;outline-offset:4px} #hero .hero-copy>div:last-child>div+div{margin-top:22px;padding-top:0;gap:11px} #hero .hero-copy .justify-center{justify-content:flex-start} #hero .hero-copy img{width:31px;height:31px} #hero .hero-copy .text-sm{font-size:11px;color:#6b7872} #hero .hero-copy button i.text-white{color:#fff!important} #hero .hero-art{margin:0;padding:18px 10px 26px} #hero .hero-art>div{max-width:440px;transform:none} #hero .hero-photo{aspect-ratio:1.04;border:6px solid #fff;border-radius:34px 34px 100px 34px;box-shadow:0 20px 48px -25px #2a594548} #hero .hero-macros{top:25px;right:-23px;width:167px;padding:14px;border-radius:15px;box-shadow:0 12px 30px -15px #244e4e55} #hero .hero-macros>div:first-child{gap:8px;margin-bottom:12px} #hero .hero-macros>div:first-child>div:last-child{font-size:9px;letter-spacing:.03em} #hero .hero-meal{left:-26px;bottom:-16px;padding:12px;border-radius:16px;background:#fff;box-shadow:0 12px 30px -15px #244e4e55} #hero .hero-meal>div:first-child{width:62px;height:62px;border-radius:12px} #hero .hero-meal .text-xs{font-size:12px} @media(max-width:1023px){ #hero{padding:140px 0 60px} #hero>.relative>.grid{gap:36px} #hero h1{font-size:36px!important} #hero .hero-art{padding-right:16px} #hero .hero-macros{right:-12px;width:150px} #hero .hero-meal{left:-12px} } @media(max-width:767px){ body{font-size:14px} body h1{font-size:30px!important} body h2,body .science h2{font-size:26px!important} body h3,body .science-card h3{font-size:19px!important} body p.text-xl,body p.text-2xl,body p.text-lg{font-size:14px!important;line-height:1.75!important} body .science-subtitle,body .science-method p{font-size:14px} #hero{padding:126px 0 48px} #hero>.relative{padding:0 22px} #hero>.relative>.grid{grid-template-columns:minmax(0,1fr);gap:30px;max-width:520px;margin:auto} #hero h1{font-size:34px!important;max-width:440px} #hero h1>span:last-child{font-size:24px;margin-top:9px} #hero .hero-copy p{font-size:14px!important;line-height:1.75!important;margin-top:15px} #hero .hero-copy>*+*{margin-top:20px} #hero .hero-copy button{width:auto;align-self:flex-start} #hero .hero-copy>div:last-child>div+div{margin-top:18px} #hero .hero-art{padding:8px 12px 18px} #hero .hero-art>div{max-width:380px;width:100%} #hero .hero-photo{aspect-ratio:1.2;border-radius:25px 25px 65px 25px} #hero .hero-macros{top:18px;right:-10px;width:145px;padding:11px} #hero .hero-meal{left:-10px;bottom:-13px;padding:9px} #hero .hero-meal>div:first-child{width:49px;height:49px} } /* Editorial sections share a single grid and type rhythm. */ .refine-wrap{max-width:1240px;margin:auto;padding:0 32px} .benefits-editorial{padding:76px 0;background:#fff} .macros-editorial{padding:76px 0;background:#f4f8f5} .refine-header{max-width:660px;margin-bottom:36px} .refine-header h2{margin:0 0 16px;color:#19372e;font-weight:700} .refine-header h2 span,.macro-method h3 span{color:#078364} .refine-header p{font-size:15px;line-height:1.75;color:#69776f;max-width:590px;margin:0} .benefits-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:stretch} .benefits-photo{margin:0;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #e2ece6;border-radius:24px;box-shadow:0 12px 36px -12px rgba(16,68,68,0.08);overflow:hidden;min-width:0} .benefits-photo>img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.4s ease} .benefits-photo:hover>img{transform:scale(1.02)} .benefits-list{display:grid;gap:14px;align-content:center} .benefit-row{display:flex;align-items:flex-start;gap:18px;padding:21px 23px;background:#fbfdfc;border:1px solid #e6f0ea;border-radius:18px} .benefit-icon{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;background:linear-gradient(135deg,#e5f7ee,#d2f0e2);border-radius:14px;color:#078364;font-size:17px} body .benefit-row h3{font-size:17px!important;margin:0 0 6px;font-weight:650;color:#203c30} .benefit-row p{font-size:13px;line-height:1.7;color:#69776f;margin:0;max-width:440px} .macro-food-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} .macro-food{--macro-accent:#078364;display:flex;flex-direction:column;background:#fff;border:1px solid #e4eee7;border-radius:20px;overflow:hidden;min-width:0} .macro-food:nth-child(2){--macro-accent:#0fa37a} .macro-food:nth-child(3){--macro-accent:#38b48c} .macro-food-media{position:relative;line-height:0} .macro-food-media:after{content:"";position:absolute;inset:auto 0 0;height:58%;background:linear-gradient(180deg,transparent,rgba(12,42,32,.42))} .macro-food-media>img{width:100%;height:172px;object-fit:cover} .macro-percent{position:absolute;left:16px;bottom:14px;z-index:1;display:inline-flex;align-items:baseline;padding:7px 13px;border-radius:999px;background:#ffffffee;backdrop-filter:blur(6px);box-shadow:0 6px 16px -10px rgba(9,44,32,.65);font-size:21px;font-weight:700;letter-spacing:-.6px;line-height:1;color:var(--macro-accent)} .macro-percent small{font-size:11px;margin-left:1px;font-weight:600} .macro-food-content{display:flex;flex-direction:column;flex:1;padding:19px 20px 18px} body .macro-food h3{font-size:18px!important;margin:0 0 5px;font-weight:650;color:#203c30} .macro-food p{font-size:12px;line-height:1.6;color:#6c7971;margin:0} .macro-bar{height:6px;margin:16px 0 11px;border-radius:999px;background:#eaf2ed;overflow:hidden} .macro-bar>span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--macro-accent) 55%,#fff),var(--macro-accent))} .macro-food-footer{display:flex;justify-content:space-between;gap:8px;margin-top:auto;font-size:10px;color:#728177} .macro-food-footer b{font-weight:600;color:#466753;margin-left:4px} .macro-method{display:grid;grid-template-columns:1.4fr 1fr;gap:70px;padding:36px 40px;margin-top:28px;border:1px solid #dceae0;border-radius:20px;background:#e9f3ec} .macro-method h3{color:#203c30;font-weight:650;margin:0 0 13px} .macro-method p{font-size:13px;line-height:1.8;color:#63786a;margin:0 0 20px;max-width:530px} .macro-method button{display:inline-flex;gap:18px;align-items:center;min-height:46px;padding:12px 19px;border-radius:9px;background:#174e3c;color:white;font-size:12px;font-weight:600} .macro-method button:hover{background:#0e3c2c} .macro-method button:focus-visible{outline:3px solid #078364;outline-offset:4px} .macro-method-steps{list-style:none;margin:0;padding:0;display:grid;align-content:center} .macro-method-steps li{display:flex;align-items:center;gap:18px;padding:16px 0;border-bottom:1px solid #d1e4d7;color:#385a45;font-size:13px;font-weight:500} .macro-method-steps li:last-child{border:0} .method-number{font-size:10px;letter-spacing:.08em;color:#76927e} .macro-method-steps i{color:#078364;width:18px;text-align:center} .calculators-editorial{padding:76px 0;background:#fff;border-top:1px solid #e7efe9} .calculators-header{display:grid;grid-template-columns:1.1fr 1fr;align-items:end;gap:80px;margin-bottom:36px} .calculators-header h2{margin:0;color:#19372e;font-weight:700} .calculators-header h2 span{color:#078364} .calculators-header>p{font-size:15px;line-height:1.75;color:#69776f;max-width:480px;margin:0 0 3px} .calculator-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px} .calculator-card{display:flex;flex-direction:column;min-width:0;border:1px solid #e2ece6;border-radius:16px;background:#fff;text-decoration:none;padding:24px 22px;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease} .calculator-card:hover{transform:translateY(-4px);border-color:#b5dbc5;box-shadow:0 16px 26px -20px #19543b66} .calculator-card:focus-visible{outline:3px solid #6cc9a0;outline-offset:4px} .calculator-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#ecfdf5;color:#078364;font-size:16px;margin-bottom:16px} .calculator-copy{display:flex;flex-direction:column;flex:1} body .calculator-copy h3{font-size:15px!important;color:#203c30;font-weight:650;margin:0 0 6px} .calculator-copy p{font-size:12.5px;line-height:1.6;color:#6d7971;margin:0 0 18px} .calculator-link{display:inline-flex;align-items:center;gap:8px;margin-top:auto;font-size:11px;color:#078364;font-weight:650} .calculator-link i{transition:transform .25s ease}.calculator-card:hover .calculator-link i{transform:translateX(4px)} /* Testimonials: calm editorial proof, with emphasis on the quote rather than the container. */ #testimonials{padding:76px 0;background:#f7faf8} #testimonials>.absolute{display:none} #testimonials>.max-w-7xl{max-width:1240px} #testimonials>.max-w-7xl>div:first-child{display:grid;grid-template-columns:1.05fr .95fr;align-items:end;gap:70px;max-width:none;margin:0 0 38px;text-align:left} #testimonials>.max-w-7xl>div:first-child>div:first-child{margin-bottom:0} #testimonials>.max-w-7xl>div:first-child>div:first-child>div:first-child{margin-bottom:14px;padding:0;background:none;border:0;box-shadow:none} #testimonials>.max-w-7xl>div:first-child>div:first-child>div:first-child>span:first-child{display:none} #testimonials>.max-w-7xl>div:first-child h2{margin:0 0 14px} #testimonials>.max-w-7xl>div:first-child h2 br{display:none} #testimonials>.max-w-7xl>div:first-child h2 span{font-family:inherit;font-style:normal;font-weight:700} #testimonials>.max-w-7xl>div:first-child p{max-width:470px;margin:0;font-size:15px!important;line-height:1.75!important} #testimonials>.max-w-7xl>div:last-child{gap:18px} #testimonials>.max-w-7xl>div:last-child>div{padding:24px;border-radius:18px;background:#fff;border:1px solid #e2ece6;box-shadow:none;display:flex;flex-direction:column} #testimonials>.max-w-7xl>div:last-child>div>div:first-child{top:19px;right:22px;font-size:42px;color:#e4f4eb;z-index:0} #testimonials>.max-w-7xl>div:last-child>div>div:nth-child(2){margin-bottom:22px;position:relative;z-index:1} #testimonials>.max-w-7xl>div:last-child>div>div:nth-child(2)>div:first-child>div:first-child{transform:none;border-radius:13px;width:50px;height:50px} #testimonials>.max-w-7xl>div:last-child>div>div:nth-child(2)>div:first-child>div:first-child img{border-radius:10px} #testimonials>.max-w-7xl>div:last-child>div>div:nth-child(2)>div:last-child>div:first-child{font-family:inherit;font-style:normal;font-size:15px;font-weight:650} #testimonials>.max-w-7xl>div:last-child>div>div:nth-child(3){margin-bottom:15px} #testimonials>.max-w-7xl>div:last-child>div>p{font-size:13px;line-height:1.75;margin:0 0 24px;flex:1} #testimonials>.max-w-7xl>div:last-child>div>div:last-child{padding:15px 0 0;border-top:1px solid #edf2ef} #testimonials>.max-w-7xl>div:last-child>div>div:last-child>div:first-child{width:38px;height:38px;border-radius:10px} #testimonials>.max-w-7xl>div:last-child>div>div:last-child>div:last-child>div:last-child{font-size:13px} /* Guide: clear editorial split with three readable content blocks. */ .guide-editorial{padding:76px 0;background:#f4f8f5} .guide-editorial>.max-w-7xl{max-width:1240px} .guide-editorial>.max-w-7xl>div{grid-template-columns:1fr 1.15fr;gap:76px} .guide-editorial>.max-w-7xl>div>div:first-child{grid-column:1} .guide-editorial>.max-w-7xl>div>div:last-child{grid-column:2} .guide-editorial>.max-w-7xl>div>div:first-child{position:sticky;top:105px;align-self:start} .guide-editorial>.max-w-7xl>div>div:first-child>div:first-child{margin:0 0 15px} .guide-editorial>.max-w-7xl>div>div:first-child h2{margin-bottom:15px} .guide-editorial>.max-w-7xl>div>div:first-child h2 br{display:none} .guide-editorial>.max-w-7xl>div>div:first-child h2 span{font-family:inherit;font-style:normal;font-weight:700} .guide-editorial>.max-w-7xl>div>div:first-child p{font-size:14px;line-height:1.8} .guide-editorial>.max-w-7xl>div>div:first-child button{min-height:46px;padding:12px 18px;border-radius:9px;font-size:12px;box-shadow:none} .guide-editorial>.max-w-7xl>div>div:last-child{display:grid;gap:12px;padding:0} .guide-editorial>.max-w-7xl>div>div:last-child>div:first-child{display:none} .guide-editorial>.max-w-7xl>div>div:last-child>div:not(:first-child){padding:22px 24px 21px 58px;border:1px solid #e2ece6;border-radius:16px;background:#fff;position:relative} .guide-editorial>.max-w-7xl>div>div:last-child>div:not(:first-child)>div:first-child{left:20px;top:21px;width:25px;height:25px;border-width:1px;border-color:#84c8a5;color:#078364;box-shadow:none} .guide-editorial>.max-w-7xl>div>div:last-child>div:not(:first-child)>div:last-child{gap:7px} .guide-editorial>.max-w-7xl>div>div:last-child h3{font-size:17px!important;line-height:1.4;display:flex;flex-wrap:wrap;gap:8px;margin:0} .guide-editorial>.max-w-7xl>div>div:last-child h3 span{font-size:9px;padding:3px 7px;border-radius:5px;letter-spacing:.09em} .guide-editorial>.max-w-7xl>div>div:last-child p{font-size:13px;line-height:1.75} .guide-editorial>.max-w-7xl>div>div:last-child .flex.flex-wrap{padding-top:2px} .guide-editorial>.max-w-7xl>div>div:last-child .flex.flex-wrap span{padding:4px 7px;border-radius:5px;font-size:9px} /* FAQ: wide, quiet accordion with two columns on desktop. */ .faq-editorial{padding:76px 0;background:#f7faf8} .faq-editorial>.max-w-7xl{max-width:1240px} .faq-editorial>.max-w-7xl>div:first-child{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:80px;max-width:none;margin-bottom:36px;text-align:left} .faq-editorial>.max-w-7xl>div:first-child>div:first-child{margin:0} .faq-editorial>.max-w-7xl>div:first-child>div:first-child>div:first-child{margin-bottom:14px;padding:0;background:none;border:0;box-shadow:none} .faq-editorial>.max-w-7xl>div:first-child>div:first-child>div:first-child>span:first-child{display:none} .faq-editorial>.max-w-7xl>div:first-child h2{margin:0 0 14px} .faq-editorial>.max-w-7xl>div:first-child h2 br{display:none} .faq-editorial>.max-w-7xl>div:first-child h2 span{font-family:inherit;font-style:normal;font-weight:700} .faq-editorial>.max-w-7xl>div:first-child p{font-size:15px!important;line-height:1.75!important;max-width:470px;margin:0} .faq-editorial>.max-w-7xl>div:last-child{max-width:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px} .faq-editorial .faq-item{border:1px solid #e2ece6;border-radius:13px;background:#fff;box-shadow:none} .faq-editorial .faq-item:hover{border-color:#acd6bc;box-shadow:none} .faq-editorial .faq-header{padding:18px 18px;min-height:70px;gap:15px} .faq-editorial .faq-header>span:first-child{font-size:13px;line-height:1.45} .faq-editorial .faq-icon{width:26px;height:26px;flex-shrink:0} .faq-editorial .faq-body>div{padding:0 18px 18px;font-size:12px;line-height:1.75} /* Latest insights: align the intro like the other sections and reduce card weight. */ .blog-editorial{padding:76px 0;background:#fff} .blog-editorial>.max-w-7xl{max-width:1240px} .blog-editorial>.max-w-7xl>div:first-child{display:grid;grid-template-columns:1.1fr 1fr;align-items:end;gap:70px;max-width:none;margin-bottom:36px;text-align:left} .blog-editorial>.max-w-7xl>div:first-child>div:first-child{margin:0} .blog-editorial>.max-w-7xl>div:first-child>div:first-child>div:first-child{margin-bottom:14px;padding:0;background:none;border:0;box-shadow:none} .blog-editorial>.max-w-7xl>div:first-child>div:first-child>div:first-child>span:first-child{display:none} .blog-editorial>.max-w-7xl>div:first-child h2{margin:0 0 14px} .blog-editorial>.max-w-7xl>div:first-child h2 br{display:none} .blog-editorial>.max-w-7xl>div:first-child h2 span{font-family:inherit;font-style:normal;font-weight:700} .blog-editorial>.max-w-7xl>div:first-child p{font-size:15px!important;line-height:1.75!important;max-width:470px;margin:0} .blog-editorial>.max-w-7xl>div:nth-child(2){gap:18px} .blog-editorial>.max-w-7xl>div:nth-child(2)>article{border-radius:18px;box-shadow:none;border-color:#e2ece6} .blog-editorial>.max-w-7xl>div:nth-child(2)>article:hover{box-shadow:0 18px 28px -22px #19543b50} .blog-editorial>.max-w-7xl>div:nth-child(2)>article>div:last-child{padding:20px} .blog-editorial>.max-w-7xl>div:nth-child(2)>article h3{font-size:16px!important} .blog-editorial>.max-w-7xl>div:nth-child(2)>article p{font-size:12px;line-height:1.7} .blog-editorial>.max-w-7xl>div:last-child{margin-top:30px} .blog-editorial>.max-w-7xl>div:last-child a{min-height:44px;padding:11px 18px;border-radius:9px;font-size:12px} /* Hero image treatment: clean, straight frame with no extra geometric decoration. */ #hero .hero-art:before{display:none} #hero .hero-photo{border-radius:28px;border-width:7px;transform:none} #hero .hero-art>div:before{display:none} #hero .hero-macros{top:25px;right:-23px;transform:none} #hero .hero-meal{bottom:-16px;left:-26px;transform:none} #hero h1>span:nth-child(2){position:relative;display:inline-block} #hero h1>span:nth-child(2):after{display:none} @media(max-width:900px){.benefits-layout{gap:30px;grid-template-columns:1fr 1.1fr}.benefits-photo>img{height:auto;max-height:360px}.macro-food-grid{gap:15px}.macro-food-content{padding:16px}.macro-percent{font-size:18px;left:12px;bottom:11px;padding:6px 11px}.macro-food-footer{flex-wrap:wrap}.macro-method{gap:35px;padding:28px}.macro-food-media>img{height:150px}} @media(max-width:640px){.refine-wrap{padding:0 22px}.benefits-editorial,.macros-editorial,.calculators-editorial{padding:48px 0}.refine-header{margin-bottom:27px}.refine-header p{font-size:14px}.benefits-layout{grid-template-columns:1fr;gap:28px}.benefits-photo>img{height:auto;max-height:260px;flex:auto}.benefits-list{gap:11px}.benefit-row{padding:17px 17px;gap:15px;border-radius:15px}.benefit-icon{width:40px;height:40px;font-size:15px}.benefit-row p{font-size:13px}.macro-food-grid{grid-template-columns:1fr;gap:18px}.macro-food-media>img{height:185px}.macro-food-content{padding:18px}.macro-food-footer{font-size:11px}.macro-percent{font-size:20px}.macro-method{grid-template-columns:1fr;padding:25px 21px;gap:15px}.macro-method-steps li{padding:13px 0}.macro-method p{font-size:13px}.calculators-header{grid-template-columns:1fr;gap:17px;margin-bottom:27px}.calculators-header>p{font-size:14px}.calculator-grid{grid-template-columns:1fr 1fr;gap:13px}.calculator-card{padding:18px 16px}.calculator-icon{width:36px;height:36px;font-size:14px;margin-bottom:12px}.calculator-copy p{font-size:11px}body .calculator-copy h3{font-size:14px!important}#hero .hero-photo{border-radius:22px;transform:none}#hero .hero-macros{right:-7px;top:35px;transform:none}#hero .hero-meal{left:-6px;bottom:-8px;transform:none}} @media(max-width:900px){ #testimonials>.max-w-7xl>div:first-child,.faq-editorial>.max-w-7xl>div:first-child,.blog-editorial>.max-w-7xl>div:first-child{grid-template-columns:1fr;gap:18px} #testimonials>.max-w-7xl>div:first-child p,.faq-editorial>.max-w-7xl>div:first-child p,.blog-editorial>.max-w-7xl>div:first-child p{max-width:620px} .guide-editorial>.max-w-7xl>div{grid-template-columns:1fr;gap:32px} .guide-editorial>.max-w-7xl>div>div:first-child,.guide-editorial>.max-w-7xl>div>div:last-child{grid-column:1} .guide-editorial>.max-w-7xl>div>div:first-child{position:static} .faq-editorial>.max-w-7xl>div:last-child{grid-template-columns:1fr} } @media(max-width:640px){ #testimonials,.guide-editorial,.faq-editorial,.blog-editorial{padding:48px 0} #testimonials>.max-w-7xl>div:last-child{grid-template-columns:1fr;gap:12px} #testimonials>.max-w-7xl>div:last-child>div{padding:20px} .guide-editorial>.max-w-7xl>div>div:last-child>div:not(:first-child){padding:19px 18px 18px 52px} .guide-editorial>.max-w-7xl>div>div:last-child>div:not(:first-child)>div:first-child{left:17px} .guide-editorial>.max-w-7xl>div>div:last-child h3{font-size:16px!important} .guide-editorial>.max-w-7xl>div>div:last-child p{font-size:12px} .faq-editorial .faq-header{padding:16px 15px;min-height:64px} .faq-editorial .faq-header>span:first-child{font-size:12px} .faq-editorial .faq-body>div{padding:0 15px 16px;font-size:11px} .blog-editorial>.max-w-7xl>div:nth-child(2)>article>div:last-child{padding:17px} } @media(prefers-reduced-motion:reduce){#hero *,#hero *:before,#hero *:after{animation:none!important;transition:none!important}} #hero .hero-copy button i.fa-arrow-right { color: #fff !important; } /* A quiet orbiting highlight gives the primary CTA a little motion and focus. */ .hero-cta { overflow: hidden !important; isolation: isolate; z-index: 0; } .hero-cta > div.absolute { display: none; } .hero-cta::before { content: ""; position: absolute; inset: 2px; border-radius: inherit; border: 3px solid rgba(110,231,183,.72); border-top-color: #fff; border-right-color: #6ee7b7; pointer-events: none; z-index: 1; animation: cta-pulse 2s ease-in-out infinite; } .hero-cta::after { content: ""; position: absolute; inset: -8px; border-radius: inherit; box-shadow: 0 0 22px rgba(52,211,153,.42), 0 0 7px rgba(255,255,255,.3); pointer-events: none; z-index: -1; } @keyframes cta-pulse { 0%,100% { opacity:.65; } 50% { opacity:1; } } @media(prefers-reduced-motion:reduce){.hero-cta::before{animation:none}} /* Explicit header placement: badge + title stay together, summary sits beside them. */ #testimonials>.max-w-7xl>div:first-child, .faq-editorial>.max-w-7xl>div:first-child, .blog-editorial>.max-w-7xl>div:first-child{ grid-template-rows:auto auto; } #testimonials>.max-w-7xl>div:first-child>div:first-child, .faq-editorial>.max-w-7xl>div:first-child>div:first-child, .blog-editorial>.max-w-7xl>div:first-child>div:first-child{ grid-column:1; grid-row:1; justify-self:start; width:max-content; max-width:100%; padding:0; margin:0 0 14px; background:none; border:0; box-shadow:none; } #testimonials>.max-w-7xl>div:first-child>h2, .faq-editorial>.max-w-7xl>div:first-child>h2, .blog-editorial>.max-w-7xl>div:first-child>h2{ grid-column:1; grid-row:2; } #testimonials>.max-w-7xl>div:first-child>p, .faq-editorial>.max-w-7xl>div:first-child>p, .blog-editorial>.max-w-7xl>div:first-child>p{ grid-column:2; grid-row:1 / span 2; align-self:end; } @media(max-width:900px){ #testimonials>.max-w-7xl>div:first-child, .faq-editorial>.max-w-7xl>div:first-child, .blog-editorial>.max-w-7xl>div:first-child{grid-template-rows:auto;} #testimonials>.max-w-7xl>div:first-child>div:first-child, .faq-editorial>.max-w-7xl>div:first-child>div:first-child, .blog-editorial>.max-w-7xl>div:first-child>div:first-child, #testimonials>.max-w-7xl>div:first-child>h2, .faq-editorial>.max-w-7xl>div:first-child>h2, .blog-editorial>.max-w-7xl>div:first-child>h2, #testimonials>.max-w-7xl>div:first-child>p, .faq-editorial>.max-w-7xl>div:first-child>p, .blog-editorial>.max-w-7xl>div:first-child>p{grid-column:1;grid-row:auto;} } /* Shared section badge lockup: keep the badge and heading in one visual group. */ #testimonials,.guide-editorial,.faq-editorial,.blog-editorial{scroll-margin-top:82px} #testimonials>.max-w-7xl>div:first-child, .faq-editorial>.max-w-7xl>div:first-child, .blog-editorial>.max-w-7xl>div:first-child{ grid-template-columns:1.05fr .95fr; grid-template-rows:auto; align-items:end; } #testimonials>.max-w-7xl>div:first-child>.section-heading, .faq-editorial>.max-w-7xl>div:first-child>.section-heading, .blog-editorial>.max-w-7xl>div:first-child>.section-heading{ grid-column:1; grid-row:1; align-self:end; display:block; width:auto; max-width:100%; margin:0; padding:0; } #testimonials>.max-w-7xl>div:first-child>.section-heading>div:first-child, .faq-editorial>.max-w-7xl>div:first-child>.section-heading>div:first-child, .blog-editorial>.max-w-7xl>div:first-child>.section-heading>div:first-child{ display:inline-flex!important; align-items:center!important; width:auto!important; max-width:100%; padding:7px 12px!important; margin:0 0 14px!important; background:#f0faf4!important; border:1px solid #d7eee1!important; border-radius:999px!important; box-shadow:none!important; } #testimonials>.max-w-7xl>div:first-child>.section-heading>div:first-child>span:first-child, .faq-editorial>.max-w-7xl>div:first-child>.section-heading>div:first-child>span:first-child, .blog-editorial>.max-w-7xl>div:first-child>.section-heading>div:first-child>span:first-child{display:flex!important} #testimonials>.max-w-7xl>div:first-child>.section-heading>h2, .faq-editorial>.max-w-7xl>div:first-child>.section-heading>h2, .blog-editorial>.max-w-7xl>div:first-child>.section-heading>h2{margin:0!important} #testimonials>.max-w-7xl>div:first-child>p, .faq-editorial>.max-w-7xl>div:first-child>p, .blog-editorial>.max-w-7xl>div:first-child>p{ grid-column:2; grid-row:1; align-self:end; } @media(max-width:900px){ #testimonials>.max-w-7xl>div:first-child, .faq-editorial>.max-w-7xl>div:first-child, .blog-editorial>.max-w-7xl>div:first-child{grid-template-columns:1fr;grid-template-rows:auto;} #testimonials>.max-w-7xl>div:first-child>.section-heading, .faq-editorial>.max-w-7xl>div:first-child>.section-heading, .blog-editorial>.max-w-7xl>div:first-child>.section-heading, #testimonials>.max-w-7xl>div:first-child>p, .faq-editorial>.max-w-7xl>div:first-child>p, .blog-editorial>.max-w-7xl>div:first-child>p{grid-column:1;grid-row:auto;} } /* ============================================================================ Homepage type scale - harmonisation pass ---------------------------------------------------------------------------- The rules above grew one section at a time, which left the homepage with seven different h3 sizes (15/16/17/18/22px) for the same "card title" role, four heading weights (600/650/700/750), and body copy down at 12px desktop and 11px mobile. This block collapses that into one scale: hero h1 42 / 30px section h2 28 / 23px sub-heading 20 / 18px (.macro-method h3) card title A 17 / 16px (.science-card h3 - the large top cards) card title B 16 / 15px (benefit, macro-food and calculator cards) body copy 14 / 13px floor - nothing smaller than this All headings settle on weight 700. Every selector here is homepage-only: #hero, #testimonials, .faq-editorial and .blog-editorial live in index.php, and .science / .refine-header / .calculators-header come from includes that only index.php pulls in. No other page moves. Appended last so it wins over the same selectors above. Remove this block to revert. ========================================================================== */ /* --- Hero --- */ #hero h1 { font-size: clamp(30px, 3.1vw, 42px) !important; line-height: 1.14 !important; } /* Give the message column more room and pull the visual closer to it. */ @media (min-width: 1024px) { #hero > .relative > .grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); column-gap: 48px; } #hero .hero-copy > div, #hero .hero-copy p { max-width: 590px; } } /* --- Section headings --- */ body .science h2, .refine-header h2, .calculators-header h2, #testimonials h2, .faq-editorial h2, .blog-editorial h2, .guide-editorial h2 { font-size: clamp(23px, 2.2vw, 28px) !important; line-height: 1.24 !important; font-weight: 700 !important; } /* --- Section sub-heading --- */ body .macro-method h3 { font-size: 20px !important; line-height: 1.3 !important; font-weight: 700 !important; } /* --- Card titles: one role, one size --- */ body .science-card h3 { font-size: 17px !important; line-height: 1.35 !important; font-weight: 700 !important; } body .benefit-row h3, body .macro-food h3, body .calculator-copy h3 { font-size: 16px !important; line-height: 1.35 !important; font-weight: 700 !important; } /* --- Body copy floor: nothing below 14px on desktop --- */ body .science-card > p, .benefit-row p, .macro-food p, .calculator-copy p, .macro-method p, #testimonials > .max-w-7xl > div:last-child > div > p { font-size: 14px !important; line-height: 1.65 !important; } @media (max-width: 767px) { #hero h1 { font-size: 30px !important; } body .science h2, .refine-header h2, .calculators-header h2, #testimonials h2, .faq-editorial h2, .blog-editorial h2, .guide-editorial h2 { font-size: 23px !important; } body .macro-method h3 { font-size: 18px !important; } body .science-card h3 { font-size: 16px !important; } body .benefit-row h3, body .macro-food h3, body .calculator-copy h3 { font-size: 15px !important; } body .science-card > p, .benefit-row p, .macro-food p, .calculator-copy p, .macro-method p, #testimonials > .max-w-7xl > div:last-child > div > p { font-size: 13px !important; line-height: 1.7 !important; } } /* --- Homepage: sections the block above did not reach --------------------- */ /* Closing CTA h2 sat at 34px while every other section heading moved to 28. #landing-page only exists in index.php, so this stays homepage-scoped. */ #landing-page h2 { font-size: clamp(23px, 2.2vw, 28px) !important; line-height: 1.24 !important; } /* Blog card excerpts (12px), FAQ answer body (12px) and guide steps (13px). */ .blog-editorial > .max-w-7xl > div:nth-child(2) > article p, .faq-editorial .faq-body > div, .guide-editorial > .max-w-7xl > div > div:last-child p { font-size: 14px !important; line-height: 1.7 !important; } @media (max-width: 767px) { #landing-page h2 { font-size: 23px !important; } .blog-editorial > .max-w-7xl > div:nth-child(2) > article p, .faq-editorial .faq-body > div, .guide-editorial > .max-w-7xl > div > div:last-child p { font-size: 13px !important; line-height: 1.75 !important; } } /* --- Site-wide: restore the markup's own intent -------------------------- These two are not a redesign. The author wrote `text-sm` on the footer column headings and `text-lg` on the cookie notice, but `body h3` above forces every h3 on the site to 18-22px with !important, so both render far larger than intended - a 22px "Explore" above 14px footer links. This puts them back to the size the markup asks for, on every page. ------------------------------------------------------------------------ */ footer h3 { font-size: 14px !important; line-height: 1.4 !important; font-weight: 600 !important; } #cookie-consent h3 { font-size: 18px !important; line-height: 1.35 !important; } /* ============================================================================ Site-wide type scale ---------------------------------------------------------------------------- The global h1-h4 rules near the top of this file set 44 / 34 / 22 / 17px on every page. The homepage and the meal plan pages have since been brought to a tighter scale, which left every other page - calculators, guides, blog, legal - noticeably heavier than the rest of the site. This aligns all of them on one scale: h1 42 / 30px h2 28 / 23px h3 20 / 18px h4 16 / 15px Appended last, so it supersedes the earlier globals. Page-specific rules keep winning on specificity: .mp-h2 (meal plans) and .benefit-row h3 (homepage) are single-class selectors and still beat `body h2` / `body h3`. Remove this block to revert. ========================================================================== */ body h1 { font-size: clamp(30px, 3.2vw, 42px) !important; line-height: 1.14 !important; letter-spacing: -.032em; } body h2 { font-size: clamp(23px, 2.2vw, 28px) !important; line-height: 1.24 !important; letter-spacing: -.022em; } body h3 { font-size: clamp(17px, 1.45vw, 20px) !important; line-height: 1.34 !important; letter-spacing: -.014em; } body h4 { font-size: 16px !important; line-height: 1.42 !important; } /* Readability floor. Real sentences were rendering at 11-12px on the guides, calculators and legal pages. Only

is touched - badges, chips and micro labels are spans and divs, so they keep their intended size. */ p.text-xs, p.text-\[11px\] { font-size: 13px !important; line-height: 1.7 !important; } @media (max-width: 767px) { body h1 { font-size: 30px !important; } body h2 { font-size: 23px !important; } body h3 { font-size: 18px !important; } body h4 { font-size: 15px !important; } } /* Meal planner: calm, focused question flow and editorial cookbook offer. */ #wizard-section {background:#f7f8f4;min-height:85dvh;} .planner-intro{text-align:center;margin:0 auto 28px;max-width:530px;} .planner-eyebrow{font-size:clamp(21px,3vw,29px);line-height:1.25;font-weight:700;letter-spacing:-.8px;color:#163c30;text-wrap:balance;display:block;} .planner-intro p{font-size:13px;color:#6a776f;margin-top:10px;} .planner-phase{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#5c7467;margin-bottom:10px;} #wizard-section .glass-card{background:white;border:1px solid #e4e9e1;box-shadow:0 14px 45px -30px #274b35;} #wizard-section h2{letter-spacing:-.7px;text-wrap:balance;} #wizard-section #ob-progress{background:#257552;box-shadow:none;} .planner-reassurance{text-align:center;color:#69766d;font-size:11px;line-height:1.8;margin:20px 12px;} .planner-portrait{width:100%;height:170px;object-fit:cover;object-position:50% 25%;border-radius:14px;margin-bottom:14px;background:#f0f1e8;} #wizard-section [data-ob="gender"] .selection-card>div{padding:9px 9px 16px;overflow:hidden;} #wizard-section .selection-card:has(input:checked)>div{border-color:#27754f;background:#eff7ef;box-shadow:0 0 0 2px #27754f;} #wizard-section .selection-card:has(input:focus-visible)>div{outline:3px solid #27754f;outline-offset:4px;} #wizard-section .age-card{text-align:left;position:relative;border-width:1px;min-height:72px;background:#fafbf8;} #wizard-section .age-card::after{content:'→';position:absolute;right:18px;color:#78917f;} #wizard-section .age-card[aria-pressed="true"]{background:#edf6ed;border-color:#27754f;} #wizard-section button:focus-visible,.ogw-overlay :focus-visible{outline:3px solid #4b9772;outline-offset:4px;} #wizard-section h2:focus{outline:none;} #loading-quiz{display:none;} #loading-offer>div{background:#fffdf7;border-color:#e6e7d9;} #loading-offer h4{font-size:21px;line-height:1.25;text-wrap:balance;} #loading-offer img{width:110px;border-radius:5px;} #loading-offer p,#loading-offer li{font-size:13px;} .ogw-overlay{position:fixed;inset:0;z-index:60;background:rgba(19,39,30,.62);backdrop-filter:blur(7px);display:flex;align-items:center;justify-content:center;padding:24px;transition:opacity .25s;} .ogw-editorial{width: min(880px,100%);max-height:92dvh;overflow-y:auto;position:relative;display:grid;grid-template-columns:.85fr 1.15fr;background:#fffefa;border-radius:24px;box-shadow:0 28px 90px #102b3040;animation:offer-arrive .35s ease-out;} .ogw-close{position:absolute;right:14px;top:14px;width:36px;height:36px;border-radius:50%;background:#fffefae8;border:1px solid #dde4da;color:#35523f;font-size:25px;z-index:2;} .ogw-product-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:42px 26px;background:radial-gradient(ellipse at 50% 40%,#faffef,#e4ead8);text-align:center;} .ogw-eyebrow{font-size:9px;letter-spacing:.17em;font-weight:700;color:#516a46;} .ogw-product-stage>img{width:100%;max-width:255px;height:auto;max-height:340px;object-fit:contain;margin:30px 0 20px;filter:drop-shadow(0 22px 18px #32462928);transform:rotate(-4deg);} .ogw-book-caption strong{font-size:22px;letter-spacing:-.7px;display:block;color:#244735;} .ogw-book-caption span{font-size:11px;display:block;line-height:1.6;color:#62705a;margin-top:8px;} .ogw-pitch{padding:38px 32px 24px;} .ogw-status{display:inline-flex;align-items:center;gap:7px;color:#347149;font-size:11px;font-weight:600;margin-bottom:14px;} .ogw-pitch h3{font-size:clamp(25px,3vw,34px);line-height:1.12;letter-spacing:-1.2px;color:#213d2d;margin-bottom:14px;text-wrap:balance;} .ogw-pitch h3 em{font-style:normal;color:#648249;} .ogw-lead{font-size:13px;line-height:1.7;color:#647064;margin-bottom:20px;} .ogw-benefits{display:grid;gap:12px;margin-bottom:18px;} .ogw-preview{border-top:1px solid #e2e6dc;border-bottom:1px solid #e2e6dc;padding:13px 0;margin-bottom:16px;font-size:12px;color:#34563f;} .ogw-preview summary{cursor:pointer;font-weight:600;display:flex;justify-content:space-between;} .ogw-preview p{line-height:1.7;color:#687466;margin-top:10px;} .ogw-savings{display:flex;flex-direction:column;gap:4px;font-size:13px;color:#28583c;margin-bottom:14px;} .ogw-savings span{font-size:10px;color:#6b7768;} .ogw-buy{display:flex;align-items:center;justify-content:space-between;width:100%;background:#245d3d;color:white;padding:15px 19px;border-radius:12px;font-size:14px;font-weight:600;transition:background .2s,transform .2s;} .ogw-buy:hover{background:#18472c;transform:translateY(-1px);} .ogw-purchase-note{text-align:center;font-size:10px;color:#768171;margin:9px 0 14px;} .ogw-continue{display:block;width:100%;text-align:center;font-size:12px;font-weight:500;color:#4b634f;padding:9px;} .ogw-continue:hover{text-decoration:underline;} @keyframes offer-arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}} @media(max-width:640px){.planner-intro{margin-bottom:22px}.planner-portrait{height:145px}.ogw-overlay{padding:10px;align-items:flex-end}.ogw-editorial{display:block;border-radius:22px;max-height:94dvh}.ogw-product-stage{min-height:120px;padding:16px 48px 16px 16px;display:grid;grid-template-columns:85px 1fr;gap:15px;text-align:left}.ogw-eyebrow{display:none}.ogw-product-stage>img{width:80px;max-height:105px;margin:0}.ogw-book-caption strong{font-size:22px}.ogw-book-caption span{font-size:11px}.ogw-pitch{padding:20px}.ogw-pitch h3{font-size:27px}.ogw-benefits{gap:10px}.ogw-lead{margin-bottom:16px}#loading-offer img{width:75px}#loading-offer h4{font-size:18px}} @media(prefers-reduced-motion:reduce){#wizard-section *, .ogw-overlay,.ogw-editorial,.ogw-buy{animation:none!important;transition:none!important;scroll-behavior:auto!important;}} /* Override the site's global heading scale inside the product dialog. */ #ogw-title{font-size:clamp(26px,2.6vw,34px)!important;line-height:1.12!important;font-weight:700;letter-spacing:-1px;} @media(max-width:640px){#ogw-title{font-size:27px!important;}}