/* The new Aura (widget 2.0, Signature mode, merged 29 September 2026) drawn for the homepage story's pictures: the
   resting button, the open home, Go to / Go back, corner marks, cards, chips, day tiles and times. Values from the
   product's packages/layer/src/aura/surfaces/tokens.css, glass.css and aura.css (and cards.ts, line.ts, edge-light.ts,
   resting.ts, input.ts, go-button.ts for the shapes and icons). Classes: .wsa-*. Also the Your Visitors card's preview.
   (2 October 2026, section 2 rebuild.)

   Drawn larger than true proportion so it reads at the story's scale: Aura's proportions, radii, line weights and colours
   are kept, but its type is stepped up (answers 17.5px, nothing under 13.5px) and its controls grow with it (the 44px
   targets draw at 50 to 52px). Sizes are design px: the stage that holds a picture scales it.

   No backdrop blur by default: the pictures sit on layers that pan and scale, and the glass blur once cost an 83 to 100 ms
   frame. The plate is the light plate made solid (.74 in the product; without the blur, words behind a thinner plate show
   through it: at .97 "Growth" still ghosted through the home in beats 4 and 5, so the polish round of 2 October 2026 made
   it opaque) with the product's specular rim and shadow, which reads as the frosted glass at this size. Opt in with
   .wsa-blur on a still layer only.

   Moving parts are custom properties (registered below, so CSS keyframes and GSAP both interpolate them):
     --wsa-lap     0 to 1   one lap of the edge light round the resting button's rim (0 and 1 both mean "at home")
     --wsa-ride    0 to 1   the star's place along the home's line while an answer writes (1 = the crest, its rest)
     --wsa-ripple  0 to 1   where the thinking ripple is along the line
     --wsa-swell   0 to 1   how far the speaking ribbon swells
     --wsa-count   0 to 1   the Go to countdown's elapsed share (0 = the bar full, 1 = the bar gone)
     --wsa-draw    0 to 1   the corner marks drawing on (1 = drawn)
     --wsa-scan    0 to 1   the light scanning down a marked section (0 and 1 = no light)
     --wsa-grow    0 to 1   a skeleton bar (.wsa-skel.is-grow) growing from its left end (1 = grown)
   Nothing here transitions: a state class changes the picture at once, and a timeline tweens the properties. */

/* ------------------------------------------------------------------ faces: Geist and Geist Mono 1.7.2 (SIL OFL 1.1),
   the product's own self-hosted files; the host website's headline face is the site's Libre Caslon Display */

