/* -- Pricing free-first slabs: /pricing in the launch film's language.
   Full-bleed black, orange and paper slabs, Clash Grotesk statement type sized
   from its own ink widths, label rows, pills, tiles and ledgers. Loaded with
   the full asset profile so in-site navigation keeps it; every rule is scoped
   to the pricing route. Owns the free-first .tacet-pricing-* classes used by
   pricing.njk (slab, rail, label, slam, pill, dock, tile, buys, offer,
   ratecard, model, ledger, questions, end). Price data and commercial claims
   stay in pricing.json and the pricing contract. */
.tacet-pricing-page {
  /* Proto orange, the launch film's accent (#ff6b32). It carries text only on
     black; on paper and on itself the ink is black. */
  --pricing-orange: oklch(70.4% 0.193 39.8);
  --pricing-black: var(--beige-950);
  --pricing-on-black: var(--beige-100);
  --pricing-muted-on-black: var(--beige-500);
  --pricing-line-on-black: var(--beige-800);
  --pricing-paper: var(--beige-200);
  --pricing-card: var(--beige-50);
  --pricing-ink: var(--ink-deep);
  --pricing-muted: var(--ink-mid);
  --pricing-line: var(--beige-400);
  --pricing-pill-ground: var(--beige-950);
  --pricing-pill-ink: var(--beige-100);
  --pricing-card-shadow: 0 1px 2px rgb(18 15 12 / 4%), 0 14px 32px -16px rgb(18 15 12 / 14%);
  --pricing-gutter: clamp(1.25rem, 5.5vw, 5rem);
  --pricing-rail: min(100% - 2 * var(--pricing-gutter), 85rem);
  --pricing-space: clamp(3.5rem, 7.5vw, 7rem);
  --pricing-gap: clamp(2rem, 4.5cqw, 3.5rem);
  --pricing-radius: var(--tacet-radius-2xl);
  --pricing-ease: var(--ease-signature);

  /* Ink widths of the statement lines, in em, as they are tracked below. A
     rail divided by a line's ink width is the size at which that line spans
     the rail exactly. Re-measure when the tracking or the copy changes. */
  --pricing-ink-lead: 7.3333; /* TODAY, SAAS IS */
  --pricing-ink-today: 3.36; /* TODAY, */
  --pricing-ink-saas: 3.7133; /* SAAS IS */
  --pricing-ink-free: 2.5867; /* FREE. */
  --pricing-ink-credit: 2.27; /* $100 */

  /* The page ends on the black end card, so the footer cap is black too. */
  --site-main-seam-surface: var(--pricing-black);
}

html.dark .tacet-pricing-page {
  --pricing-paper: var(--beige-900);
  --pricing-card: var(--beige-800);
  --pricing-ink: var(--beige-100);
  --pricing-muted: color-mix(in oklch, var(--beige-400), var(--beige-500));
  --pricing-line: var(--beige-700);
  --pricing-pill-ground: var(--beige-100);
  --pricing-pill-ink: var(--beige-950);
  --pricing-card-shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 14px 32px -16px rgb(0 0 0 / 60%);
}

/* The hero is black to the top edge, so the resting navigation becomes a solid
   bar instead of a clear pane over it. */
body:has(#main-content.tacet-pricing-page) .proto-nav {
  --tacet-nav-panel-rest: color-mix(in oklch, var(--background), transparent 6%);
  --tacet-nav-border-rest: color-mix(in oklch, var(--foreground), transparent 82%);
}

/* Slabs. Each one re-points the shared semantic tokens to its own ground, so
   shared buttons, tables and notes resolve correctly inside it. */
.tacet-pricing-slab {
  position: relative;
  overflow: clip;
  background: var(--pricing-ground);
  color: var(--foreground);
  font-family: var(--font-body);
}

.tacet-pricing-slab--black,
.tacet-pricing-offer {
  --pricing-ground: var(--pricing-black);
  --pricing-dot: var(--pricing-orange);
  --background: var(--pricing-black);
  --foreground: var(--pricing-on-black);
  --text-m: var(--pricing-muted-on-black);
  --border: var(--pricing-line-on-black);
  --border-strong: var(--beige-700);
  --surface-container: var(--beige-900);
  --org-on-light: var(--pricing-orange);
  --ring: var(--pricing-orange);
}

