/* Dottpace landing — the stories on Home (the founder's review, Oct 16, 2026). One engine, two stories, each told as ONE product window
   that moves forward through its steps:
   §2 "From finding to follow-through" — one drop on the sample store, found, explained, fixed and proven (4 steps; the chart is drawn
      in build.py, to scale, from the story's numbers);
   §3 "Your website growth tools, connected" — the app's sidebar and page through Visibility, Website and Growth (3 steps);
   §3 "Ready for AI agents" — the weekly agent check: stuck, fixed, finished (3 steps; its window in agent.css).
   Markup: build.py _story() (story_html, tools_html, agent_html). Behaviour: story.js. The root carries --steps (its number of steps).
   Each story carries its own heading (stacked on the left: the title, the lead right under it); while pinned it stays in view, compact.

   AT REST every element shows its step's final state. Entrances only start from hidden while they play (fill: both), so with no JS,
   Reduce motion, print or a failed script the four steps stand stacked and complete, each with its own window.
   Desktop (≥ 1024 × 700, motion allowed): story.js adds .is-pin — the stage pins under the nav, the scroll moves the ONE window
   from step 1 to 4 and the rail fills with it. Phones and short screens: a vertical timeline; each window plays once as it arrives.

   Step gates on any scene element: .fN = shown from step N on, .uN = shown until step N (gone from N on).
   Colours: tokens only (tokens.css). Motion: ARRIVE (--ease-expo) for entrances, MOVE for what is already on screen, LAND for the
   small beats (Dottpace-Identity Motion Rulebook). Only transform, opacity and clip-path animate. */

.story{
  --sw-move:var(--m-move,cubic-bezier(.65,0,.35,1));
  --sw-land:var(--m-land,cubic-bezier(.3,1.2,.5,1));
  position:relative
}

/* ====================================================================== the heading: the title, the lead under it ====================================================================== */
.story-head{max-width:46rem;margin-bottom:var(--head-gap,56px)}
.story-h.h2{max-width:14em}
.story-h.is-sub{font-size:clamp(26px,1.2rem + 1.2vw,34px);font-weight:600;line-height:1.1;letter-spacing:-.026em;text-wrap:balance}
.story-lead{margin-top:16px;max-width:60ch}
/* "Skip": the quiet way past the locked story (§2), top right of its pinned stage; hidden when the steps are stacked */
.st-skip{display:none}
.story.is-pin .st-skip{position:absolute;top:clamp(16px,3.2vh,32px);right:0;z-index:2;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px 0 12px;border-radius:var(--r-full);
  font-size:13px;font-weight:500;color:var(--text-3);box-shadow:inset 0 0 0 1px var(--line);transition:color var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out)}
.story.is-pin .st-skip:hover{color:var(--text-1);box-shadow:inset 0 0 0 1px var(--line-strong)}
.st-skip .ic{width:14px;height:14px}
/* §3: the agent check sits under the tools, after a hairline */
.agent-row{margin-top:clamp(72px,8vw,112px);padding-top:clamp(48px,5vw,72px);border-top:1px solid var(--line)}

/* ====================================================================== the words ====================================================================== */
.st-k{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;min-height:24px;padding-top:4px}
.st-n{font:500 11.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-4)}
.st-d{font-size:14px;font-weight:500;color:var(--text-1)}
.st-h{margin-top:14px;font-size:clamp(22px,1.05rem + 1vw,30px);font-weight:600;line-height:1.16;letter-spacing:-.024em;text-wrap:balance;max-width:20em}
.st-p{margin-top:16px;font-size:16px;line-height:1.62;color:var(--text-2);max-width:36em;text-wrap:pretty}
.st-facts{margin-top:24px;border-top:1px solid var(--line);max-width:36em}
.st-facts li{text-wrap:pretty;display:flex;align-items:flex-start;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.45;color:var(--text-2);font-variant-numeric:tabular-nums}
.st-facts .ic{margin-top:1px;color:var(--text-3)}
.st-hint{display:none;align-items:center;gap:6px;font:500 11px/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--text-4);transition:opacity 400ms linear}
.st-hint .ic{width:13px;height:13px}
.story.is-pin .st-hint{display:inline-flex}
.story.is-pin.has-stepped .st-hint{opacity:0}
/* §3: the area's tools, and the way to its product page */
.st-tools{margin-top:16px;font-size:13.5px;line-height:1.6;color:var(--text-3);max-width:36em}
.st-more{margin-top:12px}

/* ====================================================================== stacked (the default): a vertical timeline ====================================================================== */
.story-rail{display:none}
.st{position:relative;padding:0 0 72px 44px}
.st:last-child{padding-bottom:0}
.st::before{content:"";position:absolute;left:11.5px;top:34px;bottom:10px;width:1px;background:var(--line-strong)}
.st:last-child::before{content:none}
.st-node{position:absolute;left:0;top:0;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line-ctl);
  font:500 11.5px/1 var(--mono);color:var(--text-2);transition:background-color 240ms var(--ease-out),color 240ms var(--ease-out),box-shadow 240ms var(--ease-out)}
.st-node .ic,.sr-node .ic{display:none;width:13px;height:13px;stroke-width:2.4}
.st.is-done .st-node{background:var(--text-1);color:var(--inv-fg);box-shadow:none}
.story[data-end="pos"] .st.is-done:last-child .st-node{background:var(--pos)}
.st.is-done .st-node>span{display:none}
.st.is-done .st-node .ic{display:block}
.st-scene{margin-top:28px}
@media (max-width:519px){.st-scene{margin-left:-44px}}   /* a phone gives the window the full width; the timeline runs behind it */
@media (min-width:900px){
  .st{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8.5fr);column-gap:clamp(40px,4.5vw,64px);align-items:start;padding-bottom:104px}
  .st-scene{margin-top:0}
}

/* ====================================================================== pinned (desktop, set by story.js) ======================================================================
   The section is about one screen per step: the stage sticks under the nav, and each step owns an equal share of the scroll. */
