/* ================================================================
   v2.css — Homepage V2  (all classes prefixed "v2-")
   Mobile-first → Tablet (640px+) → Desktop (1024px+)
   Zero collision with existing site styles.
   ================================================================ */

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  --v2-purple:     #9189f9;
  --v2-black:      #000;
  --v2-dark:       #111;
  --v2-border:     #1f1f1f;
  --v2-gray:       rgba(153,153,153,.8);
  --v2-white:      #fff;

  /* Carousel card dimensions (updated by breakpoints) */
  --v2-card-w:     224px;
  --v2-card-h:     280px;
  --v2-card-gap:   8px;
  /* Non-active scale: 163/224 ≈ 0.728 — keeps exact Figma side-card proportions */
  --v2-card-scale: 0.728;
}

@media (min-width: 640px) {
  :root { --v2-card-w: 280px; --v2-card-h: 350px; }
}

@media (min-width: 1024px) {
  :root {
    /*
      Desktop card height: dynamically fills the space between all fixed
      elements (overhead ≈ 401px: banner+header+breadcrumbs+hero+trust+cta+48px
      scale buffer). Clamped: 180px min so nothing collapses on tiny viewports,
      340px max to match Figma's 312px active card (Figma file MSRvS3hsmWW6CkEPaiJIBz
      node 85:2893 shows active card 312×250, so we keep ≤340 to stay clean).
    */
    --v2-card-h: clamp(180px, calc(100vh - 401px), 340px);
    /* Width = height × (250/312) ≈ 0.801 — preserves Figma's active card ratio */
    --v2-card-w: calc(var(--v2-card-h) * 0.801);
  }
}

/* ── Reset ─────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--v2-black);
  color:       var(--v2-white);
  font-family: 'Inter', sans-serif;
  min-height:  100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Page wrapper ──────────────────────────────────────────── */
.v2-page {
  max-width: 430px;
  margin:    0 auto;
  display:   flex;
  flex-direction: column;
  align-items:    stretch;
}

@media (min-width: 640px)  { .v2-page { max-width: 768px;  } }
@media (min-width: 1024px) { .v2-page { max-width: 100%;   } }

/* ── Banner ────────────────────────────────────────────────── */
.v2-banner {
  background:      var(--v2-purple);
  height:          32px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             6px;
}

.v2-banner-text {
  font-weight:     500;
  font-size:       12px;
  color:           #111;
  letter-spacing:  .3px;
  white-space:     nowrap;
}

.v2-banner-sep       { opacity: .45; }
.v2-banner-hide-sm   { display: none; }
.v2-banner-icon      { flex-shrink: 0; }

@media (min-width: 640px) {
  .v2-banner-hide-sm { display: inline; }
}

/* ── Header ────────────────────────────────────────────────── */
.v2-header {
  border-bottom:   1px solid var(--v2-border);
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         8px 0;
}

.v2-logo-link {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             4px;
  text-decoration: none;
  color:           var(--v2-white);
}

.v2-logo-name {
  font-family:     'Playfair Display', Georgia, serif;
  font-style:      italic;
  font-weight:     700;
  font-size:       22px;
  line-height:     1;
  letter-spacing:  .04em;
}

.v2-logo-tagline {
  font-weight:     500;
  font-size:       7px;
  letter-spacing:  .26em;
  text-transform:  uppercase;
  opacity:         .65;
}

@media (min-width: 640px) {
  .v2-logo-name    { font-size: 28px; }
  .v2-logo-tagline { font-size: 8px;  }
}

@media (min-width: 1024px) {
  .v2-logo-name    { font-size: 32px; }
  .v2-logo-tagline { font-size: 9px;  }
}

/* ── Progress / breadcrumbs ────────────────────────────────── */
.v2-progress {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-wrap:       nowrap;
  white-space:     nowrap;
  gap:             4px;
  padding:         8px 12px;
  border-bottom:   1px solid var(--v2-border);
  list-style:      none;
  overflow:        hidden;
}

.v2-progress-step {
  font-size:       10px;
  font-weight:     500;
  letter-spacing:  .2px;
  white-space:     nowrap;
  flex-shrink:     0;
}

.v2-progress-step--active {
  color: var(--v2-white);
}

.v2-progress-step--dim {
  color: var(--v2-gray);
}

