/* ==========================================================================
   Design tokens (from the Claude Design "ProPermit" design system)
   ========================================================================== */
:root {
  /* Indigo — brand primary */
  --indigo-50:  #F1F3FC;
  --indigo-100: #E6E9FB;
  --indigo-200: #C9CFF6;
  --indigo-300: #A5AEF0;
  --indigo-400: #6E77E6;
  --indigo-500: #4A55E0;
  --indigo-600: #3F49D9;
  --indigo-700: #3238B0;
  --indigo-800: #262B85;

  /* Navy — ink / dark surfaces */
  --navy-900: #0E1833;
  --navy-800: #1A2547;
  --navy-700: #2A365F;

  /* Neutrals */
  --gray-0:   #FFFFFF;
  --gray-25:  #FAFAFB;
  --gray-50:  #F5F7FC;
  --gray-75:  #F0F3FA;
  --gray-100: #E7EAF3;
  --gray-200: #D6DBE8;
  --gray-300: #B4BCCC;
  --gray-400: #8A94A6;
  --gray-500: #5E6C78;
  --gray-600: #45505F;

  /* Semantic status */
  --green-600: #178A50;
  --green-100: #E2F5EA;
  --amber-600: #B45309;
  --amber-100: #FCF0DC;
  --red-600:   #D92D20;
  --red-100:   #FDE9E7;

  --surface-page:    var(--gray-25);
  --surface-card:    var(--gray-0);
  --surface-tint:    var(--gray-50);
  --surface-inverse: var(--navy-900);

  --text-heading:   var(--navy-900);
  --text-body:      #2E3A4E;
  --text-secondary: var(--gray-500);
  --text-muted:     var(--gray-400);
  --text-inverse:   #FFFFFF;
  --text-brand:     var(--indigo-600);

  --border-default: var(--gray-100);
  --border-strong:  var(--gray-200);
  --border-focus:   var(--indigo-500);

  --action-primary:       var(--indigo-600);
  --action-primary-hover: var(--indigo-700);
  --action-inverse:       var(--navy-900);
  --action-inverse-hover: #1C2A50;

  --status-approved-fg: var(--green-600);
  --status-approved-bg: var(--green-100);
  --status-pending-fg:  var(--amber-600);
  --status-pending-bg:  var(--amber-100);
  --status-rejected-fg: var(--red-600);
  --status-rejected-bg: var(--red-100);
  --status-review-fg:   var(--indigo-600);
  --status-review-bg:   var(--indigo-100);

  --font-display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  --text-hero: clamp(40px, 6vw, 76px);
  --text-h1: 44px;
  --text-h2: 32px;
  --text-h3: 22px;

  --weight-display: 700;
  --leading-display: 1.05;
  --leading-heading: 1.15;
  --leading-body: 1.55;
  --tracking-display: -0.02em;
  --tracking-heading: -0.01em;

  --space-28: 112px;
  --container-max: 1280px;

  --radius-pill: 999px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;

  --shadow-sm: 0 1px 2px rgba(14, 24, 51, .05);
  --shadow-md: 0 4px 16px rgba(14, 24, 51, .07);
  --shadow-lg: 0 12px 40px rgba(14, 24, 51, .10);
  --shadow-focus: 0 0 0 3px var(--indigo-100);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur-med: 220ms;
}

/* ==========================================================================
   Base
   ========================================================================== */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.propermit-landing {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--leading-body);
  color: var(--text-body);
  background-color: var(--surface-page);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(14,24,51,.05) 1px, transparent 0),
    linear-gradient(180deg, rgba(14,24,51,.02), transparent 340px);
  background-size: 26px 26px, 100% 100%;
  background-repeat: repeat, no-repeat;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--weight-display);
  margin: 0;
}

a { color: inherit; }
img { max-width: 100%; }

.pp-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 40px;
}

@keyframes ppReveal { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes ppFadeIn { from { opacity: 0; } to { opacity: 1; } }

.pp-reveal {
  opacity: 0;
}
.pp-reveal.is-visible {
  animation: ppReveal .7s var(--ease-out) both;
}

/* ==========================================================================
   Buttons, Tag, Input (design-system components)
   ========================================================================== */
.pp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: var(--radius-pill);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  text-decoration: none;
}
.pp-btn:active { transform: scale(0.98); }
.pp-btn:disabled { opacity: .5; cursor: not-allowed; }

.pp-btn-sm { padding: 8px 16px; font-size: 14px; }
.pp-btn-md { padding: 12px 24px; font-size: 15px; }
.pp-btn-lg { padding: 16px 32px; font-size: 16px; }

.pp-btn-primary { background: var(--action-primary); color: var(--text-inverse); }
.pp-btn-primary:hover { background: var(--action-primary-hover); }

.pp-btn-inverse { background: var(--action-inverse); color: var(--text-inverse); }
.pp-btn-inverse:hover { background: var(--action-inverse-hover); }

.pp-btn-secondary { background: var(--surface-card); color: var(--text-heading); border-color: var(--border-strong); }
.pp-btn-secondary:hover { background: var(--gray-50); }

.pp-btn-full { width: 100%; justify-content: center; }

.pp-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--gray-50);
  border: 1px solid var(--border-default);
  color: var(--text-heading);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
}

.pp-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-body);
}
.pp-input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: var(--gray-50);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.pp-input:focus-within {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
}
.pp-input input {
  border: none;
  outline: none;
  background: transparent;
  flex: 1;
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-body);
}
.pp-input-select { padding-right: 14px; }
.pp-input-select select {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  outline: none;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A94A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") right 0 center / 16px no-repeat;
  flex: 1;
  width: 100%;
  padding-right: 22px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-body);
  cursor: pointer;
}

/* ==========================================================================
   Header
   ========================================================================== */
