/* ============================================================================
   PRICING — /pricing/
   ----------------------------------------------------------------------------
   Layers on styles.css + pages.css. Everything here is pricing-specific; the
   page reuses .page-header, .page-cta, .faq-item, .btn-*, .band-* and the
   section-label / section-title / section-sub rhythm from the shared sheets.

   Two constraints shape this file:

   · FIGURES ARE MONO. The Ledger system reserves IBM Plex Mono for numbers, and
     a pricing page is almost entirely numbers. Every peso amount, cap and
     allowance is set in it, which also makes the comparison columns align
     optically without a fixed-width hack.

   · THE TABLE MUST SURVIVE 320px. A 5-column feature matrix cannot reflow into
     a phone, so below 900px it becomes a stack of per-plan cards built from the
     same markup via display rules — no duplicate content, no JS. The site's
     smoke test checks for horizontal overflow at 320px, and a wide table is the
     usual way that breaks.
   ========================================================================== */

/* ---- Billing-period toggle ------------------------------------------------ */
.pr-toggle{display:flex;align-items:center;justify-content:center;gap:0.75rem;margin:2rem 0 0}
.pr-toggle-track{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:0.25rem}
.pr-toggle-btn{font-family:var(--font-mono);font-size:0.78rem;letter-spacing:0.06em;text-transform:uppercase;font-weight:500;color:var(--muted);background:none;border:0;border-radius:999px;padding:0.5rem 1.1rem;cursor:pointer;transition:background .2s var(--ease),color .2s}
.pr-toggle-btn[aria-pressed="true"]{background:var(--surface);color:var(--text);box-shadow:var(--sh-card)}
.pr-save{font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--brand-deep);background:var(--brand-wash);border-radius:999px;padding:0.3rem 0.6rem}

/* ---- Plan cards ---------------------------------------------------------- */
/* padding-top clears the seam between the white header band and this paper one.
   The featured card's badge is pulled ABOVE its card (top:-0.7rem), so with no
   top padding it landed on the band boundary and read as a rendering slip. */
.pr-plans{background:var(--paper);padding:3.25rem var(--gutter) var(--band)}
.pr-grid{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;align-items:stretch}
.pr-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem 1.4rem;display:flex;flex-direction:column;box-shadow:var(--sh-card)}
/* The recommended tier is lifted rather than recoloured — the Ledger system
   keeps emerald for accents on paper, so a full green card would shout. */
