:root {
  --navy-950: #040b18;
  --navy-900: #061329;
  --navy-850: #091a35;
  --navy-800: #0b2143;
  --blue-700: #0755c9;
  --blue-600: #0875ee;
  --blue-500: #1798ff;
  --blue-300: #77c8ff;
  --silver-100: #edf4fa;
  --silver-200: #dbe6ef;
  --silver-400: #91a5b5;
  --ink: #0b1727;
  --muted: #5e6e7e;
  --white: #ffffff;
  --success: #1fbf77;
  --warning: #f3a72b;
  --danger: #eb5c66;
  --font-sans: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 82px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  background: #f4f7fa;
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  max-width: 100%;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

img {
  display: block;
  max-width: 100%;
}

.site-page {
  min-height: 100vh;
  overflow: hidden;
  background: var(--white);
}

.section-shell {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.public-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: calc(82px + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(4, 11, 24, 0.88);
  backdrop-filter: blur(18px);
}

.public-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1260px, calc(100% - 36px));
  height: 100%;
  margin: 0 auto;
  gap: 24px;
}

.header-brand {
  display: flex;
  align-items: center;
  width: 150px;
  height: 74px;
  overflow: hidden;
}

.brand-logo {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 16px 30px rgba(0, 72, 205, 0.22));
}

.brand-logo--compact {
  width: 150px;
  height: auto;
}

.desktop-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 3vw, 42px);
  margin-left: auto;
  margin-right: 24px;
}

.desktop-nav a {
  position: relative;
  padding: 29px 0;
  color: #c9d7e5;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.01em;
  transition: color 180ms ease;
}

.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 21px;
  height: 2px;
  background: var(--blue-500);
  transition: right 180ms ease;
}

.desktop-nav a:hover {
  color: white;
}

.desktop-nav a:hover::after {
  right: 0;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 760;
  letter-spacing: 0.01em;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

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

.button--small {
  min-height: 42px;
  padding: 0 17px;
  font-size: 13px;
}

.button--outline {
  border-color: rgba(119, 200, 255, 0.42);
  color: #e8f6ff;
  background: rgba(8, 117, 238, 0.09);
}

.button--outline:hover {
  border-color: var(--blue-300);
  background: rgba(8, 117, 238, 0.2);
}

.button--primary {
  background: linear-gradient(135deg, var(--blue-600), #0655cb);
  color: white;
  box-shadow: 0 12px 30px rgba(6, 98, 219, 0.28);
}

.button--primary:hover {
  background: linear-gradient(135deg, #148cff, #075bcf);
  box-shadow: 0 16px 34px rgba(6, 98, 219, 0.38);
}

.button--ghost {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.045);
  color: #dceafa;
}

.button--ghost span,
.text-link span {
  margin-left: 8px;
  color: var(--blue-300);
}

.button--white {
  background: white;
  color: var(--navy-900);
  box-shadow: 0 12px 28px rgba(0, 20, 60, 0.2);
}

.button--ghost-light {
  border-color: rgba(255, 255, 255, 0.35);
  color: white;
}

.button--block {
  width: 100%;
}

.hero {
  position: relative;
  min-height: 770px;
  padding-top: calc(82px + env(safe-area-inset-top));
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 42%, rgba(8, 85, 201, 0.25), transparent 38%),
    linear-gradient(117deg, var(--navy-950) 0%, var(--navy-900) 51%, #0a1d3a 100%);
  color: white;
}

.hero__grid {
  position: absolute;
  inset: 0;
  opacity: 0.11;
  background-image: linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, transparent 4%, black 44%, transparent 94%);
}

.hero__grid::after {
  content: "";
  position: absolute;
  inset: 20% -10% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(23, 152, 255, .8), transparent);
  transform: rotate(-8deg);
}

.hero__glow {
  position: absolute;
  border-radius: 999px;
  filter: blur(2px);
  pointer-events: none;
}

.hero__glow--one {
  top: 90px;
  right: -180px;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(61, 166, 255, .15);
  box-shadow: inset 0 0 120px rgba(6, 88, 217, .08);
}

.hero__glow--two {
  bottom: 0;
  left: 38%;
  width: 260px;
  height: 260px;
  background: rgba(0, 95, 255, .13);
  filter: blur(85px);
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(390px, .98fr);
  align-items: center;
  gap: 40px;
  min-height: 614px;
  padding: 60px 0 76px;
}

.hero__copy {
  position: relative;
  z-index: 3;
  padding-top: 4px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  color: #9fc5e6;
  font-size: 12px;
  font-weight: 760;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.eyebrow span {
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--blue-500);
  box-shadow: 0 0 12px rgba(23, 152, 255, .8);
}

.eyebrow--blue {
  color: var(--blue-700);
}

.hero h1,
.section h2,
.login-card h1 {
  margin: 0;
  letter-spacing: -.055em;
  line-height: .98;
}

.hero h1 {
  max-width: 670px;
  font-size: clamp(52px, 4.9vw, 70px);
  font-weight: 820;
}

.hero h1 em {
  display: block;
  color: var(--blue-500);
  font-style: normal;
  white-space: nowrap;
}

.hero__copy > p {
  max-width: 610px;
  margin: 28px 0 0;
  color: #aec0d2;
  font-size: 17px;
  line-height: 1.7;
}

.hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.hero__assurances {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 28px;
  color: #95aac0;
  font-size: 12px;
  font-weight: 620;
}

.hero__assurances span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.hero__assurances i {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: rgba(31, 191, 119, .14);
  color: #6ee5ad;
  font-size: 10px;
  font-style: normal;
}

.hero__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 500px;
}

.hero__visual::before {
  content: "";
  position: absolute;
  width: 470px;
  height: 470px;
  border: 1px solid rgba(69, 164, 255, .13);
  border-radius: 50%;
  box-shadow: 0 0 0 62px rgba(31, 120, 255, .025), 0 0 0 124px rgba(31, 120, 255, .018);
}

.hero__logo-wrap {
  position: relative;
  z-index: 2;
  width: min(650px, 112%);
  transform: translateY(-2px) scale(1.05);
}

.hero__logo-wrap .brand-logo {
  filter: drop-shadow(0 34px 48px rgba(0, 0, 0, .46)) drop-shadow(0 0 28px rgba(23, 152, 255, .13));
}

.service-signal {
  position: absolute;
  z-index: 5;
  right: -8px;
  bottom: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 230px;
  padding: 14px 18px;
  border: 1px solid rgba(122, 194, 255, .24);
  border-radius: 11px;
  background: rgba(5, 18, 39, .83);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
  backdrop-filter: blur(13px);
}

.service-signal__pulse {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #35d993;
  box-shadow: 0 0 0 5px rgba(53, 217, 147, .12);
}

.service-signal__pulse::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px solid rgba(53, 217, 147, .35);
  border-radius: 50%;
}

.service-signal div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.service-signal strong {
  font-size: 13px;
}

