/*
 * app/web/css/pricing.css — the pricing page (design/pages/pricing/*, generated by its gen.mjs:
 * default.html at 1440 and phone.html at 390, their <style> blocks made fluid and token-only).
 *
 * Loads after landing.css, the shared marketing shell, which owns the masthead and phone menu,
 * the .g12 grid, bands, section type and the footer; everything here is this page's own layout:
 * the title band and its banner slot, the plan sheet (a ruled row of columns, never cards), the
 * minute band with the estimate, the add-on register, the close band and the add-on dialog.
 * Phone rules key on [data-layout='mobile'] (device-boot.js), never on a width query. No colour
 * literal lives here; every value is a token from theme.css.
 */


/* the menu's Sign out is a <button> among links: the same row, not the app's button chrome */
.site-menu__sheet button.tt-menu__item { width: 100%; border: 0; background: transparent; text-align: left; }
.site-menu__sheet button.tt-menu__item:hover { background: var(--color-hover); }

/* ---------- 1. Title band: the title at the left, the hint at the right, the banner slot under both ---------- */

.plans-head { padding-top: 56px; padding-bottom: 48px; row-gap: 0; align-items: start; }
.plans-head__title {
  margin-top: -8px;
  font: var(--text-display-lg);
  font-size: clamp(44px, 4.45vw, 64px);
  letter-spacing: var(--tracking-display-lg);
  color: var(--color-ink);
}
.plans-head__hint { font: var(--text-lead); letter-spacing: var(--tracking-lead); color: var(--color-ink); max-width: 560px; }
.plans-head__note { margin-top: 12px; font: var(--text-body); color: var(--color-ink-2); max-width: 520px; }
.plans-banner { margin-top: 32px; }

/* the kit's ruled banner row; the action is a real button, centred on the row */
.plans-banner .tt-banner__action,
.sheet-error .tt-banner__action { align-self: center; flex: none; }
.plans-banner__wrong { font: var(--text-body-sm); color: var(--color-ink-2); white-space: nowrap; }
.banner-spinner { display: inline-flex; width: 16px; height: 16px; margin-top: 2px; }
.banner-spinner .tt-spinner { display: block; }

/* ---------- 2. The sheet: a kicker, then one column per plan with 1px rules in the gutters, then the error line ---------- */

.sheet-band { padding-top: 40px; padding-bottom: 64px; row-gap: 0; }
/* the kicker's long meta gives way before the heading does: below the frame it wraps at the right while the rule keeps a stub */
.sheet-band .tt-kicker > h2 { white-space: nowrap; }
.sheet-band .tt-kicker__rule { flex: 1 0 48px; }
.sheet-band .kicker-meta { white-space: normal; text-align: right; }

/* Every plan is a subgrid over the sheet's eight row tracks (flag · name · price · blurb · allowances ·
   features · past the allowance · action), so a hairline inside one column lands at the same height in
   every other and the buttons share one baseline, however long the server's copy runs. */
.sheet {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(var(--plan-count, 4), minmax(0, 1fr));
  grid-template-rows: repeat(8, auto);
  column-gap: var(--grid-gap);
}
.sheet__loading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 0;
  border-top: var(--rule-strong);
  border-bottom: var(--rule-hair);
  font: var(--text-body);
  color: var(--color-ink-2);
}
.sheet__loading .tt-spinner { display: block; }
.sheet > .tt-empty { grid-column: 1 / -1; border-top: var(--rule-strong); }

.plan { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; min-width: 0; border-top: var(--rule-strong); }
/* Plus is marked by a heavier rule and the words "Most popular", never by scaling; the negative
   margin keeps its content on the same line as its neighbours' behind the 1px rule. */
