/* Pricing group: /pricing and /calculator.
   Loaded after every shared layer (tokens, components, site, pages, product),
   so it only refines them. Every colour is a token. Plan numbers never live
   here; they come from accounts.PLANS and billing.PACKS through the templates. */

/* ================================================================ /pricing */

/* Hero: short, centred, plans start right under it. */
.pricehero { padding-bottom: clamp(1.75rem, 1rem + 2.5vw, 3rem); }
.pricehero h1 { font-size: clamp(2.375rem, 1.5rem + 3.4vw, 4.25rem); max-width: 14em; }
.pricehero .lede { max-width: 38rem; }
.pricehero .ticks { justify-content: center; }

/* The workload question above the plans. */
.loadq { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin-bottom: var(--space-8); text-align: center; }
.loadq [data-load-note] { min-height: 1.25rem; }
@media (max-width: 599px) {
  .loadq .loadpick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .loadq .loadpick button { padding-inline: var(--space-2); font-size: var(--text-sm); }
}

/* Four plans never leave one card on its own row: one column on phones,
   two by two until four fit without squeezing the buttons, then one row. */
@media (min-width: 600px) { #plans .plans2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { #plans .plans2 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Plan cards: price first, then the hours it buys. The cut corner clips the
   shared shadow to grey squares at the rounded corners, so the highlighted
   card relies on its blue border alone. */
.plan2--rec { box-shadow: none; }
.plan2__price span { font-size: var(--text-sm); }
.plan2[id] { scroll-margin-top: calc(var(--header-h) + var(--space-6)); }
.plan2__hrs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.4rem; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); background: var(--bg-subtle); border: var(--border-w) solid var(--border-subtle);
  transition: background var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default); }
.plan2__hrs b { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--font-extrabold); letter-spacing: -0.02em; line-height: 1.2; color: var(--text-strong); }
.plan2__hrs span { font-size: var(--text-sm); color: var(--text-muted); }
.plan2__hrs small { flex-basis: 100%; margin-top: 0.15rem; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-subtle); }
.plan2--rec .plan2__hrs { background: var(--accent-subtle); border-color: var(--accent-border); }
.plan2--rec .plan2__hrs b { color: var(--accent-text); }
.plan2 ul { margin-top: var(--space-1); }
.plan2__buy { display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: calc(-1 * var(--space-2)) !important; text-align: center; text-wrap: balance; }

/* A quiet way into the calculator, under the plans. */
.calcnudge { display: flex; align-items: center; gap: var(--space-4) var(--space-5); margin-top: var(--space-8); padding: var(--space-4) var(--space-5);
  border: var(--border-w) dashed var(--border-strong); border-radius: var(--radius-xl); }
.calcnudge p { flex: 1; min-width: 0; color: var(--text-muted); font-size: var(--text-sm); line-height: 1.5; }
.calcnudge p b { color: var(--text-strong); font-weight: var(--font-semibold); }
.calcnudge .s-btn { flex: none; }
@media (max-width: 639px) {
  .calcnudge { flex-wrap: wrap; align-items: flex-start; }
  .calcnudge p { flex-basis: calc(100% - 4rem); }
  .calcnudge .s-btn { width: 100%; }
}

/* What is free after the first charge. */
.freelist { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.freelist li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.freelist li > span:last-child { color: var(--text-muted); line-height: 1.55; padding-top: 0.1rem; }
.freelist b { display: block; color: var(--text-strong); font-weight: var(--font-semibold); }

/* One recording, drawn as a receipt. */
.receipt { display: flex; flex-direction: column; gap: var(--space-5); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-md); min-width: 0; }
.receipt__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.receipt__head .tc { color: var(--text-subtle); }
.receipt__head span:last-child { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.receipt__tracks { display: flex; flex-direction: column; gap: var(--space-2); }
.receipt__tracks > span { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-subtle); }
.receipt__tracks > span + .clips + span { margin-top: var(--space-2); }
.receipt__rows { display: flex; flex-direction: column; }
.receipt__rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); border-top: var(--border-w) dashed var(--border); }
.receipt__rows dt { font-size: var(--text-sm); color: var(--text-muted); }
.receipt__rows dd { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-strong); white-space: nowrap; }
.receipt__rows .receipt__total { margin-top: var(--space-1); padding-top: var(--space-4); border-top: var(--border-w-thick) solid var(--text-strong); }
.receipt__total dt { font-weight: var(--font-semibold); color: var(--text-strong); }
.receipt__total dd { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--font-extrabold); letter-spacing: -0.02em; color: var(--accent-text); }

