/* ─────────────────────────────────────────────── pricing (leads /pricing)

   What this page needs on top of panel.css, and nothing else.

   It used to be the whole comparison-table block lifted out of the Bamya Call
   landing stylesheet - 380 lines of tick columns, sticky tier heads, a help
   dialog and a balancing gutter. The page does not compare tiers any more: it
   says the offer in sentences, in the same card-and-callout language the
   welcome page is built from. So the tables went, and so did every rule that
   only they used.

   What is left: the card grids, the price inside a card, the estimator, and
   the page as reworked on 2026-10-30 (at the foot).
*/

/* ───────────────────────────────────────────── a two-up card row

   panel.css's `.cards` is a four-column grid, which is right for the four
   steps on the welcome page and wrong for a pair: two cards in a four-track
   grid sit in the left half of the page with a hole beside them. This is the
   same grid with two tracks, and it keeps `.cards`'s own collapse to one
   column on a phone - restated rather than inherited, because a single class
   here outranks the media query there and would otherwise hold two columns
   all the way down to 390px. */
.cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* One per line: Extras' researched leads card, above its row of three. */
.cards-1 { grid-template-columns: minmax(0, 1fr); }

/* The link now rides in the secondary line rather than the price slot. */
.card .pr-also a { color: var(--you); text-decoration: none; border-bottom: 1px solid transparent; }
.card .pr-also a:hover { border-bottom-color: var(--you); }

/* Same steps down as panel.css's own four-up: three across, two when the row
   stops fitting, one on a phone. A row of three leaves an orphan at the
   middle step, which is what an odd row does and is better than three cards
   squeezed to 200px each. */
@media (max-width: 1000px) {
  .cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .cards-2,
  .cards-3 { grid-template-columns: minmax(0, 1fr); }
}

/* ───────────────────────────────────────────── the price inside a card

   This is a pricing page, so the price is the largest thing on it after the
   headline - not a line of body copy that happens to contain a number. It
   takes the display treatment the h1 and h2 already use, 800 weight and tight
   tracking in the sans, at a size that reads across a room.

   The unit beside it stays small and in the mono face. "once" and "per
   company" are not part of the figure and must not be read at its weight:
   the number is what somebody is scanning for, and a unit set to match it
   doubles the length of the thing they are scanning.

   Selected as `.card .pr-price`, not `.pr-price`. panel.css sets
   `.card p { font-size: 0.95rem }`, which is specificity (0,1,1) and beats a
   lone class at (0,1,0) however far down the cascade it sits - so every price
   on this page was silently rendering at body size, 15.2px, whatever this
   rule asked for. Two classes (0,2,0) takes it back. Same for .pr-also
   below, and for any rule added here that styles a <p> inside a card. */
.card .pr-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 2px 0 16px;
  font-size: clamp(2.1rem, 3.2vw, 2.8rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
}

/* The unit is its own class, not "any span in a price": the currency switch
   and Monthly or Yearly put the figure itself in a span or a text node, and a
   bare `span` rule here once set "£397" as small and grey as "ONCE" (Yana,
   2026-10-30: "only a tiny grey number changes"). */
.card .pr-price .pr-unit {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}

/* A second price under the first: the pack rate, the thing that is true only
   if you buy more at once. Ruled off so it reads as a footnote to the price
   above rather than competing with it - but the figure in it is still a
   figure, so it carries the text colour and the weight while the words
   around it stay quiet. */
.card .pr-also {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
}





/* ───────────────────────────────────────────── the estimator

   ⚠ EVERY rule here that sets `display` also needs its [hidden] partner
   below it. The `hidden` attribute is display:none in the USER AGENT sheet,
   which any author display declaration outranks - so `.est-help {display:
   flex}` alone leaves the "?" window permanently open over the page (the
   estimator itself was such a window until 2026-10-30). Two classes' worth of specificity puts
   it back. Do not delete these.

   Two columns (owner, 2026-10-22: the bolt-ons on the left, the calculated
   value on the right), as crm.bamya.co/pricing draws its chooser: a row for
   each thing priced on the left - its switch or its number, its name and
   "?", what it gives, its price - and the estimate on the right, kept in view
   while the rows scroll. One column on a phone, the estimate after the rows. */
