/* ============================================================
   RESPONSIVE HARDENING LAYER
   ------------------------------------------------------------
   Loaded LAST on every page so it wins the cascade.
   Goal: identical, perfectly-aligned experience on ANY screen
   size — from 320px phones to 4K / ultrawide — without touching
   the scroll-animation choreography.

   Canonical breakpoints used throughout this file:
     1280px  large desktop / small-desktop boundary
     1024px  tablet landscape
      768px  tablet portrait
      600px  large phone
      420px  standard phone
      360px  small phone
   This file is purely additive: delete it to revert everything.
   ============================================================ */

/* ------------------------------------------------------------
   1. GLOBAL OVERFLOW + BOX-MODEL GUARD
   The #1 cause of "everything is misaligned on my phone" is a
   single element bleeding past the viewport width, which creates
   a horizontal scrollbar and shifts the whole page sideways.
   `overflow-x: clip` kills that WITHOUT creating a scroll
   container (so it never breaks position:fixed/sticky elements,
   unlike overflow:hidden). A hidden fallback covers old browsers.
   ------------------------------------------------------------ */
html {
  overflow-x: hidden;   /* fallback for browsers without clip   */
  overflow-x: clip;     /* preferred: no scroll-container side-effects */
}

body {
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
}

*, *::before, *::after { box-sizing: border-box; }

/* ------------------------------------------------------------
   2. MEDIA SAFETY
   No image, video, svg or canvas may ever exceed its container
   and force horizontal overflow. (max-width only — never touch
   height, so images sized height:100% of a fixed parent are
   left intact.)
   ------------------------------------------------------------ */
img, svg, video, canvas { max-width: 100%; }

/* Long unbroken strings (URLs, codes) must wrap, not overflow. */
p, li, h1, h2, h3, h4, h5, span, a, td, th { overflow-wrap: break-word; }

/* ============================================================
   3. HOMEPAGE — ANIMATED SCROLL EXPERIENCE (index.html)
   These selectors only exist on the homepage, so the rules are
   inert on every other page.
   ============================================================ */

/* ---- 3a. op1 narration sentence ----
   It is forced to one line on desktop (white-space:nowrap) for a
   dramatic single-line reveal. On anything narrower than a wide
   desktop that single line runs off the screen. Allow it to wrap
   into balanced lines — the JS reveals it word-by-word either way. */
@media (max-width: 1024px) {
  #op1Text {
    white-space: normal !important;
    width: min(88vw, 760px) !important;
    max-width: 88vw !important;
    line-height: 1.55 !important;
    text-wrap: balance;
  }
}

/* ---- 3b. Kill forced justification on narrow screens ----
   `text-align-last: justify` stretches the final line edge-to-edge,
   producing big ragged word-gaps on phones that read as "misaligned".
   Switch the closing CTA + hero copy to clean centered text. */
@media (max-width: 900px) {
  #finalCta p {
    text-align: center !important;
    text-align-last: center !important;
  }
}

/* Keep the closing PIXMAP message justified on laptop and desktop layouts. */
@media (min-width: 901px) {
  #finalCta p {
    text-align: justify !important;
    text-align-last: justify !important;
  }
}

/* ---- 3c. Hero tagline: prevent crowding the logo on phones ---- */
@media (max-width: 820px) {
  .hero-copy {
    text-align: center !important;
    text-align-last: center !important;
    /* tighter leading so each paragraph occupies less vertical space
       and clears the centred logo on shorter screens */
    line-height: 1.7 !important;
  }
}

@media (max-width: 600px) {
  .hero-copy {
    font-size: clamp(0.82rem, 4vw, 1.05rem) !important;
    line-height: 1.6 !important;
    padding-left: clamp(14px, 5vw, 28px) !important;
    padding-right: clamp(14px, 5vw, 28px) !important;
    text-align: justify !important;
    text-align-last: justify !important;
  }
  /* Close the gap between paragraphs and logo, with equal fluid spacing on both sides */
  .hero-copy.left {
    bottom: auto !important;
    top: calc((50% + var(--header-h) / 2) - clamp(120px, 42vw, 150px) / 2 - 24px) !important;
    transform: translateY(-100%) !important;
  }
  .hero-copy.right {
    bottom: auto !important;
    top: calc((50% + var(--header-h) / 2) + clamp(120px, 42vw, 150px) / 2 + clamp(22px, 4vh, 32px)) !important;
  }
}