@font-face {
    font-family: 'wsa-geist';
    src: url(../fonts/geist-sans-400.woff2) format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'wsa-geist';
    src: url(../fonts/geist-sans-500.woff2) format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'wsa-geist';
    src: url(../fonts/geist-sans-600.woff2) format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'wsa-geist-mono';
    src: url(../fonts/geist-mono-500.woff2) format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'wsa-caslon';
    src: url(../fonts/libre-caslon-display-400.woff2) format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ------------------------------------------------------------------ the moving parts */

@property --wsa-lap { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --wsa-ride { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --wsa-ripple { syntax: '<number>'; inherits: true; initial-value: .5; }
@property --wsa-swell { syntax: '<number>'; inherits: true; initial-value: .8; }
@property --wsa-count { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --wsa-draw { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --wsa-scan { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --wsa-grow { syntax: '<number>'; inherits: true; initial-value: 1; }

/* ------------------------------------------------------------------ tokens (tokens.css, light pages) */

:root {
    --wsa-ui: 'wsa-geist', 'DM Sans', system-ui, sans-serif;
    --wsa-mono: 'wsa-geist-mono', ui-monospace, 'Cascadia Mono', monospace;
    --wsa-ink: #111318;
    --wsa-ink-rgb: 17 19 24;
    --wsa-muted: #4a4f5a;
    --wsa-credit: #6d6a64;
    --wsa-tone: 246 244 238;
    --wsa-edge: rgb(17 19 24 / .11);
    --wsa-edge-bot: rgb(17 19 24 / .16);
    --wsa-line: linear-gradient(90deg, #2b4df5 0%, #6a63f0 38%, #f2b705 78%, #ffd700 100%);
    --wsa-cobalt: #2b4df5;
    --wsa-mark: #2b4df5;                    /* corner marks and focus: cobalt on light pages */
    --wsa-star: #ffd700;
    --wsa-star-edge: #b58a00;
    /* The host website's brand ("Your Business"): a warm clay. Not cobalt or navy (Aura's own voice is cobalt, and the
       owner rules out a cobalt-led look); the far side of the wheel from the line's cobalt, so a brand Go to never reads as
       part of Aura's line; white words on it 5.4:1. It fills Go to, Send / Submit, the picked booking day and time, and the
       site's mark and Book a call. The palette rule (owner, 2 October 2026, 19:35): two colours. Neutrals (white, light
       greys, ink) and the clay in at most two shades (the brand and one light tint), besides Aura's own line and star. */
    --wsa-brand: #b4462a;
    --wsa-brand-tint: #f4e2dc;
    --wsa-brand-ink: #ffffff;
    /* the host site's neutrals: a white page, ink text, light greys (its one colour is the brand clay) */
    --wsa-site-page: #ffffff;
    --wsa-site-ink: #1c1b1f;
    --wsa-site-muted: #5b5b61;
    --wsa-site-line: rgb(17 19 24 / .09);
    --wsa-site-chrome: #f4f0e9;             /* the original wireframe's warm browser chrome */
    --wsa-ease: cubic-bezier(.22, 1, .36, 1);
    --wsa-plate: rgb(246 244 238);
    --wsa-sheen: linear-gradient(180deg, rgb(255 255 255 / .2) 0, rgb(255 255 255 / 0) 38%);
    --wsa-spec: inset 0 1px 0 rgb(255 255 255 / .9), inset 0 14px 20px -16px rgb(255 255 255 / .95), inset 0 0 0 1px rgb(255 255 255 / .22), inset 0 -10px 16px -14px rgb(255 255 255 / .55);
    --wsa-shadow: 0 1px 2px rgb(17 19 24 / .06), 0 8px 24px -8px rgb(17 19 24 / .13), 0 22px 44px -28px rgb(17 19 24 / .16);
    --wsa-ring: linear-gradient(172deg, rgb(255 255 255 / 1) 0%, rgb(255 255 255 / .6) 16%, rgb(255 255 255 / 0) 40%, rgb(255 255 255 / 0) 74%, rgb(255 255 255 / .55) 100%);
}

/* ------------------------------------------------------------------ the material (glass.css, without the blur) */

.wsa-rest,
.wsa-home,
.wsa-card {
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    color: var(--wsa-ink);
    font-family: var(--wsa-ui);
    -webkit-font-smoothing: antialiased;
    border: 1px solid var(--wsa-edge);
    border-bottom-color: var(--wsa-edge-bot);
    background: var(--wsa-sheen), var(--wsa-plate);
    box-shadow: var(--wsa-spec), var(--wsa-shadow);
}

/* the specular rim: bright along the top, fading down the sides, catching again at the bottom */
.wsa-home::after,
.wsa-card::after,
.wsa-rest::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    background: var(--wsa-ring);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    mask-composite: exclude;
}

/* the real frost, for a layer that neither pans nor scales */

/* the star (resting.ts STAR_D, viewBox 88 14 28 28): gold with a darker gold outline on light pages */
.wsa-star {
    display: block;
    overflow: visible;
    fill: var(--wsa-star);
    stroke: var(--wsa-star-edge);
    stroke-width: 2.05;
    stroke-linejoin: round;
}

/* ------------------------------------------------------------------ the resting button (Lamina) */
/* Kept for reference: the homepage shows the Crest (below) wherever the resting button appears (owner, 2 October 2026). */

.wsa-rest {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 52px;
    min-width: 236px;
    padding: 0 24px;
    border-radius: 12px;
    font-size: 17px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .005em;
    white-space: nowrap;
}

.wsa-rest > .wsa-star {
    position: relative;
    flex: none;
    width: 18px;
    height: 18px;
}

.wsa-rest-label {
    position: relative;
}

/* the 1.5px cobalt into gold line along the top edge (drawn 2px at this scale); it steps aside while the light laps */
.wsa-rest-line {
    position: absolute;
    left: 12px;
    right: 12px;
    top: -1px;
    height: 2px;
    border-radius: 1px;
    background: var(--wsa-line);
    pointer-events: none;
    z-index: 1;
    opacity: calc(1 - clamp(0, min(var(--wsa-lap) * 40, (1 - var(--wsa-lap)) * 40), 1));
}

/* The edge light (edge-light.ts): the same line leaving its place, running once round the rim and settling back. Drawn as
   five soft lights in the line's own colours, spaced along its length and carried round the rim at an even speed, seen
   only through a 2px ring that follows the corners. The rim is walked with clamp(): along the top, down the right side,
   back along the bottom, up the left side, and along the top again to home. */
.wsa-rest-lap {
    position: absolute;
    inset: -1px;
    border-radius: 13px;
    container-type: size;
    pointer-events: none;
    z-index: 2;
    opacity: clamp(0, min(var(--wsa-lap) * 40, (1 - var(--wsa-lap)) * 40), 1);
}

.wsa-rest-lap::before {
    --wsa-p: calc(2 * (100cqw + 100cqh));
    --wsa-d1: calc(12px + (100cqw - 24px) * .1 + var(--wsa-lap) * var(--wsa-p));
    --wsa-d2: calc(12px + (100cqw - 24px) * .3 + var(--wsa-lap) * var(--wsa-p));
    --wsa-d3: calc(12px + (100cqw - 24px) * .5 + var(--wsa-lap) * var(--wsa-p));
    --wsa-d4: calc(12px + (100cqw - 24px) * .7 + var(--wsa-lap) * var(--wsa-p));
    --wsa-d5: calc(12px + (100cqw - 24px) * .9 + var(--wsa-lap) * var(--wsa-p));
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    mask-composite: exclude;
    background-image:
        radial-gradient(closest-side, rgb(249 201 2) 0, rgb(249 201 2) 45%, rgb(249 201 2 / 0) 100%),
        radial-gradient(closest-side, rgb(215 166 52) 0, rgb(215 166 52) 45%, rgb(215 166 52 / 0) 100%),
        radial-gradient(closest-side, rgb(147 124 170) 0, rgb(147 124 170) 45%, rgb(147 124 170 / 0) 100%),
        radial-gradient(closest-side, rgb(93 94 241) 0, rgb(93 94 241) 45%, rgb(93 94 241 / 0) 100%),
        radial-gradient(closest-side, rgb(60 83 244) 0, rgb(60 83 244) 45%, rgb(60 83 244 / 0) 100%);
    background-repeat: no-repeat;
    background-size: 64px 64px;
    background-position:
        calc(clamp(0px, var(--wsa-d5), 100cqw) - clamp(0px, var(--wsa-d5) - 100cqw - 100cqh, 100cqw) + clamp(0px, var(--wsa-d5) - var(--wsa-p), 100cqw) - 32px) calc(clamp(0px, var(--wsa-d5) - 100cqw, 100cqh) - clamp(0px, var(--wsa-d5) - 2 * 100cqw - 100cqh, 100cqh) - 32px),
        calc(clamp(0px, var(--wsa-d4), 100cqw) - clamp(0px, var(--wsa-d4) - 100cqw - 100cqh, 100cqw) + clamp(0px, var(--wsa-d4) - var(--wsa-p), 100cqw) - 32px) calc(clamp(0px, var(--wsa-d4) - 100cqw, 100cqh) - clamp(0px, var(--wsa-d4) - 2 * 100cqw - 100cqh, 100cqh) - 32px),
        calc(clamp(0px, var(--wsa-d3), 100cqw) - clamp(0px, var(--wsa-d3) - 100cqw - 100cqh, 100cqw) + clamp(0px, var(--wsa-d3) - var(--wsa-p), 100cqw) - 32px) calc(clamp(0px, var(--wsa-d3) - 100cqw, 100cqh) - clamp(0px, var(--wsa-d3) - 2 * 100cqw - 100cqh, 100cqh) - 32px),
        calc(clamp(0px, var(--wsa-d2), 100cqw) - clamp(0px, var(--wsa-d2) - 100cqw - 100cqh, 100cqw) + clamp(0px, var(--wsa-d2) - var(--wsa-p), 100cqw) - 32px) calc(clamp(0px, var(--wsa-d2) - 100cqw, 100cqh) - clamp(0px, var(--wsa-d2) - 2 * 100cqw - 100cqh, 100cqh) - 32px),
        calc(clamp(0px, var(--wsa-d1), 100cqw) - clamp(0px, var(--wsa-d1) - 100cqw - 100cqh, 100cqw) + clamp(0px, var(--wsa-d1) - var(--wsa-p), 100cqw) - 32px) calc(clamp(0px, var(--wsa-d1) - 100cqw, 100cqh) - clamp(0px, var(--wsa-d1) - 2 * 100cqw - 100cqh, 100cqh) - 32px);
}

/* the idle loop: one lap of 1.8s about every 10s (the first 1.2s in), on the lap's own ease */

@keyframes wsa-lap {
    0%, 82% { --wsa-lap: 0; animation-timing-function: cubic-bezier(.45, 0, .3, 1); }
    100% { --wsa-lap: 1; }
}

/* pressed */

/* ------------------------------------------------------------------ the resting button (The Crest) */
/* Aura's resting presence everywhere it appears (owner, 2 October 2026; resting.ts "crest", aura.css .ak-crest): the
   Superstrate mark (a cobalt wave riding over a bar, the gold star at its crest; crestMark(), viewBox 10 8 108 96, the
   wave clipped to x 11 to 109, y 8 to 78) and "Ask Your Business" on a small plate, 40px high, 12px radius, 10px before
   the mark, 16px after the words, 9px between, the words 14.5px/500, the mark 29 x 26. The product leaves the top line
   off a plain Crest; here it keeps the signature line (owner), so the edge light (--wsa-lap, .is-idle) laps it as it laps
   Lamina. The clip is a nested <svg> viewport, not a clipPath, so a copied Crest needs no unique id. Markup: KIT2.md.
   The product draws the mark still. Here it lives a little by itself (an idle CSS loop, motion preferences below): the
   wave swells and settles every 5s, and every 10s a light runs along it into the star, which turns a quarter (the star
   has four-fold symmetry, so the turn ends where it began). Its rest frame is the product's drawing exactly. */
.wsa-rest--crest {
    gap: 9px;
    height: 40px;
    min-width: 0;
    padding: 0 16px 0 10px;
    border-radius: 12px;
    font-size: 14.5px;
}

.wsa-crest-mark {
    position: relative;
    flex: none;
    display: block;
    width: 29px;
    height: 26px;
    overflow: visible;
}

/* the nested viewport is the product's clip rectangle */
.wsa-crest-mark svg {
    overflow: hidden;
}

.wsa-crest-bar {
    fill: rgb(var(--wsa-ink-rgb) / .34);
}

.wsa-crest-wave {
    fill: none;
    stroke: var(--wsa-cobalt);
    stroke-width: 12;
    stroke-linecap: round;
}

/* the light the wave carries to the star: a short gold dash (pathLength 100) riding the wave, unseen at rest */
.wsa-crest-glint {
    fill: none;
    stroke: #ffe066;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 16 200;
    stroke-dashoffset: 16;
    opacity: 0;
}

.wsa-crest-star {
    fill: var(--wsa-star);
    stroke: var(--wsa-star-edge);
    stroke-width: 3;
    stroke-linejoin: round;
    transform-box: fill-box;
    transform-origin: 50% 50%;
}

/* pressed: the plate dips (down a pixel, a touch smaller, its shadow closer) */

@keyframes wsa-crest-swell {
    0%, 100% { d: path('M-38 54 Q-24 38 -10 54 T18 54 T46 54 T74 54 T102 54'); }
    50% { d: path('M-38 54 Q-24 31 -10 54 T18 54 T46 54 T74 54 T102 54'); }
}

@keyframes wsa-crest-glint {
    0%, 52% { stroke-dashoffset: 16; opacity: 0; animation-timing-function: cubic-bezier(.45, 0, .3, 1); }
    56% { opacity: 1; }
    72% { opacity: 1; }
    76%, 100% { stroke-dashoffset: -100; opacity: 0; }
}

@keyframes wsa-crest-star {
    0%, 70% { rotate: 0deg; scale: 1; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
    80% { rotate: 64deg; scale: 1.18; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
    92%, 100% { rotate: 90deg; scale: 1; }
}

/* ------------------------------------------------------------------ the open home */

.wsa-home {
    --wsa-lift: 0px;
    display: block;
    width: 560px;
    max-width: 100%;
    border-radius: 14px;
    translate: 0 var(--wsa-lift);
    text-align: left;
}

/* the speaking light rising from the line into the plate (glass.css .gl-inner) */
.wsa-home::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
    opacity: 0;
    background: radial-gradient(95% 120% at 50% 0%, rgb(242 183 5 / .15), rgb(43 77 245 / .075) 46%, rgb(43 77 245 / 0) 80%);
}

/* state is depth: the plate lifts and its shadow deepens (tokens.css: think 14, speak 8, listen 4) */
.wsa-home.is-thinking {
    --wsa-lift: -14px;
    box-shadow: var(--wsa-spec), var(--wsa-shadow), 0 18px 34px -10px rgb(17 19 24 / .18), 0 38px 64px -32px rgb(17 19 24 / .22);
}

.wsa-home.is-speaking {
    --wsa-lift: -8px;
    box-shadow: var(--wsa-spec), var(--wsa-shadow), 0 18px 34px -10px rgb(17 19 24 / .11), 0 38px 64px -32px rgb(17 19 24 / .13);
}

.wsa-home.is-speaking::before {
    opacity: 1;
}

.wsa-home.is-listening {
    --wsa-lift: -4px;
}

/* the tabs on the top edge: Earlier at the left, Minimise at the right (each its own small solid pane: glass never nests) */
.wsa-tabs {
    position: absolute;
    left: 0;
    right: 0;
    top: -32px;
    height: 32px;
    pointer-events: none;
}

.wsa-tab {
    position: absolute;
    bottom: 0;
    height: 32px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 11px 0 12px;
    border: 1px solid var(--wsa-edge);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: var(--wsa-sheen), var(--wsa-plate);
    font: 500 13.5px/1 var(--wsa-ui);
    color: var(--wsa-ink);
    white-space: nowrap;
}

.wsa-tab b {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.wsa-tab svg {
    width: 11px;
    height: 11px;
    flex: none;
}

.wsa-tab--earlier {
    left: 20px;
}

.wsa-tab--min {
    right: 32px;
    width: 48px;
    padding: 0;
}

/* The signature: a 2px line along the top edge, inset 14px, ending in the gold star a little above the right corner
   (line.ts: a 32px box centred on the edge, the star 7px above the line). */
.wsa-sig {
    position: absolute;
    left: 14px;
    right: 14px;
    top: -16px;
    height: 32px;
    container-type: size;
    pointer-events: none;
    z-index: 3;
}

.wsa-sig-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 15px;
    height: 2px;
    border-radius: 1px;
    background: var(--wsa-line);
}

.wsa-sig > .wsa-star {
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    translate: calc(var(--wsa-ride) * 100cqw - 9px) 0;
}

/* THINKING: the quick ripple travelling along the line (line.ts linePath "think": a 5px crest with a small trough each side) */
.wsa-sig-ripple {
    position: absolute;
    left: 0;
    right: 0;
    top: 7px;
    height: 18px;
    background: var(--wsa-line);
    opacity: 0;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 16'%3E%3Cpath d='M0 8L5 7.89L10 7.88L15 7.95L20 8.17L25 8.58L30 9.16L35 9.73L40 10.02L45 9.73L50 8.68L55 7L60 5.09L65 3.58L70 3L75 3.58L80 5.09L85 7L90 8.68L95 9.73L100 10.02L105 9.73L110 9.16L115 8.58L120 8.17L125 7.95L130 7.88L135 7.89L140 8' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 16'%3E%3Cpath d='M0 8L5 7.89L10 7.88L15 7.95L20 8.17L25 8.58L30 9.16L35 9.73L40 10.02L45 9.73L50 8.68L55 7L60 5.09L65 3.58L70 3L75 3.58L80 5.09L85 7L90 8.68L95 9.73L100 10.02L105 9.73L110 9.16L115 8.58L120 8.17L125 7.95L130 7.88L135 7.89L140 8' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat;
    -webkit-mask-size: 160px 18px;
    mask-size: 160px 18px;
    -webkit-mask-position: calc(var(--wsa-ripple) * 100%) 0;
    mask-position: calc(var(--wsa-ripple) * 100%) 0;
}

.wsa-home.is-thinking .wsa-sig-ripple {
    opacity: 1;
}

/* the straight line opens where the ripple is */
.wsa-home.is-thinking .wsa-sig-line {
    --wsa-at: calc(80px + var(--wsa-ripple) * (100% - 160px));
    -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--wsa-at) - 82px), transparent calc(var(--wsa-at) - 78px), transparent calc(var(--wsa-at) + 78px), #000 calc(var(--wsa-at) + 82px));
    mask-image: linear-gradient(90deg, #000 calc(var(--wsa-at) - 82px), transparent calc(var(--wsa-at) - 78px), transparent calc(var(--wsa-at) + 78px), #000 calc(var(--wsa-at) + 82px));
}

/* SPEAKING: the slim cobalt to gold ribbon swelling in the line's centre (line.ts drawRibbon, two strands) */
.wsa-sig-ribbon {
    position: absolute;
    left: 0;
    right: 0;
    top: 4px;
    height: 24px;
    background: var(--wsa-line);
    opacity: 0;
    scale: 1 calc(.22 + .78 * var(--wsa-swell));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 20' preserveAspectRatio='none'%3E%3Cpath d='M0 9.4L20 7.63L40 7.16L60 7.57L80 7.42L100 6.56L120 5.99L140 5.58L160 4.23L180 2.05L200 2.49L220 5.56L240 8.11L260 7.54L280 5.12L300 4.03L320 5.11L340 6.72L360 7.7L380 8.5L400 9.4L400 10.6L380 12.22L360 12.26L340 11.5L320 12.03L300 14.09L280 15.76L260 16L240 15.87L220 16.1L200 15.61L180 13.77L160 12.17L140 13.7L120 16.29L100 16.76L80 14.66L60 12.37L40 11.54L20 11.39L0 10.6Z'/%3E%3Cpath fill-opacity='.24' transform='translate(400 -2.4) scale(-1 1.24)' d='M0 9.4L20 7.63L40 7.16L60 7.57L80 7.42L100 6.56L120 5.99L140 5.58L160 4.23L180 2.05L200 2.49L220 5.56L240 8.11L260 7.54L280 5.12L300 4.03L320 5.11L340 6.72L360 7.7L380 8.5L400 9.4L400 10.6L380 12.22L360 12.26L340 11.5L320 12.03L300 14.09L280 15.76L260 16L240 15.87L220 16.1L200 15.61L180 13.77L160 12.17L140 13.7L120 16.29L100 16.76L80 14.66L60 12.37L40 11.54L20 11.39L0 10.6Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 20' preserveAspectRatio='none'%3E%3Cpath d='M0 9.4L20 7.63L40 7.16L60 7.57L80 7.42L100 6.56L120 5.99L140 5.58L160 4.23L180 2.05L200 2.49L220 5.56L240 8.11L260 7.54L280 5.12L300 4.03L320 5.11L340 6.72L360 7.7L380 8.5L400 9.4L400 10.6L380 12.22L360 12.26L340 11.5L320 12.03L300 14.09L280 15.76L260 16L240 15.87L220 16.1L200 15.61L180 13.77L160 12.17L140 13.7L120 16.29L100 16.76L80 14.66L60 12.37L40 11.54L20 11.39L0 10.6Z'/%3E%3Cpath fill-opacity='.24' transform='translate(400 -2.4) scale(-1 1.24)' d='M0 9.4L20 7.63L40 7.16L60 7.57L80 7.42L100 6.56L120 5.99L140 5.58L160 4.23L180 2.05L200 2.49L220 5.56L240 8.11L260 7.54L280 5.12L300 4.03L320 5.11L340 6.72L360 7.7L380 8.5L400 9.4L400 10.6L380 12.22L360 12.26L340 11.5L320 12.03L300 14.09L280 15.76L260 16L240 15.87L220 16.1L200 15.61L180 13.77L160 12.17L140 13.7L120 16.29L100 16.76L80 14.66L60 12.37L40 11.54L20 11.39L0 10.6Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

.wsa-home.is-speaking .wsa-sig-ribbon {
    opacity: 1;
}

/* LISTENING: Superstrate is quiet; its line lies flat and dim, the star dims */
.wsa-home.is-listening .wsa-sig-line {
    opacity: .3;
}

.wsa-home.is-listening .wsa-sig > .wsa-star {
    opacity: .4;
}

/* the body (every text part is a block, so the home also works written in spans, as inside a button) */
.wsa-body {
    position: relative;
    display: block;
    padding: 24px 0 0;
}

.wsa-body > p {
    margin: 0;
}

.wsa-ex, .wsa-disc, .wsa-said, .wsa-answer, .wsa-credit, .wsa-card-prompt {
    display: block;
}

/* the disclosure: the first thing read, never smaller than the rest */
.wsa-home .wsa-disc {
    margin: 0 24px 14px;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--wsa-muted);
}

.wsa-ex {
    margin: 0 24px;
}

.wsa-ex + .wsa-ex {
    margin-top: 14px;
}

/* the Curator's Label: index, destination, kind; then the words */
.wsa-home .wsa-label {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: baseline;
    margin: 0 0 8px;
}

.wsa-idx {
    font: 500 13.5px/1 var(--wsa-mono);
    color: var(--wsa-muted);
    font-variant-numeric: tabular-nums;
}

.wsa-dest {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--wsa-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wsa-kind {
    font: 500 13.5px/1 var(--wsa-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--wsa-muted);
    white-space: nowrap;
}

.wsa-kind.is-live {
    color: var(--wsa-ink);
}

.wsa-home .wsa-said {
    margin: 0 0 8px 44px;
    font-size: 15px;
    line-height: 1.45;
    color: var(--wsa-muted);
}

.wsa-home .wsa-answer {
    margin: 0 0 0 44px;
    font-size: 17.5px;
    line-height: 1.5;
    color: var(--wsa-ink);
    text-wrap: pretty;
}

/* the cover line while thinking ("Let me look that up for you."): lighter ink until the answer starts */
.wsa-home .wsa-answer.is-cover {
    color: var(--wsa-muted);
}

/* the words: each its own box so it can fade up 4px; the trailing space stays inside the word */
.wsa-w {
    display: inline-block;
    white-space: pre;
}

/* a note under an answer (13px muted in the product) */

/* Go to and the checkbox inside the home (screens without a left zone): a row under the answer */

/* the input line: flat and light, a hairline, no well; one key (mic, or send while typed) and close */
.wsa-input {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
    box-sizing: border-box;
    height: 50px;
    margin: 16px 12px 8px;
    padding: 0 3px 0 16px;
    border-radius: 12px;
    background: rgb(255 255 255 / .4);
    border: 1px solid rgb(17 19 24 / .08);
}

.wsa-input.is-focus {
    border-color: color-mix(in srgb, var(--wsa-cobalt) 46%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wsa-cobalt) 12%, transparent), 0 2px 16px -2px color-mix(in srgb, var(--wsa-cobalt) 22%, transparent);
}

.wsa-ph {
    flex: 1;
    min-width: 0;
    font-size: 16.5px;
    line-height: 1.2;
    color: var(--wsa-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* typed words in place of the placeholder (add .is-typed to .wsa-ph, or to .wsa-input to swap the mic for send) */

.wsa-key {
    flex: none;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 10.5px;
    color: var(--wsa-ink);
}

.wsa-key svg {
    width: 21px;
    height: 21px;
    display: block;
}

.wsa-key--close svg {
    width: 16px;
    height: 16px;
    opacity: .75;
}

.wsa-key--send {
    display: none;
}

/* the six bar meter beside the mic key, only while listening */
.wsa-bars {
    display: none;
    align-items: center;
    gap: 3px;
    height: 26px;
    margin-right: 6px;
}

.wsa-bars i {
    display: block;
    width: 3px;
    height: 20px;
    border-radius: 1px;
    background: var(--wsa-ink);
    transform-origin: 50% 50%;
}

.wsa-bars i:nth-child(1) { scale: 1 .4; }
.wsa-bars i:nth-child(2) { scale: 1 .75; }
.wsa-bars i:nth-child(3) { scale: 1 1; }
.wsa-bars i:nth-child(4) { scale: 1 .6; }
.wsa-bars i:nth-child(5) { scale: 1 .85; }
.wsa-bars i:nth-child(6) { scale: 1 .45; }

.wsa-home.is-listening .wsa-bars,
.wsa-input.is-listening .wsa-bars {
    display: flex;
}

/* The meter takes the end of the field while it listens, as the product draws it over the field: the placeholder runs on
   under it and fades out there, rather than ending in a cut word and an ellipsis (polish round, 2 October 2026). */
.wsa-home.is-listening .wsa-ph,
.wsa-input.is-listening .wsa-ph {
    text-overflow: clip;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent);
}

.wsa-home.is-listening .wsa-key--mic,
.wsa-input.is-listening .wsa-key--mic {
    background: var(--wsa-ink);
    color: rgb(var(--wsa-tone));
}

/* the credit: the quietest line on the plate, under the input */
.wsa-home .wsa-credit {
    margin: -2px 0 0;
    padding: 0 22px 10px;
    text-align: right;
    font-size: 13.5px;
    line-height: 1.5;
    letter-spacing: .01em;
    color: var(--wsa-credit);
}

.wsa-credit span {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    text-decoration-color: color-mix(in srgb, currentColor 25%, transparent);
}

/* ------------------------------------------------------------------ Go to (brand), Go back (ink), the checkbox */

.wsa-go {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    box-sizing: border-box;
    height: 52px;
    padding: 0 16px 0 19px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--wsa-brand);
    color: var(--wsa-brand-ink);
    font: 500 16.5px/1 var(--wsa-ui);
    -webkit-font-smoothing: antialiased;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgb(17 19 24 / .18), 0 10px 22px -10px rgb(17 19 24 / .55);
}

.wsa-go > * {
    position: relative;
}

.wsa-go svg {
    flex: none;
    width: 19px;
    height: 19px;
    display: block;
}

/* the arrow points toward the section: down by default; data-dir="up" | "left" | "right" turns it */
.wsa-go[data-dir="up"] svg { rotate: 180deg; }
.wsa-go[data-dir="left"] svg { rotate: 90deg; }
.wsa-go[data-dir="right"] svg { rotate: -90deg; }

/* the 2px countdown bar along the foot, over 6s: --wsa-count 0 (full) to 1 (gone) */
.wsa-go-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2.5px;
    background: currentColor;
    opacity: .45;
    transform-origin: 0 50%;
    scale: calc(1 - var(--wsa-count)) 1;
}

/* Go back: neutral ink, the arrow up, no countdown */
.wsa-go--back {
    background: var(--wsa-ink);
    color: rgb(var(--wsa-tone));
}

.wsa-go--back svg {
    rotate: 180deg;
}

.wsa-go--back .wsa-go-bar {
    display: none;
}

/* the checkbox: on its own small pane beside the home; .wsa-check--flat inside the home */

/* ------------------------------------------------------------------ corner marks over a section of the host page */

.wsa-marks {
    position: absolute;
    pointer-events: none;
    font-family: var(--wsa-ui);
}

.wsa-mark {
    position: absolute;
    width: 24px;
    height: 24px;
}

.wsa-mark::before,
.wsa-mark::after {
    content: '';
    position: absolute;
    background: var(--wsa-mark);
}

.wsa-mark::before {
    width: 24px;
    height: 2px;
    scale: var(--wsa-draw) 1;
}

.wsa-mark::after {
    width: 2px;
    height: 24px;
    scale: 1 var(--wsa-draw);
}

.wsa-mark--tl { left: -6px; top: -6px; translate: calc((var(--wsa-draw) - 1) * 6px) calc((var(--wsa-draw) - 1) * 6px); }
.wsa-mark--tr { right: -6px; top: -6px; translate: calc((1 - var(--wsa-draw)) * 6px) calc((var(--wsa-draw) - 1) * 6px); }
.wsa-mark--bl { left: -6px; bottom: -6px; translate: calc((var(--wsa-draw) - 1) * 6px) calc((1 - var(--wsa-draw)) * 6px); }
.wsa-mark--br { right: -6px; bottom: -6px; translate: calc((1 - var(--wsa-draw)) * 6px) calc((1 - var(--wsa-draw)) * 6px); }

.wsa-mark--tl::before, .wsa-mark--tl::after { left: 0; top: 0; }
.wsa-mark--tr::before, .wsa-mark--tr::after { right: 0; top: 0; }
.wsa-mark--bl::before, .wsa-mark--bl::after { left: 0; bottom: 0; }
.wsa-mark--br::before, .wsa-mark--br::after { right: 0; bottom: 0; }
.wsa-mark--tl::before, .wsa-mark--bl::before { transform-origin: 0 50%; }
.wsa-mark--tr::before, .wsa-mark--br::before { transform-origin: 100% 50%; }
.wsa-mark--tl::after, .wsa-mark--tr::after { transform-origin: 50% 0; }
.wsa-mark--bl::after, .wsa-mark--br::after { transform-origin: 50% 100%; }

/* the tag: a dot in the marks colour, the index in Mono, the section (wrap it in a span to set it in Geist) */
.wsa-marks-tag {
    position: absolute;
    left: -6px;
    top: -42px;
    height: 30px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 11px 0 10px;
    border: 1px solid var(--wsa-edge);
    border-radius: 8px;
    background: var(--wsa-plate);
    box-shadow: 0 1px 2px rgb(17 19 24 / .08), 0 8px 18px -10px rgb(17 19 24 / .2);
    font: 500 13.5px/1 var(--wsa-mono);
    color: var(--wsa-ink);
    white-space: nowrap;
    opacity: var(--wsa-draw);
}

.wsa-marks-tag b {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--wsa-mark);
    font-size: 0;
    color: transparent;
}

.wsa-marks-tag span {
    font-family: var(--wsa-ui);
    font-size: 14px;
    font-weight: 500;
}

/* the tag inside the marked box (the product's tag-inside, used when there is no room above the section) */
.wsa-marks.tag-inside .wsa-marks-tag {
    left: 8px;
    top: 8px;
}

/* one light scanning down the section: --wsa-scan 0 to 1 */
.wsa-marks-scan {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.wsa-marks-scan::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 46%;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--wsa-mark) 13%, transparent) 70%, color-mix(in srgb, var(--wsa-mark) 30%, transparent) 98%, transparent);
    translate: 0 calc(-100% + var(--wsa-scan) * 330%);
    opacity: clamp(0, min(var(--wsa-scan) * 12, (1 - var(--wsa-scan)) * 12), 1);
}

/* ------------------------------------------------------------------ a card on glass (cards.ts, calendar-card.ts) */

.wsa-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 400px;
    max-width: 100%;
    padding: 18px 18px 16px;
    border-radius: 14px;
    font-size: 16px;
    line-height: 1.35;
    text-align: left;
}