.tacet-pricing-slab--orange {
  --pricing-ground: var(--pricing-orange);
  --pricing-dot: var(--pricing-black);
  --background: var(--beige-100);
  --foreground: var(--pricing-black);
  --text-m: color-mix(in oklch, var(--pricing-black) 88%, var(--pricing-orange));
  --border: color-mix(in oklch, var(--pricing-black), transparent 68%);
  --org-on-light: var(--pricing-black);
  --ring: var(--pricing-black);
}

.tacet-pricing-slab--paper,
.tacet-pricing-slab--card,
.tacet-pricing-offer--enterprise {
  --pricing-ground: var(--pricing-paper);
  --pricing-dot: var(--pricing-orange);
  --background: var(--pricing-paper);
  --foreground: var(--pricing-ink);
  --text-m: var(--pricing-muted);
  --border: var(--pricing-line);
  --border-strong: var(--pricing-line);
  --surface-container: var(--pricing-card);
  --darker: var(--pricing-paper);
  --ring: var(--pricing-ink);
}

.tacet-pricing-slab--card {
  --pricing-ground: var(--pricing-card);
  --background: var(--pricing-card);
}

/* Paper in both themes: the film's paper bar and paper card on black. */
.tacet-pricing-model__panel,
.tacet-pricing-end__bar {
  --pricing-ground: var(--pricing-on-black);
  --pricing-dot: var(--pricing-orange);
  --background: var(--pricing-on-black);
  --foreground: var(--pricing-black);
  --text-m: var(--beige-700);
  --border: var(--beige-400);
  --org-on-light: var(--pricing-black);
  --ring: var(--pricing-black);
}

.tacet-pricing-slab--black .tacet-button--primary,
.tacet-pricing-offer .tacet-button--primary,
.tacet-pricing-slab--orange .tacet-button {
  --tacet-button-hover-ink: var(--pricing-black);
}

.tacet-pricing-slab--orange .tacet-button--primary {
  --tacet-button-hover-surface: var(--beige-50);
}

.tacet-pricing-end__bar .tacet-button--primary {
  --tacet-button-hover-surface: var(--pricing-orange);
  --tacet-button-hover-ink: var(--pricing-black);
}

.tacet-pricing-rail {
  container-type: inline-size;
  box-sizing: border-box;
  width: var(--pricing-rail);
  margin-inline: auto;
  padding-block: var(--pricing-space);
}

/* Label row: the film's eyebrow. */
.tacet-pricing-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-8);
  margin: 0 0 clamp(1.5rem, 3cqw, 2.5rem);
  font-size: clamp(0.875rem, 1.25cqw, 1.0625rem);
  line-height: 1.3;
}

.tacet-pricing-label__name {
  display: inline-flex;
  align-items: center;
  gap: 0.625em;
  margin: 0;
  color: var(--foreground);
  font-weight: 650;
}

.tacet-pricing-label__dot {
  flex: none;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--pricing-dot);
}

.tacet-pricing-label__note {
  margin: 0;
  color: var(--text-m);
  font-weight: 500;
}

/* Statement type: uppercase Clash, one idea per line. Tracking is declared
   where the size is set, because an em value on the heading would resolve
   against the heading's own size and inherit as a fixed length. */
.tacet-pricing-slam {
  margin: 0;
  color: var(--foreground);
}

.tacet-pricing-slam__line,
.tacet-pricing-slam__word {
  font-family: var(--font-display);
  font-weight: 700;
  font-kerning: normal;
  line-height: 0.84;
  letter-spacing: -0.01em;
  word-spacing: 0.08em;
  text-transform: uppercase;
}

.tacet-pricing-slam__line {
  display: block;
  white-space: nowrap;
}

.tacet-pricing-slam__word {
  display: inline-block;
}

/* Each line starts on the rail: the negative margin removes the first glyph's
   side bearing so the ink edge, not the box, sits on the column. */
.tacet-pricing-slam__line--lead {
  margin-left: -0.01em;
  font-size: calc(100cqw / var(--pricing-ink-lead));
}

