/* Pricing: the launch video's end card, made pressable (the app icon, the
   Backdrop wordmark, the LAUNCH PRICE pill and "$9.90 once" under the diagonal
   light), then what the license includes on one pane of Liquid Glass, the FAQ
   and the page's footer. It flows in the page's own pixels at every width.
   Hover rules sit in @media (hover: hover), so a tap on a phone never leaves
   anything lit. */
#pricing {
  position: relative;
  overflow-x: clip;
  background: var(--lp-bg);
  color: var(--lp-text);
  font-family: var(--lp-body);
}
.pr-root {
  --pr-col: 1120px;
  --pr-gutter: max(clamp(24px, 5vw, 64px), env(safe-area-inset-left), env(safe-area-inset-right));
  -webkit-font-smoothing: antialiased;
}
.pr-lbl {
  margin: 0;
  color: var(--lp-secondary);
  font: var(--lp-label-weight) 12px/16px var(--lp-label-font);
  letter-spacing: var(--lp-label-track);
  text-transform: uppercase;
}

/* 1. The end card, one screen tall, so the dive's last move lands on it as on
   the video's last shot. One unit sizes it: the wordmark, as large as both the
   width and the height allow. Everything else keeps the end card's
   proportions (output/launch-video/source/teaser.html, shot s8: the icon 0.8
   of the wordmark, the gaps between them), with the price and the line under
   it set smaller than the film's, since here they sit over two buttons. */
.pr-offer {
  --pr-u: clamp(84px, min(17vw, 16svh), 196px);
  --pr-icon: calc(var(--pr-u) * 0.8);
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  min-height: 100svh;
  padding: clamp(72px, 12svh, 150px) var(--pr-gutter) clamp(48px, 8svh, 104px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.pr-lock,
.pr-deal {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* The light: the video's streak (a 2px line, brightest four fifths along,
   rotated -11deg about its left end) and the halo behind the lockup. The
   streak starts 3% in from the screen's left edge and passes half an icon
   above the icon at the middle of the screen (46.875vw along, it has risen
   46.875vw × tan 11° = 9.11vw), so it crosses no text. */
.pr-light {
  position: absolute;
  left: 50%;
  top: 0;
  width: 0;
  height: 0;
  z-index: -1;
  pointer-events: none;
}
.pr-streak {
  position: absolute;
  left: -46.875vw;
  top: calc(var(--pr-icon) * -0.48 + 9.11vw);
  width: 93.75vw;
  height: 2px;
  margin-top: -1px;
  transform-origin: 0 50%;
  transform: rotate(-11deg);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.35) 30%, rgba(255, 255, 255, 0.95) 72%, #ffffff 80%, rgba(255, 255, 255, 0));
  box-shadow: 0 0 26px 6px rgba(255, 255, 255, 0.28);
}
.pr-halo {
  position: absolute;
  left: calc(min(var(--pr-u) * 5, 96vw) / -2);
  top: calc(var(--pr-icon) * -0.28);
  width: min(calc(var(--pr-u) * 5), 96vw);
  height: calc(var(--pr-icon) * 3.44);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.05) 60%, rgba(255, 255, 255, 0));
  filter: blur(40px);
  opacity: 0.9;
}
.pr-icon {
  display: block;
  width: var(--pr-icon);
  height: var(--pr-icon);
  filter: drop-shadow(0 calc(var(--pr-icon) * 0.15) calc(var(--pr-icon) * 0.3) rgba(0, 0, 0, 0.6));
}
.pr-word {
  margin: calc(var(--pr-u) * 0.09) 0 0;
  color: var(--lp-text);
  font: 400 var(--pr-u)/0.92 var(--lp-display);
}
/* LAUNCH PRICE and "$9.90 once", as the end card sets them; on a phone the
   pill goes above the price. */
