/* The product demo (founder, October 18, 2026): a sample workspace behind a work-email gate, then 8 real app screens. A
   highlight takes the size and shape of the part each step points at, a box or a circle, and springs from one part to
   the next; everything else dims a little. Built from the approved tour (artifact version 9). */
/* The fixed site header floats over the top, so the page starts below it, on the site's yellow band; the screen overlaps
   the band's rounded bottom, as on the home page. */
.demo-main { position: relative; isolation: isolate; padding: 104px 0 96px; }
.demo-main::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 300px; z-index: -1; background: var(--yellow); border-radius: 0 0 40px 40px; }
.demo-wrap { display: grid; gap: 16px; }
/* The gate, its scrim, and the cards use display rules, so the hidden attribute must win over them. */
.demo-main [hidden] { display: none !important; }
.demo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; min-height: 40px; }
.demo-spacer { flex: 1; }
.demo-small { height: 40px; padding: 0 16px; font-size: 14.5px; }

.demo-stage { position: relative; border-radius: 16px; overflow: hidden; background: var(--chalk); box-shadow: 0 0 0 1px var(--line); aspect-ratio: 1440 / 900; }
.demo-stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.demo-stage.gated > img { filter: blur(6px) saturate(0.9); transform: scale(1.02); }
.demo-scrim { position: absolute; inset: 0; background: rgb(246 246 243 / 0.55); }

/* The gate: one field, like Ramp's. */
.demo-gate { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; }
.demo-gatecard { width: min(460px, 100%); box-sizing: border-box; display: grid; gap: 14px; padding: 32px; border-radius: 16px; background: var(--paper); box-shadow: var(--shadow-3); text-align: center; }
.demo-gatecard h2 { margin: 0; font-size: 30px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; text-wrap: balance; }
.demo-gatecard p { margin: 0; color: var(--ink-2); text-wrap: balance; }
.demo-field { display: grid; gap: 6px; text-align: left; margin-top: 6px; }
.demo-field label { font-size: 14px; font-weight: 600; }
.demo-field input { box-sizing: border-box; width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--paper); color: var(--ink); font: 400 16px "Geist", sans-serif; caret-color: var(--ink); outline: none; box-shadow: none; transition: border-color .15s ease; }
.demo-field input:hover { border-color: var(--ink-4); }
/* Focus is a neutral contrast change, never a colored ring. */
.demo-field input:focus { border-color: var(--ink); outline: none; box-shadow: none; }
.demo-err { min-height: 20px; font-size: 14px; color: #B42318; text-align: left; }
.demo-err:empty { min-height: 0; margin-top: -14px; }
.demo-gatecard .button { height: 48px; }
.demo-gatecard .button[aria-disabled="true"] { opacity: .7; cursor: progress; }
.demo-small-print { font-size: 13px; color: var(--ink-3); }

.demo-focus { position: absolute; left: 0; top: 0; width: 0; height: 0; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 12px;
  box-shadow: 0 0 0 3px var(--yellow), 0 0 0 4.5px var(--ink), 0 0 0 200vmax rgb(17 17 17 / 0.1);
  transition: left 620ms cubic-bezier(.34, 1.3, .64, 1), top 620ms cubic-bezier(.34, 1.3, .64, 1), width 620ms cubic-bezier(.34, 1.3, .64, 1), height 620ms cubic-bezier(.34, 1.3, .64, 1), border-radius 620ms cubic-bezier(.34, 1.3, .64, 1); }
/* Two glow pulses once the highlight lands on each step, then it rests. */
.demo-focus::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; box-shadow: 0 0 0 3px var(--yellow); opacity: 0; }
.demo-focus.pulse::after { animation: demo-glow 1.8s var(--ease-out) 620ms 2; }
@keyframes demo-glow { from { inset: -3px; opacity: .9; } to { inset: -14px; opacity: 0; } }
.demo-focus:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--yellow), 0 0 0 6px var(--ink), 0 0 0 200vmax rgb(17 17 17 / 0.1); }

.demo-card { position: absolute; z-index: 2; width: 300px; box-sizing: border-box; display: grid; gap: 10px; padding: 16px; border-radius: 12px; background: var(--paper); box-shadow: var(--shadow-3);
  transition: left 620ms cubic-bezier(.34, 1.3, .64, 1), top 620ms cubic-bezier(.34, 1.3, .64, 1); animation: demo-in 320ms var(--ease-out); }
@keyframes demo-in { from { opacity: 0; transform: translateY(6px) scale(.98); } }
/* Each step's words settle in as the card glides, so the swap never reads as a jump. */
.demo-card > * { animation: demo-swap 150ms var(--ease-out); }
@keyframes demo-swap { from { opacity: .7; } }
.demo-card .lead { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.4; text-wrap: pretty; }
.demo-foot { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.demo-foot .count { flex: 1; text-align: center; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.demo-foot .button { height: 34px; padding: 0 12px; font-size: 13.5px; border-radius: 8px; }
.button-quiet { background: var(--chalk); color: var(--ink); }
.button-quiet:hover { background: var(--chalk-2); }
.demo-card form { margin: 0; }
.demo-card .cta { width: 100%; height: 40px; font-size: 14.5px; }
.demo-card .button:focus-visible, .demo-bar .button:focus-visible, .demo-gatecard .button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Phones: the screen stays whole, the card moves under it, and the gate grows the frame to fit. */
@media (max-width: 720px) {
  .demo-main { padding: 92px 0 64px; }
  .demo-main::before { height: 200px; border-radius: 0 0 28px 28px; }
  .demo-card.float { display: none; }
  /* The header and the last step already offer the trial on a phone. */
  .demo-bar .demo-trial { display: none; }
  .demo-bar { min-height: 0; margin-bottom: -16px; }
  .demo-gatecard { padding: 24px 20px; }
  .demo-gatecard h2 { font-size: 24px; }
  .demo-stage.gated { aspect-ratio: auto; }
  .demo-gate { position: relative; padding: 40px 12px; }
}
@media (min-width: 721px) { .demo-card.under { display: none; } }
.demo-card.under { position: static; width: 100%; animation: none; box-shadow: 0 0 0 1px var(--line); }
@media (prefers-reduced-motion: reduce) {
  .demo-focus.pulse::after, .demo-card, .demo-card > * { animation: none; }
  .demo-focus, .demo-card { transition: none; }
}