/* The comma in the line above hangs below its baseline, so FREE. sits a
   little lower than the line-height alone would put it. */
.tacet-pricing-slam__line--free {
  margin-top: 0.03em;
  margin-left: -0.034em;
  color: var(--pricing-orange);
  font-size: calc(100cqw / var(--pricing-ink-free));
  letter-spacing: -0.02em;
}

/* The two pairs that fuse at statement size are opened by hand. */
.tacet-pricing-slam__kern--aa {
  letter-spacing: 0.06em;
}

.tacet-pricing-slam__kern--re {
  letter-spacing: 0;
}

.tacet-pricing-headline {
  max-width: 17em;
  margin: 0;
  color: var(--foreground);
  font-size: clamp(2.375rem, 6.2cqw, 5.75rem);
  text-wrap: balance;
}

.tacet-pricing-hot {
  color: var(--pricing-orange);
}

.tacet-pricing-lede {
  max-width: 36em;
  margin: clamp(1.25rem, 2.4cqw, 2rem) 0 0;
  color: var(--foreground);
  font-size: clamp(1.0625rem, 1.55cqw, 1.375rem);
  font-weight: 450;
  line-height: 1.45;
  text-wrap: pretty;
}

.tacet-pricing-fine,
.tacet-pricing-caption {
  max-width: 46em;
  margin: var(--space-6) 0 0;
  color: var(--text-m);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.tacet-pricing-caption {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

.tacet-pricing-link {
  color: var(--foreground);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: var(--space-1);
}

.tacet-pricing-link:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: var(--space-1);
}

.tacet-pricing-actions {
  margin-top: clamp(1.25rem, 2.4cqw, 2rem);
}

.tacet-pricing-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  box-sizing: border-box;
  min-height: 2rem;
  padding: 0 0.875em;
  border-radius: var(--tacet-radius-full);
  background: var(--pricing-pill-ground);
  color: var(--pricing-pill-ink);
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
}

.tacet-pricing-pill__dot {
  flex: none;
  width: 0.4375em;
  height: 0.4375em;
  border-radius: 50%;
  background: var(--pricing-orange);
}

.tacet-pricing-pill--hollow {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px currentColor;
  color: var(--foreground);
}

/* Hero: the end card. Black to the top edge, under the navigation. */
.tacet-pricing-hero {
  margin-top: calc(-1 * var(--chrome-height, 0px));
}

.tacet-pricing-hero .tacet-pricing-rail {
  padding-top: calc(var(--chrome-height, 0px) + clamp(1.75rem, 4vw, 3.25rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.tacet-pricing-hero__aside .tacet-pricing-lede {
  margin-top: clamp(1.5rem, 5cqw, 2.5rem);
}

/* Starting credit: the orange number card. */
.tacet-pricing-grant__stage {
  display: grid;
  gap: clamp(1.5rem, 5cqw, 3rem);
}

.tacet-pricing-grant__title {
  display: grid;
  gap: clamp(0.75rem, 1.6cqw, 1.5rem);
  margin: 0;
}

.tacet-pricing-number {
  display: block;
  margin-left: -0.02em;
  color: var(--foreground);
  font-family: var(--font-display);
  font-size: calc(100cqw / var(--pricing-ink-credit));
  font-weight: 700;
  line-height: 0.84;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.tacet-pricing-grant__copy .tacet-pricing-lede {
  margin-top: 0;
}

/* Free, itemized. */
.tacet-pricing-dock {
  display: grid;
  gap: 1px;
  margin-top: var(--pricing-gap);
  overflow: hidden;
  border-radius: var(--pricing-radius);
  background: var(--border);
  box-shadow: var(--pricing-card-shadow);
}

.tacet-pricing-dock__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-6);
  background: var(--pricing-card);
}

.tacet-pricing-dock__mark {
  margin: 0;
  color: var(--foreground);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4cqw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}

.tacet-pricing-dock__count {
  margin: 0;
  color: var(--text-m);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.3;
}

.tacet-pricing-dock__systems {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tacet-pricing-dock__system {
  display: grid;
  align-content: space-between;
  gap: var(--space-3);
  min-height: 6.5rem;
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-6);
  background: var(--pricing-card);
}

.tacet-pricing-dock__name {
  color: var(--foreground);
  font-size: clamp(1.0625rem, 1.7cqw, 1.375rem);
  font-weight: 650;
  line-height: 1.2;
}

/* Both states share one cell. The resting state is the truth (running at
   $0); the rented pill exists only for the entrance. */
.tacet-pricing-dock__state {
  display: grid;
  justify-items: start;
}

.tacet-pricing-dock__state > * {
  grid-area: 1 / 1;
}

.tacet-pricing-dock__rented {
  visibility: hidden;
}

.tacet-pricing-tiles {
  display: grid;
  gap: var(--space-4);
  margin: var(--pricing-gap) 0 0;
  padding: 0;
  list-style: none;
}

.tacet-pricing-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  box-sizing: border-box;
  padding: var(--space-6);
  border-radius: var(--pricing-radius);
  background: var(--pricing-card);
  box-shadow: var(--pricing-card-shadow);
}

.tacet-pricing-tile__title {
  margin: 0;
  color: var(--foreground);
  font-size: clamp(1.25rem, 1.9cqw, 1.625rem);
}

.tacet-pricing-tile__detail {
  margin: 0;
  color: var(--text-m);
  font-size: 1rem;
  line-height: 1.45;
}

.tacet-pricing-tile__tag {
  margin: auto 0 0;
  padding-top: var(--space-4);
}

/* What $1 buys. */
.tacet-pricing-buys {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.5cqw, 2rem);
  margin: var(--pricing-gap) 0 0;
  padding: 0;
  border-top: 1px solid var(--border);
  list-style: none;
}