.pp-header-wrap {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 20px 0 10px;
  background: linear-gradient(var(--surface-page) 60%, transparent);
}
.pp-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--gray-50);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  padding: 12px 14px 12px 28px;
  box-shadow: var(--shadow-md);
}
.pp-header-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.pp-header-logo img { height: 26px; width: auto; display: block; }
.pp-nav { display: flex; align-items: center; gap: 30px; font-size: 15px; font-weight: 500; color: var(--text-heading); }
.pp-nav a { text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.pp-nav a:hover { color: var(--indigo-600); }
.pp-nav-cta { display: none; }
.pp-nav-toggle {
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; width: 38px; height: 38px; padding: 0; margin: 0;
  background: transparent; border: none; border-radius: 50%; cursor: pointer; flex-shrink: 0;
}
.pp-nav-toggle .bar {
  width: 18px; height: 2px; border-radius: 1px; background: var(--text-heading);
  transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.pp-nav-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.pp-nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.pp-nav-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 640px) {
  .pp-header { padding: 10px 10px 10px 20px; }
  .pp-header-cta { display: none; }
  .pp-nav-toggle { display: flex; }
  .pp-nav {
    display: none;
    position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: var(--gray-0); border: 1px solid var(--border-default); border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg); padding: 10px;
  }
  .pp-nav.is-open { display: flex; }
  .pp-nav a { padding: 12px 14px; border-radius: 10px; }
  .pp-nav a:hover { background: var(--gray-50); }
  .pp-nav-cta { display: flex; justify-content: center; margin-top: 4px; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.pp-hero {
  position: relative;
  text-align: center;
  padding: 78px 40px 0;
  overflow: hidden;
}
.pp-hero-texture {
  position: absolute;
  top: -60px; left: 0; right: 0;
  height: 620px;
  background-image: url("../images/hero-texture.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: top center;
  opacity: .55;
  -webkit-mask-image: linear-gradient(180deg, black 0%, black 55%, transparent 100%);
  mask-image: linear-gradient(180deg, black 0%, black 55%, transparent 100%);
  pointer-events: none;
}
.pp-hero-inner { position: relative; }
.pp-hero-kickers { display: flex; justify-content: center; gap: 24px; margin-bottom: 30px; flex-wrap: wrap; }
.pp-hero-kicker { display: inline-flex; align-items: center; gap: 7px; color: var(--indigo-600); font-weight: 600; font-size: 15px; }
.pp-hero-kicker .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.pp-hero h1 {
  font-size: var(--text-hero);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
  max-width: 980px;
  margin: 0 auto;
}
.pp-hero-sub {
  max-width: 620px;
  margin: 24px auto 36px;
  font-size: 18px;
  line-height: var(--leading-body);
  color: var(--text-secondary);
}
.pp-hero-ctas { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

.pp-hero-shot-wrap {
  position: relative;
  max-width: 1120px;
  margin: 68px auto 0;
  perspective: 1600px;
}
.pp-hero-shot-tilt {
  transform-style: preserve-3d;
  will-change: transform;
}
.pp-hero-shot-frame {
  background: var(--gray-0);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 10px;
  box-shadow: 0 24px 64px rgba(14,24,51,.14);
}
.pp-hero-shot-frame img { display: block; width: 100%; height: 560px; object-fit: cover; border-radius: 12px; }

.pp-chip {
  position: absolute;
  background: var(--gray-0);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  box-shadow: 0 12px 32px rgba(14,24,51,.12);
  will-change: transform;
}
.pp-chip-a { top: 44px; left: -54px; display: flex; align-items: center; gap: 12px; }
.pp-chip-a .permit-no { font-family: var(--font-mono); font-size: 13px; color: var(--text-heading); }
.pp-chip-a .approved-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--status-approved-bg); color: var(--status-approved-fg);
  border-radius: var(--radius-pill); padding: 4px 12px; font-size: 12.5px; font-weight: 600;
}
.pp-chip-a .approved-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.pp-chip-b { top: 180px; right: -60px; display: flex; flex-direction: column; gap: 4px; }
.pp-chip-b .kicker { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.pp-chip-b .value { font-size: 14px; font-weight: 600; color: var(--text-heading); }

.pp-chip-c {
  bottom: 64px; left: -44px;
  background: var(--navy-900);
  box-shadow: 0 12px 32px rgba(14,24,51,.24);
  display: flex; flex-direction: column; gap: 2px;
  border: none;
}
.pp-chip-c .stat { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: white; line-height: 1.1; }
.pp-chip-c .stat-label { font-size: 12.5px; color: rgba(255,255,255,.65); }

@media (max-width: 860px) {
  .pp-chip { display: none; }
  .pp-hero-shot-frame img { height: 340px; }
}

/* ==========================================================================
   Logo wall
   ========================================================================== */
.pp-logowall { text-align: center; padding: 64px 40px 0; }
.pp-logowall-label {
  margin: 0 0 22px;
  font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted);
}
.pp-logowall-row { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; }
.pp-logowall-item {
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--gray-75); border: 1px solid var(--border-default);
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  font-size: 9px; font-weight: 600; color: var(--text-muted); padding: 6px; box-sizing: border-box;
}

/* ==========================================================================
   Product showcase (scroll-tracked screenshot stack)
   ========================================================================== */
.pp-showcase {
  /* Fallback height (matches the JS default: 3 features = 2 handoffs ×
     650px of scroll each). JS overwrites this inline on load — kept in
     sync so there's no layout jump. */
  height: calc(100vh + 1300px);
  position: relative;
  margin-top: 48px;
}
.pp-showcase-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.pp-showcase-grid {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 40px;
  width: 100%;
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 60px;
  align-items: center;
}
.pp-showcase-features { display: flex; flex-direction: column; gap: 44px; }
.pp-showcase-feature {
  display: grid;
  grid-template-columns: 3px 1fr;
  gap: 20px;
  transition: opacity .1s linear;
}
.pp-showcase-feature .bar-track {
  border-radius: 3px; background: var(--gray-100); position: relative; overflow: hidden;
}
.pp-showcase-feature .bar-fill {
  position: absolute; inset: 0; background: var(--indigo-600);
  transform-origin: 0 0;
}
.pp-showcase-feature-body { display: flex; flex-direction: column; gap: 10px; }
.pp-showcase-feature-kicker { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--indigo-600); }
.pp-showcase-feature h3 { font-size: 27px; }
.pp-showcase-feature p { margin: 0; font-size: 15px; color: var(--text-secondary); line-height: var(--leading-body); }

.pp-showcase-frame {
  position: relative;
  height: 66vh;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--gray-0);
  border: 1px solid var(--border-default);
  box-shadow: 0 24px 64px rgba(14,24,51,.12);
}
.pp-showcase-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  will-change: transform;
}

/* Mobile tab bar — hidden on desktop, where the scroll-scrub experience
   (feature list + camera pan) is used instead. */
.pp-showcase-tabs {
  display: none;
  gap: 8px;
  max-width: var(--container-max);
  margin: 0 auto 16px;
  padding: 0 40px;
}
.pp-showcase-tab {
  flex: 1;
  padding: 10px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-default);
  background: var(--gray-0);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  text-align: center;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.pp-showcase-tab.is-active { background: var(--navy-900); border-color: var(--navy-900); color: white; }

