/* ===== Hero ===== */
.pc-hero { position: relative; padding: 96px 0 72px; background: var(--gradient-deep); color: #fff; overflow: hidden; }
.pc-hero::before { content: ''; position: absolute; inset: 0; background:
  radial-gradient(1200px 500px at 85% -20%, rgba(97,206,112,0.15), transparent 60%),
  radial-gradient(900px 400px at 10% 110%, rgba(97,206,112,0.08), transparent 55%);
  pointer-events: none; }
.pc-hero-inner { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; gap: 72px; align-items: center; }
.pc-hero .kicker.on-dark { color: var(--green-100); }
.pc-hero h1 { font-family: var(--font-display); font-weight: 600; font-size: 64px; line-height: 1.04; letter-spacing: -0.025em; margin: 20px 0; color: #fff; max-width: 700px; }
.pc-hero p.sub { font-size: 19px; color: rgba(255,255,255,0.8); line-height: 1.55; max-width: 600px; margin-bottom: 16px; }
.pc-hero p.supp { font-size: 16px; color: rgba(255,255,255,0.6); line-height: 1.55; max-width: 560px; margin-bottom: 32px; }
.pc-hero .ctas { display: flex; gap: 12px; }
.pc-hero-viz { position: relative; aspect-ratio: 5/4; border-radius: 20px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); padding: 20px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 10px; backdrop-filter: blur(20px); }
.pc-tile { border-radius: 12px; padding: 14px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.06); display: flex; flex-direction: column; gap: 8px; transition: background var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard); }
.pc-tile:hover { background: rgba(97,206,112,0.08); border-color: rgba(97,206,112,0.25); transform: translateY(-2px); }
.pc-tile svg { width: 20px; height: 20px; stroke: var(--green-100); fill: none; stroke-width: 1.75; opacity: 0.9; }
.pc-tile span { font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.85); line-height: 1.3; }

/* ===== Side nav ===== */
.pc-nav { position: sticky; top: 68px; z-index: 40; background: rgba(255,255,255,0.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-border); }
.pc-nav-inner { display: flex; gap: 2px; padding: 10px 0; overflow-x: auto; scrollbar-width: none; }
.pc-nav-inner::-webkit-scrollbar { display: none; }
.pc-nav a { padding: 8px 14px; font-size: 14px; font-weight: 600; color: var(--color-text-muted); border-radius: 8px; white-space: nowrap; }
.pc-nav a:hover { color: var(--color-text); background: var(--off-white-60); }
.pc-nav a.active { color: var(--color-text); background: var(--off-white-100); }

/* ===== Intro reassurance ===== */
.pc-intro { padding: 96px 0 80px; }
.pc-intro-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 64px; align-items: start; }
.pc-intro h2 { font-family: var(--font-display); font-weight: 600; font-size: 44px; letter-spacing: -0.02em; line-height: 1.08; margin-top: 16px; }
.pc-intro p.body { font-size: 17px; color: var(--color-text-muted); line-height: 1.55; margin-bottom: 32px; }
.pc-intro-points { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.pc-intro-points li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 18px 20px; background: var(--off-white-40); border: 1px solid var(--color-border-subtle); border-radius: 14px; font-size: 14.5px; line-height: 1.5; color: var(--color-text); }
.pc-intro-points svg { width: 16px; height: 16px; stroke: var(--green-100); fill: none; stroke-width: 2.25; margin-top: 3px; flex-shrink: 0; }

/* ===== Capability section ===== */
.cap-section { padding: 80px 0; border-top: 1px solid var(--color-border); scroll-margin-top: 120px; }
.cap-section:nth-of-type(even) { background: var(--off-white-40); }
.cap-head { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; margin-bottom: 40px; }
.cap-head h2 { font-family: var(--font-display); font-weight: 600; font-size: 36px; letter-spacing: -0.02em; line-height: 1.12; margin-top: 12px; }
.cap-head p { font-size: 17px; color: var(--color-text-muted); line-height: 1.55; max-width: 560px; margin-top: 12px; }
.cap-num { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--green-100); letter-spacing: 0.1em; text-transform: uppercase; }

