/* pPULSE landing page — global styles
   Pulls in the design-system tokens from colors_and_type.css and adds
   page-level layout, motion, hover, and reveal rules. */
@import url('/colors_and_type.css');

html { scroll-behavior: smooth; }
html, body {
  margin: 0;
  padding: 0;
  background: #fff;
  color: var(--pp-fg-2);
  font-family: var(--pp-font-sans);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
::selection { background: var(--pp-purple-200); }

img { max-width: 100%; display: block; }
button { font-family: inherit; }
a { text-decoration: none; color: inherit; }

/* ============== Per-section purple glows ============== */
.app > section { position: relative; }
.app > section > * { position: relative; z-index: 1; }
.app > section::before {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 0;
  /* Stop at 100% (not 72%) so the gradient fades fully to zero by the
     closest-side edge. A 72% stop leaves a faint alpha cliff at ~5% that
     reads as a visible circular arc, which appears as a horizontal line
     where two adjacent sections' glow circles meet near a section boundary. */
  background: radial-gradient(closest-side, rgba(200,177,228,0.55) 0%, rgba(200,177,228,0) 100%);
  animation: pp-glow-pulse 18s ease-in-out infinite;
  will-change: opacity, transform;
}
/* Hero already has its own glow */
.app > section:nth-of-type(1)::before { display: none; }
.app > section:nth-of-type(even)::before {
  width: 720px; height: 720px; top: -120px; right: -200px;
}
.app > section:nth-of-type(odd)::before {
  width: 760px; height: 760px; bottom: -160px; left: -220px;
  background: radial-gradient(closest-side, rgba(232,221,246,0.55) 0%, rgba(232,221,246,0) 100%);
  animation-delay: -6s;
}
.app > section:nth-of-type(3)::before  { animation-delay: -3s; }
.app > section:nth-of-type(5)::before  { animation-delay: -9s; }
.app > section:nth-of-type(7)::before  { animation-delay: -12s; }
.app > section:nth-of-type(9)::before  { animation-delay: -4s; }
.app > section:nth-of-type(11)::before { animation-delay: -7s; }

/* Companion glow on the opposite corner, periwinkle-blue, pulsing in
   opposite phase (-9s = half the 18s period) so the pair cross-fades. */
.app > section::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(closest-side, rgba(176,196,232,0.50) 0%, rgba(176,196,232,0) 100%);
  animation: pp-glow-pulse 18s ease-in-out infinite;
  will-change: opacity, transform;
}
.app > section:nth-of-type(1)::after { display: none; }
/* Even sections: ::before is top-right, so ::after lives bottom-left */
.app > section:nth-of-type(even)::after {
  width: 760px; height: 760px; bottom: -160px; left: -220px;
  animation-delay: -9s;
}
/* Odd sections: ::before is bottom-left, so ::after lives top-right */
.app > section:nth-of-type(odd)::after {
  width: 720px; height: 720px; top: -120px; right: -200px;
  animation-delay: -15s;
}

/* Particle-style pulse: a wandering drift + non-uniform breathe so the
   glow reads as a slow-moving cloud of motes rather than a uniform pulse.
   Five stops with translate() + scale() trace a soft figure-eight path. */
@keyframes pp-glow-pulse {
  0%, 100% { opacity: 0.55; transform: translate(0, 0)        scale(0.94); }
  25%      { opacity: 0.80; transform: translate(8px, -10px)  scale(1.02); }
  50%      { opacity: 1.00; transform: translate(-6px, -18px) scale(1.08); }
  75%      { opacity: 0.80; transform: translate(10px, -8px)  scale(1.04); }
}

/* ============== Preloader ============== */
#preloader {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 9999;
  background: #ffffff;
  transition: opacity 600ms ease, visibility 600ms ease;
}
#preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
/* Children use position: fixed themselves with vh/vw so they center against
   the viewport directly. Bypasses any containing-block / parent-size quirks
   that broke the previous absolute-with-percentage pattern in DevTools mobile
   emulation. The negative-margin pattern keeps the rotate keyframe clean. */
#preloader .pl-ring {
  position: fixed;
  top: 50vh; left: 50vw;
  width: 140px; height: 140px;
  margin: -70px 0 0 -70px;
  border-radius: 50%;
  border: 2px solid rgba(108, 59, 170, 0.12);
  border-top-color: var(--pp-purple-600);
  animation: pl-spin 1.1s linear infinite;
  z-index: 10000;
}
#preloader .pl-logo {
  position: fixed;
  top: 50vh; left: 50vw;
  width: 76px; height: 70px;
  margin: -35px 0 0 -38px;
  display: block;
  z-index: 10001;
}
@keyframes pl-spin { to { transform: rotate(360deg); } }
.app { opacity: 0; transition: opacity 700ms ease 80ms; }
.app.is-ready { opacity: 1; }

/* ============== Scroll reveal ============== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

.reveal [data-stagger] > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms cubic-bezier(.2,.7,.2,1), transform 600ms cubic-bezier(.2,.7,.2,1);
}
.reveal.is-in [data-stagger] > * { opacity: 1; transform: none; }
.reveal.is-in [data-stagger] > *:nth-child(1)  { transition-delay:  60ms; }
.reveal.is-in [data-stagger] > *:nth-child(2)  { transition-delay: 130ms; }
.reveal.is-in [data-stagger] > *:nth-child(3)  { transition-delay: 200ms; }
.reveal.is-in [data-stagger] > *:nth-child(4)  { transition-delay: 270ms; }
.reveal.is-in [data-stagger] > *:nth-child(5)  { transition-delay: 340ms; }
.reveal.is-in [data-stagger] > *:nth-child(6)  { transition-delay: 410ms; }
.reveal.is-in [data-stagger] > *:nth-child(7)  { transition-delay: 480ms; }
.reveal.is-in [data-stagger] > *:nth-child(8)  { transition-delay: 550ms; }
.reveal.is-in [data-stagger] > *:nth-child(9)  { transition-delay: 620ms; }
.reveal.is-in [data-stagger] > *:nth-child(10) { transition-delay: 690ms; }
.reveal.is-in [data-stagger] > *:nth-child(11) { transition-delay: 760ms; }
.reveal.is-in [data-stagger] > *:nth-child(12) { transition-delay: 830ms; }

/* ============== Universal interactive transitions ============== */
.app button {
  transition: transform 180ms cubic-bezier(.2,.7,.2,1),
              box-shadow 180ms cubic-bezier(.2,.7,.2,1),
              background 180ms ease,
              color 180ms ease,
              filter 180ms ease;
}
.app button:hover { transform: translateY(-1px); filter: brightness(1.04); }
.app button:active { transform: translateY(0); filter: brightness(0.97); }
.app button:focus-visible { outline: 2px solid var(--pp-purple-400); outline-offset: 3px; }
/* Top-nav anchors and the brand link need an explicit :focus-visible state.
   The matrix's a11y audit found these had no outline, no shadow, no border
   change on focus — keyboard users had no idea where they were on the page. */
.app .nav-link:focus-visible,
.app .topbar a:focus-visible,
.app .brand-link:focus-visible {
  outline: 2px solid var(--pp-purple-700);
  outline-offset: 2px;
  border-radius: 6px;
}

.app a {
  transition: color 160ms ease, background 160ms ease, opacity 160ms ease;
}
.app a:hover { color: var(--pp-purple-700); }

/* Anchor-styled buttons must keep their resting text color on hover.
   The universal `.app a:hover` rule above (specificity 0,0,2,1) would
   otherwise repaint button text purple-700 — invisible on the purple
   buttons (navbar Book a demo, hero Start free trial) and an unintended
   brand-color flicker on the white pill button. We darken the background
   for hover affordance, matching the .pricing-cta / .compare-plan-cta
   pattern already established elsewhere in this file. */
.app .btn-primary,
.app .btn-primary:hover,
.app .btn-primary:focus,
.app .btn-primary:active { color: #fff; }
.app .btn-primary:hover { background: var(--pp-purple-700); }

.app .btn-pill-primary,
.app .btn-pill-primary:hover,
.app .btn-pill-primary:focus,
.app .btn-pill-primary:active { color: #fff; }
.app .btn-pill-primary:hover { background: var(--pp-purple-700); }

.app .btn-pill-secondary,
.app .btn-pill-secondary:hover,
.app .btn-pill-secondary:focus,
.app .btn-pill-secondary:active { color: var(--pp-fg-1); }
.app .btn-pill-secondary:hover { background: var(--pp-bg-subtle); border-color: var(--pp-purple-300); }

[data-card] {
  transition: transform 240ms cubic-bezier(.2,.7,.2,1),
              box-shadow 240ms cubic-bezier(.2,.7,.2,1),
              border-color 240ms ease;
}
[data-card]:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 38px -12px rgba(43, 22, 72, 0.22);
}

[data-int-tile] { transition: transform 220ms cubic-bezier(.2,.7,.2,1), background 200ms ease, border-color 200ms ease; }
[data-int-tile]:hover { transform: translateY(-2px); }
[data-int-tile] svg { transition: transform 240ms cubic-bezier(.2,.7,.2,1); }
[data-int-tile]:hover svg { transform: scale(1.12); }

.pp-anchor-cta {
  transform: none !important;
  display: inline-flex; align-items: center;
  min-height: 44px;
}
.pp-anchor-cta svg { transition: transform 200ms cubic-bezier(.2,.7,.2,1); }
.pp-anchor-cta:hover svg { transform: translateX(4px); }
.cta-card-link {
  display: inline-flex; align-items: center;
  min-height: 44px;
}

/* Hero device traffic-light buttons */
.pp-traffic [data-tl] {
  transition: background 180ms ease, color 180ms ease;
  display: flex; align-items: center; justify-content: center;
  color: transparent;
  font: 700 9px/1 -apple-system, "SF Pro Text", system-ui, sans-serif;
  user-select: none;
  text-align: center;
}
.pp-traffic [data-tl] span {
  display: inline-block;
  transform: translateY(-0.5px);
}
/* Hovering any dot lights up all three together (macOS Finder feel). */
.pp-traffic:hover [data-tl="close"] { background: #FF5F57 !important; color: #5C0E08; }
.pp-traffic:hover [data-tl="min"]   { background: #FFBD2E !important; color: #6B4A00; }
.pp-traffic:hover [data-tl="max"]   { background: #28C840 !important; color: #005A18; }

/* Hero floating cards transition */
.float-card {
  transition: opacity 600ms cubic-bezier(.2,.7,.2,1), transform 600ms cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}

/* Hero device float */
@keyframes pp-hero-float {
  0%, 100% { transform: translateX(40px) scale(1.12) translateY(0); }
  50%      { transform: translateX(40px) scale(1.12) translateY(-8px); }
}
/* Apply float animation ONLY on extra-wide desktop. Below 1441px the
   animation's mid keyframe (translateX(40px) scale(1.12)) pushes the
   hero-device past the viewport edge in webkit, which keeps the keyframes
   running even when @media tries to reset animation/transform via
   !important — keyframes win the cascade in webkit. Defining the
   animation only on the desktop range sidesteps the override war. */
@media (min-width: 1441px) {
  .hero-device { animation: pp-hero-float 12s ease-in-out infinite; }
}

/* Mega menu */
.nav-trigger { position: relative; }
.mega {
  position: absolute; top: 56px; left: 50%; transform: translateX(-50%);
  width: 720px; background: #fff; border-radius: 18px;
  box-shadow: var(--pp-shadow-lg); border: 1px solid var(--pp-line);
  padding: 18px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  z-index: 200;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 160ms ease;
}
.mega.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.mega--narrow { width: 560px; }
.mega-item {
  display: flex; gap: 12px; padding: 12px 14px; border-radius: 12px; cursor: pointer;
  transition: background 120ms;
}
.mega-item:hover { background: var(--pp-bg-subtle); }
.mega-icon {
  width: 36px; height: 36px; border-radius: 10px; background: var(--pp-purple-50);
  color: var(--pp-purple-600);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mega-title { font-size: 14px; font-weight: 600; color: var(--pp-fg-1); margin: 0; }
.mega-sub { font-size: 12.5px; color: var(--pp-fg-4); margin: 2px 0 0; line-height: 1.4; }

/* FAQ accordion answer transition */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 280ms cubic-bezier(.2,.7,.2,1);
}
.faq-answer > div { overflow: hidden; }
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; }
.faq-item.is-open .faq-answer > div { padding: 0 0 24px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, #preloader .pl-ring,
  .app > section::before,
  .app > section::after,
  .hero-device,
  .app button, .app a, [data-card], [data-int-tile], [data-int-tile] svg,
  .reveal [data-stagger] > * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .reveal [data-stagger] > * { opacity: 1; transform: none; }
}

/* ============== Layout helpers ============== */
.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }

/* ============== TopBar ============== */
.topbar {
  position: sticky; top: 0; z-index: 100;
  /* Near-opaque so content scrolling under the sticky bar is fully hidden,
     not ghosted through. The backdrop-filter keeps a subtle frosted feel
     without the bleed-through that 0.86 alpha was producing. */
  background: rgba(255,255,255,0.98);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--pp-line);
}
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px; padding: 0 32px; max-width: 1280px; margin: 0 auto;
}
.brand-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 0; }
.nav-list { display: flex; align-items: center; gap: 4px; }
.nav-link {
  color: var(--pp-fg-2); cursor: pointer; font-size: 14px; font-weight: 500;
  /* 12px vertical padding + 14px font + line-height ≈ 44px hit area
     (WCAG 2.5.5 / iOS HIG minimum). Was 8px which produced 33px-tall
     targets that the responsive matrix flagged on every touch tablet. */
  padding: 12px 14px; border-radius: 8px; display: inline-flex; align-items: center; gap: 4px;
  min-height: 44px;
}
.nav-link[aria-expanded="true"] { background: var(--pp-bg-subtle); }
.btn { border: none; cursor: pointer; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.btn-primary {
  background: var(--pp-purple-600); color: #fff; border-radius: 999px;
  /* Was 9px vertical → 32px tall. Bumped to 12px so the topbar Sign-in /
     Book-a-demo CTA pair clears the 44px touch-target minimum. */
  padding: 12px 18px; font-size: 13.5px; min-height: 44px;
  box-shadow: var(--pp-shadow-purple);
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-ghost {
  background: transparent; color: var(--pp-fg-1); border-radius: 999px;
  padding: 12px 14px; font-weight: 500; font-size: 13.5px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ============== Hero ============== */
.hero {
  position: relative; padding-top: 88px; padding-bottom: 50px; overflow: visible;
}
/* Higher specificity than `.app > section > *` so position/z-index stick. */
.hero > .hero-glow {
  position: absolute; top: 0; left: 0; right: 0; bottom: -320px;
  background:
    /* Periwinkle wash anchored to the top-left corner of the hero,
       so the page opens with a soft blue cloud above the headline. */
    radial-gradient(55% 60% at 8% 10%, rgba(110,150,225,0.85) 0%, rgba(110,150,225,0) 80%),
    radial-gradient(50% 60% at 80% 18%, rgba(200,177,228,0.55) 0%, rgba(200,177,228,0) 65%),
    radial-gradient(40% 55% at 18% 42%, rgba(232,221,246,0.5) 0%, rgba(232,221,246,0) 70%),
    radial-gradient(60% 40% at 50% 100%, rgba(200,177,228,0.35) 0%, rgba(200,177,228,0) 70%);
  pointer-events: none; z-index: 0;
}
.hero-inner {
  position: relative; z-index: 1;
  max-width: 1280px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center;
}
.hero-title {
  font-family: var(--pp-font-display); font-weight: 800;
  /* line-height 1.15 keeps headings tight visually but gives selection
     rects enough vertical room not to overlap line-to-line. */
  font-size: 50px; line-height: 1.15; letter-spacing: -0.04em;
  color: var(--pp-fg-1); margin: 0 0 24px; text-wrap: balance;
}
.hero-body {
  font-size: 18px; line-height: 1.55; color: var(--pp-fg-3);
  max-width: 520px; margin-bottom: 14px;
}
.hero-mark {
  background: linear-gradient(180deg, transparent 62%, var(--pp-purple-100) 62%);
  padding: 0 2px; font-weight: 700; color: var(--pp-fg-1);
}
.hero-cta-row { display: flex; gap: 10px; margin-top: 28px; align-items: center; flex-wrap: wrap; }
.btn-pill-primary {
  background: var(--pp-purple-600); color: #fff; border-radius: 999px;
  padding: 14px 22px; font-weight: 600; font-size: 15px; border: none; cursor: pointer;
  box-shadow: var(--pp-shadow-purple);
}
.btn-pill-secondary {
  background: #fff; color: var(--pp-fg-1); border-radius: 999px;
  padding: 14px 22px; font-weight: 600; font-size: 15px;
  border: 1px solid var(--pp-line-strong); cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; box-sizing: border-box;
}
.hero-device-wrap { position: relative; }
.hero-device {
  background: #fff; border-radius: 22px; border: 1px solid var(--pp-line);
  box-shadow: var(--pp-shadow-lg); padding: 10px;
  transform: translateX(40px) scale(1.12); transform-origin: left center;
  position: relative; z-index: 2;
}
.hero-device-bar { display: inline-flex; gap: 6px; padding: 6px 6px 10px; width: fit-content; }
.hero-device-dot {
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--pp-line-strong);
}
.hero-device-img-wrap { position: relative; }
.hero-device-img {
  width: 100%; height: auto; border-radius: 14px; display: block;
  transition: opacity 700ms cubic-bezier(.4,0,.2,1);
}
.hero-device-img.is-secondary {
  position: absolute; inset: 0; opacity: 0;
}

/* Floating callout cards */
.float-card {
  position: absolute;
  background: #fff; border-radius: 14px;
  border: 1px solid var(--pp-line); box-shadow: var(--pp-shadow-md);
  padding: 14px; display: flex; align-items: center; gap: 12px; z-index: 3;
  opacity: 0; transform: translateY(12px) scale(.96);
  pointer-events: none;
}
.float-card.is-active { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.float-card .fc-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.float-card .fc-text { min-width: 0; }
.float-card .fc-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--pp-fg-3);
}
.float-card .fc-line {
  font-size: 13.5px; font-weight: 600; color: var(--pp-fg-1); margin-top: 2px;
}

/* ============== Pillars ============== */
.pillars { padding: 60px 0 12px; background: transparent; position: relative; }
.section-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--pp-purple-600); margin-bottom: 14px;
}
.section-h2 {
  font-family: var(--pp-font-display); font-weight: 800;
  line-height: 1.15; letter-spacing: -.04em; color: var(--pp-fg-1);
  margin: 0 0 18px; text-wrap: balance;
}
.pillars-h2 { font-size: 45px; }
.section-lead { font-size: 18px; line-height: 1.55; color: var(--pp-fg-3); max-width: 620px; }
.pillars-head { max-width: 760px; margin-bottom: 64px; }
.pillars-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.pillar-card {
  position: relative;
  background: #fff; padding: 32px;
  display: flex; flex-direction: column; gap: 14px;
  border: 1px solid var(--pp-line); border-radius: 16px;
  transition: box-shadow 220ms ease, border-color 220ms ease;
  cursor: pointer; min-height: 240px;
}
.pillar-card:hover {
  box-shadow: var(--pp-shadow-md);
  border-color: var(--pp-purple-200);
}
/* Static (informational) pillar cards. No link, no hover affordance. Used for
   integration grids that just announce "what's connected", not "click to learn". */
.pillar-card.is-static { cursor: default; }
.pillar-card.is-static:hover {
  background: #fff; box-shadow: none; border-color: var(--pp-line);
}
/* Stretched-link pattern: any .pillar-card that contains a .pillar-link
   becomes fully clickable. The link's invisible ::before overlay covers
   the whole card so a click anywhere on the card triggers the same nav.
   The ::before resolves against .pillar-card (the nearest positioned
   ancestor), so we explicitly leave .pillar-link as static-positioned. */
.pillar-card:has(.pillar-link) .pillar-link::before {
  content: ""; position: absolute; inset: 0;
  background: transparent; border-radius: inherit;
}
.pillar-icon {
  width: 44px; height: 44px; border-radius: 12px; background: var(--pp-purple-50);
  color: var(--pp-purple-600);
  display: flex; align-items: center; justify-content: center;
}
.pillar-card h3 {
  font-size: 20px; font-weight: 700; color: var(--pp-fg-1);
  margin: 0; letter-spacing: -.01em;
}
.pillar-card p {
  font-size: 14.5px; line-height: 1.55; color: var(--pp-fg-3);
  margin: 0; flex: 1;
}
.pillar-link {
  font-size: 13.5px; font-weight: 600; color: var(--pp-purple-600);
  display: inline-flex; align-items: center; gap: 6px;
}

/* ============== Connector grid (ATS sourcing channels) ============== */
.pillar-logo {
  display: inline-flex; align-items: center;
  height: 32px; padding: 0;
}
.pillar-logo img,
.pillar-logo svg { display: block; height: 28px; width: auto; }
.pillar-logo .pp-brand-linkedin { height: 28px; width: 28px; }
.pillars-grid.is-connectors .pillar-card {
  position: relative; cursor: default;
  transition: transform 240ms var(--pp-ease-out), box-shadow 240ms var(--pp-ease-out), background 240ms;
}
.pillars-grid.is-connectors .pillar-card:hover {
  background: #fff;
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(43,22,72,0.10);
  z-index: 2;
}
.pillars-grid.is-connectors .pillar-card.is-soon { background: #FBFAFC; }
.pillars-grid.is-connectors .pillar-card.is-soon h3,
.pillars-grid.is-connectors .pillar-card.is-soon p { opacity: .82; }
.pillar-card-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
}
.pillar-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  padding: 5px 10px 5px 9px; border-radius: 999px;
  white-space: nowrap;
}
.pillar-status.is-on {
  color: #117a3f; background: rgba(31,174,92,0.12);
}
.pillar-status.is-soon-pill {
  color: var(--pp-fg-3); background: var(--pp-bg-subtle);
  border: 1px dashed var(--pp-line-strong);
}
.pillar-status .pp-dot {
  position: relative; display: inline-block;
  width: 7px; height: 7px; border-radius: 50%;
  background: #1FAE5C;
}
.pillar-status.is-on .pp-dot::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  background: #1FAE5C; opacity: .5;
  animation: pp-pulse-ring 1.8s cubic-bezier(.2,.7,.2,1) infinite;
}
@keyframes pp-pulse-ring {
  0%   { transform: scale(.6); opacity: .55; }
  80%  { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pillar-status.is-on .pp-dot::after { animation: none; }
  .pillars-grid.is-connectors .pillar-card { transition: none; }
  .pillars-grid.is-connectors .pillar-card:hover { transform: none; }
}

/* ============== Help center search bar ============== */
.help-search-form {
  display: flex; gap: 8px; align-items: center;
  max-width: 720px; margin: 28px auto 0;
  background: #fff; border: 1px solid var(--pp-line);
  border-radius: 999px;
  box-shadow: 0 18px 48px -28px rgba(60, 30, 110, 0.22);
  padding: 6px 6px 6px 18px;
  transition: box-shadow 220ms ease, border-color 220ms ease;
}
.help-search-form:focus-within {
  border-color: var(--pp-purple-300);
  box-shadow: 0 22px 56px -22px rgba(108, 59, 170, 0.32);
}
.help-search-form > svg { color: var(--pp-fg-4); flex-shrink: 0; }
.help-search-input {
  flex: 1; border: none; background: transparent;
  font-family: inherit; font-size: 15.5px; color: var(--pp-fg-1);
  padding: 12px 8px; outline: none;
}
.help-search-input::placeholder { color: var(--pp-fg-4); }
.help-search-btn {
  background: var(--pp-purple-600); color: #fff;
  border: none; border-radius: 999px;
  padding: 11px 22px; font: 600 14px var(--pp-font-sans);
  cursor: pointer; transition: background 180ms ease;
}
.help-search-btn:hover { background: var(--pp-purple-700); }

.help-recent {
  max-width: 720px; margin: 14px auto 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px; font-size: 12.5px;
  /* fg-3 clears AA on white at 12.5px */
  color: var(--pp-fg-3);
}
.help-recent a { color: var(--pp-purple-700); font-weight: 500; }

/* ============== Sign-in stub page ============== */
.signin-section {
  display: flex; align-items: center; justify-content: center;
  padding: 120px 24px 100px; min-height: calc(100vh - 200px);
  background: var(--pp-bg-subtle);
}
.signin-card {
  width: 100%; max-width: 520px;
  background: #fff; border: 1px solid var(--pp-line); border-radius: 24px;
  box-shadow: var(--pp-shadow-md);
  padding: 44px 44px 40px; text-align: center;
}
.signin-eyebrow {
  font-family: var(--pp-font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--pp-purple-700); margin-bottom: 14px;
}
.signin-h1 {
  font-family: var(--pp-font-display); font-weight: 800; font-size: 44px;
  letter-spacing: -.025em; color: var(--pp-fg-1); margin: 0 0 16px;
}
.signin-lead {
  font-size: 16px; line-height: 1.55; color: var(--pp-fg-3);
  margin: 0 0 24px;
}
.signin-actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 28px;
}
.signin-meta {
  border-top: 1px solid var(--pp-line); padding-top: 20px;
  font-size: 13.5px; color: var(--pp-fg-3); line-height: 1.55;
}
.signin-meta p { margin: 0 0 8px; }
.signin-meta p:last-child { margin: 0; }
.signin-meta strong { color: var(--pp-fg-1); font-weight: 600; }
.signin-link { color: var(--pp-purple-700); font-weight: 600; }
@media (max-width: 540px) {
  .signin-card { padding: 32px 24px 28px; border-radius: 20px; }
  .signin-h1 { font-size: 34px; }
}

/* ============== Demo / contact form ============== */
.demo-section { padding: 60px 0 12px; }
.demo-grid {
  display: grid; grid-template-columns: 1fr 1.05fr;
  gap: 64px; align-items: start; max-width: 1180px;
  margin: 0 auto; padding: 0 32px;
}

/* /book-a-demo left column. The pitch text sits center-aligned in
   front of a faded photo that's clipped to the pPULSE logo silhouette
   with feathered edges. The photo is intentionally low-opacity so
   the default dark .demo-h1 / .demo-lead / .demo-bullets typography
   (matching /contact-us) reads cleanly on top of it. */
.demo-hero-stage {
  position: relative;
  isolation: isolate;
  padding: 16px 0;
  text-align: center;
  /* Tall enough to hold the centered text + a logo-aspect background
     without the bg shape feeling cropped. Logo is 645:600. */
  min-height: 540px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.demo-hero-stage .demo-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center 30%;
  display: block;
  /* 25% opacity makes the photo a quiet brand watermark — present
     enough to recognise the logo silhouette and the team meeting
     scene, faded enough that the default dark body text on top
     stays comfortably readable everywhere. */
  opacity: 0.25;
  -webkit-mask-image: url("/assets/book-a-demo/logo-mask-soft.svg");
          mask-image: url("/assets/book-a-demo/logo-mask-soft.svg");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}
.demo-hero-stage .demo-hero-center {
  position: relative;
  z-index: 1;
}
/* Center alignment overrides for elements when they live inside
   the stage. Default styling (color, sizes, weights) preserved. */
.demo-hero-stage .demo-h1 {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.demo-hero-stage .demo-lead {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 92%;
}
/* Bullet list as a whole is centered horizontally (inline-flex
   under text-align:center on the parent), but each bullet stays
   left-aligned so the icon-then-text reading order is preserved.
   inline-flex (not inline-block) so the gap property between
   list items keeps working. */
.demo-hero-stage .demo-bullets {
  display: inline-flex;
  flex-direction: column;
  text-align: left;
  margin: 28px auto 0;
  max-width: 100%;
  gap: 18px;
}
@media (max-width: 760px) {
  .demo-hero-stage {
    min-height: 0;
    padding: 8px 0;
  }
  .demo-hero-stage .demo-hero-bg {
    opacity: 0.18;
  }
}
.demo-eyebrow {
  font-family: var(--pp-font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pp-purple-700); margin-bottom: 16px;
  display: inline-flex; align-items: center; gap: 8px;
}
.demo-eyebrow::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--pp-purple-500);
}
.demo-h1 {
  font-family: var(--pp-font-display); font-weight: 800;
  font-size: 50px; line-height: 1.1; letter-spacing: -0.04em;
  color: var(--pp-fg-1); margin: 0 0 18px; text-wrap: balance;
}
.demo-lead {
  font-size: 18px; line-height: 1.55; color: var(--pp-fg-3);
  margin: 0 0 28px; max-width: 480px;
}
.demo-bullets { list-style: none; padding: 0; margin: 0 0 28px;
  display: flex; flex-direction: column; gap: 14px; }
.demo-bullets li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 15.5px; line-height: 1.55; color: var(--pp-fg-2);
}
.demo-bullets li::before {
  content: ''; width: 22px; height: 22px; flex: 0 0 auto; margin-top: 1px;
  border-radius: 50%; background: var(--pp-purple-100);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C3BAA' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
  background-size: 13px; background-position: center; background-repeat: no-repeat;
}
.demo-bullets li strong { color: var(--pp-fg-1); font-weight: 600; }

.demo-trust {
  display: flex; align-items: center; gap: 14px;
  margin-top: 8px; padding-top: 24px;
  border-top: 1px solid var(--pp-line);
  font-size: 14px; color: var(--pp-fg-3);
}
.demo-trust strong { color: var(--pp-fg-1); font-weight: 600; }
.demo-trust .stars { color: var(--pp-purple-600); font-size: 16px; letter-spacing: -1px; }

.demo-form {
  background: #fff; border: 1px solid var(--pp-line);
  border-radius: 24px; padding: 32px;
  box-shadow: 0 28px 70px -32px rgba(60, 30, 110, 0.22);
  position: sticky; top: 96px;
}
.demo-form-title {
  font-family: var(--pp-font-display); font-weight: 800;
  font-size: 22px; line-height: 1.2; letter-spacing: -0.02em;
  margin: 0 0 6px; color: var(--pp-fg-1);
}
.demo-form-sub { font-size: 14px; color: var(--pp-fg-3); margin: 0 0 24px; }

.demo-field { margin-bottom: 14px; }
.demo-field label {
  display: block; font-size: 12.5px; font-weight: 600;
  color: var(--pp-fg-2); margin-bottom: 6px; letter-spacing: 0.01em;
}
.demo-field input, .demo-field select, .demo-field textarea {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--pp-line); border-radius: 10px;
  padding: 11px 14px; font: 400 14.5px var(--pp-font-sans);
  background: #fff; color: var(--pp-fg-1);
  transition: border-color 160ms, box-shadow 160ms;
}
.demo-field input:focus,
.demo-field select:focus,
.demo-field textarea:focus {
  outline: none; border-color: var(--pp-purple-400);
  box-shadow: 0 0 0 3px rgba(108, 59, 170, 0.13);
}
.demo-field textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.demo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Required-field marker. CSS-only via :has() — any .demo-field that
   contains a required input/select/textarea gets a small purple
   asterisk after its label. No HTML changes needed, and adding/
   removing required attributes automatically updates the marker. */
.demo-field:has(input[required]) label::after,
.demo-field:has(select[required]) label::after,
.demo-field:has(textarea[required]) label::after {
  content: " *";
  color: var(--pp-purple-600);
  font-weight: 700;
}
/* Same pattern for the waitlist form's wrapping <label> structure. */
.waitlist-field:has(input[required]) .waitlist-label::after,
.waitlist-field:has(select[required]) .waitlist-label::after,
.waitlist-field:has(textarea[required]) .waitlist-label::after {
  content: " *";
  color: var(--pp-purple-600);
  font-weight: 700;
}

.demo-submit {
  width: 100%; background: var(--pp-purple-600); color: #fff;
  border: none; border-radius: 999px;
  padding: 13px 22px; font: 600 14.5px var(--pp-font-sans);
  cursor: pointer; margin-top: 6px;
  transition: background 180ms ease, transform 180ms ease;
}
.demo-submit:hover { background: var(--pp-purple-700); transform: translateY(-1px); }
.demo-fineprint {
  /* 12px gives AA-clear contrast against white at this rgb. */
  font-size: 12px; color: var(--pp-fg-3); margin: 12px 0 0;
  text-align: center; line-height: 1.5;
}
.demo-fineprint a {
  color: var(--pp-purple-700); text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 880px) {
  .demo-grid { grid-template-columns: 1fr; gap: 32px; }
  .demo-form { position: static; padding: 24px; }
  .demo-h1 { font-size: 36px; }
  .help-search-btn { padding: 10px 16px; font-size: 13px; }
}

/* ============== Pricing cards (Apple One pattern) ============== */
/* Product switcher — pill toggle that swaps between HRMS and ATS tiers.
   Pattern lifted from Freshservice's product-tab pricing page. The active
   pill gets a dark fill so it reads as "selected" without a border halo. */
.pricing-switcher {
  display: inline-flex; gap: 4px;
  padding: 5px; margin: 12px auto 0;
  background: var(--pp-purple-50);
  border: 1px solid var(--pp-line);
  border-radius: 999px;
}
.pricing-switcher-wrap { display: flex; justify-content: center; }
.pricing-switcher button {
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 0;
  color: var(--pp-fg-2); cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 600;
  padding: 9px 20px; border-radius: 999px;
  transition: background 180ms ease, color 180ms ease;
}
/* Inactive pill: only shift the text color on hover. No background, no
   shadow, no transform, so it doesn't feel like a clickable button until
   it's actually selected. */
.pricing-switcher button:hover { color: var(--pp-purple-700); background: transparent; }
.pricing-switcher button.is-active,
.pricing-switcher button.is-active:hover {
  background: var(--pp-purple-700); color: #fff;
}
/* Visibility controlled by data-active on the wrapper. Default: HRMS. */
.pricing-cards[data-active="hrms"] .pricing-card[data-product="ats"] { display: none; }
.pricing-cards[data-active="ats"] .pricing-card[data-product="hrms"] { display: none; }

.pricing-cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; max-width: 1180px; margin: 32px auto 0;
  padding: 0 32px;
}
.pricing-card {
  background: #fff; border: 1px solid var(--pp-line);
  border-radius: 24px; padding: 36px 32px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
}
.pricing-card.is-popular {
  border-color: var(--pp-purple-300);
  box-shadow: 0 22px 56px -28px rgba(108, 59, 170, 0.32);
}
.pricing-badge {
  position: absolute; top: -12px; left: 24px;
  background: var(--pp-purple-600); color: #fff;
  font-family: var(--pp-font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
}
.pricing-name {
  font-family: var(--pp-font-display); font-weight: 700;
  font-size: 22px; line-height: 1.2; letter-spacing: -.01em;
  color: var(--pp-fg-1); margin: 0;
}
.pricing-price {
  font-family: var(--pp-font-display); font-weight: 800;
  font-size: 56px; line-height: 1; letter-spacing: -.04em;
  color: var(--pp-fg-1); margin: 6px 0 0;
}
.pricing-cadence {
  font-size: 13.5px; color: var(--pp-fg-3); margin-top: 6px;
  line-height: 1.4;
}
.pricing-sub {
  font-size: 14px; color: var(--pp-fg-3); margin: 0;
  padding-bottom: 4px;
  line-height: 1.55;
}
.pricing-features {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
  flex: 1;
}
.pricing-features li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 14px; line-height: 1.5; color: var(--pp-fg-2);
}
.pricing-features li::before {
  content: ''; width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px;
  border-radius: 50%; background: var(--pp-purple-100);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C3BAA' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
  background-size: 11px; background-position: center; background-repeat: no-repeat;
}
.pricing-cta {
  display: block; text-align: center;
  background: var(--pp-purple-600); color: #fff;
  border-radius: 999px; padding: 12px 22px;
  font-weight: 600; font-size: 14.5px;
  margin-top: 8px; text-decoration: none;
  transition: background 180ms ease, transform 180ms ease,
              box-shadow 180ms ease;
}
.app .pricing-cta:hover {
  background: var(--pp-purple-700); color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -10px rgba(108, 59, 170, 0.45);
}
.pricing-card.is-popular .pricing-cta {
  background: linear-gradient(135deg, var(--pp-purple-600), var(--pp-purple-700));
}
.pricing-secondary {
  display: block; text-align: center; font-size: 13.5px;
  color: var(--pp-purple-700); font-weight: 500;
  text-decoration: none;
}
.app .pricing-secondary:hover { color: var(--pp-purple-700); text-decoration: underline; }

@media (max-width: 880px) {
  .pricing-cards { grid-template-columns: 1fr; gap: 20px; padding: 0 20px; }
  .pricing-price { font-size: 42px; }
}

/* ============== Resource hub variants ============== */
/* Type label at the top of a pillar-card on the resources page. Mono +
   uppercase to match the .section-eyebrow rhythm of the rest of the site. */
.resource-type {
  font-family: var(--pp-font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--pp-purple-700);
}

/* Filter strip — a row of pills above the main resource grid. Visual only;
   no JS filtering wired up because the static page lists everything. */
.resource-filter {
  padding: 24px 0; margin: 32px 0;
  border-top: 1px solid var(--pp-line);
  border-bottom: 1px solid var(--pp-line);
}
.resource-filter-head {
  display: flex; gap: 24px; align-items: center; flex-wrap: wrap;
  justify-content: space-between;
}
.resource-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.resource-pill {
  font-size: 13.5px; font-weight: 500; color: var(--pp-fg-2);
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--pp-line); background: #fff;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.app .resource-pill:hover { background: var(--pp-bg-subtle); color: var(--pp-fg-1); }
.resource-pill.is-active,
.app .resource-pill.is-active:hover {
  background: var(--pp-purple-600); color: #fff; border-color: var(--pp-purple-600);
}

@media (max-width: 720px) {
  .resource-filter-head { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ============== Feature deep-dives ============== */
.feature-section { padding: 60px 0; background: transparent; }
.feature-section.is-alt { background: var(--pp-bg-subtle); }
/* Tighten the gap between the last feature section (WFH) and the
   mi-section that follows: halve the padding on both sides. */
.feature-section:has(+ .mi-section) { padding-bottom: 30px; }
.feature-section + .mi-section { padding-top: 30px; }
.feature-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 32px;
  display: grid; gap: 80px; align-items: center;
}
.feature-inner.left { grid-template-columns: 1fr 1.1fr; }
.feature-inner.right { grid-template-columns: 1.1fr 1fr; }
.feature-inner.right .feature-text { order: 2; }

.feature-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--pp-purple-700); margin-bottom: 18px;
}
.feature-eyebrow-dot {
  width: 6px; height: 6px; border-radius: 999px; background: var(--pp-purple-600);
}
.feature-h2 {
  font-family: var(--pp-font-display); font-weight: 800; font-size: 45px;
  line-height: 1.15; letter-spacing: -.035em; color: var(--pp-fg-1);
  margin: 0 0 22px; text-wrap: balance;
}
.feature-body { font-size: 17px; line-height: 1.6; color: var(--pp-fg-3); margin-bottom: 18px; }
.feature-bullets { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 14px; }
.feature-bullet { display: flex; gap: 12px; align-items: flex-start; }
.feature-bullet-dot {
  width: 22px; height: 22px; border-radius: 999px; background: var(--pp-purple-50);
  color: var(--pp-purple-600);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
}
.feature-bullet-text { font-size: 15.5px; color: var(--pp-fg-2); line-height: 1.55; }
.feature-bullet-bold { color: var(--pp-fg-1); font-weight: 600; }
.feature-cta {
  background: transparent; color: var(--pp-purple-600); border-radius: 999px;
  padding: 12px 0; font-weight: 600; font-size: 15px; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; margin-top: 24px;
  min-height: 44px;
}

/* ---- Section 3: scroll-pinned "story of a hire" ----
   .ats-story-track is tall (provides scroll distance). .ats-story-pin
   sticks to the viewport while the track scrolls past, so the window
   appears frozen until every chapter has revealed. app.js maps scroll
   progress to .is-active on each chapter and drives the drawn line. */
.ats-story { padding: 0; }
.ats-story-track { position: relative; height: 340vh; }
.ats-story-pin {
  position: sticky; top: 0;
  height: 100vh; min-height: 600px;
  display: flex; align-items: center; overflow: hidden;
}
.ats-story-inner {
  width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 80px; align-items: center;
}
.ats-story-tell { position: relative; }

.ats-story-stages { position: relative; }
.ats-story-line {
  position: absolute; left: 19px; top: 14px; bottom: 14px; width: 2px;
  /* Path not yet reached: dashed, secondary purple. The solid fill
     paints over the reached portion (see .ats-story-line-fill). */
  background: repeating-linear-gradient(
    to bottom,
    var(--pp-purple-200) 0 6px,
    transparent 6px 12px
  );
  border-radius: var(--pp-r-pill); overflow: hidden;
}
.ats-story-line-fill {
  position: absolute; left: 0; top: 0; width: 100%;
  height: calc(var(--ats-progress, 0) * 100%);
  background: var(--pp-purple-600);
  transition: height .18s var(--pp-ease-out);
}
.ats-story-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 20px;
}
.ats-story-stage {
  position: relative; display: flex; gap: 20px; align-items: flex-start;
  /* Hidden until revealed. Space is reserved (no display:none) so the
     pinned panel never jumps and the line can trace toward the next
     step. JS adds .is-active as the visitor scrolls. */
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--pp-ease-out), transform .5s var(--pp-ease-out);
}
.ats-story-stage.is-active { opacity: 1; transform: none; }
.ats-story-dot {
  position: relative; z-index: 1; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: var(--pp-r-pill);
  background: #fff; border: 2px solid var(--pp-line-strong);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--pp-font-display); font-weight: 800; font-size: 15px;
  color: var(--pp-fg-4);
  transition: border-color .4s var(--pp-ease-out), background .4s var(--pp-ease-out), color .4s var(--pp-ease-out);
}
.ats-story-stage.is-active .ats-story-dot {
  border-color: var(--pp-purple-600); background: var(--pp-purple-600); color: #fff;
}
.ats-story-stage-body { padding-top: 3px; }
.ats-story-stage-title {
  font-family: var(--pp-font-display); font-weight: 800; font-size: 21px;
  line-height: 1.25; color: var(--pp-fg-1); margin: 0 0 6px;
}
.ats-story-stage-text {
  font-size: 16px; line-height: 1.6; color: var(--pp-fg-3); margin: 0;
}

/* Static fallback: no pin, line fully drawn, every chapter readable.
   app.js adds .is-static for reduced-motion and narrow screens; the
   media queries below cover the no-JS path. */
.ats-story.is-static .ats-story-track { height: auto; }
.ats-story.is-static .ats-story-pin {
  position: static; height: auto; min-height: 0; padding: 60px 0; overflow: visible;
}
.ats-story.is-static .ats-story-line-fill { height: 100%; }

@media (prefers-reduced-motion: reduce) {
  .ats-story-track { height: auto; }
  .ats-story-pin {
    position: static; height: auto; min-height: 0; padding: 60px 0; overflow: visible;
  }
  .ats-story-stage { opacity: 1; transform: none; transition: none; }
  .ats-story-line-fill { height: 100%; transition: none; }
}

@media (max-width: 880px) {
  .ats-story-track { height: auto; }
  .ats-story-pin {
    position: static; height: auto; min-height: 0; padding: 44px 0; overflow: visible;
  }
  .ats-story-inner { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 0 20px; }
  .ats-story-line { left: 18px; }
  .ats-story-stage-title { font-size: 19px; }
}

/* Short landscape viewports (phones, foldables, small tablets like
   iPad Mini at 768 px tall): the min-height: 600px on .ats-story-pin
   combined with overflow: hidden clips the 6-stage list when the
   viewport height is small. Fall back to static mode (same pattern
   as the narrow-width and reduced-motion branches above) so nothing
   is hidden. Threshold is 800 px to also cover iPad Mini landscape
   (768) and Galaxy Z Fold 5 unfolded landscape (768). */
@media (max-height: 800px) and (orientation: landscape) {
  .ats-story-track { height: auto; }
  .ats-story-pin {
    position: static; height: auto; min-height: 0; padding: 44px 0; overflow: visible;
  }
}

/* ATS Panel */
.mock-card {
  background: #fff; border-radius: 20px; border: 1px solid var(--pp-line);
  box-shadow: var(--pp-shadow-md); overflow: hidden;
}
.mock-head {
  padding: 18px 22px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px 12px; flex-wrap: wrap;
  border-bottom: 1px solid var(--pp-line);
}
.mock-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--pp-fg-4);
}
.mock-title { font-size: 17px; font-weight: 700; color: var(--pp-fg-1); margin-top: 4px; }
.mock-pill {
  font-size: 12px; font-weight: 600; color: var(--pp-purple-700);
  background: var(--pp-purple-50); padding: 6px 12px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--pp-purple-200);
  white-space: nowrap; flex-shrink: 0; max-width: 100%;
}
.mock-pill svg { flex-shrink: 0; width: 13px; height: 13px; }
@media (max-width: 540px) {
  .mock-head { padding: 14px 16px; }
  .mock-pill { font-size: 11px; padding: 5px 10px; }
}
.candidate-row {
  display: grid; grid-template-columns: 32px 1fr 110px 90px 80px;
  align-items: center; gap: 14px; padding: 16px 22px;
  border-bottom: 1px solid var(--pp-line);
}
.candidate-row:last-child { border-bottom: none; }
.candidate-avatar {
  width: 32px; height: 32px; border-radius: 999px;
  background: var(--pp-purple-100); color: var(--pp-purple-700);
  font-weight: 700; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.candidate-name { font-size: 14px; font-weight: 600; color: var(--pp-fg-1); }
.candidate-source { font-size: 12.5px; color: var(--pp-fg-4); margin-top: 2px; }
.candidate-bar {
  flex: 1; height: 6px; border-radius: 999px;
  background: var(--pp-bg-muted); overflow: hidden;
}
/* Candidate progress bar — starts collapsed, scales out from the left when
   the row scrolls into view. We scale the inline-width span via transform
   so the existing markup (style="width:94%;...") keeps its target width. */
.candidate-bar > span {
  display: block; height: 100%;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.6s cubic-bezier(.25,.1,.25,1);
}
.candidate-row.is-bar-animated .candidate-bar > span { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .candidate-bar > span { transform: scaleX(1); transition: none; }
}
.candidate-score {
  font-family: var(--pp-font-display); font-weight: 800; font-size: 18px;
  color: var(--pp-fg-1);
}
.candidate-score-suffix { font-size: 11px; color: var(--pp-fg-4); font-weight: 500; }
.candidate-tag {
  font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  text-align: center;
}
.candidate-tag.strong  { background: var(--pp-success-bg); color: var(--pp-success-on-bg); }
.candidate-tag.good    { background: var(--pp-purple-100); color: var(--pp-purple-700); }
.candidate-tag.average { background: var(--pp-warning-bg); color: var(--pp-warning-on-bg); }

/* ATS Profile mock (left side of "Six dimensions" feature section).
   Recreates the candidate profile dashboard so the radar chart visually
   carries the "six dimensions, reasoning shown" promise. */
.ats-profile-mock { padding: 0; }
.ats-profile-mock .apm-titlebar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--pp-line);
}
.ats-profile-mock .apm-title-left { display: flex; align-items: center; gap: 10px; }
.ats-profile-mock .apm-title {
  font-family: var(--pp-font-display); font-weight: 800;
  font-size: 18px; letter-spacing: -.02em; color: var(--pp-fg-1);
}
.ats-profile-mock .apm-title-tools { display: flex; gap: 6px; }
.ats-profile-mock .apm-icon-btn {
  width: 26px; height: 26px; border-radius: 999px;
  background: var(--pp-bg-subtle); border: 1px solid var(--pp-line);
  color: var(--pp-fg-2);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: default;
}
.ats-profile-mock .apm-icon-btn-ghost { background: var(--pp-bg-subtle); border-color: var(--pp-line); }
.ats-profile-mock .apm-icon-btn-primary {
  background: var(--pp-purple-600); color: #fff; border-color: var(--pp-purple-600);
}

.ats-profile-mock .apm-stats {
  display: grid; grid-template-columns: 1.15fr 1fr 1fr 1fr;
  gap: 8px; padding: 12px;
}
.ats-profile-mock .apm-stat-card {
  border: 1px solid var(--pp-line); border-radius: 14px;
  padding: 10px 12px; background: #fff;
  display: flex; flex-direction: column; gap: 4px;
  min-height: 64px; justify-content: center;
}
.ats-profile-mock .apm-stat-profile { gap: 1px; }
.ats-profile-mock .apm-stat-name { font-weight: 700; font-size: 13px; color: var(--pp-fg-1); }
.ats-profile-mock .apm-stat-role { font-size: 11px; color: var(--pp-fg-3); }
.ats-profile-mock .apm-stat-meta {
  font-size: 10.5px; font-weight: 600; color: var(--pp-purple-600);
  margin-top: 4px; letter-spacing: .02em;
}
.ats-profile-mock .apm-stat-icon-row { display: flex; align-items: center; gap: 8px; }
.ats-profile-mock .apm-stat-icon {
  width: 22px; height: 22px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ats-profile-mock .apm-stat-icon-warn  { background: var(--pp-warning-bg); color: #A06D05; }
.ats-profile-mock .apm-stat-icon-up    { background: var(--pp-success-bg); color: var(--pp-success-on-bg); }
.ats-profile-mock .apm-stat-icon-thumb { background: var(--pp-success-bg); color: var(--pp-success-on-bg); }
.ats-profile-mock .apm-stat-value { display: flex; align-items: baseline; gap: 1px; }
.ats-profile-mock .apm-stat-num {
  font-family: var(--pp-font-display); font-weight: 800;
  font-size: 20px; line-height: 1; letter-spacing: -.02em; color: var(--pp-fg-1);
}
.ats-profile-mock .apm-stat-suffix {
  font-family: var(--pp-font-display); font-weight: 700;
  font-size: 13px; color: var(--pp-fg-3);
}
.ats-profile-mock .apm-stat-label {
  font-size: 9.5px; font-weight: 700; color: var(--pp-fg-4);
  letter-spacing: .06em; text-transform: uppercase;
}

.ats-profile-mock .apm-stats:first-child { padding-top: 14px; }
.ats-profile-mock .apm-body {
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: 14px; padding: 4px 12px 16px;
}
.ats-profile-mock .apm-section + .apm-section { margin-top: 14px; }
.ats-profile-mock .apm-section-title {
  font-size: 10.5px; font-weight: 700; color: var(--pp-fg-4);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px;
}
.ats-profile-mock .apm-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ats-profile-mock .apm-tag {
  background: var(--pp-purple-50); color: var(--pp-purple-700);
  font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--pp-purple-200);
}
.ats-profile-mock .apm-edu { font-size: 12.5px; color: var(--pp-fg-1); line-height: 1.45; }
.ats-profile-mock .apm-edu strong { font-weight: 600; }
.ats-profile-mock .apm-edu-meta { font-size: 11.5px; color: var(--pp-fg-4); margin-top: 2px; }

.ats-profile-mock .apm-radar {
  background: #fff; border: 1px solid var(--pp-line); border-radius: 14px;
  padding: 6px; height: 100%;
  display: flex; align-items: center;
}
.ats-profile-mock .apm-radar svg { width: 100%; height: auto; display: block; }

/* Score polygon scales out from the chart center when the card scrolls into
   view. Using transform-box: view-box so transform-origin reads in SVG
   coordinates (140,110) instead of CSS-pixel space. */
.ats-profile-mock .apm-radar-poly {
  transform: scale(0);
  transform-origin: 140px 110px;
  transform-box: view-box;
  opacity: 0;
  transition:
    transform 1.05s cubic-bezier(.34, 1.4, .64, 1) .15s,
    opacity .55s ease-out .15s;
}
.ats-profile-mock.is-radar-in .apm-radar-poly {
  transform: scale(1);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .ats-profile-mock .apm-radar-poly {
    transition: none;
    transform: scale(1);
    opacity: 1;
  }
}

.ats-profile-mock .apm-footer {
  display: grid; grid-template-columns: 1.45fr 1fr;
  gap: 12px; padding: 12px 16px 14px;
  border-top: 1px solid var(--pp-line);
  align-items: center;
}
.ats-profile-mock .apm-pipeline { display: flex; align-items: flex-start; gap: 4px; }
.ats-profile-mock .apm-pipeline-step {
  display: flex; flex-direction: column; align-items: center; gap: 5px; flex-shrink: 0;
}
.ats-profile-mock .apm-pipeline-dot {
  width: 24px; height: 24px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pp-bg-subtle); color: var(--pp-fg-4);
}
.ats-profile-mock .apm-pipeline-step.is-done .apm-pipeline-dot {
  background: var(--pp-success-bg); color: var(--pp-success-on-bg);
}
.ats-profile-mock .apm-pipeline-step.is-current .apm-pipeline-dot {
  background: var(--pp-warning-bg); color: #A06D05;
}
.ats-profile-mock .apm-pipeline-line {
  flex: 1; min-width: 14px; height: 0;
  border-top: 1.5px dashed var(--pp-line); margin-top: 12px;
}
.ats-profile-mock .apm-pipeline-label {
  font-size: 9.5px; font-weight: 600; color: var(--pp-fg-3);
  text-align: center; line-height: 1.2;
}
.ats-profile-mock .apm-pipeline-step.is-done .apm-pipeline-label { color: var(--pp-success); }
.ats-profile-mock .apm-pipeline-step.is-current .apm-pipeline-label { color: #A06D05; }

.ats-profile-mock .apm-feedback {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.ats-profile-mock .apm-stars { display: flex; gap: 2px; }
.ats-profile-mock .apm-feedback-label {
  font-size: 10.5px; font-weight: 700; color: #B8860B; letter-spacing: .04em;
}

@media (max-width: 720px) {
  .ats-profile-mock .apm-stats { grid-template-columns: 1fr 1fr; }
  .ats-profile-mock .apm-body { grid-template-columns: 1fr; }
  .ats-profile-mock .apm-footer {
    grid-template-columns: 1fr; gap: 14px;
  }
  .ats-profile-mock .apm-feedback { align-items: flex-start; }
}

/* ---- Rich mock cards (DPDP, Interviews, Assessment, Offer) ----
   Follows the index design language: bare colored SVG icons (no filled
   background chips), neutral stat tiles, and small pill badges that
   match the .payroll-row-status pattern. */
.mock-card.is-rich .mock-rich-rows {
  padding: 0 22px 18px;
  display: flex; flex-direction: column;
}
.mock-rich-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 12px 0;
  border-bottom: 1px solid var(--pp-line);
}
.mock-rich-row:last-child { border-bottom: none; }
.mock-rich-row-left {
  display: flex; align-items: center; gap: 12px;
  min-width: 0; flex: 1;
}
.mock-rich-row-icon {
  flex-shrink: 0; display: inline-flex;
  align-items: center; justify-content: center;
}
.mock-rich-row-text { min-width: 0; }
.mock-rich-label {
  font-size: 14px; font-weight: 600; color: var(--pp-fg-2);
  line-height: 1.3;
}
.mock-rich-sub {
  font-size: 11.5px; color: var(--pp-fg-4); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mock-rich-row-right {
  display: flex; align-items: center; gap: 10px;
  /* flex-shrink:0 was causing the right cell's long values
     ("9.2 / 10 (9 yrs Python + Go backend)") to push past the viewport on
     320px phones (iPhone SE / Galaxy S9+ portrait). Allow shrink with a
     min-width: 0 so the text can ellipsis instead of overflow. */
  flex-shrink: 1; min-width: 0;
}
.mock-rich-value {
  font-size: 14px; font-weight: 600; color: var(--pp-fg-1);
  font-variant-numeric: tabular-nums; line-height: 1.3;
  /* Truncate when the cell shrinks below the value's intrinsic width. */
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mock-rich-status {
  font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px;
}
.mock-rich-status.is-success { background: var(--pp-success-bg); color: #0a6e36; }
.mock-rich-status.is-info    { background: var(--pp-info-bg);    color: var(--pp-info-on-bg); }
.mock-rich-status.is-warn    { background: var(--pp-warning-bg); color: var(--pp-warning-on-bg); }
.mock-rich-status.is-purple  { background: var(--pp-purple-50);  color: var(--pp-purple-700); }
.mock-rich-status.is-muted   { background: var(--pp-bg-subtle);  color: var(--pp-fg-3); }

/* ---- Audit log card (ATS tenant security section) ----
   Reads like a real log viewer: filter chips, monospace timestamp +
   action code, contextual meta line, color-graded risk pills, and a
   footer with event count. Stays inside the .mock-card chrome so it
   matches every other rich card on the marketing site. */
.mock-pill.is-live {
  color: var(--pp-fg-2); background: #fff;
  border-color: var(--pp-line);
}
.audit-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--pp-success);
  box-shadow: 0 0 0 0 rgba(53, 174, 99, .6);
  animation: audit-pulse 1.8s ease-out infinite;
  flex-shrink: 0;
}
@keyframes audit-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(53, 174, 99, .55); }
  70%  { box-shadow: 0 0 0 10px rgba(53, 174, 99, 0); }
  100% { box-shadow: 0 0 0 0 rgba(53, 174, 99, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .audit-live-dot { animation: none; }
}
.audit-filters {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 12px 22px 0;
}
.audit-chip {
  font-size: 11.5px; font-weight: 600; color: var(--pp-fg-3);
  background: var(--pp-bg-subtle); border: 1px solid var(--pp-line);
  padding: 4px 10px; border-radius: 999px; line-height: 1.3;
}
.audit-chip.is-active {
  color: var(--pp-purple-700); background: var(--pp-purple-50);
  border-color: var(--pp-purple-200);
}
.audit-rows {
  list-style: none; margin: 0;
  padding: 6px 22px 14px;
  display: flex; flex-direction: column;
}
.audit-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 14px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--pp-line);
}
.audit-row:last-child { border-bottom: none; }
.audit-time {
  font-family: var(--pp-font-mono);
  font-size: 12px; font-weight: 600; color: var(--pp-fg-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em; white-space: nowrap;
}
.audit-body { min-width: 0; }
.audit-action {
  font-size: 13.5px; line-height: 1.35; color: var(--pp-fg-2);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  min-width: 0;
}
.audit-code {
  font-family: var(--pp-font-mono);
  font-size: 12.5px; font-weight: 600;
  color: var(--pp-purple-700);
  background: var(--pp-purple-50);
  border: 1px solid var(--pp-purple-200);
  padding: 1px 7px; border-radius: 6px;
  white-space: nowrap;
}
.audit-subject {
  font-weight: 700; color: var(--pp-fg-1);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.audit-meta {
  font-size: 11.5px; color: var(--pp-fg-4); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.audit-risk {
  font-family: var(--pp-font-mono);
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  padding: 3px 8px; border-radius: 5px;
  white-space: nowrap; flex-shrink: 0;
}
.audit-risk.is-low  { background: var(--pp-bg-subtle);  color: var(--pp-fg-3); border: 1px solid var(--pp-line); }
.audit-risk.is-med  { background: var(--pp-warning-bg); color: #8a5a05; }
.audit-risk.is-high { background: var(--pp-danger-bg);  color: #9a2c22; }
@media (max-width: 540px) {
  .audit-filters { padding: 10px 16px 0; }
  .audit-rows { padding: 4px 16px 12px; }
  .audit-row {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "time risk"
      "body body";
    gap: 4px 12px;
  }
  .audit-time { grid-area: time; }
  .audit-risk { grid-area: risk; justify-self: end; }
  .audit-body { grid-area: body; }
  .audit-meta { white-space: normal; }
}

/* ---- Multi-round interview pipeline card (ATS feature) ----
   Three rounds, three lifecycle states: complete (green check + feedback
   string + star rating), in-progress (pulsing number + live progress
   bar), scheduled (neutral number + invite-sent meta). Reads like a
   real candidate pipeline view, not a feature checklist. */
.mock-card.is-rounds .round-list {
  list-style: none; margin: 0;
  padding: 8px 22px 14px;
  display: flex; flex-direction: column;
}
.round-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: start; gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--pp-line);
}
.round-row:last-child { border-bottom: none; }
.round-num {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--pp-font-display);
  font-weight: 700; font-size: 14px;
  background: var(--pp-bg-subtle); color: var(--pp-fg-3);
  border: 1px solid var(--pp-line);
  position: relative; flex-shrink: 0;
  margin-top: 1px;
}
.round-row.is-done .round-num {
  background: var(--pp-success-bg); color: #0a6e36;
  border-color: transparent;
}
.round-row.is-live .round-num {
  background: var(--pp-purple-50); color: var(--pp-purple-700);
  border-color: var(--pp-purple-200);
}
.round-num-pulse {
  position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid var(--pp-purple-500);
  animation: round-pulse 1.6s ease-out infinite;
}
@keyframes round-pulse {
  0%   { transform: scale(.85); opacity: .9; }
  100% { transform: scale(1.25); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .round-num-pulse { animation: none; opacity: .6; }
}
.round-body { min-width: 0; }
.round-name {
  font-size: 14px; font-weight: 700; color: var(--pp-fg-1);
  line-height: 1.3;
}
.round-meta {
  font-size: 12px; color: var(--pp-fg-4); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.round-meta-sub {
  font-size: 11.5px; color: var(--pp-fg-4); margin-top: 6px;
  line-height: 1.45;
}
.round-feedback {
  margin-top: 8px; padding: 8px 10px; border-radius: 8px;
  background: var(--pp-success-bg);
  display: flex; flex-direction: column; gap: 3px;
}
.round-rating {
  font-size: 12px; font-weight: 700; color: #0a6e36;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.round-feedback-text {
  font-size: 12px; color: #0a6e36; line-height: 1.4;
  font-style: italic;
}
.round-progress {
  margin-top: 8px; height: 6px; border-radius: 999px;
  background: var(--pp-purple-50);
  overflow: hidden;
}
.round-progress-bar {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--pp-purple-500), var(--pp-purple-700));
  border-radius: inherit;
  transition: width .3s ease;
}
.round-progress-meta {
  font-size: 11.5px; color: var(--pp-purple-700);
  font-weight: 600; margin-top: 5px;
}
.round-status {
  font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  white-space: nowrap; flex-shrink: 0;
  letter-spacing: .02em;
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 1px;
}
.round-status.is-done      { background: var(--pp-success-bg); color: #0a6e36; }
.round-status.is-live      { background: var(--pp-purple-50);  color: var(--pp-purple-700); border: 1px solid var(--pp-purple-200); }
.round-status.is-scheduled { background: var(--pp-bg-subtle);  color: var(--pp-fg-3);       border: 1px solid var(--pp-line); }
.round-status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pp-purple-600);
  box-shadow: 0 0 0 0 rgba(124, 58, 237, .55);
  animation: round-status-pulse 1.6s ease-out infinite;
}
@keyframes round-status-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(124, 58, 237, .55); }
  70%  { box-shadow: 0 0 0 6px rgba(124, 58, 237, 0); }
  100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .round-status-dot { animation: none; }
}
@media (max-width: 540px) {
  .mock-card.is-rounds .round-list { padding: 4px 16px 12px; }
  .round-row {
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 4px 12px;
  }
  .round-num { grid-row: 1; grid-column: 1; width: 28px; height: 28px; font-size: 13px; }
  .round-body { grid-row: 1; grid-column: 2; }
  .round-status { grid-row: 2; grid-column: 2; justify-self: start; margin-top: 8px; }
  .round-meta { white-space: normal; }
}

/* ---- Joining documents checklist card (ATS document collection) ----
   Per-row icon + name + meta (size, validation note, timestamp) + a
   Received / Reupload / Pending status pill. Story: most docs in,
   one needs reupload with a reason, one still pending. */
.mock-card.is-doc .doc-list {
  list-style: none; margin: 0;
  padding: 6px 22px 14px;
  display: flex; flex-direction: column;
}
.doc-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--pp-line);
}
.doc-row:last-child { border-bottom: none; }
.doc-icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.doc-row.is-done    .doc-icon { color: var(--pp-success); }
.doc-row.is-warn    .doc-icon { color: var(--pp-warning); }
.doc-row.is-pending .doc-icon { color: var(--pp-fg-4); }
.doc-body { min-width: 0; }
.doc-name {
  font-size: 13.5px; font-weight: 700; color: var(--pp-fg-1);
  line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.doc-meta {
  font-size: 11.5px; color: var(--pp-fg-4); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.doc-status {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 999px;
  white-space: nowrap; flex-shrink: 0;
}
.doc-status.is-done    { background: var(--pp-success-bg); color: #0a6e36; }
.doc-status.is-warn    { background: var(--pp-warning-bg); color: #8a5a05; }
.doc-status.is-pending { background: var(--pp-bg-subtle);  color: var(--pp-fg-3); border: 1px solid var(--pp-line); }
@media (max-width: 540px) {
  .mock-card.is-doc .doc-list { padding: 4px 16px 12px; }
  .doc-row {
    grid-template-columns: 20px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 10px;
  }
  .doc-icon { grid-row: 1; grid-column: 1; }
  .doc-body { grid-row: 1; grid-column: 2; }
  .doc-status {
    grid-row: 2; grid-column: 2; justify-self: start;
    margin-top: 6px;
  }
  .doc-meta { white-space: normal; }
}

/* ---- Background verification matrix card (ATS pre-joining checks) ----
   Five categories, each with method + verifier captured per row, plus
   a status pill (Verified / In progress / Flagged). Flagged rows can
   carry a note line so the reason is visible, not buried. */
.mock-card.is-bgv .bgv-list {
  list-style: none; margin: 0;
  padding: 6px 22px 14px;
  display: flex; flex-direction: column;
}
.bgv-row {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) auto;
  align-items: start; gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--pp-line);
}
.bgv-row:last-child { border-bottom: none; }
.bgv-cat {
  font-size: 12px; font-weight: 700; color: var(--pp-fg-3);
  text-transform: uppercase; letter-spacing: .06em;
  padding-top: 1px;
}
.bgv-body { min-width: 0; }
.bgv-method {
  font-size: 13.5px; font-weight: 700; color: var(--pp-fg-1);
  line-height: 1.3;
}
.bgv-verifier {
  font-size: 11.5px; color: var(--pp-fg-4); margin-top: 2px;
}
.bgv-note {
  margin-top: 6px; padding: 6px 10px; border-radius: 6px;
  background: var(--pp-danger-bg);
  font-size: 11.5px; color: #9a2c22; line-height: 1.4;
}
.bgv-status {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 999px;
  white-space: nowrap; flex-shrink: 0;
  margin-top: 1px;
}
.bgv-status.is-done { background: var(--pp-success-bg); color: #0a6e36; }
.bgv-status.is-flag { background: var(--pp-danger-bg);  color: #9a2c22; }
.bgv-status.is-live {
  background: var(--pp-purple-50); color: var(--pp-purple-700);
  border: 1px solid var(--pp-purple-200);
}
@media (max-width: 540px) {
  .mock-card.is-bgv .bgv-list { padding: 4px 16px 12px; }
  .bgv-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
  }
  .bgv-cat { grid-row: 1; grid-column: 1; }
  .bgv-status { grid-row: 1; grid-column: 2; justify-self: end; }
  .bgv-body { grid-row: 2; grid-column: 1 / -1; margin-top: 6px; }
}

/* ---- Behavioural-signals admin view (ATS screening section) ----
   Each signal gets a visualization in its native shape: per-question
   bars for paste %, sparkline for time-to-answer distribution, event
   timeline for tab-switches, dot grid for AI-content per-answer. The
   value sits next to the label, threshold context below, and a small
   verdict pill on the right of the foot row. */
.bsig-list {
  list-style: none; margin: 0;
  padding: 6px 22px 14px;
  display: flex; flex-direction: column;
}
.bsig-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--pp-line);
}
.bsig-row:last-child { border-bottom: none; }
.bsig-head {
  display: flex; align-items: baseline;
  gap: 10px;
}
.bsig-label {
  font-size: 13.5px; font-weight: 700; color: var(--pp-fg-1);
  flex: 1; min-width: 0;
}
.bsig-value {
  font-family: var(--pp-font-display); font-weight: 700;
  font-size: 15px; color: var(--pp-fg-1); letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bsig-pill {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 999px;
  white-space: nowrap; flex-shrink: 0;
  align-self: center;
}
.bsig-pill.is-ok   { background: var(--pp-success-bg); color: #0a6e36; }
.bsig-pill.is-warn { background: var(--pp-warning-bg); color: #8a5a05; }
.bsig-pill.is-bad  { background: var(--pp-danger-bg);  color: #9a2c22; }

/* Per-question bar chart */
.bsig-bars {
  margin-top: 10px;
  display: flex; align-items: flex-end;
  gap: 5px; height: 44px;
  padding: 2px 0;
}
.bsig-bar {
  flex: 1; min-height: 2px;
  background: var(--pp-success);
  border-radius: 2px 2px 0 0;
  opacity: .85;
}
.bsig-bar.is-warn { background: var(--pp-warning); opacity: 1; }
.bsig-bar.is-bad  { background: var(--pp-danger);  opacity: 1; }

/* Sparkline */
.bsig-spark {
  display: block;
  margin-top: 9px;
  width: 100%; height: 32px;
}

/* Event timeline */
.bsig-timeline {
  position: relative;
  margin-top: 12px; height: 30px;
}
.bsig-timeline-track {
  position: absolute; top: 9px; left: 0; right: 0; height: 2px;
  background: var(--pp-bg-subtle); border-radius: 2px;
}
.bsig-timeline-mark {
  position: absolute; top: 4px; width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--pp-warning);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--pp-warning);
  transform: translateX(-50%);
}
.bsig-timeline-mark::after {
  content: attr(data-t);
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  font-family: var(--pp-font-mono);
  font-size: 9.5px; font-weight: 600; color: var(--pp-warning);
  white-space: nowrap;
}
.bsig-timeline-axis {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; justify-content: space-between;
  font-family: var(--pp-font-mono);
  font-size: 9.5px; color: var(--pp-fg-4);
  font-variant-numeric: tabular-nums;
}

/* Dot grid */
.bsig-dots {
  margin-top: 10px;
  display: flex; gap: 6px; flex-wrap: wrap;
}
.bsig-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--pp-bg-subtle);
  border: 1px solid var(--pp-line);
}
.bsig-dot.is-ok   { background: var(--pp-success); border-color: transparent; }
.bsig-dot.is-warn { background: var(--pp-warning); border-color: transparent; }
.bsig-dot.is-bad  { background: var(--pp-danger);  border-color: transparent; }

@media (max-width: 540px) {
  .bsig-list { padding: 4px 16px 12px; }
}

/* Top stat strip — mirrors .payroll-stats / .payroll-stat */
.mock-rich-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; padding: 18px 22px 6px;
}
.mock-rich-stats.is-2col { grid-template-columns: 1fr 1fr; }
.mock-rich-stat {
  padding: 12px 14px; border-radius: 12px;
  background: var(--pp-bg-subtle); border: 1px solid var(--pp-line);
}
.mock-rich-stat-value {
  font-family: var(--pp-font-display); font-weight: 800;
  font-size: 22px; color: var(--pp-fg-1); letter-spacing: -.02em;
  line-height: 1;
}
.mock-rich-stat-suffix {
  font-family: var(--pp-font-display); font-weight: 700;
  font-size: 13px; color: var(--pp-fg-3);
}
.mock-rich-stat-label {
  font-size: 11.5px; color: var(--pp-fg-4); margin-top: 6px;
  font-weight: 500;
}

/* DPDP compliance status strip — matches the neutral tile language */
.dpdp-strip {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 10px; padding: 18px 22px 6px;
}
.dpdp-strip-tile {
  padding: 10px 12px; border-radius: 12px;
  background: var(--pp-bg-subtle); border: 1px solid var(--pp-line);
  display: flex; align-items: center; gap: 9px;
}
.dpdp-strip-text {
  font-size: 12px; font-weight: 600; color: var(--pp-fg-2); line-height: 1.25;
}

/* Interview scheduling: self-vs-manual bar */
.intv-distribution { padding: 4px 22px 14px; }
.intv-distribution-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; color: var(--pp-fg-3); margin-bottom: 8px;
}
.intv-distribution-head strong { color: var(--pp-fg-1); font-weight: 700; }
.intv-bar {
  height: 10px; border-radius: 999px; overflow: hidden;
  display: flex; gap: 2px; background: var(--pp-bg-muted);
}
.intv-bar > span { display: block; height: 100%; }
.intv-bar-self   { background: var(--pp-purple-600); }
.intv-bar-manual { background: var(--pp-purple-300); }
.intv-legend {
  display: flex; gap: 18px; margin-top: 8px;
  font-size: 11.5px; color: var(--pp-fg-3);
}
.intv-legend-swatch {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  margin-right: 6px; vertical-align: middle;
}

/* Assessment live indicator — neutral tile, pulsing red dot only */
.asmt-live {
  margin: 18px 22px 0;
  padding: 10px 14px; border-radius: 12px;
  background: var(--pp-bg-subtle); border: 1px solid var(--pp-line);
  display: flex; align-items: center; gap: 12px;
}
.asmt-live-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--pp-danger); position: relative; flex-shrink: 0;
}
.asmt-live-dot::after {
  content: ''; position: absolute; inset: -3px;
  border-radius: inherit; border: 2px solid var(--pp-danger);
  opacity: .35; animation: asmt-pulse 1.8s ease-out infinite;
}
@keyframes asmt-pulse {
  0%   { transform: scale(.7); opacity: .55; }
  100% { transform: scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .asmt-live-dot::after { animation: none; }
}
.asmt-live-text {
  font-size: 12px; font-weight: 700; color: var(--pp-fg-1);
  letter-spacing: .04em;
}
.asmt-live-meta {
  font-size: 11.5px; color: var(--pp-fg-4); margin-left: auto;
}

/* Offer CTC: heading bar + stacked composition + swatch rows */
.offer-bar-wrap { padding: 18px 22px 6px; }
.offer-bar-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
}
.offer-bar-total-num {
  font-family: var(--pp-font-display); font-weight: 800;
  font-size: 26px; color: var(--pp-fg-1); letter-spacing: -.025em; line-height: 1;
}
.offer-bar-total-label {
  font-size: 11.5px; color: var(--pp-fg-4); font-weight: 500;
}
.offer-bar {
  height: 10px; border-radius: 999px; overflow: hidden;
  display: flex; gap: 1px; background: var(--pp-line);
}
.offer-bar > span { display: block; height: 100%; }
.offer-seg-basic    { background: var(--pp-purple-700); }
.offer-seg-hra      { background: var(--pp-purple-500); }
.offer-seg-special  { background: var(--pp-info); }
.offer-seg-pf       { background: var(--pp-success); }
.offer-seg-gratuity { background: var(--pp-warning); }
.offer-seg-variable { background: #C2569B; }
.offer-swatch {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .dpdp-strip { grid-template-columns: 1fr; }
  .mock-rich-stats { grid-template-columns: 1fr 1fr; }
  .mock-rich-row { gap: 10px; }
  .mock-rich-sub { white-space: normal; }
}

/* ---- HRMS Profile mock (Core HR · employee detail page) ----
   Mirrors the product Profile screen: chrome-style title bar, left rail
   with avatar + identity card, right side with Work Information + Statutory
   key/value grids. */
.hrms-profile-mock .hpm-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 22px; border-bottom: 1px solid var(--pp-line);
}
.hrms-profile-mock .hpm-back {
  width: 24px; height: 24px; border-radius: 999px;
  background: var(--pp-bg-subtle); border: 1px solid var(--pp-line);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--pp-fg-3); flex-shrink: 0;
}
.hrms-profile-mock .hpm-title {
  font-family: var(--pp-font-display);
  font-weight: 800; font-style: italic;
  font-size: 17px; letter-spacing: -.01em;
  color: var(--pp-fg-1); flex: 1;
  text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.hrms-profile-mock .hpm-tab {
  padding: 5px 12px; border-radius: 999px;
  background: #fff; border: 1px solid var(--pp-line);
  font-size: 11px; font-weight: 600; color: var(--pp-fg-2);
  flex-shrink: 0;
}
.hrms-profile-mock .hpm-body {
  display: grid; grid-template-columns: 38% 1fr;
}
.hrms-profile-mock .hpm-side {
  padding: 18px 14px;
  border-right: 1px solid var(--pp-line);
  background: var(--pp-bg-subtle);
  display: flex; flex-direction: column; align-items: stretch; gap: 12px;
}
.hrms-profile-mock .hpm-avatar {
  width: 96px; height: 96px; border-radius: 999px; align-self: center;
  background: linear-gradient(135deg, var(--pp-purple-500), var(--pp-purple-700));
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--pp-font-display); font-weight: 800; font-size: 30px;
  letter-spacing: -.02em;
  object-fit: cover; overflow: hidden;
}
.hrms-profile-mock .hpm-id-card {
  background: #fff; border: 1px solid var(--pp-line); border-radius: 12px;
  padding: 12px;
}
.hrms-profile-mock .hpm-role {
  font-size: 13px; font-weight: 700; color: var(--pp-fg-1); text-align: center;
  margin-bottom: 10px;
  padding-bottom: 10px; border-bottom: 1px solid var(--pp-line);
}
.hrms-profile-mock .hpm-meta-row {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 5px 0;
}
.hrms-profile-mock .hpm-meta-row + .hpm-meta-row { border-top: 1px dashed var(--pp-line); }
.hrms-profile-mock .hpm-meta-icon { color: var(--pp-fg-3); flex-shrink: 0; }
.hrms-profile-mock .hpm-meta-text { min-width: 0; flex: 1; }
.hrms-profile-mock .hpm-meta-label {
  font-size: 9px; font-weight: 700;
  color: var(--pp-fg-4); text-transform: uppercase; letter-spacing: .06em;
  line-height: 1.2;
}
.hrms-profile-mock .hpm-meta-value {
  font-size: 12px; font-weight: 600; color: var(--pp-fg-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 1px;
}
.hrms-profile-mock .hpm-info { padding: 18px 22px; }
.hrms-profile-mock .hpm-section-title {
  font-size: 13.5px; font-weight: 700; color: var(--pp-fg-1);
  margin-bottom: 10px;
}
.hrms-profile-mock .hpm-section + .hpm-section { margin-top: 14px; }
.hrms-profile-mock .hpm-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px 14px;
}
.hrms-profile-mock .hpm-key {
  font-size: 9.5px; font-weight: 700;
  color: var(--pp-fg-4); text-transform: uppercase; letter-spacing: .06em;
  display: flex; align-items: center; gap: 5px;
}
.hrms-profile-mock .hpm-val {
  font-size: 12.5px; font-weight: 600; color: var(--pp-fg-1); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 720px) {
  .hrms-profile-mock .hpm-body { grid-template-columns: 1fr; }
  .hrms-profile-mock .hpm-side {
    border-right: none; border-bottom: 1px solid var(--pp-line);
  }
  .hrms-profile-mock .hpm-title { font-size: 15px; }
}

/* Payroll Panel */
.payroll-card {
  background: #fff; border-radius: 20px; border: 1px solid var(--pp-line);
  box-shadow: var(--pp-shadow-md); padding: 26px;
}
.payroll-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; }
.payroll-title {
  font-size: 24px; font-weight: 800; color: var(--pp-fg-1); margin-top: 6px;
  font-family: var(--pp-font-display); letter-spacing: -.02em;
}
.payroll-cta {
  background: var(--pp-purple-600); color: #fff; border: none;
  /* 13px vertical padding + 13.5px font + 1.4 line-height ≈ 44px hit area. */
  border-radius: 999px; padding: 13px 18px; font-weight: 600; font-size: 13.5px; min-height: 44px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--pp-shadow-purple);
}
.payroll-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px;
}
/* Wide stats row (used on the HRMS landing page above-the-fold metrics).
   4 cols on desktop, 2 cols on tablet, 1 col on the smallest phones so labels
   like "biometric protocols supported out of the box" never overflow. */
.payroll-stats.stats-4col { grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) {
  .payroll-stats.stats-4col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .payroll-stats.stats-4col { grid-template-columns: 1fr; }
}
.payroll-stat {
  padding: 16px; border-radius: 14px;
  background: var(--pp-bg-subtle); border: 1px solid var(--pp-line);
}
.payroll-stat-label { font-size: 12px; color: var(--pp-fg-4); }
.payroll-stat-value {
  font-family: var(--pp-font-display); font-weight: 800; font-size: 26px;
  color: var(--pp-fg-1); letter-spacing: -.02em; margin-top: 4px;
}
.payroll-rows { display: flex; flex-direction: column; gap: 0; }
.payroll-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--pp-line);
}
.payroll-row:first-child { border-top: 1px solid var(--pp-line); }
.payroll-row-left { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--pp-fg-2); }
.payroll-row-right { display: flex; align-items: center; gap: 14px; }
.payroll-row-amount {
  font-size: 14px; font-weight: 600; color: var(--pp-fg-1); font-variant-numeric: tabular-nums;
}
.payroll-row-status {
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
}
.payroll-row-status.filed { background: var(--pp-success-bg); color: var(--pp-success-on-bg); }
.payroll-row-status.ready { background: var(--pp-warning-bg); color: var(--pp-warning-on-bg); }

