/* Your Visitors story, beats 4 to 6 (caption parts 3 to 5; 2 October 2026, section 2 rebuild, rounds 2 and 3 the same
   evening): the decision by text or voice, the right page, the booking. See sections/superstrate-world/story-visitors.html
   (figures world-story-v-beat--3 to --5) and world/story-visitors.js (beat4, beat5, beat6).

   Each picture is the "Your Business" website (the kit's .wsa-site, world-story-aura.css) with the new Aura over it, on
   the 880 x 372 stage. The kit draws every Aura surface; this file places them, and draws the few parts that are the
   scenes' own: the site scrolled to where each scene needs it, Growth's three lines, the booking cards' rows and the
   calendar entry.

   Aura is laid out as the product lays it out on a wide screen (layout/band.ts, aura.css .ak-band): a band along the
   bottom with the home in the centre, Go to and Go back in the left zone beside it, and the protected cards (the choice,
   the booking) in the right zone. That spreads Aura's words out instead of stacking them in one tall home. The band is
   laid out in the kit's units at the window's width over --wsv35-s (.76) and drawn at .76, so the home (368 wide) is 280
   of the 880 window, about a third, at the bottom centre; the smallest words (13.5 in the kit) draw at 11.4 screen px at
   1524 x 718 (the stage's fit is 1.11).

   The home is two layers, as the product builds it (surfaces/home.ts): the plate (.world-story-vc-plate, the body) and,
   on its top edge, the tabs and the signature line with the star (.world-story-vc-edge, a bare .wsa-home that draws no
   plate). The plate grows and shrinks with a clip on its top edge while the edge layer rides that edge with its top; nothing
   scales.

   Every picture is authored finished (no JavaScript, reduced motion): beat 4 speaking its answer, beat 5 on Packages with
   Growth marked and "Go back to where you were", beat 6 with the call confirmed in the right zone. */

/* ------------------------------------------------------------------ the frame */
/* setPan's picture frame (the shared .world-story-v-browser) is only a positioner here: the window is the kit's site. */
.world-story :is(.world-story-v-beat--3,.world-story-v-beat--4,.world-story-v-beat--5) .world-story-vc-frame{--wsv35-s:.76;background:none;border:0;box-shadow:none}
.world-story .world-story-vc-frame > .wsa-site{position:absolute;inset:0}
.world-story .world-story-vc-frame .wsa-site-page{overflow:hidden;overflow:clip}

/* ------------------------------------------------------------------ the site, scrolled */
/* Beat 4 shows the hero's headline at the top of the page (the nav scrolled away) and the packages under it; beats 5 and 6
   are on Packages, Growth's top just under the chrome. The script reads these to move the page in beat 5. */
.world-story .world-story-v-beat--3 .world-story-vc-frame .wsa-site-page > *{transform:translateY(-64px)}
.world-story :is(.world-story-v-beat--4,.world-story-v-beat--5) .world-story-vc-frame .wsa-site-page > *{transform:translateY(-234px)}
/* Growth, the package the visitor asked about: its three lines */
.world-story .world-story-vc-growth{position:relative}
.world-story .world-story-vc-incl{display:flex;flex-direction:column;gap:3px}
.world-story .world-story-vc-incl > span{position:relative;padding-left:14px;font-size:13.5px;line-height:1.3;color:var(--wsa-site-ink);white-space:nowrap}
.world-story .world-story-vc-incl > span::before{content:'';position:absolute;left:1px;top:.5em;width:5px;height:5px;border-radius:50%;background:var(--wsa-brand)}
/* the marks bracket Growth; their tag sits inside (the kit's .tag-inside, the product's mode when there is no room above),
   in the top right corner, clear of the package's name */
.world-story .world-story-vc-growth > .wsa-marks{inset:0}
.world-story .world-story-vc-growth > .wsa-marks.tag-inside .wsa-marks-tag{left:auto;right:8px;top:7px}

