/* LIVE 2026-09-26 · homepage FAQs (#faq10) = 02 Powder Rows (round 4, /doctor/h4-faq.html#powder).
   Copied from h4-faq/d-powder.css with the preview class `html.d4-powder` replaced by `html:not(.faq-powder-off)`
   (same specificity). Undo: delete the two "Powder Rows" lines in index.html, or restore index.before-faq-powder.html.bak.
   Regenerate: home-faq-powder/build.py (source: h4-faq/src/powder.css -> h4-faq/_gen.py -> h4-faq/d-powder.css). */
/* h4-faq · powder — generated from src/powder.css by _gen.py */
/* 02 · POWDER ROWS
   Inverted ownership. Every closed question is a solid powder bar, split from the next by a gap of ground; its plate
   and key are white cells set into the bar. The open item is the only white page in the list, and inside it the
   plate, key and answer plate turn powder. The band is type only: a large FAQ and the count, on the ground. */
html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10{
  --p-ground: #F5F8FD; --p-bar: #E3EBF7; --p-bar2: #D8E3F4; --p-ink: #0E1E35; --p-ink2: #4F5B6D; --p-ink3: #8591A4; --p-deep: #22406F;
  --p-pw: 56px; --p-ph: 40px; --p-key: 28px; --p-gap: 22px; --p-lh: 26px; --p-q: 17.5px;
  background: var(--p-ground) !important;
}
html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .faq-eyebrow{ font-size: 13px !important; font-weight: 650 !important; letter-spacing: .02em !important; color: var(--p-deep) !important; font-family: inherit !important; }
html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 #faqTitle{ font-size: clamp(34px, 3.2vw, 46px) !important; letter-spacing: -.04em !important; color: var(--p-ink) !important; -webkit-text-fill-color: var(--p-ink) !important; max-width: none !important; }
html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 #faqTitle i{ color: #86A9E6 !important; -webkit-text-fill-color: #86A9E6 !important; }
html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .faq-sub{ font-size: 17px !important; color: var(--p-ink2) !important; max-width: 44ch !important; }
html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .faq-head{ margin-bottom: 38px !important; }

/* band: type on the ground — a large FAQ, the count at the far end on the same baseline */
html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-title{ display: flex !important; align-items: baseline !important; justify-content: space-between !important; min-height: 56px !important; padding: 16px 2px 14px !important; background: transparent !important; color: var(--p-ink) !important;
  font-size: 26px !important; font-weight: 800 !important; letter-spacing: .01em !important; line-height: 1 !important; }
html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-title::after{ font-size: 14.5px !important; font-weight: 600 !important; letter-spacing: 0 !important; color: var(--p-ink2) !important; font-variant-numeric: tabular-nums !important; }

