/* Ambi pricing page + checkout return page.
 * Figma: 💻 Ambi · Desktop App → Pricing · Desktop (2914:117799), Tablet
 * (2954:13360), Mobile (2923:13577). Companion to site-chrome.css (fonts,
 * header/footer). Tokens below mirror the design file's foreground / muted /
 * accent / surface values; the design uses SF Pro for body copy, which the
 * site renders with its Medium LL body face. */
html { color-scheme: light; }
body { margin: 0; }

.pricing-page {
  --p-bg: #f5f2ef;               /* frame fill */
  --p-fg: #152b2d;               /* foreground/foreground */
  --p-muted: #71717a;            /* foreground/muted */
  --p-accent: #2d5a4a;           /* accent/accent */
  --p-accent-fg: #fcfcfc;        /* accent/accent-foreground */
  --p-line: #e4e4e7;             /* FAQ divider */
  --p-line-soft: #dedee0;        /* footnote box / footer divider */
  --p-tag-bg: #deede4;           /* Tag · Save 15% */
  --p-tag-fg: #346854;
  --p-card: rgba(255, 255, 255, 0.6);   /* surface/surface-60 */
  --p-shadow: 0 4px 8px rgba(0, 0, 0, 0.04); /* glass-3 */
  --p-body: var(--font-body);
  --p-strong: "MediumLLWeb-SemiBold", var(--font-body);

  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--p-bg);
  color: var(--p-fg);
  font-family: var(--p-body);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.154px;
  -webkit-font-smoothing: antialiased;
}

