/* ============================================================================
   parity.css  —  Torquity landing rebuilt to autoreelapp.com's structure,
   on the original green/light design DNA.
   Loaded globally AFTER styles.css. Shared chrome (announcement bar, nav,
   footer) applies site-wide; home-page sections use scoped .p-* classes.
   HARD RULE: never let this file become empty.
   ============================================================================ */

:root {
  --p-accent: #3d8e72;
  --p-accent-hover: #347f65;
  --p-accent-deep: #2c6650;
  --p-accent-tint: #eef5f1;     /* very-light sage section background */
  --p-accent-tint-2: #f6faf8;   /* even lighter sage */
  --p-accent-line: rgba(61, 142, 114, 0.22);
  --p-accent-glow: rgba(61, 142, 114, 0.14);

  --p-ink: #0c1713;             /* headings: near-black, faint green undertone */
  --p-text: #1f2a25;
  --p-muted: #5b6661;
  --p-muted-2: #67726c;

  --p-bg: #ffffff;
  --p-bg-tint: #f5f8f6;
  --p-card: #ffffff;
  --p-border: #e7eae8;
  --p-border-strong: #d8ded9;

  --p-footer-bg: #0c1713;
  --p-footer-text: #aeb8b3;
  --p-footer-head: #ffffff;

  --p-radius-sm: 10px;
  --p-radius: 16px;
  --p-radius-lg: 22px;
  --p-radius-xl: 28px;
  --p-radius-pill: 999px;

  --p-shadow-xs: 0 1px 2px rgba(12, 23, 19, 0.05);
  --p-shadow-sm: 0 2px 8px rgba(12, 23, 19, 0.05), 0 1px 2px rgba(12, 23, 19, 0.04);
  --p-shadow: 0 14px 36px -16px rgba(12, 23, 19, 0.18), 0 2px 6px rgba(12, 23, 19, 0.05);
  --p-shadow-lg: 0 34px 70px -28px rgba(12, 23, 19, 0.30), 0 6px 16px rgba(12, 23, 19, 0.06);

  --p-announce-h: 38px;
  --p-container: 1180px;
  --p-gutter: 24px;

  /* ── material system: ONE green-black ink drives every hairline/fill/shadow ── */
  --p-ink-rgb: 12, 23, 19;
  --p-shadow-rgb: 24, 44, 36;              /* deep sage-slate; never pure black */

  --p-hairline:        rgba(var(--p-ink-rgb), 0.08);
  --p-hairline-strong: rgba(var(--p-ink-rgb), 0.14);
  --p-fill-faint:      rgba(var(--p-ink-rgb), 0.025);
  --p-fill-soft:       rgba(var(--p-ink-rgb), 0.05);

  --p-bg-2: #f7faf8;
  --p-bg-3: #eef3f0;
  --p-stroke: #d5ded8;

  --p-shadow-ring:  0 0 0 1px rgba(var(--p-ink-rgb), 0.07);
  --p-shadow-card:  0 0 0 1px rgba(var(--p-ink-rgb), 0.07),
                    0 1px 2px rgba(var(--p-shadow-rgb), 0.04),
                    0 8px 16px -8px rgba(var(--p-shadow-rgb), 0.06);
  --p-shadow-card-hover: 0 0 0 1px rgba(var(--p-ink-rgb), 0.12),
                    0 2px 4px rgba(var(--p-shadow-rgb), 0.05),
                    0 12px 24px -10px rgba(var(--p-shadow-rgb), 0.09);
  --p-shadow-frame: 0 2px 6px rgba(var(--p-shadow-rgb), 0.06),
                    0 6px 20px -2px rgba(var(--p-shadow-rgb), 0.08),
                    0 24px 48px -12px rgba(var(--p-shadow-rgb), 0.10);
  --p-focus-ring: 0 0 0 2px #fff, 0 0 0 4px var(--p-accent);

  --p-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --p-ease: cubic-bezier(0.25, 1, 0.5, 1);
  --p-fast: 0.15s;
  --p-med: 0.3s;
}

/* every digit reads as instrumentation */
.p-viz-panel, .p-mock, .p-num, .p-tier-price {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'zero' 1;
}

/* film grain for dark bands (zero-asset) */
.p-grain::after {
  content: ""; position: absolute; inset: 1px; pointer-events: none; border-radius: inherit;
  opacity: 0.05; mix-blend-mode: overlay; background-size: 125px; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================================
   1. ANNOUNCEMENT BAR  (static — scrolls away with the page; header is sticky)
   ============================================================================ */
body { padding-top: 0; }

.p-announce {
  position: relative;
  z-index: 110;
  height: var(--p-announce-h);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--p-accent-deep);
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.005em;
  padding: 0 16px;
}
.p-announce a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 500;
  white-space: nowrap;
  max-width: 100%;
}
.p-announce a:hover .p-announce-cta { text-decoration: underline; }
.p-announce-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: var(--p-radius-pill);
  background: rgba(255, 255, 255, 0.18);
}
.p-announce-text { overflow: hidden; text-overflow: ellipsis; }
.p-announce-cta { font-weight: 600; }
.p-announce-arrow { transition: transform 0.2s ease; }
.p-announce a:hover .p-announce-arrow { transform: translateX(3px); }

/* Header: sticky glass — border fades in only once content scrolls beneath it */
.header {
  position: sticky !important;
  top: 0 !important;
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(16px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
  border-bottom: 1px solid transparent !important;
  transition: border-color var(--p-med) var(--p-ease);
}
html[data-scrolled] .header { border-bottom-color: var(--p-hairline) !important; }
@supports not (backdrop-filter: blur(1px)) {
  .header { background: rgba(255, 255, 255, 0.95) !important; }
}

/* ============================================================================
   2. NAV  (extend legacy .header / .nav — green CTA + Login link)
   ============================================================================ */
.nav-login {
  color: var(--p-text);
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s ease;
}
.nav-login:hover { color: var(--p-accent); }

/* ============================================================================
   3. BUTTONS  (parity system — green primary, ghost, light-on-green)
   ============================================================================ */
.p-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: var(--p-radius-sm);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  white-space: nowrap;
  text-decoration: none;
}
.p-btn svg { flex: none; }
/* primary: accent-anodized — ring + top highlight; snaps ON fast, fades OFF slow */
.p-btn--primary {
  background: var(--p-accent);
  color: #fff;
  border: none;
  box-shadow: 0 0 0 1px rgba(61, 142, 114, 0.9),
              inset 0 1px 0 rgba(255, 255, 255, 0.18),
              0 1px 3px rgba(var(--p-shadow-rgb), 0.25);
  transition: background-color var(--p-med) var(--p-ease), transform 0.1s var(--p-ease);
}
.p-btn--primary:hover {
  background: var(--p-accent-hover);
  transition-duration: 0.05s;
}
.p-btn--primary:active { transform: scale(0.98); }
.p-btn--primary:focus-visible { outline: none; box-shadow: var(--p-focus-ring); }

