/* HaulBlock app styles — same palette as the marketing pages.
   Light palette in :root; the two dark blocks below repeat it for the OS
   setting and for an explicit theme choice. Change a color in all three. */
:root{
  --ground:#EDEAE6; --surface:#FBF9F7; --sunk:#E2DCD5; --deep:#201B18;
  --ink:#1F1B19; --ink-2:#443C37; --muted:#6A605A; --rule:#D7D0C8; --rule-2:#B2A79F;
  --sign:#A3341F; --sign-ink:#8C2B19; --sign-text:#FFF7F4;
  --amber:#8A5A12; --amber-wash:#F4E8D4; --wash:#E7DED8;
  --good:#1F6B4A; --good-wash:#DCEBE2; --err:#9C2B1B; --err-wash:#F3DEDA;
  --disp:"Overpass","Arial Narrow",Arial,sans-serif;
  --body:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#161310; --surface:#1F1A17; --sunk:#272120; --deep:#100D0B;
    --ink:#EDE7E2; --ink-2:#CFC5BE; --muted:#A0938B; --rule:#332B27; --rule-2:#6E625B;
    --sign:#D2552E; --sign-ink:#F0855F; --sign-text:#FFF3EE;
    --amber:#D9A441; --amber-wash:#352B14; --wash:#241B18;
    --good:#5DBB85; --good-wash:#17301F; --err:#EF8C7C; --err-wash:#341A1A;
  }
}
:root[data-theme="dark"]{
  --ground:#161310; --surface:#1F1A17; --sunk:#272120; --deep:#100D0B;
  --ink:#EDE7E2; --ink-2:#CFC5BE; --muted:#A0938B; --rule:#332B27; --rule-2:#6E625B;
  --sign:#D2552E; --sign-ink:#F0855F; --sign-text:#FFF3EE;
  --amber:#D9A441; --amber-wash:#352B14; --wash:#241B18;
  --good:#5DBB85; --good-wash:#17301F; --err:#EF8C7C; --err-wash:#341A1A;
}

*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;padding-inline:20px;padding-block:0 60px}
h1,h2,h3{font-family:var(--disp);margin:0;line-height:1.1;text-wrap:balance}
h1{font-weight:900;font-size:clamp(1.5rem,3.4vw,2.2rem);text-transform:uppercase;letter-spacing:-.015em}
h2{font-weight:800;font-size:1.2rem;text-transform:uppercase}
h3{font-weight:700;font-size:1rem}
p{margin:0}
a{color:var(--sign-ink)}
:focus-visible{outline:3px solid var(--sign);outline-offset:2px;border-radius:2px}
.wrap{max-width:1120px;margin-inline:auto}
/* The browser's own [hidden] rule is only `display:none` at user-agent level,
   so ANY author rule that sets display beats it — .btn{display:inline-block}
   did exactly that, and a button hidden from script stayed on screen. This
   makes the attribute mean what everyone assumes it means. */
[hidden]{display:none !important}

.label{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500}
.mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.stack{display:grid;gap:18px}
.muted{color:var(--muted);font-size:.9rem}

/* header */
.bar{border-bottom:1px solid var(--rule);margin-inline:-20px;padding:10px 20px;background:var(--ground);position:sticky;top:0;z-index:20}
.bar .wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:900;font-size:1.1rem;text-transform:uppercase;color:var(--ink);text-decoration:none}
.logo svg{width:24px;height:24px}
.bar nav{display:flex;gap:14px;margin-left:auto;align-items:center;flex-wrap:wrap}
.bar nav a{font-size:.9rem;text-decoration:none;color:var(--ink-2)}
.bar nav a.on{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--sign)}
/* Home sits apart from the rest of the nav: the others move you around inside
   the app, this one leaves it. The rule says so without needing a word. */
.bar nav a.home{padding-right:14px;border-right:1px solid var(--rule)}
.dev{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;background:var(--amber-wash);color:var(--amber);padding:3px 7px;border-radius:2px}

/* buttons + forms */
.btn{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:.9rem;background:var(--sign);color:#fff;border:0;padding:11px 16px;border-radius:3px;cursor:pointer;text-decoration:none;display:inline-block;text-align:center}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.btn.danger{background:var(--err)}
.btn.small{font-size:.78rem;padding:7px 11px}
.btn[disabled]{opacity:.5;cursor:default}
label.f{display:grid;gap:5px}
label.f > span{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
input,select,textarea{font-family:var(--body);font-size:1rem;color:var(--ink);background:var(--ground);border:1px solid var(--rule-2);border-radius:3px;padding:9px 11px;width:100%}
textarea{min-height:90px;resize:vertical}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:640px){.grid2,.grid3{grid-template-columns:1fr}}

/* A button in a panel body is a control, not a banner.
   .panel .body is a grid, so anything in it stretches to the full column —
   which is why "Add a card" ran the whole width of the page and read like a
   cookie bar. Grid children size to content when told to. */
.panel .body > .btn,
.panel .body > form > .btn,
.panel .body > div > .btn,
.stack > form > .btn{justify-self:start}

/* The browser's file input is the loudest "nobody styled this" tell on the
   site. It cannot be restyled directly, but its button half can. */
input[type=file]{border:0;padding:0;background:none;font-size:.92rem;color:var(--muted)}
input[type=file]::file-selector-button{font-family:var(--body);font-weight:600;font-size:.88rem;
  background:var(--surface);color:var(--ink);border:1px solid var(--rule-2);border-radius:3px;
  padding:8px 13px;margin-right:11px;cursor:pointer}
input[type=file]::file-selector-button:hover{background:var(--sunk)}

/* panels + cards */
.panel{background:var(--surface);border:1px solid var(--rule);border-radius:4px;overflow:hidden}
.panel > header{padding:11px 16px;border-bottom:1px solid var(--rule);background:var(--sunk);display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap}
.panel .body{padding:16px;display:grid;gap:14px}
.panel.danger{border-color:var(--err)}
.panel.danger > header{background:var(--err-wash);color:var(--err)}
/* A list of plain statements, not bullets: these are read as sentences. */
ul.plain{list-style:none;margin:0;padding:0;display:grid;gap:7px}
ul.plain li{padding-left:15px;position:relative;color:var(--ink-2);font-size:.93rem}
ul.plain li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:1px;background:currentColor;opacity:.6}
/* Each row is an obligation and the date it lifts. The dt/dd pair would be
   wrong here: those labels are set as tiny uppercase keys, and these are
   sentences. */
