/* The tour's stops (index.html .tour-card): Projects, Layouts and the Notchboard. Each card is a head (eyebrow and
   headline) and a panel (note, controls and the Next button). Without JavaScript they are sections after the hero;
   while diving app.js lifts them over the hero's desktop and shows each during its stop (.on), and this file composes
   them for the screen. --tour-layout names the composition, and app.js frames the Mac around it:
     caption  the words centred in the black under the Mac like a film's caption, without glass (Mac desktops and
              iPads held sideways); app.js frames the Mac above it;
     poster   the launch video's frame on tall portrait screens: the headline above the Mac, the controls in a glass
              panel below it (app.js frames the Mac between the head and the panel);
     compact  short portrait screens (phones in Safari with its toolbars): one card at the bottom, the Mac above it;
     side     landscape phones: the card at the left, the Mac in the rest of the width.
   The tour's progress (sections/tour.js) is the navigator in the buy bar (sections/buybar.css), or on phones a track
   at the top of the card or panel; both fill from --tour-at, which app.js sets on every [data-tour-progress]. */

/* As sections. */
.tour-card {
  position: relative;
  z-index: 3;
  max-width: 1100px;
  margin: 0 auto;
  padding: 72px 24px 24px;
  font-family: var(--lp-body);
}
.tour-title {
  margin: 14px 0 0;
  color: var(--lp-text);
  font-family: var(--lp-display);
  font-size: var(--lp-title-size);
  font-weight: 400;
  letter-spacing: var(--lp-display-track);
  line-height: 1;
  text-wrap: balance;
}
.tour-sub {
  margin: 14px 0 0;
  color: var(--lp-secondary);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.5;
}
.tour-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.tour-chips button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 0 16px 0 8px;
  border: 1px solid rgb(255 255 255 / .16);
  border-radius: 999px;
  background: rgb(255 255 255 / .04);
  color: var(--lp-secondary);
  font: 500 14px/1 var(--lp-body);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-fast) var(--ease-ui), color var(--t-fast) var(--ease-ui),
    border-color var(--t-fast) var(--ease-ui);
}
.tour-chips kbd {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  border-radius: 7px;
  background: rgb(255 255 255 / .1);
  color: var(--lp-text);
  font: 500 12px/1 var(--lp-label-font);
}
.tour-chips button[aria-pressed="true"] {
  border-color: rgb(255 255 255 / .5);
  background: rgb(255 255 255 / .12);
  color: var(--lp-text);
}
@media (hover: hover) {
  .tour-chips button:hover {
    color: var(--lp-text);
    border-color: rgb(255 255 255 / .34);
  }
}
.tour-chips button:active {
  background: rgb(255 255 255 / .18);
}
.tour-chips button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
/* The Notchboard's Replay shows its own pointer, so it goes with reduced motion; its row goes with it. */
@media (prefers-reduced-motion: reduce) {
  #notchboard .tour-chips {
    display: none;
  }
}
/* A touch screen has no 1, 2 and 3 keys to press, and every control is a full fingertip tall. */
@media (hover: none) and (pointer: coarse) {
  .tour-chips kbd,
  .tour-keys {
    display: none;
  }
  .tour-chips button {
    min-height: 44px;
  }
  .tour-card[data-stop="projects"] .tour-chips button {
    padding: 0 16px;
  }
}
/* Without JavaScript nothing on the page answers the controls, or a key, or the board. */
@media (scripting: none) {
  .tour-chips,
  .tour-try {
    display: none;
  }
}
/* The progress, the Layouts count and the Next button only mean something while diving. */
.tour-track,
.tour-count,
.tour-step {
  display: none;
}

/* Diving: the card, a glass card in a lower corner over the desktop. Every screen takes one of the compositions below,
   which start from it. */