.pricing-page .header { position: relative; padding-top: 0; height: 100px; flex-shrink: 0; }
.pricing-page .header::before { display: none; }
.pricing-page .header__logomark { pointer-events: auto; }
.pricing-page a:focus-visible,
.pricing-page button:focus-visible,
.pricing-page summary:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 4px; }
.pricing-skip { position: fixed; top: 12px; left: 20px; z-index: 200; padding: 12px 18px; background: white; transform: translateY(-160%); }
.pricing-skip:focus { transform: translateY(0); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- content column: ≥1280 → 1200, 960–1279 → 880, <960 → full ---------- */
.pricing-shell { width: min(100% - 80px, 1200px); margin: 0 auto; }

/* ---------- Choose plan ---------- */
.pricing-choose { padding: 80px 0 0; text-align: center; }
.pricing-title {
  margin: 0;
  font: 400 40px/48px var(--font-title);
  letter-spacing: -0.5px;
  color: var(--p-fg);
}

/* Billing tabs (Figma instance "Billing tabs": 336×37, glass surface-30) */
.pricing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: 336px;
  max-width: 100%;
  margin-top: 32px;
  padding: 4px 8px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: var(--p-shadow);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.pricing-toggle-btn {
  position: relative;
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 29px;
  padding: 4px 12px;
  border: 0;
  border-radius: 32px;
  background: transparent;
  color: var(--p-muted);
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.154px;
  cursor: pointer;
  transition: color 160ms ease;
}
.pricing-toggle-btn:hover { color: var(--p-fg); }
.pricing-toggle-btn[aria-pressed="true"] {
  color: var(--p-fg);
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.pricing-save {
  display: inline-flex;
  align-items: center;
  height: 21px;
  padding: 0 8px;
  border-radius: 9999px;
  background: var(--p-tag-bg);
  color: var(--p-tag-fg);
  font-family: var(--p-strong);
  font-size: 10px;
  line-height: 13px;
  letter-spacing: 0;
  white-space: nowrap;
}

/* ---------- plan cards (Figma "Plan / *": 288 wide, radius 20, surface-60) ---------- */
/* auto-fill of 288px columns: four cards fill the 1200 column exactly
   (Figma), three (Free hidden) centre themselves, and the 880 tablet column
   wraps to the design's 2 × 2. */
.pricing-plans {
  display: grid;
  grid-template-columns: repeat(auto-fill, 288px);
  justify-content: center;
  gap: 16px;
  align-items: stretch;
  margin-top: 32px;
  text-align: left;
}
.plan-card {
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-width: 0;
  padding: 20px 20px 40px;
  border-radius: 20px;
  background: var(--p-card);
  box-shadow: var(--p-shadow);
  overflow-wrap: break-word;
}
.plan-identity { display: flex; flex-direction: column; gap: 8px; }
.plan-card h2 {
  margin: 0;
  font-family: var(--p-strong);
  font-weight: 400;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: -0.264px;
}
.plan-tagline { margin: 0; min-height: 40px; }

.plan-price { position: relative; display: flex; flex-direction: column; gap: 8px; }
.plan-price-line { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; min-height: 40px; }
.plan-amount {
  font-family: var(--p-strong);
  font-size: 40px;
  line-height: 40px;
  letter-spacing: 0.52px;
}
.plan-per,
.plan-was,
.plan-billed { color: var(--p-muted); }
.plan-was { text-decoration-thickness: 1px; }
/* Use the existing 40px gap before the CTA; billing never adds card height. */
.plan-billed { position: absolute; top: calc(100% + 8px); inset-inline-start: 0; margin: 0; line-height: 20px; }

/* both price variants are in the DOM; data-cycle on the page root picks one */
.pricing-page[data-cycle="monthly"] [data-cycle-panel="yearly"],
.pricing-page[data-cycle="yearly"] [data-cycle-panel="monthly"] { display: none; }
.pricing-page[data-cycle="yearly"] .plan-price-line[data-cycle-panel="yearly"] { display: flex; }

/* One persistent number replaces the two static panels only after the
   catalog and motion enhancement are ready. Errors keep the static fallback. */
.plan-price-motion { display: none; }
.pricing-page[data-prices="live"] .has-price-motion > .plan-price-line[data-cycle-panel] { display: none; }
.pricing-page[data-prices="live"] .has-price-motion > .plan-price-motion { display: flex; }
.plan-price-motion .plan-amount { margin-block: -0.25em; }
.plan-price-motion .plan-amount::part(suffix) {
  font-family: var(--p-body);
  font-size: 14px;
  letter-spacing: normal;
  color: var(--p-muted);
}

.plan-detail { display: flex; flex-direction: column; gap: 24px; }
.plan-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-width: 32px;
  height: 40px;
  padding: 6px 10px;
  border-radius: 9999px;
  background: var(--p-accent);
  color: var(--p-accent-fg);
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  text-align: center;
  transition: background 160ms ease;
}
.plan-cta:hover { background: #244a3d; }

.plan-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.plan-features li { display: flex; align-items: flex-start; gap: 8px; min-height: 20px; }
.plan-features li img { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; }
.plan-features strong { font-family: var(--p-strong); font-weight: 400; }

/* Free card (Figma 2914:117806) differs from the paid cards: no white fill
   (shadow only), 20px padding on every side, a glass "Try Ambi" button with
   accent text, plain (non-bold) quantities, and the bordered trial footnote
   pinned to the card's foot so it matches the paid cards' height. */
.plan-card--free {
  background: transparent;
  padding-bottom: 20px;
}
.plan-detail--free { flex: 1 1 auto; }
.plan-detail--free .plan-features { flex: 1 1 auto; }
.plan-cta--glass {
  background: var(--p-card);
  color: var(--p-accent);
  box-shadow: var(--p-shadow);
}
.plan-cta--glass:hover { background: rgba(255, 255, 255, 0.85); }
.plan-footnote {
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--p-line-soft);
  border-radius: 12px;
  color: var(--p-muted);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0;
}
.plan-footnote strong { font-family: var(--p-strong); font-weight: 400; }

/* trial + price disclosure: the Figma Free card's bordered footnote, lifted to page level */
.pricing-note {
  width: fit-content;
  max-width: 100%;
  margin: 24px auto 0;
  padding: 13px 17px;
  border: 1px solid var(--p-line-soft);
  border-radius: 12px;
  color: var(--p-muted);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0;
  text-align: center;
}
.pricing-note p { margin: 0; }
.pricing-note p + p { margin-top: 4px; }
.pricing-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- FAQ ---------- */
.pricing-faq { padding: 112px 0 0; }
.pricing-faq h2 {
  margin: 0;
  font: 400 40px/48px var(--font-title);
  letter-spacing: -0.5px;
  text-align: center;
  color: var(--p-fg);
}
.faq-list { width: min(100%, 840px); margin: 48px auto 0; border-top: 1px solid var(--p-line); }
.faq-item { border-bottom: 1px solid var(--p-line); }
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  list-style: none;
  cursor: pointer;
  font: 400 20px/24px var(--font-title);
  letter-spacing: 0;
  color: var(--p-fg);
}
.faq-question > span:first-child { min-height: 28px; display: flex; align-items: center; }
.faq-question::-webkit-details-marker,
.faq-question::marker { display: none; content: ""; }
.faq-icon { position: relative; flex: 0 0 auto; width: 20px; height: 20px; }
.faq-icon img { position: absolute; inset: 0; margin: auto; display: block; }
.faq-icon .faq-icon-plus { width: 14px; height: 14px; }
.faq-icon .faq-icon-minus { width: 20px; height: 20px; display: none; }
.faq-item[open] .faq-icon .faq-icon-plus { display: none; }
.faq-item[open] .faq-icon .faq-icon-minus { display: block; }
.faq-answer { display: flex; flex-direction: column; gap: 8px; padding: 0 0 20px; margin-top: -4px; color: var(--p-muted); }
.faq-answer p { margin: 0; }
.faq-answer strong { font-family: var(--p-strong); font-weight: 400; color: var(--p-fg); }
.faq-table-scroll { width: 100%; overflow-x: auto; margin: 4px 0; }
.faq-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.154px;
  color: var(--p-fg);
}
.faq-table th,
.faq-table td { padding: 8px 0; text-align: left; border-bottom: 1px solid var(--p-line); }
.faq-table thead th { color: var(--p-muted); font-family: var(--p-body); font-weight: 400; font-size: 12px; line-height: 16px; letter-spacing: 0; }
.faq-table tbody th { font-family: var(--p-strong); font-weight: 400; }
.faq-table th:first-child,
.faq-table td:first-child { width: 120px; }
.faq-table th:nth-child(2),
.faq-table td:nth-child(2) { width: 220px; }
.faq-table tbody tr:last-child th,
.faq-table tbody tr:last-child td { border-bottom: 0; }
.pricing-contact { margin: 48px 0 0; padding: 24px 0; color: var(--p-muted); text-align: center; }
.pricing-contact a { color: inherit; text-decoration: none; }
.pricing-contact a:hover { text-decoration: underline; text-underline-offset: 3px; }

