/* home-hero.css: the hero's words and the calendar (landing-v3). Linked in the head: the hero words
   are the largest paint, so this file stays lean. The phone's look is home-phone.css, linked in the
   body just before the phone; this file only reserves the phone's room, so nothing moves when it
   arrives. Every color is a token or a mix of tokens. The calendar's finished frame is the default;
   its first frame is written under .hp-motion (home-play.js), so with no script or reduced motion
   the finished calendar shows. Nothing here hides or animates the words. */

/* Only the visitor's goal shows. goal.js sets html[data-goal] before the first paint; with no
   script there is no data-goal and Lose weight shows. */
html:not([data-goal=maintain]) .hero [data-g=maintain],
html:not([data-goal=muscle]) .hero [data-g=muscle],
html[data-goal=maintain] .hero [data-g=lose],
html[data-goal=muscle] .hero [data-g=lose] { display: none !important; }

.hero { position: relative; color: var(--onDark); background: radial-gradient(900px 560px at 80% 36%, color-mix(in srgb, var(--mint) 17%, transparent), transparent 62%), radial-gradient(760px 420px at 6% 0%, color-mix(in srgb, var(--ember) 7%, transparent), transparent 60%), linear-gradient(180deg, var(--hero-top) 0%, var(--hero-bottom) 100%); border-radius: 0 0 clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px); overflow: hidden; }
/* Three parts: the words, the store badges and the web button (copy), the calendar over the phone
   (demo), and Dr. Kahal's line and the medication list (more). The badges come before the web button,
   which is the web app only. From 981 px the demo is the right column beside the other two, so the
   calendar and the phone show together beside the headline; under that it comes right after the
   button, so a visitor on a phone sees the app before the list. */
.hero-in { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "demo" "more"; gap: 32px 64px; align-items: start; padding-top: clamp(40px, 5.5vw, 72px); padding-bottom: clamp(56px, 6.5vw, 92px); }
.hero-copy, .hero-more { min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.hero-copy { grid-area: copy; }
.hero-more { grid-area: more; }
.hero-stores { margin-bottom: -6px; }
.kick { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 7px 15px 7px 12px; border-radius: var(--pill); background: var(--glass6); border: 1px solid var(--glass12); color: var(--mintL); font-size: 14px; font-weight: 600; }
.kick i { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mint) 18%, transparent); }
.h1 { font-size: clamp(44px, 5.7vw, 80px); line-height: 0.98; font-weight: 800; letter-spacing: -0.037em; color: var(--onDark); text-wrap: balance; }
.h1 .em { display: block; margin-top: 4px; }
.hero-sub { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--onDarkDim); max-width: 32em; text-wrap: pretty; }
/* Under Lose weight's subline: the three goals, then with a medication or without. */
.hero-for { display: flex; flex-direction: column; gap: 4px; margin-top: -6px; }
.hero-for b { font-size: clamp(16px, 1.2vw, 17.5px); line-height: 1.4; font-weight: 700; color: var(--onDark); }
.hero-for > span { font-size: 15px; line-height: 1.45; color: var(--onDarkDim); }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
/* From 900 px the web button and its note are hidden (.app-door), so the row goes too and adds no gap. */
@media (min-width: 900px) { .hero-copy .cta { display: none; } }
.cta-note { font-size: 15px; line-height: 1.4; color: var(--onDarkDim); }
.trust { display: flex; align-items: center; gap: 14px; }
.trust picture { flex: 0 0 auto; }
.trust img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; border: 2px solid color-mix(in srgb, var(--mint) 55%, transparent); }
.trust p { font-size: 15px; line-height: 1.45; color: var(--onDarkDim); max-width: 30em; }
.trust b { color: var(--onDark); font-weight: 650; white-space: nowrap; }
.meds { display: flex; flex-direction: column; gap: 10px; padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--surface) 10%, transparent); }
.meds li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--onDarkDim); }
.meds .ic { margin-top: 2px; color: var(--mint); }
.meds .nomed { color: var(--ember); font-weight: 650; }
.meds .nomed .ic { color: var(--ember); }

