/* Landing page on a phone, 2026-09-24 (v2: + the phone shot's frame;
   v3: three phone shots to swipe through; v4: as a carousel, one phone in
   front and two behind it, built by phone-shots.v2.js; v5: no buttons under
   the phones). Standalone and additive like the other
   hand-added sheets in this folder, linked LAST so it wins at equal weight.
   Delete the <link> and the page is exactly what it was before.

   ------------------------------------------------------------ #features
   The feature cards come back on phones. mobile-sections.v5.css hid them
   below 768px (a desktop composition, and the page's most expensive
   animations); Benny, 2026-09-24: "the feature section is missing". They
   stack cleanly into one column at 402px and each card's animation only
   runs once it scrolls into view (features-fx), so it is shown as built.
   The nav entry pointing at it stays hidden: the phone header has no room. */
@media (max-width: 768px) {
  #features { display: block !important; }
}

/* ------------------------------------------------------------ Starter card
   The Starter plan is the wide "entry" bar above the three plan cards: name
   and feature list on the left, price and the locked CTA on the right, the
   CTA 167% wide with negative margins so it overhangs its column
   (entry-bar.v2.css). On a phone the two halves stayed on one row -- the
   list got 96px, its grid is ~245px wide, and it ran underneath the price
   and the button ("the prices are a little skewed").

   Below 640px it is laid out like the three cards under it: name, price,
   a rule, the list, the button, all in one column. display:contents lets the
   name, list, price and button be ordered as siblings without touching the
   bundle's markup; the numbers are the three cards' own (measured: h3 20px
   centred, price 24px under it, rule 1px #E0E2E6 with 32px above and 28px
   inside, 14px between items, button 32px below). */
@media (max-width: 640px) {
  #pricing div:has(> .jp-entry-col) {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
  }
  #pricing div:has(> .jp-entry-col) > .flex-1,
  #pricing div:has(> .jp-entry-col) > .jp-entry-col {
    display: contents;
  }
  #pricing .jp-entry-name {
    order: 1;
    text-align: center;
    font-size: 20px;
  }
  #pricing .jp-entry-col > p {
    order: 2;
    justify-content: center;
    margin: 24px 0 0;
  }
  #pricing .jp-entry-feat {
    order: 3;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin: 32px 0 0;
    padding-top: 28px;
    border-top: 1px solid rgb(224, 226, 230);
  }
  #pricing .jp-entry-col > div {
    order: 4;
    margin-top: 32px;
  }
  #pricing .jp-entry-col .cta-locked {
    width: 100%;
    margin-inline: 0;
  }
}

/* ------------------------------------------------------------ #interface
   On a phone the dashboard shot is now a PHONE screenshot (img/interface24-m
   and -dark-m: the real member app at 393x852, feed card with the rail
   folded), not a two-column crop of the desktop -- which "looks forced and
   doesn't fit the scale". So the frame around it becomes a phone as well:
   narrow, rounded like the device, and the same metallic rim and dark bezel
   the tablet frame has (scraper-scroll.v3.css .ss-card), which on this shape
   reads as a titanium edge. interface-mobile.v1.css already lets the image
   set the height below 768px; this only changes the frame's proportions.
   shot-callouts.v14.css restates .ss-card's max-width below 1199px, so these
   carry the section id to win. */
@media (max-width: 768px) {
  #interface .ss-card,
  #interface .sc-on .ss-card,
  .sc-on #interface .ss-card {
    width: min(290px, 74vw);
    max-width: min(290px, 74vw);
    padding: 9px;
    border-radius: 50px;
  }
  /* The dark fade down the right edge was the "this scrolls sideways" hint of
     the old scrolling tablet crop; over a phone screen that fits it is just a
     dark bar. */
  #interface .ss-card::after { display: none !important; }
  #interface .ss-screen {
    border-radius: 41px;
    overflow: hidden !important;
    background: #000;
  }
  #interface .ss-screen picture,
  #interface .ss-screen img {
    width: 100% !important;
    height: auto !important;
  }
}

/* ---------------------------------------------------------- phone shots
   A carousel of three phones -- Vinted, Mercari (Japan), eBay: one in front,
   the other two smaller and BEHIND it, one each side. phone-shots.v2.js
   places them (transform / opacity / z-index per phone, following the finger
   while dragging) and builds it next to the bundle's own frame, which is
   hidden here on phones; above 768px none of this is on screen. The market
   tabs reuse the section's own pill (.ss-theme / .ss-theme-btn), so they look
   exactly like the Light / Dark switch beneath them. */
.jps { display: none; }
@media (max-width: 768px) {
  #interface .ss-stage > .ss-card { display: none !important; }
  #interface .jps {
    display: block;
    margin: 1.25rem -16px 0;           /* to the screen edges: .ss-scroll pads 16px */
  }
  #interface .jps-stage {
    position: relative;
    height: 606px;                      /* 270px phone = 567px tall, + room for its shadow */
    touch-action: pan-y;                /* sideways gestures are the carousel's */
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  #interface .jps-stage > .jps-card {
    position: absolute;
    left: 50%;
    top: 6px;
    width: 270px;
    max-width: none;
    margin: 0 0 0 -135px;
    padding: 8px;
    border-radius: 46px;
    /* !important and the section id: scraper-scroll.v3.css forces
       `.ss-card { transform: none !important }` below 1100px. */
    transform: translate3d(var(--jps-x, 0px), 0, 0) scale(var(--jps-s, 1)) !important;
    transform-origin: 50% 50%;
    transition: transform .45s cubic-bezier(.22,.8,.22,1), opacity .45s ease;
    will-change: transform;
    box-shadow: 0 2px 4px rgba(0,0,0,.18), 0 18px 34px rgba(0,0,0,.26), inset 0 1px hsl(0 0% 100% / .5);
  }
  #interface .jps-stage.is-drag > .jps-card { transition: none; }
  #interface .jps-stage > .jps-card:not(.is-front) { cursor: pointer; }
  #interface .jps-card::after { display: none !important; }
  #interface .jps-card .ss-screen {
    border-radius: 38px;
    overflow: hidden !important;
    background: #000;
  }
  #interface .jps-card .jps-veil {
    position: absolute;
    inset: 8px;                          /* == the card's padding: over the screen only */
    border-radius: 38px;
    background: #F4F5F7;                 /* the section's own background */
    opacity: var(--jps-veil, 0);
    pointer-events: none;
    transition: opacity .45s ease;
  }
  #interface .jps-stage.is-drag .jps-veil { transition: none; }
  #interface .jps-card .ss-screen img {
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
  }
  #interface .jps-tabs { margin: .25rem auto 0; }
  #interface .jps-tabs .ss-theme-btn img {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    display: block;
  }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  #interface .jps-stage > .jps-card { transition: none; }
}

/* --------------------------------------------------- no buttons below
   Benny, 2026-09-24: "remove the buttons below on mobile -- the white mode is
   simply the most pleasant, marketplaces are discovered through swiping".
   So on a phone the section ends with the phones: no market tabs, and none of
   the section's own controls (Light / Dark and the Features callouts toggle).
   The shots therefore always show the light app, which is the bundle's
   default. The desktop keeps its controls. */
@media (max-width: 768px) {
  #interface .jps-tabs,
  #interface .ss-controls { display: none !important; }
}