/* Keep the iPhone SE artwork composition proportional at every mobile width. */
@media (max-width: 680px) {
  .hero-art {
    container-type: inline-size;
    --art-unit: calc((100vw - 40px) / 320);
    min-height: 0;
    height: auto;
    aspect-ratio: 320 / 375;
    flex: none;
  }
  @supports (width: 1cqw) {
    .hero-art { --art-unit: calc(100cqw / 320); }
  }
  .hero-art .art-grid { background-size: calc(19 * var(--art-unit)) calc(19 * var(--art-unit)); }
  .hero-art .hero-symbol {
    width: calc(278 * var(--art-unit));
    top: calc(31 * var(--art-unit));
    animation-name: mobile-hero-float;
  }
  .hero-art .art-halo { width: calc(285 * var(--art-unit)); height: calc(285 * var(--art-unit)); top: calc(39 * var(--art-unit)); }
  .hero-art .orbit-outer { width: 95%; top: calc(32 * var(--art-unit)); }
  .hero-art .orbit-inner { width: 87%; top: calc(48 * var(--art-unit)); }
  .hero-art .art-plinth { top: calc(314 * var(--art-unit)); width: calc(250 * var(--art-unit)); height: calc(36 * var(--art-unit)); }
  .hero-art .art-label { top: calc(9 * var(--art-unit)); right: 0; font-size: calc(6 * var(--art-unit)); gap: calc(8 * var(--art-unit)); }
  .hero-art .art-label i { width: calc(5 * var(--art-unit)); height: calc(5 * var(--art-unit)); }
  .hero-art .art-tag { padding: calc(10 * var(--art-unit)) calc(14 * var(--art-unit)); gap: calc(10 * var(--art-unit)); font-size: calc(10 * var(--art-unit)); white-space: nowrap; }
  .hero-art .tag-direction { top: calc(66 * var(--art-unit)); left: 0; }
  .hero-art .tag-dot { width: calc(8 * var(--art-unit)); height: calc(8 * var(--art-unit)); }
  .hero-art .tag-capability { top: calc(178 * var(--art-unit)); right: 0; }
  .hero-art .tag-capability svg { width: calc(15 * var(--art-unit)); height: calc(15 * var(--art-unit)); }
  .hero-art .opportunity-tag { bottom: calc(20 * var(--art-unit)); left: calc(20 * var(--art-unit)); padding: calc(12 * var(--art-unit)) calc(17 * var(--art-unit)) calc(12 * var(--art-unit)) calc(12 * var(--art-unit)); gap: calc(14 * var(--art-unit)); border-radius: calc(17 * var(--art-unit)); white-space: nowrap; }
  .hero-art .opportunity-icon { width: calc(35 * var(--art-unit)); height: calc(35 * var(--art-unit)); border-radius: calc(11 * var(--art-unit)); }
  .hero-art .opportunity-icon svg { width: calc(18 * var(--art-unit)); height: calc(22 * var(--art-unit)); }
  .hero-art .opportunity-tag small { font-size: calc(7 * var(--art-unit)); margin-bottom: calc(5 * var(--art-unit)); }
  .hero-art .opportunity-tag strong { font-size: calc(16 * var(--art-unit)); }

  .hero-bottom { display: grid; grid-template-columns: 1fr .93fr 1.15fr; gap: 8px; }
  .hero-bottom > div { min-width: 0; max-width: none; font-size: clamp(8px, 2.3vw, 11.5px); white-space: nowrap; }
}
@keyframes mobile-hero-float {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(-9deg); }
  50% { transform: translateX(-50%) translateY(calc(-9 * var(--art-unit))) rotate(-7deg); }
}