/* =======================================================================
   Club Booster V2Pro guide - layout & components.
   Adapted from the HydroDuster tester guide so the two Alphard guides read
   as one family. Phone-first: most readers arrive by QR code or a support
   email link, standing next to the cart. Desktop gets a persistent numbered
   sidebar rather than a wider column of the same prose.

   Brand tokens live in brand.css; fonts in fonts.css.

   CONTRAST DISCIPLINE (measured against the sRGB relative-luminance formula,
   not eyeballed):
     --red      #DA291C on #FFFFFF = 4.87:1   passes AA body text, only just
     --red      #DA291C on #F4F4F4 = 4.42:1   FAILS AA - never red text on wash
     --red-deep #A81F15 on #FFFFFF = 7.31:1
     --red-deep #A81F15 on #F4F4F4 = 6.65:1
     #FFFFFF    on --red           = 4.87:1   fine for the pill / badge fills
   So: --red is a FILL colour (pills, badges, bars, rules); --red-deep is the
   TEXT colour whenever red type sits on white or on the wash. Because half
   the red type on this page sits inside a wash-filled callout, links use
   --red-deep everywhere rather than switching per surface.
   ======================================================================= */

:root {
  --gutter: clamp(1.15rem, 4vw, 3rem);
  --shell-max: 88rem;
  --measure: 68ch;

  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4rem;

  --radius: 10px;
  --nav-h: 3.25rem;           /* mobile sticky bar height */
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}
@media (min-width: 1024px) { html { scroll-padding-top: 1.5rem; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}
@media (min-width: 768px) { body { font-size: 1.0625rem; } }

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

/* --red-deep, not --red: this page puts links inside wash-filled callouts and
   table cells, where --red only reaches 4.42:1. */
a { color: var(--red-deep); text-underline-offset: .18em; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; border-radius: 3px; }
/* Sections and <main> take focus programmatically after an in-page jump -
   move the focus without drawing a ring around a whole section. */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: .75rem 1.25rem; text-decoration: none;
}
.skip:focus { left: 0; }

/* -- Reading progress ------------------------------------------------- */
.progress {
  position: fixed; inset: 0 auto auto 0; height: 3px; width: 0;
  background: var(--red); z-index: 60;
}

/* -- Masthead --------------------------------------------------------- */
/* Type-led and full-bleed. No Alphard logo file exists in this project, so
   the wordmark is set in the display face rather than faked as an image. */
.masthead { background: var(--ink); color: #fff; padding: var(--s6) 0 var(--s7); }
.masthead__inner {
  max-width: var(--shell-max); margin-inline: auto; padding-inline: var(--gutter);
  display: flex; flex-direction: column;
}
.masthead__brand {
  font-family: var(--display); font-weight: 600;
  font-size: 1rem; letter-spacing: .28em; text-transform: uppercase;
  color: #fff; margin: 0;
}
.eyebrow {
  font-family: var(--display); font-weight: 500;
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: #A0A0A0; margin: var(--s5) 0 var(--s2);          /* #A0A0A0 on ink = 7.22:1 */
}
/* Brand red on near-black is only 4.2:1; this tint clears 6:1. */
.eyebrow b { color: #FF6A5C; font-weight: 600; }          /* 6.72:1 on ink */
.masthead h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.25rem, 9vw, 4rem); line-height: .95;
  text-transform: uppercase; margin: 0;
}
.masthead__sub { color: #C4C4C4; max-width: 46ch; margin: var(--s4) 0 0; }  /* 10.83:1 */

/* Headline specs, carried over from the old hero chip row. Facts, not
   decoration - every one of them is repeated in Specs & Manuals. */
.facts { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s5) 0 0; padding: 0; }
.facts li {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0;
  font-family: var(--display); font-weight: 500;
  font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22); border-radius: 999px;
  padding: .3rem .7rem;
}
.facts li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--red); flex: none; }

/* -- Shell: sidebar + content ----------------------------------------- */
.shell {
  max-width: var(--shell-max); margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (min-width: 1024px) {
  .shell {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4.5rem);
    align-items: start;
  }
}

/* -- Navigation -------------------------------------------------------- */
/* This replaces a horizontal scrolling strip in which Troubleshooting was the
   11th of 14 items and was clipped off-screen on every phone. Fifteen numbered
   rows, all visible at once on desktop, one disclosure on mobile. */
