/* -- Pricing free-first slabs: /pricing in the launch film's language.
   Full-bleed emphasis, orange and paper slabs on the Tacet narrative profile:
   Geist Narrative throughout, heavy capital statements sized from their own
   ink widths, Tacet two-weight section headings, cards and page tables. 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, eyebrow, slam, surface, system, item, 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);
  /* Ink of the home hero's agent half. The orange slab keeps it as its type
     in both themes. */
  --pricing-black: var(--hero-catalog-dark-ink);
  --pricing-on-black: var(--hero-catalog-on-solid);
  /* Light grounds are the Tacet page's own tokens: its background, a white
     lift for cards, and its hairline, strong rule and muted ink. */
  --pricing-paper: var(--background);
  --pricing-card: var(--footer-tacet-bg-lift-light);
  --pricing-ink: var(--ink-deep);
  --pricing-muted: var(--text-m);
  --pricing-line: var(--border);
  --pricing-line-strong: var(--border-strong);
  /* White panels on the emphasis surface (the model panel and the end bar). */
  --pricing-panel: var(--footer-tacet-bg-lift-light);
  /* The hero is the home hero's resting human half: its cell, warmed by 5%
     orange, under the Tacet resting wash. */
  --pricing-hero: color-mix(
    in oklab,
    color-mix(in oklch, var(--background), var(--beige-100) 34%),
    var(--tacet-orange) 5%
  );
  --pricing-hero-ink: var(--ink-deep);
  --pricing-hero-muted: var(--ink-mid);
  --pricing-wash-top: rgb(255 255 255 / 0.38);
  --pricing-wash-mid: rgb(255 255 255 / 0.1);
  /* The emphasis surface (buys, offers, rate card, end). In light it is the
     home hero's resting agent half (its cell with 8% beige-400), the quiet
     counterpart of the hero's human half, with ink type. In dark it is the
     home hero's agent-half hover. */
  --pricing-shade: color-mix(
    in oklab,
    color-mix(in oklch, var(--background), var(--beige-100) 34%),
    var(--beige-400) 8%
  );
  --pricing-on-shade: var(--pricing-black);
  --pricing-muted-on-shade: var(--ink-mid);
  --pricing-line-on-shade: color-mix(in oklch, var(--pricing-black), transparent 84%);
  --pricing-line-strong-on-shade: var(--border-strong);
  --pricing-surface-on-shade: color-mix(in oklab, var(--pricing-shade), var(--background) 50%);
  /* Proto orange is under 2:1 on light grounds. Deepened toward ink in oklab,
     which keeps its hue, it clears 3:1 for the large accent words that use it
     (FREE., $1, the pack prices). */
  --pricing-hot: color-mix(in oklab, var(--pricing-orange), var(--pricing-black) 30%);
  /* Satin surfaces: the ERP•AI panel's cells on a light ground between the
     page and white, item cards on white. */
  --pricing-system-ground: color-mix(in oklab, var(--pricing-card) 60%, var(--pricing-paper));
  --pricing-surface-keyline: color-mix(in oklch, var(--ink-deep), transparent 91%);
  --pricing-surface-lift: rgb(255 255 255 / 70%);
  /* Tacet cards: the 8px card radius and the ambient small shadow. */
  --pricing-card-shadow: var(--tacet-shadow-sm);
  /* The rail is the Tacet narrative rail (1120px, with the profile's gutters
     and its narrow-screen steps), so sections share the width of every other
     Tacet page. */
  --pricing-rail: var(--tacet-narrative-rail);
  --pricing-space: clamp(3.5rem, 7.5vw, 7rem);
  --pricing-gap: clamp(2rem, 4.5cqw, 3.5rem);
  --pricing-radius: var(--tacet-radius-lg);
  --pricing-ease: var(--ease-signature);

  /* Ink widths of the statement lines, in em, in Geist Narrative 800 at
     -0.04em tracking. A rail divided by a line's ink width is the size at
     which that line spans the rail exactly; the bearing is the negative
     margin that puts the first glyph's ink, not its box, on the rail.
     Re-measure when the tracking or the copy changes. */
  --pricing-ink-lead: 10.1162; /* SEATS AND APPS ARE */
  --pricing-ink-first: 5.2456; /* SEATS AND */
  --pricing-ink-second: 4.674; /* APPS ARE */
  --pricing-ink-free: 2.5438; /* FREE. */
  --pricing-ink-credit: 5.471; /* 10,000,000 */
  --pricing-ink-lead-bearing: -0.051em;
  --pricing-ink-second-bearing: -0.0184em;
  --pricing-ink-free-bearing: -0.068em;
  --pricing-ink-credit-bearing: -0.0368em;

  /* The page ends on the emphasis end card, so the footer cap matches it. */
  --site-main-seam-surface: var(--pricing-shade);
}

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-line-strong: var(--beige-600);
  --pricing-hero: color-mix(
    in oklab,
    color-mix(in oklch, var(--beige-900), var(--beige-950) 34%),
    var(--tacet-orange) 5%
  );
  --pricing-hero-ink: var(--beige-100);
  --pricing-hero-muted: color-mix(in oklch, var(--beige-300), transparent 18%);
  --pricing-wash-top: color-mix(in oklch, var(--pricing-hero), transparent 42%);
  --pricing-wash-mid: color-mix(in oklch, var(--pricing-hero), transparent 62%);
  --pricing-shade: var(--pricing-black);
  --pricing-on-shade: var(--pricing-on-black);
  --pricing-muted-on-shade: var(--beige-300);
  --pricing-line-on-shade: color-mix(in oklch, var(--pricing-on-black), transparent 82%);
  --pricing-line-strong-on-shade: var(--beige-700);
  --pricing-surface-on-shade: var(--beige-900);
  --pricing-hot: var(--pricing-orange);
  /* Dark emphasis keeps the agent-half hover sheen in place of satin. */
  --pricing-sheen:
    radial-gradient(
      circle at 50% 32%,
      color-mix(in oklch, var(--pricing-on-black), transparent 92%),
      transparent 50%
    ),
    linear-gradient(
      118deg,
      color-mix(in oklch, var(--pricing-black), var(--pricing-on-black) 18%) 0%,
      color-mix(in oklch, var(--pricing-black), var(--pricing-on-black) 7%) 16%,
      var(--pricing-black) 36%,
      color-mix(in oklch, var(--pricing-black), var(--pricing-on-black) 12%) 54%,
      color-mix(in oklch, var(--pricing-black), var(--pricing-on-black) 3%) 74%,
      var(--pricing-black) 88%,
      color-mix(in oklch, var(--pricing-black), var(--pricing-on-black) 7%) 100%
    ),
    var(--pricing-black);
  --pricing-system-ground: color-mix(in oklab, var(--beige-800), var(--beige-700) 30%);
  --pricing-surface-keyline: color-mix(in oklch, var(--beige-100), transparent 88%);
  --pricing-surface-lift: rgb(255 255 255 / 10%);
}

