/* Personas — TruU's Proprietary Identity Persona + Persona Cluster.
   Built on the core brand system in styles.css (Newsreader serif, Inter, warm near-black, film grain). */

.pp-page { background: var(--bg); }
.pp-main { padding-top: 88px; }
.pp-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; width: 100%; box-sizing: border-box; }
/* section 1 flows naturally with a comfortable gap below the header; section 2 fills a screen (see .pp-cluster) */
.pp-sec { padding: 76px 0 60px; box-sizing: border-box; }
.pp-h1 { font-size: clamp(34px, 4.2vw, 56px); font-weight: 400; letter-spacing: -.018em; line-height: 1.04; color: var(--text); }

/* ---- Section 1 · Identity Persona ---- */
.pp-head { max-width: 1040px; }
.pp-sub { margin-top: 16px; font-family: "Inter Tight", sans-serif; font-weight: 300; font-size: clamp(19px, 2.1vw, 30px); line-height: 1.18; letter-spacing: -.01em; color: var(--text-2); }
.pp-sub em { font-family: var(--font-display); font-style: italic; color: var(--text); }

.pp-persona-body { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: 36px; align-items: center; margin-top: 26px; }
.pp-persona-copy { display: flex; flex-direction: column; gap: 42px; max-width: 460px; }
.pp-persona-copy p { font-size: 16px; line-height: 1.55; color: var(--text-2); }
.pp-persona-copy strong { color: var(--text); font-weight: 500; }

.pp-radial-wrap { display: flex; justify-content: center; }
.pp-radial { width: 100%; max-width: min(520px, calc(100vh - 320px)); height: auto; display: block; overflow: visible; margin: 0 auto; }
.pp-dim { font-family: "Inter Tight", "Inter", sans-serif; font-weight: 300; letter-spacing: .02em; }

/* clockwise dimension reveal — each dimension fades in, in order, as the wheel scrolls into view */
html.pp-js .pp-dg { opacity: 0; transition: opacity .55s ease; }
html.pp-js .pp-radial.in .pp-dg { opacity: 1; }
@media (prefers-reduced-motion: reduce) { html.pp-js .pp-dg { opacity: 1 !important; transition: none !important; } }

/* ---- Non-Human Persona (parallel to Section 1, binary core) ---- */
.pp-nhp { border-top: .5px solid var(--border); }
.pp-nhp-quote {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.5; letter-spacing: -.005em;
  color: var(--text); text-align: left;
  border-left: 2px solid var(--text-3);
  padding-left: 20px;
  max-width: 680px; margin: 44px 0 0;
}
.pp-nhp-quote em { font-style: italic; color: var(--text); }

/* ---- Platform: every use case is built on the Persona core ----
   The whole story sits on one screen: heading, the use-case grid, and the
   Persona core all visible at once. On-theme monochrome cards, warm Persona base. */
.pp-platform {
  border-top: .5px solid var(--border);
  min-height: 100vh; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: 100px; padding-bottom: 46px;
}
.pp-platform .pp-h1 { font-size: clamp(30px, 3.7vw, 50px); }
.pp-platform .pp-sub { margin-top: 11px; font-size: clamp(17px, 1.7vw, 24px); }
.pp-platform-lead {
  font-family: "Inter Tight", sans-serif; font-weight: 300;
  font-size: clamp(15px, 1.45vw, 18px); line-height: 1.5;
  color: var(--text-2); max-width: 720px; margin: 20px 0 0;
}
.pp-stack { margin-top: 40px; }
/* eyebrow frames the grid explicitly as the use cases */
.pp-uc-eyebrow { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.pp-uc-eyebrow::before, .pp-uc-eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.pp-uc-eyebrow span {
  flex: none; font-family: "Inter Tight", sans-serif; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-3);
}
.pp-uc-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
/* static tiles — they read as use cases, not links: no arrow, no hover/lift affordance */
.pp-uc {
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 12px;
  background: linear-gradient(160deg, var(--surface) 0%, var(--base) 100%);
  box-shadow: 0 10px 30px -22px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
  padding: 22px 18px; text-align: center;
  font-family: "Inter Tight", sans-serif; font-weight: 500; font-size: 15.5px; color: var(--text);
}
.pp-uc-more { color: var(--text-3); background: transparent; border: 1px dashed var(--border); box-shadow: none; }
.pp-stack-link { display: flex; justify-content: center; margin: 14px 0; }
.pp-stack-link span {
  position: relative; font-family: "Inter Tight", sans-serif; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-3);
}
.pp-stack-link span::before, .pp-stack-link span::after { content: ""; position: absolute; top: 50%; width: 42px; height: 1px; background: var(--border); }
.pp-stack-link span::before { right: calc(100% + 16px); }
.pp-stack-link span::after { left: calc(100% + 16px); }
.pp-core {
  border: 1px solid rgba(226,99,46,.42); border-radius: 16px;
  background: linear-gradient(180deg, rgba(226,99,46,.10), rgba(226,99,46,.015));
  box-shadow: 0 0 70px -28px rgba(226,99,46,.5);
  padding: 32px 30px;
}
.pp-core-top { text-align: center; }
.pp-core-name { display: block; font-family: var(--font-display); font-size: clamp(29px, 3vw, 42px); font-weight: 600; letter-spacing: -.018em; color: var(--primary); }
.pp-core-desc { display: block; font-family: "Inter Tight", sans-serif; font-size: 14.5px; line-height: 1.5; color: var(--text-2); max-width: 600px; margin: 8px auto 0; }
/* the personas overlap into one continuous line — a single fabric of identities;
   the identity types are named separately, below the stack. */
