/* ============================================================================
   Northwest Auto Broker — shared design system
   Cream / gold / serif language carried over from the approved template.
   ========================================================================== */
:root{
  --bg:#faf8f4; --bg2:#f2ede4; --ink:#14120e; --mut:#6f6a5e; --faint:#a09a8c;
  --gold:#a8834a; --gold2:#c9a962; --line:rgba(20,18,14,.12); --line2:rgba(20,18,14,.22);
  --ok:#15803d; --okbg:#dcfce7; --bad:#b91c1c; --badbg:#fee2e2;
  --serif:Georgia,'Times New Roman',serif;
  --sans:ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --wrap:1380px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,3.5vw,48px)}
.eyebrow{font-size:11.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);font-weight:700}
.serif{font-family:var(--serif);font-weight:400}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* The `hidden` ATTRIBUTE is only `display:none` in the UA stylesheet, so any
   author rule that sets display beats it. `.field{display:flex}` did exactly
   that: the service form marked the VIN and plate fields hidden and both stayed
   on screen, still starred and still required, so "I don't have either" left
   the customer facing two mandatory fields they had just said they couldn't
   fill. Anything marked hidden must actually be hidden. */
[hidden]{display:none!important}

/* ===== NAV ===== */
nav.site{position:fixed;top:0;left:0;right:0;z-index:80;transition:.4s}
nav.site.solid,body.inner nav.site{background:rgba(250,248,244,.9);backdrop-filter:blur(16px);box-shadow:0 1px 0 var(--line)}
.nv{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,3.5vw,48px);height:86px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{font-weight:900;font-size:clamp(15px,1.6vw,21px);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.brand i{font-style:normal;color:var(--gold)}
.nl{display:flex;gap:clamp(12px,1.9vw,30px)}
.nl a{font-weight:700;font-size:15px;letter-spacing:.04em;color:var(--mut);transition:color .3s;position:relative;padding:6px 0}
.nl a:hover,.nl a.on{color:var(--ink)}
.nl a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--gold);transition:width .3s var(--ease)}
.nl a:hover::after,.nl a.on::after{width:100%}
@media(max-width:1100px){.nl{display:none}}
.nv-right{display:flex;align-items:center;gap:12px}
.callbtn{background:var(--ink);color:#fff;font-weight:800;font-size:13.5px;letter-spacing:.04em;padding:13px 24px;border-radius:99px;transition:.3s;white-space:nowrap}
.callbtn:hover{background:var(--gold);transform:translateY(-2px)}
@media(max-width:560px){.callbtn{display:none}}
.burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line2);background:rgba(255,255,255,.7);backdrop-filter:blur(8px);position:relative;cursor:pointer}
.burger span{position:absolute;left:12px;right:12px;height:2px;background:var(--ink);border-radius:2px;transition:.3s var(--ease)}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:27px}
.burger.x span:nth-child(1){top:21px;transform:rotate(45deg)}
.burger.x span:nth-child(2){opacity:0}
.burger.x span:nth-child(3){top:21px;transform:rotate(-45deg)}
@media(max-width:1100px){.burger{display:block}}
.loc{position:relative}
.loc-chip{display:flex;align-items:center;gap:9px;border:1px solid var(--line2);border-radius:99px;padding:11px 17px;font-size:13px;font-weight:700;cursor:pointer;background:rgba(255,255,255,.7);backdrop-filter:blur(8px);transition:.3s}
.loc-chip:hover{border-color:var(--gold)}
.loc-chip .dot{width:8px;height:8px;border-radius:50%;background:#16a34a;box-shadow:0 0 8px rgba(22,163,74,.6)}
.loc-chip .dot.closed{background:#dc2626;box-shadow:0 0 8px rgba(220,38,38,.5)}
.loc-panel{position:absolute;top:calc(100% + 13px);right:0;width:300px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:.35s var(--ease);box-shadow:0 28px 60px -18px rgba(20,18,14,.28);z-index:5}
.loc:hover .loc-panel,.loc:focus-within .loc-panel{opacity:1;visibility:visible;transform:none}
.loc-panel b{font-size:15px;font-weight:800}
.loc-panel .addr{color:var(--mut);font-size:13.5px;line-height:1.6;margin-top:8px}
.loc-panel .addr a{color:var(--gold);font-weight:700}
.loc-panel .open{display:inline-flex;margin-top:12px;font-size:12px;font-weight:800;padding:7px 14px;border-radius:99px;background:var(--okbg);color:var(--ok);letter-spacing:.03em}
.loc-panel .open.closed{background:var(--badbg);color:var(--bad)}
.loc-panel table{width:100%;margin-top:13px;font-size:12.5px;color:var(--mut);border-collapse:collapse}
.loc-panel td{padding:3px 0}.loc-panel td:last-child{text-align:right;color:var(--ink);font-weight:600}
.loc-panel .dirs{display:block;text-align:center;margin-top:15px;background:var(--gold);color:#fff;font-weight:800;font-size:13.5px;padding:12px;border-radius:12px;transition:.25s}
.loc-panel .dirs:hover{filter:brightness(1.1)}
.mmenu{position:fixed;top:86px;left:0;right:0;z-index:79;background:rgba(250,248,244,.97);backdrop-filter:blur(18px);box-shadow:0 30px 60px -20px rgba(20,18,14,.25);border-bottom:1px solid var(--line);padding:10px 22px 22px;display:none}
.mmenu.open{display:block}
.mmenu a{display:block;padding:15px 4px;font-size:17px;font-weight:800;border-bottom:1px solid var(--line)}
.mmenu a:last-child{border-bottom:0}
.mmenu .mcall{margin-top:12px;text-align:center;background:var(--ink);color:#fff;border-radius:99px;border-bottom:0}
/* Email sits under the call button now that Contact is out of the nav — on a
   phone those two are the whole "how do I reach them" answer. */
.mmenu .mmail{margin-top:8px;text-align:center;border:1px solid var(--line2);border-radius:99px;border-bottom:1px solid var(--line2);font-size:15px;font-weight:700;color:var(--mut);word-break:break-all}
.mmenu .mmail:hover{color:var(--ink);border-color:var(--gold)}
.mmenu .mhours{font-size:12.5px;color:var(--faint);padding:10px 4px 0}
@media(max-width:700px){
  .nv{height:64px;padding:0 12px;gap:8px}
  .brand{font-size:13.5px;letter-spacing:.04em}
  .nv-right{gap:7px}
  .loc-chip{padding:9px 12px;font-size:11.5px;gap:6px}
  .loc-panel{width:min(290px,calc(100vw - 24px));right:-46px}
  .burger{width:40px;height:40px;flex:0 0 40px}
  .burger span{left:11px;right:11px}
  .burger span:nth-child(1){top:13px}.burger span:nth-child(2){top:19px}.burger span:nth-child(3){top:25px}
  .burger.x span:nth-child(1),.burger.x span:nth-child(3){top:19px}
  .mmenu{top:64px}
}
@media(max-width:400px){.brand{font-size:12px}.loc-chip{padding:8px 10px;font-size:11px}}

/* ===== INNER PAGE HEADER ===== */
body.inner{padding-top:86px}
@media(max-width:700px){body.inner{padding-top:64px}}
.phead{position:relative;background:linear-gradient(180deg,#fff 0%,var(--bg) 100%);border-bottom:1px solid var(--line);padding:clamp(40px,6vw,72px) 0 clamp(30px,4vw,48px);overflow:hidden}
.phead::before{content:"";position:absolute;inset:0;background-image:
  linear-gradient(rgba(20,18,14,.045) 1px,transparent 1px),
  linear-gradient(90deg,rgba(20,18,14,.045) 1px,transparent 1px);
  background-size:76px 76px;mask-image:radial-gradient(ellipse 80% 100% at 50% 0%,#000,transparent 75%)}
.phead .wrap{position:relative}
.phead h1{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.6vw,56px);margin-top:10px;line-height:1.1}
.phead p.lede{color:var(--mut);margin-top:14px;font-size:clamp(14.5px,1.5vw,17px);max-width:680px;line-height:1.65}
.crumbs{font-size:12.5px;color:var(--faint);margin-bottom:4px}
.crumbs a:hover{color:var(--gold)}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:800;font-size:14.5px;padding:15px 30px;border-radius:99px;transition:.25s;text-align:center}
.btn-1{background:var(--ink);color:#fff}
.btn-1:hover{background:var(--gold);transform:translateY(-2px)}
.btn-2{border:1px solid var(--line2);color:var(--ink);background:#fff}
.btn-2:hover{border-color:var(--gold);color:var(--gold)}
.btn-gold{background:var(--gold);color:#fff}
.btn-gold:hover{filter:brightness(1.08);transform:translateY(-2px)}
.btn[disabled]{opacity:.55;pointer-events:none}

/* ===== VEHICLE CARD (shared: home + inventory) ===== */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px;position:relative}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 10px 30px -18px rgba(20,18,14,.22);transition:box-shadow .5s var(--ease),border-color .4s,transform .4s var(--ease);display:flex;flex-direction:column;cursor:pointer;position:relative}
.card:hover{box-shadow:0 30px 60px -24px rgba(20,18,14,.38);border-color:rgba(168,131,74,.5);transform:translateY(-4px)}
.card:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.card .ph{aspect-ratio:16/10;overflow:hidden;background:var(--bg2);position:relative}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
/* Direct child only: the slow zoom is for a card showing a single still. Scaling
   the frames of a scroll-snap strip pushes them out of alignment with their own
   snap points, so a swipe lands between two photos. */
.card:hover .ph > img{transform:scale(1.06)}

/* Swipeable photo strip on the card. Native scroll-snap does the work, so a
   phone gets real momentum scrolling for free; the arrows exist for mice. */
.card .ph .strip{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none}
.card .ph .strip::-webkit-scrollbar{display:none}
.card .ph .strip img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:center;-webkit-user-drag:none}
.card .ph .dots{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);display:flex;gap:5px;pointer-events:none;z-index:2}
.card .ph .dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.6);box-shadow:0 1px 3px rgba(20,18,14,.5);transition:.25s var(--ease)}
.card .ph .dots i.on{background:#fff;width:15px;border-radius:99px}
.card .ph .snav{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.92);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-size:15px;line-height:1;color:var(--ink);opacity:0;transition:opacity .2s,background .2s;z-index:3}
.card .ph .snav.p{left:8px}.card .ph .snav.n{right:8px}
.card:hover .ph .snav{opacity:1}
.card .ph .snav:hover{background:var(--gold);color:#fff;border-color:var(--gold)}
/* Coarse pointers have no hover, and the arrows would just cover the photo. */
@media(hover:none){.card .ph .snav{display:none}}
.card .ph .nopic{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:13px;font-weight:700}
.card .ph .pill{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:99px;padding:5px 12px;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.card .ph .shots{position:absolute;bottom:10px;right:10px;background:rgba(20,18,14,.72);color:#fff;border-radius:99px;padding:4px 11px;font-size:11px;font-weight:700}
.card .bd{padding:15px 18px 17px;text-align:left;display:flex;flex-direction:column;flex:1}
.card h3{font-size:15.5px;font-weight:800;line-height:1.3}
.card .m{color:var(--faint);font-size:12.5px;margin-top:3px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chips span{font-size:10.5px;font-weight:700;padding:5px 10px;border-radius:99px;background:var(--bg2);color:var(--mut);border:1px solid var(--line)}
.chips span.ok{background:var(--okbg);color:var(--ok);border-color:rgba(21,128,61,.18)}
.card .specs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:11px;padding-top:11px;border-top:1px solid var(--line)}
.card .specs span{display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.card .specs b{display:block;font-size:12px;font-weight:700;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .p{display:flex;align-items:baseline;justify-content:space-between;margin-top:11px}
.card .p b{font-size:19px;font-weight:900}
.card .p span{color:var(--gold);font-size:12px;font-weight:800}
.card .acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.card .acts a,.card .acts button{text-align:center;font-size:12.5px;font-weight:800;padding:11px 6px;border-radius:11px;transition:.25s;display:block;width:100%}
.card .acts .a1{background:var(--ink);color:#fff}
.card .acts .a1:hover{background:var(--gold)}
.card .acts .a2{border:1px solid var(--line2);color:var(--ink)}
.card .acts .a2:hover{border-color:var(--gold);color:var(--gold)}

/* ===== FORMS ===== */
.formwrap{background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(22px,3.4vw,38px);box-shadow:0 18px 50px -30px rgba(20,18,14,.35)}
.fsec{margin-bottom:26px}
.fsec:last-of-type{margin-bottom:0}
.fsec h3{font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:18px}
.frow{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px 16px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--mut)}
.field label .req{color:var(--gold)}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border-radius:12px;border:1px solid var(--line2);background:var(--bg);
  color:var(--ink);font-family:inherit;font-size:15px;outline:none;transition:border-color .2s,background .2s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);background:#fff}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.field textarea{min-height:110px;resize:vertical}
.field .hint{font-size:11.5px;color:var(--faint);line-height:1.5}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--bad);background:#fff6f6}
.field .err{font-size:11.5px;color:var(--bad);font-weight:700;display:none}
.field.bad .err{display:block}
.toggle{display:flex;gap:8px;flex-wrap:wrap}
.toggle button{flex:1;min-width:120px;padding:12px 10px;border-radius:12px;border:1px solid var(--line2);background:#fff;font-size:13.5px;font-weight:800;color:var(--mut);transition:.2s}
.toggle button.on{background:var(--ink);border-color:var(--ink);color:#fff}
/* Multi-select tick grid (warranty coverage products). services.html has its
   own copy of this under .services-picker — this is the shared one. */
.pickgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:9px}
.pickgrid label{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line2);border-radius:12px;padding:12px 14px;font-size:13.5px;font-weight:700;color:var(--mut);cursor:pointer;transition:.2s}
.pickgrid label:hover{border-color:var(--gold);color:var(--ink)}
.pickgrid input{width:17px;height:17px;accent-color:#a8834a;flex:none}
.pickgrid input:checked + span{color:var(--ink)}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:12.5px;color:var(--mut);line-height:1.6;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.consent input{width:19px;height:19px;flex:none;margin-top:1px;accent-color:#a8834a}
/* Sits under the consent box, deliberately outside the <label> — a link inside
   a label toggles the checkbox on the way out. */
.consent-note{margin:9px 3px 0;font-size:12px;line-height:1.7;color:var(--faint)}
.consent-note a{color:var(--mut);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:2px}
.consent-note a:hover{color:var(--gold);text-decoration-color:var(--gold2)}
.fsubmit{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.fsubmit .btn{min-width:220px}
.fnote{font-size:12px;color:var(--faint);line-height:1.6;flex:1;min-width:220px}
.fmsg{margin-top:16px;padding:14px 18px;border-radius:12px;font-size:14px;font-weight:700;display:none;line-height:1.55}
.fmsg.ok{display:block;background:var(--okbg);color:var(--ok);border:1px solid rgba(21,128,61,.25)}
.fmsg.err{display:block;background:var(--badbg);color:var(--bad);border:1px solid rgba(185,28,28,.25)}
.done{text-align:center;padding:clamp(30px,5vw,54px) 20px}
.done .tick{width:74px;height:74px;margin:0 auto 20px;border-radius:50%;background:var(--okbg);color:var(--ok);display:flex;align-items:center;justify-content:center;font-size:36px}
.done h2{font-family:var(--serif);font-weight:400;font-size:clamp(24px,3.4vw,38px)}
.done p{color:var(--mut);margin-top:12px;font-size:15.5px;line-height:1.65;max-width:520px;margin-left:auto;margin-right:auto}
.done .btn{margin-top:24px}

/* ===== TWO-COLUMN PAGE LAYOUT ===== */
.pagegrid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.95fr);gap:clamp(22px,3vw,40px);align-items:start;padding:clamp(36px,5vw,64px) 0 clamp(50px,7vw,90px)}
@media(max-width:960px){.pagegrid{grid-template-columns:1fr}}
.side{position:sticky;top:110px;display:flex;flex-direction:column;gap:16px}
@media(max-width:960px){.side{position:static}}
.sidecard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:0 12px 34px -24px rgba(20,18,14,.3)}
.sidecard h3{font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.sidecard p{color:var(--mut);font-size:13.5px;line-height:1.65}
.sidecard ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin-top:4px}
.sidecard li{display:flex;gap:10px;font-size:13.5px;color:var(--mut);line-height:1.55}
.sidecard li::before{content:"✓";color:var(--gold);font-weight:900;flex:none}
.sidecard .big{font-family:var(--serif);font-size:26px;display:block;margin-bottom:4px}
.sidecard a.line{display:block;font-weight:800;font-size:16px;margin-top:6px}
.sidecard a.line:hover{color:var(--gold)}

/* ===== FOOTER ===== */
footer.site{border-top:1px solid var(--line);background:var(--bg);padding:clamp(40px,5vw,64px) 0 30px;margin-top:0}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:32px;margin-bottom:34px}
@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fgrid{grid-template-columns:1fr}}
.fgrid h4{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:800;margin-bottom:15px}
.fgrid ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.fgrid a,.fgrid li{color:var(--mut);font-size:13.5px;line-height:1.5}
.fgrid a:hover{color:var(--gold)}
.fbrand .brand{font-size:17px;display:inline-block}
.fbrand p{color:var(--mut);font-size:13.5px;margin-top:12px;line-height:1.65;max-width:300px}
.ftag{display:inline-flex;margin-top:14px;background:var(--bg2);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:10px;padding:10px 15px;font-family:var(--serif);font-style:italic;font-size:14.5px}
.fbot{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:var(--faint);font-size:12px;line-height:1.6}
.fbot a:hover{color:var(--gold)}
/* Legal links sit with the copyright. Underlined on purpose — at --faint they
   read as grey prose otherwise, and a privacy link nobody spots is no link. */
.fbot .flegal a{color:var(--mut);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:2px}
.fbot .flegal a:hover{color:var(--gold);text-decoration-color:var(--gold2)}
.fbot .flegal i{font-style:normal;margin:0 6px;color:var(--faint)}
/* Platform credit. Same underline treatment as the legal links so it reads as
   part of the small print rather than as an advert. */
.fbot .flegal a.fpow{color:var(--faint)}
.fbot .flegal a.fpow:hover{color:var(--gold)}
.fbot span:last-child a{color:var(--faint);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:2px}

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

/* ===== phones =================================================== */
@media(max-width:700px){
  /* iOS Safari zooms the whole page the moment you focus a field whose text is
     under 16px, and it does not zoom back out. Every control the customer types
     into is therefore pinned to 16px on phones — this is the difference between
     a finance application that feels broken and one that doesn't. */
  .field input,.field select,.field textarea,
  .searchbar input,select,input[type=text],input[type=tel],
  input[type=email],input[type=number],input[type=search],textarea{font-size:16px}

  /* Thumb-sized hit areas. 44px is the smallest Apple and Google both consider
     reliably tappable; the filter chips and pagination were sitting at 36. */
  .quick,.btn,.searchbar .go,.tag-x,.vtab,.toolgrid a{min-height:44px}
  .quick,.searchbar .go{display:inline-flex;align-items:center;justify-content:center}

  /* 10.5px uppercase is legible on a desktop monitor and genuinely hard work at
     arm's length on a phone. These are the chips and spec labels on every card. */
  .chips span{font-size:11.5px;padding:6px 11px}
  .card .ph .pill{font-size:11px}
  .card .specs span{font-size:10.5px}
  .card .m{font-size:13px}
}