@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('fonts/manrope.woff2') format('woff2')}
/* NomNum, shared design system for the editorial pages
   (about / how-it-works / recipes / nutrition). One file, one truth:
   these pages previously each embedded an identical copy and had already
   drifted once. index.html keeps its own styles (unique layout). */

/* colour lives in tokens.css, the single source of truth. */
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:112px;background:var(--bg)}
body{margin:0;background:var(--background);background-attachment:fixed;color:var(--ink);font-family:'Manrope',Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;line-height:1.04;letter-spacing:-.028em;font-weight:800}
h1,h2,.page-hero h1{font-family:var(--serif);font-weight:800;letter-spacing:-.028em;line-height:1.06}
a{color:var(--accent-text)}
.topbar{position:sticky;top:0;z-index:30;background:rgba(var(--bar-rgb),.97);border-bottom:1px solid var(--line)}
.topbar-in{position:relative;width:min(1280px,calc(100% - 40px));margin:auto;min-height:100px;display:flex;align-items:center;gap:26px}
.brand{margin-right:auto;display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.brandmark{width:42px;height:42px;border-radius:50%;overflow:hidden;flex:none}
.brandmark svg,.brandmark img{width:100%;height:100%;display:block;object-fit:cover}
.brand-ic{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.24em;margin-right:.12em}
.brand-ic svg,.brand-ic img{width:100%;height:100%;display:block;object-fit:cover}
.brand b{font-family:var(--serif);font-weight:600;font-size:20px;letter-spacing:0;display:block}.brand small{display:block;color:var(--muted);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{color:var(--ink);text-decoration:none;font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.nav-links a:hover,.nav-links a.here{color:var(--accent-text)}
/* R7: the header carries ONE action at every width, the door to the iOS app.
   The sign-in pair, the burger and its drawer left with the web planner; on a
   phone, Our story is one scroll away in the footer. */
.nav-cta{font-size:14px;white-space:nowrap;margin-left:8px;flex:none}
@media(max-width:900px){.topbar-in{min-height:70px}.nav-links{display:none}.brand small{display:none}.nav-cta{padding:9px 15px;font-size:13px}}
.wrap{width:min(1180px,calc(100% - 32px));margin:auto}
.page-hero{min-height:52vh;display:grid;align-items:end;position:relative;overflow:hidden;border-radius:8px;margin:18px auto;width:min(1280px,calc(100% - 24px));background:var(--media-backdrop) center/cover no-repeat}
.page-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--photo-scrim),.06) 30%,rgba(var(--photo-scrim),.78) 100%)}
.page-hero .ph-in{position:relative;padding:clamp(24px,5vw,60px)}
.page-hero .eyebrow{color:var(--family-ink);font-weight:800;letter-spacing:.16em;text-transform:uppercase;font-size:12px}
.page-hero h1{color:var(--on-accent);font-size:clamp(38px,5.5vw,72px);max-width:14em;margin-top:10px}
.band{padding:clamp(40px,6vw,90px) clamp(20px,3vw,44px);background:var(--surface);border-radius:10px;margin:18px 0}
.band.white{background:var(--surface2);position:relative;left:50%;transform:translateX(-50%);width:100vw;border-radius:0;margin:0}
.band.white>.wrap{width:min(1180px,calc(100% - 32px))}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center}
.duo img{width:100%;border-radius:8px;display:block}
.duo h2{font-size:clamp(26px,3.2vw,44px);margin-bottom:14px}
.duo p{color:var(--muted);font-size:16.5px;line-height:1.65;margin:0 0 12px}
.kicker{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:900;color:var(--accent-text);margin-bottom:10px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
/* Same rule as the app: the small thing carries the colour, the page holding it
   stays light. These were white cards on a near-white page, so the three steps
   read as gaps between rules rather than as three objects. */
.step{background:var(--sky-400);color:var(--tile-ink);border:1px solid rgba(var(--white-rgb),.6);border-radius:14px;padding:24px;box-shadow:inset 0 1px 0 rgba(var(--white-rgb),.7)}
.step b{display:block;font-size:34px;color:var(--accent-text);margin-bottom:8px}
.step h3{font-size:19px;margin-bottom:8px}.step p{margin:0;color:var(--tile-muted);font-size:14.5px;line-height:1.6}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gallery figure{margin:0;position:relative;border-radius:8px;overflow:hidden;aspect-ratio:4/3;background:var(--media-backdrop)}
.gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:.25s}
.gallery figure:hover img{transform:scale(1.04)}
.gallery figcaption{position:absolute;left:12px;bottom:10px;color:var(--on-accent);font-weight:700;font-size:13.5px;text-shadow:0 2px 12px rgba(var(--shade-rgb),.6)}
.trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px 26px;margin-top:34px}
.trust-row span{color:var(--muted);font-weight:800;font-size:clamp(13px,1.5vw,17px)}
/* The band is now the light material, so the heading is ordinary --ink and
   the button is the ordinary primary rather than a white pill inverted onto a
   dark rectangle. A hairline gives it its edge on a light page. */
