/* The guide (src/guide.js): an animated cursor over each section, in a layer of its own (absolute, pointer-events:
   none), so nothing on the page moves. Only transform and opacity animate. Ghosts copy the widget's look and the
   live demo's hover (yellow outline, label); they are aria-hidden and never editable. */
:root {
  --gd-hover: #ffc533; /* the live demo's hover yellow (--ld-hover) */
  --gd-ring: rgb(67 83 255 / 0.3); /* --signal at 30%: the click ring and the tap ripple */
  --gd-lit: rgb(67 83 255 / 0.14); /* --signal at 14%: a line the cursor points out */
  --gd-shadow: 0 12px 32px rgb(15 17 21 / 0.18);
  --gd-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gd-layer { position: absolute; inset: 0; z-index: 4; overflow: clip; pointer-events: none; }
.gd-ghost { position: absolute; left: 0; top: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity 200ms var(--gd-ease), visibility 0s 200ms; }
.gd-ghost.is-on { opacity: 1; visibility: visible; transition: opacity 200ms var(--gd-ease); }

/* The cursor: the story's pointer, its tip on the point. */
.gd-cursor { z-index: 3; width: 18px; height: 26px; margin: -1.5px 0 0 -1.5px; }
.gd-arrow { display: block; transform-origin: 1.5px 1.5px; }
.gd-arrow svg { display: block; }
.gd-ring, .gd-ripple, .gd-mark, .gd-pulse { opacity: 1; visibility: visible; transition: none; }
.gd-ring { width: 28px; height: 28px; border-radius: 50%; background: var(--gd-ring); }
.gd-ripple { width: 40px; height: 40px; border-radius: 50%; background: var(--gd-ring); }
.gd-pulse { position: fixed; z-index: 10; border-radius: 999px; box-shadow: 0 0 0 3px var(--gd-ring); pointer-events: none; }

/* The hovered element: the live demo's outline (an outline: nothing moves). */
.hero .gd-hover { outline: 2px solid var(--gd-hover); outline-offset: 4px; border-radius: 4px; }
.gd-label { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 4px 4px 4px 0; background: var(--gd-hover); color: #0f1115; font: 600 12px/1 'Inter', system-ui, sans-serif; white-space: nowrap; }

/* The ghost composer, in the widget's style, anchored under the headline. */
.gd-composer { width: min(320px, calc(100% - 40px)); padding: 14px; border: 1px solid var(--ink-12); border-radius: 14px; background: var(--white); box-shadow: var(--gd-shadow); color: var(--ink); font-size: 14px; line-height: 1.45; text-align: left; transform-origin: 0 0; }
.gd-composer p { margin: 0; }
.gd-target { color: var(--ink-64); font-size: 12px; }
.gd-target code { padding: 2px 6px; border-radius: 6px; background: var(--ink-6); color: var(--ink); font: 600 11px/1 var(--mono); }
.gd-input { min-height: 66px; margin-top: 10px !important; padding: 8px 10px; border-radius: 8px; outline: 2px solid var(--signal); outline-offset: -1px; font-weight: 500; }
.gd-actions { display: flex; justify-content: flex-end; margin-top: 10px !important; }
.gd-send { display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border-radius: 8px; background: var(--signal); color: var(--white); font-weight: 700; }
.gd-send.gd-hover { background: var(--signal-hover); }

/* The pin on the commented element. */
.gd-pin { display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid var(--white); border-radius: 50% 50% 50% 4px; background: var(--signal); color: var(--white); box-shadow: 0 2px 8px rgb(15 17 21 / 0.25); font: 700 13px/1 'Inter', system-ui, sans-serif; scale: 0.6; transition: opacity 200ms var(--gd-ease), scale 200ms var(--gd-ease), visibility 0s 200ms; }
.gd-pin.is-on { scale: 1; transition: opacity 200ms var(--gd-ease), scale 200ms var(--gd-ease); }

/* The hero pane as the agent receives the comment: over the pane's body, lines 120 ms apart. */
.gd-pane { display: flex; flex-direction: column; gap: 10px; overflow: hidden; padding: 18px 20px; border-radius: 0 0 16px 16px; background: var(--white); font-size: 14px; line-height: 1.45; text-align: left; }
.gd-pane p { margin: 0; }
.gd-pane-head { font-weight: 600; }
.gd-pane-head::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--signal); vertical-align: 1px; }
.gd-fields { display: grid; gap: 6px; margin: 0; font: 12.5px/1.5 var(--mono); }
.gd-field { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; opacity: 0; transition: opacity 200ms var(--gd-ease); }
.gd-field dt { color: var(--ink-64); }
.gd-field dd { margin: 0; overflow-wrap: anywhere; }
.gd-pane.is-on .gd-field { opacity: 1; }
.gd-pane.is-on .gd-field:nth-child(2) { transition-delay: 120ms; }
.gd-pane.is-on .gd-field:nth-child(3) { transition-delay: 240ms; }
.gd-pane.is-on .gd-field:nth-child(4) { transition-delay: 360ms; }
.gd-confirm { padding: 8px 10px; border-radius: 8px; background: var(--gd-lit); color: var(--ink); font-weight: 500; opacity: 0; transition: opacity 200ms var(--gd-ease); }
.gd-confirm.is-on { opacity: 1; }

