/* ─────────────────────────────────────────────── 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.

   Three things are left. Two are new, one is the note card that was always
   here and was never about tables.
*/

/* ───────────────────────────────────────────── 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, full width. Kept for anything that wants it; Extras uses the
   two-up below. */
.cards-1 { grid-template-columns: minmax(0, 1fr); }

/* Extras is two per row. Five items means the last one sits alone on row
   three, which is what an odd count does and is better than stretching it. */
.ex-grid > .card:last-child:nth-child(odd) { grid-column: span 1; }

/* A full-width row reads across, not down: the name on the left and the
   figure on the right, with the explanation underneath spanning both. The
   price keeps the display size it has on the cards above - this is still a
   pricing page and the figure is still the thing being looked for. */
.card .ex-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 28px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.card .ex-head h3 { margin-bottom: 0; }
.card .ex-head .pr-price { margin: 0; }

/* The price this one used to be. Smaller than the figure it precedes and in
   the faint tone, so the eye lands on what you pay rather than on what you
   do not - a struck price set at the same size competes with the real one. */
.card .pr-price .pr-was {
  font-size: 0.6em;
  color: var(--faint);
  text-decoration-line: line-through;
  text-decoration-thickness: 2px;
  margin-right: 1px;
}

/* Visually hidden, still read aloud. Two bare figures in a row mean nothing
   to a screen reader without the word that separates them. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 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); }

/* Where a card has no price. It sits in the same place the figure would and
   is set like the unit beside one, so the row keeps its shape - a card with
   a bare heading and nothing on the right reads as unfinished. */
.card .ex-head .ex-link {
  margin: 0;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: lowercase;
}

.card .ex-head .ex-link a { color: var(--you); text-decoration: none; border-bottom: 1px solid transparent; }
.card .ex-head .ex-link a:hover { border-bottom-color: var(--you); }

/* Below the wrap point the two halves stack, and a big figure sitting under
   its own name with no gap reads as a heading rather than a price. Two-up
   columns are narrow enough that this is the normal case, not the exception. */
@media (max-width: 1000px) {
  .card .ex-head { gap: 2px; }
}

/* 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);
}

.card .pr-price span {
  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);
}

.card .pr-also b { color: var(--text); font-weight: 700; font-size: 15px; }


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

   A <button>, not a link - it opens a dialog rather than going anywhere - so
   it needs the two things a browser gives a button and .cta does not expect
   to undo. Only `border` and `background`, and only at one class of
   specificity, so .cta.solid and .cta.ghost (two classes) still win. */
button.cta {
  border: 0;
  background: none;
  cursor: pointer;
}

.est-row { margin-top: 72px; }

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

   ⚠ 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-back {display:
   flex}` alone leaves the dialog permanently open over the page, and the
   same trap catches the steps and the Talk-to-us link. Two classes' worth of
   specificity puts it back. Do not delete these. */
.est-back {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
  background: rgba(3, 5, 6, 0.74);
  backdrop-filter: blur(6px);
}

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

.est-card {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: auto;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  padding: 30px 30px 24px;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
}

.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: 22px; }

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

/* Three segments rather than a percentage: there are three questions, and a
   bar that fills by thirds says which one you are on as well as how far in. */
.est-bar { display: flex; gap: 5px; flex: 1; }

.est-bar span {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--line-strong);
  transition: background 0.25s;
}

.est-bar span.on { background: var(--you); }

/* One step visible at a time. min-height so the card does not jump between a
   two-line question and a four-line one, which reads as the dialog flinching
   every time you press Next. */
.est-step { min-height: 208px; }

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

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

.est-title { font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.02em; margin: 0 0 8px; }

.est-help { margin: 0 0 18px; font-size: 13.5px; line-height: 1.55; color: var(--dim); }

.est-opts { display: flex; flex-direction: column; gap: 10px; }

/* The whole row is the target, not the 16px dot: this is answered on a phone
   as often as not. */
.est-opts label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--raise);
  font-size: 14.5px;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.est-opts label:hover { border-color: var(--line-strong); }

.est-opts input { accent-color: var(--you); width: 17px; height: 17px; cursor: pointer; flex: none; }

.est-opts label:has(input:checked) { border-color: var(--you); background: rgba(56, 217, 190, 0.07); }

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

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

/* The answer, in the same display treatment the prices on the cards use,
   because it is the same kind of thing. */
.est-out {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
  padding: 20px 22px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--raise);
}

.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: 2rem; 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: 14px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--faint); }

.est-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.est-btn {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 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; }

.est-btn.ghost { background: none; color: var(--text); border: 1px solid var(--line-strong); }
.est-btn.ghost:hover { border-color: var(--text); }

/* Kept in the layout rather than hidden on step one, so Next does not slide
   across the card the moment you can go Back. */
.est-btn:disabled { opacity: 0.3; cursor: default; }
.est-btn:disabled:hover { border-color: var(--line-strong); }

@media (max-width: 560px) {
  .est-card { padding: 26px 20px 20px; }
  .est-step { min-height: 240px; }
  .est-fig b { font-size: 1.7rem; }
  .est-btn { padding: 12px 18px; }
}