/*
 * /pricing (public/pricing.html; regions from marketing/render/render-pricing.ts and render-credit.ts).
 *
 * The whole page is drawn here, in the product's tokens (--ri-*, carried by marketing-tokens.css):
 * light paper, and the warm dark on the site's one switch (D20, amended 2026-10-02: the OS decides
 * unless <html data-theme> says otherwise).
 * marketing.css's shared pieces on this page (the body, the skip link, the close band) read its own
 * --paper / --ink-* names, so this page points those names at the same tokens: an operating-system
 * dark preference no longer paints a dark page under the light nav. Nothing is hidden waiting for a
 * script: every section is on the page when it loads.
 *
 * Colour means a state or a category only. The featured plan is marked by the soft raise and its
 * filled button, never by a green frame.
 */

body.page-pricing {
  --paper: var(--ri-bg);
  --card: var(--ri-bg-card);
  --card-border: var(--ri-ink-100);
  --well: var(--ri-bg-inset);
  --ink-900: var(--ri-ink-900);
  --ink-700: var(--ri-ink-700);
  --ink-600: var(--ri-ink-600);
  --ink-500: var(--mk-muted);
  --ink-400: var(--ri-ink-400);
  --ink-300: var(--ri-ink-300);
  --ink-200: var(--ri-ink-200);
  --ink-100: var(--ri-ink-100);
  --ink-50: var(--ri-ink-50);
  --action: var(--ri-color-action);
  --action-text: var(--ri-color-action);
  --action-glow: color-mix(in srgb, var(--ri-color-action) 22%, transparent);
  --action-wash: color-mix(in srgb, var(--ri-color-action) 8%, transparent);
  --raise-shadow: var(--ri-raise-shadow);
  /* a resting card's quieter edge: the raise, at a third of its depth */
  --pp-rest-shadow: 0 1px 2px color-mix(in srgb, var(--mk-night) 8%, transparent), 0 8px 24px -16px color-mix(in srgb, var(--mk-night) 22%, transparent);
  /* a quiet well that reads in both themes: ink mixed into the card (the inset token is darker than a dark card, a hole) */
  --pp-well: color-mix(in srgb, var(--ri-ink-900) 6%, var(--ri-bg-card));
  --pp-well-hover: color-mix(in srgb, var(--ri-ink-900) 11%, var(--ri-bg-card));
  /* a hairline that reads in both themes (dark --ri-ink-100 sits almost on the dark card) */
  --pp-rule: color-mix(in srgb, var(--ri-ink-900) 11%, var(--ri-bg-card));
  --pp-gutter: 40px;
  background: var(--ri-bg);
  color: var(--ri-ink-900);
}

.page-pricing .sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.page-pricing main a:focus-visible,
.page-pricing main summary:focus-visible {
  outline: 2px solid var(--ri-color-action);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ── Section heads ─────────────────────────────────────────────────────── */
.page-pricing .pp-eyebrow {
  margin: 0 0 14px;
  font: 500 var(--ri-text-eyebrow)/1.3 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ri-ink-600);
}
.page-pricing .pp-head { max-width: 46rem; margin: 0 auto 40px; text-align: center; }
.page-pricing .pp-h2 {
  margin: 0;
  font: 400 var(--mk-text-section)/1.15 var(--font-display);
  letter-spacing: -0.015em;
  color: var(--ri-ink-900);
  text-wrap: balance;
}
.page-pricing .pp-head .section-subtitle,
.page-pricing .billing-lede {
  margin: 14px auto 0;
  max-width: 38rem;
  font-size: var(--ri-text-lead);
  line-height: 1.6;
  color: var(--ri-ink-600);
  text-wrap: pretty;
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.page-pricing .pp-hero {
  max-width: 52rem;
  margin: 0 auto;
  padding: 96px var(--pp-gutter) 56px;
  text-align: center;
}
.page-pricing .pp-title {
  margin: 0 0 22px;
  font: 400 var(--mk-text-hero)/1.05 var(--font-display);
  letter-spacing: -0.025em;
  color: var(--ri-ink-900);
  text-wrap: balance;
}
.page-pricing .pp-lede {
  max-width: 38rem;
  margin: 0 auto;
  font-size: var(--ri-text-lead);
  line-height: 1.6;
  color: var(--ri-ink-700);
  text-wrap: pretty;
}

/* The beta line: one quiet sentence, said once for the whole page. */
.page-pricing .pricing-pending-note {
  display: flex;
  gap: 10px;
  align-items: baseline;
  max-width: 36rem;
  margin: 28px auto 0;
  padding: 12px 18px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--ri-ink-900) 5%, var(--ri-bg));
  font-size: var(--ri-text-ui);
  line-height: 1.5;
  color: var(--ri-ink-700);
  text-align: left;
}
.page-pricing .pricing-pending-note::before {
  content: '';
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ri-ink-400);
  transform: translateY(-1px);
}

