/* Bridge vers tokens.css — les variables --login-* sont derivees des tokens */
:root {
      --purple:      var(--color-primary);
      --purple-dark: var(--color-primary-hover);
      --teal:        var(--color-success);
      --gold:        var(--color-warning);

      --login-bg:          var(--color-bg);
      --login-glow-purple: var(--color-primary-soft);
      --login-glow-teal:   var(--color-success-bg);
      --login-card-bg:     var(--color-card-bg);
      --login-card-border: var(--color-border);
      --login-card-shadow: var(--shadow-xl);
      --login-text:        var(--color-text-strong);
      --login-text-sub:    var(--color-text-muted);
      --login-text-mid:    var(--color-text-muted);
      --login-text-soft:   var(--color-text-body);
      --login-text-strong: var(--color-text-strong);
      --login-text-faint:  var(--color-text-faint);
      --login-text-muted:  var(--color-text-faint);
      --login-text-dim:    var(--color-text-faint);
      --login-input-bg:    var(--color-input-bg);
      --login-input-border:var(--color-input-border);
      --login-input-focus: var(--color-primary-soft);
      --login-divider:     var(--color-divider);
      --login-kc-bg:       transparent;
      --login-kc-hover:    rgba(221,23,156,0.10);
      --login-email-bg:    var(--color-primary-soft);
      --login-email-border:var(--color-border-strong);
      --login-error-bg:    var(--color-danger-bg);
      --login-error-border:rgba(239,68,68,0.25);
      --login-error-text:  var(--color-danger);
      --login-back-hover:  var(--color-chip-bg);
      --login-logo-shadow: drop-shadow(0 4px 16px rgba(123,92,196,0.4));
      --login-toggle-bg:   var(--color-chip-bg);
      --login-toggle-hover:var(--color-sidebar-hover-bg);
      --login-toggle-text: var(--color-text-faint);
    }

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

    body {
      font-family: var(--font-sans);
      background: var(--login-bg);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.3s;
    }

    body::before {
      content: '';
      position: fixed;
      top: -150px; left: -150px;
      width: 500px; height: 500px;
      background: radial-gradient(circle, var(--login-glow-purple) 0%, transparent 70%);
      pointer-events: none;
    }
    body::after {
      content: '';
      position: fixed;
      bottom: -100px; right: -100px;
      width: 400px; height: 400px;
      background: radial-gradient(circle, var(--login-glow-teal) 0%, transparent 70%);
      pointer-events: none;
    }

    .login-card {
      background: var(--login-card-bg);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid var(--login-card-border);
      border-radius: 24px;
      padding: 44px 44px 36px;
      width: 100%;
      max-width: 420px;
      box-shadow: var(--login-card-shadow);
      position: relative;
      z-index: 1;
      transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
    }
    /* Card translucide en dark pour effet frosted glass (visible dans les mockups) */
    [data-theme="dark"] .login-card {
      background: rgba(255,255,255,0.04);
      border-color: rgba(255,255,255,0.08);
      box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04) inset;
    }

    .logo-wrap {
      display: flex;
      justify-content: center;
      margin-bottom: 24px;
    }
    .logo-wrap img {
      width: 68px; height: 68px;
      object-fit: contain;
      filter: var(--login-logo-shadow);
    }

    h1 {
      color: var(--login-text);
      text-align: center;
      font-size: 21px;
      font-weight: 700;
      letter-spacing: -0.3px;
      margin-bottom: 5px;
      transition: color 0.3s;
    }

    /* Marque deux lignes : « Mon Pilote » en gros, « Hexagone » dessous */
    .app-brand {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      line-height: 1.1;
    }
    .app-brand-main {
      font-size: 28px;
      font-weight: 800;
      letter-spacing: -0.5px;
    }
    .app-brand-sub {
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 0.5px;
      color: var(--login-text-sub);
      text-transform: uppercase;
    }

    .subtitle {
      color: var(--login-text-sub);
      text-align: center;
      font-size: 13px;
      margin-bottom: 28px;
      transition: color 0.3s;
    }

    .color-bar {
      display: flex;
      gap: 6px;
      justify-content: center;
      margin-bottom: 28px;
    }
    .color-bar span { height: 3px; border-radius: 2px; }
    .cb-purple { width: 36px; background: var(--purple); }
    .cb-teal   { width: 22px; background: var(--teal); }
    .cb-gold   { width: 14px; background: var(--gold); }

    .error-box {
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--login-error-bg);
      border: 1px solid var(--login-error-border);
      color: var(--login-error-text);
      padding: 10px 14px;
      border-radius: 10px;
      font-size: 13px;
      margin-bottom: 18px;
      transition: background 0.3s, border-color 0.3s, color 0.3s;
    }

    .field { margin-bottom: 16px; }

    label {
      display: block;
      color: var(--login-text-mid);
      font-size: 12.5px;
      font-weight: 500;
      margin-bottom: 7px;
      letter-spacing: 0.02em;
      transition: color 0.3s;
    }

    input {
      width: 100%;
      padding: 11px 14px;
      background: var(--login-input-bg);
      border: 1px solid var(--login-input-border);
      border-radius: 10px;
      color: var(--login-text);
      font-family: var(--font-sans);
      font-size: 14px;
      outline: none;
      transition: border-color 0.2s, background 0.2s, color 0.3s;
    }
    input:focus {
      border-color: var(--purple);
      background: var(--login-input-focus);
    }
    input::placeholder { color: var(--login-text-dim); }

    /* Primary button */
    .btn-primary {
      width: 100%;
      padding: 13px;
      margin-top: 6px;
      background: linear-gradient(135deg, var(--purple) 0%, var(--purple-dark) 100%);
      color: white;
      border: none;
      border-radius: 10px;
      font-family: var(--font-sans);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: transform 0.15s, box-shadow 0.15s;
      box-shadow: var(--shadow-lg);
      letter-spacing: 0.02em;
    }
    .btn-primary:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow-xl);
    }
    .btn-primary:active { transform: translateY(0); }

    /* Divider */
    .divider {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 20px 0;
    }
    .divider-line {
      flex: 1;
      height: 1px;
      background: var(--login-divider);
    }
    .divider-text {
      color: var(--login-text-dim);
      font-size: 11px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      white-space: nowrap;
      transition: color 0.3s;
    }

    /* Angle anime du trait laser qui parcourt le bouton SSO Hexagone */
    @property --laser-angle {
      syntax: '<angle>';
      inherits: false;
      initial-value: 0deg;
    }

    /* Bouton SSO Hexagone */
    .btn-keycloak {
      position: relative;          /* ancre le trait laser (::before) */
      z-index: 0;                  /* contexte d'empilement pour le pseudo en z-index negatif */
      width: 100%;
      padding: 12px 16px;
      background: var(--login-kc-bg);
      border: 1px solid rgba(221,23,156,0.3);  /* bordure statique discrete (rose Hexagone) */
      border-radius: 10px;
      color: var(--login-text-soft);
      font-family: var(--font-sans);
      font-size: 13.5px;
      font-weight: 500;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      text-decoration: none;
      transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
    }

    /* Trait lumineux « laser » : une comete (point vif + trainee) qui fait le tour du bouton.
       L'interieur du bouton reste translucide — on ne revele qu'un anneau de bordure via le masque. */
    .btn-keycloak::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;                 /* derriere le contenu (logo/texte/badge), au-dessus du fond */
      border-radius: inherit;
      padding: 2px;                /* epaisseur du trait laser */
      /* Comete : transparent sur ~62% du tour, puis montee rose -> vert (marque Hexagone) -> pointe vive */
      background: conic-gradient(
        from var(--laser-angle),
        transparent 0%,
        transparent 62%,
        rgba(221,23,156,0) 64%,
        var(--purple) 80%,
        var(--teal) 92%,
        #eafff9 99%,
        transparent 100%
      );
      /* Ne garder que l'anneau de bordure : tout le contour MOINS l'interieur (content-box) */
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
              mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
              mask-composite: exclude;
      filter: drop-shadow(0 0 4px rgba(0,175,159,0.55));  /* halo vert de la comete */
      animation: kcLaserSpin 4s linear infinite;
      pointer-events: none;
    }

    /* Rotation continue de l'angle du degrade -> la comete parcourt le perimetre */
    @keyframes kcLaserSpin {
      to { --laser-angle: 360deg; }
    }

    .btn-keycloak:hover {
      background: var(--login-kc-hover);
      border-color: rgba(221,23,156,0.55);
      color: var(--login-text);
      box-shadow: 0 4px 16px rgba(221,23,156,0.18);
    }
    /* Au survol : la comete accelere et son halo s'intensifie */
    .btn-keycloak:hover::before {
      animation-duration: 1.6s;
      filter: drop-shadow(0 0 8px rgba(0,175,159,0.85)) brightness(1.25);
    }

    /* Accessibilite : pas de mouvement si l'utilisateur le demande -> anneau statique discret */
    @media (prefers-reduced-motion: reduce) {
      .btn-keycloak::before {
        animation: none;
        background: linear-gradient(120deg, var(--purple), var(--teal));
        opacity: 0.45;
      }
      .btn-keycloak:hover::before { filter: none; }
    }

    .btn-keycloak .kc-logo {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
    }
    .btn-keycloak .kc-badge {
      font-size: 9px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      padding: 2px 6px;
      border-radius: 4px;
      background: var(--color-primary-soft);  /* fond rose tres clair (token marque) */
      color: var(--teal);                     /* texte vert Hexagone */
      margin-left: auto;
    }

    /* Role pills */
    .roles-hint {
      margin-top: 22px;
      display: flex;
      gap: 6px;
      justify-content: center;
      flex-wrap: wrap;
    }
    .role-pill {
      padding: 3px 10px;
      border-radius: 20px;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.04em;
    }
    .rp-admin    { background: rgba(123,92,196,0.15); color: #A080E0; border: 1px solid rgba(123,92,196,0.2); }
    .rp-cn       { background: rgba(59,130,246,0.12); color: #60A5FA; border: 1px solid rgba(59,130,246,0.2); }
    .rp-sales    { background: rgba(23,181,160,0.12); color: #2EC9B3; border: 1px solid rgba(23,181,160,0.2); }
    .rp-am       { background: rgba(16,185,129,0.12); color: #34D399; border: 1px solid rgba(16,185,129,0.2); }
    .rp-customer { background: rgba(245,168,32,0.12); color: #F5A820; border: 1px solid rgba(245,168,32,0.2); }

    .footer {
      margin-top: 24px;
      text-align: center;
      color: var(--login-text-faint);
      font-size: 11px;
      transition: color 0.3s;
    }

    /* ── Two-step login ── */
    #loginStep1, #loginStep2 {
      animation: stepIn 0.2s ease;
    }
    @keyframes stepIn {
      from { opacity: 0; transform: translateY(5px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .step-error {
      background: var(--login-error-bg);
      border: 1px solid var(--login-error-border);
      color: var(--login-error-text);
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 12.5px;
      margin-top: -6px;
      margin-bottom: 12px;
      transition: background 0.3s, border-color 0.3s, color 0.3s;
    }

    .email-confirmed {
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--login-email-bg);
      border: 1px solid var(--login-email-border);
      border-radius: 10px;
      padding: 10px 14px;
      font-size: 13px;
      color: var(--login-text-soft);
      transition: background 0.3s, border-color 0.3s, color 0.3s;
    }
    .email-confirmed span:first-child { font-size: 15px; flex-shrink: 0; }
    .email-confirmed span:nth-child(2) {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--login-text-strong);
      font-weight: 500;
    }

    .back-btn {
      background: transparent;
      border: none;
      color: var(--login-text-muted);
      font-family: var(--font-sans);
      font-size: 11.5px;
      font-weight: 500;
      cursor: pointer;
      padding: 2px 6px;
      border-radius: 4px;
      transition: color 0.15s, background 0.15s;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .back-btn:hover {
      color: var(--login-text-soft);
      background: var(--login-back-hover);
    }

    /* ── Theme toggle button ── */
    .theme-toggle {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 34px;
      height: 34px;
      border: none;
      border-radius: 10px;
      background: var(--login-toggle-bg);
      color: var(--login-toggle-text);
      font-size: 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s, color 0.2s, transform 0.2s;
      z-index: 2;
      line-height: 1;
    }
    .theme-toggle:hover {
      background: var(--login-toggle-hover);
      color: var(--login-text-mid);
      transform: scale(1.08);
    }

    /* ════════════════════════════════════════════════════════════════
       Refonte login — layout 2 colonnes (.mp-*) + thème dark ameliore
       (panneau de droite recolore en sombre via --mp-brand-grad)
       N.B. : classes prefixees mp- pour ne pas impacter les autres pages
       qui partagent login.css (login_otp, register, error).
       ════════════════════════════════════════════════════════════════ */
    :root {
      --mp-bg:#ffffff; --mp-bg-input:#F6F6F6; --mp-t1:#181B24; --mp-t2:#6B7280;
      --mp-t3:#9AA0AD; --mp-label:#374151; --mp-bd:#E5E7EB; --mp-sso:#ffffff;
      --mp-ring:#E5E7EB; --mp-hex-hover:#FCF2F8; --mp-int-hover:#F2F2FF;
      --mp-brand-grad: radial-gradient(120% 100% at 100% 0%,#4A1059 0%,#5B0F6B 35%,#8E0F86 65%,#DC179B 100%);
    }
    [data-theme="dark"] {
      --mp-bg:#13151C; --mp-bg-input:#1E212B; --mp-t1:#F2F4F8; --mp-t2:#9AA1B0;
      --mp-t3:#6E7484; --mp-label:#C3C8D2; --mp-bd:#2A2E3A; --mp-sso:#1A1D26;
      --mp-ring:#2A2E3A; --mp-hex-hover:#23191F; --mp-int-hover:#191A2B;
      /* AMELIORATION dark : panneau de droite sombre (au lieu du magenta vif) */
      --mp-brand-grad: radial-gradient(120% 100% at 100% 0%,#0e0a1f 0%,#1b0c30 35%,#3a0f4a 65%,#6f1257 100%);
    }

    .mp-login-body { margin:0; padding:0; min-height:100vh; display:block; background:var(--mp-bg);
      font-family:'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; }
    /* Neutralise les halos decoratifs body::before/::after de l'ancien login
       (radial-gradient fixed) qui obstruaient le logo/titre en theme clair. */
    .mp-login-body::before, .mp-login-body::after { content:none !important; display:none !important; }
    .mp-root, .mp-root * { box-sizing:border-box; }
    .mp-root { display:flex; min-height:100vh; width:100%; background:var(--mp-bg); color:var(--mp-t1);
      transition:background-color .22s ease, color .22s ease; }

    /* ── Colonne gauche ── */
    .mp-left { flex:1 1 50%; display:flex; flex-direction:column; padding:48px 56px; min-width:0; }
    .mp-topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .mp-lockup { display:flex; align-items:center; gap:12px; }
    .mp-hex-logo { width:38px; height:38px; flex:none; }
    .mp-wordmark { display:flex; flex-direction:column; line-height:1; }
    .mp-wm-main { font-size:18px; font-weight:700; letter-spacing:-0.02em; color:var(--mp-t1); }
    .mp-wm-sub { font-size:10px; font-weight:600; letter-spacing:0.14em; color:var(--mp-t3); margin-top:3px; }
    .mp-theme-toggle { width:40px; height:40px; flex:none; border-radius:10px; border:1px solid var(--mp-bd);
      background:var(--mp-sso); color:var(--mp-t2); cursor:pointer; display:flex; align-items:center;
      justify-content:center; transition:background-color .16s, border-color .16s; }
    .mp-theme-toggle:hover { border-color:var(--mp-t3); }
    [data-theme="light"] .mp-icon-sun { display:none; }
    [data-theme="dark"] .mp-icon-moon { display:none; }

    .mp-form-area { flex:1; display:flex; flex-direction:column; justify-content:center; }
    .mp-form-block { width:100%; max-width:380px; margin:0 auto; }
    .mp-title { font-size:34px; font-weight:700; letter-spacing:-0.025em; margin:0 0 8px; color:var(--mp-t1); text-align:left; }
    .mp-subtitle { font-size:15px; color:var(--mp-t2); margin:0 0 8px; line-height:1.5; text-align:left; }
    .mp-colorbar { display:flex; gap:6px; margin:14px 0 34px; }
    .mp-colorbar span { height:4px; border-radius:99px; }
    .mp-colorbar .cb1 { width:26px; background:#DC179B; }
    .mp-colorbar .cb2 { width:14px; background:#00AF9F; }
    .mp-colorbar .cb3 { width:14px; background:#FF7A1A; }

    .mp-alert { display:flex; align-items:center; gap:8px; background:rgba(220,23,155,0.08);
      border:1px solid rgba(220,23,155,0.25); color:var(--mp-t1); border-radius:10px; padding:10px 14px;
      font-size:13px; margin-bottom:16px; }

    .mp-label { display:block; font-size:13px; font-weight:600; color:var(--mp-label); margin-bottom:8px; }
    .mp-input { width:100%; height:50px; padding:0 16px; font-family:inherit; font-size:15px; color:var(--mp-t1);
      background:var(--mp-bg-input); border:1px solid var(--mp-bd); border-radius:10px; outline:none;
      transition:border-color .16s, box-shadow .16s, background-color .22s; }
    .mp-input:focus { border-color:#DC179B; box-shadow:0 0 0 3px rgba(220,23,155,0.15); }
    .mp-input::placeholder { color:var(--mp-t3); }
    .mp-field-error { color:#DC179B; font-size:12.5px; margin-top:8px; }

    .mp-btn-primary { width:100%; height:52px; margin-top:20px; border:none; border-radius:10px; cursor:pointer;
      font-family:inherit; font-size:15.5px; font-weight:600; color:#fff;
      background:linear-gradient(90deg,#DC179B 0%,#B8128A 100%); box-shadow:0 8px 20px rgba(220,23,155,0.28);
      transition:filter .16s, box-shadow .16s; display:flex; align-items:center; justify-content:center; gap:8px; }
    .mp-btn-primary:hover { filter:brightness(1.05); box-shadow:0 10px 26px rgba(220,23,155,0.36); }
    .mp-btn-primary:active { filter:brightness(0.96); }
    .mp-arrow { font-size:17px; line-height:1; }

    .mp-email-confirmed { display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--mp-t2);
      background:var(--mp-bg-input); border:1px solid var(--mp-bd); border-radius:10px; padding:10px 14px; }
    .mp-email-confirmed #confirmedEmail { flex:1; color:var(--mp-t1); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .mp-back-btn { background:none; border:none; color:#DC179B; font-family:inherit; font-size:12.5px; font-weight:600; cursor:pointer; flex:none; }

    .mp-divider { display:flex; align-items:center; gap:14px; margin:30px 0; }
    .mp-divider-line { flex:1; height:1px; background:var(--mp-bd); }
    .mp-divider-text { font-size:11px; font-weight:600; letter-spacing:0.1em; color:var(--mp-t3); }

    /* ── Boutons SSO : anneau conique rotatif (clip par overflow du wrap) ── */
    .mp-sso-list { display:flex; flex-direction:column; gap:12px; }
    @keyframes mp-spin { to { transform:translate(-50%,-50%) rotate(360deg); } }
    .mp-sso-wrap { position:relative; border-radius:11px; padding:1.6px; background:var(--mp-ring); overflow:hidden; }
    .mp-sso-wrap::before { content:''; position:absolute; top:50%; left:50%; width:680px; height:680px;
      transform:translate(-50%,-50%); animation:mp-spin 3.4s linear infinite; z-index:0; pointer-events:none; }
    .mp-sso--hexagone::before  { background:conic-gradient(from 0deg,transparent 0deg 290deg,#FBCDE9 312deg,#DC179B 338deg,#ffffff 350deg,#DC179B 360deg); }
    /* Bouton secondaire (Interstis) : la comete tourne en SENS INVERSE du bouton principal. */
    .mp-sso--interstis::before { background:conic-gradient(from 0deg,transparent 0deg 290deg,#CFCEFF 312deg,#4541FF 338deg,#ffffff 350deg,#4541FF 360deg); animation-direction:reverse; animation-delay:-1.7s; }
    .mp-sso--plain::before     { background:none; }
    .mp-sso { position:relative; z-index:1; width:100%; height:50px; border:none; border-radius:9.6px;
      background:var(--mp-sso); cursor:pointer; font-family:inherit; display:flex; align-items:center; gap:12px;
      padding:0 14px; text-decoration:none; transition:background .16s; }
    .mp-sso--hexagone .mp-sso:hover  { background:var(--mp-hex-hover); }
    .mp-sso--interstis .mp-sso:hover { background:var(--mp-int-hover); }
    .mp-sso--plain .mp-sso:hover     { background:var(--mp-bg-input); }
    .mp-sso-chip { width:30px; height:30px; flex:none; border-radius:8px; display:flex; align-items:center; justify-content:center; }
    .mp-sso-chip--hexagone  { background:#FCE7F4; }
    .mp-sso-chip--interstis { background:#E8E8FF; }
    .mp-sso-chip--plain     { background:var(--mp-bg-input); }
    .mp-sso-dot { width:13px; height:13px; border-radius:50%; background:#4541FF; }
    .mp-sso--plain .mp-sso-dot { background:var(--mp-t2); }
    .mp-sso-label { flex:1; text-align:left; font-size:14.5px; font-weight:600; color:var(--mp-t1); }
    .mp-sso-badge { font-size:10px; font-weight:700; letter-spacing:0.06em; border-radius:5px; padding:4px 7px; }
    .mp-sso-badge--hexagone  { color:#DC179B; background:#FCE7F4; }
    .mp-sso-badge--interstis { color:#4541FF; background:#E8E8FF; }
    .mp-sso-badge--plain     { color:var(--mp-t2); background:var(--mp-bg-input); }

    .mp-version { font-size:12.5px; color:var(--mp-t3); text-align:center; margin:32px 0 0; }

    /* ── Colonne droite : panneau de marque (couleur change en dark) ── */
    .mp-brand { flex:1 1 50%; position:relative; overflow:hidden; background:var(--mp-brand-grad);
      display:flex; flex-direction:column; justify-content:space-between; padding:64px 60px;
      transition:background .22s ease; }
    .mp-brand-watermark { position:absolute; right:-180px; top:40px; width:640px; height:640px; opacity:0.07; }
    .mp-brand-headline { position:relative; max-width:520px; }
    .mp-brand-headline h2 { font-size:38px; line-height:1.18; font-weight:700; letter-spacing:-0.02em; color:#fff; margin:0; text-align:left; }
    .mp-brand-headline em { font-style:italic; }
    .mp-brand-squiggle { width:220px; height:26px; margin-top:6px; display:block; }
    .mp-brand-hex { position:relative; align-self:flex-end; }

    @media (prefers-reduced-motion: reduce) { .mp-sso-wrap::before { animation:none; } }

    @media (max-width:900px) {
      .mp-brand { display:none; }
      .mp-left { flex-basis:100%; padding:40px 24px; }
    }
    @media (max-width:480px) {
      .mp-left { padding:28px 18px; }
      .mp-title { font-size:28px; }
    }