/* ==========================================================================
   The public price list — minimalist, gradient-accented.

   Built on theme.css's tokens plus one thing of its own: the Komunidad brand
   gradient, the same four stops the checkout dialog takes from
   k_logo_color.svg. It appears exactly where the eye should land — the
   headline and the popular card's edge — and nowhere else. It came OFF the
   billing switch and the popular card's button on 2026-09-22, when the
   console kit (ui.css) settled that a control carries no gradient: the
   switch is the kit's segmented control and the CTAs are kit buttons.
   Everything around those moments is hairlines and whitespace: boxes were
   removed, not decorated.

   Three column layout that collapses to one, and every wide thing — the
   tables especially — scrolls inside its own box so the page body never
   scrolls sideways.
   ========================================================================== */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.pr {
  /* The brand gradient, from k_logo_color.svg — the same stops as the
     payment dialog, so the page that quotes the price and the dialog that
     takes it wear one identity. */
  --g1: #1f3556;
  --g2: #21495f;
  --g3: #1f7079;
  --g4: #2ba093;
  --grad: linear-gradient(135deg, var(--g1) 0%, var(--g2) 38%,
                          var(--g3) 70%, var(--g4) 100%);
  --grad-h: linear-gradient(90deg, var(--g1) 0%, var(--g3) 55%, var(--g4) 100%);
  --grad-wash: linear-gradient(135deg,
                 color-mix(in srgb, var(--g2) 6%, transparent) 0%,
                 color-mix(in srgb, var(--g4) 9%, transparent) 100%);

  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 72px) 0 88px;
  /* The headline's glow (`.pr__head::before`) bleeds 10% past each side. On
     an ordinary window there is slack for it; with the operator's nav moved
     to a rail the page is 232px narrower and the bleed pushed the DOCUMENT
     68px sideways — a decorative, z-index -1, pointer-events: none element
     giving the whole page a horizontal scrollbar.

     `clip`, never `hidden`: `hidden` makes this a scroll container, which
     would break any `position: sticky` inside it — the trap the weather map
     and the sticky asset form both met. And only the X axis, so the glow's
     own -80px rise above the headline is untouched. */
  overflow-x: clip;
}

/* --- Head ---------------------------------------------------------------- */

.pr__head {
  position: relative;
  text-align: center;
}

/* A soft glow behind the headline. Decorative, inert, and behind everything. */
.pr__head::before {
  content: "";
  position: absolute;
  inset: -80px -10% auto;
  height: 340px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(46% 100% at 30% 0%,
      color-mix(in srgb, var(--g4) 10%, transparent) 0%, transparent 70%),
    radial-gradient(46% 100% at 72% 8%,
      color-mix(in srgb, var(--g2) 8%, transparent) 0%, transparent 70%);
}

.pr__eyebrow {
  display: inline-block;
  margin: 0 0 14px;
  padding: 2px 9px;
  border: 1px solid color-mix(in srgb, var(--g4) 32%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--g4) 7%, transparent);
  font-size: var(--chip-fs);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--g3);
}

.pr__h1 {
  margin: 0 0 14px;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--ink);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .pr__h1 {
    background: var(--grad-h);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

.pr__lede {
  max-width: 620px;
  margin: 0 auto 36px;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.65;
}

.pr__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 18px;
  margin-bottom: 44px;
}

/* The billing toggle. A radio group wearing the kit's segmented control
   (`.seg` / `.seg__opt` in ui.css, read here by metric because the radios
   need the `input:checked + span` shape): the input is hidden from sight but
   not from the accessibility tree or the keyboard, and the checked option is
   ink on white, never the gradient. */
.pr__toggle {
  display: inline-flex;
  gap: 2px;
  margin: 0;
  padding: 2px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}

.pr__opt { display: inline-flex; cursor: pointer; }
.pr__opt input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.pr__opt span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: calc(var(--ctl-h) - 6px);          /* the switch stands 36px tall with its 2px pad */
  padding: 0 12px;
  border-radius: calc(var(--radius) - 2px);  /* concentric inside the 2px pad */
  font-size: .78rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pr__opt span:hover { color: var(--ink); }
.pr__opt i {
  font-style: normal;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--g3);
}
.pr__opt input:checked + span {
  background: var(--ink);
  color: #fff;
}
.pr__opt input:checked + span i { color: rgba(255, 255, 255, .85); }
.pr__opt input:focus-visible + span { box-shadow: var(--ring); }

