/* Phone edition. Loaded after site.css with media="(max-width:760px)", so every rule here is phone-only and wins ties.
   The look follows the desktop's ivory and white (2026-10-19, IVORY FOUNDATION at the end): a white header, ivory and
   white sections, Inter throughout, arranged the way phones read. Class contract for page families: .ph phone-only, .dk desktop-only, .sheet[id] opened by
   [data-sheet="id"], .rows row list, .swipe sideways row, .goals switcher with [data-goal] panes. */
:root{--m:20px}
*{-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;scroll-padding-top:76px}
body{font-size:17px;line-height:1.55}
h1,h2{font-weight:700;line-height:1.1}
.ph{display:revert}
.dk{display:none!important}
.lid-cover{display:none!important}

/* the band: the desktop's header; the white bar with the name (or the way back) and the booking button stays pinned.
   The band and its .wide step aside so the bar can stick to the whole page, not just the header. */
.band,.band>.wide{display:contents}
.pbar{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:64px;
  background:#fff;padding:10px var(--m);border-bottom:1px solid var(--rule)}
.pbar .mark{display:flex;flex-direction:column;justify-content:center;min-height:44px;font-size:25px}.pbar .mark small{display:block;font-size:13px;margin-top:3px}
.pbar .back{color:var(--ink);text-decoration:none;font-size:16px;font-weight:500;display:flex;align-items:center;gap:4px;min-height:44px;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pbar .cta{flex:none;display:flex;align-items:center;min-height:44px;background:var(--leaf);color:#fff;text-decoration:none;font-weight:600;font-size:15px;
  padding:9px 16px;border-radius:6px;white-space:nowrap}
.hero,.hero.has-img{display:block;background:var(--band);padding:22px var(--m) 26px}
.hero.has-img{padding-bottom:22px}.hero.has-img .txt{padding:0 0 20px}
.crumbs{font-size:15px;color:var(--muted);margin-bottom:6px}.crumbs a{color:var(--muted)}
.hero h1,.hero.has-img h1{font-size:30px;line-height:1.12}
.hero .txt>p,.hero .txt .intro p{font-size:17px;color:var(--ink);margin-top:10px}
.hero .more{display:none}  /* layout.phone_intro: phones read one or two sentences of the intro */
.hero .btn{margin-top:18px}
.hero-img{height:340px;aspect-ratio:auto;object-position:64% 20%;border-radius:6px}

/* sections, like desktop: white and pale green, a rule between (.read and .wide give the side margins) */
.sec{padding:40px 0;border-top:1px solid var(--rule)}.sec.tint{background:var(--tint)}
.sec h2{font-size:28px;margin-bottom:12px}
.read h2:not(:first-child),.wide h2:not(:first-child){margin-top:30px}
.sec p+p{margin-top:12px}.small{font-size:15px;color:var(--muted)}
.btn{display:block;text-align:center;font-size:17px;padding:14px;border-radius:6px;margin-top:16px}
.ctas{flex-direction:column;gap:10px;margin-top:18px}.ctas .btn{margin-top:0}

/* rows: the desktop's .lib list, with a chevron so it's clear they open */
.rows{list-style:none;margin:0 calc(-1 * var(--m))}
.rows>*{display:flex;gap:12px;align-items:center;width:100%;min-height:44px;padding:14px var(--m);border:0;border-top:1px solid var(--rule);
  background:none;font:inherit;color:var(--ink);text-align:left;text-decoration:none;cursor:pointer}
.rows>*:last-child{border-bottom:1px solid var(--rule)}
.rows .tx{flex:1;min-width:0}.rows .tx b{display:block;font-weight:600;font-size:18px;line-height:1.3}
.rows .tx span{display:block;font-size:15px;color:var(--muted);line-height:1.4;margin-top:2px}
.rows .k{font-size:15px;color:var(--muted);white-space:nowrap}
.rows .chev{color:var(--control);font-size:24px;line-height:1}
.rows .num{flex:0 0 30px;height:30px;border-radius:50%;background:var(--leaf);color:#fff;font:700 17px/30px var(--sans);text-align:center;padding:0}
.rows i.spice{width:14px;height:14px;flex:0 0 14px;margin:0}

/* a sideways row: photos and captions side by side, the next one peeking */
.swipe{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--m));padding:0 var(--m) 4px;
  scroll-padding-inline:var(--m);scrollbar-width:none}
.swipe::-webkit-scrollbar{display:none}.swipe>*{flex:0 0 82%;scroll-snap-align:start}
.swipe img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px}.swipe figcaption{font-size:16px;margin-top:8px;line-height:1.45}

/* the note, a little tighter */
.notebook{padding:14px 16px}
.notebook p,.notebook li{font-size:17px}
.meal{background:#fff;border:1px solid var(--rule);border-radius:4px;padding:10px 12px}
.meal svg.thali{width:100%;max-width:320px;height:auto;display:block;margin:0 auto}
.meal ul{list-style:none}.meal li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px solid var(--rule);font-size:16px}
.meal li span:last-child{white-space:nowrap;color:var(--muted)}

