:root{
    --asphalt:#23272E;--deep:#171A1F;--line:#333941;--dusk:#2A3548;
    --amber:#F2B33D;--amber-dim:#7A5F26;--sea:#3C8C9B;--moss:#75975C;
    /* moss, hazard and dim carry meaning, authority active, authority lapsed,
       the quieter half of every label. All three failed WCAG AA as text on the
       backgrounds they actually sit on, which on a site read largely by people
       over sixty is not a technicality. Lifted to clear 4.5:1 on asphalt, deep
       and dusk alike, hues kept. */
    --hazard:#D57253;--dim:#9AA0A9;--text:#E8EAED;
    --display:"Barlow Condensed",Impact,sans-serif;
    --body:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,sans-serif;
    --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--deep);color:var(--text);font-family:var(--body);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
  .wrap{max-width:1000px;margin:0 auto;padding:0 20px}

  /* The UA rule for [hidden] is display:none in the user-agent origin, so any
     author rule beats it, .grid{display:grid} on an element carrying hidden
     left it on the screen with the attribute set. Nothing about the DOM says
     so: element.hidden reads true while the box is painted, which is how a
     test can report a row as hidden and be wrong. */
  [hidden]{display:none!important}
  a{color:var(--amber)}
  /* A control that reads as a link inside a sentence. It jumps between tabs on
     this page rather than navigating, so it is a button, href="#" would give a
     screen reader a link that goes nowhere and a keyboard user a lost place. */
  .linky{font:inherit;color:var(--amber);background:none;border:none;padding:0;
    text-decoration:underline;text-underline-offset:2px;cursor:pointer}
  .linky:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
  h2{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(26px,5.5vw,40px);line-height:1.03;margin:0 0 16px}
  h3{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:19px;margin:0 0 7px}
  p{margin:0 0 14px;color:#C3C8CE}
  .muted{color:var(--dim);font-size:14px}

  /* Scoped away from .onpage, the contents strip inside <main>. Unscoped,
     the strip inherited position:sticky (a second bar over the first) and,
     on a phone, flex-direction:column, five links stacked down the page. */
  nav:not(.onpage){position:sticky;top:0;z-index:60;background:rgba(23,26,31,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
  /* The nav is sticky, so a jump link lands its target underneath it and the
     heading somebody was sent to is the one thing they cannot see. Enough room
     for the tallest the bar gets, which is the two-line version on a phone. */
  /* One figure for two bars that are not the same height, which is how this
     has now been wrong twice. 96 was measured against the desktop bar and lost
     to the 106px phone one; 118 covered that and has since lost to the phone
     bar again, which is 144 on a touch device where the seven tabs wrap to
     three rows rather than the two they take in a desktop browser narrowed to
     the same width. Emulating a phone by resizing a window does not reproduce
     it, which is why it went unnoticed.
     So: measure each bar and reserve for it. The desktop bar is 80, the phone
     bar is at most 144, and neither number has to carry the other's slack. */
  :target{scroll-margin-top:152px}
  @media(min-width:641px){ :target{scroll-margin-top:96px} }
  nav:not(.onpage) .wrap{display:flex;align-items:center;justify-content:space-between;height:58px;gap:14px}
  /* The wordmark is the go-home control on every page and was 21px tall in
     the nav and 17px in the footer, under the 24px a standalone tap target
     wants. Padding rather than type size, so nothing moves visually. */
  .brand{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.09em;font-size:17px;color:var(--text);text-decoration:none;cursor:pointer;white-space:nowrap;
    display:inline-block;padding:4px 0;margin:-4px 0}
  .brand i{font-style:normal;color:var(--amber)}
  .tabs{display:flex;gap:4px}
  .tabs button{font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;font-size:13.5px;font-weight:600;background:none;border:none;color:var(--dim);padding:9px 12px;cursor:pointer;border-bottom:2px solid transparent}
  .tabs button[aria-selected=true]{color:var(--amber);border-bottom-color:var(--amber)}
  .tabs button:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
  @media(max-width:640px){
    nav:not(.onpage) .wrap{height:auto;flex-direction:column;align-items:flex-start;gap:2px;padding-top:8px;padding-bottom:4px}
    .tabs{width:100%;justify-content:flex-start;flex-wrap:wrap;gap:0 2px}
    .tabs button{padding:8px 4px;font-size:11.5px;letter-spacing:.04em}
    .brand{font-size:15px}
  }

  .view{display:none;padding-bottom:80px}
  .view.on{display:block}

  .eyebrow{font-family:var(--display);text-transform:uppercase;letter-spacing:.19em;font-size:12.5px;font-weight:600;color:var(--amber);margin-bottom:14px}
  .hero{padding:56px 0 42px;border-bottom:1px solid var(--line)}
  h1{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(36px,8.5vw,70px);line-height:.94;margin:0 0 18px}
  h1 span{color:var(--amber)}
  .lede{font-size:clamp(16px,2.3vw,19px);color:#C3C8CE;max-width:620px;margin:0 0 26px}

  .band{display:grid;grid-template-columns:repeat(12,1fr);height:70px;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--dusk);margin-top:34px}
  .mo{position:relative;border-right:1px solid rgba(255,255,255,.06);display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px}
  .mo:last-child{border-right:none}
  .mo.lit{background:var(--amber)}.mo.shoulder{background:var(--amber-dim)}
  .mo.storm{background:repeating-linear-gradient(135deg,rgba(192,81,47,.3) 0 6px,transparent 6px 12px)}
  .mo em{font-style:normal;font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.5)}
  /* The peak months are amber and take dark text. The shoulder months are a
     mid-tone, where dark text falls to 2.9:1, those take light text instead.
     One rule covered both, so half the season bar was unreadable. */
  .mo.lit em{color:var(--deep)}
  .mo.shoulder em{color:var(--text)}
  /* right:-100% lets the label centre across its own month and the next one,
     which is the run it actually describes. Both runs are interior to the
     band, so nothing is clipped by the rounded ends. */
  /* The label spans its own month and the next one, so it has to paint over the
     next month's background. Every .mo is position:relative, which makes the
     following month a positioned sibling later in the DOM, it was painting
     straight over the half of the word that overhung it, leaving NOR and SOU.
     Nothing was clipped, which is why measuring scrollWidth said it was fine;
     it was covered. z-index lifts it clear. */
  .mo b{position:absolute;z-index:2;top:8px;left:0;right:-100%;text-align:center;white-space:nowrap;font-family:var(--display);text-transform:uppercase;font-size:10.5px;letter-spacing:.08em;color:var(--deep);pointer-events:none}
  .bandkey{display:flex;flex-wrap:wrap;gap:16px;margin-top:11px;font-family:var(--mono);font-size:11px;color:var(--dim)}
  .bandkey i{display:inline-block;width:10px;height:10px;margin-right:5px;vertical-align:-1px;border-radius:1px}

  section{padding:46px 0;border-bottom:1px solid var(--line)}
  /* Used on both a div and an h2. As a class it beats the h2 element rule, so
     an h2.sec-label renders exactly as the div did, the page just gains the
     outline it was missing. */
  .sec-label{font-family:var(--display);text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:600;color:var(--dim);display:flex;align-items:center;gap:10px;margin:0 0 18px;line-height:1.3}
  .sec-label::after{content:"";flex:1;height:1px;background:var(--line)}
  .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
  /* Four cards in the three-up grid leaves one on its own with a hole beside
     it. Two by two balances, and gives each card a readable line length rather
     than a 215px column of body text. */
  .cols.pairs{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
  .card{background:var(--asphalt);border:1px solid var(--line);border-radius:3px;padding:20px}
  .card .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--amber);margin-bottom:9px}
  .card ul{margin:11px 0 0;padding-left:17px;color:#C3C8CE;font-size:14px}
  .card li{margin-bottom:4px}
  .card p:last-child{margin-bottom:0}
  /* Three cards whose text runs to different lengths put their buttons at
     three different heights, which reads as unfinished. Only the rows that
     end in an action opt in, .cols is used for prose cards too, and making
     every card a flex column would change spacing it has nothing to do with. */
  .cols.acts .card{display:flex;flex-direction:column}
  .cols.acts .card p:last-child{margin-top:auto;padding-top:14px}
  .figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin:22px 0 4px}
  .fig{border-left:2px solid var(--amber);padding-left:13px}
  .fig .n{font-family:var(--display);font-weight:700;font-size:31px;line-height:1}
  .fig .l{font-family:var(--mono);font-size:11px;color:var(--dim);margin-top:4px;line-height:1.45}

  .btn{display:inline-block;font-family:var(--display);text-transform:uppercase;letter-spacing:.11em;font-size:14.5px;font-weight:600;padding:13px 24px;border-radius:2px;text-decoration:none;border:1px solid var(--amber);background:var(--amber);color:var(--deep);cursor:pointer}
  .btn.ghost{background:transparent;color:var(--amber)}
  .btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
  /* The two calls to action used to sit under the season bar, its legend and
     its caption, about fifteen hundred pixels down on a phone, so the first
     screen offered nothing to do. They come before the bar now. */
  .btnrow{display:flex;flex-wrap:wrap;gap:11px;margin:24px 0 30px}

  /* A contents strip for the two pages that run past a dozen phone screens.
     One line under the hero, one tap per section, and nothing else, a second
     row of links would read as a second nav bar and be ignored as one.
     The rule is on the nav so it runs the full width like the hero's own,
     and the links sit in a .wrap inside it, the same shape every section on
     the site uses. :target carries the scroll-margin, so an anchor does not
     land underneath the sticky nav. */
  .onpage{border-bottom:1px solid var(--line)}
  .onpage .wrap{display:flex;flex-wrap:wrap;gap:0 18px;padding-top:12px;padding-bottom:12px;
          font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
  .onpage a{color:var(--dim);text-decoration:none;display:inline-block;padding:10px 0;line-height:1.4}
  .onpage a:hover{color:var(--amber)}
  .onpage a:focus-visible{outline:2px solid var(--text);outline-offset:2px}

  /* On a short phone the hero ran past the fold and took the buttons with it,
     so the way to the tool somebody came for was below the first screen on an
     iPhone SE and an iPhone 13 while being visible on a Pro Max. Tighten the
     air above the headline rather than shrink the headline: the space is the
     easiest thing on the page to give up, and it is only there to be generous
     on a desktop where there is room to be. */
  @media(max-height:700px){
    .hero{padding:22px 0 24px}
    .hero .lede{margin-bottom:4px}
    .btnrow{margin:16px 0 8px;gap:9px}
  }

  details{border-top:1px solid var(--line);padding:14px 0}
  details:first-of-type{border-top:none}
  summary{font-family:var(--display);text-transform:uppercase;font-size:17px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:baseline}
  summary::-webkit-details-marker{display:none}
  summary::after{content:"+";color:var(--amber);font-family:var(--mono)}
  details[open] summary::after{content:"\2013"}
  details p{margin:10px 0 0;font-size:14px}

  /* ---- shared tool chrome ---- */
  .panel{background:var(--asphalt);border:1px solid var(--line);border-radius:3px;padding:17px}
  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:12px}
  label{display:block}
  .lab{font-family:var(--display);text-transform:uppercase;letter-spacing:.11em;font-size:10.5px;font-weight:600;color:var(--dim);margin-bottom:5px}
  input,select,textarea{width:100%;background:var(--deep);border:1px solid var(--line);color:var(--text);font-family:var(--mono);font-size:13.5px;padding:9px 10px;border-radius:2px;appearance:none}
  textarea{font-family:var(--body);min-height:80px;resize:vertical;line-height:1.55}
  select{background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);background-position:calc(100% - 15px) 17px,calc(100% - 10px) 17px;background-size:5px 5px;background-repeat:no-repeat;padding-right:30px}
  input:focus,select:focus,textarea:focus{outline:2px solid var(--amber);outline-offset:1px;border-color:transparent}
  .auto{color:var(--amber)}
  /* This was scoped to button.act, so the ten places on the site that render a
     link as a button, the reply link in the queue, "Open it" on a watch link,
     the SAFER lookup, both calls to action on a finished signup, came out as
     plain amber text. A thing meant to be pressed has to look pressable,
     particularly for somebody who is not going to hunt for it. */
  .act{font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;font-size:13px;font-weight:600;padding:10px 17px;border-radius:2px;cursor:pointer;border:1px solid var(--amber);background:var(--amber);color:var(--deep)}
  a.act{display:inline-block;text-decoration:none;line-height:1.2}
  .act.ghost{background:transparent;color:var(--amber)}
  .act.tiny{padding:5px 10px;font-size:11px}
  .act.danger{border-color:var(--hazard);color:var(--hazard);background:transparent}
  .act:hover{filter:brightness(1.08)}
  .act:focus-visible{outline:2px solid var(--text);outline-offset:2px}
  .row{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
  .toast{font-family:var(--mono);font-size:11.5px;color:var(--amber);align-self:center}
  .note{font-size:12.5px;color:var(--dim);margin-top:10px;line-height:1.55}
  /* A note that carries a consequence, not just colour: the hazard rule is
     the site's mark for "read this before you act on it". */
  .note.warn{border-left:3px solid var(--hazard);padding:10px 0 10px 14px;color:var(--text)}
  .note.warn b{color:var(--hazard)}
  /* The roster loads with JavaScript, so with it off the list is empty. This
     is the one place that says so plainly and gives a way through, prominent
     because an empty page with a footer note reads as broken. */
  .nojs{border-color:var(--amber);margin-top:8px}
  .nojs .sec-label{color:var(--amber)}
  .note b{color:var(--amber);font-weight:500}
  .flag{border-left:3px solid var(--hazard);padding-left:14px;margin-top:15px}
  .flag p{margin:0;font-size:13px;color:#C3C8CE}

  /* tool switcher */
  .switch{display:flex;gap:0;border:1px solid var(--line);border-radius:2px;overflow:hidden;margin:22px 0 26px}
  .switch button{flex:1;font-family:var(--display);text-transform:uppercase;letter-spacing:.09em;font-size:13px;font-weight:600;padding:11px 6px;background:var(--deep);color:var(--dim);border:none;cursor:pointer}
  .switch button[aria-selected=true]{background:var(--amber);color:var(--deep)}
  /* The work pages switch lanes with anchors, not buttons, and only the mobile
     sheet ever styled those, on a wide screen the strip rendered as two plain
     underlined links inside an empty box. Same trap as .act: a component
     styled for one element and then used with another. */
  .switch a{flex:1;display:flex;align-items:center;justify-content:center;
    font-family:var(--display);text-transform:uppercase;letter-spacing:.09em;
    font-size:13px;font-weight:600;padding:11px 6px;background:var(--deep);
    color:var(--dim);text-decoration:none;text-align:center}
  .switch a[aria-current=page]{background:var(--amber);color:var(--deep)}
  .switch a:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}

  /* Both roster pages are written for owners, but a driver or a captain reads
     the nav, sees the noun that describes them, and clicks it. This is the door
     back out, stated on the page they land on, not buried in the nav. */
  .forwho{margin:22px 0 0;padding:13px 15px;border:1px solid var(--line);border-left:3px solid var(--sea);
    border-radius:2px;background:var(--asphalt);font-size:14px;color:#C3C8CE;max-width:620px}
  .forwho b{color:var(--text)}
  .forwho a{color:var(--amber)}

  /* The demand form when it is the page's first move rather than a fallback
     under an empty roster. */
  .lempty.want.primary{border-left:3px solid var(--amber)}

  /* ---- the delivery terms sheet ---- */
  .tsheet{margin:0;padding:15px 17px;font-family:var(--mono);font-size:11.5px;line-height:1.6;
    color:#C3C8CE;white-space:pre-wrap;word-break:break-word;max-height:420px;overflow:auto;
    border-top:1px solid var(--line)}
  /* The open questions are the point of the tool, so they read as a warning
     until there are none left. */
  .tgaps{margin:0;padding:15px 17px;border-top:1px solid var(--line);font-size:13.5px;color:#C3C8CE}
  .tgaps b{color:var(--hazard);font-family:var(--display);text-transform:uppercase;
    letter-spacing:.08em;font-size:13px}
  .tgaps.done b{color:var(--moss)}
  .tgaps ul{margin:8px 0 10px;padding-left:18px}
  .tgaps li{margin-bottom:3px}
  .tgaps p{margin:0;font-size:13px;color:var(--dim)}
  /* Off screen rather than display:none, a hidden element cannot be printed,
     and the print rules below move this one back to the top of the sheet. */
  .sr-offscreen{position:absolute;left:-9999px;top:0;width:80ch}

  /* ---- the inside route: places to watch ---- */
  .spots{margin-top:14px;border:1px solid var(--line);border-radius:3px;overflow:hidden}
  .spot{display:flex;gap:14px;padding:13px 15px;border-top:1px solid var(--line);background:var(--asphalt)}
  .spot:first-child{border-top:none}
  /* The tide ones are the shorter list and the ones that cost you a day if you
     get them wrong, so they carry the marker rather than all fifteen. */
  .spot.tide{border-left:3px solid var(--sea)}
  .spot .sday{flex:0 0 92px;font-family:var(--mono);font-size:11.5px;line-height:1.5;color:var(--dim)}
  .spot .sday b{display:block;font-family:var(--display);font-size:15px;font-weight:600;
    letter-spacing:.05em;color:var(--amber);text-transform:uppercase}
  .spot .sname{font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;
    font-size:16px;font-weight:600;margin-bottom:3px}
  .spot .sname i{font-style:normal;font-family:var(--mono);text-transform:none;letter-spacing:0;
    font-size:11.5px;color:var(--dim);margin-left:6px;white-space:nowrap}
  .spot .swhy{font-size:13.5px;color:#C3C8CE;line-height:1.5}
  .spot .stide{margin-top:5px;font-family:var(--mono);font-size:11.5px;color:var(--sea)}
  @media(max-width:520px){
    .spot{flex-direction:column;gap:6px}
    .spot .sday{flex:none}
    .spot .sday b{display:inline;margin-right:8px}
    /* 11.5px mono is fine on a desk and not on a phone held at arm's length,
       which is how most of this gets read. Nothing on a narrow screen goes
       under 12.5px. */
    .spot .sday, .spot .sname i, .spot .stide{font-size:12.5px}
  }

  /* A link that closes a card. On a phone it needs to be something you can hit
     with a thumb rather than 57 by 19 pixels of text. */
  .cardlink{display:inline-block;font-family:var(--display);text-transform:uppercase;
    letter-spacing:.09em;font-size:14px;font-weight:600;color:var(--amber);
    text-decoration:none;padding:4px 0}
  .cardlink:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

  /* ---- inside or outside: what pushed the answer ---- */
  .leans{margin-top:14px;border:1px solid var(--line);border-radius:3px;overflow:hidden}
  .lean{display:flex;gap:13px;padding:12px 15px;border-top:1px solid var(--line);background:var(--asphalt)}
  .lean:first-child{border-top:none}
  .lean .lk{flex:0 0 82px;font-family:var(--mono);font-size:11.5px;text-transform:uppercase;
    letter-spacing:.06em;color:var(--dim);padding-top:2px}
  .lean.inside  .lk{color:var(--moss)}
  .lean.outside .lk{color:var(--sea)}
  .lean.hard    .lk{color:var(--hazard)}
  .lean .lv{font-size:13.5px;color:#C3C8CE;line-height:1.5}

  /* Where to go for the live picture. These were three 17-pixel-tall links
     inside a caveat paragraph, which is both hard to hit and the wrong place
     for the most useful thing on the panel. */
  .outlinks{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-top:12px}
  .outlink{display:block;padding:11px 13px;min-height:46px;border:1px solid var(--line);
    border-radius:2px;background:var(--deep);color:var(--amber);text-decoration:none;
    font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-size:14px;font-weight:600}
  .outlink i{display:block;margin-top:3px;font-style:normal;font-family:var(--body);
    text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:400;color:var(--dim)}
  .outlink:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
  @media(max-width:520px){
    .lean{flex-direction:column;gap:4px}
    .lean .lk{flex:none;font-size:12.5px;padding-top:0}
  }
  @media(pointer:coarse){
    .cardlink{min-height:46px;display:flex;align-items:center}
  }

  /* The eyebrow sits hard against the breadcrumb when a hero carries both. */
  .crumb + .eyebrow{margin-top:14px}
  .tool{display:none}.tool.on{display:block}
  .work{display:none}.work.on{display:block}

  /* haul planner */
  .day{border-top:1px solid var(--line);padding:16px 0;display:grid;grid-template-columns:48px 1fr;gap:14px}
  .day:first-child{border-top:none}
  .daynum{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
  .daynum em{display:block;font-style:normal;font-size:24px;color:var(--text);line-height:1}
  .dayhead{display:flex;flex-wrap:wrap;gap:5px 14px;align-items:baseline;margin-bottom:10px}
  .dayhead .date{font-family:var(--display);font-size:18px;font-weight:600;text-transform:uppercase}
  .dayhead .miles{font-family:var(--mono);font-size:12px;color:var(--amber)}
  .dayhead .held{font-family:var(--mono);font-size:11.5px;color:var(--hazard);text-transform:uppercase;letter-spacing:.08em}
  .track{position:relative;height:36px;background:var(--dusk);border:1px solid var(--line);border-radius:2px;overflow:hidden}
  .window{position:absolute;top:0;bottom:0;background:var(--amber-dim);opacity:.45}
  .drive{position:absolute;top:0;bottom:0;background:var(--amber)}
  .tick{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.08)}
  .ticklab{position:absolute;bottom:3px;font-family:var(--mono);font-size:9px;color:rgba(255,255,255,.42);transform:translateX(-50%)}
  .sunline{display:flex;gap:13px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;color:var(--dim);margin-top:6px}
  .sunline b{color:var(--amber);font-weight:500}
  .stop{display:flex;gap:8px;align-items:baseline;margin-top:8px;font-size:13px;color:var(--dim)}
  .stop .pin{color:var(--amber);font-family:var(--mono);font-size:11px;white-space:nowrap}
  .stop input{flex:1;background:transparent;border:none;border-bottom:1px dashed var(--line);padding:2px 0;font-family:var(--body);font-size:13px;color:var(--text);border-radius:0}
  .stop input:focus{outline:none;border-bottom-color:var(--amber)}
  .arrive{background:var(--asphalt);border:1px solid var(--amber);border-radius:3px;padding:18px;margin-top:8px}
  .arrive .big{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(20px,4.6vw,29px);line-height:1.05}
  .arrive .big span{color:var(--amber)}
  .arrive .nt{font-size:13px;color:var(--dim);margin-top:10px;line-height:1.55}
  .arrive .nt b{color:var(--text);font-weight:500}
  ol.rl{list-style:none;margin:14px 0 0;padding:0;counter-reset:wp}
  ol.rl li{counter-increment:wp;display:grid;grid-template-columns:32px 1fr;gap:11px;padding:8px 0;border-top:1px solid var(--line);font-family:var(--mono);font-size:13px}
  ol.rl li:first-child{border-top:none}
  ol.rl li::before{content:counter(wp,decimal-leading-zero);color:var(--amber);font-size:11px;padding-top:2px}
  .trouble{border-left:3px solid var(--hazard);padding-left:15px}
  .trouble h4{font-family:var(--display);text-transform:uppercase;letter-spacing:.07em;font-size:14.5px;margin:14px 0 4px;font-weight:600}
  .trouble h4:first-child{margin-top:0}
  .trouble p{margin:0;font-size:13px;color:var(--dim);line-height:1.6}
  .modes{display:flex;border:1px solid var(--line);border-radius:2px;overflow:hidden;margin-bottom:14px}
  .modes label{flex:1;position:relative}
  .modes input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
  .modes span{display:block;text-align:center;font-family:var(--display);text-transform:uppercase;letter-spacing:.09em;font-size:12.5px;font-weight:600;padding:10px 6px;color:var(--dim);cursor:pointer;background:var(--deep)}
  .modes input:checked+span{background:var(--amber);color:var(--deep)}
  .checks{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
  .chk{position:relative}
  .chk input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
  .chk span{display:block;font-family:var(--mono);font-size:11.5px;padding:6px 10px;border:1px solid var(--line);border-radius:2px;color:var(--dim);background:var(--deep);cursor:pointer}
  .chk input:checked+span{background:var(--hazard);border-color:var(--hazard);color:var(--deep);font-weight:600}

  /* quote */
  .split{display:grid;grid-template-columns:1fr 320px;gap:22px;align-items:start}
  @media(max-width:820px){.split{grid-template-columns:1fr}}
  .sum{position:sticky;top:74px;background:var(--asphalt);border:1px solid var(--amber);border-radius:3px;overflow:hidden}
  .sumhead{padding:17px 17px 12px}
  .sumhead .k{font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-size:10.5px;color:var(--dim)}
  .price{font-family:var(--display);font-weight:700;font-size:clamp(34px,7vw,46px);line-height:1;margin:3px 0 2px}
  .price small{font-size:.42em;color:var(--dim);font-weight:500}
  .stack{display:flex;height:24px;margin:14px 17px 0;border-radius:2px;overflow:hidden;background:var(--dusk)}
  .legend{padding:11px 17px 3px}
  .lrow{display:grid;grid-template-columns:11px 1fr auto;gap:8px;align-items:center;padding:4px 0;font-size:12.5px}
  .lrow i{width:10px;height:10px;border-radius:1px;display:block}
  .lrow .v{font-family:var(--mono);font-size:12px;color:#C3C8CE}
  .lrow.tot{border-top:1px solid var(--line);margin-top:5px;padding-top:8px;font-weight:600}
  .kpis{border-top:1px solid var(--line);margin-top:9px;padding:12px 17px 3px}
  .kpi{display:flex;justify-content:space-between;gap:11px;padding:5px 0;font-size:13px}
  .kpi .k{color:var(--dim)}
  .kpi .v{font-family:var(--mono);font-size:12.5px}
  .kpi .v.good{color:var(--moss)}.kpi .v.warn{color:var(--hazard)}
  .driverbox{margin:12px 17px 16px;border-left:3px solid var(--amber);padding-left:12px}
  .driverbox.thin{border-left-color:var(--hazard)}
  .driverbox .big{font-family:var(--display);font-weight:700;font-size:24px;line-height:1.05}
  .driverbox .cap{font-family:var(--mono);font-size:10.5px;color:var(--dim);margin-top:3px;line-height:1.5}

  /* board */
  .lane{border:1px solid var(--line);border-radius:3px;background:var(--asphalt);margin-bottom:13px;overflow:hidden}
  .lanehead{display:flex;flex-wrap:wrap;gap:9px 15px;align-items:baseline;justify-content:space-between;padding:13px 15px 11px}
  .lanename{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:20px}
  .lanestat{font-family:var(--mono);font-size:11px;color:var(--dim)}
  .lanestat b{color:var(--amber);font-weight:500}
  .strip{position:relative;height:40px;background:var(--dusk);margin:0 15px;border-radius:2px;overflow:hidden}
  .wk{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.07)}
  .wklab{position:absolute;top:4px;font-family:var(--mono);font-size:9px;color:rgba(255,255,255,.4);transform:translateX(-50%)}
  .blk{position:absolute;top:13px;height:21px;background:var(--amber);border-radius:2px;display:flex;align-items:center;padding:0 5px;overflow:hidden}
  .blk.capt{background:var(--sea)}.blk.late{background:var(--hazard)}
  .blk em{font-style:normal;font-family:var(--mono);font-size:9.5px;font-weight:600;color:var(--deep);white-space:nowrap}
  .blk.capt em,.blk.late em{color:#fff}
  .lanelist{padding:11px 15px 15px}
  .leg{display:grid;grid-template-columns:1fr auto;gap:9px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
  .leg:first-child{border-top:none}
  .leg .d{font-family:var(--mono);font-size:11px;color:var(--dim);margin-top:2px}
  .leg .d.bad{color:var(--hazard)}
  .move{display:grid;grid-template-columns:1fr auto;gap:11px;align-items:center;padding:11px 0;border-top:1px solid var(--line)}
  .move:first-child{border-top:none}
  .move .m{font-family:var(--mono);font-size:11px;color:var(--dim);margin-top:3px}
  .move select{min-width:130px;font-size:12px;padding:7px 9px}
  .badge{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:2px;margin-left:6px;vertical-align:1px}
  .badge.truck{background:var(--amber-dim);color:#F5D89A}
  .badge.capt{background:#1F4A52;color:#9BD4DF}
  .empty{font-family:var(--mono);font-size:12px;color:var(--dim);padding:12px 0}

  /* load dimensions, what the permit is written from */
  .dims{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
        border-radius:3px;margin:14px 0 4px;overflow:hidden}
  .dims:empty{display:none}
  .dim{background:var(--asphalt);padding:10px 13px;display:grid;
       grid-template-columns:auto 1fr;gap:12px;align-items:baseline;
       border-left:3px solid var(--line)}
  .dim.ok{border-left-color:var(--moss)}
  .dim.note{border-left-color:var(--sea)}
  .dim.permit{border-left-color:var(--amber)}
  .dim.survey{border-left-color:var(--hazard)}
  .dim .dk{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
           text-transform:uppercase;color:var(--dim);min-width:52px}
  .dim .dv{font-size:14px;line-height:1.5;color:var(--text)}
  .dim.ok .dv{color:var(--dim)}
  .dims .empty{padding:12px 13px;background:var(--asphalt)}

  /* arrive-by: the last day he can roll */
  .latest:empty{display:none}
  .latestline{border-left:3px solid var(--amber);background:var(--deep);
              border-radius:3px;padding:12px 14px;margin-top:12px;display:grid;gap:4px}
  .latestline b{font-family:var(--display);font-size:20px;letter-spacing:.01em;color:var(--text)}
  .latestline span{font-size:13.5px;color:var(--dim);line-height:1.5}
  .warnline{border-left:3px solid var(--hazard);background:var(--deep);
            border-radius:3px;padding:12px 14px;margin-top:12px;
            font-size:13.5px;color:var(--text);line-height:1.5}
  .latest .empty{padding:12px 14px;margin-top:12px;background:var(--deep);border-radius:3px}

  /* signup: honeypot, consent, optional marker */
  .pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .lab .opt{font-weight:400;text-transform:none;letter-spacing:0;color:var(--dim);
            font-size:10px;margin-left:5px}
  .consent{display:flex;gap:10px;align-items:flex-start;margin:16px 0 14px;
           font-size:13.5px;line-height:1.5;color:var(--dim);cursor:pointer}
  /* the global input rule sets width:100% and appearance:none, which turns a
     checkbox into an invisible full-width box, undo both here */
  .consent input{appearance:auto;-webkit-appearance:checkbox;
                 width:16px;min-width:16px;height:16px;flex:none;
                 padding:0;margin:2px 0 0;border:0;background:none;
                 border-radius:0;accent-color:var(--amber);cursor:pointer}
  .consent span{max-width:52ch}

  /* listings, the browse pages */
  .rostercount{font-family:var(--mono);font-size:12px;letter-spacing:.06em;
               color:var(--amber);margin-top:14px}
  /* The cost link in that line is something to press, not incidental prose, so
     it gets a target rather than the inline exemption. Padding rather than a
     bigger font, so the line still reads as a quiet count. */
  .rostercount a{display:inline-block;padding:10px 4px;margin:-10px 0;color:var(--amber)}
  .rostercount:empty{display:none}
  .listings{display:grid;gap:14px;margin-top:18px}
  .listings[aria-busy="true"]{opacity:.5}
  .lcard{background:var(--asphalt);border:1px solid var(--line);border-radius:3px;padding:18px 20px}
  .lhead{display:flex;gap:12px;align-items:baseline;justify-content:space-between;flex-wrap:wrap}
  .lcard h2{font-family:var(--display);font-size:24px;margin:0;letter-spacing:.01em;text-transform:none;line-height:1.15}
  .lkind{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
         padding:3px 8px;border-radius:2px;background:var(--dusk);color:var(--dim);white-space:nowrap}
  .lkind.carrier{background:var(--amber-dim);color:#F7E4BF}
  .lkind.captain{background:#2A4048;color:#BFE0E8}
  .lco{font-size:13.5px;color:var(--dim);margin-top:2px}
  .lchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
  .lchip{font-family:var(--mono);font-size:11px;color:var(--dim);
         border:1px solid var(--line);border-radius:2px;padding:3px 7px}
  .lnote{margin:11px 0 0;font-size:14.5px;line-height:1.55;color:#C3C8CE;max-width:62ch}
  .lverify{font-family:var(--mono);font-size:11.5px;margin-top:11px;color:var(--dim)}
  .lverify.ok{color:var(--moss)}
  .lverify.bad{color:var(--hazard)}
  .lfoot{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:15px;
         padding-top:13px;border-top:1px solid var(--line)}
  .lsr{font-family:var(--mono);font-size:10.5px;color:var(--dim)}
  .lempty{background:var(--asphalt);border:1px solid var(--line);border-radius:3px;
          padding:22px;color:var(--dim);font-size:14.5px;line-height:1.6}
  .lempty a{color:var(--amber)}
  /* Asks this browser is holding. Sits above the roster and stays quiet, it is
     a way back to something, not an announcement. */
  .asks{background:var(--asphalt);border:1px solid var(--line);border-left:3px solid var(--amber);
        border-radius:3px;padding:16px 18px;margin-bottom:16px;font-size:14px;
        line-height:1.6;color:var(--dim)}
  .asks b{color:var(--paper)}
  .askl{list-style:none;margin:10px 0 8px;padding:0;display:grid;gap:6px}
  .askl li{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
  .askl a{color:var(--amber)}
  .askl .fine{font-family:var(--mono);font-size:10.5px;color:var(--dim)}
  /* A listing that answers on the spot. Moss rather than amber: it is a fact
     about the listing, not something asking to be clicked. */
  .lanswer{font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--moss);
           margin-top:9px}
  /* A measured habit is a fact, not a promise, said plainly rather than in the
     colour reserved for something the site will stand behind. */
  .lanswer.plain{color:var(--dim)}
  /* A captain's own account of their cover. Not styled as a check, because it
     is not one, the .ok is only a little warmer than the plain state. */
  .lins{font-size:13px;color:var(--dim);margin-top:8px}
  .lins.ok{color:var(--paper)}
  .lins .lsr{margin-left:4px}

  /* What a move costs. The total is the answer somebody came for, so it is the
     size of an answer; the breakdown under it is why, at the size of a reason. */
  .ctotal{text-align:center;padding:26px 20px}
  .cbig{font-family:var(--display);font-weight:700;font-size:46px;letter-spacing:-.01em;
        color:var(--amber);line-height:1}
  .cwhat{font-size:14px;color:var(--dim);margin-top:8px}
  .cline{display:flex;align-items:baseline;gap:10px;padding:9px 0;
         border-bottom:1px solid var(--line);font-size:14px}
  .cline:last-child{border-bottom:none}
  .cline .k{color:var(--dim);flex:1}
  .cline .v{font-family:var(--mono);font-size:13px;color:var(--paper)}
  .cline .n{font-family:var(--mono);font-size:10.5px;color:var(--dim);
            flex-basis:100%;order:3;margin-top:-4px}
  .cline.total{border-top:2px solid var(--line);margin-top:6px;padding-top:13px}
  .cline.total .k{color:var(--paper);font-weight:600}
  .cline.total .v{color:var(--amber);font-size:15px}
  /* One quote and the read on it, banded so the sentence stays attached to
     the row it is about rather than floating between two of them. */
  .cq{padding:10px 0;border-bottom:1px solid var(--line)}
  .cq:last-of-type{border-bottom:none}
  .cq .cline{border-bottom:none;padding:2px 0;flex-wrap:wrap}
  /* .cline .k is flex:1, and flex-basis:0 makes the label as narrow as it can
     be. That never showed with "Driver" and "Fuel" in it; with somebody's name
     in it, "Dave at the yard" came out one word per line. */
  .cq .cline .k{flex:1 1 auto;min-width:0;color:var(--paper)}
  @media(max-width:560px){ .cbig{font-size:38px} }
  .mgnow{font-size:14px;line-height:1.6;color:var(--dim);margin:6px 0 12px}
  .mgnow b{color:var(--paper)}

  /* /ops, what is switched on. A list of facts, so it reads as a list. */
  .statgrid{border:1px solid var(--line);border-radius:3px;overflow:hidden;margin-top:10px}
  .statrow{display:flex;justify-content:space-between;align-items:center;gap:14px;
           padding:11px 14px;font-size:13.5px;border-bottom:1px solid var(--line)}
  .statrow:last-child{border-bottom:none}
  .statrow .k{color:var(--dim)}
  .statrow .v{color:var(--paper);font-family:var(--mono);font-size:12px;text-align:right}
  .statrow .v code{font-size:11px;color:var(--dim)}
  /* The dot is decoration; the word beside it carries the meaning, so a reader
     who cannot tell the colours apart loses nothing. */
  .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;
       vertical-align:1px}
  .dot.ok{background:var(--moss)}
  .dot.bad{background:var(--hazard)}
  .dot.warn{background:var(--amber)}
  /* truck or water, the ladder */
  .ladder{display:grid;gap:2px;margin-top:14px;border:1px solid var(--line);border-radius:3px;overflow:hidden}
  .rung{display:grid;grid-template-columns:30px 1fr auto;gap:12px;align-items:center;
        padding:11px 14px;background:var(--asphalt);color:var(--dim);font-size:14px}
  .rung.on{background:var(--amber);color:var(--deep)}
  .rung .rn{font-family:var(--display);font-weight:700;font-size:16px;text-align:center}
  .rung .rt{font-weight:500}
  .rung.on .rt{font-weight:600}
  .rung .rw{font-family:var(--mono);font-size:12px;white-space:nowrap}
  .gates{display:grid;gap:9px;margin-top:14px}
  .watercase{margin-top:20px;border:1px solid var(--line);border-left-width:3px;border-radius:3px;
             background:var(--asphalt);padding:16px 18px}
  .watercase.unlikely{border-left-color:var(--line)}
  .watercase.worth-it{border-left-color:var(--amber)}
  .watercase.better{border-left-color:var(--sea)}
  .wcase{font-family:var(--display);text-transform:uppercase;letter-spacing:.03em;font-size:20px;
         margin-bottom:8px}
  .watercase p{max-width:64ch;font-size:15px;line-height:1.6}
  .watercase a{color:var(--amber)}
  @media(max-width:640px){
    .rung{grid-template-columns:24px 1fr;gap:9px;font-size:13.5px}
    .rung .rw{grid-column:2;font-size:11.5px;margin-top:2px}
  }

  /* air draft, will she fit under */
  .verdict{border:1px solid var(--line);border-left-width:3px;border-radius:3px;
           background:var(--asphalt);padding:18px 20px;margin-top:18px}
  .verdict.clear{border-left-color:var(--moss)}
  .verdict.tight{border-left-color:var(--amber)}
  .verdict.detour{border-left-color:var(--amber)}
  .verdict.outside{border-left-color:var(--hazard)}
  .vhead{font-family:var(--display);text-transform:uppercase;letter-spacing:.03em;
         font-size:24px;line-height:1.1}
  .vsub{margin-top:6px;font-size:15px;color:#C3C8CE;max-width:60ch}
  .vair{font-family:var(--mono);font-size:12px;color:var(--dim);margin-top:9px}
  .gates{display:grid;gap:10px;margin-top:14px}
  .gate{border:1px solid var(--line);border-radius:3px;padding:13px 16px;background:var(--asphalt)}
  .gate.no{border-color:var(--hazard)}
  .gate.tight{border-color:var(--amber-dim)}
  .ghead{display:flex;gap:12px;justify-content:space-between;align-items:baseline;flex-wrap:wrap}
  .ghead b{font-size:15px}
  .gft{font-family:var(--mono);font-size:12px;color:var(--dim);white-space:nowrap}
  .gword{font-family:var(--mono);font-size:12.5px;margin-top:5px;color:var(--moss)}
  .gate.tight .gword{color:var(--amber)}
  .gate.no .gword{color:var(--hazard)}
  .gaway{margin:9px 0 0;font-size:14px;line-height:1.55;color:#C3C8CE;max-width:64ch}

  /* what a signup looks like once it has gone. A toast that fades after six
     seconds is not enough reassurance for somebody who is not sure the button
     worked. */
  .sent h2{font-size:clamp(24px,4.5vw,34px);margin:4px 0 12px}
  .sent p{max-width:62ch;font-size:16px;line-height:1.6}
  .sent .row{margin-top:18px}

  /* the first-timer walkthrough on the home page */
  .steps{list-style:none;counter-reset:step;padding:0;margin:22px 0 0}
  .steps li{counter-increment:step;position:relative;padding:0 0 22px 46px;
            border-top:1px solid var(--line);padding-top:22px}
  .steps li:first-child{border-top:none;padding-top:4px}
  .steps li:before{content:counter(step);position:absolute;left:0;top:20px;
                   font-family:var(--display);font-size:22px;font-weight:700;color:var(--amber);
                   line-height:1}
  .steps li:first-child:before{top:2px}
  .steps h3{font-family:var(--display);text-transform:none;letter-spacing:.01em;
            font-size:21px;margin:0 0 9px;color:var(--text)}
  .steps p{max-width:66ch;font-size:15.5px;line-height:1.65}
  .steps p:last-child{margin-bottom:0}
  .steps b{color:var(--text)}
  .steps a{color:var(--amber)}
  @media(max-width:640px){
    .steps li{padding-left:0;padding-top:18px}
    .steps li:before{position:static;display:block;margin-bottom:6px}
    .steps li:first-child:before{margin-bottom:6px}
    .steps h3{font-size:19px}
  }

  /* what a carrier can take, the line an owner is actually looking for */
  .lcap{font-family:var(--mono);font-size:12.5px;margin-top:11px;color:#C3C8CE;line-height:1.5}
  .lcap.fits{color:var(--moss)}
  .lcap.tight{color:var(--hazard)}
  .lcap.none{color:var(--dim)}
  .lboats{font-family:var(--mono);font-size:12.5px;color:#C3C8CE;margin-top:9px;line-height:1.5}
  .lavail{font-family:var(--mono);font-size:12.5px;color:var(--amber);margin-top:9px;letter-spacing:.02em}
  .lcap b{font-family:var(--body);font-weight:600}
  @media(max-width:640px){.lcap{font-size:13px}}

  /* the filter fold, open on a wide screen, tucked away on a phone */
  .lfilter{margin-bottom:4px}
  .lfilter summary{font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;
                   font-size:12.5px;font-weight:600;color:var(--dim);cursor:pointer;
                   padding:12px 0;min-height:46px;display:inline-flex;align-items:center;gap:8px}
  .lfilter summary::after{content:"+";color:var(--amber);font-family:var(--mono)}
  .lfilter[open] summary::after{content:"\2013"}
  .lfilter summary:hover{color:var(--amber)}
  .lfilter .panel{margin-top:4px}
  @media(min-width:700px){
    /* On a wide screen the fold is noise: show the summary as a plain label. */
    .lfilter summary{cursor:default;pointer-events:none}
    .lfilter summary::after{display:none}
  }

  /* an empty roster is a demand signal, not a dead end */
  .lempty.want{padding:24px}
  .wlead{font-size:16px;line-height:1.6;color:var(--text);margin:0 0 16px;max-width:64ch}
  .lempty.want .grid{margin-top:10px}
  .lempty.want .sec-label{margin-top:4px}
  .lmore{margin-top:16px;border:1px solid var(--line);border-radius:3px;background:var(--asphalt)}
  .lmore summary{cursor:pointer;padding:14px 20px;font-family:var(--display);text-transform:uppercase;
                 letter-spacing:.07em;font-size:13px;font-weight:600;color:var(--dim)}
  .lmore summary:hover{color:var(--amber)}
  .lmore[open] summary{border-bottom:1px solid var(--line);color:var(--text)}
  .lmore .lempty{border:none;background:none;padding:4px 20px 20px}

  /* prose lists, privacy and terms */
  ul.plain{list-style:none;padding:0;margin:14px 0;max-width:72ch}
  ul.plain li{padding:11px 0 11px 20px;border-top:1px solid var(--line);position:relative;
              font-size:15.5px;line-height:1.62;color:#C3C8CE}
  ul.plain li:first-child{border-top:none}
  ul.plain li:before{content:"";position:absolute;left:2px;top:20px;width:7px;height:1px;background:var(--amber)}
  ul.plain b{color:var(--text)}
  section h3{margin-top:22px}

  /* asking, and the page where the answer happens */
  .askbox{margin-top:15px;padding-top:15px;border-top:1px solid var(--line)}
  .askbox .grid{margin-top:10px}
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .asent{font-size:15px;color:#C3C8CE;margin:0 0 10px}
  .alink{background:var(--deep);border:1px solid var(--line);border-radius:2px;
         padding:11px 13px;margin:10px 0;overflow-x:auto}
  .alink code{font-family:var(--mono);font-size:12px;color:var(--amber);white-space:nowrap}
  .panel.reveal{border-color:var(--moss)}
  .cname{font-family:var(--display);font-size:26px;letter-spacing:.01em}
  .crow{font-family:var(--mono);font-size:14px;margin-top:6px}
  .crow a{color:var(--amber)}
  #rvBox[aria-busy="true"]{opacity:.5}

  /* the approve queue, /ops only, never seen by a visitor */
  #aQueue,#aListings,#aReq{display:grid;gap:14px;margin-top:14px}
  #aQueue[aria-busy="true"],#aListings[aria-busy="true"],#aReq[aria-busy="true"]{opacity:.5}
  .qcard{background:var(--asphalt);border:1px solid var(--line);border-radius:3px;padding:16px 18px}
  .qcard.off{opacity:.72;border-style:dashed}
  .qhead{display:flex;gap:12px;align-items:baseline;justify-content:space-between;flex-wrap:wrap}
  .qhead b{font-family:var(--display);font-size:20px;letter-spacing:.01em}
  .qmeta{font-family:var(--mono);font-size:11px;color:var(--dim)}
  .qkind{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
         padding:3px 8px;border-radius:2px;background:var(--dusk);color:var(--dim)}
  .qkind.carrier{background:var(--amber-dim);color:#F7E4BF}
  .qkind.captain{background:#2A4048;color:#BFE0E8}
  .qflag{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
         padding:3px 7px;border-radius:2px;background:var(--amber-dim);color:#F7E4BF}
  .qflag.no{background:transparent;border:1px solid var(--line);color:var(--dim)}
  .qcontact{font-family:var(--mono);font-size:12.5px;color:var(--dim);margin-top:5px}
  .qcontact a{color:var(--amber)}
  .qbody{margin-top:13px}
  .qask{font-size:14.5px;color:#C3C8CE;margin:0 0 12px}
  .qgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:5px 18px;
         font-size:13.5px;color:#C3C8CE}
  .qk{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
  .qnote{margin:11px 0 0;font-size:14px;line-height:1.55;color:#C3C8CE;max-width:62ch;
         border-left:2px solid var(--line);padding-left:12px}
  .qdot{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px;
        padding-top:11px;border-top:1px solid var(--line)}
  .qdot select{width:auto;min-width:170px}
  .qdot a{color:var(--amber);font-family:var(--mono);font-size:12.5px}
  .toast.bad{color:var(--hazard)}

  .card h3 a{color:inherit;text-decoration:none;border-bottom:1px solid var(--amber-dim)}
  .card h3 a:hover{border-bottom-color:var(--amber)}

  /* route planner */
  #rMap{height:400px;border:1px solid var(--line);border-radius:3px;background:var(--dusk)}
  .leaflet-container{background:var(--dusk)}
  .mapbar{display:flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:2px;overflow:hidden;margin-bottom:12px}
  .mapbar button{flex:1;background:var(--deep);color:var(--dim);border:none;border-radius:0;min-width:112px;font-family:var(--display);text-transform:uppercase;letter-spacing:.09em;font-size:12.5px;font-weight:600;padding:10px 6px;cursor:pointer}
  .mapbar button[aria-pressed=true]{background:var(--amber);color:var(--deep)}
  .maphint{font-family:var(--mono);font-size:11.5px;color:var(--dim);margin-top:9px}
  .nomap{display:none;padding:24px;text-align:center;font-family:var(--mono);font-size:12.5px;color:var(--dim);border:1px dashed var(--line);border-radius:3px}
  .item{display:grid;grid-template-columns:26px 1fr auto;gap:11px;align-items:start;padding:11px 0;border-top:1px solid var(--line)}
  .item:first-child{border-top:none}
  .item .idx{font-family:var(--mono);font-size:11px;color:var(--amber);padding-top:3px}
  .item .nm{font-size:14.5px}
  .item .mt{font-family:var(--mono);font-size:11px;color:var(--dim);margin-top:3px;line-height:1.5}
  .item .mt .src{color:var(--moss)}
  .item .mt .none{color:var(--hazard)}
  .pill{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:2px;margin-left:6px;vertical-align:1px;background:var(--amber-dim);color:#F5D89A}
  .pill.city{background:#1F4A52;color:#9BD4DF}
  .pill.road{background:#3A4A2E;color:#B7D49A}
  .warn{border:1px solid var(--hazard);border-radius:3px;background:rgba(192,81,47,.08);padding:16px}
  .warn h4{font-family:var(--display);text-transform:uppercase;letter-spacing:.05em;font-size:17px;margin:0 0 9px;color:#E9A88F}
  .warn .w{display:grid;gap:3px;padding:9px 0;border-top:1px solid rgba(192,81,47,.3)}
  .warn .w:first-of-type{border-top:none}
  .warn .w b{font-size:14px;color:var(--text)}
  .warn .w span{font-family:var(--mono);font-size:11.5px;color:#C3C8CE}
  .clear{border:1px solid var(--moss);border-radius:3px;background:rgba(94,122,74,.09);padding:14px;font-size:14px;color:#C7D9B8}
  /* personal views */
  .pv{padding:44px 0 60px}
  .pvtag{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--deep);background:var(--amber);padding:3px 8px;border-radius:2px;display:inline-block}
  .pvname{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(30px,7vw,50px);line-height:.96;margin:14px 0 6px}
  .pvsub{font-family:var(--mono);font-size:12.5px;color:var(--dim)}
  .run{border:1px solid var(--line);border-radius:3px;background:var(--asphalt);padding:16px;margin-bottom:11px}
  .run.now{border-color:var(--amber)}
  .run .rh{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;justify-content:space-between}
  .run .rt{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:19px}
  .run .rd{font-family:var(--mono);font-size:11.5px;color:var(--amber)}
  .run .rm{font-family:var(--mono);font-size:11.5px;color:var(--dim);margin-top:6px}
  .run .badge2{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;background:var(--amber);color:var(--deep);padding:2px 7px;border-radius:2px}
  .post{border-left:2px solid var(--line);padding:9px 0 9px 13px;margin-left:2px}
  .post b{font-size:14px}
  .post span{display:block;font-family:var(--mono);font-size:11px;color:var(--dim);margin-top:2px}
  .post:first-child{border-left-color:var(--amber)}
  footer{padding:36px 0 60px}
  .fine{font-size:12px;color:#888E96;line-height:1.65;margin-top:16px}
  /* ---- phones and thumbs ----
     Two things here are not cosmetic. Any form control under 16px makes iOS
     Safari zoom the whole page the moment it is focused, which on the signup
     form meant the page lurched on every single field. And a 38px control is
     under both Apple's 44pt and Google's 48dp minimum, which matters when the
     person filling it in is standing next to a truck. */
  @media(pointer:coarse){
    input,select,textarea{font-size:16px;padding:12px 12px;min-height:46px}
    /* The route planner's stop rows use a borderless inline input that sets its
       own size, so the rule above misses it and iOS zooms on it. */
    .stop input{font-size:16px;padding:8px 0;min-height:40px}
    .move select{font-size:16px;padding:10px;min-height:46px}
    /* FAQ rows are a primary control on the home page and were 27px tall. */
    summary{padding:12px 0}
    details{padding-bottom:2px}
    /* The three route cards on the home page link from inside their heading,
       and the work page switches lanes with plain anchors. Both are primary
       navigation that a thumb has to hit. */
    .card h3 a{display:inline-block;padding:8px 0}
    .switch a{display:flex;align-items:center;justify-content:center;min-height:46px}
    .stop input{min-height:44px}
    /* The hidden radio covering each mode chip is 46px because of the rule
       above, so the tap target was already right, but the visible chip was
       39px, which looks smaller than it is. Match them. */
    .modes span{min-height:46px;display:flex;align-items:center;justify-content:center}
    .skip{padding:15px 18px;min-height:44px;box-sizing:border-box}
    /* A line that is only a contact address is a button in all but name. */
    .contactline a{display:inline-flex;align-items:center;min-height:46px}
    textarea{min-height:78px}
    button,.act{min-height:46px}
    .act{padding:12px 18px;font-size:13.5px}
    .switch button{padding:14px 8px;font-size:13px}
    .mapbar button{padding:13px 8px}
    label input[type=checkbox]{min-height:0}
    /* A consent label is the tap target, not the 16px box inside it. The one on
       the signup form runs to two lines and is comfortably tappable by accident;
       the one-line ones, "She has a rig that would have to come out", were a
       20px strip. Padding rather than align-items:center, so the box stays level
       with the first line when the text wraps. */
    .consent{padding:11px 0;min-height:44px}
    /* A footer link row cannot give every item 44px without looking absurd, but
       it can stop them touching. The brand and the breadcrumb are real
       navigation and do get the full target. */
    footer .fine a{display:inline-block;padding:9px 2px}
    .crumb{padding:14px 0 0}
    .crumb a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
    .brand{display:inline-block;padding:12px 0}
    .skip{padding:14px 18px}
  }
  @media(max-width:640px){
    /* 10.5px mono in a truck stop is not readable, and some of it is the
       number the reader came for, the driver page states the day count in
       .k and .cap. Nothing here changes the desktop sizes. */
    .note{font-size:13.5px}
    .fine{font-size:13px;line-height:1.7}
    .lab,.sumhead .k{font-size:12px;letter-spacing:.09em}
    .fig .l,.driverbox .cap{font-size:12.5px;line-height:1.55}
    .empty,.dayhead .miles,.nomap{font-size:13px}
    .lsr,.qmeta,.maphint,.rostercount{font-size:12.5px}
    /* The USDOT line is the only checked fact on a carrier card and it was the
       smallest thing on it. It is now the size of the note above it. */
    .lverify{font-size:13.5px;line-height:1.5}
    .lchip,.gft,.gword{font-size:12.5px}
    .sec-label{font-size:12.5px;letter-spacing:.12em}
    .verdict{padding:16px}
    .vhead{font-size:21px}
  }

  @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

/* ---- multi-page additions ---- */
.skip{position:absolute;left:-9999px;top:0;background:var(--amber);color:var(--deep);padding:10px 16px;z-index:100;font-family:var(--display);text-transform:uppercase;letter-spacing:.1em}
.skip:focus{left:0}
nav .tabs a{font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;font-size:13.5px;font-weight:600;color:var(--dim);padding:9px 12px;text-decoration:none;border-bottom:2px solid transparent;display:inline-block}
nav .tabs a[aria-current=page]{color:var(--amber);border-bottom-color:var(--amber)}
nav .tabs a:hover{color:var(--amber)}
nav .tabs a:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
main{display:block}
.crumb{font-family:var(--mono);font-size:11.5px;color:var(--dim);padding:22px 0 0}
.crumb a{color:var(--dim)}
.crumb a:hover{color:var(--amber)}
.guidecard{display:block;border:1px solid var(--line);border-radius:3px;background:var(--asphalt);padding:20px;text-decoration:none;color:inherit}
.guidecard:hover{border-color:var(--amber)}
.guidecard h2{margin-bottom:6px;color:var(--text);font-size:20px;text-transform:none;line-height:1.25;letter-spacing:.01em}
.guidecard p{margin:0;font-size:14px;color:var(--dim)}
footer .fine a{color:var(--dim)}
footer .fine a:hover{color:var(--amber)}
@media(max-width:640px){nav .tabs a{padding:11px 6px;font-size:11.5px;letter-spacing:.03em}}
@media(pointer:coarse){nav .tabs a{padding:12px 7px;min-height:46px;display:inline-flex;align-items:center}}

.brand i{margin-left:.06em}
@media(max-width:400px){.brand{font-size:13.5px;letter-spacing:.06em}}

/* Printing one block. See SR.printOnly in core.js, visibility, not display,
   so the ancestors of the printed block can stay in the tree. */
@media print{
  body.sr-printing{background:#fff;position:static}
  body.sr-printing *{visibility:hidden}
  /* An ancestor must neither clip the block nor act as its containing block.
     The summary panel is position:sticky with overflow:hidden, which pinned the
     sheet inside it, cut it off at the panel's height and pushed it onto the
     third printed page, where an earlier check that only asserted "a pdf came
     out" happily called it a pass. */
  body.sr-printing *:not(.sr-print-this){position:static;overflow:visible}
  body.sr-printing .sr-print-this,
  body.sr-printing .sr-print-this *{visibility:visible}
  body.sr-printing .sr-print-this{position:absolute;left:0;top:0;width:100%;
    max-height:none;overflow:visible;border:none;padding:0;margin:0;
    background:#fff;color:#000;font-size:10.5pt;line-height:1.5}
}

  /* ---- /ops CRM console ---- */
  .crmnav{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:8px 0 20px;flex-wrap:wrap}
  .crmnav button{font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;font-size:14px;font-weight:600;background:none;border:none;color:var(--dim);padding:10px 14px;cursor:pointer;border-bottom:2px solid transparent}
  .crmnav button[aria-selected=true]{color:var(--amber);border-bottom-color:var(--amber)}
  .crmnav button:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
  .crmsec[hidden]{display:none}

  .countrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
  @media(max-width:560px){.countrow{grid-template-columns:repeat(2,1fr)}}
  .stat{background:var(--asphalt);border:1px solid var(--line);border-radius:3px;padding:14px}
  .stat .n{font-family:var(--display);font-size:30px;font-weight:700;color:var(--text);line-height:1}
  .stat .k{font-size:12px;color:var(--dim);margin-top:5px}
  .stat.flag .n{color:var(--amber)}

  .crmbar{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 16px;align-items:center}
  .crmbar select,.crmbar input{background:var(--deep);color:var(--text);border:1px solid var(--line);border-radius:3px;padding:8px 10px;font-family:var(--body);font-size:14px}
  .crmbar input[type=number]{width:120px}
  .crmbar .chk{display:inline-flex;align-items:center;gap:6px;color:var(--dim);font-size:13px}

  .attrow{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--asphalt);border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:3px;padding:11px 14px;margin-bottom:8px}
  .attrow.calm{border-left-color:var(--line)}
  .attrow .t{font-size:14px} .attrow .t b{color:var(--amber)}

  .feed{border:1px solid var(--line);border-radius:3px;overflow:hidden}
  .feed .frow{display:flex;gap:11px;padding:10px 13px;border-top:1px solid var(--line);font-size:13.5px;align-items:flex-start}
  .feed .frow:first-child{border-top:none}
  .feed .fd{color:var(--dim);font-family:var(--mono);font-size:12px;white-space:nowrap;margin-left:auto}
  .feed .fk{width:8px;height:8px;border-radius:50%;margin-top:5px;flex:none;background:var(--sea)}
  .feed .fk.new{background:var(--moss)} .feed .fk.ask{background:var(--amber)} .feed .fk.no{background:var(--hazard)} .feed .fk.sug{background:var(--dim)}

  .pill{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.03em;padding:2px 7px;border-radius:20px;border:1px solid var(--line);color:var(--dim);text-transform:uppercase}
  .pill.new{color:var(--sea);border-color:var(--sea)} .pill.reviewed{color:var(--moss);border-color:var(--moss)}
  .pill.active{color:var(--amber);border-color:var(--amber)} .pill.paused{color:var(--dim)} .pill.archived{color:var(--hazard);border-color:var(--hazard)}
  .pill.optin{color:var(--amber);border-color:var(--amber)}
  /* The prospect pipeline. Warm colours as somebody moves toward the roster,
     quiet ones once they are out of it, so a long list reads at a glance. */
  .pill.queued{color:var(--sea);border-color:var(--sea)}
  .pill.contacted{color:var(--amber);border-color:var(--amber-dim)}
  .pill.replied{color:var(--moss);border-color:var(--moss)}
  .pill.listed{color:var(--moss);border-color:var(--moss);font-weight:700}
  .pill.declined,.pill.dead{color:var(--dim);border-color:var(--line)}
  /* A long comma list inside inline code has nowhere to break by default and
     pushes the whole page sideways on a phone. Let it wrap anywhere. */
  .note code{overflow-wrap:anywhere;word-break:break-word}
  .pill.fit-high{color:var(--moss);border-color:var(--moss)}
  .pill.fit-med{color:var(--dim)}
  .pill.fit-low{color:var(--dim);border-color:var(--line);opacity:.75}
  /* Prospect kinds reuse the qkind badge the queue already uses. */
  .qkind.yard{background:#2B3A2B;color:#B7D49A}
  .qkind.broker{background:#3A3346;color:#C7B6DD}
  .asks{font-family:var(--mono);font-size:12px;color:var(--dim)} .asks b{color:var(--amber)}
  .peep{background:var(--asphalt);border:1px solid var(--line);border-radius:3px;padding:14px 16px;margin-bottom:10px}
  .peep .pl{font-size:13px;color:var(--dim);margin-top:8px} .peep .pl b{color:var(--text)}

  /* The owner-services line: present, honest, and quiet. It should read as a
     small preference, not a pitch. */
  .consent.quiet{font-size:12.5px;color:var(--dim)}
  .consent.quiet a{color:var(--dim)}

  /* The roster as it arrives in the HTML, before JavaScript replaces it.
     A crawler and a reader with scripting off see this; everybody else sees it
     for the moment before listings.js swaps in the real cards. So it has to be
     legible on its own rather than a skeleton. */
  .rosterstatic{display:grid;gap:14px;margin-top:4px}
  .lcard.prerendered{border:1px solid var(--line);border-radius:4px;padding:16px 18px;
    background:var(--asphalt)}
  .lcard.prerendered h3{margin:0;font-family:var(--display);font-size:20px;
    text-transform:uppercase;letter-spacing:.03em;color:var(--text)}
  .lcard.prerendered .lkind{margin:2px 0 10px;font-size:12.5px;color:var(--amber);
    font-family:var(--display);text-transform:uppercase;letter-spacing:.08em}
  .lcard.prerendered .lfacts{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0}
  .lcard.prerendered .lfacts dt{font-size:12px;color:var(--dim);text-transform:uppercase;
    letter-spacing:.06em;font-family:var(--display)}
  .lcard.prerendered .lfacts dd{margin:0;font-size:14px}
  .lcard.prerendered .lnote{margin:10px 0 0;font-size:14px;color:var(--dim);font-style:italic}
  .lcard.prerendered .lverify{margin:10px 0 0;font-size:12.5px}

  /* Rate and comparison tables in the guides. A table is the honest shape for
     a list of lines with a number against each, and the guides that price a
     move need one. It scrolls inside its own box so a narrow phone never
     scrolls the whole page sideways. */
  .tablewrap{overflow-x:auto;margin:16px 0;-webkit-overflow-scrolling:touch}
  table.rate{border-collapse:collapse;width:100%;min-width:480px;font-size:14px}
  table.rate th{font-family:var(--display);font-weight:600;text-transform:uppercase;
    letter-spacing:.07em;font-size:13px;color:var(--dim);text-align:left;
    border-bottom:2px solid var(--line);padding:9px 16px 9px 0;white-space:nowrap}
  table.rate td{border-bottom:1px solid var(--line);padding:10px 16px 10px 0;vertical-align:top}
  table.rate td:first-child{color:var(--text);font-weight:500}
  table.rate td:nth-child(2){font-variant-numeric:tabular-nums;white-space:nowrap}
  table.rate th:last-child,table.rate td:last-child{padding-right:0}
  table.rate tr:last-child td{border-bottom:none}
  @media(max-width:560px){
    table.rate{font-size:13.5px;min-width:420px}
    table.rate td:nth-child(3),table.rate th:nth-child(3){color:var(--dim);font-size:12.5px}
  }

  /* ==================================================================
     HOME PAGE
     ------------------------------------------------------------------
     The rest of the site is a set of tools and a roster, and it is dark
     on purpose: it gets read on a phone in a boatyard. The home page has
     a different job, it has to make somebody want to be on the list, so
     it carries a navy ground and more amber than anywhere else. Scoped
     to .home so none of it can leak into the tools.
     ================================================================== */
  :root{
    --navy:#141C2B;--navy2:#1D283C;--navy3:#26344C;
  }

  /* ---- hero ---- */
  .hero.home{
    padding:44px 0 34px;
    background:
      radial-gradient(1100px 420px at 78% -10%, rgba(60,140,155,.16), transparent 62%),
      radial-gradient(760px 380px at 6% 108%, rgba(242,179,61,.10), transparent 60%),
      linear-gradient(180deg,var(--navy2) 0%,var(--navy) 62%,var(--deep) 100%);
    border-bottom:1px solid var(--navy3);
  }
  .herogrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:38px;align-items:start}
  .herocopy h1{margin-bottom:16px}
  .herocopy .lede{margin-bottom:20px;max-width:34em}

  /* Both calls to action are the same size and sit in the same order at
     every width. Which one is filled and which is outlined is decided at
     runtime from the real supply count, so it is a paint change and never
     moves anything. See home.js. */
  .hero.home .btnrow{margin:20px 0 16px}
  .hero.home .btn{padding:14px 26px;font-size:15px}
  .btn i{display:block;font-style:normal;font-family:var(--body);text-transform:none;
    letter-spacing:0;font-size:12px;font-weight:400;opacity:.78;margin-top:2px}

  .herofine{font-family:var(--mono);font-size:11.5px;color:var(--dim);letter-spacing:.03em;
    display:flex;flex-wrap:wrap;gap:6px 16px;margin:0}
  /* These were nowrap so a tick could never be orphaned from its line. The
     longest of the three is 308px of unbreakable text, which on a 320px screen
     pushed the whole hero column to 346 and scrolled the page sideways. Let
     them wrap and hang the wrapped line under the tick instead. */
  .herofine span{padding-left:15px;text-indent:-15px}
  .herofine b{color:var(--moss);font-weight:400}

  /* ---- the live board, top right of the hero ---- */
  .board{background:rgba(10,14,22,.55);border:1px solid var(--navy3);border-radius:5px;
    padding:16px 18px 14px;backdrop-filter:blur(3px)}
  .board .bhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
    font-family:var(--display);text-transform:uppercase;letter-spacing:.13em;font-size:11.5px;
    font-weight:600;color:var(--dim);margin-bottom:12px}
  .board .blive{color:var(--moss);display:flex;align-items:center;gap:6px}
  .board .blive::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--moss);
    box-shadow:0 0 0 3px rgba(117,151,92,.22)}
  .brow{display:flex;align-items:baseline;gap:11px;padding:9px 0;border-top:1px solid rgba(255,255,255,.07)}
  .brow:first-of-type{border-top:none;padding-top:0}
  .bn{font-family:var(--display);font-weight:700;font-size:27px;line-height:1;min-width:1.5em;
    color:var(--amber);font-variant-numeric:tabular-nums}
  .brow.none .bn{color:var(--dim)}
  .bl{font-size:13.5px;color:#C3C8CE;line-height:1.35}
  .bl i{display:block;font-style:normal;font-family:var(--mono);font-size:11px;color:var(--dim);margin-top:1px}
  .bfoot{margin:12px 0 0;padding-top:11px;border-top:1px solid rgba(255,255,255,.07);
    font-size:13px;color:#C3C8CE;line-height:1.5}
  .bfoot b{color:var(--amber);font-weight:500}
  .bfoot.urgent{border-left:3px solid var(--amber);padding:11px 0 0 12px;border-top:none;margin-top:12px}

  /* ---- proof: only things that are true and checkable ---- */
  .proofrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;
    background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
  .proof{background:var(--asphalt);padding:17px 18px}
  .proof h3{font-size:15px;letter-spacing:.05em;margin-bottom:5px;color:var(--amber)}
  .proof p{margin:0;font-size:13.5px;line-height:1.5;color:#C3C8CE}

  /* ---- what somebody said, when somebody has said it ---- */
  .quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:20px}
  .quote{border-left:3px solid var(--amber);padding:2px 0 2px 18px}
  .quote p{font-size:16px;line-height:1.5;color:var(--text);margin:0 0 9px}
  .quote cite{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--dim);
    letter-spacing:.04em;display:block}

  /* ---- how it works ---- */
  .how{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;margin-top:6px}
  .how li{counter-increment:s;list-style:none;position:relative;padding-top:44px}
  .how li::before{content:counter(s);position:absolute;top:0;left:0;
    font-family:var(--display);font-weight:700;font-size:19px;line-height:32px;text-align:center;
    width:34px;height:34px;border-radius:50%;background:var(--amber);color:var(--deep);
    border:1px solid var(--amber)}
  /* The rule between the steps is the sequence, so it only runs between them
     and never off the end of the last one. */
  .how li::after{content:"";position:absolute;top:17px;left:42px;right:-24px;height:1px;
    background:linear-gradient(90deg,var(--amber-dim),transparent)}
  .how li:last-child::after{display:none}
  .how h3{font-size:18px;margin-bottom:7px}
  .how p{font-size:14px;margin-bottom:0;line-height:1.55}
  @media(max-width:820px){ .how li::after{display:none} .how{gap:20px} .how li{padding-top:0;padding-left:48px;min-height:36px} }

  /* ---- the pitch to the people who do the work ---- */
  .supply{background:linear-gradient(180deg,var(--navy) 0%,var(--navy2) 100%);
    border-top:1px solid var(--navy3);border-bottom:1px solid var(--navy3)}
  .supply .sec-label{color:var(--amber)}
  .supply .sec-label::after{background:var(--navy3)}
  .supplygrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:34px;align-items:start}
  .earn{background:rgba(10,14,22,.5);border:1px solid var(--navy3);border-radius:5px;padding:18px 20px}
  .earn .n{font-family:var(--display);font-weight:700;font-size:44px;line-height:1;color:var(--amber)}
  .earn .k{font-family:var(--mono);font-size:11.5px;color:var(--dim);line-height:1.5;margin-top:6px}
  .earn hr{border:none;border-top:1px solid rgba(255,255,255,.08);margin:15px 0}
  /* Once the two columns collapse this panel has the whole width and was
     spending 380px of phone stacking three figures down it. Side by side at
     that point instead, which is also the shape they want: three numbers to
     compare, not three paragraphs to read. */
  @media(max-width:900px) and (min-width:430px){
    .earn{display:grid;grid-template-columns:repeat(3,1fr);gap:0 20px;align-items:start}
    .earn hr{display:none}
    .earn .muted{grid-column:1/-1;margin-top:14px!important;padding-top:12px;
      border-top:1px solid rgba(255,255,255,.08)}
  }
  .ticks{margin:0;padding:0;list-style:none}
  .ticks li{position:relative;padding-left:24px;margin-bottom:9px;font-size:14.5px;color:#C3C8CE;line-height:1.5}
  .ticks li::before{content:"";position:absolute;left:2px;top:6px;width:9px;height:5px;
    border-left:2px solid var(--moss);border-bottom:2px solid var(--moss);transform:rotate(-45deg)}
  .ticks li b{color:var(--text);font-weight:600}

  /* ---- the season, made urgent ---- */
  .seasonhead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 20px;margin-bottom:14px}
  .countdown{font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;color:var(--amber);
    border:1px solid var(--amber-dim);border-radius:2px;padding:6px 12px;white-space:nowrap}
  .countdown b{color:var(--text);font-weight:600}
  .hero.home .band{margin-top:0;height:62px}

  /* ---- the tools, as a bonus rather than the main road ---- */
  .toolrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:12px}
  .toollink{display:block;padding:14px 16px;border:1px solid var(--line);border-radius:3px;
    background:var(--asphalt);text-decoration:none;color:var(--amber);
    font-family:var(--display);text-transform:uppercase;letter-spacing:.05em;font-size:15px;font-weight:600}
  .toollink i{display:block;margin-top:4px;font-style:normal;font-family:var(--body);
    text-transform:none;letter-spacing:0;font-size:13px;font-weight:400;color:#C3C8CE;line-height:1.45}
  .toollink:hover{border-color:var(--amber)}
  .toollink:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

  /* ---- six things that decide it, compressed ---- */
  .decide{counter-reset:d;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin:0;padding:0}
  .decide li{counter-increment:d;list-style:none;border-top:2px solid var(--line);padding-top:13px}
  .decide li h3{font-size:17px;margin-bottom:6px}
  .decide li h3::before{content:counter(d,decimal-leading-zero);font-family:var(--mono);
    font-size:12px;color:var(--amber);margin-right:9px;letter-spacing:.05em}
  .decide li p{font-size:14px;margin-bottom:0;line-height:1.55}
  .decide li b{color:var(--text)}

  /* ---- sticky call to action, phones only ---- */
  .stickycta{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:8px;
    padding:9px 14px calc(9px + env(safe-area-inset-bottom,0px));
    background:rgba(20,28,43,.97);border-top:1px solid var(--navy3);backdrop-filter:blur(8px)}
  .stickycta a{flex:1;display:flex;align-items:center;justify-content:center;min-height:46px;
    text-align:center;padding:10px 8px;border-radius:2px;text-decoration:none;
    font-family:var(--display);text-transform:uppercase;letter-spacing:.07em;font-size:13.5px;font-weight:600;
    border:1px solid var(--amber);background:var(--amber);color:var(--deep);line-height:1.2}
  .stickycta a.ghost{background:transparent;color:var(--amber)}
  .stickycta a:focus-visible{outline:2px solid #fff;outline-offset:-3px}
  /* Only ever on a phone, and only once the hero's own buttons have gone by,
     a bar that is there from the first paint is just a thing covering the page. */
  @media(max-width:760px){
    .stickycta.on{display:flex}
    body.hascta{padding-bottom:80px}
  }

  @media(max-width:900px){
    .herogrid,.supplygrid{grid-template-columns:1fr;gap:26px}
    .hero.home{padding:30px 0 28px}
  }
  @media(max-width:600px){
    /* Two calls to action of different widths, stacked, reads as one of them
       being an afterthought. They are not: which is which depends on who is
       reading. Same width, so neither looks like the small print. */
    .hero.home .btnrow{flex-direction:column;align-items:stretch}
    .hero.home .btnrow .btn{text-align:center}
  }
  @media(max-width:480px){
    .proofrow{grid-template-columns:1fr}
    .board{padding:14px 15px 12px}
    .bn{font-size:24px}
  }
  @media print{ .stickycta{display:none} }

  /* The home page is long by nature: it has to answer both sides of a
     marketplace before it asks for anything. On a phone the site's standard
     46px between sections spent most of a screen on air, so it comes down
     there. Scoped by id, and these ids are the home page's own. */
  @media(max-width:600px){
    #trust,#how,#ways,#work,#season,#tools,#deciders,#answers{padding:32px 0}
    .how{gap:16px}
    .decide{gap:16px}
  }

  /* The demand row: owners who have come looking, which is the argument for
     signing up while the supply side of the board is still empty. Marked apart
     from the three supply rows because it is a different kind of fact. */
  .brow.demand{border-top:1px solid rgba(242,179,61,.28);margin-top:4px;padding-top:12px}
  .brow.demand .bn{color:var(--amber)}
  .brow.demand .bl{color:var(--text)}

  /* The price, stated where the decision is made rather than only on the page
     that got them here. */
  .freeline{max-width:62ch;margin:14px 0 0;padding:11px 0 11px 14px;
    border-left:3px solid var(--moss);font-size:14.5px;color:#C3C8CE}
  .freeline b{color:var(--moss);font-weight:600}

  /* Said only when the link carried the move: somebody has landed on their own
     words and needs to know where they came from. */
  .note.prefill{border-left:3px solid var(--sea);padding:10px 0 10px 14px;max-width:62ch;color:var(--text)}

  /* The round trip question. A checkbox with a real sentence beside it rather
     than a bare label: it is asking something most owners have not thought of,
     so it has to say why it is worth answering. */
  .rt{display:flex;gap:11px;align-items:flex-start;margin-top:14px;padding:12px 14px;
    border:1px solid var(--line);border-left:3px solid var(--sea);border-radius:2px;
    background:var(--deep);cursor:pointer}
  .rt input{width:auto;flex:0 0 auto;margin-top:2px}
  .rt span{font-size:13.5px;line-height:1.5;color:#C3C8CE}
  .rt b{color:var(--text);font-weight:600}
  /* A load each way is the thing to lead with when ringing a carrier. */
  .pill.round{background:#2A4048;color:#BFE0E8}

  /* The question a legal-width boat is actually left with, shown only on that
     rung of the ladder. */
  .nextq{margin-top:16px;padding:15px 17px;border:1px solid var(--line);
    border-left:3px solid var(--moss);border-radius:2px;background:var(--asphalt)}
  .nextq .sec-label{margin-bottom:10px}
  .nextq p{font-size:14px;max-width:62ch}
  .nextq p:last-child{margin-bottom:0}