html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: 'Space Grotesk', 'Inter', sans-serif; letter-spacing: -0.02em; }

/* Print-only / web-only toggling. Lives in main.css (not print.css) because
   print.css is loaded with media="print" and never applies on screen, so
   the "hide on screen" rule needs to be in a media-agnostic stylesheet.
   The print-time visibility flip happens inside print.css. */
[data-print-only] { display: none !important; }

.gradient-text {
  background: linear-gradient(120deg, #9560ff 0%, #6028e0 60%, #341679 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(80px);
  opacity: 0.55;
  pointer-events: none;
}

.grid-bg {
  background-image:
    linear-gradient(rgba(149, 96, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(149, 96, 255, 0.08) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at top, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at top, black 30%, transparent 75%);
}

.badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.35rem 0.85rem; border-radius: 9999px;
  background: rgba(149, 96, 255, 0.08);
  border: 1px solid rgba(149, 96, 255, 0.22);
  color: #6028e0; font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.02em;
}

.btn-primary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 1.4rem; border-radius: 0.85rem;
  background: linear-gradient(135deg, #9560ff 0%, #6028e0 100%);
  color: white; font-weight: 600; font-size: 0.95rem;
  box-shadow: 0 10px 28px -10px rgba(96, 40, 224, 0.6);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 34px -10px rgba(96, 40, 224, 0.7); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.8rem 1.25rem; border-radius: 0.85rem;
  background: white; color: #1c1834; font-weight: 600; font-size: 0.95rem;
  border: 1px solid #e9e1ff;
  transition: border-color .2s ease, color .2s ease;
}
.btn-ghost:hover { border-color: #9560ff; color: #6028e0; }

.card-hover { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card-hover:hover {
  transform: translateY(-3px);
  border-color: rgba(149, 96, 255, 0.35);
  box-shadow: 0 18px 50px -20px rgba(80, 40, 200, 0.30);
}

/* Active nav state */
.nav-link.active { color: #6028e0; }
.nav-link.active::after {
  content: '';
  display: block;
  height: 2px;
  width: 100%;
  margin-top: 4px;
  background: linear-gradient(90deg, #9560ff, #6028e0);
  border-radius: 2px;
}

/* Pricing range slider */
.range {
  -webkit-appearance: none; appearance: none;
  height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, #9560ff var(--val,5%), #e9e1ff var(--val,5%));
  outline: none;
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 9999px;
  background: white; border: 3px solid #6028e0;
  box-shadow: 0 4px 12px rgba(96,40,224,0.35); cursor: pointer;
}
.range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 9999px;
  background: white; border: 3px solid #6028e0;
  box-shadow: 0 4px 12px rgba(96,40,224,0.35); cursor: pointer;
}

/* FAQ */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform .2s ease; }

/* Marquee */
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); }
.marquee-track { display: flex; gap: 3rem; width: max-content; animation: scroll 35s linear infinite; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Page transition */
.page-enter { animation: fadeUp .35s ease both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hide scroll indicator on mobile menu */
.mobile-menu[hidden] { display: none; }

/* Dropdown */
.dropdown-panel {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.dropdown.open .dropdown-panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Reveal-on-scroll. Pair with [data-reveal] / data-reveal-delay attributes
   and observeReveal() from js/lib/motion.js. */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-18px); }
[data-reveal="right"] { transform: translateX(18px); }
[data-reveal="scale"] { transform: scale(.96); }
[data-reveal].is-visible { opacity: 1; transform: none; }

[data-reveal-delay="100"] { transition-delay: 100ms; }
[data-reveal-delay="200"] { transition-delay: 200ms; }
[data-reveal-delay="300"] { transition-delay: 300ms; }
[data-reveal-delay="400"] { transition-delay: 400ms; }
[data-reveal-delay="500"] { transition-delay: 500ms; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Hero living mockup. Visually mirrors the real PolicyClue popup defaults:
   helpers.py DEFAULT_STYLE_POPUP / DEFAULT_STYLE_BTN and the .policyclue_answer
   rules in the chrome extension's content.training-ui.js (white pills with
   thin dark border, #1b87fb primary button, #77DD77 / #FF7777 result colors). */
.hero-stage {
  position: relative;
  min-height: 340px;
}
.hero-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
}
.hero-panel.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.hero-answer {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.55rem 1rem;
  border-radius: 9999px;
  border: 1px solid rgba(14, 11, 31, 0.55);
  background: white;
  color: #0e0b1f;
  font-size: 0.85rem;
  font-weight: 500;
  transition: background-color .35s ease, border-color .35s ease, color .35s ease, opacity .35s ease;
}
.hero-answer + .hero-answer { margin-top: 0.6rem; }
.hero-answer.is-correct {
  background: #77dd77;
  border-color: green;
  color: #0d3a0d;
}
.hero-answer.is-wrong {
  background: #ff7777;
  border-color: red;
  color: #4a0a0a;
}
.hero-answer.is-dim {
  opacity: 0.45;
}

.hero-popup-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #1b87fb;
  color: white;
  border: none;
  padding: 0.55rem 1.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 9999px;
  cursor: pointer;
  transition: opacity .2s ease;
}
.hero-popup-btn:hover { opacity: 0.85; }

/* Quiz CTA stays hidden until the panel is marked .is-answered (i.e., the
   user has clicked an answer). Real popup behavior. */
.hero-panel [data-hero-quiz-cta] {
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
}
.hero-panel.is-answered [data-hero-quiz-cta] {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Chat input row at the bottom of the chat content. The cursor clicks it,
   types a name + IBAN, then the IBAN portion is masked progressively. */
.hero-chat-input-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(14, 11, 31, 0.12);
  background: white;
  box-shadow: 0 4px 16px rgba(14, 11, 31, 0.04);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.hero-chat-input-row.is-focused {
  border-color: rgba(27, 135, 251, 0.45);
  box-shadow: 0 4px 16px rgba(27, 135, 251, 0.12);
}
.hero-chat-input-caret {
  display: inline-block;
  width: 1.5px;
  height: 0.95em;
  background: #0e0b1f;
  margin-left: 1px;
  vertical-align: -2px;
  opacity: 0;
}
.hero-chat-input-row.is-focused .hero-chat-input-caret {
  opacity: 1;
  animation: heroBlink 1s steps(1) infinite;
}
@keyframes heroBlink {
  0%, 50%       { opacity: 1; }
  50.01%, 100%  { opacity: 0; }
}

/* Highlight on the masked IBAN portion to draw attention to the redaction. */
.hero-chat-iban.is-redacted {
  background: rgba(255, 119, 119, 0.18);
  border-radius: 3px;
  padding: 0 4px;
  margin: 0 -4px;
}

/* DLP violation popup - bottom-right of the chat area, like the real plugin
   (content.dlp-ui.js: fixed bottom-right, ~420px, white card, close X). */
.hero-dlp-popup {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 280px;
  max-width: calc(100% - 24px);
  border-radius: 10px;
  background: white;
  border: 1px solid rgba(14, 11, 31, 0.08);
  box-shadow: 0 20px 50px -12px rgba(14, 11, 31, 0.25);
  padding: 0.85rem 1rem;
  opacity: 0;
  transform: translateY(8px) scale(.96);
  transition: opacity .4s ease, transform .4s cubic-bezier(.2, 1.4, .4, 1);
  pointer-events: none;
  z-index: 10;
}
.hero-dlp-popup.is-spawned {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
@media (min-width: 1024px) {
  .hero-dlp-popup {
    bottom: 20px;
    right: 20px;
    width: 320px;
  }
}
.hero-dlp-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  border: none;
  background: transparent;
  color: rgba(14, 11, 31, 0.55);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}
.hero-dlp-close:hover {
  background: rgba(14, 11, 31, 0.06);
  color: rgba(14, 11, 31, 0.85);
}

/* PolicyClue icon used in place of generic warning glyphs at the start of
   the DLP and Download-block popup title rows. Sized to match the 20 px
   material-icons it replaced. */
.hero-popup-icon {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  flex-shrink: 0;
  display: block;
}

/* Manipulated assistant reply with a phishing link. Hidden until the bridge
   phase plays the URL-typing → AI-replies sequence. */
.hero-chat-assistant {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s ease, transform .4s ease;
  pointer-events: none;
}
.hero-chat-assistant.is-shown {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.hero-chat-link {
  color: #6028e0;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
  cursor: pointer;
  margin-left: 0.25rem;
}

/* Fake Microsoft Edge download page - Microsoft Fluent-flavored layout.
   Uses Segoe UI fallback chain (system font on Windows; falls back gracefully
   elsewhere). The 4-square logo, blue accents and button shape evoke a real
   Microsoft download page; no trademarked logos are reproduced. */
.hero-fake-edge {
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
  z-index: 5;
  font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: -0.005em;
}
.hero-fake-edge.is-shown {
  opacity: 1;
  pointer-events: auto;
}
.hero-fake-edge-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1.25rem;
  border-bottom: 1px solid #edebe9;
  background: white;
}
.hero-edge-mslogo {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1.5px;
  width: 18px;
  height: 18px;
}
.hero-edge-mslogo > span {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-edge-mslogo > span:nth-child(1) { background: #f25022; }
.hero-edge-mslogo > span:nth-child(2) { background: #7fba00; }
.hero-edge-mslogo > span:nth-child(3) { background: #00a4ef; }
.hero-edge-mslogo > span:nth-child(4) { background: #ffb900; }
.hero-edge-msword {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1f1f1f;
  letter-spacing: -0.01em;
}
.hero-fake-edge-login {
  position: relative;
  padding: 0.3rem 0.6rem;
  border-radius: 2px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #0067b8;
  transition: background-color .15s ease, color .15s ease;
}
.hero-fake-edge-login:hover {
  background: rgba(0, 120, 212, 0.08);
  color: #005a9e;
}
.hero-fake-edge-hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem 1.25rem;
  background: linear-gradient(180deg, #ffffff 0%, #f3f9fd 100%);
}
.hero-edge-orb {
  width: 84px;
  height: 84px;
  border-radius: 9999px;
  background:
    radial-gradient(circle at 28% 28%, rgba(255, 255, 255, 0.55), transparent 45%),
    radial-gradient(circle at 70% 65%, #1ba0e2 0%, #0078d4 35%, #0050a0 75%, #00345c 100%);
  box-shadow:
    0 16px 36px -10px rgba(0, 120, 212, 0.55),
    inset 0 -8px 14px rgba(0, 0, 0, 0.18);
  margin-bottom: 1.25rem;
  position: relative;
}
.hero-edge-orb::after {
  content: '';
  position: absolute;
  top: 12%;
  left: 22%;
  width: 24%;
  height: 18%;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.5);
  filter: blur(2px);
}
.hero-edge-title {
  font-family: inherit;
  font-size: 1.85rem;
  font-weight: 600;
  color: #1f1f1f;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}
.hero-edge-tagline {
  margin: 0.65rem 0 1.4rem;
  font-size: 0.9rem;
  color: #4a4a4a;
  max-width: 24rem;
  line-height: 1.5;
}
.hero-fake-edge-download {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 1.6rem;
  background: #0067b8;
  color: white;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 2px;
  border: 1px solid #0067b8;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: background-color .15s ease, border-color .15s ease;
}
.hero-fake-edge-download:hover {
  background: #005a9e;
  border-color: #005a9e;
}
.hero-edge-meta {
  margin: 0.85rem 0 0;
  font-size: 0.72rem;
  color: #797775;
  letter-spacing: 0.01em;
}
.hero-edge-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 1rem;
  font-size: 0.72rem;
  color: #797775;
  border-top: 1px solid #edebe9;
  background: white;
}
.hero-edge-footer-dot {
  opacity: 0.5;
}

/* Download block popup. Same slot/style family as the DLP popup but with
   different content (and no close X - real plugin has canOverride: false). */
.hero-download-block {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 280px;
  max-width: calc(100% - 24px);
  border-radius: 10px;
  background: white;
  border: 1px solid rgba(14, 11, 31, 0.08);
  box-shadow: 0 20px 50px -12px rgba(14, 11, 31, 0.25);
  padding: 0.85rem 1rem;
  opacity: 0;
  transform: translateY(8px) scale(.96);
  transition: opacity .4s ease, transform .4s cubic-bezier(.2, 1.4, .4, 1);
  pointer-events: none;
  z-index: 12;
}
.hero-download-block.is-spawned {
  opacity: 1;
  transform: none;
}
@media (min-width: 1024px) {
  .hero-download-block {
    bottom: 20px;
    right: 20px;
    width: 320px;
  }
}

/* Anti-phishing block. Deck-style centered card on a dark scrim - mirrors
   the real plugin (content.antiphishing.js renders via showDeck()). The card
   matches the awareness-popup layout, with red warning iconography to
   distinguish it as a security event. */
.hero-phishing-block {
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
  z-index: 30;
}
.hero-phishing-block.is-shown {
  opacity: 1;
  pointer-events: auto;
}
.hero-phishing-scrim {
  background: rgba(14, 11, 31, 0.78);
}
.hero-phishing-card {
  position: relative;
  width: 100%;
  max-width: 28rem;
  background: white;
  border-radius: 10px;
  padding: 1.25rem 1.5rem 1.4rem;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.55);
  text-align: left;
  transform: scale(.94);
  transition: transform .45s cubic-bezier(.2, 1.4, .4, 1);
}
.hero-phishing-block.is-shown .hero-phishing-card {
  transform: none;
}
.hero-phishing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(14, 11, 31, 0.06);
  margin-bottom: 1rem;
}
.hero-phishing-header > span {
  font-size: 0.7rem;
  font-weight: 700;
  color: #6028e0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hero-phishing-header > img {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: block;
}
.hero-phishing-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #0e0b1f;
  letter-spacing: -0.01em;
  margin: 0;
}
.hero-phishing-body {
  margin: 0.7rem 0 0;
  font-size: 0.85rem;
  color: #5a5775;
  line-height: 1.5;
}
.hero-phishing-alert {
  margin: 0.65rem 0 0;
  font-size: 0.75rem;
  color: #6028e0;
  font-weight: 600;
}
.hero-phishing-action {
  margin: 0.85rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(14, 11, 31, 0.06);
  font-size: 0.72rem;
  color: rgba(14, 11, 31, 0.5);
  line-height: 1.5;
}

/* Fake Microsoft sign-in form. Renders briefly between the "Anmelden" click
   on the fake Edge page and the anti-phishing block - matches what the real
   plugin's detector would see right before it triggers. */
.hero-fake-signin {
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
  z-index: 6;
}
.hero-fake-signin.is-shown {
  opacity: 1;
  pointer-events: auto;
}
.hero-fake-signin-card {
  width: 100%;
  max-width: 22rem;
  background: white;
  padding: 2rem 2.25rem 2rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  border: 1px solid #d2d0ce;
}
.hero-fake-signin-mslogo {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  width: 22px;
  height: 22px;
  margin-bottom: 1rem;
}
.hero-fake-signin-mslogo > span { display: block; }
.hero-fake-signin-mslogo > span:nth-child(1) { background: #f25022; }
.hero-fake-signin-mslogo > span:nth-child(2) { background: #7fba00; }
.hero-fake-signin-mslogo > span:nth-child(3) { background: #00a4ef; }
.hero-fake-signin-mslogo > span:nth-child(4) { background: #ffb900; }
.hero-fake-signin-title {
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 600;
  color: #1f1f1f;
  margin: 0 0 1rem;
  letter-spacing: -0.01em;
}
.hero-fake-signin-input {
  width: 100%;
  padding: 0.45rem 0;
  border: none;
  border-bottom: 1px solid #666;
  background: transparent;
  font-family: inherit;
  font-size: 0.95rem;
  color: #1f1f1f;
  outline: none;
}
.hero-fake-signin-input::placeholder {
  color: #797775;
}
.hero-fake-signin-hint {
  margin: 0.6rem 0 1.4rem;
  font-size: 0.85rem;
  color: #1f1f1f;
}
.hero-fake-signin-link {
  color: #0067b8;
  cursor: pointer;
}
.hero-fake-signin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 108px;
  padding: 0.45rem 0;
  background: #0067b8;
  color: white;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid #0067b8;
  border-radius: 0;
  cursor: pointer;
  float: right;
}

/* Stronger alerting state for the extension icon when phishing fires. The
   default .is-alerting just shows the dot; .is-alerting-strong pulses. */
.hero-ext-icon.is-alerting-strong .hero-ext-badge {
  opacity: 1;
  transform: scale(1);
  animation: heroExtPulse 1.1s ease-in-out infinite;
}
@keyframes heroExtPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

/* Browser-extension icon in the chrome's right side. The PolicyClue icon
   gets a small red alert badge while the DLP popup is visible (the JS
   toggles .is-alerting), tying the extension visually to the violation. */
.hero-ext-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: transparent;
  border: none;
  pointer-events: none;
}
.hero-ext-icon img {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  display: block;
}
.hero-ext-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 9px;
  height: 9px;
  border-radius: 9999px;
  background: #ef4444;
  border: 2px solid #f8fafc;
  opacity: 0;
  transform: scale(.4);
  transition: opacity .25s ease, transform .25s cubic-bezier(.2, 1.4, .4, 1);
}
.hero-ext-icon.is-alerting .hero-ext-badge {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .hero-ext-badge { transition: none; }
}

.hero-cta-pulse {
  animation: heroPulse 1.6s ease-in-out;
}
@keyframes heroPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(27, 135, 251, 0); }
  40%      { box-shadow: 0 0 0 6px rgba(27, 135, 251, 0.25); }
}

/* Mock pointer. Single persistent element driven by the JS state machine:
   transforms are set inline; CSS provides the easing for moves and presses. */
.hero-mock-cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  pointer-events: none;
  opacity: 0;
  transform: translate(0, 0) scale(1);
  /* viewBox is 24x24 with the tip at (4,3); origin keeps that tip pinned
     during press-scale animations so the cursor doesn't drift. */
  transform-origin: 4px 3px;
  filter: drop-shadow(0 1px 1px rgba(14, 11, 31, 0.35)) drop-shadow(0 0 0.3px rgba(14, 11, 31, 0.5));
  z-index: 50;
  transition: transform .85s cubic-bezier(.5, .1, .3, 1), opacity .4s ease;
}
.hero-mock-cursor.is-pressing {
  transition: transform .12s ease-out, opacity .4s ease;
}

/* Chat content cross-fades over the new-tab page once the URL is "submitted". */
.hero-chat {
  opacity: 0;
  pointer-events: none;
  transition: opacity .55s ease;
}
.hero-chat.is-shown {
  opacity: 1;
  pointer-events: auto;
}

/* Popup + scrim are hidden until the JS state machine spawns them. */
.hero-scrim,
.hero-popup-wrapper {
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}
.hero-popup-wrapper > div {
  transform: scale(.92);
  transition: transform .5s cubic-bezier(.2, 1.4, .4, 1);
}
.hero-scrim.is-spawned,
.hero-popup-wrapper.is-spawned { opacity: 1; }
.hero-popup-wrapper.is-spawned > div { transform: scale(1); }
.hero-popup-wrapper.is-spawned { pointer-events: auto; }

/* Chapter-intro overlay: full-bleed PolicyClue gradient with white text.
   Sits at the outer browser-wrapper level so it covers the chrome bar
   (URL, tabs) too; corners are clipped by the wrapper's overflow-hidden,
   `border-radius: inherit` is a safety net should that ever change.
   Fades in before each chapter starts, holds, then fades out. */
.hero-chapter-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background: linear-gradient(35deg, rgb(110,80,220) 0%, rgb(170,90,255) 60%, rgb(220,120,255) 100%);
  border-radius: inherit;
  color: #ffffff;
  opacity: 0;
  pointer-events: none;
  transition: opacity .7s ease;
  z-index: 50;
}
.hero-chapter-card.is-shown { opacity: 0.92; }

/* Pause / resume button sitting on top of the hero animation card. Above
   the chapter-card overlay so it stays clickable through transitions. */
.hero-pause-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.85);
  color: rgb(76, 29, 149);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