/* Very short screens (landscape phones): shrink copy further so the
   two paragraphs + logo never collide. */
@media (max-height: 560px) and (orientation: landscape) {
  .hero-copy { font-size: clamp(0.6rem, 2.1vh, 0.8rem) !important; line-height: 1.5 !important; }
}

/* Hide USP media inside cards on desktop/web (shown via `#uspMedia` instead) */
.usp-card-media {
  display: none;
}

/* ---- 3d. USP cards mobile responsiveness (max-width: 820px) ---- */
@media (max-width: 820px) {


  #sem1Bg {
    display: block !important;
    width: 92vw !important;
    max-width: 92vw !important;
    max-height: 48vh !important;
    background-color: transparent !important;
    border-radius: 8px !important;
    z-index: 485 !important;
  }

  #sem1Bg img {
    border-radius: 8px !important;
    box-shadow: 0 0 20px rgba(68, 175, 229, 0.2) !important;
  }

  .usp-highlight-small {
    transform-origin: center center !important;
    transform: scale(3.5) !important;
  }

  #patchFinal {
    display: block !important;
    left: 4vw !important;
    right: 4vw !important;
    top: calc(50% + var(--header-h) / 2) !important;
    z-index: 490 !important;
  }

  #uspMedia {
    display: block !important;
    width: clamp(90px, 34vw, 150px) !important;
    z-index: 492 !important;
    transform: translate(-50%, 15px) !important;
  }

  .usp-media-img {
    max-height: clamp(70px, 10vh, 100px) !important;
  }

  .usp-media-over {
    max-height: none !important;
    max-width: 60vw !important;
    height: 11vh !important;
  }

  /* Make each USP card container take up full screen so its children position absolute relative to viewport */
  .usp-card {
    position: fixed !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    overflow: visible !important;
  }

  /* Title: uppercase, bold, centered, top of viewport */
  .usp-title {
    position: absolute !important;
    top: calc(50% + var(--header-h) / 2 - clamp(130px, 32vw, 210px)) !important;
    left: 10px !important;
    right: 10px !important;
    text-align: center !important;
    font-family: 'Outfit', 'Open Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: clamp(0.85rem, 3.8vw, 1.05rem) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95) !important;
    margin-bottom: 0 !important;
    z-index: 490 !important;
  }

  /* Let children of card-body escape flow and absolute-position relative to card */
  .usp-card-body {
    display: contents !important;
  }

  /* Description (subheading): centered over the upper-middle of sem1Bg, smaller font */
  .usp-desc {
    position: absolute !important;
    top: calc(50% + var(--header-h)/2 - clamp(80px, 20vw, 130px)) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: inline-block !important;
    width: fit-content !important;
    max-width: 200px !important;
    text-align: center !important;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 400 !important;
    font-size: clamp(0.52rem, 2.2vw, 0.64rem) !important;
    line-height: 1.45 !important;
    letter-spacing: -0.01em !important;
    color: rgba(240, 248, 255, 0.98) !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.98), 0 1px 4px rgba(0, 0, 0, 0.95) !important;
    z-index: 490 !important;
    margin: 0 auto !important;
  }

  /* Hide the card's local media since we use the global animated #uspMedia */
  .usp-card-media {
    display: none !important;
  }

  /* Rapid Patch Workflow overrides (Active index 0) */
  body.active-idx-0 #patchFinal {
    display: none !important;
  }
  body.active-idx-0 #uspMedia {
    width: clamp(80px, 30vw, 130px) !important;
  }
  body.active-idx-0 .usp-media-img {
    max-height: clamp(50px, 9vh, 80px) !important;
  }
  body.active-idx-0 .usp-media-over {
    height: 8vh !important;
  }
  body.active-idx-0 .usp-desc {
    font-size: clamp(0.48rem, 2.0vw, 0.58rem) !important;
    width: 54vw !important;
    max-width: 180px !important;
    line-height: 1.40 !important;
    top: calc(50% + var(--header-h)/2 - clamp(72px, 18vw, 115px)) !important;
  }
  body.active-idx-0 .usp-title {
    font-size: clamp(0.92rem, 4.2vw, 1.15rem) !important;
  }
}