.pr-price {
  margin: calc(var(--pr-u) * 0.27) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px calc(var(--pr-u) * 0.17);
}
.pr-pill {
  display: inline-flex;
  align-items: center;
  height: 32px;
  /* The tracking trails the last letter, so the left side gets that much more. */
  padding: 0 15px 0 calc(15px + 0.2em);
  box-sizing: border-box;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  color: #e5e5ea;
  font: 500 12px/1 var(--lp-label-font);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pr-amount {
  color: var(--lp-text);
  font: 500 calc(var(--pr-u) * 0.44)/1 var(--lp-body);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
/* checkout.js sets this class while a price is unannounced; "once" and the
   price after launch step aside then. */
.pr-amount .price-pending {
  font-size: 0.6em;
  letter-spacing: -0.01em;
}
.pr-amount:has(.price-pending) .pr-once,
.pr-offer:has(.price-pending) [data-regular-price] {
  display: none;
}
.pr-sub {
  margin: calc(var(--pr-u) * 0.13) 0 0;
  color: #c7c7cc;
  font: 400 clamp(17px, calc(var(--pr-u) * 0.14), 22px)/1.4 var(--lp-body);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
/* At regular prices with trials off, both of its parts are gone. */
.pr-sub:not(:has(> :not([hidden]))),
.pr-offer:has(.price-pending) .pr-sub:not(:has(> :not([hidden], [data-regular-price]))) {
  display: none;
}

/* The two actions: the trial, the one filled button on the page, and the
   license, a pill of Liquid Glass. With trials off the license takes the
   fill. */
.pr-ctas {
  margin-top: clamp(28px, calc(var(--pr-u) * 0.3), 48px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.pr-try,
.pr-act {
  display: contents;
}
.pr-btn {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  box-sizing: border-box;
  min-width: 200px;
  height: 52px;
  margin: 0;
  padding: 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 999px;
  font: 500 16px/1 var(--lp-body);
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--t-reveal) var(--ease-ui), background-color var(--t-fast) ease, box-shadow var(--t-reveal) var(--ease-ui), color var(--t-fast) ease;
}
.pr-btn svg {
  flex-shrink: 0;
  transition: transform var(--t-reveal) var(--ease-ui);
}
.pr-btn:focus-visible {
  outline: 2px solid var(--focus, rgba(255, 255, 255, 0.85));
  outline-offset: 4px;
}
.pr-primary {
  background: #f5f5f7;
  color: #000000;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0 10px 30px rgba(255, 255, 255, 0.08);
}
/* A build without a public download ships the trial button disabled, with its
   note under the buttons. */
.pr-primary:disabled {
  background: rgba(245, 245, 247, 0.16);
  color: rgba(245, 245, 247, 0.55);
  box-shadow: none;
  cursor: not-allowed;
}
/* Liquid Glass, as the switch pop-up draws it: a faint fill, the light behind
   frosted, a specular rim brightest at the top left and bottom right, and an
   inner light along the top. */
.pr-glass,
.pr-facts {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035));
  -webkit-backdrop-filter: blur(16px) saturate(1.8) brightness(1.06);
  backdrop-filter: blur(16px) saturate(1.8) brightness(1.06);
  box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.22), inset 0 -1px 1px rgba(255, 255, 255, 0.06), 0 16px 40px rgba(0, 0, 0, 0.45);
}
.pr-glass::before,
.pr-facts::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.28) 16%, rgba(255, 255, 255, 0.08) 42%, rgba(255, 255, 255, 0.05) 58%, rgba(255, 255, 255, 0.16) 80%, rgba(255, 255, 255, 0.45) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
  transition: opacity var(--t-reveal) ease;
}
.pr-glass {
  color: var(--lp-text);
}
/* Unavailable until checkout.js enables it: quiet, not dead. */
.pr-glass:disabled {
  color: rgba(245, 245, 247, 0.45);
  cursor: not-allowed;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.1);
}
.pr-glass:disabled::before {
  opacity: 0.45;
}
@media (hover: hover) {
  .pr-primary:not(:disabled):hover {
    background: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08), 0 14px 40px rgba(255, 255, 255, 0.16);
  }
  .pr-primary:not(:disabled):hover svg {
    transform: translateY(2px);
  }
  .pr-glass:not(:disabled):hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06));
  }
}
.pr-primary:not(:disabled):active,
.pr-glass:not(:disabled):active {
  transform: scale(0.97);
  transition-duration: var(--t-press);
}
/* Trials off: the build (or checkout.js) hides .pr-try, and the license is
   the one filled button. */
