/* ============================================================
   SECTIONS LAB · Plans & pricing (PL) — candidate CSS
   Every selector carries a .price-* class; kit classes are styled only
   inside a .price-* root. Knobs are custom properties on the component.
   No section paints its own ground (the page view sets data-band).
   ============================================================ */

/* ---------- shared: heading row ----------
   <div class="price-head"><div><p class="eyebrow">…</p><h2 …>…</h2></div><p class="lead">…</p></div> */
.price-head {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--sp-5) var(--sp-8); align-items: end; margin-bottom: var(--sp-8);
}
.price-head h2 { text-wrap: balance; }
.price-head > .lead { text-wrap: pretty; padding-bottom: .35em; }
.price-nw { white-space: nowrap; }
@media (max-width: 900px) {
  .price-head { grid-template-columns: minmax(0, 1fr); margin-bottom: var(--sp-7); }
  .price-head > .lead { padding-bottom: 0; }
}
@media (max-width: 640px) { .price-head { margin-bottom: var(--sp-6); } }


/* ============================================================
   PL01 · Same ends, a different middle
   <section class="price-split"><div class="wrap">
     <div class="price-head">…</div>
     <div class="price-split__table" role="table">
       <div class="price-split__cols" role="row"> span.price-split__corner · span.price-split__ch (b · small) × 3 </div>
       <div class="price-split__row" role="row">
         <div class="price-split__model" role="rowheader"> p.price-split__n · h3 · p.price-split__desc · p.price-split__fit · a.link </div>
         <div class="price-split__cell" role="cell" data-who="bdg|you">
           span.price-split__stage (phones) · span.price-split__who · span.price-split__what </div> × 3
       </div> × 3
     </div>
     <div class="price-split__foot"> p.price-split__key · p.price-split__note </div>
   </div></section>
   bdg's stages are a quiet fill, the client's an open dashed frame: the
   outer two columns read as one unbroken band down the table.
   ============================================================ */
.price-split {
  --price-split-bdg: color-mix(in srgb, var(--fg) 8%, transparent);
  --price-split-edge: color-mix(in srgb, var(--fg) 16%, transparent);
  --price-split-you: color-mix(in srgb, var(--fg) 50%, transparent);
  --price-split-cols: minmax(0, 4.2fr) repeat(3, minmax(0, 2.6fr));
}
.price-split__cols, .price-split__row {
  display: grid; grid-template-columns: var(--price-split-cols); column-gap: var(--sp-2);
}
.price-split__cols { align-items: end; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--hairline); }
.price-split__corner, .price-split__ch b {
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); font-weight: 400;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-dim);
}
.price-split__ch { display: grid; gap: 2px; padding-inline: var(--sp-4); }
.price-split__ch small { font-size: var(--fs-small); color: var(--fg-dim); }
.price-split__ch.is-varies b, .price-split__ch.is-varies small { color: var(--fg); }
/* Two rows: the stage cells share the first (equal heights, only as tall as
   their text), the model's text runs on down beside the empty second. */
