/* Deliberate deviations from the design package, linked after eyeot-fixes.css on every page.
   Lives outside public/css because scripts/import-pages.mjs replaces that folder from the design. */

/* 1. Mobile header: the menu button sits at the right edge, after the CTA (Jenia, 2026-10-20),
      instead of between the wordmark and the CTA where wide wordmarks overlapped it. */
@media (max-width: 980px) {
  .site-nav .nav-inner { display: flex; align-items: center; }
  .site-nav .nav-actions { order: 2; margin-left: auto !important; }
  .site-nav .nav-toggle { order: 3; margin-left: 10px !important; flex: 0 0 auto; }
  .site-nav .nav-links { order: 4; }
}
@media (max-width: 480px) {
  .site-nav .nav-inner { padding-left: 118px !important; padding-right: 12px !important; }
  .site-nav .nav-toggle { width: 42px; height: 40px; }
}
/* Below 360px (iPhone SE 1st gen, small Androids) the CTA and menu button pushed past the edge. */
@media (max-width: 360px) {
  .site-nav .nav-inner { padding-right: 10px !important; }
  .site-nav .nav-try { padding: 9px 10px !important; font-size: 12px !important; }
  .site-nav .nav-toggle { width: 40px; margin-left: 8px !important; }
}

/* 2. The layout's skip link stays off-screen until focused on every page; a few design pages
      (demo-request, contact-us) never carried the rule themselves. The shadow only shows on focus,
      or it peeks out above the header. */
