:root {
  --blue: #0645a8;
  --blue-dark: #053984;
  --orange: #ff8a00;
  --green: #2e8059;
  --ink: #111827;
  --muted: #6b7280;
  --line: #d1d5db;
  --soft: #f6f7fb;
  --notice: #dfe5f7;
  font-family: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; color: var(--ink); background: #fff; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { border: 0; cursor: pointer; }

.notice {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 14px 52px;
  color: #0019a8;
  background: var(--notice);
  font-size: 14px;
}
.notice a { text-decoration: underline; }
.notice button { position: absolute; right: 24px; top: 10px; background: transparent; font-size: 22px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 38px;
  min-height: 72px;
  padding: 0 6.8vw;
  background: white;
}
.text-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--blue);
  font-size: 29px;
  font-weight: 900;
  letter-spacing: 0;
}
.text-logo span {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 34px;
  color: #fff;
  background: linear-gradient(135deg, var(--orange), #ffb13b);
  border-radius: 8px;
  font-size: 20px;
  letter-spacing: -1px;
  box-shadow: inset -10px 0 0 rgba(6, 69, 168, .95);
}
.text-logo span::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 7px;
  width: 12px;
  height: 12px;
  border: solid #fff;
  border-width: 0 0 3px 3px;
  border-radius: 0 0 0 3px;
}
.main-nav { display: flex; align-items: center; gap: 28px; font-size: 15px; white-space: nowrap; }
.main-nav a:hover, .main-nav a.active { color: var(--blue); }
.divider { width: 1px; height: 18px; background: #e5e7eb; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.plain-button { background: transparent; color: #111; }
.blue-button { min-height: 36px; padding: 0 20px; color: white; background: var(--blue); border-radius: 18px; font-weight: 700; }
.blue-button:hover { background: var(--blue-dark); }
.shopify-button { min-height: 36px; padding: 0 18px; color: white; background: var(--green); border-radius: 18px; font-weight: 700; }
button, .outline-link, .product-strip a, .carrier-card, .page-card {
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
button:hover, .outline-link:hover, .product-strip a:hover { transform: translateY(-2px); }
button:active, .outline-link:active { transform: translateY(1px) scale(.98); }
.blue-button:hover, .shopify-button:hover, .orange-track:hover { box-shadow: 0 10px 24px rgba(6, 69, 168, .2); }
.orange-track:hover { filter: brightness(1.04); box-shadow: 0 14px 28px rgba(255, 138, 0, .28); }
.orange-track.is-loading {
  pointer-events: none;
  animation: pulseTrack .8s ease-in-out infinite alternate;
}
@keyframes pulseTrack {
  from { transform: scale(1); filter: brightness(1); }
  to { transform: scale(1.03); filter: brightness(1.12); }
}
.carrier-card:hover, .page-card:hover, .product-strip article:hover {
  transform: translateY(-4px);
  border-color: #9db7e8;
  box-shadow: 0 16px 34px rgba(8, 40, 90, .09);
}

.track-hero {
  max-width: 900px;
  margin: 0 auto;
  padding: 72px 24px 58px;
  text-align: center;
}
.track-title { margin: 0 0 12px; color: var(--blue); font-size: 36px; font-weight: 900; letter-spacing: 1px; }
.track-subtitle { margin: 0 auto 22px; color: #080808; font-size: 16px; font-weight: 700; line-height: 1.5; }
.track-panel { display: grid; grid-template-columns: 1fr 110px; gap: 10px; text-align: left; }
.track-input-wrap {
  min-height: 230px;
  border: 2px solid #bdbdbd;
  border-radius: 7px;
  overflow: hidden;
}
.track-input-wrap label { display: block; padding: 9px 12px 0; color: #9097a0; font-size: 14px; }
.track-input-wrap textarea {
  width: 100%;
  min-height: 190px;
  padding: 12px 32px;
  border: 0;
  resize: vertical;
  outline: none;
  font-size: 14px;
}
.track-side { display: grid; grid-template-rows: 110px 110px; gap: 10px; }
.carrier-select {
  display: grid;
  place-items: center;
  padding: 12px 8px;
  background: white;
  border: 2px solid #bdbdbd;
  border-radius: 7px;
}
.carrier-select strong { font-size: 13px; }
.carrier-select small { color: #4b5563; text-align: center; }
.orange-track {
  display: grid;
  place-items: center;
  color: white;
  background: var(--orange);
  border-radius: 7px;
  font-size: 18px;
  font-weight: 900;
}
.orange-track .ico { width: 40px; height: 40px; }
.tracked-row { grid-column: 1 / 3; display: flex; align-items: center; gap: 12px; margin-top: 4px; font-size: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; background: #e5e7eb; border-radius: 999px; font-size: 12px; }
.chip button { width: 16px; height: 16px; color: white; background: #9ca3af; border-radius: 50%; font-size: 11px; }
.raw-result { grid-column: 1 / 3; min-height: 90px; margin-top: 12px; padding: 14px; border: 1px solid #777; white-space: pre-wrap; font-size: 14px; }

.stats-slope { margin-top: 10px; padding: 56px 24px 30px; background: linear-gradient(176deg, transparent 0 22%, #f5f5f5 23% 100%); }
.stat-row { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat-row div, .carrier-card, .page-card, .product-strip article { padding: 20px; background: white; border: 1px solid #dbe3df; border-radius: 8px; }
.stat-row strong { display: block; font-size: 32px; }
.stat-row span, .page-card p, .product-strip p { color: var(--muted); }

.section, .site-footer { max-width: 1120px; margin: 0 auto; padding: 70px 24px; }
.eyebrow { margin: 0 0 10px; color: var(--blue); font-size: 13px; font-weight: 800; }
h1, h2, h3 { margin: 0 0 12px; }
h1 { color: var(--blue); font-size: 42px; }
h2 { font-size: 34px; }
.center-actions { text-align: center; margin-top: 24px; }
.outline-link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 20px; border: 1px solid var(--blue); border-radius: 20px; color: var(--blue); font-weight: 700; }

.carrier-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 24px; }
.carrier-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.carrier-card strong { font-size: 16px; }
.carrier-card span { display: block; color: var(--muted); font-size: 12px; }
.carrier-card button { color: var(--blue); background: #eef3ff; padding: 8px 12px; border-radius: 5px; font-weight: 700; }

.product-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.product-strip a { color: var(--blue); font-weight: 700; }
.product-strip article { position: relative; overflow: hidden; }
.product-strip article::after {
  content: "";
  position: absolute;
  inset: auto -20% -45% 45%;
  height: 120px;
  background: rgba(6, 69, 168, .06);
  transform: rotate(-12deg);
}
.product-icon, .mini-icon {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: #eef3ff;
}
.product-icon::before, .mini-icon::before, .ico::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background: var(--blue);
  mask: var(--mask) center / contain no-repeat;
}
.shop { --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 7h12l1 13H5L6 7zm3 0a3 3 0 0 1 6 0h-2a1 1 0 0 0-2 0H9z'/%3E%3C/svg%3E"); }
.api { --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 7 3 12l5 5 1.4-1.4L5.8 12l3.6-3.6L8 7zm8 0-1.4 1.4 3.6 3.6-3.6 3.6L16 17l5-5-5-5zM11.5 19l-2-1 3-13 2 1-3 13z'/%3E%3C/svg%3E"); }
.app { --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm3 17h4v-2h-4v2z'/%3E%3C/svg%3E"); }
.accuracy { --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 2 7l10 5 10-5-10-5zm0 7.8L6.5 7 12 4.2 17.5 7 12 9.8zM4 10v7l8 5 8-5v-7l-8 5-8-5z'/%3E%3C/svg%3E"); }
.phone { --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 2h8a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm2 17h4v-2h-4v2z'/%3E%3C/svg%3E"); }
.world { --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm7.5 9h-3.1a15 15 0 0 0-1-5 8 8 0 0 1 4.1 5zM12 4c.8 1 1.6 3 1.9 7h-3.8C10.4 7 11.2 5 12 4zm-3.4 2a15 15 0 0 0-1 5H4.5a8 8 0 0 1 4.1-5zM4.5 13h3.1a15 15 0 0 0 1 5 8 8 0 0 1-4.1-5zm7.5 7c-.8-1-1.6-3-1.9-7h3.8c-.3 4-1.1 6-1.9 7zm3.4-2a15 15 0 0 0 1-5h3.1a8 8 0 0 1-4.1 5z'/%3E%3C/svg%3E"); }
.support { --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11a8 8 0 0 1 16 0v6h-4v-6h2a6 6 0 0 0-12 0h2v6H4v-6zm8 9h3v2h-3a5 5 0 0 1-5-5h2a3 3 0 0 0 3 3z'/%3E%3C/svg%3E"); }
.uptime { --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2v9h8a9 9 0 1 1-8-9zm2 2.3V9h4.7A7 7 0 0 0 15 4.3z'/%3E%3C/svg%3E"); }
.shield { --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.7 8 11 4.6-1.3 8-6 8-11V5l-8-3zm-1 14-4-4 1.4-1.4L11 13.2l4.6-4.6L17 10l-6 6z'/%3E%3C/svg%3E"); }
.ico { display: inline-grid; place-items: center; width: 18px; height: 18px; vertical-align: middle; }
.ico::before { width: 100%; height: 100%; background: currentColor; }
.globe { --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 2c.9 1 1.7 3.1 1.9 7h-3.8C10.3 7.1 11.1 5 12 4zM4.5 13h3.6c.1 2 .5 3.8 1 5.1A8 8 0 0 1 4.5 13zm3.6-2H4.5a8 8 0 0 1 4.6-5.1c-.5 1.3-.9 3.1-1 5.1zM12 20c-.9-1-1.7-3.1-1.9-7h3.8c-.2 3.9-1 6-1.9 7zm2.9-1.9c.5-1.3.9-3.1 1-5.1h3.6a8 8 0 0 1-4.6 5.1zM15.9 11c-.1-2-.5-3.8-1-5.1a8 8 0 0 1 4.6 5.1h-3.6z'/%3E%3C/svg%3E"); }
.truck { color: #111; --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h12v10h2.2l2-3H21v5h-2a2 2 0 0 1-4 0H9a2 2 0 0 1-4 0H3V5zm14 2v3h3l-2-3h-1z'/%3E%3C/svg%3E"); }
.search { color: white; --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 3a7 7 0 0 1 5.6 11.2l4.1 4.1-1.4 1.4-4.1-4.1A7 7 0 1 1 10 3zm0 2a5 5 0 1 0 0 10 5 5 0 0 0 0-10z'/%3E%3C/svg%3E"); }
.chat { --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v12H7l-3 3V4zm4 5v2h8V9H8z'/%3E%3C/svg%3E"); }
.share { --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 16.1c-.8 0-1.5.3-2 .9L8.9 13a3 3 0 0 0 0-2L16 7a3 3 0 1 0-1-1.7L7.9 9.4a3 3 0 1 0 0 5.2l7.1 4.1A3 3 0 1 0 18 16.1z'/%3E%3C/svg%3E"); }
.top { --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4 5 11h4v9h6v-9h4l-7-7z'/%3E%3C/svg%3E"); }
.icon-button { display: inline-flex; align-items: center; gap: 5px; }
.feature-showcase { background: linear-gradient(180deg, #fff, #f7f9ff); max-width: none; }
.feature-showcase > * { max-width: 1120px; margin-left: auto; margin-right: auto; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 24px; }
.feature-grid article { padding: 24px; background: white; border: 1px solid #dbe3df; border-radius: 8px; }
.metric-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; text-align: center; }
.metric-band article { padding: 28px 14px; background: #0645a8; color: white; border-radius: 8px; }
.metric-band strong { display: block; font-size: 30px; text-transform: uppercase; }
.metric-band span { opacity: .88; }
.tracking-directory { display: grid; grid-template-columns: 1fr; gap: 24px; }
.tracking-directory > div { padding: 26px; border: 1px solid #dbe3df; border-radius: 8px; background: white; }
.pill-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.pill-list a, .pill-list button { padding: 10px 13px; color: var(--blue); background: #eef3ff; border-radius: 999px; font-weight: 700; }
.pill-list a:hover, .pill-list button:hover { background: #dce8ff; }
.home-footer {
  margin-top: 18px;
  background: #fff;
  border-top: 1px solid #edf0f5;
}
.footer-cta {
  min-height: 300px;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 18px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 58px 24px 70px;
  text-align: center;
}
.footer-cta h2 {
  margin: 0;
  color: #444;
  font-size: 48px;
  line-height: 1.05;
  font-weight: 900;
}
.footer-cta p {
  margin: 0;
  color: #333;
  font-size: 22px;
}
.footer-signup {
  min-height: 43px;
  margin-top: 14px;
  padding: 0 22px;
  border-radius: 6px;
  font-size: 18px;
}
.footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr .95fr;
  gap: 68px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 34px 30px 46px;
  border-top: 1px solid #dcdfe6;
}
.footer-column,
.footer-about {
  display: grid;
  align-content: start;
  gap: 16px;
}
.footer-column h3,
.footer-about h3 {
  position: relative;
  margin: 0 0 8px;
  color: var(--blue);
  font-size: 19px;
  line-height: 1;
}
.footer-column h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -22px;
  width: 30px;
  height: 3px;
  background: var(--orange);
}
.footer-column a {
  color: #333;
  font-size: 16px;
}
.footer-column a:hover {
  color: var(--blue);
  transform: translateX(3px);
}
.footer-about h3 {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.footer-about h3 span {
  color: var(--blue);
  font-size: 31px;
  font-weight: 900;
}
.footer-about p {
  max-width: 280px;
  margin: 0;
  color: #333;
  font-size: 16px;
  line-height: 1.5;
}
.social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  max-width: 250px;
}
.social {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: white;
  border-radius: 7px;
  font-size: 15px;
  font-weight: 900;
  transition: transform .18s ease, filter .18s ease;
}
.social:hover {
  transform: translateY(-3px);
  filter: brightness(1.08);
}
.wechat { background: #21c064; }
.weibo { background: #e91b35; }
.facebook { background: #35569b; }
.twitter { background: #1d9bf0; }
.linkedin { background: #0a66c2; }
.youtube { background: #ff0033; }
.footer-copy {
  min-height: 66px;
  display: none;
  place-items: center;
  padding: 18px 24px;
  color: #9aa3b1;
  border-top: 1px solid #dcdfe6;
  text-align: center;
  font-size: 14px;
}
.footer-top {
  display: grid;
  place-items: center;
  width: 60px;
  height: 30px;
  margin: 0 auto;
  color: #64748b;
  background: white;
  border: 1px solid #cbd5e1;
  border-radius: 6px 6px 0 0;
}
.page-hero { max-width: 1120px; margin: 0 auto; padding: 70px 24px 32px; }
.product-hero {
  padding-top: 82px;
}
.product-hero h1 {
  max-width: 780px;
}
.product-hero p:not(.eyebrow) {
  max-width: 760px;
  color: #223047;
  font-size: 18px;
  line-height: 1.55;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.solution-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  max-width: 1120px;
  margin: 18px auto 20px;
  padding: 0 24px;
}
.solution-band div {
  display: grid;
  gap: 8px;
  min-height: 112px;
  align-content: center;
  padding: 20px;
  color: white;
  background: var(--blue);
}
.solution-band div:first-child {
  border-radius: 8px 0 0 8px;
}
.solution-band div:last-child {
  border-radius: 0 8px 8px 0;
}
.solution-band strong {
  font-size: 28px;
}
.solution-band span {
  opacity: .9;
  line-height: 1.35;
}
.returns-band div {
  background: #1f7a5c;
}
.api-band div {
  background: #111827;
}
.product-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.product-detail-grid article,
.resource-categories article {
  padding: 24px;
  border: 1px solid #dbe3df;
  border-radius: 8px;
  background: white;
}
.product-detail-grid p,
.resource-categories p,
.resource-articles p {
  color: var(--muted);
  line-height: 1.5;
}
.workflow-section {
  padding-top: 20px;
}
.workflow-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 22px;
}
.workflow-steps span {
  position: relative;
  min-height: 62px;
  display: grid;
  place-items: center;
  padding: 12px;
  color: var(--blue);
  background: #eef3ff;
  border: 1px solid #dce8ff;
  border-radius: 8px;
  text-align: center;
  font-weight: 700;
}
.api-code-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: center;
}
.api-code-panel pre {
  margin: 0;
  padding: 24px;
  color: #dbeafe;
  background: #0f172a;
  border-radius: 8px;
  overflow: auto;
  line-height: 1.6;
}
.resource-search {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  max-width: 760px;
  margin-top: 24px;
}
.resource-search input {
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: none;
}
.resource-categories {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.resource-categories a {
  color: var(--blue);
  font-weight: 700;
}
.page-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1120px; margin: 0 auto; padding: 24px; }
.search-bar { width: 100%; min-height: 46px; padding: 0 15px; border: 1px solid var(--line); border-radius: 7px; outline: none; }
.alphabet { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.alphabet button { min-width: 34px; height: 32px; color: var(--blue); background: #eef3ff; border-radius: 4px; font-weight: 700; }

.carrier-modal, .modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, .28);
}
.carrier-dialog, .auth-dialog {
  position: relative;
  width: min(760px, 100%);
  max-height: 84vh;
  overflow: auto;
  padding: 26px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0,0,0,.22);
}
.auth-dialog { width: min(430px, 100%); }
.close-button { position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; border-radius: 5px; background: #eef1f4; font-weight: 900; }
.carrier-dialog input, .auth-dialog input { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; }
.carrier-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.carrier-list button { padding: 12px; text-align: left; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 6px; }
.auth-dialog form { display: grid; gap: 14px; }
.auth-dialog label { display: grid; gap: 7px; color: var(--muted); font-weight: 700; }
.form-message { color: var(--blue); font-weight: 700; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 50; padding: 14px 18px; color: white; background: #111827; border-radius: 7px; font-weight: 700; }
.floating-tools { position: fixed; right: 14px; bottom: 58px; display: grid; gap: 10px; z-index: 25; }
.floating-tools button { width: 36px; height: 36px; color: white; background: var(--blue); box-shadow: 0 8px 18px rgba(6,69,168,.25); }
.floating-tools button:hover { background: var(--orange); }

.result-page { background: #fafafa; }
.result-header { border-bottom: 1px solid #e5e7eb; }
.nav-preview {
  position: fixed;
  top: 116px;
  left: 164px;
  z-index: 35;
  width: min(560px, calc(100vw - 220px));
  padding: 18px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 20px 44px rgba(0,0,0,.13);
}
.preview-card {
  display: grid;
  gap: 0;
}
.preview-card .preview-menu {
  display: grid;
  gap: 12px;
  padding: 6px 0 0;
}
.preview-title,
.preview-card a {
  color: #0019a8;
  font-weight: 800;
}
.preview-card p { color: var(--muted); line-height: 1.45; }
.preview-link-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 14px;
  margin: 4px 0 2px;
}
.preview-link {
  min-height: 34px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: #223047 !important;
  background: #f7f9fc;
  border: 1px solid #edf1f7;
  border-radius: 6px;
  font-weight: 600 !important;
}
.preview-link:hover {
  color: var(--blue) !important;
  background: #eef3ff;
  border-color: #dce8ff;
}
.preview-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 14px;
}
.preview-actions .outline-link,
.preview-actions .blue-button {
  justify-content: center;
  border-radius: 7px;
  min-height: 40px;
}
.preview-actions .blue-button {
  display: inline-flex;
  align-items: center;
}
.tracking-layout {
  display: grid;
  grid-template-columns: 1fr 316px;
  min-height: calc(100vh - 122px);
}
.tracking-main {
  position: relative;
  padding: 14px 16px;
  border-right: 1px solid #e5e7eb;
}
.status-tabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 7px;
  padding-right: 180px;
  overflow-x: auto;
}
.status-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 9px;
  color: #4b5563;
  background: transparent;
  border-radius: 6px;
}
.tab-ico, .tool-ico {
  display: inline-block;
  width: 18px;
  height: 18px;
  color: currentColor;
}
.tab-ico::before, .tool-ico::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  mask: var(--mask) center / contain no-repeat;
}
.hourglass { color: #71717a; --mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 2h10v6l-4 4 4 4v6H7v-6l4-4-4-4V2zm2 2v3.2l3 3 3-3V4H9zm3 9.8-3 3V20h6v-3.2l-3-3z'/%3E%3C/svg%3E"); }
.van { color: #19a7e8; --mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6h12v9h2l2-3h2v5h-2a2 2 0 0 1-4 0H9a2 2 0 0 1-4 0H3V6zm13 2v3h2.5L17 8h-1z'/%3E%3C/svg%3E"); }
.plane { color: #2d9bf0; --mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 16v-2L13 9V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z'/%3E%3C/svg%3E"); }
.flag { color: #1f4b88; --mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 3h12l-1 4 1 4H7v10H5V3z'/%3E%3C/svg%3E"); }
.box { color: #2c64dd; --mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4h16v16H4V4zm3 3v10h10V7H7z'/%3E%3C/svg%3E"); }
.sad { color: #ff3333; --mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM8 9h2v2H8V9zm6 0h2v2h-2V9zm-6 8a4 4 0 0 1 8 0h-2a2 2 0 0 0-4 0H8z'/%3E%3C/svg%3E"); }
.check { color: #28a745; --mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m9 16.2-3.5-3.5L4 14.2 9 19 20 8l-1.5-1.5L9 16.2z'/%3E%3C/svg%3E"); }
.warn { color: #ff7a00; --mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2 1 21h22L12 2zm1 16h-2v-2h2v2zm0-4h-2V8h2v6z'/%3E%3C/svg%3E"); }
.return { color: #df2626; --mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5a7 7 0 1 1-6.3 10H8a5 5 0 1 0 4-8H7.8l2.6 2.6L9 11 4 6l5-5 1.4 1.4L7.8 5H12z'/%3E%3C/svg%3E"); }
.copy { --mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 7h11v14H8V7zm-3 9H3V3h12v2H5v11z'/%3E%3C/svg%3E"); }
.list { --mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 5h14v2H6V5zm0 6h14v2H6v-2zm0 6h14v2H6v-2zM3 5h2v2H3V5zm0 6h2v2H3v-2zm0 6h2v2H3v-2z'/%3E%3C/svg%3E"); }
.refresh { --mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.7 6.3A8 8 0 1 0 20 12h-2a6 6 0 1 1-1.8-4.3L13 11h8V3l-3.3 3.3z'/%3E%3C/svg%3E"); }
.chevron { --mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m7 10 5 5 5-5H7z'/%3E%3C/svg%3E"); }
.trash { --mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 7h12l-1 14H7L6 7zm3-4h6l1 2h4v2H4V5h4l1-2z'/%3E%3C/svg%3E"); }
.filter { --mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 5h18l-7 8v6l-4 2v-8L3 5z'/%3E%3C/svg%3E"); }
.status-tabs button.active {
  color: var(--blue);
  background: white;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.toolbar {
  position: absolute;
  right: 16px;
  top: 16px;
  display: flex;
  gap: 8px;
  background: #fafafa;
}
.toolbar button {
  width: 36px;
  height: 36px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}
.result-list {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}
.tracking-card {
  display: grid;
  grid-template-columns: 48px 280px 1fr;
  align-items: start;
  gap: 12px;
  min-height: 66px;
  padding: 12px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}
.tracking-card .state-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: white;
  background: #8b8d93;
  border-radius: 8px;
  font-size: 22px;
}
.state-icon .tab-ico { color: white; width: 26px; height: 26px; }
.tracking-card strong { display: block; }
.tracking-card .status-text { color: #111; }
.tracking-card .message { color: red; }
.tracking-card.found .state-icon { background: var(--blue); }
.tracking-card.found .message { color: #374151; }
.tracking-card.is-collapsed .tracking-detail { display: none; }
.tracking-card.is-collapsed { align-items: center; }
.result-identity strong {
  margin-top: 2px;
}
.result-route {
  display: grid;
  grid-template-columns: 230px 1fr 22px;
  gap: 22px;
  align-items: start;
  color: #111;
}
.route-pair {
  display: grid;
  grid-template-columns: 1fr 28px 1fr;
  gap: 12px;
  align-items: start;
  text-align: center;
}
.route-pair small {
  display: block;
  color: #0019cc;
  font-size: 12px;
  margin-top: 3px;
}
.route-pair b {
  color: #999;
  font-weight: 400;
}
.result-route time {
  display: block;
  margin-bottom: 4px;
}
.result-route strong {
  display: block;
  font-weight: 400;
  line-height: 1.25;
}
.expand-link {
  color: #145cff;
  background: transparent;
  font-size: 18px;
  width: 46px;
  height: 34px;
  justify-self: end;
  border: 2px solid transparent;
}
.expand-link:hover { border-color: #ff4b5f; background: #f8fbff; }
.tracking-detail {
  grid-column: 1 / 4;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid #edf0f3;
}
.progress-track {
  position: relative;
  height: 28px;
  margin: 8px 0 8px;
}
.progress-track::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 13px;
  height: 10px;
  background: #e5e7eb;
  border-radius: 999px;
}
.progress-fill {
  position: absolute;
  left: 12px;
  top: 13px;
  width: 50%;
  height: 10px;
  background: #2f9cf4;
  border-radius: 999px;
}
.progress-dot {
  position: absolute;
  top: 5px;
  width: 22px;
  height: 22px;
  background: white;
  border: 2px solid #d1d5db;
  border-radius: 50%;
}
.progress-dot:nth-child(2) { left: 0; border-color: #2f9cf4; }
.progress-dot:nth-child(3) { left: 33%; background: #2f9cf4; border-color: #2f9cf4; }
.progress-dot:nth-child(3)::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: white;
  mask: var(--mask) center / contain no-repeat;
}
.progress-dot:nth-child(3) { --mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 16v-2L13 9V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z'/%3E%3C/svg%3E"); }
.progress-dot:nth-child(4) { left: 66%; }
.progress-dot:nth-child(5) { right: 0; }
.detail-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 16px;
}
.detail-actions h3 {
  margin-right: 4px;
}
.detail-actions button {
  padding: 0;
  color: #145cff;
  background: transparent;
}
.translate-box {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #333;
}
.translate-box select {
  min-height: 32px;
  min-width: 130px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 0 8px;
}
.switch {
  width: 42px;
  height: 24px;
  background: #d1d5db;
  border-radius: 999px;
}
.switch::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  margin: 3px;
  background: white;
  border-radius: 50%;
}
.provider-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.provider-row p {
  margin: 0;
  color: var(--muted);
}
.provider-logo {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: white;
  background: #079be4;
  border-radius: 4px;
  font-weight: 900;
}
.tracking-detail h3 {
  margin: 0 0 10px;
  font-size: 20px;
}
.tracking-detail > p {
  margin: 0 0 18px;
  color: var(--muted);
}
.sync-time {
  margin-left: 12px;
  color: var(--muted);
}
.event-list {
  display: grid;
  gap: 10px;
  margin-left: 10px;
  padding-left: 0;
  border-left: 0;
}
.event-row {
  display: grid;
  grid-template-columns: 30px 140px 1fr;
  align-items: center;
  gap: 10px;
}
.event-row time {
  font-weight: 700;
}
.event-row strong {
  font-weight: 700;
}
.event-dot {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: white;
  background: #2f9cf4;
  border-radius: 50%;
}
.event-dot .tab-ico {
  width: 13px;
  height: 13px;
}
.faq-button {
  padding: 2px 8px;
  background: #f3f4f6;
  border-radius: 4px;
  color: #000;
}

.brand-tab strong {
  color: #0645a8;
  font-weight: 900;
}
.brand-tab strong::first-letter {
  color: #ff8a00;
}
.toolbar button {
  color: #111827;
}
.tracking-card .state-icon {
  border-radius: 7px;
  font-size: 0;
}
.expand-link {
  display: grid;
  place-items: center;
}
.expand-link .tool-ico {
  width: 16px;
  height: 16px;
  transition: transform .18s ease;
}
.tracking-card.is-collapsed .expand-link .tool-ico {
  transform: rotate(180deg);
}
.provider-logo {
  width: 39px;
  height: 39px;
}
.provider-logo .chain-mark {
  position: relative;
  width: 20px;
  height: 12px;
}
.provider-logo .chain-mark::before,
.provider-logo .chain-mark::after {
  content: "";
  position: absolute;
  top: 2px;
  width: 10px;
  height: 7px;
  border: 2px solid white;
  border-radius: 8px;
}
.provider-logo .chain-mark::before { left: 0; }
.provider-logo .chain-mark::after { right: 0; }
.provider-logo small {
  display: block;
  margin-top: -8px;
  font-size: 4px;
  line-height: 1;
}
.event-dot .tab-ico {
  width: 12px;
  height: 12px;
}

.help-page { background: #fff; color: #1f2937; }
.help-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  padding: 0 12.3vw;
  background: white;
  border-bottom: 1px solid #e5e7eb;
}
.help-brand-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
}
.help-logo {
  position: relative;
  display: grid;
  gap: 0;
  line-height: .82;
}
.help-logo small {
  display: block;
  margin-top: 4px;
  color: #111;
  font-size: 8px;
  letter-spacing: 0;
}
.help-divider {
  width: 1px;
  height: 44px;
  background: #d1d5db;
}
.help-brand {
  color: #1f2937;
  font-size: 28px;
  font-weight: 400;
}
.help-header nav { display: flex; align-items: center; gap: 26px; color: #4b5563; }
.help-header nav a { color: #145cff; }
.help-orange {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 22px;
  color: white !important;
  background: var(--orange);
  border-radius: 999px;
  font-weight: 800;
}
.chev { margin-left: 6px; }
.help-hero {
  position: relative;
  overflow: hidden;
  padding: 130px 24px;
  background: #0645a8;
}
.help-hero-inner {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.help-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  margin: 0 auto;
  padding: 0 18px;
  background: white;
  border: 0;
  border-radius: 0;
  color: #6b7280;
  box-shadow: 0 10px 30px rgba(30, 64, 175, .08);
}
.help-search input {
  flex: 1;
  border: 0;
  outline: none;
  font-size: 16px;
}
.help-search-icon {
  width: 18px;
  height: 18px;
  border: 2px solid #c7d2e3;
  border-radius: 50%;
  position: relative;
}
.help-search-icon::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 2px;
  right: -6px;
  bottom: -3px;
  background: #c7d2e3;
  transform: rotate(45deg);
}
.help-bg-icons {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .22;
}
.hero-shape {
  position: absolute;
  color: white;
  display: block;
}
.hero-shape::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  mask: var(--mask) center / contain no-repeat;
}
.truck-shape { --mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 20h70v35h10l8-14h12v20h-8a8 8 0 0 1-16 0H43a8 8 0 0 1-16 0H12V20z'/%3E%3C/svg%3E"); width: 170px; height: 110px; left: 19%; top: 42%; }
.magnet-shape { --mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23 10a28 28 0 1 1 34 44l-9-13a12 12 0 1 0-16-16L23 10zM12 23l12-8 10 14-12 8-10-14z'/%3E%3C/svg%3E"); width: 92px; height: 92px; left: 15%; top: 12%; }
.bell-shape { --mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 8c-14 0-22 10-22 24v14L10 58h60l-8-12V32C62 18 54 8 40 8zm-8 56h16a8 8 0 0 1-16 0z'/%3E%3C/svg%3E"); width: 88px; height: 88px; left: 51%; top: 39%; }
.globe-shape { --mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 5a35 35 0 1 0 0 70 35 35 0 0 0 0-70zm0 7c4 6 7 14 8 25H32c1-11 4-19 8-25zM12 43h13c1 9 3 17 7 23a28 28 0 0 1-20-23zm13-6H12a28 28 0 0 1 20-23c-4 6-6 14-7 23zm15 31c-4-6-7-14-8-25h16c-1 11-4 19-8 25zm8-2c4-6 6-14 7-23h13a28 28 0 0 1-20 23zm7-29c-1-9-3-17-7-23a28 28 0 0 1 20 23H55z'/%3E%3C/svg%3E"); width: 96px; height: 96px; right: 22%; top: 32%; }
.tag-shape { --mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 12h32l32 32-28 28L12 40V12zm22 10a8 8 0 1 0 0 16 8 8 0 0 0 0-16z'/%3E%3C/svg%3E"); width: 76px; height: 76px; right: 3%; top: 20%; }
.faq-section,
.help-topics {
  max-width: 1160px;
  margin: 0 auto;
  padding: 42px 24px;
}
.faq-section h1,
.help-topics h1 {
  margin-bottom: 22px;
  color: #1f2937;
  font-size: 30px;
  text-align: center;
}
.faq-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 60px;
}
.faq-list a {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid #ddd;
  color: #145cff;
  line-height: 1.35;
}
.help-topics {
  padding-top: 24px;
}
.help-topics > p {
  margin: -8px 0 28px;
  color: var(--muted);
  text-align: center;
}
.topic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 20px;
}
.topic-grid article {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 330px;
  padding: 30px 28px 62px;
  background: white;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  box-shadow: none;
  text-align: center;
}
.topic-grid article:hover {
  border-color: #b8c9e8;
  box-shadow: 0 10px 22px rgba(6, 69, 168, .08);
}
.topic-grid h2 {
  margin: 14px 0 16px;
  font-size: 18px;
}
.topic-grid h2 a {
  color: #0645a8;
  font-weight: 700;
}
.topic-grid article > div {
  display: grid;
  gap: 10px;
}
.topic-grid a { color: #1f2937; }
.topic-line {
  display: block;
  width: 48px;
  height: 2px;
  margin-bottom: 18px;
  background: #bbb;
}
.see-more {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  height: 40px;
  color: #5f6875 !important;
  background: #dfdfdf;
  font-size: 13px;
}
.see-more:hover {
  background: #d5d5d5;
}
.topic-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 62px;
  height: 62px;
  color: #1d78ff;
}
.topic-icon::before {
  content: "";
  display: block;
  width: 58px;
  height: 58px;
  background: var(--topic-blue, #1d78ff);
  mask: var(--mask) center / contain no-repeat;
}
.news-icon::before {
  width: 52px;
  height: 46px;
  background: linear-gradient(135deg, #ffd439 0 45%, #fff 45% 100%);
  border: 4px solid #1d78ff;
  border-radius: 4px;
  mask: none;
}
.news-icon::after {
  content: "NEWS";
  position: absolute;
  top: 5px;
  left: 13px;
  padding: 0 2px;
  color: white;
  background: #1d78ff;
  font-size: 15px;
  font-weight: 900;
  line-height: 18px;
}
.shopify-icon { --topic-blue: #1976ff; --mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M27 8a13 13 0 0 1 13 13h7l5 31-38 6-5-37h8A13 13 0 0 1 27 8zm0 8a5 5 0 0 0-5 5h10a5 5 0 0 0-5-5zm19 40a18 18 0 1 0 0-36 18 18 0 0 0 0 36zm10 2-8-8 4-4 8 8-4 4z'/%3E%3C/svg%3E"); }
.api-topic-icon::before,
.website-icon::before {
  width: 50px;
  height: 38px;
  background: white;
  border: 5px solid #1d78ff;
  border-top-color: #8395a9;
  border-radius: 4px;
  mask: none;
}
.api-topic-icon::after,
.website-icon::after,
.common-icon::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 5px;
  background: #1d78ff;
  box-shadow: 0 10px 0 #1d78ff;
}
.common-icon { --mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 10h38v44H12V10zm8 8v28h22V18H20zm4 5h14v5H24v-5zm0 9h14v5H24v-5zm0 9h10v5H24v-5zM6 18h10v28H6V18z'/%3E%3C/svg%3E"); }
.app-topic-icon { --mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 4h20a4 4 0 0 1 4 4v48a4 4 0 0 1-4 4H22a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4zm5 48h10v-4H27v4z'/%3E%3C/svg%3E"); }
.buyer-icon { --mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 22a12 12 0 1 1 24 0 12 12 0 0 1-24 0zm-8 34c2-13 11-20 20-20s18 7 20 20H12z'/%3E%3C/svg%3E"); }
.seller-icon { --mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 24 16 8h32l6 16v32H10V24zm8 8h28v18H18V32zm2-18-3 8h30l-3-8H20z'/%3E%3C/svg%3E"); }
.carrier-topic-icon { --mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 18h34v24h5l5-10h8v16h-6a6 6 0 0 1-12 0H25a6 6 0 0 1-12 0H8V18z'/%3E%3C/svg%3E"); }
.deals-icon { --topic-blue: #f44336; --mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 14h44v14a8 8 0 0 0 0 16v6H10v-6a8 8 0 0 0 0-16V14zm15 10h14v6H25v-6zm0 12h20v6H25v-6z'/%3E%3C/svg%3E"); }
.bbl-icon { --topic-blue: #f44336; --mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 12h40v40H12V12zm8 8v24h24V20H20zm6 6h12v5H26v-5zm0 10h12v5H26v-5z'/%3E%3C/svg%3E"); }
.freight-icon { --topic-blue: #ff9800; --mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 34h52v14H6V34zm8-16h36v14H14V18zm6 32a6 6 0 1 0 0 12 6 6 0 0 0 0-12zm24 0a6 6 0 1 0 0 12 6 6 0 0 0 0-12z'/%3E%3C/svg%3E"); }

.pricing-page {
  background: #fff;
}
.pricing-hero {
  padding: 88px 24px 38px;
  text-align: center;
}
.pricing-hero h1 {
  margin: 0 0 16px;
  color: #111;
  font-size: 30px;
}
.pricing-hero p {
  margin: 0 0 20px;
  color: #000;
}
.pricing-tabs {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px;
  border: 1px solid #cfd5df;
  border-radius: 20px;
  background: white;
}
.pricing-tabs button {
  min-width: 116px;
  min-height: 28px;
  padding: 0 14px;
  border-radius: 16px;
  background: transparent;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}
.pricing-tabs button.active {
  color: white;
  background: var(--blue);
  box-shadow: 0 8px 18px rgba(6, 69, 168, .18);
}
.pricing-tabs button:not(.active):hover {
  color: var(--blue);
  background: #f2f6ff;
}
.plans-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(230px, 1fr));
  gap: 16px;
  max-width: 1392px;
  margin: 0 auto;
  padding: 30px 6vw 42px;
}
.plans-grid.plans-3 {
  grid-template-columns: repeat(3, minmax(280px, 1fr));
}
.plans-grid.plans-4 {
  grid-template-columns: repeat(4, minmax(230px, 1fr));
}
.plan-card {
  position: relative;
  min-height: 560px;
  padding: 28px 20px 24px;
  border: 1px solid #cfd5df;
  border-radius: 14px;
  background: white;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.plan-card:hover {
  transform: translateY(-4px);
  border-color: #9bb6e6;
  box-shadow: 0 18px 34px rgba(15, 23, 42, .1);
}
.plan-card h2 {
  margin: 0 0 8px;
  color: #000;
  font-size: 28px;
}
.plan-card > p {
  min-height: 44px;
  margin: 0 0 24px;
  color: #475569;
}
.price {
  margin: 14px 0 8px;
}
.price strong {
  font-size: 17px;
}
.price span {
  color: #334155;
}
.api-price {
  display: grid;
  gap: 10px;
  min-height: 138px;
  align-content: end;
  margin: 12px 0 22px;
}
.api-price span,
.api-price small {
  color: #64748b;
  font-size: 14px;
}
.api-price strong {
  color: #000;
  font-size: 34px;
  line-height: 1;
}
.shipments-text,
.muted-small {
  min-height: auto !important;
  margin: 0 0 14px !important;
  color: #000 !important;
  font-size: 14px;
}
.muted-small {
  color: #475569 !important;
  font-size: 12px;
}
.billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 12px;
  color: #475569;
  font-size: 14px;
  transition: color .18s ease;
}
.billing-toggle:hover {
  color: var(--blue);
}
.mini-switch {
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: #cbd5e1;
  position: relative;
  transition: background .18s ease, box-shadow .18s ease;
}
.mini-switch::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  transition: transform .18s ease;
}
.billing-toggle.active .mini-switch {
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(6, 69, 168, .1);
}
.billing-toggle.active .mini-switch::before {
  transform: translateX(16px);
}
.shipment-select {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  margin: 28px 0 12px;
  color: #475569;
  font-size: 14px;
}
.shipment-select select {
  min-height: 42px;
  padding: 0 38px 0 12px;
  border: 1px solid #e2e8f0;
  border-radius: 11px;
  background:
    linear-gradient(45deg, transparent 50%, #64748b 50%) calc(100% - 19px) 18px / 6px 6px no-repeat,
    linear-gradient(135deg, #64748b 50%, transparent 50%) calc(100% - 14px) 18px / 6px 6px no-repeat,
    white;
  font-weight: 700;
  appearance: none;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.shipment-select select:focus {
  border-color: var(--blue);
  outline: 3px solid rgba(6, 69, 168, .12);
}
.plan-button {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 40px;
  margin: 14px 0 18px;
  border-radius: 22px;
  font-weight: 500;
  transition: transform .18s ease, box-shadow .18s ease, color .18s ease, background .18s ease;
}
.plan-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 20px rgba(255, 122, 0, .22);
}
.outline-plan {
  color: #ff7a00;
  background: white;
  border: 1px solid #ff7a00;
}
.outline-plan:hover {
  color: white;
  background: #ff8700;
}
.filled-plan {
  color: white;
  background: #ff8700;
}
.filled-plan:hover {
  background: #f07700;
}
.plan-card h3 {
  margin: 0 0 12px;
  color: #334155;
  font-size: 14px;
  font-weight: 500;
}
.plan-card ul,
.custom-plan ul {
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 14px;
}
.plan-card li,
.custom-plan li {
  position: relative;
  padding-left: 24px;
}
.plan-card li::before,
.custom-plan li::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  background: var(--blue);
  border-radius: 50%;
}
.plan-card li::after,
.custom-plan li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 3px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.popular-card {
  border: 2px solid #ff8700;
  padding-top: 58px;
  box-shadow: 0 16px 36px rgba(255, 135, 0, .14);
}
.popular-ribbon {
  position: absolute;
  top: 0;
  left: -2px;
  right: -2px;
  height: 30px;
  display: grid;
  place-items: center;
  color: white;
  background: #ff8700;
  border-radius: 12px 12px 0 0;
  font-size: 14px;
}
.custom-plan {
  display: grid;
  grid-template-columns: 1fr 210px 1.6fr;
  gap: 24px;
  align-items: center;
  max-width: 1392px;
  margin: 0 auto 48px;
  padding: 26px 6vw;
  border-top: 1px solid #edf2f7;
  border-bottom: 1px solid #edf2f7;
}
.custom-plan .plan-button {
  margin: 0;
}
.comparison-section {
  max-width: 1392px;
  margin: 0 auto;
  padding: 10px 6vw 80px;
}
.comparison-section h2 {
  text-align: center;
  margin-bottom: 24px;
}
.comparison-table {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}
.comparison-table > div {
  display: grid;
  grid-template-columns: 2.2fr repeat(var(--comparison-cols, 5), 1fr);
  gap: 0;
  border-bottom: 1px solid #e2e8f0;
}
.comparison-table > div:last-child {
  border-bottom: 0;
}
.comparison-table span {
  padding: 14px;
  border-right: 1px solid #e2e8f0;
}
.comparison-plan-head span:not(:first-child) {
  display: grid;
  gap: 14px;
  justify-items: center;
  align-content: center;
  min-height: 92px;
}
.comparison-plan-head button {
  min-height: 34px;
  min-width: 126px;
  padding: 0 18px;
  border-radius: 20px;
}
.comparison-group {
  background: #f5f7fb;
  font-weight: 800;
}
.comparison-group span:first-child {
  grid-column: 1 / -1;
}
.comparison-group span:not(:first-child) {
  display: none;
}
.comparison-table .yes::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: var(--blue);
  border-radius: 50%;
  vertical-align: middle;
  mask: none;
}
.comparison-table .yes::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 8px;
  margin-left: -11px;
  margin-right: 7px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.comparison-table .dash::before {
  content: "--";
  color: #8ea0b8;
}
.comparison-table span:last-child {
  border-right: 0;
}
.comparison-head {
  background: #f8fafc;
  font-weight: 700;
}
.show-features {
  display: block;
  min-height: 42px;
  margin: 18px auto 0;
  padding: 0 28px;
  color: var(--blue);
  background: #eef3ff;
  border-radius: 22px;
  font-weight: 700;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.show-features:hover {
  transform: translateY(-2px);
  background: #e1ebff;
  box-shadow: 0 12px 22px rgba(6, 69, 168, .12);
}
.help-footer {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 22px;
  padding: 28px;
  color: var(--muted);
  background: #f8fafc;
  border-top: 1px solid #e5e7eb;
}
.article-search-band {
  padding: 34px 24px;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
}
.article-search-band .help-search {
  max-width: 760px;
  border: 1px solid #dbe3ef;
  box-shadow: none;
}
.article-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 54px;
  max-width: 1060px;
  margin: 0 auto;
  padding: 56px 24px 90px;
}
.article-sidebar h3 {
  margin: 0 0 18px;
  font-size: 15px;
}
.article-sidebar a {
  display: block;
  padding: 9px 0;
  color: #4b5563;
  line-height: 1.35;
}
.article-sidebar a.active,
.article-sidebar a:hover {
  color: #145cff;
}
.article-content h1 {
  color: #1f2937;
  font-size: 34px;
  margin-bottom: 24px;
}
.article-content p {
  color: #333;
  font-size: 16px;
  line-height: 1.72;
}
.article-helpful {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid #e5e7eb;
  color: var(--muted);
}
.article-helpful button {
  min-width: 70px;
  min-height: 34px;
  margin-right: 8px;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 4px;
}
.article-helpful span {
  display: block;
  margin-top: 14px;
}
.return-top {
  display: inline-block;
  margin-top: 28px;
  color: #145cff;
}
.skeleton-card {
  display: block;
  color: var(--muted);
}
.wide-ad {
  position: fixed;
  left: 8vw;
  bottom: 4px;
  width: min(970px, 62vw);
  padding: 18px;
  color: white;
  background: linear-gradient(90deg, #006cf8, #6327ff);
  border: 1px solid #003b95;
  text-align: center;
  font-weight: 800;
  z-index: 5;
}
.tracking-sidebar {
  padding: 16px;
  background: white;
}
.side-input-card {
  padding: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
}
.side-input-card textarea {
  width: 100%;
  min-height: 178px;
  padding: 4px 10px;
  border: 0;
  resize: vertical;
  outline: none;
  font-size: 14px;
}
.side-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.side-actions button {
  min-height: 32px;
  padding: 0 10px;
  color: white;
  background: #52525b;
  border-radius: 4px;
}
#sideCarrier {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.side-track {
  width: 100%;
  min-height: 42px;
  margin: 14px 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.side-track .ico { width: 18px; height: 18px; }
.ad-card {
  display: grid;
  gap: 10px;
  min-height: 250px;
  margin-bottom: 20px;
  padding: 28px;
  border: 1px solid #9ca3af;
  text-align: center;
  place-items: center;
  background: #fff;
}
.ad-card strong { font-size: 20px; }
.ad-card span { color: var(--muted); }
.blue-ad {
  min-height: 98px;
  color: white;
  background: #062a90;
  border-color: #062a90;
  text-align: left;
  place-items: start;
}
.blue-ad span { color: rgba(255,255,255,.8); }
.blue-ad button {
  padding: 8px 14px;
  color: white;
  background: #1b5dff;
  border-radius: 16px;
}

@media (max-width: 960px) {
  .site-header { flex-wrap: wrap; gap: 16px; padding: 14px 5vw; }
  .main-nav { order: 3; width: 100%; overflow-x: auto; }
  .header-actions { margin-left: 0; }
  .track-panel, .stat-row, .carrier-grid, .product-strip, .page-grid, .feature-grid, .metric-band, .solution-band, .product-detail-grid, .workflow-steps, .api-code-panel, .resource-search, .resource-categories { grid-template-columns: 1fr; }
  .solution-band div:first-child,
  .solution-band div:last-child { border-radius: 8px; }
  .footer-cta h2 { font-size: 36px; }
  .footer-links { grid-template-columns: 1fr; gap: 28px; }
  .plans-grid, .custom-plan { grid-template-columns: 1fr; }
  .comparison-table { overflow-x: auto; }
  .comparison-table > div { min-width: 850px; }
  .track-side { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .tracked-row, .raw-result { grid-column: 1; }
  .track-title { font-size: 30px; }
  .carrier-list { grid-template-columns: 1fr; }
  .tracking-layout { grid-template-columns: 1fr; }
  .tracking-main { border-right: 0; }
  .tracking-card { grid-template-columns: 42px 1fr; }
  .tracking-card .message { grid-column: 2; }
  .toolbar { position: static; margin-top: 10px; }
  .status-tabs { padding-right: 0; }
  .wide-ad { position: static; width: auto; margin-top: 24px; }
  .nav-preview { left: 5vw; width: 90vw; }
  .preview-card, .topic-grid { grid-template-columns: 1fr; }
  .faq-list, .article-layout { grid-template-columns: 1fr; }
  .help-header { padding: 12px 5vw; flex-direction: column; align-items: flex-start; }
}