/* Worth One Plan — AI Financial Planning Report Generator
   Design revamp, scoped under .wop-page so it cannot leak into the shared
   site header/footer/modals rendered by includes/header-service.php,
   includes/menu-service.php and includes/ai-footer-service.php. */

.wop-page {
  --brand: #4e4aff;
  --brand-dark: #3d3ad6;
  --accent: #0920f2;
  --brand-tint-1: #ededff;
  --brand-tint-2: #d4d9ff;
  --ink: #181818;
  --ink-soft: #121212;
  --ink-muted: rgba(43, 43, 43, 0.7);
  --ink-faint: rgba(43, 43, 43, 0.5);
  --surface: #f8f8f8;
  --surface-card: #ffffff;
  --surface-dark: #121212;
  --surface-dark-2: #181818;
  --line: rgba(17, 17, 17, 0.12);
  --line-dark: rgba(255, 255, 255, 0.12);
  --on-dark: #ffffff;
  --on-dark-muted: rgba(255, 255, 255, 0.68);
  --on-dark-soft: #e7e7f5;
  --brand-soft-on-dark: #c9c7ff;
  --brand-light: #7d79ff;
  --white: #ffffff;
  --true-black: #000000;
  --surface-hero-panel: #181829;
  --surface-dark-overlay: rgba(18, 18, 18, 0.95);
  --audience-bg: url(../images/worth-one-plan-ai-financial-planning-software/hero/audience-section-bg.jpg);
  --video-grad-1: #1e1e33;
  --video-grad-2: #141420;
  --modal-bg: #0d0d16;

  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 30px;

  --container: 1240px;
  --gutter: 24px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 500ms;

  --shadow-card: 0 20px 60px rgba(24, 24, 24, 0.08);
  --shadow-card-hover: 0 24px 70px rgba(78, 74, 255, 0.18);
  --shadow-hero-doc: 0 30px 70px rgba(0, 0, 0, 0.45);

  --success: #15803d;
  --success-tint: #dcfce7;

  /* Biz4Group global header / footer palette */
  --b4-navy: #273c59;
  --b4-blue: #4293e1;
  --b4-red: #ff0000;
  --b4-white: #ffffff;
  --b4-line: rgba(39, 60, 89, 0.14);
  --b4-footer-bg: #ffffff;
  --b4-footer-bar: #c9ccd1;
  --b4-appt: #141414;
  --hero-bar-fill: color-mix(in srgb, var(--surface-hero-panel) 100%, white 8%);
  --hero-bg-image: url(../images/worth-one-plan-ai-financial-planning-software/hero/hero-bg-image.jpg);
}

.wop-page *,
.wop-page *::before,
.wop-page *::after {
  box-sizing: border-box;
}
.wop-page {
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--ink);
  background: var(--surface-card);
  -webkit-font-smoothing: antialiased;
}
/* NOTE: overflow-x is intentionally on body (not .wop-page) - setting it on a
   nested div breaks position:sticky for every sticky element inside it
   (.hiw-pin, .reasons-sticky, .faq-sticky), which also collapses the
   how-it-works scroll-track into one giant blank gap. This stylesheet only
   loads on this page, so scoping to real body is safe. */
body {
  overflow-x: hidden;
}
.wop-page img,
.wop-page svg {
  display: block;
  max-width: 100%;
}
.wop-page ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wop-page a {
  color: inherit;
  text-decoration: none;
}
.wop-page button {
  font-family: inherit;
}
.wop-page h1,
.wop-page h2,
.wop-page h3,
.wop-page h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.15;
  font-family: "Exo 2", sans-serif;
}
.wop-page p {
  margin: 0;
}

.wop-page .container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.wop-page :focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.wop-page .on-dark :focus-visible {
  outline-color: var(--white);
}

.wop-page .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
}
.wop-page .on-dark .eyebrow {
  color: var(--brand-soft-on-dark);
}

.wop-page .section-head {
  max-width: 640px;
  margin: 0 auto 56px;
  text-align: center;
}
.wop-page .section-head h2 {
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 14px;
}
.wop-page .section-head p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-muted);
}
.wop-page .on-dark .section-head h2 {
  color: var(--white);
}
.wop-page .on-dark .section-head p {
  color: var(--on-dark-muted);
}

.wop-page section {
  padding: 96px 0;
  position: relative;
}
@media (max-width: 767px) {
  .wop-page section {
    padding: 64px 0;
  }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.wop-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: var(--radius-sm);
  padding: 15px 28px;
  font-size: 16px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background-color 150ms ease,
    color 150ms ease,
    transform 150ms ease,
    box-shadow 150ms ease,
    border-color 150ms ease;
}
.wop-page .btn:active {
  transform: translateY(1px);
}
.wop-page .btn-primary {
  background: var(--brand);
  color: var(--white);
  box-shadow: 0 10px 24px rgba(78, 74, 255, 0.28);
}
.wop-page .btn-primary:hover {
  background: var(--brand-dark);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(78, 74, 255, 0.34);
}
.wop-page .btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--line);
}
.wop-page .btn-ghost:hover {
  border-color: var(--brand);
  color: var(--brand);
  transform: translateY(-1px);
}
.wop-page .on-dark .btn-ghost {
  color: var(--white);
  border-color: var(--line-dark);
}
.wop-page .on-dark .btn-ghost:hover {
  border-color: var(--white);
}
.wop-page .btn-white {
  background: var(--white);
  color: var(--brand);
}
.wop-page .btn-white:hover {
  background: var(--brand-tint-1);
  transform: translateY(-1px);
}
.wop-page .btn-play-icon {
  width: 18px;
  height: 18px;
  flex: none;
}

/* ============================================================
   MOTION SYSTEM
   ============================================================ */
.wop-page .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.wop-page .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .wop-page *,
  .wop-page *::before,
  .wop-page *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .wop-page .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   HERO
   ============================================================ */
.wop-page .hero {
  padding: 130px 0 0;
  position: relative;
  overflow: hidden;
  background-color: var(--surface-hero-panel);
  background-image: var(--hero-bg-image);
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
}
.wop-page .hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.wop-page .hero-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: color-mix(in srgb, var(--surface-hero-panel) 62%, transparent);
}
.wop-page .hero .container {
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .wop-page .hero-bg-video {
    display: none;
  }
}
.wop-page .hero-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.wop-page .hero-copy {
  width: 100%;
}
.wop-page .hero-copy .eyebrow {
  color: var(--brand-soft-on-dark);
  max-width: none;
  margin: 0 auto 16px;
}
.wop-page .hero-copy h1 {
  font-size: clamp(34px, 4.5vw, 54px);
  color: var(--white);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 auto 20px;
  max-width: 980px;
}
.wop-page .hero-copy p {
  font-size: 18px;
  line-height: 1.65;
  color: var(--on-dark-muted);
  max-width: 640px;
  margin: 0 auto 32px;
}
.wop-page .hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

/* ---- Hero visual: prompt bar + flow indicator + report document ---- */
.wop-page .hero-visual {
  position: relative;
  opacity: 1;
  min-width: 0;
  /* Worth AI product palette (sampled from the Figma advisor-platform screens) */
  --w-gold: #ccad72;
  --w-gold-deep: #b3925b;
  --w-cream: #f4eedf;
  --w-cream-soft: #fbf9f5;
  --w-rail: #1e1e1e;
  --w-canvas: #f5f5f5;
  --w-ink: #1e1e1e;
  --w-ink-2: #4a4a4a;
  --w-muted: #757575;
  --w-faint: #9a9a9a;
  --w-line: #e6e6e6;
  --w-line-soft: #f0f0f0;
}

/* ---------- laptop shell -------------------------------------------------
   The screen box is the pure-black area measured off laptop.png
   (x 285-2526, y 15-1477 of 2812x1568), expressed as percentages so it
   tracks the image at any width. The app is authored at a fixed 760x496
   and scaled by JS to fill that box exactly.                              */
.wop-page .hero-laptop {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: 44px auto 0;
  filter: drop-shadow(0 26px 48px rgba(0, 0, 0, 0.55));
}
.wop-page .hero-laptop-img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
  pointer-events: none;
}
.wop-page .hero-laptop-screen {
  position: absolute;
  left: 10.1352%;
  top: 0.9566%;
  width: 79.7297%;
  height: 93.3036%;
  z-index: 2;
  overflow: hidden;
  border-radius: 5px 5px 0 0;
  background: #000;
}
/* a faint sheen across the glass so the screen reads as a display */
.wop-page .hero-laptop-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    112deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0.05) 26%,
    rgba(255, 255, 255, 0) 46%,
    rgba(0, 0, 0, 0.03) 100%
  );
}

/* ---------- Worth AI app-window mockup ---------- */
.wop-page .hero-app-window {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 760px;
  height: 496.3px;
  transform-origin: top left;
  transform: scale(var(--wa-k, 1));
  background: var(--white);
  overflow: hidden;
  border-radius: 9px 9px 0 0;
  text-align: left;
  font-feature-settings: "tnum" 0;
}

/* ---- 1. dark icon rail ---- */
.wop-page .wa-rail {
  width: 46px;
  flex: none;
  background: var(--w-rail);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0 14px;
}
.wop-page .wa-rail-logo {
  color: var(--w-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  flex: none;
}
.wop-page .wa-rail-logo svg {
  width: 26px;
  height: auto;
}
.wop-page .wa-rail-icons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  flex: 1;
  width: 100%;
}
.wop-page .wa-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.4);
}
.wop-page .wa-icon svg {
  width: 15px;
  height: 15px;
}
.wop-page .wa-icon.active {
  color: var(--w-gold);
}
.wop-page .wa-icon.is-last {
  margin-top: auto;
}

/* ---- 2. chat-list sidebar ---- */
.wop-page .wa-side {
  width: 152px;
  flex: none;
  background: var(--white);
  border-right: 1px solid var(--w-line);
  display: flex;
  flex-direction: column;
  padding: 12px 10px;
  gap: 7px;
  overflow: hidden;
}
.wop-page .wa-newchat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: none;
  background: var(--w-gold);
  color: #2b2313;
  border-radius: 8px;
  padding: 7px 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.wop-page .wa-newchat svg {
  width: 11px;
  height: 11px;
}
.wop-page .wa-search {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  border: 1px solid var(--w-line);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 9.5px;
  color: var(--w-faint);
}
.wop-page .wa-search svg {
  width: 10px;
  height: 10px;
  flex: none;
}
.wop-page .wa-nav-item {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 6px 8px;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 600;
  color: var(--w-ink-2);
}
.wop-page .wa-nav-item svg {
  width: 11px;
  height: 11px;
  flex: none;
  color: var(--w-muted);
}
.wop-page .wa-nav-item.active {
  background: var(--w-cream);
  color: var(--w-ink);
}
.wop-page .wa-side-label {
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--w-faint);
  margin: 6px 0 0 8px;
  flex: none;
}
.wop-page .wa-chat-item {
  font-size: 9.5px;
  color: var(--w-ink-2);
  padding: 5px 8px;
  border-radius: 6px;
  flex: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition:
    background-color 320ms var(--ease),
    color 320ms var(--ease),
    font-weight 320ms var(--ease);
}
.wop-page .wa-chat-item.active {
  background: var(--w-cream);
  color: var(--w-ink);
  font-weight: 700;
}

/* ---- 3. main column ---- */
.wop-page .wa-main {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--w-canvas);
  overflow: hidden;
}
.wop-page .wa-topbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  height: 40px;
  flex: none;
  background: var(--white);
  border-bottom: 1px solid var(--w-line);
}
.wop-page .wa-hello {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--w-ink);
  flex: 1;
  min-width: 0;
}
.wop-page .wa-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #d9d9d9;
  color: #8a8a8a;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wop-page .wa-avatar svg {
  width: 12px;
  height: 12px;
}
.wop-page .wa-chevron {
  width: 10px;
  height: 10px;
  color: var(--w-muted);
  flex: none;
}

.wop-page .wa-body {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* thread */
.wop-page .wa-thread {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  scroll-behavior: smooth;
  padding: 14px 18px 12px;
}
.wop-page .wa-idle {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 20px;
  pointer-events: none;
  opacity: 1;
  transition: opacity 320ms var(--ease);
}
.wop-page .wa-body.is-chat .wa-idle {
  opacity: 0;
}
.wop-page .wa-idle-inner {
  position: absolute;
  left: 20px;
  right: 20px;
  top: var(--wa-idle-top, 32%);
}
.wop-page .wa-idle-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--w-gold);
  margin-bottom: 10px;
}
.wop-page .wa-idle-mark svg {
  width: 52px;
  height: auto;
}
.wop-page .wa-idle h4 {
  font-size: 17px;
  font-weight: 700;
  color: var(--w-ink);
  margin-bottom: 5px;
  letter-spacing: -0.01em;
}
.wop-page .wa-idle p {
  font-size: 11.5px;
  color: var(--w-muted);
}

.wop-page .wa-convo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  transition: opacity 300ms var(--ease);
}
.wop-page .wa-body.is-chat .wa-convo {
  opacity: 1;
}

/* a message only enters the flow once the script mounts it, so pending turns
   do not reserve blank height above the composer */
.wop-page .wa-msg-user,
.wop-page .wa-msg-ai,
.wop-page .wa-ai-label,
.wop-page .wa-ai-line,
.wop-page .wa-doccard {
  display: none;
}
.wop-page .wa-msg-user.mounted {
  display: block;
}
.wop-page .wa-msg-ai.mounted {
  display: flex;
}
.wop-page .wa-ai-label.mounted {
  display: flex;
}
.wop-page .wa-ai-line.mounted {
  display: block;
}
.wop-page .wa-doccard.mounted {
  display: flex;
}

.wop-page .wa-msg-user {
  align-self: flex-end;
  max-width: 82%;
  background: var(--w-cream);
  color: var(--w-ink);
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 10.5px;
  line-height: 1.55;
  opacity: 0;
  transform: translateY(7px);
  transition:
    opacity 380ms var(--ease),
    transform 380ms var(--ease);
}
.wop-page .wa-msg-user.on {
  opacity: 1;
  transform: translateY(0);
}

.wop-page .wa-msg-ai {
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.wop-page .wa-ai-label {
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  color: var(--w-gold-deep);
  letter-spacing: 0.01em;
}
.wop-page .wa-ai-label svg {
  width: 11px;
  height: 11px;
  color: var(--w-gold);
}
.wop-page .wa-ai-line {
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--w-ink-2);
  max-width: 94%;
  opacity: 0;
  transform: translateY(5px);
  transition:
    opacity 340ms var(--ease),
    transform 340ms var(--ease);
}
.wop-page .wa-ai-line b {
  color: var(--w-ink);
  font-weight: 700;
}
.wop-page .wa-ai-line.on,
.wop-page .wa-ai-label.on {
  opacity: 1;
  transform: translateY(0);
}
.wop-page .wa-ai-label {
  opacity: 0;
  transform: translateY(5px);
  transition:
    opacity 340ms var(--ease),
    transform 340ms var(--ease);
}

/* thinking */
.wop-page .wa-think {
  display: none;
  align-items: center;
  gap: 6px;
}
.wop-page .wa-think.on {
  display: flex;
}
.wop-page .wa-think-dots {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--white);
  border: 1px solid var(--w-line);
  border-radius: 999px;
  padding: 7px 11px;
}
.wop-page .wa-think-dots i {
  width: 4.5px;
  height: 4.5px;
  border-radius: 50%;
  background: var(--w-gold);
  display: block;
  font-style: normal;
  animation: heroThinkBounce 1.1s ease-in-out infinite;
}
.wop-page .wa-think-dots i:nth-child(2) {
  animation-delay: 0.15s;
}
.wop-page .wa-think-dots i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes heroThinkBounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.45;
  }
  30% {
    transform: translateY(-3px);
    opacity: 1;
  }
}

/* generated-document card in the thread */
.wop-page .wa-doccard {
  align-items: center;
  gap: 9px;
  width: 88%;
  background: var(--white);
  border: 1px solid var(--w-gold);
  border-radius: 10px;
  padding: 9px 11px;
  opacity: 0;
  transform: translateY(7px) scale(0.985);
  transition:
    opacity 420ms var(--ease),
    transform 420ms var(--ease);
}
.wop-page .wa-doccard.on {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.wop-page .wa-doccard-icon {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--w-cream);
  color: var(--w-gold-deep);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wop-page .wa-doccard-icon svg {
  width: 12px;
  height: 12px;
}
.wop-page .wa-doccard-txt {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.wop-page .wa-doccard-txt b {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--w-ink);
}
.wop-page .wa-doccard-txt i {
  font-size: 9px;
  font-style: normal;
  color: var(--w-muted);
}
.wop-page .wa-doccard-arrow {
  width: 11px;
  height: 11px;
  color: var(--w-muted);
  flex: none;
}

/* composer */
.wop-page .wa-composer-wrap {
  flex: none;
  padding: 8px 18px 10px;
  transform: translateY(var(--wa-lift, -104px));
  transition: transform 620ms var(--ease);
}
.wop-page .wa-body.is-chat .wa-composer-wrap {
  transform: translateY(0);
}
.wop-page .wa-composer {
  background: var(--white);
  border: 1px solid var(--w-line);
  border-radius: 12px;
  padding: 10px 12px 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.wop-page .wa-composer-field {
  display: block;
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--w-ink);
  min-height: 33px;
  max-height: 33px;
  overflow: hidden;
}
.wop-page .wa-composer-text {
  display: inline;
}
.wop-page .wa-composer-text:empty::before {
  content: "Message Worth AI...";
  color: var(--w-faint);
}
.wop-page .hero-prompt-cursor {
  display: inline-block;
  width: 1.5px;
  height: 11px;
  background: var(--w-gold-deep);
  margin-left: 1px;
  vertical-align: -1px;
  animation: heroCaretBlink 1s step-end infinite;
}
@keyframes heroCaretBlink {
  50% {
    opacity: 0;
  }
}
.wop-page .wa-composer-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.wop-page .wa-plus,
.wop-page .wa-tools {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
  border: 1px solid var(--w-line);
  border-radius: 999px;
  color: var(--w-muted);
  font-size: 9.5px;
  font-weight: 600;
}
.wop-page .wa-plus {
  width: 19px;
  height: 19px;
  justify-content: center;
  padding: 0;
}
.wop-page .wa-plus svg {
  width: 10px;
  height: 10px;
}
.wop-page .wa-tools {
  padding: 4px 9px;
}
.wop-page .wa-tools svg {
  width: 9px;
  height: 9px;
}
.wop-page .wa-send {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex: none;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--w-gold);
  color: #2b2313;
  transition: transform 200ms var(--ease);
}
.wop-page .wa-send svg {
  width: 11px;
  height: 11px;
}
.wop-page .wa-send.is-pressed {
  transform: scale(0.86);
}

.wop-page .wa-quickpills {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 1;
  transition: opacity 240ms var(--ease);
}
.wop-page .wa-body.is-chat .wa-quickpills {
  opacity: 0;
  pointer-events: none;
}
.wop-page .wa-quickpills span {
  font-size: 9.5px;
  font-weight: 500;
  color: var(--w-ink-2);
  background: var(--white);
  border: 1px solid var(--w-line);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}
.wop-page .wa-disclaimer {
  margin-top: 7px;
  text-align: center;
  font-size: 8px;
  color: var(--w-faint);
}

/* ---- 4. document panel (slides in from the right) ---- */
.wop-page .wa-docpanel {
  position: absolute;
  top: 40px;
  right: 0;
  bottom: 0;
  width: 66%;
  z-index: 6;
  background: var(--white);
  border-left: 1px solid var(--w-line);
  display: flex;
  flex-direction: column;
  transform: translateX(102%);
  box-shadow: -16px 0 38px rgba(0, 0, 0, 0.1);
  transition: transform 640ms var(--ease);
}
.wop-page .wa-docpanel.on {
  transform: translateX(0);
}
.wop-page .wa-docpanel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 9px 12px;
  border-bottom: 1px solid var(--w-line);
}
.wop-page .wa-docpanel-head > svg {
  width: 13px;
  height: 13px;
  color: var(--w-muted);
  flex: none;
}
.wop-page .wa-docpanel-titles {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.wop-page .wa-docpanel-titles b {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--w-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wop-page .wa-docpanel-titles i {
  font-size: 8.5px;
  font-style: normal;
  color: var(--w-muted);
}
.wop-page .wa-close {
  width: 12px;
  height: 12px;
  color: var(--w-muted);
  flex: none;
}

.wop-page .wa-docpanel-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 12px 14px;
}
.wop-page .wa-doc-sec {
  opacity: 0;
  transform: translateY(7px);
  transition:
    opacity 420ms var(--ease),
    transform 420ms var(--ease);
}
.wop-page .wa-doc-sec.on {
  opacity: 1;
  transform: translateY(0);
}

.wop-page .wa-doc-letterhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.wop-page .wa-doc-brand {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--w-gold);
}
.wop-page .wa-doc-brand svg {
  width: 19px;
  height: auto;
}
.wop-page .wa-doc-brand span {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--w-ink);
}
.wop-page .wa-doc-date {
  font-size: 8px;
  color: var(--w-muted);
}