/* Every limit, one table. The recommended plan's column is tinted; the
   limit names stay put while the plans scroll on narrow screens. */
.ptable { background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius-xl); overflow: hidden; }
.ptable .s-table-wrap:focus-visible { outline: var(--border-w-thick) solid var(--accent); outline-offset: -2px; }
.ptable table { min-width: 42rem; }
.ptable th, .ptable td { padding: var(--space-4) var(--space-5); }
.ptable thead th { vertical-align: bottom; text-transform: none; letter-spacing: 0; white-space: normal; padding-top: var(--space-5); }
.ptable thead th b { display: block; font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--font-bold); letter-spacing: -0.01em; color: var(--text-strong); }
.ptable thead th span:not(.s-sr) { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--font-normal); color: var(--text-subtle); white-space: nowrap; }
.ptable tbody th[scope="row"] { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--font-medium); text-transform: none; letter-spacing: 0; color: var(--text-muted); }
.ptable tbody tr:last-child th { border-bottom: 0; }
.ptable td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ptable .is-rec { background: color-mix(in srgb, var(--accent-subtle) 70%, transparent); }
.ptable thead .is-rec { box-shadow: inset 0 3px 0 var(--accent); }
.ptable thead .is-rec b { color: var(--accent-text); }
.ptable tbody tr:hover { background: transparent; }
.ptable tbody tr:hover > * { background: var(--surface-hover); }
.ptable__yes { display: inline-flex; align-items: center; gap: 0.35rem; }
.ptable__yes svg { color: var(--success); }
.ptable__no { color: var(--text-subtle); }
.ptable__link { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: var(--font-medium); }
.ptable tbody th[scope="row"], .ptable tbody td { border-bottom-color: var(--border-subtle); }
@media (max-width: 1023px) {
  .ptable table { min-width: 36rem; }
  .ptable th, .ptable td { padding: var(--space-3) var(--space-3); }
  .ptable th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--border); padding-left: var(--space-4); }
}
@media (max-width: 767px) {
  .ptable tbody th[scope="row"] { width: 7.5rem; min-width: 7.5rem; white-space: normal; line-height: 1.35; }
}

/* Minute packs: three cards, priced by the hour. */
.packs3 { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .packs3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pack3 { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-6); min-width: 0;
  background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius-xl); color: var(--text);
  transition: border-color var(--duration-fast) var(--ease-default), transform var(--duration-base) var(--ease-default), box-shadow var(--duration-base) var(--ease-default); }
.pack3:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.pack3:focus-visible { outline: var(--border-w-thick) solid var(--accent); outline-offset: 3px; border-radius: var(--radius-xl); }
.pack3__h { font-family: var(--font-display); font-size: clamp(1.625rem, 1.4rem + 0.8vw, 2rem); font-weight: var(--font-extrabold); letter-spacing: -0.03em; line-height: 1.1; color: var(--text-strong); }
.pack3__m { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-subtle); }
.pack3__m { margin-bottom: var(--space-4); }
.pack3__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--space-3); margin-top: auto; padding-top: var(--space-4); border-top: var(--border-w) solid var(--border); }
.pack3__price b { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--font-extrabold); letter-spacing: -0.03em; color: var(--text-strong); }
.pack3__price span { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.pack3__go { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: var(--space-3); font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--accent-text); }
.pack3__go svg { transition: transform var(--duration-fast) var(--ease-default); }
.pack3:hover .pack3__go svg { transform: translateX(3px); }