.pr__sites {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
}
/* The field is the kit's `.input` (ui.css); this only sets its width. */
.pr__sites input { width: 92px; text-align: center; }

.pr__siteshint {
  flex-basis: 100%;
  margin: 0;
  font-size: 13px;
  color: var(--ink-3);
}

/* --- Plan cards ---------------------------------------------------------- */

.pr__tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  /* EQUAL HEIGHT (customer request, 2026-09-14). `align-items: start` let
     each card shrink to its own feature list, so three cards of six, seven
     and nine bullets ended at three different heights and their buttons sat
     on three different lines — which reads as three unrelated boxes rather
     than one comparison. Stretch is all it takes here because `.prc` is
     already a flex column with `.prc__feats { flex: 1 }`: the list absorbs
     the difference, so the button and the Resource limits row line up across
     all three however uneven the bullets are. */
  align-items: stretch;
}

.prc {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.prc:hover {
  border-color: var(--accent-line);
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}

/* The one card that is meant to be picked wears the gradient as its edge —
   a transparent border filled from the border-box, so the frame itself is
   the brand rather than a second colour laid beside it. */
.prc--pop {
  border-color: transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--grad) border-box;
  box-shadow: 0 20px 50px -30px color-mix(in srgb, var(--g3) 55%, transparent);
}
.prc--pop:hover {
  border-color: transparent;
  box-shadow: 0 26px 60px -30px color-mix(in srgb, var(--g3) 65%, transparent);
}

.prc__tag {
  position: absolute;
  top: -11px;
  left: 26px;
  padding: 2px 9px;
  border-radius: var(--radius);
  background: var(--grad);
  color: #fff;
  font-size: var(--chip-fs);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--g3) 70%, transparent);
  border: 1px solid transparent;   /* the kit chip's own hairline, so it stands 23px like a `.chip` */
}

.prc__name { margin: 0; font-size: 19px; letter-spacing: -.01em; }
.prc__who { margin: 3px 0 20px; font-size: 13px; color: var(--ink-3); }

.prc__price {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin: 0;
  font-size: 44px;
  font-weight: 550;
  letter-spacing: -.035em;
  /* Tabular figures, so 19 -> 15.83 does not shuffle the layout under the
     billing toggle. */
  font-variant-numeric: tabular-nums;
}
.prc__cur { font-size: 22px; color: var(--ink-3); font-weight: 500; }
.prc__price small {
  margin-left: 7px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-3);
}

.prc__total {
  min-height: 20px;
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--g3);
  font-variant-numeric: tabular-nums;
}
.prc__total:empty { margin: 0; }

/* The bullets, BELOW the button since 2026-09-21 (the customer's own card
   design): the rule now sits above the list rather than under the price, and
   `flex: 1` stays here because this is the child that absorbs the difference
   between three uneven lists and keeps the cards equal height. */
.prc__feats {
  flex: 1;
  margin: 26px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--rule);
  list-style: none;
}
.prc__feat {
  position: relative;
  padding: 6px 0 6px 26px;
  font-size: 14px;
  color: var(--ink-2);
}
/* THE TICK. Drawn, not a glyph: a font that fails to load must not take the
   meaning of the list with it. */
.prc__feat--yes::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 13px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--g4);
  border-bottom: 2px solid var(--g4);
  transform: rotate(-45deg);
}
/* THE CROSS, and the line set in muted ink with it. Colour is never the only
   carrier — the mark differs, the text differs ("No ..."), and the weight
   differs — because a reader who cannot tell the teal from the grey must
   still be able to tell an absence from an inclusion. */
.prc__feat--no { color: var(--ink-3); }
.prc__feat--no::before,
.prc__feat--no::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 15px;
  width: 11px;
  height: 0;
  border-top: 2px solid var(--ink-3);
}
.prc__feat--no::before { transform: rotate(45deg); }
.prc__feat--no::after { transform: rotate(-45deg); }

/* THE LINE THAT IS THE SAME ON EVERY PLAN, set apart under its own rule so a
   reader scanning three cards for differences can see that it is not one. */
.prc__feat--star {
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px dashed var(--rule);
  color: var(--g3);
  font-weight: 500;
}
.prc__feat--star::before {
  content: "\2726";              /* a four-pointed star */
  position: absolute;
  left: 1px;
  top: 12px;
  font-size: 12px;
  line-height: 1;
  color: var(--g4);
}

