:root { --paper:#faf8f3; --ink:#272724; --muted:#77756f; --border:#dcd7cb; --trail:#859650; }
* { box-sizing:border-box; }
body { margin:0; background:#fff; color:var(--ink); font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,a { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible { outline:2px solid #a34f3a; outline-offset:3px; }
.preview-header { height:60px; padding:0 40px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--border); background:var(--paper); font-size:12px; }
.preview-header a { color:var(--muted); text-decoration:none; }
.preview-header > span:nth-child(2) { font-size:10px; letter-spacing:.14em; display:flex; align-items:center; gap:12px; }
.preview-header i { height:3px; width:3px; background:#a34f3a; border-radius:50%; }
.preview-status { color:var(--muted); border:1px solid var(--border); padding:4px 8px; border-radius:3px; font-size:10px; }
main.preview-main { height:auto; overflow:visible; max-width:1100px; margin:0 auto; padding:40px 30px 24px; }
.eyebrow { color:#a34f3a; font-size:10px; font-weight:650; letter-spacing:.14em; margin:0 0 10px; }
.intro h1 { font:normal 37px/1.15 Georgia,"Times New Roman",serif; letter-spacing:-.035em; margin:0 0 12px; }
.intro > p:last-child { color:var(--muted); font-size:13px; margin:0; }
.trip-controls { margin:28px 0 28px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.trip-controls > span { color:var(--muted); font-size:11px; }
.trip-tabs { display:flex; gap:4px; padding:4px; border:1px solid var(--border); border-radius:5px; background:var(--paper); }
.trip-tabs button { min-height:34px; border:0; border-radius:3px; background:transparent; padding:7px 12px; font-size:11px; color:var(--muted); }
.trip-tabs button[aria-pressed=true] { background:var(--ink); color:var(--paper); }
.comparison { display:grid; grid-template-columns:430px minmax(0,1fr); gap:44px; align-items:start; }
.concept-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.concept-heading h2 { display:flex; align-items:center; gap:9px; margin:0; font-size:12px; font-weight:600; }
.concept-heading h2 span { font-size:10px; display:grid; place-items:center; width:22px; height:22px; border:1px solid var(--border); border-radius:50%; color:var(--muted); }
.concept-heading small { color:var(--muted); font-size:10px; }
.card-stage { background:#f2f1ec; border:1px solid #e8e5dd; border-radius:5px; padding:30px 20px 22px; display:flex; flex-direction:column; align-items:center; }
.popup-shell { width:300px; max-width:100%; background:var(--paper); border-radius:3px; box-shadow:0 8px 26px #23232014,0 0 0 1px #0000001a; position:relative; font-size:12px; line-height:1.45; }
.popup-shell .route-card { animation:none; }
.popup-tail { height:12px; width:12px; background:var(--paper); transform:translateY(-6px) rotate(45deg); border-right:1px solid #dedbd2; border-bottom:1px solid #dedbd2; }
.stage-caption { margin-top:15px; color:#8b8980; font-size:10px; display:flex; align-items:center; gap:7px; }
.map-dot { width:6px; height:6px; border-radius:50%; background:#a8ad9b; }
.progress-top { margin:18px 14px 0; display:flex; justify-content:space-between; color:var(--muted); font-size:9px; letter-spacing:.06em; text-transform:uppercase; }
.progress-top b { font-weight:600; color:#67753e; }
.day-trail { margin:6px 14px 0; padding:0; list-style:none; display:flex; }
.day-trail li { position:relative; flex:1; min-width:0; }
.day-trail li:before { content:""; position:absolute; top:21px; left:0; right:0; height:3px; background:#dcded2; }
.day-trail li:first-child:before { left:50%; }
.day-trail li:last-child:before { right:50%; }
.day-trail li.past:before { background:var(--trail); }
.day-trail li.current:before { background:linear-gradient(to right,var(--trail) 50%,#dcded2 50%); }
.day-trail li.current:last-child:before { background:var(--trail); }
.day-trail button { position:relative; display:grid; place-items:center; width:100%; height:44px; padding:0; border:0; background:transparent; }
.day-trail button span { display:grid; place-items:center; width:21px; height:21px; border:2px solid #c9ccbd; border-radius:50%; color:#8a8d7f; background:var(--paper); font-size:10px; font-weight:600; }
.day-trail .past button span { border-color:var(--trail); background:var(--trail); color:#fff; }
.day-trail .current button span { border-color:var(--trail); background:var(--paper); color:#566631; box-shadow:0 0 0 3px var(--paper),0 0 0 4px #b5bfa0; }
.day-trail button:hover span { transform:scale(1.12); }
.route-card p.stop-reveal { margin:3px 14px 0; color:#5e654c; font-size:11px; text-align:center; }
.stop-reveal b { font-weight:600; }
.stop-reveal span { color:#8d9084; margin:0 5px; }
.popup-shell .card-stats { margin-top:16px; }
.popup-shell .card-nav { padding-top:12px; }
.card-itinerary-button { display:flex; align-items:center; justify-content:space-between; margin:14px 14px 0; padding:10px 0 0; width:calc(100% - 28px); background:transparent; border:0; border-top:1px solid var(--border); font-size:11px; font-weight:600; text-align:left; }
.card-itinerary-button span { color:#a34f3a; }
.design-note { display:flex; gap:12px; margin:23px 5px 0; }
.note-number { color:#9c9a90; font-size:10px; padding-top:2px; }
.design-note h3 { font-size:12px; font-weight:600; margin:0 0 5px; }
.design-note p { font-size:11px; line-height:1.7; color:var(--muted); margin:0; max-width:340px; }
.data-note { font-size:10px; color:#888578; line-height:1.6; margin:22px 5px 0; padding-top:15px; border-top:1px solid #e8e5dd; }
.itinerary-shell { background:var(--paper); border:1px solid var(--border); border-radius:5px; overflow:hidden; }
.itinerary-top { background:var(--ink); color:var(--paper); padding:15px 22px; display:flex; align-items:center; justify-content:space-between; font-size:11px; }
.itinerary-top > span { display:flex; align-items:center; gap:8px; }
.itinerary-top svg { width:15px; height:15px; }
.itinerary-top small { color:#c0bdb4; font-size:10px; }
.itinerary-heading { padding:20px 22px 0; }
.itinerary-heading .eyebrow { font-size:9px; color:var(--muted); margin-bottom:7px; }
.itinerary-heading h3 { font-size:26px; letter-spacing:-.04em; line-height:1.15; margin:0; }
.itinerary-heading > p:last-child { font-size:11px; color:var(--muted); margin:8px 0 0; }
.mode-list { display:flex; align-items:center; flex-wrap:wrap; gap:7px 12px; margin:15px 22px 0; padding:0; list-style:none; }
.mode-tag { display:inline-flex; align-items:center; gap:5px; font-size:10px; color:var(--muted); white-space:nowrap; }
.mode-tag svg { width:13px; height:13px; color:var(--mode); }
.itinerary-progress { margin:17px 22px 0; padding-top:14px; border-top:1px solid var(--border); display:flex; justify-content:space-between; color:var(--muted); font-size:10px; }
.itinerary-progress b { color:#67753e; font-weight:600; }
.timeline { margin:12px 14px 16px; list-style:none; padding:0; }
.timeline > li { position:relative; padding-left:37px; }
.timeline > li:before { content:""; position:absolute; left:17px; top:25px; bottom:-25px; width:2px; background:#dcddd3; }
.timeline > li:last-child:before { display:none; }
.timeline > li.past:before { background:var(--trail); }
.timeline-dot { position:absolute; top:19px; left:9px; width:18px; height:18px; display:grid; place-items:center; border:2px solid #c9ccbd; border-radius:50%; font-size:9px; font-weight:600; background:var(--paper); color:#8a8d7f; z-index:1; }
.past > .timeline-dot { border-color:var(--trail); background:var(--trail); color:white; }
.current > .timeline-dot { border-color:var(--trail); color:#566631; box-shadow:0 0 0 3px var(--paper),0 0 0 4px #b5bfa0; }
.stop-button { display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%; padding:12px 9px; min-height:62px; text-align:left; border:0; border-bottom:1px solid #e7e3d9; background:transparent; }
.stop-button:hover { background:#f1eee5; }
.stop-title { display:block; font-size:12px; font-weight:600; line-height:1.3; }
.stop-title small { margin-right:7px; color:var(--muted); font-size:10px; font-weight:400; }
.stop-modes { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.stop-button > small { color:#888578; font-size:10px; white-space:nowrap; }
.current .stop-button { background:#eef0e5; border-radius:4px 4px 0 0; border:1px solid #d5dbc5; border-bottom:0; }
.current .stop-title { color:#4c5c2b; }
.current .stop-button > small { font-size:9px; font-weight:600; color:#67753e; }
.leg-details { border:1px solid #d5dbc5; border-top:0; border-radius:0 0 4px 4px; background:#eef0e5; padding:1px 10px 12px; }
.leg-route { display:flex; align-items:flex-start; gap:7px; font-size:11px; line-height:1.5; color:#626951; margin:3px 0 9px; }
.leg-route svg { width:13px; height:13px; flex-shrink:0; margin-top:2px; color:var(--mode); }
.leg-route + .leg-route { padding-top:6px; border-top:1px solid #dce1d2; }
.leg-stats { display:flex; gap:14px; color:#747b65; font-size:10px; padding-top:7px; border-top:1px solid #d7ddca; }
.leg-stats b { color:#485536; font-weight:600; }
.timeline > li.current { margin-bottom:4px; }
.itinerary-bottom { margin:0 22px; padding:13px 0 16px; border-top:1px solid var(--border); display:flex; justify-content:space-between; gap:12px; font-size:10px; color:var(--muted); }
.itinerary-bottom a { color:#7d4737; text-decoration:none; }
.itinerary-caption { font-size:10px; text-align:center; color:var(--muted); margin:13px 0 0; }
.preview-footer { margin-top:34px; padding-top:17px; border-top:1px solid var(--border); display:flex; justify-content:space-between; gap:12px; color:#918d82; font-size:10px; }
.expanded-concept.opened .itinerary-shell { outline:2px solid #859650; outline-offset:4px; }
@media (max-width:1000px) { .comparison { grid-template-columns:360px minmax(0,1fr); gap:24px; } main.preview-main { padding-left:24px; padding-right:24px; } }
@media (max-width:780px) { .comparison { grid-template-columns:1fr; gap:34px; } .compact-concept,.expanded-concept { width:100%; max-width:500px; margin:0 auto; } .trip-controls { align-items:flex-start; flex-direction:column; gap:12px; } .preview-header { padding:0 20px; } .preview-header > span:nth-child(2) { font-size:8px; gap:7px; } .intro h1 { font-size:30px; } .preview-footer { flex-direction:column; } }
@media (max-width:400px) { main.preview-main { padding:28px 16px 20px; } .trip-tabs button { padding:7px 9px; font-size:10px; } .card-stage { padding-left:15px; padding-right:15px; } .concept-heading small { font-size:9px; } .itinerary-top { padding:14px 16px; } .itinerary-heading { padding-left:16px; padding-right:16px; } .itinerary-heading h3 { font-size:23px; } .mode-list,.itinerary-progress { margin-left:16px; margin-right:16px; } .stop-title { font-size:11px; } .leg-stats { gap:10px; font-size:9px; } }
@media (prefers-reduced-motion:reduce) { *, *:before,*:after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }