/* Option D: Diner (light). Cream, ketchup and mustard with option C's fonts (Unbounded + Outfit).
   Option E loads this file, then option-e/theme.css for the street-food-at-night (dark) palette.
   Source: docs/brand/chowcrew-brand-guide.md. Food colors only, no blue or violet. Trust first, playful second. */
@font-face { font-family: "ChowDisplay"; src: url("../assets/fonts/unbounded-800-latin.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "ChowBody"; src: url("../assets/fonts/outfit-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

/* Contrast (WCAG): ink/paper 16.1, ink-soft/paper 7.8, ink-soft/paper-deep 6.4, tomato-deep/paper 6.9,
   cream/ketchup 5.2, ink/mustard 10.8, ink/peach 11.7, cream/grill 14.1.
   Option E (dark) ratios are listed in option-e/theme.css. */
:root {
  --ketchup: #C8231B; --chilli: #FF5A1F; --mustard: #FFC233;
  --cream: #FFF5E6; --crust: #F3DDBD; --charcoal: #1E1915; --grill: #2B2420; --soot: #14100D;

  --paper: var(--cream); --paper-deep: var(--crust); --card: #FFFDF8;
  --ink: var(--charcoal); --ink-soft: #5C4A3D;
  --tomato: var(--ketchup);      /* action color; cream text on it */
  --on-tomato: var(--cream);
  --tomato-deep: #A81C15;        /* ketchup used as text on paper */
  --yolk: var(--mustard);
  --pickle: var(--grill);        /* enterprise, the family block */
  --berry: var(--ketchup);       /* the Friday crew block */
  --blush: #FFC9A3;              /* peach: soft panels, ink text */
  --on-dark: var(--cream);       /* text on ketchup / grill blocks */
  --shadow: var(--charcoal);
  --band: var(--charcoal);       /* tape, closing call, footer */

  --font-display: "ChowDisplay", "Arial Black", system-ui, sans-serif;
  --font-body: "ChowBody", system-ui, -apple-system, "Segoe UI", sans-serif;
  --stroke: 2px;
  --hard: 4px 4px 0 var(--shadow);
}


/* ---------- type: option C's fonts and sizes ---------- */
/* Unbounded is very wide, so every display size comes down a step. */
h1, h2, h3 { overflow-wrap: break-word; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.2rem, 0.9rem + 5.3vw, 5.3rem); line-height: 1.04; }
h2 { font-size: clamp(1.75rem, 1.05rem + 2.6vw, 3.2rem); line-height: 1.08; }
h3 { font-size: clamp(1.1rem, 0.95rem + 0.8vw, 1.5rem); line-height: 1.15; }
.hero h1 .stamp { font-size: 0.68em; border-width: 4px; }
.t-title { font-size: 1.3rem; }
.tape-track span { font-size: clamp(0.95rem, 0.9rem + 0.4vw, 1.25rem); }
.step-num { font-size: 4rem; -webkit-text-stroke-width: 2px; }
.menu-list .name { font-size: clamp(0.92rem, 0.85rem + 0.35vw, 1.1rem); }
.plan h3 { font-size: 1.55rem; }
.price { font-size: clamp(2.2rem, 1.8rem + 1.5vw, 3.1rem); }
.big:nth-child(1) strong { font-size: clamp(2.8rem, 1.7rem + 3.8vw, 5rem); }
.big:nth-child(2) strong { font-size: clamp(2.3rem, 1.4rem + 2.6vw, 3.6rem); }
.big:nth-child(3) strong { font-size: clamp(1.8rem, 1.2rem + 1.7vw, 2.6rem); }
.faq summary { font-size: clamp(0.98rem, 0.9rem + 0.35vw, 1.15rem); }
.rung h3 { font-size: 1.3rem; }
.ref-steps b { font-size: 1.05rem; }
.compare thead th { font-size: 0.9rem; }
.callout strong { font-size: 1rem; }
.slam { font-size: 1.05rem; }
.join h2 { max-width: 16ch; }

@media (max-width: 600px) { .compare th, .compare td { padding: 0.6rem 0.3rem; font-size: 0.74rem; } .compare thead th { font-size: 0.78rem; } }


/* ---------- trust first: calmer surfaces, two playful moments only (hero ticket + "Settled.") ---------- */
body::before { opacity: 0.18; }
:focus-visible { outline: 3px solid var(--mustard); outline-offset: 3px; box-shadow: 0 0 0 6px var(--charcoal); }
.sticker { transform: none; box-shadow: none; border-radius: 999px; color: var(--charcoal); }
.step:nth-child(n), .who-block, .keep { transform: none; }
.step, .who-block, .keep, .plan-pro, .plan-ent { box-shadow: var(--hard); }
.ticket { transform: rotate(1deg); box-shadow: 7px 7px 0 var(--shadow); }
.awning { background: repeating-linear-gradient(90deg, var(--ketchup) 0 3.5rem, var(--cream) 3.5rem 7rem); }

/* ---------- color pairings the shared stylesheet can't know about ---------- */
.btn { color: var(--on-tomato); box-shadow: 3px 3px 0 var(--shadow); }
.btn:hover { box-shadow: 5px 5px 0 var(--shadow); }
.btn:active { box-shadow: 1px 1px 0 var(--shadow); }
.btn-paper, .plan-free .btn { color: var(--ink); }
.btn-yolk, .plan-ent .btn { color: var(--charcoal); }
.seg { box-shadow: none; }
.seg button[aria-pressed="true"] { color: var(--on-tomato); }
.plan .sticker { color: var(--on-tomato); }
.ref-steps li::before { color: var(--on-tomato); box-shadow: none; }
.vote[data-p="you"].in { color: var(--on-tomato); }
.vote[data-p="dev"].in { color: var(--cream); }
.vote[data-p="jo"].in { color: var(--cream); }
.cand.win, .step:nth-child(1), .plan-pro, .keep, .compare thead th:nth-child(3), .rung .sticker, .vote[data-p="maya"].in { color: var(--charcoal); }
.cand.win .cand-meta, .plan-pro .plan-tag { color: var(--charcoal); }
.who-a, .who-b, .plan-ent { color: var(--on-dark); }
.plan-pro li::before { border-color: var(--charcoal); }
.plan-pro li { border-color: color-mix(in srgb, var(--charcoal) 18%, transparent); }
.faq details[open] summary::after { color: var(--charcoal); }
.tag-pre { background: var(--charcoal); color: var(--mustard); }
/* swipe convention: red means go, so "no" is a charcoal outline and "yes" is ketchup */
.ask .btn-paper { background: transparent; }
.ask .btn-yolk { background: var(--tomato); color: var(--on-tomato); }

/* dark bands: tape, closing call, footer, Platinum rung */
.tape { background: var(--band); border-color: var(--band); }
.tape-track span:nth-child(even) { color: var(--cream); }
.tape-track span::after { color: var(--chilli); }
.join, .foot, .rung:nth-child(3) { background: var(--band); color: var(--cream); }
.join .lede { color: color-mix(in srgb, var(--cream) 82%, transparent); }
.join-fine, .foot p { color: color-mix(in srgb, var(--cream) 70%, transparent); }
.rung:nth-child(3) .how { color: color-mix(in srgb, var(--cream) 78%, transparent); }
.field input { border-color: var(--cream); }
.menu-grid .sticker { background: var(--mustard); }

/* ---------- new sections for option D ---------- */
.invite-bar { background: var(--mustard); color: var(--charcoal); text-align: center; font-weight: 700; padding: 0.7rem var(--gutter); border-bottom: var(--stroke) solid var(--charcoal); }
.invite-bar a { color: var(--charcoal); }
.trust { padding-block: 0 clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.trust ul { list-style: none; margin: 0; padding: 1.2rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 2rem; border-top: var(--stroke) solid var(--ink); }
.trust li { display: grid; gap: 0.2rem; }
.trust b { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; }
.trust span { color: var(--ink-soft); font-size: 0.95rem; }
@media (max-width: 760px) { .trust ul { grid-template-columns: 1fr; } }
.store { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.2rem; }
.store span { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.95rem; border: var(--stroke) solid var(--ink); border-radius: 10px; font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); }
.store small { font-weight: 600; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; background: var(--paper-deep); color: var(--ink); padding: 0.15rem 0.4rem; border-radius: 4px; }
.problem { text-align: center; padding-bottom: 0; }
.problem h2 { max-width: 22ch; margin-inline: auto; }
.problem .lede { margin: 1.3rem auto 0; }
.fallbacks { list-style: none; padding: 0; margin: 2.6rem auto 0; max-width: 60rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; text-align: left; }
.fallbacks li { background: var(--card); border: var(--stroke) solid var(--ink); border-radius: 18px 18px 18px 4px; padding: 0.9rem 1.1rem; }
.fallbacks q { display: block; font-weight: 700; quotes: "\201C" "\201D"; }
.fallbacks span { display: block; margin-top: 0.3rem; font-size: 0.88rem; color: var(--ink-soft); }
@media (max-width: 860px) { .fallbacks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .fallbacks { grid-template-columns: 1fr; } }
.time-cue { display: inline-block; margin-top: 1rem; font-weight: 700; background: var(--mustard); color: var(--charcoal); padding: 0.35rem 0.8rem; border-radius: 999px; }
.who { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.who-a { min-height: 0; }
.who-b { margin-top: 0; }
.who-c { background: var(--blush); color: var(--ink); }
.who-block h3, .who-b h3 { font-size: clamp(1.3rem, 0.95rem + 1.3vw, 2rem); }
@media (max-width: 960px) { .who { grid-template-columns: 1fr; } }

/* design-option switcher (review only; remove before launch) */
.variant-switch { display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--charcoal); color: var(--cream); padding: 6px 12px; font: 700 0.78rem/1 var(--font-body); }
.variant-switch span { letter-spacing: 0.1em; text-transform: uppercase; margin-right: 6px; opacity: 0.8; }
.variant-switch a { display: grid; place-items: center; min-width: 1.8rem; height: 1.8rem; padding: 0 0.6rem; border-radius: 999px; text-decoration: none; border: 2px solid transparent; color: var(--cream); }
.variant-switch a:hover { border-color: var(--cream); }
.variant-switch a[aria-current="page"] { background: var(--mustard); border-color: var(--mustard); color: var(--charcoal); }