.pr-ctas:not(:has(> .pr-try:not([hidden]))) .pr-glass:not(:disabled) {
  background: #f5f5f7;
  color: #000000;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@media (hover: hover) {
  .pr-ctas:not(:has(> .pr-try:not([hidden]))) .pr-glass:not(:disabled):hover {
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08), 0 14px 40px rgba(255, 255, 255, 0.16);
  }
}
.pr-ctas:not(:has(> .pr-try:not([hidden]))) .pr-glass::before {
  display: none;
}
.pr-cap {
  order: 1;
  flex-basis: 100%;
  color: var(--lp-secondary);
  font-size: 14px;
  line-height: 1.5;
}
.pr-notes {
  margin-top: 22px;
  max-width: 560px;
}
.pr-note {
  margin: 0;
  color: var(--lp-muted);
  font-size: 13px;
  line-height: 1.55;
  text-wrap: balance;
}
.pr-note a {
  color: var(--lp-secondary);
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-underline-offset: 3px;
  transition: color var(--t-fast) ease, text-decoration-color var(--t-fast) ease;
}
@media (hover: hover) {
  .pr-note a:hover {
    color: var(--lp-text);
    text-decoration-color: currentColor;
  }
}
.pr-note + .pr-note {
  margin-top: 4px;
}
.pr-status:empty {
  display: none;
}

/* 2. What the license includes: four facts on one pane of glass. */
.pr-get {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  max-width: calc(var(--pr-col) + 2 * var(--pr-gutter));
  margin: 0 auto;
  padding: 0 var(--pr-gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* A second, softer light behind the pane, on the streak's angle, so its glass
   has something to frost. */
.pr-get::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 46%;
  width: 1500px;
  height: 260px;
  margin: -130px 0 0 -750px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.03) 60%, rgba(255, 255, 255, 0));
  filter: blur(30px);
  transform: rotate(-11deg);
  pointer-events: none;
}
.pr-h3 {
  margin: 16px 0 0;
  color: var(--lp-text);
  font: 400 clamp(40px, 4.4vw, 60px)/1 var(--lp-display);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.pr-h3 em,
.pr-h2 em {
  /* The muted half moves to the next line whole, never split from itself. */
  display: inline-block;
  color: var(--lp-muted);
  font-style: italic;
}
.pr-facts {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  margin: clamp(32px, 4svh, 44px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-radius: 28px;
  text-align: left;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
  box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.2), inset 0 -1px 1px rgba(255, 255, 255, 0.05), 0 30px 80px rgba(0, 0, 0, 0.55);
}
.pr-facts::before {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.16) 18%, rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0.04) 60%, rgba(255, 255, 255, 0.14) 85%, rgba(255, 255, 255, 0.36) 100%);
}
.pr-fact {
  position: relative;
  padding: 30px 30px 32px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pr-fact + .pr-fact::before {
  content: "";
  position: absolute;
  left: 0;
  top: 28px;
  bottom: 28px;
  width: 1px;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.12) 30%, rgba(255, 255, 255, 0.12) 70%, rgba(255, 255, 255, 0));
}
.pr-fact svg {
  margin-bottom: 12px;
  color: var(--lp-text);
}
.pr-fact strong {
  color: var(--lp-text);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.pr-fact span {
  color: var(--lp-secondary);
  font-size: 14px;
  line-height: 1.5;
  text-wrap: pretty;
}
.pr-meta {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
/* Quiet outline pills, the LAUNCH PRICE pill's siblings, in the body face
   (uppercase would turn macOS into MACOS). */
.pr-meta li {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 13px;
  box-sizing: border-box;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  color: var(--lp-secondary);
  font: 400 13px/1 var(--lp-body);
}
.pr-links {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 22px;
}
.pr-links-lead {
  color: var(--lp-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* Links: a quiet underline that draws in on hover. */
.pr-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--lp-secondary);
  font-size: 14px;
  line-height: 1.5;
  text-decoration: none;
  transition: color var(--t-fast) ease, opacity var(--t-press) ease;
}
.pr-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--t-reveal) var(--ease-ui);
}
.pr-link svg {
  transition: transform var(--t-reveal) var(--ease-ui);
}
@media (hover: hover) {
  .pr-link:hover {
    color: var(--lp-text);
  }
  .pr-link:hover::after {
    transform: none;
  }
  .pr-link:hover svg {
    transform: translate(2px, -2px);
  }
}
.pr-link:active {
  opacity: 0.55;
}
.pr-link:focus-visible {
  outline: 2px solid var(--focus, rgba(255, 255, 255, 0.85));
  outline-offset: 2px;
  border-radius: 4px;
}

/* 3. FAQ: the heading holds still beside the questions, and an open answer
   lifts onto glass. One answer is open at a time (pricing.js). */
