:root {
  --brand-blue: #005DFA;
  --brand-white: #FFFFFF;
  --background-primary: #F8FAFC;
  --surface-primary: #FFFFFF;
  --surface-subtle: #F1F5F9;
  --border-default: #E2E8F0;
  --border-strong: #CBD5E1;
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #64748B;
  --disabled-surface: #E2E8F0;
  --disabled-text: #94A3B8;
  --brand-black: #0B0D0F;

  /* Category tokens — Branding & Digital Design Standard 1.3 §3.4.
     Eight tokens. Light value is the category identity. Dark value is for
     small text on white where the light cannot reach 4.5:1.
     Chicken, Fresh, Seafood: dark not established.
     Beef: none required, #a4161a measures 7.75:1.
     Breakfast: none by decision, §11.2(b) applies. */
  --category-chicken: #2563EB;
  --category-beef: #a4161a;
  --category-breakfast: #e8730a;
  --category-fresh: #15803D;
  --category-seafood: #0891B2;
  --category-pork: #e0578a;
  --category-pork-dark: #a82f5c;
  --category-turkey: #9d5bd2;
  --category-turkey-dark: #6b3a9e;
  --category-snack: #7c8899;
  --category-snack-dark: #48566b;

  --blue: var(--brand-blue);
  --blue2: var(--brand-blue);
  --navy: var(--brand-black);
  --navy2: var(--text-primary);
  --ink: var(--text-primary);
  --muted: var(--text-muted);
  --line: var(--border-default);
  --card: var(--surface-primary);
  --soft: var(--surface-subtle);
}

html {
  background: var(--background-primary);
}

body {
  min-width: 320px;
  background: var(--background-primary) !important;
  color: var(--text-primary) !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 16px;
  line-height: 1.5;
}

button,
input,
a,
nav,
.eyebrow,
.category-strip,
.recipe-identity,
.stat-box,
.panel,
.modal-footer {
  font-family: "Inter", Arial, sans-serif !important;
}

h1,
h2,
h3,
h4,
.hero h1,
.future h2,
.about h2,
.waitlist h2,
.home-info h3,
.category-page-header h2,
.category-heading h2,
.category-card-info h3,
.title-block h2,
.section-title,
.panel h3 {
  font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif !important;
  font-weight: 700 !important;
}

.site-header {
  background: var(--brand-black) !important;
  border-bottom: 1px solid var(--brand-blue);
  box-shadow: 0 4px 12px rgba(15, 23, 42, .08) !important;
}

.brand {
  min-height: 74px;
  text-transform: none !important;
}

.brand img,
.full-brand img,
.category-card-logo img {
  object-fit: contain !important;
  border-radius: 0 !important;
  filter: none !important;
  box-shadow: none !important;
}

.brand img {
  width: 74px !important;
  height: 74px !important;
}

nav a {
  text-transform: none !important;
  color: var(--brand-white) !important;
  font-weight: 600 !important;
}

nav a.ig {
  color: var(--brand-white) !important;
}

.hero,
.future,
.about,
.waitlist {
  color: var(--text-primary);
}

.eyebrow,
.hero h1 span,
.thanks {
  color: var(--brand-blue) !important;
}

