:root {
  color-scheme: light;
  --ink: #07194f;
  --ink-soft: #52617f;
  --green-950: #06164f;
  --green-900: #071b63;
  --green-800: #0a2b86;
  --green-700: #1246a4;
  --green-100: #dbe6ff;
  --green-50: #eef3ff;
  --coral: #d81936;
  --coral-soft: #fff0f2;
  --cream: #fbf5e9;
  --paper: #fffdf8;
  --line: #d9e0ee;
  --madani-blue: #071b63;
  --madani-royal: #1649a7;
  --madani-red: #d81936;
  --madani-yellow: #f7bc13;
  --body-blue-top: #0a2f8e;
  --shadow: 0 28px 80px rgba(3, 18, 70, 0.25);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { min-height: 100%; background: var(--madani-blue); }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 42%, rgba(24,73,167,.6), transparent 28%),
    radial-gradient(circle at 96% 66%, rgba(216,25,54,.22), transparent 24%),
    linear-gradient(180deg, var(--body-blue-top) 0%, #071b63 62%, #051449 100%);
  overflow-x: hidden;
}

button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }

.ambient {
  position: fixed;
  z-index: -1;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  filter: blur(2px);
  opacity: .45;
  pointer-events: none;
}
.ambient-one { left: -180px; top: 18%; background: radial-gradient(circle, rgba(31,82,190,.75), transparent 70%); }
.ambient-two { right: -220px; bottom: -100px; background: radial-gradient(circle, rgba(216,25,54,.5), transparent 70%); }

.site-header {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ink);
}

