/* Native Hourline stickers and current product media. Shadows are baked into the assets. */
.hero .hero-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.75rem;
  position: relative;
  isolation: isolate;
  padding-top: clamp(2rem, 5vw, 4rem);
}
.hero .hero-copy { width: min(100%, 800px); text-align: center; position: relative; z-index: 2; }
.hero .hero-copy h1 { font-size: clamp(3.2rem, 7.2vw, 6.25rem); letter-spacing: -.055em; line-height: 1.08; }
.hero .hero-description { max-width: 610px; margin: 1.65rem auto 0; padding: 0; }
.hero .hero-description > p { text-wrap: pretty; }
.hero .hero-actions { justify-content: center; margin-top: 1.75rem; }
.hero .hero-meta { margin-top: 1.15rem; }
.hero .hero-phones { position: relative; z-index: 1; max-width: 460px; gap: 1.5rem; }
.hero .hero-phones > .device:first-child { transform: rotate(-5deg); transform-origin: 50% 80%; }
.hero .hero-phones > .device + .device { margin-top: 2.5rem; transform: rotate(5deg); transform-origin: 50% 80%; }
.hero .hero-phones figcaption { margin-top: .5rem; }
.native-media-note { display: block; margin-top: .4rem; font-size: 1rem; line-height: 1.65; color: var(--color-muted); }
.sticker-scatter { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.site-sticker { position: absolute; display: block; height: auto; max-width: none; user-select: none; }
.sticker-sun { width: 106px; top: 4%; left: 3%; transform: rotate(-14deg); }
.sticker-plane { width: 146px; bottom: 400px; left: 0; transform: rotate(12deg); }
.sticker-heart { width: 92px; top: 9%; right: 3%; transform: rotate(12deg); }
.sticker-paris { width: 170px; bottom: 210px; right: 0; transform: rotate(8deg); }
.sticker-toronto { width: 190px; bottom: 50px; left: 8%; transform: rotate(-9deg); }
.sticker-airmail { width: 150px; bottom: 20px; right: 7%; transform: rotate(-12deg); }
.native-widgets {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem; width: min(100%, 440px); margin: auto auto 0; padding-top: 2.5rem;
  align-content: center; position: relative;
}
.native-widgets img { width: 100%; height: auto; }
.native-widgets .widget-wide { grid-column: 1 / -1; }
.native-widgets > :nth-child(1) { transform: rotate(-3deg); }
.native-widgets > :nth-child(2) { transform: rotate(3deg) translateY(.75rem); }
.native-widgets > :nth-child(3) { transform: rotate(-2deg); }
.native-widgets > :nth-child(4) { transform: rotate(2deg); }
.native-widgets figcaption { grid-column: 1 / -1; text-align: center; color: var(--color-muted); font-size: var(--text-small); line-height: 1.65; }
.native-widgets picture { display: block; }
.native-widgets.native-widget-collection { display: block; width: min(92%, 380px); }
.native-widgets.native-widget-collection > picture, .native-widgets.native-widget-collection > figcaption { transform: none; }
.native-widget-collection figcaption { margin-top: 1rem; }
.film-loop { display: block; }
.film-loop img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: var(--radius-gallery); }
.film-loop[hidden], .film-video[hidden] { display: none; }
.native-motion, .native-motion img, .duo-native-preview, .duo-native-preview img { display: block; width: 100%; height: auto; }
.duo-native-preview img { aspect-ratio: 16 / 9; }
.duo-native-preview[hidden], [data-native-film] video[hidden] { display: none; }
:lang(ar) .hero .hero-copy h1 { letter-spacing: normal; line-height: 1.35; }
:lang(hi) .hero .hero-copy h1, :lang(th) .hero .hero-copy h1 { letter-spacing: normal; line-height: 1.3; }
@media (min-width: 1020px) and (prefers-reduced-motion: no-preference) {
  .sticker-sun, .sticker-heart, .sticker-toronto { animation: sticker-arrive 800ms var(--ease-out) both; }
  .sticker-plane, .sticker-paris, .sticker-airmail { animation: sticker-arrive 950ms var(--ease-out) 70ms both; }
  @keyframes sticker-arrive { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
}
@media (max-width: 1100px) {
  .sticker-sun { width: 80px; left: 0; top: 0; }
  .sticker-heart { width: 72px; top: 0; right: 0; }
  .sticker-plane { width: 105px; }
  .sticker-paris { width: 125px; }
  .sticker-toronto { width: 135px; left: 0; }
  .sticker-airmail { width: 115px; right: 0; }
}
@media (max-width: 760px) {
  .hero .hero-intro { padding-top: 2.5rem; gap: 2.25rem; }
  .hero .hero-copy h1 { font-size: clamp(2.6rem, 9.6vw, 4rem); letter-spacing: -.045em; }
  .hero .hero-description { margin-top: 1.25rem; }
  .hero .hero-phones { max-width: 360px; gap: 1rem; width: 88%; }
  .sticker-sun { width: 64px; top: -1.2rem; left: -1rem; }
  .sticker-heart { width: 58px; top: -1rem; right: -.5rem; }
  .sticker-plane { width: 75px; bottom: 280px; left: -1rem; }
  .sticker-paris { width: 85px; bottom: 150px; right: -1rem; }
  .sticker-toronto { width: 100px; bottom: 45px; left: -1rem; }
  .sticker-airmail { display: none; }
  .native-widgets { gap: 1rem; width: min(92%, 440px); padding-top: 2.5rem; }
}
@media (max-width: 390px) {
  .hero .hero-copy h1 { font-size: 2.6rem; }
  .sticker-plane { bottom: 240px; width: 66px; }
  .sticker-paris { bottom: 130px; width: 72px; }
  .sticker-toronto { width: 82px; bottom: 45px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-sticker { animation: none; }
}