/* ─────────────────────────────────────────────────────────────────
   HotShot — bespoke showcase stylesheet
   The ShowRunner / MoveMatic / ChopShop page frame (hero, use cases,
   zigzag feature rows, differentiators, screenshot rail, lightbox),
   re-themed to the icon's flame: magenta into amber. Standalone; no
   shared.css dependency. The illustrations at the end are HotShot's own.
   ───────────────────────────────────────────────────────────────── */

/* ── TYPE ── Fraunces (display) over Space Grotesk (text), self-hosted.
   This page has its own stylesheet rather than shared.css, so the block is
   repeated here. Keep it in step with the copy in shared.css — the @font-face
   URLs are identical, so the browser still fetches each file only once. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/spacegrotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/spacegrotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-text:    'Space Grotesk', -apple-system, BlinkMacSystemFont,
                  system-ui, 'Helvetica Neue', Arial, sans-serif;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
}
h1 { font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 96; }
h2 { font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 48; }
h3 { font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 20; }

:root {
  --bg:           #fbf2f6;     /* warm blush wash */
  --surface:      #ffffff;
  --ink:          #1a0f15;     /* deep plum-black */
  --ink-2:        #6a5661;
  --line:         rgba(26, 15, 21, 0.10);

  --pink:         #e0357f;     /* the icon's flame, magenta → amber */
  --pink-light:   #f0569a;
  --pink-deep:    #b8246a;
  --amber:        #f2a516;
  --amber-light:  #ffc42e;

  --grad-brand:   linear-gradient(135deg, #e0357f 0%, #ef5277 55%, #f5a623 100%);
  --grad-text:    linear-gradient(120deg, #1d0f16 26%, #e0357f 64%, #f29a1f 100%);
  --grad-flame:   linear-gradient(160deg, #ffc42e 0%, #f5813b 45%, #e0357f 100%);

  --shadow-sm:    0 2px 8px rgba(26, 15, 21, 0.06);
  --shadow-md:    0 12px 32px rgba(26, 15, 21, 0.10);
  --shadow-lg:    0 24px 60px rgba(80, 20, 45, 0.16);

  --radius:       18px;
  --radius-sm:    10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #130a10;
    --surface:   #1f1219;
    --ink:       #fbeef4;
    --ink-2:     #b89aa8;
    --line:      rgba(255, 255, 255, 0.10);

    --pink:        #ff5c9d;
    --pink-light:  #ff7fb3;
    --pink-deep:   #e0357f;
    --amber:       #ffb43a;
    --amber-light: #ffcf5a;

    --grad-brand: linear-gradient(135deg, #e0357f 0%, #ef5277 55%, #f5a623 100%);
    --grad-text:  linear-gradient(120deg, #fbeef4 26%, #ff7fb3 64%, #ffc42e 100%);
    --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md:  0 12px 32px rgba(0, 0, 0, 0.4);
    --shadow-lg:  0 24px 60px rgba(0, 0, 0, 0.6);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

/* ── BACKGROUND — the flame's magenta and amber, faded + grain. ── */
body::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1200px;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse 900px 700px at 12% -10%, rgba(224, 53, 127, 0.22), transparent 70%),
    radial-gradient(ellipse 800px 600px at 92%  18%, rgba(255, 196, 46, 0.24), transparent 70%),
    radial-gradient(ellipse 700px 500px at 55%  52%, rgba(240, 90, 120, 0.10), transparent 70%);
  mask-image: linear-gradient(180deg,
    #000 0%, #000 35%, rgba(0, 0, 0, 0.8) 55%, rgba(0, 0, 0, 0.3) 78%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg,
    #000 0%, #000 35%, rgba(0, 0, 0, 0.8) 55%, rgba(0, 0, 0, 0.3) 78%, transparent 100%);
}
@media (prefers-color-scheme: dark) {
  body::before {
    background:
      radial-gradient(ellipse 900px 700px at 12% -10%, rgba(224, 53, 127, 0.30), transparent 70%),
      radial-gradient(ellipse 800px 600px at 92%  18%, rgba(255, 170, 40, 0.14), transparent 70%),
      radial-gradient(ellipse 700px 500px at 55%  52%, rgba(160, 40, 90, 0.16),  transparent 70%);
  }
}

/* Grain overlay */
body::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1200px;
  pointer-events: none;
  z-index: -1;
  opacity: 0.28;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  mask-image: linear-gradient(180deg, #000 0%, #000 40%, rgba(0, 0, 0, 0.4) 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, rgba(0, 0, 0, 0.4) 70%, transparent 100%);
}

a { color: var(--pink); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─────────────────── TOP NAV ─────────────────── */

.topnav {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ink-2);
}
.back-home {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--pink);
  font-weight: 500;
}
.back-home svg { width: 14px; height: 14px; }
.nav-sep { opacity: 0.4; }
.nav-title { color: var(--ink); font-weight: 600; }
.nav-docs {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--pink);
  font-weight: 500;
}
.nav-docs svg { width: 12px; height: 12px; }

main { display: block; }

/* ─────────────────── HERO ─────────────────── */

.hero {
  max-width: 1180px;
  margin: 40px auto 100px;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 460px minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  overflow: visible;
}

.hero-text { max-width: 460px; }
.hero-icon img {
  display: block;
  border-radius: unset;
  box-shadow: unset;
  margin-bottom: 28px;
}

.hero .app-name {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
  margin: -12px 0 18px;
}

.hero h1 {
  font-size: clamp(48px, 6.5vw, 84px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.98;
  margin-bottom: 22px;
}
.hero h1 em {
  font-style: normal;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lede {
  font-size: 21px;
  color: var(--ink-2);
  line-height: 1.4;
  margin-bottom: 32px;
}

.cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
  cursor: pointer;
  white-space: nowrap;
  border: none;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }

.btn-primary {
  color: #ffffff;
  background: var(--grad-brand);
  box-shadow: 0 10px 28px -6px rgba(224, 53, 127, 0.50);
}
.btn-primary:hover {
  box-shadow: 0 14px 36px -6px rgba(224, 53, 127, 0.65);
}
.btn-large { padding: 16px 36px; font-size: 17px; }

.micro {
  font-size: 13px;
  color: var(--ink-2);
  margin-top: 18px;
  opacity: 0.85;
}

/* Quiet bundle pointer under a buy-button row. Same job as .micro but
   without the opacity knock-down, so the link reads as an offer rather
   than fine print. Inherits alignment from its section (left in the
   hero, centred in the end CTA). */
.bundle-note {
  font-size: 14px;
  color: var(--ink-2);
  margin-top: 16px;
}

/* HERO SCREENSHOT — light/dark <picture> pair (the real Markup canvas).
   The screenshot carries its own window chrome + baked shadow, so the
   container adds no extra radius/shadow. Explicit large width bleeds it
   off the right edge; body overflow-x:hidden clips the overflow. */
.hero-demo {
  width: 900px;
  max-width: none;
  padding: 0;
}
/* The bespoke hero carries its own framing — no card radius/shadow on top of it. */
.hero-demo picture,
.hero-demo img {
  display: block;
  width: 100%;
  height: auto;
}

/* ─────────────────── KICKER (small section labels) ─────────────────── */

.kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 22px;
}
.kicker.centered { text-align: center; }

/* ─────────────────── MADE FOR ─────────────────── */

.made-for {
  max-width: 1180px;
  margin: 0 auto 110px;
  padding: 0 32px;
}

.use-cases {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.use-case {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.use-case:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.use-vis {
  height: 180px;
  background: linear-gradient(135deg, #fdeff5 0%, #fbe4ee 100%);
  position: relative;
  overflow: hidden;
}
@media (prefers-color-scheme: dark) {
  .use-vis {
    background: linear-gradient(135deg, #2a1520 0%, #21111a 100%);
  }
}

.use-case h3 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 18px 22px 6px;
}
.use-case p {
  padding: 0 22px 22px;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.5;
}

/* ─────────────────── FEATURE ROWS (zigzag) ─────────────────── */

.feature-rows {
  max-width: 1180px;
  margin: 0 auto 80px;
  padding: 0 32px;
}

.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  margin-bottom: 120px;
}
.feature-row:last-child { margin-bottom: 0; }

.feature-row.reverse > :first-child { grid-column: 1; }
.feature-row.reverse > :last-child  { grid-column: 2; }

.feature-text h2 {
  font-size: clamp(34px, 4.5vw, 54px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-bottom: 22px;
}
.feature-text h2 em {
  font-style: normal;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.feature-text p {
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.6;
  margin-bottom: 14px;
}
.feature-text p:last-child { margin-bottom: 0; }
.feature-text kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  background: #f8e3ec;
  padding: 2px 8px;
  border-radius: 5px;
  border: 1px solid var(--line);
  color: var(--ink);
}
@media (prefers-color-scheme: dark) {
  .feature-text kbd { background: rgba(255, 255, 255, 0.08); }
}

.feature-demo {
  position: relative;
  min-height: 280px;
}


/* ─────────────────── DIFFERENTIATORS GRID ─────────────────── */

.diff-grid {
  max-width: 1180px;
  margin: 0 auto 110px;
  padding: 0 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.diff-grid > .kicker { grid-column: 1 / -1; }

.diff-card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.diff-vis {
  height: 160px;
  background: linear-gradient(135deg, #fdeff5 0%, #fbe4ee 100%);
  position: relative;
  overflow: hidden;
}
@media (prefers-color-scheme: dark) {
  .diff-vis { background: linear-gradient(135deg, #2a1520 0%, #21111a 100%); }
}
.diff-card h3 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 20px 22px 6px;
}
.diff-card p {
  padding: 0 22px 22px;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.5;
}
.diff-card kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  background: #f8e3ec;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid var(--line);
  color: var(--ink);
}
@media (prefers-color-scheme: dark) {
  .diff-card kbd { background: rgba(255, 255, 255, 0.08); }
}


/* ─────────────────── CTA + SUPPORT (combined) ─────────────────── */

.cta-end {
  max-width: 1116px;
  margin: 0 auto 80px;
  padding: 56px 48px 44px;
  text-align: center;
  background: var(--surface);
  border-radius: 28px;
  box-shadow: var(--shadow-md);
}
.cta-end h2 {
  font-size: clamp(34px, 4.8vw, 52px);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 14px;
}
.cta-end .cta-sub {
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.5;
  max-width: 540px;
  margin: 0 auto 12px;
}
.cta-end .cta-req {
  font-size: 13px;
  color: var(--ink-2);
  opacity: 0.7;
  margin: 0 auto 28px;
  letter-spacing: 0.01em;
}
.cta-end .cta {
  justify-content: center;
  margin-bottom: 36px;
}
.cta-support {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--ink-2);
}
.cta-support a {
  color: var(--pink);
  text-decoration: none;
  font-weight: 500;
}
.cta-support a:hover { text-decoration: underline; }
.cta-support span { opacity: 0.4; }

/* ─────────────────── FOOTER ─────────────────── */

.site-footer {
  max-width: none;
  margin: 0;
  padding: 24px 32px 52px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--ink-2);
}
.site-footer .social {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.site-footer .social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  color: var(--ink-2);
  transition: color 0.15s, background 0.15s;
}
.site-footer .social a:hover {
  color: var(--ink);
  background: var(--line);
}
.site-footer .social svg { width: 15px; height: 15px; display: block; }

/* ─────────────────── RESPONSIVE ─────────────────── */

@media (max-width: 980px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
  .hero-text,
  .hero-demo { min-width: 0; max-width: 100%; }
  .hero-demo { width: 100%; }
  .hero h1,
  .hero .lede { overflow-wrap: break-word; }
  .feature-row { grid-template-columns: 1fr; gap: 36px; margin-bottom: 80px; }
  .feature-row.reverse > :first-child { order: 2; grid-column: 1; }
  .feature-row.reverse > :last-child  { order: 1; grid-column: 1; }
  .use-cases { grid-template-columns: repeat(2, 1fr); }
  .diff-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .site-footer { padding: 24px 20px 40px; }
  .hero { padding: 0 20px; margin: 24px auto 60px; }
  .hero-icon img { width: 72px; height: 72px; margin-bottom: 20px; }
  .hero h1 { font-size: clamp(34px, 9.5vw, 44px); margin-bottom: 16px; }
  .hero .lede { font-size: 17px; margin-bottom: 24px; }
  .micro { font-size: 12px; }
  .use-cases { grid-template-columns: 1fr; }
  .diff-grid { grid-template-columns: 1fr; }
  .cta { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; }
}

/* ─────────────────── ACCESSIBILITY ─────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─────────────────── WATCH-DEMO LINK + VIDEO LIGHTBOX ─────────────────── */
/* Quiet inline play link beneath the hero CTA — brand play chip + underline on hover,
   transparent background so it reads as a link, not a third button. */
/* The demo link sits below the bundles line rather than inside the CTA row,
   so it carries its own top spacing — it used to be spaced by .cta's gap.
   The negative left margin cancels the button's own 6px 4px padding so the
   play chip optically lines up with the text above it. */
.bundle-note + .watch-link {
  margin-top: 10px;
  margin-left: -4px;
}

.watch-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 0;
  padding: 6px 4px;
  background: transparent;
  border: none;
  color: var(--pink);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: -0.005em;
  cursor: pointer;
  border-radius: 8px;
}
.watch-link:hover { text-decoration: underline; }
.watch-link:focus-visible { outline: 2px solid var(--pink); outline-offset: 4px; }
.watch-link-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--grad-brand);
  color: #fff;
  flex-shrink: 0;
}
.watch-link-play svg { width: 10px; height: 10px; transform: translateX(1px); }

@keyframes lightboxIn { from { opacity: 0; } to { opacity: 1; } }
.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: lightboxIn 180ms ease-out;
}
.video-lightbox[hidden] { display: none; }
.video-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 8, 14, 0.76);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}
.video-lightbox-card {
  position: relative;
  width: 100%;
  max-width: 1100px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  background: #000;
}
.video-lightbox-video { display: block; width: 100%; height: auto; max-height: 80vh; }
.video-lightbox-close {
  position: absolute;
  top: -44px;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease;
}
.video-lightbox-close:hover { background: rgba(255, 255, 255, 0.22); }
.video-lightbox-close svg { width: 14px; height: 14px; }