.cap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cap-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cap-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cap-item {
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: 12px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  font-size: 16px;
  line-height: 1.45;
  color: var(--color-text);
  transition: border-color var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard);
}
.cap-section:nth-of-type(even) .cap-item { background: #fff; }
.cap-item:hover {
  border-color: var(--green-100);
  box-shadow: 0 4px 14px rgba(97, 206, 112, 0.1);
  transform: translateY(-1px);
}
.cap-item .ci-ic {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--green-20); color: #1E7A2B;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cap-item .ci-ic svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.25; }

/* ===== Featured pillar variant (Inspections, Reporting, Actions get larger cards with inline mockup) ===== */
.cap-featured { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.cap-featured .cap-grid { grid-template-columns: repeat(2, 1fr); }
.cap-mock {
  aspect-ratio: 4/3;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
.cap-mock-chrome {
  height: 32px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  background: var(--off-white-60);
  border-bottom: 1px solid var(--color-border);
}
.cap-mock-chrome span { width: 9px; height: 9px; border-radius: 50%; background: #E1E4EC; }
.cap-mock-chrome span.r { background: #FF5F57; }
.cap-mock-chrome span.y { background: #FEBC2E; }
.cap-mock-chrome span.g { background: #28C840; }
.cap-mock-body { flex: 1; padding: 20px; overflow: hidden; display: flex; flex-direction: column; gap: 10px; }

/* Mock: Inspection template */
.mock-insp-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--color-border-subtle); }
.mock-insp-header strong { font-family: var(--font-display); font-size: 14px; }
.mock-insp-header span { font-size: 11px; color: var(--color-text-subtle); }
.mock-insp-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 8px 10px; background: var(--off-white-40); border-radius: 8px; font-size: 12px; align-items: center; }
.mock-insp-row.h { border-left: 3px solid var(--green-100); }
.mock-insp-row strong { display: block; font-weight: 600; font-size: 12px; }
.mock-insp-row .sub { font-size: 10px; color: var(--color-text-subtle); }

/* Mock: Report */
.mock-rep { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.mock-rep-head { display: flex; justify-content: space-between; align-items: center; }
.mock-rep-head strong { font-family: var(--font-display); font-size: 14px; }
.mock-rep-meta { font-size: 10px; color: var(--color-text-subtle); }
.mock-rep-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
/* /platform/ section 02 — Reporting & evidence: 8-photo report-thumb grid.
 * Order loosely mirrors the inspection-row mock above it (exterior →
 * kitchen → shower seal → bathroom → smoke alarm → living → bedroom →
 * hallway), so each thumb visually pairs with the inspection finding
 * it represents. */
.mock-thumb {
  aspect-ratio: 1; border-radius: 6px;
  background-color: #d6cfc1;
  background-size: cover;
  background-position: center;
}
.mock-thumb:nth-child(1) { background-image: url('../assets/inspection-photos/exterior-house-front.webp'); }
.mock-thumb:nth-child(2) { background-image: url('../assets/inspection-photos/kitchen-side-angle.webp'); }
.mock-thumb:nth-child(3) { background-image: url('../assets/inspection-photos/shower-seal-silicone.webp'); }
.mock-thumb:nth-child(4) { background-image: url('../assets/inspection-photos/bathroom-side-angle.webp'); }
.mock-thumb:nth-child(5) { background-image: url('../assets/inspection-photos/smoke-alarm-ceiling.webp'); }
.mock-thumb:nth-child(6) { background-image: url('../assets/inspection-photos/living-room-side-angle.webp'); }
.mock-thumb:nth-child(7) { background-image: url('../assets/inspection-photos/bedroom-side-angle.webp'); }
.mock-thumb:nth-child(8) { background-image: url('../assets/inspection-photos/hallway-corridor.webp'); }
.mock-rep-foot { margin-top: auto; display: flex; justify-content: space-between; font-size: 10px; color: var(--color-text-subtle); padding-top: 10px; border-top: 1px solid var(--color-border-subtle); }

/* Mock: Actions */
.mock-act-list { display: flex; flex-direction: column; gap: 6px; }
.mock-act { display: grid; grid-template-columns: 3px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; background: var(--off-white-40); border-radius: 8px; }
.mock-act .pri { width: 3px; height: 24px; border-radius: 2px; background: #E0A62B; }
.mock-act .pri.hi { background: #D94848; }
.mock-act .pri.lo { background: #5577B0; }
.mock-act strong { display: block; font-size: 11.5px; font-weight: 600; }
.mock-act .sub { font-size: 10px; color: var(--color-text-subtle); }

/* Mock: Compliance timeline */
.mock-tl { display: flex; flex-direction: column; gap: 10px; position: relative; }
.mock-tl::before { content: ''; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 1.5px; background: var(--color-border); }
.mock-tl-item { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; position: relative; }
.mock-tl-item .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--green-100); border: 2px solid #fff; z-index: 1; margin-top: 3px; box-shadow: 0 0 0 1px var(--color-border); }
.mock-tl-item .c { font-size: 11.5px; }
.mock-tl-item .c strong { display: block; font-weight: 600; }
.mock-tl-item .c span { font-size: 10px; color: var(--color-text-subtle); }

/* Mock: Phone */
.mock-phone { width: 150px; aspect-ratio: 9/19; margin: auto; background: var(--anthracite-100); border-radius: 20px; padding: 5px; }
.mock-phone-screen { background: #fff; border-radius: 15px; height: 100%; padding: 14px 10px; display: flex; flex-direction: column; gap: 8px; }
.mock-phone-title { font-size: 10px; color: var(--color-text-subtle); font-weight: 600; letter-spacing: 0.05em; }
.mock-phone-photo {
  /* Section 05 (mobile & field workflows) — matches the "KITCHEN · Extractor
   * fan · Good" finding above it, so the phone-mock photo shows the actual
   * extractor fan being inspected. Same asset used on /product/ section 01. */
  aspect-ratio: 4/3; border-radius: 8px;
  background-color: #2a2a2a;
  background-image: url('../assets/inspection-photos/extractor-fan.webp');
  background-size: cover;
  background-position: center;
}
.mock-phone-item { font-size: 11px; font-weight: 600; }
.mock-phone-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: var(--color-success-soft); color: #2C7C3E; border-radius: var(--radius-pill); font-size: 10px; font-weight: 600; }
.mock-phone-pill .dot { width: 5px; height: 5px; border-radius: 50%; background: #3FAE52; }

/* Mock: Platform scale viz */
.mock-scale { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 12px; background: var(--off-white-40); border-radius: 10px; }
.mock-scale .cell { aspect-ratio: 1; border-radius: 4px; background: #fff; border: 1px solid var(--color-border); }
.mock-scale .cell.on { background: var(--green-100); border-color: var(--green-100); }
.mock-scale .cell.half { background: var(--green-20); border-color: var(--green-100); }

/* Mock: Integrations */
.mock-int { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mock-int-box { aspect-ratio: 1.4; background: var(--off-white-40); border: 1px solid var(--color-border); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--color-text-muted); padding: 14px; }
/* When a tile carries an <img> (brand logo) instead of a text label,
 * cap the logo to a consistent visual height so a tall square mark
 * (Yardi) and a wide wordmark (Re-Leased) sit balanced inside the
 * same tile. */
.mock-int-box img { max-height: 28px; max-width: 100%; width: auto; height: auto; object-fit: contain; display: block; }

/* Section-end CTA row — paired left-text / right-button cards used at the
 * foot of section 13 (Security & data) to direct visitors to the full
 * /security/ page and the external Trust Centre. Stacks to a single
 * column on tablets so the buttons stay readable. */
.cap-cta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
.cap-cta-card { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: 22px 26px; background: #fff; border: 1px solid var(--color-border); border-radius: 14px; transition: border-color var(--motion-fast) var(--ease-standard); }
.cap-cta-card:hover { border-color: var(--green-100); }
.cap-cta-card p { margin: 0; font-size: 14px; color: var(--color-text-muted); line-height: 1.5; }
.cap-cta-card p strong { display: block; color: var(--anthracite-100); font-weight: 600; font-size: 15px; margin-bottom: 2px; }
.cap-cta-card .btn { white-space: nowrap; }

@media (max-width: 768px) {
  .cap-cta-row { grid-template-columns: 1fr; }
  .cap-cta-card { grid-template-columns: 1fr; gap: 12px; padding: 18px 20px; }
  .cap-cta-card .btn { justify-self: start; }
}

/* Mock: Security */
.mock-sec { display: flex; flex-direction: column; gap: 8px; }
.mock-sec-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; padding: 8px 10px; background: var(--off-white-40); border-radius: 8px; font-size: 11.5px; align-items: center; }
.mock-sec-row .ic { width: 22px; height: 22px; border-radius: 6px; background: var(--green-20); color: #1E7A2B; display: flex; align-items: center; justify-content: center; }
.mock-sec-row .ic svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.25; }
.mock-sec-row strong { font-weight: 600; }

/* Photo canvas — section 11 (Automation & AI). Identical visual to the
 * detection-canvas on /inspect-ai/ (template-inspect-ai.php has its own
 * inline copy of these rules). Both pages share the same visual language
 * for the "AI scans a photo, generates a description" narrative. The
 * --ai-* CSS vars used on /inspect-ai/ are inlined here as literals so
 * the canvas renders independently on /platform/ without depending on
 * inspect-ai's <style> block. */
.photo-canvas { position: relative; background: linear-gradient(180deg, #0E1520 0%, #1A2332 100%); border-radius: 22px; padding: 28px; border: 1px solid rgba(255,255,255,0.14); color: #fff; box-shadow: 0 40px 100px -30px rgba(0,0,0,0.5); overflow: hidden; }
.photo-canvas::before { content: ''; position: absolute; inset: 0; background: radial-gradient(500px 300px at 75% 25%, rgba(122,226,207,0.15), transparent 60%); pointer-events: none; }
.photo-canvas .pc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; position: relative; z-index: 1; }
.photo-canvas .pc-head .t { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: #fff; }
.photo-canvas .pc-head .badge { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; color: #8CE5A0; padding: 3px 8px; border: 1px solid rgba(140,229,160,0.3); border-radius: 999px; background: rgba(140,229,160,0.08); }
.photo-canvas .pc-photo { aspect-ratio: 16/10; border-radius: 12px; background: linear-gradient(135deg, #2B3240 0%, #1A2130 60%, #2B3240 100%); position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); }
.photo-canvas .pc-photo svg.sketch { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.5; }
.photo-canvas .pc-photo .mark { position: absolute; width: 28px; height: 28px; border: 2px solid #8CE5A0; border-radius: 50%; background: rgba(140,229,160,0.15); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px rgba(140,229,160,0.12); animation: piAiMarkPulse 2.4s ease-in-out infinite; }
.photo-canvas .pc-photo .mark::after { content: ''; width: 6px; height: 6px; background: #8CE5A0; border-radius: 50%; }
@keyframes piAiMarkPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
.photo-canvas .pc-photo .mark.m1 { top: 30%; left: 22%; }
.photo-canvas .pc-photo .mark.m2 { top: 55%; left: 58%; animation-delay: 0.8s; }
.photo-canvas .pc-photo .mark.m3 { top: 42%; left: 76%; animation-delay: 1.6s; }
.photo-canvas .pc-photo .info { position: absolute; bottom: 12px; left: 12px; right: 12px; padding: 8px 12px; background: rgba(10,14,20,0.7); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; font-size: 11px; color: rgba(255,255,255,0.8); display: flex; align-items: center; gap: 8px; backdrop-filter: blur(8px); }
.photo-canvas .pc-photo .info .dot { width: 6px; height: 6px; background: #8CE5A0; border-radius: 50%; }
.photo-canvas .pc-output { margin-top: 16px; padding: 16px 18px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; position: relative; z-index: 1; }
.photo-canvas .pc-output .lbl { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #8CE5A0; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.photo-canvas .pc-output .lbl::before { content: ''; width: 8px; height: 8px; background: #8CE5A0; border-radius: 2px; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.photo-canvas .pc-output p { font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,0.85); margin: 0; font-family: var(--font-body); }
.photo-canvas .pc-output .pc-hl { background: rgba(140,229,160,0.15); padding: 1px 4px; border-radius: 3px; }
.photo-canvas .pc-output .refs { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.photo-canvas .pc-output .refs .ref { font-size: 10.5px; color: rgba(255,255,255,0.6); padding: 2px 8px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 5px; }

/* Mock: Client / tenant portal — section 07. Rows visually echo the inspection-
 * row pattern (.mock-insp-row) but with a left-icon column for the doc glyph
 * and a feedback footer that uses gold star pills. */
.mock-ct-list { display: flex; flex-direction: column; gap: 6px; }
.mock-ct-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; padding: 8px 10px; background: var(--off-white-40); border-radius: 8px; align-items: center; }
.mock-ct-row .mock-ct-ic { width: 26px; height: 26px; border-radius: 6px; background: var(--green-20); color: #1E7A2B; display: flex; align-items: center; justify-content: center; }
.mock-ct-row .mock-ct-ic svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }
.mock-ct-row strong { display: block; font-weight: 600; font-size: 11.5px; }
.mock-ct-row .sub { font-size: 10px; color: var(--color-text-subtle); }
.mock-ct-feedback { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 10px; margin-top: auto; background: var(--green-20); border: 1px solid var(--green-100); border-radius: 8px; align-items: center; }
.mock-ct-feedback strong { display: block; font-weight: 600; font-size: 11.5px; color: var(--green-100); }
.mock-ct-feedback .sub { display: block; font-size: 10px; color: var(--color-text-muted); font-style: italic; margin-top: 2px; }
.mock-ct-stars { display: flex; gap: 2px; }
.mock-ct-stars span { color: #E0A62B; font-size: 13px; line-height: 1; }

/* Mock: Invoice — section 08. Line-item layout + totals footer; right-column
 * .amt monospace-ish (tabular-nums) so digits align across rows. */
.mock-bil-due { font-size: 10px; color: #8A6518; background: var(--color-warning-soft); padding: 2px 8px; border-radius: var(--radius-pill); font-weight: 600; }
.mock-bil-list { display: flex; flex-direction: column; gap: 4px; }
.mock-bil-line { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 7px 10px; background: var(--off-white-40); border-radius: 6px; align-items: center; }
.mock-bil-line strong { display: block; font-weight: 600; font-size: 11.5px; }
.mock-bil-line .sub { font-size: 10px; color: var(--color-text-subtle); }
.mock-bil-line .amt { font-family: var(--font-display); font-weight: 600; font-size: 12px; font-variant-numeric: tabular-nums; }
.mock-bil-totals { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--color-border-subtle); display: flex; flex-direction: column; gap: 4px; font-size: 11px; }
.mock-bil-totals > div { display: flex; justify-content: space-between; color: var(--color-text-muted); }
.mock-bil-totals > div > span:last-child { font-variant-numeric: tabular-nums; }
.mock-bil-totals .grand { padding-top: 6px; margin-top: 4px; border-top: 1px dashed var(--color-border); color: var(--anthracite-100); font-family: var(--font-display); font-weight: 700; font-size: 13px; }

/* Mock: Analytics — section 09. 2×2 KPI grid + horizontal bar chart. KPI tile
 * .trend pill goes green for "improving" (.up), warm for "watch" (.dn). Bars
 * use the brand green at varying widths to show throughput comparison. */
.mock-anl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mock-anl-kpi { display: flex; flex-direction: column; gap: 2px; padding: 10px; background: var(--off-white-40); border-radius: 8px; }
.mock-anl-kpi .lbl { font-size: 10px; color: var(--color-text-subtle); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.mock-anl-kpi .val { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; color: var(--anthracite-100); line-height: 1; }
.mock-anl-kpi .trend { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: var(--radius-pill); align-self: flex-start; margin-top: 2px; }
.mock-anl-kpi .trend.up { background: var(--color-success-soft); color: #2C7C3E; }
.mock-anl-kpi .trend.dn { background: var(--color-warning-soft); color: #8A6518; }
.mock-anl-bars { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 6px; }
.mock-anl-bar { display: grid; grid-template-columns: 70px 1fr 32px; gap: 8px; align-items: center; font-size: 10.5px; }
.mock-anl-bar .lbl { color: var(--color-text-muted); font-weight: 500; }
.mock-anl-bar .track { height: 8px; background: var(--off-white-100); border-radius: 4px; overflow: hidden; }
.mock-anl-bar .track .fill { display: block; height: 100%; background: var(--green-100); border-radius: 4px; }
.mock-anl-bar .num { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; color: var(--anthracite-100); }

/* Mock: Workstreams / supplier network — section 10. Each row is a supplier
 * with a capacity bar — .hi when >85% loaded (warm), .lo when <30% (cool), the
 * default green for healthy mid-range. Carries the "operational visibility"
 * story for the overflow-network bullet set. */
.mock-ws-list { display: flex; flex-direction: column; gap: 6px; }
.mock-ws-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; padding: 8px 10px; background: var(--off-white-40); border-radius: 8px; align-items: center; }
.mock-ws-row .mock-ws-name strong { display: block; font-weight: 600; font-size: 11.5px; }
.mock-ws-row .mock-ws-name .sub { font-size: 10px; color: var(--color-text-subtle); }
.mock-ws-row .mock-ws-bar { display: block; height: 6px; background: var(--off-white-100); border-radius: 3px; overflow: hidden; }
.mock-ws-row .mock-ws-bar .fill { display: block; height: 100%; background: var(--green-100); border-radius: 3px; }
.mock-ws-row .mock-ws-bar .fill.hi { background: #E0A62B; }
.mock-ws-row .mock-ws-bar .fill.lo { background: #5577B0; }
.mock-ws-row .mock-ws-meta { font-size: 10.5px; color: var(--color-text-subtle); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ===== Proof band ===== */
.pc-proof { padding: 96px 0; background: var(--gradient-deep); color: #fff; }
.pc-proof-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 72px; align-items: center; }
.pc-proof h2 { font-family: var(--font-display); font-weight: 600; font-size: 44px; letter-spacing: -0.02em; color: #fff; line-height: 1.08; margin-top: 16px; }
.pc-proof p.body { font-size: 17px; color: rgba(255,255,255,0.75); line-height: 1.6; margin-top: 20px; }
.pc-proof-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pc-stat { padding: 24px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; }
.pc-stat .n { font-family: var(--font-display); font-weight: 700; font-size: 40px; color: var(--green-100); letter-spacing: -0.025em; line-height: 1; }
.pc-stat .l { font-size: 14px; color: rgba(255,255,255,0.7); margin-top: 10px; line-height: 1.4; }

/* ===== Final CTA ===== */
.pc-final { background: var(--gradient-primary); color: #fff; padding: 96px 0; text-align: center; }
.pc-final h2 { font-family: var(--font-display); font-weight: 600; font-size: 48px; letter-spacing: -0.02em; color: #fff; max-width: 760px; margin: 0 auto 16px; line-height: 1.1; }
.pc-final p { color: rgba(255,255,255,0.8); font-size: 17px; max-width: 540px; margin: 0 auto 32px; line-height: 1.5; }
.pc-final .btns { display: flex; gap: 12px; justify-content: center; }

@media (max-width: 980px) {
  .pc-hero-inner, .pc-intro-grid, .cap-featured, .pc-proof-grid { grid-template-columns: 1fr; }
  .pc-hero h1 { font-size: 46px; }
  .pc-intro-points { grid-template-columns: 1fr; }
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
  .cap-grid.cols-3, .cap-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .cap-head { grid-template-columns: 1fr; }
}