.hero-pause-btn:hover { background: rgba(255, 255, 255, 0.95); transform: scale(1.05); }
.hero-pause-btn .hero-pause-icon-play  { display: none; }
.hero-pause-btn[data-paused="true"] .hero-pause-icon-pause { display: none; }
.hero-pause-btn[data-paused="true"] .hero-pause-icon-play  { display: inline-block; }
.hero-chapter-module {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin-bottom: 10px;
}
.hero-chapter-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
}
@media (prefers-reduced-motion: reduce) {
  .hero-chapter-card { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-panel { transition: none; }
  .hero-mock-cursor { transition: none; opacity: 0; }
  .hero-cta-pulse { animation: none; }
  .hero-chat, .hero-scrim, .hero-popup-wrapper { opacity: 1; }
  .hero-popup-wrapper > div { transform: none; }
  .hero-chat-input-row.is-focused .hero-chat-input-caret { animation: none; }
  .hero-dlp-popup,
  .hero-chat-assistant,
  .hero-fake-edge,
  .hero-download-block,
  .hero-fake-signin,
  .hero-phishing-block,
  .hero-phishing-card,
  .hero-chat-attached-file,
  .hero-file-explorer,
  .hero-file-explorer-card,
  .hero-dlp-file-popup,
  .hero-outlook-toast,
  .hero-fake-office,
  .hero-simulation-done,
  .hero-google,
  .hero-refresher-block,
  .hero-refresher-card { transition: none; }
  .hero-chat-attached-file.is-uploading,
  .hero-fake-office-input.is-focused .hero-fake-office-caret { animation: none; }
  .hero-ext-icon.is-alerting-strong .hero-ext-badge { animation: none; }
}

/* ---------------------------------------------------------------------------
   DLP file-upload phase (chapter 4). Adds a Windows-style file-open dialog
   over the chat surface, plus the attach button + attached-file chip on the
   chat input and a file-block popup variant.
   --------------------------------------------------------------------------- */
.hero-chat-attach-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-right: 0.45rem;
  border-radius: 6px;
  border: 1px solid rgba(14, 11, 31, 0.08);
  background: white;
  color: rgba(14, 11, 31, 0.5);
  flex-shrink: 0;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.hero-chat-attach-btn:hover {
  background: rgba(14, 11, 31, 0.04);
  color: rgba(14, 11, 31, 0.8);
}
.hero-chat-attached-file {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.55rem;
  margin-bottom: 0.4rem;
  border: 1px solid rgba(14, 11, 31, 0.1);
  border-radius: 8px;
  background: white;
  font-size: 0.75rem;
  color: #1f1d2e;
  max-width: fit-content;
  opacity: 0;
  transition: opacity .35s ease, transform .35s ease;
  transform: translateY(4px);
}
.hero-chat-attached-file.is-shown {
  display: inline-flex;
  opacity: 1;
  transform: translateY(0);
}
.hero-chat-attached-file.is-uploading {
  animation: heroAttachPulse 0.9s ease-in-out infinite;
}
@keyframes heroAttachPulse {
  0%, 100% { background: white; }
  50%      { background: rgba(96, 40, 224, 0.06); }
}
.hero-chat-attached-file-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: #1f5fb6;
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
}
.hero-chat-attached-file-name { font-weight: 500; }
.hero-chat-attached-file-x {
  color: rgba(14, 11, 31, 0.4);
  font-size: 1rem;
  line-height: 1;
  margin-left: 0.25rem;
}