/* ------------------------------------------------------------------ Aura: the Crest, and the band (left zone, home, right zone) */
.world-story .world-story-vc-restpos{
 position:absolute;left:0;right:0;bottom:7px;display:flex;justify-content:center;pointer-events:none;
 scale:var(--wsv35-s);transform-origin:50% 100%;
}
.world-story .world-story-vc-band{
 position:absolute;left:0;bottom:7px;width:calc(880px / var(--wsv35-s));padding:0 16px;
 display:grid;grid-template-columns:minmax(0,1fr) 368px minmax(0,1fr);column-gap:24px;align-items:end;
 scale:var(--wsv35-s);transform-origin:0 100%;pointer-events:none;
}
.world-story .world-story-vc-left{grid-column:1;justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:8px;min-width:0}
.world-story .world-story-vc-home{grid-column:2;position:relative;min-width:0}
.world-story .world-story-vc-right{grid-column:3;justify-self:start;width:min(360px,100%);display:grid;grid-template-columns:minmax(0,1fr);min-width:0}
.world-story .world-story-vc-right > *{grid-area:1 / 1;align-self:end;width:100%;margin:0}
.world-story .world-story-vc-plate{width:100%}
.world-story .world-story-vc-edge{
 position:absolute;left:0;right:0;top:0;width:auto;height:0;margin:0;padding:0;
 background:none;border:0;box-shadow:none;pointer-events:none;
}
.world-story .world-story-vc-edge::before,.world-story .world-story-vc-edge::after{content:none}

/* ------------------------------------------------------------------ beat 4: finished, the answer spoken */
.world-story .world-story-v-beat--3 .world-story-vc-restpos{opacity:0;visibility:hidden}
.world-story .world-story-v-beat--3 .wsa-tab--earlier{visibility:hidden}
/* the label's index: 00 while Aura greets, 01 once the visitor asks (two words in one place) */
.world-story .world-story-v3-idx{display:inline-grid}
.world-story .world-story-v3-idx > span{grid-area:1 / 1}
.world-story .world-story-v3-idx > span:first-child{opacity:0}
/* the choice card in the right zone has had its answer */
.world-story .world-story-v3-choice{opacity:0;visibility:hidden}
/* Still speaking (polish round, 2 October 2026): while the finished picture holds, the ribbon goes on swelling with Aura's
   voice around its resting swell (.8, a scale of .844), as line.ts draws it while SPEAKING. The timeline marks the ribbon
   .world-story-v3-voice once its own swell has ended; the loop is the ribbon's own scale, so the compositor runs it (driven
   through a custom property it cost a layerize every frame), on the centred picture, never under the site's Pause or
   reduced motion. Without it the ribbon is the authored picture. */
@keyframes wsv35-voice{
 0%,100%{scale:1 .844;animation-timing-function:cubic-bezier(.37,0,.63,1)}
 8%{scale:1 .969;animation-timing-function:cubic-bezier(.37,0,.63,1)}
 17%{scale:1 .641;animation-timing-function:cubic-bezier(.37,0,.63,1)}
 25%{scale:1 .922;animation-timing-function:cubic-bezier(.37,0,.63,1)}
 34%{scale:1 .532;animation-timing-function:cubic-bezier(.37,0,.63,1)}
 42%{scale:1 .891;animation-timing-function:cubic-bezier(.37,0,.63,1)}
 50%{scale:1 .719;animation-timing-function:cubic-bezier(.37,0,.63,1)}
 59%{scale:1 1;animation-timing-function:cubic-bezier(.37,0,.63,1)}
 67%{scale:1 .61;animation-timing-function:cubic-bezier(.37,0,.63,1)}
 76%{scale:1 .875;animation-timing-function:cubic-bezier(.37,0,.63,1)}
 84%{scale:1 .501;animation-timing-function:cubic-bezier(.37,0,.63,1)}
 92%{scale:1 .938;animation-timing-function:cubic-bezier(.37,0,.63,1)}
}
@media (prefers-reduced-motion:no-preference){
 body:not([data-motion-paused="true"]) .world-story .world-story-v.is-open:not(.is-static) .world-story-v-beat--3.is-current .world-story-vc-edge.is-speaking .world-story-v3-voice{animation:wsv35-voice 2.6s linear infinite}
}