/* A CONDITION ON A BULLET. The only one is Enterprise's customization: the
   monthly price does not carry the build, and a bullet promising it at $99 a
   site would be the one line on this page a customer could hold us to. */
.prc__badge {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 9px;
  border-radius: var(--radius);
  background: var(--warn-soft);
  color: var(--warn);
  font-size: var(--chip-fs);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;   /* the kit chip's own hairline, so it stands 23px like a `.chip` */
}

/* `.prc__cta` is a kit button (`.btn.btn--lg.btn--block`, `.btn--primary` on
   the popular plan); the class is a hook and carries no rule of its own. */

/* --- Resource limits, at the foot of each card ------------------------------
   A native <details>, so the whole thing works with no script: the summary is
   already a button, the keyboard already opens it, and a screen reader already
   announces it as expanded or collapsed.

   The panel is absolutely positioned and opens UPWARD over the card's own
   feature list. Two consequences worth knowing:

   - `left: 0; right: 0` rather than a fixed width, so the panel is exactly the
     card's width and can never hang off the right-hand edge of the last column
     or off a phone.
   - a card with an open panel is lifted above its neighbours. The cards are
     grid siblings with `position: relative` and no z-index, so paint order is
     DOM order and the card to the RIGHT would otherwise draw over the panel. */

.prc__res {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.prc:has(.prc__res[open]) { z-index: 5; }

.prc__ressum {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  list-style: none;
  padding: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
  cursor: pointer;
  border-radius: var(--radius);
  transition: color var(--dur) var(--ease);
}
/* Safari still draws the disclosure triangle without this. */
.prc__ressum::-webkit-details-marker { display: none; }
.prc__ressum:hover { color: var(--g3); }
.prc__ressum:focus-visible {
  outline: 2px solid var(--g3);
  outline-offset: 2px;
}

.prc__qm {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
}
.prc__res[open] .prc__ressum { color: var(--g3); }
.prc__res[open] .prc__qm {
  background: var(--g3);
  border-color: var(--g3);
  color: #fff;
}

/* WIDER THAN THE CARD, and two columns inside it.

   The first build was the card's own width with the rows in one column, and
   at ~300px every label took a 130px column and its note wrapped to six
   lines: a panel taller than the card it opened from, which the reader then
   had to scroll up to read. Width is what buys the height back, so the panel
   escapes the card (centred on it, clamped to the viewport) and seats the
   eight ceilings four-and-four. */
.prc__respop {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 32px));
  bottom: calc(100% + 10px);
  z-index: 6;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  /* Opaque: it floats over the card's own text, and a translucent panel over
     a feature list is two lists on top of each other. */
  background: var(--surface);
  box-shadow: 0 24px 60px -24px rgba(20, 60, 66, .38);
  text-align: left;
}
.prc__res { position: relative; }

/* Centring works for the middle card and runs a 560px panel 300px off the
   screen from the last one (measured, at 1280px: right edge 1581). So the
   EDGE cards anchor to their own edge instead and only the middle is centred.
   With one card per row `:first-child` and `:last-child` both match; the
   later rule wins and right: 0 on a full-width card is left: 0 anyway. */
.prc:first-child .prc__respop { left: 0; right: auto; transform: none; }
.prc:last-child .prc__respop { left: auto; right: 0; transform: none; }

/* Stacked, the panel is simply the card: there is no room to escape into. */
@media (max-width: 620px) {
  .prc__respop {
    left: 0;
    right: 0;
    width: auto;
    transform: none;
  }
}

.prc__resh {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Two columns, so eight ceilings are four rows tall rather than eight.
   Under 460px of panel (a phone) they stack, where one column is the only
   thing that fits. */
.prc__resl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 22px;
  margin: 0;
}
@media (max-width: 520px) {
  .prc__resl { grid-template-columns: 1fr; }
}
/* STACKED, label over figure. The row form was measured and rejected: at a
   250px column a long value ("2 GB (about 16,000 pages)") took most of the
   width and wrapped its label to one word a line. The same finding the
   weather report's own facts list made. */
.prc__resrow {
  padding: 7px 0;
  border-top: 1px solid var(--rule);
}
/* The first row of EACH column, not only the first of the list — in a grid
   `:first-child` is one cell and the other column would keep a stray rule
   above it. */
