/* Mobile experience upgrade — Tinder-inspired layout for small screens,
   plus the shared step-card polish (kicker on top, trust chip on the
   bottom) that also applies on desktop. Loaded after styles.css and
   styles-layout.css so these rules win. */

/* Carousel helpers stay out of the desktop layout entirely. */
.three-page-site .steps-swipe-hint {
  display: none;
}

/* Trust chip pill — rides under its step card as a full-width bar, on
   both the mobile carousel slides and the desktop step cards. */
.three-page-site .step-trust {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid rgba(240, 233, 215, 0.18);
  border-radius: 999px;
  background: rgba(240, 233, 215, 0.08);
  color: rgba(240, 233, 215, 0.78);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
}

.three-page-site .step-trust .trust-icon {
  flex: none;
  width: 16px;
  height: 16px;
  color: rgba(240, 233, 215, 0.6);
}

/* ------------------------------------------------------------------
   Desktop step cards: kicker above the app screenshot spanning the
   card, copy on the right, and the trust chip riding under the card as
   a full-width bar. The cell is the grid column (card + chip); the copy
   wrapper dissolves so its children can take grid areas.
   ------------------------------------------------------------------ */
@media (min-width: 761px) {
  .three-page-site .compact-step-cell {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 12px;
    min-width: 0;
  }

  .three-page-site .compact-step {
    /* The kicker takes a row of its own now, so the card runs slightly
       taller than the stock 46svh clamp to keep the phone shot's size. */
    height: clamp(420px, 48svh, 500px) !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) !important;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "kicker kicker"
      "visual heading"
      "visual text";
  }

  .three-page-site .compact-step-copy {
    display: contents !important;
  }

  .three-page-site .compact-step-copy b {
    grid-area: kicker;
    margin: 0 0 16px !important;
  }

  .three-page-site .compact-step-copy h3 {
    grid-area: heading;
    align-self: end;
  }

  .three-page-site .compact-step-copy p {
    grid-area: text;
  }

  .three-page-site .compact-step-visual {
    grid-area: visual;
  }

  /* The base .app-phone-visual is a grid whose auto row sizes to the
     image, so the img's max-height:100% is circular and ignored — the
     phone then overflows onto the chip row. A flex container with a
     definite height makes the percentage cap actually bite. */
  .three-page-site .compact-step .app-phone-visual {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .three-page-site .compact-step .app-phone-visual img {
    width: auto;
    max-width: 100%;
    max-height: 100%;
  }

  /* Every card carries its own chip now; retire the standalone strip. */
  .three-page-site .trust-strip {
    display: none !important;
  }
}

