@media(min-width:781px) and (max-width:1440px){.hero{min-height:255px}.hero-copy{min-height:255px}.hero-destination{position:relative;right:auto;bottom:auto;margin-top:10px;justify-content:flex-start}.hero-handwriting{font-size:15px}}
@media(max-width:780px){.hero-destination input,.hero-destination select{width:100%;min-width:0}.destination-field,.station-field,.arrival-field,.return-field{grid-column:auto}.return-field{grid-column:auto}}
.hero-destination label{background:rgba(255,255,255,.8);padding:4px;border-radius:7px}.hero-destination input,.hero-destination select{background:#fff}
.ride-icon.brand-uber{font-family:Arial,sans-serif;font-size:12px;font-weight:800;letter-spacing:-.5px;color:#111;background:#f1f4f7}.ride-icon.brand-lyft{font-family:Arial,sans-serif;font-size:14px;font-weight:900;letter-spacing:-1px;color:#e62470;background:#fff0f6}.line-chip.line-RED{background:#fce5e7;color:#c91e2c}.line-chip.line-YELLOW{background:#fff5c7;color:#8a6900}.line-chip.line-GREEN{background:#e2f5e8;color:#177d40}.line-chip.line-BLUE{background:#e1f4fc;color:#007bb2}.line-chip.line-ORANGE{background:#fff0df;color:#b75000}
.duration-control select{min-width:105px}
.service-brand-strip{display:flex;align-items:center;gap:6px;overflow-x:auto;padding:0 0 7px;margin-top:-1px;scrollbar-width:thin}
.service-brand-strip>span{display:flex;align-items:center;gap:5px;flex:0 0 auto;min-height:28px;padding:4px 8px;border:1px solid #e2eaf2;border-radius:7px;background:#fff;color:#122e5b}
.service-brand-strip b{font-size:11px;line-height:1;letter-spacing:-.02em}
.service-brand-strip small{font-size:8px;color:#657b98}
.service-brand-strip .brand-bwoops b{font-size:10px;font-weight:900;letter-spacing:-.04em}
.service-brand-strip .brand-bwoops b span{display:inline-grid;place-items:center;width:12px;height:12px;margin:0 1px;border-radius:50%;background:#0788dc;color:#fff}
.service-brand-strip .brand-bart b{color:#0077b9;letter-spacing:.03em}
.service-brand-strip .brand-bart b:before{content:"";display:inline-block;width:4px;height:12px;margin-right:4px;vertical-align:-2px;border-radius:2px;background:#e52d37;box-shadow:5px 0 #f5bd24,10px 0 #268b48}
.service-brand-strip .brand-uber b{color:#111;font-family:Arial,sans-serif;font-weight:800}
.service-brand-strip .brand-lyft b{color:#e62470;font-weight:900}
.line-color-key{display:flex;align-items:center;gap:11px;flex-wrap:wrap;padding:7px 2px 0;color:#345477;font-size:9px}
.line-color-key span{display:inline-flex;align-items:center;gap:4px}
.line-color-key i{width:9px;height:9px;border-radius:2px;display:inline-block;border:1px solid #ffffff;box-shadow:0 0 0 1px #aab9c9}
.line-color-key .key-red{background:#e52d37}.line-color-key .key-yellow{background:#f5bd24}.line-color-key .key-green{background:#268b48}.line-color-key .key-blue{background:#168cc5}
.line-color-key small{color:#74869d;font-size:8px}
.line-chip{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.line-chip:before{content:"";width:7px;height:7px;border-radius:2px;background:currentColor;box-shadow:0 1px 0 currentColor;display:inline-block}
.surface-lot-icon{display:inline-grid;place-items:center;width:13px;height:13px;border-radius:3px;background:#168bd2;color:#fff;font-size:9px;font-weight:800;line-height:1;vertical-align:-1px}
.parking-thumb{background:linear-gradient(145deg,#eaf6fc,#d2e8d7);color:#607987}
.parking-thumb svg{display:block;width:55px;height:43px}
@media(max-width:780px){.duration-control select{font-size:11px}.time-note{grid-column:1/-1;width:max-content}.service-brand-strip{gap:4px}.service-brand-strip>span{padding:4px 6px}.service-brand-strip small{font-size:7px}.line-color-key{gap:8px}.line-color-key small{flex-basis:100%}.train-table th:first-child,.train-table td:first-child{display:none}.train-table th:nth-child(3),.train-table td:nth-child(3),.train-table th:nth-child(5),.train-table td:nth-child(5){display:table-cell}.train-table th,.train-table td{padding:7px 3px}.line-chip{font-size:8px!important;padding:3px 4px!important}}
.hero{display:flex;flex-direction:column;min-height:0;overflow:hidden;background:#fff}
.hero-image{position:relative;inset:auto;display:flex;align-items:flex-end;width:100%;height:auto;min-height:0;aspect-ratio:3/1;flex:none;background-image:linear-gradient(90deg,#071f4e20,#071f4e00 55%),url('/assets/bwoops-sf-skyline-original.png');background-position:center center;background-size:100% 100%;background-repeat:no-repeat;mask-image:none;opacity:1}
.hero-image-label{display:inline-flex;flex-direction:column;gap:3px;margin:0 0 14px 32px;padding:8px 12px;border:1px solid #ffffffa8;border-radius:8px;background:#08244dbd;color:#fff;font-size:11px;letter-spacing:.1em;font-weight:800;box-shadow:0 3px 12px #06214b30}
.hero-image-label small{font-size:10px;letter-spacing:0;font-weight:500;color:#e8f4ff}
.hero-copy{width:100%;max-width:1620px;min-height:0;margin:0 auto;padding:17px 32px 20px;background:linear-gradient(180deg,#fff,#f8fbfe)}
.hero h1{max-width:70%;margin-bottom:3px}.hero-subtitle{margin-bottom:10px}.hero-controls{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:9px}.hero-destination{position:relative;right:auto;bottom:auto;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:end;gap:8px;margin-top:10px}.hero-handwriting{top:18px;right:4%;}
@media(max-width:780px){.hero-image{height:clamp(168px,50vw,220px);aspect-ratio:auto;background-size:auto 100%;background-position:52% center}.hero-image-label{margin:0 0 10px 16px;padding:7px 9px;font-size:9px}.hero-image-label small{font-size:9px}.hero-copy{padding:16px 17px 17px}.hero h1{max-width:100%;font-size:36px}.hero-subtitle{font-size:20px;margin-bottom:10px}.hero-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:430px}.hero-destination{position:static;display:grid;grid-template-columns:1.15fr .85fr;gap:7px;margin-top:9px;max-width:460px}.hero-destination label{font-size:9px}.destination-field,.station-field,.arrival-field,.return-field{grid-column:auto}.return-field{grid-column:1/-1}.hero-handwriting{display:none}}
@media(max-width:390px){.hero-image{height:clamp(164px,48vw,188px)}.hero-copy{padding:14px 14px 15px}.hero h1{font-size:33px}.hero-image-label{margin-left:14px}}