.story-run{display:none}
.story.is-pin .story-run{display:block;height:calc((var(--steps,4) - 1) * 90vh)}   /* the scroll the stage stays pinned for: 90vh a step after the first */
.story.is-pin:not([data-lock]) .story-run{height:calc((var(--steps,4) - 1) * 70vh)}   /* a free-scrolling story: 70vh a step */
.story.is-pin .story-pin{position:sticky;top:var(--m-head,64px);height:calc(100vh - var(--m-head,64px));display:flex;flex-direction:column;justify-content:flex-start;gap:clamp(18px,3vh,30px);padding:clamp(16px,3.2vh,32px) 0 16px}
.story.is-pin .story-head{flex:none;margin:0}
.story.is-pin .story-h{max-width:none;font-size:clamp(24px,3.6vh,34px);line-height:1.08;letter-spacing:-.028em}
.story.is-pin .story-lead{margin-top:8px;font-size:16px;line-height:1.5}
.story.is-pin .story-rail{flex:none}
.story.is-pin .story-body{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(300px,4fr) minmax(0,8.5fr);grid-template-rows:minmax(0,1fr);column-gap:clamp(40px,4.5vw,72px);align-items:start}
.story.is-pin .st{display:contents}
.story.is-pin .st::before,.story.is-pin .st-node,.story.is-pin .st-d{display:none}
.story.is-pin .st-scene{grid-area:1/2;align-self:stretch;display:flex;flex-direction:column;min-height:0;margin:0}
.story.is-pin .st:not(:first-child) .st-scene{display:none}
.story.is-pin .sw{flex:1 1 auto;min-height:0;max-height:600px}
/* 1024–1199: the window keeps its desktop layout — a little more of the width goes to it, the words get a step smaller */
@media (max-width:1199px){
  .story.is-pin .story-body{grid-template-columns:minmax(0,3.4fr) minmax(0,8.6fr);column-gap:40px}
  .story.is-pin .st-h{font-size:24px}
  .story.is-pin .st-p{margin-top:12px;font-size:15px;line-height:1.58}
  .story.is-pin .st-facts{margin-top:18px}
  .story.is-pin .st-facts li{padding:9px 0;font-size:13.5px}
  .story.is-pin .sw-plot{--cg:18px}
}
/* shorter screens: the lead goes, the rail puts each step's date beside its node */
@media (max-height:819px){
  .story.is-pin .story-lead{display:none}
  .story.is-pin .sr-step{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:10px;align-items:center}
  .story.is-pin .sr-node{grid-row:1/3}
  .story.is-pin .sr-date{margin:0;font-size:10.5px}
  .story.is-pin .sr-name{margin:0;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .story.is-pin .sr-track{top:50%}
  .story.is-pin .sr-step{justify-self:start;padding-right:14px;background:var(--bg)}   /* the line runs between the steps, never through their words */
}
.story.is-pin .sw{container:sw/size}   /* its height is fixed here, so the scene can also answer to it */
/* a story whose window fits its content (§3): the window is as tall as its tallest step; the rail sits where §2's does */
.story.is-pin[data-fit] .sw{flex:none;height:auto;container:sw/inline-size}
.story.is-pin[data-fit] .story-body{flex:none}
.story.is-pin[data-fit] .story-pin{height:auto}   /* the stage is only as tall as it is, so the section carries on right under it */
.story.is-pin .sw-chart{height:auto}
/* the words cross over: the step that leaves moves the way the story goes, the next one rises in a beat later */
.story.is-pin .st-text{grid-area:1/1;opacity:0;visibility:hidden;translate:0 16px;
  transition:opacity 220ms linear,translate 260ms var(--sw-move),visibility 0s linear 260ms}
.story.is-pin .st-text.is-past{translate:0 -16px}
.story.is-pin .st-text.is-cur{opacity:1;visibility:visible;translate:none;
  transition:opacity 420ms linear 170ms,translate 700ms var(--ease-expo) 170ms,visibility 0s}
.story.is-pin .st-text:focus-visible{outline:2px solid var(--ring);outline-offset:8px;border-radius:8px}

/* the rail: four steps on one line that fills with the scroll — past steps checked, the current one bright, the next ones quiet */
.story.is-pin .story-rail{position:relative;display:grid;grid-template-columns:repeat(var(--steps,4),minmax(0,1fr))}
.sr-track{position:absolute;left:0;right:0;top:11.5px;height:1px;background:var(--line-strong)}
.sr-fill{position:absolute;left:0;top:-.5px;width:100%;height:2px;border-radius:2px;background:var(--text-1);transform-origin:0 50%;transform:scaleX(0);transition:transform 160ms linear}
.story.is-stepping .sr-fill{transition:transform 640ms var(--sw-move)}
.sr-step{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:0 16px 2px 0;border-radius:8px;text-align:left}
.sr-step:focus-visible{outline:2px solid var(--ring);outline-offset:6px}
.sr-node{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line-ctl);font:500 11.5px/1 var(--mono);color:var(--text-4);
  transition:background-color 260ms var(--ease-out),box-shadow 260ms var(--ease-out),color 260ms var(--ease-out),scale 360ms var(--sw-land)}
.sr-date{margin-top:14px;font:500 11.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-4);transition:color 260ms var(--ease-out)}
.sr-name{margin-top:4px;font-size:15px;font-weight:500;line-height:1.3;letter-spacing:-.008em;color:var(--text-3);transition:color 260ms var(--ease-out)}
.sr-step:hover .sr-name{color:var(--text-1)}
.sr-step.is-past .sr-node{background:var(--text-1);box-shadow:none;color:var(--inv-fg)}
.sr-step.is-past .sr-name{color:var(--text-2)}
.sr-step.is-cur .sr-node{color:var(--text-1);box-shadow:inset 0 0 0 1.5px var(--text-1),0 0 0 5px var(--fill-1);scale:1.06}
.sr-step.is-cur .sr-date{color:var(--text-2)}
.sr-step.is-cur .sr-name{color:var(--text-1)}
/* a story that ends on a verdict (§2, data-end="pos"): its last node turns green when reached */
.story[data-end="pos"] .sr-step:last-child.is-cur .sr-node{background:var(--pos);color:var(--inv-fg);box-shadow:0 0 0 5px color-mix(in srgb,var(--pos) 18%,transparent)}
.sr-step.is-past .sr-node>span,.story[data-end="pos"] .sr-step:last-child.is-cur .sr-node>span{display:none}
.sr-step.is-past .sr-node .ic,.story[data-end="pos"] .sr-step:last-child.is-cur .sr-node .ic{display:block}

/* ====================================================================== the window ====================================================================== */
.sw{--sc-bg:var(--surface);
  container:sw/inline-size;position:relative;isolation:isolate;display:flex;flex-direction:column;border-radius:12px;background:var(--surface);box-shadow:var(--shot-shadow);
  overflow:hidden;color:var(--text-1);font-variant-numeric:tabular-nums;text-align:left}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sw{--sc-bg:var(--surface-2)}}
:root[data-theme="dark"] .sw{--sc-bg:var(--surface-2)}
.sw::after{content:"";position:absolute;inset:0;z-index:9;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--shot-edge);pointer-events:none}
.sw .chip{gap:5px;height:22px;padding:0 8px;font-size:11.5px}
.sw .chip .ic{width:12px;height:12px;stroke-width:2.2}
.sw .chip-info{background:var(--info-bg);color:var(--info)}

/* the bar */
.sw-bar{flex:none;display:flex;align-items:center;gap:12px;height:42px;padding:0 12px 0 16px;border-bottom:1px solid var(--line)}
.sw-crumb{display:flex;align-items:center;gap:5px;min-width:0;font-size:12.5px;color:var(--text-3);white-space:nowrap}
.sw-crumb>span{flex:none}
.sw-crumb b{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:500;color:var(--text-1)}
.sw-chev{width:12px;height:12px;color:var(--text-4)}
.sw-st{display:grid;flex:none;margin-left:auto}
.sw-st>*{grid-area:1/1;justify-self:end}

/* the number, and the figure that changes with the step */
.sw-in{flex:1;display:flex;flex-direction:column;min-height:0;padding:18px 20px 14px}
.sw-head{flex:none}
.sw-k{font-size:12.5px;color:var(--text-3)}
.sw-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 28px;margin-top:6px}
.sw-v{display:grid}
.sw-v>span{grid-area:1/1;display:flex;align-items:center;gap:8px;white-space:nowrap}
.sw-from{font-size:18px;letter-spacing:-.01em;color:var(--text-3)}
.sw-arr{width:15px;height:15px;color:var(--text-4)}
.sw-v b{font-size:28px;font-weight:600;line-height:1.1;letter-spacing:-.026em}
.sw-v .chip{margin-left:2px}
.sw-slot{display:grid;min-height:38px;padding-left:22px;border-left:1px solid var(--line)}
.sw-slot>span{grid-area:1/1;display:flex;flex-direction:column;justify-content:center;gap:2px;white-space:nowrap}
.sw-slot small{font-size:11.5px;color:var(--text-3)}
.sw-slot b{font-size:16px;font-weight:600;letter-spacing:-.012em}