.service-signal small {
  color: #89a4bc;
  font-size: 10px;
}

.hero__rail {
  position: absolute;
  z-index: 3;
  inset: auto 0 0;
  height: 74px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: rgba(2, 8, 18, .54);
  backdrop-filter: blur(8px);
}

.hero__rail-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  color: #738da7;
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .19em;
}

.hero__rail-inner i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--blue-600);
}

.section {
  position: relative;
  padding: 112px 0;
}

.section--light {
  background: #f5f8fb;
}

.section-heading {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 470px);
  align-items: end;
  gap: 48px;
  margin-bottom: 54px;
}

.section h2 {
  font-size: clamp(42px, 5vw, 64px);
  font-weight: 820;
}

.section-heading > p,
.portal-showcase__copy > p {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.72;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.service-card {
  position: relative;
  min-height: 345px;
  padding: 26px 25px;
  border: 1px solid #dce5ed;
  border-radius: 14px;
  overflow: hidden;
  background: white;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.service-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  background: linear-gradient(90deg, var(--blue-700), var(--blue-500));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}

.service-card:hover {
  transform: translateY(-7px);
  border-color: #c8d8e6;
  box-shadow: 0 24px 60px rgba(22, 48, 77, .11);
}

.service-card:hover::after {
  transform: scaleX(1);
}

.service-card__top {
  display: flex;
  justify-content: space-between;
  color: #9aabba;
  font-family: var(--font-geist-mono), monospace;
  font-size: 11px;
}

.service-card__top i {
  color: var(--blue-600);
  font-size: 17px;
  font-style: normal;
}

.service-card__icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 38px 0 25px;
  border: 1px solid #cce4f8;
  border-radius: 13px;
  background: linear-gradient(145deg, #edf8ff, #f8fcff);
  color: var(--blue-700);
  box-shadow: inset 0 0 0 5px white;
}

.service-card__icon b {
  font-family: var(--font-geist-mono), monospace;
  font-size: 19px;
}

.service-card h3 {
  margin: 0 0 13px;
  font-size: 20px;
  letter-spacing: -.025em;
}

.service-card p {
  margin: 0;
  color: #657587;
  font-size: 13px;
  line-height: 1.67;
}

.section--ink {
  overflow: hidden;
  background: var(--navy-900);
  color: white;
}

.section--ink::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .055;
  background-image: linear-gradient(90deg, transparent 49.7%, white 50%, transparent 50.3%);
  background-size: 260px 100%;
}

.section-heading--dark > p {
  color: #91a9c1;
}

.workflow-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.workflow-step {
  position: relative;
  padding: 0 30px 0 0;
}

.workflow-step > span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(77, 169, 255, .43);
  border-radius: 50%;
  background: #0b2347;
  color: #86c7ff;
  font-family: var(--font-geist-mono), monospace;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 0 0 7px rgba(13, 105, 221, .07);
}

.workflow-step__line {
  position: absolute;
  top: 22px;
  left: 54px;
  right: 8px;
  height: 1px;
  background: linear-gradient(90deg, rgba(44, 145, 250, .55), rgba(44, 145, 250, .08));
}

.workflow-step:last-child .workflow-step__line {
  display: none;
}

.workflow-step h3 {
  margin: 29px 0 12px;
  font-size: 18px;
  letter-spacing: -.02em;
}

.workflow-step p {
  max-width: 230px;
  margin: 0;
  color: #829ab2;
  font-size: 13px;
  line-height: 1.68;
}

.portal-showcase {
  overflow: hidden;
  background: white;
}

.portal-showcase::after {
  content: "";
  position: absolute;
  top: 80px;
  right: -220px;
  width: 650px;
  height: 650px;
  border-radius: 50%;
  background: rgba(32, 133, 245, .055);
}

.portal-showcase__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  align-items: center;
  gap: 80px;
}

.portal-showcase__copy h2 {
  max-width: 530px;
}

.portal-showcase__copy > p {
  margin-top: 28px;
}

.check-list {
  display: grid;
  gap: 17px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  display: grid;
  grid-template-columns: 25px 1fr;
  gap: 11px;
  align-items: start;
  color: #5f7182;
  font-size: 13px;
  line-height: 1.55;
}

.check-list i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e5f8ef;
  color: #149c5d;
  font-size: 11px;
  font-style: normal;
}

.check-list strong {
  color: #1a2a3a;
}

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 6px;
  color: #263a4e;
  font-size: 13px;
  font-weight: 720;
}

.dashboard-preview {
  position: relative;
  min-height: 480px;
  border: 1px solid #dbe6ef;
  border-radius: 18px;
  overflow: hidden;
  background: #f4f7fa;
  box-shadow: 0 35px 90px rgba(20, 51, 84, .17);
  transform: perspective(1200px) rotateY(-3deg) rotateX(1deg);
}

.dashboard-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
}

.dashboard-preview__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 20px;
  background: var(--navy-900);
}

.mini-brand {
  color: white;
  font-size: 19px;
  font-style: italic;
  font-weight: 900;
  letter-spacing: -.08em;
  text-shadow: 0 0 15px var(--blue-500);
}

.dashboard-preview__dots {
  display: flex;
  gap: 6px;
}

.dashboard-preview__dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #526a81;
}

.dashboard-preview__body {
  display: grid;
  grid-template-columns: 61px 1fr;
  min-height: 420px;
}

.dashboard-preview__body aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  padding-top: 34px;
  border-right: 1px solid #dbe5ed;
  background: white;
}

.dashboard-preview__body aside i {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: #d2dce5;
}

.dashboard-preview__body aside i.active {
  background: var(--blue-600);
  box-shadow: 0 0 0 6px #e5f2ff;
}

.dashboard-preview__content {
  padding: 30px;
}

.dashboard-preview__content > small {
  color: #7f92a5;
  font-family: var(--font-geist-mono), monospace;
  font-size: 8px;
  letter-spacing: .13em;
}

.preview-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 11px;
}

.preview-title > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.preview-title strong {
  font-size: 16px;
}

.preview-title span {
  padding: 4px 7px;
  border-radius: 5px;
  background: #e7edf3;
  color: #546779;
  font-size: 8px;
  font-weight: 800;
}

.preview-title > b {
  padding: 7px 10px;
  border-radius: 50px;
  background: #fff3dc;
  color: #b8790a;
  font-size: 8px;
}

.preview-progress {
  display: grid;
  grid-template-columns: 1fr 34px;
  align-items: center;
  gap: 9px;
  margin: 20px 0 22px;
}

.preview-progress > span {
  height: 7px;
  border-radius: 8px;
  overflow: hidden;
  background: #dce6ef;
}

.preview-progress > span i {
  display: block;
  width: 68%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue-700), var(--blue-500));
}

