/* Feeberse Score — "download the app" landing (/download).
 *
 * Mobile-first marketing page adapted from the Stitch design canvas into the v2
 * design system: dark theme, Manrope body / Oswald titles, brand green accent.
 * On mobile everything is centered and the two phones stack below the copy; on
 * desktop the hero is two-column (copy left, phones right). The phones each run
 * a cross-fading screenshot carousel (download-carousel controller, opacity-only
 * → 60fps). Scoped under `.download-page` so nothing leaks into the app shell. */

@layer components {
  /* The page suppresses the app header — reclaim the sticky-header top padding. */
  body.download-page .app__content {
    padding-top: 0;
    /* Break out of the app's narrow reading column (--content-max-width is
       720px ≥768px / 960px ≥1440px). A marketing landing wants to be wide:
       let the page's own `.dl` (max-width 1080px) govern instead. Without
       this the whole hero is trapped in a 720px cage with huge black gutters
       and the two-column desktop hero can never breathe. */
    max-width: none;
  }

  .dl {
    max-width: 1080px;
    margin: 0 auto;
    padding: clamp(24px, 6vw, 56px) clamp(16px, 4vw, 40px) 72px;
    color: var(--color-text);
    font-family: var(--font-body);
  }

  /* ─── Hero ─── (mobile: centered, stacked) */
  .dl-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(28px, 7vw, 44px);
  }

  .dl-hero__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4);
    width: 100%;
  }

  /* The link carries the size (immune to the global `img { max-width: 100% }`
     that otherwise clamps the logo to its shrink-to-fit parent → 0). */
  .dl-logo-link {
    display: inline-block;
    width: 102px;
    height: 34px;
    line-height: 0;
    border-radius: var(--radius-sm);
  }

  .dl-logo-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
  }

  .dl-logo {
    display: block;
    width: 100%;
    height: 100%;
  }

  .dl-badge {
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 12px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    border-radius: var(--radius-full);
    padding: 6px 14px;
  }

  .dl-hero__title {
    margin: 0;
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: clamp(2.5rem, 11vw, 4.25rem);
    line-height: 0.98;
    letter-spacing: -0.5px;
    text-transform: uppercase;
  }

  .dl-hero__sub {
    margin: 0 auto;
    max-width: 30ch;
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--color-text-muted);
  }

  /* ─── Store badges ─── */
  .dl-stores {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
  }

  .dl-store {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px; /* touch target */
    padding: 8px 18px 8px 15px;
    border-radius: var(--radius-md);
    background: #000;
    border: 1px solid var(--color-surface-border);
    color: #fff;
    text-decoration: none;
    transition: transform var(--duration-fast) ease, border-color var(--duration-fast) ease;
  }

  .dl-store:hover {
    border-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
  }

  .dl-store:active {
    transform: scale(0.97);
  }

  .dl-store:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  .dl-store__logo {
    flex-shrink: 0;
  }

  .dl-store__txt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
  }

  .dl-store__txt small {
    font-size: 10px;
    letter-spacing: 0.3px;
    color: var(--color-text-muted);
  }

  .dl-store__txt strong {
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 16px;
  }

  /* ─── Two-phone hero device ─── */
  /* Two upright phones, overlapping and centered AS A PAIR (like the standalone):
     flex-centers the combined box; the back phone's negative margin pulls the
     front over it. No rotation. */
  .dl-hero__device {
    --dl-phone-w: min(172px, 46vw);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    isolation: isolate;
  }

  .dl-hero__device::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    margin: auto;
    width: min(360px, 88%);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 20%, transparent) 0%, transparent 68%);
    filter: blur(24px);
  }

  .dl-phone {
    position: relative;
    width: var(--dl-phone-w);
    aspect-ratio: 410 / 890;
    border-radius: 26px;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid rgb(255 255 255 / 12%);
    box-shadow: 0 22px 50px rgb(0 0 0 / 55%);
  }

  /* Back phone (left, behind): subtle vertical stagger + overlap into the front. */
  .dl-phone--back {
    z-index: 1;
    margin-right: calc(var(--dl-phone-w) * -0.32);
    transform: translateY(-4%);
    opacity: 0.94;
  }

  .dl-phone--front {
    z-index: 2;
    transform: translateY(4%);
    box-shadow:
      0 0 0 1px rgb(255 255 255 / 6%),
      0 30px 70px color-mix(in srgb, var(--color-accent) 16%, transparent),
      0 22px 50px rgb(0 0 0 / 60%);
  }

  /* Carousel slides — stacked, cross-fade on `.is-active` (opacity only). */
  .dl-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    opacity: 0;
    transition: opacity 0.7s ease;
  }

  .dl-slide.is-active {
    opacity: 1;
  }

  /* ─── Features ─── */
  /* Feature list — fine rows with a hairline divider (matches the mockup), not
     chunky cards. Lime icon in a subtle squared badge. */
  .dl-features {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: clamp(40px, 9vw, 64px);
  }

  .dl-feature {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 2px;
    border-top: 1px solid rgb(255 255 255 / 8%);
  }

  .dl-feature__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    color: #a8ff3e;
    background: var(--color-surface);
    border: 1px solid rgb(255 255 255 / 8%);
  }

  .dl-feature__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 2px;
  }

  .dl-feature__title {
    margin: 0;
    font-family: var(--font-title);
    font-weight: var(--weight-semibold);
    font-size: 17.5px;
    color: #fff;
  }

  .dl-feature__desc {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--color-text-muted);
  }

  /* ─── Bottom CTA ─── */
  .dl-cta {
    margin-top: clamp(48px, 9vw, 80px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
  }

  .dl-cta__title {
    margin: 0;
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: clamp(1.7rem, 6vw, 2.4rem);
    text-transform: uppercase;
  }

  .dl-cta__sub {
    margin: 0;
    max-width: 36ch;
    color: var(--color-text-muted);
  }

  /* ─── Desktop: two-column hero, left-aligned copy, bigger phones ─── */
  @media (min-width: 768px) {
    .dl-hero {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: clamp(28px, 4vw, 48px);
      min-height: 60vh;
    }

    .dl-hero__copy {
      align-items: flex-start;
      text-align: left;
      gap: var(--space-5, 28px);
      /* Grow to claim the column (basis 0, not auto) so `space-between` doesn't
         starve the copy and leave the wide title overflowing onto the phones. */
      flex: 1 1 0;
      min-width: 0; /* let the copy shrink so the phones stay inside .dl (no clip) */
    }

    /* Trim the title so the long "RESULTADOS" word fits the copy column and never
       slides under the phones (the word is one unbreakable token). */
    .dl-hero__title {
      font-size: clamp(2.5rem, 4.4vw, 3.5rem);
    }

    .dl-logo-link {
      width: 120px;
      height: 40px;
    }

    .dl-hero__sub {
      margin: 0;
    }

    .dl-stores {
      justify-content: flex-start;
    }

    .dl-hero__device {
      flex: 0 0 auto;
      /* Reset the mobile base `width: 100%` — otherwise the device eats the whole
         hero row (even at flex 0 0 auto) and crushes the copy. Size to the phones. */
      width: auto;
      /* Now that the page breaks out of the 720px cage, the right column has real
         room — size the phones up so the pair carries presence and the two-column
         hero reads balanced (not undersized floating in dead space). The clamp
         still lets the copy keep its width. */
      --dl-phone-w: min(208px, 19vw);
    }

    .dl-features {
      grid-template-columns: repeat(2, 1fr);
      column-gap: clamp(24px, 4vw, 56px);
      max-width: 860px;
      margin-inline: auto;
      margin-top: var(--space-4); /* the hero min-height already gives air — no big gap */
    }
  }

  /* ─── Reduced motion: kill the cross-fade transition (JS already won't auto-advance) ─── */
  @media (prefers-reduced-motion: reduce) {
    .dl-slide {
      transition: none;
    }
  }
}