/* =====================================================================
   KINSE BRAND CSS — v0.1 (interim), shared site-wide
   One stylesheet, loaded by every page (<link rel="stylesheet"
   href="kinse-brand.css">), so a brand change only has to happen once.
   Built from the first-pass brand assets shared 2026-07-23: logo mark,
   color palette, and Poppins Black/Light typography. Treat every value
   below as confirmed-but-incomplete until the brander's full guide
   arrives. See KINSE_Brand_StyleGuide_v0.1.md for what's still open.
   ===================================================================== */

:root {
  /* ---- Brand colors (confirmed 2026-07-23) ---- */
  --kinse-magenta: #E31C79;   /* Primary logo color ("KINSE logo light") — R227 G28 B121 */
  --kinse-gold:    #FF9C00;
  --kinse-crimson: #842928;
  --kinse-red:     #F9423A;
  --kinse-pink:    #FFABCF;   /* pastel accent — distinct from the logo magenta above */
  --kinse-blue:    #0072CE;
  --kinse-cream:   #EAD5BE;

  /* ---- Neutrals (carried over from Cafe15 pending KINSE confirmation) ---- */
  --kinse-ink:       #2E2A26;
  --kinse-ink-soft:  #6B6259;
  --kinse-bg-light:  #FFF9F3;
  --kinse-white:     #FFFFFF;

  /* ---- Type ---- */
  --font-headline: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --weight-headline: 900;
  --weight-body-readable: 400;

  /* ---- Spacing scale ---- */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-2xl: 96px;

  /* ---- Radius / shape ---- */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-pill: 999px;
}

/* ---- Base ------------------------------------------------------------ */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-body-readable);
  color: var(--kinse-ink);
  background: var(--kinse-bg-light);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.kinse-headline {
  font-family: var(--font-headline);
  font-weight: var(--weight-headline);
  color: var(--kinse-ink);
  line-height: 1.05;
  margin: 0 0 var(--space-sm);
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }

p, li {
  font-family: var(--font-body);
  font-weight: var(--weight-body-readable);
  font-size: 1.05rem;
}

.kinse-eyebrow {
  font-family: var(--font-headline);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.8rem;
  color: var(--kinse-magenta);
}

/* ---- Logo --------------------------------------------------------------
   Every page loads kinse-logo.js (window.KINSE_LOGO_SRC), then sets it
   onto an <img id="kinse-logo-img"> — see the header markup in each page.
   One file to edit, every page updates.
------------------------------------------------------------------------ */
.kinse-logo-img { height: 40px; width: auto; display: block; }

/* ---- Color utility classes --------------------------------------------- */
.text-magenta { color: var(--kinse-magenta); }
.text-gold    { color: var(--kinse-gold); }
.text-crimson { color: var(--kinse-crimson); }
.text-red     { color: var(--kinse-red); }
.text-pink    { color: var(--kinse-pink); }
.text-blue    { color: var(--kinse-blue); }
.text-cream   { color: var(--kinse-cream); }

.bg-magenta { background-color: var(--kinse-magenta); color: var(--kinse-white); }
.bg-gold    { background-color: var(--kinse-gold); color: var(--kinse-ink); }
.bg-crimson { background-color: var(--kinse-crimson); color: var(--kinse-white); }
.bg-red     { background-color: var(--kinse-red); color: var(--kinse-white); }
.bg-pink    { background-color: var(--kinse-pink); color: var(--kinse-ink); }
.bg-blue    { background-color: var(--kinse-blue); color: var(--kinse-white); }
.bg-cream   { background-color: var(--kinse-cream); color: var(--kinse-ink); }

/* ---- Buttons / CTA ------------------------------------------------------ */
.kinse-btn {
  display: inline-block;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.9em 1.8em;
  border-radius: var(--radius-pill);
  background: var(--kinse-magenta);
  color: var(--kinse-white);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kinse-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(227, 28, 121, 0.25); }

.kinse-btn--secondary {
  background: transparent;
  color: var(--kinse-magenta);
  border: 2px solid var(--kinse-magenta);
}
.kinse-btn--gold { background: var(--kinse-gold); color: var(--kinse-ink); }
.kinse-btn--gold:hover { box-shadow: 0 6px 20px rgba(255, 156, 0, 0.3); }