/* ---- 3e. op1 scene mobile responsiveness ---- */
@media (max-width: 820px) {
  #op1Scene {
    width: min(92vw, calc((100vh - var(--header-h) - 100px) * 1.77778)) !important;
  }
}

/* ---- 3f. Narrative panels layout (3 above, 3 below the image on mobile) ---- */
@media (max-width: 820px) {
  .op1-panel {
    display: block !important;
    position: fixed !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45) !important;
    padding: 0 !important;
    transform: translateY(12px) !important;
    transition: opacity 0.5s ease, transform 0.5s ease !important;
  }

  .op1-panel.visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  .op1-panel-inner {
    padding: 8px 8px !important;
    min-height: auto !important;
  }

  .op1-panel-title {
    font-size: clamp(0.44rem, 2.0vw, 0.54rem) !important;
    margin-bottom: 2px !important;
    letter-spacing: 0.04em !important;
  }

  .op1-panel-desc {
    font-size: clamp(0.38rem, 1.7vw, 0.48rem) !important;
    line-height: 1.25 !important;
    text-align: justify !important;
    text-align-last: center !important;
    display: block !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    line-clamp: none !important;
  }
}

/* ---- 3g. Final CTA font scale on mobile ---- */
@media (max-width: 600px) {
  #finalCta p {
    font-size: clamp(0.95rem, 5vw, 1.2rem) !important;
    line-height: 1.65 !important;
    text-align: justify !important;
    text-align-last: justify !important;
  }
}

/* ============================================================
   4. FOOTER
   ============================================================ */
/* The copyright requested a 'Costaline' font whose files are not
   bundled, so it silently fell back. Pin it to the site font for a
   consistent, intentional look. */
.foot-right .copyright { font-family: 'OpenSans', 'Inter', sans-serif; }

@media (max-width: 480px) {
  .site-footer { padding: 40px 18px; }
  .foot-brand p { max-width: 100%; }
}

/* ============================================================
   5. SUBPAGE REINFORCEMENT (pricing / login / download / vjkaycee)
   These already ship their own responsive blocks; the rules below
   only add edge-case safety so nothing can overflow on tiny phones.
   ============================================================ */

/* Modal-style pages: keep the card inside the viewport with a safe
   gutter on the smallest screens. */
@media (max-width: 420px) {
  .modal-wrapper   { margin: 14px !important; }
  .modal-content   { padding-left: 18px !important; padding-right: 18px !important; }
  .restore-container { margin: 14px !important; padding: 28px 22px !important; }
}

/* Pricing grid: already collapses to one column < 860px; make sure
   cards and badges never clip on very small screens. */
@media (max-width: 420px) {
  .pricing-card  { padding: 28px 18px 22px !important; }
  .popular-badge { white-space: nowrap; }
}

/* ------------------------------------------------------------
   ADDITIONAL MOBILE REINFORCEMENTS (width <= 600px)
   ------------------------------------------------------------ */
/* Creative Masking (usp2.gif): scale down the wide demo on laptop screens. */
@media (min-width: 821px) and (max-width: 1440px) {
  body.active-idx-1 .usp-media-over {
    width: 36vw !important;
    max-width: 36vw !important;
    height: auto !important;
  }

  /* Color Palette Picker (usp4.gif). */
  body.active-idx-3 .usp-media-over {
    width: 37vw !important;
    max-width: 37vw !important;
    height: auto !important;
  }
}

