/* =========================================================================
   Diverse Commerce — inner pages (pages.css)
   =========================================================================
   Loaded only by the six inner pages. Every class is `ip-` prefixed so the
   homepage (style.css / v2.css) is never affected. Uses the existing brand
   tokens exclusively — no new colours, fonts or shadows are introduced.
   ========================================================================= */

/* ---------- Section rhythm: 120px desktop, equal top and bottom ---------- */
.ip-section { padding-block: 72px; position: relative; overflow: hidden; }
@media (min-width: 768px) { .ip-section { padding-block: 96px; } }
@media (min-width: 1024px) { .ip-section { padding-block: 120px; } }

.ip-section-tight { padding-block: 56px; }
@media (min-width: 1024px) { .ip-section-tight { padding-block: 80px; } }

.ip-white { background-color: var(--brand-white); }
.ip-off-white { background-color: var(--brand-off-white); }
.ip-dark { background-color: var(--brand-purple-black); color: #fff; }

/* Soft brand wash used to stop consecutive light sections flattening out. */
.ip-wash {
  background:
    radial-gradient(ellipse 55% 45% at 12% 0%, rgba(103, 33, 223, 0.06), transparent 60%),
    radial-gradient(ellipse 50% 45% at 95% 100%, rgba(197, 244, 61, 0.07), transparent 60%),
    var(--brand-off-white);
}

/* =========================================================================
   Shared section header
   ========================================================================= */
.ip-head { max-width: 46rem; }
.ip-head-center { margin-inline: auto; text-align: center; }
.ip-head-center .lead { margin-inline: auto; }
.ip-head .heading-lg { max-width: none; }
.ip-head-split { display: grid; grid-template-columns: 1fr; gap: 20px; max-width: none; align-items: end; }
@media (min-width: 900px) { .ip-head-split { grid-template-columns: 1.15fr 0.85fr; gap: 48px; } }
.ip-head-split .lead { margin-top: 0; }

.ip-note {
  margin-top: 20px; display: inline-flex; align-items: flex-start; gap: 8px;
  font-size: 0.8rem; line-height: 1.55; color: var(--brand-muted);
}
.ip-note .icon { width: 15px; height: 15px; margin-top: 2px; color: var(--brand-purple); flex-shrink: 0; }
.ip-note-center { justify-content: center; text-align: left; max-width: 42rem; margin-inline: auto; }

/* Disclaimer panel — reused wherever illustrative figures appear. */
.ip-disclaimer {
  margin-top: 32px; padding: 16px 20px; border-radius: 12px;
  border: 1px solid rgba(103, 33, 223, 0.18);
  background: rgba(103, 33, 223, 0.04);
  font-size: 0.82rem; line-height: 1.6; color: var(--brand-muted);
  display: flex; gap: 10px; align-items: flex-start;
}
.ip-disclaimer .icon { width: 16px; height: 16px; color: var(--brand-purple); flex-shrink: 0; margin-top: 2px; }
.ip-dark .ip-disclaimer { border-color: rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.65); }
.ip-dark .ip-disclaimer .icon { color: var(--brand-lime); }

/* =========================================================================
   Page hero — dark, shared shell with per-page content
   ========================================================================= */
.ip-hero {
  position: relative; overflow: hidden;
  padding-block: 132px 72px;
  background: linear-gradient(135deg, var(--brand-purple-black), var(--brand-purple-dark) 52%, var(--brand-purple));
  color: var(--brand-white);
}
@media (min-width: 1024px) { .ip-hero { padding-block: 168px 104px; } }

.ip-hero-grid {
  position: absolute; inset: 0; opacity: 0.07;
  background-image: linear-gradient(rgba(255, 255, 255, 0.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.6) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, black 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, black 30%, transparent 100%);
}
.ip-hero-glow { position: absolute; border-radius: 999px; pointer-events: none; }
.ip-hero-glow-1 { right: -160px; top: 18%; width: 520px; height: 520px; background: rgba(123, 44, 240, 0.38); filter: blur(140px); }
.ip-hero-glow-2 { left: -200px; bottom: -80px; width: 440px; height: 440px; background: rgba(197, 244, 61, 0.09); filter: blur(130px); }

.ip-hero-inner { position: relative; z-index: 1; }
.ip-hero-columns { display: grid; grid-template-columns: 1fr; align-items: center; gap: 48px; }
@media (min-width: 1024px) { .ip-hero-columns { grid-template-columns: 1.02fr 0.98fr; gap: 48px; } }
.ip-hero-narrow { max-width: 54rem; }
.ip-hero-centered { text-align: center; }
.ip-hero-centered .ip-hero-lead,
.ip-hero-centered .ip-hero-actions { margin-inline: auto; }
.ip-hero-centered .ip-hero-actions { justify-content: center; }

/* Breadcrumb */
.ip-crumbs { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.ip-crumbs a { transition: color 0.2s ease; }
.ip-crumbs a:hover { color: var(--brand-lime); }
.ip-crumbs .icon { width: 12px; height: 12px; opacity: 0.6; }
.ip-crumbs-current { color: var(--brand-lime); }

.ip-hero-title {
  margin-top: 24px; font-family: var(--font-heading); font-weight: 700;
  font-size: 2.1rem; line-height: 1.06; letter-spacing: -0.01em; color: #fff;
}
@media (min-width: 640px) { .ip-hero-title { font-size: 2.9rem; } }
@media (min-width: 1024px) { .ip-hero-title { font-size: clamp(2.6rem, 3.4vw, 3.3rem); } }
.ip-hero-centered .ip-hero-title { max-width: 20ch; margin-inline: auto; }
.ip-hero-title span { display: block; }
.ip-hero-hl { color: var(--brand-lime); }

.ip-hero-lead { margin-top: 20px; max-width: 34rem; font-size: 1.02rem; line-height: 1.7; color: rgba(255, 255, 255, 0.78); }
.ip-hero-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; }

.ip-hero-stats { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 32px; }
.ip-hero-stat-value { font-family: var(--font-heading); font-size: 1.9rem; font-weight: 800; line-height: 1; color: #fff; }
.ip-hero-stat-value span { color: var(--brand-lime); font-size: 1.1rem; }
.ip-hero-stat-label { margin-top: 6px; font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); }

.ip-hero-badges { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.ip-hero-badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.06);
  font-size: 0.8rem; color: rgba(255, 255, 255, 0.85);
}
.ip-hero-badge .icon { width: 14px; height: 14px; color: var(--brand-lime); }

/* =========================================================================
   Glass panel — shared surface for hero visuals
   ========================================================================= */
.ip-glass {
  position: relative; border-radius: 22px; padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(14px);
}
.ip-glass-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ip-glass-title { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 700; color: #fff; }
.ip-glass-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.1); font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75);
}
.ip-visual-note {
  margin-top: 14px; display: flex; align-items: flex-start; gap: 7px;
  font-size: 0.72rem; line-height: 1.5; color: rgba(255, 255, 255, 0.5);
}
.ip-visual-note .icon { width: 13px; height: 13px; flex-shrink: 0; margin-top: 1px; }