/* ---- Cards / sections ---------------------------------------------------- */
.kinse-card {
  background: var(--kinse-white);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: 0 2px 24px rgba(46, 42, 38, 0.06);
}

.kinse-section { padding: var(--space-2xl) var(--space-md); }
.kinse-section--cream { background: var(--kinse-cream); }
.kinse-section--magenta { background: var(--kinse-magenta); color: var(--kinse-white); }
.kinse-section--magenta h1,
.kinse-section--magenta h2,
.kinse-section--magenta h3 { color: var(--kinse-white); }

.kinse-container { max-width: 1040px; margin: 0 auto; }
.kinse-container--narrow { max-width: 720px; }

/* ---- Pill tag / badge ----------------------------------------------------- */
.kinse-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.35em 0.9em;
  border-radius: var(--radius-pill);
  background: var(--kinse-pink);
  color: var(--kinse-crimson);
}

/* ---- FAQ / accordion basics ------------------------------------------------ */
.kinse-faq-item { border-bottom: 1px solid rgba(46, 42, 38, 0.1); padding: var(--space-md) 0; }
.kinse-faq-item h3 { margin-bottom: var(--space-xs); color: var(--kinse-magenta); }
.kinse-faq-item p { color: var(--kinse-ink-soft); margin: 0; }

.placeholder {
  background: var(--kinse-pink);
  color: var(--kinse-crimson);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  font-weight: 500;
}

/* =====================================================================
   SITE CHROME — header nav + footer, shared by every page
   ===================================================================== */
.kinse-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 249, 243, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(46, 42, 38, 0.08);
}
.kinse-nav-inner {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  padding: var(--space-sm) var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.kinse-nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
/* Home's single-page mode hides the nav links entirely, which used to
   leave the logo stranded on the left with a lot of empty bar next to
   it. When that's the case, center the logo in the bar instead. */
.kinse-nav-inner--centered { justify-content: center; }
.kinse-nav-formerly {
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: 0.72rem;
  color: var(--kinse-ink-soft);
  white-space: nowrap;
}
.kinse-nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-left: auto;
  flex-wrap: wrap;
}
.kinse-nav-links a {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--kinse-ink);
  text-decoration: none;
}
.kinse-nav-links a:hover,
.kinse-nav-links a[aria-current="page"] { color: var(--kinse-magenta); }
.kinse-nav-links .kinse-btn { padding: 0.55em 1.3em; font-size: 0.88rem; }

/* Hamburger button — hidden on desktop, shown only under the mobile
   breakpoint below. Three plain <span> bars, no icon font/image needed. */
.kinse-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  padding: 0;
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
}
.kinse-nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--kinse-ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.kinse-nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.kinse-nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.kinse-nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 760px) {
  .kinse-nav-toggle { display: flex; }
  .kinse-nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    background: var(--kinse-bg-light);
    border-bottom: 1px solid rgba(46, 42, 38, 0.08);
    box-shadow: 0 12px 24px rgba(46, 42, 38, 0.08);
    padding: var(--space-sm) var(--space-md) var(--space-md);
  }
  .kinse-nav-links.is-open { display: flex; }
  .kinse-nav-links a {
    padding: 0.85em 0.2em;
    border-bottom: 1px solid rgba(46, 42, 38, 0.06);
    font-size: 1rem;
  }
  .kinse-nav-links .kinse-btn {
    display: block;
    text-align: center;
    margin-top: var(--space-sm);
    border-bottom: none;
  }
}

/* Newsletter panel (added Oct 20; restyled Oct 20 — image added, form
   put in its own card) — a dedicated band directly above the footer,
   modeled on Andytown's footer placement but reworked so it doesn't
   read as a bare, oversized embedded form floating in empty space:
   a real Kinse photo fills the left column (same height as the copy +
   form on the right, via align-items:stretch), and the form itself
   sits inside a plain white card instead of directly on the cream
   background. Only renders when site.newsletterEmbed has something in
   it (CMS: Site Settings → Newsletter signup embed code) — leave it
   blank and the whole band stays hidden, so there's never a broken-
   looking empty box live on the site. */