.price-split__row { grid-template-rows: auto 1fr; padding-block: var(--sp-6); border-bottom: 1px solid var(--hairline); }
.price-split__model { grid-row: 1 / span 2; padding-right: var(--sp-6); }
.price-split__cell { grid-row: 1; min-height: 7.5rem; }
.price-split__n {
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--fg-dim); font-variant-numeric: tabular-nums;
}
.price-split__model h3 { margin-top: var(--sp-3); font-size: calc(var(--fs-h2) * .46); line-height: 1.12; letter-spacing: var(--ls-head, var(--ls-display)); text-wrap: balance; }
.price-split__desc { margin-top: var(--sp-3); color: var(--fg); text-wrap: pretty; }
.price-split__fit { margin-top: var(--sp-3); font-size: var(--fs-small); line-height: 1.55; text-wrap: pretty; }
.price-split__fit b { display: block; margin-bottom: 2px; color: var(--fg); font-weight: 600; }
.price-split__model .link { margin-top: var(--sp-4); }
.price-split__cell {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: var(--sp-4); border-radius: var(--radius-card);
  background: var(--price-split-bdg); border: 1px solid var(--price-split-edge);
}
.price-split__cell[data-who="you"] { background: none; border: 1px dashed var(--price-split-you); }
.price-split__stage { display: none; }
.price-split__who {
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--fg-dim);
}
.price-split__cell[data-who="you"] .price-split__who { color: var(--fg); }
.price-split__what { color: var(--fg); line-height: 1.45; text-wrap: pretty; }
.price-split__foot { margin-top: var(--sp-5); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-3) var(--sp-7); }
.price-split__key { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-small); color: var(--fg-muted); max-width: none; }
.price-split__key span { width: 16px; height: 16px; border-radius: 4px; background: var(--price-split-bdg); border: 1px solid var(--price-split-edge); }
.price-split__key span[data-who="you"] { margin-left: var(--sp-3); background: none; border: 1px dashed var(--price-split-you); }
.price-split__note { max-width: 78ch; font-size: var(--fs-small); text-wrap: pretty; }
.price-split__note b { color: var(--fg); font-weight: 600; }
@media (max-width: 1100px) {
  .price-split { --price-split-cols: repeat(3, minmax(0, 1fr)); }
  .price-split__corner { display: none; }
  .price-split__ch { padding-inline: var(--sp-3); }
  .price-split__model {
    grid-column: 1 / -1; padding: 0 0 var(--sp-5);
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--sp-6); align-items: start;
  }
  .price-split__model > :is(.price-split__n, h3, .price-split__desc) { grid-column: 1; }
  .price-split__fit { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
  .price-split__model .link { grid-column: 2; }
  .price-split__cell { padding: var(--sp-3); }
}
@media (max-width: 640px) {
  .price-split__cols { display: none; }
  .price-split__row { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-2); padding-block: var(--sp-5); }
  .price-split__row:first-of-type { border-top: 1px solid var(--hairline); }
  .price-split__model { display: block; padding-bottom: var(--sp-3); }
  .price-split__fit { margin-top: var(--sp-3); }
  .price-split__model .link { margin-top: var(--sp-3); }
  .price-split__cell { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 2px var(--sp-3); }
  .price-split__stage { display: block; grid-row: 1 / span 2; font-weight: 600; color: var(--fg); font-size: var(--fs-small); }
  .price-split__model { order: 0; }
  .price-split__foot { flex-direction: column; }
}


/* ============================================================
   PL02 · Two questions to your model
   <section class="price-tree"><div class="wrap">
     <div class="price-head">…</div>
     <div class="price-tree__map" data-shape="two" style="--price-tree-cols:6">   (JS: data-pick)
       div.price-tree__q.price-tree__q--1 ( p.price-tree__ask · p.price-tree__opts > button.price-tree__ans × 2 )
       span.price-tree__seg.price-tree__stem--1 · …__arm--a1 · …__arm--a2      (the branches)
       div.price-tree__q--2 · …__rail--q · …__stem--2 · …__arm--b1 · …__arm--b2 · …__rail--b
       article.price-tree__leaf[data-leaf] × 3 ( p.price-tree__path · h3 · p · dl · a.link )
     </div>
     p.price-tree__status[aria-live] · p.price-tree__note
   </div></section>
   The tree is a grid of 6 equal columns without gaps, so every branch
   end sits exactly on a grid line: leaves at 1/6, 3/6 and 5/6 of the
   width, the second question at 2/6, the first at 3/6. Each segment is
   an empty box drawing two or three of its borders. data-shape="one"
   (&content=erp): 4 columns, one question, two leaves.
   ============================================================ */