/* The calendar over the phone. The calendar draws above the phone's glow, and is never wider than
   420 px stacked (the right column's width side by side). The phone's room is held here before
   home-phone.css arrives: a screen shorter than the app's (home-phone.css), so the calendar and the
   phone fit on one screen together. */
.hero-demo { grid-area: demo; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.hero-cal { position: relative; z-index: 1; width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 12px; }
.ph-zoom { --z: 1; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.ph { width: 356px; height: 450px; }
.story { width: 356px; min-height: 63px; }
/* The play button under the phone, for the calendar and the chat. It sits in a zoomed box, so its
   size is divided by that zoom (--z) to stay a 44 px target. */
.story-btn { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--onDark); background: var(--glass8); border: 1px solid color-mix(in srgb, var(--surface) 14%, transparent); transition: background-color 150ms ease; }
.story-btn { width: calc(44px / var(--z)); height: calc(44px / var(--z)); }
.story-btn:hover { background: color-mix(in srgb, var(--surface) 15%, transparent); }
/* The caption under the calendar shows where the calendar stands beside the phone (760 to 980 px);
   stacked, the calendar's own labels say it and the phone needs the room. */
.cal-foot { display: none; max-width: 560px; }

/* The calendar: four weeks from one doctor visit to the next (production's, under the words). The
   grid is a size container, so --c (one column) is known to the bubbles' tails and Cura's hops. */
.cal { --rh: 36px; --g: 6px; position: relative; width: 100%; max-width: 560px; padding: 13px 16px 15px; border-radius: 24px; background: linear-gradient(var(--glass8), color-mix(in srgb, var(--surface) 3%, transparent)); box-shadow: inset 0 0 0 1px var(--on-dark-sand18); }
.cal-wk, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--g); }
.cal-wk { margin-bottom: 8px; font-size: 11px; font-weight: 700; line-height: 13px; letter-spacing: 0.06em; text-align: center; color: var(--onDarkDim); }
.cal-grid { position: relative; grid-auto-rows: var(--rh); container-type: inline-size; --c: calc((100cqw - 6 * var(--g)) / 7); }
.cal-grid i { position: relative; border-radius: 11px; box-shadow: inset 0 0 0 1px var(--on-dark-sand18); font-style: normal; }
.cal-grid i::before, .cal-grid i::after { content: attr(data-n); position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-grid i::after { color: var(--onDarkDim); }
.cal-grid i[data-s]::before { z-index: 1; background: color-mix(in srgb, var(--mint) 38%, transparent); color: var(--onDark); font-weight: 700; }
.cal-grid i.cal-w::before { background: var(--mint); color: var(--hero-bottom); }
.cal-grid i.cal-w { box-shadow: inset 0 0 0 2px var(--ember); }
.cal-grid i.cal-v { box-shadow: none; }
.cal-grid i.cal-v::after { background: var(--sand); color: var(--hero-bottom); font-weight: 700; }
.cal-grid i.cal-nv::before { content: ""; background: none; box-shadow: 0 0 0 2px var(--mint); opacity: 0; }
.cal-tag { display: flex; align-items: center; justify-content: flex-end; grid-column: span 2; padding-right: 2px; font-size: 12.5px; font-weight: 700; line-height: 1.1; color: var(--onDark); white-space: nowrap; }
.cal-tag.cal-end { grid-column: span 4; display: grid; justify-content: start; align-items: center; padding: 0 0 0 4px; }
.cal-end > * { grid-area: 1 / 1; }
.cal-ready { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border-radius: var(--pill); background: var(--white); color: var(--ink); font-size: 13px; box-shadow: 0 8px 20px color-mix(in srgb, var(--ink-deep) 32%, transparent); transform-origin: 0 50%; }
.cal-ready .ic { color: var(--primary); }
.cal-next { opacity: 0; }
.cal-q { position: absolute; z-index: 2; display: flex; align-items: center; gap: 7px; height: var(--rh); margin: 0; padding: 7px 12px 7px 7px; border-radius: 14px; background: var(--white); color: var(--ink); font-size: 14px; font-weight: 600; line-height: 20px; white-space: nowrap; box-shadow: 0 10px 24px color-mix(in srgb, var(--ink-deep) 36%, transparent); transform-origin: var(--tx) var(--ty); }
.cal-q::after { content: ""; position: absolute; width: 10px; height: 10px; margin-left: -5px; background: inherit; border-radius: 2px; transform: rotate(45deg); left: var(--tx); top: calc(var(--ty) - 5px); }
.cal-q.q1 { grid-row: 2 / 3; grid-column: 2 / 8; top: 0; right: 0; --tx: calc(100% - var(--c) * 1.5 - var(--g)); --ty: 0%; }
.cal-q.q2 { grid-row: 4 / 5; grid-column: 1 / 7; top: 0; left: 0; --tx: calc(var(--c) * 1.5 + var(--g)); --ty: 0%; }
.cal-q.q3 { grid-row: 3 / 4; grid-column: 3 / 8; bottom: 0; right: 0; --tx: calc(100% - var(--c) * 1.5 - var(--g)); --ty: 100%; }
.cal-b { position: relative; flex: 0 0 auto; width: 20px; height: 20px; }
.cal-qm, .cal-ok { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; }
.cal-qm { background: var(--ember); color: var(--ink); font-size: 13px; font-weight: 800; opacity: 0; }
.cal-ok { background: var(--mint); color: var(--hero-bottom); }
.cal-cura { position: absolute; z-index: 3; grid-row: 5 / 6; grid-column: 3 / 4; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; transform: translate(calc(var(--dc, 0) * (var(--c) + var(--g))), calc(var(--dr, 0) * (var(--rh) + var(--g)))); }
.cal-hop, .cal-hop .ic { width: 100%; height: 100%; transform-origin: 50% 100%; }
.cal-hop .ic { filter: drop-shadow(0 3px 6px color-mix(in srgb, var(--ink-deep) 45%, transparent)); }
/* A day partly under a question bubble drops its number (home-hero.js marks it data-u). */
.cal-grid i[data-u]::before, .cal-grid i[data-u]::after { -webkit-text-fill-color: transparent; }

/* The calendar's first frame, only where the player will run it: no questions, no Cura, every day
   hollow. home-hero.js adds each beat's class to .cal; hp-done is the finished frame. */
.hp-motion .cal-q { transition: opacity 0.25s ease-out, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
.hp-motion .cal:not(.hp-done):not(.a1) .q1 { transform: rotate(-3deg); }
.hp-motion .cal:not(.hp-done):not(.a2) .q2 { transform: rotate(2.5deg); }
.hp-motion .cal:not(.hp-done):not(.a3) .q3 { transform: rotate(-2deg); }
.hp-motion .cal:not(.hp-done):not(.q1-in) .q1, .hp-motion .cal:not(.hp-done):not(.q2-in) .q2, .hp-motion .cal:not(.hp-done):not(.q3-in) .q3 { opacity: 0; transform: scale(0.5); }
.hp-motion .cal:not(.hp-done):not(.q1-in) i[data-n="5"], .hp-motion .cal:not(.hp-done):not(.q2-in) i[data-n="15"], .hp-motion .cal:not(.hp-done):not(.q3-in) i[data-n="26"] { box-shadow: inset 0 0 0 1px var(--on-dark-sand18); }
.hp-motion .cal-qm, .hp-motion .cal-ok { transition: opacity 0.2s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.hp-motion .cal:not(.hp-done):not(.a1) .q1 .cal-qm, .hp-motion .cal:not(.hp-done):not(.a2) .q2 .cal-qm, .hp-motion .cal:not(.hp-done):not(.a3) .q3 .cal-qm { opacity: 1; }
.hp-motion .cal:not(.hp-done):not(.a1) .q1 .cal-ok, .hp-motion .cal:not(.hp-done):not(.a2) .q2 .cal-ok, .hp-motion .cal:not(.hp-done):not(.a3) .q3 .cal-ok { opacity: 0; transform: rotate(-90deg) scale(0.3); }
.hp-motion .cal-grid i[data-s]::before { transition: opacity 0.2s ease-out var(--d, 0ms), transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) var(--d, 0ms); }
.hp-motion .cal:not(.hp-done):not(.f1) i[data-s="1"]::before, .hp-motion .cal:not(.hp-done):not(.f2) i[data-s="2"]::before, .hp-motion .cal:not(.hp-done):not(.f3) i[data-s="3"]::before, .hp-motion .cal:not(.hp-done):not(.f4) i[data-s="4"]::before { opacity: 0; transform: scale(0.4); }
.hp-motion .cal-cura { transition: transform 0.6s cubic-bezier(0.45, 0, 0.25, 1); }
.hp-motion .cal:not(.hp-done):not(.at4) .cal-cura { --dc: 3; --dr: -1; }
.hp-motion .cal:not(.hp-done):not(.at3) .cal-cura { --dc: -1; --dr: -2; }
.hp-motion .cal:not(.hp-done):not(.at2) .cal-cura { --dc: 3; --dr: -4; }
.hp-motion .cal-hop { transition: opacity 0.25s ease-out, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.hp-motion .cal:not(.hp-done):not(.c-in) .cal-hop { opacity: 0; transform: scale(0.3); }
.hp-motion .cal.hop2 .cal-hop { animation: calHop2 0.6s 1; }
.hp-motion .cal.hop3 .cal-hop { animation: calHop3 0.6s 1; }
.hp-motion .cal.hop4 .cal-hop { animation: calHop4 0.6s 1; }
.hp-motion .cal-next, .hp-motion .cal-ready { transition: opacity 0.25s ease-out, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.hp-motion .cal:not(.hp-done):not(.ready) .cal-next { opacity: 1; }
.hp-motion .cal:not(.hp-done):not(.ready) .cal-ready { opacity: 0; transform: translateX(-8px) scale(0.7); }
.hp-motion .cal.ready .cal-nv::before { animation: calRing 1s ease-out 1; }
/* A day's number under a bubble the film has not shown yet stays. */
.hp-motion .cal:not(.hp-done):not(.q1-in) i[data-u="1"]::before, .hp-motion .cal:not(.hp-done):not(.q1-in) i[data-u="1"]::after,
.hp-motion .cal:not(.hp-done):not(.q2-in) i[data-u="2"]::before, .hp-motion .cal:not(.hp-done):not(.q2-in) i[data-u="2"]::after,
.hp-motion .cal:not(.hp-done):not(.q3-in) i[data-u="3"]::before, .hp-motion .cal:not(.hp-done):not(.q3-in) i[data-u="3"]::after { -webkit-text-fill-color: currentColor; }

/* Build muscle (production's landing-v2 goal styles): no end line, the far end keeps "Week 4"; the dumbbells
   question is long and keeps its question mark; the second question sits on day 14. */
html[data-goal=muscle] .cal-next { opacity: 1; }
html[data-goal=muscle] .cal-ready { display: none; }
html[data-goal=muscle] .cal-q.q3 { grid-column: 2 / 8; }
html[data-goal=muscle] .cal .q3 .cal-qm { opacity: 1; }
html[data-goal=muscle] .cal .q3 .cal-ok { opacity: 0; }
html[data-goal=muscle] .cal-q.q2 { --tx: calc(var(--c) * 0.5); }
html[data-goal=muscle] .cal-grid i[data-n="15"] { box-shadow: inset 0 0 0 1px var(--on-dark-sand18); }
html[data-goal=muscle] .cal-grid i[data-n="15"]::before { background: color-mix(in srgb, var(--mint) 38%, transparent); color: var(--onDark); }
html[data-goal=muscle] .cal-grid i[data-n="14"] { box-shadow: inset 0 0 0 2px var(--ember); }
html[data-goal=muscle] .cal-grid i[data-n="14"]::before { background: var(--mint); color: var(--hero-bottom); }
html[data-goal=muscle].hp-motion .cal:not(.hp-done):not(.q2-in) i[data-n="14"] { box-shadow: inset 0 0 0 1px var(--on-dark-sand18); }
html[data-goal=muscle].hp-motion .cal.at2:not(.at3):not(.hp-done) .cal-cura { --dc: -2; }
/* Maintain's longer end line keeps to two short lines on a narrow calendar. */
html[data-goal=maintain] .cal-ready { white-space: normal; line-height: 15px; padding-top: 5px; padding-bottom: 5px; }

@keyframes calHop2 { 0% { transform: none; animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); } 45% { transform: translateY(-22px); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); } 86% { transform: scale(1.08, 0.86); } 100% { transform: none; } }
@keyframes calHop3 { 0% { transform: none; animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); } 45% { transform: translateY(-22px); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); } 86% { transform: scale(1.08, 0.86); } 100% { transform: none; } }
@keyframes calHop4 { 0% { transform: none; animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); } 45% { transform: translateY(-22px); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); } 86% { transform: scale(1.08, 0.86); } 100% { transform: none; } }
@keyframes calRing { from { transform: scale(1); opacity: 0.9; } to { transform: scale(1.7); opacity: 0; } }