.est-card {
  position: relative;
  width: 100%;
  max-width: 940px;
  margin: auto;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  padding: 26px 26px 24px;
}

.est-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--dim);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.est-close:hover { color: var(--text); background: var(--raise); }

.est-head { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }

/* The estimator's own currency switch, at its top (bamya-currency.js draws it). */
.est-head .cur-switch { margin-top: 0; }


.est-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  align-items: start;
  gap: 20px;
}

.est-left { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* A row: the switch (or the number) at the left, the name above what it
   gives, the price at the right. The whole row is the switch's label, so it
   is answered with a thumb as easily as a mouse. */
.est-item {
  position: relative;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) auto;
  grid-template-areas: "track name price" "track gives price";
  align-items: center;
  gap: 3px 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--raise);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.est-item-count { cursor: default; }

.est-item.is-locked { cursor: help; }

.est-item:not(.is-on):hover { border-color: var(--line-strong); }

.est-item.is-on { border-color: var(--you); background: rgba(56, 217, 190, 0.07); }

.est-item input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }

.est-track {
  grid-area: track;
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line-strong);
  transition: background 0.2s, border-color 0.2s;
}

.est-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--dim);
  transition: transform 0.2s, background 0.2s;
}

.est-item input:checked + .est-track { background: rgba(56, 217, 190, 0.28); border-color: var(--you); }
.est-item input:checked + .est-track::after { transform: translateX(20px); background: var(--text); }
.est-item input:focus-visible + .est-track { outline: 2px solid var(--you); outline-offset: 3px; }
.est-item input[aria-disabled="true"] + .est-track { opacity: 0.55; }

.est-cell { grid-area: track; }

.est-name { grid-area: name; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--text); }

.est-gives { grid-area: gives; font-size: 12.5px; line-height: 1.45; color: var(--dim); }

.est-price { grid-area: price; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.est-price b { font-size: 16px; font-weight: 800; color: var(--text); }

.est-price small { font-size: 12px; color: var(--dim); }

.est-price .est-year { display: block; margin-top: 2px; font-family: var(--mono); font-size: 11px; color: var(--faint); }

.est-state { font-family: var(--mono); font-size: 11.5px; color: var(--dim); }

/* Only the interval Yearly shows. */
.est-card[data-interval="year"] [data-when="month"],
.est-card[data-interval="month"] [data-when="year"] { display: none; }

.est-num {
  width: 60px;
  padding: 6px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--raise-2);
  color: var(--text);
  font-family: var(--mono);
  font-size: 16px;   /* 16px or smaller and iOS zooms the page on focus */
  text-align: center;
}

.est-num:focus-visible { outline: 2px solid var(--you); outline-offset: 1px; }

/* A row's "?". */
.est-q {
  display: inline-grid;
  place-items: center;
  width: 19px;
  height: 19px;
  margin-left: 8px;
  padding: 0;
  vertical-align: 1px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: none;
  color: var(--dim);
  font: 600 11.5px/1 var(--mono);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.est-q:hover,
.est-q:focus-visible { color: var(--you); border-color: var(--you); }

/* Why a locked row did not move. */
.est-locked-note { min-height: 1.4em; margin: 2px 0 0; font-family: var(--mono); font-size: 12px; color: var(--you); }

/* The estimate: an invoice, then the two figures, in the same display
   treatment the prices on the cards use, because it is the same kind of
   thing. */
.est-right {
  position: sticky;
  top: 0;
  min-width: 0;
  padding: 18px 20px 20px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--raise);
}

.est-count {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

.est-lines { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; }

.est-lines li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.est-lines li:last-child { border-bottom: 0; }

.est-lines li > span:last-child { color: var(--text); white-space: nowrap; }

.est-lines small { color: var(--faint); font-size: 12px; }

.est-out {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 2px solid var(--line-strong);
}

.est-fig { display: flex; flex-direction: column; gap: 2px; }

.est-fig span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}