/* File-explorer modal. Sits above the scrim layer; uses its own internal dim. */
.hero-file-explorer {
  z-index: 14;
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(14, 11, 31, 0.45);
  transition: opacity .35s ease;
  padding: 1rem;
}
.hero-file-explorer.is-spawned {
  opacity: 1;
  pointer-events: auto;
}
.hero-file-explorer-card {
  width: 100%;
  max-width: 520px;
  background: #f3f3f3;
  border: 1px solid rgba(14, 11, 31, 0.12);
  border-radius: 8px;
  box-shadow: 0 24px 48px -12px rgba(14, 11, 31, 0.35);
  overflow: hidden;
  transform: scale(0.96);
  transition: transform .35s cubic-bezier(.2, 1.4, .4, 1);
  display: flex;
  flex-direction: column;
  font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
.hero-file-explorer.is-spawned .hero-file-explorer-card { transform: scale(1); }
.hero-file-explorer-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.7rem;
  background: #fafafa;
  border-bottom: 1px solid rgba(14, 11, 31, 0.08);
}
.hero-file-explorer-title {
  font-size: 0.75rem;
  color: #1f1d2e;
  font-weight: 500;
}
.hero-file-explorer-close {
  font-size: 0.85rem;
  color: rgba(14, 11, 31, 0.45);
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hero-file-explorer-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  background: white;
  border-bottom: 1px solid rgba(14, 11, 31, 0.06);
  font-size: 0.75rem;
  color: rgba(14, 11, 31, 0.6);
}
.hero-file-explorer-breadcrumb strong {
  color: #1f1d2e;
  font-weight: 600;
}
.hero-file-explorer-sep {
  color: rgba(14, 11, 31, 0.3);
}
.hero-file-explorer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
  padding: 0.85rem;
  background: white;
  max-height: 280px;
  overflow: hidden;
}
.hero-file-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.35rem;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: default;
  text-align: center;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.hero-file-tile.is-selected {
  background: #d6e7ff;
  border-color: #1f5fb6;
  box-shadow: 0 0 0 1px #1f5fb6 inset;
}
.hero-file-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 44px;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 700;
  color: white;
  position: relative;
}
.hero-file-icon::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 8px 8px;
  border-color: transparent transparent rgba(255, 255, 255, 0.6) transparent;
}
.hero-file-icon--docx { background: #1f5fb6; }
.hero-file-icon--xlsx { background: #1d6f42; }
.hero-file-icon--pdf  { background: #b30b00; }
.hero-file-icon--img  { background: #5a5775; }
.hero-file-tile-name {
  font-size: 0.72rem;
  color: #1f1d2e;
  word-break: break-word;
  line-height: 1.25;
}
.hero-file-tile-meta {
  font-size: 0.65rem;
  color: rgba(14, 11, 31, 0.45);
}
.hero-file-explorer-footer {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 0.85rem;
  background: #fafafa;
  border-top: 1px solid rgba(14, 11, 31, 0.08);
}
.hero-file-explorer-selected {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: rgba(14, 11, 31, 0.7);
}
.hero-file-explorer-selected-label { color: rgba(14, 11, 31, 0.5); }
.hero-file-explorer-selected-value {
  font-weight: 600;
  color: #1f1d2e;
}
.hero-file-explorer-cancel,
.hero-file-explorer-open {
  border: 1px solid rgba(14, 11, 31, 0.18);
  background: white;
  color: #1f1d2e;
  padding: 0.32rem 0.85rem;
  font-size: 0.75rem;
  border-radius: 4px;
  cursor: pointer;
}
.hero-file-explorer-open {
  background: #1f5fb6;
  color: white;
  border-color: #1f5fb6;
}

/* DLP file-block popup. Sibling of .hero-dlp-popup. */
.hero-dlp-file-popup {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  z-index: 12;
  width: min(320px, calc(100% - 2rem));
  background: white;
  border: 1px solid rgba(14, 11, 31, 0.08);
  border-radius: 0.85rem;
  padding: 0.85rem 0.95rem;
  box-shadow: 0 18px 42px -10px rgba(14, 11, 31, 0.35);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
}
.hero-dlp-file-popup.is-spawned {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ---------------------------------------------------------------------------
   BAS scenes (chapters 7-10). Outlook toast, fake directoffice page,
   simulation-done card, google.com background, refresher popup.
   --------------------------------------------------------------------------- */
.hero-outlook-toast {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  z-index: 13;
  width: min(330px, calc(100% - 2rem));
  background: white;
  border: 1px solid rgba(14, 11, 31, 0.08);
  border-left: 4px solid #0078d4;
  border-radius: 0.5rem;
  padding: 0.75rem 0.9rem;
  box-shadow: 0 18px 42px -10px rgba(14, 11, 31, 0.35);
  opacity: 0;
  transform: translateX(20px);
  pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
  cursor: pointer;
  font-family: 'Segoe UI', system-ui, sans-serif;
}
.hero-outlook-toast.is-spawned {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.hero-outlook-toast-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.45rem;
}
.hero-outlook-toast-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  overflow: hidden;
}
.hero-outlook-toast-icon-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0078d4 0%, #00549c 100%);
}
.hero-outlook-toast-icon-letter {
  position: relative;
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
}
.hero-outlook-toast-app {
  font-size: 0.7rem;
  color: rgba(14, 11, 31, 0.55);
  font-weight: 600;
}
.hero-outlook-toast-from {
  font-size: 0.7rem;
  color: rgba(14, 11, 31, 0.55);
  margin-bottom: 0.15rem;
}
.hero-outlook-toast-subject {
  font-size: 0.85rem;
  font-weight: 600;
  color: #1f1d2e;
  margin-bottom: 0.25rem;
}
.hero-outlook-toast-preview {
  font-size: 0.72rem;
  color: rgba(14, 11, 31, 0.6);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Fake directoffice.ch page (BAS scene 8). Layered the same way as
   .hero-fake-edge / .hero-fake-signin. */
.hero-fake-office {
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
  z-index: 7;
}
.hero-fake-office.is-shown {
  opacity: 1;
  pointer-events: auto;
}
.hero-fake-office-sub {
  font-size: 0.85rem;
  color: rgba(14, 11, 31, 0.65);
  margin: -0.4rem 0 1rem;
  line-height: 1.4;
}
.hero-fake-office-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #1f1d2e;
  margin-bottom: 0.25rem;
}
.hero-fake-office-input {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #666;
  padding: 0.4rem 0;
  min-height: 1.6rem;
}
.hero-fake-office-pw {
  font-size: 1rem;
  letter-spacing: 0.18em;
  color: #1f1d2e;
}
.hero-fake-office-caret {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: #1f1d2e;
  margin-left: 2px;
  opacity: 0;
}
.hero-fake-office-input.is-focused .hero-fake-office-caret {
  opacity: 1;
  animation: heroCaretBlink 1s steps(2) infinite;
}
@keyframes heroCaretBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Simulation-done card (BAS scene 9). Mirrors routers/public/phishing.py
   _simulation_done_response visual: themed white card on a light bg. */
.hero-simulation-done {
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
  z-index: 8;
}
.hero-simulation-done.is-shown {
  opacity: 1;
  pointer-events: auto;
}
.hero-simulation-done-card {
  width: 100%;
  max-width: 480px;
  background: white;
  color: #0e0b1f;
  padding: 1.5rem;
  border-radius: 0.625rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  text-align: left;
}
.hero-simulation-done-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 0.85rem 0;
  color: #0e0b1f;
}
.hero-simulation-done-body {
  font-size: 0.85rem;
  line-height: 1.55;
  margin: 0 0 0.75rem 0;
  color: #1f1d2e;
}
.hero-simulation-done-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1b87fb;
  color: white;
  font-size: 0.85rem;
  font-weight: 600;
  border: none;
  padding: 0.65rem 1.1rem;
  border-radius: 0.4rem;
  margin-top: 0.5rem;
  cursor: pointer;
}

/* Google.com background page (BAS scene 10). Just enough Googliness to read
   as "the user moved on" - no trademarked logo image. */
.hero-google {
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
  z-index: 9;
}
.hero-google.is-shown {
  opacity: 1;
  pointer-events: auto;
}
.hero-google-logo {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 3rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  display: inline-flex;
}
.hero-google-search {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1px solid rgba(14, 11, 31, 0.18);
  border-radius: 24px;
  color: rgba(14, 11, 31, 0.45);
  background: white;
  font-size: 0.85rem;
  box-shadow: 0 1px 6px rgba(14, 11, 31, 0.05);
}
.hero-google-placeholder { color: rgba(14, 11, 31, 0.5); }

/* Refresher block + popup (BAS scene 10). Independent of the awareness
   scrim/popup-wrapper so we can show it on the google.com surface without
   resetting the awareness deck/quiz state. */
.hero-refresher-block {
  z-index: 11;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
}
.hero-refresher-block.is-shown {
  opacity: 1;
  pointer-events: auto;
}
.hero-refresher-scrim {
  background: rgba(14, 11, 31, 0.45);
}
.hero-refresher-card {
  width: 100%;
  max-width: 28rem;
  background: white;
  border-radius: 10px;
  padding: 1.25rem 1.5rem 1.5rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  text-align: left;
  transform: scale(0.95);
  transition: transform .4s cubic-bezier(.2, 1.4, .4, 1);
  position: relative;
}
.hero-refresher-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 0.4rem;
  color: rgba(14, 11, 31, 0.55);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.hero-refresher-close:hover {
  background: rgba(14, 11, 31, 0.08);
  color: #1f1d2e;
}
.hero-refresher-block.is-shown .hero-refresher-card { transform: scale(1); }
/* Navbar liegt absolut bei top:0; Card bekommt margin-top, damit sie
   beim Skalieren nicht in den Navbar-Streifen ragt. */
.hero-refresher-block .hero-refresher-card { margin-top: 1.75rem; }
.hero-refresher-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #0e0b1f;
  margin: 1rem 0 0.6rem 0;
}
.hero-refresher-body {
  font-size: 0.85rem;
  color: #1f1d2e;
  line-height: 1.55;
  margin: 0 0 0.6rem 0;
}