.prc__resrow:nth-child(-n + 2) { border-top: 0; padding-top: 0; }
@media (max-width: 520px) {
  .prc__resrow:nth-child(2) { border-top: 1px solid var(--rule); padding-top: 7px; }
  .prc__resrow:first-child { border-top: 0; padding-top: 0; }
}
.prc__resrow dt {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--ink-faint);
}
.prc__resrow dd {
  margin: 1px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.prc__resfoot {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-faint);
}

@media (prefers-reduced-motion: no-preference) {
  .prc__respop { animation: prc-pop var(--dur-slow) var(--ease-out); }
}
@keyframes prc-pop {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* --- The credit layer ------------------------------------------------------- */

.pr__rate {
  margin: 0 0 20px;
  padding: 12px 18px;
  border-radius: var(--radius);
  background: var(--grad-wash);
  font-size: 14.5px;
  color: var(--ink-2);
}
.pr__rate b { color: var(--ink); }

.pr__h3 {
  margin: 48px 0 6px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
}

/* Four readings of one wallet. The "or" carries the whole meaning, so it is
   printed rather than implied by a comma. */
.pr__buys { font-size: 13px; color: var(--ink-2); }
.pr__buys i { font-style: normal; color: var(--ink-faint); }
.pr__buys span { white-space: nowrap; }

.pr__rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px 26px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.pr__rules li {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-3);
}
.pr__rules b { display: block; color: var(--ink-2); font-weight: 600; }

/* The volume-limit group inside the comparison table. */
.pr__grouph th {
  padding-top: 26px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.pr__trialnote {
  max-width: 720px;
  margin: 28px auto 0;
  text-align: center;
  font-size: 14px;
  color: var(--ink-3);
}

/* --- Section rhythm --------------------------------------------------------
   The comparison and the assistant are open sections, not boxed cards: a
   left-aligned head (.pr__ch), a hairline-framed table, air on both sides. The End-to-End
   panel that used to close the page came off on 2026-09-15 (customer
   request). */

.pr__compare, .pr__assistant { margin-top: 64px; }

.pr__sub {
  max-width: none;
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}
.pr__sub b { color: var(--ink); font-weight: 500; }

/* --- Tables ---------------------------------------------------------------- */

.pr__scroll {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}

.pr__table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14px;
}
.pr__table th, .pr__table td {
  padding: 13px 16px;
  text-align: left;
  border-bottom: 1px solid var(--rule);
}
.pr__table thead th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--surface-2);
}
.pr__table tbody th { font-weight: 500; color: var(--ink); }
.pr__table tbody td { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pr__table tbody tr:last-child th,
.pr__table tbody tr:last-child td { border-bottom: 0; }

.pr__foot {
  max-width: 680px;
  margin: 16px auto 0;
  text-align: center;
  font-size: 13px;
  color: var(--ink-3);
}

/* --- Comparison ----------------------------------------------------------
   The three cards answer "what do I get". Only this answers "what do I lose
   by going down a tier", which is the question somebody comparing prices is
   actually asking. */

.pr__table--cmp { min-width: 640px; }
.pr__table--cmp th[scope="row"] { width: 38%; font-weight: 400; }
.pr__table--cmp thead th { text-align: center; }
.pr__table--cmp .pr__ccol { border-left: 1px solid var(--rule); }
.pr__table--cmp th, .pr__table--cmp td { vertical-align: middle; }

.pr__clbl { display: block; color: var(--ink); font-weight: 500; }
.pr__cnote {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--ink-3);
  max-width: 52ch;
}

/* Centered over the column. Named with the table's own class because
   `.pr__table td` sets text-align: left at higher specificity. */
.pr__table--cmp .pr__ccol { text-align: center; }
.pr__ccol { text-align: center; font-size: 13.5px; }

/* The popular column, washed with the gradient the whole way down rather than
   outlined: a border on every cell of one column draws a ladder. */
.pr__ccol--pop { color: var(--g3); }
.pr__table--cmp thead th:nth-child(3),
.pr__table--cmp tbody td:nth-child(3) { background: var(--grad-wash); }

/* The two answers a bool row can give. They differ by WORD as well as by
   colour and weight, so a reader who cannot tell the teal from the grey can
   still tell an inclusion from an absence. */
.pr__yes { color: var(--g3); font-weight: 600; }
.pr__no { color: var(--ink-3); }


