/* The plans page: the head and its term switch, and the three tiers. The
   tiers' pictures and the row of what Pro unlocks are plans-art.css. */

/* ------------------------------------------------------------------ head --- */

.plans-hero {
  padding-top: calc(var(--masthead) + clamp(48px, 7vw, 104px));
  padding-bottom: clamp(32px, 4vw, 48px);
}

.plans-hero h1 {
  max-width: 14ch;
  font-size: var(--title-page);
  line-height: 1.07;
}

.plans-hero .lede {
  max-width: 36em;
  margin-top: 20px;
}

/* Monthly or annual: a segmented control, its thumb one raised pill that
   slides between the two on the snappy spring. */
.term-switch {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--fill);
}

.term-switch button {
  position: relative;
  z-index: 1;
  min-width: 116px;
  min-height: 34px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--label-2);
  font-size: var(--footnote);
  font-weight: 600;
  transition: color var(--fast) var(--ease-out-soft);
}

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

.term-switch button:focus-visible {
  outline-offset: -2px;
}

.term-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: var(--r-pill);
  background: #5c5d62;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 3px 8px rgba(0, 0, 0, 0.18);
  transition: translate var(--spring-snappy-ms) var(--spring-snappy);
}

@media (prefers-color-scheme: light) {
  .term-thumb {
    background: #ffffff;
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.04), 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04);
  }
}

.term-switch[data-term="annual"] .term-thumb {
  translate: 100% 0;
}

/* The switch stays pinned under the masthead while the tiers are in view;
   pinned over a card it takes the frosted material (plans.js sets
   data-stuck). */
.term-bar {
  position: sticky;
  top: calc(var(--masthead) + 12px);
  z-index: 10;
  display: flex;
  pointer-events: none;
}

.term-bar .term-switch {
  pointer-events: auto;
  transition:
    translate var(--spring-snappy-ms) var(--spring-snappy),
    background-color var(--slow) var(--ease-out-soft),
    box-shadow var(--slow) var(--ease-out-soft);
}

/* Pinned, it glides to the middle of the page: plans-pin.js measures the
   distance from its place in the head to the viewport's centre. Only
   translate moves, so the bar's own pin line holds still. */
.term-bar[data-stuck] .term-switch {
  translate: var(--pin-x, 0px) 0;
}

.term-bar[data-stuck] .term-switch {
  background: var(--material-thick);
  -webkit-backdrop-filter: var(--material-blur);
  backdrop-filter: var(--material-blur);
  box-shadow: var(--highlight), 0 0 0 0.5px var(--hairline), var(--shadow-float);
}

.term-note {
  margin-top: 10px;
}

.term-note + .tiers-notice,
.term-note + .tiers-notice[hidden] + .tiers {
  margin-top: clamp(28px, 3.4vw, 40px);
}

/* ----------------------------------------------------------------- tiers --- */

.tiers-band {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(72px, 8vw, 112px);
}

.tiers-notice {
  max-width: 760px;
  margin-bottom: 24px;
}

.tiers {
  display: grid;
  gap: 20px;
  align-items: stretch;
}

@media (min-width: 680px) {
  .tiers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tier-fleet {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1040px) {
  .tiers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tier-fleet {
    grid-column: auto;
  }
}

.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-panel);
  background: var(--surface);
  box-shadow: var(--highlight);
}

/* Pro is the plan most people want, so it is lifted: the elevated tone, a
   hairline of the tint, and a shadow under it. No glow, no motion. */
.tier-pro {
  background: var(--elevated);
  box-shadow: var(--highlight), 0 0 0 1px var(--tint-line), var(--shadow-float);
}

.tier-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  justify-content: space-between;
}

.tier-art {
  position: relative;
  height: 168px;
  margin: 8px 8px 0;
  overflow: hidden;
  border-radius: calc(var(--r-panel) - 8px);
  background: var(--well);
}

/* Pinned to the frame, so the picture fits its height as well as its width. */
.tier-art svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 12px 8px 4px;
}

.tier-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24px clamp(22px, 2.4vw, 28px) clamp(24px, 2.6vw, 28px);
}

.tier-name {
  font-size: var(--title-2);
  letter-spacing: var(--track-title);
}

.tier-tag {
  margin-top: 2px;
  color: var(--label-2);
  font-size: var(--callout);
}

/* A new price drops into place rather than swapping in. */
.price b.is-ticking {
  animation: price-tick 480ms var(--spring-snappy);
}

@keyframes price-tick {
  from {
    opacity: 0;
    translate: 0 -10px;
  }
}

.tier .checklist {
  margin: 24px 0 28px;
}

.tier-buy,
.tier-manage {
  width: 100%;
  margin-top: auto;
}

.tier-foot {
  margin-top: auto;
  color: var(--label-2);
  font-size: var(--footnote);
}

.tier-current {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  align-self: flex-start;
  margin-top: 14px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--green-fill);
  color: var(--green-ink);
  font-size: var(--caption);
  font-weight: 600;
}

.tier-current::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

/* Above its card's button (plans.js moves it there), the mark takes the
   button's push to the card's foot. */
.tier-current:has(+ .tier-buy, + .tier-manage) {
  margin: auto 0 12px;
}

.tier-current + .tier-buy,
.tier-current + .tier-manage {
  margin-top: 0;
}

/* The plan held last, once a failed payment ended it: a record, not a state. */
.tier-current.is-last {
  background: var(--fill-2);
  color: var(--label-2);
}

.trial-note {
  margin-top: 12px;
}

.tiers-status {
  text-align: center;
}

.tiers-note {
  max-width: 68ch;
  margin-top: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .price b.is-ticking {
    animation: none;
  }
}