ul.blockers{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:3px}
ul.blockers li{background:var(--surface);padding:12px 15px;display:grid;gap:3px;min-width:0}
ul.blockers b{font-size:.95rem;overflow-wrap:anywhere}
ul.blockers span{font-size:.86rem;color:var(--ink-2)}
/* A lot in a list: thumbnail beside two lines of text, and it stays readable
   when the table is scrolled sideways on a phone. */
a.bidrow{display:flex;gap:11px;align-items:center;text-decoration:none;color:inherit;min-width:0}
a.bidrow img{width:56px;height:42px;object-fit:cover;border-radius:3px;flex:none;background:var(--sunk)}
a.bidrow > span{display:grid;gap:1px;min-width:0}
a.bidrow strong{font-size:.94rem}
a.bidrow .muted{font-size:.8rem}
a.bidrow:hover strong{text-decoration:underline}
/* The clock-change form: one row on a desktop, stacked on a phone. */
tr.subrow > td{background:var(--sunk);padding:10px 15px}
form.clockform{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-top:10px}
form.clockform .f{min-width:150px}
form.clockform .f.grow{flex:1 1 260px}
/* A field-level complaint, said next to the field it is about. */
.fieldwarn{display:block;margin-top:5px;font-size:.84rem;color:var(--err)}
input.bad{border-color:var(--err);outline-color:var(--err)}
.badge{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:2px;font-weight:600;white-space:nowrap}
.badge.g{background:var(--good-wash);color:var(--good)}
.badge.a{background:var(--amber-wash);color:var(--amber)}
.badge.n{background:var(--sunk);color:var(--muted)}
.badge.r{background:var(--err-wash);color:var(--err)}
.badge.s{background:var(--sign);color:var(--sign-text)}
.flash{padding:11px 14px;border-radius:3px;font-size:.92rem}
.flash.ok{background:var(--good-wash);color:var(--good)}
.flash.err{background:var(--err-wash);color:var(--err)}
.flash.info{background:var(--wash);color:var(--ink-2)}
/* Sample-listing band. Amber rather than red: it is not an error, it is a fact
   about the page, and it has to survive being read quickly. The left rule is
   there because a full amber block at the top of every demo lot reads as a
   warning about the vehicle instead of about the listing. */
.flash.sample{background:var(--amber-wash);color:var(--amber);border-left:3px solid currentColor}

/* auction grid */
/* messages */
.q.mine{background:var(--sunk)}
.threadrow{text-decoration:none;color:inherit;display:block}
.threadrow:hover{border-color:var(--rule-2)}

/* ---------- the listing's sticky summary bar ---------- */
/* It sticks under the header so the clock, the price and the way to bid stay
   on screen through a hundred photos and a long write-up. */
.lotbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;
  justify-content:space-between;flex-wrap:wrap;
  margin:0 0 9px;padding:11px 15px;border-radius:4px;
  background:var(--surface);border:1px solid var(--rule);
  box-shadow:0 2px 14px rgb(0 0 0 / .08)}
.lotbar .stats{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.lotbar .stat{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:.86rem}
.lotbar .stat .k{white-space:nowrap}
.lotbar .stat .v{color:var(--ink);font-family:var(--disp);font-weight:800;font-size:1.05rem;
  font-variant-numeric:tabular-nums;letter-spacing:.01em}
/* Tabular numerals and a fixed width so a ticking clock does not jitter the
   whole row every second as digits change width. */
.lotbar .clock{font-family:var(--mono);font-weight:700;min-width:8.6ch;display:inline-block}
/* Inside the soft-close window a late bid pushes the end back, so the clock
   stops being a deadline and starts being a warning. */
.lotbar .clock.soon{color:var(--err)}
.lotbar[data-ended] .stat .v{color:var(--muted)}
.endsat{font-size:.85rem;margin:0 0 15px}
.endsat:empty{display:none}

@media (max-width:640px){
  .lotbar{gap:10px;padding:10px 12px}
  .lotbar .stats{gap:14px;font-size:.8rem}
  .lotbar .stat .k{display:none}
  .lotbar .stat:first-child .k{display:inline}
  .lotbar .btn{margin-left:auto}
}

/* ---------- browse: filters, search, sorts ---------- */
.browse{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap;
  padding-bottom:13px;border-bottom:1px solid var(--rule)}
.filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex:1 1 420px}

