/* The pricing page: one plan, its rates as a plain table, an estimator, what
   is included and the questions people ask. The page's bands, words, asks and
   questions are optizmo.css's and type.css's; this sheet holds what is the
   pricing page's own. Every price is set in tabular figures, so columns of them
   line up. */

/* Each band's colour, from ACCESS's warm to PostLever's blue as the band in the
   OPTIZMO hero runs, and the included million in a neutral. The rate table's
   swatches, the estimator's slider and its breakdown all use them, so a band is
   the same colour wherever it is named. */
:root {
  --band-0: #C3CAD5;
  --band-1: #FB8C5A;
  --band-2: color-mix(in oklab, #F7748F, #8B8FF6);
  --band-3: #2563EB;
}

/* The OPTIZMO hero's ground: its tint, and the app canvas's dot grid, faint and fading out. */
.pricing-top {
  position: relative;
  overflow: hidden;
  padding-block: 7rem var(--space-16);
  background: color-mix(in srgb, var(--paper-band) 60%, var(--paper-ground));
}
.pricing-top::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Graph paper, as Deliverability's chart sits on: fine lines every 16px, stronger every 80px. */
  --paper-minor: rgba(148, 163, 184, 0.08);
  --paper-major: rgba(148, 163, 184, 0.16);
  background-image:
    linear-gradient(90deg, var(--paper-major) 1px, transparent 1px),
    linear-gradient(180deg, var(--paper-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-minor) 1px, transparent 1px),
    linear-gradient(180deg, var(--paper-minor) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
  background-position: center 0;
  -webkit-mask-image: radial-gradient(55% 70% at 70% 45%, #000 0%, rgba(0, 0, 0, 0.45) 55%, transparent 100%);
  mask-image: radial-gradient(55% 70% at 70% 45%, #000 0%, rgba(0, 0, 0, 0.45) 55%, transparent 100%);
}
.pricing-top-grid {
  position: relative;
  display: grid;
  gap: var(--space-12);
}
@media (min-width: 1080px) {
  .pricing-top-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
    gap: var(--space-16);
    align-items: center;
  }
}

/* ---- the rate chart ---- */

.rate-chart {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 30rem;
  border-radius: 12px;
  cursor: crosshair;
  /* Sideways drags read the chart; up and down still scroll the page */
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.rate-chart:focus { outline: none; }
.rate-chart:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 8px; }
.rate-chart-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-body); }
.rate-chart-caption { font-size: 12px; font-weight: 600; fill: var(--color-text-muted); }
.rate-chart-axis { stroke: var(--paper-line-hi); stroke-width: 1; }
.rate-chart-guide { stroke: var(--paper-line-hi); stroke-width: 1; stroke-dasharray: 2 3; }
.rate-chart-line { stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.rate-chart-point circle { fill: var(--paper-ground); stroke: var(--color-text); stroke-width: 2; }
.rate-chart-rate { font-size: 13px; font-weight: 600; fill: var(--color-text); font-variant-numeric: tabular-nums; }
.rate-chart-volume { font-size: 12px; fill: var(--color-text-muted); font-variant-numeric: tabular-nums; }
/* Drawn in once from the left, each point arriving as the line reaches it. */
.rate-chart.is-armed .rate-chart-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.rate-chart.is-armed .rate-chart-area,
.rate-chart.is-armed .rate-chart-point { opacity: 0; }
.rate-chart.is-drawn .rate-chart-line { stroke-dashoffset: 0; transition: stroke-dashoffset 1100ms cubic-bezier(0.33, 1, 0.68, 1); }
.rate-chart.is-drawn .rate-chart-area { opacity: 1; transition: opacity 700ms ease 500ms; }
.rate-chart.is-drawn .rate-chart-point { opacity: 1; transition: opacity 300ms ease calc(var(--at) * 900ms + 150ms); }
/* The readout: a guide and a dot on the curve at the volume under the pointer, and a tag beside
   them; there only while the reader is on the chart. */
.rate-chart-readout,
.rate-chart-tag { opacity: 0; pointer-events: none; }
.rate-chart.is-reading .rate-chart-readout,
.rate-chart.is-reading .rate-chart-tag { opacity: 1; }
.rate-chart-cursor { stroke: var(--color-text); stroke-opacity: 0.3; stroke-width: 1; vector-effect: non-scaling-stroke; }
.rate-chart-dot { fill: var(--paper-ground); stroke: var(--color-accent-strong); stroke-width: 2.5; }
.rate-chart-tag {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  gap: 1px;
  padding: 6px 10px;
  border: 1px solid var(--paper-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 20px -8px rgba(30, 41, 80, 0.28);
  font-size: 0.8125rem;
  line-height: 1.35;
  white-space: nowrap;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.rate-chart-tag strong { font-weight: var(--font-semibold); }
.rate-chart-tag-total { color: var(--color-text-muted); }
.rate-chart-tag [hidden] { display: none; }
.pricing-title { margin: 0 0 var(--space-4); text-wrap: balance; }
.pricing-lead {
  max-width: 38rem;
  margin: 0;
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--color-text-muted);
  text-wrap: pretty;
}
/* The early-access terms, said once and quietly, under the claim rather than in a box. */
.pricing-early {
  max-width: 38rem;
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
}
.pricing-top .cta-row { margin-top: var(--space-6); }

/* ---- the plan ---- */

.plan {
  display: grid;
  gap: var(--space-12);
}
@media (min-width: 1080px) {
  .plan {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-16);
    align-items: start;
  }
}
.plan-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  margin: var(--space-6) 0 var(--space-1);
}
.plan-amount {
  font-family: var(--font-heading);
  font-weight: var(--font-extrabold);
  font-size: clamp(2.75rem, 5vw, 3.75rem);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}