.wsa-card > * {
    position: relative;
}

.wsa-card > p {
    margin: 0;
}

/* inside the home a card is drawn flat (glass never nests in glass) */
.wsa-home .wsa-card {
    width: auto;
    margin: 12px 24px 0;
    padding: 0;
    border-color: transparent;
    background: none;
    box-shadow: none;
}

.wsa-home .wsa-card::after {
    display: none;
}

.wsa-card-prompt {
    font-size: 16px;
    color: var(--wsa-ink);
}

.wsa-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.wsa-chip,
.wsa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 50px;
    min-width: 50px;
    padding: 0 18px;
    border: 1px solid var(--wsa-edge);
    border-radius: 11px;
    background: rgb(17 19 24 / .03);
    color: var(--wsa-ink);
    font-size: 16px;
    line-height: 1.2;
    white-space: nowrap;
}

/* a picked choice fills with solid ink */
.wsa-chip.is-picked {
    background: var(--wsa-ink);
    border-color: var(--wsa-ink);
    color: rgb(var(--wsa-tone));
}

/* the booking: day leaves (the weekday in Mono capitals over the numeral), then a grid of times */
.wsa-days {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
    gap: 9px;
}

.wsa-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    box-sizing: border-box;
    min-height: 62px;
    padding: 9px 10px;
    border-radius: 11px;
    background: rgb(17 19 24 / .05);
    color: var(--wsa-ink);
    font-variant-numeric: tabular-nums;
}

