/*
 * Homepage Clone Test — Base tokens + shared component styles.
 * Hand-coded (no Elementor, no GSAP). Scoped under .home-page.
 * Tokens sourced from the live site's Elementor global kit + Figma file
 * rXkYsvfFcXhSOHgb18Gys2 (get_variable_defs across nodes 519:8568, 4341:23657,
 * 550:585): Primary Dark 90% #1e2e4c / Primary 100% #233963, Neutral 9 #F4F6F9,
 * Primary 30% #BDC4D1, gradient teal→green #6AC2B6→#9DDC5D (same family already
 * established as --iat-gradient-primary-darker / --fst- / --eet- equivalents).
 */

.home-page {
  --home-primary: #233963;
  --home-primary-dark: #1e2e4c;
  --home-text: #1e2e4c;
  --home-text-muted: #6d7580;
  --home-white: #FFFFFF;
  --home-neutral-9: #F4F6F9;
  --home-neutral-7: #DADEE3;
  --home-border: #BDC4D1;
  --home-accent-green: #2ECC71;
  --home-gradient-teal-green: linear-gradient(90deg, #6AC2B6 0%, #8AD6C0 40%, #9DDC5D 100%);
  --home-gradient-teal-green-diag: linear-gradient(121deg, #6AC2B6 16%, #8AD6C0 40%, #9DDC5D 93%);
  --home-track: #EBEEF2;
  --home-shadow-elevation-4: 0px 10px 35px rgba(35, 57, 99, 0.12);
  --home-shadow-elevation-3: 0 0 10px rgba(0, 0, 0, 0.16);

  /* Per-industry-tab accent backgrounds (Figma 550:585) */
  --home-tab-01-bg: #F5E6F9;
  --home-tab-02-bg: #FFF5E6;
  --home-tab-03-bg: #E6F9FC;
  --home-tab-04-bg: #FFE6E6;

  font-family: 'Public Sans', sans-serif;
  color: var(--home-text);
  background: #fff;
  overflow-x: hidden;
}

.home-page *, .home-page *::before, .home-page *::after { box-sizing: border-box; }
.home-page img { max-width: 100%; height: auto; display: block; }
.home-page section { position: relative; padding: 96px 4vw; }
@media (max-width: 900px) { .home-page section { padding: 56px 20px; } }

.home-inner { max-width: 1280px; margin: 0 auto; position: relative; z-index: 1; }
.home-inner--wide { max-width: 1536px; }

.home-page h1, .home-page h2, .home-page h3, .home-page h4 {
  font-family: 'Public Sans', sans-serif;
  color: var(--home-text);
  margin: 0 0 20px;
  line-height: 1.25;
}

.home-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--home-primary);
}

/* Buttons — no border-radius, matching the site-wide convention established
   across every clone-test page this session (eagleeye/financial/internal-auditing). */
.home-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid var(--home-primary);
  transition: background 0.25s ease, color 0.25s ease;
  cursor: pointer;
}
.home-btn--solid { background: var(--home-primary); color: #fff; }
.home-btn--solid:hover { background: var(--home-primary-dark); }
.home-btn--outline { background: transparent; color: var(--home-primary); }
.home-btn--outline:hover { background: var(--home-primary); color: #fff; }

/* ---------- Scroll-linked horizontal pattern (ported vanilla mechanic,
   identical formula to initFstCtaPatternScroll / initIatCtaPatternScroll:
   progress=(vh-rect.top)/(vh+rect.height), translateX(-33*progress + '%'),
   disabled below 1024px). Reused for the hero AND the final CTA. ---------- */
/* overflow-x:CLIP, not hidden. `overflow-x: hidden` forces the computed
   overflow-y to `auto`, which silently turns every pattern host into a scroll
   container — so as soon as the Articles parallax pushed a card (or its blurred
   hover glow) past the section box, the browser produced an inner scrollbar and
   the layout jumped. `clip` does the same horizontal clipping for the 170%-wide
   pattern layer but leaves overflow-y `visible`, so no scroll container is ever
   created. Chrome 90+/Firefox 81+/Safari 16+, consistent with the cqw units
   this page already relies on. */
.home-pattern-host { position: relative; overflow-x: clip; }
.home-pattern-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 170%;
  height: 100%;
  background-repeat: repeat;
  background-size: contain;
  opacity: 0.35;
  pointer-events: none;
  will-change: transform;
  transform: translateX(0%);
  z-index: 0;
}

/* ---------- Shared "fill on scroll" primitives used by every infographic
   section (hero, video-section, 3 product mockups, industry tabs). ---------- */
.home-bar-track {
  width: 100%;
  height: 6px;
  border-radius: 51px;
  background: var(--home-track);
  overflow: hidden;
}
/* Width/height/stroke values below are driven per-frame from scroll position
   by home-test.js (which also sets transition:none inline) — deliberately no
   CSS transition here, or it would lag behind the scroll. */
.home-bar-fill {
  height: 100%;
  border-radius: 51px;
  width: 0%;
  background: var(--home-gradient-teal-green);
}

.home-donut { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.home-donut svg { transform: rotate(-90deg); }
.home-donut circle.home-donut-track { fill: none; stroke: var(--home-track); }

/* Semicircle gauge variant, used by the Swift "Data Quality Metrics" dials
   and the Gladius "Incident Response Time" dials. A full circle is drawn into
   a half-height box and clipped to its top half.

   This lives HERE, with the shared donut primitives, deliberately: it was
   previously defined inside the Gladius section block and was silently lost
   when that block was replaced wholesale, which left the Swift dials
   unclipped (an 8em SVG spilling out of a 4em box onto its own label) and
   un-rotated (so the arc never read as a gauge). Keeping it with the other
   shared primitives means a future per-section rewrite cannot delete it.

   align-items:flex-start overrides .home-donut's centring — with a 2x-tall
   SVG, centring would crop equally top AND bottom and show the ring's middle
   instead of its top half. Anchoring to the top trims only the bottom. */
.home-donut--half {
  overflow: hidden;
  position: relative;
  align-items: flex-start;
}
.home-donut.home-donut--half svg { transform: rotate(180deg); }
.home-donut circle.home-donut-fill {
  /* stroke is set per-instance via inline style, referencing that instance's
     own uniquely-id'd <linearGradient> def (SVG ids must be unique per page).
     stroke-dashoffset is driven per-frame from scroll position by
     home-test.js — no CSS transition, same reason as .home-bar-fill above. */
  fill: none;
  stroke-linecap: round;
}
.home-donut-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--home-text);
}

/* Card shadow/elevation utility, matches --iat-audit-card / .mcard family */
.home-card {
  background: #fff;
  box-shadow: var(--home-shadow-elevation-4);
}

/* Simplified CSS laptop-bezel used by all 3 product mockups (per Figma
   research: photorealistic laptop chrome in Figma is a flattened raster with
   no vector data — all 3 research agents recommended a simplified hand-coded
   frame instead of downloading/cloning the stock render). */
.home-laptop {
  position: relative;
  background: #232323;
  border-radius: 14px;
  padding: 14px 14px 34px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.25);
}
.home-laptop::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  width: 60px;
  height: 6px;
  background: #444;
  border-radius: 3px;
}
.home-laptop-screen {
  position: relative;
  background: #fff;
  overflow: hidden;
  aspect-ratio: 900/522;
}
.home-laptop-webcam {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #111;
  z-index: 2;
}

/* Slide-in + scale-up (product mockups). opacity/transform are driven
   per-frame from scroll position by home-test.js — no CSS transition, and
   the starting state is applied by JS on registration rather than declared
   here, so that if the script never runs the mockups stay fully visible
   instead of being stuck invisible. */
