/* The pricing page. It wears the home page's header, footer, type, FAQ tiles
   and conventions (styles.css, site.js, loaded first); this file sets only
   what the home page has no need of: the two plans, the assurances under them,
   the fine print, and the page's opening. */

/* How far the Supporter tile's light leans toward a mouse over it
   (src/client/pricing.ts), never more than 18% of the tile. */
@property --lx {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}
@property --ly {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

/* The head: the home page's two-line headline (styles.css sets h1, its line
   masks and the Pale Slate second line) over a lead. */
.pricing {
  padding-bottom: calc(104 * var(--u));
}
.pricing-intro {
  padding-top: calc(56 * var(--u));
  text-align: center;
}
/* Above the head, the way in for Supporters who came for the forum: a quiet
   key on ink at 5%, like the FAQ tiles, the question in Slate Grey and the
   action in ink. The arrow nudges right when pointed at. */
.pricing-member {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  min-height: calc(36 * var(--u));
  margin-bottom: calc(28 * var(--u));
  padding: 0 calc(12 * var(--u)) 0 calc(16 * var(--u));
  border-radius: calc(18 * var(--u));
  color: var(--muted);
  background: rgb(24 33 38 / 0.05);
  font-size: calc(14 * var(--u));
  line-height: 1.3;
  text-decoration: none;
  transition:
    background-color var(--dur-fast) ease,
    transform 120ms ease;
}
.pricing-member b {
  color: var(--ink);
  font-weight: 600;
}
.pricing-member svg {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  flex: none;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 420ms var(--ease);
}
.pricing-member:hover {
  background: rgb(24 33 38 / 0.08);
}
.pricing-member:hover svg {
  transform: translateX(calc(3 * var(--u)));
}
.pricing-member:active {
  transform: scale(0.98);
}
.pricing-member:focus-visible {
  border-radius: calc(18 * var(--u));
}
.pricing-lead {
  max-width: 52ch;
  margin: calc(24 * var(--u)) auto 0;
  color: var(--muted);
  font-size: calc(17 * var(--u));
  line-height: 1.6;
  text-wrap: pretty;
}

/* Two plans side by side as tiles. Open source rests on ink at 4%, like the
   FAQ tiles; Supporter is set on night, lit from its top corner in the app
   icon's blue and violet. Subgrid lines their rows up, so the prices, the
   actions and the lists share baselines across the pair. */
.tiers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(7, auto);
  column-gap: calc(20 * var(--u));
  width: min(920 * var(--u), 100% - 2 * var(--gutter));
  margin: calc(64 * var(--u)) auto 0;
}
.tier {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-row: span 7;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
  min-width: 0;
  padding: calc(32 * var(--u)) calc(36 * var(--u)) calc(36 * var(--u));
  border-radius: calc(28 * var(--u));
  background: rgb(24 33 38 / 0.04);
}
/* On night the page tokens are remapped, as the footer remaps them, so every
   rule below that says ink, muted or accent reads correctly on the dark. */
.tier-supporter {
  --ink: var(--paper);
  --muted: #a9b5bb;
  --line: rgb(255 255 255 / 0.12);
  --tint: rgb(255 255 255 / 0.1);
  --accent: #c6d8ff;
  color: var(--ink);
  background: var(--night);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.06),
    0 calc(40 * var(--u)) calc(80 * var(--u)) calc(-40 * var(--u)) rgb(15 21 60 / 0.55);
  transition:
    --lx 900ms var(--ease),
    --ly 900ms var(--ease);
}
/* The light is a layer of its own, so it can come on once the tile has
   arrived (see the opening, below). */
.tier-supporter::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(110% 75% at calc(100% + var(--lx)) var(--ly), rgb(138 61 255 / 0.42), transparent 62%),
    radial-gradient(80% 60% at calc(72% + var(--lx)) var(--ly), rgb(58 134 255 / 0.34), transparent 64%);
  pointer-events: none;
}
/* Selection on night, as in the footer. */
.tier-supporter ::selection {
  background: #375865;
  color: var(--paper);
}
.tier-head {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
}
/* A mark for each way to get the app: GitHub for the source, the app icon
   for the ready-to-run build. */
