/* Illustrative product UI. Scoped so page styles cannot turn previews into generic cards. */
.demo-dashboard,.demo-partner-panel,.demo-pass-scene,.demo-corporate-panel { width:100%; min-width:0; margin:0; font:inherit; text-align:left; }
.demo-dashboard *,.demo-partner-panel *,.demo-pass-scene *,.demo-corporate-panel * { box-sizing:border-box; }
.demo-dashboard,.demo-corporate-panel { background:#f8fafb; color:#0b1b33; border:1px solid #ffffff99; border-radius:23px; overflow:hidden; box-shadow:0 30px 90px -45px #0009,0 0 0 7px #ffffff04; }
.demo-window-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 23px; border-bottom:1px solid #e0e8ec; background:#fff; }
.demo-window-logo { display:block; width:135px; max-width:45%; height:auto; }
.demo-preview { flex:none; display:inline-block; padding:5px 8px; border-radius:6px; background:#ecf1f4; color:#617481; font-size:9px; line-height:1.5; font-weight:600; letter-spacing:0; white-space:nowrap; }
.demo-dashboard-body { padding:24px; }
.demo-day-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:22px; }
.demo-kicker { display:block; color:#69828a; font-size:9px; line-height:1.5; letter-spacing:.12em; font-weight:700; }
.demo-day-heading .demo-day-title { display:flex; align-items:center; gap:10px; margin:5px 0 0; color:#0b1b33; font-size:26px; line-height:1.2; letter-spacing:-.045em; font-weight:700; }
.demo-live-dot { width:7px; height:7px; border-radius:50%; background:#0a9a75; box-shadow:0 0 0 4px #0a9a7514; }
.demo-trip-count { font-size:12px; color:#69828a; }
.demo-trip-count strong { font-size:22px; font-weight:600; color:#163343; margin-right:3px; }
.demo-status-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:20px; }
.demo-status { min-width:0; padding:12px 10px; border:1px solid #dde7ec; border-radius:10px; background:#fff; }
.demo-status>span { display:block; font-size:10px; line-height:1.5; color:#667e8b; white-space:nowrap; }
.demo-status>strong { display:block; font-size:21px; line-height:1.25; letter-spacing:-.04em; color:#19333f; margin-top:5px; font-weight:650; }
.demo-status-attention { border-color:#e7ce95; background:#fff6e1; }
.demo-status-attention>span,.demo-status-attention>strong { color:#936919; }
.demo-status-live { background:#e5f4f2; border-color:#b4dcd7; }
.demo-status-live>strong { color:#0a7c76; }
.demo-day-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:12px; }
.demo-trip { min-width:0; border:1px solid #dce6ea; border-radius:12px; background:#fff; padding:15px; }
.demo-trip-head { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.demo-small-label { display:block; color:#69808c; font-size:8px; letter-spacing:.09em; line-height:1.6; font-weight:700; }
.demo-badge { padding:3px 6px; border-radius:5px; background:#e2f1ee; color:#227466; font-size:8px; font-weight:650; }
.demo-trip-route { display:grid; grid-template-columns:auto minmax(17px,1fr) auto; align-items:center; gap:13px; margin:21px 0 18px; }
.demo-trip-route>div:not(.demo-route-line) { display:grid; gap:2px; }
.demo-trip-route strong { color:#153747; font-size:18px; letter-spacing:-.04em; line-height:1.2; font-weight:650; }
.demo-trip-route span { color:#7b8f9a; font-size:9px; line-height:1.5; }
.demo-route-line { position:relative; height:1px; border-top:1px dashed #82bab7; }
.demo-route-line i,.demo-route-line b { position:absolute; top:-4px; width:7px; height:7px; border-radius:50%; }
.demo-route-line i { left:0; border:2px solid #0a7c86; background:#fff; }
.demo-route-line b { right:0; background:#fcc04e; }
.demo-trip-bottom { display:flex; justify-content:space-between; gap:8px; border-top:1px solid #e6ecef; padding-top:12px; font-size:9px; color:#748995; }
.demo-trip-bottom strong { color:#284550; font-size:11px; margin-right:4px; font-weight:650; }
.demo-night { color:#9a7330; white-space:nowrap; }
.demo-net { display:flex; min-width:0; flex-direction:column; align-items:flex-start; padding:17px 15px; border-radius:12px; background:#0b1b33; color:#fff; }
.demo-net .demo-small-label { color:#92b2c0; }
.demo-net>strong { display:block; color:#fcc04e; font-size:clamp(23px,2vw,31px); line-height:1.2; letter-spacing:-.055em; font-weight:600; margin:18px 0 1px; }
.demo-currency { color:#e0e8ee; font-size:10px; letter-spacing:.08em; }
.demo-net-note { display:block; color:#91abb9; font-size:9px; line-height:1.6; margin-top:auto; padding-top:14px; max-width:13em; }
.demo-fleet { margin-top:20px; }
.demo-fleet-labels { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:9px; font-size:10px; line-height:1.6; color:#607b88; }
.demo-fleet-labels>span { display:flex; align-items:center; gap:5px; }
.demo-fleet-labels strong { color:#253e49; font-weight:650; }
.demo-fleet-labels i,.demo-partner-legend i { display:inline-block; width:6px; height:6px; border-radius:50%; background:#0a7c86; flex:none; }
.demo-fleet-labels>span+span i,.demo-partner-legend>div+div i { background:#83c8cb; }
.demo-share { display:flex; gap:3px; width:100%; height:9px; overflow:hidden; border-radius:4px; }
.demo-share>span { width:var(--demo-share); flex:0 1 var(--demo-share); background:#0a7c86; border-radius:3px; }
.demo-share>span+span { background:#83c8cb; }
.demo-alert { display:flex; align-items:center; gap:9px; padding:12px 13px; border:1px solid #efdfb9; border-radius:8px; background:#fff8e9; color:#896321; margin-top:19px; font-size:10px; line-height:1.5; }
.demo-alert-mark { display:grid; place-items:center; flex:none; width:15px; height:15px; border:1px solid #d3aa58; border-radius:50%; font-size:10px; line-height:1; }
.demo-alert-arrow { margin-left:auto; color:#a57928; font-size:16px; }
.demo-dashboard-foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:11px; padding:15px 24px; background:#eef4f5; color:#738c96; font-size:9px; }
.demo-mini-flow { display:flex; align-items:center; gap:8px; color:#2e6670; font-size:10px; font-weight:650; }
.demo-mini-flow i { display:block; width:13px; height:1px; background:#92b5b7; position:relative; }
.demo-mini-flow i:after { content:''; position:absolute; right:0; top:-2px; width:4px; height:4px; border-top:1px solid #92b5b7; border-right:1px solid #92b5b7; transform:rotate(45deg); }
.demo-partner-panel { padding:28px; border:1px solid #94d1ce30; border-radius:23px; background:linear-gradient(145deg,#18515545,transparent 60%),#102633; color:#e5f1f1; }
.demo-panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:13px; margin-bottom:32px; }
.demo-panel-heading .demo-kicker { color:#7fb0b5; font-size:9px; }
.demo-panel-heading h3 { color:#e8f4f3; font-size:23px; line-height:1.3; letter-spacing:-.035em; font-weight:600; margin:9px 0 0; }
.demo-partner-panel .demo-preview { background:#ffffff0c; color:#95b6bf; border:1px solid #ffffff13; }
.demo-split-heading { display:flex; justify-content:space-between; gap:12px; font-size:11px; color:#a5c6ca; margin-bottom:14px; }
.demo-split-heading>span+span { color:#6d949e; }
.demo-share-large { height:27px; border-radius:5px; }
.demo-partner-panel .demo-share>span { background:#4fc3c9; }
.demo-partner-panel .demo-share>span+span { background:#28616f; }
.demo-partner-legend { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:18px; }
.demo-partner-legend>div { display:flex; justify-content:space-between; align-items:center; gap:8px; padding-bottom:19px; border-bottom:1px solid #a9d1d321; }
.demo-partner-legend>div>span { display:flex; align-items:center; gap:7px; font-size:11px; color:#9ebfc5; }
.demo-partner-legend i { background:#4fc3c9; }
.demo-partner-legend>div+div i { background:#28616f; }
.demo-partner-legend strong { font-size:27px; letter-spacing:-.04em; line-height:1; color:#e7f3f3; font-weight:600; }
.demo-partner-legend strong span { font-size:12px; margin-left:2px; color:#7da0aa; }
.demo-equation { display:flex; align-items:center; justify-content:space-between; gap:7px; background:#081b28; border:1px solid #94c5c61e; border-radius:10px; margin:25px 0 23px; padding:17px 13px; font-size:11px; line-height:1.6; color:#a5bec7; }
.demo-equation>b { font-size:14px; color:#466d7c; font-weight:400; }
.demo-equation>strong { color:#fcc04e; font-weight:650; }
.demo-partner-record { display:grid; gap:15px; }
.demo-partner-record>div { display:grid; grid-template-columns:7px minmax(0,1fr) minmax(0,1.2fr); align-items:center; gap:9px; font-size:10px; line-height:1.7; }
.demo-record-dot { width:4px; height:4px; background:#4fc3c9; border-radius:50%; }
.demo-partner-record strong { font-weight:600; color:#cce0e3; }
.demo-partner-record>div>span:last-child { color:#789aa7; text-align:right; }
.demo-pass-scene { position:relative; isolation:isolate; padding:27px 28px 32px; border-radius:24px; background:radial-gradient(ellipse at 50% 100%,#28666a46,transparent 70%),#0b1b33; overflow:hidden; }
.demo-pass-caption { display:flex; justify-content:space-between; align-items:center; gap:10px; position:relative; z-index:2; margin-bottom:32px; }
.demo-pass-caption .demo-kicker { color:#6f99aa; font-size:8px; max-width:140px; }
.demo-pass-caption .demo-preview { background:#ffffff0a; color:#8faab8; }
.demo-pass-back { position:absolute; width:70%; height:67%; left:14%; top:25%; padding:25px; border-radius:13px; background:#cad9dc; opacity:.26; transform:rotate(-7deg); }
.demo-pass-back>span { font-size:9px; letter-spacing:.12em; color:#33505c; }
.demo-pass-back>div { height:5px; background:#8da9b3; width:70%; margin-top:18px; border-radius:2px; }
.demo-pass-back>div+div { width:80%; margin-top:10px; }
.demo-pass { width:88%; max-width:390px; margin:0 auto; position:relative; z-index:1; border-radius:15px; background:#fbfdfc; box-shadow:0 25px 60px -30px #000b; }
.demo-pass-head { padding:22px 24px 18px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid #dde8e8; color:#7c939a; font-size:10px; }
.demo-pass-brand { color:#0a7c86; font-size:10px; font-weight:750; letter-spacing:.08em; }
.demo-pass-route { display:grid; grid-template-columns:1fr 50px 1fr; align-items:center; padding:25px 24px; gap:13px; }
.demo-pass-route>div:not(.demo-pass-path) { display:flex; flex-direction:column; }
.demo-pass-route>div:last-child { text-align:right; }
.demo-pass-route span { font-size:8px; letter-spacing:.12em; color:#8b9fa6; }
.demo-pass-route strong { font-size:40px; line-height:1.3; letter-spacing:-.06em; color:#193b48; font-weight:650; }
.demo-pass-route small { color:#6f8d97; font-size:10px; line-height:1.4; }
.demo-pass-path { display:flex; align-items:center; justify-content:space-between; color:#0a7c86; gap:6px; }
.demo-pass-path i { width:9px; height:9px; border:2px solid #0a7c86; border-radius:50%; }
.demo-pass-path b { width:8px; height:8px; background:#fcc04e; border-radius:50%; }
.demo-pass-path>span { color:#6b9eaa; font-size:17px; }
.demo-pass-time { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:7px; padding:15px 24px; background:#edf5f4; color:#6c898e; font-size:10px; }
.demo-pass-time strong { color:#145f67; font-size:20px; line-height:1.3; letter-spacing:-.03em; font-weight:650; }
.demo-pass-night { display:block; width:100%; color:#987433; font-size:9px; }
.demo-pass-fields { display:grid; gap:14px; margin:0; padding:20px 24px 23px; }
.demo-pass-fields>div { display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.demo-pass-fields dt { font-size:9px; color:#8b9fa6; }
.demo-pass-fields dd { font-size:11px; line-height:1.5; font-weight:600; color:#37545e; margin:0; text-align:right; }
.demo-perforation { position:relative; border-top:1px dashed #c9dada; margin:0 14px; }
.demo-perforation:before,.demo-perforation:after { content:''; position:absolute; top:-7px; width:14px; height:14px; border-radius:50%; background:#122e40; }
.demo-perforation:before { left:-21px; }.demo-perforation:after { right:-21px; }
.demo-pass-foot { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:17px 24px; color:#91a5aa; font-size:8px; }
.demo-pass-ready { display:flex; align-items:center; gap:6px; color:#247667; font-size:9px; font-weight:600; }
.demo-pass-ready i { width:5px; height:5px; background:#1c9677; border-radius:50%; }
.demo-portal-title { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:650; color:#224451; }
.demo-portal-title i { width:9px; height:9px; border:2px solid #0a7c86; border-radius:50%; }
.demo-corporate-body { padding:27px; }
.demo-corporate-body>.demo-kicker { font-size:9px; color:#78929a; }
.demo-corporate-body>h3 { margin:7px 0 24px; font-size:29px; font-weight:600; letter-spacing:-.04em; line-height:1.2; color:#183541; }
.demo-booking-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:0; list-style:none; margin:0; }
.demo-booking-fields>li { display:flex; align-items:center; gap:10px; min-width:0; border:1px solid #d8e5e8; background:#fff; border-radius:10px; padding:15px 12px; margin:0; }
.demo-field-number { flex:none; display:grid; place-items:center; width:22px; height:22px; border-radius:6px; background:#e8f3f3; color:#2b8b8d; font-size:9px; font-weight:700; }
.demo-booking-fields>li>div { min-width:0; }
.demo-booking-fields>li>div>span { display:block; font-size:9px; color:#849ca6; line-height:1.4; margin-bottom:4px; }
.demo-booking-fields>li strong { display:block; color:#33545f; font-size:11px; line-height:1.5; font-weight:650; }
.demo-booking-fields small { font-size:8px; font-weight:400; color:#8ba1aa; white-space:nowrap; }
.demo-booking-fields>li>b { font-size:13px; color:#8babb4; margin-left:auto; font-weight:400; }
.demo-request-status { display:flex; align-items:center; gap:12px; margin-top:21px; padding:17px; border-radius:10px; background:#e5f3ef; border:1px solid #c4e2d7; }
.demo-request-check { display:grid; place-items:center; width:29px; height:29px; border-radius:50%; background:#cae8db; color:#268564; font-size:14px; flex:none; }
.demo-request-status strong { display:block; color:#226951; font-size:12px; line-height:1.5; font-weight:650; }
.demo-request-status div>span { display:block; color:#7b9b91; font-size:10px; line-height:1.6; margin-top:2px; }
.demo-portal-roles { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; padding:17px 22px; background:#edf3f5; border-top:1px solid #e1e9ed; }
.demo-portal-roles span { font-size:9px; color:#6f8a97; line-height:1.5; border:1px solid #cfdfe5; border-radius:5px; padding:5px 9px; background:#f7fafb; }
@media (max-width:1100px) and (min-width:901px) { .demo-day-grid { grid-template-columns:minmax(0,1fr); }.demo-net { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:9px; padding:14px; }.demo-net>strong { margin:0; font-size:24px; }.demo-net-note { display:none; }.demo-booking-fields { grid-template-columns:minmax(0,1fr); } }
@media (max-width:560px) {
 .demo-dashboard,.demo-corporate-panel,.demo-partner-panel,.demo-pass-scene { border-radius:18px; }
 .demo-window-head { padding:16px; gap:8px; }.demo-window-logo { width:115px; }.demo-preview { font-size:8px; padding:4px 6px; }
 .demo-dashboard-body,.demo-corporate-body { padding:18px; }.demo-day-heading { margin-bottom:18px; }
 .demo-day-heading .demo-day-title { font-size:24px; }.demo-status-grid { gap:6px; }.demo-status { padding:10px 7px; }.demo-status>span { font-size:8px; }.demo-status>strong { font-size:20px; }
 .demo-day-grid { grid-template-columns:minmax(0,1fr); gap:10px; }.demo-trip { padding:16px; }.demo-trip-route strong { font-size:22px; }.demo-trip-route { margin-block:18px; }
 .demo-net { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:8px; padding:15px; }.demo-net>strong { margin:0; font-size:27px; }.demo-net-note { display:none; }
 .demo-fleet-labels { font-size:9px; gap:8px; }.demo-fleet-labels>span { gap:4px; }.demo-dashboard-foot { padding:15px 18px; }.demo-dashboard-foot>span { font-size:8px; }
 .demo-partner-panel { padding:23px 20px; }.demo-panel-heading { flex-wrap:wrap; gap:10px; margin-bottom:27px; }.demo-panel-heading h3 { font-size:22px; }
 .demo-partner-legend { gap:17px; }.demo-partner-legend>div>span { font-size:10px; }.demo-partner-legend strong { font-size:26px; }.demo-equation { padding:15px 10px; font-size:10px; }
 .demo-partner-record>div { grid-template-columns:6px minmax(0,1fr); gap:5px 8px; }.demo-partner-record>div>span:last-child { grid-column:2; text-align:left; font-size:10px; }
 .demo-pass-scene { padding:22px 16px 28px; }.demo-pass-caption { margin-bottom:27px; }.demo-pass { width:93%; }.demo-pass-route { grid-template-columns:1fr 40px 1fr; padding:24px 20px; gap:8px; }.demo-pass-route strong { font-size:34px; }
 .demo-pass-head,.demo-pass-time,.demo-pass-fields,.demo-pass-foot { padding-inline:20px; }.demo-pass-caption .demo-kicker { font-size:7px; max-width:125px; }.demo-pass-fields dd { font-size:10px; }
 .demo-booking-fields { grid-template-columns:minmax(0,1fr); gap:9px; }.demo-booking-fields>li { padding:13px; }.demo-booking-fields>li strong { font-size:12px; }.demo-booking-fields>li>div>span { font-size:10px; }.demo-field-number { width:25px; height:25px; font-size:10px; }
 .demo-corporate-body>h3 { margin-bottom:20px; font-size:27px; }.demo-portal-title { font-size:12px; }.demo-request-status { padding:15px; }.demo-portal-roles { padding:16px; gap:7px; }
}
@media (max-width:360px) { .demo-dashboard-body { padding:15px; }.demo-status>span { font-size:7.5px; }.demo-status { padding-inline:5px; }.demo-preview { font-size:7px; }.demo-window-logo { width:105px; }.demo-net>strong { font-size:24px; }.demo-fleet-labels { font-size:8px; }.demo-pass-caption { gap:6px; }.demo-pass-route strong { font-size:30px; }.demo-pass-head { font-size:9px; }.demo-pass-brand { font-size:9px; } }
/* Readable labels at every viewport; the graphics remain supporting illustrations. */
.demo-preview { font-size:9px; }
.demo-small-label,.demo-badge,.demo-kicker,.demo-pass-caption .demo-kicker { font-size:9px; }
.demo-status>span { font-size:10px; white-space:normal; min-height:28px; line-height:1.4; }
.demo-trip-route span,.demo-trip-bottom,.demo-net-note,.demo-currency { font-size:10px; }
.demo-fleet-labels,.demo-alert,.demo-dashboard-foot,.demo-partner-record>div,.demo-partner-record>div>span:last-child { font-size:11px; }
.demo-dashboard-foot>span,.demo-pass-route>div>span,.demo-pass-route small,.demo-pass-head,.demo-pass-brand,.demo-pass-time,.demo-pass-night,.demo-pass-fields dt,.demo-pass-foot,.demo-pass-ready { font-size:10px; }
.demo-pass-fields dd,.demo-booking-fields>li strong { font-size:12px; }
.demo-booking-fields small,.demo-booking-fields>li>div>span,.demo-portal-roles span,.demo-request-status div>span { font-size:10px; }
@media(max-width:560px) {
 .demo-status-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .demo-status { display:flex; align-items:center; justify-content:space-between; gap:7px; padding:10px; }
 .demo-status>span { min-height:0; font-size:10px; }
 .demo-status>strong { margin:0; }
 .demo-fleet-labels { font-size:10px; }
 .demo-fleet-labels>span { flex-wrap:wrap; }
 .demo-partner-legend>div { flex-wrap:wrap; }
 .demo-pass-caption { align-items:flex-start; }
 .demo-pass-caption .demo-kicker { max-width:115px; }
 .demo-pass-head { flex-wrap:wrap; }
}
/* Keep supporting UI labels readable on the light preview surfaces. */
.demo-day-heading .demo-kicker,.demo-trip-count,.demo-status:not(.demo-status-attention)>span,
.demo-trip .demo-small-label,.demo-trip-route span,.demo-trip-bottom,.demo-fleet-labels,.demo-dashboard-foot,
.demo-pass-head,.demo-pass-route>div>span,.demo-pass-route small,.demo-pass-time,.demo-pass-fields dt,.demo-pass-foot,
.demo-corporate-body>.demo-kicker,.demo-booking-fields>li>div>span,.demo-booking-fields small,.demo-portal-roles span { color:#536f7b; }
.demo-dashboard .demo-preview,.demo-corporate-panel .demo-preview { color:#526775; }
.demo-request-status div>span { color:#486e61; }
.demo-night,.demo-pass-night { color:#7a5b20; }
.demo-field-number { color:#196973; }
.demo-panel-heading { flex-wrap:wrap; }
.demo-pass-caption { flex-wrap:wrap; }