.wop-page .wa-doc-h1 {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--w-ink);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.wop-page .wa-doc-sub {
  font-size: 9px;
  color: var(--w-muted);
  margin-bottom: 9px;
}
.wop-page .wa-doc-p {
  font-size: 9px;
  line-height: 1.65;
  color: var(--w-ink-2);
  margin-bottom: 11px;
}
.wop-page .wa-doc-h2 {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--w-ink);
  margin-bottom: 6px;
}

.wop-page .wa-doc-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 11px;
  font-size: 8.5px;
}
.wop-page .wa-doc-table th {
  background: var(--w-cream);
  color: var(--w-ink);
  font-weight: 700;
  text-align: left;
  padding: 5px 7px;
  white-space: nowrap;
}
.wop-page .wa-doc-table th:not(:first-child),
.wop-page .wa-doc-table td:not(:first-child) {
  text-align: right;
}
.wop-page .wa-doc-table td {
  padding: 5px 7px;
  color: var(--w-ink-2);
  border-bottom: 1px solid var(--w-line-soft);
}
.wop-page .wa-doc-table tr:last-child td {
  border-bottom: none;
}
.wop-page .wa-doc-buy {
  color: #1f8a5a;
  font-weight: 700;
}
.wop-page .wa-doc-trim {
  color: #b9832a;
  font-weight: 700;
}

.wop-page .wa-doc-steps {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}
.wop-page .wa-doc-step {
  display: flex;
  gap: 6px;
  font-size: 8.5px;
  line-height: 1.55;
  color: var(--w-ink-2);
}
.wop-page .wa-doc-step::before {
  content: "";
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: var(--w-gold);
  flex: none;
  margin-top: 5px;
}

.wop-page .wa-doc-sign {
  border-top: 1px solid var(--w-line);
  padding-top: 8px;
}
.wop-page .wa-doc-sign b {
  display: block;
  font-size: 9px;
  font-weight: 700;
  color: var(--w-ink);
}
.wop-page .wa-doc-sign i {
  display: block;
  font-size: 8px;
  font-style: normal;
  color: var(--w-muted);
  margin-top: 1px;
}

/* gold download button in the panel header */
.wop-page .hero-doc-download {
  position: relative;
  overflow: hidden;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 7px;
  background: var(--w-gold);
  color: #2b2313;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: background-color 260ms var(--ease);
}
.wop-page .hero-doc-download.is-done {
  background: var(--w-cream);
  color: var(--w-gold-deep);
  box-shadow: inset 0 0 0 1px var(--w-gold);
}
.wop-page .hero-doc-dl-icons {
  position: relative;
  width: 10px;
  height: 10px;
  flex: none;
}
.wop-page .hero-doc-dl-icons svg {
  position: absolute;
  inset: 0;
  width: 10px;
  height: 10px;
  transition:
    opacity 220ms var(--ease),
    transform 220ms var(--ease);
}
.wop-page .hero-doc-dl-icons .dl-check {
  opacity: 0;
  transform: scale(0.5);
}
.wop-page .hero-doc-download.is-downloading .dl-arrow {
  animation: dlArrowBounce 0.75s ease-in-out infinite;
}
.wop-page .hero-doc-download.is-done .dl-arrow {
  opacity: 0;
  transform: scale(0.5);
}
.wop-page .hero-doc-download.is-done .dl-check {
  opacity: 1;
  transform: scale(1);
}
@keyframes dlArrowBounce {
  0%,
  100% {
    transform: translateY(-1.5px);
  }
  50% {
    transform: translateY(1.5px);
  }
}
.wop-page .hero-doc-dl-fill {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: rgba(43, 35, 19, 0.55);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 1;
}
.wop-page .hero-doc-download.is-downloading .hero-doc-dl-fill {
  transform: scaleX(1);
  transition: transform 1500ms linear;
}
.wop-page .hero-doc-download.is-done .hero-doc-dl-fill {
  transform: scaleX(1);
  opacity: 0;
  transition: opacity 300ms ease 150ms;
}

@media (prefers-reduced-motion: reduce) {
  .wop-page .hero-doc-download.is-downloading .dl-arrow {
    animation: none;
  }
  .wop-page .hero-doc-dl-fill {
    transition: none;
  }
  .wop-page .hero-prompt-cursor {
    animation: none;
    opacity: 1;
  }
  .wop-page .wa-think-dots i {
    animation: none;
  }
}

.wop-page .hero-app-window.is-compact .wa-side {
  display: none;
}
.wop-page .hero-app-window.is-compact .wa-docpanel {
  width: 82%;
}

@media (max-width: 1024px) {
  .wop-page .hero-copy p {
    max-width: none;
  }
}
@media (max-width: 767px) {
  .wop-page .hero {
    padding: 64px 0 0;
  }
  .wop-page .hero-copy p {
    margin-bottom: 28px;
  }
}

/* ============================================================
   TRUST STRIP
   ============================================================ */
.wop-page .trust-strip {
  padding: 44px 0;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
}
.wop-page .trust-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 32px;
}
.wop-page .trust-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 10px;
}
.wop-page .trust-heading {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600;
  color: var(--ink);
}
.wop-page .marquee-track {
  overflow: hidden;
  position: relative;
}
.wop-page .marquee-track::before,
.wop-page .marquee-track::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.wop-page .marquee-track::before {
  left: 0;
  background: linear-gradient(90deg, var(--surface), transparent);
}
.wop-page .marquee-track::after {
  right: 0;
  background: linear-gradient(270deg, var(--surface), transparent);
}
.wop-page .marquee-row {
  display: flex;
  width: max-content;
}
/* Animation is gated behind .is-ready (added by JS only once every logo image
   has actually decoded) rather than running from the moment the element
   exists. -50% has to land exactly on the seam between the two duplicated
   sets, which only holds once the row's true width is known; starting the
   animation against an unloaded row (images ~0px wide) locks that -50% to
   the wrong distance, and the row growing out from under it a moment later
   is what showed up as a stretch of gap that only "caught up" once the
   images finished loading. */
.wop-page .marquee-row.is-ready {
  animation: marqueeScroll 32s linear infinite;
  will-change: transform;
}
.wop-page .marquee-track:hover .marquee-row {
  animation-play-state: paused;
}
@keyframes marqueeScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.wop-page .logo-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 6px;
  margin-right: 56px;
  filter: grayscale(100%);
  opacity: 0.5;
  transition:
    opacity 220ms ease,
    filter 220ms ease;
}
/* margin-right (not flex `gap`) is what makes the loop seamless: gap only
   sits *between* items (11 gaps for 12 logos, none after the last), so half
   the row's rendered width doesn't land exactly on the seam where the
   duplicate set starts - the animation would jump back ~half a gap early
   every cycle. Giving every logo its own trailing margin, including the
   last one, makes both halves pixel-identical so -50% lands exactly right. */
.wop-page .logo-slot:hover {
  opacity: 1;
  filter: grayscale(0%);
}
.wop-page .logo-slot img {
  height: 24px;
  width: auto;
  max-width: 132px;
  object-fit: contain;
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .wop-page .marquee-row.is-ready {
    animation: none;
  }
}

/* ============================================================
   COMPARISON
   ============================================================ */
.wop-page .comparison-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    var(--surface-card) 0%,
    color-mix(in srgb, var(--brand-tint-1) 45%, var(--surface-card)) 100%
  );
}
.wop-page .compare-head {
  max-width: 760px;
  margin: 0 auto 64px;
  text-align: center;
}
.wop-page .compare-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-tint-1) 70%, var(--surface-card));
  border: 1px solid var(--brand-tint-2);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--brand) 12%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.wop-page .compare-badge svg {
  width: 14px;
  height: 14px;
  flex: none;
}
.wop-page .compare-head h2 {
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 14px;
}
.wop-page .compare-head p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-muted);
  max-width: 700px;
  margin: 0 auto;
}

.wop-page .compare-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  max-width: 1060px;
  margin: 0 auto;
  align-items: stretch;
}
.wop-page .compare-card {
  position: relative;
  border-radius: 28px;
  padding: 40px 34px;
  display: flex;
  flex-direction: column;
  transition:
    transform 320ms var(--ease),
    box-shadow 320ms var(--ease),
    border-color 320ms var(--ease);
}
.wop-page .compare-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.wop-page .compare-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wop-page .compare-icon svg {
  width: 22px;
  height: 22px;
}
.wop-page .compare-card h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin: 0;
}
.wop-page .compare-sub {
  font-size: 14.5px;
  line-height: 1.55;
  margin-bottom: 24px;
}
.wop-page .compare-card ul {
  display: flex;
  flex-direction: column;
}
.wop-page .compare-card li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 15.5px;
  line-height: 1.55;
  padding: 16px 0;
}
.wop-page .compare-card li + li {
  border-top: 1px solid var(--line);
}
.wop-page .compare-card li svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

/* --- Left card: traditional reporting --- */
.wop-page .compare-card.old {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(24, 24, 24, 0.04);
}
.wop-page .compare-card.old:hover {
  transform: translateY(-2px);
}
.wop-page .compare-card.old::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  background-image: radial-gradient(var(--line) 1px, transparent 1px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(
    ellipse 62% 55% at 88% 10%,
    black,
    transparent 72%
  );
  mask-image: radial-gradient(
    ellipse 62% 55% at 88% 10%,
    black,
    transparent 72%
  );
}
.wop-page .compare-card.old > * {
  position: relative;
  z-index: 1;
}
.wop-page .compare-card.old .compare-icon {
  background: color-mix(in srgb, var(--line) 45%, var(--surface-card));
  color: var(--ink-faint);
}
.wop-page .compare-card.old h3 {
  color: var(--ink-faint);
}
.wop-page .compare-card.old .compare-sub {
  color: var(--ink-faint);
}
.wop-page .compare-card.old li {
  color: var(--ink-muted);
}
.wop-page .compare-card.old li svg {
  color: var(--ink-faint);
}