/* =========================================================================
   PAGE 01 — How It Works
   ========================================================================= */

/* Hero: vertical workflow card with an animated progress line */
.ip-flowcard { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; position: relative; }
.ip-flowcard::before {
  content: ""; position: absolute; left: 25px; top: 26px; bottom: 26px; width: 2px;
  background: linear-gradient(var(--brand-lime), rgba(197, 244, 61, 0.1));
  opacity: 0.4;
}
.ip-flowcard-line {
  position: absolute; left: 25px; top: 26px; width: 2px;
  background: var(--brand-lime); border-radius: 999px;
  height: 0; transition: height 1.6s var(--ease-out); box-shadow: 0 0 12px rgba(197, 244, 61, 0.7);
}
.ip-flowcard.is-drawn .ip-flowcard-line { height: calc(100% - 52px); }

.ip-flowstep {
  position: relative; display: flex; gap: 14px; align-items: flex-start;
  padding: 13px 14px; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.05);
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.ip-flowstep:hover { transform: translateX(4px); background: rgba(255, 255, 255, 0.09); border-color: rgba(197, 244, 61, 0.35); }
.ip-flowstep-num {
  position: relative; z-index: 1; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  background: var(--brand-lime); color: var(--brand-purple-black);
}
.ip-flowstep-title { display: flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-size: 0.98rem; font-weight: 700; color: #fff; }
.ip-flowstep-title .icon { width: 15px; height: 15px; color: var(--brand-lime); }
.ip-flowstep-detail { margin-top: 4px; font-size: 0.8rem; line-height: 1.55; color: rgba(255, 255, 255, 0.66); }

/* Nine-stage timeline: horizontal rail on desktop, vertical on mobile */
.ip-timeline { margin-top: 56px; position: relative; }
.ip-timeline-track { position: relative; }
.ip-timeline-rail { position: absolute; left: 0; right: 0; top: 27px; height: 2px; background: var(--brand-light); display: none; }
.ip-timeline-rail-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--brand-purple), var(--brand-lime)); transition: width 1.8s var(--ease-out); border-radius: 999px; }
.ip-timeline.is-drawn .ip-timeline-rail-fill { width: 100%; }

.ip-timeline-list { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px) { .ip-timeline-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ip-timeline-list { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.ip-stage {
  position: relative; display: flex; flex-direction: column;
  padding: 24px 22px; border-radius: 18px;
  border: 1px solid var(--brand-light); background: var(--brand-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.ip-stage:hover { transform: translateY(-6px); border-color: rgba(103, 33, 223, 0.3); box-shadow: 0 26px 54px -22px rgba(103, 33, 223, 0.34); }
.ip-stage-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ip-stage-num {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px;
  font-family: var(--font-heading); font-size: 0.95rem; font-weight: 800;
  background: linear-gradient(135deg, var(--brand-purple), var(--brand-purple-bright));
  color: #fff; box-shadow: 0 12px 26px -12px rgba(103, 33, 223, 0.6);
}
.ip-stage-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: rgba(103, 33, 223, 0.08); color: var(--brand-purple); transition: all 0.3s ease; }
.ip-stage:hover .ip-stage-icon { background: var(--brand-lime); color: var(--brand-purple-black); transform: rotate(-6deg); }
.ip-stage-title { margin-top: 18px; font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; color: var(--brand-charcoal); line-height: 1.25; }
.ip-stage-summary { margin-top: 8px; font-size: 0.86rem; line-height: 1.6; color: var(--brand-muted); }
.ip-stage-points { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--brand-light); display: flex; flex-wrap: wrap; gap: 7px; }
.ip-stage-point { padding: 5px 11px; border-radius: 999px; background: var(--brand-off-white); border: 1px solid var(--brand-light); font-size: 0.74rem; color: var(--brand-muted); }

/* Onboarding: cards + progress checklist */
.ip-onboard { margin-top: 48px; display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
@media (min-width: 1024px) { .ip-onboard { grid-template-columns: 1.1fr 0.9fr; gap: 40px; } }
.ip-onboard-cards { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 560px) { .ip-onboard-cards { grid-template-columns: 1fr 1fr; } }
.ip-onboard-card {
  padding: 22px; border-radius: 16px; border: 1px solid var(--brand-light);
  background: var(--brand-white); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.ip-onboard-card:hover { transform: translateY(-4px); border-color: rgba(103, 33, 223, 0.28); box-shadow: 0 22px 46px -22px rgba(103, 33, 223, 0.3); }
.ip-onboard-icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(103, 33, 223, 0.09); color: var(--brand-purple); }
.ip-onboard-title { margin-top: 16px; font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--brand-charcoal); }
.ip-onboard-detail { margin-top: 7px; font-size: 0.85rem; line-height: 1.6; color: var(--brand-muted); }

.ip-progress-panel {
  padding: 26px 24px; border-radius: 20px;
  background: linear-gradient(165deg, var(--brand-purple-black), var(--brand-purple-dark));
  color: #fff; box-shadow: 0 34px 74px -34px rgba(20, 13, 29, 0.75);
}
.ip-progress-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.ip-progress-bar { margin-top: 14px; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.ip-progress-fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--brand-purple-bright), var(--brand-lime)); transition: width 1.6s var(--ease-out); }
.ip-progress-panel.is-drawn .ip-progress-fill { width: 72%; }
.ip-progress-pct { margin-top: 10px; font-family: var(--font-heading); font-size: 1.6rem; font-weight: 800; color: var(--brand-lime); }

.ip-checklist { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.ip-checklist li { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 11px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.07); font-size: 0.85rem; color: rgba(255, 255, 255, 0.8); }
.ip-check-mark { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.25); color: rgba(255, 255, 255, 0.35); }
.ip-check-mark .icon { width: 13px; height: 13px; }
.ip-check-done .ip-check-mark { background: var(--brand-lime); border-color: var(--brand-lime); color: var(--brand-purple-black); }
.ip-check-active { border-color: rgba(197, 244, 61, 0.4); background: rgba(197, 244, 61, 0.08); }
.ip-check-active .ip-check-mark { border-color: var(--brand-lime); color: var(--brand-lime); }
.ip-check-active .ip-check-mark .icon { animation: dc-pulse 1.8s ease-in-out infinite; }

/* =========================================================================
   Workflow chain (#workflow) — eight interlocking numbered rings
   Rings alternate side of the centre line and overlap the ring above, so the
   stages read as links in one chain. Each ring is an arc with a gap turned to
   face the next link; --tone ramps deep purple through to lime on the last.
   ========================================================================= */
.wfc {
  position: relative;
  margin: 44px auto 0;
  max-width: 940px;
  list-style: none;
  padding: 0;
}

/* The return path: 08 back round to 01, so the chain is a closed loop rather
   than a run with two loose ends. Only drawn where there is margin for it. */
.wfc-return { display: none; }

/* Fades in only — the reveal system's translate and blur would drag the
   bracket off the ring centres it is drawn to. */
