/*
 * MLTox Version 0.1
 * Structure and product copy: Step 10 prototype.
 * Visual system: measured from the current mltox.com site.
 * Current-site overlap metadata is retained without visible annotations.
 */

:root {
  --canvas: #f4f7f7;
  --paper: #ffffff;
  --paper-soft: #edf2f2;
  --ink: #0b1a1c;
  --ink-soft: #33474a;
  --ink-muted: #6b7e81;
  --deep: #0b1a1c;
  --deep-soft: #edf2f2;
  --line: #e2e9ea;
  --line-dark: #d7e0e1;
  --teal: #0fa896;
  --teal-dark: #0a8375;
  --teal-soft: #e4f5f2;
  --blue: #0a8375;
  --blue-soft: #e4f5f2;
  --coral: #dc5b3e;
  --coral-soft: #fbedE8;
  --amber: #dfa023;
  --amber-soft: #fcf3dd;
  --shadow: 0 1px 2px rgba(11, 26, 28, 0.04), 0 8px 24px rgba(11, 26, 28, 0.05);
  --container: 1080px;
  --reading: 720px;
  --header-height: 63px;
  --radius: 14px;
  --radius-sm: 9px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "SF Mono", "JetBrains Mono", "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;
}

*,
*::before,
*::after {
  letter-spacing: 0;
}

html {
  scroll-padding-top: 80px;
}

body {
  color: var(--ink);
  background-color: var(--canvas);
  background-image: radial-gradient(circle at 1px 1px, rgba(11, 26, 28, 0.045) 1px, transparent 0);
  background-size: 22px 22px;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  color: var(--ink);
  font-weight: 660;
  line-height: 1.16;
}

h1 {
  margin-bottom: 18px;
  font-size: clamp(36px, 4.4vw, 50px);
}

h2 {
  margin-bottom: 16px;
  font-size: clamp(25px, 2.8vw, 31px);
}

h3 {
  margin-bottom: 10px;
  font-size: 18px;
}

p {
  color: var(--ink-soft);
}

.container {
  width: min(calc(100% - 48px), var(--container));
}

.narrow {
  width: min(calc(100% - 48px), var(--reading));
}

:focus-visible {
  outline: 3px solid rgba(15, 168, 150, 0.38);
  outline-offset: 3px;
}

.skip-link {
  border-radius: var(--radius-sm);
  color: #ffffff;
  background: var(--teal);
}

.prototype-bar {
  min-height: 34px;
  gap: 22px;
  padding: 7px 24px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.96);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
}

.prototype-bar span + span {
  color: var(--ink-muted);
  font-weight: 500;
}

.site-header {
  height: var(--header-height);
  border-bottom-color: transparent;
  background: rgba(244, 247, 247, 0.9);
  backdrop-filter: saturate(1.2) blur(10px);
}

.site-header.scrolled {
  border-bottom-color: var(--line);
}

.site-header__inner {
  gap: 22px;
}

.brand {
  min-height: 38px;
  gap: 10px;
  font-size: 17px;
  font-weight: 640;
}

.brand__logo {
  display: block;
  flex: 0 0 auto;
}

.brand__name {
  color: var(--ink);
  font-size: 17px;
  font-weight: 640;
}

.brand__name b {
  color: var(--teal-dark);
  font-weight: 640;
}

.primary-nav {
  gap: 2px;
}

.primary-nav > a,
.nav-dropdown > button,
.header-login {
  min-height: 38px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-size: 14.5px;
  font-weight: 500;
}

.primary-nav > a:hover,
.nav-dropdown > button:hover,
.header-login:hover,
.primary-nav [aria-current="page"],
.nav-dropdown > button.is-current {
  color: var(--teal-dark);
  background: transparent;
}

.primary-nav [aria-current="page"],
.nav-dropdown > button.is-current {
  box-shadow: inset 0 -2px 0 var(--teal);
}