.hero h1,
.future h2,
.about h2,
.waitlist h2,
.home-info h3,
.category-page-header h2,
.category-heading h2,
.category-card-info h3,
.title-block h2,
.section-title,
.panel h3 {
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.hero p:last-child,
.future > p,
.about p,
.waitlist p,
.category-page-header p:last-child,
.category-heading p,
.category-card-info p,
.recipe-description,
.panel p {
  color: var(--text-secondary) !important;
}

.hero-actions a,
.view-btn,
.waitlist button,
.recipe-signup a,
.back-category-btn {
  min-height: 48px;
  border-radius: 12px !important;
  background: var(--brand-blue) !important;
  color: var(--brand-white) !important;
  border: 1px solid var(--brand-blue) !important;
  box-shadow: none !important;
  text-transform: none !important;
  font-weight: 600 !important;
}

.hero-actions a:last-child {
  background: var(--surface-primary) !important;
  color: var(--brand-blue) !important;
  border-color: var(--border-strong) !important;
}

.waitlist input {
  min-height: 48px;
  border: 1px solid var(--border-strong) !important;
  border-radius: 12px !important;
  color: var(--text-primary);
  background: var(--surface-primary);
  font: inherit;
}

.home-card,
.macroprep-category-card,
.category-page-header,
.category-heading,
.coming-grid div,
.about,
.waitlist,
.panel {
  background: var(--surface-primary) !important;
  border: 1px solid var(--border-default) !important;
  box-shadow: none !important;
}

.home-card,
.macroprep-category-card {
  border-radius: 16px !important;
}

.category-page-header,
.category-heading,
.coming-grid div,
.about,
.waitlist,
.panel {
  border-radius: 16px !important;
}

.waitlist::before,
.home-card::before,
.full-card::before {
  background-image: none !important;
  filter: none !important;
}

/* =========================================================
   CATEGORY STRIPS — Branding 1.3 §3.4

   THIS FILE IS THE SOLE AUTHORITY FOR CATEGORY COLOUR.
   The matching declarations in styles.css are superseded. Do not
   reintroduce them there: this file loads second, so at equal
   specificity it wins, and the loser is invisible in both files.

   Five categories take a flat fill of the light value. None of the
   five has an approved dark, so there is no second stop to gradient
   toward. Pork, Turkey and Snack gradient light -> dark; they have
   approved darks.

   INK. Strip labels are 14px/600 — small text, 4.5:1 required.
   White fails on Breakfast (3.05:1) and Seafood (3.68:1) per §3.5,
   so both take text-primary. Pork 3.56, Turkey 4.32 and Snack 3.60
   have the same defect and stay on white by P&G ruling 2026-09-14:
   four other tokens already carry white labels at comparable ratios,
   and fixing three of seven creates the inconsistency it would mean
   to remove. Recorded as a palette-wide finding, to be measured and
   decided as a set.
   ========================================================= */

.category-strip {
  border-radius: 15px 15px 0 0 !important;
  background: var(--brand-blue) !important;
  color: var(--brand-white) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: none !important;
}

.category-chicken .category-strip {
  background: var(--category-chicken) !important;
}

.category-beef .category-strip {
  background: var(--category-beef) !important;
}

.category-breakfast .category-strip {
  background: var(--category-breakfast) !important;
  color: var(--text-primary) !important;
}

/* Was .category-salad. The categoryClass() fresh -> salad substitution
   was removed 2026-09-10 per Branding 1.2 Amendment 1, so no element has
   carried that class since; Fresh has fallen through to brand blue ever
   since. Renamed, not re-added. */
.category-fresh .category-strip {
  background: var(--category-fresh) !important;
}

.category-seafood .category-strip {
  background: var(--category-seafood) !important;
  color: var(--text-primary) !important;
}

.category-pork .category-strip {
  background: linear-gradient(135deg, var(--category-pork), var(--category-pork-dark)) !important;
}

.category-turkey .category-strip {
  background: linear-gradient(135deg, var(--category-turkey), var(--category-turkey-dark)) !important;
}

.category-snack .category-strip {
  background: linear-gradient(135deg, var(--category-snack), var(--category-snack-dark)) !important;
}

.category-card-logo {
  background: var(--surface-subtle) !important;
}

/* =========================================================
   RECIPE-COUNT LINKS — §3.5 and §11.2

   Chicken, Beef and Fresh clear 4.5:1 on white and use the token
   directly. Beef was removed from the §3.5 unsafe list in 1.3 at
   7.75:1.

   Breakfast and Seafood use their token directly by OWNER DECISION,
   2026-09-20, superseding the §11.2(b) neutral-text treatment
   confirmed by P&G on 2026-09-14. Both are below 4.5:1 for small
   text on white (Breakfast 3.05:1, Seafood 3.68:1); the owner judged
   them readable with that stated. Branding 1.3 needs an amendment or
   recorded exception to match this block.

   Pork, Turkey and Snack take §11.2(a) — their approved dark values.
   ========================================================= */

.category-card-info span {
  color: var(--brand-blue) !important;
}

.macroprep-category-card.category-chicken .category-card-info span,
.category-chicken .category-card-info span {
  color: var(--category-chicken) !important;
}

.macroprep-category-card.category-beef .category-card-info span,
.category-beef .category-card-info span {
  color: var(--category-beef) !important;
}

.macroprep-category-card.category-fresh .category-card-info span,
.category-fresh .category-card-info span {
  color: var(--category-fresh) !important;
}

.macroprep-category-card.category-breakfast .category-card-info span,
.category-breakfast .category-card-info span {
  color: var(--category-breakfast) !important;
}

.macroprep-category-card.category-seafood .category-card-info span,
.category-seafood .category-card-info span {
  color: var(--category-seafood) !important;
}

.macroprep-category-card.category-pork .category-card-info span,
.category-pork .category-card-info span {
  color: var(--category-pork-dark) !important;
}

.macroprep-category-card.category-turkey .category-card-info span,
.category-turkey .category-card-info span {
  color: var(--category-turkey-dark) !important;
}

.macroprep-category-card.category-snack .category-card-info span,
.category-snack .category-card-info span {
  color: var(--category-snack-dark) !important;
}

.home-card {
  min-height: 385px !important;
}

.home-card .food {
  min-height: 325px !important;
  background: var(--surface-subtle) !important;
}

.home-card .food img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-info {
  padding: 24px !important;
}

.home-info h3 {
  color: var(--text-primary) !important;
  font-size: clamp(28px, 2vw, 36px) !important;
  line-height: 1.06 !important;
}

.recipe-card-meta {
  display: grid;
  gap: 8px;
  margin: 20px 0 24px;
  padding: 16px 0;
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
}

.recipe-card-meta span {
  display: block;
}

.single-category-page .category-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

.recipe-modal {
  border: 1px solid var(--border-strong) !important;
  border-radius: 24px !important;
  background: var(--surface-primary) !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .14) !important;
}

