/* Blue glass direction — 2026-09-26. Layered over the responsive base.
   Static light, opaque text and fallback surfaces; no moving effects. */
:root {
  --ink: #163652;
  --sub: #4b647d;
  --teal: #175eaa;
  --mint: #dcecff;
  --pale: #eff6ff;
  --navy: #183d66;
  --blue: #2369b9;
  --line: #cfdeef;
  --green: #087648;
  --shadow: 0 18px 48px rgb(54 100 157 / 9%);
  --glass-edge: rgb(255 255 255 / 94%);
}
body {
  background: #fff;
}
.header {
  background: rgb(249 252 255 / 94%);
  border-bottom: 1px solid rgb(184 207 235 / 60%);
  box-shadow: 0 4px 24px rgb(43 91 143 / 4%);
}
.brand b { color: #2868b0; }
.button,
.button.line {
  background: linear-gradient(115deg, #2156a1 0%, #256bb6 62%, #1b609e 100%);
  color: white;
  border: 1px solid rgb(255 255 255 / 45%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 38%), 0 7px 20px rgb(40 93 161 / 17%);
}
.button:hover,
.button.line:hover {
  background: linear-gradient(115deg, #194788 0%, #205b9c 65%, #154f88 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 45%), 0 10px 24px rgb(40 93 161 / 23%);
}
.button.light {
  color: #215c9d;
  background: linear-gradient(125deg, #fff 0%, #f0f7ff 100%);
  border: 1px solid #b9d2ed;
  box-shadow: inset 0 1px 0 white, 0 5px 18px rgb(47 96 158 / 5%);
}
.button.light:hover { color: #194c86; background: #eaf3ff; }
.line-icon { background: #fff; color: #087648; }
.hero {
  isolation: isolate;
  border-bottom: 1px solid white;
  background:
    radial-gradient(ellipse at 69% 19%, rgb(255 255 255 / 100%) 0%, rgb(255 255 255 / 0%) 35%),
    radial-gradient(ellipse at 93% 58%, #cddfff 0%, transparent 46%),
    radial-gradient(ellipse at 5% 90%, #e3f6ff 0%, transparent 43%),
    linear-gradient(120deg, #f8fbff 8%, #eaf4ff 55%, #e1edfd);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(116deg,
    transparent 0% 48%, rgb(255 255 255 / 66%) 48.2%,
    rgb(255 255 255 / 6%) 59%, transparent 59.2% 69%,
    rgb(255 255 255 / 70%) 69.2%, transparent 70%);
}
.hero-grid { position: relative; }
.hero-tag { color: #275c95; border-color: #a9c9eb; }
.hero h1 em { color: #2268b4; }
.hero-orbit {
  border: 1px solid rgb(255 255 255 / 96%);
  background: linear-gradient(145deg, #ffffffb8, #ffffff17 50%, #c4ddff42);
  box-shadow: inset 1px 1px 0 white, inset -1px -1px 0 #a8c8ee40, 0 22px 65px #5681b812;
}
.hero-car-main {
  border: 1px solid white;
  border-radius: 32px;
  background: #fff;
  box-shadow: 0 22px 50px #3c70ad16, 0 2px 0 #ffffffc9;
}
.hero-car-small {
  border-color: #ffffffed;
  transform: rotate(-2deg);
  box-shadow: 0 15px 40px #315f9620;
}
.hero-badge {
  background: linear-gradient(140deg, #fffffffa, #e0edffec);
  border: 1px solid white;
  color: #255b95;
  box-shadow: inset 0 1px 0 white, inset 0 -2px 12px #aac9f133, 0 8px 28px #3b74b51a;
}
.hero-badge strong { color: #174f8b; }
.hero-art-word { color: #4b7fb3; }
.trust-strip {
  background: linear-gradient(110deg, #fff, #f4f8ff);
  border-bottom-color: #dce8f6;
}
.trust-row > div + div { border-left-color: #d3e2f3; }
.car-card,
.check-card,
.contact-form,
.voice,
.reason {
  background: #fff;
  border: 1px solid #d4e3f5;
  box-shadow: 0 6px 24px #366fac06;
}
.car-card { border-top-color: #fff; }
.pill {
  color: #255e9a;
  background: linear-gradient(110deg, #eff6ff, #e2efff);
  border: 1px solid #d1e2f5;
}
.example { border-top-color: #d7e4f3; }
.example-price { color: #174a7c; }
.sim-section,
.contact-section {
  position: relative;
  background: #f5f9ff;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #dfebf9;
}
.sim-tabs {
  background: #deebfa;
  border: 1px solid #ccddf2;
  box-shadow: inset 0 1px 4px #4577af08;
}
.sim-tabs button[aria-selected=true] {
  background: linear-gradient(125deg, #fff, #f4f9ff);
  color: #215eaa;
  box-shadow: 0 3px 10px #234f8510, inset 0 1px 0 #fff;
}
.sim-layout {
  background: #fff;
  border: 1px solid #d4e3f5;
  box-shadow: 0 8px 30px #4678ae08;
}
.mode-switch { background: #eaf1fb; }
.mode-switch button[aria-pressed=true] {
  background: linear-gradient(125deg, #224e88, #2b6fb1);
}
.field input,
.field select,
.field textarea {
  background: #fff;
  border-color: #b9cde4;
  box-shadow: inset 0 1px 3px #22477305;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: #5790cf;
  background: #fff;
}
.result {
  background:
    radial-gradient(ellipse at 100% 0%, #ffffffef 0, transparent 55%),
    linear-gradient(135deg, #e7f2ff, #f3f9ff 50%, #e5efff);
  border: 1px solid #fff;
  box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #b1cae754, 0 10px 30px #5079aa0d;
}
.result-value { color: #185491; }
.result-list { border-color: #c3d8ee; }
.compare > div {
  border-color: #ccdef1;
  background: linear-gradient(140deg, #fff, #f7fbff);
  box-shadow: inset 0 1px 0 #fff;
}
.verdict { border-left-color: #3479c0; background: #ffffffea; color: #254f7b; }
.verdict.warn { border-color: #b96719; background: #fffbf1; color: #634511; }
.choice span { background: #f6f9ff; border-color: #d2e0f1; }
.choice input:checked + span {
  color: #1e568f;
  border-color: #6698cf;
  background: linear-gradient(130deg, #f4f9ff, #dfedff);
  box-shadow: inset 0 1px 0 white;
}
input[type=checkbox], input[type=radio] { accent-color: #2566ad; }
.check-result {
  background: #f4f8ff;
  border: 1px solid #d6e5f6;
}
.next-step { border-top-color: #ccddf0; }
.reasons-section {
  background: #f6f9fd;
}
.reason-num { color: #527dac; }
.quote-mark { color: #5a86b8; }
.voice cite { border-top-color: #d4e2f2; }
.flow-band {
  position: relative;
  background: #1c456f;
  border-top: 1px solid #a9c8ed;
  border-bottom: 1px solid #16395f;
}
.flow-band .eyebrow, .flow-number { color: #c5def9; }
.flow-grid p { color: #d7e6f6; }
.flow-band .button {
  background: linear-gradient(125deg, #fff, #e9f3ff);
  color: #1e5289;
  border-color: #fff;
  box-shadow: inset 0 1px 0 white, 0 8px 24px #051b3329;
}
.flow-band .button:hover { background: white; color: #174474; }
.required { color: #1e5794; background: #e8f2ff; }
.summary-box {
  background: #f4f9ff;
  border-color: #cfdef1;
}
.contact-status, .copy-status { color: #1d5b99; }
.contact-status.error { color: #a63826; }
.store { background: #fff; }
.footer { background: #eaf2fc; border-top: 1px solid #d8e5f5; }
.mobile-cta {
  background: #fff;
  border-top-color: #d4e3f4;
  box-shadow: 0 -5px 26px #2b5f9b0d;
}
@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .header {
    background: rgb(250 253 255 / 82%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    backdrop-filter: blur(16px) saturate(130%);
  }
}
@media (max-width:680px) {
  .hero-car-main { border-radius: 24px; }
  .hero::before {
    background: linear-gradient(118deg, transparent 45%, #ffffff82 45.2%, transparent 64%, #ffffff9c 64.2%, transparent 65%);
  }
  .hero-badge { box-shadow: inset 0 1px 0 white, 0 6px 20px #3b74b51a; }
}
@media (prefers-reduced-transparency:reduce) {
  .header,.mobile-cta,.sim-layout,.car-card,.check-card,.contact-form,.voice,.reason { background:#f9fcff; backdrop-filter:none; -webkit-backdrop-filter:none; }
}
@media (forced-colors:active) {
  .button,.button.line,.button.light,.result,.car-card,.hero-badge { border:1px solid ButtonText; }
}

/* Reading and input surfaces remain opaque; glass belongs to hero/results/header. */
.sim-layout, .check-card, .contact-form, .reason, .voice, .car-card {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.check-card .purpose-options {
  padding-bottom: 24px;
  border-bottom: 1px solid #d4e3f5;
}
.hero-grid > *, .sim-layout > *, .check-layout > *, .contact-grid > *,
.two-fields > *, .choice-grid > *, .car-card > * { min-width: 0; }
.result-value, .result-list dd, .compare strong { overflow-wrap: anywhere; }
.field input, .field select, .field textarea { scroll-margin-block: 110px; }
@media(max-width:680px) {
  body { padding-bottom: calc(94px + env(safe-area-inset-bottom, 0px)); }
  .mobile-cta { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
  body.editing-input .mobile-cta { display: none; }
  .field input, .field select, .field textarea { font-size: 16px; }
  .result-value { font-size: clamp(32px, 10vw, 46px); }
  .check-result .button { white-space: normal; overflow-wrap: anywhere; }
  .text-button { min-height: 44px; }
  .hero-car-main img, .hero-car-small, .car-card img { height: auto; }
}
@media(max-width:380px) {
  .two-fields, .purpose-options .choice-grid { grid-template-columns: minmax(0, 1fr); }
  .car-card { grid-template-columns: minmax(0, 1fr); }
  .car-card img { margin: 0; aspect-ratio: 4/3; }
  .car-body { padding: 20px; }
  .result-list > div { flex-wrap: wrap; gap: 4px 12px; }
}