:root {
  --ma-azul: #0d1b3e;
  --ma-azul-900: #0d1b3e;
  --ma-azul-700: #26375c;
  --ma-azul-500: #526487;
  --ma-azul-100: #e7ebf2;
  --ma-azul-50: #f3f5f8;
  --ma-amarelo: #f5c800;
  --ma-amarelo-700: #806800;
  --ma-amarelo-200: #fbe680;
  --ma-amarelo-100: #fdf2b8;
  --ma-amarelo-50: #fffbea;
  --ma-branco: #ffffff;
  --ma-superficie: #f7f8fa;
  --ma-texto: var(--ma-azul);
  --ma-muted: #526078;
  --ma-borda: rgba(13, 27, 62, 0.12);
  --ma-borda-forte: rgba(13, 27, 62, 0.2);
  --ma-sucesso: #087a55;
  --ma-perigo: #b4233a;
  --ma-aviso: #806800;
  --ma-raio-card: 24px;
  --ma-raio-input: 14px;
  --ma-pill: 999px;
  --ma-sombra: 0 18px 50px rgba(13, 27, 62, 0.08);
  --ma-sombra-suave: 0 8px 24px rgba(13, 27, 62, 0.06);

  /* Compatibilidade com os templates existentes. */
  --bg: var(--ma-superficie);
  --panel: var(--ma-branco);
  --line: var(--ma-borda);
  --text: var(--ma-texto);
  --muted: var(--ma-muted);
  --accent: var(--ma-azul);
  --accent-soft: var(--ma-azul-50);
  --danger: var(--ma-perigo);
  --ok: var(--ma-sucesso);
}

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

html { color-scheme: light; }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ma-texto);
  background:
    radial-gradient(circle at 96% 2%, rgba(245, 200, 0, 0.18), transparent 26rem),
    var(--ma-branco);
  font-family: "Geist", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

a { color: var(--ma-azul); text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible { outline: 3px solid rgba(245, 200, 0, 0.62); outline-offset: 2px; }

.ma-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--ma-borda);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(18px);
}

.ma-topbar__inner {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
  align-items: center;
  gap: 24px;
  width: min(1280px, calc(100vw - 40px));
  min-height: 76px;
  margin: 0 auto;
}

.ma-brand { display: inline-flex; align-items: center; gap: 12px; width: max-content; }
.ma-brand__mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ma-amarelo); color: var(--ma-azul); font-weight: 600; }
.ma-brand__name { font-weight: 600; letter-spacing: -0.02em; }
.ma-brand__env { display: block; color: var(--ma-muted); font-size: 0.72rem; font-weight: 400; }

.ma-nav, nav.ma-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--ma-borda);
  border-radius: var(--ma-pill);
  background: var(--ma-superficie);
}

.ma-nav a {
  padding: 9px 15px;
  border: 0;
  border-radius: var(--ma-pill);
  background: transparent;
  color: var(--ma-muted);
  font-size: 0.84rem;
  font-weight: 500;
  white-space: nowrap;
}
.ma-nav a:hover { background: var(--ma-azul-100); color: var(--ma-azul); }
.ma-nav a.active { background: var(--ma-azul); color: var(--ma-branco); }

.ma-userbar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.ma-icon-btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--ma-borda); border-radius: 50%; background: var(--ma-branco); color: var(--ma-azul); }
.ma-user { display: flex; align-items: center; gap: 10px; }
.ma-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ma-azul); color: white; font-weight: 600; }
.ma-user__copy { display: grid; line-height: 1.2; }
.ma-user__copy strong { font-size: 0.84rem; }
.ma-user__copy span { color: var(--ma-muted); font-size: 0.72rem; }

.container { width: min(1280px, calc(100vw - 40px)); margin: 0 auto; padding: 34px 0 56px; }
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }

.ma-card, .card {
  padding: 24px;
  border: 1px solid var(--ma-borda);
  border-radius: var(--ma-raio-card);
  background: var(--ma-branco);
  box-shadow: var(--ma-sombra-suave);
}
.ma-card--escuro { color: white; border-color: transparent; background: var(--ma-azul); box-shadow: var(--ma-sombra); }
.ma-card--escuro .muted { color: rgba(255, 255, 255, 0.72); }
.ma-card--link { display: flex; min-height: 210px; flex-direction: column; justify-content: space-between; transition: transform .2s ease, box-shadow .2s ease; }
.ma-card--link:hover { transform: translateY(-3px); box-shadow: var(--ma-sombra); }

.ma-kicker { margin: 0 0 8px; color: var(--ma-muted); font-size: .73rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.ma-display { margin: 0; font-family: "Instrument Serif", Georgia, serif; font-size: clamp(2.2rem, 5vw, 4.6rem); font-weight: 400; line-height: .98; letter-spacing: -.025em; }
.ma-lead { max-width: 680px; margin: 14px 0 0; color: var(--ma-muted); font-size: 1.02rem; }
.ma-kpi { font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 300; line-height: 1; letter-spacing: -.06em; }

.ma-pill, .pill, .ma-badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: 6px 11px;
  border: 1px solid var(--ma-borda);
  border-radius: var(--ma-pill);
  background: var(--ma-azul-50);
  color: var(--ma-azul);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .035em;
}

.ma-btn, button, .actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 18px;
  border: 1px solid var(--ma-borda-forte);
  border-radius: var(--ma-pill);
  background: var(--ma-branco);
  color: var(--ma-azul);
  font: 500 .87rem/1 "Geist", Arial, sans-serif;
  cursor: pointer;
}
.ma-btn:hover, button:hover, .actions a:hover { box-shadow: 0 5px 16px rgba(13,27,62,.1); }
.ma-btn--primario, button:not(.secondary) { border-color: var(--ma-azul); background: var(--ma-azul); color: white; }
.ma-btn.ma-btn--destaque, button.ma-btn--destaque { border-color: var(--ma-amarelo); background: var(--ma-amarelo); color: var(--ma-azul); }
button.secondary { background: var(--ma-branco); color: var(--ma-azul); }

label { display: block; margin-bottom: 7px; color: var(--ma-azul); font-size: .82rem; font-weight: 600; }
input, select, textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid var(--ma-borda-forte);
  border-radius: var(--ma-raio-input);
  background: var(--ma-branco);
  color: var(--ma-azul);
  font: 400 .92rem/1.4 "Geist", Arial, sans-serif;
}
input::placeholder, textarea::placeholder { color: #70809b; }

.message { margin-bottom: 18px; padding: 14px 16px; border: 1px solid rgba(128,104,0,.3); border-radius: 16px; background: var(--ma-amarelo-50); color: var(--ma-azul); }
.muted { color: var(--ma-muted); }
.danger { color: var(--ma-perigo); }
.ok { color: var(--ma-sucesso); }
.hero { display: grid; gap: 22px; }

.ma-progress { height: 11px; overflow: hidden; border-radius: var(--ma-pill); background: var(--ma-azul-100); }
.ma-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--ma-amarelo); }
.ma-ring { --ma-ring-value: 0; position: relative; display: grid; width: 142px; aspect-ratio: 1; place-items: center; border-radius: 50%; background: conic-gradient(var(--ma-amarelo) calc(var(--ma-ring-value) * 1%), var(--ma-azul-100) 0); }
.ma-ring::before { position: absolute; content: ""; width: 104px; aspect-ratio: 1; border-radius: 50%; background: var(--ma-branco); }
.ma-ring > * { position: relative; z-index: 1; }