.search{display:flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--rule);
  border-radius:999px;padding:0 14px;height:38px;color:var(--muted);flex:1 1 210px;max-width:285px}
.search:focus-within{border-color:var(--sign);color:var(--sign)}
.search input{border:0;background:none;padding:0;height:100%;flex:1;min-width:0;font-size:.9rem;color:var(--ink)}
.search input:focus{outline:none}
.search input::-webkit-search-cancel-button{cursor:pointer}

/* A chip is a native select wearing a pill, so it opens the platform's own
   picker — on a phone that is the wheel, which beats anything we would build. */
.chip{position:relative;display:inline-flex;align-items:center;height:38px;
  background:var(--surface);border:1px solid var(--rule);border-radius:999px;padding:0 13px}
.chip:focus-within{border-color:var(--sign)}
.chip select{appearance:none;-webkit-appearance:none;border:0;background:none;
  font-size:.9rem;color:var(--ink);padding-right:17px;height:100%;cursor:pointer}
.chip select:focus{outline:none}
.chip::after{content:"";position:absolute;right:13px;pointer-events:none;
  width:7px;height:7px;border-right:1.8px solid var(--muted);border-bottom:1.8px solid var(--muted);
  transform:translateY(-2px) rotate(45deg)}
.chip.years{gap:7px;color:var(--muted);font-size:.9rem}
.chip.years::after{display:none}
.chip.years input{width:4.4ch;border:0;background:none;font-size:.9rem;color:var(--ink);
  font-variant-numeric:tabular-nums;padding:0}
.chip.years input:focus{outline:none}
.chip.years input::-webkit-outer-spin-button,.chip.years input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.chip.years input[type=number]{-moz-appearance:textfield}

.filters .clear{font-size:.86rem;color:var(--muted);white-space:nowrap}
.sorts{display:flex;gap:18px;flex-wrap:wrap}
.sorts a{font-size:.9rem;text-decoration:none;color:var(--muted);padding-bottom:3px}
.sorts a:hover{color:var(--ink)}
.sorts a.on{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--sign)}
.count{font-size:.85rem;margin:0}

/* what a finished lot did, stamped on the photo */
.lot .shot{position:relative}
.outcome{position:absolute;left:0;bottom:0;padding:5px 11px;font-family:var(--mono);
  font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.outcome.sold{background:var(--good);color:#fff}
.outcome.unsold{background:var(--sunk);color:var(--muted);border-top:1px solid var(--rule);
  border-right:1px solid var(--rule)}

/* the Auctions menu in the header */
.bar .menu{position:relative}
.bar .menu > summary{font-size:.9rem;color:var(--ink-2);cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:5px;padding-bottom:2px}
.bar .menu > summary::-webkit-details-marker{display:none}
.bar .menu > summary::after{content:"";width:6px;height:6px;border-right:1.7px solid currentColor;
  border-bottom:1.7px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.bar .menu > summary.on{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--sign)}
.bar .menu[open] > summary{color:var(--ink)}
.bar .menu .pop{position:absolute;top:calc(100% + 11px);left:-13px;z-index:30;min-width:178px;
  background:var(--surface);border:1px solid var(--rule);border-radius:4px;
  box-shadow:0 10px 26px rgb(0 0 0 / .17);display:grid;padding:5px}
.bar .menu .pop a{padding:9px 13px;border-radius:3px;box-shadow:none}
.bar .menu .pop a:hover{background:var(--sunk);color:var(--ink)}
.bar .menu .pop a.on{background:var(--sunk);box-shadow:none}

/* Visually hidden, still read aloud: the chips show their label in the closed
   select, so a visible <span> would say everything twice. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (max-width:640px){
  .browse{gap:11px}
  .search{min-width:100%;order:-1}
  .sorts{gap:14px;overflow-x:auto;padding-bottom:2px}
}

.lots{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.lot{background:var(--surface);border:1px solid var(--rule);border-radius:4px;overflow:hidden;display:grid;text-decoration:none;color:inherit}
.lot:hover{border-color:var(--rule-2)}
.lot .shot{aspect-ratio:16/10;background:var(--sunk);display:grid;place-items:center;overflow:hidden}
.lot .shot img{width:100%;height:100%;object-fit:cover}
.lot .shot svg{width:60%;color:var(--rule-2)}
.lot .txt{padding:13px 15px;display:grid;gap:7px}
.lot h3{font-size:.98rem;line-height:1.25}
.lot .row{display:flex;justify-content:space-between;gap:10px;align-items:baseline;font-size:.86rem;color:var(--muted)}
.lot .price{font-family:var(--disp);font-weight:800;font-size:1.25rem;color:var(--ink);font-variant-numeric:tabular-nums}
.lot .mono[data-ends]{font-variant-numeric:tabular-nums;min-width:9ch;text-align:right}
.lot .chips{display:flex;gap:5px;flex-wrap:wrap}

/* listing detail */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:26px;align-items:start}
@media (max-width:900px){.cols{grid-template-columns:1fr}.side{order:-1}}
.side{display:grid;gap:14px;position:sticky;top:74px}
@media (max-width:900px){.side{position:static}}
.gallery{display:grid;gap:8px}
.gallery .big{aspect-ratio:16/10;background:var(--sunk);border:1px solid var(--rule);border-radius:4px;display:grid;place-items:center;overflow:hidden}
.gallery .big img{width:100%;height:100%;object-fit:cover}
.gallery .big svg{width:45%;color:var(--rule-2)}
.gallery .strip{display:flex;gap:7px;overflow-x:auto}
.gallery .strip img{width:88px;aspect-ratio:16/10;object-fit:cover;border:2px solid var(--rule);border-radius:3px;cursor:pointer}
.gallery .strip img[aria-current="true"]{border-color:var(--sign)}
dl.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--rule);margin:0}
/* min-width:0 is not optional. A grid item defaults to min-width:auto, which
   refuses to shrink below its content, so a long unbroken value — an email
   address, typically — pushes past the cell and gets clipped by the panel.
   overflow-wrap then breaks it rather than letting it run off the edge. */