/* ghost: white chip, ring-as-border, faint bottom shade for "pressable" depth */
.p-btn--ghost {
  background-color: #fff;
  background-image: linear-gradient(rgba(var(--p-ink-rgb), 0) 45%, rgba(var(--p-ink-rgb), 0.03) 55%);
  color: var(--p-ink);
  border: none;
  box-shadow: 0 0 0 1px rgba(var(--p-ink-rgb), 0.12),
              0 1px 2px rgba(var(--p-shadow-rgb), 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: box-shadow var(--p-med) var(--p-ease), background-color var(--p-med) var(--p-ease);
}
.p-btn--ghost:hover {
  background-color: var(--p-bg-2);
  box-shadow: 0 0 0 1px rgba(var(--p-ink-rgb), 0.18),
              0 1px 2px rgba(var(--p-shadow-rgb), 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition-duration: 0.05s;
}
.p-btn--light {
  background-color: #fff;
  color: var(--p-accent-deep);
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: background-color var(--p-med) var(--p-ease);
}
.p-btn--light:hover { background-color: #f0f6f3; transition-duration: 0.05s; }
.p-btn--lg { padding: 16px 30px; font-size: 16px; }
.p-btn .p-arrow { transition: transform 0.2s ease; }
.p-btn:hover .p-arrow { transform: translateX(3px); }

/* Nav uses the parity primary button at nav size */
.nav-right .p-btn, .mobile-menu .p-btn { padding: 10px 20px; font-size: 14px; }

/* ============================================================================
   4. SECTION SCAFFOLDING  (rhythm, eyebrow, headings, lead)
   ============================================================================ */
.p-section {
  padding: clamp(64px, 8vw, 112px) var(--p-gutter);
  position: relative;
}
.p-section--tint { background: var(--p-bg-tint); }
.p-section--sage { background: var(--p-accent-tint); }
.p-shell {
  max-width: var(--p-container);
  margin: 0 auto;
}
.p-shell--narrow { max-width: 940px; }

.p-head {
  max-width: 720px;
  margin: 0 auto clamp(40px, 5vw, 64px);
  text-align: center;
}
.p-head--left { margin-left: 0; text-align: left; }

.p-eyebrow {
  display: inline-block;
  font-family: var(--p-mono);
  color: var(--p-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.p-eyebrow::before { content: "// "; color: var(--p-accent); }

.p-h2 {
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--p-ink);
  margin: 0;
  text-wrap: balance;
}
.p-h2 .p-accent { color: var(--p-accent); }
.p-lead {
  margin: 18px auto 0;
  max-width: 620px;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.6;
  color: var(--p-muted);
}
.p-head--left .p-lead { margin-left: 0; margin-right: 0; }

/* ============================================================================
   5. BROWSER FRAME  (clean product-screenshot framing)
   ============================================================================ */
.p-browser {
  border-radius: var(--p-radius);
  background: #fff;
  border: 1px solid var(--p-border);
  box-shadow: var(--p-shadow);
  overflow: hidden;
}
.p-browser-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  background: #f7f9f8;
  border-bottom: 1px solid var(--p-border);
}
.p-browser-bar i {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #d8ded9;
  flex: none;
}
.p-browser-bar i:nth-child(1) { background: #f0aca3; }
.p-browser-bar i:nth-child(2) { background: #f2d39b; }
.p-browser-bar i:nth-child(3) { background: #aed7be; }
.p-browser-url {
  margin-left: 10px;
  font-size: 12px;
  color: var(--p-muted-2);
  background: #fff;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-pill);
  padding: 4px 14px;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.p-browser-img { display: block; width: 100%; height: auto; }

/* Labelled placeholder (videos / proof we don't have yet) */
.p-placeholder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  text-align: center;
  background:
    repeating-linear-gradient(45deg, #eef2f0 0 12px, #f5f8f6 12px 24px);
  border: 1px dashed var(--p-border-strong);
  color: var(--p-muted);
  border-radius: var(--p-radius);
}
.p-placeholder-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--p-accent-deep);
}
.p-placeholder-note { font-size: 13px; color: var(--p-muted); max-width: 280px; }

/* ============================================================================
   6. SCROLL REVEAL
   ============================================================================ */
.p-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.p-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .p-reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================================
   7. FOOTER  (override legacy light footer -> dark, multi-column)
   ============================================================================ */
.footer {
  background: var(--p-footer-bg);
  color: var(--p-footer-text);
  border-top: none;
  padding: clamp(56px, 7vw, 80px) var(--p-gutter) 28px;
  margin-top: 0;
}
.footer-top {
  max-width: var(--p-container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-brand { max-width: 280px; }
.footer-logo .footer-logo-wordmark { color: #fff; }
.footer-logo-icon { filter: brightness(0) invert(1); opacity: 0.95; }
.footer-tagline {
  margin-top: 16px;
  color: var(--p-footer-text);
  font-size: 14px;
  line-height: 1.65;
}
.footer-links {
  display: contents;   /* let the 4 columns sit directly in the 5-col grid */
}
.footer-col h4 {
  color: var(--p-footer-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;   /* reference uses Title Case, not the legacy uppercase */
  margin-bottom: 16px;
}
.footer-col a {
  display: block;
  color: var(--p-footer-text);
  font-size: 14px;
  padding: 6px 0;
  transition: color 0.2s ease;
}
.footer-col a:hover { color: #fff; }
.footer-bottom {
  max-width: var(--p-container);
  margin: 0 auto;
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom p { color: var(--p-muted-2); font-size: 13px; }
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.footer-legal-links a { color: var(--p-muted-2); font-size: 13px; transition: color 0.2s ease; }
.footer-legal-links a:hover { color: #fff; }

@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 520px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-bottom { justify-content: center; text-align: center; }
  .footer-legal-links { justify-content: center; }
}

/* ============================================================================
   SECTION STYLES are appended below this line, one section per commit.
   ============================================================================ */
/* ====================== HERO ====================== */
.p-hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(80px, 9vw, 118px) var(--p-gutter) clamp(40px, 5vw, 60px);
  background: linear-gradient(180deg, var(--p-accent-tint) 0%, #ffffff 60%);
}
.p-hero::before {
  content: "";
  position: absolute;
  top: -140px; left: 50%;
  transform: translateX(-50%);
  width: 780px; height: 540px;
  background: radial-gradient(closest-side, var(--p-accent-glow), transparent 72%);
  z-index: 0;
  pointer-events: none;
}
.p-hero-inner { position: relative; z-index: 2; max-width: 840px; margin: 0 auto; }
.p-hero .p-eyebrow { margin-bottom: 22px; }
.p-hero-title {
  font-size: clamp(40px, 5.8vw, 66px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--p-ink);
  margin: 0 0 22px;
}
.p-hero-sub {
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.6;
  color: var(--p-muted);
  max-width: 600px;
  margin: 0 auto 30px;
}
.p-hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.p-hero-note { margin-top: 16px; font-size: 14px; color: var(--p-muted-2); }

/* social-proof row — clearly-labelled placeholder, no fabricated proof */
.p-social {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
  padding: 8px 18px 8px 10px;
  background: #fff;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-pill);
  box-shadow: var(--p-shadow-sm);
}
.p-social-avatars { display: flex; }
.p-av {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.p-av:first-child { margin-left: 0; }
.p-av-1 { background: linear-gradient(135deg, #3d8e72, #60bb99); }
.p-av-2 { background: linear-gradient(135deg, #5b6661, #9aa8a1); }
.p-av-3 { background: linear-gradient(135deg, #2c6650, #4ea687); }
.p-av-4 { background: linear-gradient(135deg, #7a847f, #c9d2cd); }
.p-av-5 { background: linear-gradient(135deg, #347f65, #88c9ae); }
.p-social-meta { text-align: left; line-height: 1.25; }
.p-social-stars { color: #c4cec8; font-size: 15px; letter-spacing: 2px; }
.p-social-label { font-size: 12px; color: var(--p-muted); margin-top: 2px; }
.p-social-tag {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--p-accent-deep);
  background: var(--p-accent-glow);
  border: 1px solid var(--p-accent-line);
  border-radius: var(--p-radius-pill);
  padding: 1px 7px;
  margin-right: 6px;
}
@media (max-width: 560px) {
  .p-hero-cta { flex-direction: column; align-items: stretch; }
  .p-hero-cta .p-btn { width: 100%; }
  .p-social { flex-wrap: wrap; justify-content: center; }
  .p-social-meta { text-align: center; }
}

/* ====================== UNDER THE HOOD — both in-house models on one dark chapter plate ====================== */
.p-models { padding: clamp(8px, 2vw, 28px) var(--p-gutter) clamp(64px, 8vw, 104px); }
.p-plate {
  position: relative; overflow: hidden;
  background: #0c1713; color: #fff;
  border-radius: 28px;
  padding: clamp(36px, 5vw, 64px) clamp(22px, 4.6vw, 64px) clamp(28px, 4vw, 48px);
}
.p-plate::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(640px 420px at 88% -8%, rgba(61, 142, 114, 0.20), transparent 62%),
    radial-gradient(560px 440px at -10% 110%, rgba(61, 142, 114, 0.12), transparent 60%);
}
.p-plate > * { position: relative; z-index: 1; }

/* chapter header: claim left, explainer right */
.p-plate-head {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(24px, 4vw, 64px); align-items: end;
}
.p-plate-eyebrow {
  font-family: var(--p-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: #6fd3ab;
}
.p-plate-h2 {
  margin: 14px 0 0;
  font-size: clamp(30px, 3.8vw, 50px); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.05; color: #fff;
  text-wrap: balance;
}
.p-plate-intro {
  margin: 0 0 6px; max-width: 46ch;
  font-size: clamp(15px, 1.5vw, 16.5px); line-height: 1.66;
  color: rgba(255, 255, 255, 0.70);
}

/* one model = numbered copy column + one instrument card */
.p-model {
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(26px, 4.5vw, 72px); align-items: center;
  margin-top: clamp(38px, 4.5vw, 58px);
}
.p-model--flip {
  grid-template-columns: 1.1fr 0.9fr;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: clamp(38px, 4.5vw, 58px);
}
.p-model--flip .p-model-viz { order: -1; }

.p-model-idx { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.p-model-idx b { font-family: var(--p-mono); font-size: 13px; font-weight: 500; color: #6fd3ab; }
.p-model-idx span {
  font-family: var(--p-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.5); white-space: nowrap;
}
.p-model-idx::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.10); }

.p-model-name { margin: 0 0 6px; font-size: clamp(24px, 2.6vw, 31px); font-weight: 700; letter-spacing: -0.025em; color: #fff; }
.p-model-claim { margin: 0 0 14px; font-size: 16.5px; font-weight: 600; color: rgba(255, 255, 255, 0.92); }
.p-model-body { margin: 0; font-size: 15.5px; line-height: 1.64; color: rgba(255, 255, 255, 0.66); max-width: 42ch; }

/* the draggable before/after (lives inside the model-02 instrument card) */
.p-ba {
  position: relative;
  aspect-ratio: 1200 / 717;
  border-radius: 10px;
  overflow: hidden;
  margin: 4px 0 12px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
  cursor: ew-resize;
  touch-action: none;
  user-select: none; -webkit-user-select: none;
}
.p-ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.p-ba-after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.p-ba-divider {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%);
  width: 2px; margin-left: -1px; z-index: 3;
  background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.p-ba-handle {
  position: absolute; top: 50%; left: var(--pos, 50%);
  transform: translate(-50%, -50%); z-index: 4;
  width: 46px; height: 46px; border-radius: 50%; padding: 0;
  background: #fff; border: none; cursor: ew-resize;
  display: flex; align-items: center; justify-content: center;
  color: var(--p-accent-deep);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(255, 255, 255, 0.55);
  transition: transform 0.12s ease;
}
.p-ba-handle:hover { transform: translate(-50%, -50%) scale(1.06); }
.p-ba-handle:active { transform: translate(-50%, -50%) scale(0.97); }
.p-ba-handle:focus-visible { outline: 3px solid #71c9a6; outline-offset: 3px; }
.p-ba-handle svg { width: 22px; height: 22px; }
.p-ba-tag {
  position: absolute; bottom: 14px; z-index: 2;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; background: rgba(12, 23, 19, 0.6);
  padding: 5px 11px; border-radius: var(--p-radius-pill);
  pointer-events: none;
}
.p-ba-tag--b { left: 14px; }
.p-ba-tag--a { right: 14px; }
/* the 4-figure readout under the slider */
.p-readout { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.p-readout-cell {
  display: flex; flex-direction: column; gap: 3px;
  padding: 9px 11px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.p-readout-cell i {
  font-style: normal; font-family: var(--p-mono); font-size: 9.5px;
  letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}
.p-readout-cell b {
  font-family: var(--p-mono); font-size: 15px; font-weight: 500; color: #fff;
  font-variant-numeric: tabular-nums; font-feature-settings: 'zero' 1;
}
.p-readout-cell.is-hi b { color: #6fd3ab; }

/* chapter foot: shared note + the single CTA */
.p-plate-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  margin-top: clamp(40px, 5vw, 60px); padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.p-plate-foot-note { font-family: var(--p-mono); font-size: 12px; color: rgba(255, 255, 255, 0.55); }

@media (max-width: 960px) {
  .p-plate-head { grid-template-columns: 1fr; align-items: start; gap: 14px; }
  .p-plate-intro { margin-bottom: 0; }
  .p-model, .p-model--flip { grid-template-columns: 1fr; gap: 24px; }
  .p-model--flip .p-model-viz { order: 0; }
  .p-plate { border-radius: 22px; }
}
@media (max-width: 560px) {
  .p-models { padding-left: 12px; padding-right: 12px; }
  .p-plate { border-radius: 18px; padding: 28px 18px 24px; }
  .p-readout { grid-template-columns: 1fr 1fr; }
  .p-plate-foot { flex-direction: column; align-items: stretch; }
  .p-plate-foot .p-btn { width: 100%; justify-content: center; text-align: center; }
  .p-plate-foot-note { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .p-ba-handle { transition: none; }
}

/* ====================== ALL-IN-ONE + CAROUSEL ====================== */
/* Trim the bottom padding so the stats band reads as part of this section
   (the reference groups the stats directly under the product visual). */
#product { padding-bottom: clamp(36px, 4.5vw, 56px); }
.p-allinone { max-width: 1000px; margin: 0 auto; }
.p-carousel-stage { position: relative; aspect-ratio: 16 / 9; background: #0c1713; }
.p-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 0.55s ease; }
.p-slide.is-active { opacity: 1; }
.p-slide img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.p-slide-tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  color: #fff; background: rgba(12, 23, 19, 0.62);
  padding: 5px 11px; border-radius: var(--p-radius-pill);
}
.p-dots { display: flex; gap: 10px; justify-content: center; margin-top: 24px; }
.p-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: none;
  background: var(--p-border-strong);
  cursor: pointer; padding: 0;
  transition: background 0.2s ease, width 0.2s ease;
}
.p-dot.is-active { background: var(--p-accent); width: 26px; border-radius: var(--p-radius-pill); }
.p-cap-row { margin-top: 34px; text-align: center; }
.p-cap-row-label {
  display: block;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--p-muted-2); margin-bottom: 14px;
}
.p-cap-chips { display: flex; flex-wrap: wrap; gap: 8px 10px; justify-content: center; }
.p-cap-chip {
  font-size: 13px; font-weight: 500;
  color: var(--p-text);
  background: #fff;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-pill);
  padding: 7px 14px;
  box-shadow: var(--p-shadow-xs);
}

/* ====================== 4 STEPS ====================== */
.p-steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.p-step {
  background: #fff;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
  padding: 24px 22px 22px;
  display: flex; flex-direction: column;
  box-shadow: var(--p-shadow-sm);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.p-step:hover { transform: translateY(-4px); box-shadow: var(--p-shadow); }
.p-step-num {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--p-accent-deep);
}
.p-step-num b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--p-accent-glow);
  border: 1px solid var(--p-accent-line);
  font-size: 13px; color: var(--p-accent-deep);
}
.p-step h3 { margin: 16px 0 8px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--p-ink); }
.p-step p { font-size: 14px; line-height: 1.55; color: var(--p-muted); margin: 0 0 20px; }
.p-step-thumb {
  margin-top: auto;
  background: #f4f7f5;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-sm);
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.p-step-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.p-steps-cta { display: flex; gap: 14px; justify-content: center; margin-top: 44px; flex-wrap: wrap; }
@media (max-width: 980px) { .p-steps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .p-steps-grid { grid-template-columns: 1fr; } }

/* ====================== WHO IT'S FOR (divider strip; each persona is a hoverable link) ====================== */
.p-who-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.p-who {
  display: flex; flex-direction: column;
  padding: 20px 28px;
  border-radius: 12px;
  color: inherit; text-decoration: none;
  transition: background-color var(--p-fast) var(--p-ease);
}
.p-who:hover { background: var(--p-bg-2); }
.p-who + .p-who { border-left: 1px solid var(--p-hairline); }
.p-who h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.012em; color: var(--p-ink); margin: 0 0 10px; }
.p-who p { font-size: 14.5px; line-height: 1.6; color: var(--p-muted); margin: 0 0 18px; }
/* each persona ends in a small product artifact; it lights up with the hover */
.p-who-artifact {
  margin-top: auto;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--p-bg-3);
  border-radius: 10px;
  font-family: var(--p-mono); font-size: 11px; color: var(--p-text);
  white-space: nowrap; overflow: hidden;
  font-variant-numeric: tabular-nums; font-feature-settings: 'zero' 1;
  transition: background-color var(--p-fast) var(--p-ease), box-shadow var(--p-fast) var(--p-ease);
}
.p-who-artifact svg { width: 15px; height: 15px; flex: none; color: var(--p-accent-deep); }
.p-who-artifact b { font-weight: 500; color: var(--p-ink); }
.p-who-artifact .p-up { color: var(--p-accent-deep); }
.p-who:hover .p-who-artifact {
  background: rgba(61, 142, 114, 0.10);
  box-shadow: inset 0 0 0 1px rgba(61, 142, 114, 0.30);
}
.p-who:focus-visible { outline: none; box-shadow: var(--p-focus-ring); }
@media (max-width: 860px) {
  .p-who-grid { grid-template-columns: 1fr; max-width: 540px; margin: 0 auto; }
  .p-who { padding: 24px 4px; }
  .p-who + .p-who { border-left: none; border-top: 1px solid var(--p-hairline); border-radius: 0; }
}

/* ====================== FEATURES BENTO ====================== */
.p-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.p-bento-card {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff;
  border: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--p-shadow-card);
  min-height: 300px;
  transition: box-shadow var(--p-med) var(--p-ease);
}
.p-bento-card:hover { box-shadow: var(--p-shadow-card-hover); }
.p-bento-card.is-wide { grid-column: span 2; }
.p-bento-media { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--p-bg-2); }
.p-bento-media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  display: block;
}
/* hairline over media so imagery never bleeds past its edge */
.p-bento-media::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-bottom: 1px solid var(--p-hairline);
}
.p-bento-cap { padding: 16px 20px; }
.p-bento-cap h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.012em; color: var(--p-ink); margin: 0 0 4px; }
.p-bento-cap p { font-size: 13.5px; line-height: 1.5; color: var(--p-muted); margin: 0; }
@media (max-width: 900px) {
  .p-bento { grid-template-columns: repeat(2, 1fr); }
  .p-bento-card.is-wide { grid-column: span 2; }
}
@media (max-width: 560px) {
  .p-bento { grid-template-columns: 1fr; }
  .p-bento-card, .p-bento-card.is-wide { grid-column: span 1; min-height: 260px; }
}

/* ====================== TESTIMONIALS (placeholders) ====================== */
.p-head .p-btn { margin-top: 24px; }
.p-tcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.p-tcard {
  position: relative;
  background: #fff;
  border: 1px dashed var(--p-border-strong);
  border-radius: var(--p-radius);
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 16px;
}
.p-tcard-tag {
  position: absolute; top: 16px; right: 16px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--p-accent-deep);
  background: var(--p-accent-glow);
  border: 1px solid var(--p-accent-line);
  border-radius: var(--p-radius-pill);
  padding: 3px 9px;
}
.p-tcard-quote { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.p-sk { display: block; height: 11px; border-radius: 6px; background: #eef1ef; }
.p-sk-q1 { width: 92%; } .p-sk-q2 { width: 98%; } .p-sk-q3 { width: 68%; }
.p-tcard-person { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.p-tcard-av { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #cfe0d8, #e7eae8); flex: none; }
.p-tcard-id { display: flex; flex-direction: column; gap: 7px; flex: 1; }
.p-sk-name { width: 46%; height: 12px; }
.p-sk-sub { width: 64%; height: 10px; background: #f1f4f2; }
.p-tcard-note { font-size: 12px; color: var(--p-muted-2); border-top: 1px solid var(--p-border); padding-top: 14px; margin: 0; }
@media (max-width: 860px) { .p-tcards { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } }

/* ====================== FAQ (2-column accordion) ====================== */
.p-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; align-items: start; }
.p-faq-item {
  background: #fff;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-sm);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.p-faq-item.active { border-color: var(--p-accent-line); box-shadow: var(--p-shadow-sm); }
.p-faq-item .faq-question {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  text-align: left;
  background: none; border: none; cursor: pointer;
  padding: 18px 20px;
  font-family: var(--font);
  font-size: 15px; font-weight: 600;
  color: var(--p-ink);
}
.p-faq-item .faq-chevron { flex: none; color: var(--p-muted-2); transition: transform 0.25s ease, color 0.2s ease; }
.p-faq-item.active .faq-chevron { color: var(--p-accent); }
.p-faq-item .faq-answer { padding: 0 20px 18px; }
.p-faq-item .faq-answer p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--p-muted); }
@media (max-width: 760px) { .p-faq-grid { grid-template-columns: 1fr; } }

/* ====================== FINAL CTA BAND ====================== */
.p-finalcta {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(60px, 8vw, 96px) var(--p-gutter);
  background: linear-gradient(#14513f, #0f1a15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.p-finalcta-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.p-finalcta-title {
  font-size: clamp(28px, 3.8vw, 42px);
  font-weight: 600; letter-spacing: -0.02em; line-height: 1.1;
  color: #fff; margin: 0 0 14px;
  text-wrap: balance;
}
.p-finalcta-sub {
  font-size: clamp(15px, 1.5vw, 17px); line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
  max-width: 560px; margin: 0 auto 28px;
}
.p-finalcta-note {
  margin: 14px 0 0;
  font-family: var(--p-mono); font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}
/* ====================== SHARED PAGE ATMOSPHERE ====================== */
/* Applied to <main> in base.html so every page opens on the same field:
   green glow + grid paper at the top, fading into plain white.
   Layers are fixed-height so the look is identical regardless of page length. */
.p-atmos {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(1000px 560px at 50% -14%, var(--p-accent-tint), transparent 56%),
    linear-gradient(180deg, #fafdfb 0%, #ffffff 58%);
  background-repeat: no-repeat;
  background-size: 100% 820px;
}
/* drifting aurora — soft green/mint colour pools that make the top of the page feel alive */
.p-atmos::before {
  content: "";
  position: absolute; inset: -46px 0 auto 0; height: 760px;
  z-index: -1; pointer-events: none; will-change: transform;
  background:
    radial-gradient(440px 320px at 15% 4%, rgba(61, 142, 114, 0.16), transparent 60%),
    radial-gradient(520px 380px at 88% -2%, rgba(96, 187, 153, 0.16), transparent 60%),
    radial-gradient(560px 420px at 66% 42%, rgba(52, 127, 101, 0.09), transparent 64%);
  animation: p-hero-drift 22s var(--p-ease) infinite alternate;
}
@keyframes p-hero-drift {
  from { transform: translate3d(-1.5%, 0.8%, 0) scale(1.02); }
  to   { transform: translate3d(1.8%, -1.4%, 0) scale(1.07); }
}
/* faint grid paper, masked so it fades toward the edges */
.p-atmos::after {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 760px;
  z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--p-stroke) 1px, transparent 1px),
    linear-gradient(90deg, var(--p-stroke) 1px, transparent 1px);
  background-size: 44px 44px; background-position: center top;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(ellipse 82% 64% at 50% 22%, #000 30%, transparent 82%);
  mask-image: radial-gradient(ellipse 82% 64% at 50% 22%, #000 30%, transparent 82%);
}
@media (prefers-reduced-motion: reduce) { .p-atmos::before { animation: none; } }

/* ====================== AGENT-BUILDER HERO ====================== */
/* background comes from the shared .p-atmos on <main> */
.p-agent-hero {
  position: relative;
  text-align: center;
  /* header is sticky (in flow) now, so the hero no longer clears a fixed bar */
  padding: clamp(28px, 3.6vw, 44px) var(--p-gutter) clamp(44px, 5vw, 64px);
}
.p-agent-hero-inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; }
.p-agent-title {
  font-size: clamp(34px, 4.4vw, 50px);
  font-weight: 600; line-height: 1.06; letter-spacing: -0.025em;
  color: var(--p-ink); margin: 0 auto 14px; max-width: 16ch;
  text-wrap: balance;
}
/* keep the accent half on its own line so the title reads as two strong rows */
.p-agent-title .p-accent { color: var(--p-accent); display: block; }
.p-agent-sub {
  font-size: clamp(16px, 1.6vw, 18px); line-height: 1.55;
  color: var(--p-muted); max-width: 58ch; margin: 0 auto;
}

/* visually-hidden util */
.p-vh {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- agent builder card: location -> strategy cards -> spin up ---
   fine glass: translucent over the grid paper, top-edge lip, tinted shadows */
.p-builder {
  position: relative; z-index: 1;
  max-width: 680px; margin: 18px auto 0; text-align: left;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--p-hairline-strong);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    var(--p-shadow-ring),
    0 2px 4px rgba(var(--p-shadow-rgb), 0.05),
    0 22px 48px -18px rgba(var(--p-shadow-rgb), 0.20);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
@supports not (backdrop-filter: blur(1px)) { .p-builder { background: #fff; } }

/* illustrative location row: display-only — examples type themselves,
   the real search lives in the app */
.p-build-loc {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 22px;
  border-bottom: 1px solid var(--p-hairline);
}
.p-build-ico { display: inline-flex; color: var(--p-accent-deep); flex: none; }
.p-build-ico svg { width: 24px; height: 24px; }
.p-build-area {
  flex: 1; min-width: 0;
  font-size: 19px; font-weight: 500; color: var(--p-ink);
  padding: 6px 0;
}
.p-build-area .p-type-q { color: var(--p-muted-2); font-weight: 400; }

/* step 1: strategy as big selectable cards */
.p-build-strategy { padding: 13px 22px 4px; }
.p-build-q { display: block; font-size: 14px; font-weight: 600; color: var(--p-ink); margin-bottom: 10px; }
.p-strats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.p-strat {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  background: #fff;
  border: 1px solid var(--p-border-strong);
  border-radius: var(--p-radius);
  padding: 11px 10px 10px;
  cursor: pointer;
  font-family: var(--font);
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
}
.p-strat:hover {
  border-color: var(--p-accent-line);
  background: #fff;
  transform: translateY(-2px);
  box-shadow:
    0 2px 4px rgba(var(--p-shadow-rgb), 0.05),
    0 14px 28px -12px rgba(var(--p-shadow-rgb), 0.18);
}
.p-strat:hover .p-strat-ico { background: var(--p-accent); color: #fff; transform: scale(1.07); }
.p-strat:hover .p-strat-name { color: var(--p-accent-deep); }
.p-strat.is-active {
  border-color: transparent;
  background: rgba(61, 142, 114, 0.12);
  box-shadow: inset 0 0 0 1px rgba(61, 142, 114, 0.35);
}
/* selected card is already "on": hover keeps it planted, no second lift */
.p-strat.is-active:hover {
  border-color: transparent;
  background: rgba(61, 142, 114, 0.12);
  transform: none;
  box-shadow: inset 0 0 0 1px rgba(61, 142, 114, 0.35);
}
.p-strat.is-active .p-strat-name { color: var(--p-accent-deep); }
.p-strat-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--p-bg-tint); border: none;
  color: var(--p-accent-deep); margin-bottom: 8px;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s var(--p-ease);
}
.p-strat.is-active .p-strat-ico { background: var(--p-accent); border-color: var(--p-accent); color: #fff; }
.p-strat-ico svg { width: 20px; height: 20px; }
.p-strat-name { font-size: 14px; font-weight: 600; color: var(--p-ink); letter-spacing: -0.01em; }
.p-strat-desc { font-size: 13px; line-height: 1.4; color: var(--p-muted); }
/* active state is signalled by the green border + tint + filled icon, so the
   floating corner check is removed (it collided with the rounded corner) */
.p-strat-check { display: none; }

/* info panel mirrors the active strategy (sits where the custom teaser was) */
.p-strat-info {
  display: flex; align-items: flex-start; gap: 14px;
  margin-top: 11px;
  padding: 12px 16px;
  background: var(--p-bg-tint);
  border: 1px solid var(--p-border-strong); border-radius: var(--p-radius);
}
.p-strat-info-ico {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--p-accent); color: #fff;
}
.p-strat-info-ico svg { width: 20px; height: 20px; }
.p-strat-info-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.p-strat-info-name { font-size: 14px; font-weight: 600; color: var(--p-ink); letter-spacing: -0.01em; }
.p-strat-info-desc { font-size: 13.5px; line-height: 1.5; color: var(--p-muted); }

/* animated typewriter teaser in the location row */
.p-type-q { color: var(--p-muted-2); }
.p-type-cursor {
  display: inline-block; width: 2px; height: 1.05em;
  background: var(--p-accent); margin-left: 2px;
  vertical-align: text-bottom;
  animation: p-blink 1.05s steps(1) infinite;
}
@keyframes p-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .p-type-cursor { animation: none; } }

/* step 2: the final action */
.p-build-go-wrap { padding: 12px 22px 16px; }
.p-builder-go { position: relative; width: 100%; padding: 16px 30px; font-size: 16px; }

.p-builder-hint { margin: 12px 0 0; font-size: 13px; color: var(--p-muted-2); text-align: center; }

@media (max-width: 680px) {
  .p-strats { grid-template-columns: repeat(2, 1fr); }
}

/* --- node-flow visual (the agent pipeline) --- */
.p-flow-frame {
  position: relative;
  max-width: 1060px; margin: clamp(36px, 5vw, 56px) auto 0;
  background: #fff;
  background-image: radial-gradient(circle, rgba(12, 23, 19, 0.05) 1px, transparent 1px);
  background-size: 22px 22px; background-position: -1px -1px;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
  box-shadow: var(--p-shadow-lg);
  padding: clamp(16px, 2.4vw, 26px);
  text-align: left;
}
.p-flow-bar { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; padding: 0 4px; }
.p-flow-bar-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--p-accent); box-shadow: 0 0 0 4px var(--p-accent-glow); flex: none; }
.p-flow-bar-title { font-size: 13px; font-weight: 600; color: var(--p-text); }
.p-flow-bar-spacer { flex: 1; }
.p-flow-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--p-muted);
}

.p-flow { position: relative; }
.p-flow-track {
  display: grid;
  grid-template-columns: 1fr 26px 1fr 26px 1fr 26px 1fr;
  align-items: stretch;
}

/* nodes */
.p-node {
  min-width: 0;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
  padding: 16px 16px 18px;
  box-shadow: var(--p-shadow-sm);
  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.p-node.is-active { border-color: var(--p-accent); box-shadow: 0 0 0 3px var(--p-accent-glow), var(--p-shadow); transform: translateY(-3px); }
.p-node.is-done { border-color: var(--p-accent-line); }
.p-node-head { display: flex; align-items: center; gap: 10px; }
.p-node-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: none;
  border-radius: 9px;
  background: var(--p-accent-glow); border: 1px solid var(--p-accent-line);
  color: var(--p-accent-deep);
}
.p-node-ico svg { width: 17px; height: 17px; }
.p-node-name { font-size: 14px; font-weight: 700; color: var(--p-ink); letter-spacing: -0.01em; flex: 1; min-width: 0; min-height: 2.5em; display: flex; align-items: center; }
.p-node-badge {
  font-size: 11px; font-weight: 700; color: var(--p-muted-2);
  width: 20px; height: 20px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--p-bg-tint); border: 1px solid var(--p-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.p-node.is-active .p-node-badge, .p-node.is-done .p-node-badge { color: #fff; background: var(--p-accent); border-color: var(--p-accent); }
.p-node-line { margin: 11px 0 14px; font-size: 12px; line-height: 1.5; color: var(--p-muted); }
.p-node-body { margin-top: auto; }

/* source rows */
.p-srcrows { display: flex; flex-direction: column; gap: 7px; }
.p-srcrow { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--p-text); }
.p-srcrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--p-accent); flex: none; opacity: 0.45; transition: opacity 0.3s ease; }
.p-node.is-active .p-srcrow i, .p-node.is-done .p-srcrow i { opacity: 1; }
.p-node-count { margin-top: 12px; font-size: 12px; font-weight: 600; color: var(--p-accent-deep); }
.p-node-count b { font-size: 15px; }

/* analysis pro-forma mini */
.p-pro { display: flex; flex-direction: column; gap: 8px; }
.p-pro-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.p-pro-label { font-size: 11px; font-weight: 600; color: var(--p-muted-2); }
.p-pro-irr { font-size: 11px; font-weight: 700; color: #fff; background: var(--p-accent); border-radius: var(--p-radius-pill); padding: 2px 8px; white-space: nowrap; }
.p-pro-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.p-metric { background: var(--p-bg-tint); border: 1px solid var(--p-border); border-radius: 8px; padding: 6px 8px; }
.p-metric-k { font-size: 10px; color: var(--p-muted-2); display: block; }
.p-metric-v { font-size: 13px; font-weight: 700; color: var(--p-ink); }
.p-spark { margin-top: 2px; display: block; width: 100%; height: 24px; }
.p-spark path { stroke: var(--p-accent); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* filter rules */
.p-rules { display: flex; flex-wrap: wrap; gap: 6px; }
.p-rule { font-size: 11px; font-weight: 600; color: var(--p-accent-deep); background: var(--p-accent-glow); border: 1px solid var(--p-accent-line); border-radius: var(--p-radius-pill); padding: 4px 9px; }

/* results ranks */
.p-ranks { display: flex; flex-direction: column; gap: 9px; }
.p-rank { display: flex; align-items: center; gap: 9px; }
.p-rank-n { width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--p-accent); color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.p-rank-main { flex: 1; min-width: 0; }
.p-rank-name { font-size: 11.5px; font-weight: 600; color: var(--p-text); display: flex; justify-content: space-between; gap: 8px; }
.p-rank-name b { color: var(--p-accent-deep); }
.p-rank-track { margin-top: 4px; height: 5px; border-radius: 3px; background: var(--p-bg-tint); overflow: hidden; }
.p-rank-bar { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--p-accent), #60bb99); transform: scaleX(var(--w, 1)); transform-origin: left; transition: transform 0.6s cubic-bezier(.2, .7, .2, 1); }
.p-flow.is-spinning .p-rank-bar { transform: scaleX(0); }

/* results CTA — promoted to a prominent block under the whole pipeline
   (kept OUT of the role="img" node-flow so screen readers reach it) */
.p-flow-cta { margin-top: 24px; text-align: center; }
.p-flow-cta .p-btn { min-width: 260px; }
.p-flow-cta .p-btn.is-ready { animation: p-cta-pop 0.7s ease 1; }
@keyframes p-cta-pop {
  0% { box-shadow: 0 8px 20px -8px rgba(61, 142, 114, 0.55); }
  45% { box-shadow: 0 0 0 7px var(--p-accent-glow), 0 14px 28px -8px rgba(61, 142, 114, 0.6); }
  100% { box-shadow: 0 8px 20px -8px rgba(61, 142, 114, 0.55); }
}
.p-flow-cta-note { margin: 10px 0 0; font-size: 12px; color: var(--p-muted-2); text-align: center; }

/* connectors */
.p-link { position: relative; align-self: center; height: 2px; }
.p-link-line {
  position: absolute; top: 50%; left: 2px; right: 2px; height: 2px; transform: translateY(-50%); border-radius: 2px;
  background-image: linear-gradient(90deg, var(--p-border-strong) 0 60%, transparent 0);
  background-size: 8px 2px; background-repeat: repeat-x;
}
.p-link-fill {
  position: absolute; top: 50%; left: 2px; height: 2px; width: calc(100% - 4px);
  transform: translateY(-50%) scaleX(0); transform-origin: left;
  background: var(--p-accent); border-radius: 2px; transition: transform 0.45s ease;
}
.p-link.is-filled .p-link-fill { transform: translateY(-50%) scaleX(1); }
.p-link::after { content: ""; position: absolute; top: 50%; right: -3px; width: 7px; height: 7px; border-radius: 50%; transform: translateY(-50%); background: var(--p-border-strong); transition: background 0.3s ease; }
.p-link.is-filled::after { background: var(--p-accent); }

.p-flow-foot { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 0 4px; }
.p-flow-cap { font-size: 11.5px; color: var(--p-muted-2); }

/* responsive: vertical pipeline + stacked bar */
@media (max-width: 900px) {
  .p-flow-track { grid-template-columns: 1fr; }
  .p-node { max-width: 460px; width: 100%; margin: 0 auto; }
  .p-link { height: 30px; width: 2px; margin: 6px auto; }
  .p-link-line {
    top: 2px; bottom: 2px; left: 50%; right: auto; height: auto; width: 2px; transform: translateX(-50%);
    background-image: linear-gradient(180deg, var(--p-border-strong) 0 60%, transparent 0);
    background-size: 2px 8px; background-repeat: repeat-y;
  }
  .p-link-fill { top: 2px; left: 50%; height: calc(100% - 4px); width: 2px; transform: translateX(-50%) scaleY(0); transform-origin: top; }
  .p-link.is-filled .p-link-fill { transform: translateX(-50%) scaleY(1); }
  .p-link::after { top: auto; bottom: -3px; right: 50%; transform: translateX(50%); }
}
@media (max-width: 720px) {
  .p-build-loc { padding: 16px 18px; }
  .p-build-area { font-size: 17px; }
  .p-build-strategy { padding: 18px 18px 6px; }
  .p-build-go-wrap { padding: 16px 18px 20px; }
  .p-flow-cta .p-btn { width: 100%; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .p-node, .p-link-fill, .p-rank-bar, .p-builder, .p-strat, .p-strat-check, .p-srcrow i, .p-node-badge { transition: none; }
  .p-flow.is-spinning .p-rank-bar { transform: scaleX(var(--w, 1)); }
}

/* ====================== BIG PRODUCT SHOWCASE ====================== */
.p-showcase { position: relative; padding: clamp(8px, 3vw, 32px) 0 clamp(24px, 4vw, 48px); }
.p-showcase .p-shell { position: relative; }
.p-showcase-frame {
  position: relative; max-width: 1120px; margin: 0 auto;
  background: #fff; border: 1px solid var(--p-border-strong);
  border-radius: var(--p-radius-lg); overflow: hidden;
  box-shadow: 0 40px 90px -40px rgba(12, 23, 19, 0.4), var(--p-shadow);
}
.p-showcase-frame::after {
  content: ""; position: absolute; inset: -40% 10% auto 10%; height: 60%; z-index: -1;
  background: radial-gradient(closest-side, var(--p-accent-glow), transparent 72%);
}
.p-showcase-frame img { display: block; width: 100%; height: auto; }
.p-showcase .p-browser-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 16px; background: var(--p-bg-tint); border-bottom: 1px solid var(--p-border);
}
.p-showcase .p-browser-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--p-border-strong); flex: none; }
.p-showcase .p-browser-bar i:nth-child(1) { background: #e5887b; }
.p-showcase .p-browser-bar i:nth-child(2) { background: #e8c07a; }
.p-showcase .p-browser-bar i:nth-child(3) { background: #7ec79f; }
.p-showcase .p-browser-url {
  margin-left: 12px; font-size: 12.5px; color: var(--p-muted-2);
  background: #fff; border: 1px solid var(--p-border); border-radius: var(--p-radius-pill);
  padding: 4px 14px;
}

/* hero trust row */
/* mono proof strip: numbers as instrumentation, hairline dividers between items */
.p-hero-trust {
  position: relative; z-index: 2;
  list-style: none; margin: 22px auto 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 0;
}
.p-hero-trust li {
  display: inline-flex; align-items: center;
  font-family: var(--p-mono);
  font-size: 12px; font-weight: 400; letter-spacing: 0.01em;
  color: var(--p-muted);
  padding: 0 18px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'zero' 1;
}
.p-hero-trust li + li { border-left: 1px solid var(--p-hairline-strong); }
.p-hero-trust svg { display: none; }
.p-hero-trust b { font-weight: 500; color: var(--p-text); margin-right: 0.45em; }
@media (max-width: 680px) {
  .p-hero-trust { flex-direction: column; gap: 6px; }
  .p-hero-trust li + li { border-left: none; }
}

/* ====================== HERO SCROLL CUE ====================== */
.p-hero-scrollcue {
  display: inline-flex; align-items: center; gap: 8px;
  margin: clamp(28px, 4vw, 44px) auto 0;
  font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--p-muted); text-decoration: none;
  transition: color 0.18s ease;
}
.p-hero-scrollcue:hover { color: var(--p-accent-deep); }
.p-hero-scrollcue svg { width: 18px; height: 18px; animation: p-cue 1.8s ease-in-out infinite; }
@keyframes p-cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ====================== SCROLL-THROUGH (sticky scrollytelling) ====================== */
.p-scrolly { padding: clamp(64px, 9vw, 120px) var(--p-gutter) clamp(48px, 7vw, 96px); }

.p-scrolly-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 0 clamp(24px, 5vw, 80px);
  align-items: start;
}
/* head lives INSIDE the grid (col 1, row 1) so the pinned frame rides beside it
   from the first scroll tick — no dead band above the steps */
.p-scrolly .p-head { grid-column: 1; grid-row: 1; max-width: none; margin: 0 0 clamp(16px, 4vh, 40px); }
/* trailing buffer so the final step can reach centre while the visual is still pinned */
.p-scrolly-steps { grid-column: 1; grid-row: 2; list-style: none; margin: 0; padding: 0 0 14vh; }
/* visual starts at the top of the grid (beside the head), then pins at the
   viewport CENTRE so it always lines up with whichever step is in the middle
   of the screen — the key to it feeling managed.
   The row span is load-bearing: it gives sticky its full travel. */
.p-scrolly-viz {
  grid-column: 2; grid-row: 1 / span 2;
  --p-viz-h: min(62vh, 496px);
  position: sticky;
  top: calc((100vh - var(--p-viz-h)) / 2);
}
.p-scrolly-viz .p-viz-frame { height: var(--p-viz-h); width: 100%; }

/* --- the scrolling step blocks: one near-full screen each, content centred --- */
.p-step2 {
  position: relative;
  min-height: 64vh;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0.45;
  transform: translateY(8px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
/* the head above provides the run-in, so step 01 starts near the top of its slot */
.p-step2:first-child { min-height: 44vh; justify-content: flex-start; padding-top: 4vh; }
.p-step2:last-child { min-height: 56vh; }
.p-step2.is-active { opacity: 1; transform: none; }
.p-step2-num {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--p-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.04em;
  color: var(--p-accent-deep); margin-bottom: 14px;
  font-variant-numeric: tabular-nums; font-feature-settings: 'zero' 1;
}
/* folio line: the step number rules across its column like a print index */
.p-step2-num::after { content: ""; flex: 1; height: 1px; background: var(--p-hairline); }
.p-step2-title {
  font-size: clamp(24px, 2.8vw, 30px); font-weight: 600; letter-spacing: -0.018em;
  line-height: 1.14; color: var(--p-ink); margin: 0 0 14px;
}
.p-step2-title .p-accent { color: var(--p-accent); }
.p-step2-desc { font-size: clamp(15px, 1.4vw, 17px); line-height: 1.62; color: var(--p-muted); margin: 0; max-width: 30em; }
.p-step2-tag {
  display: inline-flex; align-items: baseline; gap: 7px; align-self: flex-start; margin-top: 22px;
  font-family: var(--font); font-size: 14.5px; font-weight: 500; letter-spacing: 0;
  color: var(--p-muted); background: none; border: 0; border-radius: 0; padding: 0;
}
.p-step2-tag b {
  font-weight: 700; color: var(--p-ink); padding: 0 1px;
  background: linear-gradient(transparent 62%, rgba(61, 142, 114, 0.22) 62%);
}
.p-step2-cta { margin-top: 26px; align-self: flex-start; }

/* --- the sticky visual frame (Attio-style: hairline + soft outline ring) --- */
.p-viz-frame {
  position: relative; height: 100%;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfb 100%);
  border: 1px solid var(--p-stroke);
  outline: 4px solid rgba(213, 222, 216, 0.25);
  border-radius: 12px;
  box-shadow: var(--p-shadow-frame);
  padding: 22px;
  overflow: hidden;
}
/* clickable stage index: print-folio bar — mono numerals + labels on hairline
   column dividers, no pills, no circles */
.p-viz-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.p-viz-tab {
  display: inline-flex; align-items: baseline; justify-content: center; gap: 6px;
  font-family: var(--p-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap;
  color: var(--p-muted-2); background: none; border: 0; border-radius: 0;
  padding: 4px 2px 10px; cursor: pointer;
  transition: color var(--p-fast) ease;
}
.p-viz-tab + .p-viz-tab { border-left: 1px solid var(--p-hairline); }
.p-viz-tab:hover { color: var(--p-accent-deep); }
.p-viz-tab:focus-visible { outline: none; box-shadow: var(--p-focus-ring); border-radius: 4px; }
.p-viz-tab.is-active { color: var(--p-ink); }
.p-viz-tab-n {
  font-variant-numeric: tabular-nums; font-feature-settings: 'zero' 1;
  color: rgba(var(--p-ink-rgb), 0.35);
  transition: color var(--p-fast) ease;
}
.p-viz-tab.is-active .p-viz-tab-n { color: var(--p-accent); }
.p-viz-tab.is-done .p-viz-tab-n { color: var(--p-accent-deep); }
/* rail: the same continuous scroll fill, mask-segmented into 5 so it doubles as
   the active-stage indicator — period (100% + 4px)/5 leaves no trailing gap */
.p-viz-progress {
  margin: 0 2px; height: 2px; border-radius: 0; overflow: hidden;
  background: rgba(var(--p-ink-rgb), 0.10);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0, #000 calc((100% + 4px) / 5 - 4px), transparent calc((100% + 4px) / 5 - 4px), transparent calc((100% + 4px) / 5));
          mask: repeating-linear-gradient(90deg, #000 0, #000 calc((100% + 4px) / 5 - 4px), transparent calc((100% + 4px) / 5 - 4px), transparent calc((100% + 4px) / 5));
}
.p-viz-progress i { display: block; height: 100%; width: 0; background: var(--p-accent); transition: width 0.12s linear; }

/* panels: stacked absolutely, cross-fade on stage change */
.p-viz-panel {
  position: absolute; left: 20px; right: 20px; top: 78px; bottom: 20px;
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(14px) scale(0.985);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}
.p-viz-panel.is-active { opacity: 1; transform: none; }

/* panel -1: the agent spec sheet — a flat mono ledger, no card-in-card chrome */
.p-viz-panel--spec {
  font-family: var(--p-mono);
  font-variant-numeric: tabular-nums; font-feature-settings: 'zero' 1;
}
.p-spec-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 2px 10px; border-bottom: 1px solid var(--p-hairline);
  font-size: 11.5px; letter-spacing: 0.05em; color: var(--p-muted);
}
.p-spec-state { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--p-muted-2); }
.p-spec-state-done { display: none; color: var(--p-accent-deep); }
.p-viz-frame.is-booted .p-spec-state-draft { display: none; }
.p-viz-frame.is-booted .p-spec-state-done { display: inline; }
.p-spec-body {
  flex: 1; margin: 0; padding: 8px 0;
  display: flex; flex-direction: column; justify-content: space-evenly;
  counter-reset: specline;
}
.p-spec-body > div { display: flex; align-items: baseline; gap: 14px; padding: 5px 2px; font-size: 13px; }
.p-spec-body > div::before {
  counter-increment: specline; content: counter(specline, decimal-leading-zero);
  flex: none; width: 20px; font-size: 10.5px; color: rgba(var(--p-ink-rgb), 0.28);
}
.p-spec-body dt { flex: 0 0 96px; color: var(--p-muted-2); }
.p-spec-body dt::after { content: ":"; color: rgba(var(--p-ink-rgb), 0.3); }
.p-spec-body dd { margin: 0; color: var(--p-ink); font-weight: 500; }
.p-spec-foot {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 2px 0; border-top: 1px solid var(--p-hairline);
  font-size: 11px; color: var(--p-muted);
}
.p-spec-run { color: var(--p-accent-deep); }

/* panel 1: source — market scan feed */
.p-viz-phead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.p-viz-loc {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--p-accent-deep);
  background: var(--p-accent-glow); border: 1px solid var(--p-accent-line);
  border-radius: var(--p-radius-pill); padding: 6px 12px;
}
.p-viz-loc svg { width: 15px; height: 15px; }
.p-viz-scan { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: var(--p-muted); }
.p-viz-rows { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.p-viz-row {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--p-border);
  border-radius: var(--p-radius-sm); padding: 8px 12px 8px 8px;
  box-shadow: 0 1px 2px rgba(12, 23, 19, 0.03);
}
.p-viz-thumb { width: 40px; height: 40px; flex: none; border-radius: 8px; overflow: hidden; background: var(--p-bg-tint); }
.p-viz-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-viz-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.p-viz-row-main b { font-size: 13.5px; font-weight: 700; color: var(--p-ink); }
.p-viz-row-main span { font-size: 11.5px; color: var(--p-muted-2); }
.p-viz-row-end { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.p-viz-row-end b { font-size: 13.5px; font-weight: 700; color: var(--p-ink); }
.p-viz-row-end span { font-size: 11px; font-weight: 600; color: var(--p-accent-deep); }
.p-viz-foot { display: flex; align-items: center; gap: 9px; margin-top: 14px; font-size: 12.5px; color: var(--p-muted); }
.p-viz-foot b { color: var(--p-accent-deep); font-size: 14px; }
.p-viz-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--p-accent); flex: none; box-shadow: 0 0 0 0 var(--p-accent-glow); animation: p-pulse 1.8s ease-out infinite; }
@keyframes p-pulse { 0% { box-shadow: 0 0 0 0 rgba(61,142,114,0.5); } 70% { box-shadow: 0 0 0 9px rgba(61,142,114,0); } 100% { box-shadow: 0 0 0 0 rgba(61,142,114,0); } }

/* panel 2: RentIQ — the star */
.p-viz-panel--rentiq { justify-content: flex-start; }
.p-viz-rentiq-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.p-viz-kicker {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--p-accent-deep);
}
.p-viz-conf { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--p-muted); }
.p-viz-conf i { width: 7px; height: 7px; border-radius: 50%; background: var(--p-accent); flex: none; }
.p-viz-rent {
  font-family: var(--p-mono);
  font-size: clamp(36px, 4.5vw, 44px); font-weight: 500; letter-spacing: -0.02em; line-height: 1;
  color: var(--p-ink); margin: 0 0 14px;
  font-variant-numeric: tabular-nums; font-feature-settings: 'zero' 1;
}
.p-viz-rent small { font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--p-muted-2); letter-spacing: 0; margin-left: 3px; }
/* metric strip under the estimate: hairline dividers, no boxes */
.p-viz-rmetrics {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-bottom: 14px; padding: 10px 0;
  border-top: 1px solid var(--p-hairline); border-bottom: 1px solid var(--p-hairline);
}
.p-viz-rmetric { display: flex; flex-direction: column; gap: 3px; padding: 0 16px; }
.p-viz-rmetric:first-child { padding-left: 2px; }
.p-viz-rmetric + .p-viz-rmetric { border-left: 1px solid var(--p-hairline); }
.p-viz-rmetric b {
  font-family: var(--p-mono); font-size: 16px; font-weight: 500; letter-spacing: -0.01em; color: var(--p-ink);
  font-variant-numeric: tabular-nums; font-feature-settings: 'zero' 1;
  text-transform: none;
}
.p-viz-rmetric {
  font-family: var(--p-mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--p-muted-2);
}
/* comparables range with plotted comps + estimate marker */
.p-viz-range { margin-bottom: 4px; }
.p-viz-range-cap {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--p-mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--p-muted-2); margin-bottom: 10px;
}
.p-viz-range-n { color: var(--p-accent-deep); }
/* comparable-rent distribution: flat tonal bars on a baseline hairline */
.p-viz-hist {
  position: relative; display: flex; align-items: flex-end; gap: 3px;
  height: 62px; padding-top: 20px; box-sizing: border-box;
  border-bottom: 1px solid var(--p-hairline);
}
.p-viz-bar { flex: 1; min-width: 0; height: var(--h); border-radius: 2px 2px 0 0; background: var(--p-fill-soft); }
.p-viz-bar.in { background: rgba(61, 142, 114, 0.40); }
.p-viz-bar.is-est { background: var(--p-accent); }
.p-viz-est-flag {
  position: absolute; top: -2px; left: 50%; transform: translateX(-50%); z-index: 3; white-space: nowrap;
  font-family: var(--p-mono); font-size: 11px; font-weight: 500; color: #fff;
  background: var(--p-accent-deep);
  padding: 3px 8px; border-radius: 6px;
  box-shadow: 0 2px 6px rgba(var(--p-shadow-rgb), 0.22);
  font-variant-numeric: tabular-nums; font-feature-settings: 'zero' 1;
}
.p-viz-est-flag small { font-size: 0.8em; opacity: 0.7; }
.p-viz-est-flag::after { content: ""; position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--p-accent-deep); }
.p-viz-range-labels {
  display: flex; justify-content: space-between; margin-top: 8px;
  font-family: var(--p-mono); font-size: 10.5px; color: var(--p-muted-2);
  font-variant-numeric: tabular-nums; font-feature-settings: 'zero' 1;
}
/* comparables mini-list */
.p-viz-comps { display: flex; flex-direction: column; gap: 0; margin-top: 8px; }
.p-viz-comp { display: flex; align-items: center; gap: 9px; padding: 7px 2px; border-bottom: 1px solid var(--p-hairline); font-size: 12.5px; color: var(--p-text); }
.p-viz-comp:last-child { border-bottom: none; }
.p-viz-comp-thumb { width: 26px; height: 26px; flex: none; border-radius: 6px; overflow: hidden; background: var(--p-bg-tint); position: relative; }
.p-viz-comp-thumb::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--p-hairline); border-radius: 6px; }
.p-viz-comp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-viz-comp-m {
  margin-left: auto; flex: none;
  font-family: var(--p-mono); font-size: 10px; color: var(--p-accent-deep);
  background: rgba(61, 142, 114, 0.10); border-radius: 5px; padding: 2px 6px;
}
.p-viz-comp b {
  font-family: var(--p-mono); font-size: 12px; font-weight: 500; color: var(--p-ink);
  min-width: 52px; text-align: right;
  font-variant-numeric: tabular-nums; font-feature-settings: 'zero' 1;
}
.p-viz-rentiq-foot {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--p-hairline);
  font-family: var(--p-mono); font-size: 11px; color: var(--p-muted);
  display: flex; align-items: center; gap: 8px;
}
.p-viz-rentiq-foot b { color: var(--p-accent-deep); font-weight: 500; }

/* panel 3: renovation */
.p-viz-panel[data-panel="2"] { justify-content: center; }
.p-viz-reno-imgs { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.p-viz-reno-imgs figure { margin: 0; flex: 1; position: relative; }
.p-viz-reno-imgs img { width: 100%; height: 104px; object-fit: cover; border-radius: var(--p-radius-sm); border: 1px solid var(--p-border); display: block; }
.p-viz-reno-lines { display: flex; flex-direction: column; gap: 0; margin-bottom: 14px; }
.p-viz-rline { display: flex; align-items: center; justify-content: space-between; padding: 8px 2px; border-bottom: 1px solid var(--p-border); font-size: 13px; }
.p-viz-rline:last-child { border-bottom: none; }
.p-viz-rline i { font-style: normal; color: var(--p-muted); }
.p-viz-rline b { font-weight: 700; color: var(--p-ink); }
.p-viz-reno-imgs figcaption {
  position: absolute; left: 8px; bottom: 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: #fff; background: rgba(12,23,19,0.62); border-radius: var(--p-radius-pill); padding: 3px 9px; backdrop-filter: blur(3px);
}
.p-viz-reno-arrow { width: 24px; height: 24px; flex: none; color: var(--p-accent); }
.p-viz-reno-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.p-viz-stat { background: var(--p-bg-tint); border: 1px solid var(--p-border); border-radius: var(--p-radius-sm); padding: 12px 14px; }
.p-viz-stat.is-hi { background: var(--p-accent-tint); border-color: var(--p-accent-line); }
.p-viz-stat-k { display: block; font-size: 11.5px; color: var(--p-muted-2); margin-bottom: 4px; }
.p-viz-stat-v { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: var(--p-ink); }
.p-viz-stat.is-hi .p-viz-stat-v { color: var(--p-accent-deep); }

/* panel 1: source — stylised live map with price pins, then a couple of rows */
.p-viz-map {
  position: relative; flex: 1; min-height: 132px; margin-bottom: 12px;
  border: 1px solid var(--p-border); border-radius: var(--p-radius-sm); overflow: hidden;
  background: linear-gradient(120deg, #f1f6f3 0%, #e9f0ec 100%);
}
.p-viz-map::before {            /* faint street grid */
  content: ""; position: absolute; inset: -25%;
  background:
    repeating-linear-gradient(37deg, transparent 0 27px, rgba(120,144,132,0.18) 27px 29px),
    repeating-linear-gradient(-53deg, transparent 0 40px, rgba(120,144,132,0.14) 40px 42px),
    repeating-linear-gradient(37deg, transparent 0 82px, rgba(96,128,112,0.12) 82px 85px);
}
.p-viz-map::after {             /* soft blocks / parkland */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(130px 96px at 72% 30%, rgba(61,142,114,0.12), transparent 70%),
    radial-gradient(96px 74px at 20% 74%, rgba(61,142,114,0.09), transparent 70%);
}
.p-viz-pin {
  position: absolute; transform: translate(-50%, -50%); z-index: 2;
  font-size: 10.5px; font-weight: 700; letter-spacing: -0.01em; color: #fff; white-space: nowrap;
  background: var(--p-ink); padding: 3px 7px; border-radius: var(--p-radius-pill);
  box-shadow: 0 2px 5px rgba(12,23,19,0.25);
}
.p-viz-pin::after {
  content: ""; position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%);
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--p-ink);
}
.p-viz-pin.is-on { background: var(--p-accent); z-index: 3; box-shadow: 0 0 0 4px var(--p-accent-glow), 0 4px 9px rgba(61,142,114,0.42); }
.p-viz-pin.is-on::after { border-top-color: var(--p-accent); }
.p-viz-pin.is-dim { background: rgba(12,23,19,0.42); box-shadow: none; }
.p-viz-pin.is-dim::after { border-top-color: rgba(12,23,19,0.42); }
.p-viz-panel[data-panel="0"] .p-viz-rows { flex: none; }

/* panel 4: results — searchable index + lender-ready export */
.p-viz-panel--idx { justify-content: flex-start; }
.p-viz-idx-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.p-viz-idx-search {
  flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--p-muted-2); white-space: nowrap; overflow: hidden;
  background: var(--p-bg-tint); border: 1px solid var(--p-border); border-radius: var(--p-radius-pill);
  padding: 8px 12px;
}
.p-viz-idx-search svg { width: 14px; height: 14px; flex: none; }
.p-viz-idx-sort {
  display: inline-flex; align-items: center; gap: 6px; flex: none; white-space: nowrap;
  font-size: 11.5px; font-weight: 600; color: var(--p-accent-deep);
  background: var(--p-accent-tint); border: 1px solid var(--p-accent-line); border-radius: var(--p-radius-pill);
  padding: 8px 11px;
}
.p-viz-idx-sort svg { width: 12px; height: 12px; }
.p-viz-idx-meta { font-size: 11.5px; color: var(--p-muted-2); margin-bottom: 10px; }
.p-viz-idx-meta b { color: var(--p-accent-deep); font-weight: 700; }
.p-viz-idx-head {
  display: grid; grid-template-columns: 1fr 48px 46px 34px; gap: 10px; align-items: center;
  padding: 0 8px 7px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--p-muted-2); border-bottom: 1px solid var(--p-border);
}
.p-viz-idx-head span:not(:first-child) { text-align: right; }
.p-viz-idx-rows { display: flex; flex-direction: column; }
.p-viz-idx-row {
  display: grid; grid-template-columns: 1fr 48px 46px 34px; gap: 10px; align-items: center;
  padding: 9px 8px; border-bottom: 1px solid var(--p-border);
}
.p-viz-idx-prop { display: flex; align-items: center; gap: 10px; min-width: 0; }
.p-viz-idx-prop .p-viz-thumb { width: 32px; height: 32px; border-radius: 7px; }
.p-viz-idx-pm { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.p-viz-idx-pm b { font-size: 12.5px; font-weight: 700; color: var(--p-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-viz-idx-pm span { font-size: 11px; color: var(--p-muted-2); }
.p-viz-idx-irr { text-align: right; font-size: 13px; font-weight: 800; color: var(--p-accent-deep); }
.p-viz-idx-yld { text-align: right; font-size: 12px; font-weight: 600; color: var(--p-muted); }
.p-viz-idx-score {
  justify-self: end; min-width: 26px; text-align: center; font-size: 11.5px; font-weight: 800;
  color: var(--p-accent-deep); background: var(--p-accent-tint); border: 1px solid var(--p-accent-line);
  border-radius: 6px; padding: 2px 0;
}
.p-viz-export { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--p-border); }
.p-viz-export-cap { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--p-muted-2); }
.p-viz-export-thumbs { display: flex; gap: 14px; margin-left: auto; }
/* export docs: real Office product icons on a white doc card */
.p-viz-doc { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.p-viz-doc-page {
  position: relative; width: 60px; height: 46px; border-radius: 6px; overflow: hidden;
  background: #fff; border: 1px solid var(--p-border-strong); box-shadow: var(--p-shadow-sm);
  display: flex; align-items: center; justify-content: center;
}
.p-viz-doc-page img { width: 26px; height: 26px; display: block; }
.p-viz-doc-badge {
  position: absolute; top: -7px; right: -8px; z-index: 2;
  font-family: var(--p-mono); font-size: 8.5px; font-weight: 500; letter-spacing: 0.02em; color: #fff;
  border-radius: 5px; padding: 2px 5px; box-shadow: 0 1px 3px rgba(12,23,19,0.28);
}
.p-viz-doc--pdf .p-viz-doc-badge { background: #c43e1c; }
.p-viz-doc--xls .p-viz-doc-badge { background: #107c41; }
.p-viz-doc-label { font-size: 10.5px; font-weight: 600; color: var(--p-muted); }

/* panel 5: go live — run once or monitor the market */
.p-viz-panel--live { justify-content: flex-start; }
.p-viz-live-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.p-viz-live-opts { display: flex; flex-direction: column; gap: 10px; }
.p-viz-live-opt {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 14px;
  border: 1px solid var(--p-border); border-radius: var(--p-radius); background: var(--p-bg-tint);
}
.p-viz-live-opt.is-on { border-color: var(--p-accent); background: var(--p-accent-tint); box-shadow: 0 0 0 3px var(--p-accent-glow); }
.p-viz-live-ico {
  width: 38px; height: 38px; flex: none; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--p-border); color: var(--p-accent-deep);
}
.p-viz-live-opt.is-on .p-viz-live-ico { background: var(--p-accent); border-color: var(--p-accent); color: #fff; }
.p-viz-live-ico svg { width: 19px; height: 19px; }
.p-viz-live-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.p-viz-live-t b { font-size: 14px; font-weight: 700; color: var(--p-ink); }
.p-viz-live-t span { font-size: 12px; color: var(--p-muted); }
.p-viz-live-pick {
  margin-left: auto; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--p-accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.p-viz-live-pick svg { width: 13px; height: 13px; }
.p-viz-live-cadence { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.p-viz-live-cadence-cap { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--p-muted-2); }
.p-viz-live-chips { display: flex; gap: 8px; }
.p-viz-live-chip {
  font-size: 12px; font-weight: 600; color: var(--p-muted);
  background: var(--p-bg-tint); border: 1px solid var(--p-border); border-radius: var(--p-radius-pill); padding: 6px 12px;
}
.p-viz-live-chip.is-on { color: var(--p-accent-deep); background: var(--p-accent-tint); border-color: var(--p-accent-line); }
.p-viz-live-sched { display: flex; align-items: center; gap: 9px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--p-border); font-size: 12.5px; color: var(--p-muted); }
.p-viz-live-sched b { color: var(--p-accent-deep); font-weight: 700; }

/* ============ build-in motion: each stage's content animates in on activation ============ */
:root { --p-ease-out: cubic-bezier(.2, .7, .2, 1); }
/* generic reveal: elements rest hidden, slide+fade in when their panel is active */
.p-viz-loc, .p-viz-row, .p-viz-foot,
.p-viz-rentiq-head, .p-viz-rent, .p-viz-range, .p-viz-rentiq-foot,
.p-viz-reno-imgs, .p-viz-stat {
  opacity: 0; transform: translateY(12px);
  transition: opacity .55s var(--p-ease-out), transform .55s var(--p-ease-out);
}
.p-viz-row { transform: translateX(-12px); }
.p-viz-panel.is-active .p-viz-loc,
.p-viz-panel.is-active .p-viz-row,
.p-viz-panel.is-active .p-viz-foot,
.p-viz-panel.is-active .p-viz-rentiq-head,
.p-viz-panel.is-active .p-viz-rent,
.p-viz-panel.is-active .p-viz-range,
.p-viz-panel.is-active .p-viz-rentiq-foot,
.p-viz-panel.is-active .p-viz-reno-imgs,
.p-viz-panel.is-active .p-viz-stat { opacity: 1; transform: none; }

/* source: location chip, then rows cascade, then footer */
.p-viz-panel.is-active .p-viz-loc { transition-delay: .05s; }
.p-viz-panel.is-active .p-viz-row:nth-child(1) { transition-delay: .14s; }
.p-viz-panel.is-active .p-viz-row:nth-child(2) { transition-delay: .20s; }
.p-viz-panel.is-active .p-viz-row:nth-child(3) { transition-delay: .26s; }
.p-viz-panel.is-active .p-viz-row:nth-child(4) { transition-delay: .32s; }
.p-viz-panel.is-active .p-viz-row:nth-child(5) { transition-delay: .38s; }
.p-viz-panel.is-active .p-viz-foot { transition-delay: .5s; }

/* rentiq: header, the big number, range, footer */
.p-viz-panel.is-active .p-viz-rentiq-head { transition-delay: .06s; }
.p-viz-panel.is-active .p-viz-rent { transition-delay: .12s; }
.p-viz-panel.is-active .p-viz-range { transition-delay: .22s; }
.p-viz-panel.is-active .p-viz-rentiq-foot { transition-delay: .55s; }
/* estimate distribution: bars rise from the baseline left-to-right, then the flag drops in */
.p-viz-bar { transform: scaleY(0); transform-origin: bottom; transition: transform .5s var(--p-ease-out); }
.p-viz-panel.is-active .p-viz-bar { transform: scaleY(1); }
.p-viz-panel.is-active .p-viz-bar:nth-child(1){transition-delay:.26s}
.p-viz-panel.is-active .p-viz-bar:nth-child(2){transition-delay:.29s}
.p-viz-panel.is-active .p-viz-bar:nth-child(3){transition-delay:.32s}
.p-viz-panel.is-active .p-viz-bar:nth-child(4){transition-delay:.35s}
.p-viz-panel.is-active .p-viz-bar:nth-child(5){transition-delay:.38s}
.p-viz-panel.is-active .p-viz-bar:nth-child(6){transition-delay:.41s}
.p-viz-panel.is-active .p-viz-bar:nth-child(7){transition-delay:.44s}
.p-viz-panel.is-active .p-viz-bar:nth-child(8){transition-delay:.47s}
.p-viz-panel.is-active .p-viz-bar:nth-child(9){transition-delay:.50s}
.p-viz-panel.is-active .p-viz-bar:nth-child(10){transition-delay:.53s}
.p-viz-panel.is-active .p-viz-bar:nth-child(11){transition-delay:.56s}
.p-viz-panel.is-active .p-viz-bar:nth-child(12){transition-delay:.59s}
.p-viz-panel.is-active .p-viz-bar:nth-child(13){transition-delay:.62s}
.p-viz-est-flag { opacity: 0; transform: translateX(-50%) translateY(5px); transition: opacity .4s var(--p-ease-out), transform .4s var(--p-ease-out); }
.p-viz-panel.is-active .p-viz-est-flag { opacity: 1; transform: translateX(-50%) translateY(0); transition-delay: .66s; }

/* renovation: images, then the four stat tiles cascade */
.p-viz-panel.is-active .p-viz-reno-imgs { transition-delay: .08s; }
.p-viz-panel.is-active .p-viz-stat:nth-child(1){transition-delay:.20s}
.p-viz-panel.is-active .p-viz-stat:nth-child(2){transition-delay:.27s}
.p-viz-panel.is-active .p-viz-stat:nth-child(3){transition-delay:.34s}
.p-viz-panel.is-active .p-viz-stat:nth-child(4){transition-delay:.41s}

/* new stages: source map + pins, results index + export, go-live options */
.p-viz-map, .p-viz-idx-bar, .p-viz-idx-meta, .p-viz-idx-head, .p-viz-idx-row, .p-viz-export,
.p-viz-live-head, .p-viz-live-opt, .p-viz-live-cadence, .p-viz-live-sched {
  opacity: 0; transform: translateY(12px);
  transition: opacity .55s var(--p-ease-out), transform .55s var(--p-ease-out);
}
.p-viz-idx-row { transform: translateX(-12px); }
.p-viz-pin { opacity: 0; transform: translate(-50%, -38%) scale(.82); transition: opacity .4s var(--p-ease-out), transform .4s var(--p-ease-out); }
.p-viz-panel.is-active .p-viz-map,
.p-viz-panel.is-active .p-viz-idx-bar,
.p-viz-panel.is-active .p-viz-idx-meta,
.p-viz-panel.is-active .p-viz-idx-head,
.p-viz-panel.is-active .p-viz-idx-row,
.p-viz-panel.is-active .p-viz-export,
.p-viz-panel.is-active .p-viz-live-head,
.p-viz-panel.is-active .p-viz-live-opt,
.p-viz-panel.is-active .p-viz-live-cadence,
.p-viz-panel.is-active .p-viz-live-sched { opacity: 1; transform: none; }
.p-viz-panel.is-active .p-viz-pin { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* source: map fades in, pins pop in sequence */
.p-viz-panel.is-active .p-viz-map { transition-delay: .04s; }
.p-viz-panel.is-active .p-viz-pin:nth-child(1){transition-delay:.16s}
.p-viz-panel.is-active .p-viz-pin:nth-child(2){transition-delay:.22s}
.p-viz-panel.is-active .p-viz-pin:nth-child(3){transition-delay:.28s}
.p-viz-panel.is-active .p-viz-pin:nth-child(4){transition-delay:.34s}
.p-viz-panel.is-active .p-viz-pin:nth-child(5){transition-delay:.40s}
.p-viz-panel.is-active .p-viz-pin:nth-child(6){transition-delay:.46s}
.p-viz-panel.is-active .p-viz-pin:nth-child(7){transition-delay:.52s}
.p-viz-panel.is-active .p-viz-pin:nth-child(8){transition-delay:.58s}

/* results: toolbar, meta, head, rows cascade, export last */
.p-viz-panel.is-active .p-viz-idx-bar { transition-delay: .05s; }
.p-viz-panel.is-active .p-viz-idx-meta { transition-delay: .10s; }
.p-viz-panel.is-active .p-viz-idx-head { transition-delay: .15s; }
.p-viz-panel.is-active .p-viz-idx-row:nth-child(1){transition-delay:.22s}
.p-viz-panel.is-active .p-viz-idx-row:nth-child(2){transition-delay:.29s}
.p-viz-panel.is-active .p-viz-idx-row:nth-child(3){transition-delay:.36s}
.p-viz-panel.is-active .p-viz-idx-row:nth-child(4){transition-delay:.43s}
.p-viz-panel.is-active .p-viz-export { transition-delay: .52s; }

/* go live: header, the two options, cadence, schedule line */
.p-viz-panel.is-active .p-viz-live-head { transition-delay: .06s; }
.p-viz-panel.is-active .p-viz-live-opt:nth-child(1){transition-delay:.16s}
.p-viz-panel.is-active .p-viz-live-opt:nth-child(2){transition-delay:.24s}
.p-viz-panel.is-active .p-viz-live-cadence { transition-delay: .34s; }
.p-viz-panel.is-active .p-viz-live-sched { transition-delay: .44s; }

@media (prefers-reduced-motion: reduce) {
  .p-viz-map, .p-viz-pin, .p-viz-idx-bar, .p-viz-idx-meta, .p-viz-idx-head, .p-viz-idx-row,
  .p-viz-export, .p-viz-live-head, .p-viz-live-opt, .p-viz-live-cadence, .p-viz-live-sched {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .p-viz-pin { transform: translate(-50%, -50%) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .p-viz-loc, .p-viz-row, .p-viz-foot, .p-viz-rentiq-head, .p-viz-rent, .p-viz-range,
  .p-viz-rentiq-foot, .p-viz-reno-imgs, .p-viz-stat, .p-viz-bar {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .p-viz-est-flag { opacity: 1 !important; transform: translateX(-50%) !important; transition: none !important; }
}

/* narrow desktop band: the half-width card can't fit 5 labels — numbers-only folio strip */
@media (min-width: 901px) and (max-width: 1080px) {
  .p-viz-tab-t { display: none; }
  .p-viz-tab { gap: 0; padding: 4px 2px 8px; }
}

/* responsive: head first, visual pins to the top, steps scroll beneath */
@media (max-width: 900px) {
  .p-scrolly-grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 0; }
  .p-scrolly .p-head, .p-scrolly-viz, .p-scrolly-steps { grid-column: auto; grid-row: auto; }
  .p-scrolly .p-head { order: -2; margin: 0 0 20px; }
  /* pin flush under the 65px sticky header; the wrapper carries an opaque,
     edge-to-edge page-coloured band (plus a soft fade below) so the step text
     disappears cleanly behind it instead of peeking through the gaps */
  .p-scrolly-viz {
    order: -1; position: sticky; top: 65px;
    height: 48vh; min-height: 400px;
    margin: 0 calc(var(--p-gutter) * -1) 12px;
    padding: 11px var(--p-gutter) 0;
    background: var(--p-bg);
    z-index: 1; display: block;
  }
  .p-scrolly-viz::after {
    content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 28px;
    background: linear-gradient(var(--p-bg), rgba(255, 255, 255, 0));
    pointer-events: none;
  }
  .p-scrolly-viz .p-viz-frame { height: 100%; overflow: hidden; }
  /* panels are sized for the tall desktop frame; soften whatever they overflow */
  .p-scrolly-viz .p-viz-frame::after {
    content: ""; position: absolute; left: 1px; right: 1px; bottom: 0; height: 36px;
    background: linear-gradient(rgba(251, 252, 251, 0), #fbfcfb 80%);
    border-radius: 0 0 12px 12px;
    pointer-events: none;
  }
  .p-scrolly-steps { order: 1; }
  .p-step2 { min-height: 64vh; }
  .p-step2:first-child { min-height: 36vh; justify-content: center; padding-top: 0; }
  .p-step2:last-child { min-height: 48vh; }
  .p-viz-frame { box-shadow: var(--p-shadow); }
}
@media (max-width: 560px) {
  .p-viz-reno-imgs img { height: 88px; }
  .p-viz-rent { font-size: 52px; }
  /* numbers-only folio strip so 5 stages fit cleanly */
  .p-viz-tab-t { display: none; }
  .p-viz-tab { gap: 0; padding: 4px 2px 8px; }
  .p-spec-body > div { padding: 3px 2px; font-size: 12px; }
  .p-spec-body dt { flex: 0 0 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .p-viz-panel { transition: opacity 0.2s ease; transform: none; }
  .p-hero-scrollcue svg, .p-viz-pulse { animation: none; }
}

/* ====================== SHARED INSTRUMENT CARD (both models on the plate use it) ====================== */

/* accuracy viz card — dark glass: inset rings + top-light wash, no borders */
.p-rentiq-card {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: none;
  border-radius: 12px;
  padding: 22px 24px 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.p-rentiq-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 40%;
  border-radius: inherit; pointer-events: none;
  background: linear-gradient(rgba(255, 255, 255, 0.05), transparent 67%);
}
.p-rentiq-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.p-rentiq-card-title { font-size: 13.5px; font-weight: 700; color: #fff; }
.p-rentiq-card-badge {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #6fd3ab; background: rgba(111, 211, 171, 0.12); border: 1px solid rgba(111, 211, 171, 0.28);
  border-radius: var(--p-radius-pill); padding: 3px 9px;
}
/* backtest instrument: gridlines, mono ticks, confidence band, dense cloud */
.p-scatter { width: 100%; height: auto; display: block; }
.p-sc-grid { stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; }
.p-sc-tick {
  fill: rgba(255, 255, 255, 0.45); font-size: 11px;
  font-family: var(--p-mono); font-variant-numeric: tabular-nums;
}
.p-sc-band { fill: rgba(61, 142, 114, 0.16); }
.p-sc-band-lbl { fill: rgba(111, 211, 171, 0.8); font-size: 10.5px; font-family: var(--p-mono); letter-spacing: 0.03em; }
.p-sc-ident { stroke: rgba(111, 211, 171, 0.65); stroke-width: 1.5; stroke-dasharray: 5 5; }
.p-sc-pts circle { fill: #6fd3ab; }
.p-sc-ex-lead { stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; }
.p-sc-ex-ring { fill: none; stroke: rgba(255, 255, 255, 0.4); stroke-width: 1; }
.p-sc-ex-dot { fill: #fff; }
.p-sc-ex-t {
  fill: #fff; font-size: 11.5px; font-weight: 500;
  font-family: var(--p-mono); font-variant-numeric: tabular-nums;
}
.p-sc-ex-t2 { fill: rgba(255, 255, 255, 0.6); font-size: 11px; font-family: var(--p-mono); font-variant-numeric: tabular-nums; }
.p-sc-axis-lbl { fill: rgba(255, 255, 255, 0.5); font-size: 11.5px; font-family: var(--font); }
.p-rentiq-card-meta {
  margin-top: 10px;
  font-family: var(--p-mono); font-size: 10.5px; color: rgba(255, 255, 255, 0.45);
  font-variant-numeric: tabular-nums; font-feature-settings: 'zero' 1;
}
.p-rentiq-card-foot { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 12.5px; color: rgba(255, 255, 255, 0.62); }


/* ====================== MATERIAL COMPONENTS (frames, cards, mocks) ====================== */

/* app frame: hairline + soft outline ring + tinted shadow stack */
.p-frame {
  position: relative;
  background: #fff; overflow: hidden;
  border: 1px solid var(--p-stroke);
  outline: 4px solid rgba(213, 222, 216, 0.25);
  border-radius: 12px;
  box-shadow: var(--p-shadow-frame);
}
.p-frame--fade {
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  border-bottom: none;
  box-shadow: none;
  outline: none;
}
/* when fading, carry the ring on a wrapper-free inset ring instead */
.p-frame--fade::before {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--p-stroke);
}

/* elevated card */
.p-card {
  background: #fff; border: none; border-radius: 12px;
  box-shadow: var(--p-shadow-card);
  transition: box-shadow var(--p-med) var(--p-ease);
}
.p-card:hover { box-shadow: var(--p-shadow-card-hover); }

/* ====================== SHOWCASE MOCK (ranked results table) ====================== */
.p-showcase { padding: 0 var(--p-gutter) clamp(56px, 7vw, 88px); background: #fff; }
.p-mock { font-variant-numeric: tabular-nums; font-feature-settings: 'zero' 1; }
.p-mock-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 16px;
  background: var(--p-bg-2);
  border-bottom: 1px solid var(--p-hairline);
}
.p-mock-bar i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.p-mock-bar i:nth-child(1) { background: #f0aca3; }
.p-mock-bar i:nth-child(2) { background: #f2d39b; }
.p-mock-bar i:nth-child(3) { background: #aed7be; }
.p-mock-url {
  margin-left: 10px;
  font-family: var(--p-mono); font-size: 11.5px; color: var(--p-muted-2);
  background: #fff; border: 1px solid var(--p-hairline);
  border-radius: var(--p-radius-pill); padding: 4px 14px;
}
.p-mock-live {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--p-mono); font-size: 11px; color: var(--p-accent-deep);
}
.p-mock-toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--p-hairline);
}
.p-mock-search {
  flex: 1; display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--p-muted-2);
  background: var(--p-fill-faint);
  border: 1px solid var(--p-hairline);
  border-radius: 8px; padding: 8px 12px; max-width: 420px;
}
.p-mock-search svg { width: 14px; height: 14px; flex: none; }
.p-mock-count { font-family: var(--p-mono); font-size: 12px; color: var(--p-muted); }
.p-mock-count b { font-weight: 500; color: var(--p-ink); }
.p-mock-sort {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; color: var(--p-ink);
  background: #fff; border: 1px solid var(--p-hairline-strong);
  border-radius: 8px; padding: 7px 12px;
}
.p-mock-sort svg { width: 14px; height: 14px; color: var(--p-muted); }
.p-mock-thead, .p-mock-row {
  display: grid;
  grid-template-columns: minmax(220px, 2.3fr) 0.9fr 1.3fr 0.7fr 0.7fr 0.6fr;
  gap: 12px; align-items: center;
  padding: 10px 18px;
}
.p-mock-thead {
  font-family: var(--p-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--p-muted-2);
  border-bottom: 1px solid var(--p-hairline);
  padding-top: 12px; padding-bottom: 8px;
}
.p-mock-row { border-bottom: 1px solid var(--p-hairline); font-size: 13.5px; }
.p-mock-row:hover { background: var(--p-bg-2); }
.p-mock-row.is-top { background: rgba(61, 142, 114, 0.05); }
.p-mock-prop { display: flex; align-items: center; gap: 12px; min-width: 0; }
.p-mock-thumb {
  width: 44px; height: 34px; border-radius: 6px; overflow: hidden; flex: none;
  position: relative;
}
.p-mock-thumb::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--p-hairline); border-radius: 6px; }
.p-mock-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-mock-pm { min-width: 0; }
.p-mock-pm b { display: block; font-weight: 600; color: var(--p-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-mock-pm span { display: block; font-size: 12px; color: var(--p-muted); }
.p-mock-cell { font-family: var(--p-mono); font-size: 12.5px; color: var(--p-text); }
.p-mock-cell small { display: block; font-size: 10.5px; color: var(--p-muted-2); }
.p-mock-irr { font-family: var(--p-mono); font-size: 13px; font-weight: 500; color: var(--p-accent-deep); }
.p-mock-score {
  justify-self: start;
  font-family: var(--p-mono); font-size: 12px; font-weight: 500; color: var(--p-accent-deep);
  background: rgba(61, 142, 114, 0.10);
  border-radius: 6px; padding: 3px 8px;
  box-shadow: inset 0 0 0 1px rgba(61, 142, 114, 0.25);
}
.p-mock-caption {
  margin: 16px auto 0; text-align: center;
  font-family: var(--p-mono); font-size: 12px; color: var(--p-muted);
}
@media (max-width: 860px) {
  .p-mock-thead, .p-mock-row { grid-template-columns: minmax(150px, 2fr) 1fr 0.8fr; }
  .p-mock-thead > :nth-child(n+4), .p-mock-row > :nth-child(n+4) { display: none; }
  .p-mock-toolbar .p-mock-count { display: none; }
}
@media (max-width: 560px) {
  /* browser bar: drop the URL pill so the location label never runs off-edge */
  .p-mock-url { display: none; }
  .p-mock-bar { padding: 10px 14px; }
  .p-mock-live { font-size: 10.5px; }
  /* toolbar: let the search truncate and keep the sort chip from overflowing */
  .p-mock-toolbar { padding: 10px 14px; gap: 8px; }
  .p-mock-search { min-width: 0; overflow: hidden; white-space: nowrap; font-size: 12px; padding: 7px 10px; }
  .p-mock-sort { flex: none; font-size: 12px; padding: 6px 9px; }
  .p-mock-thead, .p-mock-row { padding-left: 14px; padding-right: 14px; }
}

/* ====================== CAPABILITY TABS (replaces dot carousel) ====================== */
.p-captabs { max-width: 980px; margin: 0 auto; }
.p-captabs-tabs {
  display: flex; justify-content: center; gap: 4px;
  margin-bottom: 22px; flex-wrap: wrap;
}
.p-captab {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font); font-size: 13.5px; font-weight: 500; color: var(--p-muted);
  background: transparent; border: none; border-radius: 8px;
  padding: 8px 14px; cursor: pointer;
  transition: background-color var(--p-fast) var(--p-ease), color var(--p-fast) var(--p-ease);
}
.p-captab:hover { background: var(--p-fill-soft); color: var(--p-ink); }
.p-captab.is-active {
  color: var(--p-accent-deep);
  background: rgba(61, 142, 114, 0.10);
  box-shadow: inset 0 0 0 1px rgba(61, 142, 114, 0.25);
}
.p-captabs .p-viz-frame { height: 500px; }
@media (max-width: 640px) { .p-captabs .p-viz-frame { height: 440px; } }

/* ====================== PROOF BAND (replaces placeholder testimonials) ====================== */
.p-proof {
  padding: clamp(48px, 6vw, 72px) var(--p-gutter);
  border-top: 1px solid var(--p-hairline);
  border-bottom: 1px solid var(--p-hairline);
  background: var(--p-bg-2);
}
.p-proof-grid {
  max-width: var(--p-container); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.p-proof-item { text-align: center; padding: 0 16px; }
.p-proof-item + .p-proof-item { border-left: 1px solid var(--p-hairline); }
.p-proof-item b {
  display: block;
  font-family: var(--p-mono); font-size: clamp(22px, 2.6vw, 30px); font-weight: 500;
  letter-spacing: -0.01em; color: var(--p-ink); margin-bottom: 6px;
  font-variant-numeric: tabular-nums; font-feature-settings: 'zero' 1;
}
.p-proof-item span { font-size: 13.5px; color: var(--p-muted); }
.p-proof-note {
  max-width: var(--p-container); margin: 28px auto 0; text-align: center;
  font-family: var(--p-mono); font-size: 12px; color: var(--p-muted);
}
.p-proof-note i { font-style: normal; color: var(--p-accent-deep); }
@media (max-width: 720px) {
  .p-proof-grid { grid-template-columns: 1fr; gap: 20px; }
  .p-proof-item + .p-proof-item { border-left: none; border-top: 1px solid var(--p-hairline); padding-top: 20px; }
}

/* ====================== BENTO MINI-MOCKS ====================== */
.p-bmock {
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
  padding: 20px;
}
.p-bfoot {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--p-mono); font-size: 11.5px; color: var(--p-muted);
  font-variant-numeric: tabular-nums; font-feature-settings: 'zero' 1;
}
.p-bfoot b { font-weight: 500; color: var(--p-ink); }
/* mini map — pins here are static (no panel activation), so undo the viz gating */
.p-bmap .p-viz-pin { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.p-bmap {
  position: relative; flex: 1; min-height: 150px;
  border-radius: 8px; overflow: hidden;
  background:
    linear-gradient(rgba(61, 142, 114, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61, 142, 114, 0.05) 1px, transparent 1px),
    linear-gradient(160deg, #f2f7f4, #e9f1ec);
  background-size: 28px 28px, 28px 28px, 100% 100%;
  box-shadow: inset 0 0 0 1px var(--p-hairline);
}
/* comp rows */
.p-bcomps { display: flex; flex-direction: column; }
.p-bcomp {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 2px; font-size: 12.5px; color: var(--p-text);
}
.p-bcomp + .p-bcomp { border-top: 1px solid var(--p-hairline); }
.p-bcomp-thumb { width: 38px; height: 30px; border-radius: 6px; overflow: hidden; flex: none; position: relative; }
.p-bcomp-thumb::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--p-hairline); border-radius: 6px; }
.p-bcomp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-bcomp-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-bcomp-t b { font-weight: 600; color: var(--p-ink); }
.p-bcomp-m {
  font-family: var(--p-mono); font-size: 10.5px; color: var(--p-accent-deep);
  background: rgba(61, 142, 114, 0.10); border-radius: 5px; padding: 2px 6px; flex: none;
}
.p-bcomp-v { font-family: var(--p-mono); font-size: 12.5px; font-weight: 500; color: var(--p-ink); flex: none; }
/* before/after pair */
.p-bba { display: flex; align-items: center; gap: 10px; justify-content: center; }
.p-bba figure { position: relative; margin: 0; flex: 1; border-radius: 8px; overflow: hidden; }
.p-bba figure::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--p-hairline); border-radius: 8px; }
.p-bba img { width: 100%; height: 108px; object-fit: cover; display: block; }
.p-bba figcaption {
  position: absolute; bottom: 6px; right: 6px;
  font-family: var(--p-mono); font-size: 11px; font-weight: 500; color: #fff;
  background: rgba(12, 23, 19, 0.72); border-radius: 5px; padding: 2px 7px;
}
.p-bba svg { width: 18px; height: 18px; flex: none; color: var(--p-accent); }
/* underwriting stat grid */
.p-bstats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.p-bstat {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 14px;
  background: var(--p-bg-2); border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--p-hairline);
}
.p-bstat i {
  font-style: normal; font-family: var(--p-mono); font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--p-muted-2);
}
.p-bstat b {
  font-family: var(--p-mono); font-size: 17px; font-weight: 500; color: var(--p-ink);
  font-variant-numeric: tabular-nums; font-feature-settings: 'zero' 1;
}
/* docs + monitor rows */
.p-bdocs { display: flex; justify-content: center; gap: 18px; }
.p-blive { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }

/* ====================== PRICING TIERS ====================== */
.p-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.p-tier {
  position: relative;
  display: flex; flex-direction: column;
  padding: 26px 26px 24px;
}
.p-tier.is-featured { box-shadow: 0 0 0 1.5px var(--p-accent), var(--p-shadow-card); }
.p-tier.is-featured:hover { box-shadow: 0 0 0 1.5px var(--p-accent), var(--p-shadow-card-hover); }
.p-tier-badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  font-family: var(--p-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff; background: var(--p-accent);
  border-radius: var(--p-radius-pill); padding: 4px 11px;
  white-space: nowrap;
}
.p-tier-name { font-size: 15px; font-weight: 600; color: var(--p-ink); margin: 0 0 4px; }
.p-tier-sum { font-size: 13px; line-height: 1.5; color: var(--p-muted); margin: 0 0 16px; min-height: 2.6em; }
.p-tier-price {
  display: flex; align-items: baseline; gap: 6px;
  font-family: var(--p-mono); color: var(--p-ink);
  margin-bottom: 18px;
}
.p-tier-price b { font-size: 32px; font-weight: 500; letter-spacing: -0.01em; }
.p-tier-price span { font-size: 12.5px; color: var(--p-muted); }
.p-tier-feats { list-style: none; margin: 0 0 22px; padding: 18px 0 0; border-top: 1px solid var(--p-hairline); display: flex; flex-direction: column; gap: 9px; }
.p-tier-feats li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.45; color: var(--p-text); }
.p-tier-feats svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--p-accent); }
.p-tier-feats b { font-weight: 600; color: var(--p-ink); font-variant-numeric: tabular-nums; }
.p-tier .p-btn { margin-top: auto; width: 100%; }
.p-tiers-note {
  margin: 22px auto 0; text-align: center;
  font-family: var(--p-mono); font-size: 12px; color: var(--p-muted);
}
@media (max-width: 860px) {
  .p-tiers { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .p-tier-sum { min-height: 0; }
}

/* @@PARITY-SECTIONS@@ */