.ma-table-wrap { overflow-x: auto; border: 1px solid var(--ma-borda); border-radius: 18px; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th { padding: 13px 14px; background: var(--ma-superficie); color: var(--ma-muted); font-size: .7rem; font-weight: 600; letter-spacing: .07em; text-align: left; text-transform: uppercase; }
td { padding: 15px 14px; border-top: 1px solid var(--ma-borda); vertical-align: top; }
tbody tr:hover { background: var(--ma-azul-50); }
.inline-form { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; }
.inline-form input, .inline-form select, .inline-form button { width: auto; min-width: 0; }

.ma-login-shell { display: grid; min-height: calc(100vh - 68px); place-items: center; padding: 24px 0; }
.ma-login-card { width: min(500px, 100%); padding: clamp(28px, 6vw, 52px); }
.ma-login-brand { margin-bottom: 32px; }
.ma-login-brand .ma-brand { margin: 0 auto; }
.ma-auth-page .container { width: min(1180px, calc(100vw - 32px)); padding: 0; }

.ma-home-hero { padding: clamp(28px, 5vw, 54px); }
.ma-shortcuts { margin-top: 28px; }
.ma-module-icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 15px; background: var(--ma-amarelo-50); color: var(--ma-azul); font-size: 1.25rem; }

@media (max-width: 980px) {
  .ma-topbar__inner { grid-template-columns: 1fr auto; padding: 12px 0; }
  .ma-nav { grid-column: 1 / -1; grid-row: 2; width: 100%; overflow-x: auto; justify-content: flex-start; }
  .grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .container, .ma-topbar__inner { width: min(100% - 24px, 1280px); }
  .container { padding-top: 22px; }
  .ma-user__copy { display: none; }
  .ma-card, .card { padding: 19px; border-radius: 20px; }
  .ma-display { font-size: 2.5rem; }
  .ma-nav a { padding: 8px 12px; }
  .inline-form { display: grid; width: 100%; }
  .inline-form input, .inline-form select, .inline-form button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* CRM3: camada visual sobre os seletores legados, sem alterar seus contratos JS. */
body.crm3-page {
  --bg: var(--ma-superficie);
  --surface: var(--ma-branco);
  --border: var(--ma-borda);
  --text: var(--ma-azul);
  --muted: var(--ma-muted);
  --muted2: #65738b;
  --navy: var(--ma-azul);
  --yellow: var(--ma-amarelo);
  --radius: 24px;
  --shadow: var(--ma-sombra-suave);
  color: var(--ma-azul);
  background:
    radial-gradient(circle at 96% 1%, rgba(245, 200, 0, .17), transparent 30rem),
    var(--ma-branco);
  font-family: "Geist", Arial, sans-serif;
}

.crm3-page header { border-bottom: 1px solid var(--ma-borda); background: rgba(255,255,255,.94); }
.crm3-page .logo { color: var(--ma-azul); }
.crm3-page .logo-dot { background: var(--ma-amarelo); box-shadow: 0 0 0 6px var(--ma-amarelo-50); }
.crm3-page .tabs-bar { gap: 5px; margin: 12px var(--p) 0; padding: 5px; border: 1px solid var(--ma-borda); border-radius: var(--ma-pill); background: var(--ma-superficie); overflow-x: auto; }
.crm3-page .tab-btn { flex: 0 0 auto; padding: 10px 16px; border: 0; border-radius: var(--ma-pill); color: var(--ma-muted); }
.crm3-page .tab-btn.active { border: 0; background: var(--ma-azul); color: white; }
.crm3-page .refresh-btn, .crm3-page .btn-connect, .crm3-page .btn-add-lead,
.crm3-page .kanban-logout, .crm3-page .btn-save, .crm3-page .btn-cancel,
.crm3-page .k-card-btn, .crm3-page .page-btn, .crm3-page .alerta-leads-btn {
  border-radius: var(--ma-pill);
  font-family: "Geist", Arial, sans-serif;
}
.crm3-page .btn-connect, .crm3-page .btn-add-lead, .crm3-page .btn-save,
.crm3-page .alerta-leads-btn { background: var(--ma-azul); color: white; }
.crm3-page input, .crm3-page select, .crm3-page textarea,
.crm3-page select.filter, .crm3-page input.filter { border-radius: var(--ma-raio-input); color: var(--ma-azul); }
.crm3-page .stat, .crm3-page .table-card, .crm3-page .motos-painel,
.crm3-page .kanban-col, .crm3-page .k-card, .crm3-page .metric-card,
.crm3-page .metricas-section, .crm3-page .modal, .crm3-page .kmodal {
  border-color: var(--ma-borda);
  border-radius: var(--ma-raio-card);
  background: var(--ma-branco);
  box-shadow: var(--ma-sombra-suave);
}
.crm3-page .k-card { border-radius: 18px; }
.crm3-page .kanban-col-accent { border-radius: 24px 24px 0 0; }
.crm3-page .metric-value, .crm3-page .metric-chart-mini-value,
.crm3-page .stat-num { font-family: "Geist", Arial, sans-serif; font-weight: 300; }

.ma-metrics-dashboard { display: grid; gap: 18px; }
.ma-metrics-hero { display: grid; grid-template-columns: minmax(280px, 1.4fr) repeat(3, minmax(150px, .7fr)); gap: 14px; }
.ma-metrics-welcome { display: flex; min-height: 210px; flex-direction: column; justify-content: space-between; }
.ma-metrics-welcome h2 { margin: 0; font-family: "Instrument Serif", Georgia, serif; font-size: clamp(2.15rem, 4vw, 3.8rem); font-weight: 400; line-height: 1; }
.ma-metrics-welcome__meta { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 9px; color: var(--ma-muted); font-size: .78rem; }
.ma-metrics-kpi { display: flex; min-height: 210px; flex-direction: column; justify-content: space-between; }
.ma-metrics-kpi .ma-kpi { margin-top: auto; }
.ma-metrics-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ma-ring-card { display: flex; align-items: center; gap: 22px; }
.ma-ring__value { display: grid; place-items: center; text-align: center; }
.ma-ring__value strong { font-size: 1.7rem; font-weight: 300; line-height: 1; }
.ma-ring__value span { margin-top: 4px; color: var(--ma-muted); font-size: .68rem; }
.ma-metric-big { margin: 12px 0 4px; font-size: clamp(2rem, 4vw, 3.3rem); font-weight: 300; line-height: 1; letter-spacing: -.05em; }
.ma-plans-card { grid-column: span 1; }
.ma-plan-row { display: grid; grid-template-columns: minmax(130px, 1fr) 2fr 36px; align-items: center; gap: 10px; margin-top: 13px; font-size: .78rem; }
.ma-plan-row .ma-progress { height: 7px; }
.ma-weekly-chart { display: grid; grid-template-columns: repeat(6, minmax(30px, 1fr)); align-items: end; gap: 10px; min-height: 180px; padding-top: 20px; }
.ma-week { display: grid; grid-template-rows: 120px auto auto; align-items: end; gap: 6px; text-align: center; }
.ma-week__bars { display: flex; height: 120px; align-items: end; justify-content: center; gap: 4px; }
.ma-week__bar { width: 11px; min-height: 5px; border-radius: var(--ma-pill); background: var(--ma-amarelo); }
.ma-week__bar--delivery { background: var(--ma-azul); }
.ma-week small { color: var(--ma-muted); font-size: .63rem; }
.ma-week strong { font-size: .72rem; font-weight: 500; }
.ma-priority-empty { display: grid; min-height: 210px; place-items: center; color: rgba(255,255,255,.72); text-align: center; }
.ma-card-heading { margin: 0 0 6px; color: inherit; font-size: 1rem; font-weight: 600; }
.ma-card-copy { margin: 0; color: var(--ma-muted); font-size: .78rem; }
.ma-card--escuro .ma-card-copy { color: rgba(255,255,255,.7); }

@media (max-width: 1050px) {
  .ma-metrics-hero { grid-template-columns: repeat(3, 1fr); }
  .ma-metrics-welcome { grid-column: 1 / -1; min-height: 180px; }
  .ma-metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .ma-plans-card { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .crm3-page .tabs-bar { margin-inline: 12px; }
  .ma-metrics-hero, .ma-metrics-grid { grid-template-columns: 1fr; }
  .ma-metrics-welcome, .ma-plans-card { grid-column: auto; }
  .ma-metrics-kpi { min-height: 155px; }
  .ma-ring-card { align-items: flex-start; flex-direction: column; }
  .ma-weekly-chart { gap: 5px; }
  .ma-week__bar { width: 8px; }
}

/* Portal: mesma linguagem visual da visão Métricas do CRM3. */
body:not(.crm3-page) {
  background:
    radial-gradient(circle at 2% 92%, rgba(245, 200, 0, .16), transparent 24rem),
    radial-gradient(circle at 95% 5%, rgba(45, 104, 255, .08), transparent 28rem),
    #f4f7fc;
}

.ma-topbar {
  top: 12px;
  width: min(1400px, calc(100vw - 32px));
  margin: 12px auto 0;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 26px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 55px rgba(13,27,62,.09);
}

.ma-topbar__inner { width: auto; min-height: 72px; padding: 0 18px; }
.ma-brand__mark { width: 44px; height: 44px; border-radius: 14px; font-size: 1.35rem; }
.ma-brand__name { font-family: "Instrument Serif", Georgia, serif; font-size: 1.35rem; font-weight: 400; }
.ma-brand__dot { display: inline-block; width: 7px; height: 7px; margin-left: 5px; border-radius: 50%; background: var(--ma-amarelo); box-shadow: 0 0 0 4px var(--ma-amarelo-50); vertical-align: middle; }
.ma-brand__env { margin-top: -1px; font-size: .64rem; letter-spacing: .09em; text-transform: uppercase; }
.ma-avatar { width: 36px; height: 36px; background: var(--ma-amarelo); color: var(--ma-azul); }
.ma-user { padding: 4px 10px 4px 4px; border: 1px solid var(--ma-borda); border-radius: var(--ma-pill); background: var(--ma-superficie); }
.ma-icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ma-btn--compact { min-height: 40px; padding-inline: 15px; }

.container { width: min(1320px, calc(100vw - 48px)); padding-top: 48px; }
.ma-home-hero { position: relative; overflow: hidden; }
.ma-home-hero::before { position: absolute; top: -70px; right: -40px; content: "MOTO AGORA"; color: rgba(13,27,62,.025); font-family: "Instrument Serif", Georgia, serif; font-size: clamp(6rem, 15vw, 13rem); line-height: 1; white-space: nowrap; pointer-events: none; }
.ma-home-heading { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; padding: 18px 4px 34px; }
.ma-home-heading .ma-display { margin-top: 12px; font-size: clamp(3rem, 6vw, 5.6rem); }
.ma-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--ma-muted); font-size: .73rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.ma-eyebrow > span { width: 8px; height: 8px; border-radius: 50%; background: #16a46f; box-shadow: 0 0 0 4px rgba(22,164,111,.1); }
.ma-role-pill { flex: 0 0 auto; margin-top: 14px; background: white; box-shadow: var(--ma-sombra-suave); }

.ma-shortcuts { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 16px; }
.ma-module-card { grid-column: span 4; display: flex; min-height: 285px; flex-direction: column; justify-content: space-between; padding: 24px; overflow: hidden; border: 1px solid var(--ma-borda); border-radius: 26px; background: rgba(255,255,255,.94); color: var(--ma-azul); box-shadow: var(--ma-sombra-suave); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.ma-module-card:hover { transform: translateY(-4px); border-color: var(--ma-borda-forte); box-shadow: var(--ma-sombra); }
.ma-module-card--primary { grid-column: span 8; background: linear-gradient(135deg, #fff 58%, var(--ma-amarelo-50)); }
.ma-module-card--dark { background: linear-gradient(145deg, #183aa9, var(--ma-azul)); color: white; }
.ma-module-card__top { display: flex; align-items: center; justify-content: space-between; }
.ma-module-card .ma-module-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--ma-amarelo); font-size: 1.35rem; }
.ma-module-card:not(.ma-module-card--primary):not(.ma-module-card--dark) .ma-module-icon { background: var(--ma-azul-50); }
.ma-module-card--dark .ma-module-icon { color: var(--ma-azul); }
.ma-module-arrow { color: var(--ma-muted); font-size: .76rem; font-weight: 500; }
.ma-module-arrow b { display: inline-grid; width: 30px; height: 30px; margin-left: 5px; place-items: center; border: 1px solid var(--ma-borda); border-radius: 50%; background: white; color: var(--ma-azul); }
.ma-module-card--dark .ma-module-arrow { color: rgba(255,255,255,.7); }
.ma-module-card__body { display: grid; gap: 7px; }
.ma-module-card__body strong { font-family: "Instrument Serif", Georgia, serif; font-size: clamp(1.8rem, 3vw, 2.7rem); font-weight: 400; line-height: 1; }
.ma-module-card__body small { max-width: 380px; color: var(--ma-muted); font-size: .82rem; }
.ma-module-tag { width: max-content; margin-bottom: 4px; color: var(--ma-muted); font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.ma-module-card--dark .ma-module-card__body small, .ma-module-card--dark .ma-module-tag { color: rgba(255,255,255,.7); }
.ma-home-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 16px; padding: 15px 20px; border: 1px solid var(--ma-borda); border-radius: var(--ma-pill); background: rgba(255,255,255,.7); color: var(--ma-muted); font-size: .76rem; }
.ma-home-footer span { display: inline-flex; align-items: center; gap: 8px; }
.ma-home-footer i { width: 7px; height: 7px; border-radius: 50%; background: #16a46f; box-shadow: 0 0 0 4px rgba(22,164,111,.1); }
.ma-home-footer a { font-weight: 600; }

.ma-auth-page .container { width: min(1180px, calc(100vw - 32px)); }
.ma-login-shell { position: relative; }
.ma-login-shell::before { position: absolute; z-index: -1; content: "M"; color: rgba(13,27,62,.035); font-family: "Instrument Serif", Georgia, serif; font-size: min(70vw, 48rem); line-height: .8; }
.ma-login-card { border-color: rgba(255,255,255,.88); background: rgba(255,255,255,.92); box-shadow: 0 30px 90px rgba(13,27,62,.13); }
.ma-login-title { margin-top: 16px; font-size: clamp(2.6rem, 8vw, 4.2rem); }
.ma-form-card { max-width: 680px; margin-inline: auto; padding: clamp(28px,5vw,48px); }
.ma-form-title { margin: 14px 0 12px; font-size: clamp(2.5rem,5vw,4rem); }

@media (max-width: 900px) {
  .ma-module-card, .ma-module-card--primary { grid-column: span 6; }
  .ma-home-heading .ma-display { font-size: clamp(3rem, 8vw, 4.8rem); }
}

@media (max-width: 640px) {
  .ma-topbar { top: 6px; width: calc(100vw - 12px); margin-top: 6px; border-radius: 20px; }
  .ma-topbar__inner { width: auto; padding-inline: 10px; }
  .ma-topbar .ma-brand__env, .ma-topbar .ma-btn--compact { display: none; }
  .ma-topbar .ma-brand__mark { width: 38px; height: 38px; }
  .container { width: calc(100vw - 24px); padding-top: 32px; }
  .ma-home-heading { display: grid; padding-top: 8px; }
  .ma-role-pill { margin-top: 0; }
  .ma-module-card, .ma-module-card--primary { grid-column: 1 / -1; min-height: 230px; padding: 21px; }
  .ma-home-footer { align-items: flex-start; flex-direction: column; border-radius: 20px; }
}