.tacet-pricing-buys__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--border);
}

/* Under about 100px Clash needs open tracking to keep its numerals apart. */
.tacet-pricing-buys__value {
  color: var(--foreground);
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.4cqw, 4rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.tacet-pricing-buys__unit {
  margin-left: 0.5em;
  color: var(--text-m);
  font-family: var(--font-mono);
  font-size: max(0.27em, 0.75rem);
  font-weight: 500;
  letter-spacing: 0;
}

.tacet-pricing-buys__label {
  max-width: 17em;
  color: var(--text-m);
  font-size: 1rem;
  line-height: 1.35;
}

/* Credit packs: black number cards. */
.tacet-pricing-offers {
  --pricing-offer-price: 24cqw;

  display: grid;
  gap: var(--space-4);
  margin-top: var(--pricing-gap);
}

.tacet-pricing-offer {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-width: 0;
  padding: var(--space-6);
  border-radius: var(--pricing-radius);
  background: var(--pricing-ground);
  color: var(--foreground);
}

.tacet-pricing-offer--enterprise {
  background: var(--pricing-card);
  box-shadow: var(--pricing-card-shadow);
}

.tacet-pricing-offer__name {
  margin: 0;
  color: var(--foreground);
  font-size: 1.0625rem;
}

.tacet-pricing-offer__price {
  margin: var(--space-6) 0 0;
  color: var(--pricing-orange);
  font-family: var(--font-display);
  font-size: var(--pricing-offer-price);
  font-weight: 700;
  line-height: 0.84;
  letter-spacing: 0;
  white-space: nowrap;
}

.tacet-pricing-offer--enterprise .tacet-pricing-offer__price {
  color: var(--foreground);
  font-size: calc(var(--pricing-offer-price) * 0.6);
  line-height: 1.4;
}

.tacet-pricing-offer__allowance {
  margin: var(--space-3) 0 0;
  color: var(--text-m);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.3;
}

.tacet-pricing-offer__features {
  flex: 1;
  margin: var(--space-6) 0;
  padding: 0;
  border-top: 1px solid var(--border);
  list-style: none;
}

.tacet-pricing-offer__features li {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
  color: var(--foreground);
  font-size: 0.9375rem;
  line-height: 1.4;
}

/* Rate card: rows on black, as in the film's review panel. */
.tacet-pricing-ratecard {
  margin-top: var(--pricing-gap);
  overflow-x: auto;
}

.tacet-pricing-ratecard:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: var(--space-1);
}