/* ---------------------------------------------------------------------------
   BAS chapter 10 - Phishing-Indikator-Spiel.
   Compact card-style approximation of the real /public/train spotgame view.
   .is-found flips a row to green; .is-won swaps the success state in.
   --------------------------------------------------------------------------- */
.hero-spotgame-block {
  z-index: 11;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
}
.hero-spotgame-block.is-shown {
  opacity: 1;
  pointer-events: auto;
}
/* Spotgame had a dark scrim historically; the real /public/train spotgame
   page (train.py:259ff) renders on a light-grey #f5f7fa body without scrim,
   so the scrim selector is kept only as a no-op safety net for any leftover
   markup; new template uses bg-[#f5f7fa] directly on the block. */
.hero-spotgame-scrim { display: none; }
.hero-spotgame-card {
  width: 100%;
  max-width: 34rem;
  background: white;
  border-radius: 12px;
  padding: 1.1rem 1.25rem 1.25rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  text-align: left;
  transform: scale(0.95);
  transition: transform .4s cubic-bezier(.2, 1.4, .4, 1);
  /* Sit on top of the public navbar (z:15) so the card stays in front
     when it grows tall enough to overlap the strip. Tooltips bubble out
     past the card edges and need to clear the navbar too, so they
     inherit the same stacking via `position: relative` below. */
  position: relative;
  z-index: 20;
}
.hero-spotgame-block.is-shown .hero-spotgame-card { transform: scale(1); }
/* Spotgame-Card-Head bekommt den echten Lila-Gradient aus
   train.py:269 (.sg-header) als Brand-Bar oberhalb des Mail-Mockups. */