/* WFH Panel (dark) */
.wfh-card {
  background: #0B0B0F; border-radius: 20px; border: 1px solid #26262F;
  box-shadow: var(--pp-shadow-lg); padding: 24px; color: #D8D8E0;
}
.wfh-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.wfh-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #8E8E99; }
.wfh-title { font-size: 18px; font-weight: 700; color: #fff; margin-top: 4px; }
.wfh-pill {
  font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px;
  background: rgba(31,174,92,0.14); color: #4DDB89;
  display: inline-flex; align-items: center; gap: 6px;
}
.wfh-pill-dot { width: 6px; height: 6px; border-radius: 999px; background: #4DDB89; }
.wfh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.wfh-col-label { font-size: 13px; color: #8E8E99; margin-bottom: 10px; }
.wfh-heat { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.wfh-heat-day {
  font-size: 10.5px; color: #8E8E99; text-align: center; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
}
.wfh-heat-cell { aspect-ratio: 1; border-radius: 4px; }
.wfh-legend {
  display: flex; gap: 4px; align-items: center;
  margin-top: 14px; font-size: 11px; color: #8E8E99;
}
.wfh-legend-cell { width: 12px; height: 12px; border-radius: 3px; }
.wfh-feed { display: flex; flex-direction: column; gap: 12px; }
.wfh-event { display: flex; align-items: center; gap: 12px; }
.wfh-event-icon {
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
}
.wfh-event-line { flex: 1; font-size: 12.5px; color: #D8D8E0; }
.wfh-event-time { font-size: 11px; color: #8E8E99; font-variant-numeric: tabular-nums; }

/* Quote */
.feature-quote {
  margin: 32px 0 0; padding: 18px 20px; border-left: 3px solid var(--pp-purple-300);
  background: var(--pp-purple-50); border-radius: 0 12px 12px 0;
  font-size: 15px; color: var(--pp-fg-2); line-height: 1.55; font-style: italic;
}
.feature-quote cite {
  display: block; font-style: normal; font-size: 12.5px; color: var(--pp-fg-4);
  margin-top: 8px; font-weight: 500;
}

/* ============== Mobile + Integrations ============== */
.mi-section { padding: 60px 0; background: transparent; }
.mi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.mi-card {
  background: var(--pp-bg-subtle); border: 1px solid var(--pp-line); border-radius: 24px;
  padding: 40px; position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}
.mi-card.is-mobile { padding: 36px; }
.mi-card-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--pp-purple-600); margin-bottom: 14px;
}
.mi-card h3 {
  font-family: var(--pp-font-display); font-weight: 800; font-size: 30px;
  letter-spacing: -.025em; line-height: 1.15; margin: 0 0 12px; color: var(--pp-fg-1);
}
.mi-card p { font-size: 15.5px; line-height: 1.55; margin-bottom: 20px; color: var(--pp-fg-3); }
.mobile-row {
  display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: stretch;
}
.mobile-text { display: flex; flex-direction: column; min-height: 460px; }
.mobile-badges { display: flex; gap: 10px; margin-top: auto; flex-wrap: wrap; }

/* Official App Store / Google Play badges — artwork is brand-locked.
   The badge image carries everything (logo + label), so the wrapping <a>
   only handles sizing, focus ring, and click target. */
.store-badge {
  display: inline-flex; align-items: center;
  cursor: pointer; line-height: 0;
  border-radius: 8px;
}
.store-badge img {
  height: 44px; width: auto; display: block;
}
/* Apple & Google brand guidelines disallow hover/active recolor or transforms.
   Scoped under `.app` to beat `.app a:hover { color: var(--pp-purple-700) }`
   (specificity gotcha — see CLAUDE.md). */
.app .store-badge,
.app .store-badge:hover,
.app .store-badge:focus,
.app .store-badge:active { transition: none; transform: none; filter: none; }

/* Phone mock */
.phone {
  width: 230px; height: 460px; background: #353535; border-radius: 36px;
  padding: 4px; box-shadow: 0 24px 60px rgba(43, 22, 72, 0.25);
  position: relative;
}
.phone-screen {
  background: #fff; border-radius: 32px; height: 100%; overflow: hidden;
  display: flex; flex-direction: column;
}
.phone-greet { padding: 20px 18px 14px; }
.phone-greet-small { font-size: 12px; color: var(--pp-fg-4); }
.phone-greet-name {
  font-size: 19px; font-weight: 800; color: var(--pp-fg-1);
  font-family: var(--pp-font-display); letter-spacing: -.02em;
}
.phone-net {
  margin: 0 14px 12px; padding: 16px; border-radius: 14px;
  background: linear-gradient(135deg, var(--pp-purple-600) 0%, #8757C4 100%);
  color: #fff;
}
.phone-net-eyebrow {
  font-size: 10px; opacity: .85; letter-spacing: .08em; text-transform: uppercase;
}
.phone-net-amount {
  font-size: 24px; font-weight: 800; font-family: var(--pp-font-display);
  letter-spacing: -.02em; margin-top: 2px;
}
.phone-net-meta { font-size: 10.5px; opacity: .85; margin-top: 4px; }
.phone-tiles { padding: 0 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.phone-tile {
  padding: 12px; border-radius: 12px; border: 1px solid var(--pp-line);
  display: flex; flex-direction: column; gap: 6px;
}
.phone-tile-icon {
  width: 28px; height: 28px; border-radius: 8px; background: var(--pp-purple-50);
  color: var(--pp-purple-600); display: flex; align-items: center; justify-content: center;
}
.phone-tile-label { font-size: 12px; font-weight: 600; color: var(--pp-fg-1); }
.phone-today { padding: 14px; margin-top: auto; }
.phone-today-label {
  font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--pp-fg-4); margin-bottom: 8px;
}
.phone-today-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 0;
  font-size: 11.5px; color: var(--pp-fg-2);
}
.phone-today-dot { width: 6px; height: 6px; border-radius: 999px; }

/* Integrations grid. minmax(0, 1fr) lets cells shrink below their intrinsic
   content width, which is required for the ellipsis on .int-tile-name to
   take effect on narrow viewports. min-width:0 on the tile itself ensures
   the flex container doesn't claim more than its grid cell. */
.int-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.int-tile {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: #fff; border: 1px solid var(--pp-line); border-radius: 10px;
  font-size: 13px; font-weight: 500; color: var(--pp-fg-2);
  min-width: 0;
}
.int-tile-fallback {
  width: 18px; height: 18px; border-radius: 4px;
  background: var(--pp-purple-100); color: var(--pp-purple-700);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; flex-shrink: 0;
}
/* min-width:0 lets the flex child shrink past the intrinsic text size so
   the ellipsis truncation can take effect on narrow tiles. Without it,
   names like "Microsoft Teams" or "WhatsApp Business" overflow the tile. */
.int-tile-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }

/* ============== Why Switch ============== */
.why-section { padding: 60px 0; background: transparent; }
/* Tighten the gap between the mi-section and the why-section that follows. */
.mi-section:has(+ .why-section) { padding-bottom: 30px; }
.mi-section + .why-section { padding-top: 30px; }
.why-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 64px; align-items: start; }
.why-head { position: sticky; top: 100px; }
.why-h2 { font-family: var(--pp-font-display); font-weight: 800; font-size: 45px;
  line-height: 1.15; letter-spacing: -.035em; color: var(--pp-fg-1); margin: 0 0 18px; }
.why-lead { font-size: 16px; line-height: 1.6; color: var(--pp-fg-3); margin: 0; }
.why-cards {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--pp-line); border: 1px solid var(--pp-line); border-radius: 20px;
  overflow: hidden;
}
.why-card {
  background: #fff; padding: 28px;
  display: flex; flex-direction: column; gap: 12px; min-height: 200px;
}
.why-card-icon {
  width: 40px; height: 40px; border-radius: 10px; background: var(--pp-purple-50);
  color: var(--pp-purple-600);
  display: flex; align-items: center; justify-content: center;
}
.why-card-title {
  font-size: 17px; font-weight: 700; color: var(--pp-fg-1); letter-spacing: -.01em;
}
.why-card-body { font-size: 14px; line-height: 1.55; color: var(--pp-fg-3); }

/* ============== FAQ ============== */
.faq-section { padding: 60px 0; background: transparent; }
.faq-inner { max-width: 880px; margin: 0 auto; padding: 0 32px; }
.faq-head { text-align: center; margin-bottom: 56px; }
.faq-h2 {
  font-family: var(--pp-font-display); font-weight: 800; font-size: 44px;
  letter-spacing: -.04em; color: var(--pp-fg-1); margin: 0; line-height: 1.15;
}
.faq-list { border-top: 1px solid var(--pp-line); }
.faq-item { border-bottom: 1px solid var(--pp-line); }
.faq-q {
  width: 100%; text-align: left; background: transparent; border: none;
  padding: 24px 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 44px;
}
.faq-q-text { font-size: 17px; font-weight: 600; color: var(--pp-fg-1); }
.faq-q-icon {
  width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--pp-purple-600); flex-shrink: 0;
}
.faq-q-icon line { transition: opacity 200ms ease; }
.faq-item.is-open .faq-q-icon .v { opacity: 0; }
.faq-a {
  font-size: 15px; line-height: 1.65; color: var(--pp-fg-3); max-width: 720px;
}

/* Collapsible FAQ pattern. JS injects .faq-toggle and toggles
   .is-collapsed on .faq-section, mirroring the "View FAQs ⌄" rail. */
.faq-section.is-collapsed .faq-list { display: none; }
.faq-section.is-collapsed .faq-head { margin-bottom: 24px; }
.faq-toggle {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 22px;
  width: 100%; padding: 14px 0; margin: 0;
  background: transparent; border: 0;
  font: inherit; color: var(--pp-fg-1);
  cursor: pointer; appearance: none; -webkit-appearance: none;
}
.faq-toggle::before, .faq-toggle::after {
  content: ''; height: 1px; background: var(--pp-line);
}
.faq-toggle-label {
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
  font-family: var(--pp-font-display); font-weight: 600; font-size: 16px;
  color: var(--pp-fg-1);
  transition: color 180ms ease;
}
.faq-toggle:hover .faq-toggle-label,
.faq-toggle:focus-visible .faq-toggle-label { color: var(--pp-purple-700); }
.faq-toggle:focus { outline: none; }
.faq-toggle:focus-visible {
  outline: 2px solid var(--pp-purple-300); outline-offset: 4px; border-radius: 4px;
}
.faq-toggle-chev { transition: transform 220ms ease; }
.faq-toggle[aria-expanded="true"] .faq-toggle-chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .faq-toggle-chev { transition: none !important; }
}
/* Cancel the global `.app button:hover { transform: translateY(-1px); ... }`
   for FAQ buttons. List items shouldn't bob on hover; the cursor is enough. */
.app .faq-q:hover,
.app .faq-toggle:hover { transform: none; filter: none; }
.app .faq-q:hover .faq-q-text { color: var(--pp-purple-700); }

/* ============== CTA ============== */
/* Clip the section's ::before/::after glows so they can't bleed past the
   section boundary and bleed into the footer. */
.cta-section { padding: 96px 0 80px; background: transparent; overflow: hidden; }
.cta-grid {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr;
  gap: 64px; align-items: start;
}
.cta-lead { max-width: 460px; }
.cta-h2 {
  font-family: var(--pp-font-display); font-weight: 800; font-size: 44px;
  letter-spacing: -.03em; line-height: 1.15; margin: 0 0 16px;
  color: var(--pp-fg-1); text-wrap: balance;
}
.cta-body {
  font-size: 17px; line-height: 1.55; color: var(--pp-fg-3);
  margin: 0 0 28px;
}
.cta-buttons { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* Scoped under .app so we beat the global `.app a:hover { color: purple-700 }` rule.
   See CLAUDE.md "Gotchas" — we got bitten by this with the App Store badge. */
.app .cta-primary,
.app .cta-primary:hover,
.app .cta-primary:focus,
.app .cta-primary:active {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--pp-purple-600); color: #fff; border-radius: 8px;
  padding: 11px 16px 11px 18px; font-weight: 600; font-size: 14.5px;
  border: none; cursor: pointer; text-decoration: none;
  transition: background .15s ease;
  min-height: 44px; box-sizing: border-box;
}
.app .cta-primary:hover { background: var(--pp-purple-700); }
.app .cta-secondary,
.app .cta-secondary:hover,
.app .cta-secondary:focus,
.app .cta-secondary:active {
  display: inline-flex; align-items: center; gap: 4px;
  background: #fff; color: var(--pp-fg-1); border-radius: 8px;
  padding: 11px 18px; font-weight: 600; font-size: 14.5px;
  border: 1px solid var(--pp-line-strong); cursor: pointer; text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
  min-height: 44px; box-sizing: border-box;
}
.app .cta-secondary:hover { background: var(--pp-bg-subtle); }
.cta-card { display: flex; flex-direction: column; gap: 10px; }
.cta-card-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--pp-purple-50);
  color: var(--pp-purple-600);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.cta-card-icon svg { width: 20px; height: 20px; }
.cta-card-title {
  font-family: var(--pp-font-display); font-weight: 700;
  font-size: 18px; color: var(--pp-fg-1); margin: 0;
  letter-spacing: -.01em;
}
.cta-card-body {
  font-size: 15px; line-height: 1.55; color: var(--pp-fg-3); margin: 0;
}
.app .cta-card-link,
.app .cta-card-link:focus,
.app .cta-card-link:active {
  display: inline-flex; align-items: center; gap: 2px;
  color: var(--pp-purple-600); font-weight: 600; font-size: 14.5px;
  text-decoration: none; margin-top: 2px;
}
.app .cta-card-link:hover { color: var(--pp-purple-700); }

/* HDS-style hover arrow — used on every click anchor with a trailing arrow.
   At rest: only the chevron (>) is visible.
   On hover: the chevron slides right and the horizontal stem fades in behind it.
   Inherits color via currentColor. */
.hds-icon-hover-arrow {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  flex-shrink: 0;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
/* path order in markup: 1 = horizontal stem, 2 = chevron */
.hds-icon-hover-arrow path:nth-child(1) {
  opacity: 0;
  transition: opacity .18s ease;
}
.hds-icon-hover-arrow path:nth-child(2) {
  transition: transform .18s ease;
}
/* Hover trigger lives on the parent anchor/button. Descendant selector (not >)
   so the arrow animates even when wrapped in an inner element like
   <span class="pillar-link"> on the resources / index pillar cards. */
a:hover .hds-icon-hover-arrow path:nth-child(1),
button:hover .hds-icon-hover-arrow path:nth-child(1),
.pp-anchor-cta:hover .hds-icon-hover-arrow path:nth-child(1),
.cta-card-link:hover .hds-icon-hover-arrow path:nth-child(1) { opacity: 1; }

a:hover .hds-icon-hover-arrow path:nth-child(2),
button:hover .hds-icon-hover-arrow path:nth-child(2),
.pp-anchor-cta:hover .hds-icon-hover-arrow path:nth-child(2),
.cta-card-link:hover .hds-icon-hover-arrow path:nth-child(2) { transform: translateX(2px); }

/* ============== Subpages ============== */
/* Shared layout for every page below the homepage. The skeleton reuses the
   homepage topbar + footer so the only thing each page needs is its own
   .subpage-hero (eyebrow + h1 + lead + CTA row) and a .subpage-content
   block built from .subpage-card / .subpage-bullets. */
.subpage-hero { padding: 120px 0 64px; position: relative; }
.subpage-hero-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; text-align: center; }
.subpage-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--pp-font-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--pp-purple-700); margin-bottom: 18px;
}
.subpage-eyebrow::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--pp-purple-500);
}
.subpage-h1 {
  font-family: var(--pp-font-display); font-weight: 800;
  font-size: 56px; line-height: 1.15; letter-spacing: -0.04em;
  color: var(--pp-fg-1); margin: 0 auto 22px; max-width: 880px;
  text-wrap: balance;
}
.subpage-lead {
  font-size: 19px; line-height: 1.55; color: var(--pp-fg-3);
  max-width: 720px; margin: 0 auto 28px;
}
.subpage-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.subpage-cta-primary {
  background: var(--pp-purple-600); color: #fff; border-radius: 999px;
  padding: 12px 22px; font-weight: 600; font-size: 14.5px;
  display: inline-flex; align-items: center; gap: 8px;
}
.subpage-cta-primary:hover { background: var(--pp-purple-700); color: #fff; }
.subpage-cta-secondary {
  background: #fff; color: var(--pp-fg-1); border: 1px solid var(--pp-line);
  border-radius: 999px; padding: 12px 22px; font-weight: 600; font-size: 14.5px;
  display: inline-flex; align-items: center; gap: 8px;
}
.subpage-cta-secondary:hover { background: var(--pp-bg-subtle); color: var(--pp-fg-1); }

.subpage-content { padding: 64px 0 96px; position: relative; }
.subpage-content-inner { max-width: 1080px; margin: 0 auto; padding: 0 32px; }
.subpage-section + .subpage-section { margin-top: 64px; }
.subpage-h2 {
  font-family: var(--pp-font-display); font-weight: 800; font-size: 36px;
  line-height: 1.15; letter-spacing: -0.03em; color: var(--pp-fg-1);
  margin: 0 0 16px; text-wrap: balance;
}
.subpage-body { font-size: 17px; line-height: 1.65; color: var(--pp-fg-3); margin: 0 0 18px; }
.subpage-bullets { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 12px; }
.subpage-bullets li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 16px; line-height: 1.55; color: var(--pp-fg-2);
}
.subpage-bullets li::before {
  content: ''; flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px;
  border-radius: 50%; background: var(--pp-purple-100);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C3BAA' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
  background-size: 12px; background-position: center; background-repeat: no-repeat;
}

.subpage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }
.subpage-card {
  background: #fff; border: 1px solid var(--pp-line); border-radius: 16px;
  padding: 24px; display: flex; flex-direction: column; gap: 8px;
}
.subpage-card h3 {
  font-family: var(--pp-font-display); font-weight: 700; font-size: 18px;
  margin: 0; color: var(--pp-fg-1);
}
.subpage-card p { font-size: 14.5px; line-height: 1.55; color: var(--pp-fg-3); margin: 0; }
.subpage-card a { color: var(--pp-purple-700); font-weight: 600; font-size: 13.5px; margin-top: auto; }

.subpage-related { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--pp-line); }
.subpage-related h2 {
  font-family: var(--pp-font-display); font-weight: 700; font-size: 22px;
  margin: 0 0 16px; color: var(--pp-fg-1);
}
.subpage-related ul { list-style: none; padding: 0; margin: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 24px; }
.subpage-related li a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14.5px; color: var(--pp-fg-2); padding: 6px 0;
}
.subpage-related li a:hover { color: var(--pp-purple-700); }

@media (max-width: 720px) {
  .subpage-hero { padding: 80px 0 48px; }
  .subpage-h1 { font-size: 36px; }
  .subpage-lead { font-size: 17px; }
  .subpage-h2 { font-size: 28px; }
  .subpage-grid { grid-template-columns: 1fr; }
}

/* ============== Subpage rich content blocks ============== */
/* Stats strip: 4 numbers above the fold of the body, each with a label.
   Set in display font, with a hairline divider between them. */
.subpage-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; max-width: 1080px; margin: 16px auto 64px;
  padding: 32px; background: #fff; border: 1px solid var(--pp-line);
  border-radius: 24px; box-shadow: 0 18px 60px -32px rgba(60, 30, 110, .15);
}
.subpage-stat { padding: 8px 24px; border-right: 1px solid var(--pp-line); }
.subpage-stat:last-child { border-right: none; }
.subpage-stat-num {
  font-family: var(--pp-font-display); font-weight: 800; font-size: 36px;
  line-height: 1.05; letter-spacing: -0.03em; color: var(--pp-fg-1);
  margin-bottom: 6px;
}
.subpage-stat-label {
  font-size: 13px; line-height: 1.4; color: var(--pp-fg-3); font-weight: 500;
}

