@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter.woff2?v=d2f77e75) format('woff2')}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/newsreader.woff2?v=d2f77e75) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:200 800;font-display:swap;src:url(/assets/fonts/newsreader-italic.woff2?v=d2f77e75) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/newsreader-rupee.woff2?v=d2f77e75) format('woff2');unicode-range:U+20B9}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:200 800;font-display:swap;src:url(/assets/fonts/newsreader-italic-rupee.woff2?v=d2f77e75) format('woff2');unicode-range:U+20B9}
/* Inter for text, Newsreader for headings (final look, 2026-10-26: the "without squares" home page the client chose). Both
   are self-hosted variable fonts under the SIL OFL (build/fonts/OFL-*.txt); Newsreader is Google Fonts' latin subset, and
   the rupee sign comes from its own two-glyph file so prices set in the heading face keep it. The drawings use Inter. */
*{box-sizing:border-box;margin:0;padding:0}
/* ivory and white (2026-10-19, the client's spec): --white main background, header, cards; --ivory every other section and
   the footer; --green the logo green, for button fills, the logo, small arrows, ticks and step numbers only; --ink text;
   --soft sub-lines and captions; --label the small spaced section labels; --hair dividers and card borders.
   The older names keep their places with the new values: --leaf is the ink green (#4C7535, 5.2:1 on ivory) wherever
   green is text-sized, --leaf-dark is the ink (headings are never green), --tint and --band are ivory, --rule and
   --line the hairline. --label is #766D64, a step darker than the spec's #8A8178 (3.67:1 on ivory), so 12.5 px labels
   keep AA (4.86:1). --green-fill is the logo green a hair darker (#739853, 3.31:1 under white bold 19 px text, where
   the logo green itself is 2.99:1), for solid button fills only. */
:root{--white:#FFFFFF;--ivory:#F3EEE3;--green:#4C7535;--green-fill:#4C7535;--green-ink:#4C7535;--ink:#1B1E1A;--soft:#5A5F57;--label:#4C7535;--hair:#E4E1D8;
  --leaf:#4C7535;--leaf-dark:#1B1E1A;--leaf-soft:#7BA05B;--tint:#F3EEE3;--band:#FBF9F4;--muted:#5A5F57;--rule:#E4E1D8;--control:#8C897F;
  --good:#2F5A1E;--ok:#8A5A00;--limit:#9A3324;--sans:Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
/* final look (2026-10-26, the "without squares" home page): the same names with the mock's values, and its own names
   beside them. --paper is the page (a warm cream), --cream the alternate sections (--ivory and --tint now say the same),
   --white the cards that rest on them, --mint the booking bands; --green (#4C7535, 5.3:1 on --paper) is the one accent:
   buttons, labels, the italic words in headings, ticks; --green-hover its pressed shade. --ink2 is the soft text, --line
   and --line2 the two hairlines. --serif is Newsreader, for headings. --forest, --lime, --bone and --night are the home
   page's dark green results band. */
:root{--paper:#FBF9F4;--cream:#F3EEE3;--mint:#E3ECD8;--ink2:#5A5F57;--green-hover:#3D6129;--line2:rgba(27,30,26,.3);
  --forest:#21341A;--lime:#C3DBA6;--bone:#F6F1E6;--night:#121811;--navy:#14212E;
  --serif:Newsreader,Georgia,'Times New Roman',serif}
/* design sense (2026-10-18): the navigation's shapes, depth and motion as tokens, used site-wide. Corners and shadows
   anywhere on the site come only from these (tests/design_rules.py); the nav's own deeper shadows are named here too. */
:root{--r-sm:10px;--r-md:16px;--r-lg:22px;--r-xl:28px;--r-pill:999px;
  --shadow-1:0 1px 2px rgba(20,33,46,.04),0 18px 40px -30px rgba(20,33,46,.4);
  --shadow-2:0 2px 6px rgba(20,33,46,.05),0 26px 50px -30px rgba(20,33,46,.45);
  --shadow-3:0 30px 60px -36px rgba(20,33,46,.45);
  --shadow-chip:0 16px 34px -18px rgba(20,33,46,.38);
  --glass:rgba(251,249,244,.95);--glass-filter:saturate(1.4) blur(14px);--ease:cubic-bezier(.2,.8,.2,1);--line:rgba(27,30,26,.1);
  --shadow-hair:0 1px 0 var(--rule);
  --shadow-bar:0 18px 40px -22px rgba(36,33,30,.16),0 1px 3px rgba(36,33,30,.04);
  --shadow-bar-open:0 30px 60px -34px rgba(36,33,30,.2),0 1px 0 var(--rule);
  --shadow-top:0 1px 0 var(--rule)}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-size:18px;line-height:1.65;color:var(--ink);background:#fff}
img{display:block;max-width:100%}
a{color:var(--leaf);text-underline-offset:3px}
h1,h2,h3{font-family:var(--sans);font-weight:600;line-height:1.15}
h2{font-size:38px;margin-bottom:18px}
h3{font-family:var(--sans);font-size:23px;margin:24px 0 6px;color:var(--leaf-dark)}
p+p{margin-top:14px}
ul.plain{list-style:none}
.read{max-width:720px;margin:0 auto;padding:0 20px}
.wide{max-width:1120px;margin:0 auto;padding:0 20px}
.sec{padding:80px 0;border-top:1px solid var(--rule)}
.sec.tint{background:var(--tint)}
.sec:first-child{border-top:0}
.btn{display:inline-block;background:var(--leaf);color:#fff;text-decoration:none;font-weight:600;padding:13px 26px;border-radius:6px;border:2px solid var(--leaf);font-family:inherit;font-size:17px;cursor:pointer}
.btn:hover{background:var(--leaf-dark);border-color:var(--leaf-dark)}
.btn.ghost{background:transparent;color:var(--leaf)}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.read > .btn{margin-top:22px}
.small{font-size:15px;color:var(--muted)}


/* band (clean look, 2026-10-17): a white top bar, then the page's band in a pale leaf green; one green button */
h1,h2{color:var(--leaf-dark)}
.band{background:var(--band);color:var(--ink)}
.mark{font-family:var(--sans);font-weight:700;font-size:27px;line-height:1;color:var(--leaf-dark);text-decoration:none;white-space:nowrap}
.mark small{display:block;font-family:var(--sans);font-weight:500;font-size:13px;color:var(--muted);margin-top:5px}
.hero{padding:48px 0 56px}
.hero .txt{max-width:760px}
.hero h1{font-size:50px;line-height:1.06;font-weight:700}
.hero .txt>p,.hero .txt .intro p{font-size:19px;color:var(--ink);max-width:640px;margin-top:16px}
.hero .txt p+p{margin-top:12px}
.hero.has-img{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding:40px 0}
.hero.has-img .txt{padding:8px 0;align-self:center}.hero.has-img>img,.hero.has-img>svg,.hero.has-img>figure{align-self:center}
.hero.has-img h1{font-size:54px;line-height:1.04}
.hero-img{width:100%;height:auto;aspect-ratio:4/5;max-height:600px;object-fit:cover;object-position:62% 18%;border-radius:6px}
.crumbs{font-size:15px;margin-bottom:10px;color:var(--muted)}
.crumbs a{color:var(--muted)}

/* tables */
table.facts{width:100%;border-collapse:collapse;font-size:17px;margin:6px 0 8px}
.facts th,.facts td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--rule);vertical-align:top}
.facts th{font-weight:600;color:var(--muted);font-size:15px;border-bottom:2px solid var(--rule)}
.facts td.num,.facts th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.facts tr.total td{font-weight:600;border-top:2px solid var(--rule)}
.facts .na{color:var(--muted);font-style:italic}
.facts th button{all:unset;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.tablewrap{overflow-x:auto}
.src{font-size:14px;color:var(--muted);margin-top:10px}

/* verdicts */
.verdicts{margin-top:4px}
.verdicts .row{display:grid;grid-template-columns:230px 150px 1fr;gap:6px 16px;padding:12px 0;border-bottom:1px solid var(--rule)}
.verdicts .cond{font-weight:600}
.v-good{color:var(--good);font-weight:600}
.v-ok{color:var(--ok);font-weight:600}
.v-limit{color:var(--limit);font-weight:600}
.v-neutral{color:var(--muted);font-weight:600}

/* lists of links */
.linklist{columns:3 200px;column-gap:28px;list-style:none}
.linklist li{break-inside:avoid;padding:3px 0}
.lib{list-style:none}
.lib li{padding:14px 0;border-bottom:1px solid var(--rule);color:var(--muted)}
.lib li>a:first-child{display:block;font-weight:600;font-size:19px}
.lib.inline li>a:first-child{display:inline;font-size:inherit}
.inline-links{display:flex;flex-wrap:wrap;gap:2px 16px}
.inline-links a{white-space:nowrap;line-height:2}
@media(max-width:600px){.inline-links a{white-space:normal;line-height:1.5;padding:5px 0}}
.search{width:100%;max-width:420px;font:inherit;padding:10px 12px;border:1.5px solid var(--control);border-radius:4px;margin:8px 0 18px}
.search:focus{outline:2px solid var(--leaf);outline-offset:1px;border-color:var(--leaf)}

/* proof */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px 28px;margin-top:8px}
.ba-grid img{width:100%;aspect-ratio:1920/1357;object-fit:cover;border-radius:4px}
.ba-grid figcaption{font-size:16px;color:var(--muted);margin-top:10px}
.ba-grid b{color:var(--ink)}
.quotes{columns:3 300px;column-gap:20px}
.testimonial{break-inside:avoid;margin:0 0 30px;display:grid;grid-template-columns:auto 1fr;column-gap:14px}
.testimonial img{width:52px;height:52px;border-radius:50%;object-fit:cover;grid-row:span 2}
.testimonial p{font-size:18px}
.testimonial cite{font-style:normal;font-size:15px;color:var(--muted);grid-column:2}
.testimonial .initials{width:52px;height:52px;border-radius:50%;grid-row:span 2;display:grid;place-items:center;background:var(--tint);color:var(--leaf-dark);font-family:var(--sans);font-weight:700;font-size:20px;border:1.5px solid var(--rule)}
.price{font-size:26px;font-weight:600}

/* plans */
.switch{margin:6px 0 4px;font-size:16px}
.switch b{margin-right:6px}
.switch a,.switch span{margin-right:12px;white-space:nowrap}
.switch span.on{font-weight:600;color:var(--ink)}
.grid-table td,.grid-table th{text-align:left}

