/* gymworkoutspinner.com: what the home page adds to /shared/site.css */

/* The hero carries the header's blue down the page, with the spinner wheel
   (the app icon's) turning slowly behind the phone */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #0848C2 0%, #0B5FFF 45%, #1A8CFF 80%, #00C2FF 120%);
  color: #fff;
  padding: 56px 0 0;
}
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 40px; align-items: end; }
.hero-copy { padding-bottom: 72px; align-self: center; }
.hero h1 { color: #fff; font-size: clamp(3rem, 7vw + 1rem, 5.6rem); line-height: 0.92; max-width: 9ch; }
.hero .lead { color: rgba(255,255,255,0.88); max-width: 34ch; }
.hero-note { color: rgba(255,255,255,0.8); font-size: var(--step--1); }
.hero .button.store { background: #fff; color: var(--blue-deep); }
.hero .button.store:hover { background: #E6F0FF; }
.hero :focus-visible { outline-color: #fff; }

/* The phone rises out of the band's lower edge, its bottom cut off */
.hero-phone { position: relative; justify-self: center; width: min(100%, 320px); margin-bottom: -170px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

.wheel { position: absolute; right: -8%; top: -10%; width: min(70vw, 760px); height: auto; opacity: 0.5; pointer-events: none; }
.wheel-rim { fill: none; stroke: #EAF4FF; stroke-opacity: 0.55; stroke-width: 44; }
.wheel-a { fill: #fff; fill-opacity: 0.30; }
.wheel-b { fill: #fff; fill-opacity: 0.14; }
.wheel-c { fill: #fff; fill-opacity: 0.22; }
@media (prefers-reduced-motion: no-preference) {
  .wheel { animation: spin 90s linear infinite; transform-origin: 50% 50%; }
  @keyframes spin { to { transform: rotate(360deg); } }
}

@media (max-width: 760px) {
  .hero-grid { grid-template-columns: 1fr; gap: 8px; }
  .hero-copy { padding-bottom: 32px; }
  .hero-phone { width: min(78%, 280px); margin-bottom: -150px; }
  .wheel { width: 120vw; right: -40%; top: 20%; }
}

/* How it works: a real sequence, so numbered */
.sequence { list-style: none; counter-reset: step; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 28px 32px; }
.sequence li { counter-increment: step; margin: 0; }
.sequence li::before {
  content: counter(step);
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 12px;
  border-radius: 50%; background: var(--blue); color: #fff; font: 700 1.5rem/1 var(--font-display);
}
.sequence h3 { margin: 0 0 6px; }
.sequence p { margin: 0; color: var(--ink-soft); }

.features { margin-top: 28px; }

/* Screenshots: a row that scrolls sideways, full width */
.screens { margin-top: 96px; padding: 8px 0 24px; background: var(--mist); }
.screens h2 { margin-top: 1.4em; }
.screens-scroll {
  display: flex; gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 24px max(var(--gutter), calc((100vw - var(--wide)) / 2)) 16px;
}
.screens-scroll figure { margin: 0; flex: 0 0 auto; width: 220px; scroll-snap-align: start; }
.screens-scroll .phone { width: 100%; border-radius: 28px; padding: 6px; }
.screens-scroll .phone img { border-radius: 23px; }
.screens-scroll figcaption { margin-top: 12px; font-weight: 600; }

/* Free and subscription side by side */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; margin-top: 24px; }
.plan { padding: 24px 26px; border: 1px solid var(--line); border-radius: var(--radius); }
.plan h3 { margin-top: 0; font: 600 var(--step-2)/1.1 var(--font-display); }
.plan ul { padding-left: 1.2em; }
.plan-plus { border: 2px solid var(--blue); }
.plan > :last-child { margin-bottom: 0; }

.closing { margin-top: 96px; text-align: left; }
.closing h2 { margin-top: 0; }