/* ── Plans ─────────────────────────────────────────────────────────────── */
.page-pricing .pp-plans { padding: 8px var(--pp-gutter) 104px; }
.page-pricing .pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
  align-items: stretch;
}
.page-pricing .price-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 32px 28px 26px;
  border-radius: 22px;
  background: var(--ri-bg-card);
  box-shadow: var(--pp-rest-shadow);
}
.page-pricing .price-card--featured { box-shadow: var(--ri-raise-shadow); }
.page-pricing .price-card-name {
  margin: 0;
  font: 500 var(--ri-text-title)/1.2 var(--font-display);
  color: var(--ri-ink-900);
}
.page-pricing .price-card-for {
  margin: 8px 0 0;
  min-height: 3em;
  font-size: var(--ri-text-ui);
  line-height: 1.5;
  color: var(--ri-ink-600);
  text-wrap: pretty;
}
.page-pricing .price-card-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 4px;
  row-gap: 8px;
  margin: 22px 0 0;
}
.page-pricing .price-card-amount {
  font: 400 var(--mk-text-mark)/1 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--ri-ink-900);
  font-variant-numeric: tabular-nums;
}
.page-pricing .price-card-period { font-size: var(--ri-text-body); font-weight: 500; color: var(--ri-ink-600); }
/* The one tag a price wears while Checkout is closed: a quiet inset pill, never a faded price. */
.page-pricing .price-pending {
  align-self: center;
  margin-left: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--pp-well);
  font: 600 var(--ri-text-eyebrow)/1.4 var(--font-body);
  letter-spacing: 0.02em;
  color: var(--ri-ink-600);
  white-space: nowrap;
}
.page-pricing .price-card-plus {
  margin: 10px 0 0;
  min-height: 3em;
  font-size: var(--ri-text-meta);
  line-height: 1.5;
  color: var(--ri-ink-600);
}
.page-pricing .price-features {
  flex: 1;
  display: grid;
  align-content: start;
  gap: 11px;
  list-style: none;
  margin: 22px 0 28px;
  padding: 22px 0 0;
  border-top: 1px solid var(--pp-rule);
}
.page-pricing .price-features li {
  position: relative;
  padding-left: 24px;
  font-size: var(--ri-text-ui);
  line-height: 1.5;
  color: var(--ri-ink-700);
  text-wrap: pretty;
}
/* a drawn check in ink: an inclusion, not a state */
.page-pricing .price-features li::before {
  content: '';
  position: absolute;
  left: 3px; top: 0.42em;
  width: 9px; height: 5px;
  border: solid var(--ri-ink-500);
  border-width: 0 0 1.75px 1.75px;
  transform: rotate(-45deg);
}
.page-pricing .price-features .price-features-lead { padding-left: 0; font-weight: 600; color: var(--ri-ink-900); }
.page-pricing .price-features .price-features-lead::before { content: none; }

.page-pricing .price-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 12px;
  font: 600 var(--ri-text-ui)/1 var(--font-body);
  text-decoration: none;
}
.page-pricing .price-cta--primary { background: var(--ri-color-action); color: var(--ri-on-action); }
.page-pricing .price-cta--primary:hover { background: color-mix(in srgb, var(--ri-ink-900) 14%, var(--ri-color-action)); }
.page-pricing .price-cta--ghost { background: var(--pp-well); color: var(--ri-ink-900); }
.page-pricing .price-cta--ghost:hover { background: var(--pp-well-hover); }
.page-pricing .price-card-note { margin: 12px 0 0; text-align: center; font-size: var(--ri-text-meta); color: var(--ri-ink-600); }