.nav-dropdown__menu {
  top: calc(100% + 10px);
  width: 390px;
  border-color: var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

.nav-dropdown__menu a {
  border-radius: 7px;
}

.nav-dropdown__menu a:hover,
.nav-dropdown__menu a[aria-current="page"] {
  background: var(--teal-soft);
}

.header-actions {
  gap: 10px;
}

.button {
  min-height: 44px;
  padding: 9px 20px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.06s;
}

.button:active {
  transform: translateY(1px);
}

.button--primary,
.button--header {
  color: #ffffff;
  background: var(--teal);
}

.button--primary:hover,
.button--header:hover {
  background: var(--teal-dark);
}

.button--secondary {
  border-color: var(--line);
  color: var(--ink-soft);
  background: var(--paper);
}

.button--secondary:hover {
  border-color: var(--teal);
  color: var(--teal-dark);
  background: var(--teal-soft);
}

.button--header {
  min-height: 36px;
  padding: 7px 15px;
  font-size: 14px;
}

.icon-button {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
  border-color: var(--line);
  border-radius: var(--radius-sm);
}

.mobile-menu-button,
.primary-nav > .nav-mobile-only {
  display: none;
}

.text-link {
  color: var(--teal-dark);
  font-size: 14.5px;
  font-weight: 620;
}

.eyebrow,
.product-kicker,
.card-label {
  margin-bottom: 14px;
  color: var(--teal-dark);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.55;
  text-transform: uppercase;
}

/* The baseline hides imagery; visual-review.css selectively restores review assets. */
img,
picture,
.hero__media,
.hero__wash,
.visual-zoom,
.lightbox {
  display: none !important;
}

.hero {
  min-height: 0;
  height: auto;
  max-height: none;
  overflow: visible;
  padding: 60px 0 54px;
  border-bottom: 0;
  background: transparent;
}

.hero__inner {
  display: block;
  height: auto;
}

.hero__copy,
.hero--home .hero__copy {
  width: min(100%, 760px);
  padding: 0;
}

.hero__lead {
  max-width: 680px;
  margin-bottom: 26px;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.55;
}

.hero__boundary {
  max-width: 680px;
  margin-top: 22px;
  color: var(--ink-muted);
  font-size: 13.5px;
}

.hero__boundary svg {
  color: var(--teal);
}

.band {
  padding-block: 68px;
  background: var(--canvas);
}

.band--white {
  border-block: 1px solid var(--line);
  background: var(--paper);
}

.band--ink {
  color: var(--ink);
  border-block: 1px solid var(--line);
  background: var(--paper);
}

.band--ink h2,
.band--ink h3 {
  color: var(--ink);
}

.band--ink .eyebrow,
.band--ink .product-kicker,
.band--ink .text-link {
  color: var(--teal-dark);
}

.band--ink p,
.band--ink li {
  color: var(--ink-soft);
}

.section-heading {
  max-width: 700px;
  margin-bottom: 40px;
}

.section-heading p:last-child {
  max-width: 660px;
  font-size: 16.5px;
  line-height: 1.58;
}

.split,
.split--visual-left,
.split--balanced {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 52px;
}

.split--wide {
  gap: 58px;
}

.split .section-heading {
  margin-bottom: 28px;
}

.product-route,
.product-route--reverse {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 52px;
  padding-block: 52px;
}

.product-route__copy h3 {
  font-size: 24px;
}

.product-route__copy p:not(.product-kicker) {
  font-size: 16.5px;
}

/*
 * Former artwork captions are retained as text-only interface notes so the
 * Step 10 information remains available without showing decorative imagery.
 */
.product-visual {
  align-self: stretch;
  padding: 22px 0 22px 24px;
  border-left: 3px solid var(--teal);
  background: transparent;
}

.product-visual::before {
  display: block;
  margin-bottom: 12px;
  color: var(--ink-muted);
  content: "INTERFACE CONCEPT";
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
}

.product-visual figcaption,
.product-visual--on-dark figcaption,
.product-visual--on-dark figcaption strong {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.58;
}

.product-visual figcaption strong {
  display: block;
  margin-bottom: 5px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 640;
}

.product-visual figcaption span,
.product-visual--on-dark figcaption span {
  display: block;
  margin-top: 8px;
  color: var(--ink-muted);
  font-family: var(--mono);
  font-size: 10.5px;
}

.card-grid {
  gap: 14px;
}

.info-card {
  padding: 22px;
  border-color: var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.info-card__icon {
  width: 38px;
  height: 38px;
  margin-bottom: 16px;
  border-radius: 10px;
  color: var(--teal-dark);
  background: var(--teal-soft);
}

.info-card h3 {
  font-size: 18px;
}

.info-card p:last-child,
.state-grid p {
  font-size: 15px;
  line-height: 1.55;
}

.dosage-context-figure {
  margin: 26px 0 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.dosage-context-figure picture,
.dosage-context-figure img {
  display: block !important;
  width: 100%;
}

.dosage-context-figure img {
  height: auto;
}

.state-grid .info-card {
  grid-template-columns: 38px 100px 1fr;
  border-color: var(--line);
  background: var(--paper);
}

.state-grid .info-card__icon {
  width: 34px;
  height: 34px;
}

.step-grid h3 {
  font-size: 18px;
}

.step-grid p {
  font-size: 15px;
  line-height: 1.55;
}

.step-grid--compact p {
  font-size: 14px;
}

.endpoint-grid li,
.check-list li {
  font-size: 15px;
}

.question-list p {
  font-size: 16px;
}

th,
td,
.evidence-standard p {
  font-size: 15px;
}

.field label {
  font-size: 14.5px;
}

.step-grid li:not(:last-child)::after,
.split .step-grid li:not(:last-child)::after,
.band--ink .step-grid li:not(:last-child)::after {
  background: var(--line);
}

.step-number {
  border-color: var(--line);
  color: var(--teal-dark);
  background: var(--teal-soft);
}

.boundary-callout,
.band--ink .boundary-callout {
  border-color: #f0d9b8;
  border-left-color: var(--amber);
  border-radius: var(--radius-sm);
  background: var(--amber-soft);
}

.band--ink .boundary-callout > div:first-child,
.band--ink .boundary-callout h3 {
  color: #9a7412;
}

.boundary-callout p,
.band--ink .boundary-callout p {
  color: var(--ink-soft);
}

.question-list li,
.band--ink .question-list li {
  border-color: var(--line);
}

.question-list span,
.band--ink .question-list span {
  color: var(--teal-dark);
  font-family: var(--mono);
  font-size: 11px;
}

.question-list p,
.band--ink .question-list p {
  color: var(--ink-soft);
}

.boundary-band {
  border-top-color: var(--line);
  background: var(--amber-soft);
}

.table-wrap {
  border-radius: var(--radius-sm);
}

thead th {
  border-bottom-color: var(--line);
  color: var(--ink);
  background: var(--paper-soft);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

tbody th {
  background: #fafcfc;
}

.status {
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
}

.evidence-standard span {
  color: var(--teal-dark);
  font-family: var(--mono);
  font-size: 11px;
}

.demo-form {
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
}

input,
select,
textarea {
  border-color: #9cacae;
  border-radius: var(--radius-sm);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--teal);
  outline-color: rgba(15, 168, 150, 0.22);
}

.form-status {
  border-radius: var(--radius-sm);
}

.access-grid {
  gap: 14px;
  border: 0;
  background: transparent;
}

.access-grid article {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.closing-cta {
  padding-block: 68px;
  color: var(--ink);
  border-top: 1px solid #bfe7e1;
  background: var(--teal-soft);
}

.closing-cta h2 {
  color: var(--ink);
}

.closing-cta p {
  color: var(--ink-soft);
}

.closing-cta .eyebrow {
  color: var(--teal-dark);
}

.closing-cta .button--secondary,
.band--ink .button--secondary {
  border-color: var(--line);
  color: var(--ink-soft);
  background: var(--paper);
}

.closing-cta .button--secondary:hover,
.band--ink .button--secondary:hover {
  border-color: var(--teal);
  color: var(--teal-dark);
  background: var(--paper);
}

.site-footer {
  padding-top: 48px;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.footer-grid {
  gap: 44px;
  padding-bottom: 42px;
}

.brand--footer {
  color: var(--ink);
}

.footer-brand p {
  color: var(--ink-muted);
}

.footer-grid h2 {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
}

.footer-grid > div:not(.footer-brand) a {
  color: var(--ink-soft);
}

.footer-grid a:hover {
  color: var(--teal-dark);
}

.footer-boundary {
  border-top-color: var(--line);
}

.footer-boundary p {
  color: var(--ink-muted);
}

@media (max-width: 1080px) {
  .primary-nav > a,
  .nav-dropdown > button,
  .header-login {
    padding-inline: 7px;
  }

  .split,
  .split--visual-left,
  .split--balanced,
  .product-route,
  .product-route--reverse {
    gap: 38px;
  }
}

@media (max-width: 860px) {
  .site-header__inner {
    grid-template-columns: auto auto;
    justify-content: space-between;
  }

  .primary-nav {
    background: var(--paper);
  }

  .primary-nav > a,
  .nav-dropdown > button {
    min-height: 48px;
  }

  .mobile-menu-button {
    display: inline-grid;
  }

  .primary-nav > .nav-mobile-only {
    display: flex !important;
  }

  .split,
  .split--visual-left,
  .split--balanced,
  .product-route,
  .product-route--reverse {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .product-route--reverse .product-route__copy,
  .product-route--reverse .product-visual {
    grid-column: 1;
  }

  .product-route--reverse .product-route__copy {
    grid-row: 1;
  }

  .product-route--reverse .product-visual {
    grid-row: 2;
  }

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

  .closing-cta .container {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

@media (max-width: 620px) {
  .container,
  .narrow {
    width: min(calc(100% - 36px), var(--container));
  }

  .prototype-bar {
    align-items: flex-start;
    gap: 5px;
    padding-inline: 18px;
    text-align: left;
  }

  .prototype-bar {
    flex-direction: column;
  }

  .hero {
    padding: 44px 0;
  }

  .hero__lead {
    font-size: 16px;
  }

  .band {
    padding-block: 54px;
  }

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

  .product-route {
    padding-block: 40px;
  }

  .product-visual {
    padding: 18px 0 18px 18px;
  }

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

  .state-grid .info-card {
    grid-template-columns: 34px 1fr;
  }

  .state-grid .info-card p {
    grid-column: 2;
  }

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

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-boundary {
    display: grid;
  }

}

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