/* bailey-vs-bedrock page-specific styles (verbatim; loaded after site.css). */
  /* Page-specific styles. The shared core CSS is injected above from
     index.html by build/build.py (between the SHARED-CSS markers). */
  figure { margin: 1.4rem 0; }
  figure img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
  figcaption { font-size: var(--fs-sm); color: var(--muted); text-align: center; margin-top: 0.45rem; font-style: italic; }
  .nav-back { color: var(--faint) !important; border-bottom: 1px solid var(--border); margin-bottom: 0.4rem; padding-bottom: 0.85rem; }
  .nav-back:hover { color: var(--muted) !important; }
  .diagram { background: var(--surface2, #23211d); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.6rem 0.6rem 0.2rem; }
  .diagram svg { width: 100%; height: auto; display: block; }
  .diag-legend { font-size: var(--fs-sm); color: var(--muted); margin: 0.1rem 0 0.6rem; }
  .sw { display: inline-block; width: 22px; height: 0; vertical-align: middle; margin: 0 0.3rem 0 0.9rem; }
  .sw:first-child { margin-left: 0; }
  .sw-contact { border-top: 4px solid #6fbf73; }
  .sw-gap { border-top: 3px dashed #d9663f; }

  /* FAQ accordion (same component as identify.html). */
  .faq-list { display: flex; flex-direction: column; gap: 1rem; }
  .faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
  .faq-q { padding: 1rem 1.25rem; font-size: var(--fs-dense); color: var(--accent2); font-weight: bold; cursor: pointer; user-select: none; display: flex; justify-content: space-between; align-items: center; list-style: none; }
  .faq-q::-webkit-details-marker { display: none; }
  .faq-toggle { font-size: var(--fs-h3); color: var(--faint); transition: transform 0.2s; flex-shrink: 0; }
  details[open] .faq-toggle { transform: rotate(45deg); }
  .faq-a { padding: 0 1.25rem 1rem; font-size: var(--fs-dense); color: var(--muted); border-top: 1px solid var(--border); line-height: 1.7; }
  .faq-a p { margin-top: 0.7rem; margin-bottom: 0; }
  .src-card a { display: block; margin-bottom: 0.15rem; }

  /* Comparison photos: show the full image (override the cropped gallery-thumb
     default of height:170px/object-fit:cover from the shared gallery CSS). */
  .gthumb img { height: auto; object-fit: contain; background: var(--surface2); }
  /* Patent drawings are tall portrait sheets; cap their height so they sit
     tidily beside other content (full detail is available in the lightbox). */
  .gthumb.patent img { max-height: 440px; }

  /* Section lead-ins share the content width with the body prose below them.
     The shared default caps .section-intro at 68ch, which here is narrower than
     the full-width paragraphs that follow and produces an odd short-line wrap. */
  .section-intro { max-width: none; }

  /* Feature comparison: one card per feature, Bailey vs Bedrock side by side,
     with a plain-language verdict. Stacks to a single column on small screens,
     which a 4-column table cannot do well. */
  .cmp-grid { display: grid; gap: 0.8rem; margin-top: 1rem; }
  .cmp-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.9rem 1.1rem; }
  .cmp-feat { color: var(--accent2); font-weight: bold; font-size: var(--fs-dense); margin-bottom: 0.65rem; }
  .cmp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
  .cmp-cols > div { padding-left: 0.7rem; border-left: 3px solid var(--border); }
  .cmp-cols > div:first-child { border-left-color: var(--accent); }
  .cmp-cols > div:last-child { border-left-color: var(--accent2); }
  .cmp-tag { font-family: 'Courier New', monospace; font-size: var(--fs-3xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); display: block; margin-bottom: 0.15rem; }
  .cmp-cols p { font-size: var(--fs-dense); color: var(--muted); margin: 0; }
  .cmp-note { font-size: var(--fs-sm); color: var(--muted); font-style: italic; margin: 0.7rem 0 0; padding-top: 0.55rem; border-top: 1px solid var(--border); }
  @media (max-width: 560px) { .cmp-cols { grid-template-columns: 1fr; } }