/* --- Right card: with worth one --- */
.wop-page .compare-card.new {
  background: var(--surface-card);
  border: 1.5px solid color-mix(in srgb, var(--brand) 55%, transparent);
  box-shadow:
    0 30px 70px color-mix(in srgb, var(--brand) 16%, transparent),
    0 2px 8px rgba(24, 24, 24, 0.04);
}
.wop-page .compare-card.new:hover {
  transform: translateY(-6px);
  border-color: var(--brand);
  box-shadow:
    0 40px 90px color-mix(in srgb, var(--brand) 26%, transparent),
    0 2px 8px rgba(24, 24, 24, 0.06);
}
.wop-page .compare-card.new::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    120% 90% at 0% 0%,
    color-mix(in srgb, var(--brand) 12%, transparent),
    transparent 62%
  );
}
.wop-page .compare-card.new > *:not(.compare-decor) {
  position: relative;
  z-index: 1;
}
.wop-page .compare-card.new .compare-icon {
  background: linear-gradient(135deg, var(--brand), var(--accent));
  color: var(--white);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--brand) 34%, transparent);
}
.wop-page .compare-card.new h3 {
  color: var(--brand);
}
.wop-page .compare-card.new .compare-sub {
  color: var(--ink-muted);
}
.wop-page .compare-card.new li {
  color: var(--ink);
  font-weight: 500;
}
.wop-page .compare-card.new li svg {
  color: var(--brand);
}
.wop-page .compare-card.new li + li {
  border-top-color: var(--brand-tint-1);
}

/* decorative analytics illustration (right card) */
.wop-page .compare-card.new {
  padding-bottom: 74px;
}
.wop-page .compare-decor {
  position: absolute;
  right: 22px;
  bottom: 14px;
  width: 132px;
  height: auto;
  opacity: 0.13;
  pointer-events: none;
  z-index: 0;
  color: var(--brand);
}

/* --- Floating VS badge --- */
.wop-page .compare-vs {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 66px;
  height: 66px;
  border-radius: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-card);
  border: 1px solid var(--brand-tint-2);
  box-shadow:
    0 10px 30px rgba(24, 24, 24, 0.1),
    0 0 0 8px color-mix(in srgb, var(--brand) 6%, transparent),
    0 0 34px color-mix(in srgb, var(--brand) 22%, transparent);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--brand);
  animation: vsFloat 3.4s ease-in-out infinite;
}
@keyframes vsFloat {
  0%,
  100% {
    transform: translate(-50%, -50%);
  }
  50% {
    transform: translate(-50%, calc(-50% - 7px));
  }
}

@media (max-width: 900px) {
  .wop-page .compare-grid {
    grid-template-columns: 1fr;
    gap: 64px;
  }
  .wop-page .compare-card {
    padding: 34px 26px;
  }
  .wop-page .compare-decor {
    width: 120px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wop-page .compare-vs {
    animation: none;
  }
}

/* ============================================================
   AUDIENCE
   ============================================================ */
.wop-page .audience-section {
  position: relative;
  overflow: hidden;
  padding: 56px 0 72px;
  background-color: var(--brand-tint-1);
  background-image: var(--audience-bg);
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}
.wop-page .audience-section .container {
  position: relative;
  z-index: 1;
}
.wop-page .audience-section .section-head {
  max-width: 820px;
  margin-bottom: 36px;
}
.wop-page .eyebrow-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--surface-card);
  border: 1px solid var(--brand-tint-2);
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.wop-page .heading-gradient {
  background: linear-gradient(90deg, var(--brand), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.wop-page .audience-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.wop-page .audience-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  display: flex;
  flex-direction: column;
  transition:
    border-color 200ms ease,
    box-shadow 200ms ease,
    transform 200ms ease;
}
.wop-page .audience-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 1;
  background: radial-gradient(
    ellipse 130% 100% at 50% 0%,
    color-mix(in srgb, var(--brand) 14%, transparent),
    transparent 72%
  );
  transition: opacity 260ms ease;
}
.wop-page .audience-card:hover::before {
  opacity: 1;
}
.wop-page .audience-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  z-index: 3;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--ease);
}
.wop-page .audience-card:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}
.wop-page .audience-card:hover::after {
  transform: scaleX(1);
}
.wop-page .audience-card-body {
  position: relative;
  z-index: 2;
  padding: 18px 20px 14px;
}
.wop-page .audience-icon-badge {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-tint-1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  transition:
    background-color 260ms ease,
    transform 260ms ease;
}
.wop-page .audience-card:hover .audience-icon-badge {
  background: color-mix(in srgb, var(--brand) 20%, transparent);
  transform: scale(1.06);
}
.wop-page .audience-icon {
  width: 19px;
  height: 19px;
  color: var(--brand);
}
.wop-page .audience-card h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.3;
  transition: color 260ms ease;
}
.wop-page .audience-card:hover h3 {
  color: var(--brand);
}
.wop-page .audience-card p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-muted);
}
.wop-page .audience-card-media {
  position: relative;
  margin-top: auto;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.wop-page .audience-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 300ms ease;
}
.wop-page .audience-card:hover .audience-card-media img {
  transform: scale(1.04);
}

@media (max-width: 1024px) {
  .wop-page .audience-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .wop-page .audience-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   HOW IT WORKS: screens on the left, step pointers on the right.
   The whole section is sized to sit inside a single fold - the
   active step advances on a timer and on click, not on scroll.
   ============================================================ */
.wop-page #how-it-works {
  padding: 0;
}
.wop-page .hiw-track {
  position: relative;
}
/* Centered in the viewport rather than anchored near the top. `top` can't be
   a percentage here - sticky offsets need a definite-height containing
   block to resolve against, which this layout doesn't have, so a % value
   silently fails to stick at all. The script sets `top` in px instead,
   computed as (viewport height - pin height) / 2, and keeps it in sync on
   resize via hiwLayout(). */
.wop-page .hiw-pin {
  position: sticky;
  top: 104px;
  padding: 28px 0;
}
.wop-page #how-it-works .section-head {
  max-width: 760px;
  margin-bottom: 20px;
}

.wop-page .hiw-stage {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  align-items: stretch;
}

/* left: the pointers and the copy for the active step */
.wop-page .hiw-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 40px;
}

.wop-page .hiw-captions {
  display: grid;
  margin-top: 26px;
  padding-left: 24px;
}
.wop-page .hiw-caption {
  grid-area: 1/1;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-muted);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition:
    opacity 380ms var(--ease),
    transform 380ms var(--ease);
}
.wop-page .hiw-caption.active {
  opacity: 1;
  transform: none;
}

/* right: the screen, sized as large as a single fold allows */
.wop-page .hiw-screens {
  min-width: 0;
  display: flex;
  align-items: center;
  border-left: 1px solid var(--line);
  padding-left: 40px;
}

.wop-page .hiw-visual {
  position: relative;
  /* fixed per breakpoint (see media queries below) rather than fluid - object-fit:cover
     on the img below never stretches regardless of the box's proportions, so the only
     thing height controls is how much gets cropped off the sides at each width. */
  height: 506px;
  width: 100%;
  max-width: 100%;
  border-radius: 12px;
  overflow: hidden;
  /* light grey stroke at 60%, drawn inside so it never shifts the crop */
  box-shadow: inset 0 0 0 1px rgba(209, 213, 219, 0.6);
}
.wop-page .hiw-visual-frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.015);
  pointer-events: none;
  transition:
    opacity 520ms var(--ease),
    transform 520ms var(--ease);
}
.wop-page .hiw-visual-frame.active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
/* Frame's aspect-ratio matches the screenshots' own native ratio (1100x733)
   exactly, so object-fit:cover never has to crop or stretch anything - the
   whole screenshot just fills the box pixel-for-pixel. No manual % math. */
.wop-page .hiw-visual-frame img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---- right: the pointer rail ---- */
.wop-page .hiw-rail {
  display: flex;
  flex-direction: column;
}
.wop-page .hiw-rail-item {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 17px 0 17px 24px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ink-faint);
  transition: color 280ms ease;
}
.wop-page .hiw-rail-item:hover {
  color: var(--ink-muted);
}
.wop-page .hiw-rail-item.active {
  color: var(--ink);
}
.wop-page .hiw-rail-item:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

/* the rule is built from one segment per item, so the fill can ride it */
.wop-page .hiw-rail-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--line);
  border-radius: 2px;
}
.wop-page .hiw-rail-item::before {
  transition: background-color 280ms ease;
}
.wop-page .hiw-rail-item.active::before {
  background: var(--brand);
}

.wop-page .hiw-rail-num {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  flex: none;
  color: var(--ink-faint);
  transition: color 280ms ease;
}
.wop-page .hiw-rail-item.active .hiw-rail-num {
  color: var(--brand);
}
.wop-page .hiw-rail-label {
  font-size: 18px;
  line-height: 1.35;
  font-weight: 500;
}
.wop-page .hiw-rail-item.active .hiw-rail-label {
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .wop-page .hiw-visual-frame {
    transition: opacity 200ms linear;
    transform: none;
  }
  .wop-page .hiw-visual-frame.active {
    transform: none;
  }
}

/* between the container's max-width cap and the mobile stack breakpoint, the
   image column keeps narrowing while a fixed height would otherwise leave
   object-fit:cover cropping more and more off the sides - step the height
   down to keep the crop reasonable at each width. */
@media (max-width: 1240px) {
  .wop-page .hiw-visual {
    height: 460px;
  }
}
@media (max-width: 1100px) {
  .wop-page .hiw-visual {
    height: 400px;
  }
}
@media (max-width: 1024px) {
  /* no pinning on narrow screens - the rail is tap-driven there */
  .wop-page .hiw-pin {
    position: static;
    top: auto;
    transform: none;
  }
  .wop-page .hiw-stage {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .wop-page .hiw-side {
    padding-right: 0;
  }
  .wop-page .hiw-screens {
    border-left: 0;
    padding-left: 0;
  }
  .wop-page .hiw-visual {
    height: clamp(240px, 40vh, 420px);
  }
}
@media (max-width: 600px) {
  .wop-page .hiw-rail-label {
    font-size: 16px;
  }
  .wop-page .hiw-caption {
    font-size: 15.5px;
  }
}

/* ============================================================
   DEMO (dark break)
   ============================================================ */
.wop-page .demo {
  background: var(--surface-dark-2);
}
.wop-page .demo-video-wrap {
  max-width: 860px;
  margin: 44px auto 0;
  position: relative;
}
.wop-page .demo-video-glow {
  position: absolute;
  inset: -40px;
  background: radial-gradient(
    closest-side,
    rgba(78, 74, 255, 0.35),
    transparent 70%
  );
  filter: blur(30px);
  z-index: 0;
}
.wop-page .video-frame {
  position: relative;
  z-index: 1;
  aspect-ratio: 16/9;
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, var(--video-grad-1), var(--video-grad-2));
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.wop-page .video-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
  transition: transform 400ms var(--ease);
}
.wop-page .video-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 60% 60% at 50% 50%,
    rgba(0, 0, 0, 0.28),
    rgba(0, 0, 0, 0.06) 70%
  );
}
.wop-page .video-frame:hover .video-thumb {
  transform: scale(1.03);
}
.wop-page .video-play-btn {
  position: relative;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition:
    transform 220ms var(--ease),
    background 220ms var(--ease),
    box-shadow 220ms var(--ease);
}
.wop-page .video-play-btn:hover {
  transform: scale(1.08);
  background: rgba(255, 255, 255, 0.26);
  box-shadow:
    0 10px 40px rgba(78, 74, 255, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
/* icon nudged 2px right of dead-center - an equilateral play triangle reads
   optically off-centre otherwise, since its own visual weight leans left */
.wop-page .video-play-btn svg {
  width: 30px;
  height: 30px;
  margin-left: 2px;
}
.wop-page .pulse-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.55);
  animation: pulseRing 2.5s var(--ease) infinite;
}
.wop-page .pulse-ring.r2 {
  animation-delay: 0.8s;
}
@keyframes pulseRing {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(2.1);
    opacity: 0;
  }
}
.wop-page .duration-chip {
  position: absolute;
  bottom: 16px;
  right: 16px;
  background: rgba(0, 0, 0, 0.55);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 6px;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .wop-page .pulse-ring {
    animation: none;
    opacity: 0;
  }
}

