/* Mcava landing v1, HQ R-179: Simran's Canva notes of 30 Oct. Loaded after r169.css (home page and recipe pages).
   The original logo (MEATS under MCAVA), the Notify me pill made to pop, the hero tidied, Our story's new words and the
   process from breeder farms to the plant, the clock's colour fixes, Contact us and FAQs & Certifications (both behind
   config flags), placeholders for a preview build. Colours are the brand's (main.css tokens). */

/* ---------- Layers: the rounded sections stack in page order (FAQs sits between Notify me and the close) ---------- */
.faq { z-index: 6; }
.close { z-index: 7; }
.foot { z-index: 8; }

/* ---------- Header: the brand's own lockup, MEATS under MCAVA ---------- */
/* Clear space as before: half of MCAVA's height on every side. MCAVA is 230.08 of the lockup's 355.82 units (64.66%),
   so the bar is the logo plus 2 x 32.33% of it. 44 px tall is 127 px wide (36 px, 104 px, on phones), over the
   guide's 96 px minimum. */
:root { --sh-logo: 44px; --sh-cs: calc(var(--sh-logo) * .3233); --sh-h: calc(var(--sh-logo) + 2 * var(--sh-cs)); }
@media (max-width: 1099px) { :root { --sh-logo: 36px; } }

/* Five sections in the menu now: a little tighter until the bar has room. */
@media (min-width: 1100px) and (max-width: 1320px) {
  .sh-nav a { padding: 0 9px; font-size: 14px; letter-spacing: .07em; }
  .sh-nav a::after { left: 9px; right: 9px; }
}

/* Notify me (the old "Coming soon · Gurgaon" pill): "make this pop more - highlight it". Rooster Red, ink edge. */
@media (min-width: 1100px) {
  .sh-cta {
    height: 44px; padding: 0 18px 0 16px; background: var(--red); border-color: var(--ink); color: var(--ink);
    font-weight: 700; box-shadow: 3px 3px 0 var(--ink);
    transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
  }
  .sh-cta:hover { background: var(--ink); border-color: var(--ink); color: var(--butter); box-shadow: 3px 3px 0 var(--red); transform: translate(-1px, -1px); }
  .sh-cta .sh-dot { width: 8px; height: 8px; background: var(--butter); animation-name: sh-pulse-ink; }
  .sh-cta:hover .sh-dot { background: var(--red); }
}
@keyframes sh-pulse-ink { 0%, 100% { box-shadow: 0 0 0 0 rgba(25, 25, 25, .55); } 50% { box-shadow: 0 0 0 5px rgba(25, 25, 25, 0); } }

/* ---------- Hero ---------- */
/* The time line and the scroll cue are gone, so the bottom keeps less room for them. */
.hero { padding-bottom: 64px; }
/* Her arrows: Big on flavour and Chicken that makes you come back move in, onto the clock's rim. */
@media (min-width: 901px) {
  .hero-stk--flavour { left: 15%; top: 21%; }
  .hero-stk--comeback { right: -1%; top: 8%; }
}
/* No Shortcuts, "+ from farm to fridge": a handwritten line under the sticker. */
.hero-stk-note { position: absolute; right: 4%; top: 100%; margin-top: 4px; transform: rotate(5deg); white-space: nowrap; color: var(--ink); font-size: clamp(20px, .6vw + 14px, 26px); }
@media (max-width: 900px) { .hero { padding-bottom: 56px; } }
@media (max-width: 640px) { .hero { padding-bottom: 36px; } }

/* ---------- Our story: Simran's words ---------- */
.story-copy { min-width: 0; }
.story-copy .lede { max-width: 34ch; }
.story-copy .body { max-width: 46ch; }
.story-end { margin-top: 1em; max-width: 36ch; font-weight: 700; font-size: clamp(20px, .5vw + 16px, 24px); line-height: 1.22; text-wrap: pretty; }

