/* ==========================================================================
   Poseidon Pump Service — "Trident Deep" · Questions & Answers
   Layered ON TOP of styles.css, the same way work.css is. Nothing here
   redefines a brand token: every colour, radius, shadow and easing below is
   one the index already uses. The page's own vocabulary is small — a hero on
   work.html's model, a filter/search row, and the question list itself.

   THE ONE STRUCTURAL RULE THIS PAGE OBEYS
   styles.css documents why everything below the waterline is a single sheet
   of frosted glass (.deep-frost) rather than a frosted box per section: two
   backdrop-filtered surfaces meeting produce a ~3px under-blurred seam at the
   junction, because Chromium resamples the backdrop inside each element's own
   bounds. This page adds NO new backdrop-filter. The question cards are the
   reason it matters most — five of them stacked 14px apart would be four
   junctions — so .qa-item is a tint and a border over the sheet, with no
   blur of its own. It sits on the same glass the copy around it sits on, and
   there is nothing for a seam to happen between.

   (The two blurred surfaces that DO appear here are both existing site
   components used unchanged: .chip, lifted verbatim from the gallery filters
   so the two pages' chips are the same object, and .card / .btn-ghost on the
   closing panel. Both are small, isolated panes with deliberate edges.)
   ========================================================================== */

/* The height transition constant. faq.js reads the same number as ANIM_MS —
   if you change one, change the other. */
:root { --qa-anim: 380ms; }

/* The current page keeps the underline the other links only get on hover —
   same rule, drawn open instead of animating. Identical to work.css. */
.nav-desktop a[aria-current="page"] { color: var(--foam); }
.nav-desktop a[aria-current="page"]::after { right: 0; }
.nav-panel nav a[aria-current="page"] { color: var(--sky-bright); }

/* The header is shared, so its breakpoint is shared: the four-item row and
   the fold to the hamburger at 767px both live in styles.css, and this page
   inherits them unchanged. A page stylesheet must not move a shared
   component's breakpoint — scoped to html[data-page="faq"] it would be
   invisible to anyone measuring the header on the other two pages, and the
   same header would behave two different ways between 1181 and the override.
*/

/* ================================================================ HERO BAND */
/* work.html's hero, same reasoning, same numbers: no intro plays on a
   secondary page, so the block is optically centred on 42% of the window
   rather than hung under the horizon, and --hero-half is half the block's
   own height (eyebrow + one line of display type + two lines of sub). */
.qa-hero {
  position: relative;
  --hero-half: 98px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: max(76px, calc(42vh - var(--hero-half)));
  padding-top: max(76px, calc(42svh - var(--hero-half)));
  padding-bottom: clamp(18px, 2.6vh, 38px);
  text-align: center;
}
.qa-hero-inner { width: 100%; }
/* legibility over bare moving water is carried by the type, not by a scrim —
   same call, and same values, as the index hero */
.qa-hero-eyebrow,
.qa-hero-sub { text-shadow: 0 1px 2px rgba(2, 6, 12, .55), 0 6px 22px rgba(2, 6, 12, .62); }
.qa-hero-eyebrow { justify-content: center; margin-bottom: clamp(12px, 1.8vh, 18px); }
.qa-hero-title {
  font-size: clamp(2.3rem, 7vw, 4.4rem);
  letter-spacing: .045em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 6px 34px rgba(0, 0, 0, .75), 0 0 60px rgba(46, 127, 196, .30);
}
.qa-hero-sub {
  margin: clamp(14px, 2.2vh, 22px) auto 0;
  max-width: 62ch;
  color: var(--text-mute);
  font-size: clamp(.96rem, 1.5vw, 1.08rem);
}

/* Clears the waterline fade before the first line of copy, on the same short
   lead-in work.css gives .band-case: this page has no intro to recover from
   and the point of the first screen is that the questions have already
   started by the time it ends. */