/* Two-column block: text on one side, visual placeholder on the other.
   Alternates side automatically by giving every other block .is-flipped. */
.subpage-block {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: center;
  padding: 56px 0; border-top: 1px solid var(--pp-line);
}
.subpage-block:first-of-type { border-top: none; padding-top: 32px; }
.subpage-block.is-flipped .subpage-block-text { order: 2; }
.subpage-block-text h2 {
  font-family: var(--pp-font-display); font-weight: 800;
  font-size: 36px; line-height: 1.15; letter-spacing: -0.025em;
  color: var(--pp-fg-1); margin: 0 0 16px;
}
.subpage-block-text p { font-size: 17px; line-height: 1.65; color: var(--pp-fg-3); margin: 0 0 14px; }
.subpage-block-visual {
  background: linear-gradient(135deg, var(--pp-purple-50), var(--pp-purple-100));
  border: 1px solid var(--pp-line); border-radius: 20px;
  padding: 32px; min-height: 280px;
  display: flex; flex-direction: column; gap: 14px;
}
.subpage-block-stat {
  font-family: var(--pp-font-display); font-weight: 800;
  font-size: 56px; line-height: 1; color: var(--pp-purple-700);
  letter-spacing: -0.04em;
}
.subpage-block-stat-label {
  font-size: 14px; color: var(--pp-fg-3); margin-top: -6px;
}
.subpage-block-visual code, .subpage-block-visual pre {
  font-family: var(--pp-font-mono); font-size: 12.5px;
  background: rgba(255,255,255,0.7); padding: 12px;
  border-radius: 10px; color: var(--pp-fg-2);
  white-space: pre-wrap; line-height: 1.55; margin: 0;
}
.subpage-block-mini {
  background: rgba(255,255,255,0.85); border: 1px solid rgba(108,59,170,0.15);
  border-radius: 12px; padding: 14px 16px;
  display: flex; justify-content: space-between; align-items: center;
}
.subpage-block-mini-label { font-size: 13px; color: var(--pp-fg-3); }
.subpage-block-mini-val { font-family: var(--pp-font-mono); font-size: 13.5px; color: var(--pp-fg-1); font-weight: 600; }

/* Spec / comparison table */
.subpage-table-wrap { margin: 32px 0; overflow-x: auto; border-radius: 16px; border: 1px solid var(--pp-line); }
.subpage-table { width: 100%; border-collapse: collapse; font-size: 14.5px; background: #fff; }
.subpage-table th,
.subpage-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--pp-line); }
.subpage-table thead th {
  background: var(--pp-purple-50); font-weight: 600; color: var(--pp-fg-1);
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em;
}
.subpage-table tbody tr:last-child td { border-bottom: none; }
.subpage-table td.subpage-table-num {
  font-family: var(--pp-font-mono); color: var(--pp-purple-700); font-weight: 600;
}

/* FAQ */
.subpage-faq { margin: 56px 0; }
.subpage-faq h2 {
  font-family: var(--pp-font-display); font-weight: 800; font-size: 32px;
  line-height: 1.15; margin: 0 0 24px; color: var(--pp-fg-1);
}
.subpage-faq details {
  padding: 18px 22px; border: 1px solid var(--pp-line); border-radius: 12px;
  background: #fff; margin-bottom: 10px; transition: box-shadow .2s ease;
}
.subpage-faq details[open] { box-shadow: 0 8px 28px -16px rgba(60,30,110,.18); }
.subpage-faq summary {
  cursor: pointer; font-weight: 600; font-size: 16px; color: var(--pp-fg-1);
  list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.subpage-faq summary::-webkit-details-marker { display: none; }
.subpage-faq summary::after {
  content: '+'; font-size: 22px; font-weight: 300; color: var(--pp-purple-600);
  transition: transform .2s ease;
}
.subpage-faq details[open] summary::after { content: '−'; }
.subpage-faq details p { margin: 14px 0 0; font-size: 15px; line-height: 1.65; color: var(--pp-fg-3); }

/* Testimonial */
.subpage-testimonial {
  margin: 64px auto; max-width: 840px;
  background: #fff; border: 1px solid var(--pp-line); border-radius: 20px;
  padding: 40px; text-align: center;
  box-shadow: 0 24px 60px -32px rgba(60,30,110,.18);
}
.subpage-testimonial blockquote {
  margin: 0 0 20px; font-family: var(--pp-font-display); font-weight: 600;
  font-size: 22px; line-height: 1.4; color: var(--pp-fg-1); letter-spacing: -0.01em;
}
.subpage-testimonial blockquote::before { content: '“'; font-size: 60px; color: var(--pp-purple-300); line-height: 0; vertical-align: -22px; margin-right: 6px; }
.subpage-testimonial cite {
  font-style: normal; font-size: 14px; color: var(--pp-fg-3);
}
.subpage-testimonial cite strong { color: var(--pp-fg-1); font-weight: 600; }

/* Callout — single number with explanation, used for emphasis between blocks */
.subpage-callout {
  margin: 56px 0; padding: 48px 40px;
  background: var(--pp-purple-50); border-radius: 20px;
  display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center;
}
.subpage-callout-num {
  font-family: var(--pp-font-display); font-weight: 800; font-size: 88px;
  line-height: 1; color: var(--pp-purple-700); letter-spacing: -0.04em;
}
.subpage-callout-text h3 {
  font-family: var(--pp-font-display); font-weight: 700; font-size: 22px;
  margin: 0 0 8px; color: var(--pp-fg-1);
}
.subpage-callout-text p { font-size: 15.5px; line-height: 1.6; color: var(--pp-fg-3); margin: 0; }

@media (max-width: 880px) {
  .subpage-stats { grid-template-columns: repeat(2, 1fr); padding: 20px; }
  .subpage-stat { border-right: none; border-bottom: 1px solid var(--pp-line); padding: 16px; }
  .subpage-stat:nth-child(2) { border-right: none; }
  .subpage-stat:nth-last-child(-n+2) { border-bottom: none; }
  .subpage-block { grid-template-columns: 1fr; gap: 32px; padding: 40px 0; }
  .subpage-block.is-flipped .subpage-block-text { order: 0; }
  .subpage-block-text h2 { font-size: 28px; }
  .subpage-callout { grid-template-columns: 1fr; gap: 16px; padding: 32px 24px; text-align: center; }
  .subpage-callout-num { font-size: 64px; }
  .subpage-table { font-size: 13px; }
}

/* ============== Footer ============== */
.footer { background: #101010; color: #D8D8E0; padding: 96px 0 40px; }
.footer-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.footer-grid {
  display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 48px;
  padding-bottom: 64px; border-bottom: 1px solid #26262F;
}
.footer-brand-col { text-align: center; align-self: center; }
.footer-brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 22px; }
.footer-tagline { color: #8E8E99; font-size: 14px; line-height: 1.6; max-width: 280px; margin: 0 auto; }
.footer-col { text-align: center; }
.footer-col-title {
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; margin-bottom: 22px;
}
.footer-col a {
  /* 13px vertical padding + 13.5px font + 1.4 line-height ≈ 45px hit area
     (WCAG 2.5.5 / iOS HIG minimum). Was 8px which produced 32px-tall
     targets that the responsive matrix flagged on every footer column. */
  display: block; color: #8E8E99; font-size: 13.5px; padding: 13px 0; min-height: 44px;
  text-decoration: none; cursor: pointer;
}
.footer-col a:hover { color: #fff; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 36px; font-size: 12.5px; color: #8E8E99;
}
.footer-bottom-right { display: flex; gap: 18px; }

/* ============== Responsive (basic, mobile-first refinements) ============== */
@media (max-width: 960px) {
  .hero-inner,
  .feature-inner.left,
  .feature-inner.right,
  .mi-grid,
  .why-grid,
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  /* On mobile, every feature-section should stack with its text on top
     and the mock card below, regardless of which side the card was on
     in the desktop layout. .feature-inner.right has the mock-card first
     in source order, so we need explicit orders to flip it. */
  .feature-inner.left  .feature-text,
  .feature-inner.right .feature-text { order: 0; }
  .feature-inner.left  .mock-card,
  .feature-inner.right .mock-card  { order: 1; }
  .pillars-grid { grid-template-columns: repeat(2, 1fr); }
  .why-cards { grid-template-columns: 1fr; }
  .int-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-title { font-size: 40px; }
  .pillars-h2, .feature-h2, .why-h2 { font-size: 36px; }
  .cta-section { padding: 64px 0 56px; }
  .cta-grid { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
  .cta-lead { grid-column: 1 / -1; max-width: 560px; }
  .cta-h2 { font-size: 36px; }
  .hero-device { transform: none; }
  .why-head { position: static; }
  .topbar nav.nav-list { display: none; }
  /* !important required because the base .nav-toggle { display:none } rule
     sits later in the file and would otherwise win on equal specificity. */
  .nav-toggle { display: inline-flex !important; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ==========  Phone breakpoint  ==========
   Below 720px we drop the hero decorations (floating callouts, phone mock)
   and tighten typography + spacing. Mobile users don't need the desktop
   "marketing illustration" weight — they need quick scrolling content. */
@media (max-width: 720px) {
  /* Hide non-essential imagery */
  .float-card { display: none !important; }
  .phone { display: none !important; }
  .mobile-row { grid-template-columns: 1fr !important; }
  .mobile-text { min-height: 0 !important; align-items: flex-start; }

  /* Tighter hero */
  .hero { padding-top: 40px; padding-bottom: 24px; }
  .hero-title { font-size: 32px; line-height: 1.05; }
  .hero-body { font-size: 16px; max-width: 100%; }
  .hero-cta-row { gap: 8px; margin-top: 20px; }
  .btn-pill-primary, .btn-pill-secondary { padding: 12px 18px; font-size: 14px; }

  /* Section spacing/typography */
  .section-h2,
  .pillars-h2,
  .feature-h2,
  .why-h2,
  .cta-h2,
  .faq-h2 { font-size: 26px !important; }
  .section-lead { font-size: 16px; }
  .pillars { padding: 36px 0 8px; }
  .pillars-head { margin-bottom: 32px; }
  .feature-section { padding: 40px 0; }
  .feature-inner.left, .feature-inner.right { gap: 28px; }
  .why-section { padding: 40px 0; }
  .faq-section { padding: 40px 0; }
  .cta-section { padding: 40px 0 24px; }
  .cta-grid { grid-template-columns: 1fr; gap: 24px; }
  .cta-h2 { font-size: 26px; }

  /* Container/topbar padding */
  .topbar-inner { height: 56px; padding: 0 16px; }
  .container { padding: 0 16px; }
  .topbar .btn-ghost { display: none; } /* save room */

  /* Mock panels — keep but tighten */
  .mock-card, .payroll-card, .wfh-card { padding: 16px; }
  .candidate-row { grid-template-columns: 32px 1fr 60px; gap: 8px; }
  .candidate-row > :nth-child(3),
  .candidate-row > :nth-child(5) { display: none; }
  .wfh-grid { grid-template-columns: 1fr !important; gap: 16px; }
  .payroll-stats { grid-template-columns: 1fr 1fr; }

  /* Footer grid 1-up */
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-brand-col { order: -1; }

  /* Tap-target safety on phones */
  .pillar-card { min-height: 0; padding: 24px; }

  /* Narrow phones (Galaxy Z Fold folded ~344px etc.) — pillar grid was
     still 2 columns from the 960px breakpoint, leaving 4px of overflow.
     Force single column at phone widths. */
  .pillars-grid { grid-template-columns: 1fr; }
}

/* Tap-target floor for every interactive element. Various CTA selectors
   used 9-12px vertical padding on 13-15px fonts, landing at 32-41px tall.
   46px (not 44) absorbs sub-pixel rounding that left some elements at 43px
   when computed at 44 — the matrix integer-floors and reports 43 < 44 fail.
   Plus broader selector coverage: dropdown nav (.mega-item), legal TOC
   anchors, and form inputs were all under 44 on touch devices.
   NOTE: previously selectors used `.app .X` descendant. Webkit (Safari)
   in some renders ignored the descendant matching for these rules during
   the responsive-matrix test — only bare class selectors applied. Removed
   the .app prefix so the rule matches universally. */
.cta-primary,
.cta-secondary,
.cta-card-link,
.pricing-cta,
.pricing-secondary,
.brand-link,
.btn-pill-primary,
.btn-pill-secondary,
.mobile-nav-cta,
.mobile-nav-signin,
.pillar-link,
.mega-item,
.legal-toc-list a,
.footer-bottom a,
.feature-cta,
.demo-submit,
.pricing-switcher button,
.faq-q,
.pp-anchor-cta,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
textarea,
select {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}
/* Centered text on standalone CTA buttons (not brand-link / pillar-link /
   mega-item which need content-aligned-left). */
.app .cta-primary,
.app .cta-secondary,
.app .pricing-cta,
.app .btn-pill-primary,
.app .btn-pill-secondary,
.app .mobile-nav-cta {
  justify-content: center;
}
/* Form inputs need block-level layout, not inline-flex (the rule above
   gives them inline-flex which collapses their width). Override back. */
.app input[type="text"],
.app input[type="email"],
.app input[type="tel"],
.app input[type="search"],
.app textarea,
.app select {
  display: block;
  padding-block: 12px;
}

/* Drop the decorative section-glow pseudo-elements on every viewport
   below the desktop breakpoint. They use right/left: -200px with width 720
   on each section. body { overflow-x: clip } visually hides any scrollbar,
   but body.scrollWidth still measures the bleed (matrix tests detect ~200px
   overflow on every viewport between 721 and 1440 px). Disabling them up
   to 1440 — matching the .hero-device cutoff at line 2194 — clears the
   measured overflow on tablets and small laptops. The glow rhythm remains
   on desktop ≥1441 px where there's horizontal headroom for the bleed. */
@media (max-width: 1440px) {
  .app > section::before,
  .app > section::after { display: none !important; }
}

/* Disable the hero-device float animation up to 1440px. Its keyframes always
   apply translateX(40px) scale(1.12), which extends the device past the
   container's right column on every viewport up through 1440 (clip ~2–82 px
   depending on size). overflow-x: clip on body would mask it, but the
   dashboard right edge would still be cropped. The floaty flair kicks in only
   on extra-wide monitors (1441+) where the hero-inner is centered with
   enough horizontal headroom for the 1.12 scale to bleed cleanly. */
@media (max-width: 1440px) {
  /* Webkit (Safari) keeps the pp-hero-float keyframes running even with
     `animation: none !important` because keyframes win the cascade. The
     active keyframe at scale(1.12) translate(40px) makes the hero-device
     overflow every iPhone/iPad viewport. Setting animation-name: none AND
     transform: none individually kills both. */
  .hero-device {
    transform: none !important;
    animation: none !important;
    animation-name: none !important;
  }
  /* Hero floating-callout cards are absolutely positioned with right: -40px,
     width: 230px on each card. They sit beside the desktop hero-device
     illustration; on viewports below the desktop breakpoint they spill 3-11px
     past the viewport (rightEdgeOverflow). Hide them at the same cutoff so
     the responsive matrix sees no bleed. */
  .float-card { display: none !important; }
}
/* Universal horizontal overflow clip. Catches the hero device's scale(1.12)
   transform on tablet sizes (~800–1280 px), the decorative section-glow
   pseudos, and any future decorative bleed. overflow-x: clip is preferred
   (no scroll container, doesn't break position: sticky); falls back to
   hidden on older browsers that don't support clip. */
html, body { overflow-x: hidden; overflow-x: clip; }

/* Per-section overflow clip. body { overflow-x: clip } visually masks any
   horizontal scrollbar but body.scrollWidth still measures decorative bleed
   from section-glow pseudo-elements (each ::before/::after extends right:-200px
   past section bounds). On desktop ≥1441px the glow rule re-enables, and the
   bleed re-extends scrollWidth — matrix flags the same overflow ~200px on
   every desktop viewport. Clipping at the section level contains each glow
   to its section, so document scrollWidth no longer reflects the decoration. */
.app > section { overflow-x: clip; }

/* Constrain hero device image to viewport on mobile breakpoints.
   Without this, the 1400px-wide image pushes past the right edge and
   triggers horizontal scroll plus elements-past-right-edge failures on
   every phone in the responsive matrix. Applied at the broad mobile
   range so iPhone SE (320px), iPhone XR (414px), and small Androids
   all stay within their viewports. */
@media (max-width: 720px) {
  .hero-device,
  .hero-device-img-wrap,
  .hero-device-img-wrap > picture,
  .hero-device-img-wrap img.hero-device-img { max-width: 100%; height: auto; }
}

/* Tiny phones */
@media (max-width: 380px) {
  .hero-title { font-size: 28px; }
  .topbar .btn-primary { padding: 8px 14px; font-size: 12.5px; }
  .container { padding: 0 14px; }
}

/* ==========  Hamburger button  ==========
   Visible only at <=960px (set in the block above). */
.nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  /* Was 40×40 — under the 44px touch-target minimum. Bumped to 44 so
     the matrix touchTargets check clears on Galaxy/Surface Duo phones.
     min-width/min-height guards against sub-pixel border rounding that
     made the rendered box 43px wide on some Android viewports. */
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 8px;
  border: 1px solid var(--pp-line);
  background: #fff; cursor: pointer;
  flex-direction: column; gap: 4px;
  margin-left: 4px;
}
.nav-toggle-bar {
  display: block; width: 18px; height: 2px;
  background: var(--pp-fg-1); border-radius: 2px;
  transition: transform .18s ease, opacity .18s ease;
}
.topbar.is-open .nav-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.topbar.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.topbar.is-open .nav-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.topbar-actions { display: flex; align-items: center; gap: 4px; }

/* ==========  Mobile drawer  ==========
   Collapses to height 0 by default. .topbar.is-open expands it. */
.mobile-nav {
  display: none;
  flex-direction: column;
  padding: 8px 16px 16px;
  background: #fff;
  border-bottom: 1px solid var(--pp-line);
}
.mobile-nav a {
  padding: 14px 12px;
  font-size: 16px; font-weight: 500; color: var(--pp-fg-1);
  border-bottom: 1px solid var(--pp-line);
}
.mobile-nav a:last-child { border-bottom: none; }
.mobile-nav-cta {
  margin-top: 12px; background: var(--pp-purple-600); color: #fff !important;
  border-radius: 999px; text-align: center; font-weight: 600;
  border-bottom: none !important;
}
@media (max-width: 960px) {
  .topbar.is-open .mobile-nav { display: flex; }
}
@media (min-width: 961px) {
  .mobile-nav { display: none !important; }
  .nav-toggle { display: none !important; }
}

/* ==========  Mock cards: non-selectable  ==========
   Mock dashboards and floating callouts are illustrative previews, not
   real data. Disable text selection so the cursor reads them as
   "screenshot" rather than copy-able content. Links and buttons inside
   still receive clicks because we only kill user-select, not pointer-events.
   Form inputs (rare inside mocks) re-enable selection so typing works. */
.hero-device,
.mock-card,
.payroll-card,
.wfh-card,
.phone,
.float-card {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.hero-device input, .hero-device textarea,
.mock-card input, .mock-card textarea,
.payroll-card input, .payroll-card textarea,
.wfh-card input, .wfh-card textarea,
.phone input, .phone textarea,
.float-card input, .float-card textarea {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* ==========  Legal pages  ==========
   Shared styles for /legal/{privacy,terms,security,dpa} and /trust.
   Modeled on Zerodha's terms layout: centered narrow column, numbered
   H2 sections, decimal H3 subsections, plain prose, divider per section.
   The .app section glow is suppressed inside .legal-page so the long
   reading column stays visually quiet. */
.app > section.legal-page::before,
.app > section.legal-page::after { display: none; }

.legal-page {
  padding: 56px 0 96px;
  background: var(--pp-bg);
}
.legal-container {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 32px;
}
.legal-header { margin-bottom: 40px; }
.legal-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--pp-purple-600);
  margin-bottom: 14px;
}
.legal-h1 {
  font-family: var(--pp-font-display);
  font-weight: 800;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--pp-fg-1);
  margin: 0 0 18px;
  text-wrap: balance;
}
.legal-meta {
  font-size: 14px; color: var(--pp-fg-3);
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--pp-line);
}
.legal-meta strong { color: var(--pp-fg-2); font-weight: 600; }
.legal-intro {
  font-size: 17px; line-height: 1.65; color: var(--pp-fg-3);
  margin: 28px 0 0;
}

/* In-page table of contents. Anchor links to numbered sections. */
.legal-toc {
  margin: 32px 0 48px;
  padding: 22px 26px;
  background: var(--pp-bg-subtle);
  border: 1px solid var(--pp-line);
  border-radius: 14px;
}
.legal-toc-title {
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--pp-fg-3);
  margin: 0 0 14px;
}
.legal-toc-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px 24px;
}
.legal-toc-list a {
  display: block;
  font-size: 14px; line-height: 1.5;
  color: var(--pp-fg-2);
  padding: 4px 0;
}
.app .legal-toc-list a:hover { color: var(--pp-purple-700); }
.legal-toc-list .num {
  display: inline-block; min-width: 22px;
  color: var(--pp-fg-3); font-variant-numeric: tabular-nums;
}