.wsa-day b {
    font: 500 13.5px/1.1 var(--wsa-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--wsa-muted);
}

.wsa-day span {
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.01em;
}

.wsa-day.is-picked,
.wsa-time.is-picked {
    background: var(--wsa-brand);
    color: var(--wsa-brand-ink);
}

.wsa-day.is-picked b,
.wsa-time.is-picked small {
    color: inherit;
}

.wsa-day.is-off,
.wsa-time.is-off {
    opacity: .38;
}

.wsa-times {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 9px;
}

/* a time: the numerals, and (optionally) a quieter meridiem in <small> */
.wsa-time {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-sizing: border-box;
    min-height: 50px;
    padding: 0 8px;
    border-radius: 11px;
    background: rgb(17 19 24 / .05);
    color: var(--wsa-ink);
    font-size: 16.5px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.wsa-time small {
    font-size: 13.5px;
    color: var(--wsa-muted);
}

.wsa-zone {
    display: block;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--wsa-muted);
}

/* a field: its label, then the 44px field (drawn 50); what it holds stays a skeleton bar */
.wsa-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.wsa-field-label {
    font-size: 14px;
    line-height: 1.2;
    color: var(--wsa-ink);
}

.wsa-field-value {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 50px;
    padding: 0 14px;
    border-radius: 11px;
    background: rgb(255 255 255 / .5);
    border: 1px solid rgb(17 19 24 / .16);
    font-size: 16.5px;
    color: var(--wsa-ink);
}