.est-fig b { font-size: 1.8rem; font-weight: 800; letter-spacing: -0.03em; color: var(--text); }

.est-note { margin: 14px 0 0; font-size: 13px; line-height: 1.55; color: var(--dim); }

.est-note:empty { display: none; }

.est-small { margin: 12px 0 0; font-size: 12px; line-height: 1.55; color: var(--faint); }

.est-btn {
  display: block;
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.est-btn[hidden] { display: none; }

.est-btn.solid { background: var(--text); color: var(--bg); border: 1px solid var(--text); }
.est-btn.solid:hover { background: #fff; border-color: #fff; }

/* A row's "?" window, over the estimator. */
.est-help {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(3, 5, 6, 0.6);
}

.est-help[hidden] { display: none; }

.est-help-card {
  position: relative;
  width: min(460px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 24px 26px 26px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
}

.est-help-card h4 { margin: 0 40px 10px 0; font-size: 1.1rem; line-height: 1.3; }

.est-help-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--dim); }

@media (max-width: 820px) {
  .est-split { grid-template-columns: minmax(0, 1fr); }
  .est-right { position: static; }
}

@media (max-width: 560px) {
  .est-card { padding: 22px 14px 16px; }
  .est-item {
    grid-template-columns: 54px minmax(0, 1fr) auto;
    grid-template-areas: "track name price" "track gives gives";
    align-items: start;
    gap: 3px 10px;
    padding: 12px;
  }
  /* Wide enough for "100", the personal leads it opens on. */
  .est-num { width: 54px; padding: 6px 4px; }
  .est-fig b { font-size: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .est-track,
  .est-track::after { transition: none; }
}


/* ───────────────────────────────────────────── the page, reworked (Yana, 2026-10-30)

   No heading above the figures, only the PRICING kicker: the subscription's
   price is the biggest thing on the page. Monthly or Yearly sits beside the
   currency switch, and every price that differs by it is
   written twice (.pp-y, .pp-m) with one shown. No JS shows Yearly, the
   default, as the CRM's pricing page and the app open on. */
/* Two classes: panel.css's `.panel.short` padding outranks one, and left the
   top of the page under the fixed header on a phone. The page opens on its
   two switches (no heading above them, Yana 2026-10-30). */
.panel.pp-top {
  padding-top: clamp(112px, 10vw, 132px);
  /* Close under the card, so "Set up on your own." comes next and reads as
     the next thing, not as another page. */
  padding-bottom: clamp(40px, 5vw, 64px);
}

.panel.pp-top + .panel.short { padding-top: clamp(56px, 6vw, 80px); }

/* The kicker over the switches, centred: it is a flex row, which text-align
   does not move. */
.pp-where .kicker { justify-content: center; margin-bottom: 22px; }

html:not([data-period="month"]) .pp-m,
html[data-period="month"] .pp-y { display: none; }

.pp-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.pp-controls .cur-switch { margin-top: 0; }

/* The same pill as the currency switch (bamya-currency.js draws that one). */
.pp-period {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--raise);
}

.pp-period[hidden] { display: none; }

.pp-period button {
  appearance: none;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--dim);
  font: 600 13px/1 var(--sans);
  letter-spacing: 0.02em;
  padding: 9px 16px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.pp-period button:hover { color: var(--text); }
.pp-period button[aria-checked="true"] { background: var(--you); color: var(--bg); }
.pp-period button:focus-visible { outline: 2px solid var(--live); outline-offset: 2px; }

/* The subscription: what it gives on the left, the page's biggest figure on
   the right, ruled off from it. The mint edge is the one card on the page
   everybody pays for. */
.pp-plan {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: center;
  gap: 32px 0;
  max-width: 1000px;
  margin: 28px auto 0;
  padding: clamp(26px, 4vw, 44px);
  text-align: left;
  border: 1px solid rgba(56, 217, 190, 0.45);
  border-radius: 22px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(56, 217, 190, 0.09), rgba(56, 217, 190, 0) 60%),
    var(--raise);
}