/* Slabs. Each one re-points the shared semantic tokens to its own ground, so
   shared buttons, tables and notes resolve correctly inside it. Every ground
   is a satin surface: the home billboards' restrained vertical reflection
   (a lifted top edge and a slightly settled bottom edge) over its flat color.
   It is computed here from each element's own --background. */
.tacet-pricing-slab,
.tacet-pricing-offer {
  --pricing-satin: linear-gradient(
    180deg,
    color-mix(in oklch, var(--background) 88%, var(--ink-light)) 0%,
    var(--background) 18%,
    var(--background) 82%,
    color-mix(in oklch, var(--background) 96%, var(--ink-deep)) 100%
  );
}

.tacet-pricing-slab {
  position: relative;
  overflow: clip;
  background: var(--pricing-ground);
  color: var(--foreground);
  font-family: var(--tacet-narrative-font);
}

/* Emphasis: satin in light; dark defines --pricing-sheen, which replaces it. */
.tacet-pricing-slab--black,
.tacet-pricing-offer {
  --pricing-ground: var(--pricing-sheen, var(--pricing-satin));
  --pricing-dot: var(--pricing-orange);
  --background: var(--pricing-shade);
  --foreground: var(--pricing-on-shade);
  --text-m: var(--pricing-muted-on-shade);
  --border: var(--pricing-line-on-shade);
  --border-strong: var(--pricing-line-strong-on-shade);
  --surface-container: var(--pricing-surface-on-shade);
  --org-on-light: var(--pricing-hot);
  --ring: var(--pricing-hot);
}