.hero > .tour-card {
  --tour-layout: card;
  /* The glass, legible over a white window: the backdrop is darkened as well as blurred, so what shows through stays
     dark whatever lies behind it. */
  --glass-fill: rgb(14 14 16 / .78);
  --glass-blur: blur(28px) saturate(1.25) brightness(.55);
  --glass-edge: inset 0 0 0 .5px rgb(255 255 255 / .16), 0 20px 50px rgb(0 0 0 / .5);
  position: absolute;
  left: max(20px, env(safe-area-inset-left));
  /* Above the Mac's Dock. */
  bottom: max(104px, env(safe-area-inset-bottom));
  width: min(460px, calc(100% - 40px));
  /* Room at the top for the phones' track (below). */
  --track-room: 0px;
  margin: 0;
  padding: calc(22px + var(--track-room)) 24px 10px;
  border-radius: 22px;
  outline: none;
  visibility: hidden;
}
/* The glass is the card itself, or in the poster composition its panel. Off, it has no fill, no blur and no edge, and
   leaving a stop it fades with the card's contents, so no empty pane hangs on. It never fades as a whole: a see-through
   element stops Safari blurring what lies behind the glass inside it. */
.hero > .tour-card {
  background-color: rgb(14 14 16 / 0);
  -webkit-backdrop-filter: blur(0) saturate(1) brightness(1);
  backdrop-filter: blur(0) saturate(1) brightness(1);
  box-shadow: inset 0 0 0 .5px rgb(255 255 255 / 0), 0 20px 50px rgb(0 0 0 / 0);
  transition: visibility 0s linear var(--t-fast), background-color var(--t-fast) var(--ease-in),
    -webkit-backdrop-filter var(--t-fast) var(--ease-in), backdrop-filter var(--t-fast) var(--ease-in),
    box-shadow var(--t-fast) var(--ease-in);
}
.hero > .tour-card.on {
  visibility: visible;
  background-color: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge);
  transition: visibility 0s, background-color var(--t-reveal) var(--ease-out), -webkit-backdrop-filter var(--t-reveal) var(--ease-out),
    backdrop-filter var(--t-reveal) var(--ease-out), box-shadow var(--t-reveal) var(--ease-out);
}
/* The contents leave with the glass, and come in just after it, the panel's rising a little. */
.hero > .tour-card .tour-head > *,
.hero > .tour-card .tour-panel > * {
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease-in), translate var(--t-fast) var(--ease-in);
}
.hero > .tour-card .tour-panel > * {
  translate: 0 8px;
}
.hero > .tour-card.on .tour-head > *,
.hero > .tour-card.on .tour-panel > * {
  opacity: 1;
  translate: none;
  transition: opacity var(--t-reveal) var(--ease-out) 120ms, translate var(--t-reveal) var(--ease-out) 120ms;
}
/* The first time a stop comes up, its headline crosses the screen big over the dimmed desktop (app.js): the card
   holds its place with neither glass nor contents, and its own headline waits unseen (.intro-title) until the big one
   lands on it, then shows at once, so the two never cross-fade. When .intro goes, the glass forms around the headline
   and the rest of the card follows. The card itself never moves, so the headline's place can be measured at any time. */
.hero > .tour-card.on.intro {
  background-color: rgb(14 14 16 / 0);
  -webkit-backdrop-filter: blur(0) saturate(1) brightness(1);
  backdrop-filter: blur(0) saturate(1) brightness(1);
  box-shadow: inset 0 0 0 .5px rgb(255 255 255 / 0), 0 20px 50px rgb(0 0 0 / 0);
  transition: none;
}
.hero > .tour-card.on.intro .tour-head > :not(.tour-title),
.hero > .tour-card.on.intro .tour-panel > * {
  opacity: 0;
  transition: none;
}
.hero > .tour-card.intro-title .tour-title {
  visibility: hidden;
}
/* The big headline's copy (app.js), shrinking from the middle of the screen into the card's headline. */
.tour-title-big {
  position: absolute;
  z-index: 4;
  margin: 0;
  transform-origin: 0 0;
  pointer-events: none;
}
/* Behind the big headline: over the screen (z-index 2, and after it), under the cards. */
.tour-dim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgb(0 0 0 / .6);
  opacity: 0;
  transition: opacity 500ms var(--ease-in-out);
  pointer-events: none;
}
.tour-dim.on {
  opacity: 1;
}
.hero > .tour-card .tour-title {
  margin-top: 12px;
  font-size: clamp(30px, 2.6vw, 40px);
}
.hero > .tour-card .tour-sub {
  margin-top: 12px;
  font-size: 15px;
}
.hero > .tour-card .tour-chips {
  margin-top: 16px;
}
.hero > .tour-card .tour-count {
  display: inline;
}
/* Layouts sits on the right, over the corner Grid leaves empty. */
.hero > .tour-card[data-stop="layouts"] {
  left: auto;
  right: max(20px, env(safe-area-inset-right));
}

