/* Pricing: the configurator and the plan cards.

   Self-contained, with no var() and no dependency on .container. pricing.html
   is on the older assets/css design system, which shares no custom properties
   with assets/premium and has no .container rule at all — so the first
   version rendered flush against the left edge with every colour falling back
   to nothing. The footer had the same problem and was solved the same way.

   The job of this page is to let someone answer "what would this cost me"
   without talking to anyone. So the calculator comes first and the table
   second — a table alone makes people guess which row is theirs. */

.pricing-page {
  width: min(78ch, calc(100% - 48px));
  margin-inline: auto;
  padding-block: 34px 72px;
}
@media (max-width: 680px) {
  .pricing-page { width: calc(100% - 32px); padding-block: 22px 52px; }
}


/* ── the configurator ───────────────────────────────────────────────────── */

.fit {
  margin: 28px 0 44px;
  padding: 24px 26px 26px;
  border: 1px solid #d5e2ee;
  border-radius: 16px;
  background: #f7fafd;
}
.fit h2 { margin: 0 0 6px; font-size: 20px; letter-spacing: -.015em; }
.fit-lede { margin: 0 0 22px; font-size: 14.5px; color: #4e647b; }

.fit-controls { display: grid; gap: 18px; }
@media (min-width: 720px) {
  .fit-controls { grid-template-columns: repeat(3, 1fr); gap: 22px; }
}

.fit-field { display: grid; gap: 6px; }
.fit-field label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #6b8095;
}
.fit-field output {
  font-size: 19px;
  font-weight: 650;
  color: #081f38;
  font-variant-numeric: tabular-nums;
}
.fit-field input[type="range"] {
  width: 100%;
  accent-color: #0066ff;
  /* 44px of vertical target on a control that is visually 4px tall. */
  min-height: 24px;
}
.fit-field input[type="range"]:focus-visible {
  outline: 2px solid #0066ff;
  outline-offset: 4px;
}

