/* ============================================================
   styles.css — eG Innovations IT Monitoring Diagnostic
   App-specific overrides on top of demo-shared-resources/common.css
   ============================================================ */

/* ── eG BANNER ── */
.eg-banner {
  width: 100%;
  background: #1a1f2e;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  line-height: 0;
}
.eg-banner img {
  display: block;
  max-width: 860px;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* ── LOCAL TOKEN ALIASES (common.css uses --blue-dark etc) ── */
:root {
  --paper:      #ffffff;
  --paper-alt:  #f9f9f9;
  --text-body:  #444444;
  --text-muted: #666666;
  --steel:      #999999;
  --brand:      var(--blue-dark);
  --brand-dark: #1E3550;
  --data-1:     #18AA9D;
  --data-2:     #F98806;
  --data-3:     #FF6F59;
  --accent-red: #C8102E;
}

/* ============================================================
   eG INNOVATIONS BRAND OVERRIDE
   Pulled from eginnovations.com live source (Sept 2026).
   Remaps the common.css design-system tokens so every shared
   component (buttons, headings, cards) inherits eG's palette
   without touching common.css itself.
   Typeface note: eG's brand font is Graphik (proprietary, not
   web-licensed here). Plus Jakarta Sans is used as the closest
   free equivalent — same grotesque-sans character, similar
   x-height. Swap if a licensed Graphik webfont becomes available.
   ============================================================ */
:root {
  /* Core brand palette (2026-09-06: replaced eG's blue/orange with
     Well Connected's own navy/red, pulled from wellconnected.net.au's
     computed styles - see handoff doc for the source values. The three
     eG navy shades and the separate accent blue all collapse to the one
     Well Connected navy, since that site only has a single navy, not a
     tonal range - the --eg-navy-1/2/3 page-background gradient below is
     now a flat navy rather than a 3-stop blend as a result.) */
  --eg-navy-1:      #1C244B;
  --eg-navy-2:      #1C244B;
  --eg-navy-3:      #1C244B;
  --eg-blue:        #1C244B;
  --eg-blue-grad:   linear-gradient(to right, #1C244B, #1C244B);
  --eg-orange:      #EA1C2D;
  --eg-orange-grad: linear-gradient(to right, #EA1C2D, #EA1C2D);
  --eg-amber-vivid: #FFA000;
  --eg-stat-blue:   #134590;
  --eg-body-gray:   #6d6d6d;
  --eg-alt-bg:      #f8f8f8;
  --eg-footer:      #111f38;

  /* Remap common.css component tokens onto eG palette */
  --blue-dark:         var(--eg-navy-2);
  --blue:              var(--eg-blue);
  --colour-primary:    var(--eg-navy-2);
  --colour-secondary:  var(--eg-navy-1);
  --colour-accent:     var(--eg-orange);
  --colour-text-body:  var(--eg-body-gray);
  --colour-background: #ffffff;
}

/* Heading font swap: Graphik-style grotesque sans instead of Space Grotesk's geometric feel */
h1, h2, h3, .cta-btn, .header-title, .q-prompt {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

/* common.css caps body-copy at 680px with margin:0 (left-aligned),
   leaving a wide dead gap on the right inside the ~780px-wide hero
   card. Full width instead, matching the h1 and CTA row above/below it. */
.body-copy {
  max-width: none;
}

/* Question prompt: reserve space for 3 lines always, regardless of
   whether this particular question wraps to 2 or 3 — otherwise the
   slider/nav-row shift vertical position question to question. */
.q-prompt {
  min-height: 4.5em;
}

/* eG's signature pill buttons + orange primary action.
   Hover/active roll orange → dark blue, per 2026-09-03 direction. */
.cta-btn {
  background: var(--eg-orange);
  border-radius: 40px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: background-color 0.35s ease;
}
.cta-btn:hover:not(:disabled) { background: var(--eg-navy-2); }
.cta-btn:active:not(:disabled) { background: var(--eg-navy-1); }

/* Question title (e.g. "End-to-End Visibility") — same amber as
   the buttons (--eg-orange). The richer --eg-amber-vivid tried
   here first looked washed out next to the buttons' solid color;
   matching them exactly reads more solid/bright. Still looked
   thin at IBM Plex Mono 600/14px — bumped weight/size for real
   heft, since color alone wasn't fixing the "washed out" read. */
.q-title {
  color: var(--eg-orange);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
}

/* Back/Next: orange by default, roll to the same rich navy the
   CTA buttons use on hover — was deliberately a lighter blue to
   feel "distinct" from primary actions, but next to the landing
   page's dark hover that just read as mismatched, not intentional.
   One hover language everywhere instead. */
.nav-btn {
  background: var(--eg-orange);
  color: #ffffff;
  border: none;
  transition: background-color 0.25s ease;
}
.nav-btn:hover:not(:disabled) {
  background: var(--eg-navy-2);
  color: #ffffff;
}
.nav-btn:disabled {
  background: #e0e0e0;
  color: #aaa;
}

.nav-btn, .step-btn, .toggle-btn, .chip-btn, .form-back {
  border-radius: 40px;
}
.step-btn:hover:not(:disabled) {
  border-color: var(--eg-blue);
  color: var(--eg-blue);
}
.toggle-btn.sel {
  border-color: var(--eg-blue);
  background: rgba(1,96,224,0.06);
  color: var(--eg-blue);
}
.chip-btn { border-color: var(--eg-blue); color: var(--eg-blue); }
.chip-btn:hover { background: var(--eg-blue); }

/* ============================================================
   PAGE BACKGROUND + CARD POP (2026-09-03)
   Matches eG's real hero treatment: deep navy gradient page,
   white content cards floating on top with real lift instead
   of the flat white-on-white the demo shipped with.
   ============================================================ */
html, body, .screen {
  background: linear-gradient(160deg, var(--eg-navy-1) 0%, var(--eg-navy-2) 45%, var(--eg-navy-3) 100%);
  background-attachment: fixed;
}

/* ── STICKY FOOTER (2026-09-04) ──
   Shrinking .screen's min-height fixed the excess gap above/below the
   card, but exposed a real, separate bug: nothing ever pinned the
   footer to the bottom of the viewport. On a tall screen with short
   content, the footer just renders right after the card and whatever
   viewport space is left below it shows through as bare page
   background (navy) — looks like the footer "floating" above a big
   empty gap. Fixed with a standard flex sticky-footer: body stretches
   to at least the full viewport height, and the one active .screen
   grows to fill whatever space header+footer don't use, pushing the
   footer to the true bottom regardless of content length. */
html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.screen.active {
  flex: 1 0 auto;
}

/* Card gap above/below is a fixed padding value, not viewport-relative
   centering — that approach (min-height reserve + flex centre) made the
   gap depend on viewport height, which got fiddled tight across a couple
   of passes and couldn't be dialled to an exact size. Padding alone is
   predictable: this value IS the gap, on every screen.
   IMPORTANT: min-height: auto explicitly overrides common.css's own
   `.screen { min-height: calc(100vh - 160px); }` — that base rule was
   still silently in effect the whole time, since omitting a property
   here doesn't cancel an earlier rule that already set it. That's why
   this looked unfixed even after several padding-only passes. */
.screen.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: auto;
  padding: 2rem 24px;
}

/* All cards share one height so nothing visibly resizes when
   moving between screens (landing → first question was the
   worst offender). Each card is a flex column with its bottom
   action row (button/nav) pinned via margin-top:auto below,
   so the shared height never reads as empty dead space. */
.hero, .priorities-wrap, .assess-wrap, .confirm-wrap, .results-wrap, .thanks-wrap, .form-wrap {
  border: none;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(1,20,56,0.45), 0 2px 8px rgba(1,20,56,0.15);
  display: flex;
  flex-direction: column;
  min-height: 620px;
}
@media (max-width: 768px) {
  .hero, .priorities-wrap, .assess-wrap, .confirm-wrap, .results-wrap, .thanks-wrap, .form-wrap {
    min-height: 520px;
  }
}
@media (max-width: 480px) {
  .hero, .priorities-wrap, .assess-wrap, .confirm-wrap, .results-wrap, .thanks-wrap, .form-wrap {
    min-height: 460px;
  }
}

.hero .cta-row,
.results-wrap .final-cta,
#formStep1 .form-btn-row {
  margin-top: auto;
}

/* ── WIDEN ASSESS WRAP ──
   Height now comes from the shared card rule above, not a local
   override — that was fighting the unified height, undoing the fix. */
.assess-wrap {
  max-width: 860px;
}
.assess-wrap .nav-row {
  margin-top: auto;
}

/* ── HERO EYEBROW ROW ── */
.hero-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-dark);
}

