.materials-page {
  --accent: #123b96;
  --deep: #14254a;
  --ink: #172544;
}

.material-open {
  display: inline-block;
  min-height: 44px;
  padding: 5px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 650;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}

.material-open:hover { color: var(--accent); }
.dealer-technology .material-open { color: inherit; }
.dealer-technology .material-open:hover { color: var(--warm-red); }
.material-open:focus-visible { outline-color: var(--accent); }
.material-feature { font-size: var(--lead); line-height: 1.2; }
.materials-highlights p { margin-top: 3px; }
.materials-page .subpage .button:focus-visible { outline-color: var(--accent); }

html:has(.material-dialog[open]) { overflow: hidden; }
.material-dialog {
  width: min(780px, calc(100% - 32px));
  max-width: none;
  max-height: min(84dvh, 850px);
  padding: 0;
  border: 0;
  border-radius: 14px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 24px 80px #0a142c50;
}

.material-dialog[open] { display: flex; flex-direction: column; }
.material-dialog::backdrop { background: #0c1428ad; }
.material-dialog-header {
  display: flex;
  flex: 0 0 auto;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(16px, 3.6vw, 28px) clamp(16px, 3.6vw, 36px);
  color: var(--inverse);
  background: var(--deep);
}

.material-dialog-header h2 {
  align-self: center;
  margin: 0;
  font-size: clamp(1.32rem, 1rem + 1.7vw, 2rem);
  line-height: 1.17;
  overflow-wrap: anywhere;
}

.material-dialog-close {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: #ffffff20;
  color: inherit;
  font: inherit;
  font-size: 1.65rem;
  line-height: 1;
  cursor: pointer;
}

.material-dialog-close:hover { background: #ffffff37; }
.material-dialog-close:focus-visible { outline-color: var(--inverse); }
.material-dialog-content {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: clamp(16px, 3.6vw, 36px);
  overflow-wrap: anywhere;
}

.material-document { line-height: 1.62; }
.material-document :is(p, ul, ol, h3, h4, table, blockquote) { margin-block: .7em; }
.material-document :is(h3, h4) { line-height: 1.25; }
.material-document ul { list-style: disc; padding-inline-start: 1.3em; }
.material-document table { border-collapse: collapse; font-size: .9em; max-width: 100%; }
.material-document :is(td, th) { border: 1px solid #a8b4c4; padding: .3em .5em; vertical-align: top; }
.material-record { background: var(--surface); border-radius: 8px; }
.material-record + .material-record { margin-top: 9px; }
.material-record summary { padding: 12px 15px; cursor: pointer; font-weight: 700; }
.material-record-body { padding: 0 15px 15px; overflow-x: auto; }

@media (prefers-reduced-motion: no-preference) {
  .material-dialog[open][data-input="pointer"] { animation: material-appear 190ms var(--ease-out); }
}

@keyframes material-appear {
  from { opacity: .65; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}