.cta-band{background:var(--sky-100);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(36px,5vw,70px);text-align:center;margin:clamp(30px,5vw,64px) 0}
.cta-band h2{color:var(--ink);font-size:clamp(28px,3.6vw,48px);max-width:18em;margin:0 auto 22px}
.cta-band .btn-pill{background:var(--grad-cta);color:var(--cta-ink);border:none;box-shadow:var(--shadow-sm)}
.btn-pill{padding:15px 30px;font-size:15.5px;font-weight:800}
.note{border:1px dashed var(--line);border-radius:8px;padding:14px 18px;color:var(--muted);font-size:13px;line-height:1.6;margin-top:26px}
/* On the page this is quiet grey-blue. In the FOOTER it was the same grey-blue
   on dark teal: 1.85:1, which made the medical and legal disclaimer the least
   readable text in the product. The !important is what carried it in there. */
.fine{font-size:12px;color:var(--muted)!important}
@media(max-width:820px){.duo{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.gallery{grid-template-columns:1fr 1fr}.trust-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.gallery{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.gallery img{transition:none}}

/* ===== animated plate-builder (shared): the plate fills with vegetables,
   protein and whole grains on a loop. Pure CSS+SVG, no images. ===== */
.plate-band{background:var(--sky-100);border:1px solid var(--line);border-radius:var(--radius-lg);margin:clamp(28px,5vw,64px) 0;padding:clamp(38px,6vw,80px) clamp(24px,5vw,60px);display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(24px,4vw,54px)}
.plate-band h2{color:var(--ink);font-size:clamp(28px,3.6vw,48px);line-height:1.07;letter-spacing:-.01em;font-weight:600;margin:0 0 14px}
.plate-band p{color:var(--muted);font-size:15.5px;line-height:1.6;margin:0 0 8px;max-width:30em}
.plate-band .plate-cta{display:inline-block;margin-top:16px;color:var(--accent-text);font-weight:750;font-size:15px;text-decoration:none}
.plate-legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:18px}
.plate-legend span{display:inline-flex;align-items:center;gap:7px;color:var(--ink);font-weight:750;font-size:13.5px}
.plate-legend i{width:12px;height:12px;border-radius:4px;flex:none}
/* the drop shadow was tuned for a plate floating on navy; at .45 on a white
   band it reads as dirt under the artwork */
.plate-demo{position:relative;width:min(360px,78vw);aspect-ratio:1;margin:0 auto;filter:drop-shadow(0 24px 48px rgba(var(--accent-rgb),.16))}
.plate-demo svg{width:100%;height:100%}
/* the segments are deliberately NOT half/quarter/quarter: portions are
   computed per person, so the art must not teach a fixed rule */
.pd-rim{fill:var(--blue-350)}.pd-base{fill:var(--sec-from)}
.pd-seg{fill:none;stroke-width:84;transform-origin:50% 50%;opacity:0}
.pd-veg{stroke:var(--green-soft);stroke-dasharray:108 264;stroke-dashoffset:0;animation:pdSeg .9s cubic-bezier(.3,.7,.3,1) both}
.pd-prot{stroke:var(--gold);stroke-dasharray:79 264;stroke-dashoffset:-108;animation:pdSeg .9s cubic-bezier(.3,.7,.3,1) .25s both}
.pd-carb{stroke:var(--gold-soft);stroke-dasharray:77 264;stroke-dashoffset:-187;animation:pdSeg .9s cubic-bezier(.3,.7,.3,1) .5s both}
.pd-center{fill:var(--surface)}.pd-plus{fill:var(--ink-strong);opacity:0;animation:pdPlus .6s ease .95s both}
/* fills the plate once and stays filled. It used to loop, which meant it also
   played backwards as each segment faded out again. */
@keyframes pdSeg{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}}
@keyframes pdPlus{from{opacity:0}to{opacity:1}}
@media(max-width:760px){.plate-band{grid-template-columns:1fr}.plate-demo{margin-top:8px}}
@media(prefers-reduced-motion:reduce){.pd-seg,.pd-plus{animation:none!important;opacity:1;transform:none}}

