/* Pricing's narrative type and section rhythm. The existing offer grid, price
   data, rate tables, FAQ behavior and shared chrome keep their own contracts. */
@font-face {
  font-family: 'Pricing Narrative';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/google/geist-variable-latin.woff2') format('woff2');
}

@layer components {
  .tacet-pricing-narrative-page {
    --pricing-narrative-font: 'Pricing Narrative', Supreme, sans-serif;
    --font-heading: var(--pricing-narrative-font);
    --font-body: var(--pricing-narrative-font);
    --pricing-narrative-gutter: clamp(40px, 12.5vw, 160px);
    --pricing-narrative-rail: min(calc(100% - var(--pricing-narrative-gutter)), 1120px);
    --pricing-narrative-space: clamp(var(--space-20), 9vw, 9rem);
    --pricing-narrative-heading: clamp(2.25rem, 3.8vw, 3.5rem);
    font-family: var(--pricing-narrative-font);
  }

  .tacet-pricing-narrative-page .tacet-credit-wrap {
    box-sizing: border-box;
    width: var(--pricing-narrative-rail);
    max-width: var(--pricing-narrative-rail);
    padding: var(--pricing-narrative-space) 0;
  }

  .tacet-pricing-narrative-page .tacet-credit-hero-section .tacet-credit-wrap {
    padding-block: clamp(5rem, 9vw, 9rem);
  }

  .tacet-pricing-narrative-page .tacet-credit-hero {
    gap: clamp(var(--space-8), 4.5vw, var(--space-16));
    align-items: center;
  }

  .tacet-pricing-narrative-page .tacet-credit-eyebrow {
    margin-bottom: var(--space-6);
    font-family: var(--pricing-narrative-font);
  }

  .tacet-pricing-narrative-page .proto-section-eyebrow__name {
    color: var(--org-on-light);
    font-weight: 700;
  }

  .tacet-pricing-narrative-page .proto-section-eyebrow__context {
    color: var(--text-m);
    font-weight: 500;
  }

  .tacet-pricing-narrative-page .tacet-credit-h1 {
    max-width: 18ch;
    margin-bottom: var(--space-6);
    font-family: var(--pricing-narrative-font);
    font-size: clamp(3.75rem, 6.4vw, 5.5rem);
    font-weight: 400;
    font-variation-settings: 'wght' 400;
    letter-spacing: -0.04em;
    line-height: 1.02;
    text-transform: none;
  }

  .tacet-pricing-narrative-page .tacet-credit-h2 {
    margin-bottom: var(--space-4);
    color: var(--foreground);
    font-family: var(--pricing-narrative-font);
    font-size: var(--pricing-narrative-heading);
    font-weight: 400 !important;
    font-variation-settings: 'wght' 400;
    letter-spacing: -0.035em !important;
    line-height: 1.08 !important;
    text-transform: none;
  }

  .tacet-pricing-narrative-page .tacet-credit-h1 > span,
  .tacet-pricing-narrative-page .tacet-credit-h2 > span,
  .tacet-pricing-narrative-page #pricing-grid h2 > span,
  .tacet-pricing-narrative-page #faq h2 > span {
    color: var(--foreground);
    font-weight: 800;
    font-variation-settings: 'wght' 800;
  }

  .tacet-pricing-narrative-page .heading-tail {
    color: inherit;
    white-space: nowrap;
  }

  .tacet-pricing-narrative-page .heading-dot {
    display: inline-block;
    color: var(--org-on-light);
    opacity: 0.82;
    transform: translateY(0) scale(1);
    transform-origin: 50% 85%;
    transition:
      transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 180ms ease-out;
  }

  @supports (background-clip: text) {
    .tacet-pricing-narrative-page .heading-dot {
      background-image: linear-gradient(
        90deg,
        color-mix(in oklab, var(--foreground) 20%, var(--pur)),
        color-mix(in oklab, var(--foreground) 20%, var(--tacet-orange))
      );
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
    }
  }

  .tacet-pricing-narrative-page .tacet-credit-lede {
    max-width: 54ch;
    color: color-mix(in oklab, var(--foreground) 76%, transparent);
    font-size: 1.0625rem;
    line-height: 1.65;
  }

  .tacet-pricing-narrative-page .tacet-credit-buys {
    padding: var(--space-6) var(--space-6) var(--space-4);
  }

  .tacet-pricing-narrative-page .tacet-credit-buys__one {
    font-family: var(--pricing-narrative-font);
    font-size: clamp(1.375rem, 2vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.025em;
  }

  .tacet-pricing-narrative-page .tacet-credit-buys li,
  .tacet-pricing-narrative-page .tacet-credit-tbl,
  .tacet-pricing-narrative-page .tacet-credit-tbl th,
  .tacet-pricing-narrative-page .tacet-credit-tbl td {
    font-family: var(--pricing-narrative-font);
  }

  .tacet-pricing-narrative-page .tacet-credit-options {
    margin-top: var(--space-8);
  }

  .tacet-pricing-narrative-page .tacet-credit-options h3,
  .tacet-pricing-narrative-page .tacet-credit-cards h3 {
    font-family: var(--pricing-narrative-font);
    font-size: 1.125rem;
    font-weight: 650;
    letter-spacing: -0.015em;
  }

  .tacet-pricing-narrative-page .tacet-credit-options p,
  .tacet-pricing-narrative-page .tacet-credit-cards p {
    font-family: var(--pricing-narrative-font);
    font-size: 0.9375rem;
    line-height: 1.65;
  }

  .tacet-pricing-narrative-page #pricing-grid > div:first-child,
  .tacet-pricing-narrative-page #faq > div:first-child {
    box-sizing: border-box;
    width: var(--pricing-narrative-rail);
    max-width: var(--pricing-narrative-rail);
    padding: var(--pricing-narrative-space) 0 var(--space-8) !important;
  }

  .tacet-pricing-narrative-page #pricing-grid h2,
  .tacet-pricing-narrative-page #faq h2 {
    max-width: 20ch;
    margin: 0;
    color: var(--foreground) !important;
    font-family: var(--pricing-narrative-font);
    font-size: var(--pricing-narrative-heading) !important;
    font-weight: 400 !important;
    font-variation-settings: 'wght' 400;
    letter-spacing: -0.035em !important;
    line-height: 1.08 !important;
    text-transform: none;
  }

  .tacet-pricing-narrative-page #pricing-grid > div:first-child > p,
  .tacet-pricing-narrative-page #faq details summary,
  .tacet-pricing-narrative-page #faq details p {
    font-family: var(--pricing-narrative-font);
  }

  .tacet-pricing-narrative-page #pricing-grid > div:first-child > p {
    max-width: 54ch;
    margin-top: var(--space-4);
    font-size: 1.0625rem !important;
    line-height: 1.65 !important;
  }

  .tacet-pricing-narrative-page [data-pricing-offer] {
    font-family: var(--pricing-narrative-font);
  }

  .tacet-pricing-narrative-page [data-offer-price] {
    font-weight: 800;
    font-variation-settings: 'wght' 800;
    font-variant-numeric: tabular-nums;
  }

  .tacet-pricing-narrative-page .tacet-credit-tblwrap,
  .tacet-pricing-narrative-page .tacet-credit-buys,
  .tacet-pricing-narrative-page .tacet-credit-options article,
  .tacet-pricing-narrative-page .tacet-credit-cards .card {
    scroll-margin-top: var(--space-12);
  }
}