dl.kv > div{background:var(--surface);padding:10px 15px;display:grid;gap:2px;min-width:0}
dl.kv dd{overflow-wrap:anywhere}
dl.kv dt{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
dl.kv dd{margin:0;font-size:.94rem}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th,td{text-align:left;padding:9px 15px;border-bottom:1px solid var(--rule)}
thead th{font-family:var(--mono);font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:500;background:var(--sunk)}
tbody tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.scroll{overflow-x:auto}

/* bid box */
.bidbox{background:var(--surface);border:2px solid var(--ink);border-radius:4px;overflow:hidden}
.bidbox .top{background:var(--deep);color:#EFE6E1;padding:10px 15px;display:flex;justify-content:space-between;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.bidbox .clock{color:#F0A188;font-weight:700}
.bidbox .cur{padding:15px;border-bottom:1px solid var(--rule);display:grid;gap:3px}
.bidbox .amt{font-family:var(--disp);font-weight:900;font-size:2.1rem;line-height:1;font-variant-numeric:tabular-nums}
.bidbox form{padding:15px;display:grid;gap:11px}
.allin{background:var(--wash);border-radius:3px;padding:11px 13px;display:grid;gap:5px;font-size:.87rem}
.allin div{display:flex;justify-content:space-between;gap:10px}
.allin .tot{border-top:1px solid var(--rule-2);padding-top:5px;font-weight:700}

/* q&a */
.qa{display:grid}
.q{padding:13px 16px;border-bottom:1px solid var(--rule);display:grid;gap:5px}
.q:last-of-type{border-bottom:0}
.q .who{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.q .handle{font-family:var(--mono);font-size:.8rem;color:inherit;text-decoration:none}
.q .handle:hover{text-decoration:underline}
.q .when{font-size:.75rem;color:var(--muted)}
.q .tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;background:var(--sign);color:#fff;padding:2px 6px;border-radius:2px}
/* Replies hang off their parent. One level only, so the indent never stacks. */
.q .replies{margin-top:9px;padding-left:13px;border-left:3px solid var(--rule);display:grid}
.q .q.r{padding:9px 0;border-bottom:0}
.q .q.r + .q.r{border-top:1px solid var(--rule)}
.q .q.r:first-child{padding-top:2px}
.replybox > summary{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);cursor:pointer;width:max-content;padding:2px 0}
.replybox > summary:hover{color:var(--sign)}
.replybox[open] > summary{color:var(--sign)}
/* A removed comment. Staff still see the words, dimmed and flagged, because a
   removal you cannot read is a removal you cannot judge or undo. */
.q.gone > p{color:var(--muted)}
.tomb{font-family:var(--mono);font-size:.76rem;color:var(--muted);font-style:italic}
.mod{margin-top:6px}
.mod > summary{color:var(--err)}
.mod > summary:hover,.replybox.mod[open] > summary{color:var(--err)}
form.mod{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:.78rem}
.ask{padding:13px 16px;background:var(--sunk);display:grid;gap:9px;border-top:1px solid var(--rule)}

/* sign in */
.authgrid{display:grid;gap:10px;justify-items:start;max-width:420px}
.divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.8rem;margin-block:4px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--rule)}

footer.site{border-top:1px solid var(--rule);margin-top:40px;padding-top:18px}
footer.site p{font-size:.8rem;color:var(--muted);max-width:80ch}

/* ---------- the seller's stepped listing flow ---------- */
.rail{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0}
.rail li{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:1px solid var(--rule);border-radius:2px;padding:6px 11px;background:var(--surface)}
.rail li b{font-family:var(--mono);font-weight:700;color:var(--rule-2)}
.rail li.done{color:var(--ink-2);border-color:var(--rule-2)}
.rail li.done b{color:var(--good)}
.rail li.on{color:#fff;background:var(--sign);border-color:var(--sign)}
.rail li.on b{color:var(--sign-text);opacity:.75}
.rail a{color:inherit;text-decoration:none}

.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px}
.shot{border:1px solid var(--rule);border-radius:3px;overflow:hidden;background:var(--sunk);display:grid;align-content:start}
.shot img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--sunk)}
.shot .acts{display:flex;gap:6px;padding:7px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.shot.cover{outline:2px solid var(--sign);outline-offset:-2px}
.shot .tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sign-ink);font-weight:600}
.shot form{display:inline}
.shot button{font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;background:none;border:0;padding:2px 4px;color:var(--muted);cursor:pointer;text-decoration:underline}
.shot button:hover{color:var(--ink)}