/* cta-row is a column flex in common.css (align-items: flex-start),
   which silently overrides any inline text-align:right on the div —
   this is the actual fix, not the inline style. All pill CTAs align right. */
.cta-row {
  align-items: flex-end;
}

/* form-btn-row (contact form) wasn't flex at all, button defaulted left */
.form-btn-row {
  display: flex;
  justify-content: flex-end;
}

/* ── ANSWER SCALE (2026-09-06) ──
   Restored to the original 5-box .scale-opt picker (common.css) - all 10
   DocuFlow questions share one generic 1-5 scale again, so .scale can go
   back to its common.css default (flex row) instead of the 2026-09-04
   column override built for full-sentence answer rows. eG-brand accents
   on top of the shared base styling. */
.scale-opt {
  border-color: #e5e5e5;
}
.scale-opt:hover {
  border-color: var(--eg-blue);
}
.scale-opt.sel {
  border-color: var(--eg-navy-2);
  background: rgba(1,96,224,0.05);
}
.scale-opt .l {
  font-family: 'Inter', sans-serif;
}
.scale-opt.sel .l {
  font-weight: 600;
  color: var(--eg-navy-2);
}

/* ── SCORE BLOCK ── */
.score-block {
  border: 2px solid;
  border-radius: 12px;
  padding: 28px 32px;
  margin: 24px 0;
  text-align: center;
}
.score-pct {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 4px;
}
.score-pts {
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
}
.score-band {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 600;
}

