/*
Theme Name: Braun Trucking USA
Description: Purpose-built theme for Braun Trucking LLC — veteran owned, Mulberry FL. Gunmetal and flag colours, no page builder, no webfonts, no external requests. Built to the same rules as the rest of the Doxfeed estate: everything the page needs ships with the page, because it is read on a phone at a loading dock.
Author: Doxfeed build
Version: 2.0.0
*/

/* ── GUNMETAL AND FLAG ───────────────────────────────────────────────────────────
   Brushed steel, not a gradient soup: the metal is one repeating linear-gradient at low
   opacity over a dark base, which costs nothing and survives any screen. Red and navy are
   the flag's; gold is the banner on the truck door. Type is heavy, condensed and
   uppercase because that is what reads at arm's length in daylight. */
:root{
  --steel-0:#07090b; --steel-1:#101419; --steel-2:#171d24; --steel-3:#222a33;
  --edge:#333d49; --edge-hi:#4a5666;
  --paper:#f2f5f8; --muted:#9aa6b4;
  --red:#c8202e; --red-hi:#e8323f; --navy:#16294d; --navy-hi:#22407a;
  --gold:#c9a227; --gold-hi:#f0cf5e;
  --sans:system-ui,-apple-system,"Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --wrap:76rem;
  --brushed:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--paper);overflow-x:clip;
  font:400 clamp(1rem,.95rem + .3vw,1.14rem)/1.6 var(--sans);
  background:var(--steel-0)}
img{max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:900;letter-spacing:-.02em;text-transform:uppercase;line-height:.98}
.wrap{width:min(100% - 2rem,var(--wrap));margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--gold);color:#000;padding:.6rem 1rem;border-radius:4px}