/* ============================================================
   CAPABILITIES — AI feature showcase
   Section-scoped blue palette (no purple) per design spec.
   ============================================================ */
.wop-page #capabilities {
  --cap-blue: #2563eb;
  --cap-blue-2: #3b82f6;
  --cap-blue-3: #60a5fa;
  --cap-blue-4: #93c5fd;
  --cap-blue-5: #bfdbfe;
  --cap-soft: #eff6ff;
  --cap-navy: #0f172a;
  --cap-body: #64748b;
  --cap-line: #e2e8f0;
  --cap-radius: 22px;
  --cap-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --cap-t: 250ms;
  padding: 110px 0 104px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 40%, #eef4fe 100%);
  overflow: hidden;
}
.wop-page #capabilities .container {
  max-width: 1320px;
}
.wop-page .cap-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- decorative background --- */
.wop-page .caps-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.wop-page .caps-deco .dots {
  position: absolute;
  top: 56px;
  left: 0;
  width: 210px;
  height: 260px;
  background-image: radial-gradient(
    circle,
    rgba(37, 99, 235, 0.22) 1.6px,
    transparent 1.7px
  );
  background-size: 23px 23px;
  -webkit-mask-image: linear-gradient(115deg, #000 8%, transparent 70%);
  mask-image: linear-gradient(115deg, #000 8%, transparent 70%);
}
.wop-page .caps-deco .ring {
  position: absolute;
  top: 130px;
  right: -170px;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  border: 1px solid rgba(37, 99, 235, 0.1);
}
.wop-page .caps-deco .ring::after {
  content: "";
  position: absolute;
  inset: 64px;
  border-radius: 50%;
  border: 1px solid rgba(37, 99, 235, 0.07);
}

/* --- header --- */
.wop-page .caps-head {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}
.wop-page .caps-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 24px;
  padding: 9px 19px;
  border-radius: 999px;
  background: var(--cap-soft);
  border: 1px solid #dbeafe;
  color: var(--cap-blue);
  font-size: 14.5px;
  font-weight: 700;
  box-shadow: 0 2px 12px rgba(37, 99, 235, 0.1);
}
.wop-page .caps-badge svg {
  width: 17px;
  height: 17px;
  flex: none;
}
.wop-page .caps-head h2 {
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 14px;
}
.wop-page .caps-head p {
  max-width: 700px;
  margin: 0 auto;
  font-size: 19px;
  line-height: 1.62;
  color: var(--cap-body);
}

/* --- grid + shared card shell --- */
.wop-page .caps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
.wop-page .caps-grid .reveal {
  transition-delay: calc(var(--i, 0) * 70ms);
}
/* --split: card 1 stays a single tall column on the left; cards 2-5 form
   their own 2x2 grid on the right. The side grid stretches to match card
   1's height, with its top row sized to its own content and the bottom
   row (1fr) absorbing the leftover space so both blocks end at the same
   bottom edge. */
.wop-page .caps-grid.caps-grid--split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: stretch;
}
.wop-page .caps-side-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto 1fr;
  align-items: stretch;
  gap: 24px;
}
.wop-page .cap-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--cap-line);
  border-radius: var(--cap-radius);
  padding: 30px;
  overflow: hidden; /* keep any un-shrinkable row (e.g. .cap-connect) clipped to
    the card's own rounded edge instead of spilling past the viewport, where
    body's overflow-x:hidden would cut it off looking broken */
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 8px 24px rgba(15, 23, 42, 0.045);
  transition:
    transform var(--cap-t) var(--cap-ease),
    box-shadow var(--cap-t) var(--cap-ease),
    border-color var(--cap-t) var(--cap-ease);
}
.wop-page .cap-card:hover {
  transform: translateY(-4px);
  border-color: #cfe0fb;
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.05),
    0 18px 44px rgba(37, 99, 235, 0.13);
}
.wop-page .cap-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--cap-soft);
  border: 1px solid #dce9fd;
  color: var(--cap-blue);
  transition: transform var(--cap-t) var(--cap-ease);
}
.wop-page .cap-icon svg {
  width: 22px;
  height: 22px;
}
.wop-page .cap-card:hover .cap-icon {
  transform: translateY(-1px) scale(1.06);
}
.wop-page .cap-icon.is-solid {
  background: linear-gradient(150deg, var(--cap-blue-2), var(--cap-blue));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28);
}
.wop-page .cap-card h3 {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cap-navy);
}
.wop-page .cap-card > h3 {
  margin: 20px 0 12px;
}
.wop-page .cap-head-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.wop-page .cap-head-row h3 {
  margin: 0;
}
.wop-page .cap-desc {
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--cap-body);
}
.wop-page .cap-head-row + .cap-desc {
  margin-top: 14px;
  margin-bottom: 26px;
}

/* --- card 1: report type pills + preview --- */
.wop-page .cap-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0;
}
.wop-page .cap-pill {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 17px;
  border-radius: 999px;
  cursor: pointer;
  background: #fff;
  color: var(--cap-blue);
  border: 1px solid var(--cap-blue-5);
  transition:
    background-color 200ms var(--cap-ease),
    border-color 200ms var(--cap-ease),
    color 200ms var(--cap-ease),
    transform 200ms var(--cap-ease),
    box-shadow 200ms var(--cap-ease);
}
.wop-page .cap-pill:hover {
  background: var(--cap-soft);
  border-color: var(--cap-blue-3);
  transform: translateY(-1px);
}
.wop-page .cap-pill[aria-pressed="true"] {
  background: var(--cap-blue);
  border-color: var(--cap-blue);
  color: #fff;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.26);
}
.wop-page .cap-pill[aria-pressed="true"]:hover {
  background: var(--cap-blue);
}

.wop-page .cap-preview {
  margin-top: auto;
  border: 1px solid var(--cap-line);
  border-radius: 14px;
  background: #f8fafc;
  padding: 16px 18px 18px;
}
.wop-page .cap-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.wop-page .cap-preview-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
}
.wop-page .cap-preview-tag {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cap-blue);
}
/* the five report previews are stacked in one cell and crossfaded, so the
   card never changes height when you switch type */
.wop-page .cap-preview-body {
  display: grid;
  min-height: 66px;
}
.wop-page .cap-view {
  grid-area: 1/1;
  display: flex;
  align-items: flex-end;
  gap: 18px;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition:
    opacity 300ms var(--cap-ease),
    transform 300ms var(--cap-ease);
}
.wop-page .cap-view.active {
  opacity: 1;
  transform: none;
}

/* shared bits */
.wop-page .cap-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wop-page .cap-bar {
  display: block;
  height: 7px;
  border-radius: 4px;
  background: #e2e8f0;
  flex: 1;
}

/* debt payment plan: balance winding down, then a payment schedule */
.wop-page .cap-steps {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 66px;
  flex: none;
}
.wop-page .cap-steps i {
  display: block;
  width: 11px;
  border-radius: 3px 3px 0 0;
  background: var(--cap-blue-4);
}
.wop-page .cap-steps i:nth-child(1) {
  height: 62px;
}
.wop-page .cap-steps i:nth-child(2) {
  height: 51px;
}
.wop-page .cap-steps i:nth-child(3) {
  height: 41px;
}
.wop-page .cap-steps i:nth-child(4) {
  height: 30px;
}
.wop-page .cap-steps i:nth-child(5) {
  height: 20px;
}
.wop-page .cap-steps i:nth-child(6) {
  height: 10px;
  background: var(--cap-blue);
}
.wop-page .cap-rows {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 6px;
}
.wop-page .cap-amt {
  display: block;
  height: 7px;
  width: 34px;
  border-radius: 4px;
  background: var(--cap-blue-3);
  flex: none;
}