/* ── BAND LEGEND ── */
.band-legend {
  margin: 0 0 32px;
}
.band-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  margin-bottom: 6px;
  border-radius: 6px;
}
.band-row.band-active {
  font-weight: 600;
}
.band-pct {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  min-width: 72px;
}
.band-label {
  font-size: 14px;
}

/* ── PER-QUESTION BREAKDOWN ── */
.breakdown-section {
  margin-bottom: 40px;
}
.breakdown-row {
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.breakdown-header {
  padding: 16px 18px 14px;
  cursor: pointer;
  user-select: none;
  transition: background .15s;
}
.breakdown-header:hover {
  background: #f5f7ff;
}
.breakdown-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.breakdown-score {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 600;
}
.breakdown-bar-track {
  height: 6px;
  background: #eee;
  border-radius: 3px;
  margin-bottom: 10px;
  overflow: hidden;
}
.breakdown-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .4s ease;
}
.breakdown-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.breakdown-answer {
  font-size: 14px;
  color: #555;
  margin: 0;
  font-style: italic;
}
.breakdown-toggle {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--blue-dark);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── REVEAL PANEL ── */
.breakdown-detail {
  display: none;
  border-top: 1px solid var(--line);
  background: #f9fafc;
  padding: 0 18px;
}
.breakdown-detail.open {
  display: block;
}
.detail-block {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.detail-block:last-child {
  border-bottom: none;
}
.detail-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-dark);
  margin-bottom: 6px;
  font-weight: 600;
}
.detail-text {
  font-size: 14px;
  line-height: 1.65;
  color: #444;
  margin: 0;
}
.detail-block--solution {
  background: #eef4ff;
  margin: 0 -18px;
  padding: 16px 18px;
  border-bottom: none;
}
.detail-block--solution .detail-label {
  color: #1a5c2e;
}
.detail-block--solution .detail-text {
  color: #2a3a2e;
}

/* ── FORM WRAP ──
   Was missing the shared card treatment entirely (background/
   radius/shadow) — every other screen is a card, this wasn't.
   Fixed 2026-09-03; border-radius/shadow now come from the
   shared card rule above, this just sets its own width/padding. */
.form-wrap {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: 56px 24px 90px;
  background: #ffffff;
  box-sizing: border-box;
}
.form-sub {
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.6;
  margin-bottom: 20px;
}
.field-error {
  font-size: 12px;
  color: var(--accent-red);
  display: none;
  margin-top: 4px;
  font-family: 'IBM Plex Mono', monospace;
}
.field.error input { border-color: var(--accent-red); }
.field.error .field-error { display: block; }

