/* ==========================================================================
   How we charge (how-we-charge.html) · page styles on top of tokens.css + site.css
   Numbering: the price path and the change steps are sequences (ceramic spheres in order);
   "On this page" is the only index with numbers. Factors and terms are unordered: no numbers,
   the coral tick on each rule (site.css .lr-tick).
   No figures anywhere: the plinth drawings show a range narrowing to fixed points
   on a scale without numbers. Full coral only in the closing call to action.
   ========================================================================== */

/* ---------- Page head ---------- */
/* no side rail on this page, so "On this page" stays in the head at every width */
@media (min-width: 1200px) { .lr-page-head .lr-otp { display: block; } }

/* The lead's example as an exhibit: one portal object in two sizes on the stage floor */
.ch-duo { display: flex; align-items: flex-end; justify-content: center; gap: 3%; }
.lr-page-head .ch-duo { align-self: end; margin-bottom: clamp(-24px, -1.5vw, -8px); }
.ch-duo__item { position: relative; }
.ch-duo__item::after { /* contact shadow under each object */
  content: ""; position: absolute; left: 20%; right: 20%; bottom: 3%; height: 10%;
  background: var(--lr-obj-floor); filter: blur(3px);
}
.ch-duo__item picture { position: relative; z-index: 1; }
.ch-duo__item img { width: 100%; height: auto; }
.ch-duo__item--s { flex: 0 0 36%; }
.ch-duo__item--l { flex: 0 0 60%; }
@media (max-width: 859px) {
  .ch-duo { width: 100%; max-width: 440px; margin-inline: auto; }
}

.ch-sec { scroll-margin-top: 80px; }
.ch-head2 { margin-bottom: clamp(28px, 3.5vw, 48px); }
.ch-head2 .lr-h2 { max-width: 18em; }

