.account-page {
  min-height: 100vh;
  padding: 12rem 0 7rem;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px) 0 0/100% 74px,
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px) 0 0/74px 100%,
    radial-gradient(circle at 78% 26%,rgba(199,255,53,.11),transparent 24%),
    #0a0c0d;
}

.account-intro { max-width: 800px; margin-bottom: 3.5rem; }
.account-intro h1 { font:700 clamp(4rem,8vw,8rem)/.86 "Barlow Condensed",sans-serif; text-transform:uppercase; }
.account-intro h1 span { color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.65); }
.account-intro p { max-width:620px; color:#aeb3af; font-size:1.08rem; line-height:1.75; }

.account-choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; }
.account-choice { position:relative; display:flex; flex-direction:column; min-height:380px; padding:2.4rem; overflow:hidden; border:1px solid rgba(255,255,255,.16); color:#fff; text-decoration:none; background:rgba(255,255,255,.025); transition:.25s ease; }
.account-choice::after { content:""; position:absolute; width:280px; aspect-ratio:1; right:-90px; bottom:-120px; border:1px solid currentColor; border-radius:50%; opacity:.18; }
.account-choice:hover { color:#fff; transform:translateY(-6px); border-color:rgba(199,255,53,.55); background:rgba(199,255,53,.04); }
.account-choice.coordinator:hover { border-color:rgba(74,222,128,.6); background:rgba(74,222,128,.04); }
.account-choice small { color:#c7ff35; font-size:.62rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.account-choice.coordinator small { color:#4ade80; }
.account-choice h2 { margin:1.2rem 0; font:700 clamp(2.5rem,5vw,4.5rem)/.9 "Barlow Condensed",sans-serif; text-transform:uppercase; }
.account-choice p { max-width:500px; color:#aeb3af; line-height:1.7; }
.account-choice strong { display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.13); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; }

.account-form-shell { display:grid; grid-template-columns:minmax(0,1fr) minmax(440px,560px); min-height:100vh; background:#0a0c0d; }
.account-form-brand { position:relative; display:flex; align-items:end; padding:8rem clamp(2rem,6vw,7rem); overflow:hidden; background:radial-gradient(circle at 35% 40%,rgba(199,255,53,.13),transparent 25%),#0b0d0e; }
.account-form-brand.coordinator-brand { background:radial-gradient(circle at 35% 40%,rgba(74,222,128,.13),transparent 25%),#0b0d0e; }
.account-form-brand::before { content:""; position:absolute; width:48vw; aspect-ratio:1; left:-16vw; top:8%; border:1px solid rgba(199,255,53,.2); border-radius:50%; }
.account-form-brand > div { position:relative; z-index:2; }
.account-form-brand h1 { max-width:680px; margin:1rem 0; font:700 clamp(4rem,7vw,7.5rem)/.86 "Barlow Condensed",sans-serif; text-transform:uppercase; }
.account-form-brand p { max-width:550px; color:#aeb3af; line-height:1.75; }
.account-form-panel { display:flex; align-items:center; padding:7rem clamp(2rem,5vw,5rem); color:#111; background:#f3f0e9; }
.account-form-card { width:100%; max-width:470px; margin:auto; }
.account-form-card h2 { margin:0 0 .65rem; font:700 3.4rem/.95 "Barlow Condensed",sans-serif; text-transform:uppercase; }
.account-form-card > p { color:#656b66; line-height:1.7; }
.account-form-card label { display:block; margin:1.25rem 0 .45rem; font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.account-input { width:100%; padding:.95rem 1rem; border:1px solid #cac7bf; border-radius:0; background:#fff; }
.account-submit { width:100%; margin-top:1.4rem; padding:1rem; border:1px solid #111; color:#fff; background:#111; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.account-submit:hover { color:#111; background:#c7ff35; border-color:#c7ff35; }
.coordinator-submit:hover { background:#4ade80; border-color:#4ade80; }
.account-error { display:block; margin-top:1rem; color:#a12d25; font-size:.82rem; }
.account-secondary { margin-top:1.5rem; padding-top:1.5rem; border-top:1px solid #d3d0c8; color:#676d68; font-size:.82rem; }
.account-secondary a { color:#455900; font-weight:700; }
.portal-preview-card { margin:1.5rem 0; padding:1.2rem; border:1px solid #afbf70; background:#eef3dc; }
.portal-preview-card strong,.portal-preview-card span { display:block; }
.portal-preview-card span { margin-top:.2rem; color:#626961; font-size:.78rem; }
.portal-preview-card .account-submit { margin-top:1rem; }

.membership-note { padding:1.25rem 1.5rem; border-left:4px solid #7f991a; background:#eef2df; color:#4d554e; }
.membership-note strong { display:block; margin-bottom:.25rem; color:#202420; }

@media(max-width:991px){
  .account-choice-grid,.account-form-shell { grid-template-columns:1fr; }
  .account-form-brand { min-height:560px; padding-top:9rem; }
  .account-form-panel { min-height:600px; }
}
@media(max-width:767px){
  .account-page { padding-top:8rem; }
  .account-choice-grid { grid-template-columns:1fr; }
  .account-choice { min-height:330px; padding:1.7rem; }
  .account-form-brand { min-height:500px; }
  .account-form-panel { padding:4rem 1.4rem; }
}
