/* Generated by scripts/build.mjs. Edit src/styles/. */
/* Source: src/styles/base.css */
:root{
  color-scheme:dark;
  --ink:#f1f5ff;
  --muted:#aab7cc;
  --accent:#8ab7ff;
  --accent-soft:#172e50;
  --line:#2b3649;
  --bg:#000000;
  --white:#11151d
}
*{
  box-sizing:border-box
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:15px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:-.2px
}
button,input,select{
  font:inherit
}
button,a,input,select{
   -webkit-tap-highlight-color:transparent
}
button{
  cursor:pointer
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{
  outline:3px solid #2563eb;
  outline-offset:4px
}
header{
  max-width:1320px;
  margin:auto;
  padding:25px 44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  gap:20px
}
.brand{
  font-size:29px;
  letter-spacing:-1.6px;
  font-weight:750;
  text-decoration:none;
  color:var(--ink);
  display:flex;
  align-items:center;
  gap:6px
}
.brand-icon{
  display:inline-grid;
  place-items:center;
  width:31px;
  height:31px;
  background:#245cc5;
  color:white;
  border-radius:9px;
  font-size:30px;
  margin-right:3px
}
.brand-dot{
  color:#2563eb;
  margin-left:-6px
}
nav{
  display:flex;
  gap:26px
}
.nav{
  border:0;
  background:none;
  color:var(--muted);
  padding:10px 0;
  font-size:13px
}
.nav.active{
  color:var(--accent);
  font-weight:650
}
.demo-pill{
  font-size:11px;
  border:1px solid #34435a;
  border-radius:30px;
  padding:8px 12px;
  white-space:nowrap;
  color:#a4c5fa
}
.demo-pill i{
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#2563eb;
  margin-right:5px
}
main{
  max-width:1232px;
  margin:auto;
  min-height:74vh;
  padding:0 0 56px
}
.hero{
  display:grid;
  grid-template-columns:1.12fr 1fr;
  gap:60px;
  padding:68px 0 40px;
  align-items:center
}
.eyebrow{
  font-size:11px;
  letter-spacing:2px;
  font-weight:650;
  color:var(--accent);
  text-transform:uppercase;
  margin:0 0 21px
}
h1{
  font-size:clamp(42px,5vw,70px);
  line-height:1.04;
  letter-spacing:-3.5px;
  font-weight:550;
  margin:0 0 24px
}
h1 em{
  font-style:normal;
  color:#8ab7ff
}
p{
  line-height:1.7;
  color:var(--muted)
}
.intro{
  font-size:17px;
  max-width:400px
}
.hero-notes{
  display:flex;
  gap:21px;
  color:#b3c0d4;
  font-size:12px;
  margin-top:27px
}
.hero-notes span:before{
  content:'✓';
  margin-right:7px;
  color:#8ab7ff
}
.route-art{
  height:300px;
  background:linear-gradient(150deg,#101827,#182e54);
  border-radius:26px;
  position:relative;
  overflow:hidden;
  border:1px solid #243b5c
}
.route-art svg{
  position:absolute;
  width:100%;
  height:100%
}
.route-caption{
  position:absolute;
  top:23px;
  left:25px;
  font-size:10px;
  letter-spacing:1.5px;
  color:#b9ccee
}
.art-bottom{
  position:absolute;
  bottom:20px;
  right:24px;
  font-size:10px;
  color:#b9ccee
}
.search-card{
  background:#11151d;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 15px 40px #0f172a08;
  padding:25px
}
.card-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:22px
}
.card-heading h2{
  font-size:19px;
  letter-spacing:-.6px;
  margin:0;
  font-weight:600
}
.tag{
  border-radius:6px;
  background:#142942;
  color:#a4c5fa;
  font-size:10px;
  padding:6px 8px;
  letter-spacing:.3px
}
.fields{
  display:grid;
  grid-template-columns:1.25fr 1.25fr 1fr 1.15fr .5fr;
  gap:12px
}
label.field{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:11px;
  color:#b3c0d4;
  letter-spacing:.2px
}
input,select{
  width:100%;
  padding:13px 10px;
  background:#080c12;
  border:1px solid #34435a;
  border-radius:9px;
  color:var(--ink);
  min-width:0
}
input:invalid:not(:placeholder-shown){
  box-shadow:none
}
.search-bottom{
  margin-top:20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px
}
.search-bottom p{
  font-size:11px;
  margin:0;
  max-width:590px
}
.btn{
  border:0;
  border-radius:9px;
  padding:14px 23px;
  background:#245cc5;
  color:white;
  font-weight:550;
  font-size:13px;
  display:inline-flex;
  gap:25px;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  transition:background .2s,transform .2s
}
.btn:hover{
  background:#103f8a;
  transform:translateY(-1px)
}
.btn.secondary{
  background:#11151d;
  border:1px solid #34435a;
  color:var(--ink)
}
.btn.secondary:hover{
  background:#12233b
}
.btn.full{
  width:100%
}
.text-btn{
  background:none;
  border:0;
  color:var(--accent);
  font-size:12px;
  padding:7px 0;
  text-decoration:underline;
  text-underline-offset:4px
}
.features{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:35px;
  margin:48px 0 25px
}
.feature{
  display:grid;
  grid-template-columns:36px 1fr;
  gap:13px
}
.feature-icon{
  font-size:18px;
  color:var(--accent);
  background:#142942;
  border-radius:10px;
  width:36px;
  height:36px;
  display:grid;
  place-items:center
}
.feature h3{
  font-size:14px;
  font-weight:600;
  margin:0 0 7px
}
.feature p{
  font-size:12px;
  margin:0;
  max-width:260px
}
.section-top{
  padding:40px 0 25px
}
.section-top h1{
  font-size:40px;
  letter-spacing:-1.8px;
  margin:17px 0 10px
}
.section-top p{
  font-size:14px;
  margin:0
}
.breadcrumbs{
  display:flex;
  gap:18px;
  font-size:11px;
  color:#a5b4cc
}
.breadcrumbs .on{
  color:var(--accent);
  font-weight:600
}
.notice{
  padding:12px 16px;
  border-radius:9px;
  background:#142942;
  color:#b6cef1;
  font-size:12px;
  line-height:1.6;
  margin:18px 0
}
.results-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:25px 0
}
.results-toolbar select{
  width:auto;
  background:#11151d;
  font-size:12px
}
.results-toolbar span{
  font-size:12px;
  color:var(--muted)
}
.offers{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px
}
.offer{
  background:#11151d;
  border:1px solid var(--line);
  border-radius:17px;
  padding:24px;
  position:relative;
  display:flex;
  flex-direction:column
}
.offer.recommended{
  border:1.5px solid #2563eb
}
.offer-label{
  font-size:10px;
  letter-spacing:1.2px;
  color:#8ab7ff;
  text-transform:uppercase;
  min-height:19px
}
.offer h2{
  font-size:24px;
  font-weight:550;
  margin:13px 0 8px
}
.offer-sub{
  font-size:12px;
  color:var(--muted);
  margin-bottom:22px
}
.route-line{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:11px;
  color:#b4c3da;
  margin:3px 0 20px
}
.route-line i{
  height:1px;
  background:#9fb8e2;
  flex:1;
  position:relative
}
.route-line i:after{
  content:'›';
  position:absolute;
  right:0;
  top:-9px;
  font-size:16px
}
.offer-stats{
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:17px 0;
  margin-bottom:20px
}
.offer-stats b{
  display:block;
  font-size:14px;
  font-weight:550;
  margin-bottom:5px
}
.offer-stats small{
  font-size:10px;
  color:var(--muted)
}
.price{
  font-size:32px;
  letter-spacing:-1px;
  font-weight:550
}
.price small{
  font-size:12px;
  color:var(--muted);
  font-weight:400;
  letter-spacing:0
}
.price-note{
  font-size:10px;
  color:var(--muted);
  margin:6px 0 18px;
  line-height:1.5
}
.offer details{
  font-size:11px;
  color:var(--muted);
  margin:0 0 20px;
  line-height:1.8
}
.offer summary{
  cursor:pointer;
  color:var(--accent)
}
.offer .btn{
  margin-top:auto
}
.checkout-grid{
  display:grid;
  grid-template-columns:1fr 355px;
  gap:28px;
  align-items:start
}
.panel{
  background:#11151d;
  border:1px solid var(--line);
  border-radius:16px;
  padding:25px;
  margin-bottom:18px
}
.panel h2{
  font-size:19px;
  font-weight:550;
  margin:0 0 10px
}
.panel>p{
  font-size:12px;
  margin:0 0 22px
}
.upgrade{
  display:flex;
  align-items:flex-start;
  gap:15px;
  padding:20px 0;
  border-top:1px solid var(--line);
  cursor:pointer
}
.upgrade input{
  width:18px;
  height:18px;
  accent-color:var(--accent);
  margin-top:3px;
  flex-shrink:0
}
.upgrade-info{
  flex:1
}
.upgrade-info b{
  font-size:14px;
  font-weight:550
}
.upgrade-info p{
  font-size:12px;
  line-height:1.6;
  margin:6px 0 0
}
.upgrade-price{
  font-size:13px;
  white-space:nowrap
}
.summary{
  position:sticky;
  top:22px
}
.summary h2{
  font-size:17px
}
.summary-route{
  background:#111c2c;
  border-radius:10px;
  padding:15px;
  margin:18px 0;
  font-size:13px;
  line-height:1.8
}
.summary-route small{
  color:var(--muted);
  font-size:11px
}
.line-item{
  display:flex;
  justify-content:space-between;
  gap:14px;
  font-size:12px;
  margin:14px 0;
  color:#b3c0d4
}
.total{
  border-top:1px solid var(--line);
  padding-top:18px;
  margin:20px 0;
  display:flex;
  justify-content:space-between;
  align-items:center
}
.total b{
  font-size:26px;
  letter-spacing:-1px
}
.total small{
  font-size:10px
}
.fine{
  font-size:10px!important;
  line-height:1.7!important;
  color:var(--muted);
  margin:15px 0 0!important
}
.two-fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px
}
.review-line{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:13px 0;
  border-bottom:1px solid var(--line);
  font-size:12px
}
.review-line span{
  color:var(--muted)
}
.consent{
  display:flex;
  gap:10px;
  font-size:12px;
  line-height:1.6;
  margin-top:22px
}
.consent input{
  width:17px;
  flex-shrink:0;
  accent-color:var(--accent)
}
.success{
  max-width:670px;
  margin:60px auto;
  text-align:center
}
.success-icon{
  background:var(--accent-soft);
  color:var(--accent);
  font-size:28px;
  display:grid;
  place-items:center;
  width:65px;
  height:65px;
  border-radius:50%;
  margin:0 auto 25px
}
.success h1{
  font-size:43px;
  letter-spacing:-2px
}
.success p{
  font-size:14px
}
.success .panel{
  text-align:left;
  margin-top:30px
}
.success-actions{
  display:flex;
  gap:12px;
  justify-content:center;
  margin-top:25px
}
.shipment{
  display:flex;
  gap:22px;
  align-items:center;
  padding:22px;
  background:#11151d;
  border:1px solid var(--line);
  border-radius:14px;
  margin-bottom:14px
}
.shipment-main{
  flex:1
}
.shipment h3{
  margin:0 0 7px;
  font-size:16px
}
.shipment p{
  margin:0;
  font-size:11px
}
.shipment-total{
  text-align:right;
  font-size:18px
}
.empty{
  text-align:center;
  padding:65px 20px
}
.empty h2{
  font-weight:550;
  font-size:26px
}
.empty p{
  font-size:14px
}
.stepper{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:22px
}
.step{
  font-size:11px;
  color:var(--muted);
  border-top:3px solid #2b3649;
  padding-top:12px
}
.step.done{
  border-color:#8ab7ff;
  color:var(--accent)
}
footer{
  max-width:1232px;
  margin:auto;
  border-top:1px solid var(--line);
  padding:27px 0 30px;
  display:flex;
  gap:25px;
  align-items:center;
  color:#aab7cc;
  font-size:10px
}
.brand.small{
  font-size:22px
}
footer span:last-child{
  margin-left:auto
}
#toast{
  position:fixed;
  bottom:25px;
  left:50%;
  transform:translateX(-50%);
  background:#17345b;
  color:white;
  border-radius:9px;
  padding:13px 20px;
  font-size:12px;
  z-index:10
}
@media(min-width:1450px){
  .hero{
    padding-top:85px;
    padding-bottom:50px
  }

}
@media(max-width:1320px){
  main,footer{
    margin-left:44px;
    margin-right:44px
  }

}
@media(max-width:900px){
  .hero{
    gap:25px
  }
  .route-art{
    height:270px
  }
  .hero-notes{
    flex-wrap:wrap;
    gap:10px
  }
  h1{
    font-size:52px
  }
  .fields{
    grid-template-columns:1fr 1fr
  }
  .fields .field:last-child{
    grid-column:span 2
  }
  .checkout-grid{
    grid-template-columns:1fr 300px
  }
  .offers{
    gap:10px
  }
  .offer{
    padding:18px
  }
  .price{
    font-size:27px
  }

}
@media(max-width:650px){
  header{
    padding:18px 20px;
    gap:12px;
    flex-wrap:wrap
  }
  .brand{
    font-size:25px
  }
  .brand-icon{
    width:27px;
    height:27px
  }
  header nav{
    order:3;
    width:100%;
    gap:24px;
    padding-top:3px
  }
  .demo-pill{
    font-size:9px
  }
  .nav{
    font-size:12px
  }
  .hero{
    grid-template-columns:1fr;
    padding:34px 0 23px;
    gap:25px
  }
  .hero h1{
    font-size:49px;
    letter-spacing:-2.7px;
    margin-bottom:17px
  }
  .intro{
    font-size:15px;
    margin:0
  }
  .eyebrow{
    font-size:9px;
    margin-bottom:16px
  }
  .hero-notes{
    margin-top:20px;
    font-size:11px
  }
  .route-art{
    height:185px
  }
  .route-caption{
    top:14px;
    left:18px;
    font-size:8px
  }
  .art-bottom{
    bottom:12px;
    font-size:8px
  }
  .hero-copy{
    max-width:410px
  }
  main,footer{
    margin-left:20px;
    margin-right:20px
  }
  .search-card{
    padding:19px;
    border-radius:14px
  }
  .card-heading{
    align-items:flex-start
  }
  .card-heading h2{
    font-size:17px
  }
  .tag{
    font-size:8px
  }
  .fields{
    gap:13px 9px
  }
  .fields .field:last-child{
    grid-column:auto
  }
  .fields .field:nth-child(4){
    grid-column:span 2;
    grid-row:2
  }
  .fields .field:nth-child(3){
    grid-row:3
  }
  .field select,.field input{
    font-size:12px;
    padding:12px 8px
  }
  .search-bottom{
    flex-direction:column;
    align-items:stretch;
    gap:15px
  }
  .search-bottom p{
    font-size:10px
  }
  .features{
    grid-template-columns:1fr;
    gap:22px;
    margin-top:30px
  }
  .feature p{
    max-width:none
  }
  .offers{
    grid-template-columns:1fr;
    gap:16px
  }
  .offer{
    padding:24px
  }
  .section-top{
    padding-top:27px
  }
  .section-top h1{
    font-size:32px
  }
  .section-top p{
    font-size:12px
  }
  .checkout-grid{
    grid-template-columns:1fr
  }
  .summary{
    position:static
  }
  .panel{
    padding:20px
  }
  .two-fields{
    grid-template-columns:1fr
  }
  .results-toolbar{
    gap:12px
  }
  .results-toolbar select{
    max-width:145px
  }
  .success{
    margin:35px auto
  }
  .success h1{
    font-size:35px
  }
  .shipment{
    padding:16px;
    gap:12px;
    flex-wrap:wrap
  }
  .shipment-total{
    font-size:16px
  }
  .shipment .btn{
    padding:10px 13px;
    font-size:11px
  }
  .success-actions{
    flex-direction:column
  }
  .breadcrumbs{
    font-size:10px;
    gap:12px
  }
  footer{
    flex-wrap:wrap;
    gap:12px
  }
  footer span:last-child{
    margin-left:0;
    width:100%
  }
  .upgrade-price{
    font-size:12px
  }
  main{
    padding-bottom:35px
  }

}

