/*
 * EagleEye365 Clone — Test Page Stylesheet
 * Hand-coded (no Elementor, no GSAP). Scoped under .eet-page to avoid
 * bleeding into the rest of the site, and to avoid site styles bleeding in.
 * Design tokens sourced from the live page's Elementor global kit + the
 * hand-written "custom CSS" blocks in wp-content/uploads/elementor/css/post-6053.css
 */

.eet-page {
  --eet-primary: #233963;
  --eet-secondary: #D8506A;
  --eet-accent: #58AA2B;
  --eet-text: #1E2E4C;
  --eet-white: #FFFFFF;
  --eet-milk-white: #EDECEA;
  --eet-bg-light: #F5F5F5;
  --eet-gradient-teal-green: linear-gradient(90deg, #6AC2B7 0%, #8AD6C0 50%, #8ADBBB 75%, #86DCAF 87.5%, #84DDA5 93.75%, #95E091 96.88%, #9FDD5F 100%);
  --eet-gradient-primary-darker: linear-gradient(90deg, #47B0A3 0%, #4FB799 30.43%, #4CC86F 77.4%, #84BA4C 100%);
  --eet-card-shadow: 0 2px 6px 0 rgba(35, 57, 99, 0.22);
  --eet-stat-card-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
  --eet-chip-shadow: 0px 1.25px 4px rgba(35, 57, 99, 0.25);
  --eet-radius: 12px;

  font-family: "Public Sans", sans-serif;
  color: var(--eet-text);
  background: var(--eet-bg-light);
  /* No overflow-x here on purpose: setting overflow-x to anything but
     "visible" forces the browser to compute overflow-y as "auto" too (per
     spec, on EITHER axis), which turned this element into its own clipped
     scroll container inside the page's fixed-height smooth-scroll wrapper. */
}

.eet-page * {
  box-sizing: border-box;
}

.eet-page img { max-width: 100%; height: auto; display: block; }

.eet-page section {
  padding: 96px 4vw;
  position: relative;
}
.eet-page section.lm-cta-banner{
  padding: 0 4vw;
}
@media (max-width: 767px) {
  .eet-page section { padding: 56px 20px; }
}

.eet-inner {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ---------- Typography ---------- */

.eet-page h1, .eet-page h2, .eet-page h3, .eet-page h4 {
  font-family: "Public Sans", sans-serif;
  color: var(--eet-primary);
  font-weight: 700;
  margin: 0;
}

.eet-h2 {
  font-size: 42px;
  line-height: 1.15;
  font-weight: 700;
}

@media (max-width: 767px) {
  .eet-h2 { font-size: 28px; line-height: 1.25; }
}

.eet-cap { text-transform: capitalize; }
.eet-upper { text-transform: uppercase; }

.eet-page p { margin: 0; line-height: 1.55; }

.eet-eyebrow {
  display: block;
  color: #4FB799;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 4px;
}

/* Gradient (teal -> green) clipped text, matches .clipped-text on source */
.eet-gradient-text {
  background: var(--eet-gradient-teal-green);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Two-column header row used by most sections: heading left, copy right */
.eet-head-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  margin-bottom: 56px;
}

.eet-head-row p { color: var(--eet-text); font-size: 16px; }

@media (max-width: 900px) {
  .eet-head-row { grid-template-columns: 1fr; gap: 16px; }
}

/* ---------- Cards ---------- */

/* White elevated card — NO hover effect (confirmed static on source) */
.rk-normal-card {
  background: var(--eet-white);
  box-shadow: var(--eet-card-shadow);
  border-radius: 4px;
  padding: 32px;
}

.rk-normal-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--eet-primary);
  margin-bottom: 14px;
}

.rk-normal-card p {
  font-size: 15px;
  color: #43526B;
}

.eet-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.eet-card-grid--2col { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 900px) {
  .eet-card-grid, .eet-card-grid--2col { grid-template-columns: 1fr; }
}

/* Bordered stat card (dark sections) */
.eet-stat-card {
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  padding: 28px;
  box-shadow: var(--eet-stat-card-shadow);
}

.eet-stat-card h3 { color: var(--eet-white); font-size: 20px; margin-bottom: 10px; text-transform: capitalize; }
.eet-stat-card p { color: rgba(255, 255, 255, 0.75); font-size: 15px; margin-bottom: 20px; }

.eet-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: var(--eet-white);
  font-size: 14px;
  margin-bottom: 8px;
}

.eet-stat-row span { text-transform: capitalize; }
.eet-stat-row strong { color: #8AD6C0; font-size: 18px; }

/* Progress bar (teal->green gradient fill, used in "Proven Results") */
.eet-bar-track {
  height: 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.25);
  overflow: hidden;
}

