/* Shared primitives and composable marketing blocks. See COMPONENTS.md. */
* { box-sizing: border-box; }
/* Reusable content primitives for new pages. Marketing blocks below compose these styles. */
.stack { display: grid; align-content: start; gap: var(--stack-gap, var(--space-4)); }
.cluster { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.content-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.card { min-width: 0; padding: var(--space-8); border: 1px solid var(--card-line); border-radius: var(--radius-card); background: var(--surface); }
.badge { display: inline-flex; align-items: center; gap: var(--space-2); width: fit-content; padding: 5px 10px; border: 1px solid var(--card-line); border-radius: var(--radius-pill); background: var(--surface-soft); color: var(--body); font-size: var(--text-caption); font-weight: var(--weight-medium); line-height: 1.5; }
.badge-accent { color: var(--accent); background: #274125; }
.title-display { font-size: clamp(2.125rem, 4.5vw, 4rem); font-weight: var(--weight-medium); line-height: 1.1; letter-spacing: -.04em; }
.title-section { font-size: var(--text-section); font-weight: var(--weight-medium); line-height: 1.18; letter-spacing: -.025em; }
.title-subsection { font-size: var(--text-title); font-weight: var(--weight-medium); line-height: 1.25; letter-spacing: -.02em; }
.text-body { max-width: 65ch; color: var(--body); font-size: var(--text-body); line-height: 1.65; }
.text-caption { color: var(--muted); font-size: var(--text-caption); line-height: 1.5; }
.page-main { padding-block: calc(var(--header-bottom) + 64px) 88px; }
.page-heading { max-width: 760px; margin-bottom: var(--space-12); }
.icon-button { display: inline-grid; place-items: center; flex-shrink: 0; width: var(--touch-target); height: var(--touch-target); padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: var(--surface-soft); }
.icon-button svg, .badge svg { width: 20px; height: 20px; flex-shrink: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; }
body { margin: 0; font-size: var(--text-body); -webkit-font-smoothing: antialiased; }
body:has(dialog[open]) { overflow: hidden; }
h1, h2, h3, p, figure { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; font-weight: var(--weight-medium); }
img { display: block; max-width: 100%; height: auto; }
svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
em { font-style: normal; font-weight: var(--weight-medium); color: var(--accent); }
h1, h2, h3, h4, h5, h6, .brand span { font-family: var(--font-heading); }
p { line-height: 1.7; }
[hidden] { display: none !important; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 5px;
}
.shell { width: min(1280px, calc(100% - 112px)); margin-inline: auto; }
.section-pad { padding-block: 112px; }
.skip-link {
  position: fixed;
  left: 20px;
  top: 10px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* Navigation and controls */
.header { position: fixed; inset: 17px 0 auto; z-index: 20; color: #f5f5f7; pointer-events: none; }
.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 76px;
  padding: 14px 20px;
  border: 1px solid #ffffff16;
  border-radius: 22px;
  background: #17241bcc;
  box-shadow: 0 12px 40px #06120b12;
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  pointer-events: auto;
  transition: background .3s, border-color .3s, color .3s;
}
.header-progress { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); overflow: visible; pointer-events: none; opacity: 0; }
.header-progress.is-visible { opacity: 1; }
.header.has-menu .header-progress { opacity: 0; }
.header.has-menu:not(.is-collapsed) .header-progress { transition: none; }
:is(.header.has-menu.is-collapsed, [data-header-collapsed='true'] .header.has-menu) .header-progress.is-visible { opacity: 1; transition: opacity 180ms 480ms; }
.header-progress path { stroke: var(--bright); stroke-width: 2; stroke-dasharray: var(--progress-length, 0px); stroke-dashoffset: calc(var(--progress-length, 0px) * (1 - var(--scroll-progress, 0))); }
.header.is-light { color: var(--ink); }
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; min-height: var(--touch-target); }
.brand img { width: 36px; height: 36px; }
.brand span { font-size: 1.5rem; font-weight: var(--weight-medium); letter-spacing: -.9px; }
.header-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; color: #d4e0ce; font-size: 0.9375rem; font-weight: var(--weight-medium); }
.header-nav a { display: inline-flex; align-items: center; min-height: var(--touch-target); transition: color .2s; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  min-height: 54px;
  padding: 16px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 1.0625rem;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  white-space: nowrap;
  transition: background .25s, color .25s, border-color .25s;
}
.button svg { width: 17px; height: 17px; flex-shrink: 0; transition: transform .4s var(--ease); }
.button:active { filter: brightness(.95); }
.button-small { min-height: var(--touch-target); padding: 12px 17px; gap: 16px; font-size: 0.9375rem; }
.button-header { background: var(--mint); color: var(--on-mint); }
.header-inner:not(:has(.header-nav)) .button-header { margin-left: auto; }
.button-secondary { background: var(--surface-soft); color: var(--ink); border-color: var(--line); }
.button-primary, .button-green, .button-dark { background: var(--green); color: var(--on-green); }
.button:disabled, .button[aria-disabled="true"], .icon-button:disabled { opacity: .5; cursor: not-allowed; }
.button[aria-busy="true"], [aria-busy="true"] .button:disabled { cursor: wait; }
.header.is-light .header-inner { background: #132019d9; border-color: #ffffff16; box-shadow: 0 12px 40px #0002; }
.header.is-light .header-nav { color: #d4e0ce; }
/* A direct, spacious introduction */
/* The shared menu keeps its height steady while the frame contracts to an avatar. */
.header-shell { position: relative; }
.header.has-menu .header-inner { width: 100%; height: var(--header-size); min-height: var(--header-size); margin-left: auto; padding: calc((var(--header-size) - var(--touch-target) - 2px) / 2) 18px; overflow: hidden; border-radius: var(--radius-pill); transition: width 480ms var(--ease), border-radius 480ms var(--ease), background 240ms, border-color 240ms; }
.header-brand { transition: opacity 180ms, transform 360ms var(--ease); }
.header-menu-controls { position: absolute; top: calc((var(--header-size) - var(--touch-target) - 2px) / 2); right: 9px; transition: opacity 160ms; }
.header-menu-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; color: #f5f5f7; background: transparent; }
.menu-glyph { position: relative; display: block; width: 18px; height: 18px; }
.menu-glyph > span { position: absolute; left: 0; top: 8px; width: 18px; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform 280ms var(--ease); }
.menu-glyph > span:first-child { transform: translateY(-3px); }
.menu-glyph > span:last-child { transform: translateY(3px); }
.is-menu-open .menu-glyph > span:first-child { transform: rotate(45deg); }
.is-menu-open .menu-glyph > span:last-child { transform: rotate(-45deg); }
.header-orb { position: absolute; top: -1px; right: -1px; display: grid; place-items: center; width: var(--header-size); height: var(--header-size); padding: 0; border: 0; border-radius: 50%; background: transparent; opacity: 0; pointer-events: none; transition: opacity 180ms; }
.header-orb img { width: var(--header-orb-mark-size); height: var(--header-orb-mark-size); border-radius: 50%; transition: opacity 180ms, transform 280ms var(--ease); }
.header-orb .menu-glyph { position: absolute; opacity: 0; color: #f5f5f7; transition: opacity 180ms; }
.is-menu-open .header-orb img { opacity: 0; transform: scale(.9); }
.is-menu-open .header-orb .menu-glyph { opacity: 1; }
:is(.header.is-collapsed, [data-header-collapsed='true'] .header.has-menu) .header-inner { width: var(--header-size); border-radius: 50%; }
:is(.header.is-collapsed, [data-header-collapsed='true'] .header.has-menu) .header-brand { opacity: 0; transform: translateX(14px); }
:is(.header.is-collapsed, [data-header-collapsed='true'] .header.has-menu) .header-menu-controls { opacity: 0; pointer-events: none; }
:is(.header.is-collapsed, [data-header-collapsed='true'] .header.has-menu) .header-orb { opacity: 1; pointer-events: auto; transition-delay: 100ms; }
.header-menu { position: absolute; top: calc(100% + 10px); right: 0; width: min(320px, 100%); padding: 18px; border: 1px solid var(--card-line); border-radius: 24px; color: var(--ink); background: #17241bf2; box-shadow: 0 18px 60px #0004; backdrop-filter: blur(24px) saturate(130%); -webkit-backdrop-filter: blur(24px) saturate(130%); pointer-events: none; opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top right; transition: opacity 200ms, transform 280ms var(--ease); }
.header.is-menu-open .header-menu { pointer-events: auto; opacity: 1; transform: none; }
.header-menu nav { display: grid; gap: 4px; margin-bottom: 14px; }
.header-menu nav a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 12px; border-radius: 12px; font-size: 1.0625rem; font-weight: var(--weight-medium); transition: background 160ms; }
.header-menu nav svg { width: 17px; height: 17px; color: var(--body); }
.header-menu .button { width: 100%; }
.header-orb:focus-visible, .header-menu-button:focus-visible { outline-offset: -4px; }
@media (hover: hover) and (pointer: fine) { .header-menu-button:hover { color: #fff; } .header-menu nav a:hover { background: var(--surface-soft); } }
@media (max-width: 650px), (max-width: 1000px) and (max-height: 500px) {
  .header-menu { width: 100%; }
  .header-menu nav a { justify-content: flex-start; gap: 10px; font-size: 1rem; }
  .header-menu nav svg { flex-shrink: 0; }
}
.eyebrow { font-size: 0.8125rem; font-weight: var(--weight-medium); line-height: 1.6; color: var(--muted); }
.hero { overflow: hidden; color: #f5f5f7; background: #0b130e; background-image: radial-gradient(ellipse at 8% 40%, #193c2426, transparent 55%); }
.hero { background-image: none; }
.hero-grid { display: grid; grid-template-columns: var(--visual-columns); gap: var(--visual-gap); min-height: 100svh; align-content: center; align-items: center; padding-block: calc(var(--header-bottom) + 36px) 36px; }
.hero-content { position: relative; z-index: 1; min-width: 0; }
.hero-eyebrow { color: #c0d1ba; margin-bottom: 29px; }
.hero h1 { font-size: clamp(4.625rem, 6.7vw, 5.875rem); font-weight: var(--weight-medium); line-height: 1.04; letter-spacing: -.055em; }
.hero-line { display: block; overflow: hidden; padding-block: 2px 7px; }
.hero-line > span, .hero-line > em { display: block; }
.hero-line > em { color: var(--bright); }
.hero-promise { max-width: 420px; margin-top: 25px; color: #c6d7bf; font-size: 1.25rem; line-height: 1.6; letter-spacing: -.2px; }
.hero-actions { --hero-action-height: 56px; display: flex; align-items: flex-start; gap: 26px; margin-top: 30px; }
.can-enter :is(.hero-line > span, .hero-line > em, .hero-promise, .hero-actions) { animation: content-settle var(--motion-reveal) var(--ease) both; }
.can-enter .hero-line > em { animation-delay: 60ms; }
.hero-cta { display: grid; justify-items: center; gap: 12px; }
.hero-platform { display: flex; align-items: center; gap: 6px; margin: 0; color: #acbda5; font-size: 0.75rem; line-height: 1.5; }
.hero-platform svg { width: 14px; height: 16px; flex-shrink: 0; stroke-width: var(--control-icon-line); }
.hero-actions > .quiet-link { min-height: var(--hero-action-height); }
.quiet-link { display: inline-flex; align-items: center; gap: 10px; min-height: var(--touch-target); color: #e1ecdf; font-size: 1rem; font-weight: var(--weight-medium); line-height: 1.35; }
.quiet-link svg { width: 16px; height: 16px; transition: transform .4s var(--ease); }
.hero-photograph { position: relative; min-width: 0; }
.can-enter .hero-photograph { animation: photo-settle var(--motion-reveal) var(--ease) both; }
.meal-art { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; height: var(--visual-card-height); overflow: hidden; border-radius: var(--visual-card-radius); }
.meal-tile { width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; stroke: none; }
[data-hero-layout='slices'] { --meal-columns: 1fr 1fr 2.35fr 1fr 1fr 1fr 1fr; overflow: hidden; isolation: isolate; border-radius: var(--visual-card-radius); }
[data-hero-layout='slices'] .meal-art { border-radius: 0; grid-template-columns: var(--meal-columns); }
.meal-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; margin: 0 0 12px 66px; color: #b4c4b0; font-size: 0.75rem; line-height: 1.5; text-align: center; }
.meal-row-labels { position: absolute; inset: 30px auto 0 0; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); align-items: center; width: 66px; color: #b4c4b0; font-size: 0.75rem; line-height: 1.5; }
[data-hero-layout='week'] .meal-art { grid-template-rows: repeat(3, minmax(0, 1fr)); height: clamp(330px, 46svh, 430px); margin-left: 66px; border-radius: 25px; }
[data-hero-layout='slices']::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #00000080 0%, #0000000a 26%, transparent 42%, #00000035 58%, #000000b8 78%, #000000ed 100%); pointer-events: none; }
.hero-day-labels { position: relative; display: grid; grid-template-columns: var(--meal-columns); gap: 3px; width: 100%; margin: 3px 0 0; color: #ffffffb8; font-size: 0.75rem; font-weight: var(--weight-medium); line-height: 1.4; text-align: center; }
.hero-meal-overlay { position: absolute; inset: auto 0 23px; z-index: 1; pointer-events: none; }
.hero-meal-panel { display: flex; flex-direction: column; gap: 12px; }
.hero-meal-details { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; width: fit-content; max-width: calc(100% - 2 * var(--hero-summary-inset, 18px)); margin-inline: var(--hero-summary-inset, 18px); padding: 14px 16px; border: 1px solid #ffffff14; border-radius: 20px; background: #15251e66; box-shadow: var(--glass-highlight); backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%); }
.hero-meal-copy { display: grid; gap: 6px; min-width: 0; }
.hero-meal-meta { --social-pill-height: 26px; --social-icon-size: 13px; --social-label-size: .6875rem; position: absolute; bottom: calc(100% + 9px); left: 0; display: flex; align-items: center; gap: 6px; }
.hero-meal-meta .social-stat-pill { background: #15251ebd; }
.hero-meal-meta svg { flex-shrink: 0; color: var(--accent); }
.hero-meal-meta > span > span { display: block; line-height: 1; }
.hero-difficulty svg { stroke-width: 1.3; }
.hero-meal-panel h3 { color: #fff; font-size: 1.4375rem; font-weight: var(--weight-semibold); line-height: 1.25; letter-spacing: -.5px; }
.hero-day-label { display: grid; place-items: center; min-width: 0; height: 32px; }
.hero-day-letter { display: block; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.hero-nutrients { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 0.75rem; line-height: 1.4; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hero-nutrients > div { display: flex; align-items: baseline; gap: 3px; }
.hero-nutrients dt { color: #ffffffbf; font-size: inherit; line-height: inherit; }
.hero-nutrients dd { display: flex; align-items: baseline; margin: 0; color: #fff; font-size: inherit; font-weight: var(--weight-medium); line-height: inherit; }
.hero-nutrients small { color: #ffffffbf; font-size: inherit; font-weight: var(--weight-regular); }
.hero-nutrients .energy-unit { margin-left: 3px; }
[data-hero-layout='week'] .hero-day-labels, [data-hero-layout='week'] .hero-meal-overlay { display: none; }
h2 { font-size: var(--text-section); font-weight: var(--weight-medium); line-height: 1.09; letter-spacing: -.045em; }
.body-copy { max-width: 420px; color: var(--body); font-size: 1.0625rem; line-height: 1.65; }
.section-copy .eyebrow { margin-bottom: 25px; }
.section-copy .body-copy { margin-top: 25px; }

/* Goals become an actual week, with no decorative information */
.approach { padding-block: 128px 152px; }
.approach-grid { display: grid; grid-template-columns: var(--visual-columns); gap: var(--visual-gap); align-items: center; }
.personal-diagram { display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: var(--visual-card-height); height: auto; padding: 32px; border: 0; border-radius: 0; background: none; box-shadow: none; }
@media (min-width: 851px) { .personal-diagram { translate: 0 6px; } }
.diagram-inputs, .plan-hub, .weekly-plan { flex-shrink: 0; }
.diagram-inputs { display: grid; grid-template-columns: 1fr; gap: 6px; width: min(180px, 100%); margin-inline: auto; }
.diagram-plus { display: grid; place-items: center; height: 14px; color: var(--accent); font-size: 1rem; font-weight: var(--weight-medium); line-height: 1; }
.diagram-plus svg { width: 14px; height: 14px; }
.diagram-plus svg path { stroke-width: var(--control-icon-line); vector-effect: non-scaling-stroke; }
.diagram-source { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--touch-target); padding: 10px 16px; border: 1px solid var(--card-line); border-radius: 14px; color: var(--ink); background: var(--surface-soft); font-size: 0.9375rem; font-weight: var(--weight-medium); white-space: nowrap; }
.diagram-source svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--accent); stroke-width: 1.4; }
.plan-connectors { width: 100%; height: 24px; min-height: 24px; color: var(--diagram-line); stroke-width: 1.35; }
.plan-hub { position: relative; z-index: 2; width: 40px; height: 40px; margin: 0 auto -20px; }
.plan-hub img { width: 40px; height: 40px; }
.weekly-plan { margin-top: 0; padding: 32px 14px 14px; border: 1px solid var(--card-line); border-radius: 20px; background: var(--surface-soft); }
.diagram-source, .weekly-plan { border-color: var(--glass-border); background: var(--glass-surface); box-shadow: var(--glass-highlight); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); }
.week-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 4px 14px; }
.week-heading p { font-size: 0.875rem; font-weight: var(--weight-medium); line-height: 1.4; }
.week-heading > span { color: var(--body); font-size: 0.75rem; }
.plan-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.plan-day { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; overflow: hidden; padding: 10px 0 0; border: 1px solid var(--card-line); border-radius: 11px; background: var(--surface); }
.day-label { color: var(--body); font-size: 0.75rem; line-height: 1.4; }
.plan-day-photo { display: block; width: 100%; height: 76px; flex-shrink: 0; stroke: none; }
.connector { stroke-dasharray: 600; stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s .15s var(--ease); }
.can-animate .connector { stroke-dashoffset: 600; }
.can-animate .is-visible .connector { stroke-dashoffset: 0; }

/* One continuous plan, shopping and cooking story */
.experience { --section-fade: clamp(80px, 12svh, 140px); position: relative; padding-top: 120px; padding-bottom: 112px; background: linear-gradient(to bottom, var(--paper) 0, var(--section-alt) var(--section-fade), var(--section-alt) calc(100% - var(--section-fade)), var(--paper) 100%); }
.experience-heading { padding-bottom: 48px; border-bottom: 1px solid transparent; }
.experience-heading .eyebrow { margin-bottom: 24px; }
.experience-heading h2 { max-width: 720px; }
.story-layout { --story-viewport: calc(100svh - var(--header-bottom) - 36px); position: relative; height: auto; }
.story-layout.is-interactive { height: calc(var(--story-viewport) * 3); }
.story-stage { position: sticky; top: calc(var(--header-bottom) + 12px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: center; gap: 94px; min-height: var(--story-viewport); padding-block: 24px; }
.story-chapters { display: grid; align-content: center; gap: 0; min-width: 0; }
.story-chapter { display: flex; align-items: center; min-height: 0; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--header-bottom) + 24px); }
.story-chapter:last-child { border: 0; }
.chapter-inner { width: 100%; padding-block: 22px; }
.chapter-index { margin-bottom: 8px; color: var(--muted); font-size: 0.75rem; font-weight: var(--weight-medium); transition: color var(--motion-control); }
.story-chapter h3 { color: #89987f; font-size: clamp(1.75rem, 2.25vw, 2.125rem); font-weight: var(--weight-medium); letter-spacing: -.03em; line-height: 1.15; transition: color var(--motion-control); }
.story-chapter p:not(.chapter-index) { max-width: 420px; margin-top: 12px; color: #84947d; font-size: 1rem; line-height: 1.55; transition: color var(--motion-control); }
.story-chapter .chapter-extra { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: #84947d; font-size: 0.8125rem; line-height: 1.5; }
.story-chapter.is-active h3, .story-chapter:focus-within h3 { color: var(--ink); }
.story-chapter.is-active .chapter-index { color: var(--accent); }
.story-chapter.is-active p:not(.chapter-index), .story-chapter:focus-within p:not(.chapter-index) { color: var(--body); }
.story-chapter.is-active .chapter-extra { color: var(--muted); }
.chapter-extra svg { width: 17px; height: 17px; flex-shrink: 0; color: #778b70; transition: color var(--motion-control); }
.story-chapter.is-active .chapter-extra svg, .story-chapter:focus-within .chapter-extra svg { color: var(--accent); }
.product-column { position: relative; min-width: 0; }
.product-sticky { display: flex; flex-direction: column; align-items: center; gap: 24px; padding-block: 13px; }
.device-figure { width: var(--device-width); text-align: center; }
.device { width: 100%; position: relative; isolation: isolate; }
.device-screen { position: absolute; left: 5.333333%; right: 5.333333%; top: 2.5%; bottom: 2.5%; z-index: -1; overflow: hidden; border-radius: 15.3% / 7.05%; background: #101b14; container-type: inline-size; }
.device-bezel { position: relative; width: 100%; height: auto; pointer-events: none; }
.device-preview { position: absolute; inset: 0; display: flex; flex-direction: column; gap: .85em; padding: 17% 7% 7%; color: #edf2ec; background: #101b14; font-size: 11px; font-size: 5cqw; line-height: 1.4; opacity: 0; visibility: hidden; transition: opacity .24s var(--ease), visibility .24s; pointer-events: none; }
.device-preview.is-active { opacity: 1; visibility: visible; }
.preview-topline { display: flex; justify-content: space-between; align-items: center; gap: .8em; color: #b4c4b0; font-size: .85em; }
.preview-topline svg { width: 1.5em; height: 1.5em; color: var(--accent); }
.preview-heading { margin: 0; color: #edf2ec; font-size: 1.85em; font-weight: var(--weight-semibold); letter-spacing: -.035em; line-height: 1.12; }
.preview-note { color: #b4c4b0; font-size: .9em; line-height: 1.45; }
.preview-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35em; }
.preview-days > span { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; color: #b4c4b0; font-size: .8em; }
.preview-days > :is(.is-active, .is-selected) { color: #142c1a; background: var(--mint); }
.preview-meal { display: grid; grid-template-rows: minmax(0, 1fr) auto; flex: 1; min-height: 0; overflow: hidden; border: 1px solid #ffffff12; border-radius: 1.35em; background: #1b2a20; }
.preview-meal > img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.preview-meal > div { padding: .8em 1em .9em; }
.preview-meal h5 { margin: .25em 0 0; color: #edf2ec; font-size: 1.15em; font-weight: var(--weight-semibold); line-height: 1.25; }
.preview-meal p { color: #b4c4b0; font-size: .8em; line-height: 1.4; }
.preview-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5em; margin: 0; padding: .9em; border: 1px solid #ffffff12; border-radius: 1.25em; background: #1b2a20; }
.preview-stats :is(div, dl) { min-width: 0; margin: 0; }
.preview-stats :is(strong, dd) { display: block; margin: 0; color: #edf2ec; font-size: 1.15em; font-weight: var(--weight-semibold); line-height: 1.35; }
.preview-stats :is(span, dt) { color: #b4c4b0; font-size: .78em; }
.preview-progress { display: grid; gap: .55em; color: #b4c4b0; font-size: .85em; }
.preview-progress > span:last-child { display: block; height: .5em; overflow: hidden; border-radius: 1em; background: #2f4435; }
.preview-progress > span:last-child::before { content: ''; display: block; width: 72%; height: 100%; border-radius: inherit; background: var(--mint); }
.preview-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.preview-list > li { display: flex; align-items: center; gap: .8em; padding-block: .85em; border-bottom: 1px solid #ffffff12; color: #edf2ec; }
.preview-list .check-dot { width: 1.35em; height: 1.35em; flex-shrink: 0; border: 1px solid #7e9878; border-radius: 50%; }
.preview-list > li.is-done { color: #8eaa88; }
.preview-list > li.is-done .check-dot { border-color: var(--mint); background: var(--mint); box-shadow: inset 0 0 0 .3em #1b2a20; }
.preview-list small { margin-left: auto; color: #b4c4b0; font-size: .85em; }
.preview-list-summary { color: #b4c4b0; font-size: .85em; }
.preview-recipe-photo { flex: 1; min-height: 5em; width: 100%; height: 10em; object-fit: cover; border-radius: 1.3em; }
.preview-step { color: var(--mint); font-size: .85em; }
.preview-instruction { color: #edf2ec; font-size: 1em; line-height: 1.5; }
.preview-instruction h5 { margin: 0 0 .45em; font-size: 1.35em; font-weight: var(--weight-semibold); line-height: 1.25; }
.preview-instruction p { color: #b4c4b0; font-size: 1em; line-height: 1.5; }
.preview-timer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .35em .8em; padding: .9em 1em; border: 1px solid #ffffff16; border-radius: 1.25em; color: var(--mint); background: #1b2a20; font-variant-numeric: tabular-nums; }
.preview-timer svg { width: 1.5em; height: 1.5em; }
.preview-timer > span { font-size: .85em; }
.preview-timer strong { grid-column: 2; grid-row: 1 / span 2; font-size: 1.75em; font-weight: var(--weight-medium); letter-spacing: -.04em; }
.preview-timer small { grid-column: 1; color: #b4c4b0; font-size: .75em; line-height: 1.4; }
.preview-bottom-nav { display: flex; align-items: center; justify-content: space-around; gap: 1em; margin-top: auto; padding-top: .8em; border-top: 1px solid #ffffff12; color: #9aaf93; font-size: .78em; }
.preview-bottom-nav > span { display: grid; justify-items: center; gap: .35em; }
.preview-bottom-nav svg { width: 1.9em; height: 1.9em; }
.preview-bottom-nav :is(.is-active, .is-current) { color: var(--mint); }
.chapter-nav { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; gap: 0; margin: 0; padding: 4px; border: 1px solid #ffffff12; border-radius: 100px; background: #213026cc; box-shadow: 0 8px 25px #00000014; }
.chapter-indicator { position: absolute; left: 0; top: 4px; bottom: 4px; z-index: -1; border-radius: 100px; background: var(--mint); transition: transform .32s var(--ease), width .32s var(--ease); }
.chapter-nav :is(a, button) { display: flex; flex: 1; align-items: center; justify-content: center; min-width: 74px; min-height: var(--touch-target); padding: 12px 20px; border: 0; border-radius: 100px; color: #bdd0b6; background: transparent; font-size: 0.875rem; font-weight: var(--weight-medium); line-height: 1.35; transition: color .24s; }
.chapter-nav :is(a, button).is-active { color: #102617; }

/* The social concept is visibly an upcoming feature */
.social-section { padding-block: 112px; background: var(--paper); }
.social-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(32px, 4vw, 56px); align-items: center; }
.social-copy .eyebrow { margin-bottom: 25px; }
.coming-badge { display: inline-flex; padding: 6px 11px; border: 1px solid #d3e5ca; border-radius: 100px; color: #426b36; background: #e4efdd; font-size: 0.75rem; }
.social-copy .body-copy { max-width: 390px; margin-top: 25px; }
.social-demo { --social-pink: #ff2d55; --post-height: var(--device-screen-height); --post-width: var(--device-screen-width); --post-step: calc(var(--post-width) + 16px); --active-width: var(--post-width); --active-start: calc((100% - var(--post-width)) / 2); min-width: 0; width: 100%; margin-inline: auto; }
.demo-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: var(--active-width); margin-inline: var(--active-start) 0; padding: 0 2px 12px; color: var(--ink); font-size: 0.875rem; font-weight: var(--weight-medium); line-height: 1.5; }
.concept-label { display: inline-flex; padding: 5px 9px; border-radius: 100px; background: var(--surface-soft); color: var(--body); font-size: 0.6875rem; font-weight: var(--weight-regular); white-space: nowrap; }
.post-viewport { position: relative; isolation: isolate; padding-block: 12px; margin-block: -12px; overflow-x: clip; overflow-y: visible; touch-action: pan-y; }
/* Fixed edge layers keep the fade independent of the moving cards. */
.post-viewport::before, .post-viewport::after { content: ''; position: absolute; inset-block: 0; z-index: 6; width: max(0px, calc(var(--active-start) - 14px)); pointer-events: none; }
.post-viewport::before { left: 0; background: linear-gradient(to right, var(--paper) 0%, transparent 100%); }
.post-viewport::after { right: 0; background: linear-gradient(to left, var(--paper) 0%, transparent 100%); }
.post-track { display: flex; align-items: stretch; gap: 16px; width: max-content; margin-inline-start: var(--active-start); transform: translate3d(calc(var(--active-index, 0) * -1 * var(--post-step) + var(--drag-x, 0px)), 0, 0); transition: transform .36s var(--ease); }
.post-viewport.is-dragging .post-track { transition: none; }
.friend-post { --post-author-edge: 12px; --social-pill-height: 26px; --social-icon-size: 13px; --social-label-size: .6875rem; position: relative; flex: 0 0 var(--post-width); width: var(--post-width); height: var(--post-height); min-width: 0; overflow: hidden; border: 1px solid #ffffff1c; border-radius: 15.3% / 7.05%; background: #142019; box-shadow: 0 20px 45px #1424160c, 0 3px 9px #14241608; touch-action: pan-y; user-select: none; cursor: grab; }
.friend-post:active { cursor: grabbing; }
.friend-post:focus-visible { outline: 2px solid var(--green); outline-offset: 6px; }
.friend-post::after { content: ''; position: absolute; inset: 0; z-index: 5; background: #f5f5f773; opacity: 1; pointer-events: none; transition: opacity .36s var(--ease); }
.friend-post.is-active::after { opacity: 0; }
.friend-author { display: flex; align-items: center; gap: 10px; min-width: 0; }
.friend-author h3 { font-size: 0.875rem; font-weight: var(--weight-semibold); line-height: 1.4; }
.friend-author p { margin-top: 1px; font-size: 0.6875rem; line-height: 1.5; white-space: nowrap; }
.friend-avatar { display: block; width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: #dce5d5; }
.friend-avatar > img { width: 100%; max-width: none; height: 100%; object-fit: cover; }
.friend-avatar.portrait-pair > img { width: 200%; }
.friend-avatar.portrait-right > img { transform: translateX(-50%); }
.post-content { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; height: 100%; }
.post-photo-stage { position: absolute; inset: 0; overflow: hidden; touch-action: pan-y; user-select: none; cursor: grab; }
.post-photo-stage:active { cursor: grabbing; }
.shared-meal-image > svg { display: block; width: 100%; min-width: 0; overflow: hidden; stroke: none; }
.shared-meal-image { position: absolute; inset: 0; height: 100%; overflow: hidden; }
.shared-meal-image > svg { height: 100%; }
.shared-meal-image img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.photo-shade { position: absolute; inset: 0; background: linear-gradient(180deg, #06110b05 0%, #06110b0d 24%, #06110b4d 38%, #06110bb3 50%, #06110bdd 64%, #06110bef 82%, #06110bfa 100%); pointer-events: none; }
.post-header { position: absolute; inset: 12px var(--post-author-edge) auto; z-index: 3; display: flex; align-items: center; justify-content: flex-start; }
.photo-author { gap: 8px; width: fit-content; max-width: 100%; min-height: 46px; padding: 5px 18px 5px 5px; border: 1px solid #ffffff26; border-radius: var(--radius-pill); color: #ffffffed; background: #111914d9; backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); pointer-events: none; }
.photo-author > div { display: grid; min-width: 0; text-align: left; }
.photo-author h3 { font-size: .875rem; font-weight: var(--weight-medium); line-height: 1.4; }
.photo-author p { margin: 0; color: #ffffffcf; font-size: var(--social-label-size); line-height: 1.4; }
.photo-author .friend-avatar { width: 36px; height: 36px; border: 1px solid #ffffff3b; }
.photo-title { position: static; margin-bottom: 5px; color: #fff; font-size: 1.375rem; font-weight: var(--weight-medium); line-height: 1.16; letter-spacing: -.6px; text-wrap: balance; text-shadow: 0 1px 12px #00000060; pointer-events: none; }
.post-body { position: relative; z-index: 2; padding: 14px 16px 16px; background: none; }
.post-social { display: flex; align-items: center; gap: 6px; min-height: 32px; margin-bottom: 6px; }
.like-count { flex-shrink: 0; color: var(--body); font-size: 0.8125rem; font-variant-numeric: tabular-nums; line-height: 1.5; }
.post-body .like-count { color: #ffffffe0; }
.meal-diet-tag { display: inline-flex; width: fit-content; margin-bottom: 7px; padding: 4px 9px; border: 1px solid var(--glass-border); border-radius: var(--radius-pill); color: #ffffffed; background: var(--glass-surface); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); font-size: 0.6875rem; font-weight: var(--weight-medium); line-height: 1.4; }
.post-comments { display: flex; flex-direction: column; gap: 3px; height: 88px; overflow: hidden; mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 18px), transparent calc(100% - 7px), transparent 100%); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 18px), transparent calc(100% - 7px), transparent 100%); }
.post-comment { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 26px; flex-shrink: 0; }
.post-comment.is-reply { align-self: flex-end; flex-direction: row-reverse; width: fit-content; max-width: 100%; }
.post-comment.is-reply p { text-align: right; }
.friend-avatar.comment-avatar { width: 20px; height: 20px; }
.post-comment p { overflow: hidden; color: var(--body); font-size: var(--social-label-size); line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.post-comment strong { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.post-body .post-comment p { color: #ffffffcf; }
.meal-plan-count svg path { stroke-width: var(--control-icon-line); vector-effect: non-scaling-stroke; }
.page-control { display: flex; align-items: center; justify-content: center; gap: 10px; width: 76px; height: 44px; margin: 4px 0; margin-inline-start: calc(var(--active-start) + (var(--active-width) - 76px) / 2); border: 0; background: transparent; cursor: pointer; touch-action: manipulation; }
.page-control:focus-visible { outline: 2px solid var(--green); outline-offset: 5px; }
.page-dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: #53634b42; transition: background .2s; }
.page-dot.is-active { background: #30432c; }
.coming-badge { border-color: #537d492e; color: #bae1af; background: #274125; }
.social-demo { --social-pink: #ff375f; }
.friend-post { box-shadow: 0 22px 50px #0000002e, 0 3px 12px #00000026; }
.friend-post::after { background: #0b130e7a; }
.page-dot { background: #d6e2d147; }
.page-dot.is-active { background: #edf2ec; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Early access and the quieter supporting details */
.invitation { padding-block: 88px; text-align: center; background: var(--invitation); background-image: radial-gradient(ellipse at 50% 65%, var(--invitation-glow), var(--invitation) 75%); }
.invitation-inner { display: flex; flex-direction: column; align-items: center; }
.invitation-logo { width: 64px; height: 64px; margin-bottom: 27px; }
.invitation .eyebrow { margin-bottom: 22px; }
.invitation h2 { font-size: clamp(3.375rem, 5vw, 4.625rem); letter-spacing: -.05em; }
.invitation .body-copy { margin-top: 23px; font-size: 1.0625rem; }
.invitation .button { margin-top: 26px; }
.availability { margin-top: 19px; color: var(--body); font-size: 0.75rem; line-height: 1.7; }
.footer { padding-block: 39px 27px; color: #f5f5f7; background: #0b130e; }
.footer-top { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 32px; padding-bottom: 30px; }
.footer-top p { margin-left: auto; color: #b4c5ac; font-size: 0.8125rem; line-height: 1.5; }
.footer-bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 24px; padding-top: 21px; border-top: 1px solid #ffffff16; color: #b0c1a8; font-size: 0.75rem; line-height: 1.6; }
.footer-legal { grid-column: 2; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.footer-bottom nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 23px; }
.footer-bottom nav a { display: inline-flex; align-items: center; min-height: var(--touch-target); }
.footer-trademark { font-size: 0.6875rem; text-wrap: balance; }

.signup-dialog { width: min(510px, calc(100% - 30px)); max-height: calc(100dvh - 40px); padding: 40px; border: 1px solid var(--card-line); border-radius: 28px; color: var(--ink); background: var(--paper); box-shadow: 0 30px 100px #0003; }
.signup-dialog[open] { animation: dialog-in .35s var(--ease); }
.signup-dialog::backdrop { background: #07140d99; backdrop-filter: blur(10px); animation: fade-in .2s both; }
.dialog-logo { width: 43px; height: 43px; margin-bottom: 22px; }
.signup-dialog .eyebrow { margin-bottom: 18px; font-size: 0.8125rem; }
.signup-dialog h2 { margin-bottom: 19px; font-size: 2.125rem; letter-spacing: -1.5px; line-height: 1.15; }
.signup-dialog p:not(.eyebrow) { color: var(--body); font-size: 1.0625rem; line-height: 1.65; }
.modal-close { position: absolute; top: 13px; right: 13px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--card-line); border-radius: 50%; color: var(--body); background: var(--surface-soft); transition: background .2s; }
.modal-close svg { width: 17px; height: 17px; stroke-width: 1.75; }
.signup-dialog form { margin-top: 25px; }
.signup-dialog label, .field { display: block; margin-bottom: 17px; font-size: 0.9375rem; font-weight: var(--weight-medium); }
.signup-dialog input, .field input:not([type="checkbox"]):not([type="radio"]), .field textarea, .field select { display: block; width: 100%; min-width: 0; min-height: 48px; padding: 12px 13px; margin-top: 8px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--surface); font-size: 1.0625rem; transition: border-color .2s, box-shadow .2s; }
.signup-dialog input:focus, .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: #4cab59; box-shadow: 0 0 0 3px #29c24a1c; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.signup-dialog .button { width: 100%; margin: 4px 0 19px; }
.signup-dialog .consent { font-size: 0.75rem !important; }
.signup-dialog details { margin-top: 17px; color: var(--body); font-size: 0.8125rem; }
.signup-dialog summary { display: list-item; min-height: var(--touch-target); padding-block: 12px; cursor: pointer; }
.signup-dialog details p { margin-top: 12px; font-size: 0.75rem !important; }
.signup-dialog details a { text-decoration: underline; text-underline-offset: 3px; }
.signup-dialog #form-error { margin-bottom: 14px; color: #a42c1d; font-size: 0.8125rem; }
.signup-dialog #form-error { color: var(--danger); }

/* Motion supports the content and never delays access to it. */
.can-animate [data-reveal] { opacity: 0; transform: translateY(10px); transition: opacity var(--motion-reveal) var(--ease), transform var(--motion-reveal) var(--ease); }
.can-animate [data-reveal].is-visible { opacity: 1; transform: none; }
.can-animate .personal-diagram[data-reveal] { opacity: 1; transform: none; }
.personal-diagram.is-visible :is(.diagram-source, .weekly-plan) { border-color: color-mix(in srgb, var(--accent) 50%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 6%, transparent); }
.personal-diagram.is-visible .connector { stroke: var(--accent); }
.personal-diagram.is-visible .diagram-source { animation: diagram-detail-in .32s var(--ease) both, diagram-border-in .9s ease-out both; }
.personal-diagram.is-visible .diagram-source:nth-of-type(2) { animation-delay: .04s, .12s; }
.personal-diagram.is-visible .diagram-source:nth-of-type(3) { animation-delay: .08s, .24s; }
.personal-diagram.is-visible .plan-hub { animation: diagram-hub-in .32s .08s var(--ease) both; }
.personal-diagram.is-visible .week-heading { animation: diagram-detail-in .3s .1s var(--ease) both; }
.personal-diagram.is-visible .weekly-plan { animation: diagram-border-in .7s .32s ease-out both; }
.personal-diagram.is-visible .plan-day { animation: diagram-detail-in .3s var(--ease) both; }
.personal-diagram.is-visible .plan-day:nth-child(2) { animation-delay: .025s; }
.personal-diagram.is-visible .plan-day:nth-child(3) { animation-delay: .05s; }
.personal-diagram.is-visible .plan-day:nth-child(4) { animation-delay: .075s; }
.personal-diagram.is-visible .plan-day:nth-child(5) { animation-delay: .1s; }
.personal-diagram.is-visible .plan-day:nth-child(6) { animation-delay: .125s; }
.personal-diagram.is-visible .plan-day:nth-child(7) { animation-delay: .15s; }
.personal-diagram .connector { stroke-dasharray: 24; transition: stroke-dashoffset .35s .12s var(--ease); }
.can-animate .personal-diagram .connector { stroke-dashoffset: 24; }
.can-animate .personal-diagram.is-visible .connector { stroke-dashoffset: 0; animation: diagram-connector-in .9s .24s ease-out both; }
@keyframes diagram-detail-in { from { opacity: .65; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes diagram-hub-in { from { opacity: .8; transform: scale(.93); } to { opacity: 1; transform: none; } }
@keyframes diagram-border-in { 0% { border-color: var(--card-line); box-shadow: 0 0 0 transparent; } 40% { border-color: color-mix(in srgb, var(--accent) 65%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 12%, transparent); } 100% { border-color: color-mix(in srgb, var(--accent) 50%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 6%, transparent); } }
@keyframes diagram-connector-in { 0% { stroke: var(--diagram-line); filter: none; } 40% { stroke: var(--accent); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 35%, transparent)); } 100% { stroke: var(--accent); filter: none; } }
@keyframes content-settle { from { opacity: .86; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes photo-settle { from { opacity: .85; } to { opacity: 1; } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes choice-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

/* Restoration applies state immediately, without replaying an entrance or
   animating a navigation control from an obsolete starting position. */
.is-restoring :is(.header, .header *, .chapter-indicator, .device-preview, [data-reveal], [data-reveal] *, .hero-content *, .hero-photograph),
[data-reveal].is-restored { animation: none !important; transition: none !important; }
.personal-diagram.is-restored * { animation: none !important; }
.personal-diagram.is-restored .connector { transition: none !important; }
.is-restoring [data-reveal] { opacity: 1; transform: none; }

@media (min-width: 1500px) {
  :root { --visual-gap: 92px; }
  .hero h1 { font-size: 6rem; }
}
@media (max-width: 1100px) {
  :root { --visual-gap: 44px; --visual-card-height: clamp(380px, calc(100svh - 216px), 470px); }
  .shell { width: calc(100% - 72px); }
  .hero h1 { font-size: 4.625rem; }
  .hero-promise { font-size: 1.125rem; }
  .hero-actions { gap: 21px; }
  .header-inner { gap: 18px; }
  .header-nav { gap: 22px; }
  .story-stage, .social-grid { gap: 54px; }
  .personal-diagram { padding: 25px; }
  .diagram-inputs { gap: 6px; }
  .diagram-source { gap: 8px; font-size: 0.75rem; }
  .plan-week { gap: 5px; }
}
@media (max-width: 850px) {
  :root { --visual-columns: 1fr; --visual-gap: 32px; --visual-card-height: clamp(240px, 27svh, 360px); }
  .shell { width: calc(100% - 48px); }
  .header-inner { min-height: 70px; padding: 12px 15px; gap: 16px; }
  .brand span { font-size: 1.375rem; }
  .brand img { width: 33px; height: 33px; }
  .header-nav { gap: 18px; font-size: 0.875rem; }
  .button-small { padding-inline: 15px; gap: 12px; }
  .hero-content { max-width: 610px; }
  .hero h1 { font-size: 3rem; }
  .hero-promise { max-width: 435px; font-size: 1.25rem; }
  [data-hero-layout='week'] .meal-art { height: clamp(240px, 27svh, 360px); }
  .section-pad { padding-block: 88px; }
  .approach { padding-block: 96px 120px; }
  h2 { font-size: 2.25rem; }
  .body-copy { font-size: 1.0625rem; }
  .approach-grid { gap: 36px; }
  .section-copy .body-copy { max-width: 540px; }
  .personal-diagram { width: 100%; height: auto; margin-inline: auto; padding: 32px; }
  .diagram-source { font-size: 0.8125rem; }
  .plan-week { gap: 7px; }
  .experience { padding-top: 85px; }
  .experience-heading { padding-bottom: 39px; }
  .story-stage { gap: 38px; }
  .story-chapter { min-height: 0; }
  .story-chapter h3 { font-size: 1.75rem; }
  .story-chapter p:not(.chapter-index) { font-size: 1rem; }
  .chapter-inner { padding-block: 18px; }
  .chapter-nav :is(a, button) { min-width: 67px; padding-inline: 16px; }
  .social-section { padding-block: 88px; }
  .social-grid { grid-template-columns: 1fr; gap: 42px; }
  .social-copy .body-copy { max-width: 540px; }
  .footer-top { gap: 24px; }
  .footer-top p { font-size: 0.75rem; }
  .invitation h2 { font-size: 2.625rem; }
}
@media (max-width: 650px), (max-width: 1000px) and (max-height: 500px) {
  :root { --visual-card-height: clamp(150px, 20svh, 210px); --visual-card-radius: 25px; }
  html { scroll-padding-top: calc(var(--header-bottom) + 20px); }
  body { font-size: 1rem; }
  .shell { width: calc(100% - 40px); }
  .header { inset: calc(env(safe-area-inset-top, 0px) + 10px) 0 auto; }
  .header-inner { min-height: 62px; padding: 8px 10px; gap: 12px; border-radius: 18px; }
  .header.has-menu .header-inner { height: var(--compact-control-height); min-height: var(--compact-control-height); padding-inline-start: 9px; }
  .header-nav { display: none; }
  .brand { gap: 7px; }
  .brand span { font-size: 1.125rem; letter-spacing: -.4px; }
  .brand img { width: 28px; height: 28px; }
  .button-small { min-height: var(--touch-target); padding: 10px 14px; gap: 10px; font-size: 0.875rem; }
  .button-small svg { width: 14px; height: 14px; }
  .hero-grid { gap: 32px; padding-block: calc(var(--header-bottom) + 40px) 48px; }
  .hero-grid:has([data-hero-layout='slices']) { grid-template-rows: auto auto; align-items: start; }
  .eyebrow { font-size: 0.75rem; }
  .hero-eyebrow { margin-bottom: 16px; font-size: 0.75rem; }
  .hero h1 { font-size: 2.125rem; line-height: 1.16; letter-spacing: -.035em; }
  .hero-line { padding-block: 1px 3px; }
  .hero-promise { max-width: 400px; margin-top: 16px; font-size: 1rem; line-height: 1.6; }
  .hero-actions { --hero-action-height: var(--compact-control-height); flex-wrap: wrap; gap: 8px 16px; margin-top: 20px; }
  .button { font-size: 0.9375rem; font-weight: var(--weight-semibold); min-height: var(--compact-control-height); padding: 12px 16px; gap: 12px; }
  .hero-actions .button-primary { height: var(--compact-control-height); padding-block: 0; }
  .button-small { font-size: 0.875rem; min-height: var(--touch-target); padding: 10px 14px; gap: 10px; }
  .button-header { margin-left: auto; }
  .quiet-link { font-size: 0.875rem; gap: 8px; }
  .meal-art { gap: 2px; }
  [data-hero-layout='slices']::after { background: linear-gradient(180deg, #00000073 0%, transparent 24%, #00000033 40%, #000000cb 69%, #000000f2 100%); }
  .hero-day-labels { gap: 2px; margin-top: 2px; font-size: 0.6875rem; }
  .hero-meal-overlay { inset: auto 0 16px; }
  .hero-meal-panel { gap: 7px; }
  .hero-meal-details { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 10px; padding: 11px 12px; border-radius: 17px; }
  .hero-meal-meta .social-stat-pill { background: var(--glass-surface); }
  .hero-meal-meta { position: static; grid-column: 1; grid-row: 2; flex-direction: row; align-items: center; align-self: start; justify-self: start; gap: 6px; }
  .hero-meal-panel h3 { font-size: 1.125rem; }
  .hero-nutrients { gap: 6px; font-size: .6875rem; }
  [data-hero-layout='slices'] { display: flex; flex-direction: column; height: auto; background: var(--surface); }
  [data-hero-layout='slices'] .meal-art { flex: none; height: clamp(132px, 18svh, 168px); border-radius: var(--visual-card-radius) var(--visual-card-radius) 0 0; }
  [data-hero-layout='slices']::after { display: none; }
  [data-hero-layout='slices'] .hero-meal-overlay { position: relative; flex-shrink: 0; inset: auto; padding: 12px 16px 18px; background: linear-gradient(145deg, #ffffff08, transparent); }
  [data-hero-layout='slices'] .hero-meal-panel { gap: 10px; }
  [data-hero-layout='slices'] .hero-day-labels { order: -1; width: calc(100% + 32px); margin: 0 -16px 2px; padding: 0; color: var(--body); }
  [data-hero-layout='slices'] .hero-meal-details { width: 100%; max-width: none; margin-inline: 0; padding: 0; border: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  [data-hero-layout='slices'] .hero-meal-panel h3 { font-size: 1.125rem; }
  [data-hero-layout='week'] .meal-art { height: clamp(180px, 23svh, 230px); gap: 2px; margin-left: 58px; border-radius: 19px; }
  .meal-days { gap: 2px; margin-left: 58px; margin-bottom: 10px; font-size: 0.6875rem; }
  .meal-row-labels { top: 26.5px; width: 58px; font-size: 0.6875rem; }
  .section-pad { padding-block: 64px; }
  .approach { padding-block: 96px 72px; }
  h2 { font-size: 1.75rem; line-height: 1.18; letter-spacing: -.025em; }
  .body-copy { font-size: 1rem; line-height: 1.6; }
  .section-copy .eyebrow { margin-bottom: 18px; }
  .section-copy .body-copy { margin-top: 18px; font-size: 1rem; }
  .personal-diagram { padding: 24px 20px; }
  .diagram-inputs { gap: 6px; }
  .diagram-source { min-height: var(--touch-target); gap: 8px; padding-inline: 12px; border-radius: 14px; font-size: 0.875rem; }
  .diagram-source svg { width: 20px; height: 20px; }
  .plan-connectors { height: 24px; }
  .weekly-plan { padding: 32px 10px 11px; border-radius: 17px; }
  .week-heading { margin-inline: 2px; }
  .week-heading p { font-size: 0.8125rem; }
  .plan-week { gap: 4px; }
  .plan-day { gap: 6px; padding: 8px 0 0; border-radius: 8px; }
  .day-label { font-size: 0.75rem; }
  .plan-day-photo { height: 60px; }
  .experience { padding-block: 72px; }
  .experience-heading { padding-bottom: 28px; }
  .experience-heading .eyebrow { margin-bottom: 18px; }
  .experience-heading h2 { font-size: 1.75rem; line-height: 1.18; }
  .story-layout { height: auto; margin-top: 24px; isolation: isolate; }
  .story-layout.is-interactive { --story-viewport: calc(100svh - var(--header-bottom) - 36px); }
  .story-layout.is-interactive { height: calc(var(--story-viewport) * 3); }
  .story-stage { position: static; grid-template-columns: 1fr; gap: 0; min-height: 0; padding: 0; }
  .story-layout.is-interactive .story-stage { position: sticky; top: min(calc(var(--header-bottom) + 12px), calc(100svh - var(--story-stage-height, 0px) - 16px)); min-height: var(--story-viewport); gap: 24px; padding-block: 0; align-content: center; }
  .product-column { grid-row: 1; position: static; }
  .product-sticky { gap: 24px; padding: 24px 0 16px; }
  .story-layout.is-interactive .product-sticky { gap: 24px; padding: 0; }
  .device-figure { width: var(--device-width); }
  .chapter-nav { height: 44px; margin: 0; padding: 3px; }
  .chapter-nav :is(a, button) { position: relative; min-width: 0; min-height: 36px; height: 36px; padding: 6px 10px; font-size: 0.875rem; }
  .chapter-nav :is(a, button)::after { content: ''; position: absolute; inset: -4px 0; }
  .chapter-indicator { top: 3px; bottom: 3px; }
  .story-layout.is-interactive .chapter-nav { align-self: center; width: min(214px, 100%); }
  .story-chapters { grid-row: 2; }
  .story-layout.is-interactive .story-chapters { min-height: var(--story-panel-height, 16.5rem); align-content: start; }
  .story-chapter { min-height: 0; padding-block: 20px 0; border: 0; scroll-margin-top: calc(var(--header-bottom) + 20px); }
  .story-layout.is-interactive .story-chapter { padding-block: 0; }
  .chapter-inner { padding: 0; }
  .chapter-index { margin-bottom: 12px; font-size: 0.75rem; }
  .story-chapter h3 { font-size: 1.375rem; line-height: 1.22; letter-spacing: -.02em; }
  .story-chapter p:not(.chapter-index) { max-width: 420px; margin-top: 18px; font-size: 1rem; line-height: 1.6; }
  .story-chapter .chapter-extra { margin-top: 14px; font-size: 0.875rem; }
  .social-section { padding-block: 72px; }
  .social-grid { grid-template-columns: 1fr; gap: 28px; }
  .social-copy .eyebrow { margin-bottom: 18px; }
  .social-copy .body-copy { margin-top: 18px; font-size: 1rem; }
  /* Keep social text usable when the pinned story needs a smaller phone. */
  .social-demo { --post-width: max(180px, var(--device-screen-width)); --post-height: calc(var(--post-width) * 2760 / 1350 * .95 / .89333334); display: flex; flex-direction: column; }
  .photo-title { font-size: 1.25rem; line-height: 1.2; }
  .friend-post { --post-author-edge: 11px; }
  .post-body { padding-inline: 16px; }
  .invitation { padding-block: 72px; }
  .invitation-logo { width: 52px; height: 52px; margin-bottom: 22px; }
  .invitation h2 { font-size: 2.125rem; line-height: 1.16; letter-spacing: -.03em; }
  .invitation .eyebrow { margin-bottom: 18px; }
  .invitation .body-copy { margin-top: 18px; font-size: 1rem; }
  .availability { max-width: 280px; }
  .footer { padding-block: 30px 24px; }
  .footer-top { gap: 12px 14px; padding-bottom: 23px; }
  .footer-top p { font-size: 0.75rem; }
  .footer-bottom { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
  .footer-bottom nav { gap: 20px; }
  .signup-dialog { width: min(510px, calc(100% - 24px)); max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px); padding: 28px 22px; border-radius: 24px; overflow-y: auto; overscroll-behavior: contain; }
  .signup-dialog h2 { margin-bottom: 16px; font-size: 1.75rem; line-height: 1.2; letter-spacing: -.8px; }
  .signup-dialog p:not(.eyebrow) { font-size: 1rem; line-height: 1.55; }
  .signup-dialog .eyebrow { margin-bottom: 16px; font-size: 0.75rem; }
  .signup-dialog form { margin-top: 22px; }
  .signup-dialog label, .field { margin-bottom: 16px; font-size: 0.875rem; }
  .signup-dialog input, .field input:not([type="checkbox"]):not([type="radio"]), .field textarea, .field select { font-size: 1rem; min-height: 48px; }
  .dialog-logo { width: 36px; height: 36px; margin-bottom: 18px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 360px) {
  .hero-grid { gap: 28px; }
  .hero-nutrients { gap: 4px; font-size: .625rem; }
  .shell { width: calc(100% - 30px); }
  .header-inner { padding-inline: 8px; gap: 5px; }
  .brand { gap: 6px; }
  .brand span { font-size: 1.125rem; }
  .brand img { width: 28px; height: 28px; }
  .button-small { padding-inline: 10px; gap: 7px; font-size: 0.875rem; }
  .header .button-small { padding-inline: 8px; gap: 10px; font-size: 0.875rem; }
  .header .button-small svg { display: block; }
  .hero-actions { gap: 8px 10px; }
  .hero-actions .button { padding-inline: 12px; gap: 9px; }
  .hero-actions .quiet-link { gap: 7px; }
  .hero-actions .quiet-link svg { width: 14px; height: 14px; }
  [data-hero-layout='week'] .meal-art { margin-left: 55px; }
  .meal-days { margin-left: 55px; }
  .meal-row-labels { width: 55px; }
  .personal-diagram { padding-inline: 15px; }
  .diagram-inputs { gap: 6px; }
  .diagram-source { gap: 6px; }
  .diagram-source svg { width: 18px; height: 18px; }
  .weekly-plan { padding-inline: 7px; }
  .plan-week { gap: 3px; }
  .plan-day { padding-inline: 0; }
  .friend-post { --post-author-edge: 10px; }
  .post-body { padding-inline: 14px; }
  .demo-heading { font-size: 0.8125rem; gap: 8px; }
  .concept-label { padding-inline: 8px; font-size: 0.6875rem; }
}
@media (min-width: 651px) and (max-width: 1000px) and (max-height: 500px) {
  .story-layout.is-interactive .story-stage { grid-template-columns: minmax(0, .7fr) minmax(0, 1fr); gap: 28px; align-items: center; }
  .story-layout.is-interactive .product-sticky { padding-top: 4px; }
  .story-layout.is-interactive .story-chapters { grid-column: 2; grid-row: 1; padding-top: 58px; }
}
@media (max-width: 650px) and (max-height: 650px), (min-width: 651px) and (max-width: 1000px) and (max-height: 500px) {
  .story-layout.is-interactive .chapter-index { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .can-animate [data-reveal] { opacity: 1; transform: none; }
  .connector, .can-animate .connector { stroke-dashoffset: 0; }
  .personal-diagram .diagram-source, .personal-diagram .weekly-plan { border-color: color-mix(in srgb, var(--accent) 50%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 6%, transparent); }
  .personal-diagram .connector { stroke: var(--accent); }
  .friend-post { transform: none; }
}

@media (hover: hover) and (pointer: fine) {
  .header-nav a:hover { color: #ffffff; }
  .button:not(:disabled):not([aria-disabled="true"]):hover svg { transform: translateX(3px); }
  .button-header:not(:disabled):not([aria-disabled="true"]):hover { background: var(--mint-hover); }
  .button-primary:not(:disabled):not([aria-disabled="true"]):hover, .button-green:not(:disabled):not([aria-disabled="true"]):hover, .button-dark:not(:disabled):not([aria-disabled="true"]):hover { background: var(--green-hover); }
  .header.is-light .header-nav a:hover { color: #fff; }
  .quiet-link:hover svg { transform: translateY(3px); }
  .chapter-nav a:hover:not(.is-active) { color: #f1f7ee; }
  .footer a:hover { color: var(--bright); }
  .modal-close:hover { background: var(--surface); }
}

/* Shared form and page states. A card never imposes a fixed text height. */
.brand img, .plan-hub img, .invitation-logo, .dialog-logo { border-radius: 50%; }
.social-demo { width: min(100%, calc(var(--post-width) + 160px)); justify-self: start; }
.demo-heading { gap: 8px; min-height: 32px; padding-inline: 0; font-size: .75rem; white-space: nowrap; }
.concept-label { padding: 4px 7px; font-size: .625rem; }
.friend-post { container-type: inline-size; container-name: social-card; }
.post-social { flex-wrap: wrap; gap: 6px; }
.social-stat-pill { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: var(--social-pill-height); padding: 0 7px; border: 1px solid var(--glass-border); border-radius: var(--radius-pill); color: #ffffffed; background: var(--glass-surface); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); font-size: var(--social-label-size); font-weight: var(--weight-medium); line-height: 1; white-space: nowrap; }
.social-stat-pill > span { display: block; line-height: 1; }
.social-stat-pill svg { width: var(--social-icon-size); height: var(--social-icon-size); flex-shrink: 0; }
.meal-like-count svg { color: var(--social-pink); fill: currentColor; }
.meal-plan-count svg { color: var(--green); stroke-width: 2; }
.post-body .like-count { font-size: inherit; font-weight: inherit; }
@container social-card (max-width: 180px) {
  .post-content { --social-pill-height: 24px; --social-icon-size: 12px; --social-label-size: .625rem; }
  .photo-title { font-size: 1.125rem; letter-spacing: -.025em; }
  .post-social { flex-wrap: nowrap; gap: 4px; }
  .social-stat-pill { padding-inline: 4px; gap: 4px; }
  .photo-shade { background: linear-gradient(180deg, #06110b0a 0%, #06110b0a 20%, #06110b59 32%, #06110bc2 44%, #06110be8 64%, #06110bf5 84%, #06110bfc 100%); }
}
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 32px; padding-top: 26px; border-top: 1px solid var(--line); }
.footer-top { justify-content: flex-start; gap: 24px; padding-bottom: 0; }
.footer-top p { margin: 0; }
.footer .brand { gap: var(--space-3); }
.footer .brand img { width: var(--touch-target); height: var(--touch-target); flex-shrink: 0; }
.footer-brand-copy { display: grid; gap: var(--space-1); text-align: left; }
.footer .footer-wordmark { font-size: 1.5rem; line-height: 1.1; }
.footer .footer-tagline { color: var(--body); font-family: var(--font-body); font-size: .75rem; font-weight: var(--weight-regular); line-height: 1.4; letter-spacing: 0; }
.footer-bottom { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; padding-top: 0; border: 0; text-align: right; }
.footer-legal { align-items: flex-end; text-align: right; }
.footer-bottom nav { justify-content: flex-end; }
.footer-bottom > span { color: var(--body); font-size: 0.6875rem; }
@media (max-width: 850px) { .social-demo { width: 100%; } }
@media (max-width: 650px), (max-width: 1000px) and (max-height: 500px) { .footer-grid { grid-template-columns: 1fr; gap: 24px; } .footer-top { flex-direction: column; justify-content: center; gap: 8px; } .footer-top p { margin: 0; } .footer .footer-wordmark { font-size: 1.375rem; } .footer-bottom { align-items: center; gap: 3px; text-align: center; } .footer-legal { align-items: center; text-align: center; } .footer-bottom nav { justify-content: center; } }
.field textarea { min-height: 128px; resize: vertical; }
.field select { min-height: 48px; }
/* Keep every desktop explanation in view on shorter displays. */
@media (min-width: 651px) and (min-height: 501px) and (max-height: 800px), (min-width: 1001px) and (max-height: 800px) {
  .story-stage { padding-block: 16px; }
  .chapter-inner { padding-block: 14px; }
  .story-chapter h3 { font-size: 1.75rem; }
  .story-chapter p:not(.chapter-index) { font-size: .9375rem; line-height: 1.5; }
}
@media (max-width: 650px), (max-width: 1000px) and (max-height: 500px) {
  .story-chapters { min-height: 16.5rem; }
}
@media (min-width: 651px) and (min-height: 501px) and (max-height: 700px), (min-width: 1001px) and (max-height: 700px) {
  .story-stage { padding-block: 8px; }
  .chapter-inner { padding-block: 8px; }
  .story-chapter h3 { font-size: 1.5rem; }
  .story-chapter p:not(.chapter-index) { max-width: none; margin-top: 10px; font-size: .875rem; line-height: 1.5; }
  .story-chapter .chapter-extra { margin-top: 8px; font-size: .75rem; }
}
@media (prefers-contrast: more) {
  .story-chapter h3 { color: #bbcbb3; }
  .story-chapter p:not(.chapter-index), .story-chapter .chapter-extra { color: #bbcbb3; }
  .chapter-extra svg { color: #aec3a7; }
  .story-chapter.is-active h3 { color: var(--ink); }
  .story-chapter.is-active p:not(.chapter-index), .story-chapter.is-active .chapter-extra { color: var(--body); }
  .story-chapter.is-active .chapter-extra svg { color: var(--accent); }
}
.field input[aria-invalid='true'], .field textarea[aria-invalid='true'], .field select[aria-invalid='true'] { border-color: var(--danger); }
.field-hint { display: block; margin-top: var(--space-2); color: var(--body); font-size: var(--text-caption); font-weight: var(--weight-regular); }
.field-error { color: var(--danger); }
.button:disabled:active, .button[aria-disabled='true']:active { filter: none; }
@media (hover: hover) and (pointer: fine) {
  .button-secondary:not(:disabled):not([aria-disabled='true']):hover, .icon-button:not(:disabled):hover { background: #263c2d; border-color: #ffffff26; }
}
@media (max-width: 650px), (max-width: 1000px) and (max-height: 500px) {
  .content-grid { grid-template-columns: 1fr; }
  .card { padding: var(--space-6); }
  .page-main { padding-block: calc(var(--header-bottom) + 36px) 64px; }
  .page-heading { margin-bottom: var(--space-8); }
}