/* ============================================================================
   lp-shell.css — shared chrome for the three agency-owner landing page
   STRUCTURE drafts. Clean rewrite (Aug 17 PM) — the previous sheet had been
   built up by appends and a selector-duplication script had corrupted several
   dark-section rules (comments swallowed into selector lists → rules dropped
   → light text on light ground). Everything below is hand-written once.

   SCRATCH FILES. Not committed, not deployed, not part of the Astro build.

   ── SOURCES ────────────────────────────────────────────────────────────────
   astro/src/styles/global.css       tokens, .glass-btn, .pp-eyebrow, type scale,
                                     depth grid/spot, focus ring, ::selection
   astro/src/pages/about.astro       section rhythm, numbered eyebrows, h2 scale,
                                     .pp-spot cards, .pp-zoom, .pp-band, glow,
                                     mission pull-quote, #ppGridFx canvas
   astro/src/pages/platform.astro    dark ground + dark-adapted chrome
   astro/src/components/Nav.astro    glass nav pill
   astro/src/components/Footer.astro 4-column footer

   ── TYPE ───────────────────────────────────────────────────────────────────
   Headlines and body use the LIVE SITE's real scales (Joseph, Aug 17: "headline
   fonts should be consistent with the live website"):
     hero      Inter 500  clamp(40px,5vw,76px)   −.055em  1.06
     section   Inter 600  clamp(32px,4.5vw,55px) −.03em   1.08
     body      Inter 17.5px/1.65 muted
   Placeholder-ness is carried by the [bracket] text itself plus the dashed
   media/note boxes — NOT by fake mono display type.

   BRAND-SPEC v2 wins where it diverges from the live site (Joseph, Aug 17):
   salmon #F08A6A/#F5A88E/#C05A38/#FDF1EC, Satoshi retired, eyebrows Inter 600
   +.09em Salmon deep, logo 20px nav / 18px foot. Body face stays Inter for now
   (DM Sans not self-hosted; design-stage decision).
   ============================================================================ */

@import url('fonts.css');

