/* Nunito, served from this site (it used to come from Google Fonts): latin, weights 700 to 900, one variable file. SIL Open Font License.
   "Nunito Fallback" is Arial with Nunito's vertical metrics, so lines keep their height while the font loads. */
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700 900; font-display: swap; src: url("fonts/nunito-v32-latin-700-900.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"); ascent-override: 101.1%; descent-override: 35.3%; line-gap-override: 0%; size-adjust: 102%; }

/* EasyPantry website design system (October 20, 2026).
   Matches the marketing made since the site: the 2.0 App Store slides, the App Store banner and event card,
   the v9 Meta ads and the press kit. Design only: no page words, images or links live here.
   Light is the default; dark follows the system setting (or data-theme="dark" on <html> for testing).
   `:root:root` outranks the older design-system token files, which the homepage runtime loads after this one. */

:root:root {
  color-scheme: light;

  /* ---------- Brand blue (App Store slides, banner, event card) ---------- */
  --ep-blue-50:  #F5F8FF;
  --ep-blue-100: #EEF3FF;   /* pale slide background */
  --ep-blue-150: #E3ECFF;
  --ep-blue-200: #CFDDFE;
  --ep-blue-300: #5AA8FF;   /* gradient highlight */
  --ep-blue-400: #2E74F6;   /* event card disc */
  --ep-blue-500: #1767F1;   /* EasyPantry blue */
  --ep-blue-600: #0F5BE8;   /* highlight block, event card base */
  --ep-blue-700: #0B49C4;   /* pressed */
  --ep-blue-800: #0A3790;
  --ep-grad-blue: radial-gradient(120% 70% at 30% 18%, #5AA8FF 0%, #2B7BFF 38%, #1466FA 100%);   /* the slides, exactly */
  /* The same blue for the web. The slides' light corner is kept small and in the top corner, away from the words,
     so white body text measures 4.5:1 or more everywhere on the stage (tools/contrast.mjs) */
  --ep-grad-hero: radial-gradient(clamp(300px, 34vw, 620px) clamp(200px, 22vw, 360px) at 0% 0%, rgba(90,168,255,0.78) 0%, rgba(90,168,255,0) 100%),
                  radial-gradient(60% 55% at 100% 100%, rgba(11,73,196,0.55) 0%, rgba(11,73,196,0) 70%),
                  linear-gradient(180deg, #1767F1 0%, #1466FA 50%, #0F5BE8 100%);
  /* Dark mode keeps the brand blue on the big stages, one step deeper (the slide gradient taken down to #0B3FB0) */
  --ep-grad-hero-deep: radial-gradient(clamp(300px, 34vw, 620px) clamp(200px, 22vw, 360px) at 0% 0%, rgba(90,168,255,0.42) 0%, rgba(90,168,255,0) 100%),
                       radial-gradient(60% 55% at 100% 100%, rgba(5,30,110,0.55) 0%, rgba(5,30,110,0) 70%),
                       linear-gradient(180deg, #1466FA 0%, #0F55DA 48%, #0B3FB0 100%);
  --ep-grad-night-stage: radial-gradient(70% 60% at 50% 100%, rgba(23,103,241,0.50) 0%, rgba(23,103,241,0) 70%), linear-gradient(170deg, #1B2F5C 0%, #0B1226 60%, #07090F 100%);
  --ep-link-strong: #0B57D0; /* blue words on pale fills (5.6:1 on surface-2) */
  --ep-btn: #1767F1;        /* button fill in both modes: white text 4.95:1 */
  --ep-btn-hover: #0F5BE8;
  --ep-grad-blue-soft: radial-gradient(90% 80% at 50% 0%, #FFFFFF 0%, #EEF3FF 55%, #E3ECFF 100%);
  --ep-grad-night: linear-gradient(170deg, #1B2F5C 0%, #0B1226 60%, #07090F 100%);

  /* ---------- Ink ---------- */
  --ep-ink:   #0F1E3D;      /* headline navy from the slides */
  --ep-ink-2: #4F5A70;      /* body (6.9:1 on white) */
  --ep-ink-3: #636D82;      /* small print (5.2:1 on white, 4.8:1 on the canvas) */
  --ep-on-blue: #FFFFFF;
  --ep-on-blue-2: rgba(255,255,255,0.92);

  /* ---------- Surfaces ---------- */
  --ep-canvas:    #F5F8FF;
  --ep-canvas-2:  #EEF3FF;
  --ep-surface:   #FFFFFF;
  --ep-surface-2: #F3F6FC;
  --ep-surface-3: #E8EDF7;
  --ep-glass:     rgba(255,255,255,0.74);
  --ep-line:      rgba(15,30,61,0.09);
  --ep-line-2:    rgba(15,30,61,0.14);

  /* ---------- Status colors (the app's Kitchen tiles) ---------- */
  --ep-in:   #34C759;  --ep-in-ink:   #1B7A38;  --ep-in-soft:   #E3F6E8;   /* In Stock */
  --ep-buy:  #F4415F;  --ep-buy-ink:  #C21F3E;  --ep-buy-soft:  #FDE3E8;   /* Need to Buy */
  --ep-exp:  #FFC800;  --ep-exp-ink:  #8A6400;  --ep-exp-soft:  #FFF4CC;   /* Expiring Soon */
  --ep-all:  #3E63E8;  --ep-all-ink:  #2D4FD0;  --ep-all-soft:  #E6ECFD;   /* All Ingredients */
  --ep-grad-in:  linear-gradient(160deg, #6FCB80 0%, #3EA854 100%);
  --ep-grad-buy: linear-gradient(160deg, #F0625C 0%, #DE3A41 100%);
  --ep-grad-exp: linear-gradient(160deg, #FFD34E 0%, #F2B90D 100%);
  --ep-grad-all: linear-gradient(160deg, #5B86F5 0%, #2F5BE0 100%);
  /* Event-card chip colors and storage places */
  --ep-chip-in: #30C463; --ep-chip-exp: #FFC928; --ep-chip-buy: #FF4D3D; --ep-chip-freeze: #4D65BB;
  --ep-pantry: #B06E28; --ep-fridge: #00B8E0; --ep-freezer: #3478F6; --ep-countertop: #F0930F;
  --ep-pantry-ink: #8A5214; --ep-fridge-ink: #007A96; --ep-countertop-ink: #A35F00; --ep-freezer-ink: #2D5FD8;   /* same hues, AA for text */

  /* ---------- Type ---------- */
  --ep-font-display: "Nunito", "Nunito Fallback", "SF Pro Rounded", ui-rounded, system-ui, sans-serif;   /* marketing voice */
  --ep-font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif; /* the app's voice */
  --ep-fs-display: clamp(40px, 0.6rem + 6.4vw, 96px);
  --ep-fs-h2:      clamp(34px, 0.9rem + 3.3vw, 60px);
  --ep-fs-h3:      clamp(22px, 1rem + 0.6vw, 26px);
  --ep-fs-lead:    clamp(18px, 1rem + 0.35vw, 21px);
  --ep-fs-body:    17px;
  --ep-fs-small:   15px;
  --ep-fs-micro:   13px;
  --ep-lh-display: 1.04;
  --ep-lh-h2: 1.06;
  --ep-lh-body: 1.6;
  --ep-track-display: -0.03em;
  --ep-track-h2: -0.025em;

  /* ---------- Space (4 pt grid) ---------- */
  --ep-s1: 4px;  --ep-s2: 8px;  --ep-s3: 12px; --ep-s4: 16px; --ep-s5: 20px; --ep-s6: 24px;
  --ep-s7: 32px; --ep-s8: 40px; --ep-s9: 48px; --ep-s10: 64px; --ep-s11: 80px; --ep-s12: 96px; --ep-s13: 128px;
  --ep-gutter: clamp(20px, 4vw, 40px);
  --ep-max: 1200px;
  --ep-section: clamp(88px, 4rem + 5vw, 144px);

  /* ---------- Radii ---------- */
  --ep-r-xs: 10px; --ep-r-sm: 14px; --ep-r-md: 20px; --ep-r-lg: 28px; --ep-r-xl: 40px; --ep-r-2xl: 48px; --ep-r-pill: 999px;

  /* ---------- Shadows (soft, blue-tinted, two steps) ---------- */
  --ep-sh-1: 0 1px 2px rgba(15,30,61,0.06), 0 3px 10px rgba(15,30,61,0.05);
  --ep-sh-2: 0 2px 6px rgba(15,30,61,0.05), 0 14px 34px rgba(10,30,80,0.10);
  --ep-sh-3: 0 4px 12px rgba(5,25,70,0.10), 0 30px 70px rgba(5,25,70,0.22);
  --ep-sh-blue: 0 2px 4px rgba(15,91,232,0.20), 0 10px 24px rgba(15,91,232,0.32);
  --ep-sh-device: drop-shadow(0 6px 10px rgba(5,25,70,0.10)) drop-shadow(0 28px 34px rgba(5,25,70,0.22));
  --ep-sh-device-on-blue: drop-shadow(0 8px 14px rgba(3,18,60,0.20)) drop-shadow(0 34px 44px rgba(3,18,60,0.34));

  /* ---------- Motion ---------- */
  --ep-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ep-ease-spring: cubic-bezier(0.34, 1.3, 0.5, 1);
  --ep-dur-1: 0.15s; --ep-dur-2: 0.3s; --ep-dur-3: 0.6s;

  /* ---------- Decorative glyphs (event card chips and sparkles), CSS only ---------- */
  --ep-glyph-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ep-glyph-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 6.5L17.5 17.5M17.5 6.5L6.5 17.5' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --ep-glyph-bang: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5.4V13.2' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='18.3' r='2.15' fill='%23fff'/%3E%3C/svg%3E");
  --ep-glyph-flake: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12L12 2.7M12 12L20.05 7.35M12 12L20.05 16.65M12 12L12 21.3M12 12L3.95 16.65M12 12L3.95 7.35'/%3E%3Cpath d='M10.28 4.62L12 6L13.72 4.62M17.53 6.82L17.2 9L19.25 9.8M19.25 14.2L17.2 15L17.53 17.18M13.72 19.38L12 18L10.28 19.38M6.47 17.18L6.8 15L4.75 14.2M4.75 9.8L6.8 9L6.47 6.82'/%3E%3C/g%3E%3C/svg%3E");
  --ep-glyph-spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0C11 7 13 9 20 10C13 11 11 13 10 20C9 13 7 11 0 10C7 9 9 7 10 0Z' fill='%23fff'/%3E%3C/svg%3E");
  --ep-glyph-spark-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0C11 7 13 9 20 10C13 11 11 13 10 20C9 13 7 11 0 10C7 9 9 7 10 0Z' fill='%23FFC928'/%3E%3C/svg%3E");

  /* ---------- The older design-system names, mapped onto the new tokens ----------
     (the homepage's cards and the sections not yet redesigned use these) */
  --bg-app: var(--ep-canvas);
  --surface-card: var(--ep-surface);
  --surface-inset: var(--ep-surface-3);
  --surface-glass: var(--ep-glass);
  --text-primary: var(--ep-ink);
  --text-secondary: var(--ep-ink-2);
  --text-tertiary: var(--ep-ink-3);
  --tint-accent: var(--ep-blue-500);
  --text-link: var(--ep-blue-500);
  --separator: var(--ep-line);
  --stock-in-soft: var(--ep-in-soft);
  --stock-low-soft: var(--ep-exp-soft);
  --stock-out-soft: var(--ep-buy-soft);
  --shadow-card: var(--ep-sh-2);
  --shadow-pill: var(--ep-sh-1);
}

/* ---------- Dark (the slides' "night" look) ---------- */
@media (prefers-color-scheme: dark) {
  :root:root:not([data-theme="light"]) {
    color-scheme: dark;
    --ep-ink:   #F3F6FD;
    --ep-ink-2: #AEB8CC;      /* 9.4:1 on the dark canvas */
    --ep-ink-3: #8B96AD;      /* 6.3:1 */
    --ep-canvas:    #070B16;
    --ep-canvas-2:  #0B1226;
    --ep-surface:   #111A2E;
    --ep-surface-2: #172238;
    --ep-surface-3: #1F2B44;
    --ep-glass:     rgba(9,14,30,0.86);
    --ep-line:      rgba(255,255,255,0.08);
    --ep-line-2:    rgba(255,255,255,0.14);
    --ep-blue-500: #3D86FF;   /* brighter on dark for links and buttons (4.9:1 on the canvas) */
    --ep-blue-150: #14254A;
    --ep-blue-100: #0E1A36;
    --ep-in-ink: #5FDC82; --ep-buy-ink: #FF7A90; --ep-exp-ink: #FFD54A; --ep-all-ink: #8EA7FF;
    --ep-in-soft: rgba(52,199,89,0.16); --ep-buy-soft: rgba(244,65,95,0.18); --ep-exp-soft: rgba(255,200,0,0.16); --ep-all-soft: rgba(62,99,232,0.22);
    --ep-pantry-ink: #E0A15C; --ep-fridge-ink: #4FD6F2; --ep-countertop-ink: #FFB44D; --ep-freezer-ink: #5B95FF;
    --ep-grad-blue-soft: radial-gradient(90% 80% at 50% 0%, #14254A 0%, #0B1226 60%, #070B16 100%);
    --ep-sh-1: 0 1px 2px rgba(0,0,0,0.40), 0 3px 10px rgba(0,0,0,0.30);
    --ep-sh-2: 0 0 0 1px rgba(255,255,255,0.06), 0 14px 34px rgba(0,0,0,0.45);
    --ep-sh-3: 0 0 0 1px rgba(255,255,255,0.06), 0 30px 70px rgba(0,0,0,0.55);
    --ep-sh-blue: 0 2px 4px rgba(0,0,0,0.3), 0 10px 26px rgba(23,103,241,0.45);
    --ep-sh-device: drop-shadow(0 6px 10px rgba(0,0,0,0.35)) drop-shadow(0 28px 34px rgba(0,0,0,0.5));
    --tint-accent: #3D86FF; --text-link: #3D86FF;
    --ep-link-strong: #8FB8FF;
  }
}
:root:root[data-theme="dark"] {
  color-scheme: dark;
  --ep-ink: #F3F6FD; --ep-ink-2: #AEB8CC; --ep-ink-3: #8B96AD;
  --ep-canvas: #070B16; --ep-canvas-2: #0B1226; --ep-surface: #111A2E; --ep-surface-2: #172238; --ep-surface-3: #1F2B44;
  --ep-glass: rgba(9,14,30,0.86); --ep-line: rgba(255,255,255,0.08); --ep-line-2: rgba(255,255,255,0.14);
  --ep-blue-500: #3D86FF; --ep-blue-150: #14254A; --ep-blue-100: #0E1A36;
  --ep-in-ink: #5FDC82; --ep-buy-ink: #FF7A90; --ep-exp-ink: #FFD54A; --ep-all-ink: #8EA7FF;
  --ep-in-soft: rgba(52,199,89,0.16); --ep-buy-soft: rgba(244,65,95,0.18); --ep-exp-soft: rgba(255,200,0,0.16); --ep-all-soft: rgba(62,99,232,0.22);
  --ep-pantry-ink: #E0A15C; --ep-fridge-ink: #4FD6F2; --ep-countertop-ink: #FFB44D; --ep-freezer-ink: #5B95FF;
  --ep-grad-blue-soft: radial-gradient(90% 80% at 50% 0%, #14254A 0%, #0B1226 60%, #070B16 100%);
  --ep-sh-1: 0 1px 2px rgba(0,0,0,0.40), 0 3px 10px rgba(0,0,0,0.30);
  --ep-sh-2: 0 0 0 1px rgba(255,255,255,0.06), 0 14px 34px rgba(0,0,0,0.45);
  --ep-sh-3: 0 0 0 1px rgba(255,255,255,0.06), 0 30px 70px rgba(0,0,0,0.55);
  --ep-sh-blue: 0 2px 4px rgba(0,0,0,0.3), 0 10px 26px rgba(23,103,241,0.45);
  --ep-sh-device: drop-shadow(0 6px 10px rgba(0,0,0,0.35)) drop-shadow(0 28px 34px rgba(0,0,0,0.5));
  --tint-accent: #3D86FF; --text-link: #3D86FF;
  --ep-link-strong: #8FB8FF;
}

/* =====================================================================================
   Shared components (every page)
   ===================================================================================== */
html { -webkit-text-size-adjust: 100%; }
/* Anchor jumps and keyboard focus land below the sticky nav (WCAG 2.4.11) */
html { scroll-padding-top: 84px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--ep-canvas); color: var(--ep-ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.ep-page { background: var(--ep-canvas); color: var(--ep-ink); font-family: var(--ep-font-text); overflow-x: clip; min-height: 100%; }
.ep-page a { color: var(--ep-blue-500); text-decoration: none; }
.ep-page a:hover { color: var(--ep-blue-700); }
.ep-page :where(p, li, td, dd) a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.ep-page :where(p, li, td, dd) a:hover { text-decoration-color: currentColor; }
@media (prefers-color-scheme: dark) { :where(:root:not([data-theme="light"])) .ep-page a:hover { color: #8FB8FF; } }
:where(:root[data-theme="dark"]) .ep-page a:hover { color: #8FB8FF; }
.ep-page :where(a, summary, button):focus-visible { outline: 3px solid var(--ep-blue-300); outline-offset: 3px; border-radius: var(--ep-r-sm); }
.ep-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ep-page a.ep-skip { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 12px 18px; border-radius: 999px; background: var(--ep-btn); color: #fff;
  font-family: var(--ep-font-display); font-weight: 800; font-size: 16px; text-decoration: none; box-shadow: var(--ep-sh-blue); }
.ep-page a.ep-skip:focus { top: 12px; color: #fff; }
/* Even line breaks: no single word left alone at the end of a paragraph or headline */
.ep-page :where(p, li, figcaption, dd, blockquote) { text-wrap: pretty; }
.ep-page :where(h1, h2, h3, summary) { text-wrap: balance; }
.ep-wrap { width: 100%; max-width: calc(var(--ep-max) + 2 * var(--ep-gutter)); margin: 0 auto; padding: 0 var(--ep-gutter); box-sizing: border-box; }

/* ---------- Nav: glass bar, the blue lockup (red icon always on blue) ---------- */
.ep-nav { position: sticky; top: 0; z-index: 50; background: var(--ep-glass);
  -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 1px solid var(--ep-line); }
.ep-nav__in { max-width: calc(var(--ep-max) + 2 * var(--ep-gutter)); margin: 0 auto; padding: 9px var(--ep-gutter); box-sizing: border-box;
  display: flex; align-items: center; gap: 24px; min-height: 62px; }
.ep-page a.ep-lockup { flex: none; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; box-sizing: border-box; padding: 6px 15px 6px 6px; border-radius: 14px;
  background: var(--ep-blue-600); color: #fff; box-shadow: var(--ep-sh-blue); transition: transform var(--ep-dur-1) var(--ep-ease); }
.ep-page a.ep-lockup:hover { color: #fff; transform: translateY(-1px); }
.ep-lockup img { display: block; width: 32px; height: 32px; border-radius: 9px; }
.ep-lockup span { font-family: var(--ep-font-display); font-weight: 900; font-size: 18px; letter-spacing: -0.02em; line-height: 1; }
.ep-nav__links { display: flex; gap: 4px; margin-left: auto; }
.ep-page .ep-nav__links a { min-width: 44px; box-sizing: border-box; text-align: center; }   /* short links like FAQ still get a 44 pt target */
.ep-page .ep-nav__links a { white-space: nowrap; color: var(--ep-ink-2); font-family: var(--ep-font-display); font-weight: 800; font-size: 15px; line-height: 20px;
  padding: 12px 12px; border-radius: var(--ep-r-pill); transition: background var(--ep-dur-1) var(--ep-ease), color var(--ep-dur-1) var(--ep-ease); }
.ep-page .ep-nav__links a:hover, .ep-page .ep-nav__links a[aria-current="page"] { color: var(--ep-ink); background: var(--ep-surface-2); }
.ep-page .ep-nav__links a[aria-current="page"] { box-shadow: inset 0 0 0 1px var(--ep-line); }
.ep-nav .ep-btn { margin-left: 8px; flex: none; }
/* iPad portrait and small laptops: every link stays, a little tighter (the live site shows them down to 761 px) */
@media (max-width: 1000px) {
  .ep-nav__in { gap: 14px; }
  .ep-page .ep-nav__links a { padding: 12px 8px; font-size: 14.5px; }
  .ep-nav .ep-btn { margin-left: 4px; }
  .ep-page .ep-nav a.ep-btn--sm { padding: 0 16px; font-size: 14.5px; }
}
@media (max-width: 860px) {
  .ep-nav__in { gap: 10px; padding-left: 20px; padding-right: 20px; }
  .ep-page a.ep-lockup { padding-right: 12px; gap: 8px; }
  .ep-lockup span { font-size: 16.5px; }
  .ep-page .ep-nav__links a { padding: 12px 6px; font-size: 14px; }
  .ep-nav__links { gap: 2px; }
  .ep-page .ep-nav a.ep-btn--sm { padding: 0 14px; font-size: 14px; }
}
@media (max-width: 800px) {
  .ep-page .ep-nav__links a { padding: 12px 5px; font-size: 13.5px; }
  .ep-page .ep-nav a.ep-btn--sm { padding: 0 13px; font-size: 13.5px; }
}
@media (max-width: 760px) { .ep-nav__links { display: none; } .ep-nav .ep-btn { margin-left: auto; } }
/* The legal pages show their links down to 681 px, as they do today */
@media (min-width: 681px) and (max-width: 760px) { .ep-nav--legal .ep-nav__links { display: flex; } }
@media (max-width: 680px) { .ep-nav--legal .ep-nav__links { display: none; } }
@media (max-width: 600px) { .ep-nav__in { min-height: 58px; padding-top: 8px; padding-bottom: 8px; } }

/* ---------- Buttons ---------- */
.ep-page a.ep-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 56px; padding: 0 30px;
  border-radius: var(--ep-r-pill); font-family: var(--ep-font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.005em;
  white-space: nowrap; box-sizing: border-box; text-decoration: none;
  transition: transform var(--ep-dur-1) var(--ep-ease), box-shadow var(--ep-dur-2) var(--ep-ease), background var(--ep-dur-2) var(--ep-ease), color var(--ep-dur-2) var(--ep-ease); }
.ep-page a.ep-btn:active { transform: scale(0.97); }
.ep-page a.ep-btn--primary { background: var(--ep-btn); color: #fff; box-shadow: var(--ep-sh-blue); }
.ep-page a.ep-btn--primary:hover { background: var(--ep-btn-hover); color: #fff; transform: translateY(-1px); }
.ep-page a.ep-btn--quiet { background: var(--ep-surface-2); color: var(--ep-ink); box-shadow: inset 0 0 0 1px var(--ep-line); }
.ep-page a.ep-btn--quiet:hover { color: var(--ep-ink); background: var(--ep-surface-3); transform: translateY(-1px); }
.ep-page a.ep-btn--white { background: #fff; color: var(--ep-blue-600); box-shadow: 0 2px 4px rgba(3,18,60,0.12), 0 12px 28px rgba(3,18,60,0.26); }
.ep-page a.ep-btn--white:hover { color: var(--ep-blue-700); background: #fff; transform: translateY(-1px); }
/* Glass on blue: a dark tint (not white) so the white words read at 4.5:1+ on every part of the stage */
.ep-page a.ep-btn--glass { background: rgba(6,30,90,0.24); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.55);
  -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); }
.ep-page a.ep-btn--glass:hover { background: rgba(6,30,90,0.34); color: #fff; transform: translateY(-1px); }
.ep-page a.ep-btn--sm { height: 44px; padding: 0 20px; font-size: 15.5px; }
.lbl-short { display: none; }
@media (max-width: 600px) { .lbl-long { display: none; } .lbl-short { display: inline; } }
/* A plain link with a chevron (drawn in CSS) */
.ep-page a.ep-arrow { display: inline-block; padding: 12px 0; font-family: var(--ep-font-display); font-weight: 800; text-decoration: none; line-height: 1.25; }
.ep-page a.ep-arrow::after { content: ""; display: inline-block; vertical-align: 0.1em; width: 7px; height: 7px; border: solid currentColor; border-width: 2.4px 2.4px 0 0; transform: rotate(45deg); margin-left: 8px; transition: transform var(--ep-dur-1) var(--ep-ease); }
.ep-page a.ep-arrow:hover::after { transform: translateX(3px) rotate(45deg); }

/* ---------- Kicker: the slides' white chat bubble ---------- */
.ep-kicker { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 10px 19px 11px; border-radius: 22px;
  background: #fff; color: #0F1E3D; font-family: var(--ep-font-display); font-weight: 800; font-size: 15.5px; line-height: 1.2;
  box-shadow: 0 12px 30px rgba(10,30,80,0.18); }
.ep-kicker::after { content: ""; position: absolute; left: 30px; bottom: -9px; border: 10px solid transparent; border-top-color: #fff; border-bottom: 0; border-left: 0; }
.ep-kicker__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--ep-in); box-shadow: 0 0 0 4px rgba(52,199,89,0.18); }

/* ---------- Eyebrow: colored dot + label (readable ink, the color is the dot) ---------- */
.ep-eyebrow { display: inline-flex; align-items: center; gap: 9px; min-height: 34px; padding: 0 14px 0 11px; border-radius: var(--ep-r-pill); box-sizing: border-box;
  background: var(--ep-surface); box-shadow: var(--ep-sh-1), inset 0 0 0 1px var(--ep-line); font-family: var(--ep-font-display); font-weight: 800; font-size: 15px; color: var(--ep-ink); }
.ep-eyebrow::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ep-dot, var(--ep-blue-500)); }
.ep-dot-blue { --ep-dot: var(--ep-all); } .ep-dot-green { --ep-dot: var(--ep-in); } .ep-dot-red { --ep-dot: var(--ep-buy); }
.ep-dot-yellow { --ep-dot: var(--ep-exp); } .ep-dot-cyan { --ep-dot: var(--ep-fridge); } .ep-dot-orange { --ep-dot: var(--ep-countertop); }
.ep-dot-brown { --ep-dot: var(--ep-pantry); } .ep-dot-indigo { --ep-dot: var(--ep-freezer); } .ep-dot-accent { --ep-dot: var(--ep-blue-500); }
/* Small tags: Pro, Best value, In development */
.ep-pro { display: inline-flex; align-items: center; height: 22px; margin-left: 8px; padding: 0 9px; border-radius: var(--ep-r-pill);
  background: var(--ep-blue-600); color: #fff; font-family: var(--ep-font-display); font-weight: 900; font-size: 12.5px; letter-spacing: 0.01em; }
.ep-badge { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: var(--ep-r-pill); background: var(--ep-surface-2);
  color: var(--ep-ink-2); font-family: var(--ep-font-display); font-weight: 800; font-size: 13px; box-shadow: inset 0 0 0 1px var(--ep-line); }
.ep-badge--blue { background: var(--ep-blue-600); color: #fff; box-shadow: none; }

/* ---------- Headlines + the highlight block (same words, style only) ---------- */
.ep-display, .ep-h2 { font-family: var(--ep-font-display); font-weight: 900; color: var(--ep-ink); text-wrap: balance; margin: 0; }
.ep-display { font-size: var(--ep-fs-display); line-height: var(--ep-lh-display); letter-spacing: var(--ep-track-display); }
.ep-h2 { font-size: var(--ep-fs-h2); line-height: var(--ep-lh-h2); letter-spacing: var(--ep-track-h2); }
.ep-hl { display: inline-block; max-width: 100%; box-sizing: border-box; padding: 0.02em 0.26em 0.07em; margin-top: 0.12em; line-height: 1.02;
  border-radius: 0.26em; background: var(--ep-blue-600); color: #fff; text-wrap: balance;
  box-shadow: 0 0.05em 0.1em rgba(5,25,70,0.14), 0 0.18em 0.45em rgba(15,91,232,0.30); }
.ep-on-blue .ep-hl, .ep-on-night .ep-hl { background: #fff; color: var(--ep-blue-600);
  box-shadow: 0 0.05em 0.1em rgba(5,25,70,0.16), 0 0.18em 0.45em rgba(5,25,70,0.30); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ep-hl { background: #fff; color: #0F5BE8; box-shadow: 0 0.18em 0.5em rgba(0,0,0,0.45); } }
:root[data-theme="dark"] .ep-hl { background: #fff; color: #0F5BE8; box-shadow: 0 0.18em 0.5em rgba(0,0,0,0.45); }
/* Like the slides: the plain words on line one, the highlight block on line two */
.ep-hl-own-line .ep-hl, .ep-h2 .ep-hl { display: block; width: fit-content; margin-top: 0.14em; }
.ep-lead { margin: 0; font-size: var(--ep-fs-lead); line-height: var(--ep-lh-body); color: var(--ep-ink-2); text-wrap: pretty; max-width: 36em; }
.ep-lead + .ep-lead { margin-top: 0.8em; }
/* Words on a blue or night stage */
.ep-on-blue, .ep-on-night { color: #fff; }
.ep-on-blue .ep-display, .ep-on-blue .ep-h2, .ep-on-night .ep-display, .ep-on-night .ep-h2 { color: #fff; }
.ep-page .ep-on-blue :where(p, li) a, .ep-page .ep-on-night :where(p, li) a { color: #fff; text-decoration-color: rgba(255,255,255,0.6); }
.ep-page .ep-on-blue :where(p, li) a:hover, .ep-page .ep-on-night :where(p, li) a:hover { color: #fff; text-decoration-color: #fff; }

/* ---------- Cards ---------- */
.ep-card { background: var(--ep-surface); border-radius: var(--ep-r-lg); box-shadow: var(--ep-sh-2); }
/* The app's storage cards (Pantry, Fridge, Freezer, Countertop) print their names in the storage color:
   inside this wrapper they use the deeper versions of the same hues so the words pass AA on white and on navy */
.ep-legible-storage { --storage-pantry: var(--ep-pantry-ink); --storage-fridge: var(--ep-fridge-ink); --storage-freezer: var(--ep-freezer-ink); --storage-countertop: var(--ep-countertop-ink); }

/* ---------- The blue stage (App Store slide 1 + the 2.0 event card): gradient, soft disc, sparkles ---------- */
.ep-stage { position: relative; isolation: isolate; background: var(--ep-grad-hero); color: #fff; }
.ep-stage__fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ep-stage { background: var(--ep-grad-hero-deep); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); } }
:root[data-theme="dark"] .ep-stage { background: var(--ep-grad-hero-deep); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }

/* ---------- Event-card chips and sparkles (decorative, aria-hidden, no words) ---------- */
.ep-chip { position: absolute; width: var(--sz, 64px); height: auto; aspect-ratio: 1; border-radius: 50%; z-index: 3; pointer-events: none;
  background: var(--ep-chip-c, var(--ep-chip-in)) var(--ep-chip-g, var(--ep-glyph-check)) center / 52% no-repeat;
  box-shadow: 0 4px 10px rgba(3,18,60,0.14), 0 16px 34px rgba(3,18,60,0.24); }
.ep-chip--in { --ep-chip-c: var(--ep-chip-in); --ep-chip-g: var(--ep-glyph-check); }
.ep-chip--buy { --ep-chip-c: var(--ep-chip-buy); --ep-chip-g: var(--ep-glyph-x); }
.ep-chip--exp { --ep-chip-c: var(--ep-chip-exp); --ep-chip-g: var(--ep-glyph-bang); }
.ep-chip--freeze { --ep-chip-c: var(--ep-chip-freeze); --ep-chip-g: var(--ep-glyph-flake); background-size: 58%; }
.ep-spark { position: absolute; width: var(--sz, 22px); height: var(--sz, 22px); pointer-events: none; z-index: 1;
  background: var(--ep-glyph-spark) center / contain no-repeat; opacity: var(--op, 0.85); }
.ep-spark--gold { background-image: var(--ep-glyph-spark-gold); --op: 1; }

/* ---------- Pricing cards ---------- */
.ep-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.ep-plan { position: relative; background: var(--ep-surface); border-radius: var(--ep-r-lg); box-shadow: var(--ep-sh-2); padding: 34px 32px 32px; box-sizing: border-box; }
.ep-plan--pro { box-shadow: 0 0 0 2px var(--ep-blue-500), 0 22px 50px -12px rgba(15,91,232,0.38); }
.ep-plan--soon { background: var(--ep-surface-2); box-shadow: inset 0 0 0 1px var(--ep-line); }
.ep-plan__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ep-plan__name { font-family: var(--ep-font-display); font-weight: 900; font-size: 23px; letter-spacing: -0.01em; color: var(--ep-ink); }
.ep-plan__price { margin-top: 12px; font-family: var(--ep-font-display); font-weight: 900; font-size: 46px; line-height: 1.05; letter-spacing: -0.03em; color: var(--ep-ink); }
.ep-plan__price--soon { color: var(--ep-ink-3); }
.ep-plan__per { font-family: var(--ep-font-text); font-size: 18px; font-weight: 500; letter-spacing: 0; color: var(--ep-ink-2); }
.ep-plan__sub { margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--ep-ink-2); }
.ep-plan__sub--gap { margin-top: 12px; }
.ep-trial { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 8px 14px; border-radius: var(--ep-r-pill);
  background: var(--ep-in-soft); color: var(--ep-in-ink); font-family: var(--ep-font-display); font-weight: 800; font-size: 14.5px; }
.ep-trial .f7-icons { font-size: 16px; }
.ep-plan__list { margin: 26px 0 0; padding: 22px 0 0; list-style: none; display: flex; flex-direction: column; gap: 13px; font-size: 17px; line-height: 1.4; border-top: 1px solid var(--ep-line); }
.ep-plan__list li { display: flex; gap: 12px; align-items: flex-start; color: var(--ep-ink); }
.ep-plan__list .f7-icons { flex: none; font-size: 18px; margin-top: 1px; font-weight: 700; }
.ep-plan__svg { flex: none; color: var(--ep-ink-3); margin-top: 2px; }
.ep-plan__fine { margin-top: 18px; font-size: 13px; line-height: 1.5; color: var(--ep-ink-3); }
.ep-page a.ep-plan__btn { display: flex; width: 100%; margin-top: 26px; height: 54px; font-size: 17px; }
@media (max-width: 900px) { .ep-plans { grid-template-columns: minmax(0, 1fr); max-width: 540px; margin-left: auto; margin-right: auto; } }
@media (max-width: 600px) { .ep-plan { padding: 28px 22px 24px; } .ep-plan__price { font-size: 40px; } }

/* ---------- FAQ ---------- */
.ep-faq { display: flex; flex-direction: column; gap: 12px; }
.ep-faq details { background: var(--ep-surface); border-radius: 24px; box-shadow: var(--ep-sh-1), inset 0 0 0 1px var(--ep-line);
  transition: box-shadow var(--ep-dur-2) var(--ep-ease); }
.ep-faq details[open] { box-shadow: var(--ep-sh-2), inset 0 0 0 1px var(--ep-line); }
.ep-faq summary { display: flex; align-items: center; gap: 16px; padding: 22px 22px 22px 26px; list-style: none; cursor: pointer; border-radius: 24px;
  font-family: var(--ep-font-display); font-weight: 800; font-size: 19px; line-height: 1.35; color: var(--ep-ink); }
.ep-faq summary::-webkit-details-marker { display: none; }
.ep-faq__q { flex: 1; }
.ep-faq__plus { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--ep-blue-100); color: var(--ep-blue-500);
  transition: background var(--ep-dur-2) var(--ep-ease), color var(--ep-dur-2) var(--ep-ease); }
.ep-faq__plus .f7-icons { font-size: 17px; font-weight: 700; transition: transform var(--ep-dur-2) var(--ep-ease-spring); }
.ep-faq details[open] .ep-faq__plus { background: var(--ep-blue-600); color: #fff; }
.ep-faq details[open] .ep-faq__plus .f7-icons, .ep-faq details[open] .faq-plus { transform: rotate(45deg); }
.ep-faq summary:hover .ep-faq__plus { background: var(--ep-blue-150); }
.ep-faq details[open] summary:hover .ep-faq__plus { background: var(--ep-blue-700); }
.ep-faq details > p { margin: 0; padding: 0 26px 24px; font-size: 17px; line-height: 1.6; color: var(--ep-ink-2); max-width: 44em; }
@media (max-width: 600px) {
  .ep-faq summary { font-size: 17.5px; padding: 18px 16px 18px 20px; gap: 12px; }
  .ep-faq details > p { padding: 0 20px 20px; font-size: 16.5px; }
}

/* ---------- Closing call to action: the blue stage, so the red icon sits on blue ---------- */
.ep-cta { position: relative; isolation: isolate; border-radius: var(--ep-r-2xl); background: var(--ep-grad-hero); color: #fff; text-align: center;
  padding: clamp(56px, 3rem + 3vw, 96px) clamp(22px, 4vw, 64px); box-shadow: 0 34px 70px -30px rgba(15,91,232,0.6); }
.ep-cta__fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.ep-cta__disc { position: absolute; left: 50%; top: 66%; width: min(1040px, 150%); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: rgba(120,180,255,0.12); }
.ep-cta__icon { display: block; width: 76px; height: 76px; margin: 0 auto; border-radius: 19px; box-shadow: 0 2px 4px rgba(3,18,60,0.16), 0 14px 30px rgba(3,18,60,0.30); }
.ep-cta h2, .ep-cta__h2 { margin: 28px auto 0; max-width: 15em; font-family: var(--ep-font-display); font-weight: 900; color: #fff;
  font-size: clamp(34px, 0.9rem + 3.4vw, 60px); line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }
.ep-cta .ep-hl { display: block; width: fit-content; margin: 0.12em auto 0; }
.ep-cta__lead, .ep-cta > p:not([class]) { max-width: 34em; margin: 20px auto 0; font-size: var(--ep-fs-lead); line-height: 1.55; color: #fff; text-wrap: pretty; }
.ep-page .ep-cta a.ep-btn, .ep-page .ep-cta__btn { margin-top: 32px; }
.ep-cta__foot { margin: 14px auto 0; font-size: 14.5px; line-height: 1.45; color: #fff; }
.ep-cta__c1 { --sz: clamp(40px, 6.5%, 66px); left: 7%; bottom: 12%; }
.ep-cta__c2 { --sz: clamp(34px, 5%, 52px); right: 8%; top: 13%; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ep-cta { background: var(--ep-grad-hero-deep); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 34px 70px -30px rgba(15,91,232,0.55); } }
:root[data-theme="dark"] .ep-cta { background: var(--ep-grad-hero-deep); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 34px 70px -30px rgba(15,91,232,0.55); }
@media (max-width: 900px) {
  /* Once the words fill the card, the sparkles move to its bottom corners */
  .ep-cta__fx .ep-spark:nth-child(n+4) { display: none; }
  .ep-cta__fx .ep-spark:nth-child(2) { left: 6% !important; top: auto !important; bottom: 3%; }
  .ep-cta__fx .ep-spark:nth-child(3) { right: 6% !important; top: auto !important; bottom: 3%; }
}
@media (max-width: 600px) {
  .ep-cta { border-radius: 32px; }
  /* sized so a highlight block like "the meals you love." (9.7 em) stays on one line */
  .ep-cta h2, .ep-cta__h2 { font-size: min(34px, calc((100vw - 88px) / 9.9)); }
  .ep-cta__c1 { left: 5%; bottom: auto; top: 6%; }
  .ep-cta__c2 { right: 5%; top: 6%; }
  .ep-page .ep-cta a.ep-btn { width: 100%; max-width: 340px; height: 56px; font-size: 17px; }
}

/* ---------- Footer: a pale band, the blue lockup, roomy tap targets ---------- */
.ep-foot { margin-top: clamp(80px, 3rem + 5vw, 128px); background: var(--ep-canvas-2); border-top: 1px solid var(--ep-line);
  padding: 40px max(var(--ep-gutter), calc((100% - var(--ep-max)) / 2)) 48px; box-sizing: border-box; }
.ep-foot__row { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; }
.ep-foot__brand { flex: none; display: inline-flex; align-items: center; gap: 9px; padding: 4px 14px 4px 4px; border-radius: 12px; background: var(--ep-blue-600);
  color: #fff; box-shadow: var(--ep-sh-blue); font-family: var(--ep-font-display); font-weight: 900; font-size: 16.5px; letter-spacing: -0.02em; line-height: 1; }
.ep-foot__brand img { display: block; width: 28px; height: 28px; border-radius: 8px; }
.ep-foot__nav { display: flex; flex-wrap: wrap; gap: 2px 2px; margin-left: auto; margin-right: -12px; }
.ep-page .ep-foot__nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; box-sizing: border-box; border-radius: var(--ep-r-pill);
  font-family: var(--ep-font-display); font-weight: 700; font-size: 15px; color: var(--ep-ink-2); text-decoration: none;
  transition: background var(--ep-dur-1) var(--ep-ease), color var(--ep-dur-1) var(--ep-ease); }
.ep-page .ep-foot__nav a:hover { color: var(--ep-ink); background: var(--ep-surface); }
.ep-foot__legal { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--ep-line); font-size: 13px; line-height: 1.6; color: var(--ep-ink-3); }
@media (max-width: 760px) { .ep-foot__nav { margin-left: -12px; margin-right: 0; width: calc(100% + 12px); } }

/* ---------- Footer with link columns (homepage, Support, Press kit, Mealime page; October 30, 2026) ---------- */
.h-foot { margin-top: 0; }
.h-foot__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px 48px; }
.ep-page a.h-foot__brand { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; min-height: 44px; color: var(--ep-ink); text-decoration: none;
  font-family: var(--ep-font-display); font-weight: 900; font-size: 18px; letter-spacing: -0.02em; }
.h-foot__brand img { display: block; width: 28px; height: 28px; border-radius: 22.5%; }
.h-foot__cols { display: grid; grid-template-columns: repeat(3, minmax(150px, auto)); gap: 24px 56px; }
.h-foot__cols > div { display: flex; flex-direction: column; align-items: flex-start; }
.h-foot__h { margin: 0 0 6px; font-family: var(--ep-font-display); font-weight: 900; font-size: 15px; color: var(--ep-ink); }
.ep-page .h-foot__cols a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; box-sizing: border-box; font-size: 15px; color: var(--ep-ink-2); text-decoration: none; }
.ep-page .h-foot__cols a:hover { color: var(--ep-ink); text-decoration: underline; text-underline-offset: 0.2em; }
@media (max-width: 760px) { .h-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 20px 24px; } }

/* ---------- Gentle motion (none when the reader asks for less) ---------- */
@keyframes ep-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes ep-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes ep-twinkle { 0%, 100% { opacity: var(--op, 0.85); transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.8); } }
@media (prefers-reduced-motion: no-preference) {
  .ep-rise { animation: ep-rise 0.8s var(--ep-ease) both; animation-delay: var(--d, 0s); }
  .ep-chip { animation: ep-float 6s ease-in-out infinite; animation-delay: var(--d, 0s); }
  .ep-spark { animation: ep-twinkle 4s ease-in-out infinite; animation-delay: var(--d, 0s); }
}

/* QA fixes, October 20, 2026: focus ring contrast (light 7.2:1, white on blue stages, light blue in dark). */
:root:root{--ep-focus:#0B49C4}
@media (prefers-color-scheme: dark){:root:root:not([data-theme="light"]){--ep-focus:#8FB8FF}}
:root:root[data-theme="dark"]{--ep-focus:#8FB8FF}
.ep-page :where(a, summary, button):focus-visible{outline-color:var(--ep-focus)}
.ep-page :where(.ep-on-blue, .ep-on-night) :where(a, summary, button):focus-visible{outline-color:#fff}