/* The artwork includes its matching frame. Only hero artwork is cropped. */
.hero-unit .hero-image {
  width: 370px;
  height: auto;
  aspect-ratio: 675 / 920; /* Show the top two-thirds of the 675x1380 phone. */
  overflow: hidden;
  bottom: 0;
}
.hero-unit .hero-image-overlay {
  display: none;
}
.hero-image .item {
  width: 100%;
  height: auto;
}
#hero-carousel,
.kanji-lookup-page .kanji-hero-frame,
.flashcards-page .flashcards-hero-frame {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  height: auto;
  margin: 0;
}
.hero-image .item img,
.kanji-lookup-page .kanji-hero-frame img,
.flashcards-page .flashcards-hero-frame img {
  display: block;
  width: 100%;
  height: auto;
}
/* Keep the completed phone mockup fixed; only unframed app UI enters the carousel. */
.hero-clip-paths { position: absolute; }
.hero-phone { position: relative; }
.hero-phone .hero-device { display: block; width: 100%; height: auto; }
#hero-carousel {
  position: absolute;
  /* The exact iPhone 18 Pro display: 72,69..1278,2691 in a 1350x2760 frame. */
  left: 5.333333%;
  top: 2.5%;
  width: 89.333333%;
  height: 95%;
  clip-path: url(#hero-display);
}
#hero-carousel .carousel-inner,
#hero-carousel .item { height: 100%; }
.screenshot-without-chrome,
.screenshot-fullscreen {
  width: 320px;
  max-width: 100%;
  height: auto;
}
.features .screenshot-without-chrome,
.features .screenshot-fullscreen {
  box-shadow: none;
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.14));
}
.kanji-lookup-page .kanji-detail-shot img,
.flashcards-page .flashcards-detail-shot img {
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.14));
}
.hero-text h1,
.main-content h2 {
  hyphens: auto;
  overflow-wrap: anywhere;
}
@media (min-width: 768px) {
  .hero-unit .hero-text { width: calc(100% - 410px); }
  .hero-unit .container .row-fluid { min-height: 678px; }
  .features .feature-item {
    display: flex;
    align-items: center;
  }
  .features .feature-item::before,
  .features .feature-item::after {
    display: none;
  }
  .features .feature-item > .span6 { float: none; }
  .features .screenshot-without-chrome,
  .features .screenshot-fullscreen { width: 300px; }
}
@media (max-width: 767px) {
  .hero-unit .hero-image,
  .kanji-lookup-page .kanji-hero-shot.hero-image,
  .flashcards-page .flashcards-hero-shot.hero-image {
    display: block;
    position: relative;
    width: min(270px, 80%);
    margin: 0 auto;
    bottom: auto;
    right: auto;
    padding-bottom: 0;
  }
  .hero-unit .hero-text { width: 100%; }
}

/* Selected Clippings story: genuine landscape iPad Pro, with iPhone on mobile. */
@media (min-width: 768px) {
  .features .feature-item-tablet img {
    display: block;
    width: 720px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
  }
}
@media (min-width: 1200px) {
  .features .feature-item-tablet { gap: 32px; }
  .features .feature-item-tablet > .span6 { min-width: 0; margin-left: 0; }
  .features .feature-item-tablet > .span6:first-child { flex: 1; width: auto; }
  .features .feature-item-tablet > .span6:last-child { flex: 0 0 720px; width: 720px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .features .feature-item-tablet { flex-direction: column; gap: 32px; }
  .features .feature-item-tablet > .span6 { width: 100%; margin-left: 0; }
}