/* ============================================================================
   ACCOUNT PAGE — sign in / sign up / signed-in summary.
   Leans on the existing .lead form styling from aura.css so the inputs here
   look identical to the booking and contact forms; only the page layout and
   the signed-in panel are new.
   ========================================================================== */

.acct-sec{padding-top:clamp(90px,11vw,150px); padding-bottom:clamp(60px,8vw,110px);}
.acct-wrap{display:grid; gap:clamp(32px,5vw,72px); align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,520px);}
@media (max-width:960px){
  .acct-wrap{grid-template-columns:1fr;}
  .acct-intro{max-width:560px;}
}

.acct-h1{font-family:var(--disp); font-weight:700; letter-spacing:-.028em; line-height:1.02;
  font-size:clamp(38px,5.2vw,64px); margin:.28em 0 .5em; color:var(--ink);}
.acct-h1 em{font-style:italic; color:var(--marigold-deep);}

.acct-why{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:11px;}
.acct-why li{position:relative; padding-left:26px; color:var(--ink-soft);
  font-size:15px; line-height:1.5;}
.acct-why li::before{content:""; position:absolute; left:0; top:.52em;
  width:9px; height:9px; border-radius:50%; background:var(--teal); opacity:.8;}

/* the card ------------------------------------------------------------------ */
.acct-card{padding:clamp(24px,3.2vw,38px); border-radius:var(--r-lg,20px);}

.acct-tabs{display:flex; gap:4px; padding:4px; margin-bottom:24px;
  background:var(--paper-dim); border-radius:999px;}
.acct-tab{flex:1; padding:11px 14px; border:0; cursor:pointer; border-radius:999px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  background:transparent; color:var(--ink-soft); transition:background .2s ease, color .2s ease;}
.acct-tab:hover{color:var(--ink);}
.acct-tab.on{background:var(--paper); color:var(--ink); box-shadow:0 1px 3px rgba(20,16,40,.08);}

/* the shared .lead form sits inside a modal elsewhere; drop that assumption */
.acct-form{margin:0;}
.acct-form .lead-send{width:100%; justify-content:center; margin-top:6px;}

/* the error line doubles as the "account created" confirmation, so it needs a
   success skin as well as the inherited error one */
.acct-form .lead-err.is-ok{color:var(--teal); border-color:currentColor;}

/* signed-in panel ----------------------------------------------------------- */
.acct-name{font-family:var(--disp); font-weight:700; font-size:clamp(26px,3vw,34px);
  letter-spacing:-.02em; margin:.3em 0 .7em; color:var(--ink);}
.acct-facts{margin:0 0 28px; display:grid; gap:0;}
.acct-fact{display:flex; justify-content:space-between; gap:16px; padding:11px 0;
  border-bottom:1px solid var(--line);}
.acct-fact dt{font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft);}
.acct-fact dd{margin:0; font-size:14.5px; color:var(--ink); text-align:right; word-break:break-word;}

.acct-sub{font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 12px;}
.acct-courses{display:grid; gap:8px;}
.acct-course{display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 16px; border:1px solid var(--line); border-radius:12px;
  color:var(--ink); text-decoration:none; background:var(--paper);
  transition:border-color .2s ease, transform .2s ease;}
.acct-course:hover{border-color:var(--marigold-deep); transform:translateX(3px);}
.acct-empty{color:var(--ink-soft); font-size:14.5px; line-height:1.6; margin:0;}

.acct-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px;}

@media (prefers-reduced-motion:reduce){
  .acct-course{transition:none;}
  .acct-course:hover{transform:none;}
}

/* ---- Google SSO (only rendered when the provider is actually enabled) ------ */
.acct-oauth{margin-bottom:20px;}
.acct-google{width:100%; justify-content:center; gap:10px; display:inline-flex; align-items:center;}
.acct-or{position:relative; text-align:center; margin:0 0 16px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint);}
.acct-or::before,.acct-or::after{content:""; position:absolute; top:50%; width:calc(50% - 24px);
  height:1px; background:var(--line);}
.acct-or::before{left:0;} .acct-or::after{right:0;}
.acct-oauth{display:flex; flex-direction:column-reverse; gap:14px;}

/* ---- the path gate -------------------------------------------------------- */
/* belt and braces with the JS: gated sections stay invisible even between
   MutationObserver callbacks, so nothing ever flashes into view */
.path-gated [data-gated]{display:none !important;}

.path-gate{padding-block:clamp(40px,7vw,80px);}
.gate-card{max-width:620px; margin:0 auto; text-align:center;
  padding:clamp(28px,4vw,48px); border-radius:var(--r-lg,20px);}
.gate-card h2{font-family:var(--disp); font-weight:700; letter-spacing:-.028em;
  line-height:1.05; font-size:clamp(28px,4.4vw,44px); margin:.3em 0 .5em; color:var(--ink);}
.gate-card h2 em{font-style:italic; color:var(--marigold-deep);}
.gate-card .lead{margin:0 auto 22px; max-width:44ch;}
.gate-why{list-style:none; margin:0 auto 26px; padding:0; display:grid; gap:9px;
  text-align:left; max-width:34ch;}
.gate-why li{position:relative; padding-left:24px; color:var(--ink-soft); font-size:14.5px;}
.gate-why li::before{content:""; position:absolute; left:0; top:.55em; width:8px; height:8px;
  border-radius:50%; background:var(--teal); opacity:.85;}
.gate-actions{display:flex; flex-wrap:wrap; gap:10px; justify-content:center;}
.gate-fine{margin:18px 0 0; font-size:12.5px; color:var(--ink-faint);}

/* ---- the sign-up nudge ---------------------------------------------------- */
.nudge-scrim{position:fixed; inset:0; z-index:400; display:grid; place-items:center;
  padding:20px; background:rgba(20,16,40,.5); backdrop-filter:blur(3px);
  animation:nudgeIn .22s ease-out;}
@keyframes nudgeIn{from{opacity:0} to{opacity:1}}
.nudge{position:relative; width:min(100%,460px); background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r-lg,20px);
  padding:clamp(26px,4vw,38px); box-shadow:0 24px 60px rgba(20,16,40,.22);
  animation:nudgeUp .28s cubic-bezier(.22,.9,.36,1);}
@keyframes nudgeUp{from{transform:translateY(14px) scale(.98)} to{transform:none}}
.nudge h2{font-family:var(--disp); font-weight:700; letter-spacing:-.026em; line-height:1.05;
  font-size:clamp(26px,3.6vw,36px); margin:.3em 0 .45em; color:var(--ink);}
.nudge h2 em{font-style:italic; color:var(--marigold-deep);}
.nudge p{color:var(--ink-soft); font-size:14.5px; line-height:1.6; margin:0 0 22px;}
.nudge-actions{display:flex; flex-wrap:wrap; gap:10px;}
.nudge-actions .btn{flex:1 1 auto; justify-content:center;}
.nudge-fine{margin:18px 0 0 !important; font-size:12.5px; color:var(--ink-faint);}
.nudge-fine a{color:var(--marigold-deep);}
.nudge-x{position:absolute; top:12px; right:14px; width:34px; height:34px; border:0;
  background:transparent; cursor:pointer; font-size:24px; line-height:1;
  color:var(--ink-faint); border-radius:50%;}
.nudge-x:hover{background:var(--paper-dim); color:var(--ink);}

@media (prefers-reduced-motion:reduce){
  .nudge-scrim,.nudge{animation:none;}
}