/* ============================================================
   KaTrina Samuels Nutrition — Design System
   Brand: Sage Green · Blush Rose · Warm Ivory · Soft Sand
   (8/12: re-themed from Deep Teal/Tiffany Blue per Katrina's own
   reference — a sage-green + blush-pink natural palette she sent
   Lee a screenshot of. Hex values below are a careful visual read
   of that screenshot, not sampled from exact pixel values — flag
   to Katrina/Lee to confirm exact hex codes if precision matters.)
   Vibe: high-end but relatable (not "almond mom")
   ============================================================ */

:root{
  /* Brand */
  --teal:      #93A480;   /* primary — Sage green (8/12: replaced Tiffany Blue per Katrina's sage+blush reference) */
  --teal-dark: #4F5A3E;   /* deep olive-sage, for contrast areas (footer, banners) */
  --teal-soft: #EBEEE2;   /* pale sage tint */
  /* --teal is the brand sage and MUST NOT MOVE -- it is the colour Katrina
     approved, and it stays exactly right for decorative fills that carry no
     text (.pricecard's 4px top rule, the soft tints). What it is NOT is a
     colour you can put text on, or white text on: #fff on #93A480 measures
     2.67:1 and #93A480 on the sand measures 2.37:1, against a WCAG AA floor
     of 4.5:1 for normal text and 3.0:1 even for large. Every buy button on
     the site failed both. 13 Sep 2026.
     So the two tokens below are the SAME sage darkened until it passes, one
     per job, and the palette above is untouched. Do not collapse them into
     one and do not lighten either back towards --teal: the ratios are the
     whole reason they exist. All figures below computed from the sRGB
     relative-luminance formula, worst ground first.

       --teal-fill  BACKGROUNDS that carry white text (.btn-primary, .band,
                    .stat-band, .section.teal, .ai-bubble.user).
                      #fff on it .................... 5.11:1  (need 4.5)
                      rgba(255,255,255,.92) on it ... 4.62:1  (need 4.5)
                    It is the LIGHTEST value -- i.e. the closest to the brand
                    sage -- that still clears 4.5:1 for the softened white
                    body copy those bands use. Its luminance also sits
                    1.44:1 above --teal-dark's, so .btn-primary:hover is
                    still a visible darkening and not a no-op.
       --teal-text  SAGE TEXT AND BORDERS on the light grounds it actually
                    sits on (.eyebrow, .btn-ghost, .pill, .tick, inline <a>,
                    .nav-toggle, .mod-tag, cite...). The blush tint governs,
                    not white -- it is the darkest of the light grounds:
                      on --tiffany-lt #F5E3E0 ....... 4.64:1  <-- governs
                      on --teal-soft  #EBEEE2 ....... 4.89:1
                      on --sand-lt    #F6F1E7 ....... 5.10:1
                      on --white      #FAF6EF ....... 5.33:1
                      on #FFFFFF .................... 5.75:1
                    (.tick and .split-feature .sf-kicker are the two that sit
                    on the blush; they were the worst pairs on the site at
                    2.16:1. A value chosen against white alone misses them.) */
  --teal-fill: #647351;
  --teal-text: #5C6B49;
  --tiffany:   #C98F92;   /* dusty rose / blush — secondary accent */
  --tiffany-lt:#F5E3E0;   /* pale blush tint */
  --tiffany-dk:#8A5B60;   /* the same blush darkened until it carries type: --tiffany
                             gave 2.49:1 for the 'Registered Dietitian' line in the
                             header and 2.68:1 for white on the .plan-tag chip. This is
                             5.20:1 on the ivory header and 5.61:1 under white. */
  --sand:      #E9DEC9;   /* soft sand — kept, already fits the natural palette */
  --sand-lt:   #F6F1E7;
  --white:     #FAF6EF;   /* warm ivory (8/12: replaced baby blue to match the new natural palette) */
  --white-true:#FFFFFF;
  --mauve:     #A97C82;   /* deeper mauve accent, from the darkest swatch in Katrina's reference */

  /* Ink / text */
  --ink:  #33392C;
  --dim:  #5B6350;
  /* --muted was #8B9280, which is 2.86:1 on the sand and 3.22:1 on white --
     and it is the colour of every byline, read-time, article note and
     'N articles' count on the site, plus whole paragraphs of article prose.
     Darkened to clear 4.5:1 on all three grounds it lands on: white 5.46:1,
     --white ivory 5.06:1, --sand-lt 4.85:1. Still lighter than --dim, so the
     three-step ink hierarchy is intact. 13 Sep 2026. */
  --muted:#656C5B;
  --line: #E1D8C6;

  /* System */
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 18px 44px rgba(79,90,62,.16);
  --shadow-sm: 0 6px 18px rgba(79,90,62,.12);
  --wrap: 1160px;
  --font-head: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--teal-text);text-decoration:none}

h1,h2,h3,h4{font-family:var(--font-head);line-height:1.12;letter-spacing:-.01em;color:var(--ink);font-weight:600}
h1{font-size:clamp(2.1rem,5vw,3.5rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.5rem)}
h3{font-size:1.3rem}
p{color:var(--dim)}