.tacet-pricing-ratecard__grid.tacet-page-table {
  --tacet-table-head: transparent;
  --tacet-table-rule: var(--foreground);
  --tacet-table-row-rule: var(--border);
  --tacet-table-ink: var(--text-m);

  width: 100%;
  min-width: 44rem;
  border-block: 0;
  color: var(--foreground);
  font-size: 1.0625rem;
  line-height: 1.4;
}

.tacet-pricing-ratecard__caption {
  padding: 0 0 var(--space-4);
  color: var(--foreground);
  font-size: clamp(1.25rem, 1.9cqw, 1.625rem);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-align: left;
  caption-side: top;
}

.tacet-pricing-ratecard__grid :is(th, td) {
  padding: var(--space-3) var(--space-6) var(--space-3) 0;
  font-family: var(--font-body);
  font-size: inherit;
  text-align: left;
  vertical-align: baseline;
}

.tacet-pricing-ratecard__grid thead th {
  border-top: 0;
  font-size: 0.8125rem;
  font-weight: 650;
  white-space: nowrap;
}

.tacet-pricing-ratecard__grid tbody td:nth-child(2) {
  color: var(--text-m);
  font-family: var(--font-mono);
  font-size: 0.875rem;
}

.tacet-pricing-ratecard__grid :is(th, td).tacet-pricing-ratecard__rate {
  padding-right: 0;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  text-align: right;
  white-space: nowrap;
}

.tacet-pricing-ratecard__grid thead th.tacet-pricing-ratecard__rate {
  font-family: var(--font-body);
  font-size: 0.8125rem;
}

.tacet-pricing-ratecard__note {
  display: block;
  color: var(--text-m);
  font-size: 0.875rem;
}

.tacet-pricing-ratecard__group th {
  padding-block: var(--space-8) var(--space-3);
  border-bottom-color: var(--foreground);
  color: var(--foreground);
  font-size: 0.8125rem;
  font-weight: 650;
}

.tacet-pricing-model {
  display: grid;
  gap: clamp(1.5rem, 4cqw, 3rem);
  margin-top: var(--pricing-gap);
}

.tacet-pricing-model__panel {
  box-sizing: border-box;
  padding: clamp(1.5rem, 3cqw, 2.5rem);
  border-radius: var(--pricing-radius);
  background: var(--pricing-ground);
  color: var(--foreground);
}

.tacet-pricing-model__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}

.tacet-pricing-model__name {
  margin: 0;
  color: var(--foreground);
  font-size: clamp(1.5rem, 2.6cqw, 2.25rem);
}

.tacet-pricing-model__id {
  color: var(--text-m);
  font-family: var(--font-mono);
  font-size: 0.875rem;
}

.tacet-pricing-model__rates {
  margin: var(--space-6) 0 0;
}

.tacet-pricing-model__rate {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  line-height: 1.4;
}

.tacet-pricing-model__rate dt {
  color: var(--text-m);
}

.tacet-pricing-model__rate dd {
  margin: 0;
  color: var(--text-m);
  text-align: right;
}

.tacet-pricing-model__usd {
  color: var(--foreground);
  font-weight: 500;
}

/* The one highlighted row, as in the film's review panel: orange, black ink. */
.tacet-pricing-model__rate--fee {
  margin: var(--space-2) calc(-1 * var(--space-3)) 0;
  padding-inline: var(--space-3);
  border-top: 0;
  border-radius: var(--tacet-radius-lg);
  background: var(--pricing-orange);
}

.tacet-pricing-model__rate--fee :is(dt, dd, .tacet-pricing-model__usd) {
  color: var(--pricing-black);
}

.tacet-pricing-model__notes {
  display: grid;
  align-content: start;
  border-top: 1px solid var(--border);
}

.tacet-pricing-model__note {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
}

.tacet-pricing-model__note h3 {
  margin: 0;
  color: var(--foreground);
  font-size: 1.125rem;
}

.tacet-pricing-model__note p {
  max-width: 40em;
  margin: var(--space-1) 0 0;
  color: var(--text-m);
  font-size: 1rem;
  line-height: 1.5;
}

