/* world-story-business.css: the homepage story section's "your business" story (26 September 2026; rounds 2 to 5 the same
   day). See src/views/sections/superstrate-world/story-business.html and world/story-business.js.

   Five pictures of the real admin console (apps/admin in the product repo: admin.css, byb-tokens.css, components/, pages/),
   drawn as HTML replicas on the section's black ground (#1e1e1a with the site's noise; the shell paints it): the admin's own
   colours, radii, 1px borders, badges, buttons and card anatomy, set in DM Sans at the admin's own sizes times --b-s (its
   --sst-type-scale idea; 1 here: every picture is designed in a 900x380 box and the script scales it to the viewport, about
   480px tall at 1524x718, so about 1.24; the site ships no Teko, Space Grotesk, Kanit or Inter). The product UI keeps its
   light look; what sits straight on the ground (the page label above each card, the sample-data note, the Notable Trends
   heading, the thread) is white. Two deliberate departures, both the site's rulings for its venue page replicas: status
   text is darkened within its hue where the admin pair falls under 4.5:1 (danger #c93b30 -> #b8352b, warn #b86b00 ->
   #a05d00, active #2f8b4a -> #2a7b41), and the admin's 3px coloured left rules become full 1px borders.

   Two layouts:
   - Without JavaScript (the default): the shell stacks and centres the beats; each picture is in its finished state. Anything
     that only exists before a picture finishes is marked [data-b-pre] and is not displayed.
   - With JavaScript (story-business.js adds .is-b-live to the track): one horizontal strip. setPan() moves it (--b-x, whole
     pixels) and sets each picture's place in the flow (--b-focus and --b-z: a picture a beat away keeps 70% of its strength
     and steps back to 96% of its size; the centred one is at full strength and exactly scale 1); the timeline moves the
     state variables below, and every picture is drawn from them, so any point of the timeline, forwards or backwards, is a
     complete frame. Measured sizes (--b-fit, --b-w-*, --b-h-*, --b-d*, --b-t*) come from the script's layout pass; until it
     has run, the rules that use them fall back to plain auto layout.
   State variables (their defaults here are the finished state): --b-in (appearing parts), --b-hl (the gold "look here"),
   --b-press and --b-rel (a button press and its release), --b-g (the Content Gaps card: 0 needs input, 1 editing, 2 ready), --b-toast, --b-field and
   --b-caret (a text field in use), --b-k (a rolling count), --b-rank (the bucket order), --b-m (materiality), --b-ns (the
   lead's note: 0 editing, 1 saved), --b-st (the lead: 0 new, 1 contacted), --b-pulse (All clear's one ring), --b-drawn (a
   thread's travelling dot may run).
   Idle life, only in the centred picture (.is-b-centre, from setPan) and never under the site's Pause or reduced motion: the
   caret blinks, and a dot travels each thread that touches the picture (.is-b-flow). */

.world-story [data-story="business"]{
 --b-s:1;
 --b-ink:#030303;--b-muted:#525252;--b-subtle:#5f5f5f;
 --b-border:#e3e3e3;--b-rule:#ececec;--b-rule-strong:#d8d8d8;--b-inset:#f1f1f3;--b-foot:#fafafa;
 --b-gold:#ffd700;
 --b-active:#2a7b41;--b-active-line:#2f8b4a;--b-active-bg:#e8f3ec;
 --b-warn:#a05d00;--b-warn-line:#b86b00;--b-warn-bg:#fbf1e0;
 --b-danger:#b8352b;--b-danger-bg:#fbe9e7;
 --b-info:#0752c5;--b-info-bg:#e7eefb;
 --b-violet:#7c3aed;
 --b-bar:#e6e6e9;--b-bar-well:#dadadf;
 /* On the black ground: white, and white-muted (the hero's own --ink-muted on #1e1e1a). */
 --b-on-ground:#fff;--b-on-ground-muted:rgb(255 255 255 / .72);
 /* The thread: the Superstrate logo's yellow (the brand README's star, #FFD700; the owner, 2 October 2026), every part of it:
    the dots, the riding dot, the end dots, the landing ring and the travelling dot. */
 --b-link:#ffd700;
 /* Its casing (polish round, 2 October 2026): the ground's own ink, a 1px ring under every dot. On the black ground it is the
    ground, so the thread looks exactly as before; where a thread starts inside a white card it outlines each dot. */
 --b-link-case:#1e1e1a;
 --b-shadow:0 2px 6px rgb(0 0 0 / .22),0 22px 50px rgb(0 0 0 / .42);
 --b-pic-w:900px;--b-pic-h:380px;
}

/* ------------------------------------------------------------------ the strip */
/* setPan() writes these two every frame. They are only ever read by the element that carries them, so they are registered as
   not inherited: a pan or a focus change restyles that one element, not every node inside the pictures. */
@property --b-x{syntax:'<length>';inherits:false;initial-value:0px}
@property --b-focus{syntax:'<number>';inherits:false;initial-value:1}
@property --b-z{syntax:'<number>';inherits:false;initial-value:1}
/* Without JavaScript the shell (world-story.css) stacks the beats and centres them; each one is its finished picture. */
.world-story .world-story-b-beat{--b-focus:1;position:relative;margin:0;max-width:100%}
.world-story .world-story-b-track:not(.is-b-live) > .world-story-b-beat{width:var(--b-pic-w)}
@media (max-width:960px){.world-story .world-story-b-track:not(.is-b-live) > .world-story-b-beat{overflow-x:auto;padding-bottom:40px}}
.world-story .world-story-b-pic{position:relative;width:var(--b-pic-w);height:var(--b-pic-h);font-family:var(--ff-body,'DM Sans',sans-serif);font-size:14px;line-height:1.35;letter-spacing:0;color:var(--b-ink);text-align:left}
.world-story .world-story-b-track:not(.is-b-live) [data-b-pre]{display:none}

/* With JavaScript: the strip. The shell's track geometry, restated so the story also stands on its own; a slot per beat, the
   first one centred by the start padding (a percentage of the viewport), 180 design pixels between two (story-business.js
   GAP). --b-x (whole pixels, from setPan) moves the track; --b-fit scales every picture to the viewport (the script
   measures it, up to 1.35). The pictures scale with a transform inside the track's layer, which Chrome paints at the final
   size, so the text stays sharp. The flow (the section's shared grammar): a picture a beat or more from the centre keeps 70%
   of its strength (--b-focus 0; the owner, round 3: 42% read as grey on the black) and steps back to 96% of its size about
   its centre (--b-z); the centred one comes forward, at full strength and exactly scale 1. */
.world-story .world-story-b-track.is-b-live{
 --b-slot:calc(var(--b-pic-w) * var(--b-fit,1));--b-gap:calc(180px * var(--b-fit,1));
 position:absolute;top:0;bottom:0;left:0;display:flex;align-items:center;gap:var(--b-gap);width:max-content;
 padding:0 calc(50% - var(--b-slot) / 2);
 transform:translate3d(var(--b-x),0,0);
}
.world-story .world-story-b-track.is-b-live > .world-story-b-beat{
 flex:none;width:var(--b-slot);max-width:none;height:calc(var(--b-pic-h) * var(--b-fit,1));
 opacity:calc(.7 + .3 * var(--b-focus,1));transform:scale(var(--b-z,1));transform-origin:50% 50%;
}
/* While the story is open, the strip and each picture are their own compositor layers, so a pan or a dimming step moves
   pixels already painted instead of repainting the pictures. */
.world-story .world-story-reel.is-open .world-story-b-track.is-b-live{will-change:transform}
.world-story .world-story-reel.is-open .world-story-b-track.is-b-live > .world-story-b-beat{will-change:opacity}
.world-story .world-story-b-track.is-b-live .world-story-b-pic{position:absolute;left:0;top:0;transform:scale(var(--b-fit,1));transform-origin:0 0}