.navwrap { position: sticky; top: 0; z-index: 50; }
.nav { z-index: 50; }
@media (max-width: 1023px) {
  .nav {
    margin-inline: calc(var(--gutter) * -1);
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--rule);
  }
  .nav__toggle {
    display: flex; align-items: center; gap: var(--s2);
    width: 100%; min-height: var(--nav-h);
    padding: 0 var(--gutter);
    background: none; border: 0; cursor: pointer;
    font-family: var(--display); font-weight: 600;
    font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink); text-align: left;
  }
  .nav__toggle::after {
    content: ''; margin-left: auto;
    width: .5rem; height: .5rem; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
    transform: rotate(45deg) translateY(-25%); transition: transform .2s ease;
  }
  .nav[open] .nav__toggle::after { transform: rotate(-135deg) translateY(-25%); }
  .nav__here { color: var(--red-deep); font-weight: 500; }
  .nav__list {
    max-height: min(60vh, 26rem); overflow-y: auto;
    padding: 0 var(--gutter) var(--s4);
    border-top: 1px solid var(--rule);
  }
}
@media (min-width: 1024px) {
  .navwrap { top: var(--s6); }
  .nav { padding-block: var(--s7) var(--s6); }
  .nav__toggle { display: none; }
  /* Must scroll: fifteen entries do not fit a 660px-tall laptop viewport, and
     without this the last few sections are unreachable at any scroll position. */
  .nav__list { max-height: calc(100vh - 6rem); overflow-y: auto; }
}

.nav ul { list-style: none; margin: 0; padding: 0; }
.nav li { margin: 0; }
.nav a {
  display: block; padding: .6rem .7rem; min-height: 44px;
  font-size: .9rem; line-height: 1.35;
  color: var(--muted); text-decoration: none;              /* #5A5A5A = 6.9:1 */
  border-left: 3px solid transparent; border-radius: 0 4px 4px 0;
}
.nav a:hover { color: var(--ink); background: var(--wash); }
.nav a[aria-current="true"] {
  color: var(--ink); font-weight: 600;
  border-left-color: var(--red); background: var(--wash);
}
.nav__num {
  font-family: var(--display); font-size: .72rem; color: var(--muted);
  margin-right: .5rem;
}
/* On the wash background --red is 4.42:1 and --red-deep is 6.65:1. Small
   11px numerals get the darker one. */
.nav a[aria-current="true"] .nav__num { color: var(--red-deep); }

/* -- Sections ---------------------------------------------------------- */
.content { padding-bottom: var(--s8); min-width: 0; }
section { padding-block: var(--s7) var(--s3); scroll-margin-top: var(--s5); }
section + section { border-top: 1px solid var(--rule); }

/* Section headings are real h2s - the pill is only their skin, so screen
   readers, reader modes and the sidebar all see a real document outline.
   NOTE: .pill here is the SECTION-HEADER treatment. The video filter chips
   are .vchip and must never be given .pill - see the video library block. */
h2.pill { font-size: 1.05rem; padding: .35rem .75rem; margin: 0 0 var(--s5); }

h3 {
  font-family: var(--display); font-weight: 600;
  font-size: 1.02rem; letter-spacing: .02em; text-transform: uppercase;
  margin: var(--s6) 0 var(--s3);
}
h4 {
  font-family: var(--display); font-weight: 600;
  font-size: .9rem; letter-spacing: .08em; text-transform: uppercase;
  margin: var(--s5) 0 var(--s2);
}
p, ul, ol { margin: 0 0 var(--s4); }
section > p, section > ul, section > ol, .measure { max-width: var(--measure); }
li { margin-bottom: var(--s2); }
ul, ol { padding-left: 1.3rem; }
.lead { max-width: var(--measure); color: var(--muted); }
.quiet { font-size: .88rem; color: var(--muted); }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em; background: var(--wash); border: 1px solid var(--rule);
  padding: .1em .35em; border-radius: 3px; overflow-wrap: anywhere;
}

/* Cross-references between sections. These are real <a href="#..."> anchors -
   they were converted from spans so that keyboard users can reach them - and
   the padding gives them a comfortable tap target without disturbing the line
   box (the negative margin cancels the vertical growth). */
.anchor-link {
  color: var(--red-deep); font-weight: 600; text-decoration: underline;
  display: inline-block; padding: .5rem .1rem; margin: -.5rem 0;
}