.kinse-newsletter { background: var(--kinse-cream); padding: var(--space-xl) var(--space-md); }
.kinse-newsletter-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-lg);
  align-items: center;
}
@media (max-width: 760px) { .kinse-newsletter-inner { grid-template-columns: 1fr; } }

.kinse-newsletter-copy { position: relative; }
.kinse-newsletter-copy h3 { margin-bottom: 4px; }
.kinse-newsletter-copy p { margin: 0; color: var(--kinse-ink-soft); font-size: 0.94rem; }
.kinse-newsletter-copy p + p.kinse-newsletter-note { margin-top: 8px; font-size: 0.86rem; }

.kinse-newsletter-form-card {
  background: transparent;
  border-radius: var(--radius-md);
  padding: 0;
  box-shadow: none;
}
/* Corrected Oct 20: the white strip around the form fields was this
   card's own white background/shadow showing through — not anything
   inside HighLevel's iframe (confirmed by inspecting the live DOM: the
   iframe and its wrappers are transparent with no padding of their own).
   Dropped the white-card treatment entirely so the form sits directly
   on the section's cream/tan background instead. The pink dashed focus
   outline, teal input borders, and field colors you see are still
   HighLevel's own — themeable from the Form Builder's Style/Advanced
   settings if you want them to match the section, but that's a look,
   not the whitespace issue. */
.kinse-newsletter-form iframe { min-height: 120px; width: 100%; display: block; border: none; background: transparent; }

.kinse-footer { padding: var(--space-xl) var(--space-md) var(--space-lg); border-top: 1px solid rgba(46, 42, 38, 0.08); }
.kinse-footer-grid {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg) var(--space-xl);
}
/* First column (brand/blurb) stays wider; the rest (Shop, Explore,
   Company, Contact — Explore only shows on pages with nav) share the
   remaining space evenly and wrap naturally, however many there are. */
