:root{
  --bg:#FBFAF7;--bg2:#F2F1EC;--surface:#fff;--hair:rgba(28,48,80,.14);
  --ink:#16202C;--text:#3E4C5C;--mut:#6A7889;--platinum:#5A7196;
  --azure:#2150C8;--azure-soft:#2A5FE0;--azure-deep:#1C3A5E;
  --serif:"Fraunces",Georgia,serif;--sans:"Inter",system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:-30vmax;z-index:-2;background:radial-gradient(40vmax 34vmax at 14% 0,rgba(127,164,240,.10),transparent 60%),radial-gradient(44vmax 40vmax at 94% 8%,rgba(33,80,200,.05),transparent 62%)}
a{color:var(--azure);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:760px;margin:0 auto;padding:0 clamp(1.25rem,4vw,2rem)}
.wrap-wide{max-width:1080px;margin:0 auto;padding:0 clamp(1.25rem,4vw,2rem)}
header.site{display:flex;justify-content:space-between;align-items:center;padding:24px 0;border-bottom:1px solid var(--hair)}
.brand{font-family:var(--serif);font-size:1.2rem;color:var(--ink);display:inline-flex;align-items:center;gap:.5rem}
.brand:hover{text-decoration:none}
.dot{width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--azure-soft),var(--azure-deep));box-shadow:0 0 14px 1px rgba(127,164,240,.6)}
.nav a{color:var(--text);font-size:.95rem;margin-left:1.4rem}
.crumbs{font-size:.85rem;color:var(--mut);margin:1.8rem 0 .4rem}
.crumbs a{color:var(--platinum)}
.eyebrow{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--platinum);font-weight:500;margin:2.2rem 0 1rem}

/* article */
article h1{font-family:var(--serif);font-weight:300;font-size:clamp(1.9rem,1.2rem+2.4vw,3rem);line-height:1.1;letter-spacing:-.02em;color:var(--ink);margin:.4rem 0 0;text-wrap:balance}
.meta{display:flex;gap:1rem;align-items:center;font-size:.85rem;color:var(--mut);margin:1.1rem 0 0}
.meta .sep{width:4px;height:4px;border-radius:50%;background:var(--mut);opacity:.5}
.lead{font-family:var(--serif);font-weight:300;font-size:1.3rem;line-height:1.55;color:var(--ink);margin:1.8rem 0 0}
article h2{font-family:var(--serif);font-weight:400;font-size:1.5rem;color:var(--ink);margin:2.8rem 0 .9rem;letter-spacing:-.01em;text-wrap:balance}
article p{margin:0 0 1.1rem;font-size:1.06rem}
article p strong{color:var(--ink);font-weight:600}
.take{margin:2.4rem 0;border-left:0;border-radius:16px;padding:1.5rem 1.7rem;background:#F2F6FC;border:1px solid var(--hair)}
.take .lbl{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--azure);font-weight:600;margin-bottom:.5rem}
.take p{margin:0;font-family:var(--serif);font-size:1.18rem;font-style:italic;color:var(--ink);line-height:1.5}

/* faq */
.faq{margin-top:3rem}
.faq h2{margin-bottom:1.2rem}
.faq details{border:1px solid var(--hair);border-radius:14px;background:var(--surface);margin-bottom:.8rem;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:1.1rem 1.3rem;font-weight:600;color:var(--ink);font-size:1.02rem;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--azure);font-weight:400;font-size:1.4rem;line-height:1;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0;padding:0 1.3rem 1.2rem;color:var(--text);font-size:1rem}

/* cta */
.cta{text-align:center;margin:3.5rem 0 1rem;padding:clamp(2.2rem,5vw,3.2rem);border-radius:22px;background:linear-gradient(165deg,#F3F6FC,#ECF1F8);border:1px solid var(--hair);position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:-40% 20% auto 20%;height:60%;background:radial-gradient(50% 100% at 50% 0,rgba(127,164,240,.35),transparent 70%);filter:blur(20px)}
.cta h2{font-family:var(--serif);font-weight:300;font-size:1.7rem;color:var(--ink);margin:0 auto;max-width:24ch;position:relative}
.cta p{position:relative;color:var(--text);max-width:48ch;margin:1rem auto 0}
.btn{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.8rem;padding:1rem 2.1rem;border-radius:999px;background:linear-gradient(180deg,#2A5FE0,#2150C8);color:#fff;font-weight:600;position:relative;box-shadow:0 18px 40px -16px rgba(33,80,200,.55);transition:transform .35s var(--ease)}
.btn:hover{transform:translateY(-2px);text-decoration:none}

/* related */
.related{margin-top:3.2rem;border-top:1px solid var(--hair);padding-top:1.8rem}
.related .eyebrow{margin-top:0}
.rlist{display:grid;gap:.7rem}
.rlist a{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding:.9rem 0;border-bottom:1px solid var(--hair);color:var(--ink);font-weight:500}
.rlist a:hover{text-decoration:none;color:var(--azure)}
.rlist a .rt{font-size:.8rem;color:var(--mut);flex:none}

footer.site{border-top:1px solid var(--hair);padding:2.2rem 0 3rem;color:var(--mut);font-size:.85rem;text-align:center;margin-top:3rem}
footer.site a{color:var(--platinum)}

/* hub */
.hub-head{padding:clamp(2.4rem,6vh,4rem) 0 1rem}
.hub-head h1{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,1.3rem+2.6vw,3.2rem);line-height:1.08;letter-spacing:-.02em;color:var(--ink);margin:.6rem 0 0;text-wrap:balance}
.hub-head p{font-size:1.15rem;color:var(--text);max-width:54ch;margin-top:1.1rem}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.2rem;margin:2.4rem 0}
.card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--hair);border-radius:18px;padding:1.6rem 1.6rem 1.4rem;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.card:hover{transform:translateY(-3px);box-shadow:0 24px 50px -30px rgba(28,48,90,.4);text-decoration:none}
.card .rt{font-size:.76rem;letter-spacing:.04em;text-transform:uppercase;color:var(--platinum);font-weight:600}
.card h2{font-family:var(--serif);font-weight:400;font-size:1.28rem;color:var(--ink);margin:.7rem 0 .6rem;line-height:1.2}
.card p{font-size:.97rem;color:var(--text);margin:0;flex:1}
.card .more{margin-top:1.1rem;color:var(--azure);font-weight:600;font-size:.92rem}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}