/* ============================================
   OZYDE — Pricing pages (rentals.html, custom.html)

   Kept out of components.css deliberately: that file is large and edited by
   other work in parallel, and everything here belongs to exactly two pages.

   The visual idea across both pages is a LEDGER, not a pricing table. A rental
   or a commission is a total assembled from named parts, so the components
   below are built to show parts adding up — stacked rows, hairline rules,
   right-aligned figures, receipt leaders — rather than tiers competing in a
   card grid. Every value comes from tokens.css.
   ============================================ */

/* ---------- Shared: dark section wrapper ---------- */
.section-ink {
  /* background + color are set in gradient.css, loaded after this file */
}
.section-ink h2,
.section-ink h3 { color: var(--ink); }
.section-ink .section-head p { color: var(--ink); opacity: 0.66; }
.section-ink .eyebrow { color: var(--gold-deep); }

/* ---------- Shared: numeric type ----------
   Prices sit in the display face with tabular figures so columns of rands line
   up down the page — the whole point of a ledger. */
.figure {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ============================================
   COST STACK — "a rental is three parts"
   A horizontal ledger of the components that make up what you actually pay.
   ============================================ */
.cost-stack {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper);
}
.cost-part {
  padding: clamp(22px, 3vw, 34px);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cost-part:last-child { border-right: 0; }

.cost-part__step {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.cost-part__label {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.1vw, 23px);
  line-height: 1.15;
}

.cost-part__amount {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1;
  color: var(--gold-deep);
}

/* A part whose figure isn't confirmed yet reads as text, not a number — it
   must never be mistaken for a price we've quoted. */
.cost-part__amount.is-unset {
  font-size: clamp(17px, 1.9vw, 20px);
  font-style: italic;
  opacity: 0.72;
  color: inherit;
}

.cost-part__when {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.55;
}
.cost-part__note {
  font-size: 13.5px;
  line-height: 1.55;
  opacity: 0.72;
  margin-top: 2px;
}

@media (max-width: 820px) {
  .cost-stack { grid-template-columns: 1fr; }
  .cost-part { border-right: 0; border-bottom: 1px solid var(--line); }
  .cost-part:last-child { border-bottom: 0; }
}

/* ============================================
   BAND LADDER — live rental price bands
   Rows, not cards: a ladder you read top to bottom, price rail on the right.
   ============================================ */
.band-ladder {
  border-top: 1px solid var(--line);
}

.band-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: clamp(16px, 3vw, 40px);
  align-items: start;
  padding-block: clamp(24px, 3.2vw, 38px);
  border-bottom: 1px solid var(--line);
}

.band-row__rail {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--gold);
  padding-top: 6px;
}

.band-row__name {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.4vw, 27px);
  margin-bottom: 8px;
}
.band-row__desc {
  font-size: 14.5px;
  line-height: 1.6;
  opacity: 0.74;
  max-width: 54ch;
}

/* The dresses currently sitting in a band, named from the OS. */
.band-row__dresses {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.band-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  font-size: 12.5px;
  box-shadow: inset 0 0 0 1px var(--line);
}

.band-chip__price {
  font-variant-numeric: tabular-nums;
  opacity: 0.6;
}
/* A dress that's out on hire still shows its price — it just can't claim to
   be bookable. Same promise the gallery makes. */
.band-chip.is-out { opacity: 0.48; }
.band-chip.is-out .band-chip__price::after {
  content: " · out";
  font-style: italic;
}

.band-row__price {
  text-align: right;
  min-width: 132px;
}
.band-row__range {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.1;
  color: var(--gold-deep);
  white-space: nowrap;
}
.band-row__count {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-top: 8px;
}

@media (max-width: 760px) {
  .band-row {
    grid-template-columns: 1fr auto;
    column-gap: 16px;
  }
  .band-row__rail { grid-column: 1; grid-row: 1; padding-top: 0; margin-bottom: 4px; }
  .band-row__body { grid-column: 1 / -1; grid-row: 2; }
  .band-row__price { grid-column: 2; grid-row: 1; text-align: right; min-width: 0; }
  .band-row__count { margin-top: 4px; }
}

