:root {
  --emx-bg: #04182d;
  --emx-bg-deep: #03111f;
  --emx-rail: #153b57;
  --emx-panel: #071a2b;
  --emx-panel-soft: #102d43;
  --emx-line: rgba(205, 238, 245, 0.16);
  --emx-line-strong: rgba(175, 225, 235, 0.32);
  --emx-ink: #f7fbfc;
  --emx-muted: rgba(226, 241, 245, 0.72);
  --emx-cyan: #8ee8ff;
  --emx-mint: #9cf7d0;
  --emx-amber: #ffcf7a;
  --emx-green: #9cf7d0;
  --emx-red: #ff9c90;
  --emx-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
  --emx-ease: cubic-bezier(.2, .82, .2, 1);
}

body.calculator-preview-body,
body.emx-body {
  background: var(--emx-bg);
  color: var(--emx-ink);
}

body.emx-body > .skip-link {
  left: -9999px;
  position: fixed;
  top: 0;
  z-index: 10000;
}

body.emx-body > .skip-link:focus {
  background: #fff;
  color: #061622;
  left: 1rem;
  padding: 0.75rem 1rem;
  top: 1rem;
}

body.emx-body .site-header .header-inner {
  align-items: center;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  margin-inline: auto;
  max-width: 1180px;
}

body.emx-body .site-header .nav {
  align-items: center;
  display: flex;
  gap: clamp(0.7rem, 1.6vw, 1.35rem);
  justify-content: center;
}

body.emx-body .site-header .nav a,
body.emx-body .site-header .header-contact {
  color: #183043;
  font-size: 0.75rem;
  font-weight: 760;
  text-decoration: none;
}

body.emx-body .site-header .header-contact {
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(64, 91, 113, 0.22);
  border-radius: 999px;
  padding: 0.65rem 0.9rem;
}

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

.emx-page {
  background:
    linear-gradient(90deg, rgba(126, 231, 223, 0.045) 1px, transparent 1px),
    linear-gradient(rgba(126, 231, 223, 0.04) 1px, transparent 1px),
    radial-gradient(circle at 72% 6rem, rgba(88, 196, 229, 0.15), transparent 0 27rem),
    linear-gradient(180deg, #042044 0, #04192f 32rem, #03111f 100%);
  background-size: 32px 32px, 32px 32px, auto, auto;
  color: var(--emx-ink);
  min-height: 100vh;
  overflow: hidden;
  padding-top: 5.6rem;
}

.emx-shell {
  margin: 0 auto;
  max-width: 1360px;
  padding-inline: clamp(1rem, 2.8vw, 2.4rem);
}

.emx-kicker,
.emx-panel-label,
.emx-step-index,
.emx-status,
.emx-intro-visual__label {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Compact calculator introduction: deliberately aligned with the office tools. */
.emx-hero {
  align-items: end;
  display: grid;
  gap: clamp(1.25rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem);
  margin: 0 auto;
  max-width: 70rem;
  padding: clamp(1.8rem, 2.7vw, 2.8rem) 0 clamp(1rem, 1.8vw, 1.45rem);
}

.emx-kicker {
  color: var(--emx-cyan);
  font-size: 0.69rem;
  font-weight: 800;
  margin-bottom: 0.75rem;
}

.emx-hero h1 {
  color: #fff;
  font-size: clamp(2.7rem, 4.65vw, 4.35rem);
  letter-spacing: -0.045em;
  line-height: 0.92;
  margin: 0;
  max-width: 18ch;
}

.emx-hero--requirements h1,
.emx-hero--maintenance h1 {
  max-width: 20ch;
}

.emx-hero--requirements h1 {
  font-size: clamp(2.55rem, 4vw, 3.55rem);
  max-width: 22ch;
}

.emx-hero-copy > p {
  color: rgba(228, 241, 245, 0.78);
  font-size: clamp(0.94rem, 1.2vw, 1.08rem);
  line-height: 1.55;
  margin: 1rem 0 0;
  max-width: 46rem;
}

.emx-hero-copy > p strong {
  color: #fff;
}

.emx-intro-visual {
  align-self: center;
  background:
    linear-gradient(135deg, rgba(126, 231, 223, 0.1), rgba(255, 255, 255, 0.035)),
    rgba(5, 18, 31, 0.62);
  border: 1px solid var(--emx-line);
  border-radius: 8px;
  display: grid;
  padding: 0.95rem 1rem;
}

.emx-intro-visual__label {
  border-bottom: 1px solid var(--emx-line);
  color: var(--emx-mint);
  font-size: 0.62rem;
  font-weight: 800;
  padding-bottom: 0.72rem;
}

.emx-intro-visual > div {
  align-items: center;
  border-bottom: 1px solid var(--emx-line);
  color: rgba(238, 248, 250, 0.88);
  display: grid;
  font-size: 0.79rem;
  gap: 0.65rem;
  grid-template-columns: 1.2rem minmax(0, 1fr);
  min-height: 2.75rem;
}

.emx-intro-visual > div:last-child {
  border-bottom: 0;
}

.emx-intro-visual svg,
.emx-input-icon svg {
  fill: none;
  height: 1.08rem;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  width: 1.08rem;
}

.emx-intro-visual svg {
  color: var(--emx-cyan);
}

/* Three query owners, shown as compact calculator tabs. */
.emx-suite-nav {
  margin-bottom: 0;
}

.emx-suite-nav .emx-shell {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.emx-suite-link {
  background: rgba(4, 18, 31, 0.6);
  border: 1px solid var(--emx-line);
  border-radius: 7px 7px 0 0;
  color: var(--emx-muted);
  display: grid;
  gap: 0.18rem;
  min-height: 3.7rem;
  padding: 0.72rem 0.9rem;
  text-decoration: none;
}

.emx-suite-link strong {
  color: #f6fbfc;
  font-size: 0.83rem;
  line-height: 1.2;
}

.emx-suite-link small {
  font-size: 0.69rem;
  line-height: 1.25;
}

.emx-suite-link[aria-current="page"] {
  background: linear-gradient(180deg, rgba(142, 232, 255, 0.17), rgba(12, 48, 70, 0.86));
  border-color: rgba(142, 232, 255, 0.44);
  box-shadow: inset 0 3px 0 var(--emx-cyan);
}

.emx-suite-link:focus-visible,
.emx-suite-link:hover {
  border-color: rgba(142, 232, 255, 0.48);
}

.emx-tool-section {
  padding: 0 0 clamp(3.5rem, 7vw, 6rem);
  scroll-margin-top: 6rem;
}

.emx-board {
  background:
    linear-gradient(90deg, rgba(122, 214, 230, 0.045) 1px, transparent 1px),
    linear-gradient(rgba(122, 214, 230, 0.04) 1px, transparent 1px),
    rgba(4, 15, 27, 0.9);
  background-size: 32px 32px, 32px 32px, auto;
  border: 1px solid var(--emx-line-strong);
  border-radius: 0 0 8px 8px;
  box-shadow: var(--emx-shadow);
  display: grid;
  grid-template-columns: minmax(25rem, 28.5rem) minmax(0, 1fr);
  min-height: 41rem;
  overflow: hidden;
}

.emx-input-rail {
  align-content: start;
  background: linear-gradient(180deg, rgba(24, 62, 89, 0.98), rgba(8, 31, 49, 0.98));
  border-right: 1px solid var(--emx-line);
  display: grid;
  padding: clamp(1rem, 1.55vw, 1.35rem);
}

.emx-input-head {
  align-items: start;
  border-bottom: 1px solid var(--emx-line);
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 2.35rem minmax(0, 1fr);
  padding-bottom: 1rem;
}

.emx-input-icon {
  align-items: center;
  background: rgba(126, 231, 223, 0.1);
  border: 1px solid rgba(126, 231, 223, 0.32);
  border-radius: 6px;
  color: var(--emx-mint);
  display: inline-flex;
  height: 2.35rem;
  justify-content: center;
  width: 2.35rem;
}

.emx-panel-label {
  color: var(--emx-cyan);
  font-size: 0.62rem;
  font-weight: 800;
}

.emx-input-head h2 {
  color: #fff;
  font-size: clamp(1.25rem, 1.8vw, 1.7rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0.28rem 0 0;
}

.emx-input-head p {
  color: var(--emx-muted);
  font-size: 0.79rem;
  line-height: 1.45;
  margin: 0.55rem 0 0;
}

.emx-form {
  display: grid;
  gap: 0;
}

.emx-step {
  border: 0;
  border-bottom: 1px solid var(--emx-line);
  margin: 0;
  min-width: 0;
  padding: 1rem 0;
}

.emx-step legend {
  color: #fff;
  display: flex;
  font-size: 0.9rem;
  font-weight: 800;
  gap: 0.55rem;
  margin-bottom: 0.75rem;
  padding: 0;
  width: 100%;
}

.emx-step-index {
  color: var(--emx-mint);
  font-size: 0.58rem;
  font-style: normal;
  padding-top: 0.17rem;
}

.emx-step--expandable {
  padding: 0;
}

.emx-step--expandable summary {
  align-items: center;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: 0.86rem;
  font-weight: 800;
  justify-content: space-between;
  list-style: none;
  min-height: 3.35rem;
  padding: 0.75rem 0;
}

.emx-step--expandable summary::-webkit-details-marker {
  display: none;
}

.emx-step--expandable summary span {
  display: grid;
  gap: 0.18rem;
}

.emx-step--expandable summary b {
  align-items: center;
  border: 1px solid var(--emx-line-strong);
  border-radius: 50%;
  color: var(--emx-cyan);
  display: inline-flex;
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 1rem;
  height: 1.7rem;
  justify-content: center;
  transition: transform 180ms var(--emx-ease);
  width: 1.7rem;
}

.emx-step--expandable[open] summary b {
  transform: rotate(45deg);
}

.emx-step--expandable[open] {
  padding-bottom: 1rem;
}

.emx-field-grid {
  display: grid;
  gap: 0.58rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.emx-field--wide {
  grid-column: 1 / -1;
}

.emx-field {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(222, 246, 250, 0.13);
  border-radius: 8px;
  display: grid;
  gap: 0.38rem;
  min-width: 0;
  padding: 0.65rem;
}

.emx-field:has(.emx-start-field) {
  background: linear-gradient(135deg, rgba(142, 232, 255, 0.17), rgba(156, 247, 208, 0.08));
  border-color: rgba(142, 232, 255, 0.58);
  box-shadow: 0 0 0 3px rgba(142, 232, 255, 0.08);
  padding: 0.78rem;
}

.emx-field:has(.emx-start-field)::before {
  color: var(--emx-mint);
  content: "START HERE";
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.emx-field > span {
  color: #f7fbfc;
  font-size: 0.77rem;
  font-weight: 800;
  line-height: 1.25;
}

.emx-field small {
  color: rgba(226, 241, 245, 0.56);
  font-size: 0.66rem;
  line-height: 1.36;
}

.emx-field input,
.emx-field select,
.emx-enquiry input,
.emx-enquiry textarea {
  appearance: none;
  background: linear-gradient(180deg, rgba(17, 41, 61, 0.98), rgba(8, 25, 41, 0.98));
  border: 1px solid rgba(149, 220, 231, 0.24);
  border-radius: 6px;
  color: #fff;
  font: inherit;
  min-height: 44px;
  outline: 0;
  padding: 0.55rem 0.62rem;
  width: 100%;
}

.emx-field select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--emx-cyan) 50%),
    linear-gradient(135deg, var(--emx-cyan) 50%, transparent 50%),
    linear-gradient(180deg, rgba(17, 41, 61, 0.98), rgba(8, 25, 41, 0.98));
  background-position: calc(100% - 17px) 1.08rem, calc(100% - 11px) 1.08rem, 0 0;
  background-repeat: no-repeat;
  background-size: 6px 6px, 6px 6px, auto;
  padding-right: 2rem;
}

.emx-field select option {
  background: #0b2338;
  color: #fff;
}

.emx-field select.emx-start-field {
  border-color: rgba(142, 232, 255, 0.72);
  font-size: 0.9rem;
  font-weight: 800;
  min-height: 3.15rem;
}

.emx-field input:focus-visible,
.emx-field select:focus-visible,
.emx-enquiry input:focus-visible,
.emx-enquiry textarea:focus-visible,
.emx-page button:focus-visible,
.emx-page a:focus-visible,
.emx-page summary:focus-visible {
  border-color: var(--emx-mint);
  box-shadow: 0 0 0 3px rgba(142, 232, 255, 0.17);
  outline: 0;
}

.emx-form-actions {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding-top: 1rem;
}

.emx-auto-status {
  align-items: center;
  color: rgba(232, 244, 248, 0.78);
  display: flex;
  font-size: 0.69rem;
  gap: 0.48rem;
  line-height: 1.35;
}

.emx-auto-status i {
  background: var(--emx-mint);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(156, 247, 208, 0.1);
  flex: 0 0 auto;
  height: 0.48rem;
  width: 0.48rem;
}

.emx-submit,
.emx-reset,
.emx-icon-button,
.emx-add-product {
  cursor: pointer;
  font: inherit;
}

.emx-submit,
.emx-reset,
.emx-btn,
.emx-icon-button,
.emx-add-product,
.emx-view-product {
  align-items: center;
  border-radius: 6px;
  display: inline-flex;
  font-weight: 820;
  justify-content: center;
  line-height: 1.18;
  min-height: 44px;
  padding: 0.68rem 0.78rem;
  text-align: center;
  text-decoration: none;
}

.emx-submit {
  background: linear-gradient(135deg, var(--emx-cyan), var(--emx-mint));
  border: 1px solid rgba(142, 232, 255, 0.62);
  color: #061622;
  font-size: 0.78rem;
  white-space: nowrap;
}

.emx-reset,
.emx-icon-button,
.emx-btn--secondary,
.emx-view-product {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid var(--emx-line-strong);
  color: #f7fbfc;
}

.emx-btn {
  font-size: 0.72rem;
}

.emx-reset {
  color: var(--emx-muted);
  font-size: 0.74rem;
}

.emx-quick-enquiry {
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--emx-line);
  border-radius: 8px;
  display: flex;
  gap: 0.7rem;
  justify-content: space-between;
  margin-top: 0.9rem;
  padding: 0.72rem;
}

.emx-quick-enquiry strong {
  color: #fff;
  display: block;
  font-size: 0.75rem;
}

.emx-quick-enquiry span {
  color: var(--emx-muted);
  display: block;
  font-size: 0.65rem;
  line-height: 1.35;
  margin-top: 0.16rem;
}

/* Result dashboard */
.emx-result-stage {
  min-width: 0;
  padding: clamp(1.1rem, 2.2vw, 2rem);
  scroll-margin-top: 6rem;
}

.emx-empty {
  align-items: center;
  display: grid;
  min-height: 37rem;
  padding: clamp(1.5rem, 5vw, 4rem);
}

.emx-empty > div {
  max-width: 42rem;
}

.emx-empty-icon {
  align-items: center;
  background:
    linear-gradient(90deg, rgba(142, 232, 255, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(142, 232, 255, 0.08) 1px, transparent 1px),
    rgba(142, 232, 255, 0.06);
  background-size: 16px 16px;
  border: 1px solid var(--emx-line-strong);
  border-radius: 8px;
  color: var(--emx-cyan);
  display: flex;
  height: 7.5rem;
  justify-content: center;
  margin-bottom: 1.3rem;
  width: 100%;
}

.emx-empty-icon svg {
  height: 3.4rem;
  width: 3.4rem;
}

.emx-empty h2 {
  color: #fff;
  font-size: clamp(1.8rem, 3vw, 3rem);
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 0.48rem 0 0;
  max-width: 18ch;
}

.emx-empty p {
  color: var(--emx-muted);
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0.85rem 0 0;
  max-width: 36rem;
}

.emx-empty-steps {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 1.25rem;
}

.emx-empty-steps span {
  border-top: 2px solid rgba(142, 232, 255, 0.44);
  color: rgba(232, 244, 248, 0.72);
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 0.58rem;
  line-height: 1.3;
  padding-top: 0.52rem;
  text-transform: uppercase;
}

.emx-result {
  animation: emxRise 360ms var(--emx-ease) both;
}

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

.emx-result-head {
  align-items: end;
  border-bottom: 1px solid var(--emx-line);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding-bottom: 1rem;
}

.emx-result-head h2,
.emx-products-head h2,
.emx-enquiry h2 {
  color: #fff;
  font-size: clamp(1.55rem, 2.7vw, 2.55rem);
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 0.38rem 0 0;
}

.emx-result-head p,
.emx-products-head p,
.emx-enquiry-head p {
  color: var(--emx-muted);
  font-size: 0.76rem;
  line-height: 1.5;
  margin: 0.58rem 0 0;
  max-width: 38rem;
}

.emx-result-head__actions {
  display: flex;
  gap: 0.45rem;
}

.emx-icon-button {
  color: #fff;
  gap: 0.38rem;
  min-height: 44px;
  padding: 0.5rem 0.65rem;
}

.emx-icon-button svg {
  height: 0.95rem;
  width: 0.95rem;
}

.emx-metrics {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1rem;
  overflow: hidden;
}

.emx-metric {
  background: linear-gradient(135deg, rgba(75, 130, 151, 0.3), rgba(255, 255, 255, 0.035));
  border: 1px solid var(--emx-line);
  min-height: 6.8rem;
  padding: 0.88rem;
}

.emx-metric:first-child { border-radius: 8px 0 0; }
.emx-metric:nth-child(3) { border-radius: 0 8px 0 0; }
.emx-metric span { color: var(--emx-cyan); display: block; font-family: "IBM Plex Mono", Consolas, monospace; font-size: 0.58rem; text-transform: uppercase; }
.emx-metric strong { color: #fff; display: block; font-size: clamp(1.35rem, 2.4vw, 2.15rem); line-height: 1; margin-top: 0.52rem; }
.emx-metric small { color: var(--emx-muted); display: block; font-size: 0.65rem; line-height: 1.35; margin-top: 0.35rem; }

.emx-visual-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0.75rem;
}

.emx-visual-card {
  background: rgba(3, 15, 26, 0.58);
  border: 1px solid var(--emx-line);
  border-radius: 8px;
  min-width: 0;
  padding: 0.9rem;
}

.emx-visual-card--wide { grid-column: 1 / -1; }
.emx-visual-card h3 { color: #fff; font-size: 0.88rem; margin: 0 0 0.72rem; }

.emx-bars { display: grid; gap: 0.65rem; }
.emx-bar-head { color: var(--emx-muted); display: flex; font-size: 0.68rem; justify-content: space-between; margin-bottom: 0.25rem; }
.emx-bar-head strong { color: #fff; }
.emx-bar-track { background: rgba(255, 255, 255, 0.06); border-radius: 99px; height: 0.48rem; overflow: hidden; }
.emx-bar-fill { background: linear-gradient(90deg, #57bddc, var(--emx-mint)); border-radius: inherit; display: block; height: 100%; min-width: 4px; }

.emx-floor-stack { display: grid; gap: 0.38rem; }
.emx-floor { align-items: center; background: rgba(142, 232, 255, 0.055); border-left: 3px solid var(--emx-cyan); display: flex; gap: 0.7rem; justify-content: space-between; min-height: 2.4rem; padding: 0.5rem 0.65rem; }
.emx-floor span { color: var(--emx-muted); font-size: 0.68rem; }
.emx-floor strong { color: #fff; font-size: 0.76rem; text-align: right; }

.emx-answer-panel {
  align-items: center;
  background:
    radial-gradient(circle at 88% 0, rgba(156, 247, 208, 0.14), transparent 0 13rem),
    linear-gradient(135deg, rgba(55, 111, 134, 0.44), rgba(8, 27, 43, 0.72));
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: clamp(1rem, 2vw, 1.45rem);
}

.emx-answer-panel strong {
  color: #fff;
  display: block;
  font-size: clamp(2rem, 4vw, 3.8rem);
  letter-spacing: -0.045em;
  line-height: 0.96;
  margin-top: 0.45rem;
}

.emx-answer-panel p {
  color: var(--emx-muted);
  font-size: 0.78rem;
  line-height: 1.5;
  margin: 0.65rem 0 0;
  max-width: 42rem;
}

.emx-answer-panel > a {
  align-items: center;
  background: linear-gradient(135deg, var(--emx-cyan), var(--emx-mint));
  border-radius: 6px;
  color: #061622;
  font-size: 0.72rem;
  font-weight: 850;
  display: inline-flex;
  justify-content: center;
  min-height: 44px;
  padding: 0.68rem 0.8rem;
  text-decoration: none;
}

.emx-check-list,
.emx-priority-list {
  display: grid;
  gap: 0.48rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.emx-check-list li {
  border-left: 3px solid var(--emx-cyan);
  padding: 0.48rem 0.65rem;
}

.emx-check-list strong,
.emx-priority-list strong { color: #fff; display: block; font-size: 0.75rem; }
.emx-check-list span,
.emx-priority-list p { color: var(--emx-muted); display: block; font-size: 0.67rem; line-height: 1.4; margin: 0.2rem 0 0; }
.emx-priority-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.emx-priority-list li { align-items: start; border: 1px solid var(--emx-line); border-radius: 6px; display: grid; gap: 0.55rem; grid-template-columns: auto minmax(0, 1fr); padding: 0.65rem; }

.emx-matrix { display: grid; gap: 0.42rem; }
.emx-matrix-row { align-items: start; border: 1px solid var(--emx-line); border-radius: 6px; display: grid; gap: 0.65rem; grid-template-columns: 1fr auto; padding: 0.7rem; }
.emx-matrix-row strong { color: #fff; display: block; font-size: 0.76rem; }
.emx-matrix-row p { color: var(--emx-muted); font-size: 0.68rem; line-height: 1.4; margin: 0.25rem 0 0; }
.emx-status { border-radius: 99px; font-size: 0.54rem; font-weight: 900; padding: 0.38rem 0.48rem; white-space: nowrap; }
.emx-status--identified { background: rgba(156, 247, 208, 0.13); color: var(--emx-green); }
.emx-status--action { background: rgba(255, 207, 122, 0.14); color: var(--emx-amber); }
.emx-status--confirm { background: rgba(255, 156, 144, 0.13); color: var(--emx-red); }
.emx-status--clear { background: rgba(226, 241, 245, 0.08); color: var(--emx-muted); }

.emx-calendar { display: grid; gap: 0.42rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.emx-calendar-month { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--emx-line); border-radius: 6px; min-height: 5.2rem; padding: 0.62rem; }
.emx-calendar-month span { color: var(--emx-cyan); display: block; font-family: "IBM Plex Mono", Consolas, monospace; font-size: 0.58rem; text-transform: uppercase; }
.emx-calendar-month strong { color: #fff; display: block; font-size: 0.68rem; line-height: 1.35; margin-top: 0.4rem; }
.emx-calendar-month.is-annual { background: rgba(255, 207, 122, 0.1); border-color: rgba(255, 207, 122, 0.54); }

.emx-products {
  border-top: 1px solid var(--emx-line);
  margin-top: 1.2rem;
  padding-top: 1.2rem;
}

.emx-products-head,
.emx-enquiry-head {
  align-items: end;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.65fr);
}

.emx-product-grid {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0.9rem;
}

.emx-product {
  background:
    linear-gradient(145deg, rgba(126, 231, 223, 0.08), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(222, 246, 250, 0.15);
  border-radius: 8px;
  display: grid;
  gap: 0.75rem;
  min-width: 0;
  overflow: hidden;
  padding: 0.8rem;
}

.emx-product.is-primary { border-color: rgba(156, 247, 208, 0.42); box-shadow: 0 0 0 1px rgba(156, 247, 208, 0.08); }

.emx-product-media {
  aspect-ratio: 16 / 10;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(222, 246, 250, 0.22);
  border-radius: 6px;
  display: block;
  overflow: hidden;
}

.emx-product-media img {
  height: 100%;
  object-fit: cover;
  padding: 0;
  transition: transform 260ms var(--emx-ease);
  width: 100%;
}

.emx-product:hover .emx-product-media img { transform: scale(1.035); }
.emx-product-body { display: grid; gap: 0.52rem; padding: 0.1rem 0.15rem 0.2rem; }
.emx-product-badges,
.emx-product-facts { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.emx-product-badges span,
.emx-product-facts span { background: rgba(126, 231, 223, 0.08); border: 1px solid rgba(126, 231, 223, 0.18); border-radius: 99px; color: rgba(156, 232, 241, 0.88); font-family: "IBM Plex Mono", Consolas, monospace; font-size: 0.56rem; letter-spacing: 0.06em; padding: 0.26rem 0.42rem; text-transform: uppercase; }
.emx-product h3 { color: #f8fbfc; font-size: 1.08rem; line-height: 1.12; margin: 0; }
.emx-product-reason { color: var(--emx-muted); font-size: 0.75rem; line-height: 1.48; margin: 0; }
.emx-product-facts { margin-top: 0.08rem; }
.emx-product-facts span { color: rgba(232, 244, 248, 0.74); }
.emx-product-actions { display: grid; gap: 0.38rem; grid-template-columns: 1fr auto; margin-top: 0.7rem; }
.emx-add-product { background: linear-gradient(135deg, var(--emx-cyan), #d8f7ff); border: 1px solid rgba(142, 232, 255, 0.54); color: #061622; font-size: 0.68rem; min-height: 44px; padding: 0.5rem 0.58rem; }
.emx-add-product[aria-pressed="true"] { background: var(--emx-mint); border-color: var(--emx-mint); }
.emx-view-product { border-color: var(--emx-line-strong); color: #f8fbfc; font-size: 0.66rem; min-height: 44px; padding: 0.5rem 0.58rem; }

.emx-enquiry {
  background: linear-gradient(135deg, rgba(32, 83, 105, 0.65), rgba(8, 31, 48, 0.9));
  border: 1px solid var(--emx-line-strong);
  border-radius: 8px;
  margin-top: 1rem;
  padding: clamp(1rem, 2vw, 1.35rem);
}

.emx-enquiry-grid {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0.9rem;
}

.emx-enquiry textarea { min-height: 5.4rem; resize: vertical; }
.emx-enquiry .emx-submit,
.emx-selected { grid-column: 1 / -1; }
.emx-selected { color: var(--emx-mint); font-size: 0.67rem; min-height: 1.2em; }
.emx-disclaimer { background: rgba(255, 207, 122, 0.08); border-left: 3px solid var(--emx-amber); color: rgba(235, 244, 246, 0.8); font-size: 0.69rem; line-height: 1.5; margin-top: 0.85rem; padding: 0.72rem 0.8rem; }

/* Search-supporting guidance beneath the completed tool. */
.emx-content {
  background: rgba(2, 11, 20, 0.24);
  border-top: 1px solid var(--emx-line);
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

.emx-content h2 {
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.7rem);
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0;
  max-width: 17ch;
}

.emx-content-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1.7rem;
}

.emx-content-card {
  background: linear-gradient(145deg, rgba(27, 66, 91, 0.72), rgba(6, 25, 41, 0.84));
  border: 1px solid var(--emx-line);
  border-radius: 8px;
  padding: 1.15rem;
}

.emx-content-card img { height: 2.8rem; margin-bottom: 0.85rem; width: 2.8rem; }
.emx-content-card h3 { color: #fff; font-size: 1rem; margin: 0; }
.emx-content-card p { color: var(--emx-muted); font-size: 0.78rem; line-height: 1.55; margin: 0.55rem 0 0; }
.emx-content-card a,
.emx-reference-strip a { color: var(--emx-cyan); }

.emx-reference-strip {
  border-block: 1px solid var(--emx-line);
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1.8rem;
  padding-block: 1rem;
}

.emx-reference-strip strong { color: #fff; display: block; font-size: 0.76rem; }
.emx-reference-strip span { color: var(--emx-muted); display: block; font-size: 0.68rem; line-height: 1.45; margin-top: 0.3rem; }

@media (max-width: 1120px) {
  .emx-board { grid-template-columns: minmax(22rem, 25rem) minmax(0, 1fr); }
}

@media (max-width: 880px) {
  body.emx-body .site-header .nav,
  body.emx-body .site-header .header-contact { display: none; }
  body.emx-body .site-header.is-menu-open .nav {
    background: rgba(242, 248, 250, 0.98);
    border: 1px solid rgba(64, 91, 113, 0.2);
    border-radius: 10px;
    box-shadow: 0 18px 40px rgba(3, 14, 24, 0.22);
    display: grid;
    gap: 0;
    left: 1rem;
    padding: 0.55rem;
    position: fixed;
    right: 1rem;
    top: 5.4rem;
  }
  body.emx-body .site-header.is-menu-open .nav a { border-bottom: 1px solid rgba(64, 91, 113, 0.12); padding: 0.7rem; }
  .emx-page { padding-top: 4.8rem; }
  .emx-hero { grid-template-columns: minmax(0, 1fr) minmax(14rem, 16rem); }
  .emx-hero h1 { font-size: clamp(2.7rem, 7vw, 3.7rem); }
  .emx-hero--requirements h1 { font-size: clamp(2.45rem, 6.3vw, 3.3rem); }
  .emx-intro-visual { max-width: 28rem; }
  .emx-suite-link { border-radius: 6px; min-height: 3.25rem; }
  .emx-board { border-radius: 8px; grid-template-columns: 1fr; margin-top: 0.5rem; }
  .emx-input-rail { border-bottom: 1px solid var(--emx-line); border-right: 0; }
  .emx-empty { min-height: 26rem; }
  .emx-content-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .emx-hero { grid-template-columns: 1fr; }
  .emx-suite-link { padding: 0.6rem; }
  .emx-suite-link strong { font-size: 0.72rem; }
  .emx-suite-link small { font-size: 0.61rem; }
}

@media (max-width: 620px) {
  .emx-shell { padding-inline: 0.85rem; }
  .emx-hero { padding-top: 2.5rem; }
  .emx-hero h1 { font-size: clamp(2.45rem, 12.5vw, 4rem); }
  .emx-hero-copy > p { font-size: 0.9rem; }
  .emx-input-head p { display: none; }
  .emx-intro-visual {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0.5rem;
  }
  .emx-intro-visual__label { display: none; }
  .emx-intro-visual > div {
    border-bottom: 0;
    gap: 0.35rem;
    grid-template-columns: 1fr;
    min-height: 4.4rem;
    padding: 0.35rem;
    text-align: center;
  }
  .emx-intro-visual svg { margin: 0 auto; }
  .emx-intro-visual strong { font-size: 0.59rem; line-height: 1.25; }
  .emx-suite-link small { display: none; }
  .emx-board { min-height: 0; }
  .emx-field-grid,
  .emx-form-actions,
  .emx-visual-grid,
  .emx-products-head,
  .emx-product-grid,
  .emx-enquiry-head,
  .emx-enquiry-grid,
  .emx-reference-strip { grid-template-columns: 1fr; }
  .emx-field--wide,
  .emx-visual-card--wide,
  .emx-enquiry .emx-submit,
  .emx-selected { grid-column: auto; }
  .emx-result-head { align-items: start; flex-direction: column; }
  .emx-answer-panel,
  .emx-priority-list { grid-template-columns: 1fr; }
  .emx-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .emx-empty { min-height: 23rem; padding: 1.1rem; }
  .emx-empty-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .emx-calendar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .emx-quick-enquiry { align-items: stretch; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .emx-page *,
  .emx-page *::before,
  .emx-page *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

@media print {
  .site-header,
  .site-footer,
  .emx-hero,
  .emx-suite-nav,
  .emx-input-rail,
  .emx-result-head__actions,
  .emx-product-actions,
  .emx-enquiry,
  .emx-content { display: none !important; }
  .emx-page { background: #fff !important; color: #111 !important; padding: 0 !important; }
  .emx-tool-section { padding: 0 !important; }
  .emx-board { background: #fff !important; border: 0 !important; box-shadow: none !important; display: block !important; }
  .emx-result-stage { padding: 0 !important; }
  .emx-result,
  .emx-result * { color: #111 !important; }
  .emx-visual-card,
  .emx-metric,
  .emx-matrix-row,
  .emx-product { background: #fff !important; border-color: #bbb !important; break-inside: avoid; }
}