/* ============================================================
   PolyphonyAI — shared mobile stylesheet.
   Every mobile/responsive override lives here, in one file, linked on
   every page (after nav-menu.css so it wins on equal specificity).
   Desktop styles stay inline per page; this only kicks in at small widths.
   Breakpoints: 820px = nav swaps to hamburger; 768px = layout/hero;
   640px = the fixed-size homepage diagram.
   ============================================================ */

/* ---- Mobile navigation: hamburger + slide-in drawer (built by nav.js) ---- */
.nav-toggle,
.nav-mobile,
.nav-overlay { display: none; }

@media (max-width: 820px) {
  .nav__links { display: none !important; }        /* desktop links -> drawer */
  .nav .nav__cta { display: none !important; }      /* CTA moves into drawer */

  /* Remove the top bar entirely on mobile — no background, blur, border or shadow,
     and no reserved strip (fixed, not sticky). Just the PolyphonyAI logo floating
     top-left and the hamburger top-right, over the content. Reclaims all the real
     estate the bar took. Logo colour still adapts on dark pages via .nav--dark. */
  .nav {
    position: fixed !important; top: 0; left: 0; right: 0; height: 56px !important;
    background: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    border-bottom: 0 !important; box-shadow: none !important;
  }
  /* Center the logo glyph; push the menu trigger to the right edge. */
  .nav__inner { height: 56px !important; position: relative; justify-content: flex-end !important; }
  /* Icon glyph only on mobile — hide the "PolyphonyAI" wordmark (a bare text node
     beside the SVG) by collapsing the anchor's font-size. The SVG keeps its own
     explicit px size, and the text stays in the DOM so the link still reads
     "PolyphonyAI" to screen readers. */
  .nav__logo, .nav__brand {
    font-size: 0 !important;
    gap: 0 !important;   /* wordmark is hidden (font-size:0) but its flex gap still shifted the icon ~6px off-centre */
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    -webkit-tap-highlight-color: transparent;   /* kill the grey tap-flash box */
  }
  .nav__logo svg, .nav__brand svg { transform: scale(1.6); }   /* bigger, centered glyph */

  /* On-brand menu trigger: the logo's three-oval "chord" that cross-fades and
     rotates into an X when open. Middle oval carries the brand blue; the outer
     two + the X use currentColor so they adapt to light/dark pages. */
  .nav-toggle {
    display: block;                        /* override the base .nav-toggle{display:none} */
    position: relative; width: 42px; height: 42px; padding: 0;
    background: none; border: 0; cursor: pointer;
    color: inherit; z-index: 1002;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-toggle__ovals {
    position: absolute; top: 50%; left: 50%;
    width: 30px; height: 20px;
    transform: translate(-50%, -50%) rotate(90deg);   /* stacked like a hamburger */
    transition: opacity .25s ease, transform .3s cubic-bezier(.4,0,.15,1);
  }
  .nav-toggle__ovals .o-side { fill: currentColor; }
  .nav-toggle__ovals .o-mid  { fill: #3B82F6; }
  .nav-toggle__x {
    position: absolute; top: 50%; left: 50%; width: 22px; height: 2px;
    margin: -1px 0 0 -11px; border-radius: 2px; background: currentColor;
    opacity: 0; transform: rotate(0);
    transition: opacity .25s ease, transform .3s cubic-bezier(.4,0,.15,1);
  }
  .nav-toggle.active .nav-toggle__ovals {
    opacity: 0; transform: translate(-50%, -50%) scale(.5) rotate(0deg);
  }
  .nav-toggle.active .nav-toggle__x { opacity: 1; }
  .nav-toggle.active .nav-toggle__x:first-of-type { transform: rotate(45deg); }
  .nav-toggle.active .nav-toggle__x:last-of-type  { transform: rotate(-45deg); }
  /* Keep the trigger visible on dark pages/sections (matches the drawer theming). */
  .nav--dark .nav-toggle { color: #EDF2FB; }

  .nav-overlay {
    display: block; position: fixed; inset: 0; z-index: 1000;
    background: rgba(17,24,39,.38); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity .3s ease;
  }
  .nav-overlay.active { opacity: 1; pointer-events: auto; }

  .nav-mobile {
    display: flex; flex-direction: column; gap: 2px;
    position: fixed; top: 0; right: 0; z-index: 1001;
    width: min(82vw, 320px); height: 100%;
    padding: 92px 26px 34px; overflow-y: auto;
    background: #FAFAF8; color: #111827;
    box-shadow: -18px 0 44px rgba(17,24,39,.16);
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.4,0,.15,1);
  }
  .nav-mobile.active { transform: translateX(0); }
  .nav-mobile a {
    font-size: 20px; font-weight: 600; letter-spacing: -.01em;
    color: inherit; text-decoration: none; padding: 13px 4px;
    border-bottom: 1px solid rgba(17,24,39,.08);
  }
  .nav-mobile a:hover { opacity: .7; }
  .nav-mobile__cta {
    margin-top: 18px; text-align: center; border: 0 !important;
    background: #111827; color: #fff !important;
    border-radius: 14px; padding: 15px 20px !important; font-weight: 600;
  }

  /* Dark pages (architecture) get a dark drawer. */
  .nav-mobile--dark { background: #141820; color: #EDF2FB;
    box-shadow: -18px 0 44px rgba(0,0,0,.5); }
  .nav-mobile--dark a { border-bottom-color: rgba(255,255,255,.10); }
  .nav-mobile--dark .nav-mobile__cta { background: #EDF2FB; color: #0C1220 !important; }

  body.nav-open { overflow: hidden; }
}

/* ---- Two-column blocks that never collapse on their own ---- */
@media (max-width: 768px) {
  .grid2 { grid-template-columns: 1fr !important; }
}

/* ---- Homepage hero: stack the layered desktop hero into a clean column ---- */
@media (max-width: 768px) {
  .hero__split {
    flex-direction: column; width: auto; align-items: center;
    text-align: center; gap: 6px; padding-top: 40px; margin-bottom: 40px;
  }
  /* Flow the eyebrow normally, but keep position:relative so its .hero-light
     overlay (inset:0) stays anchored to it (static would re-anchor it to an
     ancestor and float the white copy out of place). */
  .hero__kicker { position: relative; top: auto; }
  .hero__grid { margin-top: 26px; }                 /* was a fixed 205px reservation */
  .hero__sub { transform: none; }                   /* was translateY(-40px) */
  /* .hero-light stays ON so the headline reacts to the moving ovals (the aurora
     JS clips each layer to its oval, revealing white through the text). */
  .hero__brand { font-size: clamp(2.4rem, 12.5vw, 4rem); line-height: .95; }
  .hero h1 { font-size: clamp(2.1rem, 10vw, 3.1rem); }
}

/* ============================================================
   Homepage animated showpieces — mobile treatment.
   The homepage's scroll-driven animations (pinned typewriter panels,
   3D card deck, orbit, product mockup) are all desktop-scale. On mobile
   we reuse the site's OWN static "reduced-motion" fallback: collapse the
   tall scroll-runway spacers, force the pinned content visible, and
   scale/quiet the decorative pieces. Paired with a mobile bail added to
   the layered-scroll engine's guard in index.html (so it shows the static
   fallback instead of a half-run animation).
   ============================================================ */
@media (max-width: 768px) {
  /* Collapse the scroll-runway spacers that create the huge empty gaps */
  .wf-hold, .arch-hold, .caps-hold { height: 0 !important; }

  /* Unpin the stacked panels so sections flow in normal document order */
  .stack-panel { position: relative !important; min-height: 0 !important; }
  #download.stack-panel { transform: none !important; opacity: 1 !important; }
  .hero__parallax { transform: none !important; opacity: 1 !important; }

  /* Workflow + Architecture both animate on scroll-into-view now (typewriter, and
     the tower blocks drop in with the legend rows lighting up — wired in the mobile
     branch of the layered-scroll engine). So do NOT force their content visible here.
     Tighten the tower↔legend gap so they read as one unit. */
  .arch-stage { gap: 22px !important; }

  /* The gap below the app UI (and any area the fixed background doesn't paint on
     mobile) was falling through to the near-black html background (#090C15). Give
     the body each page's OWN theme colour (var(--bg)) so those areas blend: light
     pages read light, the dark architecture page stays dark. */
  body { background: var(--bg) !important; }

  /* Hero product mockup: brought back on mobile, relocated by nav.js
     (mobileHeroCarousel) to sit beneath the trust carousel as its own full-width
     piece, then scaled to fit by fitMockup. The centering wrapper clips overflow
     so the scaled mockup stays centered. Desktop is untouched. */
  .app-window { margin-top: 0 !important; }
  .app-window-mwrap {
    display: flex; justify-content: center; align-items: flex-start; overflow: hidden;
    margin-bottom: 8vh;   /* keep section 2 just below the fold */
    /* height is set by fitMockup (nav.js) to the scaled mockup height + a little
       shadow room, so there's no empty void below and the drop shadow still shows. */
  }
  /* Keep the mockup at its natural 760px so fitMockup's scale math holds — flex
     would otherwise shrink it to viewport width and break the layout/centering. */
  .app-window-mwrap .app-window { flex: 0 0 auto !important; }
  /* Give the chat panel more room on the phone mockup by trimming the side columns
     (threads sidebar + agents panel). Scoped to the mobile wrapper only. */
  .app-window-mwrap .demo-grid { grid-template-columns: 44px 132px 1fr 190px !important; }

  /* Trust row -> compact single-line auto-scrolling carousel on mobile. nav.js
     duplicates the items once so the loop is seamless (the track translates exactly
     one set width). A thin, full-bleed strip. */
  .trust { overflow: hidden !important; padding: 7px 0 !important; }
  .trust .wrap { overflow: hidden !important; max-width: none !important; padding: 0 !important; }
  .trust__items {
    flex-wrap: nowrap !important; justify-content: flex-start !important;
    width: max-content !important; gap: 0 !important;
    animation: trust-marquee 24s linear infinite;
  }
  .trust__item {
    flex: 0 0 auto !important; padding: 0 13px !important;
    font-size: 10.5px !important; gap: 5px !important; opacity: .7;
  }
  .trust__item svg { width: 11px !important; height: 11px !important; }

  /* Problem-section orbit: genuinely fluid — the container is a % of the
     viewport and the nodes/center are sized as % of it, so everything scales
     proportionally (the JS already positions nodes by %). No zoom. */
  .orch { width: min(384px, 74vw) !important; height: min(384px, 74vw) !important; }
  .orch__center { width: 24% !important; height: 24% !important; }
  .orch__node { width: 20% !important; height: 20% !important; }
  .orch__node img { width: 66% !important; height: auto !important; }

  /* Footer background wordmark: JS (fitWordmark in nav.js) sizes it to fill the
     screen edge-to-edge. This is just a no-JS fallback — NOT !important, so the
     JS inline font-size can win. (An !important here would override the JS.) */
  .dl-wordmark { font-size: clamp(1.8rem, 11.5vw, 3.4rem); }

  /* Capabilities deck: the 3D card STACK spreads background cards way past the
     viewport (the "glitchy" overflow). The active card is already flat & centered
     (its transform is translate3d(0,0,90px), no rotation), so on mobile we flatten
     the depth and hide the ghost (non-active) cards — a clean single-card carousel
     that still auto-advances and responds to the arrows/swipe. */
  .cdeck { perspective: none !important; width: 300px !important; max-width: 88vw !important;
    height: 348px !important; margin: 0 auto !important; }
  .cdeck-wrap { padding: 0 !important; }
  .cdeck__card.ghost { opacity: 0 !important; pointer-events: none !important; }
  .cdeck__card { left: 0 !important; right: 0 !important; margin: 0 auto !important;
    width: 100% !important; top: 8px !important; height: 332px !important; }
  .cdeck-wrap::before { display: none !important; }
  /* Tight capabilities stack: text -> card -> controls, minimal gaps. Kill the
     8.7em desc reserve (a desktop no-shift trick) that leaves a void on mobile. */
  #features { padding-top: 26px !important; padding-bottom: 30px !important; }
  #features .caps-grid { gap: 0 !important; }
  .caps-intro .section-heading { margin-top: 4px !important; }
  .caps-readout { margin-top: 10px !important; gap: 6px !important; align-items: center !important; text-align: center !important; }
  .caps-readout__desc { min-height: 0 !important; margin: 0 !important; }
  .caps-readout__specs { justify-content: center !important; }
  .caps-deckcol { margin-top: 6px !important; }           /* card sits right under the text */
  .cdeck-ctl { margin: 6px auto 0 !important; justify-content: center !important; }
  .caps-readout__more { display: block !important; text-align: center !important; margin: 12px auto 0 !important; }

  /* Mobile vertical rhythm: give each section room to breathe (less dense). The
     desktop 120px runway is too much on a phone, but our first mobile pass
     over-corrected to ~52px and left it cramped. This airier scale is the
     Tribe-style "one idea with space around it", tuned for our denser content. */
  .section { padding-top: 84px !important; padding-bottom: 84px !important; }
  .stack-panel { padding-top: 72px !important; padding-bottom: 72px !important; }
  #features { padding-top: 68px !important; padding-bottom: 68px !important; }
  #workflow.stack-panel { padding-top: 68px !important; padding-bottom: 68px !important; }
  #architecture.stack-panel { padding-bottom: 84px !important; }
}

/* Mobile trust-carousel loop. Items are duplicated once by nav.js, so translating
   the track by exactly one set width (-50%) makes the scroll seamless. */
@keyframes trust-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .trust__items { animation: none !important; }
}