/* Chips: "Your turn" after the hero's guide, and the replay chip bottom right in every section once its guide has played. */
.gd-chip { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; background: var(--ink); color: var(--white); font: 600 13px/1 'Inter', system-ui, sans-serif; white-space: nowrap; box-shadow: var(--gd-shadow); }
.gd-replay { position: absolute; right: 24px; bottom: 16px; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 1px solid var(--ink-12); border-radius: 999px; background: transparent; color: var(--ink-64); font: 500 13px/1 'Inter', system-ui, sans-serif; cursor: pointer; pointer-events: auto; }
.gd-replay::before { content: ''; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; }
.gd-replay:hover { border-color: var(--ink-64); color: var(--ink); }
.ink .gd-replay { border-color: var(--on-ink-16); color: var(--on-ink-72); }
.ink .gd-replay:hover { border-color: var(--on-ink-72); color: var(--white); }

/* Static mode (reduced motion, saveData): the end state with numbered marks outside the targets (4px away) and a
   legend under the content. White with a --signal border, so they never read as the sections' step numbers. */
.gd-mark, .gd-legend b { display: grid; place-items: center; flex: none; width: var(--gd-mark); height: var(--gd-mark); border: 1.5px solid var(--signal); border-radius: 50%; background: var(--white); color: var(--signal); font: 700 calc(var(--gd-mark) * 0.5)/1 'Inter', system-ui, sans-serif; }
.gd-layer { --gd-mark: 22px; }
.gd-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; max-width: calc(100% - 40px); margin: 0; padding: 0; list-style: none; color: var(--ink-64); font: 500 13px/20px 'Inter', system-ui, sans-serif; opacity: 1; visibility: visible; transition: none; }
.gd-legend li { display: flex; align-items: center; gap: 6px; }
.ink .gd-legend { color: var(--on-ink-72); }

/* Lines the cursor points out (page elements with class is-on). */
#pricing .is-on { border-radius: 4px; background: var(--gd-lit); box-shadow: 0 0 0 4px var(--gd-lit); transition: background-color 200ms ease-out, box-shadow 200ms ease-out; }

/* The start state of a guide that is still to play, from the first frame (src/guide-boot.js sets data-gd-motion on
   <html> before anything paints; guide.js then sets data-gd="init"). Without JS, in static mode and once played:
   the end state, as in the HTML. */
#get-started[data-gd='init'] .term-out > span, #get-started[data-gd='play'] .term-out > span:not(.is-on),
[data-gd-motion]:not([data-gd-motion~='start']) #get-started:not([data-gd]) .term-out > span { visibility: hidden; }
[data-gd-motion]:not([data-gd-motion~='features']) #features:not([data-gd]) .switch .switch-track { background: var(--ink-12); }
[data-gd-motion]:not([data-gd-motion~='features']) #features:not([data-gd]) .switch .switch-knob { transform: none; }

/* Right, at the content's edge; with the live demo on wide screens, above the widget's launcher (bottom right). */
.gd-replay { right: max(24px, calc((100% - 1180px) / 2 + 24px)); }
@media (min-width: 768px) { html:has(main[data-ld-page]) .gd-replay { bottom: 72px; } }
@media (max-width: 767.98px) {
  .gd-replay { right: 16px; bottom: 16px; }
  .gd-layer { --gd-mark: 16px; }
  .gd-legend { gap: 4px 12px; font-size: 12px; line-height: 18px; }
  /* Static mode (no data-gd-motion): 12px less between the list and the payload, and the content centred with room
     for the legend under it (12px + 18px), so it ends at least 16px above the comment mode toggle. */
  html:not([data-gd-motion]) #features { row-gap: 20px; padding-bottom: calc(var(--section-pad-bottom) + 30px); }
}