/* Balanced wide-screen layout and a fully visible feature band. */
.section-shell {
  max-width: 1680px;
}

.cta-short {
  display: none;
}

/* The display is measured against each source photograph, not the padded card.
   Each finish has a slightly different LCD opening in its 1500-pixel image. */
.fm1-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1500 / 910;
}

.fm1-stage > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
}

.fm1-stage[data-finish="black"]  { --lcd-x: 28.06667%; --lcd-y: 12.96703%; --lcd-w: 19.13333%; --lcd-h: 29.34066%; }
.fm1-stage[data-finish="blue"]   { --lcd-x: 28.13333%; --lcd-y: 12.85714%; --lcd-w: 19.13333%; --lcd-h: 29.34066%; }
.fm1-stage[data-finish="brown"]  { --lcd-x: 28%;       --lcd-y: 12.88889%; --lcd-w: 19.06667%; --lcd-h: 29.55556%; aspect-ratio: 1500 / 900; }
.fm1-stage[data-finish="green"]  { --lcd-x: 28.2%;     --lcd-y: 13.51648%; --lcd-w: 19.13333%; --lcd-h: 29.23077%; }
.fm1-stage[data-finish="grey"]   { --lcd-x: 28.4%;     --lcd-y: 13.18681%; --lcd-w: 18.86667%; --lcd-h: 29.56044%; }
.fm1-stage[data-finish="orange"] { --lcd-x: 28%;       --lcd-y: 12.96703%; --lcd-w: 19.06667%; --lcd-h: 29.89011%; }
.fm1-stage[data-finish="purple"] { --lcd-x: 28.4%;     --lcd-y: 12.85714%; --lcd-w: 18.93333%; --lcd-h: 29.45055%; }

.fm1-stage .showcase-screen {
  position: absolute;
  left: var(--lcd-x);
  top: var(--lcd-y);
  width: var(--lcd-w);
  height: var(--lcd-h);
  aspect-ratio: auto;
  overflow: hidden;
  border-radius: 2%;
  background: #050308;
  pointer-events: none;
}

.fm1-stage .showcase-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The source photos retain all of their case pixels. Smooth vector outlines
   remove the coarse, thresholded alpha edges in the earlier cutouts. */
.fm1-stage > img[data-finish="black"]  { -webkit-mask: url("assets/black-case-mask.svg") center / 100% 100% no-repeat; mask: url("assets/black-case-mask.svg") center / 100% 100% no-repeat; }
.fm1-stage > img[data-finish="blue"]   { -webkit-mask: url("assets/blue-case-mask.svg") center / 100% 100% no-repeat; mask: url("assets/blue-case-mask.svg") center / 100% 100% no-repeat; }
.fm1-stage > img[data-finish="brown"]  { -webkit-mask: url("assets/ivory-brown-mask.svg") center / 100% 100% no-repeat; mask: url("assets/ivory-brown-mask.svg") center / 100% 100% no-repeat; }
.fm1-stage > img[data-finish="green"]  { -webkit-mask: url("assets/green-case-mask.svg") center / 100% 100% no-repeat; mask: url("assets/green-case-mask.svg") center / 100% 100% no-repeat; }
.fm1-stage > img[data-finish="grey"]   { -webkit-mask: url("assets/grey-case-mask.svg") center / 100% 100% no-repeat; mask: url("assets/grey-case-mask.svg") center / 100% 100% no-repeat; }
.fm1-stage > img[data-finish="orange"] { -webkit-mask: url("assets/orange-case-mask.svg") center / 100% 100% no-repeat; mask: url("assets/orange-case-mask.svg") center / 100% 100% no-repeat; }
.fm1-stage > img[data-finish="purple"] { -webkit-mask: url("assets/purple-case-mask.svg") center / 100% 100% no-repeat; mask: url("assets/purple-case-mask.svg") center / 100% 100% no-repeat; }

.ticker {
  display: flex;
  justify-content: center;
  padding: 12px 24px;
  white-space: normal;
}

.ticker > div {
  width: min(100%, 1680px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px clamp(15px, 2vw, 34px);
  animation: none;
}

.ticker span {
  white-space: nowrap;
}

.ticker span + span::before {
  content: "✦";
  display: inline-block;
  margin-right: clamp(15px, 2vw, 34px);
}

@media (min-width: 900px) {
  .section-heading {
    margin-inline: auto;
    text-align: center;
  }

  .section-heading > p:last-child {
    margin-inline: auto;
  }
}

@media (min-width: 1051px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 4vw, 100px);
  }
}

@media (max-width: 700px) {
  .ticker {
    font-size: 1.05rem;
    padding: 12px 16px;
  }

  .ticker > div {
    gap: 6px 14px;
  }

  .ticker span + span::before {
    margin-right: 14px;
  }
}

@media (max-width: 400px) {
  .site-header {
    padding-inline: 14px;
    gap: 8px;
  }

  .wordmark {
    font-size: 1.3rem;
  }

  .site-header .header-cta {
    padding: 10px 12px;
    font-size: .7rem;
  }

  .cta-full {
    display: none;
  }

  .cta-short {
    display: inline;
  }

  h1 {
    font-size: clamp(3.75rem, 18vw, 4.7rem);
  }
}

.rig-controls { grid-template-columns: repeat(5, minmax(0, 1fr)); }