@font-face{font-family:Jakarta;src:url('assets/jakarta-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Jakarta;src:url('assets/jakarta-semibold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:Space;src:url('assets/space-grotesk.ttf') format('truetype');font-weight:300 700;font-display:swap}
:root{--paper:#f8faf4;--ink:#121619;--lime:#d7ff5f;--muted:#56624d;--line:#dfe5d9;--micro:180ms;--content:320ms;--composition:680ms;--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:28px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Jakarta,Arial,sans-serif;font-size:1rem;line-height:1.7}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}img{display:block;max-width:100%;height:auto}h1,h2,h3,h4,p,figure{margin:0}h1,h2,h3{font-family:Space,Jakarta,Arial,sans-serif;font-weight:500;letter-spacing:-.05em;line-height:1.1}h2{font-size:clamp(2.6rem,4.4vw,4rem)}h3{font-size:2rem}::selection{background:var(--lime);color:var(--ink)}:focus-visible{outline:3px solid #6f8d24;outline-offset:5px}.product-story :focus-visible,.goal-planner :focus-visible{outline-color:var(--lime)}.container{width:min(1240px,calc(100% - 96px));margin-inline:auto}.eyebrow{font-size:.8125rem;font-weight:600;line-height:1.5;letter-spacing:.12em}.skip-link{position:absolute;left:20px;top:-80px;background:var(--lime);color:var(--ink);padding:12px 20px;z-index:20;border-radius:6px}.skip-link:focus{top:20px}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.button{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:15px 23px;background:var(--ink);border:1px solid var(--ink);color:var(--paper);border-radius:8px;font-size:.875rem;font-weight:600;line-height:1.5;transition:background var(--micro),transform var(--micro)}.button:hover{background:#2d3a2d;transform:translateY(-2px)}.button-small{min-height:44px;padding:11px 18px}.text-link{display:inline-block;padding-block:5px;border-bottom:1px solid #8e9b81;font-size:.875rem;font-weight:600;transition:color var(--micro)}.text-link:hover{color:#516a31}.site-header{position:relative;z-index:10;background:var(--paper)}.header-inner{display:flex;align-items:center;justify-content:space-between;gap:30px;height:88px;border-bottom:1px solid var(--line)}.brand,.brand img{width:151px;flex-shrink:0}.main-nav{display:flex;gap:34px;margin:auto}.main-nav a{color:#495249;font-size:.875rem;font-weight:600;position:relative;padding-block:10px}.main-nav a::after{content:'';position:absolute;inset:auto 0 5px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform var(--micro)}.main-nav a:hover::after{transform:scaleX(1)}.menu-toggle{display:none;padding:12px;background:none;border:0;color:var(--ink)}.menu-toggle span{display:block;width:24px;height:2px;background:currentColor;margin:6px 0;transition:transform var(--micro)}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}progress{appearance:none;-webkit-appearance:none;border:0;border-radius:20px;overflow:hidden;height:8px;background:#87947630}progress::-webkit-progress-bar{background:#87947630;border-radius:20px}progress::-webkit-progress-value{background:var(--lime);border-radius:20px}progress::-moz-progress-bar{background:var(--lime);border-radius:20px}
@media(max-width:1100px){.container{width:calc(100% - 64px)}.main-nav{gap:24px}}
@media(max-width:800px){.header-inner{height:76px;gap:15px}.header-cta{display:none}.menu-toggle{display:block;margin-left:auto}.main-nav{display:none;position:absolute;left:0;right:0;top:76px;padding:20px 32px;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 15px 25px #12161908;gap:6px}.main-nav.is-open{display:flex;flex-direction:column;animation:menu-enter var(--micro) var(--ease)}.main-nav a{font-size:1rem;padding:9px 0}.main-nav a::after{display:none}.brand,.brand img{width:130px}}
@media(max-width:580px){.container{width:calc(100% - 40px)}h2{font-size:2.55rem;line-height:1.13}h3{font-size:1.75rem}}
@keyframes menu-enter{from{opacity:.4;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