.wsa-field-value .wsa-skel {
    --w: 46%;
}

.wsa-card-note {
    display: block;
    padding-top: 11px;
    border-top: 1px solid var(--wsa-edge);
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--wsa-muted);
}

.wsa-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.wsa-btn {
    padding: 0 20px;
    font-weight: 500;
}

.wsa-btn--brand {
    background: var(--wsa-brand);
    border-color: transparent;
    color: var(--wsa-brand-ink);
}

.wsa-btn--plain {
    background: transparent;
    border-color: transparent;
    color: var(--wsa-muted);
}

/* ------------------------------------------------------------------ skeleton bars (everything the viewer need not read) */
/* The original story's warm wireframe (s2-base world-story-visitors.css and its wireframe SVGs, owner 2 October 2026:
   "never grey"): round-ended bars in the beige family. Body lines #ede7dd (.world-story-v-hsub), labels and links
   #e4ddd1, headings and names #dbd2c4, a typed line #ddd5c8 (the original query bar). Set a bar's tone with a modifier or
   background-color, never the background shorthand (it would drop the shimmer).
     .wsa-skel.is-grow     a bar a timeline grows from its left end: --wsa-grow 0 to 1 (default 1, so a bar with no style
                           is the finished frame). A typed line: tween it with ease steps(n), the original's typing.
     .wsa-skel.is-shimmer  an idle light sweeping along the bar (1.6s, then 3.4s at rest), CSS, only on the centred scene
                           (motion preferences below); stagger bars with --wsa-delay. */