@media (max-width: 600px) {
  /* Keep USP demos comfortably within the phone viewport. Tablet and desktop
     sizing remains controlled by the wider breakpoint above. */
  #uspMedia {
    width: clamp(78px, 28vw, 110px) !important;
  }

  .usp-media-img {
    max-height: clamp(60px, 8vh, 80px) !important;
  }

  .usp-media-over {
    max-width: 52vw !important;
    height: 9vh !important;
  }

  /* Prevent scroll behind nav */
  body.nav-open {
    overflow: hidden !important;
  }

  /* Shrink 3D logo to prevent tagline overlap */
  #logo3d {
    width: clamp(120px, 42vw, 150px) !important;
  }



  /* Fix form modal wrappers overflow by clearing margin */
  .modal-wrapper {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .restore-container {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Position op1Text to middle, centered and justified on phone */
  #op1Text {
    top: 50% !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    white-space: normal !important;
    width: 82vw !important;
    max-width: 290px !important;
    font-size: clamp(0.78rem, 3.6vw, 0.95rem) !important;
    line-height: 1.65 !important;
    text-align: center !important;
  }

  /* Reposition icon1Text to clear centered icon1 */
  #icon1Text {
    top: calc(50% + 80px) !important;
    font-size: clamp(0.82rem, 4vw, 1.05rem) !important;
  }

  /* Targeted phone-only size overrides for specific feature gifs:
     - CREATIVE MASKING (idx-1)
     - COLOR PALETTE PICKER (idx-3)
     - LABEL COLOR ASSIGNMENT (idx-5)
     - MULTI-FORMAT BATCH EXPORT (idx-7) */
  body.active-idx-0 #uspMedia,
  body.active-idx-1 #uspMedia,
  body.active-idx-3 #uspMedia,
  body.active-idx-5 #uspMedia {
    width: clamp(68px, 24vw, 105px) !important;
  }
  body.active-idx-0 .usp-media-over,
  body.active-idx-1 .usp-media-over,
  body.active-idx-3 .usp-media-over,
  body.active-idx-5 .usp-media-over {
    height: 8vh !important;
  }
  /* Creative Masking (usp2.gif): keep this wider-format demo narrower. */
  body.active-idx-1 .usp-media-over {
    width: 42vw !important;
    max-width: 42vw !important;
    height: auto !important;
  }

  /* Targeted phone-only size increases for UI dialog screenshots (making them readable on phone):
     - MULTI-FORMAT BATCH EXPORT (idx-7)
     - BRAND LOGO INTEGRATION (idx-9) */
  body.active-idx-7 #uspMedia,
  body.active-idx-9 #uspMedia {
    width: clamp(190px, 68vw, 290px) !important;
  }
  body.active-idx-7 .usp-media-img,
  body.active-idx-7 .usp-media-lg,
  body.active-idx-9 .usp-media-img {
    max-height: clamp(130px, 20vh, 210px) !important;
  }
}





/* ------------------------------------------------------------
   DESKTOP OPTIMIZATION LAYER
   Adds more balanced spacing and readable sizing on larger
   screens without touching the existing mobile or animation logic.
   ------------------------------------------------------------ */
@media (min-width: 1280px) {
  .hero {
    min-height: 100vh;
  }

  #logo3d {
    width: clamp(260px, 24vw, 420px);
  }

  #finalCta {
    padding: 92px clamp(28px, 4vw, 64px) 112px;
  }

  .site-footer .container {
    max-width: 1320px;
    margin: 0 auto;
  }

  .foot-grid {
    gap: clamp(24px, 3vw, 48px);
    align-items: center;
  }

/* ------------------------------------------------------------
   DESKTOP RESPONSIVE SCALE BACK LAYER (width >= 1366px)
   Restores original desktop widths, margins, paddings, and font sizes
   specifically on large desktop monitors.
   ------------------------------------------------------------ */
@media (min-width: 1366px) {
  #sem1Bg {
    width: clamp(560px, 90vw, 1360px) !important;
  }

  .usp-card {
    width: clamp(280px, 34vw, 460px) !important;
  }

  .usp-title {
    font-size: clamp(0.88rem, 1.50vw, 1.12rem) !important;
    margin-bottom: 14px !important;
  }

  .usp-desc {
    font-size: clamp(0.74rem, 0.98vw, 0.85rem) !important;
    line-height: 1.85 !important;
  }

  .op1-panel {
    width: clamp(190px, 17vw, 260px) !important;
  }

  .op1-panel-inner {
    padding: 16px 18px 18px !important;
    border-radius: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow:
      0 2px  4px  rgba(0, 0, 0, 0.20),
      0 8px  24px rgba(0, 0, 0, 0.45),
      0 20px 48px rgba(0, 0, 0, 0.30),
      inset 0  1px 0 rgba(255, 255, 255, 0.14),
      inset 0 -1px 0 rgba(255, 255, 255, 0.04) !important;
  }

  .op1-panel-desc {
    line-height: 1.78 !important;
    -webkit-line-clamp: unset !important;
    line-clamp: none !important;
    overflow: visible !important;
  }
}

/* Manual page (long-form doc) only had one breakpoint — add phone
   safety so tables, code and images stay inside the screen. */
@media (max-width: 600px) {
  pre, code { white-space: pre-wrap !important; word-break: break-word; }
  table { display: block; width: 100%; overflow-x: auto; }
}