/* ─────────────────── SCREENSHOT RAIL ───────────────────
   Ported from shared.css's rail (this page doesn't load shared.css).
   Card width matches the 1180px / 32px-gutter column every other section
   uses. Wired by the inline script at the bottom of the page: tap-to-zoom
   plus prev/next arrows. */
.screenshots {
  position: relative;
  margin: 0 0 60px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.screenshot-rail {
  display: flex;
  gap: 32px;
  padding: 50px 50vw 80px 50vw;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.screenshot-rail::-webkit-scrollbar { display: none; }
.screenshot-card {
  flex: 0 0 auto;
  width: min(1116px, calc(100vw - 48px));
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.screenshot-card-inner {
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,0.6);
  box-shadow: 0 30px 60px -20px rgba(70,20,40,0.30),
              0 10px 24px -10px rgba(70,20,40,0.18),
              0 0 0 1px rgba(0,0,0,0.06);
}
.screenshot-card-inner img { display: block; width: 100%; height: auto; }
.screenshot-card-inner.is-zoomable { cursor: zoom-in; position: relative; }
.screenshot-card-inner:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@supports (animation-timeline: view()) {
  .screenshot-card-inner {
    animation: screenshotFocus linear both;
    animation-timeline: view(inline);
    animation-range: cover 10% cover 90%;
  }
  @keyframes screenshotFocus {
    0%, 100% { transform: scale(0.88); filter: blur(3px) brightness(0.6) saturate(0.8); }
    50%      { transform: scale(1);    filter: blur(0) brightness(1) saturate(1); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .screenshot-card-inner { animation: none; }
}
.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.85);
  color: #1d1d1f;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  appearance: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  transition: transform 0.15s, opacity 0.15s;
}
.carousel-nav:active { transform: translateY(-50%) scale(0.94); }
.carousel-nav--prev { left: max(16px, calc(50vw - 604px)); }
.carousel-nav--next { right: max(16px, calc(50vw - 604px)); }
.carousel-nav svg { width: 14px; height: 14px; }
@media (prefers-color-scheme: dark) {
  .screenshot-card-inner {
    background: rgba(255,255,255,0.04);
    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.55),
                0 10px 24px -10px rgba(0,0,0,0.40),
                0 0 0 1px rgba(255,255,255,0.10);
  }
  .carousel-nav {
    background: rgba(40,40,46,0.85);
    color: #f5f5f7;
    border-color: rgba(255,255,255,0.10);
  }
}
@media (hover: none), (max-width: 820px) {
  .screenshots { mask-image: none; -webkit-mask-image: none; }
}
/* Desktop: arrows fade in on hover/focus so the rail reads clean at rest. */
@media (hover: hover) and (min-width: 821px) {
  .carousel-nav { opacity: 0; pointer-events: none; }
  .screenshots:hover .carousel-nav,
  .screenshots:focus-within .carousel-nav { opacity: 1; pointer-events: auto; }
}
.carousel-nav:disabled,
.screenshots:hover .carousel-nav:disabled,
.screenshots:focus-within .carousel-nav:disabled { opacity: 0; pointer-events: none; }

/* ═══════════════════════════════════════════════════════════════
   HOTSHOT ILLUSTRATIONS
   Drawn in CSS like the sibling pages' — small, quiet, and in the
   flame palette. Shared pieces first, then one block per scene.
   ═══════════════════════════════════════════════════════════════ */

/* A mini app window: white card, traffic lights, content lines. */
.hs-win {
  position: absolute;
  background: #ffffff;
  border-radius: 9px;
  box-shadow: 0 8px 18px rgba(60, 20, 40, 0.12), 0 0 0 1px var(--line);
  overflow: hidden;
}
@media (prefers-color-scheme: dark) {
  .hs-win { background: #2c1a24; box-shadow: 0 8px 18px rgba(0,0,0,0.4), 0 0 0 1px var(--line); }
}
.hs-bar {
  height: 14px;
  display: flex; align-items: center; gap: 4px;
  padding: 0 7px;
  background: rgba(26, 15, 21, 0.04);
  border-bottom: 1px solid var(--line);
}
.hs-bar i { width: 5px; height: 5px; border-radius: 50%; background: #ff5f57; }
.hs-bar i:nth-child(2) { background: #febc2e; }
.hs-bar i:nth-child(3) { background: #28c840; }
.hs-line {
  height: 6px; border-radius: 3px;
  background: rgba(26, 15, 21, 0.10);
  margin: 9px 10px 0;
}
.hs-line.short { width: 45%; }
.hs-line.mid   { width: 70%; }
@media (prefers-color-scheme: dark) { .hs-line { background: rgba(255,255,255,0.12); } }

/* The macOS arrow, drawn by SVG wherever a pointer appears. */
.hs-ptr { position: absolute; width: 13px; height: 16px; z-index: 5; }
.hs-ptr svg { width: 100%; height: 100%; display: block;
  filter: drop-shadow(0 1.5px 1.5px rgba(0,0,0,0.30)); }

/* ─── USE CASE 1: bug reports — a ring, an arrow and a note ─── */
.uc-bug .hs-win { inset: 18px 22px 22px 18px; }
.uc-ring {
  position: absolute;
  left: 34px; top: 62px; width: 92px; height: 30px;
  border: 2.5px solid var(--pink);
  border-radius: 50%;
  animation: ucDraw 4s infinite ease-out;
}
.uc-arrow {
  position: absolute;
  left: 128px; top: 92px; width: 46px; height: 2.5px;
  background: var(--pink);
  transform-origin: left center;
  transform: rotate(28deg);
  border-radius: 2px;
}
.uc-arrow::after {
  content: ""; position: absolute; left: -2px; top: -4px;
  border: 5px solid transparent; border-right: 7px solid var(--pink);
  border-left: 0;
}
.uc-note {
  position: absolute;
  right: 12px; bottom: 12px;
  width: 92px; padding: 7px 8px;
  background: #fdecec;
  border-left: 3.5px solid #d93838;
  border-radius: 6px;
  font-size: 10.5px; font-weight: 600; color: #7a1f1f;
  box-shadow: 0 4px 10px rgba(0,0,0,0.10);
}
@keyframes ucDraw {
  0%   { clip-path: inset(0 100% 0 0); }
  30%, 100% { clip-path: inset(0 0 0 0); }
}

/* ─── USE CASE 2: docs & tutorials — numbered steps ─── */
.uc-steps .hs-win { inset: 18px; }
.uc-num {
  position: absolute;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--pink); color: #fff;
  font-size: 11px; font-weight: 700;
  box-shadow: 0 0 0 2.5px #fff, 0 3px 6px rgba(0,0,0,0.18);
}
.uc-num.n1 { left: 30px;  top: 40px; }
.uc-num.n2 { left: 120px; top: 74px; }
.uc-num.n3 { left: 70px;  top: 112px; }
@media (prefers-color-scheme: dark) { .uc-num { box-shadow: 0 0 0 2.5px #2c1a24, 0 3px 6px rgba(0,0,0,0.4); } }
.uc-btn {
  position: absolute; left: 140px; top: 104px;
  padding: 4px 12px; border-radius: 6px;
  background: var(--grad-brand); color: #fff;
  font-size: 10px; font-weight: 700;
}

/* ─── USE CASE 3: listings & slides — the shot on a backdrop ─── */
.uc-frame {
  position: absolute; inset: 0;
  background: var(--grad-flame);
}
.uc-frame-title {
  position: absolute; left: 50%; top: 22px; transform: translateX(-50%);
  width: 46%; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.85);
}
.uc-frame-sub {
  position: absolute; left: 50%; top: 36px; transform: translateX(-50%);
  width: 30%; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.55);
}
.uc-frame .hs-win {
  left: 18%; right: 18%; top: 54px; bottom: -14px;
  box-shadow: 0 16px 30px rgba(80, 10, 40, 0.35);
}

/* ─── USE CASE 4: demo clips — recording + trim strip ─── */
.uc-clip { position: absolute; inset: 18px 18px 52px; }
.uc-clip .hs-win { inset: 0; }
.uc-rec {
  position: absolute; top: 22px; right: 10px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 7px; border-radius: 999px;
  background: rgba(26,15,21,0.78); color: #fff;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em;
}
.uc-rec::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: #ff3b30;
  animation: recBlink 1.2s infinite steps(2, start);
}
@keyframes recBlink { to { visibility: hidden; } }
.uc-strip {
  position: absolute; left: 18px; right: 18px; bottom: 16px; height: 24px;
  border-radius: 6px;
  background: repeating-linear-gradient(90deg, rgba(26,15,21,0.16) 0 26px, rgba(26,15,21,0.08) 26px 28px);
}
.uc-keep {
  position: absolute; top: -2px; bottom: -2px; left: 18%; right: 26%;
  border: 2.5px solid #ffc42e; border-radius: 6px;
  box-shadow: 0 0 0 999px rgba(253, 239, 245, 0.55);
}
@media (prefers-color-scheme: dark) {
  .uc-strip { background: repeating-linear-gradient(90deg, rgba(255,255,255,0.14) 0 26px, rgba(255,255,255,0.06) 26px 28px); }
  .uc-keep { box-shadow: 0 0 0 999px rgba(33, 17, 26, 0.55); }
}

/* ─── ROW 1: the capture panel ─── */
.panel-demo {
  position: relative;
  width: 300px; margin: 0 auto;
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  padding: 14px 12px 12px;
}
.panel-head {
  display: flex; align-items: center; gap: 8px;
  padding: 0 6px 10px;
  font-weight: 700; font-size: 14px;
}
.panel-head-icon { width: 18px; height: 18px; border-radius: 5px; background: var(--grad-flame); }
.panel-keys { margin-left: auto; display: flex; gap: 3px; }
.panel-keys span {
  font-size: 10px; font-weight: 600; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px;
}
.panel-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--ink-2); padding: 6px 6px 4px;
}
.panel-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: 8px;
  font-size: 13px; font-weight: 600;
  animation: panelHover 9s infinite;
}
/* Every icon sits in the same 16px slot, so the labels line up whether
   it's a capture rectangle or a record circle. */