.plan-per { font-size: var(--text-lg); color: var(--color-text-muted); }
.plan-included { margin: 0; font-size: var(--text-lg); color: var(--color-text); }
.plan-terms {
  margin: var(--space-8) 0 0;
  padding: var(--space-6) 0 0;
  list-style: none;
  border-top: 1px solid var(--paper-line-hi);
  display: grid;
  gap: var(--space-3);
  color: var(--color-text-muted);
}
.plan-terms li {
  position: relative;
  padding-left: 1.6rem;
  line-height: 1.5;
}
/* A small tick in the accent before each term. */
.plan-terms li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.45em;
  width: 0.7rem;
  height: 0.38rem;
  border-left: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: rotate(-45deg);
}

.rates {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.rates caption {
  caption-side: bottom;
  padding-top: var(--space-4);
  text-align: left;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
}
.rates th,
.rates td {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--paper-line-hi);
  text-align: left;
  font-weight: var(--font-regular, 400);
}
.rates thead th {
  padding-top: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-muted);
}
.rates tbody th { color: var(--color-text); }
.swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: var(--space-3);
  border-radius: 50%;
  vertical-align: 0.05em;
}
.swatch-0 { background: var(--band-0); }
.swatch-1 { background: var(--band-1); }
.swatch-2 { background: var(--band-2); }
.swatch-3 { background: var(--band-3); }
.swatch-none { background: none; box-shadow: inset 0 0 0 1.5px var(--band-0); }
.rates td,
.rates thead th:last-child { text-align: right; }
.rates tbody td { font-weight: var(--font-semibold); color: var(--color-text); }
.rates-enterprise a { color: var(--color-accent); text-decoration: none; }
.rates-enterprise a:hover { color: var(--color-accent-strong); }

/* ---- the estimator ---- */

.estimator {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-4);
}
@media (min-width: 900px) {
  .estimator {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-12);
    align-items: start;
  }
}
.estimator-label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: var(--font-semibold);
}
.estimator-field {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 22rem;
  padding: 0 var(--space-4);
  background: var(--paper-ground);
  border: 1px solid var(--paper-line-hi);
  border-radius: var(--radius-md);
}
.estimator-field:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent); }
.estimator-field input {
  flex: 1;
  min-width: 0;
  padding: 0.8rem 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  outline: none;
}
.estimator-field span { font-size: var(--text-sm); color: var(--color-text-muted); white-space: nowrap; }