/* ============================================================= /calculator */

.calchero .crumbs { margin-bottom: calc(-1 * var(--space-2)); }
.calchero h1 { max-width: 14em; }

/* Inputs on the left, the answer on the right (it stays in view on desktop). */
.calcgrid { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 1024px) {
  .calcgrid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-8); }
  .calcgrid .calcout { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
}
.calcform { gap: var(--space-6); }

/* Examples that fill the inputs in one tap: three across from 480px (never two
   plus an orphan), stacked on phones. */
.calcpresets { display: grid; gap: var(--space-2); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 479px) { .calcpresets { grid-template-columns: 1fr; } }
.calcpreset { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 3.5rem; padding: var(--space-2) var(--space-4);
  text-align: left; background: var(--surface); color: var(--text); border: var(--border-w) solid var(--border); border-radius: var(--radius-lg); cursor: pointer;
  transition: border-color var(--duration-instant) var(--ease-default), background var(--duration-instant) var(--ease-default); }
.calcpreset:hover { border-color: var(--border-strong); }
.calcpreset b { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-strong); }
.calcpreset small { font-size: var(--text-xs); color: var(--text-subtle); line-height: 1.35; }
.calcpreset[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-subtle); box-shadow: inset 0 0 0 1px var(--accent); }
.calcpreset[aria-pressed="true"] small { color: var(--text-muted); }

/* A number with its unit inside the box. */
.calcnum { position: relative; }
.calcnum .s-input { padding-right: 5.5rem; font-family: var(--font-mono); font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.calcnum__unit { position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%); font-size: var(--text-sm); color: var(--text-subtle); pointer-events: none; }
.calcform .s-range { --fill: 0%; height: 2.75rem; }
.calcform .s-range::-webkit-slider-runnable-track { background: linear-gradient(var(--accent), var(--accent)) 0 / var(--fill) 100% no-repeat, var(--bg-muted); }
.calcform .s-range::-moz-range-progress { height: 0.375rem; border-radius: var(--radius-full); background: var(--accent); }
.calcform .s-range::-webkit-slider-thumb { width: 1.375rem; height: 1.375rem; margin-top: -0.5rem; }

/* How many, and how often. */
.calcrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.stepper { display: inline-flex; align-items: stretch; }
.stepper .s-input { width: 4.75rem; height: 3.125rem; border-radius: 0; text-align: center; font-family: var(--font-mono); font-size: var(--text-lg);
  -moz-appearance: textfield; appearance: textfield; }
.stepper .s-input::-webkit-inner-spin-button, .stepper .s-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper__btn { width: 3.125rem; height: 3.125rem; display: grid; place-items: center; border: var(--border-w) solid var(--border); background: var(--surface);
  color: var(--text); font-size: var(--text-xl); line-height: 1; cursor: pointer; transition: background var(--duration-instant) var(--ease-default); }
.stepper__btn:hover { background: var(--surface-hover); }
.stepper__btn:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); border-right: 0; }
.stepper__btn:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; border-left: 0; }
.calcper { padding: 0.1875rem; }
.calcper button { min-height: 2.75rem; padding-inline: var(--space-4); font-size: var(--text-sm); }

/* The month, added up, right under the inputs. On phones and tablets the answer
   sits below the form, so a link jumps to it. */
.calcsum { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg);
  background: var(--bg-subtle); border: var(--border-w) solid var(--border-subtle); }
.calcsum .card2__icon { width: 2.25rem; height: 2.25rem; }
.calcsum p { flex: 1 1 9rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); min-width: 0; }
.calcsum p > span:first-child { flex-basis: 100%; font-size: var(--text-xs); color: var(--text-subtle); }
.calcsum b { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--font-extrabold); letter-spacing: -0.015em; line-height: 1.2; color: var(--text-strong); }
.calcsum .s-mono { font-size: var(--text-2xs); color: var(--text-subtle); white-space: nowrap; }
.calcsum__fit { margin-left: auto; display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.75rem; font-size: var(--text-sm); color: var(--text-muted); }
.calcsum__fit b { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--accent-text); }
.calcsum__fit svg { color: var(--accent-text); transform: rotate(90deg); }
@media (min-width: 1024px) { .calcsum__fit { display: none; } }