/* initial proposal: a written document in two columns */
.wop-page .cap-view[data-view="proposal"] {
  align-items: stretch;
  gap: 16px;
}
.wop-page .cap-doc {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.wop-page .cap-doc-title {
  display: block;
  height: 9px;
  width: 58%;
  border-radius: 4px;
  background: var(--cap-blue-3);
}
.wop-page .cap-doc .cap-bar {
  flex: none;
}
.wop-page .cap-doc .cap-bar:nth-child(3) {
  width: 92%;
}
.wop-page .cap-doc .cap-bar:nth-child(4) {
  width: 68%;
}

/* annual review: allocation ring + legend */
.wop-page .cap-view[data-view="review"] {
  align-items: center;
  gap: 18px;
}
.wop-page .cap-ring {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  flex: none;
  background: conic-gradient(
    var(--cap-blue) 0 46%,
    var(--cap-blue-3) 46% 73%,
    var(--cap-blue-4) 73% 100%
  );
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 54%, #000 55%);
  mask: radial-gradient(circle at 50% 50%, transparent 54%, #000 55%);
}
.wop-page .cap-legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wop-page .cap-key {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  flex: none;
}
.wop-page .cap-legend .cap-row:nth-child(1) .cap-key {
  background: var(--cap-blue);
}
.wop-page .cap-legend .cap-row:nth-child(2) .cap-key {
  background: var(--cap-blue-3);
}
.wop-page .cap-legend .cap-row:nth-child(3) .cap-key {
  background: var(--cap-blue-4);
}
.wop-page .cap-legend .cap-row:nth-child(2) .cap-bar {
  max-width: 78%;
}
.wop-page .cap-legend .cap-row:nth-child(3) .cap-bar {
  max-width: 56%;
}

/* custom build: pick the sections */
.wop-page .cap-view[data-view="custom"] {
  align-items: stretch;
}
.wop-page .cap-checks {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wop-page .cap-box {
  position: relative;
  display: block;
  width: 13px;
  height: 13px;
  border-radius: 4px;
  flex: none;
  border: 1.5px solid var(--cap-blue-4);
  background: #fff;
}
.wop-page .cap-row.is-on .cap-box {
  background: var(--cap-blue);
  border-color: var(--cap-blue);
}
.wop-page .cap-row.is-on .cap-box::after {
  content: "";
  position: absolute;
  left: 3.6px;
  top: 1px;
  width: 3.2px;
  height: 6.4px;
  border: solid #fff;
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(43deg);
}
.wop-page .cap-checks .cap-row:nth-child(2) .cap-bar {
  max-width: 82%;
}
.wop-page .cap-checks .cap-row:nth-child(3) .cap-bar {
  max-width: 64%;
}
.wop-page .cap-checks .cap-row:nth-child(4) .cap-bar {
  max-width: 74%;
}

@media (prefers-reduced-motion: reduce) {
  .wop-page .cap-view {
    transition: opacity 160ms linear;
    transform: none;
  }
  .wop-page .cap-view.active {
    transform: none;
  }
}
.wop-page .cap-chart {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 66px;
  flex: none;
}
.wop-page .cap-chart i {
  display: block;
  width: 11px;
  border-radius: 3px 3px 0 0;
  background: var(--cap-blue-4);
  transform-origin: bottom;
  transition: transform 450ms var(--cap-ease);
}
.wop-page .cap-chart i:nth-child(1) {
  height: 32px;
}
.wop-page .cap-chart i:nth-child(2) {
  height: 52px;
}
.wop-page .cap-chart i:nth-child(3) {
  height: 38px;
}
.wop-page .cap-chart i:nth-child(4) {
  height: 26px;
}
.wop-page .cap-chart i:nth-child(5) {
  height: 34px;
}
.wop-page .cap-chart i:nth-child(6) {
  height: 14px;
}
.wop-page .cap-card:hover .cap-chart i:nth-child(1) {
  transform: scaleY(1.3);
  transition-delay: 0ms;
}
.wop-page .cap-card:hover .cap-chart i:nth-child(2) {
  transform: scaleY(0.8);
  transition-delay: 45ms;
}
.wop-page .cap-card:hover .cap-chart i:nth-child(3) {
  transform: scaleY(1.25);
  transition-delay: 90ms;
}
.wop-page .cap-card:hover .cap-chart i:nth-child(4) {
  transform: scaleY(1.55);
  transition-delay: 135ms;
}
.wop-page .cap-card:hover .cap-chart i:nth-child(5) {
  transform: scaleY(0.85);
  transition-delay: 180ms;
}
.wop-page .cap-card:hover .cap-chart i:nth-child(6) {
  transform: scaleY(2.1);
  transition-delay: 225ms;
}
.wop-page .cap-preview-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 6px;
}
.wop-page .cap-preview-lines i {
  display: block;
  height: 7px;
  border-radius: 4px;
  background: #e2e8f0;
}
.wop-page .cap-preview-lines i:nth-child(1) {
  width: 100%;
}
.wop-page .cap-preview-lines i:nth-child(2) {
  width: 88%;
}
.wop-page .cap-preview-lines i:nth-child(3) {
  width: 96%;
}
.wop-page .cap-preview-lines i:nth-child(4) {
  width: 62%;
}

/* --- card 2: editor + watermark toggle --- */
.wop-page .cap-editor {
  margin: 22px 0 0;
  border: 1px solid var(--cap-line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.wop-page .cap-toolbar {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 12px 15px;
  border-bottom: 1px solid var(--cap-line);
  color: #475569;
}
.wop-page .cap-toolbar svg {
  width: 17px;
  height: 17px;
  flex: none;
}
.wop-page .cap-toolbar .tb-group {
  display: flex;
  align-items: center;
  gap: 15px;
}
.wop-page .cap-toolbar .tb-sep {
  width: 1px;
  height: 16px;
  background: var(--cap-line);
  flex: none;
}
.wop-page .cap-editor-body {
  padding: 16px 15px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  flex: 1;
}
.wop-page .cap-editor-body i {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: #e2e8f0;
}
.wop-page .cap-editor-body i:nth-child(1) {
  width: 48%;
}
.wop-page .cap-editor-body i:nth-child(2) {
  width: 100%;
}
.wop-page .cap-editor-body i.is-active {
  background: #334155;
  width: 76%;
  transition: width 500ms var(--cap-ease);
}
.wop-page .cap-card:hover .cap-editor-body i.is-active {
  width: 100%;
}
.wop-page .cap-editor-body i:nth-child(4) {
  width: 42%;
}

/* --- card 3: brand colors + template previews --- */
/* templates stack vertically and run the full width of the card */
.wop-page .cap-themes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 22px;
  flex: 1;
}
.wop-page .cap-theme {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  flex: 1;
  min-height: 70px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--cap-line);
  border-radius: 12px;
  background: #fff;
  padding: 12px 16px;
  color: #cbd5e1;
  transition:
    border-color 200ms var(--cap-ease),
    box-shadow 200ms var(--cap-ease),
    transform 200ms var(--cap-ease),
    color 200ms var(--cap-ease);
}
.wop-page .cap-theme:hover {
  transform: translateY(-2px);
  border-color: #cfe0fb;
}
.wop-page .cap-theme[aria-pressed="true"] {
  border-color: var(--cap-blue);
  box-shadow:
    0 0 0 1px var(--cap-blue),
    0 6px 16px rgba(37, 99, 235, 0.13);
  color: var(--cap-blue-4);
}
.wop-page .cap-theme-mark {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: var(--cap-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 200ms var(--cap-ease);
}
.wop-page .cap-theme-mark b {
  font-family: "Exo 2", sans-serif;
  font-size: 19px;
  font-weight: 600;
  color: var(--cap-navy);
  line-height: 1;
}
.wop-page .cap-theme-mark b.cap-font-serif {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
}
.wop-page .cap-theme-mark b.cap-font-light {
  font-family: "Exo 2", sans-serif;
  font-weight: 300;
}
.wop-page .cap-theme-label {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--cap-navy);
}
.wop-page .cap-theme[aria-pressed="true"] .cap-theme-label {
  color: var(--cap-blue);
}
.wop-page .cap-theme-thumb {
  flex: none;
  width: 88px;
  height: auto;
}

/* --- card 4: export file tiles --- */
.wop-page .cap-files {
  display: flex;
  gap: 22px;
  margin-top: auto;
}
.wop-page .cap-file {
  flex: none;
  display: grid;
  place-items: center;
  transition: transform var(--cap-t) var(--cap-ease);
}
.wop-page .cap-file img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}
.wop-page .cap-card:hover .cap-file:nth-child(1) {
  transform: translateY(-4px);
  transition-delay: 0ms;
}
.wop-page .cap-card:hover .cap-file:nth-child(2) {
  transform: translateY(-4px);
  transition-delay: 60ms;
}
.wop-page .cap-card:hover .cap-file:nth-child(3) {
  transform: translateY(-4px);
  transition-delay: 120ms;
}

/* --- card 5: data source ecosystem --- */
.wop-page .cap-connect {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}
.wop-page .cap-node {
  width: 56px;
  height: 56px;
  flex: none;
  border: 1px solid var(--cap-line);
  border-radius: 14px;
  background: #fff;
  display: grid;
  place-items: center;
  transition:
    transform var(--cap-t) var(--cap-ease),
    box-shadow var(--cap-t) var(--cap-ease);
}
.wop-page .cap-node svg {
  width: 26px;
  height: 26px;
}
.wop-page .cap-card:hover .cap-node {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.09);
}
.wop-page .cap-wire {
  position: relative;
  flex: 1;
  height: 2px;
  min-width: 24px;
  background-image: linear-gradient(
    90deg,
    var(--cap-blue-3) 50%,
    transparent 0
  );
  background-size: 9px 2px;
  background-repeat: repeat-x;
}
.wop-page .cap-wire::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cap-blue);
  opacity: 0;
}
.wop-page .cap-card:hover .cap-wire::after {
  animation: capWire 1s var(--cap-ease);
}
.wop-page .cap-wire.is-reverse::after {
  left: auto;
  right: 0;
}
.wop-page .cap-card:hover .cap-wire.is-reverse::after {
  animation: capWireRev 1s var(--cap-ease);
}
@keyframes capWire {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(calc(100% - 6px));
  }
}
@keyframes capWireRev {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(calc(-100% + 6px));
  }
}
.wop-page .cap-hub {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--cap-blue-2), var(--cap-blue));
  color: #fff;
  font-family: "Exo 2", sans-serif;
  font-size: 27px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.34);
  transition: transform var(--cap-t) var(--cap-ease);
}
.wop-page .cap-card:hover .cap-hub {
  transform: scale(1.06);
}

/* --- card 6: promotional --- */
.wop-page .cap-promo {
  /* no aspect-ratio here on purpose: on a grid item it can win over
     align-items:stretch and lock this card to its own height regardless of
     its row siblings, breaking row alignment. min-height is just a floor
     against extreme cropping; align-self:stretch keeps it matched to
     whichever sibling is tallest, same as every other card in the grid. */
  position: relative;
  padding: 0;
  overflow: hidden;
  min-height: 270px;
  align-self: stretch;
  border-color: transparent;
  background: #0b3fa8;
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.26);
}
/* anchored toward the left, not centered: the "Built for Advisors" headline
   sits in the left third of the source image, the report-card illustration
   fills the rest - biasing the crop left keeps the copy safe even when this
   card gets tall/narrow and cover has to cut a lot off the sides. */
.wop-page .cap-promo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 22% center;
}
.wop-page .cap-promo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    120% 80% at 78% 22%,
    rgba(255, 255, 255, 0.16),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 400ms var(--cap-ease);
}
.wop-page .cap-promo:hover {
  border-color: transparent;
  box-shadow: 0 18px 46px rgba(37, 99, 235, 0.36);
}
.wop-page .cap-promo:hover::after {
  opacity: 1;
}

