/* ===========================================================================
   revocle-mobile.css — the phone experience.

   Loads last on every page and lives entirely inside @media (max-width:820px),
   so it can only ever add: the desktop layout is untouched by construction,
   exactly like the light theme.

   The principle: on a phone, scroll distance is the scarce resource. Every
   decorative element costs scrolling, and scrolling costs comprehension. So
   ornament is removed rather than shrunk, grids get denser rather than taller,
   and one action is always within thumb reach.

   Nothing informative is hidden. Every number, spec and caveat that appears on
   desktop still appears here — what goes is the scenery around it.
   =========================================================================== */

@media (max-width:820px){

  /* ── 1. remove ornament ────────────────────────────────────────────────
     None of this carries information. On a 390px screen the marquee of store
     names, the floating sparks and the giant outlined wordmark together cost
     roughly two full screens of scrolling. */
  .dsp-band,
  .spark,
  .note,
  .foot-word,
  .swipe,
  .coin-scene,
  .coin-float,
  .coin-lg,
  .cassette,
  .ringx,
  .ring-bg,
  .orbit,
  .studio-scene,
  .fund-flow,
  .ref-side{display:none!important}

  /* the tape bands are already hidden by the base stylesheet */

  /* ── 2. the commitments marquee becomes a readable list ────────────────
     A 440px-wide card auto-scrolling sideways cannot be read on a phone;
     you catch half a sentence and it leaves. Stack the first three and stop. */
  .quotes-mq{overflow:visible;mask:none;-webkit-mask:none;padding-top:20px}
  .quotes-mq .mq-track{display:grid;width:100%;gap:14px;animation:none}
  .quotes-mq .quote{
    width:100%;flex:none;padding:0 0 0 16px;
    border-left:2px solid oklch(72% .17 45 / .35);
  }
  .quotes-mq .quote:nth-child(n+4){display:none}
  .quotes-mq .qt{font-size:0.9375rem;line-height:1.5}

  /* ── 3. denser grids: two across beats four stacked ───────────────────── */
  .numbers-grid{grid-template-columns:1fr 1fr}
  .stores{grid-template-columns:1fr 1fr;gap:8px}
  .store{padding:12px 12px;gap:9px;font-size:0.8125rem}
  .store img,.store svg{width:18px;height:18px}

  /* ── the horizontal scrollers ──────────────────────────────────────────
     The base stylesheet turns the pipeline, plans and funding routes into
     sideways scrollers with grid-template-columns:none!important. That hides
     steps 3 and 4 of an ordered list, and leaves pricing cards sliced at both
     edges. Mirror the selector exactly so specificity ties, and stack them. */
  html.is-mobile :is(.pipe,.plans,.routes),
  .pipe,.plans,.routes{
    display:grid!important;
    grid-template-columns:1fr!important;
    overflow:visible!important;
    scroll-snap-type:none!important;
    margin-inline:0!important;
    padding:0!important;
    gap:12px;
    max-width:none;
  }
  .pipe .arrow,.pipe .pline{display:none}
  .pnode{padding:20px 18px}

  /* stacked plans are four tall cards — tighten them so the list stays short */
  .plan{padding:22px 20px;gap:14px}
  .plan ul{gap:7px}
  .plan li{font-size:0.90625rem}
  .plan .price .amt{font-size:2.75rem}
  .plan-foot{margin-top:18px;letter-spacing:.1em;font-size:0.625rem;line-height:1.6}

  /* ── the hero vinyl ────────────────────────────────────────────────────
     Hidden below 430px by the base stylesheet, which leaves it costing a full
     screen on every ordinary phone before a single fact appears. */
  .stage,.hero .stage{display:none!important}
  .hero{min-height:auto;padding-top:96px;padding-bottom:36px}
  .hero-inner{grid-template-columns:1fr!important;gap:0}

  /* ── 4. tighter vertical rhythm ───────────────────────────────────────── */
  .sec{padding:56px 0}
  .sec-head{margin-bottom:22px}
  .sec-title{font-size:clamp(1.75rem,7.6vw,2.375rem);line-height:1.1}
  .sec-sub{font-size:0.9375rem;line-height:1.55}
  .s-eyebrow{font-size:0.6875rem;letter-spacing:.18em;gap:10px}
  .num-card{padding:20px 16px}
  .card{padding:22px 20px}
  .deep-item{padding:18px 16px}

  /* ── stacked link lists ────────────────────────────────────────────────
     The base stylesheet sets .f-col a and .mobile-menu a to inline-flex under
     @media (pointer:coarse), for a 44px tap target. But the links sit adjacent
     in the markup with no whitespace between them, so inline-flex runs them
     into one unbreakable line — "DistributionRoyalty calculatorArtist funding"
     — which then overflows the viewport and clips the column headings.
     display:flex keeps the 44px target and puts each link on its own row.
     The compare row is deliberately inline and stays that way. */
  .f-col > a,
  .mobile-menu > a{display:flex!important;align-items:center;min-height:44px}
  .f-col .f-compare a{display:inline!important;min-height:0;padding:0}

  /* the footer is a stack of link lists on a phone, not a grid */
  .foot-grid{grid-template-columns:1fr!important;gap:22px;padding:34px 0 24px}
  .f-col h5{margin-bottom:8px}
  .f-brand p{max-width:none}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:8px;text-align:left}

}

/* light theme counterpart for the bar */
@media (max-width:820px) and (prefers-color-scheme: light){
  .quotes-mq .quote{border-left-color:oklch(50% .185 38 / .4)}
}