.eet-bar-fill {
  height: 100%;
  border-radius: 8px;
  width: 0;
  background: var(--eet-gradient-primary-darker);
  transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.eet-bar-fill.eet-solid-orange { background: #F39C12; }

.eet-stat-card.in-view .eet-bar-fill,
.eet-mock-row.in-view .eet-bar-fill,
.eet-bar-fill.in-view { width: var(--eet-target-width, 0%); }

/* Callout / plain bordered card (no fill background) */
.eet-callout-card {
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  padding: 28px;
  text-align: center;
}
.eet-callout-card h4 { color: var(--eet-white); font-size: 19px; margin-bottom: 10px; text-transform: capitalize; }
.eet-callout-card p { color: rgba(255, 255, 255, 0.75); font-size: 14px; }

/* ---------- Buttons ---------- */

.eet-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Public Sans", sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.04em;
  padding: 17px 34px;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--eet-primary);
  background: var(--eet-white);
  color: var(--eet-primary);
  text-transform: uppercase;
  transition: opacity 0.2s ease, background 0.25s ease;
}

.eet-btn:hover { opacity: 0.85; }

.eet-btn--pill-outline-gradient {
  background: #E9ECF0;
  border: 3px solid transparent;
  background-image: linear-gradient(#E9ECF0, #E9ECF0), var(--eet-gradient-primary-darker);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  font-size: 12px;
  padding: 5px 11px;
  text-transform: none;
  border-radius: 24px;
}

/* ---------- Section 0: Hero ---------- */

.eet-hero {
  /* Dark ground BEHIND the video — added 2026-09-01.
     The hero copy is white and sits directly on a 9.2 MB mp4 with no poster
     frame, so until that file has buffered (or if it never does — blocked,
     data-saver, decode failure) the white h1/tagline/body rendered against the
     page's own light background and were effectively unreadable.
     This is deliberately a background-COLOR, not an overlay: the video covers
     the hero with object-fit:cover, so once it paints this is completely
     hidden. Nothing changes in the normal case — unlike the rgba(0,0,0,.5)
     scrims on .igl-hero-overlay / .isw-hero-overlay, which sit ON TOP of the
     footage and would have visibly darkened this page versus production.
     A real poster frame from this video is still the better fix; that needs an
     exported still, which is a design asset. --ds-navy, the brand dark. */
  background-color: #1e2e4c;
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 120px 4vw 80px;
  overflow: hidden;
}

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


.eet-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1360px;
  margin: 8vw auto;
  display: grid;
  grid-template-columns: 1.4fr 0.85fr;
  gap: 56px;
  align-items: center;
}

.eet-hero-mark {
  width: min(30vw, 320px);
  min-width: 220px;
  margin-bottom: 24px;
  filter: brightness(0) invert(1); /* render the lockup white over the video */
}

.eet-hero .eet-hero-h1 {
  color: #fff;
  font-size: clamp(28px, 3.2vw, 46px);
  font-weight: 700;
  line-height: 1.12;
  max-width: 720px;
  margin: 0 0 14px;
}
.eet-hero-tagline {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
  margin-bottom: 18px;
  background: var(--eet-gradient-teal-green);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.eet-page .eet-hero-copy {
  color: rgba(255, 255, 255, 0.9);
  font-size: 17px;
  line-height: 1.6;
  max-width: 620px;
  margin: 0 0 32px;
}
.eet-hero-copy a {
  color: #9FDD5F;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.eet-hero-copy a:hover { color: #C6F08F; }

.eet-hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; }
/* Consistent size for both hero CTAs (overrides the smaller --readmore padding) */
.eet-hero-ctas .eet-btn { padding: 17px 34px; font-size: 15px; letter-spacing: 0.04em; }
.eet-btn--ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: #fff;
  text-transform: none;
  font-weight: 600;
}
.eet-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); opacity: 1; }
.eet-hero-ctas .eet-btn--readmore { text-transform: none; }

