/* ============================================================
   Moony — custom MOBILE composition layer
   Scope: html.m-mobile  (real phones ≤700px via matchMedia,
   or ?mobile=1 override). html.m-preview = phone column on desktop.
   This layer composes sections FOR the phone — it is not a
   squeeze of the desktop layout. Loaded last, wins by scope.
   ============================================================ */

/* ── desktop phone-preview shell (?mobile=1) ── */
html.m-preview, html.m-preview body { background: #1c1330; }
html.m-preview body { padding: 34px 0 70px; }
html.m-preview #root { width: 390px; margin: 0 auto; transform: translateZ(0); background: #fff; min-height: 830px; border-radius: 36px; box-shadow: 0 0 0 10px #241a3a, 0 0 0 11.5px rgba(255,255,255,.14), 0 60px 160px -40px rgba(0,0,0,.8); }
html.m-preview body::before { content: "MOBILE PREVIEW · 390PX"; position: fixed; top: 13px; left: 50%; transform: translateX(-50%); font: 600 10px ui-monospace, SFMono-Regular, monospace; letter-spacing: .22em; color: rgba(201,187,230,.55); z-index: 999; }

/* ── nav: compact bar (sheet already exists) ── */
html.m-mobile .nav-links { display: none; }
html.m-mobile .nav-x { display: none; }
html.m-mobile .nav-burger { display: inline-grid; place-items: center; width: 44px; height: 44px; }
html.m-mobile .nav-in { min-height: 60px; }
html.m-mobile .nav-brand { display: inline-flex; align-items: center; min-height: 44px; }

/* ── hero: vertical cinematic composition ── */
html.m-mobile .hero-banner { display: flex; width: 100%; padding: 9px 12px 9px 10px; gap: 8px; flex-wrap: nowrap; align-items: center; }
html.m-mobile .hero-banner .hb-text { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; white-space: nowrap; overflow: hidden; font-size: 12.5px; }
html.m-mobile .hero-banner .hb-view { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, #000 86%, transparent 100%); mask-image: linear-gradient(to right, #000 86%, transparent 100%); }
html.m-mobile .hero-banner .hb-mar { display: flex; width: max-content; gap: 44px; animation: hbMarquee 26s linear infinite; }
html.m-mobile .hero-banner .hb-clone { display: block; }
html.m-mobile .hero-banner .hb-full { display: block; white-space: nowrap; }
@keyframes hbMarquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 22px)); } }
@media (prefers-reduced-motion: reduce) { html.m-mobile .hero-banner .hb-mar { animation: none; } }
html.m-mobile .hero-banner .hb-tag { flex: none; }
html.m-mobile .hero-banner .hb-cta { flex: none; font-size: 0; gap: 0; white-space: nowrap; }
html.m-mobile .hero-banner .hb-cta svg { width: 15px; height: 15px; }
html.m-mobile .hero-in { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; }
html.m-mobile .hero-copy { display: contents; }
html.m-mobile .hero-eyebrow { order: 1; margin: 0 auto; font-size: 11.5px; }
html.m-mobile .hero-h { order: 2; margin-top: 20px; font-size: clamp(40px, 11.5vw, 47px); line-height: 1.03; letter-spacing: -.045em; }
html.m-mobile .hero-object { order: 3; position: relative; width: 100%; display: flex; justify-content: center; margin: 26px 0 0; }
html.m-mobile .hero-stack { width: min(340px, 88%); max-width: none; }
html.m-mobile .hero-sub { order: 4; font-size: 15.5px; line-height: 1.55; max-width: 33ch; margin: 4px auto 0; }
html.m-mobile .hero-actions { order: 5; width: 100%; display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
html.m-mobile .hero-actions .btn { width: 100%; justify-content: center; min-height: 52px; font-size: 16px; }

/* ── global mobile rhythm: shorter, clearer beats ── */
html.m-mobile .sec { padding: 64px 0; }
html.m-mobile .shead h2 { font-size: clamp(30px, 8.8vw, 37px); }
html.m-mobile .shead p { font-size: 15px; line-height: 1.6; }

/* ── 01 the currency: bills beat → sound beat → open beat ── */
html.m-mobile .meet-stage { margin-top: 24px; }
html.m-mobile .meet-bills { width: 96%; }
html.m-mobile .meet-duo { display: flex; flex-direction: column; gap: 46px; }
html.m-mobile .mpil-h { font-size: 24px; }
html.m-mobile .mpil-p { font-size: 14.5px; }
html.m-mobile .om2-code-body { font-size: 11.5px; }

/* ── 02 what you can do: one headline, stage-anchored pill, clean beats ── */
.ps-pill-stage, .ps-caps-k { display: none; }
html.m-mobile #product .shead p { display: none; }
html.m-mobile .product-showcase { display: flex; flex-direction: column; background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0 18px; }
html.m-mobile .ps-copy { display: contents; }
html.m-mobile .ps-pill-desk { display: none; }
html.m-mobile .ps-h { display: none; }
/* beat 1: the stage — pill anchored to the visual, phone cropped at the QR bill */
html.m-mobile .ps-visual { order: 1; position: relative; display: block; width: 100%; margin: 0; border-radius: 22px; overflow: hidden; height: auto; /* beat the ≤560px height:290px, else aspect-ratio never applies and the QR icon clips */ aspect-ratio: 1 / 0.92; max-height: 348px; /* crop lands ~56% down the phone: QR icon (bottom ~53%) fully visible, bill cut just beneath */ background: linear-gradient(155deg, #f2ebfe 0%, #f6effc 48%, #fdf3ea 100%); border: 1px solid rgba(124,77,222,.13); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 18px 44px -24px rgba(52,26,104,.28); }
html.m-mobile .ps-pill-stage { display: inline-flex; position: absolute; top: 14px; left: 14px; z-index: 2; background: rgba(255,255,255,.78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html.m-mobile .ps-visual::before { content: ""; position: absolute; left: 50%; top: 12%; width: 330px; height: 330px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(124,77,222,.2), rgba(240,165,104,.1) 60%, transparent 72%); filter: blur(6px); }
html.m-mobile .ps-visual::after { display: none; }
html.m-mobile .ps-halo { display: none; }
html.m-mobile .ps-phone-slot { display: none; } /* the ≤560px cover-crop slot otherwise paints over the phone below */
html.m-mobile .ps-phone { display: flex; justify-content: center; padding-top: 46px; }
html.m-mobile .ps-phone img { width: min(322px, 85%); filter: drop-shadow(0 24px 40px rgba(50,30,110,.3)); }
/* beat 2: one explainer, then get it */
html.m-mobile .ps-lede { order: 2; font-size: 15px; line-height: 1.6; margin-top: 18px; }
html.m-mobile .badges { order: 3; align-self: stretch; /* fill the column; showcase's inherited align-items:center otherwise shrink-wraps the row */ display: flex; flex-wrap: nowrap; gap: 10px; margin-top: 18px; }
html.m-mobile .appbadge { flex: 1; justify-content: center; }
/* store badges: bigger tap targets, still side by side */
html.m-mobile .ps-copy .appbadge { min-height: 54px; min-width: 0; padding: 10px 12px; gap: 9px; }
html.m-mobile .ps-copy .appbadge svg { width: 24px; height: 24px; flex: none; }
html.m-mobile .ps-copy .appbadge small { font-size: 10px; }
html.m-mobile .ps-copy .appbadge b { font-size: 15px; white-space: nowrap; }
html.m-mobile .ps-start { display: none; }
/* beat 3: capability rail with its own quiet kicker — no divider line */
html.m-mobile .ps-caps-k { display: block; order: 5; margin-top: 36px; font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(56,45,78,.5); }
/* Native finite rail: every card (incl. first/last) centers in the viewport —
   the edge padding is sized so end cards have room to reach the center snap.
   Rail spans 100vw minus the 14px gutters, hence the -14px in the calc. */
html.m-mobile .ps-caps { --capw: min(76vw, 290px); order: 6; align-self: stretch; /* showcase's desktop align-items:center leaks into the mobile flex column; without stretch the rail sizes to max-content (1920px) and can never scroll */ display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 12px -18px 0; padding: 4px calc((100vw - var(--capw)) / 2 + 10px) 10px; /* +24px slack past exact-fit: end snap points must sit INSIDE the scroll range or iOS bounces off both ends */ border: 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); }
html.m-mobile .ps-caps::-webkit-scrollbar { display: none; }
html.m-mobile .ps-caps .cw-cap { flex: 0 0 var(--capw); scroll-snap-align: center; scroll-snap-stop: always; background: #fff; border: 1px solid rgba(80,39,146,.12); border-radius: 18px; padding: 18px; margin: 0; box-shadow: 0 10px 26px -20px rgba(52,26,104,.4); }

/* out in the wild: feature beat + poster rail */
html.m-mobile .wild-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
html.m-mobile .wild-gallery { display: flex; flex-direction: column; gap: 12px; }
html.m-mobile .wild-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 18px; gap: 12px; margin: 0 -18px; padding: 0 18px 10px; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 26px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 26px), transparent 100%); }
html.m-mobile .wild-grid::-webkit-scrollbar { display: none; }
html.m-mobile .wild-grid::after { content: ""; flex: none; width: 2px; }
html.m-mobile .wild-grid .wild-card { flex: 0 0 58%; scroll-snap-align: start; }

/* ── 03 reserve: compress the dark chapter into beats ── */
/* section head is the reserve chapter's own centered moment; the rliq beat
   below stays left-aligned with a smaller subheader (clear hierarchy) */
html.m-mobile #reserve .shead { text-align: center; }
html.m-mobile #reserve .shead-idx { justify-content: center; }
html.m-mobile #reserve .shead h2 { font-size: clamp(25px, 7.2vw, 30px); line-height: 1.12; letter-spacing: -.035em; }
html.m-mobile #reserve .shead p { margin-left: auto; margin-right: auto; }
html.m-mobile .rsvh-full { display: none; }
html.m-mobile .rsvh-short { display: inline; }
/* align-items: stretch overrides the desktop grid's align-items: center, which
   otherwise shrink-wraps and centers the kicker + h3 — desktop is left-aligned */
html.m-mobile .rliq { display: flex; flex-direction: column; align-items: stretch; margin-top: 44px; gap: 0; }
html.m-mobile .rliq-tx { display: contents; }
html.m-mobile .rliq-tx .rsv-kick2 { order: 1; }
html.m-mobile .rliq-tx h3 { order: 2; font-size: 22px; margin-top: 10px; }
html.m-mobile .rliq-tx > p { order: 3; font-size: 14.5px; line-height: 1.6; margin-top: 16px; }
html.m-mobile .rliq-viz { order: 4; margin-top: 20px; }
/* USDF card: pills row and foot row each fit one line */
html.m-mobile .usdfcard { padding: 26px 20px; }
html.m-mobile .usdfcard-flow { flex-wrap: nowrap; gap: 8px; }
html.m-mobile .usdfcard-node { font-size: 10px; padding: 6px 9px; white-space: nowrap; }
html.m-mobile .usdfcard-rel { font-size: 9.5px; }
html.m-mobile .usdfcard-foot { flex-wrap: nowrap; gap: 8px; }
html.m-mobile .usdfcard-foot-l { font-size: 11px; gap: 6px; white-space: nowrap; }
html.m-mobile .usdfcard-foot-l svg { display: none; }
html.m-mobile .usdfcard-cta { font-size: 12px; white-space: nowrap; }
/* checklist beats: bold claims only, as a hairline ledger — no floating checks */
html.m-mobile .rliq-list { order: 5; margin: 34px 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid rgba(255,255,255,.12); }
html.m-mobile .rliq-item { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
html.m-mobile .rliq-item p { font-size: 14px; }
html.m-mobile .rliq-chk { width: 18px; height: 18px; flex: none; opacity: .75; }
html.m-mobile .rliq-d { display: none; }
html.m-mobile .rcurve { margin-top: 34px; }
html.m-mobile .rcurve-vhead { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
html.m-mobile .rcurve-vhead h3 { font-size: 20px; max-width: none; white-space: nowrap; letter-spacing: -.035em; line-height: 1.15; }
html.m-mobile .rcurve-facts2 { font-size: 12.5px; margin-top: 12px; }
/* readout becomes a hairline ledger — label left, value right, nothing wraps */
html.m-mobile .rcurve-read { display: grid; grid-template-columns: 1fr; gap: 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.12); padding: 0; margin-top: 22px; }
html.m-mobile .rcurve-metric { display: flex; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
html.m-mobile .rcurve-metric .k { font-size: 13px; flex: none; }
html.m-mobile .rcurve-metric .v, html.m-mobile .rcurve-metric--r .v { font-size: 20px; letter-spacing: -.02em; text-align: right; }
html.m-mobile .rcurve-metric .chip { order: 3; flex: none; margin: 0; font-size: 11px; padding: 3px 8px; white-space: nowrap; }
html.m-mobile .rcurve-metric .sub, html.m-mobile .rcurve-note { display: none; }
/* Foundation block: photo column collapsed to 0 when stacked */
html.m-mobile .net-fnd2 { display: flex; flex-direction: column; gap: 22px; }
html.m-mobile .net-fnd2-photo { width: 100%; min-width: 0; aspect-ratio: 16 / 10; }
html.m-mobile .net-fnd2-tx { min-width: 0; }
/* chapters panel now lives inside "Who carries it", after the CONTRIBUTING ledger */
html.m-mobile .net-sec > .wrap > .net-roles .oss-grid > .oss-list { order: 1; }
html.m-mobile .net-sec > .wrap > .net-roles .oss-grid > .net-chapters { order: 2; margin-top: 8px; }
/* touch users drag naturally — the hint just collides with the axis */
html.m-mobile .rcurve .rv-drag { display: none; }
/* proof points swipe like the capability rail */
html.m-mobile .rproof-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 0 -18px; padding: 4px 18px 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
html.m-mobile .rproof-grid::-webkit-scrollbar { display: none; }
html.m-mobile .rproof-grid .rproof-item { flex: 0 0 272px; scroll-snap-align: center; }
html.m-mobile .rsv-more { display: flex; flex-direction: column; align-items: stretch; gap: 14px; text-align: left; }
html.m-mobile .rsv-more-cta { justify-content: center; min-height: 50px; }

/* ── mobile type composition: fewer wrapped lines, even rhythm ── */
html.m-mobile .sec { padding: 60px 0; }
html.m-mobile #money.sec { padding: 60px 0; }
html.m-mobile .shead h2 { font-size: clamp(27px, 8vw, 31px); line-height: 1.1; letter-spacing: -.04em; text-wrap: pretty; }
html.m-mobile #money .shead h2 { font-size: 29px; }
html.m-mobile #faq .shead h2 { font-size: 29px; }
html.m-mobile #network .shead h2 { font-size: 28px; }
html.m-mobile #reserve .shead h2 { font-size: 29px; }
html.m-mobile .shead p { font-size: 14.8px; line-height: 1.6; margin-top: 12px; max-width: 42ch; text-wrap: pretty; }

/* bounty banner stacks on phones */
html.m-mobile .oss-bounty { grid-template-columns: 1fr auto; padding: 16px; column-gap: 14px; }
html.m-mobile .oss-bounty-tx b { font-size: 16px; }
html.m-mobile .oss-bounty-logo { grid-column: 1; margin-top: 12px; height: 16px; }
html.m-mobile .oss-bounty-go { grid-column: 2; grid-row: 3; margin-top: 12px; border-left: 0; padding-left: 0; }