/* ============================================================================
   StaffCircle — Shared mobile stylesheet
   ----------------------------------------------------------------------------
   Loaded on every page AFTER each page's inline <style>, so these rules win the
   cascade on phones. EVERY rule here is scoped inside a max-width media query,
   so desktop (>900px) rendering is never affected. Companion: /assets/mobile.js
   builds the hamburger drawer this file styles.

   Breakpoints:
     <=900px  phones + small tablets (matches the point where .nav-links hides)
     <=600px  phone-specific tightening
   ========================================================================== */

/* The burger, drawer and backdrop are injected into every page by mobile.js
   (so they exist on desktop too). They must be fully hidden on desktop — their
   positioning only exists inside the <=900px query below, so without this base
   hide the drawer would render as a stray block at the foot of desktop pages. */
.mnav-burger, .mnav-drawer, .mnav-backdrop, .mnav-actions, .mnav-topcta { display: none; }

/* iOS Safari auto-inflates ("boosts") some text on phones, rendering headings
   and paragraphs LARGER than their CSS size. That pushes lines wider than the
   viewport so they get clipped on the right on iPhone — while Chromium (which
   never inflates) shows them wrapping fine. Pinning text-size-adjust to 100%
   makes iOS honour the specified sizes, so text wraps within the screen.
   Unscoped on purpose (harmless on desktop; the behaviour is iOS-only). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ==========================================================================
   1. GLOBAL SAFETY — kill horizontal overflow, contain runaway media
   ========================================================================== */
@media (max-width: 900px) {
  html, body {
    /* `clip` (not `hidden`) kills sideways overflow WITHOUT turning body into a
       scroll container — `overflow-x:hidden` here forced overflow-y to auto,
       which broke the sticky top nav (it scrolled away with the page). */
    overflow-x: clip;
    max-width: 100%;
    /* Stop iOS Safari's horizontal rubber-band pan if anything still slips past
       the root clip (see section 7 for per-band clipping). */
    overscroll-behavior-x: none;
  }
  /* Any media/embeds can never exceed the viewport and cause a sideways scroll. */
  img, video, iframe, canvas, svg, table, pre {
    max-width: 100%;
  }
  img, video { height: auto; }
  /* Marquees / decorative wide tracks stay clipped, never widen the document. */
  .logos-ribbon, .logos-strip, .logos-wrap { overflow: hidden; max-width: 100%; }
}

/* ==========================================================================
   2. TOP BAR — logo + burger, hide the desktop CTA cluster (moved to drawer)
   ========================================================================== */