/* --- bottom CTA bar --- */
.wop-page .caps-cta {
  margin-top: 34px;
  display: flex;
  align-items: center;
  gap: 20px;
  background: #fff;
  border: 1px solid var(--cap-line);
  border-radius: 999px;
  padding: 14px 18px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 10px 30px rgba(15, 23, 42, 0.05);
}
.wop-page .caps-cta-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(150deg, var(--cap-blue-2), var(--cap-blue));
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3);
}
.wop-page .caps-cta-icon svg {
  width: 20px;
  height: 20px;
}
.wop-page .caps-cta p {
  flex: 1;
  font-size: 16px;
  line-height: 1.5;
  color: #475569;
}
.wop-page .caps-cta p b {
  color: var(--cap-blue);
  font-weight: 700;
}
.wop-page .caps-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 13px 24px;
  border-radius: 999px;
  background: #fff;
  border: 1.5px solid var(--cap-blue);
  color: var(--cap-blue);
  font-size: 15px;
  font-weight: 700;
  transition:
    background-color var(--cap-t) var(--cap-ease),
    color var(--cap-t) var(--cap-ease),
    box-shadow var(--cap-t) var(--cap-ease),
    transform var(--cap-t) var(--cap-ease);
}
.wop-page .caps-cta-btn svg {
  width: 16px;
  height: 16px;
  transition: transform var(--cap-t) var(--cap-ease);
}
.wop-page .caps-cta-btn:hover {
  background: var(--cap-blue);
  color: #fff;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.3);
  transform: translateY(-1px);
}
.wop-page .caps-cta-btn:hover svg {
  transform: translateX(4px);
}

/* --- responsive --- */
@media (max-width: 1080px) {
  .wop-page .caps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .wop-page .caps-grid.caps-grid--split {
    grid-template-columns: 1fr;
  }
  .wop-page .cap-promo {
    min-height: 300px;
  }
}
@media (max-width: 760px) {
  .wop-page #capabilities {
    padding: 76px 0 72px;
  }
  .wop-page .caps-head {
    margin-bottom: 40px;
  }
  .wop-page .caps-head h2 {
    font-size: clamp(27px, 7vw, 38px);
  }
  .wop-page .caps-head p {
    font-size: 17px;
  }
  .wop-page .caps-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .wop-page .caps-side-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .wop-page .cap-card {
    padding: 24px;
  }
  .wop-page .cap-toolbar {
    gap: 11px;
    padding: 11px 12px;
  }
  .wop-page .cap-toolbar .tb-group {
    gap: 11px;
  }
  .wop-page .cap-promo {
    min-height: 240px;
  }
  .wop-page .caps-cta {
    flex-direction: column;
    text-align: center;
    border-radius: 24px;
    padding: 26px 22px;
    gap: 16px;
    margin-top: 26px;
  }
  .wop-page .caps-cta p {
    text-align: center;
  }
  .wop-page .caps-cta-btn {
    width: 100%;
    justify-content: center;
  }
  .wop-page .caps-badge {
    font-size: 12px;
  }
  .wop-page .final-cta .btn {
    font-size: 14px;
    padding: 12px 18px;
  }
  .wop-page .final-cta {
    padding: 50px 0;
  }
}
/* narrow phones: .cap-connect's node/hub sizes (56/66/56) plus its two wires'
   24px floor don't fit inside a ~320px screen once the container gutter and
   card padding are subtracted - since those items are flex:none (nodes/hub)
   or floored by min-width (wires), flexbox can't shrink them to fit, so the
   row runs wider than the card and the overhang gets clipped by body's
   overflow-x:hidden instead of wrapping or scrolling. Shrink the row's own
   sizing so its unshrinkable minimum fits the available width. */
@media (max-width: 400px) {
  .wop-page .cap-card {
    padding: 20px;
  }
  .wop-page .cap-connect {
    gap: 6px;
  }
  .wop-page .cap-node {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }
  .wop-page .cap-node svg {
    width: 20px;
    height: 20px;
  }
  .wop-page .cap-hub {
    width: 50px;
    height: 50px;
    font-size: 21px;
  }
  .wop-page .cap-wire {
    min-width: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wop-page .cap-card,
  .wop-page .cap-icon,
  .wop-page .cap-file,
  .wop-page .cap-node,
  .wop-page .cap-hub,
  .wop-page .cap-chart i,
  .wop-page .caps-cta-btn,
  .wop-page .caps-cta-btn svg {
    transition: none;
  }
  .wop-page .cap-card:hover {
    transform: none;
  }
  .wop-page .cap-card:hover .cap-wire::after,
  .wop-page .cap-card:hover .cap-wire.is-reverse::after {
    animation: none;
  }
}

/* ============================================================
   INTEGRATIONS — Bring the Data You Already Use
   ============================================================ */
.wop-page .integrations-section {
  background: var(--surface);
  overflow: hidden;
}
.wop-page .integrations-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  max-width: 920px;
  margin: 0 auto;
}

.wop-page .integration-pill {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  padding: 9px 22px 9px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-card);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  transition:
    border-color 260ms var(--ease),
    box-shadow 260ms var(--ease),
    transform 260ms var(--ease);
}
.wop-page .integration-pill:hover {
  border-color: var(--brand-tint-2);
  box-shadow: 0 14px 30px rgba(78, 74, 255, 0.16);
  transform: translateY(-5px);
}

.wop-page .integration-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface);
  animation: integrationFloat 3.6s ease-in-out infinite;
  transition:
    transform 320ms var(--ease),
    background 320ms var(--ease);
}
/* desync the float per pill so they don't all bob in lockstep */
.wop-page .integration-pill:nth-child(1) .integration-icon {
  animation-delay: 0s;
}
.wop-page .integration-pill:nth-child(2) .integration-icon {
  animation-delay: 0.3s;
}
.wop-page .integration-pill:nth-child(3) .integration-icon {
  animation-delay: 0.6s;
}
.wop-page .integration-pill:nth-child(4) .integration-icon {
  animation-delay: 0.9s;
}
.wop-page .integration-pill:nth-child(5) .integration-icon {
  animation-delay: 1.2s;
}
.wop-page .integration-pill:nth-child(6) .integration-icon {
  animation-delay: 1.5s;
}
.wop-page .integration-pill:nth-child(7) .integration-icon {
  animation-delay: 1.8s;
}
.wop-page .integration-pill:nth-child(8) .integration-icon {
  animation-delay: 2.1s;
}
@keyframes integrationFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

.wop-page .integration-icon svg {
  width: 18px;
  height: 18px;
  filter: grayscale(1) opacity(0.5);
  transition: filter 320ms var(--ease);
}
.wop-page .integration-pill:hover .integration-icon {
  background: #fff;
  transform: scale(1.14) rotate(-6deg);
  box-shadow: 0 6px 14px rgba(16, 24, 40, 0.1);
}
.wop-page .integration-pill:hover .integration-icon svg {
  filter: none;
}

/* nothing hovers on touch, so show true colours outright */
@media (hover: none) {
  .wop-page .integration-icon svg {
    filter: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wop-page .integration-icon {
    animation: none;
  }
  .wop-page .integration-pill,
  .wop-page .integration-icon {
    transition: none;
  }
  .wop-page .integration-pill:hover {
    transform: none;
  }
}

@media (max-width: 600px) {
  .wop-page .integration-pill {
    font-size: 13.5px;
    padding: 7px 18px 7px 7px;
    gap: 9px;
  }
  .wop-page .integration-icon {
    width: 28px;
    height: 28px;
  }
  .wop-page .integration-icon svg {
    width: 16px;
    height: 16px;
  }
}

/* ============================================================
   TOP REASONS
   ============================================================ */
.wop-page .reasons {
  background: var(--brand-tint-1);
}
.wop-page .reasons-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: start;
}

.wop-page .reasons-sticky {
  position: sticky;
  top: 104px;
}
.wop-page .reasons-sticky .eyebrow-badge {
  margin-bottom: 20px;
}
.wop-page .reasons-sticky h2 {
  font-size: clamp(28px, 3.2vw, 36px);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 16px;
  line-height: 1.2;
}
.wop-page .reasons-sticky p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 420px;
  margin-bottom: 28px;
}
.wop-page .reasons-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.wop-page .reasons-chip {
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-card);
  color: var(--ink);
}

.wop-page .reasons-list {
  display: flex;
  flex-direction: column;
}
.wop-page .reasons-item {
  position: relative;
  display: flex;
  gap: 18px;
  padding: 28px 0 28px 28px;
  border-left: 2px solid var(--line);
}
.wop-page .reasons-item:first-child {
  padding-top: 2px;
}
.wop-page .reasons-item:last-child {
  padding-bottom: 2px;
}
.wop-page .reasons-item-icon {
  width: 46px;
  height: 46px;
  border-radius: 11px;
  background: var(--surface-card);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--brand);
}
.wop-page .reasons-item-icon svg {
  width: 24px;
  height: 24px;
}
.wop-page .reasons-item-body h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
.wop-page .reasons-item-body p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 440px;
}
.wop-page .reasons-list .reasons-item:nth-child(5),
.wop-page .reasons-list .reasons-item:nth-child(6) {
  transform: translateY(40px);
}
.wop-page .reasons-list .reasons-item:nth-child(5).is-visible,
.wop-page .reasons-list .reasons-item:nth-child(6).is-visible {
  transform: translateY(0);
}

@media (max-width: 1024px) {
  .wop-page .reasons-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .wop-page .reasons-sticky {
    position: static;
  }
  .wop-page .reasons-sticky p {
    max-width: none;
  }
  .wop-page .reasons-item {
    border-left: none;
    padding-left: 0;
  }
}

/* ============================================================
   TECH STACK — official brand marks, grey until hovered
   ============================================================ */
.wop-page .stack {
  background: #f6f7f9;
}
.wop-page .stack-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  max-width: 880px;
  margin: 0 auto;
}
.wop-page .stack-tile {
  width: clamp(74px, 8.4vw, 100px);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  background: #fff;
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.04),
    0 10px 26px rgba(16, 24, 40, 0.05);
  transition:
    filter 320ms var(--ease),
    transform 320ms var(--ease),
    box-shadow 320ms var(--ease);
  /* The fade lives inside filter, not in opacity. Element opacity stays 1, so
     nothing in the cascade can hold a hovered tile back at partial alpha. */
  filter: grayscale(1) opacity(0.45);
}
.wop-page .stack-tile svg {
  width: 52%;
  height: auto;
  display: block;
}

/* the one under the pointer: no filter at all, so the art shows its true colours */
.wop-page .stack-tile:hover {
  filter: none;
  transform: translateY(-5px) scale(1.06);
  box-shadow:
    0 4px 10px rgba(16, 24, 40, 0.06),
    0 18px 38px rgba(16, 24, 40, 0.14);
}
/* :not(:hover) cannot match the hovered tile, so this never competes with it */
.wop-page .stack-grid:hover .stack-tile:not(:hover) {
  filter: grayscale(1) opacity(0.28);
}