.hero-spotgame-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  margin: -1.1rem -1.25rem 0;
  background: linear-gradient(135deg, #6028e0 0%, #9560ff 100%);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  color: #fff;
}
.hero-spotgame-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
}
.hero-spotgame-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.65rem 0;
}
.hero-spotgame-instruction {
  margin: 0;
  font-size: 0.78rem;
  color: #2c2748;
  font-weight: 500;
  line-height: 1.4;
}
.hero-spotgame-counter {
  flex-shrink: 0;
  font-size: 0.72rem;
  color: #5a5775;
  font-weight: 500;
}
.hero-spotgame-counter strong { color: #6028e0; font-weight: 700; }

/* Email mock - the body is just normal prose; only the [data-spot-idx]
   spans inside it are interactive indicators. They look identical to the
   surrounding text until clicked, then flip to a green highlight. */
.hero-spotgame-mail {
  border: 1px solid rgba(14, 11, 31, 0.12);
  border-radius: 6px;
  background: #fff;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-size: 0.78rem;
  line-height: 1.5;
  color: #1f1d2e;
}
.hero-spotgame-mail-header {
  background: #f5f6f8;
  border-bottom: 1px solid rgba(14, 11, 31, 0.08);
  padding: 0.55rem 0.85rem;
  border-radius: 6px 6px 0 0;
}
.hero-spotgame-mail-row { display: flex; gap: 0.5rem; padding: 0.15rem 0; }
.hero-spotgame-mail-label {
  flex-shrink: 0;
  width: 4rem;
  font-size: 0.7rem;
  color: #5a5775;
  font-weight: 600;
}
.hero-spotgame-mail-value { font-size: 0.78rem; color: #1f1d2e; word-break: break-word; }
/* Paragraph spacing inside the body is intentionally generous so the
   absolute tooltip bubbles attached to each [data-spot-idx] have room
   below the line they're on without crashing into the next paragraph
   or the success banner. */
.hero-spotgame-mail-body { padding: 0.85rem 0.95rem 1.5rem; }
.hero-spotgame-mail-body p { margin: 0 0 1.6rem; }
.hero-spotgame-mail-body p:last-child { margin-bottom: 0; }
.hero-spotgame-mail-signoff { color: #5a5775; font-size: 0.74rem; }

/* Indicator spans: visually neutral until found, then highlighted green.
   `position: relative` so the absolutely-positioned tooltip child anchors
   to the indicator's bounding box. The body is left grey-toned so the
   "found" state pops without overwhelming the rest of the email. */
.hero-spotgame-mail [data-spot-idx] {
  position: relative;
  display: inline-block;
  padding: 0 2px;
  border-radius: 3px;
  transition: background 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}
.hero-spotgame-mail [data-spot-idx].is-found {
  background: #c6f0d6;
  box-shadow: inset 0 0 0 2px #2eaf6a;
  color: #1a5d36;
  font-weight: 600;
}

/* Tooltip bubble anchored under the clicked indicator. Same structural
   pattern as the original phishing-awareness-game (.tooltip in styles.css):
   black bubble, white text, position: absolute, rises-in via a quick
   scale animation. The bubble breaks out of the inline flow so it doesn't
   reflow the email body. Inline-flex max-content keeps the bubble width
   tight to its content rather than stretching to the parent indicator. */
.hero-spotgame-tooltip {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  z-index: 5;
  display: inline-flex;
  width: max-content;
  max-width: 18rem;
  padding: 0.4rem 0.65rem;
  background: #0e0b1f;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.45;
  border-radius: 5px;
  box-shadow: 0 6px 18px rgba(14, 11, 31, 0.25);
  text-align: left;
  pointer-events: none;
  transform: translate(-50%, -4px) scale(0.85);
  transform-origin: top center;
  opacity: 0;
  animation: heroSpotgameTipIn .25s cubic-bezier(.2, 1.4, .4, 1) forwards;
}
.hero-spotgame-tooltip::before {
  /* Triangular pointer above the bubble, matching the indicator below. */
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-bottom-color: #0e0b1f;
}
@keyframes heroSpotgameTipIn {
  to {
    transform: translate(-50%, 0) scale(1);
    opacity: 1;
  }
}

.hero-spotgame-success {
  display: none;
  margin: 0.75rem 0 0;
  padding: 0.6rem 0.85rem;
  background: #d6f5e3;
  color: #1f6b3f;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
}
.hero-spotgame-block.is-won .hero-spotgame-success { display: block; }

/* Continue-to-training button shown after the user spots every indicator.
   Mirrors the new portal flow (no auto-redirect: an explicit click hands
   off to the refresher). Visible only in the .is-won state. */
.hero-spotgame-continue {
  display: none;
  margin: 0.75rem auto 0;
  padding: 0.55rem 1.1rem;
  background: #6028e0;
  color: #fff;
  border: 0;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.hero-spotgame-continue:hover { background: #4d1fb3; }
.hero-spotgame-block.is-won .hero-spotgame-continue { display: block; }

/* Tooltip × dismiss button. Decorative in the marketing animation - the
   tooltip is never closed - but its presence keeps the surface visually
   identical to the real product. Positioned in the top-right of the
   black bubble, slightly transparent. The bubble itself is already
   position: absolute (and so is its own containing block for this
   absolute child) - so we ONLY bump its right-padding here. Setting
   position: relative on the tooltip would override the original rule's
   `position: absolute` (equal specificity, later wins) and the bubble
   would then take part in the email body's inline flow, growing the
   card on every click. Tested 2026-05 - do not change. */
.hero-spotgame-tooltip { padding-right: 1.4rem; }
.hero-spotgame-tooltip-close {
  position: absolute;
  top: 0.05rem;
  right: 0.25rem;
  width: 1rem;
  height: 1rem;
  line-height: 1rem;
  font-size: 1rem;
  color: #fff;
  opacity: 0.65;
  text-align: center;
}

/* Public-page navbar mock - the same surface end-users see at the top of
   every /public/train and /public/p/<token>/submit page (tenant logo
   left, PolicyClue brand right). Stretches full-width across the hero
   frame. z-index sits above the spotgame scrim so the strip stays
   visible during the focused activity. */
.hero-public-navbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2.25rem;
  padding: 0 0.85rem;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 15;
}
.hero-public-navbar-slot { display: inline-flex; align-items: center; }
.hero-public-navbar-slot img { display: block; height: 1.2rem; width: auto; max-width: 9rem; }
.hero-public-navbar-tenant img { border-radius: 4px; }
/* The spotgame card sits inside an absolutely-positioned flex centering
   wrapper, so the navbar (also absolute, on top) would crash into it. A
   small margin-top on the card alone keeps the card clear of the strip
   without changing the rest of the centering math. The simulation-done
   card lives in a flex column with the navbar as a sibling row, so it
   doesn't need this nudge. */
.hero-spotgame-block .hero-spotgame-card { margin-top: 1.75rem; }

/* ---------------------------------------------------------------------------
   BAS chapter 10 extension - public web training landing. The same browser
   surface the user lands on after clicking the reminder email. Shares the
   refresher-card visual language so the transition reads as continuous.
   --------------------------------------------------------------------------- */
.hero-bas-train-page {
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
  padding: 1rem 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
}
.hero-bas-train-page.is-shown {
  opacity: 1;
  pointer-events: auto;
}
.hero-bas-train-card {
  width: 100%;
  max-width: 28rem;
  background: white;
  border-radius: 10px;
  padding: 1.25rem 1.5rem 1.5rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  text-align: left;
}
.hero-bas-train-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #0e0b1f;
  margin: 1rem 0 0.6rem 0;
}
.hero-bas-train-body {
  font-size: 0.85rem;
  color: #1f1d2e;
  line-height: 1.55;
  margin: 0 0 0.6rem 0;
}
.hero-bas-train-card .hidden { display: none; }

/* ---------------------------------------------------------------------------
   BAS chapter 11 - IoC drop. PolicyClue extension notification (top-right),
   browser-style download bar (bottom), Windows Defender system notification
   (top-right, stacked above the PolicyClue toast). Each toast slides in from
   its respective edge and fades out on chapter reset.
   --------------------------------------------------------------------------- */
.hero-pc-toast {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 14;
  width: min(310px, calc(100% - 2rem));
  background: white;
  border: 1px solid rgba(14, 11, 31, 0.08);
  border-left: 4px solid #6E22C7;
  border-radius: 0.5rem;
  padding: 0.75rem 0.9rem;
  box-shadow: 0 18px 42px -10px rgba(14, 11, 31, 0.35);
  opacity: 0;
  transform: translateX(20px);
  pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.hero-pc-toast.is-spawned {
  opacity: 1;
  transform: translateX(0);
}
.hero-pc-toast-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.45rem;
}
.hero-pc-toast-icon {
  width: 18px;
  height: 18px;
  border-radius: 4px;
}
.hero-pc-toast-app {
  font-size: 0.7rem;
  color: rgba(14, 11, 31, 0.55);
  font-weight: 600;
}
.hero-pc-toast-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #1f1d2e;
  margin-bottom: 0.25rem;
}
.hero-pc-toast-body {
  font-size: 0.72rem;
  color: rgba(14, 11, 31, 0.7);
  line-height: 1.4;
}

.hero-defender-toast {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 15;
  width: min(310px, calc(100% - 2rem));
  background: #2b2b2b;
  color: white;
  border-radius: 0.4rem;
  padding: 0.75rem 0.9rem;
  box-shadow: 0 18px 42px -10px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateX(20px);
  pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
  font-family: 'Segoe UI', system-ui, sans-serif;
}
.hero-defender-toast.is-spawned {
  opacity: 1;
  transform: translateX(0);
}
.hero-defender-toast-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.45rem;
}
.hero-defender-toast-icon {
  font-size: 1rem;
  color: #4caf50;
}
.hero-defender-toast-app {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
}
.hero-defender-toast-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: white;
  margin-bottom: 0.25rem;
}
.hero-defender-toast-body {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.4;
}