/* tools */
.tool{background:var(--tint);border:1px solid var(--rule);border-radius:6px;padding:24px;margin-top:6px}
.tool label{display:block;font-weight:600;font-size:16px;margin:12px 0 4px}
.tool input,.tool select{font:inherit;width:100%;max-width:280px;padding:9px 11px;border:1.5px solid var(--control);border-radius:4px;background:#fff;color:var(--ink)}
.tool input:focus,.tool select:focus{outline:2px solid var(--leaf);outline-offset:1px;border-color:var(--leaf)}
.tool .row2{display:flex;gap:16px;flex-wrap:wrap}
.tool .row2>div{flex:1;min-width:130px}
.tool .err{color:var(--limit);font-size:15px;min-height:1.4em;margin-top:6px}
.result{margin-top:18px;padding-top:16px;border-top:1px solid var(--rule);min-height:3em}
.result .big{font-family:var(--sans);font-size:44px;font-weight:700;line-height:1.1}
.thali-row{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-bottom:8px}
.thali-row select{max-width:320px}
.thali-row input{max-width:110px}
.linkbtn{all:unset;color:var(--leaf);text-decoration:underline;cursor:pointer;font-size:16px}

/* glossary */
.def{font-family:var(--sans);font-size:24px;line-height:1.4}
.az{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:18px;font-weight:600;margin-bottom:10px}

/* closing + footer */
.closing{background:var(--leaf);color:#F1F4EA;border:0}
.closing h2{font-size:40px}
.closing h2{color:#fff}
.closing a{color:#fff}
.closing .btn{background:#fff;color:var(--leaf);border-color:#fff}
.closing .btn.ghost{background:transparent;color:#fff;border-color:#fff}
footer{background:var(--leaf-dark);color:#C9D3BC;font-size:15px;padding:44px 0 90px}
footer a{color:#E4EBD9;text-decoration:none}
footer a:hover{text-decoration:underline}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px;line-height:1.9}
.foot b{color:#fff}
.fine{grid-column:1/-1;border-top:1px solid #45603A;padding-top:14px;font-size:13px}
.stickybar{display:none}

@media(min-width:761px){footer{padding-bottom:44px}}
@media(max-width:860px){
  .hero.has-img{grid-template-columns:1fr}
  .hero h1,.hero.has-img h1{font-size:38px}
  .hero-img{height:360px}
  .verdicts .row{grid-template-columns:1fr 1fr}
  .verdicts .row .why{grid-column:1/-1}
}
@media(max-width:760px){
  h2{font-size:28px}
  .sec{padding:48px 0}
  .ba-grid{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr}
  .stickybar{display:block;position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--rule);padding:10px 12px;z-index:10}
  .stickybar .btn{display:block;text-align:center}
}

/* kitchen elements (spec 5.2a) */
/* clean look: no tile strip or steel rule; the notebook is a quiet tinted note in the page's own type */
.tiles,.steel{display:none}
i.spice{display:inline-block;width:13px;height:13px;border-radius:50%;margin-right:8px;vertical-align:-1px;border:1px solid rgba(31,42,27,.3);box-sizing:border-box}
.notebook{position:relative;background:var(--tint);border-left:3px solid var(--leaf);border-radius:0 6px 6px 0;padding:18px 22px;margin:8px 0}
.notebook .tape{display:none}
.notebook p,.notebook li{font-size:18px;line-height:1.6;color:var(--ink);margin:0}
.notebook p+p{margin-top:8px}
.notebook .nb-title{font-weight:600;color:var(--leaf-dark)}
.notebook a{color:var(--leaf)}
.meals{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px}
.meal-card h3{margin:0 0 6px;font-family:var(--sans);font-size:24px}
.meal-card h3 span{font-family:var(--sans);font-size:16px;color:var(--muted);font-weight:400}
svg.thali{width:100%;max-width:340px;height:auto;display:block;margin:4px auto 8px}
svg.thali.small{max-width:230px}
.meal-card ul{list-style:none}
.meal-card li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--rule);font-size:16px}
.daytotal{margin-top:22px;font-size:20px;font-weight:600}
.read h2:not(:first-child),.wide h2:not(:first-child){margin-top:40px}
.read .notebook + h2{margin-top:44px}

/* ================= motion (spec 5.2b, second pass: no generic fades) ================= */
@view-transition{navigation:auto}
.band h1{view-transition-name:page-title}
.mark{view-transition-name:mark}
/* clean look: no page wipe between pages */
.lid-cover{display:none}
::view-transition-group(page-title){animation-duration:.3s;animation-timing-function:cubic-bezier(.7,0,.3,1)}

/* sketch thalis: ink draws itself, then the colour washes in, then the labels */
.meal-card,.hscroll .panel:not(.lead){background:#fff}
svg.thali{max-width:100%;width:100%}
svg.thali.small{max-width:78%}
.js svg.thali .ink,.js svg.thali .arrow{stroke-dasharray:1;stroke-dashoffset:1}
.js svg.thali .wash,.js svg.thali .lbl,.js svg.thali .ti circle,.js svg.thali .ti ellipse{opacity:0}
.js svg.thali.in .ink{animation:ink 1.1s cubic-bezier(.6,.05,.3,1) forwards;animation-delay:calc(var(--i,0) * 160ms)}
.js svg.thali.in > .ink{animation-delay:0s}
.js svg.thali.in .wash{animation:wash .9s ease forwards;animation-delay:calc(var(--i,0) * 160ms + .7s)}
.js svg.thali.in .ti circle,.js svg.thali.in .ti ellipse{animation:wash .5s ease forwards;animation-delay:calc(var(--i,0) * 160ms + 1s)}
.js svg.thali.in .arrow{animation:ink .6s ease forwards;animation-delay:calc(var(--i,0) * 120ms + 1.3s)}
.js svg.thali.in .lbl{animation:wash .5s ease forwards;animation-delay:calc(var(--i,0) * 120ms + 1.5s)}
@keyframes ink{to{stroke-dashoffset:0}}
@keyframes wash{to{opacity:var(--o,1)}}
svg.thali .wash{--o:.75}
svg .steam path{opacity:0;animation:steam 3.6s ease-in infinite}
svg .steam path:nth-child(2){animation-delay:1.2s}svg .steam path:nth-child(3){animation-delay:2.4s}
@keyframes steam{0%{opacity:0;transform:translateY(4px)}30%{opacity:.55}100%{opacity:0;transform:translateY(-26px)}}


/* spice sprinkle on verdict rows */
.js .verdicts .row i.spice{transform:translateY(-40px) scale(.4);opacity:0}
.js .verdicts .row.in i.spice{animation:sprinkle .7s cubic-bezier(.5,0,.2,1.4) forwards;animation-delay:calc(var(--i,0) * 120ms + .1s)}
@keyframes sprinkle{to{transform:none;opacity:1}}

/* nutrients pour into katoris */
.katoris{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:14px 10px;margin:10px 0 6px}
.katoris figure{margin:0;text-align:center;font-size:14px}
.katoris svg{width:96px;height:auto;display:block;margin:0 auto 4px}
.katoris b{display:block;font-size:17px}
.js .katoris .fill{transform:scaleY(0);transform-box:fill-box;transform-origin:50% 100%}
.js .katoris.in .fill{animation:pour 1.3s cubic-bezier(.45,0,.15,1) forwards;animation-delay:calc(var(--i,0) * 140ms + .2s)}
@keyframes pour{to{transform:scaleY(1)}}
.js .katoris .stream{opacity:0}
.js .katoris.in .stream{animation:stream 1.3s ease forwards;animation-delay:calc(var(--i,0) * 140ms + .1s)}
@keyframes stream{10%{opacity:.9}80%{opacity:.9}100%{opacity:0}}

/* video */
figure.vid{position:relative;margin:0;overflow:hidden;border-radius:6px;background:#2A2620}
figure.vid video{display:block;width:100%;height:100%;object-fit:cover}
figure.vid figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 18px;color:#fff;font-size:14px;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.vid-band{position:relative;height:72vh;min-height:420px;max-height:720px;overflow:hidden;color:#fff;border-radius:0;background:#2A2620}
.vid-band video{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;will-change:transform}
.vid-band .over{position:relative;z-index:1;height:100%;display:flex;align-items:flex-end;padding-bottom:56px;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.6))}
.vid-band h2{color:#fff;font-size:48px;max-width:720px;line-height:1.05}
.vid-band p{max-width:560px;font-size:19px;color:#f3ead6}
.vid-bg{position:relative;overflow:hidden}
.vid-bg>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32}
.vid-bg>.read,.vid-bg>.wide{position:relative;z-index:1}
.closing.vid-bg>video{opacity:.22}
.side-vid{display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:center}
.side-vid figure.vid{aspect-ratio:9/12}
.media-head{height:260px;margin-bottom:8px}

/* sideways day: sticky horizontal scroll on desktop; a time line down the screen on phones */
.hscroll{position:relative}
.hscroll .pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.hscroll .track{display:flex;gap:36px;padding:0 max(20px,calc((100vw - 1120px)/2));will-change:transform}
.hscroll .panel{flex:0 0 380px;background:#fff;border:1px solid var(--rule);border-radius:6px;padding:20px}
.hscroll .panel.lead{flex-basis:520px;background:transparent;border:0;padding:0}
.hscroll .panel h3{margin:0 0 4px;font-family:var(--sans);font-size:26px}
.hscroll .panel h3 span{font-family:var(--sans);font-size:15px;color:var(--muted);font-weight:400}
.hscroll .progress{height:4px;background:var(--rule);margin:26px max(20px,calc((100vw - 1120px)/2)) 0;border-radius:2px;overflow:hidden}
.hscroll .progress i{display:block;height:100%;width:0;background:var(--leaf)}
.hscroll .track{align-items:flex-start}.hscroll .lead-m{display:none}
/* phones and small tablets: the same day reads DOWN the screen, a meal per row on a haldi time line (mobile flow),
   so scrolling still moves the day along, as the pinned sideways scroll does on a computer */
@media (max-width:860px){.hscroll{height:auto!important}.hscroll .lead-m{display:block;padding:44px 20px 0;max-width:720px;margin:0 auto}
  .hscroll .pin{position:static;height:auto;padding:16px 0 40px}
  .hscroll .track{display:block;transform:none!important;max-width:720px;margin:0 auto;padding:0 20px 0 44px;position:relative}
  .hscroll .track:before{content:"";position:absolute;left:27px;top:18px;bottom:24px;width:3px;border-radius:2px;background:var(--leaf)}
  .hscroll .panel{position:relative;display:grid;grid-template-columns:96px 1fr;column-gap:14px;align-items:start;margin:0 0 12px;padding:12px 14px}
  .hscroll .panel:before{content:"";position:absolute;left:-23px;top:18px;width:11px;height:11px;border-radius:50%;background:#fff;border:3px solid var(--leaf)}
  .hscroll .panel h3{grid-column:1/-1;font-size:22px;margin:0 0 6px}
  .hscroll .panel svg.thali,.hscroll .panel svg.thali.small{grid-column:1;width:96px;max-width:96px;margin:0}
  .hscroll .panel svg.thali .lbl,.hscroll .panel svg.thali .arrow{display:none}
  .hscroll .panel ul{grid-column:2;list-style:none;margin:0;padding:0}
  .hscroll .panel li{display:flex;justify-content:space-between;gap:8px;padding:5px 0;border-top:1px solid var(--rule);font-size:15px;line-height:1.35}
  .hscroll .panel li:first-child{border-top:0;padding-top:0}
  .hscroll .panel li .kc{white-space:nowrap;color:var(--muted)}
  .hscroll .panel.lead{display:none}.hscroll .progress{display:none}}

/* swipe strips (testimonials, shelves) */
.strip{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px max(20px,calc((100vw - 1120px)/2)) 18px;scroll-padding-inline:max(20px,calc((100vw - 1120px)/2));scrollbar-width:thin;cursor:grab;align-items:flex-start}
.strip.drag{cursor:grabbing;scroll-snap-type:none}
.strip>*{flex:0 0 340px;scroll-snap-align:start}
.strip .testimonial{background:#fff;border:1px solid var(--rule);border-radius:6px;padding:18px;margin:0}
.strip-nav{display:flex;gap:10px;justify-content:flex-end;max-width:1120px;margin:0 auto;padding:0 20px}
.strip-nav button{font:600 15px var(--sans);border:1.5px solid var(--leaf);background:#fff;color:var(--leaf);border-radius:4px;padding:6px 14px;cursor:pointer}
.strip-count{display:none}  /* phones only (phone.css): "3 of 10" */
.row-nav{display:none}  /* phone.js adds it under a sideways row on phones only */

@media (max-width:760px){.vid-band h2{font-size:34px}.side-vid{grid-template-columns:1fr}.side-vid figure.vid{aspect-ratio:4/3}}
@media (prefers-reduced-motion: reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .js svg.thali .ink,.js svg.thali .arrow{stroke-dashoffset:0!important}
  .js svg.thali .wash,.js svg.thali .lbl,.js svg.thali .ti circle,.js svg.thali .ti ellipse,.js svg.dabba .bowl,.js .verdicts .row i.spice,.js .notebook .tape{opacity:1!important;transform:none!important}
  .js .notebook p{clip-path:none!important}.js svg.dabba .lid{display:none}.js .katoris .fill{transform:none!important}.spice-trail{display:none}
  svg .steam{display:none}.hscroll .track{transform:none!important}
}

/* foods hub grid + food heroes */
.ffilters{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:flex-end;margin-bottom:6px}
.ffilters label{display:flex;flex-direction:column;font-size:14px;font-weight:600;color:var(--muted)}
.ffilters select,.ffilters .search{font:inherit;font-weight:400;color:var(--ink);padding:9px 11px;border:1.5px solid var(--control);border-radius:4px;background:#fff;margin:4px 0 0;max-width:260px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:22px 18px;margin-top:10px}
.fcard{display:block;text-decoration:none;color:var(--ink)}
.fcard[hidden]{display:none}  /* .fcard's display:block would otherwise beat the hidden attribute */
.fcard img,.fcard svg.food-sketch{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;display:block;background:#fff}
.fcard .fname{display:block;font-weight:600;margin-top:8px;line-height:1.3}
.fcard .fmeta{display:block;font-size:14px;color:var(--muted)}
.fcard .fmeta i.spice{width:9px;height:9px;margin:0 0 0 4px}
.fcard:hover .fname{text-decoration:underline;text-underline-offset:3px}
.hero-img[src^="/assets/foods/"]{height:380px;border-radius:6px;margin-bottom:44px;align-self:center}
.hero.has-img svg.food-sketch{width:100%;max-width:420px;margin:0 0 30px auto;background:#fff;border-radius:4px}
@media(max-width:860px){.hero-img[src^="/assets/foods/"]{height:240px;margin-bottom:24px}.fgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}
/* D8 (design lane): every food photo gets the same corners and a hairline ring, so photos from different sources sit together */
.fcard img,.hero-img[src^="/assets/foods/"],.fcard .fblank{border-radius:6px;outline:1px solid rgba(42,38,32,.12);outline-offset:-1px}
@media(min-width:861px){.hero.has-img>.hero-img[src^="/assets/foods/"]{max-width:460px;justify-self:end}}

/* foods + glossary pass */
.katoris{grid-template-columns:repeat(6,1fr);gap:14px 6px}
.katoris svg{width:100%;max-width:96px}
.closing .btn{margin-top:22px}
.goalkey{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:center;font-size:15px;margin:10px 0 4px}
.goalkey>span:first-child{color:var(--muted)}
.goalkey .gk{white-space:nowrap}
.fcard .fdots{white-space:nowrap}
.verdicts .cond .dots{display:inline-flex;gap:3px;margin-right:8px;vertical-align:baseline}
.verdicts .cond .dots i.spice{margin-right:0}
table.vtable td.num,table.vtable th.num{white-space:normal}
table.rules td,table.rules th{font-size:16px}
table.rules td:first-child{white-space:nowrap}
table.rules i.spice{margin-right:6px}
svg.fatbar{display:block;width:100%;max-width:520px;height:auto;margin:6px 0 4px}
.fatkey{list-style:none;font-size:15px;color:var(--muted);margin:0 0 18px}
.fatkey li{padding:2px 0}
.fatkey i{display:inline-block;width:12px;height:12px;border-radius:2px;margin-right:8px;opacity:.85}
.fatkey b{color:var(--ink)}
.az{position:sticky;top:0;z-index:5;background:#fff;padding:10px 0;margin-bottom:6px;border-bottom:1px solid var(--rule)}
.gfilter{margin:0 0 6px}
.gletter{scroll-margin-top:70px}
.gterms{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:4px 32px;margin-bottom:8px}
.gterms a{display:block;padding:8px 0;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--rule)}
.gterms a b{color:var(--leaf);text-decoration:underline;text-underline-offset:3px}
.gterms .gmean{display:block;font-size:15px;color:var(--muted);line-height:1.45}
@media(max-width:600px){
  .katoris{grid-template-columns:repeat(3,1fr)}
  .fcard .fdots{display:block;margin-top:2px}
  .fcard .fmeta i.spice{margin:0 4px 0 0}
  table.vtable{font-size:15px}
  table.vtable th,table.vtable td{padding:8px 5px}
  table.rules tr:first-child{display:none}
  table.rules tr{display:block;padding:10px 0;border-bottom:1px solid var(--rule)}
  table.rules td{display:block;border:0;padding:3px 0}
  table.rules td:nth-child(2)::before{content:"Good choice when: ";font-weight:600;color:var(--good)}
  table.rules td:nth-child(3)::before{content:"Limit when: ";font-weight:600;color:var(--limit)}
  .gterms{grid-template-columns:1fr}
  .az{font-size:16px;gap:4px 10px}
}

/* plans + tools pass */
.meals{align-items:start}
.meal-card li span.kc{white-space:nowrap;flex:none}
.goal-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr));gap:20px;margin-top:8px}
.goal-card{background:#fff;border:1px solid var(--rule);border-radius:6px;padding:16px 18px 10px}
.goal-card h3{margin:0 0 8px;font-family:var(--sans);font-size:24px}
.diet-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--rule);font-size:16px}
.chips{display:flex;gap:6px;flex:none}
.diet-row>span:first-child{min-width:0;line-height:1.25}
a.chip{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:54px;min-height:40px;padding:5px 8px;border:1.5px solid var(--leaf);border-radius:6px;font-weight:600;font-size:15px;line-height:1.15;color:var(--leaf);text-decoration:none;background:#fff;white-space:nowrap}
a.chip:hover,a.chip:focus-visible{background:var(--leaf);color:#fff}
a.chip small{font-weight:400;font-size:12.5px;opacity:.85}
.diet-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.diet-group{background:#fff;border:1px solid var(--rule);border-radius:6px;padding:16px 18px}
.diet-group h2{font-size:26px;margin:0 0 6px}
.diet-group p{font-size:15.5px;color:var(--muted);margin:0 0 12px}
.diet-group .chips{flex-direction:column}
.diet-group a.chip{flex-direction:row;justify-content:space-between;border-radius:6px;padding:8px 14px;font-size:16px}
.diet-group a.chip small{font-size:14px}
.tool .row2>.hgt{flex:1 1 250px}
.tool .hunit{border:0;padding:0;margin:12px 0 6px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.tool .hunit legend{font-weight:600;font-size:16px;padding:0;margin-bottom:4px;float:left;margin-right:6px}
.tool .hunit label{display:inline-flex;align-items:center;gap:6px;margin:0;font-weight:400;font-size:15px;cursor:pointer}
.tool .hunit input{width:20px;height:20px;margin:0;accent-color:var(--leaf)}
.tool .hunit label{min-height:32px}
.tool .pair{display:inline-flex;align-items:center;gap:6px;margin-right:12px}
.tool .pair input{width:76px;box-sizing:border-box}
.tool .pair span{color:var(--muted)}
.tool .row2>.gfield{flex:1 1 250px}
.tool .gunit{border:0;padding:0;margin:0 0 6px;display:flex;flex-wrap:wrap;align-items:center;gap:0 14px}
.tool .gunit legend{font-weight:600;font-size:16px;padding:0;margin-bottom:2px;float:left;margin-right:6px}
.tool .gunit label{display:inline-flex;align-items:center;gap:6px;margin:0;font-weight:400;font-size:15px;cursor:pointer;min-height:44px}
.tool .gunit input{width:20px;height:20px;margin:0;accent-color:var(--leaf)}
.result .example{font-size:15px;color:var(--muted);background:#fff;border-left:3px solid var(--leaf);padding:6px 10px;margin-bottom:10px}
.result.is-example .big{color:var(--muted)}
svg.scale{display:block;width:100%;max-width:460px;height:auto;margin-top:12px}
.thali-row .amt span{display:flex;gap:6px}
.thali-row .amt input{max-width:90px}
.thali-row .amt select{max-width:170px}
.thali-row .remove{align-self:end;padding:10px 4px;color:var(--limit)}
.credits .credit-list{columns:3 140px;column-gap:22px;margin:4px 0 22px;font-size:15px;line-height:1.35}
.credits .credit-list li{padding:3px 0}
.thali-row{padding-bottom:10px;border-bottom:1px solid var(--rule)}

.byline{font-size:14px;color:var(--muted);padding-top:18px}

/* Task 5: heading levels without a visual change */
.goal-card h2{margin:0 0 8px;font-family:var(--sans);font-size:24px}
p.h2{font-family:var(--sans);font-weight:600;line-height:1.15;font-size:34px;margin-bottom:16px}
@media (max-width:760px){p.h2{font-size:28px}}

/* phone edition (phone.css, loaded under 760px): phone-only pieces stay out of the desktop layout */
.ph{display:none}

/* ===== clean look (2026-10-17): green and white, serif headings over Hind, a home page built around booking ===== */
.hero.home{grid-template-columns:1.05fr .95fr;gap:56px;padding:56px 0 64px}
.hero.home h1{font-size:58px;line-height:1.03}
.hero.home .txt>p{font-size:21px;line-height:1.55;max-width:560px}
.hero.home .ctas{margin-top:30px}
.hero.home .btn{font-size:18px;padding:15px 30px}
.hero.home .hero-img{max-height:620px;object-position:64% 24%}
.ctas.center{justify-content:center;margin-top:40px}
.sec.proof{padding:36px 0;border-top:0}
ul.stats{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center}
ul.stats li{padding:6px 10px}
ul.stats li+li{border-left:1px solid var(--rule)}
ul.stats a{text-decoration:none;color:inherit;display:block}
ul.stats b{display:block;font:700 46px/1.05 var(--sans);color:var(--leaf)}
ul.stats span{display:block;font-size:16px;color:var(--muted);margin-top:4px}
ul.stats a:hover span{text-decoration:underline;text-underline-offset:3px}
.helpcards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:8px}
.helpcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--rule);border-radius:6px;padding:22px 22px 20px;text-decoration:none;color:var(--ink);transition:border-color .2s}
.helpcard:hover{border-color:var(--leaf-soft)}
.helpcard h3{margin:0 0 10px;font-size:24px;display:flex;align-items:center;gap:10px}
.helpcard h3 i.spice{margin:0;flex:none}
.helpcard p{font-size:16px;line-height:1.55;color:var(--muted)}
.helpcard .go{margin-top:auto;padding-top:14px;font-weight:600;color:var(--leaf)}
.helpmore{margin-top:22px}
ol.pts.steps.how3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:12px}
ol.pts.steps.how3 li,ol.pts.steps.how3 li:last-child{border:0;padding:52px 0 0;font-size:17px;color:var(--muted)}
ol.pts.steps.how3 li::before{top:0;left:0;width:38px;height:38px;font:700 20px/38px var(--sans)}
ol.pts.steps.how3 li b{color:var(--ink);font-size:19px;margin-bottom:6px}
.pricebox{background:#fff;border:1px solid var(--rule);border-radius:6px;padding:34px 36px 30px;text-align:left}
.pricebox h2{margin-top:0}
.pricebox .price{font:700 34px/1.15 var(--sans);color:var(--leaf-dark);margin-bottom:10px}
.pricebox .btn{margin-top:22px}
.pricebox a.quiet{margin-left:16px;white-space:nowrap}
.closing.big{padding:96px 0;text-align:center}
.closing.big h2{font-size:46px}
.closing.big .ctas{justify-content:center}
.closing.big .read{margin:0 auto}
.quotes3 .testimonial{border-radius:6px;padding:22px}
.goalcard,.quals li,.pricecard,.goal-card,.diet-group,.tool,.glance,.toc,.quotes3 .testimonial,.strip .testimonial{border-radius:6px}
.ba-grid img{border-radius:6px}
@media(max-width:1100px){.helpcards{grid-template-columns:1fr 1fr}}
@media(max-width:860px){.hero.home{grid-template-columns:1fr}.hero.home h1{font-size:40px}}
.band{border-bottom:1px solid var(--rule)}

/* print: a diet chart that comes off the printer as one clean page. Phone chrome, motion, navigation and buttons stay on screen. */
@media print{
  @page{margin:11mm 12mm}
  html,body{background:#fff;color:#000;font-size:11pt;line-height:1.4}
  body{padding:0}
  .lid-cover,.tiles,.steel,.pbar,nav.top,.navscrim,.stickybar,.sbar,.bookband,.scrim,.sheet,.menu,footer,.hero-img,.crumbs,.vid,.vid-band,video,
  .btn,.ctas,.switch,.closing,.byline,.wa-note,.kcal-help{display:none!important}
  .band,.hero,.hero.has-img{display:block;background:none;padding:0;color:#000}
  .band .wide,.wide,.read{max-width:none;padding:0}
  .hero h1{font-size:22pt;margin:0 0 4pt}
  .hero .txt>p,.hero .txt .intro p{font-size:10.5pt;margin:0 0 2pt;max-width:none;color:#000}
  .sec,.sec.tint{padding:6pt 0;border:0;background:none}.hero .txt{padding:0}.hero{padding:0!important}.band{padding:0}
  .sec h2{font-size:15pt;margin:2pt 0 6pt}
  .meals{display:block;font-size:0}
  .meal-card{display:inline-block;vertical-align:top;width:calc(50% - 8pt);margin:0 16pt 8pt 0;font-size:11pt;box-sizing:border-box;break-inside:avoid;background:none!important;border:1px solid #bbb;border-radius:4px;padding:8pt}
  .meal-card:nth-child(2n){margin-right:0}
  .meal-card h3{font-size:13pt;margin:0 0 2pt}
  .meal-card h3 span{font-size:9.5pt}
  svg.thali,svg.thali.small{max-width:92pt;margin:0 auto 0;print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .meal-card li{font-size:10pt;padding:2pt 0}
  .daytotal{font-size:13pt;margin-top:8pt}
  table.facts{break-inside:avoid;font-size:10pt}
  .read p,.src{font-size:10pt}
  /* drawings print finished: the scroll-in animations never ran on paper (same end state as prefers-reduced-motion) */
  *,*:before,*:after{animation:none!important;transition:none!important;box-shadow:none!important}
  .js svg.thali .ink,.js svg.thali .arrow,.js svg.dabba .arrow{stroke-dashoffset:0!important}
  .js svg.thali .wash,.js svg.thali .lbl,.js svg.thali .ti circle,.js svg.thali .ti ellipse,.js svg.dabba .arrow,.js svg.dabba .lbl,.js svg.dabba .bowl,.js .verdicts .row i.spice,.js .notebook .tape{opacity:1!important;transform:none!important}
  .js .notebook p{clip-path:none!important}.js svg.dabba .lid{display:none}.js .katoris .fill{transform:none!important}.spice-trail,svg .steam{display:none!important}
  a{color:#000;text-decoration:none}
  main:after{content:"Puja Nayyar, nutritionist, New Delhi. theposhanlabs.com";display:block;margin-top:14pt;padding-top:6pt;border-top:1px solid #999;font-size:10pt}
}

/* lane C: food page notes (R6) */
.notes{margin:10px 0 0 22px}.notes li+li{margin-top:8px}

/* lane C: glossary hub, read your report (R11) */
.report-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0 28px;margin-top:6px}
.report-groups h3{margin:18px 0 2px}

/* eat-and-avoid: the full list, one closed group at a time (ruling R2) */
details.grp{border-top:1px solid var(--rule)}
details.grp:last-of-type{border-bottom:1px solid var(--rule)}
details.grp summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:16px;padding:12px 0;list-style:none;font-weight:600;font-size:19px;color:var(--leaf)}
details.grp summary::-webkit-details-marker{display:none}
details.grp summary::after{content:"";flex:none;margin:0 6px 0 auto;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s}
details.grp[open] summary::after{transform:rotate(-135deg)}
details.grp .tally{display:block;font-weight:400;font-size:15px;line-height:1.4;color:var(--muted)}
/* eat-and-avoid: both short lists by name only, side by side on desktop */
.ea-glance{display:grid;grid-template-columns:1fr 1fr;gap:8px 32px;margin:4px 0 32px}
.ea-glance h3{margin-top:0}
ul.ea-names{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
ul.ea-names li{font-size:16px;line-height:1.5}
ul.ea-names li:not(:last-child)::after{content:"\00B7";margin-left:8px;color:var(--muted)}
ul.ea-names-build li{color:var(--good)}
ul.ea-names-keep li{color:var(--limit)}
@media(max-width:600px){.ea-glance{grid-template-columns:1fr;gap:20px}}

/* group hubs: one compact table, per serving first (ruling R12) */
table.compact td .fdots{white-space:nowrap;margin-left:4px}
table.compact td .small{color:var(--muted)}

/* foods hub: the less-common-foods tick sits on one line and is a full tap target (rulings R4, R17) */
.ffilters label.check{flex-direction:row;align-items:center;gap:8px;min-height:44px;grid-column:1/-1;cursor:pointer}
.ffilters label.check input{width:20px;height:20px;margin:0;accent-color:var(--leaf)}
.foodguides{margin-bottom:18px}.foodguides p+p{margin-top:6px}

/* a day as rows (goal hubs, program pages) */
.day-list{list-style:none;margin:6px 0 0;padding:0}
.day-list li{display:grid;grid-template-columns:4.6em 1fr auto;gap:2px 10px;padding:7px 0;border-bottom:1px solid var(--rule);font-size:16px}
.day-list .t{color:var(--muted);font-size:14px;grid-row:span 2}
.day-list .s{font-weight:600}
.day-list .w{grid-column:2}
.day-list .kc{grid-column:3;grid-row:1;white-space:nowrap;color:var(--muted);font-size:15px}
.sample-day .daytotal{font-size:18px;margin-top:10px}
.note{background:var(--tint);border-left:3px solid var(--leaf);padding:8px 12px;margin:12px 0;font-size:16px}
@media print{
  .day-list li{font-size:9.5pt;padding:1pt 0}
  .switch-hint{display:none}
}

/* tool pages (lane B3): one next step under the answer */
.result .next{margin-top:10px;font-weight:600}

/* tool pages (lane B3): a compact band, and the answer above the boxes (first in the HTML too), so it is in the first screen */
.hero.compact{padding:14px 0 18px}
.hero.compact h1{font-size:38px}
.hero.compact .txt>p{font-size:17px;margin-top:8px}
form.tool .result{margin:0 0 8px;padding:0 0 8px;border-top:0;border-bottom:1px solid var(--rule)}

/* tool pages (lane B3, fix round 1): the example answer leaves out its scale, and the form sits close under the byline */
.result.is-example .scale{display:none}
.sec.tool-sec{padding-top:12px}
.tool-sec .tool{padding-top:16px}
.hero.compact .txt,.hero.compact .txt>p{max-width:900px}
.result.is-example>p:not(.big):not(.example){font-size:16px;line-height:1.5;color:var(--muted)}
.result.is-example .example{margin-bottom:6px}
.result.is-example .big{font-size:36px}

/* technical lane (T5, T7, T4, T10): keyboard focus, skip link, video pause button, hub card photos */
.skip{position:absolute;left:12px;top:-80px;z-index:200;background:var(--leaf-dark);color:#fff;padding:10px 16px;border-radius:4px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--leaf);outline-offset:2px}
.linkbtn:focus-visible,.facts th button:focus-visible{outline:2px solid var(--leaf);outline-offset:2px;border-radius:2px}
.band :focus-visible{outline-color:var(--ink)}
.closing :focus-visible,footer :focus-visible,.vid-band :focus-visible,.vid-toggle:focus-visible{outline-color:#fff}
.vid-toggle{position:absolute;right:12px;bottom:12px;z-index:2;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:rgba(31,42,27,.72);color:#fff;cursor:pointer}
.vid-toggle svg{width:16px;height:16px;fill:currentColor}
.vid-toggle:hover{background:rgba(31,42,27,.92)}
.fcard img{height:auto}
/* T14: the searched words as a small first line of the H1 */
h1 .eyebrow{display:block;font-family:var(--sans);font-size:15px;font-weight:600;line-height:1.4;margin-bottom:10px;color:var(--leaf)}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* calculators (one-shot UX lane): the tape unit switch mirrors the height one; a Show button so Enter works; a quiet live region */
.tool .tunit-wrap{flex:1 1 100%}
.tool .tunit{border:0;padding:0;margin:12px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:0 14px}
.tool .tunit legend{font-weight:600;font-size:16px;padding:0;float:left;margin-right:6px}
.tool .tunit label{display:inline-flex;align-items:center;gap:6px;margin:0;font-weight:400;font-size:15px;cursor:pointer;min-height:44px}
.tool .tunit input{width:20px;height:20px;margin:0;accent-color:var(--leaf)}
.tool .btn.go{margin-top:6px;padding:10px 20px;font-size:16px}
.tool .row2 .small{font-size:14px;margin-top:4px;font-weight:400}
.result .prompt{font-size:17px;color:var(--muted);padding:6px 0}
.tool-note{margin-top:10px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* WhatsApp cues (U9): every button that opens WhatsApp carries a chat-bubble mark, and a line under each pair says so and
   gives the number for anyone who would rather call */
a.btn[href^="https://wa.me/"]::before,a.cta[href^="https://wa.me/"]::before{content:"";display:inline-block;width:1.05em;height:1.05em;margin-right:.45em;vertical-align:-.18em;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8a9.2 9.2 0 0 0-7.9 13.9L2.8 21.2l4.6-1.2A9.2 9.2 0 1 0 12 2.8z' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8a9.2 9.2 0 0 0-7.9 13.9L2.8 21.2l4.6-1.2A9.2 9.2 0 1 0 12 2.8z' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.wa-note{font-size:15px;color:var(--muted);margin-top:10px}
.hero .wa-note{color:var(--muted)}.hero .wa-note a{color:var(--muted)}
.closing .wa-note{color:#E4EBD9}
.wa-note a{white-space:nowrap}

/* U30: each goal's dot has its own shape as well as its colour (PCOS a square, diabetes a diamond), so red and brown are
   never the only difference; food cards say their numbers are per 100 g */
i.spice[title="PCOS"]{border-radius:2px}
i.spice[title="diabetes"]{border-radius:0;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);width:15px;height:15px;vertical-align:-2px}
.fcard .fmeta i.spice[title="diabetes"]{width:11px;height:11px}
.fcard .per{white-space:nowrap}
.dishhint{margin:4px 0 10px}
.nofood{margin:6px 0 14px;font-size:17px}
.compare-line{margin-top:14px}
/* T23: no smooth scrolling for anyone who asked for less motion */
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

/* ================= design lane (one-shot audit, D findings) ================= */
/* D1: from 1100 px the reading column starts on the same left edge as the band, the nav and the footer (.wide) */
@media(min-width:1100px){.read{margin-left:max(0px,calc((100% - 1120px)/2));margin-right:auto}}
/* D2: without motion (reduced motion, or no script) the sideways day is a plain sideways scroll, never clipped (computers; phones read the day down the screen either way) */
@media (min-width:861px){
html:not(.js) .hscroll{height:auto!important}
html:not(.js) .hscroll .pin{position:static;height:auto;overflow:visible;padding:56px 0 28px}
html:not(.js) .hscroll .track{overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:max(20px,calc((100vw - 1120px)/2));transform:none!important;padding-bottom:14px;scrollbar-width:thin}
html:not(.js) .hscroll .panel{scroll-snap-align:start}
html:not(.js) .hscroll .progress{display:none}}
/* D5: white words on a video poster always sit on a dark wash */
.vid-band .over{background:linear-gradient(180deg,rgba(0,0,0,.08) 15%,rgba(0,0,0,.38) 50%,rgba(0,0,0,.72))}
.vid-band h2,.vid-band p{text-shadow:0 1px 12px rgba(0,0,0,.35)}
.vid-band .over>.wide{width:100%}  /* D1: the band's words start on the grid's left edge, not centred as a shrunk flex item */
figure.vid figcaption{padding-top:40px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.4) 40%,rgba(0,0,0,.7))}
/* D16: where a number comes from USDA, a small cream pill, not a stray ", USDA" */
.src-tag{display:inline-block;margin-left:7px;padding:0 7px;border:1px solid var(--rule);border-radius:6px;background:var(--tint);
  color:var(--muted);font:500 12px/1.6 var(--sans);vertical-align:3px;text-decoration:none;white-space:nowrap}
/* D15: group hubs: "One serving" and "Per 100 g" sit over their own short columns; column names never wrap */
table.compact th button{white-space:nowrap}
table.compact tr.grouphead th{border-bottom:1px solid var(--rule);padding-bottom:4px}
table.compact tr.grouphead th.span{text-align:center;font-size:14px;color:var(--muted)}
table.compact tr.grouphead th.span+th.span{border-left:1px solid var(--rule)}
table.compact th.foodcol{vertical-align:bottom}
/* D14: a food's name is the headline; "Nutrition and who it suits" is a smaller line under it */
h1 .h1sub{display:block;margin-top:8px;font-size:.5em;font-weight:600;line-height:1.2;color:var(--muted)}
h1 .h1sub .colon{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* D7: a food with no photo gets a compact band and an "at a glance" card where the photo would be */
@media(min-width:861px){.hero.has-img:has(>.glance){align-items:start;padding:40px 0 44px}.hero.has-img:has(>.glance) .txt{padding:6px 0 0}}
.glance{align-self:start;justify-self:end;width:100%;max-width:400px;background:#fff;border:1px solid rgba(42,38,32,.18);border-radius:6px;
  padding:16px 18px 10px}
.glance-top{display:flex;gap:12px;align-items:center;padding-bottom:10px;border-bottom:1px solid var(--rule)}
.glance-top svg.fmark{flex:none;width:58px;height:auto}
.glance-top p{margin:0;line-height:1.3}
.glance-h{display:block;font-family:var(--sans);font-weight:700;font-size:21px;color:var(--leaf-dark)}
.glance-serv{display:block;font-size:15px;color:var(--muted)}
.glance-nums{display:flex;gap:28px;padding:10px 0 8px}
.glance-nums b{display:block;font-family:var(--sans);font-size:34px;line-height:1;font-weight:700}
.glance-nums span{font-size:14px;color:var(--muted)}
.glance-goals{list-style:none;border-top:1px solid var(--rule)}
.glance-goals li{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--rule);font-size:15.5px}
.glance-goals li:last-child{border-bottom:0}
.glance-goals .gname{flex:1}
.glance-goals i.spice{margin:0}
/* D13: the foods hub card for a food without a photo: cream paper, the group's katori, the group's name */
.fcard .fblank{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%;aspect-ratio:4/3;background:var(--tint)}
.fcard .fblank svg.fmark{width:38%;max-width:96px;height:auto}
.fcard .fgroup{font-size:14px;color:var(--muted)}
.fcard .fname .src-tag{vertical-align:1px}
/* D11: where a food's calories come from, under its nutrition table */
svg.energybar{max-width:520px;margin-top:4px}
.fatkey.energykey{display:flex;flex-wrap:wrap;gap:2px 20px;margin-bottom:6px}
/* D12: comparison pages lead with a goal-by-goal grid, then paired bars per serving; the long reasons fold away */
table.cmpgrid{width:100%;border-collapse:collapse;margin:18px 0 8px;font-size:16px}
.cmpgrid th,.cmpgrid td{text-align:left;padding:10px 10px;border-bottom:1px solid var(--rule);vertical-align:middle}
.cmpgrid thead th{font-size:15px;color:var(--ink);border-bottom:2px solid var(--rule);white-space:nowrap}
.cmpgrid tbody th{font-weight:600;white-space:nowrap}
.cmpgrid tbody th .close{display:block;font-weight:400;margin-left:21px}
.cmpgrid td.win{background:#EEF3E6}
.cmpgrid .pick{display:block;font-size:13px;color:var(--good)}
.cmpgrid i.sw{display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:7px;vertical-align:0;border:1px solid rgba(42,38,32,.35)}
.pairs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:18px 32px;margin:8px 0 30px}
.pair .pl{font-weight:600;margin:0 0 4px}
.pair .pb{display:grid;grid-template-columns:7.5em 1fr 5.5em;gap:10px;align-items:center;font-size:15px;line-height:1.3;padding:3px 0}
.pair .pn{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pair .track{display:block;height:16px;background:#EAF0E3;border-radius:3px}
.pair .track i{display:block;height:100%;border-radius:3px;border:1.5px solid rgba(42,38,32,.75);opacity:.9}
.pair .pv{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
details.grp .grp-body{padding:0 0 14px}
details.grp .grp-body ul.lib.cmp li{padding:10px 0}
/* D21: a kitchen word's foods as small cards */
.fgrid.mini{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px 14px;margin:6px 0 10px}
.fgrid.mini .fname{font-size:16px}
/* D23: lab ranges as a drawn bar */
figure.rangebar{margin:10px 0 22px}
svg.rbar{max-width:600px;margin:0 0 2px}
.fatkey.rbkey{display:flex;flex-wrap:wrap;gap:2px 20px;margin:0 0 4px}
.rangebar figcaption .small{margin:0}
.rb-calc{margin-top:8px;font-weight:600}
.rb-calc a::after{content:" ›"}
/* D17: the build-on foods: one reason, then a compact table with a mini bar per food */
table.buildtable td.mb,table.buildtable th.mb{width:30%;min-width:90px}
.mbar{display:flex;height:12px;background:#EAF0E3;border-radius:2px;overflow:hidden}
.mbar i{display:block;height:100%}
.mbar.thin{height:7px}.mbar.thin+.mbar.thin{margin-top:4px}
/* D26: a dish at one to four portions, drawn at one scale */
.portions{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:14px 0 18px}
.portions figure{margin:0;text-align:center;background:#fff;border:1px solid var(--rule);border-radius:4px;padding:10px 8px 8px;display:flex;flex-direction:column;justify-content:space-between}
.portions svg.portion{width:100%;height:auto;max-height:120px}
.portions figcaption{font-size:14px;line-height:1.35;color:var(--muted);margin-top:6px}
.portions figcaption b{display:block;font-family:var(--sans);font-size:22px;color:var(--ink)}
/* D25: the calories hub as one compact table, the amount under each dish */
table.calhub td:first-child{line-height:1.35}
/* D29: credentials as cards, the way of working as a strip */
.quals{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:16px;margin:8px 0 0}
.quals li{background:#fff;border:1px solid var(--rule);border-top:3px solid var(--leaf);border-radius:4px;padding:16px 18px 14px;display:flex;flex-direction:column;gap:4px}
.quals b{font-family:var(--sans);font-size:21px;line-height:1.2}
.quals .by{font-size:16px;color:var(--ink)}
.quals .small{margin-top:auto;padding-top:6px}
ol.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:none;margin-top:8px}
ol.steps li{position:relative;padding:18px 18px 16px;background:#fff;border:1px solid var(--rule);border-radius:4px}
ol.steps .sn{display:inline-block;width:34px;height:34px;border-radius:50%;background:var(--leaf);color:#fff;font:700 19px/34px var(--sans);text-align:center;margin-bottom:10px}
ol.steps b{display:block;font-size:18px;line-height:1.3;margin-bottom:6px}
ol.steps p{font-size:16px;color:var(--muted);line-height:1.5}
@media(max-width:960px){ol.steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){ol.steps{grid-template-columns:1fr}}
/* D30: the four goals as cards */
.goalcards{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.goalcard{background:#fff;border:1px solid var(--rule);border-top:4px solid var(--goal);border-radius:6px;overflow:hidden;display:flex;flex-direction:column}
.goalcard img{width:100%;aspect-ratio:16/9;object-fit:cover}
.goalcard .gc-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.goalcard h2{font-size:30px;margin:0 0 8px;display:flex;align-items:center;gap:10px}
.goalcard h2 i.spice{width:16px;height:16px;margin:0}
.goalcard p{font-size:17px;color:var(--muted)}
.goalcard .gc-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:18px}
.goalcard .btn{padding:10px 18px;font-size:16px}
@media(max-width:760px){.goalcards{grid-template-columns:1fr;gap:20px}}
/* D31: one price card */
.pricecard{max-width:520px;background:#fff;border:1px solid var(--rule);border-top:4px solid var(--leaf);border-radius:6px;padding:22px 26px 20px;margin-top:8px}
.pricecard .from{font-size:14px;font-weight:600;color:var(--muted)}
.pricecard .amt{font-family:var(--sans);font-size:44px;font-weight:700;line-height:1.05;margin:0 0 14px}
.pricecard .amt span{font-family:var(--sans);font-size:18px;font-weight:400;color:var(--muted)}
.pricecard .every{font-weight:600;margin:0 0 6px}
ul.ticks{list-style:none;margin:0 0 20px}
ul.ticks li{position:relative;padding:5px 0 5px 30px;line-height:1.45}
ul.ticks li::before{content:"";position:absolute;left:4px;top:11px;width:13px;height:7px;border-left:2.5px solid var(--leaf);border-bottom:2.5px solid var(--leaf);transform:rotate(-45deg)}
.pricecard .btn{display:block;text-align:center}
.pricecard .small{margin-top:10px}
/* D32: goal chips over the stories */
.storychips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.storychips button{display:inline-flex;align-items:center;gap:7px;min-height:44px;font:500 16px var(--sans);color:var(--ink);border:1.5px solid var(--rule);background:#fff;border-radius:4px;padding:6px 12px;cursor:pointer}
.storychips button span{color:var(--muted);font-size:14px}
.storychips button.on{background:var(--leaf);border-color:var(--leaf);color:#fff}
.storychips button.on span{color:#d9d3c4}
.storychips i.spice{margin:0}
.testimonial[hidden]{display:none}
.read p+.notebook,.read figure+.notebook{margin-top:26px}
.quotes3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.quotes3 .testimonial{background:#fff;border:1px solid var(--rule);border-radius:6px;padding:18px;margin:0;align-content:start}
@media(max-width:860px){.quotes3{grid-template-columns:1fr}}

/* About: each credential card shows its certificate and, for the Coursera ones, the public verification link */
.quals img.cert{display:block;width:100%;height:auto;border:1px solid var(--rule);border-radius:3px;margin:0 0 10px;background:#fff}
.quals .verify{margin-top:6px;font-size:15px;font-weight:600;align-self:flex-start}
.quals .verify::after{content:" ›"}
.qual-extra{margin-top:16px}

/* Condition guides (R2): jump links, dashed food rows with the food page's rating, one drawing each, and the
   Programs page's second row of small cards */
.toc{margin:28px 0 36px;background:#fff;border:1px solid var(--rule);border-radius:6px;padding:14px 18px}
.toc .toc-h{font-weight:600;font-size:16px;color:var(--muted);margin:0 0 4px}
.toc ol{list-style:none;margin:0;padding:0;columns:2;column-gap:28px}
.toc li{break-inside:avoid}
.toc a{display:block;padding:7px 0;font-size:17px;line-height:1.3;min-height:30px}
.food-rows{list-style:none;margin:10px 0 0;padding:0}
.food-rows li{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:17px;line-height:1.45}
.food-rows li:first-child{border-top:1px solid var(--rule)}
.food-rows .fr-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.food-rows .fr-head>a,.food-rows .fr-head>b{font-weight:600;font-size:18px}
.food-rows .fr-tag{flex:none;font-size:14px;white-space:nowrap}
.food-rows .fr-why{color:var(--muted);font-size:15.5px}
.gvis{margin:18px 0 24px}
.gvis figcaption{margin-top:8px}
.gvis.plate svg.thali{display:block;width:100%;max-width:440px;height:auto;margin:0 auto}
.gvis.tl ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1.15fr 1fr 1.15fr 1fr;align-items:start;gap:0 12px}
.gvis.tl .tl-stop{text-align:center}
.gvis.tl .tl-stop p{font-size:16px;line-height:1.4;margin:4px 0 0}
.gvis.tl .tl-icon{display:block;width:64px;height:64px;margin:0 auto}
.gvis.tl .tl-gap{position:relative;padding-top:42px;text-align:center}
.gvis.tl .tl-gap::before{content:"";position:absolute;left:0;right:6px;top:30px;border-top:2px dashed var(--control)}
.gvis.tl .tl-gap::after{content:"";position:absolute;right:0;top:25px;border:6px solid transparent;border-left:8px solid var(--control)}
.gvis.tl .tl-gap p{font-size:15px;line-height:1.3;color:var(--leaf-dark);margin:0}
.goalcards.minis{margin-top:28px}
.goalcard.mini .gc-body{padding:16px 20px 18px}
.goalcard.mini h2{font-size:24px}
.goalcard.mini p{font-size:16px}
.goalcard.mini .gc-links{padding-top:12px}
@media(max-width:760px){
  .toc{margin:20px 0 28px}
  .toc ol{columns:1}
  .toc a{padding:10px 0;min-height:44px;box-sizing:border-box}
  .food-rows .fr-head{flex-wrap:wrap;gap:2px 10px}
  .gvis.tl ol{grid-template-columns:64px 1fr;gap:0 14px}
  .gvis.tl .tl-stop{display:contents}
  .gvis.tl .tl-stop p{text-align:left;align-self:center;margin:0}
  .gvis.tl .tl-gap{grid-column:2;padding:10px 0 12px 16px;text-align:left}
  .gvis.tl .tl-gap::before{left:-46px;right:auto;top:0;bottom:0;border-top:0;border-left:2px dashed var(--control)}
  .gvis.tl .tl-gap::after{display:none}
  .goalcards.minis{margin-top:20px;grid-template-columns:1fr}
}

/* folds (layout.fold): a secondary block built as an open <details>. Computers show it as the section it always was:
   no marker, and the heading can't be clicked shut. Phones fold it (phone.css, phone.js). */
details.fold>summary{display:block;list-style:none}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary>h2,details.fold>summary>h3{display:block}
.read details.fold:not(:first-child),.wide details.fold:not(:first-child){margin-top:40px}
details.fold>summary>h3{margin-top:0}
@media(min-width:761px){details.fold>summary{pointer-events:none;cursor:auto}}
.more-btn{display:none}
@media(min-width:761px){.read details.fold:has(>summary>h3):not(:first-child),.wide details.fold:has(>summary>h3):not(:first-child){margin-top:22px}
  .read .more-links:not(:first-child)>h2:first-child{margin-top:40px}}
details.fold+p{margin-top:14px}

/* ===== walls pass, lane B (2026-10-16): structured copy from build/prose.py; lists, link sets, fact rows ===== */
ul.pts,ol.pts{list-style:none;margin:10px 0 14px}
ul.pts li,ol.pts li{position:relative;padding:3px 0 3px 26px;line-height:1.55}
ul.pts li::before{content:"";position:absolute;left:7px;top:calc(3px + .78em - 4px);width:8px;height:8px;border-radius:50%;background:var(--leaf)}
ol.pts{counter-reset:pts}
ol.pts li{counter-increment:pts}
ol.pts li::before{content:counter(pts);position:absolute;left:0;top:5px;width:19px;height:19px;border-radius:50%;background:var(--leaf);color:#fff;font:600 12px/19px var(--sans);text-align:center}
ul.pts+p,ol.pts+p,dl.factrow+p{margin-top:14px}
p+ul.pts,p+ol.pts{margin-top:8px}
.read h3+p,.read h3+ul.pts{margin-top:4px}
.linkset{margin-top:20px}
.linkset+.linkset{margin-top:14px}
p.linkset-h{font-weight:600;margin:0 0 2px}
ul.inline-links{list-style:none}
ul.inline-links li{display:contents}
dl.factrow{display:flex;flex-wrap:wrap;gap:10px 14px;margin:16px 0}
dl.factrow>div{flex:1 1 140px;max-width:240px;background:#fff;border:1px solid var(--rule);border-radius:4px;padding:10px 14px}
dl.factrow dt{font:600 26px/1.1 var(--sans);color:var(--leaf-dark)}
dl.factrow dt small{font:500 14px var(--sans);color:var(--muted)}
dl.factrow dd{font-size:15px;line-height:1.35;color:var(--muted);margin-top:2px}
.gsrc{margin:0 0 6px}
blockquote.pull{margin:16px 0;padding:6px 0 6px 18px;border-left:4px solid var(--leaf)}
blockquote.pull p{font:600 25px/1.25 var(--sans);color:var(--leaf-dark)}
blockquote.pull.result p{font:400 18px/1.6 var(--sans);color:var(--ink)}
.note.care{margin-top:18px}
.note.care ul.pts{margin:4px 0 8px}
.note ul.pts li{padding-top:2px;padding-bottom:2px}
/* a plain numbered list that also carries .steps: a list down the page, not the /plans/ card grid */
ol.pts.steps{display:block;margin-top:14px}
ol.pts.steps li{background:none;border:0;border-radius:0;border-top:1px solid var(--rule);padding:14px 0 14px 46px;margin:0;line-height:1.55}
ol.pts.steps li:last-child{border-bottom:1px solid var(--rule)}
ol.pts.steps li::before{top:14px;width:30px;height:30px;font:700 16px/30px var(--sans);background:var(--leaf);color:#fff}
ol.pts.steps li b{display:block;margin-bottom:2px}

/* ===== walls-a: breaking walls of text on /foods/, eat-and-avoid and /calories/ pages =====
   .pts: a short list with bold lead-in labels, used where a paragraph listed rules, servings or steps. */



.pts.small li{margin-top:5px}
p+.pts,.pts+p,.top5{margin-top:14px}
.top5 .pts{margin-top:4px}
.verdict h3.for{font-size:inherit}
ul.foodguides{list-style:none}.foodguides li+li{margin-top:6px}

/* calculator answer reveal (tools.js reveal(): on "Show my answer" only, never with reduced motion), in the site's ink */
.result{position:relative}
.result.rv .big{animation:rv-rise .45s cubic-bezier(.2,.8,.2,1) both}
.result.rv .big+p{animation:rv-fade .5s .45s both}
.result.rv svg.scale .so{stroke-dasharray:1;animation:rv-draw .8s .2s ease-in-out both}
.result.rv svg.scale .sb{animation:rv-fade .55s .75s both}
.result.rv svg.scale .sm path{stroke-dasharray:1;animation:rv-draw .45s 1.15s ease-out both}
.result.rv svg.scale .sm text{animation:rv-write .55s 1.3s ease-out both}
@keyframes rv-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes rv-write{from{clip-path:inset(-10% 100% -10% 0)}to{clip-path:inset(-10% -2% -10% 0)}}
@keyframes rv-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes rv-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){.result.rv *{animation:none!important}}

/* ===== booking form (build/booking.py, book.js): the /book/ page, and the same form as a dialog over any page on a
   computer. Phones get it as the bottom sheet (phone.css). Colours are the theme's tokens only. ===== */
.bookform{display:grid;gap:18px;max-width:560px}
.bookform .bf{display:flex;flex-direction:column;gap:6px;min-width:0}
.bookform label{font-weight:600;font-size:17px;line-height:1.3}
.bookform .opt{font-weight:400;color:var(--muted)}
.bookform .hint{font-size:15px;line-height:1.4;color:var(--muted)}
.bookform input,.bookform select,.bookform textarea{font:inherit;font-size:17px;line-height:1.4;color:var(--ink);background:#fff;
  border:1px solid var(--control);border-radius:4px;padding:11px 12px;min-height:48px;width:100%}
.bookform textarea{min-height:96px;resize:vertical}
.bookform input:focus,.bookform select:focus,.bookform textarea:focus{outline:2px solid var(--leaf);outline-offset:1px;border-color:var(--leaf)}
.bookform [aria-invalid="true"]{border:2px solid var(--limit)}
.bookform .err{color:var(--limit);font-size:15px;font-weight:600;line-height:1.4;margin:0}
.bookform .bf-two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.bookform .btn{justify-self:start;margin-top:4px}
.bookform .btn[disabled]{opacity:.7;cursor:progress}
.bookform p+p{margin-top:0}
.bookform .book-next{font-size:16px;line-height:1.5;margin:0}
.bookform .book-privacy{margin:0}
.bookform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bookform[hidden],.book-done[hidden]{display:none}  /* the display above would otherwise beat the hidden attribute */
.book-done{max-width:560px}
.book-done:focus{outline:none}
.book-done h3{font-size:24px;line-height:1.25;margin:0 0 10px}
.book-done .btn{margin-top:4px}
.book-done p+p{margin-top:14px}
.book-nojs{padding:14px 16px;border:1px solid var(--rule);border-radius:4px;background:var(--tint)}
.book-sheet{display:none}
@media (min-width:761px){
  .book-sheet.open{display:block;position:fixed;z-index:61;top:50%;left:50%;transform:translate(-50%,-50%);
    width:min(620px,calc(100vw - 48px));max-height:calc(100vh - 48px);overflow-y:auto;overscroll-behavior:contain;background:#fff;
    border:1px solid var(--rule);border-top:4px solid var(--leaf);border-radius:6px;padding:18px 28px 28px}
  .book-sheet .sh{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
  .book-sheet .sh h2{font-size:30px;margin:0}
  .book-sheet .x{font:inherit;font-size:16px;font-weight:600;color:var(--leaf);background:none;border:0;min-height:44px;min-width:44px;
    padding:4px 0 4px 8px;cursor:pointer}
  .book-sheet .x:hover{text-decoration:underline}
  .book-sheet .bookform{max-width:none}
  body.open:has(.book-sheet.open){overflow:hidden}
  body.open:has(.book-sheet.open) .scrim{display:block;position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.45)}
}

/* ================= navigation (2026-10-18, build/layout.py band() and nav_panel(), nav.js) =================
   A white bar at the top of the page; past about 80 px it lifts into a floating rounded bar in the middle, and "Menu" opens
   a panel that grows out of it. Its corners and shadows come from the design-sense tokens at the top of this file (the
   bar's deeper shadows are named there as --shadow-bar and --shadow-bar-open); tests/design_rules.py holds every rule to them. */
:root{--navh:84px;--navease:cubic-bezier(.22,.8,.24,1)}
nav.top{background:#fff}
.navrow{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0}
nav.top .links{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:4px 26px}
nav.top .links a{color:var(--ink);text-decoration:none;font-size:16px;font-weight:500;white-space:nowrap}
nav.top .links a:hover,nav.top .links a[aria-current]{color:var(--leaf)}
nav.top .links a:not(.cta){background:linear-gradient(var(--leaf),var(--leaf)) 0 100%/0 1.5px no-repeat;padding:4px 0;transition:background-size .25s var(--navease),color .2s}
nav.top .links a:not(.cta):hover,nav.top .links a[aria-current]{background-size:100% 1.5px}
nav.top .links a.cta{background:var(--leaf);color:#fff;padding:10px 18px;border-radius:var(--r-pill);font-weight:600;margin-left:2px;transition:background-color .2s,border-radius .45s var(--navease),padding .45s var(--navease)}
nav.top .links a.cta:hover{background:var(--leaf-dark);color:#fff}
nav.top .menu{display:none;align-items:center;gap:9px;background:#fff;border:1px solid var(--rule);color:var(--ink);font:500 16px/1 var(--sans);
  padding:10px 16px 10px 14px;min-height:44px;border-radius:var(--r-pill);cursor:pointer;transition:background-color .2s,border-color .2s}
nav.top .menu:hover{background:var(--tint);border-color:#C6D5B8}
nav.top .menu .mi{position:relative;width:16px;height:10px}
nav.top .menu .mi:before,nav.top .menu .mi:after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;border-radius:1px;transition:transform .35s var(--navease),top .35s var(--navease)}
nav.top .menu .mi:before{top:1px}
nav.top .menu .mi:after{top:7.5px}
.nav-open nav.top .menu .mi:before{top:4.25px;transform:rotate(45deg)}
.nav-open nav.top .menu .mi:after{top:4.25px;transform:rotate(-45deg)}
nav.top .menu .ml{min-width:40px;text-align:left}
.navpanel{display:none}
.navscrim{display:none}

@media(min-width:761px){
  html.nav-js{scroll-padding-top:100px}
  .nav-js .band>.wide{padding-top:var(--navh)}
  .nav-js nav.top{position:fixed;z-index:50;top:0;left:50%;width:100%;transform:translateX(-50%);
    box-shadow:var(--shadow-hair);border:1px solid transparent;border-width:0 1px;
    transition:top .5s var(--navease),width .5s var(--navease),border-radius .5s var(--navease),background-color .35s,box-shadow .5s var(--navease),border-color .35s}
  .nav-js nav.top .navrow{height:var(--navh);padding:0 max(20px,calc((100% - 1080px)/2));transition:height .5s var(--navease),padding .5s var(--navease)}
  .nav-js nav.top .menu{display:inline-flex}
  .nav-js nav.top .links{flex-wrap:nowrap;gap:28px}
  .nav-js nav.top .links a.cta{margin-left:-14px}
  .nav-js nav.top .mark small{transition:opacity .3s,max-height .45s var(--navease),margin .45s var(--navease);max-height:20px;overflow:hidden}
  .nav-js nav.top .mark{transition:font-size .45s var(--navease)}
  /* the floating bar */
  .nav-float nav.top{top:14px;width:min(72%,1120px);border-radius:var(--r-pill);background:rgba(255,255,255,.8);border-color:rgba(206,219,194,.75);border-width:1px;
    -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
    box-shadow:var(--shadow-bar)}
  .nav-float nav.top .navrow{height:60px;padding:0 9px 0 26px}
  .nav-float nav.top .mark{font-size:23px}
  .nav-float nav.top .mark small{opacity:0;max-height:0;margin-top:0}
  .nav-float nav.top .links{gap:24px}
  .nav-float nav.top .links a{font-size:15.5px}
  .nav-float nav.top .menu{background:transparent;border-color:rgba(31,42,27,.14)}
  .nav-float nav.top .links a.cta{border-radius:var(--r-pill);padding:10px 20px}
  /* the panel: it drops out of the bar; from the floating bar the bar widens first and the panel grows out of it */
  .nav-js .navpanel{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .5s var(--navease),visibility 0s .5s}
  .nav-open .navpanel{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .5s var(--navease) .06s}
  .navpanel .np-in{min-height:0;overflow:hidden}
  .nav-open .navpanel .np-in{max-height:calc(100vh - var(--navh) - 40px);overflow-y:auto;overscroll-behavior:contain}
  .navpanel .np-grid{display:grid;grid-template-columns:1fr 1fr minmax(260px,1.05fr);gap:32px 48px;border-top:1px solid var(--rule);
    padding:34px max(20px,calc((100vw - 1080px)/2)) 30px;opacity:0;transform:translateY(-10px);transition:opacity .25s,transform .4s var(--navease)}
  .navpanel .np-goals{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 26px;border-top:1px solid var(--rule);
    padding:16px max(20px,calc((100vw - 1080px)/2)) 22px;opacity:0;transition:opacity .25s}
  .nav-open .navpanel .np-grid{opacity:1;transform:none;transition:opacity .35s .16s,transform .5s var(--navease) .12s}
  .nav-open .navpanel .np-goals{opacity:1;transition:opacity .35s .24s}
  .nav-float.nav-open nav.top{width:calc(100% - 28px);border-radius:var(--r-lg);background:#fff}
  .nav-float.nav-open nav.top .navrow{padding:0 max(26px,calc((100% - 1080px)/2))}
  .nav-float nav.top .np-grid,.nav-float nav.top .np-goals{padding-left:max(26px,calc((100vw - 28px - 1080px)/2));padding-right:max(26px,calc((100vw - 28px - 1080px)/2))}
  .nav-open nav.top{box-shadow:var(--shadow-bar-open)}
  .navpanel .np-h{font-size:14px;font-weight:600;color:var(--muted);margin:0 0 10px}
  .navpanel .np-col a{display:block;width:fit-content;font:600 38px/1.18 var(--sans);color:var(--leaf-dark);text-decoration:none;padding:3px 0}
  .navpanel .np-col a:hover,.navpanel .np-col a[aria-current]{color:var(--leaf);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px}
  .navpanel .np-side{align-self:start;background:var(--tint);border-radius:var(--r-lg);padding:24px 24px 22px;margin-top:30px}
  .navpanel .np-line{font:600 24px/1.3 var(--sans);color:var(--leaf-dark);margin:0 0 18px}
  .navpanel .np-call{font-size:15px;color:var(--muted);margin-top:12px}
  .navpanel .np-call a{color:var(--muted);white-space:nowrap}
  .navpanel .np-goals .np-h{margin:0 6px 0 0}
  .navpanel .np-goals a{color:var(--ink);font-size:16px;font-weight:500;text-decoration:none}
  .navpanel .np-goals a:hover{color:var(--leaf);text-decoration:underline}
  .nav-js .navscrim{display:block;position:fixed;inset:0;z-index:49;background:rgba(31,42,27,.22);opacity:0;pointer-events:none;transition:opacity .4s}
  .nav-open .navscrim{opacity:1;pointer-events:auto}
  .nav-js .az{top:88px}
}
/* the inline links need the room: under 1100 px the top bar has Menu, and the floating bar keeps them from 1360 px */
@media(min-width:761px) and (max-width:1099px){.nav-js nav.top .links>a:not(.cta){display:none}.nav-js nav.top .links a.cta{margin-left:0}}
@media(min-width:1100px) and (max-width:1359px){.nav-float nav.top .links>a:not(.cta){display:none}.nav-float nav.top .links a.cta{margin-left:0}}
@media(max-width:860px){.nav-js nav.top .mark small{display:none}}
@media (prefers-reduced-motion: reduce){
  nav.top,nav.top *,nav.top .navrow,nav.top .navpanel,nav.top .np-grid,nav.top .np-goals,.navscrim{transition:none!important}
}

/* ================= design sense, site-wide (2026-10-18): the navigation's feel on every page ==========   Pill buttons and chips, rounded cards that rest on a soft shadow and lift a little under a pointer, tinted rounded notes,
   rounded tables, a floating answer card, frosted sticky bars, details that open smoothly. Corners and shadows come only
   from the tokens in :root (tests/design_rules.py). phone.css adjusts these for phones at its end. */
:root{interpolate-size:allow-keywords}

/* buttons: green pill, ghost pill, quiet pill */
.btn{border-radius:var(--r-pill);transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),box-shadow .24s var(--ease)}
.btn:hover{box-shadow:var(--shadow-1)}
.btn.ghost:hover{background:var(--tint);color:var(--leaf-dark);border-color:var(--leaf-dark)}
.closing .btn:hover{background:var(--tint);border-color:var(--tint);color:var(--leaf-dark)}
.closing .btn.ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.btn.quiet,.pricebox a.quiet,.strip-nav button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 20px;border:0;
  border-radius:var(--r-pill);background:rgba(61,90,39,.08);color:var(--leaf-dark);font:600 16px/1.2 var(--sans);text-decoration:none;cursor:pointer;
  transition:background-color .2s var(--ease)}
.btn.quiet:hover,.pricebox a.quiet:hover,.strip-nav button:hover{background:rgba(61,90,39,.15);box-shadow:none}
.pricebox a.quiet{vertical-align:middle;margin-top:22px}
.skip{border-radius:var(--r-pill)}
.btn:focus-visible,.pricebox a.quiet:focus-visible,.strip-nav button:focus-visible{outline-offset:3px}

/* chips and pill links: the link panels, calorie chips, diet and calorie switches, story chips, source tags */
.inline-links{gap:8px}
.inline-links a{display:inline-flex;align-items:center;min-height:40px;padding:6px 16px;border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;
  color:var(--leaf-dark);text-decoration:none;font-size:16px;line-height:1.3;white-space:normal;transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.inline-links a:hover{background:var(--tint);border-color:var(--leaf-soft)}
.inline-links a[aria-current]{background:var(--leaf);border-color:var(--leaf);color:#fff}
a.chip,.diet-group a.chip{border-radius:var(--r-pill);border-width:1.5px;transition:background-color .2s var(--ease),color .2s var(--ease)}
a.chip{padding:5px 14px}
.diet-group a.chip{padding:8px 18px}
.storychips button{border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 16px;transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.storychips button:hover{background:var(--tint)}
.storychips button.on{border-color:var(--leaf)}
.switch{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.switch b{margin-right:2px}
.kcal-help{margin-bottom:36px}  /* air between the chart's switches and the day */
.switch a,.switch span{display:inline-flex;align-items:center;min-height:38px;margin:0;padding:4px 15px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:#fff;color:var(--ink);text-decoration:none;font-weight:500;transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.switch a:hover{background:var(--tint);border-color:var(--leaf-soft)}
.switch span,.switch span.on{background:var(--leaf);border-color:var(--leaf);color:#fff;font-weight:600}
.src-tag{border-radius:var(--r-pill);padding:0 9px}

/* cards: rounded, a hairline and a resting shadow; the ones that are links lift under a pointer */
.helpcard,.goal-card,.diet-group,.quotes3 .testimonial,.strip .testimonial,.quals li,.glance,.toc,.portions figure,dl.factrow>div,
.hscroll .panel:not(.lead){border:1px solid var(--line);border-radius:var(--r-md);background:#fff;box-shadow:var(--shadow-1)}
.goalcard,.pricebox,.pricecard{border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1)}
.goalcard{border-top:1px solid var(--line)}
.goalcard h2 i.spice{background:var(--goal)}
.quals li{border-top:1px solid var(--line)}
.pricecard{border-top:1px solid var(--line)}
.glance{border-radius:var(--r-lg)}
.helpcard{padding:24px 24px 22px}
.quals img.cert{border-radius:var(--r-sm)}
.quotes3 .testimonial,.strip .testimonial{padding:22px}
@media(min-width:761px){
  ol.steps:not(.pts) li{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;box-shadow:var(--shadow-1)}
  ol.steps:not(.pts) li{padding:22px 20px 20px}
  .meals .meal-card{border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-1);padding:18px 20px 12px}
  /* food cards on the hubs: the photo is the card's top, the name and numbers sit inside it */
  .fgrid .fcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-1);padding-bottom:14px}
  .fgrid .fcard img,.fgrid .fcard svg.food-sketch,.fgrid .fcard .fblank{border-radius:0;outline:0}
  .fgrid .fcard .fname{padding:0 14px;margin-top:10px}
  .fgrid .fcard .fmeta{padding:0 14px}
  .fgrid{gap:22px 20px}
}
@media(hover:hover) and (min-width:761px){
  .helpcard,.fgrid .fcard{transition:box-shadow .28s var(--ease),transform .28s var(--ease),border-color .2s var(--ease)}
  .helpcard:hover,.fgrid .fcard:hover{box-shadow:var(--shadow-2);transform:translateY(-3px);border-color:var(--line)}
  .fgrid .fcard:hover .fname{text-decoration:none;color:var(--leaf-dark)}
}
.helpcard:focus-visible,.fcard:focus-visible{outline-offset:3px}

/* before and after photos: each pair a framed card */
.ba-grid figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:10px 10px 16px;box-shadow:var(--shadow-1)}
.ba-grid img{border-radius:var(--r-md)}
.ba-grid figcaption{padding:0 8px}

/* notes and callouts: tinted rounded cards, no rule down the side */
.notebook,.note,.book-nojs,blockquote.pull{background:var(--tint);border:1px solid rgba(127,168,78,.28);border-radius:var(--r-md)}
.notebook{padding:20px 24px}
.note{padding:14px 18px}
blockquote.pull{padding:18px 22px}
.sec.tint .notebook,.sec.tint .note,.sec.tint blockquote.pull,.hero .notebook,.hero .note{background:#fff}
.result .example{border:0;border-radius:var(--r-sm);background:var(--tint);padding:8px 12px}

/* tables: a rounded frame, a soft header, hairline rows */
table.facts,table.cmpgrid{border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:var(--r-md);background:#fff}
.facts th,.facts td{padding:10px 14px}
.facts th{background:var(--tint);color:var(--muted);border-bottom:1px solid var(--rule)}
.facts tr:last-child>td,.facts tr:last-child>th{border-bottom:0}
.facts tr:first-child>:first-child,.cmpgrid thead tr>:first-child{border-top-left-radius:calc(var(--r-md) - 1px)}
.facts tr:first-child>:last-child,.cmpgrid thead tr>:last-child{border-top-right-radius:calc(var(--r-md) - 1px)}
.facts tr:last-child>:first-child,.cmpgrid tbody tr:last-child>:first-child{border-bottom-left-radius:calc(var(--r-md) - 1px)}
.facts tr:last-child>:last-child,.cmpgrid tbody tr:last-child>:last-child{border-bottom-right-radius:calc(var(--r-md) - 1px)}
.facts tr.total td{border-top:1px solid var(--rule);background:var(--tint)}
.cmpgrid th,.cmpgrid td{padding:11px 14px}
.cmpgrid thead th{background:var(--tint);border-bottom:1px solid var(--rule)}
.cmpgrid tbody tr:last-child>*{border-bottom:0}
.tablewrap{margin:6px 0 8px}
.tablewrap>table.facts{margin:0}

/* forms: rounded fields */
.search,.tool input:not([type=radio]):not([type=checkbox]),.tool select,.ffilters select,.ffilters .search,.bookform input,.bookform select,.bookform textarea{border-radius:var(--r-sm)}
.search,.ffilters .search{border-width:1px}

/* calculators: a rounded panel, and the answer as a white card floating on it */
.tool{border:1px solid var(--line);border-radius:var(--r-lg);padding:28px}
form.tool .result{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-2);padding:18px 22px;margin:0 0 22px}
form.tool .result.is-example{box-shadow:var(--shadow-1)}
.tool .btn.go{padding:11px 24px}

/* details: rounded groups that open smoothly */
details.grp{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;padding:0 20px;margin-top:10px}
details.grp:last-of-type{border-bottom:1px solid var(--line)}
details.grp summary::after{transition:transform .28s var(--ease)}
details::details-content{block-size:0;overflow:clip;transition:block-size .3s var(--ease),content-visibility .3s var(--ease) allow-discrete}
details[open]::details-content{block-size:auto}
@media (prefers-reduced-motion: reduce){details::details-content{transition:none!important}}

/* photos: rounded, the hero ones the most */
.hero-img,.hero-img[src^="/assets/foods/"],.hero.has-img svg.food-sketch,figure.vid{border-radius:var(--r-lg)}
.fcard img,.fcard .fblank{border-radius:var(--r-md)}

/* breadcrumbs: a small pill over the heading */
.hero .txt>p.crumbs{font-size:14.5px;margin-top:0;max-width:none;color:var(--muted)}
.crumbs{display:inline-flex;flex-wrap:wrap;align-items:center;column-gap:4px;padding:4px 14px;margin-bottom:14px;font-size:14.5px;line-height:1.6;
  background:rgba(255,255,255,.66);border:1px solid var(--line);border-radius:var(--r-pill)}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--leaf);text-decoration:underline}

/* footer: the dark green, its top corners rounded over the section above */
footer{position:relative;border-radius:var(--r-lg) var(--r-lg) 0 0;margin-top:calc(-1 * var(--r-lg))}
main>:last-child{border-bottom:var(--r-lg) solid transparent}  /* the last section's own colour runs on under the footer's corners */
.fine{border-top-color:rgba(228,235,217,.18)}
footer a{transition:color .2s var(--ease)}
footer a:hover{color:#fff}

/* the booking dialog on a computer: a floating card over a frosted page */
@media (min-width:761px){
  .book-sheet.open{border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-2);padding:22px 32px 32px;
    transition:opacity .26s var(--ease),transform .3s var(--ease)}
  @starting-style{.book-sheet.open{opacity:0;transform:translate(-50%,-48%) scale(.985)}}
  body.open:has(.book-sheet.open) .scrim{background:rgba(31,42,27,.24);-webkit-backdrop-filter:blur(6px) saturate(1.2);backdrop-filter:blur(6px) saturate(1.2)}
  .book-sheet .x{border:1px solid var(--rule);border-radius:var(--r-pill);padding:6px 18px;text-align:center;transition:background-color .2s var(--ease)}
  .book-sheet .x:hover{background:var(--tint);text-decoration:none}
}

/* sticky bars are frosted: the glossary letters, the foods finder */
.az{background:var(--glass);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-1);padding:6px 10px;gap:2px;margin-bottom:14px}
.az a{display:inline-flex;align-items:center;justify-content:center;min-width:38px;min-height:38px;border-radius:var(--r-pill);text-decoration:none;
  transition:background-color .18s var(--ease)}
.az a:hover{background:var(--tint)}
@media (min-width:761px){
  .ffilters:not(.gfilter){position:sticky;top:12px;z-index:5;padding:12px 18px 14px;margin-bottom:14px;background:var(--glass);
    -webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1)}
  .nav-js .ffilters:not(.gfilter){top:88px}
  .ffilters label.check{min-height:40px}
  .ffilters:not(.gfilter) label{color:var(--ink)}  /* full contrast on the frosted bar, whatever scrolls under it */
}

/* the /book/ page: the form sits on a white floating card over the pale green, like the dialog it opens as elsewhere */
@media (min-width:761px){
  .sec.book-sec{background:var(--tint)}
  .book-sec .bookform,.book-sec .book-done{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1);padding:30px 32px 32px}
}
/* ===== HOME lane (design sense, 2026-10-18): the before-and-after slider, the count-up numbers, the steps' line, goal
   cards that respond, and the booking form in three steps. Shapes and depth use lane LOOK's tokens, with fallbacks.
   home.js and book.js add the classes that switch each one on (.ba-frame.on, .hl-on, .hc-on, .bk-on); without the
   scripts the photos sit side by side, the steps have no line, every card shows all, and the form is one page. ===== */
/* before and after: one frame per client */
.ba-grid.ba-slides{grid-template-columns:repeat(4,1fr);gap:30px 22px}
@media(max-width:1100px){.ba-grid.ba-slides{grid-template-columns:1fr 1fr}}
.ba-slides figure.ba{margin:0;min-width:0}
.ba-frame{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:3px;border-radius:var(--r-md,16px);overflow:hidden;background:#fff;
  box-shadow:var(--shadow-1)}
.ba-side{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--ba-bg,var(--tint))}
.ba-slides .ba-side img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:50% 22%;border-radius:0;-webkit-user-drag:none;user-select:none}
.ba-frame[data-fit="contain"] .ba-side img{object-fit:contain}
.ba-pill{position:absolute;top:10px;left:10px;z-index:1;padding:3px 12px 2px;border-radius:var(--r-pill,999px);font-size:14px;font-weight:600;line-height:1.5;
  color:var(--ink);background:var(--glass);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
  transition:opacity .2s}
.ba-frame.on{display:block;aspect-ratio:3/4;touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none}
.ba-frame.on .ba-side{position:absolute;inset:0;aspect-ratio:auto}
.ba-frame.on .ba-a{clip-path:inset(0 0 0 var(--pos,50%))}
.ba-frame.on .ba-a .ba-pill{left:auto;right:10px}
.ba-frame.b-gone .ba-b .ba-pill,.ba-frame.a-gone .ba-a .ba-pill{opacity:0}
.ba-handle{position:absolute;z-index:2;top:0;bottom:0;left:var(--pos,50%);width:44px;margin-left:-22px;display:flex;align-items:center;justify-content:center;outline:none;cursor:ew-resize}
.ba-handle::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:#fff;box-shadow:var(--shadow-1)}
.ba-knob{position:relative;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--leaf-dark);
  background:var(--glass);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
  box-shadow:var(--shadow-2);transition:transform .18s var(--ease,cubic-bezier(.2,.8,.2,1))}
.ba-knob svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ba-frame.drag .ba-knob{transform:scale(1.08)}
.ba-handle:focus-visible .ba-knob{outline:3px solid var(--leaf);outline-offset:2px}
.ba-slides figcaption{font-size:15px;line-height:1.5;margin-top:12px}
/* the numbers count up (motion.js); the width each digit takes stays the same while they do */
ul.stats b{font-variant-numeric:tabular-nums}
/* the steps' line (home.js measures it; it fills as the reader scrolls) */
.howline{position:relative}
.hl-track{position:absolute;z-index:0;border-radius:var(--r-pill,999px);background:rgba(61,90,39,.16);overflow:hidden;pointer-events:none}
.hl-track i{position:absolute;inset:0;background:var(--leaf);transform-origin:0 0;transform:scaleX(0)}
.howline ol.how3>li::before{z-index:1}
.hl-on ol.pts.steps.how3 li::before{background:#fff;color:var(--leaf);border:2px solid var(--leaf);line-height:34px;transition:background .24s,color .24s}
.hl-on ol.pts.steps.how3 li.hl-hit::before{background:var(--leaf);color:#fff}
@media(min-width:761px){
  .howline{display:grid;grid-template-columns:1fr auto;column-gap:40px;align-items:start}
  .howline ol.how3{margin-top:0}
  .howline .ctas.center{margin-top:2px;justify-content:flex-end}
  .howline{margin-top:12px}
}
/* goal cards: a photo, the name, her words; on a laptop the card lifts and the photo leans in under the pointer */
.helpcards .helpcard{position:relative;display:flex;flex-direction:column;padding:0;overflow:hidden;background:#fff;border:1px solid var(--rule);
  border-radius:var(--r-md,16px);box-shadow:var(--shadow-1);
  transition:transform .26s var(--ease,cubic-bezier(.2,.8,.2,1)),box-shadow .26s var(--ease,cubic-bezier(.2,.8,.2,1)),border-color .26s}
.hc-img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--tint)}
.hc-img img{width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease,cubic-bezier(.2,.8,.2,1))}
.helpcards .helpcard h3{margin:18px 20px 8px;font-size:24px}
.hc-link{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.hc-link::after{content:"";position:absolute;inset:0;z-index:1}
.hc-link:focus-visible{outline:none}
.helpcard:has(.hc-link:focus-visible){outline:3px solid var(--leaf);outline-offset:3px}
.hc-more{display:grid;grid-template-rows:1fr;flex:1}
.hc-in{display:flex;flex-direction:column;min-height:0;padding:0 20px 20px}
.hc-in p{font-size:16px;line-height:1.55;color:var(--muted)}
.hc-acts{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:14px}
.hc-acts .btn{display:none;position:relative;z-index:2}
.hc-acts .go{position:relative;z-index:2;font-weight:600;color:var(--leaf);text-decoration:none}
.hc-acts .go:hover{text-decoration:underline}
@media(hover:hover){
  .helpcards .helpcard:hover{transform:translateY(-4px);border-color:transparent;box-shadow:var(--shadow-2)}
  .helpcards .helpcard:hover .hc-img img{transform:scale(1.05)}
}
/* the booking form in three steps (book.js); without it the steps read one under the other */
.bookform fieldset.bk-step{border:0;padding:0;margin:0;min-width:0;display:grid;gap:18px}
.bookform fieldset.bk-step[hidden]{display:none}
.bookform .bk-h{margin:0;font-size:24px;line-height:1.2;color:var(--leaf-dark)}
.bookform .bk-h:focus{outline:none}
.bookform:not(.bk-on) fieldset.bk-step+fieldset.bk-step{padding-top:20px;border-top:1px solid var(--rule)}
.bookform .lbl{font-weight:600;font-size:17px;line-height:1.3}
.bk-pills{display:flex;flex-wrap:wrap;gap:10px}
.bk-pills input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.bookform .bk-pills label{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:10px 20px;border:1.5px solid var(--control);
  border-radius:var(--r-pill,999px);background:#fff;font-weight:500;font-size:17px;line-height:1.25;cursor:pointer;
  transition:background .18s,border-color .18s,color .18s}
.bookform .bk-pills label:hover{border-color:var(--leaf)}
.bookform .bk-pills input:checked+label{background:var(--leaf);border-color:var(--leaf);color:#fff}
.bookform .bk-pills input:checked+label::before{content:"";width:6px;height:12px;margin:-4px 2px 0 -2px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.bookform .bk-pills input:focus-visible+label{outline:3px solid var(--leaf);outline-offset:2px}
.bookform input:not([type="radio"]),.bookform textarea{border-radius:var(--r-sm,10px)}
.bk-prog{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:15px;color:var(--muted)}
.bk-prog[hidden]{display:none}
.bk-prog b{font-weight:600;color:var(--ink)}
.bk-dots{display:flex;gap:7px}
.bk-dots i{display:block;width:9px;height:9px;border-radius:var(--r-pill,999px);background:var(--rule);transition:width .26s var(--ease,cubic-bezier(.2,.8,.2,1)),background .26s}
.bk-dots i.done{background:var(--leaf-soft)}
.bk-dots i.now{width:26px;background:var(--leaf)}
.bk-nav{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.bk-nav [hidden]{display:none}
.bookform .bk-nav .btn{margin-top:4px}
.bookform.bk-on .bk-nav .bk-next,.bookform.bk-on .bk-nav .bk-send{margin-left:auto}
.bookform .bk-back{padding-left:22px;padding-right:22px}
@keyframes bk-in-r{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes bk-in-l{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.bookform .bk-step.bk-fwd{animation:bk-in-r .26s var(--ease,cubic-bezier(.2,.8,.2,1))}
.bookform .bk-step.bk-bwd{animation:bk-in-l .26s var(--ease,cubic-bezier(.2,.8,.2,1))}
/* sent: a green tick draws itself above the thank-you words */
.bk-tick{display:block;width:64px;height:64px;margin:0 0 14px}
.bk-tick circle{fill:var(--tint);stroke:var(--leaf);stroke-width:2.5;stroke-dasharray:146;stroke-dashoffset:146;transform:rotate(-90deg);transform-origin:50% 50%;
  animation:bk-draw .55s var(--ease,cubic-bezier(.2,.8,.2,1)) forwards}
.bk-tick path{fill:none;stroke:var(--leaf);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:32;stroke-dashoffset:32;
  animation:bk-draw .36s .4s var(--ease,cubic-bezier(.2,.8,.2,1)) forwards}
@keyframes bk-draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){
  .ba-pill,.ba-knob,.hl-on ol.pts.steps.how3 li::before,.helpcards .helpcard,.hc-img img,.bookform .bk-pills label,.bk-dots i{transition:none!important}
  .helpcards .helpcard:hover{transform:none}
  .helpcards .helpcard:hover .hc-img img{transform:none}
  .bookform .bk-step.bk-fwd,.bookform .bk-step.bk-bwd,.bk-tick circle,.bk-tick path{animation:none!important;stroke-dashoffset:0}
}
/* ===== PAGES lane (2026-10-18): the nav's design sense on the food, diet chart, calculator, guide and glossary pages
   (pages.js; tools.js for the sliders). Tokens come from the shared set, with their values as fallbacks. Nothing here
   starts hidden or short unless pages.js put the class on it, so without the script and under reduced motion every
   bar, bowl and pane is at its final state. ===== */
.gpeek,.otp,.rprog{--pg-ease:var(--ease,cubic-bezier(.2,.8,.2,1))}
/* 8: bars that grow once as they come into view (pages.js adds .pg-grow only to ones still below the screen) */
.pairs.pg-grow .track i,.mbar.pg-grow i{transform:scaleX(0);transform-origin:0 50%}
.pairs.pg-grow.pg-in .track i{transform:none;transition:transform .8s var(--ease,cubic-bezier(.2,.8,.2,1)) calc(var(--k,0) * 70ms)}
.mbar.pg-grow.pg-in i{transform:none;transition:transform .7s var(--ease,cubic-bezier(.2,.8,.2,1)) .05s}
svg.energybar.pg-grow{clip-path:inset(0 100% 0 0)}
svg.energybar.pg-grow.pg-in{clip-path:inset(0 0 0 0);transition:clip-path 1.1s var(--ease,cubic-bezier(.2,.8,.2,1))}
/* 11: calculator sliders are a phone thing (phone.css shows them) */
.tool input.slide{display:none}
.tool input.slide{-webkit-appearance:none;appearance:none;width:100%;max-width:none;height:44px;margin:4px 0 0;padding:0;border:0;
  background:transparent;border-radius:var(--r-pill,999px);cursor:pointer;--p:50%}
.tool input.slide:focus{outline:none}
.tool input.slide:focus-visible{outline:none}
.tool input.slide:focus-visible::-webkit-slider-thumb{outline:3px solid var(--leaf-dark);outline-offset:2px}
.tool input.slide:focus-visible::-moz-range-thumb{outline:3px solid var(--leaf-dark);outline-offset:2px}
.tool input.slide::-webkit-slider-runnable-track{height:10px;border-radius:var(--r-pill,999px);
  background:linear-gradient(var(--leaf),var(--leaf)) 0 0/var(--p) 100% no-repeat,var(--band)}
.tool input.slide::-moz-range-track{height:10px;border-radius:var(--r-pill,999px);background:var(--band)}
.tool input.slide::-moz-range-progress{height:10px;border-radius:var(--r-pill,999px);background:var(--leaf)}
.tool input.slide::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-10px;border-radius:50%;background:#fff;
  border:2px solid var(--leaf);box-shadow:var(--shadow-1)}
.tool input.slide::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid var(--leaf);
  box-shadow:var(--shadow-1)}
.tool input.slide.idle::-webkit-slider-runnable-track{background:var(--band)}
.tool input.slide.idle::-webkit-slider-thumb{border-color:var(--control)}
.tool input.slide.idle::-moz-range-progress{background:transparent}
.tool input.slide.idle::-moz-range-thumb{border-color:var(--control)}
/* 12: long guides: "On this page", a floating glass pill bottom left that opens the guide's sections as a card */
.otp{position:fixed;z-index:40;left:24px;bottom:24px;opacity:0;transform:translateY(12px);pointer-events:none;visibility:hidden;
  transition:opacity .22s,transform .3s var(--pg-ease),visibility 0s .3s}
.otp.on{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .22s,transform .3s var(--pg-ease)}
.otp-btn{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 20px 0 16px;cursor:pointer;
  font:600 15px/1 var(--sans);color:var(--leaf-dark);border:1px solid rgba(206,219,194,.85);border-radius:var(--r-pill,999px);
  background:var(--glass);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
  box-shadow:var(--shadow-2);transition:background-color .2s}
.otp-btn:hover,.otp.open .otp-btn{background:#fff}
.otp-btn:focus-visible{outline:2px solid var(--leaf);outline-offset:3px}
.otp-i{width:16px;height:11px;background:linear-gradient(currentColor,currentColor) 0 0/100% 2px no-repeat,
  linear-gradient(currentColor,currentColor) 0 50%/70% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 100%/85% 2px no-repeat}
.otp-card{position:absolute;left:0;bottom:calc(100% + 10px);width:min(340px,calc(100vw - 48px));max-height:min(62vh,540px);overflow:auto;
  overscroll-behavior:contain;box-sizing:border-box;padding:16px 8px 8px;background:#fff;border:1px solid var(--rule);border-radius:var(--r-lg);
  box-shadow:var(--shadow-2);transform-origin:22px 100%;
  opacity:0;transform:translateY(8px) scale(.96);transition:opacity .2s,transform .28s var(--pg-ease)}
.otp.open .otp-card{opacity:1;transform:none}
.otp-h{font-weight:600;font-size:14px;color:var(--muted);margin:0 12px 4px}
.otp ol{list-style:none;margin:0;padding:0}
.otp ol a{display:flex;align-items:center;min-height:44px;box-sizing:border-box;padding:6px 12px;border-radius:var(--r-sm,10px);color:var(--ink);
  text-decoration:none;font-size:16px;line-height:1.3}
.otp ol a:hover{background:var(--tint)}
.otp ol a[aria-current]{background:var(--band);color:var(--leaf-dark);font-weight:600}
.otp ol a:focus-visible{outline:2px solid var(--leaf);outline-offset:-2px}
/* 12: the reading line along the bottom edge of the floating bar */
.rprog{position:absolute;left:28px;right:28px;bottom:-1px;height:2px;border-radius:var(--r-pill,999px);overflow:hidden;opacity:0;
  pointer-events:none;transition:opacity .25s}
.rprog i{display:block;height:100%;background:var(--leaf);transform:scaleX(0);transform-origin:0 50%}
@media(min-width:761px){.nav-float.reading:not(.nav-open) nav.top .rprog{opacity:1}}
/* 13: glossary previews: a small floating card with the word's one line and a way to read more */
.gpeek{position:absolute;z-index:60;box-sizing:border-box;padding:14px 18px 6px;background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border:1px solid var(--rule);
  border-radius:var(--r-md,16px);box-shadow:var(--shadow-2);
  opacity:0;transform:translateY(4px) scale(.98);transform-origin:24px 0;transition:opacity .18s,transform .22s var(--pg-ease)}
.gpeek.above{transform-origin:24px 100%;transform:translateY(-4px) scale(.98)}
.gpeek.in{opacity:1;transform:none}
.gpeek:focus{outline:none}
.gpeek:focus-visible{outline:2px solid var(--leaf);outline-offset:2px}
.gpeek .gp-t{font:600 20px/1.2 var(--sans);color:var(--leaf-dark);margin:0 0 4px}
.gpeek .gp-m{font-size:15.5px;line-height:1.45;color:var(--ink);margin:0}
.gpeek .gp-more{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:15px;color:var(--leaf-dark)}
.gpeek .gp-more:after{content:"\203A";margin-left:6px;font-size:18px;line-height:1}
@media only print{.otp,.gpeek,.rprog{display:none!important}.pg-grow i,.pg-grow .track i{transform:none!important}svg.pg-grow{clip-path:none!important}}

/* ===== QUOTES lane (2026-10-18, option A "result first"): every client quote is a floating card. The result and where it
   was said on top, her key line as the headline, the full words folded to three lines under it (pages.js adds Read all;
   without the script every word shows), then her face and name. ===== */
.testimonial,.quotes3 .testimonial,.strip .testimonial{break-inside:avoid;margin:0 0 20px;display:flex;flex-direction:column;gap:12px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md,16px);box-shadow:var(--shadow-1);padding:22px 22px 14px}
.quotes3 .testimonial,.strip .testimonial{margin:0}
.testimonial[hidden]{display:none}
.testimonial .q-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.testimonial .q-res{background:var(--tint);color:var(--leaf-dark);border-radius:var(--r-pill,999px);padding:3px 12px;font:600 14px/1.5 var(--sans)}
.testimonial .q-src{margin-left:auto;font-size:14px;color:var(--muted)}
.testimonial .q-gist{margin:0;font:600 21px/1.35 var(--sans);color:var(--leaf-dark)}
.testimonial .q-full{margin:0;font-size:16px;line-height:1.65;color:var(--muted)}
.testimonial.folded .q-full{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.testimonial .q-who{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.testimonial .q-who img,.testimonial .q-who .initials{width:44px;height:44px;flex:0 0 44px;border-radius:50%;font-size:17px;border:1px solid var(--line)}
.testimonial cite{flex:1;font:600 15px/1.35 var(--sans);font-style:normal;color:var(--ink)}
.testimonial .q-more{min-height:44px;padding:0 2px;background:none;border:0;border-radius:var(--r-sm,10px);font:600 15px var(--sans);color:var(--leaf);white-space:nowrap;cursor:pointer}
.testimonial .q-more:hover{text-decoration:underline;text-underline-offset:3px}
@media (hover:hover){
  .testimonial{transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
  .testimonial:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)}
}
@media (prefers-reduced-motion:reduce){.testimonial{transition:none}.testimonial:hover{transform:none}}
/* a goal page's few stories sit in an even grid; the stories page keeps its columns, which suit 22 cards of every length */
.quotes:not(#storyquotes){columns:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;align-items:start;margin-bottom:18px}
.quotes:not(#storyquotes) .testimonial{margin:0}
/* the WhatsApp check-ins: each result a small card, the number first */
.checkins{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.checkins li{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-md,16px);box-shadow:var(--shadow-1);padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.checkins b{font:600 21px/1.25 var(--sans);color:var(--leaf-dark)}
.checkins span{font-size:15px;color:var(--muted)}

/* ===== LISTS lane (2026-10-18): plain bullet lists in the nav's design sense. Short words (what I change, who I work
   with) are pills; statements (what I believe, what every plan includes, how I work on each goal) are rounded rows with a
   green tick. Questions are cards. The words are the same; only their shape changes. ===== */
ul.pts.tags{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:12px 0 18px}
ul.pts.tags li{margin:0;padding:6px 15px;border-radius:var(--r-pill,999px);background:var(--tint);border:1px solid rgba(127,168,78,.28);color:var(--leaf-dark);font-weight:500;line-height:1.45}
ul.pts.tags li::before{display:none}
ul.pts.checks{display:grid;gap:10px;padding:0;margin:12px 0 18px}
ul.pts.checks li{margin:0;padding:12px 16px 12px 48px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md,16px);line-height:1.55}
ul.pts.checks li::before{left:15px;top:14px;width:22px;height:22px;border-radius:50%;
  background:var(--leaf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat}
.pricebox ul.pts.checks li{background:var(--tint);border-color:rgba(127,168,78,.22)}
.dk .qa{background:#fff;border:1px solid var(--line);border-radius:var(--r-md,16px);box-shadow:var(--shadow-1);padding:18px 22px;margin:0 0 12px}
.dk .qa h3{margin:0 0 6px}
.dk .qa p{margin:0}

/* ===== PROOF lane (2026-10-18): the strip under the hero says words, not numbers (no client count, no years) ===== */
ul.stats.words b{font-size:30px;line-height:1.15}
ul.stats.words span{max-width:24ch;margin:6px auto 0}

/* ===== SCREENS lane (2026-10-18): clients' own messages as raw screenshots on /stories/, in rounded frames that
   lift; a tap opens the full screenshot over the page (pages.js), or the image itself without the script. ===== */
.shots{columns:4 220px;column-gap:18px}
.shot{break-inside:avoid;margin:0 0 18px}
.shot a{display:block;border-radius:var(--r-md,16px);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-1);background:#fff}
.shot img{display:block;width:100%;height:auto;max-height:640px;object-fit:cover;object-position:top}
.shot figcaption{margin:8px 4px 0;font-size:15px;color:var(--muted)}
.shots.folded .shot:nth-child(n+9){display:none}
.shots-more{display:flex;margin:6px auto 0}
@media (hover:hover){
  .shot a{transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
  .shot a:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)}
}
@media (prefers-reduced-motion:reduce){.shot a{transition:none}.shot a:hover{transform:none}}
.shotview{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:24px;background:rgba(20,28,14,.62);
  -webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter)}
.shotview[hidden]{display:none}
.shotview img{max-width:min(92vw,520px);max-height:84vh;width:auto;height:auto;border-radius:var(--r-lg);box-shadow:var(--shadow-2);background:#fff}
.shotview button{position:absolute;min-width:44px;min-height:44px;border:0;border-radius:var(--r-pill,999px);background:var(--glass);
  -webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);color:var(--leaf-dark);font:600 16px var(--sans);padding:0 16px;cursor:pointer;box-shadow:var(--shadow-1)}
.shotview .sv-x{top:18px;right:18px}
.shotview .sv-prev{left:18px;top:50%;transform:translateY(-50%)}
.shotview .sv-next{right:18px;top:50%;transform:translateY(-50%)}
.shotview button:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* ===== IVORY FOUNDATION (2026-10-19, the client's ivory and white spec): Inter everywhere, ink headings at regular weight,
   links in the text colour, one solid button in the logo green with bold white text and an outline one with dark text,
   the small spaced section label, a white header with the real logo, a light closing section and an ivory footer, and
   forms on white with hairlines. Green is never a background, a band or a heading. Page parts are the PAGES and HOME
   lanes'; this block is the shared base they sit on. ===== */
body{font-family:var(--sans);font-size:17px;line-height:1.65;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,p.h2{font-family:var(--sans);color:var(--ink)}
h1,h2,p.h2{font-weight:400;letter-spacing:-.02em;line-height:1.12}
h1 b,h2 b{font-weight:700}
h2{font-size:40px}
h3{font-weight:500;letter-spacing:-.01em;line-height:1.25;color:var(--ink)}
.hero h1,.hero.has-img h1{font-weight:400}
.band{background:var(--ivory)}
a{color:var(--ink);text-decoration-color:rgba(36,33,30,.38);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-color:currentColor}
.small,.wa-note{color:var(--soft)}
:focus-visible{outline:2px solid var(--green-ink);outline-offset:2px}
.band :focus-visible,.closing :focus-visible,footer :focus-visible{outline-color:var(--ink)}
.skip{background:var(--ink)}

/* the section label: the one place letters are spaced out and set in capitals (tests/design_rules.py) */
.label{display:block;margin:0 0 14px;font-family:var(--sans);font-size:12.5px;font-weight:500;line-height:1.4;letter-spacing:.22em;text-transform:uppercase;color:var(--label)}

/* buttons: the main one solid logo green with bold white 19 px text (large text, so it keeps AA on the green), the second
   white with a green outline and dark text; both fully rounded and at least 44 px tall */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0;min-height:48px;padding:11px 28px;border:1.5px solid var(--green-fill);
  border-radius:var(--r-pill);background:var(--green-fill);color:#fff;font:700 19px/1.2 var(--sans);letter-spacing:0;text-align:center;text-decoration:none;
  box-shadow:none;cursor:pointer}
.btn:hover{background:#688C49;border-color:#688C49;color:#fff;box-shadow:none}
.btn.ghost{background:var(--white);border-color:var(--green);color:var(--ink);font-weight:500}
.btn.ghost:hover{background:var(--ivory);border-color:var(--green);color:var(--ink)}
.btn.quiet,.pricebox a.quiet,.strip-nav button,.more-btn{background:var(--white);border:1px solid var(--hair);color:var(--ink);font:500 16px/1.2 var(--sans)}
.btn.quiet:hover,.pricebox a.quiet:hover,.strip-nav button:hover,.more-btn:hover{background:var(--ivory);border-color:var(--hair)}
.tool .btn.go,.goalcard .btn{font-size:19px}
/* the second button carries no WhatsApp mark (the spec's outline button is words only); the line under the pair says where it goes */
a.btn.ghost[href^="https://wa.me/"]::before{content:none}
.read>.btn{margin-top:22px}

/* the header on a laptop: white, a hairline under it, the logo on the left; the links and Book a call on the right */
nav.top{background:var(--white)}
nav.top .mark{display:flex;align-items:center;min-height:44px;font-size:0}
nav.top .logo,.pbar .logo{display:block;width:auto;height:44px}
.nav-js nav.top{box-shadow:var(--shadow-top)}
nav.top .links a{color:var(--ink);font-size:15.5px;font-weight:500}
nav.top .links a:hover,nav.top .links a[aria-current]{color:var(--ink)}
nav.top .links a:not(.cta){background-image:linear-gradient(var(--ink),var(--ink))}
nav.top .links a.cta{display:inline-flex;align-items:center;min-height:44px;padding:8px 22px;background:var(--green-fill);color:#fff;font-size:19px;font-weight:700;line-height:1.2}
nav.top .links a.cta:hover{background:#688C49;color:#fff}
nav.top .menu{background:var(--white);border-color:var(--hair);color:var(--ink);font:500 15.5px/1 var(--sans)}
nav.top .menu:hover{background:var(--ivory);border-color:var(--hair)}
@media(min-width:761px){
  .nav-float nav.top{background:rgba(255,255,255,.94);border-color:var(--hair);box-shadow:var(--shadow-bar)}
  .nav-float nav.top .logo{height:36px}
  .nav-float nav.top .menu{border-color:var(--hair)}
  .navpanel .np-grid,.navpanel .np-goals{border-top-color:var(--hair)}
  .navpanel .np-h{font-size:12.5px;font-weight:500;color:var(--label)}
  .navpanel .np-col a{font:400 34px/1.2 var(--sans);letter-spacing:-.02em;color:var(--ink)}
  .navpanel .np-col a:hover,.navpanel .np-col a[aria-current]{color:var(--ink);text-decoration-color:var(--green)}
  .navpanel .np-side{background:var(--ivory);border:1px solid var(--hair)}
  .navpanel .np-line{font:400 22px/1.35 var(--sans);letter-spacing:-.01em;color:var(--ink)}
  .navpanel .np-call,.navpanel .np-call a{color:var(--soft)}
  .navpanel .np-goals a{color:var(--ink)}
  .navpanel .np-goals a:hover{color:var(--ink)}
  .nav-js .navscrim{background:rgba(36,33,30,.18)}
}

/* the closing section: light, never the green band; the buttons are the page's own */
.closing{background:var(--white);color:var(--ink);border-top:1px solid var(--hair)}
.closing h2,.closing.big h2{color:var(--ink)}
.closing a{color:var(--ink)}
.closing .btn{background:var(--green-fill);border-color:var(--green-fill);color:#fff}
.closing .btn:hover{background:#688C49;border-color:#688C49;color:#fff}
.closing .btn.ghost{background:var(--white);border-color:var(--green);color:var(--ink)}
.closing .btn.ghost:hover{background:var(--ivory);border-color:var(--green);color:var(--ink)}
.closing .wa-note,.closing .wa-note a{color:var(--soft)}

/* the footer: ivory, a hairline over it, the logo and her line, then every link it has always had, quietly */
footer{background:var(--ivory);color:var(--soft);border-top:1px solid var(--hair);border-radius:0;margin-top:0;padding:44px 0 48px;font-size:15px}
main>:last-child{border-bottom:0}
footer a{color:var(--ink);font-weight:500;text-decoration:none}
footer a:hover{color:var(--ink);text-decoration:underline}
.foot b{color:var(--ink)}
.foot .flogo{display:inline-block}
@media(min-width:761px){.foot{grid-template-columns:1.7fr 1fr 1fr 1fr}}
.foot .flogo img{display:block;width:auto;height:40px}
.foot .who p{margin:0}
.foot .who .by{margin-top:12px;color:var(--soft);font-size:15px;line-height:1.5}
.foot .who .reach{margin-top:6px;line-height:1.9}
.foot .who .reach a{margin-right:14px;font-weight:400;color:var(--soft)}
.foot .fine{border-top:1px solid var(--hair);color:var(--label);font-size:13px;line-height:1.6}
.foot .fine a{color:var(--label);font-weight:400;text-decoration:underline}

/* forms: white fields, a warm hairline you can still see, rounded; the focus ring in the ink green */
.search,.tool input:not([type=radio]):not([type=checkbox]):not([type=range]),.tool select,.bookform input:not([type=radio]),.bookform select,.bookform textarea{background:var(--white);
  border:1px solid var(--control);color:var(--ink);font-family:var(--sans)}
.search:focus,.tool input:focus,.tool select:focus,.bookform input:focus,.bookform select:focus,.bookform textarea:focus{outline:2px solid var(--green-ink);outline-offset:1px;border-color:var(--green-ink)}
.bookform label,.bookform .lbl{color:var(--ink)}
.bookform .opt,.bookform .hint,.bk-prog{color:var(--soft)}
.bookform .bk-h,.book-done h3{font-weight:400;letter-spacing:-.01em;color:var(--ink)}
.bookform .bk-pills label{border:1px solid var(--control);background:var(--white);color:var(--ink)}
.bookform .bk-pills label:hover{border-color:var(--green)}
.bookform .bk-pills input:checked+label{background:var(--ivory);border-color:var(--green);color:var(--ink);font-weight:600}
.bookform .bk-pills input:checked+label::before{border-color:var(--green)}
.bookform .bk-pills input:focus-visible+label{outline:2px solid var(--green-ink)}
.notebook,.note,.book-nojs,blockquote.pull{border-color:var(--hair)}
.bk-dots i.now{background:var(--green)}
/* the calculators' sliders on phones: a hairline track filled in the logo green, on the ivory panel */
.tool input.slide::-webkit-slider-runnable-track{background:linear-gradient(var(--green),var(--green)) 0 0/var(--p) 100% no-repeat,var(--hair)}
.tool input.slide::-moz-range-track{background:var(--hair)}
.tool input.slide::-moz-range-progress{background:var(--green)}
.tool input.slide.idle::-webkit-slider-runnable-track{background:var(--hair)}
.tool input.slide::-webkit-slider-thumb{border-color:var(--green)}
.tool input.slide::-moz-range-thumb{border-color:var(--green)}
.tool input.slide.idle::-webkit-slider-thumb{border-color:var(--control)}
.tool input.slide.idle::-moz-range-thumb{border-color:var(--control)}
.book-sheet .sh h2{font-weight:400;letter-spacing:-.02em}
@media (min-width:761px){
  .book-sheet.open{border:1px solid var(--hair);box-shadow:var(--shadow-2)}
  .book-sheet .x{border:1px solid var(--hair);color:var(--ink);font-weight:500}
  .book-sheet .x:hover{background:var(--ivory)}
  body.open:has(.book-sheet.open) .scrim{background:rgba(36,33,30,.24)}
  .sec.book-sec{background:var(--ivory)}
  .book-sec .bookform,.book-sec .book-done{border-color:var(--hair)}
}
/* ===== end IVORY FOUNDATION ===== */
/* ===== IVORY PAGES (2026-10-19): every page but the home page in the client's ivory and white. White and ivory sections
   in turn, hairline cards, ink and soft text, Inter everywhere; logo green only for small markers, ticks, arrows, step
   numbers and the buttons (the FOUNDATION block), its darker ink green for green words at text size. Heroes are ivory with
   a small spaced label (the breadcrumb, the searched words, or the page's own name) over a light, large heading. The
   colours are the FOUNDATION tokens by name, each with its value as the fallback. ===== */
/* heroes */
.band{background:var(--ivory,#FCFAF6);border-bottom:1px solid var(--hair,#EEE9E1)}
.hero{padding:64px 0 72px}
.hero.has-img{padding:48px 0 56px;gap:64px}
.hero h1,.hero.has-img h1,.hero.compact h1{font-family:inherit;font-weight:400;color:var(--ink);line-height:1.1}
.hero h1{font-size:52px}
.hero.has-img h1{font-size:54px}
.hero.compact{padding:26px 0 20px}
.hero.compact h1{font-size:38px}
.hero .txt>p,.hero .txt .intro p{color:var(--soft,#6B635B);font-size:19px;line-height:1.65}
.hero .txt>p.label,.hero .txt>p.crumbs{margin:0 0 16px}
.hero.compact .txt>p.label,.hero.compact .txt>p.crumbs{margin-bottom:12px}
h1 .h1sub{font-weight:400;color:var(--soft,#6B635B);margin-top:12px}
.hero .txt>p.label{font-size:12.5px;line-height:1.6;max-width:none;color:var(--label,#776E65)}
main h2 a,main h3 a,.goal-card h2 a,.goal-card h3 a{color:inherit;text-decoration:none}
main h2 a:hover,main h3 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
/* the label line: the breadcrumb, quiet, its links in soft ink (soft ink: a touch more contrast for links this small) */
.crumbs,.hero .txt>p.crumbs{display:block;padding:0;background:none;border:0;border-radius:0;font-size:12.5px;line-height:1.6;color:var(--label,#776E65)}
.crumbs a,.hero .txt>p.crumbs a{color:var(--soft,#6B635B);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
/* the searched words over a voice-line heading: a label when they lead, a soft line under a breadcrumb */
h1 .eyebrow{font-family:inherit;font-size:12.5px;font-weight:500;line-height:1.6;color:var(--label,#776E65);margin-bottom:16px}
.crumbs+h1 .eyebrow{text-transform:none;letter-spacing:0;font-size:17px;font-weight:500;color:var(--soft,#6B635B);margin:-6px 0 10px}
.hero-img,.hero-img[src^="/assets/foods/"],.hero.has-img svg.food-sketch{border-radius:var(--r-lg);outline:0}
.byline{color:var(--soft,#6B635B)}
.byline a{color:var(--soft,#6B635B)}

/* sections: white and ivory in turn; a hairline only where two of one colour meet */
.sec{background:#fff;border-top:0}
.sec.tint{background:var(--ivory,#FCFAF6)}
.sec:not(.tint)+.sec:not(.tint),.sec.tint+.sec.tint{border-top:1px solid var(--hair,#EEE9E1)}
main h2,main p.h2,.goal-card h2,.diet-group h2,.goalcard h2{font-family:inherit;font-weight:400;color:var(--ink);line-height:1.15}
main h3,.meal-card h3,.goal-card h3,.hscroll .panel h3,.book-done h3{font-family:inherit;font-weight:600;color:var(--ink);line-height:1.3}
main h3{font-size:20px}
.meal-card h3 span,.hscroll .panel h3 span{font-family:inherit;color:var(--soft,#6B635B)}
.small,.src,.wa-note,.fatkey,.goalkey>span:first-child{color:var(--soft,#6B635B)}
.def{font-family:inherit;font-weight:400;font-size:22px;line-height:1.5;color:var(--ink)}

/* cards: white on ivory, white on white with a hairline; no green rules, a whisper of shadow at most */
.goal-card,.diet-group,.quotes3 .testimonial,.strip .testimonial,.testimonial,.quals li,.glance,.toc,.portions figure,dl.factrow>div,
.hscroll .panel:not(.lead),.goalcard,.pricebox,.pricecard,.checkins li,.meals .meal-card,.fgrid .fcard,.ba-grid figure,.shot a,
details.grp,.dk .qa{background:#fff;border:1px solid var(--hair,#EEE9E1)}
.goal-card,.diet-group,.quals li,.toc,.portions figure,dl.factrow>div,.checkins li,.meals .meal-card,.dk .qa,details.grp,.testimonial,.shot a{border-radius:var(--r-md)}
.goalcard,.pricebox,.pricecard,.glance,.ba-grid figure{border-radius:var(--r-lg)}
.quals li,.pricecard,.goalcard{border-top:1px solid var(--hair,#EEE9E1)}
@media(min-width:761px){ol.steps:not(.pts) li{background:#fff;border:1px solid var(--hair,#EEE9E1);border-radius:var(--r-md)}}
@media(hover:hover) and (min-width:761px){
  .fgrid .fcard:hover,.shot a:hover,.testimonial:hover{box-shadow:var(--shadow-1);transform:translateY(-2px);border-color:var(--hair,#EEE9E1)}
  .fgrid .fcard:hover .fname{color:var(--ink);text-decoration:underline}
}

/* step numbers: green figures, no discs */
ol.steps .sn,.rows .num{width:auto;height:auto;border-radius:0;background:none;color:var(--green-ink,#4C7535);font-weight:500;font-size:30px;line-height:1;font-family:inherit;text-align:left}
ol.steps .sn{display:block;margin-bottom:12px}
ol.steps b{font-weight:600;color:var(--ink)}
ol.steps p{color:var(--soft,#6B635B)}
ol.pts li::before{width:auto;height:auto;border-radius:0;background:none;color:var(--green-ink,#4C7535);font-weight:600;font-size:15px;line-height:1.55;font-family:inherit;text-align:left;top:3px}
ol.pts.steps li::before{width:auto;height:auto;background:none;color:var(--green-ink,#4C7535);font-weight:500;font-size:24px;line-height:1.1;font-family:inherit;top:13px}
ol.pts.steps li,ol.pts.steps li:last-child{border-color:var(--hair,#EEE9E1)}
ul.pts li::before{width:6px;height:6px;left:8px;top:calc(3px + .78em - 3px);background:var(--green,#7BA05B)}

/* lists in the LISTS lane's shapes: plain words, a white pill, a green tick */
ul.pts.tags li{background:#fff;border:1px solid var(--hair,#EEE9E1);color:var(--ink);font-weight:500}
ul.pts.checks{gap:4px}
ul.pts.checks li,.pricebox ul.pts.checks li{background:none;border:0;border-radius:0;padding:6px 0 6px 32px;font-weight:500}
ul.pts.checks li::before{left:2px;top:12px;width:14px;height:8px;border-radius:0;background:none;border-left:2px solid var(--green,#7BA05B);
  border-bottom:2px solid var(--green,#7BA05B);transform:rotate(-45deg)}
ul.ticks li::before{border-color:var(--green,#7BA05B)}
ul.ticks li{font-weight:500}

/* notes and quotes: an ivory note on white, a white one on ivory; a pull quote is plain, large type */
.notebook,.note,.book-nojs{background:var(--ivory,#FCFAF6);border:1px solid var(--hair,#EEE9E1);border-radius:var(--r-md)}
.sec.tint .notebook,.sec.tint .note,.hero .notebook,.hero .note,.sec.book-sec .book-nojs{background:#fff}
.notebook .nb-title{color:var(--ink);font-weight:600}
.notebook a{color:inherit}
blockquote.pull,.sec.tint blockquote.pull{background:none;border:0;border-radius:0;padding:4px 0;margin:22px 0}
blockquote.pull p{font-weight:400;font-size:24px;line-height:1.4;font-family:inherit;color:var(--ink)}
blockquote.pull.result p{font-weight:400;font-size:18px;line-height:1.6;font-family:inherit}

/* chips, switches and filters: white pills with a hairline; the one you are on is outlined in green, its words in ink */
.inline-links a{background:#fff;border:1px solid var(--hair,#EEE9E1);color:var(--ink)}
.inline-links a:hover,.switch a:hover,a.chip:hover,.storychips button:hover{background:var(--ivory,#FCFAF6);border-color:var(--label,#776E65)}
.inline-links a[aria-current],.switch span,.switch span.on,.storychips button.on{background:#fff;border:1.5px solid var(--green,#7BA05B);color:var(--ink);font-weight:600}
.storychips button.on span{color:var(--soft,#6B635B)}
.switch a{border-color:var(--hair,#EEE9E1)}
.switch b,.goalkey>span:first-child{color:var(--soft,#6B635B);font-weight:500}
a.chip,.diet-group a.chip{background:#fff;border:1px solid var(--hair,#EEE9E1);color:var(--ink)}
a.chip:focus-visible{background:#fff;color:var(--ink)}
a.chip small{color:var(--soft,#6B635B);opacity:1}
.storychips button{background:#fff;border-color:var(--hair,#EEE9E1);font-family:inherit}
.src-tag{background:var(--ivory,#FCFAF6);border-color:var(--hair,#EEE9E1);color:var(--soft,#6B635B);font-family:inherit}
.diet-row,.day-list li,.meal-card li,.hscroll .panel li,.lib li,.food-rows li,.food-rows li:first-child,.gterms a,.glance-top,.glance-goals,.glance-goals li,
.verdicts .row,.facts th,.facts td,.cmpgrid th,.cmpgrid td,.thali-row,form.tool .result,.result,details.fold,.toc{border-color:var(--hair,#EEE9E1)}
.day-list .t,.day-list .kc,.food-rows .fr-why,.hscroll .panel li .kc,.diet-group p,.gterms .gmean{color:var(--soft,#6B635B)}
.daytotal,.total{color:var(--ink)}
.total b{font-family:inherit;font-weight:700}

/* tables: a white frame, an ivory head, hairline rows */
table.facts,table.cmpgrid{border:1px solid var(--hair,#EEE9E1);background:#fff}
.facts th,.cmpgrid thead th{background:var(--ivory,#FCFAF6);color:var(--soft,#6B635B);border-bottom:1px solid var(--hair,#EEE9E1)}
.facts tr.total td{background:var(--ivory,#FCFAF6);border-top-color:var(--hair,#EEE9E1)}
.cmpgrid td.win{background:var(--ivory,#FCFAF6);font-weight:600}
.cmpgrid .pick{color:var(--green-ink,#4C7535);font-weight:500}
table.compact tr.grouphead th,table.compact tr.grouphead th.span+th.span{border-color:var(--hair,#EEE9E1)}

/* verdicts keep their meaning in their own deep colours, as words; the rows are plain */
.verdicts .cond{color:var(--ink)}
.pair .track,.mbar{background:#F3EFE8}
.pair .track i{border-color:rgba(36,33,30,.55)}
.pair .pn{color:var(--soft,#6B635B)}
.portions figcaption{color:var(--soft,#6B635B)}
.portions figcaption b{font-family:inherit;font-weight:600;color:var(--ink)}

/* the foods finder, its cards and the glossary letters */
.fcard .fblank{background:var(--ivory,#FCFAF6)}
.fcard img,.hero-img[src^="/assets/foods/"],.fcard .fblank{outline-color:rgba(36,33,30,.08)}
.fcard .fmeta,.fcard .fgroup{color:var(--soft,#6B635B)}
.ffilters label{color:var(--soft,#6B635B)}
.ffilters label.check input,.tool .hunit input,.tool .gunit input,.tool .tunit input{accent-color:var(--green,#7BA05B)}
.az,.ffilters:not(.gfilter){border-color:var(--hair,#EEE9E1);background:rgba(255,255,255,.92)}
.az a{color:var(--ink)}
.az a:hover{background:var(--ivory,#FCFAF6)}
.gterms a b{color:var(--ink);font-weight:600}
.lib li>a:first-child{color:var(--ink);text-decoration-color:var(--label,#776E65);text-decoration-thickness:1px}
.lib li>a:first-child:hover{text-decoration-color:var(--ink)}
.glance-h{font-family:inherit;font-weight:600;color:var(--ink)}
.glance-nums b{font-family:inherit;font-weight:700;letter-spacing:0}
.glance-serv,.glance-nums span{color:var(--soft,#6B635B)}

/* calculators: an ivory panel on white, the answer a white card on it, the number bold */
.tool{background:var(--ivory,#FCFAF6);border:1px solid var(--hair,#EEE9E1);border-radius:var(--r-lg)}
form.tool .result,form.tool .result.is-example{background:#fff;border:1px solid var(--hair,#EEE9E1);border-radius:var(--r-md);box-shadow:var(--shadow-1)}
.result .big{font-family:inherit;font-weight:700;color:var(--ink)}
.result.is-example .big{color:var(--soft,#6B635B)}
.result .example,.result.is-example .example{background:var(--ivory,#FCFAF6);border:0;color:var(--soft,#6B635B)}
.result .prompt,.tool .pair span{color:var(--soft,#6B635B)}
.tool label,.tool .hunit legend,.tool .gunit legend,.tool .tunit legend{color:var(--ink)}
.linkbtn{color:var(--green-ink,#4C7535);font-weight:500}
.thali-row .remove{color:var(--limit)}
.tool input.slide::-webkit-slider-runnable-track{background:linear-gradient(var(--green,#7BA05B),var(--green,#7BA05B)) 0 0/var(--p) 100% no-repeat,var(--hair,#EEE9E1)}
.tool input.slide::-moz-range-track{background:var(--hair,#EEE9E1)}
.tool input.slide::-moz-range-progress{background:var(--green,#7BA05B)}
.tool input.slide::-webkit-slider-thumb{border-color:var(--green,#7BA05B);box-shadow:var(--shadow-1)}
.tool input.slide::-moz-range-thumb{border-color:var(--green,#7BA05B)}
.tool input.slide.idle::-webkit-slider-runnable-track{background:var(--hair,#EEE9E1)}
.tool input.slide.idle::-webkit-slider-thumb,.tool input.slide.idle::-moz-range-thumb{border-color:var(--label,#776E65)}

/* groups that open: ink names, a green chevron */
details.grp summary{color:var(--ink);font-family:inherit}
details.grp summary::after{border-color:var(--green,#7BA05B)}
details.grp .tally{color:var(--soft,#6B635B)}
details.fold>summary>h2,details.fold>summary>h3{font-family:inherit;color:var(--ink)}
ul.ea-names li:not(:last-child)::after{color:var(--label,#776E65)}
ul.ea-names-build li,ul.ea-names-keep li{color:var(--ink)}
.ea-glance h3::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin:0 10px 3px 0;vertical-align:middle;background:var(--green,#7BA05B)}
.ea-glance h3:has(+ul.ea-names-keep)::before{background:var(--limit)}

/* quote cards (stories, programs): the result in bold ink, her line as plain large type, the rest in soft ink */
.testimonial .q-res{background:none;padding:0;border-radius:0;color:var(--ink);font-weight:600;font-size:15px;line-height:1.5;font-family:inherit}
.testimonial .q-src{color:var(--soft,#6B635B)}
.testimonial .q-gist{font-weight:400;font-size:20px;line-height:1.45;font-family:inherit;color:var(--ink)}
.testimonial .q-full{color:var(--soft,#6B635B)}
.testimonial .q-who{border-top-color:var(--hair,#EEE9E1)}
.testimonial cite{font-family:inherit;color:var(--ink)}
.testimonial .q-more{font-family:inherit;color:var(--green-ink,#4C7535)}
.testimonial .initials,.testimonial .q-who .initials{background:var(--ivory,#FCFAF6);color:var(--soft,#6B635B);border:1px solid var(--hair,#EEE9E1);font-family:inherit;font-weight:600}
.testimonial .q-who img{border-color:var(--hair,#EEE9E1)}
.checkins b{font-weight:700;font-size:22px;line-height:1.25;font-family:inherit;color:var(--ink)}
.checkins span{color:var(--soft,#6B635B)}

/* About, Plans, Programs: credentials bold, prices bold, goal cards plain */
.quals b{font-family:inherit;font-weight:600}
.quals img.cert{border-color:var(--hair,#EEE9E1)}
.pricecard .amt,.pricebox .price{font-family:inherit;font-weight:600;color:var(--ink)}
.pricecard .amt span{font-family:inherit;color:var(--soft,#6B635B)}
.pricecard .from{color:var(--label,#776E65);font-weight:500}
.goalcard p{color:var(--soft,#6B635B)}
.goalcard h2{font-size:28px}
.goalcard.mini h2{font-size:23px}
dl.factrow dt{font-weight:700;font-size:26px;line-height:1.1;font-family:inherit;color:var(--ink)}
dl.factrow dt small{font-weight:500;font-size:14px;font-family:inherit;color:var(--soft,#6B635B)}
dl.factrow dd{color:var(--soft,#6B635B)}

/* drawings and media in the warm palette */
.hscroll .progress{background:var(--hair,#EEE9E1)}
.hscroll .progress i{background:var(--green,#7BA05B)}
.gvis.tl .tl-gap p{color:var(--soft,#6B635B)}
.gvis.tl .tl-gap::before{border-top-color:var(--label,#776E65)}
.gvis.tl .tl-gap::after{border-left-color:var(--label,#776E65)}
.ba-side{background:var(--ivory,#FCFAF6)}
.ba-knob{color:var(--ink)}
.vid-toggle{background:rgba(36,33,30,.66)}
.vid-toggle:hover{background:rgba(36,33,30,.88)}
.shotview{background:rgba(36,33,30,.62)}
.shotview button{color:var(--ink);font-family:inherit}
.strip-nav button,.more-btn{background:#fff;border:1px solid var(--hair,#EEE9E1);color:var(--ink);font-family:inherit}
.strip-nav button:hover{background:var(--ivory,#FCFAF6)}
.pricebox a.quiet{background:#fff;border:1px solid var(--hair,#EEE9E1);color:var(--ink);font-family:inherit}
.pricebox a.quiet:hover{background:var(--ivory,#FCFAF6)}

/* the guides' "On this page" pill and the glossary previews */
.otp-btn{color:var(--ink);border-color:var(--hair,#EEE9E1);font-family:inherit}
.otp-card,.gpeek{border-color:var(--hair,#EEE9E1)}
.otp-h{color:var(--label,#776E65)}
.toc .toc-h{color:var(--label,#776E65);font-weight:500}
.toc a{color:var(--ink);text-decoration-color:var(--label,#776E65)}
.otp ol a:hover{background:var(--ivory,#FCFAF6)}
.otp ol a[aria-current]{background:var(--ivory,#FCFAF6);color:var(--ink)}
.gpeek .gp-t{font-weight:600;font-size:18px;line-height:1.3;font-family:inherit;color:var(--ink)}
.gpeek .gp-more{color:var(--green-ink,#4C7535)}

/* the /book/ page: the form on a white card over ivory */
@media (min-width:761px){.book-sec .bookform,.book-sec .book-done{border-color:var(--hair,#EEE9E1)}}
/* ===== REELS (2026-10-20, build/reels.py, pages.js 16): Puja's and her clients' reels, 9:16, white cards with a hairline.
   Nothing plays by itself: the poster shows, the green play button (a button, so it may be green) starts it with sound,
   and the browser's own controls come back once it plays. Without the script the controls are there from the start. ===== */
.reels{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:34px 24px;margin-top:26px}
.reel{margin:0;min-width:0}
.reel-frame{position:relative;aspect-ratio:9/16;border-radius:var(--r-lg);overflow:hidden;background:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow-1)}
.reel-frame video{display:block;width:100%;height:100%;object-fit:cover;background:var(--ink)}
.reel-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;width:100%;border:0;padding:0;margin:0;
  background:transparent;cursor:pointer;color:#fff;font:inherit}
.reel-play[hidden]{display:none}
.reel-play svg{width:64px;height:64px;padding:16px 14px 16px 18px;border-radius:50%;background:var(--green-fill);fill:#fff;box-shadow:var(--shadow-2);
  transition:transform .2s var(--ease)}
.reel-play:hover svg{transform:scale(1.06)}
.reel-play:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
.reel-len{position:absolute;left:12px;bottom:12px;background:#fff;color:var(--ink);font-size:14px;font-weight:600;line-height:1;padding:6px 10px;border-radius:var(--r-pill)}
.reel figcaption{margin:14px 2px 0}
.reel .reel-t{font-size:17px;line-height:1.35;font-weight:600;color:var(--ink);margin:0 0 6px;letter-spacing:0}
.reel figcaption p{font-size:15px;line-height:1.5;color:var(--soft);margin:0}
.reel-feature{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:48px;align-items:center}
.reel-feature .reel-side h2{margin-top:0}
.reel-feature .reel-side .btn{margin-top:6px}
@media (prefers-reduced-motion: reduce){.reel-play svg{transition:none}}
/* ===== end REELS ===== */

/* ===== REELS IN A PHONE FRAME (2026-10-20, the client's pick, option A): each reel inside a dark phone outline with a
   notch, playing muted while it is the one most in view (pages.js 16). The sound switch sits top right. ===== */
:root{--r-device:34px;--r-screen:26px}
.reel-phone{position:relative;border-radius:var(--r-device);background:#24211E;padding:9px;box-shadow:var(--shadow-2)}
.reel-phone .reel-frame{border:0;border-radius:var(--r-screen);box-shadow:none}
.reel-phone .reel-frame::before{content:"";position:absolute;z-index:2;left:50%;top:8px;transform:translateX(-50%);width:34%;height:16px;border-radius:var(--r-pill);background:#24211E;pointer-events:none}
.reel-frame video{cursor:pointer}
.reel-sound{position:absolute;z-index:3;right:12px;top:12px;width:44px;height:44px;display:grid;place-items:center;border:0;padding:0;border-radius:50%;background:rgba(36,33,30,.55);color:#fff;cursor:pointer}
.reel-sound[hidden]{display:none}
.reel-sound svg{width:20px;height:20px}
.reel-sound svg .spk{fill:#fff}
.reel-sound svg .off,.reel-sound svg .on{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round}
.reel-sound svg .on{display:none}
.reel-sound.is-on svg .on{display:inline}
.reel-sound.is-on svg .off{display:none}
.reel-sound:focus-visible{outline:3px solid #fff;outline-offset:2px}
.reels-all{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:44px 28px;margin-top:0}
.reel figcaption .label{margin:0 0 6px}
.reels-all .reel{scroll-margin-top:110px}
.reel-cover{position:absolute;z-index:2;pointer-events:none;border-radius:var(--r-sm);background:rgba(36,33,30,.25);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}
.reel-cover[hidden]{display:none}
/* ===== ONE-STEP BOOKING (2026-10-21): the goal question is a plain group above the name and number ===== */
.bookform .bk-one{border:0;margin:0 0 6px;padding:0;min-width:0}
.bookform .bk-one legend{padding:0;margin-bottom:10px;font-weight:600;color:var(--ink)}
.bookform .bk-one .bk-pills{display:flex;flex-wrap:wrap;gap:8px}
/* ===== FINAL FOUNDATION (2026-10-26, the "without squares" home page the client chose, carried across the site): a warm
   cream page with no grid lines or boxed frames, Newsreader headings in a light weight with the odd word in green italics
   over Inter text, her green as the one accent, pill buttons ("Book a free consultation call", then "Ask a quick
   question"), rounded soft cards on gentle shadows, small spaced green labels, a header like the mock's, a mint booking
   band (layout.book_band) and on phones a slim booking bar after the first screen (layout.sticky_bar, nav.js). Tokens are
   at the top of this file; page parts belong to the FINAL HOME and FINAL PAGES blocks. ===== */
html{background:var(--paper)}
body{font-family:var(--sans);font-size:17px;line-height:1.6;color:var(--ink);background:var(--paper);font-feature-settings:"cv11","ss01"}
/* sections sit on the page's cream (no white slabs); a tinted section is the mock's deeper cream */
.sec{background:transparent}
.sec.tint{background:var(--cream)}
::selection{background:var(--mint);color:var(--ink)}
/* headings: Newsreader, light, a hair tight; words in <em> turn green italics */
h1,h2,p.h2,main h2,main p.h2,.hero h1,.hero.has-img h1,.hero.compact h1,.closing h2,.closing.big h2{font-family:var(--serif);font-weight:300;
  font-variation-settings:"opsz" 72;letter-spacing:-.022em;color:var(--ink)}
h1{line-height:1.02}
h2,p.h2,main h2,main p.h2{line-height:1.06}
h3,main h3{font-family:var(--serif);font-weight:400;font-variation-settings:"opsz" 36;letter-spacing:-.01em;line-height:1.2;color:var(--ink)}
main h3{font-size:22px}
h2{font-size:42px}
.hero h1,.hero.has-img h1{font-size:clamp(44px,5vw,68px)}
.hero.compact h1{font-size:clamp(36px,3.6vw,48px)}
h1 em,h2 em,h3 em,p.h2 em,.bd-l em{font-style:italic;font-weight:inherit;color:var(--green)}
h1 b,h2 b{font-weight:500}
/* the small parts inside a heading stay in the text face */
h1 .label,h1 .eyebrow,h2 .label,h3 .label,h1 .vh{font-family:var(--sans);font-variation-settings:normal}
.small,.wa-note{color:var(--ink2)}
a{color:var(--ink);text-decoration-color:rgba(27,30,26,.35)}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.skip{background:var(--green);color:#fff}

/* the section label: small spaced capitals in green (the one class allowed capitals and spacing, tests/design_rules.py) */
.label{display:block;margin:0 0 14px;font:600 11.5px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--green);
  font-feature-settings:"case","tnum"}
.label a,.crumbs.label,.crumbs.label a,.hero .txt>p.crumbs.label,.hero .txt>p.crumbs.label a{color:var(--green)}

/* buttons: a green pill with white text and a thin arrow; the second a pill outline with dark text; a text link with a
   line under it for the quietest choice */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:14px 22px;border:0;border-radius:var(--r-pill);
  background:var(--green);color:#fff;font:600 15.5px/1.2 var(--sans);letter-spacing:0;text-align:center;text-decoration:none;box-shadow:none;
  cursor:pointer;transition:background-color .3s}
.btn:hover{background:var(--green-hover);border-color:var(--green-hover);color:#fff;box-shadow:none}
a.btn:not(.ghost):not(.quiet)::after{content:"";flex:none;width:18px;height:10px;background:currentColor;transition:width .35s cubic-bezier(.2,.7,.1,1);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 10' preserveAspectRatio='xMaxYMid meet'%3E%3Cpath d='M0 5h27M23 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E") right center/auto 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 10' preserveAspectRatio='xMaxYMid meet'%3E%3Cpath d='M0 5h27M23 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E") right center/auto 100% no-repeat}
a.btn:not(.ghost):not(.quiet):hover::after{width:26px}
/* the home's buttons draw their own arrow (.fh-ar), so they skip this one */
a.btn:not(.ghost):not(.quiet):has(> .fh-ar)::after{content:none}
.btn.ghost{background:transparent;border:1px solid var(--line2);color:var(--ink);font-weight:600;padding:13px 21px}
.btn.ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn.quiet,.pricebox a.quiet,.strip-nav button,.more-btn{background:var(--white);border:1px solid var(--line2);color:var(--ink);font:500 15px/1.2 var(--sans)}
.btn.quiet:hover,.pricebox a.quiet:hover,.strip-nav button:hover,.more-btn:hover{background:var(--cream);border-color:var(--line2);color:var(--ink)}
.tool .btn.go,.goalcard .btn{font-size:15.5px}
.ctas{gap:12px;align-items:center}
.tl{font:500 15px/1.4 var(--sans);color:var(--ink);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;
  padding-bottom:2px;transition:background-size .35s}
.tl:hover{background-size:0 1px;background-position:100% 100%}

/* the header on a laptop: the page's cream, a little see-through, a hairline under it; the pages in small capitals, then
   Menu, Ask a quick question and the Book pill. It stays a full-width bar when you scroll (no floating card). */
:root{--navh:64px}
nav.top,.nav-js nav.top,.nav-float nav.top{background:rgba(251,249,244,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
nav.top .mark{display:flex;align-items:center;min-height:44px;font-size:0}
nav.top .logo{display:block;width:auto;height:32px}
nav.top .links a.label{display:inline;margin:0;color:var(--ink);font-size:11px;line-height:1.35;text-decoration:none}
nav.top .links a.label:hover,nav.top .links a.label[aria-current]{color:var(--green)}
nav.top .links a:not(.cta):not(.ask){background-image:linear-gradient(var(--green),var(--green));background-size:0 1px;padding:6px 0}
nav.top .links a:not(.cta):not(.ask):hover,nav.top .links a[aria-current]{background-size:100% 1px}
nav.top .links a.ask{font:500 14px/1.4 var(--sans);color:var(--ink);text-decoration:none;white-space:nowrap;
  background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding:0 0 2px;transition:background-size .35s}
nav.top .links a.ask:hover{background-size:0 1px;background-position:100% 100%}
nav.top .links a.cta{display:inline-flex;align-items:center;gap:10px;min-height:42px;padding:10px 18px;margin-left:0;border-radius:var(--r-pill);
  background:var(--green);color:#fff;font:600 14px/1.2 var(--sans);white-space:nowrap}
nav.top .links a.cta:hover{background:var(--green-hover);color:#fff}
nav.top .menu{background:transparent;border:1px solid var(--line2);color:var(--ink);font:500 14px/1 var(--sans);min-height:42px;padding:9px 14px 9px 12px}
nav.top .menu:hover{background:var(--cream);border-color:var(--line2)}
@media(min-width:761px){
  html.nav-js{scroll-padding-top:84px}
  .nav-js nav.top,.nav-float nav.top{top:0;width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none}
  .nav-js nav.top .navrow,.nav-float nav.top .navrow,.nav-float.nav-open nav.top .navrow{height:var(--navh);padding:0 clamp(20px,4.5vw,72px)}
  .nav-js nav.top .links,.nav-float nav.top .links{gap:26px}
  .nav-js nav.top .links a.cta,.nav-float nav.top .links a.cta{margin-left:0;padding:10px 18px}
  .nav-float nav.top .logo{height:32px}
  .nav-float nav.top .links a.label{font-size:11px}
  .nav-float nav.top .menu{border-color:var(--line2)}
  .nav-float.nav-open nav.top,.nav-open nav.top{width:100%;border-radius:0;background:var(--paper);box-shadow:var(--shadow-3)}
  /* the menu panel: her pages large in the heading face, green labels, the free call in a mint card */
  .navpanel .np-grid,.navpanel .np-goals{border-top-color:var(--line)}
  .navpanel .np-grid,.nav-float nav.top .np-grid,.navpanel .np-goals,.nav-float nav.top .np-goals{padding-left:clamp(20px,4.5vw,72px);padding-right:clamp(20px,4.5vw,72px)}
  .navpanel .np-h{margin:0 0 12px;font-size:11px;color:var(--green)}
  .navpanel .np-goals .np-h{display:inline;margin:0 8px 0 0}
  .navpanel .np-col a{font:300 36px/1.18 var(--serif);font-variation-settings:"opsz" 72;letter-spacing:-.02em;color:var(--ink)}
  .navpanel .np-col a:hover,.navpanel .np-col a[aria-current]{color:var(--green);font-style:italic;text-decoration:none}
  .navpanel .np-side{background:var(--mint);border:0;border-radius:var(--r-xl);padding:26px 26px 24px}
  .navpanel .np-line{font:300 24px/1.3 var(--serif);letter-spacing:-.01em;color:var(--ink)}
  .navpanel .np-call,.navpanel .np-call a{color:var(--ink2)}
  .navpanel .np-goals a{color:var(--ink);font-weight:500}
  .navpanel .np-goals a:hover{color:var(--green)}
  .nav-js .navscrim{background:rgba(27,30,26,.18)}
  .nav-js .az{top:76px}
}
/* the inline links need the room: under 1100 px the bar has Menu and Book only, Ask a quick question joins from 1280 px */
@media(min-width:1100px) and (max-width:1359px){.nav-float nav.top .links>a.label{display:inline}}
@media(max-width:1279px){nav.top .links a.ask{display:none}}

/* the closing section: the page's cream, a large light heading, the two pills */
.closing,.closing.big{background:transparent;color:var(--ink);border-top:0}
.closing h2,.closing.big h2{font-size:clamp(40px,5vw,72px);line-height:1;margin-bottom:18px}
.closing p{color:var(--ink2)}
.closing a{color:var(--ink)}
.closing .btn{background:var(--green);border:0;color:#fff}
.closing .btn:hover{background:var(--green-hover);color:#fff}
.closing .btn.ghost{background:transparent;border:1px solid var(--line2);color:var(--ink)}
.closing .btn.ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.closing .wa-note,.closing .wa-note a{color:var(--ink2)}

/* the booking band (layout.book_band): a mint rounded panel, its label and one line on the left, the pills on the right */
.sec.bookband{padding:clamp(14px,2vw,26px) 0;border:0;background:transparent}
.bookband .bd-box{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;gap:22px 32px;background:var(--mint);
  border-radius:var(--r-xl);padding:clamp(26px,3.6vw,48px) clamp(22px,3.6vw,52px)}
.bookband .label{margin:0}
.bookband .bd-l{margin:10px 0 0;font:300 clamp(26px,2.6vw,38px)/1.14 var(--serif);font-variation-settings:"opsz" 72;letter-spacing:-.018em;color:var(--ink);text-wrap:balance}
.bookband .bd-c{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:14px 24px}
.bookband p+p{margin-top:10px}
@media(max-width:860px){.bookband .bd-box{grid-template-columns:minmax(0,1fr)}.bookband .bd-c{justify-content:flex-start}}

/* the footer: the page's cream under a dark rule, the logo and her line in italics, green labels over the link columns */
footer{background:var(--paper);color:var(--ink2);border-top:1px solid var(--ink);padding:50px 0 34px;font-size:15px}
footer a{color:var(--ink);font-weight:400;text-decoration:none}
footer a:hover{color:var(--ink);text-decoration:underline}
.foot .flogo img{height:40px}
.foot .who .by{margin-top:16px;max-width:15em;font:300 italic clamp(22px,2vw,28px)/1.2 var(--serif);color:var(--ink)}
.foot .who .reach{margin-top:14px}
.foot .who .reach a{color:var(--ink2)}
.foot .label{margin:0 0 12px;font-size:11px}
.foot>.dk{line-height:2}
.foot .fine{margin-top:26px;border-top:1px solid var(--line2);padding-top:14px;color:var(--ink2);font-size:13px}
.foot .fine a{color:var(--ink2)}
@media(min-width:761px){.foot{grid-template-columns:1.8fr 1fr 1fr 1fr;column-gap:24px}}

/* forms: white fields with a visible hairline, rounded; green focus; the goal choices are pills that fill mint */
.search,.tool input:not([type=radio]):not([type=checkbox]):not([type=range]),.tool select,.bookform input:not([type=radio]),.bookform select,.bookform textarea{
  background:var(--white);border:1px solid var(--control);border-radius:var(--r-sm);color:var(--ink);font-family:var(--sans)}
.search:focus,.tool input:focus,.tool select:focus,.bookform input:focus,.bookform select:focus,.bookform textarea:focus{outline:2px solid var(--green);outline-offset:1px;border-color:var(--green)}
.bookform label,.bookform .lbl,.bookform .bk-one legend{color:var(--ink)}
.bookform .opt,.bookform .hint,.bk-prog,.bookform .book-next,.bookform .book-privacy{color:var(--ink2)}
.bookform .bk-h,.book-done h3,.book-sheet .sh h2{font-family:var(--serif);font-weight:300;letter-spacing:-.02em;color:var(--ink)}
.bookform .bk-pills label{border:1px solid var(--line2);border-radius:var(--r-pill);background:var(--white);color:var(--ink);font-weight:500}
.bookform .bk-pills label:hover{border-color:var(--green)}
.bookform .bk-pills input:checked+label{background:var(--mint);border-color:var(--green);color:var(--ink);font-weight:600}
.bookform .bk-pills input:checked+label::before{border-color:var(--green)}
.bookform .bk-pills input:focus-visible+label{outline:2px solid var(--green)}
.bk-dots i.now{background:var(--green)}
.tool input.slide::-webkit-slider-runnable-track{background:linear-gradient(var(--green),var(--green)) 0 0/var(--p) 100% no-repeat,var(--hair)}
.tool input.slide::-moz-range-progress{background:var(--green)}
.tool input.slide::-webkit-slider-thumb{border-color:var(--green)}
.tool input.slide::-moz-range-thumb{border-color:var(--green)}
@media (min-width:761px){
  .book-sheet.open{background:var(--paper);border:0;border-radius:var(--r-xl);box-shadow:var(--shadow-3)}
  .book-sheet .x{border:1px solid var(--line2);border-radius:var(--r-pill);color:var(--ink);font-weight:500;padding:6px 16px}
  .book-sheet .x:hover{background:var(--cream);text-decoration:none}
  body.open:has(.book-sheet.open) .scrim{background:rgba(27,30,26,.24)}
  .sec.book-sec{background:var(--paper)}
  .book-sec .bookform,.book-sec .book-done{background:var(--white);border:0;border-radius:var(--r-lg);box-shadow:var(--shadow-1)}
}

/* the phone's booking bar is phones only (phone.css shows it); laptops keep Book in the header */
.sbar{display:none}
@media (prefers-reduced-motion: reduce){.btn,a.btn::after,.tl,nav.top .links a{transition:none!important}}
/* ===== end FINAL FOUNDATION ===== */

/* ===== FINAL PAGES (2026-10-26): every page but the home page, subtly in the chosen home page's look ("without squares").
   Warm cream paper, no hairline walls; Newsreader light headings with a green italic phrase (final_pages.accent_h1); small
   spaced green labels; white cards with rounded corners resting on a soft shadow; pill chips; the quote cards in the home
   page's testimonial-card style; one mint booking band per content page (final_pages.with_book_band). Colours are the
   FOUNDATION tokens by name with the mock's values as fallbacks; the serif falls back to Georgia until Newsreader loads. ===== */
:root{--r-card:22px;--shadow-lift:0 1px 2px rgba(20,33,46,.04),0 18px 40px -30px rgba(20,33,46,.4)}
/* heroes: paper, a green label, a light serif heading */
.band{background:var(--paper,#FBF9F4);border-bottom:0}
.hero{padding:64px 0 60px}
.hero.has-img{padding:48px 0 56px}
.hero h1,.hero.has-img h1,.hero.compact h1{font-family:var(--serif,'Newsreader',Georgia,serif);font-weight:300;font-variation-settings:"opsz" 72;
  letter-spacing:-.022em;line-height:1.04;color:var(--ink,#1B1E1A);text-wrap:balance}
.hero h1,.hero.has-img h1{font-size:clamp(40px,4.6vw,66px)}
.hero.compact h1{font-size:clamp(32px,3.2vw,46px)}
.hero h1 em.acc,.hero h1 .h1sub{font-style:italic;font-weight:300;color:var(--green-ink,#4C7535)}
h1 .h1sub{display:block;font-size:.62em;line-height:1.15;margin-top:.22em;letter-spacing:-.012em}
.hero .txt>p,.hero .txt .intro p{color:var(--ink2,#5A5F57);font-size:18px;line-height:1.65}
.hero .txt>p.label,.hero .txt>p.crumbs.label,h1 .eyebrow.label{font-family:var(--sans);font-size:11px;font-weight:600;line-height:1.5;letter-spacing:.16em;color:var(--green-ink,#4C7535)}
.hero .txt>p.crumbs.label a{color:var(--green-ink,#4C7535)}
h1 .eyebrow.label{display:block;font-variation-settings:normal;margin-bottom:18px}
.crumbs+h1 .eyebrow.label{text-transform:none;letter-spacing:0;font-size:16px;font-weight:500;color:var(--ink2,#5A5F57)}
.hero-img,.hero-img[src^="/assets/foods/"],.hero.has-img svg.food-sketch{border-radius:var(--r-card);box-shadow:var(--shadow-lift)}
.byline{color:var(--ink2,#5A5F57)}

/* sections: paper and a warm cream in turn, no hairlines between them */
.sec{background:transparent}
.sec.tint{background:var(--cream,#F3EEE3)}
.sec:not(.tint)+.sec:not(.tint),.sec.tint+.sec.tint{border-top:0}
main h2,main p.h2,.goal-card h2,.diet-group h2,.goalcard h2,details.fold>summary>h2{font-family:var(--serif,'Newsreader',Georgia,serif);font-weight:300;
  font-variation-settings:"opsz" 72;letter-spacing:-.02em;line-height:1.1;color:var(--ink,#1B1E1A)}
main h2,main p.h2{font-size:clamp(30px,3vw,42px)}
main h2 em,main p.h2 em{font-style:italic;color:var(--green-ink,#4C7535)}
.def{font-family:var(--serif,'Newsreader',Georgia,serif);font-weight:400;font-size:24px;line-height:1.45}
.small,.src,.wa-note,.fatkey,.goalkey>span:first-child{color:var(--ink2,#5A5F57)}

/* cards: white, rounded, resting on a soft shadow; no green rules, no hard frames */
.goal-card,.diet-group,.quals li,.glance,.toc,.portions figure,dl.factrow>div,.hscroll .panel:not(.lead),.goalcard,.pricebox,.pricecard,
.checkins li,.meals .meal-card,.fgrid .fcard,.ba-grid figure,.shot a,details.grp,.dk .qa,.testimonial,.quotes3 .testimonial,.strip .testimonial{
  background:var(--white,#fff);border:1px solid rgba(27,30,26,.06);box-shadow:var(--shadow-lift)}
.goal-card,.diet-group,.quals li,.toc,.portions figure,dl.factrow>div,.checkins li,.meals .meal-card,.dk .qa,details.grp,.fgrid .fcard,.shot a{border-radius:var(--r-md)}
.goalcard,.pricebox,.pricecard,.glance,.ba-grid figure,.testimonial,.quotes3 .testimonial,.strip .testimonial{border-radius:var(--r-card)}
@media(min-width:761px){ol.steps:not(.pts) li{background:var(--white,#fff);border:1px solid rgba(27,30,26,.06);border-radius:var(--r-md);box-shadow:var(--shadow-lift)}}
@media(hover:hover) and (min-width:761px){
  .fgrid .fcard:hover,.shot a:hover,.testimonial:hover,.goalcard:hover{box-shadow:var(--shadow-lift),var(--shadow-1);transform:translateY(-2px);border-color:rgba(27,30,26,.06)}
}
.goalcard h2{font-size:30px}
.goalcard.mini h2{font-size:25px}

/* step numbers: large light serif figures in green, as the home's three steps */
ol.steps .sn,.rows .num{font-family:var(--serif,'Newsreader',Georgia,serif);font-weight:200;font-size:56px;line-height:.85;letter-spacing:-.03em;color:var(--green-ink,#4C7535)}
ol.pts.steps li::before{font-family:var(--serif,'Newsreader',Georgia,serif);font-weight:300;font-size:30px;line-height:1}

/* quote cards: the home's testimonial cards. The result as a small green line, her words in the serif, her face and name
   at the foot */
.testimonial,.quotes3 .testimonial,.strip .testimonial{padding:24px 24px 18px;gap:14px}
.testimonial .q-res{background:none;padding:0;border-radius:0;font:600 13px/1.4 var(--sans);color:var(--green-ink,#4C7535)}
.testimonial .q-src{font-size:13px;color:var(--ink2,#5A5F57)}
.testimonial .q-gist{font-family:var(--serif,'Newsreader',Georgia,serif);font-weight:400;font-size:21px;line-height:1.36;letter-spacing:-.005em;color:var(--ink,#1B1E1A)}
.testimonial .q-full{font-size:15.5px;color:var(--ink2,#5A5F57)}
.testimonial .q-who{border-top:0;padding-top:4px}
.testimonial .q-who img,.testimonial .q-who .initials{border:0;background:var(--mint,#E3ECD8)}
.testimonial .initials,.testimonial .q-who .initials{color:var(--green-ink,#4C7535);font-family:var(--serif,'Newsreader',Georgia,serif);font-style:italic;font-weight:400;font-size:22px}
.testimonial cite{font:600 14px/1.3 var(--sans);color:var(--ink,#1B1E1A)}
.testimonial .q-more{color:var(--green-ink,#4C7535)}
.checkins b{font-family:var(--serif,'Newsreader',Georgia,serif);font-weight:300;font-size:30px;line-height:1.1;letter-spacing:-.02em}
blockquote.pull p{font-family:var(--serif,'Newsreader',Georgia,serif);font-weight:300;font-style:italic;font-size:clamp(24px,2.3vw,32px);line-height:1.25;letter-spacing:-.01em;color:var(--green-ink,#4C7535)}
blockquote.pull.result p{font-style:normal;font-size:20px;line-height:1.45;color:var(--ink,#1B1E1A)}

/* chips, switches and filters: white pills; the one you are on in mint */
.inline-links a,a.chip,.diet-group a.chip,.storychips button,.switch a{border-radius:var(--r-pill);background:var(--white,#fff);border:1px solid rgba(27,30,26,.12);color:var(--ink,#1B1E1A)}
.inline-links a:hover,.switch a:hover,a.chip:hover,.storychips button:hover{background:var(--mint,#E3ECD8);border-color:rgba(76,117,53,.35)}
.inline-links a[aria-current],.switch span,.switch span.on,.storychips button.on{border-radius:var(--r-pill);background:var(--mint,#E3ECD8);border:1px solid rgba(76,117,53,.45);color:var(--ink,#1B1E1A);font-weight:600}
ul.pts.tags li{border-radius:var(--r-pill);background:var(--white,#fff);border:1px solid rgba(27,30,26,.10)}
.src-tag{border-radius:var(--r-pill);background:var(--cream,#F3EEE3);border-color:transparent}

/* notes: white, rounded, on a soft shadow, no frame */
.notebook,.note,.book-nojs{background:var(--white,#fff);border:1px solid rgba(27,30,26,.06);border-radius:var(--r-card);box-shadow:var(--shadow-lift)}
.sec.tint .notebook,.sec.tint .note,.hero .notebook,.hero .note{background:var(--white,#fff)}

/* tables: a white rounded frame on a soft shadow, a cream head, quiet rows */
.tablewrap{border-radius:var(--r-md)}
table.facts,table.cmpgrid{border:0;border-radius:var(--r-md);background:var(--white,#fff);box-shadow:var(--shadow-lift);border-collapse:separate;border-spacing:0;overflow:hidden}
.facts th,.cmpgrid thead th{background:var(--cream,#F3EEE3);color:var(--ink2,#5A5F57);border-bottom:0}
.facts td,.cmpgrid td{border-bottom:1px solid rgba(27,30,26,.07)}
.facts tr:last-child td{border-bottom:0}
.facts tr.total td{background:var(--mint,#E3ECD8);border-top:0}
.cmpgrid td.win{background:var(--mint,#E3ECD8)}
.sec.tint .facts th,.sec.tint .cmpgrid thead th{background:var(--paper,#FBF9F4)}

/* calculators: a white panel on a soft shadow, the answer in mint with its number in the light serif */
.tool{background:var(--white,#fff);border:1px solid rgba(27,30,26,.06);border-radius:var(--r-card);box-shadow:var(--shadow-lift)}
form.tool .result,form.tool .result.is-example{background:var(--mint,#E3ECD8);border:0;border-radius:var(--r-md);box-shadow:none}
.result .big{font-family:var(--serif,'Newsreader',Georgia,serif);font-weight:300;letter-spacing:-.02em;color:var(--ink,#1B1E1A)}
.result.is-example .big{color:var(--ink2,#5A5F57)}
.result .example,.result.is-example .example{background:rgba(255,255,255,.6);border-radius:var(--r-sm)}

/* groups that open, the foods finder, glossary, guides, plans and about */
details.grp summary{font-family:var(--serif,'Newsreader',Georgia,serif);font-weight:400;font-size:21px}
details.grp summary::after{border-color:var(--green-ink,#4C7535)}
.fgrid .fcard .fname{font-family:var(--serif,'Newsreader',Georgia,serif);font-weight:400;font-size:19px;letter-spacing:-.005em}
.az,.ffilters:not(.gfilter){border-radius:var(--r-card);background:rgba(251,249,244,.94);border-color:rgba(27,30,26,.08)}
.az a:hover{background:var(--mint,#E3ECD8)}
.gletter{font-family:var(--serif,'Newsreader',Georgia,serif);font-weight:300;color:var(--green-ink,#4C7535)}
.otp-card,.gpeek{border-radius:var(--r-card)}
.gpeek .gp-t{font-family:var(--serif,'Newsreader',Georgia,serif);font-weight:400;font-size:20px}
.pricecard .amt,.pricebox .price{font-family:var(--serif,'Newsreader',Georgia,serif);font-weight:300;letter-spacing:-.02em;color:var(--ink,#1B1E1A)}
dl.factrow dt{font-family:var(--serif,'Newsreader',Georgia,serif);font-weight:300;font-size:32px;letter-spacing:-.02em}
.reel-t{font-family:var(--serif,'Newsreader',Georgia,serif);font-style:italic;font-weight:400}

/* the booking band (FOUNDATION's helper brings its own look; this styles final_pages' stand-in when it is missing) */
.sec.bookband{background:transparent;padding:clamp(14px,2vw,26px) 0}
.bookband .bd-box{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px 40px;background:var(--mint,#E3ECD8);
  border-radius:var(--r-card);padding:clamp(26px,3.6vw,48px) clamp(22px,3.6vw,52px)}
.bookband .bd-t{flex:1 1 420px;min-width:0}
.bookband .bd-t .label{margin:0;color:var(--green-ink,#4C7535);font-size:11px;font-weight:600;letter-spacing:.16em}
.bookband .bd-l{margin:10px 0 0;font:300 clamp(26px,2.6vw,38px)/1.14 var(--serif,'Newsreader',Georgia,serif);font-variation-settings:"opsz" 72;letter-spacing:-.018em;color:var(--ink,#1B1E1A);text-wrap:balance;max-width:21em}
.bookband .bd-l em{font-style:italic;color:var(--green-ink,#4C7535)}
.bookband .bd-c{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.bookband .tl{font-size:15px;font-weight:500;color:var(--ink,#1B1E1A)}

/* calm motion: the hero's words rise once as the page opens (html.js is only set when motion is allowed) */
@keyframes pg-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
html.js .band .hero:not(.home) .txt{animation:pg-rise .9s cubic-bezier(.2,.7,.1,1) both}
html.js .band .hero:not(.home)>.hero-img{animation:pg-rise 1.1s .12s cubic-bezier(.2,.7,.1,1) both}
@media (prefers-reduced-motion:reduce){html.js .band .hero .txt,html.js .band .hero>.hero-img{animation:none}}
/* ===== end FINAL PAGES ===== */
/* ===== FINAL HOME (2026-10-26, Puja's pick: the "without squares" mock, mockups/home-v5/without-squares/). build/home.py
   builds the page; every class is the page's own fh-*, and its small spaced labels are the site's one .label class. Warm
   cream, Newsreader light headings with a green italic accent (.fh-em), Inter body, her green as the one accent, rounded
   soft cards and photos, pill buttons, mint booking bands. The layout without motion reads top to bottom; html.fh-motion
   (set at the top of the page when the site's head script allows motion) is the cover that grows to the whole screen,
   driven by static/home-final.js with the self-hosted GSAP. Corners and shadows are the design-sense tokens only
   (tests/design_rules.py): the page's soft shadows are named in the :root below. ===== */
:root{--shadow-fh-lift:0 30px 60px -36px rgba(20,33,46,.45);--shadow-fh-card:0 1px 2px rgba(20,33,46,.04),0 18px 40px -30px rgba(20,33,46,.4);
  --shadow-fh-chip:0 16px 34px -18px rgba(20,33,46,.38);--shadow-fh-ring:inset 0 0 0 1px rgba(27,30,26,.30);--shadow-fh-ring-ink:inset 0 0 0 1px #1B1E1A;
  --shadow-fh-ring-green:inset 0 0 0 1px #4C7535;--shadow-fh-edge:0 0 0 1px rgba(27,30,26,.30);--shadow-fh-edge-green:0 0 0 2px #4C7535;
  --shadow-fh-pic:0 22px 36px -18px rgba(0,0,0,.7);--shadow-fh-handle:0 6px 18px -6px rgba(0,0,0,.5);--shadow-fh-box:0 30px 60px -20px rgba(0,0,0,.6)}
.fh{--fh-paper:#FBF9F4;--fh-cream:#F3EEE3;--fh-ink:#1B1E1A;--fh-ink2:#5A5F57;--fh-navy:#14212E;--fh-line:rgba(27,30,26,.10);--fh-line2:rgba(27,30,26,.30);
  --fh-green:#4C7535;--fh-green-dk:#3D6129;--fh-leaf:#7BA05B;--fh-mint:#E3ECD8;--fh-forest:#21341A;--fh-night:#121811;--fh-lime:#C3DBA6;--fh-bone:#F6F1E6;
  --fh-serif:'Newsreader',Georgia,'Times New Roman',serif;--fh-sans:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  --fh-gut:clamp(16px,4.5vw,72px);--fh-g:clamp(12px,1.7vw,24px);--fh-vh:1vh;
  display:flow-root;background:var(--fh-paper);color:var(--fh-ink);font-family:var(--fh-sans);font-size:16px;line-height:1.6;overflow-x:clip;font-feature-settings:"cv11","ss01"}
@supports (height:1svh){.fh{--fh-vh:1svh}}
/* the home's band carries only the header: the heading is read, not shown (the cover says it in two lines) */
.band:has(.hero.home){background:var(--fh-paper,#FBF9F4)}
.hero.home{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.fh :where(h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol){margin:0;padding:0}
.fh :where(h2,h3,h4){font:inherit;color:inherit;letter-spacing:normal}
.fh :where(ul,ol){list-style:none}
.fh a{color:inherit}
.fh img,.fh video{display:block;max-width:100%}
.fh .fh-frame img,.fh .fh-slot img,.fh .fh-phfull img,.fh .fh-pic img,.fh .fh-snmedia img,.fh .fh-bxframe img,.fh .fh-rbox video{background-color:var(--fh-cream)}
.fh .label{display:block;margin:0;font:600 11px/1.35 var(--fh-sans);letter-spacing:.16em;color:inherit;font-feature-settings:"case","tnum"}
.fh .label.fh-g,.fh .fh-folio>span.label:first-child{color:var(--fh-green)}
.fh-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fh-wrap{max-width:1600px;margin-inline:auto;padding-inline:var(--fh-gut)}
.fh-em{font-style:italic;color:var(--fh-green)}
.fh-disp{font-family:var(--fh-serif);font-weight:300;font-variation-settings:"opsz" 72;letter-spacing:-.022em;line-height:.98}
.fh-disp .fh-em{font-weight:300}
.fh-sec{position:relative}
.fh-folio{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:0 0 4px}
.fh .fh-folio>span.label{font-size:10.5px;line-height:1.3;white-space:nowrap}
.fh .fh-folio>span.label:first-child{overflow:hidden;text-overflow:ellipsis}
.fh .fh-folio>span.label:last-child{text-align:right;color:var(--fh-ink2)}
.fh-dark .fh-folio>span.label:first-child{color:var(--fh-lime)}
.fh-dark .fh-folio>span.label:last-child{color:rgba(246,241,230,.7)}
.fh-ctg,.fh-ltg,.fh-ixhead,.fh-corrh,.fh-mh,.fh-steps,.fh-rg,.fh-faqg,.fh-clg,.fh-bdbox,.fh-camg,.fh-leadq{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--fh-g)}

/* buttons: her green pill with a drawn arrow, a quiet outline, and a text link */
.fh .btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;width:auto;min-height:0;margin:0;background:var(--fh-green);color:#fff;text-decoration:none;
  font:600 15px/1 var(--fh-sans);letter-spacing:0;padding:17px 22px;border-radius:var(--r-pill);border:0;box-shadow:none;cursor:pointer;white-space:nowrap;transition:background .3s}
.fh .btn:hover{background:var(--fh-green-dk);color:#fff}
.fh .btn.ghost{background:transparent;color:var(--fh-ink);box-shadow:var(--shadow-fh-ring)}
.fh .btn.ghost:hover{background:var(--fh-ink);color:var(--fh-paper)}
.fh-ar{position:relative;display:inline-block;width:18px;height:1px;background:currentColor;transition:width .35s cubic-bezier(.2,.7,.1,1)}
.fh-ar::after{content:"";position:absolute;right:0;top:-4px;width:8px;height:8px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.fh .btn:hover .fh-ar{width:28px}
.fh-ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.fh .fh-tl{font:500 14px var(--fh-sans);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px;transition:background-size .35s}
.fh .fh-tl:hover{background-size:0 1px;background-position:100% 100%}

/* frames: photos and films in rounded frames */
.fh-frame{position:relative;display:block;overflow:hidden;background:var(--fh-cream);border-radius:calc(var(--r-lg) - 2px)}
.fh-frame>img,.fh-frame>video{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover}
.fh-cap{display:flex;justify-content:space-between;gap:12px;margin-top:10px;color:var(--fh-ink2)}
.fh .fh-cap .label{font-size:10px}

/* ---------- the cover ---------- */
.fh-cover{position:relative;background:var(--fh-paper)}
.fh-stage{position:relative}
html.fh-motion .fh-cover{margin-top:calc(-1 * var(--fh-pull,0px))}
html.fh-motion .fh-stage{height:calc(var(--fh-vh) * 100);min-height:600px;overflow:hidden}
.fh-phfull{position:absolute;inset:0;z-index:2;overflow:hidden;visibility:hidden;background:var(--fh-cream)}
.fh-phfull img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;will-change:transform}
.fh-stagein{position:relative;z-index:3;display:flex;flex-direction:column;padding-top:14px}
html.fh-motion .fh-stagein{height:100%;padding-top:calc(var(--fh-hdr,0px) + 14px);pointer-events:none}
.fh-stagein a,.fh-stagein button{pointer-events:auto}
.fh-stagein .fh-folio{position:relative;z-index:4}
html.fh-motion .fh-stagein .fh-folio{background:var(--fh-paper)}
.fh-opening{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,2.4vh,26px);text-align:center;padding:12px 0 34px}
.fh-hl{text-wrap:balance;font-family:var(--fh-serif);font-weight:300;font-variation-settings:"opsz" 72;letter-spacing:-.025em;line-height:1;font-size:clamp(38px,6.2vw,100px);max-width:100%}
.fh-hl .fh-em{font-weight:300}
.fh-l1,.fh-l2{position:relative;z-index:5}
.fh-slotwrap{position:relative;z-index:4}
.fh-slot{position:relative;height:clamp(240px,calc(var(--fh-vh) * 100 - 380px),540px);aspect-ratio:4/5;border-radius:calc(var(--r-lg) + 6px);overflow:hidden;background:var(--fh-cream);box-shadow:var(--shadow-fh-lift)}
.fh-slot img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
html.fh-motion .fh-slot{background:transparent;box-shadow:none}
.fh-blobs{position:absolute;z-index:1;pointer-events:none}
.fh-blob{position:absolute;z-index:-1;background:center/100% 100% no-repeat}
.fh-b1{inset:7% -14% 2% -6%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M42 0A58 44 0 0 1 100 44A63 56 0 0 1 37 100A37 59 0 0 1 0 41A42 41 0 0 1 42 0Z' fill='%23E3ECD8'/%3E%3C/svg%3E")}
.fh-b2{width:46%;aspect-ratio:1;right:-20%;bottom:-8%;opacity:.55;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M42 0A58 44 0 0 1 100 44A63 56 0 0 1 37 100A37 59 0 0 1 0 41A42 41 0 0 1 42 0Z' fill='%237BA05B'/%3E%3C/svg%3E")}
.fh-chip{position:absolute;z-index:6;display:flex;flex-direction:column;align-items:flex-start;gap:3px;background:#fff;padding:10px 14px 11px;border-radius:var(--r-md);box-shadow:var(--shadow-fh-chip);text-align:left;white-space:nowrap}
.fh .fh-chip b.label{font-size:10px;line-height:1.2;color:var(--fh-green)}
.fh-chip span{font:italic 400 16px/1.2 var(--fh-serif);color:var(--fh-ink)}
.fh-c1{left:-46%;top:14%}
.fh-c2{right:-44%;top:50%}
.fh-c3{left:-30%;bottom:6%}
.fh .fh-vcap{position:absolute;left:calc(100% + 14px);bottom:0;writing-mode:vertical-rl;transform:rotate(180deg);color:var(--fh-ink2);font-size:10px}
.fh .fh-cue{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:5;display:none;flex-direction:column;align-items:center;gap:6px;color:var(--fh-ink2);font-size:10px}
html.fh-motion .fh-cue{display:flex}
.fh-cue i{display:block;width:1px;height:24px;background:var(--fh-ink2);transform-origin:top}
html.fh-motion .fh-cue i{animation:fh-cue 3.4s cubic-bezier(.6,0,.3,1) infinite}
@keyframes fh-cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.fh .fh-phcap{position:absolute;z-index:4;right:var(--fh-gut);bottom:20px;background:var(--fh-paper);padding:7px 11px;border-radius:var(--r-pill);font-size:10px;visibility:hidden}
.fh-panel{position:relative;z-index:6;margin:10px auto 0;width:min(640px,calc(100% - 2 * var(--fh-gut)));text-align:center;padding:26px 0 46px}
.fh-panel .label{margin-bottom:12px}
.fh-panel h2{font:300 clamp(28px,2.6vw,40px)/1.05 var(--fh-serif);letter-spacing:-.02em;margin-bottom:12px}
.fh-pl{font-size:16px;line-height:1.55;margin-bottom:20px;color:var(--fh-ink)}
.fh-pl b{font-weight:600}
.fh-panel .fh-ctas{justify-content:center}
html.fh-motion .fh-panel{position:absolute;left:var(--fh-gut);bottom:clamp(20px,5vh,48px);margin:0;width:min(460px,calc(100% - 2 * var(--fh-gut)));background:var(--fh-paper);
  padding:26px 28px 24px;text-align:left;visibility:hidden;border-radius:var(--r-lg);box-shadow:var(--shadow-fh-lift)}
html.fh-motion .fh-panel .fh-ctas{justify-content:flex-start}
html:not(.fh-motion) .fh-phfull,html:not(.fh-motion) .fh-phcap{display:none}
html:not(.fh-motion) .fh-opening{padding:clamp(28px,5vw,60px) 0 20px}

/* ---------- the running line ---------- */
.fh-tkwrap{overflow:hidden;padding:clamp(40px,6vw,80px) 0 20px;margin-bottom:-20px}
.fh-ticker{position:relative;z-index:3;margin:0 -2%;width:104%;background:var(--fh-navy);color:#fff;padding:17px 0;overflow:hidden;transform:rotate(-1.2deg)}
.fh-tktrack{display:flex;width:max-content;will-change:transform}
html.fh-motion .fh-tktrack{animation:fh-marq 90s linear infinite}
@keyframes fh-marq{to{transform:translateX(-50%)}}
.fh-tktrack span{display:inline-flex;align-items:center;gap:24px;padding-right:24px;font:400 clamp(20px,2.3vw,30px)/1.1 var(--fh-serif);white-space:nowrap;letter-spacing:-.005em}
.fh-tktrack svg{flex:none}

/* ---------- on this page ---------- */
.fh-contents{padding:clamp(60px,8vw,120px) 0 clamp(40px,5vw,80px)}
.fh-ctg{margin-top:clamp(30px,4vw,56px)}
.fh-ctead{grid-column:1/5}
.fh-ctbig{font-size:clamp(64px,9vw,150px);margin:22px 0 18px}
.fh-ctead p:last-child{max-width:22em;color:var(--fh-ink2)}
.fh-contents ol{grid-column:6/13;border-top:1px solid var(--fh-ink)}
.fh-contents li a{display:grid;grid-template-columns:52px 1fr auto;gap:16px;align-items:baseline;text-decoration:none;padding:16px 0 15px;border-bottom:1px solid var(--fh-line2)}
.fh .fh-contents li a .fh-num{color:var(--fh-green)}
.fh-contents li a strong{display:block;font:300 clamp(24px,2.5vw,38px)/1.08 var(--fh-serif);letter-spacing:-.015em;transition:transform .5s cubic-bezier(.2,.7,.1,1),color .3s}
.fh-contents li a small{display:block;color:var(--fh-ink2);font-size:14px;margin-top:4px}
.fh-contents li a:hover strong{transform:translateX(10px);color:var(--fh-green)}

/* ---------- her letter ---------- */
.fh-letter{padding:clamp(40px,6vw,90px) 0 clamp(60px,8vw,120px)}
.fh-ltg{margin-top:clamp(30px,4vw,56px)}
.fh-ltfig{grid-column:1/6}
.fh-ltr{grid-column:7/13}
.fh-ltfig .fh-frame{aspect-ratio:4/5.2}
.fh-lth{font-size:clamp(38px,4.6vw,76px);margin:6px 0 34px}
.fh-lth .fh-em{display:block}
.fh-ltbody{columns:2;column-gap:var(--fh-g)}
.fh-ltbody p{font-size:16.5px;line-height:1.65;margin-bottom:14px;break-inside:avoid}
.fh-dc{float:left;font:300 3.7em/.84 var(--fh-serif);font-variation-settings:"opsz" 72;letter-spacing:-.03em;color:var(--fh-green);margin:.04em .12em 0 0}
.fh-pull{margin:26px 0 0;padding:20px 0;font:300 italic clamp(24px,2.3vw,36px)/1.2 var(--fh-serif);color:var(--fh-green);letter-spacing:-.01em}
.fh-sign{display:flex;align-items:baseline;gap:18px;margin-top:22px}
.fh-sign b{font:300 italic 46px/1 var(--fh-serif);color:var(--fh-ink)}
.fh-plate{position:relative;margin:0}
.fh-plate .fh-frame{height:min(78vh,820px);width:100%;border-radius:0}
.fh-plate .fh-cap{padding-top:12px;padding-bottom:4px}

/* ---------- what I help with: six photo bands ---------- */
.fh-index{padding:clamp(60px,8vw,120px) 0 clamp(36px,4vw,64px)}
.fh-ixhead{align-items:end;margin:clamp(30px,4vw,56px) 0 0}
.fh-ixhead h2{grid-column:1/10;font-size:clamp(46px,7.4vw,124px)}
.fh-ixhead p{grid-column:10/13;color:var(--fh-ink2);font-size:15px}
.fh-scenes{position:relative;background:var(--fh-night);color:#fff}
.fh-scene{position:relative;min-height:clamp(480px,76vh,720px);padding-top:110px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.fh-snmedia{position:absolute;inset:0;overflow:hidden;background:#1d271b}
.fh-snmedia picture{display:block;width:100%;height:100%}
.fh .fh-snmedia img{width:100%;height:100%;object-fit:cover;background-color:#1d271b}
.fh-snshade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,20,13,.86) 0%,rgba(14,20,13,.58) 45%,rgba(14,20,13,.12) 100%),linear-gradient(0deg,rgba(14,20,13,.6),rgba(14,20,13,0) 55%)}
.fh-sncopy{position:relative;z-index:3;width:100%;padding-bottom:clamp(64px,12vh,120px)}
.fh-snin{max-width:min(860px,64%)}
.fh .fh-snk{display:flex;align-items:center;gap:14px;color:var(--fh-lime);margin-bottom:20px}
.fh-snk span{padding-right:14px;border-right:1px solid rgba(255,255,255,.35)}
.fh-snh{font:300 clamp(34px,4.7vw,78px)/1.02 var(--fh-serif);font-variation-settings:"opsz" 72;letter-spacing:-.025em;text-wrap:balance}
.fh-snpre{display:block;font-style:italic;font-size:.5em;line-height:1.1;color:var(--fh-lime);margin-bottom:.4em;letter-spacing:-.01em}
.fh-dark .fh-em,.fh-scenes .fh-em{color:var(--fh-lime)}
.fh-snq{margin-top:22px;max-width:34em;font:italic 400 clamp(17px,1.35vw,21px)/1.4 var(--fh-serif);color:rgba(255,255,255,.9)}
.fh .fh-snq .label{margin-top:8px;font-style:normal;color:rgba(255,255,255,.66)}
.fh-snact{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:28px}
.fh-scene+.fh-scene{border-top:0}

/* ---------- results: the kilos, on dark green ---------- */
.fh-res{background:var(--fh-forest);color:var(--fh-bone);padding:clamp(60px,8vw,120px) 0 clamp(60px,7vw,110px);overflow:hidden}
.fh-resh{font-size:clamp(50px,7.6vw,128px);margin-top:clamp(30px,4vw,56px)}
.fh-resh .fh-em{display:block}
.fh-resintro{max-width:38em;margin-top:20px;font-size:clamp(16px,1.2vw,18px);color:rgba(246,241,230,.85)}
.fh-kggrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(40px,5vw,72px) var(--fh-g);margin-top:clamp(50px,6vw,96px)}
.fh-kg{position:relative;grid-column:span 2;padding-top:16px}
.fh-kg::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(246,241,230,.3)}
.fh-kg.fh-wide{grid-column:span 3}
.fh-n{display:flex;align-items:baseline;font:200 clamp(84px,10.4vw,180px)/.85 var(--fh-serif);font-variation-settings:"opsz" 72;letter-spacing:-.03em;color:var(--fh-bone);white-space:nowrap;font-feature-settings:"lnum","tnum";margin-top:.1em}
.fh-n small{font:italic 300 .3em/1 var(--fh-serif);color:var(--fh-lime);letter-spacing:0;margin-left:.12em}
.fh-n .fh-sg{color:var(--fh-lime);margin:22px .02em 0 0}
.fh-kg .fh-who{font:italic 400 clamp(22px,2vw,30px)/1.1 var(--fh-serif);margin-top:14px}
.fh-what{font-size:14px;color:rgba(246,241,230,.82);margin-top:6px;max-width:32em}
.fh-pic{position:absolute;right:0;top:-22px;width:44%;margin:0;background:#fff;padding:6px;border-radius:var(--r-sm);box-shadow:var(--shadow-fh-pic);transform:rotate(5deg)}
.fh .fh-pic img{width:100%;height:auto;aspect-ratio:800/565;object-fit:cover;border-radius:6px}
.fh-pic.fh-tall{width:28%;top:-34px;transform:rotate(-5deg)}
.fh .fh-pic.fh-tall img{aspect-ratio:9/16;object-position:top}
.fh-kg:nth-child(2n) .fh-pic{transform:rotate(-4deg)}

/* ---------- before and after, to drag ---------- */
.fh-bxs{background:var(--fh-forest);color:var(--fh-bone);overflow:hidden}
.fh-bxstage{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,430px);align-items:center;gap:28px clamp(30px,6vw,100px);padding-top:clamp(20px,3vw,40px);padding-bottom:40px}
.fh .fh-bxk{color:var(--fh-lime)}
.fh-kgo{display:flex;align-items:flex-end;font:200 clamp(110px,15vw,250px)/1 var(--fh-serif);font-variation-settings:"opsz" 72;letter-spacing:-.03em;margin-top:12px;font-feature-settings:"lnum","tnum"}
.fh-ou{font:italic 300 .26em/1 var(--fh-serif);color:var(--fh-lime);letter-spacing:0;margin:0 0 .3em .22em}
.fh-bxwho{margin-top:14px;font-size:clamp(16px,1.3vw,19px);color:rgba(246,241,230,.85)}
.fh-bxwho b{color:#fff;font-weight:600}
.fh .fh-bxlost{display:inline-block;margin-top:22px;padding:10px 14px;background:var(--fh-green);color:#fff;border-radius:var(--r-pill)}
.fh-bxq{margin-top:24px;max-width:24em;font:italic 300 clamp(22px,2.1vw,32px)/1.25 var(--fh-serif);letter-spacing:-.01em}
.fh-bxfig{margin:0}
.fh-bxframe{--pos:50%;position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;background:#2a3a25;border-radius:calc(var(--r-lg) - 2px);touch-action:pan-y;-webkit-user-select:none;user-select:none}
.fh .fh-bxframe img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;pointer-events:none}
.fh-bxa{clip-path:inset(0 0 0 var(--pos))}
.fh-bxline{position:absolute;top:0;bottom:0;left:var(--pos);width:1px;background:#fff;pointer-events:none}
.fh-bxline::after{content:"";position:absolute;top:50%;left:-20px;width:40px;height:40px;margin-top:-20px;border-radius:50%;box-shadow:var(--shadow-fh-handle);
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B1E1A' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center/20px no-repeat}
.fh-bxrange{position:absolute;inset:0;z-index:3;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y;-webkit-appearance:none;appearance:none;background:transparent}
.fh-bxrange::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:100%;cursor:ew-resize}
.fh-bxrange:focus-visible+.fh-bxline::after{outline:2px solid var(--fh-lime);outline-offset:3px}
.fh .fh-bxt{position:absolute;bottom:12px;z-index:2;background:var(--fh-paper);color:var(--fh-ink);padding:5px 11px;border-radius:var(--r-pill);font-size:9.5px;pointer-events:none}
.fh .fh-bxt.fh-b{left:12px}
.fh .fh-bxt.fh-a{right:12px;color:var(--fh-green)}
.fh .fh-bxhint{margin-top:12px;color:rgba(246,241,230,.7);font-size:10px}
.fh-bxnote{padding-bottom:clamp(50px,6vw,90px);font:italic 400 17px var(--fh-serif);color:rgba(246,241,230,.72)}

/* ---------- results, in kilograms ---------- */
.fh-figs{background:var(--fh-cream);padding:clamp(60px,8vw,110px) 0 clamp(50px,6vw,90px)}
.fh-figs>.fh-wrap{margin-bottom:clamp(20px,3vw,40px)}
.fh-hstrack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--fh-g);padding-inline:var(--fh-gut);max-width:1600px;margin-inline:auto}
.fh-pn{position:relative;display:flex;flex-direction:column;gap:14px;background:#fff;border-radius:var(--r-lg);padding:26px clamp(18px,2vw,30px) 30px}
.fh-pnintro{grid-column:1/-1;background:transparent;padding:26px clamp(18px,2vw,30px) 30px 0}
.fh-pnintro h2{font-size:clamp(50px,7vw,120px)}
.fh-pnintro p{max-width:30em;color:var(--fh-ink2);margin-top:12px}
.fh .fh-legend{display:flex;gap:22px;flex-wrap:wrap;margin-top:22px;color:var(--fh-ink2)}
.fh-legend i{display:inline-block;width:20px;height:2px;background:var(--fh-green);vertical-align:middle;margin-right:8px}
.fh-legend i.fh-o{height:9px;width:9px;border-radius:50%;background:transparent;box-shadow:var(--shadow-fh-ring-ink)}
.fh-pwho{display:flex;justify-content:space-between;gap:10px;color:var(--fh-ink2)}
.fh-pn .fh-big{margin-top:.12em;display:flex;align-items:baseline;font:200 clamp(96px,9.6vw,168px)/.82 var(--fh-serif);font-variation-settings:"opsz" 72;letter-spacing:-.03em;color:var(--fh-ink);white-space:nowrap;font-feature-settings:"lnum","tnum"}
.fh-pn .fh-big .fh-sg{color:var(--fh-green);font-weight:200;margin-right:.03em}
.fh-pn .fh-big .fh-u{font:italic 300 .28em/1 var(--fh-serif);color:var(--fh-green);letter-spacing:0;margin-left:.12em}
.fh-bar{position:relative;height:30px}
.fh-bar .fh-ax{position:absolute;left:0;right:0;top:14px;height:1px;background:var(--fh-line2)}
.fh-bar .fh-fill{position:absolute;left:0;top:13px;height:3px;background:var(--fh-green)}
.fh-bar .fh-tk{position:absolute;top:10px;width:1px;height:9px;background:var(--fh-line2)}
.fh-bar .fh-tk span{position:absolute;top:12px;left:-10px;width:20px;text-align:center;font:500 9px var(--fh-sans);color:var(--fh-ink2)}
.fh-db{position:relative;height:46px;margin-top:4px}
.fh-db .fh-ax{position:absolute;left:0;right:0;top:22px;height:1px;background:var(--fh-line2)}
.fh-db .fh-seg{position:absolute;top:21px;height:3px;background:var(--fh-green)}
.fh-db .fh-dot{position:absolute;top:17px;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;background:var(--fh-cream);box-shadow:var(--shadow-fh-ring-ink)}
.fh-db .fh-dot.fh-e{background:var(--fh-green);box-shadow:none}
.fh-db .fh-dot span{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);font:600 10.5px var(--fh-sans);white-space:nowrap;font-feature-settings:"tnum"}
.fh-db .fh-dot.fh-e span{color:var(--fh-green)}
.fh-kv{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;border-top:1px solid var(--fh-line2);padding-top:12px;font-size:14px}
.fh-kv dt{color:var(--fh-ink2)}
.fh-kv dd{text-align:right;font-feature-settings:"tnum"}
.fh-pn q{font:italic 400 17px/1.4 var(--fh-serif);color:var(--fh-ink)}
.fh-pn .fh-frame{aspect-ratio:800/565;flex:none}
.fh-pn .fh-frame.fh-tallf img{object-position:50% 30%}
.fh-pntable{grid-column:2/-1}
.fh-pntable h3{font:300 clamp(30px,3vw,46px)/1.05 var(--fh-serif);letter-spacing:-.02em}
.fh-tbl{width:100%;border-collapse:collapse;font-size:15px}
.fh .fh-tbl th.label{display:table-cell;text-align:left;font-size:10px;line-height:1.3;color:var(--fh-ink2);padding:8px 10px 8px 0;border-bottom:1px solid var(--fh-ink)}
.fh-tbl td{padding:11px 10px 11px 0;border-bottom:1px solid var(--fh-line2);vertical-align:middle;font-feature-settings:"tnum"}
.fh-tbl td:first-child{font:400 19px/1.1 var(--fh-serif)}
.fh-tbl td.fh-kgc{white-space:nowrap;font-weight:600}
.fh-tbl td.fh-b{width:38%}
.fh-mini{position:relative;height:3px;background:var(--fh-line)}
.fh-mini i{position:absolute;left:0;top:0;bottom:0;background:var(--fh-green)}
.fh-note{margin-top:8px;color:var(--fh-ink2);font:italic 400 17px var(--fh-serif)}

/* ---------- booking bands: mint and rounded ---------- */
.fh-band{padding:clamp(14px,2vw,26px) 0}
.fh-bdbox{align-items:center;row-gap:22px;background:var(--fh-mint);border-radius:calc(var(--r-lg) + 4px);padding:clamp(26px,3.6vw,48px) clamp(22px,3.6vw,52px)}
.fh-bdt{grid-column:1/8}
.fh .fh-bdt .label{color:var(--fh-green)}
.fh-bdl{font:300 clamp(26px,2.7vw,42px)/1.12 var(--fh-serif);font-variation-settings:"opsz" 72;letter-spacing:-.018em;margin-top:10px;text-wrap:balance}
.fh-bdc{grid-column:8/13;display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:flex-end}

/* ---------- client videos ---------- */
.fh-camera{padding:clamp(60px,8vw,120px) 0}
.fh-camg{margin-top:clamp(30px,4vw,56px);align-items:start}
.fh-camh{grid-column:1/4}
.fh-camh h2{font-size:clamp(46px,4.8vw,80px);margin-top:14px}
.fh-camh p{color:var(--fh-ink2);margin-top:18px;font-size:15px}
.fh-reels{grid-column:4/13;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--fh-g)}
.fh-rbox{position:relative;aspect-ratio:9/16;overflow:hidden;background:#111;border-radius:calc(var(--r-lg) - 2px)}
.fh .fh-rbox video{width:100%;height:100%;object-fit:cover}
.fh-rbox .reel-cover{border-radius:4px}
.fh .fh-snd{position:absolute;z-index:3;right:10px;bottom:10px;background:var(--fh-paper);color:var(--fh-ink);border:0;padding:8px 11px;border-radius:var(--r-pill);cursor:pointer;font-size:10px}
.fh-reel h3{font:400 italic 24px/1.1 var(--fh-serif);margin:14px 0 4px}
.fh-reel p{color:var(--fh-ink2);font-size:14px}

/* ---------- in their words ---------- */
.fh-words{padding:clamp(60px,8vw,120px) 0}
.fh-leadq{margin:clamp(40px,5vw,80px) 0 clamp(40px,5vw,72px);align-items:start}
.fh-qm{grid-column:1/2;font:300 clamp(90px,10vw,170px)/.7 var(--fh-serif);color:var(--fh-green);text-align:right}
.fh-leadq blockquote{grid-column:2/12;font:300 clamp(36px,5.2vw,88px)/1.02 var(--fh-serif);font-variation-settings:"opsz" 72;letter-spacing:-.025em}
.fh-leadq figcaption{grid-column:2/12;display:flex;align-items:center;gap:14px;margin-top:26px}
.fh .fh-lqface{width:48px;height:48px;border-radius:50%;object-fit:cover}
.fh .fh-leadq .label{display:inline}
.fh .fh-leadq .label.fh-ink{color:var(--fh-ink)}
.fh-wallh{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:clamp(18px,2vw,28px)}
.fh-wallnav{display:none;gap:8px}
.fh-wn{width:44px;height:44px;border:0;border-radius:50%;background:#fff;box-shadow:var(--shadow-fh-ring);color:var(--fh-ink);font:400 18px/1 var(--fh-sans);cursor:pointer}
.fh-wall{columns:4 250px;column-gap:var(--fh-g)}
.fh-wall:focus-visible{outline:2px solid var(--fh-green);outline-offset:6px}
.fh-tc{display:flex;flex-direction:column;gap:18px;break-inside:avoid;margin:0 0 var(--fh-g);background:#fff;padding:22px 22px 20px;border-radius:calc(var(--r-lg) - 2px);box-shadow:var(--shadow-fh-card)}
.fh-tc blockquote{font:400 clamp(18px,1.3vw,20px)/1.38 var(--fh-serif);letter-spacing:-.005em;color:var(--fh-ink)}
.fh-tc blockquote::before{content:"\201C";color:var(--fh-green)}
.fh-tc blockquote::after{content:"\201D";color:var(--fh-green)}
.fh-tc figcaption{display:flex;align-items:center;gap:12px;margin-top:auto}
.fh .fh-av{flex:none;width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--fh-mint);display:grid;place-items:center;font:400 italic 22px/1 var(--fh-serif);color:var(--fh-green)}
.fh-nm{display:block;font:600 14px/1.25 var(--fh-sans)}
.fh-tg{display:block;font-size:13px;line-height:1.35;color:var(--fh-ink2);margin-top:2px}
.fh-wallbar{display:none;position:relative;height:2px;background:var(--fh-line2);margin-top:14px;border-radius:2px}
.fh-wallbar i{position:absolute;left:0;top:0;bottom:0;width:20%;background:var(--fh-green);border-radius:2px;transition:transform .2s}

/* ---------- the WhatsApp files ---------- */
.fh-corr{background:#fff;padding:clamp(60px,8vw,120px) 0}
.fh-corrh{margin:clamp(30px,4vw,56px) 0 clamp(26px,3vw,44px);align-items:end}
.fh-corrh h2{grid-column:1/8;font-size:clamp(46px,6vw,100px)}
.fh-corrh p{grid-column:9/13;color:var(--fh-ink2)}
.fh-sheet{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:30px var(--fh-g);align-items:start}
.fh-shot{min-width:0;margin:0}
.fh-shb{display:block;cursor:zoom-in;text-decoration:none}
.fh-shb .fh-frame{aspect-ratio:9/16;border-radius:calc(var(--r-md) + 2px);box-shadow:var(--shadow-fh-edge);transition:box-shadow .3s}
.fh-shb:hover .fh-frame,.fh-shb:focus-visible .fh-frame{box-shadow:var(--shadow-fh-edge-green)}
.fh-shb:focus-visible{outline:none}
.fh .fh-shot .fh-frame img{object-position:50% 0}
.fh-shot .fh-cap{flex-direction:column;gap:3px}
.fh .fh-shot .fh-cap .label:first-child{color:var(--fh-ink)}
.fh-lbox{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;margin:0;color:#fff}
.fh-lbox::backdrop{background:rgba(18,24,17,.9)}
.fh-lbox[open]{display:grid;place-items:center}
.fh-lbin{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px;max-width:100%}
.fh-lbin img{display:block;max-height:calc(100dvh - 130px);max-width:min(560px,calc(100vw - 32px));width:auto;height:auto;background:var(--fh-cream);border-radius:calc(var(--r-md) + 2px);box-shadow:var(--shadow-fh-box)}
.fh .fh-lbcap{color:rgba(255,255,255,.85)}
.fh-lbnav{display:flex;gap:10px}
.fh-lbnav button{min-width:48px;height:44px;padding:0 16px;border:0;border-radius:var(--r-pill);background:var(--fh-paper);color:var(--fh-ink);cursor:pointer;font:500 16px/1 var(--fh-sans)}
.fh .fh-lbnav button.label{display:inline-block;font-size:11px;color:var(--fh-ink)}

/* ---------- how it works ---------- */
.fh-method{background:var(--fh-cream);padding:clamp(60px,8vw,120px) 0}
.fh-mh{margin:clamp(30px,4vw,56px) 0 clamp(36px,4vw,64px)}
.fh-mh h2{grid-column:1/9;font-size:clamp(46px,6vw,100px)}
.fh-step{grid-column:span 4;position:relative;padding-top:18px}
.fh-hr{position:absolute;top:0;left:0;right:0;height:1px;background:var(--fh-ink)}
.fh-sn{font:200 clamp(110px,11vw,190px)/.8 var(--fh-serif);letter-spacing:-.03em;color:var(--fh-green);font-feature-settings:"lnum"}
.fh-step h3{font:300 clamp(26px,2.4vw,38px)/1.1 var(--fh-serif);letter-spacing:-.015em;margin:22px 0;max-width:12em}
.fh-step .fh-frame{aspect-ratio:3/2}

/* ---------- pricing ---------- */
.fh-rates{padding:clamp(60px,8vw,120px) 0;overflow:hidden}
.fh-rg{margin-top:clamp(30px,4vw,56px);align-items:end}
.fh-ramt{grid-column:1/8;position:relative}
.fh-from{font:italic 300 clamp(26px,2.6vw,40px)/1 var(--fh-serif)}
.fh-amt{display:flex;align-items:flex-start;font:200 clamp(110px,15vw,270px)/.82 var(--fh-serif);font-variation-settings:"opsz" 72;letter-spacing:-.03em;color:var(--fh-green);margin:12px 0 0 -.04em;white-space:nowrap;font-feature-settings:"lnum","tnum"}
.fh-rs{font-size:.42em;margin:.12em .06em 0 0;font-weight:300}
.fh-pm{font:italic 300 clamp(26px,2.6vw,40px)/1 var(--fh-serif);margin-top:14px}
.fh-rspec{grid-column:8/13}
.fh .fh-rspec>.label{margin-bottom:12px}
.fh-rspec ul{margin:0 0 26px;border-top:1px solid var(--fh-ink)}
.fh-rspec li{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--fh-line2);font:300 clamp(20px,1.7vw,26px)/1.2 var(--fh-serif)}
.fh .fh-rspec li .label{color:var(--fh-green)}
.fh-aside{color:var(--fh-ink2);font-size:14px;margin-top:16px}
.fh-roundel{position:absolute;right:0;top:-20px;width:clamp(110px,10vw,150px);aspect-ratio:1}
.fh-roundel svg{width:100%;height:100%;overflow:visible}
.fh-roundel text{font:600 10.4px var(--fh-sans);fill:var(--fh-green)}
.fh-roundel text.fh-zero{font:italic 300 32px var(--fh-serif);fill:var(--fh-green)}

/* ---------- questions ---------- */
.fh-faq{padding:clamp(40px,6vw,90px) 0 clamp(60px,8vw,120px)}
.fh-faqg{margin-top:clamp(30px,4vw,56px);align-items:start}
.fh-faqg h2{grid-column:1/5;font-size:clamp(46px,6vw,100px)}
.fh-faql{grid-column:6/13;border-top:1px solid var(--fh-ink)}
.fh-acc{border-bottom:1px solid var(--fh-line2)}
.fh-acc summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:44px 1fr 20px;gap:10px;align-items:baseline;padding:20px 0;font:300 clamp(21px,1.9vw,30px)/1.2 var(--fh-serif)}
.fh-acc summary::-webkit-details-marker{display:none}
.fh .fh-acc summary .label{color:var(--fh-green)}
.fh-acc summary i{position:relative;width:13px;height:13px;align-self:center}
.fh-acc summary i::before,.fh-acc summary i::after{content:"";position:absolute;left:0;right:0;top:6px;height:1px;background:var(--fh-ink);transition:transform .4s}
.fh-acc summary i::after{transform:rotate(90deg)}
.fh-acc[open] summary i::after{transform:rotate(0)}
.fh-acc p{margin:0 0 22px 54px;color:var(--fh-ink2);max-width:36em}

/* ---------- the closing call ---------- */
.fh-close{padding:clamp(60px,8vw,110px) 0 0;overflow:hidden}
.fh-clg{margin-top:clamp(30px,4vw,56px);align-items:end}
.fh-cltxt{grid-column:1/8;padding-bottom:clamp(30px,4vw,60px)}
.fh-cltxt h2{font-size:clamp(56px,7.4vw,132px);line-height:.94}
.fh-cltxt h2 .fh-em{display:block}
.fh-cltxt .fh-ctas{margin-top:clamp(30px,3vw,48px)}
.fh-cltxt p{margin-top:18px;color:var(--fh-ink2)}
.fh-clfig{grid-column:8/13;margin:0 calc(var(--fh-gut) * -1) 0 0}
.fh-clfig .fh-frame{aspect-ratio:3/4}

/* ---------- the contents rail (laptops, built by home-final.js) ---------- */
.fh-rail{position:fixed;right:clamp(10px,1.1vw,20px);top:50%;transform:translateY(-50%);z-index:45;display:none}
@media (min-width:1200px){html.fh-motion .fh-rail{display:block}}
.fh-rail ol{margin:0;padding:8px 10px 8px 0;display:flex;flex-direction:column;gap:3px;position:relative}
.fh-rail ol::after{content:"";position:absolute;right:0;top:12px;bottom:12px;width:1px;background:var(--fh-line2)}
.fh-thumb{position:absolute;right:-.5px;top:8px;width:2px;height:22px;background:var(--fh-green);transition:transform .5s cubic-bezier(.2,.7,.1,1)}
.fh .fh-rail a.label{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:7px;height:22px;text-decoration:none;color:var(--fh-ink2);font-size:10px;line-height:1;letter-spacing:.08em}
.fh-rail a i{display:block;width:8px;height:1px;background:currentColor;transition:width .45s cubic-bezier(.2,.7,.1,1)}
.fh .fh-rail .fh-lb.label{position:absolute;right:100%;margin-right:6px;background:var(--fh-paper);box-shadow:var(--shadow-fh-edge);padding:5px 8px;border-radius:var(--r-pill);white-space:nowrap;letter-spacing:.14em;opacity:0;transform:translateX(6px);transition:opacity .3s,transform .3s;pointer-events:none}
.fh-rail a b{font-weight:600;background:var(--fh-paper);padding:2px 3px}
.fh-rail a:hover .fh-lb,.fh-rail a.fh-on.fh-flash .fh-lb{opacity:1;transform:none}
.fh .fh-rail a.fh-on.label{color:var(--fh-green)}
.fh-rail a.fh-on i{width:20px}
.fh-rail:hover a.fh-on:not(:hover) .fh-lb{opacity:0}

/* ---------- quiet reveals: short fades and rises, once ---------- */
html.fh-motion .fh-q{opacity:0;transform:translateY(18px);transition:opacity 1s cubic-bezier(.2,.7,.1,1),transform 1.1s cubic-bezier(.2,.7,.1,1)}
html.fh-motion .fh-q.fh-in{opacity:1;transform:none}
html.fh-motion .fh-scene .fh-snmedia img{opacity:0;transition:opacity 1.4s ease}
html.fh-motion .fh-scene .fh-snin{opacity:0;transform:translateY(22px);transition:opacity 1s .15s cubic-bezier(.2,.7,.1,1),transform 1.1s .15s cubic-bezier(.2,.7,.1,1)}
html.fh-motion .fh-scene.fh-in .fh-snmedia img{opacity:1}
html.fh-motion .fh-scene.fh-in .fh-snin{opacity:1;transform:none}

/* ---------- tablets and phones ---------- */
@media (max-width:900px){
  .fh-ctg,.fh-ltg,.fh-ixhead,.fh-corrh,.fh-mh,.fh-steps,.fh-rg,.fh-faqg,.fh-clg,.fh-bdbox,.fh-camg,.fh-leadq{grid-template-columns:repeat(4,minmax(0,1fr))}
  .fh :is(.fh-ctg,.fh-ltg,.fh-ixhead,.fh-corrh,.fh-mh,.fh-steps,.fh-rg,.fh-faqg,.fh-clg,.fh-bdbox,.fh-camg,.fh-leadq)>*{grid-column:1/-1}
  .fh-slot{height:auto;width:min(62vw,calc((var(--fh-vh) * 100 - 400px) * .8));min-width:200px;border-radius:var(--r-lg)}
  .fh-chip{padding:8px 11px 9px}
  .fh-chip span{font-size:14px}
  .fh .fh-chip b.label{font-size:9px}
  .fh-c1{left:-26%;top:6%}
  .fh-c2{right:-24%;top:70%}
  .fh-c3{left:-18%;bottom:-4%}
  .fh .fh-vcap{display:none}
  html.fh-motion .fh-panel{left:12px;right:12px;width:auto;bottom:12px;padding:20px 18px 18px}
  .fh-panel .btn{padding:15px 16px}
  .fh-contents ol{margin-top:30px}
  .fh-contents li a{grid-template-columns:36px 1fr auto;gap:10px}
  .fh-lth{margin-top:30px}
  .fh-ltbody{columns:1}
  .fh-plate .fh-frame{height:auto;aspect-ratio:4/5}
  .fh-ixhead p{margin-top:16px}
  .fh-snin{max-width:none}
  .fh-snshade{background:linear-gradient(0deg,rgba(14,20,13,.92) 0%,rgba(14,20,13,.62) 50%,rgba(14,20,13,.18) 100%)}
  .fh-snh{font-size:clamp(30px,8.4vw,48px)}
  .fh-snq{font-size:16px;margin-top:16px}
  .fh-snact{margin-top:20px}
  .fh-sncopy{padding-bottom:clamp(40px,8vh,80px)}
  .fh-scene{--op:40% 50%}
  .fh-kggrid{grid-template-columns:minmax(0,1fr)}
  .fh-kg,.fh-kg.fh-wide{grid-column:1/-1}
  .fh-pic{width:40%;top:-12px}
  .fh-pic.fh-tall{width:24%;top:-14px}
  .fh-what{max-width:64%}
  .fh-bxstage{grid-template-columns:minmax(0,1fr);gap:0;padding-top:12px;padding-bottom:24px;grid-template-areas:"k" "o" "w" "f" "l" "q"}
  .fh-bxcopy{display:contents}
  .fh .fh-bxk{grid-area:k}
  .fh-kgo{grid-area:o;font-size:clamp(72px,22vw,120px)}
  .fh-bxwho{grid-area:w;margin:4px 0 16px;font-size:15px}
  .fh-bxfig{grid-area:f;width:min(100%,380px)}
  .fh .fh-bxlost{grid-area:l;justify-self:start;margin-top:16px}
  .fh-bxq{grid-area:q;font-size:19px;margin-top:12px}
  .fh-hstrack{grid-template-columns:minmax(0,1fr)}
  .fh-pntable{grid-column:1/-1}
  .fh-pnintro{padding-bottom:10px}
  .fh-bdc{justify-content:flex-start}
  .fh-camh{display:block}
  .fh .fh-camh .label{display:none}
  .fh-reels{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;margin:28px calc(var(--fh-gut) * -1) 0;padding:0 var(--fh-gut) 10px;scroll-padding-inline:var(--fh-gut);scrollbar-width:none}
  .fh-reels::-webkit-scrollbar{display:none}
  .fh-reel{flex:0 0 68vw;scroll-snap-align:start}
  .fh-camh h2{font-size:clamp(44px,12vw,64px)}
  .fh-qm{text-align:left;margin-bottom:-10px}
  .fh-wallnav{display:flex}
  .fh-wall{columns:auto;display:flex;align-items:stretch;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-inline:calc(var(--fh-gut) * -1);padding:2px var(--fh-gut) 6px;scroll-padding-inline:var(--fh-gut);scrollbar-width:none}
  .fh-wall::-webkit-scrollbar{display:none}
  .fh-tc{flex:0 0 min(84%,340px);scroll-snap-align:start;margin:0}
  .fh-wallbar{display:block}
  .fh-corrh p{margin-top:14px}
  .fh-sheet{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-inline:calc(var(--fh-gut) * -1);padding:0 var(--fh-gut) 10px;scroll-padding-inline:var(--fh-gut);scrollbar-width:none}
  .fh-sheet::-webkit-scrollbar{display:none}
  .fh-shot{flex:0 0 46vw;scroll-snap-align:start}
  .fh-step{margin-bottom:40px}
  .fh-step .fh-frame{aspect-ratio:16/9}
  .fh-rspec{margin-top:40px}
  .fh-roundel{position:relative;right:auto;top:auto;width:110px;margin:30px 0 0 auto}
  .fh-faql{margin-top:30px}
  .fh-acc p{margin-left:0}
  .fh-clfig{margin:10px calc(var(--fh-gut) * -1) 0}
  .fh-clfig .fh-frame{aspect-ratio:4/5}
  .fh-bdbox{border-radius:var(--r-lg)}
}
@media (max-width:1100px) and (min-width:901px){.fh-sheet{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:700px){.fh-mhide{display:none}}
@media (max-width:600px){
  .fh .btn{font-size:14.5px;padding:16px 18px;gap:12px;white-space:normal;text-align:center}
}
@media (prefers-reduced-motion: reduce){
  .fh *,.fh *::before,.fh *::after{animation:none!important;transition:none!important}
}
/* ===== end FINAL HOME ===== */