/* The instructions themselves are the interface: two visible steps per phone, no panels or carousels. */
.guide-page main { max-width: 640px; }
.guide-page .lead { margin-bottom: 14px; }
.guide-page h2 { margin: 24px 0 2px; font-size: 17px; font-weight: 600; }
.guide-page .native-action { margin: 12px 0 18px; }
.guide-page .platform-instruction { margin: 0 0 10px; color: var(--ink-2); font-size: 14px; }
.guide-page .steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 0; margin: 0; list-style: none; }
.guide-page .step-panel { display: grid; grid-template-rows: subgrid; grid-row: span 2; min-width: 0; }
.guide-page .step-panel h3 { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.35; }
.guide-page .step { margin: 0; }
.guide-page .phone-frame { position: relative; max-width: 212px; margin: 0 auto; }
.guide-page .capture { position: relative; display: block; overflow: hidden; border: 2px solid var(--ink); border-radius: var(--radius-md); background: var(--surface-2); }
.guide-page .capture img { display: block; width: 100%; height: auto; }
.guide-page .highlight { position: absolute; border: 4px solid var(--accent); border-radius: var(--radius-pill); box-shadow: 0 0 0 999px var(--guide-scrim); pointer-events: none; }
.guide-page .target-number { position: absolute; z-index: 1; transform: translateY(-50%); display: grid; place-items: center; width: 36px; height: 36px; border: 2px solid var(--on-accent); border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font-size: 20px; font-weight: 600; pointer-events: none; }
.guide-page .target-pointer { position: absolute; left: calc(100% + 4px); top: calc(50% - 8px); width: 20px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.guide-page .target-number.above { transform: none; }
.guide-page .target-number.above .target-pointer { left: calc(50% - 10px); top: calc(100% + 4px); transform: rotate(90deg); }
.guide-page .finish-step { margin: 8px 0 0; color: var(--ink-2); font-size: 13px; }
.guide-page #computer { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 4px; }
.guide-page #computer p { font-size: 14px; color: var(--ink-2); }
@media (min-width: 550px) {
  .guide-page .steps { column-gap: 24px; }
}