/* The Next button: what the next scroll brings, and a press does it. The Mac's down arrow does it too, where there
   is a keyboard. Its target is 44 points tall, more than it shows. */
.hero > .tour-card .tour-step {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  margin: 10px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--lp-secondary);
  font: var(--lp-label-weight) 11px/1 var(--lp-label-font);
  letter-spacing: var(--lp-label-track);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hero > .tour-card .tour-step::before {
  content: "";
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: url("/assets/redesign/chevron-down.png") center / 10px 7px no-repeat;
  mask: url("/assets/redesign/chevron-down.png") center / 10px 7px no-repeat;
}
.hero > .tour-card .tour-step::after {
  content: "";
  position: absolute;
  inset: -10px -12px;
}
.hero > .tour-card .tour-step kbd {
  display: none;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-left: 2px;
  border-radius: 6px;
  background: rgb(255 255 255 / .08);
  box-shadow: inset 0 0 0 .5px rgb(255 255 255 / .16);
  color: var(--lp-secondary);
}
.hero > .tour-card .tour-step kbd svg {
  display: block;
}
@media (hover: hover) and (pointer: fine) {
  .hero > .tour-card .tour-step kbd {
    display: grid;
  }
}
.hero > .tour-card .tour-step {
  transition: opacity var(--t-fast) var(--ease-in), translate var(--t-fast) var(--ease-in), color var(--t-fast) var(--ease-ui);
}
.hero > .tour-card .tour-step kbd {
  transition: color var(--t-fast) var(--ease-ui);
}
.hero > .tour-card.on .tour-step {
  transition: opacity var(--t-reveal) var(--ease-out) 120ms, translate var(--t-reveal) var(--ease-out) 120ms,
    color var(--t-fast) var(--ease-ui);
}
@media (hover: hover) {
  .hero > .tour-card .tour-step:hover,
  .hero > .tour-card .tour-step:hover kbd {
    color: var(--lp-text);
  }
}
.hero > .tour-card .tour-step:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 6px;
  border-radius: 4px;
}
/* A card the keyboard was taken into (sections/tour.js marks it .keyed) shows it, round its glass. A card a link to
   it focused as the page opened, on a phone say, doesn't. */
.hero > .tour-card.keyed:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

/* The phones' progress: the tour's eight beats after the pile, grouped by chapter, the one being scrolled
   through filling with the scroll. */
.tour-track {
  gap: 6px;
  height: 2px;
}
.tour-segs {
  display: flex;
  gap: 3px;
}
.tour-track .tour-segs {
  flex: 1 1 0;
}
.tour-track .tour-segs:nth-child(2) {
  flex-grow: 5;
}
.tour-seg {
  position: relative;
  display: block;
  flex: 1 1 0;
  height: 2px;
  border-radius: 1px;
  background: rgb(255 255 255 / .16);
}
/* Each segment fills as --tour-at runs from the beat before it to its own (--n). */
.tour-seg::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--lp-text);
  transform-origin: 0 50%;
  transform: scaleX(clamp(0, calc(var(--tour-at, 0) - var(--n) + 1), 1));
}
.tour-seg[data-n="1"] { --n: 1; }
.tour-seg[data-n="2"] { --n: 2; }
.tour-seg[data-n="3"] { --n: 3; }
.tour-seg[data-n="4"] { --n: 4; }
.tour-seg[data-n="5"] { --n: 5; }
.tour-seg[data-n="6"] { --n: 6; }
.tour-seg[data-n="7"] { --n: 7; }
.tour-seg[data-n="8"] { --n: 8; }
/* The idle hint (sections/tour.js): after a while at rest on a finished beat, the next segment glows twice. */
@keyframes tour-seg-hint {
  0%, 100% { background-color: rgb(255 255 255 / .16); box-shadow: 0 0 0 rgb(255 255 255 / 0); }
  50% { background-color: rgb(255 255 255 / .5); box-shadow: 0 0 6px rgb(255 255 255 / .3); }
}
@media (prefers-reduced-motion: no-preference) {
  .tour-seg.hint {
    animation: tour-seg-hint 1.4s var(--ease-in-out) 2;
  }
}
/* Next runs the hero's scroll cue loop (styles.css) while the scene rests on a beat: a light sweeps across its words and
   its chevron runs down out of sight and back as the light reaches it. It starts again on every beat it arrives at. */