/* Hero: the home hero's resting human half under the Tacet resting wash, the
   same layers the page shell paints behind other Tacet heroes. The wash
   settles into the satin ground below the navigation. */
.tacet-pricing-slab--hero {
  --pricing-dot: var(--pricing-orange);
  --background: var(--pricing-hero);
  --foreground: var(--pricing-hero-ink);
  --text-m: var(--pricing-hero-muted);
  --border: var(--pricing-line);
  --border-strong: var(--pricing-line-strong);
  --org-on-light: var(--pricing-hot);
  --ring: var(--pricing-hot);
  --pricing-ground:
    linear-gradient(
      to bottom,
      var(--pricing-wash-top),
      var(--pricing-wash-mid) 18rem,
      transparent 38rem
    ),
    url('../images/proto/gradient-navbar-bg.png') top center / 100% 38rem no-repeat,
    var(--pricing-satin);
}

.tacet-pricing-slab--orange {
  --background: var(--pricing-orange);
  --pricing-ground: var(--pricing-satin);
  --pricing-dot: var(--pricing-black);
  --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%);
  --border-strong: color-mix(in oklch, var(--pricing-black), transparent 40%);
  --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-satin);
  --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-strong);
  --surface-container: var(--pricing-card);
  --darker: var(--pricing-paper);
  --ring: var(--pricing-ink);
}

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

/* White in both themes: the film's paper bar and paper card on the emphasis
   surface. */
.tacet-pricing-model__panel,
.tacet-pricing-end__bar {
  --pricing-ground: var(--pricing-panel);
  --pricing-dot: var(--pricing-orange);
  --background: var(--pricing-panel);
  --foreground: var(--pricing-black);
  --text-m: var(--ink-mid);
  --border: var(--beige-300);
  --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);
}

/* Section eyebrow: the shared Tacet dual-weight underline eyebrow, spaced
   from the statement below it. */
.tacet-pricing-eyebrow {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 clamp(1.5rem, 3cqw, 2.5rem);
}

/* The hero eyebrow runs context first: "Start now" over the 1px rule, then
   "for free" over the 2px rule. The gap moves to the context's end, and the
   strong rule stops at its last letter like the quiet one does in the shared
   order. */
.tacet-pricing-eyebrow--brand .proto-section-eyebrow__context {
  padding-right: var(--space-2);
}

.tacet-pricing-eyebrow--brand .proto-section-eyebrow__name {
  padding-right: 0;
}

/* Statement type: Geist Narrative 800 capitals, 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(--tacet-narrative-font);
  font-weight: 800;
  font-kerning: normal;
  line-height: 0.84;
  letter-spacing: -0.04em;
  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: var(--pricing-ink-lead-bearing);
  font-size: calc(100cqw / var(--pricing-ink-lead));
}

.tacet-pricing-slam__line--free {
  margin-top: 0.03em;
  margin-left: var(--pricing-ink-free-bearing);
  color: var(--pricing-hot);
  font-size: calc(100cqw / var(--pricing-ink-free));
}

/* The heavy line beside the $100 statement. */
.tacet-pricing-headline {
  max-width: 17em;
  margin: 0;
  color: var(--foreground);
  font-size: clamp(2.375rem, 6.2cqw, 5.75rem);
  text-wrap: balance;
}

/* Section headings: the Tacet two-weight heading, a quiet 400 opening and an
   800 continuation ending on the gradient period (tacetEmphasis). */