/* Options as full-width rows: big targets, a clear checked state. */
.calcopts { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.calcopts legend { padding: 0; margin-bottom: var(--space-2); }
.calcopts .s-check { display: flex; width: 100%; padding: var(--space-3) var(--space-4); border: var(--border-w) solid var(--border); border-radius: var(--radius-lg);
  color: var(--text); transition: border-color var(--duration-instant) var(--ease-default), background var(--duration-instant) var(--ease-default); }
.calcopts .s-check:hover { border-color: var(--border-strong); }
.calcopts .s-check:has(input:checked) { border-color: var(--accent); background: var(--accent-subtle); }
.calcopts .s-check:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--accent); }
.calcopts .s-check input:focus-visible { outline: none; }

/* The answer. */
.calcout { gap: var(--space-4); box-shadow: var(--shadow-lg); }
.calcout #rec-tier { margin-top: calc(-1 * var(--space-2)); }
.calcout__price { display: flex; align-items: baseline; gap: 0.4rem; margin-top: calc(-1 * var(--space-2)); }
.calcout__price b { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--font-extrabold); letter-spacing: -0.03em; color: var(--text-strong); }
.calcout__price span { font-size: var(--text-sm); color: var(--text-subtle); }
.hmeter { height: 0.75rem; border-radius: var(--radius-full); background: var(--bg-muted); overflow: hidden; }
.hmeter i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width var(--duration-base) var(--ease-default); }
.hmeter.is-over i { background: repeating-linear-gradient(135deg, var(--cut) 0 8px, color-mix(in srgb, var(--cut) 75%, var(--surface)) 8px 16px); }
.hmeter__legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-4); margin-top: calc(-1 * var(--space-2));
  font-size: var(--text-sm); color: var(--text-muted); }
.hmeter__legend b { color: var(--text-strong); font-weight: var(--font-semibold); }
.calcout .note2 { color: var(--text); }
.calcout .kv { padding-top: var(--space-4); }
.calcout .topicnote { background: var(--cut-subtle); }
.calcout .topicnote svg { color: var(--cut-text); }
.calcout__cta .s-btn { flex: 1 1 12rem; }
.calcout__cta .s-btn--primary { order: 0; }

/* The plan values table, with the current answer's row marked. */
.calctable { gap: var(--space-4); }
.calctable tr.is-fit > * { background: var(--accent-subtle); }
.calctable tr.is-fit th { color: var(--accent-text); box-shadow: inset 3px 0 0 var(--accent); padding-left: var(--space-3); }
.calctable .tbl2 th:first-child { padding-left: var(--space-3); }
.calctable .tbl2 td:last-child, .calctable .tbl2 th:last-child { padding-right: var(--space-3); }
.numlist > li > span { display: block; padding-top: 0.2rem; }
.calctable tbody tr:last-child th { border-bottom: 0; }
@media (max-width: 479px) {
  .calcform, .calcout { padding: var(--space-5) var(--space-4); }
  .calcpreset { min-height: 3rem; }
  .calcrow { flex-direction: column; align-items: stretch; }
  .stepper .s-input { flex: 1; width: auto; }
  .calcper { display: flex; }
  .calcper button { flex: 1; }
  .calcsum .card2__icon { display: none; }
  .calcsum__fit { flex-basis: 100%; justify-content: space-between; margin-left: 0; min-height: 2.75rem; padding-top: var(--space-2); border-top: var(--border-w) dashed var(--border); }
  .calctable { padding: var(--space-5) var(--space-4); }
  .calctable__kept { display: none; }
  .calctable .tbl2 th, .calctable .tbl2 td { padding-inline: var(--space-2); }
}