/* Platform page concept: "Inside the engine".
   The page opens inside the explorable knowledge map, full screen. The rest of the page stays in the same world:
   midnight grounds, two-tone headlines (teal over white), the tri-colour bars, glowing step colours,
   and the products drawn as an architecture standing on the engine. Loaded after site.css on platform-concept.html only. */

:root {
  --pc-bg: #0A0928;
  --pc-mid: #110F3D;
  --pc-line: rgba(255,255,255,.12);
  --pc-panel: rgba(255,255,255,.045);
  --pc-teal: #3AD7B1;
  --pc-text: #D3D2EA;
  --pc-muted: #A9A8C8;
}
body { background: var(--pc-bg); }

/* two-tone headline, as the film sets them */
.pc-tt { font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; text-wrap: balance; }
.pc-tt > span { display: block; }
.pc-tt > span:first-child { color: var(--pc-teal); }
.pc-tt > span + span { color: #FFFFFF; }
.pc-tt-light > span:first-child { color: #137A62; }
.pc-tt-light > span + span { color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pc-tt-light > span:first-child { color: var(--pc-teal); } }
:root[data-theme="dark"] .pc-tt-light > span:first-child { color: var(--pc-teal); }

.pc-bars { display: grid; gap: 6px; width: 160px; margin-bottom: 28px; }
.pc-bars i { display: block; height: 8px; }
.pc-bars i:nth-child(1) { background: #644EEE; width: 72%; }
.pc-bars i:nth-child(2) { background: var(--pc-teal); }
.pc-bars i:nth-child(3) { background: #F68623; width: 46%; }

/* ---------- opening: the explorable map, full screen ---------- */
.pc-engine { position: relative; background: var(--pc-bg); }
.pc-kg.kg-panel { border-radius: 0; box-shadow: none; min-height: 640px; }
.pc-kg.kg-panel canvas { height: max(640px, 100vh); height: max(640px, 100svh); }
.pc-kg::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(10,9,40,.88) 0%, rgba(10,9,40,.55) 30%, rgba(10,9,40,0) 52%), linear-gradient(0deg, rgba(10,9,40,.7) 0%, rgba(10,9,40,0) 22%); transition: opacity .6s; }
.pc-kg.focused::after { opacity: 0; }
.pc-kg > canvas { position: relative; z-index: 0; }
.pc-intro { position: absolute; z-index: 2; left: 0; top: 0; width: min(100%, 640px); padding: 150px 0 0 max(var(--gutter), env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; align-items: flex-start; gap: 24px; transition: opacity .5s, transform .6s var(--ease); }
.pc-kg.focused .pc-intro { opacity: 0; transform: translateX(-24px); pointer-events: none; }
.pc-kicker { display: inline-flex; align-items: center; gap: 12px; font-size: .8125rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #FFFFFF; }
.pc-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pc-teal); box-shadow: 0 0 0 4px rgba(58,215,177,.25); }
.pc-intro h1 { font-size: clamp(2.8rem, 5.6vw, 5.5rem); line-height: .98; letter-spacing: -0.045em; }
.pc-lede { font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.55; color: #E4E3F5; max-width: 44ch; }
.pc-anchors { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-anchors a { padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.05); color: #FFFFFF; font-size: .9375rem; font-weight: 700; text-decoration: none; }
.pc-anchors a:hover { background: rgba(255,255,255,.14); }

/* the map's own controls, rearranged around the copy */
.pc-kg .kg-top { top: auto; bottom: 24px; left: auto; right: max(24px, env(safe-area-inset-right, 0px)); flex-direction: column; align-items: flex-end; z-index: 2; }
.pc-kg .kg-controls { left: max(var(--gutter), env(safe-area-inset-left, 0px)); bottom: 28px; z-index: 2; }
.pc-kg .kg-hint { right: max(26px, env(safe-area-inset-right, 0px)); top: 112px; bottom: auto; z-index: 2; }
.pc-kg .kg-card { top: 100px; z-index: 3; }
.pc-kg.focused .kg-top { opacity: .0; pointer-events: none; }

@media (max-width: 860px) {
  .pc-kg.kg-panel { padding-bottom: 20px; }
  .pc-kg::after { display: none; }
  .pc-intro { position: static; order: -1; width: 100%; padding: 120px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)); }
  .pc-kg.focused .pc-intro { opacity: 1; transform: none; pointer-events: auto; }
  .pc-kg.kg-panel canvas { height: 440px; }
  .pc-kg .kg-hint { top: auto; }
  .pc-kg .kg-top { position: static; align-items: flex-start; }
  .pc-kg.focused .kg-top { opacity: 1; }
  .pc-kg .kg-card { top: auto; }
}

/* ---------- the engine, in words ---------- */
.pc-facts { background: var(--pc-bg); color: var(--pc-text); padding-block: clamp(80px, 9vw, 136px) clamp(64px, 7vw, 104px); border-top: 1px solid var(--pc-line); }
.pc-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(40px, 6vw, 96px); align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.pc-head h2 { font-size: clamp(2.4rem, 5vw, 4.5rem); }
.pc-head p { font-size: 1.1875rem; color: var(--pc-text); max-width: 48ch; }
.pc-facts-list.kg-facts { margin-top: 0; }
.pc-facts-list.kg-facts li { padding: 4px 0 4px 20px; border-left-width: 3px; }
.pc-facts-list b { color: #FFFFFF; font-size: 1.1875rem; }
.pc-facts-list span { color: var(--pc-muted); }
@media (max-width: 860px) { .pc-head { grid-template-columns: 1fr; } }

/* ---------- dark sections ---------- */
.pc-dark { background: var(--pc-bg); color: var(--pc-text); }
.alt.pc-dark, .pc-dark { margin-inline: 0; border-radius: 0; }
.pc-dark .eyebrow { color: #7FDDF9; }
.pc-dark .head > p { color: var(--pc-text); }
.pc-dark h2, .pc-dark h3 { color: #FFFFFF; }
.pc-dark .head h2 { font-size: clamp(2.4rem, 5vw, 4.5rem); }
.pc-map { background: radial-gradient(60% 60% at 50% 70%, rgba(100,78,238,.22), transparent 70%), var(--pc-mid); }

/* one map underneath: the flow glows on midnight */
.pc-map .map-phases li { background: var(--pc-panel); border-color: var(--pc-line); color: var(--pc-muted); }
.pc-map .map-phases b { color: #FFFFFF; }
.pc-map .map-panel { background: rgba(10,9,40,.5); border-color: var(--pc-line); box-shadow: none; }
.pc-map .map-panel::before { background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.3px); }
.pc-map .map-node { background: rgba(255,255,255,.04); border-color: color-mix(in srgb, var(--c) 45%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 10%, transparent), 0 30px 60px -30px color-mix(in srgb, var(--c) 70%, transparent); }
.pc-map .map-node:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent), 0 34px 70px -26px color-mix(in srgb, var(--c) 90%, transparent); }
.pc-map .mn-icon { box-shadow: 0 0 24px -2px var(--c); }
.pc-map .mn-k { color: var(--c); }
.pc-map .mn-chips li { background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--pc-text); }
.pc-map .ml-label { color: var(--pc-muted); }
.pc-map .map-crit { background: linear-gradient(90deg, rgba(214,40,77,.14), rgba(246,134,35,.12)); border-color: rgba(214,40,77,.35); }
.pc-map .mc-label { color: #FFFFFF; }
.pc-map .mc-pill { background: rgba(255,255,255,.06); border-color: var(--pc-line); color: #FFFFFF; }

/* the four steps: tall panels, each in its step colour */
.pc-phases .phase { background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 16%, transparent), rgba(255,255,255,.03) 45%); border: 1px solid color-mix(in srgb, var(--pc) 35%, transparent); box-shadow: none; color: var(--pc-text); }
.pc-phases .phase:hover { box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--pc) 80%, transparent); }
.pc-phases .phase:nth-child(1) { --pc: #34C6F4; } .pc-phases .phase:nth-child(2) { --pc: #9787FF; } .pc-phases .phase:nth-child(3) { --pc: #F68623; } .pc-phases .phase:nth-child(4) { --pc: #3AD7B1; }
.pc-phases .phase::before { height: 4px; background: var(--pc) !important; box-shadow: 0 0 18px var(--pc); }
.pc-phases .pnum { display: flex; align-items: baseline; gap: 10px; color: var(--pc-muted); }
.pc-phases .pnum b { font-size: 3.25rem; line-height: 1; letter-spacing: -0.04em; color: var(--pc); font-weight: 700; }
.pc-phases .phase h3 { color: #FFFFFF; }
.pc-phases .phase p { color: var(--pc-text); }
.pc-phases .phase p b { color: #FFFFFF; }
.pc-phases .phase .loop b { color: var(--pc); }
.pc-phases .phase .prod { border-top-color: var(--pc-line); color: #FFFFFF; }
.pc-phases .record2 { border: 1px solid var(--pc-line); background: var(--pc-mid); }

/* ---------- products: an architecture standing on the engine ---------- */
.pc-products { background: radial-gradient(50% 40% at 50% 100%, rgba(214,40,77,.2), transparent 70%), var(--pc-bg); }
.pc-arch { display: grid; gap: 0; }
.pc-steps-row { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.pc-steps-row li { padding: 10px 16px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); color: var(--c); font-weight: 700; font-size: .9375rem; text-align: center; background: color-mix(in srgb, var(--c) 10%, transparent); }
.pc-prods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.pc-pair { display: grid; gap: 16px; }
.pc-prod { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 24px 22px 28px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid color-mix(in srgb, var(--c) 32%, transparent); min-width: 0; }
.pc-prod img { width: 52px; height: 52px; border-radius: 14px; box-shadow: 0 12px 30px -10px var(--c); }
.pc-prod h3 { font-size: 1.375rem; }
.pc-prod p { font-size: .9688rem; line-height: 1.5; color: var(--pc-text); }
.pc-prod .pc-note { font-size: .875rem; color: var(--pc-muted); }
.pc-prod .pc-note a { color: #7FDDF9; }
/* each product wired down into the engine; a pulse runs along the wire */
.pc-wire { position: absolute; left: 50%; top: 100%; width: 2px; height: 56px; margin-left: -1px; background: linear-gradient(180deg, var(--c), rgba(255,255,255,.25)); }
.pc-wire::after { content: ""; position: absolute; left: 50%; top: 0; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 2px var(--c), 0 0 12px var(--c); animation: pcRun 2.4s linear infinite; }
.pc-prods > :nth-child(2) .pc-wire::after { animation-delay: -.6s; } .pc-prods > :nth-child(3) .pc-wire::after { animation-delay: -1.2s; } .pc-prods > :nth-child(4) .pc-wire::after { animation-delay: -1.8s; }
@keyframes pcRun { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 8px); opacity: 0; } }
.pc-base { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px 28px; margin-top: 56px; padding: 28px 32px; border-radius: 22px; background: linear-gradient(110deg, rgba(55,37,97,.9), rgba(161,31,105,.55) 55%, rgba(246,134,35,.4)); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 30px 80px -30px rgba(214,40,77,.6); }
.pc-base img { width: 64px; height: 64px; border-radius: 18px; }
.pc-base h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.pc-base p { color: #EAE8F8; max-width: 60ch; }
.pc-base-k { font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #FFFFFF; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.12); }
@media (max-width: 1000px) {
  .pc-steps-row { display: none; }
  .pc-prods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-wire { display: none; }
  .pc-base { margin-top: 16px; grid-template-columns: auto minmax(0, 1fr); }
  .pc-base-k { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 600px) { .pc-prods { grid-template-columns: 1fr; } }

/* ---------- microVerse: full bleed ---------- */
.pc-mv { position: relative; overflow: hidden; overflow: clip; isolation: isolate; background: var(--pc-bg); min-height: min(860px, 100svh); display: flex; align-items: center; }
.pc-mv-strip { position: absolute; inset: 0; z-index: -2; display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; }
.pc-mv-strip img { width: 100%; height: 100%; object-fit: cover; }
.pc-mv-strip img:first-child { grid-row: span 2; }
.pc-mv-strip img:nth-child(4) { display: none; }
.pc-mv::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10,9,40,.94) 0%, rgba(10,9,40,.78) 38%, rgba(10,9,40,.1) 75%); }
.pc-mv-in { width: 100%; padding-block: clamp(96px, 10vw, 160px); }
.pc-mv-copy { display: flex; flex-direction: column; gap: 24px; max-width: 560px; color: var(--pc-text); }
.pc-mv-copy h2 { font-size: clamp(2.4rem, 4.6vw, 4.25rem); }
.pc-mv-copy p { font-size: 1.1875rem; }
.pc-chip { font-size: .8125rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.12); color: #FFFFFF; }
.pc-mv .kpi b { color: #FFFFFF; font-size: clamp(2.4rem, 4vw, 3.25rem); }
.pc-mv .kpi span { color: var(--pc-muted); }
@media (max-width: 760px) {
  .pc-mv { display: block; min-height: 0; }
  .pc-mv-strip { position: relative; height: 300px; z-index: 0; }
  .pc-mv::before { display: none; }
  .pc-mv-in { padding-block: 40px 88px; }
}

/* ---------- people in the loop and the close: full width ---------- */
.pc-dark + .band, .band#people, .cta { margin-inline: 0; margin-top: 0; border-radius: 0; }
.band#people::before { display: none; }
.band#people { background: radial-gradient(50% 50% at 85% 20%, rgba(100,78,238,.3), transparent 70%), var(--pc-mid); }

/* ---------- task to tool: the one light section, for breath ---------- */
.pc-ttt { background: var(--bg); }
.pc-ttt .head h2 { font-size: clamp(2.4rem, 5vw, 4.5rem); }
.pc-tool { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; font-weight: 700; font-size: .9375rem; color: var(--ink); background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); }
.pc-tool::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }

.site-footer { margin: 0; border-radius: 0; }

@media (prefers-reduced-motion: reduce) {
  .pc-wire::after { animation: none; top: 50%; }
  .pc-intro { transition: none; }
}
main > .sec.band.cta { margin: 0; border-radius: 0; }

/* ---------- the four-step cycle beside "Show me a finding" ---------- */
.pc-kg .kg-controls { align-items: center; gap: 14px 18px; }
.pc-cycle { position: relative; width: 168px; height: 129px; flex: none; margin: -8px 4px -8px -6px; transition: opacity .4s; }
.pc-cycle svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pcc-track { fill: none; stroke: rgba(255,255,255,.16); stroke-width: 2; stroke-dasharray: 2 6; }
.pcc-arc { fill: none; stroke: url(#pcc-g); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 100; animation: pccArc 8s linear infinite; }
@keyframes pccArc { 0% { stroke-dasharray: 0 100; } 92% { stroke-dasharray: 100 0; opacity: 1; } 100% { stroke-dasharray: 100 0; opacity: 0; } }
.pcc-core { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 9px; box-shadow: 0 0 22px rgba(214,40,77,.5); }
.pcc-n { position: absolute; display: flex; align-items: center; gap: 6px; transform: translate(-50%, -50%); color: #FFFFFF; font-size: .75rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.pcc-n i { width: 12px; height: 12px; border-radius: 50%; background: #1A1850; border: 2px solid var(--c); flex: none; animation: pccNode 8s linear infinite; }
.pcc-n:hover span { text-decoration: underline; }
.pcc-n.n1 { left: 50%; top: 9%; flex-direction: column-reverse; gap: 3px; transform: translate(-50%, -78%); }
.pcc-n.n2 { left: 74.2%; top: 50%; transform: translate(-6px, -50%); }
.pcc-n.n3 { left: 50%; top: 91%; flex-direction: column; gap: 3px; transform: translate(-50%, -22%); }
.pcc-n.n4 { left: 25.8%; top: 50%; flex-direction: row-reverse; transform: translate(calc(-100% + 6px), -50%); }
.pcc-n.n2 i { animation-delay: 2s; } .pcc-n.n3 i { animation-delay: 4s; } .pcc-n.n4 i { animation-delay: 6s; }
@keyframes pccNode { 0%, 24% { background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 30%, transparent), 0 0 14px var(--c); } 30%, 100% { background: #1A1850; box-shadow: none; } }
.pc-kg.focused .pc-cycle { opacity: 0; pointer-events: none; width: 0; margin: 0; }
@media (max-width: 860px) { .pc-kg .kg-controls { padding-left: 18px; } }

/* ---------- the four steps: a rail and one stage ---------- */
.pcs-rail { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 12px; align-items: stretch; margin-bottom: 20px; }
.pcs-rail button { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: flex; align-items: baseline; gap: 12px; width: 100%; height: 100%; padding: 18px 20px 22px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--pc-line); color: var(--pc-muted); overflow: hidden; transition: background-color .3s, border-color .3s, color .3s; }
.pcs-rail button b { font-size: 1.75rem; line-height: 1; letter-spacing: -0.04em; color: color-mix(in srgb, var(--c) 70%, transparent); }
.pcs-rail button span { font-size: 1.25rem; font-weight: 700; }
.pcs-rail button:hover { color: #FFFFFF; border-color: color-mix(in srgb, var(--c) 50%, transparent); }
.pcs-rail button[aria-selected="true"] { color: #FFFFFF; background: color-mix(in srgb, var(--c) 16%, transparent); border-color: var(--c); box-shadow: 0 20px 50px -26px var(--c); }
.pcs-rail button[aria-selected="true"] b { color: var(--c); }
.pcs-rail button:focus-visible { outline: 3px solid var(--c); outline-offset: 3px; }
.pcs-rail button i { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--c); transform-origin: left; transform: scaleX(0); }
.pcs-rail button.is-done i, .pcs-rail button[aria-selected="true"] i { transform: none; }
.pcs-rail button.is-run i { animation: pcsFill 6.5s linear both; }
@keyframes pcsFill { from { transform: scaleX(0); } to { transform: none; } }
.pcs-loop { display: flex; align-items: center; gap: 8px; padding: 0 6px; font-size: .8125rem; font-weight: 700; color: var(--pc-muted); max-width: 12ch; line-height: 1.25; }
.pcs-loop::before { content: "\21BB"; font-size: 1.5rem; color: var(--pc-teal); }

.pcs-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(28px, 4vw, 56px); border-radius: 22px; border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); background: radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%), rgba(255,255,255,.03); position: relative; overflow: hidden; }
.pcs:not(.is-live) .pcs-panel + .pcs-panel { margin-top: 16px; }
.is-live .pcs-panel:not([hidden]) { animation: pcsIn .6s var(--ease); }
@keyframes pcsIn { from { opacity: 0; transform: translateY(12px); } }
.pcs-copy { display: flex; flex-direction: column; gap: 18px; position: relative; }
.pcs-num { position: absolute; right: 0; top: -.2em; font-size: clamp(6rem, 12vw, 11rem); font-weight: 700; line-height: .8; letter-spacing: -0.06em; color: color-mix(in srgb, var(--c) 18%, transparent); pointer-events: none; }
.pcs-copy h3 { font-size: clamp(2.6rem, 5vw, 4.25rem); line-height: 1; letter-spacing: -0.04em; color: var(--c); }
.pcs-lead { font-size: 1.1875rem; line-height: 1.55; color: var(--pc-text); max-width: 50ch; }
.pcs-lead b { color: #FFFFFF; }
.pcs-loopinfo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 18px; margin: 0; padding-top: 18px; border-top: 1px solid var(--pc-line); font-size: 1rem; }
.pcs-loopinfo dt { font-weight: 700; color: var(--c); }
.pcs-loopinfo dd { margin: 0; color: var(--pc-text); }
.pcs-copy .prod { display: flex; align-items: center; gap: 10px; font-weight: 700; color: #FFFFFF; }
.pcs-copy .prod img { width: 36px; height: 36px; border-radius: 10px; }

/* the illustrative product cards */
.pcs-vg { display: flex; flex-direction: column; gap: 10px; }
.vg-card { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: 18px; background: #FFFFFF; color: #46465C; box-shadow: 0 40px 80px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.1); }
.vg-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.vg-pill { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; }
.vg-pill.red { background: #FDE7EC; color: #A3173A; } .vg-pill.violet { background: #ECE9FF; color: #4F3DD6; } .vg-pill.orange { background: #FFF1E0; color: #A8520B; } .vg-pill.teal { background: #E2F7F1; color: #137A62; }
.vg-meta { font-size: .8125rem; font-weight: 600; color: #69697F; }
.vg-title { font-size: 1.1875rem; font-weight: 700; color: #110F3D; line-height: 1.3; }
.vg-src { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: #F4F3FA; font-size: .9375rem; }
.vg-src b { font-size: .8125rem; color: #110F3D; }
.vg-src.bad { background: #FFF4F6; box-shadow: inset 3px 0 0 #D6284D; }
.vg-src mark { background: #FDE7EC; color: #A3173A; font-weight: 700; padding: 0 3px; border-radius: 4px; }
.vg-src mark.ok { background: #E2F7F1; color: #137A62; }
.vg-foot { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid #ECEAF5; font-size: .875rem; font-weight: 600; color: #110F3D; }
.vg-tick { width: 20px; height: 20px; flex: none; border-radius: 50%; background: #3AD7B1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5' fill='none' stroke='%23110F3D' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat; }
.vg-del, .vg-add { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .875rem; padding: 10px 12px; border-radius: 10px; line-height: 1.45; }
.vg-del { background: #FFF4F6; color: #A3173A; text-decoration: line-through; }
.vg-del::before { content: "\2212  "; }
.vg-add { background: #EAF9F4; color: #137A62; margin-top: -8px; }
.vg-add::before { content: "+  "; }
.vg-path { list-style: none; display: grid; gap: 0; }
.vg-path li { position: relative; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #ECEAF5; font-size: .9375rem; }
.vg-path li::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: #3AD7B1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5' fill='none' stroke='%23110F3D' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat; }
.vg-path li.now::before { background: #F68623 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat; box-shadow: 0 0 0 4px #FFE3C7; }
.vg-path b { color: #110F3D; }
.vg-path span { color: #69697F; font-size: .8125rem; text-align: right; }
.vg-ask { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: #110F3D; color: #D3D2EA; font-size: .875rem; }
.vg-ask b { color: #7FDDF9; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.vg-list { list-style: none; display: grid; gap: 8px; }
.vg-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; background: #F4F3FA; font-size: .9375rem; }
.vg-list b { color: #110F3D; font-weight: 600; }
.vg-list span { font-size: .8125rem; font-weight: 700; white-space: nowrap; }
.vg-list li.ok span { color: #137A62; } .vg-list li.open span { color: #A8520B; }
.vg-list li.open { box-shadow: inset 3px 0 0 #F68623; }
.vg-note { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.4); text-align: right; }

@media (max-width: 900px) {
  .pcs-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pcs-loop { grid-column: 1 / -1; max-width: none; }
  .pcs-panel { grid-template-columns: 1fr; }
}
@media (max-width: 480px) { .pcs-rail button { padding: 14px 14px 18px; } .pcs-rail button span { font-size: 1.0625rem; } .vg-path span { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .pcc-arc { animation: none; stroke-dasharray: 100 0; }
  .pcc-n i { animation: none; background: var(--c); }
  .is-live .pcs-panel:not([hidden]) { animation: none; }
}
.pcs-panel[hidden] { display: none; }
.pc-cycle { width: 204px; height: 156px; }
.pcc-n { font-size: .8125rem; }
.pcc-core { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
@media (max-width: 860px) {
  .pc-kg .kg-controls { justify-content: center; padding-left: 16px; padding-right: 16px; }
  .pc-cycle { margin: 6px auto 4px; flex-basis: 204px; }
  .pc-kg .kg-controls .btn { flex: 1 1 100%; }
}

/* ---------- round 3: the cycle above the button ---------- */
.pc-intro { bottom: 112px; padding-bottom: 0; }
.pc-intro h1 { font-size: clamp(2.6rem, 4.9vw, 4.75rem); }
.pc-intro .pc-cycle { margin: auto 0 0 -18px; width: 248px; height: 190px; }
.pc-kg.kg-panel { min-height: 820px; }
.pc-kg.kg-panel canvas { height: max(820px, 100vh); height: max(820px, 100svh); }
.pcc-n { font-size: .875rem; }
.pcc-core { width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 12px; }
.pcc-n i { width: 14px; height: 14px; }
@media (max-width: 860px) {
  .pc-kg.kg-panel { min-height: 0; }
  .pc-kg.kg-panel canvas { height: 440px; }
  .pc-intro .pc-cycle { margin: 8px auto 0; }
  .pc-kg .kg-controls .btn { flex: 1 1 100%; }
}

/* ---------- round 3: the steps follow the scroll ---------- */
.pcs-rail button i { transform: scaleX(var(--p, 0)); animation: none !important; transition: transform .12s linear; }
.pcs-rail button[aria-current="step"] { color: #FFFFFF; background: color-mix(in srgb, var(--c) 16%, transparent); border-color: var(--c); box-shadow: 0 20px 50px -26px var(--c); }
.pcs-rail button[aria-current="step"] b { color: var(--c); }
.pcs.is-pin { position: sticky; top: 92px; }
.pcs.is-pin .pcs-stage { display: grid; }
.pcs.is-stack .pcs-rail { position: sticky; top: 76px; z-index: 5; padding: 10px 0; margin-inline: -4px; padding-inline: 4px; background: linear-gradient(180deg, var(--pc-bg) 85%, rgba(10,9,40,0)); }
.pcs.is-stack .pcs-panel + .pcs-panel { margin-top: 16px; }
.pcs.is-stack .pcs-panel { scroll-margin-top: 200px; }
.pcs.is-stack .pcs-rail button { padding: 12px 14px 14px; }
.pcs.is-stack .pcs-rail button b { font-size: 1.25rem; }
.pcs.is-stack .pcs-rail button span { font-size: 1rem; }
.pcs.is-stack .pcs-loop { display: none; }
@media (max-width: 900px) { .pcs.is-stack .pcs-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .pcs.is-stack .pcs-rail button { flex-direction: column; gap: 2px; padding: 10px 8px 12px; } .pcs.is-stack .pcs-rail button span { font-size: .8125rem; } }
.pcs.is-pin .pcs-panel { margin-top: 0; }
.pcs.is-pin .pcs-panel:not([hidden]) { animation: pcsIn .5s var(--ease); }
@media (prefers-reduced-motion: reduce) { .pcs.is-pin .pcs-panel:not([hidden]) { animation: none; } }
@media (min-width: 900px) and (max-height: 820px) {
  .pcs-rail { margin-bottom: 12px; }
  .pcs-rail button { padding: 12px 18px 15px; }
  .pcs-panel { padding: 24px 32px; gap: 32px; }
  .pcs-copy { gap: 12px; }
  .pcs-copy h3 { font-size: 2.75rem; }
  .pcs-num { font-size: 7rem; }
  .pcs-lead { font-size: 1rem; }
  .pcs-loopinfo { padding-top: 12px; font-size: .9375rem; }
  .vg-card { padding: 18px; gap: 10px; }
  .vg-title { font-size: 1.0625rem; }
  .vg-path li { padding: 7px 0; }
}
/* round 3b: the cycle sits at the foot of the copy, right above the button */
.pc-intro { padding-top: 124px; gap: 20px; }
.pc-intro h1 { font-size: clamp(2.6rem, 4.6vw, 4.5rem); }
.pc-anchors { gap: 6px 22px; }
.pc-anchors a { padding: 4px 0; border: 0; border-radius: 0; background: none; color: #BFE9F8; font-size: .9375rem; text-decoration: underline; text-decoration-color: rgba(127,221,249,.4); text-underline-offset: 5px; }
.pc-anchors a:hover { background: none; color: #FFFFFF; text-decoration-color: #FFFFFF; }
.pc-intro .pc-cycle { margin: auto 0 0 -20px; width: 232px; height: 178px; flex: none; }
@media (min-width: 861px) { .pc-kg.kg-panel, .pc-kg.kg-panel canvas { min-height: 0; } .pc-kg.kg-panel canvas { height: 100vh; } }
@media (min-width: 861px) and (max-height: 820px) {
  .pc-intro { padding-top: 104px; gap: 16px; }
  .pc-intro h1 { font-size: clamp(2.4rem, 4vw, 3.6rem); }
  .pc-lede { font-size: 1rem; }
  .pc-intro .pc-cycle { width: 204px; height: 156px; }
}

/* ---------- round 4: the four steps orbit the map ---------- */
.pc-ring { position: absolute; z-index: 1; pointer-events: none; transition: opacity .6s, transform .8s var(--ease); }
.pc-kg.focused .pc-ring { opacity: 0; transform: scale(1.12); }
.pc-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pcr-track { fill: none; stroke: rgba(255,255,255,.14); stroke-width: .35; }
.pcr-ticks { fill: none; stroke: rgba(255,255,255,.22); stroke-width: 1.4; stroke-dasharray: .25 5.94; }
.pcr-arc { fill: none; stroke: url(#pcr-g); stroke-width: 1; stroke-linecap: round; stroke-dasharray: 0 100; animation: pcrArc 12s linear infinite; filter: drop-shadow(0 0 2px rgba(127,221,249,.6)); }
@keyframes pcrArc { 0% { stroke-dasharray: 0 100; opacity: 1; } 94% { stroke-dasharray: 100 0; opacity: 1; } 100% { stroke-dasharray: 100 0; opacity: 0; } }
.pcr-n { position: absolute; pointer-events: auto; display: flex; align-items: center; gap: 12px; text-decoration: none; color: #FFFFFF; transform: translate(-9px, -50%); }
.pcr-n i { width: 18px; height: 18px; flex: none; border-radius: 50%; background: #110F3D; border: 2px solid var(--c); box-shadow: 0 0 0 6px rgba(10,9,40,.6); animation: pcrNode 12s linear infinite; }
.pcr-n span { display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: baseline; padding: 8px 14px 9px; border-radius: 14px; background: rgba(10,9,40,.72); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 1rem; font-weight: 700; white-space: nowrap; transition: border-color .3s, background-color .3s; animation: pcrLabel 12s linear infinite; }
.pcr-n b { color: var(--c); font-size: .875rem; }
.pcr-n small { grid-column: 1 / -1; font-size: .75rem; font-weight: 600; color: var(--pc-muted); }
.pcr-n:hover span, .pcr-n:focus-visible span { border-color: var(--c); background: color-mix(in srgb, var(--c) 18%, rgba(10,9,40,.8)); }
.pcr-n:focus-visible { outline: none; }
.pcr-n:focus-visible i { outline: 3px solid var(--c); outline-offset: 4px; }
/* positions on the ring: 45, 135, 225 and 315 degrees from the top */
.pcr-n.r1 { left: 84.9%; top: 15.1%; }
.pcr-n.r2 { left: 84.9%; top: 84.9%; }
.pcr-n.r3, .pcr-n.r4 { flex-direction: row-reverse; transform: translate(calc(-100% + 9px), -50%); }
.pcr-n.r3 { left: 15.1%; top: 84.9%; }
.pcr-n.r4 { left: 15.1%; top: 15.1%; }
.pcr-n.r3 span, .pcr-n.r4 span { text-align: right; }
.pcr-n.r2 i, .pcr-n.r2 span { animation-delay: 3s; } .pcr-n.r3 i, .pcr-n.r3 span { animation-delay: 6s; } .pcr-n.r4 i, .pcr-n.r4 span { animation-delay: 9s; }
@keyframes pcrNode { 0%, 23% { background: var(--c); box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 30%, transparent), 0 0 24px var(--c); } 28%, 100% { background: #110F3D; box-shadow: 0 0 0 6px rgba(10,9,40,.6); } }
@keyframes pcrLabel { 0%, 23% { border-color: var(--c); } 28%, 100% { border-color: color-mix(in srgb, var(--c) 45%, transparent); } }
@media (max-width: 860px) { .pc-ring { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .pcr-arc { animation: none; stroke-dasharray: 100 0; }
  .pcr-n i, .pcr-n span { animation: none; }
  .pcr-n i { background: var(--c); }
}
/* every label sits to the right of its point, so nothing reaches into the copy */
.pcr-n.r3, .pcr-n.r4 { flex-direction: row; transform: translate(-9px, -50%); }
.pcr-n.r3 span, .pcr-n.r4 span { text-align: left; }

/* ---------- round 5 ---------- */
/* the opening lines up with the content column of the sections below */
:root { --edge: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); }
@media (min-width: 861px) {
  .pc-intro { padding-left: var(--edge); width: calc(var(--edge) + 620px); }
  .pc-kg .kg-controls { left: var(--edge); }
  .pc-kg .kg-top { right: var(--edge); }
  .pc-kg .kg-hint { right: var(--edge); }
  .pc-kg .kg-card { right: var(--edge); }
  .pc-kg::after { background: linear-gradient(90deg, rgba(10,9,40,.88) 0%, rgba(10,9,40,.55) calc(var(--edge) + 420px), rgba(10,9,40,0) calc(var(--edge) + 760px)), linear-gradient(0deg, rgba(10,9,40,.7) 0%, rgba(10,9,40,0) 22%); }
}
/* From task to tool: dark like the rest of the page, in every theme */
.pc-ttt { background: radial-gradient(50% 60% at 15% 0%, rgba(52,198,244,.12), transparent 70%), var(--pc-mid); }
.pc-ttt .numbered li { border-top-color: var(--pc-line); color: var(--pc-text); }
.pc-ttt .numbered b { color: #FFFFFF; }
.pc-ttt .eyebrow { color: #7FDDF9; }
.pc-ttt .table-wrap { background: rgba(255,255,255,.04); border-color: var(--pc-line); box-shadow: none; }
.pc-ttt th { background: rgba(255,255,255,.05); color: var(--pc-muted); border-bottom-color: var(--pc-line); }
.pc-ttt td { color: var(--pc-text); border-bottom-color: var(--pc-line); }
.pc-ttt td b { color: #FFFFFF; }
.pc-ttt .pc-tool { color: #FFFFFF; }
.pc-ttt .small.muted { color: var(--pc-muted); }
.pc-ttt a { color: #7FDDF9; }

/* ---------- phones: the opening map and the finding card ----------
   The map runs full width at a fixed share of the screen. "Show me a finding" brings the map up to the top of the
   screen and the finding opens as a sheet over the bottom, with its own Next button, so the highlighted points,
   their labels and the explanation are all on screen together. platform.js moves the card to the page body on
   phones (and back on wider screens) so the sheet sits above everything. */
.kc-next { display: none; }
@media (max-width: 860px) {
  .pc-intro { padding-top: 108px; gap: 18px; }
  .pc-kg.kg-panel canvas { height: clamp(360px, 60svh, 520px); }
  .pc-kg .kg-hint { left: 50%; right: auto; bottom: auto; transform: translateX(-50%); }
  .pc-kg .kg-top { padding: 0 16px; }
  .pc-kg.focused .kg-legend { display: none; }
  .pc-kg .kg-controls { flex-wrap: nowrap; gap: 10px; }
  .pc-kg .kg-controls .btn { flex: 1 1 0; min-width: 0; padding-inline: 14px; }
}
.kg-card.kg-sheet { position: fixed; z-index: 60; left: 8px; right: 8px; top: auto; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); width: auto; max-height: min(46svh, 440px); margin: 0; padding: 0 18px 18px; gap: 10px; border-radius: 20px; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background: #110F3D; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 -12px 40px -12px rgba(0,0,0,.65), 0 30px 60px -20px rgba(0,0,0,.8); animation: kgSheetIn .35s var(--ease) both; }
@keyframes kgSheetIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.kg-sheet .kc-top { position: sticky; top: 0; z-index: 1; gap: 10px; margin: 0 -18px; padding: 14px 18px 10px; background: #110F3D; border-bottom: 1px solid rgba(255,255,255,.08); }
.kg-sheet .kc-next { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: #34C6F4; color: #110F3D; font: inherit; font-size: .875rem; font-weight: 700; cursor: pointer; }
.kg-sheet .kc-next::after { content: "\2192"; }
.kg-sheet h3 { font-size: 1.1875rem; }
.kg-sheet .kc-body { font-size: .9375rem; }
.kg-sheet .kc-note { margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .kg-card.kg-sheet { animation: none; } }
.kg-sheet .kc-type, .kg-sheet .kc-next { white-space: nowrap; }
.kg-sheet .kc-type { font-size: .6875rem; letter-spacing: .1em; padding: 6px 10px; }
.kg-sheet .kc-close { flex: none; }
/* phones: the pinned step rail is solid, and covers the strip above it, so text never shows through it */
@media (max-width: 900px) { .pcs.is-stack .pcs-rail { background: var(--pc-bg); box-shadow: 0 -80px 0 var(--pc-bg), 0 16px 16px -8px var(--pc-bg); } }