/* the chart: a box of its own; everything on it is placed in % of the data area, so it stays to scale at any size */
.sw-plot{--gl:36px;--gr:10px;--lane:36px;--ax:24px;--cg:24px;position:relative;flex:1 1 auto;display:flex;flex-direction:column;min-height:0;margin-top:14px}
.sw-chart{position:relative;flex:1 1 auto;min-height:0;height:300px}
.sw-data{position:absolute;left:var(--gl);right:var(--gr);top:var(--lane);bottom:var(--ax)}
.sw-g{position:absolute;left:0;right:0;height:0;border-top:1px dashed var(--grid)}
.sw-yl{position:absolute;right:calc(100% + 10px);top:0;translate:0 -50%;font:500 10.5px/1 var(--mono);color:var(--text-4);white-space:nowrap}
.sw-xl{position:absolute;top:calc(100% + 9px);translate:-50% 0;font:500 10.5px/1 var(--mono);color:var(--text-4);white-space:nowrap}
/* the day each step is on (the review, Oct 16): the line is drawn only up to it — 1 the first signal (Aug 29), 2 the full drop (Aug 30), 3 the fix */
.sw{--xn:var(--xf);--yn:var(--y1)}
.sw[data-stage="1"]{--xn:var(--xd);--yn:var(--yd)}
.sw[data-stage="2"]{--xn:var(--xc)}
.sw-alt{display:inline-grid;justify-items:start}
.sw-alt>*{grid-area:1/1}
.sw-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;clip-path:inset(0 calc(100% - var(--xn)) 0 0);transition:clip-path 600ms var(--sw-move)}
.sw[data-stage="4"] .sw-svg{clip-path:inset(0 0 0 0)}
.sw-line{fill:none;stroke:var(--c1);stroke-width:2.25;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.sw-svg stop{stop-color:var(--c1);stop-opacity:.2}
.sw-svg stop+stop{stop-opacity:0}
.sw-before{position:absolute;left:0;right:0;top:var(--y0);height:0;border-top:1px dashed color-mix(in srgb,var(--text-1) 30%,transparent)}
.sw-before>span{position:absolute;left:46%;bottom:6px;font-size:11px;font-weight:500;color:var(--text-3);white-space:nowrap}

/* the changes on the chart: a dashed line and a label in the lane above the data */
.sw-mk{--mk:var(--text-3);position:absolute;top:0;bottom:0;width:0}
.sw-mk-1{left:var(--xr)}
.sw-mk-2{left:var(--xf);--mk:var(--pos)}
.sw:not([data-stage="1"]) .sw-mk-1{--mk:var(--neg)}
.sw-mk-l{position:absolute;left:-.5px;top:calc(26px - var(--lane));bottom:0;border-left:1px dashed var(--mk);transform-origin:50% 0;transition:border-color 420ms var(--ease-out)}
.sw-mk-p{position:absolute;top:calc(4px - var(--lane));display:inline-flex;align-items:center;gap:6px;height:22px;border-radius:var(--r-full);background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line-strong);font-size:11.5px;font-weight:500;line-height:1;color:var(--text-2);white-space:nowrap;
  transition:background-color 420ms var(--ease-out),color 420ms var(--ease-out),box-shadow 420ms var(--ease-out)}
.sw-mk-1 .sw-mk-p{right:-11px;flex-direction:row-reverse;padding:0 3px 0 10px}
.sw-mk-2 .sw-mk-p{left:-11px;padding:0 10px 0 3px}
.sw-mk-i{flex:none;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--mk);color:var(--surface);transition:background-color 420ms var(--ease-out)}
.sw-mk-i .ic{width:10px;height:10px;stroke-width:2.6}
.sw-mk-s{display:none}
.sw:not([data-stage="1"]) .sw-mk-1 .sw-mk-p{background:var(--neg-bg);color:var(--neg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--neg) 28%,transparent)}

/* values on the line */
.sw-dot{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--c1);box-shadow:0 0 0 3px var(--surface);
  transition:background-color 400ms var(--ease-out),box-shadow 400ms var(--ease-out)}
.sw-dot1{left:var(--xn);top:var(--yn)}
.sw-dot4{left:var(--xe);top:var(--ye);background:var(--pos);--sw-ring:var(--pos)}
.sw[data-stage="4"] .sw-dot1{background:var(--surface);box-shadow:0 0 0 2px var(--surface),inset 0 0 0 2px var(--c1)}
.sw-lab{position:absolute;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;line-height:1;color:var(--text-1);white-space:nowrap}
.sw-lab0{left:1%;top:var(--y0);translate:0 calc(-100% - 11px);font-weight:500;color:var(--text-2)}
.sw-lab1{right:calc(100% - var(--xn) + 9px);top:var(--yn);translate:0 9px}
.sw-drop{position:absolute;right:calc(100% - var(--xr) + 10px);top:calc((var(--y0) + var(--yn)) / 2);translate:0 -50%}
.sw-lab4{right:calc(100% - var(--xe) - 5px);top:var(--ye);translate:0 calc(-100% - 12px);color:var(--pos)}

/* the links between the chart and what Dottpace shows: the cause to its change, the verdict to its value */
.sw-link{position:absolute;left:var(--xr);top:28px;width:calc(var(--xf) - var(--xr) + var(--cg));height:0;border-top:1px solid var(--neg);transform-origin:0 50%}
.sw-link::before{content:"";position:absolute;left:-3.5px;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--neg)}
.sw-stem{position:absolute;left:var(--xe);top:calc(var(--ye) + 9px);bottom:10px;width:0;border-left:1px solid color-mix(in srgb,var(--pos) 60%,transparent);transform-origin:50% 0}

/* ---------- what Dottpace shows at each step: in the chart's empty future (the right of the fix line) ---------- */
.sw-cards{position:absolute;left:var(--gl);right:var(--gr);top:var(--lane);bottom:0;pointer-events:none}
.sw-sc{position:absolute;left:calc(var(--xf) + var(--cg));top:4px;width:min(380px,calc(100% - var(--xf) - var(--cg)));padding:12px 14px 13px;border-radius:12px;background:var(--sc-bg);
  box-shadow:var(--pop-shadow),inset 0 0 0 1px var(--line-strong);font-size:12.5px;line-height:1.45;color:var(--text-2)}