/* Account rules: a ledger, one rule per row. */
.tacet-pricing-ledger {
  margin: var(--pricing-gap) 0 0;
  border-top: 1px solid var(--foreground);
}

.tacet-pricing-ledger__row {
  display: grid;
  gap: var(--space-2) var(--space-8);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--border);
}

.tacet-pricing-ledger__row dt {
  color: var(--foreground);
  font-size: clamp(1.125rem, 1.7cqw, 1.5rem);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.tacet-pricing-ledger__row dd {
  max-width: 42em;
  margin: 0;
  color: var(--text-m);
  font-size: 1.0625rem;
  line-height: 1.5;
}

.tacet-pricing-rules .tacet-info-note {
  margin-top: var(--space-8);
  border-block-start: 0;
}

.tacet-pricing-rules .tacet-info-note__heading {
  font-family: var(--font-body);
  font-weight: 650;
}

/* Questions: the shared FAQ section on this page's rail and type. */
.tacet-pricing-questions #faq {
  border-bottom: 0;
}

.tacet-pricing-questions #faq > div:first-child,
.tacet-pricing-questions #faq > div:last-child > div {
  box-sizing: border-box;
  width: var(--pricing-rail);
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}

.tacet-pricing-questions #faq > div:first-child {
  padding-block: var(--pricing-space) clamp(1.5rem, 3vw, 2.5rem);
}

.tacet-pricing-questions #faq > div:last-child {
  padding-bottom: var(--pricing-space);
  border-top: 0;
}

.tacet-pricing-questions #faq > div:last-child > div {
  border-top: 1px solid var(--foreground);
}

.tacet-pricing-questions .tacet-credit-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.625em;
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: clamp(0.875rem, 1.1vw, 1.0625rem);
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
}

.tacet-pricing-questions .tacet-credit-eyebrow::before {
  content: '';
  flex: none;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--pricing-dot);
}

.tacet-pricing-questions #faq h2 {
  margin: 0;
  font-size: clamp(2.375rem, 5.4vw, 5.75rem);
}

.tacet-pricing-questions #faq summary {
  padding: var(--space-6) 0;
}

.tacet-pricing-questions #faq summary > span {
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  font-weight: 650;
  line-height: 1.3;
}

.tacet-pricing-questions #faq details > div {
  padding: 0 0 var(--space-6);
}

.tacet-pricing-questions #faq details p {
  max-width: 42em;
  font-size: 1.0625rem;
  line-height: 1.5;
}

/* End card: the statement again, then one bar. */
.tacet-pricing-end .tacet-pricing-rail {
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.tacet-pricing-end__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-8);
  margin-top: clamp(2rem, 5cqw, 4rem);
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-6);
  border-radius: var(--pricing-radius);
  background: var(--pricing-ground);
  color: var(--foreground);
}

.tacet-pricing-end__offer {
  display: inline-flex;
  align-items: center;
  gap: 0.625em;
  margin: 0;
  color: var(--foreground);
  font-size: clamp(1.0625rem, 1.7cqw, 1.5rem);
  font-weight: 650;
  line-height: 1.25;
}

.tacet-pricing-end__bar .tacet-pricing-actions {
  margin-top: 0;
}

/* The site's heading rules for this profile are important declarations inside
   the components layer, so the film's heading roles have to be declared there
   too: Clash for statements and headlines, Supreme for card and row titles. */
@layer components {
  .proto-saas.tacet-pricing-page .tacet-pricing-slam {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    line-height: 0.84 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
  }

  .proto-saas.tacet-pricing-page .tacet-pricing-headline,
  .proto-saas.tacet-pricing-page .tacet-pricing-questions #faq h2 {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    line-height: 0.96 !important;
    letter-spacing: -0.02em !important;
    word-spacing: 0.06em;
    text-transform: none !important;
  }

  .proto-saas.tacet-pricing-page .tacet-pricing-grant__title {
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  .proto-saas.tacet-pricing-page
    :is(
      .tacet-pricing-tile__title,
      .tacet-pricing-offer__name,
      .tacet-pricing-model__name,
      .tacet-pricing-model__note h3
    ) {
    font-family: var(--font-body) !important;
    font-weight: 650 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
  }
}