@media (hover: hover) and (pointer: fine) {
  .tacet-pricing-narrative-page :is(h1, h2):hover .heading-dot {
    opacity: 1;
    transform: translateY(-0.04em) scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tacet-pricing-narrative-page .heading-dot {
    transform: none;
    transition: none;
  }

  .tacet-pricing-narrative-page :is(h1, h2):hover .heading-dot {
    transform: none;
  }
}

@media (forced-colors: active) {
  .tacet-pricing-narrative-page .heading-dot {
    background-image: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
}

@media (max-width: 850px) {
  .tacet-pricing-narrative-page {
    --pricing-narrative-gutter: 64px;
  }
}

@media (max-width: 880px) {
  .tacet-pricing-narrative-page .tacet-credit-hero {
    gap: var(--space-8);
  }
}

@media (max-width: 560px) {
  .tacet-pricing-narrative-page {
    --pricing-narrative-gutter: 40px;
    --pricing-narrative-heading: clamp(2rem, 9vw, 2.75rem);
    --pricing-narrative-space: clamp(var(--space-16), 16vw, var(--space-20));
  }

  .tacet-pricing-narrative-page .tacet-credit-h1 {
    font-size: clamp(3.25rem, 12vw, 4.5rem);
  }

  .tacet-pricing-narrative-page .tacet-credit-buys {
    padding: var(--space-4) var(--space-4) var(--space-2);
  }

  .tacet-pricing-narrative-page .tacet-credit-buys li {
    align-items: baseline;
    gap: var(--space-2);
    font-size: 0.8125rem;
  }

  .tacet-pricing-narrative-page #pricing-grid > div:first-child,
  .tacet-pricing-narrative-page #faq > div:first-child {
    padding-bottom: var(--space-6) !important;
  }
}