/* Home pricing section: three variants under test (see EXPERIMENTS in config.js).
   A = bar chart, B = step line, C = price track. Charts are drawn by price-charts.js. */

.pv { display: flex; flex-direction: column; gap: 32px; }
.pv[hidden] { display: none; }
.pv-label { margin: 0; font: 600 12px/1.2 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--mint-ink); }
.pv-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--ink-2); }
.pv-ticks li { position: relative; padding-left: 24px; }
.pv-ticks li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 11px; height: 6px; border-left: 2px solid var(--mint); border-bottom: 2px solid var(--mint); transform: rotate(-45deg); }
.pv-ticks a { color: var(--ink); }
.pv-dates { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 32px; font-size: 14px; color: var(--ink-2); }
.pv-dates b { color: var(--ink); font-weight: 600; }
.pv .pc-note:empty { display: none; }

/* Seat counter: 10 segments, filled as licenses at this price sell. */
.seat-row { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; }
.seat-row span { height: 8px; border-radius: 3px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.seat-row span.taken { background: var(--mint); box-shadow: none; }
.seats { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 320px; }
.seats p { margin: 0; display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--ink-3); }
.seats b { color: var(--ink); font-weight: 600; }

.big-price { margin: 0; display: flex; align-items: baseline; gap: 8px; font-size: 16px; color: var(--ink-3); }
.big-price span { font: 700 clamp(3.5rem, 7vw, 4.5rem)/1 var(--font-display); letter-spacing: -0.045em; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- A: bar chart ---------- */
.pa-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); border-radius: 20px; background: var(--win); box-shadow: 0 0 0 1px var(--line-2); overflow: hidden; }
.pa-main { padding: clamp(28px, 4vw, 40px); display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.pa-chart { margin: 0; padding: clamp(28px, 4vw, 40px); background: var(--bg-2); border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.pa-chart-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pa-chart-h p { margin: 0; font-size: 13px; color: var(--ink-3); }
.pa-chart-h p:first-child { font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.price-bars { position: relative; height: 240px; margin-top: 28px; display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 6px; align-items: end; border-top: 1.5px dashed var(--line-2); }
.pb-col { position: relative; height: 100%; display: flex; align-items: flex-end; }
.pb-bar { display: block; width: 100%; border-radius: 6px 6px 2px 2px; background: var(--ink); opacity: .16; }
.pb-past .pb-bar { background: var(--line-2); opacity: 1; }
.pb-now .pb-bar { background: var(--mint); opacity: 1; }
.pb-next:nth-child(n+6) .pb-bar { opacity: .24; }
.pb-next:nth-child(n+11) .pb-bar { opacity: .34; }
.pb-tag { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 600 12px var(--font-mono); color: var(--ink-2); }
.pb-now .pb-tag { color: var(--mint-ink); }
.pb-col:first-child .pb-tag { left: 0; transform: none; }
.pb-col:nth-last-child(2) .pb-tag { left: auto; right: 0; transform: none; }
.pa-axis { display: flex; justify-content: space-between; font: 400 11px var(--font-mono); color: var(--ink-3); }
@media (max-width: 860px) {
  .pa-card { grid-template-columns: minmax(0, 1fr); }
  .pa-chart { border-left: 0; border-top: 1px solid var(--line); }
  .price-bars { height: 180px; gap: 3px; }
}

/* ---------- B: step line ---------- */
.pvb-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; }
.pvb-head p { margin: 0; font-size: 15px; color: var(--ink-3); }
.pvb-card { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 48px; padding: clamp(28px, 4vw, 40px); border-radius: 20px; background: var(--win); box-shadow: 0 0 0 1px var(--line-2); }
.pvb-main { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 20px; }
.pvb-main > p:not(.big-price) { margin: 0; font-size: 16px; color: var(--ink-2); }
.pvb-main > p b { color: var(--ink); font-weight: 600; }
.pvb-main small { font-size: 13px; color: var(--ink-3); }
.pvb-chart { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pvb-chart figcaption { font-size: 13px; color: var(--ink-3); }
.price-line svg { display: block; width: 100%; height: auto; overflow: visible; }
.price-line text { font: 400 15px var(--font-mono); fill: var(--ink-3); }
.price-line .pl-note { font-family: var(--font-sans); font-size: 16px; }
.price-line .pl-you { font-size: 18px; font-weight: 600; fill: var(--mint-ink); }
.price-line .pl-axis { stroke: var(--line); }
.price-line .pl-past { fill: none; stroke: var(--mint); stroke-width: 3; stroke-linejoin: round; }
.price-line .pl-next { fill: none; stroke: var(--ink-3); stroke-width: 2; opacity: .55; }
.price-line .pl-dot { fill: var(--mint); stroke: var(--win); stroke-width: 3; }
@media (max-width: 860px) { .pvb-card { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* ---------- C: price track ---------- */
.pvc { align-items: center; text-align: center; gap: 24px; }
.pvc .big-price span { font-size: clamp(4rem, 9vw, 6rem); }
.pvc-left { margin: 0; font-size: 17px; color: var(--ink-2); }
.pvc-left b { color: var(--ink); font-weight: 600; }
.price-track { list-style: none; margin: 12px 0 0; padding: 0; width: 100%; max-width: 1040px; display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 6px; }
.price-track li { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pt-chip { display: block; width: 100%; padding: 9px 0; border-radius: 999px; font: 600 13px var(--font-mono); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.pt-past .pt-chip { background: transparent; box-shadow: none; color: var(--ink-3); text-decoration: line-through; }
.pt-now .pt-chip { background: var(--mint-bg); color: var(--mint-ink); box-shadow: inset 0 0 0 2px var(--mint); }
.pt-tick { display: block; width: 100%; height: 4px; border-radius: 4px; background: var(--line); }
.pt-past .pt-tick { background: var(--line-2); }
.pt-now .pt-tick { background: var(--mint); }
.pvc-scale { width: 100%; max-width: 1040px; margin-top: -10px; display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--ink-3); }
.pvc-small { margin: 0; font-size: 13px; color: var(--ink-3); }
@media (max-width: 760px) {
  .price-track { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 10px; }
  .pvc-scale span:nth-child(2) { display: none; }
}