.preview-progress em {
  color: var(--blue-700);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.preview-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.preview-cards i {
  height: 74px;
  border: 1px solid #e0e8ef;
  border-radius: 9px;
  background: white;
}

.preview-cards i::before,
.preview-cards i::after {
  content: "";
  display: block;
  height: 6px;
  margin: 18px 14px 0;
  border-radius: 5px;
  background: #dce6ef;
}

.preview-cards i::after {
  width: 45%;
  margin-top: 8px;
  background: #98cfff;
}

.preview-docs {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.preview-docs > div {
  display: grid;
  grid-template-columns: 31px 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 8px 12px;
  border: 1px solid #e0e8ef;
  border-radius: 8px;
  background: white;
}

.preview-docs > div > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: #eaf5ff;
  color: var(--blue-700);
  font-size: 8px;
  font-weight: 850;
}

.preview-docs p {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
}

.preview-docs p strong {
  font-size: 9px;
}

.preview-docs p small {
  color: #91a0af;
  font-size: 7px;
}

.preview-docs > div > b {
  color: #9aabba;
  font-family: var(--font-geist-mono), monospace;
  font-size: 7px;
}

.contact-band {
  padding: 80px 0;
  overflow: hidden;
  background: linear-gradient(120deg, #086ed9, #074eae);
  color: white;
}

.contact-band::before {
  content: "";
  position: absolute;
  top: -230px;
  right: -100px;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 50%;
  box-shadow: 0 0 0 80px rgba(255,255,255,.025), 0 0 0 160px rgba(255,255,255,.018);
}

.contact-band__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 50px;
}

.contact-band h2 {
  font-size: clamp(36px, 4vw, 54px);
}

.contact-band p {
  max-width: 700px;
  margin: 20px 0 0;
  color: #d3eaff;
  font-size: 14px;
  line-height: 1.6;
}

.contact-band .eyebrow {
  color: #d7edff;
}

.contact-band .eyebrow span {
  background: white;
}

.contact-band__actions {
  display: flex;
  align-items: center;
  gap: 11px;
}

.public-footer {
  background: var(--navy-950);
  color: #72889e;
}

.public-footer__inner {
  display: grid;
  grid-template-columns: 180px 1fr auto;
  align-items: center;
  min-height: 105px;
  gap: 28px;
}

.public-footer p,
.public-footer span {
  margin: 0;
  font-size: 12px;
}

/* Login */
.login-page {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: max(32px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  overflow: hidden;
  background: var(--navy-950);
  color: white;
}

.login-page::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .12;
  background-image: linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 50% 50%, black, transparent 72%);
}

.login-page::after {
  content: "";
  position: absolute;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: rgba(0, 101, 255, .15);
  filter: blur(110px);
}

.login-back {
  position: absolute;
  z-index: 3;
  top: 24px;
  left: 28px;
  color: #a8bad0;
  font-size: 13px;
  font-weight: 650;
}

.login-back:hover {
  color: white;
}

.login-card {
  position: relative;
  z-index: 2;
  width: min(455px, 100%);
  padding: 36px;
  border: 1px solid rgba(126, 188, 255, .23);
  border-radius: 20px;
  background: rgba(7, 22, 47, .88);
  box-shadow: 0 35px 90px rgba(0,0,0,.42);
  backdrop-filter: blur(18px);
}

.login-logo {
  width: 220px;
  margin: -26px auto 0;
}

.login-card__heading {
  margin-top: -8px;
  text-align: center;
}

.login-card h1 {
  font-size: 35px;
}

.login-card__heading p {
  margin: 13px auto 0;
  color: #94aac1;
  font-size: 13px;
  line-height: 1.55;
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 25px 0;
  color: #637a92;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.1);
}

.login-help {
  margin: 20px 0 0;
  color: #71879d;
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}

@media (max-width: 1050px) {
  .desktop-nav {
    display: none;
  }

  .hero__inner {
    grid-template-columns: 1.05fr .95fr;
  }

  .hero__logo-wrap {
    width: 580px;
  }

  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .service-card {
    min-height: 300px;
  }

  .portal-showcase__inner {
    gap: 45px;
  }
}

@media (max-width: 820px) {
  .public-header {
    height: calc(70px + env(safe-area-inset-top));
  }

  .public-header__inner {
    height: 70px;
    width: auto;
    margin-right: max(11px, env(safe-area-inset-right));
    margin-left: max(11px, env(safe-area-inset-left));
  }

  .header-brand {
    width: 116px;
    height: 66px;
  }

  .brand-logo--compact {
    width: 120px;
  }

  .hero {
    min-height: 930px;
    padding-top: calc(70px + env(safe-area-inset-top));
  }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 70px 0 115px;
  }

  .hero__copy {
    text-align: center;
  }

  .eyebrow,
  .hero__actions,
  .hero__assurances {
    justify-content: center;
  }

  .hero__copy > p {
    margin-left: auto;
    margin-right: auto;
  }

  .hero__visual {
    min-height: 360px;
  }

  .hero__logo-wrap {
    width: min(610px, 100%);
  }

  .service-signal {
    right: 8%;
    bottom: 18px;
  }

  .hero__rail-inner span:nth-of-type(4),
  .hero__rail-inner span:nth-of-type(5),
  .hero__rail-inner i:nth-of-type(3),
  .hero__rail-inner i:nth-of-type(4) {
    display: none;
  }

  .section {
    padding: 84px 0;
  }

  .section-heading,
  .portal-showcase__inner,
  .contact-band__inner {
    grid-template-columns: 1fr;
  }

  .section-heading {
    gap: 24px;
  }

  .section-heading .eyebrow,
  .portal-showcase .eyebrow,
  .contact-band .eyebrow {
    justify-content: flex-start;
  }

  .workflow-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 16px;
  }

  .workflow-step:nth-child(2) .workflow-step__line {
    display: none;
  }

  .dashboard-preview {
    transform: none;
  }

  .contact-band__actions {
    justify-content: flex-start;
  }

  .public-footer__inner {
    grid-template-columns: 150px 1fr;
  }

  .public-footer span {
    grid-column: 1 / -1;
    padding-bottom: 22px;
  }
}

