/* ═══════════════════════════════════════════════════════════════
   page-scroll.css — Full-page vertical snap scroll
   Active: viewport ≥ 768 × 600 px (JS adds .page-scroll-ready)
   ═══════════════════════════════════════════════════════════════ */

/* Base anchor offsets (non-snap, all screens) */
html                          { scroll-padding-top: 64px; }
#main-content > section       { scroll-margin-top: 64px; }
@media (max-width: 640px)     { #main-content > section { scroll-margin-top: 0; } }
@media (max-width: 420px)     { html { scroll-padding-top: 56px; } }


/* ───────────────────────────────────────────────────────────────
   SNAP CONTAINER & SNAP POINTS
   (CSS guard: same size condition as the JS check)
─────────────────────────────────────────────────────────────── */
@media (min-height: 500px) {

  html.page-scroll-ready,
  html.page-scroll-ready body {
    height: 100%;
    overflow: hidden;
  }

  /* Pull header out of stacking so the snap container sits right below it */
  html.page-scroll-ready .site-header { position: relative; }

  /* THE SNAP CONTAINER */
  html.page-scroll-ready #main-content {
    height: calc(100dvh - 64px);
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    overscroll-behavior: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  html.page-scroll-ready #main-content::-webkit-scrollbar { display: none; }

  /* EACH SECTION = ONE FULL VIEWPORT "PAGE" */
  html.page-scroll-ready #main-content > section {
    height:     calc(100dvh - 64px);
    min-height: calc(100dvh - 64px);
    max-height: calc(100dvh - 64px);
    overflow:   hidden;
    scroll-snap-align: start;
    scroll-snap-stop:  always;   /* ← never skip a section mid-momentum */
    scroll-margin-top: 0;
    box-sizing: border-box;
  }
}

/* ── Mobile header is 56px (≤ 420px) — correct section heights ── */
@media (max-width: 420px) {
  html.page-scroll-ready #main-content {
    height: calc(100dvh - 56px);
  }
  html.page-scroll-ready #main-content > section {
    height:     calc(100dvh - 56px);
    min-height: calc(100dvh - 56px);
    max-height: calc(100dvh - 56px);
  }
}


/* ───────────────────────────────────────────────────────────────
   CONTENT COMPRESSION
   Makes every section's content fit inside one viewport height.
   All rules are gated on html.page-scroll-ready so they are
   100 % inert in normal (non-snap) mode.
─────────────────────────────────────────────────────────────── */

/* ── Global ── */
html.page-scroll-ready .section-inner,
html.page-scroll-ready .contact-inner {
  padding-top:    clamp(12px, 1.8vh, 24px);
  padding-bottom: clamp(12px, 1.8vh, 20px);
}

html.page-scroll-ready .section-eyebrow {
  font-size: .67rem;
  margin-bottom: 6px;
}

html.page-scroll-ready .section-headline {
  font-size: clamp(1.15rem, 2.2vw, 1.75rem);
  line-height: 1.14;
  margin-bottom: 10px;
}

/* ── 1 · Hero ── */
html.page-scroll-ready .s-hero {
  padding-top: 0;
  padding-bottom: 0;
  min-height: unset;
  display: flex;
  flex-direction: column;
}

html.page-scroll-ready .hero-layout {
  flex: 1;
  min-height: 0;
  padding-block: 6px 6px;
  gap: clamp(18px, 3.5vw, 52px);
}

html.page-scroll-ready .avail-badge  { margin-bottom: 8px; }

html.page-scroll-ready .hero-headline {
  font-size: clamp(1.35rem, 2.7vw, 2.4rem);
  margin-bottom: 8px;
}

html.page-scroll-ready .hero-sub {
  font-size: clamp(.78rem, 1.1vw, .98rem);
  line-height: 1.48;
  margin-bottom: 12px;
}

html.page-scroll-ready .hero-actions {
  gap: 8px;
  flex-wrap: nowrap;
}

html.page-scroll-ready .cta-primary,
html.page-scroll-ready .cta-ghost {
  padding: 9px 16px;
  font-size: .83rem;
}

html.page-scroll-ready .android-dl-wrap { margin-top: 8px; }

html.page-scroll-ready .showcase-stage {
  min-height: clamp(140px, 28vh, 300px);
}

html.page-scroll-ready .showcase-meta { margin-top: -6px; }

/* Hero layout grid must shrink, not overflow */
html.page-scroll-ready .hero-layout {
  overflow: hidden;
  align-items: center;
}

html.page-scroll-ready .hero-stats {
  flex-shrink: 0;
  padding: 8px 0;
}
html.page-scroll-ready .stat-item strong { font-size: clamp(1.1rem, 2vw, 1.65rem); }
html.page-scroll-ready .stat-item span   { font-size: .66rem; }

/* ── 2 · Pain ── */
html.page-scroll-ready .pain-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin: 10px 0 9px;
}

html.page-scroll-ready .pain-card {
  padding: 11px 12px;
  gap: 7px;
  border-radius: 9px;
}

html.page-scroll-ready .pain-icon {
  width: 30px; height: 30px; border-radius: 7px;
}
html.page-scroll-ready .pain-icon svg { width: 16px; height: 16px; }