.panel-row i {
  flex: 0 0 16px;
  width: 16px; height: 12px; border-radius: 3px;
  border: 1.6px solid var(--pink);
  box-sizing: border-box;
}
.panel-row.rec i {
  flex-basis: 13px; width: 13px; height: 13px; border-radius: 50%;
  margin: 0 1.5px;
}
.panel-row b { margin-left: auto; font-weight: 500; font-size: 12px; color: var(--ink-2); }
/* One row lit at a time, in order: six rows over a 9s cycle, each lit for
   its sixth. Numbered by class — :nth-of-type would also count the panel's
   header and section labels, which is how two rows once lit together. */
.panel-row.r1 { animation-delay: 0s; }
.panel-row.r2 { animation-delay: 1.5s; }
.panel-row.r3 { animation-delay: 3s; }
.panel-row.r4 { animation-delay: 4.5s; }
.panel-row.r5 { animation-delay: 6s; }
.panel-row.r6 { animation-delay: 7.5s; }
@keyframes panelHover {
  0%, 16.66% { background: rgba(224, 53, 127, 0.14); }
  16.67%, 100% { background: transparent; }
}

/* ─── ROW 2: freeze — a hover menu held still, and its pointer layer ─── */
.freeze-demo {
  position: relative;
  height: 300px;
}
.freeze-demo .hs-win { inset: 10px 30px 20px 10px; }
.freeze-menu {
  position: absolute; left: 60px; top: 46px;
  width: 150px; padding: 5px;
  background: var(--surface);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(40,10,25,0.20), 0 0 0 1px var(--line);
  z-index: 3;
}
.freeze-menu div { font-size: 12px; padding: 5px 8px; border-radius: 5px; color: var(--ink); }
.freeze-menu div.on { background: var(--pink); color: #fff; }
.freeze-tip {
  position: absolute; left: 220px; top: 98px;
  padding: 4px 8px; border-radius: 5px;
  background: rgba(26,15,21,0.86); color: #fff; font-size: 10.5px;
  z-index: 3;
}
.freeze-badge {
  position: absolute; right: 44px; top: 24px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--grad-brand); color: #fff;
  font-size: 11.5px; font-weight: 700;
  box-shadow: 0 8px 20px -6px rgba(224,53,127,0.6);
  z-index: 6;
}
.freeze-demo .hs-ptr { left: 150px; top: 86px; }
.freeze-select {
  position: absolute; left: 144px; top: 81px; width: 25px; height: 25px;
  border: 1.5px dashed var(--pink); border-radius: 3px; z-index: 4;
}
.ptr-palette {
  position: absolute; left: 116px; top: 128px;
  display: flex; gap: 3px; padding: 4px;
  background: var(--surface);
  border-radius: 7px;
  box-shadow: 0 6px 16px rgba(40,10,25,0.20), 0 0 0 1px var(--line);
  z-index: 6;
}
.ptr-palette span {
  width: 20px; height: 20px; border-radius: 5px;
  display: grid; place-items: center;
  font-size: 12px; color: var(--ink);
}
.ptr-palette span.on { box-shadow: inset 0 0 0 2px var(--pink); background: rgba(224,53,127,0.14); }
.ptr-palette svg { width: 10px; height: 12px; }

/* ─── ROW 3: markup — toolbar + an annotated shot ─── */
.markup-demo {
  position: relative;
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.markup-tools {
  display: flex; gap: 4px; padding: 9px 12px;
  border-bottom: 1px solid var(--line);
}
.markup-tools span {
  width: 24px; height: 22px; border-radius: 6px;
  display: grid; place-items: center;
  font-size: 12px; color: var(--ink-2);
}
.markup-tools span.on { background: rgba(224,53,127,0.16); color: var(--pink); }
.markup-canvas {
  position: relative; height: 230px;
  background-color: #f7eef2;
  background-image:
    linear-gradient(rgba(26,15,21,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,15,21,0.05) 1px, transparent 1px);
  background-size: 14px 14px;
}
@media (prefers-color-scheme: dark) {
  .markup-canvas {
    background-color: #1a0e14;
    background-image:
      linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  }
}
.markup-canvas .hs-win { inset: 22px 40px 22px 40px; }
.mk-rect {
  position: absolute; left: 70px; top: 66px; width: 120px; height: 44px;
  border: 3px solid var(--pink); border-radius: 3px;
}
.mk-arrow {
  position: absolute; left: 196px; top: 116px; width: 70px; height: 3px;
  background: var(--pink); transform-origin: left center; transform: rotate(24deg);
  border-radius: 2px;
}
.mk-arrow::after {
  content: ""; position: absolute; left: -3px; top: -5px;
  border: 6.5px solid transparent; border-right: 9px solid var(--pink); border-left: 0;
}
.mk-callout {
  position: absolute; left: 56px; top: 52px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--pink); color: #fff;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
}
.mk-note {
  position: absolute; right: 26px; bottom: 30px;
  width: 128px; padding: 9px 10px;
  background: #fff4d6; border-left: 4px solid #e0a82e; border-radius: 7px;
  font-size: 11.5px; font-weight: 600; color: #7c3f00;
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}
.markup-canvas .hs-ptr { left: 236px; top: 140px; width: 15px; height: 19px; }

