/* Shared presentation for the four segment pages. */
.segment-page { --segment-teal:#137b6b; }
.segment-page .solution-hero { padding-top:64px; }
.segment-page .solution-hero__grid { grid-template-columns:1fr 1.08fr; gap:42px; }
.segment-page .solution-hero h1 { font-size:clamp(2.35rem,3.5vw,3.3rem); }
.segment-tags { list-style:none; padding:0; margin:30px 0 0; display:flex; flex-wrap:wrap; gap:10px 20px; color:#536c80; font-size:.78rem; }
.segment-tags i { color:var(--segment-teal); }
.segment-board { border:1px solid #d8e4ef; border-radius:16px; background:white; box-shadow:0 25px 70px #173c6414; overflow:hidden; }
.segment-board-bar { display:flex; align-items:center; gap:8px; padding:17px 20px; border-bottom:1px solid #e4edf4; font-size:.59rem; letter-spacing:.08em; font-weight:750; color:#496880; }
.segment-brand-dot { width:8px; height:8px; border-radius:50%; background:#2381c4; flex-shrink:0; }
.segment-example-label { margin-left:auto; color:#7b8c9d; font-size:.55rem; }
.segment-map-scene { position:relative; }
.segment-map-scene .routing-map { display:block; width:100%; height:auto; }
.segment-map-scene .routing-map-source { display:flex; flex-wrap:wrap; gap:4px 12px; justify-content:space-between; background:#f9fbfd; padding:8px 12px; font-size:.55rem; color:#557188; }
.segment-page .routing-map-source a { color:#557188!important; text-decoration:underline!important; }
.segment-map-badge { position:absolute; left:18px; bottom:48px; display:flex; align-items:center; gap:12px; padding:12px 16px; border:1px solid #d9e6f1; background:#ffffffed; border-radius:10px; box-shadow:0 4px 20px #173c6412; }
.segment-map-badge>i { color:#1874ba; font-size:1.5rem; }
.segment-map-badge strong,.segment-map-badge span { display:block; font-size:.78rem; }
.segment-map-badge span { color:#6e8193; font-size:.66rem; margin-top:4px; }
.segment-map-footer { display:flex; align-items:center; gap:12px; padding:18px 20px; border-top:1px solid #e5edf3; }
.segment-mini-avatar { width:36px; height:36px; background:#e9f2fa; border-radius:50%; display:grid; place-items:center; color:#2675b3; }
.segment-map-footer strong,.segment-map-footer small { display:block; font-size:.74rem; }
.segment-map-footer small { color:#6b7f90; margin-top:5px; font-size:.62rem; }
.segment-status-pill { background:#e3f4ec; color:#197352; border:1px solid #cee8da; border-radius:20px; padding:6px 9px; font-size:.65rem; display:inline-flex; gap:5px; align-items:center; }
.segment-map-footer>.segment-status-pill { margin-left:auto; }
.segment-network-scene { background:linear-gradient(#fbfdff,#f2f7fc); padding:26px 0 0; }
.segment-network-heading { padding:0 26px; }
.segment-network-heading>span { color:#62849d; font-size:.59rem; letter-spacing:.08em; }
.segment-page .segment-network-heading h2 { font-size:1.45rem; margin:12px 0 28px; letter-spacing:-.025em; }
.segment-network-svg,.segment-store-svg { display:block; width:100%; height:auto; }
.segment-network-summary { display:flex; justify-content:space-around; padding:22px 15px; margin-top:24px; background:white; border-top:1px solid #e0e9f2; font-size:.76rem; color:#43637b; }
.segment-network-summary span { display:flex; align-items:center; gap:7px; }
.segment-network-summary i { color:#207ab9; font-size:1.15rem; }
.segment-day-scene { padding:28px; }
.segment-day-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.segment-day-heading small { color:#688299; letter-spacing:.1em; font-size:.62rem; }
.segment-page .segment-day-heading h2 { font-size:1.6rem; margin:7px 0 0; }
.segment-day-heading>span { color:#9a6818; background:#fff5d8; border-radius:20px; padding:7px 12px; font-size:.72rem; }
.segment-day-stats { display:grid; grid-template-columns:1fr 1fr 1.4fr; border:1px solid #e1eaf2; background:#f8fbfe; border-radius:10px; margin:26px 0; padding:16px 0; }
.segment-day-stats>div { padding:0 16px; }
.segment-day-stats>div+div { border-left:1px solid #dce7f1; }
.segment-day-stats strong,.segment-day-stats span { display:block; }
.segment-day-stats strong { font-size:1.28rem; letter-spacing:-.04em; }
.segment-day-stats span { color:#6a8195; font-size:.66rem; margin-top:6px; }
.segment-day-timeline { list-style:none; margin:0; padding:0; }
.segment-day-timeline li { display:flex; gap:13px; align-items:center; padding:17px 0; position:relative; }
.segment-day-timeline li+li { border-top:1px solid #e9eff5; }
.segment-day-timeline time { color:#647b90; font-size:.72rem; width:36px; flex-shrink:0; }
.segment-day-timeline li>span { width:35px; height:35px; background:#e6f4ee; border-radius:10px; display:grid; place-items:center; color:#1d8260; flex-shrink:0; }
.segment-day-timeline li>i { margin-left:auto; color:#23996d; }
.segment-day-timeline strong,.segment-day-timeline small { display:block; }
.segment-day-timeline strong { font-size:.79rem; }
.segment-day-timeline small { color:#6e8295; font-size:.65rem; margin-top:5px; }
.segment-day-timeline .is-current>span { background:#e6f1fc; color:#1a78bd; }
.segment-day-progress { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; margin-top:19px; padding:18px; background:#f4f8fc; border-radius:10px; font-size:.66rem; color:#58748b; }
.segment-day-progress>div { width:100%; height:6px; background:#dfe8f2; border-radius:3px; overflow:hidden; }
.segment-day-progress>div span { display:block; width:75%; height:100%; background:#1e7fc1; }
.segment-pudo-scene { padding:28px 0 0; background:linear-gradient(#f7fbfe,#edf5fb); }
.segment-pudo-heading { display:flex; align-items:center; justify-content:center; gap:16px; color:#5b7a91; font-size:.63rem; letter-spacing:.08em; padding-bottom:20px; }
.segment-pudo-heading i { color:#177abb; font-size:1.1rem; }
.segment-pudo-receipt { display:flex; gap:13px; align-items:center; margin:0 24px 24px; padding:16px; background:#fff; border:1px solid #d8e6f0; border-radius:10px; }
.segment-pudo-receipt>span { background:#e5f2fc; padding:9px 12px; border-radius:9px; color:#1e78b5; }
.segment-pudo-receipt strong,.segment-pudo-receipt small { display:block; font-size:.8rem; }
.segment-pudo-receipt small { color:#6e8295; font-size:.65rem; margin-top:4px; }
.segment-pudo-receipt>i { color:#268468; margin-left:auto; }
.segment-pudo-return { padding:16px 20px; border-top:1px solid #dce9f2; background:white; color:#55758c; font-size:.67rem; text-align:center; }
.segment-pudo-return i { margin-right:6px; color:#168675; }
.segment-demo { background:white; border:1px solid #dce6ef; border-radius:16px; overflow:hidden; box-shadow:0 12px 35px #143b6210; }
.segment-demo-controls { display:grid; grid-template-columns:repeat(3,1fr); background:#f0f5fa; border-bottom:1px solid #dce6ef; }
.segment-demo-controls[hidden],.segment-demo-panel[hidden] { display:none; }
.segment-demo-controls button { display:flex; align-items:center; gap:12px; padding:23px; font-size:.86rem; font-weight:650; color:#5c748a; background:transparent; border:0; border-bottom:3px solid transparent; text-align:left; }
.segment-demo-controls button+button { border-left:1px solid #dce6ef; }
.segment-demo-controls button>i { margin-left:auto; }
.segment-demo-controls button:hover { background:#e8f1f9; }
.segment-demo-controls button[aria-pressed="true"] { background:white; border-bottom-color:#1677ba; color:#146da7; }
.segment-demo-controls button:focus-visible { outline:3px solid #1b6caa; outline-offset:-5px; }
.segment-step-index { width:30px; height:30px; display:grid; place-items:center; background:#e4edf6; border-radius:50%; font-size:.7rem; flex-shrink:0; }
.segment-demo-controls button[aria-pressed="true"] .segment-step-index { background:#1a78b9; color:white; }
.segment-demo-panel { display:grid; grid-template-columns:1fr 1fr; gap:60px; padding:48px; align-items:center; }
.segment-demo-panel+ .segment-demo-panel { border-top:1px solid #dce6ef; }
.segment-step-kicker { font-size:.67rem; letter-spacing:.08em; font-weight:750; color:#1c78b6; display:block; margin-bottom:18px; }
.segment-page .segment-demo-copy h3 { font-size:1.65rem; line-height:1.3; letter-spacing:-.025em; margin-bottom:20px; }
.segment-page .segment-demo-copy>p { font-size:.94rem; }
.segment-takeaway { display:flex; gap:12px; padding-top:20px; margin:24px 0; border-top:1px solid #e4edf4; color:#476a7c; font-size:.87rem; line-height:1.7; }
.segment-takeaway>i { color:#168170; font-size:1.2rem; }
.segment-record { border:1px solid #d9e5ef; border-radius:12px; background:#f9fbfe; box-shadow:0 10px 28px #254b6a0c; overflow:hidden; }
.segment-record-top { display:flex; gap:12px; align-items:center; background:white; padding:22px; border-bottom:1px solid #e2ebf2; }
.segment-record-top>span { width:42px; height:42px; display:grid; place-items:center; background:#e8f2fc; border-radius:12px; color:#1779bd; font-size:1.3rem; flex-shrink:0; }
.segment-record-top small,.segment-record-top strong { display:block; }
.segment-record-top small { color:#7790a3; font-size:.57rem; letter-spacing:.08em; margin-bottom:5px; }
.segment-record-top strong { font-size:.83rem; }
.segment-record-top time { margin-left:auto; font-size:.74rem; color:#71899c; }
.segment-record-status { padding:26px 24px 20px; }
.segment-record-status>span { display:inline-flex; border-radius:20px; padding:6px 10px; background:#e0f1eb; color:#167657; font-size:.66rem; font-weight:650; }
.segment-record-status h4 { font-size:1.07rem; line-height:1.4; margin:15px 0 0; font-weight:700; }
.segment-record dl { margin:0 24px; }
.segment-record dl>div { display:flex; gap:12px; justify-content:space-between; padding:13px 0; border-top:1px solid #e1eaf2; font-size:.75rem; }
.segment-record dt { font-weight:400; color:#668096; }
.segment-record dd { margin:0; text-align:right; max-width:60%; font-weight:600; }
.segment-record-progress { display:flex; gap:6px; margin:24px; }
.segment-record-progress span { flex:1; height:4px; background:#dfe9f1; border-radius:2px; }
.segment-record-progress .is-complete { background:#2180bd; }
.segment-phone-scene { position:relative; background:#f4f8fc; border:1px solid #e0eaf3; border-radius:24px; padding:32px 20px 22px; text-align:center; margin:0; overflow:hidden; }
.segment-phone-scene img { width:100%; max-width:300px; height:auto; max-height:510px; object-fit:contain; position:relative; }
.segment-phone-halo { position:absolute; width:360px; height:360px; border-radius:50%; background:#e3effb; left:50%; top:50%; transform:translate(-50%,-50%); }
.segment-phone-scene figcaption { position:relative; }
.segment-visual-kicker { display:block; color:#5c809a; font-size:.65rem; font-weight:750; letter-spacing:.1em; margin-bottom:26px; }
.segment-handoff,.segment-dispatch,.segment-responsibilities { padding:32px; background:#f4f8fc; border:1px solid #dde7f0; border-radius:16px; }
.segment-handoff-row { display:flex; align-items:center; gap:20px; background:white; border:1px solid #dae7f0; border-radius:12px; padding:22px; }
.segment-handoff-row>span { width:54px; height:54px; border-radius:14px; display:grid; place-items:center; font-size:1.6rem; color:#1577b7; background:#e9f3fc; flex-shrink:0; }
.segment-handoff-row small { font-size:.62rem; letter-spacing:.07em; color:#56819d; }
.segment-page .segment-handoff-row h3 { margin:6px 0; font-size:1.1rem; }
.segment-page .segment-handoff-row p { font-size:.78rem; margin:0; }
.segment-handoff-connector { display:flex; align-items:center; gap:12px; padding:12px 26px; font-size:.65rem; color:#6a8296; }
.segment-handoff-connector i { color:#79a0bd; }
.segment-handoff-row.is-next { background:#edf6f3; border-color:#cfe6de; }
.segment-handoff-row.is-next>span { background:#dbefe8; color:#25836b; }
.segment-handoff>.solution-text-link { margin-top:25px; }
.segment-dispatch>h3 { font-size:1.35rem; }
.segment-dispatch ul { list-style:none; padding:0; margin:26px 0; }
.segment-dispatch li { display:flex; gap:15px; padding:22px 0; border-top:1px solid #dce7f0; }
.segment-dispatch li>span { color:#297bb4; font-weight:700; font-size:.85rem; }
.segment-dispatch strong { font-size:.95rem; }
.segment-page .segment-dispatch li p { margin:6px 0 0; font-size:.83rem; }
.segment-dispatch-footer { padding:17px; border:1px solid #cbe2d8; border-radius:10px; background:#e6f4ee; color:#1e7456; font-size:.78rem; display:flex; gap:10px; }
.segment-responsibilities article { padding:24px; border:1px solid #d7e4ee; background:white; border-radius:12px; }
.segment-responsibilities article>div { display:flex; align-items:center; gap:10px; color:#217bb8; font-size:.61rem; letter-spacing:.04em; font-weight:700; margin-bottom:16px; }
.segment-responsibilities article>div>i { font-size:1.35rem; }
.segment-page .segment-responsibilities article p { font-size:.86rem; }
.segment-responsibility-divider { padding:20px 10px; color:#6d8496; font-size:.71rem; text-align:center; }
.segment-responsibility-divider i { margin-right:8px; }
.segment-related { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.segment-page main .segment-related>a { display:block; padding:30px; background:white; border:1px solid #dce7f0; border-radius:12px; color:#1b3b55!important; transition:border-color .2s,transform .2s; }
.segment-related>a:hover { border-color:#8ab6d5; transform:translateY(-3px); }
.segment-related>a>i { display:block; font-size:1.6rem; color:#1b7cbe; margin-bottom:24px; }
.segment-page .segment-related p { font-size:.9rem; }
.segment-related>a>span { color:#1d76b2; font-size:.8rem; font-weight:650; display:flex; justify-content:space-between; gap:12px; margin-top:25px; }
@media(min-width:1400px) { .segment-page .solution-hero__visual { transform:none; } }
@media(max-width:1199px) { .segment-page .solution-hero__grid { gap:28px; }.segment-demo-panel { gap:32px; padding:34px; }.segment-demo-controls button { padding:20px 14px; gap:9px; font-size:.8rem; }.segment-day-scene { padding:22px; }.segment-board-bar { padding:15px; font-size:.52rem; } }
@media(max-width:991px) { .segment-page .solution-hero__grid { grid-template-columns:1fr; gap:36px; }.segment-hero-visual { width:100%; max-width:640px; margin:auto!important; }.segment-page .solution-hero h1 { font-size:3.1rem; }.segment-demo-controls button>i { display:none; }.segment-demo-panel { gap:26px; padding:28px; }.segment-page .segment-demo-copy h3 { font-size:1.4rem; }.segment-handoff,.segment-dispatch,.segment-responsibilities { padding:22px; }.segment-handoff-row { padding:17px; gap:12px; }.segment-related>a { padding:22px; }.segment-record-top { padding:17px; }.segment-record-top time { font-size:.65rem; } }
@media(max-width:767px) { .segment-page .solution-hero { padding-top:40px; }.segment-page .solution-hero h1 { font-size:2.55rem; }.segment-demo-controls { grid-template-columns:1fr; }.segment-demo-controls button { padding:13px 18px; border-bottom-width:0; border-left:3px solid transparent; gap:13px; }.segment-demo-controls button+button { border-left:3px solid transparent; border-top:1px solid #dce6ef; }.segment-demo-controls button[aria-pressed="true"] { border-left-color:#1677ba; }.segment-demo-controls button>i { display:block; }.segment-demo-panel { grid-template-columns:1fr; gap:28px; padding:25px 20px; }.segment-page .segment-demo-copy h3 { font-size:1.5rem; }.segment-related { grid-template-columns:1fr; }.segment-related>a>i { margin-bottom:15px; }.segment-related>a>span { margin-top:18px; }.segment-handoff,.segment-dispatch,.segment-responsibilities { padding:24px; }.segment-phone-scene img { max-height:460px; }.segment-page .solution-split { gap:38px; } }
@media(max-width:420px) { .segment-page .solution-hero h1 { font-size:2.35rem; }.segment-board-bar { font-size:.48rem; padding:14px 12px; letter-spacing:.03em; }.segment-example-label { font-size:.46rem; }.segment-day-scene { padding:18px; }.segment-page .segment-day-heading h2 { font-size:1.35rem; }.segment-day-stats>div { padding:0 10px; }.segment-day-stats strong { font-size:1.1rem; }.segment-day-stats span { font-size:.57rem; }.segment-day-timeline li { gap:8px; }.segment-day-timeline strong { font-size:.69rem; }.segment-day-timeline small { font-size:.57rem; }.segment-network-heading { padding:0 20px; }.segment-page .segment-network-heading h2 { font-size:1.25rem; }.segment-network-heading>span { font-size:.5rem; }.segment-network-summary { font-size:.64rem; }.segment-network-summary span { gap:5px; }.segment-pudo-receipt { margin:0 14px 18px; padding:12px; gap:9px; }.segment-pudo-receipt strong { font-size:.71rem; }.segment-pudo-receipt small { font-size:.57rem; }.segment-pudo-heading { font-size:.54rem; gap:10px; }.segment-pudo-return { font-size:.61rem; }.segment-map-badge { padding:9px 12px; left:12px; bottom:38px; }.segment-map-badge strong { font-size:.65rem; }.segment-map-badge span { font-size:.57rem; }.segment-map-footer { padding:14px 12px; gap:8px; }.segment-map-footer small { font-size:.53rem; }.segment-map-footer strong { font-size:.66rem; }.segment-status-pill { font-size:.57rem; }.segment-map-scene .routing-map-source { font-size:.47rem; }.segment-record-top { padding:15px; gap:9px; }.segment-record-top strong { font-size:.75rem; }.segment-record-status { padding:22px 18px 18px; }.segment-record dl { margin:0 18px; }.segment-record dl>div { font-size:.69rem; }.segment-record-status h4 { font-size:1rem; }.segment-handoff,.segment-dispatch,.segment-responsibilities { padding:20px; }.segment-responsibilities article { padding:20px; } }
@media(prefers-reduced-motion:reduce) { .segment-related>a { transition:none; }.segment-related>a:hover { transform:none; } }