.brand {
  display: inline-flex;
  gap: 11px;
  align-items: center;
  text-decoration: none;
}
.brand-mark {
  width: 43px;
  height: 43px;
  border-radius: 13px;
  display: inline-grid;
  place-items: center;
  color: white;
  border: 1px solid rgba(255,255,255,.45);
  background: linear-gradient(135deg, var(--madani-blue) 0 69%, var(--madani-red) 69% 79%, var(--madani-yellow) 79% 88%, var(--madani-royal) 88% 100%);
  box-shadow: 0 8px 22px rgba(7,27,99,.22);
  flex: 0 0 auto;
}
.brand-mark svg { width: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.brand strong, .brand small { display: block; }
.brand strong { color: white; font-size: 14px; line-height: 1.15; letter-spacing: -.01em; text-shadow: 0 1px 8px rgba(4,19,68,.5); }
.brand small { margin-top: 3px; color: var(--madani-red); font-size: 10px; font-weight: 900; letter-spacing: .22em; }

.gps-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border: 1px solid rgba(7,27,99,.12);
  border-radius: 999px;
  background: rgba(255,253,250,.76);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  backdrop-filter: blur(12px);
}
.gps-dot { width: 8px; height: 8px; border-radius: 50%; background: #d69a3d; box-shadow: 0 0 0 4px rgba(214,154,61,.12); }
.gps-pill.is-ready .gps-dot { background: #2d9d78; box-shadow: 0 0 0 4px rgba(45,157,120,.12); }
.gps-pill.is-error .gps-dot { background: var(--coral); box-shadow: 0 0 0 4px rgba(232,92,74,.12); }
.gps-pill.is-loading .gps-dot { animation: gpsPulse 1.4s infinite; }

.page-shell {
  width: 100%;
  margin: 0;
  display: block;
}

.intro-panel {
  min-height: 720px;
  padding: 156px max(24px, calc((100vw - 1180px) / 2)) 94px;
  color: var(--ink);
  background:
    linear-gradient(90deg, transparent 0 48%, rgba(255,249,239,.05) 56%, rgba(255,249,239,.3) 100%),
    url("/images/hero-madani-rider-v3.webp") center / cover no-repeat;
}
.eyebrow, .step-kicker { margin: 0; color: var(--coral); font-size: 11px; font-weight: 850; letter-spacing: .15em; }
.intro-panel > .eyebrow, .intro-panel > h1, .intro-panel > .intro-copy, .intro-panel > .trust-note { width: min(48%, 570px); margin-left: auto; }
.intro-panel h1 { margin-top: 17px; margin-bottom: 16px; max-width: 610px; color: var(--ink); font-size: clamp(46px, 5.5vw, 74px); line-height: .98; letter-spacing: -.055em; text-wrap: balance; text-shadow: none; }
.intro-copy { max-width: 550px; margin-top: 0; margin-bottom: 0; color: #172858; font-size: 18px; line-height: 1.58; text-shadow: none; }

.intro-steps { max-width: 1180px; list-style: none; padding: 0; margin: 42px auto 22px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.intro-steps li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid rgba(7,27,99,.16); border-radius: 15px; color: #52617f; background: rgba(255,253,248,.84); box-shadow: 0 8px 28px rgba(7,27,99,.09); backdrop-filter: blur(12px); transition: .2s ease; }
.intro-steps li > span { width: 33px; height: 33px; display: grid; place-items: center; border: 1px solid rgba(7,27,99,.32); border-radius: 50%; font-size: 12px; font-weight: 800; }
.intro-steps strong, .intro-steps small { display: block; }
.intro-steps strong { font-size: 14px; }
.intro-steps small { margin-top: 3px; font-size: 12px; }
.intro-steps li.is-current { color: white; border-color: rgba(255,255,255,.25); background: var(--madani-blue); }
.intro-steps li.is-current > span { color: var(--madani-blue); border-color: var(--madani-yellow); background: var(--madani-yellow); }
.intro-steps li.is-complete > span { color: var(--madani-blue); border-color: var(--madani-yellow); background: var(--madani-yellow); }

.trust-note { display: flex; gap: 10px; align-items: flex-start; max-width: 500px; margin-top: 22px; padding: 10px 12px; color: #33436d; border: 1px solid rgba(7,27,99,.1); border-radius: 12px; background: rgba(255,253,248,.72); backdrop-filter: blur(10px); }
.trust-note svg { width: 20px; flex: 0 0 auto; fill: none; stroke: var(--madani-royal); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.trust-note p { margin: 0; font-size: 12px; line-height: 1.55; }
.location-privacy-note { margin: 16px 0 0; padding: 12px 14px; display: flex; align-items: flex-start; gap: 9px; border: 1px solid #d7e0f2; border-radius: 12px; color: var(--ink-soft); background: #f5f7ff; }
.location-privacy-note svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: var(--green-700); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.location-privacy-note p { margin: 0; font-size: 10px; line-height: 1.55; }
.location-privacy-note strong { color: var(--green-900); font-weight: 750; }

.flow-card {
  position: relative;
  z-index: 2;
  width: min(920px, calc(100% - 40px));
  min-height: 650px;
  margin: -58px auto 72px;
  padding: clamp(25px, 4vw, 46px);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius-xl);
  color: white;
  background:
    linear-gradient(145deg, rgba(7,27,99,.95), rgba(10,47,142,.92)),
    url("/images/workflow-kuala-lumpur.webp") center / cover no-repeat;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  overflow: hidden;
}
.flow-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: linear-gradient(90deg, var(--madani-blue) 0 36%, var(--madani-royal) 36% 55%, var(--madani-red) 55% 73%, var(--madani-yellow) 73% 88%, white 88%); }
.mobile-progress { display: none; }
.step-panel[hidden] { display: none; }
.flow-card .step-kicker { color: #ffd34f; }
.step-heading { display: flex; align-items: flex-start; gap: 17px; margin-bottom: 26px; }
.step-number { flex: 0 0 auto; color: #b8c7eb; font-size: 12px; font-weight: 800; letter-spacing: .08em; padding-top: 3px; }
.step-heading h2 { margin: 6px 0 7px; font-size: clamp(24px, 3vw, 32px); line-height: 1.12; letter-spacing: -.035em; }
.step-heading > div > p:last-child { margin: 0; color: #cfdbf5; font-size: 13px; line-height: 1.5; }

.problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-height: 230px; }
.problem-option { min-height: 96px; padding: 14px; color: var(--ink); border: 1px solid rgba(255,255,255,.76); border-radius: var(--radius-md); background: rgba(255,253,248,.96); display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: center; text-align: left; cursor: pointer; transition: border-color .18s, transform .18s, background .18s; }
.problem-option:hover { transform: translateY(-2px); border-color: var(--madani-yellow); }
.problem-option.is-selected { border-color: var(--madani-yellow); background: #fff8d9; box-shadow: inset 0 0 0 1px var(--madani-yellow); }
.problem-option-icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--green-700); background: var(--green-50); }
.problem-option.is-selected .problem-option-icon { color: var(--madani-blue); background: var(--madani-yellow); }
.problem-option-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.problem-option strong { display: block; font-size: 13px; line-height: 1.3; }
.problem-option small { display: block; margin-top: 4px; color: var(--ink-soft); font-size: 10.5px; line-height: 1.3; }
.loading-line { min-height: 96px; border-radius: var(--radius-md); background: linear-gradient(90deg,#eef1ef 25%,#f8faf9 50%,#eef1ef 75%); background-size: 220% 100%; animation: shimmer 1.4s infinite; }

.field-group { display: grid; gap: 7px; }
.field-group > span { color: white; font-size: 12px; font-weight: 750; }
.field-group em { color: #b8c7eb; font-style: normal; font-weight: 500; }
.field-group textarea { width: 100%; resize: vertical; min-height: 64px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); outline: none; line-height: 1.45; }
.field-group textarea:focus { border-color: var(--green-700); box-shadow: 0 0 0 3px rgba(29,107,96,.1); }
.field-group > small { justify-self: end; color: #b8c7eb; font-size: 10px; }
.compact-field { margin: 18px 0; }

.primary-button, .secondary-button, .text-button { border: 0; border-radius: 12px; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .16s, opacity .16s, background .16s; text-decoration: none; }
.primary-button { min-height: 49px; padding: 13px 19px; color: var(--madani-blue); background: var(--madani-yellow); box-shadow: 0 10px 24px rgba(247,188,19,.2); }
.primary-button:hover:not(:disabled) { transform: translateY(-1px); background: #ffd24e; }
.primary-button:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; }
.primary-button svg, .secondary-button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.secondary-button { min-height: 46px; padding: 11px 16px; color: var(--madani-blue); border: 1px solid #c6d2ee; background: #eef3ff; }
.text-button { min-height: 44px; padding: 9px 13px; color: white; background: transparent; }
.text-button:hover { background: rgba(255,255,255,.09); }
.full-button { width: 100%; }
.button-row { margin-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.location-state { min-height: 210px; padding: 24px; display: grid; grid-template-columns: auto 1fr; gap: 17px; align-content: center; color: var(--ink); border: 1px solid #d6e0f4; border-radius: var(--radius-lg); background: linear-gradient(145deg,#fffdf8,#edf3ff); position: relative; overflow: hidden; }
.location-state::after { content: ""; position: absolute; right: -48px; top: -55px; width: 170px; height: 170px; border: 1px solid rgba(29,107,96,.12); border-radius: 50%; box-shadow: 0 0 0 30px rgba(29,107,96,.04), 0 0 0 60px rgba(29,107,96,.025); }
.location-state.is-error { border-color: #f0c4ba; background: var(--coral-soft); }
.location-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; color: var(--green-700); background: white; box-shadow: 0 8px 23px rgba(25,83,76,.1); position: relative; z-index: 1; }
.location-icon svg { width: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.location-state.is-loading .location-icon { animation: locationPulse 1.5s infinite; }
.location-state.is-error .location-icon { color: var(--coral); }
.location-copy { position: relative; z-index: 1; }
.state-label { margin: 0; color: var(--green-700); font-size: 10px; font-weight: 850; letter-spacing: .12em; }
.location-state.is-error .state-label { color: var(--coral); }
.location-copy h3 { margin: 8px 0 6px; font-size: 19px; letter-spacing: -.02em; }
.location-copy > p:last-child { margin: 0; max-width: 350px; color: var(--ink-soft); font-size: 12px; line-height: 1.5; }
.accuracy-badge { grid-column: 2; width: fit-content; padding: 5px 8px; border-radius: 99px; color: var(--green-700); background: rgba(255,255,255,.78); font-size: 10px; font-weight: 800; position: relative; z-index: 1; }
.coordinate-card { margin: 12px 0; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink); border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.coordinate-card span, .coordinate-card strong { display: block; }
.coordinate-card span { color: var(--ink-soft); font-size: 10px; }
.coordinate-card strong { margin-top: 3px; font-size: 12px; font-variant-numeric: tabular-nums; }
.coordinate-card a { color: var(--green-700); font-size: 11px; font-weight: 800; }
.maps-fallback { margin-top: 12px; padding: 15px; display: grid; gap: 10px; color: var(--ink); border: 1px dashed #b9c8e8; border-radius: 13px; background: rgba(255,255,255,.94); }
.maps-fallback > div:first-child { display: grid; gap: 3px; }
.maps-fallback strong { font-size: 12px; }
.maps-fallback span,.maps-fallback label { color: var(--ink-soft); font-size: 10px; }
.maps-fallback label { font-weight: 750; }
.maps-link-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.maps-link-row input { min-width: 0; min-height: 46px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: white; outline: none; font-size: 11px; }
.maps-link-row input:focus { border-color: var(--green-700); box-shadow: 0 0 0 3px rgba(29,107,96,.1); }
.maps-fallback > p { margin: 0; color: var(--green-700); font-size: 10px; line-height: 1.45; }
.maps-fallback > p.is-error { color: var(--coral); }

.result-heading { margin-bottom: 18px; }
.search-loader { min-height: 310px; display: grid; place-items: center; align-content: center; gap: 22px; color: #d5def4; text-align: center; }
.radar { width: 88px; height: 88px; border: 1px solid #a9cec5; border-radius: 50%; display: grid; place-items: center; position: relative; box-shadow: 0 0 0 15px rgba(29,107,96,.05),0 0 0 30px rgba(29,107,96,.025); overflow: hidden; }
.radar::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 5px rgba(232,92,74,.15); }
.radar span { position: absolute; inset: 50% 50% 0; background: linear-gradient(90deg,rgba(29,107,96,.4),transparent); transform-origin: left top; animation: sweep 1.4s linear infinite; }
.search-loader p { margin: 0; font-size: 13px; }

.results-list { display: grid; gap: 11px; max-height: 440px; overflow: auto; padding-right: 3px; }
.result-card { padding: 16px; color: var(--ink); border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.result-card:first-child { border-color: var(--madani-yellow); background: linear-gradient(145deg,#fff,#fff9df); }
.result-top { display: flex; justify-content: space-between; gap: 12px; }
.result-top h3 { margin: 0; font-size: 15px; letter-spacing: -.01em; }
.result-top p { margin: 4px 0 0; color: var(--ink-soft); font-size: 11px; }
.distance-pill { flex: 0 0 auto; height: fit-content; padding: 5px 8px; border-radius: 999px; color: var(--green-700); background: var(--green-50); font-size: 10px; font-weight: 850; }
.result-meta { margin: 12px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.result-meta span { padding: 5px 8px; border-radius: 7px; color: #58706c; background: #f1f4f2; font-size: 10px; }
.result-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.result-footer small { color: var(--ink-soft); font-size: 10px; }
.whatsapp-button { min-height: 40px; padding: 9px 13px; color: white; border-radius: 10px; background: #188b5b; font-size: 11px; font-weight: 850; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.whatsapp-button svg { width: 16px; fill: currentColor; }

.empty-state { padding: 36px 20px 24px; text-align: center; }
.empty-icon { width: 70px; height: 70px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 22px; color: var(--coral); background: var(--coral-soft); }
.empty-icon svg { width: 32px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.empty-state h3 { margin: 0 0 8px; font-size: 21px; }
.empty-state p { max-width: 420px; margin: 0 auto; color: #cfdbf5; font-size: 13px; line-height: 1.55; }
.empty-actions { margin-top: 22px; display: flex; justify-content: center; gap: 8px; }
.support-note { margin: 14px 0 0; padding: 11px 13px; border-radius: 10px; color: #d4def4; background: rgba(255,255,255,.08); font-size: 10px; line-height: 1.45; }
.results-back { margin-top: 8px; }

footer { position: relative; width: 100%; margin: 0; padding: 30px max(20px, calc((100vw - 1180px) / 2)); display: flex; justify-content: space-between; color: rgba(255,255,255,.8); background: #041344; font-size: 10px; }
footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--madani-blue), var(--madani-royal), var(--madani-red), var(--madani-yellow), white); }
footer p { margin: 0; }
footer a { text-decoration: none; }
.footer-identity { display: grid; gap: 5px; }
.footer-legal { line-height: 1.5; }
.footer-actions { display: flex; align-items: center; gap: 14px; }
.footer-actions time { font-variant-numeric: tabular-nums; }

.toast { position: fixed; z-index: 20; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: min(420px,calc(100% - 32px)); padding: 12px 16px; border-radius: 12px; color: white; background: var(--green-900); box-shadow: 0 14px 40px rgba(0,0,0,.2); font-size: 12px; font-weight: 700; }
.toast.is-error { background: #a33d32; }

.simple-page { display: grid; place-items: center; padding: 24px; }
.simple-card { width: min(440px,100%); padding: 40px; border-radius: 24px; background: var(--paper); box-shadow: var(--shadow); text-align: center; }
.simple-card .brand-mark { margin: 0 auto 22px; }
.simple-card h1 { margin: 10px 0; }
.simple-card > p:not(.eyebrow) { margin: 0 0 24px; color: var(--ink-soft); }

@keyframes gpsPulse { 50% { box-shadow: 0 0 0 8px rgba(214,154,61,0); } }
@keyframes shimmer { to { background-position: -220% 0; } }
@keyframes locationPulse { 50% { transform: translateY(-3px); box-shadow: 0 11px 30px rgba(25,83,76,.18); } }
@keyframes sweep { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .intro-panel {
    min-height: 560px;
    padding: 140px max(20px, calc((100vw - 720px) / 2)) 92px;
    text-align: left;
    background:
      linear-gradient(90deg, rgba(251,245,233,0) 0 39%, rgba(251,245,233,.72) 56%, rgba(251,245,233,.95) 100%),
      url("/images/hero-madani-rider-v3.webp") center top / 100% auto no-repeat,
      var(--cream);
  }
  .intro-panel > .eyebrow, .intro-panel > h1, .intro-panel > .intro-copy { width: min(54%, 430px); margin-left: auto; margin-right: 0; }
  .intro-panel h1 { font-size: clamp(32px,6vw,52px); }
  .intro-copy { font-size: 14px; line-height: 1.5; }
  .intro-steps { display: none; }
  .trust-note { display: none; }
  .flow-card { width: min(720px, calc(100% - 32px)); min-height: 610px; margin-top: -110px; }
  .mobile-progress { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-bottom: 30px; }
  .mobile-progress span { height: 4px; border-radius: 99px; background: rgba(255,255,255,.2); }
  .mobile-progress span.is-active { background: var(--madani-yellow); }
}

@media (min-width: 561px) and (max-width: 700px) {
  .flow-card { margin-top: -200px; }
}

@media (max-width: 560px) {
  body { background: var(--body-blue-top); }
  .site-header { width: min(100% - 24px,1180px); }
  .site-header { padding: 15px 0; }
  .site-header .brand { padding: 4px 8px 4px 4px; border-radius: 14px; background: rgba(7,27,99,.78); backdrop-filter: blur(8px); }
  .brand-mark { width: 38px; height: 38px; border-radius: 11px; }
  .brand strong { font-size: 12px; }
  .gps-pill { padding: 8px 10px; font-size: 10px; }
  .intro-panel {
    min-height: 0;
    padding: 102px 16px 28px;
    background:
      linear-gradient(var(--body-blue-top), var(--body-blue-top)) center bottom / 100% 28px no-repeat,
      linear-gradient(90deg, rgba(251,245,233,0) 0 36%, rgba(251,245,233,.74) 53%, rgba(251,245,233,.97) 100%),
      url("/images/hero-madani-rider-v3.webp") center top / 100% auto no-repeat,
      var(--body-blue-top);
  }
  .intro-panel > .eyebrow, .intro-panel > h1, .intro-panel > .intro-copy { width: 56%; }
  .intro-panel .eyebrow { font-size: 7px; letter-spacing: .1em; }
  .intro-panel h1 { margin-top: 8px; margin-bottom: 8px; font-size: clamp(23px,6.6vw,26px); line-height: 1; }
  .intro-copy { color: #203363; font-size: clamp(9.5px,2.5vw,10.5px); line-height: 1.45; }
  .trust-note { display: none; }
  .flow-card { width: calc(100% - 24px); min-height: auto; margin: 0 auto 45px; padding: 22px 17px 24px; border-radius: 22px; }
  .step-heading { gap: 12px; margin-bottom: 21px; }
  .step-heading h2 { font-size: 23px; }
  .problem-grid { grid-template-columns: 1fr; min-height: 0; }
  .problem-option { min-height: 78px; }
  .problem-option small { font-size: 10px; }
  .location-state { min-height: 230px; padding: 20px; grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .location-copy > p:last-child { max-width: 280px; }
  .accuracy-badge { grid-column: 1; }
  .button-row { align-items: stretch; }
  .button-row .primary-button { flex: 1; }
  .maps-link-row { grid-template-columns: 1fr; }
  .result-footer { align-items: flex-end; }
  .results-list { max-height: none; }
  .empty-actions { flex-direction: column; }
  footer { width: 100%; padding: 25px 16px 22px; gap: 12px; }
}

@media (max-width: 560px) {
  footer { flex-direction: column; }
  .footer-actions { width: 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition: none !important; }
}