/* Right-side "New in EagleEye365®" feature panel (uses the empty hero space) */
.eet-hero-aside {
  justify-self: end;
  width: 100%;
  max-width: 400px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 28px;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.6);
}
.eet-hero-newbadge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0B1E46;
  background: var(--eet-gradient-teal-green);
  padding: 7px 14px;
  margin-bottom: 18px;
}
.eet-hero-featlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.eet-hero-featlist li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 12px 16px;
}
.eet-hero-featlist li::before {
  content: "\2713"; /* tick mark */
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  background: var(--eet-gradient-teal-green);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

@media (max-width: 980px) {
  .eet-hero-inner { grid-template-columns: 1fr; gap: 36px; }
  .eet-hero-aside { justify-self: start; max-width: 520px; }
}
@media (max-width: 767px) {
  .eet-hero { padding: 110px 20px 60px; }
  .eet-hero-mark { width: 66vw; }
  .eet-hero-ctas .eet-btn { width: 100%; justify-content: center; }
}

/* ---------- Section 2: Purpose-built / Governance Excellence tabs ----------
   Matches Figma: the whole component sits inside a Mac browser-chrome mockup —
   navy 5px border, 24px radius, a toolbar image on top, the section header band
   inside the frame, then the vertical-tabs row below it. */

:root {
  --rk-inactive-tab-width: 10.94%;
  --rk-active-tab-width: 78.12%;
}

/* Browser-chrome frame */
.eet-screen-mock {
  border: 5px solid var(--eet-text); /* #1E2E4C */
  border-radius: 24px;
  overflow: hidden;
  background: var(--eet-text);
}

.eet-chrome-bar {
  height: 66px;
  line-height: 0;
  background: #1E2E4C;
}
.eet-chrome-bar img {
  width: 100%;
  height: 66px;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Header band inside the frame */
.eet-gov-header {
  background: #F4F6F9;
  padding: 32px;
  border-bottom: 1px solid #BDC4D1;
}
.eet-gov-header .eet-eyebrow { margin-bottom: 6px; }
.eet-gov-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
}
.eet-gov-header-row .eet-h2 {
  max-width: 490px;
  line-height: 1.05;
}
.eet-gov-header-row p {
  width: 693px;
  max-width: 55%;
  color: var(--eet-text);
  font-size: 16px;
  line-height: 1.6;
}

.rk-vertical-tabs-wrapper {
  display: flex;
  width: 100%;
  background: #F4F6F9;
}

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

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

/* Collapsed vertical tab header */
.rk-column-title-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  cursor: pointer;
  background: #F4F6F9;
  border-left: 1px solid #BDC4D1;
  padding: 30px 8px;
  flex-shrink: 0;
  width: 100%;
  min-height: 634px;
}

.rm-column-tab.active .rk-column-title-wrapper { display: none; }

@media (min-width: 1025px) {
  .rm-column-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    font-weight: 600;
    color: var(--eet-text);
  }
  .rm-column-title .eet-tab-num { font-size: 32px; }
  .rm-column-title .eet-tab-name {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    font-size: 32px;
  }
}

.rk-column-inner-tab {
  position: relative;
  max-width: 0;
  overflow: hidden;
  height: 0;
  transition: max-width 1s ease-in-out, opacity 0.5s ease-in-out;
  width: 100%;
}

.rk-column-inner-tab.active {
  max-width: 100%;
  height: auto;
}

/* Active tab: coloured title bar (78px) + content area with chart at bottom */
.rk-inner-heading-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  padding: 0 32px;
}
.rk-inner-heading-wrapper h3 { font-size: 32px; font-weight: 600; color: var(--eet-text); }
.rk-inner-heading-wrapper .eet-tab-num { font-size: 32px; font-weight: 600; color: var(--eet-text); }

.rk-inner-tab-content {
  position: relative;
  min-height: 556px;
  padding: 32px 40px 0;
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 92% auto;
}

.rk-inner-tab-content ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rk-inner-tab-content li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  color: var(--eet-text);
  margin-bottom: 9px;
}

