main {
  overflow-x: clip;
}
/* One landscape, one uniformly frosted screen, and two complete floating rocks. */
.hero {
  --hero-screen-height: clamp(460px, 55svh, 610px);
  --hero-rock-height: calc(var(--hero-screen-height) + 150px);
  padding: clamp(110px, 12svh, 150px) 24px 32px;
  min-height: 100svh;
  overflow: visible;
}
.hero-landscape {
  height: 100%;
  object-position: center 55%;
  mask-image: none;
}
.hero:before {
  height: 60%;
  background: linear-gradient(var(--paper) 2%, #edecebc7 38%, #edeceb00 100%);
}
.hero:after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 80px;
  z-index: -1;
  background: linear-gradient(transparent, var(--paper));
  pointer-events: none;
}
.hero-copy {
  z-index: 4;
  max-width: 780px;
}
.hero h1 {
  font-size: clamp(52px, 7svh, 78px);
  line-height: 1.02;
  letter-spacing: -0.065em;
}
.hero .lead {
  font-size: 18px;
  line-height: 1.45;
  max-width: 710px;
  margin: 20px auto;
}
.hero-button {
  min-height: 48px;
  padding: 14px 25px;
  gap: 10px;
}
.apple-mark {
  width: 18px;
  height: 20px;
  fill: currentColor;
  flex-shrink: 0;
}
.nav-download .apple-mark {
  width: 14px;
  height: 16px;
}
.hero-notes {
  margin-top: 16px;
  gap: 10px 22px;
  font-size: 11px;
}
.hero-stage {
  animation: none;
  position: relative;
  max-width: 1080px;
  height: var(--hero-screen-height);
  margin: clamp(28px, 4svh, 48px) auto 0;
}
/* Frost is one unmasked layer. The only background fade sits below the screen. */
.hero-desktop {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 25px;
  background: transparent;
  border: 0;
  isolation: auto;
  overflow: visible;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
.hero-desktop:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #ffffff12;
  border: 1px solid #ffffffa8;
  -webkit-backdrop-filter: blur(15px) saturate(1.08);
  backdrop-filter: blur(15px) saturate(1.08);
  pointer-events: none;
}
.hero-desktop:after {
  display: none;
}
.hero-desktop .desktop-menubar {
  position: relative;
  z-index: 1;
  height: 35px;
  padding: 0 17px;
  background: transparent;
  color: white;
  font-size: 11px;
  font-weight: 500;
}
.menu-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.menu-brand .apple-mark {
  width: 16px;
  height: 18px;
}
.hero-desktop .menu-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero-desktop .menu-right svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-desktop .menu-right .menu-battery {
  width: 19px;
}
.desktop-notch {
  position: absolute;
  z-index: 1;
  width: 21%;
  height: 36px;
  top: 0;
  left: 39.5%;
  fill: #050505;
}
.hero-cliff {
  position: absolute;
  z-index: 2;
  width: auto;
  max-width: none;
  height: var(--hero-rock-height);
  object-fit: contain;
  top: 8%;
  pointer-events: none;
  user-select: none;
}
.hero-cliff-left {
  left: calc(50px - var(--hero-rock-height) * 0.56);
}
.hero-cliff-right {
  right: calc(50px - var(--hero-rock-height) * 0.56);
}
/* This illustrative dock uses sample weather/music data, not a live feed. */
.hero-dock {
  container-type: inline-size;
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  width: 84%;
  display: grid;
  grid-template-columns: 1.08fr 2fr 0.88fr 0.88fr 2.9fr;
  gap: 6px;
  padding: 8px;
  border-radius: 25px;
  border: 1px solid #ffffff78;
  background: #181818;
  color: #f8f8f8;
  font-size: clamp(6px, 1.15cqw, 12px);
  text-align: left;
  line-height: 1.2;
  box-shadow: 0 12px 30px #00000018;
}
.hero-tile {
  min-width: 0;
  height: 8.8cqw;
  max-height: 82px;
  border: 1px solid #ffffff13;
  background: #2c2c2e;
  border-radius: 1.9cqw;
  overflow: hidden;
}
.hero-clock {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 1.4cqw;
  gap: 0.3cqw;
}
.hero-clock strong,
.weather-current strong {
  font-size: 3cqw;
  font-weight: 550;
  letter-spacing: -0.06em;
}
.hero-clock > span,
.weather-current > span,
.weather-forecast > span,
.music-info > span {
  color: #b6b6bb;
}
.hero-weather {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1cqw;
  gap: 0.8cqw;
}
.weather-current,
.weather-forecast {
  display: flex;
  flex-direction: column;
  gap: 0.5cqw;
}
.weather-forecast {
  align-items: center;
  font-size: 0.85em;
}
.weather-forecast b {
  font-weight: 500;
}
.weather-forecast svg {
  width: 1.6cqw;
  height: 1.6cqw;
  color: #ffd45e;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
}
.hero-apps {
  display: grid;
  /* AppGridTile uses 22pt icons with 4pt gaps; scale both together. */
  --app-icon-size: 3.2cqw;
  grid-template-columns: repeat(2, var(--app-icon-size));
  grid-template-rows: repeat(2, var(--app-icon-size));
  padding: 0;
  gap: calc(var(--app-icon-size) * 4 / 22);
  place-content: center;
  place-items: center;
}
.hero-apps img {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
}
.hero-activity {
  position: relative;
  display: grid;
  place-items: center;
}
.hero-activity > svg {
  width: 84%;
  height: 84%;
  fill: none;
  stroke-width: 4.5;
  transform: rotate(-90deg);
}
.activity-track {
  stroke: #48484a;
}
.activity-progress {
  stroke: #54dd78;
  stroke-dasharray: 69 164;
  stroke-linecap: round;
}
.hero-activity > div {
  position: absolute;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 0.1cqw;
}
.hero-activity strong {
  font-size: 1.8cqw;
  font-weight: 600;
  letter-spacing: -0.04em;
}
.hero-activity strong span {
  font-size: 0.6em;
}
.hero-activity small {
  font-size: 0.7cqw;
  color: #b6b6bb;
}
.hero-music {
  display: flex;
  align-items: center;
  gap: 0.9cqw;
  padding: 0.8cqw;
}
.hero-music .music-art {
  height: 100%;
  width: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 0.9cqw;
}
.music-info {
  display: flex;
  flex-direction: column;
  gap: 0.5cqw;
  min-width: 0;
  flex: 1;
}
.music-info strong {
  font-size: 1.1cqw;
  font-weight: 550;
  white-space: nowrap;
}
.music-info > span {
  font-size: 0.9cqw;
  white-space: nowrap;
}
.music-progress {
  height: 0.4cqw;
  background: #555558;
  border-radius: 4px;
  margin-top: 0.3cqw;
  overflow: hidden;
}
.music-progress i {
  display: block;
  height: 100%;
  width: 38%;
  background: #e0e0e3;
  border-radius: inherit;
}
.music-controls {
  display: flex;
  align-items: center;
  gap: 0.4cqw;
}
.music-controls > svg {
  width: 1.6cqw;
  height: 1.6cqw;
  fill: #ccc;
}
.music-play {
  width: 3cqw;
  height: 3cqw;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ffffff16;
}
.music-play svg {
  width: 1.8cqw;
  height: 1.8cqw;
  fill: #f4f4f4;
}
@media (min-width: 1101px) and (max-width: 1700px) {
  .hero {
    --hero-screen-height: clamp(400px, 52svh, 560px);
    --hero-rock-height: calc(var(--hero-screen-height) + 75px);
  }
  .hero-stage {
    width: 70%;
  }
}
@media (max-width: 1100px) {
  .hero {
    --hero-screen-height: clamp(300px, 48vw, 400px);
  }
  .hero-dock {
    width: 74%;
  }
  .hero-cliff {
    height: calc(100% + 25px);
  }
  .hero-stage {
    width: 82%;
  }
  .hero-cliff-left {
    left: -19%;
  }
  .hero-cliff-right {
    right: -19%;
  }
}
@media (max-width: 1024px) {
  /* No rocks from iPad-portrait width down. They overlap the screen from both sides, which reads
     as depth at 1440px and as an obstruction once the stage narrows: by 768px the pair of them
     cover most of the simulated desktop, which is the one thing the hero exists to show. The
     sizing above still applies between 1025px and 1100px, where there is room for them. */
  .hero-cliff {
    display: none;
  }
}
@media (max-width: 700px) {
  .hero {
    --hero-screen-height: clamp(200px, 29svh, 260px);
    padding: 112px 18px 80px;
  }
  .hero h1 {
    font-size: clamp(36px, 10.2vw, 58px);
  }
  .hero .lead {
    font-size: 15px;
    margin: 20px auto;
    line-height: 1.5;
    max-width: 420px;
  }
  .hero-button {
    min-height: 48px;
    padding: 12px 18px;
  }
  .hero-notes {
    font-size: 10px;
    margin-top: 16px;
    gap: 8px 15px;
  }
  .hero-landscape {
    object-position: 50% 70%;
  }
  .hero:before {
    height: 60%;
  }
  .hero-stage {
    width: 92%;
    margin-top: 34px;
  }
  .hero-desktop {
    border-radius: 15px;
  }
  .hero-desktop .desktop-menubar {
    height: 24px;
    padding: 0 9px;
    font-size: 7px;
  }
  .menu-brand {
    gap: 4px;
  }
  .menu-brand .apple-mark {
    width: 10px;
    height: 12px;
  }
  .hero-desktop .menu-right {
    gap: 5px;
  }
  .hero-desktop .menu-right svg {
    width: 9px;
    height: 9px;
  }
  .hero-desktop .menu-right .menu-battery {
    width: 12px;
  }
  .hero-desktop .menu-control {
    display: none;
  }
  .desktop-notch {
    width: 24%;
    left: 38%;
    height: 21px;
  }
  .hero-dock {
    /* Wider, with tighter gaps, because the text here does not scale. The dock's font is
       clamp(6px, 1.15cqw, 12px) and 1.15cqw is about 3px at phone widths, so every label is
       pinned to the 6px floor while the columns keep shrinking with the viewport. That is why
       this broke at 320px and was a hair short at 390: the labels were a fixed size inside
       boxes that were not. Widening the dock buys real room without making the type any bigger.
       Columns are proportioned from the measured need at 320px, the tightest case. */
    padding: 3px;
    gap: 2px;
    border-radius: 12px;
    width: 90%;
    bottom: 14px;
    grid-template-columns: 1.38fr 1.62fr 0.82fr 0.82fr 2.46fr;
  }
  .hero-tile {
    height: 10cqw;
  }
  /* These labels were wrapping. "Fri, Oct 30" became "Fri, Oct" over "30" and "Sunny · °F"
     became "Sunny ·" over "°F", each two lines deep in a tile 22.7px tall, and `.hero-tile`
     clipped the overflow — so the date and the unit were cut in half. Keeping them on one line
     is the fix; the tile then needs 21px of the 22.7 it has. */
  .hero-clock > span,
  .weather-current > span,
  .weather-forecast > span,
  .weather-forecast b,
  .music-info strong,
  .music-info > span {
    white-space: nowrap;
  }
  /* One forecast, not two. Unwrapped, the weather tile wanted 66px of the 54 it had, and the
     column widths below cannot find twelve. A second forecast column is the least information
     in the tile, and legible beats complete in an illustration this size. */
  .hero-weather > .weather-forecast:nth-child(n + 3) {
    display: none;
  }
  .hero-clock strong,
  .weather-current strong {
    font-size: 3.3cqw;
  }
  .hero-music .music-art {
    height: 80%;
  }
  .weather-forecast:last-child {
    display: none;
  }
  .music-controls > svg {
    display: none;
  }
  .music-info strong {
    font-size: 1.4cqw;
  }
  .music-info > span {
    font-size: 1.1cqw;
  }
}
@media (min-width: 701px) and (max-height: 780px) {
  .hero {
    --hero-screen-height: 48svh;
    padding-top: 100px;
  }
  .hero h1 {
    font-size: 6.7svh;
  }
  .hero .lead {
    font-size: 16px;
    margin: 16px auto;
  }
  .hero-notes {
    margin-top: 12px;
  }
  .hero-stage {
    margin-top: 24px;
  }
}