/* ------------------------------------------------------------------ picture frame: page label, illustrative note */
.world-story .world-story-b-in{display:flex;flex-direction:column;margin:0 auto}
.world-story .world-story-b-in--conv{width:860px}
.world-story .world-story-b-in--gap{width:700px}
.world-story .world-story-b-in--unmet{width:660px}
.world-story .world-story-b-cols{flex-direction:row;align-items:flex-start;gap:36px;width:var(--b-pic-w)}
.world-story .world-story-b-col{display:flex;flex-direction:column;min-width:0}
.world-story .world-story-b-col--trend,.world-story .world-story-b-col--drawer{width:432px}
.world-story .world-story-b-col--lead{--b-st:1;width:476px}
.world-story .world-story-b-col--overview{width:388px}
/* The sidebar item the picture belongs to (Sidebar.tsx: its label and its icon), and the venue page's sample-data note. They
   sit on the ground, above the cards: white, and white-muted. */
.world-story .world-story-b-where{--b-nav:15px;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:30px;margin:0 0 8px}
.world-story .world-story-b-nav{display:inline-flex;align-items:center;gap:9px;font-size:var(--b-nav);font-weight:600;line-height:1;color:var(--b-on-ground);white-space:nowrap}
.world-story .world-story-b-nav .world-story-b-ico{width:17px;height:17px}
.world-story .world-story-b-note{display:inline-flex;align-items:center;font-size:13px;font-weight:500;line-height:1.3;color:var(--b-on-ground-muted);white-space:nowrap}
/* With JavaScript the rows are set in screen pixels, whatever fit the picture is drawn at, so they match the visitors
   story's rows (world-story-visitors.css .world-story-v-where): a 20px icon, 10px, the 18px title, 14px, the 12px link, and
   the 15px note at the far end, in a 28px row 10px above its card. In picture 5 both rows are as tall as the Leads tabs, so
   the two cards start level. */
.world-story .world-story-b-track.is-b-live .world-story-b-where{--b-nav:calc(18px / var(--b-fit,1));gap:calc(14px / var(--b-fit,1));min-height:calc(28px / var(--b-fit,1));margin-bottom:calc(10px / var(--b-fit,1))}
.world-story .world-story-b-track.is-b-live .world-story-b-nav{gap:calc(10px / var(--b-fit,1))}
.world-story .world-story-b-track.is-b-live .world-story-b-nav .world-story-b-ico{width:calc(20px / var(--b-fit,1));height:calc(20px / var(--b-fit,1))}
.world-story .world-story-b-track.is-b-live .world-story-b-note{font-size:calc(15px / var(--b-fit,1))}
.world-story .world-story-b-track.is-b-live .world-story-b-in--lead .world-story-b-where{min-height:33px}
.world-story .world-story-b-note > span + span::before{content:"";display:inline-block;width:4px;height:4px;margin:0 8px;border-radius:50%;background:currentColor;vertical-align:middle}
/* Beside the label, "Explore feature" and the site's up-right arrow (the venue page's feature links): it opens the matching
   feature on /features in a new tab. It looks and behaves as the visitors story's link does: small enough never to compete
   with the label, 12px on screen (its size is divided by the fit the picture is scaled by, kept between 9 and 12 design
   pixels; 12px without JavaScript), weight 500, white at 70%. Hover and keyboard focus bring it to full white, grow the
   site's underline under the words (.45s) and step the arrow up and right; a press settles it back half a step. The focus
   ring is Back's: 2px white, 3px out, on screen. It sits right after the label, on the label's baseline (DM Sans's baseline
   sits .34em below the middle of its line, so a smaller size centred in the same row is lowered by .34 of the difference);
   the note or the Leads tabs keep the far end of the row. Its box is 24px tall (28px on screen) with the same negative
   margin, so the target is large enough and the row does not move. The one live thing in a picture: the drawing around it
   is aria-hidden, the link is not (story-business.html); its accessible name goes on in a visually hidden span, as in the
   visitors story. */