.tacet-pricing-heading {
  max-width: 24em;
  margin: 0;
  color: var(--foreground);
  text-wrap: balance;
}

/* Prose: the Tacet narrative measure and leading. */
.tacet-pricing-lede {
  max-width: 48ch;
  margin: var(--space-6) 0 0;
  color: color-mix(in oklab, var(--foreground) 80%, var(--background));
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.6;
  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: 600;
  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);
}

/* The opening fills the requested minimum and grows with its content. */
.tacet-pricing-hero {
  display: flex;
  align-items: center;
  min-height: max(780px, 80dvh);
  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: var(--pricing-ink-credit-bearing);
  color: var(--foreground);
  font-family: var(--tacet-narrative-font);
  font-size: calc(100cqw / var(--pricing-ink-credit));
  font-weight: 800;
  line-height: 0.84;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

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

/* Free, itemized: the ERP•AI panel and eight item cards, all satin surfaces. Each surface is the home
   billboards' material: its ground, a lifted top edge and a settled bottom
   edge, an inset keyline and one cast shadow. Elevation is declared once, in
   the shadow stack; there is no separate border. */
.tacet-pricing-surface {
  border-radius: var(--pricing-radius);
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--pricing-surface-ground) 88%, var(--ink-light)) 0%,
    var(--pricing-surface-ground) 18%,
    var(--pricing-surface-ground) 82%,
    color-mix(in oklch, var(--pricing-surface-ground) 96%, var(--ink-deep)) 100%
  );
  box-shadow:
    inset 0 0 0 1px var(--pricing-surface-keyline),
    inset 0 1px 0 var(--pricing-surface-lift),
    var(--pricing-card-shadow);
}

/* The ERP•AI panel: one satin surface grouping the six systems. Its cells
   sit on the lighter system ground, divided by 1px rules (the panel's own
   border tone showing through 1px gaps). */
.tacet-pricing-dock {
  --pricing-surface-ground: var(--pricing-system-ground);

  display: grid;
  gap: 1px;
  margin-top: var(--pricing-gap);
  overflow: hidden;
  background: var(--border);
}

.tacet-pricing-dock__brand,
.tacet-pricing-system {
  background: var(--pricing-system-ground);
}

.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);
}

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

