/* The buy bar: a slim header that slides in once the tour begins (the first step) and steps aside over Pricing,
   where the plans are the call to action. buybar.js sets data-visible. In its middle, the tour's navigator (as on
   Apple's product pages): the four chapters over a segmented progress, one segment a beat, five under Layouts, the one
   being scrolled through filling with the scroll (sections/tour.js and tour.css). */
.buy-bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  box-sizing: content-box;
  height: 48px;
  padding: env(safe-area-inset-top) max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--lp-hairline);
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  font-family: var(--lp-body);
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .3s ease, visibility 0s linear .45s;
}
.buy-bar[data-visible="true"] {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .3s ease, visibility 0s;
}
.buy-bar-brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  color: var(--lp-text);
  font: 400 22px/1 var(--lp-display);
  letter-spacing: -.01em;
  text-decoration: none;
}
.buy-bar-brand img {
  width: 24px;
  height: 24px;
}
/* Get Backdrop, at the bar's right end (its look: tokens.css .lp-cta). */
.buy-bar-cta {
  grid-column: 3;
  justify-self: end;
}

/* The navigator. Each chapter is a button over its segments; a chapter of one beat is pressed anywhere over its
   label and segment, Layouts' five segments each step to their layout and name it on hover. */
.tour-nav ol {
  display: flex;
  gap: clamp(18px, 2.2vw, 30px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tour-nav li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 2px;
}
.tour-chapter {
  display: inline-flex;
  gap: 7px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--lp-muted);
  font: var(--lp-label-weight) 11px/1 var(--lp-label-font);
  letter-spacing: var(--lp-label-track);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--t-fast) var(--ease-ui);
}
.tour-chapter-n {
  color: #6e6e73;
  transition: color var(--t-fast) var(--ease-ui);
}
/* The chapter's target: its label and, for a chapter of one beat, the segment under it, the bar's height. */
.tour-chapter::after {
  content: "";
  position: absolute;
  inset: -14px -8px;
}
@media (pointer: fine) {
  .tour-nav li[data-chapter="layouts"] .tour-chapter::after {
    bottom: 50%;
  }
}
/* A finger takes Layouts as a whole: its segments are too small to aim at, and say their names only to a pointer. */
@media (pointer: coarse) {
  .tour-nav button.tour-seg {
    pointer-events: none;
  }
}
.tour-nav li.done .tour-chapter {
  color: var(--lp-secondary);
}
.tour-chapter[aria-current="step"] {
  color: var(--lp-text);
}
.tour-chapter[aria-current="step"] .tour-chapter-n {
  color: var(--lp-secondary);
}
@media (hover: hover) {
  .tour-chapter:hover {
    color: var(--lp-text);
  }
}
/* The ring clears the segments under the label. */
.tour-chapter:focus-visible,
.tour-nav .tour-seg:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}
.tour-nav .tour-segs {
  position: relative;
  height: 2px;
}
.tour-nav button.tour-seg {
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-ui);
}
/* A Layouts segment's target reaches 22px tall. */
.tour-nav button.tour-seg::before {
  content: "";
  position: absolute;
  inset: -10px -1.5px;
}
@media (hover: hover) {
  .tour-nav button.tour-seg:hover {
    background-color: rgb(255 255 255 / .34);
  }
}
/* The layout's name under its segment, in the glass of the app's pop-ups. */
.tour-tip {
  position: absolute;
  top: 16px;
  left: 50%;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgb(28 28 30 / .94);
  box-shadow: inset 0 0 0 .5px rgb(255 255 255 / .18), 0 8px 24px rgb(0 0 0 / .5);
  color: var(--lp-text);
  font: 500 12px/1 var(--lp-body);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  opacity: 0;
  translate: -50% -4px;
  pointer-events: none;
  transition: opacity var(--t-fast) var(--ease-in), translate var(--t-fast) var(--ease-in);
}
.tour-seg:hover .tour-tip,
.tour-seg:focus-visible .tour-tip {
  opacity: 1;
  translate: -50% 0;
  transition: opacity var(--t-fast) var(--ease-out) 60ms, translate var(--t-fast) var(--ease-out) 60ms;
}
/* An iPad held upright: the chapters go by their names alone (its cards' eyebrows keep the numbers). */
@media (max-width: 959.98px) {
  .tour-chapter-n {
    display: none;
  }
}
/* No room for it on a phone (the track sits in the card) or a phone held sideways. */
@media (max-width: 699.98px), (max-height: 519.98px) {
  .buy-bar {
    display: flex;
    justify-content: space-between;
  }
  .tour-nav {
    display: none;
  }
}
@media (max-width: 760px) {
  .buy-bar {
    padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right));
  }
  .buy-bar-brand {
    font-size: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .buy-bar,
  .buy-bar[data-visible="true"] {
    transform: none;
    transition: opacity .01s, visibility 0s;
  }
}