@media (max-width: 560px) {
  .section-shell {
    width: min(100% - 28px, 1180px);
  }

  .public-header__inner {
    width: auto;
  }

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

  .hero {
    min-height: 850px;
  }

  .hero__inner {
    padding-top: 54px;
  }

  .hero h1 {
    font-size: clamp(39px, 12vw, 47px);
  }

  .hero h1 em {
    white-space: normal;
  }

  .hero__copy > p {
    font-size: 15px;
  }

  .hero__actions .button {
    width: 100%;
  }

  .hero__assurances {
    gap: 12px 16px;
  }

  .hero__visual {
    min-height: 300px;
  }

  .hero__logo-wrap {
    transform: scale(1.1);
  }

  .hero__visual::before {
    width: 330px;
    height: 330px;
  }

  .service-signal {
    right: 8px;
    bottom: 7px;
    min-width: 210px;
  }

  .hero__rail {
    height: 62px;
  }

  .hero__rail-inner {
    font-size: 9px;
  }

  .section {
    padding: 70px 0;
  }

  .section h2 {
    font-size: clamp(34px, 10.5vw, 41px);
  }

  .section-heading {
    margin-bottom: 36px;
  }

  .service-grid,
  .workflow-grid {
    grid-template-columns: 1fr;
  }

  .service-card {
    min-height: 285px;
  }

  .workflow-grid {
    gap: 36px;
  }

  .workflow-step__line {
    display: none;
  }

  .dashboard-preview {
    min-height: 420px;
    margin: 0 -4px;
  }

  .dashboard-preview__body {
    grid-template-columns: 46px 1fr;
  }

  .dashboard-preview__content {
    padding: 21px 16px;
  }

  .preview-title {
    align-items: flex-start;
  }

  .preview-title > div {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  .preview-title strong {
    font-size: 13px;
  }

  .preview-cards i {
    height: 60px;
  }

  .contact-band {
    padding: 66px 0;
  }

  .contact-band__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .public-footer__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 5px;
    padding: 17px 0 22px;
    text-align: center;
  }

  .public-footer span {
    grid-column: auto;
    padding: 0;
  }

  .login-card {
    padding: 28px 22px;
  }

  .login-back {
    top: 17px;
    left: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* Portal */
.portal-app {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  min-height: 100svh;
  background: #eef3f7;
}

.portal-sidebar {
  position: fixed;
  z-index: 30;
  inset: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  width: 264px;
  padding: 10px 14px 18px;
  border-right: 1px solid rgba(255, 255, 255, .07);
  background: var(--navy-950);
  color: white;
}

.portal-sidebar__brand {
  display: block;
  width: 184px;
  height: 105px;
  margin: 0 auto 4px;
  overflow: hidden;
}

.portal-sidebar__brand .brand-logo--compact {
  width: 184px;
}

.portal-sidebar__label {
  margin: 5px 11px 10px;
  color: #587086;
  font-family: var(--font-geist-mono), monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.role-nav {
  display: grid;
  gap: 5px;
}

.role-nav button {
  display: grid;
  grid-template-columns: 37px 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 62px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #8da2b6;
  cursor: pointer;
  text-align: left;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.role-nav button:hover {
  background: rgba(255,255,255,.04);
  color: #c8d6e2;
}

.role-nav button.active {
  border-color: rgba(54, 151, 255, .22);
  background: linear-gradient(90deg, rgba(8, 117, 238, .18), rgba(8, 117, 238, .055));
  color: white;
  box-shadow: inset 3px 0 0 var(--blue-500);
}

.role-nav button > span {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border: 1px solid #263b50;
  border-radius: 8px;
  background: #0d1d2d;
  color: #7d94a9;
  font-family: var(--font-geist-mono), monospace;
  font-size: 12px;
  font-weight: 850;
}

.role-nav button.active > span {
  border-color: rgba(44, 153, 255, .4);
  background: #0c3260;
  color: #8bd0ff;
}

.role-nav button div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.role-nav button strong {
  font-size: 12px;
}

.role-nav button small {
  color: #5f768c;
  font-size: 9px;
}

.portal-sidebar__footer {
  display: grid;
  grid-template-columns: 39px 1fr;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 14px 9px 4px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--blue-600), #07489f);
  color: white;
  font-weight: 800;
}

.portal-sidebar__footer > div:last-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.portal-sidebar__footer strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-sidebar__footer small {
  color: #698096;
  font-size: 9px;
}

.portal-main {
  grid-column: 2;
  min-width: 0;
}

.portal-topbar {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
  padding: 0 clamp(22px, 3.5vw, 54px);
  border-bottom: 1px solid #dce5ed;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(15px);
}

.portal-topbar > div,
.portal-topbar__right {
  display: flex;
  align-items: center;
  gap: 13px;
}

.portal-topbar p {
  margin: 0;
  color: #5f7183;
  font-size: 11px;
  font-weight: 650;
}

.mobile-rs {
  display: none;
  color: var(--blue-700);
  font-size: 18px;
  font-style: italic;
  font-weight: 900;
  letter-spacing: -.08em;
}

.demo-chip {
  padding: 7px 10px;
  border: 1px solid #cfe2f4;
  border-radius: 50px;
  background: #eef7ff;
  color: #1765b4;
  font-family: var(--font-geist-mono), monospace;
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .06em;
}

.portal-exit {
  padding: 8px 11px;
  color: #526476;
  font-size: 10px;
  font-weight: 700;
}

.portal-exit:hover {
  color: var(--blue-700);
}

.mobile-role-switcher {
  display: none;
}

.portal-content {
  width: min(1260px, calc(100% - 64px));
  margin: 0 auto;
  padding: 45px 0 max(72px, calc(44px + env(safe-area-inset-bottom)));
}

.prototype-note {
  display: grid;
  grid-template-columns: 27px 1fr;
  align-items: center;
  gap: 11px;
  margin-bottom: 24px;
  padding: 11px 14px;
  border: 1px solid #cfe2f4;
  border-radius: 9px;
  background: #f7fbff;
  color: #587087;
}

.prototype-note > span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ddecfb;
  color: var(--blue-700);
  font-family: Georgia, serif;
  font-size: 12px;
  font-weight: 700;
}

.prototype-note p {
  margin: 0;
  font-size: 10px;
  line-height: 1.5;
}

.prototype-note strong {
  color: #23394e;
  margin-right: 4px;
}

.portal-page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 29px;
}

.portal-page-heading small,
.panel-heading small,
.vehicle-detail__top small {
  display: block;
  margin-bottom: 8px;
  color: var(--blue-700);
  font-family: var(--font-geist-mono), monospace;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .14em;
}

.portal-page-heading h1 {
  margin: 0;
  color: #102338;
  font-size: clamp(29px, 3vw, 40px);
  letter-spacing: -.045em;
  line-height: 1.05;
}

.portal-page-heading p {
  margin: 9px 0 0;
  color: #728496;
  font-size: 12px;
  line-height: 1.55;
}

.portal-date {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 3px;
  text-align: right;
}

.portal-date span {
  color: #96a6b4;
  font-size: 8px;
  text-transform: uppercase;
}

.portal-date strong {
  color: #46596b;
  font-size: 10px;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px;
  margin-bottom: 15px;
}

.stat-grid--four {
  grid-template-columns: repeat(4, 1fr);
}

.stat-card {
  display: grid;
  grid-template-columns: 47px 1fr;
  align-items: center;
  gap: 14px;
  min-height: 108px;
  padding: 19px;
  border: 1px solid #dfe7ee;
  border-radius: 11px;
  background: white;
  box-shadow: 0 7px 24px rgba(34, 58, 80, .035);
}

.stat-card__icon {
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  border-radius: 10px;
  background: #eaf5ff;
  color: var(--blue-700);
  font-family: var(--font-geist-mono), monospace;
  font-size: 13px;
  font-weight: 850;
}

.stat-card--orange .stat-card__icon {
  background: #fff3df;
  color: #bb7300;
}

.stat-card--green .stat-card__icon {
  background: #e7f8ef;
  color: #138c55;
}

.stat-card > div:last-child {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  min-width: 0;
}

.stat-card span {
  grid-column: 1;
  color: #76889a;
  font-size: 9px;
  font-weight: 650;
}

.stat-card strong {
  grid-column: 1;
  margin-top: 3px;
  color: #172b40;
  font-size: 24px;
  letter-spacing: -.04em;
}

.stat-card small {
  grid-column: 2;
  grid-row: 2;
  padding-bottom: 4px;
  color: #9aa8b5;
  font-size: 8px;
  text-align: right;
}

.panel {
  min-width: 0;
  border: 1px solid #dfe7ee;
  border-radius: 12px;
  background: white;
  box-shadow: 0 8px 26px rgba(34, 58, 80, .035);
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 15px 20px;
  border-bottom: 1px solid #e7edf2;
}

.panel-heading small {
  margin-bottom: 5px;
}

.panel-heading h2 {
  margin: 0;
  color: #1a2d41;
  font-size: 16px;
  letter-spacing: -.025em;
}

.panel-heading > span {
  padding: 5px 8px;
  border-radius: 50px;
  background: #eff4f8;
  color: #6a7d8e;
  font-size: 8px;
  font-weight: 750;
}

.panel-heading > button {
  border: 0;
  background: transparent;
  color: var(--blue-700);
  cursor: pointer;
  font-size: 9px;
  font-weight: 750;
}

.portal-two-column {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(330px, .86fr);
  gap: 15px;
  margin-bottom: 15px;
}

.vehicle-list {
  display: grid;
  padding: 6px 9px;
}

.vehicle-list > button {
  display: grid;
  grid-template-columns: 44px 1fr auto 14px;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 69px;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.vehicle-list > button + button {
  border-top-color: #edf1f5;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.vehicle-list > button.active {
  border-color: #cfe4f7;
  background: #f4faff;
}

.vehicle-thumb,
.vehicle-detail__mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: linear-gradient(145deg, #e6eef5, #f8fafc);
  color: #3f5c75;
  font-family: var(--font-geist-mono), monospace;
  font-size: 14px;
  font-weight: 850;
  box-shadow: inset 0 0 0 1px #d8e2ea;
}

.vehicle-row__main {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.vehicle-row__main strong {
  color: #23374b;
  font-size: 10px;
}

.vehicle-row__main span {
  color: #8999a8;
  font-size: 8px;
}

.vehicle-list > button > b {
  color: #a3b0bc;
  font-size: 18px;
  font-weight: 400;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 50px;
  background: #e8f4ff;
  color: #1b6fbe;
  font-size: 7px;
  font-weight: 760;
  white-space: nowrap;
}

.status-pill i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #258ce9;
}

.status-pill--orange {
  background: #fff2df;
  color: #a96b09;
}

.status-pill--orange i {
  background: #eda72e;
}

.status-pill--green {
  background: #e7f8ef;
  color: #168c56;
}

.status-pill--green i {
  background: #24b875;
}

.vehicle-detail {
  padding-bottom: 17px;
}

.vehicle-detail__top {
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: center;
  gap: 13px;
  padding: 20px;
  border-bottom: 1px solid #e7edf2;
}

.vehicle-detail__mark {
  width: 54px;
  height: 54px;
  background: linear-gradient(145deg, #e9f5ff, #f8fcff);
  color: var(--blue-700);
}

.vehicle-detail__top h2 {
  margin: 0 0 5px;
  color: #1b2f43;
  font-size: 14px;
}

.vehicle-detail__top span {
  color: #8495a4;
  font-size: 7px;
}

.inspection-state {
  margin: 17px 20px 13px;
  padding: 13px;
  border: 1px solid #dbe9f5;
  border-radius: 9px;
  background: #f6fbff;
}

.inspection-state > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.inspection-state span {
  color: #63798e;
  font-size: 8px;
}

.inspection-state strong {
  color: var(--blue-700);
  font-size: 10px;
}

.inspection-state__bar {
  height: 6px;
  margin-top: 9px;
  overflow: hidden;
  border-radius: 6px;
  background: #dae6f0;
}

.inspection-state__bar i,
.check-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue-700), var(--blue-500));
  transition: width 250ms ease;
}