.home-reveal { will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) {
  .home-reveal { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   Section 0 — Hero (REBUILD — replaces the previous "Section 0 — Hero"
   block earlier in this file, which must be deleted; see integration notes).

   Three layers only, per Figma 519:8568 and the live page:
     white section  ->  bottom-anchored oversized wave <img>  ->  content.
   No cover background, no .home-pattern-layer, no .home-card chrome.

   The tablet is hand-coded (bezel + camera + screen) and the 5 dashboard
   panels are hand-coded infographics traced from realistic_dashboard_tab.png
   / Figma 4329:23507. Everything inside .home-hero-screen is sized in `em`
   off a single font-size on .home-hero-screen, so the whole dashboard scales
   as one unit from the breakpoint steps at the bottom of this block.

   MOTION: the hero is above the fold, so home-test.js's element-position
   driver clamps to 1 on first paint and cannot animate anything here. The
   tilt, the wave parallax and the chart fills are all driven from DOCUMENT
   scroll by initHomeHeroScroll() via data-hero-* attributes — which is also
   why no CSS transition may be declared on any of them.
   ============================================================ */

.home-page {
  /* The site's real 7-stop headline ramp (theme .clipped-text / --GREDIENT-2).
     Kept hero-scoped as its own token because --home-gradient-teal-green is a
     3-stop approximation that other sections depend on. */
  --home-hero-title-gradient: linear-gradient(90deg, #6ac2b7 0%, #8ad6c0 50%, #8adbbb 75%, #86dcaf 87.5%, #84dda5 93.75%, #95e091 96.88%, #9fdd5f 100%);
  /* Live CTA gradient (widget background + border-image), 4 stops. */
  --home-hero-cta-gradient: linear-gradient(90deg, #47B0A3 0%, #4FB799 30.43%, #4CC86F 77.4%, #84BA4C 100%);
  --home-hero-cta-glow: 0 0 25px 2px rgba(155, 193, 150, 0.5);
  --home-hero-screen-navy: #1E2E4C;
  --home-hero-screen-mint: #7FD9C0;
  --home-hero-screen-line: #E4E7EC;
  --home-hero-screen-slate: #4C586E;
}

/* ---------- Section shell ---------- */
.home-page section.home-hero {
  min-height: 120vh;            /* live --min-height:120vh */
  padding: 200px 4vw 0;         /* live --padding-top:200px */
  display: flex;
  align-items: flex-start;
  overflow: hidden;             /* live --overflow:hidden */
  /* shorthand deliberately, so it also clears the old cover background-image /
     background-size / background-position from the previous build */
  background: #fff;             /* live --e-global-color-64f7c2b = #fff */
}

/* ---------- Wave: oversized <img> hanging off the hero's bottom edge.
   Geometry copied from live (.elementor-element-483a710): left:-33vw;
   bottom:-341px; width:166vw; max-width:150%; z-index:0. translateX is
   driven per-frame from scroll by initHomeHeroScroll() (Elementor
   motion_fx translateX speed 6) — never width/left, so it never reflows. */
/* NB the `.home-page` prefix is load-bearing: the shared `.home-page img`
   rule is (0,0,1,1) and would otherwise win the max-width and clamp the wave
   back to 100%. */
.home-page .home-hero-wave {
  position: absolute;
  left: -33vw;
  bottom: -341px;
  width: 166vw;
  max-width: 150%;
  height: auto;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  will-change: transform;
  transition: none;
}

.home-hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 0;
}

/* ---------- Copy column (live: 50% width, 20px gap) ---------- */
.home-hero-copy {
  flex: 1 1 48%;
  max-width: 48%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 0 20px 0 0;
}

/* `.home-page` prefix again required: the shared `.home-page h1` rule
   (0,0,1,1) sets margin/line-height/color and would beat a bare
   `.home-hero-title`. */
.home-page .home-hero-title {
  margin: 0;
  /* Live is 3.3vw (47.5px @1440), capped at 58 here because this page's row is
     bounded by .home-inner--wide (1536) where live's is full-bleed.
     Stepped down to 2.95vw/45px for the content doc's replacement headline:
     "One Platform for Compliance, Risk, Cybersecurity & Data Governance" is
     nine words to the old headline's six, and at the old ramp it set on FOUR
     lines and pushed the CTA below the fold on a 674px-tall viewport.
     45px is the measured threshold — at 46px the copy column (651px content
     box) can no longer pull "Compliance," onto line 1 and it breaks to four
     again. The cap matters as much as the vw factor: .home-inner--wide stops
     growing at 1536, so above ~1525px the column is fixed while an uncapped
     ramp would keep growing into the same four-line break. */
  font-size: clamp(28px, 2.95vw, 45px);
  font-weight: 700;
  line-height: 1.2em;
  color: var(--home-primary);   /* live --e-global-color-primary #233963 */
  /* Was 88%, which existed only to force the OLD headline's authored
     three-line break ("Governance, Risk &" / "Compliance — Unified" / "and
     Automated"). The new headline has no authored break to preserve and needs
     the full measure to stay at three lines. */
  max-width: 100%;
}
.home-hero-title .clipped-text {
  background: var(--home-hero-title-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.home-hero-subtext {
  margin: 0;
  font-size: 18px;
  line-height: 23.878px;
  color: var(--home-primary);
  max-width: 587px;
}
.home-hero-subtext strong { font-weight: 700; color: inherit; }

/* ---------- CTA. Deliberately NOT .home-btn/.home-btn--solid: live is a
   gradient-filled, gradient-bordered, green-glowing 2px-radius button.
   background-origin:border-box lets the gradient run under the transparent
   2px border, which reproduces live's border-image treatment while still
   honouring border-radius (border-image would discard it). ---------- */
.home-hero-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  text-transform: capitalize;
  text-decoration: none;
  color: #fff;
  border: 2px solid transparent;
  border-radius: 2px;
  background-image: var(--home-hero-cta-gradient);
  background-origin: border-box;
  background-clip: border-box;
  box-shadow: var(--home-hero-cta-glow);
  transition: filter 0.25s ease, box-shadow 0.25s ease;
}
.home-hero-cta:hover,
.home-hero-cta:focus-visible {
  color: #fff;
  filter: brightness(1.06);
  box-shadow: 0 0 30px 4px rgba(155, 193, 150, 0.62);
}

/* ============================================================
   Tablet mockup
   ============================================================ */
.home-hero-device-stage {
  flex: 1 1 52%;
  max-width: 686px;             /* Figma frame 4329:23507 is 686x561 */
  min-height: 400px;            /* live --min-height:400px */
  /* live's 2vw side padding is dropped: this row is bounded by
     .home-inner--wide, so keeping it would shrink the tablet well under the
     613px Figma device body. Sized directly instead. */
  padding: 0 0 1vw;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;          /* live .scroll-wrapper{perspective:1000px} */
  position: relative;
  z-index: 1;
}

.home-hero-device {
  width: 100%;
  max-width: 640px;
  position: relative;
  /* Rest state = live's --e-transform-rotateX:40deg. initHomeHeroScroll()
     drives this to 0deg over the first 0.35 * viewport height of document
     scroll, and back on scroll-up. No transition — it tracks scroll. */
  transform-origin: center center;
  transform: rotateX(40deg);
  transition: none;
  will-change: transform;
  /* dark charcoal bezel with the glossy left-to-right sweep of the source */
  background: linear-gradient(103deg, #55555d 0%, #3b3b42 13%, #1d1d22 33%, #0c0c10 57%, #131317 80%, #26262c 100%);
  border-radius: 18px;
  padding: 4.1% 2.5% 3.5%;      /* bezel: 26/16/22px on a 640px body */
  box-shadow: var(--home-shadow-elevation-4);
}
@media (prefers-reduced-motion: reduce) {
  .home-hero-device { transform: none !important; }
}

.home-hero-device-cam {
  position: absolute;
  top: 2.4%;                    /* centred in the ~26px top bezel */
  left: 50%;
  transform: translateX(-50%);
  width: 0.85%;                 /* ~5px at the 640px design width, scales with it */
  aspect-ratio: 1;
  border-radius: 50%;
  background: #4b4b52;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.home-hero-screen {
  position: relative;
  background: #fff;
  border-radius: 3px;
  aspect-ratio: 526 / 328;      /* measured off the source render */
  overflow: hidden;             /* crops panel 5 at the bottom bezel */
  /* single scale knob for the whole dashboard — everything below is in em */
  font-size: 12px;
  line-height: 1.3;
  color: var(--home-hero-screen-navy);
  font-weight: 400;
}

.home-hero-dash {
  height: 100%;
  display: grid;
  grid-template-columns: 1.52fr 1fr;
  column-gap: 1.6em;
  padding: 2em 1.9em 0 1.55em;
}
.home-hero-dash-col {
  display: flex;
  flex-direction: column;
  gap: 2.3em;
  min-width: 0;
  min-height: 0;
}
.home-hero-dash-col--right { position: relative; }

.home-hero-panel { min-width: 0; }
.home-hero-panel-title {
  display: block;
  font-size: 1em;
  font-weight: 700;
  line-height: 1.3;
  color: var(--home-hero-screen-navy);
  margin-bottom: 0.7em;
}
.home-hero-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em;
  margin-bottom: 0.7em;
}
.home-hero-panel-head .home-hero-panel-title { margin-bottom: 0; }

/* ---------- Panel 1 — Executive Dashboard: 2x2 stat tiles ---------- */
.home-hero-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75em 0.55em;
}
.home-hero-tile {
  border: 1px solid #E2E5EA;
  border-radius: 0.35em;
  background: #fff;
  overflow: hidden;
}
.home-hero-tile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4em;
  padding: 0.42em 0.55em;
  background: #F4F5F7;
  border-bottom: 1px solid #EAEDF1;   /* the hairline divider */
}
.home-hero-tile-label {
  font-size: 0.82em;
  font-weight: 700;
  color: var(--home-hero-screen-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-hero-badge {
  flex: 0 0 auto;
  font-size: 0.76em;
  font-weight: 700;
  color: #fff;
  background: var(--home-gradient-teal-green);
  border-radius: 2px;
  padding: 0.12em 0.5em;
  line-height: 1.2;
}
.home-hero-tile-sub {
  /* padding intentionally larger than the top row's 0.42em: it resolves
     against this element's own 0.78em font-size, so 0.54/0.7em lands on the
     same absolute value and both rows keep equal height */
  padding: 0.54em 0.7em;
  font-size: 0.78em;
  color: var(--home-hero-screen-slate);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Panel 2 — Risk Mitigation Overview: line chart ---------- */
/* The swatch is deliberately sized on the wrapper (which stays at the screen
   base font-size) rather than on the small-text element, so its em values
   resolve against the dashboard scale and not against the legend copy. */
.home-hero-legend {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  white-space: nowrap;
}
.home-hero-legend-swatch {
  display: block;
  flex: 0 0 auto;
  width: 3.9em;
  height: 1.75em;
  border-radius: 1px;
  background: var(--home-gradient-teal-green);
}
.home-hero-legend-text {
  font-size: 0.66em;
  color: var(--home-hero-screen-slate);
}

.home-hero-linechart { display: block; width: 100%; height: auto; }
.home-hero-grid line { stroke: var(--home-hero-screen-line); stroke-width: 1; }
.home-hero-axis text {
  font-size: 7px;
  fill: #6B7686;
  font-weight: 400;
}
.home-hero-linepath {
  fill: none;
  stroke: url(#homeHeroLineGrad);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: none;   /* draw-in is scroll-linked, a transition would lag it */
}
.home-hero-linedot { fill: var(--home-hero-screen-navy); }

/* ---------- Panel 3 — Vulnerabilities Reduced: alternating bars ---------- */
.home-hero-vbars {
  display: flex;
  align-items: flex-end;
  gap: 0.34em;
  height: 7em;
  padding: 0 0.3em;
  background: #FAFBFD;
  border-bottom: 1px solid #E3E7ED;
}
.home-hero-vbar {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 1px 1px 0 0;
  transition: none;   /* height is scroll-linked */
}
.home-hero-vbar--navy { background: var(--home-hero-screen-navy); }
.home-hero-vbar--mint { background: var(--home-hero-screen-mint); }

/* ---------- Panel 4 — Unified GRC Suite: flow + feedback loop ---------- */
.home-hero-flow { display: block; width: 100%; height: auto; }
.home-hero-flow-box rect {
  fill: #F4F6F9;
  stroke: #C3CBD8;
  stroke-width: 1;
}
.home-hero-flow-link path {
  fill: none;
  stroke: #AFB6C2;
  stroke-width: 1;
  transition: none;   /* draw-in is scroll-linked */
}
.home-hero-flow-text text {
  font-size: 8px;
  font-weight: 500;
  fill: var(--home-hero-screen-navy);
}

/* ---------- Panel 5 — Reporting Format Comparison: twin semicircle gauges.
   Anchored to the bottom of the right column and pulled 1.6em past it so
   both gauges are cropped by the tablet's bottom bezel, exactly as they are
   in Figma 4329:23507 and on live. ---------- */
.home-hero-panel--gauges {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1.6em;
}
.home-hero-gauges {
  display: flex;
  align-items: flex-end;
  gap: 0.6em;
}
.home-hero-gauge svg { display: block; width: 100%; height: auto; overflow: visible; }
.home-hero-gauge--a { flex: 0 0 45%; min-width: 0; }
.home-hero-gauge--b {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35em;
}
.home-hero-gauge--b svg { width: 62%; }
.home-hero-gauge-title {
  font-size: 0.82em;
  font-weight: 700;
  color: var(--home-hero-screen-navy);
  white-space: nowrap;
}
.home-hero-gauge-halo {
  fill: none;
  stroke: #E9EDF2;
  stroke-width: 15;
  stroke-linecap: butt;
}
.home-hero-gauge--b .home-hero-gauge-halo { stroke-width: 9.5; }
.home-hero-gauge-fill {
  fill: none;
  stroke-linecap: butt;
  transition: none;   /* sweep is scroll-linked */
}
.home-hero-gauge-curve,
.home-hero-gauge-curve textPath {
  font-size: 9.5px;
  font-weight: 700;
  fill: var(--home-hero-screen-navy);
  dominant-baseline: middle;
}
.home-hero-gauge-value {
  font-size: 15px;
  font-weight: 700;
  fill: var(--home-hero-screen-navy);
}
.home-hero-gauge-value--sm { font-size: 8px; fill: #2FB981; }

/* ============================================================
   Hero breakpoints. The old build's `.home-page section.home-hero` and
   `.home-hero-inner` media rules earlier in this file are superseded here;
   every property they set is re-declared so the cascade lands correctly even
   before that block is deleted.
   ============================================================ */
@media (max-width: 1200px) {
  .home-hero-screen { font-size: 11px; }
}

@media (max-width: 1024px) {
  .home-page section.home-hero {
    min-height: 130vh;          /* live tablet --min-height:130vh */
    padding: 150px 4vw 0;
    align-items: flex-start;
  }
  .home-hero-inner {
    flex-direction: column;
    align-items: center;
    gap: 44px;
    padding: 0;
  }
  .home-hero-copy {
    flex: 1 1 auto;
    max-width: 100%;
    align-items: center;
    text-align: center;
    padding: 0;
  }
  .home-page .home-hero-title { max-width: 100%; font-size: clamp(30px, 5.4vw, 52px); }
  .home-hero-cta { align-self: center; }   /* live centres it on tablet/mobile */
  .home-hero-device-stage {
    flex: 1 1 auto;
    max-width: 100%;
    width: 100%;
    min-height: 0;
    padding: 0;
  }
  .home-hero-device { max-width: 560px; }
  .home-hero-screen { font-size: 10.5px; }
}

@media (max-width: 767px) {
  .home-page section.home-hero {
    min-height: 100vh;          /* live mobile --min-height:100vh */
    padding: 110px 20px 0;
  }
  .home-hero-inner { gap: 32px; }
  .home-page .home-hero-title { font-size: clamp(26px, 7.4vw, 40px); }
  .home-hero-subtext { font-size: 16px; line-height: 1.45; }
  .home-hero-screen { font-size: 8.5px; }
  /* live keeps bottom:-341px on mobile, which parks the wave entirely below a
     100vh hero; raised here so it stays visible at phone widths */
  .home-page .home-hero-wave { bottom: -40px; }
}

@media (max-width: 640px) {
  /* re-assert over the previous build's `.home-page section.home-hero{padding:0 20px}` */
  .home-page section.home-hero { padding: 110px 20px 0; }
  .home-hero-screen { font-size: 7.4px; }
}

@media (max-width: 420px) {
  .home-hero-screen { font-size: 6.4px; }
  .home-hero-device { border-radius: 12px; }
}

/* The device's width is fluid between breakpoints (it is a % of the hero's
   right column), while the SVG panels scale continuously off their viewBox.
   Stepped px font-sizes therefore drift out of sync with the SVG text at
   intermediate widths. Tying the dashboard's one font-size knob to the
   device's own inline size keeps every panel — HTML and SVG — locked to the
   same scale at any width. The px steps above remain as the fallback.
   MUST stay last in this block: it beats them purely on source order. */
@supports (container-type: inline-size) {
  .home-hero-device { container-type: inline-size; }
  /* 1.875cqw == 12px at the 640px design width */
  .home-hero-screen { font-size: 1.875cqw; }
}

/* ============================================================
   Section 1 — 4-card feature row ("Why choose us?").
   REPLACES the old Section 1 block (home-test.css lines 278-383) — delete that
   block, every class here is newly prefixed .home-cards-* so nothing in it is
   still referenced.

   Sources: Figma frame 519:8590 / card group 537:8737, and live `.sec-2`
   (.mcard / .ccard / .ccard.bgstyle1 / .textAnimate).
   Card = flat #F4F6F9 panel 480px tall (radius 0, NO shadow), photo inset 33px
   from the top, Neutral-9 scrim solid at the top fading out ~73% down, navy
   #1e2e4c title pinned to the TOP. Hover = photo vanishes / panel goes solid
   white, 16px gradient rule fades in top+left over .5s, panel shifts
   translate(-10px,-10px) with a 4px gradient rule bottom+right, description
   fades in over .8s. Text colour is constant in both states.
   ============================================================ */

/* The exact 7-stop live gradient (the 3-stop --home-gradient-teal-green token
   is a simplification and is deliberately NOT used here). */
.home-cards {
  --home-cards-rule: linear-gradient(90deg,
    #6AC2B7 0%, #8AD6C0 50%, #8ADBBB 75%, #86DCAF 87.5%,
    #84DDA5 93.75%, #95E091 96.88%, #9FDD5F 100%);
}

/* live .sec-2: background_color #F4F4F400 (transparent) + padding 0, so the
   row can ride up over the hero above it. */
.home-page section.home-cards {
  padding: 0 0 96px;
  background: transparent;
}

/* live grid wrapper: width 86% fluid + margin-top -10% (deliberate overlap).
   88.9% == Figma's 1280 inside a 1440 frame; capped at the existing
   .home-inner--wide ceiling so it never runs away on ultra-wide screens. */
.home-cards-wrap {
  position: relative;
  width: min(88.9%, 1536px);
  margin: clamp(-128px, -10%, -48px) auto 0;
}

/* Figma 519:8580 — 16px Public Sans SemiBold uppercase #1e2e4c, lh 23.878px.
   Own class, not .home-eyebrow (that token is 14px / --home-primary). */
.home-page .home-cards-eyebrow {
  margin: 0 0 16px;
  font-family: 'Public Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 23.878px;
  text-transform: uppercase;
  color: var(--home-primary-dark);
}

/* live grid_gaps: 0 — the 16px transparent border on each card IS the gutter.
   The -16px pull puts the first card's face back on the page margin so it
   lines up with the eyebrow. */
.home-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-left: -16px;
  will-change: transform;
}

/* ---- card shell + the 16px top/left gradient rule ---- */
.home-cards-item {
  position: relative;
  border-top: 16px solid transparent;
  border-left: 16px solid transparent;
  will-change: transform, opacity;
}
/* live .mcard::before — opacity-faded (border-image is NOT animatable, so the
   old `transition: border-image` was a no-op). --home-cards-rule-p is written
   per-card by home-test.js so the rule also wipes in left-to-right on scroll. */
.home-cards-item::before {
  content: '';
  position: absolute;
  top: -16px;
  left: -16px;
  right: 0;
  bottom: 0;
  border-top: 16px solid;
  border-left: 16px solid;
  border-image: var(--home-cards-rule) 1;
  clip-path: inset(0 calc(100% - var(--home-cards-rule-p, 1) * 100%) 0 0);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
  z-index: 4;
}
.home-cards-item:hover::before { opacity: 1; }

/* ---- the panel ---- */
.home-cards-inner {
  position: relative;
  height: 100%;
  min-height: 480px;
  overflow: hidden;
  background-color: var(--home-neutral-9);
  transition: transform .5s ease, background-color .5s ease;
}
.home-cards-item:hover .home-cards-inner {
  transform: translate(-10px, -10px);
  background-color: var(--home-white);
}
/* live .ccard:hover 4px bottom/right rule — same opacity-fade treatment. */
.home-cards-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-right: 4px solid;
  border-bottom: 4px solid;
  border-image: var(--home-cards-rule) 1;
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
  z-index: 4;
}
.home-cards-item:hover .home-cards-inner::after { opacity: 1; }

/* ---- photo layer: inset 33px from the top (Figma y=33, h=447), with
   headroom below for the scroll parallax. Fades OUT on hover so the panel
   really does go white. ---- */
.home-cards-media {
  position: absolute;
  left: 0;
  right: 0;
  top: 33px;
  bottom: -60px;
  z-index: 1;
  opacity: 1;
  transition: opacity .5s ease;
  will-change: transform;
}
.home-cards-item:hover .home-cards-media { opacity: 0; }

/* live .ccard.bgstyle1 — sits UNDER the photo on cards 2/3/4. */
.home-cards-tint {
  position: absolute;
  inset: 0;
  background: var(--home-cards-rule);
}

.home-cards-photo {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
/* Figma's ~20% white wash over the photo (live: #FFFFFF overlay @45deg/25%). */
.home-cards-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0.56deg, rgba(255, 255, 255, 0) 0.25%, rgba(255, 255, 255, 0.2) 95.7%);
}

/* ---- Neutral-9 scrim: SOLID at the top, transparent going down (live
   Rectangle 133). Stops are the live 0deg list flipped to 180deg and scaled by
   --home-cards-scrim-end, which home-test.js drives 100 -> 73 on scroll so the
   photo develops out of the panel. 73 == Figma's y=352 end measured from the
   card's top edge (the audit's "66%" is the same band measured from the
   photo's 33px inset). ---- */
.home-cards-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg,
    #F4F6F9 0%,
    rgba(244, 246, 249, 0.90) calc(var(--home-cards-scrim-end, 73) * 0.2356%),
    rgba(244, 246, 249, 0.88) calc(var(--home-cards-scrim-end, 73) * 0.3654%),
    rgba(244, 246, 249, 0.80) calc(var(--home-cards-scrim-end, 73) * 0.4567%),
    rgba(244, 246, 249, 0.00) calc(var(--home-cards-scrim-end, 73) * 1%));
}

/* ---- copy: top-anchored, live padding 24px / 22px ---- */
.home-cards-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 24px 22px;
}

.home-page .home-cards-title {
  margin: 0;
  font-family: 'Public Sans', sans-serif;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.2em;
  letter-spacing: -0.5px;
  text-transform: capitalize;
  color: var(--home-primary-dark);
}

/* live .textAnimate: pure opacity fade over a slot that is ALWAYS in layout —
   no accordion, no colour change, so the title never moves. */
.home-page .home-cards-desc {
  margin: 16px 0 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--home-primary-dark);
  visibility: hidden;
  opacity: 0;
  transition: opacity .8s ease-in-out, visibility 0s linear .8s;
}
.home-page .home-cards-item:hover .home-cards-desc {
  visibility: visible;
  opacity: 1;
  transition: opacity .8s ease-in-out, visibility 0s linear 0s;
}

/* ---- responsive: live tablet 2fr, mobile 1 col / 16px row gap / 24px title /
   16px description / short scrim ---- */
@media (max-width: 1100px) {
  .home-cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .home-cards-grid { grid-template-columns: 1fr; row-gap: 16px; }
  .home-cards-inner { min-height: 320px; }
  .home-page .home-cards-title { font-size: 24px; }
  .home-page .home-cards-desc { font-size: 16px; }
  /* declared on the veil itself so it beats the value home-test.js writes on
     the card element (inherited custom properties lose to a local declaration). */
  .home-cards-veil { --home-cards-scrim-end: 50; }
}

@media (prefers-reduced-motion: reduce) {
  .home-cards-grid,
  .home-cards-media { transform: none !important; }
  .home-cards-item { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   Section 2 (REBUILD) — "Seamless Scaling…" video bg + ONE unified
   dashboard card. Supersedes the earlier "Section 2" block in this file
   (.home-video-overlay / .home-video-panels / .home-panel* / .home-scatter* /
   .home-activity* / .home-ai-pill / .home-trend-up / .home-overall-risk-label),
   which is now dead and should be deleted — see integration notes.

   Sources: Figma 529:8659 (card placement, radius 24, symmetric double
   shadow, card top at 561 of an 841 frame) and 4341:23657 (panel internals,
   two frames abutting at x=511 with zero gutter, 513/490).
   ============================================================ */

.home-page section.home-video-section {
  /* Tall enough that the dashboard card can travel all the way up and be seen
     in FULL, with room above it for the headline to be read first. The card is
     content-sized (~660px), so 100vh alone is not guaranteed to clear it on
     shorter viewports — hence the floor. */
  min-height: max(100vh, 880px);
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* live: section flex-end, inner band 70vh */
  overflow: hidden;            /* this is what clips the dashboard card */
}

.home-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* NO scrim/overlay: neither the live section (no elementor-background-overlay,
   no background_overlay_* in its compiled CSS) nor the Figma frame has one. */

.home-video-content {
  position: relative;
  z-index: 2;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  /* Was space-between, which was indistinguishable from flex-start while this
     box had a single child. It now holds the heading AND the supporting
     paragraph, and space-between would fling them to opposite ends of a 70vh
     box. */
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  padding: 0 4vw;
  /* The section is `justify-content: flex-end`, so this block hangs off the
     section's bottom edge — which is exactly where the dashboard card rises
     into. With the heading alone that was fine; the supporting paragraph the
     content doc adds sat right in the card's path and was covered before it
     could be read. Lifting the block keeps the brief intact ("the user needs
     to see the full text on scroll, then it may be covered as the dashboard
     comes up") instead of hiding the new copy from the start. */
  margin-bottom: clamp(100px, 14vh, 170px);
}

/* Dual type scale, verbatim from BOTH sources: line 1 48px/54px, line 2 96px,
   Public Sans ExtraBold (800), pure white, capitalize. Mobile floors taken
   from the live page's own responsive values (20px / 52px). */
.home-video-heading {
  margin: 0;
  color: #fff;
  font-weight: 800;
  /* Was `capitalize`, which suited the old all-title-case headline. The doc's
     replacement is "Build a More Resilient, Audit-Ready Organization" — the
     lowercase "a" is intentional and capitalize would force it to "A". */
  text-transform: none;
}
.home-video-heading .home-video-heading-lead {
  display: block;
  color: #fff;                                   /* beats .home-video-heading span */
  font-size: clamp(20px, 3.4vw, 48px);
  line-height: 1.125;                            /* 54/48 */
  font-weight: 800;
}
.home-video-heading .home-video-heading-hero {
  display: block;
  color: #fff;
  /* Ramp reduced from the live 52/6.9vw/96px. That scale was set for the word
     "Always." — the doc's replacement payoff is "Audit-Ready Organization",
     24 characters, which overran the container at 96px and would not have
     fitted on one line at any desktop width. */
  font-size: clamp(30px, 4.6vw, 68px);
  line-height: 1.02;
  font-weight: 800;
}

/* Supporting paragraph beneath the headline (new — the doc pairs one with the
   revised headline). Measure-capped so it stays a readable 2-3 lines over the
   video rather than running the full 1280px; the rising dashboard card claims
   the space below it. */
.home-video-support {
  margin: 22px 0 0;
  max-width: 780px;
  color: rgba(255, 255, 255, 0.92);
  font-family: 'Public Sans', sans-serif;
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.6;
  font-weight: 400;
  /* The video behind this is bright in places; the shadow is what keeps the
     copy legible without dropping a scrim over the whole section. */
  text-shadow: 0 1px 12px rgba(20, 32, 52, 0.45);
}

@media (max-width: 900px) {
  .home-video-support { margin-top: 16px; max-width: 100%; }
}

/* ---------- The single dashboard card ----------
   Top pinned at 66.7% of the section (Figma 561/841) so roughly a third of it
   shows and the rest is clipped by the section's overflow:hidden. transform is
   reserved for the scroll-linked rise written by updateHomeVideoSection(). */
.home-video-dashboard {
  /* top:100% parks the card entirely below the clip line; updateHomeVideoSection()
     translates it upward continuously with scroll until the WHOLE card is in
     view (previously it was pinned at 66.7% and stopped at half progress, so
     only its top third was ever visible). It rises OVER the headline, which is
     intended — the headline is readable first, then gets covered. */
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 2;
  width: min(90%, 1281px);
  display: flex;
  align-items: stretch;
  background: #fff;
  border-radius: 24px;
  box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.15), 10px 10px 10px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  will-change: transform;
}

.home-vdash-panel {
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
/* Unequal widths, zero gutter — one continuous white surface. */
.home-vdash-panel--left  { flex: 0 0 51.25%; max-width: 51.25%; }
.home-vdash-panel--right { flex: 0 0 48.75%; max-width: 48.75%; }

.home-vdash-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--home-text);
}
.home-vdash-title--register { color: #0B1E46; }

.home-vdash-subhead {
  font-size: 16px;
  font-weight: 600;
  color: var(--home-text);
}
.home-vdash-subhead--summary { font-size: 18px; }

/* ---------- Bordered 4-bar sub-card (Figma: 1px #DADEE3, radius 8, pad 16) ---------- */
.home-vdash-bars {
  border: 1px solid var(--home-neutral-7);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.home-vdash-bar-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 6px 8px;
}
.home-vdash-bar-label { font-size: 16px; font-weight: 400; color: var(--home-text); }
.home-vdash-bar-pct   { font-size: 13px; font-weight: 600; color: #1e2e4c; }
.home-vdash-bar-row .home-bar-track { grid-column: 1 / -1; }

/* Figma bar fills are near-vertical (167–177deg), not the 90deg site default. */
.home-video-dashboard .home-bar-fill {
  background: linear-gradient(175deg, #6AC2B6 0%, #8AD6C0 40%, #9DDC5D 100%);
}

/* ---------- Risk Score dial (~150px, two-tone, curved ring label) ---------- */
.home-vdash-riskscore {
  display: flex;
  align-items: center;
  gap: 18px;
}
.home-vdash-dial {
  position: relative;
  flex: 0 0 150px;
  width: 150px;
  height: 150px;
}
.home-vdash-dial .home-donut { width: 100%; height: 100%; }
.home-vdash-dial .home-donut svg { width: 100%; height: 100%; }
.home-vdash-dial-value { font-size: 24px; font-weight: 600; color: var(--home-text); }
/* Separate un-rotated overlay: .home-donut svg carries transform:rotate(-90deg)
   for the arcs, which would drag the curved label round with it. */
.home-vdash-ringtext {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.home-vdash-ringtext text {
  font-family: 'Public Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.6px;
  fill: var(--home-text-muted);
}

.home-vdash-riskmeta {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 352px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.home-vdash-trend { display: flex; align-items: center; gap: 6px; }
.home-vdash-trend-value { font-size: 16px; font-weight: 600; color: var(--home-text); }
.home-vdash-trend-icon { width: 10px; height: 13px; flex: 0 0 10px; fill: #4CC86F; }
.home-vdash-trend-label { font-size: 13px; color: var(--home-text-muted); }

/* WHITE pill with gradient-clipped text — the design's version, not a solid
   gradient chip (Figma: 111x24, radius 60, 1px #E3FFCC, elevation-4). */
.home-vdash-ai-pill {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 111px;
  height: 24px;
  margin: 6px 0;
  padding: 0 9px;
  background: #fff;
  border: 1px solid #E3FFCC;
  border-radius: 60px;
  box-shadow: var(--home-shadow-elevation-4);
}
.home-vdash-ai-pill svg { width: 16px; height: 16px; flex: 0 0 16px; fill: #4CC86F; }
.home-vdash-ai-pill span {
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  background: linear-gradient(90deg, #47B0A3 0%, #4FB799 33%, #4CC86F 66%, #84BA4C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Confidence is NOT a peer of the four audit bars — it lives here. */
.home-vdash-confidence { max-width: 273px; }
.home-vdash-confidence-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}
.home-vdash-confidence-label { font-size: 13px; color: var(--home-text-muted); }
.home-vdash-confidence-value {
  font-size: 13px;
  font-weight: 600;
  background: var(--home-gradient-teal-green);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.home-vdash-confidence .home-bar-track { height: 4px; }

/* ---------- Two-piece gradient-chip stat cards (all six) ---------- */
.home-vdash-statgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
}
.home-vdash-stat { display: flex; flex-direction: column; min-width: 0; }
.home-vdash-stat-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 16px;
  background: #F7FFF7;
  border-radius: 6px;
  box-shadow: 0 1.25px 4px rgba(35, 57, 99, 0.25);
}
.home-vdash-stat-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--home-text);
  white-space: nowrap;
}
.home-vdash-stat-chip {
  flex: 0 0 auto;
  min-width: 48px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--home-gradient-teal-green-diag);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.home-vdash-stat-bottom {
  background: #fff;
  border-radius: 6px;
  padding: 16px 16px 6px;
  font-size: 16px;
  font-weight: 400;
  color: var(--home-text);
}
.home-vdash-ministats {
  flex: 0 0 195px;
  max-width: 195px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

/* ---------- Dynamic Risk Register: quadrant plot + Risk Summary ---------- */
.home-vdash-register {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.home-vdash-scatter-wrap {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 22px minmax(0, 223px);
  grid-template-rows: auto auto;
  gap: 6px;
}
/* Rotated -90deg and OUTSIDE the plot, in its own 22px gutter. */
.home-vdash-scatter-ylabel {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 16px;
  color: var(--home-text-muted);
  white-space: nowrap;
}
.home-vdash-scatter-xlabel {
  grid-column: 2;
  grid-row: 2;
  text-align: center;
  font-size: 16px;
  color: var(--home-text-muted);
}
.home-vdash-scatter {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  width: 100%;
  height: 169px;
  background: #F7FFF7;
  border: 1px solid var(--home-neutral-7);
  border-radius: 8px;
  overflow: hidden;
}
.home-vdash-scatter-grid { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Centred with negative margins, NOT translate(-50%,-50%) — transform is
   reserved for the scroll-linked scale-in. */
.home-vdash-marker {
  position: absolute;
  width: 32px;
  height: 32px;
  margin-left: -16px;
  margin-top: -16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  padding-left: 0.7px;   /* re-centres the trailing letter-space */
  will-change: transform, opacity;
}

.home-vdash-summary {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.home-vdash-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 1.25px 4px rgba(35, 57, 99, 0.25);
}
.home-vdash-summary-label,
.home-vdash-summary-value { font-size: 16px; font-weight: 600; color: #132C55; }
.home-vdash-summary-value { display: inline-flex; align-items: center; gap: 6px; }
.home-vdash-swatch {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--home-gradient-teal-green);
}

/* ---------- Live Activity Feed: light-green rounded panel, uniform dots ---------- */
.home-vdash-feed { display: flex; flex-direction: column; gap: 10px; }
.home-vdash-feed-panel {
  background: #F7FFF7;
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.home-vdash-feed-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 400;
  color: var(--home-text);
  will-change: transform, opacity;
}
.home-vdash-feed-dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--home-gradient-teal-green);
}
.home-vdash-feed-text { flex: 1 1 auto; min-width: 0; }
.home-vdash-feed-time { margin-left: auto; white-space: nowrap; color: var(--home-text-muted); }

/* ---------- Overall Risk: 108px two-series donut + legend ---------- */
.home-vdash-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
}
.home-vdash-overall { display: flex; flex-direction: column; gap: 8px; }
.home-vdash-overall-body { display: flex; align-items: center; gap: 14px; }
.home-vdash-overall-donut { width: 108px; height: 108px; flex: 0 0 108px; }
.home-vdash-overall-donut svg { width: 100%; height: 100%; }
/* Value + state STACKED inside the 64px hole. */
.home-vdash-overall-inner { flex-direction: column; gap: 0; }
.home-vdash-overall-value { font-size: 20px; font-weight: 700; line-height: 1.15; color: var(--home-text); }
.home-vdash-overall-state { font-size: 14px; font-weight: 500; line-height: 1.15; color: var(--home-text); }
.home-vdash-legend { display: flex; flex-direction: column; gap: 10px; }
.home-vdash-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #415267;
}
.home-vdash-legend-swatch { flex: 0 0 18px; width: 18px; height: 18px; }
.home-vdash-legend-swatch--current  { border-radius: 4px; background: var(--home-gradient-teal-green); }
.home-vdash-legend-swatch--capacity { border-radius: 2px; background: #1e2e4c; }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .home-vdash-panel { padding: 20px 22px; gap: 14px; }
  .home-vdash-title { font-size: 17px; }
  .home-vdash-bar-label,
  .home-vdash-stat-label,
  .home-vdash-stat-bottom,
  .home-vdash-stat-chip,
  .home-vdash-summary-label,
  .home-vdash-summary-value { font-size: 15px; }
  .home-vdash-dial { flex-basis: 128px; width: 128px; height: 128px; }
  .home-vdash-scatter-wrap { grid-template-columns: 20px minmax(0, 1fr); }
  .home-vdash-scatter { height: 150px; }
}

@media (max-width: 900px) {
  /* THE CARD STOPS BEING A RISING OVERLAY HERE.
     Stacked, it is ~1600px tall against an ~844px viewport, inside a section
     whose min-height is 880px and which clips its overflow — so the desktop
     behaviour (absolutely positioned at top:100%, translated up by its own
     height) hoisted it off the top of the screen and left well over half of it
     unreachable at any scroll position. In normal flow the section grows to
     fit it and the reader simply scrolls through; home-test.js detects the same
     900px breakpoint and drives each chart from its own viewport position
     instead of from one section-wide clock. */
  .home-page section.home-video-section {
    min-height: 0;
    justify-content: flex-start;
    overflow: visible;        /* nothing left to clip */
    /* The base rule is `padding: 0` — correct on desktop, where the content is
       bottom-anchored inside a 100vh section and never touches the top edge.
       Once this becomes a normal-flow, content-height section the headline sits
       flush against the top of the video, so the top gap has to be declared
       here. Bottom is smaller than top because the dashboard card below already
       carries its own 32px margin. */
    padding: clamp(56px, 13vw, 88px) 0 56px;
  }
  /* The lift existed only to keep this copy out of the rising card's path. */
  .home-video-content { margin-bottom: 0; min-height: 0; }

  .home-video-dashboard {
    position: relative;
    top: auto;
    transform: none;
    margin: 32px auto 0;
    width: min(92%, 560px);
    flex-direction: column;
    border-radius: 18px;
  }
  .home-vdash-panel--left,
  .home-vdash-panel--right { flex: 1 1 auto; max-width: 100%; }
  .home-vdash-register { flex-direction: column; }
  .home-vdash-scatter-wrap { grid-template-columns: 20px minmax(0, 1fr); width: 100%; }
  .home-vdash-bottom { flex-direction: column; align-items: stretch; }
  .home-vdash-ministats { flex: 1 1 auto; max-width: 100%; }
  .home-vdash-scatter-ylabel,
  .home-vdash-scatter-xlabel { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-video-dashboard,
  .home-vdash-marker,
  .home-vdash-feed-row { transform: none !important; opacity: 1 !important; }
}

/* ============================================================
   Product rows — shared scaffold (.home-product / --LR / --RL).
   First defined here for EagleEye365; the Gladius and Swift rows
   (section-4/section-5) reuse these same classes in later build
   passes. DOM order is always copy-then-mockup (heading read first
   regardless of visual layout); the --LR/--RL modifier only flips
   flex-direction, so "image left" is achieved by reversing the row
   rather than reordering markup.
   ============================================================ */
.home-product { background: #fff; }
.home-product .home-inner {
  display: flex;
  align-items: center;
  gap: 64px;
}
.home-product--LR .home-inner { flex-direction: row-reverse; } /* image left, text right */
.home-product--RL .home-inner { flex-direction: row; }         /* text left, image right */

.home-product-copy { flex: 1 1 460px; max-width: 520px; }

/* Product logo lockup — the first element of the copy stack in both Figma
   and on the live page (32px above the heading); it was missing entirely
   from the first build, leaving every product row unbranded. */
.home-product-logo {
  display: block;
  width: auto;
  max-width: 298px;
  height: auto;
  margin: 0 0 32px;
}

.home-product-copy h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 700; }
.home-product-copy p { font-size: 16px; line-height: 1.6; color: var(--home-text-muted); margin: 0 0 32px; }

.home-product-mockup { flex: 1 1 560px; display: flex; justify-content: center; }

@media (max-width: 1024px) {
  .home-product .home-inner { flex-direction: column !important; gap: 40px; }
  .home-product-copy { max-width: 100%; }
}

/* ============================================================
   Section 3 — EagleEye365 product row (REAL LAPTOP ARTWORK).

   REPLACES the whole previous "Section 3 — EagleEye365 product row (REBUILD)"
   block — from that banner comment down to and including its
   `@media (prefers-reduced-motion: reduce)` rule, i.e. everything up to the
   "Section 4 — Gladius" banner. Delete that block, it is entirely superseded
   here.

   THE FRAME IS THE FIGMA EXPORT, NOT CSS.
   assets/laptop-frame.svg (520x301) already draws the lid, the dark bezel,
   the camera dot, the diagonal lid glare, the silver base slab, the front lip
   notch and the contact shadow. Every hand-coded chrome rule is therefore
   DELETED: .home-ee-lid, .home-ee-bezel, .home-ee-cam, .home-ee-hinge,
   .home-ee-base (+ its ::before/::after) and .home-ee-glare no longer exist,
   and neither does the section-scoped `.home-eagleeye365-mockup
   .home-laptop-screen` override — this row no longer uses .home-laptop-screen
   at all, so the shared 900/522 rule is left untouched for Gladius and Swift.

   MEASURED GEOMETRY (off the SVG paths — do not re-derive):
     frame            520 x 301
     screen interior  x 61..459, y 20..268  =>  398 x 248
     screen as % of the stage:  left 11.731%  top 6.645%
                                width 76.538% height 82.392%
     screen aspect ratio 398 / 248

   COORDINATE FRAME + THE DELIBERATE OVERHANG.
   The five card rects are Figma coordinates in the WHOLE laptop graphic, not
   in the screen interior. They are re-projected from the old 900x522 frame
   onto the 520x301 SVG through the screen rect (scale 398/688 across,
   248/430 down) and expressed as % of .home-ee-stage. They live in
   .home-ee-cards — an UNCLIPPED inset:0 overlay that is a SIBLING of, and
   stacked above, both the <img> frame and the screen surface. In frame px the
   overhang survives intact: cards 1/2 start at x 52.3 (screen starts at 61),
   cards 1/3 start at y 7.9 (screen starts at 20) and card 4 ends at x 468.8
   (screen ends at 459) — all still inside the lid silhouette x 49..471,
   y 0..284. Nothing is clipped to the screen rect; that break-out is the
   design.

   Z-order: .home-ee-frame (0) -> .home-ee-screen (1) -> .home-ee-cards (2).

   SCALE / THE 900-1180px LEGIBILITY FIX.
   ONE unit drives the whole mockup: --ee-u = 1px of the 900-wide frame the
   dashboard was authored in, taken straight off the container inline size.
   It now has NO px floor, and neither do the four type tokens derived from
   it — that floor was the bug: as the laptop shrank through the tablet band
   the boxes kept scaling while the type froze at 8-11px, so labels grew
   relative to the cells holding them and collided/clipped inside
   `overflow:hidden` cards. Everything is a fraction of the frame now, so the
   dashboard scales as ONE piece and what fits at design size fits at every
   size. The second half of the fix is to make the FRAME itself bigger through
   that band (see the two media queries near the bottom): the mockup takes
   more of the row at 1025-1180px and the stacked cap rises 760px -> 900px at
   <=1024px, so the smallest label lands LARGER through the whole band than
   the old floored build did, not smaller. Below 899px the existing behaviour
   is unchanged: the chrome is dropped and the cards reflow into a real grid.
   ============================================================ */

/* ---------- Section shell: near full-bleed, laptop cropped by the page edge
   (Figma runs the laptop from x=594 to x=1494 on a 1440 frame; live is
   4% side padding / 43%+54% columns with no 1280px cap). ---------- */
.home-page section.home-eagleeye365-row {
  background: #FEFFFD;
  min-height: 80vh;
  display: flex;
  align-items: center;
  padding: 8% 0 96px 4vw;
  overflow-x: clip;
}
.home-eagleeye365-row .home-inner {
  max-width: none;
  width: 100%;
  gap: 4%;
}
.home-eagleeye365-row .home-product-copy {
  flex: 0 1 34%;
  max-width: 475px;
}
.home-eagleeye365-row .home-product-mockup {
  flex: 1 1 62%;
  min-width: 0;
  position: relative;
  justify-content: flex-end;
  margin-right: -4vw;   /* the mockup runs past the page edge and is clipped */
}

/* Copy typography — Figma: H2 24/30 Bold #1e2e4c, body 18px on a 475px
   measure. The shared clamp(26px,3vw,36px) rendered up to 50% oversized. */
.home-eagleeye365-row .home-product-copy h2 {
  font-size: 24px;
  line-height: 30px;
  font-weight: 700;
  color: var(--home-primary-dark);
  margin: 0 0 12px;
}
.home-eagleeye365-row .home-product-copy p {
  font-size: 18px;
  line-height: 1.3;
  max-width: 475px;
  color: var(--home-text-muted);
  margin: 0 0 32px;
}

/* ---------- "DIVE IN" — gradient-bordered ghost button.
   Live: border:3px solid transparent + border-image linear-gradient(90deg,
   #47b0a3 -> #4fb799 30.43% -> #4cc86f 77.4% -> #84ba4c), transparent fill,
   navy ExtraBold text and a green glow. Figma's variant is the same shape
   with a 2px #6ac2b7 stroke. Section-scoped variant — the shared .home-btn /
   .home-btn--solid rules are NOT touched. ---------- */
.home-eagleeye365-btn {
  padding: 12px 16px;
  font-size: 17px;
  line-height: 24px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--home-primary);
  background: transparent;
  border: 3px solid transparent;
  border-image: linear-gradient(90deg, #47b0a3 0%, #4fb799 30.43%, #4cc86f 77.4%, #84ba4c 100%);
  border-image-slice: 1;
  box-shadow:
    -11.15px -10.39px 48px rgba(51, 138, 48, 0.05),
    -1.858px -1.732px 12px rgba(79, 173, 93, 0.15),
    0 0 25px 2px rgba(155, 193, 150, 0.30);
  transition: box-shadow 0.25s ease, color 0.25s ease;
}
.home-eagleeye365-btn:hover,
.home-eagleeye365-btn:focus-visible {
  color: var(--home-primary-dark);
  box-shadow:
    -11.15px -10.39px 48px rgba(51, 138, 48, 0.10),
    -1.858px -1.732px 12px rgba(79, 173, 93, 0.28),
    0 0 32px 4px rgba(155, 193, 150, 0.55);
}

/* ---------- Mockup stage ---------- */
.home-eagleeye365-mockup {
  width: 100%;
  max-width: 980px;
  margin-left: auto;
  /* --ee-u below is a fraction of THIS box, so the whole mockup scales with
     the column instead of being frozen at design px. Safe with .home-reveal's
     transform: cqw reads the layout box, which transforms do not affect. */
  container-type: inline-size;
}

.home-ee-stage {
  /* 1u = 1px of the 900-wide frame the dashboard was authored in.
     NO px floor, and no floor on any token below — that is the whole
     tablet-band fix: chrome, boxes, charts and TYPE all shrink together. */
  --ee-u: 0.111111cqw;
  --ee-t-xs: calc(9.5 * var(--ee-u));
  --ee-t-sm: calc(11 * var(--ee-u));
  --ee-t-md: calc(12.5 * var(--ee-u));
  --ee-t-lg: calc(14 * var(--ee-u));

  position: relative;
  width: 100%;
  /* The SVG's own frame. Base slab and contact shadow are INSIDE it, so the
     old margin-bottom that made room for the CSS base wedge is gone. */
  aspect-ratio: 520 / 301;
}

/* ---------- The real laptop artwork. Plain <img>, not a background-image, so
   it stays crisp at any scale. Bottom of the stack. ---------- */
.home-ee-frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* ---------- Screen surface, pinned to the SVG's measured white screen rect
   (398x248 @ 61,20). Square corners, because the SVG's screen path is a hard
   rectangle. Carries the faint app skeleton so the cards read as floating
   over a running dashboard. Clipped — the cards are NOT inside it. ------- */
.home-ee-screen {
  position: absolute;
  left: 11.731%;
  top: 6.645%;
  width: 76.538%;
  aspect-ratio: 398 / 248;
  z-index: 1;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 16% 0%, #FFFFFF 0%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(160deg, #F8FAFC 0%, #EDF1F6 55%, #E3E9F1 100%);
  box-shadow: inset 0 0 calc(10 * var(--ee-u)) rgba(35, 57, 99, 0.06);
}
.home-ee-screen::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 7.5%;
  background: linear-gradient(180deg, #E8EDF4, #DEE5EF);
}
.home-ee-screen::after {
  content: '';
  position: absolute;
  left: 7.5%; right: 0; top: 0;
  height: 7%;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 -1px 0 rgba(35, 57, 99, 0.06);
}

/* ---------- Card overlay: sibling of the frame, NOT clipped, so cards break
   out past the bezel exactly as designed. ---------- */
.home-ee-cards {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: visible;
}

.home-eagleeye365-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: calc(8 * var(--ee-u));
  box-shadow: var(--home-shadow-elevation-4);
  padding: calc(12 * var(--ee-u));
  overflow: hidden;
  opacity: 1;               /* no-JS fallback; JS drives the entrance */
  will-change: transform, opacity;
}
/* Figma rects re-projected onto the 520x301 SVG frame through the measured
   screen rect. Frame-px equivalents in the comments show the overhang. */
.home-ee-cards .home-eagleeye365-card--automation      { left: 10.062%; top:  2.621%; width: 26.699%; height: 38.705%; padding: calc(14 * var(--ee-u)); } /* x 52.3..191.2, y 7.9..124.4  — breaks past the left AND top bezel */
.home-ee-cards .home-eagleeye365-card--risk            { left: 10.062%; top: 43.242%; width: 26.699%; height: 24.143%; padding: calc(14 * var(--ee-u)); } /* x 52.3..191.2 — breaks past the left bezel */
.home-ee-cards .home-eagleeye365-card--compliance-docs { left: 38.986%; top:  2.621%; width: 40.828%; height: 32.382%; border-radius: calc(10 * var(--ee-u)); background: #FBFCFD; padding: calc(14 * var(--ee-u)); } /* y 7.9 — breaks past the top bezel */
.home-ee-cards .home-eagleeye365-card--realtime-metrics{ left: 59.122%; top: 36.344%; width: 31.038%; height: 22.610%; z-index: 3; padding: calc(10 * var(--ee-u)); } /* x ..468.8 — breaks past the right edge of the screen */
.home-ee-cards .home-eagleeye365-card--governance      { left: 38.541%; top: 46.308%; width: 19.468%; height: 34.490%; border-radius: calc(10 * var(--ee-u)); padding: calc(10 * var(--ee-u)); }

.home-eagleeye365-card-title {
  font-size: var(--ee-t-lg);
  font-weight: 700;
  color: var(--home-text);
  line-height: 1.2;
  margin-bottom: calc(9 * var(--ee-u));
}
.home-eagleeye365-card--realtime-metrics .home-eagleeye365-card-title,
.home-eagleeye365-card--governance .home-eagleeye365-card-title {
  font-size: var(--ee-t-md);
  margin-bottom: calc(6 * var(--ee-u));
}

/* Section-scoped chart chrome: pale-mint donut track and butt-ended arcs
   (Figma shows a hard boundary between fill and remainder, not round caps). */
.home-eagleeye365-card .home-donut circle.home-donut-track { stroke: #E4F4E9; }
.home-eagleeye365-card .home-donut circle.home-donut-fill { stroke-linecap: butt; }
.home-eagleeye365-card .home-donut svg { width: 100%; height: 100%; }
.home-eagleeye365-card .home-bar-track { height: calc(6 * var(--ee-u)); }
.home-eagleeye365-bar--warn { background: #F39B11; }
/* White inner disc with a soft shadow ring, behind the numeral. */
.home-ee-donut-disc {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  z-index: 0;
  box-shadow:
    0 calc(2 * var(--ee-u)) calc(6 * var(--ee-u)) rgba(35, 57, 99, 0.16),
    0 0 0 calc(1 * var(--ee-u)) rgba(35, 57, 99, 0.05);
}
.home-eagleeye365-card .home-donut-value { z-index: 1; }

/* --- Card 1: Low Code Automation Panels. Tinted rounded row blocks with the
   green gradient play circle on the RIGHT of the text (no hairline rules). */
.home-eagleeye365-automation-rows {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(10 * var(--ee-u));
}
.home-eagleeye365-automation-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8 * var(--ee-u));
  background: #F2F5F9;
  border-radius: calc(4 * var(--ee-u));
  padding: calc(8 * var(--ee-u)) calc(10 * var(--ee-u));
}
.home-eagleeye365-play {
  flex-shrink: 0;
  order: 2;
  width: calc(26 * var(--ee-u));
  height: calc(26 * var(--ee-u));
  border-radius: 50%;
  background: var(--home-gradient-teal-green-diag);
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-eagleeye365-play::after {
  content: '';
  width: 0;
  height: 0;
  margin-left: calc(2 * var(--ee-u));
  border-style: solid;
  border-width: calc(5 * var(--ee-u)) 0 calc(5 * var(--ee-u)) calc(8 * var(--ee-u));
  border-color: transparent transparent transparent #fff;
}
.home-eagleeye365-automation-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(1 * var(--ee-u));
  line-height: 1.25;
}
.home-eagleeye365-automation-text span:first-child {
  font-size: var(--ee-t-sm);
  font-weight: 700;
  color: var(--home-text);
}
.home-eagleeye365-automation-text span:last-child {
  font-size: var(--ee-t-xs);
  color: var(--home-text-muted);
}

/* --- Card 2: Risk Detection Indicators. Equal-width rounded pills. --- */
.home-eagleeye365-risk-rows {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: calc(10 * var(--ee-u));
}
.home-eagleeye365-risk-row {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--ee-u));
}
.home-eagleeye365-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(66 * var(--ee-u));
  padding: calc(4 * var(--ee-u)) 0;
  border-radius: calc(6 * var(--ee-u));
  font-size: var(--ee-t-sm);
  font-weight: 700;
  color: #fff;
}
.home-eagleeye365-pill--high { background: #909BB1; }
.home-eagleeye365-pill--medium { background: #1D2D4B; }
.home-eagleeye365-risk-label {
  font-size: var(--ee-t-sm);
  line-height: 1.2;
  color: var(--home-text);
}

/* --- Card 3: Instant Compliance Documentation. Four white sub-cards on a
   tinted body, not one flat block of text. --- */
.home-eagleeye365-docs-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(9 * var(--ee-u)) calc(12 * var(--ee-u));
}
.home-eagleeye365-docs-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(4 * var(--ee-u));
  background: #fff;
  border-radius: calc(6 * var(--ee-u));
  padding: calc(8 * var(--ee-u)) calc(10 * var(--ee-u));
  box-shadow: 0 calc(2 * var(--ee-u)) calc(8 * var(--ee-u)) rgba(35, 57, 99, 0.08);
}
.home-eagleeye365-docs-label {
  font-size: var(--ee-t-sm);
  font-weight: 700;
  line-height: 1.2;
  color: var(--home-text);
}
.home-eagleeye365-docs-status {
  font-size: var(--ee-t-xs);
  color: var(--home-text-muted);
}

/* --- Card 4: Real-Time Compliance Metrics. Title top-left, then the large
   thick donut beside three label-above-bar rows. --- */
.home-eagleeye365-realtime-inner {
  flex: 1;
  display: flex;
  align-items: center;
  gap: calc(12 * var(--ee-u));
  min-height: 0;
}
.home-eagleeye365-card--realtime-metrics .home-donut {
  flex: 0 0 auto;
  width: calc(72 * var(--ee-u));
  height: calc(72 * var(--ee-u));
}
.home-eagleeye365-card--realtime-metrics .home-ee-donut-disc { inset: calc(13 * var(--ee-u)); }
.home-eagleeye365-card--realtime-metrics .home-donut-value { font-size: var(--ee-t-lg); }
.home-eagleeye365-realtime-bars {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--ee-u));
}
/* navy + semi-bold, clearly heavier than card 3's status text */
.home-eagleeye365-realtime-bar-row span {
  display: block;
  font-size: var(--ee-t-sm);
  font-weight: 600;
  color: var(--home-primary-dark);
  line-height: 1.2;
  margin-bottom: calc(3 * var(--ee-u));
}

/* --- Card 5: Governance Catalog Status. Donut CENTRED and unlabelled; bar
   rows are label-above-bar with no percentage numerals. --- */
.home-eagleeye365-governance-donut {
  display: flex;
  justify-content: center;
  margin-bottom: calc(8 * var(--ee-u));
}
.home-eagleeye365-card--governance .home-donut {
  width: calc(76 * var(--ee-u));
  height: calc(76 * var(--ee-u));
}
.home-eagleeye365-card--governance .home-ee-donut-disc { inset: calc(14 * var(--ee-u)); }
.home-eagleeye365-card--governance .home-donut-value { font-size: var(--ee-t-lg); }
.home-eagleeye365-governance-bars {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(6 * var(--ee-u));
}
.home-eagleeye365-governance-bar-row {
  display: flex;
  flex-direction: column;
  gap: calc(3 * var(--ee-u));
  font-size: var(--ee-t-xs);
  line-height: 1.2;
  color: var(--home-text);
}

/* ---------- The five stat pairs = live's .rk-tooltip-card-wrapper:
   a 216px, right-aligned, absolutely-positioned stack of frosted glass
   tooltips overlaying the mockup. RETAINED but suppressed page-wide by the
   shared `.home-ee-tips, .home-swift-tips { display:none !important; }` rule
   at the end of the stylesheet — these rules exist so the decision stays
   reversible; do not re-enable them here. ---------- */
.home-ee-tips {
  position: absolute;
  right: clamp(64px, 7vw, 132px);
  top: 50%;
  transform: translateY(-50%);
  margin-top: -32px;              /* live's offset-y */
  width: 216px;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 16px;
  z-index: 5;
  pointer-events: none;
}
.home-ee-tip {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 20px 14px 43px;   /* the 43px left pad is the scrim's space */
  border-radius: 8px;
  text-align: right;
  overflow: hidden;
  opacity: 1;                     /* no-JS fallback */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 12px 6px rgba(255, 255, 255, 0.6);
  will-change: transform, opacity;
}
.home-ee-tip::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  z-index: 2;
}
.home-ee-tip::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), transparent, rgba(255, 255, 255, 0.3));
  z-index: 2;
}
.home-ee-tip-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(45deg,
    rgba(244, 246, 249, 0) 0%,
    rgba(244, 246, 249, 0.80) 54.33%,
    rgba(244, 246, 249, 0.88) 63.46%,
    rgba(244, 246, 249, 0.90) 76.44%,
    #F4F6F9 100%);
}
.home-ee-tip-top {
  position: relative;
  z-index: 1;
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  color: var(--home-primary);
}
.home-ee-tip-bottom {
  position: relative;
  z-index: 1;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--home-text-muted);
}

