/* Clearwater Roleplay. Gulf-blue badge identity: condensed uppercase headings, brand blue from the logo, sand accent. */
:root{
  --brand:#1c6fd1; --brand-deep:#0f4a96; --brand-ink:#0c3d7d;
  --bg:#f3f7fc; --surface:#ffffff; --surface-2:#e8f0fa; --ink:#0d1f33; --muted:#4f6378; --line:#d4e0ee;
  --sand:#f6c35b; --ok:#167a43; --ok-bg:#e1f5ea; --no:#b42318; --no-bg:#fde8e6; --soon:#8a5a00; --soon-bg:#fff2d6;
  --discord:#4752c4; --night:#071526;
  --display:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --gutter:max(20px,env(safe-area-inset-left,0px));
  --gutter-r:max(20px,env(safe-area-inset-right,0px));
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --brand:#4a98f2; --brand-deep:#0b3a78; --brand-ink:#9cc6fa; --bg:#07111d; --surface:#0d1c2d; --surface-2:#13263c; --ink:#e6eef8; --muted:#9bb0c6; --line:#1d334c;
  --ok:#5fd394; --ok-bg:#0f3322; --no:#ff8a7f; --no-bg:#3a1512; --soon:#f6c35b; --soon-bg:#3a2c0d; color-scheme:dark}}
:root[data-theme="dark"]{
  --brand:#4a98f2; --brand-deep:#0b3a78; --brand-ink:#9cc6fa; --bg:#07111d; --surface:#0d1c2d; --surface-2:#13263c; --ink:#e6eef8; --muted:#9bb0c6; --line:#1d334c;
  --ok:#5fd394; --ok-bg:#0f3322; --no:#ff8a7f; --no-bg:#3a1512; --soon:#f6c35b; --soon-bg:#3a2c0d; color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:17px/1.6 var(--body);margin:0}
img{display:block;max-width:100%}
a{color:inherit}
code{font:600 .9em var(--mono);background:var(--surface-2);padding:1px 6px;border-radius:4px}
.wrap{max-width:1180px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter-r)}
.narrow{max-width:820px}
h1,h2,h3{font-family:var(--display);text-transform:uppercase;line-height:.95;margin:0;text-wrap:balance}
:focus-visible{outline:3px solid var(--sand);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:#fff;color:#000;padding:8px 12px;border-radius:6px}
.skip:focus{left:12px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* announcement + nav */
.announce{background:var(--sand);color:#3a2700;font-weight:600;font-size:15px}
.announce .wrap{padding-block:8px}
.announce a{color:#3a2700}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:40;background:var(--brand-deep)}
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:color-mix(in srgb,var(--brand-deep) 94%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff}
.nav .wrap{display:flex;align-items:center;gap:18px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 23px/1 var(--display);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.brand img{width:36px;height:36px}
.links{display:flex;gap:2px;margin-left:auto;align-items:center}
.links a{text-decoration:none;font-weight:600;font-size:15px;padding:8px 11px;border-radius:6px;color:#d5e5fb}
.links a:hover{background:#ffffff1a;color:#fff}
.links a[aria-current="page"]{color:#fff;box-shadow:inset 0 -2px 0 var(--sand);border-radius:6px 6px 0 0}
.links .nav-cad{border:1px solid #ffffff40;margin-left:6px}
.menu{display:none;background:none;border:0;color:#fff;padding:8px;margin-left:4px;cursor:pointer}
.menu svg{width:26px;height:26px}
@media (max-width:1020px){
  .menu{display:block}
  .nav-cta{margin-left:auto}
  .links{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--brand-deep);padding:8px var(--gutter-r) 16px var(--gutter);display:none;box-shadow:0 18px 30px -18px #000a}
  .nav.open .links{display:flex}
  .links a{padding:13px 4px;border-radius:0;border-bottom:1px solid #ffffff14}
  .links a[aria-current="page"]{box-shadow:none;color:var(--sand)}
  .links .nav-cad{border:0;margin:0}
}
@media (max-width:420px){.brand span{display:none}.nav-cta span{display:none}.nav-cta{padding:10px 12px!important}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 20px;border-radius:8px;font:700 16px/1 var(--body);text-decoration:none;border:0;cursor:pointer;white-space:nowrap;transition:transform .12s,filter .12s,box-shadow .12s}
.btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.btn svg{width:19px;height:19px;flex:none}
.btn-sm{padding:10px 14px;font-size:15px}
.btn-discord{background:var(--discord);color:#fff}
.btn-primary{background:var(--brand-deep);color:#fff}
.btn-white{background:#fff;color:#0f4a96}
.btn-line{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px #ffffff70}
.btn-line:hover{box-shadow:inset 0 0 0 2px #fff}
.btn-ghost{background:var(--surface-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--brand)}
.nav .btn{padding:10px 15px;font-size:15px}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.ctas.center,.center{justify-content:center;text-align:center}

/* hero */
.hero{position:relative;color:#fff;overflow:hidden;background:#0a2a52;isolation:isolate}
.hero-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease;z-index:-2}
.hero-slides img.on{opacity:1}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,#0b3a78e6 0%,#0f4a96c7 40%,#1c6fd133 75%,#0a1d3526 100%),linear-gradient(0deg,#07182ecc,transparent 50%)}
.hero-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center;padding-block:84px 104px}
.hero h1{font-size:clamp(50px,9vw,128px);font-weight:800;line-height:.86}
.hero h1 em{font-style:italic;color:var(--sand);display:block}
.tagline{font-size:clamp(17px,1.9vw,21px);max-width:44ch;margin:22px 0 30px;color:#e3eefc;line-height:1.5}
.hero-logo{width:clamp(170px,22vw,290px);filter:drop-shadow(0 12px 30px #00000055)}
.eyebrow-live{display:inline-flex;align-items:center;gap:9px;margin:0 0 18px;padding:7px 13px;border-radius:999px;background:#ffffff1f;font-weight:600;font-size:14px;letter-spacing:.02em}
.dot{width:9px;height:9px;border-radius:50%;background:#3ccf7d;box-shadow:0 0 0 0 #3ccf7d88;animation:pulse 2s infinite}
.dot.off{background:#ff8a7f;animation:none}
@keyframes pulse{70%{box-shadow:0 0 0 9px #3ccf7d00}100%{box-shadow:0 0 0 0 #3ccf7d00}}
@media (max-width:820px){.hero-in{grid-template-columns:minmax(0,1fr);padding-block:52px 84px}.hero-logo{grid-row:1;width:120px}}
@media (max-width:480px){.hero .ctas .btn{flex:1 1 100%}}

/* server bar */
.serverbar{position:relative;z-index:2;margin-top:-46px}
.sb{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px -22px #0b2a5250;display:grid;grid-template-columns:1.15fr 1.1fr 1fr .8fr;overflow:hidden}
.sb>div{padding:18px 22px;border-left:1px solid var(--line);min-width:0}
.sb>div:first-child{border-left:0;background:var(--surface-2)}
.sb small{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.sb strong{font-size:17px;display:block;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.sb .dim{color:var(--muted);font-weight:500}
.sb-code>div{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sb-code span{font:600 27px/1 var(--mono);color:var(--brand);letter-spacing:.06em}
.vc{display:inline-flex!important;align-items:center;gap:6px}
.vc svg{width:18px;height:18px;color:var(--brand)}
.copy{border:1px solid var(--line);background:var(--surface);color:var(--ink);font:600 14px var(--body);padding:8px 14px;border-radius:6px;cursor:pointer}
.copy:hover{border-color:var(--brand)}
@media (max-width:900px){.sb{grid-template-columns:1fr 1fr}.sb>div:nth-child(3){border-left:0}.sb>div:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:480px){.sb{grid-template-columns:minmax(0,1fr)}.sb>div{border-left:0;border-top:1px solid var(--line)}.sb>div:first-child{border-top:0}}

/* sections */
section{padding-block:84px}
section.tight{padding-block:44px 80px}
.band{background:var(--surface);border-block:1px solid var(--line)}
.head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:34px}
.head h2,.phead h1{font-size:clamp(40px,6vw,70px);font-weight:800}
.head h2 span,.phead h1 span,.live-grid h2 span,.ov-promo h2 span,.map-grid h2 span{color:var(--brand)}
.head p{margin:0;max-width:48ch;color:var(--muted)}
.kick{display:block;font:700 13px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--brand);margin-bottom:12px}
.lead{color:var(--muted);max-width:52ch;font-size:18px}
.more{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--brand);text-decoration:none}
.more svg{width:18px;height:18px}
.more:hover{text-decoration:underline}
.h2s{font-size:clamp(32px,4vw,46px);font-weight:800;margin-bottom:26px}
.muted-sm{color:var(--muted);font-size:14px}
.pill{font-size:14px;font-weight:600;padding:7px 13px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line)}
.rule-note{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}

/* page head */
.phead{background:linear-gradient(110deg,var(--brand-deep),#0b3a78 55%,var(--brand));color:#fff;padding-block:64px 56px;position:relative;overflow:hidden}
.phead::after{content:"";position:absolute;right:-40px;top:50%;width:300px;height:300px;transform:translateY(-50%);background:url(/assets/logo_white.webp) center/contain no-repeat;opacity:.1}
.phead .kick{color:var(--sand)}
.phead h1 span{color:var(--sand)!important}
.phead p{margin:18px 0 0;max-width:60ch;color:#dce9fb;font-size:18px;position:relative;z-index:1}

/* stats */
.stats-band{padding-block:40px 8px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.stats div{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.stats b{display:block;font:800 40px/1 var(--display);color:var(--brand);font-variant-numeric:tabular-nums}
.stats span{color:var(--muted);font-size:15px;font-weight:600}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* features */
.feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.feat>div{padding:24px 26px 26px 0;border-bottom:1px solid var(--line)}
.feat>div:not(:nth-child(3n+1)){padding-left:26px;border-left:1px solid var(--line)}
.feat h3{font-size:25px;font-weight:800;margin-bottom:8px}
.feat p{margin:0;color:var(--muted);font-size:16px}
.feat-3{margin-top:40px}
@media (max-width:860px){.feat{grid-template-columns:minmax(0,1fr)}.feat>div,.feat>div:not(:nth-child(3n+1)){padding:20px 0;border-left:0}}

/* live feed */
.live-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center}
.live-grid h2{font-size:clamp(40px,5.5vw,64px);font-weight:800;margin-bottom:14px}
.live-grid .btn{margin-top:22px}
.feed{background:var(--night);color:#dbe8f8;border-radius:14px;overflow:hidden;border:1px solid #1d334c;min-width:0}
.feed-top{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid #ffffff14}
.feed-top b{font:800 19px/1 var(--display);text-transform:uppercase;letter-spacing:.04em;color:#fff}
.pill-live{font:700 12px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:#ffffff14}
.pill-live.on{background:#14532d;color:#86efac}
.pill-live.off{background:#3a1512;color:#ffb4ab}
.feed-log{max-height:330px;overflow:auto;padding:6px 0}
.feed-log div{display:grid;grid-template-columns:62px 46px minmax(0,1fr);gap:10px;padding:9px 18px;font-size:15px;border-bottom:1px solid #ffffff0a}
.feed-log time{font:600 13px/1.6 var(--mono);color:#8ea6c2}
.feed-log .tag{font:700 11px/1 var(--body);letter-spacing:.06em;align-self:start;margin-top:3px;padding:4px 0;border-radius:4px;text-align:center;background:#7f1d1d;color:#fecaca}
.feed-log .tag.dot-t{background:#713f12;color:#fde68a}
.feed-empty{padding:18px;margin:0;color:#8ea6c2}
@media (max-width:860px){.live-grid{grid-template-columns:minmax(0,1fr);gap:28px}}

/* departments */
.depts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:1000px){.depts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.depts{grid-template-columns:minmax(0,1fr)}}
.dept{display:flex;flex-direction:column;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px;min-width:0;scroll-margin-top:90px}
.dept-top{display:flex;gap:14px;align-items:center}
.dept .badge{width:64px;height:64px;object-fit:contain;flex:none}
.dept-id{min-width:0}
.cat{display:block;font:700 12px/1.2 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.dept h3{font-size:27px;font-weight:800;margin-top:4px}
.dept p{margin:0;color:var(--muted);font-size:16px}
.apps{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;font:700 13px/1 var(--body);padding:7px 11px;border-radius:999px}
.apps i{width:8px;height:8px;border-radius:50%;background:currentColor}
.apps-ok{background:var(--ok-bg);color:var(--ok)}
.apps-no{background:var(--no-bg);color:var(--no)}
.apps-soon{background:var(--soon-bg);color:var(--soon)}
.head-row,.dept .head{display:flex;align-items:center;gap:11px;padding:10px 12px;background:var(--surface-2);border-radius:9px;margin:0}
.dept .head img{width:40px;height:40px;border-radius:50%;flex:none}
.dept .head small{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.dept .head b{display:block;font-size:16px;line-height:1.25}
.acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:auto;padding-top:4px}

/* teams */
.teams{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:900px){.teams{grid-template-columns:minmax(0,1fr)}}
.team{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:22px;scroll-margin-top:90px;display:flex;flex-direction:column;gap:8px}
.team h3{font-size:28px;font-weight:800}
.team p{margin:0;color:var(--muted)}
.team ul{margin:6px 0 4px;padding-left:20px;font-size:15px}
.team li{margin-bottom:4px}
.team .more{margin-top:auto}
.teams-cta{margin-top:24px}

/* map */
.map-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:44px;align-items:center}
.map-grid h2{font-size:clamp(40px,5vw,60px);font-weight:800;margin-bottom:14px}
.districts{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px}
.districts li{display:flex;flex-direction:column;gap:2px;color:var(--muted)}
.districts b{font:800 21px/1 var(--display);text-transform:uppercase}
.d1{color:#2f8ef0}.d2{color:#e8701e}.d3{color:#e0353b}
.map{border:0;padding:0;background:none;cursor:zoom-in;border-radius:14px;overflow:hidden;box-shadow:0 20px 40px -24px #000a}
@media (max-width:860px){.map-grid{grid-template-columns:minmax(0,1fr)}}

/* gallery */
.photo-band{background:var(--brand-deep);color:#fff}
.photo-band .head h2 span{color:var(--sand)}
.photo-band .kick{color:var(--sand)}
.photo-band .more{color:#fff}
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:190px;gap:10px}
.strip .big{grid-column:span 2;grid-row:span 2}
.shot{position:relative;border:0;padding:0;background:#0a2a52;border-radius:10px;overflow:hidden;cursor:zoom-in;display:block;width:100%}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.shot:hover img{transform:scale(1.04)}
.shot span{position:absolute;left:10px;bottom:10px;right:10px;text-align:left;font:700 13px/1.2 var(--body);background:#071a30d9;color:#fff;padding:7px 10px;border-radius:6px;width:max-content;max-width:calc(100% - 20px)}
@media (max-width:760px){.strip{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:140px}}
.masonry{columns:3 320px;column-gap:14px}
.masonry .shot{margin-bottom:14px;break-inside:avoid}
.masonry .shot img{height:auto}

/* overlay */
.ov-promo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.ov-promo h2{font-size:clamp(40px,5vw,62px);font-weight:800;margin-bottom:14px}
.ov-promo .ctas{margin-top:24px}
.ov-shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:end}
.ov-shots img{border-radius:12px;box-shadow:0 16px 30px -18px #000a}
.ov-shots img:nth-child(2){transform:translateY(-22px)}
@media (max-width:860px){.ov-promo{grid-template-columns:minmax(0,1fr)}}
.ov-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px}
.ov-shot{border:0;background:none;padding:0;cursor:zoom-in;color:var(--ink);display:flex;flex-direction:column;gap:8px;align-items:center;font:600 15px var(--body)}
.ov-shot img{border-radius:12px;box-shadow:0 12px 26px -18px #000a}

/* leadership */
.tier{margin-bottom:40px}
.tier-h{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:16px;padding-bottom:10px;border-bottom:2px solid var(--line)}
.tier-h h2{font-size:clamp(28px,3.4vw,38px);font-weight:800;color:var(--brand)}
.tier-h p{margin:0;color:var(--muted)}
.owners{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:860px){.owners{grid-template-columns:minmax(0,1fr)}}
.owner{display:flex;align-items:center;gap:18px;background:linear-gradient(120deg,var(--brand-deep),#0b3a78 60%,var(--brand));color:#fff;border-radius:14px;padding:22px;min-width:0}
.owner img{width:84px;height:84px;border-radius:50%;box-shadow:0 0 0 4px #ffffff44;flex:none}
.owner .cs{font:600 15px/1 var(--mono);color:var(--sand)}
.owner b{display:block;font:800 36px/1 var(--display);text-transform:uppercase;margin-top:6px;overflow-wrap:anywhere}
.team-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:960px){.team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:440px){.team-grid{grid-template-columns:minmax(0,1fr)}}
.member{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:10px;min-width:0}
.member img{width:44px;height:44px;border-radius:50%;flex:none}
.member div{min-width:0}
.member b{display:block;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.member .cs{display:block;color:var(--muted);font:600 13px var(--mono)}
.heads{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:960px){.heads{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.heads{grid-template-columns:minmax(0,1fr)}}
.hcard{display:flex;align-items:center;gap:14px;padding:16px;background:var(--bg);border:1px solid var(--line);border-radius:12px;text-decoration:none;min-width:0}
.hcard:hover{border-color:var(--brand)}
.hcard>img:first-child{width:56px;height:56px;border-radius:50%;flex:none}
.hcard div{min-width:0;flex:1}
.hcard small{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}
.hcard b{display:block;font-size:17px;line-height:1.25;overflow-wrap:anywhere}
.hcard span{display:block;color:var(--muted);font-size:14px}
.hbadge{width:34px;height:34px;object-fit:contain;flex:none;opacity:.9}
.cta-box{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:28px;border-radius:14px;background:var(--surface-2)}
.cta-box h2{font-size:clamp(28px,3.4vw,38px);font-weight:800}
.cta-box p{margin:6px 0 0;color:var(--muted)}

/* rules */
.subnav{position:sticky;top:calc(env(safe-area-inset-top,0px) + 64px);z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.subnav .wrap{display:flex;gap:6px;overflow-x:auto;padding-block:10px;scrollbar-width:none}
.subnav a{flex:none;text-decoration:none;font-weight:600;font-size:15px;padding:7px 13px;border-radius:999px;background:var(--surface-2)}
.subnav a:hover{background:var(--brand);color:#fff}
section[id]{scroll-margin-top:130px}
.rules{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 34px;counter-reset:r}
@media (max-width:900px){.rules{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.rules{grid-template-columns:minmax(0,1fr)}}
.rules li{counter-increment:r;display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;padding:16px 0;border-top:1px solid var(--line)}
.rules li::before{content:counter(r,decimal-leading-zero);font:800 26px/1 var(--display);color:var(--brand)}
.rules h3{font:700 17px/1.25 var(--body);text-transform:none;margin-bottom:3px}
.rules abbr{text-decoration:none;font:600 12px var(--mono);color:var(--muted)}
.rules p{margin:0;color:var(--muted);font-size:15px;line-height:1.5}
.notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:860px){.notes{grid-template-columns:minmax(0,1fr)}}
.notes div{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:18px 20px}
.notes b{display:block;font:800 21px/1.1 var(--display);text-transform:uppercase;margin-bottom:6px}
.notes p{margin:0;color:var(--muted);font-size:15px}
.tr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:900px){.tr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.tr-grid{grid-template-columns:minmax(0,1fr)}}
.tr{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.band .tr{background:var(--bg)}
.tr h3{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:800;margin-bottom:10px}
.tr h3 span{font:700 13px/1 var(--mono);background:var(--brand-deep);color:#fff;width:26px;height:26px;border-radius:6px;display:grid;place-items:center;flex:none}
.tr ul{margin:0;padding-left:18px;color:var(--muted);font-size:15px}
.tr li{margin-bottom:5px}

/* join */
.steps{list-style:none;padding:0;margin:0 0 30px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;counter-reset:s}
.steps-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.steps li{counter-increment:s;padding:0 22px;border-left:1px solid var(--line);min-width:0}
.steps li:first-child{border-left:0;padding-left:0}
.steps li::before{content:counter(s,decimal-leading-zero);display:block;font:800 46px/1 var(--display);color:var(--brand);margin-bottom:10px}
.steps h3{font-size:24px;font-weight:800;margin-bottom:6px}
.steps p{margin:0;color:var(--muted);font-size:16px}
@media (max-width:900px){.steps,.steps-4{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:26px}.steps li:nth-child(3){border-left:0;padding-left:0}}
@media (max-width:520px){.steps,.steps-4{grid-template-columns:minmax(0,1fr)}.steps li{border-left:0;padding-left:0}}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:17px 34px 17px 0;font-weight:700;font-size:18px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:12px;font:400 28px/1 var(--body);color:var(--brand)}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 18px;color:var(--muted);max-width:65ch}
.res{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:860px){.res{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.res{grid-template-columns:minmax(0,1fr)}}
.res a{display:flex;justify-content:space-between;align-items:center;gap:12px;text-decoration:none;padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:10px}
.res a:hover{border-color:var(--brand)}
.res b{display:block}
.res span{display:block;font-size:14px;color:var(--muted)}
.res svg{width:20px;height:20px;color:var(--brand);flex:none}

/* final + footer */
.final{background:linear-gradient(100deg,var(--brand-deep) 0%,var(--brand-deep) 45%,var(--brand) 100%);color:#fff;position:relative;overflow:hidden;padding-block:60px}
.final-in{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;position:relative}
.final h2{font-size:clamp(40px,6vw,70px);font-weight:800}
.final p{margin:8px 0 0;color:#e1edfc}
.final>img{position:absolute;right:-60px;top:50%;width:340px;transform:translateY(-50%);opacity:.12;pointer-events:none}
.foot{background:var(--night);color:#8ea6c2;font-size:15px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);gap:30px;padding-block:44px 28px}
.foot-brand{display:flex;gap:16px;align-items:flex-start}
.foot-brand img{width:56px;height:56px;flex:none}
.foot-brand strong{color:#fff;font:800 24px/1 var(--display);text-transform:uppercase}
.foot-brand p{margin:8px 0 0;max-width:40ch}
.foot code{background:#ffffff14;color:#dbe8f8}
.foot h3{font:700 13px/1 var(--body);letter-spacing:.12em;color:#fff;margin-bottom:12px}
.foot-grid a{display:block;color:#c5d6ea;text-decoration:none;padding:3px 0}
.foot-grid a:hover{color:#fff}
.foot-legal{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:18px 26px;border-top:1px solid #ffffff14;font-size:14px}
.foot-legal a{color:#c5d6ea}
@media (max-width:760px){.foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.foot-brand{grid-column:1/-1}}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:60;background:#020a14ee;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:max(16px,env(safe-area-inset-top,0px)) var(--gutter-r) max(16px,env(safe-area-inset-bottom,0px)) var(--gutter)}
.lightbox img{max-height:82vh;width:auto;border-radius:10px}
.lightbox p{color:#dbe8f8;margin:0;font-weight:600}
.lightbox button{position:absolute;top:max(14px,env(safe-area-inset-top,0px));right:max(18px,env(safe-area-inset-right,0px));background:#ffffff1f;color:#fff;border:0;width:44px;height:44px;border-radius:50%;font-size:28px;cursor:pointer}