/* ── PLATE: the metal surface every panel is stamped from ── */
.plate{position:relative;background:linear-gradient(180deg,var(--steel-2),var(--steel-1));
  border:1px solid var(--edge);border-top-color:var(--edge-hi);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 30px -18px #000}
.plate::before{content:"";position:absolute;inset:0;background:var(--brushed);pointer-events:none;opacity:.6}

/* ── HEADER ── */
.top{position:sticky;top:0;z-index:30;background:linear-gradient(180deg,#0e1216,#080a0d);
  border-bottom:2px solid var(--gold)}
.top__in{display:flex;align-items:center;gap:1rem;min-height:76px;padding:.5rem 0}
.brand{display:inline-flex;align-items:center;gap:.8rem;text-decoration:none;margin-right:auto;min-width:0}
.brand__mark{width:56px;flex:none;color:var(--gold)}
.brand__mark svg{display:block;width:100%;height:auto}
.brand__w{display:grid;gap:.15rem;min-width:0}
.brand__w b{font:900 clamp(1.05rem,.9rem + .7vw,1.5rem)/1 var(--sans);letter-spacing:.01em;text-transform:uppercase}
.brand__w small{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:50px;padding:.75rem 1.3rem;
  border:0;border-radius:3px;cursor:pointer;text-decoration:none;font:800 1rem/1 var(--sans);letter-spacing:.04em;
  text-transform:uppercase;background:var(--red);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 20px -12px #000}
.btn:hover,.btn:focus-visible{background:var(--red-hi);outline:none}
.btn--call{background:linear-gradient(180deg,var(--steel-3),var(--steel-2));border:1px solid var(--edge-hi);
  color:var(--paper);display:grid;gap:.1rem;padding:.55rem 1.1rem;text-align:center;line-height:1.1}
.btn--call small{font-size:.62rem;letter-spacing:.2em;color:var(--gold)}
.btn--call b{font-size:1.05rem;letter-spacing:.02em}
.btn--big{font-size:1.1rem;padding:.95rem 1.8rem}
.btn--ghost{background:transparent;border:1px solid var(--edge-hi);color:var(--paper)}

/* ── HERO ── */
.hero{position:relative;padding:clamp(3.2rem,10vw,7rem) 0 clamp(2.4rem,6vw,4rem);
  background:
    radial-gradient(120% 90% at 80% -10%,rgba(34,64,122,.35),transparent 60%),
    linear-gradient(180deg,#12171d,#0a0d10 75%);
  border-bottom:1px solid var(--edge)}
.hero::after{content:"";position:absolute;inset:0;background:var(--brushed);opacity:.5;pointer-events:none}
.hero>*{position:relative;z-index:1}
.vet{display:inline-flex;align-items:center;gap:.6rem;margin:0 0 1.1rem;padding:.45rem .9rem;
  border:1px solid var(--gold);border-radius:2px;background:rgba(201,162,39,.1);
  font:800 .74rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-hi)}
.vet svg{width:1.1rem;height:1.1rem;flex:none}
.hero h1{font-size:clamp(2.6rem,1.4rem + 6vw,6rem);
  background:linear-gradient(180deg,#fff 40%,#b9c4d1);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 2px 0 rgba(0,0,0,.4)}
.hero h1 em{display:block;font-style:normal;font-size:.42em;letter-spacing:.16em;color:var(--gold);
  -webkit-text-fill-color:var(--gold);margin-top:.5rem}
.hero__lede{margin:1.1rem 0 1.4rem;font-size:clamp(1.08rem,1rem + .8vw,1.5rem);color:#d6dde5;max-width:42ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin:0}

/* ── CREDENTIAL STRIP: the numbers a broker checks before they book you ── */
.creds{background:linear-gradient(180deg,#0d1115,#090b0e);border-bottom:1px solid var(--edge)}
.creds ul{list-style:none;display:flex;flex-wrap:wrap;gap:0;margin:0;padding:0}
.creds li{flex:1 1 12rem;padding:1rem 1.2rem;border-right:1px solid var(--edge)}
.creds li:last-child{border-right:0}
.creds b{display:block;font:900 1.25rem/1.1 var(--sans);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.creds span{display:block;margin-top:.25rem;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.creds .is-gold b{color:var(--gold-hi)}

/* ── BANDS ── */
.band{padding:clamp(2.8rem,7vw,5rem) 0;border-bottom:1px solid var(--edge)}
.band--dark{background:linear-gradient(180deg,#0c1014,#080a0d)}
.band__h{margin:0 0 1.6rem}
.band h2{font-size:clamp(1.7rem,1.2rem + 2vw,3rem)}
.band h2 span{color:var(--gold)}
.band__dek{margin:.7rem 0 0;color:var(--muted);max-width:56ch}
.cards{list-style:none;margin:0;padding:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr))}
.cards li{display:grid;gap:.5rem;padding:1.3rem;border-radius:3px;
  background:linear-gradient(180deg,var(--steel-2),var(--steel-1));border:1px solid var(--edge);
  border-top:3px solid var(--red);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.cards--gold li{border-top-color:var(--gold)}
.cards b{font:800 1.12rem/1.2 var(--sans);text-transform:uppercase;letter-spacing:.01em}
.cards span{color:#c3ccd6;font-size:.98rem}

/* ── VETERAN BAND ── */
.vetband{position:relative;padding:clamp(2.6rem,7vw,4.6rem) 0;border-bottom:1px solid var(--edge);
  background:linear-gradient(120deg,#0b1220,#141a22 55%,#1a1210)}
.vetband::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(200,32,46,.10) 0 6px,transparent 6px 12px,rgba(255,255,255,.05) 12px 18px,transparent 18px 24px);
  opacity:.5}
.vetband>*{position:relative;z-index:1}
.vetband__grid{display:grid;gap:1.4rem;align-items:center}
.stars{display:flex;gap:.5rem;color:var(--gold)}
.stars svg{width:1.6rem;height:1.6rem}
.vetband p{margin:.8rem 0 0;color:#dbe2ea;max-width:52ch;font-size:1.05rem}

/* ── QUOTE ── */
.quote{display:grid;gap:1.8rem}
.quote__say p{margin:.8rem 0 0;color:#c3ccd6;max-width:46ch}
.quote__or{font-weight:700}
.quote__or a{color:var(--gold-hi)}
.form{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));align-items:end;
  padding:1.4rem;border-radius:3px;background:linear-gradient(180deg,var(--steel-2),var(--steel-1));border:1px solid var(--edge)}
.form label{display:grid;gap:.35rem;font:700 .8rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#cbd4de}
.form .full{grid-column:1/-1}
.form input,.form textarea{width:100%;min-height:50px;padding:.75rem .85rem;border-radius:3px;
  border:1px solid var(--edge-hi);background:#080b0e;color:var(--paper);font:inherit;font-size:16px}
.form input:focus,.form textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.form textarea{min-height:120px;resize:vertical}
.form .btn{grid-column:1/-1;justify-self:start}
.hp{position:absolute;left:-9999px}
.note{grid-column:1/-1;margin:0 0 .4rem;padding:.85rem 1rem;border-radius:3px;font-weight:700}
.note--ok{background:rgba(47,191,113,.14);border:1px solid #2fbf71;color:#c6f4da}
.note--bad{background:rgba(200,32,46,.16);border:1px solid var(--red-hi);color:#ffd6d9}

/* ── FOOTER ── */
.foot{padding:2.4rem 0 3.2rem;background:#060809;color:var(--muted);font-size:.94rem}
.foot__in{display:grid;gap:1.2rem}
.foot__cols{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.foot b{color:var(--paper);display:block;margin-bottom:.3rem;text-transform:uppercase;letter-spacing:.06em;font-size:.86rem}
.foot a{color:var(--paper);text-decoration:none;border-bottom:1px solid var(--edge)}
.foot a:hover{border-bottom-color:var(--gold)}
.foot__reg{font-variant-numeric:tabular-nums;letter-spacing:.04em}
.foot__c{border-top:1px solid var(--edge);padding-top:1rem;font-size:.82rem}

@media (min-width:52rem){
  .quote{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}
  .vetband__grid{grid-template-columns:auto minmax(0,1fr);gap:2.4rem}
}
@media (max-width:40rem){
  .top__in{flex-wrap:wrap;gap:.6rem}
  .btn--call{width:100%}
  .creds li{flex:1 1 50%;border-bottom:1px solid var(--edge)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ── THE HEXCLAD, IN THIS COMPANY'S INK ──────────────────────────────────────────
   Same lattice as doxfeed.com and the two dog machines: one masked layer, two surges
   crossing it on a long loop. Gunmetal walls, flag red running one way and navy the
   other, gold at the crest where they cross. Motion is transform only. */
.clad{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.85;
  -webkit-mask-image:var(--comb,none);mask-image:var(--comb,none);
  -webkit-mask-repeat:repeat;mask-repeat:repeat;
  -webkit-mask-size:78px 45.03px;mask-size:78px 45.03px}
.clad i{position:absolute;display:block}
.clad__rest{inset:0;background:linear-gradient(90deg,#2c3540,#39434f 45%,#252d37)}
/* RED, WHITE AND BLUE, IN THAT ORDER. The current running through the lattice is the
   flag: red leading, white at the crest where it is brightest, blue trailing. */
.clad__surge{inset:-40% -60%;
  background:linear-gradient(112deg,transparent 0 40%,
    rgba(200,32,46,.14) 43%, rgba(214,38,53,.62) 46%,
    rgba(255,255,255,.92) 50%,
    rgba(34,64,122,.62) 54%, rgba(22,41,77,.14) 57%, transparent 61% 100%);
  animation:cladSurge var(--dur,17s) linear infinite;animation-delay:var(--delay,0s)}
.clad__surge--a{--dur:17s;--delay:-4s}
.clad__surge--b{--dur:27s;--delay:-13s;opacity:.55;
  background:linear-gradient(248deg,transparent 0 43%,
    rgba(34,64,122,.45) 46%, rgba(255,255,255,.70) 50%, rgba(200,32,46,.45) 54%, transparent 58% 100%)}
@keyframes cladSurge{from{transform:translate3d(-58%,0,0)}to{transform:translate3d(58%,0,0)}}
@media (prefers-reduced-motion:reduce){.clad__surge{animation:none}}

/* ── THE MACHINE LINE: the tick this site shares with the rest of the estate ── */
.machine{border-top:1px solid var(--edge);background:#070909}
.machine__in{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.4rem;padding:.75rem 0;
  font:700 .72rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.machine__dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--gold);box-shadow:0 0 .6rem var(--gold)}
.machine b{color:var(--paper);font-variant-numeric:tabular-nums;letter-spacing:.06em}
.machine__law{color:#6f7c8b;text-transform:none;letter-spacing:.02em;font-size:.7rem}

/* ── THE DUMP ── */
.hero--dump{padding-bottom:clamp(2rem,5vw,3rem)}
.dump{display:grid;gap:1.6rem;max-width:52rem}
.form--code{max-width:22rem}
.form--code input{letter-spacing:.5em;font-size:1.4rem;text-align:center}
.form input[type=file]{padding:.9rem;background:#0b0e12;border-style:dashed;cursor:pointer}
.dump__recent h2{font-size:1.1rem;margin:0 0 .7rem;color:var(--gold)}
.dump__recent ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.dump__recent li{display:grid;gap:.15rem;padding:.7rem .9rem;border:1px solid var(--edge);border-left:3px solid var(--gold);
  border-radius:3px;background:linear-gradient(180deg,var(--steel-2),var(--steel-1))}
.dump__recent b{font-size:.98rem}
.dump__recent span{font:600 .78rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted)}

/* ── THE QUIET OFFER AT THE FOOT ── */
.build{background:linear-gradient(180deg,#0a0d10,#070909)}
.build__in{display:grid;gap:1.4rem}
.build h2{font-size:clamp(1.4rem,1.1rem + 1.4vw,2.2rem)}
.build p{margin:.7rem 0 0;color:#b9c3cd;max-width:46ch}
.build .form{background:linear-gradient(180deg,#12171d,#0d1116)}
.build .form label small{font-weight:600;letter-spacing:.04em;text-transform:none;color:var(--muted)}
@media (min-width:52rem){ .build__in{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start} }

/* ── THE DASHBOARD ───────────────────────────────────────────────────────────────
   Same component as the rest of the estate: a sticky strip that is always on, and a body
   that zips shut. Gunmetal instead of graphite, flag red and gold instead of orange, and
   a trucking company's instruments — its cycle and its operating authority — instead of
   an archive's. A small Florida carrier with the header of a machine. */
.dash{position:sticky;top:0;z-index:40;isolation:isolate;padding-top:env(safe-area-inset-top,0px);
  background:linear-gradient(180deg,#0f1318,#0a0c0f);border-bottom:2px solid var(--gold);
  box-shadow:0 12px 40px -24px #000}
.dash *{box-sizing:border-box;min-width:0}
.dash__clad{opacity:.5}
.dash{container-type:inline-size;container-name:dash}
.dash__strip{position:relative;z-index:2;display:flex;align-items:center;gap:.7rem;min-height:68px;padding:.45rem clamp(.7rem,2.4vw,1.4rem)}
.dash .brand{margin-right:auto}
.dash__instruments{display:flex;align-items:center;gap:.45rem;flex:1 1 auto;justify-content:center;min-width:0}
.dash__inst{display:inline-flex;align-items:center;gap:.4rem;min-height:40px;padding:0 .7rem;border-radius:3px;
  background:rgba(0,0,0,.45);border:1px solid var(--edge);white-space:nowrap}
.dash__inst b{font:800 .95rem/1 var(--sans);color:var(--paper);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.dash__inst u{text-decoration:none;font:700 .6rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.dash__dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--gold);box-shadow:0 0 .6rem var(--gold);flex:none}
.dash__claude{display:inline-grid;grid-auto-flow:column;align-items:baseline;gap:.35rem;flex:0 0 auto;min-height:44px;
  align-content:center;padding:.3rem .7rem;border-radius:10px;text-decoration:none;color:#f7dcc8;
  background:rgba(217,119,87,.10);border:1px solid rgba(217,119,87,.55);transition:background .16s}
.dash__claude:hover,.dash__claude:focus-visible{background:rgba(217,119,87,.24)}
.dash__claude:focus-visible{outline:2px solid #d97757;outline-offset:2px}
.dash__claude-k,.dash__claude-b{font:700 .55rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;color:#d9a48f}
.dash__claude b{font:900 .95rem/1 var(--sans);letter-spacing:.03em;color:#fff}
@media print{.dash__clad,.dash__zip,.dash__claude{display:none}}
.dash__zip{display:inline-flex;align-items:center;gap:.5rem;flex:0 0 auto;min-height:44px;padding:.3rem .7rem .3rem .45rem;
  border-radius:3px;cursor:pointer;color:var(--paper);background:rgba(0,0,0,.5);border:1px solid var(--edge-hi);
  font:800 .62rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase}
.dash__zip[hidden]{display:none}
.dash__zip:hover,.dash__zip:focus-visible{border-color:var(--gold);background:rgba(201,162,39,.14);outline:none}
.dash__zip-hex{position:relative;width:22px;height:24px;flex:none;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:linear-gradient(180deg,var(--gold),#8a6f14)}
.dash__zip-hex i{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;
  border-right:2px solid #0b0d10;border-bottom:2px solid #0b0d10;transform:translateY(-3px) rotate(45deg);transition:transform .28s ease}
.dash[data-dash="compact"] .dash__zip-hex i{transform:translateY(2px) rotate(-135deg)}
.dash__body{position:relative;z-index:1;display:grid;grid-template-rows:1fr;overflow:hidden;
  transition:height .32s cubic-bezier(.2,.8,.2,1)}
.dash__inner{min-height:0;overflow:hidden;padding:0 clamp(.7rem,2.4vw,1.4rem) .8rem;display:grid;gap:.7rem}
.dash[data-dash="compact"] .dash__body{grid-template-rows:0fr}
.dash[data-dash="compact"] .dash__inner{padding-bottom:0;visibility:hidden;transition:visibility 0s .32s}
.dash[data-dash="expanded"] .dash__inner{visibility:visible;transition:visibility 0s 0s}
.dash__nav{display:flex;flex-wrap:wrap;gap:.4rem}
.dash__nav a{display:inline-flex;align-items:center;min-height:40px;padding:.3rem .8rem;border-radius:999px;
  text-decoration:none;color:var(--paper);background:rgba(255,255,255,.05);border:1px solid var(--edge);
  font:700 .78rem/1 var(--sans);letter-spacing:.04em}
.dash__nav a:hover,.dash__nav a:focus-visible{border-color:var(--gold);background:rgba(201,162,39,.12);outline:none}
.dash__d{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin:0;padding:.5rem 0 0;border-top:1px solid var(--edge)}
.dash__d>div{display:grid;gap:.1rem}
.dash__d dd{margin:0;font:800 .95rem/1 var(--sans);color:var(--paper);font-variant-numeric:tabular-nums}
.dash__d dt{font:700 .58rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
@container dash (max-width:52rem){
  .dash__strip{gap:.4rem;padding:.4rem .6rem}
  .brand__w small{display:none}
  .dash__inst--dot{display:none}
  .dash__claude-k,.dash__claude-b{display:none}
  .dash__claude{padding:.3rem .55rem}
  .dash__zip [data-dash-zip-label]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .btn--call small{display:none}
}
@media (prefers-reduced-motion:reduce){.dash__body,.dash__zip-hex i{transition:none}}

/* ── THE CREST ── */
.crest{display:block;width:100%;height:auto}
.brand .crest{width:74px;flex:none}
.hero__crest{width:min(300px,58vw);margin:0 0 1.2rem;filter:drop-shadow(0 10px 26px rgba(0,0,0,.6))}
@container dash (max-width:52rem){ .brand .crest{width:58px} }
@media (max-width:52rem){ .hero__crest{width:min(230px,54vw)} }

/* ── OWNER SURFACES ─────────────────────────────────────────────────────────────
   The drop page and the inquiry console. Same metal as the public site, but the
   controls are bigger and squarer, because they get used one-handed in a truck. */

.hero__kicker{margin:0 0 .6rem;font:800 .7rem/1 var(--sans);letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold)}
.dash__own{border-color:var(--gold)!important;color:var(--gold-hi)!important}

.band--how{border-top:1px solid var(--edge)}
.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.steps li{counter-increment:s;position:relative;padding:1.2rem 1.2rem 1.2rem 3.4rem;border-radius:3px;
  background:linear-gradient(180deg,var(--steel-2),var(--steel-1));border:1px solid var(--edge);
  border-top:2px solid var(--gold)}
.steps li::before{content:counter(s);position:absolute;left:1.1rem;top:1.05rem;width:1.7rem;height:1.7rem;
  display:grid;place-items:center;border-radius:2px;background:var(--gold);color:#0a0c0f;
  font:900 .95rem/1 var(--sans)}
.steps b{display:block;margin-bottom:.35rem;font-size:1.02rem}
.steps span{color:var(--muted);font-size:.94rem;line-height:1.55}

.form--drop{max-width:52rem}
.hint{display:block;margin-top:.4rem;font:400 .78rem/1.4 var(--sans);letter-spacing:0;
  text-transform:none;color:var(--muted)}
.gate{grid-column:1/-1;display:grid;gap:.5rem;padding:1.1rem;border-radius:3px;
  background:rgba(201,162,39,.07);border:1px solid var(--gold)}
.gate__f{max-width:14rem}
.gate__f input{letter-spacing:.5em;font-size:1.35rem;text-align:center}
.gate__w{margin:0;color:var(--gold-hi);font-size:.82rem}

.ownergate{max-width:26rem;display:grid;gap:.8rem}
.ownergate h2{margin:0;font-size:1.3rem}
.ownergate p{margin:0;color:var(--muted)}
.ownergate a{color:var(--gold-hi)}

.inq__top{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  margin:0 0 1.4rem;padding-bottom:1rem;border-bottom:1px solid var(--edge)}
.inq__tabs{display:flex;flex-wrap:wrap;gap:.4rem}
.inq__tabs a{display:inline-flex;gap:.45rem;align-items:center;padding:.5rem .85rem;border-radius:2px;
  text-decoration:none;color:var(--muted);border:1px solid var(--edge);background:var(--steel-1);
  font:700 .78rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.inq__tabs a b{color:var(--paper);font-variant-numeric:tabular-nums}
.inq__tabs a.on{color:#0a0c0f;background:var(--gold);border-color:var(--gold)}
.inq__tabs a.on b{color:#0a0c0f}
.inq__acts{display:flex;gap:.5rem;align-items:center}
.inq__acts .btn{min-height:42px;padding:.55rem 1rem;font-size:.82rem}
.inq__empty{color:var(--muted);max-width:44ch;font-size:1.02rem}

.inq{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.inq__i{border-radius:3px;border:1px solid var(--edge);overflow:hidden;
  background:linear-gradient(180deg,var(--steel-2),var(--steel-1))}
.inq__i[data-state=new]{border-left:3px solid var(--red)}
.inq__i[data-state=working]{border-left:3px solid var(--gold)}
.inq__i[data-state=won]{border-left:3px solid #2fbf71}
.inq__i[data-state=lost]{border-left:3px solid var(--edge-hi);opacity:.72}
.inq__i summary{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;padding:1rem 1.1rem;cursor:pointer;
  list-style:none;background:var(--brushed)}
.inq__i summary::-webkit-details-marker{display:none}
.inq__i summary:hover{background:rgba(255,255,255,.03)}
.inq__pip{width:.5rem;height:.5rem;border-radius:50%;background:var(--edge-hi);flex:none}
.inq__i[data-state=new] .inq__pip{background:var(--red-hi);box-shadow:0 0 .6rem var(--red)}
.inq__i[data-state=working] .inq__pip{background:var(--gold)}
.inq__i[data-state=won] .inq__pip{background:#2fbf71}
.inq__name{font-size:1.05rem}
.inq__lane{color:var(--muted);font-size:.9rem;flex:1 1 12rem;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inq__when{color:var(--muted);font-size:.76rem;font-variant-numeric:tabular-nums}
.inq__tag{padding:.25rem .6rem;border-radius:2px;border:1px solid var(--edge-hi);
  font:800 .66rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.inq__body{padding:0 1.1rem 1.2rem;display:grid;gap:1rem;border-top:1px solid var(--edge)}
.inq__d{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));margin:1.1rem 0 0}
.inq__d dt{font:800 .66rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  margin-bottom:.3rem}
.inq__d dd{margin:0;font-size:1rem}
.inq__d a{color:var(--gold-hi)}
.inq__freight{margin:0;padding:.9rem 1rem;border-radius:3px;background:#080b0e;border:1px solid var(--edge);
  color:#d6dde5;line-height:1.6}
.inq__call{margin:0}
.btn--call2{background:linear-gradient(180deg,var(--red-hi),var(--red))}
.inq__manage{display:grid;gap:.9rem;padding-top:.9rem;border-top:1px dashed var(--edge)}
.inq__states{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{padding:.5rem .9rem;border-radius:2px;cursor:pointer;background:var(--steel-1);
  border:1px solid var(--edge-hi);color:var(--muted);
  font:800 .72rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.chip:hover{color:var(--paper);border-color:var(--gold)}
.chip--on{background:var(--gold);border-color:var(--gold);color:#0a0c0f}
.inq__note{display:grid;gap:.5rem;justify-items:start}
.inq__note label{display:grid;gap:.35rem;width:100%;
  font:800 .66rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.inq__note textarea{width:100%;min-height:64px;padding:.7rem .8rem;border-radius:3px;resize:vertical;
  border:1px solid var(--edge-hi);background:#080b0e;color:var(--paper);font:inherit;font-size:16px}
.inq__note textarea:focus{outline:2px solid var(--gold);outline-offset:1px}
.inq__note .btn{min-height:42px;padding:.5rem 1rem;font-size:.8rem}
.inq__del .btn--del{min-height:40px;padding:.45rem 1rem;font-size:.76rem;background:transparent;
  border:1px solid var(--red);color:#ff9aa2;letter-spacing:.14em}
.inq__del .btn--del:hover{background:var(--red);color:#fff}

@media (max-width:40rem){
  .inq__i summary{gap:.45rem}
  .inq__when{width:100%;order:9}
  .inq__acts{width:100%}
  .inq__acts .btn,.inq__acts form{flex:1 1 auto}
  .inq__acts .btn{width:100%}
}

.ownertiles{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.ownertile{display:grid;gap:.4rem;padding:1.3rem;border-radius:3px;text-decoration:none;color:var(--paper);
  background:linear-gradient(180deg,var(--steel-2),var(--steel-1));border:1px solid var(--edge);
  border-left:3px solid var(--gold)}
.ownertile:hover{border-color:var(--gold);background:linear-gradient(180deg,var(--steel-3),var(--steel-2))}
.ownertile b{font-size:1.15rem;letter-spacing:.02em}
.ownertile span{color:var(--muted);font-size:.92rem;line-height:1.5}

/* At phone width the strip cannot hold four objects on one line, and the wordmark was
   wrapping under the cycle. It becomes two rows instead: identity and the phone number
   first, because that is what a customer reaches for, then the machine and the credit. */
@container dash (max-width:34rem){
  .dash__strip{flex-wrap:wrap;row-gap:.45rem}
  .brand{flex:1 1 55%;min-width:0;margin-right:.4rem}
  .brand__w{min-width:0}
  .brand__w b{font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .brand .crest{width:46px}
  .btn--call{flex:0 0 auto;padding:.5rem .8rem}
  .btn--call b{font-size:.95rem}
  .dash__instruments{order:5;flex:1 1 auto;justify-content:flex-start;gap:.4rem}
  .dash__claude{order:6}
  .dash__zip{order:7;margin-left:auto}
}

/* ── THE OWNER CONSOLE ───────────────────────────────────────────────────────────
   Two people use this: a driver holding a phone, and his wife at a kitchen table.
   So: nothing under 44px, one column on a phone, no icon that has to be learned,
   and the button that does the thing is always the biggest object in its row. */

.console{container-type:inline-size;container-name:console;padding:clamp(1.4rem,4vw,3rem) 0 clamp(3rem,8vw,5rem)}
.con__head{margin:0 0 1.4rem}
.con__kicker{margin:0 0 .5rem;font:800 .68rem/1 var(--sans);letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold)}
.con__head h1{font-size:clamp(1.9rem,1.3rem + 2.4vw,3.2rem)}
.con__lede{margin:0 0 1.4rem;font-size:1.08rem;color:#d6dde5;max-width:56ch}
.con__lede b{color:var(--gold-hi)}
.con__empty{margin:1.2rem 0;padding:1.3rem 1.4rem;border-radius:3px;color:var(--muted);
  background:linear-gradient(180deg,var(--steel-2),var(--steel-1));border:1px solid var(--edge);
  border-left:3px solid var(--edge-hi);max-width:60ch;line-height:1.6}
.con__empty b{color:var(--paper)}
.con__back{margin:0 0 1rem}
.con__back a{color:var(--gold-hi);text-decoration:none;font-weight:700}
.con__out{margin:2.6rem 0 0;padding-top:1.4rem;border-top:1px solid var(--edge)}

.con__tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.2rem}
.con__tabs a{display:inline-flex;align-items:center;gap:.5rem;min-height:52px;padding:.7rem 1.2rem;
  border-radius:3px;text-decoration:none;color:#cbd4de;border:1px solid var(--edge-hi);
  background:linear-gradient(180deg,var(--steel-2),var(--steel-1));
  font:800 .84rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.con__tabs a:hover{border-color:var(--gold);color:var(--paper)}
.con__tabs a.on{background:var(--gold);border-color:var(--gold);color:#0a0c0f}
.con__tabs b{min-width:1.5rem;padding:.15rem .4rem;border-radius:2px;background:var(--red);
  color:#fff;font-variant-numeric:tabular-nums;text-align:center}
.con__tabs a.on b{background:#0a0c0f;color:var(--gold)}

/* the door */
.door{max-width:24rem;padding:1.6rem;border-radius:3px;
  background:linear-gradient(180deg,var(--steel-2),var(--steel-1));border:1px solid var(--edge);
  border-top:3px solid var(--gold)}
.door h2{margin:0 0 .4rem;font-size:1.4rem}
.door p{margin:0 0 1.1rem;color:var(--muted)}
.door form{display:grid;gap:.8rem}
.door__code{width:100%;min-height:64px;padding:.6rem;border-radius:3px;text-align:center;
  letter-spacing:.55em;text-indent:.55em;font:900 1.9rem/1 var(--sans);
  border:1px solid var(--edge-hi);background:#080b0e;color:var(--paper)}
.door__code:focus{outline:2px solid var(--gold);outline-offset:2px;border-color:var(--gold)}
.door__alt{margin:1.2rem 0 0;font-size:.9rem}
.door__alt a{color:var(--gold-hi)}

/* the inbox */
.inq{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.inq__i{border-radius:3px;border:1px solid var(--edge);overflow:hidden;
  background:linear-gradient(180deg,var(--steel-2),var(--steel-1))}
.inq__i[data-state=new]{border-left:4px solid var(--red)}
.inq__i[data-state=working]{border-left:4px solid var(--gold)}
.inq__i[data-state=won]{border-left:4px solid #2fbf71}
.inq__i[data-state=lost]{border-left:4px solid var(--edge-hi);opacity:.7}
.inq__i summary{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;padding:1.05rem 1.1rem;
  cursor:pointer;list-style:none;min-height:64px;background:var(--brushed)}
.inq__i summary::-webkit-details-marker{display:none}
.inq__i summary:hover{background:rgba(255,255,255,.03)}
.inq__pip{width:.55rem;height:.55rem;border-radius:50%;background:var(--edge-hi);flex:none}
.inq__i[data-state=new] .inq__pip{background:var(--red-hi);box-shadow:0 0 .6rem var(--red)}
.inq__i[data-state=working] .inq__pip{background:var(--gold)}
.inq__i[data-state=won] .inq__pip{background:#2fbf71}
.inq__name{font-size:1.1rem}
.inq__lane{color:var(--muted);font-size:.92rem;flex:1 1 12rem;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inq__when{color:var(--muted);font-size:.8rem;font-variant-numeric:tabular-nums}
.inq__tag{padding:.3rem .65rem;border-radius:2px;border:1px solid var(--edge-hi);white-space:nowrap;
  font:800 .68rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.inq__body{padding:1.2rem 1.1rem;display:grid;gap:1.2rem;border-top:1px solid var(--edge)}
.inq__freight{margin:0;padding:1rem 1.1rem;border-radius:3px;background:#080b0e;
  border:1px solid var(--edge);color:#e3e9ef;font-size:1.05rem;line-height:1.65}
.inq__d{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));margin:0}
.inq__d dt{font:800 .66rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.35rem}
.inq__d dd{margin:0;font-size:1.02rem}
.inq__d a{color:var(--gold-hi)}

/* the four things a person actually does */
.doit{display:flex;flex-wrap:wrap;gap:.5rem;align-items:stretch}
.doit form{display:contents}
.doit__b{display:inline-flex;align-items:center;justify-content:center;min-height:52px;
  padding:.7rem 1.15rem;border-radius:3px;cursor:pointer;text-decoration:none;
  background:linear-gradient(180deg,var(--steel-3),var(--steel-2));border:1px solid var(--edge-hi);
  color:var(--paper);font:800 .82rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.doit__b:hover{border-color:var(--gold);background:linear-gradient(180deg,#2a333d,var(--steel-3))}
.doit__b.is-on{background:var(--gold);border-color:var(--gold);color:#0a0c0f}
.doit__b--go{background:linear-gradient(180deg,var(--red-hi),var(--red));border-color:var(--red-hi);
  flex:1 1 12rem;font-size:.95rem}
.doit__b--go:hover{background:var(--red-hi)}
.doit__b--add{border-color:var(--gold);color:var(--gold-hi)}

.jot{display:grid;gap:.6rem;justify-items:start}
.jot label{display:grid;gap:.4rem;width:100%;
  font:800 .68rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.jot textarea{width:100%;min-height:72px;padding:.8rem .9rem;border-radius:3px;resize:vertical;
  border:1px solid var(--edge-hi);background:#080b0e;color:var(--paper);font:inherit;font-size:16px}
.jot textarea:focus{outline:2px solid var(--gold);outline-offset:1px}
.binit{margin:0}
.btn--del{min-height:44px;padding:.5rem 1.1rem;font-size:.78rem;background:transparent;
  border:1px solid var(--red);color:#ff9aa2;letter-spacing:.14em}
.btn--del:hover{background:var(--red);color:#fff}

/* customers */
.hunt{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.4rem}
.hunt input[type=search]{flex:1 1 16rem;min-height:52px;padding:.7rem .9rem;border-radius:3px;
  border:1px solid var(--edge-hi);background:#080b0e;color:var(--paper);font:inherit;font-size:16px}
.hunt input:focus{outline:2px solid var(--gold);outline-offset:1px}
.ppl{list-style:none;margin:0 0 1.6rem;padding:0;display:grid;gap:.6rem}
.ppl__i{border-radius:3px;border:1px solid var(--edge);border-left:3px solid var(--gold);
  background:linear-gradient(180deg,var(--steel-2),var(--steel-1))}
.ppl__i:hover{border-color:var(--gold)}
.ppl__go{display:grid;gap:.25rem;padding:1.1rem 1.2rem;min-height:72px;text-decoration:none;color:var(--paper)}
.ppl__go b{font-size:1.15rem}
.ppl__co{color:#cbd4de;font-size:.95rem}
.ppl__m{color:var(--muted);font-size:.9rem}
.ppl__n{color:var(--gold);font:800 .68rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.ppl__tags{display:flex;flex-wrap:wrap;gap:.3rem;padding:0 1.2rem 1rem}
.ppl__tags i{font-style:normal;padding:.25rem .55rem;border-radius:2px;background:rgba(201,162,39,.12);
  border:1px solid rgba(201,162,39,.45);color:var(--gold-hi);
  font:800 .64rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}

.pform{display:grid;gap:1.2rem;padding:1.4rem;border-radius:3px;
  background:linear-gradient(180deg,var(--steel-2),var(--steel-1));border:1px solid var(--edge);
  border-top:3px solid var(--gold)}
.pform__h{margin:0;font-size:1.6rem}
.pform__g{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.pform label,.pform__note{display:grid;gap:.4rem;
  font:800 .68rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#cbd4de}
.pform .wide{grid-column:1/-1}
.pform input[type=text],.pform input[type=tel],.pform input[type=email],.pform textarea{
  width:100%;min-height:52px;padding:.7rem .85rem;border-radius:3px;font:inherit;font-size:16px;
  border:1px solid var(--edge-hi);background:#080b0e;color:var(--paper);letter-spacing:normal;text-transform:none}
.pform input:focus,.pform textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.pform textarea{min-height:110px;resize:vertical}
.pform__tags{border:1px solid var(--edge);border-radius:3px;padding:1rem;margin:0;
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.pform__tags legend{padding:0 .4rem;font:800 .68rem/1 var(--sans);letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted)}
.tag{display:inline-flex!important;align-items:center;gap:.45rem;min-height:44px;padding:.4rem .8rem;
  border-radius:3px;cursor:pointer;background:var(--steel-1);border:1px solid var(--edge-hi);
  letter-spacing:.1em!important;color:var(--muted)!important}
.tag input{width:20px;height:20px;accent-color:var(--gold)}
.tag:has(input:checked){background:rgba(201,162,39,.14);border-color:var(--gold);color:var(--gold-hi)!important}
.pform__do{display:flex;flex-wrap:wrap;gap:.6rem}
.addnew{margin-top:1.6rem;border:1px dashed var(--edge-hi);border-radius:3px;padding:1rem 1.2rem}
.addnew summary{cursor:pointer;min-height:44px;display:flex;align-items:center;
  font:800 .84rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.addnew[open] summary{margin-bottom:1rem}

/* what has happened with them */
.hist{margin-top:1.8rem}
.hist h3{margin:0 0 1rem;font-size:1.25rem;color:var(--gold)}
.hist__add{display:grid;gap:.7rem;grid-template-columns:minmax(9rem,.7fr) minmax(0,2fr) minmax(7rem,.6fr) auto;
  align-items:end;padding:1.2rem;border-radius:3px;margin:0 0 1.2rem;
  background:linear-gradient(180deg,var(--steel-2),var(--steel-1));border:1px solid var(--edge)}
.hist__add label{display:grid;gap:.4rem;
  font:800 .66rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#cbd4de}
.hist__add input,.hist__add select{width:100%;min-height:52px;padding:.7rem .8rem;border-radius:3px;
  border:1px solid var(--edge-hi);background:#080b0e;color:var(--paper);font:inherit;font-size:16px}
.hist__add input:focus,.hist__add select:focus{outline:2px solid var(--gold);outline-offset:1px}
.hist__add .btn{min-height:52px}
.hist__l{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.hist__l li{padding:.95rem 1.1rem;border-radius:3px;border:1px solid var(--edge);
  border-left:3px solid var(--edge-hi);background:var(--steel-1)}
.hist__l li[data-kind=call]{border-left-color:var(--red)}
.hist__l li[data-kind=quote]{border-left-color:var(--gold)}
.hist__l li[data-kind=load]{border-left-color:#2fbf71}
.hist__l b{margin-right:.6rem;font:800 .7rem/1 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold)}
.hist__l time{color:var(--muted);font-size:.78rem;font-variant-numeric:tabular-nums}
.hist__l i{margin-left:.6rem;font-style:normal;color:var(--muted);font-size:.78rem}
.hist__l p{margin:.5rem 0 0;line-height:1.6}

@container console (max-width:44rem){
  .hist__add{grid-template-columns:1fr}
  .doit__b{flex:1 1 100%}
  .doit__b--go{flex:1 1 100%}
  .inq__i summary{gap:.5rem}
  .inq__when{order:9}
  .con__tabs a{flex:1 1 auto;justify-content:center}
}
/* On a phone the console is a tool, not a billboard: the company name does not need to be
   three inches tall above the thing you came here to do. */
@container console (max-width:44rem){
  .con__head h1{font-size:1.5rem}
  .con__kicker{font-size:.6rem;letter-spacing:.2em}
  .con__head{margin-bottom:1rem}
}

/* The two portals. This is the first thing the owner sees after the code, and it exists so
   nobody has to decide which tab they wanted before deciding which job they are doing. */
.portals{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr))}
.portal{display:grid;gap:.5rem;align-content:start;padding:1.6rem;border-radius:4px;
  text-decoration:none;color:var(--paper);position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--steel-2),var(--steel-1));border:1px solid var(--edge);
  border-top:3px solid var(--gold);min-height:13rem}
.portal::after{content:"";position:absolute;inset:auto -30% -40% auto;width:16rem;height:16rem;
  border-radius:50%;background:radial-gradient(circle,rgba(201,162,39,.10),transparent 68%);pointer-events:none}
.portal--mgmt{border-top-color:var(--red)}
.portal--mgmt::after{background:radial-gradient(circle,rgba(200,32,46,.12),transparent 68%)}
.portal:hover{border-color:var(--gold);background:linear-gradient(180deg,var(--steel-3),var(--steel-2))}
.portal--mgmt:hover{border-color:var(--red-hi)}
.portal__k{font:800 .64rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.portal b{font-size:clamp(1.35rem,1.1rem + .8vw,1.8rem);letter-spacing:-.01em;text-transform:uppercase}
.portal__d{color:#cbd4de;line-height:1.6;font-size:.98rem}
.portal__n{margin-top:.4rem;padding-top:.8rem;border-top:1px solid var(--edge);
  font:800 .72rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.portal__hot{font-style:normal;color:#fff;background:var(--red);padding:.3rem .6rem;border-radius:2px}

.con__where{margin:1rem 0 .9rem;font:800 .74rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.con__where a{color:var(--muted);text-decoration:none}
.con__where a:hover{color:var(--gold-hi)}
.con__where span{margin:0 .5rem;color:var(--edge-hi)}
.con__where b{color:var(--gold)}

/* the drop form and the receipt under it are one column, not two widths */
.dump__recent{max-width:52rem}
.dump__recent h3{margin:1.6rem 0 .7rem;font-size:1.05rem;color:var(--gold)}
.dump__recent ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.dump__recent li{padding:.7rem .9rem;border-radius:3px;background:var(--steel-1);
  border:1px solid var(--edge);border-left:3px solid var(--edge-hi)}
.dump__recent b{display:block;font-size:.98rem}
.dump__recent span{color:var(--muted);font-size:.78rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.con__lede--soft{color:var(--muted);font-size:.98rem;max-width:52ch;margin-top:-.6rem}