/* ── 02 · Quick answer ────────────────────────────────────
   Question as H2, a 50-word answer, three facts, and a labelled example site plan (inline SVG). */
.qa { padding-block: var(--msp-section-y); background: #fff; }
.qa__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(40px, 6vw, 104px);
}
.qa__title { max-width: 13ch; margin-top: 20px; font-size: var(--msp-fs-h2-alt); line-height: 1.08; }
.qa__answer {
  max-width: 46ch; margin-top: 28px;
  font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); line-height: 1.6;
  color: var(--msp-secondary);
}
.qa__answer strong { font-weight: 500; }

.qa__facts { margin: 36px 0 0; border-top: 1px solid var(--msp-divider); }
.qa__fact { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; padding-block: 20px; border-bottom: 1px solid var(--msp-divider); }
.qa__fact dt { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 500; color: var(--msp-secondary); }
.qa__fact dd { margin: 0; font-size: 16px; line-height: 1.6; }
.qa__fact-icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--msp-surface); color: var(--msp-secondary); }
.qa__fact-icon .icon { width: 20px; height: 20px; }

.qa__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; font-weight: 500; color: var(--msp-accent); }
.qa__link .icon { width: 18px; height: 18px; transition: transform .3s var(--msp-ease-out); }
.qa__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.qa__link:hover .icon { transform: translateX(3px); }

/* Example plan card */
.qa-plan { position: relative; margin: 0; padding: clamp(16px, 2.5vw, 32px); padding-top: clamp(28px, 3vw, 40px); border-radius: var(--msp-radius-lg); background: var(--msp-surface); }
.qa-plan__badge {
  position: absolute; top: -18px; left: clamp(16px, 2.5vw, 32px);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--msp-radius-pill);
  background: var(--msp-primary); color: var(--msp-secondary);
  font-size: 14px; font-weight: 600;
  box-shadow: 0 10px 24px -12px rgb(8 17 25 / .45);
}
.qa-plan__badge .icon { width: 18px; height: 18px; }
.qa-plan__svg { width: 100%; height: auto; border-radius: 14px; background: #fff; box-shadow: 0 24px 48px -30px rgb(8 17 25 / .35); }
.qa-plan__legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin-top: 24px; font-size: 15px; color: var(--msp-secondary); font-weight: 400; }
.qa-plan__legend li { display: flex; align-items: center; gap: 10px; }
.qa-plan__n { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--msp-primary); font-size: 13px; font-weight: 600; }
.qa-plan figcaption { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--msp-divider); font-size: 13.5px; line-height: 1.5; color: var(--msp-muted); }

/* SVG drawing */
.qa-plan__svg text { font-family: var(--msp-font); }
.sp-street { fill: #E3E8EB; }
.sp-street-line { stroke: #fff; stroke-width: 2; stroke-dasharray: 14 10; }
.sp-lot { fill: #fff; fill-opacity: .55; stroke: var(--msp-secondary); stroke-width: 2; stroke-dasharray: 14 5 3 5; }
.sp-setback { fill: rgb(155 213 5 / .08); stroke: var(--msp-accent); stroke-width: 1.4; stroke-dasharray: 5 4; }
.sp-tree circle { fill: #E8F6C6; stroke: #8DBF1C; stroke-width: 1.4; }
.sp-shed { fill: #fff; stroke: var(--msp-secondary); stroke-width: 1.5; }
.sp-drive { fill: #CED6DB; }
.sp-house { fill: var(--msp-secondary); }
.sp-ridge { stroke: rgb(255 255 255 / .22); stroke-width: 1.2; }
.sp-deck { fill: var(--msp-primary); stroke: var(--msp-secondary); stroke-width: 1.5; }
.sp-board { stroke: rgb(8 17 25 / .25); stroke-width: 1; }
.sp-label { font-size: 11px; font-weight: 600; letter-spacing: .12em; }
.sp-label--light { fill: #fff; }
.sp-label--dark { fill: var(--msp-secondary); }
.sp-label--muted { fill: #7D8892; }
.sp-dim path { fill: none; stroke: var(--msp-secondary); stroke-width: 1; }
.sp-dim-text text { font-size: 13px; font-weight: 600; fill: var(--msp-secondary); paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.sp-north circle { fill: #fff; stroke: var(--msp-secondary); stroke-width: 1.4; }
.sp-north path { fill: var(--msp-secondary); }
.sp-north text { font-size: 12px; font-weight: 700; fill: var(--msp-secondary); }
.sp-scale__dark { fill: var(--msp-secondary); }
.sp-scale__light { fill: #fff; stroke: var(--msp-secondary); stroke-width: 1; }
.sp-scale text { font-size: 10px; font-weight: 600; fill: var(--msp-secondary); }
.sp-marker circle { fill: var(--msp-primary); stroke: #fff; stroke-width: 2.5; }
.sp-marker text { font-size: 13px; font-weight: 700; fill: var(--msp-secondary); text-anchor: middle; dominant-baseline: central; }

/* Reveal: the new deck and markers arrive after the card (transform/opacity only). */
.js-motion .qa-plan .sp-new, .js-motion .qa-plan .sp-marker { transform-box: fill-box; transform-origin: center; transition: opacity .6s var(--msp-ease-out), transform .6s var(--msp-ease-out); }
.js-motion .qa-plan:not(.is-revealed) .sp-new { opacity: 0; transform: scale(.85); }
.js-motion .qa-plan:not(.is-revealed) .sp-marker { opacity: 0; transform: scale(.4); }
.js-motion .qa-plan .sp-new { transition-delay: .5s; }
.js-motion .qa-plan .sp-marker { transition-delay: calc(.8s + var(--m) * 90ms); }

@media (max-width: 1023px) {
  .qa__grid { grid-template-columns: 1fr; }
  .qa__title { max-width: 16ch; }
}
@media (max-width: 599px) {
  .qa__fact { grid-template-columns: 1fr; gap: 8px; }
  .qa-plan__legend { grid-template-columns: 1fr; }
  /* Bigger markers and numbers when the drawing is scaled down on phones. */
  .sp-marker circle { r: 19px; }
  .sp-marker text { font-size: 19px; }
  .sp-dim-text text { font-size: 17px; }
  .sp-label { font-size: 13px; }
}