.fit-result {
  margin-top: 24px;
  padding: 18px 20px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #d5e2ee;
}
.fit-result p { margin: 0 0 7px; font-size: 14.5px; color: #4e647b; }
.fit-result p:last-child { margin-bottom: 0; }
.fit-minutes b, .fit-plan b { color: #081f38; font-weight: 650; }
.fit-monthly {
  font-size: 15px;
}
.fit-monthly b {
  font-size: 30px;
  font-weight: 700;
  color: #081f38;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.fit-monthly span { color: #6b8095; font-size: 13px; }
.fit-first { padding-top: 9px; border-top: 1px solid #d5e2ee; margin-top: 11px; }
.fit-first span { color: #081f38; font-weight: 650; }
.fit-note {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: #6b8095;
}

/* ── plan cards ─────────────────────────────────────────────────────────── */

.plans {
  display: grid;
  gap: 14px;
  margin: 18px 0 32px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.plan {
  position: relative;
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 20px 20px 22px;
  border: 1px solid #d5e2ee;
  border-radius: 14px;
  background: #fff;
}
/* One highlighted card, not three. If everything is recommended, nothing is. */
.plan--popular { border-color: #0066ff; box-shadow: 0 0 0 1px #0066ff; }
.plan-tag {
  position: absolute;
  top: -10px; left: 20px;
  background: #0066ff;
  color: #fff;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .03em;
  padding: 3px 9px;
  border-radius: 999px;
}
.plan h3 { margin: 0; font-size: 16px; letter-spacing: -.01em; }
.plan-price { margin: 4px 0 0; }
.plan-price b {
  font-size: 30px;
  font-weight: 700;
  color: #081f38;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}
.plan-price span { font-size: 13.5px; color: #6b8095; }
.plan-minutes { margin: 0; font-size: 14px; color: #081f38; font-weight: 600; }
.plan-rate { margin: 0 0 4px; font-size: 12.5px; color: #6b8095; }
.plan-fits { margin: 6px 0 0; font-size: 13.5px; line-height: 1.6; color: #4e647b; }
.plan-example {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: #6b8095;
  font-style: italic;
}
.plan .button { margin-top: 12px; justify-self: start; }

.plans--home .plan { padding-bottom: 20px; }

.pricing-note {
  font-size: 12.5px;
  line-height: 1.65;
  color: #6b8095;
  max-width: 68ch;
}

@media (prefers-reduced-motion: reduce) {
  .plan { transition: none; }
}

/* The plan button. Styled here rather than borrowing .button, because the two
   design systems define that differently and the cards appear on both. */
.plan-cta {
  margin-top: 14px;
  justify-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #0066ff;
  border-radius: 9px;
  background: #fff;
  color: #0066ff;
  font-size: 13.5px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}
.plan-cta:hover { background: #0066ff; color: #fff; }
.plan-cta:focus-visible { outline: 2px solid #0066ff; outline-offset: 3px; }
.plan--popular .plan-cta { background: #0066ff; color: #fff; }
.plan--popular .plan-cta:hover { background: #0052cc; border-color: #0052cc; }

/* Every card the same height, so the buttons line up. The badge on one card
   was pushing its content down and leaving the row visibly crooked. */
.plan { min-height: 100%; }
.plans { align-items: stretch; }
.plan-cta { margin-top: auto; }
.plan--popular { padding-top: 26px; }

/* ── the free trial ──────────────────────────────────────────────────────
   Above the calculator and above the plans, because "what does it cost"
   matters less than "can I see it work first", and the second question is
   the one that stops people. */
.trial {
  margin: 26px 0 40px;
  padding: 26px 28px 28px;
  border: 2px solid #0066ff;
  border-radius: 16px;
  background: #f5f9ff;
}
.trial-kicker {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #0066ff;
}
.trial h2 { margin: 0 0 10px; font-size: 25px; letter-spacing: -.02em; line-height: 1.2; }
.trial-lede { margin: 0 0 16px; font-size: 15px; line-height: 1.65; color: #4e647b; }
.trial-terms { margin: 0 0 20px; padding-left: 20px; }
.trial-terms li { font-size: 14px; line-height: 1.7; color: #081f38; margin-bottom: 5px; }
.trial-terms li::marker { color: #0066ff; }
.trial-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  border-radius: 10px;
  background: #0066ff;
  color: #fff;
  border: 1px solid #0066ff;
  font-size: 15px;
  font-weight: 650;
  text-decoration: none;
}
.trial-cta:hover { background: #0052cc; border-color: #0052cc; }
.trial-cta:focus-visible { outline: 2px solid #0066ff; outline-offset: 3px; }
.trial-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.6; color: #6b8095; }

.plan-prepay { margin: 0 0 2px; font-size: 12px; color: #6b8095; }

/* "What else answers your phone". A plain comparison table; the anchoring is
   done by the order of the rows, not by the styling, and our row is marked
   only so it can be found, not so it stands out as the answer. The row below
   ours is cheaper and has to be just as readable. */
.alt-wrap {
  overflow-x: auto;
  margin: 18px 0 26px;
  border: 1px solid #dbe6f0;
  border-radius: 12px;
}
table.alt {
  width: 100%;
  min-width: 540px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
}
table.alt thead th {
  padding: 11px 16px;
  text-align: left;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #5d738b;
  background: #f6f9fc;
  border-bottom: 1px solid #dbe6f0;
  white-space: nowrap;
}
table.alt th[scope="row"],
table.alt td {
  padding: 13px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #eef3f8;
  font-weight: 400;
  color: #2f4a63;
}
table.alt th[scope="row"] { color: #0b2743; white-space: nowrap; }
table.alt td.num {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #0b2743;
}
table.alt tbody tr:last-child th,
table.alt tbody tr:last-child td { border-bottom: 0; }
table.alt strong { font-weight: 700; color: #0b2743; }
@media (max-width: 680px) {
  table.alt { font-size: 14px; }
  table.alt thead th, table.alt th[scope="row"], table.alt td { padding: 11px 13px; }
}

/* The trial, said twice on the home page: once in the hero where people
   arrive, once under the plans where the price anxiety is. Quiet both times.
   A free trial shouted at somebody who has not yet decided they have the
   problem reads as a sales page; the same sentence under three monthly
   figures reads as an answer. */
.hero-trial {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: #5d738b;
}
.hero-trial a {
  color: #0057d8;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid #b9d3f5;
}
.hero-trial a:hover { border-bottom-color: #0057d8; }
.pricing-trial {
  margin: 4px 0 18px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #5d738b;
}
.pricing-trial a { color: #0057d8; font-weight: 600; }