/* Gear page only. The .page-head, .byline and .prose rules are deliberately
   repeated from calculator.css rather than hoisted into site.css: the two
   pages use slightly different spacing and measure, and the existing pages
   are not allowed to shift. */
.page-head{padding-top:clamp(28px,5vw,60px);padding-bottom:clamp(20px,3vw,28px)}
.page-head h1{font-size:clamp(2.6rem,7.5vw,5.2rem)}
.page-head .sub{font-size:clamp(1.1rem,1.9vw,1.35rem);font-weight:600;font-stretch:108%;max-width:40ch;margin:18px 0 0;line-height:1.3}

.crumbs{font-size:.9rem;color:var(--muted);margin:0 0 18px}
.crumbs a{color:var(--muted)}
.crumbs span{color:var(--ink);font-weight:600}

/* No byline or intro prose on this page on purpose: people arriving here
   want the gear, not the story again. The disclosure is the only thing
   between the heading and the first product. */

/* Category sections. Each gets its own <ul class="gear">, so the heading is a
   real h2 rather than the old <li class="gear-cat">, which was a heading by
   appearance and a list item by markup. */
.gear-group{margin-top:clamp(28px,4vw,40px)}
.gear-group h2{
  font-weight:800;font-stretch:115%;font-size:.95rem;
  color:var(--muted);margin:0 0 6px;
}

.gear-outro{border-bottom:none;padding-bottom:clamp(48px,7vw,80px)}
.gear-outro h2{font-size:clamp(2rem,4.6vw,3rem);margin-bottom:14px}
.gear-outro .signup .btn{background:var(--ink);border-color:var(--ink);color:var(--paper)}