/* Solved-rate rail: dots on a zoomed axis, one ticket hanging per featured model.
   From 960 px the ticket hangs from its dot; its head sits at log10(price) on the dashed price grid. */
.meter { margin: 0; padding: 22px 24px 24px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
.meter-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-bottom: 20px; color: var(--muted); font-size: .9rem; }
.meter-head strong { color: var(--text); font-weight: 600; }
.scale { position: relative; height: 14px; margin-bottom: 34px; color: var(--muted); font: .72rem/1 var(--mono); }
.scale span { position: absolute; left: var(--x); translate: -50% 0; white-space: nowrap; }
.scale span:first-child { translate: 0 0; }
.scale span:last-child { translate: -100% 0; }
.track { position: relative; z-index: 1; height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--line) 0 var(--th), color-mix(in srgb, var(--accent) 30%, var(--surface)) var(--th) 100%); }
.zone { position: absolute; top: -24px; left: var(--th); padding-left: 8px; color: var(--accent); font-size: .75rem; font-weight: 500; white-space: nowrap; }
.th { position: absolute; top: -6px; bottom: -6px; left: var(--th); width: 2px; border-radius: 2px; background: var(--accent); }

/* One shape per role, shared by the dot on the track and the ticket below it. */
.m, .shape { display: block; flex: none; background: var(--c); }
.cheap-m, .cheap-t { --c: var(--warn); }
.pick-m, .pick-t { --c: var(--accent); }
.best-m, .best-t { --c: var(--text); }
.cheap-m, .cheap-t .shape { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.pick-m, .pick-t .shape { border-radius: 50%; }
.best-m, .best-t .shape { rotate: 45deg; border-radius: 2px; }
.m { position: absolute; top: 50%; left: var(--x); width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); transform: scale(0); animation: pop 500ms cubic-bezier(.3, 1.6, .5, 1) forwards; transition: scale 200ms var(--ease); }
.cheap-m { --s: 18px; animation-delay: 600ms; }
.pick-m { --s: 22px; border: 3px solid var(--surface); box-shadow: 0 0 0 2px var(--accent); animation-delay: 750ms; }
.best-m { --s: 12px; z-index: 1; box-shadow: 0 0 0 2px var(--surface); animation-delay: 900ms; }
.shape { width: 10px; height: 10px; }