/* ---------- Narrow desktop (1181-1439): give the mockup more of the row. -- */
@media (min-width: 1180.02px) and (max-width: 1439px) {
  .home-eagleeye365-row .home-product-copy { flex-basis: 31%; }
  .home-eagleeye365-row .home-product-mockup { flex-basis: 65%; margin-right: -5vw; }
}

/* ---------- TABLET-BAND FIX, part 1 of 2 (1025-1180px).
   The laptop is still side-by-side here and this is where it used to shrink
   to the point of illegibility. Every size inside it is now a fraction of the
   frame, so the lever that makes the dashboard bigger is the FRAME: squeeze
   the copy column, tighten the page gutter and let the laptop bleed a little
   further past the edge (the extra bleed stays under 9% of the frame, so
   card 4 — the right-most element, ending at 90.2% — is never clipped).
   Net effect vs the old floored build at 1100px: --ee-u ~0.91 gives
   8.6 / 10.0 / 11.3 / 12.7px instead of the frozen 8 / 9 / 10 / 11px, and
   nothing collides because the boxes scale with it. ---------- */
@media (min-width: 1024.02px) and (max-width: 1180px) {
  .home-page section.home-eagleeye365-row { padding-left: 2.5vw; }
  .home-eagleeye365-row .home-inner { gap: 3%; }
  .home-eagleeye365-row .home-product-copy {
    flex: 0 1 27%;
    min-width: 250px;
  }
  .home-eagleeye365-row .home-product-mockup {
    flex: 1 1 70%;
    margin-right: -6vw;
  }
  .home-eagleeye365-row .home-product-copy h2 { font-size: 22px; line-height: 28px; }
  .home-eagleeye365-row .home-product-copy p { font-size: 16px; line-height: 1.45; }
}

/* ---------- Tablet / mobile: mockup ABOVE the copy (live sets --order:1 on
   the mockup column and --order:2 on the copy inside both max-width:1024px
   and max-width:767px).

   TABLET-BAND FIX, part 2 of 2: the mockup cap goes 760px -> 900px, i.e. up
   to exactly the design frame width, so at 900-1024px the laptop uses the
   whole stacked row (--ee-u climbs from ~0.92 to 1.0) instead of being pinned
   at 760px. Never larger than 900px, so the dashboard is never upscaled past
   the size it was drawn at. ---------- */
@media (max-width: 1024px) {
  .home-page section.home-eagleeye365-row {
    min-height: 0;
    padding: 56px 4vw;
    display: block;
  }
  .home-eagleeye365-row .home-inner {
    flex-direction: column-reverse !important;
    gap: 40px;
  }
  .home-eagleeye365-row .home-product-copy { flex: 1 1 auto; max-width: 100%; }
  .home-eagleeye365-row .home-product-mockup {
    flex: 1 1 auto;
    width: 100%;
    margin-right: 0;
    justify-content: center;
    flex-direction: column;
    align-items: stretch;
  }
  .home-eagleeye365-mockup { max-width: 900px; margin: 0 auto; }

  /* The tooltip stack stops being an overlay and becomes a readable row. */
  .home-ee-tips {
    position: static;
    transform: none;
    margin: 24px auto 0;
    width: 100%;
    min-height: 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    pointer-events: auto;
  }
  .home-ee-tip {
    flex: 1 1 170px;
    max-width: 240px;
    padding: 14px 16px;
    text-align: center;
  }
}

/* ---------- Phones/small tablets: UNCHANGED BEHAVIOUR. Below this width the
   absolutely-positioned collage is a sub-10px dashboard however big the frame
   is, so the laptop artwork is dropped and the five cards reflow into a real,
   design-size grid (u pinned to 1px). The charts stay live DOM/SVG and keep
   animating. ---------- */
