/* ==========================================================================
   Backdraft Suppressors — Help Center
   Tokens below mirror the live BigCommerce theme on backdraftsuppressors.com:
   Barlow 700 uppercase headings, Roboto Condensed nav/buttons, Helvetica body
   at 14/21, #4e4e4e text on white, #333 buttons and footer, 2px radii.
   ========================================================================== */

:root {
  --bg:          #ffffff;
  --bg-alt:      #f9f9f9;
  --ink:         #333333;
  --text:        #4e4e4e;
  --muted:       #6e6e6e;   /* theme uses #989898; darkened to clear WCAG AA on white */
  --line:        #e5e5e5;
  --line-soft:   #ebebeb;

  /* Cards sit over the fixed brand watermark, so they are slightly
     translucent — solid white blanked it out. */
  --panel:       rgba(255, 255, 255, .55);
  --panel-alt:   rgba(249, 249, 249, .62);

  --accent:      #8e8b5e;   /* brand olive, used sparingly */
  --accent-dark: #6f6d49;

  --radius:      2px;
  --wrap:        1230px;
  --gutter:      15px;

  --head: Barlow, Arial, Helvetica, sans-serif;
  --cond: "Roboto Condensed", Arial, Helvetica, sans-serif;
  --body: Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* `display: grid` on an element beats the hidden attribute, so make it win. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 60px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html { background: var(--bg); overflow-x: hidden; }

body {
  margin: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--body);
  font-size: 14px;
  line-height: 21px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* ---------- Brand watermark ----------
   The mark that sits behind the product shots: the Outlier oval over the
   wide OUTLIER wordmark, with the ™. Fixed, so the page moves over one
   continuous mark, and the content bands are slightly translucent to let it
   through. Solid cards punch through it exactly as the suppressors do. */
body::before {
  content: "";
  position: fixed; z-index: -1;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(880px, 72vw);
  aspect-ratio: 874 / 483;
  background: url("assets/watermark.png") center / contain no-repeat;
  /* On the product shots the mark sits at #f1f1f1 on white — black at ~5.5%.
     It is read through bands painted at 80% alpha, which cuts it to a fifth,
     so it is laid down five times heavier to land on the same tone. */
  opacity: .27;
  pointer-events: none;
}
@media (max-width: 720px) {
  body::before { width: 88vw; }
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.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;
}

.skip-link {
  position: absolute; left: 15px; top: -60px; z-index: 100;
  background: var(--ink); color: #fff;
  font-family: var(--cond); font-weight: 700; text-transform: uppercase;
  padding: 10px 18px; border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none; transition: top .15s ease;
}
.skip-link:focus { top: 0; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- Headings ---------- */
h1, h2, h3, h4 {
  font-family: var(--head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .25px;
  color: var(--ink);
  margin: 0 0 11px;
}
h1 { font-size: 42px; line-height: 63px; margin-bottom: 21px; }
h2 { font-size: 32px; line-height: 48px; }
h3 { font-size: 22px; line-height: 33px; }
h4 { font-size: 18px; line-height: 26px; }

@media (max-width: 720px) {
  h1 { font-size: 30px; line-height: 40px; }
  h2 { font-size: 24px; line-height: 34px; }
  h3 { font-size: 19px; line-height: 28px; }
}

p { margin: 0 0 21px; }
p:last-child { margin-bottom: 0; }

a { color: var(--text); }
.inline-link { color: var(--ink); font-weight: bold; text-underline-offset: 3px; }
.inline-link:hover { color: var(--accent-dark); }

/* ---------- Store chrome: header ---------- */

/* ---------- Logo (static) ---------- */

/* ---------- Store search ---------- */

/* ---------- Account / cart ---------- */

/* ---------- Store nav ---------- */

/* ---------- Breadcrumb ---------- */

/* ---------- Help Center section nav (sticky) ---------- */
.page-nav {
  position: sticky; top: 0; z-index: 40;
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s ease;
}
.page-nav.is-stuck { box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.page-nav a.active { color: var(--ink); border-bottom-color: var(--ink); }
.page-nav-inner {
  display: flex; gap: 30px; align-items: center; min-height: 48px;
  overflow-x: auto; scrollbar-width: none;
}
.page-nav-inner::-webkit-scrollbar { display: none; }
.page-nav a {
  font-family: var(--cond); font-size: 13px; font-weight: 700;
  text-transform: uppercase; color: var(--text); text-decoration: none;
  white-space: nowrap; padding: 15px 0;
  border-bottom: 2px solid transparent;
}
.page-nav a:hover { color: var(--ink); border-bottom-color: var(--ink); }
@media (max-width: 720px) { .page-nav-inner { gap: 20px; } }

/* ---------- Hero ---------- */
.hero {
  padding: 64px 0 52px;
  background: rgba(249, 249, 249, .8);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
@media (max-width: 720px) { .hero { padding: 40px 0 36px; } }

/* One definition for every small uppercase kicker on the page. They had
   drifted to 13px/1.5px, 12px/1px and 12px/1.5px; only the spacing below
   them is contextual. */
.eyebrow,
.guide-nav-title,
.model-kicker {
  font-family: var(--cond); text-transform: uppercase; font-weight: 700;
  font-size: 12px; line-height: 18px; letter-spacing: 1.5px;
  color: var(--muted);
}
/* The brand line above the warranty title sits at the same size as the
   "WHAT IS NOT COVERED" heading below it. */
.eyebrow {
  margin-bottom: 8px; color: var(--ink);
  font-size: 18px; line-height: 26px;
}
.hero h1 { margin-bottom: 10px; }
.hero-sub { color: var(--text); max-width: 620px; margin: 0 auto 30px; }

/* ---------- Search ---------- */
.search { position: relative; max-width: 660px; margin: 0 auto; }
.search-icon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; fill: none;
  stroke: var(--muted); stroke-width: 2; stroke-linecap: round;
  pointer-events: none;
}
.search input {
  width: 100%; padding: 14px 44px 14px 44px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text); font-family: var(--body); font-size: 14px;
}
.search input::placeholder { color: var(--muted); }
.search input::-webkit-search-cancel-button,
.search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search input:focus { border-color: var(--ink); outline: none; }
.search-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border: 0; border-radius: var(--radius);
  background: none; color: var(--muted);
  font-family: var(--body); font-size: 20px; line-height: 1; cursor: pointer;
}
.search-clear:hover { color: var(--ink); }
.search-status { min-height: 21px; margin: 10px 0 0; color: var(--muted); }
/* Two calls to action side by side, wrapping on small screens. */
.hero-cta {
  margin: 22px 0 0;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
.hero-cta .btn { text-align: center; }

/* ---------- Quick tiles ---------- */
.tiles {
  display: grid; gap: 15px; margin-top: 34px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.tile {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 22px 20px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); text-decoration: none; color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.tile {
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tile:hover {
  border-color: var(--ink);
  box-shadow: 0 4px 14px rgba(0,0,0,.09);
  transform: translateY(-3px);
}
.tile-icon { display: block; margin-bottom: 12px; }
.tile-icon svg {
  width: 24px; height: 24px; fill: none;
  stroke: var(--ink); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.tile-title {
  display: block; font-family: var(--head); font-weight: 700;
  font-size: 18px; line-height: 26px; text-transform: uppercase;
  letter-spacing: .25px; color: var(--ink);
  margin-bottom: 6px;
}
/* Pinned to the bottom, so titles of different lengths still leave their
   subtitles on one line across the row. */
.tile-sub { display: block; margin-top: auto; color: var(--muted); }

/* ---------- Sections ---------- */
.section { padding: 60px 0; }
.section-orders { background: rgba(255, 255, 255, .8); }
.section-guide { background: rgba(249, 249, 249, .8); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-faq { background: rgba(255, 255, 255, .8); }
.section-warranty { background: rgba(249, 249, 249, .8); border-top: 1px solid var(--line); }
@media (max-width: 720px) { .section { padding: 40px 0; } }

.section-head { max-width: 780px; margin-bottom: 32px; }
.section-lede { color: var(--text); }

/* ---------- Order help cards ---------- */
.order-grid {
  display: grid; gap: 15px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.order-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px;
}
.order-card.featured { grid-column: 1 / -1; border-color: var(--ink); }
.order-card.featured p, .order-card.featured .callout { max-width: 900px; }
.order-card h3 { color: var(--ink); }
.order-card strong { color: var(--ink); }

.btn-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

.callout {
  background: var(--panel-alt); border-left: 3px solid var(--ink);
  padding: 16px 20px; margin: 21px 0;
}
.callout-title {
  font-family: var(--head); font-weight: 700; text-transform: uppercase;
  letter-spacing: .25px; font-size: 18px; line-height: 26px;
  color: var(--ink); margin-bottom: 6px;
}

.tick-list { list-style: none; padding: 0; margin: 0 0 21px; }
.tick-list li { position: relative; padding-left: 18px; margin-bottom: 8px; }
.tick-list li::before {
  content: ""; position: absolute; left: 2px; top: 9px;
  width: 5px; height: 5px; background: var(--ink);
}
.tick-list.cols {
  display: grid; gap: 0 24px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.fine { color: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; padding: 14px 32px;
  border-radius: var(--radius); text-decoration: none;
  font-family: var(--cond); font-size: 15px; font-weight: 700;
  text-transform: uppercase; line-height: 1;
  border: 1px solid var(--ink);
  transition: background .15s ease, color .15s ease;
}
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #000; border-color: #000; }
.btn-lg { padding: 16px 40px; font-size: 16px; }

/* A button that toggles something carries a chevron that turns with it. */
.btn:has(.btn-chev) { display: inline-flex; align-items: center; gap: 10px; }
.btn-chev {
  width: 16px; height: 16px; flex: 0 0 16px;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s ease;
}
[aria-expanded="true"] .btn-chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .btn-chev { transition: none; } }

/* ---------- Guide ---------- */
.guide-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; align-items: start; }
@media (max-width: 960px) { .guide-layout { grid-template-columns: minmax(0, 1fr); gap: 26px; } }

.guide-nav {
  position: sticky; top: 64px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px;
}
@media (max-width: 960px) { .guide-nav { position: static; } }
.guide-nav-title { margin-bottom: 12px; }
.guide-nav ul { margin: 0; padding: 0; list-style: none; }
.guide-nav li { margin-bottom: 2px; }
.guide-nav a {
  display: block; padding: 6px 10px; border-radius: var(--radius);
  color: var(--text); text-decoration: none; border-left: 2px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.guide-nav a:hover { background: var(--bg-alt); color: var(--ink); }
.guide-nav a.active {
  background: var(--bg-alt); color: var(--ink);
  font-weight: bold; border-left-color: var(--ink);
}

.guide-body {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 36px 30px;
}
@media (max-width: 720px) { .guide-body { padding: 18px 20px 22px; } }

.guide-step {
  padding: 30px 0;
  border-top: 1px solid var(--line-soft);
  scroll-margin-top: 70px;
}
/* The source document writes a sentence per paragraph, so full paragraph
   spacing scatters them. Tighter here, normal around the blocks between. */
.guide-step p { margin-bottom: 12px; }
.guide-step p, .guide-step ul, .guide-step .tip { max-width: 820px; }
.guide-step p + .spec-row,
.guide-step p + .tip,
.guide-step p + .warn,
.guide-step .spec-row + p,
.guide-step .tip + p,
.guide-step .warn + p,
.guide-step p + .flow,
.guide-step .flow + p { margin-top: 20px; }
.guide-step .tick-list,
.guide-step .two-up,
.guide-step .data-table,
.guide-step .table-scroll { margin-block: 20px; }
.guide-step:first-of-type { border-top: 0; padding-top: 4px; }
.guide-step h3 { color: var(--ink); }
.guide-step strong { color: var(--ink); }
.guide-step h4 { margin-top: 26px; color: var(--ink); }

.spec-row {
  font-family: var(--head); font-weight: 700; font-size: 22px;
  letter-spacing: .25px; color: var(--ink);
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 20px; display: inline-block;
}
.spec-row span { color: var(--line); margin: 0 6px; }
/* "and" is a word from the document, not a separator, so it is set exactly
   like the values either side of it. */
.spec-row .spec-word { color: inherit; }

.flow {
  font-family: var(--cond); text-transform: uppercase; font-weight: 700;
  letter-spacing: .5px; font-size: 15px; color: var(--ink);
}
.flow span { color: var(--muted); margin: 0 6px; }

.tip { background: var(--panel-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; }
/* Safety notes: the brand is monochrome, so these read as emphasis with a
   rule rather than red text. Red stays reserved for the editorial flags. */
/* A short standalone statement the source document sets apart. Both the
   "is" and the "is not" versions get the same rule, so two cards side by
   side read as a pair. */
.warn, .ok {
  color: var(--ink); font-weight: bold;
  border-left: 3px solid var(--ink);
  padding: 2px 0 2px 14px;
}

.two-up { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin: 21px 0; }
.model-card { background: var(--panel-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.model-kicker { margin-bottom: 4px; }
.model-card h4 { margin-bottom: 10px; }

/* ---------- Tables ---------- */
.table-scroll { overflow-x: auto; }
@media (max-width: 720px) {
  /* A ratings table is wider than a phone; let it scroll on its own. */
  .guide-step .data-table,
  .faq-a .data-table { display: block; overflow-x: auto; }
}
.data-table { width: 100%; border-collapse: collapse; margin: 21px 0; }
.data-table th, .data-table td {
  text-align: left; padding: 11px 15px;
  border-bottom: 1px solid var(--line-soft);
}
.data-table thead th {
  font-family: var(--cond); text-transform: uppercase; font-weight: 700;
  letter-spacing: .5px; color: var(--ink);
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
}
.data-table tbody th { font-weight: bold; color: var(--ink); }
.data-table.compare tbody th { width: 30%; }

.disclaimer {
  margin-top: 26px; padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
}

/* ---------- FAQ ---------- */
.faq-tools { margin-top: 12px; color: var(--muted); }
.link-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--ink); font: inherit; font-weight: bold;
  text-decoration: underline; text-underline-offset: 3px;
}

.faq-cat {
  margin-bottom: 20px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 24px 8px;
}
.faq-cat:last-of-type { margin-bottom: 0; }
.faq-cat-title {
  font-size: 22px; color: var(--ink);
  padding-bottom: 10px; margin-bottom: 0;
  border-bottom: 2px solid var(--ink);
  scroll-margin-top: 80px;
}
@media (max-width: 720px) { .faq-cat { padding: 16px 18px 6px; } }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item > summary {
  cursor: pointer; list-style: none;
  padding: 16px 44px 16px 0; position: relative;
  font-family: var(--head); font-weight: 600;
  font-size: 16px; line-height: 24px; color: var(--ink);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::before,
.faq-item > summary::after {
  content: ""; position: absolute; top: 50%; background: var(--muted);
  transition: transform .25s ease, background .15s ease;
}
.faq-item > summary::after {   /* horizontal bar */
  right: 10px; width: 13px; height: 2px; transform: translateY(-50%);
}
.faq-item > summary::before {  /* vertical bar, collapses to make a minus */
  right: 15.5px; width: 2px; height: 13px;
  transform: translateY(-50%) scaleY(1);
}
.faq-item[open] > summary::before { transform: translateY(-50%) scaleY(0); }
.faq-item > summary:hover::before,
.faq-item > summary:hover::after { background: var(--ink); }
.faq-item > summary:hover { color: var(--accent-dark); }
.faq-item[open] > summary { color: var(--ink); }
/* The panel spans the container; the answer text keeps a reading width so
   lines do not stretch across a wide screen. */
.faq-a { padding: 0 44px 20px 0; max-width: 820px; }
.faq-a p { margin-bottom: 14px; }
.faq-a .data-table { margin-top: 0; }

/* ---------- Warranty ---------- */
.warranty-panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px;
}
@media (max-width: 720px) { .warranty-panel { padding: 24px; } }
.warranty-panel h2 { color: var(--ink); }
.warranty-panel .lead { font-size: 16px; line-height: 26px; }
.warranty-panel p, .warranty-panel h3 { max-width: 820px; }
.warranty-panel h3 { margin-top: 30px; font-size: 18px; }
.warranty-panel .btn { margin-top: 10px; }

/* ---------- Contact (deliberately quiet) ---------- */
.section-contact {
  background: rgba(255, 255, 255, .8); border-top: 1px solid var(--line);
  padding: 44px 0;
}
.contact-title { font-family: var(--cond); font-size: 16px; letter-spacing: 1px; color: var(--muted); }
.contact-lede { color: var(--muted); max-width: 620px; }
.contact-list {
  list-style: none; padding: 0; margin: 18px 0 0;
  display: grid; gap: 7px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.contact-list li { color: var(--muted); }
.contact-list a { color: var(--text); text-underline-offset: 3px; }
.contact-list a:hover { color: var(--ink); }
.contact-fine { margin-top: 18px; color: var(--muted); }

/* ---------- Newsletter ---------- */


/* ---------- Store footer ---------- */

/* ---------- Back to top ---------- */
.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 40;
  width: 42px; height: 42px; border-radius: var(--radius);
  background: var(--ink); color: #fff;
  border: 0; cursor: pointer; font-size: 16px; line-height: 1;
}
.to-top:hover { background: #000; }

/* ==========================================================================
   Motion
   Entrances run on load above the fold and on scroll below it. Everything
   here is additive: with JS off, or with reduced motion on, nothing is
   hidden and nothing moves.
   ========================================================================== */

/* ---------- Hero entrance ---------- */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.js .hero .eyebrow,
.js .hero h1,
.js .hero-sub,
.js .hero .search,
.js .hero .search-status,
.js .hero .hero-cta,
.js .hero .tile {
  animation: rise-in .55s cubic-bezier(.2,.7,.3,1) both;
}
.js .hero h1        { animation-delay: .06s; }
.js .hero-sub       { animation-delay: .12s; }
.js .hero .search   { animation-delay: .18s; }
.js .hero .hero-cta { animation-delay: .22s; }
.js .hero .tile     { animation-delay: calc(.26s + var(--i, 0) * .07s); }

/* ---------- Scroll reveal ---------- */
.js .reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);
  transition-delay: calc(var(--i, 0) * .07s);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Accordion ---------- */
.faq-item.is-animating .faq-a {
  overflow: hidden;
  transition: height .28s cubic-bezier(.3,.7,.3,1);
}
.faq-item[open] > summary { transition: color .15s ease; }

/* ---------- Back to top ---------- */
.to-top {
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, background .15s ease;
}
.to-top.is-shown { opacity: 1; transform: none; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  .js .hero h1, .js .hero-sub,
  .js .hero .search, .js .hero .search-status,
  .js .hero .hero-cta, .js .hero .tile { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .tile:hover { transform: none; }
  .faq-item.is-animating .faq-a { transition: none; }
  .to-top { transition: none; }
}

/* ---------- FAQ category jump ---------- */
.cat-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.cat-jump a {
  font-family: var(--cond); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--ink); text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 9px 16px; background: var(--panel);
}
.cat-jump a:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

/* A linked answer is marked so it is obvious where you landed. */
.faq-item:target > summary,
.order-card:target h3 { color: var(--accent-dark); }

/* ---------- Searching state ---------- */
body.is-searching .guide-nav { opacity: .45; }

/* ---------- Guide: hidden until asked for ----------
   It is long, and most visitors come for one answer, so it stays out of the
   page until someone asks for it. With JS off the collapsed class is never
   applied and the whole guide is simply there. */
.js .guide-collapse.is-collapsed { display: none; }

.guide-more { display: none; margin: 22px 0 0; }
.js .guide-more { display: block; }

/* ---------- Search results ----------
   The answer itself, right under the search box, so nobody has to scroll
   the page to find what they just searched for. */
.results {
  max-width: 820px; margin: 18px auto 0; text-align: left;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 6px 24px;
}
.result { border-bottom: 1px solid var(--line-soft); }
.result:last-of-type { border-bottom: 0; }
.result > summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 15px 40px 15px 0;
  font-family: var(--head); font-weight: 600; font-size: 16px; line-height: 24px;
  color: var(--ink);
}
.result > summary::-webkit-details-marker { display: none; }
.result > summary::before,
.result > summary::after {
  content: ""; position: absolute; top: 50%; background: var(--muted);
  transition: transform .25s ease;
}
.result > summary::after  { right: 6px; width: 13px; height: 2px; transform: translateY(-50%); }
.result > summary::before { right: 11.5px; width: 2px; height: 13px; transform: translateY(-50%) scaleY(1); }
.result[open] > summary::before { transform: translateY(-50%) scaleY(0); }
.result > summary:hover { color: var(--accent-dark); }
.result-body { padding: 0 0 18px; }
.result-body p { margin-bottom: 12px; }
.result-more { margin-top: 14px; font-size: 13px; }

.result-heading {
  margin: 18px 0 8px;
  font-family: var(--cond); text-transform: uppercase; font-weight: 700;
  font-size: 12px; letter-spacing: 1.5px; color: var(--muted);
}
.result-link { display: flex; gap: 12px; align-items: baseline; margin: 0 0 8px; }
.result-link a { color: var(--ink); }
.result-kind {
  flex: 0 0 auto;
  font-family: var(--cond); text-transform: uppercase; font-weight: 700;
  font-size: 11px; letter-spacing: .5px; color: var(--muted);
}
.result-none { padding: 16px 0; color: var(--text); }

@media (max-width: 720px) { .results { padding: 4px 18px; } }