.skip-link { position: fixed; left: 16px; top: 12px; z-index: 1000; padding: 11px 16px; border-radius: 7px; background: #fff; color: #092652; font-weight: 700; text-decoration: none; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); box-shadow: 0 8px 24px rgba(9,28,52,.18); }

/* 3. Mobile layout fixes from the 2026-10-22 phone audit. They sit in layer `base` with !important:
      design pages declare `@layer base, page;` and keep their own !important rules in `page`, and an
      important rule in an earlier layer beats both a later layer and unlayered CSS. */
@layer base {
  /* Phone wordmark: css/shared/mobile-nav-fix.css sets this, but pages whose layered CSS pins the brand
     at 28px with !important (eyeOTplanner, ImageAssure...) kept the wider spacing and, at 320px,
     the CTA ran over the wordmark. */
  @media (max-width: 480px) {
    .site-nav .nav-brand { left: 18px !important; width: 96px !important; }
  }
  @media (max-width: 360px) {
    .site-nav .nav-brand { left: 14px !important; }
  }
  /* iOS zooms the page on focus of any field under 16px (blog search). */
  @media (max-width: 720px) {
    input, select, textarea { font-size: max(16px, 1em) !important; }
  }
  /* security-architecture: a later design block re-set the two-column review grid without a breakpoint,
     so on phones the copy squeezed left and the document cards ran off the right edge. */
  @media (max-width: 1000px) {
    .review-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  }
  /* security-architecture: the 340px ring behind the SOC 2 badge pushed 320px phones sideways. */
  @media (max-width: 400px) {
    .badge-wrap::before { width: min(340px, 100%) !important; height: auto !important; aspect-ratio: 1 !important; }
    .badge-wrap::after { width: min(270px, 80%) !important; height: auto !important; aspect-ratio: 1 !important; }
  }
  /* product-updates: a card alone on its row stays a wide side-by-side card below 1180px. */
  @media (max-width: 1180px) {
    .feed .month .cards > .entry:last-child { grid-column: auto !important; flex-direction: column !important; }
    .feed .month .cards > .entry:last-child .vis { flex: none !important; min-height: 0 !important; height: 190px !important; border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
  }
  /* integrations: the featured cards stay two columns at 375px, clipping logos and squeezing copy. */
  @media (max-width: 640px) {
    .spotlights { grid-template-columns: 1fr !important; }
  }
  /* eyeOT ops + physical-security-operations + infrastructure-monitoring-management hero: the design's phone
     layout is the photo, then the device tags as a two-column grid, then the platform screenshot. Later style
     blocks made the photo absolute and the tags full width, so they spilled over and past the photo; on eyeOT
     ops the screenshot also stayed absolute, behind the tags. */
  @media (max-width: 720px) {
    #datacenter.dc-wrap { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; height: auto !important; min-height: 0 !important; aspect-ratio: auto !important; padding: 0 0 16px !important; overflow: clip !important; }
    #datacenter .dc-photo { position: relative !important; inset: auto !important; grid-column: 1 / -1 !important; width: 100% !important; height: auto !important; aspect-ratio: 3 / 2 !important; object-fit: cover !important; margin: 0 0 6px !important; }
    #datacenter.dc-wrap .hotspot { position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; width: auto !important; justify-self: stretch !important; min-width: 0 !important; min-height: 40px !important; margin: 0 !important; font-size: 12px !important; white-space: normal !important; text-align: left !important; }
    #datacenter .pso-platform { position: relative !important; inset: auto !important; width: 100% !important; height: auto !important; aspect-ratio: 16 / 9 !important; grid-column: 1 / -1 !important; order: 99 !important; margin-top: 8px !important; }
  }
  /* Phone version of the desktop scroll animation (which the design switches off at 720px): the tags rise in
     one by one, then the platform screenshot. Scroll-driven where the browser supports it, else on load.
     Pages pin opacity/transform/translate with !important here, so the motion uses filter and scale. */
  @media (max-width: 720px) and (prefers-reduced-motion: no-preference) {
    @keyframes eyeot-hero-rise { from { filter: opacity(0); scale: .9; translate: 0 16px; } }
    #datacenter.dc-wrap .hotspot { animation: eyeot-hero-rise .5s cubic-bezier(.2, .7, .2, 1) both; }
    #datacenter.dc-wrap .hotspot:nth-of-type(2) { animation-delay: .12s; }
    #datacenter.dc-wrap .hotspot:nth-of-type(3) { animation-delay: .24s; }
    #datacenter.dc-wrap .hotspot:nth-of-type(4) { animation-delay: .36s; }
    #datacenter.dc-wrap .hotspot:nth-of-type(5) { animation-delay: .48s; }
    #datacenter.dc-wrap .hotspot:nth-of-type(6) { animation-delay: .6s; }
    #datacenter.dc-wrap .hotspot:nth-of-type(7) { animation-delay: .72s; }
    #datacenter .pso-platform { animation: eyeot-hero-rise .7s cubic-bezier(.2, .7, .2, 1) .8s both; }
    @supports (animation-timeline: view()) {
      #datacenter.dc-wrap .hotspot, #datacenter .pso-platform { animation-duration: auto; animation-delay: 0s; animation-timeline: view(); animation-range: entry 20% cover 30%; }
      #datacenter.dc-wrap .hotspot:nth-of-type(even) { animation-range: entry 60% cover 40%; }
    }
  }
  /* Testimonial author row: the customer link takes its own line on phones instead of squeezing the
     name and title into ~90px. */
  @media (max-width: 560px) {
    .proof-identity { flex-wrap: wrap !important; row-gap: 14px !important; }
    .proof-identity .customer-logo { flex: 1 0 100% !important; margin-left: 0 !important; padding-left: 0 !important; border-left: 0 !important; text-align: left !important; }
  }
  /* demo-request: the "What happens next" eyebrow kept its slate colour on the navy band. */
  main:has(#demo-form) .next .eyebrow { color: #9DB8DD !important; }
  /* Comparison tables (eyeOTplanner, ImageAssure, infrastructure): on phones they read like the eyeOT planner
     "Compare all plans" table (Micky, 2026-10-29): a real table that scrolls sideways inside a rounded card,
     the feature down the left, navy round ticks, the eyeOT column tinted. The design's phone layout stacked
     each row into label/value pairs and the tick-tile version that replaced it was unreadable. */
  @media (max-width: 820px) {
    .inf-table-wrap { overflow-x: auto !important; border: 1px solid #c8d7e8 !important; border-radius: 16px !important; box-shadow: none !important; -webkit-overflow-scrolling: touch; }
    .inf-table { display: table !important; table-layout: fixed !important; width: 700px !important; min-width: 0 !important; border-collapse: collapse !important; }
    .inf-table:has(thead th:nth-child(6)) { width: 920px !important; }
    .inf-table thead { display: table-header-group !important; }
    .inf-table tbody { display: table-row-group !important; }
    .inf-table tr { display: table-row !important; padding: 0 !important; border: 0 !important; }
    .inf-table th, .inf-table td { display: table-cell !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 15px 12px !important; border: 0 !important; border-bottom: 1px solid #eef5fb !important; border-radius: 0 !important; text-align: center !important; vertical-align: middle !important; }
    .inf-table tbody tr:last-child > * { border-bottom: 0 !important; }
    .inf-table thead th { background: #f7fbff !important; color: #092652 !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .02em !important; text-transform: none !important; line-height: 1.3 !important; vertical-align: bottom !important; }
    .inf-table thead th small { font-size: 11px !important; font-weight: 500 !important; }
    .inf-table thead th:first-child, .inf-table tbody th { text-align: left !important; padding-left: 18px !important; }
    .inf-table thead th.inf-eyeot { background: #092652 !important; color: #fff !important; }
    .inf-table thead th.inf-eyeot img { height: 30px !important; margin: 0 auto !important; }
    .inf-table thead th { width: 106px !important; }
    .inf-table thead th:first-child { width: 210px !important; }
    .inf-table thead th.inf-eyeot { width: 180px !important; }
    .inf-table:has(thead th:nth-child(6)) thead th:not(:first-child):not(.inf-eyeot) { width: 88px !important; }
    .inf-table tbody th b { font-size: 14.5px !important; font-weight: 600 !important; }
    .inf-table td::before, .inf-table td::after { display: none !important; }
    .inf-table td[data-l]:not(.inf-eyeot) { background: none !important; font-size: 0 !important; }
    .inf-table td.inf-eyeot { background: #eef5fb !important; color: #092652 !important; font-size: 12.5px !important; font-weight: 600 !important; line-height: 1.35 !important; }
    .inf-table td[data-l]:not(.inf-eyeot)::after, .inf-table td.inf-eyeot::before, .inf-legend i {
      content: '' !important; display: inline-block !important; position: static !important; width: 22px !important; height: 22px !important; margin: 0 !important; border: 0 !important; border-radius: 50% !important; font-size: 0 !important; vertical-align: middle !important;
    }
    .inf-table td.inf-eyeot::before { display: block !important; margin: 0 auto 6px !important; }
    .inf-table td.y::after, .inf-table td.inf-eyeot.y::before, .inf-legend span:nth-child(1) i { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='11' fill='%23092652'/%3E%3Cpath d='M6.5 11.3l3 3 6-6.3' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat !important; }
    .inf-table td.p::after, .inf-legend span:nth-child(2) i { background: linear-gradient(90deg, #092652 50%, #c8d7e8 50%) !important; }
    .inf-table td.n::after, .inf-legend span:nth-child(3) i { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Crect x='6' y='10' width='10' height='2' rx='1' fill='%239db8dd'/%3E%3C/svg%3E") center / 100% no-repeat, #eef5fb !important; box-shadow: inset 0 0 0 1px #c8d7e8 !important; }
    .inf-legend { justify-content: flex-start !important; gap: 18px !important; color: #092652 !important; font-size: 12.5px !important; font-weight: 700 !important; }
    .inf-legend span { gap: 7px !important; }
    .inf-legend i { width: 16px !important; height: 16px !important; }
    /* Swipe hint (Jaci, 2026-10-29): a strip at the top of the card that stays put while the table scrolls under it. */
    :is(.inf-table-wrap, .cmp-wrap)::before { content: 'Swipe to see every column \2192'; display: block; position: sticky; left: 0; padding: 9px 18px; background: #f7fbff; border-bottom: 1px solid #eef5fb; color: #526D89; font: 600 12px/1.3 Inter, system-ui, sans-serif; letter-spacing: .02em; }
  }
}

/* 4. One vertical rhythm for every page (Micky, 2026-10-22). The design pages each set their own section padding
      (anywhere from 56px to 210px); these shared selectors override them so similar blocks space the same everywhere.
      The first section in <main> is the page hero and keeps its own spacing. In layer `base` for the reason in 3. */
:root {
  --section-y: clamp(2rem, 1.5rem + 2vw, 3rem); /* content sections */
  --band-y: 2rem;                                  /* CTA bands and logo/trust strips */
  --head-gap: 2rem;                                /* section heading block → its content */
}
@layer base {
  #main > section:not(:first-child, .proof, .cs-numbers, .trust-line, .cta) {
    padding-top: var(--section-y) !important;
    padding-bottom: var(--section-y) !important;
  }
  #main > section:is(.mid-cta, .sol-mid-cta, .closing, .closing-cta, .final-cta, .final-platform-cta, .ab-cta, .cta-band, .integration-strip, .proof-strip, .nm-vendors, .alternate) {
    padding-top: var(--band-y) !important;
    padding-bottom: var(--band-y) !important;
  }
  /* Strips that sit flush under the hero: no top padding, standard gap below. */
  #main > section:is(.trust-bar, .trust, .feed) { padding-top: 0 !important; padding-bottom: var(--section-y) !important; }
  #main > section :is(.section-head, .pso-head, .scroll-flow-head, .ops-flow-head, .mixed-head, .directory-head, .outcomes-head, .fit-head, .pricing-head, .roi-head, .sec2-head, .ab-head, .ab-lead-head) {
    margin-bottom: var(--head-gap) !important;
  }
}

/* 5. Navy bands that fade in and out of the light sections around them (testimonials, ImageAssure award, integrations
      mixed environment, infrastructure mid CTA, security SOC 2). The design set the fade as a % of the section height
      while section 4 fixed the padding at 48px, so on tall sections (phones especially) the copy sat in the fade
      (site review #1, #59). The fade is now a fixed height and the padding always clears it. After section 4 so it
      wins at equal specificity; in layer `base` for the reason in 3. */
:root {
  --navy-fade: 56px;
  --navy-pad: calc(var(--navy-fade) + clamp(2rem, 1.5rem + 2vw, 3rem));
}
@layer base {
  #main > section:is(.testimonial, .home-testimonial, .iat, .iax-awd, .mixed-env, .sol-mid-cta, .assurance) {
    background: linear-gradient(180deg, var(--fade-top, #eef5fb) 0, #092652 var(--navy-fade), #092652 calc(100% - var(--navy-fade)), var(--fade-bottom, #eef5fb) 100%) !important;
    padding-top: var(--navy-pad) !important;
    padding-bottom: var(--navy-pad) !important;
  }
  /* The award band drew its fades as 170px overlays on top of the copy (Jaci, 2026-10-29: eyebrow hardly readable). */
  #main > section.iax-awd::before, #main > section.iax-awd::after { display: none !important; }
}

/* 6. Sticky scroll cards (eyeOT ops, eyeOT planner, ImageAssure, IT & OT, security integrators): each card stacked
      42px below the last and ran ~608px tall, so at 1366×768 the third card on ran off the bottom (site review #2).
      The stack step now shrinks with the viewport height, the card padding and heading tighten and the screenshot is
      capped, so the current card always fits on screen. --vh is the viewport height in CSS px after the pages'
      fluid-scale zoom (set in the layout); plain 100vh overshoots once a wide screen zooms the page. Above 900px wide
      only, where the cards are sticky. */
@media (min-width: 901px) {
  @layer base {
    .stack-card {
      --stack-step: clamp(10px, (var(--vh, 100vh) - 720px) / 6, 42px);
      --stack-top: calc(88px + var(--i, 0) * var(--stack-step));
      top: var(--stack-top) !important;
      margin-bottom: 72px !important;
    }
    /* eyeOT planner's cards are already compact (its own padding and capped screenshots), so they keep them. */
    .stack-card:not(:has(.pl-shot)) .stack-body { padding-top: 28px !important; padding-bottom: 28px !important; }
    .stack-card:not(:has(.pl-shot)) h3 { font-size: clamp(26px, var(--vh, 100vh) * .04, 40px) !important; }
    .stack-card :is(.stack-visual, .ops-visual):not(.pl-shot) { max-height: calc(var(--vh, 100vh) - var(--stack-top) - 42px - 56px - 16px) !important; justify-self: center; }
  }
}

/* 7. Login is a two-app menu (eyeOT ops / eyeOT planner) instead of the design's single ops link: a dropdown in
      the header on desktop, and an accordion inside the phone menu (site review #10: the design hides the header's
      Login below 980px). Opens on click only. The shared nav script toggles .open on any .nav-item > .nav-trigger and
      clears it on Escape and clicks outside the nav; Header.astro adds a close on any click outside the Login item itself
      (the shared handler ignores clicks elsewhere in the header). .nav-actions takes the nav's height so the item's
      height:100% is the real 76px and the menu drops below the bar instead of over the Login button. */
.site-nav .nav-actions { height: 100%; }
.site-nav .nav-login-item { position: relative; height: 100%; display: flex; align-items: center; }
.site-nav .nav-login-trigger { font-weight: 700; white-space: nowrap; padding-right: 14px; }
.site-nav .nav-login-trigger::before { content: "\25BE"; position: absolute; right: 0; top: 50%; font-size: .75em; line-height: 1; transform: translateY(-50%); transition: transform .18s ease; }
.site-nav .nav-login-item.open .nav-login-trigger::before { transform: translateY(-50%) rotate(180deg); }
.site-nav .login-menu { position: absolute; top: calc(100% - 8px); right: -8px; min-width: 250px; padding: 8px; background: #fff; border: 1px solid #edf1f6; border-radius: 12px; box-shadow: 0 18px 40px rgba(9,28,52,.12); opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none; transition: opacity .16s ease, transform .16s ease, visibility .16s; z-index: 101; }
.site-nav .nav-login-item.open > .login-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.site-nav .login-menu a { display: block; padding: 10px 12px; border-radius: 8px; color: #0d1f35; text-decoration: none; }
.site-nav .login-menu a:hover, .site-nav .login-menu a:focus { background: #f4f7fb; }
.site-nav .login-menu a strong { display: block; font-size: 15px; line-height: 1.3; }
.site-nav .login-menu a span { display: block; color: #526d89; font-size: 13px; line-height: 1.4; }
.site-nav .login-menu a:hover strong, .site-nav .login-menu a:focus strong { color: var(--red, #F53332); }
.site-nav .nav-login-mobile { display: none; }
@media (max-width: 980px) {
  .site-nav .nav-login-item { display: none !important; }
  .site-nav .nav-login-mobile { display: block; }
}

/* 8. Supported devices + integrations heroes (site review #48, #51): the hero art grew with the page width (~800px
      tall on a 1700px-wide window), pushing the device search below the fold and leaving a wide gap under the menu.
      Both now cap the art at the same height, so the two heroes match and the search sits above the fold. */
@media (min-width: 981px) {
  :root { --hero-art-h: min(520px, calc(var(--vh, 100vh) - 240px)); }
  @layer base {
    .hero-compact .hx-img img { width: auto !important; max-width: 100% !important; max-height: var(--hero-art-h) !important; margin-left: auto; }
    .int-visual .iv-stage { width: min(100%, calc(var(--hero-art-h) * 1394 / 887)) !important; margin-left: auto; }
  }
}

/* 9. Home hero sits closer to the menu (site review #14): 28px + 44px of padding left ~90px between the menu and
      the eyebrow. Desktop only; the phone hero has its own layout. */
@media (min-width: 981px) {
  @layer base {
    #hero.hero-runway > .hero { padding-top: 12px !important; }
    #hero.hero-runway > .hero > .copy { padding-top: 20px !important; }
  }
}

/* 10. eyeOT planner testimonial (site review #29): the IIS logo lines up on the left with "Read the customer story". */
@layer base {
  #proof .proof-company { text-align: left !important; }
  #proof .proof-company .proof-logo { margin-left: 0 !important; }
}

/* 11. eyeOT planner phone sticky CTA: hidden while the hero's buttons are on screen (site review #36; the
       script sits next to it in the page). */
.mobile-demo-cta { transition: transform .25s ease, opacity .25s ease; }
.mobile-demo-cta.is-waiting { transform: translateY(160%); opacity: 0; pointer-events: none; }

/* 12. Supported devices "Keep exploring": two cards now that Remote access is gone (site review #49). */
@media (min-width: 981px) {
  @layer base { .kx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
}

/* 13. Search fields (integrations, supported devices, blog): the design's red :focus-visible ring read as an error
       on phones, where every tap focuses the field (site review #53). Navy ring instead; still visible for keyboards. */
@layer base {
  input[type="search"]:focus-visible { outline: 2px solid #092652 !important; outline-offset: 2px !important; }
}

/* 14. Contact us: copy and form start at the same line, like the demo request page (site review #55). */
@layer base {
  main:has(#contact-form) .hero-grid { align-items: start !important; }
}

/* 15. "What we cover" logo rows (infrastructure, physical security): the HPE iLO and stacked Hanwha Vision marks are
       taller than wide, so at the row's shared height they shrank to ~15–28px wide (site review #5, #67). They get
       the taller box the vendor strip gives HPE iLO. */
@layer base {
  .pso-cov-logos :is(img[alt="HPE iLO"], img[alt="Hanwha Vision"]) { height: 40px !important; width: auto !important; max-height: none !important; }
}

/* 16. Security integrators hero photo fades into the copy on its left, like the home hero (site review #70): no box
       edge on that side and a wider wash. Desktop only; on phones the photo sits under the copy. */
@media (min-width: 1001px) {
  @layer base {
    main:has([aria-label="Clear Cloud customer story"]) #ihWrap.hero-photo { border-color: transparent !important; box-shadow: none !important; }
    main:has([aria-label="Clear Cloud customer story"]) #ihWrap.hero-photo::after { background: linear-gradient(90deg, #f8fbff 0%, rgba(248,251,255,.85) 10%, rgba(248,251,255,.4) 24%, rgba(248,251,255,0) 40%), linear-gradient(0deg, rgba(7,34,72,.16), transparent 38%) !important; }
  }
}

/* 17. Desktop mega menu stays open ~0.3s after the pointer leaves (Kirill, Marketing Weekly 2026-10-27): on a wide
      screen the menu's links sit far from the trigger, and a diagonal move from the trigger crossed the bar outside
      the item and closed it. The design toggled pointer-events, which would also have cancelled the grace period;
      a hidden menu already takes no pointer events, so the toggle is dropped. */
@media (min-width: 1181px) {
  .site-nav .mega { pointer-events: auto !important; transition: opacity .16s ease .3s, transform .16s ease .3s, visibility 0s linear .46s !important; }
  .site-nav .nav-item:hover > .mega, .site-nav .nav-item.open > .mega { transition-delay: 0s !important; z-index: 100 !important; } /* above a sibling still fading out */
}

/* 18. Pre-launch phone pass (2026-10-27). In layer `base` for the reason in 3. */
@layer base {
  /* Cookie banner vs the sticky phone CTAs (customer stories, ImageAssure, solutions pages: .mobile-demo-cta;
     IT & OT, integrators: .mobile-cta; blog: .b-mbar): on a first visit the banner sat on top of the CTA, so the
     red button showed through under the Decline/Accept row. The CTA stays hidden until the banner is answered. */
  @media (max-width: 980px) {
    body:has(.consent:not([hidden])) :is(.mobile-demo-cta, .mobile-cta, .b-mbar) { display: none !important; }
  }
  /* IT & OT teams + security integrators trust strip: four 1fr columns between 721px and 980px could not fit the
     "Multi-site" item, so the page scrolled sideways at 768px. Two by two there, like the design's phone layout. */
  @media (min-width: 721px) and (max-width: 980px) {
    .trust-line .trust-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .trust-line .trust-item { min-height: 108px !important; padding: 16px !important; }
    .trust-line .trust-item:nth-child(2)::after { display: none !important; }
    .trust-line .trust-item:nth-child(-n+2) { border-bottom: 1px solid #c8d7e8 !important; }
  }
}

/* 19. Security integrators hero photo gets the IT & OT teams header treatment (Jaci, site review 2026-10-23: "this
      header lacks the fade the other who-we-serve headers have"). The design boxed the stadium photo at its own aspect
      ratio inside the container, so the wash in 16 landed on a card with a visible edge. Same bleed to the right edge,
      fixed height and cover crop as it-ot-teams; the wash from 16 stays. Desktop only, like 16. The photo starts at its
      own column, not under the headline (Jaci, 2026-10-29: "should be at the side"). */
@media (min-width: 1001px) {
  @layer base {
    main:has([aria-label="Clear Cloud customer story"]) .hero-visual-wrap { margin-right: calc((min(1240px, var(--zvw, 1vw) * 100 - 48px) - var(--zvw, 1vw) * 100) / 2) !important; }
    main:has([aria-label="Clear Cloud customer story"]) #ihWrap.hero-photo { margin-left: 0 !important; margin-right: 0 !important; border-radius: 28px 0 0 28px !important; height: min(calc(var(--zvh, 1vh) * 80), 790px) !important; min-height: 560px !important; aspect-ratio: auto !important; }
    main:has([aria-label="Clear Cloud customer story"]) #ihWrap.hero-photo > img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: 50% 45% !important; }
  }
}

/* 20. Integrations hero matches the Supported Devices hero height (Jaci, site review 2026-10-23: "far too tall", with
      an oversized gap under the menu). The copy column was .62fr, so at 1920px the h1 wrapped to six lines, the copy
      ran 939px tall and the visual floated in the middle of a 1046px hero. Wider copy column and the Supported Devices
      grid padding: both heroes measure 757px at 1920px. */
@layer base {
  @media (min-width: 1001px) {
    main:has(.int-visual) .hero .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) !important; padding: 32px 0 16px !important; }
  }
}

/* 21. Desktop mega menu columns pack from the left (Micky, 2026-10-27 meeting). The design stretched the two columns
      across the full 1540px row (1.15fr 1fr, 74px gap), so on a wide screen the second column sat 900px from the
      first with empty space between. Each column is now at most 480px wide and the row starts at the left edge.
      The block itself was still centred (max-width 1540px, auto margins), so on wide screens the columns started
      190-440px right of the "Platform" label (Micky, 2026-10-29). The block now sits at the left edge with its padding
      set to the label's x, so the first column starts under the label at every width. */
@media (min-width: 981px) {
  .site-nav .mega-inner { grid-template-columns: repeat(2, minmax(0, 480px)) !important; justify-content: start !important; margin-left: 0 !important; margin-right: auto !important; padding-left: 188px !important; }
}
@media (min-width: 981px) and (max-width: 1180px) {
  .site-nav .mega-inner { padding-left: 161px !important; }
}

/* 22. Home hero copy lines up with the section columns below it (Kirill, Marketing Weekly 2026-10-27: on his ultrawide
      the hero text sat at the left edge while every section below was centred at 1240px, so widening the window made
      the text "drift"). The copy now starts where .section-wrap starts; the warehouse image keeps bleeding to the
      right edge. Below 1364px the design's 62px padding still wins. Desktop only, like 9. */
@media (min-width: 981px) {
  #hero.hero-runway > .hero { padding-left: max(62px, calc((100% - 1240px) / 2)) !important; }
}

/* 23. Phone heroes share one spacing (Micky, 2026-10-29): every page set its own, so the gap under the menu ran
      28–92px and the gap from the buttons to the hero art 26–156px. Phones only; tablet and desktop keep the
      design's spacing. In layer `base` for the reason in 3. */
@media (max-width: 720px) {
  @layer base {
    #main > section:first-child { padding-top: var(--hero-y) !important; padding-bottom: var(--hero-y) !important; }
    #main > section:first-child :is(.hero, .copy, .hero-grid, .hx-grid, .pu-hero-grid, .ab-hero-grid, .hero-grid-v5) { padding-top: 0 !important; padding-bottom: 0 !important; }
    #main > section:first-child :is(.hero, .hero-grid, .hx-grid, .pu-hero-grid, .ab-hero-grid, .hero-grid-v5) { row-gap: var(--hero-gap) !important; }
    /* eyeOT planner, ImageAssure: the hero grid is a plain block on phones, so the art needs the gap as a margin. */
    #main > section:first-child .hero-copy + :is(.pv-stage, .iah-pin) { margin-top: var(--hero-gap) !important; }
    #main > section:first-child .hero-copy { padding-bottom: 0 !important; margin-bottom: 0 !important; }
    #main > section:first-child .hero-head { padding-bottom: 0 !important; margin-bottom: var(--hero-gap) !important; }
    /* eyeOT ops, infrastructure, physical security: the hero grid is a plain block here, so the gap is a margin. */
    #main > section:first-child #datacenter.dc-wrap { width: min(100%, 100vw - 30px) !important; margin: var(--hero-gap) auto 0 !important; }
    #main > section:first-child .hero-grid-v5 > .hero-art { margin-top: 0 !important; }
  }
}
:root { --hero-y: 56px; --hero-gap: 48px; }

/* 24. eyeOT planner hero cards: two columns at 375px left each card ~160px wide, so the Gantt bars ran past the card
      edge and the PoE port grid overflowed (staging, Micky 2026-10-29). One card per row on phones. */
@media (max-width: 560px) {
  @layer base {
    .pl-hero .hx-overlap .hx-layer { grid-template-columns: minmax(0, 1fr) !important; }
    .pl-hero .hx-card { overflow: hidden !important; }
    .pl-hero .hx-gantt span { max-width: calc(100% - var(--s)) !important; white-space: normal !important; }
  }
}


/* 25. Who-we-serve heroes on phones look like the home hero (Jaci, 2026-10-29: "it dropped the screen shot entirely
      ... and the tabs are all lined up"). The design hides the platform screenshot below 980px and stacks the four
      tags down the left of a 194px photo. Phones now get the home layout: a taller photo, the tags scattered over
      it, and the platform screenshot with its red tag along the bottom. Tablet and desktop keep the design. */
@media (max-width: 720px) {
  @layer base {
    #ihWrap.hero-photo { position: relative !important; height: auto !important; aspect-ratio: 343 / 420 !important; overflow: hidden !important; }
    #ihWrap.hero-photo > img:first-child { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
    #ihWrap .ih-spot { position: absolute !important; right: auto !important; bottom: auto !important; transform: none !important; min-height: 0 !important; padding: 7px 11px !important; font-size: 12px !important; z-index: 6 !important; }
    #ihWrap .ih-spot.ih-cam { left: 58% !important; top: 7% !important; }
    #ihWrap .ih-spot.ih-infra { left: 5% !important; top: 18% !important; }
    #ihWrap .ih-spot.ih-access { left: 44% !important; top: 29% !important; }
    #ihWrap .ih-spot.ih-vms { left: 8% !important; top: 40% !important; }
    #ihWrap :is(.ih-plat, .ih-plat-tag) { display: block !important; opacity: 1 !important; }
    #ihWrap .ih-plat { left: 5% !important; right: 5% !important; top: 56% !important; bottom: 5% !important; width: auto !important; height: auto !important; transform: none !important; border-radius: 12px !important; }
    #ihWrap .ih-plat img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: left top !important; }
    #ihWrap .ih-plat-tag { left: 50% !important; top: 56% !important; transform: translate(-50%, -50%) !important; }
    /* The red lines the script draws from each tag to the screenshot (Jaci, 2026-10-29: "the red lines are missing"):
       the design hides them below 980px. Under the tags (6) and the screenshot (7), above the photo. */
    #ihWrap .ih-lines { display: block !important; z-index: 5 !important; }
  }
}

/* 26. Phone type scale (Micky, 2026-10-29: "instead of lowering the font size, you just squeezed spacing"). The design's
      clamp() floors keep section headings at 38px, subheads at 30–34px and the hero headline at 34px on a 375px
      screen, so headings outsized the hero and every block felt cramped. Phones get a smaller scale and the hero keeps
      roomier spacing (23). Tablet and desktop keep the design's sizes. In layer `base` for the reason in 3. */
@media (max-width: 720px) {
  @layer base {
    #main h1 { font-size: clamp(29px, 8vw, 34px) !important; }
    main section h2:not(.h2-sm):not(:is(.copy h2, .form-body h2, .review-copy h2, .faq-side h2, .next-inner h2, .mid-cta h2)),
    :is(.story, .capabilities, .connect, .cta-band, .mixed-head, .value-bridge, .research-head, .planner-copy) h2 { font-size: clamp(26px, 7.2vw, 30px) !important; }
    :is(.h3, .pain-copy h3, .routine-copy h3, .detail-copy h3, .flow-card h3, .extend-card.light h3, .task-copy h3, .stack-body h3) { font-size: clamp(22px, 6vw, 26px) !important; }
    #main > section:first-child :is(h1 ~ p, .lede, .hero-sub):not(.eyebrow) { font-size: 16px !important; line-height: 1.55 !important; }
  }
}

/* 27. eyeOT ops, infrastructure and physical security heroes on phones look like the home hero (Micky, 2026-10-29:
      the rules in 3 stacked the photo, a two-column grid of tags with an orphan, and a cropped screenshot on a pale
      panel). The photo fills a rounded card, the tags sit over it staggered left and right, and the platform screenshot
      with its red tag overlaps the bottom. The pages' script writes inline `inset: ... !important` on each tag, so the
      tags are static grid items (inset has no effect on them) rather than absolutely positioned. The wrap's fades to the
      page background are off (they washed out the top tag). The screenshot is ~4:1, so it crops from the top left
      rather than shrinking to an unreadable strip. Phones only. */
@media (max-width: 720px) {
  @layer base {
    #datacenter.dc-wrap { display: grid !important; grid-template-columns: 1fr 1fr !important; grid-template-rows: 14px repeat(7, auto) 236px !important; column-gap: 0 !important; row-gap: 0 !important; aspect-ratio: auto !important; height: auto !important; padding: 0 !important; overflow: hidden !important; border-radius: 18px !important; background: #0d1f35 !important; }
    #datacenter.dc-wrap::before, #datacenter.dc-wrap::after { display: none !important; }
    #datacenter .dc-photo { position: static !important; grid-column: 1 / -1 !important; grid-row: 1 / -1 !important; z-index: 0 !important; width: 100% !important; height: 100% !important; aspect-ratio: auto !important; margin: 0 !important; object-fit: cover !important; }
    html body #main #datacenter.dc-wrap button.hotspot { position: static !important; z-index: 2 !important; width: auto !important; max-width: calc(100% - 12px) !important; min-height: 0 !important; margin: 0 0 6px !important; padding: 6px 10px !important; font-size: 11.5px !important; white-space: nowrap !important; transform: none !important; }
    html body #main #datacenter.dc-wrap button.hotspot:nth-of-type(odd) { grid-column: 1 / span 2 !important; justify-self: start !important; margin-left: 12px !important; }
    html body #main #datacenter.dc-wrap button.hotspot:nth-of-type(even) { grid-column: 1 / span 2 !important; justify-self: end !important; margin-right: 12px !important; }
    html body #main #datacenter.dc-wrap button.hotspot:nth-of-type(1) { grid-row: 2 !important; }
    html body #main #datacenter.dc-wrap button.hotspot:nth-of-type(2) { grid-row: 3 !important; }
    html body #main #datacenter.dc-wrap button.hotspot:nth-of-type(3) { grid-row: 4 !important; }
    html body #main #datacenter.dc-wrap button.hotspot:nth-of-type(4) { grid-row: 5 !important; }
    html body #main #datacenter.dc-wrap button.hotspot:nth-of-type(5) { grid-row: 6 !important; }
    html body #main #datacenter.dc-wrap button.hotspot:nth-of-type(6) { grid-row: 7 !important; }
    html body #main #datacenter.dc-wrap button.hotspot:nth-of-type(7) { grid-row: 8 !important; }
    #datacenter .pso-platform { position: absolute !important; left: 4% !important; right: 4% !important; top: auto !important; bottom: 14px !important; width: auto !important; height: 196px !important; aspect-ratio: auto !important; margin: 0 !important; border-radius: 12px !important; overflow: hidden !important; z-index: 5 !important; }
    #datacenter .pso-platform img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: left top !important; }
    /* The red tag sits centred on the screenshot's top edge like the home hero (Jaci, 2026-10-29: "the one operational view
       should be centered on the screenshot"): the design's translate(-50%) and the old transform(-50%) stacked, so the tag
       sat a full tag-width left. 210px = the screenshot's 14px bottom gap + 196px height. */
    #datacenter .pso-platform-tag { display: block !important; position: absolute !important; left: 50% !important; top: auto !important; right: auto !important; bottom: 210px !important; translate: -50% 50% !important; transform: none !important; opacity: 1 !important; z-index: 6 !important; }
    /* The red lines from each tag to the screenshot (Jaci, 2026-10-29: "the red lines are missing"): the design hides them
       below 720px. Above the photo (0), under the tags (2) and the screenshot (5). The pages' scripts draw them. */
    #datacenter .pso-lines { display: block !important; z-index: 1 !important; }
  }
}

/* 27. Home hero under the flat 0.9 desktop zoom (PR 2594; Micky, 2026-10-29). The hero still stretched to the full
      viewport while the photo stayed capped at 790 CSS px (711 on screen), so a band of empty space opened above and
      below it; and the photo's -6vw overlap grew with the larger CSS viewport, so the red headline ran onto the slats.
      Desktop only: the hero wraps its content, the photo keeps the size it had on screen at zoom 1, and the overlap is
      the fixed 86px it was at 1440. Desktop is back to 1:1 (PR 2613), so the sizes are the on-screen ones: 790px cap,
      73vh, 610px floor. */
@media (min-width: 981px) {
  @layer base {
    #hero > .hero { min-height: 0 !important; }
    #hero > .hero > .visual { height: min(calc(var(--zvh, 1vh) * 73), 790px) !important; min-height: 610px !important; margin-left: -86px !important; }
  }
}

/* 28. Story card teaser: the Fox Den Productions logo is portrait (307x507), so the shared logo row height
      (clamp(26px, 8cqw, 72px)) left it 29px wide next to wide wordmarks (Micky, 2026-10-30: "this logo is too
      small"). The story pages already sized it inline at clamp(44px, 13cqw, 118px) on their rails; one rule now applies that everywhere the card renders. */
.cs-teaser-logo:has(> .cs-teaser-logo-img[alt="Fox Den Productions"]) { height: clamp(44px, 13cqw, 118px); }