/* Styles for join.html. Shared styles (menu, icons, progress line) are in assets/css/site.css. */
:root{--theme:#0f6e56;--theme-dk:#0a5240;--wash:#eef6f3;--mut:#828282;--divider:#e8e8e8}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:#000;font-family:"Roboto",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;font-weight:300;font-size:16px;line-height:1.65}
a{color:var(--theme);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible{outline:2px solid var(--theme);outline-offset:2px}
.navbar{position:fixed;top:0;left:0;right:0;z-index:20;background:rgba(255,255,255,.97);border-bottom:1px solid var(--divider);padding-top:env(safe-area-inset-top,0px)}
.nav-inner{max-width:930px;margin:0 auto;padding:0 15px;height:56px;display:flex;align-items:center;justify-content:space-between}
.brand{font-size:1.25rem;font-weight:300;color:#000}
.brand b{font-weight:700}
.brand:hover{text-decoration:none;color:#000}
.nav-links{display:flex;gap:2px}
.nav-links a{color:#000;padding:8px 9px;font-size:15px;font-weight:400}
.nav-links a:hover{color:var(--theme);text-decoration:none}
.container{max-width:640px;margin:0 auto;padding:calc(110px + env(safe-area-inset-top,0px)) 15px 40px}
h1{font-size:2.6rem;font-weight:300;margin:0 0 1.2rem;line-height:1.2}
.lead{font-size:1.2rem;line-height:1.6;color:#111;font-weight:400;margin:0 0 1rem}
p{margin:0 0 1rem;color:#333}
.cta{margin:1.8rem 0 .5rem}
.btn{display:inline-block;background:var(--theme);color:#fff;font-size:.82rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;padding:.75rem 1.5rem;border-radius:2px}
.btn:hover{background:var(--theme-dk);text-decoration:none}
.note{font-size:.88rem;color:var(--mut);margin:.6rem 0 0}
h2{font-size:.78rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:#111;margin:2.6rem 0 .7rem;padding-top:1rem;border-top:1px solid var(--divider)}
.small{font-size:.95rem}
footer{border-top:1px solid var(--divider);color:var(--mut);font-size:.8rem;text-align:center;padding:16px 15px calc(16px + env(safe-area-inset-bottom,0px));margin-top:40px}
@media(max-width:760px){
  .nav-links a{display:none}
  h1{font-size:2rem}
  .container{padding-top:calc(88px + env(safe-area-inset-top,0px))}
}

/* ===== Dark mode: dark-theme versions of the colors above ===== */
html[data-theme="dark"] {color-scheme:dark}
html[data-theme="dark"] {--theme:#62dabc;--theme-dk:#62dabc;--wash:#1e392f;--mut:#888f96;--divider:#35383b}
html[data-theme="dark"] body {background:#121314;color:#e4e6e7}
html[data-theme="dark"] .navbar {background:rgba(18,19,20,0.97)}
html[data-theme="dark"] .brand {color:#e4e6e7}
html[data-theme="dark"] .brand:hover {color:#e4e6e7}
html[data-theme="dark"] .nav-links a {color:#e4e6e7}
html[data-theme="dark"] .lead {color:#d5d8da}
html[data-theme="dark"] p {color:#b7bcbf}
html[data-theme="dark"] .btn {background:#0f6e56;color:#fff}
html[data-theme="dark"] h2 {color:#d5d8da}