/* Selected Log a Match page only. The real capture already contains a phone frame. */
.plan-match-demonstration { margin-bottom: 64px; }
.plan-demo-layout { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 320px); justify-content: center; align-items: center; gap: 64px; }
.plan-demo-steps { display: flex; flex-direction: column; gap: 12px; }
.plan-demo-steps[hidden], .plan-demo-fallback[hidden], .plan-demo-screens > [hidden] { display: none; }
.plan-demo-steps button { --step-color: var(--blue); position: relative; display: flex; align-items: center; gap: 16px; width: 100%; min-height: 60px; padding: 12px 16px; border: 1px solid var(--border); border-left: 3px solid var(--step-color); border-radius: 8px; text-align: left; background: linear-gradient(110deg, color-mix(in srgb, var(--step-color) 6%, transparent), var(--bg-elevated)); color: var(--muted); font: inherit; font-size: 19px; line-height: 1.4; cursor: pointer; }
.plan-demo-steps button + button::before { content: ''; position: absolute; left: 31px; top: -13px; width: 1px; height: 12px; background: var(--border-strong); }
.plan-demo-number { display: grid; place-items: center; flex: 0 0 30px; height: 30px; box-sizing: border-box; border: 1px solid var(--step-color); color: var(--step-color); border-radius: 50%; font-size: 14px; }
.plan-demo-steps button:nth-child(4) { --step-color: var(--gold); }
.plan-demo-steps button:last-child { --step-color: var(--teal); }
.plan-demo-steps button:hover { color: var(--text); background: var(--surface); }
.plan-demo-steps button[aria-selected="true"] { color: var(--text); }
.plan-demo-steps button[aria-selected="true"] .plan-demo-number { color: var(--step-color); border-color: var(--step-color); }
.plan-demo-steps button:focus-visible, .plan-demo-screens > [role="tabpanel"]:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
.plan-demo-screens { min-width: 0; }
.plan-demo-screens figure { margin: 0; width: 100%; }
.plan-demo-screens img { display: block; width: 100%; height: auto; border: 0; box-shadow: none; border-radius: 0; }
.plan-demo-screens figcaption { margin-top: 16px; color: var(--muted); text-align: center; font-size: 13px; line-height: 1.6; min-height: 42px; }
.plan-demo-placeholder, .plan-demo-outside { display: flex; flex-direction: column; justify-content: center; align-items: center; box-sizing: border-box; aspect-ratio: 675 / 1380; padding: 24px; border-radius: 36px; text-align: center; background: var(--surface); }
.plan-demo-placeholder { border: 1px dashed var(--border-strong); }
.plan-demo-placeholder span, .plan-demo-outside span { font-size: 19px; font-weight: 600; }
.plan-demo-placeholder p, .plan-demo-outside p { margin: 12px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.plan-demo-outside svg { width: 56px; height: 56px; margin-bottom: 24px; color: var(--gold); }
.plan-demo-fallback { margin: 0; padding-left: 24px; line-height: 2.8; }
@media (max-width: 720px) {
  .plan-demo-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .plan-demo-navigation { width: min(400px, 100%); justify-self: center; }
  .plan-demo-screens { width: min(300px, 100%); justify-self: center; }
  .plan-demo-steps { gap: 6px; }
  .plan-demo-steps button { min-height: 48px; padding: 8px 12px; font-size: 17px; }
  .plan-demo-steps button + button::before { left: 27px; top: -7px; height: 6px; }
  .plan-match-demonstration { margin-bottom: 48px; }
}

/* Reserve room so the selected card can move without causing overflow. */
.plan-demo-steps { padding-right: 18px; }
.plan-demo-steps button { box-sizing: border-box; }
.plan-demo-steps button[aria-selected="true"] { transform: translateX(18px); }

/* Move smoothly in both directions as the active step changes. */
.plan-demo-steps button { transform: translateX(0); transition: transform 320ms cubic-bezier(.22, 1, .36, 1), background-color 220ms ease, border-color 220ms ease, color 220ms ease; }
.plan-demo-steps button[aria-selected="true"] { transform: translateX(18px); }
@media (prefers-reduced-motion: reduce) {
  .plan-demo-steps button { transition: none; }
}

.plan-demo-screens figcaption a { display: inline-block; margin-top: 10px; color: var(--teal); text-decoration: underline; text-underline-offset: 4px; }

/* All states share a grid cell: the longest caption reserves space from the start. */
.plan-demo-screens { display: grid; align-items: start; }
.plan-demo-screens > [role="tabpanel"] { grid-area: 1 / 1; min-width: 0; align-self: start; }
.plan-demo-screens > [role="tabpanel"][hidden] { display: block; visibility: hidden; pointer-events: none; }