@media (min-width: 40rem) {
  .tacet-pricing-dock__systems {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tacet-pricing-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tacet-pricing-tile {
    min-height: 11.5rem;
  }

  .tacet-pricing-offers {
    --pricing-offer-price: 13cqw;

    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tacet-pricing-ledger__row {
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  }
}

/* Below the desktop layout the statement stacks: one beat per line, each one
   spanning the rail. */
@media (max-width: 63.99rem) {
  .tacet-pricing-slam__line--lead {
    margin-left: 0;
    font-size: inherit;
  }

  .tacet-pricing-slam__word {
    display: block;
  }

  .tacet-pricing-slam__word--today {
    margin-left: -0.01em;
    font-size: calc(100cqw / var(--pricing-ink-today));
  }

  /* The comma hangs 0.17em below its baseline. The stacked lines take enough
     air for it to clear the next cap line by a letter gap, and the two gaps
     between a baseline and the next cap line measure the same. */
  .tacet-pricing-slam__word--saas {
    margin-top: 0.09em;
    margin-left: -0.02em;
    font-size: calc(100cqw / var(--pricing-ink-saas));
  }

  .tacet-pricing-slam__line--free {
    margin-top: 0.04em;
  }
}

@media (max-width: 39.99rem) {
  .tacet-pricing-label__note {
    flex-basis: 100%;
  }

  /* Rate card rows restack: the operation on one line, its category and rate
     on the next. The header row stays available to assistive tech. */
  .tacet-pricing-ratecard {
    overflow-x: visible;
  }

  .tacet-pricing-ratecard__grid.tacet-page-table,
  .tacet-pricing-ratecard__grid :is(thead, tbody) {
    display: block;
    min-width: 0;
  }

  .tacet-pricing-ratecard__grid thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .tacet-pricing-ratecard__caption {
    display: block;
    border-bottom: 1px solid var(--foreground);
  }

  .tacet-pricing-ratecard__grid tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-1) var(--space-4);
    align-items: baseline;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border);
  }

  .tacet-pricing-rates
    .tacet-pricing-ratecard
    .tacet-pricing-ratecard__grid.tacet-page-table
    tbody
    tr
    > :is(th, td) {
    display: block;
    padding: 0;
    border: 0;
  }

  .tacet-pricing-ratecard__grid tbody td:first-child,
  .tacet-pricing-ratecard__group th {
    grid-column: 1 / -1;
  }

  .tacet-pricing-ratecard__grid tbody td.tacet-pricing-ratecard__rate {
    max-width: 16rem;
    white-space: normal;
  }

  .tacet-pricing-ratecard__grid tbody tr.tacet-pricing-ratecard__group {
    padding-block: var(--space-8) var(--space-3);
    border-bottom-color: var(--foreground);
  }
}