/* --- Legal ------------------------------------------------------------------ */

.pr__legal {
  margin: 48px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-faint);
}

/* --- Narrow -------------------------------------------------------------- */

@media (max-width: 760px) {
  .pr__compare, .pr__assistant { margin-top: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .pr__opt span, .prc { transition: none; }
  .prc:hover { transform: none; }
}

/* ===========================================================================
   THE LADDER, THE AGENT CARDS AND THE CALCULATOR (2026-09-21, the customer's
   own design for the compare and credits sections).

   Everything below is laid out on the page's own tokens (--g3/--g4, --rule,
   --ink-*) rather than on colours of its own, so the new blocks and the plan
   cards above them are one page rather than two.
   =========================================================================== */

/* --- a section head -------------------------------------------------------
   ONE shape for every section on the page: kicker, title, the sentence under
   it, all left-aligned on one edge, with a hairline above the section so the
   page reads as a sequence of chapters. Sizes are the operator home's scale
   (--oh-h2 1.3rem, --oh-h3 1rem) so this page and the others match. */
.pr__ch {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 28px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}
.pr__ch--sub { margin-top: 48px; padding-top: 0; border-top: 0; margin-bottom: 20px; }
.pr__kick {
  margin: 0;
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--g3);
}
.pr__ch h2, .pr__ch h3 { margin: 0; letter-spacing: -.01em; font-weight: 600; color: var(--ink); }
.pr__ch h2 { font-size: 1.3rem; line-height: 1.25; }
.pr__ch h3 { font-size: 1rem; line-height: 1.3; }
.pr__chsub {
  margin: 2px 0 0;
  font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: none;
}
.pr__chsub b { color: var(--ink); font-weight: 600; }