/* ── RESULTS: SEVERITY GROUPS + BAR ROWS ── */
.headline-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.9em;
  height: 2.9em;
  border-radius: 50%;
  font-family: inherit;
  font-size: 0.7em;
  font-weight: 700;
  line-height: 1;
  vertical-align: 0.05em;
  margin-right: 0.12em;
}
.bars-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 8px;
}
.severity-group {
  border: 2px solid;
  border-radius: 10px;
  padding: 20px 24px;
}
.severity-heading {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--blue-dark);
  margin-bottom: 12px;
}
.bar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-radius: 6px;
  margin-bottom: 8px;
  background: rgba(255,255,255,0.65);
  cursor: pointer;
  font-weight: 600;
  transition: background 150ms, box-shadow 150ms;
}
.bar-row:last-child { margin-bottom: 0; }
.bar-row:hover {
  background: rgba(255,255,255,0.95);
}
.bar-row.active-row {
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.10);
}
.bar-label {
  font-size: 15px;
  color: var(--ink);
}
.row-implication-btn {
  flex-shrink: 0;
  background: var(--eg-blue);
  color: #ffffff;
  border: none;
  padding: 8px 18px;
  border-radius: 40px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.row-implication-btn:hover {
  background: var(--eg-orange);
}

/* ── SLIDE-IN DETAIL DRAWER (2026-09-04) ──
   Replaces the 2026-09-03 inline accordion. This is a true drawer per
   the system-wide terminology standard: fixed to the viewport edge,
   slides in on open, overlays the page behind a dimming scrim. The
   interruption is deliberate — the goal is for the reveal to draw
   attention, not stay quiet under the row the way the accordion did. */
.bar-row.active-row {
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.10);
}
.drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(2,19,56,0);
  pointer-events: none;
  transition: background 0.3s ease;
  z-index: 40;
}
.drawer-scrim.open {
  background: rgba(2,19,56,0.6);
  pointer-events: auto;
}
body.drawer-locked {
  overflow: hidden;
}
.detail-drawer {
  position: fixed;
  top: 50%;
  right: 24px;
  width: 420px;
  max-width: 88vw;
  max-height: 80vh;
  background: #ffffff;
  border: 2.5px solid var(--eg-blue);
  border-radius: 16px;
  transform: translate(calc(100% + 24px), -50%);
  transition: transform 0.32s cubic-bezier(0.16,1,0.3,1);
  z-index: 41;
  padding: 32px 28px;
  box-sizing: border-box;
  overflow-y: auto;
  box-shadow: 0 40px 90px rgba(1,20,56,0.55), 0 10px 28px rgba(1,20,56,0.3), 0 0 48px rgba(1,96,224,0.55), 0 0 12px rgba(1,96,224,0.7);
}
.detail-drawer.open {
  transform: translate(0, -50%);
}
.drawer-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: #888;
  cursor: pointer;
  padding: 4px;
}
.drawer-close:hover {
  color: var(--blue-dark);
}
.dp-commercial {
  font-size: 15px;
  line-height: 1.65;
  color: #444;
  margin: 16px 0 0;
}
@media (max-width: 600px) {
  .detail-drawer {
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100vw;
    border-radius: 0;
    border: none;
    box-shadow: none;
    transform: translateX(100%);
  }
}

.drawer-headline {
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--eg-navy-2);
  margin: 0 0 16px;
}

/* ── RESULTS: DETAIL PANEL ── */
.detail-panel {
  border: 2px solid;
  border-radius: 10px;
  padding: 28px 32px;
  margin-top: 24px;
}
.dp-subrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 20px;
}
.dp-eyebrow {
  color: #888;
  letter-spacing: 0.06em;
}
.dp-score {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.dp-body p {
  font-size: 15px;
  line-height: 1.65;
  color: #444;
  margin-bottom: 18px;
}
.dp-body p:last-child { margin-bottom: 0; }
.dp-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-dark);
  margin-bottom: 6px;
}
.cost-line {
  font-weight: 600;
  color: #7a2020;
}