/* goal switcher: one verdict at a time once the script runs; every pane shows without it */
.goals{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--m));padding:0 var(--m)}
.goals::-webkit-scrollbar{display:none}
.goals button{flex:0 0 auto;display:flex;align-items:center;gap:7px;min-height:44px;font:500 16px var(--sans);color:var(--ink);
  border:1.5px solid var(--control);background:#fff;border-radius:4px;padding:8px 12px;cursor:pointer}
.goals button.on{border-color:var(--leaf);background:var(--leaf);color:#fff}
.goals i.spice{margin:0}
[data-goal][hidden]{display:none!important}
.verdict{padding:14px 0 4px}.verdict .w{font-family:var(--sans);font-size:26px;font-weight:700}.verdict p{margin-top:4px}
.v-good{color:var(--good)}.v-ok{color:var(--ok)}.v-limit{color:var(--limit)}

/* the desktop's tables, katoris and switches at phone size */
table.facts{font-size:17px}
.facts th:first-child,.facts td:first-child{padding-left:0}.facts th:last-child,.facts td:last-child{padding-right:0}
.katoris{grid-template-columns:repeat(3,1fr);gap:14px 6px}.katoris figure{text-align:center;font-size:14px;line-height:1.3;color:var(--muted)}
.katoris svg{width:84px;margin:0 auto 4px}.katoris b{font-size:18px;color:var(--ink)}.katoris .stream{display:none}
.shelf{display:flex;gap:12px;overflow-x:auto;margin:0 calc(-1 * var(--m));padding:0 var(--m);scrollbar-width:none}
.shelf::-webkit-scrollbar{display:none}
.shelf a{flex:0 0 130px;text-decoration:none;color:var(--ink)}.shelf img{width:130px;aspect-ratio:4/3;object-fit:cover;border-radius:4px}
.shelf b{display:block;font-size:15px;font-weight:600;margin-top:6px;line-height:1.3}.shelf span{font-size:14px;color:var(--muted)}
.switch{display:flex;gap:6px;align-items:center;overflow-x:auto;scrollbar-width:none;font-size:15px;margin:0 calc(-1 * var(--m)) 8px;padding:0 var(--m)}
.switch::-webkit-scrollbar{display:none}
.switch b{color:var(--muted);font-weight:500;margin-right:2px;flex:0 0 auto}
.switch a,.switch span{flex:0 0 auto;display:flex;align-items:center;min-height:44px;margin:0;border:1.5px solid var(--rule);background:#fff;border-radius:4px;
  padding:6px 11px;text-decoration:none;color:var(--ink);font-weight:500}
.switch span,.switch span.on{background:var(--leaf);border-color:var(--leaf);color:#fff}

/* footer: every section, three to a row, then who I am and how to reach me on two lines;
   the long link lists are desktop-only */
footer{font-size:15px;padding:18px 0 22px}
.foot{display:block;line-height:1.5}
.foot a{display:inline-block;min-height:44px;padding:10px 0}
.fnav{display:grid;grid-template-columns:repeat(3,1fr);column-gap:12px;margin:0 0 14px;border-top:1px solid rgba(228,235,217,.22)}
.fnav a{display:flex;align-items:center;min-height:44px;padding:6px 0;border-bottom:1px solid rgba(228,235,217,.22);font-size:15px;line-height:1.25;color:#E4EBD9;text-decoration:none}
.foot .who b::after{content:" · ";font-weight:400;color:#C9D3BC}
.foot .who>br:first-of-type{display:none}
.foot .reach br{display:none}
.foot .reach a{margin-right:16px}
.fine{margin-top:8px;padding-top:6px;font-size:13px;line-height:1.5}
.fine a{min-height:0;padding:0}

/* sheets: a white sheet with a green edge. Without the script a sheet is an ordinary block where it sits. */
.sheet{border-top:4px solid var(--leaf);padding:10px 0 4px;margin-top:18px}
.sheet .sh{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px}
.sheet h3,.sheet .sh h2{font-family:var(--sans);font-size:24px;line-height:1.15;margin:0}
.sheet .x{display:none;font:600 15px var(--sans);color:var(--leaf);background:none;border:0;padding:4px 0 4px 8px;min-height:44px;min-width:44px;text-align:right;cursor:pointer}
.scrim{display:none}
.js-sheets .scrim{display:block;position:fixed;inset:0;z-index:60;background:rgba(42,38,32,.4);opacity:0;pointer-events:none;transition:opacity .25s}
.js-sheets .sheet{position:fixed;left:0;right:0;bottom:0;z-index:61;margin:0;background:#fff;max-height:86svh;overflow-y:auto;overscroll-behavior:contain;
  transform:translateY(100%);visibility:hidden;transition:transform .3s cubic-bezier(.3,.8,.2,1),visibility 0s .3s;
  padding:10px var(--m) calc(24px + env(safe-area-inset-bottom))}
.js-sheets .sheet .x{display:block}
.js-sheets body.open{overflow:hidden}
.js-sheets body.open .scrim{opacity:1;pointer-events:auto}
.js-sheets .sheet.open{transform:none;visibility:visible;transition:transform .3s cubic-bezier(.3,.8,.2,1)}
@media (prefers-reduced-motion: reduce){.js-sheets .sheet,.js-sheets .sheet.open,.js-sheets .scrim{transition:none}}

/* home: goal rows beside the desktop's goal key; the before/after photos stack, two first, then "Show all 4" (phone.js) */
.goal-rows{margin-top:16px;margin-bottom:14px}
.goal-rows .k{font-size:15px}
.ba-grid{gap:26px;margin-top:6px}
.ba-grid figure{margin:0}
.ba-grid figcaption{font-size:16px;line-height:1.5}
.js-sheets [data-phone-show="2"]:not(.all)>:nth-child(n+3){display:none}
.sec .rows+.sheet,.sec .sheet+.sheet{margin-top:22px}
.sheet>p+p{margin-top:12px}

/* food: the goal buttons pick one verdict once the script runs; before that each pane says whose verdict it is */
.goals{margin-top:4px;margin-bottom:2px}
.verdict .for{font-weight:600;margin:0}
.js-sheets .verdict .for{display:none}
html:not(.js-sheets) .goals{display:none}
.verdict .w{display:block}

/* plan: the day total, then a row per meal that opens its card */
.total{font-size:17px;margin:4px 0 14px}.total b{font-family:var(--sans);font-size:26px}
.rows .when{flex:0 0 64px;white-space:normal}
.sheet .sh h3 span{display:block;font-family:var(--sans);font-size:16px;font-weight:400;color:var(--muted);margin-top:2px}
.sheet .meal-card{padding:10px 12px;border:1px solid var(--rule);border-radius:4px}
.sheet .meal-card svg.thali{width:100%;max-width:320px;height:auto;display:block;margin:0 auto}
.sheet .meal-card li span.kc{white-space:nowrap}

/* hubs and tools: the finder's fields fill the width, two to a row; the letter strip sticks below the bar, not under it;
   the calculator panel keeps its paper but gives the fields more of the width */
.ffilters{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ffilters.gfilter{display:flex;flex-direction:column;align-items:stretch}
.ffilters select,.ffilters .search{max-width:none;width:100%;min-height:44px}
.az{top:64px}
form.tool{padding:18px 16px}
.tool .hunit label{min-height:44px;font-size:16px}.tool .hunit input{width:24px;height:24px;margin:0}

/* wide facts tables (4 or more columns, marked .stack by the build) read as one card per row, each cell naming its column */
table.stack,table.stack tbody,table.stack tr,table.stack td{display:block;width:auto}
table.stack thead,table.stack tr.hd{display:none}
table.stack tr{display:grid;grid-template-columns:repeat(auto-fit,minmax(58px,1fr));column-gap:10px;border:1px solid var(--rule);border-radius:4px;padding:8px 12px 10px;margin:0 0 10px}
table.stack td{display:block;padding:4px 0!important;border:0;text-align:left!important;white-space:normal!important;overflow-wrap:anywhere;font-size:16px;line-height:1.4}
table.stack td:not(.num){grid-column:1/-1}  /* words take the whole width; numbers sit side by side, each under its label */
table.stack td::before{content:attr(data-label);display:block;font-size:13px;font-weight:600;color:var(--muted);line-height:1.3}
table.stack td:first-child{font-weight:600;font-size:17px;padding:0 0 4px!important;border-bottom:1px solid var(--rule);margin-bottom:2px}
table.stack td:first-child::before{display:none}
table.stack.sortable thead{display:block}
table.stack.sortable thead tr{display:flex;flex-wrap:wrap;gap:0 16px;border:0;padding:0;margin:0 0 8px}
table.stack.sortable thead th{display:block;border:0;padding:0}
table.stack.sortable thead th button{display:inline-flex;align-items:center;min-height:44px}

/* group hubs: a real three-column table on phones, never cards (ruling R12); the per 100 g columns are .dk */
table.compact{font-size:15px;width:100%}
table.compact th,table.compact td{padding:8px 6px}
table.compact th button{min-height:44px}

/* tool pages (lane B3): a short band on phones */
.hero.compact{padding:10px var(--m) 14px}
.hero.compact h1{font-size:26px}
.hero.compact .txt>p{font-size:16px;margin-top:6px}
.result{scroll-margin-top:76px}  /* clear of the pinned bar when the first answer scrolls into view */
.hero .txt>p.wa-note{font-size:15px;margin-top:10px}

/* U4: every chip in view. The goal buttons sit in a 2 x 2 grid and the diet and calorie switches wrap, so the chip for the
   page you are on (Jain, Menopause) is never hidden off the right edge */
.goals{display:grid;grid-template-columns:1fr 1fr;overflow:visible;margin-left:0;margin-right:0;padding:0}
.goals button{justify-content:flex-start}
.switch{flex-wrap:wrap;overflow:visible;margin-left:0;margin-right:0;padding:0;row-gap:6px}
/* U18: 16px in every box people type in, so iOS does not zoom the page */
.ffilters select,.ffilters .search,.search,.tool input,.tool select{font-size:16px}
/* U41: 44px tap targets in the A to Z strip, the calorie chips and lists of links */
.az a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
a.chip{min-height:44px}
.inline-links a{display:inline-flex;align-items:center;min-height:44px;padding:0}
.linklist a{display:inline-flex;align-items:center;min-height:44px}
.lib li>a:first-child{min-height:44px;display:flex;align-items:center}
/* U33: lab tables put the source under the number on phones */
table.labtable:not(.stack),table.labtable:not(.stack) tbody{display:block}
table.labtable:not(.stack) tr{display:grid;grid-template-columns:minmax(84px,32%) 1fr;column-gap:12px;border-bottom:1px solid var(--rule);padding:4px 0}
table.labtable:not(.stack) td,table.labtable:not(.stack) th{border:0;padding:4px 0}
table.labtable:not(.stack) .src-cell{grid-column:1/-1;font-size:15px;color:var(--muted)}
table.labtable:not(.stack) th.src-cell{display:none}
/* U32: home steps and questions open in place */
.accs{margin:0 calc(-1 * var(--m))}
.accs details{border-top:1px solid var(--rule)}
.accs details:last-child{border-bottom:1px solid var(--rule)}
.accs summary{display:flex;gap:12px;align-items:center;min-height:44px;padding:14px var(--m);cursor:pointer;list-style:none}
.accs summary::-webkit-details-marker{display:none}
.accs summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid var(--control);border-bottom:2px solid var(--control);transform:rotate(45deg);margin:0 4px 4px 0}
.accs details[open] summary::after{transform:rotate(-135deg);margin:4px 4px 0 0}
.accs .tx{flex:1;min-width:0}.accs .tx b{display:block;font-weight:600;font-size:18px;line-height:1.3}
.accs .num{flex:0 0 30px;height:30px;border-radius:50%;background:var(--leaf);color:#fff;font:700 17px/30px var(--sans);text-align:center}
.accs details>p{padding:0 var(--m) 16px}

/* design lane: a slimmer pinned bar that steps away while you read down (phone.js) and back on the way up (D3) */
html{scroll-padding-top:60px}
.pbar{min-height:52px;padding-top:4px;padding-bottom:4px;transition:transform .25s ease}
.pbar .mark{font-size:23px}.pbar .mark small{font-size:12px;margin-top:2px}
.bar-off .pbar{transform:translateY(-100%)}
.result{scroll-margin-top:60px}
/* the back link in the bar already names the first breadcrumb step, so the band leaves it out (D4) */
.crumbs .c0,.crumbs.c1{display:none}
/* glossary letters: one row that slides sideways, fading at the right edge so it reads as more (D24) */
.az{top:52px;display:flex;flex-wrap:nowrap;gap:0;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--m)) 6px;padding:0 var(--m);
  font-size:17px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);transition:top .25s ease}
.az::-webkit-scrollbar{display:none}
.az a{flex:none;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;text-decoration:none}  /* U41: 44px targets */
.az a[hidden]{display:none}
.bar-off .az{top:0}
/* contact: the label column keeps to one line (D34) */
table.contact,table.contact tbody,table.contact tr,table.contact td{display:block;width:auto}
table.contact tr{padding:10px 0;border-bottom:1px solid var(--rule)}
table.contact td{border:0;padding:0!important}
table.contact td:first-child{font-size:14px;font-weight:600;color:var(--muted)}  /* the label over its value, so an email never breaks mid-word */
/* D7: the "at a glance" card sits in the band, under the intro */
.hero.has-img .glance{margin:0 0 22px;max-width:none}
.glance-nums b{font-size:30px}
h1 .h1sub{font-size:19px;margin-top:6px}
/* D12 on phones: the grid keeps three columns; the goal column wraps under its dot */
.cmpgrid th,.cmpgrid td{padding:9px 6px;font-size:15px}
.cmpgrid tbody th{white-space:normal}
.cmpgrid thead th{white-space:normal}
.pair .pb{grid-template-columns:6.2em 1fr 4.8em;gap:8px}
table.buildtable td.mb,table.buildtable th.mb{width:22%;min-width:56px}
table.buildtable th{font-size:13px}
.portions{grid-template-columns:repeat(2,1fr);gap:10px}
/* D28: the pregnancy week chart as a compact table on phones */
table.buildtable td .small{display:block;font-size:13px;line-height:1.35;margin-top:2px}
/* D29/D31 on phones: the four steps as numbered rows, not four tall cards */
ol.steps{gap:0;margin-top:4px}
ol.steps li{display:grid;grid-template-columns:34px 1fr;column-gap:14px;padding:14px 0;background:none;border:0;border-radius:0;border-top:1px solid var(--rule)}
ol.steps li:last-child{border-bottom:1px solid var(--rule)}
ol.steps .sn{grid-row:span 2;margin:0}
ol.steps b{margin-bottom:2px}
.storychips{flex-wrap:wrap;gap:6px;margin:0 0 18px;padding:0}  /* mobile flow: every goal chip in view, as U4 asks of chip rows */
.storychips::-webkit-scrollbar{display:none}
.storychips button{flex:none}

/* r2 phone lane: calmer pages. The "Both open WhatsApp" line shows once, under the last pair of buttons (site.one_wa_note) */
.wa-note.rep{display:none}

/* folds: closed on phones once phone.js runs (built open, so the body is hidden until then to avoid a flash) */
.js-sheets details.fold:not(.r)>.fold-b{display:none}
details.fold{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.read details.fold:not(:first-child),.wide details.fold:not(:first-child){margin-top:22px}
details.fold+details.fold,.read details.fold+details.fold{margin-top:0;border-top:0}
details.fold>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:8px 0;cursor:pointer}
details.fold>summary>h2,details.fold>summary>h3,.sec details.fold>summary>h2{font-size:20px;line-height:1.25;margin:0!important;font-family:var(--sans)}
details.fold>summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid var(--control);border-bottom:2px solid var(--control);transform:rotate(45deg);margin:0 4px 4px 0}
details.fold[open]>summary::after{transform:rotate(-135deg);margin:4px 4px 0 0}
details.fold>.fold-b{padding:0 0 16px}
details.fold>.fold-b>:first-child{margin-top:0}
details.fold .small,details.fold p.src{font-size:15px}

/* long link lists: chips, and on a phone the first six (four for a list of pages) with a "Show all" button (phone.js) */
.inline-links{gap:8px}
.inline-links a{border:1px solid var(--rule);border-radius:4px;background:#fff;padding:4px 11px;text-decoration:none;line-height:1.3;font-size:16px}
.js-sheets .inline-links:has(>a:nth-of-type(9)):not(.all)>a:nth-of-type(n+7){display:none}
.js-sheets ul.clip:has(>li:nth-child(7)):not(.all)>li:nth-child(n+5){display:none}
.more-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;background:none;border:0;font:600 16px var(--sans);color:var(--leaf);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
html:not(.js-sheets) .more-btn{display:none}
.more-btn[hidden]{display:none}

/* a section that holds only a fold reads as one row */
.sec:has(>.read>details.fold:only-child){padding:6px 0}
.read>details.fold:only-child{border:0;margin:0}

/* "where next" link panels (glossary, tools): small headings over their chips, not a stack of big h2s */
.more-links h2,.sec .more-links h2,.sec.more-links h2{font-family:var(--sans);font-size:17px;font-weight:600;line-height:1.3;margin:18px 0 8px!important}
.more-links h2:first-child,.sec.more-links .read>h2:first-child{margin-top:0!important}
div.more-links{margin-top:26px}
.more-links p+p{margin-top:10px}

/* home: the quotes are a snap carousel, one card and the edge of the next, with "3 of 10" and Previous / Next under it
   (motion.js), so a cut-off card reads as "there are more", not as a broken layout */
.sec:has(>.strip){display:flex;flex-direction:column;padding-bottom:22px}
.sec:has(>.strip)>.wide{align-self:stretch;margin:0}
.strip{order:1;padding:2px var(--m) 6px;gap:12px;scroll-padding-inline:var(--m);cursor:auto;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip>*{flex-basis:86%}
.strip .testimonial{padding:16px}
.strip-nav{order:2;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0 0;padding:0 var(--m);max-width:none}
.strip-nav button{min-height:44px;min-width:96px;font-size:16px}
.strip-nav button.at-end{opacity:.35}
.strip-count{display:block;font-size:15px;color:var(--muted);font-variant-numeric:tabular-nums}

/* about: the seven certificates are a sideways row of small cards, the next one peeking */
.quals{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:8px calc(-1 * var(--m)) 0;padding:0 var(--m) 6px;
  scroll-padding-inline:var(--m);scrollbar-width:none}
.quals::-webkit-scrollbar{display:none}
.quals li{flex:0 0 74%;scroll-snap-align:start;padding:12px 14px}
.quals img.cert{height:150px;object-fit:contain;object-position:50% 50%;margin-bottom:8px}
.quals b{font-size:18px}
.quals .by{font-size:15px}.quals .small{font-size:14px}


/* foods hub: the four ways in are a sideways row, so the finder is near the top */
.foodguides{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--m)) 16px;padding:0 var(--m) 4px;scrollbar-width:none}
.foodguides::-webkit-scrollbar{display:none}
.foodguides p,.foodguides p+p{flex:0 0 78%;scroll-snap-align:start;margin:0;border:1px solid var(--rule);border-radius:4px;padding:10px 12px;background:var(--tint);line-height:1.5}

/* dishes: the plate drawing at a phone's size */
.sec .read>svg.thali:not(.small){max-width:220px}

/* lab pages: the number column is narrow, the words get the width */
table.labtable:not(.stack) tr{grid-template-columns:minmax(56px,20%) 1fr}

/* calculators: the answer button fills the width like every other button */
form.tool button[type=submit],form.tool .btn{display:block;width:100%}

/* home: the video band plays on phones too (motion.js, one film at a time); it needn't fill the screen. Behind a
   section's words the pause button sits top right, clear of the buttons and the phone number at the bottom */
.vid-bg>.vid-toggle{top:10px;bottom:auto;right:10px}
.vid-band{height:62vh;min-height:360px;max-height:560px}
.vid-band .over{padding-bottom:30px}
/* programs: the four cards' photos are banners, not squares */
.goalcard img{aspect-ratio:21/9}
.goalcard .gc-body{padding:16px 16px 18px}
.goalcard h2{font-size:25px}
.goalcard .gc-links .btn{flex:1 1 auto;margin-top:0}

/* foods hub: the finder's results are a list of rows with a small photo, so 185 foods scan like an index, not a wall of cards */
#fgrid{grid-template-columns:1fr;gap:0;margin-top:6px;border-bottom:1px solid var(--rule)}
#fgrid .fcard{display:grid;grid-template-columns:72px 1fr;column-gap:14px;align-items:center;min-height:76px;padding:10px 0;border-top:1px solid var(--rule)}
#fgrid .fcard[hidden]{display:none}
#fgrid .fcard>img,#fgrid .fcard>.fblank{grid-row:span 2;width:72px;height:54px;aspect-ratio:auto;object-fit:cover}
#fgrid .fblank .fgroup{display:none}
#fgrid .fblank svg.fmark{width:62%}
#fgrid .fname{margin-top:0;align-self:end;font-size:17px}
#fgrid .fmeta{align-self:start}
#fgrid .fcard .fdots{display:inline;margin-left:4px}

/* ===== walls pass, lane B (2026-10-16): structured copy on phones ===== */
ul.pts li,ol.pts li{padding:4px 0 4px 24px}
dl.factrow{gap:8px}
dl.factrow>div{flex:1 1 40%;padding:8px 12px}
dl.factrow dt{font-size:23px}
.linkset{margin-top:16px}
blockquote.pull p{font-size:22px}
blockquote.pull.result p{font-size:17px}

/* ===== walls-a: breaking walls of text on /foods/, eat-and-avoid and /calories/ pages ===== */
.foodguides li,.foodguides li+li{flex:0 0 78%;scroll-snap-align:start;margin:0;border:1px solid var(--rule);border-radius:4px;padding:10px 12px;background:var(--tint);line-height:1.5}


/* ===== mobile flow: the More tab's menu sheet (layout.menu_sheet). Only once the sheet script runs: without it the tab
   jumps to the footer's list of pages, so the menu never shows as a second copy of the footer ===== */
html:not(.js-sheets) .menu-sheet{display:none}
.menu-sheet .mgrid{display:grid;grid-template-columns:1fr 1fr;column-gap:14px;border-top:1px solid var(--rule)}
.menu-sheet .mgrid+.mgrid{margin-top:18px}
.menu-sheet .mgrid a{display:flex;align-items:center;min-height:48px;padding:6px 0;border-bottom:1px solid var(--rule);color:var(--ink);
  text-decoration:none;font-size:17px;line-height:1.25}
.menu-sheet .mgrid a[aria-current]{font-weight:600}
.menu-sheet .mgrid a[aria-current]:before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--leaf);margin-right:8px}
.menu-sheet .btn{margin-top:18px}
/* the row under the certificates and the foods hub's ways in (phone.js) */
.row-nav{margin-top:6px}
.quals+.row-nav,.foodguides+.row-nav{margin-bottom:6px}
/* a plain numbered list that also carries .steps: the text runs the full width beside its number, not in the 34 px grid
   column the /plans/ step cards use */