.kinse-footer-grid > div { flex: 1 1 130px; }
.kinse-footer-grid > div:first-child { flex: 2 1 240px; }
.kinse-footer h4 {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--kinse-ink-soft);
  margin-bottom: var(--space-sm);
}
.kinse-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.kinse-footer a { color: var(--kinse-ink); text-decoration: none; font-size: 0.95rem; }
.kinse-footer a:hover { color: var(--kinse-magenta); }
.kinse-footer-bottom {
  max-width: 1040px;
  margin: var(--space-lg) auto 0;
  padding-top: var(--space-md);
  border-top: 1px solid rgba(46, 42, 38, 0.08);
  font-size: 0.8rem;
  color: var(--kinse-ink-soft);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* =====================================================================
   OFFER CARDS — used on Home to route into Weekly Meals / Catering / Order
   ===================================================================== */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
@media (max-width: 760px) { .offer-grid { grid-template-columns: 1fr; } }
.offer-card {
  background: var(--kinse-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 2px 24px rgba(46, 42, 38, 0.06);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-top: 4px solid var(--kinse-magenta);
}
.offer-card:nth-child(2) { border-top-color: var(--kinse-gold); }
.offer-card:nth-child(3) { border-top-color: var(--kinse-crimson); }
.offer-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
/* Photo panel (added Oct 20, evened out Oct 20) — every Home offer card
   (Weekly Meals / Catering / Order) now sits its photo on a flat
   brand-colored panel (.offer-card-photo, colored via bg-pink/bg-cream
   below) instead of a bare edge-to-edge image, so the three cards read
   as one consistent set regardless of what kind of photo is in each —
   a plain photo fills the panel edge to edge (object-fit: cover); a
   transparent-background product cutout (CMS: check "This photo has
   its background removed" on the offer card) floats centered on it
   with breathing room instead (.has-cutout, object-fit: contain). Same
   idea as the colored product tiles on Andytown's homepage Brian
   pointed to. order.njk's "You might also like" cards don't use this
   wrapper and keep the plain edge-to-edge .offer-card img rule above. */
.offer-card-photo {
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.offer-card-photo img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; display: block; }
.offer-card.has-cutout .offer-card-photo { padding: var(--space-md); }
.offer-card.has-cutout .offer-card-photo img { object-fit: contain; }
.offer-card .offer-card-body { padding: var(--space-md) var(--space-md) var(--space-lg); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.offer-card h3 { margin-bottom: 4px; }
.offer-card p { font-size: 0.95rem; color: var(--kinse-ink-soft); margin: 0; flex: 1; }
.offer-card .offer-cta { font-family: var(--font-headline); font-weight: 700; font-size: 0.9rem; color: var(--kinse-magenta); }

/* ---- Hero photo — full-width banner under a page's hero copy ---- */
.hero-photo {
  max-width: 1040px;
  margin: 0 auto var(--space-xl);
  padding: 0 var(--space-md);
}
.hero-photo img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: 0 2px 24px rgba(46, 42, 38, 0.08);
  display: block;
}
@media (max-width: 640px) { .hero-photo img { aspect-ratio: 4 / 3; } }

/* ---- Step lists (how-it-works patterns) ---- */
.step-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-top: var(--space-lg); }
@media (max-width: 760px) { .step-row { grid-template-columns: 1fr; } }
.step {
  background: var(--kinse-white);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: 0 2px 24px rgba(46, 42, 38, 0.06);
}
.step .step-num {
  font-family: var(--font-headline);
  font-weight: 900;
  font-size: 1.4rem;
  color: var(--kinse-magenta);
  display: block;
  margin-bottom: 6px;
}
.step h4 { font-size: 1.02rem; margin-bottom: 4px; }
.step p { font-size: 0.92rem; color: var(--kinse-ink-soft); margin: 0; }

/* ---- Offering blocks (Catering / Subscriptions detail sections) ---- */
.offering-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: center;
  padding: var(--space-xl) 0;
  border-bottom: 1px solid rgba(46, 42, 38, 0.08);
}
.offering-block:last-child { border-bottom: none; }
.offering-block:nth-child(even) { direction: rtl; }
.offering-block:nth-child(even) > * { direction: ltr; }
@media (max-width: 760px) {
  .offering-block, .offering-block:nth-child(even) { grid-template-columns: 1fr; direction: ltr; }
}
.offering-media {
  background: var(--kinse-cream);
  border-radius: var(--radius-md);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  box-shadow: 0 2px 24px rgba(46, 42, 38, 0.06);
}
.offering-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* .offering-media-fallback — used only if a block has no photo yet */
.offering-media-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--kinse-crimson);
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 0.85rem;
  text-align: center;
  padding: var(--space-md);
}
.offering-block h3 { margin-bottom: 10px; }
.offering-block .tag { margin-bottom: var(--space-sm); }

/* ---- Contact strip (used on Catering / Order pages) ---- */
.contact-strip {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--space-md);
}
.contact-strip a.plain { color: var(--kinse-ink); font-weight: 600; text-decoration: none; }
.contact-strip a.plain:hover { color: var(--kinse-magenta); }

/* =====================================================================
   PAGE-SPECIFIC SECTIONS — moved here from each page's own <style>
   block when the site became templated (Eleventy). Class names are
   scoped per section/page so nothing below collides.
   ===================================================================== */

/* ---- Shared across sub-pages (Catering / Weekly Meals / Order) ---- */
.page-hero { text-align: center; padding: var(--space-xl) var(--space-md); }
.page-hero .kinse-eyebrow { display: block; margin-bottom: var(--space-sm); }
.page-hero h1 { margin: 0 auto var(--space-sm); max-width: 700px; }
.page-hero .sub { font-size: 1.05rem; color: var(--kinse-ink-soft); max-width: 560px; margin: 0 auto var(--space-lg); }

.cta-block { padding: var(--space-2xl) var(--space-md); text-align: center; }
.cta-block .kinse-container { max-width: 560px; }
.cta-block .kinse-btn { margin-top: var(--space-md); }

