/* Hero graphics for product and info pages (art.py), linked only where a page shows one. Adapted from hero-options/hero-options.css (2026-10-31). */
/* product cards (option A, the home hero until 2026-10-29), moved here from site.css */
.ui-stack { position: relative; min-height: 420px; }
.ui-card { position: absolute; background: var(--white); color: var(--graphite); border-radius: 16px; box-shadow: var(--shadow-dark); padding: 18px 20px; font-size: 14px; }
.ui-card .t { font-weight: 700; font-size: 15px; display: flex; justify-content: space-between; gap: 12px; }
.ui-card .s { color: var(--grey); font-size: 13px; font-weight: 500; }
.ui-dep { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 14px; margin: 12px 0 0; align-items: center; }
.ui-dep dt { font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-dep dd { margin: 0; }
.ui-dep .tag { font-size: 12px; font-weight: 700; background: var(--off); border: 1px solid var(--silver); border-radius: 6px; padding: 2px 8px; }
.ui-bars { display: flex; align-items: flex-end; gap: 6px; height: 70px; margin-top: 12px; }
.ui-bars i { flex: 1; border-radius: 4px 4px 0 0; background: var(--orange); }
.ui-bars i:nth-child(odd) { background: var(--grey); }
.ui-chip { position: absolute; background: var(--white); color: var(--graphite); border-radius: 999px; padding: 10px 16px; font-weight: 700; font-size: 14px; box-shadow: var(--shadow-dark); display: flex; gap: 10px; align-items: center; }
.ui-chip i { width: 10px; height: 10px; border-radius: 50%; background: #137a45; }
.ui-chip .s { color: var(--grey); font-weight: 500; }
@media (max-width: 900px) { .ui-stack { min-height: 0; display: grid; gap: 14px; } .ui-card, .ui-chip { position: static; } .ui-card { max-width: 420px; } .ui-chip { justify-self: start; } }

.hx { position: relative; min-height: 420px; display: grid; align-items: center; }
.hx .tag { white-space: nowrap; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--grey); background: var(--off); border: 1px solid var(--silver); border-radius: 6px; padding: 2px 7px; }

/* B · network map */
.hx-mapfig { margin: 0; }
.hx-mapfig svg { width: 100%; height: auto; display: block; }
.hx-chip { position: absolute; top: 8px; right: 0; margin: 0; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: var(--white); border-radius: 999px; padding: 8px 16px; font-size: 14px; backdrop-filter: blur(6px); }
.hx-chip b { font-weight: 800; }
.hx-chip span { color: var(--silver); margin: 0 4px; }
.hx-note { position: absolute; left: 0; bottom: 8px; width: 250px; background: var(--white); color: var(--graphite); border-radius: 16px; box-shadow: var(--shadow-dark); padding: 16px 20px; }
.hx-note p { margin: 0; }
.hx-note .t { font-weight: 700; font-size: 15px; }
.hx-note .big { font-size: 44px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; border-bottom: 4px solid var(--orange); display: inline-block; margin: 4px 0 6px; }
.hx-note .s { color: var(--grey); font-size: 13px; }

/* C · departure board */
.hx-board { background: #1B1E22; border: 1px solid #3A3F46; border-radius: 18px; box-shadow: var(--shadow-dark); padding: 18px 20px 14px; color: var(--off); }
.hb-head { display: flex; align-items: baseline; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid #30353B; font-size: 14px; color: var(--silver); }
.hb-title { font-weight: 800; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--white); }
.hb-clock { margin-left: auto; color: var(--orange); font-weight: 700; font-variant-numeric: tabular-nums; }
.hx-board table { width: 100%; border-collapse: collapse; font-size: 14px; }
.hx-board th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9CA3AF; padding: 10px 6px 6px; }
.hx-board td { padding: 9px 6px; border-top: 1px solid #2A2E33; white-space: nowrap; }
.hx-board td.arr { color: var(--silver); font-variant-numeric: tabular-nums; }
.flap { display: inline-block; width: 19px; height: 28px; line-height: 28px; text-align: center; margin-right: 2px; border-radius: 4px; font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; color: var(--white);
  background: linear-gradient(#33383E 0 49%, #15171A 49% 51%, #2B3035 51%); }
.flap.colon { width: 8px; background: none; }
.ampm { font-size: 11px; font-weight: 700; color: var(--silver); margin-left: 4px; }
.st { font-size: 12px; font-weight: 700; color: #6EE7A0; }
.st::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px; }
.st.now { color: var(--orange); }
.hb-foot { margin: 10px 0 0; font-size: 12px; color: #9CA3AF; }

/* D · product window */
.hx-win { background: var(--white); color: var(--graphite); border-radius: 14px; box-shadow: var(--shadow-dark); overflow: hidden; }
.hx-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: #EEF0F3; border-bottom: 1px solid #E5E7EB; }
.hx-bar i { width: 10px; height: 10px; border-radius: 50%; background: #C9CDD3; }
.hx-bar .url { margin-left: 10px; font-size: 12px; color: #4B5563; background: var(--white); border-radius: 6px; padding: 3px 12px; flex: 1; max-width: 220px; }
.hx-bar .tag { margin-left: auto; }
.hx-body { padding: 16px; display: grid; gap: 14px; }
.hx-kpis { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #E5E7EB; border-radius: 10px; }
.hx-kpis div { padding: 10px 12px; display: grid; gap: 2px; }
.hx-kpis div + div { border-left: 1px solid #E5E7EB; }
.hx-kpis span, .hx-kpis em { font-size: 11.5px; color: var(--grey); font-style: normal; }
.hx-kpis b { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.hx-chart p, .hx-loads p { margin: 0 0 6px; font-size: 13px; font-weight: 700; }
.hx-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.hx-chart .grid line { stroke: #E5E7EB; stroke-width: 1; }
.hx-chart .area { fill: var(--orange); fill-opacity: .12; }
.hx-chart .line { fill: none; stroke: var(--orange); stroke-width: 2; stroke-linejoin: round; }
.hx-chart circle { fill: var(--orange); stroke: var(--white); stroke-width: 2; }
.hx-chart .ticks text { font-size: 10.5px; fill: var(--grey); }
.hx-loads ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.hx-loads li { display: grid; grid-template-columns: 70px 1fr 110px 36px; align-items: center; gap: 10px; font-size: 13px; }
.hx-loads li i { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--graphite) var(--p), #E5E7EB var(--p)); }
.hx-loads li em { font-style: normal; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

/* E · phone ticket */
.hx-phone { justify-items: start; padding-left: 24px; }
.hx-device { width: 250px; padding: 10px; border-radius: 40px; background: #111315; box-shadow: var(--shadow-dark), inset 0 0 0 1px #3A3F46; }
.hx-screen { background: var(--off); color: var(--graphite); border-radius: 31px; padding: 22px 16px 18px; display: grid; gap: 12px; }
.ph-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin: 0; font-weight: 800; font-size: 17px; }
.ph-trip, .ph-ticket { background: var(--white); border-radius: 14px; padding: 12px 14px; border: 1px solid #E5E7EB; }
.ph-trip p { margin: 0; }
.ph-date { font-size: 12px; font-weight: 700; color: var(--grey); }
.ph-times { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.ph-times div { display: grid; }
.ph-times b { font-size: 15px; font-weight: 800; }
.ph-times span { font-size: 12px; color: var(--grey); }
.ph-times i { flex: 1; height: 2px; background: var(--orange); position: relative; }
.ph-times i::before, .ph-times i::after { content: ""; position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.ph-times i::before { left: 0; } .ph-times i::after { right: 0; }
.ph-meta { font-size: 12px; color: var(--grey); }
.ph-ticket { display: grid; justify-items: center; gap: 8px; }
.ph-ticket p { margin: 0; }
.ph-ticket .ok { font-weight: 800; font-size: 14px; }
.ph-ticket svg { width: 112px; height: 112px; fill: var(--graphite); }
.ph-ticket .s { font-size: 11.5px; color: var(--grey); }
.ph-btn { margin: 0; text-align: center; background: var(--graphite); color: var(--white); border-radius: 12px; padding: 10px; font-weight: 700; font-size: 14px; }
.hx-pay { top: 70px; right: 0; width: 210px; }
.hx-pay p { margin: 0; }
.hx-pay .amt { font-size: 28px; font-weight: 800; margin: 4px 0 2px; }
.hx-seat { bottom: 96px; right: 20px; }
.hx-seat i { background: var(--orange); }

/* F · connections */
.hx-connect svg { width: 100%; height: auto; display: block; overflow: visible; }
.hx-connect .col { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; fill: var(--silver); }
.hx-connect .links path { fill: none; stroke: #6B7280; stroke-width: 1.5; }
.hx-connect .flow path { fill: none; stroke: var(--orange); stroke-width: 2; stroke-dasharray: 3 11; stroke-linecap: round; animation: hx-flow 1.4s linear infinite; }
@keyframes hx-flow { to { stroke-dashoffset: -28; } }
@media (prefers-reduced-motion: reduce) { .hx-connect .flow path { animation: none; } }
.hx-connect .pill rect { fill: #33383E; stroke: #565D68; }
.hx-connect .pill text { fill: var(--white); font-size: 13px; font-weight: 600; }
.hx-connect .pill.more rect { fill: none; stroke-dasharray: 4 4; }
.hx-connect .pill.more text { fill: var(--silver); }
.hx-connect .halo { fill: var(--orange); fill-opacity: .12; }
.hx-connect .hub { fill: var(--white); }
.hx-connect .hub-t { font-size: 28px; font-weight: 800; letter-spacing: -.5px; fill: var(--graphite); }

/* small screens: floating pieces stack */
@media (max-width: 900px) {
  .hx { min-height: 0; gap: 14px; }
  .hx-chip, .hx-note, .hx-pay, .hx-seat { position: static; justify-self: start; }
  .hx-phone { padding-left: 0; }
}
@media (max-width: 560px) {
  .hx-loads li { grid-template-columns: 62px 1fr 36px; } .hx-loads li i { display: none; }
  .hx-board th:nth-child(3), .hx-board td.arr { display: none; }
}


/* G, H, I · flat illustrations, after the busschedules.com bus-stop sign */
.hx-art { justify-items: center; }
.hx-art svg { display: block; width: 100%; max-width: 420px; height: auto; }
.hx-art .sh { fill: rgba(0,0,0,.3); }
.art-stop .pole { fill: #9CA3AF; } .art-stop .pole-hi { fill: #D1D5DB; }
.art-stop .disc { fill: var(--orange); } .art-stop .rim { fill: none; stroke: var(--off); stroke-width: 7; }
.art-stop .bus { fill: var(--graphite); } .art-stop .win { fill: var(--off); } .art-stop .lamp { fill: var(--off); } .art-stop .grille { fill: #6B7280; }
.art-stop .mirror { fill: none; stroke: var(--graphite); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.art-stop .clip { fill: #6B7280; }
.art-stop .screen { fill: #15171A; stroke: var(--off); stroke-width: 5; }
.art-stop .scr-h { fill: #9CA3AF; font: 700 10.5px "Plus Jakarta Sans", sans-serif; letter-spacing: .14em; }
.art-stop .live { fill: var(--orange); } .art-stop .live-w { fill: none; stroke: var(--orange); stroke-width: 2.5; stroke-linecap: round; }
.art-stop .ln { fill: #4B5563; } .art-stop .ln-hi { fill: var(--off); }
.art-stop .eta { fill: #9CA3AF; font: 700 14px "Plus Jakarta Sans", sans-serif; } .art-stop .eta.now { fill: var(--orange); font-size: 16px; font-weight: 800; }
.art-coach .tyre { fill: #15171A; }
.art-coach .arm { fill: none; stroke: #15171A; stroke-width: 8; stroke-linecap: round; } .art-coach .mir { fill: #454C57; stroke: #15171A; stroke-width: 4; }
.art-coach .body { fill: var(--off); stroke: #C3C8D0; stroke-width: 3; }
.art-coach .sign { fill: #15171A; } .art-coach .sign-t { fill: var(--orange); font: 800 19px "Plus Jakarta Sans", sans-serif; letter-spacing: .28em; }
.art-coach .glass { fill: #1B1E22; } .art-coach .refl { fill: #FFFFFF; fill-opacity: .08; }
.art-coach .wiper { fill: none; stroke: #6B7280; stroke-width: 4; stroke-linecap: round; }
.art-coach .stripe { fill: var(--orange); }
.art-coach .lamp { fill: #FFFFFF; stroke: #C3C8D0; stroke-width: 2; } .art-coach .ind { fill: var(--orange); }
.art-coach .badge { fill: var(--graphite); } .art-coach .badge-t { fill: #FFFFFF; font: 800 15px "Plus Jakarta Sans", sans-serif; letter-spacing: -.02em; }
.art-coach .bumper { fill: #454C57; } .art-coach .slot { fill: #6B7280; }
.art-ticket .back { fill: #454C57; } .art-ticket .back-stub { fill: #5A616C; }
.art-ticket .paper { fill: var(--off); } .art-ticket .stub { fill: var(--orange); }
.art-ticket .stub-t { fill: #171717; font: 800 12px "Plus Jakarta Sans", sans-serif; letter-spacing: .2em; }
.art-ticket .perf { fill: none; stroke: #9CA3AF; stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; }
.art-ticket .hole { fill: var(--graphite); }
.art-ticket .lbl { fill: var(--grey); font: 700 10px "Plus Jakarta Sans", sans-serif; letter-spacing: .14em; }
.art-ticket .code { fill: var(--graphite); font: 800 30px "Plus Jakarta Sans", sans-serif; letter-spacing: -.02em; }
.art-ticket .arrow { fill: none; stroke: var(--orange); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.art-ticket .rule { stroke: var(--silver); stroke-width: 2; stroke-dasharray: 4 5; }
.art-ticket .val { fill: var(--graphite); font: 800 15px "Plus Jakarta Sans", sans-serif; }
.art-ticket .bars rect { fill: var(--graphite); }
.art-ticket .ok { fill: var(--orange); } .art-ticket .ok-rim { fill: none; stroke: var(--off); stroke-width: 6; }
.art-ticket .ok-tick { fill: none; stroke: #171717; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) { .hx-art svg { max-width: 300px; } .hx-art { justify-items: start; } }

/* J, K, L · transport + AI + data */
.art-jkl .cb { fill: var(--off); stroke: #C3C8D0; stroke-width: 2; } .art-jkl .cw { fill: #1B1E22; }
.art-jkl .cdiv { stroke: var(--off); stroke-width: 3; } .art-jkl .cstripe { fill: var(--orange); }
.art-jkl .clamp { fill: #FFE2C2; } .art-jkl .ct { fill: #15171A; } .art-jkl .ch { fill: #9CA3AF; }
.art-jkl .spark { fill: var(--orange); } .art-jkl .spark-lt { fill: var(--off); } .art-jkl .spark-dk { fill: #171717; }
.art-jkl .bar { fill: #454C57; } .art-jkl .bar-hi { fill: #5A616C; }
.art-jkl .trend { fill: none; stroke: var(--orange); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.art-jkl .pt { fill: var(--off); stroke: var(--orange); stroke-width: 3.5; }
.art-jkl .road { fill: #15171A; } .art-jkl .lane { stroke: #6B7280; stroke-width: 3; stroke-dasharray: 16 12; stroke-linecap: round; }
.art-jkl .trace path { fill: none; stroke: var(--orange); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.art-jkl .stop { fill: var(--off); stroke: var(--orange); stroke-width: 3.5; }
.art-jkl .pin { fill: #9CA3AF; }
.art-jkl .chip { fill: #15171A; } .art-jkl .chip-rim { fill: none; stroke: var(--off); stroke-width: 6; }
.art-jkl .chip-t { fill: var(--off); font: 800 50px "Plus Jakarta Sans", sans-serif; letter-spacing: -.02em; }
.art-jkl .node { fill: var(--off); } .art-jkl .node-rim { fill: none; stroke: #C3C8D0; stroke-width: 3; }
.art-jkl .ic-dk { fill: var(--graphite); } .art-jkl .ic-lt { fill: var(--off); } .art-jkl .ic-or { fill: var(--orange); }
.art-jkl .ic-perf { stroke: var(--off); stroke-width: 2.5; stroke-dasharray: 3 4; } .art-jkl .ic-base { stroke: var(--graphite); stroke-width: 3; stroke-linecap: round; }
.art-jkl .card { fill: var(--off); }
.art-jkl .ai-tile { fill: var(--orange); }
.art-jkl .ln-dk { fill: var(--graphite); } .art-jkl .ln { fill: var(--silver); }
.art-jkl .act { fill: var(--graphite); } .art-jkl .fc { fill: var(--orange); fill-opacity: .28; stroke: var(--orange); stroke-width: 2.5; stroke-dasharray: 5 4; }
.art-jkl .day { fill: var(--grey); font: 700 11px "Plus Jakarta Sans", sans-serif; }
.art-jkl .today { stroke: #9CA3AF; stroke-width: 2; stroke-dasharray: 3 5; } .art-jkl .base { stroke: var(--silver); stroke-width: 2; }
.art-jkl .bubble path { fill: var(--orange); stroke: var(--off); stroke-width: 5; stroke-linejoin: round; }
.art-jkl .bub-t { fill: #171717; font: 800 18px "Plus Jakarta Sans", sans-serif; }
.art-jkl .road-ln { stroke: #6B7280; stroke-width: 4; stroke-linecap: round; }

/* variations of A, D, E */
.spk { width: 16px; height: 16px; flex: none; } .spk path { fill: var(--orange); }
.hx-insight .ins-h { display: inline-flex; align-items: center; gap: 7px; }
.hx-insight p { margin: 0; }
.ins-msg { font-weight: 800; font-size: 17px; line-height: 1.3; margin: 8px 0 4px !important; }
.ins-acts { display: flex; align-items: center; gap: 14px; margin-top: 12px !important; }
.mini-btn { background: var(--orange); color: #171717; font-weight: 700; font-size: 13px; padding: 6px 12px; border-radius: 8px; }
.ui-chip i.pay { background: var(--orange); }
.hx-feed { min-height: 400px; }
.ui-card.feed { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; }
.ui-card.feed p { margin: 0; }
.ui-card.feed > div { flex: 1; display: grid; gap: 6px; }
.fi { flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--graphite); display: grid; place-items: center; }
.fi.or { background: var(--orange); }
.fi svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fi.or svg { stroke: #171717; }
.meter { height: 8px; border-radius: 4px; background: #E5E7EB; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--orange); border-radius: 4px; }
.route { position: relative; height: 14px; margin: 2px 8px; background: linear-gradient(var(--silver), var(--silver)) center / 100% 3px no-repeat; }
.route i { position: absolute; top: 3px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #fff; border: 2px solid var(--grey); }
.route i.done { border-color: var(--orange); background: var(--orange); }
.route b { position: absolute; top: -2px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--graphite); border: 3px solid var(--orange); }
.feed-cap { position: absolute; left: 142px; top: 382px; margin: 0; color: var(--on-dark-2); font-size: 12px; }
.ui-card.feed.f2 { top: 124px; } .ui-card.feed.f3 { top: 262px; }
/* es/fr card text runs a line longer: open the stack up so cards keep a 24px gap and the caption stays clear (QA 2026-11-01) */
@media (min-width: 901px) {
  :lang(es) .ui-card.feed.f2, :lang(fr) .ui-card.feed.f2 { top: 144px; } :lang(es) .ui-card.feed.f3, :lang(fr) .ui-card.feed.f3 { top: 306px; }
  :lang(es) .hx-feed, :lang(fr) .hx-feed { min-height: 468px; } :lang(es) .feed-cap, :lang(fr) .feed-cap { top: 450px; }
}
/* D2 dark dashboard */
.hx-dark { padding-bottom: 46px; }
.hx-win.dk { background: #1B1E22; color: var(--off); }
.hx-win.dk .hx-bar { background: #15171A; border-color: #2A2E33; } .hx-win.dk .hx-bar i { background: #3A3F46; }
.hx-win.dk .url { background: #2A2E33; color: var(--silver); }
.hx-win.dk .tag { background: #2A2E33; border-color: #3A3F46; color: var(--silver); }
.dk-wrap { display: grid; grid-template-columns: 46px 1fr; }
.dk-side { display: grid; align-content: start; gap: 12px; padding: 18px 12px; border-right: 1px solid #2A2E33; }
.dk-side i { width: 22px; height: 22px; border-radius: 6px; background: #2A2E33; } .dk-side i.on { background: var(--orange); }
.hx-win.dk .hx-kpis, .hx-win.dk .hx-kpis div + div { border-color: #30353B; }
.hx-win.dk .hx-kpis span, .hx-win.dk .hx-kpis em, .hx-win.dk .hx-chart .ticks text { color: #9CA3AF; fill: #9CA3AF; }
.hx-win.dk .hx-chart .grid line { stroke: #30353B; } .hx-win.dk .hx-chart .area { fill-opacity: .2; } .hx-win.dk .hx-chart circle { stroke: #1B1E22; }
.hx-win.dk .hx-loads li i { background: linear-gradient(90deg, var(--orange) var(--p), #30353B var(--p)); }
.dk-ins { position: absolute; right: -14px; bottom: 0; width: 270px; }
/* D3 dashboard + phone */
.hx-combo { padding: 0 0 70px 64px; }
.combo-phone { position: absolute; left: 0; bottom: 0; transform: scale(.66); transform-origin: bottom left; }
/* E2 rider + driver */
.hx-phones { display: flex; justify-content: center; align-items: center; min-height: 520px; }
.hx-phones .hx-device { transform: scale(.86) rotate(-5deg); flex: none; }
.hx-phones .driver { transform: scale(.86) rotate(5deg) translateY(30px); margin-left: -70px; }
.hx-screen.dk { background: #15171A; color: var(--off); }
.hx-screen.dk .ph-trip { background: #22262B; border-color: #30353B; } .hx-screen.dk .ph-date, .hx-screen.dk .ph-times span { color: #9CA3AF; }
.hx-screen.dk .tag { background: #2A2E33; border-color: #3A3F46; color: var(--silver); }
.scan-ok { display: grid; justify-items: center; gap: 4px; padding: 14px 0 6px; }
.scan-ok svg { width: 64px; height: 64px; } .scan-ok circle { fill: #137A45; } .scan-ok path { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.scan-ok b { font-size: 18px; font-weight: 800; } .scan-ok span { font-size: 13px; color: var(--silver); }
.board p { margin: 0 0 6px; font-size: 13px; color: var(--silver); } .board b { color: #fff; font-size: 16px; }
.hx-screen.dk .meter { background: #30353B; }
.ph-btn.or { background: var(--orange); color: #171717; }
/* E3 live tracking */
.trk-map { border-radius: 14px; overflow: hidden; border: 1px solid #E5E7EB; }
.trk-map svg { display: block; width: 100%; height: auto; }
.m-bg { fill: #ECEEF1; } .m-water { fill: #DCE3EA; }
.m-road { stroke: #fff; stroke-width: 7; fill: none; } .m-road.sm { stroke-width: 4; }
.m-done { fill: none; stroke: var(--orange); stroke-width: 5; stroke-linecap: round; } .m-next { fill: none; stroke: var(--grey); stroke-width: 4; stroke-dasharray: 2 6; stroke-linecap: round; }
.m-stop { fill: #fff; stroke: var(--orange); stroke-width: 3; }
.m-pin { fill: var(--graphite); } .m-pin-in { fill: #fff; }
.m-bus { fill: var(--orange); stroke: #fff; stroke-width: 3; } .m-bus-in { fill: #171717; }
.trk-eta { margin: 0; font-size: 14px; } .trk-eta b { font-size: 22px; font-weight: 800; }
.hx-track .meter { margin-top: 8px; }
@media (max-width: 900px) {
  .hx-feed { min-height: 0; } .feed-cap { position: static; } .ui-card.feed { width: auto !important; max-width: 420px; }
  .dk-ins { position: static; width: auto; max-width: 420px; } .hx-dark { padding-bottom: 0; }
  .hx-combo { padding: 0; } .combo-phone { display: none; }
  .hx-phones { justify-content: flex-start; min-height: 0; } .hx-phones .driver { display: none; } .hx-phones .hx-device { transform: none; }
}

/* ---------- page heroes with a graphic (product pages, AI) ---------- */
.page-hero.has-art .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 500px); column-gap: clamp(32px, 5vw, 72px); align-items: center; }
.page-hero.has-art .ph-art { min-width: 0; }
.page-hero.has-art:has(.hx.pl) .ph-text { align-self: start; }   /* /platform's tall diagram: keep the breadcrumb where every other page has it (QA 2026-11-01) */
.page-hero.has-art .ph-art .hx, .page-hero.has-art .ph-art .ui-stack { min-height: 400px; }
.page-hero.has-art .ph-art .hx-art svg { max-width: 400px; margin-inline: auto; }
@media (max-width: 1180px) {
  .page-hero.has-art .wrap { grid-template-columns: minmax(0, 1fr); }
  .page-hero.has-art .ph-art { max-width: 520px; }
  .page-hero.has-art .ph-art .hx, .page-hero.has-art .ph-art .ui-stack { min-height: 0; }
}
@media (max-width: 1180px) and (min-width: 901px) {     /* floating cards keep their layout while there's room */
  .page-hero.has-art .ph-art .ui-stack { min-height: 400px; }
}
@media (max-width: 640px) { .page-hero.has-art .ph-art { display: none; } }   /* decorative: phones go straight to the copy */

/* ---------- public sector: one trip, one ticket ---------- */
.journey { display: grid; gap: 30px; }
.j-ticket { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin: 0; background: var(--graphite); color: var(--white); border-radius: 16px; padding: 16px 20px; }
.j-ticket > span:nth-child(2) { display: grid; gap: 2px; }
.j-ticket b { font-size: 18px; }
.j-ticket > span:nth-child(2) span { color: var(--on-dark-2); font-size: 15px; }
.j-qr { line-height: 0; background: var(--white); padding: 6px; border-radius: 8px; }
.j-qr svg { width: 52px; height: 52px; fill: var(--graphite); }
.j-tag { margin-left: auto; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--on-dark-2); border: 1px solid #565D68; border-radius: 6px; padding: 2px 8px; }
.j-path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: start; }
.j-node { display: grid; justify-items: center; text-align: center; gap: 4px; width: 170px; }
.j-dot { width: 30px; height: 30px; border-radius: 50%; background: var(--white); border: 4px solid var(--graphite); box-sizing: border-box; }
.j-node.hub .j-dot { background: var(--orange); border-color: var(--orange); box-shadow: 0 0 0 6px rgba(255,121,0,.18); }
.j-node b { font-size: 17px; margin-top: 6px; }
.j-node > span:last-child, .j-mode span { color: var(--grey); font-size: 15px; }
.j-leg { display: grid; gap: 14px; padding-top: 13px; }
.j-line { height: 4px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--graphite) 0 10px, transparent 10px 17px); }
.j-leg.intercity { padding-top: 12px; }
.j-leg.intercity .j-line { height: 6px; border-radius: 3px; background: var(--orange); }
.j-mode { display: grid; justify-items: center; text-align: center; gap: 2px; }
.j-mode b { font-size: 16px; }
.j-split { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; border-top: 1px solid var(--silver); padding-top: 22px; }
.j-split-h { margin: 0; font-weight: 700; }
.j-split ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.j-split li { display: grid; gap: 2px; background: var(--off); border: 1px solid var(--silver); border-radius: 12px; padding: 10px 16px; }
.j-split li span { color: var(--grey); font-size: 15px; }
@media (max-width: 760px) {
  .j-path { grid-template-columns: minmax(0, 1fr); }
  .j-node { width: auto; grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; justify-items: start; text-align: left; gap: 0 14px; }
  .j-node .j-dot { grid-row: span 2; align-self: center; }
  .j-node b { margin-top: 0; }
  .j-leg, .j-leg.intercity { grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; padding: 0; gap: 0 14px; }
  .j-line { width: 4px; height: auto; min-height: 64px; justify-self: center;
    background: repeating-linear-gradient(180deg, var(--graphite) 0 10px, transparent 10px 17px); }
  .j-leg.intercity .j-line { width: 6px; height: auto; }
  .j-mode { justify-items: start; text-align: left; align-self: center; }
  .j-tag { margin-left: 0; }
}

/* ---------- SEO & AEO, Payments, Agent POS (second round) ---------- */
.sx-card { background: var(--white); color: var(--graphite); border-radius: 16px; box-shadow: var(--shadow-dark); padding: 16px 18px; font-size: 14px; }
.sx-card p { margin: 0; }
.sx-card .t { font-weight: 700; font-size: 15px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sx-card .s { color: var(--grey); font-size: 13px; font-weight: 500; }
.sx-search, .ox-search { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--silver); border-radius: 999px; padding: 8px 14px; font-size: 14px; }
.sx-search svg, .ox-search svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--grey); stroke-width: 2.2; stroke-linecap: round; }
.sx-search .tag { margin-left: auto; }
/* SEO & AEO */
.sx { display: flex; flex-direction: column; }
.sx-serp { width: 420px; display: grid; gap: 14px; }
.sx-res + .sx-res { border-top: 1px solid #E5E7EB; padding-top: 12px; }
.sx-url { font-size: 12.5px; color: #4B5563; display: flex; align-items: center; gap: 8px; }
.sx-url i { width: 18px; height: 18px; border-radius: 50%; background: var(--orange); flex: none; }
.sx-title { font-size: 17px; font-weight: 700; margin-top: 4px !important; }
.sx-desc { font-size: 13.5px; color: var(--grey); margin-top: 2px !important; }
.sx-rich { list-style: none; margin: 10px 0 0; padding: 0; display: flex; gap: 8px; }
.sx-rich li { display: grid; border: 1px solid var(--silver); border-radius: 10px; padding: 6px 10px; }
.sx-rich b { font-size: 14px; } .sx-rich span { font-size: 12px; color: var(--grey); }
.sx-ai { position: relative; align-self: flex-end; margin-top: -22px; width: 290px; border-top: 4px solid var(--orange); }   /* overlaps only the result card's bottom padding */
.sx-ai-h { display: flex; align-items: center; gap: 8px; font-weight: 800; margin-bottom: 6px !important; }
.sx-ai p { line-height: 1.45; }
.sx-src { margin-top: 8px !important; font-size: 12.5px; color: var(--grey); }
/* Payments */
.px-pay { width: 300px; display: grid; gap: 12px; }
.px-trip { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--off); border: 1px solid #E5E7EB; border-radius: 12px; padding: 10px 12px; font-weight: 700; }
.px-trip small { font-weight: 500; color: var(--grey); font-size: 12px; }
.px-trip b { font-size: 20px; font-weight: 800; }
/* es/fr: the longer date line goes full width under route + price, so the card stays the English height (QA 2026-11-01) */
:lang(es) .px-trip, :lang(fr) .px-trip { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; }
:lang(es) .px-trip > span, :lang(fr) .px-trip > span { display: contents; }
:lang(es) .px-trip br, :lang(fr) .px-trip br { display: none; }
:lang(es) .px-trip small, :lang(fr) .px-trip small { grid-column: 1 / -1; grid-row: 2; }
:lang(es) .px-trip b, :lang(fr) .px-trip b { grid-column: 2; grid-row: 1; }
.px-tabs { display: flex; gap: 6px; }
.px-tabs span, .ox-acts span { flex: 1; text-align: center; border: 1.5px solid var(--silver); border-radius: 10px; padding: 7px 0; font-weight: 700; font-size: 13px; }
.px-tabs .on { border-color: var(--graphite); box-shadow: inset 0 0 0 1px var(--graphite); }
.px-field { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--grey); border-radius: 10px; padding: 10px 12px; letter-spacing: .04em; }
.px-field svg { width: 18px; height: 18px; fill: none; stroke: var(--graphite); stroke-width: 2; }
.px-field em { margin-left: auto; font-style: normal; color: var(--grey); }
.px-note { font-size: 12px; color: var(--grey); margin-top: -4px !important; }
.px-btn { background: var(--orange); color: var(--btn-ink); text-align: center; border-radius: 12px; padding: 11px; font-weight: 800; }
.px-ok { top: 22px; right: 0; }
.px-pci { top: 82px; right: 26px; }
.px-pci svg, .ox-call svg { width: 18px; height: 18px; fill: none; stroke: var(--orange); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.px-ch { position: absolute; right: 0; bottom: -48px; width: 252px; }
:lang(fr) .px-ch { width: 280px; }   /* "Paiements par canal" stays on one line, so the card doesn't rise into the tabs */
.px-ch ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.px-ch li { display: grid; grid-template-columns: 78px 1fr 34px; align-items: center; gap: 8px; font-size: 13px; }
.px-ch li i { height: 7px; border-radius: 4px; background: linear-gradient(90deg, var(--graphite) var(--p), #E5E7EB var(--p)); }
.px-ch li em { font-style: normal; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
/* Agent POS */
.ox-win { width: 410px; }
.ox-body { padding: 16px; display: grid; gap: 12px; }
.ox-search { border-radius: 10px; border-color: var(--graphite); }
.ox-search span { font-weight: 700; white-space: nowrap; }
.ox-search em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--grey); }
.ox-order { border: 1px solid #E5E7EB; border-radius: 12px; padding: 12px 14px; display: grid; gap: 6px; }
.ox-order p { margin: 0; }
.ox-h { display: flex; justify-content: space-between; align-items: center; }
.ox-paid { background: #DCFCE7; color: #14532D; font-weight: 700; font-size: 12px; border-radius: 6px; padding: 2px 8px; }
.ox-meta { font-size: 12.5px; color: var(--grey); }
.ox-acts { display: flex; gap: 8px; }
.ox-acts span { flex: none; padding: 7px 14px; }   /* buttons sized to their labels, clear of the loyalty card */
:lang(es) .ox-acts span, :lang(fr) .ox-acts span { padding: 7px 10px; }
.ox-acts .on { background: var(--orange); border-color: var(--orange); color: var(--btn-ink); }
.ox-call { top: 0; right: 0; }
.ox-call svg { stroke: var(--graphite); }
.ox-loy { position: absolute; right: 0; bottom: -44px; width: 190px; }
.ox-loy .amt { font-size: 24px; font-weight: 800; margin: 4px 0 2px; }
@media (max-width: 900px) {
  .sx-ai, .px-ok, .px-pci, .px-ch, .ox-call, .ox-loy { position: static; justify-self: start; }
  .sx-ai { align-self: flex-start; margin-top: 14px; }
  .sx-serp, .px-pay, .ox-win, .sx-ai, .px-ch, .ox-loy { width: auto; max-width: 440px; }
}

/* ---------- Loyalty, API & Webhooks ---------- */
.lx-bal { background: var(--graphite); color: var(--white); border-radius: 14px; padding: 12px 14px; display: grid; gap: 6px; }
.lx-bal p { margin: 0; }
.lx-k, .lx-s { font-size: 12px; color: var(--on-dark-2); }
.lx-pts { font-size: 28px; font-weight: 800; line-height: 1.1; } .lx-pts span { font-size: 14px; font-weight: 700; color: var(--on-dark-2); }
.lx-bal .meter { background: #454C57; }
.lx-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0; font-size: 14px; }
.lx-row span { font-size: 12px; color: var(--grey); white-space: nowrap; }
.lx-pass { display: grid; gap: 8px; }
.lx-dots { display: flex; gap: 5px; margin: 0; }
.lx-dots i { flex: 1; height: 8px; border-radius: 4px; background: #E5E7EB; } .lx-dots i.on { background: var(--orange); }
.lx-amt { font-size: 16px; }
.lx-earn { top: 40px; right: 0; } .lx-earn i { background: var(--orange); }
.lx-ch { position: absolute; right: 0; bottom: 24px; width: 220px; }
.lx-ch ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lx-ch li { border: 1px solid var(--silver); border-radius: 999px; padding: 3px 10px; font-size: 13px; font-weight: 700; }
.ax { align-content: center; }
.ax-win { width: 400px; }
.ax-code { margin: 0; padding: 16px 18px 18px; font: 13.5px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--off); white-space: pre; overflow: hidden; }
.ax-code .cm { color: #1B1E22; background: var(--orange); border-radius: 4px; padding: 1px 6px; font-weight: 700; }
.ax-code .cc { color: #9CA3AF; } .ax-code .ck { color: var(--silver); } .ax-code .cs { color: #FDBA74; } .ax-code .cn { color: #6EE7A0; }
.ax-doc { top: 6px; right: 0; } .ax-doc i { background: var(--orange); }
.ax-hooks { position: absolute; right: 0; bottom: -30px; width: 280px; }
.ax-hooks ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.ax-hooks li { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 10px; font-size: 13px; }
.ax-hooks li i { width: 8px; height: 8px; border-radius: 50%; background: var(--silver); } .ax-hooks li i.on { background: #137A45; }
.ax-hooks code { font: 600 12.5px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ax-hooks li span { color: var(--grey); font-size: 12px; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .lx-earn, .lx-ch, .ax-doc, .ax-hooks { position: static; justify-self: start; }
  .lx-ch, .ax-hooks, .ax-win { width: auto; max-width: 440px; }
}

/* ---------- /platform: MMC hub, product areas, channels (art.platform_art) ---------- */
.pl { display: grid; gap: 18px; align-content: center; }
.pl ul { list-style: none; margin: 0; padding: 0; }
.pl p { margin: 0; }
.pl-edge { display: grid; gap: 8px; }
.pl-k { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--silver); }
.pl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-chips li { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color: var(--white); border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600; }
.pl-chips.alt li { background: none; border-style: dashed; }
.pl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
.pl-g { position: relative; background: #23272C; border: 1px solid #565D68; border-radius: 14px; padding: 12px 14px; }
.pl-g::after { content: ""; position: absolute; left: 50%; width: 2px; height: 22px; background: var(--orange); }
.pl-g.top::after { top: 100%; } .pl-g.bot::after { bottom: 100%; }
.pl-gk { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); margin-bottom: 6px !important; }
.pl-g ul { display: grid; gap: 3px; font-size: 13.5px; line-height: 1.45; color: var(--on-dark-2); }
.pl-hub { grid-column: 1 / -1; display: grid; justify-items: center; text-align: center; gap: 2px; background: var(--white); color: var(--graphite); border-radius: 16px;
  padding: 14px 18px 16px; box-shadow: 0 0 0 8px rgba(255,121,0,.16), var(--shadow-dark); border-bottom: 5px solid var(--orange); }
.pl-hub b { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.pl-hub span { font-size: 13.5px; color: var(--grey); }

/* ---------- interline settlement: one ticket → two carriers → NBTA clearing → each carrier paid (art.interline) ---------- */
.split-x { margin-top: 56px; }
.il { display: grid; gap: 16px; }
.il p { margin: 0; }
.il-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 15px; color: var(--grey); }
.il-tag { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--graphite); background: var(--white); border: 1px solid var(--silver); border-radius: 6px; padding: 2px 8px; }
.il-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.il-step { position: relative; display: flex; flex-direction: column; gap: 12px; background: var(--white); border: 1px solid var(--silver); border-radius: var(--radius); padding: 20px 18px; }
.white .il-step { background: var(--off); }
.white .il-tag { background: var(--off); }
.il-step:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -21px; width: 14px; height: 14px; margin-top: -7px;
  border-top: 3px solid var(--orange); border-right: 3px solid var(--orange); transform: rotate(45deg); }
.il-n { width: 28px; height: 28px; border-radius: 50%; background: var(--graphite); color: var(--white); font-weight: 800; font-size: 14px; display: grid; place-items: center; }
.il-h { font-weight: 800; font-size: 18px; }
.il-t { color: var(--grey); font-size: 15px; margin-top: auto !important; }
.il-tix { display: flex; align-items: center; gap: 12px; background: var(--graphite); color: var(--white); border-radius: 12px; padding: 10px 12px; }
.il-tix > span:last-child { display: grid; gap: 1px; }
.il-tix span span { color: var(--on-dark-2); font-size: 13.5px; }
.il-qr { line-height: 0; background: var(--white); padding: 4px; border-radius: 6px; }
.il-qr svg { width: 40px; height: 40px; fill: var(--graphite); }
.il-legs { display: grid; gap: 8px; }
.il-legs p, .il-pay p { display: grid; grid-template-columns: 14px auto 1fr; align-items: center; gap: 0 10px; font-size: 15px; }
.il-legs span { color: var(--grey); justify-self: end; }
.il-legs i { width: 14px; height: 14px; border-radius: 4px; }
i.ca { background: var(--graphite); } i.cb { background: var(--orange); }
.il-ledger { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 15px; }
.il-ledger li { display: flex; align-items: center; gap: 10px; }
.il-ledger li::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%; background: #137a45 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.il-pay { display: grid; gap: 10px; }
.il-pay p { grid-template-columns: 1fr auto; gap: 4px 10px; }
.il-pay b { font-variant-numeric: tabular-nums; }
.il-pay i { grid-column: 1 / -1; height: 8px; border-radius: 4px; }
@media (max-width: 1100px) {
  .il-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .il-step:nth-child(2)::after { display: none; }
}
@media (max-width: 600px) {
  .il-flow { grid-template-columns: minmax(0, 1fr); }
  .il-step:not(:last-child)::after { display: block; top: auto; bottom: -22px; right: auto; left: 50%; margin: 0 0 0 -7px; transform: rotate(135deg); }
}
.il-legs .il-route { display: flex; justify-self: stretch; align-items: center; margin: 4px 6px 8px; position: relative; }
.il-legs .il-route i { width: auto; height: 6px; }
.il-route i.ca { border-radius: 3px 0 0 3px; } .il-route i.cb { border-radius: 0 3px 3px 0; }
.il-route::before, .il-route::after, .il-route i.ca::after { content: ""; position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--white); border: 3px solid var(--graphite); box-sizing: border-box; }
.il-route::before { left: -6px; } .il-route::after { right: -6px; border-color: var(--orange); }
.il-route i.ca { position: relative; } .il-route i.ca::after { right: -6px; border-color: var(--orange); background: var(--orange); }

/* ---------- /network hero: one search, the whole network (art.network_art) ---------- */
.nx { justify-items: end; align-content: center; gap: 14px; }
.nx-card { width: 470px; background: var(--white); color: var(--graphite); border-radius: 16px; box-shadow: var(--shadow-dark); padding: 18px 20px 16px; display: grid; gap: 12px; }
.nx p { margin: 0; }
.nx-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.nx-top > span:first-child { display: grid; gap: 2px; }
.nx-top b { font-size: 17px; }
.nx-top .s { font-size: 13px; color: var(--grey); }
.nx-count { font-size: 14px; color: var(--grey); border-bottom: 1px solid #E5E7EB; padding-bottom: 10px; }
.nx-count b { font-size: 30px; font-weight: 800; color: var(--graphite); letter-spacing: -.02em; margin-right: 6px; border-bottom: 4px solid var(--orange); }
.nx-tl { display: grid; gap: 6px; }
.nx-axis { position: relative; height: 16px; margin: 0 52px 0 64px !important; font-size: 11px; color: var(--grey); }
.nx-axis span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.nx-axis span:first-child { transform: none; } .nx-axis span:last-child { transform: translateX(-100%); }
.nx-tl ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.nx-tl li { display: grid; grid-template-columns: 64px minmax(0, 1fr) 52px; align-items: center; font-size: 12.5px; }
.nx-t { font-weight: 700; font-variant-numeric: tabular-nums; }
.nx-d { text-align: right; color: var(--grey); font-variant-numeric: tabular-nums; }
.nx-track { position: relative; height: 12px; background: repeating-linear-gradient(90deg, #EEF0F3 0 1px, transparent 1px 33.33%); border-radius: 3px; }
.nx-track i { position: absolute; top: 1px; bottom: 1px; border-radius: 5px; }
.nx i.d { background: var(--orange); } .nx i.s { background: var(--graphite); }
.nx-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--grey); border-top: 1px solid #E5E7EB; padding-top: 10px; }
.nx-legend span { display: flex; align-items: center; gap: 6px; }
.nx-legend i { width: 14px; height: 8px; border-radius: 4px; }
.nx-more { margin-left: auto; font-weight: 700; color: var(--graphite); }
.nx-chip { position: static; justify-self: end; margin: 0 22px 0 0; }
.nx-chip i { background: #137a45; }
@media (max-width: 1180px) { .nx { justify-items: start; } .nx-chip { justify-self: start; margin: 0; } }
@media (max-width: 560px) { .nx-card { width: auto; } }

/* ---------- /public-sector hero: state-branded webstore, one ticket for both legs (art.state_phone_art) ---------- */
.sp .hx-screen { gap: 10px; }
.sp-brand { display: flex; align-items: center; gap: 8px; font-size: 14.5px; white-space: nowrap; }
.sp-brand i { width: 22px; height: 22px; border-radius: 6px; background: #1D4ED8; box-shadow: inset 0 -6px 0 #FBBF24; }
.sp-search { margin: 0; font-size: 12.5px; font-weight: 600; border: 1.5px solid var(--silver); border-radius: 999px; padding: 6px 12px; background: var(--white); }
.sp-legs { list-style: none; margin: 8px 0 0; padding: 0; display: grid; }
.sp-legs li { position: relative; display: grid; grid-template-columns: 62px 1fr; padding: 0 0 12px 18px; font-size: 12px; }
.sp-legs li::before { content: ""; position: absolute; left: 0; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--white); border: 2.5px solid var(--graphite); box-sizing: border-box; }
.sp-legs li.ic::before { border-color: var(--orange); background: var(--orange); }
.sp-legs li::after { content: ""; position: absolute; left: 4px; top: 16px; bottom: 0; width: 2px; background: repeating-linear-gradient(180deg, var(--graphite) 0 4px, transparent 4px 7px); }
.sp-legs li.ic::after { background: var(--orange); width: 3px; left: 3.5px; }
.sp-legs li.end { padding-bottom: 0; } .sp-legs li.end::after { display: none; }
.sp-legs b { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
:lang(es) .sp-legs li { grid-template-columns: 76px 1fr; }   /* "10:20 a. m." is wider than "10:20 AM" */
.sp-legs span { font-weight: 600; }
.sp-legs em { grid-column: 2; font-style: normal; color: var(--grey); font-size: 11.5px; }
.sp-total { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font-size: 13px; color: var(--grey); padding: 0 4px; }
.sp-total b { font-size: 18px; color: var(--graphite); }
.sp-scan { top: 64px; right: 0; width: 220px; }
.sp-scan p { margin: 0; }
.sp-scan .t span:first-child::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #137a45; margin-right: 8px; }
.sp-chip { bottom: 90px; right: 30px; }
.sp-chip i { background: #1D4ED8; }
:lang(fr) .sp-brand { font-size: 13px; }   /* "Autocar de l'État" + tag must fit the 250px phone */
:lang(fr) .sp-chip { right: 14px; }   /* clear of the wider "28,00 $ US" total */
@media (max-width: 900px) { .sp-scan, .sp-chip { position: static; } }
.il-modes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; border-top: 1px solid var(--silver); padding-top: 20px; margin-top: 8px; }
.il-modes-h { font-weight: 700; }
.il-modes-note { flex-basis: 100%; margin: 0; font-size: 14px; color: var(--grey); max-width: 45em; }