ol.pts.steps li{display:block;padding:12px 0 12px 44px}
ol.pts.steps li::before{top:12px}
.credits .credit-list{columns:1}

/* ===== clean look (2026-10-17): the home hero puts her photo in the first screen ===== */
.hero.home{padding:20px var(--m) 22px}
.hero.home h1{font-size:31px;line-height:1.1}
.hero.home .txt{padding:0 0 18px}
.hero.home .txt>p{font-size:17px;margin-top:10px}
.hero.home .ctas{gap:8px;margin-top:16px}
.hero.home .ctas .btn{margin:0;padding:12px 14px;font-size:17px}
.hero.home .btn.ghost{background:#fff}
.hero.home .hero-img{height:auto;aspect-ratio:1/1;max-height:none;object-position:72% 26%}
.sec.proof{padding:22px 0}
ul.stats{gap:6px}
ul.stats li{padding:4px 2px}
ul.stats b{font-size:34px}
ul.stats span{font-size:14px;line-height:1.3}
.helpcards{grid-template-columns:1fr;gap:12px}
.helpcard{padding:18px 18px 16px}
.helpcard h3{font-size:22px}
.pricebox{padding:24px 20px}
.pricebox .price{font-size:28px}
.pricebox a.quiet{display:block;margin:14px 0 0;text-align:center}
.closing.big{padding:56px 0}
.closing.big h2{font-size:32px}
.ctas.center{margin-top:24px}
.quotes3{gap:12px}

/* ===== booking form on phones (build/booking.py, book.js): the form is the site's bottom sheet, opened through phone.js,
   so Back, Escape and Tab behave as in every other sheet. Fields are 17 px: iOS zooms into anything under 16 px. ===== */
.js-sheets .book-sheet{display:block}
.bookform{gap:16px}
.bookform .bf-two{grid-template-columns:1fr;gap:16px}
.bookform input,.bookform select,.bookform textarea{font-size:17px;min-height:48px}
.bookform .btn{justify-self:stretch;text-align:center;padding:14px 18px}
.book-sheet .sh h2{font-size:26px}
.book-sheet .bookform{padding-bottom:8px}
.book-done .btn{display:block;text-align:center}

/* ===== navigation (2026-10-18): the top bar is a floating card over the band, the tabs a floating dock with Book raised in
   the middle, and More opens the menu as a full screen that grows out of the More tab. The rounded corners and soft
   shadows are the design-sense tokens from site.css's :root (tests/design_rules.py). ===== */
:root{--cardh:56px}
html{scroll-padding-top:76px}
.pbar{top:8px;margin:0 10px calc(-1 * var(--cardh));min-height:var(--cardh);padding:5px 6px 5px 16px;border:1px solid rgba(206,219,194,.8);border-radius:var(--r-md);
  background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);
  box-shadow:var(--shadow-top)}