.wfc-return.reveal,
.wfc-return.reveal.in-view { transform: none; filter: none; }

@media (min-width: 1140px) {
  .wfc-return {
    display: block;
    position: absolute;
    top: 58px;
    bottom: 58px;
    right: -58px;
    width: 58px;
    border: 2px dashed rgba(103, 33, 223, 0.32);
    border-left: 0;
    border-radius: 0 999px 999px 0;
    pointer-events: none;
  }
  /* Arrowhead landing back on the first link. */
  .wfc-return::after {
    content: "";
    position: absolute;
    top: -7px;
    left: -8px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 9px solid rgba(103, 33, 223, 0.5);
  }
}

.wfc-step {
  position: relative;
  z-index: var(--z, 1);
  display: grid;
  grid-template-columns: 84px 1fr;
  align-items: center;
  gap: 16px;
}

/* Links overlap vertically — this is what makes it read as a chain. */
.wfc-step + .wfc-step { margin-top: -14px; }

.wfc-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
}

.wfc-ring svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 12px 20px rgba(20, 13, 29, 0.18));
  transition: transform 0.3s var(--ease-out, cubic-bezier(0.4, 0, 0.2, 1));
}

.wfc-step:hover .wfc-ring svg { transform: scale(1.06); }
.wfc-step:hover .wfc-title { color: var(--tone); }

.wfc-arc {
  fill: none;
  stroke: var(--tone);
  stroke-width: 13;
  stroke-linecap: round;
  /* Both transitions live here so this rule cannot clobber the dc-draw one
     (pages.css loads after dc-animations.css). Order matters: the per-ring
     inline `transition-delay: <stagger>, 0s` staggers only the draw. */
  transition: stroke-dashoffset 1.6s cubic-bezier(0.4, 0, 0.2, 1), stroke-width 0.3s ease;
}

.wfc-num {
  position: absolute;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--tone);
}

.wfc-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--brand-charcoal);
  transition: color 0.25s ease;
}

.wfc-detail {
  margin-top: 5px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--brand-muted);
}

.wfc-step:hover .wfc-arc { stroke-width: 15; }

/* From here up the chain zig-zags: the ring sits just off the centre line and
   the copy sits on the same side, mirrored for the left-hand links. */
@media (min-width: 760px) {
  .wfc-step {
    /* Centre track is wider than the ring, which is what gives each link its
       left/right offset from the spine. */
    grid-template-columns: 1fr 178px 1fr;
    gap: 0;
  }
  .wfc-step + .wfc-step { margin-top: -26px; }

  /* Both cells are pinned to row 1. Without this the left-hand copy lands in
     an implicit second row — grid auto-placement never moves backwards. */
  .wfc-ring { grid-column: 2; grid-row: 1; width: 116px; height: 116px; }
  .wfc-copy { grid-row: 1; }
  .wfc-num { font-size: 1.7rem; }

  /* Each link leans toward its own copy, the way the reference staggers. */
  .wfc-step-right .wfc-ring { justify-self: end; }
  .wfc-step-left .wfc-ring { justify-self: start; }

  .wfc-step-right .wfc-copy { grid-column: 3; padding-left: 20px; }
  .wfc-step-left .wfc-copy { grid-column: 1; padding-right: 20px; text-align: right; }

  .wfc-title { font-size: 1.3rem; }
  .wfc-detail { max-width: 24rem; }
  .wfc-step-left .wfc-detail { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .wfc-arc,
  .wfc-ring svg,
  .wfc-title { transition: none !important; }
}

/* Milestones */
.ip-milestones { margin-top: 48px; display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 640px) { .ip-milestones { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .ip-milestones { grid-template-columns: repeat(4, 1fr); } }
.ip-milestone {
  position: relative; overflow: hidden; padding: 26px 22px; border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04);
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.ip-milestone:hover { transform: translateY(-6px); background: rgba(255, 255, 255, 0.07); border-color: rgba(197, 244, 61, 0.3); }
.ip-milestone-period { display: inline-block; padding: 5px 12px; border-radius: 999px; background: rgba(197, 244, 61, 0.14); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-lime); }
.ip-milestone-icon { margin-top: 18px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); color: var(--brand-lime); transition: transform 0.3s ease; }
.ip-milestone:hover .ip-milestone-icon { transform: translateY(-3px) rotate(-6deg); }
.ip-milestone-title { margin-top: 16px; font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; color: #fff; }
.ip-milestone-detail { margin-top: 8px; font-size: 0.85rem; line-height: 1.6; color: rgba(255, 255, 255, 0.66); }

/* =========================================================================
   PAGE 02 — What We Handle
   ========================================================================= */

/* Hero operations dashboard */
.ip-ops-stats { margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ip-ops-stat { padding: 13px 12px; border-radius: 13px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); }
.ip-ops-stat-label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.ip-ops-stat-value { margin-top: 6px; font-family: var(--font-heading); font-size: 1.25rem; font-weight: 800; color: #fff; }
@media (min-width: 400px) { .ip-ops-stat-value { font-size: 1.45rem; } }

.ip-ops-chart-wrap { margin-top: 16px; padding: 16px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); }
.ip-ops-chart-label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.ip-ops-chart { margin-top: 10px; width: 100%; height: 62px; }
.ip-ops-chart-dot { fill: var(--brand-lime); }

.ip-ops-breakdown { margin-top: 16px; }
.ip-ops-break-label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.ip-ops-break-list { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.ip-ops-break-row { display: grid; grid-template-columns: 1fr 64px 34px; align-items: center; gap: 10px; font-size: 0.78rem; color: rgba(255, 255, 255, 0.78); }
.ip-ops-break-track { height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.ip-ops-break-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--brand-purple-bright), var(--brand-lime)); transition: width 1.4s var(--ease-out); }
.ip-glass.is-drawn .ip-ops-break-fill { width: var(--ip-w, 0%); }
.ip-ops-break-pct { text-align: right; font-family: var(--font-mono); font-size: 11px; color: var(--brand-lime); }

