/* EverStrong site v2. Light, editorial, coach-led. */ :root{ --paper:#F8F5EF; --paper-2:#F0EBE2; --paper-3:#E7E0D4; --ink:#161D2E; --ink-2:#4B5163; /* --ink-3 was #7C8194: 3.26:1 on --paper-2 and 3.56:1 on --paper, both below 4.5:1. Darkened to #5C6070, which clears 4.5:1 on every light surface in the palette (paper 5.74, paper-2 5.26, paper-3 4.76, white 6.25, teal-soft 5.32). See the a11y section at the end. */ --ink-3:#5C6070; /* the same role on the navy surfaces (footer, .band, .runbar, .codebox), where #7C8194 only reached 4.34:1. #A6ABBA is 7.33:1 on --ink. */ --ink-3-dark:#A6ABBA; --line:#DCD5C8; --teal:#15A99B; /* logo mark. Decorative use only: 2.69:1 on paper */ /* --teal-dark was #0E8477: 3.86:1 on paper-2, 4.21:1 on paper. Darkened to #0C7065 (5.48 paper, 5.02 paper-2, 5.96 white, 5.08 teal-soft). */ --teal-dark:#0C7065; --teal-light:#5BD9D2; /* 9.85:1 on --ink. Focus ring on dark surfaces */ --teal-soft:#DDF1EE; /* --orange was #E8792F: 2.68:1 on paper, so it failed even the 3:1 large text floor. Split into three roles. --orange #C95E16 display numerals >=24px on light (3.47 min) --orange-ink #A34C12 orange text under 24px on light (4.91 min) --orange-bright #E8792F bars, meters and fills only, never text on light */ --orange:#C95E16; --orange-ink:#A34C12; --orange-bright:#E8792F; --white:#FFFFFF; --focus:var(--teal-dark); /* redefined to --teal-light on dark surfaces */ --focus-gap:var(--paper); /* the 2px surface gap inside the focus ring */ --display:'Fraunces',Georgia,'Times New Roman',serif; --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --max:1120px; --radius:6px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{font-family:var(--sans);font-size:18px;line-height:1.65;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} a{color:var(--teal-dark);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px} a:hover{color:var(--ink)} h1,h2,h3,h4{font-family:var(--display);font-weight:500;line-height:1.12;letter-spacing:-0.015em;color:var(--ink);font-variation-settings:"opsz" 96,"SOFT" 30} h1{font-size:clamp(40px,6.2vw,74px)} h2{font-size:clamp(32px,4.4vw,50px)} h3{font-size:clamp(24px,2.6vw,30px);line-height:1.25} h4{font-family:var(--sans);font-weight:600;font-size:18px;letter-spacing:0} p{margin:0 0 1.2em} strong{font-weight:600} em{font-style:italic} .wrap{max-width:var(--max);margin:0 auto;padding:0 24px} .narrow{max-width:760px} section{padding:96px 0} /* Body copy stays at 18px on the phone. The old 17px step-down was a readability loss for the audience; the height it saved is taken back out of the section padding instead. */ @media(max-width:768px){section{padding:52px 0}} .eyebrow{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-dark);margin-bottom:20px} .lede{font-size:clamp(19px,1.6vw,22px);color:var(--ink-2);max-width:640px} .rule{height:1px;background:var(--line);border:0;margin:0} .muted{color:var(--ink-2)} .small{font-size:16px;color:var(--ink-3)} .serif{font-family:var(--display)} /* buttons */ .btn{display:inline-block;font-family:var(--sans);font-weight:600;font-size:17px;line-height:1;padding:18px 28px;border-radius:var(--radius);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background .18s,color .18s,border-color .18s,transform .18s} .btn-primary{background:var(--ink);color:var(--white);border-color:var(--ink)} .btn-primary:hover{background:var(--teal-dark);border-color:var(--teal-dark);color:var(--white)} /* white on --teal is only 2.92:1. The teal button now fills with --teal-dark (5.96:1) and darkens to ink on hover. */ .btn-teal{background:var(--teal-dark);color:var(--white);border-color:var(--teal-dark)} .btn-teal:hover{background:var(--ink);border-color:var(--ink);color:var(--white)} .btn-outline{background:transparent;color:var(--ink);border-color:var(--ink)} .btn-outline:hover{background:var(--ink);color:var(--white)} .btn-lg{font-size:18px;padding:20px 34px} .link-arrow{font-weight:600;text-decoration:none;color:var(--ink);display:inline-flex;align-items:center;min-height:44px;max-width:100%} /* the arrow is a flex item once the link is a flex container, so the leading space in the old content string would be collapsed away */ .link-arrow:after{content:"\2192";color:var(--teal-dark);margin-left:.35em;flex:none} .link-arrow:hover{color:var(--teal-dark)} .cta-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:36px} /* nav */ .nav{position:sticky;top:0;z-index:50;background:rgba(248,245,239,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .nav .wrap{display:flex;align-items:center;justify-content:space-between;height:76px} .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);min-height:44px} .brand img{width:36px;height:36px;border-radius:8px} .brand span{font-family:var(--display);font-size:24px;font-weight:600;letter-spacing:-0.01em} .nav-links{display:flex;gap:32px;list-style:none;align-items:center} .nav-links a{font-size:17px;font-weight:500;color:var(--ink-2);text-decoration:none;display:inline-flex;align-items:center;min-height:44px} .nav-links a:hover{color:var(--ink)} .nav-links .btn{padding:13px 20px;font-size:16px;min-height:44px;justify-content:center} /* .nav-links a (0,1,1) beats .btn-primary (0,1,0), which left the nav CTA dark-on-dark. Restore the button colours at matching specificity. */ .nav-links a.btn-primary,.nav-links a.btn-primary:hover{color:var(--white)} .nav-links a.btn-outline{color:var(--ink)} .nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px} .nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;transition:transform .2s,opacity .2s} @media(max-width:860px){ .nav-links{display:none;position:absolute;left:0;right:0;top:76px;background:var(--paper);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:12px 24px 20px;gap:2px} .nav-links.open{display:flex} .nav-links a{min-height:48px;width:100%} .nav-links a.btn{margin-top:10px} /* 48x48 hit area for the hamburger; the 24px bars are unchanged */ /* Flex does not collapse adjacent margins the way the old block stack did, so the bars are spaced with gap instead. 2px bar + 5px gap keeps the 7px pitch the open-state translateY values below are built around. */ .nav-toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:48px;height:48px;padding:0;margin-right:-8px} .nav-toggle span{margin:0} .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-toggle.open span:nth-child(2){opacity:0} .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} } /* hero */ .hero{padding:88px 0 72px} .hero-grid{display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:center} .hero h1{margin-bottom:24px} .hero h1 em{font-style:italic;color:var(--teal-dark)} .hero-note{font-size:16px;color:var(--ink-3);margin-top:18px} .hero-photo{position:relative} .hero-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius)} .hero-photo figcaption{font-size:15px;color:var(--ink-3);margin-top:12px} @media(max-width:860px){.hero{padding:44px 0 40px}.hero-grid{grid-template-columns:1fr;gap:32px}.hero-photo img{aspect-ratio:4/3}} /* stats band */ .band{background:var(--ink);color:var(--paper);--focus:var(--teal-light);--focus-gap:var(--ink)} .band h2,.band h3{color:var(--paper)} .band .eyebrow{color:var(--teal)} .band .muted{color:#B8BCC9} .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:48px} .stat .num{font-family:var(--display);font-size:clamp(56px,7vw,96px);line-height:1;font-weight:500;color:var(--paper);letter-spacing:-0.03em} .stat .num sup{font-size:.4em;vertical-align:top;top:.3em;position:relative} .stat .num.accent{color:var(--orange-bright)} /* 5.77:1 on --ink */ .stat .num.teal{color:var(--teal)} /* 5.75:1 on --ink */ .stat p{margin:12px 0 0;color:#B8BCC9;font-size:17px} /* was #7C8194 on --ink = 4.34:1 at 13px */ .stat .src{font-size:14px;color:var(--ink-3-dark);margin-top:8px} @media(max-width:768px){.stats{grid-template-columns:1fr;gap:28px}} /* editorial two-col */ .split{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start} .split.rev{grid-template-columns:7fr 5fr} .split .sticky{position:sticky;top:110px} @media(max-width:860px){.split,.split.rev{grid-template-columns:1fr;gap:32px}.split .sticky{position:static}} /* numbered list */ .numbered{list-style:none;counter-reset:n;border-top:1px solid var(--line)} .numbered li{counter-increment:n;display:grid;grid-template-columns:72px 1fr;column-gap:24px;row-gap:0;padding:28px 0;border-bottom:1px solid var(--line)} .numbered li:before{content:counter(n,decimal-leading-zero);font-family:var(--display);font-size:44px;line-height:1;color:var(--orange);font-weight:500;grid-column:1;grid-row:1 / span 20} .numbered li > *{grid-column:2} .numbered h3{margin-bottom:8px} .numbered p{margin:0;color:var(--ink-2)} .numbered .good{margin-top:12px;font-size:16px;color:var(--teal-dark);font-weight:600} /* timeline */ .timeline{list-style:none;border-top:1px solid var(--line)} .timeline li{display:grid;grid-template-columns:110px 1fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--line);align-items:baseline} .timeline .wk{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-dark)} .timeline h4{margin-bottom:4px} .timeline p{margin:0;color:var(--ink-2);font-size:17px} @media(max-width:600px){.timeline li{grid-template-columns:1fr;gap:6px}} /* inclusions */ .inc{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:20px 40px} .inc li{padding-left:28px;position:relative;color:var(--ink-2);font-size:17px} .inc li:before{content:"";position:absolute;left:0;top:11px;width:14px;height:2px;background:var(--teal)} .inc li strong{color:var(--ink);display:block} @media(max-width:700px){.inc{grid-template-columns:1fr}} /* price box */ .price-box{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:40px} .price-box .eyebrow{margin-bottom:10px} .price{font-family:var(--display);font-size:64px;line-height:1;letter-spacing:-0.03em} .price small{display:block;font-family:var(--sans);font-size:16px;color:var(--ink-2);letter-spacing:0;margin-top:8px} .price-was{font-size:16px;color:var(--ink-3);margin-top:8px} .price-was s{color:var(--ink-3)} .currency{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;margin-bottom:20px} .currency button{background:transparent;border:0;padding:10px 18px;min-height:44px;min-width:56px;font-family:var(--sans);font-size:16px;font-weight:600;color:var(--ink-2);cursor:pointer} .currency button.on{background:var(--ink);color:var(--white)} .price-box .btn{width:100%;text-align:center;margin-top:24px} .price-box .fine{font-size:15px;color:var(--ink-3);margin-top:14px;text-align:center} /* quiet cards (text only) */ .trio{display:grid;grid-template-columns:repeat(3,1fr);gap:40px} .trio > div{border-top:2px solid var(--ink);padding-top:20px} .trio h3{font-size:24px;margin-bottom:10px} .trio p{color:var(--ink-2);font-size:17px} @media(max-width:768px){.trio{grid-template-columns:1fr;gap:26px}} /* founder */ .founder-photo{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);background:var(--paper-3)} .placeholder{display:flex;align-items:center;justify-content:center;text-align:center;color:var(--ink-3);font-size:15px;padding:24px;border:1px dashed var(--line)} blockquote{font-family:var(--display);font-size:clamp(22px,2.2vw,28px);line-height:1.4;color:var(--ink);border-left:3px solid var(--teal);padding-left:24px;margin:32px 0} blockquote cite{display:block;font-family:var(--sans);font-style:normal;font-size:16px;color:var(--ink-3);margin-top:12px} /* faq */ .faq{border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{cursor:pointer;list-style:none;padding:22px 0;min-height:44px;font-family:var(--display);font-size:22px;display:flex;justify-content:space-between;align-items:center;gap:20px} .faq summary::-webkit-details-marker{display:none} .faq summary:after{content:"+";font-family:var(--sans);font-size:26px;color:var(--teal-dark);flex:none} .faq details[open] summary:after{content:"\2212"} .faq details p{color:var(--ink-2);padding-bottom:22px;max-width:720px} /* forms */ .field{margin-bottom:22px} .field label{display:block;font-weight:600;font-size:16px;margin-bottom:8px} .field .help{font-size:15px;color:var(--ink-3);margin-top:6px;line-height:1.6} /* 17px keeps iOS from zooming the page on focus (the trigger is <16px). 14px of vertical padding puts the control at ~54px tall. */ input[type=text],input[type=email],input[type=number],input[type=tel],input[type=search],textarea,select{width:100%;font-family:var(--sans);font-size:17px;padding:14px 16px;min-height:48px;border:1.5px solid var(--line);border-radius:var(--radius);background:var(--white);color:var(--ink)} input:focus,select:focus,textarea:focus{border-color:var(--teal-dark)} .row{display:flex;gap:12px} .chips{display:flex;flex-wrap:wrap;gap:10px} .chips label{border:1.5px solid var(--line);border-radius:999px;padding:11px 18px;min-height:44px;display:inline-flex;align-items:center;font-size:16px;cursor:pointer;background:var(--white)} .chips input{position:absolute;opacity:0;pointer-events:none} .chips input:checked + label{background:var(--ink);color:var(--white);border-color:var(--ink)} .form-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:40px} @media(max-width:600px){.form-card{padding:24px}} /* results */ .results{display:none} .results.show{display:block} .result-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .result{border-top:2px solid var(--ink);padding-top:16px} .result .lbl{font-size:14px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)} .result .val{font-family:var(--display);font-size:56px;line-height:1.1;letter-spacing:-0.03em;color:var(--ink)} .result .val.accent{color:var(--orange)} .result .unit{font-size:16px;color:var(--ink-2)} @media(max-width:768px){.result-grid{grid-template-columns:1fr 1fr}} .meals{display:grid;grid-template-columns:1fr 1fr;gap:20px} .meal{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:24px} .meal .t{font-size:14px;letter-spacing:.09em;text-transform:uppercase;color:var(--teal-dark);font-weight:600} .meal h4{font-family:var(--display);font-size:22px;font-weight:500;margin:6px 0 8px} .meal p{font-size:16px;color:var(--ink-2);margin:0 0 12px} .meal .g{font-weight:600} @media(max-width:700px){.meals{grid-template-columns:1fr}} .callout{background:var(--teal-soft);border-radius:var(--radius);padding:32px;margin:40px 0} .callout h3{margin-bottom:8px} .callout p{color:var(--ink-2);margin-bottom:16px} .ok{display:none;color:var(--teal-dark);font-weight:600;margin-top:12px} .ok.show{display:block} /* article */ .article-head{padding:72px 0 40px;border-bottom:1px solid var(--line)} .article-head h1{font-size:clamp(34px,4.6vw,56px);max-width:860px} .meta{font-size:16px;color:var(--ink-3);margin-top:20px} .article{padding:56px 0 80px} .article .body{max-width:720px} /* ~68 characters at 18px Inter */ .article .body h2{font-size:clamp(26px,3vw,34px);margin:48px 0 16px} .article .body h3{font-size:22px;margin:32px 0 12px} .article .body p,.article .body li{color:var(--ink);font-size:18px} .article .body ul,.article .body ol{margin:0 0 1.4em 1.4em} .article .body li{margin-bottom:8px} .article .body table{width:100%;border-collapse:collapse;margin:24px 0;font-size:16px} .article .body th,.article .body td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left;vertical-align:top} .article .body th{font-weight:600} .article .body img{border-radius:var(--radius);margin:24px 0} .article .body blockquote{font-size:22px} .article .body .highlight-box,.article .body .info-box,.article .body .warning-box,.article .body .tip-box,.article .body .key-point{background:var(--paper-2);border-left:3px solid var(--teal);padding:20px 24px;margin:24px 0;border-radius:0 var(--radius) var(--radius) 0} .article .body .btn,.article .body .cta-button,.article .body .btn-primary{display:inline-block;background:var(--ink);color:var(--white);padding:14px 22px;border-radius:var(--radius);text-decoration:none;font-weight:600;font-size:16px} .post-list{list-style:none;border-top:1px solid var(--line)} .post-list li{padding:28px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:24px;align-items:baseline} .post-list h3{font-size:24px;margin-bottom:6px} .post-list h3 a{text-decoration:none;color:var(--ink)} .post-list h3 a:hover{color:var(--teal-dark)} .post-list p{margin:0;color:var(--ink-2);font-size:17px;max-width:680px} .post-list .tag{font-size:14px;color:var(--ink-3);white-space:nowrap} @media(max-width:600px){.post-list li{grid-template-columns:1fr;gap:8px}} /* cta strip */ .cta-strip{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .cta-strip .wrap{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:center} .cta-strip h2{font-size:clamp(28px,3.4vw,40px)} @media(max-width:860px){.cta-strip .wrap{grid-template-columns:1fr}} /* footer */ footer{background:var(--ink);color:#B8BCC9;padding:64px 0 40px;font-size:17px;--focus:var(--teal-light);--focus-gap:var(--ink)} footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px} footer h4{color:var(--paper);font-size:15px;letter-spacing:.09em;text-transform:uppercase;margin-bottom:8px} footer ul{list-style:none} /* 18 bare footer links used to be 19px tall. The link is now the block and carries its own 44px hit area; the old li margin is folded into it so the column reads as the same rhythm. */ footer li{margin-bottom:0} footer li a{display:flex;align-items:center;min-height:44px;padding:2px 0} footer a{color:#B8BCC9;text-decoration:none} footer a:hover,footer a:focus-visible{color:var(--white);text-decoration:underline} footer .brand,footer .brand span{color:var(--paper)} footer .legal{border-top:1px solid #2B3348;padding-top:24px;font-size:15px;color:var(--ink-3-dark)} footer .legal p{margin:0 0 8px} @media(max-width:768px){footer .cols{grid-template-columns:1fr 1fr}} @media(max-width:480px){footer .cols{grid-template-columns:1fr}} /* utilities */ .mt-0{margin-top:0}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:32px}.mt-6{margin-top:48px}.mt-8{margin-top:64px} .mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.mb-4{margin-bottom:32px}.mb-6{margin-bottom:48px} .center{text-align:center} .alt{background:var(--paper-2)} .notice{font-size:15px;color:var(--ink-3);border-top:1px solid var(--line);padding-top:16px;margin-top:40px;line-height:1.6;max-width:62ch} /* ============================================================================ Conversion and growth additions (Sept 2026): buy bar, capture modal, bundle card, cheat sheet table, share line, clinic packs. Vanilla, no framework. ============================================================================ */ /* sticky buy bar: mobile only, shown by site.js after 30% scroll */ .buybar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(248,245,239,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:10px 12px calc(10px + env(safe-area-inset-bottom));transform:translateY(110%);transition:transform .25s ease} .buybar.show{transform:translateY(0)} .buybar-in{display:flex;align-items:center;gap:12px;max-width:var(--max);margin:0 auto} .buybar-txt{flex:1;min-width:0;line-height:1.25} .buybar-t{display:block;font-size:14px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .buybar-p{font-family:var(--display);font-size:22px;letter-spacing:-0.02em;color:var(--ink)} .buybar .btn{padding:14px 18px;font-size:16px;min-height:48px;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center} .buybar-x{background:none;border:0;font-size:26px;line-height:1;color:var(--ink-3);cursor:pointer;padding:6px;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center} @media(max-width:768px){.buybar{display:block}body.has-buybar{padding-bottom:84px}} /* email capture modal: exit intent (desktop) or 45 s (mobile), once per page load */ .es-modal{position:fixed;inset:0;z-index:70;background:rgba(22,29,46,.45);display:flex;align-items:center;justify-content:center;padding:20px} .es-modal[hidden]{display:none} .es-modal-card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:40px;max-width:520px;width:100%;box-shadow:0 24px 60px rgba(22,29,46,.25)} .es-modal-card h3{margin-bottom:10px} .es-modal-card .eyebrow{margin-bottom:10px} .es-modal-card .muted{font-size:16px} .es-modal-x{position:absolute;top:6px;right:8px;background:none;border:0;font-size:30px;line-height:1;color:var(--ink-3);cursor:pointer;padding:0;min-width:48px;min-height:48px;display:flex;align-items:center;justify-content:center} .es-modal-x:hover{color:var(--ink)} .es-modal-form{display:flex;gap:10px;margin-top:8px} .es-modal-form input{flex:1;min-width:0} .es-modal-form .btn{white-space:nowrap;padding:14px 20px;font-size:17px;min-height:48px} .es-modal-note{margin:12px 0 0} @media(max-width:600px){.es-modal{align-items:flex-end;padding:0}.es-modal-card{padding:28px 24px 32px;border-radius:var(--radius) var(--radius) 0 0;max-width:none}.es-modal-form{flex-direction:column}} /* bundle and annual "best value" cards */ .bundle{position:relative;background:var(--white);border:1.5px solid var(--ink);border-radius:var(--radius);padding:32px;margin-top:20px} /* white on orange was 2.91:1. Ink on the bright orange is 5.77:1 and keeps the badge the same colour. */ .bundle .flag{position:absolute;top:-12px;left:24px;background:var(--orange-bright);color:var(--ink);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:999px} .bundle h3{font-size:24px;margin-bottom:6px} .bundle p{color:var(--ink-2);font-size:17px;margin-bottom:12px} .bundle .price{font-size:44px} .bundle .save{font-size:15px;color:var(--teal-dark);font-weight:600;margin:6px 0 0} .bundle .btn{width:100%;text-align:center;margin-top:18px} .bundle .fine{font-size:15px;color:var(--ink-3);margin:12px 0 0;text-align:center} /* trust line under buy buttons */ .trust{font-size:15px;color:var(--ink-3);margin:14px 0 0;text-align:center} .cta-row + .trust{text-align:left} /* cheat sheet table */ .sheet{width:100%;border-collapse:collapse;font-size:16px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden} .sheet th,.sheet td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top} .sheet th{font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);background:var(--paper-2)} .sheet td.n{color:var(--orange-ink);font-family:var(--display);font-size:19px;width:40px} .sheet td.g{font-weight:600;white-space:nowrap} .sheet td.s{color:var(--ink-2);font-size:16px} .sheet tr:last-child td{border-bottom:0} .sheet .s-note{display:block;font-size:14px;color:var(--ink-3)} .sheet .s-desc{display:block;font-size:15px;color:var(--ink-3)} .sheet .s-amt{white-space:nowrap} .sheet th .s-note{display:inline;text-transform:none;letter-spacing:0;font-size:13px} .sheet-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} .sheet-rules{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:32px} .sheet-rules > div{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:28px} .sheet-rules h3{font-size:22px;margin-bottom:8px} .sheet-rules p,.sheet-rules li{font-size:17px;color:var(--ink-2);max-width:68ch} .sheet-rules ol{margin:8px 0 0 20px} .sheet-rules li{margin-bottom:6px} @media(max-width:700px){.sheet-rules{grid-template-columns:1fr}.sheet{font-size:16px}.sheet th,.sheet td{padding:9px 6px}.sheet .s-note,.sheet th .s-note{display:none}.sheet td.n{width:28px;font-size:16px}} .gate{display:none}.gate.show{display:block} @media print{ .nav,footer,.buybar,.es-modal,.no-print,.callout,.cta-strip{display:none !important} body{background:#fff;font-size:11pt} section{padding:8px 0} .sheet{font-size:9.5pt}.sheet th,.sheet td{padding:4px 6px} .sheet .s-note{display:block;font-size:8.5pt} .sheet-rules{grid-template-columns:1fr 1fr;gap:12px;margin-top:12px} .sheet-rules > div{padding:12px} h1{font-size:24pt} .lede{font-size:11pt} } /* referral / share line on thanks pages */ .share-line{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:24px 28px;margin-top:40px} .share-line p{margin:0 0 12px;color:var(--ink-2);font-size:17px} .share-line .row{gap:10px;flex-wrap:wrap;align-items:center} .share-line code{font-family:var(--sans);font-weight:600;color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;font-size:16px} .share-line .btn{padding:13px 18px;font-size:16px;min-height:44px;display:inline-flex;align-items:center;justify-content:center} .share-line .ok{margin:8px 0 0} /* clinic packs */ .packs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .pack{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:32px;display:flex;flex-direction:column} .pack.best{border:1.5px solid var(--ink)} .pack .eyebrow{margin-bottom:8px} .pack .price{font-size:48px} .pack .per{font-size:16px;color:var(--ink-2);margin:8px 0 0} .pack ul{list-style:none;margin:20px 0 0;padding:0;flex:1} .pack li{font-size:16px;line-height:1.55;color:var(--ink-2);padding-left:22px;position:relative;margin-bottom:10px} .pack li:before{content:"";position:absolute;left:0;top:11px;width:12px;height:2px;background:var(--teal)} .pack .btn{width:100%;text-align:center;margin-top:24px} @media(max-width:860px){.packs{grid-template-columns:1fr}} /* ============================================================================ FREE TOOLS SUITE (September 2026) Pages: /goal-weight-protein-calculator, /muscle-loss-risk-calculator, /protein-per-dollar, /meal-protein-builder, /injection-day-planner, /strength-test-tracker, /embed/ and the iframe widget. These pages reuse .form-card, .field, .chips, .row, .result-grid, .result, .callout, .meals, .sheet, .post-list, .notice and .btn. Everything below is only what those did not already cover. Vanilla CSS, mobile first at 390px. ============================================================================ */ /* cross-links between the tools, dropped at the foot of every tool page */ .tool-links{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px;list-style:none} .tool-links a{display:block;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;text-decoration:none;color:var(--ink);height:100%} .tool-links a:hover{border-color:var(--teal);color:var(--ink)} .tool-links strong{display:block;font-weight:600;font-size:18px;margin-bottom:2px} .tool-links span{display:block;font-size:16px;color:var(--ink-2);line-height:1.55} @media(max-width:600px){.tool-links{grid-template-columns:1fr}} /* a single headline number with a caption, used where .result-grid is overkill */ .bignum{font-family:var(--display);font-size:clamp(52px,10vw,80px);line-height:1;letter-spacing:-0.03em;color:var(--ink)} .bignum.accent{color:var(--orange)} .bignum small{display:block;font-family:var(--sans);font-size:16px;line-height:1.55;letter-spacing:0;color:var(--ink-2);margin-top:10px} /* item picker with a quantity stepper (meal builder, protein per dollar) */ .picker{border-top:1px solid var(--line);margin-top:4px} .picker-row{display:grid;grid-template-columns:1fr auto;gap:12px 16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)} .picker-row .nm{font-weight:600;font-size:17px;line-height:1.35} .picker-row .sub{font-size:15px;color:var(--ink-3);margin-top:2px;line-height:1.5} .picker-row.on{background:var(--teal-soft)} .picker-row.on .sub{color:var(--ink-2)} .stepper{display:flex;align-items:center;gap:6px} .stepper button{width:46px;height:46px;border:1.5px solid var(--line);background:var(--white);border-radius:var(--radius);font-size:21px;line-height:1;color:var(--ink);cursor:pointer;flex:none;font-family:var(--sans)} .stepper button:hover{border-color:var(--teal-dark)} .stepper .qty{min-width:52px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums;font-size:17px} .picker-filter{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 8px} /* running total strip, sticks under the nav while you keep adding */ .runbar{position:sticky;top:84px;z-index:40;background:var(--ink);color:var(--paper);border-radius:var(--radius);padding:16px 20px;display:flex;gap:24px;align-items:baseline;flex-wrap:wrap;margin:24px 0;--focus:var(--teal-light);--focus-gap:var(--ink)} .runbar div{min-width:0} .runbar b{display:block;font-family:var(--display);font-size:32px;font-weight:500;color:var(--white);letter-spacing:-0.02em;line-height:1.05} .runbar span{display:block;font-size:14px;color:#B8BCC9;letter-spacing:.06em;text-transform:uppercase;font-weight:600} .runbar em{font-style:normal;font-size:15px;color:#B8BCC9} @media(max-width:600px){.runbar{gap:16px 20px;padding:14px 16px;top:76px}.runbar b{font-size:26px}} /* risk meter and the factor breakdown under it */ .meter{height:14px;border-radius:999px;background:linear-gradient(90deg,#15A99B 0%,#8FBE55 30%,#E8C03A 52%,#E8792F 74%,#C2452B 100%);position:relative;margin:24px 0 8px} .meter i{position:absolute;top:-7px;width:4px;height:28px;background:var(--ink);border-radius:2px;margin-left:-2px;transition:left .35s ease} .meter-scale{display:flex;justify-content:space-between;font-size:14px;color:var(--ink-3);gap:8px} .meter-scale span{flex:1;text-align:center} .meter-scale span:first-child{text-align:left} .meter-scale span:last-child{text-align:right} .factors{list-style:none;margin-top:4px} .factors li{display:grid;grid-template-columns:200px 1fr 90px;gap:8px 16px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line);font-size:16px} .factors .track{height:10px;background:var(--paper-3);border-radius:999px;overflow:hidden} .factors .fill{display:block;height:100%;background:var(--orange);border-radius:999px;transition:width .35s ease} .factors .v{text-align:right;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap} @media(max-width:700px){ .factors li{grid-template-columns:1fr auto} .factors li > div:nth-child(1){grid-column:1;grid-row:1} .factors li > div:nth-child(3){grid-column:2;grid-row:1} .factors .track{grid-column:1 / -1;grid-row:2} } /* three-day plan cards (injection-day planner) */ .days{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:4px} .day{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:24px} .day.is-dose{border:1.5px solid var(--ink)} .day .d-when{font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-dark)} .day h3{font-size:22px;margin:8px 0 2px} .day .d-note{font-size:15px;color:var(--ink-3);margin:0 0 6px} .day h4{font-size:14px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin:18px 0 8px;font-weight:700} .day ul{list-style:none;margin:0;padding:0} .day li{font-size:16px;color:var(--ink-2);padding-left:18px;position:relative;margin-bottom:9px;line-height:1.55} .day li:before{content:"";position:absolute;left:0;top:10px;width:9px;height:2px;background:var(--teal)} .day li strong{color:var(--ink)} @media(max-width:860px){.days{grid-template-columns:1fr}} /* weekly trend bars (strength test tracker) */ .trend{display:flex;align-items:flex-end;gap:8px;height:190px;border-bottom:1px solid var(--line);margin-top:4px;padding:0 2px} .trend .tb{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px} .trend .tb b{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums} .trend .tb i{display:block;width:100%;max-width:64px;background:var(--teal-dark);border-radius:4px 4px 0 0;min-height:4px} .trend .tb.first i{background:var(--ink-3)} .trend-x{display:flex;gap:8px;margin-top:8px} .trend-x span{flex:1;min-width:0;text-align:center;font-size:14px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .trend-empty{border:1px dashed var(--line);border-radius:var(--radius);padding:36px 24px;text-align:center;color:var(--ink-3);font-size:17px} /* date inputs are not covered by the base input rule, and their intrinsic minimum width pushes a flex row wider than the viewport if left alone */ input[type=date]{width:100%;min-width:0;max-width:100%;font-family:var(--sans);font-size:17px;padding:13px 16px;min-height:48px;border:1.5px solid var(--line);border-radius:var(--radius);background:var(--white);color:var(--ink)} .row > .field{min-width:0} /* ranked list with editable prices (protein per dollar). A table is unreadable on a 390 px phone once it has five columns, so this is a grid that restacks. */ .rank{border-top:1px solid var(--line);margin-top:4px} .rank-head{display:grid;grid-template-columns:34px minmax(0,1fr) 110px 155px 165px;gap:14px;align-items:end;padding:10px 12px;background:var(--paper-2);font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);line-height:1.3;border-bottom:1px solid var(--line)} .rank-row{display:grid;grid-template-columns:34px minmax(0,1fr) 110px 155px 165px;gap:6px 14px;align-items:center;padding:14px 12px;border-bottom:1px solid var(--line)} .rank-row .no{font-family:var(--display);font-size:20px;color:var(--orange-ink);line-height:1} .rank-row .nm{font-weight:600;font-size:17px;line-height:1.35} .rank-row .sub{font-size:15px;color:var(--ink-3);margin-top:2px;line-height:1.45} .rank-row .c10{font-family:var(--display);font-size:25px;letter-spacing:-0.02em;line-height:1;white-space:nowrap} .rank-row .pin{display:flex;align-items:center;gap:5px;font-size:16px;flex-wrap:wrap} .rank-row .pin input{width:84px;padding:10px 10px;font-size:16px;min-height:44px;min-width:0} .rank-row .pin .pk{font-size:14px;color:var(--ink-3);white-space:nowrap} .rank-row .vol{font-size:16px;color:var(--ink-2);line-height:1.45} .rank-row .vol.big{color:var(--orange-ink);font-weight:600} .rank-row .vol small{display:block;font-size:14px;color:var(--ink-3)} .rk-lbl{display:none;font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)} @media(max-width:820px){ .rank-head{display:none} .rank-row{grid-template-columns:28px minmax(0,1fr) auto;padding:16px 2px;gap:8px 10px} .rank-row .no{grid-area:1 / 1} .rank-row .food{grid-area:1 / 2} .rank-row .c10{grid-area:1 / 3;text-align:right;font-size:22px} .rank-row .pin{grid-column:2 / -1} .rank-row .vol{grid-column:2 / -1} .rk-lbl{display:block;margin-bottom:2px} .rank-row .pin .rk-lbl{width:100%} } /* copy-paste code block (embed page) */ .codebox{position:relative;background:var(--ink);border-radius:var(--radius);padding:52px 18px 18px;margin:16px 0 8px;--focus:var(--teal-light);--focus-gap:var(--ink)} .codebox pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;line-height:1.65;color:#D9E0EC;white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;margin:0;max-width:100%} @media(max-width:600px){.codebox pre{font-size:13px}} .codebox .copy{position:absolute;top:6px;right:8px;background:#2B3348;color:var(--paper);border:0;border-radius:var(--radius);padding:10px 16px;min-height:44px;font-family:var(--sans);font-size:15px;font-weight:600;cursor:pointer} .codebox .copy:hover{background:var(--teal-dark)} .frame-demo{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--white);max-width:520px} .frame-demo iframe{display:block;width:100%;border:0} /* print: planners and trackers are meant to go on the fridge */ @media print{ .runbar{position:static;background:#fff;color:#000;border:1px solid #999;padding:8px 0} .runbar b{color:#000;font-size:18pt} .runbar span,.runbar em{color:#333} .days{grid-template-columns:repeat(3,1fr);gap:10px} .day{border:1px solid #999;padding:10px;break-inside:avoid} .day h3{font-size:13pt} .day li{font-size:9pt;margin-bottom:4px;color:#000} .day h4{margin:10px 0 5px} .trend{height:130px} .trend .tb i{background:#666 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact} .picker,.stepper,.tool-links,.codebox{display:none !important} .factors .fill{-webkit-print-color-adjust:exact;print-color-adjust:exact} } /* ============================================================================ ACCESSIBILITY AND PHONE LEGIBILITY PASS (17 September 2026) Audience: women and men 45 to 70, mostly on phones, often with presbyopia, reading tired and hungry. The target is that a 62-year-old can read and operate every page one-handed at 390 px without pinching to zoom. Measured at 390 px and 1200 px with Playwright over ten representative pages. What this block fixes, in order: 1 minimum 44 x 44 px hit area on every control 2 type floors (16 px body, 17 to 18 px primary copy, 14 px small print) 3 contrast (palette changes are at the top of the file, in :root) 4 focus ring, skip link styling, keyboard order 5 prefers-reduced-motion 6 forms: height, 16 px+ font, visible labels, non-colour error states 7 print ============================================================================ */ /* --------------------------------------------------------------------------- 1. TAP TARGETS Everything a finger can hit gets 44 x 44 px. Where the visual design must not change, the area comes from padding that paints nothing, or from a pseudo-element overlay, not from a bigger box. --------------------------------------------------------------------------- */ /* A link that is the only thing in its block is a button in disguise: give it the full hit area. Prose links are handled separately below. */ p > a:only-child, li > a:only-child, td > a:only-child, dd > a:only-child, figcaption > a:only-child{min-height:44px;display:inline-flex;align-items:center;max-width:100%} /* Inline links inside running text are the documented exception: breaking the line box to reach 44 px would wreck the paragraph. They get a taller hit area instead, with a negative margin so the line rhythm is untouched. padding-block on an inline box grows the hit area, not the line height. */ p a,li a,dd a,td a,figcaption a,blockquote a,.lede a{padding-block:12px;margin-block:-12px} /* A link that opens an item in a list or a card: the link is the target for the whole row, so grow the hit area without moving the text. .inc li a 17px text, 20px box -> 44 .post-list h3 24px text, 30px box -> 50 padding-block with a matching negative margin leaves the layout alone. */ .inc li a, .post-list h3 a, .tool-links a strong, .article .body h2 a, .article .body h3 a, .timeline a, .faq summary a{padding-block:12px;margin-block:-12px;display:inline-block;max-width:100%} /* Links that carry an inline display override in the markup. */ .link-arrow[style*="inline-block"]{display:inline-flex !important} .link-arrow[style*="padding:0"]{min-height:44px} /* A bare