.pricing-page .site-footer { margin-top: 112px; }

/* ---------- checkout return ---------- */
.checkout-main { flex: 1; display: grid; place-items: center; padding: 40px 0 64px; }
.checkout-card { text-align: center; max-width: 36em; padding: 0 24px; }
.pricing-eyebrow { margin: 0 0 16px; color: var(--p-muted); font-size: 12px; line-height: 16px; letter-spacing: 0.13em; }
.checkout-card h1 { margin: 0 0 16px; font: 400 40px/48px var(--font-title); letter-spacing: -0.5px; }
.checkout-card p { margin: 0 0 28px; color: var(--p-muted); }
.checkout-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 28px; }
.checkout-actions .plan-cta { width: auto; min-width: 200px; padding: 6px 24px; }
.checkout-secondary { display: inline-flex; align-items: center; min-height: 44px; color: var(--p-fg); text-decoration: underline; text-underline-offset: 4px; }
.checkout-note { margin: 28px 0 0; color: var(--p-muted); font-size: 12px; line-height: 16px; }

/* ---------- 960–1279: 880 column, three narrower cards ---------- */
@media (max-width: 1279px) {
  .pricing-shell { width: min(100% - 80px, 880px); }
  /* 880 column: two 432px cards per row (Figma tablet 2 × 2) */
  .pricing-plans { grid-template-columns: repeat(auto-fill, minmax(288px, 432px)); }
  .pricing-faq { padding-top: 88px; }
  .pricing-page .site-footer { margin-top: 88px; }
}

