/* The demo's bar and guide on the dashboard (templates/demo.html). */

.demo-badge {
  display: inline-flex;
  align-items: center;
  height: 1.5rem;
  margin-right: 0.5rem;
  padding-inline: 0.5rem;
  border: 1px solid var(--marketing-border);
  border-radius: 9999px;
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
header .demo-start {
  height: 2.25rem;
  margin-right: 0.25rem;
  padding-inline: 1rem;
}
@media (max-width: 30rem) {
  .demo-badge {
    display: none;
  }
}

.demo-guide {
  /* Bottom left: the review's pile floats in the sheet's right corner. */
  position: fixed;
  left: max(1rem, env(safe-area-inset-left));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 45;
  width: min(22rem, calc(100vw - 2rem));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.demo-guide-card {
  width: 100%;
  padding: 1rem 1.125rem 0.875rem;
  border: 1px solid var(--marketing-border);
  border-radius: 1.125rem;
  background: var(--app-content-solid, var(--marketing-surface));
  color: var(--marketing-text);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 24px 48px -24px rgb(0 0 0 / 0.35);
  animation: demo-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.demo-guide-card[hidden] {
  display: none;
}
.demo-guide-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.demo-guide-progress {
  display: flex;
  flex: 1;
  gap: 0.25rem;
}
.demo-guide-progress span {
  flex: 1;
  height: 3px;
  border-radius: 9999px;
  background: var(--marketing-border);
  transition: background-color 300ms;
}
.demo-guide-progress span.is-done {
  background: var(--marketing-foreground);
}
.demo-guide-fold {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin: -0.375rem -0.5rem -0.375rem 0;
  border-radius: 0.5rem;
  color: var(--muted-foreground);
}
.demo-step h2 {
  margin: 0 0 0.375rem;
  color: var(--marketing-foreground);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.demo-step p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.875rem;
  line-height: 1.5;
  text-wrap: pretty;
}
.demo-step:not([hidden]) {
  animation: demo-step 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.demo-guide-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.875rem;
}
.demo-guide-back,
.demo-guide-next {
  display: inline-flex;
  align-items: center;
  height: 2.25rem;
  padding-inline: 0.875rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 150ms, color 150ms, scale 120ms ease-out;
}
.demo-guide-back {
  margin-right: auto;
  color: var(--muted-foreground);
}
.demo-guide-next {
  border: 1px solid var(--marketing-border);
  color: var(--marketing-foreground);
}
.demo-guide-back:active,
.demo-guide-next:active {
  scale: 0.97;
}
.demo-guide-start {
  height: 2.5rem;
  padding-inline: 1.125rem;
}
.demo-guide-back[hidden],
.demo-guide-next[hidden],
.demo-guide-start[hidden],
.demo-guide-offer[hidden],
.demo-guide-explore[hidden],
.demo-guide-story[hidden],
.demo-notice[hidden] {
  display: none;
}
.demo-guide-offer {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.75rem;
}
.demo-guide-story {
  color: var(--muted-foreground);
  font-size: 0.875rem;
  text-decoration: underline;
  text-decoration-color: var(--marketing-border);
  text-underline-offset: 3px;
}
.demo-guide-eyebrow {
  display: none;
}
.demo-guide-explore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  border: 1px solid var(--marketing-border);
  border-radius: 9999px;
  color: var(--marketing-foreground);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 150ms, scale 120ms ease-out;
}
.demo-guide-explore:active {
  scale: 0.98;
}
/* Above the guide's card, which the column stacks from the bottom. */
.demo-notice {
  order: -1;
  width: 100%;
  margin-bottom: 0.5rem;
  padding: 0.875rem 1rem 0.75rem;
  border: 1px solid var(--marketing-border);
  border-radius: 1rem;
  background: var(--app-content-solid, var(--marketing-surface));
  color: var(--muted-foreground);
  font-size: 0.875rem;
  line-height: 1.5;
  box-shadow: 0 24px 48px -24px rgb(0 0 0 / 0.35);
  animation: demo-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.demo-notice p {
  margin: 0;
}
.demo-notice strong {
  color: var(--marketing-foreground);
  font-weight: 500;
}
.demo-notice-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.625rem;
}
.demo-guide-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  height: 2.5rem;
  padding-inline: 1.125rem;
  border: 1px solid var(--marketing-border);
  border-radius: 9999px;
  background: var(--app-content-solid, var(--marketing-surface));
  color: var(--marketing-foreground);
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 12px 28px -16px rgb(0 0 0 / 0.4);
  touch-action: manipulation;
}
/* A dot before the step's name says the pill is the guide. */
.demo-guide-pill::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--marketing-accent);
}
.demo-guide-pill[hidden] {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .demo-guide-back:hover,
  .demo-guide-fold:hover {
    color: var(--marketing-foreground);
  }
  .demo-guide-next:hover,
  .demo-guide-explore:hover,
  .demo-guide-pill:hover {
    background: var(--marketing-surface-hover-muted);
  }
}

/* On a phone the guide spans the bottom, inside the gutters. */
@media (max-width: 40rem) {
  .demo-guide {
    right: max(1rem, env(safe-area-inset-right));
    width: auto;
  }
  .demo-guide-card {
    padding: 0.875rem 1rem 0.75rem;
  }
}

/* The spotlight: the page is a dark room and the part is on stage, in
   a soft pool of light with no edge. The pool is one radial gradient
   over the screen: clear in the middle, darkening out to the room. Its
   place and size are properties the browser can glide, so a step
   change moves the light to the next part. A step that waits for the
   visitor lets the light swell a little and settle, over and over. The
   layer sits under the guide's card and takes no clicks. */