/* ---- Home ---- */
.home-hero {
  position: relative;
  text-align: center;
  padding: var(--space-2xl) var(--space-md);
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--kinse-white);
}
.home-hero .kinse-container { position: relative; z-index: 1; }
.home-hero .kinse-eyebrow { display: block; margin-bottom: var(--space-sm); color: var(--kinse-pink); }
.home-hero h1 { margin: 0 auto var(--space-md); max-width: 780px; color: var(--kinse-white); text-shadow: 0 2px 20px rgba(0,0,0,0.25); }
.home-hero .sub {
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: 1.15rem;
  color: rgba(255,255,255,0.92);
  max-width: 600px;
  margin: 0 auto var(--space-lg);
  text-shadow: 0 1px 12px rgba(0,0,0,0.2);
}
.home-hero-actions { display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap; }
.home-hero .kinse-btn--secondary { background: rgba(255,255,255,0.08); color: var(--kinse-white); border-color: var(--kinse-white); }
.home-hero .kinse-btn--secondary:hover { background: rgba(255,255,255,0.18); }
/* Visually hidden — carries hero.photo_alt for screen readers, since the
   photo itself is a CSS background-image (backgrounds have no alt text). */
.home-hero-bg-a11y {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
@media (max-width: 640px) { .home-hero { min-height: 460px; padding: var(--space-xl) var(--space-md); } }

/* Hero video option (added Oct 20) — CMS field hero.video_url. When set,
   a looping muted video fills the hero behind the same gradient overlay
   and text used for the photo hero; the photo still loads as the
   <video>'s poster frame so there's never a blank flash before it plays,
   and it's what shows if the browser can't play the video at all. Leave
   hero.video_url blank to keep the plain photo hero — nothing else about
   the section changes either way. */
.home-hero-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.home-hero-gradient {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(46,20,20,0.35) 0%, rgba(46,20,20,0.65) 100%);
}

.problem { position: relative; padding: var(--space-xl) 0; }
.problem .kinse-container { max-width: 700px; text-align: center; padding: 0 var(--space-md); }

/* Values cards (added Oct 20; widened to full page width Oct 20) —
   modeled on the boxed, icon-led value tiles Brian pointed to on
   Andytown's homepage: a bordered box per value, an icon up top next to
   the title, body copy below. Same `pillars` content as before (CMS:
   Home → Pillars) — only the presentation changed, plus a new `icon`
   field per pillar. Brian's call: this grid should span the full page
   width rather than sit boxed into the same narrow reading column as
   the paragraph above it, so it's deliberately NOT inside
   `.kinse-container` — `.pillars-wrap` is its own full-width band with
   just a small side gutter (tighter on mobile, where the old wider
   gutter felt heavy once the cards stack into one column). */
.pillars-wrap { padding: 0 var(--space-md); margin-top: var(--space-lg); }
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
@media (max-width: 760px) {
  .pillars { grid-template-columns: 1fr; }
  .pillars-wrap { padding: 0 var(--space-sm); }
}
.pillar {
  text-align: left;
  background: var(--kinse-white);
  border: 1.5px solid rgba(46, 42, 38, 0.12);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-md) var(--space-lg);
}
.pillar-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.pillar-icon {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--kinse-cream);
}
.pillar-icon svg { width: 22px; height: 22px; }
.pillar h3 { font-size: 1.05rem; margin: 0; }
.pillar p { font-size: 0.92rem; color: var(--kinse-ink-soft); margin: 0; }

.offerings { position: relative; padding: var(--space-xl) var(--space-md) var(--space-2xl); }
.offerings h2 { text-align: center; margin-bottom: 6px; }
.offerings .kinse-eyebrow { display: block; text-align: center; margin-bottom: var(--space-xs); }

.roots { padding: var(--space-xl) var(--space-md); }
.roots .kinse-container { max-width: 680px; display: flex; gap: var(--space-lg); align-items: center; flex-wrap: wrap; }
.roots-stat { flex: 0 0 auto; }
.roots-stat .num { font-family: var(--font-headline); font-weight: 900; font-size: 2.2rem; color: var(--kinse-magenta); display: block; line-height: 1; }
.roots-stat .label { font-size: 0.82rem; color: var(--kinse-ink-soft); }
.roots-text { flex: 1 1 320px; }
.roots-text p { margin: 0; }

.closing { position: relative; text-align: center; padding: var(--space-2xl) var(--space-md); }
.closing .kinse-container { max-width: 560px; }
.closing h2 { color: var(--kinse-white); }
.closing p { opacity: 0.92; }