/* ---------- <960: single column, fixed 24px gutters ---------- */
@media (max-width: 959px) {
  .pricing-shell { width: 100%; padding-inline: 24px; }
  .pricing-choose { padding-top: 48px; }
  .pricing-plans { grid-template-columns: minmax(0, 1fr); }
  .pricing-toggle-btn { min-height: 44px; }
  .faq-question { min-height: 56px; }
  .pricing-faq { padding-top: 72px; }
  .pricing-page .site-footer { margin-top: 72px; }
}

@media (max-width: 768px) {
  .pricing-page .header { height: 84px; }
  .pricing-nav-secondary { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .plan-cta, .pricing-toggle-btn { transition: none; }
}

/* ---------- Stripe checkout hand-off (assets/pricing-purchase.js) ---------- */

/* Progress / failure block under a plan's CTA; hidden at rest. Loud enough
   to be read without hunting for it — a failed checkout must not look like
   nothing happened. */
.plan-status {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--p-line-soft);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
  font-size: 13.5px;
  line-height: 19px;
  color: var(--p-fg);
  text-align: left;
}
.plan-status[data-tone="error"] {
  border-color: #dfc0bb;
  background: #f8e9e6;
  color: #7d332c;
}
.plan-status[data-tone="warn"] {
  border-color: #e3cfa0;
  background: #f8efdc;
  color: #71500f;
}
.plan-status__action {
  display: block;
  margin-top: 6px;
  font-family: var(--p-strong);
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.plan-status__action:hover { opacity: .75; }

.plan-status__cancel {
  display: block;
  margin-top: 8px;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: #a1a1aa;
  font: inherit;
  font-size: 12px;
  text-align: left;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}
.plan-status__cancel:hover { color: var(--p-muted); }
.plan-status__cancel:focus-visible { outline: 2px solid var(--p-muted); outline-offset: 4px; }
.plan-status__cancel:disabled { opacity: .5; cursor: wait; }

/* the CTA while the checkout session is being created */
/* No confirmed price yet, so there is nothing to buy: until the Catalog
   answers, the paid CTAs look and behave like what they are — not ready.
   Without this they are live during the skeleton, and a click raises the
   sign-in overlay for a purchase the page cannot describe yet. The Free
   plan's CTA is a plain link and never depends on the Catalog. */
.pricing-page[data-prices="pending"] .plan-cta[data-plan-cta],
.pricing-page[data-prices="error"] .plan-cta[data-plan-cta] {
  background: transparent;
  border: 1px solid var(--p-line-soft, #dedee0);
  color: var(--p-muted, #71717a);
  pointer-events: none;
  cursor: default;
}

/* The account Catalog refused this plan for this account (any `action` other
   than purchase). It stays readable and focusable — the click explains why —
   but it no longer looks like the primary action. */
.plan-cta[data-action] {
  background: transparent;
  border: 1px solid var(--p-line-soft, #dedee0);
  color: var(--p-muted, #71717a);
  cursor: default;
}
.plan-cta[data-action]:hover { background: transparent; }

.plan-cta[data-action="current_plan"]:not([data-recovery-sku]) {
  border-color: #e9e9eb;
  color: #9b9b9f;
  font-family: var(--p-strong);
  box-shadow: none;
}

.plan-cta[aria-busy="true"] {
  pointer-events: none;
  opacity: .8;
}
.plan-cta[aria-busy="true"]::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 8px;
  vertical-align: -2px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: plan-cta-spin .7s linear infinite;
}
@keyframes plan-cta-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .plan-cta[aria-busy="true"]::before { animation-duration: 2.4s; }
}

/* payment-complete dialog */
.purchase-dialog {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(21, 43, 45, 0.28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.purchase-dialog[hidden] { display: none; }
.purchase-dialog__card {
  width: min(420px, 100%);
  padding: 28px;
  border-radius: 16px;
  background: var(--p-bg);
  box-shadow: 0 20px 60px rgba(21, 43, 45, 0.22);
  text-align: center;
}
.purchase-dialog__card h2 {
  margin: 8px 0 12px;
  font-family: var(--p-strong);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  color: var(--p-fg);
}
.purchase-dialog__card p { margin: 0; font-size: 14px; line-height: 20px; color: var(--p-muted); }
.purchase-dialog__actions {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
.purchase-dialog__actions .checkout-secondary {
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: var(--p-muted);
  padding: 8px;
}
.purchase-dialog__actions .checkout-secondary:hover { color: var(--p-fg); }

.checkout-confirm {
  position: fixed;
  inset: auto;
  margin: 0;
  box-sizing: border-box;
  width: min(280px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow: auto;
  padding: 16px;
  border: 1px solid var(--p-line);
  border-radius: 12px;
  background: #fcfbfa;
  color: var(--p-fg);
  box-shadow: 0 4px 20px rgba(21, 43, 45, 0.1);
  font-family: var(--p-body);
  text-align: left;
}
.checkout-confirm::backdrop { background: transparent; }
.checkout-confirm h2 { margin: 0 0 6px; font-family: var(--p-strong); font-size: 14px; font-weight: 400; line-height: 20px; }
.checkout-confirm p { margin: 0; color: var(--p-muted); font-size: 12px; line-height: 18px; }
.checkout-confirm__actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 14px; }
.checkout-confirm__actions button { appearance: none; font: inherit; font-size: 12px; line-height: 18px; cursor: pointer; }
.checkout-confirm__keep { padding: 5px 10px; border: 1px solid var(--p-accent); border-radius: 6px; background: var(--p-accent); color: var(--p-accent-fg); }
.checkout-confirm__keep:hover { filter: brightness(.94); }
.checkout-confirm__cancel { padding: 5px 0; border: 0; background: transparent; color: var(--p-muted); text-decoration: underline; text-underline-offset: 3px; }
.checkout-confirm__cancel:hover { color: var(--p-fg); }
.checkout-confirm__actions button:focus-visible { outline: 2px solid var(--p-muted); outline-offset: 3px; }

/* ---------- price skeleton ----------
   The built-in prices in the static HTML are a fallback, not something to
   show before the Catalog confirms them — money must not appear and then
   change under the reader. So the numbers ship invisible behind a sweeping
   placeholder, sized by the very text they hide, and are revealed once
   /assets/pricing-catalog.js has an answer (live or fallback).

   All four cards sweep together. The Free tier's $0 does not come from the
   Catalog and will not change, but a row of prices where one is settled and
   three are still loading reads as breakage, not as detail. */
.pricing-page[data-prices="pending"] .plan-amount,
.pricing-page[data-prices="pending"] .plan-was,
.pricing-page[data-prices="pending"] .plan-billed {
  color: transparent;
  border-radius: 8px;
  background-color: #e7e3dd;
  background-image: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 20%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 255, 255, 0) 80%
  );
  background-size: 220% 100%;
  background-repeat: no-repeat;
  background-position: 180% 0;
  animation: plan-price-sweep 1.5s ease-in-out infinite;
  /* The slots hold an em dash until the Catalog answers, so the placeholder
     is sized here instead of by its own text. ch tracks the digit width, so
     these stay right if the type scale changes. */
  -webkit-user-select: none;
  user-select: none;
}
/* Only the inline spans need a display change to take a width. .plan-billed
   is the yearly panel itself and is hidden with display:none on the other
   cycle — giving it a display here would drag it back on screen as a second
   placeholder under the price. It is a <p>, so width lands on it as is. */
.pricing-page[data-prices="pending"] .plan-amount,
.pricing-page[data-prices="pending"] .plan-was {
  display: inline-block;
  vertical-align: baseline;
}
.pricing-page[data-prices="pending"] .plan-amount { width: 4.4ch; }
.pricing-page[data-prices="pending"] .plan-was { width: 3.4ch; }
.pricing-page[data-prices="pending"] .plan-billed { max-width: 13ch; }
/* the strikethrough would still be drawn over the placeholder */
.pricing-page[data-prices="pending"] .plan-was {
  text-decoration: none;
}

@keyframes plan-price-sweep {
  to { background-position: -80% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-page[data-prices="pending"] .plan-amount,
  .pricing-page[data-prices="pending"] .plan-was,
  .pricing-page[data-prices="pending"] .plan-billed {
    background-image: none;
    animation: none;
  }
}

/* Catalog failed: the prices stay as em dashes and the reader gets a retry
   rather than a number nobody confirmed. */
.pricing-reload {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 20px 0 0;
  font-size: 14px;
  color: var(--p-fg);
}
.pricing-reload[hidden] { display: none; }
.pricing-reload__button {
  border: 1px solid var(--p-accent);
  border-radius: 999px;
  background: none;
  color: var(--p-accent);
  font: inherit;
  padding: 6px 18px;
  cursor: pointer;
  transition: background .25s, color .25s;
}
.pricing-reload__button:hover { background: var(--p-accent); color: var(--p-accent-fg); }
.pricing-reload__button:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 2px; }

/* Returned from a cancelled Stripe checkout. Nothing went wrong, but the
   visitor is arriving mid-task and needs to register why the page reloaded,
   so it carries the amber weight of a notice rather than sitting there as
   another line of body copy. Dismissible: once read it is noise. */
.pricing-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: max-content;
  max-width: min(520px, 100%);
  margin: 32px auto 0;
  padding: 12px 14px 12px 16px;
  border: 1px solid #e3cfa0;
  border-radius: 12px;
  background: #f8efdc;
  font-size: 14px;
  line-height: 20px;
  color: #71500f;
  text-align: left;
}
.pricing-notice[hidden] { display: none; }

.pricing-notice__icon {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}
.pricing-notice__text { margin: 0; }

.pricing-notice__close {
  flex: none;
  width: 24px;
  height: 24px;
  margin: -2px -4px 0 4px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  opacity: .6;
  transition: opacity .2s, background .2s;
}
.pricing-notice__close:hover { opacity: 1; background: rgba(113, 80, 15, 0.1); }
.pricing-notice__close:focus-visible { outline: 2px solid #71500f; outline-offset: 2px; }

@media (max-width: 560px) {
  .pricing-notice { width: auto; }
}

/* Catalog unavailable. With no figure to show, everything that only makes
   sense next to one goes away — the struck-through old price, the "/ month"
   suffix and the "billed yearly" line. What is left is a single muted rule
   holding the price's place, so the cards keep their height and nobody reads
   a stray dash as a number. */
/* Free keeps its $0 and the "/ month" beside it — that figure is the site's
   own copy and is never in doubt. */
.pricing-page[data-prices="error"] .plan-card:not(.plan-card--free) .plan-was,
.pricing-page[data-prices="error"] .plan-card:not(.plan-card--free) .plan-per,
.pricing-page[data-prices="error"] .plan-card:not(.plan-card--free) .plan-billed {
  display: none;
}
.pricing-page[data-prices="error"] .plan-card:not(.plan-card--free) .plan-amount {
  /* the em dash is the fallback text in the markup; render it as a rule so it
     reads as "no value yet" rather than as punctuation at 40px */
  font-size: 0;
  display: inline-block;
  width: 48px;
  height: 3px;
  border-radius: 2px;
  background: var(--p-line-soft);
  vertical-align: middle;
  /* keep the line box the same height as a real price */
  margin: 22px 0;
}