@media (max-width: 900px) {
  .home-ee-stage {
    --ee-u: 1px;
    aspect-ratio: auto;
    height: auto;
  }
  .home-page .home-ee-frame,
  .home-page .home-ee-screen { display: none; }

  .home-ee-cards {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .home-ee-cards .home-eagleeye365-card,
  .home-ee-cards .home-eagleeye365-card--automation,
  .home-ee-cards .home-eagleeye365-card--risk,
  .home-ee-cards .home-eagleeye365-card--compliance-docs,
  .home-ee-cards .home-eagleeye365-card--realtime-metrics,
  .home-ee-cards .home-eagleeye365-card--governance {
    position: static;
    inset: auto;
    width: auto;
    height: auto;
    padding: 16px;
    overflow: visible;
  }
  .home-ee-cards .home-eagleeye365-card--compliance-docs { grid-column: 1 / -1; }
  .home-eagleeye365-card--governance .home-donut { width: 96px; height: 96px; }
  .home-eagleeye365-card--governance .home-ee-donut-disc { inset: 18px; }
  .home-eagleeye365-card--realtime-metrics .home-donut { width: 88px; height: 88px; }
  .home-eagleeye365-card--realtime-metrics .home-ee-donut-disc { inset: 16px; }
}
@media (max-width: 599px) {
  .home-page section.home-eagleeye365-row { padding: 48px 20px; }
  .home-ee-cards { grid-template-columns: 1fr; }
  .home-eagleeye365-row .home-product-copy p { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-eagleeye365-card,
  .home-ee-tip { transform: none !important; opacity: 1 !important; }
}

/* ============================================================
   Section 4 — Gladius (SIEM / cybersecurity) — REAL LAPTOP ARTWORK.

   FULL REPLACEMENT for the previous "Section 4 — Gladius (SIEM /
   cybersecurity) — FIDELITY REBUILD" block (old home-test.css lines
   2157-2755). Nothing shared is redefined: every selector below is either one
   of this section's own .home-gladius-* classes or a shared class scoped under
   .home-gladius. .home-laptop, .home-laptop-screen and .home-laptop-webcam are
   no longer referenced at all by this row — the CSS device is gone.

   WHAT CHANGED
   1. The hand-coded chrome (.home-gladius-lid / -screen bezel / -glare /
      -sheen / -base / -deck / -hinge / -lip / -notch and the shared
      .home-laptop-webcam override) is DELETED. The exported Figma laptop
      (assets/laptop-frame.svg) already carries the camera dot, the diagonal
      lid glare, both silver base bands, the bottom shadow and the front-lip
      notch, so keeping the CSS versions would double-draw them.
   2. The frame is an <img>, not a background-image, so it stays crisp.
   3. GEOMETRY, measured off the SVG paths:
        frame            520 x 301                -> aspect-ratio 520/301
        screen interior  398 x 248 at (61, 20)    -> aspect-ratio 398/248
        screen as % of the stage:
            left 11.731%  top 6.645%  w 76.538%  h 82.392%
      .home-gladius-screen and .home-gladius-cards are pinned to that rect.
      The old screen was 688.85 x 430.09 (aspect 1.6016) against 1.6048 now,
      so the six per-card --hgl-l/-t/-w/-h percentages are re-expressed against
      the new screen simply by re-pinning their parent layer: every card keeps
      its exact relative position, no renumbering, drift under 0.2%.
   4. The card layer is an UNCLIPPED sibling of the frame (inset to the screen
      rect, no overflow of its own, z-index above both the frame and the screen
      surface), so the deliberate bezel overhang, the card box-shadows and the
      JS arrival drift are never cut off.
   5. ONE UNIT, DRIVEN BY THE STAGE, NOT BY THE VIEWPORT. --hgl-u is "one Figma
      pixel of the screen": the stage is a size container and
      --hgl-u = 0.111111cqw = stageWidth / 900. Every glyph, pad, radius, gap
      and donut diameter inside the mockup is calc(<figma px> * var(--hgl-u)),
      so the dashboard scales as ONE PIECE with the frame at every width.
      That is what fixes the 900-1180px tablet band: instead of a laptop that
      keeps shrinking inside a 55vw column until 6.4px type is unreadable, the
      row stacks at 1180px, the frame takes the full viewport width and
      --hgl-u climbs to 1.11-1.46px (body type 8.9-11.7px, smallest badge type
      7.2-9.5px) — strictly larger than the desktop rendering, at every width
      in the band. Nothing is hidden.
   6. THE LEFT BLEED IS PRESERVED. The section keeps padding-left:0 +
      overflow:hidden and the stage is deliberately wider than its column and
      pulled left, so the crop lands at 7.4% of the frame (desktop) / 7.0%
      (tablet) — left of the lid edge at 9.42% — i.e. only the silver base runs
      off the viewport edge, the black lid stays whole, and the leftmost card
      (13.45% of the frame) is never touched.
   ============================================================ */

.home-gladius {
  --hgl-u: 0.95px;                 /* seed only; live value set on the card layer */
  --hgl-navy: #1E2E4C;
  --hgl-mint: #83DEC6;
  --hgl-green: #4CC86F;
  --hgl-green-ink: #2E9E62;                  /* legible green for small type     */
  --hgl-card-ink: #1E2E4C;
  --hgl-card-muted: #78828F;
  --hgl-cta-gradient: linear-gradient(90deg, #47B0A3 0%, #4FB799 30.43%, #4CC86F 77.4%, #84BA4C 100%);
}

/* ---------- Section frame: bleeds to the LEFT viewport edge ----------
   Live container 64a42f7 is padding:88px 80px 88px 0 / min-height:90vh /
   space-between with a fully transparent background, and Figma puts the
   mockup instance at x=0. The shared .home-inner max-width:1280px centring
   is what was killing that bleed, so it is neutralised here only. */
.home-page .home-gladius.home-product {
  background: transparent;
  padding: 88px 80px 88px 0;
  min-height: 90vh;
  display: flex;
  align-items: center;
  overflow: hidden;                 /* crops the frame AT the viewport edge */
}
.home-gladius .home-inner {
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  margin: 0;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}

/* Copy column — Figma Group 250: 549 wide, ending 80px from the right edge. */
.home-gladius .home-product-copy { flex: 0 1 549px; max-width: 549px; }
.home-gladius .home-product-copy h2 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
  margin: 0 0 20px;
}
.home-gladius .home-product-copy p {
  font-size: 18px;
  line-height: 1.3;
  color: var(--home-text-muted);
  margin: 0 0 32px;
}

/* Mockup column — Figma's 791px, flush to the section's zero left padding.
   Pinned at 791px rather than min(791px, 54.93vw): the old vw sizing shrank
   the whole device (and therefore all of its type) by ~35% between 1440px and
   1180px, which is the other half of the tablet-band legibility bug. It now
   only gives ground when the copy column would drop under 340px, i.e. only in
   the last ~120px before the row stacks. */
.home-gladius .home-product-mockup {
  flex: 0 0 auto;
  width: 791px;
  max-width: calc(100% - 340px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

/* ---------- DIVE IN — gradient-bordered ghost button ----------
   Live button 81d91da: 3px transparent border filled by the teal->lime
   gradient via border-image-slice:1, #233963 label, 17px/800, 16px/26px,
   2px radius, 0 0 25px 2px rgba(155,193,150,.5). Figma adds the translucent
   backdrop-blurred fill and the two soft green outer glows. Deliberately NOT
   .home-btn--solid, and the shared .home-btn rules are not touched. */
.home-gladius .home-btn.home-gladius-btn {
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(7.58px);
  backdrop-filter: blur(7.58px);
  color: var(--home-primary);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 16px 26px;
  border: 3px solid transparent;
  border-radius: 2px;
  border-image: var(--hgl-cta-gradient) 1;
  box-shadow:
    0 0 25px 2px rgba(155, 193, 150, 0.5),
    -11.15px -10.39px 48px rgba(51, 138, 48, 0.05),
    -1.86px -1.73px 12px rgba(79, 173, 93, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  transition: box-shadow 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.home-gladius .home-btn.home-gladius-btn:hover,
.home-gladius .home-btn.home-gladius-btn:focus-visible {
  background: rgba(255, 255, 255, 0.35);
  color: var(--home-primary-dark);
  box-shadow:
    0 0 34px 4px rgba(155, 193, 150, 0.62),
    -11.15px -10.39px 48px rgba(51, 138, 48, 0.10),
    -1.86px -1.73px 12px rgba(79, 173, 93, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.home-gladius .home-btn.home-gladius-btn--compact { font-size: 14px; padding: 11px 18px; }

/* ---------- Tablet/mobile-only logo + second CTA row (live fe55213) ---------- */
.home-gladius-mobilehead {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}
.home-gladius-mobilehead-logo { width: 167px; max-width: 45%; height: auto; }

/* ---------- The device ----------
   The .home-reveal wrapper is transformed per frame by home-test.js
   (translateX + scale). It must NOT clip: the stage overhangs it on purpose
   and the crop is owned by the section, at the viewport edge. */
.home-gladius-mockup {
  width: 100%;
  overflow: visible;
}

/* Stage = the 520 x 301 laptop artwork, and the size container that defines
   --hgl-u for everything inside it. width/margin-left are chosen so the stage
   is 108% of the column with all of the overhang on the LEFT: the crop lands
   at 8/108 = 7.41% of the frame, i.e. inside the silver base and left of the
   lid edge at 9.42%, so the black lid is never cut and the leftmost card
   (13.45% of the frame) stays a comfortable ~24px clear of the crop. */
.home-gladius-stage {
  position: relative;
  width: 108%;
  margin-left: -8%;
  aspect-ratio: 520 / 301;
  container-type: inline-size;
}

/* The artwork itself. preserveAspectRatio="none" is baked into the file, and
   the box is exactly 520:301, so filling it produces no distortion. */
.home-gladius-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Screen surface — the measured 398 x 248 interior of the artwork. The SVG's
   own screen (Vector_8) is flat white; this only lays a very faint glass tint
   over it so the dashboard does not sit on dead paper white. */
.home-gladius-screen {
  position: absolute;
  left: 11.731%;
  top: 6.645%;
  width: 76.538%;
  aspect-ratio: 398 / 248;
  z-index: 1;
  overflow: hidden;
  border-radius: 0;                 /* the SVG screen is a hard rectangle */
  pointer-events: none;
  background: linear-gradient(158deg, #FFFFFF 0%, #FAFCFD 55%, #F3F6FA 100%);
}

/* Card layer — SIBLING of the frame and of the screen surface, pinned to the
   identical measured rect but with NO overflow, so a card that breaks the
   bezel is never cut off, card shadows spill naturally, and the JS arrival
   drift (translate3d out of the rect) is never clipped. This is also why the
   layer survives when the frame is display:none'd at mobile. */
.home-gladius-cards {
  position: absolute;
  left: 11.731%;
  top: 6.645%;
  width: 76.538%;
  height: 82.392%;
  z-index: 2;
}

/* ---------- THE ONE UNIT ----------
   --hgl-u = one Figma pixel of the 688.85px-wide design screen
           = stageWidth / 900
           = 0.111111cqw against the stage's inline size.
   Declared on the card layer (a descendant of the container, never the
   container itself) so cqw resolves against the stage and not against an
   outer container. The plain-px seed and the @supports-not vw formulas below
   are the no-container-query fallback — a custom property will happily accept
   an unsupported unit as an opaque token stream, so the usual two-declaration
   fallback does not work here and a feature query is required. */
.home-gladius-screen,
.home-gladius-cards { --hgl-u: 0.95px; }

@supports not (width: 1cqw) {
  /* desktop: stage = 1.08 * min(791px, 100vw - 420px) */
  .home-gladius-screen,
  .home-gladius-cards { --hgl-u: min(0.9492px, calc(0.12vw - 0.504px)); }
  /* stacked tablet band: stage = 1.14 * (100vw - 24px) */
  @media (max-width: 1180px) {
    .home-gladius-screen,
    .home-gladius-cards { --hgl-u: calc(0.1267vw - 0.0304px); }
  }
}

@supports (width: 1cqw) {
  .home-gladius-screen,
  .home-gladius-cards { --hgl-u: 0.111111cqw; }
}

/* ---------- Dashboard cards ----------
   Rect comes in as --hgl-l/-t/-w/-h custom properties rather than as direct
   left/top/width/height, so the stacked breakpoint can re-flow the same markup
   into a grid without a single !important. Percentages are of the SCREEN rect
   (this layer), never of the whole frame. */
.home-gladius-card {
  position: absolute;
  left: var(--hgl-l);
  top: var(--hgl-t);
  width: var(--hgl-w);
  height: var(--hgl-h);
  z-index: var(--hgl-z, 1);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: calc(7 * var(--hgl-u));
  padding: calc(8 * var(--hgl-u)) calc(9 * var(--hgl-u));
  overflow: hidden;
  font-size: calc(8 * var(--hgl-u));
  line-height: 1.3;
  color: var(--hgl-card-ink);
  /* Tighter, softer and more diffuse than --home-shadow-elevation-4. */
  box-shadow:
    0 calc(1.5 * var(--hgl-u)) calc(4 * var(--hgl-u)) rgba(30, 46, 76, 0.07),
    0 calc(7 * var(--hgl-u)) calc(18 * var(--hgl-u)) rgba(30, 46, 76, 0.07);
}
.home-gladius-card-title {
  font-size: calc(10 * var(--hgl-u));
  font-weight: 700;
  line-height: 1.2;
  color: var(--hgl-card-ink);
}
.home-gladius-card--threats .home-gladius-card-title,
.home-gladius-card--posture .home-gladius-card-title,
.home-gladius-card--threatintel .home-gladius-card-title { font-size: calc(9.2 * var(--hgl-u)); }
.home-gladius-card-sub {
  font-size: calc(6.8 * var(--hgl-u));
  font-weight: 500;
  line-height: 1.3;
  color: var(--hgl-card-muted);
  margin-top: calc(2 * var(--hgl-u));
  max-width: 74%;
}

.home-gladius-card-row {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--hgl-u));
  margin-top: calc(6 * var(--hgl-u));
}
.home-gladius-donut { flex: 0 0 auto; }
.home-gladius-donut svg { width: 100%; height: 100%; display: block; }
.home-gladius-card .home-donut-value { font-size: calc(10 * var(--hgl-u)); font-weight: 700; }
.home-gladius-card-text {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--hgl-u));
  font-size: calc(7.5 * var(--hgl-u));
  line-height: 1.25;
  min-width: 0;
}
.home-gladius-card-text em {
  display: block;
  font-style: normal;
  font-weight: 500;
  font-size: calc(7.5 * var(--hgl-u));
  color: var(--hgl-card-muted);
}
.home-gladius-line1 {
  font-weight: 700;
  font-size: calc(9.5 * var(--hgl-u));
  color: var(--hgl-card-ink);
}

/* Card 1 — speedometer dials. The needle rides the SAME scroll progress as its
   arc (rotate(-90 + 1.8 * value * p)) so the two can never disagree. These are
   real semicircular <path> arcs whose data-circumference IS the half
   circumference (pi * 40 = 125.66), so the target is the literal 95 / 99. */
.home-gladius-gauge-row {
  display: flex;
  gap: calc(10 * var(--hgl-u));
  align-items: flex-start;
  justify-content: space-between;
  margin-top: calc(5 * var(--hgl-u));
}
.home-gladius-gauge { display: flex; flex-direction: column; align-items: center; flex: 1 1 0; min-width: 0; }
.home-gladius-dial { width: 100%; max-width: calc(96 * var(--hgl-u)); }
.home-gladius-dial svg { width: 100%; height: auto; display: block; }
.home-gladius-dial-track { fill: none; stroke: #EDF1F5; stroke-width: 8; stroke-linecap: round; }
.home-gladius-dial-fill { fill: none; stroke-width: 8; stroke-linecap: round; transition: none; }
.home-gladius-needle path { fill: #2B3648; }
.home-gladius-hub { fill: #2B3648; }
.home-gladius-hub-dot { fill: #fff; }
.home-gladius-gauge-label {
  display: block;
  margin-top: calc(2 * var(--hgl-u));
  text-align: center;
  font-size: calc(9 * var(--hgl-u));
  font-weight: 700;
}
.home-gladius-gauge-label b {
  display: block;
  font-size: calc(11 * var(--hgl-u));
  font-weight: 800;
  line-height: 1.15;
  color: var(--hgl-green-ink);          /* Figma prints the value in green */
}
.home-gladius-gauge-label em {
  display: block;
  font-style: normal;
  font-weight: 500;
  font-size: calc(7 * var(--hgl-u));
  line-height: 1.2;
  color: var(--hgl-card-muted);
}

/* Card 2 — filled light-green area over a fine 12x8 hairline grid. No
   preserveAspectRatio="none", so the viewBox aspect drives the rendered height
   and the stroke weight stays honest. */
.home-gladius-line-chart {
  width: 100%;
  height: auto;
  display: block;
  margin-top: calc(5 * var(--hgl-u));
}
.home-gladius-line-grid line { stroke: #E7ECF1; stroke-width: 0.5; opacity: 1; }
.home-gladius-line-path {
  fill: none;
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: none;                     /* the shared engine owns this per frame */
}
.home-gladius-line-area { transition: none; }

/* Card 5 — free-standing bar group (no grey tracks, left ~42% of the card)
   beside the diamond node graph (Threats top / NIST left / AI right / SOC2
   bottom, curved connectors). */
.home-gladius-intel-body {
  display: flex;
  align-items: flex-end;
  gap: calc(7 * var(--hgl-u));
  margin-top: calc(6 * var(--hgl-u));
  flex: 1 1 auto;
  min-height: 0;
}
.home-gladius-vbars {
  display: flex;
  align-items: flex-end;
  gap: calc(5 * var(--hgl-u));
  flex: 0 0 42%;
  height: calc(54 * var(--hgl-u));
  background: transparent;
}
.home-gladius-vbar {
  position: relative;
  flex: 1 1 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  background: transparent;              /* Figma has no track behind the bars */
  overflow: visible;
}
.home-gladius-vbar-fill {
  width: 100%;
  height: 0;
  border-radius: calc(2 * var(--hgl-u)) calc(2 * var(--hgl-u)) 0 0;
  transition: none;                     /* driven per frame from scroll */
}
.home-gladius-diagram { flex: 1 1 auto; width: 100%; height: auto; display: block; }
.home-gladius-diagram-node rect { fill: #fff; stroke: #CBD5E1; stroke-width: 0.8; }
.home-gladius-diagram-link path { fill: none; stroke: #8FD6C2; stroke-width: 1.1; stroke-linecap: round; }
.home-gladius-diagram-text text { font-size: 7px; font-weight: 700; fill: var(--hgl-navy); }

/* Card 6 — rounded number badges + green labels ending in "Version", and a
   four-segment ring (navy / mint / green / pale) instead of one gradient arc.
   Segment start angles are baked into each circle's transform attribute; butt
   caps stop the four arcs overlapping at their joins. */
.home-gladius-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(2.5 * var(--hgl-u));
  min-width: 0;
}
.home-gladius-legend li { display: flex; align-items: center; gap: calc(5 * var(--hgl-u)); min-width: 0; }
.home-gladius-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(15 * var(--hgl-u));
  height: calc(10.5 * var(--hgl-u));
  padding: 0 calc(3 * var(--hgl-u));
  border-radius: calc(5.5 * var(--hgl-u));
  font-size: calc(6.5 * var(--hgl-u));
  font-weight: 700;
  line-height: 1;
}
.home-gladius-legend em {
  flex: 1 1 auto;
  min-width: 0;
  font-style: normal;
  font-weight: 600;
  font-size: calc(7 * var(--hgl-u));
  color: var(--hgl-green-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 0;
}
.home-gladius-card--productpatches circle.home-donut-fill { stroke-linecap: butt; }

/* ============================================================
   TABLET BAND — 900px to 1180px. THE LEGIBILITY FIX.
   The row stacks (mockup above copy, matching live's left-column-first order)
   and the laptop takes the FULL viewport width instead of a 55vw column. The
   frame is kept, the chrome is kept, nothing is hidden — and because --hgl-u
   is the stage's own width / 900, the entire dashboard grows with it:
       viewport 1180 -> stage 1318 -> --hgl-u 1.46 -> body 11.7px, badge 9.5px
       viewport  900 -> stage  999 -> --hgl-u 1.11 -> body  8.9px, badge 7.2px
   i.e. larger than the desktop rendering at every width in the band, where the
   old build bottomed out at ~6.4px.
   The left bleed is preserved (section padding-left stays 0); the stage is
   114% wide with an 8% left pull, so the crop is at 7.0% on the left and
   94.7% on the right — both inside the silver base, so the black lid is whole
   on both sides and no card is touched.
   ============================================================ */
@media (max-width: 1180px) {
  .home-page .home-gladius.home-product {
    padding: 64px 24px 64px 0;
    min-height: 0;
    display: block;
    overflow: hidden;                 /* still crops the bleed at the viewport edge */
  }
  .home-page .home-gladius .home-inner {
    flex-direction: column-reverse !important;   /* mockup above copy */
    align-items: stretch;
    gap: 32px;
  }
  /* the section has no left padding (that is what makes the bleed), so the
     text columns carry their own gutter */
  .home-gladius .home-product-copy {
    flex: 1 1 auto;
    max-width: 100%;
    padding-left: 24px;
  }
  .home-gladius .home-product-mockup {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
  }

  .home-gladius-mobilehead { display: flex; padding-left: 24px; }
  .home-gladius .home-product-copy .home-product-logo,
  .home-gladius .home-product-copy .home-gladius-btn { display: none; }

  .home-gladius-stage { width: 114%; margin-left: -8%; }
}

/* ============================================================
   MOBILE — 899px and below. Unchanged behaviour: drop the frame entirely,
   promote the card layer to a responsive grid and set --hgl-u to a flat px
   value so every chart keeps its scroll-fill animation at a readable size.
   ============================================================ */
@media (max-width: 900px) {
  .home-page .home-gladius.home-product {
    padding: 56px 20px;
    overflow: visible;
  }
  .home-gladius .home-product-copy,
  .home-gladius-mobilehead { padding-left: 0; }

  .home-gladius-stage {
    position: static;
    container-type: normal;
    width: 100%;
    margin-left: 0;
    aspect-ratio: auto;
    background: var(--home-neutral-9);
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(30, 46, 76, 0.08);
  }
  .home-page .home-gladius-frame,
  .home-page .home-gladius-screen { display: none; }

  .home-gladius-cards {
    position: static;
    width: auto;
    height: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 326px), 1fr));
    gap: 16px;
    --hgl-u: 1.25px;
  }
  .home-gladius-card {
    position: static;
    width: auto;
    height: auto;
    z-index: auto;
    border-radius: 10px;
    padding: 16px;
  }
  .home-gladius-card-sub { max-width: 100%; }
  .home-gladius-legend em { white-space: normal; }
  .home-gladius-intel-body { align-items: center; }
}

@media (max-width: 420px) {
  .home-gladius-cards { --hgl-u: 1.05px; }
  .home-gladius-mobilehead { flex-wrap: wrap; gap: 12px; }
  .home-gladius-mobilehead-logo { max-width: 55%; }
}

/* ============================================================
   Section 5 — Swift (data management) product row.

   FRAME. The hand-coded laptop chrome is GONE. The lid / bezel / camera /
   hinge / base / glare / contact-shadow rules that used to live here have
   been deleted outright — the exported artwork
   includes/home-test/assets/laptop-frame.svg draws all of them, and keeping
   the CSS would double-paint. The old class names (.home-swift-machine,
   .home-swift-lid, .home-swift-cam, .home-swift-glare, .home-swift-base,
   .home-swift-hinge, .home-swift-notch, .home-swift-contact, and the
   .home-swift-mockup .home-laptop-screen override) are intentionally absent.

   GEOMETRY. Figma mockup instance 4239:28046 is a 791x625 stage:
     laptop frame 4239:28096  900 x 522   at (-55, +42)
     display area                          x 50.6-739.4 / y 75.8-505.9
   The SVG is 520x301 with its screen interior measured at
     left 11.731%  top 6.645%  width 76.538%  height 82.392%  (398x248, 1.6048)
   Placing the SVG at the old machine rect (left -6.953% / top 6.720% /
   width 113.780% of the stage, aspect-ratio 520/301) puts that screen at
   stage x 50.6-739.4 / y 76.6-505.9 — inside 1px of the Figma display rect,
   so every card % below is unchanged from the pre-swap build.

   BREAK-OUT. .home-swift-overlay is inset:0 on the stage, a SIBLING of the
   frame, stacked above it, and has no overflow. The ETL card starts at stage
   x=19 (outer bezel starts at x=30) and the KPI card ends at x=773 (bezel
   ends at 760, screen at 739) — both deliberately outside the machine. NOTHING
   here may ever clip the overlay to the screen rect.

   SCALE. One locally-defined unit, --hsw-u ("1u == 1px of the 791-wide design
   stage"), derived from the stage's container inline size and floored, drives
   the card base font-size and radius; every card internal is `em` off that
   base, so the whole dashboard scales as a single piece with the frame. The
   breakpoints below additionally stop the flex row from starving the frame in
   the tablet / small-laptop band, which is what actually produced the old
   6.4-9.5px type there.
   ============================================================ */

/* ---------- Section frame: bleeds to the viewport's right edge ----------
   Live 19c9cc36: padding 88px 0 88px 80px (right padding ZERO), min-height
   80vh, justify-content space-between, mockup pushed flex-end. Figma: copy
   549px at x=80, mockup 791px at x=649 whose right edge is exactly the 1440
   frame edge, with the laptop running 54px past it. */
.home-page section.home-swift { padding: 88px 0 88px 80px; }
.home-swift .home-inner {
  max-width: none;
  margin: 0;
  gap: 40px;
  align-items: center;
  justify-content: space-between;
  min-height: 80vh;
}
.home-swift .home-product-copy { flex: 0 1 549px; max-width: 549px; min-width: 0; }
/* flex-basis is the STAGE's own design width, not the old 560px: the mockup
   must lose width at the same rate as the copy column instead of being the
   only thing that shrinks. This is the primary tablet-band legibility fix. */
.home-swift .home-product-mockup {
  flex: 1 1 791px;
  min-width: 0;
  justify-content: flex-end;
  align-items: center;
}
.home-swift .home-swift-mockup { width: 100%; display: flex; justify-content: flex-end; }

/* ---------- Copy column typography ----------
   Figma/live: logo 300px wide, 32px above the heading; h2 24px/700/30px;
   body 18px/400/1.3 in #1e2e4c (NOT the muted grey the shared rule applies);
   12px heading->body, 32px body->button. */
.home-swift .home-product-logo { width: 300px; max-width: 100%; margin: 0 0 32px; }
.home-swift .home-product-copy h2 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
  margin: 0 0 12px;
}
.home-swift .home-product-copy p {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--home-primary-dark);
  margin: 0 0 32px;
}

/* ---------- "Dive In" — gradient-bordered ghost button ----------
   Live fcb67d5: 3px transparent border with border-image
   linear-gradient(90deg,#47B0A3,#4FB799,#4CC86F,#84BA4C), radius 2px,
   17px/800, padding 16px 26px, glow 0 0 25px 2px rgba(155,193,150,.5).
   Deliberately NOT .home-btn/.home-btn--solid — the shared rules paint a
   solid navy block, and they are left untouched for the other sections. */
.home-swift-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 26px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 800;
  line-height: 24px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--home-primary-dark);
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(7.58px);
  backdrop-filter: blur(7.58px);
  border: 3px solid transparent;
  border-radius: 2px;
  border-image: linear-gradient(90deg, #47B0A3 0%, #4FB799 30.43%, #4CC86F 77.4%, #84BA4C 100%) 1;
  box-shadow: 0 0 25px 2px rgba(155, 193, 150, 0.5);
  cursor: pointer;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.home-swift-btn:hover,
.home-swift-btn:focus-visible {
  box-shadow: 0 0 34px 4px rgba(155, 193, 150, 0.72);
  transform: translateY(-1px);
}

/* ---------- The 791x625 composition stage ----------
   This — not the laptop display — is the coordinate space every card rect is
   expressed in. container-type:inline-size makes the stage the query
   container for --hsw-u, and applies layout/style/inline-size containment
   only: it does NOT paint-contain, so the frame is free to overhang the
   stage on the right and be cropped at the viewport edge by .home-page's own
   overflow-x:hidden, and the break-out cards are never clipped. */
.home-swift-stage {
  /* 1u == 1px of the 791-wide design stage. The px floor is a safety net:
     under the breakpoints below the natural value never drops beneath
     ~0.95px (base 10.45px), so the floor only engages if some future column
     change squeezes the frame further. 11 * 0.855px = 9.4px base. */
  --hsw-u: max(0.126422cqw, 0.855px);

  position: relative;
  width: 791px;
  max-width: 100%;
  aspect-ratio: 791 / 625;
  container-type: inline-size;
  flex: 0 1 auto;
}
.home-swift-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Laptop frame: the exported 520x301 vector ----------
   Placed at the Figma machine rect. aspect-ratio 520/301 rather than an
   explicit height so the box can never disagree with the artwork's own
   ratio (900 / 1.72757 = 521.0px at design size, i.e. 1px shorter than the
   old CSS machine — no card is affected). The drop-shadow is NOT chrome:
   the SVG carries the base's own contact sliver but no soft ground shadow,
   and without one the machine reads as pasted on. */
.home-swift-frame {
  position: absolute;
  left: -6.953%;      /* -55 / 791 */
  top: 6.720%;        /*  42 / 625 */
  width: 113.780%;    /* 900 / 791 */
  aspect-ratio: 520 / 301;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 calc(18 * var(--hsw-u, 1px)) calc(26 * var(--hsw-u, 1px)) rgba(30, 46, 76, 0.16));
}
/* Fills the frame box exactly. The artwork carries preserveAspectRatio="none",
   and the box ratio IS the artwork ratio, so there is no stretch and no
   letterboxing — the measured screen % below stay exact.
   Two classes so this beats the shared `.home-page img { height: auto }`. */
.home-swift-frame .home-swift-frame-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
}

/* Display surface — the measured interior of the artwork, 398x248 at
   left 11.731% / top 6.645% / width 76.538% of the frame. The SVG's own
   screen (Vector_8) is plain white; this only lays the design's faint
   screen tint over it. No bezel ring, no inset depth, no glare — the
   artwork already draws all three. */
.home-swift-screen {
  position: absolute;
  left: 11.731%;
  top: 6.645%;
  width: 76.538%;
  aspect-ratio: 398 / 248;   /* => height 82.392% of the frame */
  z-index: 2;
  display: block;
  background: linear-gradient(158deg, #FFFFFF 0%, #F7FAFC 62%, #EFF4F8 100%);
}

/* ---------- Unclipped card overlay ----------
   Sibling of the frame, inset:0 on the stage, stacked above it. No overflow
   and no clip-path, ever: the ETL and KPI cards break out of the bezel on
   purpose. */
.home-swift-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
}

/* ---------- Dashboard cards ----------
   Absolutely positioned against the STAGE (the overlay is inset:0, so the
   coordinate space is identical). ~12px radius per the Figma rasters; the
   base size is the one shared unit, everything inside is `em` off it. */
.home-swift-card {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  border-radius: calc(12 * var(--hsw-u, 1px));
  box-shadow: var(--home-shadow-elevation-4);
  padding: 1.15em 1.35em;
  overflow: hidden;
  opacity: 1;
  font-size: 11px;                          /* fallback: no container queries */
  font-size: calc(11 * var(--hsw-u, 1px));  /* == 11px at a full-size stage */
  line-height: 1.3;
  color: var(--home-text);
  will-change: transform, opacity;
}
/* The two break-out cards ride in front of everything else in the overlay. */
.home-swift-card--etl,
.home-swift-card--kpi { z-index: 2; }

/* Titles render in full — no nowrap/ellipsis. "Real-Time Data Flow
   Visualization" was previously at risk of truncating, which never happens in
   the design. */
.home-swift-card-title {
  font-size: 1.25em;
  font-weight: 700;
  line-height: 1.25;
  color: var(--home-text);
  margin: 0 0 0.85em;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* Card 1 — ETL Pipeline Status. Title + bar only (no "Completion" caption,
   no numeric readout — neither exists in Figma). Two-tone fill: both layers
   are .home-bar-fill so home-test.js drives them off the same scroll
   progress; the teal->green segment (27) paints over the lighter green one
   (44), giving the design's split at every p. */
.home-swift-card--etl { justify-content: center; }
.home-swift-card--etl .home-swift-card-title { margin-bottom: 1.1em; }
.home-swift-etl-track {
  position: relative;
  height: 0.95em;
  border-radius: 999px;
  background: #ECF0F4;
  overflow: hidden;
}
.home-swift-etl-track > .home-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 999px;
}
.home-swift-etl-fill-b { z-index: 1; background: linear-gradient(90deg, #7FD48A 0%, #A6DE6B 100%); }
.home-swift-etl-fill-a { z-index: 2; background: linear-gradient(90deg, #47B0A3 0%, #4CC86F 100%); }

/* Card 2 — Real-Time Data Flow Visualization. Inset light panel + 12
   pictogram nodes + curved bezier connectors. The panel's 314/190 ratio
   matches the connector viewBox, so nodes (positioned in %) and paths
   (in viewBox units) stay registered at every stage size. */
.home-swift-panel {
  position: relative;
  width: 100%;
  flex: 0 0 auto;          /* never let flex-shrink squash the ratio */
  aspect-ratio: 314 / 190;
  background: #FBFDFC;
  border: 1px solid #E4EDE8;
  border-radius: 0.75em;
  overflow: hidden;
}
.home-swift-node-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.home-swift-node-lines path {
  fill: none;
  stroke: #7FCBAE;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.home-swift-arrowhead { stroke-width: 1.6; }
.home-swift-node {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 2.1em;
  height: 2.1em;
  border-radius: 50%;
  background: linear-gradient(135deg, #6AC2B6 0%, #7ACFAA 52%, #8FD48C 100%);
  border: 1px solid #3FA98D;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 0.22em rgba(217, 242, 231, 0.9), 0 1px 3px rgba(20, 60, 48, 0.18);
  opacity: 1;
}
.home-swift-node .home-swift-ico { width: 1.25em; height: 1.25em; }
.home-swift-ico {
  display: block;
  fill: none;
  stroke: #fff;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

/* Card 3 — Data Quality Metrics. Shared .home-donut--half arc + a needle and
   a pivot; labels are INLINE ("95%" green, "Accuracy" navy) on one line, not
   stacked. The needle's rotate() is driven from the same scroll progress as
   the arc by initHomeSwiftScroll(); its CSS resting angle is the 0% position. */
.home-swift-gauge-row {
  display: flex;
  gap: 0.9em;
  align-items: flex-start;
  justify-content: space-around;
  margin-top: auto;
  margin-bottom: auto;
}
.home-swift-gauge { display: flex; flex-direction: column; align-items: center; }
.home-swift-dial { position: relative; width: 8em; height: 4em; }
.home-swift-dial .home-donut { position: absolute; left: 0; top: 0; width: 8em; height: 4em; }
.home-swift-dial .home-donut svg { width: 8em; height: 8em; }
.home-swift-arc-track { stroke: #E5EAEF; }
.home-swift-needle {
  position: absolute;
  left: 50%;
  bottom: 0.18em;
  width: 0.19em;
  height: 2.55em;
  background: linear-gradient(180deg, #16233C 0%, #1E2E4C 100%);
  border-radius: 0.1em 0.1em 0 0;
  transform-origin: 50% 100%;
  transform: translateX(-50%) rotate(-90deg);
  z-index: 3;
}
.home-swift-pivot {
  position: absolute;
  left: 50%;
  bottom: 0.18em;
  width: 0.62em;
  height: 0.62em;
  border-radius: 50%;
  background: #1E2E4C;
  box-shadow: 0 0 0 0.14em #fff;
  transform: translate(-50%, 50%);
  z-index: 4;
}
.home-swift-gauge-label {
  margin-top: 0.5em;
  font-size: 1.05em;
  font-weight: 500;
  line-height: 1.2;
  color: var(--home-text);
  text-align: center;
  white-space: nowrap;
}
.home-swift-gauge-label b { font-weight: 700; color: #35A96A; }

/* Card 4 — Integration Efficiency KPIs. Each KPI in its OWN rounded light
   sub-card, the two sitting SIDE BY SIDE. */
.home-swift-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85em;
  margin-top: auto;
  margin-bottom: auto;
}
.home-swift-kpi {
  display: flex;
  align-items: center;
  gap: 0.65em;
  padding: 0.7em 0.8em;
  background: #F6F9FB;
  border: 1px solid #E7EDF3;
  border-radius: 0.8em;
  min-width: 0;
}
.home-swift-check-badge {
  flex: 0 0 auto;
  width: 2.35em;
  height: 2.35em;
  border-radius: 50%;
  background: var(--home-gradient-teal-green-diag);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(35, 57, 99, 0.18);
}
.home-swift-check-badge svg { width: 1.35em; height: 1.35em; display: block; }
.home-swift-kpi-meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.home-swift-kpi-meta strong { font-size: 1.32em; font-weight: 700; color: var(--home-text); }
.home-swift-kpi-meta span { font-size: 0.95em; color: var(--home-text-muted); }

/* Card 5 — Sources Systems: 2x2 grid of larger gradient pictogram badges. */
.home-swift-source-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85em 1.2em;
  margin-top: auto;
  margin-bottom: auto;
}
.home-swift-source-item { display: flex; align-items: center; gap: 0.65em; min-width: 0; }
.home-swift-icon-badge {
  flex: 0 0 auto;
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  background: var(--home-gradient-teal-green-diag);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(35, 57, 99, 0.18);
}
.home-swift-icon-badge .home-swift-ico { width: 1.3em; height: 1.3em; }
.home-swift-source-item > span:last-child {
  font-size: 1em;
  line-height: 1.15;
  color: var(--home-text-muted);
}

/* ---------- Stat pairs: live's rk-tooltip-card-wrapper glass stack ----------
   HIDDEN at every width (a later rule in this stylesheet enforces it with
   !important). Kept declared so re-enabling is a one-line change and so
   initHomeSwiftScroll()'s tip loop keeps a defined resting state. */
.home-swift-tips {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(calc(-50% - 32px));
  width: 216px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  z-index: 6;
  pointer-events: none;
}
.home-swift-tip {
  position: relative;
  width: 216px;
  padding: 14px 20px 14px 43px;
  border-radius: 8px;
  overflow: hidden;
  text-align: left;
  opacity: 1;
  box-shadow: 0 8px 24px rgba(35, 57, 99, 0.10);
  will-change: transform, opacity;
}
.home-swift-tip::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: linear-gradient(45deg,
    rgba(244, 246, 249, 0) 0%,
    rgba(244, 246, 249, 0.80) 54.33%,
    rgba(244, 246, 249, 0.88) 63.46%,
    rgba(244, 246, 249, 0.90) 76.44%,
    #F4F6F9 100%);
}
.home-swift-tip > span { position: relative; z-index: 1; display: block; }
.home-swift-tip-value { font-size: 18px; font-weight: 500; line-height: 1.3; color: var(--home-primary); }
.home-swift-tip-label { font-size: 14px; font-weight: 400; line-height: 1.3; color: var(--home-primary); }

/* ---------- Breakpoints ---------- */

/* 1280-1439.98: the two-column split is what starves the frame. Trimming the
   copy column's basis from 549 to 430 keeps the stage at 751px minimum, i.e.
   a 10.45px card base (it was 8.5px here). */
@media (min-width: 1280.02px) and (max-width: 1439.98px) {
  .home-swift .home-product-copy { flex: 0 1 430px; max-width: 430px; }
}

/* TABLET / SMALL-LAPTOP BAND — the legibility fix.
   Below 1280 no amount of column trimming leaves room for a legible frame in
   a two-column row: at 1025px the old layout handed the mockup 481px, which
   rendered the dashboard at a 6.7px base and its smallest labels at 6.4px.
   The row therefore stacks here, exactly as the shared .home-product rule
   already does at <=1024px, which returns the stage to its full 791px design
   width and the dashboard to its designed 11px base. The laptop is still
   shown, at full size, with nothing hidden; the mockup stays flex-end so it
   still bleeds 54px past the right viewport edge. */
@media (max-width: 1280px) {
  .home-swift-tips { display: none; }

  .home-swift.home-product .home-inner {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 0;
    gap: 40px;
  }
  /* In a column container flex-basis is the BLOCK size — the desktop
     `flex: 0 1 549px` would set a 549px height. Reset both children. */
  .home-swift .home-product-copy { flex: 0 0 auto; max-width: 640px; }
  .home-swift .home-product-mockup { flex: 0 0 auto; width: 100%; }
  .home-swift .home-swift-mockup { justify-content: flex-end; }
}

@media (max-width: 1200px) {
  .home-page section.home-swift { padding: 72px 0 72px 40px; }
  .home-swift .home-inner { gap: 32px; }
}

/* Mobile / narrow tablet. Live drops the laptop entirely rather than shipping
   an unreadable sub-10px dashboard. Here the frame, the screen surface and
   the tooltip stack are dropped and the overlay becomes a normal, readable
   vertical stack of the five cards — the charts keep animating and nothing
   renders at 8.5px. The inline left/top/width/height need !important because
   they are inline styles. --hsw-u is pinned to 1px because there is no query
   container in this mode, so any calc(N * var(--hsw-u)) falls back to design
   px instead of resolving cqw against the viewport. */
@media (max-width: 1024px) {
  .home-page section.home-swift { padding: 64px 24px; }
  .home-swift .home-inner { min-height: 0; gap: 40px; }
  .home-swift .home-product-copy { flex: 1 1 auto; max-width: 100%; }
  .home-swift .home-product-mockup { flex: 1 1 auto; justify-content: center; }
  .home-swift .home-swift-mockup { justify-content: center; }

  .home-swift-stage {
    --hsw-u: 1px;
    width: 100%;
    max-width: 560px;
    aspect-ratio: auto;
    container-type: normal;
    margin: 0 auto;
    display: block;
  }
  .home-page .home-swift-frame,
  .home-page .home-swift-screen,
  .home-page .home-swift-tips { display: none; }

  .home-swift-overlay {
    position: static;
    inset: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .home-swift-card {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    font-size: 14px;
    padding: 18px 20px;
    border-radius: 12px;
    transform: none !important;
    opacity: 1 !important;
  }
  .home-swift-card-title { margin-bottom: 0.9em; }
  .home-swift-etl-track { height: 0.75em; }
  .home-swift-gauge-row,
  .home-swift-kpi-grid,
  .home-swift-source-grid { margin-top: 0; margin-bottom: 0; }
}

@media (max-width: 900px) {
  .home-page section.home-swift { padding: 56px 20px; }
}

@media (max-width: 560px) {
  .home-swift .home-product-copy h2 { font-size: 22px; line-height: 28px; }
  .home-swift .home-product-copy p { font-size: 16px; }
  .home-swift-card { font-size: 12.5px; padding: 16px 16px; }
  .home-swift-kpi-grid { grid-template-columns: 1fr; }
  .home-swift-source-grid { grid-template-columns: 1fr; }
  .home-swift-btn { padding: 14px 22px; font-size: 16px; }
}

/* Reduced motion: home-test.js already pins the shared registry to p=1, but
   the per-card / per-node transforms this section adds need pinning too.
   The needles are deliberately NOT pinned here — register() applies p=1 on
   registration under reduced motion, which lands each needle on its own
   correct angle; an !important rule would clobber that with a single shared
   one. */
@media (prefers-reduced-motion: reduce) {
  .home-swift-card,
  .home-swift-tip { transform: none !important; opacity: 1 !important; }
  .home-swift-node { transform: translate(-50%, -50%) !important; opacity: 1 !important; }
}

/* ============================================================
   Section 6 — Our Impact Across Industries.  FULL REPLACEMENT for the
   previous "Section 6" block (delete the old one — see integration notes).

   Figma 550:585 is a macOS browser-window mockup: chrome strip, #1E2E4C frame
   with border-radius 0 0 24px 24px, an #F4F6F9 186px header band holding the
   42px/700 h2, then the 634px 4-tab accordion. The open 860x556 pane carries
   2-4 free-floating white infographic cards (Fluffy/Elevation 4 shadow) that
   overlap each other and the "Outcome Achieved" checklist.

   Card offsets are Figma-exact — x/y/w/h inside the 860x556 pane expressed as
   percentages of it, so they hold at any active-tab width. All chart values
   are driven from scroll position by home-test.js, so nothing here declares a
   transition on width/height/stroke.
   ============================================================ */

/* ---- section shell + live's mountain-contour pattern ---- */
.home-page section.home-impact {
  background-color: #fff;
  background-image: none;
  padding-bottom: 0;
  overflow: hidden;
}
/* The drifting layer is deliberately narrow: updatePatterns() writes
   translateX(-33% * progress) and that % is relative to the LAYER's own width,
   so a 30% layer yields a ~10%-of-section drift instead of sliding the
   artwork off-screen. The artwork itself is a child scaled back to 100% of the
   section and object-fit:contain / top-left, which reproduces live's
   `background: top left / contain no-repeat`. */
.home-impact > .home-pattern-layer {
  width: 30%;
  height: 100%;
  opacity: 1;
  background: none;
  overflow: visible;
}
/* `.home-impact ` prefixes on the <img> rules below are load-bearing: the
   shared `.home-page img` rule is (0,1,1), so an unprefixed class would lose. */
.home-impact .home-impact-bg-art {
  position: absolute;
  top: 0;
  left: 0;
  /* 333.3333% of the 30%-wide layer used to be exactly 100% of the section —
     which meant that as updatePatterns() drifted the layer left by up to
     -33% of its own width (~10% of the section), the artwork's right edge came
     with it and left the right ~10% of the section bare. That was the reported
     "cutting off right side". Overshoot by 20% of the section so the artwork
     still covers the full width at maximum drift. */
  width: 400%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: top left;
  opacity: 0.85;
  pointer-events: none;
}
/* Closing band at the foot of the section. This must read as the SAME
   continuous backdrop the next section (.home-articles) carries, not as a
   separate cropped strip — previously it was an <img> with object-fit:cover
   while Articles renders the identical artwork as a repeating background at
   170% width and opacity 0.28, so the two never lined up and a visible seam
   sat on the boundary.

   It is now a background-image band using Articles' exact rendering
   (background-size:contain, repeat, opacity .28, same horizontal origin) and
   sits flush against the section's bottom edge, so the pattern carries
   straight on into Articles with nothing between them. */
.home-impact .home-impact-foot-pattern {
  display: block;
  position: relative;
  z-index: 0;
  width: calc(100% + 8vw);
  max-width: none;
  /* margin: 72px -4vw 0; */
  height: clamp(180px, 22vw, 380px);
  background-repeat: repeat;
  background-size: contain;
  background-position: left bottom;
  opacity: 0.28;
  pointer-events: none;
}

/* ---- macOS browser-window frame ---- */
.home-impact-window {
  position: relative;
  background: #1E2E4C;
  border-radius: 12px 12px 24px 24px;
  overflow: hidden;
  box-shadow: var(--home-shadow-elevation-4);
}
.home-impact .home-impact-chrome { display: block; width: 100%; height: auto; }

.home-impact-titlebar {
  display: flex;
  align-items: center;
  min-height: 186px;
  padding: 32px;
  background: var(--home-neutral-9);
  border-bottom: 1px solid var(--home-border);
}
.home-impact .home-impact-title {
  margin: 0;
  max-width: 490px;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--home-text);
}

/* ---- 4-tab vertical accordion (DOM contract driven by initHomeVerticalTabs) ----
   10% / 70% to match the shipped page; computeActiveWidth() derives the active
   value from the inactive one, so only the first var needs to change. */
:root {
  --home-rk-inactive-tab-width: 10%;
  --home-rk-active-tab-width: 70%;
}

.home-impact .rk-vertical-tabs-wrapper {
  display: flex;
  width: 100%;
  min-height: 540px;
  overflow: hidden;
  background: var(--home-neutral-9);
  border: 1px solid var(--home-border);
}

.home-impact .rm-column-tab { position: relative; display: flex; }

@media (min-width: 1024.02px) {
  .home-impact .rm-column-tab {
    width: var(--home-rk-inactive-tab-width);
    transition: width 1s ease-in-out;
  }
  .home-impact .rm-column-tab.active { width: var(--home-rk-active-tab-width); }
}

.home-impact .rk-column-title-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  min-height: 634px;
  padding: 20px 8px;
  background: var(--home-neutral-9);
  border-left: 1px solid var(--home-border);
  cursor: pointer;
  flex-shrink: 0;
}
.home-impact .rm-column-tab.active .rk-column-title-wrapper { display: none; }
/* Figma darkens the rail edge that touches the open tab. */
.home-impact .rm-column-tab.active + .rm-column-tab .rk-column-title-wrapper {
  border-left-color: #657592;
}

@media (min-width: 1024.02px) {
  .home-impact .rm-column-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    font-weight: 600;
    color: var(--home-text);
  }
  .home-impact .rm-column-title .home-tab-num { font-size: 32px; line-height: 1; }
  .home-impact .rm-column-title .home-tab-name {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    font-size: 32px;
  }
  /* live uses sideways-lr; keep vertical-rl+rotate as the fallback so glyph
     baselines match wherever it is supported. */
  @supports (writing-mode: sideways-lr) {
    .home-impact .rm-column-title .home-tab-name {
      writing-mode: sideways-lr;
      transform: none;
    }
  }
}

.home-impact .rk-column-inner-tab {
  position: relative;
  width: 100%;
  max-width: 0;
  height: 0;
  overflow: hidden;
  background-color: #fff;
  background-image: none;
  transition: max-width 1s ease-in-out, opacity 0.5s ease-in-out;
}
.home-impact .rk-column-inner-tab.active { max-width: 100%; height: auto; }

.home-impact .rk-inner-heading-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  padding: 0 32px;
  border-bottom: 1px solid var(--home-border);
}
.home-impact .rk-inner-heading-wrapper h3 {
  margin: 0;
  font-size: 32px;
  font-weight: 600;
  color: var(--home-text);
  white-space: nowrap;
}
.home-impact .rk-inner-heading-wrapper .home-tab-num {
  font-size: 32px;
  font-weight: 600;
  color: var(--home-text);
}

/* The pane IS the Figma 860x556 frame: 39px padding, 556px min-height. */
.home-impact .rk-inner-tab-content {
  position: relative;
  min-height: 556px;
  padding: 39px;
}

.home-tab-01 .rk-inner-heading-wrapper { background: var(--home-tab-01-bg); }
.home-tab-01 .rk-inner-tab-content { background-color: #FEFAFF; }
.home-tab-02 .rk-inner-heading-wrapper { background: var(--home-tab-02-bg); }
.home-tab-02 .rk-inner-tab-content { background-color: #FFFBF5; }
.home-tab-03 .rk-inner-heading-wrapper { background: var(--home-tab-03-bg); }
.home-tab-03 .rk-inner-tab-content { background-color: #F5FEFF; }
.home-tab-04 .rk-inner-heading-wrapper { background: var(--home-tab-04-bg); }
.home-tab-04 .rk-inner-tab-content { background-color: #FFF5F5; }

/* ---- "Outcome Achieved" checklist (left column of the pane) ---- */
.home-impact-outcomes { position: relative; z-index: 1; max-width: 440px; }
.home-outcome-label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--home-text);
  margin-bottom: 16px;
}
.home-impact-outcome-list { list-style: none; margin: 0; padding: 0; }
.home-impact-outcome-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--home-text);
  margin-bottom: 9px;
}
/* The real fa-circle-check SVG replaces the old content:"\2713" pseudo-element;
   neutralised here so the two can never both render. */
.home-impact-outcome-list li::before { content: none; }
.home-impact-check { flex: 0 0 auto; display: block; }

/* ---- floating infographic card layer ---- */
.home-impact-cards {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.home-impact-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 12px 14px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 35px 0 rgba(35, 57, 99, 0.12);
  pointer-events: auto;
  will-change: transform, opacity;
}
.home-impact-card-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--home-text);
}
.home-impact-card-title--b { font-weight: 700; }
.home-impact-card-title--lg { font-size: 16px; font-weight: 700; }
/* image-399's title is measured 16px/600, not 16px/700 like the other big ones */
.home-impact-card-title--sb { font-weight: 600; }

.home-impact-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.home-impact-row--split { align-items: flex-start; justify-content: space-around; gap: 8px; }

.home-impact-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.home-impact-card-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--home-text);
}

/* Figma card geometry: left/top/width are x/y/w over the 860x556 pane. */
.home-impact-card--402 { left: 45.87%; top: 16.55%; width: 27.21%; min-height: 145px; }
.home-impact-card--401 { left: 61.57%; top: 37.77%; width: 35.00%; min-height: 217px; }
.home-impact-card--400 { left: 10.64%; top: 43.88%; width: 37.33%; min-height: 149px; }
.home-impact-card--399 { left: 27.85%; top: 76.80%; width: 67.56%; min-height: 101px; }
.home-impact-card--403 { left: 59.77%; top: 13.31%; width: 33.84%; min-height: 232px; }
.home-impact-card--404 { left: 29.19%; top: 50.90%; width: 49.07%; min-height: 239px; }
.home-impact-card--406 { left: 56.28%; top:  5.76%; width: 41.51%; min-height: 142px; }
.home-impact-card--407 { left: 52.44%; top: 40.47%; width: 36.63%; min-height: 178px; }
.home-impact-card--405 { left:  1.74%; top: 55.22%; width: 48.14%; min-height: 195px; }
.home-impact-card--408 { left: 48.26%; top: 78.78%; width: 25.93%; min-height: 104px; }
.home-impact-card--409 { left: 51.16%; top: 15.47%; width: 45.12%; min-height: 184px; }
.home-impact-card--410 { left:  7.44%; top: 35.79%; width: 37.79%; min-height: 157px; }
.home-impact-card--411 { left: 26.28%; top: 60.43%; width: 67.09%; min-height: 185px; }

/* ---- donuts ----
   Every donut in this section starts at 6 o'clock and sweeps CLOCKWISE
   (verified against the mathematically exact 50%/45% KPI arcs on image-404),
   which is rotate(90deg) rather than the page default rotate(-90deg). */
.home-impact .home-donut svg { width: 100%; height: 100%; display: block; transform: rotate(90deg); }
.home-impact-donut { flex: 0 0 auto; }
.home-impact-donut-value { line-height: 1; }
.home-impact-donut--402 { width: 84px; height: 84px; }
.home-impact-donut--402 .home-impact-donut-value { font-size: 20px; }
.home-impact-donut--401 { width: 86px; height: 86px; }
.home-impact-donut--401 .home-impact-donut-value { font-size: 16px; }
.home-impact-donut--404 { width: 104px; height: 104px; }
.home-impact-donut--411 { width: 100px; height: 100px; }
.home-impact-donut--411 .home-impact-donut-value { font-size: 22px; }
/* image-404's arcs are measured exact (50.1 / 44.6) — butt caps, no round
   overshoot, unlike the softer purple/crimson donuts. */
.home-impact-donut--flat circle.home-donut-fill { stroke-linecap: butt; }

.home-impact-legend-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  line-height: 1.2;
  color: #4A5A78;
}
.home-impact-donut-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.home-impact-donut-label {
  font-size: 12px;
  line-height: 1.2;
  color: #4A5A78;
  text-align: center;
}
.home-impact-kpi {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}
.home-impact-kpi-value { font-size: 16px; font-weight: 700; color: var(--home-text); }
.home-impact-kpi-label { font-size: 13px; line-height: 1.25; color: #3A4A66; }

/* ---- image-399: 81% compliance-workflow progress bar ----
   21px tall, square ends, gradient painted at a FIXED pixel width (set from
   the track width by updateHomeImpact) so it does not stretch as the fill
   grows; the px fallback below matches the Figma track width. */
.home-impact-progress { padding: 2px 16px 4px 24px; }
.home-impact-progress .home-bar-track {
  height: 21px;
  border-radius: 0;
  background: var(--home-track);
}
.home-impact-progress .home-bar-fill {
  border-radius: 0;
  background-color: transparent;
  background-image: linear-gradient(90deg, #6626A5 0%, #B524E3 100%);
  background-repeat: no-repeat;
  background-size: 438px 100%;
}

/* ---- 7-bar column charts (image-405 ascending, image-409 descending) ----
   Native Figma geometry: 964px plot, 78px bars, 38px gaps -> 8.1% / 3.9%. */
.home-impact-chart { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.home-impact-plot { position: relative; flex: 1 1 auto; min-height: 84px; }
.home-impact-grid {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}
.home-impact-grid i { display: block; height: 1px; background: #E8EBEF; }
.home-impact-cols {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  gap: 4.4%;
  /* headroom for the value labels that sit above the bars */
  padding: 16px 9% 0;
}
.home-impact-plot--below .home-impact-cols { padding-top: 0; }
.home-impact-col {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
.home-impact-col-val {
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 1;
  margin-bottom: 3px;
  color: var(--home-text);
}
.home-impact-col-bar { flex: 0 0 auto; width: 100%; height: 0; border-radius: 2px 2px 0 0; }
.home-impact-axis { height: 2px; background: var(--home-text); }
.home-impact-xlabels { display: flex; gap: 4.4%; padding: 4px 9% 0; }
.home-impact-xlabels span {
  flex: 1 1 0;
  min-width: 0;
  display: block;
  text-align: center;
  font-size: 11px;
  line-height: 1;
  color: var(--home-text);
}
.home-impact-chart-legend {
  display: flex;
  gap: 14px;
  margin-top: 6px;
  font-size: 11px;
  color: #4A5A78;
}
.home-impact-chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.home-impact-chart-legend i { display: block; width: 8px; height: 8px; border-radius: 50%; }
.home-impact-pill {
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 8px;
  background: #FDE8E8;
  color: #943030;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

/* ---- image-407: SOLID pie (not a donut) ----
   from 180deg = the dark slice starts at 6 o'clock and sweeps clockwise;
   --home-impact-pie is written per frame (100 -> 60.5) by updateHomeImpact. */
.home-impact-pie {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: conic-gradient(from 180deg,
    #039EB2 0 var(--home-impact-pie, 60.5%),
    #39CCDE var(--home-impact-pie, 60.5%) 100%);
  box-shadow: 0 0 0 4px #fff, 0 4px 16px rgba(35, 57, 99, 0.16);
}
.home-impact-pie-legend {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  line-height: 1.25;
  color: #3A4A66;
}

/* ---- image-403: world map + pins ---- */
.home-impact-map-wrap { display: flex; align-items: center; flex: 1 1 auto; }
.home-impact-map { width: 100%; height: auto; display: block; }

/* ---- image-411: crimson donut + 9-point line/area chart ---- */
.home-impact-card--411 { flex-direction: row; align-items: center; gap: 14px; }
.home-impact-411-left {
  flex: 0 0 33%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.home-impact-411-right { flex: 1 1 auto; min-width: 0; position: relative; }
.home-impact-line { display: block; width: 100%; height: auto; margin-top: 4px; }
.home-impact-uptrend {
  position: absolute;
  right: 2px;
  bottom: -2px;
  font-size: 12px;
  font-weight: 700;
  color: #E74C4C;
}

/* smaller type in the two most cramped cards */
.home-impact-card--408 .home-impact-card-list li { font-size: 12px; }
.home-impact-card--406 .home-impact-card-list li { font-size: 12px; }

/* ---- tablet / mobile: the accordion stacks and the cards un-float ---- */
@media (max-width: 1024px) {
  .home-impact .home-impact-chrome { display: none; }

  /* PLACEHOLDER, pending an iPhone/iPad top-bar asset from the user — same
     treatment already applied to the sibling mac-frame on
     /capabilities/risk-management/.
     .home-impact-window is a navy #1E2E4C browser-window frame whose visible
     top edge IS the chrome image; with that hidden the light #F4F6F9 titlebar
     butts flush against the window's top (measured gap: 0px) and the card
     reads as open at the top. Close it with the window's own frame colour.
     Once a real mobile device frame lands, drop this and render that image in
     the .home-impact-chrome slot at this breakpoint instead. */
  .home-impact-window { border-radius: 8px 8px 16px 16px; border-top: 4px solid var(--home-text); }
  .home-impact-titlebar { min-height: 0; padding: 24px 20px; }
  .home-impact .home-impact-title { font-size: 30px; }
  .home-impact .home-impact-foot-pattern { width: calc(100% + 40px); margin: 56px -20px 0; height: clamp(120px, 34vw, 220px); }

  .home-impact .rk-vertical-tabs-wrapper { flex-direction: column; min-height: 0; }
  .home-impact .rm-column-tab { width: 100% !important; flex-direction: column; }
  .home-impact .rk-column-title-wrapper {
    min-height: 0;
    padding: 16px;
    border-left: none;
    border-top: 1px solid var(--home-border);
  }
  /* on mobile the rail IS the accordion toggle, so it must stay visible when
     the tab is open or there is no way to collapse it again */
  .home-impact .rm-column-tab.active .rk-column-title-wrapper { display: flex; }
  .home-impact .rm-column-title {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center;
    width: 100%;
    gap: 16px !important;
  }
  .home-impact .rm-column-title .home-tab-name {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    font-size: 20px !important;
  }
  .home-impact .rm-column-title .home-tab-num { font-size: 20px !important; }

  .home-impact .rk-column-inner-tab {
    max-width: none !important;
    height: 0;
    opacity: 0;
    transition: height 0.5s ease-in-out, opacity 0.3s ease-in-out;
  }
  .home-impact .rk-column-inner-tab.active { height: auto; opacity: 1; }
  .home-impact .rk-inner-heading-wrapper { height: auto; padding: 16px 20px; }
  .home-impact .rk-inner-heading-wrapper h3 { font-size: 22px; white-space: normal; }
  .home-impact .rk-inner-heading-wrapper .home-tab-num { font-size: 22px; }

  .home-impact .rk-inner-tab-content { min-height: 0; padding: 20px; }
  .home-impact .home-impact-outcomes { max-width: none; }
  .home-impact .home-impact-cards {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
  }
  .home-impact .home-impact-card {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    min-height: 0;
    /* !important beats the inline transform/opacity the scroll handler writes,
       so the drift is disabled below 1025px exactly like the pattern layer */
    transform: none !important;
    opacity: 1 !important;
  }
  .home-impact .home-impact-card--411 { flex-direction: column; align-items: stretch; }
  .home-impact .home-impact-411-left { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .home-impact .home-impact-card { transform: none !important; opacity: 1 !important; }
}

/* ============================================================
   Section 7 — Explore Our Articles  (REBUILD, replaces the old block)
   Figma node 3776:23797. Flat SYMMETRIC 3-equal-column row — the previous
   asymmetric 1.3fr/1fr grid matched neither Figma nor the live style2 widget.
   Every rule here is scoped under .home-articles: the underlying component
   (inc/related-posts/related-posts.php + assets/related-posts.css) is shared
   with other pages and its base CSS is deliberately left untouched.
   NOTE for the integrator: delete the OLD "Section 7" block in this file
   (the `.home-articles { background:#fff }` comment header through the end of
   its `@media (max-width: 900px)` rule) — the defensive nth-child resets
   below exist only so this section still renders correctly if that deletion
   is missed.
   ============================================================ */

.home-page section.home-articles {
  background: #fff;
  /* Live article container padding: 55px 80px 51px (tablet 40, mobile 20).
     Beats the generic `.home-page section { padding: 96px 4vw }`. */
  padding: 55px 80px 51px;
  /* Horizontal clipping for the 170%-wide pattern layer comes from the shared
     .home-pattern-host rule — deliberately NOT `overflow: hidden` here, which
     would clip the cards' 48px pre-reveal translateY. */
}

/* Mountain-pattern backdrop, driven by the existing initHomePatternScroll()
   collector (.home-pattern-host / .home-pattern-layer, translateX only,
   auto-disabled below 1024px). Same mechanic as the hero and the final CTA. */
.home-articles .home-articles-pattern { opacity: 0.28; }

/* ---------- Header (hand-rendered here; the component's .irp-head has no
     subtitle slot, so it is suppressed rather than restyled) ---------- */
.home-articles .irp-head { display: none; }

.home-articles-head {
  display: flex;
  align-items: flex-end;          /* Figma header-1vh is items-end */
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 48px;            /* Figma root frame gap-[48px] */
}

.home-articles-headtext {
  display: flex;
  flex-direction: column;
  gap: 8px;                       /* Figma `heeader` gap-y 8px */
  flex: 1 1 auto;
  min-width: 0;
  will-change: transform, opacity;
}

.home-page .home-articles-heading {
  margin: 0;
  font-family: 'Public Sans', sans-serif;
  font-size: 42px;
  line-height: 64px;
  font-weight: 700;
  letter-spacing: -0.42px;
  color: var(--home-primary-dark);
}

.home-articles-subheading {
  margin: 0;
  font-family: 'Public Sans', sans-serif;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: -0.18px;
  color: var(--home-primary-dark);
}

/* ---------- "VIEW ALL" glassmorphic chip (Figma 3776:23801) ----------
   Square corners, 2px #6AC2B7, 12px 16px, 16px/24px weight 800 uppercase.
   --ha-glow is written by initHomeArticlesScroll() (0..1) so the outer green
   glow and the backdrop blur fade in with scroll rather than starting lit. */
.home-articles-viewall {
  --ha-glow: 1;
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border: 2px solid #6AC2B7;
  border-radius: 0;
  background-color: rgba(255, 255, 255, 0.07);
  color: var(--home-primary-dark);
  font-family: 'Public Sans', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(calc(7.58px * var(--ha-glow)));
  backdrop-filter: blur(calc(7.58px * var(--ha-glow)));
  box-shadow:
    -11.15px -10.39px calc(48px * var(--ha-glow)) rgba(51, 138, 48, 0.05),
    -1.86px -1.73px calc(12px * var(--ha-glow)) rgba(79, 173, 93, 0.15),
    inset 2.15px 2px 9.24px rgba(255, 255, 255, 0.13),
    inset 1.22px 1.13px 4.62px rgba(255, 255, 255, 0.13);
  transition: background-color 0.25s ease, border-color 0.25s ease;
  will-change: transform, opacity;
}
/* Figma's rgba(255,255,255,0.07) plus-lighter fill layer. */
.home-articles-viewall::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.07);
  mix-blend-mode: plus-lighter;
  pointer-events: none;
}
.home-articles-viewall-label { position: relative; }
.home-articles-viewall:hover,
.home-articles-viewall:focus-visible {
  background-color: rgba(106, 194, 183, 0.18);
  border-color: #4CC86F;
}
.home-articles-viewall:focus-visible {
  outline: 2px solid var(--home-primary);
  outline-offset: 3px;
}

/* ---------- Card grid: three equal columns, 32px gutters ---------- */
.home-articles .irp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: none;
  gap: 32px;
}

/* Defensive resets — neutralise the OLD asymmetric override's nth-child rules
   if that block has not been deleted yet (see note at the top). */
.home-articles .irp-grid .irp-card:nth-child(1),
.home-articles .irp-grid .irp-card:nth-child(2),
.home-articles .irp-grid .irp-card:nth-child(3) {
  grid-row: auto;
  grid-column: auto;
  height: auto;
}

.home-articles .irp-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  will-change: transform, opacity;
}

/* Figma article-image: FIXED 340px (min 192 / max 360) on a ~405px card
   — a tall ~1.19:1 crop, not the 160/220px letterbox the build had. */
.home-articles .irp-grid .irp-card:nth-child(1) .irp-card-image,
.home-articles .irp-grid .irp-card:nth-child(2) .irp-card-image,
.home-articles .irp-grid .irp-card:nth-child(3) .irp-card-image,
.home-articles .irp-card-image {
  width: 100%;
  height: 340px;
  min-height: 192px;
  max-height: 360px;
  flex: none;
  overflow: hidden;
  background: var(--home-track);
}

/* Scroll-linked image motion. The scroll engine writes the independent
   `translate` property (no transition, tracks scroll position); the hover
   affordance rides on the independent `scale` property so the two never
   overwrite each other. The component's own hover `transform: scale(1.04)`
   is neutralised at higher specificity. */
.home-articles .irp-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: none;
  scale: 1.10;
  translate: 0 0;
  transition: scale 0.35s ease;
  will-change: translate, scale;
}
.home-articles .irp-card:hover .irp-card-image img {
  transform: none;
  scale: 1.16;
}

.home-articles .irp-card-body { gap: 20px; }

.home-articles .irp-card-title {
  font-size: 24px;
  line-height: 32px;              /* Figma hard 32px, not 1.3 */
  font-weight: 700;
  color: var(--home-primary-dark);
  /* Real titles here run 100+ chars; reserve both lines so all three meta
     rows sit on the same baseline. */
  min-height: 64px;
}

.home-articles .irp-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Figma pill: square corners, 3px 12px, 14px/20px regular #1e2e4c.
   Fill colour still comes from the component's inline style — see
   integration_notes, it is index-bound and breaks on real data. */
.home-articles .irp-card-pill {
  padding: 3px 12px;
  border-radius: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--home-primary-dark);
  transform-origin: left center;
  will-change: transform, opacity;
}

/* Figma's date node (3776:23812) has a transparent fill — invisible by
   design; live emits no date at all. Kept in flow only as the
   justify-content: space-between spacer Figma relies on. */
.home-articles .irp-card-date {
  visibility: hidden;
  color: transparent;
}

/* ---------- Responsive: 3 -> 2 -> 1, keeping the 340px crop until the
     single-column step (Figma cards are min-w-[343px] in a flex-wrap row) --- */
@media (max-width: 1100px) {
  .home-articles .irp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .home-page section.home-articles { padding: 55px 40px 51px; }
  .home-page .home-articles-heading { font-size: 34px; line-height: 44px; }
}

@media (max-width: 900px) {
  .home-articles .irp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-articles .irp-grid .irp-card:nth-child(1) .irp-card-image,
  .home-articles .irp-grid .irp-card:nth-child(2) .irp-card-image,
  .home-articles .irp-grid .irp-card:nth-child(3) .irp-card-image {
    height: 300px;
  }
  .home-articles-head { align-items: flex-start; gap: 24px; }
}

@media (max-width: 760px) {
  .home-page section.home-articles { padding: 40px 20px; }
  .home-articles .irp-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .home-articles .irp-grid .irp-card:nth-child(1) .irp-card-image,
  .home-articles .irp-grid .irp-card:nth-child(2) .irp-card-image,
  .home-articles .irp-grid .irp-card:nth-child(3) .irp-card-image {
    height: 260px;
  }
  .home-articles-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .home-page .home-articles-heading { font-size: 28px; line-height: 36px; }
  .home-articles-subheading { font-size: 16px; }
  .home-articles .irp-card-title { font-size: 20px; line-height: 28px; min-height: 0; }
}

/* Matches the page-wide reduced-motion contract (see `.home-reveal` above):
   initHomeArticlesScroll() bails out under reduce, so nothing is left
   half-revealed. */
@media (prefers-reduced-motion: reduce) {
  .home-articles-headtext,
  .home-articles-viewall,
  .home-articles .irp-card,
  .home-articles .irp-card-pill {
    opacity: 1 !important;
    transform: none !important;
  }
  .home-articles .irp-card-image img {
    translate: 0 0 !important;
    scale: 1 !important;
    transition: none !important;
  }
}

/* ============================================================
   Section 8 — Final CTA. REBUILT against the fidelity audit.
   All rules are scoped under .home-cta: the [intone_cta] component
   (inc/cta-banner/) is shared with several other pages and is not
   touched. New classes are .home-cta-* prefixed.
   ============================================================ */

/* ---- The band ---------------------------------------------------------
   Figma wrapper 585:18775: 1440x960 frame, 336px card at y=480, 144px
   below. That is the "increase the background height" ask — the BAND is
   tall, the card is not. 480/1440 = 33.33vw, 144/1440 = 10vw.
   The pale canvas is Figma's Neutral 9 so the wave reads against it
   instead of floating on pure white.
   overflow is clipped on BOTH axes on purpose: .home-pattern-host only
   sets overflow-x, which makes overflow-y compute to `auto`, and the
   wave overhangs the bottom — that would add a scrollbar inside the
   section. (Live lets the wave bleed 341px into the footer; the footer
   here has its own dark background and would paint over it, and Figma's
   frame clips too, so clipping at the band is the faithful choice.) */
.home-page section.home-cta {
  padding: clamp(200px, 33.33vw, 280px) 4vw clamp(64px, 10vw, 144px);
  background-color: var(--home-neutral-9);
  overflow: hidden;
}

/* ---- The wave ---------------------------------------------------------
   ONE non-repeating pale image (an <img srcset> child, not a tiled CSS
   background), bottom-anchored and overhanging the band, at full opacity
   — the shared .home-pattern-layer defaults (repeat / contain / 0.35)
   produced a seamed grey-blue wallpaper and are overridden here only.

   `left` is the PRE-TRANSFORM origin, not the rendered position: the
   scroll engine drives translateX from 0 to -33% of the layer's own
   width. At -15% + 166% wide, the layer sits at Figma's -42.2% x-offset
   exactly when the band is centred in the viewport (progress 0.5), and
   its right edge still covers the band at every progress the user can
   actually see it (right edge 151% -> 110% over progress 0 -> 0.75).
   Declaring the Figma -42.2% statically would instead drag the wave off
   the right-hand half of the band as soon as it starts moving.

   bottom is a % of the band height so the composition holds as the band
   shrinks: at 1440 it resolves to -182px, putting the wave's top edge at
   337px = Figma's 35%. Height comes from the <img> itself. */
.home-cta .home-cta-wave {
  top: auto;
  bottom: -19%;
  left: -15%;
  width: 166%;
  height: auto;
  opacity: 1;
}

.home-cta .home-cta-wave-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---- Card box ---------------------------------------------------------
   .ictab-outer reserves a 16px transparent hover border-left plus 8px
   padding, so its visible card is 32px narrower than its box and lands
   8px right of the box centre. Widening the inner to 1280+16+8+8 and
   pulling the outer back by 8px gives Figma's exact 1280px card, truly
   centred. `left` is used rather than a transform/margin because
   .ictab-outer is already position:relative and because the scroll
   entrance writes the `translate` property on this same element. */
.home-cta .home-inner { max-width: 1312px; }
.home-cta .ictab-outer { max-width: 1312px; left: -8px; }

/* Card: Figma is 336px, which is also the component's own base value —
   the previous build's `min-height: 520px !important` (home-test.css
   1101-1103) inflated it into a slab. That old block should be deleted
   outright (see integration notes); this declaration only exists so the
   card is correct even if it is left in place.
   Padding is Figma's content inset (y=46 top, x=86 left, 57px below) and
   must be !important because the component's own padding is !important.
   Gradient: Figma is 14.708deg, not 45deg — a far more horizontal sweep;
   Neutral 9 @65% is the card's base fill (Rectangle 78) underneath it. */
.home-cta .ictab-card {
  min-height: 336px !important;
  align-items: flex-start;
  padding: 46px clamp(24px, 6vw, 86px) 57px !important;
  background:
    linear-gradient(14.708deg, #E3FFCC 0%, #D0FFF1 100%),
    rgba(244, 246, 249, 0.65);
}

/* Copy is top-weighted per Figma; the badge column stays optically centred. */
.home-cta .ictab-badges { align-self: center; }

/* Copy rhythm — Figma Frame 241: 40px between the text block and the
   button, and the subtext sits directly on the heading's 81px line box
   (gap 0), which is what supplies the visual separation. */
.home-cta .ictab-copy { gap: 40px; }
.home-cta .ictab-text-block { gap: 0; }
.home-cta .ictab-card--demo .ictab-heading { line-height: 81px; }

/* ---- Diagonal facet ---------------------------------------------------
   The shared facet-pattern.svg is the FULL 994x998 diamond squeezed into
   the card height. Figma clips it to its top ~304px inside the 336px
   card, and live encodes exactly that crop: a 994x304 viewBox painted
   with background-size:cover on an 80%-wide box inset 40px from the
   right and hanging 40px below the card (verified in the live inline CSS
   for .elementor-element-69b609f9). Same path, same #18A57B -> #18A57B@.5
   gradient, same 0.1 opacity — only the viewBox and the box change, so
   this is a scoped data-URI override rather than an edit to the shared
   SVG file. The gradient id lives inside the data URI's own document, so
   it cannot collide with any other id on the page. */
.home-cta .ictab-pattern {
  top: auto;
  left: auto;
  right: 40px;
  bottom: -40px;
  width: 80%;
  height: calc(100% + 40px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='994' height='304' viewBox='0 0 994 304' fill='none'%3E%3Cpath d='M496.911 0L994 0V499.089L745.544 748.545L497.089 998H0L0 498.91L248.455 249.455L496.911 0Z' fill='url(%23home-cta-facet)'/%3E%3Cdefs%3E%3ClinearGradient id='home-cta-facet' x1='629.88' y1='-144.351' x2='192.902' y2='550.049' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2318A57B'/%3E%3Cstop offset='1' stop-color='%2318A57B' stop-opacity='0.5'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
  background-position: center center;
  background-size: cover;
}

/* ---- Scroll entrance --------------------------------------------------
   opacity / translate are written per-frame from scroll position by
   collectHomeCta() in home-test.js — no CSS transition and no hidden
   start state declared here, so if the script never runs the banner
   stays fully visible (same convention as .home-reveal).
   The facet's drift is written to the individual `translate` property,
   NOT `transform`, so it composes with the component's hover
   `transform: translate(25px,-20px) scale(.875)` instead of clobbering
   it — and it is not in that rule's `transition: transform .3s`, so the
   scroll-linked motion tracks the scroll with no lag while the hover
   state keeps its own easing. */
.home-cta .ictab-outer,
.home-cta .ictab-pattern,
.home-cta .ictab-heading,
.home-cta .ictab-text,
.home-cta .ictab-btn,
.home-cta .ictab-badges img { will-change: translate, opacity; }

@media (prefers-reduced-motion: reduce) {
  .home-cta .ictab-outer,
  .home-cta .ictab-pattern,
  .home-cta .ictab-heading,
  .home-cta .ictab-text,
  .home-cta .ictab-btn,
  .home-cta .ictab-badges img { opacity: 1 !important; translate: none !important; }
}

/* ---- Responsive -------------------------------------------------------
   Live explicitly designs the mobile wave rather than hiding it: 250vw
   wide at -75vw. Same pre-transform-origin trick as desktop — -34% lands
   on live's -75% at mid-scroll if the engine's mobile freeze is lifted,
   and still reads correctly as a static crop if it is not. */
@media (max-width: 1024px) {
  .home-cta .home-cta-wave {
    left: -34%;
    width: 250%;
    bottom: -12%;
  }
}

@media (max-width: 900px) {
  .home-page section.home-cta {
    padding: clamp(140px, 28vw, 260px) 20px clamp(48px, 8vw, 96px);
  }
  /* The component's own 900px padding rule is not !important and so loses
     to its own !important base rule — restated here at the right weight. */
  .home-cta .ictab-card { padding: 32px 24px 40px !important; }
  .home-cta .ictab-card--demo .ictab-heading { line-height: 44px; }
  .home-cta .ictab-copy { gap: 28px; }
  .home-cta .ictab-badges { align-self: flex-start; }
  /* Reserved hover border drops to 8px here, so the centring offset no
     longer applies. */
  .home-cta .ictab-outer { left: 0; max-width: 100%; }
  .home-cta .home-inner { max-width: 100%; }
  .home-cta .ictab-pattern { right: 0; width: 100%; bottom: -24px; height: calc(100% + 24px); }
}


/* ============================================================
   Product-row stat tooltips — hidden on desktop.

   These five "Low Code / Process Automation" pairs appear in NEITHER Figma
   product frame (567:4950 EagleEye365, 585:18781 Swift, 583:18707 Gladius all
   contain no such strings), and on live Gladius ships them with
   elementor-hidden-desktop+tablet+mobile. They were rebuilt as live's frosted
   glass stack, but overlaid on a REAL coded dashboard — rather than live's
   flat screenshot — they sit on top of legible content (Swift's Data Quality
   gauges and Integration Efficiency KPIs, EagleEye365's compliance cards),
   which is a regression against the charts this page exists to show.

   Per the audit's own first option ("drop them from desktop to match both
   sources"), they are suppressed. The markup and styles are retained so the
   decision is reversible if the client wants them back — in which case the
   mockups need to be narrowed to make real room for them.
   ============================================================ */
.home-ee-tips,
.home-swift-tips { display: none !important; }

/* ============================================================
   MOBILE / TABLET — product-mockup normalisation.

   Placed last so source order settles it. Two real defects this fixes:

   1. The laptop artwork stayed visible on small screens. Each row already had
      a `display:none` for its frame inside its own breakpoint, but the frame
      is an <img> and those rules were class-only (0,1,0) — losing to the
      shared `.home-page img { display:block }` (0,1,1). Prefixing with
      .home-page raises them to (0,2,1); the !important here is the belt to
      that braces, because the three rows each carry several narrower
      breakpoints that were re-showing it further down the cascade.

   2. The stacked mockup column did not fill the row: the stages measured
      275px inside a 390px viewport because .home-product-mockup keeps its
      desktop `flex: 1 1 560px` basis and the stages keep a desktop
      aspect-ratio. Stacked, they should simply take the available width and
      let their reflowed card grid set the height.
   ============================================================ */
@media (max-width: 1024px) {
  .home-page .home-ee-frame,
  .home-page .home-ee-screen,
  .home-page .home-gladius-frame,
  .home-page .home-gladius-screen,
  .home-page .home-swift-frame,
  .home-page .home-swift-screen,
  .home-page .home-ee-tips,
  .home-page .home-swift-tips { display: none !important; }

  .home-page .home-product-mockup {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    justify-content: stretch;
    margin-left: 0;
    margin-right: 0;
  }

  .home-page .home-ee-stage,
  .home-page .home-gladius-stage,
  .home-page .home-swift-stage,
  .home-page .home-eagleeye365-mockup,
  .home-page .home-gladius-mockup,
  .home-page .home-swift-mockup {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    aspect-ratio: auto;
    height: auto;
    left: auto;
    transform: none;
  }

  /* The card layers are absolutely positioned to the screen rect on desktop;
     stacked they must be normal flow so the reflowed grid can size the stage. */
  .home-page .home-ee-cards,
  .home-page .home-gladius-cards,
  .home-page .home-swift-overlay {
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
  }
}

/* ============================================================
   MOBILE / TABLET — three fixes, appended last so source order settles them.
   ============================================================ */
@media (max-width: 1024px) {

  /* 1. CONSISTENT STACK ORDER — CONTENT FIRST, THEN INFOGRAPHIC.
        EagleEye365 and Gladius were resolving to column-reverse while Swift
        resolved to column, so the desktop alternation carried into the stack.
        Every row now reads the same way on small screens:
           product logo -> h2 -> description -> button -> infographic
        DOM order is already copy-then-mockup, so plain `column` gives exactly
        that; the !important is needed to beat the per-row --LR/--RL
        row/row-reverse rules. */
  .home-page .home-product .home-inner {
    flex-direction: column !important;
  }

  /* Gladius ships a tablet/mobile-only header row (logo + a second DIVE IN)
     INSIDE its mockup column, which live uses because its desktop copy column
     is hidden there. Here the copy column stays visible, so that row would
     duplicate the logo and the CTA and break the required sequence. */
  .home-page .home-gladius-mobilehead { display: none !important; }

  /* Gladius's stage keeps a 16px inset from its desktop treatment, so its
     cards measured 303px while EagleEye365 and Swift both sat at 335px —
     the infographics did not line up across the three rows. Drop it so all
     three dashboards share one width and one left edge. */
  .home-page .home-gladius-stage { padding: 0 !important; }

  /* The three mockups keep their desktop viewport-bleed offsets (negative
     margins / oversized stages that deliberately run off the left or right
     edge). Stacked, that left EagleEye365's cards at x=-6 (off-canvas) and
     Gladius's at x=4, while Swift's sat at x=40 — three different left edges,
     none of them lined up with their own copy. Neutralise the bleed so every
     dashboard shares the copy column's left edge and width. */
  .home-page .home-ee-stage,
  .home-page .home-gladius-stage,
  .home-page .home-swift-stage,
  .home-page .home-ee-cards,
  .home-page .home-gladius-cards,
  .home-page .home-swift-overlay {
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  /* The per-card arrival drift (updateHomeEagleEye / initHomeGladiusExtras)
     writes an inline translate on each card. On desktop that is a nice
     stagger; stacked it just shoves the cards sideways out of their column —
     EagleEye365's landed at x=-6, Gladius's at x=4. Inline styles outrank the
     stylesheet, so !important is required to neutralise them here. */
  .home-page .home-ee-cards .home-eagleeye365-card,
  .home-page .home-gladius-cards .home-gladius-card,
  .home-page .home-swift-overlay .home-swift-card {
    transform: none !important;
    translate: none !important;
    left: auto !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* And one section gutter for all three, so the copy and the dashboard below
     it start on the same line in every row. */
  .home-page section.home-product { padding-left: 20px; padding-right: 20px; }
  .home-page .home-product .home-inner { padding-left: 0; padding-right: 0; }

  /* ...and because live hid the COPY column's logo on small screens (it showed
     the mobilehead instead), suppressing that row left Gladius with no logo at
     all. Restore it so all three rows open with their product lockup. */
  .home-page .home-gladius .home-product-copy .home-product-logo {
    display: block !important;
    max-width: 248px;
  }
  /* Same for its CTA — live hid the copy-column button on small screens too,
     because the mobilehead carried the second DIVE IN. */
  .home-page .home-gladius .home-product-copy .home-gladius-btn,
  .home-page .home-gladius .home-product-copy .home-btn {
    display: inline-flex !important;
  }

  /* 2. SWIFT'S DASHBOARD NEVER REFLOWED.
        Its overlay stayed `display:block` with all five cards still absolutely
        positioned against the desktop stage, so they rendered 121-166px wide
        and unreadable. EagleEye365 and Gladius already switch their card layer
        to a grid here; Swift needs the same treatment. */
  .home-page .home-swift-overlay {
    position: static;
    inset: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    width: 100%;
    height: auto;
  }
  /* !important is required, not lazy: section-5-swift.php writes the desktop
     rect as an INLINE style on each card (style="left:..;top:..;width:36.03%..")
     so the Figma coordinates stay co-located with the markup. Inline styles
     outrank any stylesheet rule, so the stacked grid could not resize them —
     the cards stayed at their desktop 121-166px and the dashboard was
     unreadable on a phone. */
  .home-page .home-swift-overlay .home-swift-card {
    position: static !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 0;
    transform: none !important;
    padding: 16px;
  }

  /* 3. DUPLICATE TITLE IN THE EXPANDED TAB.
        On mobile the collapsed rail row stays visible for the active tab
        because the rail IS the accordion toggle. But the expanded pane also
        renders its own heading, so the industry name and its number appeared
        twice, one directly above the other. Keep the rail (it is the control)
        and drop the pane's heading. */
  .home-page .home-impact .rm-column-tab.active .rk-inner-heading-wrapper {
    display: none;
  }
}

/* ============================================================
   "Explore Our Articles" — card hover + category pill.

   PILL: the shared component prints get_the_category()[0]->name, and these
   posts carry no real taxonomy, so every card read "Uncategorized" — noise
   rather than information. Hidden here rather than in the component, which
   /insights/ and the resource CPT templates also render. The date stays, so
   .irp-card-meta keeps a purpose. (Assigning real industry terms upstream
   would be the better long-term fix — see AUDIT-FINDINGS.md.)

   HOVER: card lifts onto a white surface with the brand teal->green gradient
   reading as a coloured shadow beneath it. A gradient cannot be used in
   box-shadow directly, so the glow is a blurred ::after sitting behind the
   card, and the white fill is a ::before behind the content but above that
   glow. Both are painted from first load (opacity 0 only) so hovering never
   changes box size or triggers layout — same anti-reflow rule the CTA and
   feature cards follow.
   ============================================================ */
.home-articles .irp-card-pill { display: none !important; }

.home-articles .irp-card {
  position: relative;
  isolation: isolate;
  border-radius: 4px;
  transition: transform .35s ease;
}

/* White surface — sits behind the content, inset slightly wider than the card
   so the fill reads as a panel rather than a hairline. */
.home-articles .irp-card::before {
  content: '';
  position: absolute;
  inset: -16px -16px -20px;
  border-radius: 6px;
  background: #fff;
  opacity: 0;
  transition: opacity .35s ease;
  z-index: -1;
  pointer-events: none;
}

/* Gradient glow — blurred, offset down, sitting behind the white panel. */
.home-articles .irp-card::after {
  content: '';
  position: absolute;
  inset: -10px -10px -14px;
  border-radius: 8px;
  background: var(--home-gradient-teal-green-diag);
  filter: blur(18px);
  opacity: 0;
  transition: opacity .35s ease;
  z-index: -2;
  pointer-events: none;
}

.home-articles .irp-card:hover { transform: translateY(-6px); }
.home-articles .irp-card:hover::before { opacity: 1; }
.home-articles .irp-card:hover::after  { opacity: .55; }

@media (hover: none) {
  .home-articles .irp-card:hover { transform: none; }
  .home-articles .irp-card:hover::before,
  .home-articles .irp-card:hover::after { opacity: 0; }
}

/* Headroom for the Articles parallax: the cards rise ~48px and the hover glow
   blurs ~14px below the card, so the row needs clearance inside the section
   rather than relying on the section's own box to contain it. */
.home-articles .irp-grid { padding-bottom: 56px; }
@media (max-width: 900px) {
  .home-articles .irp-grid { padding-bottom: 32px; }
}


/* ============================================================
   Section 6b — "Why Modern Compliance Teams Choose IntoneCCM"
   (sits between .home-impact and .home-articles)

   The page's deliberate breather: white, cardless, shadowless. Asymmetric
   two-column editorial layout — narrow heading column, wider 01/02/03 list —
   with the brand gradient restricted to the three numeral chips and the thin
   rules that open every block.

   ONLY .home-choose-* classes are defined here, plus reuse of the shared
   .home-bar-track / .home-bar-fill primitives. Nothing above this banner is
   touched, and no new JS is required: the four .home-bar-fill children are
   picked up by the existing collector in home-test.js.
   ============================================================ */

.home-page section.home-choose {
  /* White, like every other copy section on this page (.home-product,
     .home-articles). The last 38% eases into a whisper of neutral so the
     boundary with the Articles pattern band is a fade, not a hard edge —
     Impact ends flush (padding-bottom: 0) with its pale mountain band, and
     this section is the gap between that band and the Articles one. */
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 62%, #FBFCFD 100%);
  /* Beats the shared `.home-page section { padding: 96px 4vw }` (0,1,1) with
     (0,2,1). Slightly shorter on top than the shared value because Impact's
     foot pattern already leaves a lot of air above this section. */
  padding: 88px 4vw 96px;
  /* CLIP, never hidden — `overflow-x: hidden` computes overflow-y to auto and
     silently makes this a scroll container (see the .home-pattern-host note at
     the top of this file). Present only to contain the glow's soft edge. */
  overflow-x: clip;
}

/* Decorative wash behind the heading column. No filter/blur: a radial gradient
   is already soft, costs nothing to paint, and cannot bleed outside its own
   box — so there is no negative offset anywhere in this section and no way for
   it to introduce horizontal overflow. */
.home-choose-glow {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 4%;
  width: min(52%, 760px);
  height: 78%;
  background: radial-gradient(58% 62% at 34% 46%,
    rgba(106, 194, 182, 0.16) 0%,
    rgba(157, 220, 93, 0.10) 44%,
    rgba(255, 255, 255, 0) 72%);
  pointer-events: none;
}

/* ---------- The two-column frame ----------
   align-items:start is load-bearing: it is what puts the heading's accent rule
   and item 01's rail on the same top edge, and it stops the 64px numeral chip
   from being stretched to the height of its copy block. */
.home-choose-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
  column-gap: clamp(48px, 5.5vw, 88px);
  align-items: start;
}

/* ---------- Heading column ---------- */
/* 96x4 accent mark. Overrides .home-bar-track's width:100%/height:6px purely
   by source order (this block is appended after it). */
.home-choose-rule {
  width: 96px;
  height: 4px;
  margin: 0 0 28px;
}

/* `.home-page` prefix required: the shared `.home-page h1..h4` rule is (0,1,1)
   and would otherwise win the margin and colour — same reason
   `.home-page .home-articles-heading` is written that way. */
.home-page .home-choose-heading {
  margin: 0;
  font-family: 'Public Sans', sans-serif;
  font-size: clamp(30px, 3.1vw, 42px);
  line-height: 1.16;
  font-weight: 700;
  /* Matches the Articles h2 tracking so the two headings read as one family. */
  letter-spacing: -0.42px;
  color: var(--home-primary-dark);
  text-wrap: balance;   /* progressive enhancement; ignored where unsupported */
}

/* ---------- The 01/02/03 list ----------
   Capped narrower than its 1fr column on purpose: at 1280px the row runs to
   ~1208px and leaves air at the right edge. That ragged right is the "breathe"
   instruction made literal — it is not an alignment bug. */
.home-choose-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 700px;
}

.home-choose-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  column-gap: 28px;
  row-gap: 20px;
  align-items: start;
}
.home-choose-item + .home-choose-item { margin-top: 44px; }

/* The opening hairline, spanning chip + copy. 2px so it reads as a rule rather
   than a progress bar; the inherited 51px radius from .home-bar-track is
   invisible at this height and keeps it consistent with every other bar. */
.home-choose-rail {
  grid-column: 1 / -1;
  width: 100%;
  height: 2px;
}

/* Gradient-filled numeric chip — the page's established motif (cf.
   .home-vdash-stat-chip), square-cornered per the site-wide no-radius rule for
   chips/pills. The green glow is the same family as the ghost-button and
   article-card glows, kept low so this section stays lighter than its
   neighbours. */
.home-choose-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: var(--home-gradient-teal-green-diag);
  color: #fff;
  font-family: 'Public Sans', sans-serif;
  font-size: 22px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  border-radius: 0;
  box-shadow: 0 10px 24px rgba(106, 194, 182, 0.28);
}

.home-choose-copy { min-width: 0; }

.home-page .home-choose-lead {
  margin: 0 0 10px;
  font-family: 'Public Sans', sans-serif;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--home-primary-dark);
}

.home-choose-desc {
  margin: 0;
  font-family: 'Public Sans', sans-serif;
  /* 18px is the page's body size on a wide measure (product rows, Articles
     subheading); at the ~608px measure this column gives, all three
     descriptions land on exactly two lines, so the three blocks are the same
     shape. */
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--home-text-muted);
}

/* ---------- Responsive ----------
   Matches the page's existing scale: 1180 / 1024 / 767 / 560 / 420,
   desktop-first, no min-width companions needed because nothing here is
   defined only above a breakpoint. */

@media (max-width: 1180px) {
  .home-choose-grid { grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); column-gap: 48px; }
  .home-choose-item { grid-template-columns: 56px minmax(0, 1fr); column-gap: 22px; }
  .home-choose-num { width: 56px; height: 56px; font-size: 20px; }
  .home-choose-desc { font-size: 17px; }
}

/* Single column, content-first — the heading is already first in the DOM. */
@media (max-width: 1024px) {
  .home-choose-grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .home-choose-list { max-width: none; }
  .home-choose-glow { width: 78%; height: 46%; }
  .home-choose-rule { margin-bottom: 22px; }
}

@media (max-width: 900px) {
  /* Pairs with the shared `.home-page section { padding: 56px 20px }`. */
  .home-page section.home-choose { padding: 56px 20px 64px; }
}

@media (max-width: 767px) {
  .home-choose-item { grid-template-columns: 48px minmax(0, 1fr); column-gap: 18px; row-gap: 16px; }
  .home-choose-item + .home-choose-item { margin-top: 32px; }
  .home-choose-num { width: 48px; height: 48px; font-size: 18px; box-shadow: 0 8px 18px rgba(106, 194, 182, 0.24); }
  .home-page .home-choose-lead { font-size: 20px; margin-bottom: 8px; }
  .home-choose-desc { font-size: 16px; line-height: 1.55; }
  .home-choose-grid { row-gap: 32px; }
}

@media (max-width: 560px) {
  .home-choose-item { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; }
  .home-choose-num { width: 44px; height: 44px; font-size: 17px; }
  .home-choose-rule { width: 72px; }
  .home-page .home-choose-heading { letter-spacing: -0.2px; }
}

/* 390px check: 390 - 40 (section padding) = 350 content; 40 chip + 14 gutter
   leaves 296px for the copy column, and every text cell is minmax(0, 1fr) so
   nothing can push past it. */
@media (max-width: 420px) {
  .home-choose-item { grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; }
  .home-choose-num { width: 40px; height: 40px; font-size: 16px; }
  .home-page .home-choose-lead { font-size: 19px; }
}

/* ============================================================
   Section 10 — FAQs (native <details> accordion, zero JS).

   The only scripted thing in this block is the shared .home-bar-fill rule
   under the heading; the disclosure itself is pure CSS + UA behaviour.

   OPEN/CLOSE ANIMATION, in two layers, because "animate a <details>" is not
   one technique but two:

   1. BASE, every browser: the UA does not render a closed <details>'s content
      at all, so no height transition can run there. What CAN run is a keyframe
      on the freshly-revealed panel — .home-faq-a-inner fades and rises on open,
      close is instant. Correct everywhere, never broken.
   2. ENHANCED, engines that expose ::details-content (@supports selector(...)):
      the panel becomes a 0fr→1fr grid row, with content-visibility transitioned
      `allow-discrete` so the subtree stays alive for the duration of the CLOSE
      as well. That is the grid-template-rows technique, applied to the one box
      that the UA actually toggles. The keyframe is switched off there so the
      two do not stack.

   Colour/transform transitions below are all STATE-linked (open/hover/focus),
   never scroll-linked — the page's no-transition-on-scroll-driven-properties
   rule is about .home-bar-fill and the donut strokes, and .home-faq-rule
   inherits that (transition:none) from the shared primitive.
   ============================================================ */

.home-page section.home-faq {
  background: var(--home-neutral-9);
  /* clip, never `overflow-x: hidden` — hidden computes overflow-y to auto and
     silently turns the section into a scroll container (see .home-pattern-host).
     Here it exists purely to fence in the blurred glow below. */
  overflow-x: clip;
}

/* Soft brand glow, top right. The section is otherwise a flat text panel and
   reads dead without it; z-index 0 keeps it under .home-inner's z-index 1. */
.home-faq::before {
  content: '';
  position: absolute;
  top: 40px;
  right: 2vw;
  width: min(460px, 52%);
  aspect-ratio: 1;
  background: var(--home-gradient-teal-green-diag);
  filter: blur(110px);
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
}

/* ---------- Two-column shell: heading left, list right ----------
   Single column is the default and the DOM is already intro-then-list, so the
   stacked order is content-first with no reordering. The min-width steps use
   the page's .02 companions so they butt exactly against the max-width rules
   at the foot of this block. */
.home-faq-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}
@media (min-width: 1024.02px) {
  .home-faq-inner {
    grid-template-columns: minmax(260px, 32%) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }
}
@media (min-width: 1180.02px) {
  .home-faq-inner { gap: 72px; }
}
@media (min-width: 1280.02px) {
  /* 400 + 96 + 784 = the full 1280 .home-inner, no rounding slack. */
  .home-faq-inner { grid-template-columns: 400px minmax(0, 1fr); gap: 96px; }
}

/* ---------- Left rail ---------- */
.home-faq-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

/* Matches .home-cards-eyebrow (16px/600 uppercase navy), not the 14px
   --home-primary .home-eyebrow token — this is a section opener, same rank as
   "Why choose us?". */
.home-page .home-faq-eyebrow {
  margin: 0;
  font-family: 'Public Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 23.878px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--home-primary-dark);
}

/* .home-page prefix is load-bearing: the shared `.home-page h2` rule is
   (0,1,1) and would otherwise win the margin. Size tracks the 42px/-0.42px
   .home-articles-heading, expressed fluidly so it steps down on its own. */
.home-page .home-faq-title {
  margin: 0;
  font-family: 'Public Sans', sans-serif;
  font-size: clamp(28px, 2.9vw, 42px);
  line-height: 1.24;
  font-weight: 700;
  letter-spacing: -0.42px;
  color: var(--home-primary-dark);
}

/* Thin gradient accent rule — a real .home-bar-track so home-test.js drives it
   from scroll position (and the template's <noscript> pin fills it when
   scripting is off). (0,2,0) to beat the shared 6px height, same pattern as
   .home-vdash-confidence .home-bar-track. */
.home-page .home-faq-rule {
  width: 120px;
  height: 4px;
  flex: 0 0 auto;
}

.home-faq-lede {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--home-text-muted);
  max-width: 42ch;
}

/* Reuses .home-btn / .home-btn--outline verbatim — no fourth button style.
   Only the focus ring is added, which the shared rule does not carry. */
.home-faq-cta { margin-top: 4px; }
.home-faq-cta:focus-visible {
  outline: 2px solid var(--home-primary);
  outline-offset: 3px;
}

/* ---------- The list ---------- */
.home-faq-list {
  border-top: 1px solid var(--home-border);
}

.home-faq-item {
  position: relative;
  /* isolate, so the ::after white panel can sit at z-index -1 above the
     section background but below the row's own content — same construction as
     .home-articles .irp-card. */
  isolation: isolate;
  border-bottom: 1px solid var(--home-border);
}

/* Open-state gradient rule: wipes left→right over the hairline above the row.
   top:-1px + 2px tall so it covers that hairline and one pixel of the row. */
.home-faq-item::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--home-gradient-teal-green);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
  z-index: 2;
}
.home-faq-item[open]::before { transform: scaleX(1); }

