/* Concept A: Address first. Split layout mirroring the live C page:
   home image on the left (top band on phones), white form panel on the right. */

.a-layout { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; background: #fff; }

.a-media {
  position: relative; overflow: hidden; background: #cbd5e1;
  height: 28vh; min-height: 190px; max-height: 300px;
  transition: height .55s ease, max-height .55s ease;
}
body[data-has-address] .a-media { height: 36vh; min-height: 240px; max-height: 360px; }
.a-generic { filter: saturate(.75) brightness(.97); }
.a-house { opacity: 0; transition: opacity .7s ease; }
body[data-has-address] .a-house { opacity: 1; }
.a-media-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 23, 42, .18) 0%, rgba(15, 23, 42, 0) 30%, rgba(15, 23, 42, 0) 62%, rgba(15, 23, 42, .32) 100%); pointer-events: none; }
.a-chip {
  position: absolute; left: 12px; bottom: 12px; z-index: 3; max-width: calc(100% - 24px);
  display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px;
  background: rgba(255, 255, 255, .96); border-radius: 999px; box-shadow: 0 8px 24px rgba(2, 32, 71, .18);
  animation: shf-in .45s ease both;
}
.a-chip-icon { width: 30px; height: 30px; border-radius: 50%; background: var(--blue); flex: none; display: grid; place-items: center; }
.a-chip-icon::after {
  content: ""; width: 14px; height: 14px; background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C7.9 2 4.5 5.4 4.5 9.5c0 5.3 7.5 12.5 7.5 12.5s7.5-7.2 7.5-12.5C19.5 5.4 16.1 2 12 2zm0 10.2a2.7 2.7 0 1 1 0-5.4 2.7 2.7 0 0 1 0 5.4z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C7.9 2 4.5 5.4 4.5 9.5c0 5.3 7.5 12.5 7.5 12.5s7.5-7.2 7.5-12.5C19.5 5.4 16.1 2 12 2zm0 10.2a2.7 2.7 0 1 1 0-5.4 2.7 2.7 0 0 1 0 5.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.a-chip strong { display: block; font-size: 14px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-chip small { display: block; font-size: 12px; color: var(--muted); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-chip > span:last-child { min-width: 0; }
.a-media .illus-tag { top: 12px; bottom: auto; right: 12px; max-width: 46%; text-align: right; }

.a-panel { display: flex; flex-direction: column; width: 100%; max-width: 560px; margin: 0 auto; padding: 16px 20px 20px; }
.a-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.a-body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 22px 0 28px; }
.a-view { display: flex; flex-direction: column; gap: 14px; }
.a-title { font-size: 24px; line-height: 1.2; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.a-title-addr { font-weight: 400; }
.a-sub { font-size: 15px; color: var(--muted); }
.a-form { display: flex; flex-direction: column; gap: 0; margin-top: 4px; }
.a-form .field-error, .a-form .field-hint { margin-top: 8px; }
.a-submit { margin-top: 14px; }
.a-stack { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.back-btn { align-self: flex-start; }

.q-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.q-title { font-size: 17px; font-weight: 700; line-height: 1.3; }
.q-choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.q-choices .choice { min-height: 52px; font-size: 15px; }
@media (min-width: 420px) and (max-width: 767px), (min-width: 1100px) { .q-choices { grid-template-columns: 1fr 1fr; } }

.a-footer { border-top: 1px solid var(--line); padding-top: 14px; }

@media (min-width: 768px) {
  .a-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .a-media, body[data-has-address] .a-media { position: sticky; top: 0; height: 100vh; height: 100dvh; max-height: none; min-height: 0; }
  .a-panel { max-width: 640px; padding: 40px 48px 28px; min-height: 100vh; }
  .a-title { font-size: 30px; }
  .a-chip { left: 20px; bottom: 20px; padding: 10px 18px 10px 10px; }
  .a-chip strong { font-size: 15px; }
  .a-media .illus-tag { right: 20px; top: 20px; }
}
@media (min-width: 1024px) {
  .a-title { font-size: 34px; }
}