.pr-faq {
  box-sizing: border-box;
  max-width: calc(var(--pr-col) + 2 * var(--pr-gutter));
  margin: clamp(120px, 16svh, 176px) auto 0;
  padding: 0 var(--pr-gutter);
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  column-gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.pr-faq-head {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.pr-h2 {
  margin: 0;
  font: 400 var(--lp-h3-size)/var(--lp-h3-leading) var(--lp-display);
  letter-spacing: var(--lp-h3-track);
}
.pr-h2 em {
  display: block;
}
.pr-more {
  margin-top: -4px;
}
.pr-items {
  border-top: 1px solid var(--lp-hairline);
  transition: border-color var(--t-reveal) ease;
}
.pr-item {
  position: relative;
  border-bottom: 1px solid var(--lp-hairline);
  transition: border-color var(--t-reveal) ease;
}
.pr-item::before {
  content: "";
  position: absolute;
  inset: -1px -24px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  opacity: 0;
  transform: scale(0.985);
  transition: opacity var(--t-reveal) ease, transform var(--t-move) var(--ease-ui);
  pointer-events: none;
}
.pr-item.pr-open::before {
  opacity: 1;
  transform: none;
}
.pr-item.pr-open,
.pr-item:has(+ .pr-item.pr-open) {
  border-bottom-color: transparent;
}
.pr-items:has(> .pr-item:first-child.pr-open) {
  border-top-color: transparent;
}
.pr-item h3 {
  margin: 0;
  font-weight: 400;
}
.pr-q {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 22px 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border: 0;
  background: transparent;
  color: var(--lp-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pr-q:focus-visible {
  outline: 2px solid var(--focus, rgba(255, 255, 255, 0.85));
  outline-offset: 4px;
  border-radius: 12px;
}
.pr-qt {
  color: var(--lp-text);
  font: 400 var(--lp-card-s-size)/var(--lp-card-s-leading) var(--lp-display);
  text-wrap: pretty;
  transition: color var(--t-fast) ease;
}
.pr-pm {
  position: relative;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  transition: background-color var(--t-fast) ease, box-shadow var(--t-fast) ease, transform var(--t-reveal) var(--ease-ui);
}
.pr-pm::before,
.pr-pm::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 16.25px;
  width: 12px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--lp-text);
  transition: transform var(--t-move) var(--ease-ui);
}
.pr-pm::after {
  transform: rotate(90deg);
}
.pr-open .pr-pm::before,
.pr-open .pr-pm::after {
  transform: rotate(180deg);
}
.pr-open .pr-pm {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}
@media (hover: hover) {
  .pr-q:hover .pr-pm {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
  }
  .pr-items:hover .pr-q:not(:hover) .pr-qt {
    color: var(--lp-secondary);
  }
}
.pr-q:active .pr-pm {
  transform: scale(0.88);
  transition-duration: var(--t-press);
}
/* The answer opens by its own height (a grid row from 0fr to 1fr) and its text
   follows a beat behind; closing, the text leaves first. */
.pr-a {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 500ms var(--ease-ui), visibility 0s linear 500ms;
}
.pr-open .pr-a {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 550ms var(--ease-ui), visibility 0s;
}
.pr-ai {
  min-height: 0;
  overflow: hidden;
}
.pr-ap {
  margin: 0;
  padding: 0 62px 26px 0;
  max-width: 620px;
  color: var(--lp-secondary);
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--t-fast) ease, transform var(--t-reveal) var(--ease-ui);
}
.pr-open .pr-ap {
  opacity: 1;
  transform: none;
  transition: opacity var(--t-reveal) ease 120ms, transform var(--t-move) var(--ease-ui) 60ms;
}
/* Without JavaScript every answer is open and the questions are headings. */
@media (scripting: none) {
  .pr-a {
    grid-template-rows: 1fr;
    visibility: visible;
  }
  .pr-ap {
    opacity: 1;
    transform: none;
  }
  .pr-q {
    cursor: default;
  }
  .pr-pm {
    display: none;
  }
}

/* 4. The footer: the page's last line, then the wordmark the hero opened with,
   fading into the bottom edge. */
.pr-foot {
  position: relative;
  margin-top: clamp(120px, 16svh, 176px);
  padding: 0 var(--pr-gutter) env(safe-area-inset-bottom, 0px);
  overflow: hidden;
}
.pr-foot-row {
  box-sizing: border-box;
  max-width: var(--pr-col);
  margin: 0 auto;
  padding: 18px 0;
  display: flex;
  align-items: center;
  gap: 0 18px;
  flex-wrap: wrap;
  border-top: 1px solid var(--lp-hairline);
  color: var(--lp-muted);
  font-size: 14px;
  line-height: 1.5;
}
.pr-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--lp-text);
  text-decoration: none;
}
.pr-brand:focus-visible {
  outline: 2px solid var(--focus, rgba(255, 255, 255, 0.85));
  outline-offset: 2px;
  border-radius: 6px;
}
.pr-brand img {
  width: 28px;
  height: 28px;
}
.pr-name {
  font: 400 24px/1 var(--lp-display);
}
.pr-foot-nav {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0 26px;
}
.pr-sign {
  box-sizing: border-box;
  max-width: calc(var(--pr-col) + 2 * var(--pr-gutter));
  height: calc(min(29vw, 360px) * 0.62);
  margin: 8px auto 0;
  overflow: hidden;
  color: transparent;
  font: 400 min(29vw, 360px)/0.9 var(--lp-display);
  letter-spacing: -0.015em;
  text-align: center;
  white-space: nowrap;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.02) 60%, rgba(255, 255, 255, 0) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-user-select: none;
  user-select: none;
}