.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-systems,
.tacet-pricing-items {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.tacet-pricing-items {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin-top: var(--pricing-gap);
}

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

.tacet-pricing-system__name {
  color: var(--foreground);
  font-size: clamp(1.0625rem, 1.7cqw, 1.375rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Both states share one cell. The resting state is the truth ($0 per seat);
   the rented state exists only for the entrance. */
.tacet-pricing-system__state {
  display: grid;
}

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

.tacet-pricing-system__rented {
  align-self: end;
  visibility: hidden;
  color: var(--text-m);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.tacet-pricing-system__running {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

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

.tacet-pricing-system__price {
  color: var(--foreground);
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* Phones: a compact card, value beside the title. */
.tacet-pricing-item {
  --pricing-surface-ground: var(--pricing-card);

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-4);
  align-items: baseline;
  padding: var(--space-6);
}

.tacet-pricing-item__title {
  grid-column: 1;
  margin: 0;
  color: var(--foreground);
  font-size: 1.1875rem;
  text-wrap: balance;
}

.tacet-pricing-item__detail {
  grid-column: 1 / -1;
  max-width: 34ch;
  margin: 0;
  color: var(--text-m);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.tacet-pricing-item__value {
  display: flex;
  grid-row: 1;
  grid-column: 2;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  margin: 0;
}

.tacet-pricing-item__value strong {
  color: var(--foreground);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
}

.tacet-pricing-item__value span {
  color: var(--text-m);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

/* One dollar is the common starting point. The unboxed branches are separate
   usage examples, not additive allowances or quantities on a shared scale. */
.tacet-pricing-buys {
  display: grid;
  gap: var(--space-8);
  margin: var(--pricing-gap) 0 0;
  padding-block: var(--space-8);
  border-block: 1px solid var(--border-strong);
}

.tacet-pricing-buys__anchor {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin: 0;
}

.tacet-pricing-buys__dollar {
  color: var(--pricing-hot);
  font-size: clamp(5rem, 20cqw, 13rem);
  font-weight: 800;
  line-height: 0.84;
  letter-spacing: -0.04em;
}

.tacet-pricing-buys__explanation {
  max-width: 22ch;
  color: var(--text-m);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.tacet-pricing-buys__groups {
  display: grid;
  gap: var(--space-8);
  min-width: 0;
}

.tacet-pricing-buys__group {
  min-width: 0;
}

.tacet-pricing-buys__group-title {
  margin: 0;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-strong);
  color: var(--foreground);
  font-size: 1.125rem;
}

.tacet-pricing-buys__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.tacet-pricing-buys__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.tacet-pricing-buys__value {
  color: var(--foreground);
  font-size: clamp(1.75rem, 5.5cqw, 3rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  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 {
  color: var(--text-m);
  font-size: 0.9375rem;
  line-height: 1.4;
}

/* Prepaid amounts share terms and one surface; Enterprise is a separate
   sales-led choice. The amounts remain parallel, never steps or plan tiers. */
.tacet-pricing-offers {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--pricing-gap);
}

.tacet-pricing-prepaid {
  min-width: 0;
}

.tacet-pricing-prepaid__choices {
  overflow: clip;
  border-radius: var(--pricing-radius);
  box-shadow: var(--pricing-card-shadow);
}

.tacet-pricing-offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  box-sizing: border-box;
  min-width: 0;
  padding: var(--space-6);
  background: var(--pricing-ground);
  color: var(--foreground);
}

.tacet-pricing-offer + .tacet-pricing-offer {
  border-top: 1px solid var(--border-strong);
}

.tacet-pricing-offer__amount {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  min-width: 0;
}

.tacet-pricing-offer--enterprise {
  --background: var(--pricing-card);
  align-content: start;
  align-items: start;
  gap: var(--space-6);
  border-radius: var(--pricing-radius);
  background: var(--pricing-satin);
  box-shadow: var(--pricing-card-shadow);
}

.tacet-pricing-offer--enterprise .tacet-pricing-offer__amount {
  display: block;
}

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

.tacet-pricing-offer__price {
  margin: 0;
  color: var(--pricing-hot);
  font-size: clamp(2.75rem, 6cqw, 4rem);
  font-weight: 800;
  line-height: 0.84;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

.tacet-pricing-offer--enterprise .tacet-pricing-offer__price {
  margin-top: var(--space-3);
  color: var(--foreground);
  font-size: clamp(2.25rem, 4.5cqw, 3.25rem);
  line-height: 1;
}

.tacet-pricing-prepaid__terms {
  margin-top: var(--space-6);
  color: var(--text-m);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.tacet-pricing-prepaid__terms p {
  margin: 0 0 var(--space-2);
}

.tacet-pricing-prepaid__terms ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin: 0;
  padding-left: var(--space-4);
}

.tacet-pricing-offer__features {
  margin: 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;
}

/* The rate index is ordinary anchor navigation. Each category remains fully
   readable and independently labelled without scripts or disclosure controls. */
.tacet-pricing-rate-nav {
  margin-top: var(--space-8);
}

.tacet-pricing-rate-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tacet-pricing-rate-nav a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: var(--space-2);
  color: var(--foreground);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 0.3em;
}

.tacet-pricing-rate-nav a:hover {
  text-decoration-color: currentcolor;
}

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

.tacet-pricing-rate-nav__icon {
  width: 1rem;
  height: 1rem;
  flex: none;
}

.tacet-pricing-rate-groups {
  display: grid;
  gap: var(--pricing-gap);
  margin-top: var(--space-8);
}

.tacet-pricing-rate-group {
  min-width: 0;
}

.tacet-pricing-rate-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.tacet-pricing-rate-group__head h3 {
  margin: 0;
  color: var(--foreground);
  font-size: clamp(1.25rem, 2cqw, 1.5rem);
}

.tacet-pricing-rate-group__head p {
  margin: 0;
  color: var(--text-m);
  font-size: 0.875rem;
  white-space: nowrap;
}

.tacet-pricing-rate-group .tacet-pricing-fine {
  margin-top: var(--space-4);
}

/* Rates use the page's editorial type and unboxed grouping. Category captions
   replace repeated cells; native headers remain available to assistive tech. */
.tacet-pricing-rate-categories {
  display: grid;
  gap: var(--space-10) var(--space-12);
}

.tacet-pricing-ratecard {
  container: pricing-ratecard / inline-size;
  min-width: 0;
}

.tacet-pricing-ratecard__grid {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  color: var(--foreground);
  font-family: var(--tacet-narrative-font);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.tacet-pricing-ratecard__grid caption:not(.sr-only) {
  padding: 0 0 var(--space-4);
  border-bottom: 1px solid var(--border-strong);
  font-size: 1.125rem;
  font-weight: 500;
  text-align: left;
}

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

.tacet-pricing-ratecard__grid tbody tr {
  border-bottom: 1px solid var(--border);
}

.tacet-pricing-ratecard__grid tbody tr:last-child {
  border-bottom: 0;
}

.tacet-pricing-ratecard__grid tbody :is(th, td) {
  padding: var(--space-4) 0;
  font-size: inherit;
  vertical-align: baseline;
}

.tacet-pricing-ratecard__grid tbody th {
  padding-right: var(--space-4);
  font-weight: 500;
  text-align: left;
}

.tacet-pricing-ratecard__rate {
  color: var(--text-m);
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow-wrap: break-word;
}

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

.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: 1px solid var(--border);
  border-radius: var(--pricing-radius);
  background: var(--pricing-ground);
  box-shadow: var(--pricing-card-shadow);
  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: 700;
}

/* 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.6cqw, 1.375rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.003em;
}

.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: inherit;
  font-weight: 600;
}

/* Questions: the shared FAQ section on this page's rail and type. */
.tacet-pricing-questions {
  --font-body: var(--tacet-narrative-font);
}

.tacet-pricing-questions #faq {
  /* The shared section caps itself at 90rem; release it so the rail resolves
     against the full slab like every other section. Its inline flat ground
     would hide the slab's satin, so it is cleared here. */
  max-width: none;
  margin-inline: 0;
  background: transparent !important;
  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 {
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
}

.tacet-pricing-questions #faq h2 {
  margin: 0;
}

.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: 500;
  line-height: 1.3;
}

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

.tacet-pricing-questions #faq details p {
  max-width: 48ch;
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* End card: the statement again, then one bar. The sheen settles into flat
   ink before the footer cap, whose seam surface is that ink. */
.tacet-pricing-end {
  /* Satin without the settled bottom edge, so the card meets the footer cap
     on exactly the seam surface. */
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--background) 88%, var(--ink-light)) 0%,
    var(--background) 18%
  );
}

html.dark .tacet-pricing-end {
  background:
    linear-gradient(to bottom, transparent 55%, var(--pricing-shade) 92%), var(--pricing-sheen);
}

.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: 1px solid var(--border);
  border-radius: var(--pricing-radius);
  background: var(--pricing-ground);
  box-shadow: var(--pricing-card-shadow);
  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: 600;
  line-height: 1.25;
}

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

/* The narrative profile's heading rules are important declarations inside the
   components layer (and FAQ markup carries inline heading styles), so the
   page's heading roles are declared there too. Its rule that sets every
   heading span to 800 ink is kept, except that FREE. keeps its accent. */
@layer components {
  .proto-saas.tacet-pricing-page .tacet-pricing-slam {
    font-family: var(--tacet-narrative-font) !important;
    font-weight: 800 !important;
    line-height: 0.84 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
  }

  .proto-saas.tacet-pricing-page .tacet-pricing-slam .tacet-pricing-slam__line--free {
    color: var(--pricing-hot) !important;
  }

  .proto-saas.tacet-pricing-page .tacet-pricing-grant__title {
    font-family: var(--tacet-narrative-font) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -0.035em !important;
    text-transform: none !important;
  }

  .proto-saas.tacet-pricing-page .tacet-pricing-grant__title .tacet-pricing-headline {
    line-height: 0.96;
  }

  .proto-saas.tacet-pricing-page .tacet-pricing-heading,
  .proto-saas.tacet-pricing-page .tacet-pricing-questions #faq h2 {
    font-family: var(--tacet-narrative-font) !important;
    font-size: var(--tacet-narrative-heading) !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.035em !important;
    text-transform: none !important;
  }

  .proto-saas.tacet-pricing-page
    :is(
      .tacet-pricing-item__title,
      .tacet-pricing-buys__group-title,
      .tacet-pricing-offer__name,
      .tacet-pricing-rate-group__head h3,
      .tacet-pricing-model__name,
      .tacet-pricing-model__note h3
    ) {
    font-family: var(--tacet-narrative-font) !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: var(--tacet-type-card-track) !important;
    text-transform: none !important;
  }
}

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

  /* From tablet up, each item card stacks: title, detail, then the value on
     a rule at the card's foot. */
  .tacet-pricing-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tacet-pricing-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 14.25rem;
    padding: var(--space-6);
  }

  .tacet-pricing-item__title {
    font-size: 1.3125rem;
  }

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

  .tacet-pricing-item__value {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
  }

  .tacet-pricing-item__value strong {
    font-size: 1.875rem;
  }

  .tacet-pricing-buys__groups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
  }

  .tacet-pricing-buys__item {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }

  .tacet-pricing-buys__value {
    font-size: clamp(1.75rem, 3.8cqw, 2.75rem);
  }

  .tacet-pricing-prepaid .tacet-pricing-offer {
    grid-template-columns: minmax(0, 1fr) minmax(10rem, 0.8fr);
    gap: var(--space-8);
  }

  .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--first {
    margin-left: var(--pricing-ink-lead-bearing);
    font-size: calc(100cqw / var(--pricing-ink-first));
  }

  .tacet-pricing-slam__word--second {
    margin-top: 0.04em;
    margin-left: var(--pricing-ink-second-bearing);
    font-size: calc(100cqw / var(--pricing-ink-second));
  }

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