@media (prefers-reduced-motion: no-preference) {
  .hero[data-arrived="true"] > .tour-card.on .tour-next {
    animation: scroll-cue-sheen 3.4s 800ms infinite;
  }
  .hero[data-arrived="true"] > .tour-card.on .tour-step::before {
    animation: scroll-chevron-run 3.4s 800ms infinite;
  }
  @supports (-webkit-background-clip: text) or (background-clip: text) {
    .hero > .tour-card .tour-next {
      background: linear-gradient(100deg, currentColor 42%, var(--lp-text) 50%, currentColor 58%) 100% 0 / 300% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}
/* Where the buy bar has no room for the navigator, the track sits at the top of the card. */
@media (max-width: 699.98px), (max-height: 519.98px) {
  .hero > .tour-card {
    --track-room: 16px;
  }
  .hero > .tour-card .tour-track {
    position: absolute;
    top: 16px;
    left: 24px;
    right: 24px;
    display: flex;
  }
}

/* Compact: short portrait screens, windows up to a quarter wider than tall (a corner card would cover the desktop
   there, with black above and below it), and any window too narrow for a card beside the Mac. One card along the
   bottom, its headline in two lines (the second, muted, on its own), with no note on a phone: the Mac fits above it,
   Dock included. */
@media (max-aspect-ratio: 5/4), (max-width: 699.98px) and (min-height: 520px) {
  .hero > .tour-card,
  .hero > .tour-card[data-stop="layouts"] {
    --tour-layout: compact;
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    width: auto;
    max-width: 560px;
    margin-inline: auto;
    padding: calc(18px + var(--track-room)) 16px 8px;
    border-radius: 20px;
  }
  .hero > .tour-card .tour-track {
    left: 16px;
    right: 16px;
  }
  .hero > .tour-card .tour-title {
    margin-top: 8px;
    font-size: 26px;
    line-height: 1.04;
  }
  .hero > .tour-card .tour-title .lp-em,
  .tour-title-big .lp-em {
    display: block;
  }
  .hero > .tour-card .tour-sub {
    display: none;
  }
  .hero > .tour-card .tour-chips {
    flex-wrap: nowrap;
    gap: 6px;
    margin-top: 14px;
  }
  .hero > .tour-card[data-stop="projects"] .tour-chips button {
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
    padding: 0 8px;
    font-size: 13px;
  }
  .hero > .tour-card .tour-step {
    min-height: 32px;
    margin-top: 6px;
  }
  .hero > .tour-card .tour-step::after {
    inset: -6px -12px;
  }
}

/* Poster: tall portrait screens, phones and every iPad held upright. The card is a transparent frame under the buy
   bar: the head stands at its top, centred, the headline large with its muted half on a line of its own; the panel,
   the glass, stands at its bottom; app.js frames the Mac between them. */
@media (max-aspect-ratio: 5/6) and (min-height: 700px) {
  .hero > .tour-card,
  .hero > .tour-card[data-stop="layouts"] {
    --tour-layout: poster;
    top: calc(49px + env(safe-area-inset-top) + 22px);
    bottom: max(18px, env(safe-area-inset-bottom));
    left: max(16px, env(safe-area-inset-left));
    right: max(16px, env(safe-area-inset-right));
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    border-radius: 0;
    pointer-events: none;
  }
  /* The frame is no glass; the panel is. */
  .hero > .tour-card,
  .hero > .tour-card.on,
  .hero > .tour-card.on.intro {
    background-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  .hero > .tour-card > .tour-panel {
    width: min(100%, 640px);
    padding: 18px 20px 8px;
    border-radius: 24px;
    pointer-events: auto;
    background-color: rgb(14 14 16 / 0);
    -webkit-backdrop-filter: blur(0) saturate(1) brightness(1);
    backdrop-filter: blur(0) saturate(1) brightness(1);
    box-shadow: inset 0 0 0 .5px rgb(255 255 255 / 0), 0 20px 50px rgb(0 0 0 / 0);
    transition: background-color var(--t-fast) var(--ease-in), -webkit-backdrop-filter var(--t-fast) var(--ease-in),
      backdrop-filter var(--t-fast) var(--ease-in), box-shadow var(--t-fast) var(--ease-in);
  }
  .hero > .tour-card.on > .tour-panel {
    background-color: var(--glass-fill);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-edge);
    transition: background-color var(--t-reveal) var(--ease-out), -webkit-backdrop-filter var(--t-reveal) var(--ease-out),
      backdrop-filter var(--t-reveal) var(--ease-out), box-shadow var(--t-reveal) var(--ease-out);
  }
  .hero > .tour-card.on.intro > .tour-panel {
    background-color: rgb(14 14 16 / 0);
    -webkit-backdrop-filter: blur(0) saturate(1) brightness(1);
    backdrop-filter: blur(0) saturate(1) brightness(1);
    box-shadow: inset 0 0 0 .5px rgb(255 255 255 / 0), 0 20px 50px rgb(0 0 0 / 0);
    transition: none;
  }
  .hero > .tour-card.keyed:focus-visible {
    outline: none;
  }
  .hero > .tour-card.keyed:focus-visible > .tour-panel {
    outline: 2px solid var(--focus);
    outline-offset: 4px;
  }
  .hero > .tour-card .tour-title {
    margin-top: 12px;
    font-size: clamp(34px, 6.4vw, 60px);
    line-height: 1.02;
  }
  .hero > .tour-card .tour-title .lp-em,
  .tour-title-big .lp-em {
    display: block;
  }
  /* A big headline (app.js), if a stop's first visit gives it one here, is set as the card's is. */
  .tour-title-big {
    text-align: center;
  }
  /* Every card's note takes the same room, two lines (three on a narrow phone), so all three panels are one height
     and the Mac stands at the same distance above each; a shorter note sits in the middle of its room. */
  .hero > .tour-card .tour-sub,
  .hero > .tour-card[data-stop="layouts"] .tour-sub {
    display: block;
    min-height: calc(2 * 1.45em);
    max-width: 36em;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.45;
    align-content: center;
  }
  .hero > .tour-card .tour-chips {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
  }
  .hero > .tour-card[data-stop="projects"] .tour-chips button {
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
    max-width: 180px;
    padding: 0 8px;
    font-size: 13px;
  }
  .hero > .tour-card .tour-step {
    min-height: 32px;
    margin-top: 8px;
  }
  .hero > .tour-card .tour-step::after {
    inset: -6px -12px;
  }
  /* On a phone the track leads the panel. */
  .hero > .tour-card .tour-track {
    position: static;
    margin: 0 0 16px;
  }
}
@media (max-aspect-ratio: 5/6) and (min-height: 700px) and (max-width: 419.98px) {
  .hero > .tour-card .tour-sub,
  .hero > .tour-card[data-stop="layouts"] .tour-sub {
    min-height: calc(3 * 1.45em);
  }
}
@media (max-aspect-ratio: 5/6) and (min-height: 700px) and (min-width: 700px) {
  .hero > .tour-card > .tour-panel {
    width: min(100%, 680px);
    padding: 22px 24px 10px;
  }
  .hero > .tour-card .tour-sub,
  .hero > .tour-card[data-stop="layouts"] .tour-sub {
    font-size: 17px;
  }
}

/* Side: landscape phones. The card stands at the left, centred in the height below the buy bar, its headline in two
   lines and no note; app.js puts the Mac in the rest of the width. */
@media (max-height: 519.98px) and (min-aspect-ratio: 5/4) {
  .hero > .tour-card,
  .hero > .tour-card[data-stop="layouts"] {
    --tour-layout: side;
    left: max(16px, env(safe-area-inset-left));
    right: auto;
    top: calc(50% + 24.5px);
    bottom: auto;
    width: clamp(272px, 42vw, 360px);
    padding: calc(16px + var(--track-room)) 16px 6px;
    border-radius: 18px;
    translate: 0 -50%;
  }
  .hero > .tour-card .tour-track {
    top: 15px;
    left: 16px;
    right: 16px;
  }
  .hero > .tour-card .tour-title {
    margin-top: 6px;
    font-size: 22px;
    line-height: 1.04;
  }
  .hero > .tour-card .tour-title .lp-em,
  .tour-title-big .lp-em {
    display: block;
  }
  .hero > .tour-card .tour-sub {
    display: none;
  }
  .hero > .tour-card .tour-chips {
    gap: 10px 6px;
    margin-top: 12px;
  }
  .hero > .tour-card .tour-chips button {
    position: relative;
    min-height: 36px;
    font-size: 13px;
  }
  /* 36 points to see, 44 to press. */
  .hero > .tour-card .tour-chips button::after {
    content: "";
    position: absolute;
    inset: -5px -4px;
  }
  .hero > .tour-card[data-stop="projects"] .tour-chips button {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
    padding: 0 8px;
  }
  .hero > .tour-card .tour-step {
    min-height: 40px;
    margin-top: 6px;
  }
  .hero > .tour-card .tour-step::after {
    inset: -2px -12px;
  }
}

/* The compact cards have no note, but the Notchboard's keeps a short one (notchboard.js): a phone can't drag a window
   by its title bar, so it says what a Mac does, then what the guided run did. It stands beside Replay, where the other
   cards have their pills, so the card is no taller than theirs. app.js names the composition on the hero. (A side
   card, on a landscape phone, has no room for it beside Replay, and keeps none.) */
.hero[data-tour-layout="compact"] > .tour-card[data-stop="notchboard"] .tour-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "chips sub" "step step";
  column-gap: 14px;
  align-items: center;
}
.hero[data-tour-layout="compact"] > .tour-card[data-stop="notchboard"] .tour-chips {
  grid-area: chips;
}
.hero[data-tour-layout="compact"] > .tour-card[data-stop="notchboard"] .tour-sub {
  display: block;
  grid-area: sub;
  min-height: 0;
  max-width: none;
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.35;
  text-align: left;
  text-wrap: pretty;
}
.hero[data-tour-layout="compact"] > .tour-card[data-stop="notchboard"] .tour-step {
  grid-area: step;
  justify-self: start;
}

/* Caption: Mac desktops and iPads held sideways, any window at least 700 wide that is not a tall portrait. No card: the
   words stand centred in the black under the Mac like a film's caption, the headline on one line over a one-line
   note and a row of pills with Next at its end; app.js frames the Mac above it. The eyebrow goes (the
   navigator in the buy bar already says where you are). Every caption is one height, so the Mac holds still from stop
   to stop. */
@media (min-aspect-ratio: 5/6) and (min-width: 700px) and (min-height: 600px), (min-aspect-ratio: 5/4) and (min-width: 700px) and (min-height: 520px) {
  .hero > .tour-card,
  .hero > .tour-card[data-stop="layouts"] {
    --tour-layout: caption;
    --glass-fill: rgb(0 0 0 / 0);
    --glass-blur: none;
    --glass-edge: none;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 20px 24px max(16px, env(safe-area-inset-bottom));
    border-radius: 0;
    display: grid;
    /* The pills and Next centred together as one row. */
    grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
    grid-template-areas: "title title title title" "sub sub sub sub" ". chips step .";
    justify-items: center;
    text-align: center;
  }
  /* A shade behind the words where the desktop runs under them (the board and the notch close up), coming and going
     with them. */
  .hero > .tour-card::before {
    content: "";
    position: absolute;
    inset: -56px 0 0;
    z-index: -1;
    background: linear-gradient(rgb(0 0 0 / 0), rgb(0 0 0 / .7) 56px, #000 120px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-fast) var(--ease-in);
  }
  .hero > .tour-card.on:not(.intro)::before {
    opacity: 1;
    transition: opacity var(--t-move) var(--ease-out);
  }
  /* Close on the board and the notch (app.js's data-close), the desktop runs on under the whole caption: the shade is
     black from the caption's top, the desktop fading out above it, so no window's words run into the headline. It is
     there as the stop comes up, before the headline lands. */
  .hero[data-close~="projects"] > .tour-card[data-stop="projects"]::before,
  .hero[data-close~="notchboard"] > .tour-card[data-stop="notchboard"]::before {
    inset: -72px 0 0;
    background: linear-gradient(rgb(0 0 0 / 0), rgb(0 0 0 / .82) 44px, #000 72px);
  }
  .hero[data-close~="projects"] > .tour-card[data-stop="projects"].on::before,
  .hero[data-close~="notchboard"] > .tour-card[data-stop="notchboard"].on::before {
    opacity: 1;
    transition: opacity var(--t-move) var(--ease-out);
  }
  .hero > .tour-card .tour-head,
  .hero > .tour-card .tour-panel {
    display: contents;
  }
  .hero > .tour-card .lp-eyebrow {
    display: none;
  }
  .hero > .tour-card .tour-title {
    grid-area: title;
    margin: 0;
    font-size: clamp(28px, 2.1vw, 34px);
    line-height: 1.1;
  }
  .hero > .tour-card .tour-title .lp-em,
  .tour-title-big .lp-em {
    display: inline-block;
  }
  .hero > .tour-card .tour-sub {
    display: block;
    grid-area: sub;
    max-width: min(56em, 100%);
    min-height: 0;
    margin-top: 6px;
    font-size: clamp(13.5px, 1vw, 15px);
    line-height: 1.4;
  }
  .hero > .tour-card .tour-chips {
    position: relative;
    isolation: isolate;
    grid-area: chips;
    justify-self: end;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
  }
  .hero > .tour-card .tour-chips button,
  .hero > .tour-card[data-stop="projects"] .tour-chips button,
  .hero > .tour-card[data-stop="layouts"] .tour-chips button {
    flex: none;
    min-width: 0;
    min-height: 34px;
    font-size: 13px;
  }
  .hero > .tour-card[data-stop="projects"] .tour-chips button {
    justify-content: flex-start;
    padding: 0 16px 0 8px;
  }
  .hero > .tour-card[data-stop="layouts"] .tour-chips button {
    gap: 7px;
    padding: 0 14px 0 10px;
  }
  /* The chosen pill: its highlight is one shape that glides from pill to pill (tour.js) in step with the windows, and
     the pills themselves look alike, the chosen one's name brightening as the highlight comes. */
  .hero > .tour-card .tour-thumb {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    box-sizing: border-box;
    border: 1px solid rgb(255 255 255 / .5);
    border-radius: 999px;
    background: rgb(255 255 255 / .12);
    pointer-events: none;
  }
  .hero > .tour-card .tour-chips button,
  .hero > .tour-card .tour-chips button[aria-pressed="true"] {
    border-color: rgb(255 255 255 / .16);
    background-color: rgb(255 255 255 / .04);
    transition: color 450ms var(--ease-in-out), background-color var(--t-fast) var(--ease-ui), border-color var(--t-fast) var(--ease-ui);
  }
  /* Next: a quiet line, as the hero's "Scroll to explore" is, its chevron after the words and running as the cue's
     does. */
  .hero > .tour-card .tour-step {
    grid-area: step;
    justify-self: start;
    flex-direction: row;
    gap: 6px;
    min-height: 34px;
    margin: 12px 0 0 10px;
    padding: 0 8px;
    color: #8e8e93;
    font: 400 12.5px/1 var(--lp-body);
    letter-spacing: 0;
    text-transform: none;
  }
  .hero > .tour-card .tour-step::before {
    order: 2;
  }
  /* Layouts' Next changes with every layout: as wide as its longest ("Next: Keep my layout"), so the row never moves. */
  .hero > .tour-card[data-stop="layouts"] .tour-step {
    min-width: 12.5em;
  }
  .hero > .tour-card .tour-step kbd {
    display: none;
  }
  .hero > .tour-card .tour-step::after {
    inset: -5px -4px;
  }

  /* Motion. Leaving, the words sink a little and dim together, quickly. */
  .hero > .tour-card .tour-head > *,
  .hero > .tour-card .tour-panel > * {
    opacity: 0;
    translate: 0 6px;
    filter: blur(4px);
    transition: opacity 180ms var(--ease-in), translate 180ms var(--ease-in), filter 180ms var(--ease-in),
      color var(--t-fast) var(--ease-ui);
  }
  /* Arriving, they come up one after another out of a soft blur, as the headline does, once the last stop's words have
     gone. */
  .hero > .tour-card.on .tour-head > *,
  .hero > .tour-card.on .tour-panel > * {
    opacity: 1;
    translate: none;
    filter: blur(0);
    transition: opacity 520ms var(--ease-out) var(--rise-delay), translate 700ms var(--ease-ui) var(--rise-delay),
      filter 520ms var(--ease-out) var(--rise-delay), color var(--t-fast) var(--ease-ui);
  }
  .hero > .tour-card .tour-title { --rise-delay: 160ms; }
  .hero > .tour-card .tour-sub { --rise-delay: 240ms; }
  .hero > .tour-card .tour-chips { --rise-delay: 320ms; }
  .hero > .tour-card .tour-step { --rise-delay: 440ms; }
  /* A stop's first visit: its headline flies in big and lands (app.js); the note and the pills wait for it. */
  .hero > .tour-card.on.intro .tour-head > :not(.tour-title),
  .hero > .tour-card.on.intro .tour-panel > * {
    opacity: 0;
    translate: 0 6px;
    filter: blur(4px);
    transition: none;
  }
  .hero > .tour-card.intro-title .tour-sub { --rise-delay: 300ms; }
  .hero > .tour-card.intro-title .tour-chips { --rise-delay: 400ms; }
  .hero > .tour-card.intro-title .tour-step { --rise-delay: 560ms; }
}
/* Too narrow for Layouts' five names with Next beside them: its Next goes under them, and every caption keeps the
   same room for it, so they stay one height. */
@media (min-aspect-ratio: 5/6) and (min-width: 700px) and (min-height: 600px) and (max-width: 849.98px),
  (min-aspect-ratio: 5/4) and (min-width: 700px) and (min-height: 520px) and (max-width: 849.98px) {
  .hero > .tour-card,
  .hero > .tour-card[data-stop="layouts"] {
    grid-template-areas: "title title title title" "sub sub sub sub" ". chips chips ." ". step step .";
  }
  .hero > .tour-card .tour-chips {
    justify-self: center;
  }
  .hero > .tour-card .tour-step,
  .hero > .tour-card[data-stop="layouts"] .tour-step {
    justify-self: center;
    justify-content: center;
    min-height: 28px;
    margin: 6px 0 0;
  }
}
/* A touch screen's pills and Next are a full fingertip tall. */
@media (min-aspect-ratio: 5/6) and (min-width: 700px) and (min-height: 600px) and (hover: none) and (pointer: coarse),
  (min-aspect-ratio: 5/4) and (min-width: 700px) and (min-height: 520px) and (hover: none) and (pointer: coarse) {
  .hero > .tour-card .tour-chips button,
  .hero > .tour-card[data-stop="projects"] .tour-chips button,
  .hero > .tour-card[data-stop="layouts"] .tour-chips button {
    min-height: 44px;
  }
  .hero > .tour-card[data-stop="projects"] .tour-chips button {
    padding: 0 16px;
  }
  .hero > .tour-card .tour-step {
    min-height: 44px;
  }
}
/* The highlight is the chosen pill's own outline everywhere else. */
.tour-thumb {
  display: none;
}

/* Reduced motion: the cards cut in and out with a short cross-fade, nothing rises, nothing runs. */
@media (prefers-reduced-motion: reduce) {
  .hero > .tour-card .tour-head > *,
  .hero > .tour-card .tour-panel > *,
  .hero > .tour-card.on .tour-head > *,
  .hero > .tour-card.on .tour-panel > * {
    translate: none;
    filter: none;
  }
  .hero > .tour-card.on,
  .hero > .tour-card.on > .tour-panel,
  .hero > .tour-card.on .tour-head > *,
  .hero > .tour-card.on .tour-panel > * {
    transition-duration: var(--t-fast);
    transition-delay: 0s;
  }
}