/* ============================================================
   ZORIYA — mobile experience (≤640px only; desktop untouched)
   Floating pill nav, one-idea-per-viewport rhythm, contained
   animation cards, palette discipline. Test at 390 / 430.
   ============================================================ */

/* the mobile nav CTA exists in markup on all widths — desktop hides it */
.nav-cta { display: none; }

@media (max-width: 640px) {

  /* ---- floating pill nav ------------------------------------------- */
  /* Safari 26 samples background-color + backdrop-filter directly on FIXED
     elements to tint its bars — the fixed nav itself must stay bare, so the
     pill's glass lives on an absolutely-positioned ::before instead */
  .nav {
    top: 12px; left: 12px; right: 12px; bottom: auto; inset: 12px 12px auto;
    /* the page now draws under the status bar (viewport-fit=cover) —
       keep the pill below the clock/notch */
    top: calc(12px + env(safe-area-inset-top, 0px));
    padding: 8px 8px 8px 16px;
    background: none; border: 0; box-shadow: none;
  }
  .nav::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    border-radius: 100px;
    background: rgba(246, 243, 234, .82);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid rgba(14, 14, 16, .08);
    box-shadow: 0 10px 30px rgba(14, 14, 16, .12);
    transition: background .5s var(--ease-soft), border-color .5s;
  }
  .nav.on-dark::before {
    background: rgba(10, 10, 14, .58);
    border-color: rgba(241, 239, 233, .14);
  }
  .brand { font-size: 16px; gap: 8px; }
  .brand .ast { font-size: 19px; }
  .nav-actions { gap: 8px; }
  .nav-actions .nav-cta { display: inline-flex; font-size: 13.5px; font-weight: 600; padding: 10px 16px; }
  .hamburger { width: 38px; height: 38px; }
  /* while the menu overlay is open the pill melts away so the menu owns the screen */
  body.menu-open .nav::before { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

  /* anchor jumps land below the floating pill */
  section { scroll-margin-top: 92px; }

  /* ---- global palette + touch discipline --------------------------- */
  * { -webkit-tap-highlight-color: transparent; }
  html { accent-color: var(--cobalt); }
  /* steady scroll: no sideways panning or rubber-band wiggle on touch.
     overflow-x clip (not hidden — hidden still creates a pannable scroll
     container on iOS) plus vertical-only touch gestures on the page.
     Clip lives on body only: clipping the root propagates to the viewport
     and broke Safari's adaptive edge tinting (stuck purple bars). */
  body { overflow-x: clip; touch-action: pan-y pinch-zoom; }
  html { overscroll-behavior-x: none; }
  /* ask newer iOS Safari not to paint its own edge tint at all
     (ignored where unsupported — the page under the bars is the tint) */
  html { -webkit-scroll-edge-effect: none; scroll-edge-effect: none; }
  /* iOS colors unstyled button labels blue — buttons take the page color */
  button { color: inherit; }
  a { color: inherit; }
  .faq-intro a, .footer-col a { color: inherit; }
  .faq-intro a { color: var(--cobalt); }
  .intake select {
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' stroke='%238E8EFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
    background-repeat: no-repeat; background-position: right 16px center; background-size: 18px;
  }

  /* ---- hero --------------------------------------------------------- */
  .hero-deco.b, .hero-deco.c { display: none; }  /* collide with eyebrow / CTA at phone widths */
  .hero-inner { padding-inline: 20px; }
  .hero .display { font-size: clamp(46px, 13.5vw, 60px); }
  .lede { font-size: 16.5px; }
  .hero-cta { flex-wrap: wrap; justify-content: center; gap: 12px; }
  .hero-corner { display: none; }
  /* the rotator slot is sized to the widest word — center each word inside it,
     and drop it a touch so tall letters clear "your" on the line above */
  .rotator { text-align: center; margin-top: 6px; }

  /* ---- "Powered by" strip: stacked and full-bleed so the names read --- */
  /* tighten the hero's vertical rhythm so the strip is on-screen at load */
  .hero { padding-top: 94px; padding-bottom: 108px; }
  .hero .display { margin-top: 14px; }
  .hero .lede { margin-top: 18px; }
  .hero-cta { margin-top: 24px; }
  .powered { display: block; padding-inline: 0; padding-block: 14px 18px; }
  .powered-label { display: block; text-align: center; margin-bottom: 10px; }
  .pb-item { font-size: 16.5px; }
  .pb-dot { margin-inline: 13px; }
  .pb-track { animation-duration: 52s; }  /* slower scroll = readable names */

  /* ---- one idea per viewport: centered head pattern ----------------- */
  .suite-head, .market-head, .stats-head, .how-head, .funnel-head,
  .network-head, .faq-intro, .problem .wrap, .tech-head,
  .contact-grid > div:first-child {
    text-align: center;
  }
  .stats-head { display: block; }
  .stats-head h2, .how-head, .market-head h2 { max-width: none; }
  /* these heads are flex columns pinned to flex-start on desktop */
  .suite-head, .market-head, .network-head { align-items: center; }
  .suite-head .lede, .stats-head .lede, .network-head .lede, .market-close .lede,
  .tech-head p, .step p {
    margin-inline: auto;
  }

  /* generous vertical rhythm */
  .suite { padding-top: 108px; padding-bottom: 72px; }
  .market, .stats, .how, .funnel, .network, .contact, .faq { padding-block: 88px; }
  .suite-head, .market-head, .funnel-head, .network-head { margin-bottom: 48px; }
  .how-head { margin-bottom: 30px; }

  /* ---- services index rows ------------------------------------------ */
  .suite-row { grid-template-columns: auto 1fr; }
  .suite-arrow { display: none; }
  /* the highlighted row runs edge to edge instead of floating mid-column;
     it draws its own full-width cobalt bottom edge, since the next row
     (not full-bleed) would stop the divider short of the screen edges */
  .suite-row.suite-hi {
    margin-inline: calc(var(--pad-x) * -1); padding-inline: var(--pad-x);
    border-bottom: 1px solid var(--cobalt);
  }
  .suite-hi + .suite-row { border-top-color: transparent; }

  /* ---- unpin the cover scenes on phones ------------------------------ */
  /* desktop pins these sections so the next one slides over them; at
     phone heights that covers rows 03–05 before they can be read — on
     mobile everything scrolls naturally instead */
  .suite-track { height: auto; }
  .suite-track .suite { position: static; min-height: 0; }
  .problem-track { height: auto; margin-top: 0; }
  .problem-track .problem { position: static; }
  .bignum-track { margin-top: 0; }  /* was overlapping the section above by 100vh */
  /* Safari 26 tints its top/bottom bars by sampling background-color on
     sticky/fixed elements near the viewport edges (theme-color is ignored).
     Keep the sticky itself transparent — the non-sticky track behind it
     paints the identical cobalt, so nothing changes visually. */
  .bignum-sticky { background: transparent; }
  .tech { background: transparent; }
  .tech::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #5B2BEF; }
  .augment-track { height: auto; }  /* "your team, amplified" no longer holds the page */
  .augment-track .zoriya-augment { position: static; min-height: 0; }

  /* ---- hairline-proofing --------------------------------------------- */
  /* pinned/composited sections can show subpixel pale gaps at their side
     edges while scrolling — widen each full-bleed color field 2px past the
     viewport, sideways only. (A box-shadow bleed also painted a stray
     cobalt line under the 24/7 track — never bleed these vertically.) */
  html { background: var(--paper); }
  .problem-track, .bignum-track, .tech { margin-inline: -3px; }
  /* the sticky children composite as their own layers while pinned —
     widen them too so their edges can never expose the page behind */
  .problem, .bignum-sticky { margin-inline: -3px; }
  /* phones scroll with gutterless overlay scrollbars; hide the classic
     scrollbar at phone widths so desktop previews match — its pale track
     reads as a white/purple edge line over the dark sections */
  html { scrollbar-width: none; }
  html::-webkit-scrollbar { width: 0; height: 0; }

  /* ---- problem section: seam + overflow ----------------------------- */
  .problem-track { background: var(--dark); }  /* kills the white seam under the dark section */
  .problem { padding-inline: 4px; }
  .problem-body p { margin-inline: auto; }
  .but-beat {
    font-size: clamp(27px, 8.6vw, 36px);
    white-space: normal;
    text-wrap: balance;
  }

  /* ---- market stats -------------------------------------------------- */
  .market-row { display: grid; grid-template-columns: 1fr; gap: 34px; }
  .market-stat { text-align: center; }
  .market-stat p { margin-inline: auto; max-width: 30ch; }
  .market-close { text-align: center; margin-top: 44px; }

  /* ---- cover track: tighten the dead scroll on phones ---------------- */
  .cover-dwell { height: 26vh; }
  .cover-dwell-short { height: 14vh; }

  /* ---- flow demo ----------------------------------------------------- */
  .zf-cap { padding-inline: 8px; }
  .zf-sysword { font-size: clamp(22px, 7vw, 30px); }

  /* ---- tech playground: pile contained in a card, text above --------- */
  .tech { min-height: auto; padding-bottom: 56px; }
  .tech-head { pointer-events: auto; }
  .tech-stage {
    position: relative; inset: auto; z-index: 1;
    height: 320px; margin-top: 32px;
    border-radius: 20px; overflow: hidden;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .18);
  }
  .tech-cue { display: none; } /* cursor instruction is meaningless on touch */

  /* ---- stat tiles: stacked, always open ------------------------------ */
  .stat-row { grid-template-columns: 1fr; gap: 12px; }
  .stat-tile { min-height: 0; padding: 24px; gap: 8px; }
  .stat-tile .desc { max-height: none; opacity: .85; margin-top: 10px; }

  /* ---- UGC showcase: one big phone running a social feed -------------- */
  /* the desktop wall scales the whole 1080px scene down to postage stamps;
     on phones a single full-size iPhone frame plays all 7 clips as an
     auto-scrolling feed — each clip slides up slowly to the next, like
     someone scrolling social media (loop logic in js/ugc.js) */
  /* compact head so the headline and the phone share one viewport —
     nobody should have to scroll the title away to watch the video */
  .zoriya-ugc { padding-block: 56px 72px; }
  .zoriya-ugc .zu-title { font-size: 30px; }
  .zoriya-ugc .zu-sub { font-size: 14px; line-height: 1.45; margin-top: 12px; }
  .zoriya-ugc .zu-frame { height: auto !important; margin-top: 16px; padding: 14px 12px; }
  .zoriya-ugc .zu-stage { position: static; width: auto; height: auto; transform: none !important; }
  .zoriya-ugc .zu-phone {
    position: relative; left: auto; top: auto; margin: 0 auto;
    width: min(64vw, 255px); height: auto; aspect-ratio: 238 / 472;
  }
  /* Chrome anchors page scroll to visible elements and follows them when
     they move — the feed slides a full screen-height every few seconds,
     which yanked the page to the next section and back. Opt the whole
     showcase out of scroll anchoring. */
  .zoriya-ugc, .zoriya-ugc .zu-frame { overflow-anchor: none; }
  .zoriya-ugc .zu-feed { position: absolute; inset: 0; height: 800%; will-change: transform; }
  .zoriya-ugc .zu-slide { position: relative; width: 100%; height: calc(100% / 8); overflow: hidden; }

  /* ---- augment / ugc / mc service blocks ----------------------------- */
  .za-wrap, .zu-wrap { text-align: center; }
  .za-sub, .zu-sub { margin-inline: auto; }
  .za-packages, .zu-packages { grid-template-columns: 1fr !important; text-align: left; }
  .zoriya-augment, .zoriya-mc { padding-block: 72px; }  /* UGC has its own compact rhythm above */

  /* ---- receptionist card --------------------------------------------- */
  .recep-track { height: 140vh; }
  .recep-track .receptionist { padding-top: 96px; }  /* clears the pill while pinned */
  /* "Try now" cue sits inside the card (moved there by main.js), its
     arrow curving down toward the mic button */
  .try-now {
    width: auto; padding-right: 0; margin: 4px 0 -6px;
    justify-content: center; align-items: flex-end;
    color: var(--peri);
    transform: translateX(-23px) scale(.6);   /* lands the arrow tip on the mic's center */
  }
  .try-now.in { transform: translateX(-23px) scale(1); }
  .try-now-text { font-size: 19px; transform: none; }
  .try-now-arrow { width: 42px; }
  .recep-card { flex-direction: column; align-items: center; text-align: center; gap: 28px; }
  .recep-left { align-items: center; }
  .recep-card p { max-width: 30ch; }
  .recep-credit { text-align: center; }

  /* ---- how it works steps -------------------------------------------- */
  .step { text-align: center; }
  .step-visual { display: flex; justify-content: center; }
  .biz-grid { justify-content: center; }
  /* industry chips in the site's own cobalt — never iOS default blue */
  .biz-chip { color: var(--cobalt); border-color: rgba(43, 43, 240, .35); }
  .biz-chip.sel { color: #fff; }
  .svc-row { grid-template-columns: 1fr; width: 100%; }
  .svc-card { text-align: left; }
  .roadmap-card, .build-card { text-align: left; width: 100%; }

  /* ---- funnel: percentage + label per row, no dot noise --------------- */
  .f-stage { grid-template-columns: auto 1fr; gap: 20px; }
  .f-dots { display: none; }
  .f-label { display: block; text-align: left; }

  /* ---- team marquee --------------------------------------------------- */
  .network-head .lede { max-width: 32ch; }

  /* ---- contact --------------------------------------------------------- */
  .contact-card h2 { max-width: none; }
  .intake { text-align: left; }
  .intake-sent { text-align: center; }

  /* ---- faq ------------------------------------------------------------- */
  .faq-intro { margin-bottom: 10px; }
  .faq-a p { padding-right: 20px; }

  /* ---- footer word: no cursor on phones — a purple fade sweeps the
         letters Z→a, then flows back a→Z, on a loop ---------------------- */
  .footer-word { letter-spacing: .05em; }
  .footer-word .fl { animation: flSweep 1.7s ease-in-out infinite alternate; }
  .footer-word .fl:nth-child(2) { animation-delay: .22s; }
  .footer-word .fl:nth-child(3) { animation-delay: .44s; }
  .footer-word .fl:nth-child(4) { animation-delay: .66s; }
  .footer-word .fl:nth-child(5) { animation-delay: .88s; }
  .footer-word .fl:nth-child(6) { animation-delay: 1.1s; }
  @keyframes flSweep {
    from { color: transparent; }
    to   { color: var(--cobalt); -webkit-text-stroke-color: var(--cobalt); }
  }

  /* ---- footer: tagline centered in its band, tidy link grid, social --- */
  .faq { padding-bottom: 20px; }  /* less dead space feeding into the footer */
  .footer { padding-top: 16px; }
  .footer-top { display: block; margin-bottom: 40px; }
  .footer-tag {
    /* symmetric band: 36px divider→text above, 36px text→divider below */
    text-align: center; margin: 0 auto; padding-block: 0 36px;
    max-width: 24ch;
    font-size: 19px; line-height: 1.35; text-wrap: balance;
    color: var(--ink-soft);
  }
  .footer-cols {
    display: grid; grid-template-columns: 1fr 1fr; gap: 32px 20px;
    padding-top: 36px; border-top: 1px solid rgba(14, 14, 16, .12);
    text-align: left; justify-content: stretch;
  }
  .footer-col h5 { margin-bottom: 12px; }
  .footer-col a { font-size: 14.5px; padding: 6px 0; }
  /* social becomes one horizontal centered row spanning both columns */
  .footer-col:last-child { grid-column: 1 / -1; text-align: center; padding-top: 32px; border-top: 1px solid rgba(14, 14, 16, .12); }
  .footer-col:last-child a { display: inline-block; padding: 6px 14px; }
  .footer-base {
    flex-direction: column; gap: 10px; text-align: center; margin-top: 36px;
    /* content extends under the home indicator now — keep the last line clear of it */
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }

  /* ---- join the team page ---------------------------------------------- */
  .join-hero { text-align: center; padding-top: 128px; }
  .join-hero h1 { max-width: none; }
  .join-sub { margin-inline: auto; }
  .join-card { border-radius: 24px; }
  .jq { text-align: left; }
  .join-submit { align-self: stretch; justify-content: center; }
  .join-foot { flex-direction: column; align-items: center; text-align: center; }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .footer-word .fl { animation: none; }
}