/* Menty website v5, phone layer (13 Oct 2026). Loaded last on the home and product pages, with mobile.js.
   Every rule sits below 700px, so laptop and desktop are untouched. Card groups become swipe rails,
   numbered steps light up as you scroll, and visuals are sized for a phone screen. */
.rail-dots,.sy-ring{display:none}

@media (max-width:699px){
  /* ---------- rails: one swipeable row per card group ---------- */
  .m-ready .rail{display:flex!important;grid-template-columns:none!important;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);padding:4px var(--gut) 6px;margin-inline:calc(var(--gut) * -1);
    position:relative;scrollbar-width:none;-webkit-overflow-scrolling:touch;align-items:flex-start}
  .m-ready .rail::-webkit-scrollbar{display:none}
  .m-ready .rail>.rail-i,.m-ready .rail .rail-i{flex:0 0 84%;max-width:340px;min-width:0;scroll-snap-align:start;margin:0!important}
  .m-ready .rail.nudge{animation:rail-nudge 1.2s cubic-bezier(.3,.7,.3,1) 1}
  @keyframes rail-nudge{0%,100%{transform:none}35%{transform:translateX(-42px)}60%{transform:translateX(-42px)}}
  .m-ready .rail-dots{display:flex;justify-content:center;gap:6px;margin:12px 0 2px}
  .rail-dots button{all:unset;width:7px;height:7px;border-radius:99px;background:#D9D5CE;cursor:pointer;transition:width .35s ease,background .35s ease}
  .rail-dots button.on{width:22px;background:var(--o)}
  .loop .rail-dots button{background:rgba(255,255,255,.45)}.loop .rail-dots button.on{background:#fff}

  /* ---------- home · why venues choose Menty ---------- */
  .m-ready .edges .E.rail{align-items:flex-start}
  .m-ready .E .e{padding:20px}
  .m-ready .E .e h3{font-size:21px}
  .m-ready .E .fig{margin-top:14px;padding-top:12px}
  .m-ready .E .fig b{font-size:46px}
  .m-ready .E .fig.big b{font-size:64px}
  .m-ready .xl-grid{gap:16px}
  .m-ready .xl-txt .e-link{padding-top:12px}
  .m-ready .xl-vis{min-height:190px}
  .m-ready .xl-vis .cut{width:84px;right:-6px;bottom:-14px}
  .m-ready .e.pos .screen{margin-top:auto}
  .m-ready .w4-txt .fig.sm{padding:8px 0;gap:12px}
  .m-ready .w4-txt .fig.sm b{font-size:38px;min-width:2.6em}
  .m-ready .w4-txt .fig.sm p span{font-size:13px}
  .m-ready .w4-vis .lanes{display:none}
  .m-ready .w4-vis .trips{font-size:13px}
  .m-ready .E .bleed.soft{padding:14px 0 18px;margin-top:auto}
  .m-ready .E .bleed.soft .one,.m-ready .E .lphone{width:118px}
  .m-ready .aiban.rail-i{display:flex;flex-direction:column;justify-content:space-between;gap:20px;padding:24px}
  .m-ready .aiban .ai-h{font-size:22px;line-height:1.1}

  /* ---------- home · AI loop ---------- */
  .m-ready .L .duo.rail,.m-ready .L .trio.rail{align-items:flex-start}
  .m-ready .L .c{padding:20px}
  .m-ready .L .c .pcut{width:150px}
  .m-ready .L .fan{transform:scale(.8);transform-origin:50% 0;margin:6px auto -50px}
  .m-ready .phase{margin:26px 0 12px;padding:12px 16px}
  .m-ready .phase span{font-size:13.5px}

  /* ---------- home · make it yours ---------- */
  .m-ready .show .hero-dish img{aspect-ratio:4/3}
  .m-ready .points li{padding:10px 0}
  .m-ready .points b{font-size:17px}
  .m-ready .yours .venues.rail{align-items:flex-start}
  .m-ready .vcard .vp{height:170px}
  .m-ready .venues .vph{width:66px;top:30px}

  /* ---------- home · setup: a timeline that lights up ---------- */
  .m-ready .m-flow{position:relative;gap:0;margin-bottom:24px}
  .m-ready .m-flow li{display:grid;grid-template-columns:40px 1fr;column-gap:14px;row-gap:2px;border:0;background:none;padding:10px 0 14px;border-radius:0}
  .m-ready .m-flow li span{grid-row:span 2;width:34px;height:34px;margin:0;font-size:14px;position:relative;z-index:1;
    background:#fff;color:var(--mute);border:1.5px solid var(--card-line);transition:background .4s ease,color .4s ease,border-color .4s ease,transform .4s ease}
  .m-ready .m-flow li.lit span{background:var(--gloss);color:#fff;border-color:transparent;transform:scale(1.06)}
  .m-ready .m-flow li b{font-size:17px;align-self:end;transition:color .4s ease}
  .m-ready .m-flow li:not(.lit) b{color:var(--mute)}
  .m-ready .m-flow::before{content:"";position:absolute;left:16.5px;top:26px;bottom:30px;width:2px;background:var(--card-line)}
  .m-ready .m-flow::after{content:"";position:absolute;left:16.5px;top:var(--fill-top,26px);height:var(--fill-h,0);width:2px;background:var(--o);border-radius:2px;transition:height .25s linear}

  /* ---------- product · hero ---------- */
  .p5-hero .jump{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gut) * -1);padding:2px var(--gut)}
  .p5-hero .jump::-webkit-scrollbar{display:none}
  .p5-hero .jump a{flex:none}

  /* ---------- product · 1, the system: a loop ring over one rail of six steps ---------- */
  .m-ready .sy-lab,.m-ready .sy-eng{display:none}
  .m-ready .sy-body.rail>ol{display:contents}
  .m-ready .sy-body.rail{align-items:flex-start}
  .m-ready .sy-c:not(:last-child)::after{display:none}
  .m-ready .sy-c.is-on{border-color:var(--o);box-shadow:0 14px 30px -20px rgba(200,60,20,.5)}
  .m-ready .sy-ring{display:flex;align-items:center;gap:16px;margin:0 0 14px}
  .sy-ring svg{flex:none;width:118px;height:118px;overflow:visible}
  .sy-ring .trk{fill:none;stroke-width:2}
  .sy-ring .trk.a{stroke:#2A2A2E;transform:rotate(-90deg);transform-origin:60px 60px}
  .sy-ring .trk.b{stroke:var(--o);transform:rotate(-90deg);transform-origin:60px 60px}
  .sy-ring .orbit{transform-origin:60px 60px;animation:sy-orbit 6s linear infinite}
  @keyframes sy-orbit{to{transform:rotate(360deg)}}
  .sy-ring .lt{fill:#FF5A2C;filter:drop-shadow(0 0 4px rgba(255,90,44,.9))}
  .sy-ring .mid{font:600 15px var(--font,inherit);text-anchor:middle;fill:var(--ink);letter-spacing:-.02em}
  .sy-ring .nd{cursor:pointer}
  .sy-ring .nd circle{fill:#fff;stroke:#2A2A2E;stroke-width:1.5;transition:fill .3s ease,r .3s ease}
  .sy-ring .nd.o circle{stroke:var(--o)}
  .sy-ring .nd text{font:600 10.5px var(--font,inherit);text-anchor:middle;fill:#2A2A2E;pointer-events:none}
  .sy-ring .nd.o text{fill:var(--o-txt)}
  .sy-ring .nd.on circle{fill:#2A2A2E;r:12px}
  .sy-ring .nd.o.on circle{fill:var(--o)}
  .sy-ring .nd.on text{fill:#fff}
  .sy-ring-t{min-width:0}
  .sy-ring-t .k{font:500 11px "Geist Mono",ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--o-txt)}
  .sy-ring-t b{display:block;font-size:18px;letter-spacing:-.02em;line-height:1.2;margin-top:4px}
  .sy-ring-t span{display:block;font-size:12.5px;color:var(--mute);margin-top:6px}

  /* ---------- product · 2, guests ---------- */
  .m-ready .steps7.rail{align-items:flex-start}
  .m-ready .steps7 .st-trips .panel{padding:18px}
  .evs.row3,.why .evs:not(.rail){gap:8px}
  .evs.row3 .ev,.c .evs .ev{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:14px;padding:14px 16px}
  .evs.row3 .ev b,.c .evs .ev b{font-size:34px;min-width:2.2em}
  .evs.row3 .ev p,.c .evs .ev p{font-size:13.5px}

  /* ---------- product · 3, bigger bills ---------- */
  .m-ready #bills .duo2.rail,.m-ready #pos .duo2.rail{align-items:flex-start}
  .m-ready #bills .duo2 .c{padding:20px}
  .m-ready #bills .evs.bottom{margin-top:14px;padding-top:0}
  .m-ready .xl-txt .e-link,.m-ready .mini-vis{margin-top:14px}
  .m-ready .rcard .rfoot{font-size:10.5px;gap:8px}
  .m-ready #bills .fan{transform:scale(.8);transform-origin:50% 0;margin:6px auto -50px}
  .m-ready .why{padding:20px;margin-top:16px}
  .m-ready .why .evs.rail .ev{background:#fff}
  .m-ready .why .evs.rail .ev b{font-size:38px}
  .m-ready .c.waiter .pcut{width:170px}

  /* ---------- product · 4, bringing them back ---------- */
  .m-ready .bloop.rail{margin-bottom:14px}
  .m-ready .bloop.rail li{flex-basis:46%}
  .m-ready .bloop li::after{display:none}
  .m-ready .chap{padding:20px;margin-top:12px}
  .m-ready .ch-rew,.m-ready .ch-two,.m-ready .ch-row{gap:18px;grid-template-columns:minmax(0,1fr)}
  .m-ready .ch-rew>*,.m-ready .ch-two>*,.m-ready .ch-row>*,.m-ready .pside{min-width:0}
  .m-ready .pphone{width:178px}
  .m-ready .psteps{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;position:relative;
    margin-inline:-20px;padding:2px 20px 4px}
  .m-ready .psteps::-webkit-scrollbar{display:none}
  .m-ready .psteps li{flex:0 0 72%;scroll-snap-align:start}
  .m-ready .psteps button{height:100%;border-left:0;border-top:2px solid var(--card-line);border-radius:10px;background:var(--card)}
  .m-ready .psteps .on button{border-top-color:#FFC83D}
  .m-ready .ch-row{gap:16px;margin-top:18px;padding-top:18px}
  .m-ready .heat .pcut{width:150px}
  .m-ready #insights .dgrid.rail,.m-ready #marketing .aud.rail,.m-ready #marketing .ocal.rail{align-items:flex-start}
  .m-ready .roi{gap:0}
  .m-ready .roif{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:14px}
  .m-ready .camp{gap:16px;grid-template-columns:minmax(0,1fr)}
  .m-ready .camp>*,.m-ready .camp-r{min-width:0}
  .m-ready .lock .pcut{width:170px}

  /* ---------- product · 5 to 7 ---------- */
  .m-ready #team .o-vis.rail{align-items:center}
  .m-ready .owner{padding:20px;margin-top:20px}
  .cmp-t .h{display:grid;grid-template-columns:repeat(3,1fr)}
  .cmp-t .h span:first-child{display:none}
  .cmp-t .h span{padding:10px 8px;font-size:11.5px}
  .cmp-t .r:not(.h){grid-template-columns:repeat(3,1fr)}
  .cmp-t .r:not(.h) [role=rowheader]{grid-column:1/-1;padding:10px 12px 4px;background:none;font-size:13.5px}
  .cmp-t .r:not(.h) span:not([role=rowheader]){padding:4px 8px 12px;font-size:12px;line-height:1.35}
  .cmp-t .r:not(.h) .m{background:none;color:var(--o-txt)}
  .cmp h3{margin-bottom:14px}
}

@media (max-width:699px) and (prefers-reduced-motion:reduce){
  .sy-ring .orbit,.m-ready .rail.nudge{animation:none}
}