/* Service grid — 11 premium cards */
.ip-services { margin-top: 48px; display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 560px) { .ip-services { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .ip-services { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
@media (min-width: 1200px) { .ip-services { grid-template-columns: repeat(4, 1fr); } }

.ip-service {
  position: relative; overflow: hidden; display: flex; flex-direction: column; height: 100%;
  padding: 24px 22px; border-radius: 18px;
  border: 1px solid var(--brand-light); background: var(--brand-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.ip-service::before {
  content: ""; position: absolute; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--brand-purple), var(--brand-lime));
  transition: width 0.4s ease;
}
.ip-service:hover { transform: translateY(-7px); border-color: rgba(103, 33, 223, 0.3); box-shadow: 0 28px 58px -24px rgba(103, 33, 223, 0.35); }
.ip-service:hover::before { width: 100%; }
.ip-service-icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 13px; background: rgba(103, 33, 223, 0.09); color: var(--brand-purple); transition: all 0.35s ease; }
.ip-service:hover .ip-service-icon { background: var(--brand-purple); color: #fff; transform: scale(1.08) rotate(-5deg); }
.ip-service-title { margin-top: 18px; font-family: var(--font-heading); font-size: 1.02rem; font-weight: 700; color: var(--brand-charcoal); line-height: 1.3; }
.ip-service-detail { margin-top: 9px; font-size: 0.85rem; line-height: 1.6; color: var(--brand-muted); }
/* Ghost glyph revealed on hover — same language as the homepage cards. */
.ip-service-ghost { position: absolute; right: -20px; bottom: -20px; width: 100px; height: 100px; color: var(--brand-purple); opacity: 0; transform: scale(0.85) rotate(-12deg); transition: opacity 0.4s ease, transform 0.4s ease; pointer-events: none; }
.ip-service-ghost .icon { width: 100%; height: 100%; }
.ip-service:hover .ip-service-ghost { opacity: 0.07; transform: scale(1) rotate(0); }

/* Reporting / dashboard section */
.ip-report { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .ip-report { grid-template-columns: 0.95fr 1.05fr; gap: 56px; } }
.ip-report-points { margin-top: 32px; display: flex; flex-direction: column; gap: 18px; }
.ip-report-point { display: flex; gap: 14px; }
.ip-report-point-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(103, 33, 223, 0.09); color: var(--brand-purple); }
.ip-report-point-title { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--brand-charcoal); }
.ip-report-point-detail { margin-top: 5px; font-size: 0.87rem; line-height: 1.6; color: var(--brand-muted); }

.ip-report-panel { padding: 28px 24px; border-radius: 22px; border: 1px solid var(--brand-light); background: var(--brand-white); box-shadow: 0 32px 70px -34px rgba(103, 33, 223, 0.4); }
.ip-report-panel-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-purple); }
.ip-report-metrics { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ip-report-metric { padding: 15px 14px; border-radius: 13px; background: var(--brand-off-white); border: 1px solid var(--brand-light); }
.ip-report-metric-label { font-size: 0.75rem; color: var(--brand-muted); }
.ip-report-metric-value { margin-top: 5px; font-family: var(--font-heading); font-size: 1.35rem; font-weight: 800; color: var(--brand-charcoal); }
.ip-report-metric-delta { margin-top: 3px; font-family: var(--font-mono); font-size: 10.5px; color: var(--brand-purple); }

.ip-bars { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--brand-light); }
.ip-bars-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-muted); }
.ip-bars-row { margin-top: 16px; display: flex; align-items: flex-end; gap: 8px; height: 92px; }
.ip-bar { flex: 1; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, var(--brand-purple-bright), rgba(103, 33, 223, 0.25)); height: 0; transition: height 0.85s var(--ease-out); }
.ip-bar:last-child { background: linear-gradient(180deg, var(--brand-lime), rgba(197, 244, 61, 0.3)); }
.ip-report-panel.is-drawn .ip-bar { height: var(--ip-h, 40%); }

/* The bars grow left to right rather than all at once — the week-by-week
   read is the point of the chart. */
.ip-bars-row .ip-bar:nth-child(1) { transition-delay: 0s; }
.ip-bars-row .ip-bar:nth-child(2) { transition-delay: 0.1s; }
.ip-bars-row .ip-bar:nth-child(3) { transition-delay: 0.2s; }
.ip-bars-row .ip-bar:nth-child(4) { transition-delay: 0.3s; }
.ip-bars-row .ip-bar:nth-child(5) { transition-delay: 0.4s; }
.ip-bars-row .ip-bar:nth-child(6) { transition-delay: 0.5s; }
.ip-bars-row .ip-bar:nth-child(7) { transition-delay: 0.6s; }
.ip-bars-row .ip-bar:nth-child(8) { transition-delay: 0.7s; }
/* Automation layers */
.ip-auto { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .ip-auto { grid-template-columns: 1fr 1fr; gap: 56px; } }
.ip-auto-layers { display: flex; flex-direction: column; gap: 14px; }
.ip-auto-layer { display: flex; gap: 15px; padding: 20px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); transition: background 0.3s ease, transform 0.3s ease; }
.ip-auto-layer:hover { background: rgba(255, 255, 255, 0.08); transform: translateX(5px); }
.ip-auto-layer-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(197, 244, 61, 0.14); color: var(--brand-lime); }
.ip-auto-layer-label { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: #fff; }
.ip-auto-layer-detail { margin-top: 5px; font-size: 0.85rem; line-height: 1.6; color: rgba(255, 255, 255, 0.66); }
/* Orbit illustration used beside the automation copy */
.ip-orbit { position: relative; display: flex; align-items: center; justify-content: center; min-height: 320px; }
@media (min-width: 768px) { .ip-orbit { min-height: 400px; } }
.ip-orbit-ring { position: absolute; border-radius: 999px; border: 1px dashed rgba(255, 255, 255, 0.16); }
.ip-orbit-ring-1 { width: 200px; height: 200px; animation: dc-rotate 34s linear infinite; }
.ip-orbit-ring-2 { width: 290px; height: 290px; animation: dc-rotate-reverse 48s linear infinite; }
.ip-orbit-ring-3 { width: 380px; height: 380px; animation: dc-rotate 62s linear infinite; }
@media (max-width: 519px) { .ip-orbit-ring-3 { display: none; } }
.ip-orbit-core {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: center;
  width: 108px; height: 108px; border-radius: 999px;
  background: linear-gradient(140deg, var(--brand-purple), var(--brand-purple-bright));
  box-shadow: 0 0 70px -8px rgba(123, 44, 240, 0.85);
  color: #fff;
}
.ip-orbit-core .icon { width: 42px; height: 42px; }
.ip-orbit-chip {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(20, 13, 29, 0.75);
  font-size: 0.75rem; color: #fff; backdrop-filter: blur(6px);
  animation: dc-float 9s ease-in-out infinite;
}
.ip-orbit-chip .icon { width: 14px; height: 14px; color: var(--brand-lime); }

/* =========================================================================
   PAGE 03 — Ownership
   ========================================================================= */

/* Certificate visual */
.ip-cert {
  position: relative; padding: 30px 26px; border-radius: 20px;
  background: linear-gradient(165deg, #ffffff, #f4f1fa);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 44px 92px -40px rgba(20, 13, 29, 0.7);
}
@media (min-width: 560px) { .ip-cert { padding: 38px 34px; } }
.ip-cert::before {
  content: ""; position: absolute; inset: 12px; border-radius: 13px;
  border: 1px solid rgba(103, 33, 223, 0.2); pointer-events: none;
}
.ip-cert-inner { position: relative; text-align: center; }
.ip-cert-title { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-purple); }
.ip-cert-rule { margin: 14px auto 0; width: 56px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, var(--brand-purple), var(--brand-lime)); }
.ip-cert-intro { margin-top: 20px; font-size: 0.8rem; color: var(--brand-muted); }
.ip-cert-holder { margin-top: 8px; font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; color: var(--brand-charcoal); }
.ip-cert-body { margin-top: 14px; max-width: 30rem; margin-inline: auto; font-size: 0.85rem; line-height: 1.65; color: var(--brand-muted); }
.ip-cert-foot { margin-top: 26px; padding-top: 20px; border-top: 1px dashed rgba(103, 33, 223, 0.22); display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.ip-cert-sign { text-align: left; }
.ip-cert-sign-name { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 700; color: var(--brand-charcoal); }
.ip-cert-sign-role { margin-top: 3px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-muted); }
.ip-cert-seal {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 66px; height: 66px; border-radius: 999px;
  background: linear-gradient(140deg, var(--brand-purple), var(--brand-purple-bright));
  color: #fff; box-shadow: 0 16px 34px -14px rgba(103, 33, 223, 0.7);
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
}
.ip-cert-seal .icon { width: 20px; height: 20px; margin-bottom: 3px; color: var(--brand-lime); }
.ip-cert-badge {
  position: absolute; top: -16px; right: -12px; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 999px; background: var(--brand-lime); color: var(--brand-purple-black);
  font-family: var(--font-heading); font-weight: 700; font-size: 0.8rem;
  box-shadow: 0 16px 34px -14px rgba(197, 244, 61, 0.8);
  animation: dc-float 7s ease-in-out infinite;
}
.ip-cert-badge .icon { width: 15px; height: 15px; }