/* Layout ---------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.section{padding:76px 0}
.section.tight{padding:48px 0}
.section.sand{background:var(--sand-lt)}
.section.teal{background:var(--teal-fill);color:#fff}
.section.teal h1,.section.teal h2,.section.teal h3{color:#fff}
.section.teal p{color:rgba(255,255,255,.92)}
.center{text-align:center}
.mt-1{margin-top:.75rem}.mt-2{margin-top:1.5rem}.mt-3{margin-top:2.25rem}
.lead{font-size:1.18rem;color:var(--dim);max-width:60ch}
.eyebrow{display:inline-block;font-family:var(--font-body);font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-text)}
.rule{height:3px;width:56px;background:var(--tiffany);border-radius:3px;margin:1rem 0}
.center .rule{margin-left:auto;margin-right:auto}
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}

/* Header / nav --------------------------------------------- */
.demo-banner{background:var(--teal-dark);color:#fff;text-align:center;font-size:.82rem;padding:8px 16px;letter-spacing:.02em}
.site-header{position:sticky;top:0;z-index:50;background:rgba(250,246,239,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--font-head);font-weight:600;font-size:1.15rem;color:var(--ink)}
.brand .mark{width:38px;height:38px;border-radius:50%;background:var(--teal-fill);color:#fff;display:grid;place-items:center;font-size:1rem;letter-spacing:.02em}
.brand-text{display:flex;flex-direction:column;line-height:1.2}
.brand-name{font-family:var(--font-body);font-weight:700;font-size:.9rem;letter-spacing:.01em;color:var(--ink)}
.brand small{display:block;font-family:var(--font-body);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tiffany-dk);font-weight:700;margin-top:1px}
.brand-logo{height:44px;width:auto}

/* "The Overlap" monogram — layered KSG, teal (Tiffany-leaning) + coral */
.ks-mono{font-family:var(--font-head);font-weight:700;line-height:1;display:inline-flex;position:relative;font-size:1.85rem;flex-shrink:0}
.ks-mono .k{color:#2F9690;position:relative;z-index:1}
.ks-mono .s{color:#F08A6B;margin-left:-.30em;position:relative;z-index:2}
.ks-mono .g{color:#2F9690;margin-left:-.22em;position:relative;z-index:3}
.site-footer .ks-mono .k{color:#69BAB5}
.site-footer .ks-mono .s{color:#F6A488}
.site-footer .ks-mono .g{color:#69BAB5}
.nav-links{display:flex;align-items:center;gap:26px;list-style:none}
.nav-links a{color:var(--ink);font-weight:500;font-size:.95rem}
.nav-links a:hover,.nav-links a.active{color:var(--teal-text)}
.nav-cta a{color:#fff !important}
/* Belt and braces for the header break (see the 900px block at the end of the
   file): the pill wrapping its OWN text is what turned a 50px button into a
   99px lozenge. The two module pages carry an eight-item list (they add Meal
   Plans and Recipes) and plan-download.html carries a duplicated Blog, so their
   rows still run out of room between 901px and 956px -- above the 900px
   breakpoint, where nothing can rescue them.
   Held on one line the pill stays 50px in the 74px row and only the brand name
   wraps, which it is built to do. Verified no page scrolls sideways at any
   width from 320px to 1600px with this on. */
.nav-cta .btn{white-space:nowrap}
/* The hamburger is the ONLY way to navigate on a phone and it was a 22x29px
   hit area (padding:0, so the box was exactly the glyph box) in the very
   corner of the screen, painted 2.39:1 against the old blue header. The
   padding grows the target past 44px in both axes; the equal negative
   margin cancels it again so nothing in the header row moves. Keep the two
   in step if you ever change either. 13 Sep 2026. */
.nav-toggle{display:none;background:none;border:0;font-size:1.5rem;line-height:1;color:var(--teal-text);cursor:pointer;padding:10px 11px;margin:-10px -11px}
.nav-toggle:focus-visible{outline:2px solid var(--teal-text);outline-offset:2px;border-radius:8px}

/* Buttons --------------------------------------------------- */
/* [hidden] is a type-level rule in the browser's own stylesheet, so ANY
   class that sets display beats it. .btn{display:inline-block} below is
   exactly that: the storefront's "Show me another day" button stayed on
   screen AND clickable on the dead-end state it was supposed to hide,
   and #pl-another on plan.html has the same bug. A one-off .gen-field
   fix was added to storefront.html on 12 Sep for the ZIP field; this
   generalises it so no future component has to remember. */
[hidden]{display:none!important}
.btn{display:inline-block;font-weight:600;font-size:.95rem;padding:12px 24px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;transition:.18s;font-family:var(--font-body)}
.btn-primary{background:var(--teal-fill);color:#fff}
.btn-primary:hover{background:var(--teal-dark)}
.btn-accent{background:var(--tiffany);color:#08312F}
.btn-accent:hover{filter:brightness(.95)}
.btn-ghost{background:transparent;color:var(--teal-text);border-color:var(--teal-text)}
.btn-ghost:hover{background:var(--teal-soft)}
.btn-lg{padding:15px 30px;font-size:1.02rem}

/* Hero ------------------------------------------------------ */
.page-hero{background:linear-gradient(180deg,var(--sand-lt),var(--white));padding:64px 0 40px;position:relative;overflow:hidden}
/* the KSG watermark is now the .hero-wm span, shared by every hero */
.page-hero .wrap{position:relative;z-index:1}

/* About page hero watermark — matches the actual KSG monogram colors (teal/coral), just lighter */
.about-hero::before{content:none}
/* KSG watermark — same mark, same corner, same colours on every page */
.hero-wm{position:absolute;right:0;top:-.26em;font-family:var(--font-head);font-weight:700;line-height:1;font-size:15rem;display:inline-flex;pointer-events:none;user-select:none;z-index:0}
.hero-wm .k{color:rgba(47,150,144,.07)}
.hero-wm .s{color:rgba(240,138,107,.08);margin-left:-.30em}
.hero-wm .g{color:rgba(47,150,144,.07);margin-left:-.22em}
/* over a dark photo the same hues need more alpha to read at the same strength */
.photo-hero .hero-wm,.identity-hero .hero-wm{z-index:1}
.photo-hero .hero-wm .k,.identity-hero .hero-wm .k,
.photo-hero .hero-wm .g,.identity-hero .hero-wm .g{color:rgba(47,150,144,.20)}
.photo-hero .hero-wm .s,.identity-hero .hero-wm .s{color:rgba(240,138,107,.22)}
.photo-hero .wrap,.identity-hero .id-panels{z-index:2}
/* heroes that were not positioned before now anchor the mark */
.hero-split,.blog-hero{position:relative;overflow:hidden}
@media(max-width:700px){.hero-wm{font-size:9rem}}

/* Photo hero band (interior pages — real photography, full-bleed) */
.photo-hero{position:relative;min-height:50vh;display:flex;align-items:flex-end;background-size:cover;background-position:center;overflow:hidden}
.photo-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,67,64,.12) 0%,rgba(15,67,64,.52) 72%,rgba(15,67,64,.8) 100%)}
.photo-hero .wrap{position:relative;z-index:1;padding-bottom:52px;width:100%}
.photo-hero .eyebrow{color:var(--tiffany-lt)}
.photo-hero h1{color:#fff;text-shadow:0 4px 20px rgba(0,0,0,.25)}
.photo-hero .lead{color:rgba(255,255,255,.92)}
.photo-hero .rule{background:#fff}
/* Storefront hero — split layout: full uncropped photo on one side, copy on the other */
.hero-split{display:grid;grid-template-columns:1fr 1fr;align-items:center}
.hero-split .hero-split-photo{width:100%;height:auto;display:block}
.hero-split .hero-split-panel{background:var(--teal-soft);display:flex;flex-direction:column;justify-content:center;padding:56px 60px;align-self:stretch}
@media (max-width:860px){
  .hero-split{grid-template-columns:1fr}
  .hero-split .hero-split-panel{padding:40px 24px}
}
.hero{padding:56px 0 0}
.hero-copy{max-width:660px;margin-bottom:36px}
.hero-photo{width:100%;aspect-ratio:16/7;border-radius:var(--radius);box-shadow:var(--shadow);background:var(--sand);background-size:cover;background-position:center 32%;filter:brightness(1.08) saturate(1.03)}
.pic{aspect-ratio:4/5;border-radius:var(--radius);background:var(--sand);box-shadow:var(--shadow);background-size:cover;background-position:center}
.pic-wide{aspect-ratio:3/2;border-radius:var(--radius);background:var(--sand);box-shadow:var(--shadow);background-size:cover;background-position:center}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--teal-soft);color:var(--teal-text);font-weight:600;font-size:.82rem;padding:6px 14px;border-radius:999px}

/* Photo panel — polished stand-in for real photography (no stock photos of people used) */
.photo-panel{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--teal-soft) 0%,var(--sand-lt) 100%);display:flex;align-items:flex-end}
.photo-panel::before{content:'KSG';position:absolute;right:-.06em;bottom:-.18em;font-family:var(--font-head);font-weight:700;font-size:10rem;line-height:1;color:rgba(15,91,87,.09);pointer-events:none;user-select:none}
.photo-panel::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.55),transparent 60%)}
.photo-panel .tag{position:relative;z-index:1;margin:20px;background:#fff;color:var(--teal-text);font-weight:600;font-size:.82rem;padding:8px 16px;border-radius:999px;box-shadow:var(--shadow-sm)}

/* Cards ----------------------------------------------------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm);transition:.18s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card .ico{width:48px;height:48px;border-radius:12px;background:var(--teal-soft);color:var(--teal-text);display:grid;place-items:center;font-size:1.4rem;margin-bottom:14px}
.card h3{margin-bottom:6px}
.ribbon{position:absolute;top:16px;right:16px;background:var(--tiffany);color:#08312F;font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:999px;letter-spacing:.04em}
.pricecard{position:relative;text-align:left}
.price-tag{font-family:var(--font-head);font-weight:600;font-size:2rem;color:var(--teal-text)}
.price-tag small{font-family:var(--font-body);font-size:.9rem;color:var(--muted);font-weight:500}

/* Feature list ---------------------------------------------- */
.feature-list{list-style:none}
.feature-list li{display:flex;gap:12px;align-items:flex-start;padding:7px 0;color:var(--dim)}
.tick{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--tiffany-lt);color:var(--teal-text);display:grid;place-items:center;font-size:.8rem;font-weight:800}

/* Placeholder (scaffold) ----------------------------------- */
.placeholder{border:none;border-radius:var(--radius);background:linear-gradient(135deg,var(--teal-soft) 0%,var(--tiffany-lt) 100%);padding:40px;text-align:center;color:var(--teal-dark);box-shadow:var(--shadow-sm)}
.placeholder .big{font-size:1.7rem;margin:0 auto 12px;width:60px;height:60px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}
.await{display:inline-block;background:#FFF6E6;color:#8a6d1c;border:1px solid #F0D79A;border-radius:999px;padding:3px 12px;font-size:.76rem;font-weight:600}

/* As seen in ------------------------------------------------ */
.logos{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:center;opacity:.85}
.logos a{color:var(--dim);font-weight:600;font-size:.95rem;border-bottom:1px solid var(--line);padding-bottom:2px}

/* Band / CTA ------------------------------------------------ */
.band{background:var(--teal-fill);color:#fff;border-radius:var(--radius);padding:48px;text-align:center;box-shadow:var(--shadow)}
.band h2{color:#fff}
.band p{color:rgba(255,255,255,.92)}
.subscribe{display:flex;gap:10px;max-width:460px;margin:1.4rem auto 0}
.subscribe input{flex:1;padding:13px 16px;border-radius:999px;border:0;font-size:1rem;font-family:var(--font-body)}

/* Footer ---------------------------------------------------- */
.site-footer{background:var(--teal-dark);color:rgba(255,255,255,.8);padding:56px 0 28px}
.site-footer h4{color:#fff;font-family:var(--font-body);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.site-footer a{color:rgba(255,255,255,.8)}
/* The global `p{color:var(--dim)}` is a direct rule, so it beat the colour the
   footer passes down by inheritance and painted the tagline dark olive on dark
   green. Match the Explore links exactly. */
.site-footer p{color:rgba(255,255,255,.8)}
.site-footer a:hover{color:var(--tiffany)}
/* Same 'Registered Dietitian' line, opposite ground: on the dark olive
   footer --tiffany read 2.73:1 and --tiffany-dk would be worse still, so
   the footer copy takes the pale blush instead -- 5.92:1 on --teal-dark. */
.site-footer .brand small{color:var(--tiffany-lt)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.foot-grid ul{list-style:none}
.foot-grid li{margin:7px 0;font-size:.95rem}
.socials{display:flex;gap:10px;margin-top:14px}
.socials a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.15);margin-top:36px;padding-top:20px;display:flex;justify-content:space-between;font-size:.82rem;flex-wrap:wrap;gap:8px}

/* Calculator (course tool) ----------------------------------- */
.calc-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:32px;max-width:760px;margin:0 auto}
.calc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.calc-field label{display:block;font-weight:600;font-size:.85rem;margin-bottom:6px;color:var(--ink)}
.calc-field input,.calc-field select{width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:10px;font-family:inherit;font-size:.95rem;color:var(--ink);background:#fff}
.calc-result{background:var(--teal-soft);border-radius:var(--radius-sm);padding:20px;margin-top:20px}
.calc-result .big{font-family:var(--font-head);font-size:2rem;color:var(--teal-text);font-weight:600}
.calc-macros{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px}
.calc-macro{flex:1;min-width:110px;background:#fff;border-radius:10px;padding:12px;text-align:center;box-shadow:var(--shadow-sm)}
.calc-note{font-size:.8rem;color:var(--muted);margin-top:12px;line-height:1.5}

/* MacBook mockup frame (wraps the calculator so it reads as "on a laptop") */
.mac-mockup{max-width:860px;margin:0 auto;padding:0 6px}
.mac-screen{position:relative;background:#1d1d1f;border-radius:20px 20px 8px 8px;padding:20px 16px 0;box-shadow:0 40px 70px -28px rgba(15,67,64,.4),0 0 0 1px rgba(0,0,0,.06)}
.mac-cam{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:7px;height:7px;border-radius:50%;background:#050506;box-shadow:0 0 0 2px #2c2c2e}
.mac-browser-bar{background:#e9eaec;border-radius:10px 10px 0 0;padding:11px 16px;display:flex;align-items:center;gap:7px}
.mac-dot{width:11px;height:11px;border-radius:50%;flex:none}
.mac-dot.red{background:#ff5f57}
.mac-dot.yellow{background:#febc2e}
.mac-dot.green{background:#28c840}
.mac-url{flex:1;text-align:center;background:#fff;border-radius:6px;padding:5px 14px;font-size:.72rem;color:var(--muted);margin-left:10px;font-family:var(--font-body)}
.mac-content{background:var(--sand-lt);padding:30px 26px 34px;max-height:min(72vh,680px);overflow-y:auto;border-radius:0 0 2px 2px}
.mac-content .calc-wrap{max-width:none;margin:0;box-shadow:var(--shadow-sm)}
.mac-base{width:112%;max-width:980px;height:20px;margin:0 auto;position:relative;left:50%;transform:translateX(-50%);background:linear-gradient(180deg,#e6e6e9 0%,#c9c9ce 55%,#b2b2b8 100%);border-radius:0 0 14px 14px;box-shadow:0 10px 18px -8px rgba(0,0,0,.25)}
.mac-base::before{content:'';position:absolute;left:50%;top:0;transform:translateX(-50%);width:130px;height:7px;background:#a3a3a9;border-radius:0 0 9px 9px}
@media(max-width:640px){
  .mac-screen{border-radius:16px 16px 6px 6px;padding:14px 10px 0}
  .mac-content{padding:22px 16px 26px}
  .mac-base{height:14px}
}

/* Mixed serif/italic headline pairing (e.g. "8 <em>modules</em> that build...") */
h1 em,h2 em{font-style:italic;font-weight:500}

/* Split feature band — full-bleed photo + colored panel (course "who it's for") */
.split-feature{display:grid;grid-template-columns:1fr 1fr;min-height:480px}
.split-feature .sf-photo{background-size:cover;background-position:center;min-height:340px}
.split-feature .sf-panel{background:var(--tiffany-lt);display:flex;flex-direction:column;justify-content:center;padding:56px 60px}
.split-feature .sf-kicker{display:block;font-family:var(--font-body);font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-text);margin-bottom:10px}
.split-feature h2{margin:0 0 20px;font-size:clamp(1.7rem,3vw,2.3rem)}
.sf-list{list-style:none;padding:0;margin:0 0 24px;border-top:1px solid rgba(15,67,64,.12)}
.sf-list li{padding:13px 0 13px 30px;position:relative;font-weight:600;color:var(--ink);border-bottom:1px solid rgba(15,67,64,.12)}
.sf-list li::before{content:'✓';position:absolute;left:0;top:13px;color:var(--teal-text);font-weight:700}
.sf-close{font-weight:500;font-style:italic;font-family:var(--font-head);font-size:1.2rem;color:var(--teal-dark);margin:0 0 24px}
@media(max-width:900px){
  .split-feature{grid-template-columns:1fr}
  .split-feature .sf-photo{min-height:280px}
  .split-feature .sf-panel{padding:44px 28px}
}

/* Module index — interactive accordion (course curriculum). Numbered modules
   are <details class="mod-row"> so they expand/collapse (click or keyboard);
   Check In dividers stay plain non-interactive rows. */
.mod-index{margin-top:2.6rem;display:flex;flex-direction:column;gap:14px}
.mod-row{position:relative;border-radius:var(--radius);overflow:hidden}
.mod-row:nth-child(4n+1){background:var(--sand-lt)}
.mod-row:nth-child(4n+2){background:var(--white)}
.mod-row:nth-child(4n+3){background:var(--tiffany-lt)}
.mod-row:nth-child(4n+4){background:var(--white)}
.mod-row.checkin{background:linear-gradient(120deg,var(--teal-soft) 0%,var(--tiffany-lt) 100%);display:grid;grid-template-columns:110px 1fr;gap:8px 28px;align-items:center;padding:32px 34px}
.mod-summary{display:grid;grid-template-columns:110px 1fr 28px;gap:8px 28px;align-items:center;padding:32px 34px;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent;transition:background .2s ease}
.mod-summary::-webkit-details-marker{display:none}
.mod-summary:hover{background:rgba(15,67,64,.04)}
/* KaTrina and Aaron both read the Fraunces 8 as reversed on a screenshare --
   its two bowls are deliberately asymmetric, which is correct type design and
   wrong for a client who says it looks like a mistake. Set in the body face,
   where 8 is symmetrical, with tabular figures so 01-08 line up. 29 Aug 2026. */
.mod-num{font-family:var(--font-body);font-weight:700;font-size:4rem;line-height:1;color:rgba(15,67,64,.14);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.mod-row.checkin .mod-num{color:rgba(15,67,64,.22);font-size:3.6rem}
.mod-body h3{margin:0 0 6px;font-size:1.28rem;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mod-body p{margin:0;color:var(--ink);opacity:.85}
.mod-tag{display:block;font-family:var(--font-body);font-weight:700;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-text);margin-bottom:6px}
.mod-badge{display:inline-block;font-family:var(--font-body);font-weight:700;font-size:.68rem;letter-spacing:.02em;text-transform:none;color:var(--teal-dark);background:var(--tiffany-lt);border-radius:999px;padding:3px 11px}
.mod-toggle{width:28px;height:28px;border-radius:50%;background:rgba(15,67,64,.08);display:flex;align-items:center;justify-content:center;font-size:1.15rem;line-height:1;color:var(--teal-text);transition:transform .25s ease,background .25s ease,color .25s ease;flex:none}
.mod-row[open] .mod-toggle{transform:rotate(45deg);background:var(--teal-fill);color:#fff}
.mod-detail{padding:0 34px 32px}
.mod-points{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.mod-points li{padding-left:26px;position:relative;font-size:.95rem;color:var(--ink);opacity:.9;line-height:1.45}
.mod-points li::before{content:'✓';position:absolute;left:0;top:0;color:var(--teal-text);font-weight:700}
.mod-tool{margin-top:26px}
@media(min-width:641px){
  .mod-detail{padding-left:calc(110px + 28px + 34px)}
}
@keyframes mod-reveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.mod-row[open] .mod-detail{animation:mod-reveal .22s ease}
@media(max-width:640px){
  .mod-row.checkin{grid-template-columns:56px 1fr;padding:22px 20px;gap:4px 16px}
  .mod-summary{grid-template-columns:56px 1fr 24px;padding:22px 20px;gap:4px 16px}
  .mod-num{font-size:2.6rem}
  .mod-row.checkin .mod-num{font-size:2.2rem}
  .mod-body h3{font-size:1.08rem}
  .mod-detail{padding:0 20px 22px}
  .mod-toggle{width:24px;height:24px;font-size:1.05rem}
}

/* Course resource links --------------------------------------- */
.resource-list{display:grid;gap:10px}
.resource-list a{display:flex;align-items:center;gap:10px;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:#fff;font-weight:600;font-size:.92rem;transition:.15s;color:var(--ink)}
.resource-list a:hover{background:var(--teal-soft);border-color:var(--teal-text);color:var(--teal-text)}

/* Reveal animation ------------------------------------------ */
.reveal{opacity:0;transform:translateY(18px);transition:.6s ease}
.reveal.in{opacity:1;transform:none}

/* Identity hero (scroll-driven, sticky photo) ---------------- */
.identity-hero{position:relative;background:var(--teal-dark)}
.identity-hero-photo{position:sticky;top:0;height:100vh;width:100%;background-size:cover;background-position:center 30%;z-index:0;filter:brightness(1.2) saturate(1.05)}
.identity-hero-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,67,64,.06) 0%,rgba(15,67,64,.28) 55%,rgba(15,67,64,.6) 100%)}
.id-panels{position:relative;z-index:1;margin-top:-100vh}
.id-panel{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:0 7vw;position:relative}
.id-eyebrow{display:block;font-family:var(--font-head);font-style:italic;font-weight:500;font-size:1.3rem;color:#fff;opacity:.92;margin-bottom:.35rem}
.id-panel h2{color:#fff;font-size:clamp(2.5rem,6.6vw,5rem);text-shadow:0 4px 24px rgba(0,0,0,.28)}
.id-sub{color:rgba(255,255,255,.9);max-width:46ch;margin-top:14px;font-size:1.08rem}
.id-panel:nth-child(1){align-items:flex-start;text-align:left}
.id-panel:nth-child(2){align-items:center;text-align:center}
.id-panel:nth-child(2) .id-sub{margin-left:auto;margin-right:auto}
.id-panel:nth-child(3){align-items:flex-end;text-align:right}
.id-panel:nth-child(3) .id-sub{margin-left:auto}
.id-close{max-width:520px;margin-top:26px}
.id-close p{color:rgba(255,255,255,.92)}
.id-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px;justify-content:flex-end}
.id-panel:nth-child(3) .id-close{margin-left:auto}
.id-panel:nth-child(2) .id-cta,.id-panel:nth-child(2) .id-close{justify-content:center;margin-left:auto;margin-right:auto}

/* Pop-in reveal (scroll-triggered, snappier than the base .reveal) - */
.reveal.pop{opacity:0;transform:translateY(38px) scale(.94);transition:opacity .55s ease, transform .65s cubic-bezier(.34,1.56,.64,1)}
.reveal.pop.in{opacity:1;transform:none}
.pop-1{transition-delay:.03s}
.pop-2{transition-delay:.16s}
.pop-3{transition-delay:.29s}
.pop-4{transition-delay:.42s}

/* Welcome video card --------------------------------------------- */
.video-card{position:relative;max-width:900px;margin:0 auto;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:#0d1f1d;aspect-ratio:16/9}
.video-card video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.video-play{position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:rgba(15,67,64,.2);border:0;cursor:pointer;transition:.2s;padding:0}
.video-play:hover{background:rgba(15,67,64,.32)}
.video-play svg{filter:drop-shadow(0 8px 20px rgba(0,0,0,.35));transition:transform .2s}
.video-play:hover svg{transform:scale(1.08)}
.video-card.playing .video-play{display:none}

/* Strawberry patch background band (Home: Welcome Video → Offer → AI teaser) */
.strawberry-band{position:relative;z-index:0}
.strawberry-bg{position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center 60%}
.strawberry-bg::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,.62)}
.strawberry-band .section.sand{background:rgba(246,241,231,.6)}

/* Press grid — real screenshots of the actual press pages -------- */
.press-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.press-card{display:block;background:var(--teal-dark);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:.2s;text-decoration:none}
.press-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.press-shot{aspect-ratio:4/3;background-size:cover;background-position:top center;background-color:#0a2b29}
.press-body{padding:20px 22px 24px}
.press-tag{display:inline-block;font-family:var(--font-body);font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tiffany-lt);margin-bottom:8px}
.press-card h3{color:#fff;margin-bottom:6px}
.press-card p{color:rgba(255,255,255,.72);font-size:.92rem;margin:0}
@media(max-width:900px){.press-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.press-grid{grid-template-columns:1fr}}

/* Stat counter band -------------------------------------------- */
.stat-band{background:var(--teal-fill);color:#fff;padding:52px 0}
.stat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;text-align:center}
.stat-num{font-family:var(--font-head);font-weight:600;font-size:clamp(2rem,4vw,2.8rem);color:#fff}
.stat-label{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.92);margin-top:6px}

/* Signature saying band (light tiffany, punchy one-liner) ------- */
.saying-band{background:var(--tiffany-lt);padding:60px 0}
.saying-band blockquote{font-family:var(--font-head);font-style:italic;font-weight:500;font-size:clamp(1.35rem,2.8vw,2rem);line-height:1.45;color:var(--teal-dark);max-width:740px;margin:0 auto;text-align:center}

/* Elevated philosophy quote (About) ----------------------------- */
.philosophy-quote{padding:20px 0 4px}
.philosophy-quote blockquote{font-family:var(--font-head);font-style:italic;font-weight:500;font-size:clamp(1.5rem,3.4vw,2.35rem);line-height:1.38;color:var(--ink);max-width:820px;margin:0 auto;text-align:center}
.philosophy-quote .mark{font-family:var(--font-head);font-size:3.5rem;color:var(--tiffany);line-height:.5;display:block;margin-bottom:6px}
.philosophy-quote cite{display:block;font-style:normal;font-family:var(--font-body);font-weight:700;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-text);margin-top:22px}

/* Responsive ------------------------------------------------ */
@media(max-width:900px){
  .split{grid-template-columns:1fr;gap:28px}
  .grid-3,.grid-4{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .stat-grid{grid-template-columns:repeat(3,1fr);row-gap:32px}

  /* The hamburger used to take over only at 640px, and .nav{height:74px} is a
     fixed-height flex row that cannot wrap -- so from 641px up to the width
     where the row ran out of room, the 'Work with me' pill wrapped its own
     text to three lines, grew to 99px inside a 75px header, was sliced off
     flat at the top of the viewport and hung 11px down over the hero. iPad
     portrait (768px) sat in the middle of that band.
     Measured, in the real Inter/Fraunces webfonts rather than a fallback:
     the brand block needs 247px, the seven-item list 559px, plus 48px of
     .wrap padding -- so the desktop row needs about 878px of viewport and
     the first wrap appears at 852px (the clip starts at 794px). 900px is the
     site's existing breakpoint tier and clears 852px by 48px, so the menu
     collapses before the row is even tight rather than after it has broken.
     Raise this number, not 640px, if a nav item is ever added.
     Only these three rules moved up; everything else in the 640px block
     below is phone layout and stays there. 13 Sep 2026. */
  .nav-links{position:fixed;inset:74px 0 auto 0;flex-direction:column;background:var(--white);border-bottom:1px solid var(--line);padding:18px 24px;gap:14px;display:none}
  .nav-links.open{display:flex}
  .nav-toggle{display:block}
}
@media(max-width:640px){
  body{font-size:16px}
  .hero-photo{aspect-ratio:4/3}
  .section{padding:56px 0}
  .grid-2,.grid-3,.grid-4,.foot-grid{grid-template-columns:1fr}
  .subscribe{flex-direction:column}
  .calc-grid{grid-template-columns:1fr}
  .calc-wrap{padding:22px}

  /* Identity hero — simplify to stacked on mobile */
  .identity-hero-photo{background-position:center 25%}
  .id-panel{min-height:72vh;padding:0 6vw;align-items:flex-start !important;text-align:left !important}
  .id-panel h2{font-size:2.15rem}
  .id-cta{justify-content:flex-start}
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:24px 16px}
  .philosophy-quote .mark{font-size:2.6rem}
}

/* ============================================================
   8/12/26 refresh — press-style modules, AI preview, mission
   cards, and premium meal-plan cards (Katrina: "modules look
   plain, need to compete in this field")
   ============================================================ */

/* Offer cards — Home "Your one-stop shop", press-card style ---- */
.offer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.offer-card{display:block;background:var(--teal-dark);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:.2s;text-decoration:none}
.offer-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.offer-shot{aspect-ratio:4/3;background-size:cover;background-position:center;background-color:#2E3524;position:relative}
.offer-shot::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,20,10,0) 42%,rgba(15,20,10,.6) 100%)}
.offer-body{padding:18px 20px 22px}
.offer-tag{display:inline-block;font-family:var(--font-body);font-weight:700;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--tiffany-lt);margin-bottom:6px}
.offer-card h3{color:#fff;margin-bottom:4px;font-size:1.08rem}
.offer-card p{color:rgba(255,255,255,.72);font-size:.86rem;margin:0 0 10px;line-height:1.5}
.offer-cta{display:inline-block;font-size:.8rem;font-weight:700;color:#fff;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:2px}
@media(max-width:900px){.offer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.offer-grid{grid-template-columns:1fr}}

/* AI meal-plan generator — chat-style preview card -------------- */
.ai-preview{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:#fff;max-width:520px}
.ai-preview-bar{background:var(--teal-dark);padding:12px 18px;display:flex;align-items:center;gap:7px}
.ai-preview-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.32)}
.ai-preview-title{color:#fff;font-size:.76rem;font-weight:700;letter-spacing:.05em;margin-left:6px;opacity:.85}
.ai-preview-body{padding:22px 20px 24px;background:linear-gradient(180deg,var(--teal-soft) 0%,#fff 60%)}
.ai-bubble{max-width:84%;padding:11px 15px;border-radius:14px;font-size:.87rem;margin-bottom:12px;line-height:1.5}
.ai-bubble.user{background:var(--teal-fill);color:#fff;margin-left:auto;border-bottom-right-radius:4px}
.ai-bubble.bot{background:#fff;border:1px solid var(--line);margin-right:auto;border-bottom-left-radius:4px;box-shadow:var(--shadow-sm)}
.ai-bubble.bot strong{color:var(--teal-dark)}
.ai-preview-meta{display:flex;justify-content:space-between;align-items:center;margin-top:4px;font-size:.76rem;color:var(--muted)}
.ai-preview-meta .live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--tiffany);margin-right:6px;animation:pulse-dot 1.8s infinite}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.35}}

/* About "My mission" — numbered editorial cards ------------------ */
.mission-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.mission-card{position:relative;overflow:hidden;border-radius:var(--radius);padding:32px 26px 28px;box-shadow:var(--shadow-sm);transition:.2s}
.mission-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.mission-card .num{position:absolute;top:6px;right:16px;font-family:var(--font-body);font-size:3.2rem;font-weight:700;line-height:1;opacity:.16;font-variant-numeric:tabular-nums}
.mission-card h3{margin:8px 0 8px;font-size:1.18rem;position:relative}
.mission-card p{color:var(--dim);font-size:.94rem;position:relative}
.mission-1{background:var(--teal-soft)}
.mission-1 .num{color:var(--teal-dark)}
.mission-2{background:var(--tiffany-lt)}
.mission-2 .num{color:var(--mauve)}
.mission-3{background:var(--sand-lt)}
.mission-3 .num{color:#8A7A4E}
@media(max-width:900px){.mission-grid{grid-template-columns:1fr}}

/* Meal-plan library — premium kcal cards -------------------------- */
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.plan-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:.2s;border:1px solid var(--line)}
.plan-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.plan-kcal-band{background:var(--teal-dark);color:#fff;padding:22px 22px 16px;position:relative}
.plan-kcal-band .kcal-num{font-family:var(--font-head);font-size:2.15rem;font-weight:600;line-height:1}
.plan-kcal-band .kcal-unit{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;opacity:.72;display:block;margin-top:2px}
.plan-tag{position:absolute;top:18px;right:18px;background:var(--tiffany-dk);color:#fff;font-size:.65rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:99px}
.plan-body{padding:18px 22px 22px}
.plan-body h3{font-size:1.05rem;margin-bottom:6px}
.plan-body p{color:var(--dim);font-size:.88rem;margin-bottom:12px;line-height:1.5}
.plan-features{display:flex;flex-wrap:wrap;gap:6px}
.plan-features span{background:var(--sand-lt);border:1px solid var(--line);border-radius:99px;padding:3px 10px;font-size:.7rem;color:var(--dim)}
@media(max-width:900px){.plan-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.plan-grid{grid-template-columns:1fr}}

/* Pricing tier cards — small premium upgrade ---------------------- */
.pricecard{border-top:4px solid var(--teal)}
.pricecard.accent{border-top-color:var(--tiffany)}

/* ---------------------------------------------------------------
   DISPLAY FIGURES -- 30 Aug 2026
   KaTrina, on the 29 Aug walkthrough: "all the 8's on the page look
   upside down." Fraunces draws 8 with deliberately asymmetric bowls.
   That is correct type design and the wrong answer for a client who
   reads it as a mistake, and yesterday's fix only covered the module
   numbers she was looking at when she said it. These are every other
   place the site sets a large figure in the heading face: prices, the
   calorie calculator result, the stat band, the plan kcal band and the
   generator totals. Body face, tabular figures so columns line up.
   The KSG logotype (.ks-mono, .hero-wm, .photo-panel) stays in Fraunces
   -- it is letters, and it is the mark.
   --------------------------------------------------------------- */
.price-tag,
.calc-result .big,
.stat-num,
.plan-kcal-band .kcal-num,
.gen-totals b{
  font-family:var(--font-body);
  font-weight:700;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}