/* Placeholder rows shown while the studio's prices are still loading. */
.band-ladder.is-loading .band-row__range,
.band-ladder.is-loading .band-row__name {
  color: transparent;
  background: currentColor;
  opacity: 0.07;
  border-radius: var(--r-sm);
}

/* Shown only if the database can't be reached — the page falls back to the
   published range rather than inventing bands. */
.band-fallback {
  padding: clamp(24px, 3.4vw, 38px);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  text-align: center;
}
.band-fallback .figure {
  display: block;
  font-size: clamp(30px, 4vw, 44px);
  color: var(--gold-deep);
  margin-bottom: 10px;
}
.band-fallback p { font-size: 14px; opacity: 0.7; max-width: 46ch; margin-inline: auto; }

/* ============================================
   RECEIPT — a worked example, totalled
   Dotted leaders and a rule above the total: the one place on the site where
   the numbers are actually added up in front of you.
   ============================================ */
.receipt {
  max-width: 560px;
  padding: clamp(26px, 3.4vw, 40px);
  border-radius: var(--r-md);
  background: var(--paper);
  box-shadow: var(--shadow-soft);
}
.receipt__head {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 20px;
}

.receipt-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-block: 11px;
}
.receipt-line__label { font-size: 14.5px; }
.receipt-line__label small {
  display: block;
  font-size: 12px;
  opacity: 0.55;
  margin-top: 2px;
}
/* The leader dots: a flexible rule that fills whatever space is left. */
.receipt-line__leader {
  flex: 1;
  border-bottom: 1px dotted var(--line);
  transform: translateY(-4px);
}

.receipt-line__value {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  white-space: nowrap;
}
.receipt-line__value.is-unset {
  font-family: var(--font-body);
  font-size: 13px;
  font-style: italic;
  opacity: 0.6;
}

.receipt-total {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 12px;
  padding-top: 18px;
  border-top: 1.5px solid var(--ink);
}
.receipt-total__label {
  font-family: var(--font-display);
  font-size: 17px;
}
.receipt-total__value {
  margin-left: auto;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: clamp(26px, 3vw, 34px);
  color: var(--gold-deep);
  white-space: nowrap;
}
.receipt__foot {
  font-size: 12.5px;
  line-height: 1.6;
  opacity: 0.6;
  margin-top: 16px;
}

/* The receipt sits beside its explanation on wide screens. */
.receipt-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 900px) {
  .receipt-split { grid-template-columns: 1fr; }
  .receipt { max-width: none; }
}

/* ============================================
   TIER LADDER — custom-made complexity steps
   Ascending rows with a filled meter. No prices printed: a custom gown is
   quoted, and a made-up "from" figure would be worse than none.
   ============================================ */
.tier-ladder {
  border-top: 1px solid var(--line);
}

.tier-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: clamp(16px, 3vw, 40px);
  align-items: start;
  padding-block: clamp(26px, 3.4vw, 40px);
  border-bottom: 1px solid var(--line);
}

.tier-row__rail {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--gold);
  padding-top: 6px;
}

.tier-row__name {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 29px);
  margin-bottom: 8px;
}
.tier-row__desc {
  font-size: 14.5px;
  line-height: 1.6;
  opacity: 0.74;
  max-width: 56ch;
}