/* ---- Catering ---- */
.offerings-list { padding: var(--space-lg) var(--space-md) var(--space-xl); }
.offerings-list .kinse-container { max-width: 920px; }

.proof-row {
  display: flex; gap: var(--space-lg); justify-content: center; flex-wrap: wrap;
  text-align: center; margin-top: var(--space-md);
}
.proof-stat .num { font-family: var(--font-headline); font-weight: 900; font-size: 2.4rem; color: var(--kinse-white); display: block; line-height: 1; }
.proof-stat .label { font-size: 0.85rem; opacity: 0.85; }

/* ---- Weekly Meals / Subscriptions ---- */
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-top: var(--space-lg); }
@media (max-width: 760px) { .plan-grid { grid-template-columns: 1fr; } }
.plan-card { background: var(--kinse-white); border-radius: var(--radius-md); padding: var(--space-lg) var(--space-md); box-shadow: 0 2px 24px rgba(46,42,38,0.06); text-align: center; }
.plan-card h4 { margin-bottom: 6px; }
.plan-card p { font-size: 0.9rem; color: var(--kinse-ink-soft); margin: 0; }
.grain-free-note { text-align: center; margin-top: var(--space-md); font-size: 0.9rem; color: var(--kinse-ink-soft); }

.postpartum { padding: var(--space-2xl) var(--space-md); }
.postpartum .kinse-container { max-width: 760px; display: flex; gap: var(--space-lg); align-items: center; flex-wrap: wrap; }
.postpartum-media { flex: 1 1 260px; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 2px 24px rgba(46,42,38,0.18); }
.postpartum-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.postpartum-text { flex: 1.3 1 320px; }

/* ---- Order ---- */
.order-hero { text-align: center; padding: var(--space-2xl) var(--space-md) var(--space-xl); }
.order-hero .kinse-eyebrow { display: block; margin-bottom: var(--space-sm); }
.order-hero h1 { margin: 0 auto var(--space-sm); max-width: 640px; }
.order-hero .sub { font-size: 1.05rem; color: var(--kinse-ink-soft); max-width: 540px; margin: 0 auto var(--space-lg); }
.order-hero .kinse-btn { font-size: 1.1rem; padding: 1.1em 2.4em; }
.order-note { font-size: 0.85rem; color: var(--kinse-ink-soft); max-width: 460px; margin: var(--space-md) auto 0; }

.order-form-section { padding: 0 var(--space-md) var(--space-xl); }
.order-form-wrap {
  max-width: 720px;
  margin: 0 auto;
  background: var(--kinse-white);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 24px rgba(46, 42, 38, 0.08);
  overflow: hidden;
}
.order-form-wrap iframe { display: block; width: 100%; height: 1200px; border: none; }
.order-form-fallback {
  max-width: 720px;
  margin: var(--space-md) auto 0;
  text-align: center;
  font-size: 0.88rem;
  color: var(--kinse-ink-soft);
}
.order-form-fallback a { color: var(--kinse-magenta); font-weight: 600; text-decoration: none; }

.also-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin-top: var(--space-lg); }
@media (max-width: 640px) { .also-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   COMING-SOON GATE
   ===================================================================== */
body.kinse-gated { overflow: hidden; }
.kinse-gate {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background: linear-gradient(160deg, var(--kinse-crimson) 0%, var(--kinse-magenta) 100%);
}
.kinse-gate-card {
  width: 100%;
  max-width: 420px;
  background: var(--kinse-white);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 48px rgba(0,0,0,0.25);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
}
.kinse-gate-card h1 { font-size: 1.4rem; margin: 0 0 10px; }
.kinse-gate-card p { color: var(--kinse-ink-soft); font-size: 0.95rem; margin: 0 0 var(--space-md); }
#kinse-gate-form { display: flex; flex-direction: column; gap: 10px; }
#kinse-gate-input {
  font: inherit;
  padding: 0.85em 1em;
  border: 1px solid rgba(46,42,38,0.18);
  border-radius: var(--radius-sm);
  text-align: center;
}
#kinse-gate-input:focus { outline: 2px solid var(--kinse-magenta); outline-offset: 1px; }
.kinse-gate-error { color: var(--kinse-red); font-size: 0.85rem; margin: 10px 0 0; }