/* Motion. The end card comes in on the video's beats (teaser.html, shot s8):
   the streak draws from its left end in 0.4 s, the halo glows up in 0.6 s, the
   icon pops (0.8 to 1, overshooting), and the wordmark (+0.12 s), the price
   (+0.45 s) and the line under it (+0.75 s) rise out of a blur, then the two
   buttons and the notes. The panel and the FAQ rise as they come up.
   pricing.js moves each part from .pr-wait to .pr-in when it is first seen,
   then to .pr-done once it has landed, so no finished animation holds a
   layer. Without JavaScript or with reduced motion everything is simply
   there. */
@keyframes pr-draw { from { opacity: 0; transform: rotate(-11deg) scaleX(0); } to { opacity: 1; transform: rotate(-11deg); } }
@keyframes pr-glow { from { opacity: 0; } to { opacity: 0.9; } }
@keyframes pr-pop { from { transform: scale(0.8); } to { transform: none; } }
@keyframes pr-show { from { opacity: 0; } to { opacity: 1; } }
@keyframes pr-reveal { from { opacity: 0; transform: translateY(var(--pr-dy)); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes pr-rise { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
/* While the finished card is on screen its light breathes, line and halo
   together, on a twelve-beat loop. */
@keyframes pr-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.72; } }
.pr-word { --pr-dy: 30px; --pr-at: 120ms; --pr-for: 500ms; }
.pr-price { --pr-dy: 16px; --pr-at: 450ms; --pr-for: 450ms; }
.pr-sub { --pr-dy: 12px; --pr-at: 750ms; --pr-for: 450ms; }
.pr-ctas { --pr-dy: 12px; --pr-at: 950ms; --pr-for: 500ms; }
.pr-notes { --pr-dy: 8px; --pr-at: 1100ms; --pr-for: 500ms; }
@media (prefers-reduced-motion: no-preference) {
  .pr-offer.pr-wait :is(.pr-streak, .pr-halo, .pr-icon, .pr-rv),
  :is(.pr-get, .pr-faq).pr-wait {
    opacity: 0;
  }
  .pr-offer.pr-in .pr-streak { animation: pr-draw 400ms var(--ease-out) both; }
  .pr-offer.pr-in .pr-halo { animation: pr-glow 600ms var(--ease-out) both; }
  .pr-offer.pr-in .pr-icon { animation: pr-pop 450ms var(--ease-back) both, pr-show 150ms linear both; }
  .pr-offer.pr-in .pr-rv { animation: pr-reveal var(--pr-for) var(--ease-out) var(--pr-at) both; }
  :is(.pr-get, .pr-faq).pr-in { animation: pr-rise 900ms var(--ease-out) both; }
  .pr-live .pr-light { animation: pr-breathe 6s var(--ease-sine) infinite; }
}

/* Up to 1199px the open answer's glass keeps closer to the column. */
@media (max-width: 1199px) {
  .pr-item::before {
    inset: -1px -14px;
    border-radius: 18px;
  }
}
/* Up to 1023px: the facts in two rows, the FAQ in one column. */
@media (max-width: 1023px) {
  .pr-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pr-fact:nth-child(3)::before {
    display: none;
  }
  .pr-fact:nth-child(n + 3)::after {
    content: "";
    position: absolute;
    top: 0;
    left: 28px;
    right: 28px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.12) 20%, rgba(255, 255, 255, 0.12) 80%, rgba(255, 255, 255, 0));
  }
  .pr-faq {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 36px;
  }
  .pr-faq-head {
    position: static;
  }
  .pr-foot-nav {
    margin-left: 0;
    flex-basis: 100%;
  }
}
/* Phones: one column of facts, the actions full width. */
@media (max-width: 600px) {
  .pr-root {
    --pr-gutter: max(20px, env(safe-area-inset-left), env(safe-area-inset-right));
    --lp-h3-size: 44px;
    --lp-card-s-size: 25px;
  }
  .pr-offer {
    --pr-u: clamp(64px, min(23vw, 12svh), 96px);
    padding-top: clamp(48px, 9svh, 80px);
    padding-bottom: clamp(32px, 6svh, 56px);
  }
  .pr-deal {
    align-self: stretch;
  }
  .pr-ctas {
    align-self: stretch;
    flex-direction: column;
    gap: 10px;
  }
  .pr-btn {
    width: 100%;
  }
  .pr-facts {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 24px;
  }
  .pr-fact {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 2px;
    padding: 20px 22px;
  }
  .pr-fact svg {
    grid-row: span 2;
    margin: 1px 0 0;
  }
  .pr-fact + .pr-fact::before {
    left: 22px;
    right: 22px;
    top: 0;
    bottom: auto;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.12) 20%, rgba(255, 255, 255, 0.12) 80%, rgba(255, 255, 255, 0));
  }
  .pr-fact:nth-child(3)::before {
    display: block;
  }
  .pr-fact:nth-child(n + 3)::after {
    display: none;
  }
  .pr-links {
    flex-direction: column;
    gap: 0;
  }
  .pr-links-lead {
    margin-top: 8px;
  }
  .pr-q {
    gap: 18px;
    padding: 20px 0;
  }
  .pr-item::before {
    inset: -1px -12px;
  }
  .pr-ap {
    padding-right: 0;
  }
  .pr-foot-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .pr-foot-nav {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 0 36px;
  }
}
/* Short phone screens (an iPhone SE, Safari's toolbars showing): the same card
   drawn tighter, so it still fits the screen. */
