/* Approved DoorDash home layout. Section measurements checked 2026-10-25. */
.home-page {
  --home-paper: #f5f5f7;
  --apple-panel-height: 580px;
  --apple-panel-top: 48px;
  --apple-panel-bottom: 56px;
  --delivery-nav-clearance: 44px;
  --delivery-extra-space: 32px;
  --home-panel-height: var(--apple-panel-height);
  background: var(--home-paper);
}
.home-page .home-frame { padding-top: 0; row-gap: 12px; background: #fff; }
.home-page .home-frame > :is(.delivery-hero, .home-fresh, .home-spotlight, .home-catering) {
  height: var(--apple-panel-height);
  min-height: var(--apple-panel-height);
}
.home-page .home-frame > .delivery-hero {
  grid-column: 1 / -1;
  background: var(--home-paper);
  color: var(--home-ink);
  display: grid;
  align-items: start;
  height: max(456px, calc(100svh - 172px));
  min-height: 456px;
  padding: calc(var(--apple-panel-top) + var(--delivery-nav-clearance) + var(--delivery-extra-space)) 36px var(--apple-panel-bottom);
}
.delivery-hero__inner { width: min(100%, 1280px); height: 100%; min-height: 0; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.delivery-hero__copy { text-align: center; flex-shrink: 0; }
.delivery-hero h1 { margin: 0; font-size: clamp(44px, 4.9vw, 70px); line-height: 1.04; letter-spacing: -.045em; font-weight: 600; text-wrap: balance; }
.delivery-hero__description { margin: 16px 0 0; color: var(--home-muted); font-size: 20px; line-height: 1.5; text-wrap: balance; }
.home-page .delivery-hero .home-actions { margin-top: 24px; }
.delivery-hero .btn { min-height: 50px; }
.delivery-hero__doordash-logo { display: block; width: 24px; height: auto; flex-shrink: 0; }
.home-page .delivery-hero .btn-order { box-shadow: var(--lift); }
.delivery-hero__art { min-width: 0; width: min(640px, 62vw); flex: 1; min-height: 0; }
.delivery-hero__art img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center top; transform: translateY(48px); }
.home-page .home-fresh-copy { padding-top: var(--apple-panel-top); }
.home-page .home-fresh h2 { margin: 0; font-size: clamp(44px, 6vw, 84px); font-weight: 600; line-height: 1.02; letter-spacing: -.045em; text-shadow: 0 2px 14px rgba(0,0,0,.3); }

/* Fit the diagram, controls, and caption within the measured section. */
.home-page .home-frame > .home-spotlight { display: flex; flex-direction: column; padding-top: var(--apple-panel-top); padding-bottom: var(--apple-panel-bottom); background: var(--home-paper); }
.home-spotlight__heading { flex-shrink: 0; }
.home-page .home-spotlight .samosa-diagram { flex: 1; min-height: 0; }
.home-page .home-spotlight__visual { height: 100%; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; container-type: size; }
.home-page .home-spotlight .samosa-diagram__stage { width: min(100%, calc((100cqh - 64px) * 800 / 650)); flex: none; }
.home-page .home-spotlight .samosa-diagram__toggle { flex-shrink: 0; }
.home-page .home-spotlight > .home-hero-art { min-height: 0; flex: 1; object-fit: contain; }
.home-page .home-team, .home-page .home-faq { height: auto; min-height: 0; }

@media (max-width: 1068px) {
  .home-page { --apple-panel-height: 570px; --apple-panel-top: 54px; --apple-panel-bottom: 61px; }
}
@media (max-width: 980px) {
  .home-page .home-frame > .delivery-hero { padding-inline: 24px; }
}
@media (max-width: 833px) {
  .home-page { --delivery-nav-clearance: 48px; }
}
@media (max-width: 734px) {
  .home-page { --apple-panel-height: 500px; --apple-panel-top: 39px; --apple-panel-bottom: 43px; }
}
@media (max-width: 700px) {
  .home-page .home-spotlight__visual { flex: 1; height: auto; width: 100%; }
  .home-page .home-spotlight .samosa-diagram__caption { flex-shrink: 0; }
}
@media (max-width: 640px) {
  /* Count the graphic offset in the layout, then leave a 96px bottom gap. */
  .home-page .home-frame > .delivery-hero { height: auto; min-height: 0; padding-inline: 20px; padding-bottom: 96px; }
  .delivery-hero__inner { height: auto; }
  .delivery-hero__art { width: 100%; flex: none; margin-top: 48px; }
  .delivery-hero__art img { height: auto; transform: none; }
  .delivery-hero h1 { font-size: clamp(37px, 10vw, 46px); }
  .delivery-hero__description { font-size: 17px; margin-top: 14px; }
  .home-page .delivery-hero .home-actions { gap: 10px; margin-top: 22px; }
  .delivery-hero .btn { font-size: 15px; padding-inline: 16px; }
  .home-page .home-fresh h2 { font-size: 44px; }
}
@media (max-width: 360px) {
  .delivery-hero .btn { padding-inline: 16px; }
}
@media (min-width: 981px) and (max-height: 800px) {
  .delivery-hero__art { width: min(490px, 49vw); }
}
@media (min-width: 1069px) and (min-height: 776px) {
  .home-page { --apple-panel-height: 692px; --apple-panel-top: 56px; --apple-panel-bottom: 63px; }
}
@media (min-width: 735px) and (max-width: 1068px) and (min-height: 734px) {
  .home-page { --apple-panel-height: 650px; --apple-panel-top: 61px; --apple-panel-bottom: 69px; }
}