:root {
  --bg: #f5f8fb;
  --surface: #ffffff;
  --ink: #071f3d;
  --muted: #647287;
  --line: #d8e2ec;
  --navy: #061d39;
  --navy-2: #0b2a4f;
  --blue: #0a4b78;
  --teal: #00a99d;
  --teal-dark: #007f7a;
  --green: #15803d;
  --amber: #b45309;
  --red: #dc2626;
  --shadow: 0 18px 42px rgba(7, 31, 61, .08);
  --icon-tag: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M20.59 13.41 12.42 21.58a2 2 0 0 1-2.83 0L2.41 14.4A2 2 0 0 1 1.83 13V5a3 3 0 0 1 3-3h8c.53 0 1.04.21 1.41.59l7.35 7.35a2 2 0 0 1 0 2.82ZM7.5 8.75A1.75 1.75 0 1 0 7.5 5.25a1.75 1.75 0 0 0 0 3.5Z'/%3E%3C/svg%3E");
}

/* Public showcase website */
.showcase-site {
  background: #fff;
  color: #071f3d;
}
.showcase-header,
.showcase-main,
.showcase-footer-grid,
.footer-bottom {
  width: min(1200px, calc(100% - 64px));
  margin-inline: auto;
}
.showcase-header {
  display: grid;
  grid-template-columns: auto minmax(360px, 1fr) auto;
  align-items: center;
  gap: 28px;
  min-height: 82px;
  padding: 18px 0;
}
.showcase-menu-toggle {
  display: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid #d9e6ef;
  border-radius: 10px;
  background: #fff;
  color: #071f3d;
  box-shadow: 0 10px 22px rgba(7,31,61,.06);
  cursor: pointer;
  place-items: center;
}
.showcase-menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 3px auto;
  border-radius: 999px;
  background: currentColor;
}
.showcase-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #071f3d;
  min-width: 0;
}
.showcase-brand img {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  flex: 0 0 auto;
}
.showcase-brand strong {
  display: block;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0;
}
.showcase-brand small {
  display: block;
  margin-top: 4px;
  color: #6d7a8b;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.showcase-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(16px, 2.8vw, 42px);
  min-width: 0;
}
.showcase-nav a {
  color: #0d233f;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}
.showcase-nav a:first-child,
.showcase-nav a:hover {
  color: #007f7a;
}
.showcase-mobile-cta {
  display: none;
}
.showcase-actions,
.mg-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mg-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid #007f7a;
  border-radius: 8px;
  color: #007f7a;
  background: #fff;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 12px 24px rgba(0,127,122,.08);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space: nowrap;
}
.mg-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(0,127,122,.16);
}
.mg-button.primary {
  background: #007f7a;
  color: #fff;
}
.mg-button.outline {
  background: #fff;
  color: #007f7a;
}
.mg-button.secondary {
  min-width: 170px;
  background: #fff;
  color: #007f7a;
}
.mg-button.light {
  background: #fff;
  color: #007f7a;
  border-color: #fff;
}
.mg-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .72fr);
  align-items: center;
  gap: clamp(24px, 3.2vw, 46px);
  min-height: 380px;
  padding: 18px 0 0;
}
.mg-hero-copy h1 {
  max-width: 520px;
  margin: 0 0 18px;
  color: #071f3d;
  font-size: clamp(40px, 4vw, 56px);
  line-height: 1.08;
  letter-spacing: 0;
}
.mg-hero-copy h1 span { color: #007f7a; }
.mg-hero-copy p {
  max-width: 560px;
  margin: 0;
  color: #314159;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.55;
}
.mg-actions {
  flex-wrap: wrap;
  margin-top: 22px;
}
.mg-hero-points {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  max-width: 620px;
  margin-top: 26px;
}
.mg-hero-points span {
  position: relative;
  padding-left: 28px;
  color: #0e304c;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
}
.mg-hero-points span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e7fbf8;
  border: 1px solid #bfeee8;
}
.mg-hero-visual {
  position: relative;
  align-self: center;
  min-height: 0;
  height: clamp(300px, 28vw, 360px);
  border-radius: 12px;
  overflow: hidden;
}
.mg-hero-visual picture {
  display: block;
  width: 100%;
  height: 100%;
}
.mg-hero-visual img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
}
.mg-success-card {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 12px;
  max-width: 250px;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 20px 50px rgba(7,31,61,.16);
}
.mg-success-card::before {
  content: "👥";
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #80c939;
  color: #fff;
  font-size: 19px;
  grid-row: 1 / span 2;
}
.mg-success-card strong {
  color: #007f7a;
  font-size: 17px;
  line-height: 1;
}
.mg-success-card span {
  color: #20334d;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}
.mg-section {
  padding: 28px 0;
}
.mg-section h2,
.partner-page h2 {
  margin: 0 0 24px;
  color: #071f3d;
  text-align: center;
  font-size: clamp(25px, 3vw, 34px);
  line-height: 1.15;
}
.mg-service-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
}
.mg-service-card,
.mg-testimonial-grid article,
.partner-columns article {
  min-width: 0;
  border: 1px solid #e3ebf2;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(7,31,61,.07);
}
.mg-service-card {
  display: grid;
  align-content: start;
  justify-items: center;
  min-height: 238px;
  padding: 26px 18px 22px;
  color: inherit;
  text-align: center;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.mg-service-card:hover,
.mg-service-card:focus-visible {
  transform: translateY(-3px);
  border-color: #8bd6ce;
  box-shadow: 0 20px 38px rgba(0,127,122,.12);
}
.mg-service-card span,
.mg-timeline article > span,
.mg-stats span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #e9fbf8;
  color: #007f7a;
  font-size: 28px;
}
.mg-service-grid h3 {
  margin: 18px 0 10px;
  color: #10243e;
  font-size: 16px;
  line-height: 1.25;
}
.mg-service-grid p {
  margin: 0 0 18px;
  color: #5f6d7e;
  font-size: 13px;
  line-height: 1.55;
}
.mg-service-card strong {
  margin-top: auto;
  color: #007f7a;
  font-size: 13px;
  font-weight: 900;
}
.mg-how { padding-top: 8px; }
.mg-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
}
.mg-timeline::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 34px;
  border-top: 2px dashed #cfe7e2;
}
.mg-timeline article {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
}
.mg-timeline article > strong {
  position: absolute;
  top: 9px;
  left: calc(50% - 48px);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #007f7a;
  color: #fff;
  font-size: 13px;
}
.mg-timeline article > span {
  position: relative;
  z-index: 1;
  width: 68px;
  height: 68px;
  font-size: 30px;
}
.mg-timeline h3 {
  margin: 18px 0 8px;
  color: #10243e;
  font-size: 16px;
}
.mg-timeline p {
  max-width: 220px;
  margin: 0;
  color: #5b6878;
  font-size: 13px;
  line-height: 1.55;
}
.mg-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 28px 0;
  border: 1px solid #e3ebf2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(7,31,61,.07);
  overflow: hidden;
}
.mg-stats div {
  display: grid;
  grid-template-columns: 62px 1fr;
  align-items: center;
  gap: 14px;
  min-height: 112px;
  padding: 18px 24px;
  border-right: 1px solid #e3ebf2;
}
.mg-stats div:last-child { border-right: 0; }
.mg-stats span { grid-row: 1 / span 2; }
.mg-stats strong {
  color: #007f7a;
  font-size: 30px;
  line-height: 1;
}
.mg-stats p {
  margin: 0;
  color: #304158;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}
.mg-country-strip {
  position: relative;
  margin: -10px 0 32px;
  padding: 13px 0;
  border: 1px solid #e3ebf2;
  border-radius: 14px;
  background: linear-gradient(90deg, #ffffff, #f6fbfb, #ffffff);
  box-shadow: 0 12px 28px rgba(7,31,61,.05);
  overflow: hidden;
}
.mg-country-strip::before,
.mg-country-strip::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: 90px;
  pointer-events: none;
}
.mg-country-strip::before {
  left: 0;
  background: linear-gradient(90deg, #fff, rgba(255,255,255,0));
}
.mg-country-strip::after {
  right: 0;
  background: linear-gradient(270deg, #fff, rgba(255,255,255,0));
}
.mg-country-track {
  display: flex;
  width: max-content;
  animation: mg-country-scroll 95s linear infinite;
}
.mg-country-strip:hover .mg-country-track {
  animation-play-state: paused;
}
.mg-country-list {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 10px;
}
.mg-country-list span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: max-content;
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid #dce8ef;
  border-radius: 999px;
  background: #fff;
  color: #23364d;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(7,31,61,.04);
}
.mg-country-list img {
  width: 24px;
  height: 18px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 1px 4px rgba(7,31,61,.12);
  flex: 0 0 auto;
}
@keyframes mg-country-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.mg-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.mg-testimonial-grid article {
  display: grid;
  grid-template-columns: 68px 1fr;
  column-gap: 16px;
  padding: 22px;
}
.mg-testimonial-grid img {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  grid-row: 1 / span 3;
}
.mg-testimonial-grid h3 {
  margin: 0 0 4px;
  color: #10243e;
  font-size: 15px;
}
.mg-testimonial-grid small {
  color: #7b8796;
  font-weight: 800;
}
.mg-testimonial-grid p {
  grid-column: 2;
  margin: 12px 0;
  color: #263951;
  font-size: 14px;
  line-height: 1.55;
}
.mg-testimonial-grid span {
  grid-column: 2;
  color: #f7c948;
  letter-spacing: 2px;
}
.mg-partner-band {
  display: grid;
  grid-template-columns: minmax(260px, 1.1fr) minmax(360px, 1fr) auto;
  align-items: center;
  gap: 28px;
  margin: 28px 0 20px;
  padding: 30px 34px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 88% 40%, rgba(0,169,157,.35), transparent 30%),
    linear-gradient(135deg, #007f7a, #052641);
  color: #fff;
  box-shadow: 0 22px 46px rgba(7,31,61,.14);
}
.mg-partner-band p,
.mg-partner-band h2,
.mg-partner-band span {
  margin: 0;
}
.mg-partner-band p {
  font-size: 15px;
  font-weight: 900;
}
.mg-partner-band h2 {
  margin-top: 6px;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.08;
}
.mg-partner-band div > span {
  display: block;
  margin-top: 10px;
  color: rgba(255,255,255,.82);
  line-height: 1.5;
}
.mg-partner-band ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mg-partner-band li {
  position: relative;
  padding-top: 42px;
  color: rgba(255,255,255,.92);
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}
.mg-partner-band li::before {
  content: "✓";
  position: absolute;
  top: 0;
  left: calc(50% - 17px);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  color: #fff;
}
.showcase-footer {
  margin-top: 0;
  background: #071f3d;
  color: #dce8f5;
}
.showcase-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr .8fr .9fr 1fr;
  gap: clamp(24px, 5vw, 86px);
  padding: 34px 0 28px;
}
.footer-brand,
.footer-brand strong {
  color: #fff;
}
.showcase-footer p,
.showcase-footer a {
  display: block;
  margin: 8px 0 0;
  color: #b8c7d8;
  font-size: 14px;
  line-height: 1.5;
}
.showcase-footer h3 {
  margin: 0 0 12px;
  color: #fff;
  font-size: 15px;
}
.footer-socials {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}
.footer-socials span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 0 24px;
  border-top: 1px solid rgba(255,255,255,.1);
  color: #9db0c6;
  font-size: 13px;
}
.partner-page {
  padding: 28px 0 54px;
}
.partner-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr);
  align-items: center;
  gap: 34px;
  margin: 0 auto 34px;
}
.partner-hero-copy {
  min-width: 0;
}
.partner-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin-bottom: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #e5f8f5;
  color: #007f7a;
  font-size: 13px;
  font-weight: 900;
}
.partner-hero h1 {
  margin: 0 0 16px;
  color: #071f3d;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.05;
}
.partner-hero p {
  max-width: 620px;
  margin: 0 0 24px;
  color: #526071;
  font-size: 17px;
  line-height: 1.55;
}
.partner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.partner-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.partner-badges span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid #d9eee9;
  border-radius: 999px;
  background: #fff;
  color: #0d2a4e;
  font-size: 13px;
  font-weight: 800;
}
.partner-hero-visual {
  position: relative;
  min-height: 336px;
  overflow: hidden;
  border-radius: 12px;
  background: #eef9fb;
  box-shadow: 0 18px 42px rgba(7,31,61,.08);
}
.partner-hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,0) 44%);
  pointer-events: none;
}
.partner-hero-visual picture,
.partner-hero-visual img {
  display: block;
  width: 100%;
  height: 100%;
}
.partner-hero-visual img {
  min-height: 336px;
  object-fit: cover;
  object-position: 44% center;
}
.partner-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 38px;
}
.partner-columns article {
  display: grid;
  align-content: start;
  min-height: 206px;
  padding: 22px;
}
.partner-columns article > span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: #e5f8f5;
  color: #007f7a;
  font-size: 25px;
}
.partner-columns h2 {
  margin: 0 0 10px;
  text-align: left;
  font-size: 20px;
  line-height: 1.18;
}
.partner-columns p,
.partner-final p {
  margin: 0;
  color: #526071;
  line-height: 1.6;
}
.partner-section {
  padding: 12px 0 36px;
}
.partner-section-title {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-bottom: 22px;
  text-align: center;
}
.partner-section-title span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: #e5f8f5;
  color: #007f7a;
  font-size: 12px;
  font-weight: 900;
}
.partner-section-title h2,
.partner-split h2 {
  margin: 0;
  color: #071f3d;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.12;
}
.partner-value-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.partner-value-grid article {
  min-width: 0;
  padding: 22px;
  border: 1px solid #e3ebf2;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(7,31,61,.07);
}
.partner-value-grid article > span {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: #e5f8f5;
  color: #007f7a;
  font-size: 24px;
}
.partner-value-grid h3 {
  margin: 0 0 9px;
  color: #10243e;
  font-size: 18px;
  line-height: 1.2;
}
.partner-value-grid p,
.partner-split p,
.partner-split li span {
  margin: 0;
  color: #526071;
  font-size: 14px;
  line-height: 1.58;
}
.partner-split {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: start;
  gap: 28px;
  margin-bottom: 34px;
  padding: 26px;
  border-radius: 12px;
  background: #eefbf9;
}
.partner-split > div > p {
  max-width: 520px;
  margin-top: 14px;
}
.partner-split ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.partner-split li {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 16px;
  border: 1px solid #d8eee9;
  border-radius: 10px;
  background: #fff;
}
.partner-split li strong {
  color: #071f3d;
  font-size: 15px;
}
.partner-process {
  padding: 24px 0 42px;
}
.partner-final {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 22px;
  border-radius: 12px;
  background: #eefbf9;
  text-align: left;
}
.partner-final > span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #dff7f3;
  color: #007f7a;
  font-size: 28px;
}
.partner-final h2 {
  margin: 0 0 6px;
  text-align: left;
  font-size: clamp(22px, 2.5vw, 30px);
}

@media (max-width: 1180px) {
  .showcase-header {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 14px;
  }
  .showcase-nav { order: 3; flex-wrap: wrap; }
  .mg-hero {
    grid-template-columns: 1fr;
    padding-top: 10px;
  }
  .mg-hero-copy { text-align: center; }
  .mg-hero-copy h1,
  .mg-hero-copy p {
    margin-left: auto;
    margin-right: auto;
  }
  .mg-actions,
  .showcase-actions {
    justify-content: center;
  }
  .mg-hero-points {
    margin-left: auto;
    margin-right: auto;
  }
  .mg-service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mg-partner-band {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

@media (max-width: 860px) {
  .showcase-header,
  .showcase-main,
  .showcase-footer-grid,
  .footer-bottom {
    width: min(100% - 32px, 1320px);
  }
  .showcase-header {
    position: relative;
    grid-template-columns: 1fr auto;
    justify-items: stretch;
    gap: 12px;
    min-height: 68px;
    padding: 12px 0;
  }
  .showcase-brand {
    justify-content: flex-start;
  }
  .showcase-menu-toggle {
    display: grid;
    justify-self: end;
  }
  .showcase-nav {
    position: absolute;
    z-index: 20;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    display: none;
    width: 100%;
    grid-template-columns: 1fr;
    justify-content: stretch;
    gap: 8px;
    padding: 14px;
    border: 1px solid #dfe9f1;
    border-radius: 16px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 22px 50px rgba(7,31,61,.16);
  }
  .showcase-menu-open .showcase-nav {
    display: grid;
  }
  .showcase-nav a {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid #e3ebf2;
    border-radius: 10px;
    background: #fff;
    font-size: 14px;
  }
  .showcase-mobile-cta {
    display: flex !important;
    justify-content: center;
    min-height: 50px !important;
    border-color: #007f7a !important;
    color: #007f7a !important;
    font-weight: 900 !important;
  }
  .showcase-mobile-cta.primary {
    background: #007f7a !important;
    color: #fff !important;
  }
  .showcase-actions {
    display: none;
  }
  .mg-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .partner-hero {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .partner-value-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .partner-split {
    grid-template-columns: 1fr;
  }
  .partner-hero-visual {
    min-height: 280px;
  }
  .partner-hero-visual img {
    min-height: 280px;
  }
  .partner-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .partner-final {
    grid-template-columns: 56px minmax(0, 1fr);
  }
  .partner-final .mg-button {
    grid-column: 1 / -1;
  }
  .mg-button {
    width: 100%;
    min-width: 0;
    padding-inline: 14px;
  }
  .mg-hero-points {
    display: none;
  }
  .mg-hero-points,
  .mg-timeline,
  .mg-stats,
  .mg-testimonial-grid,
  .partner-columns,
  .showcase-footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .mg-timeline::before { display: none; }
  .mg-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mg-timeline {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .mg-timeline::before {
    display: block;
    left: 34px;
    right: auto;
    top: 18px;
    bottom: 18px;
    width: 2px;
    border-top: 0;
    background: #cfe7e2;
  }
  .mg-timeline article {
    grid-template-columns: 74px 1fr;
    justify-items: start;
    min-height: 88px;
    text-align: left;
  }
  .mg-timeline article > strong {
    top: 0;
    left: 0;
  }
  .mg-timeline article > span {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 68px;
    height: 68px;
  }
  .mg-timeline h3,
  .mg-timeline p {
    grid-column: 2;
    max-width: none;
  }
  .mg-timeline h3 {
    margin: 4px 0 7px;
  }
  .mg-testimonial-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(290px, 62%);
    grid-template-columns: none;
    gap: 14px;
    margin-inline: -16px;
    padding: 2px 16px 12px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 16px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .mg-testimonial-grid::-webkit-scrollbar { display: none; }
  .mg-testimonial-grid article {
    scroll-snap-align: start;
  }
  .mg-stats div:nth-child(2) { border-right: 0; }
  .mg-stats div {
    border-bottom: 1px solid #e3ebf2;
  }
  .mg-stats div:nth-child(n+3) { border-bottom: 0; }
  .mg-partner-band ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-bottom {
    display: grid;
    text-align: center;
  }
}

@media (max-width: 560px) {
  .showcase-main {
    width: min(100% - 24px, 1320px);
  }
  .showcase-header {
    align-items: center;
    width: min(100% - 24px, 1320px);
    min-height: 70px;
    padding: 12px 0 8px;
  }
  .showcase-brand img {
    width: 40px;
    height: 40px;
  }
  .showcase-brand strong {
    font-size: 20px;
  }
  .showcase-brand small {
    font-size: 9.5px;
  }
  .showcase-menu-toggle {
    width: 44px;
    height: 44px;
  }
  .mg-actions,
  .mg-hero-points,
  .partner-columns,
  .showcase-footer-grid {
    grid-template-columns: 1fr;
  }
  .mg-actions {
    gap: 8px;
  }
  .mg-button {
    min-height: 50px;
    border-radius: 9px;
    font-size: 13px;
  }
  .mg-hero {
    position: relative;
    display: block;
    min-height: 0;
    padding: 18px 0 0;
    overflow: visible;
  }
  .mg-hero-copy {
    position: relative;
    z-index: 1;
    display: block;
    width: 60%;
    min-height: 0;
  }
  .mg-hero-copy h1 {
    max-width: none;
    margin: 0;
    font-size: clamp(23px, 7vw, 28px);
    line-height: 1.12;
    text-align: left;
  }
  .mg-hero-copy p {
    max-width: none;
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.42;
    text-align: left;
  }
  .mg-hero .mg-actions {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: calc(100vw - 24px);
    max-width: none;
    margin-top: 16px;
  }
  .mg-hero .mg-button {
    width: 100%;
    min-width: 0;
    min-height: 50px;
    padding-inline: 8px;
    font-size: 11.5px;
    white-space: nowrap;
  }
  .mg-hero-points { display: none; }
  .mg-hero-visual {
    position: absolute;
    z-index: 0;
    top: 26px;
    right: 0;
    width: 55%;
    height: 218px;
    min-height: 0;
    border-radius: 0;
    background: #eef9fb;
    overflow: hidden;
  }
  .mg-hero-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.68) 14%, rgba(255,255,255,.18) 38%, rgba(255,255,255,0) 58%);
    pointer-events: none;
  }
  .mg-hero-visual img {
    min-height: 0;
    object-position: 38% center;
  }
  .mg-success-card {
    display: none;
  }
  .mg-section {
    padding: 22px 0;
  }
  .mg-section h2,
  .partner-page h2 {
    margin-bottom: 16px;
    text-align: left;
    font-size: 22px;
  }
  .mg-service-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(86px, 1fr);
    grid-template-columns: none;
    gap: 8px;
    margin-inline: 0;
    padding: 2px 0 12px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 0;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .mg-service-grid::-webkit-scrollbar { display: none; }
  .mg-service-card {
    min-height: 132px;
    padding: 12px 7px 10px;
    border-radius: 10px;
    scroll-snap-align: start;
  }
  .mg-service-card span {
    width: 46px;
    height: 46px;
    font-size: 24px;
  }
  .mg-service-grid h3 {
    margin: 10px 0 0;
    font-size: 11px;
    line-height: 1.18;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  .mg-service-grid p,
  .mg-service-card strong {
    display: none;
  }
  .mg-how {
    padding-top: 4px;
  }
  .mg-timeline {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    align-items: start;
  }
  .mg-timeline::before {
    left: 12%;
    right: 12%;
    top: 24px;
    bottom: auto;
    width: auto;
    height: 2px;
    background: repeating-linear-gradient(90deg, #b9ded9 0 8px, transparent 8px 13px);
  }
  .mg-timeline article {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: 118px;
    text-align: center;
  }
  .mg-timeline article > strong {
    top: 0;
    left: calc(50% + 10px);
    width: 24px;
    height: 24px;
    font-size: 11px;
  }
  .mg-timeline article > span {
    grid-column: auto;
    grid-row: auto;
    width: 52px;
    height: 52px;
    font-size: 25px;
  }
  .mg-timeline h3 {
    grid-column: auto;
    margin: 10px 0 0;
    font-size: 11.5px;
    line-height: 1.25;
  }
  .mg-timeline p {
    display: none;
  }
  .mg-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 16px 0;
    border-radius: 12px;
  }
  .mg-stats div {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 5px;
    min-height: 104px;
    padding: 10px 5px;
    border-right: 0;
    border-bottom: 0;
    text-align: center;
  }
  .mg-stats div:not(:last-child) { border-right: 1px solid #e3ebf2; }
  .mg-stats span { grid-row: auto; }
  .mg-stats span {
    width: 38px;
    height: 38px;
    font-size: 21px;
  }
  .mg-stats strong {
    font-size: 22px;
  }
  .mg-stats p {
    font-size: 10px;
    line-height: 1.25;
  }
  .mg-country-strip {
    display: none;
  }
  .mg-testimonials {
    display: block;
    padding-top: 18px;
  }
  .mg-testimonials h2 {
    margin-bottom: 16px;
    font-size: 22px;
    text-align: left;
  }
  .mg-partner-band {
    grid-template-columns: 56px 1fr;
    gap: 12px;
    margin: 20px 0 10px;
    padding: 16px;
    border-radius: 12px;
    text-align: left;
    background: #eefbf9;
    color: #071f3d;
  }
  .mg-partner-band::before {
    content: "🤝";
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #dff7f3;
    color: #007f7a;
    font-size: 25px;
    grid-row: 1 / span 2;
  }
  .mg-partner-band p {
    display: none;
  }
  .mg-partner-band h2 {
    margin: 0;
    font-size: 19px;
    color: #071f3d;
  }
  .mg-partner-band div > span {
    margin-top: 5px;
    color: #314159;
    font-size: 12px;
    line-height: 1.4;
  }
  .mg-partner-band ul { display: none; }
  .mg-partner-band .mg-button {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 48px;
    margin-top: 4px;
    background: #007f7a;
    color: #fff;
  }
  .mg-testimonial-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 86%);
    grid-template-columns: none;
    gap: 12px;
    margin-inline: -12px;
    padding: 2px 12px 14px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 12px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .mg-testimonial-grid::-webkit-scrollbar { display: none; }
  .mg-testimonial-grid article {
    grid-template-columns: 54px 1fr;
    padding: 18px;
    scroll-snap-align: start;
  }
  .mg-testimonial-grid img {
    width: 48px;
    height: 48px;
  }
  .partner-page {
    padding: 14px 0 36px;
  }
  .partner-hero {
    position: relative;
    display: block;
    min-height: 338px;
    margin-bottom: 26px;
    padding: 18px 0 0;
    overflow: hidden;
  }
  .partner-hero-copy {
    position: relative;
    z-index: 1;
    width: 60%;
  }
  .partner-kicker {
    min-height: 26px;
    margin-bottom: 10px;
    padding: 5px 9px;
    font-size: 11px;
  }
  .partner-hero h1 {
    margin-bottom: 12px;
    font-size: clamp(23px, 7vw, 28px);
    line-height: 1.12;
  }
  .partner-hero p {
    margin-bottom: 0;
    font-size: 13px;
    line-height: 1.42;
  }
  .partner-actions {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: calc(100vw - 24px);
    margin-top: 16px;
    gap: 8px;
  }
  .partner-actions .mg-button {
    width: 100%;
    min-width: 0;
    min-height: 50px;
    padding-inline: 8px;
    font-size: 11px;
    white-space: nowrap;
  }
  .partner-badges {
    display: none;
  }
  .partner-hero-visual {
    position: absolute;
    z-index: 0;
    top: 58px;
    right: 0;
    width: 55%;
    height: 218px;
    min-height: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .partner-hero-visual::before {
    background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.72) 16%, rgba(255,255,255,.2) 40%, rgba(255,255,255,0) 60%);
  }
  .partner-hero-visual img {
    min-height: 0;
    object-position: 38% center;
  }
  .partner-columns {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 170px;
    grid-template-columns: none;
    gap: 8px;
    margin-inline: -12px;
    margin-bottom: 24px;
    padding: 2px 12px 12px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .partner-columns::-webkit-scrollbar { display: none; }
  .partner-columns article {
    min-height: 158px;
    padding: 14px 12px;
    border-radius: 10px;
    scroll-snap-align: start;
  }
  .partner-columns article > span {
    width: 42px;
    height: 42px;
    margin-bottom: 10px;
    font-size: 22px;
  }
  .partner-columns h2 {
    margin-bottom: 0;
    font-size: 13px;
    line-height: 1.2;
  }
  .partner-columns p {
    display: none;
  }
  .partner-section {
    padding: 8px 0 26px;
  }
  .partner-section-title {
    justify-items: start;
    margin-bottom: 16px;
    text-align: left;
  }
  .partner-section-title h2,
  .partner-split h2 {
    font-size: 22px;
  }
  .partner-value-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .partner-value-grid article {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 0 12px;
    min-height: 0;
    padding: 14px;
    border-radius: 10px;
  }
  .partner-value-grid article > span {
    grid-row: 1 / span 2;
    width: 44px;
    height: 44px;
    margin: 0;
    font-size: 22px;
  }
  .partner-value-grid h3 {
    margin: 0 0 5px;
    font-size: 15px;
  }
  .partner-value-grid p {
    font-size: 12.5px;
    line-height: 1.45;
  }
  .partner-split {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 26px;
    padding: 16px;
    border-radius: 12px;
  }
  .partner-split > div > p {
    margin-top: 10px;
    font-size: 12.5px;
    line-height: 1.45;
  }
  .partner-split ul {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .partner-split li {
    padding: 12px;
  }
  .partner-split li strong {
    font-size: 13px;
  }
  .partner-split li span {
    font-size: 12px;
    line-height: 1.4;
  }
  .partner-process {
    padding: 2px 0 26px;
  }
  .partner-final {
    grid-template-columns: 52px 1fr;
    gap: 12px;
    padding: 16px;
    border-radius: 12px;
  }
  .partner-final > span {
    width: 52px;
    height: 52px;
    font-size: 25px;
  }
  .partner-final h2 {
    margin: 0;
    font-size: 19px;
  }
  .partner-final p {
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.4;
  }
  .partner-final .mg-button {
    grid-column: 1 / -1;
    min-height: 50px;
    margin-top: 4px;
  }
}

/* Premium testimonial carousel: one compact card, auto-rotating. */
.mg-testimonials {
  display: grid;
  gap: 8px;
  max-height: 200px;
  padding: 12px 0 14px;
  overflow: hidden;
}

.mg-testimonial-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.mg-testimonial-head span {
  display: block;
  margin-bottom: 2px;
  color: #0f766e;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.mg-testimonial-head h2 {
  margin: 0;
  color: #061d39;
  font-size: 24px;
  line-height: 1;
  text-align: left;
}

.mg-testimonial-nav {
  display: flex;
  gap: 7px;
}

.mg-testimonial-nav button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #dce7f1;
  border-radius: 999px;
  background: #fff;
  color: #10233e;
  font-size: 22px;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(7, 31, 61, .08);
  cursor: pointer;
}

.mg-testimonial-nav button:hover,
.mg-testimonial-nav button:focus-visible {
  border-color: rgba(0, 143, 125, .32);
  color: #007f7a;
  outline: none;
}

.mg-testimonial-carousel {
  position: relative;
  height: 118px;
  overflow: hidden;
}

.mg-testimonial-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  border: 1px solid #dfe8f1;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(7, 31, 61, .08);
  opacity: 0;
  pointer-events: none;
  transform: translateX(22px);
  transition: opacity .46s ease, transform .46s ease;
}

.mg-testimonial-slide.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.mg-testimonial-photo {
  position: relative;
  width: 86px;
  height: 86px;
}

.mg-testimonial-photo img {
  width: 86px;
  height: 86px;
  border-radius: 999px;
  object-fit: cover;
  box-shadow: 0 10px 22px rgba(7, 31, 61, .12);
}

.mg-testimonial-photo span {
  position: absolute;
  left: -2px;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #fff;
  font-size: 15px;
  box-shadow: 0 6px 14px rgba(7, 31, 61, .14);
}

.mg-testimonial-photo span img {
  width: 20px;
  height: 15px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: none;
}

.mg-testimonial-body {
  position: relative;
  min-width: 0;
  padding-left: 34px;
}

.mg-testimonial-body::before {
  content: "“";
  position: absolute;
  left: 0;
  top: -10px;
  color: #14b8a6;
  font-size: 48px;
  line-height: 1;
  font-weight: 900;
}

.mg-testimonial-body p {
  display: -webkit-box;
  margin: 0 0 10px;
  overflow: hidden;
  color: #0b1f38;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 650;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.mg-testimonial-body div {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.mg-testimonial-body strong,
.mg-testimonial-body span,
.mg-testimonial-body em {
  white-space: nowrap;
}

.mg-testimonial-body strong {
  color: #061d39;
  font-size: 12px;
  font-weight: 950;
}

.mg-testimonial-body span {
  color: #526176;
  font-size: 11px;
  font-weight: 800;
}

.mg-testimonial-body em {
  margin-left: auto;
  color: #f6bf32;
  font-style: normal;
  font-size: 12px;
  letter-spacing: 2px;
}

.mg-testimonial-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  min-height: 10px;
}

.mg-testimonial-dots button {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #cfd9e4;
  cursor: pointer;
}

.mg-testimonial-dots button.active {
  width: 18px;
  background: #071f3d;
}

@media (max-width: 680px) {
  .mg-testimonials {
    gap: 7px;
    max-height: 180px;
    padding: 10px 0 12px;
  }

  .mg-testimonial-head h2 {
    font-size: 19px;
  }

  .mg-testimonial-head span,
  .mg-testimonial-nav {
    display: none;
  }

  .mg-testimonial-carousel {
    height: 134px;
  }

  .mg-testimonial-slide {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
    border-radius: 15px;
  }

  .mg-testimonial-photo,
  .mg-testimonial-photo img {
    width: 56px;
    height: 56px;
  }

  .mg-testimonial-photo span {
    width: 21px;
    height: 21px;
    font-size: 12px;
  }

  .mg-testimonial-body {
    padding-left: 22px;
  }

  .mg-testimonial-body::before {
    top: -6px;
    font-size: 34px;
  }

  .mg-testimonial-body p {
    margin-bottom: 7px;
    font-size: 11.5px;
    line-height: 1.25;
    -webkit-line-clamp: 3;
  }

  .mg-testimonial-body div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 8px;
  }

  .mg-testimonial-body strong,
  .mg-testimonial-body span {
    overflow: hidden;
    font-size: 9.5px;
    text-overflow: ellipsis;
  }

  .mg-testimonial-body span:nth-of-type(2) {
    display: none;
  }

  .mg-testimonial-body em {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    margin-left: 0;
    font-size: 10px;
    letter-spacing: 1px;
  }
}

@media (max-width: 380px) {
  .showcase-header,
  .showcase-main,
  .showcase-footer-grid,
  .footer-bottom {
    width: min(100% - 24px, 1320px);
  }
  .showcase-brand img {
    width: 40px;
    height: 40px;
  }
  .showcase-brand strong {
    font-size: 20px;
  }
  .showcase-brand small {
    font-size: 10px;
  }
  .showcase-nav a {
    padding: 8px 10px;
    font-size: 12px;
  }
  .mg-button {
    min-height: 50px;
    font-size: 13px;
  }
  .mg-hero-copy h1 {
    font-size: clamp(27px, 8.8vw, 32px);
  }
  .mg-hero-copy p {
    font-size: 13px;
    line-height: 1.45;
  }
  .mg-section {
    padding: 22px 0;
  }
  .mg-service-card,
  .partner-columns article {
    padding: 12px 7px 10px;
  }
  .mg-stats div {
    grid-template-columns: 1fr;
    min-height: 104px;
    padding: 10px 5px;
  }
  .mg-stats strong {
    font-size: 22px;
  }
  .mg-partner-band h2 {
    font-size: 19px;
  }
  .partner-hero h1 {
    font-size: clamp(23px, 7vw, 28px);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  min-width: 320px;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(0,169,157,.06), transparent 260px),
    var(--bg);
  font-family: "Segoe UI", Arial, sans-serif;
  overflow-x: hidden;
}
a { color: var(--teal-dark); text-decoration: none; }
img, svg { max-width: 100%; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 78px;
  padding: 14px 28px;
  background: rgba(255, 255, 255, .94);
  color: var(--ink);
  border-bottom: 1px solid rgba(216, 226, 236, .9);
  box-shadow: 0 10px 30px rgba(7, 31, 61, .05);
}
.brand { display: flex; gap: 14px; align-items: center; color: var(--ink); min-width: 0; }
.brand-mark { width: 48px; height: 48px; border-radius: 13px; flex: 0 0 auto; }
.brand-text { min-width: 0; }
.brand strong { display: block; font-size: 23px; letter-spacing: 0; }
.brand strong span,
.auth-brand h1 span { color: var(--teal-dark); }
.brand small { display: block; color: var(--muted); white-space: nowrap; }
.top-actions { display: flex; align-items: center; gap: 10px; min-width: 0; }
.menu-toggle,
.sidebar-backdrop {
  display: none;
}
.menu-toggle {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
  cursor: pointer;
  place-items: center;
}
.menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 3px 0;
  border-radius: 999px;
  background: currentColor;
}
.global-search input {
  width: 220px;
  min-height: 38px;
  padding: 7px 10px;
}
.language-form { margin: 0; }
.language-select {
  min-height: 38px;
  max-width: 170px;
  padding: 7px 34px 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
  font-weight: 750;
}
.lang, .user-pill {
  padding: 7px 11px;
  border-radius: 999px;
  background: #eef7f6;
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
}
.lang.active { background: var(--teal); color: #fff; }

.app-shell { display: grid; grid-template-columns: 260px 1fr; min-height: calc(100vh - 78px); }
.public-content { grid-column: 1 / -1; max-width: 1180px; width: min(1180px, calc(100% - 32px)); margin: 34px auto; }
.public-portal {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(0,169,157,.08), transparent 300px),
    var(--bg);
}
.public-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 82px;
  padding: 16px clamp(18px, 4vw, 54px);
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(7, 31, 61, .04);
}
.public-portal-content {
  width: min(980px, calc(100% - 32px));
  margin: 34px auto 64px;
}
.public-portal .page-heading {
  text-align: left;
}
.public-portal .wizard-form,
.public-portal .stepper {
  max-width: 980px;
}
.agent-register-card {
  max-width: 920px;
  margin: 0 auto;
}
.public-form-shell {
  display: grid;
  gap: 22px;
}
.public-form-intro {
  max-width: 840px;
}
.public-form-intro h1 {
  margin: 12px 0 10px;
  font-size: 40px;
  line-height: 1.05;
}
.public-form-intro p {
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.55;
}
.agent-register-card {
  display: grid;
  gap: 22px;
  padding: 32px;
}
.form-section-title {
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.form-section-title:first-of-type {
  padding-top: 0;
  border-top: 0;
}
.form-section-title h2 {
  margin: 0 0 6px;
  font-size: 20px;
}
.form-section-title p {
  margin: 0;
  color: var(--muted);
}
.public-submit {
  justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.public-submit .button {
  min-width: 210px;
}
.sidebar {
  position: sticky;
  top: 78px;
  align-self: start;
  height: calc(100vh - 78px);
  padding: 22px 14px;
  background: linear-gradient(180deg, var(--navy), var(--navy-2));
  overflow-y: auto;
}
.sidebar a {
  display: block;
  padding: 11px 13px;
  margin-bottom: 6px;
  border-radius: 8px;
  color: #dce9f7;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 700;
}
.sidebar a:hover { background: rgba(0,169,157,.18); color: #fff; }
.drawer-account,
.drawer-search,
.drawer-language,
.drawer-logout,
.drawer-label {
  display: none;
}
.content { min-width: 0; padding: 30px; overflow-x: clip; }

.page-heading { margin-bottom: 22px; }
.compact-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.page-heading .button { margin-top: 12px; }
.page-heading h1, .auth-panel h1 { margin: 0 0 8px; font-size: 34px; line-height: 1.1; }
.page-heading p, .auth-panel p, .muted { color: var(--muted); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px;
  box-shadow: var(--shadow);
  min-width: 0;
}
.card h2 { margin: 0 0 16px; font-size: 22px; }
.card > .button + .button {
  margin-top: 8px;
}

.auth-panel { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 42px; align-items: center; max-width: 1040px; margin: 70px auto; }
.activation-panel { grid-template-columns: minmax(0, 1fr) minmax(420px, 560px); }
.auth-brand {
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 44px 20px;
}
.auth-logo-lockup {
  width: 100%;
  max-width: 560px;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin-bottom: 26px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: visible;
}
.auth-logo-mark {
  width: 88px;
  height: 88px;
  border-radius: 16px;
  object-fit: contain;
  background: #02090f;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.auth-logo-lockup strong {
  display: block;
  color: var(--navy);
  font-size: 46px;
  line-height: 1.02;
  white-space: normal;
  overflow-wrap: normal;
}
.auth-logo-lockup strong span { color: var(--teal-dark); }
.auth-logo-lockup small {
  display: block;
  margin-top: 12px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.3;
}
.auth-brand p { max-width: 560px; font-size: 18px; line-height: 1.55; }
.form-card { display: grid; gap: 16px; }
.password-activation-form { gap: 20px; }
.password-rules {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
}
.password-rules div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 8px;
  background: #fff;
}
.password-rules strong {
  min-width: 0;
  flex: 1;
  font-size: 14px;
}
.password-rules span {
  order: 2;
  min-width: 62px;
  text-align: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}
.password-rules .done span { background: #eaf7ef; color: var(--green); }
.password-rules .todo span { background: #fff5db; color: var(--amber); }
.form-card p { margin: 0; }
label span { display: block; margin-bottom: 7px; color: var(--muted); font-size: 13px; font-weight: 700; }
.form-control, .form-select, input, select, textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fbfdff;
  font: inherit;
}
.form-control:focus, .form-select:focus, input:focus, select:focus, textarea:focus {
  outline: 3px solid rgba(0, 169, 157, .18);
  border-color: var(--teal);
  background: #fff;
}
textarea { min-height: 90px; resize: vertical; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; }
.span-2 { grid-column: 1 / -1; }
.form-grid h2 { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.form-actions { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.filter-panel {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
}
.filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.filter-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.filters .button { min-width: 0; }
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
.bulk-actions {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(160px, 240px) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
}
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
}
.checkbox-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-weight: 650;
}
.checkbox-grid input { width: auto; min-height: auto; }
.check-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
}
.check-inline span { margin: 0; }
.check-inline input { width: auto; min-height: auto; }
.inline-form { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: end; }
.inline-form p { margin: 0; }
.stacked-form p { margin: 0 0 12px; }

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-weight: 750;
  cursor: pointer;
  text-align: center;
  line-height: 1.15;
  white-space: normal;
}
.button.primary { background: var(--teal-dark); border-color: var(--teal-dark); color: #fff; }
.button.primary:hover { background: var(--navy); border-color: var(--navy); }
.button.ghost { background: #f8fafc; color: var(--navy); }
.button.danger { background: #fff1f1; border-color: #fecaca; color: var(--red); }
.button.mini { min-height: 32px; padding: 0 10px; font-size: 12px; }
.notice { padding: 14px 16px; border-radius: 10px; background: #fff7ed; color: var(--amber); font-weight: 700; }

.metrics { display: grid; grid-template-columns: repeat(6, minmax(140px, 1fr)); gap: 14px; margin-bottom: 22px; }
.metric {
  padding: 18px;
  border: 1px solid rgba(37, 99, 235, .35);
  border-radius: 8px;
  background: #eaf1ff;
  min-width: 0;
}
.metric strong { display: block; font-size: 24px; color: var(--blue); line-height: 1.05; overflow-wrap: anywhere; }
.metric span { color: var(--ink); font-size: 13px; font-weight: 700; }
.metric.teal { background: #e8f6f3; border-color: rgba(15,118,110,.35); }
.metric.teal strong { color: var(--teal); }
.metric.green { background: #eaf7ef; border-color: rgba(21,128,61,.35); }
.metric.green strong { color: var(--green); }
.metric.amber { background: #fff5db; border-color: rgba(180,83,9,.35); }
.metric.amber strong { color: var(--amber); }
.metric.red { background: #fff1f1; border-color: rgba(220,38,38,.35); }
.metric.red strong { color: var(--red); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 22px; }
.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 18px;
  align-items: start;
}
.dashboard-main,
.dashboard-side {
  display: grid;
  gap: 18px;
}
.dashboard-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .7fr);
  gap: 18px;
}
.procedure-layout {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.panel-layout {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.resource-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.resource-grid.single-column { grid-template-columns: 1fr; }
.resource-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 12px 30px rgba(7, 31, 61, .05);
}
.resource-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
  gap: 16px;
}
.resource-card h2 {
  margin: 8px 0 6px;
  font-size: 20px;
}
.resource-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}
.resource-note {
  padding: 12px;
  border-radius: 8px;
  background: #f8fafc;
}

.resource-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.empty-state {
  grid-column: 1 / -1;
}
.section-gap {
  margin-top: 18px;
}
.case-create-form {
  display: grid;
  gap: 22px;
}
.comfortable-table th,
.comfortable-table td {
  padding-top: 14px;
  padding-bottom: 14px;
}
.audit-timeline {
  max-height: 620px;
  overflow: auto;
}
.procedure-form-card {
  position: sticky;
  top: 96px;
  padding: 20px;
}
.procedure-form {
  display: grid;
  gap: 14px;
}
.procedure-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.procedure-list {
  display: grid;
  gap: 12px;
}
.procedure-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 12px 30px rgba(7, 31, 61, .05);
}
.procedure-card-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
  gap: 16px;
}
.procedure-card h2 {
  margin: 8px 0 6px;
  font-size: 20px;
}
.procedure-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}
.procedure-card dl {
  grid-template-columns: 70px minmax(0, 1fr);
  align-content: start;
}
.procedure-actions {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.procedure-actions form { margin: 0; }
.muted-status {
  background: #eef2f7;
  color: var(--muted);
}
.compact-card { padding: 18px; }
.compact-card h2 { font-size: 17px; margin-bottom: 12px; }
.settings-layout {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
}
.settings-preview {
  display: grid;
  gap: 16px;
}
.brand-preview {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
}
.brand-preview strong,
.brand-preview span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}
.brand-preview strong {
  font-size: 18px;
}
.brand-preview span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}
.swatches {
  display: flex;
  gap: 10px;
}
.swatches span {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid var(--line);
}
.quick-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  width: 100%;
}
.scroll-panel {
  max-height: 280px;
  overflow: auto;
  padding-right: 4px;
}
.detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 22px; }
.copy-link { padding: 14px; border-radius: 10px; background: #eaf1ff; color: var(--blue); font-family: Consolas, monospace; overflow-wrap: anywhere; }
.copy-link.slim { padding: 10px; max-height: 76px; overflow: auto; font-size: 12px; }
.copy-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 16px;
}
.copy-line .copy-link {
  margin: 0;
}
.compact-copy-line {
  grid-template-columns: 1fr;
}
.qr-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 16px;
}
.table-wrap,
.compact-list,
.bar-list,
.copy-link {
  min-width: 0;
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th, td { padding: 12px 13px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { background: #f8fafc; color: var(--muted); font-size: 12px; text-transform: uppercase; }
.status { display: inline-block; padding: 5px 9px; border-radius: 999px; background: #e8f7f5; color: var(--teal-dark); font-weight: 750; font-size: 12px; }
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; }

dl { display: grid; grid-template-columns: minmax(96px, 130px) minmax(0, 1fr); gap: 10px; margin: 0; }
dt { color: var(--muted); }
dd { min-width: 0; margin: 0; font-weight: 700; overflow-wrap: anywhere; word-break: break-word; }
.doc-list { display: grid; gap: 10px; margin-bottom: 18px; }
.stepper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 0;
  margin: 0 0 18px;
  list-style: none;
}
.stepper li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.stepper li.active {
  border-color: var(--teal-dark);
  box-shadow: 0 0 0 3px rgba(0,169,157,.12);
}
.stepper strong {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--teal-dark);
  color: #fff;
}
.qr-code {
  width: 172px;
  height: 172px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.swatches { display: flex; gap: 10px; margin-top: 18px; }
.swatches span {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid var(--line);
}
.wizard-step h2 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wizard-step h2::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--teal-dark);
}
.bar-list { display: grid; gap: 11px; }
.bar-list div {
  display: grid;
  grid-template-columns: minmax(96px, 150px) 1fr auto;
  align-items: center;
  gap: 10px;
}
.bar-list strong {
  display: block;
  min-width: 4px;
  height: 10px;
  border-radius: 999px;
  background: var(--teal-dark);
}
.bar-list em { color: var(--muted); font-style: normal; font-weight: 700; }
.progress {
  height: 12px;
  border-radius: 999px;
  background: #e8eef5;
  overflow: hidden;
}
.progress span { display: block; height: 100%; background: var(--teal-dark); }
.check-list { display: grid; gap: 8px; margin-top: 12px; }
.check-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
}
.check-list .done { color: var(--green); font-weight: 800; }
.check-list .todo { color: var(--amber); font-weight: 800; }
.wizard-form { display: grid; gap: 18px; }
.wizard-step { display: none; }
.wizard-step.active { display: grid; }
.wizard-actions { justify-content: space-between; border-top: 1px solid var(--line); padding-top: 16px; }
.doc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
}
.doc-row[data-status="MISSING"] { border-color: #f59e0b; background: #fffaf0; }
.doc-row[data-status="RECEIVED"] { border-color: #86efac; background: #f0fdf4; }
.doc-row span { min-width: 0; overflow-wrap: anywhere; }
.doc-row small { display: block; margin-top: 4px; color: var(--muted); font-weight: 600; }
.compact-upload {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.stacked-form h3 {
  margin: 0 0 12px;
  color: var(--navy);
  font-size: 16px;
}
.timeline { display: grid; gap: 14px; }
.timeline div { padding-left: 14px; border-left: 3px solid var(--blue); }
.timeline strong, .timeline small { display: block; color: var(--muted); }
.compact-list { display: grid; gap: 12px; margin-bottom: 16px; }
.compact-list div { display: flex; justify-content: space-between; gap: 16px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.compact-list-tight { gap: 8px; margin-bottom: 0; }
.compact-list-tight div { padding: 9px 10px; border-radius: 8px; }
.compact-list-tight strong,
.compact-list-tight span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compact-list-scroll {
  max-height: 244px;
  overflow: auto;
  padding-right: 4px;
}
.card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.card-heading h2 { margin: 0; }
.latest-actions div {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto;
  align-items: center;
}
.latest-actions strong,
.latest-actions span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.latest-actions small {
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
}
.action-card { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.success-panel { max-width: 860px; }

.messages { display: grid; gap: 10px; margin-bottom: 18px; }
.message { padding: 12px 14px; border-radius: 10px; background: #eef6ff; color: var(--blue); font-weight: 700; }
.message.success { background: #eaf7ef; color: var(--green); }
.message.warning { background: #fff5db; color: var(--amber); }
.success-page { max-width: 760px; margin: 60px auto; text-align: center; }

@media (max-width: 980px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: sticky;
    top: 74px;
    z-index: 20;
    display: flex;
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 8px;
    padding: 10px 12px;
    background: var(--navy);
    scrollbar-width: thin;
  }
  .sidebar a {
    flex: 0 0 auto;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    margin: 0;
  }
  .auth-panel, .split, .detail-grid, .form-grid, .metrics, .dashboard-grid, .dashboard-row, .procedure-layout, .procedure-card, .procedure-card-main, .panel-layout, .resource-grid, .resource-main, .filter-grid { grid-template-columns: 1fr; }
  .procedure-form-card { position: static; }
  .stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .bulk-actions {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .span-2 { grid-column: auto; }
  .content { padding: 18px; }
  .topbar {
    flex-wrap: wrap;
    min-height: 74px;
    padding: 12px 18px;
  }
  .top-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .global-search { flex: 1 1 240px; }
  .global-search input { width: 100%; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-portal-content { width: min(100% - 24px, 980px); margin-top: 22px; }
  .agent-register-card,
  .wizard-form { padding: 22px; }
  .copy-line { grid-template-columns: 1fr; }
  .copy-line .button { width: 100%; }
  .filter-actions { justify-content: stretch; }
  .filter-actions .button { flex: 1; }
  .auth-panel {
    max-width: 720px;
    margin: 28px auto;
    gap: 18px;
  }
  .auth-brand {
    min-height: auto;
    padding: 18px 0 0;
  }
}

@media (max-width: 640px) {
  body.nav-open {
    overflow: hidden;
  }
  .authenticated-shell {
    background: #eef4f9;
  }
  .authenticated-shell .topbar {
    min-height: 56px;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: linear-gradient(90deg, var(--navy), #082d52);
    color: #fff;
    box-shadow: 0 8px 24px rgba(7, 31, 61, .16);
  }
  .authenticated-shell .top-actions {
    display: none;
  }
  .menu-toggle {
    display: grid;
    order: 0;
    width: 40px;
    height: 40px;
    border-color: rgba(255,255,255,.22);
    background: rgba(255,255,255,.08);
    color: #fff;
  }
  .authenticated-shell .brand {
    flex: 1 1 calc(100% - 60px);
    order: 1;
    gap: 9px;
    color: #fff;
  }
  .authenticated-shell .brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 8px;
  }
  .authenticated-shell .brand strong {
    color: #fff;
    font-size: 17px;
    line-height: 1;
  }
  .authenticated-shell .brand small {
    display: none;
  }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    display: block;
    width: min(82vw, 320px);
    height: 100dvh;
    padding: 20px 14px 24px;
    overflow-y: auto;
    background: linear-gradient(180deg, var(--navy), var(--navy-2));
    box-shadow: 24px 0 60px rgba(7, 31, 61, .28);
    pointer-events: none;
    transform: translateX(-105%);
    transition: transform .22s ease;
    visibility: hidden;
  }
  .sidebar a {
    display: block;
    min-height: 44px;
    padding: 13px 12px;
    margin-bottom: 6px;
    text-align: left;
    white-space: normal;
  }
  .drawer-account {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    color: #fff;
  }
  .drawer-avatar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--teal), #42d3ca);
    font-weight: 900;
  }
  .drawer-account strong,
  .drawer-account span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .drawer-account span {
    margin-top: 3px;
    color: #b9cbe0;
    font-size: 12px;
    font-weight: 700;
  }
  .drawer-search,
  .drawer-language {
    display: block;
    margin-bottom: 10px;
  }
  .drawer-search input,
  .drawer-language .language-select {
    min-height: 44px;
    border-color: rgba(255,255,255,.2);
    background: rgba(255,255,255,.08);
    color: #fff;
  }
  .drawer-language option {
    color: var(--navy);
  }
  .drawer-logout {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin: 0 0 18px !important;
    border: 1px solid rgba(255,255,255,.24);
    background: rgba(255,255,255,.06);
    color: #fff !important;
  }
  .drawer-label {
    display: block;
    margin: 8px 4px 10px;
    color: #8fb0d1;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    width: 100%;
    min-height: 100dvh;
    border: 0;
    background: rgba(2, 16, 31, .52);
    cursor: pointer;
  }
  body.nav-open .sidebar {
    pointer-events: auto;
    transform: translateX(0);
    visibility: visible;
  }
  body.nav-open .sidebar-backdrop {
    display: block;
  }
  .topbar {
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
  }
  .public-topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(126px, 148px);
    align-items: center;
    min-height: 0;
    padding: 10px 12px;
  }
  .brand-mark { width: 42px; height: 42px; }
  .brand small { white-space: normal; }
  .brand strong { font-size: 20px; }
  .top-actions {
    order: 2;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    justify-content: stretch;
    gap: 8px;
  }
  .top-actions .global-search,
  .top-actions .user-pill {
    grid-column: 1 / -1;
  }
  .language-select { max-width: none; width: 100%; min-height: 44px; }
  .language-form { min-width: 0; }
  .doc-row { grid-template-columns: 1fr; align-items: start; }
  dl { grid-template-columns: 1fr; gap: 4px; }
  .auth-panel {
    width: min(100%, calc(100vw - 24px));
    margin: 18px auto 28px;
  }
  .auth-brand h1 { font-size: 30px; }
  .auth-logo-lockup { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .auth-logo-mark { width: 56px; height: 56px; }
  .auth-logo-lockup strong { font-size: 28px; white-space: normal; }
  .filters { grid-template-columns: 1fr; }
  .filter-panel {
    padding: 12px;
  }
  .filter-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(172px, 58vw);
    grid-template-columns: none;
    gap: 8px;
    margin: 0 -12px;
    padding: 0 12px 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
  }
  .filter-grid::-webkit-scrollbar { display: none; }
  .filter-grid > * {
    scroll-snap-align: start;
  }
  .filter-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .toolbar.card {
    padding: 12px;
  }
  .stepper { grid-template-columns: 1fr; }
  .stepper li {
    min-height: 52px;
    align-items: flex-start;
  }
  .bar-list div { grid-template-columns: 1fr; }
  .authenticated-shell .content { padding: 14px 12px 24px; }
  .content { padding: 12px; }
  .public-content { width: min(100%, calc(100vw - 24px)); margin: 18px auto; }
  .public-topbar .brand {
    order: 0;
    gap: 10px;
  }
  .public-topbar .brand-mark {
    width: 38px;
    height: 38px;
  }
  .public-topbar .brand strong {
    font-size: 18px;
  }
  .public-topbar .brand small {
    display: none;
  }
  .public-topbar .language-form {
    order: 1;
    width: 100%;
  }
  .public-topbar .language-select {
    min-height: 40px;
    padding-block: 6px;
  }
  .card { padding: 14px; box-shadow: 0 8px 20px rgba(7, 31, 61, .055); }
  .metrics {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(132px, 42vw);
    grid-template-columns: none;
    gap: 10px;
    margin: 0 -12px 18px;
    padding: 0 12px 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
  .metrics::-webkit-scrollbar { display: none; }
  .metric {
    min-height: 114px;
    padding: 14px;
    scroll-snap-align: start;
  }
  .metric strong { font-size: 21px; }
  .metric span { font-size: 12px; }
  .page-heading { margin-bottom: 14px; }
  .page-heading h1, .auth-panel h1, .public-form-intro h1 { font-size: 28px; }
  .page-heading p {
    font-size: 15px;
    line-height: 1.4;
  }
  .dashboard-grid,
  .dashboard-main,
  .dashboard-side,
  .split,
  .dashboard-row {
    gap: 12px;
  }
  .quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .quick-actions .button {
    min-height: 48px;
    padding-inline: 10px;
  }
  .compact-card h2,
  .card h2 {
    font-size: 18px;
  }
  .dashboard-side .compact-card .compact-list,
  .dashboard-main .compact-list,
  .scroll-panel {
    max-height: 236px;
    overflow: auto;
  }
  .dashboard-main > .card:first-child .table-wrap,
  .card > form > .table-wrap {
    max-height: 520px;
    overflow-y: auto;
  }
  .dashboard-main > .card:first-child {
    padding-bottom: 12px;
  }
  .dashboard-side .compact-card {
    padding: 14px;
  }
  .public-form-intro p { font-size: 16px; }
  .form-actions, .wizard-actions, .public-submit { flex-direction: column; align-items: stretch; }
  .form-actions .button, .wizard-actions .button, .public-submit .button { width: 100%; }
  .procedure-actions { flex-direction: column; }
  .procedure-actions .button, .procedure-actions form { width: 100%; }
  .qr-panel { align-items: stretch; }
  .qr-code { width: min(100%, 220px); height: auto; }
  .compact-heading,
  .card-heading {
    align-items: stretch;
    flex-direction: column;
  }
  .row-actions,
  .resource-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
  .row-actions .button,
  .resource-actions .button {
    width: 100%;
  }
  .compact-list div,
  .check-list div {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
  .latest-actions div {
    grid-template-columns: 1fr;
  }
  .latest-actions small,
  .latest-actions strong,
  .latest-actions span,
  .compact-list-tight strong,
  .compact-list-tight span {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .checkbox-grid,
  .procedure-form-grid {
    grid-template-columns: 1fr;
  }
  .inline-form {
    grid-template-columns: 1fr;
  }
  .copy-link {
    font-size: 13px;
  }
  .success-page {
    margin: 24px auto;
    text-align: left;
  }
  .success-page .button {
    width: 100%;
  }
}

@media (max-width: 520px) {
  table.responsive-table,
  .table-wrap table {
    min-width: 0;
  }
  .table-wrap table thead {
    display: none;
  }
  .table-wrap table,
  .table-wrap tbody,
  .table-wrap tr,
  .table-wrap td {
    display: block;
    width: 100%;
  }
  .table-wrap tr {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(7,31,61,.04);
  }
  .table-wrap tr + tr {
    margin-top: 12px;
  }
  .table-wrap td {
    display: grid;
    grid-template-columns: minmax(84px, 36%) minmax(0, 1fr);
    gap: 8px;
    min-height: 32px;
    padding: 7px 0;
    border-bottom: 1px solid #edf2f7;
    text-align: right;
    overflow-wrap: anywhere;
  }
  .table-wrap td:last-child {
    border-bottom: 0;
  }
  .table-wrap td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-align: left;
    text-transform: uppercase;
  }
  .table-wrap td[colspan] {
    display: block;
    text-align: left;
  }
  .table-wrap td[colspan]::before {
    display: none;
  }
}

/* Reference-aligned SaaS public candidate form. Final authoritative layer. */
:root {
  --mg-teal: #0d9488;
  --mg-teal-soft: #14b8a6;
  --mg-ink: #081b33;
  --mg-muted: #64748b;
  --mg-line: #e2e8f0;
  --mg-bg: #f6f9fb;
  --mg-focus: rgba(20, 184, 166, .16);
}

.public-portal {
  background: var(--mg-bg);
  color: var(--mg-ink);
}

.public-topbar {
  min-height: 68px;
  padding: 12px clamp(14px, 4vw, 42px);
  border-bottom: 1px solid var(--mg-line);
  background: rgba(255, 255, 255, .96);
}

.public-topbar .brand {
  gap: 11px;
}

.public-topbar .brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 9px;
}

.public-topbar .brand strong {
  color: var(--mg-ink);
  font-size: clamp(19px, 2.3vw, 25px);
  font-weight: 880;
}

.public-topbar .brand strong span {
  color: var(--mg-teal);
}

.public-topbar .brand small {
  display: none;
}

.public-topbar .language-select {
  min-height: 40px;
  min-width: 152px;
  padding: 8px 36px 8px 13px;
  border: 1px solid #d7e1ec;
  border-radius: 14px;
  background: #fff;
  color: var(--mg-ink);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
  font-size: 14px;
  font-weight: 780;
}

.public-portal-content {
  width: min(920px, calc(100% - 28px));
  margin: 26px auto 58px;
}

.candidate-public-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.candidate-public-shell .public-intake-panel {
  display: grid;
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.candidate-public-shell .public-intake-panel h1 {
  max-width: none;
  margin: 0;
  color: var(--mg-ink);
  font-size: clamp(30px, 4.2vw, 44px);
  line-height: 1.08;
  font-weight: 880;
  letter-spacing: 0;
}

.candidate-public-shell .public-intake-panel p {
  max-width: 660px;
  margin: 0;
  color: var(--mg-muted);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 520;
}

.candidate-public-shell .public-agent-card {
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: baseline;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
}

.candidate-public-shell .public-agent-card span {
  color: var(--mg-muted);
  font-size: 13px;
  font-weight: 650;
  text-transform: none;
}

.candidate-public-shell .public-agent-card strong {
  color: var(--mg-teal);
  font-size: 13px;
  font-weight: 850;
}

.candidate-public-shell .public-stepper {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 4px 0 0;
  padding: 18px 14px 14px;
  border: 1px solid var(--mg-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(15, 23, 42, .06);
}

.candidate-public-shell .public-stepper::before {
  content: "";
  position: absolute;
  left: 13%;
  right: 13%;
  top: 34px;
  height: 2px;
  border-radius: 999px;
  background: #e4edf5;
}

.candidate-public-shell .public-stepper li {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 64px;
  justify-items: center;
  align-content: start;
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  transition: color .2s ease, transform .2s ease;
}

.candidate-public-shell .public-stepper li.active,
.candidate-public-shell .public-stepper li.completed {
  background: transparent;
  box-shadow: none;
}

.candidate-public-shell .public-stepper strong {
  width: 34px;
  height: 34px;
  border: 2px solid #fff;
  background: #eaf1f6;
  color: #64748b;
  box-shadow: 0 0 0 1px #d9e5ef;
  font-size: 13px;
  font-weight: 850;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.candidate-public-shell .public-stepper li.active strong,
.candidate-public-shell .public-stepper li.completed strong {
  background: linear-gradient(135deg, var(--mg-teal-soft), var(--mg-teal));
  color: #fff;
  box-shadow: 0 9px 18px rgba(13, 148, 136, .22);
}

.candidate-public-shell .public-stepper span {
  color: #526176;
  font-size: 12px;
  font-weight: 780;
  line-height: 1.1;
  text-align: center;
}

.candidate-public-shell .public-stepper li.active span {
  color: var(--mg-teal);
}

.candidate-public-shell .public-intake-card {
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--mg-line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .07);
}

.candidate-public-shell .wizard-step {
  animation: mgStepIn .2s ease;
}

@keyframes mgStepIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.candidate-public-shell .public-intake-card .wizard-step h2 {
  margin: 0 0 18px;
  padding: 0 0 13px;
  border-bottom: 1px solid var(--mg-line);
  color: var(--mg-ink);
  font-size: 22px;
  line-height: 1.15;
  font-weight: 860;
}

.candidate-public-shell .public-intake-card .wizard-step h2::before {
  display: none;
}

.candidate-public-shell .public-intake-card .form-grid {
  gap: 15px 18px;
}

.candidate-public-shell .public-intake-card label span {
  margin-bottom: 7px;
  color: #334155;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 760;
}

.candidate-public-shell .public-intake-card input,
.candidate-public-shell .public-intake-card select,
.candidate-public-shell .public-intake-card textarea {
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid #dbe5ee;
  border-radius: 14px;
  background: #fff;
  color: var(--mg-ink);
  box-shadow: 0 1px 0 rgba(15, 23, 42, .02);
  font-size: 14px;
  font-weight: 520;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.candidate-public-shell .public-intake-card input:focus,
.candidate-public-shell .public-intake-card select:focus,
.candidate-public-shell .public-intake-card textarea:focus {
  outline: 0;
  border-color: var(--mg-teal-soft);
  box-shadow: 0 0 0 4px var(--mg-focus);
  background: #fff;
}

.candidate-public-shell .public-intake-card .is-filled {
  border-color: #b7dcd7;
}

.candidate-public-shell .errorlist {
  margin: 6px 0 0;
  padding: 8px 10px;
  border: 1px solid #fecaca;
  border-radius: 12px;
  background: #fff5f5;
  color: #b42318;
  font-size: 12px;
  font-weight: 650;
  list-style: none;
}

.candidate-public-shell .form-tip {
  padding: 10px 12px;
  border: 1px solid #c7eee9;
  border-radius: 14px;
  background: #f0fdfa;
  color: #0f766e;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 650;
}

.candidate-public-shell .wizard-actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  margin-top: 2px;
  padding-top: 16px;
  border-top: 1px solid var(--mg-line);
}

.candidate-public-shell .wizard-actions .button {
  min-height: 48px;
  border-radius: 15px;
  font-size: 14px;
  font-weight: 820;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.candidate-public-shell .wizard-actions .button.primary {
  width: 100%;
  justify-content: center;
  gap: 10px;
  border: 0;
  background: linear-gradient(135deg, var(--mg-teal-soft), var(--mg-teal));
  color: #fff;
  box-shadow: 0 14px 24px rgba(13, 148, 136, .22);
}

.candidate-public-shell .wizard-actions .button.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 28px rgba(13, 148, 136, .27);
}

.candidate-public-shell .wizard-actions .button.ghost {
  background: #fff;
  color: #334155;
}

.candidate-public-shell .button.loading {
  opacity: .8;
  pointer-events: none;
}

.candidate-public-shell .button.loading::after {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255,255,255,.45);
  border-top-color: #fff;
  border-radius: 999px;
  content: "";
  animation: mgSpin .7s linear infinite;
}

@keyframes mgSpin {
  to { transform: rotate(360deg); }
}

@media (max-width: 720px) {
  .public-topbar {
    min-height: 58px;
    padding: 8px 11px;
  }

  .public-topbar .brand-mark {
    width: 30px;
    height: 30px;
  }

  .public-topbar .brand strong {
    font-size: 16px;
  }

  .public-topbar .language-select {
    min-width: 126px;
    min-height: 34px;
    border-radius: 12px;
    font-size: 12px;
  }

  .public-portal-content {
    width: min(100% - 18px, 920px);
    margin: 14px auto 28px;
  }

  .candidate-public-shell {
    gap: 10px;
  }

  .candidate-public-shell .public-intake-panel {
    gap: 4px;
  }

  .candidate-public-shell .public-intake-panel h1 {
    font-size: 24px;
    line-height: 1.08;
  }

  .candidate-public-shell .public-intake-panel p {
    font-size: 12.5px;
    line-height: 1.36;
  }

  .candidate-public-shell .public-agent-card span,
  .candidate-public-shell .public-agent-card strong {
    font-size: 11px;
  }

  .candidate-public-shell .public-stepper {
    padding: 12px 7px 8px;
    border-radius: 16px;
  }

  .candidate-public-shell .public-stepper::before {
    left: 14%;
    right: 14%;
    top: 26px;
  }

  .candidate-public-shell .public-stepper li {
    min-height: 48px;
    gap: 5px;
  }

  .candidate-public-shell .public-stepper strong {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }

  .candidate-public-shell .public-stepper span {
    font-size: 10px;
  }

  .candidate-public-shell .public-intake-card {
    padding: 14px;
    border-radius: 16px;
  }

  .candidate-public-shell .public-intake-card .wizard-step h2 {
    margin-bottom: 12px;
    padding-bottom: 10px;
    font-size: 19px;
  }

  .candidate-public-shell .public-intake-card .form-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .candidate-public-shell .public-intake-card .span-2 {
    grid-column: 1;
  }

  .candidate-public-shell .public-intake-card label span {
    margin-bottom: 4px;
    font-size: 10.5px;
  }

  .candidate-public-shell .public-intake-card input,
  .candidate-public-shell .public-intake-card select,
  .candidate-public-shell .public-intake-card textarea {
    min-height: 40px;
    padding: 8px 11px;
    border-radius: 12px;
    font-size: 13px;
  }

  .candidate-public-shell .form-tip {
    padding: 8px 10px;
    border-radius: 12px;
    font-size: 11px;
  }

  .candidate-public-shell .wizard-actions {
    grid-template-columns: 1fr;
    padding-top: 12px;
  }

  .candidate-public-shell .wizard-actions .button {
    width: 100%;
    min-height: 42px;
    border-radius: 13px;
    font-size: 12px;
  }
}

/* Client reference match: premium rounded intake with hero visual, icon stepper, and icon fields. */
body.public-portal {
  background:
    linear-gradient(180deg, #eef8fb 0, #f4f9fc 360px, #f7fbfd 100%);
}

.candidate-apply-page {
  width: min(960px, 100%);
  gap: 20px;
}

.candidate-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  align-items: center;
  gap: 22px;
  min-height: 146px;
}

.candidate-hero h1 {
  font-size: clamp(34px, 4.1vw, 48px);
  line-height: 1.02;
  font-weight: 900;
}

.candidate-hero p {
  font-size: 16px;
  line-height: 1.5;
}

.candidate-hero-visual {
  position: relative;
  width: 190px;
  height: 130px;
  justify-self: end;
}

.candidate-hero-visual .file-card {
  position: absolute;
  left: 40px;
  top: 6px;
  width: 94px;
  height: 82px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 30px 30px, #14b8a6 0 9px, transparent 10px),
    linear-gradient(90deg, transparent 0 48px, #9fb1c3 49px 82px, transparent 83px),
    linear-gradient(90deg, transparent 0 48px, #c2cfda 49px 74px, transparent 75px),
    #f8fbff;
  background-size: auto, 100% 3px, 100% 3px, auto;
  background-position: center, 0 30px, 0 45px, center;
  background-repeat: no-repeat;
  border: 1px solid #d7e4ee;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
  transform: rotate(4deg);
}

.candidate-hero-visual::before {
  position: absolute;
  right: 20px;
  bottom: 13px;
  width: 118px;
  height: 90px;
  border-radius: 14px 14px 18px 18px;
  background: linear-gradient(145deg, #0f766e, #075985);
  content: "";
  transform: rotate(-6deg);
  box-shadow: 0 18px 28px rgba(15, 23, 42, .18);
}

.candidate-hero-visual .folder-front {
  position: absolute;
  right: 19px;
  bottom: 7px;
  width: 132px;
  height: 82px;
  border-radius: 12px 14px 18px 18px;
  background: linear-gradient(145deg, #18c6b6, #0d9488);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 18px 30px rgba(13, 148, 136, .24);
  transform: skewX(-5deg) rotate(2deg);
}

.candidate-hero-visual span {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #14b8a6;
  box-shadow: 0 0 0 4px rgba(20,184,166,.08);
}

.candidate-hero-visual span:nth-child(3) { right: 5px; top: 18px; }
.candidate-hero-visual span:nth-child(4) { left: 8px; top: 62px; }
.candidate-hero-visual span:nth-child(5) { right: 0; bottom: 28px; }

.candidate-stepper-card {
  padding: 22px 22px 18px;
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .08);
}

.candidate-stepper::before {
  top: 58px;
  left: 17%;
  right: 17%;
  height: 5px;
  background: #e4edf5;
}

.candidate-stepper li {
  gap: 8px;
}

.candidate-stepper strong {
  width: auto;
  height: auto;
  border: 0;
  background: transparent;
  color: #64748b;
  box-shadow: none;
  font-size: 20px;
}

.candidate-stepper em {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 999px;
  background: #edf4f8;
  box-shadow: 0 12px 24px rgba(15, 23, 42, .08);
}

.candidate-stepper em::before,
.field-with-icon > div::before,
.candidate-form-card h2::before {
  display: block;
  background: currentColor;
  content: "";
  -webkit-mask: var(--candidate-icon) center / contain no-repeat;
  mask: var(--candidate-icon) center / contain no-repeat;
}

.candidate-stepper em::before {
  width: 28px;
  height: 28px;
  color: #0f2744;
}

.candidate-stepper [data-step-icon="file"] { --candidate-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M6 2h8l5 5v15H6zM13 3.8V8h4.2zM8.5 12h7v2h-7zm0 4h7v2h-7z'/%3E%3C/svg%3E"); }
.candidate-stepper [data-step-icon="user"] { --candidate-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9m-8 9c.7-4.2 3.7-7 8-7s7.3 2.8 8 7h-2.2c-.7-3-2.7-5-5.8-5s-5.1 2-5.8 5z'/%3E%3C/svg%3E"); }
.candidate-stepper [data-step-icon="passport"] { --candidate-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M7 2h10a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2m5 5a4 4 0 1 0 0 8 4 4 0 0 0 0-8m-2.6 4h5.2a2.6 2.6 0 0 0-5.2 0m.4 1.5a2.6 2.6 0 0 0 4.4 0zM8 18h8v-2H8z'/%3E%3C/svg%3E"); }
.candidate-stepper [data-step-icon="document"] { --candidate-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M6 2h8l5 5v15H6zM13 4v4h4M8 12h8v2H8zm0 4h8v2H8z'/%3E%3C/svg%3E"); }

.candidate-stepper li.active strong,
.candidate-stepper li.completed strong {
  background: transparent;
  color: #0d9488;
  box-shadow: none;
}

.candidate-stepper li.active em,
.candidate-stepper li.completed em {
  background: linear-gradient(145deg, #14b8a6, #0d9488);
  box-shadow: 0 16px 28px rgba(13, 148, 136, .26);
}

.candidate-stepper li.active em::before,
.candidate-stepper li.completed em::before {
  color: #fff;
}

.candidate-stepper span {
  font-size: 18px;
  font-weight: 700;
}

.candidate-form-card {
  padding: 32px;
  border-radius: 24px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .08);
}

.candidate-form-card h2 {
  gap: 14px;
  margin-bottom: 18px;
  font-size: 26px;
}

.candidate-form-card h2::before {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background-color: #e7fbf8;
  color: #0d9488;
  --candidate-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M6 2h8l5 5v15H6zM13 3.8V8h4.2zM8.5 12h7v2h-7zm0 4h7v2h-7z'/%3E%3C/svg%3E");
  -webkit-mask-size: 27px 27px;
  mask-size: 27px 27px;
}

.candidate-form-card h2::after {
  position: absolute;
}

.field-with-icon > div {
  position: relative;
}

.field-with-icon > div::before {
  position: absolute;
  left: 15px;
  top: 50%;
  z-index: 1;
  width: 23px;
  height: 23px;
  color: #0d9488;
  transform: translateY(-50%);
}

.field-with-icon > div::after {
  position: absolute;
  left: 8px;
  top: 50%;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #e7fbf8;
  content: "";
  transform: translateY(-50%);
}

.field-with-icon[data-field-icon="scale"] { --candidate-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M11 4V2h2v2h7v2h-3.1l3.1 6h-8l3.1-6H13v13h4v2H7v-2h4V6H8.9L12 12H4l3.1-6H4V4zm5 3.2L14.6 10h2.8zM8 7.2 6.6 10h2.8z'/%3E%3C/svg%3E"); }
.field-with-icon[data-field-icon="globe"] { --candidate-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20m6.9 9h-3.1a15 15 0 0 0-1.1-5A8.1 8.1 0 0 1 18.9 11M12 4.1c.7 1 1.5 3.1 1.7 6.9h-3.4c.2-3.8 1-5.9 1.7-6.9M4.3 13h3.9c.1 2 .5 3.7 1 5A8 8 0 0 1 4.3 13m3.9-2H4.3A8 8 0 0 1 9.2 6c-.5 1.3-.9 3-1 5m3.8 8.9c-.7-1-1.5-3.1-1.7-6.9h3.4c-.2 3.8-1 5.9-1.7 6.9M14.8 18c.5-1.3.9-3 1-5h3.1a8.1 8.1 0 0 1-4.1 5'/%3E%3C/svg%3E"); }
.field-with-icon[data-field-icon="pin"] { --candidate-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7m0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5'/%3E%3C/svg%3E"); }
.field-with-icon[data-field-icon="city"] { --candidate-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M3 21V8h6v13zm8 0V3h7v18zm-6-2h2v-2H5zm0-4h2v-2H5zm8 4h3v-2h-3zm0-4h3v-2h-3zm0-4h3V9h-3zm0-4h3V5h-3zm6 14v-9h2v9z'/%3E%3C/svg%3E"); }
.field-with-icon[data-field-icon="mail"] { --candidate-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M3 5h18v14H3zm9 7 7-5H5zm0 2.4L5 9.3V17h14V9.3z'/%3E%3C/svg%3E"); }
.field-with-icon[data-field-icon="calendar"] { --candidate-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M7 2h2v3h6V2h2v3h4v17H3V5h4zm12 8H5v10h14zM5 8h14V7H5zm2 4h3v3H7zm5 0h3v3h-3z'/%3E%3C/svg%3E"); }

.field-with-icon span i {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  margin-left: 6px;
  border: 1px solid #0d9488;
  border-radius: 999px;
  color: #0d9488;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.candidate-form-card .field-with-icon input,
.candidate-form-card .field-with-icon select {
  padding-left: 58px;
}

.candidate-form-card .button.primary {
  min-height: 58px;
  border-radius: 16px;
  font-size: 20px;
  box-shadow: 0 20px 34px rgba(13, 148, 136, .24);
}

.candidate-form-card .button.primary span:last-child {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  font-size: 34px;
  line-height: 1;
}

.candidate-form-card .button.primary span:first-child {
  margin-left: auto;
}

@media (max-width: 720px) {
  .candidate-apply-page {
    gap: 12px;
  }

  .candidate-hero {
    grid-template-columns: minmax(0, 1fr) 118px;
    gap: 8px;
    min-height: 106px;
  }

  .candidate-hero h1 {
    font-size: 26px;
  }

  .candidate-hero p {
    font-size: 12.5px;
  }

  .candidate-hero-visual {
    width: 110px;
    height: 88px;
  }

  .candidate-hero-visual .file-card {
    left: 22px;
    width: 58px;
    height: 54px;
    border-radius: 8px;
    background-size: auto, 100% 2px, 100% 2px, auto;
    background-position: center, 0 22px, 0 32px, center;
  }

  .candidate-hero-visual::before {
    right: 10px;
    bottom: 10px;
    width: 78px;
    height: 58px;
    border-radius: 10px 10px 13px 13px;
  }

  .candidate-hero-visual .folder-front {
    right: 8px;
    bottom: 5px;
    width: 84px;
    height: 52px;
    border-radius: 9px 10px 13px 13px;
  }

  .candidate-stepper-card {
    padding: 14px 8px 10px;
    border-radius: 18px;
  }

  .candidate-stepper::before {
    top: 42px;
  }

  .candidate-stepper strong {
    font-size: 14px;
  }

  .candidate-stepper em {
    width: 42px;
    height: 42px;
  }

  .candidate-stepper em::before {
    width: 21px;
    height: 21px;
  }

  .candidate-stepper span {
    font-size: 11px;
  }

  .candidate-form-card {
    padding: 17px 14px;
    border-radius: 18px;
  }

  .candidate-form-card h2 {
    gap: 10px;
    margin-bottom: 12px;
    font-size: 21px;
  }

  .candidate-form-card h2::before {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    -webkit-mask-size: 22px 22px;
    mask-size: 22px 22px;
  }

  .candidate-form-card .form-grid {
    gap: 13px;
  }

  .candidate-form-card label span {
    font-size: 11px;
  }

  .candidate-form-card input,
  .candidate-form-card select,
  .candidate-form-card textarea {
    min-height: 48px;
    font-size: 14px;
  }

  .candidate-form-card .button.primary {
    min-height: 54px;
    font-size: 17px;
  }

  .candidate-form-card .button.primary span:last-child {
    width: 38px;
    height: 38px;
    font-size: 28px;
  }
}

@media (max-width: 420px) {
  body.public-portal .public-topbar {
    min-height: 52px;
  }

  .candidate-apply-page {
    gap: 8px;
  }

  .candidate-hero {
    grid-template-columns: minmax(0, 1fr) 96px;
    min-height: 82px;
  }

  .candidate-hero h1 {
    font-size: 23px;
  }

  .candidate-hero p {
    font-size: 11.5px;
    line-height: 1.24;
  }

  .candidate-agent-line span,
  .candidate-agent-line strong {
    font-size: 10.5px;
  }

  .candidate-hero-visual {
    width: 92px;
    height: 72px;
  }

  .candidate-hero-visual .file-card {
    left: 18px;
    width: 48px;
    height: 44px;
  }

  .candidate-hero-visual::before {
    width: 66px;
    height: 48px;
  }

  .candidate-hero-visual .folder-front {
    width: 72px;
    height: 44px;
  }

  .candidate-stepper-card {
    padding: 10px 7px 8px;
  }

  .candidate-stepper::before {
    top: 34px;
  }

  .candidate-stepper {
    gap: 0;
  }

  .candidate-stepper li {
    gap: 3px;
  }

  .candidate-stepper strong {
    font-size: 12px;
  }

  .candidate-stepper em {
    width: 36px;
    height: 36px;
  }

  .candidate-stepper em::before {
    width: 18px;
    height: 18px;
  }

  .candidate-stepper span {
    font-size: 10px;
  }

  .candidate-form-card {
    padding: 12px 14px;
  }

  .candidate-form-card h2 {
    margin-bottom: 8px;
    padding-bottom: 9px;
    font-size: 19px;
  }

  .candidate-form-card h2::before {
    width: 34px;
    height: 34px;
  }

  .candidate-form-card .form-grid {
    gap: 8px;
  }

  .candidate-form-card label span {
    margin-bottom: 3px;
    font-size: 10px;
  }

  .candidate-form-card input,
  .candidate-form-card select,
  .candidate-form-card textarea {
    min-height: 39px;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  .field-with-icon > div::after {
    width: 33px;
    height: 33px;
  }

  .field-with-icon > div::before {
    left: 14px;
    width: 18px;
    height: 18px;
  }

  .candidate-form-card .field-with-icon input,
  .candidate-form-card .field-with-icon select {
    padding-left: 50px;
  }

  .field-with-icon span i {
    width: 15px;
    height: 15px;
    font-size: 10px;
  }

  .candidate-form-card .form-tip {
    padding: 7px 10px;
  }

  .candidate-form-card .wizard-actions {
    padding-top: 9px;
  }

  .candidate-form-card .button.primary {
    min-height: 48px;
    font-size: 16px;
  }

  .candidate-form-card .button.primary span:last-child {
    width: 34px;
    height: 34px;
  }
}

/* Agent recruitment page - same premium visual language as candidate intake. */
.agent-apply-page {
  --agent-teal: #0d9488;
  --agent-teal-2: #14b8a6;
  --agent-ink: #081b33;
  --agent-muted: #64748b;
  --agent-line: #dde7f0;
  --agent-card: #ffffff;
  display: grid;
  gap: 20px;
  width: min(960px, 100%);
  margin: 0 auto;
}

.agent-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  align-items: center;
  gap: 22px;
  min-height: 132px;
}

.agent-hero h1 {
  margin: 0;
  color: var(--agent-ink);
  font-size: clamp(34px, 4.1vw, 48px);
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: 0;
}

.agent-hero p {
  max-width: 690px;
  margin: 8px 0 0;
  color: var(--agent-muted);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 520;
}

.agent-hero-visual {
  position: relative;
  width: 176px;
  height: 118px;
  justify-self: end;
}

.agent-hero-visual .agent-badge-card {
  position: absolute;
  left: 24px;
  top: 6px;
  width: 92px;
  height: 78px;
  border: 1px solid #d7e4ee;
  border-radius: 14px;
  background:
    radial-gradient(circle at 30px 28px, #14b8a6 0 10px, transparent 11px),
    linear-gradient(90deg, transparent 0 54px, #9fb1c3 55px 80px, transparent 81px),
    linear-gradient(90deg, transparent 0 54px, #c2cfda 55px 75px, transparent 76px),
    #f8fbff;
  background-size: auto, 100% 3px, 100% 3px, auto;
  background-position: center, 0 28px, 0 43px, center;
  background-repeat: no-repeat;
  box-shadow: 0 12px 24px rgba(15, 23, 42, .12);
  transform: rotate(-5deg);
}

.agent-hero-visual::before {
  position: absolute;
  right: 16px;
  bottom: 12px;
  width: 116px;
  height: 84px;
  border-radius: 16px;
  background: linear-gradient(145deg, #0f766e, #075985);
  box-shadow: 0 18px 28px rgba(15, 23, 42, .18);
  content: "";
  transform: rotate(6deg);
}

.agent-hero-visual .agent-folder-front {
  position: absolute;
  right: 11px;
  bottom: 4px;
  width: 132px;
  height: 74px;
  border-radius: 14px 16px 20px 20px;
  background: linear-gradient(145deg, #18c6b6, #0d9488);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 18px 30px rgba(13, 148, 136, .24);
  transform: skewX(-4deg) rotate(-1deg);
}

.agent-hero-visual span {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #14b8a6;
  box-shadow: 0 0 0 4px rgba(20,184,166,.08);
}

.agent-hero-visual span:nth-child(3) { right: 2px; top: 18px; }
.agent-hero-visual span:nth-child(4) { left: 2px; top: 58px; }
.agent-hero-visual span:nth-child(5) { right: 0; bottom: 26px; }

.agent-stepper-card {
  padding: 22px 22px 18px;
  border: 1px solid var(--agent-line);
  border-radius: 24px;
  background: var(--agent-card);
  box-shadow: 0 18px 40px rgba(15, 23, 42, .08);
}

.agent-stepper {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}

.agent-stepper::before {
  position: absolute;
  top: 58px;
  left: 20%;
  right: 20%;
  height: 5px;
  border-radius: 999px;
  background: #e4edf5;
  content: "";
}

.agent-stepper li {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 0;
}

.agent-stepper strong {
  color: #64748b;
  font-size: 20px;
  font-weight: 850;
}

.agent-stepper em {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 999px;
  background: #edf4f8;
  box-shadow: 0 12px 24px rgba(15, 23, 42, .08);
}

.agent-stepper em::before {
  display: block;
  width: 28px;
  height: 28px;
  background: currentColor;
  color: #0f2744;
  content: "";
  -webkit-mask: var(--agent-step-mask) center / contain no-repeat;
  mask: var(--agent-step-mask) center / contain no-repeat;
}

.agent-stepper [data-agent-step-icon="user"] { --agent-step-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9m-8 9c.7-4.2 3.7-7 8-7s7.3 2.8 8 7h-2.2c-.7-3-2.7-5-5.8-5s-5.1 2-5.8 5z'/%3E%3C/svg%3E"); }
.agent-stepper [data-agent-step-icon="map"] { --agent-step-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7m0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5'/%3E%3C/svg%3E"); }
.agent-stepper [data-agent-step-icon="briefcase"] { --agent-step-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M9 4h6l1 3h4v13H4V7h4zm1.5 3h3L13 6h-2zM6 10v8h12v-8z'/%3E%3C/svg%3E"); }

.agent-stepper li.active strong {
  color: var(--agent-teal);
}

.agent-stepper li.active em {
  background: linear-gradient(145deg, var(--agent-teal-2), var(--agent-teal));
  box-shadow: 0 16px 28px rgba(13, 148, 136, .26);
}

.agent-stepper li.completed em {
  background: linear-gradient(145deg, var(--agent-teal-2), var(--agent-teal));
  box-shadow: 0 16px 28px rgba(13, 148, 136, .18);
}

.agent-stepper li.active em::before,
.agent-stepper li.completed em::before {
  color: #fff;
}

.agent-stepper span {
  color: #526176;
  font-size: 18px;
  line-height: 1.1;
  font-weight: 700;
  text-align: center;
}

.agent-stepper li.active span {
  color: var(--agent-teal);
}

.agent-stepper li.completed strong,
.agent-stepper li.completed span {
  color: var(--agent-teal);
}

.agent-form-card {
  display: grid;
  gap: 20px;
  padding: 32px;
  border: 1px solid var(--agent-line);
  border-radius: 24px;
  background: var(--agent-card);
  box-shadow: 0 18px 44px rgba(15, 23, 42, .08);
}

.agent-form-card .agent-wizard-step {
  display: none;
}

.agent-form-card .agent-wizard-step.active {
  display: grid;
  gap: 20px;
  animation: candidateStepIn .18s ease;
}

.agent-form-card .form-section-title {
  display: grid;
  gap: 5px;
  padding-top: 22px;
  border-top: 1px solid var(--agent-line);
}

.agent-form-card .form-section-title:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.agent-form-card .form-section-title h2 {
  margin: 0;
  color: var(--agent-ink);
  font-size: 24px;
  line-height: 1.15;
  font-weight: 900;
}

.agent-form-card .form-section-title p {
  margin: 0;
  color: var(--agent-muted);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 520;
}

.agent-form-card .form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px 18px;
}

.agent-form-card .span-2 {
  grid-column: 1 / -1;
}

.agent-form-card label span {
  margin-bottom: 7px;
  color: #26364d;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 780;
}

.agent-form-card input,
.agent-form-card select,
.agent-form-card textarea {
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid #dbe5ee;
  border-radius: 14px;
  background: #fff;
  color: var(--agent-ink);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .035);
  font-size: 14px;
  font-weight: 520;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.agent-form-card textarea {
  min-height: 112px;
}

.agent-form-card input:focus,
.agent-form-card select:focus,
.agent-form-card textarea:focus {
  outline: 0;
  border-color: var(--agent-teal-2);
  box-shadow: 0 0 0 4px rgba(20, 184, 166, .15);
}

.agent-form-card .field-with-icon > div {
  position: relative;
}

.agent-form-card .field-with-icon > div::before {
  position: absolute;
  left: 15px;
  top: 50%;
  z-index: 1;
  width: 22px;
  height: 22px;
  background: currentColor;
  color: var(--agent-teal);
  content: "";
  transform: translateY(-50%);
  -webkit-mask: var(--candidate-icon) center / contain no-repeat;
  mask: var(--candidate-icon) center / contain no-repeat;
}

.agent-form-card .field-with-icon > div::after {
  position: absolute;
  left: 8px;
  top: 50%;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #e7fbf8;
  content: "";
  transform: translateY(-50%);
}

.agent-form-card .field-with-icon input,
.agent-form-card .field-with-icon select,
.agent-form-card .field-with-icon textarea {
  padding-left: 58px;
}

.agent-form-card .field-with-icon textarea {
  padding-top: 14px;
}

.agent-form-card .field-with-icon[data-field-icon="user"] { --candidate-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9m-8 9c.7-4.2 3.7-7 8-7s7.3 2.8 8 7h-2.2c-.7-3-2.7-5-5.8-5s-5.1 2-5.8 5z'/%3E%3C/svg%3E"); }
.agent-form-card .field-with-icon[data-field-icon="phone"] { --candidate-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M6.6 2h3.2l1.5 5-2.2 1.5c1.1 2.4 3 4.3 5.4 5.4l1.5-2.2 5 1.5v3.2c0 2-1.7 3.6-3.7 3.4C9.3 19.1 4.9 14.7 4.2 6.7 4 4.7 5.6 2 6.6 2'/%3E%3C/svg%3E"); }
.agent-form-card .field-with-icon[data-field-icon="briefcase"] { --candidate-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M9 4h6l1 3h4v13H4V7h4zm1.5 3h3L13 6h-2zM6 10v8h12v-8z'/%3E%3C/svg%3E"); }
.agent-form-card .field-with-icon[data-field-icon="document"] { --candidate-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M6 2h8l5 5v15H6zM13 3.8V8h4.2zM8.5 12h7v2h-7zm0 4h7v2h-7z'/%3E%3C/svg%3E"); }

.agent-form-card .form-tip {
  padding: 10px 12px;
  border: 1px solid #c7eee9;
  border-radius: 14px;
  background: #f0fdfa;
  color: #0f766e;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 650;
}

.agent-form-card .public-submit {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--agent-line);
}

.agent-form-card .public-submit.is-first {
  grid-template-columns: 1fr;
}

.agent-form-card .public-submit.is-first .button.primary {
  grid-column: 1 / -1;
}

.agent-form-card .button.ghost {
  min-height: 58px;
  border-radius: 16px;
  background: #fff;
  font-size: 16px;
  font-weight: 850;
}

.agent-form-card .button.primary {
  width: 100%;
  min-height: 58px;
  gap: 10px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--agent-teal-2), var(--agent-teal));
  color: #fff;
  box-shadow: 0 20px 34px rgba(13, 148, 136, .24);
  font-size: 20px;
  font-weight: 850;
}

.agent-form-card .button.primary span:last-child {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  font-size: 34px;
  line-height: 1;
}

.agent-form-card .button.primary span:first-child {
  margin-left: auto;
}

.agent-form-card .button.loading {
  opacity: .8;
  pointer-events: none;
}

.agent-form-card .errorlist {
  margin: 6px 0 0;
  padding: 8px 10px;
  border: 1px solid #fecaca;
  border-radius: 12px;
  background: #fff5f5;
  color: #b42318;
  font-size: 12px;
  font-weight: 650;
  list-style: none;
}

@media (max-width: 720px) {
  .agent-apply-page {
    gap: 12px;
  }

  .agent-hero {
    grid-template-columns: minmax(0, 1fr) 108px;
    gap: 8px;
    min-height: 92px;
  }

  .agent-hero h1 {
    font-size: 25px;
  }

  .agent-hero p {
    font-size: 12.5px;
    line-height: 1.32;
  }

  .agent-hero-visual {
    width: 100px;
    height: 78px;
  }

  .agent-hero-visual .agent-badge-card {
    left: 16px;
    width: 52px;
    height: 48px;
    border-radius: 8px;
    background-size: auto, 100% 2px, 100% 2px, auto;
    background-position: center, 0 20px, 0 30px, center;
  }

  .agent-hero-visual::before {
    right: 8px;
    bottom: 9px;
    width: 72px;
    height: 54px;
    border-radius: 10px;
  }

  .agent-hero-visual .agent-folder-front {
    right: 6px;
    bottom: 4px;
    width: 78px;
    height: 48px;
    border-radius: 9px 10px 13px 13px;
  }

  .agent-stepper-card {
    padding: 14px 8px 10px;
    border-radius: 18px;
  }

  .agent-stepper::before {
    top: 42px;
  }

  .agent-stepper strong {
    font-size: 14px;
  }

  .agent-stepper em {
    width: 42px;
    height: 42px;
  }

  .agent-stepper em::before {
    width: 21px;
    height: 21px;
  }

  .agent-stepper span {
    font-size: 11px;
  }

  .agent-form-card {
    gap: 13px;
    padding: 17px 14px;
    border-radius: 18px;
  }

  .agent-form-card .form-section-title {
    gap: 4px;
    padding-top: 14px;
  }

  .agent-form-card .form-section-title h2 {
    font-size: 20px;
  }

  .agent-form-card .form-section-title p {
    font-size: 12px;
    line-height: 1.32;
  }

  .agent-form-card .form-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .agent-form-card label span {
    margin-bottom: 4px;
    font-size: 10.5px;
  }

  .agent-form-card input,
  .agent-form-card select,
  .agent-form-card textarea {
    min-height: 42px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-radius: 12px;
    font-size: 13px;
  }

  .agent-form-card textarea {
    min-height: 86px;
  }

  .agent-form-card .field-with-icon input,
  .agent-form-card .field-with-icon select,
  .agent-form-card .field-with-icon textarea {
    padding-left: 50px;
  }

  .agent-form-card .field-with-icon > div::after {
    width: 33px;
    height: 33px;
  }

  .agent-form-card .field-with-icon > div::before {
    left: 14px;
    width: 18px;
    height: 18px;
  }

  .agent-form-card .form-tip {
    padding: 8px 10px;
    border-radius: 12px;
    font-size: 11px;
  }

  .agent-form-card .public-submit {
    grid-template-columns: 1fr;
    padding-top: 10px;
  }

  .agent-form-card .button.ghost {
    width: 100%;
    min-height: 42px;
    border-radius: 14px;
    font-size: 13px;
  }

  .agent-form-card .button.primary {
    min-height: 50px;
    border-radius: 14px;
    font-size: 16px;
  }

  .agent-form-card .button.primary span:last-child {
    width: 36px;
    height: 36px;
    font-size: 28px;
  }
}

/* Desktop refinement: keep public intake pages elegant and not over-wide on PC. */
@media (min-width: 900px) {
  body.public-portal .public-portal-content {
    width: min(820px, calc(100% - 48px));
    margin-top: 22px;
  }

  .candidate-apply-page,
  .agent-apply-page {
    width: min(820px, 100%);
    gap: 16px;
  }

  .candidate-hero,
  .agent-hero {
    grid-template-columns: minmax(0, 1fr) 150px;
    min-height: 96px;
    gap: 18px;
  }

  .candidate-hero h1,
  .agent-hero h1 {
    font-size: 34px;
  }

  .candidate-hero p,
  .agent-hero p {
    max-width: 560px;
    font-size: 13px;
    line-height: 1.35;
  }

  .candidate-hero-visual,
  .agent-hero-visual {
    width: 126px;
    height: 86px;
  }

  .candidate-hero-visual .file-card,
  .agent-hero-visual .agent-badge-card {
    width: 64px;
    height: 54px;
  }

  .candidate-hero-visual::before,
  .agent-hero-visual::before {
    width: 82px;
    height: 58px;
  }

  .candidate-hero-visual .folder-front,
  .agent-hero-visual .agent-folder-front {
    width: 94px;
    height: 54px;
  }

  .candidate-stepper-card,
  .agent-stepper-card {
    padding: 14px 18px 12px;
    border-radius: 22px;
  }

  .candidate-stepper em,
  .agent-stepper em {
    width: 46px;
    height: 46px;
  }

  .candidate-stepper em::before,
  .agent-stepper em::before {
    width: 21px;
    height: 21px;
  }

  .candidate-stepper span,
  .agent-stepper span {
    font-size: 13px;
  }

  .candidate-stepper::before,
  .agent-stepper::before {
    top: 42px;
  }

  .candidate-form-card,
  .agent-form-card {
    padding: 22px 24px;
    border-radius: 22px;
  }

  .candidate-form-card h2,
  .agent-form-card .form-section-title h2 {
    font-size: 21px;
  }

  .candidate-form-card h2::before {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    -webkit-mask-size: 24px 24px;
    mask-size: 24px 24px;
  }

  .candidate-form-card input,
  .candidate-form-card select,
  .candidate-form-card textarea,
  .agent-form-card input,
  .agent-form-card select,
  .agent-form-card textarea {
    min-height: 38px;
  }

  .candidate-form-card .button.primary,
  .agent-form-card .button.primary {
    min-height: 46px;
    font-size: 16px;
  }

  .candidate-form-card .form-grid,
  .agent-form-card .form-grid {
    gap: 10px 16px;
  }

  .candidate-form-card label span,
  .agent-form-card label span {
    margin-bottom: 4px;
    font-size: 10.5px;
  }

  .candidate-form-card .form-tip,
  .agent-form-card .form-tip {
    padding: 8px 10px;
    font-size: 11px;
  }
}

@media (max-width: 380px) {
  .sidebar {
    width: min(88vw, 300px);
  }
}

/* Public intake compact desktop pass: denser PC forms without changing mobile flow. */
@media (min-width: 1080px) {
  body.public-portal .public-portal-content {
    width: min(1120px, calc(100% - 64px));
    margin-top: 10px;
  }

  .candidate-apply-page,
  .agent-apply-page {
    width: min(1120px, 100%);
    gap: 10px;
  }

  .candidate-hero,
  .agent-hero {
    grid-template-columns: minmax(0, 1fr) 112px;
    min-height: 76px;
    gap: 14px;
  }

  .candidate-hero h1,
  .agent-hero h1 {
    font-size: 30px;
    line-height: 1.02;
  }

  .candidate-hero p,
  .agent-hero p {
    max-width: 680px;
    font-size: 12px;
    line-height: 1.28;
  }

  .candidate-agent-line {
    margin-top: 4px;
  }

  .candidate-hero-visual,
  .agent-hero-visual {
    width: 104px;
    height: 72px;
  }

  .candidate-hero-visual .file-card,
  .agent-hero-visual .agent-badge-card {
    width: 52px;
    height: 44px;
  }

  .candidate-hero-visual::before,
  .agent-hero-visual::before {
    width: 68px;
    height: 48px;
  }

  .candidate-hero-visual .folder-front,
  .agent-hero-visual .agent-folder-front {
    width: 78px;
    height: 45px;
  }

  .candidate-stepper-card,
  .agent-stepper-card {
    padding: 10px 16px 8px;
    border-radius: 18px;
  }

  .candidate-stepper::before,
  .agent-stepper::before {
    top: 31px;
    height: 3px;
  }

  .candidate-stepper li,
  .agent-stepper li {
    gap: 4px;
  }

  .candidate-stepper strong,
  .agent-stepper strong {
    font-size: 13px;
  }

  .candidate-stepper em,
  .agent-stepper em {
    width: 36px;
    height: 36px;
  }

  .candidate-stepper em::before,
  .agent-stepper em::before {
    width: 17px;
    height: 17px;
  }

  .candidate-stepper span,
  .agent-stepper span {
    font-size: 11px;
  }

  .candidate-form-card,
  .agent-form-card {
    gap: 10px;
    padding: 16px 18px;
    border-radius: 18px;
  }

  .candidate-form-card .form-grid,
  .agent-form-card .form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 12px;
  }

  .candidate-form-card .span-2 {
    grid-column: span 2;
  }

  .candidate-form-card .span-3,
  .agent-form-card .span-2,
  .candidate-form-card .notice {
    grid-column: 1 / -1;
  }

  .candidate-form-card h2,
  .agent-form-card .form-section-title h2 {
    margin-bottom: 4px;
    padding-bottom: 9px;
    font-size: 18px;
  }

  .agent-form-card .form-section-title {
    gap: 3px;
    padding-top: 8px;
  }

  .agent-form-card .form-section-title p {
    font-size: 12px;
    line-height: 1.28;
  }

  .candidate-form-card h2::before {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    -webkit-mask-size: 18px 18px;
    mask-size: 18px 18px;
  }

  .candidate-form-card label span,
  .agent-form-card label span {
    margin-bottom: 3px;
    font-size: 10px;
    line-height: 1.15;
  }

  .candidate-form-card input,
  .candidate-form-card select,
  .candidate-form-card textarea,
  .agent-form-card input,
  .agent-form-card select,
  .agent-form-card textarea {
    min-height: 36px;
    padding: 7px 10px;
    border-radius: 10px;
    font-size: 12px;
    box-shadow: 0 5px 12px rgba(15, 23, 42, .025);
  }

  .candidate-form-card .field-with-icon input,
  .candidate-form-card .field-with-icon select,
  .agent-form-card .field-with-icon input,
  .agent-form-card .field-with-icon select,
  .agent-form-card .field-with-icon textarea {
    padding-left: 44px;
  }

  .field-with-icon > div::after,
  .agent-form-card .field-with-icon > div::after {
    left: 6px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }

  .field-with-icon > div::before,
  .agent-form-card .field-with-icon > div::before {
    left: 12px;
    width: 17px;
    height: 17px;
  }

  .agent-form-card textarea {
    min-height: 78px;
  }

  .candidate-form-card .form-tip,
  .agent-form-card .form-tip,
  .candidate-form-card .notice {
    padding: 7px 9px;
    border-radius: 10px;
    font-size: 10.5px;
    line-height: 1.25;
  }

  .candidate-form-card .wizard-actions,
  .agent-form-card .public-submit {
    gap: 8px;
    padding-top: 10px;
  }

  .candidate-form-card .button,
  .agent-form-card .button.ghost,
  .candidate-form-card .button.primary,
  .agent-form-card .button.primary {
    min-height: 40px;
    border-radius: 11px;
    font-size: 13px;
  }

  .candidate-form-card .button.primary span:last-child,
  .agent-form-card .button.primary span:last-child {
    width: 30px;
    height: 30px;
    font-size: 24px;
  }
}

/* Product redesign pass: mobile app shell, icon system, and dashboard rhythm. */
:root {
  --app-bg: #f3f7fb;
  --app-surface: #ffffff;
  --app-ink: #0a1733;
  --app-muted: #738098;
  --app-line: #e2e8f0;
  --app-navy: #061a37;
  --app-navy-2: #08254d;
  --app-teal: #55aaa0;
  --app-teal-2: #3e9188;
  --app-blue: #315bc1;
  --app-purple: #7c35c9;
  --app-amber: #d98225;
  --app-green: #3f9b5f;
  --app-rose: #be4166;
  --app-shadow: 0 14px 34px rgba(23, 38, 67, .10);
  --app-shadow-soft: 0 8px 22px rgba(23, 38, 67, .07);
  --icon-home: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M3 10.7 12 3l9 7.7v9.1a1.2 1.2 0 0 1-1.2 1.2h-5.1v-6.4H9.3V21H4.2A1.2 1.2 0 0 1 3 19.8z'/%3E%3C/svg%3E");
  --icon-folder: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M3 6.3C3 5.6 3.6 5 4.3 5h5l2 2h8.4c.7 0 1.3.6 1.3 1.3v9.4c0 .7-.6 1.3-1.3 1.3H4.3C3.6 19 3 18.4 3 17.7z'/%3E%3C/svg%3E");
  --icon-users: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M8.7 11a3.7 3.7 0 1 0 0-7.4 3.7 3.7 0 0 0 0 7.4Zm6.8.2a3.1 3.1 0 1 0 0-6.2 3.1 3.1 0 0 0 0 6.2ZM2.4 19.4c.4-3.4 3-5.8 6.3-5.8s5.9 2.4 6.3 5.8c.1.6-.4 1-1 1H3.4c-.6 0-1.1-.4-1-1Zm12.7 1h5.5c.6 0 1-.5.9-1.1-.4-2.7-2.4-4.7-5-5a7.7 7.7 0 0 1 1.7 4.8c0 .5-.3 1-.7 1.3Z'/%3E%3C/svg%3E");
  --icon-list: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M6 5.5c0-.8.7-1.5 1.5-1.5h9c.8 0 1.5.7 1.5 1.5v13c0 .8-.7 1.5-1.5 1.5h-9A1.5 1.5 0 0 1 6 18.5zm3 2v2h6v-2zm0 4v2h6v-2zm0 4v2h4v-2z'/%3E%3C/svg%3E");
  --icon-wallet: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 6.5C4 5.7 4.7 5 5.5 5h12c.8 0 1.5.7 1.5 1.5V8H6.2C5 8 4 9 4 10.2zm0 4c0-.8.7-1.5 1.5-1.5h14c.8 0 1.5.7 1.5 1.5v7c0 .8-.7 1.5-1.5 1.5h-14A1.5 1.5 0 0 1 4 17.5zm12 3.5a2 2 0 1 0 4 0 2 2 0 0 0-4 0Z'/%3E%3C/svg%3E");
  --icon-mail: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4.5 6h15c.8 0 1.5.7 1.5 1.5v9c0 .8-.7 1.5-1.5 1.5h-15A1.5 1.5 0 0 1 3 16.5v-9C3 6.7 3.7 6 4.5 6Zm.9 2 6.6 5 6.6-5z'/%3E%3C/svg%3E");
  --icon-settings: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M10.8 3h2.4l.6 2.4c.5.2.9.3 1.3.6l2.2-1.2 1.7 1.7-1.2 2.2c.3.4.4.9.6 1.3l2.4.6V13l-2.4.6c-.2.5-.3.9-.6 1.3l1.2 2.2-1.7 1.7-2.2-1.2c-.4.3-.9.4-1.3.6l-.6 2.4h-2.4l-.6-2.4c-.5-.2-.9-.3-1.3-.6l-2.2 1.2L5 17.1l1.2-2.2c-.3-.4-.4-.9-.6-1.3L3.2 13v-2.4l2.4-.6c.2-.5.3-.9.6-1.3L5 6.5l1.7-1.7L8.9 6c.4-.3.9-.4 1.3-.6zm1.2 6a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z'/%3E%3C/svg%3E");
  --icon-health: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 21s-8-4.8-8-11.2A4.8 4.8 0 0 1 12 6a4.8 4.8 0 0 1 8 3.8C20 16.2 12 21 12 21Zm-1-12v3H8.2v2H11v3h2v-3h2.8v-2H13V9z'/%3E%3C/svg%3E");
  --icon-clipboard: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M9 3h6l.7 2H18c.8 0 1.5.7 1.5 1.5v13c0 .8-.7 1.5-1.5 1.5H6a1.5 1.5 0 0 1-1.5-1.5v-13C4.5 5.7 5.2 5 6 5h2.3zm.3 3.5h5.4V5H9.3zM8 10v2h8v-2zm0 4v2h8v-2z'/%3E%3C/svg%3E");
  --icon-user-plus: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M9.5 11a3.7 3.7 0 1 0 0-7.4 3.7 3.7 0 0 0 0 7.4Zm-6.8 8.4c.4-3.4 3-5.8 6.8-5.8s6.4 2.4 6.8 5.8c.1.6-.4 1-1 1H3.7c-.6 0-1.1-.4-1-1ZM18 8V5h2v3h3v2h-3v3h-2v-3h-3V8z'/%3E%3C/svg%3E");
  --icon-profile: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Zm-8 8.2c.5-4 3.7-6.8 8-6.8s7.5 2.8 8 6.8c.1.5-.4.8-.9.8H4.9c-.5 0-1-.3-.9-.8Z'/%3E%3C/svg%3E");
  --icon-logout: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 5.5C4 4.7 4.7 4 5.5 4H12v2H6v12h6v2H5.5A1.5 1.5 0 0 1 4 18.5zm11.6 2.1L20 12l-4.4 4.4-1.4-1.4 2-2H10v-2h6.2l-2-2z'/%3E%3C/svg%3E");
  --icon-plus: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M11 4h2v7h7v2h-7v7h-2v-7H4v-2h7z'/%3E%3C/svg%3E");
  --icon-link: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M8.3 12.8a4 4 0 0 1 0-5.6l2.1-2.1a4 4 0 0 1 5.7 5.7l-1 1-1.4-1.4 1-1a2 2 0 1 0-2.9-2.9L9.7 8.6a2 2 0 0 0 0 2.8zm7.4-1.6a4 4 0 0 1 0 5.6l-2.1 2.1a4 4 0 1 1-5.7-5.7l1-1 1.4 1.4-1 1a2 2 0 1 0 2.9 2.9l2.1-2.1a2 2 0 0 0 0-2.8z'/%3E%3C/svg%3E");
}

body {
  background:
    radial-gradient(circle at 10% -10%, rgba(85, 170, 160, .16), transparent 260px),
    linear-gradient(180deg, #f8fbff 0, var(--app-bg) 320px);
  color: var(--app-ink);
}

.authenticated-shell .topbar {
  min-height: 72px;
  padding: 12px 24px;
  background: linear-gradient(90deg, var(--app-navy), #071f43);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 28px rgba(4, 16, 36, .18);
}

.authenticated-shell .brand {
  color: #fff;
}

.authenticated-shell .brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.18));
}

.authenticated-shell .brand strong {
  color: #fff;
  font-size: 22px;
  font-weight: 850;
}

.authenticated-shell .brand small {
  color: rgba(255,255,255,.72);
}

.authenticated-shell .top-actions input,
.authenticated-shell .top-actions .language-select {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: #fff;
}

.authenticated-shell .top-actions .language-select option {
  color: var(--app-navy);
}

.authenticated-shell .user-pill {
  background: rgba(85,170,160,.18);
  color: #fff;
}

.authenticated-shell .top-actions .button.ghost {
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  color: #fff;
}

.app-shell {
  grid-template-columns: 286px minmax(0, 1fr);
  min-height: calc(100vh - 72px);
}

.sidebar {
  top: 72px;
  height: calc(100vh - 72px);
  padding: 22px 14px;
  background:
    linear-gradient(180deg, rgba(85,170,160,.10), transparent 220px),
    linear-gradient(180deg, var(--app-navy), #061733);
  box-shadow: inset -1px 0 0 rgba(255,255,255,.07);
}

.sidebar a.nav-link,
.drawer-logout.nav-link {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 48px;
  padding: 12px 14px;
  margin-bottom: 7px;
  border-radius: 8px;
  color: rgba(255,255,255,.82);
  font-size: 15px;
  font-weight: 760;
}

.sidebar a.nav-link:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
}

.sidebar a.nav-link.active {
  background: linear-gradient(135deg, var(--app-teal), rgba(85,170,160,.72));
  color: #fff;
  box-shadow: 0 10px 24px rgba(42, 142, 133, .28);
}

.nav-icon,
.metric-icon::before,
.action-icon::before {
  display: inline-block;
  background: currentColor;
  content: "";
  flex: 0 0 auto;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.nav-icon {
  width: 23px;
  height: 23px;
  opacity: .95;
}

[data-icon="home"] { --icon: var(--icon-home); }
[data-icon="folder"] { --icon: var(--icon-folder); }
[data-icon="users"],
[data-icon="admins"] { --icon: var(--icon-users); }
[data-icon="list"],
[data-icon="price"] { --icon: var(--icon-list); }
[data-icon="wallet"],
[data-icon="money"] { --icon: var(--icon-wallet); }
[data-icon="mail"],
[data-icon="document"] { --icon: var(--icon-mail); }
[data-icon="settings"] { --icon: var(--icon-settings); }
[data-icon="health"] { --icon: var(--icon-health); }
[data-icon="clipboard"] { --icon: var(--icon-clipboard); }
[data-icon="user-plus"],
[data-icon="agent"],
[data-icon="admin"],
[data-icon="requests"] { --icon: var(--icon-user-plus); }
[data-icon="profile"] { --icon: var(--icon-profile); }
[data-icon="logout"] { --icon: var(--icon-logout); }
[data-icon="plus"] { --icon: var(--icon-plus); }
[data-icon="link"] { --icon: var(--icon-link); }
[data-icon="tag"] { --icon: var(--icon-tag); }

.drawer-footer {
  margin: 24px 8px 12px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.12);
  color: #fff;
}

.drawer-footer strong,
.drawer-footer span {
  display: block;
}

.drawer-footer span {
  margin-top: 5px;
  color: rgba(255,255,255,.66);
  font-size: 13px;
}

.content {
  padding: 28px;
}

.page-heading h1 {
  color: var(--app-ink);
  font-size: 31px;
  font-weight: 860;
}

.page-heading p {
  margin-top: 0;
  color: var(--app-muted);
  font-size: 16px;
  font-weight: 540;
}

.card,
.resource-card,
.procedure-card {
  border-color: rgba(211, 220, 232, .9);
  background: rgba(255,255,255,.96);
  box-shadow: var(--app-shadow-soft);
}

.metrics {
  grid-template-columns: repeat(6, minmax(132px, 1fr));
  gap: 14px;
}

.metric {
  display: grid;
  min-height: 142px;
  align-content: start;
  gap: 11px;
  padding: 17px 16px;
  border: 1px solid rgba(224, 231, 240, .88);
  background: #fff;
  box-shadow: var(--app-shadow);
}

.metric-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 8px;
}

.metric-icon::before {
  width: 27px;
  height: 27px;
}

.metric strong {
  color: var(--app-ink);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}

.metric span:last-child {
  color: var(--app-ink);
  font-size: 13px;
  line-height: 1.22;
  font-weight: 760;
}

.metric.blue .metric-icon { background: #e9efff; color: var(--app-blue); }
.metric.teal .metric-icon { background: #e6f5f1; color: var(--app-teal-2); }
.metric.purple .metric-icon { background: #f0e5ff; color: var(--app-purple); }
.metric.amber .metric-icon { background: #fff1dc; color: var(--app-amber); }
.metric.green .metric-icon { background: #e8f6ec; color: var(--app-green); }
.metric.rose .metric-icon { background: #ffe8ef; color: var(--app-rose); }
.metric.blue strong { color: #183a92; }
.metric.teal strong { color: var(--app-teal-2); }
.metric.purple strong { color: #421b87; }
.metric.amber strong { color: var(--app-amber); }
.metric.green strong { color: var(--app-green); }
.metric.rose strong { color: var(--app-rose); }

.scroll-hint {
  display: none;
}

.quick-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.quick-action {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 62px;
  padding: 12px 16px;
  border: 1px solid rgba(211, 220, 232, .95);
  border-radius: 8px;
  background: #fff;
  color: var(--app-ink);
  box-shadow: 0 7px 18px rgba(23,38,67,.06);
  font-weight: 830;
}

.quick-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(23,38,67,.10);
}

.action-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  color: #fff;
  background: var(--app-teal-2);
  flex: 0 0 auto;
}

.action-icon::before {
  width: 22px;
  height: 22px;
}

.quick-action[data-icon="admin"] .action-icon { background: var(--app-blue); }
.quick-action[data-icon="price"] .action-icon { background: var(--app-purple); }
.quick-action[data-icon="health"] .action-icon { background: var(--app-green); }

.button {
  border-color: rgba(211, 220, 232, .95);
  border-radius: 8px;
  box-shadow: 0 5px 14px rgba(23,38,67,.04);
}

.button.primary {
  background: linear-gradient(135deg, var(--app-teal), var(--app-teal-2));
  border-color: transparent;
}

input[type="checkbox"],
input[type="radio"] {
  width: auto;
  min-height: auto;
  accent-color: var(--app-teal-2);
}

.status {
  background: #e6f6f2;
  color: var(--app-teal-2);
}

.table-wrap tr {
  transition: background .16s ease, box-shadow .16s ease;
}

.table-wrap tr:hover {
  background: #fbfdff;
}

.dashboard-main > .card:first-child table {
  min-width: 680px;
  font-size: 14px;
}

.dashboard-main > .card:first-child th,
.dashboard-main > .card:first-child td {
  padding-left: 12px;
  padding-right: 12px;
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    top: 0;
    z-index: 60;
    display: block;
    width: min(72vw, 318px);
    height: 100dvh;
    padding: 22px 12px 24px;
    overflow-y: auto;
    transform: translateX(-105%);
    transition: transform .22s ease, visibility .22s ease;
    visibility: hidden;
    pointer-events: none;
    box-shadow: 24px 0 60px rgba(4, 15, 34, .32);
  }

  body.nav-open .sidebar {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }

  .drawer-account,
  .drawer-search,
  .drawer-language,
  .drawer-logout,
  .drawer-label {
    display: block;
  }

  .drawer-account {
    display: grid;
  }
}

@media (max-width: 640px) {
  .authenticated-shell .topbar {
    position: sticky;
    min-height: 58px;
    padding: 8px 14px;
    justify-content: flex-start;
    flex-wrap: nowrap;
  }

  .menu-toggle {
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .menu-toggle span {
    width: 24px;
    height: 2.5px;
    margin: 3px 0;
  }

  .authenticated-shell .brand {
    flex: 1 1 auto;
    justify-content: center;
  }

  .authenticated-shell .brand-mark {
    width: 34px;
    height: 34px;
  }

  .authenticated-shell .brand strong {
    font-size: 18px;
  }

  .content,
  .authenticated-shell .content {
    padding: 18px 12px 28px;
  }

  .page-heading {
    margin: 0 10px 18px;
  }

  .page-heading h1 {
    font-size: 24px;
  }

  .page-heading p {
    font-size: 14px;
    line-height: 1.45;
  }

  .metrics {
    grid-auto-columns: minmax(126px, 33vw);
    gap: 10px;
    margin: 0 -12px 6px;
    padding: 0 12px 8px;
  }

  .metric {
    min-height: 132px;
    padding: 14px;
    gap: 9px;
  }

  .metric-icon {
    width: 38px;
    height: 38px;
  }

  .metric strong {
    font-size: 24px;
  }

  .metric span:last-child {
    font-size: 12px;
  }

  .scroll-hint {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 0 0 18px;
  }

  .scroll-hint span {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #cbd4e0;
  }

  .scroll-hint span:first-child {
    background: var(--app-teal-2);
  }

  .quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quick-action {
    min-height: 54px;
    padding: 10px 12px;
    font-size: 13px;
  }

  .action-icon {
    width: 34px;
    height: 34px;
  }

  .dashboard-side {
    order: -1;
  }

  .dashboard-side .compact-card:not(.action-card) {
    display: none;
  }

  .dashboard-main > .card:first-child .table-wrap table,
  .table-wrap table {
    border-collapse: separate;
    border-spacing: 0 9px;
    font-size: 16px;
    min-width: 0;
  }

  .table-wrap tr {
    padding: 14px 16px;
    border: 1px solid rgba(211, 220, 232, .95);
    box-shadow: var(--app-shadow-soft);
  }

  .table-wrap td {
    grid-template-columns: minmax(92px, 34%) minmax(0, 1fr);
  }
}

/* Compact professional density pass applied across the platform. */
.card,
.resource-card,
.procedure-card {
  border-radius: 8px;
}

@media (max-width: 640px) {
  body {
    font-size: 15px;
  }

  .authenticated-shell .topbar {
    min-height: 54px;
    padding: 7px 12px;
  }

  .menu-toggle {
    width: 36px;
    height: 36px;
  }

  .menu-toggle span {
    width: 22px;
    height: 2px;
  }

  .authenticated-shell .brand {
    gap: 8px;
  }

  .authenticated-shell .brand-mark {
    width: 30px;
    height: 30px;
    border-radius: 7px;
  }

  .authenticated-shell .brand strong {
    font-size: 17px;
  }

  .content,
  .authenticated-shell .content {
    padding: 14px 10px 22px;
  }

  .page-heading {
    margin: 0 8px 12px;
  }

  .page-heading h1,
  .auth-panel h1,
  .public-form-intro h1 {
    margin-bottom: 6px;
    font-size: 22px;
    line-height: 1.12;
  }

  .page-heading p,
  .public-form-intro p,
  .auth-brand p {
    font-size: 13px;
    line-height: 1.42;
  }

  .card,
  .resource-card,
  .procedure-card,
  .agent-register-card,
  .wizard-form {
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(7, 31, 61, .055);
  }

  .card h2,
  .compact-card h2,
  .resource-card h2,
  .procedure-card h2 {
    margin-bottom: 10px;
    font-size: 17px;
    line-height: 1.18;
  }

  .dashboard-grid,
  .dashboard-main,
  .dashboard-side,
  .split,
  .dashboard-row,
  .procedure-layout,
  .panel-layout,
  .resource-grid,
  .procedure-list {
    gap: 10px;
  }

  .metrics {
    grid-auto-columns: minmax(104px, 28vw);
    gap: 8px;
    margin: 0 -10px 3px;
    padding: 0 10px 7px;
  }

  .metric {
    min-height: 104px;
    gap: 6px;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(23, 38, 67, .07);
  }

  .metric-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }

  .metric-icon::before {
    width: 18px;
    height: 18px;
  }

  .metric strong {
    font-size: 20px;
  }

  .metric span:last-child {
    font-size: 10.5px;
    line-height: 1.15;
  }

  .scroll-hint {
    gap: 7px;
    margin-bottom: 12px;
  }

  .scroll-hint span {
    width: 7px;
    height: 7px;
  }

  .quick-actions {
    gap: 8px;
  }

  .quick-action {
    min-height: 48px;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.2;
    box-shadow: 0 5px 14px rgba(23, 38, 67, .05);
  }

  .action-icon {
    width: 30px;
    height: 30px;
  }

  .action-icon::before {
    width: 17px;
    height: 17px;
  }

  .button,
  .quick-action,
  .form-control,
  .form-select,
  input,
  select,
  textarea {
    border-radius: 8px;
  }

  .button {
    min-height: 38px;
    padding: 0 12px;
    font-size: 13px;
  }

  .button.mini {
    min-height: 30px;
    padding: 0 9px;
    font-size: 11px;
  }

  label span {
    margin-bottom: 5px;
    font-size: 11.5px;
  }

  .form-control,
  .form-select,
  input,
  select,
  textarea {
    min-height: 40px;
    padding: 9px 11px;
    font-size: 14px;
  }

  textarea {
    min-height: 82px;
  }

  .filter-panel {
    gap: 10px;
    padding: 12px;
  }

  .filter-grid {
    grid-auto-columns: minmax(150px, 48vw);
    gap: 8px;
  }

  .toolbar.card {
    gap: 10px;
    padding: 12px;
  }

  .bulk-actions {
    gap: 8px;
  }

  .resource-card,
  .procedure-card {
    gap: 10px;
  }

  .resource-main,
  .procedure-card-main {
    gap: 10px;
  }

  dl {
    gap: 3px;
  }

  dt {
    font-size: 12px;
  }

  dd {
    font-size: 14px;
  }

  .copy-link {
    padding: 9px 10px;
    font-size: 12px;
  }

  .compact-list {
    gap: 8px;
  }

  .compact-list div {
    padding: 9px 10px;
    border-radius: 8px;
  }

  .table-wrap tr {
    padding: 10px 12px;
    border-radius: 8px;
  }

  .table-wrap tr + tr {
    margin-top: 9px;
  }

  .table-wrap td {
    grid-template-columns: minmax(84px, 33%) minmax(0, 1fr);
    min-height: 27px;
    padding: 5px 0;
    font-size: 13.5px;
  }

  .table-wrap td::before {
    font-size: 10.5px;
  }

  .status {
    padding: 4px 8px;
    font-size: 10.5px;
  }

  .sidebar {
    width: min(70vw, 292px);
    padding: 16px 10px 18px;
  }

  .drawer-account {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    margin-bottom: 12px;
  }

  .drawer-avatar {
    width: 40px;
    height: 40px;
  }

  .drawer-account strong {
    font-size: 14px;
  }

  .drawer-account span {
    font-size: 11px;
  }

  .drawer-search input,
  .drawer-language .language-select,
  .drawer-logout {
    min-height: 40px;
  }

  .sidebar a.nav-link,
  .drawer-logout.nav-link {
    min-height: 40px;
    gap: 10px;
    padding: 9px 11px;
    margin-bottom: 5px;
    font-size: 13px;
  }

  .nav-icon {
    width: 18px;
    height: 18px;
  }
}

/* Ultra-compact mobile pass requested for production density. */
@media (max-width: 640px) {
  body {
    font-size: 14px;
  }

  .authenticated-shell .topbar {
    min-height: 48px;
    padding: 6px 10px;
  }

  .menu-toggle {
    width: 32px;
    height: 32px;
  }

  .menu-toggle span {
    width: 20px;
    height: 2px;
    margin: 2.5px 0;
  }

  .authenticated-shell .brand-mark {
    width: 26px;
    height: 26px;
  }

  .authenticated-shell .brand strong {
    font-size: 15px;
  }

  .content,
  .authenticated-shell .content {
    padding: 10px 8px 18px;
  }

  .page-heading {
    margin: 0 6px 9px;
  }

  .page-heading h1,
  .auth-panel h1,
  .public-form-intro h1 {
    font-size: 20px;
    line-height: 1.1;
  }

  .page-heading p,
  .public-form-intro p,
  .auth-brand p {
    font-size: 12px;
    line-height: 1.35;
  }

  .card,
  .resource-card,
  .procedure-card,
  .agent-register-card,
  .wizard-form,
  .filter-panel,
  .toolbar.card {
    padding: 9px;
    box-shadow: 0 4px 12px rgba(7, 31, 61, .045);
  }

  .card h2,
  .compact-card h2,
  .resource-card h2,
  .procedure-card h2 {
    margin-bottom: 8px;
    font-size: 15px;
  }

  .dashboard-grid,
  .dashboard-main,
  .dashboard-side,
  .split,
  .dashboard-row,
  .procedure-layout,
  .panel-layout,
  .resource-grid,
  .procedure-list,
  .form-grid,
  .filter-panel,
  .bulk-actions {
    gap: 8px;
  }

  .metrics {
    grid-auto-columns: minmax(86px, 25vw);
    gap: 7px;
    margin: 0 -8px 0;
    padding: 0 8px 6px;
  }

  .metric {
    min-height: 82px;
    gap: 4px;
    padding: 8px;
  }

  .metric-icon {
    width: 24px;
    height: 24px;
    border-radius: 7px;
  }

  .metric-icon::before {
    width: 15px;
    height: 15px;
  }

  .metric strong {
    font-size: 18px;
  }

  .metric span:last-child {
    font-size: 9.5px;
    line-height: 1.1;
  }

  .scroll-hint {
    margin-bottom: 9px;
  }

  .scroll-hint span {
    width: 6px;
    height: 6px;
  }

  .quick-actions {
    gap: 7px;
  }

  .quick-action {
    min-height: 40px;
    gap: 7px;
    padding: 7px 8px;
    font-size: 11px;
  }

  .action-icon {
    width: 24px;
    height: 24px;
  }

  .action-icon::before {
    width: 14px;
    height: 14px;
  }

  .button {
    min-height: 34px;
    padding: 0 10px;
    font-size: 12px;
  }

  .button.mini {
    min-height: 28px;
    padding: 0 8px;
    font-size: 10.5px;
  }

  label span {
    margin-bottom: 4px;
    font-size: 10.5px;
  }

  .form-control,
  .form-select,
  input,
  select,
  textarea {
    min-height: 34px;
    padding: 7px 9px;
    font-size: 13px;
  }

  textarea {
    min-height: 68px;
  }

  .filter-grid {
    grid-auto-columns: minmax(132px, 43vw);
    gap: 7px;
    padding-bottom: 7px;
  }

  .compact-list {
    gap: 6px;
  }

  .compact-list div,
  .check-list div {
    padding: 7px 8px;
  }

  .resource-main,
  .procedure-card-main {
    gap: 8px;
  }

  .resource-card,
  .procedure-card {
    gap: 8px;
  }

  .copy-link {
    padding: 7px 8px;
    font-size: 11px;
  }

  dl {
    gap: 2px;
  }

  dt {
    font-size: 10.5px;
  }

  dd {
    font-size: 12.5px;
  }

  .table-wrap tr {
    padding: 8px 10px;
  }

  .table-wrap tr + tr {
    margin-top: 7px;
  }

  .table-wrap td {
    min-height: 24px;
    padding: 4px 0;
    font-size: 12px;
  }

  .table-wrap td::before {
    font-size: 9.5px;
  }

  .status {
    padding: 3px 7px;
    font-size: 9.5px;
  }

  .sidebar {
    width: min(66vw, 268px);
    padding: 12px 8px 16px;
  }

  .drawer-account {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px;
    margin-bottom: 9px;
  }

  .drawer-avatar {
    width: 34px;
    height: 34px;
    font-size: 14px;
  }

  .drawer-account strong {
    font-size: 12px;
  }

  .drawer-account span {
    font-size: 10px;
  }

  .drawer-search,
  .drawer-language {
    margin-bottom: 7px;
  }

  .drawer-search input,
  .drawer-language .language-select,
  .drawer-logout {
    min-height: 34px;
  }

  .drawer-label {
    margin: 8px 4px 7px;
    font-size: 10px;
  }

  .sidebar a.nav-link,
  .drawer-logout.nav-link {
    min-height: 34px;
    gap: 8px;
    padding: 7px 9px;
    margin-bottom: 4px;
    font-size: 11.5px;
  }

  .nav-icon {
    width: 15px;
    height: 15px;
  }
}

/* Connected CRM premium modules: admin, agent, cases, applications. */
.module-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.module-heading h1 {
  letter-spacing: 0;
}

.module-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.notification-button {
  position: relative;
  overflow: visible;
}

.notification-badge {
  position: absolute;
  top: -9px;
  right: -9px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #dc2626;
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 8px 18px rgba(220, 38, 38, .28);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.premium-panel,
.premium-resource-card {
  border: 1px solid #dce6ef;
  background: linear-gradient(180deg, #fff 0, #fbfdff 100%);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .065);
}

.premium-metrics {
  margin-bottom: 18px;
}

.premium-metrics .metric {
  min-height: 118px;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
}

.premium-dashboard {
  align-items: start;
}

.admin-dashboard .dashboard-side {
  display: grid;
  gap: 12px;
}

.agent-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
  gap: 14px;
  margin-bottom: 14px;
}

.agent-link-panel .copy-line {
  align-items: stretch;
}

.agent-link-panel .qr-panel {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 12px 0;
}

.agent-link-panel .qr-code {
  width: 112px;
  height: 112px;
  padding: 8px;
  border: 1px solid #dde7f0;
  border-radius: 10px;
  background: #fff;
}

.single-column {
  grid-template-columns: 1fr;
}

.premium-filter {
  position: sticky;
  top: 86px;
  z-index: 12;
  border-radius: 10px;
}

.case-list-panel {
  padding: 0;
  overflow: hidden;
}

.case-list-panel > form {
  padding: 16px;
}

.crm-table-wrap {
  border-radius: 10px;
}

.crm-table {
  min-width: 860px;
}

.crm-table th {
  background: #f8fafc;
  color: #5b6b80;
  font-size: 11px;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.crm-table td {
  vertical-align: middle;
}

.crm-table td strong,
.crm-table td small {
  display: block;
}

.crm-table td small {
  margin-top: 3px;
  color: #718096;
  font-size: 12px;
  line-height: 1.2;
}

.case-reference-link {
  color: #0f766e;
  font-weight: 900;
}

.case-heading {
  margin-bottom: 12px;
}

.case-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.case-summary-strip div {
  padding: 13px 14px;
  border: 1px solid #dce6ef;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
}

.case-summary-strip span,
.case-summary-strip strong {
  display: block;
}

.case-summary-strip span {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.case-summary-strip strong {
  margin-top: 5px;
  color: #0f172a;
  font-size: 14px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.case-detail-grid {
  gap: 14px;
}

.case-detail-grid .card h2,
.case-workflow-grid .card h2 {
  padding-bottom: 10px;
  border-bottom: 1px solid #e2e8f0;
}

.doc-row {
  border-radius: 10px;
}

.agent-admin-grid {
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 14px;
}

.premium-resource-card {
  border-radius: 10px;
}

.premium-resource-card .resource-main dl {
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}

.premium-resource-card .resource-note {
  border-left: 3px solid #14b8a6;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f0fdfa;
}

.status.danger {
  background: #fff1f2;
  color: #be123c;
}

@media (max-width: 980px) {
  .module-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .module-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .agent-workspace-grid,
  .case-summary-strip {
    grid-template-columns: 1fr;
  }

  .premium-filter {
    position: static;
  }
}

@media (max-width: 640px) {
  .module-heading {
    gap: 10px;
    margin: 0 6px 10px;
  }

  .module-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .module-actions .button {
    width: 100%;
  }

  .premium-metrics {
    margin-bottom: 8px;
  }

  .premium-panel,
  .premium-resource-card {
    box-shadow: 0 7px 18px rgba(15, 23, 42, .055);
  }

  .agent-workspace-grid,
  .case-detail-grid,
  .case-workflow-grid,
  .agent-admin-grid {
    gap: 8px;
  }

  .agent-link-panel .qr-panel {
    gap: 8px;
  }

  .agent-link-panel .qr-code {
    width: 86px;
    height: 86px;
    padding: 6px;
  }

  .case-summary-strip {
    gap: 7px;
    margin-bottom: 8px;
  }

  .case-summary-strip div {
    padding: 9px 10px;
  }

  .case-summary-strip span {
    font-size: 9.5px;
  }

  .case-summary-strip strong {
    font-size: 12px;
  }

  .case-list-panel > form {
    padding: 9px;
  }

  .crm-table td small {
    font-size: 10.5px;
  }

  .agent-admin-grid {
    grid-template-columns: 1fr;
  }
}

/* Dashboard production polish: readable mobile dashboards, cards, filters and dossier sections. */
.mobile-panel-title {
  display: none;
}

.case-section-nav {
  position: sticky;
  top: 92px;
  z-index: 11;
  display: flex;
  gap: 8px;
  margin: 0 0 14px;
  padding: 8px;
  overflow-x: auto;
  border: 1px solid #dce6ef;
  border-radius: 10px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .055);
  backdrop-filter: blur(14px);
  scrollbar-width: none;
}

.case-section-nav::-webkit-scrollbar {
  display: none;
}

.case-section-nav a {
  flex: 0 0 auto;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid #dbe7ee;
  border-radius: 8px;
  background: #f8fafc;
  color: var(--navy);
  font-size: 12px;
  font-weight: 850;
}

@media (max-width: 980px) {
  .premium-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-dashboard {
    grid-template-columns: 1fr;
  }

  .admin-dashboard .dashboard-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-dashboard .dashboard-side .action-card,
  .admin-dashboard .dashboard-side .compact-card:nth-child(2) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .mobile-panel-title {
    display: grid;
    gap: 2px;
    margin-bottom: 9px;
  }

  .mobile-panel-title strong {
    color: var(--navy);
    font-size: 14px;
    line-height: 1.15;
  }

  .mobile-panel-title span {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.3;
  }

  .premium-metrics,
  .metrics.premium-metrics,
  .agent-metrics,
  .authenticated-shell .metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: unset;
    gap: 8px;
    margin: 0 0 12px;
    padding: 0;
    overflow: visible;
    mask-image: none;
  }

  .premium-metrics .metric,
  .metrics.premium-metrics .metric,
  .agent-metrics .metric,
  .authenticated-shell .metrics .metric {
    min-height: 88px;
    padding: 10px;
    scroll-snap-align: none;
  }

  .premium-metrics .metric.wide,
  .agent-metrics .metric.green {
    grid-column: 1 / -1;
    min-height: 74px;
  }

  .metric strong {
    font-size: 19px;
  }

  .metric span,
  .metric span:last-child {
    font-size: 11px;
    line-height: 1.18;
  }

  .agent-workspace-grid {
    grid-template-columns: 1fr;
  }

  .agent-link-panel {
    display: grid;
    gap: 9px;
  }

  .agent-link-panel .copy-line {
    gap: 7px;
  }

  .agent-link-panel .qr-panel {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin: 0;
  }

  .agent-link-panel .qr-code {
    width: 76px;
    height: 76px;
  }

  .case-filter-panel {
    gap: 9px;
  }

  .case-filter-panel .filter-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    grid-auto-columns: unset;
    gap: 8px;
    margin: 0;
    padding: 0;
    overflow: visible;
    mask-image: none;
    scroll-snap-type: none;
  }

  .case-filter-panel .filter-actions {
    grid-template-columns: 1fr 1fr;
  }

  .case-list-panel {
    padding: 10px;
  }

  .case-list-panel > form {
    padding: 0;
  }

  .case-list-title {
    margin-bottom: 10px;
  }

  .crm-table-wrap,
  .table-wrap {
    border: 0;
    overflow: visible;
  }

  .crm-table,
  .table-wrap table {
    min-width: 0;
    width: 100%;
  }

  .crm-table thead,
  .comfortable-table thead {
    display: none;
  }

  .crm-table,
  .crm-table tbody,
  .crm-table tr,
  .crm-table td,
  .comfortable-table,
  .comfortable-table tbody,
  .comfortable-table tr,
  .comfortable-table td {
    display: block;
  }

  .crm-table tr,
  .comfortable-table tr {
    padding: 10px 11px;
    border: 1px solid #dfe9f2;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .045);
  }

  .crm-table tr + tr,
  .comfortable-table tr + tr {
    margin-top: 9px;
  }

  .crm-table td,
  .comfortable-table td {
    display: grid;
    grid-template-columns: minmax(88px, 34%) minmax(0, 1fr);
    align-items: start;
    gap: 9px;
    min-height: 0;
    padding: 6px 0;
    border: 0;
    color: #12233c;
    font-size: 12px;
    text-align: right;
    overflow-wrap: anywhere;
  }

  .crm-table td::before,
  .comfortable-table td::before {
    content: attr(data-label);
    color: #6b7a90;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .02em;
    text-align: left;
    text-transform: uppercase;
  }

  .crm-table td strong,
  .crm-table td small {
    text-align: right;
  }

  .case-reference-link {
    font-size: 13px;
  }

  .admin-dashboard .dashboard-side {
    grid-template-columns: 1fr;
  }

  .case-section-nav {
    top: 56px;
    margin: 0 0 10px;
    padding: 7px;
    border-radius: 9px;
  }

  .case-section-nav a {
    min-height: 30px;
    padding: 0 10px;
    font-size: 11px;
  }

  .case-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-detail-grid .card,
  .case-workflow-grid .card {
    scroll-margin-top: 106px;
  }

  .detail-grid.case-detail-grid {
    grid-template-columns: 1fr;
  }

  .inline-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 360px) {
  .premium-metrics,
  .metrics.premium-metrics,
  .agent-metrics,
  .case-summary-strip {
    grid-template-columns: 1fr;
  }

  .module-actions {
    grid-template-columns: 1fr;
  }

  .crm-table td,
  .comfortable-table td {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .crm-table td strong,
  .crm-table td small {
    text-align: left;
  }
}

/* Public form premium redesign: candidate intake and agent recruitment. */
.public-portal {
  background:
    radial-gradient(circle at 12% 0, rgba(85, 170, 160, .18), transparent 34vw),
    linear-gradient(180deg, #eef8f7 0, #f7fbfd 360px, #f5f8fb 100%);
}

.public-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 76px;
  border-bottom-color: rgba(203, 215, 226, .72);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(18px);
}

.public-topbar .brand {
  gap: 13px;
}

.public-topbar .brand-mark {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  object-fit: contain;
}

.public-topbar .brand strong {
  color: #071f3d;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 900;
  line-height: 1;
}

.public-topbar .brand small {
  margin-top: 3px;
  color: #77849a;
  font-size: 13px;
  font-weight: 650;
}

.public-topbar .language-select {
  min-height: 46px;
  min-width: 180px;
  padding-inline: 16px 38px;
  border-color: rgba(188, 202, 216, .9);
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 10px 26px rgba(7, 31, 61, .06);
  font-size: 15px;
}

.public-portal-content {
  width: min(1120px, calc(100% - 36px));
  margin: 34px auto 72px;
}

.public-form-shell {
  display: grid;
  gap: 22px;
}

.candidate-public-shell,
.agent-public-shell {
  grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(18px, 3vw, 34px);
}

.public-intake-panel,
.agent-intro-panel {
  position: sticky;
  top: 104px;
  display: grid;
  gap: 18px;
  padding: 26px;
  border: 1px solid rgba(203, 215, 226, .82);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(246, 251, 252, .92));
  box-shadow: 0 20px 48px rgba(7, 31, 61, .08);
}

.public-intake-panel h1,
.agent-intro-panel h1 {
  margin: 12px 0 12px;
  color: #071f3d;
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1.06;
  font-weight: 920;
}

.public-intake-panel p,
.agent-intro-panel p {
  margin: 0;
  color: #657289;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 560;
}

.public-agent-card {
  display: grid;
  gap: 7px;
  padding: 16px;
  border: 1px solid rgba(85, 170, 160, .24);
  border-radius: 8px;
  background: #eefaf8;
}

.public-agent-card span {
  color: #557083;
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.public-agent-card strong {
  color: #061d39;
  font-size: 16px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.candidate-form-column {
  min-width: 0;
}

.public-stepper {
  position: sticky;
  top: 94px;
  z-index: 10;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
  padding: 6px;
  border: 1px solid rgba(203, 215, 226, .72);
  border-radius: 8px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 14px 34px rgba(7, 31, 61, .07);
  backdrop-filter: blur(16px);
}

.public-stepper li {
  min-height: 62px;
  padding: 10px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.public-stepper li.active {
  background: #e8f7f4;
  box-shadow: inset 0 0 0 1px rgba(62, 145, 136, .42);
}

.public-stepper strong {
  width: 34px;
  height: 34px;
  background: #0a8f86;
  font-size: 15px;
  font-weight: 900;
}

.public-stepper span {
  min-width: 0;
  color: #0b2341;
  font-size: 14px;
  font-weight: 820;
  line-height: 1.15;
}

.public-intake-card {
  overflow: hidden;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(203, 215, 226, .88);
  border-radius: 8px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 24px 60px rgba(7, 31, 61, .1);
}

.public-intake-card .form-grid {
  gap: 16px 18px;
}

.public-intake-card .wizard-step h2,
.public-intake-card .form-section-title h2 {
  color: #071f3d;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0;
}

.public-intake-card .wizard-step h2 {
  margin: 0 0 8px;
  padding: 0 0 15px;
  border-top: 0;
  border-bottom: 1px solid rgba(216, 226, 236, .95);
}

.public-intake-card label span {
  color: #657289;
  font-size: 12px;
  font-weight: 850;
}

.public-intake-card .form-control,
.public-intake-card .form-select,
.public-intake-card input,
.public-intake-card select,
.public-intake-card textarea {
  min-height: 48px;
  border-color: #d5e0ea;
  background: #fbfdff;
  font-size: 15px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
}

.public-intake-card input[type="file"] {
  padding-block: 10px;
}

.public-intake-card textarea {
  min-height: 112px;
}

.public-intake-card .notice {
  border: 1px solid rgba(217, 130, 37, .22);
  background: #fff8ec;
  color: #9a5b12;
  font-size: 13px;
  line-height: 1.45;
}

.public-intake-card .wizard-actions,
.public-intake-card .public-submit {
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid rgba(216, 226, 236, .95);
}

.public-intake-card .button {
  min-height: 48px;
  padding-inline: 20px;
  font-weight: 850;
}

.public-intake-card .button.primary {
  background: linear-gradient(135deg, #06988f, #05756f);
  box-shadow: 0 14px 28px rgba(5, 117, 111, .22);
}

.agent-public-shell .agent-register-card {
  max-width: none;
  margin: 0;
}

.agent-intro-list {
  display: grid;
  gap: 10px;
  margin-top: 2px;
}

.agent-intro-list div {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 10px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(216, 226, 236, .92);
}

.agent-intro-list strong {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #0a8f86;
  color: #fff;
  font-size: 14px;
}

.agent-intro-list span {
  color: #0b2341;
  font-size: 14px;
  font-weight: 820;
}

.agent-register-card .form-section-title {
  display: grid;
  gap: 4px;
  padding-top: 22px;
  border-top-color: rgba(216, 226, 236, .95);
}

.agent-register-card .form-section-title:first-of-type {
  padding-top: 0;
}

.agent-register-card .form-section-title p {
  font-size: 14px;
  line-height: 1.45;
}

@media (max-width: 980px) {
  .candidate-public-shell,
  .agent-public-shell {
    grid-template-columns: 1fr;
  }

  .public-intake-panel,
  .agent-intro-panel,
  .public-stepper {
    position: static;
  }

  .public-intake-panel,
  .agent-intro-panel {
    padding: 22px;
  }

  .public-stepper {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .public-portal-content {
    width: min(100% - 20px, 1120px);
    margin: 18px auto 38px;
  }

  .public-topbar {
    grid-template-columns: minmax(0, 1fr) minmax(112px, 136px);
    padding: 9px 10px;
  }

  .public-topbar .brand {
    gap: 9px;
  }

  .public-topbar .brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 8px;
  }

  .public-topbar .brand strong {
    font-size: 18px;
  }

  .public-topbar .language-select {
    min-width: 0;
    min-height: 38px;
    padding-inline: 10px 28px;
    font-size: 13px;
  }

  .public-form-shell {
    gap: 12px;
  }

  .public-intake-panel,
  .agent-intro-panel,
  .public-intake-card {
    padding: 16px;
  }

  .public-intake-panel h1,
  .agent-intro-panel h1 {
    margin: 10px 0 8px;
    font-size: 28px;
    line-height: 1.05;
  }

  .public-intake-panel p,
  .agent-intro-panel p {
    font-size: 13px;
    line-height: 1.42;
  }

  .public-agent-card {
    padding: 12px;
  }

  .public-stepper {
    margin: 0 -2px 12px;
    padding: 5px;
    gap: 5px;
  }

  .public-stepper li {
    min-height: 48px;
    justify-content: center;
    gap: 6px;
    padding: 7px 5px;
  }

  .public-stepper strong,
  .agent-intro-list strong {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .public-stepper span,
  .agent-intro-list span {
    font-size: 11px;
    line-height: 1.05;
  }

  .public-intake-card .form-grid {
    grid-template-columns: 1fr;
    gap: 11px;
  }

  .public-intake-card .span-2 {
    grid-column: auto;
  }

  .public-intake-card .wizard-step h2,
  .public-intake-card .form-section-title h2 {
    font-size: 18px;
  }

  .public-intake-card .form-control,
  .public-intake-card .form-select,
  .public-intake-card input,
  .public-intake-card select,
  .public-intake-card textarea {
    min-height: 42px;
    font-size: 14px;
  }

  .public-intake-card textarea {
    min-height: 88px;
  }

  .agent-intro-list {
    gap: 7px;
  }

  .agent-intro-list div {
    grid-template-columns: 28px minmax(0, 1fr);
    padding: 8px;
  }

  .agent-register-card .form-section-title {
    padding-top: 16px;
  }
}

/* Public form executive polish: denser, calmer, production-grade intake UI. */
.public-portal {
  background:
    linear-gradient(180deg, #eef7f8 0, #f6f9fc 260px, #f7fafc 100%);
  color: #071b35;
}

.public-topbar {
  min-height: 72px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 1px 0 rgba(204, 216, 228, .9);
  backdrop-filter: saturate(140%) blur(10px);
}

.public-topbar .brand-mark {
  width: 42px;
  height: 42px;
}

.public-topbar .brand strong {
  font-size: clamp(21px, 2.1vw, 27px);
  letter-spacing: 0;
}

.public-topbar .language-select {
  min-height: 44px;
  border-color: #cbd8e5;
  box-shadow: none;
}

.public-portal-content {
  width: min(1100px, calc(100% - 36px));
  margin-top: 30px;
}

.candidate-public-shell,
.agent-public-shell {
  grid-template-columns: minmax(292px, 360px) minmax(0, 1fr);
  gap: 24px;
}

.public-intake-panel,
.agent-intro-panel,
.public-intake-card,
.public-stepper {
  border-color: #cedce9;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(8, 28, 54, .07);
}

.public-intake-panel,
.agent-intro-panel {
  gap: 18px;
  padding: 24px;
  background:
    linear-gradient(180deg, #ffffff 0, #fbfdff 100%);
}

.public-intake-panel .status,
.agent-intro-panel .status {
  padding: 6px 10px;
  border-radius: 8px;
  background: #e7f5f3;
  color: #087d76;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.public-intake-panel h1,
.agent-intro-panel h1 {
  max-width: 10ch;
  margin: 14px 0 10px;
  color: #061d39;
  font-size: clamp(32px, 3.1vw, 42px);
  line-height: 1.03;
  font-weight: 950;
}

.agent-intro-panel h1 {
  max-width: 12ch;
}

.public-intake-panel p,
.agent-intro-panel p {
  color: #526177;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 600;
}

.public-agent-card {
  padding: 15px;
  border-color: #bfe5df;
  background: #effaf8;
}

.public-agent-card span {
  color: #526177;
}

.public-agent-card strong {
  font-size: 15px;
}

.public-stepper {
  min-height: 78px;
  margin-bottom: 16px;
  padding: 8px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(8, 28, 54, .055);
}

.public-stepper li {
  min-height: 60px;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
}

.public-stepper li.active {
  background: #eef9f7;
  box-shadow: inset 0 0 0 1px #0a8f86;
}

.public-stepper strong {
  width: 34px;
  height: 34px;
  background: #078a82;
  font-size: 14px;
}

.public-stepper span {
  font-size: 13px;
  font-weight: 900;
}

.public-intake-card {
  padding: 30px 34px 34px;
  box-shadow: 0 18px 44px rgba(8, 28, 54, .075);
}

.public-intake-card .wizard-step h2 {
  position: relative;
  margin-bottom: 20px;
  padding: 0 0 18px 28px;
  border-bottom-color: #d9e4ee;
  color: #061d39;
  font-size: 24px;
  line-height: 1.15;
}

.public-intake-card .wizard-step h2::before {
  position: absolute;
  left: 0;
  top: 8px;
  width: 10px;
  height: 10px;
  background: #078a82;
  box-shadow: 0 0 0 5px #e7f5f3;
}

.public-intake-card .form-section-title {
  padding-top: 24px;
}

.public-intake-card .form-section-title h2 {
  font-size: 21px;
  line-height: 1.2;
}

.public-intake-card .form-section-title p {
  color: #526177;
  font-weight: 560;
}

.public-intake-card label span {
  margin-bottom: 7px;
  color: #5b6980;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 900;
}

.public-intake-card .form-control,
.public-intake-card .form-select,
.public-intake-card input,
.public-intake-card select,
.public-intake-card textarea {
  min-height: 48px;
  padding: 11px 13px;
  border-color: #ccd9e6;
  background: #fcfdff;
  color: #071b35;
  font-size: 15px;
  font-weight: 540;
}

.public-intake-card .form-control:focus,
.public-intake-card .form-select:focus,
.public-intake-card input:focus,
.public-intake-card select:focus,
.public-intake-card textarea:focus {
  outline: 3px solid rgba(7, 138, 130, .13);
  border-color: #078a82;
}

.public-intake-card .wizard-actions,
.public-intake-card .public-submit {
  padding-top: 18px;
  border-top-color: #d9e4ee;
}

.public-intake-card .button {
  min-height: 48px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 900;
}

.public-intake-card .button.primary {
  background: #078a82;
  border-color: #078a82;
  box-shadow: 0 10px 22px rgba(7, 138, 130, .22);
}

.public-intake-card .button.primary:hover {
  background: #061d39;
  border-color: #061d39;
}

.agent-intro-list {
  gap: 8px;
}

.agent-intro-list div {
  min-height: 48px;
  border-color: #d7e2ed;
  background: #fbfdff;
}

@media (max-width: 980px) {
  .candidate-public-shell,
  .agent-public-shell {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .public-intake-panel h1,
  .agent-intro-panel h1 {
    max-width: 18ch;
  }

  .public-stepper {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .public-portal {
    background:
      linear-gradient(180deg, #eef8f8 0, #f6f9fc 210px, #f7fafc 100%);
  }

  .public-topbar {
    min-height: 66px;
    padding: 10px 12px;
  }

  .public-topbar .brand-mark {
    width: 34px;
    height: 34px;
  }

  .public-topbar .brand strong {
    font-size: 17px;
    line-height: 1.05;
  }

  .public-topbar .language-select {
    min-height: 38px;
    font-size: 13px;
  }

  .public-portal-content {
    width: min(100% - 18px, 1100px);
    margin-top: 14px;
  }

  .public-intake-panel,
  .agent-intro-panel {
    padding: 18px 16px;
    box-shadow: 0 10px 24px rgba(8, 28, 54, .055);
  }

  .public-intake-panel h1,
  .agent-intro-panel h1 {
    max-width: none;
    margin: 12px 0 8px;
    font-size: 27px;
    line-height: 1.08;
  }

  .public-intake-panel p,
  .agent-intro-panel p {
    font-size: 13px;
    line-height: 1.45;
  }

  .public-stepper {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    margin-bottom: 12px;
    padding: 5px;
    box-shadow: 0 8px 18px rgba(8, 28, 54, .055);
  }

  .public-stepper li {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: 58px;
    gap: 4px;
    padding: 7px 3px;
  }

  .public-stepper strong {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .public-stepper span {
    width: 100%;
    font-size: 10px;
    line-height: 1.1;
    text-align: center;
    overflow-wrap: anywhere;
  }

  .public-intake-card {
    padding: 18px 16px 20px;
    box-shadow: 0 12px 28px rgba(8, 28, 54, .06);
  }

  .public-intake-card .wizard-step h2 {
    margin-bottom: 16px;
    padding: 0 0 14px 24px;
    font-size: 21px;
  }

  .public-intake-card .wizard-step h2::before {
    top: 7px;
    width: 9px;
    height: 9px;
    box-shadow: 0 0 0 4px #e7f5f3;
  }

  .public-intake-card label span {
    font-size: 11px;
  }

  .public-intake-card .form-control,
  .public-intake-card .form-select,
  .public-intake-card input,
  .public-intake-card select,
  .public-intake-card textarea {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 14px;
  }

  .public-intake-card .button {
    min-height: 44px;
  }
}

/* Public intake final direction: restrained institutional form, no fragile split layout. */
.public-portal {
  background: #f4f8fb;
}

.public-topbar {
  min-height: 74px;
  border-bottom: 1px solid #d8e2ec;
  background: #fff;
  box-shadow: none;
}

.public-portal-content {
  width: min(1010px, calc(100% - 32px));
  margin: 32px auto 70px;
}

.candidate-public-shell,
.agent-public-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.public-intake-panel,
.agent-intro-panel {
  position: static;
  display: grid;
  gap: 14px;
  padding: 0 2px 6px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.public-intake-panel h1,
.agent-intro-panel h1 {
  max-width: 760px;
  margin: 10px 0 0;
  color: #061d39;
  font-size: clamp(34px, 4vw, 46px);
  line-height: 1.06;
  font-weight: 920;
}

.public-intake-panel p,
.agent-intro-panel p {
  max-width: 760px;
  color: #5f6f85;
  font-size: 17px;
  line-height: 1.48;
  font-weight: 650;
}

.public-intake-panel .status,
.agent-intro-panel .status {
  width: fit-content;
  padding: 6px 10px;
  border: 1px solid #c9ebe6;
  border-radius: 8px;
  background: #eaf8f6;
  color: #067c75;
}

.public-agent-card {
  width: min(100%, 520px);
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #c7e8e3;
  background: #eefaf8;
}

.public-agent-card span {
  margin: 0;
  white-space: nowrap;
}

.public-stepper {
  position: static;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-height: 0;
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.public-stepper li {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  min-height: 58px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #d3deea;
  border-radius: 8px;
  background: #fff;
}

.public-stepper li.active {
  border-color: #078a82;
  background: #f2fbfa;
  box-shadow: inset 0 3px 0 #078a82;
}

.public-stepper strong {
  width: 34px;
  height: 34px;
  background: #078a82;
}

.public-stepper span {
  font-size: 14px;
  font-weight: 900;
}

.public-intake-card {
  max-width: 1010px;
  padding: 30px;
  border: 1px solid #d3deea;
  background: #fff;
  box-shadow: 0 18px 46px rgba(7, 31, 61, .07);
}

.public-intake-card .wizard-step h2,
.public-intake-card .form-section-title h2 {
  color: #061d39;
}

.public-intake-card .form-grid {
  gap: 18px 18px;
}

.public-intake-card .form-control,
.public-intake-card .form-select,
.public-intake-card input,
.public-intake-card select,
.public-intake-card textarea {
  background: #fff;
}

.agent-intro-list {
  width: min(100%, 760px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.agent-intro-list div {
  min-height: 58px;
}

@media (max-width: 720px) {
  .public-portal-content {
    width: min(100% - 22px, 1010px);
    margin-top: 18px;
  }

  .public-topbar {
    min-height: 66px;
  }

  .public-intake-panel,
  .agent-intro-panel {
    gap: 12px;
  }

  .public-intake-panel h1,
  .agent-intro-panel h1 {
    font-size: 30px;
    line-height: 1.08;
  }

  .public-intake-panel p,
  .agent-intro-panel p {
    font-size: 14px;
    line-height: 1.45;
  }

  .public-agent-card {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .public-stepper {
    gap: 7px;
  }

  .public-stepper li {
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: 62px;
    gap: 5px;
    padding: 8px 4px;
  }

  .public-stepper strong {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }

  .public-stepper span {
    font-size: 10px;
    line-height: 1.1;
    text-align: center;
  }

  .public-intake-card {
    padding: 18px 16px 20px;
  }

  .public-intake-card .wizard-step h2 {
    font-size: 22px;
  }

  .agent-intro-list {
    grid-template-columns: 1fr;
  }
}

/* Phone-first compression: keep public forms tight and business-like. */
@media (max-width: 520px) {
  .public-topbar {
    min-height: 50px;
    padding: 6px 9px;
  }

  .public-topbar .brand {
    gap: 7px;
  }

  .public-topbar .brand-mark {
    width: 24px;
    height: 24px;
  }

  .public-topbar .brand strong {
    font-size: 14px;
  }

  .public-topbar .language-select {
    min-height: 31px;
    min-width: 118px;
    padding: 5px 26px 5px 9px;
    font-size: 11px;
  }

  .public-portal-content {
    width: min(100% - 12px, 940px);
    margin: 8px auto 24px;
  }

  .public-form-shell {
    gap: 6px;
  }

  .public-intake-panel,
  .agent-intro-panel {
    gap: 5px;
    padding: 0 2px;
  }

  .public-intake-panel .status,
  .agent-intro-panel .status {
    padding: 3px 7px;
    border-radius: 7px;
    font-size: 9px;
  }

  .public-intake-panel h1,
  .agent-intro-panel h1 {
    margin: 4px 0 0;
    font-size: 20px;
    line-height: 1.05;
  }

  .public-intake-panel p,
  .agent-intro-panel p {
    font-size: 11px;
    line-height: 1.25;
  }

  .public-agent-card {
    display: flex;
    width: 100%;
    gap: 6px;
    padding: 5px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .public-agent-card span {
    color: #6b778a;
    font-size: 9px;
  }

  .public-agent-card strong {
    color: #263a54;
    font-size: 10.5px;
    font-weight: 850;
  }

  .public-stepper {
    gap: 4px;
    margin: 4px 0 0;
  }

  .public-stepper li {
    min-height: 42px;
    padding: 5px 2px;
    border-radius: 7px;
  }

  .public-stepper li.active {
    box-shadow: inset 0 2px 0 #078a82;
  }

  .public-stepper strong {
    width: 22px;
    height: 22px;
    font-size: 10px;
  }

  .public-stepper span {
    font-size: 8px;
    line-height: 1;
  }

  .public-intake-card {
    padding: 9px 10px 11px;
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(7, 31, 61, .045);
  }

  .public-intake-card .wizard-step h2 {
    margin-bottom: 8px;
    padding: 0 0 8px 17px;
    font-size: 16px;
  }

  .public-intake-card .wizard-step h2::before {
    top: 5px;
    width: 7px;
    height: 7px;
    box-shadow: 0 0 0 3px #e7f5f3;
  }

  .public-intake-card .form-section-title {
    padding-top: 12px;
  }

  .public-intake-card .form-section-title h2 {
    font-size: 16px;
  }

  .public-intake-card .form-section-title p {
    font-size: 11px;
    line-height: 1.3;
  }

  .public-intake-card .form-grid {
    gap: 7px;
  }

  .public-intake-card label span {
    margin-bottom: 3px;
    font-size: 9px;
  }

  .public-intake-card .form-control,
  .public-intake-card .form-select,
  .public-intake-card input,
  .public-intake-card select,
  .public-intake-card textarea {
    min-height: 32px;
    padding: 6px 9px;
    font-size: 12px;
  }

  .public-intake-card textarea {
    min-height: 58px;
  }

  .public-intake-card .wizard-actions,
  .public-intake-card .public-submit {
    margin-top: 2px;
    padding-top: 9px;
  }

  .public-intake-card .button {
    min-height: 34px;
    font-size: 11px;
  }

  .agent-intro-list {
    gap: 5px;
  }

  .agent-intro-list div {
    min-height: 38px;
    padding: 6px 8px;
  }

  .agent-intro-list strong {
    width: 24px;
    height: 24px;
    font-size: 10px;
  }

  .agent-intro-list span {
    font-size: 10px;
  }
}

/* Public intake density correction: professional compact scale. */
.public-topbar {
  min-height: 64px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.public-topbar .brand-mark {
  width: 34px;
  height: 34px;
}

.public-topbar .brand {
  gap: 10px;
}

.public-topbar .brand strong {
  font-size: clamp(18px, 1.8vw, 24px);
}

.public-topbar .brand small {
  font-size: 11px;
}

.public-topbar .language-select {
  min-height: 38px;
  min-width: 150px;
  font-size: 13px;
}

.public-portal-content {
  width: min(940px, calc(100% - 32px));
  margin-top: 24px;
}

.public-intake-panel,
.agent-intro-panel {
  gap: 10px;
}

.public-intake-panel .status,
.agent-intro-panel .status {
  padding: 4px 8px;
  font-size: 10px;
}

.public-intake-panel h1,
.agent-intro-panel h1 {
  max-width: 700px;
  margin-top: 6px;
  font-size: clamp(28px, 3.2vw, 38px);
}

.public-intake-panel p,
.agent-intro-panel p {
  max-width: 700px;
  font-size: 14px;
  line-height: 1.42;
}

.public-agent-card {
  width: min(100%, 480px);
  padding: 10px 12px;
}

.public-agent-card span {
  font-size: 10px;
}

.public-agent-card strong {
  font-size: 13px;
}

.public-stepper {
  gap: 8px;
}

.public-stepper li {
  min-height: 48px;
  padding: 8px 10px;
}

.public-stepper strong {
  width: 28px;
  height: 28px;
  font-size: 12px;
}

.public-stepper span {
  font-size: 12px;
}

.public-intake-card {
  max-width: 940px;
  padding: 24px;
}

.public-intake-card .wizard-step h2 {
  margin-bottom: 16px;
  padding-bottom: 14px;
  font-size: 21px;
}

.public-intake-card .form-section-title h2 {
  font-size: 19px;
}

.public-intake-card label span {
  margin-bottom: 5px;
  font-size: 10.5px;
}

.public-intake-card .form-grid {
  gap: 14px 16px;
}

.public-intake-card .form-control,
.public-intake-card .form-select,
.public-intake-card input,
.public-intake-card select,
.public-intake-card textarea {
  min-height: 42px;
  padding: 9px 12px;
  font-size: 14px;
}

.public-intake-card textarea {
  min-height: 86px;
}

.public-intake-card .button {
  min-height: 42px;
  padding-inline: 16px;
  font-size: 13px;
}

.agent-intro-list div {
  min-height: 48px;
  padding: 8px 10px;
}

.agent-intro-list strong {
  width: 28px;
  height: 28px;
  font-size: 12px;
}

.agent-intro-list span {
  font-size: 12px;
}

@media (max-width: 720px) {
  .public-topbar {
    min-height: 58px;
    padding: 8px 10px;
  }

  .public-topbar .brand-mark {
    width: 28px;
    height: 28px;
  }

  .public-topbar .brand strong {
    font-size: 15px;
  }

  .public-topbar .language-select {
    min-height: 34px;
    min-width: 126px;
    font-size: 12px;
  }

  .public-portal-content {
    width: min(100% - 18px, 940px);
    margin-top: 14px;
  }

  .public-form-shell {
    gap: 10px;
  }

  .public-intake-panel h1,
  .agent-intro-panel h1 {
    font-size: 24px;
    line-height: 1.08;
  }

  .public-intake-panel p,
  .agent-intro-panel p {
    font-size: 12.5px;
    line-height: 1.38;
  }

  .public-agent-card {
    padding: 9px 10px;
  }

  .public-stepper {
    gap: 5px;
    margin-top: 4px;
  }

  .public-stepper li {
    min-height: 50px;
    padding: 6px 3px;
  }

  .public-stepper strong {
    width: 25px;
    height: 25px;
    font-size: 11px;
  }

  .public-stepper span {
    font-size: 9px;
  }

  .public-intake-card {
    padding: 14px 14px 16px;
  }

  .public-intake-card .wizard-step h2 {
    margin-bottom: 12px;
    padding-left: 20px;
    padding-bottom: 12px;
    font-size: 19px;
  }

  .public-intake-card .form-grid {
    gap: 10px;
  }

  .public-intake-card .form-control,
  .public-intake-card .form-select,
  .public-intake-card input,
  .public-intake-card select,
  .public-intake-card textarea {
    min-height: 38px;
    padding: 8px 10px;
    font-size: 13px;
  }

  .public-intake-card .button {
    min-height: 38px;
    font-size: 12px;
  }
}

/* FINAL OVERRIDE - candidate public form must stay minimal, compact, and SaaS-premium. */
body.public-portal {
  background: #f6f9fb;
}

body.public-portal .public-topbar {
  min-height: 64px;
  padding: 10px clamp(12px, 4vw, 40px);
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: none;
}

body.public-portal .public-topbar .brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 8px;
}

body.public-portal .public-topbar .brand strong {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 880;
}

body.public-portal .public-topbar .brand small {
  display: none;
}

body.public-portal .public-topbar .language-select {
  min-height: 38px;
  min-width: 148px;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .05);
  font-size: 13px;
}

body.public-portal .public-portal-content {
  width: min(920px, calc(100% - 28px));
  margin: 24px auto 56px;
}

body.public-portal .candidate-public-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

body.public-portal .candidate-public-shell .public-intake-panel {
  position: static;
  display: grid;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.public-portal .candidate-public-shell .public-intake-panel h1 {
  max-width: none;
  margin: 0;
  color: #081b33;
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.08;
  font-weight: 880;
}

body.public-portal .candidate-public-shell .public-intake-panel p {
  max-width: 660px;
  color: #64748b;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 520;
}

body.public-portal .candidate-public-shell .public-agent-card {
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: baseline;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
}

body.public-portal .candidate-public-shell .public-agent-card span,
body.public-portal .candidate-public-shell .public-agent-card strong {
  font-size: 13px;
  line-height: 1.2;
}

body.public-portal .candidate-public-shell .public-agent-card span {
  color: #64748b;
  font-weight: 650;
  text-transform: none;
}

body.public-portal .candidate-public-shell .public-agent-card strong {
  color: #0d9488;
  font-weight: 850;
}

body.public-portal .candidate-form-column {
  display: grid;
  gap: 12px;
  margin-top: 0;
}

body.public-portal .candidate-public-shell .public-stepper {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  min-height: 0;
  margin: 0;
  padding: 16px 12px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .055);
}

body.public-portal .candidate-public-shell .public-stepper::before {
  content: "";
  position: absolute;
  left: 13%;
  right: 13%;
  top: 31px;
  height: 2px;
  border-radius: 999px;
  background: #e5edf5;
}

body.public-portal .candidate-public-shell .public-stepper li {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  min-height: 54px;
  justify-items: center;
  align-content: start;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.public-portal .candidate-public-shell .public-stepper strong {
  width: 31px;
  height: 31px;
  border: 2px solid #fff;
  background: #edf4f8;
  color: #64748b;
  box-shadow: 0 0 0 1px #d7e3ed;
  font-size: 12px;
  font-weight: 850;
}

body.public-portal .candidate-public-shell .public-stepper li.active strong,
body.public-portal .candidate-public-shell .public-stepper li.completed strong {
  background: linear-gradient(135deg, #14b8a6, #0d9488);
  color: #fff;
  box-shadow: 0 8px 18px rgba(13, 148, 136, .2);
}

body.public-portal .candidate-public-shell .public-stepper span {
  color: #526176;
  font-size: 11px;
  line-height: 1.1;
  font-weight: 780;
  text-align: center;
}

body.public-portal .candidate-public-shell .public-stepper li.active span {
  color: #0d9488;
}

body.public-portal .candidate-public-shell .public-intake-card {
  padding: 22px;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(15, 23, 42, .065);
}

body.public-portal .candidate-public-shell .public-intake-card .wizard-step h2 {
  display: none;
}

body.public-portal .candidate-public-shell .public-intake-card .form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px 18px;
}

body.public-portal .candidate-public-shell .public-intake-card .span-2 {
  grid-column: 1 / -1;
}

body.public-portal .candidate-public-shell .public-intake-card label span {
  margin-bottom: 6px;
  color: #334155;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 760;
}

body.public-portal .candidate-public-shell .public-intake-card input,
body.public-portal .candidate-public-shell .public-intake-card select,
body.public-portal .candidate-public-shell .public-intake-card textarea {
  min-height: 44px;
  padding: 10px 13px;
  border: 1px solid #dbe5ee;
  border-radius: 14px;
  background: #fff;
  color: #081b33;
  font-size: 14px;
  font-weight: 520;
  box-shadow: none;
}

body.public-portal .candidate-public-shell .public-intake-card input:focus,
body.public-portal .candidate-public-shell .public-intake-card select:focus,
body.public-portal .candidate-public-shell .public-intake-card textarea:focus {
  outline: 0;
  border-color: #14b8a6;
  box-shadow: 0 0 0 4px rgba(20, 184, 166, .16);
}

body.public-portal .candidate-public-shell .form-tip {
  padding: 9px 11px;
  border: 1px solid #c7eee9;
  border-radius: 13px;
  background: #f0fdfa;
  color: #0f766e;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 650;
}

body.public-portal .candidate-public-shell .wizard-actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  margin-top: 0;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
}

body.public-portal .candidate-public-shell .wizard-actions .button {
  min-height: 46px;
  border-radius: 15px;
  font-size: 14px;
  font-weight: 820;
}

body.public-portal .candidate-public-shell .wizard-actions .button.primary {
  width: 100%;
  gap: 10px;
  border: 0;
  background: linear-gradient(135deg, #14b8a6, #0d9488);
  color: #fff;
  box-shadow: 0 14px 24px rgba(13, 148, 136, .2);
}

@media (max-width: 720px) {
  body.public-portal .public-topbar {
    min-height: 56px;
    padding: 8px 10px;
  }

  body.public-portal .public-topbar .brand-mark {
    width: 28px;
    height: 28px;
  }

  body.public-portal .public-topbar .brand strong {
    font-size: 15px;
  }

  body.public-portal .public-topbar .language-select {
    min-width: 124px;
    min-height: 34px;
    padding: 6px 28px 6px 10px;
    font-size: 12px;
  }

  body.public-portal .public-portal-content {
    width: min(100% - 18px, 920px);
    margin: 14px auto 28px;
  }

  body.public-portal .candidate-public-shell {
    gap: 10px;
  }

  body.public-portal .candidate-public-shell .public-intake-panel h1 {
    font-size: 24px;
  }

  body.public-portal .candidate-public-shell .public-intake-panel p {
    font-size: 12.5px;
    line-height: 1.35;
  }

  body.public-portal .candidate-public-shell .public-agent-card span,
  body.public-portal .candidate-public-shell .public-agent-card strong {
    font-size: 11px;
  }

  body.public-portal .candidate-public-shell .public-stepper {
    padding: 11px 7px 8px;
    border-radius: 16px;
  }

  body.public-portal .candidate-public-shell .public-stepper::before {
    top: 25px;
  }

  body.public-portal .candidate-public-shell .public-stepper li {
    min-height: 45px;
    gap: 4px;
  }

  body.public-portal .candidate-public-shell .public-stepper strong {
    width: 27px;
    height: 27px;
    font-size: 11px;
  }

  body.public-portal .candidate-public-shell .public-stepper span {
    font-size: 9.5px;
  }

  body.public-portal .candidate-public-shell .public-intake-card {
    padding: 13px;
    border-radius: 16px;
  }

  body.public-portal .candidate-public-shell .public-intake-card .form-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body.public-portal .candidate-public-shell .public-intake-card label span {
    margin-bottom: 4px;
    font-size: 10.5px;
  }

  body.public-portal .candidate-public-shell .public-intake-card input,
  body.public-portal .candidate-public-shell .public-intake-card select,
  body.public-portal .candidate-public-shell .public-intake-card textarea {
    min-height: 40px;
    padding: 8px 11px;
    border-radius: 12px;
    font-size: 13px;
  }

  body.public-portal .candidate-public-shell .form-tip {
    padding: 8px 10px;
    border-radius: 12px;
    font-size: 11px;
  }

  body.public-portal .candidate-public-shell .wizard-actions {
    grid-template-columns: 1fr;
    padding-top: 12px;
  }

  body.public-portal .candidate-public-shell .wizard-actions .button {
    width: 100%;
    min-height: 42px;
    border-radius: 13px;
    font-size: 12px;
  }
}

/* Candidate application page - exact clean SaaS direction from client reference. */
.candidate-apply-page {
  --candidate-teal: #0d9488;
  --candidate-teal-2: #14b8a6;
  --candidate-ink: #081b33;
  --candidate-muted: #64748b;
  --candidate-line: #dde7f0;
  --candidate-card: #ffffff;
  display: grid;
  gap: 18px;
  width: min(920px, 100%);
  margin: 0 auto;
}

.candidate-hero {
  display: grid;
  gap: 8px;
}

.candidate-hero h1 {
  margin: 0;
  color: var(--candidate-ink);
  font-size: clamp(31px, 4vw, 44px);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: 0;
}

.candidate-hero p {
  max-width: 670px;
  margin: 0;
  color: var(--candidate-muted);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 520;
}

.candidate-agent-line {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.candidate-agent-line span {
  color: var(--candidate-muted);
  font-weight: 650;
}

.candidate-agent-line strong {
  color: var(--candidate-teal);
  font-weight: 850;
}

.candidate-stepper-card {
  padding: 18px 16px 14px;
  border: 1px solid var(--candidate-line);
  border-radius: 22px;
  background: var(--candidate-card);
  box-shadow: 0 16px 34px rgba(15, 23, 42, .06);
}

.candidate-stepper {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}

.candidate-stepper::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  border-radius: 999px;
  background: #e7eef5;
}

.candidate-stepper li {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 0;
}

.candidate-stepper strong {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #edf4f8;
  color: #64748b;
  box-shadow: 0 0 0 1px #d6e2ec;
  font-size: 13px;
  font-weight: 850;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.candidate-stepper span {
  color: #526176;
  font-size: 12px;
  line-height: 1.1;
  font-weight: 760;
  text-align: center;
}

.candidate-stepper li.active strong,
.candidate-stepper li.completed strong {
  background: linear-gradient(135deg, var(--candidate-teal-2), var(--candidate-teal));
  color: #fff;
  box-shadow: 0 9px 20px rgba(13, 148, 136, .22);
}

.candidate-stepper li.active span {
  color: var(--candidate-teal);
}

.candidate-form-card {
  display: grid;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--candidate-line);
  border-radius: 22px;
  background: var(--candidate-card);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .065);
}

.candidate-form-card .wizard-step {
  display: none;
}

.candidate-form-card .wizard-step.active {
  display: grid;
  animation: candidateStepIn .18s ease;
}

@keyframes candidateStepIn {
  from { opacity: .7; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

.candidate-form-card h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--candidate-line);
  color: var(--candidate-ink);
  font-size: 23px;
  line-height: 1.15;
  font-weight: 900;
}

.candidate-form-card h2::before {
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--candidate-teal);
  box-shadow: 0 0 0 5px #e7f8f6;
  content: "";
}

.candidate-form-card .form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px 18px;
}

.candidate-form-card .span-2 {
  grid-column: 1 / -1;
}

.candidate-form-card label span {
  margin-bottom: 7px;
  color: #26364d;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 780;
}

.candidate-form-card input,
.candidate-form-card select,
.candidate-form-card textarea {
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid #dbe5ee;
  border-radius: 14px;
  background: #fff;
  color: var(--candidate-ink);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .035);
  font-size: 14px;
  font-weight: 520;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.candidate-form-card input:focus,
.candidate-form-card select:focus,
.candidate-form-card textarea:focus {
  outline: 0;
  border-color: var(--candidate-teal-2);
  box-shadow: 0 0 0 4px rgba(20, 184, 166, .15);
}

.candidate-form-card .errorlist {
  margin: 6px 0 0;
  padding: 8px 10px;
  border: 1px solid #fecaca;
  border-radius: 12px;
  background: #fff5f5;
  color: #b42318;
  font-size: 12px;
  font-weight: 650;
  list-style: none;
}

.candidate-form-card .form-tip {
  padding: 10px 12px;
  border: 1px solid #c7eee9;
  border-radius: 14px;
  background: #f0fdfa;
  color: #0f766e;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 650;
}

.candidate-form-card .wizard-actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--candidate-line);
}

.candidate-form-card .button {
  min-height: 48px;
  border-radius: 15px;
  font-size: 14px;
  font-weight: 850;
}

.candidate-form-card .button.primary {
  width: 100%;
  gap: 10px;
  border: 0;
  background: linear-gradient(135deg, var(--candidate-teal-2), var(--candidate-teal));
  color: #fff;
  box-shadow: 0 14px 26px rgba(13, 148, 136, .22);
}

.candidate-form-card .button.primary:hover {
  transform: translateY(-1px);
}

.candidate-form-card .button.ghost {
  background: #fff;
}

.candidate-form-card .button.loading {
  opacity: .8;
  pointer-events: none;
}

@media (max-width: 720px) {
  body.public-portal .public-portal-content {
    width: min(100% - 18px, 920px);
    margin: 14px auto 28px;
  }

  .candidate-apply-page {
    gap: 10px;
  }

  .candidate-hero {
    gap: 4px;
  }

  .candidate-hero h1 {
    font-size: 25px;
  }

  .candidate-hero p {
    font-size: 12.5px;
    line-height: 1.34;
  }

  .candidate-agent-line span,
  .candidate-agent-line strong {
    font-size: 11px;
  }

  .candidate-stepper-card {
    padding: 12px 7px 8px;
    border-radius: 16px;
  }

  .candidate-stepper::before {
    top: 14px;
  }

  .candidate-stepper li {
    gap: 5px;
  }

  .candidate-stepper strong {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }

  .candidate-stepper span {
    font-size: 10px;
  }

  .candidate-form-card {
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
  }

  .candidate-form-card h2 {
    margin-bottom: 2px;
    padding-bottom: 10px;
    font-size: 19px;
  }

  .candidate-form-card .form-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .candidate-form-card label span {
    margin-bottom: 4px;
    font-size: 10.5px;
  }

  .candidate-form-card input,
  .candidate-form-card select,
  .candidate-form-card textarea {
    min-height: 40px;
    padding: 8px 11px;
    border-radius: 12px;
    font-size: 13px;
  }

  .candidate-form-card .form-tip {
    padding: 8px 10px;
    border-radius: 12px;
    font-size: 11px;
  }

  .candidate-form-card .wizard-actions {
    grid-template-columns: 1fr;
    padding-top: 12px;
  }

  .candidate-form-card .button {
    width: 100%;
    min-height: 42px;
    border-radius: 13px;
    font-size: 12px;
  }
}

/* Final compact CRM pass: denser admin/agent UI for desktop, mobile and TV widths. */
.authenticated-shell {
  font-size: 14px;
}

.authenticated-shell .topbar {
  min-height: 60px;
  padding: 8px 18px;
}

.authenticated-shell .brand {
  gap: 10px;
}

.authenticated-shell .brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 9px;
}

.authenticated-shell .brand strong {
  font-size: 18px;
  line-height: 1;
}

.authenticated-shell .brand small {
  font-size: 11px;
}

.app-shell {
  grid-template-columns: 218px minmax(0, 1fr);
  min-height: calc(100vh - 60px);
}

.sidebar {
  top: 60px;
  height: calc(100vh - 60px);
  padding: 12px 10px;
}

.sidebar a.nav-link,
.drawer-logout.nav-link {
  min-height: 34px;
  gap: 9px;
  padding: 8px 10px;
  margin-bottom: 4px;
  border-radius: 7px;
  font-size: 12px;
  line-height: 1.15;
}

.nav-icon {
  width: 17px;
  height: 17px;
}

.content,
.authenticated-shell .content {
  padding: 16px;
}

.page-heading,
.module-heading {
  margin-bottom: 12px;
}

.page-heading h1,
.module-heading h1 {
  margin-bottom: 4px;
  font-size: 22px;
  line-height: 1.08;
}

.page-heading p,
.module-heading p,
.muted {
  font-size: 12.5px;
  line-height: 1.35;
}

.module-actions {
  gap: 7px;
}

.card,
.premium-panel,
.resource-card,
.premium-resource-card,
.procedure-card {
  padding: 14px;
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .05);
}

.card h2,
.compact-card h2,
.resource-card h2,
.procedure-card h2 {
  margin-bottom: 9px;
  font-size: 16px;
  line-height: 1.15;
}

.button {
  min-height: 34px;
  padding: 0 11px;
  border-radius: 7px;
  font-size: 12px;
  box-shadow: none;
}

.button.mini {
  min-height: 28px;
  padding: 0 8px;
  font-size: 10.5px;
}

label span {
  margin-bottom: 4px;
  font-size: 11px;
  line-height: 1.2;
}

.form-control,
.form-select,
input,
select,
textarea {
  min-height: 36px;
  padding: 7px 9px;
  border-radius: 7px;
  font-size: 13px;
}

textarea {
  min-height: 72px;
}

.form-card,
.procedure-form,
.case-create-form,
.wizard-form {
  gap: 10px;
}

.form-grid,
.procedure-form-grid,
.filter-grid {
  gap: 9px 10px;
}

.check-inline {
  min-height: 36px;
  gap: 7px;
}

.metrics,
.premium-metrics {
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  gap: 9px;
  margin-bottom: 12px;
}

.metric,
.premium-metrics .metric {
  min-height: 78px;
  gap: 6px;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 7px 16px rgba(23, 38, 67, .05);
}

a.metric {
  color: inherit;
  text-decoration: none;
}

a.metric:hover,
a.metric:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(23, 38, 67, .1);
}

a.metric:focus-visible {
  outline: 2px solid var(--app-blue);
  outline-offset: 2px;
}

.metric-icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
}

.metric-icon::before {
  width: 17px;
  height: 17px;
}

.metric strong {
  font-size: 20px;
  line-height: 1;
}

.metric span,
.metric span:last-child {
  font-size: 11px;
  line-height: 1.12;
}

.dashboard-grid,
.dashboard-main,
.dashboard-side,
.dashboard-row,
.agent-workspace-grid,
.procedure-layout,
.panel-layout,
.resource-grid,
.procedure-list {
  gap: 10px;
}

.dashboard-grid {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
}

.dashboard-row {
  grid-template-columns: minmax(0, 1fr) minmax(240px, .65fr);
}

.admin-dashboard .dashboard-side {
  gap: 9px;
}

.quick-actions {
  gap: 7px;
}

.quick-action {
  min-height: 44px;
  gap: 8px;
  padding: 8px 9px;
  border-radius: 7px;
  font-size: 12px;
  line-height: 1.16;
  box-shadow: none;
}

.action-icon {
  width: 28px;
  height: 28px;
}

.action-icon::before {
  width: 15px;
  height: 15px;
}

.compact-list {
  gap: 6px;
  margin-bottom: 10px;
}

.compact-list div,
.check-list div {
  padding: 7px 8px;
  border-radius: 7px;
}

.compact-list strong,
.compact-list span {
  font-size: 12px;
  line-height: 1.2;
}

.card-heading {
  gap: 8px;
  margin-bottom: 9px;
}

.table-wrap {
  border-radius: 8px;
}

table {
  min-width: 680px;
}

th,
td,
.comfortable-table th,
.comfortable-table td {
  padding: 8px 9px;
  font-size: 12px;
}

th {
  font-size: 10px;
}

.status {
  padding: 3px 7px;
  font-size: 10px;
  line-height: 1.1;
}

dl {
  grid-template-columns: minmax(82px, 108px) minmax(0, 1fr);
  gap: 5px 8px;
}

dt {
  font-size: 11px;
  line-height: 1.2;
}

dd {
  font-size: 12px;
  line-height: 1.2;
}

.copy-line {
  gap: 7px;
  margin-bottom: 10px;
}

.copy-link,
.copy-link.slim {
  padding: 7px 8px;
  border-radius: 7px;
  font-size: 11px;
}

.procedure-layout {
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
}

.procedure-form-card {
  top: 72px;
  padding: 14px;
}

.procedure-card {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 12px;
}

.procedure-card-main {
  grid-template-columns: minmax(0, 1fr) minmax(190px, 260px);
  gap: 10px;
}

.procedure-card h2 {
  margin: 4px 0 3px;
  font-size: 17px;
  overflow-wrap: anywhere;
}

.procedure-card p {
  font-size: 12px;
  line-height: 1.25;
}

.procedure-actions {
  gap: 6px;
}

.promo-admin-layout {
  grid-template-columns: minmax(280px, 350px) minmax(0, 1fr);
}

.promo-admin-layout .procedure-form-card,
.promo-admin-layout .procedure-form,
.promo-admin-layout .procedure-form-grid,
.promo-admin-layout .procedure-form label,
.promo-admin-layout .procedure-form input,
.promo-admin-layout .procedure-form select,
.promo-admin-layout .procedure-form textarea {
  min-width: 0;
  max-width: 100%;
}

.promo-admin-layout .procedure-form-card {
  overflow: hidden;
}

.promo-admin-layout .procedure-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.promo-admin-layout .procedure-form > label {
  display: block;
}

.promo-code-list {
  gap: 8px;
}

.promo-code-card {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.promo-code-card .procedure-card-main {
  grid-template-columns: minmax(180px, .8fr) minmax(0, 1.2fr);
  align-items: start;
}

.promo-code-card .procedure-actions {
  justify-content: flex-end;
  min-width: 0;
  width: 100%;
}

.promo-code-main h2 {
  max-width: 100%;
  font-size: 20px;
  letter-spacing: 0;
}

.promo-code-card .promo-code-stats {
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
  gap: 8px 12px;
  padding: 0;
}

.promo-code-card .promo-stat {
  display: grid;
  align-content: start;
  gap: 3px;
  min-width: 0;
}

.promo-code-card .promo-code-stats dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.15;
  text-transform: uppercase;
}

.promo-code-card .promo-code-stats dd {
  font-size: 12.5px;
  font-weight: 850;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

@media (min-width: 1600px) {
  .content,
  .authenticated-shell .content {
    padding: 18px 22px;
  }

  .metrics,
  .premium-metrics {
    grid-template-columns: repeat(6, minmax(132px, 1fr));
  }

  .metric,
  .premium-metrics .metric {
    min-height: 84px;
  }

  .dashboard-grid {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  }
}

@media (max-width: 1180px) {
  .promo-admin-layout,
  .procedure-layout,
  .panel-layout {
    grid-template-columns: 1fr;
  }

  .procedure-form-card {
    position: static;
  }
}

@media (max-width: 760px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .authenticated-shell .topbar {
    min-height: 52px;
    padding: 7px 10px;
  }

  .content,
  .authenticated-shell .content {
    padding: 10px 8px 18px;
  }

  .page-heading,
  .module-heading {
    margin: 0 4px 9px;
  }

  .page-heading h1,
  .module-heading h1 {
    font-size: 19px;
  }

  .page-heading p,
  .module-heading p {
    font-size: 11.5px;
  }

  .card,
  .premium-panel,
  .resource-card,
  .premium-resource-card,
  .procedure-card {
    padding: 9px;
    box-shadow: 0 4px 10px rgba(15, 23, 42, .045);
  }

  .metrics,
  .premium-metrics,
  .agent-metrics,
  .authenticated-shell .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    gap: 7px;
    margin: 0 0 9px;
    padding: 0;
    overflow: visible;
    mask-image: none;
  }

  .metric,
  .premium-metrics .metric,
  .agent-metrics .metric,
  .authenticated-shell .metrics .metric {
    min-height: 64px;
    padding: 8px;
  }

  .metric-icon {
    width: 24px;
    height: 24px;
  }

  .metric-icon::before {
    width: 14px;
    height: 14px;
  }

  .metric strong {
    font-size: 17px;
  }

  .metric span,
  .metric span:last-child {
    font-size: 9.5px;
  }

  .dashboard-grid,
  .dashboard-row,
  .agent-workspace-grid,
  .admin-dashboard .dashboard-side,
  .procedure-card,
  .procedure-card-main,
  .resource-grid,
  .resource-main,
  .promo-code-card,
  .promo-code-card .procedure-card-main {
    grid-template-columns: 1fr;
  }

  .dashboard-grid,
  .dashboard-main,
  .dashboard-side,
  .dashboard-row,
  .procedure-layout,
  .procedure-list,
  .resource-grid {
    gap: 7px;
  }

  .module-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 6px;
  }

  .module-actions .button,
  .procedure-actions .button,
  .procedure-actions form {
    width: 100%;
  }

  .procedure-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .promo-code-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .promo-code-stats dt {
    grid-row: auto;
  }

  .promo-code-stats dd {
    grid-row: auto;
    margin-bottom: 4px;
  }

  .form-grid,
  .procedure-form-grid,
  .filter-grid {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .button {
    min-height: 32px;
    font-size: 11.5px;
  }

  .form-control,
  .form-select,
  input,
  select,
  textarea {
    min-height: 34px;
    padding: 7px 8px;
    font-size: 12.5px;
  }

  .table-wrap,
  .crm-table-wrap {
    overflow-x: auto;
  }

  .crm-table td,
  .comfortable-table td,
  .table-wrap td {
    font-size: 11.5px;
  }
}

@media (max-width: 380px) {
  .metrics,
  .premium-metrics,
  .agent-metrics {
    grid-template-columns: 1fr;
  }

  .module-actions,
  .procedure-actions,
  .promo-code-stats {
    grid-template-columns: 1fr;
  }
}

/* Long forms: keep professional two-column density whenever space allows. */
.form-card .form-grid,
.case-create-form .form-grid,
.settings-form .form-grid,
.procedure-form-grid,
.promo-admin-layout .procedure-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
}

.form-card .form-grid > h2,
.case-create-form .form-section-title,
.case-create-form .span-2,
.settings-form .span-2,
.procedure-form > label,
.procedure-form .form-actions,
.form-card .form-actions,
.case-create-form .form-actions {
  grid-column: 1 / -1;
}

.case-create-form {
  gap: 12px;
}

.case-create-form .form-section-title {
  padding-top: 8px;
}

.case-create-form .form-section-title h2 {
  margin-bottom: 3px;
  font-size: 15px;
}

.case-create-form .form-section-title p {
  margin: 0;
  font-size: 11.5px;
}

.form-card > .form-grid,
.case-create-form > .form-grid {
  align-items: start;
}

.form-card label,
.case-create-form label,
.procedure-form label {
  min-width: 0;
}

.form-card .errorlist,
.case-create-form .errorlist,
.procedure-form .errorlist {
  margin: 4px 0 0;
  padding-left: 16px;
  font-size: 11px;
}

@media (min-width: 980px) {
  .panel-layout > .form-card,
  .settings-layout > .settings-form {
    max-width: none;
  }

  .case-create-form {
    max-width: 1180px;
  }

  .case-create-form .form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .case-create-form .span-2 {
    grid-column: span 2;
  }

  .case-create-form .form-section-title,
  .case-create-form .form-actions {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1280px) {
  .procedure-layout,
  .promo-admin-layout {
    grid-template-columns: minmax(330px, 390px) minmax(0, 1fr);
  }

  .procedure-form-card {
    max-height: calc(100vh - 92px);
    overflow: auto;
  }
}

@media (max-width: 760px) {
  .form-card .form-grid,
  .case-create-form .form-grid,
  .settings-form .form-grid,
  .procedure-form-grid,
  .promo-admin-layout .procedure-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .form-card .form-grid > label:has(textarea),
  .settings-form .span-2,
  .case-create-form .span-2,
  .procedure-form > label {
    grid-column: 1 / -1;
  }
}

@media (max-width: 420px) {
  .form-card .form-grid,
  .settings-form .form-grid {
    grid-template-columns: 1fr;
  }

  .case-create-form .form-grid,
  .procedure-form-grid,
  .promo-admin-layout .procedure-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-create-form .span-2,
  .procedure-form > label {
    grid-column: 1 / -1;
  }
}

/* Agent dashboard: same compact operating rhythm as admin. */
.agent-dashboard {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
}

.agent-dashboard .dashboard-main,
.agent-dashboard-side {
  gap: 9px;
}

.agent-recent-panel {
  overflow: hidden;
}

.agent-recent-panel .table-wrap table {
  min-width: 680px;
}

.agent-dashboard-row {
  grid-template-columns: minmax(0, 1fr) minmax(240px, .65fr);
}

.agent-dashboard-side .quick-actions {
  grid-template-columns: 1fr;
}

.agent-dashboard-side .quick-action {
  min-height: 40px;
}

.agent-dashboard-side .compact-card {
  padding: 12px;
}

.agent-link-panel .copy-line,
.agent-promo-panel .copy-line {
  margin-bottom: 8px;
}

.agent-link-panel .qr-panel {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin: 0;
}

.agent-link-panel .qr-code {
  width: 64px;
  height: 64px;
  padding: 5px;
  border-radius: 7px;
}

.agent-promo-panel dl {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 8px;
}

.agent-promo-panel dt {
  grid-row: 1;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 850;
  text-transform: uppercase;
}

.agent-promo-panel dd {
  grid-row: 2;
  font-size: 12px;
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .menu-toggle {
    display: grid;
  }

  .authenticated-shell .global-search {
    display: none;
  }

  .content,
  .authenticated-shell .content {
    grid-column: 1;
  }

  .promo-code-card,
  .promo-code-card .procedure-card-main,
  .resource-card,
  .resource-main {
    grid-template-columns: 1fr;
  }

  .promo-code-stats,
  .agent-promo-panel dl {
    grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
    gap: 7px 10px;
  }

  .promo-code-stats dt,
  .promo-code-stats dd,
  .agent-promo-panel dt,
  .agent-promo-panel dd {
    grid-row: auto;
    min-width: 0;
  }

  .promo-code-stats dt,
  .agent-promo-panel dt {
    font-size: 10px;
    line-height: 1.2;
  }

  .promo-code-stats dd,
  .agent-promo-panel dd {
    font-size: 13px;
    line-height: 1.25;
  }

  .procedure-actions {
    flex-wrap: wrap;
  }
}

@media (max-width: 980px) {
  .agent-dashboard {
    grid-template-columns: 1fr;
  }

  .agent-dashboard-side {
    order: -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .agent-dashboard-side .action-card,
  .agent-dashboard-side .agent-link-panel {
    grid-column: 1 / -1;
  }

  .agent-dashboard-side .quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .agent-dashboard-side,
  .agent-dashboard-row {
    grid-template-columns: 1fr;
  }

  .agent-dashboard-side {
    order: 0;
  }

  .agent-dashboard-side .quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .agent-link-panel .qr-panel {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .agent-link-panel .qr-code {
    width: 56px;
    height: 56px;
  }
}

/* Public showcase: full-bleed animated hero background for the vitrine site. */
.public-portal .showcase-main {
  overflow: visible;
}

.public-portal .mg-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  width: 100vw;
  min-height: clamp(590px, 76vh, 780px);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 30px;
  padding: clamp(78px, 10vh, 120px) max(32px, calc((100vw - 1200px) / 2)) clamp(56px, 8vh, 92px);
  overflow: hidden;
  isolation: isolate;
  background: #071f3d;
}

.public-portal .mg-hero::before,
.public-portal .mg-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.public-portal .mg-hero::before {
  background:
    linear-gradient(90deg, rgba(3, 19, 35, .9) 0%, rgba(3, 19, 35, .76) 30%, rgba(3, 19, 35, .34) 58%, rgba(3, 19, 35, .08) 100%),
    linear-gradient(0deg, rgba(3, 19, 35, .3), rgba(3, 19, 35, .04) 48%, rgba(3, 19, 35, .2));
}

.public-portal .mg-hero::after {
  top: auto;
  height: 36%;
  background: linear-gradient(0deg, rgba(3, 19, 35, .62), rgba(3, 19, 35, 0));
}

.mg-hero-showcase-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: #071f3d;
}

.mg-hero-slide {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  filter: saturate(1.08) contrast(1.04);
  opacity: 0;
  transform: scale(1.04);
  animation: mgHeroFade 6s infinite;
}

.mg-hero-slide:nth-child(2) {
  animation-delay: 2s;
}

.mg-hero-slide:nth-child(3) {
  animation-delay: 4s;
}

.public-portal .mg-hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: start;
  max-width: 780px;
  color: #fff;
}

.public-portal .mg-hero-copy h1 {
  max-width: 760px;
  margin: 0 0 20px;
  color: #fff;
  font-size: clamp(46px, 5.2vw, 78px);
  line-height: 1.02;
  text-shadow: 0 18px 44px rgba(0, 0, 0, .34);
}

.public-portal .mg-hero-copy h1 em {
  color: #26e3c5;
  font-style: normal;
}

.public-portal .mg-hero-copy h1 .desktop-title,
.public-portal .mg-hero-copy h1 .mobile-title {
  color: inherit;
}

.public-portal .mg-hero-copy h1 .mobile-title {
  display: none;
}

.public-portal .mg-hero-copy p {
  max-width: 610px;
  color: rgba(255, 255, 255, .86);
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.58;
  text-shadow: 0 10px 28px rgba(0, 0, 0, .3);
}

.public-portal .mg-hero .mg-actions {
  margin-top: 28px;
}

.public-portal .mg-hero .mg-button.primary {
  border-color: #20d6bd;
  background: #00a99d;
  color: #fff;
  box-shadow: 0 18px 42px rgba(0, 169, 157, .28);
}

.public-portal .mg-hero .mg-button.secondary {
  border-color: rgba(255, 255, 255, .48);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .14);
  backdrop-filter: blur(10px);
}

.public-portal .mg-hero-points {
  position: relative;
  display: block;
  width: min(1080px, calc(100vw - 240px));
  max-width: none;
  margin-top: 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .12);
  backdrop-filter: blur(10px);
  mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}

.public-portal .mg-hero-points-track {
  display: flex;
  width: max-content;
  gap: 10px;
  padding: 9px 10px;
  animation: mgHeroTicker 26s linear infinite;
}

.public-portal .mg-hero-points span {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 7px 18px 7px 34px;
  border: 0;
  border-radius: 999px;
  background: rgba(3, 19, 35, .28);
  color: rgba(255, 255, 255, .92);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none;
  backdrop-filter: none;
}

.public-portal .mg-hero-points span::before {
  left: 13px;
  top: 50%;
  width: 9px;
  height: 9px;
  transform: translateY(-50%);
  background: #26e3c5;
  border: 0;
  box-shadow: 0 0 0 5px rgba(38, 227, 197, .14);
}

.public-portal .mg-success-card {
  position: static;
  grid-template-columns: 48px 1fr;
  max-width: 310px;
  margin-top: 24px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .13);
  color: #fff;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .18);
  backdrop-filter: blur(12px);
}

.public-portal .mg-success-card::before {
  width: 48px;
  height: 48px;
  background: #00a99d;
}

.public-portal .mg-success-card strong {
  color: #fff;
  font-size: 20px;
}

.public-portal .mg-success-card span {
  color: rgba(255, 255, 255, .86);
}

@keyframes mgHeroFade {
  0%,
  100% {
    opacity: 0;
    transform: scale(1.04);
  }
  7%,
  31% {
    opacity: 1;
  }
  40% {
    opacity: 0;
    transform: scale(1.08);
  }
}

@keyframes mgHeroTicker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mg-hero-slide {
    animation: none;
  }

  .mg-hero-slide:first-child {
    opacity: 1;
    transform: none;
  }

  .public-portal .mg-hero-points-track {
    animation: none;
  }
}

@media (max-width: 1180px) {
  .public-portal .mg-hero {
    padding-inline: 32px;
  }

  .public-portal .mg-hero-copy {
    text-align: left;
  }

  .public-portal .mg-hero-copy h1,
  .public-portal .mg-hero-copy p,
  .public-portal .mg-hero-points {
    margin-left: 0;
    margin-right: 0;
  }

  .public-portal .mg-hero .mg-actions {
    justify-content: flex-start;
  }

  .public-portal .mg-hero-points {
    width: min(760px, calc(100vw - 64px));
  }
}

@media (max-width: 860px) {
  .public-portal .mg-hero {
    min-height: 660px;
    padding: 72px 24px 44px;
  }

  .public-portal .mg-hero::before {
    background:
      linear-gradient(90deg, rgba(3, 19, 35, .86) 0%, rgba(3, 19, 35, .66) 48%, rgba(3, 19, 35, .18) 100%),
      linear-gradient(0deg, rgba(3, 19, 35, .34), rgba(3, 19, 35, .02));
  }

  .public-portal .mg-hero-copy {
    max-width: 620px;
  }

  .public-portal .mg-hero .mg-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: min(100%, 560px);
  }
}

@media (max-width: 1024px) {
  body.public-portal .mg-assist-layer {
    display: none;
  }
}

@media (max-width: 560px) {
  .public-portal .mg-hero {
    display: grid;
    min-height: 640px;
    margin-bottom: 22px;
    padding: 70px 12px 34px;
    overflow: hidden;
  }

  .public-portal .mg-hero::before {
    background:
      linear-gradient(90deg, rgba(3, 19, 35, .88), rgba(3, 19, 35, .62) 58%, rgba(3, 19, 35, .2)),
      linear-gradient(0deg, rgba(3, 19, 35, .34), rgba(3, 19, 35, 0));
  }

  .public-portal .mg-hero-slide {
    background-position: 64% center;
  }

  .public-portal .mg-hero-copy {
    width: 100%;
    max-width: none;
  }

  .public-portal .mg-hero-copy h1 {
    max-width: 100%;
    margin-bottom: 14px;
    font-size: clamp(34px, 10vw, 44px);
    line-height: 1.04;
  }

  .public-portal .mg-hero-copy p {
    max-width: 94%;
    margin-top: 0;
    font-size: 15px;
    line-height: 1.48;
  }

  .public-portal .mg-hero .mg-actions {
    grid-template-columns: 1fr;
    width: 100%;
    margin-top: 20px;
  }

  .public-portal .mg-hero .mg-button {
    min-height: 50px;
    font-size: 13px;
  }

  .public-portal .mg-hero-points {
    width: 100%;
    margin-top: 16px;
  }

  .public-portal .mg-hero-points span {
    min-height: 28px;
    padding: 7px 16px 7px 32px;
    font-size: 11.5px;
  }

.public-portal .mg-success-card {
    display: grid;
    max-width: 100%;
    margin-top: 16px;
    padding: 13px 14px;
    border-radius: 10px;
  }
}

/* Public hero carousel: each image carries its own message. */
.public-portal .mg-hero {
  min-height: clamp(620px, 78vh, 820px);
  padding: 0;
  background: #071f3d;
}

.public-portal .mg-hero::before,
.public-portal .mg-hero::after {
  display: none;
}

.public-portal .mg-hero-carousel {
  position: relative;
  width: 100%;
  min-height: inherit;
  overflow: hidden;
  isolation: isolate;
}

.public-portal .mg-hero-mobile-actions {
  display: none;
}

.public-portal .mg-hero-frame {
  position: absolute;
  inset: 0;
  display: grid;
  align-items: center;
  padding: clamp(84px, 10vh, 118px) max(40px, calc((100vw - 1200px) / 2)) clamp(70px, 9vh, 104px);
  opacity: 0;
  pointer-events: none;
  animation: mgHeroFrame 6s infinite;
}

.public-portal .mg-hero-frame.is-second {
  animation-delay: 2s;
}

.public-portal .mg-hero-frame.is-third {
  animation-delay: 4s;
}

.public-portal .mg-hero-frame-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-position: center;
  background-size: cover;
  filter: saturate(1.08) contrast(1.04);
  transform: scale(1.03);
  animation: mgHeroImage 6s infinite;
}

.public-portal .mg-hero-frame.is-second .mg-hero-frame-bg {
  animation-delay: 2s;
}

.public-portal .mg-hero-frame.is-third .mg-hero-frame-bg {
  animation-delay: 4s;
}

.public-portal .mg-hero-frame::before,
.public-portal .mg-hero-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.public-portal .mg-hero-frame::before {
  background:
    linear-gradient(90deg, rgba(3, 19, 35, .9) 0%, rgba(3, 19, 35, .74) 36%, rgba(3, 19, 35, .28) 67%, rgba(3, 19, 35, .08) 100%),
    linear-gradient(0deg, rgba(3, 19, 35, .34), rgba(3, 19, 35, .04) 54%, rgba(3, 19, 35, .18));
}

.public-portal .mg-hero-frame::after {
  top: auto;
  height: 34%;
  background: linear-gradient(0deg, rgba(3, 19, 35, .62), rgba(3, 19, 35, 0));
}

.public-portal .mg-hero-frame .mg-hero-copy {
  max-width: 760px;
}

.public-portal .mg-hero-badge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  margin-bottom: 20px;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(0, 169, 157, .82);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .18);
  backdrop-filter: blur(10px);
}

.public-portal .mg-hero-badge::before {
  content: "";
  width: 9px;
  height: 9px;
  margin-right: 10px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .18);
}

.public-portal .mg-hero-frame .mg-hero-copy h1 {
  max-width: 720px;
  margin-bottom: 20px;
  font-size: clamp(46px, 5vw, 76px);
}

.public-portal .mg-hero-frame .mg-hero-copy p {
  max-width: 590px;
}

.public-portal .mg-hero-frame .mg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.public-portal .mg-hero-dots {
  position: absolute;
  left: 50%;
  bottom: 38px;
  z-index: 3;
  display: flex;
  gap: 12px;
  transform: translateX(-50%);
}

.public-portal .mg-hero-dots span {
  width: 11px;
  height: 11px;
  border: 2px solid rgba(255, 255, 255, .78);
  border-radius: 999px;
  background: transparent;
  animation: mgHeroDot 6s infinite;
}

.public-portal .mg-hero-dots span:nth-child(2) {
  animation-delay: 2s;
}

.public-portal .mg-hero-dots span:nth-child(3) {
  animation-delay: 4s;
}

@keyframes mgHeroFrame {
  0%,
  34% {
    opacity: 1;
    pointer-events: auto;
  }
  40%,
  100% {
    opacity: 0;
    pointer-events: none;
  }
}

@keyframes mgHeroImage {
  0%,
  100% {
    transform: scale(1.03);
  }
  39% {
    transform: scale(1.08);
  }
}

@keyframes mgHeroDot {
  0%,
  34% {
    background: #26e3c5;
    border-color: #26e3c5;
    transform: scale(1.08);
  }
  40%,
  100% {
    background: transparent;
    border-color: rgba(255, 255, 255, .72);
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-portal .mg-hero-frame,
  .public-portal .mg-hero-frame-bg,
  .public-portal .mg-hero-dots span {
    animation: none;
  }

  .public-portal .mg-hero-frame.is-first {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (min-width: 1440px) {
  .public-portal .mg-hero-frame {
    padding-inline: max(72px, calc((100vw - 1320px) / 2));
  }

  .public-portal .mg-hero-frame .mg-hero-copy {
    max-width: 840px;
  }

  .public-portal .mg-hero-frame .mg-hero-copy h1 {
    max-width: 800px;
    font-size: clamp(62px, 4.8vw, 92px);
  }
}

@media (max-width: 860px) {
  .public-portal .mg-hero {
    min-height: 690px;
  }

  .public-portal .mg-hero-frame {
    align-items: end;
    padding: 78px 22px 96px;
  }

  .public-portal .mg-hero-frame::before {
    background:
      linear-gradient(180deg, rgba(3, 19, 35, .08) 0%, rgba(3, 19, 35, .2) 26%, rgba(3, 19, 35, .78) 75%, rgba(3, 19, 35, .92) 100%),
      linear-gradient(90deg, rgba(3, 19, 35, .36), rgba(3, 19, 35, .04) 58%);
  }

  .public-portal .mg-hero-frame-bg {
    background-position: center top;
  }

  .public-portal .mg-hero-frame .mg-hero-copy {
    width: 100%;
    max-width: 650px;
  }

  .public-portal .mg-hero-frame .mg-hero-copy h1 {
    max-width: 620px;
    font-size: clamp(38px, 8vw, 58px);
  }

  .public-portal .mg-hero-frame .mg-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: min(100%, 620px);
  }
}

@media (max-width: 560px) {
  .public-portal .mg-hero {
    display: block;
    min-height: 0;
    margin-bottom: 26px;
    background: #fff;
  }

  .public-portal .mg-hero-carousel {
    min-height: clamp(360px, 48vh, 430px);
  }

  .public-portal .mg-hero-frame {
    align-items: start;
    padding: 58px 12px 54px;
  }

  .public-portal .mg-hero-frame-bg {
    background-position: 58% center;
  }

  .public-portal .mg-hero-frame::before {
    background:
      linear-gradient(180deg, rgba(3, 19, 35, .76) 0%, rgba(3, 19, 35, .58) 42%, rgba(3, 19, 35, .22) 78%, rgba(3, 19, 35, .55) 100%),
      linear-gradient(90deg, rgba(3, 19, 35, .42), rgba(3, 19, 35, .02) 70%);
  }

  .public-portal .mg-hero-badge {
    min-height: 30px;
    margin-bottom: 14px;
    padding: 7px 14px;
    font-size: 10.5px;
  }

  .public-portal .mg-hero-frame .mg-hero-copy h1 {
    max-width: 96%;
    margin-bottom: 10px;
    font-size: clamp(25px, 7.2vw, 31px);
    line-height: 1.12;
  }

  .public-portal .mg-hero-copy h1 .desktop-title {
    display: none;
  }

  .public-portal .mg-hero-copy h1 .mobile-title {
    display: inline-block;
  }

  .public-portal .mg-hero-frame .mg-hero-copy p {
    max-width: 96%;
    font-size: 14px;
    line-height: 1.42;
  }

  .public-portal .mg-hero-frame .mg-actions {
    display: none;
  }

  .public-portal .mg-hero-dots {
    bottom: 20px;
  }

  .public-portal .mg-hero-mobile-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 14px 12px 18px;
    background: #fff;
  }

  .public-portal .mg-hero-mobile-actions .mg-button {
    width: 100%;
    min-height: 58px;
    padding: 12px 10px;
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.15;
    text-align: center;
  }

  .public-portal .mg-hero-mobile-actions .mg-button.primary {
    border-color: #00a99d;
    background: #00a99d;
    color: #fff;
  }

  .public-portal .mg-hero-mobile-actions .mg-button.secondary {
    border-color: rgba(0, 169, 157, .62);
    background: #fff;
    color: #008b84;
    box-shadow: none;
    backdrop-filter: none;
  }
}

/* Tighten the public header-to-hero rhythm. */
.public-portal .showcase-header {
  width: min(1280px, calc(100% - 40px));
  min-height: 54px;
  padding-block: 6px;
  gap: 18px;
}

.public-portal .showcase-brand img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

.public-portal .showcase-brand strong {
  font-size: 18px;
}

.public-portal .showcase-brand small {
  margin-top: 2px;
  font-size: 9px;
}

.public-portal .showcase-nav {
  gap: clamp(12px, 2vw, 30px);
}

.public-portal .showcase-nav a {
  font-size: 12px;
}

.public-portal .showcase-actions .mg-button {
  min-height: 38px;
  padding-inline: 14px;
  font-size: 12px;
}

.public-portal .mg-hero-frame {
  padding-top: clamp(60px, 8vh, 88px);
}

.public-portal .mg-hero-badge {
  min-height: 30px;
  margin-bottom: 16px;
  padding: 7px 15px;
  font-size: 11px;
}

.public-portal .mg-hero-frame .mg-hero-copy h1 {
  max-width: 720px;
  margin-bottom: 14px;
  font-size: clamp(48px, 5vw, 74px);
  line-height: 1.04;
}

.public-portal .mg-hero-frame .mg-hero-copy p {
  max-width: 600px;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.48;
}

.public-portal .mg-hero-frame .mg-actions {
  margin-top: 24px;
}

.public-portal .mg-hero-frame .mg-button {
  min-height: 44px;
  padding-inline: 18px;
  font-size: 13px;
}

@media (min-width: 861px) {
  .public-portal .mg-hero {
    min-height: clamp(500px, calc(100vh - 54px), 620px);
  }

  .public-portal .mg-hero-frame {
    align-items: center;
    padding-top: clamp(34px, 6vh, 62px);
    padding-bottom: clamp(54px, 8vh, 82px);
  }

  .public-portal .mg-hero-frame .mg-actions {
    margin-top: 20px;
  }
}

@media (min-width: 861px) and (max-height: 700px) {
  .public-portal .mg-hero {
    min-height: calc(100vh - 54px);
  }

  .public-portal .mg-hero-frame .mg-hero-copy h1 {
    font-size: clamp(42px, 4.4vw, 62px);
  }

  .public-portal .mg-hero-frame .mg-hero-copy p {
    font-size: 16px;
  }

  .public-portal .mg-hero-badge {
    margin-bottom: 12px;
  }

  .public-portal .mg-hero-frame .mg-actions {
    margin-top: 18px;
  }
}

/* Reference-inspired hero: brighter professional travel imagery and slower carousel. */
.public-portal .mg-hero {
  background: #f7fbfd;
}

.public-portal .mg-hero-frame,
.public-portal .mg-hero-frame-bg,
.public-portal .mg-hero-dots span {
  animation-duration: 49s;
  animation-delay: var(--slide-delay, 0s) !important;
  animation-timing-function: ease-in-out;
}

.public-portal .mg-hero-frame-bg {
  animation-name: mgHeroImageSoft;
  filter: saturate(1.06) contrast(1.02);
}

.public-portal .mg-hero-frame.is-first {
  color: #061d39;
}

.public-portal .mg-hero-frame.is-first .mg-hero-frame-bg {
  background-position: 68% center;
  filter: saturate(1.04) contrast(1.02);
}

.public-portal .mg-hero-frame.is-first::before {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .86) 30%, rgba(255, 255, 255, .42) 52%, rgba(255, 255, 255, .08) 74%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(0deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, .02) 58%, rgba(255, 255, 255, .28));
}

.public-portal .mg-hero-frame.is-first::after {
  height: 38%;
  background: linear-gradient(0deg, rgba(247, 251, 253, .9), rgba(247, 251, 253, 0));
}

.public-portal .mg-hero-frame.is-first .mg-hero-copy {
  color: #061d39;
}

.public-portal .mg-hero-frame.is-first .mg-hero-badge {
  display: none;
}

.public-portal .mg-hero-frame.is-first .mg-hero-copy h1 {
  max-width: 640px;
  color: #061d39;
  text-shadow: none;
}

.public-portal .mg-hero-frame.is-first .mg-hero-copy p {
  max-width: 520px;
  color: #42526a;
  text-shadow: none;
}

.public-portal .mg-hero-frame.is-first .mg-button.primary {
  border-color: #00998f;
  background: #00998f;
  color: #fff;
  box-shadow: 0 16px 34px rgba(0, 153, 143, .22);
}

.public-portal .mg-hero-frame.is-first .mg-button.secondary {
  border-color: rgba(0, 127, 122, .34);
  background: rgba(255, 255, 255, .86);
  color: #007f7a;
  box-shadow: 0 14px 30px rgba(6, 29, 57, .08);
  backdrop-filter: blur(10px);
}

.public-portal .mg-hero-dots {
  display: none;
}

.public-portal .mg-hero-dots span {
  width: 9px;
  height: 9px;
  border-color: rgba(6, 29, 57, .34);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .44);
}

@keyframes mgHeroFrame {
  0%,
  13.2% {
    opacity: 1;
    pointer-events: auto;
  }
  15.3%,
  100% {
    opacity: 0;
    pointer-events: none;
  }
}

@keyframes mgHeroImageSoft {
  0%,
  100% {
    transform: scale(1.015);
  }
  13.2% {
    transform: scale(1.045);
  }
}

@keyframes mgHeroDot {
  0%,
  13.2% {
    background: #00c4b3;
    border-color: #00c4b3;
    transform: scale(1.08);
  }
  15.3%,
  100% {
    background: transparent;
    border-color: rgba(6, 29, 57, .32);
    transform: scale(1);
  }
}

@media (max-width: 860px) {
  .public-portal .mg-hero-frame.is-first {
    align-items: start;
  }

  .public-portal .mg-hero-frame.is-first .mg-hero-frame-bg {
    background-position: 60% center;
  }

  .public-portal .mg-hero-frame.is-first::before {
    background:
      linear-gradient(90deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .78) 48%, rgba(255, 255, 255, .16) 82%, rgba(255, 255, 255, 0) 100%),
      linear-gradient(0deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, .02));
  }

  .public-portal .mg-hero-frame.is-first .mg-hero-copy h1 {
    max-width: 58%;
  }

  .public-portal .mg-hero-frame.is-first .mg-hero-copy p {
    max-width: 55%;
  }
}

@media (max-width: 560px) {
  .public-portal .mg-hero-carousel {
    min-height: clamp(372px, 48vh, 430px);
  }

  .public-portal .mg-hero-frame.is-first {
    padding-top: 48px;
  }

  .public-portal .mg-hero-frame.is-first .mg-hero-frame-bg {
    background-position: 67% center;
  }

  .public-portal .mg-hero-frame.is-first::before {
    background:
      linear-gradient(90deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .78) 48%, rgba(255, 255, 255, .18) 78%, rgba(255, 255, 255, .02) 100%),
      linear-gradient(0deg, rgba(247, 251, 253, .54), rgba(247, 251, 253, 0) 44%);
  }

  .public-portal .mg-hero-frame.is-first .mg-hero-copy h1 {
    max-width: 63%;
    font-size: clamp(25px, 7.4vw, 32px);
    line-height: 1.08;
  }

  .public-portal .mg-hero-frame.is-first .mg-hero-copy p {
    max-width: 58%;
    color: #4b5b70;
    font-size: 12.5px;
  }

  .public-portal .mg-hero-dots {
    bottom: 18px;
  }
}

@media (max-width: 860px) {
  .public-portal .showcase-header {
    width: min(100% - 24px, 1200px);
    min-height: 50px;
    padding-block: 6px;
  }

  .public-portal .showcase-brand img {
    width: 32px;
    height: 32px;
  }

  .public-portal .showcase-brand strong {
    font-size: 17px;
  }

  .public-portal .showcase-brand small {
    font-size: 8px;
  }

  .public-portal .showcase-menu-toggle {
    width: 38px;
    height: 38px;
  }

  .public-portal .mg-hero-frame {
    padding-top: 56px;
  }

  .public-portal .mg-hero-frame .mg-hero-copy h1 {
    max-width: 600px;
    font-size: clamp(38px, 8vw, 56px);
  }

  .public-portal .mg-hero-frame .mg-hero-copy p {
    max-width: 540px;
    font-size: 16px;
  }
}

@media (max-width: 560px) {
  .public-portal .showcase-header {
    min-height: 46px;
    padding-block: 5px;
  }

  .public-portal .showcase-brand {
    gap: 8px;
  }

  .public-portal .showcase-brand img {
    width: 30px;
    height: 30px;
  }

  .public-portal .showcase-brand strong {
    font-size: 16px;
  }

  .public-portal .showcase-brand small {
    display: none;
  }

  .public-portal .showcase-menu-toggle {
    width: 36px;
    height: 36px;
  }

  .public-portal .mg-hero-badge {
    min-height: 28px;
    margin-bottom: 10px;
    padding: 6px 12px;
    font-size: 9px;
  }

  .public-portal .mg-hero-badge::before {
    width: 7px;
    height: 7px;
    margin-right: 8px;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .18);
  }

  .public-portal .mg-hero-frame .mg-hero-copy h1 {
    max-width: 94%;
    margin-bottom: 8px;
    font-size: clamp(29px, 8.4vw, 36px);
    line-height: 1.12;
  }

  .public-portal .mg-hero-frame .mg-hero-copy p {
    max-width: 94%;
    font-size: 14.5px;
    line-height: 1.38;
  }

  .public-portal .mg-hero-mobile-actions .mg-button {
    min-height: 52px;
    font-size: 11.5px;
  }
}

/* Agent workspace and profile polish: compact, professional, photo-led identity. */
.user-pill {
  gap: 8px;
}

.user-pill img,
.drawer-avatar img,
.profile-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-pill img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.drawer-avatar {
  overflow: hidden;
}

.profile-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px;
}

.profile-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 12px;
  align-items: start;
}

.profile-card,
.profile-side-panel {
  min-width: 0;
  border: 1px solid #e3ebf2;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .05);
}

.profile-card {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.profile-identity {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 14px;
  border-radius: 8px;
  background: linear-gradient(135deg, #071f3d, #0c6e70);
  color: #fff;
}

.profile-photo-picker {
  display: grid;
  gap: 7px;
  justify-items: center;
  margin: 0;
  cursor: pointer;
}

.profile-photo-picker input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.profile-photo {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  overflow: hidden;
  border: 3px solid rgba(255,255,255,.82);
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  box-shadow: 0 16px 30px rgba(0,0,0,.18);
}

.profile-photo strong {
  color: #fff;
  font-size: 34px;
  line-height: 1;
}

.profile-photo-action {
  min-height: 24px;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 10.5px;
  font-weight: 850;
}

.profile-role {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-bottom: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: rgba(255,255,255,.9);
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
}

.profile-identity h2 {
  margin: 0 0 5px;
  color: #fff;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.05;
}

.profile-identity p {
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: 13px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.profile-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.profile-summary-grid div,
.profile-status-list div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #e4edf4;
  border-radius: 8px;
  background: #f8fbfd;
}

.profile-summary-grid span,
.profile-status-list span {
  color: #718096;
  font-size: 10.5px;
  font-weight: 850;
  text-transform: uppercase;
}

.profile-summary-grid strong,
.profile-status-list strong {
  color: #12243e;
  font-size: 13px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.profile-edit-panel {
  display: grid;
  gap: 10px;
  padding-top: 2px;
}

.profile-edit-panel h2,
.profile-side-panel h2 {
  margin: 0;
  color: #10243e;
  font-size: 16px;
  line-height: 1.15;
}

.profile-form-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.profile-rail {
  display: grid;
  gap: 10px;
}

.profile-side-panel {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.profile-side-panel .qr-panel {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  margin: 0;
}

.profile-side-panel .qr-code {
  width: 68px;
  height: 68px;
  padding: 5px;
  border-radius: 7px;
}

.profile-status-list {
  display: grid;
  gap: 7px;
}

.agent-dashboard {
  grid-template-columns: minmax(0, 1fr) minmax(248px, 300px);
  gap: 10px;
}

.agent-metrics {
  grid-template-columns: repeat(4, minmax(128px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.agent-metrics .metric {
  min-height: 70px;
  grid-template-columns: 30px minmax(0, 1fr);
  align-content: center;
  gap: 5px 9px;
  padding: 9px 10px;
}

.agent-metrics .metric-icon {
  width: 30px;
  height: 30px;
  grid-row: 1 / span 2;
}

.agent-metrics .metric-icon::before {
  width: 16px;
  height: 16px;
}

.agent-metrics .metric strong {
  font-size: 19px;
}

.agent-metrics .metric span:last-child {
  font-size: 10px;
}

.agent-dashboard .premium-panel {
  padding: 11px;
}

.agent-dashboard .card-heading {
  margin-bottom: 8px;
}

.agent-dashboard .bar-list {
  gap: 7px;
}

.agent-dashboard .bar-list div {
  min-height: 28px;
}

.agent-dashboard-side .compact-card {
  padding: 10px;
}

.agent-dashboard-side .compact-list {
  gap: 5px;
  margin-bottom: 0;
}

.agent-dashboard-side .compact-list div {
  padding: 6px 7px;
}

.agent-dashboard-side .quick-action {
  min-height: 36px;
  padding: 7px 8px;
  font-size: 11.5px;
}

.agent-dashboard-side .action-icon {
  width: 26px;
  height: 26px;
}

.agent-dashboard-side .action-icon::before {
  width: 14px;
  height: 14px;
}

@media (max-width: 980px) {
  .profile-shell,
  .agent-dashboard {
    grid-template-columns: 1fr;
  }

  .profile-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .agent-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .profile-heading {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .profile-identity {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
  }

  .profile-photo {
    width: 66px;
    height: 66px;
  }

  .profile-photo strong {
    font-size: 25px;
  }

  .profile-photo-action {
    font-size: 9px;
  }

  .profile-summary-grid,
  .profile-form-grid,
  .profile-rail {
    grid-template-columns: 1fr;
  }

  .profile-side-panel .qr-panel {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .profile-side-panel .qr-code {
    width: 58px;
    height: 58px;
  }
}

@media (max-width: 520px) {
  .agent-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .agent-metrics .metric {
    grid-template-columns: 1fr;
    min-height: 76px;
    gap: 4px;
  }

  .agent-metrics .metric-icon {
    grid-row: auto;
    width: 26px;
    height: 26px;
  }
}

/* Public premium assistance: distinct IA orientation and human contact channels. */
.mg-assist-layer {
  --assist-green: #008f7d;
  --assist-green-dark: #006f64;
  --assist-blue: #1677c8;
  --assist-ink: #071d38;
  --assist-muted: #667085;
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 90;
  display: grid;
  justify-items: end;
  gap: 14px;
  pointer-events: none;
}

.mg-assist-layer .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mg-float-actions,
.mg-ai-panel,
.mg-contact-panel {
  pointer-events: auto;
}

.mg-float-actions {
  display: grid;
  gap: 11px;
  justify-items: end;
}

.mg-float-btn {
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  display: grid;
  place-items: center;
  padding: 0;
  font: 900 14px/1.1 Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  box-shadow: 0 16px 34px rgba(5, 27, 50, .2), inset 0 0 0 1px rgba(255, 255, 255, .22);
  cursor: pointer;
  position: relative;
  transform: translateZ(0);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  animation: mgAssistBreathe 4.8s ease-in-out infinite;
}

.mg-float-btn span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24);
  font-size: 22px;
}

.mg-float-btn strong {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(4px);
  width: max-content;
  max-width: 150px;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(7, 29, 56, .9);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 12px 26px rgba(5, 27, 50, .2);
  transition: opacity .18s ease, transform .18s ease;
}

.mg-float-btn:hover strong,
.mg-float-btn:focus-visible strong {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.mg-float-btn:hover,
.mg-float-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 22px 42px rgba(5, 27, 50, .26);
  outline: none;
}

.mg-float-ai {
  background: linear-gradient(135deg, var(--assist-green), var(--assist-green-dark));
}

.mg-float-contact {
  background: linear-gradient(135deg, #238de0, var(--assist-blue));
  animation-delay: .65s;
}

.mg-ai-panel,
.mg-contact-panel {
  width: min(392px, calc(100vw - 28px));
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255, 255, 255, .96);
  color: var(--assist-ink);
  box-shadow: 0 28px 70px rgba(6, 29, 57, .26);
  border: 1px solid rgba(10, 42, 76, .09);
  backdrop-filter: blur(18px);
}

.mg-ai-panel[hidden],
.mg-contact-panel[hidden] {
  display: none;
}

.mg-panel-head {
  min-height: 74px;
  padding: 16px 18px;
  color: #fff;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, .22), transparent 32%),
    linear-gradient(135deg, var(--assist-green), var(--assist-green-dark));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mg-panel-head-contact {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, .22), transparent 32%),
    linear-gradient(135deg, #238de0, var(--assist-blue));
}

.mg-panel-kicker {
  display: block;
  margin-bottom: 3px;
  color: rgba(255, 255, 255, .78);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.mg-panel-head strong {
  display: block;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0;
}

.mg-panel-close {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.mg-ai-log {
  max-height: min(392px, calc(100vh - 320px));
  min-height: 188px;
  overflow-y: auto;
  padding: 16px;
  display: grid;
  align-content: start;
  gap: 10px;
  background: linear-gradient(180deg, rgba(245, 250, 253, .88), rgba(255, 255, 255, .96));
}

.mg-ai-message {
  width: fit-content;
  max-width: 92%;
  border-radius: 18px;
  padding: 11px 13px;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: 0;
}

.mg-ai-message.bot {
  justify-self: start;
  background: #fff;
  border: 1px solid rgba(14, 53, 89, .09);
  box-shadow: 0 10px 22px rgba(15, 38, 65, .07);
}

.mg-ai-message.user {
  justify-self: end;
  background: #e8f7f3;
  color: #06493f;
  border: 1px solid rgba(0, 143, 125, .18);
}

.mg-ai-transfer {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(8, 35, 65, .08);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mg-ai-transfer p {
  flex: 0 0 100%;
  margin: 0 0 2px;
  font-weight: 800;
  color: var(--assist-ink);
}

.mg-ai-transfer a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 8px 11px;
  border-radius: 999px;
  background: #f1f7fb;
  color: var(--assist-ink);
  font-weight: 900;
  text-decoration: none;
  border: 1px solid rgba(13, 55, 92, .1);
}

.mg-ai-quick {
  padding: 0 16px 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: #fff;
}

.mg-ai-quick button {
  min-height: 38px;
  border: 1px solid rgba(8, 35, 65, .1);
  border-radius: 999px;
  background: #fff;
  color: var(--assist-ink);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(15, 38, 65, .05);
}

.mg-ai-quick button:hover,
.mg-ai-quick button:focus-visible {
  border-color: rgba(0, 143, 125, .42);
  color: var(--assist-green-dark);
  outline: none;
}

.mg-ai-form {
  padding: 12px 14px 14px;
  display: grid;
  grid-template-columns: 1fr 42px;
  gap: 9px;
  border-top: 1px solid rgba(8, 35, 65, .08);
  background: #fff;
}

.mg-ai-form input {
  min-width: 0;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(8, 35, 65, .12);
  background: #f8fbfd;
  color: var(--assist-ink);
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
  outline: none;
}

.mg-ai-form input:focus {
  border-color: rgba(0, 143, 125, .55);
  box-shadow: 0 0 0 4px rgba(0, 143, 125, .11);
}

.mg-ai-form button {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: var(--assist-green);
  font-weight: 900;
  cursor: pointer;
}

.mg-contact-list {
  padding: 10px;
  display: grid;
  gap: 6px;
}

.mg-contact-list a {
  min-height: 68px;
  display: grid;
  grid-template-columns: 46px 1fr 18px;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  padding: 11px 12px;
  border-radius: 16px;
  color: var(--assist-ink);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.mg-contact-list a:hover,
.mg-contact-list a:focus-visible {
  background: #f6fbfd;
  border-color: rgba(10, 42, 76, .08);
  transform: translateX(-2px);
  outline: none;
}

.mg-contact-icon {
  grid-row: 1 / 3;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 20px;
  background: #eef6fb;
}

.mg-contact-list strong {
  font-size: 14px;
  line-height: 1.1;
  letter-spacing: 0;
}

.mg-contact-list small {
  color: var(--assist-muted);
  font-size: 12px;
  font-weight: 700;
}

.mg-contact-list em {
  grid-column: 3;
  grid-row: 1 / 3;
  font-style: normal;
  color: #8a98a8;
  font-size: 25px;
}

@keyframes mgAssistBreathe {
  0%, 100% { filter: saturate(1); }
  50% { filter: saturate(1.12) brightness(1.03); }
}

@media (max-width: 680px) {
  .mg-assist-layer {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    justify-items: end;
    gap: 11px;
  }

  .mg-float-actions {
    grid-template-columns: 1fr;
    gap: 10px;
    justify-items: end;
  }

  .mg-float-btn {
    width: 56px;
    height: 56px;
  }

  .mg-float-btn span {
    width: 40px;
    height: 40px;
    font-size: 21px;
  }

  .mg-float-btn strong {
    display: none;
  }

  .mg-ai-panel,
  .mg-contact-panel {
    width: 100%;
    border-radius: 20px;
  }

  .mg-ai-log {
    max-height: min(360px, calc(100vh - 270px));
  }

  .mg-ai-quick {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mg-float-btn {
    animation: none;
  }
}

/* Assistance visibility and mobile bottom-sheet refinement. */
.mg-assist-layer {
  right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 160;
}

.mg-float-actions {
  gap: 12px;
}

.mg-float-btn {
  width: 62px;
  height: 62px;
  box-shadow:
    0 18px 40px rgba(5, 27, 50, .28),
    0 0 0 5px rgba(255, 255, 255, .88),
    inset 0 0 0 1px rgba(255, 255, 255, .26);
}

.mg-float-btn span {
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, .24);
  font-size: 23px;
}

.mg-float-btn:hover,
.mg-float-btn:focus-visible {
  box-shadow:
    0 24px 48px rgba(5, 27, 50, .32),
    0 0 0 5px rgba(255, 255, 255, .94),
    inset 0 0 0 1px rgba(255, 255, 255, .28);
}

.mg-ai-panel,
.mg-contact-panel {
  margin-bottom: 4px;
}

.mg-ai-panel {
  max-height: calc(100dvh - 190px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}

.mg-ai-log {
  min-height: 150px;
  max-height: min(300px, calc(100dvh - 470px));
}

.mg-contact-panel {
  max-height: calc(100dvh - 190px);
}

@media (max-width: 680px) {
  .mg-assist-layer {
    right: max(18px, env(safe-area-inset-right));
    bottom: max(20px, env(safe-area-inset-bottom));
    gap: 12px;
  }

  .mg-float-actions {
    gap: 12px;
  }

  .mg-float-btn {
    width: 60px;
    height: 60px;
    box-shadow:
      0 18px 38px rgba(5, 27, 50, .3),
      0 0 0 5px rgba(255, 255, 255, .9),
      inset 0 0 0 1px rgba(255, 255, 255, .3);
  }

  .mg-float-btn span {
    width: 42px;
    height: 42px;
    font-size: 22px;
  }

  .mg-ai-panel,
  .mg-contact-panel {
    position: fixed;
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(max(20px, env(safe-area-inset-bottom)) + 142px);
    width: auto;
    max-height: min(620px, calc(100dvh - 172px));
    border-radius: 24px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    box-shadow:
      0 22px 62px rgba(5, 27, 50, .34),
      0 0 0 1px rgba(255, 255, 255, .82);
  }

  .mg-contact-panel {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .mg-ai-panel[hidden],
  .mg-contact-panel[hidden] {
    display: none;
  }

  .mg-panel-head {
    min-height: 60px;
    padding: 12px 14px;
  }

  .mg-panel-kicker {
    font-size: 9px;
    margin-bottom: 2px;
  }

  .mg-panel-head strong {
    font-size: 13px;
    line-height: 1.15;
  }

  .mg-panel-close {
    width: 32px;
    height: 32px;
    font-size: 22px;
  }

  .mg-ai-log {
    min-height: 120px;
    max-height: none;
    padding: 12px;
    gap: 8px;
    overflow-y: auto;
    align-content: start;
  }

  .mg-ai-message {
    max-width: 94%;
    border-radius: 15px;
    padding: 9px 11px;
    font-size: 12px;
    line-height: 1.35;
  }

  .mg-ai-quick {
    padding: 0 12px 10px;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }

  .mg-ai-quick button {
    min-height: 34px;
    padding: 7px 8px;
    font-size: 11px;
    line-height: 1.15;
    white-space: normal;
  }

  .mg-ai-form {
    padding: 10px 12px 12px;
    grid-template-columns: 1fr 40px;
    gap: 8px;
  }

  .mg-ai-form input {
    height: 40px;
    font-size: 12px;
    padding: 0 12px;
  }

  .mg-ai-form button {
    width: 40px;
    height: 40px;
  }

  .mg-contact-list {
    max-height: min(420px, calc(100dvh - 250px));
    overflow-y: auto;
    padding: 8px;
  }

  .mg-contact-list a {
    min-height: 58px;
    grid-template-columns: 40px 1fr 16px;
    column-gap: 10px;
    padding: 9px 10px;
    border-radius: 14px;
  }

  .mg-contact-icon {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    font-size: 18px;
  }

  .mg-contact-list strong {
    font-size: 13px;
  }

  .mg-contact-list small {
    font-size: 11px;
  }
}

@media (max-width: 380px) {
  .mg-ai-quick {
    grid-template-columns: 1fr;
  }

  .mg-ai-panel,
  .mg-contact-panel {
    bottom: calc(max(18px, env(safe-area-inset-bottom)) + 136px);
    max-height: min(590px, calc(100dvh - 158px));
  }
}

/* Calmer AI project choices so they do not dominate the assistant. */
.mg-ai-quick {
  padding: 0 14px 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.mg-ai-quick button {
  min-height: 32px;
  padding: 6px 8px;
  border-radius: 12px;
  background: #f8fbfd;
  color: #10223d;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
  box-shadow: none;
}

.mg-ai-quick button:hover,
.mg-ai-quick button:focus-visible {
  background: #eef8f6;
  border-color: rgba(0, 143, 125, .32);
}

@media (max-width: 680px) {
  .mg-ai-quick {
    padding: 0 12px 9px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .mg-ai-quick button {
    min-height: 31px;
    padding: 5px 6px;
    border-radius: 11px;
    font-size: 10px;
    font-weight: 800;
  }
}

@media (max-width: 430px) {
  .mg-ai-quick {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Compact partner CTA on the public home page. */
.mg-partner-band {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 14px;
  min-height: 104px;
  margin: 22px 0 16px;
  padding: 14px 18px;
  border: 1px solid rgba(120, 231, 221, .18);
  border-radius: 22px;
  background:
    radial-gradient(circle at 12% 10%, rgba(120, 231, 221, .24), transparent 32%),
    linear-gradient(135deg, #0f766e 0%, #082f49 78%);
  box-shadow: 0 18px 38px rgba(7, 31, 61, .13);
}

.mg-partner-band p {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: rgba(232, 255, 251, .94);
  font-size: 11px;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.mg-partner-band h2 {
  max-width: 480px;
  margin-top: 8px;
  font-size: clamp(22px, 2.1vw, 28px);
  line-height: 1.03;
}

.mg-partner-band div > span {
  max-width: 520px;
  margin-top: 7px;
  color: rgba(255, 255, 255, .82);
  font-size: 14px;
  line-height: 1.35;
}

.mg-partner-band ul {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mg-partner-band li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .075);
  color: rgba(255, 255, 255, .92);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.mg-partner-band li::before {
  position: static;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(120, 231, 221, .18);
  color: #d7fffb;
  font-size: 11px;
}

.mg-partner-band .mg-button.light {
  min-height: 44px;
  padding: 11px 16px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 13px;
  background: rgba(255, 255, 255, .95);
  color: #0f766e;
  font-size: 13px;
  box-shadow: 0 12px 28px rgba(4, 12, 24, .14);
  white-space: nowrap;
}

@media (max-width: 760px) {
  .mg-partner-band {
    grid-template-columns: 1fr;
    gap: 12px;
    min-height: 0;
    padding: 16px;
  }

  .mg-partner-band ul {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .mg-partner-band .mg-button.light {
    width: fit-content;
  }
}

@media (max-width: 560px) {
  .mg-partner-band {
    margin: 16px 0 12px;
    padding: 12px;
    border-radius: 18px;
    gap: 9px;
  }

  .mg-partner-band::before {
    display: none;
  }

  .mg-partner-band p {
    display: inline-flex;
  }

  .mg-partner-band h2 {
    color: #fff;
    font-size: 19px;
  }

  .mg-partner-band div > span {
    color: rgba(255, 255, 255, .82);
    font-size: 11.5px;
  }

  .mg-partner-band ul {
    display: none;
    gap: 6px;
  }

  .mg-partner-band li {
    min-height: 28px;
    padding: 6px 8px;
    font-size: 10.5px;
  }

  .mg-partner-band li::before {
    width: 15px;
    height: 15px;
    font-size: 9px;
  }

  .mg-partner-band .mg-button.light {
    width: 100%;
    min-height: 42px;
    margin-top: 0;
  }

  body.public-portal .mg-assist-layer {
    display: none;
  }
}

/* Final tone-down: project choices behave like light suggestion chips. */
.mg-ai-quick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.mg-ai-quick button {
  flex: 0 1 auto;
  min-width: 0;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(248, 251, 253, .72);
  border-color: rgba(8, 35, 65, .09);
  color: #18304f;
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}

@media (max-width: 680px) {
  .mg-ai-quick {
    gap: 6px;
  }

  .mg-ai-quick button {
    min-height: 28px;
    padding: 5px 8px;
    font-size: 9.5px;
  }
}

/* Final public form density override. Keep mobile generous, make PC shorter and more professional. */
@media (min-width: 1080px) {
  body.public-portal .public-portal-content {
    width: min(1120px, calc(100% - 64px));
    margin-top: 10px;
  }

  body.public-portal .candidate-apply-page,
  body.public-portal .agent-apply-page {
    width: min(1120px, 100%);
    gap: 10px;
  }

  body.public-portal .candidate-hero,
  body.public-portal .agent-hero {
    grid-template-columns: minmax(0, 1fr) 112px;
    min-height: 76px;
    gap: 14px;
  }

  body.public-portal .candidate-hero h1,
  body.public-portal .agent-hero h1 {
    font-size: 30px;
    line-height: 1.02;
  }

  body.public-portal .candidate-hero p,
  body.public-portal .agent-hero p {
    max-width: 680px;
    font-size: 12px;
    line-height: 1.28;
  }

  body.public-portal .candidate-hero-visual,
  body.public-portal .agent-hero-visual {
    width: 104px;
    height: 72px;
  }

  body.public-portal .candidate-stepper-card,
  body.public-portal .agent-stepper-card {
    padding: 7px 16px 6px;
    border-radius: 16px;
  }

  body.public-portal .candidate-stepper::before,
  body.public-portal .agent-stepper::before {
    top: 22px;
    height: 2px;
  }

  body.public-portal .candidate-stepper li,
  body.public-portal .agent-stepper li {
    gap: 4px;
  }

  body.public-portal .candidate-stepper strong,
  body.public-portal .agent-stepper strong {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

  body.public-portal .candidate-stepper em,
  body.public-portal .agent-stepper em {
    width: 28px;
    height: 28px;
  }

  body.public-portal .candidate-stepper em::before,
  body.public-portal .agent-stepper em::before {
    width: 15px;
    height: 15px;
  }

  body.public-portal .candidate-stepper span,
  body.public-portal .agent-stepper span {
    font-size: 10px;
  }

  body.public-portal .candidate-form-card,
  body.public-portal .agent-form-card {
    gap: 10px;
    padding: 16px 18px;
    border-radius: 18px;
  }

  body.public-portal .candidate-form-card .form-grid,
  body.public-portal .agent-form-card .form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: 8px 12px;
  }

  body.public-portal .candidate-form-card .span-2 {
    grid-column: span 2;
  }

  body.public-portal .candidate-form-card .span-3,
  body.public-portal .agent-form-card .span-2,
  body.public-portal .candidate-form-card .notice {
    grid-column: 1 / -1;
  }

  body.public-portal .candidate-form-card h2,
  body.public-portal .agent-form-card .form-section-title h2 {
    margin-bottom: 4px;
    padding-bottom: 9px;
    font-size: 18px;
  }

  body.public-portal .agent-form-card .form-section-title {
    gap: 3px;
    padding-top: 8px;
  }

  body.public-portal .agent-form-card .form-section-title p {
    font-size: 12px;
    line-height: 1.28;
  }

  body.public-portal .candidate-form-card h2::before {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    -webkit-mask-size: 18px 18px;
    mask-size: 18px 18px;
  }

  body.public-portal .candidate-form-card label span,
  body.public-portal .agent-form-card label span {
    margin-bottom: 3px;
    font-size: 10px;
    line-height: 1.15;
  }

  body.public-portal .candidate-form-card input,
  body.public-portal .candidate-form-card select,
  body.public-portal .candidate-form-card textarea,
  body.public-portal .agent-form-card input,
  body.public-portal .agent-form-card select,
  body.public-portal .agent-form-card textarea {
    min-height: 36px;
    padding: 7px 10px;
    border-radius: 10px;
    font-size: 12px;
    box-shadow: 0 5px 12px rgba(15, 23, 42, .025);
  }

  body.public-portal .candidate-form-card .field-with-icon input,
  body.public-portal .candidate-form-card .field-with-icon select,
  body.public-portal .agent-form-card .field-with-icon input,
  body.public-portal .agent-form-card .field-with-icon select,
  body.public-portal .agent-form-card .field-with-icon textarea {
    padding-left: 44px;
  }

  body.public-portal .field-with-icon > div::after,
  body.public-portal .agent-form-card .field-with-icon > div::after {
    left: 6px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }

  body.public-portal .field-with-icon > div::before,
  body.public-portal .agent-form-card .field-with-icon > div::before {
    left: 12px;
    width: 17px;
    height: 17px;
  }

  body.public-portal .agent-form-card textarea {
    min-height: 78px;
  }

  body.public-portal .candidate-form-card .form-tip,
  body.public-portal .agent-form-card .form-tip,
  body.public-portal .candidate-form-card .notice {
    padding: 7px 9px;
    border-radius: 10px;
    font-size: 10.5px;
    line-height: 1.25;
  }

  body.public-portal .candidate-form-card .wizard-actions,
  body.public-portal .agent-form-card .public-submit {
    gap: 8px;
    padding-top: 10px;
  }

  body.public-portal .candidate-form-card .button,
  body.public-portal .agent-form-card .button.ghost,
  body.public-portal .candidate-form-card .button.primary,
  body.public-portal .agent-form-card .button.primary {
    min-height: 40px;
    border-radius: 11px;
    font-size: 13px;
  }

  body.public-portal .candidate-form-card .button.primary span:last-child,
  body.public-portal .agent-form-card .button.primary span:last-child {
    width: 30px;
    height: 30px;
    font-size: 24px;
  }
}

@media (max-width: 680px) {
  body.public-portal:has(.candidate-apply-page) .mg-assist-layer,
  body.public-portal:has(.agent-apply-page) .mg-assist-layer {
    display: none;
  }
}

/* Premium compact public footer. */
.footer-cta {
  width: min(1200px, calc(100% - 64px));
  margin: 18px auto 12px;
}

.footer-cta > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 58px;
  padding: 10px 14px 10px 18px;
  border: 1px solid rgba(0, 143, 125, .16);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(236, 253, 245, .96), rgba(239, 246, 255, .96));
  box-shadow: 0 14px 34px rgba(7, 31, 61, .08);
}

.footer-cta strong {
  color: #061d39;
  font-size: 18px;
  line-height: 1.15;
  font-weight: 900;
}

.footer-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 40px;
  padding: 9px 12px 9px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #13b8a6, #007f7a);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 12px 24px rgba(0, 127, 122, .22);
}

.footer-cta-button span:last-child {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .2);
  font-size: 22px;
  line-height: 1;
}

.showcase-footer.premium-footer {
  margin: 0 auto 14px;
  width: min(1240px, calc(100% - 32px));
  min-height: 0;
  border: 1px solid rgba(132, 160, 190, .16);
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 0%, rgba(20, 184, 166, .18), transparent 34%),
    linear-gradient(135deg, #061827 0%, #071f3d 58%, #041422 100%);
  color: #e6f0fa;
  box-shadow: 0 22px 50px rgba(3, 12, 24, .18);
}

.showcase-footer.premium-footer .premium-footer-main {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) auto minmax(260px, 1fr);
  align-items: center;
  gap: 18px;
  width: min(1140px, calc(100% - 44px));
  min-height: 80px;
  padding: 12px 0 10px;
}

.premium-footer .footer-brand {
  display: inline-grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #fff;
  text-decoration: none;
}

.premium-footer .footer-brand strong {
  color: #fff;
  font-size: 18px;
  line-height: 1;
}

.premium-footer .footer-brand small,
.premium-footer .footer-brand em {
  display: block;
  color: rgba(226, 239, 250, .76);
  font-style: normal;
  font-size: 10.5px;
  line-height: 1.18;
}

.premium-footer .footer-brand em {
  margin-top: 4px;
  color: rgba(119, 232, 220, .9);
  font-weight: 800;
}

.premium-footer .footer-socials {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin: 0;
}

.premium-footer .footer-social {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0;
  border: 1px solid rgba(216, 231, 246, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .055);
  color: #fff;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.premium-footer .footer-social:hover,
.premium-footer .footer-social:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(119, 232, 220, .46);
  background: rgba(255, 255, 255, .1);
  outline: none;
}

.premium-footer .footer-social span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: transparent;
  color: inherit;
}

.premium-footer .footer-social svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.premium-footer .footer-social.whatsapp { color: #7ee7a6; }
.premium-footer .footer-social.telegram { color: #7cc8ff; }
.premium-footer .footer-social.facebook { color: #8eb7ff; }
.premium-footer .footer-social.instagram { color: #ff8ac7; }

.premium-footer-contact {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-style: normal;
}

.premium-footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: rgba(235, 245, 255, .9);
  font-size: 12.5px;
  line-height: 1;
  font-weight: 850;
  text-decoration: none;
  white-space: nowrap;
}

.premium-footer-contact span {
  color: #70dfd3;
  font-size: 14px;
}

.showcase-footer.premium-footer .premium-footer-bottom {
  display: flex;
  justify-content: center;
  gap: 26px;
  width: min(1140px, calc(100% - 44px));
  padding: 9px 0 12px;
  border-top: 1px solid rgba(226, 239, 250, .12);
  color: rgba(226, 239, 250, .72);
  font-size: 11px;
  line-height: 1;
}

.premium-footer-bottom span:last-child {
  position: relative;
  padding-left: 17px;
}

.premium-footer-bottom span:last-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 10px;
  height: 12px;
  transform: translateY(-50%);
  background: currentColor;
  opacity: .9;
  clip-path: polygon(50% 0, 100% 18%, 92% 72%, 50% 100%, 8% 72%, 0 18%);
}

@media (max-width: 860px) {
  .footer-cta {
    width: min(100% - 24px, 720px);
    margin: 12px auto 10px;
  }

  .footer-cta > div {
    min-height: 50px;
    padding: 8px 10px 8px 12px;
    border-radius: 16px;
  }

  .footer-cta strong {
    font-size: 14px;
  }

  .footer-cta-button {
    min-height: 36px;
    padding: 8px 9px 8px 12px;
    border-radius: 11px;
    font-size: 12px;
  }

  .showcase-footer.premium-footer {
    width: min(100% - 20px, 720px);
    margin-bottom: 10px;
    border-radius: 18px;
  }

  .showcase-footer.premium-footer .premium-footer-main {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand socials"
      "contact contact";
    gap: 8px 10px;
    width: calc(100% - 24px);
    min-height: 72px;
    padding: 9px 0 6px;
  }

  .premium-footer .footer-brand {
    grid-area: brand;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px;
  }

  .premium-footer .footer-brand img {
    width: 34px;
    height: 34px;
  }

  .premium-footer .footer-brand strong {
    font-size: 15px;
  }

  .premium-footer .footer-brand small,
  .premium-footer .footer-brand em {
    font-size: 9px;
  }

  .premium-footer .footer-socials {
    grid-area: socials;
    gap: 6px;
  }

  .premium-footer .footer-social {
    width: 30px;
    height: 30px;
  }

  .premium-footer .footer-social span {
    font-size: 9px;
  }

  .premium-footer-contact {
    grid-area: contact;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
  }

  .premium-footer-contact a {
    min-width: 0;
    font-size: 10.5px;
  }

  .showcase-footer.premium-footer .premium-footer-bottom {
    width: calc(100% - 24px);
    gap: 16px;
    padding: 7px 0 9px;
    font-size: 9.5px;
  }
}

@media (max-width: 430px) {
  .footer-cta > div {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .footer-cta-button {
    width: 100%;
  }

  .premium-footer .footer-brand em {
    display: none;
  }

  .showcase-footer.premium-footer .premium-footer-main {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand socials"
      "contact contact";
    align-items: center;
    justify-items: stretch;
    min-height: 62px;
    padding: 7px 0 4px;
    text-align: left;
  }

  .premium-footer .footer-brand {
    justify-self: start;
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .premium-footer .footer-brand img {
    width: 30px;
    height: 30px;
  }

  .premium-footer .footer-brand strong {
    font-size: 14px;
  }

  .premium-footer .footer-brand small {
    font-size: 8.5px;
  }

  .premium-footer .footer-socials {
    justify-self: end;
    gap: 5px;
  }

  .premium-footer .footer-social {
    width: 27px;
    height: 27px;
  }

  .premium-footer-contact {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 3px;
    width: 100%;
  }

  .premium-footer-contact a {
    font-size: 9px;
    gap: 4px;
    white-space: normal;
  }

  .premium-footer-contact span {
    font-size: 11px;
  }

  .showcase-footer.premium-footer .premium-footer-bottom {
    padding: 5px 0 7px;
    font-size: 9px;
  }
}

body.public-portal .candidate-form-card .span-3 {
  grid-column: 1 / -1;
}

body.public-portal .candidate-form-card .form-grid {
  grid-auto-flow: dense;
}

@media (min-width: 1080px) {
  body.public-portal .candidate-form-card .desktop-span-3 {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1024px) {
  body.public-portal:has(.candidate-apply-page) .mg-assist-layer,
  body.public-portal:has(.agent-apply-page) .mg-assist-layer {
    display: none;
  }

  body.public-portal .candidate-form-card .span-2 {
    grid-column: auto;
  }

  body.public-portal .candidate-form-card .span-3,
  body.public-portal .candidate-form-card .form-tip,
  body.public-portal .candidate-form-card .notice {
    grid-column: 1 / -1;
  }
}

/* Premium home density and motion polish. */
.public-portal .mg-section {
  padding: 20px 0;
}

.public-portal .mg-section h2 {
  margin-bottom: 16px;
  font-size: clamp(24px, 2.5vw, 31px);
}

.public-portal .mg-service-grid {
  grid-auto-flow: row;
  grid-auto-columns: initial;
  gap: 12px;
}

.public-portal .mg-service-card {
  min-height: 174px;
  padding: 18px 14px 16px;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(7, 31, 61, .065);
}

.public-portal .mg-service-card span {
  width: 50px;
  height: 50px;
  font-size: 24px;
  box-shadow: inset 0 0 0 1px rgba(0, 143, 125, .08);
}

.public-portal .mg-service-grid h3 {
  margin: 12px 0 6px;
  font-size: 15px;
  line-height: 1.16;
}

.public-portal .mg-service-grid p {
  max-width: 170px;
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.32;
}

.public-portal .mg-service-card strong {
  font-size: 11.5px;
  opacity: .92;
}

.public-portal .mg-how {
  padding-top: 6px;
}

.public-portal .mg-timeline {
  gap: 14px;
}

.public-portal .mg-timeline::before {
  left: 10%;
  right: 10%;
  top: 31px;
  height: 2px;
  border: 0;
  border-radius: 999px;
  background: #d7ece8;
  overflow: hidden;
}

.public-portal .mg-timeline::after {
  content: "";
  position: absolute;
  left: 10%;
  top: 31px;
  width: 80%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #00a99d, #1fd6c2);
  transform: scaleX(0);
  transform-origin: left;
}

.public-portal .mg-how.is-visible .mg-timeline::after {
  animation: mgTimelineProgress 1.45s cubic-bezier(.2, .78, .2, 1) .18s forwards;
}

.public-portal .mg-timeline article {
  min-height: 150px;
  padding: 0 10px;
  opacity: 0;
  transform: translateY(16px);
}

.public-portal .mg-how.is-visible .mg-timeline article {
  animation: mgStepReveal .62s cubic-bezier(.2, .78, .2, 1) forwards;
}

.public-portal .mg-how.is-visible .mg-timeline article:nth-child(1) { animation-delay: .06s; }
.public-portal .mg-how.is-visible .mg-timeline article:nth-child(2) { animation-delay: .26s; }
.public-portal .mg-how.is-visible .mg-timeline article:nth-child(3) { animation-delay: .46s; }
.public-portal .mg-how.is-visible .mg-timeline article:nth-child(4) { animation-delay: .66s; }

.public-portal .mg-timeline article > strong {
  top: 8px;
  box-shadow: 0 8px 18px rgba(0, 127, 122, .18);
}

.public-portal .mg-timeline article > span {
  width: 62px;
  height: 62px;
  font-size: 27px;
  box-shadow: 0 12px 26px rgba(7, 31, 61, .08);
}

.public-portal .mg-timeline h3 {
  margin: 13px 0 5px;
  font-size: 14.5px;
  line-height: 1.2;
}

.public-portal .mg-timeline p {
  max-width: 190px;
  font-size: 12px;
  line-height: 1.4;
}

.public-portal .mg-stats {
  margin: 18px 0;
  border-radius: 18px;
  box-shadow: 0 14px 32px rgba(7, 31, 61, .07);
  opacity: 0;
  transform: translateY(16px);
}

.public-portal .mg-stats.is-visible {
  animation: mgFadeLift .62s cubic-bezier(.2, .78, .2, 1) forwards;
}

.public-portal .mg-stats div {
  min-height: 90px;
  grid-template-columns: 52px 1fr;
  gap: 11px;
  padding: 14px 18px;
}

.public-portal .mg-stats span {
  width: 48px;
  height: 48px;
  font-size: 23px;
}

.public-portal .mg-stats strong {
  font-size: 27px;
  letter-spacing: 0;
}

.public-portal .mg-stats p {
  font-size: 12px;
  line-height: 1.25;
}

.public-portal .mg-country-strip {
  margin: -4px 0 20px;
  padding: 10px 0;
  border-radius: 18px;
}

.public-portal .mg-country-list span {
  min-height: 34px;
  padding: 6px 11px;
  font-size: 12px;
}

.mg-testimonial-carousel {
  touch-action: pan-y;
}

.mg-testimonial-slide {
  transform: translateX(26px);
  transition: opacity .42s ease, transform .42s cubic-bezier(.2, .78, .2, 1);
}

.mg-testimonials.is-reversing .mg-testimonial-slide {
  transform: translateX(-26px);
}

.mg-testimonial-slide.active {
  transform: translateX(0);
}

@keyframes mgTimelineProgress {
  to { transform: scaleX(1); }
}

@keyframes mgStepReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mgFadeLift {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1180px) {
  .public-portal .mg-service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .public-portal .mg-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .public-portal .mg-timeline {
    gap: 8px;
  }

  .public-portal .mg-timeline::before,
  .public-portal .mg-timeline::after {
    left: 22px;
    right: auto;
    top: 20px;
    width: 2px;
    height: calc(100% - 40px);
    transform: scaleY(0);
    transform-origin: top;
  }

  .public-portal .mg-timeline::before {
    transform: none;
  }

  .public-portal .mg-how.is-visible .mg-timeline::after {
    animation-name: mgTimelineProgressY;
  }

  .public-portal .mg-timeline article {
    grid-template-columns: 46px minmax(0, 1fr);
    grid-template-rows: auto auto;
    justify-items: start;
    column-gap: 10px;
    min-height: 52px;
    padding: 5px 0;
    text-align: left;
  }

  .public-portal .mg-timeline article > strong {
    top: 9px;
    left: 0;
    width: 22px;
    height: 22px;
    font-size: 11px;
  }

  .public-portal .mg-timeline article > span {
    grid-row: 1 / 3;
    width: 42px;
    height: 42px;
    font-size: 20px;
  }

  .public-portal .mg-timeline h3,
  .public-portal .mg-timeline p {
    max-width: none;
  }

  .public-portal .mg-timeline h3 {
    margin: 2px 0 3px;
  }

  .public-portal .mg-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@keyframes mgTimelineProgressY {
  to { transform: scaleY(1); }
}

@media (max-width: 560px) {
  .public-portal .mg-section {
    padding: 14px 0;
  }

  .public-portal .mg-section h2 {
    margin-bottom: 12px;
    font-size: 22px;
  }

  .public-portal .mg-service-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: initial;
    gap: 9px;
    overflow: visible;
    padding: 0;
  }

  .public-portal .mg-service-card {
    width: auto;
    min-height: 132px;
    padding: 12px 9px 11px;
    border-radius: 13px;
  }

  .public-portal .mg-service-card span {
    width: 38px;
    height: 38px;
    font-size: 19px;
  }

  .public-portal .mg-service-grid h3 {
    margin: 8px 0 4px;
    font-size: 12px;
  }

  .public-portal .mg-service-grid p {
    display: block;
    margin-bottom: 8px;
    font-size: 10.5px;
    line-height: 1.22;
  }

  .public-portal .mg-service-card strong {
    display: none;
    font-size: 10px;
  }

  .public-portal .mg-timeline {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    overflow: visible;
    padding: 0;
  }

  .public-portal .mg-timeline::before,
  .public-portal .mg-timeline::after {
    left: 18px;
    top: 18px;
    height: calc(100% - 36px);
  }

  .public-portal .mg-timeline article {
    width: auto;
    grid-template-columns: 42px minmax(0, 1fr);
    min-height: 46px;
    padding: 4px 0;
  }

  .public-portal .mg-timeline article > strong {
    top: 7px;
    left: 0;
    width: 20px;
    height: 20px;
    font-size: 10px;
  }

  .public-portal .mg-timeline article > span {
    width: 36px;
    height: 36px;
    font-size: 17px;
  }

  .public-portal .mg-timeline h3 {
    margin: 0 0 2px;
    font-size: 12px;
    line-height: 1.12;
  }

  .public-portal .mg-timeline p {
    font-size: 10.5px;
    line-height: 1.22;
  }

  .public-portal .mg-stats {
    margin: 12px 0;
    border-radius: 14px;
  }

  .public-portal .mg-stats div {
    min-height: 86px;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 3px;
    padding: 9px 8px;
    text-align: center;
  }

  .public-portal .mg-stats span {
    width: 32px;
    height: 32px;
    font-size: 16px;
    grid-row: auto;
  }

  .public-portal .mg-stats strong {
    font-size: 21px;
  }

  .public-portal .mg-stats p {
    font-size: 9.5px;
  }

  .public-portal .mg-country-strip {
    margin-bottom: 14px;
    padding: 8px 0;
  }

  .public-portal .mg-testimonials {
    max-height: 180px;
    padding: 8px 0 10px;
  }

  .public-portal .mg-testimonial-carousel {
    height: 128px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-portal .mg-how.is-visible .mg-timeline::after,
  .public-portal .mg-how.is-visible .mg-timeline article,
  .public-portal .mg-stats.is-visible {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .mg-testimonial-slide {
    transition: none;
  }
}

/* Reference alignment pass: compact premium home sections. */
.public-portal #services {
  padding-top: 18px;
}

.public-portal .mg-section-subtitle {
  margin: -9px auto 14px;
  color: #637087;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
  text-align: center;
}

.public-portal .mg-service-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.public-portal .mg-service-card {
  position: relative;
  min-height: 168px;
  padding: 16px 12px 18px;
  border-color: #e7eef5;
  border-radius: 12px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 14px 30px rgba(15, 35, 70, .08);
}

.public-portal .mg-service-card::after {
  content: "";
  width: 24px;
  height: 3px;
  margin-top: auto;
  border-radius: 999px;
  background: #008b84;
}

.public-portal .mg-service-card span {
  width: 52px;
  height: 52px;
  background: radial-gradient(circle at 38% 30%, #ffffff 0 18%, #ddfbf8 54%, #ecf7ff 100%);
  font-size: 25px;
  box-shadow: 0 12px 24px rgba(0, 143, 125, .13);
}

.public-portal .mg-service-grid h3 {
  margin: 12px 0 6px;
  color: #081d37;
  font-size: 14px;
  font-weight: 950;
  line-height: 1.12;
}

.public-portal .mg-service-grid p {
  max-width: 128px;
  margin: 0 auto 10px;
  color: #273a54;
  font-size: 10.5px;
  line-height: 1.32;
}

.public-portal .mg-service-card strong {
  display: none;
}

.public-portal .mg-service-cta {
  width: fit-content;
  min-height: 38px;
  margin: 12px auto 0;
  padding: 0 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #00a99d, #007f7a);
  box-shadow: 0 14px 28px rgba(0, 127, 122, .24);
}

.public-portal .mg-how {
  padding-top: 18px;
}

.public-portal .mg-how h2 {
  margin-bottom: 22px;
}

.public-portal .mg-how h2::after,
.public-portal #services h2::after {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin: 9px auto 0;
  border-radius: 999px;
  background: #008b84;
}

.public-portal .mg-timeline {
  gap: 16px;
}

.public-portal .mg-timeline::before {
  top: 30px;
  border-top: 2px dashed #85d4cd;
  background: transparent;
}

.public-portal .mg-timeline::after {
  display: none;
}

.public-portal .mg-timeline article {
  min-height: 128px;
  padding: 48px 16px 15px;
  border: 1px solid #e7eef5;
  border-radius: 14px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 14px 30px rgba(15, 35, 70, .07);
}

.public-portal .mg-timeline article > strong {
  top: 17px;
  left: 8px;
  width: 24px;
  height: 24px;
  font-size: 11px;
}

.public-portal .mg-timeline article > span {
  position: absolute;
  top: -28px;
  left: 50%;
  width: 58px;
  height: 58px;
  transform: translateX(-50%);
  border: 1px solid #dfeef6;
  background: radial-gradient(circle at 40% 30%, #fff 0 18%, #e7fbf8 58%, #f6fbff 100%);
  font-size: 25px;
  box-shadow: 0 14px 26px rgba(10, 44, 82, .1);
}

.public-portal .mg-timeline h3 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 950;
}

.public-portal .mg-timeline p {
  max-width: 188px;
  font-size: 10.5px;
  line-height: 1.35;
}

.public-portal .mg-stats {
  margin: 18px 0 12px;
  border-radius: 16px;
}

.public-portal .mg-stats div {
  min-height: 80px;
  grid-template-columns: 52px 1fr;
  gap: 11px;
  padding: 12px 18px;
}

.public-portal .mg-stats span {
  width: 46px;
  height: 46px;
  background: radial-gradient(circle at 40% 30%, #fff 0 18%, #dffbf7 58%, #f2fbff 100%);
}

.public-portal .mg-destinations {
  margin: 0 0 18px;
  padding: 12px 16px;
  border: 1px solid #e3ebf2;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(7, 31, 61, .06);
}

.public-portal .mg-destination-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.public-portal .mg-destination-head h2 {
  margin: 0;
  color: #071f3d;
  font-size: 18px;
  line-height: 1;
  text-align: left;
}

.public-portal .mg-destination-head a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #007f7a;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.public-portal .mg-destination-head a span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #eefbf9;
  color: #007f7a;
  font-size: 18px;
}

.public-portal .mg-destinations .mg-country-strip {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.public-portal .mg-destinations .mg-country-list span {
  min-height: 34px;
  padding: 6px 13px;
  border-radius: 10px;
}

@media (max-width: 1180px) {
  .public-portal .mg-service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .public-portal #services {
    padding-top: 14px;
  }

  .public-portal .mg-section-subtitle {
    display: none;
  }

  .public-portal .mg-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .public-portal .mg-service-card {
    min-height: 104px;
    padding: 10px 7px 11px;
    border-radius: 10px;
  }

  .public-portal .mg-service-card span {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  .public-portal .mg-service-grid h3 {
    margin: 7px 0 6px;
    font-size: 10.5px;
  }

  .public-portal .mg-service-grid p {
    display: none;
  }

  .public-portal .mg-service-card::after {
    width: 22px;
    height: 2px;
  }

  .public-portal .mg-service-cta {
    width: 100%;
    min-height: 42px;
    margin-top: 10px;
    border-radius: 12px;
    font-size: 12px;
  }

  .public-portal .mg-how {
    padding-top: 16px;
  }

  .public-portal .mg-how h2 {
    margin-bottom: 12px;
  }

  .public-portal .mg-timeline {
    gap: 7px;
  }

  .public-portal .mg-timeline::before {
    left: 11px;
    top: 15px;
    height: calc(100% - 30px);
    border: 0;
    background: #00a99d;
  }

  .public-portal .mg-timeline article {
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 34px;
    padding: 6px 10px 6px 36px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(7, 31, 61, .055);
  }

  .public-portal .mg-timeline article > strong {
    top: 6px;
    left: 0;
    width: 20px;
    height: 20px;
    font-size: 10px;
  }

  .public-portal .mg-timeline article > span {
    position: static;
    grid-row: 1;
    width: 24px;
    height: 24px;
    transform: none;
    font-size: 14px;
    box-shadow: none;
  }

  .public-portal .mg-timeline h3 {
    align-self: center;
    margin: 0;
    font-size: 10.5px;
    line-height: 1.1;
  }

  .public-portal .mg-timeline p {
    display: none;
  }

  .public-portal .mg-stats {
    margin: 10px 0 12px;
  }

  .public-portal .mg-stats div {
    min-height: 58px;
    grid-template-columns: 34px 1fr;
    grid-template-rows: auto auto;
    justify-items: start;
    gap: 7px;
    padding: 8px 10px;
    text-align: left;
  }

  .public-portal .mg-stats span {
    grid-row: 1 / 3;
    width: 30px;
    height: 30px;
    font-size: 15px;
  }

  .public-portal .mg-stats strong {
    grid-column: 2;
    font-size: 18px;
  }

  .public-portal .mg-stats p {
    grid-column: 2;
    font-size: 8.5px;
    line-height: 1.12;
  }

  .public-portal .mg-destinations {
    margin-bottom: 12px;
    padding: 10px 0 8px;
    border: 0;
    box-shadow: none;
  }

  .public-portal .mg-destination-head {
    padding-inline: 0;
  }

  .public-portal .mg-destination-head h2 {
    font-size: 13px;
  }

  .public-portal .mg-destination-head a {
    font-size: 0;
  }

  .public-portal .mg-destination-head a span {
    width: 26px;
    height: 26px;
    font-size: 18px;
  }

  .public-portal .mg-destinations .mg-country-list {
    gap: 9px;
  }

  .public-portal .mg-destinations .mg-country-list span {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-width: 48px;
    min-height: 46px;
    padding: 4px 5px;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: 8px;
  }

  .public-portal .mg-destinations .mg-country-list img {
    width: 28px;
    height: 21px;
  }
}

/* Exact focus: the "Comment ça fonctionne ?" section is the central visual anchor. */
.public-portal .mg-how {
  position: relative;
  padding-top: 18px;
}

.public-portal .mg-how h2 {
  margin-bottom: 34px;
  font-size: clamp(24px, 2.6vw, 31px);
}

.public-portal .mg-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  padding-top: 12px;
}

.public-portal .mg-timeline::before,
.public-portal .mg-timeline::after {
  display: none;
}

.public-portal .mg-timeline-path {
  position: absolute;
  left: 0;
  right: 0;
  top: -7px;
  z-index: 0;
  width: 100%;
  height: 74px;
  overflow: visible;
  pointer-events: none;
}

.public-portal .mg-timeline-path path {
  fill: none;
  stroke: #109b93;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 8 10;
  opacity: .78;
}

.public-portal .mg-timeline article {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  min-height: 132px;
  padding: 54px 18px 17px;
  border: 1px solid #e7eef5;
  border-radius: 16px;
  background: rgba(255, 255, 255, .96);
  text-align: center;
  box-shadow: 0 16px 34px rgba(15, 35, 70, .08);
}

.public-portal .mg-timeline article > strong {
  position: absolute;
  top: -18px;
  left: 19%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #008b84;
  color: #fff;
  font-size: 12px;
  font-weight: 950;
  box-shadow: 0 8px 18px rgba(0, 127, 122, .26);
}

.public-portal .mg-timeline article > span {
  position: absolute;
  top: -38px;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  transform: translateX(-50%);
  border: 1px solid #dfeaf4;
  border-radius: 999px;
  background: radial-gradient(circle at 42% 34%, #ffffff 0 20%, #e7fbf8 56%, #eef7ff 100%);
  color: #007f7a;
  font-size: 29px;
  box-shadow: 0 16px 30px rgba(15, 35, 70, .12);
}

.public-portal .mg-timeline h3 {
  margin: 0 0 7px;
  color: #0b1d36;
  font-size: 14px;
  font-weight: 950;
  line-height: 1.18;
}

.public-portal .mg-timeline p {
  max-width: 205px;
  margin: 0;
  color: #4c5d72;
  font-size: 11px;
  line-height: 1.38;
}

.public-portal .mg-how.is-visible .mg-timeline article {
  animation: mgStepReveal .62s cubic-bezier(.2, .78, .2, 1) forwards;
}

@media (max-width: 560px) {
  .public-portal .mg-how {
    padding-top: 14px;
  }

  .public-portal .mg-how h2 {
    margin-bottom: 12px;
    font-size: 18px;
  }

  .public-portal .mg-timeline {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 0 0 0 22px;
  }

  .public-portal .mg-timeline-path {
    display: none;
  }

  .public-portal .mg-timeline::before {
    content: "";
    position: absolute;
    display: block;
    left: 10px;
    top: 15px;
    bottom: 15px;
    width: 2px;
    border: 0;
    border-radius: 999px;
    background: #008b84;
  }

  .public-portal .mg-timeline article {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    min-height: 34px;
    padding: 5px 10px;
    border-radius: 10px;
    text-align: left;
    box-shadow: 0 8px 18px rgba(15, 35, 70, .07);
  }

  .public-portal .mg-timeline article > strong {
    top: 7px;
    left: -22px;
    width: 20px;
    height: 20px;
    font-size: 10px;
  }

  .public-portal .mg-timeline article > span {
    position: static;
    width: 25px;
    height: 25px;
    transform: none;
    border-radius: 8px;
    font-size: 14px;
    box-shadow: none;
  }

  .public-portal .mg-timeline h3 {
    margin: 0;
    font-size: 10px;
    line-height: 1.1;
    white-space: nowrap;
  }

  .public-portal .mg-timeline p {
    display: none;
  }
}

/* Final reference lock: keep the home information block compact on every desktop width. */
.public-portal #services,
.public-portal .mg-how,
.public-portal .mg-stats,
.public-portal .mg-destinations,
.public-portal .mg-testimonials,
.public-portal .mg-partner-band {
  width: min(1120px, calc(100vw - 48px));
  margin-left: auto;
  margin-right: auto;
}

.public-portal #services {
  padding-top: 16px;
  padding-bottom: 14px;
}

.public-portal #services h2,
.public-portal .mg-how h2 {
  margin-bottom: 10px;
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.05;
}

.public-portal .mg-section-subtitle {
  margin: 0 auto 13px;
  font-size: 12px;
  line-height: 1.25;
}

.public-portal .mg-service-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  overflow: visible;
}

.public-portal .mg-service-card {
  min-height: 146px;
  padding: 13px 9px 12px;
  border-radius: 10px;
}

.public-portal .mg-service-card span {
  width: 44px;
  height: 44px;
  font-size: 22px;
}

.public-portal .mg-service-grid h3 {
  margin: 10px 0 5px;
  font-size: 12.5px;
  line-height: 1.12;
}

.public-portal .mg-service-grid p {
  max-width: 118px;
  font-size: 9.5px;
  line-height: 1.25;
}

.public-portal .mg-service-cta {
  display: flex;
  min-height: 34px;
  margin-top: 10px;
  padding: 0 18px;
  font-size: 12px;
}

.public-portal .mg-how {
  padding-top: 14px;
  padding-bottom: 12px;
}

.public-portal .mg-how h2 {
  margin-bottom: 26px;
}

.public-portal .mg-timeline {
  grid-template-columns: repeat(4, minmax(190px, 220px));
  justify-content: space-between;
  gap: 18px;
  padding-top: 10px;
}

.public-portal .mg-timeline-path {
  top: -8px;
  height: 62px;
}

.public-portal .mg-timeline article {
  min-height: 118px;
  padding: 48px 12px 13px;
  border-radius: 12px;
}

.public-portal .mg-timeline article > span {
  top: -34px;
  width: 58px;
  height: 58px;
  font-size: 25px;
}

.public-portal .mg-timeline article > strong {
  top: -14px;
  left: 16%;
  width: 24px;
  height: 24px;
  font-size: 11px;
}

.public-portal .mg-timeline h3 {
  margin-bottom: 5px;
  font-size: 12px;
}

.public-portal .mg-timeline p {
  max-width: 165px;
  font-size: 9.5px;
  line-height: 1.32;
}

.public-portal .mg-stats {
  margin-top: 10px;
}

.public-portal .mg-stats div {
  min-height: 72px;
  padding: 10px 16px;
}

.public-portal .mg-stats strong {
  font-size: 24px;
}

.public-portal .mg-destinations {
  margin-top: 10px;
}

@media (min-width: 1500px) {
  .public-portal #services,
  .public-portal .mg-how,
  .public-portal .mg-stats,
  .public-portal .mg-destinations,
  .public-portal .mg-testimonials,
  .public-portal .mg-partner-band {
    width: min(1040px, calc(100vw - 64px));
  }

  .public-portal .mg-service-card {
    min-height: 140px;
  }

  .public-portal .mg-timeline article {
    min-height: 112px;
  }
}

@media (max-width: 860px) {
  .public-portal #services,
  .public-portal .mg-how,
  .public-portal .mg-stats,
  .public-portal .mg-destinations,
  .public-portal .mg-testimonials,
  .public-portal .mg-partner-band {
    width: min(100% - 24px, 720px);
  }

  .public-portal .mg-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .public-portal #services,
  .public-portal .mg-how,
  .public-portal .mg-stats,
  .public-portal .mg-destinations,
  .public-portal .mg-testimonials,
  .public-portal .mg-partner-band {
    width: min(100% - 24px, 430px);
  }

  .public-portal #services h2,
  .public-portal .mg-how h2 {
    font-size: 18px;
  }

  .public-portal .mg-service-card {
    min-height: 104px;
  }

  .public-portal .mg-timeline {
    grid-template-columns: 1fr;
    justify-content: stretch;
  }
}

@media (max-width: 560px) {
  .public-portal .mg-how {
    padding-top: 18px;
    padding-bottom: 10px;
  }

  .public-portal .mg-how h2 {
    margin-bottom: 12px;
    font-size: 18px;
  }

  .public-portal .mg-timeline {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 0 0 0 22px;
  }

  .public-portal .mg-timeline-path {
    display: none;
  }

  .public-portal .mg-timeline::before {
    content: "";
    position: absolute;
    display: block;
    left: 10px;
    top: 15px;
    bottom: 15px;
    width: 2px;
    height: auto;
    border: 0;
    border-radius: 999px;
    background: #008b84;
    transform: none;
  }

  .public-portal .mg-timeline article {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    column-gap: 8px;
    min-height: 38px;
    width: auto;
    padding: 6px 10px;
    border-radius: 10px;
    text-align: left;
  }

  .public-portal .mg-timeline article > strong {
    top: 8px;
    left: -22px;
    width: 20px;
    height: 20px;
    font-size: 10px;
  }

  .public-portal .mg-timeline article > span {
    position: static;
    grid-column: 1;
    grid-row: 1;
    width: 28px;
    height: 28px;
    transform: none;
    border-radius: 8px;
    font-size: 15px;
    box-shadow: none;
  }

  .public-portal .mg-timeline h3 {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    margin: 0;
    overflow: visible;
    color: #0b1d36;
    font-size: 10px;
    line-height: 1.12;
    white-space: normal;
  }

  .public-portal .mg-timeline p {
    display: none;
  }
}

/* Exact copy target for the "Comment ca fonctionne ?" flow. */
.public-portal .mg-how {
  width: min(1160px, calc(100vw - 48px));
  padding: 18px 0 12px;
}

.public-portal .mg-how h2 {
  margin: 0 0 34px;
  color: #071f3d;
  font-size: 29px;
  line-height: 1.05;
  font-weight: 950;
  text-align: center;
}

.public-portal .mg-how h2::after {
  width: 34px;
  height: 3px;
  margin-top: 10px;
  border-radius: 999px;
  background: #008b84;
}

.public-portal .mg-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 245px);
  justify-content: space-between;
  gap: 20px;
  min-height: 178px;
  padding-top: 52px;
}

.public-portal .mg-timeline::before,
.public-portal .mg-timeline::after {
  display: none;
}

.public-portal .mg-timeline-path {
  position: absolute;
  left: 0;
  right: 0;
  top: 7px;
  z-index: 1;
  display: block;
  width: 100%;
  height: 78px;
  overflow: visible;
  pointer-events: none;
}

.public-portal .mg-timeline-path path {
  fill: none;
  stroke: #158f88;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-dasharray: 5 8;
  opacity: .82;
}

.public-portal .mg-timeline article {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  align-content: start;
  min-height: 120px;
  padding: 48px 18px 15px;
  border: 1px solid #e7eef6;
  border-radius: 0 38px 18px 18px;
  background: rgba(255, 255, 255, .96);
  text-align: center;
  box-shadow: 0 14px 30px rgba(9, 32, 62, .075);
}

.public-portal .mg-timeline article > strong {
  position: absolute;
  top: -38px;
  left: -6px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #078982;
  color: #fff;
  font-size: 13px;
  font-weight: 950;
  box-shadow: 0 8px 18px rgba(0, 127, 122, .25);
}

.public-portal .mg-timeline article > span {
  position: absolute;
  top: -58px;
  left: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  transform: translateX(-50%);
  border: 1px solid #dcebf4;
  border-radius: 999px;
  background: radial-gradient(circle at 42% 34%, #ffffff 0 22%, #e8fbf8 56%, #f4f9ff 100%);
  color: #007f7a;
  font-size: 31px;
  box-shadow: 0 15px 30px rgba(15, 35, 70, .12);
}

.public-portal .mg-timeline h3 {
  margin: 0 0 8px;
  color: #0b1d36;
  font-size: 14px;
  line-height: 1.16;
  font-weight: 950;
}

.public-portal .mg-timeline p {
  max-width: 205px;
  margin: 0 auto;
  color: #40516a;
  font-size: 11px;
  line-height: 1.38;
  font-weight: 650;
}

@media (max-width: 1180px) {
  .public-portal .mg-how {
    width: min(100% - 40px, 1040px);
  }

  .public-portal .mg-timeline {
    grid-template-columns: repeat(4, minmax(0, 230px));
  }
}

@media (max-width: 760px) {
  .public-portal .mg-how {
    width: min(100% - 24px, 430px);
    padding-top: 16px;
  }

  .public-portal .mg-how h2 {
    margin-bottom: 14px;
    font-size: 18px;
  }

  .public-portal .mg-timeline {
    grid-template-columns: 1fr;
    justify-content: stretch;
    gap: 7px;
    min-height: 0;
    padding: 0 0 0 22px;
  }

  .public-portal .mg-timeline-path {
    display: none;
  }

  .public-portal .mg-timeline::before {
    content: "";
    position: absolute;
    display: block;
    left: 10px;
    top: 15px;
    bottom: 15px;
    width: 2px;
    border: 0;
    border-radius: 999px;
    background: #008b84;
  }

  .public-portal .mg-timeline article {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    column-gap: 8px;
    min-height: 38px;
    padding: 6px 10px;
    border-radius: 10px;
    text-align: left;
  }

  .public-portal .mg-timeline article > strong {
    top: 8px;
    left: -22px;
    width: 20px;
    height: 20px;
    font-size: 10px;
  }

  .public-portal .mg-timeline article > span {
    position: static;
    grid-column: 1;
    width: 28px;
    height: 28px;
    transform: none;
    border-radius: 8px;
    font-size: 15px;
    box-shadow: none;
  }

  .public-portal .mg-timeline h3 {
    grid-column: 2;
    margin: 0;
    font-size: 10px;
    line-height: 1.12;
  }

  .public-portal .mg-timeline p {
    display: none;
  }
}

/* Desktop flow reference composition: fixed visual geometry like the approved mockup. */
@media (min-width: 861px) {
  .public-portal .mg-how {
    width: min(1280px, calc(100vw - 48px));
    margin-top: 4px;
    padding: 12px 0 10px;
    overflow: visible;
  }

  .public-portal .mg-how h2 {
    margin: 0 0 30px;
    font-size: 28px;
    line-height: 1.05;
    letter-spacing: 0;
  }

  .public-portal .mg-how h2::after {
    width: 34px;
    height: 3px;
    margin-top: 9px;
  }

  .public-portal .mg-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 300px);
    justify-content: space-between;
    gap: 0;
    min-height: 174px;
    padding-top: 68px;
  }

  .public-portal .mg-timeline-path {
    left: 0;
    top: 18px;
    z-index: 2;
    width: 100%;
    height: 74px;
  }

  .public-portal .mg-timeline-path path {
    stroke: #0f8f88;
    stroke-width: 2.35;
    stroke-dasharray: 5 9;
    opacity: .9;
  }

  .public-portal .mg-timeline article {
    position: relative;
    z-index: 3;
    width: 300px;
    min-height: 118px;
    padding: 49px 22px 15px;
    border: 1px solid rgba(210, 226, 238, .9);
    border-radius: 0 32px 16px 16px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(255, 255, 255, .94));
    box-shadow:
      0 16px 32px rgba(15, 35, 70, .07),
      inset 0 1px 0 rgba(255, 255, 255, .8);
  }

  .public-portal .mg-timeline article::before {
    content: "";
    position: absolute;
    top: -18px;
    left: calc(50% - 106px);
    z-index: 2;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #0f9b92;
    box-shadow: 0 0 0 5px rgba(15, 155, 146, .08);
  }

  .public-portal .mg-timeline article:first-of-type::before {
    display: none;
  }

  .public-portal .mg-timeline article > strong {
    top: -39px;
    left: -5px;
    z-index: 6;
    width: 30px;
    height: 30px;
    background: #078982;
    font-size: 13px;
    box-shadow: 0 10px 22px rgba(0, 127, 122, .25);
  }

  .public-portal .mg-timeline article > span {
    top: -58px;
    left: 50%;
    z-index: 5;
    width: 72px;
    height: 72px;
    border: 1px solid #dcebf4;
    background:
      radial-gradient(circle at 40% 30%, #ffffff 0 22%, #ebfbf8 56%, #f4f9ff 100%);
    font-size: 31px;
    box-shadow:
      0 16px 30px rgba(15, 35, 70, .14),
      inset 0 1px 0 rgba(255, 255, 255, .9);
  }

  .public-portal .mg-timeline h3 {
    margin: 0 0 8px;
    font-size: 15px;
    line-height: 1.12;
  }

  .public-portal .mg-timeline p {
    max-width: 235px;
    font-size: 12px;
    line-height: 1.36;
    font-weight: 650;
  }
}

@media (min-width: 861px) and (max-width: 1180px) {
  .public-portal .mg-how {
    width: min(100% - 40px, 1040px);
  }

  .public-portal .mg-timeline {
    grid-template-columns: repeat(4, 240px);
  }

  .public-portal .mg-timeline article {
    width: 240px;
    padding-inline: 14px;
  }

  .public-portal .mg-timeline p {
    max-width: 200px;
    font-size: 10.5px;
  }
}

/* Hard lock desktop flow layout: no flexible stretch, exact fixed composition. */
@media (min-width: 861px) {
  body.public-portal .showcase-main .mg-how {
    position: relative !important;
    width: min(1260px, calc(100vw - 64px)) !important;
    height: 270px !important;
    margin: 10px auto 14px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body.public-portal .showcase-main .mg-how h2 {
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    margin: 0 !important;
    height: 50px !important;
    color: #071f3d !important;
    font-size: 28px !important;
    line-height: 1.05 !important;
    font-weight: 950 !important;
    text-align: center !important;
  }

  body.public-portal .showcase-main .mg-how h2::after {
    content: "" !important;
    display: block !important;
    width: 34px !important;
    height: 3px !important;
    margin: 10px auto 0 !important;
    border-radius: 999px !important;
    background: #008b84 !important;
  }

  body.public-portal .showcase-main .mg-timeline {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 78px !important;
    display: block !important;
    width: 100% !important;
    height: 178px !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body.public-portal .showcase-main .mg-timeline::before,
  body.public-portal .showcase-main .mg-timeline::after {
    display: none !important;
  }

  body.public-portal .showcase-main .mg-timeline-path {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
    height: 88px !important;
    overflow: visible !important;
    pointer-events: none !important;
  }

  body.public-portal .showcase-main .mg-timeline-path path {
    fill: none !important;
    stroke: #0c8f87 !important;
    stroke-width: 2.4 !important;
    stroke-linecap: round !important;
    stroke-dasharray: 5 9 !important;
    opacity: .92 !important;
  }

  body.public-portal .showcase-main .mg-timeline article {
    position: absolute !important;
    top: 60px !important;
    z-index: 3 !important;
    display: grid !important;
    justify-items: center !important;
    align-content: start !important;
    width: 292px !important;
    height: 120px !important;
    min-height: 120px !important;
    padding: 49px 18px 12px !important;
    border: 1px solid rgba(210, 226, 238, .95) !important;
    border-radius: 0 34px 16px 16px !important;
    background: rgba(255, 255, 255, .97) !important;
    text-align: center !important;
    box-shadow: 0 16px 32px rgba(15, 35, 70, .07) !important;
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
  }

  body.public-portal .showcase-main .mg-timeline article:nth-of-type(1) {
    left: 0 !important;
  }

  body.public-portal .showcase-main .mg-timeline article:nth-of-type(2) {
    left: calc((100% - 292px) / 3) !important;
  }

  body.public-portal .showcase-main .mg-timeline article:nth-of-type(3) {
    left: calc((100% - 292px) / 3 * 2) !important;
  }

  body.public-portal .showcase-main .mg-timeline article:nth-of-type(4) {
    right: 0 !important;
  }

  body.public-portal .showcase-main .mg-timeline article::before {
    content: "" !important;
    position: absolute !important;
    top: -49px !important;
    left: -2px !important;
    z-index: 4 !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 999px !important;
    background: #0f9b92 !important;
    box-shadow: 0 0 0 5px rgba(15, 155, 146, .1) !important;
  }

  body.public-portal .showcase-main .mg-timeline article:first-of-type::before {
    display: none !important;
  }

  body.public-portal .showcase-main .mg-timeline article > strong {
    position: absolute !important;
    top: -55px !important;
    left: -4px !important;
    z-index: 6 !important;
    display: grid !important;
    place-items: center !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 999px !important;
    background: #078982 !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    box-shadow: 0 10px 22px rgba(0, 127, 122, .25) !important;
  }

  body.public-portal .showcase-main .mg-timeline article > span {
    position: absolute !important;
    top: -76px !important;
    left: 50% !important;
    z-index: 5 !important;
    display: grid !important;
    place-items: center !important;
    width: 72px !important;
    height: 72px !important;
    transform: translateX(-50%) !important;
    border: 1px solid #dcebf4 !important;
    border-radius: 999px !important;
    background: radial-gradient(circle at 40% 30%, #ffffff 0 22%, #ebfbf8 56%, #f4f9ff 100%) !important;
    color: #007f7a !important;
    font-size: 31px !important;
    box-shadow: 0 16px 30px rgba(15, 35, 70, .14) !important;
  }

  body.public-portal .showcase-main .mg-timeline h3 {
    margin: 0 0 8px !important;
    color: #0b1d36 !important;
    font-size: 15px !important;
    line-height: 1.12 !important;
    font-weight: 950 !important;
  }

  body.public-portal .showcase-main .mg-timeline p {
    display: block !important;
    max-width: 238px !important;
    margin: 0 auto !important;
    color: #40516a !important;
    font-size: 12px !important;
    line-height: 1.36 !important;
    font-weight: 650 !important;
  }
}

@media (min-width: 861px) and (max-width: 1180px) {
  body.public-portal .showcase-main .mg-timeline article {
    width: 236px !important;
  }

  body.public-portal .showcase-main .mg-timeline article:nth-of-type(2) {
    left: calc((100% - 236px) / 3) !important;
  }

  body.public-portal .showcase-main .mg-timeline article:nth-of-type(3) {
    left: calc((100% - 236px) / 3 * 2) !important;
  }

  body.public-portal .showcase-main .mg-timeline p {
    max-width: 198px !important;
    font-size: 10.5px !important;
  }
}

/* Restore public assistant buttons on mobile home. */
@media (max-width: 1024px) {
  body.public-portal .mg-assist-layer {
    display: grid !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
    z-index: 220 !important;
  }

  body.public-portal:has(.candidate-apply-page) .mg-assist-layer,
  body.public-portal:has(.agent-apply-page) .mg-assist-layer {
    display: none !important;
  }

  body.public-portal .mg-float-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    justify-items: end !important;
  }

  body.public-portal .mg-float-btn {
    display: grid !important;
    width: 56px !important;
    height: 56px !important;
  }

  body.public-portal .mg-float-btn span {
    width: 40px !important;
    height: 40px !important;
    font-size: 21px !important;
  }

  body.public-portal .mg-float-btn strong {
    display: none !important;
  }
}

/* Replacement design for the public process section: stable, compact, premium. */
body.public-portal .showcase-main .mg-how {
  width: min(1120px, calc(100vw - 48px)) !important;
  height: auto !important;
  margin: 18px auto !important;
  padding: 22px 24px 24px !important;
  border: 1px solid rgba(211, 226, 238, .9) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(135deg, rgba(241, 250, 249, .88), rgba(255, 255, 255, .98) 42%, rgba(246, 249, 255, .92)) !important;
  box-shadow: 0 18px 44px rgba(7, 31, 61, .075) !important;
  overflow: hidden !important;
}

body.public-portal .showcase-main .mg-how h2 {
  position: static !important;
  height: auto !important;
  margin: 0 0 18px !important;
  color: #071f3d !important;
  font-size: clamp(22px, 2.4vw, 30px) !important;
  line-height: 1.08 !important;
  text-align: center !important;
}

body.public-portal .showcase-main .mg-how h2::after {
  content: "" !important;
  display: block !important;
  width: 36px !important;
  height: 3px !important;
  margin: 10px auto 0 !important;
  border-radius: 999px !important;
  background: #008b84 !important;
}

body.public-portal .showcase-main .mg-timeline {
  position: static !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
}

body.public-portal .showcase-main .mg-timeline-path,
body.public-portal .showcase-main .mg-timeline::before,
body.public-portal .showcase-main .mg-timeline::after {
  display: none !important;
}

body.public-portal .showcase-main .mg-timeline article {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  justify-items: start !important;
  column-gap: 12px !important;
  row-gap: 4px !important;
  width: auto !important;
  height: auto !important;
  min-height: 116px !important;
  padding: 18px 16px !important;
  border: 1px solid rgba(217, 230, 240, .95) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .96) !important;
  text-align: left !important;
  box-shadow: 0 12px 28px rgba(7, 31, 61, .06) !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

body.public-portal .showcase-main .mg-timeline article:nth-child(1),
body.public-portal .showcase-main .mg-timeline article:nth-child(2),
body.public-portal .showcase-main .mg-timeline article:nth-child(3),
body.public-portal .showcase-main .mg-timeline article:nth-child(4) {
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
}

body.public-portal .showcase-main .mg-timeline article:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(0, 143, 132, .28) !important;
  box-shadow: 0 18px 34px rgba(7, 31, 61, .09) !important;
}

body.public-portal .showcase-main .mg-timeline article::before {
  display: none !important;
}

body.public-portal .showcase-main .mg-timeline article > strong {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  z-index: 2 !important;
  display: grid !important;
  place-items: center !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 999px !important;
  background: #008b84 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  box-shadow: 0 8px 18px rgba(0, 127, 122, .2) !important;
}

body.public-portal .showcase-main .mg-timeline article > span {
  position: static !important;
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  height: 48px !important;
  transform: none !important;
  border: 1px solid rgba(198, 234, 230, .9) !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #e7fbf8, #f5f9ff) !important;
  color: #007f7a !important;
  font-size: 23px !important;
  box-shadow: none !important;
}

body.public-portal .showcase-main .mg-timeline h3 {
  grid-column: 2 !important;
  grid-row: 1 !important;
  margin: 0 !important;
  padding-right: 30px !important;
  color: #071f3d !important;
  font-size: 14px !important;
  line-height: 1.18 !important;
  font-weight: 950 !important;
}

body.public-portal .showcase-main .mg-timeline p {
  grid-column: 2 !important;
  grid-row: 2 !important;
  display: block !important;
  max-width: none !important;
  margin: 0 !important;
  color: #526176 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  font-weight: 650 !important;
}

@media (max-width: 980px) {
  body.public-portal .showcase-main .mg-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  body.public-portal .showcase-main .mg-how {
    width: min(100% - 24px, 430px) !important;
    margin: 16px auto !important;
    padding: 16px 12px !important;
    border-radius: 18px !important;
  }

  body.public-portal .showcase-main .mg-how h2 {
    margin-bottom: 12px !important;
    font-size: 19px !important;
  }

  body.public-portal .showcase-main .mg-timeline {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body.public-portal .showcase-main .mg-timeline article {
    min-height: 70px !important;
    padding: 12px 12px !important;
    border-radius: 14px !important;
  }

  body.public-portal .showcase-main .mg-timeline article > span {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    font-size: 19px !important;
  }

  body.public-portal .showcase-main .mg-timeline h3 {
    font-size: 12px !important;
  }

  body.public-portal .showcase-main .mg-timeline p {
    font-size: 10px !important;
  }
}

/* Hero copy update: keep the requested first visual and long headline stable. */
body.public-portal .mg-hero-frame.is-first {
  opacity: 1;
}

body.public-portal .mg-hero-frame.is-first .mg-hero-copy h1 {
  max-width: min(760px, 58vw) !important;
  font-size: clamp(50px, 5.4vw, 82px) !important;
  line-height: 1.05 !important;
}

body.public-portal .mg-hero-frame.is-first .mg-hero-copy p {
  max-width: min(650px, 54vw) !important;
  font-size: clamp(17px, 1.55vw, 25px) !important;
  line-height: 1.45 !important;
}

@media (max-width: 860px) {
  body.public-portal .mg-hero-frame.is-first .mg-hero-copy h1 {
    max-width: 64% !important;
    font-size: clamp(34px, 7.2vw, 52px) !important;
  }

  body.public-portal .mg-hero-frame.is-first .mg-hero-copy p {
    max-width: 60% !important;
    font-size: clamp(13px, 2.7vw, 17px) !important;
  }
}

@media (max-width: 560px) {
  body.public-portal .mg-hero-frame.is-first .mg-hero-copy h1 {
    max-width: 66% !important;
    font-size: clamp(24px, 7vw, 31px) !important;
    line-height: 1.08 !important;
  }

  body.public-portal .mg-hero-frame.is-first .mg-hero-copy p {
    max-width: 62% !important;
    font-size: clamp(11px, 3.25vw, 13px) !important;
    line-height: 1.35 !important;
  }
}

/* Mobile cleanup: compact services and restore a lighter process flow. */
@media (max-width: 560px) {
  body.public-portal .mg-service-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: min(100% - 24px, 430px) !important;
    margin-inline: auto !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  body.public-portal .mg-service-card {
    min-width: 0 !important;
    min-height: 84px !important;
    height: 84px !important;
    padding: 8px 7px 7px !important;
    border-radius: 12px !important;
    gap: 5px !important;
    justify-content: center !important;
    box-shadow: 0 10px 22px rgba(7, 31, 61, .055) !important;
  }

  body.public-portal .mg-service-card span {
    width: 32px !important;
    height: 32px !important;
    margin: 0 auto 2px !important;
    font-size: 16px !important;
  }

  body.public-portal .mg-service-grid h3 {
    min-height: 25px !important;
    margin: 0 !important;
    font-size: 10.5px !important;
    line-height: 1.12 !important;
  }

  body.public-portal .mg-service-grid p,
  body.public-portal .mg-service-card strong {
    display: none !important;
  }

  body.public-portal .mg-service-cta {
    width: min(100% - 24px, 430px) !important;
    min-height: 42px !important;
    margin: 10px auto 0 !important;
    font-size: 12px !important;
  }

  body.public-portal .showcase-main .mg-how {
    width: min(100% - 24px, 430px) !important;
    margin: 14px auto !important;
    padding: 14px 12px !important;
    border-radius: 18px !important;
    background: linear-gradient(145deg, rgba(241, 250, 249, .92), rgba(255, 255, 255, .98)) !important;
    box-shadow: 0 14px 28px rgba(7, 31, 61, .06) !important;
  }

  body.public-portal .showcase-main .mg-how h2 {
    margin-bottom: 12px !important;
    font-size: 19px !important;
  }

  body.public-portal .showcase-main .mg-timeline {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    padding-left: 18px !important;
  }

  body.public-portal .showcase-main .mg-timeline::before {
    content: "" !important;
    position: absolute !important;
    display: block !important;
    left: 13px !important;
    top: 20px !important;
    bottom: 20px !important;
    width: 2px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #00998f, rgba(0, 153, 143, .12)) !important;
  }

  body.public-portal .showcase-main .mg-timeline article {
    display: grid !important;
    grid-template-columns: 28px 34px minmax(0, 1fr) !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    min-height: 46px !important;
    height: 46px !important;
    padding: 6px 10px 6px 0 !important;
    border: 1px solid rgba(218, 231, 241, .9) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 8px 16px rgba(7, 31, 61, .045) !important;
  }

  body.public-portal .showcase-main .mg-timeline article > strong {
    position: static !important;
    grid-column: 1 !important;
    display: grid !important;
    width: 24px !important;
    height: 24px !important;
    margin-left: -12px !important;
    font-size: 11px !important;
  }

  body.public-portal .showcase-main .mg-timeline article > span {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 9px !important;
    font-size: 15px !important;
  }

  body.public-portal .showcase-main .mg-timeline h3 {
    grid-column: 3 !important;
    grid-row: 1 !important;
    padding-right: 0 !important;
    font-size: 11px !important;
    line-height: 1.12 !important;
  }

  body.public-portal .showcase-main .mg-timeline p {
    display: none !important;
  }
}

/* Compact animated stats strip. */
body.public-portal .showcase-main .mg-stats {
  width: min(1120px, calc(100vw - 48px)) !important;
  min-height: 0 !important;
  margin: 12px auto 14px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(247, 252, 251, .94)) !important;
  box-shadow: 0 12px 28px rgba(7, 31, 61, .06) !important;
}

body.public-portal .showcase-main .mg-stats div {
  position: relative !important;
  min-height: 72px !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  gap: 5px 12px !important;
  padding: 10px 18px !important;
  overflow: hidden !important;
}

body.public-portal .showcase-main .mg-stats div::after {
  content: "" !important;
  position: absolute !important;
  inset: auto 14px 0 14px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, rgba(0, 153, 143, .45), transparent) !important;
  opacity: 0 !important;
  transform: translateX(-35%) !important;
}

body.public-portal .showcase-main .mg-stats span {
  grid-row: 1 / 3 !important;
  width: 38px !important;
  height: 38px !important;
  font-size: 18px !important;
}

body.public-portal .showcase-main .mg-stats strong {
  grid-column: 2 !important;
  color: #007f7a !important;
  font-size: clamp(24px, 2.25vw, 34px) !important;
  line-height: .95 !important;
}

body.public-portal .showcase-main .mg-stats p {
  grid-column: 2 !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
}

body.public-portal .showcase-main .mg-stats.is-visible div {
  animation: mgStatCardIn .56s cubic-bezier(.2, .78, .2, 1) both !important;
}

body.public-portal .showcase-main .mg-stats.is-visible div:nth-child(1) { animation-delay: .02s !important; }
body.public-portal .showcase-main .mg-stats.is-visible div:nth-child(2) { animation-delay: .09s !important; }
body.public-portal .showcase-main .mg-stats.is-visible div:nth-child(3) { animation-delay: .16s !important; }
body.public-portal .showcase-main .mg-stats.is-visible div:nth-child(4) { animation-delay: .23s !important; }

body.public-portal .showcase-main .mg-stats.is-visible span {
  animation: mgStatIconPulse 1.8s ease-in-out infinite !important;
}

body.public-portal .showcase-main .mg-stats.is-visible div::after {
  animation: mgStatSweep 1.4s ease .28s both !important;
}

@keyframes mgStatCardIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes mgStatIconPulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 153, 143, .14);
  }
  50% {
    transform: scale(1.045);
    box-shadow: 0 0 0 7px rgba(0, 153, 143, 0);
  }
}

@keyframes mgStatSweep {
  0% {
    opacity: 0;
    transform: translateX(-45%);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(45%);
  }
}

@media (max-width: 560px) {
  body.public-portal .showcase-main .mg-stats {
    width: min(100% - 24px, 430px) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin: 10px auto 12px !important;
    border-radius: 15px !important;
  }

  body.public-portal .showcase-main .mg-stats div {
    min-height: 42px !important;
    grid-template-columns: 21px minmax(0, 1fr) !important;
    gap: 1px 6px !important;
    padding: 5px 8px !important;
  }

  body.public-portal .showcase-main .mg-stats div:nth-child(2) {
    border-right: 0 !important;
  }

  body.public-portal .showcase-main .mg-stats div:nth-child(1),
  body.public-portal .showcase-main .mg-stats div:nth-child(2) {
    border-bottom: 1px solid #e3ebf2 !important;
  }

  body.public-portal .showcase-main .mg-stats span {
    width: 19px !important;
    height: 19px !important;
    font-size: 10px !important;
  }

  body.public-portal .showcase-main .mg-stats strong {
    font-size: 18px !important;
  }

  body.public-portal .showcase-main .mg-stats p {
    font-size: 7px !important;
    line-height: 1.02 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.public-portal .showcase-main .mg-stats.is-visible div,
  body.public-portal .showcase-main .mg-stats.is-visible span,
  body.public-portal .showcase-main .mg-stats.is-visible div::after {
    animation: none !important;
  }
}

/* Mobile services: three compact columns, two balanced rows for six services. */
@media (max-width: 560px) {
  body.public-portal .showcase-main .mg-service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: min(100% - 24px, 430px) !important;
  }

  body.public-portal .showcase-main .mg-service-card {
    height: 74px !important;
    min-height: 74px !important;
    padding: 8px 5px 7px !important;
    border-radius: 11px !important;
    gap: 3px !important;
  }

  body.public-portal .showcase-main .mg-service-card span {
    width: 28px !important;
    height: 28px !important;
    margin-bottom: 1px !important;
    font-size: 14px !important;
  }

  body.public-portal .showcase-main .mg-service-grid h3 {
    min-height: 27px !important;
    max-width: 100% !important;
    font-size: clamp(8px, 2.35vw, 9.4px) !important;
    line-height: 1.08 !important;
    overflow-wrap: anywhere !important;
    text-wrap: balance !important;
  }

  body.public-portal .showcase-main .mg-service-card:nth-child(7) {
    grid-column: 2 !important;
  }
}

/* Public insurance request flow. */
.insurance-apply-page {
  display: grid;
  gap: 18px;
  width: min(1120px, calc(100vw - 32px));
  margin: 24px auto 42px;
}

.insurance-hero {
  display: grid;
  gap: 10px;
  padding: clamp(28px, 5vw, 54px);
  border: 1px solid rgba(207, 225, 237, .9);
  border-radius: 24px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.96), rgba(255,255,255,.78)),
    radial-gradient(circle at 88% 20%, rgba(0, 153, 143, .16), transparent 34%),
    linear-gradient(135deg, #eefbf8, #f7fbff);
  box-shadow: 0 20px 52px rgba(7, 31, 61, .08);
}

.insurance-hero span {
  width: fit-content;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(0, 153, 143, .1);
  color: #007f7a;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.insurance-hero h1 {
  max-width: 760px;
  margin: 0;
  color: #071f3d;
  font-size: clamp(32px, 5vw, 62px);
  line-height: 1;
}

.insurance-hero p {
  max-width: 680px;
  margin: 0;
  color: #526176;
  font-size: clamp(15px, 1.7vw, 20px);
  line-height: 1.5;
}

.insurance-form-card {
  display: grid;
  gap: 16px;
  padding: clamp(16px, 3vw, 28px);
  border: 1px solid #dce8f2;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(7, 31, 61, .07);
}

.insurance-stepper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.insurance-stepper li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 9px 10px;
  border: 1px solid #dce8f2;
  border-radius: 14px;
  color: #526176;
  background: #f8fbfd;
  font-weight: 850;
}

.insurance-stepper strong {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #e7eef5;
  color: #526176;
  font-size: 13px;
}

.insurance-stepper li.active,
.insurance-stepper li.completed {
  border-color: rgba(0, 153, 143, .35);
  background: rgba(237, 253, 250, .92);
  color: #071f3d;
}

.insurance-stepper li.active strong,
.insurance-stepper li.completed strong {
  background: #008b84;
  color: #fff;
}

.insurance-step {
  display: none;
  gap: 16px;
}

.insurance-step.active {
  display: grid;
}

.insurance-payment-panel {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(0, 153, 143, .18);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(237, 253, 250, .96), rgba(255,255,255,.98));
}

.insurance-payment-panel > strong {
  color: #071f3d;
  font-size: 18px;
}

.insurance-payment-panel > p {
  margin: 0;
  color: #526176;
}

.insurance-plan-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
  color: #526176;
}

.insurance-pay-item,
.insurance-pay-note {
  min-width: 0;
  padding: 12px;
  border: 1px solid #dce8f2;
  border-radius: 12px;
  background: #fff;
  color: #071f3d;
  font-style: normal;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.insurance-pay-item {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
  align-content: start;
  min-height: 96px;
}

.insurance-pay-label {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #526176;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 850;
  text-transform: uppercase;
  box-shadow: none !important;
  overflow-wrap: anywhere;
}

.insurance-pay-value {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #008b84;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 950;
  line-height: 1.15;
  box-shadow: none !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.insurance-pay-note {
  grid-column: 1 / -1;
  margin: 0;
  color: #526176;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 650;
}

@media (max-width: 760px) {
  .insurance-stepper {
    grid-template-columns: 1fr 1fr;
  }

  .insurance-plan-summary {
    grid-template-columns: 1fr 1fr;
  }

  .insurance-form-card .form-grid {
    grid-template-columns: 1fr;
  }

  .insurance-form-card .span-2,
  .insurance-form-card .span-3 {
    grid-column: auto;
  }
}

@media (max-width: 560px) {
  .insurance-apply-page {
    width: min(100% - 24px, 430px);
    margin-top: 16px;
  }

  .insurance-hero {
    padding: 22px 16px;
    border-radius: 18px;
  }

  .insurance-hero h1 {
    font-size: 30px;
  }

  .insurance-plan-summary {
    grid-template-columns: 1fr;
  }
}

/* Insurance form mobile polish on the dossier-form template. */
.insurance-candidate-page .insurance-payment-panel {
  min-width: 0;
}

.insurance-candidate-page .insurance-payment-panel > strong,
.insurance-candidate-page .insurance-payment-panel > p {
  min-width: 0;
}

.insurance-candidate-page .insurance-plan-summary {
  width: 100%;
  min-width: 0;
}

.insurance-candidate-page .insurance-pay-value {
  word-break: break-word;
}

@media (max-width: 720px) {
  .insurance-candidate-page .candidate-stepper {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }

  .insurance-candidate-page .candidate-stepper-card {
    overflow: hidden;
  }

  .insurance-candidate-page .candidate-stepper li {
    min-width: 0;
  }

  .insurance-candidate-page .candidate-stepper span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .insurance-candidate-page .insurance-payment-panel {
    gap: 10px;
    padding: 12px;
    border-radius: 14px;
  }

  .insurance-candidate-page .insurance-payment-panel > strong {
    font-size: 17px;
    line-height: 1.2;
  }

  .insurance-candidate-page .insurance-payment-panel > p {
    font-size: 12.5px;
    line-height: 1.35;
  }

  .insurance-candidate-page .insurance-plan-summary {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .insurance-candidate-page .insurance-pay-item,
  .insurance-candidate-page .insurance-pay-note {
    padding: 10px;
    border-radius: 11px;
  }

  .insurance-candidate-page .insurance-pay-label {
    font-size: 10px;
  }

  .insurance-candidate-page .insurance-pay-value {
    font-size: 17px;
    line-height: 1.15;
  }
}

@media (max-width: 460px) {
  .insurance-candidate-page {
    gap: 10px;
  }

  .insurance-candidate-page .candidate-stepper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 8px;
  }

  .insurance-candidate-page .candidate-stepper::before {
    display: none;
  }

  .insurance-candidate-page .candidate-stepper li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px;
    align-items: center;
  }

  .insurance-candidate-page .candidate-stepper em {
    display: none;
  }

  .insurance-candidate-page .candidate-stepper span {
    text-align: left;
  }

  .insurance-candidate-page .insurance-plan-summary {
    grid-template-columns: 1fr;
  }

  .insurance-candidate-page .insurance-pay-value {
    font-size: 18px;
  }
}

/* Seven services support after adding Insurance. */
@media (min-width: 981px) {
  body.public-portal .showcase-main .mg-service-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }

  body.public-portal .showcase-main .mg-service-card {
    min-height: 132px !important;
    padding-inline: 10px !important;
  }

  body.public-portal .showcase-main .mg-service-card span {
    width: 44px !important;
    height: 44px !important;
    font-size: 22px !important;
  }

  body.public-portal .showcase-main .mg-service-grid h3 {
    font-size: 12px !important;
  }

  body.public-portal .showcase-main .mg-service-grid p {
    font-size: 9px !important;
  }
}

.workflow-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

.workflow-steps div {
  min-height: 78px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.workflow-steps span {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-bottom: 8px;
  border-radius: 999px;
  background: #eef4f7;
  color: var(--muted);
  font-weight: 850;
  font-size: 12px;
}

.workflow-steps strong {
  display: block;
  font-size: 13px;
  line-height: 1.25;
  color: var(--ink);
}

.workflow-steps .done {
  border-color: #a7f3d0;
  background: #f0fdf4;
}

.workflow-steps .done span {
  background: var(--green);
  color: #fff;
}

.workflow-steps .current {
  border-color: var(--teal);
  box-shadow: 0 14px 30px rgba(13, 148, 136, .12);
}

.compact-workflow {
  grid-template-columns: 1fr;
}

.payment-meter {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.payment-meter > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 13px;
}

.mini-chart {
  display: grid;
  gap: 10px;
}

.mini-chart div {
  display: grid;
  grid-template-columns: 72px 1fr 32px;
  align-items: center;
  gap: 10px;
}

.mini-chart span,
.mini-chart em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.mini-chart strong {
  display: block;
  min-width: 6px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), var(--blue));
}

.compact-summary-grid {
  grid-template-columns: 1fr;
}

@media (max-width: 720px) {
  .workflow-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mini-chart div {
    grid-template-columns: 62px 1fr 28px;
  }
}

@media (min-width: 1180px) {
  .admin-dashboard + .dashboard-side,
  .premium-dashboard {
    min-width: 0;
  }

  .premium-metrics,
  .metrics.premium-metrics {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 7px;
  }

  .agent-metrics {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 7px;
  }

  .premium-metrics .metric,
  .agent-metrics .metric,
  .authenticated-shell .metrics .metric {
    min-height: 58px;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 3px 7px;
    padding: 8px 9px;
    border-radius: 8px;
  }

  .premium-metrics .metric-icon,
  .agent-metrics .metric-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    grid-row: 1 / span 2;
  }

  .premium-metrics .metric-icon::before,
  .agent-metrics .metric-icon::before {
    width: 14px;
    height: 14px;
  }

  .premium-metrics .metric strong,
  .agent-metrics .metric strong,
  .metric strong {
    font-size: 18px;
    line-height: 1;
    white-space: nowrap;
  }

  .premium-metrics .metric span:last-child,
  .agent-metrics .metric span:last-child,
  .metric span:last-child {
    font-size: 10px;
    line-height: 1.08;
    white-space: normal;
  }
}

@media (min-width: 1180px) {
  .premium-metrics .metric,
  .agent-metrics .metric {
    justify-items: center;
    align-items: center;
    align-content: center;
    text-align: center;
  }

  .premium-metrics .metric-icon,
  .agent-metrics .metric-icon {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
  }

  .premium-metrics .metric strong,
  .agent-metrics .metric strong {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    max-width: 100%;
    font-size: clamp(16px, 1.18vw, 20px);
  }

  .premium-metrics .metric span:last-child,
  .agent-metrics .metric span:last-child {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    max-width: 100%;
    text-align: center;
    font-size: clamp(9px, .72vw, 11px);
    font-weight: 850;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .agent-metrics .metric {
    grid-template-columns: auto auto;
    min-height: 64px;
    padding: 8px 10px;
  }

  .premium-metrics .metric {
    grid-template-columns: auto auto;
    min-height: 62px;
    padding: 8px;
  }
}