/* Approved homepage composition. Screens keep their native aspect ratio. */
.hero.wrap {
  display: block;
  width: min(100%, 1250px);
  padding: 32px 6%;
  text-align: center;
}
.hero.wrap::before { display: none; }
.hero-copy { max-width: none; }
.hero .eyebrow { display: flex; justify-content: center; align-items: center; margin-bottom: 17px; }
.hero h1 {
  max-width: 1050px;
  margin: 0 auto 21px;
  font-size: clamp(40px, 5.55vw, 62px);
  font-weight: 750;
  line-height: 1.075;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.hero-lede { max-width: 750px; margin: 0 auto 24px; font-size: 18px; line-height: 1.6; }
.hero-actions { justify-content: center; gap: 12px; margin-top: 0; }
.hero-actions .button { min-height: 50px; padding: 12px 22px; justify-content: center; font-size: 15px; }
.hero-sponsor-interest { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; max-width: 750px; margin: 18px auto 0; padding: 12px 18px; border: 1px solid var(--line); border-radius: 8px; text-align: left; }
.hero-platform-note { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.hero-sponsor-purpose { margin: 2px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.hero-sponsor-link { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; min-height: 44px; color: var(--ink); font-size: 14px; font-weight: 650; text-decoration: underline; text-underline-offset: 4px; }
.hero-sponsor-slot { max-width: 750px; margin-inline: auto; text-align: left; }
.garage-hero { margin: 0; background: #d6c4a6; }
.garage-hero > img { width: 100%; height: auto; aspect-ratio: 2061 / 763; object-fit: contain; }
.native-showcase { background: #fffdf8; scroll-margin-top: 90px; border-bottom: 1px solid var(--line); }
.showcase-view-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 24px 22px 0; }
.showcase-view-controls[hidden] { display: none; }
.showcase-view-controls button { min-height: 44px; padding: 8px 14px; border: 1px solid #bac7dc; border-radius: 7px; background: white; color: var(--ink); font-family: inherit; font-size: 14px; font-weight: 650; line-height: 1.4; cursor: pointer; }
.showcase-view-controls button[aria-pressed=true] { background: var(--dark); color: white; border-color: var(--dark); }
.planning-closeup { display: none; position: relative; overflow: hidden; aspect-ratio: 830 / 510; width: min(calc(100% - 64px), 1120px); margin: 24px auto 32px; }
.planning-closeup img { position: absolute; width: 248.31%; height: auto; max-width: none; left: -90%; top: -13.14%; }
.native-showcase-inner { max-width: 1050px; margin: auto; padding: 42px 32px 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: center; }
.ride-heading { margin-bottom: 22px; }
.ride-heading h2 { margin: 0; font-size: 28px; line-height: 1.12; letter-spacing: -.035em; }
.departure-row { display: grid; grid-template-columns: minmax(0, 1fr) 40%; align-items: center; gap: 18px; }
.departure-copy { min-width: 0; }
.departure-copy p { margin: 0; font-size: 13px; font-weight: 650; color: var(--muted); }
.departure-time { display: block; margin: 6px 0 13px; font-size: clamp(28px, 3vw, 38px); line-height: 1.1; letter-spacing: -.06em; font-weight: 750; color: var(--dark); white-space: nowrap; }
.meeting-label { display: block; margin-bottom: 3px; font-size: 12px; font-weight: 700; color: var(--muted); }
.departure-copy .meeting-place { font-size: 14px; line-height: 1.4; font-weight: 400; color: var(--ink); }
.watch-preview { min-width: 0; margin: 0; }
.watch-preview img { width: 100%; height: auto; border-radius: 16px; }
.watch-preview figcaption { margin-top: 7px; font-size: 11px; color: var(--muted); text-align: center; }
.native-carousel { min-width: 0; padding: 25px 18px; background: #edf2fc; border-radius: 16px; }
.native-phone { position: relative; width: 100%; max-width: 324px; margin: auto; aspect-ratio: 1470 / 3000; touch-action: pan-y; user-select: none; }
/* Apple asset: 1470×3000 canvas; opening (75,66), 1320×2868. */
.native-screen-window { position: absolute; left: 5.1020408163%; top: 2.2%; width: 89.7959183673%; height: 95.6%; overflow: hidden; background: #f7f9fa; mask: url('/assets/home-showcase/iphone-display-mask.png') center / 100% 100% no-repeat; }
.native-slide { width: 100%; height: 100%; }
.native-slide img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.native-bezel { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; }
.native-carousel-controls { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; max-width: 324px; margin: 19px auto 0; }
.native-carousel button { font-family: inherit; cursor: pointer; }
.screen-arrow { width: 44px; height: 44px; border: 1px solid #bdcbe1; border-radius: 50%; background: white; color: var(--dark); font-size: 22px; line-height: 1; }
.screen-status { min-width: 0; text-align: center; }
.screen-status strong { display: block; font-size: 15px; line-height: 1.35; font-weight: 750; }
.screen-status span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.screen-picks { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 324px; margin: 4px auto 0; }
.screen-picks button { border: 0; background: transparent; min-height: 44px; padding: 8px; color: var(--muted); font-size: 12px; font-weight: 650; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; }
.screen-picks button[aria-pressed=true] { color: var(--dark); text-decoration-color: currentColor; }
.native-carousel [hidden] { display: none; }
.showcase-beta { grid-column: 1 / -1; margin: 0; text-align: center; color: var(--muted); font-size: 13px; }
.showcase-beta strong { font-size: 11px; letter-spacing: .08em; color: var(--ink); margin-right: 5px; }
.showcase-beta a { color: var(--dark); font-weight: 700; text-underline-offset: 3px; }
.screen-fallback { text-align: center; font-size: 13px; margin: 16px 0 0; }
.native-showcase :focus-visible { outline: 3px solid #356bf4; outline-offset: 4px; }
@media (min-width: 561px) {
  .native-showcase[data-expanded=false] { display: none; }
  .native-showcase[data-view=planning] .planning-closeup { display: block; }
  .native-showcase[data-view=planning] .native-showcase-inner { display: none; }
  .native-showcase[data-view=mobile] .departure-module { display: none; }
  .native-showcase[data-view=mobile] .native-showcase-inner { display: block; max-width: 480px; }
  .native-showcase[data-view=mobile] .showcase-beta { margin-top: 20px; }
  .native-showcase[data-view=watch] .native-showcase-inner { display: block; max-width: 560px; }
  .native-showcase[data-view=watch] .native-carousel,
  .native-showcase[data-view=watch] .showcase-beta { display: none; }
}
@media (min-width: 561px) and (max-width: 950px) {
  .hero.wrap { padding: 36px 6% 28px; }
  .native-showcase-inner { gap: 24px; padding-inline: 24px; }
  .departure-row { grid-template-columns: minmax(0, 1fr); }
  .watch-preview { max-width: 140px; }
  .departure-time { font-size: 34px; }
}
@media (max-width: 560px) {
  .hero.wrap { width: 100%; padding: 28px 22px 22px; }
  .hero .eyebrow { margin-bottom: 16px; font-size: 11px; letter-spacing: .095em; }
  .hero h1 { font-size: clamp(30px, 8.2vw, 38px); letter-spacing: -.047em; line-height: 1.08; margin-bottom: 16px; }
  .hero-lede { font-size: 17px; line-height: 1.5; margin-bottom: 18px; }
  .hero-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .hero-actions .button { width: 100%; }
  .hero-sponsor-interest { display: block; margin-top: 14px; padding: 10px 14px 2px; }
  .hero-sponsor-link { margin-top: 2px; }
  .garage-hero > img { aspect-ratio: 16 / 9; object-fit: cover; object-position: right center; }
  .showcase-view-controls { display: none; }
  .native-showcase { border-top: 1px solid var(--line); }
  .native-showcase-inner { display: block; padding: 0; }
  .ride-heading { margin: 0; padding: 23px 22px 0; }
  .departure-row { padding: 18px 22px 24px; }
  .departure-time { font-size: clamp(28px, 9vw, 38px); }
  .native-carousel { padding: 25px 18px; border-radius: 0; border-top: 1px solid #dbe4f4; }
  .showcase-beta { padding: 16px 22px; text-align: left; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Research attribution stays within the existing movement-benefits section. */
.why .why-summary { color: var(--muted); max-width: 620px; margin: 22px 0 0; font-size: 18px; }
.why-study { margin: 24px 0 0; }
.why-study blockquote { margin: 0; padding: 0 0 0 19px; border-left: 3px solid var(--cobalt); }
.why .why-study blockquote p { margin: 0; color: var(--ink); font-size: 21px; line-height: 1.5; font-weight: 600; }
.why-study figcaption { margin-top: 16px; }
.why-quote-credit { display: block; color: var(--muted); font-size: 13px; line-height: 1.5; }
.why-source { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; text-decoration: none; }
.why .why-source-logo { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 0; box-shadow: none; object-fit: contain; }
.why-source strong { display: block; color: var(--ink); font-size: 15px; line-height: 1.4; }
.why-source > span > span { display: block; color: var(--muted); font-size: 12px; line-height: 1.5; text-decoration: underline; text-underline-offset: 3px; }
.why-source:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 5px; }
@media (max-width: 560px) {
  .why .why-study blockquote p { font-size: 19px; }
  .why .why-summary { font-size: 17px; }
}

/* Real article capture inside the same official Apple bezel as the app showcase. */
.article-phone {
  display: block;
  position: relative;
  width: min(100%, 300px);
  aspect-ratio: 1470 / 3000;
  justify-self: center;
  filter: drop-shadow(0 18px 22px #594c3518);
}
.article-phone-screen {
  position: absolute;
  left: 5.1020408163%;
  top: 2.2%;
  width: 89.7959183673%;
  height: 95.6%;
  overflow: hidden;
  background: white;
  mask: url('/assets/home-showcase/iphone-display-mask.png') center / 100% 100% no-repeat;
}
.why-grid .article-phone-capture {
  position: absolute;
  top: 6.4853556485%;
  left: 0;
  width: 100%;
  height: 89.539748954%;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  box-shadow: none;
}
.why-grid .article-phone-bezel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  box-shadow: none;
  pointer-events: none;
}
.article-phone:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 8px; border-radius: 44px; }

/* Keep the official iPad proportions, including on narrow screens. */
.family-art.family-whatsapp { display: block; height: auto; overflow: visible; border-radius: 0; box-shadow: none; align-self: center; }
.family-whatsapp img { display: block; width: 100%; height: auto; aspect-ratio: 3000 / 2300; object-fit: contain; object-position: center; }
.family-whatsapp:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 6px; border-radius: 20px; }