.rk-inner-tab-content li::before {
  content: "\2713";
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #2ECC71;
  color: #fff;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Per-tab accent colours (title bar + content bg + chart) */
.eet-tab-01 .rk-inner-heading-wrapper { background: #F5E6F9; }
.eet-tab-01 .rk-inner-tab-content {
  background-color: #FEFAFF;
  background-image: url("/wp-content/uploads/2025/12/Frame-2147224024.png");
}
.eet-tab-02 .rk-inner-heading-wrapper { background: #FDF0DC; }
.eet-tab-02 .rk-inner-tab-content {
  background-color: #FFFBF5;
  background-image: url("/wp-content/uploads/2025/12/Frame-2147224025.png");
}
.eet-tab-03 .rk-inner-heading-wrapper { background: #E3F2FD; }
.eet-tab-03 .rk-inner-tab-content {
  background-color: #F5FEFF;
  background-image: url("/wp-content/uploads/2025/12/Frame-2147224025-1.png");
}

@media (max-width: 1024px) {
  .eet-gov-header-row { flex-direction: column; gap: 16px; }
  .eet-gov-header-row .eet-h2, .eet-gov-header-row p { max-width: 100%; width: 100%; }
  .rk-vertical-tabs-wrapper { flex-direction: column; }
  .rm-column-tab { width: 100% !important; flex-direction: column; }
  .rk-column-title-wrapper { min-height: 0; border-left: none; border-top: 1px solid #BDC4D1; padding: 16px; }
  .rm-column-title { flex-direction: row !important; justify-content: space-between !important; width: 100%; gap: 16px !important; }
  .rm-column-title .eet-tab-name { writing-mode: horizontal-tb !important; transform: none !important; font-size: 20px !important; }
  .rm-column-title .eet-tab-num { font-size: 20px !important; }
  .rk-inner-tab-content {
    min-height: 0;
    padding: 20px;
    background-size: 100% auto;
    background-position: bottom center;
    padding-bottom: 60%;
  }
  .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;
  }
  .rk-column-inner-tab.active { height: auto; opacity: 1; }
}

/* ---------- Section 4 / 8: dashboard mockups ---------- */

.eet-mock-panel {
  background: #fff;
  border-radius: 8px;
  box-shadow: var(--eet-chip-shadow);
  padding: 16px;
}

.eet-mock-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--eet-text);
  padding: 8px 0;
  border-bottom: 1px solid #F0F1F4;
}
.eet-mock-row:last-child { border-bottom: none; }

.eet-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
  margin-right: 8px;
  flex-shrink: 0;
}

.eet-ring {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--eet-primary);
  background: conic-gradient(#F39C12 calc(var(--eet-ring-pct, 70) * 1%), #EDEAF3 0);
}
.eet-ring::before {
  content: "";
  position: absolute;
}
.eet-ring-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.eet-ring-wrap .eet-ring-inner {
  position: absolute;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #fff;
}
.eet-ring-wrap span { position: relative; z-index: 1; font-size: 13px; font-weight: 700; color: var(--eet-primary); text-align: center; }

/* ---------- Section 6: sticky quick-setup ---------- */

.eet-sticky-row {
  display: grid;
  grid-template-columns: 0.9fr 1.4fr;
  gap: 48px;
  align-items: start;
}

@media (max-width: 900px) {
  .eet-sticky-row { grid-template-columns: 1fr; }
}

.eet-sticky-heading {
  position: sticky;
  top: 120px;
}

.eet-steps { display: flex; flex-direction: column; gap: 40px; }

.step-card {
  position: relative;
  background: #fff;
  border-radius: 4px;
  padding: 40px;
  margin-top: 32px;
  box-shadow: 0 1px 4px rgba(35, 57, 99, 0.08);
  opacity: 0.5;
  transform: translateY(20px) scale(0.98);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.step-card.is-active { opacity: 1; transform: translateY(0) scale(1); }

/* Big lavender step number overlapping the top-left edge of the card */
.step-card .eet-tab-num {
  position: absolute;
  left: 40px;
  top: -36px;
  font-size: 64px;
  line-height: 1;
  font-weight: 800;
  color: #CEBDDA;
}

.step-card h3 { font-size: 28px; font-weight: 600; margin-bottom: 12px; color: var(--eet-text); }
.step-card p { font-size: 16px; color: var(--eet-text); line-height: 1.5; }

@media (max-width: 767px) {
  .eet-sticky-heading { position: static; }
  .step-card { opacity: 1; transform: none; }
}

/* ---------- Section 4: proven results (dark) ---------- */

.eet-dark {
  background-color: #1E2E4C;
  background-image: url("/wp-content/uploads/2025/12/54a768dcea5da5e17c5698fa431189da72b85889-scaled-1-1.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
}

/* navy overlay so the wireframe wave pattern stays subtle, like the live page */
.eet-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(23, 36, 62, 0.55);
  z-index: 0;
  pointer-events: none;
}

.eet-dark .eet-h2, .eet-dark h2 { color: var(--eet-white); }
.eet-dark .eet-head-row p { color: rgba(255, 255, 255, 0.8); }

.eet-tail-line {
  text-align: center;
  color: rgba(255, 255, 255, 0.75);
  font-size: 15px;
  margin-top: 48px;
}

/* Section 7 (lead-magnet CTA banner) now renders via lead_magnet_render() —
   see inc/lead-magnet/assets/lead-magnet.css for its styling. */

/* ---------- Section 8: Real-World Use Stories ---------- */

.eet-pink-bg { background: #F6EAF7; }

/* Case-study panel — Mac-window-style navy frame */
.eet-case-panel {
  position: relative;
  border: 5px solid var(--eet-text); /* #1E2E4C */
  border-radius: 24px;
  padding: 20px;
  display: grid;
  grid-template-columns: 42% 1fr;
  gap: 34px;
  align-items: center;
  background: #F4F6F9;
  box-shadow: inset 0 0 0 1px #BDC4D1, 0 4px 10px rgba(0, 0, 0, 0.12);
  margin-bottom: 40px;
}

.eet-case-panel:last-child { margin-bottom: 0; }

/* Right copy column */
.eet-case-copy { padding: 20px 24px; display: flex; flex-direction: column; gap: 24px; }
.eet-case-copy .eet-eyebrow { margin: 0; font-size: 13px; }
.eet-case-copy h3 { font-size: 36px; font-weight: 700; text-transform: capitalize; color: var(--eet-text); line-height: 1.1; }
.eet-case-block p { font-size: 15px; color: #374151; line-height: 1.55; }
.eet-case-block strong { display: block; font-size: 16px; color: var(--eet-text); margin-bottom: 4px; }
.eet-case-copy ul { margin: 6px 0 0; padding-left: 22px; }
.eet-case-copy li { font-size: 16px; color: var(--eet-text); line-height: 1.5; margin-bottom: 4px; }

/* Impact Achieved glass box (pale green gradient) */
.eet-impact-box {
  border-radius: 8px;
  padding: 18px 20px;
  font-size: 15px;
  color: var(--eet-text);
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: linear-gradient(7deg, rgba(227, 255, 204, 0.6) 0%, rgba(208, 255, 241, 0.6) 100%);
  box-shadow: -11px -10px 48px -12px rgba(250, 255, 247, 0.4),
    inset 2px 2px 9px rgba(255, 255, 255, 0.5);
}
.eet-impact-box strong { display: inline-flex; align-items: center; gap: 8px; color: var(--eet-text); }
.eet-impact-box .eet-check {
  width: 20px; height: 20px; flex-shrink: 0;
  border-radius: 50%; border: 2px solid var(--eet-text);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--eet-text);
}

/* READ MORE gradient button */
.eet-btn--readmore {
  align-self: flex-start;
  background: var(--eet-gradient-teal-green);
  border: 1px solid #6AC2B7;
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  border-radius: 4px;
  padding: 12px 16px;
  text-transform: uppercase;
  box-shadow: -1.8px -1.7px 6px rgba(124, 205, 188, 0.25),
    inset 2px 2px 9px rgba(255, 255, 255, 0.13);
}

/* ---- Left dashboard mockup ---- */
.eet-case-mock {
  background: #fff;
  border-radius: 13px;
  box-shadow: 0 10px 18px rgba(35, 57, 99, 0.12);
  padding: 22px 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
  align-content: start;
}
.eet-rr-title { font-size: 16px; font-weight: 600; color: #0B1E46; margin-bottom: 12px; }

/* Scatter plot */
.eet-rr-scatter { grid-column: 1; }
.eet-rr-plot {
  position: relative;
  aspect-ratio: 223 / 169;
  background-color: #FEFAFF;
  border: 1px solid #DADEE3;
  border-radius: 8px;
  background-image: repeating-linear-gradient(#DADEE3 0 1px, transparent 1px 25%),
    repeating-linear-gradient(90deg, #DADEE3 0 1px, transparent 1px 25%);
  margin: 4px 0 6px;
}
.eet-rr-node {
  position: absolute;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0.5px;
  transform: translate(-50%, -50%);
}
.eet-rr-axis-y { position: absolute; left: -6px; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: left; font-size: 11px; color: #6D7580; white-space: nowrap; }
.eet-rr-axis-x { text-align: center; font-size: 11px; color: #6D7580; }

/* Risk summary rows */
.eet-rr-summary { grid-column: 2; }
.eet-rr-srow {
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; box-shadow: 0 1.25px 3px rgba(35, 57, 99, 0.25);
  border-radius: 6px; padding: 7px 14px; margin-bottom: 12px;
}
.eet-rr-srow .lbl { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #132C55; }
.eet-rr-srow .val { font-size: 14px; font-weight: 600; color: var(--eet-text); }
.eet-rr-sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* Layered pill rows */
/* flow-root stops .behind's margin-top from collapsing through this box
   (it was escaping to the parent instead of creating the internal offset,
   so .front ended up fully covering .behind's text). */
.eet-rr-pill { position: relative; margin-bottom: 22px; display: flow-root; }
.eet-rr-pill .behind {
  background: #fff; box-shadow: 0 1.25px 3px rgba(35, 57, 99, 0.25);
  border-radius: 6px; padding: 7px 14px; font-size: 14px; color: var(--eet-text);
  margin-top: 18px;
}
.eet-rr-pill .front {
  position: absolute; top: -4px; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  background: #9B59B6; box-shadow: 0 1.25px 3px rgba(35, 57, 99, 0.25);
  border-radius: 6px; padding: 7px 8px 7px 14px; color: #fff; font-size: 14px; font-weight: 600;
}
.eet-rr-pill .front .chip { background: #580A77; border-radius: 4px; padding: 1px 10px; font-size: 13px; }

/* Live activity feed */
.eet-rr-feed { grid-column: 1 / -1; }
.eet-rr-feedbox { background: #FBF5FF; border: 1px solid #E2E8F0; border-radius: 8px; padding: 12px 14px; }
.eet-rr-frow { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--eet-text); padding: 3px 0; }
.eet-rr-frow .msg { flex: 1; }
.eet-rr-frow .time { color: #6D7580; white-space: nowrap; }
.eet-rr-fdot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* Overall risk donut */
.eet-rr-risk { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; }
.eet-rr-donut {
  width: 104px; height: 104px; border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(#B623E4 0turn, #6626A5 0.62turn, #1E2E4C 0.62turn 1turn);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.eet-rr-donut::after {
  content: ""; position: absolute; inset: 14px; border-radius: 50%;
  background: #fff; box-shadow: inset 0 0 0 1px #D7E1EC;
}
.eet-rr-donut .ctr { position: relative; z-index: 1; text-align: center; line-height: 1.1; }
.eet-rr-donut .ctr b { display: block; font-size: 20px; font-weight: 700; color: var(--eet-text); }
.eet-rr-donut .ctr span { font-size: 13px; font-weight: 500; color: var(--eet-text); }
.eet-rr-legend { display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: #415267; }
.eet-rr-legend div { display: flex; align-items: center; gap: 8px; }
.eet-rr-legend i { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }

@media (max-width: 980px) {
  .eet-case-panel { grid-template-columns: 1fr; gap: 20px; }
  .eet-case-copy { padding: 12px; }
  .eet-case-copy h3 { font-size: 28px; }
}

/* The mockup's internal 2-col grid also needs to collapse — it was staying
   fixed at 1fr 1fr even after the outer panel went full-width single-column,
   squeezing the Risk Summary / pill rows into ~130px columns and truncating
   their text (e.g. "Backup Completion" getting cut to "Completion"). */
@media (max-width: 640px) {
  .eet-case-mock { grid-template-columns: 1fr; }
  .eet-rr-scatter, .eet-rr-summary { grid-column: 1 / -1; }
  .eet-exec-grid, .eet-kri-grid { grid-template-columns: 1fr; }
}

/* ---------- Section 9: Scale With Security ---------- */

/* Section holds a scroll-parallax wave pattern behind the card */
.eet-section-scale { position: relative; overflow: hidden; }
.eet-scale-pattern {
  position: absolute;
  left: 0; right: 0; top: -30%; height: 160%;
  background: url("/wp-content/uploads/2025/12/54a768dcea5da5e17c5698fa431189da72b85889-scaled-1.png") no-repeat center center;
  background-size: cover;
  opacity: 0.18;
  z-index: 0;
  will-change: transform;
  pointer-events: none;
}

.eet-scale-card {
  background: linear-gradient(14.7deg, #E3FFCC 0%, #D0FFF1 100%);
  border-radius: 0; /* Figma: sharp corners */
  padding: 56px 86px;
  min-height: 336px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  transition: box-shadow 0.45s ease;
}

.eet-scale-card:hover { box-shadow: 0 20px 46px -20px rgba(24, 165, 123, 0.45); }

/* Gradient border that fades in smoothly on hover (mask ring trick) */
.eet-scale-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 3px;
  background: var(--eet-gradient-primary-darker);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: 3;
}
.eet-scale-card:hover::before { opacity: 1; }

/* Diagonal green facet fill — transitions smoothly on hover */
.eet-scale-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='994' height='304' viewBox='0 0 994 304' fill='none'><path d='M496.911 2.22449e-05L994 0V499.089L745.544 748.545L497.089 998H2.08815e-05L0 498.91L248.455 249.455L496.911 2.22449e-05Z' fill='url(%23paint0_linear_982_4471)'/><defs><linearGradient id='paint0_linear_982_4471' x1='629.88' y1='-144.351' x2='192.902' y2='550.049' gradientUnits='userSpaceOnUse'><stop stop-color='%2318A57B'/><stop offset='1' stop-color='%2318A57B' stop-opacity='0.5'/></linearGradient></defs></svg>") no-repeat right center;
  background-size: auto 100%;
  opacity: 0.1;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.eet-scale-card:hover::after { opacity: 0.22; }

.eet-scale-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.eet-scale-copy .eet-h2 { line-height: 1.1; }

.eet-scale-copy p {
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  max-width: 488px;
  color: var(--eet-text);
}

.eet-scale-badges {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.eet-scale-badges img { width: 80px; height: 80px; object-fit: contain; }

/* Outline button (GET A DEMO) */
.eet-btn--outline {
  background: transparent;
  border: 2px solid var(--eet-primary);
  color: var(--eet-primary);
  border-radius: 0;
  padding: 14px 18px;
  font-size: 18px;
  font-weight: 600;
}

@media (max-width: 767px) {
  .eet-scale-card { padding: 32px 24px; }
  .eet-scale-copy { gap: 24px; }
}

/* ---- Section 8 · Panel 2 (Internal Audit) infographic ---- */
.eet-mock-audit { display: block; }
.eet-audit-bars { margin-bottom: 20px; }
.eet-audit-row { margin-bottom: 14px; }
.eet-audit-row .rowtop { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.eet-audit-row .lbl { font-size: 15px; font-weight: 600; color: var(--eet-text); }
.eet-audit-row .pct { font-size: 14px; font-weight: 600; color: var(--eet-text); }
.eet-abar { height: 7px; border-radius: 6px; background: #E9ECF0; overflow: hidden; }
.eet-abar > i { display: block; height: 100%; border-radius: 6px; background: #F39C12; }

.eet-audit-score { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.eet-score-donut {
  width: 96px; height: 96px; border-radius: 50%; flex-shrink: 0; position: relative;
  background: conic-gradient(#F39C12 0turn 0.72turn, #1E2E4C 0.72turn 1turn);
  display: flex; align-items: center; justify-content: center;
}
.eet-score-donut::after { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: #fff; }
.eet-score-donut b { position: relative; z-index: 1; font-size: 22px; font-weight: 700; color: var(--eet-text); }
.eet-score-info { flex: 1; }
.eet-score-toprow { display: flex; align-items: flex-start; justify-content: space-between; }
.eet-score-trend { font-size: 15px; font-weight: 600; color: var(--eet-text); }
.eet-score-trend .up { color: #2ECC71; }
.eet-trend-sub { font-size: 13px; font-weight: 400; color: #6D7580; }
.eet-ai-badge { display: inline-block; font-size: 12px; font-weight: 600; color: #2ECC71; background: #ECFBF2; border: 1px solid #B9EBCB; border-radius: 20px; padding: 3px 10px; white-space: nowrap; }
.eet-conf { display: flex; justify-content: space-between; font-size: 13px; color: #6D7580; margin: 12px 0 6px; }
.eet-conf b { color: #F39C12; }

.eet-exec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
.eet-exec-card { border: 1px solid #EBEEF2; border-radius: 8px; overflow: hidden; }
.eet-exec-card .top { display: flex; justify-content: space-between; align-items: center; background: #FFF5E6; padding: 8px 12px; font-size: 14px; font-weight: 600; color: var(--eet-text); }
.eet-exec-card .top span { background: #F39C12; color: #fff; font-size: 12px; border-radius: 4px; padding: 1px 8px; }
.eet-exec-card .bot { padding: 8px 12px; font-size: 13px; color: #545D69; }

/* ---- Section 8 · Panel 3 (ERM) infographic ---- */
.eet-mock-erm { display: block; }
.eet-erm-feed { background: #FBF5FF; border: 1px solid #E2E8F0; border-radius: 8px; padding: 12px 14px; margin-bottom: 20px; }
.eet-erm-feed .row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--eet-text); padding: 3px 0; }
.eet-erm-feed .row .msg { flex: 1; }
.eet-erm-feed .row .time { color: #6D7580; white-space: nowrap; }
.eet-erm-feed .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.eet-erm-mid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 16px; margin-bottom: 20px; align-items: start; }
.eet-heatmap { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 6px 0 4px 22px; }
.eet-heatmap span { aspect-ratio: 1; border-radius: 3px; }
.eet-heat-wrap { position: relative; }
.eet-heat-y { position: absolute; left: 0; top: 40%; transform: translateY(-50%) rotate(-90deg); transform-origin: left; font-size: 11px; color: #6D7580; }
.eet-heat-x { text-align: center; font-size: 11px; color: #6D7580; margin-left: 22px; }

.eet-kri-gauges { display: flex; gap: 16px; margin-top: 6px; }
.eet-kri-gauge {
  width: 74px; height: 74px; border-radius: 50%; position: relative;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.eet-kri-gauge.orange { background: conic-gradient(#F39C12 0turn 0.78turn, #F0E2CC 0.78turn 1turn); }
.eet-kri-gauge.red { background: conic-gradient(#FF6B6B 0turn 0.32turn, #F3D6D6 0.32turn 1turn); }
.eet-kri-gauge::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #fff; }
.eet-kri-gauge b { position: relative; z-index: 1; font-size: 15px; font-weight: 700; color: var(--eet-text); line-height: 1.1; }
.eet-kri-gauge b span { display: block; font-size: 11px; font-weight: 600; }

.eet-kri-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
.eet-kri-card { display: flex; align-items: center; gap: 12px; border: 1px solid #EBEEF2; border-radius: 8px; padding: 12px 14px; box-shadow: 0 1px 3px rgba(35,57,99,0.06); }
.eet-kri-card .circ { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; }
.eet-kri-card b { display: block; font-size: 15px; color: var(--eet-text); }
.eet-kri-card span { font-size: 12px; color: #6D7580; }

@media (max-width: 980px) {
  .eet-erm-mid { grid-template-columns: 1fr; }
}

/* ---------- Section 3: Core Capabilities — Figma spacing ---------- */
.eet-section-core .eet-h2 { margin-bottom: 48px; max-width: 900px; }
.eet-section-core .rk-normal-card { padding: 28px 32px; }
.eet-section-core .rk-normal-card h3 { margin-bottom: 8px; }
.eet-section-core .rk-normal-card p { font-size: 15px; color: #43526B; line-height: 1.5; }

/* ---------- Section 3: Core Capabilities — role cards (optimized copy) ---------- */
.eet-role-grid { grid-template-columns: repeat(3, 1fr); }
.eet-role-card { display: flex; flex-direction: column; padding: 32px; }
.eet-role-card .eet-eyebrow { font-size: 13px; margin-bottom: 10px; }
.eet-role-card h3 { font-size: 22px; font-weight: 700; color: var(--eet-primary); margin-bottom: 12px; line-height: 1.2; }
.eet-role-card > p { font-size: 15px; color: #43526B; margin-bottom: 20px; line-height: 1.55; }
.eet-role-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.eet-role-list li { position: relative; padding-left: 28px; font-size: 15px; color: #43526B; line-height: 1.5; }
.eet-role-list li::before {
  content: "\2713";
  position: absolute; left: 0; top: 1px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--eet-accent); color: #fff; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
}
.eet-role-list li strong { color: var(--eet-primary); }
@media (max-width: 900px) { .eet-role-grid { grid-template-columns: 1fr; } }

/* ---------- Disclaimer footnote (above legal footer) ---------- */
.eet-disclaimer { background: var(--eet-bg-light); padding: 8px 4vw 40px; }
.eet-disclaimer p { font-size: 12px; line-height: 1.6; color: #8A93A3; max-width: 1400px; margin: 0 auto; }
.eet-disclaimer strong { color: #6D7580; }

/* ---------- Overlap the fixed glass header (match /capabilities/ pages) ----------
   This page opts out of ScrollSmoother, so the header's flow spacer would push the
   hero down. Drop the spacer so the hero runs full-bleed under the fixed header. */
body.page-id-15396 .rkch-spacer, body.page-id-6053 .rkch-spacer { display: none !important; height: 0 !important; }

/* ---------- Design preference: NO border-radius on chips / buttons / badges / pills ---------- */
.eet-page .eet-btn,
.eet-page .eet-hero-newbadge,
.eet-page .eet-ai-badge,
.eet-page .eet-exec-card .top span,
.eet-page .eet-rr-srow,
.eet-page .eet-rr-pill .behind,
.eet-page .eet-rr-pill .front,
.eet-page .eet-rr-pill .front .chip { border-radius: 0 !important; }

/* ---------- Inline content links (Governance intro, Core Capabilities cards) ----------
   On light backgrounds — use the primary navy with an accent-green underline instead
   of the hero's bright green (which only works against the dark video). */
.eet-gov-header-row p a,
.eet-role-card p a,
.eet-role-list a {
  color: var(--eet-primary);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--eet-accent);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}
.eet-gov-header-row p a:hover,
.eet-role-card p a:hover,
.eet-role-list a:hover { text-decoration-color: var(--eet-primary); }

/* ---------- Inline body link ----------------------------------------------
   Matches the treatment already used by this page's existing blog links
   (.eet-gov-header-row p a etc: primary, 700, underlined) but as a reusable
   class, because that rule is scoped to three specific containers and a bare
   <a> anywhere else renders unstyled. Added 2026-08-13 with the SEO internal
   links in what-sets-apart / tabs / proven-results. */
.eet-link {
  color: var(--eet-primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.eet-link:hover, .eet-link:focus-visible { text-decoration-thickness: 2px; }