.pbar .back{padding-left:0}
.pbar .cta{border-radius:calc(var(--r-md) - 5px);padding:9px 15px}
.bar-off .pbar{transform:translateY(calc(-100% - 40px))}
.band .hero{padding-top:calc(var(--cardh) + 26px)}
.band .hero.compact{padding-top:calc(var(--cardh) + 18px)}
.result{scroll-margin-top:76px}
.az{top:70px}
/* the menu: a full screen that opens out of the header's Menu button, the pages in large type */
.js-sheets .menu-sheet{top:0;bottom:0;max-height:none;border-top:0;transform:none;display:flex;flex-direction:column;
  padding:calc(8px + env(safe-area-inset-top)) var(--m) calc(26px + env(safe-area-inset-bottom));
  clip-path:circle(0 at calc(100% - 46px) calc(100% - 42px));transition:clip-path .5s cubic-bezier(.6,0,.25,1),visibility 0s .5s}
.js-sheets .menu-sheet.open{clip-path:circle(150% at calc(100% - 46px) calc(100% - 42px));transform:none;transition:clip-path .6s cubic-bezier(.5,0,.2,1)}
.menu-sheet .sh{align-items:center;margin-bottom:6px;min-height:52px}
.menu-sheet .sh h2{font-size:22px;color:var(--muted);font-weight:600}
.menu-sheet .x{font-size:16px}
.menu-sheet .mgrid:first-of-type{grid-template-columns:1fr;border-top:0}
.menu-sheet .mgrid:first-of-type a{font:600 31px/1.15 var(--sans);color:var(--leaf-dark);min-height:50px;padding:4px 0;border-bottom:0}
.menu-sheet .mgrid+.mgrid{margin-top:22px;border-top:1px solid var(--rule);padding-top:6px}
.menu-sheet .mgrid+.mgrid a{min-height:44px;border-bottom:0;font-size:17px}
.menu-sheet .mgrid a[aria-current]:before{width:7px;height:7px}
.menu-sheet .ms-line{margin-top:auto;padding-top:22px;font:600 20px/1.3 var(--sans);color:var(--leaf-dark)}
.menu-sheet .btn{display:block;text-align:center;margin-top:14px;padding:14px 18px}
.js-sheets .menu-sheet .mgrid a,.js-sheets .menu-sheet .ms-line,.js-sheets .menu-sheet .btn{opacity:0;transform:translateY(12px);transition:opacity .2s,transform .2s}
.js-sheets .menu-sheet.open .mgrid a,.js-sheets .menu-sheet.open .ms-line,.js-sheets .menu-sheet.open .btn{opacity:1;transform:none;
  transition:opacity .4s calc(.16s + var(--k,0) * 28ms),transform .55s cubic-bezier(.2,.8,.2,1) calc(.16s + var(--k,0) * 28ms)}
