/* The Chassis Check page: the two-step check (md-home.css) beside an example result, then how it works. */
.ck-hero, .ck-how { min-height: var(--screen); display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; padding-block: clamp(20px, 5svh, 72px); }
.ck-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(40px, 6vw, 112px); align-items: center; }
.ck-title { margin-top: 14px; font-family: var(--serif); font-size: clamp(2.6rem, min(1.2rem + 4vw, 9.6svh), 5.25rem); line-height: 0.98; letter-spacing: -0.025em; }
.ck-lead { max-width: 38ch; }
.ck-hero .md-hero-form { margin-top: clamp(18px, 3.2svh, 36px); }
/* The homepage hero's phone layout doesn't apply here: this column is only as tall as its content. */
.ck-hero .md-hero-copy { display: block; min-height: 0; padding: 0; }
.ck-hero .md-hero-form { padding-top: 0; }
@media (min-width: 961px) { .ck-hero .md-shows { display: none; } }
/* The second step on this page: tighter spacing, so the whole form stays on one screen. */
.ck-hero:has(.md-flow-active) { padding-block: clamp(14px, 3svh, 48px); }
.ck-hero .md-contact { gap: clamp(12px, 2svh, 22px); }
.ck-hero .md-contact-car { padding-block: 12px; }
.ck-hero .md-contact-submit { min-height: 52px; }
.ck-hero-copy:has(.md-flow-active) .ck-lead { display: none; }
.ck-hero-copy:has(.md-flow-active) .ck-title { font-size: clamp(2.2rem, min(1rem + 3vw, 7svh), 4rem); }

.ck-example { position: relative; padding: clamp(20px, 3.4svh, 36px) clamp(20px, 2.6vw, 36px); background: var(--paper); border: 1px solid var(--rule); box-shadow: 0 1px 2px rgba(40, 30, 10, 0.06), 0 40px 80px -48px rgba(50, 25, 10, 0.5); }
.ck-example::before { content: ""; position: absolute; inset: 8px; border: 1px solid #e2dccd; pointer-events: none; }
.ck-example-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--ink-3); }
.ck-example-head .md-mono { font-size: 0.75rem; letter-spacing: 0.08em; }
.ck-example-head .md-mono:first-child { color: var(--burgundy); }
.ck-rows { margin: clamp(14px, 2.4svh, 22px) 0 0; border-top: 1px solid var(--ink); }
.ck-rows div { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: 14px; padding: clamp(8px, 1.5svh, 13px) 0; border-bottom: 1px solid var(--rule); }
.ck-rows dt { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.ck-rows dd { margin: 0; font-size: 0.9375rem; }
.ck-rows dd.is-open { color: var(--ink-3); }
.ck-rows dd.is-gap { font-family: var(--serif); font-style: italic; color: var(--burgundy); }
.ck-example .md-years-field { height: clamp(26px, 3.6svh, 40px); }
.ck-example .md-years-note { display: none; }
.ck-example-note { margin-top: 14px; color: var(--ink-3); font-size: 0.8125rem; }

.ck-how { background: var(--paper); border-block: 1px solid var(--rule); }
.ck-head .md-h2 { margin-top: 12px; }
.ck-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3.4vw, 56px); margin-top: clamp(24px, 5svh, 56px); border-top: 1px solid var(--ink); }
.ck-steps li { display: grid; align-content: start; gap: 10px; padding-top: clamp(16px, 2.6svh, 28px); }
.ck-n { font-family: var(--serif); font-style: italic; font-size: clamp(2.4rem, 1.8rem + 1.6vw, 3.6rem); line-height: 1; color: var(--burgundy); }
.ck-steps h3 { font-family: var(--serif); font-size: clamp(1.4rem, min(1rem + 1vw, 4svh), 2rem); line-height: 1.1; }
.ck-steps p { color: var(--ink-2); max-width: 40ch; }
.ck-how-note { margin-top: clamp(20px, 4svh, 40px); color: var(--ink-3); font-size: 0.875rem; }

@media (max-width: 960px) {
  .ck-hero-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3.4svh, 36px); }
  .ck-example { max-width: 560px; }
  .ck-example .md-years { display: none; }
  .ck-hero-grid:has(.md-flow-active) .ck-example { display: none; }
  .ck-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ck-steps li { grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .ck-n { grid-row: 1 / span 2; font-size: 2rem; }
}
@media (max-width: 640px) {
  .ck-title { font-size: clamp(2.2rem, 9.6vw, 2.8rem); }
  .ck-example { display: none; }
  .ck-steps h3 { font-size: 1.25rem; }
  .ck-steps p { font-size: 0.9375rem; }
}
@media (max-width: 640px) {
  .ck-hero-copy:has(.md-flow-active) .ck-title { font-size: 1.7rem; }
  .ck-hero-copy:has(.md-flow-active) .md-kicker { display: none; }
}
@media (max-width: 640px) and (max-height: 760px) {
  .ck-lead { display: none; }
  .ck-hero-copy:has(.md-flow-active) .ck-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ck-steps p { font-size: 0.875rem; }
}
@media (min-width: 961px) and (max-height: 820px) {
  .ck-title { font-size: clamp(2.4rem, 8svh, 4rem); }
  .ck-hero-copy:has(.md-flow-active) .ck-title { font-size: clamp(1.8rem, 5svh, 2.6rem); }
  .ck-hero-copy:has(.md-flow-active) .md-kicker { display: none; }
  .ck-example .md-years { display: none; }
}