/* Pricing, Sign up and Log in: a centered card over the outward-moving orbit animation. */
.auth-stage{position:relative;isolation:isolate;flex:1 0 auto;width:100%;min-height:calc(100svh - 57px);overflow:hidden;display:flex;align-items:center;justify-content:center;padding:44px 20px 64px}
.auth-stage .orbit-bg{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.auth-wrap{width:min(372px,100%)}
.auth-wrap.wide{width:min(1040px,100%)}

/* The card */
.auth-card{padding:28px 26px 26px;border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:0 10px 30px rgba(0,0,0,.06)}
.auth-card h1,.auth-head h1{text-align:center;font:700 22px/1.33 "Instrument Sans",system-ui,sans-serif;letter-spacing:-.6px;margin:0 0 6px;color:var(--ink)}
.auth-card > .lede{text-align:center;font-size:13px;line-height:1.5;color:var(--muted);margin:0 0 20px}
.auth-card .entry-content{font-size:14px}
.auth-card .entry-content > *{max-width:none}
/* The form's own wrapper melts into the card */
.auth-card .card{background:none;border:0;border-radius:0;padding:0;box-shadow:none}
.auth-card .card > .lede{display:none}
.auth-card .form-row{margin:0 0 14px}
.auth-card .form-row label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:0 0 9px}
.auth-card .form-row input[type=text],.auth-card .form-row input[type=email],.auth-card .form-row input[type=password]{height:38px;background:transparent;border:1px solid var(--line);border-radius:6px;padding:0 12px;font-size:14px;color:var(--ink)}
.auth-card .form-row input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.auth-card .form-row input::placeholder{color:var(--muted)}
.auth-card .form-row small{font-size:11.5px;margin-top:6px}
.auth-card .check-row{font-size:13px;color:var(--muted);margin:2px 0 14px}
.auth-card .check-row input{accent-color:var(--accent)}
.auth-card .button,.auth-card .button-ghost{height:38px;border-radius:6px;font-size:14px;font-weight:650;padding:0 14px;margin-top:4px}
.auth-card .button-ghost:hover{background:var(--panel-2)}
.auth-card .notice{font-size:13px;border-radius:8px;margin-bottom:16px}
.auth-card .actions{flex-direction:column}
.auth-card .actions .button,.auth-card .actions .button-ghost{width:100%}
/* "OR" divider before the switch-pages links, as in the mockup */
.auth-card .form-foot{margin:18px 0 0;font-size:12px;line-height:1.55;text-align:center;color:var(--muted)}
.auth-card form + .form-foot::before{content:"or";display:block;margin:0 0 14px;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);
  background:linear-gradient(var(--line),var(--line)) left center/calc(50% - 22px) 1px no-repeat,linear-gradient(var(--line),var(--line)) right center/calc(50% - 22px) 1px no-repeat}
.auth-card .form-foot a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

