/* Thomas Super Store — researched compatibility guide */
.compat-page {
  --compat-ink: #14233a;
  --compat-navy: #072b50;
  --compat-blue: #0057b8;
  --compat-sky: #dff2ff;
  --compat-red: #e20b2c;
  --compat-yellow: #ffcd00;
  --compat-cream: #f7f3e9;
  --compat-green: #178653;
  --compat-orange: #c66a00;
  color: var(--compat-ink);
  background: #fff;
}

.compat-page main { overflow: hidden; }
.compat-page .header { z-index: 80; }
.compat-page .nav a.active { color: var(--thomas-red); }
.compat-logo-image {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  border: 2.5px solid var(--compat-blue);
  flex: 0 0 auto;
  box-shadow: 0 2px 8px rgba(0,87,184,.2);
}
.compat-logo-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.compat-logo-image--footer { border-color: rgba(255,255,255,.35); box-shadow: none; }
.compat-logo-copy { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 5px; color: var(--compat-ink); font-size: 1.1rem; line-height: 1; }
.compat-logo-copy > span { color: var(--compat-blue); }
.compat-logo-copy small { flex-basis: 100%; margin-top: 4px; color: #999; font-size: .52rem; font-weight: 600; letter-spacing: 2.3px; text-transform: uppercase; }
.footer .compat-logo-copy { color: #fff; }
.footer .compat-logo-copy > span { color: var(--compat-yellow); }
.footer .compat-logo-copy small { color: rgba(255,255,255,.42); }

.compat-hero {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: center;
  padding: 72px 0 86px;
  color: #fff;
  background:
    radial-gradient(circle at 75% 14%, rgba(106,209,227,.28), transparent 26%),
    radial-gradient(circle at 7% 94%, rgba(255,205,0,.15), transparent 30%),
    linear-gradient(122deg, #031a32 0%, #063e75 55%, #0872bd 100%);
  isolation: isolate;
}
.compat-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .26;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(90deg, #000, transparent 66%);
}
.compat-hero-track {
  position: absolute;
  right: -9vw;
  bottom: 34px;
  width: 58vw;
  height: 38px;
  opacity: .23;
  transform: rotate(-5deg);
  background: repeating-linear-gradient(90deg, transparent 0 22px, #fff 22px 29px, transparent 29px 47px);
}
.compat-hero-track::before,
.compat-hero-track::after { content: ''; position: absolute; left: 0; right: 0; height: 4px; border-radius: 4px; background: #fff; }
.compat-hero-track::before { top: 6px; }
.compat-hero-track::after { bottom: 6px; }
.compat-hero-grid { display: grid; grid-template-columns: 1.03fr .97fr; align-items: center; gap: clamp(44px, 7vw, 96px); }
.compat-hero-copy { position: relative; z-index: 2; }
.compat-breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 30px; color: rgba(255,255,255,.62); font-size: .77rem; }
.compat-breadcrumb a { color: rgba(255,255,255,.84); }
.compat-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; color: #b9e8ff; font-size: .73rem; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.compat-eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--compat-yellow); box-shadow: 0 0 0 5px rgba(255,205,0,.14); }
.compat-hero h1 { max-width: 660px; margin: 0 0 20px; color: #fff; font-size: clamp(2.55rem, 5.2vw, 5rem); line-height: .98; letter-spacing: -2.7px; text-wrap: balance; }
.compat-hero h1 em { color: var(--compat-yellow); font-style: normal; }
.compat-hero-copy > p { max-width: 650px; margin: 0 0 28px; color: rgba(255,255,255,.83); font-size: clamp(1rem, 1.6vw, 1.17rem); line-height: 1.75; }
.compat-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.compat-hero-actions .btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 13px 22px; }
.compat-btn-light { color: #fff !important; border: 1px solid rgba(255,255,255,.32); background: rgba(255,255,255,.08); backdrop-filter: blur(8px); }
.compat-btn-light:hover { border-color: #fff; background: rgba(255,255,255,.15); }
.compat-research-row { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 36px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.15); }
.compat-research-row span { display: flex; flex-direction: column; }
.compat-research-row strong { color: #fff; font-size: .78rem; }
.compat-research-row small { color: rgba(255,255,255,.51); font-size: .66rem; }
.compat-hero-visual { position: relative; z-index: 2; }
.compat-hero-card { position: relative; padding: 12px; border: 1px solid rgba(255,255,255,.22); border-radius: 28px; background: rgba(255,255,255,.1); box-shadow: 0 36px 72px rgba(1,15,31,.34); transform: rotate(2.5deg); backdrop-filter: blur(16px); }
.compat-hero-card > img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 20px; background: #fff; }
.compat-hero-badge { position: absolute; top: -22px; right: 28px; display: flex; flex-direction: column; padding: 10px 16px 12px; border-radius: 10px; color: var(--compat-ink); background: var(--compat-yellow); box-shadow: 0 8px 24px rgba(0,0,0,.2); transform: rotate(5deg); }
.compat-hero-badge span { font-size: .61rem; font-weight: 900; letter-spacing: 1.3px; }
.compat-hero-badge strong { font-size: .98rem; line-height: 1.05; }
.compat-hero-caption { position: absolute; left: 28px; right: 28px; bottom: 26px; padding: 10px 14px; border-radius: 10px; color: #fff; background: rgba(4,33,62,.86); font-size: .76rem; line-height: 1.45; backdrop-filter: blur(8px); }
.compat-coupler-float { position: absolute; left: -54px; bottom: 66px; display: grid; grid-template-columns: 32px 46px 32px; align-items: center; padding: 12px 15px 24px; border: 1px solid rgba(255,255,255,.25); border-radius: 14px; color: #fff; background: rgba(3,22,42,.86); box-shadow: 0 15px 34px rgba(0,0,0,.25); transform: rotate(-5deg); }
.compat-coupler-float small { position: absolute; left: 12px; right: 12px; bottom: 6px; color: rgba(255,255,255,.66); font-size: .55rem; text-align: center; }
.compat-magnet { display: grid; place-items: center; width: 32px; height: 32px; border: 3px solid #a9c1d7; border-radius: 50%; color: #fff; background: #e11b35; font-size: .65rem; font-weight: 900; }
.compat-magnet-s { background: #135aa4; }
.compat-coupler-line { height: 4px; background: repeating-linear-gradient(90deg, #ffcd00 0 7px, transparent 7px 11px); }

.compat-jump { position: relative; z-index: 10; border-bottom: 1px solid #dce4ed; background: #fff; box-shadow: 0 7px 24px rgba(20,35,58,.07); }
.compat-jump .container { display: flex; justify-content: center; gap: clamp(18px, 4vw, 46px); overflow-x: auto; scrollbar-width: none; }
.compat-jump a { position: relative; flex: 0 0 auto; padding: 18px 0 16px; color: #4f6074; font-size: .76rem; font-weight: 750; }
.compat-jump a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 3px; border-radius: 4px; background: var(--compat-red); transition: right .25s ease; }
.compat-jump a:hover { color: var(--compat-blue); }
.compat-jump a:hover::after { right: 0; }

.compat-section { padding: clamp(62px, 6.5vw, 88px) 0; scroll-margin-top: 90px; }
.compat-section--intro { background: linear-gradient(180deg, #f7fbff 0%, #fff 72%); }
.compat-section--cream { background: var(--compat-cream); }
.compat-section--blue { color: #fff; background: linear-gradient(145deg, #052544, #0057a7 68%, #007cc5); }
.compat-section--model { color: #fff; background: #0c213a; }
.compat-section--shop { background: linear-gradient(180deg, #fff, #f5f9fd); }
.compat-section--faq { background: #f7f4ec; }
.compat-section-heading { max-width: 720px; margin-bottom: 32px; }
.compat-section-heading--center { margin-right: auto; margin-left: auto; text-align: center; }
.compat-section-heading h2 { margin: 6px 0 12px; color: var(--compat-ink); font-size: clamp(1.95rem, 3.5vw, 2.85rem); line-height: 1.08; letter-spacing: -1.2px; text-wrap: balance; }
.compat-section-heading p { margin: 0; color: #667386; font-size: .94rem; line-height: 1.7; }
.compat-section .compat-section-heading--light h2 { color: #fff; }
.compat-section .compat-section-heading--light p { color: rgba(255,255,255,.74); }
.compat-kicker { color: var(--compat-red); font-size: .69rem; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; }
.compat-kicker--yellow { color: var(--compat-yellow); }

.compat-checker { overflow: hidden; max-width: 980px; margin: 0 auto; border: 1px solid #dce4ec; border-radius: 18px; background: #fff; box-shadow: 0 16px 44px rgba(20,35,58,.09); }
.compat-checker-controls { display: grid; grid-template-columns: minmax(0,1fr) 44px minmax(0,1fr); align-items: end; gap: 14px; padding: 26px; background: #fff; }
.compat-checker-controls label { display: grid; gap: 8px; color: #5c697a; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; }
.compat-checker-controls select { width: 100%; min-height: 52px; padding: 0 42px 0 15px; border: 1.5px solid #cbd8e5; border-radius: 10px; color: var(--compat-ink); background: #f9fbfd; font: 700 .86rem/1.3 inherit; }
.compat-checker-controls select:focus { outline: 3px solid rgba(0,87,184,.15); border-color: var(--compat-blue); }
.compat-checker-plus { display: grid; place-items: center; width: 36px; height: 36px; margin: 0 auto 8px; border-radius: 50%; color: #fff; background: var(--compat-blue); font-size: 1.35rem; font-weight: 400; }
.compat-checker-result { border-top: 1px solid #d9e3ed; }
.compat-result-status { display: flex; align-items: center; gap: 12px; padding: 16px 30px; color: #fff; background: var(--compat-orange); }
.compat-result-status--yes { background: var(--compat-green); }
.compat-result-status--no { background: #a82d37; }
.compat-result-status--partial { background: #b56500; }
.compat-result-icon { display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid rgba(255,255,255,.8); border-radius: 50%; font-weight: 900; }
.compat-result-status div { display: flex; flex-direction: column; }
.compat-result-status small { color: rgba(255,255,255,.68); font-size: .58rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.compat-result-status strong { color: #fff; font-size: 1.05rem; }
.compat-result-parts { display: grid; grid-template-columns: 1fr 1fr; }
.compat-result-parts > div { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 24px 30px; }
.compat-result-parts > div + div { border-left: 1px solid #e2e8ef; }
.compat-result-symbol { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: var(--compat-blue); background: #e7f3ff; font-size: 1.2rem; font-weight: 900; }
.compat-result-parts small { display: block; margin-bottom: 2px; color: #7b8796; font-size: .61rem; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; }
.compat-result-parts strong { color: var(--compat-ink); font-size: .92rem; }
.compat-result-parts p { margin: 5px 0 0; color: #677486; font-size: .76rem; line-height: 1.55; }
.compat-result-note { margin: 0; padding: 15px 30px; border-top: 1px solid #e5eaf0; color: #59677a; background: #f8fafc; font-size: .76rem; }
.compat-rule { display: grid; grid-template-columns: 38px 1fr 38px 38px 1fr; align-items: center; gap: 13px; max-width: 860px; margin: 30px auto 0; }
.compat-rule-number { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; background: var(--compat-ink); font-weight: 850; }
.compat-rule strong { display: block; color: var(--compat-ink); font-size: .82rem; }
.compat-rule p { margin: 3px 0 0; color: #778293; font-size: .72rem; line-height: 1.5; }
.compat-rule-arrow { color: #a4aeba; font-size: 1.4rem; }

.compat-2026-grid { display: grid; grid-template-columns: 1.04fr .96fr; gap: 34px; align-items: center; }
.compat-2026-photo { overflow: hidden; margin: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 20px; background: #fff; box-shadow: 0 28px 60px rgba(0,0,0,.24); }
.compat-2026-photo img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.compat-2026-photo figcaption { display: flex; justify-content: space-between; gap: 16px; padding: 13px 16px; color: #57677a; background: #fff; font-size: .68rem; }
.compat-2026-photo figcaption a { flex: 0 0 auto; font-weight: 800; }
.compat-2026-facts { display: grid; gap: 12px; }
.compat-2026-facts article { display: grid; grid-template-columns: 42px 1fr; gap: 13px; padding: 17px; border: 1px solid rgba(255,255,255,.15); border-radius: 13px; background: rgba(255,255,255,.08); }
.compat-fact-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: var(--compat-navy); background: var(--compat-yellow); font-size: .88rem; font-weight: 900; }
.compat-2026-facts strong { display: block; color: #fff; font-size: .9rem; }
.compat-2026-facts p { margin: 4px 0 0; color: rgba(255,255,255,.66); font-size: .75rem; line-height: 1.56; }
.compat-evidence { margin-top: 26px; padding: 21px 24px; border-left: 4px solid var(--compat-yellow); border-radius: 0 12px 12px 0; background: rgba(2,24,46,.48); }
.compat-evidence > strong { display: block; margin-bottom: 6px; color: var(--compat-yellow); font-size: .72rem; letter-spacing: 1px; text-transform: uppercase; }
.compat-evidence p { margin: 0; color: rgba(255,255,255,.82); font-size: .87rem; line-height: 1.7; }
.compat-evidence p b { color: #fff; }
.compat-evidence-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; }
.compat-evidence-links a { color: #bfe8ff; font-size: .7rem; font-weight: 750; }

.compat-finder-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.compat-finder-tabs button { min-height: 42px; padding: 9px 16px; border: 1px solid #d2d7d8; border-radius: 100px; color: #5d6771; background: rgba(255,255,255,.66); font-size: .73rem; font-weight: 800; }
.compat-finder-tabs button:hover { border-color: var(--compat-blue); color: var(--compat-blue); }
.compat-finder-tabs button[aria-selected="true"] { border-color: var(--compat-blue); color: #fff; background: var(--compat-blue); box-shadow: 0 5px 14px rgba(0,87,184,.2); }
.compat-finder-results { max-width: 920px; margin: 0 auto; }
.compat-finder-result { display: grid; grid-template-columns: .88fr 1.12fr; overflow: hidden; border: 1px solid #dedbd2; border-radius: 16px; background: #fff; box-shadow: 0 14px 36px rgba(56,54,45,.08); }
.compat-finder-result[hidden] { display: none; }
.compat-finder-result > img { width: 100%; height: 100%; min-height: 340px; object-fit: contain; padding: 22px; background: #eef5f9; }
.compat-finder-result > div { padding: 34px; }
.compat-id-tag { display: inline-block; margin-bottom: 13px; padding: 5px 9px; border-radius: 5px; color: var(--compat-blue); background: #e5f2ff; font-size: .6rem; font-weight: 900; letter-spacing: 1px; }
.compat-finder-result h3 { margin: 0 0 12px; color: var(--compat-ink); font-size: 1.55rem; }
.compat-finder-result p { margin: 0 0 18px; color: #647184; font-size: .84rem; line-height: 1.7; }
.compat-finder-result ul { display: grid; gap: 9px; margin: 0 0 20px; }
.compat-finder-result li { position: relative; padding-left: 19px; color: #3e4e61; font-size: .76rem; line-height: 1.5; }
.compat-finder-result li::before { content: '✓'; position: absolute; left: 0; color: var(--compat-green); font-weight: 900; }
.compat-finder-result a { font-size: .75rem; font-weight: 850; }

.compat-family-block { overflow: hidden; margin-top: 12px; border: 1px solid #dce3ea; border-radius: 15px; background: #fff; box-shadow: 0 8px 26px rgba(20,35,58,.045); }
.compat-family-title { display: flex; align-items: center; gap: 15px; padding: 18px 22px; border-bottom: 1px solid transparent; background: #fff; cursor: pointer; list-style: none; transition: background .2s ease, border-color .2s ease; }
.compat-family-title::-webkit-details-marker { display: none; }
.compat-family-title::after { content: '+'; display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; margin-left: auto; border-radius: 50%; color: var(--compat-blue); background: #edf5fc; font-size: 1.15rem; font-weight: 500; }
.compat-family-block[open] .compat-family-title { border-bottom-color: #e0e6ec; background: #f7f9fb; }
.compat-family-block[open] .compat-family-title::after { content: '−'; }
.compat-family-title:hover { background: #f7f9fb; }
.compat-family-title:focus-visible { outline: 3px solid rgba(0,87,184,.2); outline-offset: -3px; }
.compat-family-title > span { color: #b3bfca; font-size: 1.7rem; font-weight: 900; letter-spacing: -1px; }
.compat-family-title small { color: #708094; font-size: .61rem; font-weight: 850; letter-spacing: 1px; text-transform: uppercase; }
.compat-family-title h3 { margin: 2px 0 0; color: var(--compat-ink); font-size: clamp(1.15rem, 2.4vw, 1.7rem); }
.compat-family-block--red .compat-family-title { box-shadow: inset 5px 0 0 var(--compat-red); }
.compat-family-block--blue .compat-family-title { box-shadow: inset 5px 0 0 var(--compat-blue); }
.compat-family-block--teal .compat-family-title { box-shadow: inset 5px 0 0 #0097a7; }
.compat-family-block--yellow .compat-family-title { box-shadow: inset 5px 0 0 #e6af00; }
.compat-family-block--wood .compat-family-title { box-shadow: inset 5px 0 0 #8b642e; }
.compat-family-body { display: grid; grid-template-columns: .8fr 1.2fr; align-items: stretch; }
.compat-family-body--reverse { grid-template-columns: .95fr 1.05fr; }
.compat-family-photo { min-height: 330px; background: #edf5fa; }
.compat-family-photo img { width: 100%; height: 100%; object-fit: cover; }
.compat-family-photo--contain { position: relative; padding: 18px; }
.compat-family-photo--contain img { object-fit: contain; }
.compat-family-photo--contain a { position: absolute; left: 18px; bottom: 14px; padding: 5px 8px; border-radius: 5px; color: #fff; background: rgba(7,30,52,.76); font-size: .59rem; font-weight: 800; }
.compat-family-copy { padding: 28px 32px; }
.compat-family-copy > p { margin: 0 0 24px; color: #657284; font-size: .88rem; line-height: 1.75; }
.compat-family-copy dl { margin: 0 0 24px; }
.compat-family-copy dl > div { display: grid; grid-template-columns: 86px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid #e7ebef; }
.compat-family-copy dt { color: #8692a0; font-size: .62rem; font-weight: 850; letter-spacing: .8px; text-transform: uppercase; }
.compat-family-copy dd { margin: 0; color: #35465a; font-size: .75rem; line-height: 1.55; }
.compat-shop-link { display: inline-flex; margin: 4px 8px 0 0; padding: 9px 13px; border-radius: 7px; color: #fff !important; background: var(--compat-blue); font-size: .68rem; font-weight: 850; }
.compat-shop-link--secondary { color: var(--compat-blue) !important; background: #e7f2ff; }

.compat-legacy-grid { display: grid; grid-template-columns: 1fr 190px 1fr; gap: 18px; padding: 26px; align-items: stretch; }
.compat-legacy-grid article { padding: 16px; border: 1px solid #e1e7ec; border-radius: 14px; background: #fbfcfd; }
.compat-legacy-grid article img { width: 100%; height: 190px; object-fit: contain; margin-bottom: 14px; }
.compat-legacy-grid article h4 { margin: 0 0 7px; color: var(--compat-ink); font-size: 1rem; }
.compat-legacy-grid article p { margin: 0; color: #697687; font-size: .74rem; line-height: 1.65; }
.compat-adapter-card { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 15px; border: 1px dashed #9bb3c4; border-radius: 14px; text-align: center; background: #eef8fa; }
.compat-adapter-card img { width: 120px; height: 120px; object-fit: contain; margin-bottom: 8px; mix-blend-mode: multiply; }
.compat-adapter-card span { color: #087b89; font-size: .56rem; font-weight: 900; letter-spacing: 1px; }
.compat-adapter-card strong { margin: 4px 0 8px; color: var(--compat-ink); font-size: .75rem; }
.compat-adapter-card a { font-size: .57rem; font-weight: 800; }
.compat-family-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 32px; border-top: 1px solid #e0e6ec; background: #f7fafc; }
.compat-family-footer p { margin: 0; color: #607083; font-size: .72rem; }
.compat-family-footer p b { color: var(--compat-ink); }
.compat-family-footer a { flex: 0 0 auto; font-size: .7rem; font-weight: 850; }

.compat-era-line { display: grid; grid-template-columns: 1fr 62px 1fr 62px 1fr 62px 1fr; align-items: center; padding: 26px 22px; }
.compat-era-line article { text-align: center; }
.compat-era-image { display: grid; place-items: center; height: 125px; margin-bottom: 10px; padding: 8px; border-radius: 10px; background: #f3f6f8; }
.compat-era-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.compat-era-line article > span { color: #8490a0; font-size: .56rem; font-weight: 850; letter-spacing: .7px; }
.compat-era-line h4 { margin: 2px 0 6px; color: var(--compat-ink); font-size: .95rem; }
.compat-era-line p { margin: 0; color: #6e7a89; font-size: .67rem; line-height: 1.5; }
.compat-era-link { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.compat-era-link span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-weight: 900; }
.compat-era-link small { color: #7b8795; font-size: .52rem; line-height: 1.2; }
.compat-era-link--yes span { background: var(--compat-green); }
.compat-era-link--partial span { background: var(--compat-orange); }
.compat-era-link--no span { background: #a82d37; }
.compat-image-credit { margin: 0; padding: 12px 26px; border-top: 1px solid #e2e7eb; color: #88929e; background: #f8fafb; font-size: .59rem; text-align: center; }

.compat-wood-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: #e0e5e9; }
.compat-wood-grid article { padding: 24px; background: #fff; }
.compat-wood-grid article > strong { color: #947144; font-size: .62rem; letter-spacing: 1px; }
.compat-wood-grid h4 { margin: 4px 0 10px; color: var(--compat-ink); font-size: 1.06rem; }
.compat-wood-grid p { min-height: 94px; margin: 0 0 16px; color: #677486; font-size: .74rem; line-height: 1.62; }
.compat-pill { display: inline-flex; padding: 6px 9px; border-radius: 100px; font-size: .57rem; font-weight: 850; }
.compat-pill--yes { color: #086a3d; background: #e2f5ea; }
.compat-pill--partial { color: #8a5100; background: #fff0d7; }
.compat-safety-note { display: grid; grid-template-columns: 38px 1fr; gap: 12px; margin: 24px 28px 28px; padding: 18px 20px; border: 1px solid #efc28e; border-radius: 12px; color: #704000; background: #fff5e7; }
.compat-safety-note svg { color: #c06300; }
.compat-safety-note strong { display: block; margin-bottom: 4px; font-size: .8rem; }
.compat-safety-note p { margin: 0 0 6px; color: #76532a; font-size: .71rem; line-height: 1.6; }
.compat-safety-note a { color: #9d4c00; font-size: .66rem; font-weight: 850; }

.compat-model-table-wrap { overflow-x: auto; border: 1px solid rgba(255,255,255,.15); border-radius: 16px; }
.compat-model-table { width: 100%; min-width: 920px; border-collapse: collapse; background: rgba(255,255,255,.045); }
.compat-model-table th { padding: 14px 16px; color: #8db4d4; background: rgba(0,0,0,.2); font-size: .59rem; text-align: left; letter-spacing: .9px; text-transform: uppercase; }
.compat-model-table td { padding: 20px 16px; border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.68); font-size: .71rem; line-height: 1.55; vertical-align: top; }
.compat-model-table td:first-child { min-width: 155px; }
.compat-model-table td strong { color: #fff; font-size: .92rem; }
.compat-model-table td small { display: block; margin-left: 24px; color: rgba(255,255,255,.43); font-size: .58rem; }
.compat-model-table td > b { color: var(--compat-yellow); font-size: .94rem; }
.compat-model-table td a { display: inline-flex; padding: 6px 9px; border-radius: 5px; color: #fff; background: var(--compat-blue); font-size: .64rem; font-weight: 800; }
.compat-scale-dot { display: inline-block; width: 12px; height: 12px; margin-right: 8px; border-radius: 50%; background: #6ad1e3; box-shadow: 0 0 0 3px rgba(106,209,227,.13); }
.compat-scale-dot--n { transform: scale(.66); }
.compat-scale-dot--oo9 { background: #ffb13b; }
.compat-scale-dot--g { transform: scale(1.25); background: #59c37b; }
.compat-model-notes { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 20px; }
.compat-model-notes article { padding: 19px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(255,255,255,.05); }
.compat-model-notes strong { color: var(--compat-yellow); font-size: .77rem; }
.compat-model-notes p { margin: 5px 0 0; color: rgba(255,255,255,.58); font-size: .68rem; line-height: 1.6; }
.compat-dcc-guide-link { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 14px; margin-top: 17px; padding: 14px 17px; border: 1px solid rgba(135,223,255,.24); border-radius: 11px; color: #fff !important; background: rgba(4,45,80,.7); transition: border-color .2s ease, background .2s ease; }
.compat-dcc-guide-link:hover { border-color: rgba(135,223,255,.58); background: rgba(7,64,108,.78); }
.compat-dcc-guide-link__icon { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 9px; color: #12243a; background: var(--compat-yellow); font-size: .77rem; font-weight: 950; }
.compat-dcc-guide-link > span:nth-child(2) { display: grid; }
.compat-dcc-guide-link small { color: #87dfff; font-size: .55rem; font-weight: 850; letter-spacing: .8px; text-transform: uppercase; }
.compat-dcc-guide-link strong { color: #fff; font-size: .82rem; }
.compat-dcc-guide-link em { margin-top: 2px; color: rgba(255,255,255,.52); font-size: .64rem; font-style: normal; line-height: 1.45; }
.compat-dcc-guide-link > b { color: #87dfff; font-size: .68rem; white-space: nowrap; }
.compat-official-link { display: flex; justify-content: space-between; gap: 20px; margin-top: 28px; color: rgba(255,255,255,.47); font-size: .66rem; }
.compat-official-link a { color: #87dfff; font-weight: 800; }

.compat-product-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.compat-product-card { overflow: hidden; border: 1px solid #dfe6ed; border-radius: 15px; background: #fff; box-shadow: 0 10px 30px rgba(20,35,58,.06); transition: transform .25s ease, box-shadow .25s ease; }
.compat-product-card:hover { transform: translateY(-4px); box-shadow: 0 18px 42px rgba(20,35,58,.11); }
.compat-product-image { position: relative; display: grid; place-items: center; height: 210px; padding: 14px; background: #f4f7fa; }
.compat-product-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.compat-product-badge { position: absolute; top: 12px; left: 12px; padding: 5px 8px; border-radius: 5px; color: #fff; background: var(--compat-ink); font-size: .54rem; font-weight: 900; letter-spacing: .7px; }
.compat-product-badge--new { background: var(--compat-red); }
.compat-product-badge--legacy { background: #b66500; }
.compat-product-badge--blue { background: var(--compat-blue); }
.compat-product-badge--model { background: #5b3b83; }
.compat-product-card > div:last-child { padding: 20px; }
.compat-product-card small { color: #8994a1; font-size: .58rem; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.compat-product-card h3 { min-height: 42px; margin: 5px 0 7px; color: var(--compat-ink); font-size: 1rem; }
.compat-product-card p { min-height: 54px; margin: 0 0 14px; color: #6d7989; font-size: .69rem; line-height: 1.6; }
.compat-product-card a { font-size: .69rem; font-weight: 850; }
.compat-buy-checklist { display: grid; grid-template-columns: 1.1fr 2fr auto; gap: 24px; align-items: center; margin-top: 32px; padding: 26px 28px; border-radius: 15px; color: #fff; background: var(--compat-navy); box-shadow: 0 14px 34px rgba(5,35,62,.15); }
.compat-buy-checklist > div span { color: var(--compat-yellow); font-size: .59rem; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }
.compat-buy-checklist h3 { margin: 4px 0 0; color: #fff; font-size: 1.35rem; }
.compat-buy-checklist ol { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.compat-buy-checklist li { display: grid; grid-template-columns: 24px 1fr; gap: 8px; align-items: start; }
.compat-buy-checklist li > span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--compat-navy); background: var(--compat-yellow); font-size: .6rem; font-weight: 900; }
.compat-buy-checklist li p { margin: 0; color: rgba(255,255,255,.65); font-size: .65rem; line-height: 1.45; }
.compat-buy-checklist li p b { color: #fff; }
.compat-buy-checklist .btn { white-space: nowrap; }

.compat-faq-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 70px; align-items: start; }
.compat-faq-list { display: grid; gap: 10px; }
.compat-faq-list details { overflow: hidden; border: 1px solid #dedbd3; border-radius: 11px; background: rgba(255,255,255,.7); }
.compat-faq-list summary { position: relative; padding: 17px 48px 17px 18px; color: var(--compat-ink); font-size: .8rem; font-weight: 800; cursor: pointer; list-style: none; }
.compat-faq-list summary::-webkit-details-marker { display: none; }
.compat-faq-list summary::after { content: '+'; position: absolute; right: 17px; top: 50%; transform: translateY(-50%); color: var(--compat-blue); font-size: 1.25rem; font-weight: 400; }
.compat-faq-list details[open] summary::after { content: '−'; }
.compat-faq-list details p { margin: 0; padding: 0 18px 18px; color: #667385; font-size: .74rem; line-height: 1.7; }

.compat-sources { padding: 58px 0; color: rgba(255,255,255,.68); background: #061522; }
.compat-sources-head { display: flex; justify-content: space-between; gap: 40px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,.12); }
.compat-sources-head span { color: var(--compat-yellow); font-size: .58rem; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }
.compat-sources-head h2 { margin: 4px 0 0; color: #fff; font-size: 1.55rem; }
.compat-sources-head p { max-width: 430px; margin: 0; color: rgba(255,255,255,.48); font-size: .7rem; line-height: 1.6; }
.compat-source-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; padding: 26px 0; }
.compat-source-grid h3 { margin: 0 0 12px; color: #9dc3df; font-size: .66rem; letter-spacing: 1px; text-transform: uppercase; }
.compat-source-grid > div { display: grid; align-content: start; gap: 7px; }
.compat-source-grid a { color: rgba(255,255,255,.7); font-size: .67rem; }
.compat-source-grid a:hover { color: #fff; }
.compat-source-disclaimer { margin: 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.34); font-size: .61rem; line-height: 1.65; }

@media (max-width: 1080px) {
  .compat-hero-grid { gap: 48px; }
  .compat-hero h1 { font-size: clamp(2.5rem, 5.5vw, 4rem); }
  .compat-coupler-float { left: -25px; }
  .compat-product-grid { grid-template-columns: repeat(2,1fr); }
  .compat-era-line { grid-template-columns: 1fr 55px 1fr; gap: 12px; }
  .compat-era-line article:nth-of-type(3) { grid-column: 1; }
  .compat-era-line .compat-era-link:nth-of-type(3) { grid-column: 2; }
  .compat-era-line article:nth-of-type(4) { grid-column: 3; }
  .compat-buy-checklist { grid-template-columns: 1fr 1.7fr; }
  .compat-buy-checklist .btn { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 820px) {
  .compat-page .header-search { display: none; }
  .compat-hero { min-height: 0; padding: 50px 0 70px; }
  .compat-hero-grid { grid-template-columns: 1fr; }
  .compat-hero-copy { text-align: center; }
  .compat-breadcrumb, .compat-hero-actions, .compat-research-row { justify-content: center; }
  .compat-hero h1, .compat-hero-copy > p { margin-right: auto; margin-left: auto; }
  .compat-hero-visual { max-width: 570px; margin: 0 auto; }
  .compat-coupler-float { left: 10px; bottom: 50px; }
  .compat-jump .container { justify-content: flex-start; }
  .compat-checker-controls { grid-template-columns: 1fr; }
  .compat-checker-plus { margin: 0 auto; }
  .compat-result-parts { grid-template-columns: 1fr; }
  .compat-result-parts > div + div { border-top: 1px solid #e2e8ef; border-left: 0; }
  .compat-rule { grid-template-columns: 38px 1fr; }
  .compat-rule-arrow { display: none; }
  .compat-2026-grid { grid-template-columns: 1fr; }
  .compat-finder-result { grid-template-columns: 1fr; }
  .compat-finder-result > img { min-height: 300px; max-height: 400px; }
  .compat-family-body,
  .compat-family-body--reverse { grid-template-columns: 1fr; }
  .compat-family-photo { min-height: 280px; }
  .compat-legacy-grid { grid-template-columns: 1fr; }
  .compat-adapter-card { min-height: 210px; }
  .compat-wood-grid { grid-template-columns: 1fr; }
  .compat-wood-grid p { min-height: 0; }
  .compat-model-notes { grid-template-columns: 1fr; }
  .compat-dcc-guide-link { grid-template-columns: 42px 1fr; }
  .compat-dcc-guide-link > b { grid-column: 2; }
  .compat-faq-layout { grid-template-columns: 1fr; gap: 12px; }
  .compat-source-grid { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 620px) {
  .compat-page .container { padding-right: 18px; padding-left: 18px; }
  .compat-page .lang-switcher { display: none; }
  .compat-hero h1 { font-size: clamp(2.3rem, 12vw, 3.25rem); letter-spacing: -1.8px; }
  .compat-breadcrumb { margin-bottom: 22px; }
  .compat-hero-actions { flex-direction: column; }
  .compat-hero-actions .btn { width: 100%; }
  .compat-research-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; text-align: center; }
  .compat-hero-card { border-radius: 20px; transform: none; }
  .compat-hero-card > img { border-radius: 14px; }
  .compat-hero-badge { top: -16px; right: 13px; }
  .compat-hero-caption { left: 18px; right: 18px; bottom: 18px; }
  .compat-coupler-float { display: none; }
  .compat-jump a { padding: 15px 0 13px; }
  .compat-section { padding: 54px 0; }
  .compat-section-heading { margin-bottom: 26px; }
  .compat-section-heading h2 { font-size: 1.9rem; }
  .compat-checker-controls { padding: 22px 18px; }
  .compat-result-status { padding: 14px 18px; }
  .compat-result-parts > div { padding: 20px 18px; }
  .compat-result-note { padding: 13px 18px; }
  .compat-rule { align-items: start; }
  .compat-2026-photo figcaption { flex-direction: column; }
  .compat-evidence { padding: 20px; }
  .compat-finder-tabs { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding: 0 0 8px; }
  .compat-finder-tabs button { flex: 0 0 auto; }
  .compat-finder-result > img { min-height: 250px; max-height: 300px; }
  .compat-finder-result > div { padding: 26px 20px; }
  .compat-family-title { padding: 18px; }
  .compat-family-title > span { font-size: 1.35rem; }
  .compat-family-title::after { width: 29px; height: 29px; }
  .compat-family-title h3 { font-size: 1.05rem; }
  .compat-family-photo { min-height: 240px; }
  .compat-family-copy { padding: 26px 20px; }
  .compat-family-copy dl > div { grid-template-columns: 1fr; gap: 4px; }
  .compat-legacy-grid { padding: 20px; }
  .compat-family-footer { align-items: flex-start; flex-direction: column; padding: 17px 20px; }
  .compat-era-line { display: grid; grid-template-columns: 1fr; gap: 16px; }
  .compat-era-line article:nth-of-type(3),
  .compat-era-line .compat-era-link:nth-of-type(3),
  .compat-era-line article:nth-of-type(4) { grid-column: auto; }
  .compat-era-link { flex-direction: row; justify-content: center; }
  .compat-era-image { height: 190px; }
  .compat-safety-note { margin: 18px; padding: 16px; }
  .compat-product-grid { grid-template-columns: 1fr; }
  .compat-product-card h3,
  .compat-product-card p { min-height: 0; }
  .compat-buy-checklist { grid-template-columns: 1fr; padding: 25px 20px; }
  .compat-buy-checklist ol { grid-template-columns: 1fr; }
  .compat-buy-checklist .btn { grid-column: auto; width: 100%; }
  .compat-sources-head { flex-direction: column; gap: 14px; }
}

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