/* ==========================================================================
   Delivery Matic — CDL-A hiring landing page
   Built for phone-in-hand reading: big type, high contrast, short lines.
   Palette from the Delivery Matic logo: red #DE1F26 / navy #1A3E8C
   ========================================================================== */

:root{
  --navy:      #123A85;
  --navy-deep: #0B2149;
  --navy-ink:  #071733;
  --red:       #D4181F;
  --red-hot:   #F02630;
  --red-lite:  #FF6B72;
  --green:     #4BD97F;
  --orange:    #F5901E;
  --orange-hot:#FFA53D;
  --concrete:  #ECECE8;
  --paper:     #F7F5F0;
  --white:     #FFFFFF;
  --ink:       #13171D;
  --muted:     #545C68;

  --wrap: 1120px;
  --r: 5px;

  --f-display: "Archivo Black", "Arial Black", system-ui, sans-serif;
  --f-body: "Archivo", system-ui, -apple-system, sans-serif;
  --f-mono: "Roboto Mono", ui-monospace, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:19px;
  font-weight:500;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

img,video{ max-width:100%; display:block; }
a{ color:inherit; }
:focus-visible{ outline:3px solid var(--red); outline-offset:3px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--red); color:#fff; padding:.75rem 1.25rem; font-weight:700;
}
.skip:focus{ left:0; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:22px; }
.wrap--narrow{ max-width:720px; }