.band-qa { padding-top: calc(var(--sec-y) * .28 + var(--wl-h) * .82); }
.band-qa .sec-head { margin-bottom: clamp(24px, 2.8vw, 38px); }

/* ============================================================ SEARCH + CHIPS */
.qa-tools {
  display: grid;
  gap: clamp(16px, 2vw, 22px);
  justify-items: center;
}

.qa-search { display: grid; gap: 8px; width: min(460px, 100%); justify-items: stretch; }
/* a real label, not a placeholder wearing one — the placeholder below is a
   list of example words, which is a different job */
.qa-search > label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-mute);
  text-align: center;
}
.qa-search-box { position: relative; display: block; }
.qa-search-box input {
  width: 100%;
  font: inherit;
  font-size: 1rem; /* 16px: under that, iOS zooms the page on focus */
  color: var(--text);
  background: rgba(5, 10, 17, .62);
  border: 1px solid rgba(127, 182, 232, .18);
  border-radius: var(--r-pill);
  padding: .78em 2.6em .78em 2.9em;
  appearance: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.qa-search-box input::placeholder { color: #7A8FA6; }
.qa-search-box input::-webkit-search-cancel-button { display: none; }
.qa-search-box input:hover { border-color: rgba(127, 182, 232, .3); }
.qa-search-box input:focus {
  outline: none;
  border-color: var(--sky);
  background: rgba(7, 14, 24, .8);
  box-shadow: 0 0 0 3px rgba(46, 127, 196, .26);
}
.qa-search-box input:focus-visible { outline: 2px solid var(--sky-bright); outline-offset: 2px; }
.qa-search-icon {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--steel-dark);
  pointer-events: none;
}
.qa-search-box input:focus + .qa-search-clear { color: var(--sky); }
.qa-search-clear {
  position: absolute;
  right: 7px; top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--text-mute);
  cursor: pointer;
  transition: color .2s ease, background .2s ease;
}
.qa-search-clear:hover { color: var(--foam); background: rgba(0, 90, 168, .32); }

/* ---- chips ---------------------------------------------------------------
   Lifted from work.css unchanged so the FAQ's subject filters and the
   gallery's category filters are visibly the same control. */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
/* .chip and its states now live in styles.css — shared with the gallery. */
/* A subject with nothing left in it under the current search is dimmed rather
   than removed: the row must not reflow itself under the pointer as you type. */
.chip.is-empty { opacity: .42; }

.qa-status {
  margin-top: 18px;
  text-align: center;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  /* --text-mute, not --text-dim: this line sits on the band glass with no
     card under it, where styles.css measures --text-dim at 3.9:1. */
  color: var(--text-mute);
}

/* ============================================================= THE QUESTIONS */
.qa-list {
  margin-top: clamp(20px, 2.4vw, 28px);
  max-width: 900px;
  margin-inline: auto;
  display: grid;
  gap: 14px;
}

/* No backdrop-filter here, on purpose — see the header of this file. The tint
   and the border are all a pane needs to lift off the sheet behind it. */
.qa-item {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
  padding: clamp(18px, 2.1vw, 24px) clamp(18px, 2.3vw, 28px);
  transition: border-color .28s ease, box-shadow .28s ease, background .28s ease;
}
.qa-item:hover { border-color: var(--line-strong); }
.qa-item.is-open {
  border-color: rgba(127, 182, 232, .26);
  background: linear-gradient(180deg, rgba(34, 51, 72, .48), rgba(10, 17, 27, .54));
}
/* the deep-link arrival flash: a ring, held for a couple of seconds by faq.js
   and then removed. No keyframes, so it behaves identically under reduced
   motion (where the global rule would collapse an animation to nothing). */
.qa-item.is-target {
  border-color: var(--sky);
  box-shadow: 0 0 0 1px rgba(127, 182, 232, .38), 0 0 40px -8px rgba(46, 127, 196, .6), var(--sh-card);
}