.tier-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  border-radius: calc(12 * var(--u));
  background: var(--paper);
  box-shadow: inset 0 0 0 1px rgb(24 33 38 / 0.08);
  color: #182126;
}
.tier-mark svg {
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  fill: currentColor;
  stroke: none;
}
.tier-mark img {
  width: 100%;
  height: 100%;
}
.tier-supporter .tier-mark {
  background: none;
  box-shadow: none;
}
.tier-name {
  font-size: calc(24 * var(--u));
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.tier-price {
  margin-top: calc(32 * var(--u));
  font-family: var(--display);
  font-size: clamp(44 * var(--u), 4.4vw, 60 * var(--u));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
/* While Paddle prices the Supporter tile: a quiet bar where the figure lands. */
.tier-price-pending {
  display: inline-block;
  width: 2.6em;
  height: 0.72em;
  border-radius: calc(10 * var(--u));
  background: var(--tint);
  vertical-align: baseline;
}
@media (prefers-reduced-motion: no-preference) {
  .tier-price-pending {
    animation: pending 1.4s ease-in-out infinite alternate;
  }
}
@keyframes pending {
  to {
    opacity: 0.45;
  }
}
.tier-note {
  margin-top: calc(12 * var(--u));
  color: var(--muted);
  font-size: calc(13 * var(--u));
  font-weight: 600;
  line-height: 1.4;
}
.tier-description {
  max-width: 38ch;
  margin-top: calc(20 * var(--u));
  font-size: calc(15 * var(--u));
  line-height: 1.6;
}
.tier-features {
  margin: calc(28 * var(--u)) 0 0;
  padding: calc(22 * var(--u)) 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  font-size: calc(14 * var(--u));
  line-height: 1.55;
}
.tier-features li {
  position: relative;
  padding: calc(7 * var(--u)) 0 calc(7 * var(--u)) calc(30 * var(--u));
}
/* Lucide's check, drawn in the tile's ink (cyan on the night). */
.tier-features li::before {
  content: "";
  position: absolute;
  top: calc(8 * var(--u));
  left: 0;
  width: calc(19 * var(--u));
  height: calc(19 * var(--u));
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tier-supporter .tier-features li::before {
  background: #7cf0ff;
}

/* Actions: the home page's pills (styles.css, the launch buttons), full
   width. The quiet pill for the source, the ink pill for the one purchase
   (white on the night tile). */
.tier-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--u));
  min-height: calc(52 * var(--u));
  margin-top: calc(28 * var(--u));
  padding: 0 calc(26 * var(--u));
  border: 0;
  border-radius: 999px;
  color: var(--ink);
  background: rgb(24 33 38 / 0.06);
  font-size: calc(15 * var(--u));
  font-weight: 600;
  line-height: 1;
  text-align: center;
  transition:
    background-color var(--dur-fast) ease,
    opacity var(--dur) ease,
    transform 120ms ease;
}
.tier-action:hover {
  background: rgb(24 33 38 / 0.1);
}
.tier-action:active {
  transform: scale(0.98);
}
.tier-action svg {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  stroke-width: 2;
  transition: transform 220ms var(--ease);
}
/* Lucide's arrow-up-right: the action leaves for GitHub. */
.tier-action:hover svg {
  transform: translate(2px, -2px);
}
.tier-action-ink {
  color: var(--paper);
  background: var(--ink);
}
.tier-action-ink:hover {
  background: var(--accent);
}
/* On the night tile ink is white, so the pill turns over: night on white,
   going to a pale blue under the pointer. */
.tier-supporter .tier-action-ink {
  color: var(--night);
}
.tier-supporter .tier-action-ink:hover {
  background: #e3ebff;
}
/* Buy waits for its price: aria-disabled, so it keeps keyboard focus and its
   description says why. It comes up to full strength when the price lands. */
.tier-action[aria-disabled="true"] {
  opacity: 0.45;
  cursor: default;
}
.tier-action-ink[aria-disabled="true"]:hover {
  background: var(--ink);
}
.tier-action[aria-disabled="true"]:active {
  transform: none;
}
/* Who is buying, or that signing in comes first. The line is held open before
   the session answers so the tile doesn't jump. */
.tier-hint {
  min-height: 1.6em;
  margin-top: calc(12 * var(--u));
  color: var(--muted);
  font-size: calc(12 * var(--u));
  line-height: 1.6;
  text-align: center;
  overflow-wrap: anywhere;
}
/* "Send it again", while Buy waits for a verified email: set as a link in
   running text, as the features' links are. */
.tier-hint button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-decoration-color: #9eacb3;
  cursor: pointer;
  transition:
    color var(--dur-fast) ease,
    text-decoration-color var(--dur-fast) ease;
}
.tier-supporter .tier-hint button {
  text-decoration-color: rgb(255 255 255 / 0.42);
}
.tier-hint button:hover:not(:disabled) {
  color: var(--ink);
  text-decoration-color: currentColor;
}
.tier-hint button:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Links in running text, as on the home page: underlined in Rule Slate,
   going to ink with their underline on hover. */