/* Owned-assets grid */
.ip-assets { margin-top: 48px; display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 520px) { .ip-assets { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .ip-assets { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .ip-assets { grid-template-columns: repeat(4, 1fr); } }
.ip-asset {
  display: flex; align-items: flex-start; gap: 13px; padding: 20px;
  border-radius: 15px; border: 1px solid var(--brand-light); background: var(--brand-white);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.ip-asset:hover { transform: translateY(-4px); border-color: rgba(103, 33, 223, 0.3); box-shadow: 0 22px 44px -22px rgba(103, 33, 223, 0.3); }
.ip-asset-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; background: rgba(103, 33, 223, 0.09); color: var(--brand-purple); transition: all 0.3s ease; }
.ip-asset:hover .ip-asset-icon { background: var(--brand-lime); color: var(--brand-purple-black); }
.ip-asset-title { display: flex; align-items: center; gap: 7px; font-family: var(--font-heading); font-size: 0.97rem; font-weight: 700; color: var(--brand-charcoal); }
.ip-asset-title .ip-asset-tick { width: 15px; height: 15px; color: var(--brand-purple); }
.ip-asset-detail { margin-top: 5px; font-size: 0.82rem; line-height: 1.55; color: var(--brand-muted); }

/* Agency vs Diverse comparison */
.ip-versus { margin-top: 48px; display: grid; grid-template-columns: 1fr; gap: 20px; align-items: stretch; position: relative; }
@media (min-width: 900px) { .ip-versus { grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; } }
.ip-versus-card { padding: 30px 26px; border-radius: 20px; height: 100%; }
.ip-versus-bad { border: 1px solid var(--brand-light); background: var(--brand-white); }
.ip-versus-good { border: 1px solid transparent; background: linear-gradient(160deg, var(--brand-purple), var(--brand-purple-bright)); color: #fff; box-shadow: 0 36px 78px -34px rgba(103, 33, 223, 0.7); }
.ip-versus-label { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; }
.ip-versus-bad .ip-versus-label { color: var(--brand-charcoal); }
.ip-versus-bad .ip-versus-label .icon { color: var(--brand-muted); }
.ip-versus-good .ip-versus-label { color: #fff; }
.ip-versus-good .ip-versus-label .icon { color: var(--brand-lime); }
.ip-versus-list { margin-top: 22px; display: flex; flex-direction: column; gap: 13px; }
.ip-versus-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.89rem; line-height: 1.55; }
.ip-versus-bad .ip-versus-list li { color: var(--brand-muted); }
.ip-versus-good .ip-versus-list li { color: rgba(255, 255, 255, 0.9); }
.ip-versus-list .icon { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; }
.ip-versus-bad .ip-versus-list .icon { color: #b9b3c2; }
.ip-versus-good .ip-versus-list .icon { color: var(--brand-lime); }
.ip-versus-mid {
  justify-self: center; display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 999px;
  background: var(--brand-purple-black); color: #fff;
  font-family: var(--font-heading); font-weight: 800; font-size: 0.85rem;
  box-shadow: 0 18px 38px -18px rgba(20, 13, 29, 0.8);
}

/* Security badges */
.ip-badges { margin-top: 48px; display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 560px) { .ip-badges { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .ip-badges { grid-template-columns: repeat(4, 1fr); } }
.ip-badge-card {
  text-align: center; padding: 28px 22px; border-radius: 18px;
  border: 1px solid var(--brand-light); background: var(--brand-white);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.ip-badge-card:hover { transform: translateY(-5px); border-color: rgba(103, 33, 223, 0.3); box-shadow: 0 24px 50px -24px rgba(103, 33, 223, 0.32); }
.ip-badge-shield {
  margin: 0 auto; display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 16px;
  background: linear-gradient(140deg, rgba(103, 33, 223, 0.12), rgba(197, 244, 61, 0.18));
  color: var(--brand-purple);
}
.ip-badge-shield .icon { width: 26px; height: 26px; }
.ip-badge-title { margin-top: 16px; font-family: var(--font-heading); font-size: 0.98rem; font-weight: 700; color: var(--brand-charcoal); }
.ip-badge-detail { margin-top: 7px; font-size: 0.83rem; line-height: 1.6; color: var(--brand-muted); }

/* Guarantee banner */
.ip-guarantee {
  position: relative; overflow: hidden; padding: 40px 30px; border-radius: 24px;
  background: linear-gradient(140deg, var(--brand-purple-black), var(--brand-purple-dark));
  color: #fff; box-shadow: 0 44px 96px -44px rgba(20, 13, 29, 0.85);
}
@media (min-width: 768px) { .ip-guarantee { padding: 52px 48px; } }
.ip-guarantee-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
@media (min-width: 900px) { .ip-guarantee-inner { grid-template-columns: 1.25fr 0.75fr; gap: 48px; } }
.ip-guarantee-label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-lime); }
.ip-guarantee-heading { margin-top: 16px; font-family: var(--font-heading); font-size: 1.6rem; font-weight: 800; line-height: 1.15; color: #fff; }
@media (min-width: 768px) { .ip-guarantee-heading { font-size: 2.1rem; } }
.ip-guarantee-heading span { color: var(--brand-lime); display: block; }
.ip-guarantee-text { margin-top: 16px; max-width: 38rem; font-size: 0.95rem; line-height: 1.7; color: rgba(255, 255, 255, 0.75); }
.ip-guarantee-points { display: flex; flex-direction: column; gap: 11px; }
.ip-guarantee-points li { display: flex; align-items: center; gap: 10px; padding: 12px 15px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.88rem; color: rgba(255, 255, 255, 0.88); }
.ip-guarantee-points .icon { width: 16px; height: 16px; color: var(--brand-lime); flex-shrink: 0; }

/* =========================================================================
   PAGE 04 — Pricing
   ========================================================================= */
.ip-plans { margin-top: 48px; display: grid; grid-template-columns: 1fr; gap: 22px; align-items: stretch; }
@media (min-width: 720px) { .ip-plans { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .ip-plans { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.ip-plan {
  position: relative; display: flex; flex-direction: column; height: 100%;
  padding: 30px 26px; border-radius: 22px;
  border: 1px solid var(--brand-light); background: var(--brand-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.ip-plan:hover { transform: translateY(-6px); border-color: rgba(103, 33, 223, 0.3); box-shadow: 0 30px 64px -26px rgba(103, 33, 223, 0.35); }
.ip-plan-featured {
  border-color: transparent;
  background: linear-gradient(165deg, var(--brand-purple), var(--brand-purple-bright));
  color: #fff; box-shadow: 0 40px 88px -36px rgba(103, 33, 223, 0.75);
}
@media (min-width: 1024px) { .ip-plan-featured { transform: translateY(-14px); } .ip-plan-featured:hover { transform: translateY(-20px); } }
.ip-plan-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  padding: 7px 16px; border-radius: 999px; background: var(--brand-lime); color: var(--brand-purple-black);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  box-shadow: 0 14px 30px -12px rgba(197, 244, 61, 0.8); white-space: nowrap;
}
.ip-plan-top { display: flex; align-items: center; gap: 11px; }
.ip-plan-icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(103, 33, 223, 0.09); color: var(--brand-purple); }
.ip-plan-featured .ip-plan-icon { background: rgba(255, 255, 255, 0.16); color: var(--brand-lime); }
.ip-plan-name { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 700; color: var(--brand-charcoal); }
.ip-plan-featured .ip-plan-name { color: #fff; }
.ip-plan-price { margin-top: 22px; display: flex; align-items: baseline; gap: 5px; }
.ip-plan-amount { font-family: var(--font-heading); font-size: 2.9rem; font-weight: 800; line-height: 1; color: var(--brand-charcoal); }
.ip-plan-featured .ip-plan-amount { color: #fff; }
.ip-plan-period { font-size: 0.95rem; font-weight: 600; color: var(--brand-muted); }
.ip-plan-featured .ip-plan-period { color: rgba(255, 255, 255, 0.75); }
.ip-plan-tagline { margin-top: 12px; font-size: 0.87rem; line-height: 1.6; color: var(--brand-muted); }
.ip-plan-featured .ip-plan-tagline { color: rgba(255, 255, 255, 0.82); }
.ip-plan-features { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--brand-light); display: flex; flex-direction: column; gap: 11px; }
.ip-plan-featured .ip-plan-features { border-top-color: rgba(255, 255, 255, 0.2); }
.ip-plan-features li { display: flex; align-items: flex-start; gap: 9px; font-size: 0.86rem; line-height: 1.5; color: var(--brand-charcoal); }
.ip-plan-featured .ip-plan-features li { color: rgba(255, 255, 255, 0.9); }
.ip-plan-features .icon { flex-shrink: 0; width: 15px; height: 15px; margin-top: 2px; color: var(--brand-purple); }
.ip-plan-featured .ip-plan-features .icon { color: var(--brand-lime); }
.ip-plan-cta {
  margin-top: auto; padding-top: 26px; display: block;
}
.ip-plan-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 15px; border-radius: 12px; font-weight: 700; font-size: 0.92rem;
  background: var(--brand-purple-black); color: #fff;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.ip-plan-btn:hover { background: #241633; transform: translateY(-2px); box-shadow: 0 18px 38px -18px rgba(20, 13, 29, 0.7); }
.ip-plan-featured .ip-plan-btn { background: var(--brand-lime); color: var(--brand-purple-black); }
.ip-plan-featured .ip-plan-btn:hover { background: var(--brand-lime-dark); box-shadow: 0 18px 40px -14px rgba(197, 244, 61, 0.7); }
.ip-plan-btn .icon { width: 16px; height: 16px; transition: transform 0.2s ease; }
.ip-plan-btn:hover .icon { transform: translateX(4px); }

/* Feature matrix */
.ip-matrix-scroll { margin-top: 44px; overflow-x: auto; border-radius: 20px; border: 1px solid var(--brand-light); background: var(--brand-white); }
.ip-matrix { width: 100%; min-width: 640px; border-collapse: collapse; }
.ip-matrix th, .ip-matrix td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--brand-light); }
.ip-matrix thead th { background: var(--brand-off-white); font-family: var(--font-heading); font-size: 0.9rem; font-weight: 700; color: var(--brand-charcoal); position: sticky; top: 0; }
.ip-matrix thead th:not(:first-child), .ip-matrix td:not(:first-child) { text-align: center; width: 17%; }
.ip-matrix-featured { color: var(--brand-purple) !important; }
.ip-matrix tbody tr { transition: background 0.2s ease; }
.ip-matrix tbody tr:hover { background: var(--brand-off-white); }
.ip-matrix tbody tr:last-child td { border-bottom: none; }
.ip-matrix-row-label { font-size: 0.88rem; font-weight: 500; color: var(--brand-charcoal); }
.ip-matrix-val { font-size: 0.84rem; color: var(--brand-muted); }
.ip-matrix-yes { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; background: rgba(103, 33, 223, 0.1); color: var(--brand-purple); }
.ip-matrix-yes .icon { width: 14px; height: 14px; }
.ip-matrix-no { display: inline-flex; color: #cfc9d8; }
.ip-matrix-no .icon { width: 16px; height: 16px; }

/* ROI / margin calculator */
.ip-calc { margin-top: 44px; display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
@media (min-width: 900px) { .ip-calc { grid-template-columns: 1fr 0.9fr; gap: 36px; } }
.ip-calc-inputs { padding: 30px 26px; border-radius: 20px; border: 1px solid var(--brand-light); background: var(--brand-white); }
.ip-calc-field + .ip-calc-field { margin-top: 26px; }
.ip-calc-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ip-calc-label { font-family: var(--font-heading); font-size: 0.92rem; font-weight: 700; color: var(--brand-charcoal); }
.ip-calc-value { font-family: var(--font-mono); font-size: 1rem; font-weight: 600; color: var(--brand-purple); }
.ip-calc-range { margin-top: 14px; width: 100%; height: 6px; -webkit-appearance: none; appearance: none; border-radius: 999px; background: var(--brand-light); outline: none; }
.ip-calc-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 999px;
  background: var(--brand-purple); border: 3px solid #fff; cursor: pointer;
  box-shadow: 0 4px 12px rgba(103, 33, 223, 0.5); transition: transform 0.2s ease;
}
.ip-calc-range::-webkit-slider-thumb:hover { transform: scale(1.15); }
.ip-calc-range::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 999px; background: var(--brand-purple);
  border: 3px solid #fff; cursor: pointer; box-shadow: 0 4px 12px rgba(103, 33, 223, 0.5);
}

.ip-calc-results { padding: 30px 26px; border-radius: 20px; background: linear-gradient(165deg, var(--brand-purple-black), var(--brand-purple-dark)); color: #fff; box-shadow: 0 34px 76px -34px rgba(20, 13, 29, 0.8); }
.ip-calc-out + .ip-calc-out { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.ip-calc-out-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.ip-calc-out-value { margin-top: 7px; font-family: var(--font-heading); font-size: 2rem; font-weight: 800; line-height: 1; color: var(--brand-lime); }
.ip-calc-out:first-child .ip-calc-out-value { font-size: 1.6rem; }

/* =========================================================================
   PAGE 05 — Who It's For
   ========================================================================= */
/* Section head reads across the spread: title left, standfirst right, with a
   rule under both — the two-column opener a printed feature would use. */
.aud-head { padding-bottom: 26px; border-bottom: 2px solid var(--brand-charcoal); }
.aud-head .lead { max-width: 30rem; }
@media (min-width: 900px) { .aud-head .lead { justify-self: end; } }

/* -------------------------------------------------------------------------
   The audience index
   No cards, no chips, no shadows: hanging numerals, hairlines between the
   entries and one rule down the centre of the spread. Colour is used once per
   entry — on the result — so the eye has somewhere to land.
   ------------------------------------------------------------------------- */
.aud-index { display: grid; grid-template-columns: 1fr; }

@media (min-width: 920px) {
  .aud-index { grid-template-columns: 1fr 1fr; column-gap: 54px; }
  /* Right-hand column carries the centre rule. */
  .aud-index .aud-entry:nth-child(even) { padding-left: 54px; border-left: 1px solid var(--brand-light); }
  /* Bottom pair closes on the section rule instead of its own. */
  .aud-index .aud-entry:nth-last-child(-n + 2) { border-bottom: 0; }
}

.aud-entry {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 4px 16px;
  padding: 26px 0;
  border-bottom: 1px solid var(--brand-light);
  transition: border-color 0.3s ease;
}

.aud-entry:last-child { border-bottom: 0; }
.aud-entry:hover { border-bottom-color: rgba(103, 33, 223, 0.4); }

/* Hanging numeral, optically nudged up to sit against the cap height. */
.aud-entry-num {
  margin-top: -3px;
  font-family: var(--font-heading);
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(103, 33, 223, 0.22);
  transition: color 0.3s ease;
}

.aud-entry:hover .aud-entry-num { color: var(--brand-purple); }

.aud-entry-name {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--brand-charcoal);
}

/* A plain line glyph at text size — no tile, no gradient behind it. */
.aud-entry-mark { display: inline-flex; color: var(--brand-purple); opacity: 0.55; }
.aud-entry-mark .icon { width: 15px; height: 15px; }

.aud-entry-line {
  margin-top: 9px;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--brand-muted);
}

/* Inline lead-in rather than a stacked label — the sentence carries on. */
.aud-entry-lead {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--brand-charcoal);
}

/* Kept as a text link with a rule, not a filled button — twelve solid
   buttons down the index would undo the restraint of the layout. */
.aud-entry-more {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 3px;
  border-bottom: 2px solid rgba(103, 33, 223, 0.35);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--brand-purple);
  transition: border-color 0.25s ease, gap 0.25s ease;
}

.aud-entry-more-icon { width: 15px; height: 15px; }

.aud-entry:hover .aud-entry-more,
.aud-entry-more:hover { border-bottom-color: var(--brand-purple); gap: 12px; }

@media (prefers-reduced-motion: reduce) {
  .aud-entry,
  .aud-entry-num,
  .aud-entry-more { transition: none !important; }
}



/* Animated metric counters */
.ip-metrics { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (min-width: 900px) { .ip-metrics { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.ip-metric { padding: 28px 22px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); transition: background 0.3s ease, transform 0.3s ease; }
.ip-metric:hover { background: rgba(255, 255, 255, 0.08); transform: translateY(-5px); }
.ip-metric-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(197, 244, 61, 0.14); color: var(--brand-lime); }
.ip-metric-value { margin-top: 20px; font-family: var(--font-heading); font-size: 2rem; font-weight: 800; line-height: 1; color: #fff; }
@media (min-width: 640px) { .ip-metric-value { font-size: 2.4rem; } }
.ip-metric-value span { color: var(--brand-lime); }
.ip-metric-label { margin-top: 10px; font-size: 0.85rem; line-height: 1.5; color: rgba(255, 255, 255, 0.66); }

/* Honest fit two-column */
.ip-fitcols { margin-top: 44px; display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 880px) { .ip-fitcols { grid-template-columns: 1fr 1fr; gap: 24px; } }
.ip-fitcol { padding: 30px 26px; border-radius: 20px; border: 1px solid var(--brand-light); background: var(--brand-white); }
.ip-fitcol-good { border-color: rgba(103, 33, 223, 0.25); box-shadow: 0 24px 54px -28px rgba(103, 33, 223, 0.35); }
.ip-fitcol-label { display: flex; align-items: center; gap: 9px; font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; color: var(--brand-charcoal); }
.ip-fitcol-good .ip-fitcol-label .icon { color: var(--brand-purple); }
.ip-fitcol-bad .ip-fitcol-label .icon { color: var(--brand-muted); }
.ip-fitcol-list { margin-top: 20px; display: flex; flex-direction: column; gap: 13px; }
.ip-fitcol-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.89rem; line-height: 1.55; color: var(--brand-muted); }
.ip-fitcol-list .icon { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; }
.ip-fitcol-good .ip-fitcol-list .icon { color: var(--brand-purple); }
.ip-fitcol-bad .ip-fitcol-list .icon { color: #cfc9d8; }

/* Case study preview */
.ip-case { margin-top: 44px; display: grid; grid-template-columns: 1fr; border-radius: 22px; overflow: hidden; border: 1px solid var(--brand-light); background: var(--brand-white); box-shadow: 0 30px 66px -32px rgba(103, 33, 223, 0.34); }
@media (min-width: 900px) { .ip-case { grid-template-columns: 0.85fr 1.15fr; } }
.ip-case-side { padding: 32px 28px; background: linear-gradient(160deg, var(--brand-purple), var(--brand-purple-bright)); color: #fff; display: flex; flex-direction: column; }
.ip-case-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); }
.ip-case-name { margin-top: 12px; font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; line-height: 1.15; }
.ip-case-managed-label { margin-top: 26px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.65); }
.ip-case-tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 7px; }
.ip-case-tag { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.16); font-size: 0.76rem; }
.ip-case-main { padding: 32px 28px; display: flex; flex-direction: column; }
.ip-case-block-label { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-purple); }
.ip-case-block-label .icon { width: 14px; height: 14px; }
.ip-case-text { margin-top: 10px; font-size: 0.93rem; line-height: 1.7; color: var(--brand-muted); }
.ip-case-outcome { margin-top: 26px; padding: 20px; border-radius: 14px; background: var(--brand-off-white); border: 1px solid var(--brand-light); }
.ip-case-cta { margin-top: 26px; }
.ip-case-note { margin-top: 18px; font-family: var(--font-mono); font-size: 10.5px; color: var(--brand-muted); }

/* =========================================================================
   PAGE 06 — FAQ
   ========================================================================= */

/* Category filter chips */


.ip-faq-two {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
  list-style: none;
  padding: 0;
}
@media (min-width: 820px) { .ip-faq-two { grid-template-columns: 1fr 1fr; gap: 16px 20px; } }

.ip-faq-item {
  border-radius: 14px; border: 1px solid var(--brand-light); background: var(--brand-white);
  overflow: hidden; transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.ip-faq-item[hidden] { display: none; }
.ip-faq-item.is-open { border-color: rgba(103, 33, 223, 0.35); box-shadow: 0 20px 46px -26px rgba(103, 33, 223, 0.45); }
.ip-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 19px 22px; text-align: left; }
.ip-faq-q-text { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--brand-charcoal); }
.ip-faq-q mark { background: rgba(197, 244, 61, 0.55); color: inherit; border-radius: 3px; padding: 0 2px; }
.ip-faq-chev { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; background: rgba(103, 33, 223, 0.09); color: var(--brand-purple); transition: transform 0.3s ease, background 0.25s ease, color 0.25s ease; }
.ip-faq-chev .icon { width: 17px; height: 17px; }
.ip-faq-item.is-open .ip-faq-chev { transform: rotate(180deg); background: var(--brand-purple); color: #fff; }
.ip-faq-a { padding: 0 22px 22px; }
.ip-faq-a p { max-width: 52rem; font-size: 0.93rem; line-height: 1.7; color: var(--brand-muted); }


/* Still need help */
.ip-help { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; padding: 38px 30px; border-radius: 22px; border: 1px solid var(--brand-light); background: var(--brand-white); box-shadow: 0 28px 62px -32px rgba(103, 33, 223, 0.3); }
@media (min-width: 820px) { .ip-help { grid-template-columns: 1fr auto; padding: 44px 42px; gap: 40px; } }
.ip-help-heading { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 800; color: var(--brand-charcoal); }
.ip-help-text { margin-top: 12px; max-width: 40rem; font-size: 0.95rem; line-height: 1.65; color: var(--brand-muted); }
.ip-help-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* The shared closing CTA (.ip-cta-*) now lives in style.css, because the
   homepage uses the same component and does not load this stylesheet. */

/* =========================================================================
   Reduced motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .ip-orbit-ring,
  .ip-orbit-chip,
  .ip-cert-badge,
  .ip-check-active .ip-check-mark .icon { animation: none !important; }

  .ip-flowcard-line,
  .ip-timeline-rail-fill,
  .ip-progress-fill,
  .ip-ops-break-fill,
  .ip-bar { transition: none !important; transition-delay: 0s !important; }
}

/* =========================================================================
   The mark (#the-mark) — the five order stages set around the brand logo
   A pentagon of hairline spokes off the mark, each ending in a small cap.
   A pulse runs out along one spoke at a time and its cap flares as it lands.
   The copy blocks are positioned off the same --x/--y the caps use, so every
   block sits on the exact height of its own dot.
   ========================================================================= */
.mark-orbit { margin-top: 44px; display: grid; grid-template-columns: 1fr; gap: 26px; }

/* The stage is only a positioning context; the dial is the square that holds
   the rays and the mark. Splitting them lets the copy blocks sit below the
   dial when stacked and around it when there is room. */
.mark-stage { position: relative; justify-self: center; width: 100%; }

.mark-dial { position: relative; width: 260px; height: 260px; margin-inline: auto; }
@media (min-width: 560px) { .mark-dial { width: 320px; height: 320px; } }

.mark-rays { position: absolute; inset: 0; width: 100%; height: 100%; }
.mark-ray { stroke: var(--brand-light); stroke-width: 1.4; }
.mark-cap { fill: var(--brand-purple); animation: mark-flare 3.5s ease-in-out infinite; animation-delay: var(--d); }
.mark-pulse { fill: var(--brand-lime-dark); animation: mark-run 3.5s cubic-bezier(0.4, 0, 0.2, 1) infinite; animation-delay: var(--d); }

/* The mark itself: on a plain white plate with a hairline ring, no glow. */
.mark-plate {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 42%;
  height: 42%;
  border-radius: 999px;
  background: var(--brand-white);
  border: 1px solid var(--brand-light);
}

.mark-plate img { width: 46%; height: auto; }

.mark-point-label {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--brand-charcoal);
}

.mark-point-detail {
  margin-top: 7px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--brand-muted);
}

