:root{
  color-scheme:dark;
  --bg:#080e19;
  --panel:#111d30;
  --panel2:#0b1525;
  --line:#2a425a;
  --text:#edf5ff;
  --muted:#9baec4;
  --cyan:#62d8ec;
  --green:#63d8ab;
  --amber:#ebbf79;
  --red:#ff7d8b;
  --wrap:1100px
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  min-width:320px;
  min-height:100vh;
  background:
    radial-gradient(ellipse at 76% 15%,#17335475 0,transparent 43%),
    linear-gradient(180deg,#080e19,#0b1422);
  color:var(--text);
  font:16px/1.6 ui-sans-serif,system-ui,-apple-system,
    BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased
}

a{color:inherit}

a:focus-visible{
  outline:3px solid var(--cyan);
  outline-offset:4px;
  border-radius:4px
}

.wrap{
  width:min(calc(100% - 44px),var(--wrap));
  margin-inline:auto
}

.site-header{
  border-bottom:1px solid rgba(122,160,205,.15);
  background:#080e19e8
}

.header-inner{
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px
}

.brand{
  display:flex;
  gap:12px;
  align-items:center;
  text-decoration:none
}

.brand-mark{
  width:43px;
  height:43px;
  display:grid;
  place-items:center;
  border:1px solid #477c9b;
  border-radius:12px;
  background:linear-gradient(145deg,#14273a,#101928);
  color:var(--cyan);
  font-size:27px;
  font-weight:800
}

.brand-name{
  display:block;
  font-size:21px;
  letter-spacing:.19em;
  font-weight:760;
  line-height:1.1
}

.brand-sub{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:9px;
  letter-spacing:.21em;
  font-weight:750
}

.header-nav{
  display:flex;
  gap:17px;
  align-items:center;
  flex-wrap:wrap
}

.header-nav a{
  text-decoration:none;
  color:#bfd0e1;
  font-size:13px
}

.header-nav a:hover{color:var(--cyan)}

.nav-primary{
  padding:10px 15px;
  border-radius:7px;
  color:#071521!important;
  background:var(--cyan);
  font-weight:800
}

.auth-shell{
  padding:68px 0 82px
}

.auth-grid{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(360px,.72fr);
  gap:56px;
  align-items:start
}

.kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:var(--cyan);
  font-size:11px;
  letter-spacing:.16em;
  font-weight:800;
  text-transform:uppercase
}

.kicker:before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 15px #63d8ab80
}

h1{
  margin:20px 0;
  max-width:680px;
  font-size:clamp(40px,5vw,66px);
  letter-spacing:-.05em;
  line-height:1.05
}

.intro{
  max-width:650px;
  color:#b5c6d9;
  font-size:16px;
  line-height:1.82
}

.flow{
  display:grid;
  gap:10px;
  margin-top:28px
}

.flow-item{
  padding:15px 16px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#101d2f
}

.flow-item small{
  display:block;
  color:var(--cyan);
  font-size:9px;
  letter-spacing:.12em;
  font-weight:850
}

.flow-item strong{
  display:block;
  margin-top:4px;
  font-size:13px
}

.flow-item span{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:11px
}

.auth-panel{
  overflow:hidden;
  border:1px solid #385771;
  border-radius:16px;
  background:linear-gradient(160deg,#15283e,#0d192a);
  box-shadow:0 25px 80px #0007
}

.panel-head{
  padding:16px 20px;
  border-bottom:1px solid #2e465e;
  background:#172a42;
  font-size:11px;
  letter-spacing:.12em;
  font-weight:800
}

.panel-body{
  padding:25px
}

.auth-status{
  display:grid;
  gap:4px;
  padding:13px 14px;
  margin-bottom:18px;
  border:1px solid #735a39;
  border-left:3px solid var(--amber);
  border-radius:7px;
  background:#2d211050
}

.auth-status strong{
  color:var(--amber);
  font-size:10px;
  letter-spacing:.08em
}

.auth-status span{
  color:#c8b591;
  font-size:11px;
  line-height:1.6
}

.auth-status[data-state="ready"]{
  border-color:#315a55;
  border-left-color:var(--green);
  background:#112b2b80
}

.auth-status[data-state="ready"] strong{
  color:var(--green)
}

.auth-status[data-state="ready"] span{
  color:#b8d7ce
}

.auth-status[data-state="blocked"]{
  border-color:#75434c;
  border-left-color:var(--red);
  background:#30182160
}

.auth-status[data-state="blocked"] strong{
  color:#ff9ba6
}

.auth-status[data-state="blocked"] span{
  color:#d9afb4
}

#athena-auth-mount{
  min-height:145px
}

.auth-action,
.auth-secondary{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:48px;
  border-radius:8px;
  text-decoration:none;
  font-size:14px;
  font-weight:800
}

.auth-action{
  background:var(--cyan);
  color:#071521
}

.auth-secondary{
  border:1px solid #456079;
  background:#142338;
  color:#dbe9f6
}

.action-stack{
  display:grid;
  gap:10px
}

.security-note{
  margin-top:22px;
  padding:14px 15px;
  border-left:3px solid var(--green);
  background:#102827;
  color:#b9d4ce;
  border-radius:6px;
  font-size:11px
}

.pilot-ready{
  display:grid;
  gap:16px
}

.pilot-ready p{
  margin:0;
  color:#b6c9da;
  font-size:13px
}

.footer{
  padding:28px 0 38px;
  border-top:1px solid #20314670;
  color:var(--muted);
  font-size:11px
}

@media(max-width:850px){
  .auth-grid{grid-template-columns:1fr}
  .auth-panel{max-width:650px}
}

@media(max-width:620px){
  .header-inner{
    padding:15px 0;
    align-items:flex-start;
    flex-direction:column
  }

  .auth-shell{padding:48px 0 58px}

  .panel-body{padding:19px}
}

/* ATHENA MEMBER AREA V1 */

.nav-logout{
  appearance:none;
  border:1px solid #456079;
  background:#142338;
  color:#dbe9f6;
  min-height:39px;
  padding:8px 13px;
  border-radius:7px;
  font:inherit;
  font-size:12px;
  font-weight:800;
  cursor:pointer
}

.nav-logout:hover{
  border-color:var(--cyan);
  color:white
}

.nav-logout:disabled{
  opacity:.55;
  cursor:not-allowed
}

.member-shell{
  padding:64px 0 88px
}

.member-hero{
  margin-bottom:28px
}

.member-hero h1{
  margin-bottom:12px
}

.member-grid{
  display:grid;
  grid-template-columns:repeat(
    3,
    minmax(0,1fr)
  );
  gap:16px;
  margin-top:28px
}

.member-card{
  padding:24px;
  border:1px solid #2c455f;
  border-radius:13px;
  background:
    linear-gradient(
      155deg,
      #14263b,
      #0d192a
    )
}

.member-card-label{
  color:var(--cyan);
  font-size:10px;
  letter-spacing:.13em;
  font-weight:850
}

.member-card h2{
  margin:9px 0 18px;
  font-size:21px
}

.member-details{
  margin:0
}

.member-details div{
  padding:10px 0;
  border-bottom:1px solid #243a50
}

.member-details div:last-child{
  border-bottom:0
}

.member-details dt{
  color:#829ab1;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:800
}

.member-details dd{
  margin:4px 0 0;
  color:#e8f3fd;
  overflow-wrap:anywhere
}

.member-note{
  color:#9eb2c6;
  font-size:12px;
  line-height:1.7
}

.entitlement-box{
  display:grid;
  gap:4px;
  padding:15px;
  border:1px solid #315a55;
  border-left:3px solid var(--green);
  border-radius:8px;
  background:#112b2b75
}

.entitlement-box span{
  color:var(--green);
  font-size:9px;
  letter-spacing:.1em;
  font-weight:850
}

.entitlement-box strong{
  font-size:16px
}

.entitlement-box small{
  color:#9ebcb6;
  line-height:1.55
}

.billing-section{
  margin-top:42px;
  padding-top:34px;
  border-top:1px solid #23374d
}

.section-heading{
  max-width:720px;
  margin-bottom:22px
}

.section-heading h2{
  margin:7px 0 9px;
  font-size:30px
}

.section-heading p{
  color:#a5b8ca;
  line-height:1.75
}

.plan-grid{
  display:grid;
  grid-template-columns:repeat(
    3,
    minmax(0,1fr)
  );
  gap:16px
}

.plan-card{
  padding:25px;
  border:1px solid #2c455f;
  border-radius:13px;
  background:#101d30
}

.plan-card.plan-featured{
  border-color:#4e8ca5;
  box-shadow:0 0 0 1px #4e8ca530
}

.plan-name{
  color:var(--cyan);
  font-size:11px;
  letter-spacing:.12em;
  font-weight:850
}

.plan-price{
  display:block;
  margin:10px 0;
  font-size:30px
}

.plan-price small{
  color:#90a5ba;
  font-size:12px;
  font-weight:650
}

.plan-card p{
  min-height:72px;
  color:#9eb2c6;
  font-size:12px;
  line-height:1.7
}

.plan-button{
  width:100%;
  min-height:45px;
  border:1px solid #3f5870;
  border-radius:8px;
  background:#17273a;
  color:#8297aa;
  font:inherit;
  font-size:12px;
  font-weight:800
}

.plan-button:disabled{
  cursor:not-allowed;
  opacity:.72
}

.billing-guardrail{
  display:grid;
  gap:4px;
  margin-top:18px;
  padding:14px 16px;
  border-left:3px solid var(--green);
  border-radius:6px;
  background:#102827
}

.billing-guardrail strong{
  color:var(--green);
  font-size:12px
}

.billing-guardrail span{
  color:#a9c7bf;
  font-size:11px;
  line-height:1.65
}

.recovery-link{
  margin-top:18px;
  padding-top:15px;
  border-top:1px solid #263b51;
  text-align:center
}

.recovery-link a{
  color:var(--cyan);
  font-size:12px;
  text-decoration:none
}

.recovery-link a:hover{
  text-decoration:underline
}

@media(max-width:900px){
  .member-grid,
  .plan-grid{
    grid-template-columns:1fr
  }

  .plan-card p{
    min-height:auto
  }
}