/* sites/taxi.css — taxi.billubnb.in only: the ride-ticket hero card (from → to with a dotted road, four perks, a torn stub).
   Shared parts live in sites/services.css. */
@layer sections {
  .ticket { --ear-bg: var(--paper-3); }
  .ticket .pebble { background: var(--sage-tint); }
  .ticket__route { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-3);
    padding: var(--space-3) 0 var(--space-4); }
  .ticket__route p { margin: 0; }
  .ticket__route p:last-child { text-align: right; }
  .ticket__route small { display: block; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
  .ticket__route strong { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-size: 1.2rem; line-height: 1.1; }
  .ticket__path { display: flex; align-items: center; gap: .3rem; color: var(--sage-deep); }
  .ticket__path i { display: block; width: 18px; border-top: 3px dotted var(--sun-deep); }
  .ticket__path .i { width: 26px; height: 26px; }
  .ticket__perks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
  .ticket__perks li { display: flex; align-items: center; gap: .4rem; min-height: 36px; padding: .3rem .6rem; border-radius: var(--r-pill);
    background: var(--sage-tint); font-weight: 800; font-size: .88rem; }
  .ticket__perks .i { width: 17px; height: 17px; flex: none; color: var(--sage-deep); }
  .ticket__stub { position: relative; margin: var(--space-4) calc(var(--space-5) * -1) calc(var(--space-4) * -1); padding: var(--space-3) var(--space-5);
    border-top: 2px dashed var(--line-strong); font-size: .9rem; font-weight: 700; color: var(--ink-2); border-radius: 0 0 var(--r-lg) var(--r-lg);
    background: color-mix(in srgb, var(--sun-soft) 60%, var(--paper-3)); }
}