.ticks { display: none; }
.tickets { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.ticket { padding: 14px 16px 16px; border: 1px solid var(--line); border-top: 3px solid var(--c); border-radius: 14px; background: var(--surface); transition: box-shadow 200ms var(--ease), translate 200ms var(--ease); }
.ticket p { margin: 0; }
.pick-t { border-color: var(--c); background: var(--accent-soft); }
.ticket .label { display: flex; gap: 8px; align-items: center; color: var(--muted); font: 600 .72rem var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.ticket .name { margin-top: 8px; font: 700 1.1rem/1.15 var(--display); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket .cost { margin-top: 2px; }
.ticket .cost b { font: 700 1.6rem var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ticket .cost span { color: var(--muted); font-size: .85rem; }
.ticket .why { margin-top: 4px; color: var(--muted); font-size: .85rem; line-height: 1.35; }
.cheap-t .why { color: var(--warn); }
.pick-t .why { color: var(--text); }

/* Hovering a ticket lights its dot, and the other way round. */
.meter:has(.cheap-t:hover) .cheap-m, .meter:has(.pick-t:hover) .pick-m, .meter:has(.best-t:hover) .best-m { scale: 1.35; }
.meter:has(.cheap-m:hover) .cheap-t, .meter:has(.pick-m:hover) .pick-t, .meter:has(.best-m:hover) .best-t, .ticket:hover { box-shadow: 0 0 0 2px var(--c), 0 10px 24px -14px var(--c); }

/* Below 960 px the rail stands up: rate runs down (best on top), the stem runs right to log10(price),
   and the card starts at its head; a card only drops below the one above, or moves right off a dearer stem. */
@media (max-width: 959.98px) {
  .meter { display: grid; grid-template-columns: auto 10px minmax(0, 1fr); column-gap: 8px; }
  .meter-head { grid-column: 1 / -1; }
  .scale, .track, .pins { grid-row: 2; height: var(--col-h); margin: 0; }
  .scale span, .scale span:first-child, .scale span:last-child { position: absolute; top: var(--y); right: 0; left: auto; translate: 0 -50%; }
  .scale { position: relative; min-width: 4.5ch; }
  .track { margin-top: var(--y0); height: calc(var(--y1) - var(--y0)); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 30%, var(--surface)) 0 calc(var(--th-y) - var(--y0)), var(--line) 0); }
  .th { top: calc(var(--th-y) - var(--y0) - 1px); right: -6px; bottom: auto; left: -6px; width: auto; height: 2px; }
  .zone { top: calc(var(--th-y) - var(--y0) - 6px); left: 18px; padding: 0; writing-mode: vertical-rl; translate: 0 -100%; rotate: 180deg; }
  .m { top: calc(var(--y) - var(--y0)); left: 50%; }
  .pins { position: relative; container-type: inline-size; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, transparent) var(--th-y), transparent 0); }
  .pins::before { content: ""; position: absolute; top: calc(var(--th-y) - 1px); right: 0; left: 0; border-top: 2px dashed color-mix(in srgb, var(--accent) 40%, transparent); }
  .ticks { display: block; position: absolute; inset: 0; pointer-events: none; }
  .tick { position: absolute; top: 4px; bottom: 0; left: calc(var(--tx) * 1%); padding-left: 3px; border-left: 1px dashed var(--line); color: var(--muted); font: .68rem/1 var(--mono); }
  .tickets { position: absolute; inset: 0; display: block; margin: 0; }
  .ticket { position: absolute; z-index: 1; top: var(--cy); right: 0; left: calc(var(--cx) * 1%); box-sizing: border-box; height: var(--vcard-h); padding: 10px 12px; border-top-left-radius: 0; animation: drop 600ms var(--ease) both; animation-delay: 1000ms; }
  /* Stem from the dot across to the card, then down to it; a head at the exact price. */
  .ticket::before, .ticket::after { content: ""; position: absolute; box-sizing: border-box; }
  .ticket::before { top: calc(var(--y) - var(--cy) - 4px); right: calc(100% + 1px); width: calc(var(--cx) * 1cqw + 13px); height: calc(var(--cy) - var(--y) + 4px); border-top: 2px solid var(--c); border-right: 2px solid var(--c); transform-origin: left; animation: reach 700ms var(--ease) both; animation-delay: 900ms; }
  .ticket::after { top: calc(var(--y) - var(--cy) - 9px); left: calc((var(--hx) - var(--cx)) * 1cqw - 7px); width: 12px; height: 12px; border: 2px solid var(--c); border-radius: 50%; background: var(--surface); }
  .ticket .name { margin-top: 6px; white-space: normal; }
  .ticket .cost b { font-size: 1.3rem; }
  .ticket .cost span { display: block; }
}
@media (min-width: 960px) {
  .pins { position: relative; height: var(--h); margin-top: 0; background: linear-gradient(90deg, transparent var(--th), color-mix(in srgb, var(--accent) 5%, transparent) var(--th)); }
  .pins::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--th); border-left: 2px dashed color-mix(in srgb, var(--accent) 40%, transparent); }
  .ticks { display: block; position: absolute; inset: 0; pointer-events: none; }
  .tick { position: absolute; top: var(--y); right: 0; left: 0; border-top: 1px dashed var(--line); color: var(--muted); font: .68rem/1 var(--mono); text-align: right; }
  .tick { padding-top: 3px; }
  .tickets { position: absolute; inset: 0; display: block; margin: 0; }
  .ticket { position: absolute; z-index: 1; top: var(--top); box-sizing: border-box; width: var(--card-w); height: var(--card-h); padding: 12px 14px; animation: drop 600ms var(--ease) both; animation-delay: 1000ms; }
  .ticket[data-side="right"] { left: var(--x); border-top-left-radius: 0; }
  .ticket[data-side="left"] { right: calc(100% - var(--x)); border-top-right-radius: 0; }
  .ticket:hover { z-index: 2; translate: 0 -2px; }
  /* Stem from the dot down to the card, and a head at the exact price depth. */
  .ticket::before, .ticket::after { content: ""; position: absolute; }
  .ticket::before { bottom: 100%; width: 2px; height: calc(var(--top) + 8px); background: var(--c); transform-origin: top; animation: grow 700ms var(--ease) both; animation-delay: 900ms; }
  .ticket::after { top: calc(var(--head) - var(--top) - 10px); width: 10px; height: 10px; border: 2px solid var(--c); border-radius: 50%; background: var(--surface); }
  .ticket[data-side="right"]::before { left: -2px; }
  .ticket[data-side="left"]::before { right: -2px; }
  .ticket[data-side="right"]::after { left: -8px; }
  .ticket[data-side="left"]::after { right: -8px; }
  .ticket .name { margin-top: 6px; }
}
@keyframes grow { from { scale: 1 0; } }
@keyframes reach { from { scale: 0 1; } }
@keyframes drop { from { opacity: 0; translate: 0 -8px; } }
@media (prefers-reduced-motion: reduce) {
  .ticket, .ticket::before { animation: none; }
  .m, .ticket { transition: none; }
}