/* nothing hovers on touch, so show the brands outright */
@media (hover: none) {
  .wop-page .stack-tile {
    filter: none;
  }
  .wop-page .stack-grid:hover .stack-tile:not(:hover) {
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wop-page .stack-tile {
    transition: filter 200ms linear;
  }
  .wop-page .stack-tile:hover {
    transform: none;
  }
}

/* ============================================================
   SECURITY (dark)
   ============================================================ */
.wop-page .security {
  background: var(--surface-dark);
}
.wop-page .security-panel {
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.015);
}
.wop-page .security-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.wop-page .security-grid .reveal {
  transition-delay: calc(var(--i, 0) * 60ms);
}
.wop-page .security-card {
  position: relative;
  padding: 44px 38px;
  overflow: hidden;
  transition: background-color 260ms ease;
}
.wop-page .security-card:not(:nth-child(3n)) {
  border-right: 1px solid var(--line-dark);
}
.wop-page .security-card:nth-child(-n + 3) {
  border-bottom: 1px solid var(--line-dark);
}
.wop-page .security-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    ellipse 130% 100% at 50% 0%,
    color-mix(in srgb, var(--brand) 16%, transparent),
    transparent 72%
  );
  transition: opacity 260ms ease;
}
.wop-page .security-card:hover::before {
  opacity: 1;
}
.wop-page .security-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--ease);
}
.wop-page .security-card:hover::after {
  transform: scaleX(1);
}
.wop-page .security-icon-badge {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-dark);
  margin-bottom: 22px;
  transition:
    background-color 220ms ease,
    border-color 220ms ease;
}
.wop-page .security-card:hover .security-icon-badge {
  background: color-mix(in srgb, var(--brand) 18%, transparent);
  border-color: var(--brand);
}
.wop-page .security-icon {
  width: 20px;
  height: 20px;
  color: var(--on-dark-muted);
  flex: none;
  margin-bottom: 0;
  transition: color 220ms ease;
}
.wop-page .security-card:hover .security-icon {
  color: var(--brand-soft-on-dark);
}
.wop-page .security-card h3 {
  position: relative;
  z-index: 1;
  color: var(--white);
  font-size: 18px;
  margin-bottom: 10px;
  transition: color 220ms ease;
}
.wop-page .security-card:hover h3 {
  color: var(--brand-soft-on-dark);
}
.wop-page .security-card p {
  position: relative;
  z-index: 1;
  color: var(--on-dark-muted);
  font-size: 14px;
  line-height: 1.6;
}

.wop-page .cta-showcase {
  margin-top: 64px;
  position: relative;
  overflow: visible;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(
      ellipse 60% 90% at 0% 0%,
      color-mix(in srgb, var(--brand) 20%, transparent),
      transparent 70%
    ),
    var(--surface-dark-2);
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  align-items: center;
  gap: 24px;
  padding: 44px clamp(24px, 3vw, 48px);
  /* height comes from the copy, not the laptop - see .cta-laptop */
  min-height: 300px;
}
.wop-page .cta-showcase-copy {
  position: relative;
  z-index: 2;
  padding-right: 16px;
}
.wop-page .cta-showcase-copy h3 {
  color: var(--white);
  font-size: clamp(26px, 3vw, 32px);
  margin-bottom: 14px;
}
.wop-page .cta-showcase-copy p {
  color: var(--on-dark-muted);
  font-size: 16px;
  line-height: 1.65;
  margin-bottom: 28px;
  max-width: 420px;
}
.wop-page .tel-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.wop-page .cta-showcase-visual {
  position: relative;
  min-width: 0;
}
.wop-page .cta-laptop {
  /* out of flow, so the panel is sized by the copy and the laptop is free to
     break past its top, bottom and right edge - as in the reference */
  position: absolute;
  top: 50%;
  right: -52px;
  transform: translateY(-50%);
  width: calc(100% + 52px);
  max-width: 780px;
  filter: drop-shadow(0 26px 50px rgba(0, 0, 0, 0.55));
}
.wop-page .cta-laptop-img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}
.wop-page .cta-laptop-screen {
  position: absolute;
  z-index: 2;
  left: 10.1352%;
  top: 0.9566%;
  width: 79.7297%;
  height: 93.3036%;
  overflow: hidden;
  border-radius: 4px 4px 0 0;
  /* The shot is 1.78 against a 1.53 screen, so showing it whole leaves a band
     above and below. Paint those bands with the app's own edge colours -
     sidebar #1e1e1e to 4.14%, then the topbar white / canvas grey - so they
     read as more of the interface rather than empty space. */
  background:
    linear-gradient(to right, #1e1e1e 0 4.14%, #ffffff 4.14% 100%) top / 100%
      51% no-repeat,
    linear-gradient(to right, #1e1e1e 0 4.14%, #f6f6f6 4.14% 100%) bottom / 100%
      51% no-repeat;
}
.wop-page .cta-laptop-shot {
  /* whole dashboard, full width, nothing trimmed */
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  max-width: none;
}

@media (max-width: 900px) {
  .wop-page .cta-showcase {
    grid-template-columns: 1fr;
    padding: 40px 28px;
    gap: 24px;
  }
  .wop-page .cta-showcase-copy {
    padding: 0;
    text-align: center;
  }
  .wop-page .cta-showcase-copy p {
    max-width: none;
  }
  .wop-page .tel-cta {
    align-items: center;
  }
  .wop-page .cta-showcase-visual {
    justify-content: center;
  }
  /* must stay positioned: the screen overlay is absolute against it, and
     position:static would re-anchor it to .cta-showcase-visual */
  .wop-page .cta-laptop {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
  }
}

@media (max-width: 1024px) {
  .wop-page .security-grid {
    grid-template-columns: 1fr 1fr;
  }
  .wop-page .security-card {
    border-right: none;
    border-bottom: none;
  }
  .wop-page .security-card:nth-child(odd) {
    border-right: 1px solid var(--line-dark);
  }
  .wop-page .security-card:nth-child(-n + 4) {
    border-bottom: 1px solid var(--line-dark);
  }
}
@media (max-width: 640px) {
  .wop-page .security-grid {
    grid-template-columns: 1fr;
  }
  .wop-page .security-card {
    border-right: none;
    border-bottom: 1px solid var(--line-dark);
  }
  .wop-page .security-card:last-child {
    border-bottom: none;
  }
}

/* ============================================================
   FAQ
   ============================================================ */
.wop-page .faq-layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 80px;
  align-items: start;
}
.wop-page .faq-sticky {
  position: sticky;
  top: 104px;
}
.wop-page .faq-photo {
  width: 100%;
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--surface-dark-2);
}
.wop-page .faq-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wop-page .faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wop-page .faq-item {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface-card);
  transition:
    background-color 320ms var(--ease),
    border-color 320ms var(--ease),
    box-shadow 320ms var(--ease);
  position: relative;
  overflow: hidden;
}
.wop-page .faq-item:hover {
  background: var(--surface);
}
.wop-page .faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
  padding: 24px 24px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.wop-page .faq-q .faq-num {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-faint);
  flex: none;
  width: 24px;
  transition: color 320ms var(--ease);
}
.wop-page .faq-q span {
  flex: 1;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
  text-align: left;
  transition: color 320ms var(--ease);
}
.wop-page .faq-q .chev {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--ink-faint);
  transition:
    transform 320ms var(--ease),
    color 320ms var(--ease);
}
.wop-page .faq-item[data-open="true"] .chev {
  transform: rotate(180deg);
  color: var(--brand);
}
.wop-page .faq-a-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 380ms var(--ease);
  position: relative;
  z-index: 1;
}
.wop-page .faq-item[data-open="true"] .faq-a-wrap {
  grid-template-rows: 1fr;
}
.wop-page .faq-a-inner {
  overflow: hidden;
}
.wop-page .faq-a {
  padding: 0 24px 26px 62px;
  max-width: 56ch;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink-muted);
}

.wop-page .faq-item[data-open="true"] {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow-card);
}

@media (max-width: 900px) {
  .wop-page .faq-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .wop-page .faq-sticky {
    position: static;
  }
  .wop-page .faq-photo {
    aspect-ratio: 16/9;
  }
  .wop-page .faq-q {
    padding: 20px 18px;
  }
  .wop-page .faq-a {
    padding: 0 18px 22px 56px;
  }
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.wop-page .final-cta {
  background: var(--surface-dark);
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  text-align: center;
  isolation: isolate;
}
.wop-page .final-cta-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.wop-page .final-cta-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: color-mix(in srgb, var(--surface-dark) 68%, transparent);
}
.wop-page .final-cta-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.5) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(
    ellipse 80% 80% at 50% 50%,
    black 40%,
    transparent 85%
  );
}
.wop-page .final-cta .mesh-2 {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  z-index: 0;
}
.wop-page .final-cta .mesh-2 span {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  background: var(--white);
  opacity: 0.12;
  animation: meshDrift 26s ease-in-out infinite;
}
.wop-page .final-cta .mesh-2 span:nth-child(1) {
  width: 460px;
  height: 460px;
  top: -180px;
  left: -100px;
}
.wop-page .final-cta .mesh-2 span:nth-child(2) {
  width: 380px;
  height: 380px;
  bottom: -160px;
  right: -60px;
  animation-delay: -10s;
}
@keyframes meshDrift {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(40px, -30px) scale(1.12);
  }
}
.wop-page .final-cta .container {
  position: relative;
  z-index: 1;
}
.wop-page .final-cta h2 {
  color: var(--white);
  font-size: clamp(28px, 3.6vw, 42px);
  max-width: 680px;
  margin: 0 auto 18px;
}
.wop-page .final-cta p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 17px;
  max-width: 520px;
  margin: 0 auto 36px;
  line-height: 1.6;
}
.wop-page .final-cta .btn {
  font-size: 18px;
  padding: 19px 40px;
  position: relative;
  transition:
    transform 260ms var(--ease),
    box-shadow 260ms var(--ease),
    background-color 200ms ease;
}
.wop-page .final-cta .btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}
@media (prefers-reduced-motion: reduce) {
  .wop-page .final-cta .mesh-2 span {
    animation: none;
  }
  .wop-page .final-cta-video {
    display: none;
  }
}

/* ============================================================
   VIDEO MODAL
   ============================================================ */
.wop-page .modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 16, 0.72);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.wop-page .modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.wop-page .modal-box {
  background: var(--modal-bg);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 860px;
  padding: 20px;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transform: translateY(16px);
  transition: transform 220ms var(--ease);
}
.wop-page .modal-overlay.open .modal-box {
  transform: translateY(0);
}
.wop-page .modal-close {
  position: absolute;
  top: -46px;
  right: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease;
}
.wop-page .modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
}
.wop-page .modal-close svg {
  width: 18px;
  height: 18px;
}
.wop-page .modal-box video {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--radius-md);
  background: var(--true-black);
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .wop-page .modal-box {
    transition: none;
  }
}

/* Global mobile guard */
@media (max-width: 390px) {
  .wop-page .hero-copy p {
    font-size: 16px;
  }
}