.tier-row__work {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.work-chip {
  padding: 6px 13px;
  border-radius: var(--r-pill);
  font-size: 12.5px;
  box-shadow: inset 0 0 0 1px var(--line);
  opacity: 0.85;
}

.tier-row__aside {
  text-align: right;
  min-width: 148px;
}

/* Meter: how much hand-work the tier carries, relative to the others. Bars,
   not a number, precisely because there is no confirmed number to print. */
.tier-meter {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 12px;
}
.tier-meter span {
  width: 20px;
  height: 4px;
  border-radius: var(--r-pill);
  background: currentColor;
  opacity: 0.16;
}
.tier-meter span.is-on {
  background: var(--gold);
  opacity: 1;
}

.tier-meter__label {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.45;
  margin-bottom: 10px;
}

/* ---- THE PRICE SLOT ----------------------------------------------------
   Every tier currently reads "Quoted at consultation" because OZYDE has not
   published a custom price list and guessing one would be inventing the
   studio's pricing.

   TO PUT REAL FIGURES IN: edit `TIERS` in js/pricing.js and give a tier a
   `from` value (e.g. from: 9500). The markup below switches automatically —
   nothing here needs changing.
   -------------------------------------------------------------------- */
.tier-quote {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.5;
  opacity: 0.6;
}
.tier-price {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: clamp(21px, 2.4vw, 27px);
  color: var(--gold-deep);
  white-space: nowrap;
}
.tier-price small {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.5;
  color: inherit;
  margin-bottom: 4px;
}

@media (max-width: 760px) {
  .tier-row {
    grid-template-columns: 1fr auto;
    column-gap: 16px;
  }
  .tier-row__rail { grid-column: 1; grid-row: 1; padding-top: 0; margin-bottom: 4px; }
  .tier-row__body { grid-column: 1 / -1; grid-row: 2; }
  .tier-row__aside { grid-column: 2; grid-row: 1; min-width: 0; }
  .tier-meter { margin-bottom: 0; }
  .tier-meter__label { margin-bottom: 6px; }
  .tier-quote { display: none; } /* repeated 7× on a narrow screen is noise */
}

/* ============================================
   COST DRIVERS — what moves a custom quote
   ============================================ */
.driver-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.driver-card {
  background: var(--paper);
  padding: clamp(22px, 2.8vw, 30px);
}
.driver-card h3 {
  font-family: var(--font-display);
  font-size: 20px;
  margin-bottom: 14px;
}
.driver-line {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.55;
  padding-block: 7px;
}
.driver-line__arrow {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 1px;
}
.driver-line--up .driver-line__arrow { color: var(--jewel-light); }
.driver-line--down .driver-line__arrow { color: var(--gold); }
.driver-line span { opacity: 0.78; }

/* ============================================
   PENDING TERMS — what we deliberately don't price here
   ============================================ */
.pending-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 900px) { .pending-panel { grid-template-columns: 1fr; } }

.pending-list { display: grid; gap: 2px; }
.pending-item {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-block: 14px;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
}
.pending-item:last-child { border-bottom: 0; }
.pending-item strong { font-weight: 500; }
.pending-item em {
  margin-left: auto;
  font-size: 12px;
  font-style: italic;
  opacity: 0.5;
  white-space: nowrap;
  padding-left: 12px;
}

/* ============================================
   BOOKING BLOCK on a pricing page
   The wizard is locked to one service here, so step 1 never renders and the
   page needs a heading of its own above it.
   ============================================ */
.book-block__head {
  max-width: 46ch;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.book-block__head h2 { margin-bottom: 14px; }
.book-block__head p { opacity: 0.75; font-size: 15px; }

/* The locked service, stated plainly above the calendar so nobody wonders
   what they're booking. */
.locked-service {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 22px;
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--line);
  margin-bottom: 28px;
  font-size: 14px;
}
.locked-service__mark {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold);
  color: var(--ink);
}
.locked-service__mark svg { width: 15px; height: 15px; }
.locked-service strong { font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.locked-service .locked-service__price {
  margin-left: auto;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  color: var(--gold-deep);
}
.locked-service__swap {
  font-size: 12.5px;
  opacity: 0.6;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.locked-service__swap:hover { opacity: 1; }
@media (max-width: 560px) {
  .locked-service .locked-service__price { margin-left: 0; }
}

/* ============================================
   CROSS-LINK — rentals ⇄ custom
   ============================================ */
.path-switch {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--line);
}
.path-switch h2 { font-size: clamp(24px, 3vw, 34px); margin-bottom: 10px; }
.path-switch p { font-size: 14.5px; opacity: 0.72; max-width: 52ch; }
@media (max-width: 700px) {
  .path-switch { grid-template-columns: 1fr; }
}

/* ---------- The wizard inside .section-ink ----------
   .section-ink is a light section now (2026-09-09), same as everywhere else
   the wizard appears, so this rule is a no-op left in place on purpose: if
   .section-ink or the wizard's own default ever goes dark again, this still
   protects the card from inheriting the wrong colour instead of silently
   failing the next time someone touches either file. */
.section-ink .wizard,
.section-ink .wizard h2,
.section-ink .wizard h3 { color: var(--ink); }