:root {
  color-scheme: light;
  --navy: #071f30;
  --navy-2: #102d43;
  --ink: #10273a;
  --muted: #526578;
  --blue: #ff791c;
  --blue-dark: #d95800;
  --blue-soft: #fff0e6;
  --gold: #ff791c;
  --paper: #f3f6f8;
  --white: #fff;
  --line: #dce5ec;
  --line-strong: #c4d2de;
  --red: #a7333d;
  --radius: 16px;
  --shadow: 0 10px 32px rgba(15, 39, 61, .06);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.6 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: var(--blue-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid #89bde0; outline-offset: 3px; }
h1, h2, h3 { color: var(--navy); line-height: 1.14; letter-spacing: -.035em; }
h1 { font-size: clamp(2.1rem, 3.6vw, 3.3rem); margin: 0 0 14px; font-weight: 780; }
h2 { font-size: clamp(1.3rem, 2.3vw, 1.65rem); margin: 0 0 8px; font-weight: 760; }
h3 { margin: 0; }
p { margin-top: 0; }
small, .muted { color: var(--muted); }
.center { text-align: center; }

/* A compact app header keeps every route and language accessible. */
.topbar { background: var(--navy); color: var(--white); min-height: 76px; padding: 14px max(24px, calc((100vw - 1220px)/2)); display: flex; align-items: center; gap: clamp(20px, 2.4vw, 36px); position: relative; z-index: 10; box-shadow: 0 8px 24px rgba(12, 29, 46, .12); }
.brand { color: var(--white); display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; font-size: 1.23rem; font-weight: 780; letter-spacing: -.04em; white-space: nowrap; }
.brand:hover { color: var(--white); text-decoration: none; }
.brand-mark { width: 37px; height: 37px; flex: 0 0 37px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 10px; background: linear-gradient(140deg, #f3c06d, #e6a33b); color: var(--navy); font-size: .79rem; letter-spacing: -.02em; font-weight: 850; }
.brand-name { display: inline-block; white-space: nowrap; line-height: 1; }
.brand-name span { color: #f0bc64; }
.topbar:has(.main-nav) { flex-wrap: wrap; }
.main-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-width: 0; flex: 1 0 100%; order: 3; }
.main-nav a { color: #d5e2ed; padding: 9px 10px; border-radius: 8px; font-size: .86rem; font-weight: 640; white-space: nowrap; }
.main-nav a:hover, .main-nav a[aria-current=page] { color: #fff; background: rgba(255,255,255,.12); text-decoration: none; }
.main-nav .nav-warehouse { margin-left: auto; }
.header-actions { display: flex; gap: 10px; align-items: center; margin-left: auto; flex: 0 0 auto; }
.header-actions form { margin: 0; }
.signout, .language-menu summary, .account-menu summary { border: 1px solid rgba(221,235,247,.25); background: transparent; color: #eef5fa; border-radius: 9px; padding: 8px 11px; font-size: .84rem; font-weight: 650; cursor: pointer; white-space: nowrap; }
.signout:hover, .language-menu summary:hover, .account-menu summary:hover { background: rgba(255,255,255,.1); }
.language-menu, .account-menu { position: relative; }
.language-menu summary, .account-menu summary { list-style: none; display: flex; align-items: center; gap: 7px; }
.language-menu summary::-webkit-details-marker, .account-menu summary::-webkit-details-marker { display: none; }
.language-menu summary::after, .account-menu summary::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 3px; }
.language-menu[open] summary::after, .account-menu[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.language-options, .account-options { position: absolute; top: calc(100% + 10px); right: 0; min-width: 174px; padding: 7px; border-radius: 12px; background: white; border: 1px solid var(--line); box-shadow: 0 18px 48px rgba(10,31,50,.2); display: grid; z-index: 20; }
.account-options { min-width: 205px; }
.main-nav .nav-menu summary { padding: 9px 10px; border: 0; border-radius: 8px; color: #d5e2ed; font-size: .86rem; }
.main-nav .nav-menu summary:hover, .main-nav .nav-menu[open] summary { color: #fff; background: rgba(255,255,255,.12); }
.main-nav .nav-menu .account-options { right: auto; left: 0; }
.language-options a, .account-options a { color: var(--ink); padding: 8px 10px; border-radius: 7px; font-size: .88rem; white-space: nowrap; }
.language-options a:hover, .language-options a[aria-current=true], .account-options a:hover, .account-options a[aria-current=page] { background: var(--blue-soft); color: var(--blue-dark); text-decoration: none; }

/* Shared page rhythm. */
main { min-height: calc(100vh - 142px); }
.page { max-width: 1220px; margin: 0 auto; padding: clamp(36px, 5vw, 64px) 24px 86px; }
.narrow { max-width: 900px; }
.eyebrow { color: var(--blue-dark); font-size: .7rem; letter-spacing: .16em; font-weight: 850; text-transform: uppercase; margin: 0 0 12px; }
.lead { font-size: 1.06rem; line-height: 1.65; color: var(--muted); max-width: 690px; margin: 0 0 30px; }
.panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 2.4vw, 30px); box-shadow: var(--shadow); }
.page > .panel + .panel, .page > p + .panel, .page > section + section { margin-top: 22px; }
.hero-row, .section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.hero-row { align-items: center; padding: clamp(25px, 3.6vw, 44px); background: linear-gradient(115deg, var(--navy), var(--navy-2)); border-radius: 20px; color: white; position: relative; overflow: hidden; }
.hero-row::after { content: ''; position: absolute; width: 230px; height: 230px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; right: 17%; bottom: -170px; box-shadow: 0 0 0 52px rgba(255,255,255,.025), 0 0 0 105px rgba(255,255,255,.02); pointer-events: none; }
.hero-row h1 { color: white; font-size: clamp(1.9rem, 3vw, 2.7rem); }
.hero-row .eyebrow { color: #efbb68; }
.hero-row .lead { color: #c8d8e5; margin-bottom: 0; }
.hero-row > * { position: relative; z-index: 1; }
.section-head { align-items: center; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.section-head h2 { margin-bottom: 0; }
.section-head > a { font-weight: 750; white-space: nowrap; }

/* Controls and forms. */
button, .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 9px; padding: 10px 17px; font: inherit; font-size: .9rem; font-weight: 750; line-height: 1.35; cursor: pointer; transition: background .16s ease, box-shadow .16s ease, transform .16s ease; }
button:hover, .button:hover { text-decoration: none; transform: translateY(-1px); }
.primary { background: var(--blue); color: white; box-shadow: 0 3px 8px rgba(23,107,156,.13); }
.primary:hover { background: var(--blue-dark); color: white; }
.hero-row .primary { background: #efb65a; color: #142b40; box-shadow: none; }
.hero-row .primary:hover { background: #ffd18a; }
.secondary { background: #ebf1f5; color: var(--navy); border-color: var(--line); }
.link-button { border: 0; background: transparent; padding: 0; color: inherit; }
input, select, textarea { display: block; width: 100%; border: 1px solid var(--line-strong); border-radius: 9px; background: #fff; color: var(--ink); font: inherit; font-weight: 450; min-height: 43px; padding: 10px 12px; }
textarea { min-height: 108px; resize: vertical; }
input[type=checkbox], input[type=radio] { width: auto; min-height: 0; padding: 0; accent-color: var(--blue); }
input:focus, select:focus, textarea:focus { border-color: var(--blue); outline: 3px solid rgba(54,151,206,.16); outline-offset: 0; }
label { font-weight: 680; font-size: .89rem; color: var(--ink); }
label > input, label > select, label > textarea { margin-top: 7px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; }
.form-grid label { margin: 0; }
.full { grid-column: 1 / -1; }
.form-grid > .primary, .form-grid > button { justify-self: start; }
.form-grid p.full { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { font-weight: 750; padding: 0 0 8px; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.plan { display: block; padding: 16px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; background: white; }
.plan:has(input:checked) { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(23,107,156,.15); }
.plan input { display: inline; vertical-align: middle; }
.plan strong, .plan span, .plan b { display: block; }
.plan strong { margin-top: 8px; }
.plan span { color: var(--muted); font-size: .82rem; font-weight: 450; min-height: 44px; }
.plan b { margin-top: 14px; color: var(--navy); font-size: 1.35rem; }
.plan b small { font-size: .7rem; }
.alert { border: 1px solid #ebc1c7; background: #fff2f3; color: var(--red); border-radius: 10px; padding: 12px 15px; margin: 14px 0; }

/* Login and registration. */
.auth-shell { max-width: 1200px; margin: 0 auto; padding: clamp(50px, 6vw, 90px) 24px; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(360px,.9fr); gap: clamp(40px, 7vw, 100px); align-items: center; }
.auth-copy { position: relative; padding: 48px 30px 48px 0; }
.auth-copy::before { content: ''; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, #e1edf6, transparent 72%); top: -65px; left: -110px; z-index: -1; }
.auth-copy h1 { font-size: clamp(2.8rem, 5.2vw, 4.8rem); max-width: 690px; }
.auth-copy > p:not(.eyebrow) { font-size: 1.16rem; color: var(--muted); max-width: 610px; }
.trust-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.trust-row span { border: 1px solid #d4e3ec; background: #eaf3f8; color: #255371; border-radius: 8px; padding: 7px 11px; font-size: .77rem; font-weight: 700; }
.auth-form { width: 100%; padding: clamp(26px, 3vw, 40px); box-shadow: 0 20px 60px rgba(13,43,66,.09); }
.auth-form h2 { margin-bottom: 5px; }
.auth-form .muted { margin: 0 0 23px; }
.auth-form label { display: block; margin: 17px 0; }
.auth-form > .primary { width: 100%; min-height: 46px; margin-top: 10px; }
.auth-form .center { margin: 22px 0 0; font-size: .85rem; }

/* Dashboard and load discovery. */
.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin: 20px 0 24px; }
.metric-grid article { background: white; border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.metric-grid article::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--blue); }
.metric-grid article:nth-child(2)::before { background: #e9ac4e; }
.metric-grid article:nth-child(3)::before { background: #4f9c8c; }
.metric-grid span { display: block; color: var(--muted); font-size: .83rem; font-weight: 700; }
.metric-grid strong { display: block; color: var(--navy); font-size: clamp(2rem,3vw,2.6rem); line-height: 1.2; margin-top: 5px; font-weight: 800; }
.load-list { margin-top: 4px; }
.load { display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 17px 0; border-bottom: 1px solid var(--line); }
.load:last-child { border-bottom: 0; padding-bottom: 0; }
.load > div:first-child { display: grid; gap: 4px; }
.load b { font-size: 1rem; color: var(--navy); }
.load > div span:not(.status) { color: var(--muted); font-size: .85rem; }
.load .status { justify-self: start; }
.load-meta { text-align: right; white-space: nowrap; }
.load-meta strong { color: var(--navy); font-size: 1.16rem; }
.filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter select { width: auto; min-width: 145px; max-width: 210px; }
.filter button { background: var(--navy); color: white; min-height: 43px; }
.load-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; margin-top: 24px; }
.load-card { padding: 24px; transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.load-card:hover { transform: translateY(-2px); border-color: #bfd7e8; box-shadow: 0 16px 42px rgba(15,39,61,.1); }
.load-card > .status { margin-bottom: 14px; }
.route { display: grid; gap: 10px; margin: 14px 0 20px; font-size: 1.04rem; font-weight: 760; color: var(--navy); }
.route span { display: flex; align-items: baseline; gap: 11px; }
.route i { display: inline-block; flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; background: #3598c4; box-shadow: 0 0 0 4px #e0f1f8; }
.route span:last-child i { background: var(--gold); box-shadow: 0 0 0 4px #fff2dc; }
.load-card dl { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; border-block: 1px solid var(--line); padding: 16px 0; margin: 0 0 18px; }
.load-card dt { color: var(--muted); font-size: .67rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.load-card dd { margin: 3px 0 0; color: var(--navy); font-size: .86rem; font-weight: 760; }
.load-card p { margin: 10px 0; font-size: .88rem; color: #465c70; }
.load-card small { display: block; margin-top: 16px; }
.bid-form { display: grid; grid-template-columns: minmax(110px,1fr) minmax(150px,1.5fr) auto; align-items: end; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.bid-form label { min-width: 0; }
.bid-form button { min-height: 43px; }

/* Tables, filters and states. */
.table-wrap { overflow-x: auto; margin-top: 22px; }
table { width: 100%; border-collapse: collapse; min-width: 640px; }
th, td { padding: 14px 15px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); background: #f7fafc; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; }
td { font-size: .87rem; }
td b { color: var(--navy); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #f9fbfd; }
td form { margin: 0; }
td button { padding: 7px 11px; font-size: .8rem; }
.status { display: inline-block; vertical-align: middle; padding: 4px 9px; border-radius: 6px; background: #edf1f5; color: #4e5f70; font-size: .69rem; font-weight: 800; text-transform: uppercase; letter-spacing: .035em; line-height: 1.3; white-space: nowrap; }
.status.pending-load, .status.pending { background: #fff1d9; color: #805518; }
.status.active-load, .status.accepted { background: #dcf3ea; color: #176a4b; }
.status.international { background: #e5f0fc; color: #235b87; }
.status.delivered { background: #e9eef8; color: #415c88; }
.status.draft { background: #eef0f2; color: #626e78; }
.status.rejected { background: #fae6e6; color: #993b3b; }
.status-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 2px; }
.status-filters a { padding: 7px 13px; border: 1px solid var(--line); background: white; border-radius: 8px; font-size: .85rem; font-weight: 710; }
.status-filters a[aria-current=page] { background: var(--navy); border-color: var(--navy); color: white; }
.empty { padding: 30px; text-align: center; color: var(--muted); }
.message { text-align: center; padding: clamp(34px, 5vw, 54px); }
.message p:not(.eyebrow) { color: var(--muted); font-size: 1rem; max-width: 600px; margin: 12px auto 25px; }
.message .button + .button { margin-left: 8px; }
footer { border-top: 1px solid var(--line); background: #fff; color: var(--muted); text-align: center; padding: 24px; font-size: .8rem; }
.email-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 22px 0; align-items: start; }
.email-form { display: grid; gap: 16px; }
.email-form label { display: grid; gap: 7px; }
.email-form button { justify-self: start; }
.email-list { display: grid; }
.email-list-row { display: flex; justify-content: space-between; gap: 20px; align-items: center; border-top: 1px solid var(--line); padding: 15px 0; color: var(--ink); }
.email-list-row small { display: block; margin-top: 3px; overflow-wrap: anywhere; }
.email-state { text-transform: capitalize; font-size: .95rem; white-space: nowrap; }
.email-link-button { background: transparent; border: 0; color: var(--blue-dark); cursor: pointer; text-decoration: underline; }
.email-notice, .email-alert { padding: 15px 18px; border-radius: 10px; background: #e8f6ef; border: 1px solid #b7dec9; }
.email-alert { background: #fff5df; border-color: #e9d4a4; }
.email-preview { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.6; }
.warehouse-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.warehouse-filter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 12px; align-items: end; margin: 22px 0; }
.warehouse-filter label { display: grid; gap: 6px; }
.warehouse-card h2 { margin: 14px 0 6px; }
.warehouse-card .button { margin-top: 12px; }
.warehouse-facts { display: flex; flex-wrap: wrap; gap: 10px 24px; border-block: 1px solid var(--line); padding: 15px 0; margin: 16px 0; }
.warehouse-facts b { color: var(--navy); }
.warehouse-description { white-space: pre-wrap; overflow-wrap: anywhere; }
.warehouse-stack { display: grid; gap: 14px; margin-top: 18px; }
.warehouse-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.warehouse-row h2 { margin: 10px 0 4px; }
.warehouse-enquiry { padding: 18px 0; border-top: 1px solid var(--line); }
.warehouse-enquiry h3 { margin: 9px 0 3px; }

@media (max-width: 1120px) {
  .topbar { gap: 12px; padding: 13px 24px; }
}
@media (max-width: 800px) {
  .warehouse-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .email-columns { grid-template-columns: 1fr; }
  .topbar { flex-wrap: wrap; }
  .main-nav { order: 3; flex: 1 0 100%; padding: 5px 0 1px; }
  .hero-row, .section-head { align-items: flex-start; }
  .load-grid, .auth-shell { grid-template-columns: 1fr; }
  .auth-copy { padding: 4px 0; }
  .auth-copy h1 { font-size: clamp(2.5rem, 8vw, 3.6rem); }
  .auth-form { max-width: 560px; }
  .bid-form { grid-template-columns: 1fr 1fr; }
  .bid-form button { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .warehouse-filter { grid-template-columns: 1fr; }
  .warehouse-row { align-items: flex-start; flex-wrap: wrap; }
  .topbar { padding: 12px 16px; }
  .brand { font-size: 1.12rem; }
  .page { padding: 34px 16px 64px; }
  .panel { padding: 19px; }
  .hero-row { display: grid; gap: 18px; padding: 25px 20px; }
  .hero-row .button { justify-self: start; }
  .section-head { flex-wrap: wrap; gap: 10px; }
  .metric-grid { grid-template-columns: 1fr; gap: 10px; }
  .metric-grid article { padding: 17px 20px; }
  .metric-grid strong { font-size: 1.8rem; }
  .form-grid, .plans { grid-template-columns: 1fr; }
  .full { grid-column: auto; }
  .filter { width: 100%; }
  .filter select { max-width: none; flex: 1 1 140px; }
  .load { align-items: flex-start; }
  .load-meta { padding-top: 4px; }
  .auth-shell { padding: 38px 16px 60px; gap: 20px; }
  .trust-row { margin-top: 20px; }
}
@media (max-width: 420px) {
  .header-actions { gap: 5px; }
  .signout, .language-menu summary, .account-menu summary { padding: 7px; font-size: .75rem; }
  .brand-name { font-size: .98rem; }
  .brand-mark { width: 33px; height: 33px; flex-basis: 33px; }
  .load-card dl { grid-template-columns: repeat(2, 1fr); }
  .bid-form { grid-template-columns: 1fr; }
  .bid-form button { grid-column: auto; }
  .load { display: block; }
  .load-meta { text-align: left; margin-top: 8px; }
  .message .button { width: 100%; margin: 5px 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
/* Public pages and compact mobile navigation. */
.public-nav { display:flex; align-items:center; gap:16px; margin-left:auto; }
.public-nav a:not(.button) { color:#e6eef6; font-weight:650; white-space:nowrap; }
.public-nav .button { white-space:nowrap; }
.public-hero { background:linear-gradient(120deg,#11263b,#205476); color:white; }
.public-hero .page { padding-top:90px; padding-bottom:90px; }
.public-hero h1 { color:white; max-width:720px; }
.public-hero .eyebrow { color:#f1bc6d; }
.public-hero .lead,.public-hero .muted { color:#d7e6f0; }
.public-actions { display:flex; flex-wrap:wrap; gap:12px; margin:25px 0 15px; }
.feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin:24px 0; }
.feature-grid .panel { display:flex; flex-direction:column; }
.feature-grid .panel a { margin-top:auto; }
.price { font-size:2rem; font-weight:800; color:var(--navy); }
.price small { display:block; font-size:.8rem; font-weight:500; }
.pricing-note { margin-top:28px; }
.review { border-top:1px solid var(--line); padding:16px 0; }
.review p { margin:8px 0 0; white-space:pre-wrap; }
footer a { color:inherit; }
.mobile-navigation { display:contents; }
.mobile-navigation summary { display:none; }
@media (max-width:950px) {
  .public-nav { order:3; flex:1 0 100%; flex-wrap:wrap; gap:10px; }
  .public-nav a { padding:6px; }
  .feature-grid { grid-template-columns:1fr; }
  .mobile-navigation { display:block; order:3; width:100%; }
  .mobile-navigation summary { display:list-item; color:white; cursor:pointer; padding:9px 12px; border:1px solid #7890a5; border-radius:8px; width:max-content; }
  .mobile-navigation .main-nav { display:grid; overflow:visible; padding:8px 0; }
  .mobile-navigation .main-nav a { white-space:normal; }
  .mobile-navigation .main-nav .nav-warehouse { margin-left:0; }
}
@media (max-width:620px) { .public-hero .page { padding-top:54px; padding-bottom:54px; } .public-nav { gap:3px; } .public-nav .button { padding:8px; } }

.search-row { display:flex; justify-content:space-between; align-items:center; gap:16px; border-top:1px solid var(--line); padding:12px 0; }
.job-timeline { list-style:none; margin:20px 0 0; padding:0; border-left:2px solid var(--line); }
.job-timeline li { position:relative; margin:0 0 0 18px; padding:0 0 24px 18px; display:grid; gap:2px; }
.job-timeline li::before { content:''; position:absolute; left:-25px; top:5px; width:10px; height:10px; border-radius:50%; background:var(--blue); }
.job-timeline time { font-size:.82rem; color:var(--muted); }
#signature-pad { display:block; width:100%; max-width:500px; height:180px; border:1px solid var(--line-strong); border-radius:9px; background:white; touch-action:none; margin:10px 0; }
.confirmation-check { display:flex; align-items:center; gap:8px; margin:15px 0; }
@media(max-width:620px){ .search-row { align-items:flex-start; flex-direction:column; } .bid-form { display:grid; grid-template-columns:1fr; } }

@media(min-width:801px){ .bid-form { grid-template-columns:minmax(110px,1fr) minmax(130px,1fr) minmax(160px,1.4fr) auto; } }

/* Public growth pages and onboarding */
.stack{display:grid;gap:1rem}.step-number{display:inline-grid;place-items:center;background:#e7f0fb;color:#174975;width:2.3rem;height:2.3rem;border-radius:50%;font-weight:700}.onboarding{margin:1.5rem 0}.checklist{display:flex;flex-wrap:wrap;gap:.75rem}.check-step{display:flex;align-items:center;gap:.65rem;padding:.75rem 1rem;border:1px solid #d8e3ed;border-radius:.6rem;text-decoration:none}.check-step:hover{background:#eef5fc}.check-step span:first-child{font-size:1.35rem}.trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.panel textarea{width:100%;max-width:100%;font:inherit}.panel input[readonly]{width:100%;overflow:hidden}
.analytics-table{width:100%;border-collapse:collapse}.analytics-table th,.analytics-table td{text-align:left;padding:.6rem;border-bottom:1px solid #d8e3ed}.analytics-table th:last-child,.analytics-table td:last-child{text-align:right}

/* Membership comparison */
.pricing-page { padding-top:58px; }
.pricing-hero { text-align:center; max-width:950px; margin:0 auto 45px; }
.pricing-hero h1 { font-size:clamp(2.2rem,4vw,3.4rem); }
.pricing-hero .lead { max-width:720px; margin:18px auto; }
.trial-pill { display:inline-block; background:#e5f6fa; color:var(--blue-dark); border:1px solid #bce5ed; padding:10px 18px; border-radius:30px; font-weight:700; font-size:.9rem; }
.pricing-tabs { display:flex; justify-content:center; gap:35px; border-bottom:1px solid var(--line-strong); margin:0 auto 54px; max-width:900px; }
.pricing-tabs button { border:0; border-bottom:3px solid transparent; background:transparent; border-radius:0; color:var(--muted); padding:17px 12px; font-size:1rem; font-weight:650; }
.pricing-tabs button[aria-selected=true] { border-bottom-color:var(--blue); color:var(--navy); }
.pricing-panel[hidden] { display:none; }
.pricing-intro { display:flex; justify-content:space-between; align-items:center; gap:22px; margin-bottom:30px; }
.pricing-intro h2 { font-size:1.8rem; }
.pricing-intro p { margin:12px 0 0; color:var(--muted); }
.membership-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.membership-card { position:relative; padding:30px 25px; border:1px solid #c6d6df; border-radius:13px; background:linear-gradient(125deg,#fff 35%,#e7f9fc); display:flex; flex-direction:column; }
.membership-featured { border:2px solid var(--blue); box-shadow:0 12px 36px rgba(0,115,155,.1); }
.membership-ribbon { position:absolute; top:-15px; left:24px; background:var(--blue); color:white; border-radius:20px; padding:6px 13px; font-size:.78rem; font-weight:700; }
.membership-audience { color:var(--blue); font-size:.73rem; letter-spacing:.09em; font-weight:750; margin-bottom:16px; }
.membership-card h3 { font-size:1.5rem; }
.membership-description { min-height:48px; color:var(--muted); margin:15px 0 22px; font-size:.95rem; }
.membership-price { font-size:2.6rem; color:var(--navy); font-weight:800; margin:0; }
.membership-price span { font-size:.95rem; font-weight:500; white-space:nowrap; }
.membership-trial { color:var(--muted); font-size:.83rem; margin:8px 0 24px; }
.membership-card .button { text-align:center; }
.membership-includes { border-top:1px solid var(--line); padding-top:24px; margin:26px 0 12px; font-weight:700; font-size:.9rem; }
.membership-card ul { padding:0; margin:0; list-style:none; }
.membership-card li { position:relative; padding:0 0 13px 23px; font-size:.9rem; }
.membership-card li::before { content:'✓'; position:absolute; left:0; color:var(--blue); font-weight:700; }
.pricing-billing { display:grid; grid-template-columns:2fr 1fr; gap:45px; background:white; border:1px solid var(--line); border-radius:14px; padding:30px; margin-top:40px; }
.pricing-billing p { margin:15px 0; color:var(--muted); }
.pricing-billing a { line-height:2; }
@media(max-width:800px) { .membership-grid,.pricing-billing { grid-template-columns:1fr; } .pricing-intro { align-items:flex-start; flex-direction:column; } .pricing-tabs { gap:10px; } .membership-description { min-height:0; } }

/* HaulageBid Scania V8 unified site theme — shared pages */
:root {--navy:#071f30;--navy-2:#102d43;--ink:#10273a;--muted:#526578;--blue:#ff791c;--blue-dark:#d95800;--blue-soft:#fff0e6;--gold:#ff791c;--paper:#f3f6f8;--line:#dce5ec;}
html,body,button,input,select,textarea {font-family:Arial,Helvetica,sans-serif;}
body {font-size:15px;}
h1,h2,h3,.brand-name {font-family:Arial,Helvetica,sans-serif;font-weight:800;}
.eyebrow {color:#e8660d;letter-spacing:.2em;}
a {color:#bd4b00;} a:hover {color:#e8660d;}
.primary,.button.primary,button.primary {background:#ff791c;color:#091c2d;border-color:#ff791c;box-shadow:0 4px 12px #ff791c24;}
.primary:hover,.button.primary:hover,button.primary:hover {background:#e9680b;color:#091c2d;}
.secondary,.button.secondary {background:#fff;color:#10273a;border:1px solid #cbd8e1;}
.secondary:hover,.button.secondary:hover {border-color:#ff791c;color:#a84200;}
.hero-row,.public-hero {background:linear-gradient(120deg,#071f30,#103c53);}
.hero-row .primary {background:#ff791c;color:#091c2d;}
.hero-row .primary:hover {background:#ff974e;}
.hero-row .eyebrow,.public-hero .eyebrow {color:#ff9b53;}
.panel,.load-card,.membership-card {border-color:#dce5ec;}
.metric-grid article::before,.route i,.job-timeline li::before {background:#ff791c;}
.route i {box-shadow:0 0 0 4px #fff0e6;}
.trust-row span,.trial-pill,.step-number {background:#fff0e6;color:#a84200;border-color:#ffd2b5;}
.membership-card {background:linear-gradient(125deg,#fff 35%,#fff5ed);}
.membership-featured {border-color:#ff791c;}
.membership-ribbon {background:#ff791c;color:#091c2d;}
.pricing-tabs button[aria-selected=true] {border-bottom-color:#ff791c;}
input:focus,select:focus,textarea:focus {border-color:#ff791c;outline-color:#ff791c33;}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {outline-color:#ff791c;}
.brand-mark {background:linear-gradient(135deg,#ff9b42,#ff791c);border-color:#ff791c;color:#071f30;}
.brand-name span {color:#ff791c;}
footer {background:#071f30;color:#dce6ee;border-color:#19394d;} footer a {color:#ffb17c;}

/* HaulageBid shared readability and typography update — October 2026.
   Restrained overrides: do not override semantic status badges or dark navigation. */
:root {
  --ink: #111111;
  --muted: #333333;
  --blue-dark: #a84300;
}
html, body, button, input, select, textarea, summary {
  font-family: Arial, Helvetica, sans-serif;
}
body { color: var(--ink); }
main { color: #111111; }
main h1, main h2, main h3, main h4, main h5, main h6 {
  color: #071f30;
  font-family: Arial, Helvetica, sans-serif;
}
main p, main label, main legend, main dt, main dd,
main td, main th, main li, main small, main .muted,
main .lead, main .metric-grid span, main .load > div span:not(.status),
main .load-card p, main .load-card dt, main .load-card dd,
main .warehouse-description, main .warehouse-facts,
main .pricing-intro p, main .pricing-billing p,
main .membership-description, main .membership-trial,
main .plan span, main .message p:not(.eyebrow) {
  color: #242424;
}
main .metric-grid strong, main .load b, main .load-meta strong,
main .route, main .price, main .membership-price,
main .warehouse-facts b, main td b { color: #111111; }
main a:not(.button):not(.primary):not(.secondary) { color: #a84300; }
main a:not(.button):not(.primary):not(.secondary):hover { color: #d95800; }
main .eyebrow { color: #b34b00; }
main input, main select, main textarea { color: #111111; }
main input::placeholder, main textarea::placeholder { color: #555555; opacity: 1; }
/* Preserve white/light typography on dark hero sections. */
main .hero-row, main .hero-row h1, main .hero-row h2,
main .hero-row h3, main .hero-row p:not(.eyebrow),
main .hero-row .lead, main .hero-row .muted,
main .public-hero, main .public-hero h1,
main .public-hero h2, main .public-hero h3,
main .public-hero p:not(.eyebrow), main .public-hero .lead,
main .public-hero .muted { color: #ffffff; }
main .hero-row .eyebrow, main .public-hero .eyebrow { color: #ffac72; }
main .hero-row a:not(.button), main .public-hero a:not(.button) { color: #ffbf95; }
/* Semantic statuses stay colour-coded for accessibility and meaning. */
main .status.pending-load, main .status.pending { color: #805518; }
main .status.active-load, main .status.accepted { color: #176a4b; }
main .status.international { color: #235b87; }
main .status.delivered { color: #415c88; }
main .status.draft { color: #626e78; }
main .status.rejected { color: #993b3b; }
/* Consistent orange buttons with dark legible lettering. */
.primary, .button.primary, button.primary,
.hero-row .primary { background: #ff791c; color: #071f30; border-color: #ff791c; }
.primary:hover, .button.primary:hover, button.primary:hover,
.hero-row .primary:hover { background: #ff954c; color: #071f30; }


/* HaulageBid readable text refinement — 25 October 2026
   Keep navy headers, orange actions and semantic statuses unchanged. */
:root { --ink: #101010; --muted: #242424; }

/* Readable black text on light page surfaces. */
main .panel, main .panel p, main .panel li, main .panel label,
main .panel legend, main .panel dt, main .panel dd,
main .panel small, main .panel .muted, main .panel .lead,
main .panel h1, main .panel h2, main .panel h3,
main .load-card, main .load-card p, main .load-card small,
main .metric-grid article, main .metric-grid article span,
main .metric-grid article strong,
main .membership-card, main .membership-card p,
main .membership-card li, main .membership-card small,
main .check-step, main .check-step span,
main .pricing-billing, main .pricing-billing p,
main table td, main table th, main table td b,
main .warehouse-card, main .warehouse-card p,
main .load-list .load b, main .load-list .load span:not(.status) {
  color: #101010;
}

/* Menus that open on white backgrounds must never inherit white nav text. */
.topbar .language-options, .topbar .account-options,
.topbar .language-options a, .topbar .account-options a,
.topbar .main-nav .nav-menu .account-options a,
.topbar .main-nav .nav-menu .account-options span,
.topbar .main-nav .nav-menu .account-options strong,
.topbar .language-options span, .topbar .account-options span,
.topbar .language-options strong, .topbar .account-options strong {
  color: #101010;
}
.topbar .language-options a:hover, .topbar .account-options a:hover,
.topbar .main-nav .nav-menu .account-options a:hover {
  color: #101010;
  background: #fff0e6;
}

/* Inputs and selection controls. */
main input:not([type=checkbox]):not([type=radio]),
main select, main textarea, main option,
main input::placeholder, main textarea::placeholder {
  color: #101010;
}
main input::placeholder, main textarea::placeholder { opacity: .75; }

/* Orange actions and meaningful status colours stay distinct. */
main .panel a:not(.button):not(.primary),
main .pricing-billing a:not(.button) { color: #a84300; }
main .panel .primary, main .panel .button.primary,
main .panel button.primary { color: #071f30; }
main .panel .status.pending-load, main .panel .status.pending { color: #805518; }
main .panel .status.active-load, main .panel .status.accepted { color: #176a4b; }
main .panel .status.international { color: #235b87; }
main .panel .status.delivered { color: #415c88; }
main .panel .status.draft { color: #626e78; }
main .panel .status.rejected { color: #993b3b; }

/* Dark surfaces keep light text, including their nested descriptions. */
main .hero-row, main .hero-row h1, main .hero-row h2,
main .hero-row h3, main .hero-row p, main .hero-row small,
main .hero-row .lead, main .hero-row .muted,
main .public-hero, main .public-hero h1, main .public-hero h2,
main .public-hero h3, main .public-hero p,
main .public-hero .lead, main .public-hero .muted {
  color: #ffffff;
}
main .hero-row .eyebrow, main .public-hero .eyebrow { color: #ffac72; }
main .hero-row .primary, main .public-hero .primary { color: #071f30; }