/* Open row lifts onto a white surface. Bled 16px past the column on both sides
   so the copy is not flush against the panel edge — no negative MARGINS, which
   would change the row's layout width and could push the page wide on a phone.
   At 390px this lands 4px inside the viewport, and the section's overflow-x:
   clip is the belt to that braces. */
.home-faq-item::after {
  content: '';
  position: absolute;
  inset: 0 -16px;
  background: var(--home-white);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: -1;
}
.home-faq-item[open]::after { opacity: 1; }

/* ---------- Question row (the <summary>) ---------- */
.home-faq-q {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 26px 0;
  cursor: pointer;
  font-family: 'Public Sans', sans-serif;
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.45;
  font-weight: 600;
  color: var(--home-text);
  overflow-wrap: break-word;
  transition: color 0.25s ease;
}
/* Kill the UA triangle three ways: ::marker for the modern list-item summary,
   the -webkit- pseudo for older Safari, and list-style for Firefox. */
.home-faq-q { list-style: none; }
.home-faq-q::-webkit-details-marker { display: none; }
.home-faq-q::marker { content: ''; }

.home-faq-q-text { flex: 1 1 auto; min-width: 0; }

.home-faq-q:hover { color: var(--home-primary); }
.home-faq-q:focus-visible {
  outline: 2px solid var(--home-primary);
  outline-offset: -3px;
}

