:root{
  --ground:#FFFFFF;--mist:#F4F5F7;--paper:#FFFFFF;
  --ink:#131315;--ink-2:#4C4F55;--ink-3:#6B6F77;
  --line:#E6E8EC;--line-2:#D3D7DE;
  --water:#0B5FCC;--ok:#15914F;
  --sun:#FFD84D;--sun-2:#FFE88A;--sun-3:#FFF6D4;
  --sun-ink:#141310;--sun-ink-2:#5C5947;--sun-line:rgba(20,19,16,.14);
  --r-xl:28px;--r-lg:22px;--r-md:16px;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#0D0D0F;--mist:#17181B;--paper:#141518;
  --ink:#F1F2F4;--ink-2:#A9ADB5;--ink-3:#7C818A;
  --line:#25272C;--line-2:#363940;--water:#79ACFF;--ok:#46C784;
}}
:root[data-theme="dark"]{
  --ground:#0D0D0F;--mist:#17181B;--paper:#141518;
  --ink:#F1F2F4;--ink-2:#A9ADB5;--ink-3:#7C818A;
  --line:#25272C;--line-2:#363940;--water:#79ACFF;--ok:#46C784;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--ground);color:var(--ink);
  font-family:Raleway,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:1.0625rem;font-weight:500;line-height:1.62;-webkit-font-smoothing:antialiased;
}
img{max-width:100%}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.025em;line-height:1.12;text-wrap:balance}
p{margin:0}
a{color:var(--water)}
:where(a,button):focus-visible{outline:3px solid var(--water);outline-offset:3px;border-radius:10px}
.wrap{width:min(100% - 2rem,46rem);margin-inline:auto}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}

.top{background:linear-gradient(172deg,var(--sun) 0%,var(--sun-2) 60%,var(--sun-3) 90%,var(--ground) 100%);
     color:var(--sun-ink);padding-block:1.4rem 2.6rem}
.crumb{display:flex;align-items:center;gap:.5rem;font-family:"IBM Plex Mono",monospace;
       font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sun-ink-2)}
.crumb a{color:var(--sun-ink-2);text-decoration:none;border-bottom:1px solid var(--sun-line)}
.crumb a:hover{color:var(--sun-ink)}
.top h1{font-size:clamp(1.9rem,5.2vw,2.75rem);margin-top:1.3rem;max-width:20ch}
.top .lede{margin-top:.9rem;color:var(--sun-ink-2);font-weight:600;max-width:46ch}
.top .act{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.5rem}

.btn{display:inline-flex;align-items:center;gap:.45rem;font-weight:700;font-size:.97rem;
     text-decoration:none;padding:.75rem 1.25rem;border-radius:99px;border:1px solid transparent;cursor:pointer}
.btn--ink{background:var(--sun-ink);color:var(--sun-2)}
.btn--ink:hover{opacity:.88}
.btn--out{background:rgba(255,255,255,.5);color:var(--sun-ink);border-color:var(--sun-line)}
.btn--out:hover{background:rgba(255,255,255,.8)}

main{padding-block:2.6rem 1rem}
section + section{margin-top:2.4rem}
h2{font-size:1.45rem;margin-bottom:.9rem}
h3{font-size:1.06rem;font-weight:700;letter-spacing:-.012em}
.lead{font-size:1.1rem;color:var(--ink-2);font-weight:600}
.body p + p{margin-top:.8rem}
.body ul{margin:.8rem 0 0;padding-left:1.1rem;color:var(--ink-2)}
.body li + li{margin-top:.45rem}
.body li::marker{color:var(--sun)}

.cards{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.card{background:var(--mist);border-radius:var(--r-lg);padding:1.1rem 1.2rem}
.card h3{margin-bottom:.35rem}
.card p{font-size:.93rem;color:var(--ink-2)}

.fact{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));margin-top:1rem}
.fact div{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:.85rem 1rem}
.fact b{display:block;font-family:"IBM Plex Mono",monospace;font-size:1.3rem;font-weight:600;letter-spacing:-.02em}
.fact span{font-size:.84rem;color:var(--ink-3)}

.cta{background:var(--sun-3);border-radius:var(--r-xl);padding:1.6rem;margin-top:2.6rem;color:#4A3B00}
:root[data-theme="dark"] .cta{background:#2C2510;color:#F3DC9A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cta{background:#2C2510;color:#F3DC9A}}
.cta h2{color:inherit;font-size:1.3rem}
.cta p{margin-top:.5rem;font-weight:600}
.cta .act{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.2rem}
.cta .btn--ink{background:#141310;color:#FFE88A}

.other{margin-top:2.6rem;border-top:1px solid var(--line);padding-top:1.5rem}
.other h2{font-size:1.1rem;color:var(--ink-3);font-weight:700;letter-spacing:.02em}
.other ul{list-style:none;margin:.9rem 0 0;padding:0;display:grid;gap:.5rem;
          grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.other a{display:block;background:var(--mist);border-radius:var(--r-md);padding:.75rem .95rem;
         text-decoration:none;color:var(--ink);font-weight:700;font-size:.95rem}
.other a:hover{background:var(--sun-3);color:#4A3B00}

footer{margin-top:3rem;border-top:1px solid var(--line);padding-block:1.6rem 3rem;
       font-size:.86rem;color:var(--ink-3);line-height:1.7}
footer a{color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}