.sw-sc-top{display:flex;align-items:center;gap:8px;min-height:22px}
.sw-sc-ic{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:var(--neg-bg);color:var(--neg)}
.sw-sc-ic .ic{width:13px;height:13px}
.sw-sc-k{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:500;color:var(--text-2)}
.sw-sc-k .ic{width:14px;height:14px;color:var(--text-3)}
.sw-sc-when{margin-left:auto;font:500 10.5px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--text-4);white-space:nowrap}
.sw-sc-t{margin-top:8px;font-size:14px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--text-1);text-wrap:balance}
.sw-sc-m{margin-top:3px;font-size:12.5px;color:var(--text-3)}
.sw-sc-neg{font-weight:600;color:var(--neg)}
.sw-sc-link{display:flex;align-items:flex-start;gap:7px;margin-top:11px;padding-top:10px;border-top:1px solid var(--line);font-size:12px;color:var(--text-3)}
.sw-sc-link .ic{width:14px;height:14px;margin-top:1px;color:var(--text-3)}
.sw-sc-link b{font-weight:500;color:var(--text-1)}
/* the cause and its evidence */
.sw-sc-ev{margin-top:10px;border-top:1px solid var(--line)}
.sw-sc-ev li{display:flex;align-items:flex-start;gap:9px;padding:7px 0;border-bottom:1px solid var(--line);color:var(--text-2);text-wrap:pretty}
.sw-sc-ev li:last-child{padding-bottom:0;border-bottom:0}
.sw-ev-c{flex:none;display:grid;place-items:center;width:16px;height:16px;margin-top:1px;border-radius:50%;background:var(--pos-bg);color:var(--pos)}
.sw-ev-c .ic{width:10px;height:10px;stroke-width:3}
/* the fix: what changes, one approval, then applied and checked */
.sw-ap-diff{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;margin-top:10px;padding:4px;border-radius:8px;background:var(--fill-1)}
.sw-ap-diff li{display:flex;align-items:center;gap:7px;min-width:0;height:24px;padding:0 8px;border-radius:5px;background:color-mix(in srgb,var(--pos) 7%,transparent);font-size:12.5px;color:var(--text-1);white-space:nowrap}
.sw-ap-diff i{width:8px;font:600 12px/1 var(--mono);font-style:normal;color:var(--pos)}
.sw-ap-act{display:grid;margin-top:11px}
.sw-ap-act>*{grid-area:1/1}
.sw-ap-btns{position:relative;display:flex;align-items:center;gap:8px;opacity:0;visibility:hidden}
.sw-ap-yes,.sw-ap-no{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:7px;font-size:12.5px;font-weight:500}
.sw-ap-yes{background:var(--inv);color:var(--inv-fg)}
.sw-ap-no{color:var(--text-2);box-shadow:inset 0 0 0 1px var(--line-ctl)}
.sw-ap-cur{position:absolute;left:44px;top:13px;z-index:2;width:19px;height:19px;opacity:0}
.sw-ap-cur svg{display:block;width:100%;height:100%;fill:var(--text-1);stroke:var(--sc-bg);stroke-width:1.5;stroke-linejoin:round}
.sw-ap-ok{display:flex;align-items:center;gap:7px;min-height:28px;font-size:12.5px;font-weight:600;color:var(--pos)}
.sw-ap-ok .ic{width:15px;height:15px}
.sw-ap-done{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:9px;padding-top:9px;border-top:1px solid var(--line)}
.sw-ap-done li{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-2);white-space:nowrap}
.sw-ap-done .ic{width:14px;height:14px;color:var(--pos);stroke-width:2.4}
/* the verdict: under its value, joined by a stem */
.sw-sc-verdict{left:auto;right:calc(100% - var(--xe) - 14px);top:auto;bottom:calc(var(--ax) + 10px);width:max-content;max-width:calc(100% - var(--xf) - var(--cg))}
.sw-vd-n{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 9px;margin-top:9px}
.sw-vd-n b{font-size:26px;font-weight:600;line-height:1;letter-spacing:-.024em;color:var(--pos)}
.sw-vd-n span{font-size:13px;font-weight:500;color:var(--text-1)}
.sw-sc-verdict .sw-sc-m{margin-top:7px;font-size:12px}

/* ---------- step gates ---------- */
.sw :is(.f2,.f3,.f4,.u2,.u3,.u4){transition:opacity 320ms linear,visibility 0s}
.sw[data-stage="1"] :is(.f2,.f3,.f4),
.sw[data-stage="2"] :is(.f3,.f4,.u2),
.sw[data-stage="3"] :is(.f4,.u2,.u3),
.sw[data-stage="4"] :is(.u2,.u3,.u4){opacity:0;visibility:hidden;transition:opacity 200ms linear,visibility 0s linear 200ms}

/* ---------- a small pinned window (1024 × 700): the verdict keeps to its value and the climb stays clear of it ---------- */
@container sw (max-height:520px) and (max-width:719px){
  .sw-sc-verdict .sw-sc-when,.sw-sc-verdict .sw-sc-m{display:none}
  .sw-vd-n{margin-top:8px}
  .sw-vd-n b{font-size:22px}
}

/* ---------- a narrow window (phones, ≤ 519px): the cards go under the chart, the labels get short ---------- */
@container sw (max-width:519px){
  .sw-bar{height:38px;padding:0 10px 0 12px}
  .sw-crumb>.sw-c0,.sw-crumb>.sw-chev:first-of-type{display:none}
  .sw-in{padding:14px 12px 12px}
  .sw-row{gap:8px 16px}
  .sw-from{font-size:15px}
  .sw-v b{font-size:23px}
  .sw-row{flex-direction:column;align-items:flex-start}
  .sw-slot{width:100%;min-height:0;padding:9px 0 0;border-left:0;border-top:1px solid var(--line)}
  .sw-slot>span{flex-direction:row;align-items:baseline;justify-content:flex-start;gap:8px}
  .sw-slot small{font-size:12px}
  .sw-slot b{font-size:14px}
  .sw-plot{--gl:30px;--gr:6px;--lane:32px;--ax:22px;margin-top:10px}
  .sw-chart{flex:none;height:196px}
  .sw-mk-t{display:none}
  .sw-mk-s{display:inline}
  .sw-drop,.sw-link,.sw-stem,.sw-before>span{display:none}
  .sw-lab1{right:auto;left:calc(var(--xn) + 7px)}
  .sw-cards{position:static;margin-top:12px}
  .sw-sc{position:static;width:auto;display:none}
  .sw[data-stage="1"] .sc-toast,.sw[data-stage="2"] .sc-cause,.sw[data-stage="3"] .sc-ap,.sw[data-stage="4"] .sw-sc-verdict{display:block}
}

/* ====================================================================== the motion: each step plays once when it becomes the current one ======================================================================
   story.js sets data-play="N" (and .is-held, which pauses everything at its start, until the window is on screen). */