@container pricing-ratecard (max-width: 28rem) {
  /* Keep each operation and its rate together on a narrow screen. */
  .tacet-pricing-ratecard__grid,
  .tacet-pricing-ratecard__grid tbody {
    display: block;
    min-width: 0;
  }

  .tacet-pricing-ratecard__grid caption:not(.sr-only) {
    display: block;
  }

  .tacet-pricing-ratecard__grid tbody tr {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-4) 0;
  }

  .tacet-pricing-ratecard__grid tbody :is(th, td) {
    display: block;
    padding: 0;
    text-align: left;
  }
}

@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;
  }

  .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-items {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .tacet-pricing-buys {
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    gap: var(--space-12);
    align-items: start;
  }

  .tacet-pricing-buys__anchor {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
  }

  .tacet-pricing-buys__value {
    font-size: clamp(1.75rem, 3cqw, 2.25rem);
  }

  .tacet-pricing-offers {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-8);
  }

  .tacet-pricing-rate-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .tacet-pricing-rate-group--operations {
    grid-column: 1 / -1;
  }

  .tacet-pricing-rate-categories {
    grid-template-columns: repeat(2, 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);
  }
}

/* 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--second {
    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-systems.observed .tacet-pricing-system__rented {
    animation: tacet-pricing-swap-out var(--duration-slow) linear both;
    animation-delay: calc(650ms + var(--stagger-index, 0) * 110ms);
  }

  .tacet-pricing-systems.observed .tacet-pricing-system__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-surface,
  .tacet-pricing-offer,
  .tacet-pricing-model__panel,
  .tacet-pricing-end__bar {
    border: 1px solid CanvasText;
  }
}