/* The landscape is blurred once at a constant strength, independently of the fade. */
.hero-glass {
  display: none;
}
.hero-glass-ready:before {
  display: none;
}
.hero-glass-ready .hero-glass {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  border: 1px solid #ffffffa8;
  pointer-events: none;
  isolation: isolate;
}
.hero-glass:before {
  content: "";
  position: absolute;
  inset: -30px;
  background-image: url("/img/generated/alpine.jpg");
  background-size: var(--glass-image-size);
  background-position: var(--glass-image-position);
  background-repeat: no-repeat;
  filter: blur(15px) saturate(1.08);
}
.hero-glass:after {
  content: "";
  position: absolute;
  inset: 0;
  background: #ffffff12;
}
/* Three deliberate, overlapping beats after a quiet background-only opening. */
.hero-copy {
  animation: none;
}
.hero-enter .hero h1,
.hero-enter .hero-desktop,
.hero-enter .hero-button,
.hero-enter .hero .lead,
.hero-enter .hero-notes,
.hero-enter .hero-cliff,
.hero-enter .site-header {
  animation: hero-arrive 1100ms cubic-bezier(0.22, 0.61, 0.36, 1) both paused;
}
.hero-enter .hero h1 {
  animation-name: hero-title-arrive;
  animation-duration: 950ms;
  animation-delay: 400ms;
}
.hero-enter .hero-desktop {
  animation-name: hero-screen-arrive;
  animation-delay: 1150ms;
}
.hero-enter .hero-glass {
  animation: hero-material-arrive 1100ms cubic-bezier(0.22, 0.61, 0.36, 1)
    1150ms both paused;
}
.hero-enter .hero-desktop > :not(.hero-glass) {
  animation: hero-arrive 1100ms cubic-bezier(0.22, 0.61, 0.36, 1) 1150ms both
    paused;
}
.hero-enter.hero-enter-ready .hero-glass,
.hero-enter.hero-enter-ready .hero-desktop > :not(.hero-glass) {
  animation-play-state: running;
}
.hero-enter .hero-button {
  animation-delay: 1150ms;
}
.hero-enter .hero .lead,
.hero-enter .hero-notes,
.hero-enter .site-header {
  animation-delay: 2000ms;
}
.hero-enter .hero-cliff {
  animation-name: hero-rock-arrive;
  animation-delay: 2000ms;
}
.hero-enter.hero-enter-ready .hero h1,
.hero-enter.hero-enter-ready .hero-desktop,
.hero-enter.hero-enter-ready .hero-button,
.hero-enter.hero-enter-ready .hero .lead,
.hero-enter.hero-enter-ready .hero-notes,
.hero-enter.hero-enter-ready .hero-cliff,
.hero-enter.hero-enter-ready .site-header {
  animation-play-state: running;
}
@keyframes hero-arrive {
  from {
    opacity: 0;
    visibility: hidden;
  }
  to {
    opacity: 1;
    visibility: visible;
  }
}
@keyframes hero-title-arrive {
  from {
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 12px, 0);
  }
  to {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes hero-screen-arrive {
  from {
    visibility: hidden;
    transform: translate3d(0, 14px, 0) scale(0.99);
  }
  to {
    visibility: visible;
    transform: translate3d(0, 0, 0) scale(1);
  }
}
/* Reveal fully formed glass; never blend a sharp landscape through its surface. */
@keyframes hero-material-arrive {
  from {
    clip-path: inset(0 0 100% 0 round 25px);
  }
  to {
    clip-path: inset(0 0 0 0 round 25px);
  }
}
@keyframes hero-rock-arrive {
  from {
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 18px, 0);
  }
  to {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-enter .hero h1,
  .hero-enter .hero-desktop,
  .hero-enter .hero-button,
  .hero-enter .hero .lead,
  .hero-enter .hero-notes,
  .hero-enter .hero-cliff,
  .hero-enter .site-header,
  .hero-enter .hero-glass,
  .hero-enter .hero-desktop > :not(.hero-glass) {
    animation: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}