.pp-label {
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--you);
}

.card .pp-label { margin-bottom: 6px; font-size: 11.5px; }

/* A heading in a card (the page's h1), not a section title: no colour split
   as it scrolls, and the card's size, not h1's. */
.pp-plan .pp-name {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin-bottom: 10px;
  text-shadow: none;
}

.pp-desc { color: var(--dim); margin-bottom: 20px; }

.pp-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }

.pp-ticks li {
  position: relative;
  padding-left: 28px;
  font-size: 0.98rem;
  line-height: 1.45;
}

.pp-ticks li::before {
  content: "\2713";
  position: absolute;
  left: 2px;
  top: 0;
  color: var(--you);
  font-weight: 700;
}

.pp-plan-price {
  text-align: center;
  padding-left: clamp(24px, 4vw, 48px);
  margin-left: clamp(24px, 4vw, 48px);
  border-left: 1px solid var(--line);
}

.pp-big {
  font-size: clamp(3.4rem, 7vw, 5.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text);
}

.pp-per {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}

.pp-billed {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--faint);
}

.pp-plan-price .cta { margin-top: 26px; }

@media (max-width: 760px) {
  .pp-plan { grid-template-columns: minmax(0, 1fr); }
  .pp-plan-price {
    padding: 26px 0 0;
    margin: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* The two ways to start: the button at the foot of each card, level across
   the pair whatever the length of the words above it. */
.pp-ways .card { display: flex; flex-direction: column; }
.pp-ways .card .actions { margin-top: auto; padding-top: 22px; }

/* Extras' link line (call.bamya.co), as written, not in capitals. */
.card .pr-also { text-transform: none; }

/* The estimator on the page (Yana, 2026-10-30), no longer a window: the width
   of the subscription card, and its totals held just under the fixed header
   while the rows scroll past (one column below 820px, where they follow). */
.pp-est .est-card { max-width: 1000px; text-align: left; }
.pp-est .est-right { top: 88px; }

/* More room than the window it was built for (Yana, 2026-10-30: "leave more
   breathing space ... the table feels too cramped"): space under the heading,
   in the card, between the rows and before the totals. A phone keeps the
   window's tighter spacing, which its width needs. */
@media (min-width: 561px) {
  .pp-est .est-card { margin-top: clamp(28px, 4vw, 52px); padding: clamp(26px, 3.4vw, 40px); }
  .pp-est .est-head { margin-bottom: 24px; }
  .pp-est .est-split { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 32px; }
  .pp-est .est-left { gap: 12px; }
  .pp-est .est-item { padding: 16px 18px; gap: 5px 16px; }
  .pp-est .est-right { padding: 24px 26px 26px; }
}

@media (max-width: 560px) {
  .pp-est .est-card { margin-top: 24px; }
  .pp-est .est-head { margin-bottom: 16px; }
}

/* Researched leads across the top of Extras: the name and what it is on the
   left, the price on the right; on a phone, stacked like every other card. */
.card.pp-wide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "name price" "text price";
  column-gap: 40px;
  align-items: center;
  max-width: 820px;
  margin: 0 auto;
}

.card.pp-wide h3 { grid-area: name; align-self: end; }
.card.pp-wide > p:not(.pr-price) { grid-area: text; align-self: start; }

/* The figure, and its unit on the lines under it, to the right. */
.card.pp-wide .pr-price {
  grid-area: price;
  margin: 0;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 8px;
}

.card.pp-wide .pr-unit { line-height: 1.6; }
.card .pr-price .pp-note { display: block; color: var(--you); }

@media (max-width: 560px) {
  .card.pp-wide { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "price" "text"; }
  .card.pp-wide .pr-price { margin: 2px 0 16px; align-items: flex-start; text-align: left; }
}

/* Extras' row of three, right under the researched leads card above it. */
.cards.pp-after { margin-top: 16px; }