/* =============================================================================
   EXTRA PAGES  |  About, Terms, Privacy and Cookie page layouts.
   HTML: index.html -> <!-- about/, terms/, privacy/, cookies/ -->     JS: (none)
   Edit only this file when you want to change how extra looks.
   ============================================================================= */

.crumb{display:flex;gap:.5rem;font-size:.85rem;color:var(--muted);margin:1.4rem 0}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--ink)}
.pghead{max-width:760px;margin-bottom:2rem}
.pghead h1{font-size:clamp(2rem,5vw,3.4rem);margin:.2rem 0 1rem}
.pghead p{color:var(--muted);font-size:1.05rem;margin:0}
.dnote{display:inline-block;margin-top:1rem;font-size:.8rem;padding:.3rem .8rem;border-radius:99px;background:rgba(142,198,65,.16);color:var(--green-d)}
.abt{display:grid;gap:1.5rem;align-items:center;margin-block:3rem}
@media(min-width:800px){
  .abt{grid-template-columns:1.1fr .9fr;gap:3rem}
}
.abt h2,.pgsec h2{font-size:clamp(1.6rem,3.4vw,2.3rem);margin-bottom:.9rem}
.abt p{color:var(--muted);margin:0 0 1rem}
.media{aspect-ratio:4/3;border-radius:28px;display:grid;place-items:center;color:var(--muted);font-size:.9rem;background:radial-gradient(circle at 25% 20%,rgba(142,198,65,.35),transparent 60%),var(--g-bg)}
.pgsec{margin-block:3rem}
.vals,.team{display:grid;gap:1rem;margin-top:1.4rem}
@media(min-width:760px){
  .vals,.team{grid-template-columns:repeat(3,1fr)}
}
.val,.mem{padding:1.6rem}
.val h3,.mem h3{font-size:1.2rem;margin-bottom:.5rem}
.val p,.mem p{margin:0;color:var(--muted);font-size:.95rem}
.ava{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--green),#1c1c1c);margin-bottom:1rem}
.band{padding:clamp(1.8rem,4vw,3rem);text-align:center;margin-block:3rem}
.band h2{font-size:clamp(1.5rem,3.4vw,2.2rem);margin-bottom:1.2rem}
.lgrid{display:grid;gap:1.2rem;align-items:start;margin-bottom:3rem}
@media(min-width:860px){
  .lgrid{grid-template-columns:240px 1fr}
  .toc{position:sticky;top:90px}
}
.toc{padding:1.2rem;display:grid;gap:.2rem}
.toc b{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
.toc a{color:var(--muted);text-decoration:none;padding:.4rem 0;font-size:.92rem}
.toc a:hover{color:var(--ink)}
.lbody{padding:clamp(1.4rem,4vw,2.6rem)}
.lbody section{margin:0 0 2rem}
.lbody section:last-child{margin:0}
.lbody h2{font-size:1.35rem;margin-bottom:.7rem}
.lbody p{color:var(--muted);margin:0 0 .8rem}