/* --- the ladder ----------------------------------------------------------- */
.prs {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px; align-items: stretch;
}
.prs__c {
  position: relative;
  display: flex; flex-direction: column;
  padding: 26px 24px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.prs__c--pop { border-color: color-mix(in srgb, var(--g4) 55%, var(--rule)); }
/* The arrow between one card and the next. Absolutely placed ON the card so
   it is not a list item of its own -- a screen reader hears three plans, not
   five things -- and hidden when the cards stack, where left-to-right is no
   longer the direction the ladder runs. */
.prs__arrow {
  position: absolute; left: -11px; top: 46px;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink); color: #fff;
  font-size: 11px; line-height: 1;
}
.prs__n { margin: 0 0 12px; font-size: 21px; letter-spacing: -.01em; }
.prs__n small {
  margin-left: 8px; font-size: 14px; font-weight: 400; color: var(--ink-3);
}
/* A chip (the kit's metrics), in the page's own tint. */
.prs__from {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 14px; padding: 2px 9px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--g4) 14%, transparent);
  color: var(--g3); font-size: var(--chip-fs); font-weight: 600; line-height: 1.5;
  border: 1px solid transparent;   /* the kit chip's own hairline, so it stands 23px like a `.chip` */
}
.prs__from::before { content: "\2303"; font-size: 13px; }
.prs__adds { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.prs__adds li { display: flex; gap: 10px; font-size: 15px; color: var(--ink-2); }
.prs__adds b { color: var(--ink); font-weight: 600; }
/* The tick in its own tinted square, drawn rather than set as a glyph so a
   font that fails to load cannot take the meaning of the list with it. */
.prs__adds > li > i {
  flex: none; width: 20px; height: 20px; margin-top: 1px;
  border-radius: var(--radius); position: relative;
  background: color-mix(in srgb, var(--g4) 16%, transparent);
}
.prs__adds > li > i::before {
  content: ""; position: absolute; left: 6px; top: 6px;
  width: 8px; height: 4px;
  border-left: 2px solid var(--g3); border-bottom: 2px solid var(--g3);
  transform: rotate(-45deg);
}
.prs__c--pop .prs__adds > li > i,
.prs__c:last-child .prs__adds > li > i {
  background: var(--g3);
}
.prs__c--pop .prs__adds > li > i::before,
.prs__c:last-child .prs__adds > li > i::before { border-color: #fff; }
/* `margin-top: auto` pins it to the foot, so the sentence lines up across
   three cards of uneven bullet counts. */
.prs__when {
  margin: auto 0 0; padding-top: 16px;
  border-top: 1px dashed var(--rule);
  font-size: 14px; line-height: 1.55; color: var(--ink-3);
}
.prs__when b { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) {
  .prs { grid-template-columns: minmax(0, 1fr); }
  .prs__arrow { display: none; }
  .prs__when { margin-top: 18px; }
}

/* --- what every plan carries ---------------------------------------------- */
.prs__every {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
  margin: 22px 0 0; padding: 18px 20px;
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  font-size: 14px; color: var(--ink-2);
}
.prs__every > b { color: var(--ink); }
/* The kit's `.chip--line`, by metric: the tick inside is an <i>, which the
   kit's own `.chip > i` would draw as a dot. */
.prs__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: var(--chip-fs); font-weight: 600; line-height: 1.5;
}
.prs__chip > i { color: var(--g4); font-style: normal; }

/* --- the row-by-row table, behind a disclosure ---------------------------- */
.prs__more { margin: 30px 0 0; }
/* A <summary> wearing the kit's `.btn`: the same height, padding, border and
   hover as every other button on the page. */
.prs__moresum {
  display: flex; align-items: center; justify-content: center;
  width: fit-content; margin: 0 auto;
  height: var(--ctl-h); padding: 0 var(--ctl-px);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: var(--ctl-fs); font-weight: 550; line-height: 1; cursor: pointer; list-style: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.prs__moresum::-webkit-details-marker { display: none; }
.prs__moresum:hover { background: var(--surface-2); border-color: var(--accent-line); color: var(--accent-ink); }
.prs__moresum:active { transform: translateY(1px); }
.prs__moresum:focus-visible { outline: none; box-shadow: var(--ring); }
.prs__more[open] .prs__moresum { border-color: var(--accent-line); color: var(--accent-ink); }
.prs__more[open] .prs__moreopen,
.prs__more:not([open]) .prs__moreshut { display: none; }
.prs__more > .pr__scroll { margin-top: 26px; }

/* --- the agents ----------------------------------------------------------- */
.pra {
  list-style: none; margin: 0 0 40px; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
}
.pra__c {
  display: flex; gap: 14px; padding: 18px 20px;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
/* Dashed and tinted: it is the one agent that is quoted rather than included,
   and the card should not look like the four that ship. */
.pra__c--custom {
  border-style: dashed;
  background: color-mix(in srgb, var(--g4) 7%, transparent);
}
.pra__m {
  flex: none; width: 36px; height: 36px; border-radius: var(--radius);
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--g4) 16%, transparent);
  color: var(--g3); font-size: 13px; font-weight: 700;
}
.pra__c--custom .pra__m {
  background: var(--ink); color: #fff; font-size: 18px; font-weight: 400;
}
.pra__t { min-width: 0; }
.pra__t h3 {
  margin: 0 0 4px; font-size: 16px; letter-spacing: -.01em;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.pra__t p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 760px) { .pra { grid-template-columns: minmax(0, 1fr); } }

/* --- the allowances ------------------------------------------------------- */
.prw {
  list-style: none; margin: 0 0 8px; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px; align-items: stretch;
}
.prw__c {
  display: flex; flex-direction: column;
  padding: 24px; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.prw__c--pop { border-color: color-mix(in srgb, var(--g4) 55%, var(--rule)); }
.prw__n { margin: 0 0 12px; font-size: 19px; letter-spacing: -.01em; }
.prw__p { margin: 0; font-size: 34px; font-weight: 600; letter-spacing: -.02em; }
.prw__cur { font-size: 20px; margin-right: 2px; color: var(--ink-3); }
.prw__p small {
  margin-left: 6px; font-size: 14px; font-weight: 400; color: var(--ink-3);
}
.prw__cr {
  margin: 6px 0 16px; padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 14px; color: var(--ink-2);
}
.prw__d { margin: 0; display: grid; gap: 3px; }
.prw__d dt {
  font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3);
}
.prw__d dd {
  margin: 0 0 12px; font-size: 15px; line-height: 1.5; color: var(--ink);
}
.prw__d dd:last-child { margin-bottom: 0; }
@media (max-width: 900px) { .prw { grid-template-columns: minmax(0, 1fr); } }

/* --- the calculator ------------------------------------------------------- */
.prcalc {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
  box-shadow: var(--shadow);
}
.prcalc__rows { padding: 26px 28px; min-width: 0; }
.prcalc__h { margin: 0 0 4px; font-size: 19px; letter-spacing: -.01em; }
.prcalc__sub { margin: 0 0 20px; font-size: 14px; color: var(--ink-3); }
.prcalc__r {
  display: grid; grid-template-columns: minmax(0, 1fr) 170px 90px;
  gap: 10px 18px; align-items: center;
  padding: 12px 0; border-bottom: 1px dashed var(--rule);
}
.prcalc__r:last-child { border-bottom: 0; padding-bottom: 0; }
.prcalc__l { font-size: 15px; color: var(--ink); }
.prcalc__l small { display: block; font-size: 13px; color: var(--ink-3); }
.prcalc__s { width: 100%; accent-color: var(--g3); }
.prcalc__o { text-align: right; font-variant-numeric: tabular-nums; }
.prcalc__o b { display: block; font-size: 16px; font-weight: 600; }
.prcalc__o small {
  display: block; font-size: 12px; color: var(--ink-3);
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}
.prcalc__out {
  padding: 26px 28px; min-width: 0;
  background: color-mix(in srgb, var(--g4) 8%, transparent);
  border-left: 1px solid var(--rule);
}
.prcalc__kick {
  margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}
.prcalc__total {
  margin: 0; font-size: 46px; font-weight: 700; letter-spacing: -.03em;
  line-height: 1;
}
.prcalc__cur { font-size: 26px; color: var(--ink-3); margin-right: 2px; }
.prcalc__total small {
  margin-left: 8px; font-size: 16px; font-weight: 400; color: var(--ink-3);
}
.prcalc__cr {
  margin: 10px 0 18px;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 14px; color: var(--ink-2);
}
.prcalc__tier {
  display: grid; gap: 9px; padding: 16px 18px;
  border-radius: var(--radius); background: var(--surface);
  font-size: 14px; color: var(--ink-2);
}
.prcalc__tier b { color: var(--ink); font-size: 15px; }
.prcalc__bar {
  display: block; height: 8px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--ink-3) 22%, transparent);
  overflow: hidden;
}
.prcalc__bar > i { display: block; height: 100%; width: 0; background: var(--g3); }
.prcalc__note { margin: 18px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink-3); }
@media (max-width: 980px) {
  .prcalc { grid-template-columns: minmax(0, 1fr); }
  .prcalc__out { border-left: 0; border-top: 1px solid var(--rule); }
  .prcalc__r { grid-template-columns: minmax(0, 1fr) 70px; }
  .prcalc__s { grid-column: 1 / -1; }
}

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