/* The slider: its track in the bands' colours, each where the log scale puts it (estimator.js sets
   --track), and a white thumb ringed in ink. */
.estimator-slider {
  width: 100%;
  margin: var(--space-8) 0 var(--space-2);
  appearance: none;
  background: transparent;
  cursor: pointer;
}
.estimator-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: var(--track, var(--paper-line-hi));
}
.estimator-slider::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--track, var(--paper-line-hi));
}
.estimator-slider::-webkit-slider-thumb {
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border-radius: 50%;
  border: 2px solid var(--color-text);
  background: var(--paper-ground);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.15);
}
.estimator-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--color-text);
  background: var(--paper-ground);
}
.estimator-slider:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 6px; border-radius: 4px; }
/* The scale under it: the log track, 500k to 50M, puts 2M and 10M at these places. */
.estimator-scale {
  position: relative;
  height: 1.25rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.estimator-scale span { position: absolute; top: 0; }
.estimator-scale span:nth-child(1) { left: 0; }
.estimator-scale span:nth-child(2) { left: 30.1%; transform: translateX(-50%); }
.estimator-scale span:nth-child(3) { left: 65.1%; transform: translateX(-50%); }
.estimator-scale span:nth-child(4) { right: 0; }

.estimator-result {
  padding-top: var(--space-6);
  border-top: 2px solid var(--color-text);
}
@media (min-width: 900px) {
  .estimator-result { padding-top: 0; border-top: 0; padding-left: var(--space-12); border-left: 1px solid var(--paper-line-hi); }
}
.estimator-caption {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-muted);
}
.estimator-total {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  margin: var(--space-2) 0 var(--space-4);
  font-family: var(--font-heading);
  font-weight: var(--font-extrabold);
  font-size: clamp(2.25rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}
.estimator-total .plan-per { font-family: var(--font-body); font-weight: var(--font-regular, 400); letter-spacing: 0; }
.estimator-lines { margin: 0; }
/* Each line: its band's dot, what it is, what it costs, and under them a hairline bar of its share of the total. */
.estimator-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-4);
  row-gap: 6px;
  align-items: baseline;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--paper-line-hi);
  font-variant-numeric: tabular-nums;
}
.estimator-line[hidden] { display: none; }
.estimator-line dt { color: var(--color-text-muted); }
.estimator-line dd { margin: 0; font-weight: var(--font-semibold); white-space: nowrap; }
.estimator-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: var(--space-2);
  border-radius: 50%;
  vertical-align: 0.1em;
}
.estimator-share {
  grid-column: 1 / -1;
  height: 3px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--paper-line-hi) 60%, transparent);
  overflow: hidden;
}
.estimator-share > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  transform-origin: left center;
  transition: transform 320ms cubic-bezier(0.33, 1, 0.68, 1);
}
@media (prefers-reduced-motion: reduce) {
  .estimator-share > span { transition: none; }
}
.estimator-rate {
  margin: var(--space-4) 0 0;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.estimator-rate strong { color: var(--color-text); font-weight: var(--font-semibold); }
.estimator-note {
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
}
[data-enterprise] .link-more { margin-top: var(--space-4); }

/* ---- what's included ---- */

.included {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-4);
}
.included ul { margin: 0; padding: 0; list-style: none; }
/* The three things every account is for, as a row a step larger than the features under it. */
.included .included-core {
  display: grid;
  gap: var(--space-3) var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--paper-line-hi);
}
@media (min-width: 768px) {
  .included .included-core { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.included-core li {
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  font-size: var(--text-lg);
  line-height: 1.35;
}
.included-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-6);
}
@media (min-width: 768px) {
  .included-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1080px) {
  .included-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.included-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text);
  line-height: 1.35;
}
/* The homepage feature grid's icons, in the accent on a pale tile of it. */
.included-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--color-accent) 9%, var(--paper-ground));
  color: var(--color-accent);
}
.included-icon svg { width: 18px; height: 18px; }