/* The logo strip (config showLogos): Star Foods first, then the restaurants. */
/* width: 100% so auto-fill counts columns from the real width; with only max-width it sized for 4 columns and pushed the story text off a phone screen */
.logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 12px; margin-top: clamp(24px, 3.4vh, 36px); width: 100%; max-width: 560px; }
.logo-slot { display: grid; place-items: center; min-height: 76px; padding: 12px; border-radius: 16px; background: rgba(255, 248, 238, .7); text-align: center; }
.logo-slot img { max-width: 100%; max-height: 52px; width: auto; }
.logo-slot--main { grid-column: 1 / -1; }

/* ---------- Our promise, now the rest of Our story: the process, breeder farms to the plant ---------- */
.process {
  position: relative; isolation: isolate; margin-top: clamp(20px, 2.4vw, 36px); overflow: hidden;
  background: var(--butter); border-radius: var(--radius); padding: clamp(40px, 6vw, 96px) clamp(28px, 6vw, 104px) clamp(44px, 5.6vw, 88px);
}
.process-head { padding-right: clamp(0px, 15vw, 230px); }
.process-title { margin: .24em 0 0 -.02em; font: 700 clamp(50px, 6.6vw, 124px)/.86 var(--f-display); text-transform: uppercase; letter-spacing: -.012em; }
.process-title .pt-w { display: block; text-wrap: balance; }
.process .pt-dot { color: var(--red); }
.process .promise-fox { right: clamp(24px, 4vw, 70px); top: clamp(30px, 4vw, 64px); }

.pr-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.6vw, 44px); margin-top: clamp(44px, 7vh, 80px); --badge: clamp(124px, 12.4vw, 196px); }
/* The way through, the panel's colours, the icons and the feed ticket: r181.css (R-181, Confetti's notes). */
.pr-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pr-badge { position: relative; display: grid; place-items: center; width: var(--badge); aspect-ratio: 1; color: var(--ink); }
.pr-step:nth-child(1) .pr-badge { rotate: -6deg; }
.pr-step:nth-child(2) .pr-badge { rotate: 5deg; }
.pr-step:nth-child(3) .pr-badge { rotate: -4deg; }
.pr-step:nth-child(4) .pr-badge { rotate: 7deg; }
.pr-badge > .stk-fx { position: absolute; inset: 0; display: grid; place-items: center; }
.pr-shape { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 8px 10px rgba(25, 25, 25, .16)); }
.pr-ic { position: relative; width: 60%; height: 60%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pr-dot { fill: currentColor; stroke: none; }
.pr-badge--red .stk-fill { fill: var(--red); }
.pr-badge--leaf .stk-fill { fill: var(--leaf); }
.pr-badge--yolk .stk-fill { fill: var(--yolk); }
.pr-n { margin-top: 22px; font: 500 14px/1 var(--f-display); letter-spacing: .18em; font-variant-numeric: tabular-nums; opacity: .72; }
.pr-label { margin-top: 8px; font: 700 clamp(24px, 2.2vw, 36px)/.95 var(--f-display); text-transform: uppercase; text-wrap: balance; }
.pr-feed { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 2vw, 28px); margin-top: clamp(36px, 5vh, 60px); padding-top: clamp(28px, 4vh, 44px); border-top: 2px dashed rgba(25, 25, 25, .28); }
.pr-feed-t { max-width: 24ch; font: 700 clamp(22px, 1.9vw, 32px)/1.02 var(--f-display); text-transform: uppercase; text-wrap: balance; }

@media (max-width: 1100px) {
  .process-head { padding-right: 0; }
  .pr-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
}
/* Phone: one under the other (the dotted line joining the badges: r181.css). */
@media (max-width: 640px) {
  .process { padding: 40px 22px 40px; }
  .process-title { font-size: clamp(40px, 11.6vw, 56px); }
  .pr-steps { grid-template-columns: 1fr; row-gap: 26px; margin-top: 34px; --badge: 96px; }
  .pr-step { display: grid; grid-template-columns: var(--badge) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 18px; align-items: center; text-align: left; }
  .pr-badge { grid-row: span 2; }
  .pr-n { margin-top: 0; align-self: end; }
  .pr-label { margin-top: 6px; align-self: start; font-size: 26px; }
  .pr-feed { justify-content: flex-start; gap: 18px; margin-top: 30px; padding-top: 26px; }
  .pr-feed-t { font-size: 21px; }
}