/* -- Quick answers ----------------------------------------------------- */
/* The four questions support most often ask first. Every line is lifted from
   Troubleshooting or the FAQ below - nothing new is asserted here. */
.quick { display: grid; gap: var(--s3); margin-bottom: var(--s5); }
@media (min-width: 640px)  { .quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Four across only once each card can still hold a two-line answer. */
@media (min-width: 1240px) { .quick { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.quick__card {
  border: 1px solid var(--rule); border-top: 4px solid var(--red);
  padding: var(--s4); border-radius: var(--radius);
}
.quick__q {
  font-family: var(--display); font-weight: 600; font-size: .95rem;
  text-transform: uppercase; letter-spacing: .02em; margin: 0 0 var(--s2);
}
.quick__a { margin: 0; font-size: .95rem; }
.quick__a:last-child { margin-bottom: 0; }

/* -- Grids, cards, parts ----------------------------------------------- */
.grid { display: grid; gap: var(--s4); }
/* Two, not "as many as fit" - auto-fit packs the What's in the Box cards four
   across on a wide viewport and squeezes their sentences to one word a line. */
.grid--2 { grid-template-columns: 1fr; }
@media (min-width: 760px) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

.card {
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: var(--s4); background: #fff;
}
.card > :last-child { margin-bottom: 0; }
.card h3 { margin-top: 0; }

/* A media card: something visual on top, a name and a note underneath.
   Used for the bracket-installation videos and the video library. */
.part { border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: #fff; }
.part__body { padding: var(--s3); }
.part__name {
  font-family: var(--display); font-weight: 600; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .03em; line-height: 1.25;
  margin: 0 0 var(--s1);
}
.part__use { margin: 0; font-size: .82rem; color: var(--muted); line-height: 1.4; }
.part > .yt { border-radius: 0; }

.tag {
  display: inline-block; margin-top: var(--s2);
  font-family: var(--display); font-weight: 600; font-size: .62rem;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--red-deep); border: 1px solid var(--red); border-radius: 3px;
  padding: .15rem .4rem;
}
/* Same chip on a dark surface - inside an ink .btn. */
.tag--light { color: #fff; border-color: rgba(255,255,255,.55); margin-top: 0; margin-left: .5rem; }

/* -- Numbered steps ---------------------------------------------------- */
ol.steps { counter-reset: s; list-style: none; padding: 0; margin: 0 0 var(--s4); }
ol.steps > li {
  counter-increment: s; position: relative;
  padding-left: 2.4rem; margin-bottom: var(--s3);
}
ol.steps > li::before {
  content: counter(s); position: absolute; left: 0; top: -.1rem;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--ink); color: #fff;
  font-family: var(--display); font-weight: 600; font-size: .85rem;
  display: grid; place-items: center;
}

/* Steps beside the diagram they describe. Single column until the step text
   can hold a full line - below that the picture and the words fight. */
.split { display: grid; gap: var(--s5); align-items: start; margin-bottom: var(--s4); }
@media (min-width: 760px) { .split { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.split > :last-child { margin-bottom: 0; }

/* -- Callouts ---------------------------------------------------------- */
/* Three tiers, because the source guide ran two and the HydroDuster system
   runs two different ones:
     .warn        ink bar, wash fill  - damage, warranty and safety
     .note        red bar, wash fill  - important, but nothing breaks
     .note--quiet rule bar, no fill   - tips and context
   Keeping the quiet tier genuinely quiet is the point: if every box is red,
   the warranty-voiding one stops being read. */
.note, .warn {
  border-left: 4px solid var(--red); background: var(--wash);
  padding: var(--s4); margin: 0 0 var(--s4); border-radius: 0 var(--radius) var(--radius) 0;
  max-width: var(--measure);
}
.warn { border-left-color: var(--ink); border-left-width: 6px; }
.note--quiet { background: none; border-left-color: var(--rule); color: var(--muted); }
.note > :last-child, .warn > :last-child { margin-bottom: 0; }

/* The label chip that opens a callout - IMPORTANT, WARNING, TIP. Text labels,
   never icons or emoji: this guide is printed and read aloud as often as it
   is looked at. White on --red is 4.87:1. */
.lbl {
  display: inline-block; margin-right: var(--s2);
  font-family: var(--display); font-weight: 600; font-size: .66rem;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--red); color: #fff;
  border-radius: 3px; padding: .15rem .45rem;
  vertical-align: .08em;
}
.note--quiet .lbl { background: var(--muted); }

.big {
  font-family: var(--display); font-weight: 600;
  font-size: 1.1rem; line-height: 1.3; text-transform: uppercase; letter-spacing: .02em;
}

/* -- Do / Don't -------------------------------------------------------- */
.rules { list-style: none; padding: 0; margin: 0 0 var(--s4); }
.rules li {
  display: grid; grid-template-columns: 1.6rem 1fr; gap: var(--s3);
  align-items: start; padding-block: var(--s2);
  border-bottom: 1px solid var(--rule);
}
.rules svg { width: 1.35rem; height: 1.35rem; margin-top: .15rem; }
/* Icon colours are graphics, not text: the 3:1 non-text threshold applies.
   #1B8F3F is 4.16:1 on white and --red is 4.87:1, so both clear it easily. */

/* -- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .6rem 1.1rem;
  background: var(--ink); color: #fff; text-decoration: none;
  font-family: var(--display); font-weight: 500;
  font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  border-radius: 4px; transition: background .18s ease;
}
.btn:hover, .btn:focus-visible { background: var(--red); }
.btn--ghost { background: none; color: var(--muted); border: 1px solid var(--rule); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--wash); color: var(--ink); }
.btnrow { display: flex; flex-wrap: wrap; gap: var(--s3); margin: 0 0 var(--s4); }

/* -- Figures ----------------------------------------------------------- */
figure { margin: 0 0 var(--s4); }
.fig img { width: 100%; border-radius: var(--radius); }
.fig figcaption {
  margin-top: var(--s2); max-width: var(--measure);
  font-size: .85rem; color: var(--muted); line-height: 1.45;
}
/* The one product photograph on the page. It is shot on white, so it sits on
   the white content surface without the radial glow the old dark hero needed
   to stop a black product disappearing into a black panel. */
.fig--hero img { border: 1px solid var(--rule); }

/* Missing-image fallback, written by cbImgFallback(). Keeps the alt text
   visible rather than leaving a broken-image glyph. */
.imgph {
  width: 100%; min-height: 11rem; border: 1px dashed var(--rule); border-radius: var(--radius);
  background: var(--wash); color: var(--muted); font-size: .82rem;
  display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--s4);
}

/* -- Tables ------------------------------------------------------------ */
.tablewrap { overflow-x: auto; overscroll-behavior-x: contain; margin: 0 0 var(--s4); }
table.data { border-collapse: collapse; width: 100%; font-size: .92rem; }
table.data th, table.data td {
  text-align: left; padding: var(--s3) var(--s3) var(--s3) 0;
  border-bottom: 1px solid var(--rule); vertical-align: top;
}
table.data th {
  font-family: var(--display); font-weight: 600; font-size: .74rem;
  letter-spacing: .08em; text-transform: uppercase; border-bottom: 2px solid var(--ink);
}
/* The answer column of the compatibility table - the one thing that section
   exists to give. */
.brk { font-weight: 700; color: var(--ink); }
.noresult td { text-align: center; color: var(--muted); font-style: italic; }

/* Desktop: hold the compatibility table's three columns at a readable width
   and let .tablewrap scroll. Phones override this to min-width:0 below, so
   the table reflows instead - at 390px the "Bracket to select" column had
   only a few pixels of it on screen. Keep the two rules in sync. */
#cbCompatTable { min-width: 34rem; }

/* -- Compatibility finder ---------------------------------------------- */
.search {
  width: 100%; max-width: 26rem; margin: 0 0 var(--s3);
  padding: .7rem .85rem; font-size: 1rem;      /* 16px minimum, or iOS zooms the page on focus */
  font-family: var(--sans); color: var(--ink);
  border: 1px solid var(--muted); border-radius: 6px; background: #fff;
}
.search:focus { outline: 3px solid var(--red); outline-offset: 1px; border-color: var(--red); }
.count { font-size: .82rem; color: var(--muted); margin: 0 0 var(--s4); }

/* -- YouTube click-to-load facade -------------------------------------- */
/* No YouTube request is made until the reader asks for one: the thumbnail is
   a plain <img> and the iframe is built on click. */
.yt {
  position: relative; display: block; width: 100%;
  aspect-ratio: 16 / 9; overflow: hidden;
  background: #000; border: 0; padding: 0; margin: 0;
  border-radius: var(--radius); cursor: pointer;
}
/* pointer-events:none keeps the thumbnail from swallowing the button's own
   click, and the lightbox skips .yt-thumb for the same reason. */
.yt-thumb {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; pointer-events: none; display: block;
}
.yt::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.18); transition: background .15s ease; z-index: 1; }
.yt:hover::before { background: rgba(0,0,0,.05); }
.yt-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 3.5rem; height: 2.5rem; border-radius: 8px; z-index: 2;
  background: var(--red); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
}
.yt-play::after {
  content: ''; width: 0; height: 0; margin-left: 3px;
  border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 15px solid #fff;
}
.yt:hover .yt-play { background: var(--red-deep); }
.yt.loaded::before, .yt.loaded .yt-play { display: none; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* A white ring, because the focus ring would otherwise be red on red. */
.yt:focus-visible { outline: 3px solid #fff; outline-offset: -3px; box-shadow: 0 0 0 5px rgba(0,0,0,.55); }
.yt-solo { max-width: 34rem; margin: 0 0 var(--s4); }

/* -- Video library ----------------------------------------------------- */
/* The filter chips are .vchip and MUST NOT be given .pill. In the old build
   .pill was the nav class and the scrollspy stripped the chips' active state
   on every scroll. In this build .pill is the section-header skin, so the
   collision would look different but break just as badly. Keep them apart. */
.vidfilter { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s3); }
.vchip {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 .9rem; border-radius: 999px; cursor: pointer;
  font-family: var(--display); font-weight: 500;
  font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
  background: var(--wash); color: var(--ink);
  border: 1px solid var(--rule);
}
.vchip:hover { border-color: var(--muted); }
.vchip.on { background: var(--red); color: #fff; border-color: var(--red); }
.vchip.on:focus-visible { outline-color: #fff; box-shadow: 0 0 0 5px rgba(0,0,0,.55); }

.vidgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
@media (min-width: 700px)  { .vidgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .vidgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 359px)  { .vidgrid { grid-template-columns: 1fr; } }
.vidcard[hidden] { display: none; }
.vidcard .anchor-link { font-size: .78rem; }

/* -- App / firmware ---------------------------------------------------- */
.appwrap { display: flex; flex-wrap: wrap; gap: var(--s5); align-items: flex-start; margin-bottom: var(--s4); }
.qr { display: flex; flex-direction: column; align-items: center; gap: var(--s2); }
.qrbox {
  width: 8rem; height: 8rem; padding: .4rem; background: #fff;
  border: 1px solid var(--rule); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
}
.qrbox img { width: 100%; height: 100%; object-fit: contain; }
.qr span { font-size: .82rem; font-weight: 600; }
.appuses { flex: 1; min-width: 15rem; margin: 0; }
@media (max-width: 480px) { .qrbox { width: 6.75rem; height: 6.75rem; } }

/* -- Accordion --------------------------------------------------------- */
/* Used once, for the long list of carts no bracket fits. Everything else on
   this page stays open so that a browser find-in-page can reach it. */
details.acc { border: 1px solid var(--rule); border-radius: var(--radius); margin: 0 0 var(--s4); background: #fff; }
details.acc > summary {
  list-style: none; cursor: pointer; min-height: 44px;
  padding: var(--s3) var(--s4); gap: var(--s4);
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--display); font-weight: 600; font-size: .88rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink);
}
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary::after {
  content: ''; flex: none; width: .5rem; height: .5rem; margin-top: -.25rem;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .2s ease;
}
details.acc[open] > summary::after { transform: rotate(-135deg); margin-top: .15rem; }
details.acc > summary:hover { color: var(--red-deep); }
.acc-body { padding: 0 var(--s4) var(--s4); font-size: .92rem; color: var(--muted); }
.acc-body > :last-child { margin-bottom: 0; }

/* -- FAQ --------------------------------------------------------------- */
/* Questions are plain headings, not accordions: there are only five and an
   open answer is one a find-in-page can reach. */
.faq h3 {
  font-family: var(--sans); font-weight: 700; text-transform: none;
  font-size: 1rem; letter-spacing: 0; line-height: 1.4;
  margin: var(--s5) 0 var(--s2); max-width: var(--measure);
}
.faq h3:first-of-type { margin-top: 0; }
.faq p { max-width: var(--measure); font-size: .95rem; }
.faq .q { color: var(--red-deep); font-family: var(--display); margin-right: .5rem; }

/* -- Back to top ------------------------------------------------------- */
.totop {
  position: fixed; right: var(--s4); bottom: var(--s4); z-index: 40;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--ink); color: #fff; border: 0; cursor: pointer;
  display: grid; place-items: center;
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease;
}
.totop.is-on { opacity: 1; visibility: visible; }
.totop svg { width: 1.1rem; height: 1.1rem; }
@media (min-width: 1024px) { .totop { display: none; } }

/* -- Footer ------------------------------------------------------------ */
.site-footer { background: var(--ink); color: #C0C0C0; padding: var(--s7) 0; font-size: .9rem; }
.site-footer__inner { max-width: var(--shell-max); margin-inline: auto; padding-inline: var(--gutter); }
.site-footer h2 {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.25rem, 3vw, 1.6rem); line-height: 1.1; color: #fff; margin: 0 0 var(--s3);
}
.site-footer a { color: #fff; }
.site-footer .org { color: #949494; font-size: .8rem; margin: var(--s5) 0 0; padding-top: var(--s4); border-top: 1px solid #333; }

/* -- Phone overrides --------------------------------------------------- */
@media (max-width: 640px) {
  /* Let the compatibility table reflow rather than scroll sideways. Must stay
     after the #cbCompatTable min-width rule above - same specificity, source
     order decides. */
  #cbCompatTable { min-width: 0; }
  #cbCompatTable th, #cbCompatTable td { padding: var(--s2) var(--s2) var(--s2) 0; font-size: .82rem; }
  /* Troubleshooting: hide "Possible cause" and keep Issue + Solution, which is
     the pair a reader standing next to a stuck cart actually needs. */
  .t-trouble th:nth-child(2), .t-trouble td:nth-child(2) { display: none; }
}

/* -- Print ------------------------------------------------------------- */
@media print {
  .navwrap, .totop, .progress, .skip, .vidfilter { display: none !important; }
  .shell { display: block; }
  body { font-size: 10.5pt; }
  .masthead, .site-footer { background: #fff !important; color: #111 !important; }
  .masthead h1, .masthead__brand, .site-footer h2, .site-footer a { color: #111 !important; }
  .masthead__sub, .site-footer, .eyebrow { color: #333 !important; }
  .facts li { color: #111 !important; border-color: #999 !important; background: none !important; }
  .yt { aspect-ratio: auto; min-height: 0; background: none; border: 1px dashed #999; }
  .yt::before, .yt-play { display: none; }
  details.acc[open] > summary::after, details.acc > summary::after { display: none; }
  details.acc .acc-body { display: block !important; }
  h3, .pill { break-after: avoid; }
  .card, .quick__card, .part { break-inside: avoid; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: .8em; color: #555; word-break: break-all; }
}

/* =======================================================================
   Image lightbox - click any content image to zoom and pan.
   Lives outside the shell so it can cover the viewport, and its own class
   prefix (cblbx) keeps it clear of everything above.
   ======================================================================= */
img.cbzoom { cursor: zoom-in; }
.cblbx {
  position: fixed; inset: 0; z-index: 100000; display: none;
  background: rgba(10,10,10,.94);
  touch-action: none; overscroll-behavior: contain; -webkit-tap-highlight-color: transparent;
}
.cblbx.open { display: block; }
.cblbx-img {
  position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform;
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
  max-width: none; cursor: grab;
}
.cblbx-img.grabbing { cursor: grabbing; }
.cblbx-bar { position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px; display: flex; gap: 8px; z-index: 100002; }
.cblbx-btn {
  width: 46px; height: 46px; min-width: 46px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.16); color: #fff; font-size: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.cblbx-btn:hover { background: rgba(255,255,255,.32); }
.cblbx-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.cblbx-hint {
  position: fixed; left: 0; right: 0; bottom: max(14px, env(safe-area-inset-bottom));
  text-align: center; pointer-events: none;
  color: rgba(255,255,255,.72); font-size: .8rem; padding: 0 var(--s4);
}
@media (prefers-reduced-motion: reduce) { .cblbx-img { will-change: auto; } }