/*
  Composants partagés — module Vitrine & Authentification.
  Extraits des classes déjà quasi identiques dans login.html,
  verify_otp.html, supprimer_compte_otp.html — pas inventés.
  Dépend de tokens.css (doit être chargé avant ce fichier).
*/

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:var(--font-body);
  color:var(--color-text);
}

a{
  color:inherit;
}

/* ---------- corps de page centré (auth / otp / wizard / legal) ---------- */

.auth-body{
  background:var(--color-bg);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--space-3);
  overflow-x:hidden;
}

.auth-body.auth-body--brand{
  background:linear-gradient(135deg,var(--color-navy-900),var(--color-navy-800),var(--color-primary));
}

/* ---------- .auth-card : formulaire split-screen (login/register/forgot/reset) ---------- */

.auth-card{
  width:100%;
  max-width:1100px;
  background:var(--color-surface);
  border-radius:var(--radius-xl);
  overflow:hidden;
  box-shadow:var(--shadow-card-strong);
  display:grid;
  grid-template-columns:1fr 1fr;
}

.brand-panel{
  background:linear-gradient(135deg,var(--color-navy-900),var(--color-navy-800),var(--color-primary));
  color:white;
  padding:55px 50px;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.brand-panel::before{
  content:"";
  position:absolute;
  width:320px;height:320px;
  background:rgba(255,255,255,0.05);
  border-radius:50%;
  top:-120px;right:-100px;
}

.brand-panel::after{
  content:"";
  position:absolute;
  width:220px;height:220px;
  background:rgba(255,255,255,0.04);
  border-radius:50%;
  bottom:-90px;left:-70px;
}

.brand-logo{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:var(--space-5);
  position:relative;
  z-index:2;
  text-decoration:none;
  color:white;
}

.brand-logo img{height:48px;}
.brand-logo span{font-size:20px;font-weight:800;}

.brand-panel h1{
  font-size:36px;
  font-weight:800;
  line-height:1.2;
  margin-bottom:18px;
  position:relative;
  z-index:2;
}

.brand-panel h1 span{color:#4ade80;}

.brand-panel p{
  font-size:16px;
  line-height:1.8;
  color:rgba(255,255,255,0.85);
  margin-bottom:var(--space-3);
  position:relative;
  z-index:2;
  max-width:420px;
}

.brand-features{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  position:relative;
  z-index:2;
}

.brand-features .feature-item{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:600;
  font-size:14px;
}

.brand-features .feature-item i{color:#4ade80;font-size:15px;}

.form-panel{
  padding:55px 50px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.form-panel .section-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--color-info-bg);
  color:var(--color-primary);
  padding:8px 15px;
  border-radius:var(--radius-xl);
  font-size:13px;
  font-weight:700;
  margin-bottom:18px;
  width:fit-content;
}

.form-panel h2{
  font-size:30px;
  font-weight:800;
  color:var(--color-text);
  margin-bottom:8px;
}

.form-panel .subtitle{
  color:var(--color-text-muted);
  margin-bottom:var(--space-3);
}

/* ---------- champs de formulaire ---------- */

.input-group{
  display:flex;
  flex-direction:column;
  margin-bottom:var(--space-3);
}

.input-group label{
  font-size:14px;
  font-weight:600;
  margin-bottom:8px;
  color:var(--color-text);
}

.input-group input,
.input-group select,
.input-group textarea{
  height:52px;
  padding:0 15px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  font-size:15px;
  outline:none;
  transition:.2s;
  width:100%;
  font-family:var(--font-body);
}

.input-group textarea{
  height:auto;
  min-height:110px;
  padding:12px 15px;
}

.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus{
  border-color:var(--color-primary);
  box-shadow:0 0 0 4px rgba(30,64,175,0.10);
}

/* variante thème danger : le focus doit rester dans le thème de la page */
.theme-danger .input-group input:focus,
.theme-danger .otp-input:focus{
  border-color:var(--color-danger);
  box-shadow:0 0 0 4px rgba(220,38,38,0.10);
}

/* champ OTP inséré dans un .auth-card standard (ex: reset_otp.html),
   distinct de .otp-input (carte OTP dédiée à icône, échelle plus grande) */
.input-group input.otp-code{
  letter-spacing:8px;
  font-size:22px;
  text-align:center;
}

.password-wrapper{position:relative;}
.password-wrapper input{padding-right:48px;}

.toggle-password{
  position:absolute;
  top:0;right:0;
  height:52px;width:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:none;
  border:none;
  cursor:pointer;
  color:var(--color-text-muted);
  font-size:16px;
}

.toggle-password:hover{color:var(--color-primary);}

.error-box{
  background:var(--color-danger-bg);
  color:var(--color-danger);
  padding:14px 18px;
  border-radius:var(--radius-md);
  font-size:14px;
  font-weight:600;
  margin-bottom:var(--space-3);
  display:flex;
  align-items:center;
  gap:10px;
}

.success-box{
  background:var(--color-success-bg);
  color:var(--color-success);
  padding:14px 18px;
  border-radius:var(--radius-md);
  font-size:14px;
  font-weight:600;
  margin-bottom:var(--space-3);
  display:flex;
  align-items:center;
  gap:10px;
}

/* ---------- boutons ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  height:56px;
  border:none;
  border-radius:var(--radius-md);
  font-size:17px;
  font-weight:700;
  cursor:pointer;
  transition:.2s;
  text-decoration:none;
  color:white;
}

.btn:hover{transform:translateY(-2px);}

.btn-success{
  background:var(--color-success);
  box-shadow:0 15px 35px rgba(21,128,61,0.30);
}

.btn-primary{
  background:var(--color-primary);
  box-shadow:0 15px 35px rgba(30,64,175,0.25);
}

.btn-danger{
  background:var(--color-danger);
  box-shadow:0 15px 35px rgba(220,38,38,0.20);
}

.btn-outline{
  background:#f1f5f9;
  color:#334155;
  box-shadow:none;
}

/* ---------- état de chargement automatique (boutons soumission) ---------- */

.btn.ys-btn-loading{
  opacity:.72;
  cursor:progress;
  pointer-events:none;
  transform:none !important;
}

.ys-btn-loading i.fa-spin{margin-right:2px;}

.btn-outline:hover{background:#e2e8f0;}

/* ---------- liens secondaires (login/register) ---------- */

.options-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:var(--space-3);
  flex-wrap:wrap;
  gap:10px;
}

.options-row a{
  font-size:14px;
  font-weight:600;
  color:var(--color-primary);
  text-decoration:none;
}

.options-row a:hover{text-decoration:underline;}

.register-cta{
  text-align:center;
  margin-top:25px;
  padding-top:25px;
  border-top:1px solid #e5e7eb;
  font-size:14px;
  color:var(--color-text-muted);
}

.register-cta a{
  color:var(--color-success);
  font-weight:700;
  text-decoration:none;
}

.register-cta a:hover{text-decoration:underline;}

.back-home{text-align:center;margin-top:18px;}

.back-home a{
  font-size:13px;
  color:var(--color-text-muted);
  text-decoration:none;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.back-home a:hover{color:var(--color-text);}

.security-note{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--color-success-bg);
  color:#166534;
  padding:14px 16px;
  border-radius:var(--radius-md);
  font-size:13px;
  font-weight:600;
  margin-top:var(--space-4);
}

.security-note i{font-size:18px;color:var(--color-success);}

.legal-links{
  text-align:center;
  margin-top:20px;
  font-size:12px;
}

.legal-links a{
  color:var(--color-text-subtle);
  margin:0 8px;
  text-decoration:none;
}

.legal-links a:hover{color:var(--color-text-muted);}

/* ---------- .otp-card : carte OTP centrée (icône + champ + bouton unique) ---------- */

.otp-card{
  width:100%;
  max-width:520px;
  background:var(--color-surface);
  border-radius:var(--radius-xl);
  padding:40px;
  box-shadow:var(--shadow-card-strong);
}

.otp-card .logo-box{text-align:center;margin-bottom:25px;}
.otp-card .logo-box img{height:80px;}

.otp-card .icon-circle{
  width:90px;height:90px;
  margin:0 auto 25px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:40px;
  background:var(--color-info-bg);
  color:var(--color-primary);
}

.theme-danger .otp-card .icon-circle{
  background:var(--color-danger-bg);
  color:var(--color-danger);
}

.theme-success .otp-card .icon-circle{
  background:var(--color-success-bg);
  color:var(--color-success);
}

.theme-success .input-group input:focus,
.theme-success .otp-input:focus{
  border-color:var(--color-success);
  box-shadow:0 0 0 4px rgba(21,128,61,0.10);
}

/* variante verte de la famille .auth-card, utilisée par l'espace publicitaire */
.theme-success .brand-panel{background:linear-gradient(135deg,#052e1a,#065f36,var(--color-success));}
.theme-success .brand-panel h1 span{color:#bbf7d0;}
.theme-success .brand-features .feature-item i{color:#bbf7d0;}
.theme-success .form-panel .section-badge{background:var(--color-success-bg);color:var(--color-success);}
.theme-success .toggle-password:hover{color:var(--color-success);}
.theme-success .register-cta a{color:var(--color-success);}

.otp-card .otp-title{
  font-size:32px;
  font-weight:800;
  color:var(--color-text);
  text-align:center;
  margin-bottom:10px;
}

.otp-card .otp-subtitle{
  text-align:center;
  color:var(--color-text-muted);
  line-height:1.7;
  margin-bottom:var(--space-3);
}

.otp-input{
  width:100%;
  height:65px;
  border:2px solid var(--color-border);
  border-radius:16px;
  text-align:center;
  font-size:28px;
  font-weight:700;
  letter-spacing:10px;
  outline:none;
  transition:.2s;
  font-family:var(--font-body);
}

.otp-input:focus{
  border-color:var(--color-primary);
  box-shadow:0 0 0 5px rgba(30,64,175,0.10);
}

.otp-card .timer{
  margin-top:15px;
  text-align:center;
  font-size:14px;
  color:var(--color-text-muted);
}

.otp-card .links{margin-top:25px;text-align:center;}
.otp-card .links a{text-decoration:none;font-weight:700;color:var(--color-primary);}
.otp-card .links p{margin-bottom:10px;color:var(--color-text-muted);}

.otp-card .footnote{
  margin-top:25px;
  text-align:center;
  font-size:13px;
  color:var(--color-text-subtle);
}

/* ---------- .wizard-card : étapes courtes (bascule / suppression de compte) ---------- */

.wizard-card{
  width:100%;
  max-width:640px;
  background:var(--color-surface);
  border-radius:var(--radius-lg);
  padding:45px;
  box-shadow:var(--shadow-card);
}

.wizard-icon{
  width:64px;height:64px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  margin-bottom:20px;
  background:var(--color-danger-bg);
  color:var(--color-danger);
}

.wizard-icon.wizard-icon--warning{
  background:var(--color-warning-bg);
  color:var(--color-warning);
}

.wizard-icon.wizard-icon--neutral{
  background:var(--color-info-bg);
  color:var(--color-primary);
}

.wizard-card h1{
  font-size:24px;
  font-weight:800;
  color:var(--color-text);
  margin-bottom:12px;
}

.wizard-card .desc{
  color:#475569;
  line-height:1.7;
  margin-bottom:22px;
}

.wizard-card input[type="text"],
.wizard-card input[type="password"]{
  width:100%;
  height:52px;
  padding:0 16px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  font-size:16px;
  font-family:var(--font-body);
  outline:none;
  margin-bottom:var(--space-3);
  transition:.2s;
}

.wizard-card input:focus,
.wizard-card textarea:focus{border-color:var(--color-primary);}
.theme-danger .wizard-card input:focus,
.theme-danger .wizard-card textarea:focus{border-color:var(--color-danger);}
.theme-warning .wizard-card input:focus,
.theme-warning .wizard-card textarea:focus{border-color:var(--color-warning);}

.wizard-card textarea{
  width:100%;
  min-height:130px;
  padding:14px 16px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  font-size:15px;
  font-family:var(--font-body);
  outline:none;
  margin-bottom:var(--space-3);
  resize:vertical;
  transition:.2s;
}

.wizard-card input.otp-style{
  font-size:20px;
  letter-spacing:6px;
  text-align:center;
}

.btn-row{display:flex;gap:14px;flex-wrap:wrap;}

.btn-continuer{
  flex:1;
  min-width:180px;
  background:var(--color-danger);
  color:white;
  border:none;
  padding:16px 24px;
  border-radius:var(--radius-md);
  font-weight:700;
  font-size:15px;
  cursor:pointer;
  transition:.2s;
}

.btn-continuer.btn-continuer--warning{background:var(--color-warning);}
.btn-continuer.btn-continuer--neutral{background:var(--color-primary);}
.btn-continuer:hover{transform:translateY(-2px);}

.btn-annuler{
  flex:1;
  min-width:180px;
  background:#f1f5f9;
  color:#334155;
  border:none;
  padding:16px 24px;
  border-radius:var(--radius-md);
  font-weight:700;
  font-size:15px;
  cursor:pointer;
  text-decoration:none;
  text-align:center;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:.2s;
}

.btn-annuler:hover{background:#e2e8f0;}

.btn-annuler.btn-annuler--positive{background:var(--color-success);color:white;}
.btn-annuler.btn-annuler--positive:hover{background:var(--color-success);transform:translateY(-2px);}

.consequences{list-style:none;margin-bottom:var(--space-4);}
.consequences li{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid #f1f5f9;color:#334155;font-size:14px;}
.consequences li i{margin-top:3px;width:16px;flex-shrink:0;}
.consequences li span{flex:1;}
.consequences li i.ic-perte{color:var(--color-warning);}
.consequences li i.ic-ok{color:var(--color-success);}

.warning-box{
  background:var(--color-warning-bg);
  color:var(--color-warning);
  padding:16px 18px;
  border-radius:var(--radius-md);
  font-size:14px;
  font-weight:600;
  margin-bottom:var(--space-4);
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.quote-box{
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:var(--radius-md);
  padding:16px 18px;
  color:#334155;
  font-size:14px;
  font-style:italic;
  margin-bottom:var(--space-4);
}

/* ---------- .legal-page : CGU / mentions légales / confidentialité ---------- */

.legal-body{background:var(--color-bg);padding:50px 20px;}

.legal-page{
  width:100%;
  max-width:820px;
  margin:0 auto;
  background:var(--color-surface);
  border-radius:var(--radius-lg);
  padding:50px 55px;
  box-shadow:var(--shadow-card);
}

.legal-page .table-scroll{
  overflow-x:auto;
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
}

.legal-page table{width:100%;border-collapse:collapse;min-width:480px;margin-top:15px;}
.legal-page th,.legal-page td{text-align:left;padding:12px;font-size:14px;border-bottom:1px solid #f1f5f9;}
.legal-page th{color:var(--color-text);background:#f8fbff;}
.legal-page th.col-label{width:220px;}
.legal-page td{color:#475569;}

.legal-page .header{display:flex;align-items:center;gap:16px;margin-bottom:10px;}
.legal-page .header i{font-size:30px;color:var(--color-primary);}
.legal-page h1{font-size:28px;font-weight:800;color:var(--color-text);}
.legal-page .updated{color:var(--color-text-subtle);font-size:13px;margin-bottom:35px;}

.legal-page h2{
  font-size:18px;font-weight:800;color:var(--color-text);
  margin-top:35px;margin-bottom:12px;
  display:flex;align-items:center;gap:10px;
}
.legal-page h2 i{color:var(--color-primary);font-size:16px;}

.legal-page p,.legal-page li{color:#475569;font-size:15px;line-height:1.8;}
.legal-page ul{margin-left:20px;margin-top:8px;}
.legal-page li{margin-bottom:6px;}
.legal-page a{color:var(--color-primary);font-weight:700;}

.back-btn{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:40px;
  background:var(--color-primary);
  color:white;
  text-decoration:none;
  padding:14px 28px;
  border-radius:var(--radius-md);
  font-weight:700;
  transition:.2s;
}
.back-btn:hover{transform:translateY(-3px);}

.consent-row{display:flex;align-items:flex-start;gap:10px;margin-top:var(--space-3);font-size:14px;color:#334155;}
.consent-row input{margin-top:3px;}
.consent-row label{cursor:pointer;}
.consent-row a{color:var(--color-primary);font-weight:700;}

/* ---------- .contact-card : fil de discussion Nous contacter ---------- */

.contact-card{
  width:100%;
  max-width:680px;
  background:var(--color-surface);
  border-radius:var(--radius-lg);
  padding:40px;
  box-shadow:var(--shadow-card-strong);
  height:fit-content;
}

.contact-card .page-title{
  font-size:24px;font-weight:800;color:var(--color-text);
  display:flex;align-items:center;gap:12px;margin-bottom:8px;
}
.contact-card .page-title i{color:var(--color-primary);}
.contact-card .subtitle{color:var(--color-text-muted);font-size:14px;margin-bottom:25px;}

.thread{
  background:#f8fbff;
  border-radius:16px;
  padding:20px;
  max-height:420px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-bottom:25px;
}

.bubble{max-width:80%;padding:14px 18px;border-radius:16px;font-size:14px;line-height:1.6;white-space:pre-wrap;}
.bubble.company{align-self:flex-end;background:var(--color-primary);color:white;border-bottom-right-radius:4px;}
.bubble.admin{align-self:flex-start;background:white;color:#334155;border:1px solid #e2e8f0;border-bottom-left-radius:4px;}
.bubble .meta{display:block;font-size:11px;opacity:.7;margin-top:6px;}

.empty-state{text-align:center;color:var(--color-text-subtle);padding:40px 20px;font-size:14px;}
.empty-state i{font-size:36px;margin-bottom:12px;display:block;}

.contact-card textarea{
  width:100%;padding:16px;border:2px solid #e2e8f0;border-radius:var(--radius-md);
  font-size:14px;font-family:var(--font-body);resize:vertical;min-height:100px;margin-bottom:15px;
}
.contact-card textarea:focus{outline:none;border-color:var(--color-primary);}

.back-link{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--color-primary);text-decoration:none;font-weight:700;font-size:13px;
  margin-bottom:20px;
}

/* ---------- badges de statut sémantiques ---------- */

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 12px;
  border-radius:var(--radius-xl);
  font-size:12px;
  font-weight:700;
}

.badge-success{background:var(--color-success-bg);color:var(--color-success);}
.badge-danger{background:var(--color-danger-bg);color:var(--color-danger);}
.badge-warning{background:var(--color-warning-bg);color:var(--color-warning);}
.badge-neutral{background:#f1f5f9;color:#475569;}

/* ---------- responsive commun ---------- */

@media(max-width:900px){
  .auth-card{grid-template-columns:1fr;max-width:520px;}
  .brand-panel{padding:35px 30px;text-align:center;align-items:center;}
  .brand-logo{justify-content:center;}
  .brand-panel h1{font-size:28px;}
  .brand-panel p{max-width:100%;}
  .brand-features{display:none;}
  .form-panel{padding:35px 30px;}
}

@media(max-width:600px){
  .otp-card{padding:25px;}
  .otp-card .otp-title{font-size:26px;}
  .otp-input{font-size:22px;letter-spacing:6px;}
  .wizard-card{padding:28px;}
  .legal-page{padding:32px 24px;}
}

@media(max-width:480px){
  .auth-body{padding:0;}
  .auth-body .auth-card{border-radius:0;min-height:100vh;}
}

/* ---------- .register-* : assistant d'inscription en 5 étapes ---------- */

.register-shell{max-width:1300px;margin:0 auto;}
.register-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-3);}
.register-topbar .logo{height:75px;}
.register-topbar-links{display:flex;align-items:center;gap:20px;}
.register-topbar a{text-decoration:none;font-weight:700;color:white;display:inline-flex;align-items:center;gap:8px;}

.register-card{background:var(--color-surface);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-card-strong);}

.register-hero{padding:40px;background:linear-gradient(135deg,var(--color-navy-800),var(--color-primary));color:white;}
.register-hero h1{font-size:42px;font-weight:800;margin-bottom:12px;}
.register-hero p{opacity:.9;line-height:1.8;max-width:700px;}

.register-body{padding:40px;}

.progress-track{height:10px;background:#e5e7eb;border-radius:50px;overflow:hidden;margin-bottom:var(--space-4);}
.progress-fill{height:100%;background:var(--color-success);transition:width .3s ease;}

.register-body .section-badge{background:var(--color-success-bg);color:var(--color-success);margin-bottom:15px;}
.register-body .section-title{font-size:28px;font-weight:800;color:var(--color-text);margin-bottom:5px;}
.register-body .section-subtitle{color:var(--color-text-muted);margin-bottom:var(--space-3);}

.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3);}
.form-grid .full{grid-column:1/-1;}

.phone-container{display:flex;gap:10px;}
.phone-container .country-code{width:150px;flex:0 0 150px;}
.phone-container .phone-number{flex:1 1 auto;}

.activity-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:15px;margin-top:15px;}
.activity-card{cursor:pointer;}
.activity-card input{display:none;}
.activity-content{background:#f8fafc;border:2px solid #e5e7eb;border-radius:18px;padding:22px;transition:.2s;height:100%;}
.activity-card input:checked + .activity-content{border-color:var(--color-primary);background:var(--color-info-bg);}
.activity-content:hover{transform:translateY(-3px);}
.activity-icon{font-size:26px;color:var(--color-primary);margin-bottom:10px;}
.activity-title{font-size:16px;font-weight:700;color:var(--color-text);margin-bottom:6px;}
.activity-desc{font-size:13px;line-height:1.5;color:var(--color-text-muted);}

.logo-preview-wrap{text-align:center;margin-top:20px;}
.logo-preview-wrap img{display:none;max-width:180px;max-height:180px;border-radius:18px;box-shadow:0 10px 25px rgba(0,0,0,.15);}

.register-step-actions{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:var(--space-4);}
.register-step-actions .btn{width:auto;flex:1;}
.register-back-link{display:inline-flex;align-items:center;gap:8px;color:var(--color-text-muted);text-decoration:none;font-weight:700;font-size:14px;white-space:nowrap;}
.register-back-link:hover{color:var(--color-text);}

@media(max-width:900px){
  .form-grid{grid-template-columns:1fr;}
  .phone-container{flex-direction:column;}
  .phone-container .country-code{width:100%;}
  .register-hero h1{font-size:30px;}
  .register-body{padding:25px;}
  .register-step-actions{flex-direction:column-reverse;align-items:stretch;}
}