a{color:#8ab7ff}input::placeholder{color:#91a1b9}::selection{background:#245cc5;color:white}

/* Source: src/styles/experience.css */
/* ShipBay experience v2 */
.icon{
width:20px;
height:20px;
display:inline-block;
vertical-align:middle;
flex-shrink:0
}
.btn .icon{
width:16px;
height:16px
}
.btn:disabled{
opacity:.45;
cursor:not-allowed;
transform:none
}
.btn:disabled:hover{
background:#11151d
}
.skip-link{
position:fixed;
top:-60px;
left:15px;
background:#245cc5;
color:white;
padding:12px 20px;
z-index:30
}
.skip-link:focus{
top:10px
}
.sr-only{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0
}
main:focus,h1:focus{
outline:none
}
.section-caption{
font-size:12px;
margin:8px 0 0;
color:var(--muted)
}
.segmented{display:flex;background:#090d14;border:1px solid #405d83;border-radius:11px;padding:4px;gap:5px}.segmented button{border:1px solid #56749b;border-radius:7px;background:#213650;padding:11px 15px;min-height:44px;font-size:12px;font-weight:600;color:#f1f6ff;white-space:nowrap;cursor:pointer}.segmented button:hover{background:#304e72;border-color:#8ebcff}.segmented button[aria-pressed=true]{background:#1761cf;border-color:#88b9ff;color:#fff;box-shadow:inset 0 -3px 0 #b9d7ff}.segmented button[aria-pressed=true]:hover{background:#1b6be0}.segmented button:focus-visible{outline:3px solid #b9d7ff;outline-offset:3px}.segmented small{font-size:10px;font-weight:700;margin-left:5px;color:inherit}
.route-inputs{
display:grid;
grid-template-columns:1fr 28px 1fr .8fr;
gap:12px;
align-items:end
}
.swap-button{
border:0;
background:none;
align-self:center;
margin-top:20px;
color:var(--accent);
padding:3px
}
.swap-button .icon{
width:20px
}
.cargo-fields{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:16px;
padding-top:20px;
margin-top:20px;
border-top:1px solid var(--line)
}
.inline-check{
display:inline-flex;
gap:8px;
align-items:center;
color:#b3c0d4;
font-size:12px;
cursor:pointer;
line-height:1.5
}
.inline-check input{
width:15px;
height:15px;
accent-color:var(--accent);
padding:0;
margin:0
}
.input-unit{
display:block;
position:relative
}
.input-unit input{
padding-right:40px
}
.input-unit>span{
position:absolute;
right:13px;
top:14px;
color:#a5b4cc;
font-size:12px
}
.search-bottom p{
margin-top:8px;
font-size:10px;
max-width:670px
}
.search-bottom .btn{
white-space:nowrap
}
.search-card{
padding:27px
}
.form-error{
color:#ffaca5;
font-size:12px;
margin-top:12px
}
.form-error:empty{
display:none
}
.how-section{
display:grid;
grid-template-columns:1fr 1.1fr;
gap:80px;
background:#12233b;
padding:46px;
border-radius:20px;
margin-top:45px
}
.how-section h2{
font-size:36px;
font-weight:500;
line-height:1.12;
letter-spacing:-1.5px;
margin:0
}
.how-section>div>p:not(.eyebrow){
font-size:13px
}
.how-steps>div{
display:flex;
gap:20px;
padding:15px 0;
border-bottom:1px solid #2e4260
}
.how-steps>div:last-child{
border:0
}
.how-steps>div>span{
font-size:11px;
color:#a5c2eb;
padding-top:4px
}
.how-steps h3{
font-size:14px;
font-weight:550;
margin:0 0 5px
}
.how-steps p{
font-size:12px;
margin:0
}
.title-row{
display:flex;
justify-content:space-between;
gap:25px;
align-items:center
}
.title-row .btn{
flex-shrink:0
}
.breadcrumbs{
margin-bottom:26px;
gap:28px
}
.breadcrumbs span{
display:flex;
align-items:center;
gap:9px
}
.breadcrumbs b{
display:grid;
place-items:center;
width:24px;
height:24px;
border-radius:50%;
font-size:9px;
border:1px solid #34435a;
background:transparent;
font-weight:500
}
.breadcrumbs .on b{
background:#245cc5;
color:white;
border-color:var(--accent)
}
.breadcrumbs .completed b{
background:#172e50;
color:var(--accent);
border-color:#172e50
}
.notice{
display:flex;
align-items:flex-start;
gap:10px;
font-size:11px
}
.notice .icon{
width:17px;
height:17px;
margin-top:1px
}
.notice strong{
font-weight:600
}
.results-toolbar b{
font-weight:550;
font-size:13px
}
.toolbar-options{
display:flex;
align-items:center;
gap:25px
}
.icon-button{
border:0;
background:transparent;
color:#a5c2eb;
padding:7px;
border-radius:8px;
display:inline-flex;
align-items:center;
justify-content:center
}
.icon-button:hover{
background:#12233b
}
.icon-button .icon{
width:18px;
height:18px
}
.offer-top{
display:flex;
align-items:center;
justify-content:space-between;
margin:-5px -4px 0 0
}
.offer-label{
min-height:0;
font-size:9px
}
.offer h2{
margin-top:15px
}
.offer .text-btn{
text-align:left;
margin-bottom:18px;
text-decoration:none
}
.offer .text-btn:hover{
text-decoration:underline
}
.offer .btn{
gap:12px
}
.compare-choice{
justify-content:center;
margin-top:17px;
font-size:10px
}
.compare-bar{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
border-bottom:1px solid var(--line);
padding:25px 0;
font-size:12px;
color:var(--muted)
}
.compare-bar .btn{
font-size:11px;
padding:10px 17px
}
.scope-note{
display:flex;
align-items:flex-start;
gap:13px;
padding:20px 0;
max-width:800px;
color:#aab7cc
}
.scope-note p{
font-size:11px;
margin:0
}
.scope-note b{
color:#b6cef1;
font-weight:550
}
.summary-route .icon{
width:16px;
height:16px;
margin:0 4px
}
.included-support{
display:flex;
gap:13px;
align-items:center;
background:#12233b;
padding:16px;
border-radius:10px;
margin-bottom:27px;
color:var(--accent)
}
.included-support b{
font-size:12px;
font-weight:550
}
.included-support p{
font-size:11px;
margin:3px 0 0
}
.included-support .tag{
margin-left:auto;
font-size:8px
}
.upgrade-symbol{
color:#a5c2eb;
padding-top:3px
}
.upgrade-info small{
display:block;
color:#a5b4cc;
font-size:10px;
line-height:1.6;
margin-top:7px
}
.upgrade{
gap:12px
}
.soft-panel{
background:#12233b;
border-color:#2e4260
}
.soft-panel p{
color:#b3c0d4
}
.workspace-stats{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
margin:10px 0 30px
}
.workspace-stats>div{
background:#11151d;
border:1px solid var(--line);
border-radius:13px;
padding:21px 23px;
display:grid;
grid-template-columns:38px 1fr;
column-gap:14px
}
.workspace-stats>div>span{
grid-row:span 2;
color:#a5c2eb;
background:#12233b;
width:38px;
height:38px;
display:grid;
place-items:center;
border-radius:10px;
align-self:center
}
.workspace-stats b{
font-size:26px;
font-weight:500;
letter-spacing:-1px
}
.workspace-stats small{
font-size:11px;
color:var(--muted);
margin-top:3px
}
.workspace-tools{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
margin:20px 0
}
.tabs{
display:flex;
gap:25px
}
.tabs button{
padding:12px 0;
border:0;
border-bottom:2px solid transparent;
background:none;
color:#aab7cc;
font-size:12px
}
.tabs button[aria-pressed=true]{
color:var(--accent);
border-bottom-color:var(--accent)
}
.tabs small{
font-size:10px;
background:#182c49;
border-radius:5px;
padding:2px 5px;
margin-left:3px
}
.workspace-search{
display:flex;
align-items:center;
gap:10px;
min-width:255px
}
.workspace-search .icon{
color:#a5b4cc;
width:17px
}
.workspace-search input{
background:#11151d;
font-size:11px;
padding:11px
}
.record-kicker{
font-size:9px;
font-weight:600;
letter-spacing:1px;
color:#a5c2eb;
margin-bottom:10px
}
.record-kicker span{
font-weight:400;
letter-spacing:0;
color:var(--muted);
text-transform:none
}
.shipment h3{
font-size:18px;
font-weight:550
}
.shipment .reference{
font-size:9px;
margin-top:7px;
color:#a5b4cc;
letter-spacing:.3px
}
.danger{
color:#e0b887
}
.itinerary{
margin:28px 0 5px 9px
}
.itinerary>div{
position:relative;
padding:0 0 28px 30px;
border-left:1px solid #2e4260
}
.itinerary>div:last-child{
border-left-color:transparent;
padding-bottom:0
}
.itinerary-dot{
position:absolute;
left:-5px;
top:2px;
width:9px;
height:9px;
background:#2563eb;
border-radius:50%
}
.itinerary-dot.hollow{
background:#11151d;
border:2px solid #7399d8
}
.itinerary small{
font-size:9px;
letter-spacing:1.5px;
color:#a5b4cc
}
.itinerary h3{
font-size:17px;
margin:8px 0;
font-weight:550
}
.itinerary p{
font-size:12px;
line-height:1.7;
margin:0
}
.document-row{
display:flex;
gap:13px;
align-items:center;
border-top:1px solid var(--line);
padding:18px 0;
color:#aab7cc
}
.document-row b{
display:block;
font-size:12px;
font-weight:550;
color:#cfdaec
}
.document-row small{
display:block;
font-size:10px;
margin-top:5px
}
.document-row .tag{
margin-left:auto;
white-space:nowrap
}
.tag.neutral{
background:#172131;
color:#a5b4cc;
font-size:8px
}
.help-layout{
display:grid;
grid-template-columns:340px 1fr;
gap:40px
}
.help-layout aside{
height:max-content;
position:sticky;
top:20px
}
.help-layout aside .feature-icon{
margin-bottom:20px
}
.help-layout aside h2{
font-size:24px;
line-height:1.2;
letter-spacing:-.8px
}
.faq-list details{
border-bottom:1px solid var(--line);
padding:20px 0
}
.faq-list summary{
font-size:14px;
line-height:1.5;
cursor:pointer;
font-weight:500
}
.faq-list p{
font-size:12px;
line-height:1.9;
max-width:690px;
margin-bottom:5px
}
.faq-list details:first-child{
padding-top:7px
}
dialog{
border:1px solid var(--line);
border-radius:19px;
padding:28px;
width:min(760px,calc(100% - 32px));
max-height:85vh;
box-shadow:0 25px 100px #0f172a33;
color:var(--ink);
background:#11151d
}
dialog::backdrop{
background:#0a122073;
backdrop-filter:blur(5px)
}
.modal-heading{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
margin-bottom:25px
}
.modal-heading h2{
font-size:24px;
font-weight:500;
letter-spacing:-.8px;
margin:0
}
dialog h3{
font-size:15px;
font-weight:550;
margin-top:25px
}
.modal-route{
font-size:20px;
letter-spacing:-.5px;
margin:18px 0 12px
}
.table-scroll{
overflow:auto
}
.comparison{
border-collapse:collapse;
width:100%;
font-size:12px;
min-width:440px
}
.comparison th,.comparison td{
text-align:left;
padding:14px 12px;
border-bottom:1px solid var(--line)
}
.comparison th:first-child{
padding-left:0
}
.comparison thead th{
font-size:15px;
font-weight:550;
color:var(--accent)
}
.comparison tbody th{
font-size:11px;
color:var(--muted);
font-weight:400
}
.comparison .btn{
font-size:10px;
padding:10px 15px
}
.dialog-actions{
display:flex;
gap:12px;
margin-top:25px
}
.success-icon .icon{
width:30px;
height:30px
}
.shipment-total p{
white-space:nowrap
}
footer{
margin-top:5px
}
input:focus,select:focus{
border-color:#2563eb
}
.btn,.nav,.text-btn,.icon-button{
min-height:36px
}
.offer .btn{
min-height:45px
}
.offer-stats small{
font-size:11px
}
p{
text-wrap:pretty
}
@media(prefers-reduced-motion:reduce){
*{
scroll-behavior:auto!important;
transition:none!important
}
}
@media(max-width:1000px){
.route-inputs{
grid-template-columns:1fr 24px 1fr
}
.route-inputs>.field:last-child{
grid-column:1/-1
}
.search-card .card-heading{
align-items:flex-start
}
.segmented button{
padding:9px;
font-size:11px
}
.how-section{
gap:35px
}
.help-layout{
grid-template-columns:270px 1fr;
gap:25px
}
.results-toolbar .toolbar-options{
gap:12px
}
}
@media(max-width:650px){
.hero{
padding-top:32px
}
.hero h1{
font-size:48px
}
.search-card{
padding:18px
}
.search-card .card-heading{
flex-direction:column;
gap:18px
}
.search-card .card-heading>div:first-child{
width:100%
}
.segmented{
width:100%
}
.segmented button{
flex:1;
font-size:11px;
padding:10px 5px
}
.segmented small{
font-size:10px
}
.route-inputs{
grid-template-columns:1fr 25px;
gap:13px 5px
}
.route-inputs>.field:first-child{
grid-column:1
}
.route-inputs>.field:nth-of-type(2){
grid-column:1
}
.route-inputs>.field:last-child{
grid-column:1/-1
}
.swap-button{
grid-row:1/3;
grid-column:2;
margin:0;
align-self:center;
transform:rotate(90deg)
}
.cargo-fields{
grid-template-columns:1fr 1fr;
gap:14px;
margin-top:15px;
padding-top:16px
}
.cargo-fields>.field:last-child{
grid-column:1/-1
}
input,select{
font-size:16px!important
}
.field{
font-size:11px!important
}
.search-bottom .btn{
padding:15px;
font-size:13px
}
.inline-check{
font-size:11px
}
.search-bottom p{
font-size:10px
}
.how-section{
padding:26px;
grid-template-columns:1fr;
gap:20px;
margin-top:30px
}
.how-section h2{
font-size:30px
}
.how-section>div>p:not(.eyebrow){
display:none
}
.features{
gap:24px
}
.title-row{
align-items:flex-start;
flex-direction:column;
gap:14px
}
.title-row .btn{
font-size:11px;
padding:10px 15px
}
.breadcrumbs{
gap:14px;
margin-bottom:22px
}
.breadcrumbs span{
font-size:9px;
gap:5px
}
.breadcrumbs b{
width:20px;
height:20px;
font-size:8px
}
.section-top h1{
font-size:32px;
line-height:1.08;
margin-top:10px
}
.section-top p{
font-size:12px
}
.results-toolbar{
align-items:flex-start;
flex-direction:column;
gap:15px
}
.toolbar-options{
width:100%;
justify-content:space-between
}
.results-toolbar select{
font-size:12px!important;
padding:10px;
min-width:160px
}
.notice{
font-size:10px
}
.compare-bar{
font-size:11px
}
.compare-bar .btn{
white-space:nowrap;
min-height:42px
}
.summary-route{
font-size:13px
}
.upgrade-symbol{
display:none
}
.upgrade-info b{
font-size:13px
}
.upgrade-info p{
font-size:11px
}
.upgrade-info small{
font-size:10px
}
.upgrade input{
width:18px;
height:18px
}
.upgrade-price{
font-size:12px
}
.included-support{
padding:12px;
gap:9px
}
.included-support .tag{
display:none
}
.workspace-stats{
gap:8px;
margin-top:0
}
.workspace-stats>div{
padding:14px 10px;
grid-template-columns:1fr;
gap:7px
}
.workspace-stats>div>span{
grid-row:auto;
width:29px;
height:29px
}
.workspace-stats .icon{
width:16px;
height:16px
}
.workspace-stats b{
font-size:24px
}
.workspace-stats small{
font-size:9px
}
.workspace-tools{
flex-direction:column;
align-items:stretch;
gap:12px
}
.workspace-search{
min-width:0
}
.workspace-search input{
font-size:14px!important
}
.tabs{
gap:25px
}
.shipment{
align-items:flex-start;
position:relative;
padding:18px
}
.shipment>.feature-icon{
display:none
}
.shipment-main{
width:100%;
flex-basis:100%
}
.shipment h3{
font-size:17px
}
.shipment-total{
margin-top:6px
}
.shipment>.btn{
margin-left:auto
}
.shipment .reference{
word-break:break-all
}
.record-kicker{
font-size:8px
}
.help-layout{
grid-template-columns:1fr;
gap:15px
}
.help-layout aside{
position:static
}
.help-layout aside .fine{
margin-bottom:0
}
.faq-list details{
padding:18px 0
}
.faq-list summary{
font-size:13px
}
.help-layout aside h2{
font-size:24px
}
.document-row{
gap:10px
}
.document-row .tag{
font-size:7px;
white-space:normal;
text-align:center;
max-width:80px
}
.review-line{
font-size:11px
}
.review-line b{
text-align:right;
max-width:65%;
overflow-wrap:anywhere
}
.success h1{
font-size:34px
}
.success .panel h2{
font-size:16px
}
.success .review-line b{
word-break:break-word
}
.step{
font-size:10px
}
dialog{
padding:21px;
border-radius:14px
}
.modal-heading h2{
font-size:22px
}
.dialog-actions{
flex-direction:column
}
.modal-route{
font-size:18px
}
.scope-note p{
font-size:10px
}
header nav{
justify-content:space-between;
gap:12px
}
header .nav{
font-size:11px
}
.brand{
font-size:25px
}
.demo-pill{
font-size:9px
}
.checkout-grid{
gap:8px
}
footer{
padding-bottom:27px
}
}

/* First-time shipper guidance and full-width shipment choices. */
.search-card .card-heading{flex-direction:column;align-items:stretch;gap:18px}
.search-card .segmented{width:100%}
.search-card .segmented button{flex:1;text-align:left;white-space:normal;padding:14px 16px;font-size:14px}
.mode-hint{display:block;font-size:12px;font-weight:400;line-height:1.5;margin-top:5px}
.first-shipment-guide{padding:14px 16px;margin:0 0 22px;border:1px solid #405d83;border-radius:10px;background:#142238;color:#dbe8ff;font-size:13px;line-height:1.6}
.first-shipment-guide p{margin:0 0 8px}
.first-shipment-guide p:last-child{margin-bottom:0}
.first-shipment-guide summary{cursor:pointer;color:#a9cdff;font-weight:600}
.first-shipment-guide details[open] summary{margin-bottom:8px}
@media(max-width:650px){.search-card .segmented button{padding:12px 9px;font-size:12px}.mode-hint{font-size:11px}.hero h1{font-size:40px}}
.hero-guide{margin:0;padding:24px}.hero-guide h2{color:#f1f5ff;margin:0 0 16px}.hero-guide ul{padding-left:22px;margin:0 0 16px}.hero-guide li{padding:5px 0}.hero-guide .eyebrow{font-size:10px}

/* Source: src/styles/cargo.css */
/* Focused cargo assistance and touch accessibility */
.volume-helper{
  border-top:1px solid var(--line);
  margin-top:20px;
  padding-top:16px
}
.volume-helper summary{
  font-size:12px;
  color:var(--accent);
  cursor:pointer;
  min-height:44px;
  align-content:center
}
.volume-helper p{
  font-size:12px
}
.dimension-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  margin:16px 0
}
.volume-helper .btn{
  min-height:44px
}
.form-error:focus{
  outline:2px solid #ffaca5;
  outline-offset:4px
}
#volume-result{
  color:var(--accent)
}

@media(pointer:coarse){
  .btn,.nav,.text-btn,.icon-button,.swap-button,.segmented button,.tabs button{
    min-height:44px
  }
  .inline-check{
    min-height:44px
  }
  .compare-choice{
    margin-top:6px
  }

}

@media(max-width:650px){
  .dimension-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .dimension-grid .field:last-child{
    grid-column:1/-1
  }
  .swap-button{
    min-width:44px
  }
  .route-inputs{
    grid-template-columns:minmax(0,1fr) 44px
  }
  .volume-helper .btn{
    width:100%
  }

}


#toast[hidden]{
  display:none
}
.panel>p.no-margin{
  margin:0
}

.cold-cargo{margin-top:20px;padding:18px;border:1px solid var(--line);border-radius:12px;background:#12233b}.cold-cargo h3{font-size:14px;margin:0 0 14px}.cold-cargo .field{max-width:320px}.cold-cargo p{font-size:12px;margin:12px 0 0}

.spec-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px}.spec-grid small{font-size:10px;line-height:1.5;color:var(--muted)}.planning-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 0;border-top:1px solid var(--line)}.planning-row b{font-size:13px;font-weight:550}.planning-row small{display:block;font-size:11px;color:var(--muted);margin-top:6px}.planning-row .btn{font-size:11px;min-height:44px;padding:10px 16px}.preparation-count{font-size:12px;color:var(--accent)}.sailing-terms h3{font-size:15px;font-weight:550;margin-top:24px}.sailing-terms .review-line b{text-align:right;max-width:58%;overflow-wrap:anywhere}.offer-terms{display:grid;gap:6px;padding:12px 0;margin-bottom:12px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}.offer-terms small{font-size:10px}@media(max-width:650px){.spec-grid{grid-template-columns:1fr;gap:14px}.planning-row{align-items:flex-start}.planning-row .btn{flex-shrink:0}}

/* Source: src/styles/checkout.css */
/* Checkout: calm status progression and one explicit action at a time. */
.payment-promise{
  background:#12233b;
  border-radius:10px;
  padding:16px;
  margin-top:20px;
  font-size:13px
}
.payment-promise p{
  font-size:12px;
  margin:8px 0 0
}
.checkout-status>.tag{
  display:inline-block;
  margin-bottom:20px
}
.payment-stages{
  list-style:none;
  margin:24px 0;
  padding:0
}
.payment-stages li{
  display:flex;
  gap:14px;
  align-items:center;
  border-top:1px solid var(--line);
  padding:16px 0
}
.stage-number{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:#142942;
  color:var(--accent);
  flex-shrink:0;
  font-size:12px
}
.payment-stages b{
  display:block;
  font-weight:550;
  font-size:13px
}
.payment-stages small{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:12px
}
.checkout-actions{
  display:flex;
  flex-direction:column;
  gap:14px
}
.checkout-actions .btn{
  min-height:46px;
  white-space:normal;
  text-align:center
}
.checkout-actions .consent{
  margin:0
}
.checkout-exception{
  border-left:3px solid #b89055;
  padding:10px 14px;
  background:#292315;
  border-radius:4px
}
.checkout-status h2{
  line-height:1.3
}
.checkout-status .form-error{
  line-height:1.6
}
.notice>.text-btn{
  flex-shrink:0
}
@media(max-width:650px){
  .checkout-status h2{
    font-size:22px
  }
  .notice{
    flex-wrap:wrap
  }
  .notice>.text-btn{
    min-height:44px
  }
  .payment-stages li{
    padding:17px 0
  }

}


.search-feedback{
  padding:36px
}
.search-feedback>p{
  font-size:14px
}
.search-loader{
  display:block;
  width:32px;
  height:32px;
  border:3px solid var(--line);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:search-spin 1s linear infinite
}
@keyframes search-spin{
  to{
    transform:rotate(360deg)
  }

}
@media(prefers-reduced-motion:reduce){
  .search-loader{
    animation:none
  }

}

/* Account entry is separate from payment-provider eligibility. */
.account-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;max-width:950px}.account-panel{padding:32px}.account-panel>.feature-icon{margin-bottom:24px}.account-panel h2{font-size:25px;margin-bottom:12px}.account-panel .btn{min-height:48px;margin:8px 0}.account-panel .text-btn{display:block;min-height:44px}.account-setup{padding:14px;border:1px solid var(--line);border-radius:9px;background:#131d2d;font-size:12px}.account-benefits{padding-left:20px;color:var(--muted);font-size:13px;line-height:2}.account-layout aside h3{font-size:16px;margin-top:26px}.account-layout aside>p{font-size:12px}
@media(max-width:650px){.account-layout{grid-template-columns:1fr;gap:8px}.account-panel{padding:24px}header nav{flex-wrap:wrap}.account-panel h2{font-size:23px}}
/* Low-bandwidth loading and explicit device-draft controls. */
.device-draft{border-top:1px solid var(--line);margin-top:18px;padding-top:12px;display:flex;flex-wrap:wrap;gap:8px 20px}
.device-draft p{flex-basis:100%;margin:0}
.connection-status{max-width:1232px;margin:16px auto;padding:14px 20px;border:1px solid var(--line);border-radius:14px;background:#12233b;font-size:13px}
.startup-panel{max-width:640px;margin:60px auto;padding:28px}
.startup-panel h1{font-size:clamp(30px,5vw,46px)}