/* Vibe's explanation layer: architectural objects, useful transformations. */
html{scroll-behavior:smooth}
:focus-visible{outline:2px solid #b783ff;outline-offset:6px}
.copy{gap:clamp(18px,2.6vh,28px);max-width:min(52vw,690px)}
.copy h1{font-size:clamp(38px,4.7vw,68px);max-width:20ch;line-height:1.02}
.copy .lede{max-width:47ch;font-weight:400;font-size:clamp(16px,1.22vw,18px)}
.copy .eyebrow{color:#c4c2d0}
.hero-steps{display:flex;gap:12px;align-items:center;font-size:12px;color:#b8b7c8}
.hero-steps span{display:flex;gap:8px;align-items:center}
.hero-steps b{font:10px var(--mono);color:#ef9f87;font-weight:400}
.hero-steps i{font-style:normal;color:#66667c}
.hero-trust{font-size:12px;color:#aaa9bd;border-bottom:1px solid #515165;padding-bottom:3px}
.scene-caption{position:absolute;bottom:108px;right:var(--gutter);z-index:3;font:10px var(--mono);letter-spacing:.06em;color:#aaa9bd;pointer-events:none}
.story-sec{overflow:hidden;scroll-margin-top:24px}
.story-sec .in{padding-top:100px;padding-bottom:100px}
.story-heading{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:end;margin-bottom:30px}
.story-heading .lbl{display:block;margin-bottom:24px;color:#aaa9bd}
.story-heading h2{max-width:19ch;font-size:clamp(34px,4.15vw,58px)}
.story-heading>p{font-size:18px;line-height:1.65;color:var(--fg-2);max-width:43ch;padding-bottom:5px}
.story-figure{position:relative;margin-top:32px}
.story-figure svg{width:100%;height:auto;overflow:visible}
.story-figure figcaption{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:16px 0;font:10px var(--mono);letter-spacing:.04em;color:#aaa9bd}

.story-link{display:inline-block;font-size:14px;border-bottom:1px solid currentColor;padding:6px 0;margin-top:25px}
.privacy-controls{display:flex;gap:4px;padding:4px;background:#171720;border-radius:99px;width:fit-content;margin:28px 0 18px}
.privacy-controls button{padding:9px 18px;border-radius:99px;font-size:13px;color:#a7a2b6}
.privacy-controls button[aria-pressed="true"]{background:#30303c;color:#f4edf4;box-shadow:0 1px 4px #00000008}
.privacy-note{font-size:13px!important;line-height:1.6!important;color:#9591a5!important}
.benefit-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:center;margin-top:42px}
.benefit-copy .lbl{color:#ed9f89}
.benefit-copy h3{font-family:var(--display);font-size:clamp(30px,3vw,44px);line-height:1.12;margin:18px 0}
.benefit-copy p{font-size:18px;line-height:1.6;color:var(--fg-2);max-width:35ch}
.benefit-tabs{display:flex;gap:25px;border-bottom:1px solid var(--line);margin:32px 0 0}
.benefit-tabs button{padding:13px 0;font-size:15px;color:var(--fg-2);border-bottom:2px solid transparent}
.benefit-tabs button[aria-pressed="true"]{color:var(--fg);border-bottom-color:#ee846b}
/* The box is pinned to the figures' own 640x560 so switching tabs cannot move
 * the page. It also has to be pinned: the canvas figure sizes itself from the
 * element, and left in the grid's normal flow its width fed back into the
 * track and the column grew every time the communities tab was opened. */
.benefit-figure{position:relative;min-width:0;aspect-ratio:640/560}
.benefit-figure svg{width:100%;height:auto}
/* Venues and communities are lattice figures (vibe-lattice.js +
 * vibe-subjects.js). Each shows once its own payload is in, keyed on a marker
 * per figure -- one subject arriving must not reveal another's host. Until
 * then the box is empty: the drawn SVG scenes that used to cover the wait
 * flashed up on the live site and were retired (Josh, 23 Sep). Both payloads
 * are fetched as the section approaches, so the wait is rarely seen. */
.benefit-figure [data-lattice]{display:none}
.benefit-figure[data-audience="venues"].lattice-ready-venues [data-lattice="venues"],
.benefit-figure[data-audience="city"].lattice-ready-communities [data-lattice="communities"]{display:block}
/* The canvas carries the cells, the SVG in front carries the labels, so the
 * type stays vector and inherits the shared .art-* rules. */
.lattice-art .lattice-canvas{position:absolute;left:0;top:0;width:100%;display:block}
.lattice-art .lattice-frame{position:relative;pointer-events:none}
/* People is not a lattice subject: it is the A* figure (vibe-pathfind.js),
 * WebGL2 on real streets. Same swap, its own marker; the box is empty until
 * the figure is live, and again if the GL context is lost. */
.benefit-figure [data-pathfind]{display:none}
.benefit-figure[data-audience="people"].pathfind-ready [data-pathfind]{display:block}
.pathfind-art{position:relative}
.pathfind-art .pathfind-canvas{position:absolute;left:0;top:0;width:100%;display:block}
.pathfind-art .pathfind-frame{position:relative;pointer-events:none}
.pathfind-art .pf-idx{fill:#6e7085}
.pathfind-art .pf-num{fill:#efeaf6;font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:.3px}
/* type over the map: a halo in the page colour, as on a map */
.pathfind-art .pf-place{paint-order:stroke;stroke:#07080e;stroke-width:3.2px;stroke-linejoin:round}
@media(max-width:500px){.pathfind-art .pf-num{font-size:21px}}
.benefit-readout{display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid var(--line);padding:18px 0;color:var(--fg-2);font-size:13px}
.benefit-readout b{color:#f4f3f8;font-size:16px;font-weight:400}
/* Home 03 — the four research strands, as one rule-ruled row. */
.story-paths{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:8px}
.story-paths a{display:flex;flex-direction:column;gap:11px;min-width:0;padding:30px 26px 30px 0}
.story-paths a + a{border-left:1px solid var(--line);padding-left:26px}
.story-paths .lbl{color:#aaa9bd}
.story-paths h3{font-family:var(--display);font-weight:700;font-size:clamp(20px,1.9vw,26px);line-height:1.12}
.story-paths p{font-size:14.5px;line-height:1.62;color:var(--fg-2)}
.story-paths .go{margin-top:auto;padding-top:20px;display:flex;justify-content:space-between;gap:12px;font:10px var(--mono);letter-spacing:.09em;color:var(--fg-2)}
.story-paths a:hover h3{color:#e6b4f2}
.story-paths a:hover .go{color:var(--fg)}
.story-questions{border-top:1px solid var(--line)}
.story-questions details{border-bottom:1px solid var(--line);padding:23px 0}
.story-questions summary{font-size:20px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:24px}
.story-questions summary::after{content:'+';font:25px var(--sans);color:#b0abc4}
.story-questions details[open] summary::after{content:'−'}
.story-questions details p{max-width:74ch;font-size:16px;line-height:1.7;color:var(--fg-2);padding-top:18px}
.story-questions a{text-decoration:underline;text-underline-offset:4px}
.page-head .lede{max-width:58ch}
.page-head h1{max-width:22ch}
.copy .cta{gap:20px}
.story-mini{margin:40px 0 0;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;gap:28px;color:var(--fg-2);font-size:15px}
.story-mini b{font-weight:500;color:var(--fg)}
.story-sec[data-inview="false"] *{animation-play-state:paused!important}
@media(max-width:1100px){.hero-steps{font-size:11px;gap:7px}.benefit-layout{gap:32px}.copy{max-width:57vw}.copy h1{font-size:5vw}}
@media(max-width:900px){
 .copy{max-width:none;gap:15px}.copy h1{font-size:clamp(34px,6vw,50px);max-width:22ch}.copy .lede{font-size:15px;line-height:1.5;max-width:55ch}.hero-steps{font-size:11px;gap:10px;flex-wrap:wrap}.copy .eyebrow{font-size:10px}.copy-wrap{padding-bottom:20px}.hero-trust{font-size:11px}.scene-caption{right:var(--gutter);bottom:auto;top:95px;font-size:9px}.copy .btn{padding:11px 17px;font-size:13px}.story-heading{grid-template-columns:1fr;gap:22px}.story-paths{grid-template-columns:1fr 1fr}.story-paths a{padding:26px 22px 28px 0}.story-paths a:nth-child(odd){border-left:0;padding-left:0}.story-paths a:nth-child(even){border-left:1px solid var(--line);padding-left:22px}.story-paths a:nth-child(n+3){border-top:1px solid var(--line)}.story-heading>p{font-size:17px}.story-sec .in{padding-top:70px;padding-bottom:70px}.story-heading h2{max-width:21ch}.benefit-layout{grid-template-columns:1fr;gap:30px}.benefit-figure{max-width:620px}
}
@media(max-width:600px){
 .hero{min-height:790px;height:100svh}.copy-wrap{padding-top:185px}.copy h1{font-size:37px}.hero-steps{gap:6px;font-size:10px}.hero-steps span{gap:5px}.copy .lede{font-size:15px}.story-figure figcaption{font-size:9px;line-height:1.6}.story-questions summary{font-size:18px}.story-paths{grid-template-columns:1fr}.story-paths a{border-left:0!important;padding:22px 0!important}.story-paths a + a{border-top:1px solid var(--line)}.story-paths .go{padding-top:16px}.story-mini{flex-direction:column;gap:12px}.benefit-tabs{gap:22px}.benefit-tabs button{font-size:14px}.privacy-controls button{font-size:12px;padding:9px 15px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.story-sec *{animation:none!important;transition:none!important}}