html.page-scroll-ready .pain-card p {
  font-size: .77rem;
  line-height: 1.38;
  margin: 0;
}

html.page-scroll-ready .pain-bridge {
  padding: 11px 14px;
  gap: 12px;
}
html.page-scroll-ready .pain-bridge p {
  font-size: .82rem;
  line-height: 1.38;
}
html.page-scroll-ready .cta-link { font-size: .82rem; }

/* ── 3 · Builds ── */
html.page-scroll-ready .builds-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 10px;
}

html.page-scroll-ready .build-card {
  padding: 12px;
  gap: 5px;
  border-radius: 11px;
}

html.page-scroll-ready .build-card-top { margin-bottom: 0; }

html.page-scroll-ready .build-icon {
  width: 28px; height: 28px; border-radius: 6px;
}
html.page-scroll-ready .build-icon svg { width: 16px; height: 16px; }

html.page-scroll-ready .build-num    { font-size: .6rem; }

html.page-scroll-ready .build-card h3 {
  font-size: .84rem;
  line-height: 1.22;
}

html.page-scroll-ready .build-card p {
  font-size: .75rem;
  line-height: 1.38;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

html.page-scroll-ready .build-tags { gap: 3px; margin-top: 1px; }
html.page-scroll-ready .build-tags li {
  padding: 2px 7px;
  font-size: .62rem;
}

/* ── 4 · Process ── */
html.page-scroll-ready .section-lead {
  font-size: .85rem;
  line-height: 1.48;
  margin-bottom: 16px;
}

html.page-scroll-ready .process-track { margin-top: 16px; }

html.page-scroll-ready .step-num {
  font-size: 1.7rem;
  margin-bottom: 1px;
}
html.page-scroll-ready .step h3 { font-size: .86rem; }
html.page-scroll-ready .step p  { font-size: .77rem; line-height: 1.38; }

html.page-scroll-ready .step-connector {
  font-size: 1rem;
  margin-top: 10px;
  padding: 0 4px;
}

/* ── 5 · Contact ── */
html.page-scroll-ready .contact-inner {
  gap: 32px;
  align-items: center;
}

html.page-scroll-ready .contact-headline {
  font-size: clamp(1.15rem, 2.1vw, 1.7rem);
  margin-bottom: 8px;
}
html.page-scroll-ready .contact-sub {
  font-size: .85rem;
  line-height: 1.48;
  margin-bottom: 12px;
}
html.page-scroll-ready .contact-trust { gap: 6px; }
html.page-scroll-ready .contact-trust li { font-size: .77rem; }

html.page-scroll-ready .lead-form { gap: 8px; }
html.page-scroll-ready .form-row  { gap: 8px; }

html.page-scroll-ready .field input,
html.page-scroll-ready .field textarea {
  padding: 8px 11px;
}
html.page-scroll-ready .field textarea { min-height: 56px; }

html.page-scroll-ready .cta-submit {
  padding: 10px 18px;
  font-size: .88rem;
}
html.page-scroll-ready .form-note { font-size: .68rem; }


/* ═══════════════════════════════════════════════════════════════
   PROGRESS RAIL  — right-edge vertical track + pill indicator
   Injected by page-scroll.js as  .psd-rail > button.psd
   ═══════════════════════════════════════════════════════════════ */
@media (min-height: 500px) {

  /* ── Rail container ── */
  .psd-rail {
    position: fixed;
    right: 20px;
    left: auto;        /* always reset — RTL override below moves it */
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 400;
    padding: 6px 0;   /* breathing room so track line reaches first/last dot centres */
    margin: 0;
    list-style: none;
    background: none;
    border: none;
  }

  /* ── Continuous vertical track line (behind the dots) ── */
  .psd-rail::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    transform: translateX(-50%);
    width: 1.5px;
    /* neutral gradient — visible on both dark & light sections */
    background: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(150, 150, 150, 0.25) 12%,
      rgba(150, 150, 150, 0.25) 88%,
      transparent 100%
    );
    border-radius: 1px;
    pointer-events: none;
    z-index: 0;
  }

  /* ── Individual dots ── */
  .psd-rail .psd {
    position: relative;
    z-index: 1;
    display: block;
    /* use a wider hit-target via padding, visual via box-shadow ring */
    width: 6px;
    height: 6px;
    border-radius: 3px;
    padding: 0;
    background: rgba(150, 150, 150, 0.45);
    border: none;
    /* subtle ring makes it visible on both dark and light backgrounds */
    box-shadow:
      0 0 0 1.5px rgba(255, 255, 255, 0.12),
      0 0 0 2.5px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    flex-shrink: 0;
    transition:
      height     .28s cubic-bezier(.4, 0, .2, 1),
      width      .28s cubic-bezier(.4, 0, .2, 1),
      background .28s cubic-bezier(.4, 0, .2, 1),
      box-shadow .28s cubic-bezier(.4, 0, .2, 1);
  }

  /* ── Active dot — elongated coral pill ── */
  .psd-rail .psd.active {
    height: 22px;
    width: 6px;
    background: #F03D1C;
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.18),
      0 0 12px rgba(240, 61, 28, 0.55);
  }

  /* Expanded click area without changing visual size */
  .psd-rail .psd::after {
    content: '';
    position: absolute;
    inset: -8px -10px;
  }

  /* ── Swipe hint — fades in then out once ── */
  .psd-cue {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    z-index: 400;
    pointer-events: none;
    opacity: 0;
    animation: psdFade 3s ease 1.6s forwards;
  }

  .psd-cue-arrow {
    display: block;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.45);
    animation: psdBob .9s ease-in-out 1.6s 2 alternate;
  }

  .psd-cue-text {
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.25);
  }

  @keyframes psdFade {
    0%   { opacity: 0; }
    10%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0; }
  }

  @keyframes psdBob {
    from { transform: translateY(0); }
    to   { transform: translateY(-9px); }
  }

} /* end @media snap-mode rail */


