/* Result-first landing and setup guide; reuses the site's light/dark tokens. */
.hero--outcome { display:block; min-height:0; max-height:none; overflow:visible; padding: clamp(2rem,5vw,4rem) 0; }
.hero--outcome .hero-grid { grid-template-columns: 1.2fr .8fr; gap: 3rem; align-items: center; }
.hero--outcome h1 { max-width: 720px; font-size: clamp(2.1rem,4.2vw,3.4rem); line-height: 1.12; }
.hero--outcome .hero-actions { display:flex; flex-wrap:wrap; gap:.75rem; }
.hero--outcome .hero-desc { max-width: 620px; }
.setup-note { color:var(--muted); font-size:.95rem; max-width:42rem; margin:1.25rem 0; }
.setup-note strong { color:var(--text); }
.outcome-preview { margin:0; background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:1rem; }
.outcome-preview img { height:360px; width:100%; object-fit:contain; border-radius:12px; }
.outcome-preview figcaption { color:var(--muted); font-size:.85rem; text-align:center; padding-top:.75rem; }
.scenario-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:1.5rem 0; }
.scenario-card { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:16px; background:var(--card); padding:1.5rem; }
.scenario-card h3 { color:var(--text); font-size:1.2rem; line-height:1.35; margin:.3rem 0 .6rem; }
.scenario-card p { color:var(--muted); margin:0 0 1rem; }
.scenario-card .scenario-link { margin-top:auto; color:var(--accent); font-weight:600; }
.scenario-number { color:var(--accent); font:600 .8rem var(--font-mono); }
.connection-note { border-left:3px solid var(--accent); padding:1rem 1.25rem; background:var(--surface); border-radius:0 12px 12px 0; margin:1.25rem 0; }
.connection-note p { margin:.35rem 0; }
.guide-step { border-top:1px solid var(--line); padding:1.5rem 0; }
.guide-step h2 { margin-top:0; }
.guide-check { color:var(--accent); font-weight:600; }
.download-top .page-hero { padding-top:2rem; padding-bottom:1.5rem; }
.download-top .page-hero h1 { margin-top:0; }
.transfer-flow .transfer-kbd { font-size:clamp(1rem,2.4vw,1.6rem); }
@media(max-width:760px) {
  .hero--outcome .hero-grid { grid-template-columns:1fr; gap:1.5rem; }
  .hero--outcome .container { width:calc(100% - 2rem); }
  .hero--outcome .hero-actions .btn { flex:1 1 200px; }
  .outcome-preview img { height:260px; }
  .scenario-grid { grid-template-columns:1fr; }
  .scenario-card { padding:1.25rem; }
}
@media(prefers-reduced-motion:reduce) { .hero--outcome *, .scenario-grid * { animation:none!important; transition:none!important; } }