/* Styles for the Google-readable info pages (/membership/, /about/, ...). The app itself uses styles.css. */
:root{
  --pine:#0F5132; --pine-deep:#082E1E; --pine-50:#EEF6F1; --line:#DCE7E0;
  --gold:#D4AF37; --marigold:#F08C00; --rani:#D6336C; --peacock:#1971C2; --teal:#0CA678; --violet:#7048E8;
  --ink:#13211A; --muted:#56675D; --bg:#FFFFFF; --bg-alt:#F4F9F6;
  --display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --sans:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);font-size:17px;line-height:1.65;color:var(--ink);background:var(--bg)}
img{max-width:100%;height:auto}
a{color:var(--pine)}
.wrap{max-width:860px;margin:0 auto;padding-inline:16px}
.ph-top{height:6px;background:linear-gradient(90deg,var(--marigold),var(--rani),var(--violet),var(--peacock),var(--teal))}
header.ph{border-bottom:1px solid var(--line);background:#fff}
.ph-bar{display:flex;align-items:center;gap:12px;padding-block:12px;flex-wrap:wrap}
.ph-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--pine-deep);font:800 1.15rem/1.15 var(--display);letter-spacing:-.02em;margin-right:auto}
.ph-brand small{display:block;font:700 .72rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--marigold)}
.ph-nav{display:flex;gap:4px 14px;flex-wrap:wrap;font-weight:600;font-size:.95rem}
.ph-nav a{text-decoration:none;color:var(--ink);padding:4px 0;border-bottom:2px solid transparent}
.ph-nav a:hover,.ph-nav a[aria-current]{border-color:var(--rani)}
.btn{display:inline-block;padding:11px 20px;border-radius:12px;font-weight:700;text-decoration:none;line-height:1.2}
.btn-main{background:var(--pine);color:#fff}
.btn-gold{background:var(--gold);color:var(--pine-deep)}
.btn-line{border:2px solid var(--pine);color:var(--pine)}
main{padding-block:36px 56px}
.kicker{display:block;font:800 .78rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--rani);margin-bottom:6px}
h1,h2,h3{font-family:var(--display);line-height:1.15;letter-spacing:-.02em;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(1.9rem,5vw,2.7rem);color:var(--pine-deep)}
h2{font-size:1.5rem;margin-top:1.8em;color:var(--pine-deep)}
h3{font-size:1.15rem;margin-top:1.2em}
.lead{font-size:1.15rem;color:var(--muted)}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0}
.box{background:var(--bg-alt);border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin:22px 0}
.box p:last-child,.box ul:last-child{margin-bottom:0}
.steps{counter-reset:s;list-style:none;padding:0;display:grid;gap:12px}
.steps li{counter-increment:s;position:relative;padding:14px 16px 14px 60px;border:1px solid var(--line);border-radius:14px}
.steps li::before{content:counter(s);position:absolute;left:14px;top:14px;width:32px;height:32px;border-radius:50%;background:var(--pine);color:#fff;display:grid;place-items:center;font:800 1rem var(--display)}
.steps b{display:block}
.grid2{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin:18px 0}
.card{border:1px solid var(--line);border-top:5px solid var(--c,var(--pine));border-radius:14px;padding:16px 18px}
.card h3{margin-top:0}
.card p{margin:0;color:var(--muted)}
details{border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin:10px 0;background:#fff}
summary{cursor:pointer;font-weight:700}
details p{margin:10px 0 0;color:var(--muted)}
.crumbs{font-size:.88rem;color:var(--muted);margin-bottom:14px}
.crumbs a{color:var(--muted)}
footer.ph{background:var(--pine-deep);color:#DDEEE3;padding-block:32px;font-size:.92rem}
footer.ph a{color:#fff}
.ph-foot{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.ph-foot ul{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.ph-foot h4{margin:0 0 8px;font:800 .8rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
@media (max-width:620px){.ph-nav{width:100%;font-size:.9rem}.btn{padding:10px 16px}}