/* The home page's composition: the hero and its stage, the pairing section,
   the feature inspector, and the paired text-and-list sections below. The
   icon in the hero is hero-mark.css; the devices are mockups.css and
   app-ui.css. */

/* ------------------------------------------------------------------ hero --- */

.hero {
  position: relative;
  padding-top: calc(var(--masthead) + clamp(48px, 7vw, 104px));
  padding-bottom: clamp(72px, 9vw, 128px);
  overflow: clip;
}

/* A low light in the room, behind the stage: one wash, never animated. */
.hero::before {
  position: absolute;
  right: -10%;
  bottom: 0;
  left: -10%;
  height: 70%;
  background: radial-gradient(ellipse 50% 60% at 50% 70%, rgba(46, 155, 255, 0.07), transparent 70%);
  content: "";
  pointer-events: none;
}

.hero-head {
  position: relative;
  display: grid;
  gap: 36px;
  align-items: center;
}

@media (min-width: 900px) {
  .hero-head {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 64px;
  }

  .hero-mark {
    margin-right: clamp(0px, 3vw, 40px);
  }
}

/* Stacked, the top block is centred on the one axis the icon, the headline and
   the buttons share, rather than the icon alone against the left edge. The
   headline, lede and note keep their measure and sit in the middle of it. */
@media (max-width: 899px) {
  .hero-head {
    text-align: center;
  }

  .hero-mark {
    order: -1;
    justify-self: center;
  }

  .hero h1,
  .hero .lede {
    margin-right: auto;
    margin-left: auto;
  }

  .hero .lede,
  .hero-note {
    text-wrap: balance;
  }

  .hero .actions {
    justify-content: center;
  }
}

.hero h1 {
  max-width: 11.5ch;
}

.hero .lede {
  max-width: 31em;
  margin-top: 24px;
}

.hero .actions {
  margin-top: 32px;
}

.hero-note {
  margin-top: 18px;
  color: var(--label-2);
  font-size: var(--footnote);
  letter-spacing: var(--track-footnote);
}

/* ----------------------------------------------------------------- stage --- */

/* The desk and the pocket, holding one session. Side by side the phone
   reaches over the window's lower right corner, so the two read as one
   instrument; stacked, the phone sits under the window, centred. */
.stage {
  position: relative;
  display: grid;
  justify-items: center;
  margin-top: clamp(56px, 7vw, 96px);
}

.stage-desk {
  width: 100%;
  min-width: 0;
}

.stage-pocket {
  position: relative;
  z-index: 2;
  margin-top: -48px;
}

@media (min-width: 1000px) {
  .stage {
    grid-template-columns: minmax(0, 920px) auto;
    justify-content: center;
    align-items: end;
  }

  .stage-pocket {
    margin: 0 0 -56px -88px;
  }

  .stage-desk .app-window {
    display: flex;
    flex-direction: column;
    aspect-ratio: 16 / 10;
  }

  .stage-desk .app-body {
    flex: 1;
    min-height: 0;
  }
}

/* --------------------------------------------------------------- pairing --- */

.how-copy .actions {
  margin-top: 32px;
}

/* ------------------------------------------------------------- inspector --- */

/* With no script, and on a narrow screen, every feature stands in a grid:
   its picture, then its name and what it does. */
.features {
  display: grid;
  gap: 48px 32px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.feature {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.feature-art {
  padding: 8px;
  border-radius: var(--r-panel);
  background: var(--surface);
  box-shadow: var(--highlight), var(--shadow-float);
}

.feature-art .mini {
  margin: 0;
  border-radius: calc(var(--r-panel) - 8px);
}

.feature h3 {
  margin-top: 20px;
  font-size: var(--headline);
  line-height: 1.41;
  letter-spacing: var(--track-body);
}

.feature p {
  max-width: 46ch;
  margin-top: 6px;
  color: var(--label-2);
  font-size: var(--callout);
  line-height: 1.5;
  letter-spacing: var(--track-callout);
}

/* features.js builds a list of the names and shows one feature at a time
   beside it, the way a navigator drives an inspector. One pill slides between
   the names; the picture is drawn at a fixed size and scaled to the pane, so
   its pixel-drawn contents grow with it. */
.inspector[data-ready] {
  display: grid;
  grid-template-columns: minmax(300px, 4fr) minmax(0, 8fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

.inspector-list {
  position: relative;
  display: grid;
  gap: 4px;
}

.inspector-pick {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 52px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-button);
  background: transparent;
  color: var(--label-2);
  font-size: var(--callout);
  font-weight: 600;
  letter-spacing: var(--track-callout);
  text-align: left;
  white-space: nowrap;
  transition: color var(--fast) var(--ease-out-soft), transform var(--spring-snappy-ms) var(--spring-snappy);
}

.inspector-pick:hover,
.inspector-pick[aria-pressed="true"] {
  color: var(--label);
}

.inspector-pick:active {
  transform: scale(0.97);
  transition-duration: var(--press-in);
}

.inspector-pill {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 52px;
  border-radius: var(--r-button);
  background: var(--surface);
  box-shadow: var(--highlight), 0 1px 2px rgba(0, 0, 0, 0.12), 0 6px 18px -8px rgba(0, 0, 0, 0.3);
  transform: translateY(var(--pick-y, 0px));
  transition: transform var(--spring-snappy-ms) var(--spring-snappy);
}

.inspector[data-ready] .features {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.inspector[data-ready] .feature {
  grid-area: 1 / 1;
  animation: feature-in 460ms var(--ease-out-soft);
}

.inspector[data-ready] .feature h3 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.inspector[data-ready] .feature p {
  max-width: 52ch;
  margin-top: 20px;
  font-size: var(--body);
  letter-spacing: var(--track-body);
}

.inspector[data-ready] .feature-art {
  padding: 10px;
}

.inspector[data-ready] .feature-frame {
  position: relative;
  aspect-ratio: 400 / 248;
  border-radius: calc(var(--r-panel) - 10px);
  overflow: hidden;
}

.inspector[data-ready] .feature-frame .mini {
  --mini-height: 248px;
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
  height: 248px;
  border-radius: 0;
  transform: scale(var(--art-scale, 1));
  transform-origin: 0 0;
}

@keyframes feature-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* ------------------------------------------------- text beside a list --- */

#security .split {
  align-items: start;
}

#security .actions {
  margin-top: 32px;
}

@media (prefers-reduced-motion: reduce) {
  .inspector-pill,
  .inspector[data-ready] .feature {
    transition: none;
    animation: none;
  }
}