@media (max-width: 1024px) {
  .pp-showcase-grid { grid-template-columns: 1fr; padding-left: 20px; padding-right: 20px; }
  .pp-showcase-features { display: none; }

  /* Below the desktop breakpoint the scroll-scrub/sticky-pin mechanic
     doesn't translate to a small screen (a huge scroll track just to pan a
     screenshot, cropped oddly in a narrow frame) — swap it for a plain tab
     row + static image instead. JS skips the scroll-linked logic entirely
     in this mode, so no inline height/transform ever gets applied here. */
  .pp-showcase { height: auto; margin-top: 24px; }
  .pp-showcase-sticky { position: static; height: auto; display: block; }
  .pp-showcase-frame { height: 46vh; min-height: 280px; }
  .pp-showcase-shot { opacity: 0; transition: opacity .25s ease-out; }
  .pp-showcase-shot.is-active { opacity: 1; }

  .pp-showcase-tabs { display: flex; }
}

@media (max-width: 600px) {
  .pp-showcase-tabs { padding-left: 20px; padding-right: 20px; }
  .pp-showcase-tab { font-size: 11.5px; padding: 9px 6px; }
}

/* ==========================================================================
   Features
   ========================================================================== */
.pp-features { position: relative; max-width: var(--container-max); margin: 0 auto; padding: var(--space-28) 40px 0; isolation: isolate; overflow: hidden; }
.pp-features-texture {
  position: absolute; top: -40px; left: 50%; transform: translateX(-50%);
  width: 1600px; height: 620px;
  background-image: url("../images/features-texture.jpg");
  background-size: cover; background-position: center;
  opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 20%, black 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 20%, black 0%, transparent 75%);
  z-index: -1; pointer-events: none;
}
.pp-section-head { text-align: center; margin-bottom: 56px; }
.pp-section-head h2 { font-size: 44px; max-width: 760px; margin: 18px auto 0; }
.pp-section-head p { max-width: 600px; margin: 18px auto 0; font-size: 17px; color: var(--text-secondary); line-height: var(--leading-body); }

.pp-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: min-content;
  gap: 20px;
}
.pp-features-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
}
.pp-feature-card {
  background: var(--gray-0);
  border: 1px solid var(--border-default);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s ease-out, transform .2s ease-out;
}
.pp-feature-card:hover { box-shadow: 0 12px 32px rgba(14,24,51,.09); transform: translateY(-3px); }

.pp-feature-card.span-1 { grid-column: span 1; }
.pp-feature-card.span-2 { grid-column: span 2; }
.pp-feature-card.span-3 { grid-column: span 3; }
.pp-feature-card.span-4 { grid-column: span 4; }

.pp-feature-media {
  background: var(--gray-50);
  border-bottom: 1px solid var(--border-default);
  position: relative;
  overflow: hidden;
  padding: 14px;
  box-sizing: border-box;
}
.pp-feature-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pp-feature-body h3 { font-size: 20px; }
.pp-feature-body p { margin: 0; font-size: 14px; color: var(--text-secondary); line-height: var(--leading-body); }

@media (max-width: 900px) {
  .pp-features-grid { grid-template-columns: repeat(2, 1fr); }
  .pp-feature-card.span-1, .pp-feature-card.span-2, .pp-feature-card.span-3, .pp-feature-card.span-4 { grid-column: span 2; }
  .pp-features-trio { grid-template-columns: 1fr; }
}

/* ── Feature-card illustrations: looping "video snippet" mockups ──────────
   Auto-playing, pure-CSS 8s loops, framed like a video player (label pill +
   progress bar), ported from the reference concept site's Essentials grid. */
.pp-snip-frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.pp-snip-body { position: absolute; inset: 0; }
.pp-snip-progress-track { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(14,24,51,.08); z-index: 2; }
.pp-snip-progress-fill { height: 100%; background: var(--indigo-500); animation: snipProgress 8s linear infinite; }

@keyframes snipProgress { from { width: 0; } to { width: 100%; } }

/* 1 — Form Builder: a field is dragged from the palette and dropped into the form */
.pp-snip-formbuilder {
  position: relative; background: white; border-radius: 12px; border: 1px solid var(--border-default);
  padding: 12px; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px;
  font-family: var(--font-body); overflow: hidden;
}
.pp-snip-fb-palette-label { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.pp-snip-fb-palette { display: flex; gap: 6px; }
.pp-snip-fb-chip {
  padding: 5px 10px; border-radius: 8px; background: var(--gray-50); border: 1px dashed var(--gray-200);
  font-size: 10.5px; font-weight: 600; color: var(--text-secondary);
}
.pp-snip-fb-chip.is-source { animation: fbSourceFade 8s ease-in-out infinite; }
@keyframes fbSourceFade { 0%, 12% { opacity: 1; } 18%, 55% { opacity: .35; } 92%, 100% { opacity: 1; } }

.pp-snip-fb-canvas { flex: 1; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.pp-snip-fb-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 999px;
  background: var(--gray-50); border: 1px solid var(--border-default);
}
.pp-snip-fb-row .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--indigo-400); flex-shrink: 0; }
.pp-snip-fb-row .name { font-size: 11.5px; font-weight: 600; color: var(--text-heading); flex: 1; }
.pp-snip-fb-row .kind { font-size: 9.5px; font-family: var(--font-mono); color: var(--text-muted); }

.pp-snip-fb-dropzone {
  position: relative; flex: 1; min-height: 30px;
  border: 1.5px dashed var(--gray-200); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  animation: fbDropzoneFlash 8s ease-in-out infinite;
}
.pp-snip-fb-dropzone-text { font-size: 10.5px; color: var(--text-muted); animation: fbDropTextFade 8s ease-in-out infinite; }
@keyframes fbDropzoneFlash {
  0%, 18% { border-color: var(--gray-200); background: transparent; }
  30%, 55% { border-color: var(--indigo-400); background: rgba(63,73,217,.05); }
  62%, 100% { border-color: var(--gray-200); background: transparent; }
}
@keyframes fbDropTextFade { 0%, 55% { opacity: 1; } 62%, 100% { opacity: 0; } }

.pp-snip-fb-row.is-new {
  position: absolute; inset: 4px; opacity: 0; transform: scale(.9);
  animation: fbRowIn 8s ease-out infinite;
}
@keyframes fbRowIn {
  0%, 58% { opacity: 0; transform: scale(.9); }
  66%, 92% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.95); }
}

