/* Founders page: Founder Badge product block, perks, steps, FAQ (2026-09-25).
   Uses only the site tokens from site.css. Revert: delete this file and its <link> in founders.html. */
/* Layout (2026-09-25): left = one long stream (wall hero, body, pledge, FAQ); right = sticky buy column.
   Spacing scale: 32px between sections, 12px inside them. Under 980px it is one column: wall, buy, stream. */
.page.wide { max-width:1120px; }
.fb-product { --sect:32px; --in:12px; width:100%; max-width:100%; min-width:0; display:grid; grid-template-columns:minmax(0,1fr) 340px; grid-template-areas:"main buy"; gap:var(--sect); align-items:start; }
.fb-main { grid-area:main; display:flex; flex-direction:column; gap:var(--sect); min-width:0; }
.fb-stream { grid-area:stream; display:flex; flex-direction:column; gap:var(--sect); min-width:0; }
.fb-wallsect { grid-area:wall; display:grid; gap:16px; min-width:0; }
.fb-crest { width:clamp(136px,40vw,168px); aspect-ratio:1; margin:0 auto 12px; display:grid; place-items:center;
            background:radial-gradient(closest-side,#cf452033,transparent); }
.fb-crest svg { width:100%; height:auto; filter:drop-shadow(0 0 22px #cf452066); }
.fb-spin { transform-origin:100px 100px; animation:fb-spin 40s linear infinite; }
.fb-shine { animation:fb-shine 5s ease-in-out infinite; }
@keyframes fb-spin { to { transform:rotate(360deg); } }
@keyframes fb-shine { 0% { transform:translateX(-160px); } 50%, 100% { transform:translateX(160px); } }

.fb-buy { grid-area:buy; position:sticky; top:16px; max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); overflow-y:auto; scrollbar-width:thin;
          padding:3px; margin:-3px; /* room for focus outlines inside the scroll box */
          display:flex; flex-direction:column; gap:10px; min-width:0; max-width:100%; }
.fb-buy > * { flex:none; max-width:100%; min-width:0; }
.fb-tag { align-self:flex-start; border:1.5px solid var(--fg); border-radius:4px; padding:1px 7px; font-size:.7rem; font-weight:800; letter-spacing:.06em; }
.fb-buy h1 { font-size:1.55rem; text-align:left; }
.fb-kicker { margin-top:-6px; color:var(--muted); font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.fb-notice { overflow-wrap:anywhere; background:var(--accent); color:var(--on-accent); border-radius:8px; padding:10px 14px; font-size:.86rem; font-weight:600; }
.fb-label { display:flex; justify-content:space-between; align-items:baseline; }
.fb-label a { color:var(--accent-hi); font-size:.8rem; letter-spacing:0; text-transform:none; }
.fb-label a:hover, .fb-label a:focus-visible { color:var(--fg); }
.fb-card { position:relative; overflow:hidden; border:1px solid var(--line); background:var(--btn); border-radius:10px; padding:14px 16px 14px 20px; }
.fb-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(#ffe29a,#c9771f); }
.fb-card h3 { font-size:1rem; }
.fb-price { font-size:1.65rem; font-weight:800; margin:0 0 4px; }
.fb-price small { font-size:.8rem; color:var(--muted); font-weight:600; margin-left:6px; }
.fb-card p { color:var(--muted); font-size:.86rem; }
.fb-left { margin-top:10px; }
.fb-bar { height:6px; border-radius:99px; background:#ffffff14; overflow:hidden; }
.fb-bar i { display:block; height:100%; width:0; background:linear-gradient(90deg,#ffe29a,var(--accent)); transition:width 1.4s ease; }
.fb-left span { display:flex; justify-content:space-between; gap:8px; font-size:.8rem; color:var(--muted); margin-top:5px; }
.fb-left b { color:var(--accent-hi); }
.fb-pay { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.fb-pay span { display:flex; flex-direction:column; align-items:center; border:1px solid var(--line); background:#ffffff08; border-radius:8px;
               padding:8px 4px; font-size:.8rem; font-weight:700; }
.fb-pay small { font-weight:500; color:var(--muted); font-size:.68rem; }
.fb-go { border:1px solid var(--line); border-radius:8px; background:var(--btn); color:var(--muted); font:inherit; font-weight:800; font-size:1.1rem;
         padding:10px 14px; cursor:not-allowed; display:flex; flex-direction:column; align-items:center; line-height:1.25; }
.fb-go small { font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-hi); }
.fb-go:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.fb-soon { border:1px solid #cf452066; background:#cf452014; border-radius:8px; padding:10px 14px; font-size:.86rem; }
.fb-soon a { color:var(--accent-hi); }
.fb-row2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.fb-ghost { border:1px solid var(--line); background:var(--btn); color:var(--fg); border-radius:8px; padding:10px; font:inherit; font-weight:600;
            font-size:.88rem; cursor:pointer; display:flex; gap:8px; justify-content:center; align-items:center; transition:border-color .15s; }
.fb-ghost:hover, .fb-ghost:focus-visible { border-color:var(--accent); }
.fb-ghost:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.fb-ghost svg { width:18px; height:18px; flex:none; }
.fb-fine { background:#ffffff08; border-radius:8px; padding:8px 14px 8px 28px; color:var(--muted); font-size:.76rem; }
.fb-fine li { margin:2px 0; }

.fb-body { display:grid; gap:var(--in); min-width:0; }
.fb-body h2 { font-size:1.35rem; margin:20px 0 0; } /* 20 + 12 grid gap = 32 between sections */
.fb-body h2:first-child { margin-top:0; }
.fb-body > p { color:var(--muted); }
.fb-perks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--in); }
.fb-perk { border:1px solid var(--line); background:var(--btn); border-radius:12px; padding:14px; min-width:0; }
.fb-perk svg { width:28px; height:28px; color:var(--accent-hi); }
.fb-perk h4 { margin:6px 0 2px; font-size:.95rem; }
.fb-perk p { font-size:.85rem; color:var(--muted); }
.fb-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; counter-reset:s; }
.fb-step { border:1px solid var(--line); background:var(--btn); border-radius:12px; padding:14px; min-width:0; }
.fb-step::before { counter-increment:s; content:counter(s); display:grid; place-items:center; width:28px; height:28px; border-radius:50%;
                   background:var(--accent); color:var(--on-accent); font-weight:800; margin-bottom:8px; }
.fb-step p { font-size:.85rem; color:var(--muted); }
.fb-step b { color:var(--fg); }
.fb-sect { margin:0; }
.hero .wall-title { font-size:clamp(2rem,6vw,2.8rem); letter-spacing:-.02em; line-height:1.1;
                    background:linear-gradient(90deg,#ffe29a,#cf4520 50%,#ffe29a); -webkit-background-clip:text; background-clip:text; color:transparent; }
.fb-faq { display:grid; gap:var(--in); min-width:0; }
.fb-faq h2 { font-size:1.35rem; margin:0; }
.fb-faq details { border:1px solid var(--line); background:var(--btn); border-radius:10px; padding:10px 14px; margin:0; }
.fb-faq summary { cursor:pointer; font-weight:700; }
.fb-faq summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
.fb-faq details p { margin:8px 0 2px; color:var(--muted); }

@media (max-width:979px) {
  .fb-product { grid-template-columns:minmax(0,1fr); grid-template-areas:"wall" "buy" "stream"; }
  .fb-main { display:contents; }
  .fb-buy { position:static; max-height:none; overflow:visible; padding:0; margin:0; }
  .fb-buy h1 { font-size:1.7rem; }
}
@media (max-width:560px) {
  .fb-perks { grid-template-columns:minmax(0,1fr); }
  .fb-steps { grid-template-columns:minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .fb-spin, .fb-shine { animation:none; }
  .fb-bar i { transition:none; }
}