/* Canonical 440 Eats shell: header, sponsor strip, footer, and shared success states. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  height: 96px;
  border-bottom: 1px solid var(--line, #d9cbbd);
  background: color-mix(in srgb, var(--paper, #f7efe4) 94%, transparent);
  backdrop-filter: blur(12px);
}

.site-header .wrap {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.site-header .nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.site-header .logo {
  display: block;
  width: 188px;
  max-width: none;
  height: auto;
}

.site-header .links {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 16px;
  font-weight: 700;
}

.site-header .links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink, #191815);
  text-decoration: none;
}

.site-header .links a:hover { color: var(--red-dark, #ad241f); }

.site-header .nav-cta {
  justify-content: center;
  padding: 0 20px;
  border-radius: 8px;
  background: var(--red, #d5332e);
  color: #fff !important;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.16);
  font-weight: 800;
}

.site-header .nav-cta:hover { background: var(--red-dark, #ad241f); }

.site-header .menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink, #191815);
  cursor: pointer;
}

.menu-icon,
.menu-icon::before,
.menu-icon::after {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  content: "";
  transition: transform .2s ease, opacity .2s ease;
}

.menu-icon { position: relative; }
.menu-icon::before { position: absolute; transform: translateY(-7px); }
.menu-icon::after { position: absolute; transform: translateY(7px); }
.menu[aria-expanded="true"] .menu-icon { background: transparent; }
.menu[aria-expanded="true"] .menu-icon::before { transform: rotate(45deg); }
.menu[aria-expanded="true"] .menu-icon::after { transform: rotate(-45deg); }

.spc {
  max-width: 1140px;
  margin: 0 auto;
  padding: 48px 20px 72px;
}

.spc-title {
  margin: 0 0 22px;
  color: var(--ink, #191815);
  font-family: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  font-size: clamp(32px, 4vw, 42px);
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
}

.spc-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.spc-tile {
  display: flex !important;
  overflow: hidden;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--line, #d9cbbd);
  border-radius: 12px;
  background: var(--paper2, #fffaf2);
  box-shadow: 0 18px 50px rgba(55,35,20,.12);
}

.spc-media {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 150px;
  padding: 26px 22px;
}

.spc-media img { width: auto; max-width: 100%; height: auto; max-height: 110px; }
.spc-tag { position: absolute; top: 12px; left: 12px; padding: 6px 10px; border-radius: 4px; background: var(--paper2, #fffaf2); color: var(--green, #08773d); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.spc-body { display: flex; flex: 1; flex-direction: column; padding: 20px 22px 24px; }
.spc-body h3 { margin: 0 0 8px; color: var(--ink, #191815); font-family: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", sans-serif; font-size: 24px; font-weight: 700; line-height: 1.15; }
.spc-body > p { margin: 0; color: var(--muted, #665e55); font-size: 16px; line-height: 1.5; }
.spc-facts { display: grid; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--line, #d9cbbd); }
.spc-facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line, #d9cbbd); font-size: 14px; line-height: 1.5; }
.spc-facts dt { color: var(--muted, #665e55); font-weight: 700; }
.spc-facts dd { margin: 0; color: var(--ink, #191815); font-weight: 700; text-align: right; }
.spc-cta { display: inline-flex; align-items: center; min-height: 44px; margin-top: auto; padding-top: 12px; color: var(--red-dark, #ad241f); font-weight: 800; text-decoration: none; }
.spc-ph { border-style: dashed; box-shadow: none; }
.spc-ph-media { background: #f1e9dc; }
.spc-ph-logo { color: #8b7f70; font-family: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", sans-serif; font-size: 20px; font-weight: 700; }
.spc-arrow,
.spc-dots { display: none !important; }

.site-footer {
  border-top: 1px solid var(--line, #d9cbbd);
  background: var(--paper2, #fffaf2);
  padding: 48px 0 28px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 28px;
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.footer-logo { width: 130px; height: auto; }
.footer-brand p { max-width: 250px; margin: 12px 0 0; color: var(--muted, #665e55); font-size: 14px; line-height: 1.5; }
.footer-col h3 { margin: 0 0 8px; color: var(--ink, #191815); font-family: "DM Sans", system-ui, sans-serif; font-size: 13px; font-weight: 800; letter-spacing: .08em; line-height: 1.4; text-transform: uppercase; }
.footer-col a { display: flex; align-items: center; min-height: 44px; margin: 0; color: var(--muted, #665e55); font-size: 16px; font-weight: 600; text-decoration: none; }
.footer-col a:hover { color: var(--red-dark, #ad241f); }
.footer-base { width: min(1180px, calc(100% - 40px)); margin: 30px auto 0; padding-top: 18px; border-top: 1px solid var(--line, #d9cbbd); color: var(--muted, #665e55); font-size: 13px; line-height: 1.5; }
.footer-base p { margin: 0; }

.referral-success {
  grid-column: 1 / -1;
  padding: 24px;
  border: 2px solid var(--green, #08773d);
  border-radius: 12px;
  background: var(--paper2, #fffaf2);
  color: var(--ink, #191815);
  text-align: left;
}

.referral-success h2 { margin: 0 0 8px; color: var(--green, #08773d); font-family: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", sans-serif; font-size: 34px; font-weight: 700; line-height: 1; }
.referral-reward { margin: 0 0 18px; font-size: 18px; line-height: 1.5; }
.referral-success label { position: static !important; display: block; width: auto !important; height: auto !important; margin: 0 0 7px !important; overflow: visible !important; clip: auto !important; color: var(--ink, #191815); font-size: 16px; font-weight: 700; line-height: 1.5; white-space: normal !important; }
.referral-link-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.referral-link-row input { width: 100%; min-width: 0; min-height: 52px; padding: 12px 14px; border: 2px solid #8a7a63; border-radius: 12px; background: #fffdf8; color: var(--ink, #191815); font-size: 16px; }
.referral-copy,
.referral-share { min-height: 52px; padding: 12px 20px; border: 0; border-radius: 8px; color: #fff; cursor: pointer; font-size: 16px; font-weight: 800; box-shadow: inset 0 -3px 0 rgba(0,0,0,.16); }
.referral-copy { background: var(--red, #d5332e); }
.referral-share { background: var(--green, #08773d); }
.referral-copy:hover { background: var(--red-dark, #ad241f); }
.referral-share:hover { background: #0b5d36; }
.referral-actions { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.referral-group { display: inline-flex; align-items: center; min-height: 44px; color: var(--green, #08773d); font-size: 16px; font-weight: 800; text-underline-offset: 4px; }
.referral-feedback { min-height: 24px; margin: 8px 0 0; color: var(--muted, #665e55); font-size: 14px; line-height: 1.5; }

@media (max-width: 899px) {
  .site-header { height: 82px; }
  .site-header .logo { width: 150px; }
  .site-header .menu { display: inline-flex; }
  .site-header .links {
    position: fixed;
    top: 82px;
    left: 0;
    right: 0;
    height: calc(100dvh - 82px);
    display: none;
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 20px;
    background: var(--paper, #f7efe4);
  }
  .site-header .links.open { display: flex; }
  .site-header .links a { justify-content: flex-start; min-height: 52px; padding: 0 8px; border-bottom: 1px solid var(--line, #d9cbbd); }
  .site-header .links .nav-cta { justify-content: center; margin-top: 16px; border-bottom: 0; }
  body.shell-menu-open { overflow: hidden; }
  .spc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 559px) {
  .spc { padding: 42px 14px 56px; }
  .spc-grid { grid-template-columns: 1fr; }
  .spc-tile { width: 100%; }
  .footer-grid { width: min(100% - 28px, 1180px); }
  .footer-base { width: min(100% - 28px, 1180px); }
  .referral-success { padding: 20px 16px; }
  .referral-link-row { grid-template-columns: 1fr; }
  .referral-actions { align-items: stretch; flex-direction: column; }
  .referral-share,
  .referral-group { justify-content: center; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-icon,
  .menu-icon::before,
  .menu-icon::after { transition: none; }
}