/* Desktop composition from Figma 51:6501, 1512 × 771. */
.home-shell:not([data-home-layout]) {
  width: min(1080px, calc(100vw - 96px), calc((100dvh - 140px) * 1.7142857));
  min-width: 780px;
  min-height: 100dvh;
}
.home-shell:not([data-home-layout]) .topbar { flex: 0 0 78px; border-bottom: 0; }
.scene-home { width: 100%; padding: 0; }
.scene-hero { position: relative; width: 100%; aspect-ratio: 12 / 7; border: 1px solid #dce2d4; border-radius: 16px; overflow: hidden; isolation: isolate; container-type: inline-size; background: #f6f7f1; }
.scene-illustration { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scene-hero::after { content: ''; position: absolute; inset: 66% 0 0; z-index: 0; background: linear-gradient(transparent, #f6f7f1d9); pointer-events: none; }
.scene-heading { position: absolute; top: 2.5%; left: 0; right: 0; z-index: 1; text-align: center; }
.scene-heading p { margin: 0 0 10px; font-size: clamp(11px, 1.12cqw, 13px); color: #738073; letter-spacing: .8px; }
.scene-heading h1 { margin: 0; font-size: clamp(28px, 3.34cqw, 36px); line-height: 1.35; font-weight: 750; letter-spacing: -.8px; color: #203f34; }
.scene-heading h1 span { margin-left: .65em; }
.scene-action { position: absolute; bottom: 4.4%; left: 50%; transform: translateX(-50%); width: 27.4%; z-index: 2; }
.scene-invitation { position: relative; z-index: 2; padding: 16px 12px; margin: 0 0 28px; border-radius: 15px; background: #fffef7f5; color: #294b3d; font-size: clamp(13px, 1.48cqw, 16px); font-weight: 550; line-height: 1.65; text-align: center; }
.scene-invitation::after { content: ''; position: absolute; bottom: -9px; left: 49%; width: 18px; height: 18px; background: #fffef7; transform: rotate(45deg); border-radius: 0 0 4px 0; }
.scene-cta { position: relative; }
.scene-draw.btn.primary { position: relative; z-index: 3; width: 100%; min-height: 0; height: clamp(56px, 6.86cqw, 74px); padding: 12px; gap: 14px; border: 0; border-radius: 14px; background: #294338; color: #fffef6; box-shadow: none; font-size: clamp(18px, 2.04cqw, 22px); font-weight: 550; white-space: nowrap; transform: none; }
.scene-draw.btn.primary:hover:not(:disabled) { background: #345847; box-shadow: none; transform: none; }
.scene-draw.btn.primary:active:not(:disabled) { background: #1f3b30; transform: none; }
.scene-draw.btn.primary:disabled { opacity: 1; cursor: wait; background: #486253; }
.scene-draw.btn.primary:focus-visible { outline: 3px solid #92aa72; outline-offset: 5px; }
.scene-draw.btn.primary .icon { width: 30px; height: 30px; color: inherit; }
.scene-particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.scene-flying-card { display: block; position: absolute; top: 0; width: 36px; height: 47px; pointer-events: none; will-change: transform, opacity; }
.scene-flying-card svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 2px #24453216); }
.scene-handoff-card { left: 50%; }
.scene-steps { margin: 0; padding: 23px 5.3% 14px; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; color: #294b3d; font-size: 14px; font-weight: 600; }
.scene-steps li { display: flex; gap: 12px; align-items: center; }
.scene-steps li span { font-family: 'SFMono-Regular', Consolas, monospace; color: #87987a; font-size: 13px; font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .scene-particles { display: none; } }