.menu-sheet .mgrid a:nth-child(2){--k:1}.menu-sheet .mgrid a:nth-child(3){--k:2}.menu-sheet .mgrid a:nth-child(4){--k:3}
.menu-sheet .mgrid a:nth-child(5){--k:4}.menu-sheet .mgrid a:nth-child(6){--k:5}.menu-sheet .mgrid a:nth-child(7){--k:6}
.menu-sheet .mgrid+.mgrid a{--k:7}.menu-sheet .ms-line,.menu-sheet .btn{--k:8}
@media (prefers-reduced-motion: reduce){
  .js-sheets .menu-sheet,.js-sheets .menu-sheet.open,.js-sheets .menu-sheet .mgrid a,.js-sheets .menu-sheet .ms-line,.js-sheets .menu-sheet .btn,.pbar{transition:none!important}
}
.menu-sheet .sh .x{border:1px solid var(--rule);border-radius:var(--r-pill);padding:6px 16px;text-align:center}

/* ===== design sense on phones (2026-10-18): the floating card and dock's shapes on everything else. Corners and shadows
   are site.css's tokens only (tests/design_rules.py). ===== */
.btn{border-radius:var(--r-pill)}
.hero-img{border-radius:var(--r-lg)}
.swipe img{border-radius:var(--r-md)}
.shelf img{border-radius:var(--r-sm)}
.meal,.sheet .meal-card{border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px}
.inline-links a{border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 14px;color:var(--leaf-dark)}
.goals button,.storychips button{border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 14px}
.goals button.on{border-color:var(--leaf)}
.switch a,.switch span{border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 14px}
.switch span,.switch span.on{border-color:var(--leaf)}
.foodguides p,.foodguides p+p,.foodguides li,.foodguides li+li{border:1px solid rgba(127,168,78,.28);border-radius:var(--r-md);padding:12px 14px}
.quals li{border-radius:var(--r-md)}
.more-btn{min-height:40px;padding:6px 18px;margin-top:6px;border-radius:var(--r-pill);background:rgba(61,90,39,.08);color:var(--leaf-dark);text-decoration:none}
.strip-nav button{min-width:96px}
.sheet .x,.book-sheet .x{border:1px solid var(--rule);border-radius:var(--r-pill);padding:6px 16px;text-align:center}
.crumbs{font-size:14px;padding:3px 12px;margin-bottom:10px}
.tool{padding:20px 16px}
form.tool .result{padding:14px 16px}
.notebook{padding:16px 18px}

/* the phone's structures that are lists, not cards, keep their hairlines and no shadow */
ol.steps li{box-shadow:none;border-radius:0}

/* row lists: one rounded card, rows divided by hairlines inside it */
.rows{margin:0;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;overflow:hidden;box-shadow:var(--shadow-1)}
.rows>*{padding:14px 16px}
.rows>*:first-child{border-top:0}
.rows>*:last-child{border-bottom:0}
/* the home steps and questions: each a rounded card that opens in place */
.accs{margin:0;display:grid;gap:10px}
.accs details,.accs details:last-child{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;box-shadow:var(--shadow-1)}
.accs summary{padding:14px 16px}
.accs details>p{padding:0 16px 16px}
.accs summary::after,details.fold>summary::after{transition:transform .28s var(--ease),margin .28s var(--ease)}
/* folds: rounded cards stacked with a little air between */
details.fold,details.fold+details.fold,.read details.fold+details.fold{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;padding:0 16px}
details.fold+details.fold,.read details.fold+details.fold{margin-top:10px}
.read>details.fold:only-child{border:1px solid var(--line);margin:0}

/* tables: the frame stays; a stacked table is a pile of rounded cards instead */
.facts th:first-child,.facts td:first-child{padding-left:12px}.facts th:last-child,.facts td:last-child{padding-right:12px}
table.stack{border:0;border-radius:0;background:none}
table.stack tr{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;padding:10px 14px 12px;box-shadow:var(--shadow-1)}
table.stack td{background:none}
table.stack td:first-child{padding:0 0 6px!important}
table.labtable:not(.stack) tr{padding:4px 12px}
table.contact{border:0;border-radius:0;background:none}
table.contact td:first-child{padding:0!important;background:none}
table.contact tr:last-child{border-bottom:0}

/* sheets: a floating rounded card over a frosted page, like the dock; the More menu stays full screen */
.js-sheets .scrim{background:rgba(31,42,27,.24);-webkit-backdrop-filter:blur(6px) saturate(1.2);backdrop-filter:blur(6px) saturate(1.2)}
.js-sheets .sheet{left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));max-height:calc(100svh - 24px);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-2);padding:14px var(--m) 24px;transform:translateY(calc(100% + 24px))}
.js-sheets .sheet.open{transform:none}
.js-sheets .menu-sheet,.js-sheets .menu-sheet.open{left:0;right:0;bottom:0;max-height:none;border:0;border-radius:0;box-shadow:none;transform:none;
  padding:calc(8px + env(safe-area-inset-top)) var(--m) calc(26px + env(safe-area-inset-bottom))}

/* sticky strips are frosted floating bars under the top card: the glossary letters */
.az{margin:0 -10px 10px;padding:4px 6px;border-radius:var(--r-pill);
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent)}

/* footer corners a touch smaller on a phone */
footer{border-radius:var(--r-lg) var(--r-lg) 0 0}
#fgrid .fcard>img,#fgrid .fcard>.fblank{border-radius:var(--r-sm)}
.bar-off .az{top:8px}
.hero .txt>p.crumbs{font-size:14px}
.kcal-help{margin-bottom:22px}
.menu-sheet .sh .x{border:1px solid var(--rule);border-radius:var(--r-pill);padding:6px 16px;text-align:center}

