/* Freightiva marketing site. Brand: Deep Navy #081220, Orange #FF6A00, Blue #3B82F6, Light #F5F7FA, Gray #6B7280. */
:root {
  --navy: #081220; --navy-2: #0F1D31; --orange: #FF6A00; --orange-2: #FF8124; --blue: #3B82F6;
  --light: #F5F7FA; --gray: #6B7280; --ink: #081220; --line: #E3E7EE; --white: #fff;
  --display: 'Montserrat', system-ui, sans-serif; --body: 'Inter', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--body); color: var(--ink); background: var(--white); font-size: 16.5px; line-height: 1.55; }
h1, h2, h3, .brand span { font-family: var(--display); letter-spacing: -0.02em; }
h1 { font-size: clamp(30px, 5vw, 52px); line-height: 1.08; margin: 10px 0 14px; font-weight: 800; }
h2 { font-size: clamp(24px, 3.2vw, 34px); margin: 0 0 18px; font-weight: 800; }
h3 { font-size: 18px; margin: 0 0 6px; font-weight: 700; }
p { margin: 0 0 12px; }
a { color: inherit; }
sup { font-size: 0.5em; vertical-align: super; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; background: #fff; padding: 10px 14px; border-radius: 6px; z-index: 10; }

.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px clamp(16px, 4vw, 48px);
  background: var(--navy); color: #fff; position: sticky; top: 0; z-index: 5; flex-wrap: wrap; }
.nav nav { display: flex; align-items: center; gap: clamp(10px, 2vw, 22px); flex-wrap: wrap; }
.nav nav a:not(.btn) { text-decoration: none; font-size: 14.5px; color: #D6DBE4; }
.nav nav a:not(.btn):hover { color: #fff; }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: #fff; font-weight: 800; font-size: 21px; }
.brand.small { font-size: 17px; }

.btn { display: inline-block; background: var(--orange); color: var(--navy); font-weight: 700; text-decoration: none;
  padding: 10px 18px; border-radius: 7px; border: 1px solid var(--orange); font-family: var(--body); font-size: 15px; cursor: pointer; }
.btn:hover { background: var(--orange-2); border-color: var(--orange-2); }
.btn.ghost { background: transparent; color: #fff; border-color: #3C4A5E; }
.btn.ghost:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.btn.big { padding: 14px 24px; font-size: 17px; }

.hero { padding: clamp(40px, 7vw, 92px) clamp(16px, 4vw, 48px) 46px; max-width: 900px; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 600; color: var(--gray); margin: 0; }
.lede { font-size: clamp(17px, 2vw, 20px); color: #2B3646; max-width: 70ch; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0 10px; }
.cta .btn.ghost { color: var(--navy); border-color: var(--line); background: #fff; }
.cta .btn.ghost:hover { border-color: var(--navy); background: var(--light); }
.fineprint { font-size: 13.5px; color: var(--gray); }

.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--line);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.strip > div { background: var(--light); padding: 20px clamp(16px, 4vw, 48px); display: grid; gap: 3px; }
.strip strong { font-family: var(--display); font-size: 17px; }
.strip span { color: var(--gray); font-size: 14.5px; }

.feature { padding: clamp(40px, 6vw, 76px) clamp(16px, 4vw, 48px); }
.feature.alt { background: var(--light); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.grid article { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.feature.alt .grid article { background: #fff; }
.grid p { color: #384253; margin: 0; font-size: 15.5px; }

.settlements { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: clamp(20px, 4vw, 48px);
  padding: clamp(40px, 6vw, 76px) clamp(16px, 4vw, 48px); background: var(--navy); color: #fff; align-items: start; }
.settlements h2 { color: #fff; }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 30px; color: #D6DBE4; font-size: 15.5px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 9px;
  border-left: 3px solid var(--orange); border-bottom: 3px solid var(--orange); transform: rotate(-45deg); }
.panel { background: var(--navy-2); border: 1px solid #22314A; border-radius: 14px; padding: 18px; }
.panel-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 700; font-family: var(--display); }
.chip { background: #3B2A12; color: #FFB870; font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 20px; }
.panel dl { margin: 14px 0 6px; display: grid; gap: 8px; }
.panel dl > div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid #1C2A40; padding-bottom: 7px; }
.panel dt { color: #96A1B3; font-size: 14px; }
.panel dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.panel dd.neg { color: #FF9C8A; }
.panel dd.big { font-size: 21px; font-family: var(--display); font-weight: 800; }
.panel .fineprint { color: #7C8798; margin: 0; }

.demo { display: grid; grid-template-columns: minmax(0, .9fr) minmax(300px, 1.1fr); gap: clamp(20px, 4vw, 48px);
  padding: clamp(40px, 6vw, 76px) clamp(16px, 4vw, 48px); align-items: start; }
#demo-form { display: grid; gap: 12px; background: var(--light); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
#demo-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#demo-form label { display: grid; gap: 5px; font-size: 13px; font-weight: 600; color: #384253; }
#demo-form input, #demo-form select, #demo-form textarea { font: inherit; font-size: 15.5px; padding: 11px 12px; border: 1px solid var(--line);
  border-radius: 8px; background: #fff; color: var(--ink); width: 100%; }
#demo-form input:focus, #demo-form select:focus, #demo-form textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
#demo-form .hidden-field { position: absolute; left: -9999px; height: 0; overflow: hidden; }
#demo-status { font-size: 14.5px; margin: 0; min-height: 1.2em; }
#demo-status.ok { color: #15803d; font-weight: 600; }
#demo-status.err { color: #b91c1c; font-weight: 600; }

footer { background: var(--navy); color: #96A1B3; padding: 28px clamp(16px, 4vw, 48px); display: grid; gap: 10px; }
footer p { margin: 0; font-size: 14px; }
footer a { color: #D6DBE4; }

@media (max-width: 860px) {
  .settlements, .demo { grid-template-columns: 1fr; }
  #demo-form .row { grid-template-columns: 1fr; }
  .nav { gap: 10px; }
}

/* ---------- pricing ---------- */
.pricing { padding: clamp(40px, 6vw, 76px) clamp(16px, 4vw, 48px); background: var(--light); }
.pricing .lede { max-width: 66ch; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 26px 0 16px; align-items: start; }
.plans article { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px; display: grid; gap: 10px; align-content: start; }
.plans article.featured { border: 2px solid var(--orange); box-shadow: 0 10px 30px rgba(8,18,32,.07); }
.plans .tag { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); }
.plans h3 { margin: 0; }
.price { margin: 0; font-family: var(--display); }
.price strong { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; }
.price span { color: var(--gray); font-size: 15px; font-family: var(--body); }
.plan-blurb { color: var(--gray); font-size: 14.5px; margin: 0; }
.plans ul { list-style: none; padding: 0; margin: 4px 0 8px; display: grid; gap: 8px; }
.plans li { position: relative; padding-left: 22px; font-size: 14.5px; color: #384253; }
.plans li::before { content: ""; position: absolute; left: 0; top: 6px; width: 12px; height: 7px;
  border-left: 2.5px solid var(--orange); border-bottom: 2.5px solid var(--orange); transform: rotate(-45deg); }
.plans .btn { justify-self: start; }
.plans .btn.ghost { color: var(--navy); border-color: var(--line); background: #fff; }
.plans .btn.ghost:hover { border-color: var(--navy); background: var(--light); }

/* Privacy and terms: long-form text, narrower than the marketing columns so it stays readable. */
.legal{max-width:none;width:min(46rem,100% - 3rem);margin:0 auto;padding:3.5rem 0 5rem}
.legal h1{font-size:clamp(1.8rem,4vw,2.6rem);margin:.2rem 0 1rem}
.legal h2{font-size:1.15rem;margin:2.4rem 0 .6rem}
.legal p{line-height:1.7;margin:0 0 1rem}
.legal .lede{font-size:1.1rem}
.legal .ticks{margin:1rem 0 1.5rem}
.legal .ticks li{margin-bottom:.9rem;line-height:1.65}