/* ==========================================================================
   Pricing page layout.

   Reuses everything in base.css and adds nothing to it. No colour, size,
   radius or duration is written by hand here: every value comes from a
   --rw-* token in tokens.css.

   Section order is the commitment ladder, by Anton's call on 2026-08-20:
   the Experience Pass, then packages, then single sessions, then
   memberships. The page deliberately never prints a saving except on The
   Renew Stack, because that is the only one of the four that is genuinely
   discounted. See README open issue 1.
   ========================================================================== */

/* ------------------------------------------------------- shared bits --- */

.sec-head { max-width: 46rem; margin-bottom: var(--rw-s-8); }
.sec-head .lead { margin-top: var(--rw-s-4); }

/* -------------------------------------------------------- section name --- */

/* By Anton's call on 2026-08-20 the page carries no headline under a section
   name: the section name IS the heading. It stays in the mono, because that is
   the site's label voice, and it is sized at 28px so rust clears the large
   text threshold it is limited to (3.68 on cream, AA-large only). */
.sec-name {
  font-family: var(--rw-font-mono);
  /* Floored at 24px, never --rw-fs-xl, which clamps to 22 on a phone. Rust
     measures 3.68 on cream and 4.25 on white: both clear AA only above the
     large text threshold, so 24px is the smallest legal size for it. */
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.75rem);
  font-weight: var(--rw-w-semi);
  text-transform: uppercase;
  letter-spacing: var(--rw-ls-mono);
  line-height: 1.2;
  color: var(--rw-rust);
}

[data-rw-theme="dark"] .sec-name,
.section--dark .sec-name { color: var(--rw-blush); }

.ppass__copy .sec-name { margin-bottom: var(--rw-s-4); }
.sec-name--card { margin-bottom: var(--rw-s-1); }

/* -------------------------------------------------------- page header --- */

/* A band, not a hero. Someone who clicked Pricing wants the numbers, so this
   is kept short enough that the first block of content is close to the fold. */
/* The band carries data-rw-theme="dark", which flips the semantic roles in
   tokens.css. Inside that scope --rw-bg IS navy and --rw-text IS cream, so
   reaching for --rw-text-inverse here would paint navy on navy. */
.phead {
  background: var(--rw-bg);
  color: var(--rw-text);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}

.phead__inner { max-width: 52rem; }
.phead__title { margin-top: var(--rw-s-4); }
.phead__lead { margin-top: var(--rw-s-5); max-width: var(--rw-measure); }

/* In-page jump links. Padded to a 44px target rather than left as bare text:
   these are a control strip, not links inside a sentence, so the WCAG 2.5.5
   prose exemption does not apply to them. */
.phead__jump {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--rw-s-2);
  margin-top: var(--rw-s-6);
}

.phead__jump a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--rw-s-4);
  border: var(--rw-border-w) solid var(--rw-veil-20);
  border-radius: var(--rw-r-pill);
  color: var(--rw-cream);
  text-decoration: none;
}

.phead__jump a:hover { background: var(--rw-veil-12); }

/* --------------------------------------------------------------- pass --- */

.ppass__inner {
  display: grid;
  gap: var(--rw-s-7);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 56rem) {
  .ppass__inner { grid-template-columns: 1.15fr 0.85fr; gap: var(--rw-s-8); }
}

.ppass__copy .h-sec { margin-top: var(--rw-s-4); }
.ppass__copy .lead { margin-top: var(--rw-s-5); max-width: var(--rw-measure); }
.ppass__ticks { margin-top: var(--rw-s-6); }

.ppass__card {
  background: var(--rw-slate-deep);
  border-radius: var(--rw-r-lg);
  padding: var(--rw-s-6);
  text-align: center;
}

/* Blush measures 4.26 on slate deep, which fails a 12px label. Cream is 7.89
   and mist is 4.6, so the card follows the same pairing the home page uses. */
.ppass__card > .mono { color: var(--rw-cream); }
.ppass__price { margin-top: var(--rw-s-4); color: var(--rw-white); }
.ppass__terms { margin-top: var(--rw-s-3); color: var(--rw-mist); }
.ppass__card .hairline { margin-block: var(--rw-s-5); background: var(--rw-veil-20); }

/* ----------------------------------------------------------- packages --- */

.packs {
  display: grid;
  gap: var(--rw-s-5);
  grid-template-columns: 1fr;
}

@media (min-width: 52rem) {
  .packs { grid-template-columns: repeat(3, 1fr); }
  /* The Renew Stack runs the full width above the other three. It is the only
     one with a real discount and the only one that fills a whole visit. */
  .pack--lead { grid-column: 1 / -1; }
}

.pack { display: flex; flex-direction: column; gap: var(--rw-s-3); }
.pack__flag { color: var(--rw-text-accent); }
.pack__price { margin-top: var(--rw-s-1); }

.pack__unit {
  font-size: var(--rw-fs-sm);
  font-weight: var(--rw-w-medium);
  color: var(--rw-text-muted);
  letter-spacing: var(--rw-ls-mono);
  margin-left: var(--rw-s-2);
}