@media (max-width: 1023px) {
  html[data-goal=maintain] .cal-ready [data-g=maintain] { display: inline-block; max-width: 8em; }
}
@media (max-width: 899px) {
  html[data-goal=maintain] .cal-ready { font-size: 12px; }
}
/* 760 to 980 px: the calendar beside the phone, its caption under it. */
@media (min-width: 760px) and (max-width: 980px) {
  .hero-demo { flex-direction: row; justify-content: center; gap: 24px; }
  .hero-cal { flex: 1 1 340px; }
  .cal-foot { display: block; }
  .ph-zoom { zoom: 0.88; --z: 0.88; }
  .ph { height: 520px; }
}
/* From 981 px: the words and the rest on the left, the calendar over the phone on the right, at the
   top of the hero so both are on screen at load. The column narrows with the window. */
@media (min-width: 981px) {
  .hero-in { grid-template-columns: minmax(0, 640px) clamp(340px, 27vw, 400px); grid-template-rows: auto 1fr; grid-template-areas: "copy demo" "more demo"; justify-content: space-between; row-gap: 14px; }
  .hero-stores { margin-bottom: 14px; }
  .hero-demo { margin-top: -16px; }
  .hero-cal { max-width: none; }
}
@media (min-width: 981px) and (max-height: 920px) { .ph-zoom { zoom: 0.88; --z: 0.88; } }
@media (min-width: 981px) and (max-height: 820px) { .hero-in { padding-top: 28px; } .ph-zoom { zoom: 0.8; --z: 0.8; } }
@media (max-width: 400px) {
  .ph-zoom { zoom: 0.94; --z: 0.94; }
  .cal { padding: 12px 12px 14px; border-radius: 22px; }
  .cal-q { font-size: 13.5px; }
}
@media (max-width: 374px) { html[data-goal=muscle] .cal-q.q3 { font-size: 12.5px; } }
@media (max-width: 370px) { .ph-zoom { zoom: 0.86; --z: 0.86; } }
@media (max-width: 339px) {
  .cal-q { font-size: 12.5px; gap: 5px; padding-right: 9px; }
  .cal-tag { font-size: 11.5px; }
  html[data-goal=muscle] .cal-q.q3 { font-size: 12px; }
}

/* Critic fixes: a line under the calendar that says what it shows, and, for Build muscle, a way
   down to the Workout Builder preview. */
.cal-cap { margin-top: -14px; max-width: 560px; font-size: 14.5px; line-height: 1.45; color: var(--onDarkDim); }
.hero-jump a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ember); font-size: 16.5px; font-weight: 700; text-underline-offset: 3px; }
.hero-jump a:hover { color: var(--onDark); }
.cal-foot .cal-cap { margin-top: 0; }