/* Shared components — FAQ, email capture, paywall CTA, welcome banner.
   Relies on the CSS variables every page already defines (--card, --line, --ink,
   --muted, --accent, --serif, --teal-*, --shadow-lift). */

/* ── FAQ ── */
.faq{margin:0 0 4.5rem}
.faq h2{margin-bottom:.7rem}
.faq .lede{margin-bottom:1.8rem}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:.6rem;
transition:border-color .18s ease}
.faq details[open]{border-color:var(--accent)}
.faq summary{list-style:none;cursor:pointer;padding:1.05rem 1.3rem;font-weight:640;font-size:1.02rem;
letter-spacing:-.01em;display:flex;justify-content:space-between;align-items:center;gap:1rem;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;font-weight:400;color:var(--muted);line-height:1;flex-shrink:0;
transition:transform .18s ease}
.faq details[open] summary::after{content:"–"}
.faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:12px}
.faq .ans{padding:0 1.3rem 1.2rem;font-size:.97rem;color:var(--muted);line-height:1.65}
.faq .ans p{margin:0 0 .8rem}
.faq .ans p:last-child{margin-bottom:0}
.faq .ans a{color:var(--accent)}
.faq .ans strong{color:var(--ink);font-weight:640}

/* ── Email capture ── */
.signup{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.7rem 1.8rem;margin:0 0 4rem}
.signup .su-h{font-family:var(--serif);font-size:1.32rem;font-weight:600;letter-spacing:-.012em;margin:0 0 .35rem;line-height:1.25}
.signup .su-p{font-size:.95rem;color:var(--muted);margin:0 0 1.1rem;line-height:1.55}
.su-row{display:flex;gap:.6rem;flex-wrap:wrap}
.su-row input[type=email]{flex:1 1 15rem;min-width:0;font:inherit;font-size:1rem;padding:.8rem 1rem;
border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink)}
.su-row input[type=email]:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.su-row button{font:inherit;font-weight:640;font-size:.98rem;padding:.8rem 1.4rem;border:0;border-radius:9px;
background:var(--ink);color:var(--bg);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
.su-row button:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.su-row button:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none}
.su-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.su-note{font-size:.8rem;color:var(--muted);margin:.8rem 0 0}
.su-note a{color:var(--muted)}
.su-msg{font-size:.92rem;margin:.8rem 0 0;min-height:1.2em}
.su-msg.ok{color:var(--teal-line);font-weight:640}
.su-msg.err{color:var(--red-line,#a32d2d);font-weight:640}
.signup.done .su-row,.signup.done .su-note{display:none}

/* ── Paywall call-to-action (end of the free content) ── */
.paywall{background:var(--card);border:1px solid var(--accent);border-radius:16px;padding:2rem 1.9rem;margin:3.5rem 0 1.5rem}
.paywall h2,.paywall .pw-h{font-family:var(--serif);font-size:1.6rem;font-weight:600;letter-spacing:-.015em;
line-height:1.2;margin:0 0 .7rem}
.paywall p{margin:0 0 1.1rem;color:var(--muted)}
.pw-row{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
.pw-btn{display:inline-block;background:var(--ink);color:var(--bg);text-decoration:none;font-weight:640;
padding:.9rem 1.6rem;border-radius:10px;transition:transform .18s ease,box-shadow .18s ease}
.pw-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.pw-link{color:var(--accent);font-weight:600;text-decoration:none}
.pw-link:hover{text-decoration:underline}

/* ── Welcome banner (shown once, right after paying) ── */
.welcome{background:var(--teal-bg);border:1px solid var(--teal-line);border-radius:14px;padding:1.4rem 1.5rem;
margin:0 0 2.5rem;color:var(--teal-ink)}
.welcome h2{font-family:var(--serif);font-size:1.35rem;font-weight:600;margin:0 0 .5rem;color:var(--teal-ink)}
.welcome p{margin:0 0 .9rem;font-size:.95rem;line-height:1.55}
.welcome p:last-child{margin-bottom:0}
.wl-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.wl-row input{flex:1 1 16rem;min-width:0;font:inherit;font-size:.85rem;padding:.65rem .8rem;border:1px solid var(--teal-line);
border-radius:8px;background:var(--card);color:var(--ink)}
.wl-row button{font:inherit;font-weight:640;font-size:.9rem;padding:.65rem 1.1rem;border:0;border-radius:8px;
background:var(--teal-line);color:var(--card);cursor:pointer}
[hidden]{display:none!important}

@media (prefers-reduced-motion:reduce){.faq details,.faq summary::after,.su-row button,.pw-btn{transition:none!important}}
@media (max-width:34rem){
.signup,.paywall{padding:1.35rem}
.su-row button{width:100%}
.faq summary{padding:.95rem 1.05rem;font-size:.98rem}
.faq .ans{padding:0 1.05rem 1.1rem}
}