.qa-head { display: flex; align-items: flex-start; gap: 8px; }
.qa-q { flex: 1 1 auto; min-width: 0; margin: 0; }
.qa-trigger {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: clamp(12px, 1.6vw, 20px);
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  color: #fff;
}
.qa-q-text {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.3;
  letter-spacing: .012em;
  text-wrap: balance;
  transition: color .2s ease;
}
.qa-trigger:hover .qa-q-text { color: var(--sky-bright); }
.qa-caret {
  flex: none;
  width: 30px; height: 30px;
  margin-top: -1px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--sky);
  background: rgba(9, 16, 26, .45);
  transition: transform .3s var(--ease-out), border-color .2s ease, background .2s ease, color .2s ease;
}
.qa-trigger:hover .qa-caret { border-color: var(--sky); color: var(--sky-bright); background: rgba(0, 90, 168, .3); }
.qa-item.is-open .qa-caret { transform: rotate(180deg); border-color: var(--line-strong); }

/* ---- copy link ----------------------------------------------------------- */
.qa-copy-wrap { position: relative; flex: none; }
.qa-copy {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent;
  border-radius: 50%;
  background: none;
  /* --text-mute, not --text-dim: this is an affordance, and at --text-dim it
     read as decoration people did not try to press */
  color: var(--text-mute);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.qa-copy:hover { color: var(--sky-bright); border-color: var(--line); background: rgba(0, 90, 168, .26); }
.qa-copied {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 3;
  padding: .38em .8em;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: rgba(0, 65, 127, .94);
  color: #fff;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s var(--ease-out);
}
.qa-copied.is-on { opacity: 1; transform: translateY(0); }
.qa-copied:empty { display: none; }
/* the third tier of the copy fallback: no Clipboard API and no execCommand,
   so the URL is put somewhere the visitor can select it themselves */
.qa-urlfield {
  position: absolute;
  top: calc(100% + 38px);
  right: 0;
  z-index: 3;
  width: min(320px, 68vw);
  font: inherit;
  /* 16px: the fallback focuses and selects this field, and iOS zooms the
     page into any focused control under 16px. */
  font-size: 1rem;
  color: var(--text);
  background: rgba(5, 10, 17, .95);
  border: 1px solid var(--sky);
  border-radius: var(--r-sm);
  padding: .5em .7em;
}

.qa-summary {
  margin-top: 12px;
  padding-right: 4px;
  max-width: 72ch;
  color: var(--text-mute);
  font-size: .95rem;
  line-height: 1.62;
}

/* ---- the collapsing panel -------------------------------------------------
   A height transition rather than <details>: the same panel has to be opened
   by a filter, by a deep link and by print, and closed state has to leave the
   accessibility tree — which visibility:hidden does and height:0 alone does
   not. faq.js drives the inline height; these two rules are the rest state. */
.qa-panel {
  height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: height var(--qa-anim) var(--ease-out);
}
.qa-panel.is-open { height: auto; visibility: visible; }
.qa-panel-in {
  margin-top: 18px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  /* ONE measure for the whole answer. Capping the paragraphs alone (which is
     where this started) left them wrapping ~130px short of the list items
     beside them, so the answer had two different right edges. The cap lives on
     the container instead: prose, lists, notes and the aside all end on the
     same line, and the card is wider than the measure on purpose — a 900px
     card at a 74ch measure is a column of text, not a full-bleed wall. */
  max-width: 74ch;
}
.qa-panel-in > * + * { margin-top: 16px; }

/* ---- blocks -------------------------------------------------------------- */
.qa-p {
  color: var(--text-mute);
  font-size: .97rem;
  line-height: 1.7;
}

.qa-note {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: clamp(14px, 1.6vw, 18px) clamp(15px, 1.8vw, 20px);
  border: 1px solid var(--line);
  border-left: 2px solid var(--sky);
  border-radius: var(--r-md);
  background: rgba(0, 90, 168, .13);
}
.qa-panel-in > .qa-note { margin-top: 20px; }
.qa-note-mark { flex: none; color: var(--sky); margin-top: 1px; }
.qa-note-body { min-width: 0; }
.qa-note-label {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sky);
  margin-bottom: 7px;
}
.qa-note-text { color: var(--text); font-size: .93rem; line-height: 1.64; }