/* the list: bars on the ground, no sheet */
html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-box{ background: transparent !important; border: 0 !important; box-shadow: none !important; }
html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-item, html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-item + .gfaq-item{ border: 0 !important; background: var(--p-bar) !important; border-radius: 3px !important; }
html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-item + .gfaq-item{ margin-top: 6px !important; }
html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-item:not(.is-open):hover{ background: var(--p-bar2) !important; }
html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-item.is-open{ background: #FFFFFF !important; }

html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-q{ grid-template-columns: var(--p-pw) minmax(0, 1fr) var(--p-key) !important; column-gap: var(--p-gap) !important; padding: 20px 26px 20px 16px !important; color: var(--p-ink) !important; }
html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-q:focus-visible{ outline: 2px solid var(--p-deep) !important; outline-offset: 2px !important; }
html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-t{ padding: 0 !important; font-size: var(--p-q) !important; line-height: var(--p-lh) !important; font-weight: 640 !important; letter-spacing: -.012em !important; color: #1A2B45 !important; }
html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-item.is-open .gfaq-q{ padding-top: 26px !important; padding-bottom: 22px !important; }
html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-item.is-open .gfaq-t{ font-size: 20px !important; line-height: 28px !important; font-weight: 740 !important; letter-spacing: -.02em !important; color: var(--p-ink) !important; }

/* plates: white cells set into the bar; powder cells on the open page */
html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-qb, html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-ab, html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-item:not(.is-open) .gfaq-qb{
  display: block !important; width: var(--p-pw) !important; height: var(--p-ph) !important; margin-top: calc((var(--p-lh) - var(--p-ph)) / 2) !important; border-radius: 2px !important;
  line-height: var(--p-ph) !important; text-align: center !important; font-family: inherit !important; font-variant-numeric: tabular-nums !important; letter-spacing: 0 !important;
  background: #FFFFFF !important; color: var(--p-ink) !important; box-shadow: none !important;
}
/* the number reads as one even label: Q. and figure at one size, the Q. in a lighter ink */
html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-qb .q4p, html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-qb .q4n{ font-size: 14.5px !important; font-weight: 760 !important; letter-spacing: .05em !important; }
html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-qb .q4p{ color: var(--p-ink3) !important; font-weight: 700 !important; }
html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-item.is-open .gfaq-qb{ background: var(--p-bar) !important; color: var(--p-deep) !important; margin-top: calc((28px - var(--p-ph)) / 2) !important; }
html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-item.is-open .gfaq-qb .q4p{ color: var(--p-deep) !important; }

/* the key: a white cell in the bar, a powder cell on the page */
html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-m, html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-item:not(.is-open) .gfaq-m{ width: var(--p-key) !important; height: var(--p-key) !important; border-radius: 2px !important; background: #FFFFFF !important; color: var(--p-deep) !important; box-shadow: 0 0 0 6px #FFFFFF !important; }
html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-m::before, html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-m::after{ width: 13px !important; height: 2px !important; margin: -1px 0 0 -6.5px !important; }
html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-item:not(.is-open) .gfaq-q:hover .gfaq-m{ box-shadow: 0 0 0 6px #FFFFFF !important; }
html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-item.is-open .gfaq-m{ background: var(--p-bar) !important; box-shadow: 0 0 0 6px var(--p-bar) !important; color: var(--p-deep) !important; }

/* the answer on the page */
html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-ai-in{ grid-template-columns: var(--p-pw) minmax(0, 1fr) var(--p-key) !important; column-gap: var(--p-gap) !important; margin: 0 !important; padding: 4px 26px 34px 16px !important; border: 0 !important; }
html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-ab{ background: var(--p-bar) !important; color: var(--p-deep) !important; font-size: 16px !important; font-weight: 800 !important; }
html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-body p{ padding: 0 !important; font-size: 16.5px !important; line-height: var(--p-lh) !important; max-width: 66ch !important; color: #3A4658 !important; }

@media (max-width: 760px){
  html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10{ --p-pw: 44px; --p-ph: 34px; --p-key: 26px; --p-gap: 14px; --p-lh: 24px; --p-q: 16.5px; }
  html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .faq-head{ margin-bottom: 28px !important; }
  html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-title{ font-size: 22px !important; min-height: 48px !important; padding: 14px 2px 12px !important; }
  html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-title::after{ font-size: 13.5px !important; }
  html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-q{ padding: 16px 16px 16px 10px !important; }
  html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-item.is-open .gfaq-q{ padding-top: 20px !important; padding-bottom: 18px !important; }
  html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-item.is-open .gfaq-t{ font-size: 18px !important; line-height: 26px !important; }
  html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-item.is-open .gfaq-qb{ margin-top: calc((26px - var(--p-ph)) / 2) !important; }
  html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-qb .q4p, html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-qb .q4n{ font-size: 13px !important; letter-spacing: .03em !important; }
  html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-m, html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-item:not(.is-open) .gfaq-m, html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-item:not(.is-open) .gfaq-q:hover .gfaq-m{ box-shadow: 0 0 0 4px #FFFFFF !important; }
  html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-item.is-open .gfaq-m{ box-shadow: 0 0 0 4px var(--p-bar) !important; }
  html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-ai-in{ padding: 0 16px 24px 10px !important; }
  html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-body p{ font-size: 15.5px !important; }
}

/* no motion: the live sheet animates the answer's rows, opacity and the key bars — every change here is instant */
html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 *, html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 *::before, html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 *::after{ transition: none !important; animation: none !important; }

/* every answer uses the key's column too */
html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-body{ grid-column: 2 / -1 !important; }

/* the narrowest phones: tighter margins so the question keeps its measure */
@media (max-width: 360px){
  html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10{ --p-pw: 40px; --p-ph: 32px; --p-gap: 12px; }
  html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-q{ padding: 16px 12px 16px 8px !important; }
  html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .gfaq-ai-in{ padding: 0 12px 22px 8px !important; }
}

/* text is never smaller than live: eyebrow 14px (13px on phones), band FAQ 14px (12.5px on phones) */
html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .faq-eyebrow{ font-size: 14px !important;  }
@media (max-width: 760px){
  html:not(.faq-powder-off) body #faq10#faq10#faq10#faq10#faq10#faq10#faq10#faq10 .faq-eyebrow{ font-size: 13px !important; }
}