/* ── How billing works ─────────────────────────────────────────────────── */
.page-pricing .billing-explainer { max-width: 1160px; margin: 0 auto; padding: 0 var(--pp-gutter) 104px; }
.page-pricing .billing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 1080px;
  margin: 24px auto 0;
}
.page-pricing .billing-card {
  min-width: 0;
  padding: 26px 26px 24px;
  border-radius: 18px;
  background: var(--ri-bg-card);
  box-shadow: var(--pp-rest-shadow);
}
.page-pricing .billing-card h3 {
  margin: 0 0 8px;
  font: 500 var(--ri-text-lead)/1.3 var(--font-display);
  color: var(--ri-ink-900);
}
.page-pricing .billing-card p {
  margin: 0;
  font-size: var(--ri-text-ui);
  line-height: 1.6;
  color: var(--ri-ink-600);
  text-wrap: pretty;
}
/* Every shown plan's monthly limit, filled from config/plans.ts on each build while the gate is open. */
.page-pricing .billing-card:has(> .billing-caps) { container-type: inline-size; }
.page-pricing .billing-caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; padding: 0; }
.page-pricing .billing-cap { min-width: 0; margin: 0; padding: 10px 4px; border-radius: 10px; background: var(--pp-well); text-align: center; }
.page-pricing .billing-cap-plan { margin: 0 0 2px; font-size: var(--ri-text-meta); color: var(--ri-ink-600); }
.page-pricing .billing-cap-value { margin: 0; font: 400 var(--ri-text-title)/1.2 var(--font-display); color: var(--ri-ink-900); font-variant-numeric: tabular-nums; }
.page-pricing .billing-cap-value [aria-hidden="true"] { font: 500 var(--ri-text-meta) var(--font-body); color: var(--ri-ink-600); }
@container (max-width: 15em) {
  .page-pricing .billing-caps { grid-template-columns: 1fr; }
  .page-pricing .billing-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 12px; }
}

/* "How a month adds up": the week's work as bricks, one per piece, sized by how deep it went, tinted by the
   product's event categories, under the limit where new work stops. No amounts. */
.usage-fig { max-width: 760px; margin: 0 auto; }
.usage-art { position: relative; padding: 12px 0 22px; border-radius: 22px; background: var(--ri-bg-card); box-shadow: var(--pp-rest-shadow, var(--ri-raise-shadow)); }
.usage-svg { display: block; width: 100%; height: auto; overflow: visible; }
.usage-svg .u-floor { stroke: var(--ri-ink-300); stroke-width: 1.5; }
.usage-svg .u-limit { stroke: var(--ri-ink-600); stroke-width: 1.5; stroke-dasharray: 5 6; }
.usage-svg .u-b { stroke: color-mix(in oklab, var(--ri-ink-900) 16%, transparent); stroke-width: 1; }
.usage-svg .u-b[data-k="file"] { fill: var(--ri-cat-file-tile); }
.usage-svg .u-b[data-k="conversation"] { fill: var(--ri-cat-conversation-tile); }
/* checking is light work: a quiet tone, never the decision mark, which belongs to the calls a person makes (F1) */
.usage-svg .u-b[data-k="decision"] { fill: var(--ri-ink-200); stroke: var(--ri-ink-300); }
.usage-svg .u-b:hover { stroke: var(--ri-ink-900); stroke-width: 1.5; }
.usage-svg .u-d { fill: var(--ri-ai-mark); opacity: 0.7; }
.usage-list { margin: 12px 4px 0; font: 400 var(--ri-text-meta)/1.5 var(--font-body); color: var(--ri-ink-700); }
.usage-list summary { cursor: pointer; font-weight: 500; color: var(--ri-ink-900); min-height: 24px; }
.usage-list ol { margin: 8px 0 0; padding-left: 22px; columns: 2 14rem; column-gap: 32px; }

/* the words on the picture: what the line is, what waits above it, what stays below (upright, like the rest of the page) */
.usage-art .u-l { position: absolute; top: var(--top); transform: translateY(-50%); font: 500 var(--ri-text-meta)/1.3 var(--font-body); color: var(--ri-ink-700); white-space: nowrap; }
.usage-art .u-l--line { left: var(--x); transform: translateY(-135%); font-weight: 600; color: var(--ri-ink-900); }
.usage-art .u-l--above { right: var(--x); }
.usage-art .u-l--below { left: var(--x); }

.usage-fig figcaption { margin: 14px 4px 0; max-width: 46rem; font-size: var(--ri-text-ui); line-height: 1.55; color: var(--ri-ink-600); }
.usage-fig figcaption b { color: var(--ri-ink-900); font-weight: 600; }
.usage-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 10px 4px 0; padding: 0; font-size: var(--ri-text-meta); color: var(--ri-ink-700); }
.usage-legend li { display: inline-flex; align-items: center; gap: 7px; }
.usage-legend i { width: 18px; height: 12px; border-radius: 3px; box-shadow: 0 0 0 1px color-mix(in oklab, var(--ri-ink-900) 12%, transparent) inset; }
.usage-legend [data-k="file"] i { background: var(--ri-cat-file-tile); }
.usage-legend [data-k="conversation"] i { background: var(--ri-cat-conversation-tile); }
.usage-legend [data-k="decision"] i { background: var(--ri-ink-200); box-shadow: 0 0 0 1px var(--ri-ink-300) inset; }