@media (min-width: 64rem) {
  /* FREE. takes 60% of the rail; the offer and the actions sit beside it, on
     its baseline, so both are above the fold on a laptop. */
  .tacet-pricing-hero__stage {
    --pricing-free-size: calc(60cqw / var(--pricing-ink-free));

    display: grid;
    grid-template-columns: 64cqw minmax(0, 1fr);
    align-items: end;
  }

  .tacet-pricing-hero__stage > .tacet-pricing-slam {
    grid-area: 1 / 1 / 2 / 3;
  }

  .tacet-pricing-hero__stage .tacet-pricing-slam__line--free {
    font-size: var(--pricing-free-size);
  }

  .tacet-pricing-hero__aside {
    grid-area: 1 / 2 / 2 / 3;
    padding-bottom: calc(var(--pricing-free-size) * 0.1);
  }

  .tacet-pricing-hero__aside .tacet-pricing-lede {
    margin-top: 0;
    font-size: clamp(1rem, 1.5cqw, 1.3125rem);
  }

  .tacet-pricing-grant__stage {
    grid-template-columns: minmax(0, 56cqw) minmax(0, 1fr);
    gap: 6cqw;
    align-items: end;
  }

  .tacet-pricing-number {
    font-size: calc(56cqw / var(--pricing-ink-credit));
  }

  .tacet-pricing-dock {
    grid-template-columns: minmax(0, 24cqw) minmax(0, 1fr);
  }

  .tacet-pricing-dock__brand {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
  }

  .tacet-pricing-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tacet-pricing-buys {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .tacet-pricing-model {
    grid-template-columns: minmax(0, 46cqw) minmax(0, 1fr);
  }
}

/* Between the stacked and the wide layouts the column beside FREE. is too
   narrow for the sentence, so it holds the two actions, stacked, and the
   sentence takes its own row under the statement. */
@media (min-width: 64rem) and (max-width: 79.99rem) {
  .tacet-pricing-hero__stage {
    row-gap: clamp(1.25rem, 2.6cqw, 2rem);
  }

  .tacet-pricing-hero__aside {
    display: contents;
  }

  .tacet-pricing-hero__aside .tacet-pricing-lede {
    grid-area: 2 / 1 / 3 / 3;
    max-width: none;
    font-size: clamp(1.0625rem, 1.9cqw, 1.3125rem);
  }

  .tacet-pricing-hero__aside .tacet-pricing-actions {
    flex-direction: column;
    grid-area: 1 / 2 / 2 / 3;
    align-items: stretch;
    align-self: end;
    margin: 0 0 calc(var(--pricing-free-size) * 0.1);
  }
}

@media (min-width: 72rem) {
  .tacet-pricing-offers {
    --pricing-offer-price: 7.2cqw;

    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Motion: words land whole and settle from 1.12 to 1 on the site's expo-out
   curve. Nothing drifts between steps. */
@media (prefers-reduced-motion: no-preference) {
  .tacet-pricing-hero .tacet-pricing-slam__word,
  .tacet-pricing-hero .tacet-pricing-slam__line--free {
    transform-origin: 0 82%;
    animation: tacet-pricing-land var(--duration-slow) var(--pricing-ease) both;
  }

  .tacet-pricing-hero .tacet-pricing-slam__word--saas {
    animation-delay: 140ms;
  }

  .tacet-pricing-hero .tacet-pricing-slam__line--free {
    animation-delay: 320ms;
  }

  .tacet-pricing-hero__aside > * {
    animation: tacet-pricing-rise var(--duration-slow) var(--pricing-ease) 520ms both;
  }

  .tacet-pricing-hero__aside > .tacet-pricing-actions {
    animation-delay: 600ms;
  }

  .tacet-pricing-grant__stage.observed .tacet-pricing-number {
    transform-origin: 0 82%;
    animation: tacet-pricing-settle var(--duration-slow) var(--pricing-ease) both;
  }

  /* rented, then running: a hard swap per system, in reading order. */
  .tacet-pricing-dock__systems.observed .tacet-pricing-dock__rented {
    animation: tacet-pricing-swap-out var(--duration-slow) linear both;
    animation-delay: calc(650ms + var(--stagger-index, 0) * 110ms);
  }

  .tacet-pricing-dock__systems.observed .tacet-pricing-dock__running {
    transform-origin: 0 50%;
    animation: tacet-pricing-swap-in var(--duration-slow) var(--pricing-ease) both;
    animation-delay: calc(650ms + var(--stagger-index, 0) * 110ms);
  }
}

@keyframes tacet-pricing-land {
  from {
    opacity: 0;
    transform: scale(1.12);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes tacet-pricing-rise {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes tacet-pricing-settle {
  from {
    transform: scale(1.1);
  }

  to {
    transform: none;
  }
}

/* Hidden from the first percent on, so the end state never depends on the
   animation reaching exactly 100%. */
@keyframes tacet-pricing-swap-out {
  0% {
    visibility: visible;
  }

  1%,
  100% {
    visibility: hidden;
  }
}

@keyframes tacet-pricing-swap-in {
  from {
    visibility: hidden;
    transform: scale(1.14);
  }

  to {
    visibility: visible;
    transform: none;
  }
}

@media (forced-colors: active) {
  .tacet-pricing-label__dot,
  .tacet-pricing-pill__dot {
    background: CanvasText;
  }

  .tacet-pricing-pill,
  .tacet-pricing-tile,
  .tacet-pricing-offer,
  .tacet-pricing-model__panel,
  .tacet-pricing-end__bar {
    border: 1px solid CanvasText;
  }
}