@property --spot-x {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --spot-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --spot-w {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --spot-h {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --spot-swell {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}
.demo-guide {
  --demo-dim: rgb(14 20 17 / 0.55);
  --demo-glow: rgb(255 250 235 / 0.1);
  --demo-ink: var(--marketing-foreground);
}
[data-theme="dark"] .demo-guide {
  --demo-dim: rgb(0 0 0 / 0.78);
  --demo-glow: rgb(255 248 230 / 0.07);
}
.demo-spotlight {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 320ms ease-out;
  /* The ellipse is sized so the part's corners sit inside the clear
     middle (to 55%), and the light falls off over the rest. */
  --spot-rx: calc(var(--spot-w) * 0.5 * 1.42 / 0.55 * var(--spot-swell) + 24px);
  --spot-ry: calc(var(--spot-h) * 0.5 * 1.42 / 0.55 * var(--spot-swell) + 24px);
  background:
    radial-gradient(var(--spot-rx) var(--spot-ry) at var(--spot-x) var(--spot-y), var(--demo-glow) 0%, transparent 55%),
    radial-gradient(var(--spot-rx) var(--spot-ry) at var(--spot-x) var(--spot-y), transparent 0%, transparent 52%, color-mix(in oklab, var(--demo-dim) 55%, transparent) 72%, var(--demo-dim) 100%);
}
.demo-spotlight.is-on {
  opacity: 1;
}
.demo-spotlight.is-moving {
  transition:
    opacity 320ms ease-out,
    --spot-x 520ms cubic-bezier(0.22, 1, 0.36, 1),
    --spot-y 520ms cubic-bezier(0.22, 1, 0.36, 1),
    --spot-w 520ms cubic-bezier(0.22, 1, 0.36, 1),
    --spot-h 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.demo-spotlight.is-waiting:not(.is-moving) {
  animation: demo-swell 2.6s ease-in-out infinite;
}
@keyframes demo-swell {
  50% {
    --spot-swell: 1.12;
  }
}

/* The arrow, drawn as with a pen: the shaft, then the head. */
.demo-arrow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--demo-ink);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.35));
}
.demo-arrow[hidden] {
  display: none;
}
.demo-arrow path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.demo-arrow.is-drawing .demo-arrow-shaft {
  animation: demo-draw 520ms cubic-bezier(0.65, 0, 0.35, 1) 380ms both;
}
.demo-arrow.is-drawing .demo-arrow-head {
  animation: demo-draw 200ms cubic-bezier(0.22, 1, 0.36, 1) 880ms both;
}
/* Hidden until the pen touches down: a dash of no length still paints
   its round cap, a dot where the arrow will be. */
@keyframes demo-draw {
  from {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  to {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

/* The last step is the finish line: the card leaves its corner for the
   middle of the screen, bigger, over the whole page dimmed, with the
   way in first, its price under it, and the ways back below. */
/* Centered without a transform: one would hold the spotlight's layer
   to the guide's box instead of the screen. */
.demo-guide.is-finale {
  inset: 0;
  width: auto;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.is-finale .demo-guide-card {
  width: min(26rem, calc(100vw - 2rem));
  pointer-events: auto;
  padding: 1.75rem 1.75rem 1.25rem;
  border-radius: 1.5rem;
  text-align: center;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 32px 80px -24px rgb(0 0 0 / 0.55);
}
.is-finale .demo-guide-head {
  justify-content: center;
  margin-bottom: 1rem;
}
.is-finale .demo-guide-progress,
.is-finale .demo-guide-fold {
  display: none;
}
.is-finale .demo-guide-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  padding: 0.25rem 0.625rem 0.25rem 0.5rem;
  border-radius: 9999px;
  background: color-mix(in oklab, var(--marketing-accent) 16%, transparent);
  color: var(--marketing-accent);
  font-size: 0.75rem;
  font-weight: 500;
}
.is-finale .demo-step h2 {
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.is-finale .demo-step p {
  font-size: 0.9375rem;
  text-wrap: balance;
}
.is-finale .demo-guide-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "start start"
    "offer offer"
    "explore explore"
    "back story";
  gap: 0.625rem 0.5rem;
  margin-top: 1.5rem;
}
.is-finale .demo-guide-start {
  grid-area: start;
  justify-content: center;
  height: 3rem;
  font-size: 1rem;
}
.is-finale .demo-guide-offer {
  grid-area: offer;
}
.is-finale .demo-guide-explore {
  grid-area: explore;
  margin-top: 0.5rem;
}
.is-finale .demo-guide-back {
  grid-area: back;
  justify-self: start;
  margin: 0.25rem 0 0 -0.875rem;
}
.is-finale .demo-guide-story {
  grid-area: story;
  justify-self: end;
  align-self: center;
  margin-top: 0.25rem;
}

/* What the step is about, the other way: a soft ring around it that
   breathes twice. */
.demo-spot {
  outline: 2px solid color-mix(in oklab, var(--marketing-accent) 70%, transparent);
  outline-offset: 6px;
  border-radius: 1.25rem;
  animation: demo-spot 1.6s ease-in-out 2;
}

@keyframes demo-in {
  from {
    opacity: 0;
    translate: 0 12px;
  }
}
@keyframes demo-step {
  from {
    opacity: 0;
    translate: 0 4px;
  }
}
@keyframes demo-spot {
  50% {
    outline-offset: 10px;
    outline-color: color-mix(in oklab, var(--marketing-accent) 25%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .demo-guide-card,
  .demo-step:not([hidden]),
  .demo-spot {
    animation: none;
  }
  .demo-spotlight.is-moving {
    transition: opacity 320ms ease-out;
  }
  .demo-spotlight.is-waiting,
  .demo-arrow.is-drawing path {
    animation: none !important;
  }
}