.price-tree {
  --price-tree-line: color-mix(in srgb, var(--fg) 30%, transparent);
  --price-tree-drop: var(--sp-5);   /* the height of a branch */
  --price-tree-pad: var(--sp-4);    /* half the gap between leaves */
  --price-tree-dim: .4;
}
.price-tree__map {
  display: grid; grid-template-columns: repeat(var(--price-tree-cols, 6), minmax(0, 1fr));
  margin-inline: calc(var(--price-tree-pad) * -1);
}
.price-tree__q {
  justify-self: center; display: grid; justify-items: center; gap: var(--sp-3); text-align: center;
  max-width: 34rem; padding: var(--sp-4) var(--sp-5); margin-inline: var(--price-tree-pad);
  border: 1px solid var(--hairline); border-radius: var(--radius-card);
}
.price-tree__ask {
  max-width: none; color: var(--fg); text-wrap: balance;
  font-family: var(--font-head); font-weight: 600; font-stretch: var(--head-stretch, normal);
  font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -.01em;
}
.price-tree__if { display: none; }
.price-tree__opts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); max-width: none; }
.price-tree__ans {
  appearance: none; margin: 0; padding: 9px 16px; cursor: pointer; pointer-events: none;
  font: inherit; font-size: var(--fs-small); line-height: 1.3; color: var(--fg);
  background: none; border: 1px solid color-mix(in srgb, var(--fg) 28%, transparent); border-radius: var(--radius-btn);
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out), border-color .3s, scale .12s ease;
}
.price-tree.is-live .price-tree__ans { pointer-events: auto; }
.price-tree__ans:active { scale: .97; }
.price-tree__ans:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.price-tree__ans[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
@media (hover: hover) { .price-tree.is-live .price-tree__ans:not([aria-pressed="true"]):hover { border-color: var(--fg); } }

.price-tree__seg { display: block; height: var(--price-tree-drop); border: 0 solid var(--price-tree-line); transition: border-color .3s var(--ease-out), opacity .3s; }
.price-tree__stem { border-left-width: 1px; }
.price-tree__rail { border-left-width: 1px; height: auto; }
.price-tree__arm--a1, .price-tree__arm--b1 { border-top-width: 1px; border-left-width: 1px; border-top-left-radius: var(--radius-card); }
.price-tree__arm--a2, .price-tree__arm--b2 { border-top-width: 1px; border-right-width: 1px; border-top-right-radius: var(--radius-card); }
/* the six-column shape */
.price-tree__map[data-shape="two"] .price-tree__q--1 { grid-area: 1 / 2 / 2 / 6; }
.price-tree__map[data-shape="two"] .price-tree__stem--1 { grid-area: 2 / 4 / 3 / 5; }
.price-tree__map[data-shape="two"] .price-tree__arm--a1 { grid-area: 3 / 3 / 4 / 4; }
.price-tree__map[data-shape="two"] .price-tree__arm--a2 { grid-area: 3 / 4 / 4 / 6; }
.price-tree__map[data-shape="two"] .price-tree__q--2 { grid-area: 4 / 1 / 5 / 5; }
.price-tree__map[data-shape="two"] .price-tree__rail--q { grid-area: 4 / 6 / 5 / 7; }
.price-tree__map[data-shape="two"] .price-tree__stem--2 { grid-area: 5 / 3 / 6 / 4; }
.price-tree__map[data-shape="two"] .price-tree__arm--b1 { grid-area: 6 / 2 / 7 / 3; }
.price-tree__map[data-shape="two"] .price-tree__arm--b2 { grid-area: 6 / 3 / 7 / 4; }
.price-tree__map[data-shape="two"] .price-tree__rail--b { grid-area: 5 / 6 / 7 / 7; height: auto; }
.price-tree__map[data-shape="two"] [data-leaf="guided"] { grid-area: 7 / 1 / 8 / 3; }
.price-tree__map[data-shape="two"] [data-leaf="full"] { grid-area: 7 / 3 / 8 / 5; }
.price-tree__map[data-shape="two"] [data-leaf="opt"] { grid-area: 7 / 5 / 8 / 7; }
/* the four-column shape (one question, two leaves) */
.price-tree__map[data-shape="one"] .price-tree__q--1 { grid-area: 1 / 1 / 2 / 5; }
.price-tree__map[data-shape="one"] .price-tree__stem--1 { grid-area: 2 / 3 / 3 / 4; }
.price-tree__map[data-shape="one"] .price-tree__arm--a1 { grid-area: 3 / 2 / 4 / 3; }
.price-tree__map[data-shape="one"] .price-tree__arm--a2 { grid-area: 3 / 3 / 4 / 4; }
.price-tree__map[data-shape="one"] .price-tree__leaf:nth-of-type(1) { grid-area: 4 / 1 / 5 / 3; }
.price-tree__map[data-shape="one"] .price-tree__leaf:nth-of-type(2) { grid-area: 4 / 3 / 5 / 5; }

.price-tree__leaf { position: relative; padding: var(--sp-5) var(--price-tree-pad) 0; transition: opacity .35s var(--ease-out); }
/* the node where a branch lands */
.price-tree__leaf::before {
  content: ""; position: absolute; left: 50%; top: -4px; width: 9px; height: 9px; margin-left: -4.5px;
  border-radius: 50%; background: var(--price-tree-line); transition: background-color .3s;
}
.price-tree__path { display: none; }
.price-tree__leaf h3 { font-size: calc(var(--fs-h2) * .46); line-height: 1.12; letter-spacing: var(--ls-head, var(--ls-display)); text-wrap: balance; }
.price-tree__desc { margin-top: var(--sp-3); color: var(--fg); text-wrap: pretty; }
.price-tree__dl { margin: var(--sp-4) 0 0; padding-top: var(--sp-3); border-top: 1px solid var(--hairline); font-size: var(--fs-small); line-height: 1.55; }
.price-tree__dl dt {
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--fg-dim);
}
.price-tree__dl dd, .price-base__dl dd { color: var(--fg-muted); }
.price-tree__dl dd { margin: 2px 0 var(--sp-3); text-wrap: pretty; }
.price-tree__leaf > .link { margin-top: var(--sp-2); }
.price-tree__aside { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--hairline); }
.price-tree__aside p { font-size: var(--fs-small); text-wrap: pretty; }
.price-tree__aside p + p { margin-top: var(--sp-1); }
.price-tree__aside b { color: var(--fg); font-weight: 600; }
.price-tree__aside .link { margin-top: var(--sp-2); }
/* a chosen path: its lines and its leaf at full contrast, the rest steps back */
.price-tree__map[data-pick] .price-tree__seg[data-lit="true"] { border-color: var(--fg); }
.price-tree__map[data-pick] .price-tree__seg[data-lit="false"] { opacity: .5; }
.price-tree__map[data-pick] .price-tree__leaf[data-lit="false"] { opacity: var(--price-tree-dim); }
.price-tree__map[data-pick] .price-tree__leaf[data-lit="true"]::before { background: var(--fg); }
.price-tree__status { min-height: 1.6em; margin-top: var(--sp-5); font-size: var(--fs-small); color: var(--fg-muted); }
.price-tree__note { margin-top: var(--sp-4); padding-top: var(--sp-5); border-top: 1px solid var(--hairline); max-width: 80ch; font-size: var(--fs-small); text-wrap: pretty; }
.price-tree__note b { color: var(--fg); font-weight: 600; }
/* ≤900: no branches; the questions stack, and each model names its path */
@media (max-width: 900px) {
  .price-tree__map, .price-tree__map[data-shape] { display: flex; flex-direction: column; margin-inline: 0; }
  .price-tree__seg { display: none; }
  .price-tree__q { justify-self: auto; justify-items: start; text-align: left; max-width: none; margin: 0 0 var(--sp-3); }
  .price-tree__opts { justify-content: flex-start; }
  .price-tree__if { display: block; font-size: var(--fs-small); color: var(--fg-dim); }
  .price-tree__leaf { padding: var(--sp-5) 0; border-top: 1px solid var(--hairline); }
  .price-tree__q + .price-tree__leaf, .price-tree__seg + .price-tree__leaf { margin-top: var(--sp-4); }
  .price-tree__leaf::before { display: none; }
  .price-tree__path { display: block; margin-bottom: var(--sp-2); font-size: var(--fs-small); color: var(--fg-dim); }
}
@media (prefers-reduced-motion: reduce) {
  .price-tree__ans, .price-tree__seg, .price-tree__leaf, .price-tree__leaf::before { transition: none; }
}