/* Numeric chip — square, per the page's no-radius rule. Closed: hairline box,
   muted digits. Open: gradient fill with NAVY digits, not white — white on the
   gradient's #9DDC5D end is ~1.6:1 and unreadable. Weight is never changed on
   open, which would reflow the question's line breaks under the cursor. */
.home-faq-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-top: 1px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--home-text-muted);
  background: transparent;
  border: 1px solid var(--home-neutral-7);
  transition: color 0.3s ease, border-color 0.3s ease;
}
.home-faq-item[open] .home-faq-num {
  color: var(--home-primary-dark);
  border-color: transparent;
  background: var(--home-gradient-teal-green);
}

/* Plus → minus. Two gradient bars; the vertical one rotates onto the
   horizontal one rather than fading, so the two states are one gesture. */
.home-faq-icon {
  flex: 0 0 auto;
  position: relative;
  width: 30px;
  height: 30px;
  margin-top: 1px;
  border: 1px solid var(--home-border);
  transition: border-color 0.3s ease;
}
.home-faq-icon::before,
.home-faq-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--home-gradient-teal-green);
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.home-faq-icon::before { width: 14px; height: 2px; transform: translate(-50%, -50%); }
.home-faq-icon::after  { width: 2px; height: 14px; transform: translate(-50%, -50%); }