/* The one savings line on the page. $170 against $215 is 21% off and worth
   stating. The other three save about $5, so they show contents and price
   and nothing else. */
.pack__save { color: var(--rw-text-muted); }

.pack__parts {
  list-style: none;
  display: grid;
  gap: var(--rw-s-2);
  padding-top: var(--rw-s-3);
  border-top: var(--rw-border-w) solid var(--rw-border-soft);
  color: var(--rw-text-muted);
}

/* Direct child only. The lead card wraps its content in two columns, and a
   descendant selector would push its button to the bottom of the column. */
.pack > .btn { margin-top: auto; }

/* The lead card is two columns of grouped content rather than six loose grid
   items. Assigning each item to a column individually left the left column
   empty for three rows, because the tall right hand items set the row heights. */
.pack__lead-main,
.pack__lead-detail {
  display: flex;
  flex-direction: column;
  gap: var(--rw-s-3);
}

.pack__lead-main .btn { align-self: start; margin-top: var(--rw-s-4); }

@media (min-width: 52rem) {
  .pack--lead {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--rw-s-7);
    align-items: start;
  }
  .pack--lead .pack__parts { border-top: 0; padding-top: 0; }
}

.packs__note { margin-top: var(--rw-s-6); max-width: var(--rw-measure); }

/* ---------------------------------------------------- single sessions --- */

/* Option B, picked by Anton on 2026-08-20: the whole list inside one card, two
   columns. It is about half the height of the full width version and it reads
   as a printed menu. The descriptions came out on Anton's canvas pass, so what
   is left is a price list and nothing else. */

.ledger {
  margin-top: var(--rw-s-7);
  padding: var(--rw-s-6);
  background: var(--rw-bg);
  border-radius: var(--rw-r-lg);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rw-s-7);
}

@media (min-width: 52rem) {
  .ledger {
    padding: var(--rw-s-7);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--rw-s-8);
  }
}

.ledger__group {
  padding-bottom: var(--rw-s-3);
  border-bottom: var(--rw-rule-w) solid var(--rw-rust);
  color: var(--rw-text);
}

.lrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rw-s-4);
  padding-block: var(--rw-s-3);
  border-bottom: var(--rw-border-w) solid var(--rw-border-soft);
}

/* Name and duration read as one phrase on a single line. The duration is the
   mono, so it separates from the name without needing its own column. */
.lrow__name {
  font-size: var(--rw-fs-base);
  font-weight: var(--rw-w-medium);
}

.lrow__dur {
  margin-left: var(--rw-s-3);
  color: var(--rw-text-muted);
}

.lrow__price {
  font-size: var(--rw-fs-lg);
  font-weight: var(--rw-w-semi);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.ledger__note {
  margin-top: var(--rw-s-4);
  color: var(--rw-text-muted);
}

.pnote {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rw-s-5);
  margin-top: var(--rw-s-8);
  padding: var(--rw-s-6);
  background: var(--rw-bg);
  border-radius: var(--rw-r-lg);
}

.pnote .body { max-width: 42rem; margin: 0; }

/* -------------------------------------------------------- memberships --- */

.tiers { display: grid; gap: var(--rw-s-6); grid-template-columns: 1fr; }

@media (min-width: 52rem) {
  .tiers--three { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 68rem) {
  .tiers--three { grid-template-columns: repeat(3, 1fr); }
}

.tier { display: flex; flex-direction: column; gap: var(--rw-s-4); }
.tier__price { margin-top: var(--rw-s-2); }

.tier__per {
  font-size: var(--rw-fs-lg);
  font-weight: var(--rw-w-medium);
  color: var(--rw-text-muted);
  letter-spacing: var(--rw-ls-mono);
}

.tier__terms { color: var(--rw-text-muted); }
/* The buttons bottom-align across cards that have different numbers of ticks.
   This used to live on .tier__for, the one-line description under each price.
   Those three lines came off on 2026-08-26, so the auto margin moved here or
   the buttons would sit at three different heights. The flex gap still sets
   the minimum spacing; auto only eats the leftover. */
.tier .btn { margin-top: auto; }

/* The middle tier carries the emphasis a middle tier normally gets. It is
   also the unconfirmed one: see the comment above the section in the HTML. */
.tier--feature { border-color: var(--rw-navy); box-shadow: var(--rw-shadow-md); }

.tiers__note {
  margin-top: var(--rw-s-6);
  color: var(--rw-text-muted);
  text-align: center;
}

/* --------------------------------------------- vouchers and group hire --- */

.pmore {
  display: grid;
  gap: var(--rw-s-5);
  grid-template-columns: 1fr;
}

@media (min-width: 52rem) {
  .pmore { grid-template-columns: repeat(2, 1fr); }
}

.pmore__card { display: flex; flex-direction: column; gap: var(--rw-s-4); }
.pmore__card .h-card { margin-top: var(--rw-s-2); }
.pmore__card .btn { margin-top: auto; }

.pcall {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--rw-s-5);
  margin-top: var(--rw-s-8);
  text-align: center;
}

.pcall .body { max-width: 34rem; margin: 0; }
.pcall__btn { white-space: nowrap; }