.recipe-modal::backdrop {
  background: rgba(15, 23, 42, .72) !important;
}

.close-modal {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  border: 1px solid var(--border-strong) !important;
  background: var(--brand-black) !important;
  color: var(--brand-white) !important;
  box-shadow: none !important;
}

.full-top {
  border-bottom: 3px solid var(--brand-blue) !important;
}

.full-brand {
  width: fit-content !important;
  padding: 12px !important;
  border: 1px solid var(--border-default) !important;
  border-radius: 12px !important;
  background: var(--surface-primary) !important;
}

.full-brand img {
  width: 86px !important;
  height: 86px !important;
}

.title-block {
  padding: 32px !important;
}

.title-block h2 {
  margin: 12px 0 !important;
  color: var(--text-primary) !important;
  font-size: clamp(42px, 5vw, 72px) !important;
  line-height: .98 !important;
}

.recipe-identity {
  margin: 20px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.recipe-description {
  margin: 0 0 20px;
  font-size: 17px;
  line-height: 1.55;
}

.recipe-basics {
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)) !important;
  gap: 8px !important;
  margin-top: 20px !important;
}

.stat-box {
  min-width: 0;
  border: 1px solid var(--border-default) !important;
  border-radius: 12px !important;
  background: var(--surface-primary) !important;
  box-shadow: none !important;
}

.stat-box strong {
  color: var(--text-primary);
  font-size: 22px !important;
  line-height: 1.1;
}

.stat-box small {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: none !important;
}

.full-photo {
  min-height: 420px;
  background: var(--surface-subtle);
}

.full-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-title {
  display: inline-flex !important;
  border-radius: 12px !important;
  background: var(--brand-blue) !important;
  color: var(--brand-white) !important;
  padding: 10px 16px !important;
  font-size: 22px !important;
}

.full-body {
  gap: 32px !important;
  padding: 32px !important;
}

.full-body ul,
.full-body ol,
.optional-ingredients p {
  color: var(--text-primary);
  font-size: 16px !important;
  line-height: 1.55 !important;
}

.full-body li {
  margin: 8px 0 !important;
}

.full-body ol li::before {
  background: var(--brand-blue) !important;
}

.ingredient-group + .ingredient-group {
  margin-top: 24px;
}

.ingredient-group h4 {
  margin: 0 0 8px;
  color: var(--text-secondary);
  font-size: 20px;
}

.optional-ingredients {
  grid-column: 1 / -1;
  padding: 24px;
  border: 1px solid var(--border-default);
  border-radius: 16px;
  background: var(--surface-subtle);
}

.optional-ingredients .section-title {
  background: var(--text-primary) !important;
}

.optional-ingredients ul,
.optional-ingredients p {
  margin-bottom: 0;
}

.mp-photo-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 0 32px 32px;
}

.mp-photo-gallery figure {
  overflow: hidden;
  min-height: 280px;
  margin: 0;
  border: 1px solid var(--border-default);
  border-radius: 16px;
  background: var(--surface-subtle);
  box-shadow: none;
}

.mp-photo-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bottom-panels {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  padding: 0 32px 32px !important;
}

