/* ════════════════════════════════════════════════════════════════════════
   /pricing — REBUILT FROM SCRATCH
   ────────────────────────────────────────────────────────────────────────
   Ethan, after several rounds of patching: "please restart the pricing page
   from scratch", "you have no borders, you need to build all the sections
   into clear displays not stretched, it's chaos."

   The old page inherited from site.css, pricing.css, page-flow.css and two
   override layers, and every fix fought one of them. Three faults kept
   recurring and all three are impossible by construction here:

     1  INVISIBLE TYPE. The old scope inverted --ink to bone so
        `background: var(--ink)` would flip for free, which meant
        `color: var(--ink)` resolved to bone-on-bone. Nothing in this file
        reads --ink. Every colour is a literal.
     2  FULL-BLEED CONTENT. Headings sat on a 1140 rail while their content
        ran 0 -> 1440. Here ONE rail wraps everything; no descendant is
        allowed to escape it.
     3  NO BORDERS. Every display is a framed card. The grid rule is the
        container's ground showing through a 1px gap, so no cell paints its
        own border and no line is ever doubled.

   Self-contained. It needs no other stylesheet to be correct.
   ════════════════════════════════════════════════════════════════════════ */

.pz {
  --pz-bone:  #faf8f3;
  --pz-paper: #fffdf9;
  --pz-ink:   #0a0a0a;
  --pz-mute:  rgba(10,10,10,.66);
  --pz-faint: rgba(10,10,10,.5);
  --pz-line:  rgba(10,10,10,.16);
  --pz-red:   #a4132c;
  --pz-rail:  1180px;
  --pz-pad:   clamp(1.15rem, 4vw, 2.5rem);

  background: var(--pz-bone);
  color: var(--pz-ink);
}

/* ONE RAIL. Everything sits inside it — headings and displays alike. */
.pz__rail {
  max-width: var(--pz-rail);
  margin-inline: auto;
  padding-inline: var(--pz-pad);
  box-sizing: border-box;
}

.pz__sec { padding-block: clamp(2.2rem, 5vw, 3.6rem); }
.pz__sec--tight { padding-block: clamp(1.4rem, 3vw, 2.2rem); }

/* ── TYPE ────────────────────────────────────────────────────────────── */
.pz__eyebrow {
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pz-red);
  margin: 0 0 .8rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.pz__eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--pz-red);
}

.pz__h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: -.015em;
  margin: 0;
  color: var(--pz-ink);
  text-wrap: balance;
}
.pz__h1 em { font-style: italic; color: var(--pz-red); }

.pz__h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.12;
  margin: 0 0 .6rem;
  color: var(--pz-ink);
}
.pz__h2 em { font-style: italic; color: var(--pz-red); }

.pz__lede {
  font-family: var(--font-body);
  font-size: clamp(.95rem, 1.1vw, 1.02rem);
  line-height: 1.66;
  color: var(--pz-mute);
  max-width: 62ch;
  margin: 1rem 0 0;
}
.pz__lede b, .pz__lede strong { color: var(--pz-ink); font-weight: 600; }

/* ── THE ANCHOR STRIP — three headline prices ────────────────────────── */
.pz__anchors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1px;
  background: var(--pz-line);
  border: 1px solid var(--pz-line);
}
.pz__anchor { background: var(--pz-ink); padding: 1.4rem 1.3rem; }
.pz__anchor .pz__k {
  font-family: var(--font-mono);
  font-size: .55rem; letter-spacing: .16em; text-transform: uppercase;
  color: #e8455a; margin: 0 0 .5rem;
}
.pz__anchor .pz__fig {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1;
  color: #f5f1e8; margin: 0;
}
.pz__anchor .pz__fig span {
  font-family: var(--font-body); font-size: .8rem; color: rgba(245,241,232,.6);
}
.pz__anchor .pz__d {
  font-family: var(--font-body); font-size: .84rem; line-height: 1.55;
  color: rgba(245,241,232,.66); margin: .6rem 0 0;
}