/* Governance compliance-recording toast (Kapitel 5). Bottom-right, dezent
   in PolicyClue-Lila gehalten, kein Block-Charakter - rein informativ. */
.hero-governance-toast {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  z-index: 14;
  width: min(290px, calc(100% - 2rem));
  background: white;
  border: 1px solid rgba(14, 11, 31, 0.08);
  border-left: 4px solid #6E22C7;
  border-radius: 0.5rem;
  padding: 0.75rem 0.9rem;
  box-shadow: 0 18px 42px -10px rgba(14, 11, 31, 0.35);
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.hero-governance-toast.is-spawned {
  opacity: 1;
  transform: translateY(0);
}
.hero-governance-toast-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.45rem;
}
.hero-governance-toast-icon {
  color: #6E22C7;
  display: inline-flex;
}
.hero-governance-toast-app {
  font-size: 0.7rem;
  color: rgba(14, 11, 31, 0.55);
  font-weight: 600;
}
.hero-governance-toast-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #1f1d2e;
  margin-bottom: 0.25rem;
}
.hero-governance-toast-body {
  font-size: 0.72rem;
  color: rgba(14, 11, 31, 0.7);
  line-height: 1.4;
}

/* Outlook web app frame (chapters 8, 9 & 14). Sits as a full-bleed overlay
   over the browser content; .is-shown fades it in. Modelled after
   outlook.office.com: top app-bar with Microsoft-logo, app name and search,
   a slim command-bar below, then the body slot. */