/* ===== HOME lane on phones (design sense, 2026-10-18): one before-and-after frame to a row, the steps' line runs down
   to the Book button, goal cards fold to photo and name until tapped, and the booking steps fill the sheet. ===== */
.ba-grid.ba-slides{grid-template-columns:1fr;gap:28px}
.ba-frame.on{aspect-ratio:4/5}
.ba-slides figcaption{font-size:16px}
/* the line: the numbers sit on it, reached ones filled */
.howline .accs .num{position:relative;z-index:1}
.hl-on .accs .num{background:#fff;color:var(--leaf);border:2px solid var(--leaf);line-height:26px;transition:background .24s,color .24s}
.hl-on .accs .num.hl-hit{background:var(--leaf);color:#fff}
.howline .ctas.center{position:relative;z-index:1}
/* goal cards: folded to photo and name, a tap opens her words with Book and Read more */
.helpcards{gap:14px}
.hc-on .helpcard{display:grid;grid-template-columns:72px 1fr;align-items:center;column-gap:14px;padding:10px 12px 10px 10px;cursor:pointer}
.hc-on .hc-img{width:72px;height:72px;aspect-ratio:auto;border-radius:var(--r-sm,10px)}
.hc-on .helpcard h3{margin:0;font-size:22px}
.hc-tog{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:0;margin:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.hc-tog::after{content:"";flex:none;margin-left:auto;width:9px;height:9px;border-right:2px solid var(--control);border-bottom:2px solid var(--control);
  transform:rotate(45deg);margin-top:-4px;transition:transform .28s var(--ease,cubic-bezier(.2,.8,.2,1))}
.helpcard.open .hc-tog::after{transform:rotate(-135deg);margin-top:4px}
.hc-tog:focus-visible{outline:3px solid var(--leaf);outline-offset:4px;border-radius:var(--r-sm,10px)}
.hc-on .hc-more{grid-column:1/-1;grid-template-rows:0fr;visibility:hidden;
  transition:grid-template-rows .3s var(--ease,cubic-bezier(.2,.8,.2,1)),visibility 0s .3s}
.hc-on .helpcard.open .hc-more{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .3s var(--ease,cubic-bezier(.2,.8,.2,1))}
.hc-on .hc-in{overflow:hidden;padding:0 4px}
.hc-on .hc-in>p:first-child{padding-top:12px}
.hc-acts{flex-direction:column;align-items:stretch;gap:4px}
.hc-acts .btn{display:block;text-align:center;padding:13px 18px}
.hc-acts .go{display:flex;align-items:center;justify-content:center;gap:4px;min-height:44px}
.hc-on .hc-acts{padding-bottom:6px}
.helpcards .helpcard.open{box-shadow:var(--shadow-2)}
/* the booking steps */
.bookform .bk-h{font-size:22px}
.bk-pills{gap:8px}
.bookform .bk-pills label{padding:10px 16px}
.bookform.bk-on .bk-nav .btn{margin:0;padding:14px 18px}
.bookform.bk-on .bk-nav .bk-next,.bookform.bk-on .bk-nav .bk-send{flex:1}
@media (prefers-reduced-motion: reduce){
  .hl-on .accs .num,.hc-tog::after,.hc-on .hc-more,.hc-on .helpcard.open .hc-more{transition:none!important}
}
.menu-sheet .sh .x{border:1px solid var(--rule);border-radius:var(--r-pill);padding:6px 16px;text-align:center}

/* ===== PAGES lane (2026-10-18), phones: the goal row as a segmented control with a sliding green pill
   (pages.js adds .seg and the pill), calculator sliders, and the guides' pill above the dock ===== */
.goals.seg{display:flex;position:relative;gap:0;margin:6px 0 4px;padding:4px;background:var(--tint);border:1px solid var(--rule);
  border-radius:var(--r-pill,999px);overflow:visible}
.goals.seg button{flex:1 1 auto;min-width:0;position:relative;z-index:1;justify-content:center;text-align:center;gap:0;min-height:44px;
  padding:4px 8px;border:0;background:transparent;border-radius:var(--r-pill,999px);font-size:15px;line-height:1.15;color:var(--ink);transition:color .2s}
.goals.seg button.on{background:transparent;color:#fff}
.goals.seg button:focus-visible{outline:2px solid var(--leaf-dark);outline-offset:2px}
.goals.seg i.spice{display:none}  /* the dot stays on every verdict below; the segment has room for the word only */
.goals.seg .seg-pill{position:absolute;z-index:0;top:4px;bottom:4px;left:0;width:0;border-radius:var(--r-pill,999px);background:var(--leaf);
  box-shadow:var(--shadow-1)}
.goals.seg.seg-ready .seg-pill{transition:transform .3s var(--ease,cubic-bezier(.2,.8,.2,1)),width .3s var(--ease,cubic-bezier(.2,.8,.2,1))}
/* 11: sliders under height, weight and waist */
.tool input.slide{display:block}
.tool .ftin input.slide,.tool .cm input.slide{margin-top:8px}
/* 12: the guides' pill sits above the dock; the reading line runs along the top card's bottom edge */
.otp{left:12px;bottom:calc(12px + env(safe-area-inset-bottom))}
.otp-card{width:calc(100vw - 24px);max-height:58vh}
.rprog{left:20px;right:20px}
.reading .pbar .rprog{opacity:1}
@media (prefers-reduced-motion: reduce){.goals.seg .seg-pill{transition:none!important}}

/* ===== QUOTES lane on phones: the same cards, a little tighter ===== */
.testimonial,.quotes3 .testimonial,.strip .testimonial{padding:18px 18px 12px;margin-bottom:14px}
.quotes3 .testimonial,.strip .testimonial{margin:0}
.testimonial .q-gist{font-size:19px}
.checkins{grid-template-columns:1fr 1fr;gap:10px}
.checkins li{padding:14px}
.checkins b{font-size:19px}

/* ===== LISTS lane on phones ===== */
ul.pts.tags li{padding:5px 13px}
ul.pts.checks li{padding:11px 14px 11px 44px}
ul.pts.checks li::before{left:13px;top:13px}

/* ===== PROOF lane on phones ===== */
ul.stats.words b{font-size:20px}
ul.stats.words span{font-size:13px}

/* ===== SCREENS lane on phones: two screenshots to a row ===== */
.shots{columns:2;column-gap:10px}
.shot{margin-bottom:10px}
.shotview{padding:12px}
.shotview img{max-width:94vw;max-height:78vh}
.shotview .sv-prev,.shotview .sv-next{top:auto;bottom:18px;transform:none}

/* ===== IVORY FOUNDATION on phones (2026-10-19): no tab bar. A plain white header pinned at the top with the logo,
   Book a call and Menu (it opens the full-screen menu, out of the button); buttons fill the width; the footer opens with
   the logo and her line, then every section in two columns. ===== */
h1,h2{font-weight:400;line-height:1.12}
h2,.sec h2{font-size:30px}
.btn{display:flex;width:100%;margin-top:16px;padding:12px 20px;min-height:52px;font-size:19px;border-radius:var(--r-pill)}
.btn.quiet,.more-btn{width:auto;min-height:44px;font-size:16px}
.ctas .btn{margin-top:0}
/* the header: white, full width, a hairline under it */
.pbar{top:0;margin:0;min-height:64px;gap:8px;padding:10px 12px 10px 16px;background:var(--white);border:0;border-bottom:1px solid var(--hair);border-radius:0;
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.pbar .mark{margin-right:auto;font-size:0}
.pbar .logo{height:40px}
.pbar .cta{display:flex;align-items:center;min-height:44px;padding:8px 18px;border-radius:var(--r-pill);background:var(--green-fill);color:#fff;
  font:700 19px/1.2 var(--sans);white-space:nowrap}
.pbar .mbtn{flex:none;display:flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:0 12px;
  border:1px solid var(--hair);border-radius:var(--r-pill);background:var(--white);color:var(--ink);font:500 16px/1 var(--sans);text-decoration:none}
.pbar .mbtn .mi{position:relative;width:16px;height:10px}
.pbar .mbtn .mi:before,.pbar .mbtn .mi:after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;border-radius:1px}
.pbar .mbtn .mi:before{top:1px}
.pbar .mbtn .mi:after{top:7.5px}
@media (max-width:399px){.pbar .mbtn{padding:0}.pbar .mbtn .ml{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
.bar-off .pbar{transform:translateY(-101%)}
html{scroll-padding-top:76px}
.band .hero{padding-top:26px}
.band .hero.compact{padding-top:16px}
.az{top:72px}
.bar-off .az{top:0}
/* the first step of the trail shows again: the header has the logo now, not a way back */
.crumbs .c0{display:inline}
.crumbs.c1{display:inline-flex}
/* the menu: full screen, white, opening out of the Menu button at the top right */
.js-sheets .menu-sheet{clip-path:circle(0 at calc(100% - 38px) 32px)}
.js-sheets .menu-sheet.open{clip-path:circle(160% at calc(100% - 38px) 32px)}
.menu-sheet{background:var(--white)}
.menu-sheet .sh h2{font-size:12.5px;font-weight:500;letter-spacing:0;color:var(--label)}
.menu-sheet .mgrid:first-of-type a{font:400 30px/1.15 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.menu-sheet .mgrid+.mgrid{border-top-color:var(--hair)}
.menu-sheet .mgrid+.mgrid a{color:var(--ink);font-weight:500}
.menu-sheet .ms-line{font:400 19px/1.4 var(--sans);color:var(--soft)}
.menu-sheet .btn{display:flex}
.sheet .x,.book-sheet .x,.menu-sheet .sh .x{border-color:var(--hair);color:var(--ink);font:500 16px var(--sans)}
.js-sheets .sheet{border-color:var(--hair)}
.js-sheets .scrim{background:rgba(36,33,30,.24)}
.js-sheets .menu-sheet,.js-sheets .menu-sheet.open{border:0}
.sheet{border-top-color:var(--hair)}
/* the footer: the logo and her line first, then every section, then the fine print */
footer{padding:32px 0 36px;border-radius:0}
.foot{display:flex;flex-direction:column}
.foot .who{order:-1;margin-bottom:18px}
.foot .who .by{margin-top:10px}
.foot .who .reach a{display:inline-flex;align-items:center;min-height:44px;padding:0;margin-right:16px}
.foot .flogo{min-height:0;padding:0}
.fnav{grid-template-columns:1fr 1fr;column-gap:16px;margin:0 0 6px;border-top:1px solid var(--hair)}
.fnav a{color:var(--ink);border-bottom:1px solid var(--hair);font-weight:500}
.foot .fine{margin-top:12px;padding-top:12px}
/* the booking form */
.bookform .btn{width:100%}
/* ===== end IVORY FOUNDATION ===== */
/* ===== IVORY PAGES on phones (2026-10-19): the same ivory heroes and white and ivory sections. The breadcrumb is the
   hero's label, so phones show all of it (the top bar no longer carries a back link). ===== */
/* side and bottom room only: the top is the header's (FOUNDATION), so a hero never slides under it */
.hero,.hero.has-img{background:var(--ivory,#FCFAF6);padding-left:var(--m);padding-right:var(--m);padding-bottom:36px}
.hero.has-img{padding-bottom:30px}
.hero.compact{padding-bottom:22px}
.hero{border-bottom:1px solid var(--hair,#EEE9E1)}
.hero h1,.hero.has-img h1{font-size:34px;line-height:1.12;font-weight:400}
.hero.compact h1{font-size:29px;font-weight:400}
.hero .txt>p,.hero .txt .intro p{font-size:17px;color:var(--soft,#6B635B)}
.hero .txt>p.label{font-size:12px;margin:0 0 12px}
.crumbs .c0{display:inline}
.crumbs.c1{display:block}
.crumbs,.hero .txt>p.crumbs{font-size:12px;padding:0;margin:0 0 12px;background:none;border:0;border-radius:0}
h1 .eyebrow{font-size:12px;margin-bottom:12px}
.crumbs+h1 .eyebrow{font-size:16px;margin:-4px 0 8px}
h1 .h1sub{font-size:18px}
.sec{border-top:0}
.sec.tint{background:var(--ivory,#FCFAF6)}
.sec h2{font-weight:400;font-size:28px}
.rows,table.stack tr,.meal,.sheet .meal-card,details.fold,details.fold+details.fold,.read details.fold+details.fold,.read>details.fold:only-child{border-color:var(--hair,#EEE9E1)}
.rows>*,.rows>*:last-child{border-color:var(--hair,#EEE9E1)}
.rows .chev{color:var(--green,#7BA05B)}
.rows .num,.accs .num{flex:0 0 30px;width:auto;height:auto;border:0;border-radius:0;background:none;color:var(--green-ink,#4C7535);font-family:inherit;font-weight:500;font-size:24px;line-height:1.1}
.hl-on .accs .num,.hl-on .accs .num.hl-hit{background:none;border:0;color:var(--green-ink,#4C7535)}
ol.steps li,ol.steps li:last-child{border-color:var(--hair,#EEE9E1)}
ol.steps .sn{font-size:24px;margin:0}
details.fold>summary>h2,details.fold>summary>h3,.sec details.fold>summary>h2,.sheet h3,.sheet .sh h2,.more-links h2,.sec .more-links h2,.sec.more-links h2{font-family:inherit}
details.fold>summary>h2,details.fold>summary>h3,.sec details.fold>summary>h2{font-weight:600;font-size:18px}
details.fold>summary::after{border-color:var(--green,#7BA05B)}
.sheet{border-top:1px solid var(--hair,#EEE9E1)}
.sheet .x{color:var(--ink);font-family:inherit}
.sheet .sh h3 span{font-family:inherit;color:var(--soft,#6B635B)}
.verdict .w{font-family:inherit;font-weight:600;font-size:24px}
.total b{font-family:inherit;font-weight:700}
.goals button,.storychips button{background:#fff;border:1px solid var(--hair,#EEE9E1);color:var(--ink);font-family:inherit}
.goals button.on{background:#fff;border:1.5px solid var(--green,#7BA05B);color:var(--ink);font-weight:600}
.goals.seg{background:var(--ivory,#FCFAF6);border-color:var(--hair,#EEE9E1)}
.goals.seg button,.goals.seg button.on{background:transparent;border:0;color:var(--ink)}
.goals.seg button.on{font-weight:600}
.goals.seg .seg-pill{background:#fff;border:1.5px solid var(--green,#7BA05B)}
.switch a,.switch span{border-color:var(--hair,#EEE9E1)}
.switch span,.switch span.on{background:#fff;border:1.5px solid var(--green,#7BA05B);color:var(--ink)}
.inline-links a{border-color:var(--hair,#EEE9E1);color:var(--ink)}
.more-btn{background:#fff;border:1px solid var(--hair,#EEE9E1);color:var(--ink);font-family:inherit}
.foodguides p,.foodguides p+p,.foodguides li,.foodguides li+li{background:#fff;border-color:var(--hair,#EEE9E1)}
.hscroll .track:before{width:1px;left:28px;background:var(--hair,#EEE9E1)}
.hscroll .panel:before{border-color:var(--green,#7BA05B)}
.katoris figure{color:var(--soft,#6B635B)}
table.stack td::before,table.contact td:first-child{color:var(--soft,#6B635B)}
.quals li{border-color:var(--hair,#EEE9E1)}
.otp{bottom:calc(16px + env(safe-area-inset-bottom))}
/* ===== REELS on phones (2026-10-20): two reels a row, and on a program page the reel beside its line. ===== */
.reels{grid-template-columns:1fr 1fr;gap:24px 12px;margin-top:18px}
.reel-frame{border-radius:var(--r-md)}
.reel-play svg{width:54px;height:54px;padding:14px 12px 14px 16px}
.reel-len{left:8px;bottom:8px;font-size:13px;padding:5px 8px}
.reel figcaption{margin-top:10px}
.reel .reel-t{font-size:15.5px}
.reel figcaption p{font-size:14px}
.reel-feature{grid-template-columns:minmax(0,46%) minmax(0,1fr);gap:16px;align-items:start}
.reel-feature .reel-side h2{font-size:20px;line-height:1.25;margin-bottom:8px}
.reel-feature .reel-side p{font-size:15px;line-height:1.5}
.reel-feature .reel-side .label{margin-bottom:8px}
.reel-feature .reel-side .btn{width:auto;min-width:0;padding-left:16px;padding-right:16px}
/* ===== end REELS ===== */

/* ===== REELS IN A PHONE FRAME on phones: a slimmer outline ===== */
.reel-phone{padding:6px;border-radius:var(--r-lg)}
.reel-phone .reel-frame{border-radius:calc(var(--r-lg) - 6px)}
.reel-phone .reel-frame::before{height:11px;top:6px}
.reel-sound{right:8px;top:8px;width:40px;height:40px}
/* ===== ONE-STEP BOOKING on phones: compact goal pills so name and number come up quickly ===== */
.bookform .bk-one .bk-pills label{min-height:40px;padding:8px 14px;font-size:15px}
/* ===== FINAL FOUNDATION on phones (2026-10-26, the "without squares" mock's phone page): the cream header with the logo,
   a two-line Book pill and Menu; light Newsreader headings; buttons sized to their words, as the mock's are; the menu in
   the heading face; the footer with room under it for the slim booking bar, which slides up after the first screen
   (nav.js) and steps away at the closing section and the footer. ===== */
body{background:var(--paper)}
h1,h2,.hero h1,.hero.has-img h1,.hero.compact h1,main h2,.sec h2{font-family:var(--serif);font-weight:300;line-height:1.06}
h2,.sec h2,main h2{font-size:31px}
.hero h1,.hero.has-img h1{font-size:38px;line-height:1.04}
.hero.compact h1{font-size:32px}
main h3{font-size:21px}
.btn{display:inline-flex;width:auto;max-width:100%;margin-top:16px;padding:15px 20px;min-height:48px;font-size:15px;line-height:1.2;white-space:normal;
  border-radius:var(--r-pill)}
.ctas .btn{margin-top:0}
.btn.quiet,.more-btn{min-height:44px;font-size:15px}
.bookform .btn{width:100%}
/* the header: the page's cream, a hairline under it; the logo, the Book pill on two lines, Menu */
.pbar{min-height:60px;gap:8px;padding:8px 12px 8px 16px;background:rgba(251,249,244,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.pbar .logo{height:30px}
.pbar .cta{min-height:44px;max-width:156px;padding:7px 14px;border-radius:var(--r-pill);background:var(--green);color:#fff;
  font:600 12.5px/1.15 var(--sans);white-space:normal;text-align:center;justify-content:center}
.pbar .mbtn{border-color:var(--line2);background:transparent;font:500 14px/1 var(--sans)}
html{scroll-padding-top:72px}
/* the menu: the cream page, her pages large in the heading face, the line about the free call in italics */
.menu-sheet,.js-sheets .menu-sheet{background:var(--paper)}
.menu-sheet .sh h2.label{margin:0;font-size:11px;color:var(--green)}
.menu-sheet .mgrid:first-of-type a{font:300 32px/1.15 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.menu-sheet .mgrid:first-of-type a[aria-current]{color:var(--green);font-style:italic}
.menu-sheet .mgrid+.mgrid{border-top-color:var(--line)}
.menu-sheet .mgrid+.mgrid a{color:var(--ink);font-weight:500}
.menu-sheet .ms-line{font:300 italic 21px/1.3 var(--serif);color:var(--ink)}
.menu-sheet .btn{display:flex;width:100%}
.sheet .x,.book-sheet .x,.menu-sheet .sh .x{border-color:var(--line2);color:var(--ink);font:500 15px var(--sans)}
.js-sheets .sheet{background:var(--paper)}
.js-sheets .scrim{background:rgba(27,30,26,.24)}
/* the closing section and the booking band */
.closing h2,.closing.big h2{font-size:40px}
.sec.bookband{padding:10px 0}
.bookband .wide{padding:0 12px}
.bookband .bd-box{gap:20px;padding:26px 22px;border-radius:var(--r-lg)}
.bookband .bd-l{font-size:26px}
.bookband .bd-c .btn{margin-top:0}
/* the footer: room under it for the booking bar; her line in italics */
footer{padding:36px 0 104px}
.foot .who .by{font-size:22px}
.fnav{border-top-color:var(--line)}
.fnav a{border-bottom-color:var(--line)}
.foot .fine{border-top-color:var(--line2)}
/* the slim booking bar: hidden until nav.js says the first screen has gone by */
.sbar{position:fixed;left:0;right:0;bottom:0;z-index:48;display:flex;gap:10px;align-items:stretch;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(251,249,244,.97);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-top:1px solid var(--line);transform:translateY(110%);visibility:hidden;transition:transform .45s cubic-bezier(.2,.7,.1,1),visibility 0s .45s}
.sbar.on{transform:none;visibility:visible;transition:transform .45s cubic-bezier(.2,.7,.1,1)}
.sbar .btn{flex:1;margin:0;padding:12px 14px;font-size:14.5px}
.sbar .wa{flex:none;width:48px;min-height:48px;display:grid;place-items:center;border:1px solid var(--green);border-radius:50%;color:var(--green)}
body.open .sbar{transform:translateY(110%);visibility:hidden}
@media (prefers-reduced-motion: reduce){.sbar,.sbar.on{transition:none}}
/* ===== end FINAL FOUNDATION ===== */
/* ===== FINAL PAGES on phones (2026-10-26): the same paper heroes and light serif headings, a size down; cream and
   paper sections with no hairlines; the booking band stacks. ===== */
.hero,.hero.has-img{background:var(--paper,#FBF9F4);border-bottom:0;padding-bottom:34px}
.hero.compact{padding-bottom:20px}
.hero h1,.hero.has-img h1{font-size:clamp(34px,9.6vw,42px);line-height:1.06;font-weight:300}
.hero.compact h1{font-size:31px;font-weight:300}
h1 .h1sub{font-size:.6em}
.hero .txt>p,.hero .txt .intro p{font-size:17px;color:var(--ink2,#5A5F57)}
.hero .txt>p.label,.hero .txt>p.crumbs.label,h1 .eyebrow.label{font-size:10.5px;margin-bottom:12px}
.crumbs+h1 .eyebrow.label{font-size:15px}
.sec.tint{background:var(--cream,#F3EEE3)}
.sec h2{font-weight:300;font-size:30px;line-height:1.1}
ol.steps .sn{font-size:40px}
.rows .num,.accs .num{font-family:var(--serif,'Newsreader',Georgia,serif);font-weight:300;font-size:28px}
.testimonial .q-gist{font-size:19px}
.goals button.on,.switch span,.switch span.on{background:var(--mint,#E3ECD8);border:1px solid rgba(76,117,53,.45)}
.goals.seg{background:var(--cream,#F3EEE3);border-color:transparent}
.goals.seg .seg-pill{background:var(--white,#fff);border:1px solid rgba(76,117,53,.45)}
.sec.bookband{padding:12px 0}
.bookband .wide{padding-left:var(--m,16px);padding-right:var(--m,16px)}
.bookband .bd-box{display:block;padding:26px 22px}
.bookband .bd-l{font-size:26px}
.bookband .bd-c{margin-top:20px;gap:14px 20px}
.bookband .bd-c .btn{white-space:normal}
/* ===== end FINAL PAGES on phones ===== */