:root {
  --moas-navy: #0f2f46;
  --moas-teal: #0f8991;
  --moas-teal-dark: #0a6b72;
  --moas-ink: #243746;
  --moas-soft: #eef6f6;
  --moas-border: #dce6e8;
  --moas-focus: #ffbf47;
}

body {
  color: var(--moas-ink);
  background: #f8fafb;
}

.skip-link {
  position: fixed;
  z-index: 1100;
  top: .5rem;
  left: .5rem;
  padding: .6rem 1rem;
  border-radius: .5rem;
  background: #fff;
  color: var(--moas-navy);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
}

:focus-visible {
  outline: 3px solid var(--moas-focus) !important;
  outline-offset: 3px;
}

.navbar-moas {
  background: rgba(15, 47, 70, 0.98);
  box-shadow: 0 8px 24px rgba(15, 47, 70, 0.14);
}

.brand-lockup {
  line-height: 1;
  text-decoration: none;
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.65rem;
  margin-right: 0.55rem;
  background: linear-gradient(135deg, #20b7ba, #0f8991);
  font-weight: 800;
}

.brand-wordmark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
}

.brand-name {
  display: block;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: 0.01em;
}

.brand-byline {
  display: block;
  margin-top: 0.18rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.52rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.015em;
  white-space: nowrap;
  transition: color 120ms ease;
}

.brand-lockup:hover .brand-byline,
.brand-lockup:focus-visible .brand-byline {
  color: rgba(255, 255, 255, 0.9);
}

.hero,
.advisor-hero {
  background:
    radial-gradient(circle at 88% 18%, rgba(32, 183, 186, 0.28), transparent 30%),
    linear-gradient(135deg, #0f2f46 0%, #164e63 68%, #0f8991 150%);
  color: #fff;
  border-radius: 1.5rem;
  overflow: hidden;
}

.hero .eyebrow,
.advisor-hero .eyebrow {
  color: #8fe4e6;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: 700;
}

.eyebrow {
  letter-spacing: .11em;
  text-transform: uppercase;
  font-size: .78rem;
  font-weight: 750;
}

.hero-panel,
.advisor-trust-card {
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  border-radius: 1.25rem;
}

.btn-moas {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--moas-teal);
  --bs-btn-border-color: var(--moas-teal);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--moas-teal-dark);
  --bs-btn-hover-border-color: var(--moas-teal-dark);
  --bs-btn-focus-shadow-rgb: 15, 137, 145;
}

.text-moas { color: var(--moas-teal-dark) !important; }
.bg-moas-soft { background: var(--moas-soft); }

.category-card,
.product-card,
.form-card,
.summary-card,
.advisor-shell,
.recommendation-card,
.confirmation-panel {
  border: 1px solid var(--moas-border);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 10px 30px rgba(36, 55, 70, 0.06);
}

.category-card,
.product-card {
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.category-card:hover,
.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(36, 55, 70, 0.11);
}

.category-icon,
.journey-icon {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.9rem;
  background: var(--moas-soft);
  color: var(--moas-teal-dark);
  font-size: 1.35rem;
}

.price-label {
  font-size: 0.78rem;
  color: #6b7d88;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.price-value {
  color: var(--moas-navy);
  font-size: 1.25rem;
  font-weight: 750;
}

.badge-soft {
  background: var(--moas-soft);
  color: var(--moas-teal-dark);
  border: 1px solid #c9e6e7;
}

.section-heading {
  color: var(--moas-navy);
  font-weight: 750;
}

.sticky-summary { top: 5.5rem; }

.journey-card {
  position: relative;
  cursor: pointer;
  border: 2px solid var(--moas-border);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 8px 24px rgba(36, 55, 70, .05);
  transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.journey-card:hover,
.journey-card:has(input:focus-visible),
.journey-card:has(input:checked) {
  border-color: var(--moas-teal);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(15, 137, 145, .13);
}

.journey-card:has(input:checked)::after {
  content: "✓";
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--moas-teal);
  color: #fff;
  font-weight: 800;
}