.inspection-state p {
  margin: 10px 0 0;
  color: #3d5368;
  font-size: 8px;
}

.inspection-state p span {
  margin-right: 4px;
  color: #8c9ba9;
}

.timeline {
  display: grid;
  margin: 0 20px;
}

.timeline > div {
  position: relative;
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 9px;
  min-height: 42px;
}

.timeline > div:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 0;
  left: 9px;
  width: 1px;
  background: #dce4eb;
}

.timeline i {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border: 2px solid #c9d4de;
  border-radius: 50%;
  background: white;
  color: white;
  font-size: 8px;
  font-style: normal;
}

.timeline .done i {
  border-color: var(--success);
  background: var(--success);
}

.timeline .active i {
  border-color: var(--blue-600);
  box-shadow: 0 0 0 4px #e6f3ff;
}

.timeline .active i::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue-600);
}

.timeline p {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 1px 0 0;
}

.timeline strong {
  color: #394d60;
  font-size: 8px;
}

.timeline span {
  color: #99a6b2;
  font-size: 7px;
}

.timeline .active strong {
  color: var(--blue-700);
}

.documents-panel {
  margin-top: 15px;
}

.documents-table {
  overflow: hidden;
}

.documents-table__head,
.documents-table__row {
  display: grid;
  grid-template-columns: minmax(240px, 1.6fr) .55fr .55fr .7fr .45fr;
  align-items: center;
  gap: 12px;
  min-width: 720px;
}

.documents-table__head {
  padding: 10px 20px;
  background: #f7f9fb;
  color: #8998a6;
  font-size: 7px;
  font-weight: 750;
  text-transform: uppercase;
}

.documents-table__row {
  width: 100%;
  min-height: 57px;
  padding: 7px 20px;
  border: 0;
  border-top: 1px solid #edf1f4;
  background: white;
  color: #728294;
  cursor: pointer;
  font-size: 8px;
  text-align: left;
}

.documents-table__row:hover {
  background: #fbfdff;
}

.doc-name {
  display: flex;
  align-items: center;
  gap: 10px;
}

.doc-name i,
.upload-list > div > i {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 6px;
  background: #eaf5ff;
  color: #1569bb;
  font-size: 7px;
  font-style: normal;
  font-weight: 850;
}

.doc-name strong {
  color: #30465a;
  font-size: 9px;
}

.documents-table__row em {
  padding: 5px 7px;
  border-radius: 5px;
  background: #f0f4f7;
  color: #5b6f81;
  font-size: 7px;
  font-style: normal;
  font-weight: 700;
}