/* Body typography. H2 = numbered section, H3 = decimal subsection. */
.legal-body { font-size: 16px; line-height: 1.7; color: var(--pp-fg-2); }
.legal-body h2.legal-section-h {
  font-family: var(--pp-font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -.02em;
  color: var(--pp-fg-1);
  margin: 56px 0 18px;
  scroll-margin-top: 88px;
}
.legal-body h2.legal-section-h:first-of-type { margin-top: 12px; }
.legal-body h3.legal-sub-h {
  font-family: var(--pp-font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--pp-fg-1);
  margin: 32px 0 10px;
  scroll-margin-top: 88px;
}
.legal-body p { margin: 0 0 16px; }
.legal-body strong { color: var(--pp-fg-1); font-weight: 600; }
.legal-body ul, .legal-body ol {
  margin: 0 0 18px; padding-left: 22px;
}
.legal-body li { margin-bottom: 8px; }
.legal-body ol.legal-alpha { list-style-type: lower-alpha; }
.app .legal-body a {
  color: var(--pp-purple-700);
  border-bottom: 1px solid var(--pp-purple-200);
}
.app .legal-body a:hover {
  color: var(--pp-purple-900);
  border-bottom-color: var(--pp-purple-500);
}
.legal-body hr.legal-divider {
  border: none; border-top: 1px solid var(--pp-line);
  margin: 48px 0 0;
}
.legal-body .legal-callout {
  background: var(--pp-purple-50);
  border-left: 3px solid var(--pp-purple-500);
  padding: 16px 20px;
  border-radius: 0 10px 10px 0;
  margin: 20px 0;
  font-size: 15px;
}
.legal-body .legal-callout p:last-child { margin-bottom: 0; }

/* Footer nav across legal pages. The links sit BETWEEN two horizontal
   rules, so we use border-top + border-bottom on the nav itself and the
   legal pages no longer need a separate <hr class="legal-divider">. */
.legal-footer-nav {
  margin-top: 64px;
  padding: 24px 0;
  border-top: 1px solid var(--pp-line);
  border-bottom: 1px solid var(--pp-line);
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  font-size: 14px;
}
.legal-footer-nav .legal-footer-label {
  color: var(--pp-fg-3); margin-right: 4px;
}
.app .legal-footer-nav a {
  color: var(--pp-fg-2); font-weight: 500;
  border-bottom: 1px solid transparent;
  /* 12px vertical padding lifts these inline-style nav links to ≥44px touch
     targets on phones. Was padding-bottom:1px which rendered 26px tall and
     failed the responsive matrix on every iPhone/Android in the legal page.
     min-width covers short-label cells like "DPA" (3 chars renders ~32px wide,
     under the 44px minimum). justify-content centres the label inside the
     wider hit area. */
  padding: 12px 8px 11px; min-height: 44px; min-width: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
.app .legal-footer-nav a:hover {
  color: var(--pp-purple-700);
  border-bottom-color: var(--pp-purple-300);
}
.legal-footer-nav .is-current {
  color: var(--pp-purple-700);
  border-bottom-color: var(--pp-purple-300) !important;
}

/* Trust hub: card grid linking out to legal docs and resources. */
.trust-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 40px 0;
}
.trust-hub-card {
  display: block;
  padding: 22px 24px;
  background: var(--pp-surface);
  border: 1px solid var(--pp-line);
  border-radius: 14px;
  transition: transform 180ms var(--pp-ease-out), border-color 180ms, box-shadow 180ms;
}
.app .trust-hub-card:hover {
  transform: translateY(-2px);
  border-color: var(--pp-purple-300);
  box-shadow: var(--pp-shadow-md);
  color: inherit;
}
.trust-hub-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--pp-purple-50); color: var(--pp-purple-600);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.trust-hub-title {
  font-family: var(--pp-font-display);
  font-weight: 700; font-size: 17px;
  color: var(--pp-fg-1);
  margin: 0 0 6px;
}
.trust-hub-desc {
  font-size: 14px; line-height: 1.55;
  color: var(--pp-fg-3);
  margin: 0;
}

@media (max-width: 720px) {
  .legal-h1 { font-size: 34px; }
  .legal-toc-list { grid-template-columns: 1fr; }
  .legal-body h2.legal-section-h { font-size: 22px; margin-top: 44px; }
}

/* ==========  What's new (release stream)  ==========
   Freshworks-style product-updates page. Single column with month
   sections, category pills, and entry cards. No JS filtering — readers
   scroll or use the in-page anchors to jump between months. */
.app > section.whatsnew-page::before,
.app > section.whatsnew-page::after { display: none; }

.whatsnew-page {
  padding: 56px 0 96px;
  background: var(--pp-bg);
}
.whatsnew-container {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 32px;
}
.whatsnew-header {
  margin-bottom: 48px;
  text-align: center;
}
.whatsnew-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--pp-purple-600);
  margin-bottom: 14px;
}
.whatsnew-h1 {
  font-family: var(--pp-font-display);
  font-weight: 800;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--pp-fg-1);
  margin: 0 0 16px;
  text-wrap: balance;
}
.whatsnew-lead {
  font-size: 18px; line-height: 1.6;
  color: var(--pp-fg-3);
  margin: 0 auto;
  max-width: 620px;
}

/* Quick year/month nav at the top — anchor links only, no JS filter. */
.whatsnew-jump {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin: 32px 0 8px;
}
.whatsnew-jump a {
  font-size: 13px; font-weight: 500; color: var(--pp-fg-3);
  padding: 6px 14px; border: 1px solid var(--pp-line);
  border-radius: 999px;
}
.app .whatsnew-jump a:hover {
  color: var(--pp-purple-700);
  border-color: var(--pp-purple-300);
  background: var(--pp-purple-50);
}

.whatsnew-month {
  margin-top: 56px;
  scroll-margin-top: 88px;
}
.whatsnew-month-h {
  font-family: var(--pp-font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -.01em;
  color: var(--pp-fg-2);
  margin: 0 0 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--pp-line);
}

.whatsnew-entry {
  display: block;
  background: var(--pp-surface);
  border: 1px solid var(--pp-line);
  border-radius: 14px;
  padding: 22px 26px;
  margin-bottom: 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color 200ms var(--pp-ease-out), box-shadow 200ms, transform 200ms;
}
.app .whatsnew-entry:hover {
  border-color: var(--pp-purple-200);
  box-shadow: var(--pp-shadow-md);
  transform: translateY(-1px);
}
.whatsnew-pill {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.whatsnew-pill--new { background: var(--pp-purple-50); color: var(--pp-purple-700); }
.whatsnew-pill--improved { background: #E7EFFA; color: #194B8F; }
.whatsnew-pill--fixed { background: #E0F1E5; color: #14653B; }
.whatsnew-pill--integration { background: #FFF1D6; color: #7A5800; }
.whatsnew-pill--compliance { background: #ECEDF1; color: #2E2E36; }
.whatsnew-entry-h {
  font-family: var(--pp-font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--pp-fg-1);
  margin: 0 0 8px;
  letter-spacing: -.01em;
}
.whatsnew-entry-body {
  font-size: 15px; line-height: 1.6;
  color: var(--pp-fg-3);
  margin: 0;
}
.app .whatsnew-entry-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 14px; font-weight: 500;
  color: var(--pp-purple-700);
  border-bottom: 1px solid var(--pp-purple-200);
  padding-bottom: 1px;
}
.app .whatsnew-entry-link:hover {
  color: var(--pp-purple-900);
  border-bottom-color: var(--pp-purple-500);
}

@media (max-width: 720px) {
  .whatsnew-h1 { font-size: 34px; }
  .whatsnew-entry { padding: 18px 20px; }
}

/* ==========  Press article (single release page)  ==========
   Long-form layout for individual press releases linked from the
   press room. Reuses .whatsnew-pill colour ladder so a release's
   identity carries from the index card to the article header. */
.app > section.press-article-page::before,
.app > section.press-article-page::after { display: none; }

.press-article-page {
  padding: 40px 0 64px;
  background: var(--pp-bg);
}
.press-article-container {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 32px;
}

.press-article-breadcrumb {
  font-size: 13px;
  color: var(--pp-fg-3);
  margin-bottom: 28px;
}
.app .press-article-breadcrumb a { color: var(--pp-fg-3); }
.app .press-article-breadcrumb a:hover { color: var(--pp-purple-700); }
.press-article-breadcrumb-sep {
  margin: 0 8px;
  color: var(--pp-fg-4);
}

.press-article-header { margin-bottom: 28px; }
.press-article-h1 {
  font-family: var(--pp-font-display);
  font-weight: 800;
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--pp-fg-1);
  margin: 14px 0 16px;
  text-wrap: balance;
}
.press-article-deck {
  font-size: 19px;
  line-height: 1.55;
  color: var(--pp-fg-3);
  margin: 0 0 26px;
  text-wrap: pretty;
}
.press-article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 13px;
  color: var(--pp-fg-4);
  align-items: center;
  padding-top: 18px;
  border-top: 1px solid var(--pp-line);
}
.press-article-meta time { font-weight: 500; color: var(--pp-fg-3); }
.press-article-meta-sep { color: var(--pp-fg-4); }

.press-article-body {
  font-size: 17px;
  line-height: 1.7;
  color: var(--pp-fg-2);
}
.press-article-body p { margin: 0 0 18px; }
.press-article-body h2 {
  font-family: var(--pp-font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--pp-fg-1);
  margin: 36px 0 14px;
  text-wrap: balance;
}
.press-article-body ul {
  margin: 0 0 18px;
  padding-left: 22px;
}
.press-article-body li { margin-bottom: 6px; }

/* Related releases grid below the article body. */
.press-related {
  padding: 56px 0 64px;
  background: var(--pp-surface);
  border-top: 1px solid var(--pp-line);
  position: relative;
  z-index: 1;
}
.press-related-h {
  font-family: var(--pp-font-display);
  font-weight: 700;
  font-size: 24px;
  margin: 0 0 24px;
  text-align: center;
  color: var(--pp-fg-1);
}
.press-related-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  padding: 0 32px;
}
.press-related-grid > .press-related-card {
  flex: 1 1 280px;
  max-width: 360px;
}
.press-related-grid--single {
  max-width: 540px;
}
.app .press-related-card {
  background: var(--pp-bg);
  border: 1px solid var(--pp-line);
  border-radius: 16px;
  padding: 24px;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.app .press-related-card:hover {
  transform: translateY(-2px);
  border-color: var(--pp-purple-200);
  box-shadow: var(--pp-shadow-md);
}
.press-related-card-h {
  font-family: var(--pp-font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  margin: 10px 0 6px;
  color: var(--pp-fg-1);
  text-wrap: balance;
}
.press-related-card-meta {
  font-size: 13px;
  color: var(--pp-fg-4);
}

@media (max-width: 720px) {
  .press-article-h1 { font-size: 32px; }
  .press-article-deck { font-size: 17px; }
  .press-article-body { font-size: 16px; }
  .press-article-body h2 { font-size: 20px; margin-top: 28px; }
  .press-related-grid { grid-template-columns: 1fr; }
}

/* Reserve vertical space for the animated lifecycle stages on the ATS and
   HRMS product pages BEFORE the inline keyframe CSS is parsed. Without
   this, the section starts at 0px height, the body shifts down ~300px
   when styles arrive, and Lighthouse flags a large CLS event. */
.al-stage,.hl-stage,.lc-stage{min-height:300px;content-visibility:auto;contain-intrinsic-size:1100px 320px}

/* Screen-reader-only utility: visible to assistive tech, hidden visually.
   Used to keep heading order valid (h1 -> h2 -> h3) on pages where the
   visual design has no section title between the page H1 and card H3s. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ==========  Single-tool page (e.g. /tools/offer-letter-generator/)  ==========
   HRone-style tool page: hero with title + bullets on the left and a
   sample-output preview on the right, then a 2-col form, then explainer
   sections, FAQ, related-tools grid, standard CTA + footer. */
.app > section.tool-page-hero::before,
.app > section.tool-page-hero::after { display: none; }
.app > section.tool-page-form::before,
.app > section.tool-page-form::after { display: none; }
.app > section.tool-page-explainer::before,
.app > section.tool-page-explainer::after { display: none; }
.app > section.tool-page-faq::before,
.app > section.tool-page-faq::after { display: none; }

.tool-page-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 32px;
}
.tool-page-hero {
  padding: 36px 0 56px;
  background: var(--pp-bg);
}
.tool-page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  margin-top: 28px;
}
.tool-page-hero-text .press-article-h1 {
  font-size: 44px;
  margin: 12px 0 14px;
}
.tool-page-hero-text .feature-bullets { margin: 18px 0 24px; }
.tool-page-hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.tool-preview {
  background: #fff;
  border: 1px solid var(--pp-line);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(43,22,72,0.10);
  overflow: hidden;
}
.tool-preview-head {
  background: var(--pp-purple-50);
  color: var(--pp-purple-700);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-bottom: 1px solid var(--pp-line);
}
.tool-preview-body {
  padding: 22px 22px 26px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--pp-fg-2);
  font-family: var(--pp-font-mono, ui-monospace, "SF Mono", Menlo, monospace);
}
.tool-preview-line { margin-bottom: 8px; }
.tool-preview-line:last-child { margin-bottom: 0; }

.tool-page-form {
  padding: 56px 0 64px;
  background: var(--pp-surface);
  border-top: 1px solid var(--pp-line);
  border-bottom: 1px solid var(--pp-line);
}
.tool-page-form-h {
  font-family: var(--pp-font-display);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: -.02em;
  color: var(--pp-fg-1);
  margin: 0 0 8px;
  text-wrap: balance;
}
.tool-page-form-deck {
  font-size: 16px;
  color: var(--pp-fg-3);
  margin: 0 0 32px;
}
.tool-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  margin-bottom: 28px;
}
.tool-form-col--full { grid-column: 1 / -1; }
.tool-form-field {
  display: block;
  margin-bottom: 18px;
}
.tool-form-field > span {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--pp-fg-2);
  margin-bottom: 6px;
}
.tool-form-field input,
.tool-form-field select,
.tool-form-field textarea {
  width: 100%;
  padding: 11px 14px;
  font-size: 14.5px;
  border: 1px solid var(--pp-line);
  border-radius: 10px;
  background: #fff;
  color: var(--pp-fg-1);
  font-family: inherit;
  transition: border-color 160ms;
}
.tool-form-field input:focus,
.tool-form-field select:focus,
.tool-form-field textarea:focus {
  outline: none;
  border-color: var(--pp-purple-500);
  box-shadow: 0 0 0 3px var(--pp-purple-50);
}
.tool-form-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.tool-page-explainer {
  padding: 64px 0;
}
.tool-page-explainer h2 {
  font-family: var(--pp-font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -.01em;
  color: var(--pp-fg-1);
  margin: 36px 0 14px;
  text-wrap: balance;
}
.tool-page-explainer h2:first-child { margin-top: 0; }
.tool-page-explainer p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--pp-fg-2);
  margin: 0 0 14px;
  max-width: 760px;
}

.tool-page-faq {
  padding: 32px 0 80px;
}
.tool-faq-item {
  border-top: 1px solid var(--pp-line);
  padding: 20px 0;
}
.tool-faq-item:last-of-type {
  border-bottom: 1px solid var(--pp-line);
}
.tool-faq-item summary {
  font-size: 17px;
  font-weight: 600;
  color: var(--pp-fg-1);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 32px;
}
.tool-faq-item summary::-webkit-details-marker { display: none; }
.tool-faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0; top: -2px;
  font-size: 22px;
  font-weight: 400;
  color: var(--pp-purple-700);
  transition: transform 160ms;
}
.tool-faq-item[open] summary::after {
  content: "−";
}
.tool-faq-item p {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--pp-fg-3);
  max-width: 760px;
}

@media (max-width: 880px) {
  .tool-page-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .tool-page-hero-text .press-article-h1 { font-size: 32px; }
  .tool-form-grid { grid-template-columns: 1fr; gap: 0; }
  .tool-page-form-h { font-size: 24px; }
}

/* ==========  Tool card icon (used on /tools)  ==========
   Small purple-tinted icon block that sits at the top-left of every
   .pillar-card on the Tools page so the grid reads as a tool catalogue
   rather than an article list. Reuses .pillar-card padding; only the
   icon block is new. */
.tool-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--pp-purple-50);
  color: var(--pp-purple-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.tool-card .resource-type { margin-top: 0; }

/* ==========  Blog index card metadata  ==========
   Byline + publish date + views, rendered as a quiet line near the bottom
   of every .pillar-card on /blog. Tied to /assets/blog-stats.json which
   is the single source of truth for these fields. */
.pillar-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--pp-fg-4);
}
.pillar-card-byline strong {
  color: var(--pp-fg-2);
  font-weight: 600;
}
.pillar-card-meta-sep { color: var(--pp-fg-4); }
.pillar-card-views {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Byline + views on the long-form blog article page. Sits inside
   .press-article-meta (already styled), with a small visual separation
   from the trailing meta items. */
.blog-byline strong {
  color: var(--pp-fg-2);
  font-weight: 600;
}
.blog-views {
  display: inline-flex;
  align-items: center;
}

/* ==========  Blog article (long-form post)  ==========
   Same skeleton as .press-article-page but with an above-the-header hero
   gradient and inline body images. Hero and body images are inline SVGs
   so the page stays CSP-compliant (default-src 'self') without needing
   any new asset files. */
.app > section.blog-article-page::before,
.app > section.blog-article-page::after { display: none; }

.blog-article-page {
  padding: 0 0 64px;
  background: var(--pp-bg);
}
.blog-hero {
  width: 100%;
  max-width: 1240px;
  margin: 24px auto 32px;
  padding: 0 32px;
}
.blog-hero-svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: var(--pp-shadow-lg, 0 24px 64px rgba(43,22,72,0.12));
}
.blog-body-image-wrap {
  margin: 36px 0 28px;
}
.blog-body-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

@media (max-width: 720px) {
  .blog-hero { margin: 12px auto 24px; padding: 0 16px; }
  .blog-hero-svg { border-radius: 12px; }
  .blog-body-image { border-radius: 10px; }
  .blog-body-image-wrap { margin: 24px 0 20px; }
}

/* ==========  Plan comparison table  ==========
   Side-by-side feature comparison modeled on Zoho People's pricing-
   comparison page. Plan columns sticky on scroll, feature categories
   grouped by visible section bands, cells use checkmarks, dashes, or
   short text values. Two pages reuse the same styles: HRMS and ATS. */
.app > section.compare-page::before,
.app > section.compare-page::after { display: none; }

.compare-page {
  padding: 56px 0 96px;
  background: var(--pp-bg);
}
.compare-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}
.compare-header {
  text-align: center;
  margin-bottom: 48px;
}
.compare-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--pp-purple-600);
  margin-bottom: 14px;
}
.compare-h1 {
  font-family: var(--pp-font-display);
  font-weight: 800;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--pp-fg-1);
  margin: 0 0 16px;
  text-wrap: balance;
}
.compare-lead {
  font-size: 18px; line-height: 1.6;
  color: var(--pp-fg-3);
  margin: 0 auto;
  max-width: 640px;
}