/* The operator's plain head (templates/core/pricing.html): the page's name,
   no glow, the same type every other operator page uses. CENTRED
   (2026-09-29, customer request), with the tabs and the controls under it,
   so the head lines up over the three plan cards. */
.pr__head--plain { text-align: center; }
.pr__head--plain::before { content: none; }
.pr__plain { margin: 0 0 18px; font-size: 1.5rem; line-height: 1.2; font-weight: 650;
             letter-spacing: -.02em; color: var(--ink); }
/* The page's own tall top padding is for the marketing headline; under a
   one-line title it is 70px of nothing. */
.pr:has(.pr__head--plain) { padding-top: 22px; }

/* --- whose prices: the App user / Partner switch (2026-09-29) ------------- */
.pr__who { display: inline-flex; gap: 4px; margin: 0 0 28px; padding: 4px;
           border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.pr__who a { padding: 8px 16px; border-radius: calc(var(--radius) - 3px); font-size: 14px; font-weight: 550;
             color: var(--ink-2); text-decoration: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.pr__who a:hover { color: var(--ink); background: var(--surface-2); }
.pr__who a[aria-current="page"] { background: var(--ink); color: #fff; }
@media (max-width: 560px) { .pr__who { display: flex; } .pr__who a { flex: 1; text-align: center; padding: 8px 10px; font-size: 13px; } }

/* --- the partner's prices: the plan cards are `.prc` (above); what is
   left here is the rate card under them. ----------------------------------- */
.prp { margin-top: 56px; }
/* No period or site controls on this tab, so the cards take their gap from the tabs. */
#pr-partner { margin-top: 44px; }
.prp__rates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.prp__rates div { display: grid; gap: 4px; padding: 18px 20px; background: var(--surface);
                  border: 1px solid var(--rule); border-radius: var(--radius); }
.prp__rates b { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.prp__rates span { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 860px) { .prp__rates { grid-template-columns: minmax(0, 1fr); } }