.plan--popular { border-top: 3px solid var(--color-edge-strong); margin-top: -2px; }
.plan > * { grid-column: 1; min-width: 0; }
.plan__flag-row { grid-row: 1; }
.plan__name { grid-row: 2; }
.plan__price { grid-row: 3; }
.plan__blurb { grid-row: 4; }
.plan__allow { grid-row: 5; }
.plan__features { grid-row: 6; }
.plan__overage { grid-row: 7; }
.plan__action { grid-row: 8; }
/* the rule in the gutter to the left of every column but the first, spanning every row */
.plan::before {
  content: '';
  grid-row: 1 / -1;
  grid-column: 1;
  justify-self: start;
  width: 1px;
  margin-left: calc(var(--grid-gap) / -2);
  background: var(--color-rule);
}
.sheet__head + .plan::before { display: none; }

.plan__flag-row { min-height: 30px; display: flex; align-items: flex-start; }
.plan__flag { padding-top: 4px; font: var(--text-kicker); color: var(--color-ink); }
.plan__name { font: var(--text-title-md); letter-spacing: var(--tracking-title-md); color: var(--color-ink); }
.plan__price { padding-top: 10px; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.plan__amount { font: var(--text-figure-lg); letter-spacing: var(--tracking-figure-lg); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.plan__amount--text { font: var(--text-title-lg); letter-spacing: var(--tracking-title-lg); padding-top: 7px; }   /* shares the figures' baseline */
.plan__per { font: var(--text-ui); color: var(--color-ink-2); }
.plan__blurb { padding: 10px 0 20px; font: var(--text-body); color: var(--color-ink-2); }
.plan__allow { padding-top: 4px; border-top: var(--rule-hair); display: flex; flex-direction: column; }
.plan__allow-row { display: flex; flex-direction: column; gap: 2px; padding: 9px 0 8px; border-bottom: var(--rule-hair); }
.plan__allow-row:last-child { border-bottom: 0; }
.plan__allow-line { font: var(--text-body-sm); color: var(--color-ink-2); }
.plan__allow-line b { font-weight: 600; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.plan__gloss { font: var(--text-note); letter-spacing: var(--tracking-note); color: var(--color-ink-3); }
.plan__features { padding: 6px 0 8px; border-top: var(--rule-hair); }
.plan__features ul { display: flex; flex-direction: column; }
.plan__feature { padding: 5px 0; font: var(--text-body-sm); color: var(--color-ink-2); display: flex; gap: 8px; align-items: flex-start; }
.plan__bullet { flex: none; width: 4px; height: 4px; margin-top: 7px; background: var(--color-ink-2); }
.plan__overage { padding: 10px 0 14px; border-top: var(--rule-hair); display: flex; flex-direction: column; gap: 6px; }
.plan__over-head { font: var(--text-kicker); color: var(--color-ink); }
.plan__over-line { font: var(--text-body-sm); color: var(--color-ink-2); }
.plan__over-line--lead { color: var(--color-ink); }
.plan__over-line b { font-weight: 600; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.plan__over-line--none { color: var(--color-ink-3); }
.plan__action { padding-top: 8px; display: flex; flex-direction: column; gap: 8px; }
/* the reason a button is dimmed is a visible note, never only a tooltip */
.plan__note { font: var(--text-note); letter-spacing: var(--tracking-note); color: var(--color-ink-3); }
.sheet-error { margin-top: 32px; }

/* ---------- 3. The unit, on navy: the definition's first sentence as the statement; the estimate beside it ---------- */

.minute { padding-top: 64px; padding-bottom: 72px; row-gap: 0; }
.minute__statement {
  margin-top: 24px;
  max-width: 620px;
  font: var(--text-display-lg);
  font-size: clamp(44px, 4.45vw, 64px);
  letter-spacing: var(--tracking-display-lg);
  color: var(--color-ink-on-navy);
}
.minute__rest { margin-top: 22px; max-width: 580px; font: var(--text-body-lg); letter-spacing: var(--tracking-body-lg); color: var(--color-ink-2-on-navy); }
.minute__exchange { margin-top: 16px; max-width: 580px; font: var(--text-body-lg); letter-spacing: var(--tracking-body-lg); color: var(--color-ink-on-navy); }

.est__kicker { margin-top: 24px; }
.est { margin-top: 20px; display: flex; flex-direction: column; }
.est__inputs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; align-items: end; }
.est__field .tt-field__label { color: var(--color-ink-2-on-navy); }
.est__input { font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield; }
.est__input::-webkit-inner-spin-button,
.est__input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.est__body { display: flex; flex-direction: column; }
.est__lead { margin-top: 20px; display: flex; align-items: baseline; flex-wrap: wrap; color: var(--color-ink-on-navy); }
.est__lead-pair { display: flex; align-items: baseline; gap: 8px; }
.est__lead-fig { font: var(--text-figure-md); letter-spacing: var(--tracking-figure-md); font-variant-numeric: tabular-nums; }
.est__lead-unit { font: var(--text-ui); color: var(--color-ink-2-on-navy); }
.est__lead-sep { width: 1px; height: 20px; background: var(--color-rule-on-navy); margin: 0 10px; align-self: center; }
.est__table { margin-top: 14px; display: flex; flex-direction: column; }
.est__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px 88px;
  column-gap: 16px;
  align-items: baseline;
  padding: 10px 0 11px;
  border-top: 1px solid var(--color-rule-on-navy);
}
.est__row--head { border-top: 1px solid var(--color-ink-on-navy); padding: 8px 0 6px; }
.est__row:last-child { border-bottom: 1px solid var(--color-rule-on-navy); }
.est__k { font: var(--text-body-sm); color: var(--color-ink-2-on-navy); }
.est__row--sub .est__k { color: var(--color-ink-3-on-navy); }
.est__who { font-weight: 600; color: var(--color-ink-on-navy); }
.est__h { font: var(--text-label); letter-spacing: var(--tracking-label); color: var(--color-ink-2-on-navy); }
.est__v { font: var(--text-button); color: var(--color-ink-on-navy); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.est__row--sub .est__v { color: var(--color-ink-2-on-navy); }
.est__vl { display: none; }
.est__verdict { margin-top: 14px; font: var(--text-body); color: var(--color-ink-on-navy); }
.est__verdict b { font-weight: 600; font-variant-numeric: tabular-nums; }
.est__note { margin-top: 8px; font: var(--text-note); letter-spacing: var(--tracking-note); color: var(--color-ink-3-on-navy); }
.est__empty { margin-top: 14px; font: var(--text-body-sm); color: var(--color-ink-2-on-navy); }

/* ---------- 4. Add-ons: a ruled register row per add-on; no buy button ---------- */

.addons { padding-top: 48px; padding-bottom: 64px; row-gap: 0; }
.addons__head { flex-direction: column; justify-content: flex-start; gap: 0; }
.addons__meta { max-width: 640px; }
.addons__rows { display: flex; flex-direction: column; }
.addon { margin-top: 24px; padding: 22px 0 26px; border-top: var(--rule-hair); border-bottom: var(--rule-hair); }
.addon + .addon { margin-top: 0; border-top: 0; }
.addon__who { grid-column: c-start 1 / c-end 3; display: flex; flex-direction: column; }
.addon__name { font: var(--text-title-sm); letter-spacing: var(--tracking-title-sm); color: var(--color-ink); }
.addon__price { margin-top: 6px; font: var(--text-kicker); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.addon__blurb { grid-column: c-start 4 / c-end 9; font: var(--text-body); color: var(--color-ink-2); max-width: 640px; }
.addon__avail { grid-column: c-start 10 / c-end 12; font: var(--text-body-sm); color: var(--color-ink-2); display: flex; gap: 8px; align-items: flex-start; }
.addon__avail svg { margin-top: 1px; color: var(--color-ink-2); }

/* ---------- 5. Close band: the refund policy, quiet, then the Already subscribed? row ---------- */

.close { padding-top: 48px; padding-bottom: 56px; row-gap: 0; }
.close__refund { display: grid; grid-template-columns: 2fr 10fr; column-gap: var(--grid-gap); padding-bottom: 28px; border-bottom: var(--rule-hair); }
.close__refund-text { font: var(--text-body-sm); color: var(--color-ink-2); max-width: 620px; }
/* Two policy rows stacked (billing date, then refunds): the second opens below the first's rule. */
.close__refund + .close__refund { padding-top: 24px; }
.link-row { display: grid; grid-template-columns: 2fr 10fr; column-gap: var(--grid-gap); align-items: center; min-height: 48px; border-bottom: var(--rule-hair); }
.link-row__k { font: var(--text-kicker); color: var(--color-ink); }
.link-row__links { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.link-row__sep { width: 1px; height: 16px; background: var(--color-edge); }

/* ---------- 6. The add-on dialog: the kit's 440 over a scrim; 1 of 2 — payment follows on the checkout page ---------- */

.upsell-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 120px 16px 24px;
  overflow-y: auto;
}
.upsell { width: 440px; max-width: 100%; }
.upsell__head { padding-bottom: 0; }
.upsell__head-text { display: flex; flex-direction: column; gap: 6px; }
.upsell__hint { font: var(--text-body); color: var(--color-ink-2); }
.upsell__body { padding-top: 16px; gap: 0; }
.upsell__rows { display: flex; flex-direction: column; border-top: var(--rule-strong); border-bottom: var(--rule-hair); }
.upsell__row { padding: 12px 0 14px; }
/* the ring belongs to the 18px box; the real checkbox is visually hidden inside the label */
.upsell__row:has(input:focus-visible) .tt-check__box { box-shadow: 0 0 0 2px var(--color-ground), 0 0 0 4px var(--color-focus); }
.upsell__row-title { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.upsell__row-name { font: var(--text-button); color: var(--color-ink); }
.upsell__row-price { font: var(--text-kicker); color: var(--color-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.upsell__total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 18px; }
.upsell__total-label { font: var(--text-body); color: var(--color-ink); }
.upsell__total-value { display: flex; align-items: baseline; gap: 6px; }
.upsell__total-amount { font: var(--text-figure-md); letter-spacing: var(--tracking-figure-md); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.upsell__total-per { font: var(--text-ui); color: var(--color-ink-2); }
.upsell__total-note { padding-top: 6px; font: var(--text-note); letter-spacing: var(--tracking-note); color: var(--color-ink-3); text-align: right; }
.upsell__next { margin-top: 14px; padding-top: 12px; border-top: var(--rule-hair); display: flex; gap: 8px; align-items: flex-start; font: var(--text-body-sm); color: var(--color-ink); }
.upsell__next svg { margin-top: 1px; color: var(--color-ink-2); }

/* ---------- 7. Phone: [data-layout='mobile'] only (design/pages/pricing/phone.html, phone-upsell.html) ---------- */

[data-layout='mobile'] .plans-head { padding-top: 32px; padding-bottom: 32px; }
[data-layout='mobile'] .plans-head__title { margin-top: 0; font: var(--text-title-xl); letter-spacing: var(--tracking-title-xl); }
[data-layout='mobile'] .plans-head__hint { margin-top: 16px; font: var(--text-body-lg); letter-spacing: var(--tracking-body-lg); max-width: none; }
[data-layout='mobile'] .plans-head__note { margin-top: 10px; font: var(--text-body-sm); max-width: none; }
[data-layout='mobile'] .plans-banner { margin-top: 24px; }
[data-layout='mobile'] .plans-banner .tt-banner,
[data-layout='mobile'] .sheet-error .tt-banner { flex-wrap: wrap; }
[data-layout='mobile'] .plans-banner .tt-banner__body,
[data-layout='mobile'] .sheet-error .tt-banner__body { flex: 1 1 280px; }
[data-layout='mobile'] .plans-banner .tt-banner__action,
[data-layout='mobile'] .sheet-error .tt-banner__action { align-self: auto; margin-left: 28px; margin-top: 4px; flex-wrap: wrap; gap: 8px; }
[data-layout='mobile'] .plans-banner__action { flex-direction: column; align-items: flex-start; gap: 6px; }

[data-layout='mobile'] .sheet-band { padding-top: 32px; padding-bottom: 40px; }
/* On the phone the meta drops under the kicker as its own row (the shell's rule); the design reads it
   left-aligned like the copy around it, not ragged-left against the right edge as the desktop's right end. */
[data-layout='mobile'] .sheet-band .kicker-meta { text-align: left; }
[data-layout='mobile'] .sheet { margin-top: 20px; display: flex; flex-direction: column; gap: 32px; }
[data-layout='mobile'] .plan { display: flex; flex-direction: column; }
[data-layout='mobile'] .plan--popular { margin-top: 0; }
[data-layout='mobile'] .plan::before { display: none; }
[data-layout='mobile'] .plan__flag-row { min-height: 8px; }
[data-layout='mobile'] .plan__flag { padding-top: 10px; }
[data-layout='mobile'] .plan__name { padding-top: 12px; }
[data-layout='mobile'] .plan--popular .plan__name { padding-top: 6px; }
[data-layout='mobile'] .plan__action { padding-top: 12px; }
[data-layout='mobile'] .sheet-error { margin-top: 28px; }

[data-layout='mobile'] .minute { padding-top: 44px; padding-bottom: 48px; }
[data-layout='mobile'] .minute__statement { margin-top: 18px; max-width: none; font: var(--text-title-xl); letter-spacing: var(--tracking-title-xl); }
[data-layout='mobile'] .minute__rest { margin-top: 16px; max-width: none; font: var(--text-body); letter-spacing: var(--tracking-body); }
[data-layout='mobile'] .minute__exchange { margin-top: 12px; max-width: none; font: var(--text-body); letter-spacing: var(--tracking-body); }
[data-layout='mobile'] .est__kicker { margin-top: 36px; }
[data-layout='mobile'] .est { margin-top: 16px; }
/* The plan name that opens each estimate row is a link back to its column; inline, its box is the 16px
   line. Vertical padding on an inline box adds nothing to the line's height, so this widens the thumb
   target to 44px without moving a pixel of text. */
[data-layout='mobile'] .est__who { padding: 14px 12px; margin: -14px -12px; }
[data-layout='mobile'] .est__inputs { column-gap: 10px; }
[data-layout='mobile'] .est__field .tt-field__label { min-height: 32px; }   /* two label lines, so the three inputs sit on one line */
[data-layout='mobile'] .est__lead { flex-direction: column; align-items: flex-start; gap: 2px; }
[data-layout='mobile'] .est__lead-sep { display: none; }
[data-layout='mobile'] .est__row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; }
[data-layout='mobile'] .est__row--head .est__v { display: none; }
[data-layout='mobile'] .est__k { grid-column: 1 / -1; }
[data-layout='mobile'] .est__v { display: flex; flex-direction: column; gap: 2px; text-align: left; }
[data-layout='mobile'] .est__vl { display: block; font: var(--text-note); letter-spacing: var(--tracking-note); color: var(--color-ink-3-on-navy); }

[data-layout='mobile'] .addons { padding-top: 36px; padding-bottom: 40px; }
[data-layout='mobile'] .addon { margin-top: 20px; gap: 12px; padding: 18px 0 20px; }

[data-layout='mobile'] .close { padding-top: 32px; padding-bottom: 36px; }
[data-layout='mobile'] .close__refund { display: flex; flex-direction: column; gap: 8px; padding-bottom: 20px; }
[data-layout='mobile'] .close__refund + .close__refund { padding-top: 16px; }
[data-layout='mobile'] .link-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 0 10px; }
[data-layout='mobile'] .link-row__links { gap: 16px; }
[data-layout='mobile'] .link-row__sep { display: none; }

/* the add-on dialog as a bottom sheet: Continue above Back, both full width, nearest the thumb */
[data-layout='mobile'] .upsell-overlay { align-items: flex-end; padding: 0; }
[data-layout='mobile'] .upsell { width: 100%; border-bottom: 0; border-radius: var(--radius-overlay) var(--radius-overlay) 0 0; }
[data-layout='mobile'] .upsell .tt-dialog__foot { flex-direction: column-reverse; align-items: stretch; gap: 8px; padding-bottom: calc(20px + var(--safe-b, 0px)); }
[data-layout='mobile'] .upsell .tt-dialog__foot .tt-btn { width: 100%; }