/* Page-specific styles for codes.html (codes page). Shared styles live in base.css. */

.fbd .hero{position:relative;text-align:center;padding:80px 24px 56px;overflow:hidden}
.fbd .hero>*{position:relative}
.fbd .hero h1{font-family:var(--display);font-weight:600;font-size:clamp(2.2rem,5vw,3.4rem);margin-top:12px;color:var(--ink)}
.fbd .hero p{max-width:620px;margin:18px auto 0;color:var(--ink-dim);font-size:1.05rem}
.fbd section{padding:56px 24px}
.fbd .wrap{max-width:1100px;margin:0 auto}
.fbd h2{font-family:var(--display);font-weight:600;font-size:clamp(1.7rem,3.5vw,2.2rem);margin-bottom:24px;color:var(--gold);text-align:center}
.fbd .codes{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px}
.fbd .code-card{background:var(--bg-card);border:1px solid rgba(203,161,78,.18);padding:30px 26px;display:flex;flex-direction:column;transition:border-color .25s}
.fbd .code-card:hover{border-color:var(--gold)}
.fbd .code-card h3{font-family:var(--display);font-size:1.5rem;font-weight:600;color:var(--ink)}
.fbd .code-card .what{color:var(--ink-dim);font-size:.95rem;margin:8px 0 14px;flex:1}
.fbd .codebox{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.fbd .codebox .code{font-family:monospace;font-size:1.05rem;letter-spacing:.1em;color:var(--gold);border:1px dashed var(--gold-soft);padding:8px 14px;background:rgba(203,161,78,.06)}
.fbd .btn{display:inline-block;padding:11px 24px;border:1px solid var(--gold);letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;color:var(--gold);transition:all .25s;text-align:center}
.fbd .disclosure{text-align:center;color:var(--ink-dim);font-size:.88rem;max-width:640px;margin:40px auto 0;border-top:1px solid rgba(203,161,78,.15);padding-top:24px}