/* one micro-event, once, on entry (public/js/figure-play.js): the week settles into the stack, then the new work arrives and waits */
@media (prefers-reduced-motion: no-preference) {
  .usage-fig[data-armed]:not([data-play]) .u-b, .usage-fig[data-armed]:not([data-play]) .u-d { opacity: 0.35; }
  .usage-fig[data-play] .u-b { transform-box: fill-box; animation: u-drop 420ms var(--mk-spring-settle, linear) both; animation-delay: calc(var(--i) * 32ms); }
  .usage-fig[data-play] .u-d { transform-box: fill-box; animation: u-wait var(--mk-dur-arrive, 540ms) var(--mk-spring-arrive, linear) both; animation-delay: calc(1300ms + var(--j) * 140ms); }
}
@keyframes u-drop { from { opacity: 0.35; transform: translateY(-36px); } to { opacity: 1; transform: none; } }
@keyframes u-wait { from { opacity: 0.35; transform: translateY(-28px); } to { opacity: 0.7; transform: none; } }

/* ── Compare plans ─────────────────────────────────────────────────────── */
.page-pricing .pricing-compare { max-width: 1160px; margin: 0 auto; padding: 0 var(--pp-gutter) 104px; }
.page-pricing .pp-head .section-subtitle { font-size: var(--ri-text-ui); }
.page-pricing .compare-scroll {
  max-width: 1080px;
  margin: 0 auto;
  border-radius: 22px;
  background: var(--ri-bg-card);
  box-shadow: var(--pp-rest-shadow);
  overflow: hidden;
}
.page-pricing .compare-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.page-pricing .compare-col--label { width: 46%; }
.page-pricing .compare-col--featured { background: color-mix(in srgb, var(--ri-ink-900) 3%, var(--ri-bg-card)); }
.page-pricing .compare-table thead th {
  padding: 22px 12px 18px;
  font: 500 var(--ri-text-lead)/1.2 var(--font-display);
  color: var(--ri-ink-900);
  text-align: center;
}
.page-pricing .compare-table .compare-group th {
  padding: 26px 28px 10px;
  font: 500 var(--ri-text-eyebrow)/1.3 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ri-ink-600);
  text-align: left;
  border-top: 1px solid var(--pp-rule);
}
.page-pricing .compare-table tbody tr:not(.compare-group) th,
.page-pricing .compare-table tbody td {
  padding: 13px 12px;
  border-top: 1px solid color-mix(in srgb, var(--pp-rule) 70%, transparent);
  font-size: var(--ri-text-ui);
  line-height: 1.45;
}
.page-pricing .compare-table tbody tr:not(.compare-group) th {
  padding-left: 28px;
  font-weight: 400;
  color: var(--ri-ink-900);
  text-align: left;
  text-wrap: pretty;
}
/* the first row under a group's name sits on it, with no rule between */
.page-pricing .compare-table tbody tr.compare-group + tr > th,
.page-pricing .compare-table tbody tr.compare-group + tr > td { border-top: 0; }
.page-pricing .compare-table tbody:last-child tr:last-child th,
.page-pricing .compare-table tbody:last-child tr:last-child td { padding-bottom: 22px; }
.page-pricing .compare-table td { text-align: center; vertical-align: middle; color: var(--ri-ink-700); }
.page-pricing .compare-check { display: inline-block; vertical-align: middle; fill: none; stroke: var(--ri-ink-900); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* "not included" is this table's content too: --ri-ink-600 holds 4.5:1 on the card and the featured column */
.page-pricing .compare-dash { color: var(--ri-ink-600); }
.page-pricing .compare-value { font-weight: 600; color: var(--ri-ink-900); }

/* Below 640px a four-column table cannot fit: what every plan shares, once, then what each plan adds. */
.page-pricing .compare-plans { display: none; }

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.page-pricing .pricing-faq { max-width: 52rem; margin: 0 auto; padding: 0 var(--pp-gutter) 72px; }
.page-pricing .faq-list { border-top: 1px solid var(--pp-rule); }
.page-pricing .faq-item { border-bottom: 1px solid var(--pp-rule); }
.page-pricing .faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 14px 4px;
  list-style: none;
  cursor: pointer;
  font: 500 var(--ri-text-lead)/1.35 var(--font-display);
  color: var(--ri-ink-900);
}
.page-pricing .faq-item summary::-webkit-details-marker { display: none; }
.page-pricing .faq-item summary::after {
  content: '';
  flex: none;
  width: 9px; height: 9px;
  margin-right: 6px;
  border: solid var(--ri-ink-600);
  border-width: 0 1.75px 1.75px 0;
  transform: translateY(-3px) rotate(45deg);
}
.page-pricing .faq-item[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.page-pricing .faq-item p { margin: 0 0 12px; padding: 0 40px 0 4px; max-width: 44rem; font-size: var(--ri-text-body); line-height: 1.65; color: var(--ri-ink-700); }
.page-pricing .faq-item p:last-child { margin-bottom: 22px; }
.page-pricing .faq-item a { color: var(--ri-color-action); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ── Motion: hover tone only, and only for readers who have not asked for less ── */
@media (prefers-reduced-motion: no-preference) {
  .page-pricing .price-cta { transition: background-color 160ms ease; }
  .page-pricing .faq-item summary::after { transition: transform 200ms ease; }
}

/* ── Narrower screens ──────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  body.page-pricing { --pp-gutter: 28px; }
  .page-pricing .pricing-grid { gap: 16px; }
  .page-pricing .price-card { padding: 28px 22px 22px; }
  .page-pricing .billing-grid { grid-template-columns: 1fr; max-width: 40rem; }
}
@media (max-width: 859px) {
  .page-pricing .pricing-grid { grid-template-columns: 1fr; max-width: 30rem; }
  .page-pricing .price-card-for, .page-pricing .price-card-plus { min-height: 0; }
  .page-pricing .pp-title { font-size: var(--mk-text-hero-m); }
  .page-pricing .pp-h2 { font-size: var(--mk-text-headline-m); }
}
@media (max-width: 639px) {
  body.page-pricing { --pp-gutter: 20px; }
  .page-pricing .pp-hero { padding-top: 56px; padding-bottom: 40px; }
  .page-pricing .pp-lede { font-size: var(--ri-text-body); }
  .page-pricing .pp-plans, .page-pricing .billing-explainer, .page-pricing .pricing-compare { padding-bottom: 72px; }
  .page-pricing .pp-head { margin-bottom: 28px; }
  .page-pricing .price-card-amount { font-size: var(--mk-text-mark-m); }

  .page-pricing .compare-scroll { display: none; }
  .page-pricing .compare-plans { display: grid; gap: 14px; }
  .page-pricing .compare-every,
  .page-pricing .compare-plan { padding: 20px 20px 18px; border-radius: 18px; background: var(--ri-bg-card); box-shadow: var(--pp-rest-shadow); }
  .page-pricing .compare-every h3,
  .page-pricing .compare-plan h3 { margin: 0 0 12px; font: 500 var(--ri-text-title)/1.2 var(--font-display); color: var(--ri-ink-900); }
  .page-pricing .compare-plus { margin: -6px 0 12px; font-size: var(--ri-text-meta); font-weight: 600; color: var(--ri-ink-600); }
  .page-pricing .compare-plans ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
  .page-pricing .compare-plans li { position: relative; padding-left: 22px; font-size: var(--ri-text-ui); line-height: 1.45; color: var(--ri-ink-700); }
  .page-pricing .compare-plans li::before {
    content: '';
    position: absolute;
    left: 2px; top: 0.42em;
    width: 9px; height: 5px;
    border: solid var(--ri-ink-500);
    border-width: 0 0 1.75px 1.75px;
    transform: rotate(-45deg);
  }
  .page-pricing .compare-plans li b { font-weight: 600; color: var(--ri-ink-900); }

  .usage-art { padding: 10px 0 18px; }
  .usage-art .u-l { font-size: var(--ri-text-eyebrow); }
  .usage-art .u-l--above { right: auto; left: 4%; }
  .usage-art .u-l--line { left: auto; right: 4%; transform: translateY(40%); }
  .usage-art .u-l--below { left: 4%; }
  .usage-list ol { columns: 1; }
  .page-pricing .faq-item summary { font-size: var(--ri-text-body); }
  .page-pricing .faq-item p { padding-right: 4px; }
}