.world-story .world-story-b-explore{
 position:relative;top:calc(.34 * (var(--b-nav,15px) - 1em));display:inline-flex;align-items:center;gap:.3em;min-height:24px;margin-block:-6px;margin-right:auto;
 font-size:clamp(9px, calc(12px / var(--b-fit,1)), 12px);font-weight:500;line-height:1;white-space:nowrap;
 color:rgb(255 255 255 / .7);text-decoration:none;transition:color .2s ease;
}
.world-story .world-story-b-explore-text{background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 calc(1px / var(--b-fit,1));transition:background-size .45s cubic-bezier(.22,1,.36,1)}
.world-story .world-story-b-explore:is(:hover,:focus-visible){color:#fff}
.world-story .world-story-b-explore:is(:hover,:focus-visible) .world-story-b-explore-text{background-size:100% calc(1px / var(--b-fit,1))}
.world-story .world-story-b-explore:active{color:rgb(255 255 255 / .85)}
.world-story .world-story-b-explore:focus-visible{outline:calc(2px / var(--b-fit,1)) solid #fff;outline-offset:calc(3px / var(--b-fit,1));border-radius:2px}
.world-story .world-story-b-arrow{flex:none;width:.85em;height:.85em;fill:none;stroke:currentColor;stroke-width:1.75;transition:transform .25s cubic-bezier(.22,1,.36,1)}
.world-story .world-story-b-track.is-b-live .world-story-b-explore{gap:calc(5px / var(--b-fit,1))}
.world-story .world-story-b-track.is-b-live .world-story-b-arrow{width:calc(11px / var(--b-fit,1));height:calc(11px / var(--b-fit,1))}
.world-story .world-story-b-explore:is(:hover,:focus-visible) .world-story-b-arrow{transform:translate(calc(1.5px / var(--b-fit,1)),calc(-1.5px / var(--b-fit,1)))}
.world-story .world-story-b-explore:active .world-story-b-arrow{transform:translate(calc(.75px / var(--b-fit,1)),calc(-.75px / var(--b-fit,1)))}
.world-story .world-story-b-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ------------------------------------------------------------------ admin primitives (admin.css .sst-*) */
.world-story .world-story-b-ico{flex:none;width:calc(15px * var(--b-s));height:calc(15px * var(--b-s));fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.world-story .world-story-b-ico.is-tiny{width:calc(12px * var(--b-s));height:calc(12px * var(--b-s))}
.world-story .world-story-b-card{position:relative;background:#fff;border:1px solid var(--b-border);border-radius:6px;color:var(--b-ink)}
.world-story :is(.world-story-b-in,.world-story-b-col) > :is(.world-story-b-card,.world-story-b-drawer){box-shadow:var(--b-shadow)}
.world-story .world-story-b-head{display:flex;align-items:center;gap:12px;min-width:0;padding:14px 18px;border-bottom:1px solid var(--b-rule)}
.world-story .world-story-b-title{font-size:calc(15px * var(--b-s));font-weight:600;line-height:1.3;letter-spacing:-.01em;white-space:nowrap}
.world-story .world-story-b-eyebrow{font-size:calc(12px * var(--b-s));font-weight:600;line-height:1;letter-spacing:.05em;text-transform:uppercase;color:var(--b-subtle);white-space:nowrap}
.world-story .world-story-b-head > .world-story-b-eyebrow{margin-right:6px}
.world-story .world-story-b-eyebrow.is-block{display:block;margin:0 0 7px}
.world-story .world-story-b-eyebrow.is-gap{margin-top:14px}
.world-story .world-story-b-actions{position:relative;display:flex;align-items:center;gap:8px;margin-left:auto}
.world-story .world-story-b-body{padding:18px}
.world-story .world-story-b-foot{padding:12px 18px;border-top:1px solid var(--b-rule);border-radius:0 0 5px 5px;background:var(--b-foot)}
.world-story .world-story-b-meta{font-size:calc(12px * var(--b-s));font-weight:500;line-height:1.35;color:var(--b-subtle)}
.world-story .world-story-b-p{margin:0;font-size:calc(14px * var(--b-s));line-height:1.55;color:var(--b-muted)}
/* InfoHint: the "?" ring. */
.world-story .world-story-b-hint{display:inline-grid;place-items:center;flex:none;width:15px;height:15px;margin-left:6px;border:1px solid var(--b-rule-strong);border-radius:999px;font-size:10px;font-weight:700;line-height:1;color:var(--b-subtle)}
.world-story .world-story-b-head > .world-story-b-hint{margin-left:-6px}
/* Buttons. A press is --b-press (0 to 1: the admin's own 1px press, with the site's gold ring closing round the button),
   then the release, --b-rel (0 to 1): the button is back up within the first third of it, and the ring opens out to 8px
   and fades, as the thread's landing ring does (delight pass, 2 October 2026). Both rest at 0 or both at 1, which look the
   same: an untouched button. */
.world-story .world-story-b-btn{
 --b-press:0;--b-rel:0;--b-held:calc(var(--b-press) * (1 - min(1, var(--b-rel) * 3)));
 display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 14px;
 border:1px solid transparent;border-radius:5px;background:transparent;font-size:calc(13px * var(--b-s));font-weight:600;line-height:1;color:var(--b-ink);white-space:nowrap;
 transform:translateY(calc(var(--b-held) * 1px)) scale(calc(1 - var(--b-held) * .03));
 box-shadow:0 0 0 calc(var(--b-press) * 3px + var(--b-rel) * 5px) rgb(255 215 0 / calc(var(--b-press) * .6 * (1 - var(--b-rel))));
}
.world-story .world-story-b-btn.is-sm{gap:6px;padding:6px 10px;border-radius:4px;font-size:calc(12px * var(--b-s))}
.world-story .world-story-b-btn.is-primary{background:var(--b-gold);border-color:rgb(0 0 0 / .85)}
.world-story .world-story-b-btn.is-dark{background:var(--b-ink);border-color:var(--b-ink);color:#fff}
.world-story .world-story-b-btn.is-outline{background:#fff;border-color:var(--b-border)}
.world-story .world-story-b-btn.is-icon{padding:6px}
.world-story .world-story-b-btn.world-story-b-flush{align-self:flex-start}
/* A ghost button that follows text (View evidence, View in FAQ & Research, Edit note) has no visible box, so its label lines
   up with the text above it, not its padding (polish round, 2 October 2026: they sat 11px in). */
.world-story .world-story-b-btn.is-ghost.is-sm.world-story-b-flush{margin-left:-11px}
/* Prose in the pictures breaks without a lone word on its last line (the Overview tiles' notes, the callout, the hints). */
.world-story [data-story="business"] :is(.world-story-b-meta,.world-story-b-callout > span,.world-story-b-fhint,.world-story-b-bline,.world-story-b-p,.world-story-b-inset,.world-story-b-answer){text-wrap:pretty}
.world-story .world-story-b-row{display:flex;align-items:center;gap:6px}
/* Badges (.sst-badge): caps, a leading dot in the text colour unless the product drops it. */
.world-story .world-story-b-badge{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:calc(22px * var(--b-s));padding:4px 8px;border-radius:4px;background:#ececec;font-size:calc(10.5px * var(--b-s));font-weight:600;line-height:1;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:var(--b-muted)}
.world-story .world-story-b-dot{flex:none;width:6px;height:6px;border-radius:999px;background:currentColor}
.world-story .world-story-b-badge.is-warn{background:var(--b-warn-bg);color:var(--b-warn)}
.world-story .world-story-b-badge.is-danger{background:var(--b-danger-bg);color:var(--b-danger)}
.world-story .world-story-b-badge.is-info{background:var(--b-info-bg);color:var(--b-info)}
.world-story .world-story-b-badge.is-outline{border:1px solid var(--b-border);background:transparent;color:var(--b-muted)}
.world-story .world-story-b-badge.is-count{gap:.34em}
/* Chips (.sst-chip) and the "Worth noticing" flag this story follows. */
.world-story .world-story-b-chip{display:inline-flex;align-items:center;min-height:calc(22px * var(--b-s));padding:4px 9px;border:1px solid var(--b-border);border-radius:999px;background:var(--b-foot);font-size:calc(11.5px * var(--b-s));font-weight:500;line-height:1;color:var(--b-muted);white-space:nowrap}
.world-story .world-story-b-chip.is-flag{box-shadow:0 0 0 calc(var(--b-hl,1) * 3px) rgb(255 215 0 / calc(var(--b-hl,1) * .65))}
/* What a conversation revealed resolves just after its row arrives. */
.world-story .world-story-b-conv .world-story-b-chip{opacity:var(--b-in,1);scale:calc(.96 + .04 * var(--b-in,1))}
/* Text bars: stand-ins for words the product would print from a real visitor or business (names, dates, topics). */
.world-story .world-story-b-bar{display:inline-block;width:var(--w,4em);max-width:100%;height:.62em;border-radius:3px;background:var(--b-bar);vertical-align:middle}
.world-story .world-story-b-bar.is-sm{height:.5em}
.world-story :is(.world-story-b-inset,.world-story-b-bline,.world-story-b-box) > .world-story-b-bar{display:block;margin:.5em 0}
.world-story .world-story-b-inset > .world-story-b-bar{background:var(--b-bar-well)}
/* A field (.sst-field, .sst-input, .sst-textarea); --b-field is its focus (the admin's ink border). */
.world-story .world-story-b-field{display:flex;flex-direction:column;gap:6px}
.world-story .world-story-b-field + .world-story-b-field{margin-top:14px}
.world-story .world-story-b-label{font-size:calc(10.5px * var(--b-s));font-weight:600;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:var(--b-muted)}
.world-story .world-story-b-input{position:relative;display:block;padding:9px 12px;border:1px solid var(--b-border);border-radius:5px;background:#fff;font-size:calc(14px * var(--b-s));line-height:1.35;color:var(--b-ink)}
.world-story .world-story-b-input.is-area{min-height:calc(54px * var(--b-s))}
.world-story [data-b-focusfield]{--b-field:0;--b-caret:0;border-color:color-mix(in srgb,var(--b-ink) calc(var(--b-field) * 100%),var(--b-border))}
.world-story .world-story-b-fhint{font-size:calc(12px * var(--b-s));line-height:1.35;color:var(--b-subtle)}
.world-story .world-story-b-ph{position:absolute;inset:9px 12px auto;color:var(--b-subtle)}
/* The caret: steady while its field is in use; it blinks only in the centred picture (motion preferences, at the end). */
.world-story .world-story-b-caret{display:inline-block;width:1.5px;height:1.15em;margin-left:1px;background:var(--b-ink);vertical-align:text-bottom;opacity:var(--b-caret,0)}
@keyframes world-story-b-blink{50%{visibility:hidden}}
/* A warn callout (.sst-callout--warn), with a full border for the admin's 3px left rule. */
.world-story .world-story-b-callout{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--b-warn-line);border-radius:4px;background:var(--b-warn-bg);font-size:calc(13.5px * var(--b-s));line-height:1.45;color:var(--b-ink)}
.world-story .world-story-b-callout strong{font-weight:700}
/* An inset well holding prose (the answer, "What they wanted", "In their words"). */
.world-story :is(.world-story-b-answer,.world-story-b-inset){margin:0;padding:10px 12px;border:1px solid var(--b-rule);border-radius:4px;background:var(--b-inset);font-size:calc(14px * var(--b-s));line-height:1.55;color:var(--b-muted)}
/* A stack: layers sharing one grid cell, crossfaded by their state variable (so nothing reflows between states). */
.world-story .world-story-b-stack{display:grid}
.world-story .world-story-b-stack > *{grid-area:1 / 1;align-self:start;min-width:0}
.world-story .world-story-b-swap{display:inline-grid;justify-items:start;align-items:center}
.world-story .world-story-b-swap > *{grid-area:1 / 1}

/* ------------------------------------------------------------------ 1. Conversations */
.world-story .world-story-b-conv .world-story-b-head{padding:12px 18px}
.world-story .world-story-b-search{display:inline-flex;align-items:center;gap:8px;width:calc(240px * var(--b-s));height:calc(30px * var(--b-s));padding:0 10px;border:1px solid var(--b-border);border-radius:5px;background:#fff;font-size:calc(13px * var(--b-s));color:var(--b-subtle)}
.world-story .world-story-b-search .world-story-b-ico{width:calc(13px * var(--b-s));height:calc(13px * var(--b-s));color:var(--b-subtle)}
.world-story .world-story-b-table{overflow:hidden;border-radius:0 0 5px 5px}
.world-story .world-story-b-tr{display:grid;grid-template-columns:1fr 1fr 1.25fr 1.1fr;align-items:center;border-bottom:1px solid var(--b-rule);font-size:calc(13.5px * var(--b-s));line-height:1.35}
.world-story .world-story-b-tr > *{min-width:0;padding:11px 16px}
.world-story .world-story-b-tr.is-head{border-bottom-color:var(--b-rule-strong);background:var(--b-foot);font-size:calc(10.5px * var(--b-s));font-weight:600;line-height:1;letter-spacing:.09em;text-transform:uppercase;color:var(--b-subtle)}
.world-story .world-story-b-tr.is-head > *{padding:11px 16px}
.world-story .world-story-b-tr:last-child{border-bottom:0}
.world-story [data-b-row]{opacity:var(--b-in,1);transform:translateY(calc((1 - var(--b-in,1)) * 10px))}
.world-story .world-story-b-tr.is-focus{--b-hl:1;background:rgb(241 241 243 / var(--b-hl))}
.world-story .world-story-b-when{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.world-story .world-story-b-when .world-story-b-meta{font-size:calc(12px * var(--b-s))}
.world-story .world-story-b-none{color:var(--b-subtle)}

/* ------------------------------------------------------------------ 2. Content Gaps */
.world-story .world-story-b-gap{
 --b-g:2;--b-toast:1;
 --b-o1:clamp(0, calc(1 - 2 * var(--b-g)), 1);
 --b-o2:clamp(0, min(calc(2 * var(--b-g) - 1), calc(3 - 2 * var(--b-g))), 1);
 --b-r:clamp(0, calc(2 * var(--b-g) - 3), 1);
}
.world-story .world-story-b-gap .world-story-b-noans{position:absolute;right:0}
/* The question's badges arrive as the thread lands (Asked 3x, No answer yet); then the callout, already faintly there, comes
   up to full ("We need this from you"), so the card never shows an empty band. */
.world-story .world-story-b-gap .world-story-b-badge{opacity:var(--b-in,1);scale:calc(.96 + .04 * var(--b-in,1))}
.world-story .world-story-b-gap .world-story-b-callout{opacity:calc(.3 + .7 * var(--b-in,1));transform:translateY(calc((1 - var(--b-in,1)) * 6px))}
.world-story .world-story-b-gaprow{margin-top:14px}
.world-story .world-story-b-select{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:calc(12px * var(--b-s));font-weight:500;color:var(--b-subtle)}
.world-story .world-story-b-check{width:13px;height:13px;border:1px solid #767676;border-radius:2px;background:#fff}
/* The toast: the admin's dark toast, below the card on the ground; a faint light edge keeps its shape on the black. */
.world-story .world-story-b-toast{
 position:absolute;right:-28px;bottom:-60px;z-index:2;display:flex;align-items:center;gap:14px;padding:10px 12px 10px 16px;
 border-radius:7px;background:var(--b-ink);box-shadow:0 0 0 1px rgb(255 255 255 / .2),0 10px 28px rgb(0 0 0 / .4);font-size:calc(13px * var(--b-s));font-weight:500;line-height:1.3;color:#fff;white-space:nowrap;
 opacity:var(--b-toast,1);transform:translateY(calc((1 - var(--b-toast,1)) * 12px)) scale(calc(.97 + .03 * var(--b-toast,1)));transform-origin:100% 100%;
}
/* Its close mark, drawn as the Your Business card's toast draws it (no glyph). */
.world-story .world-story-b-x{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;opacity:.85}
/* The card's states (JavaScript only; without it the Ready card is simply drawn). */
.world-story .is-b-live .world-story-b-gap [data-b-w="need"]{opacity:calc(1 - var(--b-r))}
.world-story .is-b-live .world-story-b-gap [data-b-w="ready"]{opacity:var(--b-r)}
.world-story .is-b-live .world-story-b-gap [data-b-slot="eyebrow"]{width:calc(var(--b-w-need) + (var(--b-w-ready) - var(--b-w-need)) * var(--b-r))}
.world-story .is-b-live .world-story-b-gap .world-story-b-noans{opacity:calc((1 - var(--b-r)) * var(--b-in,1))}
.world-story .is-b-live .world-story-b-gap .world-story-b-asked{transform:translateX(calc(var(--b-w-na,0px) * (var(--b-r) - 1)))}
.world-story .is-b-live .world-story-b-gapbody{overflow:hidden;height:calc(var(--b-h1) + (var(--b-h2) - var(--b-h1)) * clamp(0, var(--b-g), 1) + (var(--b-h3) - var(--b-h2)) * clamp(0, calc(var(--b-g) - 1), 1))}
.world-story .is-b-live .world-story-b-gapbody > [data-b-h="1"]{opacity:var(--b-o1)}
.world-story .is-b-live .world-story-b-gapbody > [data-b-h="2"]{opacity:var(--b-o2)}
.world-story .is-b-live .world-story-b-gapbody > [data-b-h="3"]{opacity:var(--b-r)}
.world-story .is-b-live .world-story-b-rowa{opacity:max(var(--b-o1), var(--b-r))}
.world-story .is-b-live .world-story-b-rowb{opacity:var(--b-o2)}
.world-story .is-b-live .world-story-b-approve{opacity:calc(.5 + .5 * var(--b-r))}
.world-story .is-b-live .world-story-b-gap [data-b-slot="addedit"]{width:calc(var(--b-w-add) + (var(--b-w-edit) - var(--b-w-add)) * var(--b-r))}
.world-story .is-b-live .world-story-b-gap [data-b-w="add"]{opacity:calc(1 - var(--b-r))}
.world-story .is-b-live .world-story-b-gap [data-b-w="edit"]{opacity:var(--b-r)}

/* ------------------------------------------------------------------ 3. Unmet Demand */
.world-story .world-story-b-unmet{--b-rank:0;--b-m:1}
.world-story .world-story-b-buckets{display:flex;flex-direction:column;gap:10px}
.world-story .world-story-b-bucket{display:flex;flex-direction:column;padding:12px;border:1px solid var(--b-rule);border-radius:5px;background:var(--b-inset)}
.world-story .world-story-b-bucket.is-rise{--b-k:4;--b-hl:1;position:relative;z-index:1;box-shadow:0 0 0 calc(var(--b-hl) * 2px) rgb(255 215 0 / calc(var(--b-hl) * .6))}
.world-story .world-story-b-bhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 6px}
.world-story .world-story-b-btitle{font-size:calc(14px * var(--b-s));font-weight:600;line-height:1.3;white-space:nowrap}
.world-story .world-story-b-badges{display:flex;align-items:center;gap:6px}
.world-story .world-story-b-bline{margin:0;font-size:calc(13px * var(--b-s));line-height:1.45;color:var(--b-subtle)}
.world-story .world-story-b-bucket .world-story-b-flush{margin-top:4px}
/* A rolling count: the values share one cell; --b-k is the index shown (0 to 4, 5 to 9). The cell is a window (clipped
   above and below, never at the sides), so each request rolls the next figure up into it like a counter's wheel and the
   last one out of it (delight pass, 2 October 2026; it used to cross-fade through a short shift). */
.world-story .world-story-b-roll{display:inline-grid;font-variant-numeric:tabular-nums;clip-path:inset(0 -.2em)}
.world-story .world-story-b-roll > span{grid-area:1 / 1;opacity:clamp(0, calc(2 - 2 * max(calc(var(--b-k) - var(--i)), calc(var(--i) - var(--b-k)))), 1);transform:translateY(calc((var(--i) - var(--b-k)) * 100%))}
.world-story .world-story-b-roll > :nth-child(1){--i:0}
.world-story .world-story-b-roll > :nth-child(2){--i:1}
.world-story .world-story-b-roll > :nth-child(3){--i:2}
.world-story .world-story-b-roll > :nth-child(4){--i:3}
.world-story .world-story-b-roll > :nth-child(5){--i:4}
.world-story .is-b-live [data-b-bucket="a"]{transform:translateY(calc(var(--b-dA,0px) * var(--b-rank)))}
.world-story .is-b-live [data-b-bucket="b"]{transform:translateY(calc(var(--b-dB,0px) * var(--b-rank)))}
.world-story .is-b-live .world-story-b-mswap > [data-b-pre]{opacity:calc(1 - var(--b-m))}
.world-story .is-b-live .world-story-b-mswap > [data-b-post]{opacity:var(--b-m)}

/* ------------------------------------------------------------------ 4. Notable Trends and the conversation behind them */
.world-story .world-story-b-h3{margin:0 0 12px;font-size:calc(16px * var(--b-s));font-weight:700;line-height:1.2;letter-spacing:-.01em;color:var(--b-on-ground)}
.world-story .world-story-b-tbody{display:flex;flex-direction:column;padding:18px}
.world-story .world-story-b-trow{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 10px}
.world-story .world-story-b-ttitle{display:block;font-size:calc(15px * var(--b-s));font-weight:600;line-height:1.3}
.world-story .world-story-b-tsub{display:block;margin-top:2px;font-size:calc(13px * var(--b-s));line-height:1.35;color:var(--b-subtle)}
.world-story .world-story-b-box{display:flex;flex-direction:column;margin:0 0 10px;padding:10px;border:1px solid var(--b-rule);border-radius:5px;background:var(--b-inset)}
.world-story .world-story-b-box.is-cause{border-color:var(--b-info);background:var(--b-info-bg)}
.world-story .world-story-b-box.is-cause > .world-story-b-bar{margin:.55em 0 .1em;background:rgb(7 82 197 / .16)}
.world-story .world-story-b-boxh{margin:0 0 2px;font-size:calc(12px * var(--b-s));font-weight:600;line-height:1.3}
.world-story .world-story-b-box.is-cause .world-story-b-boxh{color:var(--b-info)}
.world-story .world-story-b-boxt{font-size:calc(13px * var(--b-s));line-height:1.4}
/* The trend's details resolve in reading order from a faint start, so the card never arrives empty. */
.world-story [data-b-part]{opacity:calc(.25 + .75 * var(--b-in,1));transform:translateY(calc((1 - var(--b-in,1)) * 6px))}
.world-story .world-story-b-evwrap{display:flex}
.world-story .world-story-b-drawer{position:relative;overflow:hidden;border:1px solid var(--b-rule-strong);border-radius:6px;background:#fff}
.world-story [data-b-drawer]{opacity:var(--b-in,1);transform:translateX(calc((1 - var(--b-in,1)) * 28px))}
.world-story .world-story-b-dhead{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--b-rule-strong)}
.world-story .world-story-b-dtitles{display:flex;flex:1;align-items:center;gap:12px;min-width:0}
.world-story .world-story-b-h2{display:flex;align-items:center;font-size:calc(17px * var(--b-s));font-weight:600;line-height:1.2;letter-spacing:-.01em}
.world-story .world-story-b-dmeta{font-size:calc(13px * var(--b-s));font-weight:500;color:var(--b-subtle);white-space:pre}
.world-story .world-story-b-dbody{padding:12px;background:var(--b-inset)}
.world-story .world-story-b-analysis .world-story-b-head{padding:11px 14px}
.world-story .world-story-b-analysis .world-story-b-body{padding:14px}
.world-story .world-story-b-quote{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding-left:12px;border-left:1px solid var(--b-rule-strong)}
.world-story .world-story-b-qtext{font-size:calc(14px * var(--b-s));line-height:1.5;color:var(--b-ink)}
.world-story .world-story-b-dims{display:flex;flex-direction:column;gap:6px;margin:14px 0 0}
.world-story .world-story-b-dims > div{display:grid;grid-template-columns:calc(142px * var(--b-s)) minmax(0,1fr);column-gap:10px;align-items:center}
.world-story .world-story-b-dims dt{justify-self:start;margin:0;padding:2px 6px;border-radius:4px;background:var(--b-inset);font-size:calc(12px * var(--b-s));font-weight:600;line-height:1.25;color:var(--b-muted);white-space:nowrap}
.world-story .world-story-b-dims dd{display:flex;align-items:center;margin:0;font-size:calc(14px * var(--b-s));font-weight:600;line-height:1.25;color:var(--b-ink)}
.world-story :is([data-b-quote],[data-b-dim]){opacity:var(--b-in,1);transform:translateY(calc((1 - var(--b-in,1)) * 6px))}

/* ------------------------------------------------------------------ 5. Leads, then the Overview */
.world-story .world-story-b-tabs{position:relative;display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--b-border);border-radius:8px;background:var(--b-inset)}
.world-story .world-story-b-tab{position:relative;z-index:1;padding:6px 11px;border-radius:5px;font-size:calc(13px * var(--b-s));font-weight:600;line-height:1;color:var(--b-muted);white-space:nowrap}
.world-story .world-story-b-tab.is-on{background:var(--b-ink);color:#fff}
.world-story .world-story-b-tabind{display:none}
.world-story .is-b-live .world-story-b-tabind{position:absolute;top:3px;bottom:3px;left:0;display:block;border-radius:5px;background:var(--b-ink);width:calc(var(--b-t0w) + (var(--b-t1w) - var(--b-t0w)) * var(--b-st));transform:translateX(calc(var(--b-t0x) + (var(--b-t1x) - var(--b-t0x)) * var(--b-st)))}
.world-story .is-b-live .world-story-b-tab.is-on{background:transparent}
.world-story .is-b-live [data-b-tab="new"]{color:color-mix(in srgb,#fff calc((1 - var(--b-st)) * 100%),var(--b-muted))}
.world-story .is-b-live [data-b-tab="contacted"]{color:color-mix(in srgb,#fff calc(var(--b-st) * 100%),var(--b-muted))}
.world-story .world-story-b-lead{--b-ns:1}
.world-story .world-story-b-lhead{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:10px 16px;border-bottom:1px solid var(--b-rule)}
.world-story .world-story-b-lhead .world-story-b-eyebrow{display:inline-flex;align-items:center;gap:.35em}
.world-story .world-story-b-lhead .world-story-b-eyebrow .world-story-b-bar{height:.8em}
.world-story .world-story-b-ltitle{display:inline-flex;align-items:center;gap:10px;font-size:calc(15px * var(--b-s));color:var(--b-subtle)}
.world-story .world-story-b-bar.is-title{height:.85em;background:#dcdce0}
.world-story .world-story-b-lead .world-story-b-body{padding:10px 16px}
.world-story .world-story-b-lead .world-story-b-eyebrow.is-gap{margin-top:9px}
.world-story .world-story-b-lead .world-story-b-inset{padding:7px 12px}
.world-story .world-story-b-lead .world-story-b-eyebrow.is-block{margin-bottom:6px}
.world-story .world-story-b-lead .world-story-b-foot{padding:8px 16px}
.world-story .world-story-b-inset.is-words{color:var(--b-ink)}
.world-story .world-story-b-input.is-note{min-height:calc(34px * var(--b-s));padding-top:7px;padding-bottom:7px}
.world-story .world-story-b-input.is-note .world-story-b-ph{top:7px}
.world-story .world-story-b-row.is-tight{margin-top:6px}
.world-story .world-story-b-notes .world-story-b-flush{margin-top:4px}
.world-story .world-story-b-foot.world-story-b-stack{display:grid}
.world-story .is-b-live .world-story-b-notes{overflow:hidden;height:calc(var(--b-he) + (var(--b-hs) - var(--b-he)) * var(--b-ns))}
.world-story .is-b-live .world-story-b-notes > [data-b-pre]{opacity:clamp(0, calc(1 - 2 * var(--b-ns)), 1)}
.world-story .is-b-live .world-story-b-notes > [data-b-post]{opacity:clamp(0, calc(2 * var(--b-ns) - 1), 1)}
.world-story .is-b-live .world-story-b-lead .world-story-b-foot > [data-b-pre]{opacity:clamp(0, calc(1 - 2 * var(--b-st)), 1)}
.world-story .is-b-live .world-story-b-lead .world-story-b-foot > [data-b-post]{opacity:clamp(0, calc(2 * var(--b-st) - 1), 1)}
.world-story [data-b-overview]{opacity:var(--b-in,1)}
.world-story [data-b-ov]{opacity:var(--b-in,1);transform:translateY(calc((1 - var(--b-in,1)) * 10px))}
.world-story .world-story-b-attn{display:flex;align-items:center;gap:10px;padding:14px 16px}
/* All clear's status dot answers once when the Overview settles: one soft ring in its own green (--b-pulse 0 to 1; both
   ends are invisible, so the finished still and the page without JavaScript show the plain dot). */
.world-story .world-story-b-okdot{flex:none;width:8px;height:8px;border-radius:999px;background:var(--b-active-line);box-shadow:0 0 0 calc(var(--b-pulse,1) * 7px) rgb(47 139 74 / calc(.45 * (1 - var(--b-pulse,1))))}
.world-story .world-story-b-attnt{font-size:calc(15px * var(--b-s));font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.world-story .world-story-b-score{display:flex;flex-wrap:wrap;gap:1px;margin-top:10px;overflow:hidden;background:var(--b-rule)}
.world-story .world-story-b-tile{display:flex;flex:1 1 calc(50% - 1px);flex-direction:column;gap:6px;min-width:150px;padding:12px 14px 14px;border-top:3px solid transparent;background:#fff}
.world-story .world-story-b-tile.is-lead{flex:1.6 1 calc(50% - 1px);min-width:190px}
.world-story .world-story-b-tile.is-green{border-top-color:var(--b-active-line)}
.world-story .world-story-b-tile.is-blue{border-top-color:var(--b-info)}
.world-story .world-story-b-tile.is-violet{border-top-color:var(--b-violet)}
.world-story .world-story-b-tile .world-story-b-eyebrow{white-space:normal;line-height:1.15}
.world-story .world-story-b-tile .world-story-b-meta{font-size:12px;line-height:1.4}
.world-story .world-story-b-bar.is-num{height:.78em;margin:2px 0;font-size:calc(24px * var(--b-s));background:#dcdce0}
.world-story .world-story-b-tile.is-lead .world-story-b-bar.is-num{font-size:calc(30px * var(--b-s))}

/* ------------------------------------------------------------------ the dotted thread (world/story-business.js draws it) */
/* The venue page's connector, in the section's shared grammar: 1.5px round dots on a 2/6 dash, drawn on through a mask (its
   reveal ends square, exactly at the tip), with a small dot riding the tip; a dot at each end and one soft ring where it
   lands; on the black ground, in the logo's yellow (--b-link), every part in the line's own colour. The riding and travelling dots
   are the path itself with a zero-length dash and round caps (pathLength 1, so the dash offset is the distance along it). */
.world-story .world-story-b-links{position:absolute;inset:0;z-index:3;width:100%;height:100%;overflow:visible;pointer-events:none;color:var(--b-link)}
.world-story .world-story-b-dots{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:2 6}
.world-story .world-story-b-case{fill:none;stroke:var(--b-link-case);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:2 6}
.world-story .world-story-b-reveal{fill:none;stroke:#fff;stroke-width:14;stroke-linecap:butt;stroke-dasharray:1 1}
.world-story .world-story-b-end{fill:currentColor;stroke:var(--b-link-case);stroke-width:2;paint-order:stroke}
.world-story .world-story-b-tip{fill:none;stroke:currentColor;stroke-width:4.5;stroke-linecap:round;stroke-dasharray:0 2;opacity:0}
.world-story .world-story-b-tip.is-case{stroke:var(--b-link-case);stroke-width:6.5}
.world-story .world-story-b-ping{fill:none;stroke:currentColor;stroke-width:1.25;opacity:0}
/* Once a thread is drawn (--b-drawn, from the timeline), a small dot runs along it every 3.6 s: in about 1.4 s, easing in
   and out, then it rests. Only on the threads that touch the centred picture (.is-b-flow), only while the story is open. */
.world-story .world-story-b-flow{opacity:var(--b-drawn,0)}
.world-story .world-story-b-run{opacity:0}
.world-story .world-story-b-travel{fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-dasharray:0 2;stroke-dashoffset:0}
.world-story .world-story-b-travel.is-case{stroke:var(--b-link-case);stroke-width:6}
/* Staggered by the threads' order, so round a centred picture the dots run in reading order: in, inside, out. */
.world-story :is(.world-story-b-link:nth-of-type(2),.world-story-b-flow:nth-child(2)){--b-lag:.7s}
.world-story :is(.world-story-b-link:nth-of-type(3),.world-story-b-flow:nth-child(3)){--b-lag:1.4s}
.world-story :is(.world-story-b-link:nth-of-type(4),.world-story-b-flow:nth-child(4)){--b-lag:2.1s}
.world-story :is(.world-story-b-link:nth-of-type(5),.world-story-b-flow:nth-child(5)){--b-lag:2.8s}
/* The run is two animations started together (optimize pass, 2 October 2026): the dash offset carries the dot along its two
   paths (the yellow and its casing), and its group's opacity fades it in and out. Chrome composites that opacity, so the
   dot repaints in a small layer of its own; the travelling dots are drawn last (story-business.js), so nothing above them
   needs a layer to stay on top. */
@keyframes world-story-b-travel{
 0%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.45,0,.3,1)}
 38%,100%{stroke-dashoffset:-1px}
}
@keyframes world-story-b-run{
 0%{opacity:0;animation-timing-function:cubic-bezier(.45,0,.3,1)}
 6%,32%{opacity:1}
 38%,100%{opacity:0}
}
/* As the travelling dot reaches the end of its thread, the end dot answers once: a small swell, and back (delight pass, 2
   October 2026). The same 3.6 s and the same lag, so it lands with the dot. It animates the circle's radius, not a transform,
   so it stays in the thread's one layer (a transform animation is given a layer of its own, and the links drawn above it
   another). */
@keyframes world-story-b-land{
 0%,33%{r:3px}
 38.5%{r:4.35px;animation-timing-function:cubic-bezier(.22,1,.36,1)}
 52%,100%{r:3px}
}

/* ------------------------------------------------------------------ motion preferences */
/* Outside the timeline, only the idle life moves (the caret's blink, and the travelling dot with its end dot's swell, all
   only in or round the centred picture), and the feature links' arrow on hover. None of it runs under the site's Pause or reduced motion; there the
   reduced-motion player steps between finished stills. */
@media (prefers-reduced-motion:no-preference){
 body:not([data-motion-paused="true"]) .world-story .world-story-reel.is-open:not(.is-static) .world-story-b-track:not(.is-b-reduced) .world-story-b-beat.is-b-centre .world-story-b-caret{animation:world-story-b-blink 1.05s steps(1) infinite}
 body:not([data-motion-paused="true"]) .world-story .world-story-reel.is-open:not(.is-static) .world-story-b-track:not(.is-b-reduced) .world-story-b-flow.is-b-flow .world-story-b-travel{animation:world-story-b-travel 3.6s linear var(--b-lag,0s) infinite}
 body:not([data-motion-paused="true"]) .world-story .world-story-reel.is-open:not(.is-static) .world-story-b-track:not(.is-b-reduced) .world-story-b-flow.is-b-flow .world-story-b-run{animation:world-story-b-run 3.6s linear var(--b-lag,0s) infinite}
 body:not([data-motion-paused="true"]) .world-story .world-story-reel.is-open:not(.is-static) .world-story-b-track:not(.is-b-reduced) .world-story-b-link.is-b-flow .world-story-b-end.is-land{animation:world-story-b-land 3.6s linear var(--b-lag,0s) infinite}
}
.world-story .world-story-reel.is-static :is(.world-story-b-arrow,.world-story-b-explore,.world-story-b-explore-text),.world-story .world-story-b-track.is-b-reduced :is(.world-story-b-arrow,.world-story-b-explore,.world-story-b-explore-text){transition:none}
@media (prefers-reduced-motion:reduce){.world-story [data-story="business"] :is(.world-story-b-arrow,.world-story-b-explore,.world-story-b-explore-text){transition:none}}

/* ------------------------------------------------------------------ Your Business card */
/* The choice card's picture for this story (2 October 2026, section 2 rebuild; story.html, the button
   [data-story-open="business"]): the admin console filling its card, the pair of the Your Visitors card's Your Business
   website with Aura open (world-story-aura.css: there too the card is the window, with no browser chrome). Both start with
   the same business, by name: the site's own nav there, the admin's tenant switcher here. One telling moment
   from the business side, in the admin's own words (the Content Gaps screen of picture 2 above, ContentGapsPage.tsx): a
   question visitors asked three times that the website never answered, the team's answer, Approve, and the admin's toast
   "Published. Visitors get this answer from their next message." The question and the answer are the story's own sample
   data. Drawn smaller than the shell's plan, on 88em x 52.25em (1em is 1/88 of the picture's width, or 1/52.25 of its height if
   that is less; about 6.3px at 1524x718, where the picture is about 552 x 358), so more of the console shows (owner, 2 October
   2026: smaller, fewer colours); the smallest words are 1.77em, 11px on screen there (polish round: they were 1.7em,
   10.7px), the question 13.5px.
   The shell (world-story.css) keeps the card itself, its label, play disc, tick, hover lift and the opening flight; the
   stage's own box is restated here so the picture stands on its own.
   Idle life (10 s, the Your Visitors card's rhythm, so the two cards' moments alternate; a loop that starts and ends on the
   finished picture): the toast leaves, the card goes back to "Needs input" and "No answer yet", the answer is typed,
   "Ready", Approve is pressed and the toast comes back. It is gated
   exactly as the shell gates every card picture: it runs only while the choice screen is on screen and motion is allowed
   (.is-previewing, world/story.js updatePreviews), it holds still under the site's Pause, and reduced motion removes it,
   leaving the finished picture. The animations are therefore declared on single-class selectors: the shell's gates
   (world-story.css, 0,2,0 and 0,3,0) must outrank them. Each keyframe set's 0% is the finished picture, so the copy that
   flies to the story on a press (it is made with its animations paused) shows it too. */
.world-story .world-story-preview--business{background:#f4f4f5}
.world-story .world-story-pb-stage{position:absolute;inset:0;font-family:var(--ff-body,'DM Sans',sans-serif);font-size:min(calc(100cqw / 88), calc(100cqh / 52.25));line-height:1;color:#030303;text-align:left;--pb-brand:#b4462a}
/* The admin's own top bar (TopBar.tsx): the tenant switcher, an outline button with the business's name and a chevron,
   then the header search (a skeleton). Both cards name the same business, "Your Business", in words: its mark (the clay
   disc) is gone from both (owner, 2 October 2026), so the switcher's start padding now matches its end. */
.world-story .world-story-pb-bar{position:absolute;left:5.6em;right:0;top:0;display:flex;align-items:center;justify-content:space-between;gap:1em;height:4.6em;padding:0 3em 0 3.2em;border-bottom:1px solid #e3e3e3;background:#fff}
.world-story .world-story-pb-tenant{display:inline-flex;align-items:center;gap:.45em;height:2.05em;padding:0 .45em;border:1px solid #e3e3e3;border-radius:.35em;font-size:1.8em;font-weight:600;line-height:1;color:#030303;white-space:nowrap}
.world-story .world-story-pb-tenant svg{flex:none;width:.85em;height:.85em;fill:none;stroke:#5f5f5f;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.world-story .world-story-pb-search{display:flex;align-items:center;gap:.6em;width:17em;height:2.9em;padding:0 1em;border:1px solid #e3e3e3;border-radius:.5em;background:#fafafa;color:#8a8a8f}
.world-story .world-story-pb-search svg{flex:none;width:1.4em;height:1.4em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.world-story .world-story-preview .world-story-pb-search > i{width:55%;height:.7em;border-radius:.35em;background:#dcdce1}
/* The admin's sidebar, collapsed to its icons (Sidebar.tsx: Overview, Conversations, Leads, Metrics, Content Gaps), the
   page's own item filled with ink as the admin marks the current page (admin.css .sst-nav__item--active). */
.world-story .world-story-pb-rail{position:absolute;left:0;top:0;bottom:0;display:flex;flex-direction:column;align-items:center;gap:.7em;width:5.6em;padding-top:6.2em;border-right:1px solid #e3e3e3;background:#fff}
.world-story .world-story-preview .world-story-pb-rail > i{display:grid;flex:none;place-items:center;width:3.6em;height:3.3em;border-radius:.5em;color:#707074}
.world-story .world-story-preview .world-story-pb-rail > i.is-on{background:#030303;color:#fff}
.world-story .world-story-pb-rail svg{width:2.05em;height:2.05em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* The page: its title, the open suggestion at the admin's proportions (picture 2 above), then two more suggestions, closed. */
.world-story .world-story-pb-main{position:absolute;left:5.6em;right:0;top:4.6em;bottom:0;padding:2.5em 3em 0 3.2em}
.world-story .world-story-pb-h1{display:block;font-size:2.3em;font-weight:700;line-height:1.15;letter-spacing:-.02em}
.world-story .world-story-pb-sugg{display:block;margin-top:1.4em;padding:1.9em 2.3em 2.1em;border:1px solid #e3e3e3;border-radius:.8em;background:#fff;box-shadow:0 1px 2px rgb(28 27 31 / .05),0 1.4em 3em -1.2em rgb(28 27 31 / .14)}
.world-story .world-story-pb-head{display:flex;align-items:center;gap:.8em;min-height:2.9em}
.world-story .world-story-pb-eyebrow{display:inline-grid;font-size:1.77em;font-weight:600;line-height:1;letter-spacing:.05em;text-transform:uppercase;color:#5f5f5f;white-space:nowrap}
.world-story .world-story-pb-eyebrow > *{grid-area:1 / 1}
.world-story .world-story-pb-pre{opacity:0}
.world-story .world-story-pb-tags{position:relative;display:flex;align-items:center;margin-left:auto}
/* Two colours (owner, 2 October 2026): the admin's neutrals and the site's gold, in two shades: Approve, and the one gold tint
   on "No answer yet" (yellow means look here, as across the site). "Asked 3x" is the product's own count badge, outlined
   and without a dot (ContentGapsPage.tsx: a count, not a warning). */
.world-story .world-story-pb-tag{display:inline-flex;align-items:center;gap:.45em;padding:.4em .55em;border:1px solid transparent;border-radius:.3em;background:#ececec;font-size:1.77em;font-weight:600;line-height:1;letter-spacing:.05em;text-transform:uppercase;color:#525252;white-space:nowrap}
.world-story .world-story-preview .world-story-pb-tag > i{flex:none;width:.42em;height:.42em;border-radius:50%;background:currentColor}
.world-story .world-story-pb-tag.is-outline{border-color:#d8d8d8;background:transparent}
.world-story .world-story-preview .world-story-pb-tag.is-outline > i{display:none}
/* "No answer yet" sits at the row's end, over the place "Asked 3x" takes once the answer is in (the story's own swap):
   --pb-na is its width and the gap, in the badge's em. */
.world-story .world-story-pb-asked{--pb-na:11.3em}
.world-story .world-story-pb-noans{position:absolute;right:0;opacity:0;background:#fff3bf;color:#1c1b1f}
.world-story .world-story-pb-q{display:block;margin-top:.55em;font-size:2.15em;font-weight:600;line-height:1.2;letter-spacing:-.01em;white-space:nowrap}
.world-story .world-story-pb-ans{display:block;margin-top:.7em;padding:.55em .7em;border:1px solid #ececec;border-radius:.3em;background:#f1f1f3;font-size:1.85em;line-height:1.35;color:#3d3d40;white-space:nowrap}
.world-story .world-story-pb-typed{display:inline-block;max-width:14em;overflow:hidden;vertical-align:top}
.world-story .world-story-preview .world-story-pb-caret{display:inline-block;width:1.5px;height:1.05em;margin:.15em 0 0 1px;vertical-align:top;background:#030303;opacity:0}
.world-story .world-story-pb-acts{display:flex;align-items:center;gap:.8em;margin-top:1.5em}
.world-story .world-story-pb-ok,.world-story .world-story-pb-btn{display:inline-flex;align-items:center;gap:.4em;padding:.55em .9em;border:1px solid #e3e3e3;border-radius:.35em;background:#fff;font-size:1.77em;font-weight:600;line-height:1}
.world-story .world-story-pb-ok{border-color:rgb(0 0 0 / .85);background:#ffd700}
.world-story .world-story-pb-ok svg{width:.95em;height:.95em;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* The admin's dark toast, at the page's bottom right. */
.world-story .world-story-pb-toast{position:absolute;right:3em;bottom:2.6em;z-index:2;display:flex;align-items:center;gap:.85em;padding:.7em .75em .7em 1em;border-radius:.45em;background:#030303;box-shadow:0 0 0 1px rgb(255 255 255 / .2),0 .7em 1.6em -.4em rgb(0 0 0 / .45);font-size:1.77em;font-weight:500;line-height:1.2;color:#fff;white-space:nowrap}
.world-story .world-story-pb-toast svg{flex:none;width:.85em;height:.85em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;opacity:.85}
/* Two more suggestions, closed to their head row (eyebrow, the question as a skeleton, badges). */
.world-story .world-story-pb-line{display:flex;align-items:center;gap:1.2em;min-height:3em;margin-top:1em;padding:1.5em 2.3em;border:1px solid #e3e3e3;border-radius:.8em;background:#fff}
.world-story .world-story-preview .world-story-pb-line > i{flex:none;width:34%;height:1.05em;border-radius:.5em;background:#dcdce1}
.world-story .world-story-preview .world-story-pb-line + .world-story-pb-line > i{width:26%}
.world-story .world-story-pb-line > .world-story-pb-tag{margin-left:auto}
/* The idle loop (single-class selectors: see above). 0 to 19%: finished; the toast leaves and the card goes back to
   "Needs input" (22 to 26%); the caret waits, then the answer is typed (35 to 44%, about 28 characters a second); "Ready"
   (45 to 48%); Approve is pressed (52 to 55%); the toast comes back (55 to 59%) and holds to the end. */
.world-story-pb-pre{animation:world-story-pb-pre 10s linear infinite}
.world-story-pb-post{animation:world-story-pb-post 10s linear infinite}
.world-story-pb-noans{animation:world-story-pb-noans 10s linear infinite}
.world-story-pb-asked{animation:world-story-pb-asked 10s cubic-bezier(.22,1,.36,1) infinite}
.world-story-pb-ans{animation:world-story-pb-ans 10s linear infinite}
.world-story-pb-typed{animation:world-story-pb-typed 10s linear infinite}
.world-story-pb-caret{animation:world-story-pb-caret 10s linear infinite}
.world-story-pb-ok{animation:world-story-pb-ok 10s ease-out infinite}
.world-story-pb-toast{animation:world-story-pb-toast 10s cubic-bezier(.22,1,.36,1) infinite}
@keyframes world-story-pb-pre{0%,22%{opacity:0}25%,45%{opacity:1}48%,100%{opacity:0}}
@keyframes world-story-pb-post{0%,22%{opacity:1}25%,45%{opacity:0}48%,100%{opacity:1}}
@keyframes world-story-pb-noans{0%,22.5%{opacity:0}25.5%,45%{opacity:1}47.5%,100%{opacity:0}}
@keyframes world-story-pb-asked{0%,22%{translate:0 0}25.5%,45%{translate:calc(-1 * var(--pb-na)) 0}48.5%,100%{translate:0 0}}
/* While the answer is written the field is the admin's input in use (white, its border in ink, as picture 2's); once
   "Ready" it is the saved answer's grey well again. */
@keyframes world-story-pb-ans{0%,23.5%{border-color:#ececec;background:#f1f1f3}24%,45%{border-color:#030303;background:#fff}47%,100%{border-color:#ececec;background:#f1f1f3}}
@keyframes world-story-pb-typed{
 0%,20.5%{max-width:14em;opacity:1}
 23.5%{max-width:14em;opacity:0}
 23.6%{max-width:0;opacity:0}
 24%{max-width:0;opacity:1}
 35%{max-width:0;opacity:1;animation-timing-function:steps(25,end)}
 44%,100%{max-width:14em;opacity:1}
}
@keyframes world-story-pb-caret{0%,24.5%{opacity:0}25%,29.5%{opacity:1}29.6%,32.5%{opacity:0}32.6%,45.5%{opacity:1}45.6%,100%{opacity:0}}
@keyframes world-story-pb-ok{
 0%,22.5%{opacity:1;transform:none;box-shadow:0 0 0 0 rgb(255 215 0 / 0)}
 25.5%,45%{opacity:.5;transform:none;box-shadow:0 0 0 0 rgb(255 215 0 / 0)}
 48%,52%{opacity:1;transform:none;box-shadow:0 0 0 0 rgb(255 215 0 / .6)}
 53.4%{opacity:1;transform:scale(.94);box-shadow:0 0 0 .28em rgb(255 215 0 / .6)}
 56%,100%{opacity:1;transform:none;box-shadow:0 0 0 .55em rgb(255 215 0 / 0)}
}
@keyframes world-story-pb-toast{0%,19%{opacity:1;transform:none}23%,55%{opacity:0;transform:translateY(.6em)}59%,100%{opacity:1;transform:none}}