.compare-table-wrap {
  border: 1px solid var(--pp-line);
  border-radius: 14px;
  background: var(--pp-surface);
  overflow: hidden;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 14px;
}
.compare-thead {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--pp-surface);
  box-shadow: 0 2px 6px rgba(20,20,35,0.04);
}
.compare-thead th {
  text-align: left;
  padding: 22px 20px 18px;
  vertical-align: top;
  border-bottom: 1px solid var(--pp-line);
  background: var(--pp-surface);
}
.compare-feature-col { width: 34%; }
.compare-plan-col { width: 22%; text-align: center; }
.compare-plan-col.is-popular { background: var(--pp-purple-50) !important; }

.compare-plan-name {
  font-family: var(--pp-font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--pp-fg-1);
}
.compare-plan-price {
  font-family: var(--pp-font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--pp-fg-1);
  letter-spacing: -.02em;
  margin-top: 4px;
}
.compare-plan-cadence {
  font-size: 11px;
  color: var(--pp-fg-3);
  margin-bottom: 14px;
  min-height: 14px;
}
.compare-plan-badge {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--pp-purple-700);
  background: #fff;
  padding: 3px 10px;
  border-radius: 999px;
  display: inline-block;
  margin-bottom: 8px;
}
.compare-plan-cta {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
  background: var(--pp-purple-600);
  color: #fff !important;
  border: 1px solid transparent;
}
.app .compare-plan-cta:hover { background: var(--pp-purple-700); color: #fff !important; }
.compare-plan-cta--ghost {
  background: #fff;
  color: var(--pp-fg-1) !important;
  border: 1px solid var(--pp-line-strong);
}
.app .compare-plan-cta--ghost:hover { background: var(--pp-bg-subtle); color: var(--pp-purple-700) !important; }
.compare-plan-cta + .compare-plan-cta { margin-left: 6px; }

/* Category section bands */
.compare-table tr.compare-category th {
  background: var(--pp-bg-subtle);
  font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--pp-fg-2);
  padding: 16px 20px 12px;
  text-align: left;
  border-top: 1px solid var(--pp-line);
}

/* Body rows */
.compare-table tbody td {
  padding: 13px 20px;
  vertical-align: top;
  border-top: 1px solid var(--pp-line);
}
.compare-table tbody tr.compare-category + tr td { border-top: none; }
.compare-table tbody td.compare-feature-name {
  color: var(--pp-fg-2);
  font-weight: 500;
}
.compare-table .compare-note {
  display: block;
  font-size: 12px; font-weight: 400;
  color: var(--pp-fg-3);
  margin-top: 2px;
}
.compare-table tbody td:not(.compare-feature-name) {
  text-align: center;
  color: var(--pp-fg-3);
}
.compare-table tbody td.is-popular {
  background: rgba(244, 238, 251, 0.55);
}
.compare-table tbody tr:hover td { background: var(--pp-bg-subtle); }
.compare-table tbody tr:hover td.is-popular { background: var(--pp-purple-50); }

/* Cell content variants */
.compare-check {
  color: var(--pp-success);
  display: inline-block;
  vertical-align: middle;
}
.compare-dash {
  color: var(--pp-fg-5);
  font-size: 16px;
  font-weight: 600;
}
.compare-value {
  font-weight: 500;
  color: var(--pp-fg-2);
}

/* Footer CTA row */
.compare-table tfoot td {
  padding: 22px 20px;
  vertical-align: top;
  border-top: 1px solid var(--pp-line);
  background: var(--pp-bg-subtle);
  text-align: center;
}
.compare-table tfoot td:first-child { text-align: left; }

/* CTA strip below the table */
.compare-bottom {
  margin-top: 56px;
  padding: 32px;
  border: 1px solid var(--pp-line);
  border-radius: 14px;
  background: var(--pp-surface);
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: space-between;
}
.compare-bottom-text { font-size: 16px; color: var(--pp-fg-2); max-width: 600px; line-height: 1.55; }
.compare-bottom-text strong { color: var(--pp-fg-1); }

@media (max-width: 880px) {
  .compare-h1 { font-size: 34px; }
  .compare-table { font-size: 13px; }
  .compare-table th, .compare-table td { padding: 10px 12px; }
  .compare-plan-name { font-size: 16px; }
  .compare-plan-price { font-size: 19px; }
}

@media (max-width: 720px) {
  .compare-table-wrap { overflow-x: auto; }
  .compare-table { min-width: 720px; }
  .compare-thead { position: static; }
}

/* ==========  About page (Intercom-style)  ==========
   Pure-typography hero, narrative paragraph, bootstrapped callout, then
   leadership grid. Existing pillar cards (values) and FAQ classes are
   reused below the leadership section. */
.app > section.about-hero::before,
.app > section.about-hero::after { display: none; }
.about-hero {
  padding: 88px 0 32px;
  background: var(--pp-bg);
  text-align: center;
}
.about-hero-inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 32px;
}
.about-h1 {
  font-family: var(--pp-font-display);
  font-weight: 800;
  font-size: 56px;
  line-height: 1.04;
  letter-spacing: -.035em;
  color: var(--pp-fg-1);
  margin: 0;
  text-wrap: balance;
}

.app > section.about-narrative::before,
.app > section.about-narrative::after { display: none; }
.about-narrative {
  padding: 24px 0 24px;
  background: var(--pp-bg);
}
.about-narrative-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 32px;
  text-align: center;
}
.about-narrative-inner p {
  font-size: 19px;
  line-height: 1.6;
  color: var(--pp-fg-3);
  margin: 0 0 18px;
}
.about-narrative-inner p:last-child { margin-bottom: 0; }
.about-narrative-inner strong { color: var(--pp-fg-2); font-weight: 600; }

.app > section.about-callout-section::before,
.app > section.about-callout-section::after { display: none; }
.about-callout-section {
  padding: 32px 0 64px;
  background: var(--pp-bg);
}
.about-callout {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 32px;
  background: var(--pp-purple-50);
  border: 1px solid var(--pp-purple-200);
  border-radius: 14px;
  text-align: center;
}
.about-callout-eyebrow {
  font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--pp-purple-700);
  margin-bottom: 10px;
}
.about-callout-text {
  font-family: var(--pp-font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--pp-fg-1);
  margin: 0 0 8px;
}
.about-callout-sub {
  font-size: 15px;
  line-height: 1.55;
  color: var(--pp-fg-3);
  margin: 0;
}

/* Leadership grid */
.app > section.leadership-section::before,
.app > section.leadership-section::after { display: none; }
.leadership-section {
  padding: 48px 0 72px;
  background: var(--pp-bg);
}
.leadership-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}
.leadership-head {
  text-align: center;
  margin-bottom: 48px;
}
.leadership-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--pp-purple-600);
  margin-bottom: 14px;
}
.leadership-h2 {
  font-family: var(--pp-font-display);
  font-weight: 800;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--pp-fg-1);
  margin: 0 0 12px;
}
.leadership-lead {
  font-size: 17px;
  color: var(--pp-fg-3);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.55;
}
.leadership-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.leadership-card {
  background: var(--pp-surface);
  border: 1px solid var(--pp-line);
  border-radius: 16px;
  padding: 28px 26px;
  transition: border-color 200ms var(--pp-ease-out), box-shadow 200ms, transform 200ms;
}
.app .leadership-card:hover {
  border-color: var(--pp-purple-200);
  box-shadow: var(--pp-shadow-md);
  transform: translateY(-2px);
}
.leadership-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-family: var(--pp-font-display);
  font-size: 22px; font-weight: 700;
  color: #fff;
  margin-bottom: 18px;
  letter-spacing: -.01em;
}
.leadership-avatar--purple { background: var(--pp-purple-500); }
.leadership-avatar--blue { background: #2A6BE0; }
.leadership-avatar--green { background: #1A8A4E; }
.leadership-name {
  font-family: var(--pp-font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--pp-fg-1);
  margin: 0 0 4px;
  letter-spacing: -.01em;
}
.leadership-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--pp-purple-700);
  margin: 0 0 14px;
}
.leadership-bio {
  font-size: 15px;
  line-height: 1.6;
  color: var(--pp-fg-3);
  margin: 0;
}

@media (max-width: 720px) {
  .about-h1 { font-size: 38px; }
  .leadership-h2 { font-size: 28px; }
  .about-callout-text { font-size: 18px; }
}

/* ==========  User-requested global overrides  ==========
   Per direct request: collapse the entire foreground colour ladder to a
   single rgb(29,29,31) and force line-height: 1 on every heading. The
   ladder collapse means muted captions and section leads now read at
   the same weight as body and headings. */
:root {
  --pp-fg-1: #1D1D1F;
  --pp-fg-2: #1D1D1F;
  --pp-fg-3: #1D1D1F;
  --pp-fg-4: #1D1D1F;
  --pp-fg-5: #1D1D1F;
}
h1, h2, h3, h4, h5, h6 { line-height: 1 !important; }

/* ============== Lead-capture confirmation modal ==============
   Injected by window.submitLeadForm() on a successful submit so visitors
   get clear feedback. Same purple-600/100 palette, shadow-purple, and
   easing tokens as the rest of the site. */
.pp-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(43, 22, 72, 0.36);
  backdrop-filter: saturate(140%) blur(4px);
  -webkit-backdrop-filter: saturate(140%) blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms cubic-bezier(.22,.65,.36,.99);
}
.pp-modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
.pp-modal {
  background: #fff;
  border-radius: 18px;
  border: 1px solid var(--pp-line);
  box-shadow: var(--pp-shadow-lg, 0 24px 60px rgba(43, 22, 72, 0.14)),
              0 18px 60px -18px rgba(108, 59, 170, 0.45);
  max-width: 440px;
  width: 100%;
  padding: 36px 32px 28px;
  text-align: center;
  transform: translateY(10px) scale(0.98);
  transition: transform 240ms cubic-bezier(.22,.65,.36,.99);
}
.pp-modal-backdrop.is-open .pp-modal {
  transform: translateY(0) scale(1);
}
.pp-modal-mark {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pp-purple-100), var(--pp-purple-200));
  margin: 0 auto 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pp-purple-700);
  box-shadow: 0 6px 18px rgba(108, 59, 170, 0.18);
}
.pp-modal-backdrop.is-error .pp-modal-mark {
  background: linear-gradient(135deg, var(--pp-danger-bg), #FFD1CB);
  color: var(--pp-danger);
  box-shadow: 0 6px 18px rgba(224, 70, 58, 0.18);
}
.pp-modal-title {
  font-family: var(--pp-font-display, var(--pp-font-sans));
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--pp-fg-1);
  margin: 0 0 10px;
  line-height: 1.25;
}
.pp-modal-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--pp-fg-3);
  margin: 0 0 24px;
}
.pp-modal-close {
  appearance: none;
  border: none;
  cursor: pointer;
  padding: 12px 28px;
  border-radius: 12px;
  background: var(--pp-purple-600);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
  box-shadow: 0 6px 16px -6px rgba(108, 59, 170, 0.55);
}
.pp-modal-close:hover {
  background: var(--pp-purple-700);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -8px rgba(108, 59, 170, 0.6);
}
.pp-modal-close:focus-visible {
  outline: 3px solid var(--pp-purple-300);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .pp-modal-backdrop, .pp-modal { transition: none; }
}

/* ============== Help widget ============== */
/* Fixed launcher + glass panel. z-index sits above page content/topbar
   (100) but below the promo-popup backdrop (1000 in promo-popup.css) so
   the contact popup still overlays it. .pp-help-claimed hides a page's
   inline FAQ the instant JS runs (Phase A) - no flash, no orphan toggle. */
.pp-help-claimed { display: none !important; }

.pp-help-fab {
  position: fixed; right: 22px; bottom: 22px;
  /* safe-area override */
  right: max(22px, env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--pp-purple-500);
  background: color-mix(in srgb, var(--pp-purple-600) 88%, transparent);
  color: var(--pp-fg-on-brand);
  box-shadow: var(--pp-shadow-purple);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  cursor: pointer; z-index: 930;
  transition: transform .2s var(--pp-ease-out), box-shadow .2s var(--pp-ease-out);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .pp-help-fab { background: var(--pp-purple-600); }
}
.pp-help-fab:hover { transform: translateY(-2px); }
.pp-help-fab:focus-visible { outline: 3px solid var(--pp-purple-700); outline-offset: 2px; }
.pp-help-fab-icon { width: 24px; height: 24px; }
/* Closed FAB shows the help glyph; open FAB shows the chevron. open()/
   close() in app.js already toggle [aria-expanded], so this needs no JS. */
.pp-help-fab-icon--close { display: none; }
.pp-help-fab[aria-expanded="true"] .pp-help-fab-icon--help  { display: none; }
.pp-help-fab[aria-expanded="true"] .pp-help-fab-icon--close { display: block; }
.pp-help-fab-ring {
  position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--pp-purple-500);
  opacity: .55; animation: pp-help-pulse 2.6s var(--pp-ease-out) infinite;
}
@keyframes pp-help-pulse {
  0%   { transform: scale(.92); opacity: .55; }
  70%  { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}

.pp-help-scrim {
  position: fixed; inset: 0; z-index: 950;
  background: color-mix(in srgb, var(--pp-purple-900) 28%, transparent);
}

.pp-help-panel {
  position: fixed; z-index: 960;
  right: 22px; bottom: 90px;
  right: max(22px, env(safe-area-inset-right));
  bottom: max(90px, calc(68px + env(safe-area-inset-bottom))); /* safe-area override, clears the 56px FAB + gap */
  width: min(380px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 120px));
  flex-direction: column; overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--pp-line-strong);
  background: color-mix(in srgb, var(--pp-surface) 80%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: var(--pp-shadow-lg);
  transform-origin: bottom right;
  animation: pp-help-in .22s var(--pp-ease-out) both;
}
/* Panel is hidden by default (HTML [hidden] attr). Override needed because
   the class-level display rule would otherwise win over the UA stylesheet. */
.pp-help-panel:not([hidden]) { display: flex; }
/* Messenger layout: header on top, scrollable body in the middle, the
   tablist rendered as a bottom nav. DOM order stays tabs-before-panels
   (accessible); only the visual order is reflowed via flex `order`. */
.pp-help-head  { order: 1; }
.pp-help-tabs  { order: 3; }
.pp-help-body  { order: 2; flex: 1 1 auto; min-height: 0; }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .pp-help-panel { background: var(--pp-surface); }
}
@keyframes pp-help-in {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 480px) {
  .pp-help-panel {
    right: 12px; left: 12px; bottom: max(84px, calc(64px + env(safe-area-inset-bottom)));
    width: auto; max-height: calc(100vh - 104px);
  }
}

.pp-help-head {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 16px 18px; border-bottom: 1px solid var(--pp-line);
}
.pp-help-title {
  margin: 0; font-family: var(--pp-font-display);
  font-size: var(--pp-text-lg); color: var(--pp-fg-1);
}
.pp-help-close {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  /* 44x44 minimum touch target (WCAG 2.5.5) */
  width: 44px; height: 44px; border-radius: 12px;
  background: transparent; border: none; color: var(--pp-fg-3);
  cursor: pointer;
}
.pp-help-close:hover { background: var(--pp-bg-subtle); color: var(--pp-fg-1); }
.pp-help-close:focus-visible { outline: 2px solid var(--pp-purple-700); outline-offset: 2px; }

.pp-help-tabs {
  display: flex; gap: 4px; padding: 8px 8px;
  border-top: 1px solid var(--pp-line);
  background: var(--pp-surface);
}
.pp-help-tab {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  padding: 7px 8px; min-height: 52px;
  border: none; border-radius: 12px;
  background: transparent; color: var(--pp-fg-3);
  font-family: var(--pp-font-sans); font-size: var(--pp-text-sm);
  font-weight: 600; cursor: pointer;
  transition: color .15s var(--pp-ease-out), background .15s var(--pp-ease-out);
}
.pp-help-tab-ico { width: 20px; height: 20px; }
.pp-help-tab.is-active {
  background: var(--pp-purple-50); color: var(--pp-purple-700);
}
.pp-help-tab:focus-visible { outline: 2px solid var(--pp-purple-700); outline-offset: 1px; }

.pp-help-body { overflow-y: auto; padding: 14px 16px 18px; }
.pp-help-tabpanel { outline: none; }
.pp-help-tabpanel[hidden] { display: none; }

.pp-help-generic-lead {
  margin: 0 0 8px; font-weight: 700; color: var(--pp-fg-2);
  font-size: var(--pp-text-base);
}
.pp-help-generic-list { list-style: none; margin: 0 0 14px; padding: 0; }
.pp-help-generic-list li { margin: 0; }
.pp-help-panel .pp-help-generic-list a {
  display: block; padding: 11px 4px; min-height: 44px;
  box-sizing: border-box; color: var(--pp-fg-2);
  border-bottom: 1px solid var(--pp-line);
}
.pp-help-panel .pp-help-browse {
  /* display: block + min-height ensures a 44px touch target (WCAG 2.5.5) */
  display: block; margin-top: 12px; padding: 10px 0; min-height: 44px;
  box-sizing: border-box; font-weight: 600;
  color: var(--pp-purple-700);
}

.pp-help-form-lead {
  margin: 0 0 14px; color: var(--pp-fg-3);
  font-size: var(--pp-text-base);
}
.pp-help-field { display: block; margin: 0 0 12px; }
.pp-help-field-label {
  display: block; margin: 0 0 5px;
  font-size: var(--pp-text-sm); font-weight: 600; color: var(--pp-fg-2);
}
.pp-help-field input,
.pp-help-field textarea {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--pp-line-strong);
  background: var(--pp-surface); color: var(--pp-fg-1);
  font-family: var(--pp-font-sans); font-size: var(--pp-text-base);
}
.pp-help-field textarea { resize: vertical; min-height: 84px; }
.pp-help-field input:focus-visible,
.pp-help-field textarea:focus-visible {
  outline: 2px solid var(--pp-purple-700); outline-offset: 1px;
}
.pp-help-form-status {
  margin: 0 0 10px; min-height: 1.2em;
  font-size: var(--pp-text-sm); color: var(--pp-fg-3);
}
.pp-help-form-send {
  width: 100%; min-height: 44px; box-sizing: border-box;
  padding: 11px 16px; border: none; border-radius: 10px;
  background: var(--pp-purple-600); color: var(--pp-fg-on-brand);
  font-family: var(--pp-font-sans); font-size: var(--pp-text-base);
  font-weight: 600; cursor: pointer;
  transition: background .15s var(--pp-ease-out);
}
.pp-help-form-send:hover { background: var(--pp-brand-hover); }
.pp-help-form-send:focus-visible { outline: 3px solid var(--pp-purple-700); outline-offset: 2px; }
.pp-help-form-send:disabled { opacity: .65; cursor: progress; }

.pp-help-sent { text-align: center; padding: 26px 10px 18px; }
.pp-help-sent-ico { color: var(--pp-purple-600); margin: 0 auto 12px; display: block; }
.pp-help-sent-h {
  margin: 0 0 6px; font-family: var(--pp-font-display);
  font-size: var(--pp-text-lg); color: var(--pp-fg-1);
}
.pp-help-sent-p {
  margin: 0 auto 16px; max-width: 32ch;
  color: var(--pp-fg-3); font-size: var(--pp-text-base);
}
.pp-help-sent-again {
  min-height: 44px; padding: 8px 14px; border: none;
  background: transparent; color: var(--pp-purple-700);
  font-family: var(--pp-font-sans); font-size: var(--pp-text-base);
  font-weight: 600; cursor: pointer;
}
.pp-help-sent-again:focus-visible { outline: 2px solid var(--pp-purple-700); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .pp-help-fab-ring { animation: none; opacity: 0; }
  .pp-help-panel { animation: none; }
  .pp-help-fab { transition: none; }
  .pp-help-tab, .pp-help-form-send { transition: none; }
}

/* Relocated into the panel, the page's FAQ keeps its Q&A accordion but
   not its own section heading/intro - the panel header + "FAQ" tab make
   it redundant. !important clears any .faq-head / .tool-page-form-h
   display rule (same pattern as .pp-help-claimed). The accordion items
   (.faq-item / details.tool-faq-item) are untouched and stay usable. */
.pp-help-panel .faq-head,
.pp-help-panel h2.tool-page-form-h { display: none !important; }

@media (scripting: none) {
  /* JS wires all behaviour; with JS off the launcher is non-functional,
     so hide it. The page's inline FAQ stays visible in that case. */
  .pp-help { display: none; }
}