/* ═══════════════════════════════════════════════════════════════
   LARGE DESKTOP  ≥ 1024px — restore readable sizes
   Compression was tuned for 768-1023px viewports.
   On wide screens content fits naturally — don't over-shrink it.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  html.page-scroll-ready .section-eyebrow  { font-size: .8rem; }
  html.page-scroll-ready .section-headline { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }

  html.page-scroll-ready .hero-headline    { font-size: clamp(1.9rem, 3.2vw, 3rem); }
  html.page-scroll-ready .hero-sub         { font-size: clamp(.92rem, 1.2vw, 1.05rem); line-height: 1.55; }

  html.page-scroll-ready .pain-grid        { gap: 12px; margin: 14px 0 12px; }
  html.page-scroll-ready .pain-card        { padding: 16px 18px; gap: 10px; border-radius: 11px; }
  html.page-scroll-ready .pain-icon        { width: 36px; height: 36px; border-radius: 9px; }
  html.page-scroll-ready .pain-icon svg    { width: 20px; height: 20px; }
  html.page-scroll-ready .pain-card p      { font-size: .88rem; line-height: 1.5; }
  html.page-scroll-ready .pain-bridge p   { font-size: .9rem; }
  html.page-scroll-ready .cta-link         { font-size: .9rem; }

  html.page-scroll-ready .builds-grid      { gap: 12px; }
  html.page-scroll-ready .build-card       { padding: 16px; gap: 8px; border-radius: 13px; }
  html.page-scroll-ready .build-icon       { width: 34px; height: 34px; border-radius: 8px; }
  html.page-scroll-ready .build-icon svg   { width: 19px; height: 19px; }
  html.page-scroll-ready .build-card h3    { font-size: .97rem; }
  html.page-scroll-ready .build-card p     { font-size: .83rem; line-height: 1.45; -webkit-line-clamp: 4; }
  html.page-scroll-ready .build-tags li    { font-size: .68rem; padding: 3px 8px; }

  html.page-scroll-ready .section-lead     { font-size: .92rem; }
  html.page-scroll-ready .step-num         { font-size: 2.3rem; }
  html.page-scroll-ready .step h3          { font-size: .96rem; }
  html.page-scroll-ready .step p           { font-size: .85rem; line-height: 1.5; }

  html.page-scroll-ready .contact-headline { font-size: clamp(1.5rem, 2.4vw, 2rem); }
  html.page-scroll-ready .contact-sub      { font-size: .92rem; }
  html.page-scroll-ready .contact-trust li { font-size: .82rem; }
}


/* ═══════════════════════════════════════════════════════════════
   MOBILE SNAP OVERRIDES  (phones ≤ 700px wide)
   Override the single-column grids so content fits in one screen.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {

  /* Rail: JS sets inline right/left via placeRail() — no CSS needed here */

  /* ── Safe zone: JS adds psd-side-right or psd-side-left to <html> ──
     Padding creates a content-free buffer wherever the dots are sitting.
     LTR (EN/RU): psd-side-right → 32px right padding
     RTL (HE):    psd-side-left  → 32px left  padding               */
  html.psd-side-right.page-scroll-ready #main-content > section {
    padding-right: 32px;
  }
  html.psd-side-left.page-scroll-ready #main-content > section {
    padding-left: 32px;
  }

  /* Pain cards: 2 columns instead of 1 — fits in viewport height */
  html.page-scroll-ready .pain-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px;
    margin: 8px 0 6px;
  }

  /* Pain bridge: restore horizontal layout */
  html.page-scroll-ready .pain-bridge {
    flex-direction: row !important;
    padding: 10px 12px;
    gap: 8px;
  }
  html.page-scroll-ready .pain-bridge p { font-size: .78rem; }

  /* Build cards: 2 columns instead of 1 */
  html.page-scroll-ready .builds-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px;
    margin-top: 8px;
  }

  /* Hero: text-center already set by hero-showcase.css on ≤700px */
  html.page-scroll-ready .android-dl-wrap {
    display: flex;
    justify-content: center;
  }

  /* Process: tighter step gaps on phone */
  html.page-scroll-ready .process-track {
    gap: 10px !important;
    margin-top: 10px;
  }
  html.page-scroll-ready .step-connector { display: none; }
}