/* Two real phone proportions explain the connection before any feature list. */
.action-hero-layout { width: min(1240px, calc(100% - 112px)); display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: 72px; align-items: center; padding: 50px 0 230px; min-height: calc(100svh - var(--story-header)); }
.action-hero-copy { max-width: 620px; text-align: left; }
.action-hero-category { justify-content: start; }
.action-hero-description { max-width: 46ch; margin-left: 0; margin-right: 0; }
.action-hero-intro { max-width: 44ch; }
.action-hero-links { justify-content: start; }
.phone-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 18px 24px; width: 100%; max-width: 426px; justify-self: center; min-width: 0; margin-top: 20px; }
.phone-preview { min-width: 0; width: 100%; margin: 0; }
.phone-preview img { display: block; width: 100%; height: auto; }
.phone-preview figcaption { width: fit-content; margin: 12px auto 0; padding: 2px 8px; background: oklch(.98 .008 205 / .95); border-radius: 4px; text-align: center; font-family: var(--display); font-weight: 500; font-size: 17px; line-height: 1.45; color: var(--primary); }
.phone-habits { animation: habit-phone-drift 13s ease-in-out infinite; }
.phone-game { margin-top: 24px; animation: game-phone-drift 15s ease-in-out infinite; }
.phone-concept-note { grid-column: 1/-1; justify-self: center; padding: 3px 8px; background: oklch(.98 .008 205 / .95); border-radius: 4px; text-align: center; font-size: 10px; color: var(--primary); line-height: 1.65; margin-top: 4px; }
.hero-meet-ali { display: inline-flex; align-items: center; gap: 20px; margin-top: 14px; padding: 4px 10px; background: oklch(.98 .008 205 / .95); border-radius: 5px; min-height: 38px; font-size: 12px; color: var(--primary); }
.action-hero-copy .action-beta-note { width: fit-content; max-width: 100%; padding: 2px 6px; background: oklch(.98 .008 205 / .95); border-radius: 3px; }
.action-hero-copy .action-video-link { padding: 8px 10px; background: oklch(.98 .008 205 / .95); border-radius: 5px; }
.hero-meet-ali span { font-size: 21px; transition: transform .25s var(--ease); }
.hero-meet-ali:hover span { transform: translateY(3px); }
@keyframes habit-phone-drift { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-4px) rotate(-1.5deg); } }
@keyframes game-phone-drift { 0%,100% { transform: translateY(0) rotate(2deg); } 50% { transform: translateY(-4px) rotate(1.5deg); } }
@media (min-width:1600px) { .action-hero-layout { padding: 60px 0 250px; gap: 90px; } .phone-pair { max-width: 440px; } }
@media (max-width:1050px) { .action-hero-layout { width: calc(100% - 72px); gap: 38px; padding: 45px 0 220px; } .phone-pair { gap: 16px; } .phone-preview figcaption { font-size: 15px; } }
@media (max-width:900px) {
  .action-hero-layout { grid-template-columns: minmax(0,1fr); width: min(640px,calc(100% - 60px)); gap: 30px; padding: 38px 0 210px; }
  .action-hero-copy { order: 1; text-align: center; margin-inline: auto; }
  .phone-pair { order: 2; max-width: 360px; margin-top: 8px; }
  .action-hero-category, .action-hero-links { justify-content: center; }
  .action-hero-description, .action-hero-intro { margin-inline: auto; }
  .action-hero-copy .action-beta-note { margin-inline: auto; }
  .phone-concept-note { margin-top: 2px; }
}
@media (max-width:480px) {
  .action-hero-layout { width: calc(100% - 40px); min-height: 0; gap: 28px; padding: 31px 0 190px; }
  .phone-pair { max-width: 326px; gap: 16px; }
  .phone-preview figcaption { font-size: 14px; margin-top: 10px; }
  .phone-game { margin-top: 18px; }
  .phone-concept-note { font-size: 9px; }
  .hero-meet-ali { font-size: 11px; min-height: 35px; margin-top: 10px; }
  .action-hero-description { max-width: 36ch; }
}
@media (prefers-reduced-motion: reduce) { .phone-preview { animation: none !important; transform: none !important; } .hero-meet-ali span { transition: none; } }