.v2-progress-chevron {
  color:       var(--v2-gray);
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .v2-progress      { padding: 10px 24px; gap: 6px; }
  .v2-progress-step { font-size: 11px; }
}

/* ── Trustpilot bar ────────────────────────────────────────── */
.v2-trustpilot {
  border-top:      1px solid var(--v2-border);
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  padding:         14px 0;
  margin-top:      4px;
}

.v2-tp-score {
  font-family:     'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight:     500;
  font-size:       14px;
  color:           var(--v2-white);
  text-decoration: underline;
  white-space:     nowrap;
}

.v2-tp-stars {
  display:         flex;
  gap:             2px;
  align-items:     center;
}

.v2-tp-star {
  width:           18px;
  height:          18px;
  fill:            #00b67a;
  flex-shrink:     0;
}

.v2-tp-logo {
  font-weight:     500;
  font-size:       14px;
  color:           var(--v2-white);
  display:         flex;
  align-items:     center;
  gap:             4px;
  white-space:     nowrap;
}

/* ── Hero ──────────────────────────────────────────────────── */
.v2-hero {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  text-align:      center;
  padding:         16px 20px 6px;
}

.v2-hero-title {
  font-family:     'Playfair Display', Georgia, serif;
  font-weight:     700;
  font-style:      italic;
  font-size:       36px;
  line-height:     36px;
  color:           var(--v2-white);
  max-width:       320px;
}

@media (min-width: 640px) {
  .v2-hero         { padding: 28px 32px 20px; }
  .v2-hero-title   { font-size: 48px; line-height: 56px; max-width: 500px; }
}

@media (min-width: 1024px) {
  .v2-hero         { padding: 4px 32px 10px; }
  .v2-hero-title   { font-size: 48px; line-height: 56px; max-width: none; white-space: nowrap; }
}

/* ── Carousel ──────────────────────────────────────────────── */

/* Full-width container so gallery bleeds edge-to-edge on all breakpoints */
.v2-carousel-wrap { width: 100%; }

/*
  Scroll container
  • overflow-x: scroll + scroll-snap gives native swipe on mobile
  • Cards are direct flex children → snap applies
  • horizontal padding set by JS (centers first/last real card)
  • scroll-padding set by JS (aligns snap point to visual center)
*/
.v2-carousel {
  display:          flex;
  align-items:      center;
  gap:              var(--v2-card-gap);
  /* height accommodates active card + top/bottom overflow of scale */
  height:           calc(var(--v2-card-h) + 48px);
  overflow-x:       scroll;
  overflow-y:       hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width:  none;          /* Firefox */
  -ms-overflow-style: none;        /* IE/Edge */
  -webkit-overflow-scrolling: touch;
  cursor:           grab;
  will-change:      scroll-position;
}

.v2-carousel:active        { cursor: grabbing; }
.v2-carousel::-webkit-scrollbar { display: none; }

/* ── Card ──────────────────────────────────────────────────── */
.v2-carousel-card {
  flex-shrink:      0;
  width:            var(--v2-card-w);
  height:           var(--v2-card-h);
  border-radius:    12px;
  overflow:         hidden;
  scroll-snap-align: center;
  background:       var(--v2-dark);

  /* Non-active: scaled down to Figma's "side card" proportions */
  transform:        scale(var(--v2-card-scale));
  transform-origin: center;
  opacity:          .72;

  transition:
    transform .45s cubic-bezier(.4,0,.2,1),
    opacity   .45s ease;
}

/* Active / centered card: full size */
.v2-carousel-card.active {
  transform: scale(1);
  opacity:   1;
}

.v2-carousel-card img {
  width:              100%;
  height:             100%;
  object-fit:         cover;
  object-position:    top center;
  display:            block;
  user-select:        none;
  -webkit-user-drag:  none;
  pointer-events:     none; /* prevent drag interfering with scroll */
}

