/* For You and Business (owner direction, 2026-11-09): the homepage wall carried into the two pages
   that describe each part in depth. The recesses, the product stage and their shading are
   home-wall.css's own rules (these sections are in its id lists); this file only lays them out.
   The moving scroll light stays on the homepage, so these recesses keep their resting shading. */

/* ---------------- the hero: words on the left, the wall on the right ---------------- */
/* The homepage opens centred on the whole wall; these pages open on one part of it, the way the
   sales deck's cover does. The art is generated atmosphere only (no interface, no people). */
.vp-hero { padding: 120px 0 128px; background: #fff; }
.vp-hero-art { position: absolute; z-index: 0; top: 0; right: 0; width: min(64%, 1080px); height: 100%; object-fit: cover; object-position: right center; pointer-events: none; }
.vp-hero::after { background: linear-gradient(90deg, #fff 0%, #fff 30%, rgba(255,255,255,.88) 42%, rgba(255,255,255,0) 64%), linear-gradient(0deg, #fff 0%, rgba(255,255,255,0) 22%); }
.vp-hero .kh-hero-copy { text-align: left; }
.vp-hero h1 { max-width: 640px; font-size: clamp(42px, 5vw, 72px); line-height: 1.04; letter-spacing: -.04em; }
.vp-hero .ev-intro { max-width: 520px; margin: 26px 0 0; font-size: 19px; line-height: 1.6; color: #374151; text-wrap: pretty; }
.vp-hero .ev-actions { justify-content: flex-start; margin-top: 34px; }

[data-wall-page] .kw-moment-number { margin: 0; font-size: 13px; letter-spacing: .14em; color: #a4562d; }

/* ---------------- a row of recesses, one camera for the row ---------------- */
.vp-pods { container-type: inline-size; display: grid; grid-template-columns: repeat(var(--pods), minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.vp-pods--4 { --pods: 4; }
.vp-pods > .kw-pod { --pitch: calc((100cqw + 20px) / var(--pods)); min-width: 0; }
.vp-pods--4 > .kw-pod:nth-child(1) { --pod-camera-offset: calc(var(--pitch) * 1.5); }
.vp-pods--4 > .kw-pod:nth-child(2) { --pod-camera-offset: calc(var(--pitch) * .5); }
.vp-pods--4 > .kw-pod:nth-child(3) { --pod-camera-offset: calc(var(--pitch) * -.5); }
.vp-pods--4 > .kw-pod:nth-child(4) { --pod-camera-offset: calc(var(--pitch) * -1.5); }
.vp-pods .kh-outcome-face { padding: 22px 22px 28px; }
.vp-pods h3 { margin: 12px 0 10px; font-size: 20px; font-weight: 550; line-height: 1.22; letter-spacing: -.02em; color: rgba(34,39,41,.94); }
.vp-pods .kh-outcome-face > h3:first-child { margin-top: 0; }
.vp-pods .kh-outcome-face > p:last-child { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(75,79,81,.94); }

/* ---------------- a real product screen as the back of a recess ---------------- */
/* Wider than the words around it (up to 1300px), so the app's own screen has the room it was built
   for and its labels read at full size instead of shrunk to fit the text column. */
[data-wall-page] .kw-stage { --stage-width: min(1300px, 100vw - 64px); --software-depth: 32px; position: relative; left: 50%; width: var(--stage-width); margin: 0 0 0 calc(var(--stage-width) / -2); padding: var(--software-depth); perspective: 960px; perspective-origin: 50% 50%; }
[data-wall-page] .kw-stage .kw-software-face { padding: 12px; overflow: hidden; background: #fff; }
[data-wall-page] .kw-stage .fit { overflow: hidden; }
[data-wall-page] .kw-stage .fit-inner { transform-origin: 0 0; }
[data-wall-page] .kw-stage .fit-inner iframe { width: 100%; }
.vp-figure { margin: 72px 0 0; }
.vp-figure figcaption { margin-top: 14px; text-align: center; font-size: 14.5px; font-weight: 500; color: var(--text-muted); }

/* ---------------- Business's four stages, and For You's three scenes ---------------- */
/* Both pair a real product answer with its words. */
.vp-stages, .vp-payoff { padding-bottom: 32px; }
/* Each scene opens on its moment: a small picture set into the wall above its words. */
.vp-scene-art { max-width: 440px; margin-bottom: 30px; --well-depth: 20px; }
.vp-still.vp-scene-art > .kh-outcome-face { aspect-ratio: 16 / 10; }
/* Two moments at once (Sam at rest, June at his desk): a pair of square recesses side by side. */
.vp-scene-pair { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 18px; align-items: start; width: calc(100% + 40px); margin-bottom: 30px; }
.vp-scene-square { --well-depth: 18px; }
/* Staggered, so the two moments read as two places at once rather than a matched pair. */
.vp-scene-pair > .vp-scene-square:last-child { margin-top: 72px; }
/* In a flipped scene the chat sits to the left, so the pair reaches into the gap on that side. */
.vp-stage--flip .vp-scene-pair { margin-left: -40px; }
.vp-still.vp-scene-square > .kh-outcome-face { aspect-ratio: 1; }
/* The away scene (owner, 2026-11-09): its two moments larger and one above the other, stepping down
   from you at the beach (top left) to the office still getting answers (lower right), so it reads
   differently from the side-by-side pair above it. */
.vp-scene-stack { display: grid; gap: 20px; width: calc(100% + 40px); margin-bottom: 34px; }
.vp-scene-stack > .vp-scene-square { width: 70%; --well-depth: 22px; }
.vp-scene-stack > .vp-scene-square:last-child { width: 62%; justify-self: end; }
.vp-stage-list { display: grid; gap: 128px; margin: 64px 0 0; padding: 0; list-style: none; }
.vp-stage-copy h3 { margin: 12px 0 0; font-size: clamp(30px, 3vw, 42px); font-weight: 500; line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
/* The header states the company's value; the stage it belongs to rides in a small label above it,
   unnumbered (owner, 2026-11-09). */
.vp-stage-name { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #a4562d; }
.vp-stage-lead { margin: 18px 0 0; font-size: 18px; line-height: 1.55; color: var(--text); text-wrap: pretty; }
.vp-stage-points { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.vp-stage-points li { position: relative; padding-left: 24px; font-size: 15.5px; line-height: 1.55; color: var(--text-muted); }
.vp-stage-points li::before { content: ""; position: absolute; left: 0; top: .5em; width: 9px; height: 9px; border-radius: 2px; background: var(--ember); }

/* A chat example beside its words, the way the homepage's moments pair them. */
/* Columns are named outright: home-wall.css pins every chat lane to row 1, which would otherwise
   auto-place the lane first, into the narrow column. */
.vp-stage--chat { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.vp-stage--chat .vp-stage-copy { grid-column: 1; grid-row: 1; }
.vp-stage--chat .kw-demo-lane { grid-column: 2; grid-row: 1; --pod-camera-offset: calc(100cqw / -5); }
.vp-stage--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.vp-stage--flip .vp-stage-copy { grid-column: 2; }
.vp-stage--flip .kw-demo-lane { grid-column: 1; --pod-camera-offset: calc(100cqw / 5); }
:is(#stages,#payoff) .kw-ui-pod { --well-depth: 38px; }

/* A wide screen under its words, at the size it was authored. */
.vp-stage--wide .vp-stage-copy { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; margin-bottom: 40px; }
.vp-stage--wide .vp-stage-lead { margin-top: 0; }

/* ---------------- For You: the opener, June alive in the homepage film's recess ---------------- */
/* The same recessed frame as the homepage film (.kh-film--lead), holding a short silent loop of June
   instead of a film with controls. Her words sit on the calm wall to her left, in the column her
   hair never reaches as she moves (29% of the frame). Below 1100px that column is too narrow to
   hold them at a readable size, so they move under the frame and she keeps the whole picture. */
.vp-meet { margin-top: 0; padding-top: 12px; }
.vp-meet .kh-film-surface { aspect-ratio: 16 / 9; background: #e7d3bd; }
.vp-meet-video { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 60% 45%; border-radius: 0; box-shadow: none; outline: 0; background: #e7d3bd; }
.vp-meet-copy { position: absolute; z-index: 4; top: 50%; left: calc(clamp(18px, 3.5vw, 38px) + clamp(24px, 5%, 64px)); max-width: 29%; transform: translateY(-50%); pointer-events: none; }
.vp-meet-kicker { margin: 0; font-size: 13.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #8a4420; }
.vp-meet-copy h2 { margin: 14px 0 0; font-size: clamp(32px, 2.9vw, 40px); line-height: 1.05; letter-spacing: -.035em; color: #1f1a17; }
.vp-meet-copy p:last-child { margin: 16px 0 0; font-size: 18px; line-height: 1.55; color: #3d332c; }
@media (max-width: 1099px) {
  .vp-meet-copy { position: static; max-width: 640px; margin: 32px 0 0 clamp(18px, 3.5vw, 38px); transform: none; }
  .vp-meet-copy h2 { font-size: clamp(32px, 4.6vw, 44px); }
  .vp-meet-copy p:last-child { max-width: 540px; }
}

/* ---------------- For You: June, set into the wall ---------------- */
/* The companion is June's world (June 1.0 brand pack): approved stills of her behind frosted
   paper, each the back of a recess, the way the homepage sets her film into the wall. Words sit
   beside the light, never over it. */
.vp-moments { display: grid; gap: 112px; margin: 72px 0 0; padding: 0; list-style: none; }
.vp-moment { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: center; }
.vp-moment .vp-still { grid-column: 1; grid-row: 1; --pod-camera-offset: calc(100cqw / 5); }
.vp-moment .vp-moment-copy { grid-column: 2; grid-row: 1; }
.vp-moment--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.vp-moment--flip .vp-still { grid-column: 2; --pod-camera-offset: calc(100cqw / -5); }
.vp-moment--flip .vp-moment-copy { grid-column: 1; }
.vp-still { --well-depth: 30px; }
.vp-still > .kh-outcome-face { aspect-ratio: 4 / 3; padding: 0; background: #e9e1d4; }
.vp-still > .kh-outcome-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vp-moment-copy h3 { margin: 12px 0 0; font-size: clamp(30px, 3vw, 42px); font-weight: 500; line-height: 1.08; letter-spacing: -.035em; }
.vp-moment-lead { margin: 18px 0 0; font-size: 19px; line-height: 1.55; color: var(--text); text-wrap: pretty; }
.vp-moment-copy > p:last-child { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: var(--text-muted); text-wrap: pretty; }
.vp-session-head { margin-top: 128px; margin-bottom: 8px; }
.vp-session-head h3 { font-size: clamp(26px, 2.6vw, 36px); font-weight: 500; letter-spacing: -.03em; }
.vp-companion .vp-figure { margin-top: 24px; }

/* ---------------- For You: the close, with June lifted toward the light ---------------- */
.vp-close-still { width: min(240px, 60vw); margin: 0 auto 44px; --well-depth: 22px; }
.vp-close-still > .kh-outcome-face { aspect-ratio: 1; }
.vp-close-note { max-width: 520px; margin: 20px auto 0; font-size: 17px; line-height: 1.6; color: var(--text-muted); }

@media (max-width: 1000px) {
  .vp-pods--4 { --pods: 2; row-gap: 20px; }
  .vp-pods--4 > .kw-pod:nth-child(odd) { --pod-camera-offset: calc(var(--pitch) * .5); }
  .vp-pods--4 > .kw-pod:nth-child(even) { --pod-camera-offset: calc(var(--pitch) * -.5); }
  .vp-stage--chat, .vp-stage--flip, .vp-stage--wide .vp-stage-copy { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .vp-stage--chat .vp-stage-copy, .vp-stage--flip .vp-stage-copy { grid-column: 1; grid-row: 1; }
  .vp-stage--chat .kw-demo-lane, .vp-stage--flip .kw-demo-lane { grid-column: 1; grid-row: 2; --pod-camera-offset: 0px; }
  .vp-stage-list { gap: 96px; }
  .vp-scene-pair, .vp-stage--flip .vp-scene-pair { width: 100%; max-width: 560px; margin-left: 0; }
  .vp-scene-pair > .vp-scene-square:last-child { margin-top: 44px; }
  .vp-scene-stack { width: 100%; max-width: 560px; gap: 16px; }
  .vp-scene-stack > .vp-scene-square { width: 76%; }
  .vp-scene-stack > .vp-scene-square:last-child { width: 68%; }
  /* A tablet: the screens take nearly the whole width in a shallower recess. The conversation
     screen needs about 1000px to read at all (its grid scales with its width), so below that it
     goes, the way it does on a phone, rather than showing cropped. */
  [data-wall-page] .kw-stage { --stage-width: calc(100vw - 32px); --software-depth: 18px; }
  [data-wall-page] .kw-stage .kw-software-face { padding: 6px; }
  .vp-companion .vp-figure, .vp-session-head { display: none; }
}
@media (max-width: 760px) {
  /* A phone: the wall becomes a soft band above the words instead of sitting behind them. */
  .vp-hero { padding: 0 0 72px; }
  .vp-hero-art { position: relative; display: block; width: 100%; height: 220px; object-position: 70% center; }
  .vp-hero::after { background: linear-gradient(0deg, #fff 0%, rgba(255,255,255,0) 30%); top: 0; bottom: auto; height: 220px; }
  .vp-hero .kh-hero-copy { margin-top: -24px; }
  .vp-hero h1 { font-size: clamp(34px, 9vw, 44px); }
  .vp-hero .ev-intro { font-size: 17px; }
  .vp-meet-copy { max-width: none; margin-top: 24px; }
  .vp-meet-copy h2 { font-size: clamp(32px, 8.6vw, 40px); }
  .vp-meet-copy p:last-child { font-size: 17px; }
  .vp-moments { gap: 72px; margin-top: 48px; }
  .vp-moment, .vp-moment--flip { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .vp-moment .vp-still, .vp-moment--flip .vp-still { grid-column: 1; grid-row: 1; --pod-camera-offset: 0px; --well-depth: 20px; }
  .vp-moment .vp-moment-copy, .vp-moment--flip .vp-moment-copy { grid-column: 1; grid-row: 2; }
  .vp-moment-lead { font-size: 17px; }
  .vp-session-head { display: none; }
  /* A wide screen shrunk to a phone cannot be read, and Kept runs on a computer anyway. */
  [data-wall-page] .kw-stage, .vp-figure { display: none; }
  .vp-stage--wide .vp-stage-copy { margin-bottom: 0; }
}
@media (max-width: 600px) {
  .vp-pods--4 { --pods: 1; row-gap: 16px; }
  .vp-pods--4 > .kw-pod:nth-child(n) { --pod-camera-offset: 0px; }
  .vp-pods h3 { font-size: 19px; }
  /* A phone: the app screen takes nearly the whole width (a shallower recess reaching into the
     page margin), so the real interface is shown as large as the phone allows. */
  :is(#stages,#payoff) .kh-outcome-card.kw-pod.kw-ui-pod { --well-depth: 12px; margin-inline: -10px; }
  .vp-stage-list { gap: 72px; margin-top: 40px; }
  .vp-stage-lead { font-size: 17px; }
}