/* Pricing */
.auth-head{text-align:center;margin:0 0 26px}
.auth-head h1{font-size:28px;letter-spacing:-.8px}
.auth-head .lede{color:var(--muted);font-size:14px;margin:0}
.auth-pricing .entry-content{font-size:14.5px}
.auth-pricing .entry-content > *{max-width:none}
.auth-pricing .notice{max-width:520px;margin:0 auto 18px;text-align:center}
.auth-pricing .pricing{gap:16px;margin-top:0}
.auth-pricing .price-card{border-radius:12px;padding:26px 24px 24px;background:var(--panel);box-shadow:0 10px 30px rgba(0,0,0,.06)}
.auth-pricing .price-card.featured{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 10px 30px rgba(0,0,0,.08)}
.auth-pricing .price-card h2{font:700 13px/1.3 "Instrument Sans",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
.auth-pricing .price-card .price{font:700 38px/1 "Instrument Sans",system-ui,sans-serif;letter-spacing:-1px;margin:14px 0 4px;color:var(--ink)}
.auth-pricing .price-card .per{font-size:13px}
.auth-pricing .price-card ul{font-size:14px;margin:18px 0 22px;padding-top:18px;border-top:1px solid var(--line)}
.auth-pricing .price-card .button,.auth-pricing .price-card .button-ghost{height:38px;border-radius:6px;font-size:14px;font-weight:650;padding:0 14px}

@media (max-width:560px){
  .auth-stage{padding:28px 14px 48px;align-items:flex-start}
  .auth-card{padding:23px 20px}
  .auth-card h1{font-size:20px}
}
.auth-pricing .price-card ul{align-content:start}

/* Account: same centered card layout, no background animation */
.auth-wrap.mid{width:min(780px,100%)}
.auth-account .entry-content{font-size:14.5px}
.auth-account .entry-content > *{max-width:none}
.auth-account .notice{max-width:none;text-align:center;margin:0 0 16px}
.auth-account .grid-2{gap:16px;align-items:stretch}
.auth-account .card{display:flex;flex-direction:column;padding:26px 24px 24px;border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:0 10px 30px rgba(0,0,0,.06)}
.auth-account .card h2{font:700 13px/1.3 "Instrument Sans",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:0 0 14px}
.auth-account .card .plan-pill{font-size:12px;padding:4px 11px}
.auth-account .kv{grid-template-columns:max-content 1fr;gap:10px 18px;margin:16px 0 20px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;flex:1;align-content:start}
.auth-account .kv dt{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding-top:2px}
.auth-account .card > .notice{text-align:left;margin:0 0 14px}
.auth-account .actions{display:grid;gap:10px;margin-top:auto}
.auth-account .actions form{margin:0}
.auth-account .actions .button,.auth-account .actions .button-ghost{width:100%;height:38px;border-radius:6px;font-size:14px;font-weight:650;padding:0 14px}
.auth-account .actions .button-ghost:hover{background:var(--panel-2)}
@media (max-width:640px){.auth-account .grid-2{grid-template-columns:1fr}}
.auth-card .form-intro{text-align:center;font-size:13px;color:var(--muted);margin:0 0 18px}

/* My maps: same centered layout as Account, no background animation */
.auth-my-maps .entry-content{font-size:14.5px}
.auth-my-maps .entry-content > *{max-width:none}
.auth-my-maps .notice{text-align:center;margin:0 0 16px}
.auth-my-maps .usage{justify-content:center;flex-direction:column;gap:12px;margin:0 0 22px;color:var(--muted);font-size:13.5px}
.auth-my-maps .usage .actions{justify-content:center}
.auth-my-maps .usage .button,.auth-my-maps .usage .button-ghost{height:38px;border-radius:6px;font-size:14px;font-weight:650;padding:0 16px}
.auth-my-maps .usage .button-ghost:hover{background:var(--panel-2)}
.auth-my-maps .maps-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:0}
.auth-my-maps .map-card{width:min(300px,100%)}
.auth-my-maps .map-card{border-radius:12px;background:var(--panel);box-shadow:0 10px 30px rgba(0,0,0,.06)}
.auth-my-maps .map-card .meta{padding:14px 16px 10px}
.auth-my-maps .map-card h3{font:700 15px/1.3 "Instrument Sans",system-ui,sans-serif;letter-spacing:-.2px}
.auth-my-maps .map-card .sub{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-top:4px}
.auth-my-maps .map-card .row{padding:0 16px 16px;gap:8px}
.auth-my-maps .map-card .row > *{flex:1}
.auth-my-maps .map-card .row .button,.auth-my-maps .map-card .row .button-ghost{width:100%;height:36px;border-radius:6px;font-size:13.5px;font-weight:650;padding:0 12px}
.auth-my-maps .map-card .row .button-ghost:hover{background:var(--panel-2)}
.auth-my-maps .empty-state{max-width:420px;margin:0 auto;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.06)}
.auth-my-maps .empty-state .button{height:38px;border-radius:6px;font-size:14px;padding:0 16px}