/* ─────────────────────────────────────────────────────────────────── base */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: #FDFBF7;
  color: #34302B;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  padding-bottom: 84px; /* clearance for the fixed review switcher */
}
h1, h2, h3, p { margin: 0; }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2.5px solid #F08A6A; outline-offset: 3px; border-radius: 8px; }
::selection { background: #F08A6A; color: #fff; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; scroll-behavior: auto; } }

/* ────────────────────────────────────────────────────────────────── tokens */
:root {
  --pp-peach: #F08A6A;
  --pp-peach-soft: #F5A88E;
  --pp-peach-deep: #C05A38;
  --pp-peach-tint: #FDF1EC;
  --pp-ink: #1e1b18;
  --pp-muted: #7a746c;
  --pp-hairline: #e8e3dc;
  --pp-sand: #FDFBF7;
  /* dark-ground text (platform.astro family, lifted one step for readability) */
  --pp-dark-head: #fdfbf7;
  --pp-dark-body: #b7b1a8;
  --pp-dark-faint: #8f8b85;
  /* grid canvas (lp-motion.js reads these) */
  --grid-line: rgba(30,27,24,.035);
  --grid-glow: rgba(240,138,106,.3);
  --grid-dot: 192,90,56;
}

/* ─────────────────────────────────────────────────────────────── stage flag */
.stage-flag {
  position: relative; z-index: 70;
  background: var(--pp-ink); color: #fdfbf7;
  font-size: 12.5px; letter-spacing: .01em; text-align: center; padding: 9px 18px;
}
.stage-flag b { color: var(--pp-peach-soft); }

/* ─────────────────────────────────────────────────────── nav (Nav.astro) */
.pp-nav { position: sticky; top: 18px; z-index: 60; margin: 18px auto 0; max-width: 1320px; padding: 0 18px; }
.pp-nav-pill {
  position: relative;
  display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center;
  height: 72px; padding: 0 14px 0 28px; border-radius: 44px;
  background: linear-gradient(135deg, rgba(255,255,255,.42), rgba(255,255,255,.16) 55%, rgba(255,244,236,.26));
  backdrop-filter: blur(26px) saturate(1.5) brightness(1.04);
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: inset 1.5px 1.5px 0 rgba(255,255,255,.95), inset -1px -2px 1px rgba(255,255,255,.25),
              0 0 0 1px rgba(120,72,46,.06), 0 1px 2px rgba(27,26,24,.04),
              0 16px 34px -20px rgba(120,72,46,.18);
}
.pp-nav-pill::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: rgba(255,250,245,.55); pointer-events: none; z-index: -1;
}
.pp-logo { display: inline-flex; align-items: center; gap: 9px; }
.pp-logo-word {
  /* 20px per BRAND-SPEC "signature not headline" (live site's 27px is flagged
     in the brand audit as needing this same fix) */
  font-family: 'Inter', sans-serif; font-size: 20px; letter-spacing: -.03em;
  line-height: 1; white-space: nowrap; color: var(--pp-ink);
}
.pp-logo-word .l { font-weight: 500; }
.pp-logo-word .h { font-weight: 800; }
.pp-nav-links { display: flex; gap: 30px; justify-self: center; }
.pp-nav-links a { font-size: 16px; line-height: 1.6; font-weight: 500; color: var(--pp-ink); white-space: nowrap; transition: color .15s ease; }
.pp-nav-links a:hover { color: #000; }
.pp-nav-right { justify-self: end; display: flex; align-items: center; }
.pp-nav-login { font-size: 15px; font-weight: 500; color: var(--pp-muted); white-space: nowrap; margin: 0 16px 0 6px; transition: color .15s ease; }
.pp-nav-login:hover { color: var(--pp-ink); }

/* ─────────────────────────────────────────── buttons (global.css .glass-btn) */
.glass-btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.6; font-weight: 600;
  color: #1B1A18; padding: 15px 26px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.75);
  background: linear-gradient(135deg, rgba(255,255,255,.6), rgba(255,255,255,.28));
  backdrop-filter: blur(10px) saturate(1.6); -webkit-backdrop-filter: blur(10px) saturate(1.6);
  box-shadow: inset 1.5px 1.5px 0 rgba(255,255,255,.95), inset -1px -1px 1px rgba(255,255,255,.25),
              0 1px 2px rgba(27,26,24,.05), 0 12px 26px -12px rgba(48,42,36,.35);
  transition: transform .16s ease, box-shadow .16s ease;
}
.glass-btn:hover { transform: translateY(-2px); box-shadow: inset 1.5px 1.5px 0 rgba(255,255,255,.95), 0 18px 34px -12px rgba(48,42,36,.45); }
.glass-btn::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(135px 105px at var(--gx,50%) var(--gy,10%),
              rgba(255,255,255,.82), rgba(255,255,255,.2) 40%, rgba(255,255,255,0) 66%);
  opacity: 0; transition: opacity .3s ease; mix-blend-mode: screen;
}
.glass-btn:hover::after { opacity: 1; }
.glass-btn--peach {
  color: #fff; border: 1px solid rgba(255,255,255,.45);
  background: linear-gradient(135deg, rgba(245,168,142,.92), rgba(240,138,106,.88) 55%, rgba(192,90,56,.94));
  box-shadow: inset 0 1.6px 1px rgba(255,255,255,.6), inset 0 -4px 9px -2px rgba(140,58,34,.35),
              0 12px 28px -8px rgba(240,138,106,.6), 0 2px 6px rgba(160,72,45,.3);
}
.glass-btn--peach:hover { box-shadow: inset 0 1.6px 1px rgba(255,255,255,.6), 0 18px 36px -10px rgba(240,138,106,.66), 0 3px 8px rgba(160,72,45,.34); }
.glass-btn--peach::after {
  background: radial-gradient(135px 105px at var(--gx,50%) var(--gy,8%),
              rgba(255,255,255,.62), rgba(255,255,255,.14) 42%, rgba(255,255,255,0) 66%);
}
@supports (backdrop-filter: url(#ppliquid)) {
  .glass-btn {
    backdrop-filter: blur(4px) url(#ppliquid) saturate(1.6) brightness(1.04);
    -webkit-backdrop-filter: blur(4px) url(#ppliquid) saturate(1.6) brightness(1.04);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .glass-btn { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
  .glass-btn--peach { background: #F08A6A; }
}
.glass-btn.is-press { transform: translateY(0) scale(.975); transition-duration: .12s; }
.glass-btn--lg { font-size: 16.5px; padding: 18px 34px; }
.btn-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.btn-aside { font-size: 14px; color: var(--pp-muted); }

/* ───────────────────────────────────────────── section rhythm (about.astro) */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.wrap-tight { max-width: 880px; margin: 0 auto; padding: 0 24px; }
section.sec { padding: clamp(72px, 9vw, 112px) 0; position: relative; }
section.sec.hero { padding-top: clamp(48px, 6vw, 72px); }

/* warm tinted band (about.astro .pp-band) */
section.sec.alt {
  overflow: hidden;
  background: linear-gradient(180deg, #fdfbf8 0%, #faf4ed 100%);
  border-top: 1px solid rgba(30,27,24,.1);
  border-bottom: 1px solid rgba(30,27,24,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
}

/* dark band (platform.astro surface) */
section.sec.dark { background: #191817; color: var(--pp-dark-head); }

/* salmon-tint emphasis band — used where a LIGHT page needs one section to step
   forward without borrowing platform-dark (Joseph, Aug 17: A's single dark
   section felt off — the light page's emphasis surface is the brand tint) */
section.sec.tint {
  background: var(--pp-peach-tint);
  border-top: 1px solid rgba(140,58,34,.14);
  border-bottom: 1px solid rgba(140,58,34,.14);
}
section.sec.tint .card { background-color: #fff; }
section.sec.tint .sec-tag { background: rgba(255,255,255,.85); border-color: #ecd6c6; }
section.sec.tint .ph-media { border-color: #ecd6c6; background: rgba(255,255,255,.55); }

/* drifting peach glow (about.astro .pp-sec-glow) */
.pp-sec-glow {
  position: absolute; right: -160px; top: -40px; width: 580px; height: 440px;
  border-radius: 50%; filter: blur(70px); pointer-events: none;
  background: radial-gradient(closest-side, rgba(245,168,142,.24), rgba(245,168,142,0) 70%);
  animation: ppSecGlow 22s ease-in-out infinite;
}
@keyframes ppSecGlow {
  0%, 100% { transform: translate(0,0) scale(1); opacity: .7; }
  50% { transform: translate(-6%,6%) scale(1.12); opacity: 1; }
}

/* soft page-top spotlight (global.css .pp-depth-spot; the hairline grid itself
   is the animated #ppGridFx canvas, not a static layer) */
.pp-depth-spot {
  position: absolute; pointer-events: none; left: 50%; top: 6%;
  width: min(72vw, 980px); height: 520px; transform: translateX(-50%);
  border-radius: 50%; filter: blur(16px);
  background: radial-gradient(closest-side, var(--pp-spot, rgba(255,255,255,.75)), transparent 72%);
}

/* ─────────────────────────────────────────────────────────────── typography */
/* hero eyebrow pill — byte-for-byte the site's .legal/.sec/.disc-eyebrow */
.pp-eyebrow {
  display: inline-block; font-family: 'Inter', sans-serif; font-size: 12.5px; line-height: 1.6;
  font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--pp-peach-deep); margin: 0; padding: 9px 16px; border-radius: 999px;
  background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.9);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 6px 16px -10px rgba(120,72,46,.35);
}
.pp-eyebrow-spark { display: inline-block; margin-right: 7px; transform: translateY(.5px); font-size: 13px; letter-spacing: 0; }

/* numbered section eyebrow — "01 · Your numbers" (about.astro convention on the
   BRAND-SPEC treatment: Inter 600, +.09em, Salmon deep; Satoshi retired) */
.eyebrow {
  font-family: 'Inter', sans-serif; font-size: 12.5px; line-height: 1.6; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--pp-peach-deep);
}

/* ── placeholder type = the site's REAL scales (Joseph, Aug 17). The [brackets]
      in the text mark it as unapproved; the type itself is the live site's. ── */
.ph-h1, h1.display {
  font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: clamp(40px, 5vw, 76px); letter-spacing: -.055em; line-height: 1.06;
  color: var(--pp-ink); text-wrap: balance;
}
.ph-h2, h2.display {
  font-family: 'Inter', sans-serif; font-weight: 600;
  font-size: clamp(30px, 4vw, 48px); letter-spacing: -.03em; line-height: 1.1;
  color: var(--pp-ink); text-wrap: balance;
}
.ph-body, .lede {
  font-family: 'Inter', sans-serif; font-size: 17.5px; line-height: 1.65;
  color: var(--pp-muted); max-width: 58ch; text-wrap: pretty;
}
h3.sub { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 19px; letter-spacing: -.02em; line-height: 1.3; color: var(--pp-ink); }

/* section head block: eyebrow → headline → lede, spaced like about.astro */
.eyebrow + .ph-h2, .eyebrow + h2.display, .eyebrow + .ph-h1, .eyebrow + h1.display { margin-top: 14px; }
.ph-h2 + .ph-body, h2.display + .lede, .ph-h1 + .ph-body { margin-top: 18px; }

/* ─────────────────────────────────────────────────────────────────── layout */
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4.5vw, 64px); align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.grid-5 { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 16px; }
.stack-lg > * + * { margin-top: 20px; }
.stack-lg .pp-eyebrow + *, .stack-lg .eyebrow + * { margin-top: 16px; }
.stack-lg .btn-row { margin-top: 34px; }
.stack-sm > * + * { margin-top: 12px; }
.mt-56 { margin-top: clamp(40px, 5vw, 56px); }
.mt-36 { margin-top: clamp(28px, 3.5vw, 36px); }
.center { text-align: center; }
.center .ph-body, .center .lede { margin-left: auto; margin-right: auto; }

/* ──────────────────────────────── cards: .pp-spot surface + .pp-zoom hover */
.card {
  position: relative; border-radius: 22px; padding: 28px;
  border: 1.5px solid var(--pp-hairline);
  background-color: rgba(255,255,255,.7);
  background-image: radial-gradient(240px 240px at calc(var(--ppx,-9999)*1px) calc(var(--ppy,-9999)*1px),
                    hsl(0 0% 100% / .5), transparent);
  background-attachment: fixed; background-repeat: no-repeat;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(30,27,24,.05),
              0 18px 40px -28px rgba(30,27,24,.3);
  transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease, border-color .28s ease;
  will-change: transform;
}
.card::before, .card::after {
  content: ""; pointer-events: none; position: absolute; inset: -1.5px;
  border: 1.5px solid transparent; border-radius: 22px;
  background-attachment: fixed; background-repeat: no-repeat; background-position: 50% 50%;
  mask: linear-gradient(transparent, transparent), linear-gradient(#fff, #fff);
  mask-clip: padding-box, border-box; mask-composite: intersect;
  -webkit-mask: linear-gradient(transparent, transparent), linear-gradient(#fff, #fff);
  -webkit-mask-clip: padding-box, border-box; -webkit-mask-composite: source-in;
}
.card::before {
  background-image: radial-gradient(170px 170px at calc(var(--ppx,-9999)*1px) calc(var(--ppy,-9999)*1px),
                    hsl(14 82% 68% / .95), transparent 100%);
  filter: brightness(1.7);
}
.card::after {
  background-image: radial-gradient(110px 110px at calc(var(--ppx,-9999)*1px) calc(var(--ppy,-9999)*1px),
                    hsl(0 0% 100% / .95), transparent 100%);
}
.card:hover, .card.is-hov {
  transform: translateY(-7px) scale(1.045); border-color: rgba(240,138,106,.45);
  box-shadow: 0 8px 18px rgba(30,27,24,.1), 0 42px 74px -30px rgba(30,27,24,.38);
  z-index: 2;
}
@media (hover: none) {
  .card { background-image: none; }
  .card::before, .card::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover, .card.is-hov { transform: none; }
}
.card .ph-body { font-size: 15px; line-height: 1.6; }
.card h3.sub + .ph-body { margin-top: 8px; }

/* icon tile (about.astro .pp-card-icn) */
.card-icn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--pp-peach-tint); border: 1px solid rgba(240,138,106,.22); margin-bottom: 14px;
}

/* ──────────── peach gradient pull-quote (about.astro mission card) ──────── */
.pull {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  border-radius: 26px; padding: clamp(26px, 3vw, 40px);
  background: linear-gradient(140deg, #F5A88E, #F08A6A 55%, #C05A38);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 26px 54px -28px rgba(192,90,56,.55);
  color: #fff;
}
.pull-label {
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.85);
}
.pull-quote {
  font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: clamp(19px, 1.8vw, 24px); line-height: 1.4; letter-spacing: -.02em;
  color: #fff; margin-top: 12px; text-wrap: balance;
}
.pull-mark { position: absolute; right: -40px; bottom: -34px; width: 230px; height: auto; opacity: .14; }

/* ─────────────────────────────────────────────── placeholder slot primitives
   Slots read as intent, not as broken design:
   .ph-media  — dashed frame where an image/video/product shot will go
   .note      — compact review annotation for Tyler (clearly meta, low weight)
   .slot-name — small mono slot title INSIDE frames only                      */
.ph-media {
  display: flex; align-items: center; justify-content: center; text-align: center;
  border: 1.5px dashed #d3c9bc; border-radius: 22px;
  background:
    repeating-linear-gradient(45deg, rgba(30,27,24,.028) 0 10px, transparent 10px 20px),
    rgba(30,27,24,.018);
  padding: 28px; min-height: 280px;
}
.ph-media.tall { min-height: 440px; }
.ph-media.wide { min-height: 340px; }
.ph-media.sm { min-height: 180px; }
.slot-name {
  display: block; font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #a89e91; margin-bottom: 10px;
}
.ph-media .ph-label { max-width: 44ch; }
.ph-label { font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.6; color: var(--pp-muted); }
.ph-label b { color: #57514a; font-weight: 600; }
.ph-label em { color: #9a8f82; }
.ph-line { display: block; margin-top: 8px; }

/* review note — an annotation, not page furniture: small, amber-tinted, capped width */
.ph, .note {
  border: 1px dashed #dbc9a8; border-radius: 12px; background: #fdf7ec;
  padding: 14px 18px; max-width: 68ch;
}
.ph .ph-label, .note .ph-label { font-size: 13.5px; line-height: 1.6; color: #6f6152; }
.ph .ph-label b, .note .ph-label b { color: #53483a; }
.ph::before, .note::before {
  content: "review note"; display: block;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #b08d4f; margin-bottom: 6px;
}
.center .ph, .center .note { margin-left: auto; margin-right: auto; text-align: left; }

/* input-field slot (A2's fill-in-your-numbers band) — a form control outline,
   not a review note */
.ph-field {
  border: 1.5px dashed #cfc7bc; border-radius: 12px; background: #fff;
  padding: 13px 16px;
  font-family: 'Inter', sans-serif; font-size: 15px; color: #a89e91;
}

/* a number that still needs a real source */
.needs-src {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #8a5a1e; background: #fdf3e0; border: 1px solid #eddcb8;
  border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.stat-slot { text-align: center; }
.stat-slot .num {
  font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
  font-size: clamp(38px, 4.5vw, 54px); font-weight: 700; letter-spacing: -.04em; line-height: 1;
  color: var(--pp-ink);
}
.stat-slot h3.sub { font-size: 15.5px; font-weight: 500; color: var(--pp-muted); letter-spacing: 0; }

/* maturity chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  border-radius: 999px; padding: 4px 11px; white-space: nowrap;
}
.chip.live { color: #1c6b46; background: #e4f5ea; border: 1px solid #bfe4cd; }
.chip.road { color: #6b6259; background: #f1ede6; border: 1px solid #e0d9cf; }

/* carrier logos — identical contained boxes (source PNG ratios vary wildly) */
.carrier-row { display: flex; align-items: center; justify-content: center; gap: 44px; flex-wrap: wrap; }
.carrier-row img {
  height: 38px; width: 120px; object-fit: contain; object-position: center;
  opacity: .62; filter: grayscale(1); transition: opacity .2s ease, filter .2s ease;
}
.carrier-row img:hover { opacity: .9; filter: grayscale(0); }

/* ────────────────────────────────────────────────── dark-section adaptation
   (single, clean set — this is what the corrupted sheet had broken) */
section.sec.dark .eyebrow { color: var(--pp-peach-soft); }
section.sec.dark .ph-h1, section.sec.dark .ph-h2,
section.sec.dark h1.display, section.sec.dark h2.display,
section.sec.dark h3.sub { color: var(--pp-dark-head); }
section.sec.dark .ph-body, section.sec.dark .lede { color: var(--pp-dark-body); }
section.sec.dark .card {
  background-color: rgba(255,255,255,.05); background-image: none;
  border-color: rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
section.sec.dark .card::before, section.sec.dark .card::after { display: none; }
section.sec.dark .card:hover, section.sec.dark .card.is-hov { border-color: rgba(240,138,106,.5); }
section.sec.dark .card .ph-body { color: var(--pp-dark-body); }
section.sec.dark .card-icn { background: rgba(240,138,106,.14); border-color: rgba(240,138,106,.3); }
section.sec.dark .ph-media {
  border-color: rgba(255,255,255,.24);
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 10px, transparent 10px 20px), rgba(255,255,255,.03);
}
section.sec.dark .ph-media .ph-label { color: var(--pp-dark-body); }
section.sec.dark .ph-media .ph-label b { color: #e6e1d9; }
section.sec.dark .slot-name { color: #8f8b85; }
section.sec.dark .ph, section.sec.dark .note {
  border-color: rgba(240,201,135,.4); background: rgba(240,201,135,.08);
}
section.sec.dark .ph .ph-label, section.sec.dark .note .ph-label { color: #d8cfc0; }
section.sec.dark .ph .ph-label b, section.sec.dark .note .ph-label b { color: #f0e9dd; }
section.sec.dark .ph::before, section.sec.dark .note::before { color: #d9b678; }
section.sec.dark .chip.road { color: #cfc7bc; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); }
section.sec.dark .needs-src { color: #f0c987; background: rgba(138,90,30,.28); border-color: rgba(240,201,135,.32); }
section.sec.dark .sec-tag { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); color: #a8a29a; }

/* ─────────────────────────────────────────────────── footer (Footer.astro) */
.pp-foot { border-top: 1px solid var(--pp-hairline); background: #fff; }
.pp-foot-inner { max-width: 1200px; margin: 0 auto; padding: 52px 24px 28px; }
.pp-foot a { transition: color .2s ease; }
.pp-foot-cols { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px 40px; }
.pp-foot-brand { max-width: 340px; }
.pp-foot-tag { color: var(--pp-muted); font-size: 14px; line-height: 1.5; margin: 12px 0 16px; max-width: 34ch; }
.pp-foot-ctas { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pp-foot-login { font-size: 14px; font-weight: 500; color: var(--pp-muted); }
.pp-foot-login:hover { color: var(--pp-ink); }
.pp-foot-col { display: flex; flex-direction: column; gap: 11px; }
.pp-foot-col:last-child { min-width: 132px; }
.pp-foot-head {
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--pp-muted); margin-bottom: 3px;
}
.pp-foot-col a { font-size: 14px; font-weight: 500; color: #57514a; }
.pp-foot-col a:hover { color: var(--pp-ink); }
.pp-foot-bar {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap;
  margin-top: 40px; padding-top: 22px; border-top: 1px solid #efeae2;
}
.pp-foot-links { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--pp-ink); }
.pp-foot-links span { color: #c4bdb2; }
.pp-foot-links a:hover { color: var(--pp-peach-deep); }
.pp-foot-meta { font-size: 11.5px; letter-spacing: .02em; color: var(--pp-muted); margin-top: 8px; }
.pp-foot-social { display: flex; gap: 12px; flex-shrink: 0; }
.pp-foot-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; color: var(--pp-muted);
  border: 1px solid var(--pp-hairline); background: #faf8f4;
  transition: color .2s ease, background .2s ease, border-color .2s ease,
              transform .3s cubic-bezier(.16,1,.3,1);
}
.pp-foot-social a:hover {
  color: #fff; background: var(--pp-peach); border-color: var(--pp-peach);
  transform: translateY(-3px) rotate(-2deg);
}
@media (prefers-reduced-motion: reduce) {
  .pp-foot-social a { transition: none; }
  .pp-foot-social a:hover { transform: none; }
}

/* ───────────────────────────────────────── review scaffolding (temporary) */
.sec-tag {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 3;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--pp-muted); background: rgba(255,255,255,.82); border: 1px solid var(--pp-hairline);
  border-radius: 999px; padding: 3px 12px; white-space: nowrap;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.lp-switch {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 90;
  display: flex; align-items: center; gap: 6px;
  background: rgba(25,24,22,.93); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-radius: 999px; padding: 7px 9px;
  box-shadow: 0 18px 40px -14px rgba(0,0,0,.5);
}
.lp-switch b {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #8f8b85; padding: 0 8px 0 6px;
}
.lp-switch a { font-size: 13px; font-weight: 600; color: #d8d3cb; padding: 7px 14px; border-radius: 999px; white-space: nowrap; }
.lp-switch a:hover { background: rgba(255,255,255,.1); color: #fff; }
.lp-switch a.on { background: var(--pp-peach); color: #fff; }

/* ───────────────────────────────────────── the animated page-ground grid */
#ppGridFx { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; pointer-events: none; }

/* ============================================================================
   THREE COMPOSITIONS — same brand system, three genuinely different pages.
     A · EDITORIAL  (about.astro)     asymmetric two-column, left-aligned,
                                      hairline dividers, alternating warm bands
     B · KEYNOTE    (platform.astro)  dark ground, one centered column,
                                      media full-width beneath the words
     C · SHOWROOM   (.pp-band +       warm gradient ground, huge product
                     mission card)    frames, short centered captions
   ============================================================================ */

/* ── A · EDITORIAL ────────────────────────────────────────────────────────── */
body.lp-a section.sec + section.sec:not(.alt):not(.dark) { border-top: 1px solid var(--pp-hairline); }
body.lp-a .hero-grid { align-items: start; }
@media (min-width: 981px) {
  body.lp-a .hero-grid .ph-media { margin-top: 14px; }
}

/* ── B · KEYNOTE ──────────────────────────────────────────────────────────── */
body.lp-b {
  color: var(--pp-dark-head);
  background:
    radial-gradient(70% 50% at 50% 8%, rgba(240,138,106,.10), rgba(240,138,106,0) 60%),
    radial-gradient(60% 44% at 12% 70%, rgba(48,45,42,.35), rgba(48,45,42,0) 65%),
    radial-gradient(60% 44% at 88% 55%, rgba(43,41,38,.4), rgba(43,41,38,0) 65%),
    linear-gradient(180deg, #1e1b18 0%, #232120 34%, #2b2927 68%, #34312d 100%);
  background-attachment: fixed;
  --grid-line: rgba(255,255,255,.045);
  --grid-glow: rgba(240,138,106,.34);
  --grid-dot: 245,168,142;
}
body.lp-b section.sec { background: transparent; border: 0; box-shadow: none; }
/* the white page-top spotlight is a light-ground device — on the dark ground it
   reads as a gray smear behind the headline (Joseph, Aug 17). The body gradient
   already carries B's peach top-glow, so the spot is simply off here. */
body.lp-b .pp-depth-spot { display: none; }
/* Joseph, Aug 17: B needs CLEAR section division, and the grid must not run
   through the sections (lp-motion.js fades the canvas out past the hero).
   So B is keynote SLIDES: the hero sits bare on the dark ground, and every
   section after it is a floating rounded panel — unmistakably not A's
   full-bleed editorial bands. */
body.lp-b section.sec { padding: clamp(30px, 4vw, 48px) 0; }
body.lp-b section.sec.hero { padding: clamp(56px, 7vw, 88px) 0 clamp(72px, 9vw, 112px); }
body.lp-b section.sec:not(.hero) > .wrap,
body.lp-b section.sec:not(.hero) > .wrap-tight {
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 28px;
  padding: clamp(44px, 5.5vw, 76px) clamp(24px, 4.5vw, 68px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 34px 70px -44px rgba(0,0,0,.65);
}
body.lp-b section.sec.alt, body.lp-b section.sec.dark { background: transparent; border: 0; box-shadow: none; }
/* one centered column: hero stacks, media rides full-width below the words */
body.lp-b .hero-grid { grid-template-columns: 1fr; gap: 56px; }
body.lp-b .hero-grid .stack-lg { max-width: 760px; margin: 0 auto; text-align: center; }
body.lp-b .hero-grid .ph-body { margin-left: auto; margin-right: auto; }
body.lp-b .hero-grid .btn-row { justify-content: center; }
body.lp-b .hero-grid .ph-media { max-width: 880px; width: 100%; margin: 0 auto; min-height: 300px; }
/* section heads on the spine; split-section text stays left-aligned */
body.lp-b .wrap > .eyebrow, body.lp-b .wrap > .center > .eyebrow { display: block; text-align: center; }
body.lp-b .wrap > .ph-h2 { text-align: center; margin-left: auto; margin-right: auto; max-width: 26ch; }
body.lp-b .wrap > .ph-body { text-align: center; margin-left: auto; margin-right: auto; }
body.lp-b .grid-2 { gap: clamp(36px, 5vw, 72px); }
/* dark-ground text + chrome (whole page is dark) */
body.lp-b .eyebrow { color: var(--pp-peach-soft); }
body.lp-b .ph-h1, body.lp-b .ph-h2, body.lp-b h1.display, body.lp-b h2.display, body.lp-b h3.sub { color: var(--pp-dark-head); }
body.lp-b .ph-body, body.lp-b .lede { color: var(--pp-dark-body); }
body.lp-b .btn-aside { color: var(--pp-dark-faint); }
body.lp-b .card {
  background-color: rgba(255,255,255,.05); background-image: none;
  border-color: rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
body.lp-b .card::before, body.lp-b .card::after { display: none; }
body.lp-b .card:hover, body.lp-b .card.is-hov { border-color: rgba(240,138,106,.5); }
body.lp-b .card .ph-body { color: var(--pp-dark-body); }
body.lp-b .card-icn { background: rgba(240,138,106,.14); border-color: rgba(240,138,106,.3); }
body.lp-b .stat-slot .num { color: var(--pp-dark-head); }
body.lp-b .stat-slot h3.sub { color: var(--pp-dark-body); }
body.lp-b .ph-media {
  border-color: rgba(255,255,255,.24);
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 10px, transparent 10px 20px), rgba(255,255,255,.03);
}
body.lp-b .ph-media .ph-label { color: var(--pp-dark-body); }
body.lp-b .ph-media .ph-label b { color: #e6e1d9; }
body.lp-b .slot-name { color: #8f8b85; }
body.lp-b .ph, body.lp-b .note { border-color: rgba(240,201,135,.4); background: rgba(240,201,135,.08); }
body.lp-b .ph .ph-label, body.lp-b .note .ph-label { color: #d8cfc0; }
body.lp-b .ph .ph-label b, body.lp-b .note .ph-label b { color: #f0e9dd; }
body.lp-b .ph::before, body.lp-b .note::before { color: #d9b678; }
body.lp-b .chip.live { color: #7fe0a8; background: rgba(28,107,70,.28); border-color: rgba(127,224,168,.35); }
body.lp-b .chip.road { color: #cfc7bc; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); }
body.lp-b .needs-src { color: #f0c987; background: rgba(138,90,30,.28); border-color: rgba(240,201,135,.32); }
body.lp-b .sec-tag { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); color: #a8a29a; }
body.lp-b .carrier-row img { filter: grayscale(1) invert(1) brightness(1.6); opacity: .5; }
body.lp-b .carrier-row img:hover { filter: grayscale(0); opacity: .95; }
body.lp-b .glass-btn:not(.glass-btn--peach) {
  color: var(--pp-dark-head); border-color: rgba(255,255,255,.22);
  background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 12px 26px -12px rgba(0,0,0,.6);
}
/* nav + footer, exactly as Nav/Footer.astro adapt under body.darkm */
body.lp-b .pp-nav-pill {
  background: rgba(25,24,22,.78);
  backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 18px 40px -24px rgba(0,0,0,.5);
}
body.lp-b .pp-nav-pill::before { background: transparent; }
body.lp-b .pp-logo-word, body.lp-b .pp-nav-links a { color: var(--pp-dark-head); }
body.lp-b .pp-nav-links a:hover { color: #fff; }
body.lp-b .pp-nav-login { color: #b7b1a9; }
body.lp-b .pp-nav-login:hover { color: #fff; }
body.lp-b .pp-eyebrow { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: var(--pp-peach-soft); box-shadow: none; }
body.lp-b .pp-foot { background: #191817; border-top-color: rgba(255,255,255,.1); }
body.lp-b .pp-foot .pp-logo-word, body.lp-b .pp-foot-links { color: #f3eef8; }
body.lp-b .pp-foot-tag, body.lp-b .pp-foot-col a, body.lp-b .pp-foot-head,
body.lp-b .pp-foot-meta, body.lp-b .pp-foot-login { color: var(--pp-dark-faint); }
body.lp-b .pp-foot-col a:hover, body.lp-b .pp-foot-links a:hover, body.lp-b .pp-foot-login:hover { color: #fff; }
body.lp-b .pp-foot-bar { border-top-color: rgba(255,255,255,.09); }
body.lp-b .pp-foot-links span { color: var(--pp-dark-faint); }
body.lp-b .pp-foot-social a { color: var(--pp-dark-faint); background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }

/* ── C · SHOWROOM — THE SALMON PAGE ───────────────────────────────────────────
   Joseph, Aug 17: "one light, one dark, one in the salmon orange color."
   C is the salmon one: a gradient hero in the brand's mission-card salmon,
   the page ground in salmon tint, and the contrast band is WHITE (inverted —
   on a salmon page, white is the accent). No grid canvas at all: the clean
   showroom look is its own signature. */
body.lp-c {
  background: linear-gradient(180deg, #FDF1EC 0%, #F9E4D8 60%, #FDF1EC 100%);
  background-attachment: fixed;
}
body.lp-c #ppGridFx { display: none; }
body.lp-c .pp-depth-spot { display: none; }
body.lp-c section.sec { background: transparent; border: 0; box-shadow: none; padding: clamp(64px, 8vw, 96px) 0; }
/* the salmon gradient HERO — the page leads with the brand color itself.
   The salmon must reach the TOP of the page, behind the nav pill (Joseph,
   Aug 17: a light strip above the nav "looks off"). The nav occupies a flow
   slot of 18px margin + 72px pill, so the hero pulls itself up under it and
   repays the space in padding; the sticky glass pill then floats ON the
   salmon, exactly like the home hero treats its ground. */
body.lp-c { --nav-flow: 90px; }
@media (max-width: 980px) { body.lp-c { --nav-flow: 76px; } }
body.lp-c section.sec.hero {
  background: linear-gradient(150deg, #F5A88E 0%, #F08A6A 52%, #C05A38 120%);
  color: #fff;
  margin-top: calc(var(--nav-flow) * -1);
  padding-top: calc(clamp(56px, 7vw, 84px) + var(--nav-flow));
  border-bottom: 1px solid rgba(140,58,34,.25);
}
body.lp-c section.sec.hero .ph-h1 { color: #fff; }
body.lp-c section.sec.hero .ph-body { color: rgba(255,255,255,.94); }
body.lp-c section.sec.hero .btn-aside { color: rgba(255,255,255,.85); }
body.lp-c section.sec.hero .pp-eyebrow {
  color: #fff; background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
/* primary CTA inverts to white on the salmon ground */
body.lp-c section.sec.hero .glass-btn--peach {
  color: var(--pp-peach-deep);
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,255,255,.88));
  border-color: rgba(255,255,255,.95);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,1), 0 14px 30px -10px rgba(120,40,20,.45);
}
body.lp-c section.sec.hero .ph { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.16); }
body.lp-c section.sec.hero .ph .ph-label { color: rgba(255,255,255,.94); }
body.lp-c section.sec.hero .ph .ph-label b { color: #fff; }
body.lp-c section.sec.hero .ph::before { color: rgba(255,255,255,.8); }
body.lp-c section.sec.hero .sec-tag {
  background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.45); color: #fff;
  /* the hero now starts under the nav slot — keep the review chip visible below it */
  top: calc(var(--nav-flow) + 16px);
}
/* white float band for the alternating sections */
body.lp-c section.sec.alt {
  background: rgba(255,255,255,.72);
  border-top: 1px solid rgba(255,255,255,.95);
  border-bottom: 1px solid rgba(140,58,34,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
}
/* the "dark" band inverts to SOLID WHITE — the contrast surface of a salmon page */
body.lp-c section.sec.dark {
  background: #fff; color: var(--pp-ink);
  border-top: 1px solid rgba(140,58,34,.14);
  border-bottom: 1px solid rgba(140,58,34,.14);
}
body.lp-c section.sec.dark .eyebrow { color: var(--pp-peach-deep); }
body.lp-c section.sec.dark .ph-h1, body.lp-c section.sec.dark .ph-h2,
body.lp-c section.sec.dark h2.display, body.lp-c section.sec.dark h3.sub { color: var(--pp-ink); }
body.lp-c section.sec.dark .ph-body, body.lp-c section.sec.dark .lede { color: var(--pp-muted); }
body.lp-c section.sec.dark .card {
  background-color: #fff;
  background-image: radial-gradient(240px 240px at calc(var(--ppx,-9999)*1px) calc(var(--ppy,-9999)*1px),
                    hsl(0 0% 100% / .5), transparent);
  border-color: var(--pp-hairline);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(30,27,24,.05),
              0 18px 40px -28px rgba(30,27,24,.3);
}
body.lp-c section.sec.dark .card::before, body.lp-c section.sec.dark .card::after { display: block; }
body.lp-c section.sec.dark .card .ph-body { color: var(--pp-muted); }
body.lp-c section.sec.dark .ph-media {
  border-color: #e3d9cc;
  background: repeating-linear-gradient(45deg, rgba(30,27,24,.028) 0 10px, transparent 10px 20px), rgba(30,27,24,.018);
}
body.lp-c section.sec.dark .ph-media .ph-label { color: var(--pp-muted); }
body.lp-c section.sec.dark .ph-media .ph-label b { color: #57514a; }
body.lp-c section.sec.dark .slot-name { color: #a89e91; }
body.lp-c section.sec.dark .ph, body.lp-c section.sec.dark .note { border-color: #dbc9a8; background: #fdf7ec; }
body.lp-c section.sec.dark .ph .ph-label, body.lp-c section.sec.dark .note .ph-label { color: #6f6152; }
body.lp-c section.sec.dark .ph .ph-label b, body.lp-c section.sec.dark .note .ph-label b { color: #53483a; }
body.lp-c section.sec.dark .ph::before, body.lp-c section.sec.dark .note::before { color: #b08d4f; }
body.lp-c section.sec.dark .chip.live { color: #1c6b46; background: #e4f5ea; border-color: #bfe4cd; }
body.lp-c section.sec.dark .chip.road { color: #6b6259; background: #f1ede6; border-color: #e0d9cf; }
body.lp-c section.sec.dark .needs-src { color: #8a5a1e; background: #fdf3e0; border-color: #eddcb8; }
body.lp-c section.sec.dark .sec-tag { background: rgba(255,255,255,.82); border-color: var(--pp-hairline); color: var(--pp-muted); }
/* showroom media: the frames ARE the page — bigger, cleaner chrome */
body.lp-c .ph-media { min-height: 340px; border-style: solid; border-color: #ecd6c6; background: rgba(255,255,255,.72); }
body.lp-c .ph-media.tall { min-height: 540px; }
body.lp-c .ph-media.wide { min-height: 400px; }
body.lp-c .ph-media.sm { min-height: 190px; }
body.lp-c .card, body.lp-c .card::before, body.lp-c .card::after { border-radius: 26px; }
body.lp-c .ph-media { border-radius: 26px; }
/* short centered captions */
body.lp-c .wrap > .eyebrow, body.lp-c .wrap > .center > .eyebrow { display: block; text-align: center; }
body.lp-c .wrap > .ph-h2 { text-align: center; margin-left: auto; margin-right: auto; max-width: 24ch; }
body.lp-c .wrap > .ph-body { text-align: center; margin-left: auto; margin-right: auto; max-width: 52ch; }
/* footer sits on the tint — give it a clean white ground edge */
body.lp-c .pp-foot { border-top-color: rgba(140,58,34,.16); }

/* ─────────────────────────────────────────────────────────────── responsive */
@media (max-width: 980px) {
  .hero-grid, .grid-2 { grid-template-columns: 1fr; }
  .pp-nav-links { display: none; }
  .pp-nav-pill { height: 58px; padding: 0 10px 0 18px; }
  .pp-logo-word { font-size: 18px; }
  section.sec { padding: clamp(56px, 10vw, 80px) 0; }
}
@media (max-width: 620px) {
  .pp-nav-login { display: none; }
  .pp-foot-brand { flex: 1 0 100%; max-width: none; }
  .lp-switch { flex-wrap: wrap; justify-content: center; max-width: calc(100vw - 24px); }
}