/* ------------------------------------------------------------------ beat 5: finished, on Packages, Go back offered */
.world-story .world-story-v4-ex{display:none}
.world-story .world-story-v4-gos{display:grid;justify-items:end}
.world-story .world-story-v4-gos > *{grid-area:1 / 1}
.world-story .world-story-v4-go{opacity:0;visibility:hidden}

/* ------------------------------------------------------------------ beat 6: finished, the call confirmed */
.world-story .world-story-v5-offer{display:none}
.world-story .world-story-v5-says{display:grid}
.world-story .world-story-v5-says > *{grid-area:1 / 1}
.world-story .world-story-v5-says > .is-cover{opacity:0}
.world-story .world-story-v5-cards > :not(.world-story-v5-done){display:none}
/* the days: five leaves on one row */
.world-story .world-story-v5-head{display:flex;align-items:center;gap:10px}
.world-story .world-story-v5-days .world-story-v5-head{justify-content:space-between}
.world-story .world-story-v5-range{font:500 13.5px/1 var(--wsa-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--wsa-muted)}
.world-story .world-story-v5-days .wsa-days{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
/* the times for Tue 13: the day picked beside the month and the time zone; five times, 10:30 am picked */
.world-story .world-story-v5-back{flex:none;display:grid;place-items:center;width:24px;height:44px;color:var(--wsa-muted)}
.world-story .world-story-v5-back svg{display:block}
.world-story .world-story-v5-head > .wsa-day{flex:none;min-height:0;width:54px;height:54px;padding:0;gap:3px}
.world-story .world-story-v5-head > .wsa-day span{font-size:19px}
.world-story .world-story-v5-month{display:flex;flex-direction:column;gap:4px;min-width:0}
.world-story .world-story-v5-month > b{font-size:16px;font-weight:600;line-height:1.2;color:var(--wsa-ink)}
.world-story .world-story-v5-times .wsa-times{grid-template-columns:repeat(3,minmax(0,1fr))}
/* the protected fields: three in a row (their values are skeleton bars), the protected-fields line, Submit and Skip */
.world-story .world-story-v5-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.world-story .world-story-v5-fields .wsa-field-value{padding:0 10px}
.world-story .world-story-v5-form .wsa-card-actions{justify-content:flex-end}
/* the booking system's confirmation: a calendar entry for the call, its date as a small leaf in the brand */
.world-story .world-story-v5-entry{display:flex;align-items:center;gap:14px}
.world-story .world-story-v5-entry > .wsa-day{flex:none;min-height:0;width:58px;height:58px;padding:0;gap:3px}
.world-story .world-story-v5-entry > .wsa-day span{font-size:20px}
.world-story .world-story-v5-entry-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.world-story .world-story-v5-entry-text > b{font-size:16.5px;font-weight:600;line-height:1.2;color:var(--wsa-ink);white-space:nowrap}
.world-story .world-story-v5-entry-text > span{font-size:15px;line-height:1.25;color:var(--wsa-muted);white-space:nowrap}
.world-story .world-story-v5-entry-text > .world-story-v5-entry-state{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:500;color:var(--wsa-ink)}
.world-story .world-story-v5-entry-state > svg{flex:none}
/* its tick, drawn on by the timeline as the entry settles (stroke-dashoffset 1 to 0 along a pathLength of 1); drawn here */
.world-story .world-story-v5-tick{stroke-dasharray:1}

/* ------------------------------------------------------------------ the strip */
/* What first appears mid-scene waits at opacity 0 on its own layer (the script keeps it visible), so it is rastered before
   its moment rather than on it. */
.world-story .world-story-v-live :is(.world-story-v-beat--3,.world-story-v-beat--4,.world-story-v-beat--5) :is(.world-story-vc-edge,.world-story-vc-right > *,.world-story-v4-gos > .wsa-go,.world-story-v5-offer){will-change:opacity}