.documents-table__row > span:last-child {
  color: var(--blue-700);
  font-weight: 750;
  text-align: right;
}

.mechanic-layout {
  grid-template-columns: 1fr minmax(310px, .68fr);
}

.check-progress {
  height: 5px;
  background: #e9eef2;
}

.task-list {
  display: grid;
  padding: 7px 12px 12px;
}

.task-list button {
  display: grid;
  grid-template-columns: 25px 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 49px;
  padding: 6px 7px;
  border: 0;
  border-bottom: 1px solid #edf1f4;
  background: white;
  color: #465a6e;
  cursor: pointer;
  text-align: left;
}

.task-list button:last-child {
  border-bottom: 0;
}

.task-list button i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid #c8d4df;
  border-radius: 6px;
  color: white;
  font-size: 9px;
  font-style: normal;
}

.task-list button.done i {
  border-color: var(--success);
  background: var(--success);
}

.task-list button span {
  font-size: 9px;
  font-weight: 650;
}

.task-list button.done span {
  color: #7d8e9d;
}

.task-list button b {
  color: var(--blue-700);
  font-size: 7px;
}

.task-list button.done b {
  color: #39a675;
}

.upload-panel {
  padding-bottom: 17px;
}

.form-label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #536779;
  font-size: 8px;
  font-weight: 750;
}

.upload-panel > .form-label,
.upload-panel > .upload-dropzone,
.upload-panel > .button {
  margin-left: 18px;
  margin-right: 18px;
}

.upload-panel > .form-label {
  margin-top: 16px;
}

.form-label input,
.form-label select {
  width: 100%;
  height: 40px;
  padding: 0 11px;
  border: 1px solid #cedae4;
  border-radius: 7px;
  outline: none;
  background: white;
  color: #31475b;
  font-size: 10px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.form-label input:focus,
.form-label select:focus {
  border-color: #6cb7f7;
  box-shadow: 0 0 0 3px #e8f5ff;
}

.upload-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 134px;
  margin-top: 13px;
  margin-bottom: 12px;
  padding: 18px;
  border: 1px dashed #a9bfd2;
  border-radius: 9px;
  background: #f7fafc;
  cursor: pointer;
  text-align: center;
}

.upload-dropzone:hover,
.upload-dropzone.has-file {
  border-color: #68b2f3;
  background: #f2f9ff;
}

.upload-dropzone input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.upload-dropzone > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 9px;
  border-radius: 9px;
  background: #e2f1ff;
  color: var(--blue-700);
  font-size: 19px;
  font-weight: 500;
}

.upload-dropzone strong {
  max-width: 220px;
  overflow: hidden;
  color: #3a5268;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-dropzone small {
  margin-top: 5px;
  color: #97a6b4;
  font-size: 7px;
}

.upload-panel .button {
  min-height: 40px;
  font-size: 10px;
}

.upload-list {
  display: grid;
  padding: 6px 17px 12px;
}

.upload-list > div {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 53px;
  border-bottom: 1px solid #edf1f4;
}

.upload-list > div:last-child {
  border-bottom: 0;
}

.upload-list p {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}

.upload-list strong {
  color: #33495e;
  font-size: 9px;
}

.upload-list span {
  color: #8d9ba8;
  font-size: 7px;
}

.upload-list b {
  padding: 5px 7px;
  border-radius: 50px;
  background: #e7f8ef;
  color: #168c56;
  font-size: 7px;
}

.owner-grid {
  display: grid;
  grid-template-columns: minmax(320px, .68fr) 1fr;
  gap: 15px;
}

.vehicle-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 19px;
}

.form-label--wide {
  grid-column: 1 / -1;
}

.vehicle-form .button {
  min-height: 42px;
  margin-top: 4px;
  font-size: 10px;
}

.fleet-list {
  display: grid;
  padding: 7px 12px 12px;
}

.fleet-list > div {
  display: grid;
  grid-template-columns: 40px 1fr auto auto;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 6px;
  border-bottom: 1px solid #edf1f4;
}

.fleet-list > div:last-child {
  border-bottom: 0;
}

.fleet-list .vehicle-thumb {
  width: 38px;
  height: 38px;
  font-size: 11px;
}

.fleet-list p {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}

.fleet-list p strong {
  color: #33495e;
  font-size: 9px;
}

.fleet-list p span {
  color: #8b9ba9;
  font-size: 7px;
}

.fleet-list > div > b {
  padding: 6px 8px;
  border-radius: 5px;
  background: #edf2f6;
  color: #516779;
  font-family: var(--font-geist-mono), monospace;
  font-size: 8px;
}

.portal-toast {
  position: fixed;
  z-index: 60;
  right: 24px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(390px, calc(100% - 32px));
  padding: 13px 17px;
  border: 1px solid #bfe4d0;
  border-radius: 10px;
  background: white;
  color: #375449;
  box-shadow: 0 20px 50px rgba(22, 53, 44, .2);
  font-size: 10px;
  font-weight: 650;
}

.portal-toast span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--success);
  color: white;
}

@media (max-width: 1120px) {
  .portal-app {
    grid-template-columns: 226px minmax(0, 1fr);
  }

  .portal-sidebar {
    width: 226px;
  }

  .stat-grid--four {
    grid-template-columns: repeat(2, 1fr);
  }

  .portal-two-column,
  .owner-grid {
    grid-template-columns: 1fr;
  }

  .vehicle-detail {
    min-height: 390px;
  }
}

