@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --Green: #73be38;
  --clear-Green: #72be384f;
  --blue: #267bb9;
  --shadow: 0 16px 40px rgba(17, 48, 75, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; margin: 0; }
body::before { background: linear-gradient( var(--navy), #08243d); content: ""; height: 100px; left: 0; position: absolute; right: 0; top: 0; z-index: -1; }
.container { max-width: 1180px; padding: 0 28px 70px; }
.container > h2 { color: #fff; margin: 0 0 24px; }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 13px;
  box-shadow: var(--shadow);
  margin: 0 0 24px;
  padding: 28px;
}

.form-group { margin-bottom: 16px; }
.dept-form { display: none; }
.dept-form.active { display: block; }
.dept-form h3 { margin: 0 0 24px; }

.workflow-bar {
  align-items: stretch;
  display: flex;
  margin: 0 0 24px;
  overflow-x: auto;
  padding: 3px 2px 10px;
}

.workflow-bar > span {
  align-self: center;
  color: var(--muted);
  flex: 0 0 auto;
}

.step-card {
  background: var(--surface);
  border-radius: 9px;
  color: var(--muted);
  cursor: pointer;
  flex: 1 0 112px;
  font-size: .8rem;
  font-weight: 750;
  min-height: 44px;
  padding: 12px 9px;
  text-align: center;
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}

.step-card:hover,
.step-card.active {
  background: var(----Green);
  border-color: var(----Green);
  color: white;
}

/* =========================
   HEADER / NAVIGATION
   ========================= */

.header {
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 22px 28px;
  background: linear-gradient(180deg, var(--navy), #08243d);
}

.brand {
  flex: 0 0 auto;
  color: #ffffff;
  cursor: pointer;
  font-size: 1.8rem;
  font-weight: 850;
  letter-spacing: -0.04em;
}

.brand span {
  color: #ffffff;
}

.brand-logo {
  display: block;
  width: 170px;
  max-width: 100%;
  height: 42px;
  object-fit: contain;
  object-position: left center;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.header-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.header-link {
  position: relative;
  color: #dbe8f2;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 650;
  transition: color 0.2s ease;
}

.header-link:hover {
  color: #ffffff;
}

.header-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 0;
  height: 2px;
  background: var(----Green);
  transition: width 0.2s ease;
}

.header-link:hover::after {
  width: 100%;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 28px;
}

.header-signup,
.header-login {
  width: auto;
  margin: 0;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 750;
}

.header-signup {
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.45);
}

.header-signup:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.75);
  transform: translateY(-1px);
}

.header-login {
  background: var(----Green);
  color: #ffffff;
  border: 1px solid var(----Green);
}

.header-login:hover {
  background: var(----Green-dark);
  border-color: var(----Green-dark);
  transform: translateY(-1px);
}