.pp-snip-fb-ghost {
  position: absolute; padding: 5px 10px; border-radius: 8px;
  background: var(--indigo-600); color: white; font-size: 10.5px; font-weight: 600;
  box-shadow: 0 6px 16px rgba(63,73,217,.35);
  opacity: 0; animation: fbGhostMove 8s ease-in-out infinite;
}
@keyframes fbGhostMove {
  0%, 10% { opacity: 0; top: 16%; left: 60%; transform: scale(1); }
  16% { opacity: 1; top: 16%; left: 60%; }
  50% { opacity: 1; top: 74%; left: 10%; transform: scale(1.05); }
  58%, 100% { opacity: 0; top: 74%; left: 10%; }
}
.pp-snip-fb-cursor {
  position: absolute; opacity: 0;
  filter: drop-shadow(0 1px 2px rgba(14,24,51,.3));
  animation: fbCursorMove 8s ease-in-out infinite;
}
@keyframes fbCursorMove {
  0%, 10% { opacity: 0; top: 22%; left: 78%; }
  16%, 50% { opacity: 1; }
  50% { top: 82%; left: 20%; }
  58%, 100% { opacity: 0; top: 82%; left: 20%; }
}

/* 2 — Automated Workflows: application travels the pipeline, status flips */
.pp-snip-workflow { background: white; border-radius: 12px; border: 1px solid var(--border-default); padding: 20px 18px; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 22px; font-family: var(--font-body); }
.pp-snip-wf-track { position: relative; height: 24px; }
.pp-snip-wf-line { position: absolute; left: 4%; right: 4%; top: 11px; height: 2px; background: var(--gray-100); }
.pp-snip-wf-node {
  position: absolute; top: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: white; border: 2px solid var(--indigo-300); box-sizing: border-box;
}
.pp-snip-wf-dot {
  position: absolute; top: 5px; left: 4%; width: 14px; height: 14px; border-radius: 50%;
  background: var(--indigo-600); box-shadow: 0 0 0 5px var(--indigo-100);
  animation: dotTravel 8s ease-in-out infinite;
}
@keyframes dotTravel {
  0%, 6% { left: 4%; }
  22%, 28% { left: 34%; }
  47%, 53% { left: 66%; }
  72%, 100% { left: 96%; }
}
.pp-snip-wf-stages { display: flex; justify-content: space-between; }
.pp-snip-wf-stages span { font-size: 10.5px; font-weight: 600; color: var(--text-secondary); width: 25%; text-align: center; }
.pp-snip-wf-status { position: relative; height: 26px; display: flex; justify-content: center; }
.pp-snip-wf-pill {
  position: absolute; display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 14px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
  animation-duration: 8s; animation-timing-function: linear; animation-iteration-count: infinite;
}
.pp-snip-wf-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pp-snip-wf-pill.stage-1 { background: var(--status-pending-bg); color: var(--status-pending-fg); animation-name: flipStage1; }
.pp-snip-wf-pill.stage-2 { background: var(--status-review-bg); color: var(--status-review-fg); animation-name: flipStage2; }
.pp-snip-wf-pill.stage-3 { background: var(--gray-200); color: var(--navy-900); animation-name: flipStage3; }
.pp-snip-wf-pill.stage-4 { background: var(--status-approved-bg); color: var(--status-approved-fg); animation-name: flipStage4; }
@keyframes flipStage1 { 0%, 20% { opacity: 1; } 26%, 100% { opacity: 0; } }
@keyframes flipStage2 { 0%, 20% { opacity: 0; } 26%, 45% { opacity: 1; } 51%, 100% { opacity: 0; } }
@keyframes flipStage3 { 0%, 45% { opacity: 0; } 51%, 70% { opacity: 1; } 76%, 100% { opacity: 0; } }
@keyframes flipStage4 { 0%, 70% { opacity: 0; } 76%, 100% { opacity: 1; } }

/* 3 — EPR & Inspection: a reviewer clicks through markup pins on the real
   redlined plan sheet, tallying flagged comments as they go. */
.pp-snip-plan { position: relative; height: 100%; border-radius: 10px; overflow: hidden; background: var(--gray-100); }
.pp-snip-plan-bg {
  position: absolute; inset: 0;
  background-image: url("../images/epr-floor-plan.jpg");
  background-repeat: no-repeat;
  background-size: 190% auto;
  background-position: 42% 58%;
}
.pp-snip-plan-pin {
  position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border-radius: 50% 50% 50% 4px; background: var(--red-600); color: white;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(14,24,51,.35);
  opacity: 0; transform: scale(.5) rotate(45deg);
}
.pp-snip-plan-pin .num { font-size: 10px; font-weight: 700; transform: rotate(-45deg); }
.pp-snip-plan-pin .ring {
  position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--red-600);
  opacity: 0; transform: rotate(-45deg);
}
.pp-snip-plan-pin.pin-1 { top: 40%; left: 26%; animation: planPin1 8s ease-in-out infinite; }
.pp-snip-plan-pin.pin-2 { top: 66%; left: 17%; animation: planPin2 8s ease-in-out infinite; }
.pp-snip-plan-pin.pin-3 { top: 52%; left: 60%; animation: planPin3 8s ease-in-out infinite; }
.pp-snip-plan-pin.pin-1 .ring { animation: planRing1 8s ease-in-out infinite; }
.pp-snip-plan-pin.pin-2 .ring { animation: planRing2 8s ease-in-out infinite; }
.pp-snip-plan-pin.pin-3 .ring { animation: planRing3 8s ease-in-out infinite; }
@keyframes planPin1 {
  0%, 8% { opacity: 0; transform: scale(.5) rotate(45deg); }
  14% { opacity: 1; transform: scale(1.2) rotate(45deg); }
  20%, 90% { opacity: 1; transform: scale(1) rotate(45deg); }
  96%, 100% { opacity: 0; transform: scale(.5) rotate(45deg); }
}
@keyframes planPin2 {
  0%, 30% { opacity: 0; transform: scale(.5) rotate(45deg); }
  36% { opacity: 1; transform: scale(1.2) rotate(45deg); }
  42%, 90% { opacity: 1; transform: scale(1) rotate(45deg); }
  96%, 100% { opacity: 0; transform: scale(.5) rotate(45deg); }
}
@keyframes planPin3 {
  0%, 52% { opacity: 0; transform: scale(.5) rotate(45deg); }
  58% { opacity: 1; transform: scale(1.2) rotate(45deg); }
  64%, 90% { opacity: 1; transform: scale(1) rotate(45deg); }
  96%, 100% { opacity: 0; transform: scale(.5) rotate(45deg); }
}
@keyframes planRing1 { 0%, 12% { opacity: 0; transform: scale(1) rotate(-45deg); } 14% { opacity: .8; transform: scale(1) rotate(-45deg); } 26% { opacity: 0; transform: scale(2.2) rotate(-45deg); } 100% { opacity: 0; } }
@keyframes planRing2 { 0%, 34% { opacity: 0; transform: scale(1) rotate(-45deg); } 36% { opacity: .8; transform: scale(1) rotate(-45deg); } 48% { opacity: 0; transform: scale(2.2) rotate(-45deg); } 100% { opacity: 0; } }
@keyframes planRing3 { 0%, 56% { opacity: 0; transform: scale(1) rotate(-45deg); } 58% { opacity: .8; transform: scale(1) rotate(-45deg); } 70% { opacity: 0; transform: scale(2.2) rotate(-45deg); } 100% { opacity: 0; } }