.pr-card--featured{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand),var(--sh-card-hover);position:relative}
.pr-badge{position:absolute;top:-0.7rem;left:1.4rem;font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;background:var(--brand-fill-mid);color:#fff;border-radius:999px;padding:0.3rem 0.7rem}
.pr-name{font-family:'Fraunces',serif;font-size:1.35rem;letter-spacing:-0.015em;color:var(--text);margin-bottom:0.35rem}
.pr-for{font-size:0.86rem;color:var(--muted);line-height:1.55;min-height:2.6rem;margin-bottom:1.1rem}
/* min-height equalizes the description slot so every price and CTA sits on one
   line across the row. 2.6rem fits the two-line copy — but in the four-column
   layout (>1100px) Growth's copy runs three lines and pushed its price/button
   below the others'. Reserve three lines there; at 1100px and below the cards
   are wide enough that every description is back to two lines. */
@media(min-width:1101px){
  .pr-for{min-height:4rem}
}
.pr-price{font-family:var(--font-mono);font-size:2rem;font-weight:600;color:var(--text);letter-spacing:-0.02em;line-height:1.1}
.pr-price-unit{font-family:var(--font-mono);font-size:0.8rem;color:var(--muted);font-weight:400}
.pr-price-note{font-family:var(--font-mono);font-size:0.74rem;color:var(--muted);margin-top:0.4rem;min-height:1.1rem}
.pr-card .btns{margin:1.25rem 0 1.1rem}
.pr-card .btns a{width:100%;justify-content:center}
.pr-caps{list-style:none;margin:0;padding:1.1rem 0 0;border-top:1px solid var(--line);display:grid;gap:0.55rem}
.pr-caps li{display:flex;justify-content:space-between;gap:0.75rem;font-size:0.87rem;color:var(--text-2)}
.pr-caps .pr-num{font-family:var(--font-mono);color:var(--text);font-weight:500}

/* ---- Comparison matrix --------------------------------------------------- */
.pr-compare{background:var(--surface);padding:var(--band) var(--gutter);border-top:1px solid var(--line)}
.pr-table-wrap{max-width:var(--wrap);margin:2rem auto 0}
.pr-table{width:100%;border-collapse:collapse;font-size:0.9rem}
.pr-table th,.pr-table td{padding:0.8rem 0.9rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.pr-table thead th{font-family:var(--font-mono);font-size:0.74rem;letter-spacing:0.09em;text-transform:uppercase;color:var(--brand-deep);border-bottom:1px solid var(--line-strong);position:sticky;top:0;background:var(--surface);z-index:1}
.pr-table tbody th{font-weight:500;color:var(--text-2);width:34%}
.pr-table td{text-align:center;color:var(--text);font-family:var(--font-mono);font-size:0.85rem}
.pr-row-group th{font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.11em;text-transform:uppercase;color:var(--muted);background:var(--surface-2);padding-top:1.1rem;padding-bottom:0.55rem}
/* A bare ✓ glyph does not survive 23 rows of scanning — at a glance the column
   reads as undifferentiated grey text. The badge gives the eye something to
   track down the column, and the character stays inside the span so the cell
   still reads correctly to a screen reader and in the mobile stacked view. */
.tick{display:inline-flex;align-items:center;justify-content:center;width:1.35rem;height:1.35rem;border-radius:50%;background:var(--brand-wash);color:var(--brand-deep);border:1px solid var(--brand);font-size:0.78rem;line-height:1;font-weight:700}
/* The dash is deliberately quiet: "not included" should recede, not compete
   with the ticks for attention. */
.dash{color:var(--muted-2);font-size:1rem}
.pr-addon{color:var(--text-2);font-size:0.8rem}
.pr-addon{color:var(--text-2);font-size:0.8rem}

/* ---- Add-on catalogue ---------------------------------------------------- */
.pr-addons{background:var(--paper);padding:var(--band) var(--gutter)}
.pr-addon-grid{max-width:var(--wrap);margin:2rem auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.pr-addon-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.25rem 1.3rem}
.pr-addon-card h3{font-size:1rem;color:var(--text);margin-bottom:0.3rem}
.pr-addon-card p{font-size:0.85rem;color:var(--muted);line-height:1.6;margin-bottom:0.8rem}
.pr-addon-price{font-family:var(--font-mono);font-size:1.05rem;font-weight:600;color:var(--text)}
.pr-addon-price span{font-size:0.75rem;font-weight:400;color:var(--muted)}
.pr-addon-meta{font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.05em;color:var(--brand-deep);margin-top:0.5rem}

/* ---- Sales-led band (Enterprise / on-premise) ----------------------------
   Set on the deep ink plate on purpose. The four tiers above are self-serve —
   you sign up and pay. These two are a different BUYING MOTION: scoped, quoted,
   contract. Giving them their own dark band says that before a word is read,
   and stops anyone hunting for a "subscribe" button that does not exist for
   them. No price is shown, because there is not one to show. */
.pr-sales{padding:var(--band) var(--gutter)}
.pr-sales-grid{max-width:var(--wrap);margin:2.25rem auto 0;display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
.pr-sales-card{border:1px solid var(--ink-line);border-radius:var(--r);padding:1.6rem 1.5rem;background:var(--ink-2)}
.pr-sales-card h3{font-family:'Fraunces',serif;font-size:1.3rem;letter-spacing:-0.015em;color:var(--on-ink);margin-bottom:0.45rem}
.pr-sales-card p{font-size:0.92rem;line-height:1.7;color:var(--on-ink-2);margin-bottom:1rem}
.pr-sales-list{list-style:none;margin:0 0 1.25rem;padding:0;display:grid;gap:0.5rem}
.pr-sales-list li{position:relative;padding-left:1.4rem;font-size:0.88rem;color:var(--on-ink-2);line-height:1.6}
.pr-sales-list li::before{content:'';position:absolute;left:0;top:0.55rem;width:0.4rem;height:0.4rem;border-radius:50%;background:var(--signal)}
.pr-sales-tag{font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--signal);margin-bottom:0.7rem}

/* ---- Notes band ---------------------------------------------------------- */
.pr-notes{max-width:880px;margin:2.5rem auto 0;display:grid;gap:0.7rem}
.pr-notes li{position:relative;padding-left:1.5rem;font-size:0.9rem;color:var(--muted);line-height:1.65}
.pr-notes li::before{content:'';position:absolute;left:0;top:0.55rem;width:0.45rem;height:0.45rem;border-radius:50%;background:var(--brand)}

/* ---- Responsive ---------------------------------------------------------- */
@media(max-width:1100px){
  .pr-grid{grid-template-columns:repeat(2,1fr)}
  .pr-addon-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  /* The matrix stops being a table and becomes one block per plan. Each cell
     carries its row label in a data attribute, so the phone layout reads from
     the SAME markup — no second copy of the content to drift. */
  .pr-table thead{display:none}
  .pr-table,.pr-table tbody,.pr-table tr,.pr-table th,.pr-table td{display:block;width:auto}
  .pr-table tbody th{width:auto;background:var(--surface-2);border-bottom:1px solid var(--line-strong);margin-top:1.25rem;font-family:var(--font-mono);font-size:0.76rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-2)}
  .pr-table td{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;text-align:right}
  .pr-table td::before{content:attr(data-plan);font-family:var(--font-mono);font-size:0.74rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);text-align:left}
  .pr-row-group th{margin-top:2rem}
  .pr-plans{padding-top:2.25rem}
}
@media(max-width:640px){
  .pr-grid,.pr-addon-grid,.pr-sales-grid{grid-template-columns:1fr}
  .pr-toggle{flex-wrap:wrap}
}