/* "How UserDemos works": the process as its own demo. Coordinates are stage
   pixels (1200x675). Palette is the marketing site's own tokens so the demo
   reads as UserDemos: ink #14130f, accent #f0512b, canvas #fbf9f4,
   line #e6e1d6, forest #0f2b23, ok #1f8a4c. */
/* Match the stage colour, not white: when the frame is a touch wider than
   16:9 the player letterboxes, and white bands would show against the warm
   page this demo is embedded in. */
html, body { margin: 0; height: 100%; background: #f3efe6; }
.ud-frame { height: 100%; }
.ud-stage { --font: "Instrument Sans", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  background: #f3efe6; font-family: var(--font); color: #14130f; }
.ud-cursor__ring { border-color: #f0512b; }
.ud-stage .hidden { display: none; }
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic--sm { width: 13px; height: 13px; stroke-width: 2.4; }

/* ---- Captions ------------------------------------------------------------
   Titles 1 and 6 are centred over the stage. The step captions are solid
   cards in the brand accent: they sit on the app's own light surface, so the
   card has to own its surface to read as a callout and not as app furniture.
   #d1401d is the accent deepened until white text clears AA (4.5:1).
   z-index 40 keeps them above .app (an opaque later sibling) and below the
   player's cursor at 50, so the pointer still passes over the text. */
.caption { position: absolute; z-index: 40; text-align: center; font: 700 30px/1.2 var(--font); color: #14130f; letter-spacing: -0.02em; opacity: 0; }
.caption .dot { color: #f0512b; }
.caption--title { left: 90px; right: 90px; top: 24px; }
.caption--anchor { text-align: left; font: 500 18px/1.4 var(--font); color: #fff; box-sizing: border-box;
  padding: 15px 20px; border-radius: 12px; background: #d1401d; box-shadow: 0 18px 44px rgba(209, 64, 29, 0.38); }
.caption--anchor b { display: block; font: 700 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #ffd9cd; margin-bottom: 7px; }
/* ---- Tour affordance -----------------------------------------------------
   The step captions are not on the timeline at all: each rises in when the
   tour holds at the end of its chapter, so the viewer watches the action
   first and reads afterwards. A caption is only visible and clickable then. The cue is a
   large accent-orange "Next step" button pinned to the card's right edge
   (the site's accent, not black, so it never reads as one of the mocked
   product's own buttons), outside its box
   so the text never reflows, plus a soft pulse so it can't be missed. The
   card itself is also a target, since the eye lands on it first. Pointer
   events stay off the rest of the time so the card reads as plain narration. */
.caption--anchor { pointer-events: none; transform: translateY(12px); transition: opacity 0.4s var(--ease, ease), transform 0.4s var(--ease, ease); }
.caption--next { pointer-events: auto; cursor: pointer; opacity: 1; transform: none; }
.caption--next:focus-visible { outline: 3px solid #14130f; outline-offset: 3px; }
.caption--next::after { content: "Next step \2192"; position: absolute; left: calc(100% + 16px); top: 50%;
  transform: translateY(-50%); display: inline-flex; align-items: center; white-space: nowrap;
  height: 58px; padding: 0 30px; border-radius: 999px; background: #f0512b; color: #fff;
  font: 700 19px/1 var(--font); letter-spacing: -0.01em;
  box-shadow: 0 14px 34px rgba(209, 64, 29, 0.38);
  animation: tour-pulse 1.6s ease-out infinite; transition: transform 0.2s, background 0.2s; }
.caption--next:hover::after { transform: translateY(-50%) translateY(-2px); background: #d1401d; }
/* On the last stop the tour restarts instead of advancing. */
.ud-stage.is-end .caption--next::after { content: "Start over \21BA"; }
@keyframes tour-pulse {
  0% { box-shadow: 0 14px 34px rgba(209, 64, 29, 0.38), 0 0 0 0 rgba(240, 81, 43, 0.5); }
  100% { box-shadow: 0 14px 34px rgba(209, 64, 29, 0.38), 0 0 0 18px rgba(240, 81, 43, 0); }
}
@media (prefers-reduced-motion: reduce) { .caption--next::after { animation: none; } }

/* ---- Tour chrome: progress line and restart -------------------------------
   The player's own bar is off for this demo (play/pause and scrubbing fight
   a click-through tour), so the stage draws its own: a thin line along the
   bottom, split into one segment per chapter so the breaks are visible, and
   a small restart button in the corner. Both sit above the cursor (z 50). */
/* Veil for jumps: covers everything but the bar and restart button (z 60)
   while the clock is moved, so a seek never shows as a pop. */
.tour-veil { position: absolute; inset: 0; z-index: 55; background: #f3efe6; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }
.tour-veil.is-on { opacity: 1; }
/* Start overlay: a frosted wash over the poster frame with one CTA. Above
   everything, bar and restart included, since none of it applies yet. */
.tour-intro { position: absolute; inset: 0; z-index: 65; display: grid; place-items: center; cursor: pointer;
  background: rgba(243, 239, 230, 0.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.tour-intro__card { text-align: center; padding: 40px 48px 44px; border-radius: 20px; background: #fff;
  box-shadow: 0 30px 80px rgba(20, 19, 15, 0.18); }
.tour-intro__card b { display: block; font: 700 12px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: #f0512b; margin-bottom: 16px; }
.tour-intro__card h2 { margin: 0 0 10px; font: 700 36px/1.15 var(--font); letter-spacing: -0.025em; color: #14130f; }
.tour-intro__card p { margin: 0 0 28px; font: 500 18px/1.4 var(--font); color: #7a776c; }
.tour-intro__btn { display: inline-flex; align-items: center; gap: 10px; height: 60px; padding: 0 34px; border: 0; border-radius: 999px;
  background: #f0512b; color: #fff; font: 700 20px/1 var(--font); letter-spacing: -0.01em; cursor: pointer;
  box-shadow: 0 14px 34px rgba(209, 64, 29, 0.38); animation: tour-pulse 1.6s ease-out infinite; transition: transform 0.2s, background 0.2s; }
.tour-intro__btn:hover { transform: translateY(-2px); background: #d1401d; }
.tour-intro__btn:focus-visible { outline: 3px solid #14130f; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .tour-intro__btn { animation: none; } }
.tour-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; z-index: 60; display: flex; gap: 3px; }
.tour-seg { flex: var(--len) 1 0; position: relative; background: rgba(20, 19, 15, 0.14); overflow: hidden; cursor: pointer; }
.tour-seg::before { content: ""; position: absolute; inset: 0; right: auto; width: calc(var(--p, 0) * 100%); background: #f0512b; }
.tour-seg:hover { background: rgba(20, 19, 15, 0.26); }
.tour-restart { position: absolute; right: 16px; bottom: 18px; z-index: 60; width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: #14130f; color: #fff; cursor: pointer; display: grid; place-items: center; opacity: 0.55;
  transition: opacity 0.2s, transform 0.2s; font: inherit; padding: 0; }
.tour-restart:hover, .tour-restart:focus-visible { opacity: 1; transform: rotate(-30deg); outline: none; }
.tour-restart svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* The app spans x60..1140 and its content ends at y635. The step cards
   straddle that bottom edge, bleeding onto the stage backdrop so they read as
   an overlay on the demo rather than a panel inside the product. Scene 1's
   form is centred at x600 and ends at y545, so the card hugs the left edge
   below it; the other scenes keep their action right of x360. */
.caption--low { position: absolute; left: 40px; top: 556px; width: 540px; }

/* ---- Step rail (above the window) ---------------------------------------- */
.steps { position: absolute; left: 60px; top: 34px; width: 1080px; height: 34px; display: flex; align-items: center; justify-content: center; gap: 14px; }
.step { display: flex; align-items: center; gap: 9px; font: 600 14px/1 var(--font); color: #a9a396; opacity: 0; }
.step__n { font: 700 11px/1 var(--mono); letter-spacing: 0.08em; padding: 5px 7px; border-radius: 5px; background: #e6e1d6; color: #7a776c; }
.step--on { color: #14130f; }
.step--on .step__n { background: #f0512b; color: #fff; }
.step--done .step__n { background: #d9e6dd; color: #1f8a4c; }
.step__line { width: 46px; height: 2px; background: #e0dacd; opacity: 0; }

/* ---- App window: 60,92 -> 1140,635 --------------------------------------- */
.app { position: absolute; left: 60px; top: 92px; width: 1080px; height: 543px; border-radius: 14px; background: #fff; overflow: hidden; opacity: 0;
  box-shadow: 0 30px 60px rgba(20, 19, 15, 0.20), 0 0 0 1px rgba(20, 19, 15, 0.08); }
.top { position: absolute; left: 0; right: 0; top: 0; height: 46px; display: flex; align-items: center; gap: 14px; padding: 0 16px; box-sizing: border-box; background: #fbf9f4; border-bottom: 1px solid #ece7dc; z-index: 4; }
.dots { display: flex; gap: 6px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: #e0dacd; }
.urlbar { flex: 1; display: flex; align-items: center; gap: 8px; height: 27px; padding: 0 12px; box-sizing: border-box; border-radius: 999px; background: #fff; border: 1px solid #ece7dc; font: 500 12.5px/1 var(--mono); color: #7a776c; }
.urlbar .ic { color: #b3ad9f; }
.top__pill { font: 700 10.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 9px; border-radius: 5px; background: #f3efe6; color: #7a776c; }
.scene { position: absolute; left: 0; right: 0; top: 46px; bottom: 0; }

/* ---- Scene 1: intake form ------------------------------------------------ */
.form { position: absolute; left: 300px; top: 4px; width: 480px; }
.form__head h2 { margin: 0; font: 700 26px/1.2 var(--font); letter-spacing: -0.02em; }
.form__head p { margin: 6px 0 0; font-size: 14.5px; color: #7a776c; }
.form__head, .field, .note { opacity: 0; }
.field { display: block; margin-top: 14px; }
.field__label { display: block; font: 600 12px/1 var(--font); color: #4a4840; margin-bottom: 7px; }
.field__box { position: relative; display: flex; align-items: center; min-height: 42px; padding: 11px 13px; box-sizing: border-box; border-radius: 9px; border: 1.5px solid #e6e1d6; background: #fbf9f4; font-size: 15px; color: #14130f; }
.field__box--tall { min-height: 66px; align-items: flex-start; line-height: 1.45; }
.field__val { white-space: pre-wrap; }
.caret { display: inline-block; width: 1.5px; height: 17px; margin-left: 1px; background: #f0512b; animation: blink 1s steps(1) infinite; vertical-align: -3px; }
@keyframes blink { 50% { opacity: 0; } }
.access { display: flex; gap: 8px; }
.access__opt { display: flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 8px; border: 1.5px solid #e6e1d6; font: 500 13.5px/1 var(--font); color: #4a4840; background: #fff; }
.access__opt--on { border-color: #f0512b; background: #fdeee9; color: #14130f; }
.radio { display: none; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: #f0512b; color: #fff; }
.access__opt--on .radio { display: inline-flex; }
.submit { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 16px; height: 46px; border: 0; border-radius: 9px; background: #14130f; color: #fff; font: 600 15px/1 var(--font); font-family: var(--font); cursor: pointer; opacity: 0; }
.note { margin: 12px 0 0; text-align: center; font-size: 12.5px; color: #a9a396; }

/* ---- Scene 2: we build it ------------------------------------------------ */
.build { position: absolute; inset: 24px 30px; display: grid; grid-template-columns: 434px 1fr; gap: 26px; }
.panel__label { font: 700 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #a9a396; margin-bottom: 11px; opacity: 0; }
/* Left: a greyed wireframe of the customer's own screen, scanned by a sweep. */
.mock { position: relative; height: 372px; border-radius: 10px; border: 1px solid #ece7dc; background: #fbf9f4; overflow: hidden; opacity: 0; }
.mock__bar { display: flex; gap: 5px; padding: 11px 13px; border-bottom: 1px solid #ece7dc; }
.mock__bar i { width: 8px; height: 8px; border-radius: 50%; background: #e0dacd; }
.mock__body { display: flex; height: calc(100% - 33px); }
.mock__side { width: 88px; height: 100%; box-sizing: border-box; padding: 15px 12px; box-sizing: border-box; border-right: 1px solid #ece7dc; display: flex; flex-direction: column; gap: 10px; }
.mock__side span { height: 9px; border-radius: 4px; background: #e6e1d6; }
.mock__side span:nth-child(2) { background: #d6cfbf; }
.mock__main { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 11px; }
.mock__tiles { margin-top: auto; }
.mock__row { height: 15px; border-radius: 5px; background: #ece7dc; }
.mock__row--head { width: 58%; height: 19px; background: #ddd6c6; }
.mock__tiles { display: flex; gap: 10px; }
.mock__tiles i { flex: 1; height: 74px; border-radius: 8px; background: #ece7dc; }
/* The sweep is a single band that travels top to bottom, tinting as it goes. */
.scan { position: absolute; left: 0; right: 0; top: 0; height: 74px; opacity: 0;
  background: linear-gradient(180deg, rgba(240,81,43,0) 0%, rgba(240,81,43,0.16) 50%, rgba(240,81,43,0) 100%);
  border-bottom: 1.5px solid rgba(240, 81, 43, 0.55); }
/* Right: the timeline we write, then what it buys. */
.code { height: 178px; box-sizing: border-box; padding: 14px 16px; border-radius: 10px; background: #0f2b23; font: 500 13px/1.85 var(--mono); color: #9fb8ad; overflow: hidden; opacity: 0; }
.code__line { opacity: 0; white-space: nowrap; }
.code .k { color: #7fd8a8; font-weight: 600; }
.code .s { color: #f0a58b; }
.code .n { color: #e8d48a; }
.code .c { color: #5d7b70; font-style: italic; }
.craft { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.craft__row { display: flex; align-items: center; gap: 10px; font: 500 14.5px/1 var(--font); color: #4a4840; opacity: 0; }
.tickbox { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; background: #d9e6dd; color: #1f8a4c; flex: none; }
.eta { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 9px 13px; border-radius: 8px; background: #fdeee9; color: #d13f1c; font: 600 13.5px/1 var(--font); opacity: 0; }

/* ---- Scene 3: paste the embed ------------------------------------------- */
.cms { position: absolute; inset: 0; display: flex; }
.cms__rail { width: 148px; padding: 18px 12px; box-sizing: border-box; border-right: 1px solid #ece7dc; background: #fbf9f4; display: flex; flex-direction: column; gap: 3px; }
.cms__item { padding: 8px 11px; border-radius: 7px; font: 500 13.5px/1 var(--font); color: #7a776c; }
.cms__item--on { background: #ece7dc; color: #14130f; font-weight: 600; }
.cms__canvas { flex: 1; padding: 20px 26px; box-sizing: border-box; }
.cms__crumb { font: 500 12.5px/1 var(--font); color: #a9a396; margin-bottom: 15px; }
.cms__crumb i { font-style: normal; margin: 0 5px; }
.block { border-radius: 9px; border: 1.5px dashed #e6e1d6; padding: 14px 16px; margin-bottom: 12px; }
.block--text { display: flex; flex-direction: column; gap: 9px; }
.ln { height: 11px; border-radius: 4px; background: #f0ece2; }
.ln--title { height: 17px; width: 55%; background: #e2dccd; }
.ln--short { width: 40%; }
.block--embed { border-style: solid; border-color: #f0512b; background: #fffaf8; box-shadow: 0 0 0 4px rgba(240, 81, 43, 0.09); }
.block__tag { display: inline-flex; align-items: center; gap: 6px; font: 700 10.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: #d13f1c; margin-bottom: 10px; }
.editor { min-height: 40px; padding: 11px 13px; border-radius: 7px; background: #0f2b23; font: 500 12.5px/1.6 var(--mono); word-break: break-all; }
.editor code { color: #9fb8ad; }
.editor .p { color: #7fd8a8; }
.editor .a { color: #e8d48a; }
.editor .v { color: #f0a58b; }
.editor__hint { margin-top: 9px; font: 500 12.5px/1 var(--font); color: #a9a396; opacity: 0; }
.publish { position: absolute; right: 26px; top: 16px; height: 34px; padding: 0 17px; border: 0; border-radius: 8px; background: #14130f; color: #fff; font: 600 13.5px/1 var(--font); font-family: var(--font); cursor: pointer; }

/* ---- Scene 4: live on the customer's site -------------------------------- */
.site { position: absolute; inset: 0; background: #fbf9f4; }
.site__nav { display: flex; align-items: center; gap: 22px; padding: 0 30px; height: 54px; border-bottom: 1px solid #ece7dc; font: 500 13.5px/1 var(--font); color: #7a776c; }
.site__logo { font: 800 18px/1 var(--font); letter-spacing: -0.03em; color: #14130f; margin-right: 8px; }
.site__cta { margin-left: auto; font-style: normal; padding: 8px 14px; border-radius: 7px; background: #14130f; color: #fff; font-weight: 600; }
.site__hero { padding: 18px 30px 0; }
.site__hero h1 { margin: 0; font: 700 27px/1.25 var(--font); letter-spacing: -0.025em; max-width: 620px; opacity: 0; }
.site__hero p { margin: 9px 0 0; font-size: 14.5px; color: #7a776c; max-width: 470px; opacity: 0; }
/* The embedded demo: 16:9, sitting in the page the way a real embed would. */
.playerframe { position: absolute; left: 30px; top: 158px; width: 432px; opacity: 0; }
.playerframe__inner { border-radius: 10px; overflow: hidden; background: #14130f; box-shadow: 0 18px 40px rgba(20, 19, 15, 0.22); }
.pmock { position: relative; height: 206px; background: #fbf9f4; display: flex; }
.pmock__rail { width: 42px; background: #0f2b23; padding: 13px 0; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.pmock__rail i { width: 18px; height: 18px; border-radius: 5px; background: rgba(255,255,255,0.16); }
.pmock__rail i:first-child { background: #f0512b; }
.pmock__body { flex: 1; padding: 15px; display: flex; flex-direction: column; gap: 13px; }
.pmock__tiles { display: flex; gap: 9px; }
.pmock__tiles i { flex: 1; height: 44px; border-radius: 7px; background: #ece7dc; opacity: 0; }
.pmock__chart { flex: 1; display: flex; align-items: flex-end; gap: 8px; }
.pmock__chart i { flex: 1; border-radius: 4px 4px 0 0; background: #f0512b; transform-origin: bottom; transform: scaleY(0); }
.pmock__chart i:nth-child(1) { height: 44%; } .pmock__chart i:nth-child(2) { height: 66%; }
.pmock__chart i:nth-child(3) { height: 52%; } .pmock__chart i:nth-child(4) { height: 80%; }
.pmock__chart i:nth-child(5) { height: 61%; } .pmock__chart i:nth-child(6) { height: 92%; }
.pmock__chart i:nth-child(7) { height: 74%; }
.pcursor { position: absolute; left: 96px; top: 74px; color: #14130f; opacity: 0; }
.pcursor .ic { fill: #fff; stroke: #14130f; stroke-width: 1.6; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
.pbar { display: flex; align-items: center; gap: 10px; padding: 9px 13px; background: #14130f; }
.pbar__play { width: 0; height: 0; border-left: 8px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.pbar__track { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.22); overflow: hidden; }
.pbar__track b { display: block; width: 0; height: 100%; background: #f0512b; }
.tagline { margin-top: 11px; font: 600 12.5px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: #a9a396; opacity: 0; }

/* Stat chips stack to the right of the embedded player in the final scene. */
.chips { position: absolute; left: 620px; top: 300px; width: 290px; display: flex; flex-direction: column; gap: 13px; z-index: 20; }
.chip { display: flex; align-items: baseline; gap: 11px; padding: 13px 17px; border-radius: 11px; background: #fff; box-shadow: 0 12px 30px rgba(20, 19, 15, 0.13), 0 0 0 1px rgba(20, 19, 15, 0.06); font: 500 14px/1 var(--font); color: #7a776c; opacity: 0; }
.chip b { font: 700 22px/1 var(--font); letter-spacing: -0.02em; color: #14130f; }

/* Toast, bottom-right of the stage. */
.toast { position: absolute; right: 84px; bottom: 118px; z-index: 45; display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-radius: 10px; background: #0f2b23; color: #fff; font: 600 14px/1 var(--font); opacity: 0;
  box-shadow: 0 16px 38px rgba(15, 43, 35, 0.35); }
.toast__ic { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #1f8a4c; color: #fff; flex: none; }