/* ── THE INDEX ───────────────────────────────────────────────────────── */
.pz__nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
  gap: .5rem;
}
.pz__tab {
  display: block;
  text-align: left;
  padding: .8rem .9rem;
  background: var(--pz-paper);
  border: 1px solid var(--pz-line);
  cursor: pointer;
  transition: border-color 150ms cubic-bezier(.23,1,.32,1),
              background 150ms cubic-bezier(.23,1,.32,1);
}
.pz__tab:hover { border-color: rgba(10,10,10,.42); }
.pz__tab:active { transform: scale(.985); }
.pz__tab:focus-visible { outline: 2px solid var(--pz-red); outline-offset: 2px; }
.pz__tab-t {
  display: block;
  font-family: var(--font-display); font-weight: 400;
  font-size: 1rem; line-height: 1.2; color: var(--pz-ink); margin-bottom: .18rem;
}
.pz__tab-d {
  display: block;
  font-family: var(--font-mono); font-size: .54rem;
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.5;
  color: var(--pz-faint);
}
.pz__tab.is-on { background: var(--pz-ink); border-color: var(--pz-ink); }
.pz__tab.is-on .pz__tab-t { color: #f5f1e8; }
.pz__tab.is-on .pz__tab-d { color: rgba(245,241,232,.6); }

/* Panels are visible by default. Only the SCRIPT hides them, so with JS
   off the page is one readable document and every price is findable. */
html.js-pz .pz__panel[hidden] { display: none; }
html.js-pz .pz__panel { animation: pz-in 240ms cubic-bezier(.23,1,.32,1) both; }
@keyframes pz-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ── THE DISPLAYS ────────────────────────────────────────────────────── */
/* One primitive: a framed card whose internal rules are the container's
   ground showing through a 1px gap. */
.pz__grid {
  display: grid;
  gap: 1px;
  background: var(--pz-line);
  border: 1px solid var(--pz-line);
  margin-top: clamp(1.1rem, 2.2vw, 1.7rem);
}
.pz__grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.pz__grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.pz__grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

.pz__cell {
  background: var(--pz-paper);
  padding: 1.2rem 1.15rem;
  display: flex;
  flex-direction: column;
}
.pz__cell-k {
  font-family: var(--font-mono);
  font-size: .55rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pz-red); margin: 0 0 .45rem;
}
.pz__cell-fig {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.35rem, 2.2vw, 1.8rem); line-height: 1;
  color: var(--pz-ink); margin: 0 0 .1rem;
}
.pz__cell-fig small {
  font-family: var(--font-body); font-size: .78rem; color: var(--pz-faint);
}
.pz__cell-n {
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.08rem; color: var(--pz-ink); margin: .5rem 0 .35rem;
}
.pz__cell-d {
  font-family: var(--font-body); font-size: .85rem; line-height: 1.58;
  color: var(--pz-mute); margin: 0;
}
.pz__cell ul {
  list-style: none; margin: .8rem 0 0; padding: 0;
  border-top: 1px solid var(--pz-line);
}
.pz__cell li {
  font-family: var(--font-mono); font-size: .6rem; line-height: 1.5;
  color: var(--pz-mute);
  padding: .4rem 0; border-bottom: 1px solid var(--pz-line);
}
.pz__cell li:last-child { border-bottom: 0; }