.pp-core-stack { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; margin: 26px 0 0; padding-top: 26px; border-top: 1px solid var(--border); }
.pp-core-stack img { width: 48px; height: 48px; flex: none; filter: drop-shadow(0 3px 7px rgba(0,0,0,.5)); }
.pp-core-stack img:not(:first-child) { margin-left: -5px; }
.pp-core-types {
  text-align: center; font-family: "Inter Tight", sans-serif; font-size: 13.5px;
  letter-spacing: .02em; color: var(--text-2); margin-top: 18px;
}
@media (max-width: 860px) {
  .pp-platform { min-height: 0; padding-top: 76px; }
  .pp-uc-row { grid-template-columns: repeat(2, 1fr); }
  .pp-core-stack { flex-wrap: wrap; gap: 5px; }
  .pp-core-stack img { width: 38px; height: 38px; }
  .pp-core-stack img:not(:first-child) { margin-left: 0; }
  .pp-core-types { font-size: 12.5px; }
}

/* ---- Section 2 · Persona Cluster ---- */
.pp-cluster { border-top: .5px solid var(--border); min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.pp-flow { display: flex; align-items: flex-start; gap: 10px; margin-top: 96px; }
.pp-stage { flex: 1; display: flex; flex-direction: column; align-items: center; }
.pp-stage-head { text-align: center; margin-bottom: 16px; min-height: 38px; display: flex; flex-direction: column; justify-content: flex-end; }
.pp-stage-t { font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 16px; color: var(--text); }
.pp-stage-s { font-size: 13px; color: var(--text-3); margin-top: 3px; }
.pp-arrow { color: var(--text-3); font-size: 22px; flex: none; align-self: flex-start; margin-top: 163px; width: 20px; text-align: center; }
.pp-stage-viz { width: 100%; height: 244px; display: flex; align-items: center; justify-content: center; position: relative; }

/* Each stage is an SVG of the SAME identities at a different point in their lifecycle:
   raw workforce → a Persona per identity → Personas clustered along five labelled spines. */
.pp-canvas { position: relative; width: 100%; max-width: 320px; height: 244px; border: .5px solid var(--border); border-radius: 16px; background: rgba(255,255,255,0.015); overflow: hidden; }
.pp-csvg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Each stage's caption sits directly beneath its tile so the explanation tracks the
   visual it describes — in a row on desktop, stacked tile-by-tile on mobile. */
.pp-stage-cap { max-width: 320px; margin-top: 22px; font-size: 16px; line-height: 1.55; color: var(--text-2); }

/* ---- responsive ---- */
@media (max-width: 980px) {
  .pp-persona-body { grid-template-columns: 1fr; gap: 26px; }
  .pp-radial { max-width: 520px; margin: 0 auto; }
}
@media (max-width: 860px) {
  .pp-wrap { padding: 0 22px; }
  .pp-sec { padding: 68px 0; }
  .pp-flow { flex-direction: column; align-items: center; gap: 20px; }
  .pp-stage { width: 100%; }
  .pp-arrow { align-self: center; margin-top: 0; transform: rotate(90deg); }
  .pp-stage-cap { max-width: 360px; margin: 18px auto 0; }
}

@media (max-width: 760px) {
  .pp-main { padding-top: 72px; }
  .pp-sec { padding: 56px 0; }
  .pp-wrap { padding: 0 22px; }
  .pp-head { max-width: none; }
  .pp-h1 { font-size: clamp(34px, 9vw, 42px); line-height: 1.06; }
  .pp-sub { font-size: 15.5px; line-height: 1.55; margin-top: 22px; max-width: none; }

  .pp-persona-body { display: flex; flex-direction: column; gap: 22px; margin-top: 22px; }
  .pp-persona-copy { max-width: none; gap: 22px; order: 2; }
  .pp-persona-copy p { font-size: 15px; line-height: 1.55; }
  .pp-radial-wrap { order: 1; width: 100%; justify-content: flex-start; }
  .pp-radial { width: min(320px, 86vw); max-width: 100%; height: auto; margin: 0; }

  .pp-nhp-quote { max-width: none; margin-top: 26px; }

  .pp-cluster { min-height: 0; }
  .pp-flow { margin-top: 36px; }
  .pp-canvas { max-width: 100%; }
  .pp-flow-caps { margin-top: 30px; }
  .pp-flow-caps p { font-size: 15px; max-width: none; }

  .pp-platform { min-height: 0; padding-top: 56px; padding-bottom: 56px; }
  .pp-platform .pp-h1 { font-size: clamp(26px, 7vw, 32px); line-height: 1.08; }
  .pp-platform .pp-sub { font-size: 15.5px; line-height: 1.55; margin-top: 22px; }
  .pp-platform-lead { font-size: 15px; line-height: 1.55; margin-top: 16px; max-width: none; }
  .pp-stack { margin-top: 28px; }
  .pp-uc-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pp-uc { padding: 16px 12px; font-size: 14px; }
  .pp-core { padding: 22px 18px; }
  .pp-core-name { font-size: clamp(24px, 6.4vw, 32px); }
  .pp-core-desc { font-size: 13.5px; }
  .pp-core-stack { margin-top: 20px; padding-top: 20px; }
  .pp-core-stack img { width: 32px; height: 32px; }
  .pp-core-types { font-size: 12px; }
}

/* ============ Scroll experience: living backdrop, section reveals, soft seams ============ */
/* A fixed glow sits behind the page and warms from cool white toward the brand orange
   as the Persona core scrolls into view. Content and footer ride above it. */
/* Echoes the site's pointer-aurora: a soft persona-orange glow on mix-blend screen.
   The glow glides down the viewport and blooms brighter as you move from the human
   Persona toward the Persona core, so each section change is felt, not just implied.
   A second layer tracks the pointer, exactly like the home page. */
.pp-ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.pp-ambient::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 86vmax; height: 86vmax; margin: -43vmax 0 0 -43vmax;
  background: radial-gradient(closest-side, rgba(226,99,46,.13), rgba(226,99,46,.05) 44%, transparent 72%);
  mix-blend-mode: screen; opacity: .42; transform: translateY(-10vh);
  transition: transform 1.05s var(--ease), opacity 1.05s var(--ease);
}
.pp-ambient::after {
  content: ""; position: fixed; inset: 0;
  background: radial-gradient(460px circle at var(--cx, 50%) var(--cy, 38%), rgba(226,99,46,.07), rgba(226,99,46,.03) 36%, transparent 70%);
  mix-blend-mode: screen;
}
body.amb-s1 .pp-ambient::before { transform: translateY(-26vh); opacity: .34; }
body.amb-s2 .pp-ambient::before { transform: translateY(-9vh);  opacity: .52; }
body.amb-s3 .pp-ambient::before { transform: translateY(9vh);   opacity: .72; }
body.amb-s4 .pp-ambient::before { transform: translateY(26vh);  opacity: 1; }
.pp-main { position: relative; z-index: 1; }
.site-footer { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .pp-ambient::before { transition: none; } }

