/* Five Dollar Momo — a modern fast-casual identity, led by the brand name. */
@font-face {
  font-family:'Manrope';
  src:url('./assets/fonts/manrope-latin.woff2') format('woff2');
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
}
:root {
  --cream:#fffaf3;
  --green:#252824;
  --ink:#252824;
  --muted:#6c6c63;
  --sage:#f6ded1;
  --pale:#fff0e7;
  --rose:#f0ebe3;
  --line:#e3ddd3;
  --sand:#b9a58e;
  --achar:#bd3c25;
  --achar-dark:#9e2d1a;
  --paper:#ffffff;
  --radius:16px;
  font-family:'Manrope','Avenir Next','Segoe UI',sans-serif;
  font-weight:400;
  font-synthesis:none;
}
::selection { background:var(--sage); color:var(--ink); }
.page-shell { max-width:1280px; padding:0 56px; }
.topbar { min-height:80px; border-bottom:1px solid var(--line); font-size:11px; font-weight:600; letter-spacing:.01em; }
.location-label { gap:7px; }
.launch-label { background:var(--rose); border:0; border-radius:30px; padding:7px 12px; color:var(--muted); font-size:10px; font-weight:500; letter-spacing:.01em; }
.status-dot { background:#858e74; height:5px; width:5px; }
.main-layout { grid-template-columns:minmax(0,1fr) 480px; gap:64px; padding:42px 0 64px; }
.hero { padding:12px 0 0; top:30px; }
.hero-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
h1 { flex:0 0 auto; color:var(--achar); }
h1 > span { display:block; font-family:inherit; font-size:39px; line-height:1.15; font-weight:650; letter-spacing:-.055em; margin:0 0 2px 3px; text-transform:none; }
h1 strong { display:block; font-family:inherit; font-size:106px; line-height:1; font-weight:800; letter-spacing:-.075em; text-transform:none; }
.momo-brand-media { display:block; flex:0 1 240px; width:240px; min-width:0; aspect-ratio:3/2; position:relative; background:transparent; }
.momo-brand-image { display:block; width:100%; height:100%; object-fit:contain; }
.momo-motion-video { position:absolute; width:100%; height:100%; inset:0; object-fit:contain; opacity:0; pointer-events:none; background:transparent; }
.momo-brand-image,.momo-motion-video { filter:drop-shadow(0 4px 4px rgb(37 40 36 / .14)); }
.is-playing-video .momo-motion-video { opacity:1; }
.is-playing-video .momo-brand-image { opacity:0; }
.momo-steam { position:absolute; pointer-events:none; width:45%; height:auto; left:20%; top:-12%; opacity:0; }
.is-playing-video .momo-steam { animation:momo-steam-rise 7s ease-out infinite; }
[data-motion-state="paused"] .momo-steam { animation-play-state:paused; }
@keyframes momo-steam-rise { 0% {opacity:0;transform:translate(0,3px) scale(.8)} 25% {opacity:.18} 65% {opacity:.1} 100% {opacity:0;transform:translate(-6px,-18px) scale(1.08)} }
.hero-caption-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; }
.hero-caption-row .tagline { font-size:14px; margin:0; color:var(--muted); letter-spacing:-.025em; font-weight:400; }
.hero-bottom { margin-top:54px; border-top:1px solid var(--line); padding-top:35px; }
.hero-offer { font-family:inherit; font-weight:600; font-size:clamp(40px,4.3vw,58px); text-transform:none; letter-spacing:-.065em; line-height:1.12; }
.hero-offer em { font-style:normal; color:var(--achar); }
.hero-caption { margin-top:20px; color:var(--muted); font-size:15px; line-height:1.65; letter-spacing:-.025em; font-weight:400; }
.hero-order-link { display:inline-flex; gap:24px; align-items:center; min-height:48px; margin-top:25px; color:var(--ink); font-size:13px; font-weight:650; text-decoration:none; border-bottom:1px solid var(--ink); }
.hero-order-link:hover { color:var(--achar); border-color:var(--achar); }
.order-card { background:var(--paper); border:1px solid var(--line); border-radius:22px; padding:28px 28px 10px; box-shadow:0 14px 50px -40px #4c372655; scroll-margin-top:20px; }
.order-heading { display:flex; flex-direction:column; gap:7px; margin-bottom:23px; }
.eyebrow { font-size:9px; letter-spacing:.12em; font-weight:650; color:var(--achar); }
.order-heading h2 { font-size:25px; line-height:1.25; font-weight:700; letter-spacing:-.055em; }
.fulfillment-switch { background:var(--rose); padding:4px; border-radius:13px; gap:3px; }
.fulfillment-switch label > span { font-size:13px; font-weight:650; border-radius:10px; min-height:46px; color:var(--muted); }
.fulfillment-switch input:checked + span { background:var(--ink); color:var(--paper); }
.product-fieldset { margin-top:24px; }
.product-fieldset legend { font-size:14px; font-weight:650; letter-spacing:-.025em; }
.product-options { gap:11px; margin-top:13px; }
.product-option-content { position:relative; border:1px solid var(--line); border-radius:14px; background:var(--paper); padding:16px 13px; min-height:87px; column-gap:10px; }
.product-option-content strong { font-size:20px; font-weight:650; color:var(--ink); letter-spacing:-.04em; }
.product-option-content small { font-size:10px; color:var(--muted); font-weight:400; white-space:normal; }
.product-icon { color:var(--muted); }
.product-option input:checked + .product-option-content { background:var(--pale); border-color:var(--achar); box-shadow:inset 0 0 0 .5px var(--achar); }
.product-option input:checked + .product-option-content strong,.product-option input:checked + .product-option-content .product-icon { color:var(--achar); }
.selection-check { display:none; position:absolute; top:8px; right:8px; color:var(--achar); }
.selection-check .icon { width:12px; height:12px; stroke-width:2; }
.product-option input:checked + .product-option-content .selection-check { display:block; }
.pack-description { margin-top:26px; gap:12px; }
.pack-description h2 { font-size:21px; font-weight:700; letter-spacing:-.055em; line-height:1.35; }
.pack-description > div > p { font-size:12px; margin-top:6px; font-weight:500; color:var(--muted); }
.pack-price { color:var(--achar); text-align:right; flex:0 0 auto; }
.pack-price strong { font-family:inherit; font-size:44px; font-weight:750; line-height:1; letter-spacing:-.065em; }
.pack-price > span { font-size:10px; color:var(--muted); margin-top:4px; font-weight:400; }
.nutrition { display:flex; align-items:center; flex-wrap:wrap; flex:1; gap:0 15px; margin:0; padding:0; color:var(--muted); font-size:11px; line-height:1.6; }
.nutrition > span { white-space:nowrap; }
.nutrition > span + span { padding-left:15px; border-left:1px solid var(--line); }
.nutrition strong { color:var(--ink); font-size:15px; font-weight:700; letter-spacing:-.035em; margin-right:2px; }
.nutrition small { margin-left:auto; font-size:10px; white-space:nowrap; }
.product-note { font-size:11px; line-height:1.6; margin-top:11px; min-height:0; font-weight:400; }
.quantity-row { padding:18px 0; margin-top:20px; border-top:0; }
.quantity-row label { font-size:15px; font-weight:650; }
.quantity-row p { font-size:11px; }
.quantity-button { border-color:var(--line); background:var(--paper); border-radius:50%; width:44px; height:44px; font-size:26px; font-weight:400; }
.quantity-plus { background:var(--ink); border-color:var(--ink); color:var(--paper); }
.quantity-button:not(:disabled):hover { border-color:var(--achar); color:var(--achar); }
.quantity-plus:not(:disabled):hover { background:var(--achar); color:var(--paper); }
#quantity { font-weight:650; font-size:23px; }
.section-heading h2 { font-size:16px; font-weight:650; }
.small-badge { border-radius:30px; background:var(--rose); color:var(--muted); font-size:9px; padding:5px 8px; font-weight:500; }
.field-label { font-size:11px; font-weight:500; }
select { background-color:var(--paper); border-radius:10px; min-height:47px; font-size:12px; }
select:disabled { color:var(--muted); background-color:#f5f2ed; border-color:#e9e3da; }
.field-hint { font-size:11px; line-height:1.7; }
.checkout-area { margin-top:24px; }
.checkout-meta { font-size:10px; }
.quick-stepper,.quick-order-label { display:none; }
.primary-button { background:var(--achar); color:var(--paper); border-radius:13px; min-height:61px; font-size:16px; font-weight:650; padding:17px 19px; box-shadow:none; }
.primary-button:hover { background:var(--achar-dark); }
.primary-button:focus-visible { outline-color:var(--achar); }
.primary-button .button-arrow { transition:transform .18s ease; }
.primary-button:hover .button-arrow { transform:translateX(3px); }
.checkout-caption { font-size:10px; }
.details-list { margin-top:26px; }
summary { font-size:12px; min-height:53px; font-weight:500; }
.details-content { font-size:12px; }
.text-link { color:var(--achar); }
.delivery-intro { padding-top:28px; }
.delivery-intro h2 { font-family:inherit; font-size:44px; text-transform:none; color:var(--ink); font-weight:600; line-height:1.1; letter-spacing:-.06em; }
.platform { border-radius:12px; }
.platform-mark { background:var(--pale); color:var(--achar); border-radius:9px; }
.platform-name { font-size:15px; font-weight:650; }
.platform-status { font-size:9px; }
.page-footer { align-items:center; gap:20px; border-top:1px solid var(--line); padding:25px 0; font-size:11px; letter-spacing:0; }
.footer-brand { font-family:inherit; font-size:19px; font-weight:750; letter-spacing:-.055em; color:var(--achar); }
.page-footer > span:last-of-type { margin-left:auto; }
.page-footer > a { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--rose); }
.page-footer > a .icon { transform:rotate(-90deg); }
dialog { background:var(--paper); border-radius:20px; border-color:var(--line); }
dialog::backdrop { background:#25282488; backdrop-filter:blur(4px); }
dialog h2 { font-weight:650; font-size:28px; letter-spacing:-.055em; }
.icon-button { background:var(--rose); border-radius:50%; }
.summary-product > .icon { color:var(--achar); }
.summary-product > strong { color:var(--achar); }
.summary-nutrition { margin-top:13px; color:var(--ink); font-size:12px; line-height:1.7; font-weight:500; }
.summary-nutrition span { color:var(--muted); font-size:11px; font-weight:400; }
.noscript-notice { background:var(--pale); }
@media (min-width:900px) and (max-width:1100px) {
  .page-shell { padding:0 32px; }
  .main-layout { grid-template-columns:minmax(0,1fr) 450px; gap:38px; }
  h1 strong { font-size:77px; }
  h1 > span { font-size:26px; }
  .momo-brand-media { width:160px; flex-basis:160px; }
  .hero-caption-row { flex-wrap:wrap; gap:0; }
  .hero-caption-row .tagline { width:100%; font-size:13px; }
  .hero-offer { font-size:43px; }
}
@media (max-width:899px) {
  .page-shell { max-width:540px; padding:0 22px; }
  .topbar { min-height:53px; font-size:10px; border-bottom:0; }
  .launch-label { font-size:9px; padding:5px 8px; }
  .main-layout { display:block; padding:15px 0 0; }
  .hero { padding:0 0 23px; }
  .hero-heading { gap:5px; }
  h1 > span { font-size:28px; letter-spacing:-.05em; margin:0 0 1px 2px; }
  h1 strong { font-size:clamp(65px,18vw,88px); line-height:1; letter-spacing:-.075em; }
  .momo-brand-media { width:165px; flex-basis:165px; }
  .hero-caption-row { margin-top:7px; gap:6px; }
  .hero-caption-row .tagline { font-size:12px; }
  .hero-bottom { display:none; }
  .order-card { margin:0 -12px; padding:20px 12px 0; background:var(--paper); border:1px solid var(--line); border-radius:22px; box-shadow:0 14px 50px -40px #4c372655; }
  .order-heading { margin:0 0 15px; gap:5px; }
  .order-heading .eyebrow { display:none; }
  .order-heading h2 { font-size:21px; font-weight:650; letter-spacing:-.045em; }
  .fulfillment-switch label > span { min-height:45px; font-size:13px; }
  .product-fieldset { margin-top:24px; }
  .product-fieldset legend { font-size:14px; }
  .product-option-content { min-height:85px; padding:15px 12px; }
  .product-option-content strong { font-size:20px; }
  .product-option-content small { font-size:10px; }
  .pack-description { margin-top:23px; }
  .pack-description h2 { font-size:21px; }
  .pack-price strong { font-size:42px; }
  .nutrition { gap:0 12px; }
  .nutrition > span + span { padding-left:12px; }
  .nutrition small { font-size:10px; }
  .pickup-details { padding-top:22px; }
  .checkout-area { position:sticky; bottom:0; z-index:2; background:var(--paper); margin:17px -10px 0; padding:12px 10px calc(10px + env(safe-area-inset-bottom)); box-shadow:0 -10px 20px -15px #88745880; }
  .checkout-meta { font-size:10px; margin-bottom:8px; }
  .checkout-meta { align-items:center; gap:14px; }
  .checkout-summary { min-width:0; display:flex; flex-direction:column; gap:3px; }
  .quick-order-label { display:block; font-size:10px; color:var(--muted); }
  #checkout-count { color:var(--ink); font-size:12px; font-weight:600; line-height:1.4; }
  .checkout-subtotal-label { display:none; }
  .quick-stepper { display:flex; align-items:center; flex-shrink:0; border:1px solid var(--line); border-radius:24px; background:var(--paper); }
  .quick-stepper button { display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--ink); font-size:24px; line-height:1; touch-action:manipulation; }
  .quick-stepper button:last-child { background:var(--pale); color:var(--achar); }
  .quick-stepper button:not(:disabled):active { background:var(--sage); }
  .quick-stepper button:disabled { color:#b4b9ae; background:transparent; }
  #quick-quantity { min-width:30px; padding:0 2px; text-align:center; color:var(--ink); font-size:16px; font-weight:650; font-variant-numeric:tabular-nums; }
  .primary-button { font-size:16px; }
  .checkout-caption { font-size:10px; margin-top:9px; }
  summary { font-size:12px; }
  .details-content { font-size:12px; }
  .page-footer { flex-wrap:wrap; gap:9px; margin-top:25px; padding:18px 0 22px; }
  .footer-brand { font-size:18px; }
  .page-footer > span:last-of-type { margin-left:0; font-size:10px; order:3; width:100%; }
  .page-footer > a { margin-left:auto; }
}
@media (max-width:360px) {
  .page-shell { padding:0 18px; }
  h1 strong { font-size:61px; }
  h1 > span { font-size:25px; }
  .momo-brand-media { width:130px; flex-basis:130px; }
  .hero-caption-row .tagline { font-size:11px; }
  .order-heading h2 { font-size:20px; }
  .fulfillment-switch label > span { font-size:12px; }
  .product-option-content { grid-template-columns:20px 1fr; column-gap:7px; padding:14px 9px; }
  .product-option-content strong { font-size:18px; }
  .product-option-content small { font-size:9px; }
  .product-icon { width:19px; }
  .pack-description h2 { font-size:19px; }
  .nutrition { gap:0 10px; }
  .nutrition > span + span { padding-left:10px; }
  .nutrition strong { font-size:14px; }
  .nutrition small { font-size:10px; }
  .quantity-row label { font-size:14px; }
  .primary-button { font-size:15px; }
}
@media (prefers-reduced-motion:reduce) {
  .is-playing-video .momo-steam { animation:none; }
  .primary-button .button-arrow { transition:none; }
}

/* Pack details and progressively disclosed nutrition. Additional values are labeled illustrative demo estimates. */
.pack-description { align-items:flex-start; }
.pack-description .pack-count { margin-top:7px; font-size:11px; font-weight:400; }
.nutrition-details { margin-top:17px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.nutrition-details > summary { gap:12px; min-height:58px; padding:12px 0; }
.nutrition-details > summary > .nutrition { font-size:11px; font-weight:400; transform:none; transition:none; }
.nutrition-details .nutrition-chevron { width:17px; height:17px; color:var(--muted); transition:transform .18s ease; }
.nutrition-details[open] > summary > .nutrition { transform:none; }
.nutrition-details[open] .nutrition-chevron { transform:rotate(180deg); }
.nutrition-expanded { padding:3px 0 18px; }
.nutrition-heading { font-size:12px; font-weight:650; margin-bottom:10px; }
.nutrition-table { margin:0; font-size:12px; }
.nutrition-table > div { display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px solid var(--line); }
.nutrition-table dt { color:var(--muted); }
.nutrition-table dd { margin:0; color:var(--ink); font-weight:550; }
.nutrition-pending { margin-top:12px; color:var(--muted); font-size:10px; line-height:1.6; }
@media (prefers-reduced-motion:reduce) { .nutrition-details .nutrition-chevron { transition:none; } }