/* ---------- status timeline on the seller's listing page ---------- */
.tl{display:grid;list-style:none;padding:0;margin:0}
.tl li{display:grid;grid-template-columns:20px 1fr;gap:14px;padding-bottom:18px;position:relative}
.tl li:not(:last-child)::before{content:"";position:absolute;left:9px;top:22px;bottom:0;width:2px;background:var(--rule)}
.tl li.done:not(:last-child)::before{background:var(--sign)}
.tl .dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--rule);background:var(--surface);margin-top:2px}
.tl li.done .dot{background:var(--sign);border-color:var(--sign)}
.tl li.now .dot{border-color:var(--sign);border-width:5px;background:var(--surface)}
.tl h4{margin:0;font-family:var(--disp);font-weight:800;font-size:.95rem;text-transform:uppercase;letter-spacing:.02em}
.tl li.todo h4,.tl li.todo p{color:var(--muted)}
.tl p{margin:3px 0 0;font-size:.88rem;color:var(--ink-2)}
.tl time{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

@media (max-width:620px){
  .grid2,.grid3{grid-template-columns:1fr}
}

/* ---------- photo requirements per section ---------- */
.reqs{display:grid;gap:8px;list-style:none;padding:0;margin:0}
.reqs li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 12px;border:1px solid var(--rule);border-radius:3px;background:var(--surface);flex-wrap:wrap}
.reqs li.met{border-color:var(--good);background:var(--good-wash)}
.reqs strong{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:.88rem}
.reqs .n{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--muted);white-space:nowrap}
.reqs li.met .n{color:var(--good);font-weight:600}
.secthead{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.gallery .stripgroup{display:grid;gap:5px}
.gallery .stripgroup + .stripgroup{margin-top:4px}

/* ---------- provider sign-in buttons ----------
   Every button is the same 225x50 box so the column lines up. Google ships
   finished artwork at 180x40; 225x50 is exactly 1.25x, which preserves the
   aspect ratio their guidelines require — never stretch it to fit. Buttons we
   build for providers that ship only a logo use Google's published colours, so
   the row reads as one family.

   The logo is 22px to sit level with Google's, whose 18px mark scales to 22.5px
   inside their artwork. The label sits at 15px against Google's 17.5px (their
   14px scaled 1.25x).
   That 2.5px gap is deliberate: matching it exactly would need a button roughly
   280px wide, because "Log in with Facebook" is longer than "Sign in with
   Google" and Google Sans is narrower than Roboto. Measured, not guessed —
   15px leaves 14px of slack inside the box. Do not raise it past 16px without
   re-measuring, or the label will collide with the edge. */
.authgrid{display:grid;gap:10px;justify-items:start;max-width:420px}

.provider-img{display:inline-flex;border-radius:5px;text-decoration:none}
.provider-img img{display:block;width:225px;height:50px}
.provider-img:focus-visible{outline:3px solid var(--sign);outline-offset:2px}
.provider-img:hover{filter:brightness(.97)}

.provider{
  box-sizing:border-box;
  display:flex;align-items:center;
  width:225px;height:50px;padding:0 10px 0 14px;
  background:#FFFFFF;color:#1F1F1F;
  border:1px solid #747775;border-radius:5px;
  text-decoration:none;
  font-family:"Roboto",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-weight:500;font-size:15px;line-height:20px;
}
.provider:hover{background:#F7F7F7}
.provider:focus-visible{outline:3px solid var(--sign);outline-offset:2px}
.provider .picon{display:flex;align-items:center;width:22px;height:22px;flex:none}
.provider .picon img{width:22px;height:22px;display:block}
.provider .plabel{padding-left:10px;white-space:nowrap}

/* ---------- full screen photo viewer ----------
   Always dark regardless of the page theme: a photo is judged against a neutral
   dark ground, and a light surround throws the colour of a truck's paint. */
.lightbox{position:fixed;inset:0;z-index:200;background:#0C0A09;display:flex;flex-direction:column}
.lb-bar{display:flex;align-items:center;gap:6px;padding:8px 10px;flex:none;border-bottom:1px solid #2A2320}
.lb-tabs{display:flex;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.lb-tabs::-webkit-scrollbar{display:none}
.lb-tab{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  background:none;border:0;color:#9A8E86;padding:8px 11px;border-radius:2px;cursor:pointer;white-space:nowrap}
.lb-tab:hover{color:#EDE7E2;background:#1B1613}
.lb-tab[aria-selected="true"]{color:#fff;background:#A3341F}
.lb-count{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:#CFC5BE;padding:0 8px;white-space:nowrap}
.lb-icon{display:grid;place-items:center;width:38px;height:38px;flex:none;background:none;border:0;
  color:#CFC5BE;cursor:pointer;border-radius:3px}
.lb-icon:hover{color:#fff;background:#1B1613}
.lb-icon:focus-visible,.lb-tab:focus-visible,.lb-nav:focus-visible{outline:2px solid #D2552E;outline-offset:-2px}

.lb-stage{flex:1;margin:0;min-height:0;display:grid;place-items:center;padding:10px;overflow:hidden}
.lb-stage img{max-width:100%;max-height:100%;object-fit:contain;display:block;cursor:zoom-in}
.lb-stage.zoom{overflow:auto;place-items:start;cursor:grab}
.lb-stage.zoom img{max-width:none;max-height:none;width:auto;height:auto;cursor:zoom-out}

.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:76px;
  display:grid;place-items:center;background:rgba(12,10,9,.55);border:0;color:#EDE7E2;
  font-size:2.2rem;line-height:1;cursor:pointer;border-radius:3px}
.lb-nav:hover{background:rgba(12,10,9,.85)}
.lb-nav.prev{left:6px}
.lb-nav.next{right:6px}

/* the way in, sitting on the main photo */
.gallery .big{position:relative}
.gallery .big img{cursor:zoom-in}
.lb-open{position:absolute;right:10px;bottom:10px;display:flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(12,10,9,.72);color:#EDE7E2;border:0;padding:8px 11px;border-radius:3px;cursor:pointer}
.lb-open:hover{background:rgba(12,10,9,.92)}
.lb-open:focus-visible{outline:2px solid #D2552E;outline-offset:2px}

@media (max-width:620px){
  .lb-nav{width:44px;height:64px;font-size:1.8rem}
  .lb-tab{padding:8px 9px}
}

/* ---------- legal pages ---------- */
.legal{line-height:1.65}
.legal h1{font-size:1.9rem;margin:0 0 6px}
.legal h2{font-size:1.15rem;margin:30px 0 8px;padding-top:14px;border-top:1px solid var(--rule)}
.legal h3{font-size:1rem;margin:20px 0 6px}
.legal p,.legal li{color:var(--ink-2)}
.legal ul,.legal ol{padding-left:22px;display:grid;gap:6px;margin:10px 0}
.legal table{width:100%;border-collapse:collapse;margin:14px 0;font-size:.92rem}
.legal th,.legal td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--rule);vertical-align:top}
.legal th{background:var(--sunk);font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}
.legal hr{border:0;border-top:1px solid var(--rule);margin:26px 0}
.legal strong{color:var(--ink)}
.legal code{font-family:var(--mono);font-size:.9em;background:var(--sunk);padding:1px 5px;border-radius:2px}

/* something a lawyer or the founder still has to decide */
.gap{background:var(--warn-wash);color:var(--warn);font-family:var(--mono);font-size:.85em;
  padding:1px 6px;border-radius:2px;border:1px solid currentColor;white-space:nowrap}

.footlinks{display:flex;gap:16px;flex-wrap:wrap;margin-top:4px}
.footlinks a{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.footlinks a:hover{color:var(--ink);text-decoration:underline}

/* ---------- profile and settings ---------- */
.avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;display:grid;place-items:center;
  background:var(--sunk);border:1px solid var(--rule)}
.avatar.lg{width:104px;height:104px}
.avatar.sm{width:26px;height:26px;align-self:center}
.avatar.fallback{background:var(--sign);color:var(--sign-text);border-color:var(--sign);
  font-family:var(--disp);font-weight:900;font-size:1.7rem;line-height:1}
.avatar.lg.fallback{font-size:2.6rem}
.avatar.sm.fallback{font-size:.82rem}

.profhead{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}

.acctgrid{display:grid;grid-template-columns:180px minmax(0,1fr);gap:28px;align-items:start}
.acctnav{display:grid;gap:2px;position:sticky;top:64px}
.acctnav a{font-family:var(--disp);font-weight:700;font-size:.92rem;color:var(--muted);
  text-decoration:none;padding:8px 10px;border-radius:3px}
.acctnav a:hover{color:var(--ink);background:var(--sunk)}
.acctnav a.on{color:var(--ink);background:var(--sunk)}

.themepick{display:flex;gap:8px;flex-wrap:wrap}
.themepick button{font-family:var(--disp);font-weight:700;font-size:.85rem;padding:9px 14px;cursor:pointer;
  background:var(--surface);color:var(--ink-2);border:1px solid var(--rule-2);border-radius:3px}
.themepick button:hover{border-color:var(--ink)}
/* Selected, not submitted. Filling the chosen theme with the brand colour made
   it read as the page's primary action — the one thing you were meant to press
   — when it is only showing which of three is already on. */
.themepick button[aria-pressed="true"]{background:var(--sunk);color:var(--ink);border-color:var(--ink);font-weight:800}
.themepick button[aria-pressed="true"]::before{content:"✓ ";color:var(--good)}

.shot-thumb{width:84px;height:60px;flex:none;border-radius:3px;overflow:hidden;background:var(--sunk);
  display:grid;place-items:center}
.shot-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.shot-thumb svg{width:60%;color:var(--rule-2)}

@media (max-width:720px){
  .acctgrid{grid-template-columns:1fr;gap:16px}
  .acctnav{position:static;display:flex;gap:4px;flex-wrap:wrap}
}

/* ---------------------------------------------------------------------------
 * Account and settings pages.
 *
 * Everything in here is quieter than the marketplace pages on purpose. A
 * listing page is a shop window and is allowed to shout; a settings page is
 * a form somebody wants to finish and leave. The house style — uppercase
 * display headings, mono letter-spaced labels, a filled header bar on every
 * panel — reads as decoration once there are six panels stacked up, and the
 * page stops having a shape.
 * ------------------------------------------------------------------------- */
.acctgrid h1{font-size:1.55rem;font-weight:800;text-transform:none;letter-spacing:-.01em;margin-bottom:2px}

/* A rule, not a filled bar, and a heading that sits at text weight. */
.acctgrid .panel > header{background:var(--surface);padding:13px 18px 11px}
.acctgrid .panel > header h2{font-family:var(--body);font-size:.98rem;font-weight:700;
  text-transform:none;letter-spacing:0}
.acctgrid .panel .body{padding:16px 18px 18px}

/* Field labels read as labels, not as machine keys. */
.acctgrid label.f > span{font-family:var(--body);font-size:.86rem;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--ink-2)}

/* A name is not 1,100 pixels wide. Cap the measure so a form looks composed
   rather than stretched to whatever the window happens to be. */
.acctgrid label.f input:not([type=file]),
.acctgrid label.f select{max-width:26rem}
.acctgrid label.f textarea{max-width:40rem}

/* Key/value rows: the value matters, the key is a whisper. */
.acctgrid dl.kv dt{font-family:var(--body);font-size:.78rem;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--muted)}
.acctgrid dl.kv > div{background:var(--surface);padding:12px 18px}
.acctgrid dl.kv{background:var(--rule)}

/* The side nav is navigation, not a row of buttons. */
.acctnav a{font-family:var(--body);font-weight:600}
.acctnav a.on{background:none;box-shadow:inset 2px 0 0 var(--sign);color:var(--ink)}
.acctnav a:hover{background:none;color:var(--ink)}

/* A file-type hint sits under its control and whispers. As a .f label it was
   being set at label weight above the input, which made "JPG, PNG or WEBP"
   look like the name of the section. */
.acctgrid form.upload label.f > span{font-weight:400;font-size:.8rem;color:var(--muted)}

/* Who you are signed in as: a quiet caption over the heading, not a machine
   identifier. It was set as a .label — mono, uppercase, letter-spaced — which
   is exactly the wrong treatment for an email address somebody has to read. */
.whois{font-size:.84rem;color:var(--muted);margin:0}

/* Links inside a data table. Red and underlined on every row turns a list of
   three trucks into a wall of warnings; the row is the link, so it only needs
   to look like one when you are pointing at it. */
.acctgrid table a{color:var(--ink);text-decoration:none}
.acctgrid table a:hover{text-decoration:underline;color:var(--sign-ink)}
/* ...but an empty table's one row is a sentence with a way out of it, and that
   link has to look like one. A spanning cell is never a lot title. */
.acctgrid table td[colspan] a{color:var(--sign-ink);text-decoration:underline}
.acctgrid thead th{font-family:var(--body);font-size:.76rem;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--muted);background:var(--surface);border-bottom:1px solid var(--rule)}


/* ---------- the landing page ----------
   Its own section because it is the only page here with no table, no listing
   and one field to fill in: the site's usual rhythm of panels and labels reads
   as an admin screen when there is no data in it. Photographs do the work
   instead, which on a site selling vehicles is the honest way to make a page
   carry weight — a discount roundel would be the other way.

   The pictures are deliberately smaller than they were. A photograph that fills
   half the viewport stops being an illustration and becomes an interruption:
   you scroll past three of them and have read nothing. Capped heights and a
   text column wider than the image column put the words back in charge. */

/* .stack is a grid, and an auto-sized grid column takes the max-content of what
   is in it. An auto-fit track list and a 900px photograph both report a
   max-content far wider than a phone, so the column grew to 654px inside a
   390px viewport and the whole page scrolled sideways. minmax(0,1fr) says the
   column may not exceed its container, which is the fix for every one of them
   at once. */
.landing{grid-template-columns:minmax(0,1fr)}
/* height:auto matters. The width/height attributes on each <img> are there so
   the page does not reflow as the photographs arrive, but height is also a
   presentational hint — which pinned every tile to its own intrinsic height and
   quietly cancelled the 4/3 aspect-ratio below. */
.landing img{max-width:100%;height:auto}

.landing h2{text-transform:none;font-size:clamp(1.25rem,2.2vw,1.6rem);letter-spacing:-.015em}
.landing h3{font-size:.99rem;line-height:1.32}
.light{color:#fff}
.dim{color:rgba(255,255,255,.78)}
.label.light{color:rgba(255,255,255,.72)}
.big{font-size:1.06rem;line-height:1.58;color:var(--ink-2)}
.big.light{color:rgba(255,255,255,.9)}
.cta{display:flex;gap:10px;flex-wrap:wrap;padding-top:6px}
.btn.on-dark{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.6)}
.btn.on-dark:hover{background:rgba(255,255,255,.14);border-color:#fff}

/* The hero. Full bleed past the body's gutter, with the photograph as an <img>
   rather than a background so it can be responsive and preloaded — a
   background-image on the largest element of a landing page is the slowest
   thing it can do. Shorter than it was: a hero taller than the fold pushes
   every reason to stay below it. */
.hero{position:relative;margin-inline:-20px;padding-inline:20px;isolation:isolate;
      overflow:hidden;min-height:clamp(360px,50vh,470px);display:flex;align-items:center}
/* object-position, because a shorter hero crops hard and the default centre
   put the truck below the frame — a hero photograph on a vehicle site with no
   vehicle in it. 62% across and 58% down keeps the tractor in shot at every
   width, and the drift is small enough not to walk it back out. */
/* .landing .hero-img, not .hero-img: `.landing img{height:auto}` above is a
   class plus a type selector and therefore outranks a bare class, so it was
   winning — the hero rendered at its full natural height inside a box a third
   of that, anchored at the top, showing sky and hillside and no truck at all.
   object-fit never got a look in, because the box already matched the image's
   own ratio. */
.landing .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
          object-position:62% 58%;z-index:-2;
          transform:scale(1.04);animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.04) translate3d(0,0,0)}
                 to{transform:scale(1.09) translate3d(-0.8%,-0.5%,0)}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(18,16,14,.88) 0%,rgba(18,16,14,.74) 40%,rgba(18,16,14,.3) 76%,rgba(18,16,14,.2) 100%)}
.hero-in{gap:14px;padding-block:44px;align-items:flex-start;width:100%}
.hero h1{font-size:clamp(1.95rem,4.6vw,3rem);line-height:1.05;letter-spacing:-.025em;
         text-transform:none;color:#fff;text-wrap:balance}
.hero .big{max-width:50ch}

.band{padding-block:40px;display:flex;flex-direction:column;gap:20px;align-items:stretch;width:100%}
.band + .band{border-top:1px solid var(--rule)}

/* Four classes, four pictures, kept small. 16/10 rather than 4/3 so a row of
   them reads as a strip rather than four competing posters. */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:14px}
.tiles figure{margin:0;display:flex;flex-direction:column;gap:7px}
.tiles .frame{overflow:hidden;border-radius:3px;background:var(--sunk)}
.tiles img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
           transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.tiles figure:hover img{transform:scale(1.05)}
.tiles figcaption{display:flex;flex-direction:column;gap:0;line-height:1.3}
.tiles figcaption strong{font-size:.91rem}
.tiles figcaption span{font-size:.8rem;color:var(--muted)}

/* Numbered rather than bulleted: four separate promises, and a number makes
   each countable instead of a wall of equal paragraphs. */
ol.numbered{list-style:none;counter-reset:n;padding:0;margin:0;
            display:grid;grid-template-columns:1fr;gap:20px 40px}
@media (min-width:760px){ ol.numbered{grid-template-columns:1fr 1fr} }
ol.numbered li{counter-increment:n;display:grid;grid-template-columns:auto 1fr;
               gap:3px 13px;align-items:baseline}
ol.numbered li::before{content:counter(n,decimal-leading-zero);grid-row:1/span 2;
  font-family:var(--mono);font-size:.78rem;color:var(--sign);font-weight:700;padding-top:2px}
ol.numbered h3,ol.numbered p{margin:0}

/* Text beside a photograph, with the text winning. The picture is capped in
   height and given the narrower column, so these bands are a paragraph with a
   supporting image rather than an image with a caption. */
.feature{display:grid;grid-template-columns:1fr;gap:22px;align-items:start}
@media (min-width:860px){
  .feature{grid-template-columns:1.25fr .75fr;gap:44px;align-items:center}
  .feature.flip{grid-template-columns:.75fr 1.25fr}
  .feature.flip > .shot{order:-1}
}
.shot{margin:0;display:flex;flex-direction:column;gap:8px}
.shot .frame{overflow:hidden;border-radius:3px;background:var(--sunk)}
.shot img{width:100%;max-height:280px;object-fit:cover;display:block;
          transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.shot:hover img{transform:scale(1.04)}
.shot figcaption{font-size:.83rem;color:var(--muted);line-height:1.45;max-width:44ch}

/* --deep, not --ink. Every other token in the palette flips between the light
   and dark themes, and --ink is the TEXT colour: in dark mode it is cream, so
   this band rendered as a pale panel with white text written on it. --deep is
   dark in both themes, which is what a fixed dark band needs. Anything with
   hard-coded white text on it has to sit on --deep for the same reason. */
.signband{margin-inline:-20px;padding:44px 20px;background:var(--deep);color:#fff}
/* The field is on a fixed dark band, so it gets fixed light values rather than
   a token that would turn it dark-on-dark for half the world. */
.signband input{background:#FBF9F7;color:#1F1B19;border:2px solid transparent}
.signband input::placeholder{color:#7C726B}
.signband input:focus-visible{outline-offset:1px}
.signup{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:30px;align-items:start}
.signband .signup{max-width:1120px;margin-inline:auto}
.signband a{color:#fff}
/* Fine print set in the mono face. It is the same family the site already uses
   for labels and metadata, and at this size it reads as a note about the form
   rather than more of the pitch — which is what it is. */
.fineprint{font-family:var(--mono);font-size:.76rem;line-height:1.55;
           letter-spacing:.005em;color:rgba(255,255,255,.72);max-width:52ch}
.fineprint a{text-decoration:underline;text-underline-offset:2px}
.signrow{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.signrow .f{min-width:220px}
.signrow input{border:2px solid transparent}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

ul.ticks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
ul.ticks li{padding-left:14px;border-left:2px solid var(--rule);line-height:1.5}

/* Reveal on scroll. The class is added by script, so with no JavaScript every
   section is simply visible — nothing here may be the reason somebody cannot
   read the page. */
.js-reveal .reveal{opacity:0;transform:translateY(14px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.6,.2,1)}
.js-reveal .reveal.seen{opacity:1;transform:none}

/* Everything above is decoration. Somebody who has asked their system to stop
   moving things has asked for a reason. */
@media (prefers-reduced-motion:reduce){
  /* .landing .hero-img, matching the specificity used above — as `.hero-img`
     alone this rule lost, and the one person on the page who had explicitly
     asked for nothing to move got a panning photograph. */
  .landing .hero-img{animation:none;transform:none}
  .tiles img,.shot img{transition:none}
  .tiles figure:hover img,.shot:hover img{transform:none}
  .js-reveal .reveal{opacity:1;transform:none;transition:none}
}

@media (max-width:640px){
  .hero{min-height:350px}
  .hero-in{padding-block:34px}
  .band{padding-block:32px}
  .signband{padding-block:34px}
  .signrow .btn{width:100%}
  .shot img{max-height:220px}
}