.qa-blocklist { display: grid; gap: 13px; }
.qa-li { display: flex; align-items: flex-start; gap: 13px; }
.qa-li-body { min-width: 0; flex: 1 1 auto; }
.qa-term { color: var(--foam); font-weight: 700; }
.qa-li-text { color: var(--text-mute); font-size: .95rem; line-height: 1.62; }

/* bullet: the site has no round bullets anywhere — this is the same rotated
   facet the eyebrow rules and the trident glints are cut from */
.qa-blocklist-bullet > .qa-li > .qa-mark {
  flex: none;
  width: 7px; height: 7px;
  margin-top: .62em;
  border-radius: 2px;
  transform: rotate(45deg);
  background: linear-gradient(180deg, var(--sky), var(--poseidon));
  box-shadow: 0 0 0 3px rgba(46, 127, 196, .12);
}
/* check: the index's .ticks marker, rebuilt as an element because the mark
   here wraps a real <svg> rather than two pseudo-element borders */
.qa-blocklist-check > .qa-li > .qa-mark {
  flex: none;
  width: 19px; height: 19px;
  margin-top: .18em;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(127, 182, 232, .45);
  background: linear-gradient(180deg, rgba(46, 127, 196, .35), rgba(0, 90, 168, .2));
  color: var(--sky-bright);
}
.qa-blocklist-check > .qa-li > .qa-mark svg { width: 12px; height: 12px; }

/* one level of nesting, quieter and rule-led so the hierarchy is legible
   without a second bullet shape */
.qa-sublist {
  margin-top: 12px;
  padding-left: 15px;
  border-left: 1px solid var(--line);
  gap: 10px;
}
.qa-sublist > .qa-li > .qa-mark {
  width: 5px; height: 5px;
  margin-top: .66em;
  box-shadow: none;
  background: var(--steel-dark);
}
.qa-sublist .qa-term { color: var(--sky-bright); font-size: .93rem; }
.qa-sublist .qa-li-text { font-size: .91rem; }

.qa-group {
  border-top: 1px solid var(--line);
  padding-top: 20px;
}
.qa-panel-in > .qa-group { margin-top: 24px; }
.qa-group-title {
  font-family: var(--font-display);
  font-size: .92rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sky-bright);
  margin-bottom: 15px;
}
.qa-group > * + * { margin-top: 14px; }
.qa-group > .qa-group-title + * { margin-top: 0; }

.qa-cta { display: flex; width: fit-content; }
.qa-panel-in > .qa-cta { margin-top: 22px; }

.qa-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 11px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.qa-panel-in > .qa-foot { margin-top: 24px; }
.qa-foot-cat { color: var(--sky); font-weight: 800; }
.qa-foot-sep { color: var(--steel-dark); }

/* search hit painting — <mark> defaults to a yellow highlight that has no
   business on this page */
.qa-hit {
  background: rgba(46, 127, 196, .38);
  color: #fff;
  border-radius: 3px;
  padding: 0 .14em;
  box-shadow: inset 0 -1px 0 rgba(127, 182, 232, .55);
}

