html,body{min-height:100%}
body.pro-upgrade-page{
  margin:0;
  background:
    radial-gradient(circle at 50% 58%, rgba(16,60,106,.16), transparent 34%),
    #031126;
  color:#edf5ff;
  font-family:Barlow,Arial,sans-serif;
}

.pro-upgrade-page *{box-sizing:border-box}

.pro-upgrade-shell{
  width:min(1180px,calc(100% - 48px));
  margin:0 auto;
  padding:14px 0 64px;
}

.pro-upgrade-breadcrumb{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 0 16px;
  color:#879bb0;
  font:700 12px/1 Barlow,Arial,sans-serif;
}
.pro-upgrade-breadcrumb a{color:#a8bbcd;text-decoration:none}
.pro-upgrade-breadcrumb strong{color:#d7e4ef}

.pro-upgrade-hero{
  max-width:860px;
  margin:0 auto;
  text-align:center;
  padding:8px 0 24px;
}
.pro-upgrade-kicker{
  display:inline-block;
  margin-bottom:12px;
  color:#f2b84b;
  font:800 12px/1 Barlow,Arial,sans-serif;
  letter-spacing:.18em;
}
.pro-upgrade-hero h1{
  margin:0;
  color:#fff;
  font:800 clamp(40px,4.7vw,58px)/1 Barlow,Arial,sans-serif;
  letter-spacing:-.025em;
}
.pro-upgrade-intro{
  max-width:620px;
  margin:18px auto 0;
  color:#b5c5d5;
  font:500 16px/1.5 Barlow,Arial,sans-serif;
}
.pro-upgrade-price-row{
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:8px;
  margin-top:24px;
}
.pro-upgrade-price-row strong{
  color:#fff;
  font:800 42px/1 Barlow,Arial,sans-serif;
}
.pro-upgrade-price-row span{
  color:#b6c3d0;
  font:600 15px/1 Barlow,Arial,sans-serif;
}
.pro-upgrade-trust-row{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px 24px;
  margin-top:18px;
}
.pro-upgrade-trust-row span{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#aebdcc;
  font:700 11px/1 Barlow,Arial,sans-serif;
}
.pro-upgrade-trust-row i{color:#f2b84b;font-size:16px}
.pro-upgrade-free-note{
  margin:14px auto 0;
  color:#7f94aa;
  font:600 11px/1.4 Barlow,Arial,sans-serif;
}

.pro-upgrade-status-card{
  max-width:820px;
  margin:6px auto 0;
  border:1px solid #1a4a75;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(5,24,47,.99),rgba(3,17,38,.99));
  box-shadow:0 18px 60px rgba(0,0,0,.22);
  overflow:hidden;
}
.pro-upgrade-state{
  display:grid;
  grid-template-columns:60px 1fr;
  gap:20px;
  padding:26px 28px;
}
.pro-upgrade-state[hidden]{display:none!important}
.pro-upgrade-state-icon{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border:1px solid rgba(242,184,75,.48);
  border-radius:12px;
  background:rgba(3,17,38,.62);
  color:#f2b84b;
  font-size:28px;
}
.pro-upgrade-state-icon.is-pro{
  background:rgba(242,184,75,.12);
}
.pro-upgrade-step{
  display:block;
  margin-bottom:7px;
  color:#70c4ff;
  font:800 10px/1 Barlow,Arial,sans-serif;
  letter-spacing:.14em;
}
.pro-upgrade-state-copy h2{
  margin:0;
  color:#fff;
  font:800 25px/1.12 Barlow,Arial,sans-serif;
}
.pro-upgrade-state-copy p{
  max-width:650px;
  margin:10px 0 0;
  color:#b8c7d6;
  font:500 13px/1.5 Barlow,Arial,sans-serif;
}
.pro-upgrade-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-top:20px;
}
.pro-upgrade-primary,
.pro-upgrade-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 18px;
  border-radius:7px;
  text-decoration:none;
  font:800 12px/1 Barlow,Arial,sans-serif;
}
.pro-upgrade-primary{
  border:0;
  background:#f2b84b;
  color:#10213c;
}
.pro-upgrade-secondary{
  border:1px solid #2a5b85;
  background:#071a32;
  color:#d2dfeb;
}
button.pro-upgrade-primary{
  width:min(360px,100%);
  margin-top:20px;
}
button.pro-upgrade-primary:disabled{
  border:1px solid rgba(242,184,75,.34);
  background:rgba(242,184,75,.14);
  color:#c8a65e;
  cursor:not-allowed;
}
.pro-upgrade-ready-list{
  display:grid;
  gap:9px;
  margin-top:18px;
  padding:15px 16px;
  border:1px solid #173f62;
  border-radius:8px;
  background:rgba(2,15,36,.6);
}
.pro-upgrade-ready-list span{
  display:flex;
  gap:8px;
  align-items:center;
  color:#c7d4e0;
  font:600 12px/1.35 Barlow,Arial,sans-serif;
}
.pro-upgrade-ready-list i{color:#49d88f}
.pro-upgrade-note{
  display:block;
  margin-top:10px;
  color:#8297ac;
  font:500 10.5px/1.45 Barlow,Arial,sans-serif;
}

.pro-upgrade-includes{
  max-width:980px;
  margin:32px auto 0;
}
.pro-upgrade-section-heading{text-align:center}
.pro-upgrade-section-heading span{
  color:#6ebdf4;
  font:800 10px/1 Barlow,Arial,sans-serif;
  letter-spacing:.14em;
}
.pro-upgrade-section-heading h2{
  margin:7px 0 0;
  color:#fff;
  font:800 24px/1.12 Barlow,Arial,sans-serif;
}
.pro-upgrade-includes-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:16px;
}
.pro-upgrade-includes-grid article{
  display:grid;
  grid-template-columns:40px 1fr;
  gap:11px;
  align-items:start;
  min-width:0;
  padding:16px;
  border:1px solid #173f62;
  border-radius:9px;
  background:#061a33;
}
.pro-upgrade-feature-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid rgba(242,184,75,.42);
  border-radius:8px;
  color:#f2b84b;
  font-size:20px;
}
.pro-upgrade-includes-grid strong{
  display:block;
  color:#f2f7fb;
  font:800 12px/1.2 Barlow,Arial,sans-serif;
}
.pro-upgrade-includes-grid article span{
  display:block;
  margin-top:4px;
  color:#8ea3b8;
  font:500 10.5px/1.35 Barlow,Arial,sans-serif;
}
.pro-upgrade-footnote{
  max-width:800px;
  margin:22px auto 0;
  text-align:center;
  color:#71879d;
  font:500 10.5px/1.45 Barlow,Arial,sans-serif;
}