/* dewy-morning texture over the ombre page: bokeh bubbles like dew catching
   the sun, a hazy light patch up top, and a whisper of film grain */
body::before{content:"";position:fixed;inset:-8%;z-index:-1;pointer-events:none;background:
 radial-gradient(circle at 12% 16%,rgba(var(--white-rgb),.6) 0,rgba(var(--white-rgb),0) 3%),
 radial-gradient(circle at 74% 8%,rgba(var(--white-rgb),.55) 0,rgba(var(--white-rgb),0) 2.4%),
 radial-gradient(circle at 88% 42%,rgba(var(--white-rgb),.55) 0,rgba(var(--white-rgb),0) 3.6%),
 radial-gradient(circle at 7% 58%,rgba(var(--accent-rgb),.22) 0,rgba(var(--accent-rgb),0) 2.8%),
 radial-gradient(circle at 28% 86%,rgba(var(--white-rgb),.55) 0,rgba(var(--white-rgb),0) 2.4%),
 radial-gradient(circle at 60% 72%,rgba(var(--accent-rgb),.18) 0,rgba(var(--accent-rgb),0) 4%),
 radial-gradient(circle at 45% 28%,rgba(var(--white-rgb),.45) 0,rgba(var(--white-rgb),0) 1.9%),
 radial-gradient(circle at 93% 80%,rgba(var(--white-rgb),.42) 0,rgba(var(--white-rgb),0) 2.6%),
 radial-gradient(circle at 20% 40%,rgba(var(--accent-rgb),.15) 0,rgba(var(--accent-rgb),0) 1.5%),
 radial-gradient(circle at 55% 94%,rgba(var(--white-rgb),.4) 0,rgba(var(--white-rgb),0) 3.2%),
 radial-gradient(circle at 82% 62%,rgba(var(--accent-rgb),.14) 0,rgba(var(--accent-rgb),0) 1.7%),
 radial-gradient(60% 38% at 68% 0%,rgba(var(--white-rgb),.3),rgba(var(--white-rgb),0) 60%);
 animation:dewDrift 26s ease-in-out infinite alternate}
@keyframes dewDrift{from{transform:translateY(1.4%)}to{transform:translateY(-1.4%) scale(1.03)}}
body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.04;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}
@media print{body::before,body::after{display:none}}
@media (prefers-reduced-motion:reduce){body::before{animation:none}}

/* The owner's navy-swatch request, round two: the big display HEADINGS were
   still the flat deep navy, and they are most of what a page shows. Painted
   with the shared deep gradient; `color` stays solid so contrast tooling and
   non-WebKit engines read a real colour, and the small note span inside the
   intro heading opts back out. Dark bands (.cta-band, .page-hero, .plate-band)
   keep their white headings and are not matched here. */
/* these were gradient-clipped headings; measured paper sets them as plain ink-on-paper text */
.band h2,.duo h2,.intro-grid h2{color:var(--accent-text)}
.intro-grid h2 .intro-note{-webkit-text-fill-color:var(--muted)}

/* THE LIMIT, SET BESIDE THE NUMBERS IT LIMITS. The disclaimer footer is good
   and nobody reads it, so the honest sentence about what a dish figure IS -
   modelled from ingredient tables, not measured, with no per-value source
   recorded - sits in the section that explains the numbers. Quieter than the
   body text around it because it is a qualifier, not a headline, but not so
   quiet it fails contrast: --muted is a token that already passes. */
.nut-limit {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--text-ui);
  line-height: 1.6;
}
.nut-limit b {
  color: var(--foreground);
}