.hero {
  border: 0;
  border-radius: 16px;
  margin: 40px 0 0;
  text-align: center;
}
.marketing-pill { background: #72be384f; border: 1px solid #73be38; border-radius: 99px; color: #73be38; display: inline-block; font-size: .71rem; font-weight: 800; letter-spacing: .1em; margin-bottom: 19px; padding: 7px 13px; text-transform: uppercase; }
.hero h1 { color: #fff; font-size: clamp(2.2rem, 5vw, 4.35rem); letter-spacing: -.065em; line-height: 1.04; margin: 0 auto 22px; max-width: 850px; }
.hero h1 span { color: #73be38; }
.hero p { color: #e7f0f6; font-size: 1.08rem; line-height: 1.7; margin: 0 auto 30px; max-width: 700px; }
.hero button, .contact-section button { background: var(----Green); border: 0; border-radius: 7px; color: #fff; cursor: pointer; font-weight: 800; padding: 13px 22px !important; transition: transform .2s, background .2s; }
.hero button:hover, .contact-section button:hover { background: var(----Green-dark); transform: translateY(-10px); }
.hero button[style*="transparent"] { background: transparent; border: 1px solid #7895ac !important; }
.hero button[style*="transparent"]:hover { background: rgba(255,255,255,.08); }
.shop-switcher { align-items: center; display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 28px; }
.shop-switcher > span { color: #adc0cf !important; font-size: .78rem !important; line-height: 34px !important; }
.shop-chip { background: rgba(255,255,255,.06); border: 1px solid #49677e; border-radius: 99px; color: #e4edf4; font-size: .77rem; font-weight: 700; padding: 8px 13px; text-decoration: none; }
.shop-chip:hover { border-color: var(----Green); color: white; }

.marketing-stat-grid { background: var(--surface); border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow); display: grid; grid-template-columns: repeat(3, 1fr); margin: -1px 0 24px; overflow: hidden; }
.stat-box { background: var(--surface); border: 0; border-right: 1px solid var(--line); padding: 25px 16px; text-align: center; }
.stat-box:last-child { border-right: 0; }
.stat-number { color: var(----Green); font-size: 1.9rem; font-weight: 850; letter-spacing: -.05em; }
.stat-label { color: var(--muted); font-size: .78rem; margin-top: 3px; }

.grid { display: grid; gap: 18px; grid-template-columns: repeat(4, 1fr); }
.feature-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 23px; }
.feature-card h3 { color: var(--navy); font-size: .98rem; line-height: 1.35; margin: 0 0 10px; }
.feature-card h3:first-letter { color: var(----Green); }
.feature-card p, .card p { color: var(--muted); font-size: .83rem; line-height: 1.65; margin: 0; }
.overview-features { background: var(--surface); border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow); display: flex; flex-direction: column; height: 430px; margin-bottom: 24px; overflow: hidden; padding: 28px; }
.overview-feature-row { align-items: stretch; display: grid; gap: 24px; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); margin-bottom: 24px; }
.overview-feature-row .overview-features { margin-bottom: 0; }
.overview-feature-image { background: var(--navy); border-radius: 13px; box-shadow: var(--shadow); color: #fff; height: 430px; margin: 0; overflow: hidden; position: relative; }
.overview-feature-image img { display: block; height: 100%; object-fit: cover; opacity: .86; width: 100%; }
.overview-feature-image figcaption { background: linear-gradient(transparent, rgba(17, 48, 75, .95)); bottom: 0; font-size: .95rem; font-weight: 700; left: 0; line-height: 1.4; padding: 54px 22px 22px; position: absolute; right: 0; }
.overview-features h2 { color: var(--navy); font-size: 1.7rem; margin: 0 0 18px; }
.feature-list {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.feature-item {
  border-top: 1px solid var(--line);
}

.feature-summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;

  width: 100%;
  margin: 0;
  padding: 16px 14px;

  background: transparent;
  border: 0;

  color: var(--navy);
  text-align: left;

  font-size: 1rem;
  font-weight: 800;

  cursor: pointer;

  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.feature-summary:hover {
  background: var(--navy-soft);
}

.feature-number {
  color: var(----Green);
  font-size: 1.05rem;
}

.feature-icon {
  color: var(----Green);
  font-size: 1.35rem;
  font-weight: 400;
}

.feature-content {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;

  transition:
    grid-template-rows 0.42s cubic-bezier(.4, 0, .2, 1),
    opacity 0.28s ease;
}

.feature-item.active .feature-content {
  grid-template-rows: 1fr;
  opacity: 1;
}

.feature-content-inner {
  overflow: hidden;
  padding: 0 48px;

  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.65;

  transform: translateY(-6px);

  transition:
    padding 0.42s cubic-bezier(.4, 0, .2, 1),
    transform 0.32s ease;
}

.feature-item.active .feature-content-inner {
  padding-top: 0;
  padding-bottom: 16px;
  transform: translateY(0);
}

body.dark-mode .feature-summary {
  color: var(--ink);
}

body.dark-mode .feature-summary:hover {
  background: var(--navy-soft);
}

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow); margin: 40px 0px 0px 0px ;margin-bottom: 20px; padding: 28px; }
.card[style*="border-left"] { border-left: 4px solid var(----Green) !important; }
.card h3 { color: var(--navy); }
.hidden { display: none !important; }

input, select, textarea, button { border-radius: 7px; font: inherit; width: 100%; }
input, select, textarea { background: #fbfcfe; border: 1px solid #c9d4df; color: var(--ink); padding: 12px; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(38,123,185,.13); outline: 0; }
textarea { min-height: 110px; resize: vertical; }
label { color: var(--ink); display: block; font-size: .78rem; font-weight: 750; margin: 12px 0 6px; }
button { background: var(----Green); border: 0; color: white; cursor: pointer; font-weight: 800; margin-top: 16px; padding: 12px; }
button:hover { background: var(----Green-dark); }
.dept-form button { max-width: 260px; }
.contact-section { margin: 22px auto 0; max-width: 900px; }
.contact-section h2 { color: var(--navy); font-size: 2rem; letter-spacing: -.04em; margin: 0 0 8px; }
.contact-section > p { color: var(--muted); margin-bottom: 24px; }
.contact-section .marketing-pill { color: var(----Green-dark); margin-bottom: 13px; }
.contact-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); margin: 24px 0; }
.contact-detail { align-items: center; background: #f7fafc; border: 1px solid var(--line); border-radius: 10px; display: flex; gap: 12px; padding: 16px; }
.contact-detail strong, .contact-detail a, .contact-detail span:not(.contact-icon) { display: block; font-size: .8rem; }
.contact-detail strong { color: var(--navy); margin-bottom: 3px; }
.contact-detail a, .contact-detail span:not(.contact-icon) { color: var(--muted); text-decoration: none; }
.contact-icon { align-items: center; background: #72be3830; border-radius: 8px; color: var(----Green-dark); display: flex; flex: 0 0 34px; height: 34px; justify-content: center; }
.contact-back { max-width: 190px; }
.contact-brand { color: #fff; text-decoration: none; }
.contact-nav { align-items: center; display: flex; gap: 8px; }
.contact-nav .nav-btn { text-decoration: none; }
.contact-page { padding: 58px 0 20px; }
.contact-intro { margin: 0 auto 34px; max-width: 700px; text-align: center; }
.contact-intro h1 { color: var(--navy); font-size: clamp(2.3rem, 5vw, 4rem); letter-spacing: -.06em; line-height: 1.05; margin: 0 0 18px; }
.contact-intro p { color: var(--muted); font-size: 1.05rem; line-height: 1.7; margin: 0; }
.contact-layout { align-items: start; display: grid; gap: 26px; grid-template-columns: .82fr 1.18fr; margin: 0 auto; max-width: 1000px; }
.contact-details { display: grid; gap: 12px; }
.contact-form { background: var(--surface); border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow); padding: 28px; }
.contact-form h2 { color: var(--navy); font-size: 1.6rem; margin: 0 0 20px; }
.contact-form-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.contact-form button { margin-top: 22px; }
.form-status { color: var(--navy); font-size: .85rem; font-weight: 700; min-height: 1.3em; }
.portal-tab-bar { border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 20px; padding-bottom: 13px; }
.portal-tab {
  width: auto;
  margin: 0;
  padding: 10px 16px;

  background: transparent;
  color: var(--muted);

  border: 1px solid var(--line);
  border-radius: 9px;

  cursor: pointer;

  font-size: 0.84rem;
  font-weight: 750;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.portal-tab:hover {
  background: var(--navy-soft);
  color: var(--navy);
  border-color: var(--blue);
  transform: translateY(-1px);
}

.portal-tab.active {
  background: var(----Green);
  border-color: var(----Green);
  color: #ffffff;
  box-shadow: 0 6px 16px #72be384f;
}

body.dark-mode .portal-tab {
  background: transparent;
  color: var(--muted);
  border-color: var(--line);
}

body.dark-mode .portal-tab:hover {
  background: #162638;
  color: #ffffff;
}

body.dark-mode .portal-tab.active {
  color: #ffffff;
}
.staff-table { margin-top: 12px; width: 100%; }
.staff-table th, .staff-table td { border-bottom: 1px solid var(--line); font-size: .8rem; padding: 11px; text-align: left; }
.staff-table th { color: var(--muted); font-size: .7rem; }
.invoice-box { background: #f7fafc; border: 1px dashed #b7c6d5; border-radius: 9px; margin-top: 20px; padding: 20px; }
.shop-title-text { color: var(----Green); font-weight: 800; }

@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
  body::before {
    height: 112px;
  }

  .container {
    padding: 0 16px 45px;
  }

  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 16px;
  }

  .header-nav {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .header-links {
    width: 100%;
    gap: 18px;
    flex-wrap: wrap;
  }

  .header-actions {
    width: 100%;
    gap: 10px;
  }

  .header-signup,
  .header-login {
    flex: 1;
  }

  .hero h1 {
    font-size: 2.45rem;
  }

  .hero p {
    font-size: .94rem;
  }

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

  .stat-box {
    border-bottom: 1px solid var(--line);
    border-right: 0;
  }

  .stat-box:last-child {
    border-bottom: 0;
  }

  .contact-section h2 {
    font-size: 1.65rem;
  }

  .contact-page {
    padding-top: 38px;
  }

  .contact-layout,
  .contact-form-grid {
    grid-template-columns: 1fr;
  }

  .overview-feature-row {
    grid-template-columns: 1fr;
  }

  .overview-features {
    height: 500px;
  }

  .overview-feature-image {
    height: 300px;
  }

  .contact-nav {
    flex-wrap: wrap;
  }

  .panel,
  .card {
    padding: 21px;
  }

  .workflow-bar {
    margin-left: -4px;
    margin-right: -4px;
  }

  .workflow-bar > span {
    display: none;
  }

  .step-card {
    flex-basis: 126px;
  }
}
/* =========================
   LIGHT / DARK MODE
   ========================= */

:root {
  --page: #f6f8fb;
  --ink: #233040;
  --muted: #657487;
  --line: #dfe6ed;
  --navy: #11304b;
  --navy-soft: #eaf2f7;
}

body.dark-mode {
  --page: #08111c;
  --surface: #101c29;
  --ink: #f1f5f9;
  --muted: #9fb0c2;
  --line: #26384a;
  --navy: #071a2b;
  --navy-soft: #14283a;

  background: var(--page);
  color: var(--ink);
}

body.dark-mode .panel,
body.dark-mode .card,
body.dark-mode .feature-card,
body.dark-mode .marketing-stat-grid,
body.dark-mode .stat-box,
body.dark-mode .contact-form,
body.dark-mode .overview-features {
  background: var(--surface);
  border-color: var(--line);
}

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  background: #0b1722;
  color: var(--ink);
  border-color: var(--line);
}

body.dark-mode .invoice-box,
body.dark-mode .portal-tab {
  background: #0d1a26;
  border-color: var(--line);
}

body.dark-mode .portal-tab.active {
  background: var(----Green);
  border-color: var(----Green);
}

body.dark-mode .feature-card h3,
body.dark-mode .card h3,
body.dark-mode .overview-features h2,
body.dark-mode .contact-form h2,
body.dark-mode label {
  color: var(--ink);
}

body.dark-mode .feature-card p,
body.dark-mode .card p,
body.dark-mode .contact-intro p {
  color: var(--muted);
}

/* Bottom theme switch */

.theme-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px 0 10px;
}

.theme-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.theme-switch {
  position: relative;
  width: 50px;
  height: 26px;
  min-width: 50px;
  margin: 0;
  padding: 0 !important;

  background: #d9e2e9;
  border: 1px solid #c5d0da;
  border-radius: 999px;

  cursor: pointer;

  transition:
    background 0.25s ease,
    border-color 0.25s ease;
}

.theme-switch:hover {
  background: #d9e2e9;
  transform: none !important;
}

.theme-switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;

  width: 18px;
  height: 18px;

  background: #ffffff;
  border-radius: 50%;

  box-shadow: 0 2px 6px #72be384f;

  transition: transform 0.25s ease;
}

body.dark-mode .theme-switch {
  background: var(----Green);
  border-color: var(----Green);
}

body.dark-mode .theme-switch:hover {
  background: var(----Green);
}

body.dark-mode .theme-switch-knob {
  transform: translateX(24px);
}
/* =========================
   HERO SLIDESHOW
   ========================= */

.hero-slider {
  position: relative;
  min-height: 720px;
  margin-top: 40px;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #081827;
}

.hero-slides,
.hero-slide,
.hero-overlay {
  position: absolute;
  inset: 0;
}

.hero-slides {
  z-index: 0;
}

.hero-slide {
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition:
    opacity 1s ease,
    transform 7s ease;
}

.hero-slide.active {
  opacity: 1;
  transform: scale(1);
}

.hero-overlay {
  z-index: 1;
  background:
    linear-gradient(
      90deg,
      rgba(3, 15, 27, 0.86) 0%,
      rgba(6, 24, 40, 0.68) 45%,
      rgba(8, 20, 35, 0.72) 100%
    );
}

.hero-content {
  position: relative;
  z-index: 3;
  width: min(1050px, 88%);
  text-align: center;
  padding: 70px 30px;
}

.hero-content h1 {
  margin: 0 auto 24px;
  max-width: 1050px;
  color: white;
  font-size: clamp(2.6rem, 4.5vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.055em;
  text-shadow: 0 8px 35px #72be384f;
}
.hero-content .marketing-pill {
  margin-bottom: 22px;
}



.hero-content h1 span {
  display: block;
  color: var(--Green);
}

.hero-content p {
  max-width: 760px;
  margin: 0 auto 32px;
  color: #d8e4ed;
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.hero-actions button {
  width: auto;
  min-width: 180px;
  margin: 0;
  padding: 14px 26px;
  border-radius: 9px;
}

.hero-primary-btn {
  background: var(----Green);
  color: white;
}

.hero-primary-btn:hover {
  background: var(----Green-dark);
}

.hero-secondary-btn {
  background: rgba(7, 23, 38, 0.55);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px);
}

.hero-secondary-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Clean slideshow arrows */

.hero .hero-arrow {
  position: absolute;
  top: 50%;
  z-index: 10;

  width: auto;
  height: auto;
  min-width: 0;

  margin: 0;
  padding: 12px !important;

  border: none !important;
  border-radius: 0;

  background: transparent !important;

  color: rgba(255, 255, 255, 0.75);

  font-size: 3rem;
  font-weight: 300;
  line-height: 1;

  box-shadow: none;
  backdrop-filter: none;

  opacity: 0.75;

  transform: translateY(-50%);

  transition:
    opacity 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.hero .hero-arrow:hover {
  background: transparent !important;
  color: #ffffff;

  opacity: 1;

  transform:
    translateY(-50%)
    scale(1.12);
}

.hero .hero-arrow-left {
  left: 20px;
}

.hero .hero-arrow-right {
  right: 20px;
}


@media (max-width: 900px) {
  .hero-slider {
    min-height: 620px;
  }

  .hero-content {
    width: 92%;
    padding: 60px 22px;
  }

  .hero-arrow {
    width: 46px;
    height: 46px;
    font-size: 1.4rem;
  }

  .hero-arrow-left {
    left: 12px;
  }

  .hero-arrow-right {
    right: 12px;
  }
}

@media (max-width: 640px) {
  .hero-slider {
    min-height: 560px;
    border-radius: 12px;
  }

  .hero-content h1 {
    font-size: clamp(2.3rem, 10vw, 3.6rem);
  }

  .hero-content p {
    font-size: 0.95rem;
  }

  .hero-arrow {
    display: none;
  }
}

/* Final Motivo palette: green, white, and black only. */
:root {
  --ink: #111;
  --muted: #536153;
  --line: #d4e3d4;
  --surface: #fff;
  --page: #fff;
  --navy: #111;
  --navy-soft: #edf6ed;
  --Green: #2e7d32;
  --Green-dark: #1b5e20;
  --blue: #2e7d32;
}
body.dark-mode {
  --ink: #f5faf5;
  --muted: #a9b8a9;
  --line: #263326;
  --surface: #101710;
  --page: #050805;
  --navy: #f5faf5;
  --navy-soft: #182418;
  --Green: #66bb6a;
  --Green-dark: #81c784;
  --blue: #66bb6a;
  background: #050805 !important;
  color: #f5faf5 !important;
}
.motivo-landing,
.motivo-hero { background: #fff !important; color: #111 !important; }
.motivo-eyebrow,
.motivo-step,
.motivo-drawer-heading span,
.motivo-hero h1 span,
.motivo-final-cta .motivo-text-link { color: #2e7d32 !important; }
.motivo-button-primary,
.motivo-finder-controls .motivo-button-dark,
.motivo-inline-action,
.staff-inline-action { background: #2e7d32 !important; border-color: #2e7d32 !important; color: #fff !important; }
.motivo-button-primary:hover,
.motivo-finder-controls .motivo-button-dark:hover,
.staff-inline-action:hover { background: #1b5e20 !important; border-color: #1b5e20 !important; }
.motivo-shop-cta { background: #2e7d32 !important; color: #fff !important; }
.motivo-feature-section { background: #101710 !important; color: #f5faf5 !important; }
.motivo-finder,
.workflow-progress-card,
.appointment-datetime-group { background: #edf6ed !important; border-color: #c5dbc5 !important; }
body.dark-mode .motivo-landing,
body.dark-mode .motivo-hero,
body.dark-mode .motivo-final-cta { background: #050805 !important; color: #f5faf5 !important; }
body.dark-mode .motivo-hero h1,
body.dark-mode .motivo-finder h2,
body.dark-mode .motivo-benefits h2,
body.dark-mode .motivo-final-cta h2 { color: #f5faf5 !important; }
body.dark-mode .motivo-finder,
body.dark-mode .workflow-progress-card,
body.dark-mode .appointment-datetime-group { background: #182418 !important; border-color: #315031 !important; }
body.dark-mode .motivo-feature-section { background: #050805 !important; }
body.dark-mode .motivo-shop-cta { background: #1b5e20 !important; }
.motivo-hero .motivo-button-secondary { border-color: #2e7d32 !important; color: #111 !important; }
body.dark-mode .motivo-hero .motivo-button-secondary { color: #f5faf5 !important; }
.motivo-finder-controls input:focus,
.motivo-finder-controls select:focus,
.appointment-field input[type="date"]:focus,
.appointment-field input[type="time"]:focus { border-color: #2e7d32 !important; box-shadow: 0 0 0 3px rgba(46,125,50,.16) !important; }

/* Motivo public homepage */
.container:has(#landingSection:not(.hidden)) {
  display: block;
  max-width: none;
  padding: 0;
}

.container:has(#landingSection:not(.hidden)) > .header {
  align-items: center;
  background: #f8f7f2;
  border-bottom: 1px solid #d9ded6;
  gap: 32px;
  height: auto !important;
  justify-content: space-between;
  min-height: 82px !important;
  padding: 19px clamp(22px, 5vw, 76px);
}

.container:has(#landingSection:not(.hidden)) .brand {
  align-items: center;
  color: #173c3b;
  display: flex;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.65rem;
  letter-spacing: -.06em;
}

.container:has(#landingSection:not(.hidden)) .brand-logo { display: none; }
.container:has(#landingSection:not(.hidden)) .brand::before { content: '◒'; color: #e86642; font-size: 1.9rem; margin-right: 9px; }
.container:has(#landingSection:not(.hidden)) .brand::after { color: #173c3b; content: 'Motivo'; }
.container:has(#landingSection:not(.hidden)) .header-nav { align-items: center; display: flex; gap: clamp(16px, 2.5vw, 34px); }
.container:has(#landingSection:not(.hidden)) .header-links { gap: clamp(15px, 2.5vw, 30px); }
.container:has(#landingSection:not(.hidden)) .header-link { color: #53615f; font-family: 'DM Sans', sans-serif; font-size: .83rem; font-weight: 600; }
.container:has(#landingSection:not(.hidden)) .header-link:hover { color: #173c3b; }
.container:has(#landingSection:not(.hidden)) .header-link::after { background: #e86642; }
.container:has(#landingSection:not(.hidden)) .header-actions { border: 0; display: flex; gap: 10px; padding: 0; }
.container:has(#landingSection:not(.hidden)) .header-signup { border: 1px solid #cbd5ce; color: #173c3b; }
.container:has(#landingSection:not(.hidden)) .header-login { background: #173c3b; border-color: #173c3b; color: #fff; }

.motivo-landing { background: #f8f7f2; color: #173c3b; font-family: 'DM Sans', sans-serif; overflow: hidden; }
.motivo-landing h1, .motivo-landing h2, .motivo-landing h3 { font-family: 'Space Grotesk', sans-serif; letter-spacing: -.045em; }
.motivo-hero { align-items: center; background: #f8f7f2; display: grid; gap: clamp(30px, 7vw, 110px); grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr); margin: 0 auto; max-width: 1360px; min-height: 650px; padding: 72px clamp(24px, 7vw, 110px) 88px; }
.motivo-eyebrow { color: #e86642; font-size: .72rem; font-weight: 700; letter-spacing: .14em; margin: 0 0 18px; text-transform: uppercase; }
.motivo-hero h1 { color: #173c3b; font-size: clamp(3.5rem, 7.6vw, 7rem); line-height: .94; margin: 0 0 28px; max-width: 730px; }
.motivo-hero h1 span { color: #e86642; display: block; }
.motivo-hero-subtitle { color: #53615f; font-size: clamp(1rem, 1.5vw, 1.18rem); line-height: 1.7; margin: 0; max-width: 560px; }
.motivo-hero .hero-actions { align-items: center; display: flex; gap: 12px; margin-top: 35px; }
.motivo-button { align-items: center; border: 0; border-radius: 4px; cursor: pointer; display: inline-flex; font-family: 'DM Sans', sans-serif; font-size: .85rem; font-weight: 700; justify-content: center; padding: 14px 21px; text-decoration: none; transition: transform .2s, background .2s; }
.motivo-button:hover { transform: translateY(-2px); }
.motivo-button-primary { background: #e86642; color: #fff; }
.motivo-button-primary:hover { background: #cc4f31; }
.motivo-button-secondary { background: transparent; border: 1px solid #bcc9c1; color: #173c3b; }
.motivo-button-dark { background: #173c3b; color: #fff; }
.motivo-hero-art { min-height: 490px; overflow: hidden; position: relative; }
.motivo-hero-art::before { content: none; }
.motivo-hero-art img { display: block; height: 490px; object-fit: cover; width: 100%; }
.motivo-art-note { background: #fff; bottom: 22px; display: grid; gap: 5px; left: 22px; padding: 17px 20px; position: absolute; width: min(290px, calc(100% - 44px)); }
.motivo-art-note strong { font-family: 'Space Grotesk', sans-serif; font-size: 1rem; }
.motivo-art-note span { color: #65716e; font-size: .82rem; }
.motivo-finder { background: #e5eee7; display: grid; gap: 30px; grid-template-columns: .8fr 1.2fr; margin: 0 auto; max-width: 1180px; padding: 38px 44px; }
.motivo-finder h2, .motivo-benefits h2, .motivo-feature-section h2, .motivo-shop-cta h2, .motivo-final-cta h2 { font-size: clamp(1.8rem, 3vw, 3rem); line-height: 1; margin: 0; }
.motivo-finder p:not(.motivo-eyebrow) { color: #53615f; margin: 12px 0 0; }
.motivo-finder-controls { gap: 9px; grid-template-columns: 1.1fr 1fr auto; }
.motivo-finder-controls input, .motivo-finder-controls select { background: #fff; border: 1px solid #c6d3ca; border-radius: 3px; color: #173c3b; font: inherit; min-width: 0; padding: 14px 13px; }
.motivo-finder-controls input:focus, .motivo-finder-controls select:focus { border-color: #e86642; outline: 2px solid #e8664233; }
.sr-only { height: 1px; margin: -1px; overflow: hidden; position: absolute; width: 1px; }
.motivo-benefits { margin: 0 auto; max-width: 1180px; padding: 104px 44px 98px; }
.motivo-section-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 48px; }
.motivo-benefit-grid { display: grid; gap: 0; grid-template-columns: repeat(3, 1fr); }
.motivo-benefit-grid article { border-left: 1px solid #cad5ce; padding: 0 32px; }
.motivo-benefit-grid article:first-child { border-left: 0; padding-left: 0; }
.motivo-step { color: #e86642; font-size: .78rem; font-weight: 700; letter-spacing: .08em; }
.motivo-benefit-grid h3 { font-size: 1.32rem; margin: 23px 0 10px; }
.motivo-benefit-grid p, .motivo-feature-intro > p:last-child { color: #65716e; line-height: 1.65; margin: 0; max-width: 280px; }
.motivo-feature-section { background: #173c3b; color: #f8f7f2; display: grid; gap: 70px; grid-template-columns: .8fr 1.2fr; padding: 100px max(44px, calc((100vw - 1092px) / 2)); }
.motivo-feature-section .motivo-eyebrow { color: #f2a17f; }
.motivo-feature-section h2 { max-width: 370px; }
.motivo-feature-intro > p:last-child { color: #b9c8c1; margin-top: 23px; }
.motivo-feature-list article { align-items: start; border-top: 1px solid #42615c; display: grid; gap: 25px; grid-template-columns: 35px 1fr; padding: 24px 0; }
.motivo-feature-list article:last-child { border-bottom: 1px solid #42615c; }
.motivo-feature-list article > span { color: #f2a17f; font-size: .8rem; font-weight: 700; }
.motivo-feature-list h3 { font-size: 1.15rem; margin: 0 0 7px; }
.motivo-feature-list p { color: #b9c8c1; font-size: .9rem; margin: 0; }
.motivo-shop-cta { background: #e86642; color: #fff; display: grid; gap: 45px 70px; grid-template-columns: 1fr auto; padding: 94px max(44px, calc((100vw - 1092px) / 2)); }
.motivo-shop-cta .motivo-eyebrow { color: #ffe0d5; }
.motivo-shop-cta h2 { max-width: 540px; }
.motivo-shop-cta > div:first-child > p:last-child { line-height: 1.6; margin: 20px 0 0; max-width: 600px; }
.motivo-shop-actions { align-items: start; display: flex; flex-direction: column; gap: 19px; }
.motivo-shop-actions .motivo-button-primary { background: #173c3b; }
.motivo-text-link { color: inherit; font-size: .9rem; font-weight: 700; text-decoration: none; }
.motivo-text-link span { font-size: 1.2rem; margin-left: 7px; }
.motivo-onboarding { border-top: 1px solid #f18c70; display: grid; gap: 25px; grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 5px 0 0; padding: 25px 0 0; }
.motivo-onboarding li { display: grid; gap: 7px; }
.motivo-onboarding span { color: #ffe0d5; font-size: .84rem; line-height: 1.45; }
.motivo-final-cta { background: #f8f7f2; padding: 105px 24px 120px; text-align: center; }
.motivo-final-cta h2 { margin: 0 auto 26px; max-width: 650px; }
.motivo-final-cta .motivo-eyebrow { margin-bottom: 20px; }
.motivo-final-cta .motivo-text-link { color: #e86642; }

@media (max-width: 820px) {
  .container:has(#landingSection:not(.hidden)) > .header { align-items: flex-start; }
  .container:has(#landingSection:not(.hidden)) .header-nav { justify-content: space-between; }
  .motivo-hero, .motivo-finder, .motivo-feature-section, .motivo-shop-cta { grid-template-columns: 1fr; }
  .motivo-hero { padding-top: 55px; }
  .motivo-hero-art { min-height: 350px; }
  .motivo-hero-art img { height: 350px; }
  .motivo-finder-controls { grid-template-columns: 1fr 1fr; }
  .motivo-finder-controls .motivo-button { grid-column: 1 / -1; }
  .motivo-shop-actions { align-items: flex-start; }
}

@media (max-width: 640px) {
  .container:has(#landingSection:not(.hidden)) > .header { padding: 15px 18px; }
  .container:has(#landingSection:not(.hidden)) .header-nav { align-items: stretch; gap: 12px; }
  .container:has(#landingSection:not(.hidden)) .header-links { justify-content: space-between; }
  .container:has(#landingSection:not(.hidden)) .header-actions { justify-content: space-between; }
  .container:has(#landingSection:not(.hidden)) .header-link { font-size: .72rem; padding: 5px 0; }
  .motivo-hero { gap: 42px; padding: 68px 22px 58px; }
  .motivo-hero h1 { font-size: clamp(3.3rem, 16vw, 5rem); }
  .motivo-hero .hero-actions { align-items: stretch; flex-direction: column; }
  .motivo-button { width: 100%; }
  .motivo-hero-art { min-height: 300px; }
  .motivo-hero-art img { height: 300px; }
  .motivo-finder, .motivo-benefits { padding: 54px 22px; }
  .motivo-finder-controls .motivo-button { grid-column: auto; }
  .motivo-section-heading { display: block; }
  .motivo-benefit-grid { gap: 34px; grid-template-columns: 1fr; }
  .motivo-benefit-grid article, .motivo-benefit-grid article:first-child { border-left: 0; border-top: 1px solid #cad5ce; padding: 28px 0 0; }
  .motivo-benefit-grid article:first-child { border-top: 0; padding-top: 0; }
  .motivo-feature-section, .motivo-shop-cta { padding: 66px 22px; }
  .motivo-onboarding { grid-template-columns: 1fr; }
}

/* Landing refinements: shared logo, slideshow, and true page-level themes. */
.container:has(#landingSection:not(.hidden)) .brand::before,
.container:has(#landingSection:not(.hidden)) .brand::after { content: none; }

body.dark-mode .container:has(#landingSection:not(.hidden)) .brand { color: #f1f3ec; }
body.dark-mode .container:has(#landingSection:not(.hidden)) .header-link { color: #b7c6c0; }
body.dark-mode .container:has(#landingSection:not(.hidden)) .header-link:hover { color: #fff; }
body.dark-mode .container:has(#landingSection:not(.hidden)) .header-signup { border-color: #47605a; color: #edf2ed; }
body.dark-mode .container:has(#landingSection:not(.hidden)) .header-login { background: #e86642; border-color: #e86642; }
body.dark-mode .motivo-landing { background: #0d1717; color: #edf2ed; }
body.dark-mode .motivo-hero { background: #0d1717; }
body.dark-mode .motivo-hero-subtitle, body.dark-mode .motivo-finder p:not(.motivo-eyebrow), body.dark-mode .motivo-benefit-grid p, body.dark-mode .motivo-feature-intro > p:last-child { color: #afbeb8; }
body.dark-mode .motivo-button-secondary { border-color: #47605a; color: #edf2ed; }
body.dark-mode .motivo-benefits { background: #0d1717; }
body.dark-mode .motivo-final-cta { background: #0d1717; }

@media (max-width: 640px) {
}

/* Shared public-page header. */
.motivo-public-page { background: #f8f7f2; color: #173c3b; font-family: 'DM Sans', sans-serif; }
.motivo-public-page > .header,
.motivo-public-page > .container > .header { align-items: center; background: #f8f7f2; border-bottom: 1px solid #d9ded6; display: flex; gap: 0; justify-content: flex-start; min-height: 82px; padding: 19px clamp(22px, 5vw, 76px); position: relative; z-index: 20; }
.motivo-public-page > .container { background: transparent; border: 0; box-shadow: none; display: block; max-width: none; padding: 0; }
.motivo-public-page .brand { left: 50%; position: absolute; transform: translateX(-50%); }
.motivo-public-page .brand-logo { background: #173c3b; border-radius: 4px; display: block; height: 44px; object-fit: contain; padding: 3px 7px; width: 145px; }
.motivo-public-page .motivo-menu-toggle { align-items: center; background: transparent; border: 1px solid #cbd5ce; border-radius: 4px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; height: 42px; justify-content: center; margin: 0; padding: 0; position: relative; width: 42px; z-index: 22; }
.motivo-public-page .motivo-menu-toggle span { background: #173c3b; display: block; height: 2px; width: 18px; }
.motivo-public-page .motivo-menu-toggle:hover { background: #e5eee7; transform: none; }
.motivo-public-page .header-nav#motivo-side-menu { align-items: stretch; background: #f8f7f2; box-shadow: 14px 0 34px rgba(23,60,59,.16); display: flex; flex-direction: column; gap: 28px; height: 100vh; left: 0; max-width: 330px; opacity: 0; padding: 112px 28px 28px; pointer-events: none; position: fixed; top: 0; transform: translateX(-105%); transition: opacity .2s ease, transform .25s ease; visibility: hidden; width: min(84vw, 330px); z-index: 19; }
.motivo-public-page .header-nav#motivo-side-menu .header-links,
.motivo-public-page .header-nav#motivo-side-menu .header-actions { align-items: stretch; display: flex; flex-direction: column; gap: 10px; }
.motivo-public-page .header-nav#motivo-side-menu .header-link { border-radius: 4px; color: #53615f; padding: 13px 12px; text-align: left; width: 100%; }
.motivo-public-page .header-nav#motivo-side-menu .header-link::after { display: none; }
body.motivo-menu-open .header-nav#motivo-side-menu { opacity: 1; pointer-events: auto; transform: translateX(0); visibility: visible; }
body.motivo-public-page.dark-mode { background: #0d1717; color: #edf2ed; }
body.motivo-public-page.dark-mode > .header,
body.motivo-public-page.dark-mode > .container > .header { background: #0d1717; border-bottom-color: #2b403d; }
body.motivo-public-page.dark-mode .motivo-menu-toggle { border-color: #47605a; }
body.motivo-public-page.dark-mode .motivo-menu-toggle span { background: #edf2ed; }
body.motivo-public-page.dark-mode .header-nav#motivo-side-menu { background: #0d1717; box-shadow: 14px 0 34px rgba(0,0,0,.35); }
body.motivo-public-page.dark-mode .header-nav#motivo-side-menu .header-link { color: #d9e5df; }
body.motivo-public-page.dark-mode .header-nav#motivo-side-menu .header-link:hover { background: #172d2b; }
.motivo-public-page .motivo-menu-theme,
.container:has(#landingSection:not(.hidden)) .motivo-menu-theme { align-items: center; background: transparent; border: 1px solid #cbd5ce; border-radius: 6px; color: #53615f; cursor: pointer; display: flex; font: inherit; font-size: .78rem; font-weight: 700; gap: 9px; margin: 8px 0 0; padding: 11px 12px; text-align: left; width: 100%; }
.motivo-public-page .motivo-menu-theme:hover,
.container:has(#landingSection:not(.hidden)) .motivo-menu-theme:hover { background: #e5eee7; color: #173c3b; transform: none; }
.motivo-drawer-heading { border-bottom: 1px solid #d2dfd5; display: grid; gap: 4px; margin-bottom: 7px; padding: 0 12px 17px; }
.motivo-drawer-heading img { background: #173c3b; border-radius: 4px; display: block; height: 36px; object-fit: contain; padding: 3px 7px; width: 124px; }
.motivo-drawer-heading span { color: #e86642; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
body.motivo-public-page.dark-mode .motivo-menu-theme,
body.dark-mode .container:has(#landingSection:not(.hidden)) .motivo-menu-theme { border-color: #47605a; color: #d9e5df; }
body.motivo-public-page.dark-mode .motivo-menu-theme:hover,
body.dark-mode .container:has(#landingSection:not(.hidden)) .motivo-menu-theme:hover { background: #172d2b; color: #fff; }
body.dark-mode .motivo-drawer-heading { border-bottom-color: #31504a; }
body.motivo-public-page.dark-mode > .container { background: #0d1717 !important; color: #edf2ed; }
body.motivo-public-page.dark-mode .contact-page { background: #0d1717; }
body.motivo-public-page.dark-mode .contact-intro h1,
body.motivo-public-page.dark-mode .contact-form h2,
body.motivo-public-page.dark-mode .overview-features h2,
body.motivo-public-page.dark-mode .card h2 { color: #f3f5ef; }
body.motivo-public-page.dark-mode .contact-form,
body.motivo-public-page.dark-mode .overview-features,
body.motivo-public-page.dark-mode .card { background: #172d2b !important; border-color: #2e4a44; box-shadow: 0 12px 30px rgba(0,0,0,.16); }
body.motivo-public-page.dark-mode .contact-detail { background: #132523; border-color: #2e4a44; }
body.motivo-public-page.dark-mode .contact-detail strong,
body.motivo-public-page.dark-mode .feature-summary { color: #edf2ed; }
body.motivo-public-page.dark-mode .feature-summary:hover { background: #21403b; }
body.motivo-public-page.dark-mode .feature-content-inner,
body.motivo-public-page.dark-mode .card p,
body.motivo-public-page.dark-mode .contact-intro p { color: #afbeb8; }
body.motivo-public-page.dark-mode input,
body.motivo-public-page.dark-mode select,
body.motivo-public-page.dark-mode textarea { background: #0f2020; border-color: #31504a; color: #edf2ed; }

@media (max-width: 640px) {
  .motivo-public-page > .header,
  .motivo-public-page > .container > .header { min-height: 70px; padding: 14px 18px; }
  .motivo-public-page .brand-logo { height: 38px; width: 125px; }
}

/* Collapsible public navigation. */
.container:has(#landingSection:not(.hidden)) > .header { position: relative; z-index: 20; }
.container:has(#landingSection:not(.hidden)) .motivo-menu-toggle {
  align-items: center;
  background: transparent;
  border: 1px solid #cbd5ce;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 42px;
  justify-content: center;
  margin-left: auto;
  padding: 0;
  position: relative;
  width: 42px;
  z-index: 22;
}
.container:has(#landingSection:not(.hidden)) .motivo-menu-toggle span { background: #173c3b; display: block; height: 2px; transition: transform .2s, opacity .2s; width: 18px; }
.container:has(#landingSection:not(.hidden)) .motivo-menu-toggle:hover { background: #e5eee7; transform: none; }
.container:has(#landingSection:not(.hidden)) .header-nav#motivo-side-menu {
  align-items: stretch;
  background: #f8f7f2;
  box-shadow: 14px 0 34px rgba(23,60,59,.16);
  display: flex;
  flex-direction: column;
  gap: 28px;
  height: 100vh;
  justify-content: flex-start;
  left: 0;
  max-width: 330px;
  opacity: 0;
  padding: 112px 28px 28px;
  pointer-events: none;
  position: fixed;
  top: 0;
  transform: translateX(-105%);
  transition: opacity .2s ease, transform .25s ease;
  visibility: hidden;
  width: min(84vw, 330px);
  z-index: 19;
}
.container:has(#landingSection:not(.hidden)) .header-nav#motivo-side-menu .header-links,
.container:has(#landingSection:not(.hidden)) .header-nav#motivo-side-menu .header-actions { align-items: stretch; display: flex; flex-direction: column; gap: 10px; }
.container:has(#landingSection:not(.hidden)) .header-nav#motivo-side-menu .header-link { border-radius: 4px; padding: 13px 12px; text-align: left; width: 100%; }
.container:has(#landingSection:not(.hidden)) .header-nav#motivo-side-menu .header-link::after { display: none; }
body.motivo-menu-open .container:has(#landingSection:not(.hidden)) .header-nav#motivo-side-menu { opacity: 1; pointer-events: auto; transform: translateX(0); visibility: visible; }
body.motivo-menu-open .container:has(#landingSection:not(.hidden)) .motivo-menu-toggle span:first-child { transform: translateY(6px) rotate(45deg); }
body.motivo-menu-open .container:has(#landingSection:not(.hidden)) .motivo-menu-toggle span:nth-child(2) { opacity: 0; }
body.motivo-menu-open .container:has(#landingSection:not(.hidden)) .motivo-menu-toggle span:last-child { transform: translateY(-6px) rotate(-45deg); }
body.dark-mode .container:has(#landingSection:not(.hidden)) .motivo-menu-toggle { border-color: #47605a; }
body.dark-mode .container:has(#landingSection:not(.hidden)) .motivo-menu-toggle span { background: #edf2ed; }
body.dark-mode .container:has(#landingSection:not(.hidden)) .motivo-menu-toggle:hover { background: #172d2b; }
body.dark-mode .container:has(#landingSection:not(.hidden)) .header-nav#motivo-side-menu { background: #0d1717; box-shadow: 14px 0 34px rgba(0,0,0,.35); }
body.dark-mode .container:has(#landingSection:not(.hidden)) .header-nav#motivo-side-menu .header-link { color: #d9e5df; }
body.dark-mode .container:has(#landingSection:not(.hidden)) .header-nav#motivo-side-menu .header-link:hover { background: #172d2b; }

@media (max-width: 640px) {
  .container:has(#landingSection:not(.hidden)) .header-nav#motivo-side-menu { padding-top: 98px; }
}

/* Shop finder polish. */
.motivo-finder {
  align-items: center;
  background: #e8f0ea;
  border: 1px solid #d2dfd5;
  border-radius: 22px;
  box-shadow: 0 18px 45px rgba(23,60,59,.08);
  gap: 48px;
  padding: 32px 38px;
}
.motivo-finder > div:first-child { min-width: 0; }
.motivo-finder .motivo-eyebrow { margin-bottom: 12px; }
.motivo-finder h2 { font-size: clamp(1.65rem, 2.5vw, 2.35rem); }
.motivo-finder p:not(.motivo-eyebrow) { font-size: .92rem; line-height: 1.5; }
.motivo-finder-controls {
  align-items: stretch;
  background: #fff;
  border: 1px solid #d8e2da;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(23,60,59,.06);
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1.15fr) minmax(170px, .85fr) auto;
  overflow: hidden;
  padding: 6px;
}
.motivo-finder-controls input,
.motivo-finder-controls select {
  background: transparent;
  border: 0;
  border-radius: 9px;
  color: #173c3b;
  font-size: .9rem;
  min-height: 48px;
  min-width: 0;
  padding: 0 14px;
}
.motivo-finder-controls input:focus,
.motivo-finder-controls select:focus { background: #f2f7f3; box-shadow: none; outline: 0; }
.motivo-finder-controls select { border-left: 1px solid #d8e2da; }
.motivo-finder-controls .motivo-button-dark { border-radius: 9px; min-height: 48px; padding-left: 22px; padding-right: 22px; white-space: nowrap; }
.motivo-hero .motivo-button-primary,
.motivo-finder-controls .motivo-button-dark {
  background: #e86642;
  border: 1px solid #e86642;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(232,102,66,.18);
  font-size: .84rem;
  letter-spacing: .01em;
  height: 50px;
  min-height: 50px;
}
.motivo-hero .motivo-button-primary:hover,
.motivo-finder-controls .motivo-button-dark:hover {
  background: #cc4f31;
  border-color: #cc4f31;
  box-shadow: 0 11px 22px rgba(204,79,49,.24);
}
.motivo-finder-returning {
  align-items: center;
  color: #65716e;
  display: flex;
  font-size: .78rem;
  gap: 9px;
  grid-column: 1 / -1;
  justify-content: flex-end;
  padding: 8px 7px 1px;
}
.motivo-finder-login {
  background: transparent;
  border: 0;
  color: #173c3b;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  margin: 0;
  padding: 0;
  text-decoration: underline;
  text-decoration-color: #e86642;
  text-underline-offset: 3px;
}
.motivo-finder-login:hover { background: transparent; color: #e86642; }
body.dark-mode .motivo-finder { border-color: #2e4a44; box-shadow: 0 18px 45px rgba(0,0,0,.18); }
body.dark-mode .motivo-finder-controls { background: #0f2020; border-color: #31504a; box-shadow: none; }
body.dark-mode .motivo-finder-controls input,
body.dark-mode .motivo-finder-controls select { color: #edf2ed; }
body.dark-mode .motivo-finder-controls input:focus,
body.dark-mode .motivo-finder-controls select:focus { background: #172d2b; }
body.dark-mode .motivo-finder-controls select { border-left-color: #31504a; }
body.dark-mode .motivo-finder-returning { color: #afbeb8; }
body.dark-mode .motivo-finder-login { color: #edf2ed; }
body.dark-mode .motivo-finder-login:hover { color: #f2a17f; }
body.motivo-public-page .contact-page { color: #173c3b; }
body.motivo-public-page .contact-form,
body.motivo-public-page .overview-features,
body.motivo-public-page .card { background: #fff; border-color: #d2dfd5; box-shadow: 0 14px 34px rgba(23,60,59,.07); }
body.motivo-public-page .contact-detail { background: #e8f0ea; border-color: #d2dfd5; }
body.motivo-public-page .contact-intro h1,
body.motivo-public-page .contact-form h2,
body.motivo-public-page .overview-features h2,
body.motivo-public-page .card h2 { color: #173c3b; }
body.motivo-public-page .contact-intro p,
body.motivo-public-page .card p { color: #65716e; }

.appointment-datetime-group {
  background: #e8f0ea;
  border: 1px solid #d2dfd5;
  border-radius: 14px;
  margin: 18px 0;
  padding: 18px;
}
.appointment-datetime-group legend { color: #173c3b; font-size: .82rem; font-weight: 800; padding: 0 8px; }
.appointment-datetime-grid { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.appointment-field label { color: #65716e; font-size: .72rem; margin: 0 0 7px; }
.appointment-field input[type="date"],
.appointment-field input[type="time"] { background: #fff; border: 1px solid #c6d8ca; border-radius: 9px; color: #173c3b; font: inherit; min-height: 48px; padding: 0 12px; width: 100%; }
.appointment-field input[type="date"]:focus,
.appointment-field input[type="time"]:focus { border-color: #e86642; box-shadow: 0 0 0 3px rgba(232,102,66,.14); outline: 0; }
body.dark-mode .appointment-datetime-group { background: #172d2b; border-color: #2e4a44; }
body.dark-mode .appointment-datetime-group legend { color: #edf2ed; }
body.dark-mode .appointment-field label { color: #afbeb8; }
body.dark-mode .appointment-field input[type="date"],
body.dark-mode .appointment-field input[type="time"] { background: #0f2020; border-color: #31504a; color: #edf2ed; color-scheme: dark; }

@media (max-width: 640px) {
  .appointment-datetime-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .motivo-finder { gap: 24px; }
}

@media (max-width: 640px) {
  .motivo-finder { border-radius: 16px; padding: 26px 18px; }
  .motivo-finder-controls { gap: 5px; grid-template-columns: 1fr; padding: 7px; }
  .motivo-finder-controls select { border-left: 0; border-top: 1px solid #d8e2da; }
  body.dark-mode .motivo-finder-controls select { border-left: 0; border-top-color: #31504a; }
  .motivo-finder-controls .motivo-button-dark { margin-top: 3px; }
}

/* Keep the menu and centered brand visually stable at every width. */
.container:has(#landingSection:not(.hidden)) > .header { justify-content: flex-start; }
.container:has(#landingSection:not(.hidden)) .brand { left: 50%; position: absolute; transform: translateX(-50%); }
.container:has(#landingSection:not(.hidden)) .motivo-menu-toggle { margin-left: 0; }
/* =========================
   SHARED BUTTON SYSTEM
   ========================= */

.btn-primary,
.btn-secondary,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  width: auto;
  min-height: 44px;

  margin: 0;
  padding: 11px 18px;

  border-radius: 9px;

  font-size: 0.92rem;
  font-weight: 750;
  text-decoration: none;

  cursor: pointer;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.btn-primary {
  background: var(----Green);
  color: #ffffff;
  border: 1px solid var(----Green);
}

.btn-primary:hover {
  background: var(----Green-dark);
  border-color: var(----Green-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px #72be384f;
}

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}

.btn-secondary:hover {
  background: var(--navy-soft);
  border-color: var(--blue);
  color: var(--navy);
  transform: translateY(-2px);
}

body.dark-mode .btn-secondary {
  color: #ffffff;
  border-color: #40556a;
}

body.dark-mode .btn-secondary:hover {
  background: #162638;
  color: #ffffff;
}
.header .btn-secondary {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.45);
}

.header .btn-secondary:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.75);
}

.btn-ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
}

.btn-ghost:hover {
  background: var(--navy-soft);
  color: var(--navy);
  transform: translateY(-1px);
}
/* =========================
   CUSTOMER PORTAL HEADER
   ========================= */

.customer-portal-header {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;

  min-height: 180px;
  margin-bottom: 24px;
  padding: 28px;

  border-radius: 16px;
  overflow: hidden;

  background:
    linear-gradient(
      90deg,
      rgba(7, 24, 39, 0.88),
      rgba(7, 24, 39, 0.68)
    ),
    url('/images/Smokey-lift.jpg') center / cover no-repeat;

  color: #ffffff;
}

.customer-portal-header h2 {
  margin: 0 0 8px;
  color: #ffffff;
}

.customer-portal-header .shop-title-text {
  color: #ffb57c;
}

.customer-portal-header #clientWelcomeName {
  color: #ffffff !important;
}

.customer-portal-header .btn-secondary {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.5);
}

.customer-portal-header .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #ffffff;
  color: #ffffff;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.settings-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.theme-color-picker {
  width: 100%;
}

.customer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.customer-nav .portal-tab {
  width: auto;
  margin: 0;
}

@media (max-width: 700px) {
  .customer-portal-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .settings-grid {
    grid-template-columns: 1fr;
  }
}
.header-action-link {
  width: auto;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.header-action-link:hover {
  background: transparent;
  transform: none;
}
.toast-container {
  position: fixed;
  top: 92px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(380px, calc(100vw - 32px));
}

.app-toast {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;

  padding: 16px 18px;

  background: var(--surface, #ffffff);
  color: var(--text, #111827);

  border: 1px solid rgba(148, 163, 184, 0.3);
  border-left: 4px solid var(--primary);

  border-radius: 12px;

  box-shadow:
    0 12px 32px rgba(15, 23, 42, 0.18);

  opacity: 0;
  transform: translateY(-12px);

  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.app-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.app-toast-success {
  border-left-color: #22c55e;
}

.app-toast-error {
  border-left-color: #ef4444;
}

.app-toast-info {
  border-left-color: var(--primary);
}

.app-toast-message {
  flex: 1;
  line-height: 1.45;
}

.app-toast-close {
  width: auto;
  margin: 0;
  padding: 0;

  border: 0;
  background: transparent;

  color: inherit;
  font-size: 1.35rem;
  line-height: 1;

  cursor: pointer;
}

.app-toast-close:hover {
  background: transparent;
  transform: none;
}

body.dark-mode .app-toast {
  background: #0f172a;
  color: #f8fafc;
  border-color: rgba(148, 163, 184, 0.2);
}

@media (max-width: 600px) {
  .toast-container {
    top: 76px;
    left: 16px;
    right: 16px;
    width: auto;
  }
}
.login-spinner {
  width: 16px;
  height: 16px;

  display: inline-block;

  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #ffffff;

  border-radius: 50%;

  animation: login-spin 0.7s linear infinite;

  margin-right: 8px;

  vertical-align: middle;
}

@keyframes login-spin {
  to {
    transform: rotate(360deg);
  }
}

button:disabled {
  opacity: 0.75;
  cursor: not-allowed;
}


/* ======================================================
   DESIGN REFRESH — NEUTRAL SIDEBAR WORKSPACE
   Inspired by the cleaner dashboard direction while
   preserving the existing app structure and interactions.
   ====================================================== */

:root {
  --page: #20242a;
  --workspace: #f4f5f7;
  --surface: #ffffff;
  --ink: #1f2933;
  --muted: #667085;
  --line: #e3e7ec;
  --navy: #26313d;
  --navy-soft: #edf1f5;

  /* Neutral steel accent instead of lime/--Green */
  ----Green: #64748b;
  ----Green-dark: #475569;
  --blue: #64748b;

  --shadow: 0 18px 44px rgba(15, 23, 42, 0.10);
}

html {
  background: var(--page);
}

body {
  min-height: 100vh;
  padding: 14px;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.05), transparent 28%),
    var(--page);
}

body::before {
  display: none;
}

.container {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  align-items: start;

  width: min(1480px, 100%);
  min-height: calc(100vh - 28px);

  margin: 0 auto;
  padding: 0;

  overflow: hidden;

  background: var(--workspace);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 20px;

  box-shadow:
    0 24px 70px rgba(0,0,0,.24);
}

/* Keep the existing header markup, but make it a sidebar. */
.header {
  position: sticky;
  top: 0;

  grid-column: 1;
  grid-row: 1;

  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;

  min-height: calc(100vh - 28px);
  padding: 24px 16px;

  background: #171b21;
  border-right: 1px solid rgba(255,255,255,.07);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;

  margin: 0 4px 34px;

  color: #f8fafc;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.15;
  white-space: normal;
}

.brand::before {
  content: none;
}

.brand span {
  color: #f8fafc;
}

.header-nav,
.header-links,
.header-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;

  width: 100%;
}

.header-nav {
  gap: 18px;
}

.header-link,
.header-action-link {
  position: relative;

  display: flex;
  align-items: center;

  width: 100%;
  min-height: 42px;

  margin: 0;
  padding: 10px 12px;

  border: 1px solid transparent;
  border-radius: 9px;

  background: transparent;
  color: #b9c2ce;

  font-size: .82rem;
  font-weight: 700;
  text-align: left;
  text-decoration: none;

  transition:
    color .2s ease,
    background .2s ease,
    border-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

.header-link::after {
  display: none;
}

/* Keep the little lift/animation you liked. */
.header-link:hover,
.header-action-link:hover {
  color: #ffffff;
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.08);
  transform: translateX(4px);

  box-shadow:
    0 8px 18px rgba(0,0,0,.12);
}

.header-actions {
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.header-actions .header-link:last-child,
.header-actions .header-action-link:last-child {
  background: #eef2f6;
  color: #1f2933;
  border-color: #eef2f6;
}

.header-actions .header-link:last-child:hover,
.header-actions .header-action-link:last-child:hover {
  background: #ffffff;
  color: #111827;
}

/* Everything that is not the sidebar lives in the workspace column. */
.container > #landingSection,
.container > #registerSection,
.container > #loginSection,
.container > #customerDashboard,
.container > #employeeDashboard {
  grid-column: 2;
  min-width: 0;
  margin: 0;
  padding: 30px;
}

.container > #registerSection,
.container > #loginSection,
.container > #customerDashboard,
.container > #employeeDashboard {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

/* Hero stays visual, but tighter and more app-like inside the workspace. */
.hero-slider {
  margin-top: 0;
  min-height: 620px;
  border-radius: 16px;
  box-shadow:
    0 18px 40px rgba(15,23,42,.16);
}

.hero-content {
  width: min(980px, 88%);
}

.hero-actions button {
  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

.hero-actions button:hover {
  transform: translateY(-3px);
  box-shadow:
    0 10px 24px rgba(0,0,0,.22);
}

/* Clean dashboard/card language */
.panel,
.card,
.feature-card,
.marketing-stat-grid,
.overview-features,
.contact-form,
.invoice-box {
  border-color: var(--line);
  box-shadow:
    0 8px 24px rgba(15,23,42,.055);
}

.card,
.panel,
.feature-card,
.invoice-box {
  border-radius: 11px;
}

.feature-card {
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

.feature-card:hover {
  transform: translateY(-3px);
  border-color: #cbd3dc;
  box-shadow:
    0 14px 32px rgba(15,23,42,.09);
}

.stat-number {
  color: #475569;
}

/* Buttons: neutral steel, with the same responsive motion feel. */
.btn-primary,
button:not(.hero-arrow):not(.theme-switch):not(.app-toast-close) {
  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

.btn-primary:hover,
button:not(.hero-arrow):not(.theme-switch):not(.app-toast-close):hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 18px rgba(71,85,105,.16);
}

/* Workflow retains its button feel but becomes more dashboard-like. */
.workflow-bar {
  gap: 8px;
  padding: 8px 2px 12px;
}

.step-card {
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid var(--line);
  color: #5b6572;
  box-shadow: none;
}

.step-card:hover,
.step-card.active {
  background: #334155;
  border-color: #334155;
  color: #ffffff;
  transform: translateY(-2px);
}

/* Form controls */
input,
select,
textarea {
  background: #ffffff;
  border-color: #d8dee6;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #64748b;
  box-shadow: 0 0 0 3px rgba(100,116,139,.14);
}

/* Footer/theme controls span the workspace area. */
.legal-footer,
.theme-footer {
  grid-column: 2;
}

.legal-footer {
  color: var(--muted);
}

.legal-footer a {
  color: var(--muted);
}

/* Dark mode keeps the same neutral language. */
body.dark-mode {
  --page: #0e1116;
  --workspace: #11161d;
  --surface: #171d25;
  --ink: #f3f4f6;
  --muted: #9aa6b5;
  --line: #28313d;
  --navy: #e5e7eb;
  --navy-soft: #202833;
  ----Green: #94a3b8;
  ----Green-dark: #cbd5e1;
  --blue: #94a3b8;

  background:
    radial-gradient(circle at top left, rgba(255,255,255,.035), transparent 30%),
    var(--page);
}

body.dark-mode .container {
  background: var(--workspace);
  border-color: #202833;
}

body.dark-mode .header {
  background: #0b0f14;
  border-right-color: #202833;
}

body.dark-mode .step-card {
  background: #171d25;
  color: #aab4c0;
  border-color: #2b3541;
}

body.dark-mode .step-card:hover,
body.dark-mode .step-card.active {
  background: #cbd5e1;
  border-color: #cbd5e1;
  color: #111827;
}

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  background: #111820;
  border-color: #2b3541;
}

body.dark-mode .feature-card:hover {
  border-color: #3b4654;
}

/* Mobile: sidebar becomes a compact top navigation again. */
@media (max-width: 760px) {
  body {
    padding: 6px;
  }

  .container {
    display: block;
    min-height: calc(100vh - 12px);
    border-radius: 14px;
  }

  .header {
    position: relative;
    min-height: auto;
    padding: 16px;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }

  .brand {
    margin-bottom: 16px;
  }

  .header-nav {
    gap: 10px;
  }

  .header-links,
  .header-actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 7px;
  }

  .header-actions {
    padding-top: 10px;
  }

  .header-link,
  .header-action-link {
    width: auto;
    flex: 1 1 130px;
    justify-content: center;
    text-align: center;
  }

  .header-link:hover,
  .header-action-link:hover {
    transform: translateY(-2px);
  }

  .container > #landingSection,
  .container > #registerSection,
  .container > #loginSection,
  .container > #customerDashboard,
  .container > #employeeDashboard {
    padding: 16px;
  }

  .legal-footer,
  .theme-footer {
    grid-column: auto;
  }

  .hero-slider {
    min-height: 560px;
  }
}


/* ======================================================
   IMMERSIVE FULL-PAGE LAYOUT FIX
   Supports both:
   1) index.html where .header is inside .container
   2) overview/contact where .header is a body-level sibling
   ====================================================== */

html,
body {
  width: 100%;
  min-height: 100%;
}

body {
  padding: 0;
  background: var(--page);
}

/* Main app: remove the framed / floating-card feeling. */
.container {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Slightly wider, more immersive sidebar. */
.container > .header {
  min-height: 100vh;
  padding: 28px 18px;
}

/* ------------------------------------------------------
   Standalone pages: overview.html + contact.html
   Their header currently sits OUTSIDE .container.
   Turn that body-level header into the same sidebar.
   ------------------------------------------------------ */

body > .header {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 100;

  width: 220px;
  min-height: 100vh;

  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;

  padding: 28px 18px;

  background: #171b21;
  border-right: 1px solid rgba(255,255,255,.07);
}

body > .header .brand {
  margin: 0 4px 34px;
}

body > .header .header-nav,
body > .header .header-links,
body > .header .header-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

body > .header .header-nav {
  gap: 18px;
}

body > .header .header-links,
body > .header .header-actions {
  gap: 7px;
}

/* Standalone page workspace fills the rest of the viewport. */
body > .header + .container {
  display: block;

  width: calc(100% - 220px);
  min-height: 100vh;

  margin: 0 0 0 220px;
  padding: 0;

  background: var(--workspace);
}

/* Give Overview / Contact more room instead of a narrow centered island. */
body > .header + .container .contact-page {
  width: 100%;
  max-width: none;

  margin: 0;
  padding: clamp(36px, 5vw, 72px) clamp(28px, 5vw, 72px) 64px;
}

body > .header + .container .contact-intro {
  width: min(100%, 980px);
  max-width: none;
  margin: 0 0 46px;
  text-align: left;
}

body > .header + .container .contact-intro h1 {
  max-width: 980px;
  font-size: clamp(2.7rem, 5.4vw, 5.2rem);
  line-height: .98;
  letter-spacing: -.06em;
}

body > .header + .container .contact-intro p {
  max-width: 780px;
  font-size: 1.05rem;
}

/* Overview: use the canvas. */
body > .header + .container .overview-feature-row {
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
  gap: 28px;
  margin-bottom: 28px;
}

body > .header + .container .overview-features,
body > .header + .container .overview-feature-image {
  min-height: 480px;
  height: auto;
}

body > .header + .container .overview-features {
  padding: 32px;
}

body > .header + .container .grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

/* Contact: wider two-column composition. */
body > .header + .container .contact-layout {
  width: 100%;
  max-width: none;
  grid-template-columns: minmax(300px, .72fr) minmax(480px, 1.28fr);
  gap: 34px;
}

body > .header + .container .contact-details {
  gap: 14px;
}

body > .header + .container .contact-form {
  padding: 34px;
}

body > .header + .container .contact-details .overview-feature-image {
  min-height: 330px;
  height: 330px;
}

/* Keep the subtle motion without making the UI flashy. */
body > .header .header-link:hover,
body > .header .header-action-link:hover {
  transform: translateX(4px);
}

/* Dark mode standalone pages. */
body.dark-mode > .header {
  background: #0b0f14;
  border-right-color: #202833;
}

body.dark-mode > .header + .container {
  background: var(--workspace);
}

/* Tablet */
@media (max-width: 1050px) {
  body > .header,
  .container > .header {
    width: 190px;
  }

  .container {
    grid-template-columns: 190px minmax(0, 1fr);
  }

  body > .header + .container {
    width: calc(100% - 190px);
    margin-left: 190px;
  }

  body > .header + .container .overview-feature-row,
  body > .header + .container .contact-layout {
    grid-template-columns: 1fr;
  }

  body > .header + .container .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile: return to a compact top nav and full-width content. */
@media (max-width: 760px) {
  body > .header {
    position: relative;
    inset: auto;

    width: 100%;
    min-height: auto;

    padding: 16px;

    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }

  body > .header + .container {
    width: 100%;
    min-height: 0;
    margin-left: 0;
  }

  body > .header + .container .contact-page {
    padding: 28px 18px 40px;
  }

  body > .header + .container .contact-intro {
    margin-bottom: 30px;
  }

  body > .header + .container .contact-intro h1 {
    font-size: clamp(2.35rem, 11vw, 3.5rem);
  }

  body > .header + .container .grid {
    grid-template-columns: 1fr;
  }

  body > .header + .container .overview-features,
  body > .header + .container .overview-feature-image {
    min-height: 0;
  }

  body > .header + .container .overview-feature-image {
    height: 300px;
  }
}


/* ======================================================
   CUSTOMER SHOP PORTAL
   Signed-in customers get a shop-specific experience.
   ====================================================== */

.customer-home {
  display: grid;
  gap: 22px;
}

.customer-home-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;

  padding: clamp(28px, 4vw, 48px);

  background:
    linear-gradient(135deg, #17202a, #2f3b48);
  color: #ffffff;

  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  overflow: hidden;
}

.customer-home-kicker,
.customer-home-label {
  display: block;
  margin-bottom: 8px;

  color: #8b98a8;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.customer-home-hero .customer-home-kicker {
  color: #c9d2dc;
}

.customer-home-hero h1 {
  margin: 0 0 10px;
  max-width: 760px;

  color: #ffffff;
  font-size: clamp(2.2rem, 4vw, 4.4rem);
  line-height: .98;
  letter-spacing: -.055em;
}

.customer-home-hero p {
  max-width: 720px;
  margin: 0;
  color: #d7dee6;
  font-size: 1rem;
}

.customer-home-hero .btn-primary {
  flex: 0 0 auto;
  margin: 0;
  white-space: nowrap;
  background: #f8fafc;
  color: #1f2933;
  border-color: #f8fafc;
}

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

.customer-home-card,
.customer-home-shop-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15,23,42,.045);
}

.customer-home-card {
  min-height: 158px;
  padding: 22px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.customer-home-card strong {
  color: var(--ink);
  font-size: 1.08rem;
  line-height: 1.35;
}

.customer-home-link {
  margin-top: auto;
  padding: 10px 0 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  color: var(--muted) !important;
  font-size: .8rem;
  font-weight: 700;
}

.customer-home-link:hover {
  transform: translateX(3px) !important;
  color: var(--ink) !important;
}

.customer-home-shop-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;

  padding: 26px;
}

.customer-home-shop-card h3 {
  margin: 0 0 8px;
}

.customer-home-shop-card p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
}

/* Old horizontal customer tabs are superseded by sidebar navigation. */
#customerDashboard > .customer-nav {
  display: none;
}

/* Sidebar active state for customer portal. */
.customer-nav-link.active {
  color: #ffffff;
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.10);
  transform: translateX(4px);
}

.customer-logout {
  color: #d9e0e8;
}

body.dark-mode .customer-home-card,
body.dark-mode .customer-home-shop-card {
  background: #171d25;
  border-color: #28313d;
}

body.dark-mode .customer-home-hero {
  background:
    linear-gradient(135deg, #090d12, #1c2530);
}

@media (max-width: 1100px) {
  .customer-home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .customer-home-hero,
  .customer-home-shop-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .customer-home-grid {
    grid-template-columns: 1fr;
  }

  .customer-home-hero .btn-primary,
  .customer-home-shop-card .btn-secondary {
    width: 100%;
  }
}


/* ======================================================
   SIDEBAR BUTTON POLISH
   Neutral auth buttons + underline hover animation
   ====================================================== */

/* Keep sidebar links/buttons neutral instead of filling Portal Login white. */
.header-actions .header-link,
.header-actions .header-action-link {
  background: transparent;
  color: #b9c2ce;
  border-color: rgba(255,255,255,.10);
}

/* Explicitly override the older "last button becomes white" rule. */
.header-actions .header-link:last-child,
.header-actions .header-action-link:last-child {
  background: transparent;
  color: #b9c2ce;
  border-color: rgba(255,255,255,.10);
}

.header-actions .header-link:last-child:hover,
.header-actions .header-action-link:last-child:hover {
  background: rgba(255,255,255,.07);
  color: #ffffff;
  border-color: rgba(255,255,255,.14);
  transform: translateX(4px) translateY(-1px);
}

/* Restore the small animated underline on sidebar navigation items. */
.header-link::after,
.header-action-link::after {
  content: "";
  display: block;

  position: absolute;
  left: 12px;
  bottom: 6px;

  width: 0;
  height: 2px;

  background: currentColor;
  opacity: .72;
  border-radius: 999px;

  transition:
    width .22s ease,
    opacity .22s ease;
}

.header-link:hover::after,
.header-action-link:hover::after {
  width: calc(100% - 24px);
  opacity: 1;
}

/* Do not put an underline under hidden elements. */
.header-link.hidden::after,
.header-action-link.hidden::after {
  width: 0;
}

/* Customer active navigation keeps a subtle underline as a location cue. */
.customer-nav-link.active::after {
  width: calc(100% - 24px);
  opacity: .9;
}

/* Mobile/top-nav version gets a tighter underline. */
@media (max-width: 760px) {
  .header-link::after,
  .header-action-link::after {
    bottom: 4px;
  }
}


/* ======================================================
   STAFF / MANAGER OPERATIONS PORTAL
   Erick-inspired structure, adapted to the neutral theme.
   ====================================================== */

#employeeDashboard.staff-dashboard {
  padding: clamp(24px, 3vw, 42px);
  background: #f3f4f6;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.staff-portal-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px;

  margin-bottom: 22px;
  padding: clamp(28px, 4vw, 48px);

  color: #fff;
  background:
    linear-gradient(125deg, rgba(20, 27, 35, .98), rgba(47, 58, 70, .94)),
    url('/images/Smokey-lift.jpg') center / cover;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  overflow: hidden;
}

.staff-eyebrow,
.staff-section-kicker {
  display: block;
  margin-bottom: 8px;

  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.staff-eyebrow {
  color: #b8c2ce;
}

.staff-portal-hero h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1;
  letter-spacing: -.05em;
}

.staff-shop-name {
  display: block;
  margin-top: 12px;
  color: #d7dee6;
  font-size: .95rem;
  font-weight: 600;
}

.staff-user-panel {
  min-width: 220px;
  padding: 16px;

  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  backdrop-filter: blur(8px);
}

.staff-user-label {
  display: block;
  margin-bottom: 7px;
  color: #cbd3dc;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.staff-user-badge {
  display: inline-flex;
  margin-bottom: 12px;
  background: #eef1f4;
  color: #26313d;
}

.staff-logout-btn {
  width: 100%;
  margin: 0;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.2);
}

.staff-logout-btn:hover {
  background: rgba(255,255,255,.1);
  color: #fff;
  transform: translateY(-2px);
}

.staff-manager-panel,
.staff-workflow-section,
.staff-jobs-section {
  margin-bottom: 22px;
  padding: clamp(22px, 3vw, 34px);

  background: #fff;
  border: 1px solid #e2e6eb;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(15,23,42,.045);
}

.staff-job-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.staff-job-filters button { background: #f1f3f5; border: 1px solid #e0e4e8; border-radius: 999px; color: #65716e; cursor: pointer; font-size: .75rem; font-weight: 800; margin: 0; padding: 8px 12px; }
.staff-job-filters button.active { background: #173c3b; border-color: #173c3b; color: #fff; }
.staff-inline-action { background: #e86642; border: 0; border-radius: 7px; color: #fff; cursor: pointer; font-size: .72rem; font-weight: 800; margin: 0; padding: 7px 10px; }
.staff-inline-action:hover { background: #cc4f31; }
body.dark-mode .staff-jobs-section { background: #171d25; border-color: #28313d; }
body.dark-mode .staff-job-filters button { background: #202833; border-color: #34404e; color: #b7c2ce; }
body.dark-mode .staff-job-filters button.active { background: #e86642; border-color: #e86642; color: #fff; }

.staff-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;

  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e5e7eb;
}

.staff-section-kicker {
  color: var(--Green);
}

.staff-section-heading h3 {
  margin: 0 0 7px;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  letter-spacing: -.035em;
}

.staff-section-heading p {
  max-width: 720px;
  margin: 0;
  color: #737d89;
  font-size: .86rem;
}

.workflow-progress-card { background: #e8f0ea; border: 1px solid #d2dfd5; border-radius: 14px; display: grid; gap: 10px; margin: 0 0 22px; padding: 16px 18px; }
.workflow-progress-card > div:first-child { align-items: baseline; display: flex; gap: 12px; }
.workflow-progress-card span { color: #e86642; font-size: .7rem; font-weight: 800; letter-spacing: .1em; }
.workflow-progress-card strong { color: #173c3b; font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem; }
.workflow-progress-track { background: #cbd9cf; border-radius: 999px; height: 7px; overflow: hidden; }
.workflow-progress-track span { background: #e86642; border-radius: inherit; display: block; height: 100%; transition: width .25s ease; width: 12.5%; }
.workflow-progress-card small { color: #65716e; font-size: .75rem; }
body.dark-mode .workflow-progress-card { background: #172d2b; border-color: #2e4a44; }
body.dark-mode .workflow-progress-card strong { color: #edf2ed; }
body.dark-mode .workflow-progress-track { background: #31504a; }
body.dark-mode .workflow-progress-card small { color: #afbeb8; }

.customer-invoice-head { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 14px; padding-bottom: 15px; }
.customer-invoice-head h3 { color: var(--navy); font-size: 1.25rem; margin: 4px 0 0; }
.customer-invoice-kicker { color: var(----Green-dark); font-size: .68rem; font-weight: 800; letter-spacing: .12em; }
.customer-invoice-meta { color: var(--muted); display: grid; font-size: .8rem; gap: 6px 12px; grid-template-columns: auto 1fr; margin: 17px 0; }
.customer-invoice-meta strong { color: var(--ink); font-weight: 600; }
.customer-invoice-lines { border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.customer-invoice-line { align-items: center; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; padding: 11px 13px; }
.customer-invoice-line:first-child { border-top: 0; }
.customer-invoice-line-heading { background: var(--navy-soft); color: var(--muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.customer-invoice-empty { color: var(--muted); font-size: .8rem; padding: 13px; }
.customer-invoice-total { display: grid; gap: 6px 12px; grid-template-columns: 1fr auto; margin-top: 17px; }
.customer-invoice-total span { color: var(--muted); font-size: .82rem; }
.customer-invoice-total strong { color: var(--ink); font-size: .9rem; text-align: right; }
.customer-invoice-total strong:last-child { color: var(--primary); font-size: 1.2rem; }
.customer-invoice-note { background: #e8f0ea; border-radius: 7px; color: #53615f; font-size: .78rem; margin: 18px 0 0; padding: 11px 13px; }
body.dark-mode .customer-invoice-head h3,
body.dark-mode .customer-invoice-meta strong,
body.dark-mode .customer-invoice-total strong { color: var(--ink); }
body.dark-mode .customer-invoice-line-heading { background: var(--navy-soft); }
body.dark-mode .customer-invoice-note { background: #172d2b; color: #afbeb8; }

.staff-manager-chip {
  flex: 0 0 auto;
  padding: 7px 10px;

  color: #4e5a68;
  background: #f1f3f5;
  border: 1px solid #e0e4e8;
  border-radius: 999px;

  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.staff-manager-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(320px, .72fr) minmax(0, 1.28fr);
  align-items: start;
}

.staff-create-card,
.staff-roster-card {
  min-width: 0;
  padding: 22px;

  background: #fafbfc;
  border: 1px solid #e2e6eb;
  border-radius: 10px;
}

.staff-card-heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
}

.staff-card-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 28px;
  padding: 0 8px;

  color: #4e5a68;
  background: #72be384f;
  border-radius: 5px;

  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .06em;
}

.staff-card-heading h4 {
  margin: 0 0 4px;
  font-size: 1rem;
}

.staff-card-heading p {
  margin: 0;
  color: #7a8491;
  font-size: .74rem;
}

.staff-field-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}

.staff-create-form label,
.staff-job-toolbar label {
  margin-top: 0;
}

.staff-create-form input,
.staff-create-form select,
.staff-job-toolbar input,
.staff-job-toolbar select,
.staff-dept-form input,
.staff-dept-form select,
.staff-dept-form textarea {
  background: #fff;
}

.staff-create-btn,
.staff-save-record-btn {
  width: auto;
  margin-top: 18px;
  padding-inline: 20px;
}

.staff-table-shell {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #e2e6eb;
  border-radius: 8px;
  background: #fff;
}

.staff-table {
  min-width: 760px;
  margin: 0;
  border-collapse: collapse;
}

.staff-table thead {
  background: #f3f5f7;
}

.staff-table th {
  padding: 11px 12px;
  color: #6d7783;
  font-size: .64rem;
  letter-spacing: .075em;
  text-transform: uppercase;
  border-bottom: 1px solid #dde2e7;
}

.staff-table td {
  padding: 11px 12px;
  border-bottom: 1px solid #eceff2;
  vertical-align: middle;
}

.staff-table tbody tr:last-child td {
  border-bottom: 0;
}

.staff-table tbody tr:hover {
  background: #f8f9fa;
}

.staff-table input,
.staff-table select {
  min-width: 120px;
  margin: 0;
  background: #fff;
}

.staff-table button {
  width: auto;
  min-width: 104px;
  margin: 0 !important;
  background: #303b47;
  color: #fff;
  border: 1px solid #303b47;
}

.staff-table button:hover {
  background: #1f2933;
  transform: translateY(-2px);
}

.staff-job-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 14px;
  align-items: end;

  margin-bottom: 22px;
  padding: 18px;

  background: #f8f9fa;
  border: 1px solid #e2e6eb;
  border-radius: 10px;
}

.staff-job-field small {
  display: block;
  margin-top: 6px;
  color: #8a939e;
  font-size: .68rem;
}

.staff-workflow-tabs {
  display: flex;
  align-items: stretch;
  gap: 0;

  margin: 0 0 24px;
  padding: 2px 2px 12px;

  overflow-x: auto;
  border-bottom: 1px solid #e2e6eb;
}

.staff-workflow-tabs .step-card {
  position: relative;
  flex: 1 0 120px;
  min-width: 120px;
  min-height: 62px;

  margin: 0 9px 0 0;
  padding: 15px 9px 10px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;

  color: #44505d;
  background: transparent;
  border: 0;
  border-radius: 0;

  font-size: .76rem;
  font-weight: 700;
  text-align: left;
  line-height: 1.15;
}

.staff-workflow-tabs .step-card span {
  margin-bottom: 5px;
  color: #9aa3ad;
  font-size: .6rem;
  letter-spacing: .08em;
}

.staff-workflow-tabs .step-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;

  height: 3px;
  background: #b8c0c9;
  border: 0;
}

.staff-workflow-tabs .step-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: -1px;

  width: 1px;
  height: 82px;

  background: #d3d8de;
  border: 0;
  transform: rotate(-28deg);
  transform-origin: top;
}

.staff-workflow-tabs .step-card:last-child {
  margin-right: 0;
}

.staff-workflow-tabs .step-card:hover {
  color: #1f2933;
  background: #f7f8f9;
  transform: translateY(-2px);
}

.staff-workflow-tabs .step-card.active {
  color: #1f2933;
  background: #f5f6f7;
}

.staff-workflow-tabs .step-card.active::before {
  background: #4c5967;
}

.staff-workflow-tabs .step-card.active span {
  color: #4c5967;
}

.staff-dept-form {
  margin-top: 0;
  padding: 24px;

  background: #fafbfc;
  border: 1px solid #e2e6eb;
  border-radius: 10px;
}

.staff-dept-heading {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e2e6eb;
}

.staff-dept-heading h3 {
  margin: 0;
}

.staff-dept-fields {
  display: grid;
  gap: 10px;
}

body.dark-mode #employeeDashboard.staff-dashboard {
  background: #11161d;
}

body.dark-mode .staff-manager-panel,
body.dark-mode .staff-workflow-section,
body.dark-mode .staff-create-card,
body.dark-mode .staff-roster-card,
body.dark-mode .staff-table-shell,
body.dark-mode .staff-dept-form {
  background: #171d25;
  border-color: #2a333e;
}

body.dark-mode .staff-section-heading,
body.dark-mode .staff-table th,
body.dark-mode .staff-table td,
body.dark-mode .staff-dept-heading {
  border-color: #2a333e;
}

body.dark-mode .staff-table thead,
body.dark-mode .staff-job-toolbar,
body.dark-mode .staff-workflow-tabs .step-card.active,
body.dark-mode .staff-workflow-tabs .step-card:hover {
  background: #1d242d;
}

body.dark-mode .staff-job-toolbar {
  border-color: #2a333e;
}

body.dark-mode .staff-create-form input,
body.dark-mode .staff-create-form select,
body.dark-mode .staff-job-toolbar input,
body.dark-mode .staff-job-toolbar select,
body.dark-mode .staff-table input,
body.dark-mode .staff-table select,
body.dark-mode .staff-dept-form input,
body.dark-mode .staff-dept-form select,
body.dark-mode .staff-dept-form textarea {
  background: #11161d;
  color: #edf1f5;
  border-color: #35404c;
}

body.dark-mode .staff-section-heading h3,
body.dark-mode .staff-card-heading h4,
body.dark-mode .staff-dept-heading h3,
body.dark-mode .staff-table td {
  color: #edf1f5;
}

@media (max-width: 1180px) {
  .staff-manager-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  #employeeDashboard.staff-dashboard {
    padding: 16px;
  }

  .staff-portal-hero,
  .staff-section-heading {
    flex-direction: column;
    align-items: stretch;
  }

  .staff-user-panel {
    min-width: 0;
  }

  .staff-field-grid,
  .staff-job-toolbar {
    grid-template-columns: 1fr;
  }

  .staff-create-btn,
  .staff-save-record-btn {
    width: 100%;
  }

  .staff-manager-panel,
  .staff-workflow-section {
    padding: 18px;
  }
}

/* ======================================================
   IMMERSIVE SPLIT AUTH SCREENS
   ====================================================== */
#registerSection.auth-screen,
#loginSection.auth-screen {
  min-height: 100vh;
  padding: 0;
  margin: 0;
  background: #090b0e;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}

.auth-split {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(420px, 46%) minmax(0, 54%);
  background: #090b0e;
}

.auth-form-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(36px, 5vw, 72px);
  background: radial-gradient(circle at top left, rgba(84,97,112,.12), transparent 34%), #090b0e;
}

.auth-form-wrap { width: min(100%, 560px); }
.auth-login-wrap { width: min(100%, 500px); }

.auth-kicker {
  margin-bottom: 10px;
  color: #8e99a6;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.auth-form-wrap h1 {
  margin: 0 0 10px;
  color: #f7f9fb;
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: 1;
  letter-spacing: -.055em;
}

.auth-subtitle {
  max-width: 520px;
  margin: 0 0 28px;
  color: #8e98a4;
  font-size: .9rem;
  line-height: 1.65;
}

.auth-form { display: grid; gap: 14px; }
.auth-grid-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-field { display: grid; gap: 6px; }

.auth-field label {
  margin: 0;
  color: #bcc5cf;
  font-size: .69rem;
  font-weight: 700;
}

.auth-label-note {
  margin-left: 6px;
  color: #6f7a86;
  font-size: .62rem;
  font-weight: 600;
}

.auth-field input,
.auth-field select {
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 11px 12px;
  color: #eef2f6;
  background: #0d1116;
  border: 1px solid #29313b;
  border-radius: 7px;
  box-shadow: none;
}

.auth-field input::placeholder { color: #59636f; }

.auth-field input:focus,
.auth-field select:focus {
  outline: none;
  border-color: #697685;
  box-shadow: 0 0 0 3px rgba(105,118,133,.14);
}

.auth-check-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 2px 0 0;
  color: #87919d;
  font-size: .68rem;
  line-height: 1.45;
  font-weight: 500;
}

.auth-check-row input {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin: 2px 0 0;
  accent-color: #738091;
}

.auth-check-row a {
  color: #c7d0da;
  text-underline-offset: 3px;
}

.auth-submit-btn {
  width: 100%;
  min-height: 46px;
  margin: 4px 0 0;
  background: #334155;
  color: #fff;
  border: 1px solid #455468;
  border-radius: 7px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .015em;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.auth-submit-btn:hover {
  background: #46566a;
  border-color: #56677c;
  transform: translateY(-2px);
}

.auth-login-note {
  padding: 11px 12px;
  color: #8c97a3;
  background: #0d1116;
  border: 1px solid #222b35;
  border-radius: 7px;
  font-size: .68rem;
  line-height: 1.45;
}

.auth-login-note strong { color: #c5ced7; }

.auth-switch-copy {
  margin: 4px 0 0;
  text-align: center;
  color: #707b87;
  font-size: .72rem;
}

.auth-text-link {
  display: inline;
  width: auto;
  margin: 0 0 0 4px;
  padding: 0 0 2px;
  color: #d6dde5;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #647181;
  border-radius: 0;
  box-shadow: none;
  font-size: inherit;
  font-weight: 700;
}

.auth-text-link:hover {
  color: #fff;
  background: transparent;
  transform: none;
  border-bottom-color: #fff;
}

.auth-visual-panel {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-color: #171b22;
  background-position: center;
  background-size: cover;
}

.auth-register-visual {
  background-image:
    linear-gradient(rgba(9,11,14,.08), rgba(9,11,14,.2)),
    url('/images/Neon.jpg');
}

.auth-login-visual {
  background-image:
    linear-gradient(rgba(9,11,14,.08), rgba(9,11,14,.25)),
    url('/images/Smokey-lift.jpg');
}

.auth-visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,7,10,.02) 20%, rgba(5,7,10,.18) 58%, rgba(5,7,10,.82) 100%);
}

.auth-visual-copy {
  position: relative;
  z-index: 1;
  max-width: 650px;
  padding: clamp(28px, 5vw, 64px);
  color: #fff;
}

.auth-visual-copy span {
  display: block;
  margin-bottom: 10px;
  color: rgba(255,255,255,.68);
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .15em;
}

.auth-visual-copy h2 {
  max-width: 580px;
  margin: 0 0 12px;
  color: #fff;
  font-size: clamp(2rem, 3vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -.05em;
}

.auth-visual-copy p {
  max-width: 520px;
  margin: 0;
  color: rgba(255,255,255,.74);
  font-size: .86rem;
  line-height: 1.6;
}

.auth-field input:-webkit-autofill,
.auth-field input:-webkit-autofill:hover,
.auth-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: #eef2f6;
  box-shadow: 0 0 0 1000px #0d1116 inset;
  transition: background-color 9999s ease-out 0s;
}

@media (max-width: 980px) {
  .auth-visual-panel { min-height: 360px; }
  .auth-form-panel { padding: 42px 24px 56px; }
}

@media (max-width: 620px) {
  .auth-grid-two { grid-template-columns: 1fr; }
  .auth-visual-panel { min-height: 280px; }
  .auth-form-wrap h1 { font-size: 2.35rem; }
  .auth-visual-copy h2 { font-size: 2rem; }
}


/* ======================================================
   MOBILE RESPONSIVE PASS
   Phones + small tablets
   ====================================================== */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* ---------- TABLETS ---------- */
@media (max-width: 980px) {

  body {
    padding: 0;
  }

  .container {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* Public / app shell becomes top navigation */
  .container > .header,
  body > .header {
    position: relative;
    top: auto;
    left: auto;

    width: 100%;
    min-height: auto;

    padding: 16px 18px;

    display: block;

    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }

  body > .header + .container {
    width: 100%;
    margin-left: 0;
  }

  .brand {
    margin: 0 0 14px;
  }

  .header-nav {
    width: 100%;
  }

  .header-links,
  .header-actions {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
  }

  .header-link,
  .header-action-link {
    width: auto;
    flex: 0 1 auto;
    margin: 0;
    padding: 10px 12px;
    white-space: nowrap;
  }

  .header-link:hover,
  .header-action-link:hover {
    transform: translateY(-2px);
  }

  .header-link::after,
  .header-action-link::after {
    left: 10px;
    bottom: 4px;
  }

  .header-link:hover::after,
  .header-action-link:hover::after,
  .customer-nav-link.active::after {
    width: calc(100% - 20px);
  }

  /* Main content */
  #landingSection,
  #customerDashboard,
  #employeeDashboard,
  #registerSection,
  #loginSection,
  .contact-page {
    width: 100%;
    min-width: 0;
  }

  #landingSection,
  #customerDashboard,
  #employeeDashboard {
    padding: 20px;
  }

  /* Landing hero */
  .hero {
    min-height: 520px;
    padding: 42px 32px;
  }

  .hero-content {
    max-width: 680px;
  }

  .hero h1 {
    font-size: clamp(2.35rem, 7vw, 4rem);
  }

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

  /* Overview + contact */
  .overview-feature-row,
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .overview-feature-image {
    min-height: 340px;
  }

  .contact-page {
    padding: 34px 24px;
  }

  .contact-intro {
    max-width: none;
    text-align: left;
  }

  .contact-intro h1 {
    font-size: clamp(2.4rem, 7vw, 4rem);
  }

  /* Auth split */
  .auth-split {
    min-height: 100vh;
    grid-template-columns: 1fr;
  }

  .auth-visual-panel {
    order: -1;
    min-height: 320px;
  }

  .auth-form-panel {
    min-height: auto;
    padding: 42px 28px 56px;
  }

  .auth-form-wrap,
  .auth-login-wrap {
    width: 100%;
    max-width: 640px;
  }

  /* Customer portal */
  .customer-home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Staff portal */
  .staff-manager-grid {
    grid-template-columns: 1fr;
  }

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

  .staff-job-toolbar {
    grid-template-columns: minmax(0, 1fr) 160px;
  }

  .staff-workflow-tabs {
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .staff-workflow-tabs .step-card {
    flex: 0 0 132px;
    min-width: 132px;
  }
}


/* ---------- PHONES ---------- */
@media (max-width: 640px) {

  body {
    font-size: 15px;
  }

  /* Top app navigation */
  .container > .header,
  body > .header {
    padding: 14px 14px 12px;
  }

  .brand {
    font-size: 1rem;
    gap: 8px;
    margin-bottom: 12px;
  }

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

  .brand::before {
    content: none;
  }

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

  .header-link,
  .header-action-link {
    width: 100%;
    min-width: 0;
    padding: 10px 9px;
    justify-content: center;
    text-align: center;
    font-size: .72rem;
  }

  .header-actions {
    margin-top: 7px;
  }

  /* Landing */
  #landingSection,
  #customerDashboard,
  #employeeDashboard {
    padding: 14px;
  }

  .hero {
    min-height: 470px;
    margin-bottom: 14px;
    padding: 32px 20px;
    border-radius: 12px;
  }

  .hero-content {
    width: 100%;
  }

  .hero h1 {
    font-size: clamp(2.1rem, 11vw, 3.2rem);
    line-height: 1.02;
  }

  .hero p {
    font-size: .86rem;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    width: 100%;
  }

  .hero-actions button {
    width: 100%;
    margin: 0;
  }

  .hero-arrow {
    width: 38px !important;
    height: 38px;
    padding: 0 !important;
  }

  .hero-arrow-left {
    left: 8px;
  }

  .hero-arrow-right {
    right: 8px;
  }

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

  .stat-box {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .stat-box:last-child {
    border-bottom: 0;
  }

  .feature-card,
  .card,
  .panel {
    padding: 18px;
  }

  /* Standalone overview / contact */
  .contact-page {
    padding: 28px 16px 24px;
  }

  .contact-intro h1 {
    font-size: 2.5rem;
  }

  .overview-feature-row {
    gap: 14px;
  }

  .overview-features,
  .overview-feature-image {
    min-height: 0;
    height: auto;
  }

  .overview-feature-image img {
    min-height: 260px;
  }

  .contact-form {
    padding: 18px;
  }

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

  /* Auth screens */
  #registerSection.auth-screen,
  #loginSection.auth-screen {
    min-height: 100vh;
  }

  .auth-visual-panel {
    min-height: 230px;
  }

  .auth-visual-copy {
    padding: 24px 20px;
  }

  .auth-visual-copy h2 {
    font-size: 1.85rem;
  }

  .auth-visual-copy p {
    font-size: .78rem;
  }

  .auth-form-panel {
    padding: 30px 18px 42px;
  }

  .auth-form-wrap h1 {
    font-size: 2.35rem;
  }

  .auth-subtitle {
    margin-bottom: 22px;
    font-size: .82rem;
  }

  .auth-grid-two {
    grid-template-columns: 1fr;
  }

  .auth-form {
    gap: 12px;
  }

  .auth-field input,
  .auth-field select {
    min-height: 46px;
    font-size: 16px; /* prevents iOS zoom */
  }

  .auth-submit-btn {
    min-height: 48px;
  }

  /* Customer portal header */
  .customer-portal-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 14px;
  }

  .customer-home-hero {
    align-items: flex-start;
    flex-direction: column;
    padding: 26px 20px;
  }

  .customer-home-hero h1 {
    font-size: 2.45rem;
  }

  .customer-home-hero .btn-primary {
    width: 100%;
  }

  .customer-home-grid {
    grid-template-columns: 1fr;
  }

  .customer-home-card {
    min-height: 135px;
  }

  .customer-home-shop-card {
    flex-direction: column;
    align-items: stretch;
  }

  .customer-home-shop-card .btn-secondary {
    width: 100%;
  }

  /* Staff / manager portal */
  #employeeDashboard.staff-dashboard {
    padding: 14px;
  }

  .staff-portal-hero {
    flex-direction: column;
    align-items: stretch;
    padding: 24px 20px;
    border-radius: 12px;
  }

  .staff-portal-hero h2 {
    font-size: 2.45rem;
  }

  .staff-user-panel {
    width: 100%;
    min-width: 0;
  }

  .staff-manager-panel,
  .staff-workflow-section {
    padding: 16px;
    border-radius: 10px;
  }

  .staff-section-heading {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 18px;
    padding-bottom: 16px;
  }

  .staff-manager-chip {
    align-self: flex-start;
  }

  .staff-create-card,
  .staff-roster-card {
    padding: 16px;
  }

  .staff-field-grid {
    grid-template-columns: 1fr;
  }

  .staff-create-btn,
  .staff-save-record-btn {
    width: 100%;
  }

  .staff-job-toolbar {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .staff-job-id {
    width: 100%;
  }

  .staff-workflow-tabs {
    margin-left: -4px;
    margin-right: -4px;
    padding-left: 4px;
    padding-right: 4px;
  }

  .staff-workflow-tabs .step-card {
    flex: 0 0 118px;
    min-width: 118px;
    min-height: 58px;
    padding: 13px 8px 9px;
    font-size: .7rem;
  }

  .staff-workflow-tabs .step-card::after {
    height: 70px;
  }

  .staff-dept-form {
    padding: 16px;
  }

  /* Tables scroll instead of crushing columns */
  .staff-table-shell {
    width: calc(100vw - 60px);
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .staff-table {
    min-width: 720px;
  }

  /* Forms */
  input,
  select,
  textarea {
    font-size: 16px;
  }

  button {
    min-height: 42px;
  }

  /* Toasts */
  .toast-container {
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
  }

  .app-toast {
    width: 100%;
  }

  /* Footer */
  .legal-footer,
  .theme-footer {
    width: 100%;
    margin-left: 0;
    padding-left: 14px;
    padding-right: 14px;
  }
}


/* ---------- VERY SMALL PHONES ---------- */
@media (max-width: 390px) {

  .header-links,
  .header-actions {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: 430px;
    padding: 28px 16px;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .auth-visual-panel {
    min-height: 200px;
  }

  .auth-form-panel {
    padding-left: 14px;
    padding-right: 14px;
  }

  .staff-portal-hero h2,
  .customer-home-hero h1 {
    font-size: 2.1rem;
  }

  .staff-table-shell {
    width: calc(100vw - 52px);
  }
}


/* ======================================================
   MOTIVO: CUSTOMER ACCOUNT DANGER ZONE
   ====================================================== */
.danger-zone {
  margin-top: 28px;
  padding: 22px;
  border: 1px solid rgba(239, 68, 68, 0.55);
  border-radius: 14px;
  background: rgba(127, 29, 29, 0.12);
}

.danger-zone-heading h4 {
  margin: 4px 0 8px;
  color: #f87171;
}

.danger-zone-heading p {
  margin: 0 0 18px;
  color: var(--text-muted, #94a3b8);
  max-width: 760px;
}

.danger-zone-kicker {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #ef4444;
}

.danger-zone-form {
  display: grid;
  gap: 12px;
  max-width: 520px;
}

.danger-zone-form input {
  width: 100%;
}

.danger-button {
  border: 1px solid #ef4444;
  background: #b91c1c;
  color: #fff;
  font-weight: 800;
}

.danger-button:hover {
  background: #991b1b;
}

.danger-button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* Final public landing overrides. Keep these after the legacy app breakpoints. */
.container:has(#landingSection:not(.hidden)) > .header { display: flex; flex-direction: row; }
.container:has(#landingSection:not(.hidden)) .header-nav,
.container:has(#landingSection:not(.hidden)) .header-links,
.container:has(#landingSection:not(.hidden)) .header-actions { display: flex; flex-direction: row; }
.container:has(#landingSection:not(.hidden)) .brand-logo { background: #173c3b; border-radius: 4px; display: block; height: 44px; object-fit: contain; padding: 3px 7px; width: 145px; }
.motivo-hero { min-height: 570px; padding-bottom: 58px; padding-top: 38px; }
.motivo-hero-art { background: #173c3b; }
.motivo-hero-slides, .motivo-hero-slides .hero-slide, .motivo-hero-overlay { inset: 0; position: absolute; }
.motivo-hero-slides { z-index: 0; }
.motivo-hero-slides .hero-slide { background-position: center; background-size: cover; opacity: 0; transform: scale(1.06); transition: opacity 1s ease, transform 7s ease; }
.motivo-hero-slides .hero-slide.active { opacity: 1; transform: scale(1); }
.motivo-hero-overlay { background: linear-gradient(90deg, rgba(11,31,30,.16), rgba(11,31,30,.48)); z-index: 1; }
.motivo-hero-art .motivo-art-note { z-index: 2; }
body.dark-mode .container:has(#landingSection:not(.hidden)) > .header { background: #0d1717; border-bottom-color: #2b403d; }
body.dark-mode .container:has(#landingSection:not(.hidden)) .brand-logo { background: #173c3b; filter: brightness(1.15); }
body.dark-mode .motivo-landing, body.dark-mode .motivo-hero, body.dark-mode .motivo-final-cta { background: #0d1717; color: #edf2ed; }
body.dark-mode .motivo-hero h1, body.dark-mode .motivo-finder h2, body.dark-mode .motivo-benefits h2, body.dark-mode .motivo-final-cta h2 { color: #f3f5ef; }
body.dark-mode .motivo-hero-subtitle, body.dark-mode .motivo-finder p:not(.motivo-eyebrow), body.dark-mode .motivo-benefit-grid p { color: #afbeb8; }
body.dark-mode .motivo-finder { background: #172d2b; }
body.dark-mode .motivo-finder-controls input, body.dark-mode .motivo-finder-controls select { background: #0f2020; border-color: #3d5954; color: #edf2ed; }
body.dark-mode .motivo-benefit-grid article { border-color: #304641; }
body.dark-mode .motivo-art-note { background: #172d2b; color: #edf2ed; }
body.dark-mode .motivo-art-note span { color: #afbeb8; }

@media (max-width: 820px) {
  .container:has(#landingSection:not(.hidden)) > .header { flex-wrap: wrap; }
  .container:has(#landingSection:not(.hidden)) .header-nav { flex: 1 1 100%; }
}

@media (max-width: 640px) {
  .container:has(#landingSection:not(.hidden)) .header-nav { display: grid; }
  .container:has(#landingSection:not(.hidden)) .header-links,
  .container:has(#landingSection:not(.hidden)) .header-actions { display: flex; }
  .container:has(#landingSection:not(.hidden)) .brand-logo { height: 38px; width: 125px; }
  .motivo-hero { min-height: 0; padding-top: 30px; }
}

/* Public-page header: override legacy sidebar margin and layout without
   changing the customer/staff application header. */
body.motivo-public-page > .header {
  position: relative;
  inset: auto;
  width: 100%;
  min-height: 82px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  padding: 18px 24px;
  border-right: 0;
  border-bottom: 1px solid #d9ded6;
}
body.motivo-public-page > .header .brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  z-index: 1;
}
body.motivo-public-page > .header .motivo-menu-toggle {
  position: relative;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  margin: 0;
  z-index: 22;
}
@media (max-width: 760px) {
  body.motivo-public-page > .header {
    min-height: 76px;
    padding: 14px 18px;
  }
  body.motivo-public-page > .header .brand-logo {
    width: 125px;
    height: 38px;
  }
}


/* =============================================================
   MOTIVO UNIFIED EXPERIENCE / AUTHENTICATED & AUTHENTICATION UI
   Visual-only: intentionally retains all existing event handlers,
   input IDs, portal sections, roles and data attributes.
   ============================================================= */

/* Give each application screen the same clean full-width header. */
body:has(#registerSection:not(.hidden)) .container,
body:has(#loginSection:not(.hidden)) .container,
body:has(#customerDashboard:not(.hidden)) .container,
body:has(#employeeDashboard:not(.hidden)) .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  overflow: visible;
  background: #f8f7f2;
}

body:has(#registerSection:not(.hidden)) .container > .header,
body:has(#loginSection:not(.hidden)) .container > .header,
body:has(#customerDashboard:not(.hidden)) .container > .header,
body:has(#employeeDashboard:not(.hidden)) .container > .header {
  position: relative;
  inset: auto;
  grid-column: 1;
  grid-row: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  min-height: 82px;
  padding: 18px clamp(18px, 4vw, 52px);
  background: #f8f7f2;
  border: 0;
  border-bottom: 1px solid #d9ded6;
  z-index: 30;
}

body:has(#registerSection:not(.hidden)) .container > .header .brand,
body:has(#loginSection:not(.hidden)) .container > .header .brand,
body:has(#customerDashboard:not(.hidden)) .container > .header .brand,
body:has(#employeeDashboard:not(.hidden)) .container > .header .brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  z-index: 1;
}

body:has(#registerSection:not(.hidden)) .container > .header .brand-logo,
body:has(#loginSection:not(.hidden)) .container > .header .brand-logo,
body:has(#customerDashboard:not(.hidden)) .container > .header .brand-logo,
body:has(#employeeDashboard:not(.hidden)) .container > .header .brand-logo {
  display: block;
  width: 145px;
  height: 44px;
  padding: 3px 7px;
  object-fit: contain;
  background: #173c3b;
  border-radius: 4px;
}

body:has(#registerSection:not(.hidden)) .container > .header .motivo-menu-toggle,
body:has(#loginSection:not(.hidden)) .container > .header .motivo-menu-toggle,
body:has(#customerDashboard:not(.hidden)) .container > .header .motivo-menu-toggle,
body:has(#employeeDashboard:not(.hidden)) .container > .header .motivo-menu-toggle {
  display: flex;
  flex: 0 0 42px;
  position: relative;
  margin: 0;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  background: transparent;
  border: 1px solid #cbd5ce;
  border-radius: 5px;
  cursor: pointer;
  z-index: 33;
}
body:has(#registerSection:not(.hidden)) .motivo-menu-toggle span,
body:has(#loginSection:not(.hidden)) .motivo-menu-toggle span,
body:has(#customerDashboard:not(.hidden)) .motivo-menu-toggle span,
body:has(#employeeDashboard:not(.hidden)) .motivo-menu-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: #173c3b;
}

/* The existing toggleMotivoMenu() now opens the same narrow drawer
   throughout the landing, sign-in and both authenticated portals. */
body:has(#registerSection:not(.hidden)) #motivo-side-menu,
body:has(#loginSection:not(.hidden)) #motivo-side-menu,
body:has(#customerDashboard:not(.hidden)) #motivo-side-menu,
body:has(#employeeDashboard:not(.hidden)) #motivo-side-menu {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 26px;
  width: min(84vw, 330px);
  max-width: 330px;
  height: 100dvh;
  overflow-y: auto;
  padding: 100px 24px 28px;
  background: #f8f7f2;
  box-shadow: 14px 0 34px rgba(23,60,59,.16);
  border-right: 1px solid #d2dfd5;
  transform: translateX(-105%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .25s ease, opacity .2s ease;
  z-index: 31;
}
body.motivo-menu-open #motivo-side-menu {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
body:has(#registerSection:not(.hidden)) #motivo-side-menu .header-links,
body:has(#loginSection:not(.hidden)) #motivo-side-menu .header-links,
body:has(#customerDashboard:not(.hidden)) #motivo-side-menu .header-links,
body:has(#employeeDashboard:not(.hidden)) #motivo-side-menu .header-links,
body:has(#registerSection:not(.hidden)) #motivo-side-menu .header-actions,
body:has(#loginSection:not(.hidden)) #motivo-side-menu .header-actions,
body:has(#customerDashboard:not(.hidden)) #motivo-side-menu .header-actions,
body:has(#employeeDashboard:not(.hidden)) #motivo-side-menu .header-actions {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  margin: 0;
}
body:has(#registerSection:not(.hidden)) #motivo-side-menu .header-link,
body:has(#loginSection:not(.hidden)) #motivo-side-menu .header-link,
body:has(#customerDashboard:not(.hidden)) #motivo-side-menu .header-link,
body:has(#employeeDashboard:not(.hidden)) #motivo-side-menu .header-link {
  display: flex;
  width: 100%;
  min-height: 43px;
  justify-content: flex-start;
  padding: 12px;
  color: #173c3b;
  background: transparent;
  border: 1px solid transparent;
  text-align: left;
  font-size: .88rem;
  font-weight: 650;
}
body:has(#registerSection:not(.hidden)) #motivo-side-menu .header-link:hover,
body:has(#loginSection:not(.hidden)) #motivo-side-menu .header-link:hover,
body:has(#customerDashboard:not(.hidden)) #motivo-side-menu .header-link:hover,
body:has(#employeeDashboard:not(.hidden)) #motivo-side-menu .header-link:hover {
  background: #e5eee7;
  color: #173c3b;
  transform: none;
}

/* Keep forms in the content column and adopt Motivo's warm palette. */
body:has(#registerSection:not(.hidden)) .container > #registerSection,
body:has(#loginSection:not(.hidden)) .container > #loginSection,
body:has(#customerDashboard:not(.hidden)) .container > #customerDashboard,
body:has(#employeeDashboard:not(.hidden)) .container > #employeeDashboard {
  grid-column: 1;
  grid-row: auto;
  min-width: 0;
  width: 100%;
  margin: 0;
}
body:has(#registerSection:not(.hidden)) .container > #registerSection,
body:has(#loginSection:not(.hidden)) .container > #loginSection { padding: 0; }
#registerSection.auth-screen,
#loginSection.auth-screen,
#registerSection .auth-split,
#loginSection .auth-split {
  background: #f8f7f2;
  min-height: calc(100vh - 82px);
}
#registerSection .auth-form-panel,
#loginSection .auth-form-panel {
  background: #f8f7f2;
  padding: clamp(36px, 5vw, 78px);
}
#registerSection .auth-kicker,
#loginSection .auth-kicker { color: #d05a38; }
#registerSection .auth-form-wrap h1,
#loginSection .auth-form-wrap h1 { color: #173c3b; }
#registerSection .auth-subtitle,
#loginSection .auth-subtitle { color: #53615f; }
#registerSection .auth-field label,
#loginSection .auth-field label { color: #173c3b; }
#registerSection .auth-label-note,
#loginSection .auth-label-note { color: #65716e; }
#registerSection .auth-field input,
#registerSection .auth-field select,
#loginSection .auth-field input,
#loginSection .auth-field select {
  color: #173c3b;
  background: #fff;
  border: 1px solid #cbd8cf;
  border-radius: 9px;
  min-height: 47px;
}
#registerSection .auth-field input::placeholder,
#loginSection .auth-field input::placeholder { color: #72827a; }
#registerSection .auth-field input:focus,
#registerSection .auth-field select:focus,
#loginSection .auth-field input:focus,
#loginSection .auth-field select:focus {
  border-color: #e86642;
  box-shadow: 0 0 0 3px rgba(232,102,66,.15);
}
#registerSection .auth-submit-btn,
#loginSection .auth-submit-btn {
  background: #173c3b;
  color: white;
  border-color: #173c3b;
  border-radius: 9px;
  min-height: 49px;
}
#registerSection .auth-submit-btn:hover,
#loginSection .auth-submit-btn:hover {
  background: #275451;
  border-color: #275451;
}
#registerSection .auth-check-row,
#loginSection .auth-check-row,
#registerSection .auth-switch-copy,
#loginSection .auth-switch-copy { color: #53615f; }
#registerSection .auth-check-row a,
#loginSection .auth-check-row a,
#registerSection .auth-text-link,
#loginSection .auth-text-link { color: #173c3b; border-bottom-color: #e86642; }
#registerSection .auth-login-note,
#loginSection .auth-login-note {
  background: #e9f0e9;
  color: #53615f;
  border-color: #d2dfd5;
}
#registerSection .auth-login-note strong,
#loginSection .auth-login-note strong { color: #173c3b; }
#registerSection .auth-field input:-webkit-autofill,
#loginSection .auth-field input:-webkit-autofill {
  -webkit-text-fill-color: #173c3b;
  box-shadow: 0 0 0 1000px #fff inset;
}
#registerSection .auth-visual-overlay,
#loginSection .auth-visual-overlay {
  background: linear-gradient(180deg, rgba(11,31,30,.08) 15%, rgba(11,31,30,.2) 50%, rgba(11,31,30,.88) 100%);
}
#registerSection .auth-visual-copy span,
#loginSection .auth-visual-copy span { color: #f6b096; }

/* Customer and staff workspaces: lighter surfaces and clearer headings. */
body:has(#customerDashboard:not(.hidden)) .container > #customerDashboard,
body:has(#employeeDashboard:not(.hidden)) .container > #employeeDashboard {
  padding: clamp(16px, 3vw, 42px);
  background: #f8f7f2;
  color: #173c3b;
}
#customerDashboard .customer-portal-header,
#employeeDashboard .staff-portal-hero {
  border-radius: 15px;
  background: #173c3b;
  color: #f3f5ef;
}
#customerDashboard .customer-portal-header h2,
#employeeDashboard .staff-portal-hero h2 { color: #fff; }
#customerDashboard .customer-portal-header small,
#employeeDashboard .staff-shop-name { color: #bed0c6; }

/* Dark mode: keep the same green identity, with readable controls. */
body.dark-mode:has(#registerSection:not(.hidden)) .container,
body.dark-mode:has(#loginSection:not(.hidden)) .container,
body.dark-mode:has(#customerDashboard:not(.hidden)) .container,
body.dark-mode:has(#employeeDashboard:not(.hidden)) .container,
body.dark-mode:has(#registerSection:not(.hidden)) .container > .header,
body.dark-mode:has(#loginSection:not(.hidden)) .container > .header,
body.dark-mode:has(#customerDashboard:not(.hidden)) .container > .header,
body.dark-mode:has(#employeeDashboard:not(.hidden)) .container > .header { background: #0d1717; border-bottom-color: #2b403d; }
body.dark-mode:has(#registerSection:not(.hidden)) #motivo-side-menu,
body.dark-mode:has(#loginSection:not(.hidden)) #motivo-side-menu,
body.dark-mode:has(#customerDashboard:not(.hidden)) #motivo-side-menu,
body.dark-mode:has(#employeeDashboard:not(.hidden)) #motivo-side-menu { background: #0d1717; border-color: #31504a; }
body.dark-mode:has(#registerSection:not(.hidden)) #motivo-side-menu .header-link,
body.dark-mode:has(#loginSection:not(.hidden)) #motivo-side-menu .header-link,
body.dark-mode:has(#customerDashboard:not(.hidden)) #motivo-side-menu .header-link,
body.dark-mode:has(#employeeDashboard:not(.hidden)) #motivo-side-menu .header-link { color: #e3ede7; }
body.dark-mode:has(#registerSection:not(.hidden)) .motivo-menu-toggle span,
body.dark-mode:has(#loginSection:not(.hidden)) .motivo-menu-toggle span,
body.dark-mode:has(#customerDashboard:not(.hidden)) .motivo-menu-toggle span,
body.dark-mode:has(#employeeDashboard:not(.hidden)) .motivo-menu-toggle span { background: #edf2ed; }
body.dark-mode #registerSection.auth-screen,
body.dark-mode #loginSection.auth-screen,
body.dark-mode #registerSection .auth-split,
body.dark-mode #loginSection .auth-split,
body.dark-mode #registerSection .auth-form-panel,
body.dark-mode #loginSection .auth-form-panel { background: #0d1717; }
body.dark-mode #registerSection .auth-form-wrap h1,
body.dark-mode #loginSection .auth-form-wrap h1,
body.dark-mode #registerSection .auth-field label,
body.dark-mode #loginSection .auth-field label { color: #edf2ed; }
body.dark-mode #registerSection .auth-subtitle,
body.dark-mode #loginSection .auth-subtitle,
body.dark-mode #registerSection .auth-check-row,
body.dark-mode #loginSection .auth-check-row,
body.dark-mode #registerSection .auth-switch-copy,
body.dark-mode #loginSection .auth-switch-copy { color: #afbeb8; }
body.dark-mode #registerSection .auth-field input,
body.dark-mode #registerSection .auth-field select,
body.dark-mode #loginSection .auth-field input,
body.dark-mode #loginSection .auth-field select { background: #172d2b; color: #edf2ed; border-color: #3d5954; }
body.dark-mode #registerSection .auth-text-link,
body.dark-mode #loginSection .auth-text-link,
body.dark-mode #registerSection .auth-check-row a,
body.dark-mode #loginSection .auth-check-row a { color: #f1f6f1; }
body.dark-mode #registerSection .auth-login-note,
body.dark-mode #loginSection .auth-login-note { background: #172d2b; color: #c3d1ca; border-color: #31504a; }
body.dark-mode #registerSection .auth-login-note strong,
body.dark-mode #loginSection .auth-login-note strong { color: #edf2ed; }
body.dark-mode #registerSection .auth-field input:-webkit-autofill,
body.dark-mode #loginSection .auth-field input:-webkit-autofill { -webkit-text-fill-color: #edf2ed; box-shadow: 0 0 0 1000px #172d2b inset; }
body.dark-mode:has(#customerDashboard:not(.hidden)) .container > #customerDashboard,
body.dark-mode:has(#employeeDashboard:not(.hidden)) .container > #employeeDashboard { background: #0d1717; color: #edf2ed; }

@media (max-width: 760px) {
  body:has(#registerSection:not(.hidden)) .container > .header,
  body:has(#loginSection:not(.hidden)) .container > .header,
  body:has(#customerDashboard:not(.hidden)) .container > .header,
  body:has(#employeeDashboard:not(.hidden)) .container > .header { min-height: 76px; padding: 14px 18px; }
  body:has(#registerSection:not(.hidden)) .container > .header .brand-logo,
  body:has(#loginSection:not(.hidden)) .container > .header .brand-logo,
  body:has(#customerDashboard:not(.hidden)) .container > .header .brand-logo,
  body:has(#employeeDashboard:not(.hidden)) .container > .header .brand-logo { width: 125px; height: 38px; }
  #registerSection .auth-form-panel,
  #loginSection .auth-form-panel { padding: 32px 20px 44px; }
  #registerSection .auth-split,
  #loginSection .auth-split { min-height: calc(100vh - 76px); }
}


/* Motivo navigation state fix: open state must outrank per-screen drawer rules. */
body.motivo-menu-open:has(#registerSection:not(.hidden)) #motivo-side-menu,
body.motivo-menu-open:has(#loginSection:not(.hidden)) #motivo-side-menu,
body.motivo-menu-open:has(#customerDashboard:not(.hidden)) #motivo-side-menu,
body.motivo-menu-open:has(#employeeDashboard:not(.hidden)) #motivo-side-menu {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Dedicated, accessible back action on auth screens; the brand remains a home link. */
.motivo-auth-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 26px;
  padding: 9px 0;
  min-height: 40px;
  border: 0;
  background: transparent;
  color: #173c3b;
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}
.motivo-auth-back:hover, .motivo-auth-back:focus-visible {
  color: #b84c30;
  text-decoration: underline;
  text-underline-offset: 4px;
}
body.dark-mode .motivo-auth-back { color: #edf2ed; }
body.dark-mode .motivo-auth-back:hover { color: #f6b096; }

/* Prevent accidental visible drawer links hidden by application-role state. */
#motivo-side-menu .header-link.hidden { display: none !important; }

/* Drawer toggle, logo and auth screen action are independent targets. */
body:has(#registerSection:not(.hidden)) .container > .header .brand,
body:has(#loginSection:not(.hidden)) .container > .header .brand {
  cursor: pointer;
}

/* Motivo repair queue/workspace usability upgrade */
.motivo-job-search-row {display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:18px 0 14px}
.motivo-job-search-row label {font-weight:700;color:#173c3b}
.motivo-job-search-row input {width:min(100%,460px);min-height:44px;border:1px solid #b7c8be;border-radius:10px;background:#fff;color:#173c3b;padding:10px 14px}
.motivo-job-search-row input:focus-visible,.motivo-open-job:focus-visible,.motivo-return-jobs:focus-visible {outline:3px solid #e86642;outline-offset:2px}
.motivo-job-actions {display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.motivo-job-actions .motivo-open-job {background:#173c3b;color:#fff;border:1px solid #173c3b;white-space:nowrap}
.motivo-job-actions .motivo-open-job:hover {background:#245452;color:#fff}
.motivo-return-jobs {margin-top:12px}
.motivo-active-job-context {margin:12px 0 0;padding:11px 15px;border-left:4px solid #e86642;background:#f8f7f2;color:#173c3b;border-radius:6px;font-weight:650}
#activeJobId[readonly] {background:#f8f7f2;color:#173c3b;cursor:default}
body.dark-mode .motivo-job-search-row label,body.dark-mode .motivo-active-job-context {color:#e3ede7}
body.dark-mode .motivo-job-search-row input,body.dark-mode #activeJobId[readonly] {background:#122624;color:#e3ede7;border-color:#31504a}
body.dark-mode .motivo-active-job-context {background:#122624}
@media(max-width:760px){.motivo-job-search-row{align-items:stretch;flex-direction:column}.motivo-job-search-row input{width:100%}.motivo-job-actions{min-width:120px}}

/* Motivo five-section repair workspace: isolated selectors, existing theme preserved. */
#staffWorkflowSection .motivo-job-hero { display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; padding:23px; border-radius:14px; background:#173c3b; color:#f8f7f2; margin:18px 0; }
#staffWorkflowSection .motivo-job-hero h4 { color:#fff; font-size:clamp(1.25rem,2.7vw,1.8rem); margin:7px 0; }
#staffWorkflowSection .motivo-job-hero p { color:#e0eae2; margin:4px 0; }
#staffWorkflowSection .motivo-job-eyebrow { color:#f5a28a; letter-spacing:.12em; font-size:.72rem; font-weight:800; }
#staffWorkflowSection .motivo-job-hero-right { display:flex; flex-direction:column; align-items:flex-end; gap:12px; font-weight:700; }
#staffWorkflowSection .motivo-status-pill { background:#f8f7f2; color:#173c3b; border-radius:999px; padding:7px 12px; font-size:.78rem; }
#staffWorkflowSection .motivo-job-selection { margin:0 0 20px; }
#staffWorkflowSection .motivo-main-sections { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; padding:7px; overflow:visible; border-radius:14px; background:#e9eee8; }
#staffWorkflowSection .motivo-main-sections .step-card { min-width:0; margin:0; padding:14px 11px; min-height:68px; border-radius:10px; background:#fff; color:#365451; border:1px solid #d7dfd7; font-size:.82rem; }
#staffWorkflowSection .motivo-main-sections .step-card::before,#staffWorkflowSection .motivo-main-sections .step-card::after { display:none; }
#staffWorkflowSection .motivo-main-sections .step-card span { color:#d66c4c; font-size:.73rem; }
#staffWorkflowSection .motivo-main-sections .step-card.active { background:#173c3b; color:#fff; border-color:#173c3b; transform:none; }
#staffWorkflowSection .motivo-main-sections .step-card.active span { color:#f8b19e; }
#staffWorkflowSection .motivo-main-sections .step-card:focus-visible,#staffWorkflowSection .motivo-tool-btn:focus-visible { outline:3px solid #e86642; outline-offset:3px; }
#staffWorkflowSection .motivo-main-sections .step-card.hidden { display:none!important; }
#staffWorkflowSection .motivo-section-intro { margin:24px 0 16px; }
#staffWorkflowSection .motivo-section-intro h3 { color:#173c3b; margin:6px 0; }
#staffWorkflowSection .motivo-section-intro p { color:#526963; }
#staffWorkflowSection .motivo-job-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:14px; margin:16px 0 24px; }
#staffWorkflowSection .motivo-summary-card { border:1px solid #dbe3dd; border-radius:12px; padding:18px; background:#fff; min-width:0; }
#staffWorkflowSection .motivo-summary-card h4 { margin:0 0 14px; color:#173c3b; }
#staffWorkflowSection .motivo-summary-card dl { margin:0; display:grid; gap:11px; }
#staffWorkflowSection .motivo-summary-card dl div { display:flex; justify-content:space-between; flex-wrap:wrap; gap:5px 15px; border-bottom:1px solid #edf1ed; padding-bottom:8px; }
#staffWorkflowSection .motivo-summary-card dt { color:#62756b; font-size:.83rem; }
#staffWorkflowSection .motivo-summary-card dd { margin:0; color:#213e39; font-weight:600; overflow-wrap:anywhere; text-align:right; max-width:100%; }
#staffWorkflowSection .motivo-edit-header { margin:18px 0 12px; }
#staffWorkflowSection .motivo-edit-header h4 { color:#173c3b; margin:0 0 5px; }
#staffWorkflowSection .motivo-edit-header p { color:#60736c; margin:0; font-size:.88rem; }
#staffWorkflowSection .motivo-department-tools { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:18px; }
#staffWorkflowSection .motivo-tool-btn { background:#fff; color:#173c3b; border:1px solid #b7c8be; border-radius:8px; padding:10px 14px; cursor:pointer; font:inherit; font-weight:650; }
#staffWorkflowSection .motivo-tool-btn:hover,#staffWorkflowSection .motivo-tool-btn.active { background:#e86642; color:#fff; border-color:#e86642; }
#staffWorkflowSection #deptForm.hidden { display:none!important; }
#staffWorkflowSection .motivo-workspace-guide small { display:block; }
body.dark-mode #staffWorkflowSection .motivo-job-hero { background:#173c3b; }
body.dark-mode #staffWorkflowSection .motivo-main-sections { background:#21352e; }
body.dark-mode #staffWorkflowSection .motivo-main-sections .step-card { background:#192b26; color:#e2ebe5; border-color:#38594b; }
body.dark-mode #staffWorkflowSection .motivo-main-sections .step-card.active { background:#e86642; color:#fff; border-color:#e86642; }
body.dark-mode #staffWorkflowSection .motivo-summary-card { background:#192822; border-color:#375244; }
body.dark-mode #staffWorkflowSection .motivo-summary-card h4,body.dark-mode #staffWorkflowSection .motivo-summary-card dd,body.dark-mode #staffWorkflowSection .motivo-section-intro h3,body.dark-mode #staffWorkflowSection .motivo-edit-header h4 { color:#eaf3ed; }
body.dark-mode #staffWorkflowSection .motivo-summary-card dt,body.dark-mode #staffWorkflowSection .motivo-section-intro p,body.dark-mode #staffWorkflowSection .motivo-edit-header p { color:#a7c1b1; }
body.dark-mode #staffWorkflowSection .motivo-tool-btn { background:#1d3028; color:#f8f7f2; border-color:#557260; }
body.dark-mode #staffWorkflowSection .motivo-tool-btn.active { background:#e86642; border-color:#e86642; }
@media(max-width:840px){#staffWorkflowSection .motivo-main-sections { grid-template-columns:repeat(2,minmax(0,1fr)); }#staffWorkflowSection .motivo-main-sections .step-card:last-child { grid-column:span 2; }}
@media(max-width:520px){#staffWorkflowSection .motivo-job-hero-right { align-items:flex-start; }#staffWorkflowSection .motivo-main-sections .step-card { font-size:.75rem; min-height:60px; }#staffWorkflowSection .motivo-summary-card dl div { display:block; }#staffWorkflowSection .motivo-summary-card dd { text-align:left; margin-top:5px; }}

/* Motivo Parts & Labor — scoped to the five-section repair workspace. */
.motivo-parts-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0}
.motivo-parts-actions small{color:#647772;width:100%}
.motivo-parts-editor{background:#fff;border:1px solid #d5ded8;border-radius:12px;padding:22px;margin:16px 0 24px;color:#173c3b}
.motivo-parts-heading,.motivo-parts-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.motivo-parts-heading h4{margin:0 0 6px;font-size:1.3rem}.motivo-parts-heading p,.motivo-parts-caution{color:#63736a;font-size:.9rem}
.motivo-parts-rows{display:flex;flex-direction:column;gap:10px;margin:20px 0}
.motivo-parts-line{display:grid;grid-template-columns:105px minmax(180px,2fr) 90px 120px 110px 32px;gap:10px;align-items:end;background:#f8f7f2;padding:13px;border-radius:9px}
.motivo-parts-line label{display:flex;flex-direction:column;gap:5px;font-size:.76rem;font-weight:650;color:#46625b}
.motivo-parts-line select,.motivo-parts-line input{width:100%;box-sizing:border-box;min-height:40px;border-radius:6px;border:1px solid #cddbd2;background:#fff;color:#173c3b;padding:8px}
.motivo-parts-line-total{display:flex;flex-direction:column;gap:6px;padding-bottom:8px}.motivo-parts-line-total small{font-size:.73rem;color:#64736e}
.motivo-parts-remove{background:transparent;border:1px solid #e1b2a5;border-radius:6px;color:#bb4934;font-size:1.4rem;cursor:pointer;min-height:40px}
.motivo-parts-add{display:flex;gap:8px;flex-wrap:wrap}.motivo-parts-total{display:flex;flex-direction:column;align-items:end;gap:5px}.motivo-parts-total strong{font-size:1.5rem}
.motivo-parts-caution{margin:16px 0}.motivo-parts-empty{color:#64736e;padding:20px 0}
body.dark-mode .motivo-parts-editor{background:#132623;color:#e0eee5;border-color:#355148}body.dark-mode .motivo-parts-line{background:#1a302b}body.dark-mode .motivo-parts-line label,body.dark-mode .motivo-parts-heading p{color:#bdd1c5}body.dark-mode .motivo-parts-line input,body.dark-mode .motivo-parts-line select{background:#172a26;color:#e0eee5;border-color:#496059}
@media(max-width:1050px){.motivo-parts-line{grid-template-columns:repeat(2,minmax(0,1fr))}.motivo-parts-line label:nth-child(2){grid-column:span 1}}
@media(max-width:500px){.motivo-parts-editor{padding:12px}.motivo-parts-line{grid-template-columns:1fr 1fr}.motivo-parts-line label:nth-child(2){grid-column:span 2}.motivo-parts-remove{justify-self:end}.motivo-parts-total{align-items:start}}

/* Parts research: free outbound retailer links and human-reviewed listing selection */
.motivo-parts-research{display:flex;flex-direction:column;gap:10px;flex:1 1 100%;padding:14px;background:var(--surface,#fff);border:1px solid var(--line,#dce5df);border-radius:12px}
.motivo-parts-research label{font-weight:650;color:var(--ink,#173c3b)}
.motivo-parts-research input{width:100%;min-height:43px;padding:10px 12px;border:1px solid var(--line,#dce5df);border-radius:8px;background:var(--surface,#fff);color:var(--ink,#173c3b)}
.motivo-parts-search-links{display:flex;flex-wrap:wrap;gap:8px}
.motivo-part-link-field{grid-column:1/-1;min-width:0}
.motivo-part-link-field input{width:100%;max-width:100%}
.motivo-seller-link{display:inline-flex;align-items:center;padding:8px 10px;color:#173c3b;text-decoration:underline;font-weight:600;overflow-wrap:anywhere}
body.dark-mode .motivo-seller-link{color:#d8e8df}
.motivo-summary-card a{display:block;margin:8px 0;color:#e86642;overflow-wrap:anywhere}