/* ── THE LEDGER — a two-column price list ────────────────────────────── */
.pz__ledger { margin-top: clamp(1.1rem, 2.2vw, 1.7rem); border: 1px solid var(--pz-line); background: var(--pz-paper); }
.pz__ledger-h {
  font-family: var(--font-mono);
  font-size: .55rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pz-faint);
  padding: .75rem 1.1rem;
  border-bottom: 1px solid var(--pz-line);
  margin: 0;
}
.pz__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  padding: .68rem 1.1rem;
  border-bottom: 1px solid var(--pz-line);
}
.pz__row:last-child { border-bottom: 0; }
.pz__row dt, .pz__row-l {
  font-family: var(--font-body); font-size: .89rem; line-height: 1.45;
  color: var(--pz-ink); margin: 0;
}
.pz__row dd, .pz__row-v {
  font-family: var(--font-mono); font-size: .78rem;
  color: var(--pz-ink); margin: 0; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pz__row-v em { font-style: normal; color: var(--pz-faint); }
.pz__row--total {
  background: var(--pz-ink);
}
.pz__row--total .pz__row-l { color: #f5f1e8; }
.pz__row--total .pz__row-v {
  color: #f5f1e8;
  font-family: var(--font-display); font-size: 1.15rem;
}

/* ── A DARK BAND, used sparingly as separation ───────────────────────── */
.pz__dark { background: var(--pz-ink); color: #f5f1e8; }
.pz__dark .pz__h2 { color: #f5f1e8; }
.pz__dark .pz__h2 em { color: #e8455a; }
.pz__dark .pz__lede { color: rgba(245,241,232,.72); }
.pz__dark .pz__lede b { color: #f5f1e8; }
.pz__dark .pz__eyebrow { color: #e8455a; }
.pz__dark .pz__eyebrow::before { background: #e8455a; }
.pz__dark .pz__grid { background: rgba(245,241,232,.16); border-color: rgba(245,241,232,.16); }
.pz__dark .pz__cell { background: var(--pz-ink); }
.pz__dark .pz__cell-n { color: #f5f1e8; }
.pz__dark .pz__cell-d { color: rgba(245,241,232,.7); }
.pz__dark .pz__cell-k { color: #e8455a; }

/* ── CTA ─────────────────────────────────────────────────────────────── */
.pz__cta {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase;
  padding: .8rem 1.3rem; margin-top: 1.4rem;
  text-decoration: none;
  background: var(--pz-red); color: #fff; border: 1px solid var(--pz-red);
  transition: background 150ms cubic-bezier(.23,1,.32,1);
}
.pz__cta:hover { background: #8d0b20; border-color: #8d0b20; }
.pz__cta:active { transform: scale(.985); }
.pz__cta--ghost {
  background: transparent; color: var(--pz-ink); border-color: var(--pz-line);
  margin-left: .5rem;
}
.pz__cta--ghost:hover { background: var(--pz-ink); border-color: var(--pz-ink); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .pz__tab, .pz__cta { transition: none; }
  html.js-pz .pz__panel { animation: none; }
}

/* ── EVERY DARK SURFACE, STATED LOUDLY ────────────────────────────────
   site.css's white-ground rule is
     main > section:not():not():not()… :where(h1,h2,h3,h4,p,…)
   which is specificity 0,3,2 — `main` and `section` are elements and each
   :not() counts. Nothing with a plain class beats it, so the type on every
   dark card in this file rendered ink-on-ink.
   This is a self-contained component and these are leaf declarations, so
   they say so rather than inventing a deeper selector to win by accident. */
.pz__anchor .pz__k   { color: #e8455a !important; }
.pz__anchor .pz__fig { color: #f5f1e8 !important; }
.pz__anchor .pz__fig span,
.pz__anchor .pz__d   { color: rgba(245,241,232,.68) !important; }

.pz__tab.is-on .pz__tab-t { color: #f5f1e8 !important; }
.pz__tab.is-on .pz__tab-d { color: rgba(245,241,232,.62) !important; }

.pz__row--total .pz__row-l,
.pz__row--total .pz__row-v { color: #f5f1e8 !important; }

.pz__dark .pz__h2      { color: #f5f1e8 !important; }
.pz__dark .pz__h2 em,
.pz__dark .pz__eyebrow { color: #e8455a !important; }
.pz__dark .pz__lede    { color: rgba(245,241,232,.74) !important; }
.pz__dark .pz__lede b  { color: #f5f1e8 !important; }
.pz__dark .pz__cell-n  { color: #f5f1e8 !important; }
.pz__dark .pz__cell-d  { color: rgba(245,241,232,.72) !important; }
.pz__dark .pz__cell-k  { color: #e8455a !important; }

.pz__cta               { color: #fff !important; }
.pz__cta--ghost        { color: var(--pz-ink) !important; }
.pz__cta--ghost:hover  { color: #fff !important; }

/* The dark band was rendering LIGHT: site.css's white-ground rule sets
   `background: var(--bone)` at 0,3,2 and beat `.pz__dark`, so bone type sat
   on a bone ground. The ground has to say so too, not just the type. */
section.pz__dark { background: var(--pz-ink) !important; }
.pz__cta span, .pz__cta * { color: inherit !important; }