/* ── HR Blizz Homepage · Mobile responsive overrides ──────────────
   Single breakpoint at 768px. Targets 390px (iPhone 12 mini) as the
   smallest fully-supported width. The desktop styles in home.css /
   the various per-section stylesheets continue to apply above 768px.
   ──────────────────────────────────────────────────────────────── */

/* Mobile fallback for the interactive console is hidden by default;
   visible only inside the @media block below. */
.tour-mobile-fallback { display: none; }

/* ── Hero · tablets held in portrait (iPad Air/Pro etc., ~769–1024px
   wide) ── home.css's min-height: calc(100vh - 68px) assumes a landscape
   browser window where 100vh is modest; on a tall portrait viewport it's
   far taller than the hero's actual content, and the content's auto-margin
   centering turns the difference into a huge blank gap above and below it.
   Scoped by orientation rather than width so it only catches genuinely
   tall/narrow viewports, not ordinary landscape desktop windows. */
@media (min-width: 769px) and (orientation: portrait) {
  header.hero { min-height: auto !important; padding: 96px 0 48px !important; }
}

@media (max-width: 768px) {

  /* ── Global typography & spacing ─────────────────────────── */
  #hrb-home-v2 { font-size: 15px; }
  .wrap { padding-left: 18px !important; padding-right: 18px !important; }

  h1, .hero-h1 { font-size: clamp(34px, 9.4vw, 44px) !important; line-height: 1.05 !important; }
  h2 { font-size: clamp(26px, 7.2vw, 32px) !important; line-height: 1.15 !important; }
  h3 { font-size: clamp(20px, 5.4vw, 24px) !important; }
  .lede, p.lede { font-size: 15px !important; line-height: 1.5 !important; }

  /* ── Nav · hide mega menus and CTA tray, keep logo + Sign in ── */
  .nav-links { display: none !important; }
  .nav-inner { padding-left: 14px !important; padding-right: 14px !important; gap: 8px !important; }
  .nav-cta { gap: 8px !important; }
  .nav-cta .btn { padding: 8px 12px !important; font-size: 13px !important; }
  .nav-cta .nav-search-btn { width: 36px !important; height: 36px !important; }
  .nav-logo img { width: 88px !important; height: auto !important; }

  /* ── Hero · stack copy over phone mockup, show the demo ───── */
  header.hero { min-height: auto !important; padding: 44px 0 8px !important; }
  header.hero > .wrap { transform: none !important; }
  .hero-topline { flex-direction: column; align-items: flex-start !important; gap: 10px !important; font-size: 11px !important; }
  .hero-main { grid-template-columns: 1fr !important; gap: 24px !important; }
  .hero-right { display: flex !important; justify-content: center !important; width: 100%; }
  .hero-right .lang-demo { justify-self: center !important; margin: 0 auto !important; }
  .hero-right .phone { width: min(300px, 82vw) !important; margin-bottom: 30px; }
  .lang-rail { display: none !important; }
  .lang-demo::before { display: none !important; }
  .hero-copy { gap: 18px !important; }
  .hero-extra { gap: 14px !important; width: 100%; }
  .hero-sub { font-size: 15.5px !important; max-width: none !important; }
  .hero-ctas { flex-direction: column !important; width: 100%; gap: 10px !important; }
  .hero-ctas .btn { width: 100%; max-width: 560px; justify-content: center !important; }
  .hero-micro { font-size: 12px !important; }
  .g2-card { padding: 10px 14px 10px 10px !important; gap: 12px !important; max-width: 100%; }
  .g2-logo-wrap, .g2-card-img { width: 36px !important; height: 36px !important; }
  .g2-card-rating b { font-size: 22px !important; }
  .g2-card-sub { display: none !important; }

  /* ── Stream-band · slimmer marquee on phones ─────────────── */
  .stream-band {
    height: clamp(150px, 32vh, 200px) !important;
    margin-top: 16px !important;
  }
  .stream-rows { gap: 10px !important; padding: 16px 0 !important; }
  .stream-pill { padding: 7px 12px 7px 8px !important; gap: 8px !important; }
  .stream-pill-flag { width: 22px !important; height: 22px !important; font-size: 13px !important; }
  .stream-pill-name { font-size: 11.5px !important; }
  .stream-pill-pay { font-size: 10px !important; }

  /* ── Instaroll bento · single column ─────────────────────── */
  .ir-sec { padding-top: 64px !important; }
  .ir-h { white-space: normal !important; font-size: 34px !important; line-height: 1.1 !important; }
  .ir-block { margin-top: 36px !important; }
  .ir-bento { grid-template-columns: 1fr !important; }
  .ir-bento > * { grid-column: auto !important; }
  .ir-impact { grid-template-columns: 1fr !important; padding: 16px 0 0 !important; }
  .ir-stat { border-left: 0 !important; border-top: 1px solid var(--rule) !important; padding: 20px 0 !important; }
  .ir-stat:first-child { border-top: 0 !important; padding-top: 0 !important; }
  .ir-stat-n { font-size: 44px !important; }

  /* ── Instaroll carousel · stack rail and video ───────────── */
  .irc-sec { padding: 56px 0 !important; }
  .irc-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .irc-rail { position: static !important; }
  .irc-h { font-size: 30px !important; max-width: none !important; }
  .irc-video { height: clamp(220px, 56vw, 360px); }

  /* ── Instaroll walkthrough · stack to single column ──────── */
  .iw-sec { padding: 64px 0 !important; }
  .iw-step { grid-template-columns: 1fr !important; gap: 18px !important; padding: 24px 0 !important; }
  .iw-step + .iw-step { padding-top: 24px !important; }
  .iw-art, .iw-copy { width: 100% !important; }
  .iw-step-h { font-size: 24px !important; }

  /* ── Modern experience · stack panels ────────────────────── */
  .me-sec { padding: 64px 0 !important; }
  .me-grid, .me-cols, .me-row { grid-template-columns: 1fr !important; gap: 20px !important; }
  .me-h { font-size: 32px !important; }
  .me-card { padding: 22px !important; }

  /* ── HRM Payroll tabs · stack tabs + body ────────────────── */
  .hpt-sec { padding: 56px 0 !important; }
  .hpt-tabs { flex-direction: column !important; align-items: stretch !important; gap: 6px !important; overflow-x: visible !important; }
  .hpt-tab { width: 100%; justify-content: flex-start !important; padding: 12px 14px !important; }
  .hpt-grid { grid-template-columns: 1fr !important; gap: 18px !important; }

  /* ── Console section · hide on mobile, show fallback card ── */
  .tour .tour-track, .tour .tour-skip { display: none !important; }
  .tour { background: var(--ink, #001738); padding: 0 !important; }
  .tour-mobile-fallback {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 72px 22px 88px;
    max-width: 560px;
    margin: 0 auto;
    color: #fff;
    text-align: left;
  }
  .tour-mobile-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 700 11px/1 var(--font-mono, "IBM Plex Mono", monospace);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
  }
  .tour-mobile-eyebrow::before {
    content: "";
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent, #FF5F1F);
    box-shadow: 0 0 12px rgba(255, 95, 31, 0.7);
  }
  .tour-mobile-h {
    margin: 0;
    font: 600 36px/1.05 var(--font-display, "Source Sans 3", sans-serif);
    letter-spacing: -0.022em;
    color: #fff;
    text-wrap: balance;
  }
  .tour-mobile-p {
    margin: 0;
    font: 400 16px/1.55 var(--font-body, "Source Sans 3", sans-serif);
    color: rgba(255, 255, 255, 0.74);
    max-width: 38ch;
    text-wrap: pretty;
  }
  .tour-mobile-card {
    display: flex;
    gap: 14px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    width: 100%;
    backdrop-filter: blur(6px);
  }
  .tour-mobile-card-ic {
    flex: none;
    width: 40px; height: 40px;
    border-radius: 10px;
    background: rgba(255, 95, 31, 0.16);
    color: var(--accent, #FF5F1F);
    display: grid;
    place-items: center;
  }
  .tour-mobile-card b {
    display: block;
    font: 600 15px/1.3 var(--font-display, sans-serif);
    color: #fff;
    margin-bottom: 4px;
    letter-spacing: -0.005em;
  }
  .tour-mobile-card p {
    margin: 0;
    font: 400 13.5px/1.5 var(--font-body, sans-serif);
    color: rgba(255, 255, 255, 0.65);
  }
  .tour-mobile-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 13px 22px;
    background: var(--accent, #FF5F1F);
    color: #fff;
    border-radius: 10px;
    font: 700 14px/1 var(--font-display, sans-serif);
    text-decoration: none;
    box-shadow: 0 10px 24px -10px rgba(255, 95, 31, 0.6);
    transition: transform 0.15s var(--ease-spring, ease), background 0.2s ease;
  }
  .tour-mobile-cta:hover { background: #E04E10; transform: translateY(-1px); }

  /* ── Client logos · 3 per row, tighter ───────────────────── */
  .client-logos-sec { padding: 48px 0 !important; }
  .client-logos-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 18px !important; }
  .client-logos-h { font-size: 17px !important; max-width: none !important; text-align: center !important; }

  /* ── TheRun (proof band + run section) ───────────────────── */
  .proof, .proof-band { padding: 40px 0 !important; }
  .proof-track, .proof-rows { grid-template-columns: 1fr !important; gap: 16px !important; }
  .run, .final { padding: 56px 0 !important; }
  .run-grid, .final-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .run-h, .final-h { font-size: 32px !important; }

  /* ── Country section · stack picker and payslip ──────────── */
  .country-grid, .country-row { grid-template-columns: 1fr !important; gap: 24px !important; }
  .country-picker { flex-wrap: wrap !important; gap: 8px !important; }
  .country-picker-btn { font-size: 13px !important; padding: 8px 12px !important; }

  /* ── Payslip wall · shorten scroll track to remove empty space ── */
  .wall-track { height: 500px !important; }
  .wall-caps {top:170px; bottom: auto;}
  .wall-grid, .payslip-wall-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .wall-slip { transform: none !important; max-width: 100%; }

  /* ── Section delivery / quotes / sections generic ────────── */
  .delivery-grid, .quotes-grid, .sections-grid, .split, .split-2col { grid-template-columns: 1fr !important; gap: 24px !important; }
  .split .split-copy, .split .split-media { width: 100% !important; }
  .split.flip { flex-direction: column !important; }

  /* ── Final CTA ───────────────────────────────────────────── */
  .final-ctas { flex-direction: column !important; width: 100%; gap: 10px !important; }
  .final-ctas .btn { width: 100%; max-width: 560px; justify-content: center !important; }

  /* ── Footer · already collapses below 720, tighten a touch ─ */
  .footer-v2 { padding: 48px 0 32px !important; }
  .footer-v2-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .footer-v2-bottom { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; text-align: left !important; }

  /* ── Tweaks panel · push to bottom-sheet style ──────────── */
  .tweaks-panel { width: 100% !important; max-width: 100% !important; left: 0 !important; right: 0 !important; }

  /* ── Generic safety net ──────────────────────────────────── */
  img, svg, video { max-width: 100%; height: auto; }
  pre, code { max-width: 100%; overflow-x: auto; }
  table { display: block; overflow-x: auto; }

  /* Reduce decorative animations on phones to save battery */
  .blob, .halo { opacity: 0.35 !important; }
}

/* ── Mobile hero order · phone demo between description and CTAs ── */
@media (max-width: 640px) {
  .hero-main { display: flex !important; flex-direction: column !important; gap: 20px !important; }
  .hero-copy, .hero-extra { display: contents !important; }
  .hero-h1 { order: 1; }
  .hero-sub { order: 2; margin: 0 !important; }
  .hero-right { order: 3; margin: 0 !important; }
  .hero-ctas { order: 4; }
  .hero-micro { order: 5; }
  .g2-card { order: 6; }
}

/* ── Even tighter for the very smallest phones (≤390px) ──── */
@media (max-width: 420px) {
  .wrap { padding-left: 16px !important; padding-right: 16px !important; }
  .hero-h1 { font-size: 32px !important; }
  .hero-sub { font-size: 14.5px !important; }
  .stream-band { display: none !important; }
  .ir-h { font-size: 30px !important; }
  .tour-mobile-h { font-size: 30px !important; }
}


/* ── Hamburger / mobile drawer — hidden above 768px ──────── */
.nav-burger { display: none; }
.nav-mobile-drawer { display: none; }

@media (max-width: 768px) {
  /* Show hamburger; hide the desktop Contact us CTA in favor of drawer footer */
  .nav-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 38px; height: 38px;
    margin-left: 6px;
    background: transparent;
    border: 1px solid rgba(0, 23, 56, 0.12);
    border-radius: 10px;
    cursor: pointer;
    padding: 0 9px;
    transition: border-color 0.15s ease, background 0.15s ease;
  }
  .nav-burger:hover { border-color: rgba(0, 23, 56, 0.25); background: rgba(0, 23, 56, 0.04); }
  .nav-burger-bar {
    display: block;
    width: 100%; height: 2px;
    background: var(--ink, #001738);
    border-radius: 2px;
    transition: transform 0.25s var(--ease-emphasized, ease), opacity 0.2s ease;
    transform-origin: center;
  }
  .nav.is-mobile-open .nav-burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.is-mobile-open .nav-burger-bar:nth-child(2) { opacity: 0; }
  .nav.is-mobile-open .nav-burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Hide the inline Contact us CTA on mobile (it lives in the drawer) */
  .nav-right .btn.btn-primary { display: none !important; }
  .nav-right .nav-search-btn { width: 38px !important; height: 38px !important; padding: 0 !important; }
  .nav-right .nav-search-kbd { display: none !important; }

  /* Drawer */
  .nav-mobile-drawer {
    display: flex !important;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    padding: 18px 20px 22px;
    background: #fff;
    border-top: 1px solid rgba(0, 23, 56, 0.08);
    box-shadow: 0 18px 32px -18px rgba(0, 23, 56, 0.22);
    z-index: 99;
    animation: navDrawerIn 0.22s var(--ease-emphasized, ease);
  }
  @keyframes navDrawerIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
  .nav-mobile-link {
    display: block;
    padding: 14px 4px;
    font: 600 17px/1 var(--font-display, sans-serif);
    color: var(--ink, #001738);
    border-bottom: 1px solid rgba(0, 23, 56, 0.06);
    text-decoration: none;
    letter-spacing: -0.005em;
  }
  .nav-mobile-link:hover { color: var(--accent, #FF5F1F); }
  .nav-mobile-foot { padding-top: 16px; }
  .nav-mobile-foot .btn { width: 100%; max-width: 560px; justify-content: center; }

  /* Lock body scroll while drawer is open */
  body:has(.nav.is-mobile-open) { overflow: hidden; }
}

/* ── Testimonials · horizontal scroll on phone + iPad ─────── */
@media (max-width: 1024px) {
  section.quotes-dark {
    padding: clamp(56px, 8vw, 92px) 0 !important;
  }
  section.quotes-dark > .wrap {
    padding: 0 !important;
  }
  section.quotes-dark .display-l {
    text-align: center !important;
    padding: 0 clamp(22px, 5vw, 48px);
    margin: 0 auto;
  }
  section.quotes-dark .section-sub {
    text-align: center !important;
    padding: 0 clamp(22px, 5vw, 48px);
    margin: 16px auto 0 !important;
  }
  .quotes-dark .quote-grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 18px !important;
    overflow: visible !important;
    padding: 8px clamp(22px, 5vw, 56px) 8px !important;
  }
  .quotes-dark .quote-grid::-webkit-scrollbar { display: none; }
  .quotes-dark .quote-slot {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    position: relative;
  }
  .quotes-dark .quote-slot:first-child { margin-left: 0 !important; }
  .quotes-dark .quote-slot:last-child { margin-right: 0 !important; }
}

/* Phone-only sizing refinements */
@media (max-width: 768px) {
  section.quotes-dark .display-l {
    font-size: 28px !important;
    line-height: 1.15 !important;
    margin-bottom: 4px;
  }
  .quotes-dark .quote-slot {
    flex: 0 0 82%;
    min-width: 82%;
    max-width: 320px;
    padding: 78px 22px 22px !important;
  }
  /* Smaller, repositioned quote mark so it doesn't overlap the headline */
  .quotes-dark .quote-slot::before {
    font-size: 56px !important;
    top: 18px !important;
    left: 22px !important;
  }
  .quotes-dark .quote-slot .q-headline {
    font-size: 20px !important;
    margin-top: 0 !important;
  }
  .quotes-dark .q-body { font-size: 14px !important; line-height: 1.55 !important; }
}

/* ══════════════════════════════════════════════════════════════
   TABLET REFINEMENTS · 769–1100px
   Fills the awkward gap between phone (≤768) and desktop (≥1100)
   where 3-col grids stack but content otherwise stays desktop.
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1100px) {
  /* Instaroll engine · three zones stack — make label + clock share one row */
  .ire-zone { gap: 20px; }
  .ire-zone-before { padding-top: 0; }
  .ire-clock {
    position: static !important;
    align-self: flex-end;
  }
  .ire-zone-before {
    display: grid !important;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "label clock"
      "steps steps";
    align-items: center;
    gap: 12px 16px;
  }
  .ire-zone-before .ire-zone-label { grid-area: label; align-self: center; }
  .ire-zone-before .ire-clock { grid-area: clock; justify-self: end; }
  .ire-zone-before .ire-steps {
    grid-area: steps;
    width: 100%;
    max-width: 620px;
    justify-self: stretch;
    margin: 8px auto 0 !important;
  }

  /* Feature stack · loosen fixed heights */
  .feat-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .feat-stage { min-height: auto !important; }

  /* Hero · narrower phone mockup */
  .hero-main { gap: 28px !important; }

  /* Client logos · 5 per row instead of 6 */
  .client-logos-grid { grid-template-columns: repeat(4, 1fr) !important; }

  /* Bento · 2-col compromise */
  .ir-bento { grid-template-columns: 1fr 1fr !important; }

  /* Console-prototype padding trim */
  .pac-aii-cards { grid-template-columns: repeat(2, 1fr) !important; }
  .pac-cld-tiles { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE POLISH · additions to the 768 block
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Instaroll engine · stack + place clock inline with label */
  .ire-sticky { padding: 48px 0 !important; }
  .ire-zone { gap: 18px !important; }
  .ire-zone-before {
    display: grid !important;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "label clock"
      "steps steps";
    gap: 10px 12px;
    align-items: center;
  }
  .ire-zone-before .ire-zone-label { grid-area: label; align-self: center; padding: 6px 12px !important; font-size: 11px !important; }
  .ire-zone-before .ire-clock {
    grid-area: clock; justify-self: end;
    position: static !important;
    padding: 6px 12px !important;
    font-size: 11px !important;
  }
  .ire-zone-before .ire-steps {
    grid-area: steps;
    width: 100%;
    justify-self: stretch;
    margin-top: 8px !important;
    padding-top: 0 !important;
  }
  .ire-step { padding: 10px 12px !important; font-size: 12.5px !important; }
  .ire-core { width: 76vw !important; max-width: 300px !important; }
  .ire-browser { max-width: 100% !important; }

  /* Feature stack · vertical tabs → collapsed list */
  .feat-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .feat-stage { min-height: 340px !important; }
  .feat-list { gap: 8px !important; }
  .feat-item { padding: 12px 14px !important; }

  /* Ask-AI · give the composer breathing room */
  .ask-ai-sec, .askai-sec { padding: 56px 0 !important; }
  .ask-ai-h, .askai-h { font-size: clamp(26px, 7vw, 32px) !important; line-height: 1.15 !important; }
  .ask-ai-composer, .askai-composer { padding: 16px !important; }
  .ask-ai-input, .askai-input { font-size: 15px !important; }

  /* Country payslip · shrink the slip container */
  .country-payslip { transform: scale(0.92); transform-origin: top center; }

  /* Instaroll walkthrough · art panels don't need forced height */
  .iw-art { min-height: auto !important; }
  .iw-art svg, .iw-art img { max-width: 100% !important; height: auto !important; }

  /* Modern experience · media doesn't overflow */
  .me-media, .me-media img, .me-media svg { max-width: 100% !important; height: auto !important; }
  .me-card h3 { font-size: 20px !important; }

  /* Payslip wall · single visible column, disable marquee horizontal scroll */
  .payslip-wall, .wall-grid {
    animation: none !important;
    transform: none !important;
  }

  /* Streambands · disable heavy blur & scale on phones */
  .stream-band .stream-fade { display: none !important; }

  /* Feature stack numbers stay legible */
  .feat-item .n { font-size: 13px !important; }
  .feat-item .t { font-size: 15px !important; }
  .feat-item .d { font-size: 13px !important; }

  /* Generic: any element with min-width triggering scroll */
  section, .wrap, .container { min-width: 0 !important; }

  /* Prevent decorative absolutely-positioned blobs from scrolling horizontally */
  #hrb-home-v2 { overflow-x: hidden !important; }
}

/* ══════════════════════════════════════════════════════════════
   VERY SMALL · ≤360px (older/smaller phones)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
  #hrb-home-v2 { font-size: 14.5px; }
  .wrap { padding-left: 14px !important; padding-right: 14px !important; }
  .hero-h1 { font-size: 30px !important; line-height: 1.06 !important; }
  .hero-sub { font-size: 14px !important; }
  .ir-h, .me-h, .run-h, .final-h { font-size: 26px !important; }
  .tour-mobile-h { font-size: 26px !important; }
  .nav-logo img { width: 76px !important; }
  .nav-burger { width: 34px !important; height: 34px !important; }
  .ire-step { padding: 8px 10px !important; font-size: 12px !important; }
  .ire-zone-before .ire-zone-label, .ire-zone-before .ire-clock { padding: 5px 10px !important; font-size: 10.5px !important; letter-spacing: 0.16em !important; }
  .g2-card { padding: 8px 12px 8px 8px !important; }
  .g2-card-rating b { font-size: 20px !important; }
}

/* ══════════════════════════════════════════════════════════════
   LARGE DESKTOP · ≥1600px
   Prevent content from stretching too wide.
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1600px) {
  .wrap { max-width: 1440px; margin-left: auto; margin-right: auto; }
}

/* ── Instaroll three-step list · horizontal scroll on mobile ─ */
@media (max-width: 768px) {
  .ic4-main {
    display: flex !important;
    flex-direction: row !important;
    gap: 14px !important;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 6px 22px 22px !important;
    margin: 0 -22px !important;
    scrollbar-width: none;
  }
  .ic4-main::-webkit-scrollbar { display: none; }
  .ic4-item {
    flex: 0 0 80%;
    min-width: 80%;
    max-width: 320px;
    scroll-snap-align: start;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 22px !important;
    background: #fff;
    border: 1px solid var(--rule, rgba(0, 23, 56, 0.08));
    border-radius: 14px;
    box-shadow: 0 12px 28px -20px rgba(0, 23, 56, 0.18);
    border-top: 0 !important;
  }
  .ic4-num { font-size: 36px !important; line-height: 1 !important; }
  .ic4-p { font-size: 14.5px !important; line-height: 1.55 !important; }
}


@media (max-width: 900px) {
  @media (max-width: 900px) {
  /* ED bento cards all stack to full width */
  .pyr-bento .pyr-bcard, .pyr-bcard-lg, .pyr-bcard-md, .pyr-bcard-sm, .pyr-bcard-xl { grid-column: 1 / -1 !important; }

  /* ED Employees list: hide Position col */
  .el-thead, .el-row { grid-template-columns: 18px 1.6fr 0.9fr 20px !important; gap: 8px 14px !important; }
  .el-thead > span:nth-child(3), .el-row > *:nth-child(3):not(.el-emp):not(.el-lock) { display: none !important; }

  /* Constrain wide H2 */
  h2.display-l, .display-l { max-width: 100% !important; word-wrap: break-word !important; hyphens: auto; }

  /* ED employee-card wrap max width */
  .ed-hero-wrap, .ed-hero-hub-wrap, .ed-card-wrap, .split-media .ov-stage, .split-media .ed-stage { max-width: 100% !important; width: 100% !important; }
  .split-media { overflow: hidden !important; }
}

/* ED hub hero mock: keep desktop 2x2 hub layout on mobile (see employee-database.css) */
}
@media (max-width: 640px) {
  .ed-hub { transform: scale(1) !important; }
  .ed-hub-src b { font-size: 12.5px !important; }
  .ed-hub-src small { font-size: 11px !important; }
}

/* == P4 responsive additions (Payroll, EmpDB, Reports, CoreHR) == */
@media (max-width: 900px) {
  /* ── Hero grids collapse ─────────────────────────────────── */
  .ovh .ovh-grid, .ovh.ed-hero-dark .ovh-grid, .ovh:has(.ed-hero-wrap) .ovh-grid, .ovh.ed-hero-dark:has(.ch-hero-wrap) .ovh-grid, .ovh.ed-hero-dark:has(.rp-hero-wrap) .ovh-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .ovh-media { max-width: 100% !important; width: 100% !important; }

  /* ── Split sections collapse (Core HR timesheet/benefits) ── */
  .ch-split-sec .split, #timesheet .split, #benefits .split, .ch-leave-sec .split { grid-template-columns: 1fr !important; gap: 32px !important; }
  .ch-split-sec .split.flip .split-media { order: 1; }
  .ch-split-sec .split.flip .split-copy { order: 2; }

  /* ── Payslip section grid collapses ──────────────────────── */
  .ch-payslip-sec .ch-leave2-grid { direction: ltr !important; grid-template-columns: 1fr !important; }
  .ch-payslip-cols { grid-template-columns: 1fr !important; }
  .ch-payslip-summary, .ch-payslip-ytd { grid-template-columns: repeat(3, 1fr) !important; }

  /* ── Employee-database & Reports splits ──────────────────── */
  .split { grid-template-columns: 1fr !important; gap: 32px !important; }
  .split-media { max-width: 100% !important; width: 100% !important; }

  /* ── Payroll bento & feature grids ───────────────────────── */
  .pyr-bento { grid-template-columns: 1fr !important; gap: 16px !important; }
  .pyr-feat-grid, .pyr-console-embed, .pyr-mock, .pyr-mock-side, .pyr-interactive-grid { grid-template-columns: 1fr !important; }
  .pyr-mock-side { display: none !important; }
  .pyr-hero-grid, .pyr-hero .split, .pyr-console .split { grid-template-columns: 1fr !important; gap: 28px !important; }

  /* ── Reports stack ───────────────────────────────────────── */
  .rp-stack-showcase, .rp-stat2-grid, .rp-tabs-grid { grid-template-columns: 1fr !important; gap: 20px !important; }

  /* ── Balance grid + ts cards ─────────────────────────────── */
  .ch-bal-grid { grid-template-columns: 1fr !important; }
  .ch-ts-cards { grid-template-columns: 1fr !important; }

  /* ── Section paddings ────────────────────────────────────── */
  .wrap { padding-left: 20px !important; padding-right: 20px !important; }
  .pyr-pac, .pyr-proc, .pyr-console, .pyr-feat, .pyr-merged, .pyr-interactive { padding-top: 64px !important; padding-bottom: 64px !important; }
}

@media (max-width: 640px) {
  /* Bigger text scales on small phones */
  h1.ovh-h1, .display-l { font-size: clamp(30px, 9vw, 44px) !important; line-height: 1.08 !important; }
  h2.display-m, .display-m { font-size: clamp(24px, 7vw, 32px) !important; }
  .lede { font-size: 15px !important; line-height: 1.55 !important; }
  .ch-payslip-summary, .ch-payslip-ytd { grid-template-columns: 1fr !important; }
  .ch-payslip { padding: 18px !important; }
  .ch-payslip-net { flex-direction: column; align-items: flex-start; gap: 12px; }
  .ch-payslip-cta { flex-wrap: wrap; }
  .ch-mini-ps { min-width: 0 !important; }
  .ch-mini-ps-crop { margin: 12px -14px -14px 0 !important; }
  .ch-payslip-sec .ch-mini-ps-crop { margin: 12px 0 -14px -14px !important; }
  /* Bento cards ease padding */
  .pyr-bcard { padding: 20px !important; }
  /* Reports & payroll tables scroll horizontally */
  .rp-table-wrap, .pyr-table-wrap, .ch-tab-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  table { min-width: 640px; }
  /* Ch-dual cards padding */
  .ch-dual-card { padding: 22px !important; }
  .ch-dual-card h3 { font-size: 20px !important; }
  /* Employee database hero card size */
  .ed-hero-wrap, .ed-hero-hub-wrap { max-width: 100% !important; margin-left: 0 !important; padding: 14px !important; }
  /* Payroll hero mock */
  .pyr-mock, .pyr-hero-visual { max-width: 100% !important; }
  .pyr-mock-side { display: none !important; }
}

@media (max-width: 420px) {
  .wrap { padding-left: 16px !important; padding-right: 16px !important; }
  .ch-payslip { padding: 14px !important; }
  .ch-ts { padding: 14px !important; }
  .ch-payslip-av { width: 36px !important; height: 36px !important; font-size: 12px !important; }
  .ch-payslip-head b { font-size: 13.5px !important; }
  .ch-payslip-net-l b { font-size: 22px !important; }
  .ch-btn { padding: 8px 12px !important; font-size: 12px !important; }
  .pyr-bcard { padding: 16px !important; }
  .pyr-bcard-h { font-size: 16px !important; }
  .ch-dual-card { padding: 18px !important; }
  .ch-dual-list li { font-size: 13.5px !important; }
}


/* == P4 FORCE == */
html, body { overflow-x: hidden !important; max-width: 100vw !important; }
@media (max-width: 1024px) {
  .pyr-bento { display: grid !important; grid-template-columns: 1fr !important; gap: 16px !important; }
  .pyr-bento > .pyr-bcard { grid-column: 1 / -1 !important; width: 100% !important; max-width: 100% !important; }
  .ed-card-wrap, .ed-hero-wrap, .ed-hero-hub-wrap, .split-media, .split-media > *, .ov-stage, .ed-stage, .rp-stage { max-width: 100% !important; width: 100% !important; overflow: hidden !important; box-sizing: border-box !important; }
  h2.display-l, .display-l { max-width: 100% !important; word-break: break-word !important; }
}
@media (max-width: 900px) {
  .el-thead, .el-row { grid-template-columns: 16px 1.4fr 0.9fr 18px !important; gap: 6px 10px !important; padding: 6px !important; }
  .el-thead > span:nth-of-type(2), .el-row > *:nth-child(3) { display: none !important; }
  .el-emp b, .el-emp small { font-size: 12px !important; }
  .el-emp img { width: 30px !important; height: 30px !important; }
}


/* == P4 NUKE HUB (disabled — hub keeps desktop 2x2 layout on mobile) == */
@media (max-width: 900px) {
  .ovh.ed-hero-dark .ovh-media, .ed-hero-hub-wrap, .ed-card-wrap { max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; }
  .__disabled_ed_hub_nuke,
  .ed-hero-hub-wrap .ed-hub-src__unused,
  .ed-hero-hub-wrap .ed-hub-src-tl__unused,
  .ed-hero-hub-wrap .ed-hub-src-tr__unused,
  .ed-hero-hub-wrap .ed-hub-src-bl__unused,
  .ed-hero-hub-wrap .ed-hub-src-br__unused { position: static !important; top: auto !important; right: auto !important; left: auto !important; bottom: auto !important; transform: none !important; animation: none !important; margin: 6px 0 !important; width: 100% !important; box-sizing: border-box !important; }
  .ed-hero-hub-wrap .ed-hub-core__unused { position: static !important; }
  .ed-hero-hub-wrap .ed-hub-lines__unused { display: none !important; }
  .ed-hero-hub-wrap .ed-hub-dark__unused { aspect-ratio: auto !important; }
  .ed-hub-src__unused small, .ed-hero-hub-wrap .ed-hub-src__unused small { display: block !important; }
}

/* ── Desktop nav must also fit the 981–1120px band (MacBook Air scaled, iPad landscape) ── */
@media (min-width:981px) and (max-width:1120px){
  .nav-inner{padding-left:24px!important;padding-right:24px!important;gap:10px!important}
  .nav-links{gap:0!important}
  .nav-trigger,.nav-link{padding-left:9px!important;padding-right:9px!important;font-size:14px!important}
  .nav-right{gap:8px!important}
  .nav-search-kbd{display:none!important}
  .nav-right .btn.btn-primary{padding-left:14px!important;padding-right:14px!important}
}