: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-chicken: #2563EB;
  --category-beef: #D9480F;
  --category-breakfast: #FBBF24;
  --category-fresh: #15803D;
  --category-seafood: #0891B2;

  --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-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;
}

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

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

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

.category-card-info span,
.macroprep-category-card.category-seafood .category-card-info span {
  color: var(--brand-blue) !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;
}

/* 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;
}