/* DirectShippersList — midnight terminal theme.
   Wow comes from type, color and layout. No images anywhere. */
:root{
  --bg:#04060c; --bg2:#070b16; --bgalt:#060a14;
  --card:rgba(255,255,255,.045); --card2:rgba(255,255,255,.02);
  --line:rgba(103,232,249,.18); --line2:rgba(103,232,249,.34);
  --text:#edf4ff; --mut:#9db1d1; --mut2:#c6d4ec; --ph:#8fa3c4;
  --cyan:#22d3ee; --cyanlt:#67e8f9; --lime:#a3e635; --vio:#818cf8;
  --grad:linear-gradient(92deg,var(--cyan),var(--lime));
  --gradbtn:linear-gradient(92deg,#0e7490,#22d3ee 45%,#a3e635);
  --dark:#04060c;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--text); background-color:var(--bg);
  font-family:"Inter","SF Pro Display",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55; font-size:16px;
  background-image:
    radial-gradient(640px 360px at 10% -60px, rgba(34,211,238,.22), rgba(34,211,238,0) 70%),
    radial-gradient(700px 400px at 90% -80px, rgba(163,230,53,.13), rgba(163,230,53,0) 70%),
    radial-gradient(900px 620px at 50% 118%, rgba(129,140,248,.10), rgba(129,140,248,0) 70%),
    linear-gradient(180deg,var(--bg2),var(--bg) 360px);
  background-repeat:no-repeat;
}
.grid-bg{
  position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.55;
  background-image:
    linear-gradient(rgba(103,232,249,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103,232,249,.05) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:linear-gradient(180deg, #000 0, transparent 520px);
          mask-image:linear-gradient(180deg, #000 0, transparent 520px);
}
.wrap{position:relative; z-index:1; max-width:1120px; margin:0 auto; padding:0 20px 64px}
a{color:var(--cyanlt)}
a:hover{color:var(--lime)}
:focus-visible{outline:2px solid var(--lime); outline-offset:2px}

/* ---------- header ---------- */
header.sitehead{padding:20px 0 6px}
.brandrow{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand .wm{font-size:25px; font-weight:900; letter-spacing:-.3px; color:var(--text)}
.brand .wm .c{color:var(--cyan)}
.brand .wm .l{color:var(--lime)}
nav.main{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
nav.main a{
  color:var(--mut2); text-decoration:none; font-weight:600; font-size:15.5px;
  padding:10px 13px; border-radius:10px; min-height:44px; display:inline-flex; align-items:center;
}
nav.main a:hover{color:var(--text); background:rgba(255,255,255,.05)}
nav.main a.cta{
  color:var(--dark); font-weight:900; font-size:16px; padding:12px 20px;
  background:var(--grad); border-radius:12px;
}
nav.main a.cta:hover{color:var(--dark); filter:brightness(1.07)}

/* ---------- type ---------- */
h1{font-size:clamp(2.35rem,6.4vw,4.1rem); line-height:1.04; letter-spacing:-1.2px; margin:.35em 0 .4em; font-weight:900; overflow-wrap:anywhere}
h1 .g{background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--cyan)}
h2{font-size:clamp(1.5rem,3.4vw,2.05rem); line-height:1.15; letter-spacing:-.5px; margin:0 0 .45em; font-weight:850}
h3{font-size:1.16rem; margin:0 0 .35em; font-weight:800}
p{margin:0 0 1em}
.lede{font-size:clamp(1.13rem,2.4vw,1.35rem); color:var(--mut2); line-height:1.5; max-width:46em}
.sub{color:var(--mut); font-size:1.05rem}
small{color:var(--mut)}
.eyebrow{
  display:inline-block; font-size:12.5px; font-weight:800; letter-spacing:2.2px;
  color:var(--lime); text-transform:uppercase; margin-bottom:10px;
}
.crumbs{color:var(--mut); font-size:14px; margin:18px 0 0}
.crumbs a{color:var(--mut2); text-decoration:none}
.crumbs a:hover{color:var(--lime)}

/* ---------- sections & flavors (explicit color rules per flavor) ---------- */
section{padding:34px 0 6px}
section.hero{padding:30px 0 10px}
section.alt{
  background:linear-gradient(180deg, rgba(103,232,249,.05), rgba(163,230,53,.03));
  border:1px solid var(--line); border-radius:22px; padding:30px 26px; margin-top:34px;
}
section.plain h1,section.plain h2,section.plain h3{color:var(--text)}
section.plain p,section.plain li{color:var(--mut2)}
section.plain small,section.plain label,section.plain legend{color:var(--mut)}
section.plain a{color:var(--cyanlt)}
section.alt h1,section.alt h2,section.alt h3{color:var(--text)}
section.alt p,section.alt li{color:var(--mut2)}
section.alt small,section.alt label,section.alt legend{color:var(--mut)}
section.alt a{color:var(--cyanlt)}
section.hero h1,section.hero h2,section.hero h3{color:var(--text)}
section.hero p,section.hero li{color:var(--mut2)}
section.hero small,section.hero label,section.hero legend{color:var(--mut)}
section.hero a{color:var(--cyanlt)}
.shead{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:6px}
.ssub{color:var(--mut); max-width:52em}

/* ---------- buttons: BIG AND BOLD, everywhere ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:60px; padding:17px 34px; border-radius:14px; border:0; cursor:pointer;
  font-size:19px; font-weight:900; letter-spacing:.2px; text-decoration:none;
  color:var(--dark); background:var(--grad); text-align:center;
}
section .btn, .hero .btn, .alt .btn{color:var(--dark)}
.btn:hover{color:var(--dark); filter:brightness(1.08)}
.btn.big{font-size:22px; min-height:70px; padding:21px 44px; border-radius:16px}
.btn.ghost{
  background:rgba(255,255,255,.03); color:var(--cyanlt);
  border:1.5px solid var(--line2);
}
section .btn.ghost, .hero .btn.ghost, .alt .btn.ghost{color:var(--cyanlt)}
.btn.ghost:hover{color:var(--lime); border-color:var(--lime)}
.btnrow{display:flex; gap:14px; flex-wrap:wrap; margin:22px 0 6px}

/* ---------- updates promise (sits at the buy decision, never a footnote) ---------- */
.heropromise{display:inline-block; font-size:1.07rem; font-weight:800; color:var(--lime);
  background:rgba(163,230,53,.09); border:1px solid rgba(163,230,53,.4); border-radius:12px;
  padding:11px 16px; margin:12px 0 4px; line-height:1.45}
.hero .heropromise{color:var(--lime)}

/* ---------- counts band ---------- */
.counts{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:30px 0 4px;
}
.count{
  background:var(--card); border:1px solid var(--line); border-radius:18px; padding:20px 18px;
}
.count .n{font-size:clamp(2rem,5vw,3rem); font-weight:900; letter-spacing:-1px; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--cyan)}
.count .t{color:var(--mut); font-size:14.5px; margin-top:7px; line-height:1.4}

/* ---------- search ---------- */
form.search{
  background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:24px 22px; margin:26px 0 6px;
}
form.search h2{margin-top:0}
form.search p{color:var(--mut)}
form.search label{color:var(--mut2); font-weight:700; display:block; margin-bottom:7px}
.srow{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap}
.field{flex:1 1 260px}
.field input{
  width:100%; min-height:58px; padding:15px 16px; font-size:17px; color:var(--text);
  background:rgba(255,255,255,.05); border:1px solid var(--line2); border-radius:12px; outline:none;
}
.field input::placeholder{color:var(--ph)}
.field input:focus{border-color:var(--cyan)}
.sbtn{
  min-height:58px; padding:15px 32px; font-size:18px; font-weight:900; border:0; border-radius:12px;
  cursor:pointer; color:var(--dark); background:var(--grad);
}
.sbtn:hover{filter:brightness(1.08)}
.sresult{display:none; margin-top:16px; color:var(--mut2); background:rgba(163,230,53,.08);
  border:1px solid var(--line); border-radius:12px; padding:13px 15px}
.sresult a{color:var(--lime); font-weight:700}

/* ---------- cards ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; margin-top:16px}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:18px; padding:22px 20px;
}
.card h3{font-size:1.22rem; color:var(--text); overflow-wrap:anywhere}
.card .row{display:flex; gap:10px; padding:5px 0; font-size:15px}
.card .lab{flex:0 0 118px; color:var(--mut); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; padding-top:2px}
.card .val{color:var(--mut2); overflow-wrap:anywhere}
.card .val a{color:var(--cyanlt)}
.card .who{color:var(--text); font-weight:800}
.card .job{color:var(--mut)}
.card .mono{font-variant-numeric:tabular-nums; letter-spacing:.2px}
.card .contact{border-top:1px dashed var(--line2); margin-top:10px; padding-top:10px}
.pill{
  display:inline-block; font-size:12px; font-weight:900; letter-spacing:1.4px; text-transform:uppercase;
  padding:6px 11px; border-radius:999px; vertical-align:middle;
}
.pill.free{color:var(--lime); background:rgba(163,230,53,.13); border:1px solid rgba(163,230,53,.45)}
.pill.lock{color:var(--cyanlt); background:rgba(34,211,238,.10); border:1px solid var(--line2)}

/* locked band */
.lockband{
  border:1.5px dashed var(--line2); border-radius:20px; padding:28px 24px; margin-top:18px;
  background:linear-gradient(180deg, rgba(34,211,238,.06), rgba(163,230,53,.04)); text-align:left;
}
.lockband .bignum{font-size:clamp(2.2rem,6vw,3.4rem); font-weight:900; letter-spacing:-1px; line-height:1.05; color:var(--text)}
.lockband .bignum .g{color:var(--lime)}
.lockband p{color:var(--mut2); max-width:52em}

/* access band */
.accessband{
  border:1px solid var(--line2); border-radius:22px; margin-top:36px;
  padding:32px 28px; background:
    radial-gradient(500px 260px at 15% 0%, rgba(34,211,238,.16), rgba(34,211,238,0) 70%),
    radial-gradient(500px 260px at 85% 100%, rgba(163,230,53,.12), rgba(163,230,53,0) 70%),
    var(--card2);
}
.accessband h2{font-size:clamp(1.7rem,4vw,2.5rem)}
.accessband p{color:var(--mut2); max-width:50em}
.accessband .price{font-size:clamp(2.6rem,7vw,4rem); font-weight:900; letter-spacing:-1.5px; line-height:1; color:var(--text)}
.accessband .price .per{font-size:1.05rem; font-weight:700; color:var(--lime); letter-spacing:.4px}
section.accessband small, section.lockband small, .lockband small{color:var(--mut2)}

/* ---------- lists, states grid, guides ---------- */
.citylist{margin-top:10px}
.cityline{font-size:16.5px; color:var(--mut2); padding:7px 0; border-bottom:1px solid rgba(103,232,249,.08)}
.cityline:last-child{border-bottom:0}
a.biglink{font-size:19px; font-weight:800; color:var(--text); text-decoration:none}
a.biglink:hover{color:var(--lime)}
.stategrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:10px; margin-top:16px}
.stategrid a{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; color:var(--text); text-decoration:none; font-weight:700; min-height:52px;
}
.stategrid a:hover{border-color:var(--lime); color:var(--lime)}
.stategrid .n{color:var(--cyan); font-weight:900}
.guidelist{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; margin-top:16px}
.guidecard{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px}
.guidecard h3 a{color:var(--text); text-decoration:none}
.guidecard h3 a:hover{color:var(--lime)}
.guidecard p{color:var(--mut); font-size:15px; margin:0}
article.guide{max-width:46em}
article.guide p, article.guide li{color:var(--mut2); font-size:17px; line-height:1.65}
article.guide h2{margin-top:1.3em}
article.guide .lede{color:var(--text); font-size:1.22rem}
ul.tight li{margin-bottom:6px}
.checks{list-style:none; padding:0; margin:14px 0}
.checks li{padding:9px 0 9px 34px; position:relative; color:var(--mut2); font-size:16.5px}
.checks li::before{content:"✓"; position:absolute; left:2px; top:8px; color:var(--lime); font-weight:900; font-size:18px}
.checks label{color:var(--mut2)}
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin-top:16px}
.step{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px}
.step .k{font-size:2rem; font-weight:900; color:var(--cyan); line-height:1}
.step h3{margin-top:8px}
.step p{color:var(--mut); font-size:15px; margin:0}
.panel{background:var(--card); border:1px solid var(--line); border-radius:20px; padding:6px}
.panel-in{padding:24px 22px}
.panel p{color:var(--mut2)}
.notice{
  background:rgba(163,230,53,.08); border:1px solid rgba(163,230,53,.4);
  border-radius:14px; padding:16px 18px; color:var(--mut2); margin:20px 0;
}
.notice strong{color:var(--text)}
.faq{margin-top:8px}
.faq h3{margin-top:22px; color:var(--text)}
.faq p{color:var(--mut2); max-width:52em}
.mathbox{
  background:#02040a; border:1px solid var(--line2); border-radius:16px; padding:22px;
  font-size:16.5px; color:var(--mut2); margin:18px 0;
}
.mathbox .r{display:flex; justify-content:space-between; gap:14px; padding:6px 0; border-bottom:1px dashed rgba(103,232,249,.15)}
.mathbox .r:last-child{border-bottom:0}
.mathbox .amt{font-weight:900; color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap}
.mathbox .r.win .amt{color:var(--lime)}

/* ---------- footer ---------- */
footer{margin-top:56px; border-top:1px solid var(--line); padding-top:26px; color:var(--mut); font-size:14.5px}
footer .frow{display:flex; justify-content:space-between; gap:26px; flex-wrap:wrap; margin-bottom:14px}
footer nav{display:flex; gap:6px; flex-wrap:wrap}
footer nav a{color:var(--mut2); text-decoration:none; padding:8px 10px; min-height:44px; display:inline-flex; align-items:center}
footer nav a:hover{color:var(--lime)}
footer p{color:var(--mut)}
footer strong{color:var(--text)}

/* ---------- mobile ---------- */
@media (max-width:760px){
  .wrap{padding:0 15px 48px}
  .brandrow{flex-direction:column; align-items:flex-start; gap:8px}
  nav.main{width:100%; gap:2px}
  nav.main a{padding:10px 10px; font-size:15px}
  nav.main a.cta{margin-left:auto; padding:12px 18px}
  .counts{grid-template-columns:repeat(2,1fr)}
  .srow{flex-direction:column; align-items:stretch}
  .srow .field{flex:0 0 auto}
  .srow .sbtn{width:100%}
  .btn,.btn.big{width:100%; padding-left:16px; padding-right:16px}
  .btnrow{flex-direction:column}
  .cards{grid-template-columns:1fr}
  section.alt{padding:24px 17px}
  .accessband{padding:26px 18px}
  .card .lab{flex-basis:104px}
}