/* ---------- The problem: her question is the headline ---------- */
.problem-copy .h-xl { max-width: 14ch; }
.pb-l { display: block; }

/* ---------- Today's chicken ---------- */
/* "Processed today. Packed today. by the clock.": her words, the last three in the handwriting, as on her slide. */
.day-intro-sub { font: 600 clamp(22px, .9vw + 15px, 30px)/1.15 var(--f-body); }
.dis-by { font: 600 1.32em/1 var(--f-hand); margin-left: .12em; white-space: nowrap; }
/* 4:00 AM: the Cut today ticket was the clock face's Butter. Hen Pink now. */
.motion .day-ticket { background: var(--pink); }
/* 9:00 AM: Ava's own ground was the section's Butter (assets/svg/fox-commute-pink.svg: the same art on Hen Pink). */
/* Your kitchen: the label is a phrase now, a size down so it keeps to two lines. */
.motion .day-step[data-step="3"] .ds-label { font-size: clamp(30px, min(3.5vw, 5.6vh), 54px); }
.day-step[data-step="3"] .ds-label { font-size: clamp(30px, 3vw, 50px); }
@media (max-width: 760px) { .motion .day-step[data-step="3"] .ds-label { font-size: clamp(26px, 7.4vw, 34px); } }

/* ---------- Placeholders (preview builds only: the build refuses them in the public config) ---------- */
.ph-slot { display: inline-block; padding: 2px 10px 3px; border: 2px dashed rgba(25, 25, 25, .5); border-radius: 8px; background: rgba(255, 255, 255, .4); }
.ph-note { font-style: normal; font-weight: 600; font-size: .78em; opacity: .75; white-space: nowrap; }
.logo-slot .ph-slot { padding: 0; border: 0; background: none; font: 600 15px/1.15 var(--f-display); letter-spacing: .06em; text-transform: uppercase; }
.logo-slot:has(.ph-slot) { border: 2px dashed rgba(25, 25, 25, .5); background: rgba(255, 248, 238, .5); }
.draft-tag {
  display: inline-block; margin-top: 4px; padding: 7px 14px 8px; border: 2px dashed var(--ink); border-radius: 10px; background: var(--sun);
  font: 700 16px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; rotate: -2deg;
}