/* ─── ROW 4: compose — the shot dressed on a gradient ─── */
.compose-demo {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 14px;
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  padding: 14px;
}
.compose-stage {
  position: relative; height: 240px;
  border-radius: 10px;
  background: linear-gradient(180deg, #f6a1c4 0%, #e0357f 52%, #8e1a4d 100%);
  overflow: hidden;
}
.compose-title {
  position: absolute; left: 50%; top: 22px; transform: translateX(-50%);
  color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 17px;
  white-space: nowrap;
}
.compose-cap {
  position: absolute; left: 50%; top: 46px; transform: translateX(-50%);
  width: 42%; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.6);
}
.compose-stage .hs-win {
  left: 14%; right: 14%; top: 68px; bottom: 24px;
  border-radius: 10px;
  box-shadow: 0 18px 34px rgba(60, 0, 25, 0.45);
}
.compose-side { display: flex; flex-direction: column; gap: 10px; }
.compose-side p {
  font-size: 9px; font-weight: 700; letter-spacing: 0.1em; color: var(--ink-2);
  margin: 0;
}
.compose-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
.compose-chips span { height: 22px; border-radius: 5px; border: 1px solid var(--line); }
.compose-chips span.grad { background: linear-gradient(180deg, #f6a1c4, #e0357f 52%, #8e1a4d); box-shadow: 0 0 0 2px var(--pink); }
.compose-chips span.solid { background: #d1d5db; }
.compose-chips span.img { background: linear-gradient(135deg, #8ec5fc, #e0c3fc); }
.compose-chips span.none {
  background-color: #fff;
  background-image: linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%),
                    linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%);
  background-size: 8px 8px; background-position: 0 0, 4px 4px;
}
.compose-pad { display: flex; gap: 5px; }
.compose-pad span { flex: 1; height: 22px; border-radius: 5px; border: 1px solid var(--line); position: relative; }
.compose-pad span::after { content: ""; position: absolute; inset: 6px; border-radius: 2px; background: rgba(26,15,21,0.18); }
.compose-pad span:nth-child(2) { box-shadow: 0 0 0 2px var(--pink); }
.compose-pad span:nth-child(2)::after { inset: 4px; }
.compose-pad span:nth-child(3)::after { inset: 2px; }
@media (prefers-color-scheme: dark) { .compose-pad span::after { background: rgba(255,255,255,0.2); } }

/* ─── ROW 5: recordings — preview, zoom, cursor trail, filmstrip ─── */
.rec-demo {
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  padding: 14px;
}
.rec-preview {
  position: relative; height: 180px;
  border-radius: 10px;
  background: linear-gradient(180deg, #2b1220, #1a0b13);
  overflow: hidden;
}
.rec-preview .hs-win { inset: 22px 46px 22px 46px; animation: recZoom 6s infinite ease-in-out; transform-origin: 68% 62%; }
@keyframes recZoom {
  0%, 20%   { transform: scale(1); }
  40%, 70%  { transform: scale(1.55); }
  90%, 100% { transform: scale(1); }
}
.rec-cursor { position: absolute; left: 62%; top: 52%; width: 14px; height: 17px; z-index: 5; }
.rec-cursor svg { width: 100%; height: 100%; filter: drop-shadow(0 1.5px 1.5px rgba(0,0,0,0.4)); }
.rec-trail {
  position: absolute; width: 10px; height: 12px; z-index: 4;
  background: rgba(255,255,255,0.18); border-radius: 50%;
}
.rec-trail.t1 { left: 56%; top: 46%; }
.rec-trail.t2 { left: 51%; top: 41%; opacity: 0.6; }
.rec-trail.t3 { left: 46%; top: 37%; opacity: 0.35; }
.rec-bubble {
  position: absolute; right: 12px; bottom: 12px;
  width: 42px; height: 42px; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #f3c9a8 0 26%, transparent 27%),
              radial-gradient(circle at 50% 100%, #e0357f 0 45%, transparent 46%),
              #3a2030;
  box-shadow: 0 0 0 2.5px #fff, 0 6px 14px rgba(0,0,0,0.4);
  z-index: 6;
}
.rec-strip {
  position: relative; height: 30px; margin-top: 12px;
  border-radius: 6px;
  background: repeating-linear-gradient(90deg, rgba(26,15,21,0.14) 0 34px, rgba(26,15,21,0.06) 34px 36px);
}
@media (prefers-color-scheme: dark) {
  .rec-strip { background: repeating-linear-gradient(90deg, rgba(255,255,255,0.12) 0 34px, rgba(255,255,255,0.05) 34px 36px); }
}
.rec-strip .uc-keep { left: 10%; right: 14%; }
.rec-zoomtrack { position: relative; height: 12px; margin-top: 8px; }
.rec-zoomtrack span {
  position: absolute; top: 0; height: 12px; border-radius: 4px;
  background: rgba(224,53,127,0.35); border: 1px solid rgba(224,53,127,0.7);
}
.rec-zoomtrack span:nth-child(1) { left: 22%; width: 26%; }
.rec-zoomtrack span:nth-child(2) { left: 60%; width: 18%; }
.rec-playhead {
  position: absolute; top: -48px; bottom: 0; width: 2px; background: var(--pink);
  left: 10%; animation: recPlay 6s infinite linear;
}
@keyframes recPlay { from { left: 10%; } to { left: 86%; } }

/* ─── DIFF 1: viewports — the same page at three widths ─── */
.vp-vis { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; gap: 12px; padding-bottom: 22px; }
.vp-vis .hs-win { position: relative; }
.vp-vis .hs-win:nth-child(1) { width: 40px;  height: 78px; }
.vp-vis .hs-win:nth-child(2) { width: 72px;  height: 96px; }
.vp-vis .hs-win:nth-child(3) { width: 132px; height: 108px; }

/* ─── DIFF 2: a link, from your own storage ─── */
.link-vis { position: absolute; inset: 0; display: grid; place-items: center; }
.link-cloud {
  position: relative; width: 96px; height: 46px; margin-top: -24px;
  background: var(--surface); border-radius: 30px;
  box-shadow: 0 8px 20px rgba(60,20,40,0.14), 0 0 0 1px var(--line);
}
.link-cloud::before {
  content: ""; position: absolute; left: 22px; top: -20px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface); box-shadow: 0 -1px 0 0 var(--line);
}
.link-pill {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--grad-brand); color: #fff; font-size: 11.5px; font-weight: 700;
  box-shadow: 0 8px 20px -6px rgba(224,53,127,0.6);
  white-space: nowrap;
}

/* ─── DIFF 3: staging — icons sweep away, the bar folds up ─── */
.stage-vis { position: absolute; inset: 18px 26px; border-radius: 9px; overflow: hidden;
  background: linear-gradient(160deg, #ffd9a0, #f3a0bf 55%, #b9608f); }
.stage-bar { position: absolute; left: 0; right: 0; top: 0; height: 10px; background: rgba(255,255,255,0.55);
  animation: stageBar 5s infinite ease-in-out; }
.stage-icon { position: absolute; right: 12px; width: 16px; height: 18px; border-radius: 3px;
  background: rgba(255,255,255,0.85); animation: stageIcon 5s infinite ease-in-out; }
.stage-icon:nth-child(2) { top: 20px; }
.stage-icon:nth-child(3) { top: 46px; }
.stage-icon:nth-child(4) { top: 72px; }
.stage-vis .hs-win { left: 22px; top: 26px; width: 120px; height: 76px; }
@keyframes stageBar  { 0%, 20% { transform: translateY(0); } 40%, 80% { transform: translateY(-100%); } 100% { transform: translateY(0); } }
@keyframes stageIcon { 0%, 20% { opacity: 1; } 40%, 80% { opacity: 0; } 100% { opacity: 1; } }

/* ─── DIFF 4: the pixel loupe ─── */
.loupe-vis { position: absolute; inset: 0; display: grid; place-items: center; }
.loupe-lens {
  position: relative; width: 108px; height: 108px; border-radius: 50%;
  background-color: #f3d2df;
  background-image:
    linear-gradient(rgba(26,15,21,0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,15,21,0.18) 1px, transparent 1px),
    linear-gradient(90deg, #e0357f 0 50%, #ffc42e 50% 100%);
  background-size: 12px 12px, 12px 12px, 100% 100%;
  box-shadow: 0 0 0 4px #fff, 0 10px 24px rgba(60,20,40,0.25);
}
.loupe-lens::before, .loupe-lens::after { content: ""; position: absolute; background: #fff; }
.loupe-lens::before { left: 50%; top: 18%; bottom: 18%; width: 1.5px; margin-left: -0.75px; }
.loupe-lens::after  { top: 50%; left: 18%; right: 18%; height: 1.5px; margin-top: -0.75px; }
.loupe-hex {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  font: 600 11px ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 3px 8px; border-radius: 5px; background: rgba(26,15,21,0.82); color: #fff;
}

/* ─── DIFF 5: come back to it later — a saved document ─── */
.doc-vis { position: absolute; inset: 0; display: grid; place-items: center; }
.doc-page {
  position: relative; width: 74px; height: 94px; border-radius: 6px 18px 6px 6px;
  background: var(--surface); box-shadow: 0 10px 22px rgba(60,20,40,0.16), 0 0 0 1px var(--line);
}
.doc-page::before {
  content: ""; position: absolute; left: 10px; right: 10px; top: 14px; height: 40px;
  border-radius: 4px; background: var(--grad-flame);
}
.doc-page::after {
  content: ".hotshot"; position: absolute; left: 0; right: 0; bottom: 12px; text-align: center;
  font: 600 10px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-2);
}

/* ─── DIFF 6: colors your way ─── */
.color-vis { position: absolute; inset: 22px 30px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.color-hue { height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.color-swatches { display: flex; gap: 4px; }
.color-swatches span { flex: 1; height: 18px; border-radius: 4px; }
.color-swatches span:nth-child(1) { background: #ff1744; }
.color-swatches span:nth-child(2) { background: #ff6f00; }
.color-swatches span:nth-child(3) { background: #ffc400; }
.color-swatches span:nth-child(4) { background: #00e676; }
.color-swatches span:nth-child(5) { background: #2979ff; }
.color-swatches span:nth-child(6) { background: linear-gradient(180deg, #c7b8ff, #651fff 52%, #2f0c8a); box-shadow: 0 0 0 2px var(--pink); }
.color-accent { display: flex; gap: 8px; justify-content: center; }
.color-accent span {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; color: var(--ink);
  padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
}
.color-accent span::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #e0357f; }
.color-accent span:nth-child(2)::before { background: #007aff; }

@media (max-width: 600px) {
  .compose-demo { grid-template-columns: 1fr; }
  .compose-side { display: none; }
  .freeze-tip { display: none; }
}

/* Placement fixes found in review. */
.ptr-palette { left: 150px; top: 168px; }
.markup-tools svg { width: 10px; height: 12px; display: block; }
.loupe-lens { margin-top: -22px; }
.loupe-hex { bottom: 12px; }
/* Hero video: rounded and shadowed like ChopShop's, bleeding off the
   right edge like the sibling heroes. */
.hero-demo {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 60px -12px rgba(80, 20, 45, 0.34);
}
@media (prefers-color-scheme: dark) {
  .hero-demo { box-shadow: 0 24px 60px -8px rgba(0, 0, 0, 0.55); }
}
.hero-demo video { display: block; width: 100%; height: auto; }
/* The kept range dims what's outside it with a huge spread shadow —
   which must be clipped to its strip, or it washes over the page. */
.uc-strip, .rec-strip { overflow: hidden; }
.uc-strip .uc-keep, .rec-strip .uc-keep { top: 0; bottom: 0; }

/* Phones: a grid item's minimum width is its content's, so one wide demo
   stretched the whole single column past the screen and clipped the text
   beside it. Let items shrink and the wide demos wrap or clip. */
.feature-row > *, .use-case, .diff-card { min-width: 0; }
.markup-tools { flex-wrap: wrap; }
.markup-demo, .compose-demo, .rec-demo, .freeze-demo { max-width: 100%; overflow: hidden; }
@media (max-width: 600px) {
  .feature-rows, .made-for, .diff-grid { padding: 0 20px; }
  .panel-demo { width: 100%; }
  .freeze-badge { right: 36px; }
}
/* The loupe's hint pill, as HotShot draws it: one line, on a capsule. */
.loupe-hex {
  font: 500 10.5px -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
}

/* ─── ROW 5: web pages — one page, shot at several widths ─── */
.web-demo {
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-width: 100%;
}
.web-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.web-dots { display: flex; gap: 5px; }
.web-dots i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.web-dots i:nth-child(2) { background: #febc2e; }
.web-dots i:nth-child(3) { background: #28c840; }
.web-url {
  flex: 1; min-width: 0;
  padding: 4px 12px; border-radius: 7px;
  background: rgba(26, 15, 21, 0.06);
  font-size: 12px; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (prefers-color-scheme: dark) { .web-url { background: rgba(255,255,255,0.07); } }
.web-widths { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px 0; }
.web-widths span {
  font-size: 11.5px; font-weight: 600; color: var(--ink-2);
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line);
}
.web-widths span.on { color: var(--pink); border-color: var(--pink); background: rgba(224,53,127,0.10); }
.web-shots {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 14px 18px;
  background-color: #f7eef2;
  margin-top: 12px;
}
@media (prefers-color-scheme: dark) { .web-shots { background-color: #1a0e14; } }
.web-shot {
  flex: none;
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 6px 14px rgba(60,20,40,0.12), 0 0 0 1px var(--line);
  padding: 0 0 8px;
  overflow: hidden;
  animation: webShot 6s infinite ease-out both;
}
@media (prefers-color-scheme: dark) { .web-shot { background: #2c1a24; } }
.web-shot b { display: block; height: 26px; background: var(--grad-flame); margin-bottom: 4px; }
.web-shot i { display: block; height: 5px; border-radius: 3px; margin: 6px 8px 0; background: rgba(26,15,21,0.12); }
.web-shot i.short { width: 50%; }
@media (prefers-color-scheme: dark) { .web-shot i { background: rgba(255,255,255,0.12); } }
.w-phone  { width: 18%; animation-delay: 0s; }
.w-tablet { width: 28%; animation-delay: 0.35s; }
.w-desk   { width: 46%; animation-delay: 0.7s; }
.w-phone b { height: 34px; }
@keyframes webShot {
  0%   { opacity: 0; transform: translateY(8px); }
  12%, 88% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}

/* ─── DIFF: catch the hover — a menu held open, tooltip and all ─── */
.frz-vis { position: absolute; inset: 0; }
.frz-menu {
  position: absolute; left: 50%; top: 34px; transform: translateX(-60%);
  width: 108px; padding: 6px;
  background: var(--surface); border-radius: 8px;
  box-shadow: 0 10px 22px rgba(40,10,25,0.18), 0 0 0 1px var(--line);
  display: flex; flex-direction: column; gap: 5px;
}
.frz-menu span { height: 14px; border-radius: 4px; background: rgba(26,15,21,0.08); }
.frz-menu span.on { background: var(--pink); }
@media (prefers-color-scheme: dark) { .frz-menu span { background: rgba(255,255,255,0.10); } }
.frz-tip {
  position: absolute; left: calc(50% + 34px); top: 66px;
  width: 54px; height: 16px; border-radius: 4px; background: rgba(26,15,21,0.82);
}
.frz-badge {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  padding: 5px 12px; border-radius: 999px;
  background: var(--grad-brand); color: #fff; font-size: 11.5px; font-weight: 700;
  box-shadow: 0 8px 20px -6px rgba(224,53,127,0.6);
  white-space: nowrap;
}
.frz-menu { top: 22px; }
.frz-tip { top: 54px; }

/* ═══ Differentiator illustrations, second pass ═══
   Each card shows the actual thing: a held-open hover, the link HotShot
   copies, a desktop clearing, real magnified pixels, a reopened file, the
   picker itself. */

/* Catch the hover — a toolbar button mid-hover, its tooltip, the pointer. */
.frz2 { position: absolute; inset: 0; }
.frz2-win { position: absolute; left: 50%; top: 22px; width: 220px; height: 112px; margin-left: -110px; }
.frz2-win { background: #fff; border-radius: 9px; overflow: hidden;
  box-shadow: 0 10px 22px rgba(60,20,40,0.16), 0 0 0 1px var(--line); }
@media (prefers-color-scheme: dark) { .frz2-win { background: #2c1a24; box-shadow: 0 10px 22px rgba(0,0,0,0.45), 0 0 0 1px var(--line); } }
.frz2-tools { display: flex; gap: 6px; padding: 8px 10px 2px; }
.frz2-tools span { width: 22px; height: 18px; border-radius: 5px; background: rgba(26,15,21,0.07); }
.frz2-tools span.hover { background: rgba(224,53,127,0.16); box-shadow: inset 0 0 0 1.5px var(--pink); }
@media (prefers-color-scheme: dark) { .frz2-tools span { background: rgba(255,255,255,0.08); } }
.frz2-tip {
  position: absolute; left: calc(50% - 30px); top: 66px; z-index: 4;
  padding: 4px 9px; border-radius: 6px;
  background: #1a0f15; color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}
@media (prefers-color-scheme: dark) { .frz2-tip { background: #fbeef4; color: #1a0f15; } }
.frz2-ptr { left: calc(50% - 42px); top: 50px; }
.frz2-badge {
  position: absolute; right: calc(50% - 128px); top: 12px; z-index: 6;
  padding: 4px 10px; border-radius: 999px;
  background: var(--grad-brand); color: #fff; font-size: 10.5px; font-weight: 700;
  box-shadow: 0 6px 16px -4px rgba(224,53,127,0.6);
}
.frz2::after {   /* a faint frost on the whole frame: this moment, held */
  content: ""; position: absolute; left: 50%; top: 22px; width: 220px; height: 112px; margin-left: -110px;
  border-radius: 9px; pointer-events: none;
  background: linear-gradient(135deg, rgba(160,210,255,0.16), transparent 45%, rgba(160,210,255,0.10));
  box-shadow: inset 0 0 0 1.5px rgba(160,210,255,0.45);
}

/* A link — the shot rises into a cloud; the link lands on the clipboard. */
.lnk2 { position: absolute; inset: 0; }
.lnk2-cloud { position: absolute; left: 50%; top: 14px; width: 132px; height: 77px; margin-left: -66px; }
.lnk2-file {
  position: absolute; left: 50%; top: 40px; width: 38px; height: 30px; margin-left: -19px;
  background: var(--surface); border-radius: 4px; padding: 3px;
  box-shadow: 0 4px 10px rgba(60,20,40,0.2), 0 0 0 1px var(--line);
  animation: lnkRise 4s infinite ease-in-out;
}
.lnk2-file b { display: block; height: 15px; border-radius: 2px; background: var(--grad-flame); }
.lnk2-file i { display: block; height: 3px; width: 70%; margin-top: 3px; border-radius: 2px; background: rgba(26,15,21,0.18); }
@keyframes lnkRise {
  0%   { transform: translateY(26px); opacity: 0; }
  25%  { transform: translateY(0); opacity: 1; }
  70%  { transform: translateY(-4px); opacity: 1; }
  100% { transform: translateY(-4px); opacity: 0; }
}
.lnk2-pill {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 7px; border-radius: 999px;
  background: var(--surface); color: var(--ink);
  font: 500 11.5px ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap;
  box-shadow: 0 8px 20px -6px rgba(60,20,40,0.35), 0 0 0 1px var(--line);
}
.lnk2-pill em {
  font-style: normal; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; background: var(--grad-brand); color: #fff; font: 700 10px var(--font-text);
}

/* A clean desktop — the bar, the icons and the Dock step out together. */
.stage-bar { display: flex; gap: 6px; align-items: center; padding: 0 8px; height: 12px; }
.stage-bar i { width: 14px; height: 4px; border-radius: 2px; background: rgba(26,15,21,0.35); }
.stage-bar i.r { width: 6px; margin-left: 0; }
.stage-bar i.r:first-of-type { margin-left: auto; }
.stage-bar i:nth-child(4) { margin-left: auto; }
.stage-vis .hs-win { left: 50%; top: 32px; width: 140px; height: 72px; margin-left: -80px; }
.stage-dock {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  display: flex; gap: 4px; padding: 4px 6px; border-radius: 7px;
  background: rgba(255,255,255,0.55);
  animation: stageDock 5s infinite ease-in-out;
}
.stage-dock i { width: 11px; height: 11px; border-radius: 3px; background: rgba(255,255,255,0.95); }
@keyframes stageDock { 0%, 20% { transform: translate(-50%, 0); } 40%, 80% { transform: translate(-50%, 140%); } 100% { transform: translate(-50%, 0); } }

/* A pixel loupe — real magnified pixels: a button's anti-aliased corner. */
.lp2 { position: absolute; inset: 0; }
.lp2-src {
  position: absolute; left: calc(50% - 128px); top: 40px; width: 96px; height: 70px;
  background: #fff; border-radius: 8px;
  box-shadow: 0 8px 18px rgba(60,20,40,0.14), 0 0 0 1px var(--line);
}
@media (prefers-color-scheme: dark) { .lp2-src { background: #2c1a24; } }
.lp2-btn {
  position: absolute; left: 18px; top: 22px;
  padding: 5px 14px; border-radius: 7px; background: #e0357f; color: #fff; font-size: 10.5px; font-weight: 700;
}
.lp2-ring { position: absolute; left: 13px; top: 17px; width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--ink); box-shadow: 0 0 0 1.5px var(--surface); }
.lp2-link {
  position: absolute; left: calc(50% - 98px); top: 56px; width: 64px; height: 1.5px;
  background: repeating-linear-gradient(90deg, var(--ink-2) 0 4px, transparent 4px 7px);
  transform-origin: left center; transform: rotate(-12deg);
}
.lp2-lens {
  position: absolute; left: calc(50% - 6px); top: 14px; width: 120px; height: 120px; border-radius: 50%;
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(0,0,0,0.3), 0 12px 26px rgba(60,20,40,0.32);
  overflow: hidden;
}
.lp-svg { display: block; width: 100%; height: 100%; shape-rendering: crispEdges; }

/* Come back to it later — the saved file and what it keeps. */
.doc2 { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 18px; }
.doc2-page {
  position: relative; width: 92px; height: 116px; border-radius: 6px 20px 6px 6px;
  background: var(--surface);
  box-shadow: 0 12px 24px rgba(60,20,40,0.18), 0 0 0 1px var(--line);
}
.doc2-page::before {   /* the folded corner */
  content: ""; position: absolute; right: 0; top: 0; width: 20px; height: 20px;
  border-radius: 0 20px 0 6px; background: linear-gradient(225deg, transparent 50%, rgba(26,15,21,0.10) 50%);
}
.doc2-shot { position: absolute; left: 9px; right: 9px; top: 24px; height: 52px; border-radius: 4px; background: var(--grad-flame); overflow: hidden; }
.doc2-rect { position: absolute; left: 8px; top: 9px; width: 30px; height: 14px; border: 2px solid #fff; border-radius: 2px; }
.doc2-arrow { position: absolute; left: 40px; top: 24px; width: 22px; height: 2px; background: #fff; transform: rotate(28deg); transform-origin: left; }
.doc2-note { position: absolute; right: 6px; bottom: 6px; width: 26px; height: 12px; border-radius: 2px; background: #fff4d6; border-left: 3px solid #e0a82e; }
.doc2-name {
  position: absolute; left: 0; right: 0; bottom: 10px; text-align: center;
  font: 600 9.5px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-2);
}
.doc2-kept { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.doc2-kept li {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 600; color: var(--ink);
}
.doc2-kept li::before {
  content: "✓"; width: 16px; height: 16px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 9.5px; color: #fff; background: var(--grad-brand);
}

/* Colors your way — the picker itself, with its Gradient switch on. */
.col2 { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 14px; }
.col2-pop {
  width: 150px; padding: 8px; border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 12px 26px rgba(60,20,40,0.2), 0 0 0 1px var(--line);
  display: flex; flex-direction: column; gap: 6px;
}
.col2-pad {
  position: relative; height: 54px; border-radius: 5px;
  background: linear-gradient(to top, #000, rgba(0,0,0,0)), linear-gradient(to right, #fff, hsl(334, 100%, 50%));
}
.col2-pad span { position: absolute; left: 76%; top: 14%; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 0.5px rgba(0,0,0,0.6); margin: -5px; }
.col2-hue { position: relative; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.col2-hue span { position: absolute; left: 92%; top: -2px; width: 4px; height: 12px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 0.5px rgba(0,0,0,0.6); }
.col2-sw { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.col2-sw i { height: 11px; border-radius: 2px; }
.col2-sw i:nth-child(1) { background: #ff1744; } .col2-sw i:nth-child(2) { background: #ff6f00; }
.col2-sw i:nth-child(3) { background: #ffc400; } .col2-sw i:nth-child(4) { background: #00e676; }
.col2-sw i:nth-child(5) { background: #00e5ff; } .col2-sw i:nth-child(6) { background: #2979ff; }
.col2-sw i:nth-child(7) { background: #f50057; }
.col2-row { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.col2-hex { font: 600 9.5px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-2);
  padding: 2px 5px; border-radius: 4px; background: rgba(26,15,21,0.06); }
@media (prefers-color-scheme: dark) { .col2-hex { background: rgba(255,255,255,0.07); } }
.col2-tog { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 600; color: var(--ink); }
.col2-tog b { position: relative; width: 20px; height: 12px; border-radius: 6px; background: var(--pink); }
.col2-tog b::after { content: ""; position: absolute; right: 1.5px; top: 1.5px; width: 9px; height: 9px; border-radius: 50%; background: #fff; }
.col2-accent { display: flex; flex-direction: column; gap: 6px; }
.col2-accent span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--ink);
  padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
}
.col2-accent span::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #e0357f; }
.col2-accent span:nth-child(2)::before { background: #007aff; }

/* Come back to it later — a real document icon: dog-eared page, the
   marked-up shot inside, the app badge, the name under it like Finder. */
.doc2-file { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.doc2-icon { width: 80px; height: 100px; display: block; overflow: visible; }
.doc2-paper { fill: #ffffff; stroke: rgba(26,15,21,0.10); stroke-width: 0.8; }
.doc2-fold  { fill: #ece3e7; stroke: rgba(26,15,21,0.10); stroke-width: 0.8; stroke-linejoin: round; }
.doc2-win   { fill: #ffffff; }
.doc2-winbar { fill: #f3eef1; }
.doc2-text  { fill: rgba(26,15,21,0.16); }
@media (prefers-color-scheme: dark) {
  .doc2-paper { fill: #2c1a24; stroke: rgba(255,255,255,0.12); }
  .doc2-fold  { fill: #3e2733; stroke: rgba(255,255,255,0.12); }
  .doc2-win   { fill: #2c1a24; }
  .doc2-winbar { fill: #36222d; }
  .doc2-text  { fill: rgba(255,255,255,0.16); }
}
.doc2-file .doc2-name {
  position: static;
  font: 600 11px -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: var(--ink); white-space: nowrap;
  padding: 1px 7px; border-radius: 4px;
  background: rgba(224, 53, 127, 0.14);
}

/* The picker on its own, a touch larger now it fills the card. */
.col2-pop { width: 184px; }
.col2-pad { height: 62px; }

/* Mark it up, second pass — a real page under real markup, and a
   toolbar of matched line icons rather than mixed text glyphs. */
.markup-tools { align-items: center; gap: 2px; padding: 8px 12px; }
.markup-tools span { width: 28px; height: 26px; color: var(--ink-2); }
.markup-tools svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round; display: block; }
.markup-tools span.on { color: var(--pink); }
.markup-tools .mk-txt { font: 500 14px -apple-system, BlinkMacSystemFont, system-ui, sans-serif; }
.markup-tools .mk-sep { width: 1px; height: 18px; margin: 0 8px; background: var(--line); border-radius: 0; }
.markup-tools .mk-swatch { width: 22px; height: 22px; border-radius: 6px; background: #e0357f;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12); }
.markup-canvas { height: auto; }
.mk-svg { display: block; width: 100%; height: auto; }
.mk-page { fill: #ffffff; }
.mk-chrome { fill: #f4f0f2; }
.mk-url { fill: #e8e2e5; }
.mk-faint { fill: #e6e0e3; }
.mk-card rect { fill: #faf7f8; stroke: #ebe4e8; stroke-width: 1; }
.mk-btn { fill: #1a0f15; }
.mk-btn2 { fill: #ece6e9; }
.mk-logo { font: 700 10px -apple-system, BlinkMacSystemFont, system-ui, sans-serif; fill: #1a0f15; }
.mk-h { font: 700 14px Georgia, 'Times New Roman', serif; fill: #1a0f15; }
.mk-plan { font: 600 9px -apple-system, BlinkMacSystemFont, system-ui, sans-serif; fill: #6a5661; }
.mk-price { font: 700 18px -apple-system, BlinkMacSystemFont, system-ui, sans-serif; fill: #1a0f15; }
.mk-btntext { font: 600 7.5px -apple-system, BlinkMacSystemFont, system-ui, sans-serif; fill: #fff; }
.mk-num { font: 700 11px -apple-system, BlinkMacSystemFont, system-ui, sans-serif; fill: #fff; }
.mk-notetext { font: 600 10px -apple-system, BlinkMacSystemFont, system-ui, sans-serif; fill: #7c3f00; }
@media (prefers-color-scheme: dark) {
  .mk-page { fill: #2c1a24; }
  .mk-chrome { fill: #36222d; }
  .mk-url { fill: #45303b; }
  .mk-faint { fill: #4a3540; }
  .mk-card rect { fill: #33202a; stroke: #45303b; }
  .mk-btn { fill: #fbeef4; }
  .mk-btn2 { fill: #45303b; }
  .mk-btntext { fill: #1a0f15; }
  .mk-logo, .mk-h, .mk-price { fill: #fbeef4; }
  .mk-plan { fill: #b89aa8; }
}

/* Each use case on its own soft stage — rose, lilac, amber, mint — so the
   four read as a set and Listings' gradient isn't the odd one out. */
.use-vis.uc-bug   { background: linear-gradient(135deg, #ffe8ea 0%, #ffd6dc 100%); }
.use-vis.uc-steps { background: linear-gradient(135deg, #efeaff 0%, #ded5ff 100%); }
.use-vis.uc-list  { background: linear-gradient(135deg, #fff3dc 0%, #ffe3b8 100%); }
.use-vis.uc-clips { background: linear-gradient(135deg, #e3f6f1 0%, #cbece5 100%); }
@media (prefers-color-scheme: dark) {
  .use-vis.uc-bug   { background: linear-gradient(135deg, #3a1a22 0%, #2c131a 100%); }
  .use-vis.uc-steps { background: linear-gradient(135deg, #251e3d 0%, #1c1730 100%); }
  .use-vis.uc-list  { background: linear-gradient(135deg, #3a2a16 0%, #2c2010 100%); }
  .use-vis.uc-clips { background: linear-gradient(135deg, #133430 0%, #0f2724 100%); }
}
/* The listing's backdrop becomes an object on its stage, not the whole cell. */
.uc-list .uc-frame {
  inset: 16px 22px 18px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(120, 60, 10, 0.22);
}
.uc-list .uc-frame-title { top: 16px; }
.uc-list .uc-frame-sub   { top: 30px; }
.uc-list .uc-frame .hs-win { top: 44px; bottom: -10px; left: 16%; right: 16%; }
/* Accents that follow each stage's hue. */
.uc-steps .uc-btn { background: linear-gradient(135deg, #7c5cff, #a78bfa); }
.uc-clips .uc-keep { border-color: #14b8a6; }

/* Bug reports — a checkout whose Pay label spills out of its button,
   circled, arrowed and noted in HotShot's Critical note style. */
.uc-bug-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bug-page { fill: #ffffff; }
.bug-chrome { fill: #f4f0f2; }
.bug-field { fill: #ffffff; stroke: #e2dade; stroke-width: 1; }
.bug-sum { fill: #faf7f8; stroke: #ebe4e8; stroke-width: 1; }
.bug-faint { fill: #e6e0e3; }
.bug-line { fill: #e6e0e3; }
.bug-btn { fill: none; stroke: #1a0f15; stroke-width: 1.2; }
.bug-h { font: 700 10.5px -apple-system, BlinkMacSystemFont, system-ui, sans-serif; fill: #1a0f15; }
.bug-label { font: 600 6.5px -apple-system, BlinkMacSystemFont, system-ui, sans-serif; fill: #6a5661; }
.bug-value { font: 500 7px -apple-system, BlinkMacSystemFont, system-ui, sans-serif; fill: #1a0f15; }
.bug-btntext { font: 600 7.5px -apple-system, BlinkMacSystemFont, system-ui, sans-serif; fill: #1a0f15; }
.bug-total { font: 700 10px -apple-system, BlinkMacSystemFont, system-ui, sans-serif; fill: #1a0f15; }
.bug-notetext { font: 600 8.5px -apple-system, BlinkMacSystemFont, system-ui, sans-serif; fill: #7a1f1f; }
@media (prefers-color-scheme: dark) {
  .bug-page { fill: #2c1a24; }
  .bug-chrome { fill: #36222d; }
  .bug-field { fill: #2c1a24; stroke: #4a3540; }
  .bug-sum { fill: #33202a; stroke: #45303b; }
  .bug-faint, .bug-line { fill: #4a3540; }
  .bug-btn { stroke: #fbeef4; }
  .bug-h, .bug-value, .bug-btntext, .bug-total { fill: #fbeef4; }
  .bug-label { fill: #b89aa8; }
}

/* Web pages, taller: one pricing page reflowed at each width, shot full
   length — so the narrow phone shot runs longest, as it really does. */
.web-shots { padding: 20px 16px 22px; gap: 16px; align-items: flex-start; min-height: 330px; }
.web-shot { padding: 0 0 10px; }
.web-shot b { height: 30px; margin-bottom: 8px; }
.w-phone b { height: 30px; }
.ws-title { display: block; height: 7px; width: 60%; margin: 4px auto 0; border-radius: 4px; background: rgba(26,15,21,0.30); }
.ws-sub   { display: block; height: 4px; width: 42%; margin: 5px auto 8px; border-radius: 2px; background: rgba(26,15,21,0.12); }
.ws-plans { display: grid; gap: 6px; padding: 0 7px; }
.ws-plans.c1 { grid-template-columns: 1fr; }
.ws-plans.c2 { grid-template-columns: 1fr 1fr; }
.ws-plans.c3 { grid-template-columns: 1fr 1fr 1fr; }
.ws-plan {
  display: flex; flex-direction: column; gap: 4px;
  padding: 7px 6px 7px; border-radius: 5px;
  background: rgba(26,15,21,0.035); border: 1px solid rgba(26,15,21,0.07);
}
.ws-plan em { display: block; height: 3px; width: 40%; border-radius: 2px; background: rgba(26,15,21,0.22); }
.ws-plan strong { display: block; height: 8px; width: 46%; border-radius: 2px; background: rgba(26,15,21,0.55); }
.ws-plan i { display: block; height: 3px; margin: 0; border-radius: 2px; background: rgba(26,15,21,0.12); }
.ws-plan i.short { width: 70%; }
.ws-plan u { display: block; height: 8px; margin-top: 3px; border-radius: 3px; background: rgba(26,15,21,0.14); text-decoration: none; }
.ws-plans .ws-plan:nth-child(2) { border-color: rgba(224,53,127,0.45); background: rgba(224,53,127,0.06); }
.ws-plans .ws-plan:nth-child(2) u { background: var(--grad-brand); }
.ws-foot { display: block; height: 18px; margin: 10px 7px 0; border-radius: 4px; background: rgba(26,15,21,0.05); }
@media (prefers-color-scheme: dark) {
  .ws-title { background: rgba(255,255,255,0.32); }
  .ws-sub, .ws-plan i { background: rgba(255,255,255,0.12); }
  .ws-plan { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
  .ws-plan em { background: rgba(255,255,255,0.22); }
  .ws-plan strong { background: rgba(255,255,255,0.6); }
  .ws-plan u { background: rgba(255,255,255,0.14); }
  .ws-foot { background: rgba(255,255,255,0.05); }
}
.w-phone  { width: 20%; }
.w-tablet { width: 30%; }
.w-desk   { width: 44%; }

/* ─── Recordings, second pass — a dressed recording of a real app ───
   16:9, so it stands taller: a dashboard window on a gradient backdrop,
   the synthetic cursor gliding to Export with its comet trail, the click
   ripple, and the camera zooming in on it, over an editor timeline. */
.rec-stage { position: relative; border-radius: 10px; }
.rv-svg { display: block; width: 100%; height: auto; border-radius: 10px; }
.rv-win { fill: #ffffff; }
.rv-side { fill: #f6f2f4; }
.rv-sideitem { fill: #e9e3e6; }
.rv-sideitem.on { fill: #e0357f; opacity: 0.18; }
.rv-h { font: 700 15px -apple-system, BlinkMacSystemFont, system-ui, sans-serif; fill: #1a0f15; }
.rv-btn { fill: #1a0f15; }
.rv-btntext { font: 600 8px -apple-system, BlinkMacSystemFont, system-ui, sans-serif; fill: #fff; }
.rv-tile { fill: #faf7f8; stroke: #ece5e9; stroke-width: 1; }
.rv-k { font: 600 7px -apple-system, BlinkMacSystemFont, system-ui, sans-serif; fill: #8a7680; }
.rv-v { font: 700 12px -apple-system, BlinkMacSystemFont, system-ui, sans-serif; fill: #1a0f15; }
.rv-bar { fill: #e7dfe3; }
.rv-bar.hi { fill: #e0357f; }
.rv-axis { fill: #e2dade; }
.rv-timetext { font: 700 9px -apple-system, BlinkMacSystemFont, system-ui, sans-serif; fill: #fff; }
.rv-trail { fill: rgba(255,255,255,0.55); }
.rv-trail.t2 { opacity: 0.6; } .rv-trail.t3 { opacity: 0.32; }
.rv-cursor path { filter: drop-shadow(0 1.5px 1.5px rgba(0,0,0,0.35)); }

/* One 7s take: glide in → click Export → zoom in → hold → ease back out. */
.rv-zoom   { transform-box: view-box; transform-origin: 391px 58px; animation: rvZoom 7s infinite ease-in-out; }
.rv-cursor { animation: rvCursor 7s infinite ease-in-out; }
.rv-trail  { animation: rvTrail 7s infinite ease-in-out; }
.rv-ripple { fill: none; stroke: #fff; stroke-width: 2.5; transform-box: fill-box; transform-origin: center;
  opacity: 0; animation: rvRipple 7s infinite ease-out; }
@keyframes rvCursor {
  0%        { transform: translate(250px, 200px); }
  32%, 100% { transform: translate(391px, 58px); }
}
@keyframes rvTrail {
  0%, 2%    { opacity: 0; }
  8%, 26%   { opacity: 1; }
  32%, 100% { opacity: 0; }
}
@keyframes rvRipple {
  0%, 34%   { opacity: 0; transform: scale(0.4); }
  37%       { opacity: 1; transform: scale(0.8); }
  48%, 100% { opacity: 0; transform: scale(2.2); }
}
@keyframes rvZoom {
  0%, 36%   { transform: scale(1); }
  50%, 80%  { transform: scale(1.8); }
  94%, 100% { transform: scale(1); }
}
/* the cursor rides the zoom: while zoomed, it stays on the button */
.rec-stage .rec-bubble {
  position: absolute; right: 12px; bottom: 12px; width: 52px; height: 52px;
  border-radius: 50%; z-index: 3;
}
@media (prefers-color-scheme: dark) {
  .rv-win { fill: #2c1a24; }
  .rv-side { fill: #33202a; }
  .rv-sideitem { fill: #45303b; }
  .rv-h, .rv-v { fill: #fbeef4; }
  .rv-btn { fill: #fbeef4; }
  .rv-btntext { fill: #1a0f15; }
  .rv-tile { fill: #33202a; stroke: #45303b; }
  .rv-bar { fill: #4a3540; }
  .rv-axis { fill: #4a3540; }
}

/* The editor timeline: thumbnails, trim, a cut, zoom spans, playhead. */
.rec-tl { margin-top: 12px; }
.rec-film {
  position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px;
  height: 34px; padding: 0; border-radius: 6px; overflow: hidden;
}
.rf {
  position: relative; border-radius: 2px;
  background: linear-gradient(135deg, #7c3aed, #c026d3 55%, #e0357f);
}
.rf::after {
  content: ""; position: absolute; left: 16%; right: 16%; top: 22%; bottom: 14%;
  border-radius: 2px; background: rgba(255,255,255,0.88);
}
.rf.cut { background: repeating-linear-gradient(135deg, rgba(26,15,21,0.10) 0 4px, transparent 4px 8px); }
.rf.cut::after { content: "✂"; background: none; color: var(--ink-2); font-size: 12px;
  display: grid; place-items: center; inset: 0; }
@media (prefers-color-scheme: dark) { .rf::after { background: rgba(44,26,36,0.9); } }
.rec-trim {
  position: absolute; top: 0; bottom: 0; left: 8.33%; right: 8.33%;
  border: 3px solid #ffc42e; border-radius: 6px;
  box-shadow: 0 0 0 999px rgba(253, 239, 245, 0.62);
}
@media (prefers-color-scheme: dark) { .rec-trim { box-shadow: 0 0 0 999px rgba(33, 17, 26, 0.62); } }
.rec-trim i { position: absolute; top: 50%; width: 3px; height: 12px; margin-top: -6px; border-radius: 2px; background: rgba(120, 80, 0, 0.55); }
.rec-trim i:first-child { left: 2px; } .rec-trim i:last-child { right: 2px; }
.rec-film .rec-playhead {
  position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--pink); border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.6);
  animation: recPlay 7s infinite linear; z-index: 2;
}
@keyframes recPlay { from { left: 9%; } to { left: 90%; } }
.rec-zooms { position: relative; height: 18px; margin-top: 8px; }
.rec-zooms span {
  position: absolute; top: 0; height: 18px; border-radius: 5px;
  display: grid; place-items: center;
  font-size: 9.5px; font-weight: 700; color: var(--pink-deep);
  background: rgba(224,53,127,0.16); border: 1px solid rgba(224,53,127,0.55);
}
.rec-zooms .z1 { left: 30%; width: 26%; }
.rec-zooms .z2 { left: 66%; width: 18%; }
@media (prefers-color-scheme: dark) { .rec-zooms span { color: var(--pink-light); } }
/* The trail fades by fill-opacity, so each dot's own strength (opacity)
   and the fade don't fight over one property. */
.rv-trail { animation-name: rvTrailFill; }
@keyframes rvTrailFill {
  0%, 2%    { fill-opacity: 0; }
  8%, 26%   { fill-opacity: 1; }
  32%, 100% { fill-opacity: 0; }
}
.rv-trail { fill: rgba(26,15,21,0.30); }
@media (prefers-color-scheme: dark) { .rv-trail { fill: rgba(255,255,255,0.45); } }

/* Mark it up and Make it presentable share 518 × 338 at full width —
   halfway between Mark it up's original 299 and Recordings' 377. (518 × 377 at full
   width), the stage stretching to fill rather than sitting at a fixed 240. */
.compose-demo { aspect-ratio: 518 / 338; align-items: stretch; }
.compose-stage { height: auto; min-height: 0; }
@media (max-width: 600px) { .compose-demo { aspect-ratio: auto; } .compose-stage { height: 240px; } }
/* …and Mark it up holds the same ratio at every width: the toolbar is a
   fixed height, so the canvas takes what's left and the page fits in it. */
.markup-demo { aspect-ratio: 518 / 338; display: flex; flex-direction: column; }
.markup-demo .markup-canvas { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.markup-demo .mk-svg { width: 100%; height: 100%; }
@media (max-width: 600px) { .markup-demo { aspect-ratio: auto; } .markup-demo .mk-svg { height: auto; } }
/* Recordings holds the same 518 : 377 too: the timeline keeps its height
   and the picture fills what's left, cropping a sliver of backdrop rather
   than letting the three demos drift apart at narrower widths. */
.rec-demo { aspect-ratio: 518 / 377; display: flex; flex-direction: column; }
.rec-demo .rec-stage { flex: 1; min-height: 0; overflow: hidden; }
.rec-demo .rv-svg { width: 100%; height: 100%; }
@media (max-width: 600px) { .rec-demo { aspect-ratio: auto; } .rec-demo .rv-svg { height: auto; } }

/* ─── Make it presentable, second pass ───
   A real app on the stage — a colourful roadmap — with a real title and
   caption, and the Compose sidebar's actual controls: Backdrop, Ratio,
   Padding, Corner, Effect and Title. */
.compose-demo { grid-template-columns: 1fr 148px; }
.compose-stage .compose-title { top: 18px; font-size: 16px; }
.compose-caption {
  position: absolute; left: 50%; top: 42px; transform: translateX(-50%);
  font-size: 10.5px; font-weight: 500; color: rgba(255,255,255,0.85); white-space: nowrap;
}
.cmp-win {
  position: absolute; left: 11%; right: 11%; top: 66px; bottom: 22px;
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 18px 34px rgba(60, 0, 25, 0.45);
}
.cmp-svg { display: block; width: 100%; height: 100%; }
.rm-page { fill: #ffffff; }
.rm-chrome { fill: #f4f0f2; }
.rm-h { font: 700 12px -apple-system, BlinkMacSystemFont, system-ui, sans-serif; fill: #1a0f15; }
.rm-sub, .rm-month { font: 500 6.5px -apple-system, BlinkMacSystemFont, system-ui, sans-serif; fill: #8a7680; }
.rm-month { font-weight: 700; }
.rm-grid { fill: #efe9ec; }
.rm-label { fill: #e3dce0; }
.rm-btn { fill: #1a0f15; }
.rm-btntext { font: 600 7px -apple-system, BlinkMacSystemFont, system-ui, sans-serif; fill: #fff; }
.rm-today { font: 700 5.6px -apple-system, BlinkMacSystemFont, system-ui, sans-serif; fill: #fff; }
@media (prefers-color-scheme: dark) {
  .rm-page { fill: #2c1a24; }
  .rm-chrome { fill: #36222d; }
  .rm-h { fill: #fbeef4; }
  .rm-grid { fill: #3a2630; }
  .rm-label { fill: #4a3540; }
  .rm-btn { fill: #fbeef4; }
  .rm-btntext { fill: #1a0f15; }
}

.compose-side { gap: 5px; justify-content: center; }
.compose-side p { margin-top: 3px; }
.cs-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.cs-row.cs-effect { grid-template-columns: repeat(3, 1fr); }
.cs-row span {
  height: 22px; border-radius: 5px; border: 1px solid var(--line);
  display: grid; place-items: center; background: var(--surface);
}
.cs-row span.on { box-shadow: 0 0 0 2px var(--pink); border-color: transparent; }
.cs-row span i { display: block; background: rgba(26,15,21,0.18); border-radius: 2px; }
@media (prefers-color-scheme: dark) { .cs-row span i { background: rgba(255,255,255,0.22); } }
/* Backdrop swatches */
.cs-back span.none {
  background-color: #fff;
  background-image: linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%),
                    linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%);
  background-size: 8px 8px; background-position: 0 0, 4px 4px;
}
.cs-back span.grad  { background: linear-gradient(180deg, #f6a1c4, #e0357f 52%, #8e1a4d); }
.cs-back span.solid { background: #d1d5db; }
.cs-back span.img   { background: linear-gradient(135deg, #8ec5fc, #e0c3fc); }
/* Padding: the card shrinks as padding grows */
.cs-pad span i { width: 70%; height: 66%; }
.cs-pad span:nth-child(2) i { width: 58%; height: 54%; }
.cs-pad span:nth-child(3) i { width: 46%; height: 42%; }
.cs-pad span:nth-child(4) i { width: 34%; height: 30%; }
/* Corner: one corner drawn as an outline at each radius */
.cs-corner span i { width: 13px; height: 13px; background: none;
  border-top: 2px solid rgba(26,15,21,0.45); border-left: 2px solid rgba(26,15,21,0.45);
  transform: translate(2px, 2px); }
@media (prefers-color-scheme: dark) { .cs-corner span i { border-color: rgba(255,255,255,0.5); } }
/* Effect: none / shadow / glow */
.cs-effect span i { width: 14px; height: 10px; background: var(--surface); border: 1px solid rgba(26,15,21,0.18); }
.cs-effect span.shadow i { box-shadow: 0 2px 4px rgba(0,0,0,0.35); }
.cs-effect span.glow i { box-shadow: 0 0 6px 1px var(--pink); }
.cs-field {
  display: block; padding: 4px 7px; border-radius: 5px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: 9.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The window keeps its page colour behind any letterboxing. */
.cmp-win { background: #ffffff; }
@media (prefers-color-scheme: dark) { .cmp-win { background: #2c1a24; } }