/* ============================================================ EMPTY / FAIL */
.qa-empty,
.qa-fallback {
  text-align: center;
  padding: clamp(30px, 4vw, 46px) clamp(20px, 3vw, 34px);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: rgba(8, 13, 21, .38);
}
.qa-empty-mark { display: inline-flex; color: var(--sky); margin-bottom: 14px; }
.qa-empty-h,
.qa-fallback h3 {
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #fff;
}
.qa-empty-p,
.qa-fallback p {
  margin: 14px auto 0;
  max-width: 46ch;
  color: var(--text-mute);
  font-size: .95rem;
}
.qa-empty-p strong { color: var(--sky-bright); }
.qa-empty-acts {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.qa-fallback .btn { margin-top: 24px; }
.qa-fallback-hours { font-size: .8rem !important; letter-spacing: .1em; text-transform: uppercase; }

.qa-updated {
  margin-top: clamp(22px, 2.6vw, 30px);
  text-align: center;
  font-size: .78rem;
  color: var(--text-mute);
  font-style: italic;
}
.qa-noscript {
  margin-top: 22px;
  text-align: center;
  color: var(--text-mute);
}
.qa-noscript a { color: var(--sky-bright); border-bottom: 1px solid var(--line-strong); }

/* the line that only exists on paper — see the print block below */
.qa-print-only { display: none; }

/* ===================================================================== CTA */
/* work.html's closing panel, with .card carrying the surface instead of the
   rule being duplicated. The card's hover lift is taken back off: it is the
   last block on the page, not something you are invited to click. */
.qacta {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(22px, 3vw, 46px);
  align-items: end;
  padding: clamp(26px, 3.2vw, 44px);
}
.qacta:hover { transform: none; }
.qacta::after { content: none; }
.qacta-copy h2 {
  font-size: clamp(1.45rem, 3vw, 2.2rem);
  text-transform: uppercase;
  letter-spacing: .025em;
  color: #fff;
  text-align: left;
}
.qacta-copy > p { margin-top: 16px; color: var(--text-mute); max-width: 48ch; }
.qacta-actions { display: grid; gap: 12px; justify-items: stretch; align-content: end; }
.qacta-quiet {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  font-size: .82rem;
  color: var(--text-dim);
}

/* ============================================================== RESPONSIVE */
@media (max-width: 1000px) {
  .qacta { grid-template-columns: minmax(0, 1fr); }
  .qacta-actions { display: flex; flex-wrap: wrap; align-items: center; }
  .qacta-quiet { flex: 1 0 100%; margin-top: 0; }
}

@media (max-width: 599px) {
  /* the title runs to one short line here, but the sub runs to four, so the
     block is taller and its half-height — the thing the 42% centring is
     measured from — grows */
  .qa-hero { --hero-half: 116px; }
  .qacta-actions { flex-direction: column; align-items: stretch; }
  .qacta-actions .btn { width: 100%; }

  /* ---- chips: one row you swipe, not three rows you read ---------------
     Verbatim from work.css. Five chips wrapped into three ragged centred
     lines is the widest, least legible way to spend that space. */
  .filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100%;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter),
                        #000 calc(100% - var(--gutter)), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter),
                        #000 calc(100% - var(--gutter)), transparent 100%);
  }
  .filters::-webkit-scrollbar { display: none; }
  /* the tools row is a grid of centred items; the bled-out chip row has to be
     allowed to be wider than its column for the bleed to reach the screen edge */
  .qa-tools { justify-items: stretch; }
  .qa-search { margin-inline: auto; }
  .qa-search > label { text-align: left; }

  /* text-wrap:balance stays on at every width. Measured at 390px it costs no
     extra lines on any of the five questions (2/2/4/2/1 either way) — it only
     evens them — and styles.css already balances every other heading on the
     site, so switching it off here would make these the odd ones. */
  .qa-item { padding: 17px 16px; }
  .qa-head { gap: 4px; }
  .qa-trigger { gap: 10px; }
  .qa-note { padding: 14px 15px; }
  .qa-sublist { padding-left: 12px; }
}

@media (max-width: 380px) {
  /* at 360px the caret and the copy button together are 68px of a 328px row;
     the copy control keeps its 30px hit area but loses its ring */
  .qa-caret { width: 27px; height: 27px; }
  .qa-copy { width: 28px; height: 28px; }
  .qa-urlfield { width: min(280px, 74vw); }
}