/* ---------- FAQs & Certifications (config showFaq, showCertifications) ---------- */
.faq {
  position: relative; background: var(--egg); color: var(--ink); border-radius: var(--radius) var(--radius) 0 0; margin-top: calc(-1 * var(--radius));
  padding: clamp(96px, 14vh, 150px) var(--pad) calc(clamp(80px, 12vh, 130px) + var(--radius));
}
.faq-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-bottom: clamp(28px, 5vh, 52px); }
.faq-head .h-xl { margin: 0; }
.faq-in { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr); gap: clamp(32px, 5vw, 90px); align-items: start; }
.faq--certs-only .faq-in { grid-template-columns: minmax(0, 520px); }
.faq-list { border-top: 2px solid rgba(25, 25, 25, .14); }
.faq-item { border-bottom: 2px solid rgba(25, 25, 25, .14); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 16px 0; cursor: pointer; list-style: none;
  font: 700 clamp(22px, 1.6vw, 28px)/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .01em;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:focus-visible { outline-offset: 2px; }
.faq-ic { position: relative; flex: none; width: 34px; height: 34px; border: 2px solid var(--ink); border-radius: 50%; transition: background-color .3s var(--ease), transform .4s var(--ease); }
.faq-ic::before, .faq-ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2.5px; margin: -1.25px 0 0 -7px; border-radius: 2px; background: currentColor; transition: transform .4s var(--ease); }
.faq-ic::after { transform: rotate(90deg); }
.faq-item[open] .faq-ic { background: var(--butter); }
.faq-item[open] .faq-ic::after { transform: rotate(0deg); }
.faq-q:hover .faq-ic { background: var(--butter); }
.faq-a { padding: 0 0 22px; }
.faq-a p { max-width: 54ch; font-size: clamp(19px, .3vw + 16px, 21px); line-height: 1.3; text-wrap: pretty; }
.certs { padding: clamp(22px, 2.4vw, 34px); border: 2px solid var(--ink); border-radius: clamp(22px, 2vw, 30px); background: #FFF8EE; }
.certs-t { margin-bottom: 18px; font: 700 clamp(24px, 2vw, 32px)/1 var(--f-display); text-transform: uppercase; }
.cert { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cert-mark { display: grid; place-items: center; min-width: 88px; height: 56px; padding: 0 12px; border-radius: 12px; background: var(--ink); color: var(--egg); font: 700 22px/1 var(--f-display); letter-spacing: .1em; }
.cert-v { font: 600 19px/1.2 var(--f-body); }
@media (max-width: 900px) { .faq-in { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .faq { padding-top: 84px; }
  .faq-q { font-size: 21px; min-height: 60px; }
  .faq-ic { width: 30px; height: 30px; }
}

/* ---------- The close: Contact us (config showContact), then where to find the app ---------- */
.close-lead { max-width: 17ch; margin: .3em 0 .5em; font: 700 clamp(40px, 4.6vw, 82px)/.94 var(--f-display); letter-spacing: -.005em; text-wrap: balance; }
.close-title--contact { font-size: clamp(48px, 5.8vw, 104px); text-wrap: balance; }
.contact .lede { max-width: 34ch; margin-bottom: 0; }
.ct-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 28px clamp(28px, 4vw, 64px); margin-top: clamp(28px, 4.4vh, 44px); }
.ct-h { margin-bottom: 14px; font: 700 15px/1 var(--f-display); letter-spacing: .18em; text-transform: uppercase; }
.ct-list li { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1.5px solid rgba(25, 25, 25, .16); }
.ct-list li:first-child { border-top: 1.5px solid rgba(25, 25, 25, .16); }
.ct-k { font: 500 13px/1 var(--f-display); letter-spacing: .18em; text-transform: uppercase; opacity: .72; }
.ct-v { font: 700 21px/1.2 var(--f-display); letter-spacing: .02em; overflow-wrap: anywhere; }
.ct-v .ph-slot, .ct-social .ph-slot { font-weight: 700; }
.ct-v a, .ct-social a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--red); }
.ct-v a:hover, .ct-social a:hover { text-decoration-color: currentColor; }
.ct-social { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font: 700 21px/1.2 var(--f-display); letter-spacing: .02em; }
.close-where-k { margin-top: clamp(40px, 6vh, 64px); }
.close-lead--sub { max-width: 30ch; margin: 14px 0 20px; font-weight: 600; font-size: clamp(21px, .7vw + 15px, 27px); line-height: 1.2; }
@media (max-width: 1100px) { .ct-cols { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .close-lead:not(.close-lead--sub) { font-size: clamp(36px, 10vw, 46px); }
  .close-title--contact { font-size: clamp(42px, 12vw, 56px); }
  .ct-list li { grid-template-columns: 78px minmax(0, 1fr); }
  .ct-v, .ct-social { font-size: 19px; }
}

/* ---------- Footer: the stacked logo, her line, the licence ---------- */
.foot-logo { height: 58px; }
.foot-cert { margin: 0 0 8px; font: 500 14px/1.5 var(--f-display); letter-spacing: .03em; color: rgba(252, 235, 217, .82); }
.foot .ph-slot { border-color: rgba(252, 235, 217, .55); background: transparent; }
@media (max-width: 640px) { .foot-logo { height: 48px; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .sh-cta:hover { transform: none; }
  .faq-ic, .faq-ic::before, .faq-ic::after { transition: none; }
}