.home-faq-q:hover .home-faq-icon,
.home-faq-q:focus-visible .home-faq-icon { border-color: #6AC2B7; }
.home-faq-item[open] .home-faq-icon { border-color: #6AC2B7; }
.home-faq-item[open] .home-faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* ---------- Answer panel ---------- */
/* min-height:0 + overflow:hidden are what let the 0fr grid row actually
   collapse. `overflow: hidden` on both axes is fine here — the overflow-y:auto
   trap only applies to a single-axis `overflow-x: hidden`. */
.home-faq-a {
  min-height: 0;
  overflow: hidden;
}
/* 44px = the 30px chip + the 14px flex gap, so answers hang under the question
   text rather than under the number. */
.home-faq-a-inner { padding: 0 30px 28px 44px; }

.home-page .home-faq-a p {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  color: var(--home-text-muted);
  max-width: 66ch;
  overflow-wrap: break-word;
}

/* Product links: navy, semibold, with the brand gradient as the underline.
   text-decoration is dropped only because the gradient rule replaces it —
   the affordance is never removed, just redrawn. */
.home-faq-link {
  color: var(--home-primary);
  font-weight: 600;
  text-decoration: none;
  padding-bottom: 1px;
  background-image: var(--home-gradient-teal-green);
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: 0 100%;
  transition: color 0.25s ease, background-size 0.25s ease;
}
.home-faq-link:hover,
.home-faq-link:focus-visible {
  color: var(--home-primary-dark);
  background-size: 100% 3px;
}
.home-faq-link:focus-visible {
  outline: 2px solid var(--home-primary);
  outline-offset: 2px;
}

/* Registered mark. line-height:0 stops the raised glyph from growing the line
   box and opening a gap between wrapped lines of an answer. */
.home-faq-reg {
  font-size: 0.62em;
  line-height: 0;
  vertical-align: super;
  font-weight: 600;
}

/* ---------- Layer 1: open animation, every browser ---------- */
@keyframes home-faq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.home-faq-item[open] .home-faq-a-inner {
  animation: home-faq-open 0.3s ease both;
}

/* ---------- Layer 2: real open AND close, where ::details-content exists ----
   grid-template-rows 0fr→1fr on the box the UA itself toggles, with
   content-visibility transitioned `allow-discrete` so the subtree survives the
   closing frame instead of vanishing on the first one. content-visibility:
   hidden also keeps the answer's links out of the tab order while collapsed. */
@supports selector(details::details-content) {
  .home-faq-item::details-content {
    display: grid;
    grid-template-rows: 0fr;
    overflow: clip;
    content-visibility: hidden;
    transition:
      grid-template-rows 0.38s cubic-bezier(0.22, 0.61, 0.36, 1),
      content-visibility 0.38s allow-discrete;
  }
  .home-faq-item[open]::details-content {
    grid-template-rows: 1fr;
    content-visibility: visible;
  }
  /* The keyframe would double up with the height transition. */
  .home-faq-item[open] .home-faq-a-inner { animation: none; }

  @media (prefers-reduced-motion: reduce) {
    .home-faq-item::details-content { transition: none; }
  }
}

/* Same reduced-motion contract the rest of the page follows (.home-reveal):
   everything still renders in its correct end state, nothing moves. */
@media (prefers-reduced-motion: reduce) {
  .home-faq-item::before,
  .home-faq-item::after,
  .home-faq-q,
  .home-faq-num,
  .home-faq-icon,
  .home-faq-icon::before,
  .home-faq-icon::after,
  .home-faq-link,
  .home-faq-cta { transition: none !important; }
  .home-faq-item[open] .home-faq-a-inner { animation: none !important; }
  .home-faq-item[open]::before { transform: scaleX(1); }
}

/* Touch devices keep :hover latched after a tap; reset it, as .home-articles
   does for its cards. */
@media (hover: none) {
  .home-faq-q:hover { color: var(--home-text); }
  .home-faq-q:hover .home-faq-icon { border-color: var(--home-border); }
  .home-faq-item[open] .home-faq-icon { border-color: #6AC2B7; }
  .home-faq-link:hover { background-size: 100% 2px; }
}

/* ---------- Responsive ----------
   .home-page section already drops to `56px 20px` at 900, so the content box
   is 350px at a 390px viewport. Row budget there: 26 + 12 + text + 12 + 26,
   leaving 274px for the question — no overflow, and the -16px open-panel bleed
   still lands 4px inside the viewport. */
@media (max-width: 1024px) {
  .home-faq-lede { max-width: 62ch; }
  .home-faq::before { width: min(360px, 60%); opacity: 0.13; }
}

@media (max-width: 900px) {
  .home-faq-inner { gap: 32px; }
  .home-faq-intro { gap: 16px; }
}

@media (max-width: 767px) {
  .home-faq-q { padding: 22px 0; gap: 12px; }
  .home-faq-a-inner { padding: 0 0 24px 42px; }
}

@media (max-width: 560px) {
  .home-faq-num,
  .home-faq-icon { width: 26px; height: 26px; }
  .home-faq-num { font-size: 11px; }
  .home-faq-icon::before { width: 12px; }
  .home-faq-icon::after  { height: 12px; }
  .home-faq-a-inner { padding: 0 0 22px 38px; }
  .home-page .home-faq-a p { font-size: 16px; }
}

@media (max-width: 420px) {
  .home-faq-q { font-size: 16px; }
  /* Reclaim the hanging indent — at this width the answer needs every pixel,
     and it still reads as a block under its question. */
  .home-faq-a-inner { padding-left: 0; }
  .home-faq-cta { align-self: stretch; text-align: center; }
}

/* ============================================================
   Integration overrides for the three sections appended above.
   Kept together at the very end so it is obvious these are page-level
   decisions, not part of any single section's authored block.
   ============================================================ */

/* --- Why-Choose: keep the mountain-pattern chain unbroken ---------------
   .home-impact ends flush with .home-impact-foot-pattern (opacity 0.28) and
   .home-articles opens with .home-articles-pattern (opacity 0.28); the two
   were tuned to butt together with no seam. This section was inserted
   between them, so it carries the same artwork at the same opacity — the
   shared .home-pattern-layer default of 0.35 would read as a darker stripe
   in the middle of the field, which is the opposite of the fix. */
.home-choose .home-choose-pattern { opacity: 0.28; }

/* --- Results disclaimer, rendered last on the page ----------------------
   Fully self-contained. It used to borrow .home-about-disclaimer's type, but
   the About section was removed from the page and its CSS block deleted with
   it, so the fine-print styling now lives here. The section above this one is
   the CTA's Neutral-9 band, hence the step to white. */
.home-page section.home-disclaimer {
  background: #fff;
  padding: 34px 4vw 56px;
}
.home-disclaimer .home-disclaimer-text {
  margin: 0;
  max-width: 920px;
  padding-top: 22px;
  border-top: 1px solid var(--home-neutral-7);
}
.home-disclaimer .home-disclaimer-text small {
  display: block;
  font-family: 'Public Sans', sans-serif;
  font-size: 13px;
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--home-text-muted);
}

@media (max-width: 900px) {
  .home-page section.home-disclaimer { padding: 28px 20px 44px; }
}
@media (max-width: 767px) {
  .home-disclaimer .home-disclaimer-text { padding-top: 18px; }
  .home-disclaimer .home-disclaimer-text small { font-size: 12.5px; line-height: 1.6; }
}


/* --- Products lead-in (section-2b) --------------------------------------
   One centred sentence bridging the video section and the first product row.
   padding-bottom is 0 on purpose: the EagleEye365 row's own top padding
   provides the gap, so the two read as a single block rather than as two
   sections with a double gutter between them. */
.home-page section.home-products-intro {
  background: #fff;
  padding: 88px 4vw 0;
}
.home-products-intro .home-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* Wrapper carries the width so the shared .home-bar-track's own width:100%
   resolves against 88px — same idiom as .home-about-rule. */
.home-products-intro-rule {
  width: 88px;
  height: 4px;
  margin: 0 0 26px;
}
.home-products-intro-text {
  margin: 0;
  max-width: 900px;
  font-family: 'Public Sans', sans-serif;
  font-size: clamp(16px, 1.45vw, 20px);
  line-height: 1.62;
  font-weight: 400;
  color: var(--home-text-muted);
}

@media (max-width: 900px) {
  .home-page section.home-products-intro { padding: 56px 20px 0; }
  .home-products-intro-rule { width: 72px; margin-bottom: 20px; }
}


/* ============================================================
   PRODUCT ROWS — logo scale + sub-1024 alignment.
   Appended last on purpose: several of the rules below tie on specificity
   with per-product blocks earlier in this file, so source order is what
   decides them. Do not move this block.
   ============================================================ */

/* --- Logo scale -----------------------------------------------------------
   The three logos were sized independently and rendered at wildly different
   scales: EagleEye365 298x77, Gladius 137x37 (less than half), Swift 300x112.
   The cause is that they were sized by WIDTH while their SVGs have different
   intrinsic sizes and aspect ratios (3.87 / 3.75 / 2.67) — a shared max-width
   cannot produce a shared visual size out of those.

   They are now sized by HEIGHT, which is what actually governs how big a
   wordmark reads, with a per-product optical correction: at equal height the
   Gladius wordmark is set noticeably heavier than the other two, and the Swift
   lockup spends part of its height on a "DATA INTEGRATOR" tagline, so matching
   the raw box heights would leave Gladius looking oversized and Swift small.
   The variable is declared on the copy column so the height and the width both
   follow from one number per product. */
.home-product-copy { --home-logo-h: clamp(62px, 6.2vw, 92px); }
.home-gladius .home-product-copy { --home-logo-h: clamp(35px, 3.7vw, 46px); }
.home-swift   .home-product-copy { --home-logo-h: clamp(44px, 4.7vw, 58px); }

.home-page .home-product-logo,
.home-page .home-swift .home-product-logo {
  display: block;
  height: var(--home-logo-h);
  width: auto;
  max-width: 100%;
  margin: 0 0 28px;
}

/* --- Sub-1024 layout + horizontal alignment -------------------------------
   `.home-product .home-inner` is a flex row with `align-items: center`. Below
   1024px it flips to `flex-direction: column` — at which point that same
   `align-items: center` stops meaning "vertically centre the two columns" and
   starts meaning "centre them HORIZONTALLY". The copy column is narrower than
   the row, so it was being centred while the other rows' overrides left theirs
   flush left: measured left edges at 1024px were 267px (EagleEye), 24px
   (Gladius) and 20px (Swift) for what should be three identical stacks.

   `align-items: stretch` makes all three copy columns span the full width, so
   the logo, heading, paragraph and button of every row start on the same left
   edge at every width. */
@media (max-width: 1024px) {
  .home-page .home-product .home-inner {
    align-items: stretch !important;
    gap: 40px;
  }

  /* Every row gets the same gutter. These beat the per-product values that
     each block sets for its own desktop bleed — Gladius in particular runs
     `padding-left: 0` so its laptop can bleed off the left edge, which is
     meaningless once the mockup is centred in a stacked column. It compensated
     with a 24px gutter on its own copy column, which the width/padding reset
     below removes, so the gutter has to come back here as section padding.

     The doubled class is not a typo: the Gladius rule is
     `.home-page .home-gladius.home-product`, specificity (0,3,0), which
     outranks a plain `.home-page section.home-gladius` (0,2,1). Matching its
     shape and relying on source order is what carries this. */
  .home-page .home-product.home-product,
  .home-page .home-eagleeye365-row.home-product,
  .home-page .home-gladius.home-product,
  .home-page .home-swift.home-product {
    padding-left: 20px;
    padding-right: 20px;
  }

  .home-page .home-product .home-inner,
  .home-page .home-product .home-product-copy {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  /* The copy stack is a plain block, but state the intent explicitly so a
     future `align-items` on an ancestor cannot re-centre it. */
  .home-page .home-product .home-product-copy {
    text-align: left;
    align-items: flex-start;
  }

  .home-page .home-product .home-product-mockup {
    width: 100%;
    max-width: 100%;
    justify-content: center;
  }
}


/* ============================================================
   "Proven Outcomes" — floating-card repositioning.
   Appended last so these win the tie against the Figma coordinates declared
   with the same specificity earlier in this file.

   WHY THESE MOVED. The card rects are Figma coordinates expressed as
   percentages of the 895x556 pane, and they were laid out against the ORIGINAL
   outcome bullets ("65% less manual evidence"). The content doc's rewrite made
   every bullet substantially longer ("Up to 65% reduction in audit evidence
   collection effort"), so .home-impact-outcomes — capped at 440px — now fills
   its whole column and runs to x=479. Two cards sat inside that column and
   were painting straight over the running text: on Aerospace & Defense the
   Evidence Collection Automation card overlapped the checklist by 93x66px, and
   on Manufacturing the Carbon Emission card clipped its right-hand edge.

   The text is the content and the cards are decoration, so the cards move, not
   the text: a narrower checklist would wrap every bullet onto three lines. Each
   card is pushed clear of x=479 and lifted so it also stops colliding with the
   card below it. Cards may extend past the pane's nominal 556px height (399
   already does) — the pane does not clip — but they are kept inside its width.

   MIND THE DRIFT IF YOU RETUNE THESE. updateHomeImpact() gives every card a
   scroll-linked offset, tx = dir * (58 * (1 - enter) + 22 * exit), so a card
   sits at its declared `left` only for the instant around vp 0.46; once
   scrolled past it settles about 22px back along its entry direction. Both
   cards moved here enter from the LEFT (dir -1), so they come to rest ~22px
   further left than the CSS says — which is why 54.5% measured clear on paper
   and still clipped the text by 10px on screen. The values below carry that
   22px, so read them as the declared position, not the resting one.
   ============================================================ */

/* Aerospace & Defense — Evidence Collection Automation.
   left 45.87% -> 54.5% clears the checklist by 9px; top 16.55% -> 11.5% lifts
   its base to y=210, above the Full NIST/SOX card at y=238 (they overlapped by
   6px vertically over a 130px span). Right edge lands at x=732 of 895. */
.home-impact-card--402 { left: 57%; top: 11.5%; }

/* Manufacturing — Carbon Emission Reduction Progress.
   left 51.16% -> 54.5% and width 45.12% -> 43.5%: the shift alone would put its
   right edge 3px from the pane wall, so it gives back a little width to keep an
   18px margin. top 15.47% -> 11% keeps its base clear of the cards below. */
.home-impact-card--409 { left: 57%; top: 11%; width: 42%; }

/* Manufacturing — Renewable Energy Adoption sat 20px inside the base of the
   "Outcome Achieved" card above it. */
.home-impact-card--411 { top: 64.5%; }

/* Real Estate & Construction — Key Performance Indicator overlapped the card
   above it by 23px across a 165px span. */
.home-impact-card--404 { top: 56%; }

/* Digital Marketing — Future Growth Focus overlapped Automated Audit Workflows
   by 15px. Moving right rather than down keeps it inside the pane height. */
.home-impact-card--408 { left: 52%; }


/* --- Outcome checklist must wrap -----------------------------------------
   css/rk-vertical-tabs.css (the legacy stylesheet this section's markup was
   ported from) carries `.rk-column-inner-tab h2, .rk-column-inner-tab ul > li
   { white-space: nowrap }`, written for the old design's one-line list items.
   Our bullets are full sentences since the content-doc rewrite, so inheriting
   that turns the longest one into a 614px single line that overruns its 440px
   column and slides straight under the floating cards — invisible to a
   getBoundingClientRect() check on the <li>, because the overflow escapes the
   box rather than widening it.

   Declared here rather than relying on that stylesheet being absent: the
   enqueue is now gated by template, but the legacy CSS can still reach this
   markup on any page that legitimately loads it, and a self-contained clone
   template should not depend on which sibling stylesheets happen to be on the
   page. */
.home-impact .home-impact-outcome-list li,
.home-impact .home-impact-outcome-list li span,
.home-impact .home-impact-card-list li,
.home-impact .home-impact-card-list li span {
  white-space: normal;
}


/* --- Feature cards on touch devices: reveal the copy ----------------------
   The four card descriptions are hover-revealed (opacity 0 / visibility hidden
   until .home-cards-item:hover), which mirrors the live page's .textAnimate
   behaviour. On a touch device :hover never fires, so all four descriptions
   were unreachable — the content doc's rewritten capability copy simply never
   appeared on a phone. (Pre-existing in the design, not introduced by the
   rebuild, but the rewrite made that copy the point of the section.)

   `(hover: none)` targets the actual capability rather than a width, so a
   touch laptop is covered and a merely-narrow desktop window is not. The
   result is the design's own revealed end-state made permanent: photo faded,
   description shown. Deliberately NOT copying the rest of the hover state —
   the -10px lift and the border wipe are pointer affordances and would just
   look like a stuck card.

   The (max-width: 640px) clause is belt-and-braces: some hybrid devices still
   report `hover: hover`, and 640px is where this grid already collapses to a
   single column, so anything that narrow should show the copy regardless. */
@media (hover: none), (max-width: 640px) {
  .home-page .home-cards-desc {
    visibility: visible;
    opacity: 1;
    transition: none;
  }
  .home-cards-media { opacity: 0; }
  /* With the photo gone the panel's min-height (480px, 320px under 640px) was
     reserving space for an image that is no longer drawn, leaving every card
     as a title, a sentence and a large empty box. Let them hug their content
     instead — the veil is inset:0 so it follows the shorter box automatically. */
  .home-cards-inner {
    background-color: var(--home-white);
    min-height: 0;
  }
}


/* --- Header spacer: suppressed, hero runs under the bar -------------------
   includes/custom-header gives a sticky header a sibling .rkch-spacer
   (`.rkch--sticky + .rkch-spacer { height: 78px }`, 64px at <=1024) to push
   content clear of the fixed bar. This page does not want it: the hero is
   meant to sit UNDER the glass header and carries its own top padding (200px
   desktop / 110px mobile) to clear it, so the spacer was adding a second,
   unwanted gap on top of that.

   Same rule the other three clone templates already carry for their own
   pages — see eagleeye-test.css:1126, financial-test.css:9,
   internal-auditing-test.css:9. Both ids are listed so the live front page
   (1139) and the clone-test page (15461) stay pixel-identical. */
body.page-id-1139 .rkch-spacer,
body.page-id-15461 .rkch-spacer { display: none !important; height: 0 !important; }