/* Stacked below the radial breakpoint: mark first, then the five stages. */
@media (max-width: 899px) {
  .mark-stage { display: flex; flex-direction: column; gap: 22px; }
  .mark-point { max-width: 30rem; margin-inline: auto; text-align: center; }
}

@media (min-width: 900px) {
  /* Room above and below the stage for the top and bottom copy blocks. */
  .mark-orbit { padding-block: 84px 48px; }
  .mark-stage { width: 340px; height: 340px; }
  .mark-dial { position: absolute; inset: 0; width: auto; height: auto; }

  /* --y is in viewBox units, so the offset is a share of the stage height and
     scales with it. translateY(-50%) centres the block on its dot. */
  .mark-point {
    position: absolute;
    top: calc(50% + (var(--y) / 200) * 100%);
    width: 17rem;
  }

  /* The heading line sits level with the dot and starts beside it, so the
     dot reads as the bullet the entry hangs from. -12px is half a label
     line, which is what puts the label's centre on the dot. */
  .mark-point[data-side="right"] {
    left: calc(50% + (var(--x) / 200) * 100% + 15px);
    transform: translateY(-12px);
  }

  .mark-point[data-side="left"] {
    right: calc(50% - (var(--x) / 200) * 100% + 15px);
    text-align: right;
    transform: translateY(-12px);
  }

  /* The top block hangs above its dot rather than beside it. */
  .mark-point[data-side="top"] {
    left: 50%;
    width: 21rem;
    text-align: center;
    transform: translate(-50%, calc(-100% - 20px));
  }

}

@media (min-width: 1200px) {
  .mark-stage { width: 400px; height: 400px; }
  .mark-point { width: 19rem; }
  .mark-point[data-side="right"],
  .mark-point[data-side="left"] { transform: translateY(-13px); }
  .mark-point-label { font-size: 1.3rem; }
  .mark-point-detail { font-size: 1rem; }
}

/* The pulse leaves the plate, runs the spoke and lands on the cap. */
@keyframes mark-run {
  0% { translate: 0 0; opacity: 0; }
  12% { opacity: 1; }
  62%, 100% { translate: calc(var(--dx) * 1px) calc(var(--dy) * 1px); opacity: 0; }
}

@keyframes mark-flare {
  0%, 52%, 100% { r: 3.6; fill: var(--brand-purple); }
  62% { r: 5.4; fill: var(--brand-lime-dark); }
}

@media (prefers-reduced-motion: reduce) {
  .mark-pulse { display: none; }
  .mark-cap { animation: none !important; }
}