@media (max-width: 900px) {
  nav .nav-in {
    height: 64px;
    gap: 0;
    justify-content: space-between;
  }
  nav .logo { height: 46px; }

  /* The desktop link row and CTA cluster are replaced by the drawer. */
  .nav-links { display: none !important; }
  .nav-cta   { display: none !important; }
  .nav-plain { display: none !important; }

  /* Right-hand action cluster: "Book Demo" pill + hamburger. */
  .mnav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
  }

  /* Always-visible "Book Demo" pill in the mobile top bar. */
  .mnav-topcta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 10% smaller than the original 10px 18px / 14px sizing */
    padding: 9px 16.2px;
    border-radius: 999px;
    background: var(--pink, #e6007e);
    color: #fff;
    font-weight: 700;
    font-size: 12.6px;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(248, 1, 104, .28);
    -webkit-tap-highlight-color: transparent;
  }
  .mnav-topcta:active { transform: translateY(1px); }

  .mnav-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mnav-burger span {
    display: block;
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background: var(--navy, #1f2447);
    transition: transform .25s ease, opacity .2s ease;
  }
  /* Animate to an X when open */
  .mnav-open .mnav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mnav-open .mnav-burger span:nth-child(2) { opacity: 0; }
  .mnav-open .mnav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ==========================================================================
   3. DRAWER — off-canvas slide-in panel + backdrop + accordion
   ========================================================================== */
@media (max-width: 900px) {
  .mnav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(16, 18, 40, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    z-index: 998;
  }
  .mnav-open .mnav-backdrop { opacity: 1; visibility: visible; }

  .mnav-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: min(86vw, 380px);
    height: 100%;
    height: 100dvh;
    background: #fff;
    box-shadow: -8px 0 40px rgba(0, 0, 0, .18);
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    z-index: 999;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .mnav-open .mnav-drawer { transform: translateX(0); }

  .mnav-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line, #ececf2);
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
  }
  .mnav-drawer-head img { height: 40px; }
  .mnav-close {
    width: 40px; height: 40px;
    border: 0; background: transparent;
    font-size: 26px; line-height: 1;
    color: var(--navy, #1f2447);
    cursor: pointer;
  }

  .mnav-body { padding: 4px 0 10px; }

  /* Accordion section */
  .mnav-sec { border-bottom: 1px solid var(--line, #ececf2); }
  .mnav-sec-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 22px;
    background: transparent;
    border: 0;
    font: 600 16px/1.3 var(--font, inherit);
    color: var(--ink, #1f2447);
    text-align: left;
    cursor: pointer;
  }
  .mnav-sec-btn .mnav-caret {
    transition: transform .22s ease;
    font-size: 12px;
    opacity: .6;
  }
  .mnav-sec.open .mnav-sec-btn .mnav-caret { transform: rotate(180deg); }

  .mnav-sub {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
  }
  .mnav-sec.open .mnav-sub { max-height: 1600px; }
  .mnav-sub a {
    display: block;
    padding: 12px 22px 12px 34px;
    font-size: 15px;
    color: var(--ink, #333);
    text-decoration: none;
    border-top: 1px solid #f4f4f8;
  }
  .mnav-sub a:active { background: #f7f7fb; }

  /* Plain (no-dropdown) top-level links, e.g. Pricing */
  .mnav-link {
    display: block;
    padding: 12px 22px;
    font: 600 16px/1.3 var(--font, inherit);
    color: var(--ink, #1f2447);
    text-decoration: none;
    border-bottom: 1px solid var(--line, #ececf2);
  }

  /* CTA block at the bottom of the drawer. Tightened + safe-area bottom padding
     so the "Request a demo" button clears the iPhone browser bar and is fully
     visible without scrolling. */
  .mnav-cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 22px calc(env(safe-area-inset-bottom, 0px) + 20px);
    margin-top: auto;
  }
  .mnav-cta a {
    display: block;
    text-align: center;
    padding: 13px 18px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
  }
  .mnav-cta .mnav-login {
    color: var(--navy, #1f2447);
    border: 1px solid var(--line, #d9d9e3);
  }
  .mnav-cta .mnav-demo {
    background: var(--pink, #e6007e);
    color: #fff;
  }

  /* Prevent background scroll while the drawer is open */
  html.mnav-lock, body.mnav-lock { overflow: hidden; }
}

/* ==========================================================================
   4. INTERACTIVE VIDEO / ANIMATION ELEMENTS — keep fully on-screen, centered
   ========================================================================== */
@media (max-width: 900px) {
  /* Success Circles wheel (home) and any labelled hero/loop videos */
  .wheel-video, .wheel-anim, .wheel-anim video {
    width: 100% !important;
    max-width: 340px;
    height: auto !important;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
  /* AI feature / product demo videos and animated GIFs used as media */
  .ai-stage video, .ai-media video, .feature-video, .demo-video,
  .ai-caption img, .anim-gif, img[src$=".gif"] {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  /* Video wrappers should not overflow or force sideways scroll */
  .video-wrap, .media-wrap, .ai-stage, .wheel-wrap, .anim-wrap {
    max-width: 100%;
    overflow: hidden;
  }
}

/* ==========================================================================
   5. TEXT ALIGNMENT & CONTAINER PADDING — phones
   ========================================================================== */
@media (max-width: 600px) {
  .container { padding-left: 20px; padding-right: 20px; }
  /* Guard against oversized inline heading sizes overflowing narrow screens */
  h1 { font-size: clamp(28px, 8.5vw, 40px); line-height: 1.12; overflow-wrap: break-word; }
  h2 { overflow-wrap: break-word; }
  /* Long unbroken strings (URLs, emails) shouldn't push the layout wide */
  p, li, a, td, span { overflow-wrap: break-word; }
}

/* ==========================================================================
   6. SWARM-AUDIT CONSOLIDATED FIXES
   ----------------------------------------------------------------------------
   Per-template issues found by the template-audit swarm. Each rule is scoped to
   a distinctive template class so it can never affect other templates or the
   desktop (>900px) layout. Grouped by issue, not by page, because several class
   names (.bl-visual, .pm-proof-grid, .cta-stats, section h2s) are shared by
   many templates — one scoped rule fixes the whole cluster.
   ========================================================================== */

/* 6A. Product-block "proof card" mockups (.bl-visual) — used across the home,
   success-circles, staffcircle-ai, custom-insights, engagement-and-culture,
   skills-and-development, performance-management-* and mobile-app templates.
   Desktop positions the mock cards absolutely for a wide half-column; on phones
   they overlap, clip, and squeeze the .fb feedback note to an unreadable sliver.
   Reflow the whole thing into a simple, predictable vertical stack. */
@media (max-width: 900px) {
  .bl-visual,
  .block .bl-visual,
  .block.rev .bl-visual {
    position: relative;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .bl-visual .card-a,
  .bl-visual .card-b,
  .bl-visual .card-b.br,
  .bl-visual .card-b.bl,
  .bl-visual .fb,
  .bl-visual .headshot {
    position: relative;
    top: auto; right: auto; bottom: auto; left: auto;
    width: auto;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    float: none;
  }
  .bl-visual .headshot { align-self: flex-start; }
}

/* 6B. mobile-app hero — the phone app-animation <video> (.hero-phone) is the
   page's headline visual but the shared .hero-img{display:none} hid it on
   phones. :has() re-shows ONLY the hero image that actually contains the phone
   video (i.e. the mobile-app page), leaving every other page's decorative
   .hero-img hidden as intended. */
@media (max-width: 900px) {
  .hero-img:has(.hero-phone) {
    display: flex;
    justify-content: center;
    margin-top: 28px;
  }
  .hero-img:has(.hero-phone) .hero-phone {
    max-width: 210px;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
}

/* 6C. Tables — blog articles (.article-body) and legal/policy pages (.legal)
   style tables at width:100% but a table still claims its min-content width, so
   any multi-column table overflows a 360px screen. Make them horizontally
   scrollable inside their own box instead of widening the page. */
@media (max-width: 900px) {
  .article-body table, .legal table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .article-body th, .article-body td { white-space: normal; }
}

/* 6D. Stat grids (.pm-proof-grid, .cta-stats) — these only collapse to 2 columns
   and keep desktop padding + large slab numbers, so cells get cramped and long
   values (e.g. "iOS + Android") can clip. Tighten on phones. */
@media (max-width: 600px) {
  .pm-proof-grid { gap: 14px; }
  .pm-proof-grid .pp { padding: 18px 16px; }
  .pm-proof-grid .pp .n { font-size: 27px; line-height: 1.08; word-break: break-word; }
  .pm-proof-grid .pp .l { font-size: 11.5px; }
  .cta-stats { gap: 12px; }
  .cta-box .cta-stat, .cta-stats .cta-stat { padding: 14px 14px; }
  .cta-stats .cta-stat .n { font-size: 22px; }
  .cta-stats .cta-stat .l { font-size: 11.5px; }
}

/* 6E. Section headings & big stat numbers — the shared reset only clamps h1.
   These recurring section-heading classes keep 30–34px desktop sizes on phones,
   reading oversized/cramped. Scoped so only these known headings shrink. */
@media (max-width: 600px) {
  .cta h2, .sec-title h2, .pm-intro h2, .connects-head h2,
  .cf-h2, .cf-copy h2, .bl-copy h2, .stmt h2, .pm-quotes .sec-title h2 {
    font-size: clamp(22px, 6.2vw, 27px);
    line-height: 1.22;
  }
  .connects-head p { font-size: 15px; }
  .pc-stat .n { font-size: 38px; }
}

/* 6F. Small per-template density fixes (all scoped, cosmetic tightening). */
@media (max-width: 600px) {
  /* integrations — chip cluster + logo wall + card padding */
  .in-cluster { gap: 10px; }
  .in-chip { padding: 14px 10px; gap: 7px; }
  .in-vis .card { padding: 26px 18px; min-height: 150px; }
  .logo-wall { gap: 9px; }
  /* staffcircle-ai — mini-dashboard KPI row never collapsed */
  .md-kpis { gap: 6px; }
  .md-kpi { padding: 10px 8px; }
  .md-kpi .n { font-size: 17px; }
  .md-kpi .l { font-size: 9px; }
  /* about — interactive values panel + CIRCLE letters */
  .ab-value-panel { padding: 28px 22px; min-height: 0; }
  .ab-letters { gap: 9px; }
  .ab-letter { width: 50px; height: 50px; font-size: 21px; }
  /* competency-framework — absolute pathway badges overlapping nodes */
  .cf-pathway .cf-tag { position: static; right: auto; top: auto; bottom: auto;
    display: inline-flex; margin: 10px 8px 0 0; }
  /* legal + article — reclaim reading width on narrow phones */
  .legal { padding: 24px 18px; }
  .art-hero-in, .art-wrap, .art-cta { padding-left: 20px; padding-right: 20px; }
}

/* ==========================================================================
   7. HORIZONTAL-OVERFLOW HARDENING (iOS Safari) — stop right-side scroll-out
   --------------------------------------------------------------------------
   Chromium honours the root `overflow-x: clip` strictly, so decorative circles,
   absolutely-positioned mock-up badges and third-party overlays that spill a few
   px past the viewport are fully hidden there. iOS Safari is looser about
   root-level clip, so on a real iPhone those same elements become pannable and
   the page "scrolls out" on the right.

   Fix = clip each TOP-LEVEL page band individually (iOS honours element-level
   clip reliably), contain the hero's decorative circles, and pull the known
   mock-up badges fully inside on phones. `overflow-x: clip` does NOT establish a
   scroll container, so the sticky top nav and any inner scrolling are unaffected.
   Everything here is scoped to <=900px, so desktop is untouched.
   ========================================================================== */
@media (max-width: 900px) {
  /* Clip every top-level band. nav is excluded (its mega-menus/CTA must not be
     clipped); the off-canvas drawer + backdrop are excluded (they slide in from
     off-screen by design). This also clips HubSpot's injected overlay wrapper. */
  body > header,
  body > section,
  body > footer,
  body > div:not(.mnav-drawer):not(.mnav-backdrop) {
    overflow-x: clip;
  }

  /* Hero decorative circles use ::before/::after with negative offsets. */
  .hero { overflow: hidden; }

  /* Mock-up "float" / "mini" badges — every template repeats the same
     {prefix}-float / {prefix}-mini pattern (pr = performance, sd = skills,
     sc = success-circles, eg = engagement; the complete set site-wide) with
     negative offsets (right:-6 / left:-16) that bleed past the card. Clamp every
     variant inside the card on phones. */
  .pr-float, .sd-float, .sc-float, .eg-float { right: 6px; left: auto; top: -10px; }
  .pr-mini,  .sd-mini,  .sc-mini,  .eg-mini  { left: 6px; right: auto; bottom: -12px; }

  /* Product "proof-card" mock-up (home + product pages): belt-and-suspenders on
     top of 6A — never let the offset bottom card bleed sideways on phones. */
  .bl-visual { max-width: 100%; }
  .bl-visual .card-a,
  .bl-visual .card-b,
  .bl-visual .card-b.br,
  .bl-visual .card-b.bl { left: auto; right: auto; }
}

/* ==========================================================================
   8. MOCK-UP CARD WIDTH CAP — module / product pages
   --------------------------------------------------------------------------
   The home page's mock cards reflow to full width (6A), but most module and
   product pages render a "visual" mock-up (e.g. the .pr-stack performance-review
   card) that keeps a fixed desktop `max-width` (440px) with no phone override.
   Chromium constrains it to the column, but iOS Safari renders it at the fixed
   width and it bleeds off the right — the "text scrolled out" the user reported.

   Cap every mock-up wrapper AND its inner card to the column width so it can
   never exceed the viewport on any device. This is the module-page equivalent
   of the 6A home reflow. Attribute selectors catch the per-page variants
   (.*-visual / .*-mock / .*-stack / .*-mockup) without needing to enumerate
   every template. mobile.css loads after each page's inline <style>, so these
   win on phones without !important.
   ========================================================================== */
@media (max-width: 900px) {
  .stmt-visual, .stmt-review, .hero-img, .ab-value-panel, .hero-video,
  [class*="-visual"], [class*="-mock"], [class*="-mockup"],
  [class*="-stack"], [class*="-card"], [class*="-frame"],
  [class*="-videoframe"], [class*="-media"], [class*="-panel"] {
    max-width: 100%;
  }
}
@media (max-width: 600px) {
  /* Give the card inside the tinted mock-up frame more room on narrow phones. */
  .stmt-visual, .stmt-review { padding-left: 16px; padding-right: 16px; }
}

/* ==========================================================================
   9. LOGO MARQUEES — phones: tighter spacing + always auto-scroll
   --------------------------------------------------------------------------
   Three logo strips exist site-wide: .logos-track (home), .ribbon-track /
   .ribbon-set (product/module pages) and .int-track (integrations). On phones
   their desktop spacing (64px gap / 34px img margins) is too loose — only ~2
   logos fit. Tighten it so the strip reads as a moving row.

   Auto-scroll: each strip's inline CSS disables the animation under
   `prefers-reduced-motion: reduce`, which freezes it on phones that have iOS
   "Reduce Motion" on (desktop is unaffected because that Mac doesn't). The site
   owner wants the strip to always scroll on mobile, so we re-declare the
   animation here — mobile.css loads after the inline <style>, so it wins the
   cascade over the reduced-motion rule (mobile only; desktop still respects it).
   ========================================================================== */
@media (max-width: 900px) {
  /* Home marquee */
  .logos-track { gap: 24px; animation: logos-scroll 20s linear infinite; }
  .logos-track img { width: 100px; height: auto; }

  /* Product / module page marquee */
  .ribbon-track { animation: ribbon-scroll 24s linear infinite; }
  .ribbon-set img { margin: 0 12px; width: 100px; height: auto; }

  /* Integrations marquee */
  .int-track { gap: 26px; animation: int-scroll 40s linear infinite; }
}

/* ==========================================================================
   11. MOCK-UP INTERNALS — phones: keep dots/tiles/badges inside the card
   --------------------------------------------------------------------------
   The mock-up cards now fit the viewport (section 8), but a few of their inner
   grids stayed at desktop density on a narrow card, so content clipped the card
   edge or collided with text.
   ========================================================================== */
@media (max-width: 900px) {
  /* Review-cycle mock: 3-up stat tiles clipped the right card edge — let the
     tiles shrink and tighten them so all three fit. */
  .cstats { gap: 8px; }
  .cstat { min-width: 0; padding: 9px 8px; }
  .cstat .n { font-size: 17px; }
  .cstat .l { font-size: 9px; }

  /* Performance-review mock: the header row was too cramped, so the name wrapped
     to a sliver and the "COMPLETED" chip (vertically centred) collided with the
     role text. Give the name room and let the chip drop onto its own line,
     aligned under the name. */
  .pr-top { flex-wrap: wrap; align-items: center; row-gap: 8px; }
  .pr-who { flex: 1 0 55%; }
  .pr-chip { margin-left: 54px; }

  /* Career/skill-gap mock: the 2-column grid pushed the right column's level
     dots past the card edge. Stack to one column so each row + its dots sit
     inside the card. */
  .sg { grid-template-columns: 1fr; }
}

/* ==========================================================================
   10. TEXT-OVERFLOW HARDENING — phones (belt-and-suspenders for section 1's
   text-size-adjust fix)
   --------------------------------------------------------------------------
   Two-column "text + visual" layouts collapse to one column on phones. Their
   grid/flex items default to min-width:auto, so a wide child (a mock-up card,
   a long word) can expand the single track past the viewport and push the
   copy off-screen. Force the columns to shrink to the screen and let long
   words break, so headings/paragraphs/list items always wrap within the phone.
   ========================================================================== */
@media (max-width: 900px) {
  .stmt-grid, .block, .hero-in, .cta-grid,
  .stmt-grid > *, .block > *, .hero-in > *, .cta-grid > *,
  .bl-copy, .bl-visual, .stmt-visual { min-width: 0; }

  h1, h2, h3, h4, p, li, blockquote, .lead, .kicker { overflow-wrap: break-word; }
}