/* ── PDF TEASER (2026-09-03) ──
   Detail panel used to dump 3 full paragraphs per click — mismatched
   the lightweight "reveal more" gesture. Trimmed to one paragraph
   (commercial impact) plus this callout pointing at the fuller PDF,
   so the interaction matches its payload and the PDF gate feels
   earned rather than redundant with what's already on the page. */
.pdf-teaser {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  margin-top: 20px;
  padding: 16px 18px;
  background: #FFF4E0;
  border: 1px dashed var(--eg-orange);
  border-radius: 10px;
}
.pdf-teaser-text {
  width: 100%;
  font-size: 13px;
  line-height: 1.5;
  color: #5a4520;
}
.pdf-teaser-text strong {
  display: block;
  color: var(--blue-dark);
  margin-bottom: 2px;
}
.pdf-teaser-btn {
  width: 100%;
  background: var(--eg-orange);
  color: #ffffff;
  border: none;
  padding: 10px 18px;
  border-radius: 40px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease;
  text-align: center;
}
.pdf-teaser-btn:hover {
  background: var(--eg-navy-2);
}

/* ── FINAL CTA BUTTONS ── */
.final-cta-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: 24px;
}

/* ── THANK YOU ── */
.thank-you {
  text-align: center;
  padding: 32px 0;
}
.thank-you p {
  color: #555;
  margin-bottom: 8px;
}

/* ── REVEAL CTA BUTTON (results page) ──
   Sits where the old quiet "check your email" text block used to be
   alone. The note below it stays hidden until the interstitial has been
   opened at least once, per the 2026-09-06 redesign - the button is the
   confirmation now, not passive text nobody notices. */
.reveal-cta-btn {
  margin-top: 4px;
}

/* ── LANDING SCREEN: FULL-BLEED PHOTO (2026-09-06) ──
   The landing screen fills its ENTIRE visible area with the photo - not
   just the inner card - so the outer .screen wrapper's own padding/
   centering is overridden here too, and the card itself loses its
   inset margin, rounded corners and shadow to span edge to edge.
   Overlay is intentionally light (not the heavier tint first tried) so
   the photo reads as bright and present rather than muted. */
#screen-landing.active {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
}
#screen-landing .hero {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  flex: 1;
  min-height: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 64px clamp(24px, 6vw, 96px);
  justify-content: center;
  background:
    linear-gradient(160deg, rgba(2,19,56,0.55) 0%, rgba(1,25,68,0.48) 45%, rgba(1,43,105,0.42) 100%),
    url('images/well-connected-hero.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #ffffff;
}
#screen-landing .hero h1 {
  color: #ffffff;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  font-size: 44px;
}
#screen-landing .hero .body-copy {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
#screen-landing .hero .body-copy p {
  color: #ffffff;
}
#screen-landing .hero .body-copy p.emph {
  color: var(--eg-orange);
  font-weight: 400;
  font-size: 27px;
}
#screen-landing .hero .cta-row {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  margin-top: 40px;
}

/* ── REVEAL INTERSTITIAL (branded confirmation popup) ──
   Pops on demand (button click), never automatically - the PDF/email
   send already happens in the background regardless of whether this
   is ever opened. Reuses the same navy/gold palette as the PDF and
   header rather than inventing a new visual language. Dismiss via the
   X, the "Got it" button, or clicking the scrim outside the card. */
.reveal-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.72);
  z-index: 900;
}
.reveal-scrim.open {
  display: block;
}
.reveal-interstitial {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, 90vw);
  background: var(--eg-navy-2);
  border-radius: 20px;
  padding: 40px 32px 32px;
  text-align: center;
  z-index: 901;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  box-sizing: border-box;
}
.reveal-interstitial.open {
  display: block;
}
.reveal-interstitial-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  color: #ffffff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
  padding: 4px;
}
.reveal-interstitial-close:hover {
  opacity: 1;
}
.reveal-interstitial-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  display: block;
}
.reveal-interstitial-headline {
  color: var(--eg-orange);
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 12px;
  line-height: 1.25;
}
.reveal-interstitial-body {
  color: #ffffff;
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 24px;
}
.reveal-interstitial-body strong {
  color: var(--eg-orange);
}
@media (max-width: 480px) {
  .reveal-interstitial {
    padding: 32px 24px 28px;
  }
}