.pro-upgrade-spin{animation:proUpgradeSpin 1s linear infinite}
@keyframes proUpgradeSpin{to{transform:rotate(360deg)}}

@media(max-width:860px){
  .pro-upgrade-includes-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:640px){
  .pro-upgrade-shell{
    width:100%;
    padding:12px 0 46px;
  }
  .pro-upgrade-breadcrumb{padding:0 15px;margin-bottom:12px}
  .pro-upgrade-hero{padding:8px 18px 20px}
  .pro-upgrade-hero h1{font-size:40px}
  .pro-upgrade-intro{font-size:14px}
  .pro-upgrade-trust-row{gap:10px 16px}
  .pro-upgrade-status-card{
    margin:4px 12px 0;
    border-radius:10px;
  }
  .pro-upgrade-state{
    grid-template-columns:1fr;
    gap:14px;
    padding:20px;
  }
  .pro-upgrade-state-icon{width:48px;height:48px;font-size:24px}
  .pro-upgrade-state-copy h2{font-size:28px}
  .pro-upgrade-actions{display:grid}
  .pro-upgrade-primary,
  .pro-upgrade-secondary{width:100%}
  .pro-upgrade-includes{padding:0 12px}
  .pro-upgrade-includes-grid{grid-template-columns:1fr}
  .pro-upgrade-footnote{padding:0 18px}
}

