/* ───────────────────────────────────────────────────────────
   cutreels.com landing — mobile proportion overlay
   Loaded after the main bundle CSS, so these rules win.
   Targets unprefixed Tailwind utilities used at mobile widths
   (the bundle's md:/lg: variants don't apply <768px / <1024px).
   ─────────────────────────────────────────────────────────── */

html, body {
  overflow-x: hidden;
}

img, video, iframe, svg, canvas {
  max-width: 100%;
}

/* Language button — injected by inline JS in index.html. Must look like a
   tinted glass pill at every viewport. iOS Safari paints <button> with a
   native white background unless we explicitly kill the platform style.
   These rules apply on all widths (not gated by the mobile media query). */
#cr-lang-btn {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: rgba(255,255,255,0.07) !important;
  background-color: rgba(255,255,255,0.07) !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  outline: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 9999px !important;
}
#cr-lang-btn:hover {
  background: rgba(255,255,255,0.14) !important;
  background-color: rgba(255,255,255,0.14) !important;
}

/* Phone portrait (Tailwind <sm = under 640px) */
@media (max-width: 639px) {
  /* Headline scale-down — without these, text-5xl/4xl on 360px viewports
     either wraps awkwardly or pushes layout. */
  .text-7xl { font-size: 2.75rem !important; line-height: 1.05 !important; }
  .text-6xl { font-size: 2.25rem !important; line-height: 1.1 !important; }
  .text-5xl { font-size: 2rem !important;    line-height: 1.1 !important; }
  .text-4xl { font-size: 1.75rem !important; line-height: 1.2 !important; }

  /* Section vertical padding — landing's py-24/py-20 wastes a lot of
     scroll real-estate on a phone */
  .py-24 { padding-top: 3rem !important;   padding-bottom: 3rem !important; }
  .py-20 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .pt-32 { padding-top: 5.5rem !important; }
  .pb-16 { padding-bottom: 2rem !important; }

  /* Side padding — keep at least a comfortable gutter without eating width */
  .px-12 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .px-8  { padding-left: 1rem !important; padding-right: 1rem !important; }
  .px-6  { padding-left: 1rem !important; padding-right: 1rem !important; }

  /* Feature preview row: was `flex h-[600px]` — collapse to natural height
     and stack any inner columns vertically */
  .h-\[600px\] { height: auto !important; min-height: 360px; }
  .flex.h-\[600px\] { flex-direction: column !important; }

  /* Decorative blurred glows — already inside overflow-hidden parents,
     but cap so they don't influence layout calc */
  .w-\[800px\] { max-width: 100vw; }

  /* Buttons/CTAs: don't let pill buttons run off-screen */
  .gap-8 { gap: 1.25rem !important; }
  .gap-12 { gap: 2rem !important; }

  /* "See the Magic" demo controls bar — 4 buttons in a flex-justify-between
     row with no responsive prefix. On phones, let it wrap and shrink the
     button padding so all 4 still fit. */
  .bg-bg-dark.flex.justify-between {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    padding: 0.75rem !important;
    justify-content: center !important;
  }
  .bg-bg-dark.flex.justify-between > div {
    gap: 0.5rem !important;
  }
  .bg-bg-dark.flex.justify-between button {
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    font-size: 0.75rem !important;
    flex-shrink: 1;
  }

  /* Top-nav fixed-bar (language + profile injected by inline script).
     Anchor it to the page-flow header zone so it doesn't cover the logo
     or float at an awkward offset on phones. */
  #cr-ui-bar {
    top: 12px !important;
    right: 12px !important;
    gap: 6px !important;
  }
  #cr-ui-bar > div > button,
  #cr-acct-btn,
  #cr-lang-btn {
    padding: 4px 8px !important;
    font-size: 10px !important;
    letter-spacing: 0.04em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  /* The language button is injected by inline JS (no Tailwind class). It
     ends up as a sibling of <button> elements which Tailwind's preflight
     resets to background:transparent. Force the glass styling and ensure
     it never inherits solid-white from any reset. */
  #cr-lang-btn {
    background: rgba(255,255,255,0.07) !important;
    color: #fff !important;
    border: none !important;
    outline: 1px solid rgba(255,255,255,0.15) !important;
    font-weight: 700 !important;
  }

  /* HEADER "Try for free" CTA — when translated to Russian
     ("Попробовать бесплатно") it's ~21 chars and wraps to 2 lines at
     phone width, ballooning the button height and shoving the language
     button off-axis. Cap padding/font-size and force single-line. */
  button.text-sm.neon-gradient.rounded-full,
  a.text-sm.neon-gradient.rounded-full {
    padding: 0.4rem 0.8rem !important;
    font-size: 0.7rem !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
  }

  /* Hero CTAs (Try for free / See how it works) on phones — the buttons
     are width:100% on mobile (sm:w-auto), but text-lg + py-4 makes them
     huge. Trim down a notch. */
  button.text-lg.neon-gradient.rounded-full,
  button.text-lg.glass.rounded-full {
    padding: 0.75rem 1rem !important;
    font-size: 0.95rem !important;
  }
}

/* Very narrow (≤380px — iPhone SE 1st-gen, Galaxy S8/S9, Pixel 4a) */
@media (max-width: 380px) {
  .text-7xl { font-size: 2.25rem !important; }
  .text-6xl { font-size: 2rem !important; }
  .text-5xl { font-size: 1.75rem !important; }
  .text-4xl { font-size: 1.5rem !important; }
  .px-6, .px-8, .px-12 { padding-left: 0.875rem !important; padding-right: 0.875rem !important; }
  .py-24 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
}