/* ========================================================= REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  /* faq.js already skips the height animation and scrolls without smoothing;
     this takes the transitions off the affordances that are left. The global
     rule in styles.css collapses durations to 0.001ms, so these are belt and
     braces for the properties that would otherwise still tween. */
  .qa-panel { transition: none; }
  .qa-caret, .qa-copy, .qa-copied, .chip, .qa-item { transition: none; }
  .chip:hover { transform: none; }
}

/* =================================================================== PRINT */
/* People print these to hand to a customer, or to read on a bench with wet
   hands. So: no water, no chrome, no controls, every answer already open,
   black on white, and no question split across a page break. The tokens are
   redefined once at the root rather than overridden component by component. */
@media print {
  :root {
    --text: #000;
    --text-mute: #1a1a1a;
    --text-dim: #333;
    --foam: #000;
    --sky: #000;
    --sky-bright: #000;
    --line: #c4c4c4;
    --line-strong: #999;
    --card-bg: #fff;
    --glass-bg: #fff;
    --sh-card: none;
  }
  html, body { background: #fff !important; color: #000 !important; }
  html { scroll-behavior: auto; }

  /* the ocean, the chrome and every control */
  #scene, .deep-frost, .site-header, .skip-link,
  .qa-tools, .qa-status, .qa-caret, .qa-copy-wrap, .qa-urlfield,
  .qa-empty, .qa-noscript, .band-qacta,
  .footer-brand, .footer-col:not(.footer-contact), .footer-base { display: none !important; }
  .site-footer { padding-top: 0 !important; }
  .footer-contact h2, .footer-phone, .footer-contact p { color: #000 !important; }

  .deep { overflow: visible !important; }
  .band { padding: 0 !important; }
  .wrap { max-width: none; padding-inline: 0; }

  /* the hero shrinks to a masthead */
  .qa-hero { padding: 0 0 18px !important; display: block; text-align: left; }
  .qa-hero-title { font-size: 22pt; color: #000; text-shadow: none; }
  .qa-hero-sub { color: #222; font-size: 10pt; max-width: none; text-shadow: none; }
  .qa-hero-eyebrow { color: #000; text-shadow: none; }
  .sec-head { text-align: left; max-width: none; margin-bottom: 14px; }
  .sec-head h2 { color: #000; font-size: 15pt; }
  .sec-sub { display: none; }

  /* every entry open, whatever the filter had done to it */
  .eyebrow .rule { background: #000 !important; }
  .qa-list { max-width: none; gap: 0; margin-top: 0; }
  .qa-panel-in { max-width: none; }
  .qa-item,
  .qa-item[hidden] {
    display: block !important;
    background: #fff !important;
    border: 0 !important;
    border-top: 1px solid #c4c4c4 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 12pt 0 !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .qa-panel {
    height: auto !important;
    visibility: visible !important;
    overflow: visible !important;
    transition: none !important;
  }
  .qa-q-text { color: #000; font-size: 12pt; }
  .qa-summary { color: #222; font-size: 10pt; }
  .qa-p, .qa-li-text, .qa-note-text { color: #111; font-size: 10pt; }
  .qa-term { color: #000; }
  .qa-note { background: #f2f2f2 !important; border-color: #bbb !important; border-left-color: #555 !important; }
  .qa-note-label, .qa-group-title, .qa-foot-cat { color: #000; }
  .qa-blocklist-bullet > .qa-li > .qa-mark { background: #444 !important; box-shadow: none !important; }
  .qa-blocklist-check > .qa-li > .qa-mark { background: #fff !important; border-color: #555 !important; color: #000 !important; }
  .qa-cta { display: none !important; }   /* a button on paper is a dead end */
  .qa-hit { background: none !important; color: inherit !important; box-shadow: none !important; }
  .qa-updated { text-align: left; color: #333; }

  /* the one line that only exists on paper: whoever is holding this needs the
     phone number, and the page it came from */
  .qa-print-only {
    display: block !important;
    margin-top: 16pt;
    padding-top: 8pt;
    border-top: 2px solid #000;
    font-size: 9pt;
    letter-spacing: .04em;
    color: #000;
  }
}