/* ---------- CH3-01 · The price path: three exhibits on one rod ---------- */
.ch-path { display: grid; gap: 22px; }
.ch-stop {
  position: relative; display: flex; flex-direction: column;
  padding: 8px; border-radius: var(--lr-r-xl);
  background: var(--lr-surface); border: 1px solid var(--lr-line);
}
.ch-stop__plinth {
  --plinth: linear-gradient(180deg, #FFEDE5 0%, #FFD9C7 100%);
  position: relative; display: flex; align-items: flex-end; justify-content: center;
  height: 216px; border-radius: calc(var(--lr-r-xl) - 7px); overflow: hidden; isolation: isolate;
  background: var(--plinth);
}
.ch-stop__plinth::before { /* back-wall light, as on the showroom plinths */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(70% 60% at 50% 30%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 70%);
}
.ch-stop__plinth--mint { --plinth: linear-gradient(180deg, #E8FBF3 0%, #C3F3E0 100%); }
.ch-stop__plinth--sky { --plinth: linear-gradient(180deg, #E9F8FE 0%, #B5ECFF 100%); }
.ch-stop__fig { display: block; width: min(90%, 330px); height: auto; margin-bottom: 6px; }
/* the sequence sphere sits on the plinth: a page-level sequence, so the 56 px node */
.ch-stop .ch-node {
  left: 14px; top: 14px; z-index: 2;
  width: 56px; height: 56px; font-size: 1.375rem; border-width: 2px;
}
.ch-stop__body { display: grid; gap: 10px; align-content: start; padding: 20px 16px 14px; }
.ch-stop__title { font-size: var(--lr-fs-h3); font-weight: 600; line-height: 1.2; letter-spacing: -.015em; text-wrap: balance; }
.ch-stop__body p { font-size: 1rem; line-height: 1.55; color: var(--lr-ink-2); text-wrap: pretty; }
.ch-stop__body .ch-stop__more {
  margin-top: 4px; padding-top: 12px; border-top: 1.5px dashed var(--lr-line);
  font-size: .9375rem; color: var(--lr-muted);
}
/* the three exhibits carry the order in their spheres (coral, mint, sky, numbered); no rod stub
   between the cards, which read as a typed dash */
@media (min-width: 860px) {
  .ch-path { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lr-gap); }
  .ch-stop__body { padding: 22px 18px 18px; }
}
@media (min-width: 1200px) {
  .ch-stop__plinth { height: 236px; }
  .ch-stop__body { padding: 24px 22px 20px; }
}

/* ---------- CH3-02 · Monthly arrangement (mint room) ---------- */
.ch-monthly { display: grid; gap: 32px; }
.ch-monthly__copy { display: grid; align-content: start; }
.ch-monthly__head { margin-bottom: 22px; }
.ch-monthly__head .lr-h2 { max-width: 14em; }
.ch-prose { display: grid; gap: 14px; max-width: 36em; }
.ch-prose p { color: var(--lr-ink-2); }
.ch-monthly .lr-link--arrow, .ch-outside .lr-link--arrow { color: var(--lr-ink); text-decoration-color: var(--lr-ink); }
.ch-months, .ch-bill { margin: 0; border-radius: var(--lr-r-xl); padding: clamp(18px, 3vw, 36px); display: grid; place-items: center; }
.ch-months__fig, .ch-bill__fig { display: block; width: 100%; max-width: 430px; height: auto; }
.ch-svg-mono { font-family: var(--lr-font-mono); font-size: 15px; fill: var(--lr-ink); }
.ch-svg-label { font-family: var(--lr-font); font-size: 18px; font-weight: 600; fill: var(--lr-ink); }
@media (max-width: 599px) { .ch-months, .ch-bill { padding: 20px 8px; } }
@media (min-width: 1024px) {
  .ch-monthly { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(40px, 5vw, 80px); align-items: center; }
}

/* ---------- CH3-03 · What affects the price: a list on hairlines (unordered: the coral tick, no numbers), the budget card aside ---------- */
.ch-factors { display: grid; gap: clamp(28px, 4vw, 40px); align-items: start; }
.ch-factors__list { align-content: start; }
.ch-point { align-items: start; }
.ch-point { padding-block: 18px; }
.ch-point p { font-size: 1.125rem; line-height: 1.45; font-weight: 500; color: var(--lr-ink); text-wrap: pretty; }
.ch-budget { display: grid; gap: 8px; align-content: start; padding: 26px; }
.ch-budget .lr-card__title { font-size: 1.3125rem; line-height: 1.25; margin-bottom: 0; }
@media (min-width: 768px) {
  /* two columns, read down then across; hairlines run under every row of both columns */
  .ch-factors__list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(3, auto); column-gap: 32px; }
  .ch-factors__list .ch-point:nth-child(3), .ch-factors__list .ch-point:nth-child(6) { border-bottom: 1px solid rgba(17, 18, 22, .12); }
}
@media (min-width: 1024px) {
  .ch-factors { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: clamp(32px, 4vw, 56px); }
  .ch-budget { padding: 30px; }
}

/* ---------- CH3-04 · Costs you pay directly (peach room) ---------- */
.ch-outside { display: grid; gap: 32px; }
.ch-outside__copy { display: grid; gap: 0; align-content: start; }
.ch-outside__copy .lr-h2 { margin-bottom: 18px; max-width: 14em; }
.ch-outside__copy .lr-lead { color: var(--lr-ink-2); max-width: 34em; }
/* a plain list on hairlines: these are costs, not buttons */
.ch-costs { margin-top: 24px; max-width: 36em; }
.ch-costs li { font-size: 1rem; font-weight: 500; line-height: 1.45; }
.ch-costs li::first-letter { text-transform: uppercase; }
@media (min-width: 1024px) {
  .ch-outside { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(40px, 5vw, 80px); align-items: center; }
}

/* ---------- CH3-06 · Terms (sky room): a definition list, term left and text right, on hairlines ---------- */
.ch-terms { display: grid; border-top: 1px solid rgba(17, 18, 22, .16); }
.ch-term { display: grid; gap: 6px; padding-block: 18px; border-bottom: 1px solid rgba(17, 18, 22, .16); }
.ch-term__k { font-size: 1.1875rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.ch-term dd { display: grid; gap: 8px; margin: 0; }
.ch-term p { font-size: 1rem; line-height: 1.55; color: var(--lr-ink-2); text-wrap: pretty; max-width: 44em; }
.ch-term .ch-term__more { font-size: .9375rem; color: var(--lr-muted); }
@media (min-width: 860px) {
  .ch-term { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(24px, 4vw, 56px); padding-block: 20px; }
}
/* from 1024 px the rows sit on the head's 5/6 tracks: every definition starts on the lead's left edge */
@media (min-width: 1024px) {
  .ch-term { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--lr-gap); }
}
.ch-terms + .lr-more .lr-link--arrow { color: var(--lr-ink); }

/* ---------- CH3-07 · What we never charge for ---------- */
.ch-never__grid { display: grid; gap: 4px; }
.ch-never__panel { padding: clamp(22px, 3vw, 36px); border-radius: var(--lr-r-xl); background: var(--lr-surface); border: 1px solid var(--lr-line); }
.ch-never__list { margin-top: 0; }
@media (min-width: 860px) {
  .ch-never__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 16px; }
}
@media (min-width: 1024px) {
  .ch-never__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 80px); align-items: start; }
  .ch-never__grid .ch-head2 { margin-bottom: 0; }
}

/* ---------- CH3-08 · Questions ---------- */
.ch-faq { padding-top: calc(var(--lr-section-y) * .5); }