.journey-card-specialist { background: #fbfcff; }
.journey-select { color: var(--moas-teal-dark); font-weight: 650; }

.advisor-shell { overflow: hidden; }
.advisor-shell-header { background: #fff; }
.advisor-conversation { min-height: 32rem; background: linear-gradient(#f8fbfc, #f2f7f8); }

.chat-row {
  display: flex;
  gap: .75rem;
  margin-bottom: 1rem;
}

.chat-row-user { justify-content: flex-end; }
.chat-row-advisor { align-items: flex-start; }

.chat-bubble {
  max-width: 88%;
  padding: 1rem 1.1rem;
  border-radius: 1rem;
  box-shadow: 0 5px 16px rgba(36, 55, 70, .06);
}

.chat-bubble-user {
  color: #fff;
  background: var(--moas-teal-dark);
  border-bottom-right-radius: .3rem;
}

.chat-bubble-advisor {
  width: min(100%, 46rem);
  background: #fff;
  border: 1px solid var(--moas-border);
  border-top-left-radius: .3rem;
}

.advisor-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .8rem;
  background: var(--moas-navy);
  color: #fff;
}

.why-card {
  border-left: 4px solid var(--moas-teal);
  padding: .75rem 1rem;
  border-radius: .35rem;
  background: var(--moas-soft);
}

.why-card summary,
details summary { cursor: pointer; }

.quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}

.quick-reply {
  padding: .7rem 1rem;
  border: 1px solid #b7d5d8;
  border-radius: 999px;
  color: var(--moas-teal-dark);
  background: #fff;
  font-weight: 650;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.quick-reply:hover {
  color: #fff;
  border-color: var(--moas-teal);
  background: var(--moas-teal);
}

.choice-check {
  border: 1px solid var(--moas-border);
  border-radius: .75rem;
  background: #fff;
  cursor: pointer;
}

.choice-check:has(input:checked) {
  border-color: var(--moas-teal);
  background: var(--moas-soft);
}

.confidence-card,
.score-ring {
  border: 1px solid #bfe0e2;
  background: var(--moas-soft);
  color: var(--moas-teal-dark);
}

.confidence-card { border-radius: .8rem; min-width: 7rem; }

.score-ring {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  font-weight: 800;
}

.recommendation-card-primary {
  border-color: #83cdd1;
  box-shadow: 0 16px 38px rgba(15, 137, 145, .12);
}

.demo-notice {
  padding: .75rem;
  border-radius: .65rem;
  background: #fff5d6;
  color: #664d03;
  font-size: .85rem;
}

.rfq-review-item {
  border: 1px solid var(--moas-border);
  border-radius: .85rem;
  background: #fbfcfd;
}

.confirmation-panel {
  background: linear-gradient(135deg, #fff 0%, var(--moas-soft) 100%);
}

.confirmation-icon {
  display: grid;
  place-items: center;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  color: #087f5b;
  background: #d3f9d8;
  font-size: 2.75rem;
}

.footer-moas {
  color: #d4e3e8;
  background: var(--moas-navy);
}

.table > :not(caption) > * > * { vertical-align: middle; }

@media (max-width: 767.98px) {
  .hero,
  .advisor-hero { border-radius: 1rem; }
  .hero h1,
  .advisor-hero h1 { font-size: 2.1rem; }
  .sticky-summary { position: static !important; }
  .chat-bubble { max-width: 96%; }
  .advisor-conversation { min-height: 24rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* Governed product media regions: consistent 4:3 frame, no layout shift,
   object-fit keeps synthetic equipment artwork uncropped. */
.product-media {
  aspect-ratio: 4 / 3;
  background: #fff;
  border: 1px solid var(--moas-border);
  overflow: hidden;
}

.product-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-media-detail {
  background: var(--moas-soft);
}