.sw.is-held,.sw.is-held *,.sw.is-held *::before,.sw.is-held *::after{animation-play-state:paused!important}
@keyframes sw-fade{from{opacity:0}}
@keyframes sw-in{from{opacity:0;translate:0 8px}}
@keyframes sw-roll{from{opacity:0;translate:0 12px}}
@keyframes sw-out{0%{opacity:1;visibility:visible;translate:none}100%{opacity:0;visibility:hidden;translate:0 -10px}}
@keyframes sw-pop{from{opacity:0;scale:.8}}
@keyframes sw-tick{from{opacity:0;scale:.4}}
@keyframes sw-drop{from{opacity:0;translate:0 -8px}}
@keyframes sw-grow{from{scale:1 0}}
@keyframes sw-wipe{from{scale:0 1}}
@keyframes sw-slide{from{opacity:0;translate:18px 0}}
@keyframes sw-toast{from{opacity:0;translate:0 -12px;scale:.98}}
@keyframes sw-land{from{opacity:0;scale:.92;translate:0 6px}}
@keyframes sw-ring{0%{box-shadow:0 0 0 3px var(--surface),0 0 0 3px color-mix(in srgb,var(--sw-ring,var(--c1)) 50%,transparent)}100%{box-shadow:0 0 0 3px var(--surface),0 0 0 15px transparent}}
@keyframes sw-press{0%{scale:1}40%{scale:.92;background:var(--inv-h);box-shadow:0 0 0 4px var(--fill-2)}100%{scale:1}}
@keyframes sw-btns{0%,88%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@keyframes sw-cur{
  0%{opacity:0;translate:84px 46px;animation-timing-function:cubic-bezier(.65,0,.35,1)}
  12%{opacity:1}
  50%{translate:0 0;scale:1}
  56%{scale:.8}
  64%{scale:1}
  84%{opacity:1;translate:0 0}
  100%{opacity:0;translate:4px 6px}
}
@keyframes sw-glow{0%{box-shadow:var(--shot-shadow),0 0 0 1px color-mix(in srgb,var(--pos) 55%,transparent),0 0 0 0 color-mix(in srgb,var(--pos) 26%,transparent)}
  100%{box-shadow:var(--shot-shadow),0 0 0 1px transparent,0 0 0 16px transparent}}
/* the line: to the release, a breath, then the break (1); from the fix to the verdict (4) */
@keyframes sw-d1{
  0%{clip-path:inset(0 100% 0 0);animation-timing-function:cubic-bezier(.45,0,.55,1)}
  56%{clip-path:inset(0 calc(100% - var(--xr)) 0 0)}
  70%{clip-path:inset(0 calc(100% - var(--xr)) 0 0);animation-timing-function:cubic-bezier(.3,0,.2,1)}
  100%{clip-path:inset(0 calc(100% - var(--xn)) 0 0)}
}
@keyframes sw-d4{from{clip-path:inset(0 calc(100% - var(--xf)) 0 0)}to{clip-path:inset(0 0 0 0)}}

/* 1 · Detected: the line draws and holds at ~4.1K, the release drops in at the break, the line falls, −22% pops, the finding arrives */
.sw[data-play="1"] .sw-svg{animation:sw-d1 1450ms linear 100ms both}
.sw[data-play="1"] .sw-lab0{animation:sw-fade 380ms linear 420ms both}
.sw[data-play="1"] .sw-mk-1 .sw-mk-l{animation:sw-grow 420ms var(--ease-expo) 820ms both}
.sw[data-play="1"] .sw-mk-1 .sw-mk-p{animation:sw-drop 460ms var(--ease-expo) 900ms both}
.sw[data-play="1"] .sw-dot1{animation:sw-pop 320ms var(--sw-land) 1520ms both,sw-ring 1000ms var(--ease-out) 1700ms 2}
.sw[data-play="1"] .sw-lab1{animation:sw-pop 400ms var(--sw-land) 1580ms both}
.sw[data-play="1"] .sw-drop{animation:sw-pop 400ms var(--sw-land) 1420ms both}
.sw[data-play="1"] .sw-va .chip{animation:sw-pop 400ms var(--sw-land) 1640ms both}
.sw[data-play="1"] .sw-st .u2{animation:sw-pop 340ms var(--sw-land) 1780ms both}
.sw[data-play="1"] .sw-slot{animation:sw-in 480ms var(--ease-expo) 1820ms both}
.sw[data-play="1"] .sc-toast{animation:sw-toast 560ms var(--ease-expo) 1820ms both}
.sw[data-play="1"] .sw-sc-link{animation:sw-fade 360ms linear 2180ms both}

/* 2 · Explained: the release turns into the cause, a line ties it to the cause card, the evidence ticks in, the stake counts up */
.sw[data-play="2"] .sw-st .f2{animation:sw-pop 340ms var(--sw-land) 120ms both}
.sw[data-play="2"] .sw-link{animation:sw-wipe 460ms var(--ease-expo) 180ms both}
.sw[data-play="2"] .sc-cause{animation:sw-slide 560ms var(--ease-expo) 300ms both}
.sw[data-play="2"] .sw-sc-ev li:nth-child(1){animation:sw-in 380ms var(--ease-expo) 650ms both}
.sw[data-play="2"] .sw-sc-ev li:nth-child(2){animation:sw-in 380ms var(--ease-expo) 880ms both}
.sw[data-play="2"] .sw-sc-ev li:nth-child(3){animation:sw-in 380ms var(--ease-expo) 1110ms both}
.sw[data-play="2"] .sw-sc-ev li:nth-child(1) .sw-ev-c{animation:sw-tick 420ms var(--sw-land) 730ms both}
.sw[data-play="2"] .sw-sc-ev li:nth-child(2) .sw-ev-c{animation:sw-tick 420ms var(--sw-land) 960ms both}
.sw[data-play="2"] .sw-sc-ev li:nth-child(3) .sw-ev-c{animation:sw-tick 420ms var(--sw-land) 1190ms both}
.sw[data-play="2"] .sl2{animation:sw-roll 500ms var(--ease-expo) 400ms both}
/* the drop completes: the dot and its value land on Aug 30's low, the −22% replaces the first −9% */
.sw[data-play="2"] .sw-dot1{animation:sw-pop 320ms var(--sw-land) 380ms both}
.sw[data-play="2"] :is(.sw-lab1,.sw-drop,.sw-va) .f2{animation:sw-pop 380ms var(--sw-land) 420ms both}

/* 3 · Approved and applied: the fix with its diff, the cursor approves, the card turns Approved, then applied, checked, the links roll up */
.sw[data-play="3"] .sc-ap{animation:sw-slide 560ms var(--ease-expo) 100ms both}
.sw[data-play="3"] .sw-ap-diff li:nth-child(1){animation:sw-in 340ms var(--ease-expo) 300ms both}
.sw[data-play="3"] .sw-ap-diff li:nth-child(2){animation:sw-in 340ms var(--ease-expo) 350ms both}
.sw[data-play="3"] .sw-ap-diff li:nth-child(3){animation:sw-in 340ms var(--ease-expo) 400ms both}
.sw[data-play="3"] .sw-ap-diff li:nth-child(4){animation:sw-in 340ms var(--ease-expo) 450ms both}
.sw[data-play="3"] .sw-ap-btns{animation:sw-btns 1650ms linear both}
.sw[data-play="3"] .sw-ap-cur{animation:sw-cur 1300ms linear 550ms both}
.sw[data-play="3"] .sw-ap-yes{animation:sw-press 300ms var(--ease-out) 1230ms both}
.sw[data-play="3"] .sw-ap-ok{animation:sw-in 420ms var(--ease-expo) 1500ms both}
.sw[data-play="3"] .sw-ap-ok .ic{animation:sw-tick 420ms var(--sw-land) 1550ms both}
.sw[data-play="3"] .sw-mk-2 .sw-mk-l{animation:sw-grow 420ms var(--ease-expo) 1550ms both}
.sw[data-play="3"] .sw-mk-2 .sw-mk-p{animation:sw-drop 460ms var(--ease-expo) 1620ms both}
.sw[data-play="3"] .sw-ap-done li:nth-child(1){animation:sw-in 380ms var(--ease-expo) 1800ms both}
.sw[data-play="3"] .sw-ap-done li:nth-child(2){animation:sw-in 380ms var(--ease-expo) 2050ms both}
.sw[data-play="3"] .sw-ap-done li:nth-child(1) .ic{animation:sw-tick 420ms var(--sw-land) 1900ms both}
.sw[data-play="3"] .sw-ap-done li:nth-child(2) .ic{animation:sw-tick 420ms var(--sw-land) 2150ms both}
.sw[data-play="3"] .sl3{animation:sw-roll 500ms var(--ease-expo) 250ms both}
.sw[data-play="3"] .sw-st .f3{animation:sw-pop 340ms var(--sw-land) 1950ms both}

/* 4 · Worked: the old level appears, the line climbs from the fix past it, the value lands, the numbers roll over, the verdict lands with one beat */
.sw[data-play="4"] .sw-before{animation:sw-fade 450ms linear 60ms both}
.sw[data-play="4"] .sw-svg{animation:sw-d4 1300ms var(--sw-move) 150ms both}
.sw[data-play="4"] .sw-dot4{animation:sw-pop 340ms var(--sw-land) 1400ms both,sw-ring 1000ms var(--ease-out) 1600ms 2}
.sw[data-play="4"] .sw-lab4{animation:sw-pop 400ms var(--sw-land) 1450ms both}
.sw[data-play="4"] .sw-va{animation:sw-out 280ms var(--sw-move) 1400ms both}
.sw[data-play="4"] .sw-vb{animation:sw-roll 500ms var(--ease-expo) 1480ms both}
.sw[data-play="4"] .sl3{animation:sw-out 280ms var(--sw-move) 1430ms both}
.sw[data-play="4"] .sl4{animation:sw-roll 500ms var(--ease-expo) 1530ms both}
.sw[data-play="4"] .sw-st .f3{animation:sw-out 220ms linear 1580ms both}
.sw[data-play="4"] .sw-st .f4{animation:sw-pop 380ms var(--sw-land) 1650ms both}
.sw[data-play="4"] .sw-stem{animation:sw-grow 340ms var(--ease-expo) 1480ms both}
.sw[data-play="4"] .sw-sc-verdict{animation:sw-land 560ms var(--sw-land) 1650ms both}
.sw[data-play="4"]{animation:sw-glow 1500ms var(--ease-out) 1850ms 1}

/* ====================================================================== §3 the tools: the app's sidebar and its page, Visibility → Website → Growth ======================================================================
   The window's bar and gates are §2's. The sidebar stays and its marker slides to the area; the page changes under it, so it reads as one app
   moving from area to area. Pages and lists that aren't current are display:none when stacked (each window shows one step). */
.tl-cv{display:grid}
.tl-cv>*{grid-area:1/1;display:inline-flex;align-items:center;gap:5px;font-weight:500;color:var(--text-1);white-space:nowrap}
.tl-per .ic{width:12px;height:12px}
.tl-body{flex:1;display:flex;min-height:0}
/* the sidebar: the project, the areas (a marker slides to the current one), the area's tools (the ones on the page are marked) */
.tl-side{flex:none;width:172px;padding:12px 10px;border-right:1px solid var(--line)}
.tl-proj{display:flex;align-items:center;gap:8px;padding:0 6px 12px;font-size:12.5px;font-weight:600;color:var(--text-1);white-space:nowrap}
.tl-av{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--warn-bg);color:var(--warn);font-size:11px;font-weight:600}
.tl-areas{position:relative;display:flex;flex-direction:column;gap:2px}
.tl-hl{position:absolute;left:0;right:0;top:0;height:28px;border-radius:7px;background:var(--selected);translate:0 30px;transition:translate 560ms var(--sw-move)}
.sw-tools[data-stage="2"] .tl-hl{translate:0 60px}
.sw-tools[data-stage="3"] .tl-hl{translate:0 90px}
.tl-a{position:relative;display:flex;align-items:center;gap:8px;height:28px;padding:0 8px;font-size:12.5px;font-weight:500;color:var(--text-3);white-space:nowrap;transition:color 320ms var(--ease-out)}
.tl-a .ic{width:14px;height:14px}
.sw-tools[data-stage="1"] .tl-a:nth-child(3),.sw-tools[data-stage="2"] .tl-a:nth-child(4),.sw-tools[data-stage="3"] .tl-a:nth-child(5){color:var(--text-1)}
.tl-tools{display:grid;margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}
.tl-t{grid-area:1/1}
.tl-t li{display:flex;align-items:center;gap:8px;height:24px;padding:0 8px 0 30px;font-size:12px;color:var(--text-3);white-space:nowrap}
.tl-t li.is-on{color:var(--text-1);font-weight:500}
.tl-t li.is-on::before{content:"";width:5px;height:5px;margin-left:-13px;border-radius:50%;background:var(--c1)}
/* the page: the app's canvas with its cards */
.tl-main{flex:1;min-width:0;display:grid;align-content:start;padding:14px 16px;background:var(--bg-band)}
.tl-pg{grid-area:1/1;display:flex;flex-direction:column;gap:10px;min-width:0}
.tl-card{padding:12px 14px;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.tl-h{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12.5px;font-weight:600;color:var(--text-1)}
.tl-h>span:first-child{display:inline-flex;align-items:center;gap:7px}
.tl-h .ic{width:14px;height:14px;color:var(--text-3)}
.tl-hm{font-size:11.5px;font-weight:400;color:var(--text-3);white-space:nowrap}
.tl-hm b{font-weight:600;color:var(--text-1)}
/* 1 · Visibility: named in AI answers, the assistants, the share of answers; Google positions */
.tl-ai-top{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin-top:8px}
.tl-big{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px}
.tl-big>b{font-size:30px;font-weight:600;line-height:1.05;letter-spacing:-.03em}
.tl-big small{flex-basis:100%;font-size:12px;color:var(--text-3)}
.tl-big small b{font-weight:600;color:var(--text-1)}
.tl-logos{display:flex;gap:6px}
.tl-logos li{position:relative;display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--text-1)}
.tl-lg{display:block;width:16px;height:16px;flex:none}
.tl-ok{position:absolute;right:-4px;bottom:-4px;display:grid;place-items:center;width:14px;height:14px;border-radius:50%;background:var(--pos);color:var(--surface);box-shadow:0 0 0 2px var(--surface)}
.tl-ok .ic{width:9px;height:9px;stroke-width:3.2}
.tl-bars{display:grid;gap:7px;margin-top:12px}
.tl-bars li{display:grid;grid-template-columns:96px minmax(0,1fr) 46px;align-items:center;gap:10px;font-size:12px;color:var(--text-2)}
.tl-bn{display:inline-flex;align-items:center;gap:6px;min-width:0;white-space:nowrap}
.tl-bt{height:8px;border-radius:4px;background:var(--fill-1);overflow:hidden}
.tl-bt i{display:block;width:calc(var(--w) * 100%);height:100%;border-radius:4px;background:var(--chart-quiet);transform-origin:0 50%}
.tl-bars b{text-align:right;font-weight:600;color:var(--text-1)}
.tl-bars .is-you,.tl-bars .is-ai{color:var(--text-1);font-weight:500}
.tl-bars .is-you i,.tl-bars .is-ai i{background:var(--c1)}
.tl-kw ul{margin-top:6px}
.tl-kw li{display:grid;grid-template-columns:minmax(0,1fr) auto auto 26px auto;align-items:center;gap:8px;height:31px;border-top:1px solid var(--line);font-size:12.5px}
.tl-kw li:first-child{border-top:0}
.tl-kn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-1)}
.tl-was{font-size:12px;color:var(--text-3)}
.tl-arr{width:12px;height:12px;color:var(--text-4)}
.tl-now{font-weight:600;color:var(--text-1)}
/* 2 · Website › Health: the issues, by money at stake, each flips to fixed; the agent's walk */
.tl-iss ul{margin-top:6px}
.tl-iss li{display:grid;grid-template-columns:minmax(0,1fr) auto 84px;align-items:center;gap:12px;min-height:36px;padding:6px 0;border-top:1px solid var(--line);font-size:12.5px}
.tl-iss li:first-child{border-top:0}
.tl-it{line-height:1.35;color:var(--text-1);text-wrap:pretty}
.tl-to{display:inline-block;font-weight:500;color:var(--pos)}
.tl-amt{font-weight:600;color:var(--text-1);white-space:nowrap}
.tl-amt small{font-size:11px;font-weight:400;color:var(--text-3)}
.tl-st{display:grid;justify-items:end}
.tl-st>*{grid-area:1/1}
.tl-bad{opacity:0;visibility:hidden}
.tl-walk{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:12px}
.tl-walk::before,.tl-wl{content:"";position:absolute;left:12.5%;right:12.5%;top:11px;height:2px;border-radius:2px;background:var(--line-strong)}
.tl-wl{background:var(--pos);transform-origin:0 50%}
.tl-walk li{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;font:500 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.tl-cp{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--pos);color:var(--surface);box-shadow:0 0 0 3px var(--surface)}
.tl-cp .ic{width:12px;height:12px;stroke-width:2.8}
/* 3 · Growth: visits → orders → revenue, revenue by channel, the client's report */
.tl-flow ol{display:grid;grid-template-columns:minmax(0,1fr) minmax(48px,.75fr) minmax(0,1fr) minmax(48px,.75fr) minmax(0,1fr);align-items:center}
.tl-fn{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.tl-fn small{font-size:11.5px;color:var(--text-3)}
.tl-fn b{font-size:24px;font-weight:600;line-height:1.05;letter-spacing:-.026em;white-space:nowrap}
.tl-fc{font-size:11.5px;color:var(--text-3)}
.tl-fl{position:relative;align-self:stretch}
.tl-fl::before{content:"";position:absolute;left:6px;right:10px;top:50%;height:1px;background:var(--line-ctl);transform-origin:0 50%}
.tl-fl::after{content:"";position:absolute;right:10px;top:calc(50% - 3.5px);width:7px;height:7px;border-top:1px solid var(--line-ctl);border-right:1px solid var(--line-ctl);rotate:45deg}
.tl-fl span{position:absolute;left:0;right:4px;bottom:calc(50% + 6px);font-size:10.5px;line-height:1.25;text-align:center;color:var(--text-3)}
.tl-chan .tl-bars li{grid-template-columns:118px minmax(0,1fr) 48px}
.tl-chan .tl-bn .tl-lg{width:13px;height:13px}
.tl-ais{grid-column:2/-1;margin-top:-3px;font-size:11px;font-weight:400;color:var(--text-3)}
.tl-rep{display:flex;align-items:center;gap:12px}
.tl-ri{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--fill-1);color:var(--text-2)}
.tl-ri .ic{width:16px;height:16px}
.tl-rt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.tl-rt b{font-size:13px;font-weight:600;color:var(--text-1)}
.tl-rt small{font-size:12px;color:var(--text-3)}
/* stacked: each window shows its own step only */
.story:not(.is-pin) .sw-tools[data-stage="1"] :is(.tl-p2,.tl-p3,.tl-t2,.tl-t3),
.story:not(.is-pin) .sw-tools[data-stage="2"] :is(.tl-p1,.tl-p3,.tl-t1,.tl-t3),
.story:not(.is-pin) .sw-tools[data-stage="3"] :is(.tl-p1,.tl-p2,.tl-t1,.tl-t2){display:none}
/* a narrow window (phones): the page alone, the labels tighter */
@container sw (max-width:519px){
  .tl-side{display:none}
  .tl-main{padding:10px}
  .tl-card{padding:11px 12px}
  .tl-bars li{grid-template-columns:80px minmax(0,1fr) 40px;gap:8px}
  .tl-chan .tl-bars li{grid-template-columns:96px minmax(0,1fr) 44px}
  .tl-iss li{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}
  .tl-iss .tl-amt{grid-row:2;grid-column:1;font-size:12px}
  .tl-iss .tl-st{grid-row:1/3;grid-column:2}
  .tl-fn b{font-size:19px}
  .tl-flow ol{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tl-fl{display:none}
  .tl-fn+.tl-fl+.tl-fn{padding-left:12px;border-left:1px solid var(--line)}
}

/* the motion of §3 — the sidebar marker slides on its own (a transition, both ways); each page plays once when it becomes current */
@keyframes tl-page{from{opacity:0;translate:16px 0}}
@keyframes tl-light{from{opacity:.2;scale:.84}}
@keyframes tl-bar{from{scale:0 1}}
@keyframes tl-off{0%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@keyframes tl-wipe{from{opacity:0;clip-path:inset(0 100% 0 0)}}
@keyframes tl-cp{from{background:var(--surface);color:transparent;box-shadow:0 0 0 3px var(--surface),inset 0 0 0 1.5px var(--line-ctl);scale:.86}}
.sw-tools[data-play] .tl-t li{animation:sw-in 380ms var(--ease-expo) both}
.sw-tools[data-play] .tl-t li:nth-child(2){animation-delay:40ms}.sw-tools[data-play] .tl-t li:nth-child(3){animation-delay:80ms}
.sw-tools[data-play] .tl-t li:nth-child(4){animation-delay:120ms}.sw-tools[data-play] .tl-t li:nth-child(5){animation-delay:160ms}.sw-tools[data-play] .tl-t li:nth-child(6){animation-delay:200ms}
/* 1 · Visibility: the assistants light up as they name you, the shares grow, the positions climb */
.sw-tools[data-play="1"] .tl-p1{animation:tl-page 500ms var(--ease-expo) 30ms both}
.sw-tools[data-play="1"] .tl-big .chip{animation:sw-pop 400ms var(--sw-land) 1000ms both}
.sw-tools[data-play="1"] .tl-logos li:nth-child(1){animation:tl-light 440ms var(--ease-expo) 380ms both}
.sw-tools[data-play="1"] .tl-logos li:nth-child(2){animation:tl-light 440ms var(--ease-expo) 490ms both}
.sw-tools[data-play="1"] .tl-logos li:nth-child(3){animation:tl-light 440ms var(--ease-expo) 600ms both}
.sw-tools[data-play="1"] .tl-logos li:nth-child(4){animation:tl-light 440ms var(--ease-expo) 710ms both}
.sw-tools[data-play="1"] .tl-logos li:nth-child(5){animation:tl-light 440ms var(--ease-expo) 820ms both}
.sw-tools[data-play="1"] .tl-logos li:nth-child(1) .tl-ok{animation:sw-tick 380ms var(--sw-land) 480ms both}
.sw-tools[data-play="1"] .tl-logos li:nth-child(2) .tl-ok{animation:sw-tick 380ms var(--sw-land) 590ms both}
.sw-tools[data-play="1"] .tl-logos li:nth-child(3) .tl-ok{animation:sw-tick 380ms var(--sw-land) 700ms both}
.sw-tools[data-play="1"] .tl-logos li:nth-child(4) .tl-ok{animation:sw-tick 380ms var(--sw-land) 810ms both}
.sw-tools[data-play="1"] .tl-logos li:nth-child(5) .tl-ok{animation:sw-tick 380ms var(--sw-land) 920ms both}
.sw-tools[data-play="1"] .tl-ai .tl-bars li:nth-child(1) i{animation:tl-bar 800ms var(--ease-expo) 520ms both}
.sw-tools[data-play="1"] .tl-ai .tl-bars li:nth-child(2) i{animation:tl-bar 800ms var(--ease-expo) 620ms both}
.sw-tools[data-play="1"] .tl-ai .tl-bars li:nth-child(3) i{animation:tl-bar 800ms var(--ease-expo) 720ms both}
.sw-tools[data-play="1"] .tl-ai .tl-bars b{animation:sw-fade 380ms linear 850ms both}
.sw-tools[data-play="1"] .tl-kw li:nth-child(1) .tl-now{animation:sw-roll 440ms var(--ease-expo) 950ms both}
.sw-tools[data-play="1"] .tl-kw li:nth-child(2) .tl-now{animation:sw-roll 440ms var(--ease-expo) 1080ms both}
.sw-tools[data-play="1"] .tl-kw li:nth-child(3) .tl-now{animation:sw-roll 440ms var(--ease-expo) 1210ms both}
.sw-tools[data-play="1"] .tl-kw li:nth-child(1) .chip{animation:sw-pop 380ms var(--sw-land) 1030ms both}
.sw-tools[data-play="1"] .tl-kw li:nth-child(2) .chip{animation:sw-pop 380ms var(--sw-land) 1160ms both}
.sw-tools[data-play="1"] .tl-kw li:nth-child(3) .chip{animation:sw-pop 380ms var(--sw-land) 1290ms both}
/* 2 · Website › Health: one by one, each issue goes from Needs a fix to Fixed; then the agent walks the store and every check passes */
.sw-tools[data-play="2"] .tl-p2{animation:tl-page 500ms var(--ease-expo) 30ms both}
.sw-tools[data-play="2"] .tl-iss li:nth-child(1) .tl-bad{animation:tl-off 140ms linear 450ms both}
.sw-tools[data-play="2"] .tl-iss li:nth-child(2) .tl-bad{animation:tl-off 140ms linear 650ms both}
.sw-tools[data-play="2"] .tl-iss li:nth-child(3) .tl-bad{animation:tl-off 140ms linear 850ms both}
.sw-tools[data-play="2"] .tl-iss li:nth-child(4) .tl-bad{animation:tl-off 140ms linear 1050ms both}
.sw-tools[data-play="2"] .tl-iss li:nth-child(1) .tl-fx{animation:sw-pop 400ms var(--sw-land) 530ms both}
.sw-tools[data-play="2"] .tl-iss li:nth-child(2) .tl-fx{animation:sw-pop 400ms var(--sw-land) 730ms both}
.sw-tools[data-play="2"] .tl-iss li:nth-child(3) .tl-fx{animation:sw-pop 400ms var(--sw-land) 930ms both}
.sw-tools[data-play="2"] .tl-iss li:nth-child(4) .tl-fx{animation:sw-pop 400ms var(--sw-land) 1130ms both}
.sw-tools[data-play="2"] .tl-iss li:nth-child(1) .tl-to{animation:tl-wipe 420ms var(--ease-expo) 500ms both}
.sw-tools[data-play="2"] .tl-iss li:nth-child(2) .tl-to{animation:tl-wipe 420ms var(--ease-expo) 700ms both}
.sw-tools[data-play="2"] .tl-iss li:nth-child(3) .tl-to{animation:tl-wipe 420ms var(--ease-expo) 900ms both}
.sw-tools[data-play="2"] .tl-iss li:nth-child(4) .tl-to{animation:tl-wipe 420ms var(--ease-expo) 1100ms both}
.sw-tools[data-play="2"] .tl-agent{animation:sw-in 460ms var(--ease-expo) 1200ms both}
.sw-tools[data-play="2"] .tl-wl{animation:tl-bar 700ms var(--sw-move) 1380ms both}
.sw-tools[data-play="2"] .tl-walk li:nth-of-type(1) .tl-cp{animation:tl-cp 420ms var(--sw-land) 1380ms both}
.sw-tools[data-play="2"] .tl-walk li:nth-of-type(2) .tl-cp{animation:tl-cp 420ms var(--sw-land) 1560ms both}
.sw-tools[data-play="2"] .tl-walk li:nth-of-type(3) .tl-cp{animation:tl-cp 420ms var(--sw-land) 1740ms both}
.sw-tools[data-play="2"] .tl-walk li:nth-of-type(4) .tl-cp{animation:tl-cp 420ms var(--sw-land) 1920ms both}
.sw-tools[data-play="2"] .tl-pass{animation:sw-pop 400ms var(--sw-land) 2050ms both}
/* 3 · Growth: visits become orders become revenue, the channels fill in (AI assistants among them), the client's report goes out */
.sw-tools[data-play="3"] .tl-p3{animation:tl-page 500ms var(--ease-expo) 30ms both}
.sw-tools[data-play="3"] .tl-fn:nth-child(1){animation:sw-in 440ms var(--ease-expo) 80ms both}
.sw-tools[data-play="3"] .tl-fn:nth-child(3){animation:sw-in 440ms var(--ease-expo) 260ms both}
.sw-tools[data-play="3"] .tl-fn:nth-child(5){animation:sw-in 440ms var(--ease-expo) 440ms both}
.sw-tools[data-play="3"] .tl-fl:nth-child(2)::before{animation:tl-bar 380ms var(--ease-expo) 200ms both}
.sw-tools[data-play="3"] .tl-fl:nth-child(4)::before{animation:tl-bar 380ms var(--ease-expo) 380ms both}
.sw-tools[data-play="3"] .tl-fl:nth-child(2)::after,.sw-tools[data-play="3"] .tl-fl:nth-child(2) span{animation:sw-fade 320ms linear 380ms both}
.sw-tools[data-play="3"] .tl-fl:nth-child(4)::after,.sw-tools[data-play="3"] .tl-fl:nth-child(4) span{animation:sw-fade 320ms linear 560ms both}
.sw-tools[data-play="3"] .tl-fn:nth-child(3) .chip{animation:sw-pop 400ms var(--sw-land) 650ms both}
.sw-tools[data-play="3"] .tl-fn:nth-child(5) .chip{animation:sw-pop 400ms var(--sw-land) 800ms both}
.sw-tools[data-play="3"] .tl-chan .tl-bars li:nth-child(1) i{animation:tl-bar 800ms var(--ease-expo) 700ms both}
.sw-tools[data-play="3"] .tl-chan .tl-bars li:nth-child(2) i{animation:tl-bar 800ms var(--ease-expo) 790ms both}
.sw-tools[data-play="3"] .tl-chan .tl-bars li:nth-child(3) i{animation:tl-bar 800ms var(--ease-expo) 880ms both}
.sw-tools[data-play="3"] .tl-chan .tl-bars li:nth-child(4) i{animation:tl-bar 800ms var(--ease-expo) 970ms both}
.sw-tools[data-play="3"] .tl-chan .tl-bars b{animation:sw-fade 380ms linear 1050ms both}
.sw-tools[data-play="3"] .tl-ais{animation:sw-fade 400ms linear 1250ms both}
.sw-tools[data-play="3"] .tl-rep{animation:sw-slide 560ms var(--ease-expo) 1450ms both}
.sw-tools[data-play="3"] .tl-rep .chip{animation:sw-pop 400ms var(--sw-land) 1850ms both}

/* ---------- Reduce motion: nothing moves; every step is at rest ---------- */
@media (prefers-reduced-motion:reduce){
  .story *,.story *::before,.story *::after{animation:none!important;transition:none!important}
}
@media print{.story .sw *{animation:none!important}}

/* a link that every step repeats (Agent Readiness, Dottpace for agencies): pinned, one step shows at a time; stacked, it shows once, after the last step */
.story:not(.is-pin) .st:not(:last-of-type) .st-once{display:none}

/* ====================================================================== a phone (the review, Oct 16): each step reads heading → key line, and
   each story ends on its result's window; the facts — and the earlier steps' windows — open with "Show details" (story.js). Without script,
   or on a wider screen, everything shows. ====================================================================== */
.st-dt{display:none}
@media (max-width:759px){
  html.js .story:not(.is-pin) .st-dt{display:inline-flex;align-items:center;gap:6px;margin-top:12px;height:32px;padding:0 4px 0 0;font-size:14px;font-weight:500;color:var(--text-2)}
  html.js .story:not(.is-pin) .st-dt:hover{color:var(--text-1)}
  .st-dt .ic{width:15px;height:15px;transition:rotate var(--dur-1) var(--ease-out)}
  .st-dt-c,.st.is-open .st-dt-o{display:none}
  .st.is-open .st-dt-c{display:inline}
  .st.is-open .st-dt .ic{rotate:180deg}
  html.js .story:not(.is-pin) .st:not(.is-open) :is(.st-facts,.st-more){display:none}
  html.js .story:not(.is-pin) .st:not(.is-open):not(:last-of-type) .st-scene{display:none}
}