/* 2026-10-07 — inline PRO account registration */
.pro-upgrade-signup-form{
  display:grid;
  gap:14px;
  margin-top:20px;
}
.pro-upgrade-signup-form label{
  display:grid;
  gap:7px;
}
.pro-upgrade-signup-form label>span{
  color:#d6e2ee;
  font:700 11px/1.2 Barlow,Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.pro-upgrade-signup-form input{
  width:100%;
  min-height:46px;
  border:1px solid #2a5478;
  border-radius:7px;
  outline:none;
  background:#071a32;
  color:#f3f7fb;
  padding:0 14px;
  font:500 13px/1 Barlow,Arial,sans-serif;
}
.pro-upgrade-signup-form input::placeholder{color:#7f93a8}
.pro-upgrade-signup-form input:focus{
  border-color:#65bfff;
  box-shadow:0 0 0 2px rgba(101,191,255,.10);
}
.pro-upgrade-signup-form label small{
  margin-top:-2px;
  color:#8095aa;
  font:600 9.5px/1.3 Barlow,Arial,sans-serif;
}
.pro-upgrade-submit{
  width:min(360px,100%)!important;
  margin:2px auto 0!important;
  justify-self:center;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.pro-upgrade-existing-login{
  display:block;
  margin-top:2px;
  text-align:center;
  color:#9fc8ff;
  text-decoration:none;
  font:700 10.5px/1.3 Barlow,Arial,sans-serif;
}
.pro-upgrade-existing-login:hover{text-decoration:underline}
.pro-upgrade-form-message{
  padding:10px 12px;
  border:1px solid rgba(244,92,92,.35);
  border-radius:7px;
  background:rgba(244,92,92,.08);
  color:#ffc0c0;
  font:600 11px/1.4 Barlow,Arial,sans-serif;
}
.pro-upgrade-form-message.is-success{
  border-color:rgba(70,211,139,.35);
  background:rgba(70,211,139,.08);
  color:#91efbd;
}
@media(max-width:640px){
  .pro-upgrade-signup-form{gap:12px}
}

/* 2026-10-08 — provider-neutral checkout handoff */
.pro-upgrade-order-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:18px}
.pro-upgrade-order-summary>div{min-width:0;padding:12px 13px;border:1px solid #173f62;border-radius:8px;background:rgba(2,15,36,.62)}
.pro-upgrade-order-summary span{display:block;margin-bottom:5px;color:#7f94aa;font:800 9px/1.2 Barlow,Arial,sans-serif;letter-spacing:.07em}
.pro-upgrade-order-summary strong{display:block;color:#eef5fb;font:700 12px/1.3 Barlow,Arial,sans-serif}
.pro-upgrade-checkout{display:flex!important;width:min(420px,100%)!important;margin:18px auto 0!important;justify-content:center!important;text-transform:uppercase;letter-spacing:.03em}
@media(max-width:640px){.pro-upgrade-order-summary{grid-template-columns:1fr}}

/* 2026-10-08 — inline register/sign-in switch */
#pro-upgrade-register-view[hidden],
#pro-upgrade-login-view[hidden]{
  display:none!important;
}
.pro-upgrade-inline-switch{
  display:block;
  justify-self:center;
  margin:2px auto 0;
  padding:0;
  border:0;
  background:transparent;
  color:#9fc8ff;
  text-align:center;
  cursor:pointer;
  font:700 10.5px/1.3 Barlow,Arial,sans-serif;
}
.pro-upgrade-inline-switch:hover{text-decoration:underline}

/* 2026-10-08 — post-payment activation / redirect */
.pro-upgrade-activation-progress{
  display:grid;
  gap:9px;
  margin-top:18px;
  padding:15px 16px;
  border:1px solid #173f62;
  border-radius:8px;
  background:rgba(2,15,36,.62);
}
.pro-upgrade-activation-progress span{
  display:flex;
  align-items:center;
  gap:9px;
  color:#c7d4e0;
  font:600 12px/1.35 Barlow,Arial,sans-serif;
}
.pro-upgrade-activation-progress span:first-child i{color:#49d88f}
.pro-upgrade-activation-progress.is-complete i{color:#49d88f!important}
.pro-upgrade-open-hub{
  width:min(420px,100%);
  margin:18px auto 0;
  display:flex;
  justify-content:center;
  text-transform:uppercase;
  letter-spacing:.03em;
}

/* 2026-10-08 — final pre-payment edge cases */
#pro-upgrade-reset-view[hidden]{display:none!important}
.pro-upgrade-legal-copy{
  max-width:620px;
  margin:12px auto 0;
  text-align:center;
  color:#758ba1;
  font:500 9.5px/1.45 Barlow,Arial,sans-serif;
}
.pro-upgrade-legal-copy a{
  color:#9fc8ff;
  text-decoration:none;
}
.pro-upgrade-legal-copy a:hover{text-decoration:underline}