.pp-snip-plan-cursor {
  position: absolute; opacity: 0;
  filter: drop-shadow(0 1px 2px rgba(14,24,51,.4));
  animation: planCursorMove 8s ease-in-out infinite;
}
@keyframes planCursorMove {
  0%, 6% { opacity: 0; top: 40%; left: 26%; }
  12%, 16% { opacity: 1; top: 40%; left: 26%; }
  34%, 38% { opacity: 1; top: 66%; left: 17%; }
  56%, 60% { opacity: 1; top: 52%; left: 60%; }
  66%, 100% { opacity: 0; top: 52%; left: 60%; }
}

.pp-snip-plan-counter {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  width: 128px; height: 24px; border-radius: 999px; background: rgba(14,24,51,.82);
  font-family: var(--font-body); font-size: 11px; font-weight: 600; color: white;
}
.pp-snip-plan-counter .stage { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); white-space: nowrap; opacity: 0; }
.pp-snip-plan-counter .stage-1 { animation: planStage1 8s ease-in-out infinite; }
.pp-snip-plan-counter .stage-2 { animation: planStage2 8s ease-in-out infinite; }
.pp-snip-plan-counter .stage-3 { animation: planStage3 8s ease-in-out infinite; }
@keyframes planStage1 { 0%, 12% { opacity: 0; } 16%, 34% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes planStage2 { 0%, 34% { opacity: 0; } 40%, 56% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes planStage3 { 0%, 56% { opacity: 0; } 62%, 96% { opacity: 1; } 100% { opacity: 0; } }

/* 4 — Admin Control Center: permission switches toggle themselves */
.pp-snip-admin { background: white; border-radius: 12px; border: 1px solid var(--border-default); padding: 14px; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; font-family: var(--font-body); }
.pp-snip-admin-title { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.pp-snip-admin-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--border-default); }
.pp-snip-admin-text { flex: 1; min-width: 0; }
.pp-snip-admin-text .role { font-size: 12.5px; font-weight: 700; color: var(--text-heading); }
.pp-snip-admin-text .perm { font-size: 11px; color: var(--text-secondary); }
.pp-snip-switch {
  position: relative; width: 36px; height: 20px; border-radius: 999px; flex-shrink: 0;
  background: var(--gray-200); animation: switchTrack 8s ease-in-out infinite;
}
.pp-snip-switch-knob {
  position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%;
  background: white; box-shadow: var(--shadow-sm); animation: switchKnob 8s ease-in-out infinite;
}
@keyframes switchKnob { 0%, 20% { left: 3px; } 30%, 70% { left: 19px; } 80%, 100% { left: 3px; } }
@keyframes switchTrack { 0%, 20% { background: var(--gray-200); } 30%, 70% { background: var(--indigo-600); } 80%, 100% { background: var(--gray-200); } }

/* 5 — Detailed Statistics: bars grow */
.pp-snip-stats { background: white; border-radius: 12px; border: 1px solid var(--border-default); padding: 14px; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; font-family: var(--font-body); }
.pp-snip-stats-head { display: flex; justify-content: space-between; align-items: baseline; }
.pp-snip-stats-head .label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.pp-snip-stats-head .year { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }
.pp-snip-stats-bars { flex: 1; display: flex; align-items: flex-end; gap: 8px; padding-top: 12px; }
.pp-snip-bar {
  flex: 1; border-radius: 6px 6px 2px 2px; background: var(--indigo-200);
  transform-origin: bottom; animation: barGrow 8s var(--ease-out) infinite;
}
.pp-snip-bar.is-current { background: var(--indigo-600); }
@keyframes barGrow {
  0% { transform: scaleY(.08); }
  22% { transform: scaleY(1); }
  86% { transform: scaleY(1); }
  100% { transform: scaleY(.08); }
}

/* 6 — Team Collaboration: review thread builds up */
.pp-snip-collab { background: white; border-radius: 12px; border: 1px solid var(--border-default); padding: 14px; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; font-family: var(--font-body); }
.pp-snip-collab-title { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.pp-snip-msg { display: flex; gap: 8px; align-items: flex-start; animation: bubbleIn 8s ease-out infinite; opacity: 0; }
.pp-snip-avatar {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  background-size: cover; background-position: center;
  border: 1px solid var(--border-default);
}
.pp-snip-bubble { background: var(--gray-50); border: 1px solid var(--border-default); border-radius: 4px 12px 12px 12px; padding: 6px 10px; font-size: 11.5px; color: var(--text-body); }
@keyframes bubbleIn {
  0%, 100% { opacity: 0; transform: translateY(10px) scale(.97); }
  8% { opacity: 1; transform: translateY(0) scale(1); }
  90% { opacity: 1; transform: translateY(0) scale(1); }
  98% { opacity: 0; }
}

/* Shared: a pulsing ring (used by Security's shield) and a staggered
   fade-up pill (used by Security's tag list). */
@keyframes intRing {
  0% { transform: scale(1); opacity: .9; }
  30% { transform: scale(1.35); opacity: 0; }
  100% { opacity: 0; }
}
@keyframes pillIn {
  0%, 100% { opacity: 0; transform: translateY(8px); }
  8% { opacity: 1; transform: translateY(0); }
  85% { opacity: 1; transform: translateY(0); }
  95% { opacity: 0; transform: translateY(-4px); }
}

/* 7 — Robust Security: shield pulses, capability tags fade up */
.pp-snip-security { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 14px; font-family: var(--font-body); }
.pp-snip-sec-shield {
  position: relative; width: 48px; height: 48px; border-radius: 14px;
  background: var(--indigo-600); display: inline-flex; align-items: center; justify-content: center;
}
.pp-snip-sec-ring { position: absolute; inset: 0; border-radius: 14px; border: 1.5px solid var(--indigo-400); animation: intRing 8s ease-out infinite; }
.pp-snip-sec-tags { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.pp-snip-sec-tag {
  padding: 5px 14px; border-radius: 999px; background: var(--gray-0); border: 1px solid var(--border-default);
  font-size: 11.5px; font-weight: 600; color: var(--text-heading);
  opacity: 0; animation: pillIn 8s ease-out infinite;
}

/* 8 — AI-Enhanced UI: assistant "types" a suggestion, then offers to apply it */
.pp-snip-ai { background: white; border-radius: 12px; border: 1px solid var(--border-default); padding: 14px; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 12px; font-family: var(--font-body); }
.pp-snip-ai-row { display: flex; align-items: flex-start; gap: 8px; }
.pp-snip-ai-avatar {
  width: 22px; height: 22px; border-radius: 50%; background: var(--indigo-600); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.pp-snip-ai-bubble {
  position: relative; flex: 1; background: var(--gray-50); border: 1px solid var(--border-default);
  border-radius: 4px 12px 12px 12px; padding: 9px 12px; min-height: 32px; box-sizing: border-box;
  display: flex; align-items: center;
}
.pp-snip-ai-dots { position: absolute; display: flex; gap: 4px; animation: aiDotsShow 8s ease-in-out infinite; }
.pp-snip-ai-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--text-muted); animation: aiDotBounce .9s ease-in-out infinite; }
.pp-snip-ai-dots span:nth-child(2) { animation-delay: .15s; }
.pp-snip-ai-dots span:nth-child(3) { animation-delay: .3s; }
.pp-snip-ai-text { font-size: 11.5px; color: var(--text-body); line-height: 1.4; opacity: 0; animation: aiTextShow 8s ease-in-out infinite; }
@keyframes aiDotsShow { 0%, 28% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes aiDotBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes aiTextShow { 0%, 32% { opacity: 0; } 40%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
.pp-snip-ai-accept {
  align-self: flex-start; margin-left: 30px; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; background: var(--indigo-100); color: var(--indigo-700);
  font-size: 11px; font-weight: 700;
  opacity: 0; transform: translateY(4px); animation: aiAcceptShow 8s ease-in-out infinite;
}
@keyframes aiAcceptShow {
  0%, 50% { opacity: 0; transform: translateY(4px); }
  58%, 85% { opacity: 1; transform: translateY(0); }
  93%, 100% { opacity: 0; }
}

/* 9 — Integrated Finance & Auditing: fees, penalties, surety bonds, and
   escrow each drop through their own pipeline into a running ledger. */
.pp-snip-finance { background: white; border-radius: 12px; border: 1px solid var(--border-default); padding: 12px; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; font-family: var(--font-body); }

.pp-snip-fin-pipelines { display: flex; justify-content: space-around; height: 52px; flex-shrink: 0; }
.pp-snip-fin-pipe { position: relative; width: 26px; display: flex; flex-direction: column; align-items: center; }
.pp-snip-fin-track {
  position: absolute; top: 13px; bottom: 0; left: 50%; width: 0;
  border-left: 2px dashed var(--gray-200);
}
.pp-snip-fin-icon {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, 0);
  width: 26px; height: 26px; border-radius: 50%; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  color: white; font-size: 13px; font-weight: 700;
  box-shadow: 0 2px 6px rgba(14,24,51,.25);
}
.pp-snip-fin-icon.fees { background: var(--indigo-600); animation: finDrop1 8s ease-in-out infinite; }
.pp-snip-fin-icon.penalty { background: var(--red-600); animation: finDrop2 8s ease-in-out infinite; }
.pp-snip-fin-icon.surety { background: var(--navy-700); animation: finDrop3 8s ease-in-out infinite; }
.pp-snip-fin-icon.escrow { background: var(--green-600); animation: finDrop4 8s ease-in-out infinite; }
@keyframes finDrop1 { 0%, 6% { transform: translate(-50%, 0); opacity: 1; } 16% { transform: translate(-50%, 38px); opacity: 0; } 17%, 94% { transform: translate(-50%, 0); opacity: 0; } 100% { transform: translate(-50%, 0); opacity: 1; } }
@keyframes finDrop2 { 0%, 28% { transform: translate(-50%, 0); opacity: 1; } 38% { transform: translate(-50%, 38px); opacity: 0; } 39%, 94% { transform: translate(-50%, 0); opacity: 0; } 100% { transform: translate(-50%, 0); opacity: 1; } }
@keyframes finDrop3 { 0%, 50% { transform: translate(-50%, 0); opacity: 1; } 60% { transform: translate(-50%, 38px); opacity: 0; } 61%, 94% { transform: translate(-50%, 0); opacity: 0; } 100% { transform: translate(-50%, 0); opacity: 1; } }
@keyframes finDrop4 { 0%, 72% { transform: translate(-50%, 0); opacity: 1; } 82% { transform: translate(-50%, 38px); opacity: 0; } 83%, 94% { transform: translate(-50%, 0); opacity: 0; } 100% { transform: translate(-50%, 0); opacity: 1; } }

.pp-snip-fin-ledger { flex: 1; border-top: 1px solid var(--border-default); padding-top: 6px; display: flex; flex-direction: column; gap: 3px; min-height: 0; }
.pp-snip-fin-ledger-title { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 1px; }
.pp-snip-fin-ledger-row { font-size: 11px; font-family: var(--font-mono); color: var(--text-heading); opacity: 0; transform: translateY(5px); }
.pp-snip-fin-ledger-row.row-1 { animation: finRow1 8s ease-out infinite; }
.pp-snip-fin-ledger-row.row-2 { animation: finRow2 8s ease-out infinite; }
.pp-snip-fin-ledger-row.row-3 { animation: finRow3 8s ease-out infinite; }
.pp-snip-fin-ledger-row.row-4 { animation: finRow4 8s ease-out infinite; }
@keyframes finRow1 { 0%, 14% { opacity: 0; transform: translateY(5px); } 20%, 92% { opacity: 1; transform: translateY(0); } 97%, 100% { opacity: 0; } }
@keyframes finRow2 { 0%, 36% { opacity: 0; transform: translateY(5px); } 42%, 92% { opacity: 1; transform: translateY(0); } 97%, 100% { opacity: 0; } }
@keyframes finRow3 { 0%, 58% { opacity: 0; transform: translateY(5px); } 64%, 92% { opacity: 1; transform: translateY(0); } 97%, 100% { opacity: 0; } }
@keyframes finRow4 { 0%, 80% { opacity: 0; transform: translateY(5px); } 86%, 92% { opacity: 1; transform: translateY(0); } 97%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  /* Show each illustration's "settled" end-state statically instead of a
     perpetually-looping animation. */
  .pp-snip-frame * { animation: none !important; }
  .pp-snip-msg, .pp-snip-sec-tag { opacity: 1 !important; transform: none !important; }
  .pp-snip-bar { transform: scaleY(1) !important; }
  .pp-snip-plan-pin { opacity: 1 !important; transform: scale(1) rotate(45deg) !important; }
  .pp-snip-plan-pin .ring { opacity: 0 !important; }
  .pp-snip-plan-cursor { opacity: 0 !important; }
  .pp-snip-plan-counter .stage { opacity: 0 !important; }
  .pp-snip-plan-counter .stage-3 { opacity: 1 !important; }
  .pp-snip-wf-dot { left: 96% !important; }
  .pp-snip-wf-pill { opacity: 0 !important; }
  .pp-snip-wf-pill.stage-4 { opacity: 1 !important; }
  .pp-snip-switch-knob { left: 19px !important; }
  .pp-snip-switch { background: var(--indigo-600) !important; }
  .pp-snip-sec-ring { opacity: 0 !important; }
  .pp-snip-fb-chip.is-source { opacity: 1 !important; }
  .pp-snip-fb-dropzone { border-color: var(--gray-200) !important; background: transparent !important; }
  .pp-snip-fb-dropzone-text { opacity: 0 !important; }
  .pp-snip-fb-row.is-new { opacity: 1 !important; transform: none !important; }
  .pp-snip-fb-ghost, .pp-snip-fb-cursor { opacity: 0 !important; }
  .pp-snip-ai-dots { opacity: 0 !important; }
  .pp-snip-ai-text, .pp-snip-ai-accept { opacity: 1 !important; transform: none !important; }
  .pp-snip-fin-ledger-row { opacity: 1 !important; transform: none !important; }
  .pp-snip-fin-icon { opacity: 1 !important; transform: translate(-50%, 38px) !important; }
}

/* ==========================================================================
   Navy CTA band
   ========================================================================== */
.pp-cta-band { position: relative; background: var(--navy-900); margin-top: var(--space-28); padding: 96px 40px; text-align: center; overflow: hidden; }
.pp-cta-band::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(14,24,51,.88), rgba(14,24,51,.88)),
    url("../images/cta-skyline.jpg");
  background-size: cover;
  background-position: center;
  opacity: .6;
}
.pp-cta-band > * { position: relative; z-index: 1; }
.pp-cta-band h2 { color: white; font-size: 44px; max-width: 720px; margin: 0 auto; }
.pp-cta-band p { color: rgba(255,255,255,.7); max-width: 640px; margin: 20px auto 34px; font-size: 16.5px; line-height: var(--leading-body); }

/* ==========================================================================
   Case studies
   ========================================================================== */
.pp-case-studies { max-width: var(--container-max); margin: 0 auto; padding: var(--space-28) 40px 0; }
.pp-case-studies-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pp-case-card {
  background: var(--gray-0);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .2s ease-out, transform .2s ease-out;
}
.pp-case-card:hover { box-shadow: 0 12px 32px rgba(14,24,51,.09); transform: translateY(-3px); }
.pp-case-card img { display: block; width: 100%; height: 180px; object-fit: cover; }
.pp-case-card-body { padding: 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.pp-case-card-agency { font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.pp-case-card-metric { display: flex; align-items: baseline; gap: 10px; }
.pp-case-card-metric .value { font-family: var(--font-display); font-weight: 700; font-size: 42px; letter-spacing: -0.02em; color: var(--indigo-600); line-height: 1; }
.pp-case-card-metric .label { font-size: 14px; font-weight: 500; color: var(--text-heading); }
.pp-case-card-quote { margin: 0; font-size: 14.5px; color: var(--text-secondary); line-height: var(--leading-body); flex: 1; }
.pp-case-card-attribution { font-size: 13px; font-weight: 600; color: var(--text-heading); }

@media (max-width: 900px) {
  .pp-case-studies-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.pp-testimonials {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-28) 40px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
}
.pp-testimonials-quote-wrap { position: relative; padding: 0 32px; }
.pp-testimonials-mark {
  position: absolute;
  font-family: var(--font-display); font-size: 72px; line-height: 1;
  color: rgba(14,24,51,.06); pointer-events: none;
}
.pp-testimonials-mark.left { left: -8px; top: -20px; }
.pp-testimonials-mark.right { right: -8px; bottom: -36px; }
.pp-testimonials-quote {
  font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.4;
  color: var(--text-heading); max-width: 560px; margin: 0 auto;
  transition: opacity .4s var(--ease-out), filter .4s var(--ease-out), transform .4s var(--ease-out);
}
.pp-testimonials-quote.is-swapping { opacity: 0; filter: blur(4px); transform: scale(.98); }

.pp-testimonials-meta { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.pp-testimonials-role {
  margin: 0; font-size: 12px; color: var(--text-muted); letter-spacing: .2em; text-transform: uppercase;
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.pp-testimonials-role.is-swapping { opacity: 0; transform: translateY(8px); }

.pp-testimonials-avatars { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.pp-testimonials-avatar {
  display: flex; align-items: center; border-radius: var(--radius-pill); border: none; cursor: pointer;
  background: transparent; padding: 2px; font-family: var(--font-body);
  transition: background var(--dur-med) var(--ease-out), padding var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.pp-testimonials-avatar:hover:not(.is-active) { background: var(--gray-75); }
.pp-testimonials-avatar.is-active { background: var(--navy-900); box-shadow: var(--shadow-lg); padding: 8px 16px 8px 8px; }
.pp-testimonials-avatar img {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  transition: box-shadow var(--dur-med) var(--ease-out);
}
.pp-testimonials-avatar.is-active img { box-shadow: 0 0 0 2px rgba(255,255,255,.3); }
.pp-testimonials-name-wrap {
  display: grid; grid-template-columns: 0fr; opacity: 0; margin-left: 0; overflow: hidden;
  transition: grid-template-columns var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out), margin-left var(--dur-med) var(--ease-out);
}
.pp-testimonials-avatar:hover:not(.is-active) .pp-testimonials-name-wrap,
.pp-testimonials-avatar.is-active .pp-testimonials-name-wrap {
  grid-template-columns: 1fr; opacity: 1; margin-left: 8px;
}
.pp-testimonials-name {
  min-width: 0; overflow: hidden; font-size: 14px; font-weight: 600; white-space: nowrap;
  color: var(--text-heading); transition: color var(--dur-fast) var(--ease-out);
}
.pp-testimonials-avatar.is-active .pp-testimonials-name { color: white; }

@media (max-width: 640px) {
  .pp-testimonials-quote { font-size: 22px; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.pp-faq { max-width: var(--container-max); margin: 0 auto; padding: var(--space-28) 40px 0; display: grid; grid-template-columns: 340px 1fr; gap: 64px; }
.pp-faq-head h2 { font-size: 40px; margin: 18px 0 0; }
.pp-faq-head p { font-size: 15.5px; color: var(--text-secondary); line-height: var(--leading-body); margin: 16px 0 0; }
.pp-faq-head a { color: var(--indigo-600); font-weight: 600; text-decoration: none; }

.pp-faq-list { display: flex; flex-direction: column; gap: 12px; }
.pp-faq-item {
  background: var(--gray-0);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 20px 26px;
  cursor: pointer;
  transition: border-color .15s ease-out;
}
.pp-faq-item:hover { border-color: var(--border-strong); }
.pp-faq-q { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-weight: 600; font-size: 16px; color: var(--text-heading); background: none; border: none; width: 100%; text-align: left; padding: 0; font-family: var(--font-body); cursor: pointer; }
.pp-faq-glyph { color: var(--text-muted); font-size: 22px; line-height: 1; flex-shrink: 0; }
.pp-faq-a { margin: 10px 0 0; font-size: 14.5px; color: var(--text-secondary); line-height: var(--leading-body); display: none; }
.pp-faq-item.is-open .pp-faq-a { display: block; animation: ppFadeIn .18s ease-out both; }

@media (max-width: 900px) {
  .pp-faq { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Contact
   ========================================================================== */
.pp-contact {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-28) 40px var(--space-28);
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 64px;
  align-items: center;
}
.pp-contact::before {
  /* The source texture is a square canvas with the dot-wave concentrated in
     its lower half, at full density — cropped to a mid slice (denser than
     the empty top, lighter than the packed bottom) and faded via opacity
     so it reads as an ambient backdrop instead of competing with the copy
     text sitting on top of it. */
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/contact-texture.png");
  background-repeat: no-repeat;
  background-position: center 68%;
  background-size: cover;
  opacity: .5;
  pointer-events: none;
}
.pp-contact > * { position: relative; }
.pp-contact-copy h2 { font-size: 44px; margin: 18px 0 0; }
.pp-contact-copy p { font-size: 16.5px; color: var(--text-secondary); line-height: var(--leading-body); max-width: 480px; margin: 18px 0 28px; }
.pp-contact-details { display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--text-heading); font-weight: 500; }
.pp-contact-details .mono { font-family: var(--font-mono); font-size: 14px; }

.pp-contact-card { background: var(--gray-0); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow-md); }
.pp-contact-form { display: flex; flex-direction: column; gap: 14px; }
.pp-contact-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pp-contact-form .hint { margin: 0; text-align: center; font-size: 12.5px; color: var(--text-muted); }
.pp-contact-error { margin: 0; font-size: 13px; color: var(--red-600); text-align: center; }

.pp-contact-success { display: none; flex-direction: column; gap: 10px; align-items: flex-start; padding: 8px 0; }
.pp-contact-success.is-visible { display: flex; }
.pp-contact-form.is-hidden { display: none; }
.pp-contact-success-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--status-approved-fg); font-size: 16px; }
.pp-contact-success p { margin: 0; font-size: 14.5px; color: var(--text-secondary); }

@media (max-width: 900px) {
  .pp-contact { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.pp-site-footer { background: var(--navy-900); padding: 64px 0 40px; }
.pp-footer-row { max-width: var(--container-max); margin: 0 auto; padding: 0 40px; display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; flex-wrap: wrap; }
.pp-footer-brand { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.pp-footer-wordmark { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; color: white; }
.pp-footer-nav { display: flex; gap: 28px; font-size: 14px; color: rgba(255,255,255,.85); flex-wrap: wrap; }
.pp-footer-nav a { text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.pp-footer-nav a:hover { color: white; }
.pp-footer-contact { display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: rgba(255,255,255,.85); text-align: right; }
.pp-footer-legal { max-width: var(--container-max); margin: 40px auto 0; padding: 24px 40px 0; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; color: rgba(255,255,255,.5); }

@media (max-width: 640px) {
  .pp-footer-contact { text-align: left; }
}

/* ==========================================================================
   Mobile responsive pass (small phones)
   ========================================================================== */
@media (max-width: 600px) {
  /* Cascades to every section that uses the token for its top/bottom
     section-rhythm padding — one change instead of touching each section. */
  :root { --space-28: 64px; }

  /* Tighter side gutters than the 40px used at desktop/tablet widths. */
  .pp-container,
  .pp-hero,
  .pp-logowall,
  .pp-showcase-grid,
  .pp-features,
  .pp-cta-band,
  .pp-case-studies,
  .pp-testimonials,
  .pp-faq,
  .pp-contact,
  .pp-footer-row,
  .pp-footer-legal {
    padding-left: 20px;
    padding-right: 20px;
  }

  .pp-hero { padding-top: 56px; }
  .pp-hero-shot-wrap { margin-top: 40px; }
  .pp-hero-shot-frame img { height: 220px; }
  .pp-hero-sub { font-size: 16px; }
  .pp-hero-ctas .pp-btn-lg { padding: 14px 22px; font-size: 15px; }

  .pp-section-head h2 { font-size: 30px; }
  .pp-section-head p { font-size: 15.5px; }

  .pp-cta-band { padding-top: 64px; padding-bottom: 64px; }
  .pp-cta-band h2 { font-size: 30px; }

  .pp-faq-head h2 { font-size: 26px; }
  .pp-faq-item { padding: 16px 18px; }

  .pp-contact-copy h2 { font-size: 30px; }
  .pp-contact-card { padding: 22px; }
  .pp-contact-form-row { grid-template-columns: 1fr; }

  .pp-testimonials-quote-wrap { padding: 0 20px; }
  .pp-testimonials-mark { font-size: 56px; }

  /* Below ~560px, two illustration-heavy cards side by side get too
     cramped for their content (pill labels, ledger rows, etc.) — drop to
     one full-width column so each illustration has room to breathe. */
  .pp-features-grid { grid-template-columns: 1fr; }
  .pp-feature-card.span-1, .pp-feature-card.span-2, .pp-feature-card.span-3, .pp-feature-card.span-4 { grid-column: span 1; }
}