/* Healthy Kitchen — Marketing site responsive layer.
   Two breakpoints: tablet (<=1024px) and mobile (<=640px).
   Rules here only ever touch layout-shifting properties (grid columns,
   horizontal padding, sticky→static, show/hide) via !important so they can
   win over the inline styles the components ship with — everything else
   (color, type, spacing rhythm) stays exactly as authored per breakpoint. */

/* ---------- Containers ---------- */
@media (max-width: 1024px) {
  .hk-container { padding-left: 24px !important; padding-right: 24px !important; }
}
@media (max-width: 640px) {
  .hk-container { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ---------- Generic grid collapses ---------- */
@media (max-width: 1024px) {
  .hk-grid-2 { grid-template-columns: 1fr !important; }
  .hk-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .hk-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .hk-sticky { position: static !important; top: auto !important; }
}
@media (max-width: 640px) {
  .hk-grid-3 { grid-template-columns: 1fr !important; }
  .hk-grid-4 { grid-template-columns: 1fr !important; }
}

/* ---------- Header ---------- */
.hk-nav-toggle { display: none; }
@media (max-width: 1024px) {
  .hk-nav-desktop { display: none !important; }
  .hk-header-cta { display: none !important; }
  .hk-nav-toggle { display: flex !important; }
}
@media (max-width: 480px) {
  .hk-logo img { height: 40px !important; }
}

/* ---------- Hero ---------- */
@media (max-width: 1024px) {
  .hk-hero-grid { gap: 40px !important; }
}

/* ---------- Why Choose Us ---------- */
@media (max-width: 640px) {
  .hk-watermark { display: none !important; }
}

/* ---------- Promo signup form ---------- */
@media (max-width: 640px) {
  .hk-promo-form { flex-direction: column !important; }
}

/* ---------- Footer ---------- */
@media (max-width: 640px) {
  .hk-footer-bottom { flex-direction: column !important; gap: 10px !important; align-items: flex-start !important; }
}

/* ---------- Checkout ---------- */
@media (max-width: 640px) {
  .hk-grid-2-tight { grid-template-columns: 1fr !important; }
}
@media (max-width: 1024px) {
  .hk-timeslot-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 480px) {
  .hk-timeslot-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---------- Payment ---------- */
@media (max-width: 480px) {
  .hk-payment-sim-row { flex-direction: column !important; }
}

/* ---------- Muscle UP: Why (accordion → stacked cards on mobile) ---------- */
@media (max-width: 760px) {
  .hk-muscleacc { flex-direction: column !important; }
  .hk-muscleacc-panel { min-height: 0 !important; gap: 18px !important; transform: none !important; }
}

/* ---------- Muscle UP: The Gap heading offset ---------- */
@media (max-width: 640px) {
  .hk-gap-heading { margin-left: 0 !important; }
}

/* ---------- Ingredient modal ---------- */
@media (max-width: 640px) {
  .hk-ingmodal-pad-top { padding-left: 20px !important; padding-right: 20px !important; }
  .hk-ingmodal-pad-body { padding-left: 20px !important; padding-right: 20px !important; }
  .hk-ingmodal-pad-foot { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ---------- Home hero (kinetic) ---------- */
@media (max-width: 900px) {
  .hk-hero-kinetic-copy h1 { white-space: normal !important; font-size: min(8.4vw, 44px) !important; line-height: 1.06 !important; }
  .hk-hero-kinetic-copy h1 .hk-hero-line1 { display: flex; justify-content: center; align-items: baseline; gap: 0.24em; white-space: nowrap; }
  .hk-hero-kinetic-copy h1 .hk-hero-line1 > span { overflow: visible; }
  .hk-hero-kinetic-copy h1 .hk-hero-line2 { display: block; }
  .hk-hero-kinetic-copy p { white-space: normal !important; font-size: 15px !important; }
}
@media (max-width: 640px) {
  .hk-hero-kinetic-copy { padding: 28px 20px 0 !important; gap: 12px !important; }
  .hk-hero-kinetic-band { height: 180px !important; margin-top: 26px !important; }
}
@media (max-width: 430px) {
  .hk-hero-kinetic-band { height: 150px !important; }
}

/* ---------- Centered statement headings ---------- */
@media (max-width: 900px) {
  .hk-statement, .hk-statement span { white-space: normal !important; }
  .hk-statement { font-size: clamp(26px, 5.4vw, 40px) !important; }
}
@media (max-width: 640px) {
  .hk-statement { font-size: clamp(24px, 6.6vw, 32px) !important; text-wrap: balance; }
}

/* ---------- Accordion cards: tap affordance on mobile ---------- */
@media (max-width: 760px) {
  .hk-muscleacc { height: auto !important; }
  .hk-muscleacc-panel { height: auto !important; padding: 18px 52px 18px 18px !important; }
  .hk-muscleacc-panel::after {
    content: "+"; position: absolute; right: 14px; top: 14px; width: 28px; height: 28px;
    border-radius: 999px; border: 1px solid rgba(253,252,248,0.35); display: flex;
    align-items: center; justify-content: center; font-size: 17px; line-height: 1;
    color: var(--ivory-50); opacity: 0.8;
  }
  .hk-muscleacc-panel[aria-selected="true"]::after { content: "–"; background: rgba(253,252,248,0.18); opacity: 1; }
  .hk-muscleacc-panel h3 { font-size: 20px !important; }
}

/* ---------- Quote strip → Meal plans spacing ---------- */
@media (max-width: 1024px) {
  .hk-plans-section > div { padding-top: 44px !important; }
}
@media (max-width: 640px) {
  .hk-plans-section > div { padding-top: 30px !important; }
}

/* ---------- Quote strip ---------- */
@media (max-width: 640px) {
  .hk-quote > div { padding: 20px 12px !important; gap: 10px !important; }
  .hk-quote p { font-size: min(4.2vw, 20px) !important; line-height: 1.45 !important; }
  .hk-quote img { width: 88px !important; height: 88px !important; }
  .hk-quote > div > div:last-child { max-width: 92px; }
  .hk-quote > div > div:last-child span:last-child { font-size: 10px !important; line-height: 1.3; }
  .hk-quote > span { font-size: 88px !important; left: 4px !important; top: -14px !important; }
}

/* ---------- Plan hero title ---------- */
@media (max-width: 900px) {
  .hk-plan-title { white-space: normal !important; font-size: clamp(30px, 6.4vw, 44px) !important; line-height: 1.06 !important; }
}

/* ---------- Footer: compact on mobile ---------- */@media (max-width: 640px) {
  .hk-footer-grid { padding: 36px 16px 24px !important; gap: 26px !important; }
  .hk-footer-logo { height: 56px !important; }
  .hk-footer-brand p { margin-top: 12px !important; font-size: 13px !important; }
  .hk-footer-col h4 { margin-bottom: 10px !important; }
  .hk-footer-col ul { gap: 8px !important; }
  .hk-footer-col p { font-size: 19px !important; margin-bottom: 10px !important; }
  .hk-footer-bottom { padding: 14px 16px !important; font-size: 11px !important; }
}
@media (max-width: 480px) {
  .hk-footer-grid { grid-template-columns: 1fr 1fr !important; }
  .hk-footer-brand { grid-column: 1 / -1; }
  .hk-footer-col:last-of-type { grid-column: 1 / -1; }
}

/* ---------- Why Choose Us: stacked accordion cards on mobile ---------- */
.hk-why-inline { display: none; }
@media (max-width: 760px) {
  .hk-why-grid { gap: 26px !important; }
  .hk-why-visual { display: none !important; }
  .hk-why-right { min-height: 0 !important; gap: 22px !important; }
  .hk-why-tabs { gap: 12px !important; }
  .hk-why-tab {
    position: relative; display: grid !important; grid-template-columns: 34px 1fr !important;
    gap: 8px 12px !important; align-items: center !important;
    padding: 16px 52px 16px 16px !important; margin: 0 !important;
    background: rgba(253,252,248,0.02) !important;
    border: 1px solid rgba(253,252,248,0.18) !important;
    border-radius: var(--radius-lg) !important; transform: none !important;
  }
  .hk-why-tab[aria-selected="true"] { background: rgba(253,252,248,0.09) !important; }
  .hk-why-tab > span:nth-of-type(2) { opacity: 1 !important; font-size: 19px !important; }
  .hk-why-tab > span:nth-of-type(3) { display: none !important; }
  .hk-why-inline { display: block; }
}

@media (max-width: 760px) {
  .hk-why-tab { overflow: hidden !important; }
  .hk-why-tab-icon { display: block !important; }
  .hk-why-tab .hk-why-inline, .hk-why-tab > span:nth-of-type(1), .hk-why-tab > span:nth-of-type(2) { position: relative; z-index: 1; }
}
.hk-why-tab-icon { display: none; }

/* ---------- Plan page hero: tighter gap before next section ---------- */
@media (max-width: 1024px) {
  .hk-plan-hero { padding-bottom: 36px !important; }
}
@media (max-width: 640px) {
  .hk-plan-hero { padding-bottom: 22px !important; }
}

/* ---------- Longevity stat band: one-line labels on mobile ---------- */

/* ---------- AIP closing note: balanced two-line wrap on mobile ---------- */
@media (max-width: 640px) {
  .hk-aip-note { font-size: 11px !important; line-height: 1.5 !important; }
  .hk-aip-l1, .hk-aip-l2 { display: block; white-space: nowrap; }
}

@media (max-width: 760px) {
  /* The reveal area is reserved in EVERY card, so opening one changes no height at all —
     only the copy fades in. Auto-advance therefore can never shift the page. */
  /* Accordion again — but the open body is ALWAYS exactly 152px and the closing card
     shrinks with the identical timing, so the two cancel out: total height never changes. */
  .hk-why-inline { max-height: none !important; height: 0 !important; overflow: hidden; opacity: 0; transition: height 0.4s linear, opacity 0.3s ease !important; }
  .hk-why-tab[aria-selected="true"] .hk-why-inline { height: 152px !important; opacity: 1; }
  .hk-why-inline p:last-child { font-size: 14px !important; }
  .hk-why-tab { padding: 16px !important; align-items: start !important; }
}

/* ---------- Kill sideways jitter from marquees / rotated cards on mobile ---------- */
@media (max-width: 900px) {
  html, body { overflow-x: hidden; max-width: 100%; }
}

/* ---------- Muscle UP daily-total band: all four stats on one row on mobile ---------- */
@media (max-width: 640px) {
  .hk-mu-total { padding: 22px 18px !important; gap: 14px !important; }
  .hk-mu-total-stats { gap: 10px !important; flex-wrap: nowrap !important; width: 100%; justify-content: space-between; }
  .hk-mu-total-stat > span:first-child { font-size: 27px !important; line-height: 1 !important; }
  .hk-mu-total-stat > span:last-child { font-size: 9px !important; letter-spacing: 0.06em !important; white-space: nowrap; }
}

/* ---------- Accordion cards: stable height while auto-advancing ----------
   Same approach as the homepage .hk-why-inline fix above: on mobile the open
   body is ALWAYS exactly one fixed height per page (the tallest card at that
   width plus one line of headroom for device font metrics) and the closing
   card shrinks with the identical linear timing, so opening and closing cancel
   out and the calculator below never moves. Desktop (> 760px) is untouched. */
@media (max-width: 760px) {
  .hk-muscleacc-panel > div > div { max-height: none !important; height: 0 !important; overflow: hidden; opacity: 0; transition: height 0.4s linear, opacity 0.3s ease !important; }
  .hk-muscleacc-panel[aria-selected="true"] > div > div { opacity: 1; }
  /* The caption above the card title must move the same way as the body:
     it animated max-height with an eased, delayed curve against a 13px line,
     so the opening caption grew early and the closing one shrank late - a
     7px transient on every rotation. Same fixed height, same linear timing. */
  .hk-muscleacc-panel > div > span:first-child { max-height: none !important; height: 0 !important; overflow: hidden; opacity: 0; transition: height 0.4s linear, opacity 0.3s ease !important; }
  .hk-muscleacc-panel[aria-selected="true"] > div > span:first-child { height: 15px !important; opacity: 1; }
  .hk-muscleacc[aria-label="How the healing works"] .hk-muscleacc-panel[aria-selected="true"] > div > div { height: 102px !important; }
  .hk-muscleacc[aria-label="How the protocol works"] .hk-muscleacc-panel[aria-selected="true"] > div > div { height: 102px !important; }
  .hk-muscleacc[aria-label="How the protocol beats the overgrowth"] .hk-muscleacc-panel[aria-selected="true"] > div > div { height: 153px !important; }
  .hk-muscleacc[aria-label="How the AIP framework works"] .hk-muscleacc-panel[aria-selected="true"] > div > div { height: 102px !important; }
  .hk-muscleacc[aria-label="How the cleanse resets your system"] .hk-muscleacc-panel[aria-selected="true"] > div > div { height: 153px !important; }
  .hk-muscleacc[aria-label="How a gentle detox works"] .hk-muscleacc-panel[aria-selected="true"] > div > div { height: 128px !important; }
  .hk-muscleacc[aria-label="Why Muscle UP"] .hk-muscleacc-panel[aria-selected="true"] > div > div { height: 102px !important; }
}
@media (max-width: 360px) {
  .hk-muscleacc[aria-label="How the healing works"] .hk-muscleacc-panel[aria-selected="true"] > div > div { height: 128px !important; }
  .hk-muscleacc[aria-label="How the protocol works"] .hk-muscleacc-panel[aria-selected="true"] > div > div { height: 102px !important; }
  .hk-muscleacc[aria-label="How the protocol beats the overgrowth"] .hk-muscleacc-panel[aria-selected="true"] > div > div { height: 205px !important; }
  .hk-muscleacc[aria-label="How the AIP framework works"] .hk-muscleacc-panel[aria-selected="true"] > div > div { height: 153px !important; }
  .hk-muscleacc[aria-label="How the cleanse resets your system"] .hk-muscleacc-panel[aria-selected="true"] > div > div { height: 205px !important; }
  .hk-muscleacc[aria-label="How a gentle detox works"] .hk-muscleacc-panel[aria-selected="true"] > div > div { height: 179px !important; }
  .hk-muscleacc[aria-label="Why Muscle UP"] .hk-muscleacc-panel[aria-selected="true"] > div > div { height: 128px !important; }
}

/* ---------- Route headings: programmatic focus without a visible ring ----------
   On every route change the app moves focus to the page's H1 (tabindex="-1")
   so screen readers announce the new page. That heading is not interactive
   and cannot be reached with Tab, so a focus ring on it guides nobody, yet
   iOS Safari paints its default blue ring around it. Only that case is
   silenced; every interactive control keeps its focus indicator. */
h1[tabindex="-1"]:focus { outline: none; }

/* ---------- Accordion cards: stable block height in the row layout ----------
   Tablet and desktop keep the row layout, where the block is as tall as its
   tallest card. On the pages whose open cards differ in length the block was
   still moving by up to 50px per rotation. The block now reserves the height
   of its tallest state for that width band (measured, narrowest width of the
   band), so rotation never changes the document height; align-items:stretch
   fills the cards, nothing else changes. */
/* Tablet portrait: while a card's flex share grows (0.6s) its copy is still
   wrapping in the narrow card, so the row briefly exceeds every settled
   height. The reserved height is the tallest frame seen during rotation at
   the narrowest width of the band, plus 4px for device font metrics. */
@media (min-width: 761px) and (max-width: 1024px) {
  .hk-muscleacc[aria-label="How the healing works"] { min-height: 258px; }
  .hk-muscleacc[aria-label="How the protocol works"] { min-height: 258px; }
  .hk-muscleacc[aria-label="How the AIP framework works"] { min-height: 258px; }
  .hk-muscleacc[aria-label="How the protocol beats the overgrowth"] { min-height: 304px; }
  .hk-muscleacc[aria-label="How the cleanse resets your system"] { min-height: 310px; }
  .hk-muscleacc[aria-label="How a gentle detox works"] { min-height: 284px; }
  .hk-muscleacc[aria-label="Why Muscle UP"] { min-height: 268px; }
}
@media (min-width: 1025px) {
  .hk-muscleacc[aria-label="How the protocol beats the overgrowth"] { min-height: 254px; }
  .hk-muscleacc[aria-label="How the cleanse resets your system"] { min-height: 254px; }
  .hk-muscleacc[aria-label="How a gentle detox works"] { min-height: 254px; }
  .hk-muscleacc[aria-label="Why Muscle UP"] { min-height: 264px; }
}

/* Muscle UP totals: four stats on one line overrun the viewport below
   400px (the last stat was cut off at 320-390px). On narrow phones the row
   wraps into two rows of two; wider screens keep the single line. */
@media (max-width: 430px) {
  .hk-mu-total-stats { flex-wrap: wrap !important; justify-content: flex-start !important; row-gap: 14px; }
  .hk-mu-total-stats > * { flex: 1 1 calc(50% - 5px) !important; min-width: 0; }
}