/* Soft dissolving seams between sections, replacing the hard hairlines */
.pp-sec { position: relative; }
.pp-nhp, .pp-cluster, .pp-platform { border-top: 0; }
.pp-nhp::before, .pp-cluster::before, .pp-platform::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(var(--maxw), 90%); height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.11) 24%, rgba(255,255,255,.11) 76%, transparent);
}

/* Each section's content rises and fades as it enters (wheels keep their own clockwise reveal) */
html.pp-js .pp-sec .pp-head,
html.pp-js .pp-persona .pp-persona-copy,
html.pp-js .pp-cluster > .pp-wrap > .pp-h1,
html.pp-js .pp-cluster > .pp-wrap > .pp-sub,
html.pp-js .pp-cluster .pp-flow,
html.pp-js .pp-platform .pp-stack {
  opacity: 0; transform: translateY(26px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
html.pp-js .pp-sec.in .pp-head,
html.pp-js .pp-persona.in .pp-persona-copy,
html.pp-js .pp-cluster.in > .pp-wrap > .pp-h1,
html.pp-js .pp-cluster.in > .pp-wrap > .pp-sub,
html.pp-js .pp-cluster.in .pp-flow,
html.pp-js .pp-platform.in .pp-stack {
  opacity: 1; transform: none;
}
html.pp-js .pp-persona .pp-persona-copy { transition-delay: .08s; }
html.pp-js .pp-cluster .pp-flow { transition-delay: .05s; }
html.pp-js .pp-platform .pp-stack { transition-delay: .06s; }
/* Entry section (first persona block): wheel keeps its clockwise reveal, but text renders immediately. */
html.pp-js .pp-main > .pp-sec:first-of-type .pp-head,
html.pp-js .pp-main > .pp-sec:first-of-type .pp-persona-copy {
  opacity: 1; transform: none; transition: none;
}
@media (prefers-reduced-motion: reduce) {
  html.pp-js .pp-sec .pp-head,
  html.pp-js .pp-persona .pp-persona-copy,
  html.pp-js .pp-cluster > .pp-wrap > .pp-h1,
  html.pp-js .pp-cluster > .pp-wrap > .pp-sub,
  html.pp-js .pp-cluster .pp-flow,
  html.pp-js .pp-platform .pp-stack { opacity: 1 !important; transform: none !important; transition: none !important; }
}