@media (max-width: 760px) {
  /* ------------------------------------------------------------------
     01 / Hero — "Heading, Photo, Text" card order.
     .hero-copy dissolves (display: contents) so the phone stage can sit
     between the headline and the lede, like Tinder's mobile cards.
     ------------------------------------------------------------------ */
  .three-page-site .hero {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0 !important;
  }

  .three-page-site .hero-copy {
    display: contents !important;
  }

  .three-page-site .hero .eyebrow {
    order: 1;
  }

  .three-page-site .hero .slide-title {
    order: 2;
    margin: 0 !important;
  }

  .three-page-site .hero-stage {
    order: 3;
    align-self: center;
    margin: 34px auto 4px !important;
  }

  .three-page-site .hero-lede {
    order: 4;
  }

  /* Sit the "people ready" note just under the mockup's "Live · 4m ago"
     badge line and let it stick out past the phone's right edge about as
     far as the "Meet first" note does on the left. */
  .three-page-site .hero-floating-note-top {
    top: 27%;
    left: auto;
    right: -40px;
  }

  .three-page-site .hero-actions {
    order: 5;
    margin-top: 26px !important;
  }

  /* Align the secondary link with the button's label (inset by the
     button's 24px padding) instead of floating centered under it. */
  .three-page-site .hero-actions .text-link {
    justify-self: start;
    margin-left: 24px;
  }

  /* ------------------------------------------------------------------
     02 / How it works — horizontal snap carousel.
     The three step cards become full-width color-blocked slides that
     side-scroll with scroll-snap, each laid out Heading → Photo → Text.
     ------------------------------------------------------------------ */
  .three-page-site .compact-heading {
    position: relative;
  }

  .three-page-site .steps-swipe-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    color: rgba(240, 233, 215, 0.55);
    font-size: 15px;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .three-page-site .steps-swipe-hint span {
    animation: swipe-nudge 1.6s ease-in-out infinite;
  }

  @keyframes swipe-nudge {
    0%,
    100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(6px);
    }
  }

  .three-page-site .compact-steps {
    /* Bleed to the viewport edges so slides peek in from the right. */
    display: flex !important;
    gap: 14px !important;
    width: calc(100% + var(--layout-gutter) * 2) !important;
    margin-inline: calc(var(--layout-gutter) * -1) !important;
    padding: 8px var(--layout-gutter) 10px !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--layout-gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .three-page-site .compact-steps::-webkit-scrollbar {
    display: none;
  }

  /* The cell is the snap target and stacks the slide over its chip. */
  .three-page-site .compact-step-cell {
    flex: 0 0 min(84vw, 330px);
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* flex: 1 keeps every slide the same height, so the chips line up. */
  .three-page-site .compact-step {
    flex: 1;
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    text-align: left;
    gap: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    /* Drop the stacked layout's bottom margin so the cell gap sets the
       distance to the chip. */
    margin: 0 !important;
    padding: 28px 26px 32px !important;
  }

  /* Dissolve the copy wrapper so kicker/heading/photo/text reorder freely. */
  .three-page-site .compact-step-copy {
    display: contents !important;
  }

  .three-page-site .compact-step-copy b {
    order: 1;
    margin: 0 0 14px !important;
  }

  .three-page-site .compact-step-copy h3 {
    order: 2;
    margin: 0 !important;
    font-size: clamp(30px, 8.6vw, 36px) !important;
  }

  .three-page-site .compact-step-visual {
    order: 3;
    height: auto !important;
    margin-top: 22px;
  }

  /* Size the phone shot by width; the legacy mobile block otherwise blows it
     up to ~545px and it overlaps the card text. */
  .three-page-site .compact-step .app-phone-visual img {
    width: min(198px, 56vw);
    max-width: none;
    height: auto;
  }

  .three-page-site .compact-step-copy p {
    order: 4;
    max-width: none !important;
    margin: 22px 0 0 !important;
    font-size: 17px !important;
    line-height: 1.35 !important;
  }

  /* Tinder-style color blocking: each slide gets its own deep brand hue. */
  .three-page-site .compact-step-cell:nth-child(2) .compact-step {
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.05), transparent 42%),
      #32455c !important;
  }

  .three-page-site .compact-step-cell:nth-child(2) .compact-step-copy b {
    color: #a9c6e8 !important;
  }

  .three-page-site .compact-step-cell:nth-child(3) .compact-step {
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.05), transparent 42%),
      #58231e !important;
  }

  .three-page-site .compact-step-cell:nth-child(3) .compact-step-copy b {
    color: #f6b3a8 !important;
  }

  /* Casual polaroid tilt on the phone shots, alternating direction. */
  .three-page-site .compact-step-cell:nth-child(odd) .app-phone-visual img {
    transform: rotate(-2.5deg);
  }

  .three-page-site .compact-step-cell:nth-child(even) .app-phone-visual img {
    transform: rotate(2.25deg);
  }

  /* Which slide you are on is shown by the slide itself rather than by pager
     dots: the snapped cell sits at full size, its neighbours step back and
     dim. script.js toggles .is-active as the scroller snaps. Scaling down the
     off-slides (rather than up the active one) keeps every card inside the
     scroller's padding, so nothing clips against overflow: hidden. */
  .three-page-site .compact-step-cell {
    transform: scale(0.92);
    transform-origin: center center;
    opacity: 0.62;
    transition: transform 0.32s ease, opacity 0.32s ease;
  }

  .three-page-site .compact-step-cell.is-active {
    transform: scale(1);
    opacity: 1;
  }

  /* Chip placement is shared with desktop: a full-width bar under the
     card. The standalone trust strip stays hidden on mobile (the layout
     stylesheet already does that). */

  /* ------------------------------------------------------------------
     Header tucks away past the hero. On a phone the fixed bar eats the
     top of the How it works carousel, so once the reader is out of the
     hero we slide it off screen and hand the height back to the cards.
     script.js toggles .header-tucked on <body>.
     ------------------------------------------------------------------ */
  .three-page-site .site-header {
    transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
  }

  .three-page-site.header-tucked .site-header {
    transform: translateY(-100%);
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .three-page-site .site-header,
  .three-page-site .compact-step-cell {
    transition: none;
  }
}