:is(.tier-features, .assurances, .pricing-fineprint) a {
  text-decoration: underline;
  text-decoration-color: #9eacb3;
  transition:
    color var(--dur-fast) ease,
    text-decoration-color var(--dur-fast) ease;
}
.tier-supporter .tier-features a {
  text-decoration-color: rgb(255 255 255 / 0.42);
}
:is(.tier-features, .assurances, .pricing-fineprint) a:hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}

/* What every purchase comes with, in label type behind Lucide glyphs. */
.assurances {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(12 * var(--u)) calc(32 * var(--u));
  width: min(1184 * var(--u), 100% - 2 * var(--gutter));
  margin: calc(40 * var(--u)) auto 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: calc(13 * var(--u));
  font-weight: 600;
}
.assurances li {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
}
.assurances svg {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  color: var(--ink);
  stroke-width: 1.75;
}

/* The FAQ is the home page's (styles.css); its heading carries a Pale Slate
   second half. */
.pricing .faq h2 span {
  color: var(--soft);
}

.pricing-fineprint {
  width: min(70ch, 100% - 2 * var(--gutter));
  margin: calc(56 * var(--u)) auto 0;
  color: var(--muted);
  font-size: calc(12 * var(--u));
  line-height: 1.6;
  text-align: center;
}

/* The error trio, as the home page's media error. */
.notice-error {
  width: min(920 * var(--u), 100% - 2 * var(--gutter));
  margin: calc(24 * var(--u)) auto 0;
  padding: calc(13 * var(--u)) calc(16 * var(--u));
  border: 1px solid #a97861;
  border-radius: calc(6 * var(--u));
  color: #653c2b;
  background: #f6ede7;
  font-size: calc(13 * var(--u));
  line-height: 1.6;
}

/* Opening, keyed to html.intro as the home page's is: the header arrives and
   the headline rises out of its line masks there (styles.css). Here the lead
   follows, then the plans side by side, the Supporter's light coming on once
   its tile has arrived; the assurances, least of all, only fade in. A tile
   fades in quickly and settles slowly: on paper the night tile would read as
   a grey card for as long as it stayed part-transparent. */
.intro .pricing-lead {
  animation: arrive 800ms var(--ease) 300ms both;
}
.intro .pricing-member {
  animation: fade-in 600ms ease 200ms both;
}
.intro .tier {
  --delay: 420ms;
  animation:
    tile-rise 1000ms var(--ease) var(--delay) both,
    fade-in 360ms var(--ease) var(--delay) both;
}
.intro .tier + .tier {
  --delay: 500ms;
}
@keyframes tile-rise {
  from {
    transform: translateY(16px);
  }
}
.intro .tier-supporter::before {
  animation: light-up 1200ms ease 1100ms both;
}
.intro .assurances {
  animation: fade-in 800ms ease 760ms both;
}
@keyframes light-up {
  from {
    opacity: 0;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: no-preference) {
  /* An error arrives as the fittings do. */
  .notice-error {
    animation: arrive 560ms var(--ease) both;
  }
}

/* Where the four no longer fit one row, they stand two by two rather than
   leave one alone on a second row. */
@media (max-width: 960px) {
  .assurances {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
  }
}
@media (max-width: 760px) {
  .pricing {
    padding-bottom: 80px;
  }
  .pricing-intro {
    padding-top: 40px;
  }
  .tiers {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: 16px;
    margin-top: 48px;
  }
  .tier {
    display: flex;
    flex-direction: column;
    grid-row: auto;
    padding: 28px 24px;
    border-radius: 24px;
  }
  .assurances {
    grid-template-columns: max-content;
    justify-content: start;
    width: fit-content;
  }
  .pricing .faq h2 span {
    display: block;
  }
}
@media (max-width: 540px) {
  .pricing {
    padding-bottom: 64px;
  }
  .pricing-intro {
    padding-top: 28px;
  }
  .pricing-lead {
    margin-top: 18px;
    font-size: 15px;
  }
  .pricing-member {
    margin-bottom: 20px;
    font-size: 13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tier-action:hover svg,
  .pricing-member:hover svg {
    transform: none;
  }
  .pricing-member,
  .pricing-member svg {
    transition: background-color var(--dur-fast) ease;
  }
  .tier-hint button {
    transition: none;
  }
}
@media (forced-colors: active) {
  .tier {
    border: 1px solid CanvasText;
  }
  .tier-action {
    border: 1px solid ButtonText;
  }
  .tier-supporter::before {
    display: none;
  }
}