.hero-outlook-app {
  background: #faf9f8;
  font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: -0.005em;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
  z-index: 18;
  display: flex;
  flex-direction: column;
}
.hero-outlook-app.is-shown {
  opacity: 1;
  pointer-events: auto;
}
.hero-outlook-appbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem;
  padding: 0.45rem 0.85rem;
  background: #0078d4;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
}
.hero-outlook-appbar-left {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.hero-outlook-ms-logo {
  display: inline-grid;
  grid-template-columns: 6px 6px;
  grid-template-rows: 6px 6px;
  gap: 1px;
}
.hero-outlook-ms-logo span:nth-child(1) { background: #f25022; }
.hero-outlook-ms-logo span:nth-child(2) { background: #7fba00; }
.hero-outlook-ms-logo span:nth-child(3) { background: #00a4ef; }
.hero-outlook-ms-logo span:nth-child(4) { background: #ffb900; }
.hero-outlook-appbar-name { font-weight: 600; font-size: 0.8rem; }
.hero-outlook-appbar-search {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.65rem;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 0.3rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.72rem;
}
.hero-outlook-appbar-right {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
}
.hero-outlook-appbar-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
}
.hero-outlook-appbar-profile {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #6E22C7;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hero-outlook-cmdbar {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.85rem;
  background: #ffffff;
  border-bottom: 1px solid rgba(14, 11, 31, 0.08);
}
.hero-outlook-cmdbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.55rem;
  border-radius: 0.3rem;
  background: transparent;
  color: #1f1d2e;
  font-size: 0.72rem;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease;
}
.hero-outlook-cmdbar-btn:hover { background: rgba(14, 11, 31, 0.05); }
.hero-outlook-cmdbar-btn--primary {
  background: #0078d4;
  color: #fff;
}
.hero-outlook-cmdbar-btn--primary:hover { background: #106ebe; }
.hero-outlook-cmdbar-btn--accent {
  background: #6E22C7;
  color: #fff;
  border-color: #6E22C7;
}
.hero-outlook-cmdbar-btn--accent:hover { background: #5b1ba6; }
.hero-outlook-cmdbar-btn-icon {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}
.hero-outlook-cmdbar-divider {
  width: 1px;
  align-self: stretch;
  margin: 0.1rem 0.25rem;
  background: rgba(14, 11, 31, 0.1);
}
.hero-outlook-body {
  flex: 1;
  min-height: 0;
  background: #ffffff;
  display: flex;
  flex-direction: column;
}

/* Compose-View (Kapitel 8) - To/Subject/Body fields stacked vertically. */
.hero-outlook-compose {
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-size: 0.78rem;
  color: #1f1d2e;
}
.hero-outlook-compose-header {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1f1d2e;
  margin-bottom: 0.15rem;
}
.hero-outlook-phish-link {
  color: #0078d4;
  text-decoration: underline;
  cursor: pointer;
}
.hero-outlook-phish-link:hover { color: #106ebe; }
.hero-outlook-compose-field {
  display: flex;
  gap: 0.6rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(14, 11, 31, 0.06);
}
.hero-outlook-compose-label {
  width: 4rem;
  color: rgba(14, 11, 31, 0.55);
  font-weight: 500;
  flex-shrink: 0;
}
.hero-outlook-compose-value { font-weight: 500; }
.hero-outlook-compose-editor {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  line-height: 1.55;
  color: #1f1d2e;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.hero-outlook-compose-editor p { margin: 0; min-height: 1.2em; }

/* Inbox + Reading-Pane (Kapitel 14). Two-column layout: list on the left,
   reading pane on the right. Mail items in the list highlight on .is-selected
   and fade out on .is-removed when the reporting flow removes the phishing
   row from the inbox. */
.hero-outlook-inbox {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(11rem, 18rem) 1fr;
  min-height: 0;
}
.hero-outlook-inbox-list {
  background: #fafbfd;
  border-right: 1px solid rgba(14, 11, 31, 0.08);
  padding: 0.5rem 0;
  margin: 0;
  list-style: none;
  overflow: hidden;
}
.hero-outlook-inbox-item {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  padding: 0.55rem 0.85rem;
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: opacity .35s ease, max-height .35s ease, padding .35s ease, background .15s ease;
  max-height: 5rem;
}
.hero-outlook-inbox-item:hover { background: rgba(0, 120, 212, 0.05); }
.hero-outlook-inbox-item.is-selected {
  background: rgba(0, 120, 212, 0.1);
  border-left-color: #0078d4;
}
.hero-outlook-inbox-item.is-removed {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
}
.hero-outlook-inbox-item.is-arriving {
  /* Feedback mail slides in from the top once the reporting flow completes. */
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  transform: translateY(-4px);
  transition: opacity .35s ease, max-height .35s ease, padding .35s ease, transform .35s ease;
}
.hero-outlook-inbox-item.is-arriving.is-shown {
  opacity: 1;
  max-height: 5rem;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  transform: translateY(0);
}
.hero-outlook-inbox-from {
  font-size: 0.74rem;
  font-weight: 600;
  color: #1f1d2e;
}
.hero-outlook-inbox-subject {
  font-size: 0.74rem;
  color: #1f1d2e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-outlook-inbox-preview {
  font-size: 0.68rem;
  color: rgba(14, 11, 31, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-outlook-reading-pane {
  padding: 1rem 1.1rem;
  font-size: 0.78rem;
  color: #1f1d2e;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  overflow: hidden;
}
.hero-outlook-reading-subject {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}
.hero-outlook-reading-meta {
  font-size: 0.7rem;
  color: rgba(14, 11, 31, 0.6);
}
.hero-outlook-reading-body {
  margin: 0;
  line-height: 1.55;
  color: rgba(14, 11, 31, 0.85);
}

/* Modal pattern used by DLP-Warn (Kap 8) and Reporting-Phishing/Spam-Dialog
   (Kap 14). Scrim + centered card; .is-shown fades it in. Two action buttons
   - primary is brand-accented, secondary is neutral. */
.hero-outlook-modal {
  position: absolute;
  inset: 0;
  background: rgba(14, 11, 31, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 30;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}
.hero-outlook-modal.is-shown {
  opacity: 1;
  pointer-events: auto;
}
.hero-outlook-modal-card {
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 24px 48px -10px rgba(14, 11, 31, 0.4);
  padding: 1.1rem 1.2rem;
  width: min(360px, calc(100% - 2rem));
}
.hero-outlook-modal-title {
  margin: 0 0 0.55rem 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1f1d2e;
}
.hero-outlook-modal-body {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.55;
  color: rgba(14, 11, 31, 0.75);
}
.hero-outlook-modal-actions {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
.hero-outlook-modal-btn {
  padding: 0.4rem 0.85rem;
  border-radius: 0.35rem;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease;
}
.hero-outlook-modal-btn--secondary {
  background: #fff;
  color: #1f1d2e;
  border-color: rgba(14, 11, 31, 0.18);
}
.hero-outlook-modal-btn--secondary:hover { background: rgba(14, 11, 31, 0.04); }
.hero-outlook-modal-btn--primary {
  background: #6E22C7;
  color: #fff;
}
.hero-outlook-modal-btn--primary:hover { background: #5b1ba6; }
/* DLP modal: primary is the "send anyway" risk action - tint it red. */
.hero-outlook-modal--dlp .hero-outlook-modal-btn--primary {
  background: #dc2626;
}
.hero-outlook-modal--dlp .hero-outlook-modal-btn--primary:hover {
  background: #b91c1c;
}

/* Outlook Pre-Processing-Dialog (Kapitel 14) - authentischer Nachbau des
   nativen Reporting-Dialogs aus der Outlook-Add-in-Manifest-Definition.
   Title + Description + zwei Checkboxen + Freitext-Feld + Submit-Button. */
.hero-outlook-report-dialog {
  position: absolute;
  inset: 0;
  background: rgba(14, 11, 31, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 32;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}
.hero-outlook-report-dialog.is-shown {
  opacity: 1;
  pointer-events: auto;
}
.hero-outlook-report-dialog-card {
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 24px 48px -10px rgba(14, 11, 31, 0.45);
  padding: 1.1rem 1.3rem 1rem;
  width: min(420px, calc(100% - 1.5rem));
  max-height: calc(100% - 1.5rem);
  overflow-y: auto;
}
.hero-outlook-report-dialog-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #1f1d2e;
}
.hero-outlook-report-dialog-desc {
  margin: 0.55rem 0 0;
  font-size: 0.72rem;
  line-height: 1.5;
  color: rgba(14, 11, 31, 0.75);
}
.hero-outlook-report-dialog-section {
  margin-top: 0.9rem;
}
.hero-outlook-report-dialog-section-title {
  margin: 0 0 0.45rem 0;
  font-size: 0.74rem;
  font-weight: 600;
  color: #1f1d2e;
}
.hero-outlook-report-dialog-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.3rem 0;
  cursor: pointer;
}
.hero-outlook-report-dialog-check {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border: 1.5px solid rgba(14, 11, 31, 0.5);
  border-radius: 2px;
  margin-top: 1px;
  background: #fff;
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.hero-outlook-report-dialog-checkbox.is-checked .hero-outlook-report-dialog-check {
  background: #0078d4;
  border-color: #0078d4;
}
.hero-outlook-report-dialog-checkbox.is-checked .hero-outlook-report-dialog-check::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.hero-outlook-report-dialog-check-label {
  font-size: 0.72rem;
  line-height: 1.45;
  color: #1f1d2e;
}
.hero-outlook-report-dialog-label {
  display: block;
  font-size: 0.72rem;
  color: #1f1d2e;
  margin-bottom: 0.35rem;
}
.hero-outlook-report-dialog-input {
  border: 1px solid rgba(14, 11, 31, 0.18);
  border-radius: 0.25rem;
  background: #fff;
  height: 1.8rem;
}
.hero-outlook-report-dialog-actions {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
}
.hero-outlook-report-dialog-btn {
  padding: 0.4rem 1rem;
  border-radius: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease;
}
.hero-outlook-report-dialog-btn--primary {
  background: #0078d4;
  color: #fff;
}
.hero-outlook-report-dialog-btn--primary:hover { background: #106ebe; }

/* Outlook Post-Processing-Popup nach erfolgreichem Phishing-Reporting bei
   einer BAS-Simulation. Stilistisch eine zentrierte celebratory-Karte mit
   grünem Check-Icon und Brand-Akzent - identisch zur showPostProcessing-
   Dialog-Wirkung im echten Add-in. */
.hero-outlook-sim-feedback {
  position: absolute;
  inset: 0;
  background: rgba(14, 11, 31, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 33;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}
.hero-outlook-sim-feedback.is-shown {
  opacity: 1;
  pointer-events: auto;
}
.hero-outlook-sim-feedback-card {
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 24px 48px -10px rgba(14, 11, 31, 0.45);
  padding: 1.4rem 1.5rem 1.2rem;
  width: min(360px, calc(100% - 2rem));
  text-align: center;
}
.hero-outlook-sim-feedback-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.18);
  color: #16a34a;
  margin-bottom: 0.75rem;
}
.hero-outlook-sim-feedback-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1f1d2e;
}
.hero-outlook-sim-feedback-body {
  margin: 0.5rem 0 1rem;
  font-size: 0.78rem;
  line-height: 1.55;
  color: rgba(14, 11, 31, 0.78);
}
.hero-outlook-sim-feedback-btn {
  padding: 0.4rem 1.2rem;
  border-radius: 0.3rem;
  font-size: 0.78rem;
  font-weight: 600;
  background: #6E22C7;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
}
.hero-outlook-sim-feedback-btn:hover { background: #5b1ba6; }

.hero-download-bar {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  z-index: 13;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: white;
  border: 1px solid rgba(14, 11, 31, 0.1);
  border-radius: 0.4rem;
  padding: 0.5rem 0.75rem;
  box-shadow: 0 4px 14px rgba(14, 11, 31, 0.12);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.hero-download-bar.is-shown {
  opacity: 1;
  transform: translateY(0);
}
.hero-download-bar-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #4285F4;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
}
.hero-download-bar-meta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.hero-download-bar-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #1f1d2e;
}
.hero-download-bar-status {
  font-size: 0.65rem;
  color: rgba(14, 11, 31, 0.55);
}

/* ---------------------------------------------------------------------------
   Hero chapter timeline (right sidebar). Replaces the older horizontal chip
   strip below the mockup. JS state machine still drives `is-active`, `is-done`,
   and the caption text via the same `data-narrator-step` and
   `data-narrator-caption` hooks - only the markup and visual treatment changed.
   --------------------------------------------------------------------------- */
/* Browser back/forward chrome buttons. The cursor uses the back button at
   the end of the Security chapter to escape the anti-phishing block, going
   two steps back to the chat surface. Forward stays disabled (no history
   ahead in the demo). */
.hero-browser-nav {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-left: 0.4rem;
  flex-shrink: 0;
}
.hero-browser-nav-btn {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: rgba(14, 11, 31, 0.55);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.hero-browser-nav-btn:hover:not(.hero-browser-nav-btn--disabled) {
  background: rgba(14, 11, 31, 0.07);
  color: rgba(14, 11, 31, 0.85);
}
.hero-browser-nav-btn--disabled {
  color: rgba(14, 11, 31, 0.2);
  cursor: not-allowed;
}

.hero-timeline {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.25rem;
  background: white;
  border: 1px solid rgba(14, 11, 31, 0.08);
  border-radius: 1rem;
  box-shadow: 0 4px 14px -8px rgba(14, 11, 31, 0.08);
  /* Outer clip preserves rounded corners; the inner track owns the scroll. */
  overflow: hidden;
}

/* At lg+, take the sidebar out of grid sizing so the row height is set by
   the mockup alone. CSS Grid has no native "size by item 1 only" - but
   `position: absolute` on a grid item removes it from track sizing. The
   grid container is `lg:relative`, so inset+width here lock the sidebar to
   the right column at exactly the mockup's natural height. When the chapter
   list is taller than that, .hero-timeline-track scrolls (flex:1 +
   min-height:0 + overflow-y:auto). Below lg the grid is single-column and
   the sidebar stacks below the mockup as a normal-flow block - no stretch
   contortions needed there. */
@media (min-width: 1024px) {
  .hero-timeline {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 280px;
  }
}
.hero-timeline-header {
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(14, 11, 31, 0.06);
  flex-shrink: 0;
}
.hero-timeline-eyebrow {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6028e0;
  margin-bottom: 0.45rem;
}
.hero-timeline-caption {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #1f1d2e;
  font-style: italic;
  min-height: 2.4rem;
  transition: opacity .25s ease;
}
.hero-timeline-caption.is-fading { opacity: 0; }
.hero-timeline-track {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* Subtle scrollbar treatment so the rail doesn't fight the content. */
  scrollbar-width: thin;
  scrollbar-color: rgba(14, 11, 31, 0.18) transparent;
  padding-right: 0.25rem;
}
.hero-timeline-track::-webkit-scrollbar { width: 6px; }
.hero-timeline-track::-webkit-scrollbar-thumb {
  background: rgba(14, 11, 31, 0.18);
  border-radius: 3px;
}
.hero-timeline-module {
  /* Each module sets its own accent color via these custom properties; falls
     through to brand purple if a future module forgets to declare them. */
  --module-color: #6028e0;
  --module-color-soft: rgba(96, 40, 224, 0.12);
}
.hero-timeline-module[data-narrator-module="awareness"] {
  --module-color: #6028e0;
  --module-color-soft: rgba(96, 40, 224, 0.12);
}
.hero-timeline-module[data-narrator-module="dlp"] {
  --module-color: #0d9488;
  --module-color-soft: rgba(13, 148, 136, 0.14);
}
.hero-timeline-module[data-narrator-module="security"] {
  --module-color: #d97706;
  --module-color-soft: rgba(217, 119, 6, 0.14);
}
.hero-timeline-module[data-narrator-module="bas"] {
  --module-color: #e11d48;
  --module-color-soft: rgba(225, 29, 72, 0.14);
}
.hero-timeline-module-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--module-color);
  margin: 0 0 0.55rem 0;
}
.hero-timeline-module-icon {
  font-size: 18px !important;
  color: var(--module-color);
  line-height: 1;
  flex-shrink: 0;
}
/* Vertical rail + dots use a single shared `--rail-x` so the dot center and
   the rail center are guaranteed aligned. Previously the rail was a
   `border-left` on the <ol> and dots were positioned with hand-calculated
   `left: -0.83rem` offsets; the math was off by ~3px (border + list padding
   + step padding + half dot - too many moving parts). The new approach:
   list is `position: relative`, the rail is its absolute pseudo-element
   anchored at `--rail-x`, and each dot's center is positioned at the same
   `--rail-x` via `transform: translate(-50%, -50%)`. */
.hero-timeline-list {
  --rail-x: 6px;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.hero-timeline-list::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--rail-x);
  width: 1px;
  background: rgba(14, 11, 31, 0.1);
  transform: translateX(-0.5px); /* center the 1px line on --rail-x */
}
.hero-timeline-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.55rem 0.4rem 1.5rem; /* left padding clears the dot */
  border-radius: 0.55rem;
  cursor: pointer;
  user-select: none;
  color: rgba(14, 11, 31, 0.55);
  font-size: 0.82rem;
  font-weight: 500;
  transition:
    background-color .25s ease,
    color .25s ease;
}
.hero-timeline-step::before {
  /* Connector dot - center is on --rail-x, vertically centered on the row. */
  content: '';
  position: absolute;
  left: var(--rail-x);
  top: 50%;
  width: 9px;
  height: 9px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: white;
  border: 2px solid rgba(14, 11, 31, 0.18);
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.hero-timeline-step:hover:not(.is-active) {
  background: rgba(14, 11, 31, 0.03);
  color: rgba(14, 11, 31, 0.85);
}
.hero-timeline-step:focus-visible {
  outline: 2px solid var(--module-color);
  outline-offset: 2px;
}
.hero-timeline-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(14, 11, 31, 0.06);
  color: rgba(14, 11, 31, 0.55);
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: background-color .25s ease, color .25s ease;
}
.hero-timeline-label { line-height: 1.35; }
.hero-timeline-step.is-active {
  background: var(--module-color-soft);
  color: var(--module-color);
  font-weight: 600;
}
.hero-timeline-step.is-active::before {
  background: var(--module-color);
  border-color: var(--module-color);
  box-shadow: 0 0 0 4px var(--module-color-soft);
}
.hero-timeline-step.is-active .hero-timeline-num {
  background: var(--module-color);
  color: white;
}
.hero-timeline-step.is-done { color: rgba(14, 11, 31, 0.5); }
.hero-timeline-step.is-done::before {
  background: var(--module-color);
  border-color: var(--module-color);
  opacity: 0.55;
}
.hero-timeline-step.is-done .hero-timeline-num {
  background: var(--module-color-soft);
  color: var(--module-color);
}

@media (prefers-reduced-motion: reduce) {
  .hero-timeline-step { cursor: default; pointer-events: none; }
  .hero-timeline-step,
  .hero-timeline-step::before,
  .hero-timeline-num,
  .hero-timeline-caption { transition: none; }
}