:root {
    --wsa-skel-c: #ede7dd;
    --wsa-skel-mid: #e4ddd1;
    --wsa-skel-strong: #dbd2c4;
    --wsa-skel-type: #ddd5c8;
}

.wsa-skel {
    display: block;
    width: var(--w, 100%);
    height: 10px;
    border-radius: 999px;
    background-color: var(--wsa-skel-c);
}

.wsa-skel--type {
    background-color: var(--wsa-skel-type);
}

/* a heading's bar: taller, the strong tone */

/* a bar on the brand clay (a button's words) */

.wsa-skel.is-grow {
    scale: var(--wsa-grow) 1;
    transform-origin: 0 50%;
}

/* The light is the bar's own layer, moved with translate (polish round, 2 October 2026): the same gradient, box and path as
   the background-position sweep it replaces (a 250% wide image going from 140% to -40%, so its left edge from -2.1 to
   +.6 bar widths: -84% to 24% of itself), but the compositor runs it, so an idle bar no longer repaints every frame. At
   rest it sits off the bar's right end, clipped by the bar's round ends: nothing shows. */
.wsa-skel.is-shimmer {
    position: relative;
    overflow: hidden;
}

.wsa-skel.is-shimmer::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 250%;
    height: 100%;
    background: linear-gradient(100deg, rgb(255 252 247 / 0) 30%, rgb(255 252 247 / .9) 50%, rgb(255 252 247 / 0) 70%);
    translate: 24% 0;
    pointer-events: none;
}

@keyframes wsa-shimmer {
    0% { translate: -84% 0; animation-timing-function: cubic-bezier(.45, 0, .3, 1); }
    32%, 100% { translate: 24% 0; }
}

/* ------------------------------------------------------------------ the host website, "Your Business" */
/* Two colours (owner, 2 October 2026, 19:35): neutrals (a white page, ink text, light greys) and the brand clay in two
   shades (the clay and one light tint). No other colour; Aura's line and star are the product's own. */

.wsa-site {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid rgb(17 19 24 / .1);
    border-radius: 12px;
    background: var(--wsa-site-page);
    box-shadow: 0 1px 2px rgb(17 19 24 / .06), 0 18px 40px -22px rgb(17 19 24 / .35);
    color: var(--wsa-site-ink);
    font-family: 'DM Sans', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-align: left;
}

/* the browser's own chrome: three quiet dots, the page's tab, the address bar (a skeleton, never a domain), in the original
   wireframe's warm tones */
.wsa-site-chrome {
    flex: none;
    display: flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 14px;
    background: var(--wsa-site-chrome);
    border-bottom: 1px solid var(--wsa-site-line);
}

.wsa-site-chrome > i {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ddd5c8;
}

.wsa-site-tab {
    flex: none;
    margin-left: 12px;
    padding: 7px 14px;
    border-radius: 8px;
    background: var(--wsa-site-page);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1;
    color: var(--wsa-site-ink);
}

.wsa-site-address {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    height: 26px;
    margin-left: 10px;
    padding: 0 12px;
    border-radius: 8px;
    background: #ebe5da;
}

.wsa-site-address .wsa-skel {
    --w: 34%;
    height: 8px;
    background-color: #d9d1c4;
}

.wsa-site-page {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* the site's own nav: its mark and name, three links and its Book a call */
.wsa-site-nav {
    flex: none;
    display: flex;
    align-items: center;
    gap: 24px;
    height: 60px;
    padding: 0 28px;
}

.wsa-site-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--wsa-site-ink);
    white-space: nowrap;
}

/* the site's mark: gone (owner, 2 October 2026: "remove that ugly clay circle"); "Your Business" stands alone as words.
   Hidden here, so markup that still carries the <i> draws nothing and no gap */
.wsa-site-mark {
    display: none;
}

/* the nav's links and its Book a call as skeletons (the viewer need not read them): bars inside the same boxes */
.wsa-site-links > .wsa-skel {
    --w: 54px;
    flex: none;
    height: 9px;
    background-color: var(--wsa-skel-mid);
}

.wsa-site-cta > .wsa-skel {
    --w: 70px;
    flex: none;
    height: 9px;
}

.wsa-site-links {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-left: auto;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--wsa-site-muted);
    white-space: nowrap;
}

.wsa-site-cta {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 17px;
    border-radius: 9px;
    background: var(--wsa-brand);
    color: var(--wsa-brand-ink);
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
}

/* the hero: the headline (a new string) and two lines of body text beside the photo block */
.wsa-site-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38%;
    grid-template-rows: auto auto auto 1fr;
    column-gap: 30px;
    row-gap: 10px;
    padding: 14px 28px 24px;
    align-items: start;
}

.wsa-site-h1 {
    grid-column: 1;
    margin: 6px 0 6px;
    font-family: 'wsa-caslon', Georgia, serif;
    font-size: 36px;
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -.005em;
    color: var(--wsa-site-ink);
    text-wrap: balance;
}

.wsa-site-hero > .wsa-skel {
    grid-column: 1;
    height: 11px;
}

.wsa-site-hero > .wsa-skel:nth-of-type(2) {
    --w: 72%;
}

/* the hero image: a skeleton picture in the original wireframe's warm tones (its image block #f5f0e8), with a small sun
   and one low hill a shade darker so it reads as "a picture" at the card's scale (abstract: no scene, product or person).
   --brand keeps the earlier clay tint for a picture that must carry the brand. */