.bottom-panels .storage-panel,
.bottom-panels .wide-panel {
  grid-column: 1 / -1 !important;
}

.panel {
  padding: 24px !important;
}

.panel h3 {
  color: var(--text-primary) !important;
  font-size: 22px !important;
}

.panel-row {
  border-bottom: 1px solid var(--border-default) !important;
  color: var(--text-primary);
  font-size: 16px;
}

.panel-row span:first-child {
  color: var(--text-secondary);
  text-transform: none !important;
}

.panel-row span:last-child {
  color: var(--text-primary);
  font-weight: 600;
}

.recipe-signup {
  border: 1px solid var(--border-default) !important;
  border-radius: 16px !important;
  background: var(--surface-subtle) !important;
}

.modal-footer,
.feature-strip {
  background: var(--brand-black) !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
dialog:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgba(0, 93, 250, .24) !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
}

@media (max-width: 1024px) {
  .recipes {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

@media (max-width: 820px) {
  .single-category-page .category-card-grid {
    grid-template-columns: 1fr !important;
  }

  .full-top,
  .full-body,
  .bottom-panels {
    grid-template-columns: 1fr !important;
  }

  .optional-ingredients {
    grid-column: auto;
  }
}

@media (max-width: 680px) {
  .site-header,
  .recipes {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .brand {
    min-height: 56px;
  }

  .brand img {
    width: 56px !important;
    height: 56px !important;
  }

  .home-card {
    grid-template-columns: 1fr !important;
    grid-template-rows: 60px auto auto !important;
  }

  .home-card .food {
    min-height: 260px !important;
  }

  .home-info {
    padding: 24px !important;
  }

  .home-info h3 {
    font-size: clamp(24px, 8.5vw, 34px) !important;
    line-height: 1.05 !important;
  }

  .recipe-modal {
    width: calc(100vw - 32px) !important;
    max-height: 92vh !important;
    border-radius: 24px !important;
  }

  .close-modal {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }

  .title-block,
  .full-body,
  .panel {
    padding: 24px !important;
  }

  .title-block h2 {
    font-size: clamp(32px, 11vw, 48px) !important;
  }

  .full-photo {
    min-height: 320px !important;
  }

  .mp-photo-gallery {
    grid-template-columns: 1fr;
    padding: 0 24px 24px;
  }

  .mp-photo-gallery figure {
    min-height: 240px;
  }

  .bottom-panels {
    grid-template-columns: 1fr !important;
    padding: 0 24px 24px !important;
  }

  .panel-row {
    grid-template-columns: 1fr !important;
  }

  .panel-row span:last-child {
    text-align: left !important;
  }
}
/* =========================================================
   OWNER VISUAL REVIEW CORRECTIONS — 2026-08-13
   Preserve synchronized content; restore MacroPrep visual DNA.
   ========================================================= */

/* Restore the established blue/navy website treatment.
   Do not use flat black for primary MacroPrep sections. */
:root {
  --navy: #06152e;
  --navy2: #0b2248;
}

.site-header,
.feature-strip,
.modal-footer {
  background: linear-gradient(
    135deg,
    #020916,
    #06152e 55%,
    #0a2b60
  ) !important;
}

/* Optional Ingredients is a recipe module, not a black brand section. */
.optional-ingredients .section-title {
  background: var(--brand-blue) !important;
}

/* ...and its title is the button that opens it (owner, 2026-09-28; script.js,
   optionalIngredientsMarkup). The pill is .section-title's own look; these take off what a
   button adds. The section is drawn only when the recipe has optional ingredients, and the list
   starts hidden. The plus turns to a cross while it is open. */
.optional-ingredients .optional-heading {
  margin: 0;
}

.optional-ingredients .optional-toggle {
  margin: 0 !important;
  border: 0 !important;
  cursor: pointer;
  text-align: left;
}

.optional-ingredients .optional-mark {
  display: inline-block;
  transition: transform .15s ease;
}

.optional-ingredients .optional-toggle[aria-expanded="true"] .optional-mark {
  transform: rotate(45deg);
}

.optional-ingredients .optional-list {
  margin-top: 15px;
}

.optional-ingredients .optional-list[hidden] {
  display: none !important;
}

/* The governed master artwork is square-canvas artwork containing
   a circular logo. Display it circularly without altering the source file. */
.brand img,
.full-brand img,
.category-card-logo img {
  border-radius: 50% !important;
  filter: none !important;
  box-shadow: none !important;
}