/* The Watch page: the homepage's V5 system (v5.css, v5.js), plus a hero for
   the watch, the three steps, and the hand-off out of the dark app section. */

/* --- Hero: the watch on a dark tile, the invite beside it ----------------- */
.whero { padding: calc(var(--header-h) + clamp(40px, 6vw, 80px)) 0 clamp(24px, 4vw, 48px); background: var(--bg); }
.whero__inner { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }
.whero__copy { display: grid; gap: 22px; align-content: center; }
/* Two lines, always: "Start today on" / "your Apple Watch." The size is
   capped so the second line fits the copy column at every width. */
.whero__title { font-size: clamp(2.5rem, 4.8vw, 4.25rem); font-weight: 700; line-height: 1; letter-spacing: -0.025em; }
.whero__title > span { display: block; white-space: nowrap; }
.whero__lead { max-width: 36ch; font-size: clamp(1.0625rem, 1.35vw, 1.25rem); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.whero .beta__form { margin-top: 4px; }
.whero__fine { max-width: 46ch; font-size: 0.9375rem; color: var(--ink-2); text-wrap: pretty; }
.whero__stage {
  --ww: clamp(150px, 16vw, 210px);
  --ui-ink: #151515;
  --ui-2: #61615C;
  --ui-3: #A3A39D;
  --ui-line: rgba(21, 21, 21, 0.07);
  --ui-track: #E8E8E6;
  --ui-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  overflow: hidden;
  padding: clamp(40px, 5vw, 64px) 24px 0;
  border-radius: var(--r-xl);
  background: radial-gradient(120% 80% at 50% -10%, #2E2E2E 0%, #222222 55%, #1C1C1C 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.whero__stage .ui-phone { --pw: 320px; --ph: 540px; flex: none; }
.whero .watch { margin: 0 calc(var(--ww) * -0.16) calc(var(--ww) * -0.22) 0; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.5)); }
/* A soft lime ring leaves the watch each time an insight lands on the phone. */
.whero__ping {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 96%;
  aspect-ratio: 1;
  margin: -48% 0 0 -48%;
  border-radius: 50%;
  border: 2px solid var(--lime);
  opacity: 0;
  pointer-events: none;
}
@media (min-width: 900px) {
  .whero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .whero__stage { min-height: 560px; }
}
@media (max-width: 599px) {
  .whero .beta__form .btn { width: 100%; }
  .whero__stage { --ww: min(124px, 32vw); padding: 32px 8px 0; }
  .whero__stage .ui-phone { --pw: min(252px, 66vw); --ph: 480px; }
  .whero__stage .ui-island { width: 64px; margin-left: -32px; }
}

/* The phone: the Lunch with Maya conversation in the Oct 13 design. */
.wph { display: flex; flex-direction: column; gap: 10px; padding: 0 14px; background: #F0F0F0; color: var(--ui-ink); font-size: 13px; line-height: 18px; }
.wph__status { display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 2px 10px 0 16px; font-size: 15px; font-weight: 600; }
.wph__status svg { width: 40px; height: 12px; fill: currentColor; }
.wph__bar { display: flex; justify-content: space-between; margin-bottom: 4px; }
.wph__bar span { display: flex; gap: 6px; }
.wph__round { display: block; width: 34px; height: 34px; border-radius: 50%; background: #fff center / 14px no-repeat; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
.wph__bar > .wph__round { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10 3.5 5.5 8l4.5 4.5' fill='none' stroke='%23151515' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.wph__bar span .wph__round:first-child { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 9.5V2.5M5.25 5 8 2.25 10.75 5M5.5 7H5a1.75 1.75 0 0 0-1.75 1.75v3.5C3.25 13.2 4.03 14 5 14h6c.97 0 1.75-.8 1.75-1.75v-3.5C12.75 7.78 11.97 7 11 7h-.5' fill='none' stroke='%23151515' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.wph__bar span .wph__round:last-child { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='3' cy='8' r='1.4' fill='%23151515'/%3E%3Ccircle cx='8' cy='8' r='1.4' fill='%23151515'/%3E%3Ccircle cx='13' cy='8' r='1.4' fill='%23151515'/%3E%3C/svg%3E"); }
.wph__sub { font-size: 12px; color: var(--ui-2); }
.wph__h1 { margin-top: -6px; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
.wph__cards { display: grid; gap: 8px; margin-top: 4px; }
.wph__card { display: grid; gap: 6px; padding: 12px 14px 13px; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
.wph__head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.wph__ico { flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6' cy='6' r='3.2' fill='%23151515'/%3E%3Ccircle cx='11.5' cy='10.5' r='2' fill='%23151515'/%3E%3C/svg%3E") center / 13px no-repeat; }
.wph__ico--you { background: #4A4A46 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='5.5' r='2.8' fill='%23fff'/%3E%3Cpath d='M3 13.5c.6-2.6 2.4-4 5-4s4.4 1.4 5 4' fill='%23fff'/%3E%3C/svg%3E") center / 13px no-repeat; }
.wph__ico--next { background: #5B4FD6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='5.5' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3Ccircle cx='8' cy='8' r='2' fill='%23fff'/%3E%3C/svg%3E") center / 13px no-repeat; }
.wph__why { margin-left: auto; padding: 3px 9px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(21, 21, 21, 0.14); font-size: 11px; font-weight: 600; }
.wph__label { margin-top: -2px; font-size: 11px; color: var(--ui-3); }
.wph__text { font-size: 13px; line-height: 18px; }

/* The loop: 14 s. The cards rise in one by one from 2 s, hold, then leave
   together and the cycle starts over. Reduced motion shows them all. */
@media (prefers-reduced-motion: no-preference) {
  .whero__stage .wph__card { opacity: 0; translate: 0 14px; animation: 14s var(--ease) infinite both; }
  .whero__stage .wph__card:nth-child(1) { animation-name: ins-1; }
  .whero__stage .wph__card:nth-child(2) { animation-name: ins-2; }
  .whero__stage .wph__card:nth-child(3) { animation-name: ins-3; }
  .whero__stage .wph__card:nth-child(4) { animation-name: ins-4; }
  .whero__ping { animation: ping 14s var(--ease-soft) infinite; }
}
@keyframes ins-1 { 0%, 14% { opacity: 0; translate: 0 14px; } 19%, 88% { opacity: 1; translate: none; } 93%, 100% { opacity: 0; translate: 0 -8px; } }
@keyframes ins-2 { 0%, 24% { opacity: 0; translate: 0 14px; } 29%, 88% { opacity: 1; translate: none; } 93%, 100% { opacity: 0; translate: 0 -8px; } }
@keyframes ins-3 { 0%, 34% { opacity: 0; translate: 0 14px; } 39%, 88% { opacity: 1; translate: none; } 93%, 100% { opacity: 0; translate: 0 -8px; } }
@keyframes ins-4 { 0%, 44% { opacity: 0; translate: 0 14px; } 49%, 88% { opacity: 1; translate: none; } 93%, 100% { opacity: 0; translate: 0 -8px; } }
@keyframes ping {
  0%, 11% { transform: scale(0.7); opacity: 0; }
  12% { transform: scale(0.7); opacity: 0.45; }
  19% { transform: scale(1.55); opacity: 0; }
  21% { transform: scale(0.7); opacity: 0; }
  22% { transform: scale(0.7); opacity: 0.45; }
  29% { transform: scale(1.55); opacity: 0; }
  31% { transform: scale(0.7); opacity: 0; }
  32% { transform: scale(0.7); opacity: 0.45; }
  39% { transform: scale(1.55); opacity: 0; }
  41% { transform: scale(0.7); opacity: 0; }
  42% { transform: scale(0.7); opacity: 0.45; }
  49% { transform: scale(1.55); opacity: 0; }
  51%, 100% { transform: scale(0.7); opacity: 0; }
}

/* --- Three steps --------------------------------------------------------- */
.steps { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.step { display: grid; gap: 14px; align-content: start; padding: clamp(24px, 3vw, 36px); border-radius: var(--r-xl); background: var(--card); }
.step__n { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.step__title { font-size: clamp(1.5rem, 2vw, 1.875rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; }
.step__text { max-width: 34ch; color: var(--ink-2); text-wrap: pretty; }
@media (min-width: 700px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- Out of the app section: a rounded white edge, as on the homepage ---- */
.app + .section { position: relative; z-index: 1; margin-top: calc(var(--r-xl) * -1); padding-top: var(--section); border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--bg); }