/* ── Skeleton (shimmer while CRM images load) ──────────────── */
.v2-carousel-skel {
  /* same flex sizing as a real card */
  flex-shrink:     0;
  width:           var(--v2-card-w);
  height:          var(--v2-card-h);
  border-radius:   12px;
  scroll-snap-align: center;
  background:      linear-gradient(90deg,#1a1a1a 25%,#252525 50%,#1a1a1a 75%);
  background-size: 400% 100%;
  animation:       v2-shimmer 1.6s ease-in-out infinite;
}

/* Skeletons: center active (middle) skeleton, shrink others */
.v2-carousel-skel:not(:nth-child(3)) {
  transform: scale(var(--v2-card-scale));
  opacity:   .6;
}

@keyframes v2-shimmer {
  0%   { background-position:  100% 0; }
  100% { background-position: -100% 0; }
}

/* ── CTA ───────────────────────────────────────────────────── */
.v2-cta {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             8px;
  padding:         16px 16px 36px;
}

.v2-cta-btn {
  background:    var(--v2-purple);
  border:        none;
  border-radius: 100px;
  /* Figma: 366px — shrink gracefully on narrow screens */
  width:         min(366px, 100%);
  padding:       23px 24px;
  font-weight:   900;
  font-size:     14px;
  color:         #231811;
  text-align:    center;
  letter-spacing: .28px;
  cursor:        pointer;
  white-space:   nowrap;
  transition:    opacity .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
  line-height:   normal;
}

.v2-cta-btn:hover    { opacity: .9; }
.v2-cta-btn:active   { opacity: .8; transform: scale(.98); }
.v2-cta-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.v2-cta-note {
  font-size:   12px;
  line-height: 16px;
  color:       var(--v2-gray);
  text-align:  center;
}

@media (min-width: 640px) {
  .v2-cta        { padding: 8px 24px 48px; }
  .v2-cta-btn    { font-size: 15px; width: min(420px, 100%); }
}

@media (min-width: 1024px) {
  .v2-cta        { padding: 12px 24px 24px; }
  .v2-cta-btn    { font-size: 16px; padding: 25px 40px; width: min(420px, 100%); }
}

/* ── Mobile-only overrides (max-width: 639px) ──────────────── */
/*
  All fixes are scoped strictly to narrow viewports.
  Desktop (≥1024px) is completely untouched.
*/
@media (max-width: 639px) {
  /* [1] Headline → carousel gap: reduce breathing room in carousel container
         Carousel height = card height + vertical breathing; cutting from +48px
         to +28px reduces the top/bottom dead-space by ~40%, tightening the
         gap between the headline and the top of the card. */
  .v2-carousel {
    height: calc(var(--v2-card-h) + 28px);
  }

  /* [2] Carousel image gap: halved from 8px → 4px */
  .v2-carousel,
  .v2-carousel-skel {
    gap: 4px;
  }
  :root {
    --v2-card-gap: 4px;
  }

  /* [3] Trustpilot + CTA gap: cut both sides by ~50%
         Before: trustpilot padding 14px + CTA top padding 16px = 30px gap
         After:  trustpilot padding  7px + CTA top padding  8px = 15px gap */
  .v2-trustpilot {
    padding:    7px 0;
    margin-top: 2px;
  }
  .v2-cta {
    padding-top: 8px;
  }

  /* [4] Active card size: reduce from 224×280 to 200×250 (~11% smaller)
         max-width ensures it never overflows; border-radius preserved.
         Side cards scale by var(--v2-card-scale) = 0.728 → ~146×182px */
  :root {
    --v2-card-w: 200px;
    --v2-card-h: 250px;
  }
}

/* ── Tablet + Desktop full-viewport layout (≥768px) ───────── */
/*
  Applied to all screens ≥768px (tablet, laptop, desktop).
  Mobile (<768px) is completely untouched.

  Core idea:
    .v2-page is a flex column locked to 100vh.
    .v2-carousel-wrap gets flex:1 — it absorbs ALL remaining vertical
    space after the fixed-height header/hero/trust/cta elements.
    .v2-carousel fills its wrapper → on tablet the scroll-snap cards sit
    centered in the tall container; on desktop the JS conveyor belt track
    does the same (position:absolute; align-items:center already centers cards).
    Result: CTA is always gravity-anchored to the bottom, zero empty space.
*/
@media (min-width: 768px) {
  /* ① Lock scroll at document level */
  html {
    overflow:   hidden;
    height:     100vh;
  }
  body {
    overflow:   hidden;
    height:     100vh;
    min-height: unset;
  }

  /* ② Page wrapper = full-height flex column */
  .v2-page {
    height:   100vh;
    overflow: hidden;
  }

  /* ③ Carousel wrap absorbs all leftover vertical space */
  .v2-carousel-wrap {
    flex:           1 1 0;   /* grow to fill, allow shrink, base 0 */
    min-height:     0;       /* critical: lets flex child shrink past content size */
    display:        flex;
    flex-direction: column;
  }

  /* ④ Carousel itself fills its wrapper */
  .v2-carousel {
    flex:       1 1 0;
    min-height: 0;
    height:     auto;        /* override any px-based height from smaller breakpoints */
  }

  /* ⑤ Tighter hero padding on large screens */
  .v2-hero { padding: 12px 32px 8px; }

  /* ⑥ Compact trustpilot strip */
  .v2-trustpilot {
    padding:    10px 0;
    margin-top: 0;
  }

  /* ⑦ Breadcrumbs: tighter vertical padding */
  .v2-progress { padding: 8px 24px; }
}

/* ── Desktop conveyor-belt overrides (≥1024px) ─────────────── */
/*
  The flex layout is already established by the 768px block above.
  This block adds conveyor-belt–specific styles on top:
    • turns off scroll-snap
    • makes the carousel a clipping window (overflow:hidden, position:relative)
    • injects the absolute-positioned moving track via JS
  Card sizes (250×312px) are fixed to match JS constants D_ITEM_W/D_ITEM_H.
  Cards sit vertically centered inside the flex-grown carousel container.
*/
@media (min-width: 1024px) {
  /* ⑤ Desktop carousel: conveyor belt (translateX track, distance-based scale)
       ─────────────────────────────────────────────────────────────────────────
       Architecture:
         .v2-carousel  (overflow:hidden, position:relative — the "window")
           .v2-carousel-track  (position:absolute, flex row — the "belt")
             .v2-carousel-card × (3n items)  — scale set by JS per rAF frame

       Center is FIXED at carousel.clientWidth / 2.
       Track moves via translateX — items slide under the fixed center.
       Scale = 1.0 at center, falls off linearly with distance.
       Loop: when track advances one full set (n × TRACK_UNIT), subtract
       that width — content is identical so no visible jump.
  */
  .v2-carousel {
    overflow:         hidden;
    position:         relative;   /* needed for absolute track child */
    justify-content:  center;     /* only affects skeleton flex children */
    gap:              12px;       /* only affects skeleton flex children */
    scroll-snap-type: none;
    cursor:           grab;
    /* height is now driven by flex:1 from the ≥768px block —
       the carousel expands to fill all space between hero and CTA */
  }

  .v2-carousel:active { cursor: grabbing; }

  /* The moving belt — positioned absolutely so it ignores the flex layout
     of the carousel container (which is only used for skeleton display) */
  .v2-carousel-track {
    position:    absolute;
    top:         0;
    left:        0;
    height:      100%;
    display:     flex;
    gap:         16px;
    align-items: center;
    will-change: transform;
  }

  /* Card layout: width + height are set as inline styles by dComputeSizes()
     so they scale with the carousel container's live height.
     CSS only supplies the transform origin, transition override, and resets. */
  .v2-carousel-card {
    flex-shrink:      0;
    /* width / height → set by JS (dComputeSizes → buildDesktop / dRecalcOnResize) */
    transform-origin: center center;
    transition:       none;   /* no CSS transition — JS drives every frame */
    scroll-snap-align: none;
    opacity:          1;
  }

  /* Skeleton fallback: uses viewport-relative sizing so it matches
     the dynamic card sizes while images load.
     Side skeletons = 72% of active (D_MIN_SCALE) — approximate via vh. */
  .v2-carousel-skel {
    width:     calc((100vh - 260px) * 0.85 * 0.801 * 0.72);
    height:    calc((100vh - 260px) * 0.85 * 0.72);
    transform: none;
    opacity:   0.75;
  }
  .v2-carousel-skel:nth-child(4) {
    width:    calc((100vh - 260px) * 0.85 * 0.801);
    height:   calc((100vh - 260px) * 0.85);
    opacity:  1;
  }
}

/* ── Upload overlay ────────────────────────────────────────── */
.v2-overlay {
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,.85);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             16px;
  z-index:         9999;
}

.v2-overlay.hidden { display: none; }

.v2-spinner {
  width:        40px;
  height:       40px;
  border:       3px solid rgba(145,137,249,.22);
  border-top-color: var(--v2-purple);
  border-radius: 50%;
  animation:    v2-spin .8s linear infinite;
}

@keyframes v2-spin { to { transform: rotate(360deg); } }

.v2-overlay-msg {
  font-size: 14px;
  color:     rgba(255,255,255,.7);
}