/* Shared chrome for the feature landing pages. Palette and type scale are
   lifted from index.html so navigating between the hub and a spoke does not
   feel like landing on a different site. */
:root{--bg:#F7F6F3;--surface:#FFFFFF;--ink:#1B1F23;--muted:#5C6167;--line:#E4E2DC;
--accent:#0E7A66;--accent-b:#3FB39A;--dark:#15181B}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
font:17px/1.65 -apple-system,system-ui,'Segoe UI',sans-serif}
a{color:var(--accent)}
code{background:#EDEBE5;border-radius:5px;padding:1px 6px;font-size:14.5px}

/* Top bar — the internal-link spine that ties the cluster together. */
.bar{background:var(--dark);color:#E9E7E2;padding:14px 22px;display:flex;flex-wrap:wrap;
gap:10px 26px;align-items:center}
.bar .brand{color:#fff;font-weight:700;text-decoration:none;font-size:17px;letter-spacing:-.01em}
.bar .brand span{color:var(--accent-b);font-weight:500}
.bar nav{display:flex;flex-wrap:wrap;gap:6px 20px;margin-left:auto}
.bar nav a{color:#AEB4AC;text-decoration:none;font-size:14.5px}
.bar nav a:hover{color:#fff}
.bar nav a.here{color:#fff;font-weight:650;box-shadow:inset 0 -2px 0 var(--accent-b)}

main{max-width:760px;margin:0 auto;padding:0 22px 80px}
.kicker{color:var(--accent);font-weight:700;font-size:13px;letter-spacing:.09em;
text-transform:uppercase;margin:48px 0 0}
h1{font-size:clamp(29px,5.2vw,42px);line-height:1.14;letter-spacing:-.022em;
margin:.15em 0 .5em;text-wrap:balance}
section{margin:44px 0}
h2{font-size:clamp(21px,3.4vw,27px);letter-spacing:-.015em;margin:0 0 .45em;text-wrap:balance}
p{margin:.75em 0;color:#2B3035;max-width:66ch}
ul{padding-left:1.25em;max-width:66ch}
li{margin:.5em 0;color:#2B3035}
b{font-weight:660}

.faq details{background:var(--surface);border:1px solid var(--line);border-radius:12px;
padding:14px 18px;margin:10px 0}
.faq summary{cursor:pointer;font-weight:640;font-size:16px}
.faq p{margin:.6em 0 .1em;color:var(--muted);font-size:15.5px}

.rels{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px}
.rel{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:18px;
text-decoration:none;display:block}
.rel:hover{border-color:var(--accent-b)}
.rel b{display:block;color:var(--ink);font-size:16px;margin-bottom:4px}
.rel span{color:var(--muted);font-size:14px;line-height:1.45;display:block}

footer{border-top:1px solid var(--line);padding:26px 22px 60px;text-align:center;
font-size:13.5px;color:var(--muted)}
footer a{margin:0 10px}
footer span{display:block;margin-top:12px;font-size:12.5px;color:#8A9097}