/* ---------- Type primitives ---------- */
.eyebrow{
  font-family:var(--f-mono); font-size:.92rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--red); margin:0 0 .9rem;
}
.eyebrow--light{ color:#9CC0F5; }
.hero .eyebrow{ color:#FFA9AE; }

.h2{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(2rem, 6vw, 3.1rem);
  line-height:1.02; letter-spacing:-.02em;
  margin:0 0 1rem; color:var(--navy-ink);
}
.h2--light{ color:#fff; }

.sub{ font-size:1.1rem; color:var(--muted); margin:0 0 1.4rem; max-width:46ch; }
.sub--light{ color:#C9DAF3; }

/* ---------- Buttons: big, obvious, thumb-sized ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  background:var(--red); color:#fff;
  font-family:var(--f-body); font-weight:700; letter-spacing:.005em;
  text-decoration:none; border:0; border-radius:var(--r);
  padding:1rem 1.6rem; font-size:1.08rem; min-height:54px;
  box-shadow:0 3px 0 rgba(0,0,0,.3);
  transition:background .15s ease, transform .1s ease;
}
.btn:hover{ background:var(--red-hot); }
.btn:active{ transform:translateY(3px); box-shadow:0 0 0 rgba(0,0,0,.3); }
.btn--sm{ padding:.7rem 1.2rem; font-size:1rem; min-height:46px; }
.btn--lg{ padding:1.2rem 2rem; font-size:1.24rem; min-height:62px; }
.btn--xl{ padding:1.45rem 2rem; font-size:1.42rem; min-height:72px; }
.btn--block{ display:flex; width:100%; }
.btn--gap{ margin-top:1.5rem; }
.btn--ghost{
  background:transparent; color:#fff;
  border:2px solid rgba(255,255,255,.6); box-shadow:none;
  font-weight:700; margin-top:.7rem; white-space:nowrap;
}
.btn--ghost:hover{ background:rgba(255,255,255,.12); }

/* ---------- Header ---------- */
.bar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.6rem 22px;
  background:#fff; border-bottom:1px solid #D9DAD6;
}
.bar__brand img{ width:150px; height:auto; }

/* ---------- Hero: copy on solid, video beside it ---------- */
.hero{ display:flex; flex-direction:column; background:var(--navy-deep); }

.hero__media{ position:relative; order:-1; background:#000; }
.hero__video{ width:100%; height:100%; object-fit:cover; aspect-ratio:16/9; }

.play{
  position:absolute; inset:0; width:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.9rem;
  background:rgba(7,23,51,.34); border:0; cursor:pointer; color:#fff;
  font-family:var(--f-body); font-weight:700; font-size:1.06rem;
  transition:background .18s ease;
}
.play:hover{ background:rgba(7,23,51,.5); }
.play[hidden]{ display:none; }
.play__ico{
  width:74px; height:74px; border-radius:50%;
  background:var(--red); box-shadow:0 6px 20px rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
}
.play__ico::after{
  content:""; margin-left:6px;
  border-left:24px solid #fff;
  border-top:15px solid transparent; border-bottom:15px solid transparent;
}
.play__t{ display:flex; flex-direction:column; align-items:center; gap:.15rem; text-shadow:0 2px 8px rgba(0,0,0,.6); }
.play__t em{
  font-family:var(--f-mono); font-style:normal; font-weight:500;
  font-size:.8rem; letter-spacing:.08em; color:#D7E3F6;
}

.hero__copy{ padding:2.2rem 22px 2.6rem; color:#fff; }
.hero__h1{ margin:0; display:block; }
.hero__amt{
  display:block;
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(4rem, 17vw, 7.2rem); line-height:.84;
  letter-spacing:-.045em; color:#fff;
}
.hero__unit{
  display:block;
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(2.2rem, 9vw, 3.6rem); line-height:1;
  letter-spacing:-.03em; color:#fff; margin-top:.15rem;
}
.hero__line{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.35rem, 5vw, 1.9rem); line-height:1.08;
  letter-spacing:-.015em; color:#fff; margin:1.1rem 0 .8rem;
}
.hero__sub{ font-size:1.2rem; font-weight:500; color:#D5E2F5; margin:0 0 1.8rem; }
.hero__act{ display:flex; flex-direction:column; }
.hero__trust{
  font-family:var(--f-mono); font-size:.86rem; color:#93AFD8;
  margin:1rem 0 0; text-align:center;
}

/* ---------- Fast facts band ---------- */
.facts{ background:var(--red); color:#fff; }
.facts__list{
  list-style:none; margin:0 auto; padding:1.5rem 22px;
  max-width:var(--wrap);
  display:grid; grid-template-columns:repeat(2,1fr); gap:1.3rem 1rem;
  text-align:center;
}
.facts__list li{ display:flex; flex-direction:column; gap:.15rem; }
.facts__list b{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.5rem,5.4vw,2.1rem); line-height:1; letter-spacing:-.02em;
}
.facts__list span{
  font-family:var(--f-mono); font-size:.78rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:#FFD9DB;
}

/* ---------- The math ---------- */
.math{ background:var(--navy-deep); color:#EAF1FB; padding:clamp(3rem,8vw,5.5rem) 0; }
.punch{
  font-size:clamp(1.15rem,3.6vw,1.45rem); font-weight:600;
  color:#CBDAF1; margin:0 0 .6rem; max-width:32ch; line-height:1.35;
}
.punch--big{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.5rem,5.4vw,2.2rem); line-height:1.12;
  letter-spacing:-.02em; color:#fff; margin:1.5rem 0 0; max-width:22ch;
}
.punch--big em{ font-style:normal; color:var(--red-lite); white-space:nowrap; }

/* SIGNATURE — settlement slip */
.slip{ margin:clamp(2.5rem,6vw,4rem) 0; }
.slip__h{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.5rem,4.6vw,2.2rem); letter-spacing:-.02em;
  color:#fff; margin:0 0 1.1rem;
}
.slip__tabs{ display:flex; gap:.4rem; margin-bottom:-1px; }
.tab{
  flex:1;
  font-family:var(--f-body); font-weight:700; font-size:1.02rem;
  background:rgba(255,255,255,.1); color:#B9CDEA;
  border:1px solid rgba(255,255,255,.22); border-bottom:0;
  padding:.95rem .8rem; min-height:52px; cursor:pointer;
  border-radius:var(--r) var(--r) 0 0;
  transition:background .15s ease,color .15s ease;
}
.tab:hover{ color:#fff; }
.tab.is-on{ background:var(--paper); color:var(--navy-deep); border-color:var(--paper); }

/* the 12-day option carries the paid reset, so it gets the orange */
.tab[data-run="12"]{
  background:var(--orange); color:#3A1D00; border-color:var(--orange); font-weight:700;
}
.tab[data-run="12"]:hover{ background:var(--orange-hot); color:#3A1D00; }
.tab[data-run="12"].is-on{
  background:var(--paper); color:var(--navy-deep);
  border-color:var(--paper); box-shadow:inset 0 5px 0 var(--orange);
}

.slip__paper{
  background:var(--paper); color:var(--ink);
  border-radius:0 var(--r) var(--r) var(--r);
  padding:1.4rem 1.3rem 1.6rem;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}
.slip__top{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  border-bottom:2px solid var(--navy); padding-bottom:.8rem; margin-bottom:.3rem;
}
.slip__logo{ width:112px; height:auto; }
.slip__doc{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); text-align:right;
}

.slip__rows{ margin:0; }
.slip__rows .row{
  display:flex; justify-content:space-between; align-items:center; gap:.8rem;
  padding:.75rem 0; border-bottom:1px solid rgba(18,58,133,.16);
}
.slip__rows dt{ font-size:1rem; font-weight:500; color:var(--muted); }
.slip__rows dd{
  margin:0; font-family:var(--f-mono); font-weight:700; font-size:1.05rem;
  font-variant-numeric:tabular-nums; text-align:right; color:var(--navy-ink);
  white-space:nowrap;
}
.row--hl{ background:#FFE7C2; margin-inline:-.6rem; padding-inline:.6rem; border-radius:3px; }
.row--hl dt{ color:var(--ink); font-weight:700; }
.row--hl dd{ color:#8A5A00; }

.slip__total{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  margin-top:1rem; padding-top:.9rem; border-top:2px solid var(--navy);
}
.slip__total-l{
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}
.slip__total-n{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(2.6rem,11vw,4rem); line-height:1;
  letter-spacing:-.04em; color:var(--red);
  font-variant-numeric:tabular-nums;
}
.slip__fine{ font-size:.95rem; color:var(--muted); margin:.9rem 0 0; }

.reset{
  background:var(--orange); color:#3A1D00;
  border-radius:var(--r); padding:1.2rem 1.3rem; margin-top:1rem;
}
.reset__h{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.3rem,4.6vw,1.75rem); line-height:1.1;
  letter-spacing:-.02em; margin:0 0 .5rem;
}
.reset__p{ margin:0; font-size:1.02rem; font-weight:600; color:#4A2600; }

.slip__switch{ font-size:1rem; color:#AFC6E6; margin:1.2rem 0 0; max-width:44ch; }

/* Ledger */
.ledger{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r); padding:1.4rem 1.3rem;
  margin-bottom:clamp(2rem,5vw,3rem);
}
.ledger__h{
  font-family:var(--f-mono); font-size:.8rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:#8FB6F0;
  margin:0 0 1rem;
}
.ledger__list{ list-style:none; margin:0; padding:0; }
.ledger__list li{
  display:flex; align-items:center; gap:.6rem;
  padding:.85rem 0; border-bottom:1px solid rgba(255,255,255,.14);
}
.ledger__list li:last-child{ border-bottom:0; }
.ledger__item{
  flex:1; color:#fff; font-weight:600; font-size:1.06rem; line-height:1.3;
}
.xmark{
  position:relative; flex:0 0 auto;
  width:30px; height:30px; margin-right:.85rem;
}
.xmark::before, .xmark::after{
  content:""; position:absolute; left:50%; top:50%;
  width:32px; height:5px; border-radius:2px;
  background:var(--red-hot);
  transform-origin:center;
}
.xmark::before{ transform:translate(-50%,-50%) rotate(45deg); }
.xmark::after{ transform:translate(-50%,-50%) rotate(-45deg); }
.ledger__amt{
  margin-left:auto;
  font-family:var(--f-mono); font-weight:700; font-size:1.2rem;
  color:var(--green); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.ledger__foot{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.3rem,4.6vw,1.8rem); letter-spacing:-.02em;
  color:#fff; margin:1.3rem 0 0;
}

.split{ display:grid; gap:.9rem; grid-template-columns:1fr; }
.split__card{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r); padding:1.2rem;
}
.split__card h3{
  font-family:var(--f-display); font-weight:400; font-size:1.2rem;
  margin:0 0 .35rem; color:#fff; letter-spacing:-.01em;
}
.split__card p{ margin:0; color:#BACBE4; font-size:1rem; }

/* ---------- Generic sections ---------- */
.sec{ padding:clamp(3rem,8vw,5rem) 0; }
.sec--tint{ background:var(--concrete); }

.grid{
  list-style:none; margin:1.8rem 0 0; padding:0;
  display:grid; gap:.9rem; grid-template-columns:1fr;
}
.card{
  background:var(--white); border:1px solid #D9DAD6;
  border-left:5px solid var(--navy);
  border-radius:var(--r); padding:1.15rem 1.2rem;
}
.card h3{
  font-family:var(--f-display); font-weight:400; font-size:1.14rem;
  line-height:1.15; margin:0 0 .3rem; color:var(--navy-ink); letter-spacing:-.01em;
}
.card p{ margin:0; color:var(--muted); font-size:1rem; }

.shot{ margin:1.8rem 0 0; }
.shot img{ width:100%; border-radius:var(--r); border:1px solid #D9DAD6; }

/* Requirements */
.checks{ list-style:none; margin:1.6rem 0 0; padding:0; }
.checks li{
  position:relative; padding:.9rem 0 .9rem 2.6rem;
  border-bottom:1px solid #E2E3DF; font-size:1.08rem;
}
.checks li b{ font-weight:700; }
.checks li::before{
  content:""; position:absolute; left:.35rem; top:1.35rem;
  width:13px; height:7px;
  border-left:3px solid var(--red); border-bottom:3px solid var(--red);
  transform:rotate(-45deg);
}
.qualify{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.4rem,4.6vw,1.9rem); letter-spacing:-.02em;
  color:var(--navy); margin:1.6rem 0 1.4rem;
}

/* ---------- Apply ---------- */
.apply{ background:var(--navy); color:#fff; padding:clamp(3rem,8vw,5rem) 0; text-align:center; }
.apply .sub{ margin-inline:auto; }
.steps{
  list-style:none; margin:1.8rem 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem;
}
.steps li{
  display:flex; align-items:center; gap:.5rem;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24);
  border-radius:var(--r); padding:.6rem .95rem;
  font-weight:700; font-size:1.02rem;
}
.steps__n{ font-family:var(--f-mono); font-size:.8rem; color:#9FC0EC; }
.apply__meta{
  font-family:var(--f-mono); font-size:.8rem; letter-spacing:.06em;
  text-transform:uppercase; color:#A9C6EE; margin:1.3rem 0 0;
}

/* ---------- Footer ---------- */
.foot{ background:var(--navy-ink); color:#8E9CB0; padding:2.6rem 0 6.5rem; font-size:.92rem; }
.foot__logo{ width:160px; height:auto; margin-bottom:1.1rem; }
.foot__legal{ max-width:72ch; margin:0 0 1.1rem; line-height:1.55; font-size:.86rem; }
.foot__links{ display:flex; gap:1.4rem; margin:0; flex-wrap:wrap; font-weight:600; }
.foot__links a{ color:#C0CEE2; text-underline-offset:3px; }

/* ---------- Sticky apply dock ---------- */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.65rem 16px calc(.65rem + env(safe-area-inset-bottom));
  background:var(--navy-ink);
  border-top:2px solid var(--red);
  transform:translateY(115%);
  transition:transform .25s ease;
}
.dock.is-up{ transform:translateY(0); }
.dock__t{
  font-family:var(--f-display); font-weight:400; font-size:1.35rem;
  color:#fff; letter-spacing:-.02em; line-height:1;
}
.dock__t em{
  display:block; font-family:var(--f-mono); font-style:normal;
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:#9FC0EC; margin-top:.2rem;
}

/* ---------- Responsive ---------- */
@media (min-width:700px){
  .grid--2{ grid-template-columns:repeat(2,1fr); }
  .facts__list{ grid-template-columns:repeat(4,1fr); padding-block:1.8rem; }
  .grid{ grid-template-columns:repeat(2,1fr); }
  .split{ grid-template-columns:repeat(2,1fr); }
  .hero__act{ flex-direction:row; gap:.8rem; align-items:stretch; }
  .hero__act .btn{ flex:0 1 auto; padding-inline:1.5rem; }
  .hero__act .btn--ghost{ font-size:1.1rem; }
  .btn--ghost{ margin-top:0; }
  .hero__trust{ text-align:left; }
  .slip__paper{ padding:2rem 2.2rem 2.2rem; }
  .tab{ flex:0 0 auto; padding-inline:1.6rem; }
}

@media (min-width:980px){
  .hero{ flex-direction:row; align-items:stretch; min-height:560px; }
  .hero__copy{
    flex:1 1 50%; order:1;
    display:flex; flex-direction:column; justify-content:center;
    padding:3.5rem clamp(2rem,4vw,3.5rem);
    max-width:640px; margin-left:auto;
  }
  .hero__media{ flex:1 1 50%; order:2; }
  .hero__video{ height:100%; aspect-ratio:auto; }
  .grid{ grid-template-columns:repeat(3,1fr); }
  .grid--4{ grid-template-columns:repeat(4,1fr); }
  .foot{ padding-bottom:2.6rem; }
  .dock__t{ font-size:1.5rem; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}