@media (max-width: 780px) {
  .portal-app {
    display: block;
  }

  .portal-sidebar {
    display: none;
  }

  .portal-main {
    width: 100%;
  }

  .portal-topbar {
    min-height: calc(60px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
  }

  .portal-topbar__right {
    min-width: 0;
    gap: 6px;
  }

  .mobile-rs {
    display: inline;
  }

  .portal-topbar p {
    display: none;
  }

  .demo-chip {
    padding: 6px 8px;
    font-size: 8px;
  }

  .portal-exit {
    min-height: 44px;
    font-size: 11px;
  }

  .mobile-role-switcher {
    position: sticky;
    z-index: 19;
    top: calc(60px + env(safe-area-inset-top));
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 5px;
    padding: 7px max(10px, env(safe-area-inset-right)) 7px max(10px, env(safe-area-inset-left));
    border-bottom: 1px solid #dce5ed;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(12px);
  }

  .mobile-role-switcher button {
    min-height: 44px;
    border: 1px solid #d7e1e9;
    border-radius: 7px;
    background: white;
    color: #718394;
    font-size: 8px;
    font-weight: 750;
  }

  .mobile-role-switcher button.active {
    border-color: var(--blue-600);
    background: var(--blue-600);
    color: white;
  }

  .portal-content {
    width: calc(100% - 24px);
    padding: 26px 0 max(72px, calc(48px + env(safe-area-inset-bottom)));
  }

  .portal-page-heading {
    align-items: flex-start;
  }

  .portal-date {
    display: none;
  }

  .stat-grid {
    grid-template-columns: 1fr;
  }

  .stat-grid--four {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-card {
    min-height: 96px;
  }

  .stat-grid--four .stat-card {
    grid-template-columns: 38px 1fr;
    gap: 9px;
    padding: 12px;
  }

  .stat-grid--four .stat-card__icon {
    width: 36px;
    height: 36px;
  }

  .stat-grid--four .stat-card strong {
    font-size: 19px;
  }

  .stat-grid--four .stat-card small {
    display: none;
  }

  .vehicle-list > button {
    grid-template-columns: 42px 1fr 14px;
  }

  .vehicle-list .status-pill {
    grid-column: 2;
    justify-self: start;
  }

  .vehicle-list > button > b {
    grid-column: 3;
    grid-row: 1;
  }

  .documents-table {
    display: grid;
    gap: 10px;
    padding: 10px;
    overflow: visible;
  }

  .documents-table__head {
    display: none;
  }

  .documents-table__row {
    grid-template-columns: 1fr auto;
    gap: 9px 14px;
    min-width: 0;
    min-height: 0;
    padding: 14px;
    border: 1px solid #e0e8ef;
    border-radius: 10px;
  }

  .documents-table__row .doc-name {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .documents-table__row .doc-name strong {
    overflow-wrap: anywhere;
    font-size: 12px;
  }

  .documents-table__row > span[data-label] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
  }

  .documents-table__row > span[data-label]::before {
    content: attr(data-label) ":";
    color: #91a0af;
    font-size: 9px;
    font-weight: 700;
  }

  .documents-table__row .document-download {
    align-self: end;
    grid-column: 2;
    grid-row: 2 / span 3;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 8px;
    background: #eaf5ff;
    text-align: center;
    line-height: 44px;
  }

  .portal-toast {
    right: 16px;
    bottom: 16px;
  }
}

@media (max-width: 480px) {
  .prototype-note {
    align-items: start;
  }

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

  .portal-page-heading p {
    font-size: 10px;
  }

  .portal-topbar .demo-chip {
    display: none;
  }

  .panel-heading {
    padding: 13px 14px;
  }

  .status-pill {
    font-size: 9px;
  }

  .vehicle-detail__top {
    padding: 16px;
  }

  .inspection-state,
  .timeline {
    margin-left: 14px;
    margin-right: 14px;
  }

  .owner-grid {
    display: flex;
    flex-direction: column;
  }

  .add-vehicle-panel {
    order: 1;
  }

  .fleet-panel {
    order: 2;
  }

  .vehicle-form {
    grid-template-columns: 1fr;
    padding: 15px;
  }

  .form-label--wide {
    grid-column: auto;
  }

  .fleet-list > div {
    grid-template-columns: 37px 1fr auto;
  }

  .fleet-list .status-pill {
    grid-column: 2;
    justify-self: start;
  }

  .fleet-list > div > b {
    grid-column: 3;
    grid-row: 1;
  }
}

/* PHP application additions */
.role-nav__link {
  display: grid;
  grid-template-columns: 37px 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 62px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #8da2b6;
  text-align: left;
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.role-nav__link:hover { background: rgba(255,255,255,.04); color: #c8d6e2; }
.role-nav__link.active { border-color: rgba(54,151,255,.22); background: linear-gradient(90deg,rgba(8,117,238,.18),rgba(8,117,238,.055)); color: #fff; box-shadow: inset 3px 0 0 var(--blue-500); }
.role-nav__link > span { display:grid; place-items:center; width:35px; height:35px; border:1px solid #263b50; border-radius:8px; background:#0d1d2d; color:#7d94a9; font-family:var(--font-geist-mono),monospace; font-size:12px; font-weight:850; }
.role-nav__link.active > span { border-color:rgba(44,153,255,.4); background:#0c3260; color:#8bd0ff; }
.role-nav__link div { display:flex; flex-direction:column; gap:4px; }
.role-nav__link strong { font-size:12px; }
.role-nav__link small { color:#5f768c; font-size:9px; }

.logout-form { margin: 0; }
button.portal-exit { border:0; background:transparent; cursor:pointer; }
.app-alert { margin:0 0 22px; padding:13px 16px; border:1px solid #b9d9f7; border-radius:9px; background:#eef8ff; color:#155d9f; font-size:13px; font-weight:650; }
.app-alert--error { border-color:#f3c5c5; background:#fff2f2; color:#a62d2d; }
.app-alert--success { border-color:#bce3cc; background:#effbf4; color:#267348; }

.login-form { display:grid; gap:14px; margin-top:22px; }
.login-form label,
.setup-form label { display:grid; gap:7px; color:#3e5061; font-size:11px; font-weight:750; }
.login-form input,
.setup-form input,
.portal-form input,
.portal-form select,
.portal-form textarea { width:100%; min-height:43px; padding:10px 12px; border:1px solid #cfdae4; border-radius:8px; background:#fff; color:#102438; font:inherit; outline:none; }
.portal-form textarea { min-height:88px; resize:vertical; }
.login-form input:focus,
.setup-form input:focus,
.portal-form input:focus,
.portal-form select:focus,
.portal-form textarea:focus { border-color:var(--blue-500); box-shadow:0 0 0 3px rgba(24,132,242,.12); }

.setup-page { min-height:100vh; padding:40px 18px; background:radial-gradient(circle at 50% -10%,#163c66 0,#07182b 42%,#040d18 100%); }
.setup-card { width:min(720px,100%); margin:0 auto; padding:30px; border:1px solid rgba(255,255,255,.1); border-radius:18px; background:#fff; box-shadow:0 24px 75px rgba(0,0,0,.32); }
.setup-card > img { display:block; width:220px; height:auto; margin:-18px auto -8px; }
.setup-heading { margin-bottom:22px; text-align:center; }
.setup-heading small { color:var(--blue-600); font-size:9px; font-weight:850; letter-spacing:.18em; }
.setup-heading h1 { margin:7px 0; color:#0b2035; font-size:31px; }
.setup-heading p { margin:0; color:#66798a; font-size:12px; }
.setup-form { display:grid; gap:18px; }
.setup-form fieldset { display:grid; gap:13px; margin:0; padding:18px; border:1px solid #dae4ec; border-radius:11px; }
.setup-form legend { padding:0 7px; color:#173d63; font-size:11px; font-weight:850; }
.setup-form__row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.portal-form { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:19px; }
.portal-form--single { grid-template-columns:1fr; }
.portal-form--order { grid-template-columns:2fr 1fr; }
.form-label { display:grid; align-content:start; gap:7px; color:#526678; font-size:10px; font-weight:780; }
.form-label--wide { grid-column:1 / -1; }
.admin-form-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-bottom:22px; }
.owner-grid--tables { grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr); }
.empty-state { display:grid; gap:5px; place-items:center; padding:30px 18px; color:#758696; text-align:center; font-size:11px; }
.empty-state strong { color:#344a5e; font-size:13px; }
.empty-state--large { min-height:280px; }

.vehicle-list__link { display:grid; grid-template-columns:45px 1fr auto 14px; align-items:center; gap:11px; min-height:72px; padding:10px 13px; border:0; border-bottom:1px solid #edf1f4; color:inherit; text-decoration:none; }
.vehicle-list__link:hover { background:#f8fbfe; }
.vehicle-list__link.active { background:#f0f7ff; box-shadow:inset 3px 0 0 var(--blue-500); }
.vehicle-list__link > b { color:#86a0b5; font-size:18px; }

.portal-order-list { margin:0 20px 20px; padding-top:17px; border-top:1px solid #e4ebf0; }
.portal-order-list h3 { margin:0 0 10px; color:#284259; font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.portal-order-list article { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:11px; padding:9px 0; border-bottom:1px solid #edf1f4; }
.portal-order-list article > span { color:var(--blue-700); font-family:var(--font-geist-mono),monospace; font-size:8px; font-weight:800; }
.portal-order-list article div { display:grid; gap:3px; }
.portal-order-list article strong { color:#273e52; font-size:10px; }
.portal-order-list article small,.portal-order-list article b,.muted-copy { color:#788a9a; font-size:8px; }

.account-list > div { display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:11px; padding:12px 16px; border-bottom:1px solid #edf1f4; }
.account-list p { display:grid; gap:3px; margin:0; min-width:0; }
.account-list strong { color:#273e52; font-size:10px; }
.account-list span { overflow:hidden; color:#788a9a; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.account-list b { color:#2775be; font-size:8px; }
.avatar--small { width:34px; height:34px; font-size:11px; }

@media (max-width: 1100px) {
  .admin-form-grid { grid-template-columns:1fr; }
  .owner-grid--tables { grid-template-columns:1fr; }
}

@media (max-width: 780px) {
  .mobile-role-switcher a { display:grid; place-items:center; min-height:44px; border:1px solid #d7e1e9; border-radius:7px; background:#fff; color:#5f7386; font-size:12px; font-weight:750; text-decoration:none; }
  .mobile-role-switcher a.active { border-color:var(--blue-600); background:var(--blue-600); color:#fff; }
  .vehicle-list__link { grid-template-columns:42px 1fr 14px; }
  .vehicle-list__link .status-pill { grid-column:2; justify-self:start; }
  .vehicle-list__link > b { grid-column:3; grid-row:1; }
  .portal-form,.portal-form--order { grid-template-columns:1fr; }
  .form-label--wide { grid-column:auto; }
  .form-label { font-size:13px; }
  .login-form input,
  .setup-form input,
  .portal-form input,
  .portal-form select,
  .portal-form textarea { min-height:48px; font-size:16px; }
  .portal-form .button { min-height:48px; font-size:14px; }
  .portal-page-heading small,
  .panel-heading small,
  .vehicle-detail__top small { font-size:10px; }
  .portal-page-heading p { font-size:13px; }
  .panel-heading h2 { font-size:18px; }
  .stat-card span { font-size:12px; }
  .stat-card strong { font-size:28px; }
  .stat-card small { font-size:10px; }
  .vehicle-row__main strong { font-size:13px; }
  .vehicle-row__main span { font-size:11px; }
  .vehicle-detail__top h2 { font-size:17px; }
  .vehicle-detail__top span { font-size:10px; overflow-wrap:anywhere; }
  .inspection-state span,
  .inspection-state p { font-size:11px; }
  .inspection-state strong { font-size:13px; }
  .portal-order-list h3 { font-size:12px; }
  .portal-order-list article { grid-template-columns:1fr auto; }
  .portal-order-list article > span { grid-column:1 / -1; font-size:10px; }
  .portal-order-list article strong { font-size:12px; }
  .portal-order-list article small,
  .portal-order-list article b,
  .muted-copy { font-size:10px; }
  .fleet-list p strong,
  .account-list strong { font-size:12px; }
  .fleet-list p span,
  .account-list span { font-size:10px; }
  .fleet-list > div > b,
  .account-list b { font-size:10px; }
}

@media (max-width: 520px) {
  .setup-page { padding:16px 10px; }
  .setup-card { padding:20px 15px; }
  .setup-form__row { grid-template-columns:1fr; }
}

/* PWA install experience */
.pwa-install {
  position: fixed;
  z-index: 90;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto 32px;
  align-items: center;
  gap: 11px;
  width: min(520px, calc(100% - 32px));
  padding: 12px;
  border: 1px solid rgba(119, 200, 255, .28);
  border-radius: 14px;
  background: rgba(6, 19, 41, .96);
  color: white;
  box-shadow: 0 24px 60px rgba(1, 12, 29, .42);
  backdrop-filter: blur(16px);
}

.pwa-install__mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(119, 200, 255, .35);
  border-radius: 10px;
  background: linear-gradient(145deg, #0a6fe4, #073b84);
  color: white;
  font-size: 16px;
  font-style: italic;
  font-weight: 900;
  letter-spacing: -.08em;
}

.pwa-install__copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.pwa-install__copy strong { font-size: 13px; }
.pwa-install__copy small { overflow: hidden; color: #8fa9c1; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.pwa-install__action {
  min-height: 40px;
  padding: 0 13px;
  border: 0;
  border-radius: 8px;
  background: var(--blue-600);
  color: white;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
}

.pwa-install__close,
.pwa-ios-help__close {
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  place-items: center;
  background: transparent;
  color: #8fa6bd;
  cursor: pointer;
  font-size: 22px;
}

.pwa-ios-help {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  align-items: end;
}

.pwa-ios-help__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(2, 10, 22, .68);
  backdrop-filter: blur(4px);
}

.pwa-ios-help__sheet {
  position: relative;
  width: min(520px, 100%);
  margin: 0 auto;
  padding: 28px 24px max(24px, env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0;
  background: white;
  color: var(--ink);
  box-shadow: 0 -20px 70px rgba(0, 0, 0, .28);
}

.pwa-ios-help__sheet .pwa-install__mark { margin-bottom: 16px; }
.pwa-ios-help__sheet h2 { margin: 0; font-size: 24px; letter-spacing: -.035em; }
.pwa-ios-help__sheet ol { display: grid; gap: 13px; margin: 20px 0 24px; padding-left: 22px; color: #53687a; font-size: 15px; line-height: 1.5; }
.pwa-ios-help__close { position: absolute; top: 14px; right: 14px; color: #617588; }

@media (max-width: 520px) {
  .pwa-install {
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    grid-template-columns: 40px minmax(0, 1fr) auto 28px;
    gap: 8px;
    width: calc(100% - 20px);
    padding: 10px;
  }

  .pwa-install__mark { width: 40px; height: 40px; }
  .pwa-install__copy small { display: none; }
  .pwa-install__action { min-height: 42px; padding: 0 10px; }
  .pwa-install__close { width: 28px; height: 28px; }
}