@media (max-width: 600px) and (max-height: 700px) {
  .pr-offer {
    --pr-u: clamp(56px, min(23vw, 13svh), 96px);
    padding-top: clamp(28px, 6svh, 48px);
    padding-bottom: 24px;
  }
  .pr-price {
    margin-top: calc(var(--pr-u) * 0.22);
    row-gap: 8px;
  }
  .pr-ctas {
    margin-top: 22px;
    gap: 8px;
  }
  .pr-btn {
    height: 48px;
  }
  .pr-notes {
    margin-top: 14px;
  }
}
/* Phones on their side: the lockup on the left, the price and the actions on
   the right, so the whole card still fits one short screen. The light ends at
   the wordmark's right edge, before the price. */
@media (orientation: landscape) and (max-height: 500px) {
  .pr-offer {
    --pr-u: clamp(56px, min(10vw, 22svh), 104px);
    flex-direction: row;
    gap: clamp(32px, 6vw, 72px);
    padding-block: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-bottom));
  }
  .pr-lock {
    flex-shrink: 0;
  }
  .pr-streak {
    width: calc(46.875vw + var(--pr-u) * 1.8);
  }
  .pr-deal {
    flex: 0 1 400px;
    min-width: 0;
  }
  .pr-price {
    margin-top: 0;
  }
  .pr-ctas {
    align-self: stretch;
    margin-top: 18px;
    gap: 8px;
  }
  /* Side by side they share the column; wrapped, each takes its row. */
  .pr-btn {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0 20px;
    font-size: 15px;
  }
  .pr-notes {
    margin-top: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pr-btn, .pr-btn svg, .pr-link, .pr-link::after, .pr-link svg, .pr-note a, .pr-items, .pr-item, .pr-item::before, .pr-qt, .pr-pm, .pr-pm::before, .pr-pm::after, .pr-a, .pr-ap, .pr-open .pr-a, .pr-open .pr-ap {
    transition-duration: 0.01s;
    transition-delay: 0s;
  }
  .pr-btn:hover, .pr-btn:active {
    transform: none;
  }
}