/* Colors come from theme.css (--bg --surface --text --muted --border --brand --on-brand --link --glass); --mo-* below are aliases set there. */
/* ---- Hero (spec 4.6): ring locks, lens passes the invoice, money flows, ends on the tagline. ~2.7 s. ---- */
.mo-hero{background:transparent;color:var(--mo-ink);font-family:Manrope,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.mo-hero *,.mo-hero *::before,.mo-hero *::after{box-sizing:border-box}
.mo-hero__inner{max-width:1120px;margin:0 auto;padding:32px 16px 40px;display:grid;gap:28px;align-items:center}
.mo-hero__title{font-size:clamp(2rem,8vw,3.5rem);line-height:1.08;margin:0 0 12px;font-weight:800;letter-spacing:-.02em}
.mo-hero__sub{font-size:1.0625rem;line-height:1.5;margin:0 0 20px;color:var(--mo-muted);max-width:34em}
.mo-hero__cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.mo-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:12px;font-weight:700;font-size:1rem;text-decoration:none;border:2px solid var(--mo-accent);color:var(--mo-accent);background:transparent}
.mo-btn--primary{background:var(--mo-accent);color:var(--mo-accent-ink)}
.mo-btn:hover{filter:brightness(1.08)}
.mo-hero__signin{margin:14px 0 0;font-size:1rem;color:var(--mo-muted)}
.mo-stage .mo-hero__signin{margin:12px 0 0;font-size:.875rem}
.mo-hero__signin a{color:var(--mo-accent);font-weight:700}
.mo-hero a:focus-visible,.mo-tour a:focus-visible,.mo-tour button:focus-visible,.mo-tour [tabindex]:focus-visible{outline:3px solid var(--mo-focus);outline-offset:3px;border-radius:8px}

.mo-stage{position:relative;background:var(--mo-card);border:1px solid var(--mo-line);border-radius:20px;padding:var(--stage-pad,20px);overflow:hidden;box-shadow:var(--shadow-hero)}
@media (min-width:700px){.mo-stage{--stage-pad:28px}}
/* header bar: 44 px dimensional mark (spans the two lines) + store and invoice, status pill on the right */
.mo-bar{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;margin:0 0 16px}
.mo-mark{flex:none;width:44px;height:44px}
.mo-bar__id{flex:1 1 150px;min-width:0;font-weight:800;font-size:.9375rem;line-height:1.3}
.mo-bar__id span{display:block;font-weight:500;font-size:.875rem;color:var(--mo-muted)}
.mo-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;font-weight:800;font-size:.875rem;white-space:nowrap;color:var(--mo-ink);background:color-mix(in srgb,var(--mo-accent) 16%,var(--mo-card));border:1px solid color-mix(in srgb,var(--mo-accent) 45%,var(--mo-card))}
.mo-pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--seg-4)}

/* timeline: a 2 px line down the left joins the four rows */
.mo-flow{list-style:none;margin:0;padding:0 0 0 22px;display:grid;gap:12px;position:relative}
.mo-flow::before{content:"";position:absolute;left:5px;top:18px;bottom:18px;width:2px;background:var(--mo-line);border-radius:1px}
.mo-step{position:relative;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:6px 12px;padding:10px 14px;border:1px solid var(--mo-line);border-left:4px solid var(--seg);border-radius:12px;background:var(--mo-bg)}
.mo-step::before{content:"";position:absolute;left:-22px;top:14px;width:12px;height:12px;border-radius:50%;background:var(--seg);box-shadow:0 0 0 3px var(--mo-card)}
.mo-step--invoice{--seg:var(--seg-1)}.mo-step--payment{--seg:var(--seg-2)}.mo-step--fee{--seg:var(--seg-3)}.mo-step--deposit{--seg:var(--seg-4)}
/* the deposit row is the climax: stronger border, green surface tint, 22px bold amount */
.mo-step--deposit{border:2px solid color-mix(in srgb,var(--seg-4) 75%,var(--mo-card));border-left:4px solid var(--seg);background:color-mix(in srgb,var(--mo-accent) 13%,var(--mo-card))}
.mo-step--deposit .mo-step__amt.is-fig{font-size:1.375rem;line-height:1.2;font-weight:800}
.mo-step__main{flex:1 1 170px;min-width:0}
.mo-step__name{display:block;font-weight:700;font-size:.9375rem}
.mo-step__meta{display:block;font-weight:500;font-size:.875rem;color:var(--mo-muted)}
.mo-step__side{flex:0 1 auto;max-width:100%;text-align:right;margin-left:auto}
.mo-step__amt{display:block;font-variant-numeric:tabular-nums;font-weight:800;font-size:1rem}
.mo-step__when{display:block;font-size:.875rem;font-weight:500;color:var(--mo-muted);white-space:nowrap}
.mo-step__badge{display:inline-block;margin-top:4px;padding:2px 10px;border-radius:999px;font-size:.875rem;font-weight:800;color:var(--mo-ink);background:color-mix(in srgb,var(--mo-accent) 14%,var(--mo-card));border:1px solid color-mix(in srgb,var(--mo-accent) 40%,var(--mo-card))}
.mo-step--deposit .mo-step__side{text-align:right}
.mo-lens{position:absolute;left:0;top:0;width:86px;height:86px;border-radius:50%;border:3px solid var(--mo-glass);background:color-mix(in srgb,var(--mo-glass) 22%,transparent);box-shadow:0 6px 22px rgba(0,0,0,.18);pointer-events:none;opacity:0}
.mo-hero__live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Playing: only while JS has added .is-playing; otherwise everything shows its end state. */
.mo-hero.is-playing .mo-mark{animation:mo-lock .5s ease-out .2s both}
.mo-hero.is-playing .mo-step{animation:mo-rise .4s ease-out backwards;animation-delay:calc(1.15s + var(--i)*.28s)}
.mo-hero.is-playing .mo-lens{animation:mo-pass 1.2s ease-in-out 1s both}
.mo-hero.is-playing .mo-step::before{animation:mo-pop .3s ease-out backwards;animation-delay:calc(1.45s + var(--i)*.28s)}
.mo-hero.is-playing .mo-hero__title{animation:mo-fade .5s ease-out 2.2s backwards}
.mo-hero.is-paused *{animation-play-state:paused!important}
@keyframes mo-lock{0%{transform:scale(1)}60%{transform:scale(1.07)}100%{transform:scale(1)}}
@keyframes mo-rise{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
@keyframes mo-pass{0%{opacity:0;transform:translate(-10%,var(--ly0,140px))}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translate(calc(var(--lw,300px) - 60px),var(--ly1,230px))}}
@keyframes mo-pop{from{transform:scale(0)}70%{transform:scale(1.25)}to{transform:scale(1)}}
@keyframes mo-fade{from{opacity:.55}to{opacity:1}}

@media (min-width:860px){
  .mo-hero__inner{grid-template-columns:1.1fr 1fr;padding:56px 24px 64px;gap:48px}
}
@media (prefers-reduced-motion:reduce){
  .mo-hero *,.mo-hero *::before,.mo-hero *::after{animation:none!important;transition:none!important}
  .mo-lens{display:none}
}

.mo-hero--stage .mo-hero__inner{padding:0;max-width:none;display:block}
.mo-hero--stage .mo-stage{background:var(--mo-card)}