/* ============================================================
   PL03 · Three models on one shared base
   <section class="price-base"><div class="wrap">
     <div class="price-head">…</div>
     <ol class="price-base__cols">
       <li class="price-base__col"> p.price-base__n · h3 · p.price-base__role · p.price-base__desc
         · dl.price-base__dl · a.link   (ops: p.price-base__tags > span × n) </li> × 3
     </ol>
     <div class="price-base__ground"> p.price-base__gh · ul.price-base__same > li (svg.ico · span) · p.price-base__note </div>
   </div></section>
   Pillars on a plinth: each column is drawn by two vertical hairlines,
   open at the top, standing on the base's upper edge. The base is the
   one surface, a faint tint of --fg so it reads on any band.
   ============================================================ */
.price-base {
  --price-base-edge: color-mix(in srgb, var(--fg) 20%, transparent);
  --price-base-tint: color-mix(in srgb, var(--fg) 4%, transparent);
  --price-base-inset: var(--sp-6);   /* how far the pillars stand in from the base's ends */
}
.price-base__cols {
  list-style: none; margin: 0; padding: 0 var(--price-base-inset);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sp-5);
}
.price-base__col {
  display: flex; flex-direction: column;
  padding: var(--sp-2) var(--sp-5) var(--sp-7);
  border-inline: 1px solid var(--price-base-edge);
}
.price-base__n {
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  color: var(--fg-dim); font-variant-numeric: tabular-nums;
}
.price-base__col h3 { margin-top: var(--sp-4); font-size: calc(var(--fs-h2) * .46); line-height: 1.12; letter-spacing: var(--ls-head, var(--ls-display)); text-wrap: balance; }
.price-base__role { margin-top: var(--sp-3); color: var(--fg); font-size: var(--fs-lead); line-height: 1.4; text-wrap: balance; }
.price-base__desc { margin-top: var(--sp-3); text-wrap: pretty; }
.price-base__dl { margin: var(--sp-5) 0 0; font-size: var(--fs-small); line-height: 1.55; }
.price-base__dl dt {
  padding-top: var(--sp-3); border-top: 1px solid var(--hairline);
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--fg-dim);
}
.price-base__dl dd { margin: 2px 0 var(--sp-3); text-wrap: pretty; }
.price-base__tags { margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; gap: 0; font-size: var(--fs-small); color: var(--fg-dim); }
.price-base__tags span + span::before { content: "·"; margin-inline: var(--sp-1); }
.price-base__col > .link { margin-top: auto; padding-top: var(--sp-4); align-self: flex-start; }
.price-base__ground {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3) var(--sp-7); align-items: center;
  padding: var(--sp-5) var(--sp-6); border: 1px solid var(--price-base-edge); border-radius: var(--radius-card);
  background: var(--price-base-tint);
}
.price-base__gh {
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--fg-dim); max-width: none;
}
.price-base__same { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); }
.price-base__same li { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--fg); font-weight: 600; }
.price-base__same .ico { width: var(--icon-inline); height: var(--icon-inline); color: var(--fg-dim); }
.price-base__note { grid-column: 1 / -1; padding-top: var(--sp-2); max-width: 88ch; font-size: var(--fs-small); text-wrap: pretty; }
.price-base__note b { color: var(--fg); font-weight: 600; }
@media (max-width: 1100px) {
  .price-base { --price-base-inset: var(--sp-4); }
  .price-base__cols { column-gap: var(--sp-3); }
  .price-base__col { padding-inline: var(--sp-4); }
}
@media (max-width: 900px) {
  .price-base__cols { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .price-base__col { border-inline: 0; border-top: 1px solid var(--hairline); padding: var(--sp-5) 0 var(--sp-6); }
  .price-base__ground { grid-template-columns: minmax(0, 1fr); padding: var(--sp-5); }
}
@media (max-width: 640px) {
  .price-base__same { flex-direction: column; }
}