/* fsb-v2 - /fineshield on copy v2 (2026-09-30): What · Why · How · Demos.
   Adds the aha lines, the chapter-2 paragraphs and the channel list.
   Everything else is fsb.css. Light page only, like fsb.css. */
.fsb-v2 .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* aha: the one line per chapter the reader repeats */
.fsb-aha{margin-top:clamp(40px,4.4vw,64px);max-width:26ch;padding-left:clamp(16px,1.6vw,24px);border-left:3px solid var(--fsb-accent);
  font-family:var(--fsb-serif);font-size:clamp(28px,3vw,44px);line-height:1.12;letter-spacing:-.015em;color:var(--fsb-ink);text-wrap:balance}
.fsb-aha strong{font-weight:400}
.fsb-aha-c{margin:var(--fsb-s5) auto 0;max-width:30ch;padding:0;border:0;color:var(--fsb-accent);font-size:clamp(24px,2.4vw,34px)}

.fsb-h2-w{max-width:24ch}

/* 2.1 three sentences */
.fsb-why{margin-top:var(--fsb-s3);max-width:60ch}
.fsb-why p{color:var(--fsb-text);font-size:var(--fsb-fs-lede)}
.fsb-why p+p{margin-top:var(--fsb-s2)}
.fsb-why p:last-child{color:var(--fsb-ink);font-weight:500}

/* 3.3 channel list (same rows as the old six-scene list) */
.fsb-chan{list-style:none;margin:0;padding:0}
.fsb-chan li{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;padding:var(--fsb-s3) 0;border-top:1px solid var(--fsb-hair-2)}
.fsb-chan li:last-child{border-bottom:1px solid var(--fsb-hair-2)}
.fsb-chan p{margin-top:4px;color:var(--fsb-ink)}

/* hero holds the held message, so let it breathe like the old hero chat */
.fsb-v2 .fsb-hero-p .fsb-hold{max-width:560px}

@media (max-width:700px){
  .fsb-aha-c{margin-left:0;text-align:left}
}