.wsa-site-art {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: stretch;
    min-height: 120px;
    border-radius: 12px;
    background:
        radial-gradient(circle closest-side at 28% 34%, #e8dfd1 0 13%, rgb(232 223 209 / 0) 14%),
        radial-gradient(130% 62% at 68% 112%, #ebe3d6 0 58%, rgb(235 227 214 / 0) 59%),
        #f5f0e8;
}

/* the packages: Starter, Growth, Custom; no prices (skeleton bars) */
.wsa-site-packages {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 0 28px 26px;
}

.wsa-site-h2 {
    grid-column: 1 / -1;
    margin: 0 0 2px;
    font-family: 'wsa-caslon', Georgia, serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.1;
    color: var(--wsa-site-ink);
}

.wsa-pkg {
    display: flex;
    flex-direction: column;
    gap: 9px;
    box-sizing: border-box;
    padding: 16px 16px 18px;
    border: 1px solid var(--wsa-site-line);
    border-radius: 12px;
    background: var(--wsa-site-page);
    box-shadow: 0 1px 2px rgb(17 19 24 / .04);
}

/* the package's name only (a child): a descendant rule also set the corner marks' tag dot (its <b>) in 17px ink, a second,
   black dot under the cobalt one in beat 5 (polish round, 2 October 2026) */
.wsa-pkg > b {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--wsa-site-ink);
}

.wsa-pkg .wsa-skel:nth-of-type(1) {
    --w: 86%;
}

.wsa-pkg .wsa-skel:nth-of-type(2) {
    --w: 62%;
}

.wsa-pkg .wsa-skel:nth-of-type(3) {
    --w: 44%;
}

/* a package the visitor is looking at: a brand outline and a soft lift */
.wsa-pkg.is-lit {
    border-color: var(--wsa-brand);
    box-shadow: inset 0 0 0 1px var(--wsa-brand), 0 10px 24px -14px rgb(180 70 42 / .45);
}

/* ------------------------------------------------------------------ motion preferences: the idle loops stop */

/* The Crest's mark and the shimmering bars live only where idle motion belongs: the centred picture of an open story
   (either story's .world-story-beat.is-current, or the Business story's .is-b-centre), the choice screen while
   world/story.js marks it .is-previewing, or anything inside .wsa-live (a workbench or a fixture). Never under reduced
   motion or the site's Pause: there the rest frame shows (the product's still mark, the bars without their light). */
@media (prefers-reduced-motion: no-preference) {
    body:not([data-motion-paused="true"]) :is(.world-story-reel.is-open:not(.is-static) .world-story-beat.is-current, .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.is-previewing .world-story-preview, .wsa-live) .wsa-crest-wave {
        animation: wsa-crest-swell 5s ease-in-out infinite;
    }

    body:not([data-motion-paused="true"]) :is(.world-story-reel.is-open:not(.is-static) .world-story-beat.is-current, .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.is-previewing .world-story-preview, .wsa-live) .wsa-crest-glint {
        animation: wsa-crest-swell 5s ease-in-out infinite, wsa-crest-glint 10s linear infinite;
    }

    body:not([data-motion-paused="true"]) :is(.world-story-reel.is-open:not(.is-static) .world-story-beat.is-current, .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.is-previewing .world-story-preview, .wsa-live) .wsa-crest-star {
        animation: wsa-crest-star 10s linear infinite;
    }

    body:not([data-motion-paused="true"]) :is(.world-story-reel.is-open:not(.is-static) .world-story-beat.is-current, .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.is-previewing .world-story-preview, .wsa-live) .wsa-skel.is-shimmer::after {
        animation: wsa-shimmer 5s linear var(--wsa-delay, 0s) infinite;
    }
}

/* ================================================================== Your Visitors card
   The choice card's picture (story.html, .world-story-preview--visitors): one frozen moment of the new Aura on the "Your
   Business" website, the home open with its greeting, as the product greets a visitor (home.ts: "00", the business's
   name, GREETING; the admin's suggested greeting, word for word). Owner, 2 October 2026 (21:10): the site keeps its
   words (nav, Book a call, Packages and the package names) and Aura its own; skeleton bars only for body-text lines, the
   original warm ones, shimmering; no mark beside the name; no Go to (a thumbnail gives it no context); the home a little
   under half the site's width, centred at the foot of the page, the page plainly around it. Drawn on a
   736 x 477 plan (the picture's shape) and scaled to fit the picture: at 1524 x 718 that is .75, the smallest words
   11.25px on screen. The stage keeps the shared .world-story-pv-stage class, so the card's hover and focus lift and the
   opening flight (a copy of the picture) work as before. Idle: a light runs along the home's line to the star, every 10s;
   the bars shimmer (motion preferences, above). It moves only while world/story.js marks the choice screen
   .is-previewing; world-story.css pauses it under the site's Pause and stops it under reduced motion (the animated parts
   are real elements on single-class selectors, so those rules win). */

@property --wsa-vk { syntax: '<number>'; inherits: true; initial-value: 1; }

.wsa-vcard {
    --wsa-vk: min(tan(atan2(100cqw, 736px)), tan(atan2(100cqh, 477px)));
    overflow: hidden;
    background: var(--wsa-site-page);
}

.wsa-vcard-box {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 736px;
    height: 477px;
    translate: -50% -50%;
    scale: var(--wsa-vk);
    font-size: 16px;
    line-height: 1.35;
    text-align: left;
}

/* the website: no browser chrome here (the card is the window); nav, hero, then the top of Packages */
.wsa-vcard .wsa-vcard-site {
    position: absolute;
    inset: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.wsa-vcard .wsa-site-nav {
    gap: 22px;
    height: 60px;
    padding: 0 32px;
    border-bottom: 1px solid var(--wsa-site-line);
}

.wsa-vcard .wsa-site-brand {
    font-size: 17px;
}

.wsa-vcard .wsa-site-links {
    gap: 22px;
    font-size: 15px;
}

.wsa-vcard .wsa-site-cta {
    height: 36px;
    padding: 0 15px;
    border-radius: 8px;
    font-size: 15px;
}

.wsa-vcard .wsa-site-hero {
    grid-template-columns: minmax(0, 1fr) 236px;
    grid-template-rows: auto auto auto 1fr;
    column-gap: 36px;
    row-gap: 12px;
    padding: 28px 32px 0;
}

.wsa-vcard .wsa-site-h1 {
    margin: 0 0 8px;
    font-size: 38px;
    line-height: 1.06;
}

.wsa-vcard .wsa-site-hero > .wsa-skel:nth-of-type(1) {
    --w: 92%;
}

.wsa-vcard .wsa-site-hero > .wsa-skel:nth-of-type(2) {
    --w: 64%;
}

.wsa-vcard .wsa-site-art {
    height: 164px;
    min-height: 0;
}

/* Packages: its heading, then the three packages by name, their body lines as skeleton bars. Each card's content is
   centred, so while the home is open (x 198 to 538) Starter and Custom read whole beside it and no word is cut at its
   edge; while it is folded into the Crest the three cards show alike. */
.wsa-vcard .wsa-site-packages {
    gap: 12px 14px;
    padding: 26px 32px 0;
}

.wsa-vcard .wsa-pkg {
    align-items: center;
    height: 86px;
    padding: 15px 16px;
    gap: 10px;
    text-align: center;
}

.wsa-vcard .wsa-pkg > b {
    font-size: 16px;
}

.wsa-vcard .wsa-pkg > .wsa-skel:nth-of-type(1) {
    --w: 84%;
}

.wsa-vcard .wsa-pkg > .wsa-skel:nth-of-type(2) {
    --w: 58%;
}

/* the home: centred at the foot of the page, never dimming it, 340 of the site's 736 (46%); no disclosure (it has gone up
   into Earlier, as in the product), so the label row, the greeting on two lines, the input and the credit */
.wsa-vcard .wsa-vcard-home {
    position: absolute;
    left: 198px;
    bottom: 10px;
    width: 340px;
}

.wsa-vcard .wsa-tabs {
    top: -26px;
    height: 26px;
}

.wsa-vcard .wsa-tab {
    height: 26px;
    gap: 6px;
    padding: 0 9px 0 10px;
    font-size: 15px;
}

.wsa-vcard .wsa-tab svg {
    width: 10px;
    height: 10px;
}

.wsa-vcard .wsa-tab--earlier {
    left: 14px;
}

.wsa-vcard .wsa-tab--min {
    right: 22px;
    width: 38px;
    padding: 0;
}

.wsa-vcard .wsa-sig {
    left: 12px;
    right: 12px;
}

.wsa-vcard .wsa-sig > .wsa-star {
    width: 16px;
    height: 16px;
    translate: calc(var(--wsa-ride) * 100cqw - 8px) 0;
}

.wsa-vcard .wsa-body {
    padding-top: 16px;
}

.wsa-vcard .wsa-ex {
    margin: 0 14px;
}

/* the greeting's label row (home.ts: "00", the business's name, the kind word), its Mono parts at 15px so nothing on the
   card is under 11px on screen */
.wsa-vcard .wsa-label {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 8px;
    margin-bottom: 6px;
}

.wsa-vcard .wsa-idx,
.wsa-vcard .wsa-kind {
    font-size: 15px;
}

.wsa-vcard .wsa-dest {
    font-size: 15.5px;
}

/* the greeting, in the answer's place under the name */
.wsa-vcard .wsa-answer {
    margin: 0 0 0 38px;
    font-size: 16px;
    line-height: 1.42;
}

.wsa-vcard .wsa-input {
    height: 40px;
    margin: 11px 9px 6px;
    padding: 0 2px 0 13px;
    border-radius: 11px;
}

.wsa-vcard .wsa-ph {
    font-size: 15px;
}

.wsa-vcard .wsa-key {
    width: 34px;
    height: 34px;
    border-radius: 9px;
}

.wsa-vcard .wsa-key svg {
    width: 17px;
    height: 17px;
}

.wsa-vcard .wsa-key--close svg {
    width: 13px;
    height: 13px;
}

.wsa-vcard .wsa-credit {
    padding: 0 15px 8px;
    font-size: 15px;
    line-height: 1.3;
}

/* The loop (owner, 2 October 2026, evening): the Crest waits at the foot of the page, a pointer comes and clicks it, and the
   home opens out of it as the product's does and greets, then folds back into it; 11s, round and round. The product's
   motion (aura.css, tokens.css): the plate's clip grows out of the resting button's footprint in 420ms on the ease-out
   cubic-bezier(.22,1,.36,1) and folds back in 320ms on the ease-in-out, its opacity going in the last 60ms; the body,
   line and tabs fade in over 0.24s after 0.16s; the button lifts away (is-gone) as the home opens and returns as it
   closes; the words fade up 4px, 55ms apart, while the star rides the line to the crest.
     0 to 1.6s    open, the greeting written (0% is the finished picture: the flight's copy and reduced motion show it)
     1.6 to 2.2   the home folds into the Crest, which comes back
     2.2 to 5.5   the Crest at rest, its mark alive (the kit's own loop) and one lap of its edge light (2.6 to 4.4)
     4.4 to 5.6   the pointer glides in; 5.6 it clicks: the Crest dips, a ripple
     5.8 to 6.2   the home grows out of the Crest; 6.2 to 7.1 the greeting writes in, the star riding the line
     6.0 to 6.9   the pointer drifts away; then the home holds open to 11s
   Transforms, opacity, clip-path and the kit's registered numbers only. Every animated part is a single class, so
   world-story.css's gate wins: paused off the choice screen and under the site's Pause, none under reduced motion. */
.wsa-vcard .wsa-vcard-restpos {
    position: absolute;
    left: 50%;
    bottom: 10px;
    translate: -50% 0;
    scale: 1.1;                               /* the label 16px on the plan, 12px on screen */
    transform-origin: 50% 100%;
}

.wsa-vcard-crest {
    opacity: 0;
    animation: wsa-vc-crest 11s linear infinite;
}

/* The Crest's one lap of its edge light (2.6 to 4.4 s) runs on the light and the line themselves (polish round, 2 October
   2026): --wsa-lap is an inherited number, so animated on the Crest it restyled the whole Crest every frame for all 11 s,
   and it kept the Crest's own fade and lift off the compositor. Same keyframes, same clock. */
.wsa-vcard-lap {
    animation: wsa-vc-lap 11s linear infinite;
}

.wsa-vcard-home {
    animation: wsa-vc-home 11s linear infinite;
}

.wsa-vcard-in {
    animation: wsa-vc-in 11s linear infinite;
}

.wsa-vcard-w {
    animation: wsa-vc-word 11s linear calc(var(--i, 0) * 55ms) infinite;
}

.wsa-vcard-star {
    transform-origin: 50% 50%;
    animation: wsa-vc-star 11s linear infinite;
}

/* the pointer: a plain arrow, ink with a white edge; its tip (4, 2 of 24) is the hotspot */
.wsa-vcard-cursor {
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
    height: 26px;
    overflow: visible;
    fill: var(--wsa-ink);
    stroke: #ffffff;
    stroke-width: 2.6;
    stroke-linejoin: round;
    paint-order: stroke;
    transform-origin: 4.3px 2.2px;
    translate: 560px 330px;
    opacity: 0;
    animation: wsa-vc-cursor 11s linear infinite;
}

/* the click: a thin ink ring spreading from the pointer's tip */
.wsa-vcard-ripple {
    position: absolute;
    left: 366px;
    top: 425px;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    border: 2px solid rgb(17 19 24 / .3);
    border-radius: 50%;
    opacity: 0;
    scale: .3;
    animation: wsa-vc-ripple 11s linear infinite;
}

@keyframes wsa-vc-home {
    0%, 14.55% { clip-path: inset(-80px -80px -80px -80px round 14px); opacity: 1; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
    16.91% { opacity: 1; }
    17.45% { clip-path: inset(calc(100% - 44px) calc(50% - 105.6px) 0 calc(50% - 105.6px) round 13.2px); opacity: 0; }
    52.73% { clip-path: inset(calc(100% - 44px) calc(50% - 105.6px) 0 calc(50% - 105.6px) round 13.2px); opacity: 0; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
    54.18% { opacity: 1; }
    56.55%, 100% { clip-path: inset(-80px -80px -80px -80px round 14px); opacity: 1; }
}

@keyframes wsa-vc-in {
    0%, 14.55% { opacity: 1; }
    15.64% { opacity: 0; }
    54.18% { opacity: 0; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
    56.36%, 100% { opacity: 1; }
}

@keyframes wsa-vc-word {
    0%, 14.55% { opacity: 1; translate: 0 0; }
    15.64% { opacity: 0; translate: 0 4px; }
    56.36% { opacity: 0; translate: 0 4px; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
    59.09%, 100% { opacity: 1; translate: 0 0; }
}

@keyframes wsa-vc-star {
    0%, 52.72% { --wsa-ride: 1; scale: 1; }
    52.73%, 56.36% { --wsa-ride: 0; animation-timing-function: cubic-bezier(.33, 0, .2, 1); }
    64.55% { --wsa-ride: 1; scale: 1; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
    66% { scale: 1.22; }
    68.18%, 100% { --wsa-ride: 1; scale: 1; }
}

/* While the Crest is unseen (the first 1.8 s and the last 5 s of the loop) it is out of the picture altogether (display
   none, polish round, 2 October 2026): its mark's idle loops (a path morph, a light and a turn) and its edge light kept
   laying out and painting an invisible Crest, the most expensive thing on the choice screen. Seen, nothing changes. */
@keyframes wsa-vc-crest {
    0%, 16.5% { display: none; opacity: 0; translate: 0 -6px; scale: .96; }
    16.55% { display: inline-flex; opacity: 0; translate: 0 -6px; scale: .96; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
    20% { opacity: 1; translate: 0 0; scale: 1; }
    50.91% { translate: 0 0; scale: 1; animation-timing-function: cubic-bezier(.33, 0, .67, 1); }
    51.82% { translate: 0 1px; scale: .96; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
    52.73% { opacity: 1; translate: 0 0; scale: 1; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
    54.36% { display: inline-flex; opacity: 0; translate: 0 -6px; scale: .96; }
    54.4%, 100% { display: none; opacity: 0; translate: 0 -6px; scale: .96; }
}

@keyframes wsa-vc-lap {
    0%, 23.64% { --wsa-lap: 0; animation-timing-function: cubic-bezier(.45, 0, .3, 1); }
    40% { --wsa-lap: 1; }
    40.01%, 100% { --wsa-lap: 0; }
}

@keyframes wsa-vc-cursor {
    0%, 40% { translate: 560px 330px; opacity: 0; scale: 1; animation-timing-function: cubic-bezier(.45, 0, .3, 1); }
    42% { opacity: 1; }
    50% { translate: 382px 443px; opacity: 1; scale: 1; }
    50.91% { scale: 1; animation-timing-function: cubic-bezier(.33, 0, .67, 1); }
    51.45% { scale: .84; }
    52.36% { scale: 1; }
    54.55% { translate: 382px 443px; opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .3, 1); }
    62.73%, 100% { translate: 432px 486px; opacity: 0; scale: 1; }
}

@keyframes wsa-vc-ripple {
    0%, 50.91% { opacity: 0; scale: .3; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
    51.18% { opacity: .9; }
    54.09%, 100% { opacity: 0; scale: 1.5; }
}