/* =========================================================================
   Design tokens — mirrors DESIGN.md at the repo root.
   ========================================================================= */

:root {
  /* Surfaces */
  --bg-base: #08080B;
  --bg-1: #0E0E13;
  --bg-2: #16161D;
  --bg-3: #1F1F28;
  --bg-4: #2C2C36;

  /* Glass */
  --glass-1: rgba(22, 22, 29, 0.55);
  --glass-2: rgba(31, 31, 40, 0.60);
  --glass-3: rgba(42, 42, 54, 0.65);

  /* Text */
  --fg-1: #F5F5FA;
  --fg-2: #B8B8C5;
  --fg-3: #7A7A88;

  /* Accent — Monokai pink */
  --accent: #F92672;
  --accent-bright: #FF4488;
  --accent-light: #FF7AAB;
  --accent-deep: #B81856;
  --accent-darker: #7A0F3A;
  --accent-subtle: rgba(249, 38, 114, 0.14);
  --accent-glow: rgba(249, 38, 114, 0.45);
  --accent-gradient: linear-gradient(135deg, #FF4488 0%, #F92672 50%, #B81856 100%);

  /* Semantic */
  --success: #22C55E;
  --warning: #F59E0B;
  --error: #EF4444;

  /* Borders — hairlines are part of the design language now (bold-variant
     graft, 2026-07-30): brighter than the old barely-there values so the
     ruled grid actually reads. */
  --border: rgba(255, 255, 255, 0.13);
  --border-strong: rgba(255, 255, 255, 0.20);
  --border-subtle: rgba(255, 255, 255, 0.09);

  /* Shadows */
  --shadow-1: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 12px 32px rgba(0, 0, 0, 0.45), 0 4px 8px rgba(0, 0, 0, 0.2);
  --shadow-3: 0 24px 64px rgba(0, 0, 0, 0.55), 0 8px 16px rgba(0, 0, 0, 0.25);
  --shadow-glow: 0 0 80px var(--accent-glow);

  /* Spacing — 4px base */
  --s-2: 2px;
  --s-4: 4px;
  --s-8: 8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-24: 24px;
  --s-32: 32px;
  --s-48: 48px;
  --s-64: 64px;
  --s-96: 96px;
  --s-128: 128px;

  /* Radii — squared off (bold-variant graft, 2026-07-30). The catalog
     grammar wants ruled frames, not rounded cards. --r-icon survives for
     the app-icon squircle only. */
  --r-sm: 0;
  --r-md: 0;
  --r-lg: 0;
  --r-xl: 0;
  --r-icon: 28px;
  --r-pill: 0;

  /* Motion */
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-move: cubic-bezier(0.4, 0, 0.2, 1);
  --t-micro: 100ms;
  --t-short: 200ms;
  --t-medium: 350ms;
  --t-long: 600ms;

  /* Layout */
  --max-w: 1440px;
  --content-w: 1200px;
}

/* =========================================================================
   Reset
   ========================================================================= */

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

html {
  scroll-behavior: smooth;
}

/* Brand-colored keyboard focus — interactive elements only show it on
   :focus-visible so mouse clicks stay clean. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

body {
  font-family: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg-1);
  background-color: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Atmospheric background per DESIGN.md. Negative inset + scale on the
   transform means the gradient can drift without revealing edges. */
@keyframes atmosphere-drift {
  0%   { transform: translate3d(-1.2%, -0.8%, 0) scale(1.04); }
  50%  { transform: translate3d(1.6%,  1.1%, 0) scale(1.08); }
  100% { transform: translate3d(-1.2%, -0.8%, 0) scale(1.04); }
}

body::before {
  content: "";
  position: fixed;
  inset: -6%;
  background:
    radial-gradient(ellipse 80% 60% at 18% 12%, rgba(249, 38, 114, 0.18), transparent 55%),
    radial-gradient(ellipse 60% 80% at 82% 18%, rgba(120, 50, 200, 0.13), transparent 50%),
    radial-gradient(ellipse 100% 50% at 50% 110%, rgba(217, 30, 96, 0.10), transparent 60%),
    radial-gradient(circle at 90% 70%, rgba(255, 100, 50, 0.06), transparent 40%),
    var(--bg-base);
  z-index: -2;
  pointer-events: none;
  will-change: transform;
  animation: atmosphere-drift 38s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

/* Subtle grain overlay */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.25 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
  mix-blend-mode: overlay;
  opacity: 0.025;
  z-index: -1;
  pointer-events: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* =========================================================================
   Typography
   ========================================================================= */

.font-display { font-family: "Bricolage Grotesque", serif; }
.font-body    { font-family: "Hanken Grotesk", sans-serif; }
.font-mono    { font-family: "Geist Mono", "SF Mono", Menlo, monospace; }

h1, h2, h3, h4, h5 {
  font-family: "Bricolage Grotesque", serif;
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--fg-1);
}

.hero-h1 {
  font-size: clamp(34px, 4.8vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.hero-h1-accent {
  background: linear-gradient(120deg, var(--accent-bright), var(--accent) 55%, var(--accent-light));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section-h2 {
  font-size: clamp(48px, 5.5vw, 88px);
  line-height: 1;
  letter-spacing: -0.04em;
}

.eyebrow {
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--fg-3);
  font-weight: 500;
}

.section-number {
  font-family: "Geist Mono", monospace;
  font-size: clamp(48px, 5vw, 76px);
  font-weight: 500;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.lede {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--fg-2);
  font-weight: 400;
}

.body-lg { font-size: 18px; line-height: 1.55; color: var(--fg-2); }
.body    { font-size: 16px; line-height: 1.55; color: var(--fg-2); }
.body-sm { font-size: 14px; line-height: 1.5;  color: var(--fg-2); }

/* =========================================================================
   Plures Line — recurring 1.5px accent-gradient signature
   ========================================================================= */

.plures-line {
  height: 1.5px;
  background: var(--accent-gradient);
  box-shadow: 0 0 16px var(--accent-glow);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

/* =========================================================================
   Glass surface
   ========================================================================= */

.glass {
  background: var(--glass-1);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* =========================================================================
   Buttons
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  padding: 14px 28px;
  border-radius: var(--r-pill);
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform var(--t-short) var(--ease-move),
              box-shadow var(--t-short) var(--ease-move),
              background var(--t-short) var(--ease-move),
              border-color var(--t-short) var(--ease-move);
  white-space: nowrap;
}

.btn-primary {
  background: var(--accent-gradient);
  color: var(--fg-1);
  box-shadow: 0 8px 24px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 32px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-secondary {
  background: var(--glass-1);
  color: var(--fg-1);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  background: var(--glass-2);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.btn-ghost {
  color: var(--fg-2);
  background: transparent;
  padding: 10px 16px;
}

.btn-ghost:hover {
  color: var(--fg-1);
}

/* =========================================================================
   Layout primitives
   ========================================================================= */

/* Containers only ever set horizontal padding — using the shorthand
   here would clobber section vertical padding via specificity. */
.container {
  width: 100%;
  max-width: var(--content-w);
  margin: 0 auto;
  padding-left: var(--s-32);
  padding-right: var(--s-32);
}

.container-wide {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--s-32);
  padding-right: var(--s-32);
}

section {
  padding-top: 120px;
  padding-bottom: 120px;
}

@media (max-width: 768px) {
  .container, .container-wide {
    padding-left: var(--s-24);
    padding-right: var(--s-24);
  }
  section {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}

/* =========================================================================
   Nav
   ========================================================================= */

.nav {
  position: fixed;
  top: var(--s-16);
  left: 0;
  right: 0;
  z-index: 99;
  display: flex;
  justify-content: center;
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: var(--s-24);
  padding: 10px 16px 10px 20px;
  border-radius: var(--r-pill);
  background: var(--glass-1);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
}

.nav-wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Bricolage Grotesque", serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.025em;
}

.nav-wordmark svg { width: 26px; height: 26px; }

.nav-links {
  display: flex;
  gap: var(--s-16);
  font-size: 13px;
  color: var(--fg-2);
  font-weight: 500;
}

.nav-links a {
  position: relative;
  padding-bottom: 2px;
}

.nav-links a:hover { color: var(--fg-1); }

/* Scrollspy: the section under your eyes gets its link underlined. */
.nav-links a.is-active { color: var(--fg-1); }

.nav-links a.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 1px;
  background: var(--accent);
}

/* Anchored sections stop BELOW the floating nav instead of under it. */
section[id] {
  scroll-margin-top: 96px;
}

.nav-buy {
  padding: 8px 18px;
  background: var(--accent-gradient);
  border-radius: var(--r-pill);
  color: var(--fg-1);
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 16px var(--accent-glow);
  transition: transform var(--t-short) var(--ease-move);
}

.nav-buy:hover { transform: translateY(-1px); }

@media (max-width: 700px) {
  .nav-links { display: none; }
}

/* =========================================================================
   Hero
   ========================================================================= */

/* The hero owns the fold: full viewport height, content centered, so the
   step walkthrough only appears once you scroll. */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 120px 0 60px;
  position: relative;
}

.hero-grid { width: 100%; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--s-64);
  align-items: center;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--s-32);
}

@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-48); }
}

/* Grid blowout guard: the GSAP-driven frame carries fixed pixel widths, so
   columns must be allowed to shrink below their content size. */
.hero-grid > * {
  min-width: 0;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-12);
  margin-bottom: var(--s-32);
}

.hero-mark-small {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 14px var(--accent-glow));
}

.hero-tagline {
  margin-top: var(--s-24);
  max-width: 540px;
}

.hero-tagline .plur-res {
  color: var(--fg-3);
  font-weight: 400;
}

.hero-tagline .plur-res strong {
  color: var(--accent-light);
  font-weight: 600;
}

.hero-actions {
  margin-top: var(--s-48);
  display: flex;
  gap: var(--s-24);
  align-items: center;
  flex-wrap: wrap;
}

.hero-belief {
  margin-top: var(--s-24);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.hero-belief-dim {
  color: var(--fg-3);
}

/* =========================================================================
   Shapeshifter — one capture morphing through its shipped formats
   ========================================================================= */

.shapeshifter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.shape-stage {
  position: relative;
  width: 100%;
  height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1100px) {
  .shape-stage { height: 440px; }
}

/* Small screens: scale the whole stage instead of resizing the frame —
   GSAP's pixel-based morph stays untouched. */
@media (max-width: 700px) {
  .shape-stage {
    transform: scale(0.58);
    transform-origin: center center;
    height: 330px;
  }
  .shape-readout { margin-top: var(--s-8, 8px); }
}

.shape-frame {
  position: relative;
  width: 520px;
  height: 293px;
  will-change: width, height;
}

.shape-clip {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-2, #101014);
  border: 1px solid var(--border-strong);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.55),
    0 0 60px rgba(249, 38, 114, 0.10);
  transition:
    background 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}

/* Float state (3D-mockup shapes): the capture card dissolves and the
   transparent device render sits directly on the page's atmosphere. */
.shape-clip.is-float {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* Viewfinder corner brackets — camera language. Pulse outward on each
   settle via GSAP. */
.shape-corners {
  position: absolute;
  inset: -12px;
  pointer-events: none;
  opacity: 0.5;
}

.shape-corners i {
  position: absolute;
  width: 15px;
  height: 15px;
  border: 0 solid var(--accent-light);
}

.shape-corners .tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.shape-corners .tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.shape-corners .bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.shape-corners .br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }

.shape-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
}

/* Transparent device renders: never crop the object, let it float. */
.shape-img-device {
  object-fit: contain;
  object-position: center;
}

/* Tall captures for the video/GIF formats: natural height so GSAP can
   scroll them inside the frame during their hold — the time component. */
.shape-img-scroll {
  height: auto;
  bottom: auto;
  object-fit: initial;
  will-change: transform;
}

.shape-img.is-active {
  opacity: 1;
}

.shape-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}

.shape-readout {
  margin-top: var(--s-24);
  display: flex;
  align-items: baseline;
  gap: var(--s-16);
}

.shape-dims {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--fg-1);
  min-width: 104px;
  font-variant-numeric: tabular-nums;
}

.shape-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-3);
  min-width: 120px;
}

.shape-tick {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--accent-light);
}

.hero-actions .secondary-link {
  font-size: 13px;
  color: var(--fg-3);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--border-strong);
  margin-left: var(--s-12);
}

.hero-actions .secondary-link:hover {
  color: var(--fg-1);
  text-decoration-color: var(--accent);
}

/* =========================================================================
   Viewport showcase — 3D scroll-driven hero animation
   ========================================================================= */

.showcase-section {
  padding: 0 var(--s-32);
}

.showcase {
  margin-top: var(--s-48);
  perspective: 2000px;
  perspective-origin: 50% 30%;
}

.showcase-stage {
  position: relative;
  height: 2000px;
  transform-style: preserve-3d;
  margin: 0 auto;
  max-width: 1400px;
}

@media (max-width: 1200px) {
  .showcase-stage { height: 1700px; }
}

@media (max-width: 900px) {
  .showcase-stage { height: 1400px; }
}

@media (max-width: 600px) {
  .showcase-stage { height: 1150px; }
}

/* All mocks share base treatment. No transition at rest — only when
   the stage gains .is-spread, so collapse (spread → at-rest on scroll
   back up) snaps instantly instead of slowly re-stacking the cards
   over the desktop. */
.mock {
  position: absolute;
  margin: 0;
  background: #0E0E13;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.showcase-stage.is-spread .mock {
  transition:
    transform 1.2s var(--ease-enter),
    opacity 0.9s var(--ease-enter),
    box-shadow 1s var(--ease-enter);
}

.mock img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}

/* ---- AT REST: desktop centered up top, three secondaries hidden behind it ----
   Aspect ratios now match the real screenshot sources (Plures app for the
   desktop card; 16:9 / 9:19.5 / 1:1 outputs for the secondaries). The
   desktop card sits flat — no 3D tilt, no thin frame border — so the
   actual product screenshot reads cleanly. The secondaries keep their
   tilt because they represent captured outputs, not the tool itself. */
.mock-desktop {
  width: 80%;
  aspect-ratio: 1400 / 938;
  left: 10%;
  top: 4%;
  transform: none;
  z-index: 4;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  transition: filter 1.1s var(--ease-enter);
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.55));
}

.mock-tablet,
.mock-mobile,
.mock-mockup {
  width: 80%;
  aspect-ratio: 1400 / 938;
  left: 10%;
  top: 4%;
  transform: translateZ(-80px) scale(0.92);
  opacity: 0;
  overflow: visible;
}

.mock-tablet img,
.mock-mobile img,
.mock-mockup img {
  border-radius: inherit;
}

.mock-tablet  { z-index: 3; }
.mock-mobile  { z-index: 2; }
.mock-mockup  { z-index: 1; }

/* Staggered delays apply only when spreading. On collapse no transition
   is active at all (see .showcase-stage.is-spread .mock above) so the
   stagger doesn't fire in reverse. */
.showcase-stage.is-spread .mock-tablet { transition-delay: 0ms;   }
.showcase-stage.is-spread .mock-mobile { transition-delay: 200ms; }
.showcase-stage.is-spread .mock-mockup { transition-delay: 400ms; }

/* ---- SPREAD: secondaries drop down from the desktop and fan outward ----
   Generous gaps now: desktop sits in the top quarter, secondaries land
   in the bottom third with real horizontal separation. Desktop stays
   flat (no tilt) — only its glow strengthens to anchor the family. */
.showcase-stage.is-spread .mock-desktop {
  transform: none;
  box-shadow: none;
  filter:
    drop-shadow(0 32px 64px rgba(0, 0, 0, 0.6))
    drop-shadow(0 0 60px rgba(249, 38, 114, 0.18));
}

/* Output cards land in the middle band of the stage (~52-62%), sharing
   a bottom baseline so they read as a row. Position uses bottom anchor
   relative to a CSS variable so the band can move independently of
   stage height. */
:root {
  --capture-row-bottom: 38%;
}

.showcase-stage.is-spread .mock-tablet {
  width: 24%;
  aspect-ratio: 16 / 9;
  left: 8%;
  top: auto;
  bottom: var(--capture-row-bottom);
  opacity: 1;
  transform: rotateY(14deg) rotateX(5deg) translateZ(0);
}

.showcase-stage.is-spread .mock-mobile {
  width: 9%;
  aspect-ratio: 393 / 852;
  left: 50%;
  top: auto;
  bottom: var(--capture-row-bottom);
  opacity: 1;
  transform: translateX(-50%) rotateY(0deg) rotateX(2deg) translateZ(60px);
}

/* The third output is a 3D device mockup (16:10 laptop render) — the
   staged export sits beside the raw captures as a peer, not a footnote. */
.showcase-stage.is-spread .mock-mockup {
  width: 26%;
  aspect-ratio: 1920 / 1200;
  left: auto;
  right: 6%;
  top: auto;
  bottom: var(--capture-row-bottom);
  opacity: 1;
  transform: rotateY(-14deg) rotateX(5deg) translateZ(-20px);
}

/* Caption chips under each output card. Render absolutely so they sit
   just below the card; only fade in once the stage spreads. Transition
   is scoped to the is-spread state so collapse snaps the captions
   off in lockstep with the cards. */
.mock-tablet figcaption,
.mock-mobile figcaption,
.mock-mockup figcaption {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  right: 0;
  text-align: center;
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.showcase-stage.is-spread .mock-tablet figcaption,
.showcase-stage.is-spread .mock-mobile figcaption,
.showcase-stage.is-spread .mock-mockup figcaption {
  opacity: 1;
  transition: opacity 0.6s var(--ease-enter);
  transition-delay: 0.55s;
}

@media (max-width: 700px) {
  .showcase-stage.is-spread .mock-desktop { width: 90%; left: 5%; top: 2%; }
  .showcase-stage.is-spread .mock-tablet  { width: 28%; left: 3%; bottom: 4%; }
  .showcase-stage.is-spread .mock-mobile  { width: 14%; bottom: 4%; }
  .showcase-stage.is-spread .mock-mockup  { width: 28%; right: 3%; bottom: 4%; }
}

/* Browser chrome — top bar with stoplight dots + URL */
.mock-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid var(--border);
  height: 24px;
}

.mock-chrome-mobile {
  justify-content: center;
  height: 18px;
  background: var(--bg-1);
  border-bottom: none;
  padding: 4px 0;
}

.mock-notch {
  width: 32%;
  height: 4px;
  background: #000;
  border-radius: 2px;
}

.mock-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mock-dot-r { background: #FF5F57; }
.mock-dot-y { background: #FEBC2E; }
.mock-dot-g { background: #28C840; }

.mock-url {
  margin-left: 10px;
  height: 12px;
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  font-family: "Geist Mono", monospace;
  font-size: 8px;
  color: var(--fg-3);
  display: flex;
  align-items: center;
  padding: 0 8px;
  letter-spacing: 0.04em;
}

/* Body content */
.mock-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}

.mock-body-narrow { padding: 8px; gap: 6px; }
.mock-body-square { padding: 0; gap: 0; position: relative; }

.mock-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mock-logo {
  width: 32px;
  height: 10px;
  background: linear-gradient(90deg, var(--accent-bright), var(--accent-deep));
  border-radius: 2px;
  box-shadow: 0 0 8px var(--accent-glow);
  position: relative;
}

.mock-logo::after {
  content: "";
  position: absolute;
  left: -14px;
  top: 1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-light);
  box-shadow: 0 0 6px var(--accent-glow);
}

.mock-nav-links {
  display: flex;
  gap: 8px;
}

.mock-nav-links span {
  width: 16px;
  height: 5px;
  background: rgba(255, 255, 255, 0.10);
  border-radius: 2px;
}

.mock-hero {
  display: flex;
  gap: 12px;
  flex: 1;
  min-height: 0;
}

.mock-body-wide .mock-hero { align-items: stretch; }

.mock-hero-img {
  flex: 1.4;
  border-radius: 4px;
  background:
    radial-gradient(circle at 25% 30%, rgba(255, 180, 100, 0.45), transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(120, 50, 200, 0.55), transparent 60%),
    radial-gradient(circle at 80% 20%, rgba(255, 100, 150, 0.40), transparent 50%),
    linear-gradient(135deg, #2C1F35 0%, #18142A 60%, #0E0E13 100%);
  min-height: 60px;
  position: relative;
  overflow: hidden;
}

.mock-hero-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.35) 100%);
}

.mock-hero-img-full {
  flex: none;
  width: 100%;
  height: 40%;
  min-height: 40px;
}

.mock-body-narrow .mock-hero-img-full { height: 28%; }

.mock-hero-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}

.mock-line {
  height: 6px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
}

.mock-line.w-90 { width: 90%; }
.mock-line.w-80 { width: 80%; }
.mock-line.w-70 { width: 70%; }
.mock-line.w-60 { width: 60%; }
.mock-line.w-50 { width: 50%; }
.mock-line.w-40 { width: 40%; }

.mock-cta {
  width: 60px;
  height: 14px;
  background: var(--accent-gradient);
  border-radius: 4px;
  margin-top: 4px;
  box-shadow: 0 2px 8px var(--accent-glow);
}

.mock-grid {
  display: grid;
  gap: 6px;
}

.mock-grid-4 { grid-template-columns: repeat(4, 1fr); }
.mock-grid-3 { grid-template-columns: repeat(3, 1fr); }

.mock-tile {
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  background:
    radial-gradient(circle at 35% 40%, rgba(255, 122, 171, 0.30), transparent 60%),
    linear-gradient(135deg, rgba(120, 50, 200, 0.22), rgba(50, 30, 80, 0.30)),
    rgba(255, 255, 255, 0.04);
}

.mock-tile:nth-child(2) {
  background:
    radial-gradient(circle at 60% 50%, rgba(120, 200, 255, 0.25), transparent 60%),
    linear-gradient(135deg, rgba(50, 100, 200, 0.22), rgba(30, 60, 120, 0.30)),
    rgba(255, 255, 255, 0.04);
}

.mock-tile:nth-child(3) {
  background:
    radial-gradient(circle at 40% 60%, rgba(255, 180, 100, 0.28), transparent 60%),
    linear-gradient(135deg, rgba(200, 100, 50, 0.22), rgba(120, 60, 30, 0.30)),
    rgba(255, 255, 255, 0.04);
}

.mock-tile:nth-child(4) {
  background:
    radial-gradient(circle at 50% 35%, rgba(100, 255, 180, 0.22), transparent 60%),
    linear-gradient(135deg, rgba(40, 120, 80, 0.22), rgba(30, 70, 50, 0.30)),
    rgba(255, 255, 255, 0.04);
}

.mock-tile-tall {
  aspect-ratio: 16 / 9;
}

/* Square variant: overlay text on hero image */
.mock-square-overlay {
  position: absolute;
  inset: 0;
  padding: 18%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.65) 100%);
}

/* =========================================================================
   3-stage scroll narrative — step labels, vertical pink rails,
   and the stage-3 "share" mock frames.
   ========================================================================= */

/* Step labels: numbered chip + headline. Centered horizontally above
   or below the visual for each stage. */
.step-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--s-16);
  z-index: 6;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
}

/* Step 1 is part of the at-rest layout, so it's always visible. */
.step-label.step-1 { opacity: 1; }

/* Stages 2 and 3 reveal on scroll triggers, with a small fade. */
.showcase-stage.is-spread .step-label.step-2,
.showcase-stage.is-stage3 .step-label.step-3 {
  opacity: 1;
  transition: opacity 0.6s var(--ease-enter);
}
.showcase-stage.is-spread .step-label.step-2 { transition-delay: 50ms; }
.showcase-stage.is-stage3 .step-label.step-3 { transition-delay: 50ms; }

.step-num {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  font-family: "Geist Mono", monospace;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 0 24px rgba(249, 38, 114, 0.45);
}

.step-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.step-text {
  font-family: "Bricolage Grotesque", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.8vw, 24px);
  color: var(--fg-1);
  letter-spacing: -0.01em;
}

/* Sub-description: one plain-spoken line under each heading so the
   1-2-3 narrative explains itself without relying on the visuals. */
.step-desc {
  font-family: "Hanken Grotesk", sans-serif;
  font-style: normal;
  font-size: 14px;
  line-height: 1.45;
  color: var(--fg-2);
  letter-spacing: 0;
  white-space: normal;
  max-width: 52ch;
}

/* Step labels sit on the vertical centerline with a dark backing so
   they read as a "chip" anchored on the pink rail behind them. The
   rail passes behind the label, giving a continuous vertical line. */
.step-label {
  padding: 10px 18px 12px;
  border-radius: var(--r-xl);
  background: rgba(14, 14, 19, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  max-width: min(92%, 640px);
}

/* Below 700px the long headings can't stay on one line. Anchoring with
   left:50% would shrink-to-fit against only half the stage width once
   wrapping is allowed, so center with inset + auto margins instead. */
@media (max-width: 700px) {
  .step-label {
    white-space: normal;
    left: 0;
    right: 0;
    transform: none;
    margin-inline: auto;
    width: fit-content;
    max-width: 92%;
  }
  .step-desc { font-size: 13px; }

  /* The two-line chip is taller on small screens — drop the desktop
     mock so step 1's label doesn't sit on top of the app window. */
  .mock-desktop { top: 12%; }
  .showcase-stage.is-spread .mock-desktop { top: 12%; }
}

/* Position step labels vertically within the stage. */
.step-label.step-1 { top: 0;     }
.step-label.step-2 { top: 42%;   }
.step-label.step-3 { top: 66%;   }

/* Vertical pink rails span from each label down to its graphic, with
   the label itself sitting on top of the rail (via z-index + backing).
   The rail uses scaleY transform-origin top so it grows downward on
   reveal — could be wired into the trigger later for a draw-on effect. */
.step-rail {
  position: absolute;
  left: 50%;
  width: 1px;
  background: linear-gradient(
    180deg,
    rgba(249, 38, 114, 0.9) 0%,
    rgba(249, 38, 114, 0.35) 100%
  );
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transform-origin: top;
}

/* Rail 1: from below step-1 label down to top of desktop card. */
.step-rail.rail-1 {
  top: 3%;
  height: 2%;
  opacity: 1;
}

/* Rail 2: from below desktop bottom (~34%) down to top of output cards
   row (~50%). Passes behind step-2 label which floats at ~42%. */
.step-rail.rail-2 {
  top: 35%;
  height: 16%;
}

/* Rail 3: from below output cards (~62%) down to top of share mocks
   (~70%). Passes behind step-3 label which floats at ~66%. */
.step-rail.rail-3 {
  top: 62%;
  height: 9%;
}

.showcase-stage.is-spread .step-rail.rail-2,
.showcase-stage.is-stage3 .step-rail.rail-3 {
  opacity: 1;
  transition: opacity 0.5s var(--ease-enter);
}

/* =========================================================================
   Stage 3 — Share mocks (portfolio site + social post)
   ========================================================================= */

.share-mock {
  position: absolute;
  top: 70%;
  z-index: 4;
  opacity: 0;
  transform: translateY(40px);
  pointer-events: none;
}

/* Theatrical staging: when the share act (stage 3) begins, the capture act
   leaves the stage. Without this, stage 2's three spread captures and stage
   3's three share mocks share one viewport — six dense artifacts at once. */
.showcase-stage.is-stage3 .mock,
.showcase-stage.is-stage3 .step-label.step-1,
.showcase-stage.is-stage3 .step-label.step-2,
.showcase-stage.is-stage3 .step-rail.rail-1,
.showcase-stage.is-stage3 .step-rail.rail-2 {
  opacity: 0.08;
  transition: opacity 0.7s var(--ease-enter);
}

/* Three mocks across stage 3: portfolio (left, the anchor), feed (center,
   smaller + dropped, showing a COMPOSED capture — stage 3 is the composer's
   payoff), phone (right, raised). Distinct sizes, distinct content, and
   generous gaps; crowding reads as clutter at exactly this scroll moment. */
.share-portfolio { left:  2%;  width: 29%; top: 68%; }
.share-feed      { left: 42%;  width: 26%; top: 74%; }
.share-social    { right: 4%;  width: 16%; top: 64%; }

/* Fade + slide in on stage 3. Snap back instantly on collapse. */
.showcase-stage.is-stage3 .share-mock {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.8s var(--ease-enter),
    transform 0.8s var(--ease-enter);
}
.showcase-stage.is-stage3 .share-portfolio { transition-delay: 100ms; }
.showcase-stage.is-stage3 .share-feed      { transition-delay: 240ms; }
.showcase-stage.is-stage3 .share-social    { transition-delay: 380ms; }

/* ---- Portfolio browser frame ------------------------------------------- */

.share-frame-browser {
  background: var(--bg-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-3), 0 0 60px rgba(249, 38, 114, 0.10);
}

.share-browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}

.share-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2C2C36;
}
.share-dot:nth-child(1) { background: #FF5F57; }
.share-dot:nth-child(2) { background: #FEBC2E; }
.share-dot:nth-child(3) { background: #28C840; }

.share-url {
  margin-left: 12px;
  padding: 3px 12px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  color: var(--fg-3);
}

.share-portfolio-body {
  padding: 0;
}

.share-portfolio-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
}

.share-portfolio-brand {
  font-family: "Bricolage Grotesque", serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--fg-1);
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: baseline;
}

.share-portfolio-brand i {
  color: var(--accent);
  font-style: normal;
  margin-left: 1px;
}

.share-portfolio-navitems {
  display: inline-flex;
  gap: 18px;
  font-family: "Geist Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.share-portfolio-hero {
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}

.share-portfolio-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  display: block;
}

.share-portfolio-meta {
  padding: 14px 20px 16px;
}

.share-portfolio-title-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 0;
}

/* Tags ride the title row now — the meta block is a single compact line
   so the whole card sits closer to landscape. */
.share-portfolio-title-row .share-portfolio-tags {
  margin-left: auto;
  margin-top: 0;
}

.share-portfolio-meta h4 {
  font-family: "Bricolage Grotesque", serif;
  font-weight: 600;
  font-size: 26px;
  color: var(--fg-1);
  letter-spacing: -0.02em;
  margin: 0;
}

.share-portfolio-year-pill {
  font-family: "Geist Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--fg-3);
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
}

.share-portfolio-meta p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0 0 14px;
}

.share-portfolio-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.share-portfolio-tags span {
  font-family: "Geist Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
  padding: 4px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--bg-2);
}

/* =========================================================================
   Stage 3 — Feed mock (LinkedIn-style desktop browser)
   ========================================================================= */

.share-feed-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-1);
}

/* Deliberately generic — evokes "a professional feed" without borrowing
   anyone's actual mark. */
.share-feed-logo {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: linear-gradient(135deg, #3a4a63, #232c3d);
  color: #aebed6;
  display: grid;
  place-items: center;
  font-size: 11px;
  flex-shrink: 0;
}

.share-feed-search {
  flex: 1;
  max-width: 180px;
  height: 26px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}

.share-feed-icons {
  margin-left: auto;
  display: flex;
  gap: 14px;
  align-items: center;
}

.share-feed-navicon {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  background: var(--bg-3);
}

.share-feed-me {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(249, 38, 114, 0.8), transparent 60%),
    linear-gradient(135deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--border-strong);
}

.share-feed-post {
  padding: 18px 20px 20px;
}

.share-feed-post-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.share-feed-post-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(249, 38, 114, 0.9), transparent 60%),
    linear-gradient(135deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--border-strong);
  flex-shrink: 0;
}

.share-feed-post-author {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  flex: 1;
  min-width: 0;
}

.share-feed-post-author strong {
  font-size: 13px;
  color: var(--fg-1);
  font-weight: 600;
}

.share-feed-post-author span {
  font-size: 11px;
  color: var(--fg-3);
}

.share-feed-follow {
  font-family: "Geist Mono", monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #0a66c2;
  padding: 4px 10px;
  border: 1px solid #0a66c2;
  border-radius: var(--r-pill);
}

.share-feed-post-text {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg-1);
  margin: 0 0 12px;
}

.share-feed-post-text strong {
  color: var(--fg-1);
}

.share-feed-post-image {
  overflow: hidden;
  background: #000;
  border-radius: var(--r-sm);
  margin: 0 0 12px;
  border: 1px solid var(--border);
}

.share-feed-post-image img {
  display: block;
  width: 100%;
  height: auto;
  object-position: top left;
  display: block;
}

.share-feed-post-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--fg-3);
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.share-feed-stat-icons {
  display: inline-flex;
}

.share-feed-react {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--bg-1);
  display: inline-block;
}

.share-feed-react-1 {
  background: #0a66c2;
}

.share-feed-react-2 {
  background: var(--accent);
  margin-left: -6px;
}

/* ---- Social phone frame (iOS-styled) ---------------------------------- */

.share-frame-phone {
  background: linear-gradient(160deg, #1d1d22 0%, #0a0a0d 100%);
  border-radius: 44px;
  padding: 8px;
  border: 1px solid var(--border-strong);
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.55),
    0 0 60px rgba(249, 38, 114, 0.10),
    inset 0 0 0 2px rgba(255, 255, 255, 0.04);
  position: relative;
  aspect-ratio: 9 / 19.5;
}

.share-phone-screen {
  background: var(--bg-1);
  border-radius: 36px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Dynamic-island-style notch */
.share-phone-island {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 32%;
  height: 22px;
  background: #000;
  border-radius: 16px;
  z-index: 3;
}

/* Status bar — time on left, signal/wifi/battery on right */
.share-phone-statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 26px 8px;
  position: relative;
  z-index: 2;
}

.share-phone-time {
  font-family: -apple-system, "Helvetica Neue", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-1);
}

.share-phone-status-right {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Cellular signal — 4 ascending bars */
.share-phone-signal {
  display: inline-block;
  width: 16px;
  height: 9px;
  background:
    linear-gradient(to top, var(--fg-1) 30%, transparent 30%) 0    100% / 2px 30% no-repeat,
    linear-gradient(to top, var(--fg-1) 50%, transparent 50%) 5px  100% / 2px 50% no-repeat,
    linear-gradient(to top, var(--fg-1) 70%, transparent 70%) 10px 100% / 2px 70% no-repeat,
    linear-gradient(to top, var(--fg-1) 90%, transparent 90%) 15px 100% / 2px 90% no-repeat;
}

.share-phone-wifi {
  display: inline-block;
  width: 12px;
  height: 9px;
  background:
    radial-gradient(circle at 50% 100%, var(--fg-1) 1.5px, transparent 2px),
    radial-gradient(circle at 50% 100%, transparent 3.5px, var(--fg-1) 3.5px, var(--fg-1) 4.5px, transparent 5px),
    radial-gradient(circle at 50% 100%, transparent 6px, var(--fg-1) 6px, var(--fg-1) 7px, transparent 7.5px);
}

.share-phone-battery {
  display: inline-block;
  width: 22px;
  height: 10px;
  border: 1px solid var(--fg-1);
  border-radius: 3px;
  position: relative;
  padding: 1px;
}

.share-phone-battery::before {
  content: "";
  display: block;
  height: 100%;
  width: 75%;
  background: var(--fg-1);
  border-radius: 1px;
}

.share-phone-battery::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 4px;
  background: var(--fg-1);
  border-radius: 0 1px 1px 0;
}

.share-phone-app {
  flex: 1;
  padding: 12px;
  overflow: hidden;
}

.share-post-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
}

.share-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(249, 38, 114, 0.9), transparent 60%),
    linear-gradient(135deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--border-strong);
}

.share-handle {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  flex: 1;
  min-width: 0;
}

.share-handle strong {
  font-size: 12px;
  color: var(--fg-1);
  font-weight: 600;
}

.share-handle em {
  font-style: normal;
  font-size: 10px;
  color: var(--fg-3);
  font-family: "Geist Mono", monospace;
  letter-spacing: 0.05em;
}

.share-more {
  color: var(--fg-3);
  font-size: 16px;
  line-height: 0.7;
}

.share-post-image {
  margin: 0 -14px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: #000;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.share-post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.share-post-actions {
  display: flex;
  gap: 14px;
  padding: 12px 0 8px;
}

.share-act {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--fg-2);
  border-radius: 4px;
  position: relative;
}

.share-act-heart {
  border: none;
  background:
    radial-gradient(circle at 35% 40%, var(--fg-2) 5px, transparent 6px),
    radial-gradient(circle at 65% 40%, var(--fg-2) 5px, transparent 6px);
  clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 100%, 0 50%);
  border-radius: 0;
}

.share-act-comment {
  border-radius: 50% 50% 50% 0;
  border: 1.5px solid var(--fg-2);
  background: transparent;
}

.share-act-send {
  border: none;
  background: var(--fg-2);
  clip-path: polygon(0 0, 100% 50%, 0 100%, 25% 50%);
}

.share-post-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--fg-2);
}

.share-post-meta strong {
  font-weight: 600;
  color: var(--fg-1);
}

/* Responsive: at ~900px we drop the phone below the row to keep
   portfolio + feed readable. At ~600px everything stacks. */
@media (max-width: 1100px) {
  .share-portfolio { width: 38%; }
  .share-feed      { left: 42%; width: 38%; }
  .share-social    { width: 16%; }
}

@media (max-width: 900px) {
  .share-portfolio { left: 2%;  width: 48%; top: 70%; }
  .share-feed      { left: 52%; width: 46%; top: 70%; }
  .share-social    { left: 39%; width: 22%; top: 86%; right: auto; }
}

@media (max-width: 600px) {
  .share-portfolio { left: 2%;  width: 96%; top: 68%; }
  .share-feed      { left: 2%;  width: 96%; top: 82%; }
  .share-social    { left: 25%; width: 50%; top: 92%; right: auto; }
}

/* Caption row below the showcase — pushed well below so it never collides
   with the bottom annotation as it animates in. */
.showcase-caption {
  margin-top: var(--s-128);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--s-16);
  flex-wrap: wrap;
  gap: var(--s-12);
}

.showcase-counts {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--fg-3);
  text-transform: uppercase;
}

@media (max-width: 600px) {
  .mock-body { padding: 8px; gap: 6px; }
  .mock-nav-links span { width: 12px; }
}

/* =========================================================================
   What-it-does grid
   ========================================================================= */

.features {
  margin-top: var(--s-128);
}

.section-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-32);
  margin-bottom: var(--s-48);
}

/* Wireframe numerals (bold-variant graft): outlined figures, solid accent
   period. The numeral is drawn, not printed — same language as the mark. */
.section-head .num {
  font-family: "Geist Mono", monospace;
  font-size: clamp(48px, 6vw, 88px);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--fg-3);
}
.section-head .num b { color: var(--accent); -webkit-text-stroke: 0; font-weight: 600; }
.section-head h2 { font-size: clamp(36px, 4vw, 56px); }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-32);
}

/* Bento variant — 6-col grid:
   row 1: composer lead (4, horizontal) + multi-res (2)
   row 2: tidy before/after (4) + motion (2)
   row 3: scenes (3) + checkboxes (3) */
.feature-grid-bento {
  grid-template-columns: repeat(6, 1fr);
  align-items: stretch;
}

.feature-card.feature-card-composer {
  grid-column: span 4;
  flex-direction: row;
  align-items: center;
  gap: var(--s-32);
  overflow: hidden;
}

.composer-copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-16);
}

.composer-img {
  width: 38%;
  max-width: 250px;
  height: auto;
  align-self: center;
  /* Bleed past the card's vertical padding so the phone feels mounted. */
  margin: calc(var(--s-32) * -1) 0;
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
}

.feature-card-hero {
  grid-column: span 2;
  position: relative;
  overflow: hidden;
}

.feature-card-tidy { grid-column: span 4; }
.feature-card-motion { grid-column: span 2; }
.feature-card-scenes { grid-column: span 3; }
.feature-card-misc { grid-column: span 3; }

.feature-card-tidy .tidy-copy {
  display: flex;
  flex-direction: column;
  gap: var(--s-24);
}

.tidy-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-12);
}

.tidy-compare figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tidy-compare img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
}

.tidy-compare figcaption {
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--fg-3);
}

.tidy-compare figure:last-child figcaption {
  color: var(--accent-light);
}

.feature-checklist {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}

.feature-checklist li {
  padding-left: 22px;
  position: relative;
}

.feature-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent-light);
}

@media (max-width: 900px) {
  .feature-grid,
  .feature-grid-bento {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .feature-card-hero,
  .feature-card-composer,
  .feature-card-tidy,
  .feature-card-motion,
  .feature-card-scenes,
  .feature-card-misc {
    grid-row: auto;
    grid-column: auto;
  }
  .feature-card.feature-card-composer {
    flex-direction: column;
    align-items: stretch;
  }
  .composer-img {
    width: 60%;
    margin: 0 auto calc(var(--s-32) * -1);
  }
}

.feature-card {
  padding: var(--s-32);
  border-radius: var(--r-xl);
  background: var(--glass-1);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--s-16);
  min-height: 220px;
}

.feature-card-hero {
  min-height: 360px;
}

/* Visual stack inside the hero feature card — four viewport rectangles
   at true aspect ratios, fanned across the lower portion of the card. */
.feature-visual {
  position: absolute;
  inset: auto var(--s-32) var(--s-32) var(--s-32);
  height: 130px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 0.45fr 0.7fr;
  align-items: end;
  gap: var(--s-8);
  pointer-events: none;
}

.vp-stack {
  position: relative;
  border-radius: var(--r-md);
  border: 1px solid rgba(249, 38, 114, 0.35);
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255, 122, 171, 0.18), transparent 60%),
    radial-gradient(ellipse at 70% 70%, rgba(120, 50, 200, 0.14), transparent 60%),
    linear-gradient(135deg, #1A1422, #0E0E13);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.vp-desktop { aspect-ratio: 16 / 9; }
.vp-tablet  { aspect-ratio: 4 / 3; }
.vp-mobile  { aspect-ratio: 9 / 16; height: 100%; }
.vp-square  { aspect-ratio: 1 / 1; }

.vp-tag {
  position: absolute;
  bottom: 6px;
  left: 8px;
  font-family: "Geist Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--accent-light);
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .feature-visual { display: none; }
  .feature-card-hero { min-height: 320px; }
}

.feature-card h3 {
  font-size: 24px;
  letter-spacing: -0.025em;
}

.feature-card .num {
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--fg-3);
}

/* =========================================================================
   Product screenshot section
   ========================================================================= */

.product-shot {
  position: relative;
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-3), 0 0 80px rgba(249, 38, 114, 0.10);
}

.product-shot img {
  width: 100%;
  height: auto;
  display: block;
}

.product-shot-caption {
  position: absolute;
  bottom: var(--s-16);
  left: var(--s-24);
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--fg-2);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* =========================================================================
   Comparison table
   ========================================================================= */

.cmp-card {
  background: var(--glass-1);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}

.cmp-table {
  width: 100%;
  border-collapse: collapse;
}

.cmp-table th,
.cmp-table td {
  padding: var(--s-24) var(--s-32);
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.cmp-table thead th {
  background: rgba(0, 0, 0, 0.25);
  padding-top: var(--s-32);
  padding-bottom: var(--s-32);
}

.cmp-table tbody tr:last-child td { border-bottom: none; }

.cmp-table tbody tr:hover td { background: rgba(255, 255, 255, 0.015); }

.cmp-product {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  font-family: "Bricolage Grotesque", serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--fg-1);
  letter-spacing: -0.02em;
}

.cmp-mark { width: 24px; height: 24px; }

.cmp-price {
  display: block;
  margin-top: var(--s-4);
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--fg-3);
  font-weight: 500;
}

.cmp-label {
  color: var(--fg-2);
  font-size: 14px;
  line-height: 1.4;
  max-width: 320px;
}

.cmp-yes,
.cmp-no,
.cmp-partial {
  font-family: "Geist Mono", monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.cmp-yes { color: var(--accent-light); }
.cmp-no  { color: var(--fg-3); }
.cmp-partial { color: var(--warning); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }

.plures-col {
  background: var(--accent-subtle);
  position: relative;
}

.plures-col::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent-gradient);
  box-shadow: 0 0 12px var(--accent-glow);
}

thead .plures-col::before { top: 0; }

@media (max-width: 900px) {
  .cmp-table { font-size: 13px; }
  .cmp-table th,
  .cmp-table td { padding: var(--s-12); }
  .cmp-product { font-size: 14px; }
  .cmp-mark { width: 20px; height: 20px; }
}

/* =========================================================================
   Price — stated like a dimension (bold-variant graft). The terms reuse
   the .spec-strip datasheet rows; only the big figure and the buy/studio
   rows are new.
   ========================================================================= */

.price-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--s-24);
  padding-bottom: var(--s-48);
}

.price-big {
  font-family: "Bricolage Grotesque", serif;
  font-size: clamp(96px, 13vw, 200px);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--fg-1);
}

.price-big sup {
  font-size: 0.35em;
  font-weight: 700;
  vertical-align: super;
  color: var(--fg-3);
}

.price-hero-terms {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  text-align: right;
  padding-bottom: var(--s-12);
}

.price-hero-terms span {
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.price-buy-row {
  display: flex;
  align-items: center;
  gap: var(--s-24);
  padding: var(--s-24) 0;
  border-bottom: 1px solid var(--border);
}

.price-buy-row .price-note {
  font-family: "Geist Mono", monospace;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.studio-row {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  align-items: center;
  border-bottom: 1px solid var(--border);
}

.studio-row .studio-label {
  padding: var(--s-24);
  border-right: 1px solid var(--border);
  align-self: stretch;
  display: flex;
  align-items: center;
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.studio-row p {
  padding: var(--s-24);
  font-size: 15px;
  color: var(--fg-2);
  margin: 0;
}

.studio-row .studio-link {
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0 var(--s-32);
  border-left: 1px solid var(--border);
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-1);
  transition: background var(--t-short), color var(--t-short);
}

.studio-row .studio-link:hover { background: var(--fg-1); color: var(--bg-base); }

@media (max-width: 900px) {
  .price-hero { grid-template-columns: 1fr; align-items: start; }
  .price-hero-terms { text-align: left; }
  .price-buy-row { flex-wrap: wrap; }
  .studio-row { grid-template-columns: 1fr; }
  .studio-row .studio-label { border-right: none; padding-bottom: 0; }
  .studio-row .studio-link { border-left: none; padding: var(--s-16) var(--s-24); }
}

/* =========================================================================
   Testimonials
   ========================================================================= */

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-32);
}

@media (max-width: 900px) {
  .testimonials-grid { grid-template-columns: 1fr; }
}

.testimonial {
  padding: var(--s-48);
  background: var(--glass-1);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  display: flex;
  flex-direction: column;
  gap: var(--s-24);
}

.testimonial p {
  font-family: "Bricolage Grotesque", serif;
  font-style: italic;
  font-size: 19px;
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--fg-1);
  font-weight: 400;
}

.testimonial-foot {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding-top: var(--s-16);
  border-top: 1px solid var(--border);
}

.testimonial-foot .name {
  font-size: 13px;
  color: var(--fg-2);
  font-weight: 500;
}

.testimonial-foot .org {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* =========================================================================
   Footer
   ========================================================================= */

footer {
  border-top: 1px solid var(--border);
  padding: var(--s-48) 0 var(--s-32);
  margin-top: var(--s-128);
  color: var(--fg-3);
  font-size: 13px;
}

footer .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-16);
}

footer a:hover { color: var(--fg-1); }

footer .legal {
  display: flex;
  gap: var(--s-16);
}

/* =========================================================================
   Reveal-on-scroll
   ========================================================================= */

/* Reveal-on-scroll removed — see script.js. Class kept so the existing
   .reveal hooks elsewhere in the codebase keep compiling. */

/* =========================================================================
   Sticky nav scrolled state
   ========================================================================= */

.nav-inner[data-scrolled="true"] {
  background: var(--glass-2);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-2);
}

/* =========================================================================
   Download / final CTA band
   ========================================================================= */

.download-band {
  padding-top: var(--s-96, 96px);
  padding-bottom: var(--s-96, 96px);
}

.download-inner {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.download-mark {
  width: 72px;
  height: 72px;
  margin-bottom: var(--s-24, 24px);
}

.download-inner h2 {
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.08;
  margin-bottom: var(--s-16, 16px);
}

.download-inner .lede {
  max-width: 480px;
  margin-bottom: var(--s-32, 32px);
}

.download-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-16, 16px);
  margin-bottom: var(--s-24, 24px);
}

.download-meta {
  margin-bottom: var(--s-16, 16px);
}

.download-appstore {
  color: var(--fg-2);
}

.download-appstore a {
  color: var(--fg-1);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* =========================================================================
   Reduced motion
   ========================================================================= */

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

/* =========================================================================
   Mockups section (03) — the flagship. Duo comparison + three point cards.
   ========================================================================= */

.mockup-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-24);
  margin-bottom: var(--s-12);
}

.mockup-duo figure {
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-2);
}

.mockup-duo img {
  width: 100%;
  height: auto;
  display: block;
}

.mockup-duo figcaption {
  padding: 12px 16px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
  border-top: 1px solid var(--border-subtle);
}

.mockup-duo figure:last-child figcaption {
  color: var(--accent-light);
}

.mockup-duo-note {
  color: var(--fg-3);
  margin: 0 0 var(--s-48);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.mockup-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-24);
  align-items: start;
}

.mockup-points .feature-card {
  height: 100%;
}

.mockup-phone-inline {
  margin: var(--s-24) calc(-1 * var(--s-8)) 0;
  border-radius: var(--r-lg);
  overflow: hidden;
}

.mockup-phone-inline img,
.mockup-phone-inline video,
.mockup-video-inline video {
  width: 100%;
  height: auto;
  display: block;
}

.mockup-video-inline {
  margin: var(--s-24) calc(-1 * var(--s-8));
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* The Scroll video & GIF card demos itself: a tall capture auto-scrolls
   inside a fixed window, the way a Plures scroll recording plays. */
.motion-loop {
  margin-top: var(--s-24);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #0E0E13;
}

.motion-loop img {
  width: 100%;
  display: block;
  animation: motion-scroll 10s ease-in-out infinite alternate;
}

@keyframes motion-scroll {
  from { transform: translateY(0); }
  to   { transform: translateY(-86%); }
}

@media (prefers-reduced-motion: reduce) {
  .motion-loop img { animation: none; }
}

@media (max-width: 900px) {
  .mockup-duo {
    grid-template-columns: 1fr;
  }
  .mockup-points {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   Capture tour — sticky workspace shot with a travelling spotlight. The
   hole geometry lives in CSS vars set per data-step; four blurred veil
   panels surround it and glide when the step changes.
   ========================================================================= */

.capture-tour {
  position: relative;
  /* The capture window's three sidebar panels (percentages of the
     screenshot box, measured on the 1600×1040 tour-capture shot). */
  --px: 3.0%;  --pw: 20.3%;
  --p1y: 13.2%; --p1h: 26.4%;
  --p2y: 42.0%; --p2h: 29.6%;
  --p3y: 73.2%; --p3h: 22.8%;
}

.tour-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--s-32);
}

.tour-shot {
  position: relative;
  width: min(1240px, 92vw, calc(86vh * 1.538));
  aspect-ratio: 1600 / 1040;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border-strong);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.55);
}

.tour-shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* The other screens stacked over the Library shot: the capture window
   holds through steps 2–4, the editors take 5 and 6; steps 1 and 7 show
   the Library itself. */
.tour-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
}
.capture-tour[data-step="2"] .tl-capture,
.capture-tour[data-step="3"] .tl-capture,
.capture-tour[data-step="4"] .tl-capture,
.capture-tour[data-step="5"] .tl-compose,
.capture-tour[data-step="6"] .tl-mockup { opacity: 1; }

/* During the capture steps (2–4), each card blurs only the capture
   window's panels it is NOT talking about; steps 1 and 7 stay crisp. */
.panel-veil {
  position: absolute;
  left: var(--px);
  width: var(--pw);
  border-radius: 10px;
  backdrop-filter: blur(4px) brightness(0.55) saturate(0.8);
  -webkit-backdrop-filter: blur(4px) brightness(0.55) saturate(0.8);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.pv-1 { top: var(--p1y); height: var(--p1h); }
.pv-2 { top: var(--p2y); height: var(--p2h); }
.pv-3 { top: var(--p3y); height: var(--p3h); }

.capture-tour[data-step="2"] .pv-2,
.capture-tour[data-step="2"] .pv-3,
.capture-tour[data-step="3"] .pv-1,
.capture-tour[data-step="3"] .pv-3,
.capture-tour[data-step="4"] .pv-1,
.capture-tour[data-step="4"] .pv-2 { opacity: 1; }

.spot-ring {
  position: absolute;
  left: var(--px);
  width: var(--pw);
  top: var(--p1y);
  height: var(--p1h);
  border: 1.5px solid rgba(249, 38, 114, 0.65);
  border-radius: 10px;
  box-shadow: 0 0 36px rgba(249, 38, 114, 0.22);
  opacity: 0;
  transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.capture-tour[data-step="2"] .spot-ring { opacity: 1; top: var(--p1y); height: var(--p1h); }
.capture-tour[data-step="3"] .spot-ring { opacity: 1; top: var(--p2y); height: var(--p2h); }
.capture-tour[data-step="4"] .spot-ring { opacity: 1; top: var(--p3y); height: var(--p3h); }

.tour-steps {
  position: relative;
  margin-top: -100vh;
  z-index: 2;
  pointer-events: none;

  /* Trailing room for the sticky shot. Without it the sticky box reaches the
     bottom of its constraint rect at exactly the scroll position where step
     06 arrives at centre, so 06 was the one card that read against a shot
     sliding up behind the nav. 60vh keeps the shot pinned through 06's whole
     active window and then releases it — that release IS the handoff into the
     output wall below.

     The spacer lives here rather than as padding-bottom on .capture-tour
     because Chromium clamps a sticky box to its containing block's CONTENT
     box, so padding on the ancestor buys no travel at all. */
  padding-bottom: 35vh;
}

.tour-step {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* A crisp opening beat: the workspace shows unblurred for most of a
   screen's scroll before the first step card (and first veil) arrives. */
.tour-step[data-step="1"] { margin-top: 70vh; }

/* Light paper cards (echoing the welcome page) so the steps pop against
   the dark workspace instead of dissolving into it. */
.tour-card {
  pointer-events: auto;
  width: min(500px, 86vw);
  background: rgba(246, 243, 237, 0.97);
  border: 1px solid rgba(246, 243, 237, 0.4);
  border-radius: var(--r-lg);
  padding: 32px 36px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
  color: #16161A;
  text-align: center;
  opacity: 0.55;
  transform: scale(0.98);
  transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.4s ease;
}

.capture-tour[data-step="1"] .tour-step[data-step="1"] .tour-card,
.capture-tour[data-step="2"] .tour-step[data-step="2"] .tour-card,
.capture-tour[data-step="3"] .tour-step[data-step="3"] .tour-card,
.capture-tour[data-step="4"] .tour-step[data-step="4"] .tour-card,
.capture-tour[data-step="5"] .tour-step[data-step="5"] .tour-card,
.capture-tour[data-step="6"] .tour-step[data-step="6"] .tour-card,
.capture-tour[data-step="7"] .tour-step[data-step="7"] .tour-card {
  opacity: 1;
  transform: scale(1);
  border-color: rgba(249, 38, 114, 0.45);
}

.tour-kicker {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin-bottom: 10px;
}

.tour-card h3 { font-size: 28px; letter-spacing: -0.015em; margin-bottom: 10px; color: #16161A; }
.tour-card p  { color: #52525C; font-size: 17px; }

/* In-product terms get the accent so they read as parts of the tool. */
/* One treatment for every app name in the tour copy — controls (New
   Capture, Tidy page, Save Session) and concepts (Scene, preset) alike:
   the plain pink text. Jeff tried a gradient-ribbon chip for controls
   (2026-08-15) and preferred the text. */
.tour-term { color: #E8175D; font-weight: 700; }

/* Spec strip: the concrete details that make the step feel real —
   actual preset ratios, actual output filenames. */
.tour-spec {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(22, 22, 26, 0.14);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #8A8A94;
  overflow-wrap: anywhere;
}

/* =========================================================================
   Output wall — the payoff section. Multi-column masonry so cells keep their
   true aspect ratios: nothing here is cropped to fit a grid, because the
   product's whole claim is exact pixels. Captions carry the destination.
   ========================================================================= */

.output-wall {
  columns: 3;
  column-gap: var(--s-24);
  margin-bottom: var(--s-96);
}

.out-cell {
  break-inside: avoid;
  margin: 0 0 var(--s-24);
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: border-color var(--t-short) var(--ease-move),
              transform var(--t-short) var(--ease-move);
}

.out-cell:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.out-cell > img,
.out-cell > video {
  display: block;
  width: 100%;
  height: auto;
}

.out-cell figcaption {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--s-16) var(--s-16) 18px;
  border-top: 1px solid var(--border-subtle);
}

.out-cell figcaption strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg-1);
  letter-spacing: -0.01em;
}

.out-cell figcaption span {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Tidy: two files stacked, because the difference between them IS the point. */
.out-pair { display: flex; flex-direction: column; gap: 1px; }
.out-pair > div { position: relative; }
.out-pair img { display: block; width: 100%; height: auto; }
.out-pair-tag {
  position: absolute;
  bottom: var(--s-8);
  left: var(--s-8);
  padding: 3px 8px;
  border-radius: var(--r-sm);
  background: rgba(8, 8, 11, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Full-page still: a 424×2300 export would blow the column out, so it runs
   tall and fades instead of being cropped — the fade says "keeps going",
   which is exactly what the caption claims. */
.out-fade {
  position: relative;
  max-height: 560px;
  overflow: hidden;
}
.out-fade img { display: block; width: 100%; height: auto; }
.out-fade::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 140px;
  background: linear-gradient(to bottom, rgba(14, 14, 19, 0), var(--bg-1));
  pointer-events: none;
}

/* =========================================================================
   Spec strip — the facts that used to be a six-card feature grid. Dense,
   mono-labelled rows; the wall above already did the persuading.
   ========================================================================= */

/* Datasheet rows (bold-variant graft): full-width ruled table, one fact
   per row. Shared by the spec strip and the pricing terms. */
.spec-strip {
  display: block;
  margin: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.spec-strip > div {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: start;
  border-bottom: 1px solid var(--border);
  transition: background var(--t-short);
}

.spec-strip > div:last-child { border-bottom: none; }
.spec-strip > div:hover { background: var(--bg-1); }

.spec-strip dt {
  padding: var(--s-24);
  border-right: 1px solid var(--border);
  align-self: stretch;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  transition: color var(--t-short);
}

.spec-strip > div:hover dt { color: var(--accent-bright); }

.spec-strip dd {
  margin: 0;
  padding: var(--s-24);
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-2);
}

.spec-strip dd a { color: var(--accent); text-decoration: none; }

/* =========================================================================
   Colophon — sits under pricing on purpose and stays out of the nav; it
   underwrites the terms rather than being a destination of its own.
   ========================================================================= */

.colophon {
  padding-top: var(--s-32);
  padding-bottom: var(--s-96);
}

.colophon-inner {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--s-32);
  align-items: start;
  max-width: 760px;
  padding-top: var(--s-32);
  border-top: 1px solid var(--border);
}

.colophon-mark { width: 40px; height: 40px; }

.colophon .eyebrow { margin-bottom: var(--s-16); }

.colophon p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg-2);
  margin-bottom: var(--s-16);
}

@media (max-width: 1100px) {
  .output-wall { columns: 2; }
  .spec-strip > div { grid-template-columns: 160px 1fr; }
}

@media (max-width: 720px) {
  .output-wall { columns: 1; }
  .spec-strip > div { grid-template-columns: 1fr; }
  .spec-strip dt { border-right: none; padding-bottom: 0; }
  .colophon-inner { grid-template-columns: 1fr; gap: var(--s-24); }
}

/* Narrow screens: no room for a spotlight over a 1400px UI — the four
   screens stack once as plain images, the cards stack plainly below. */
@media (max-width: 900px) {
  .tour-steps { padding-bottom: 0; }
  .tour-sticky { position: static; height: auto; padding: var(--s-48) var(--s-24) 0; }
  .panel-veil, .spot-ring { display: none; }
  .tour-shot {
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    width: min(1240px, 92vw);
  }
  .tour-shot img {
    border-radius: var(--r-lg);
    border: 1px solid var(--border-strong);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  }
  .tour-layer { position: static; opacity: 1; margin-top: 14px; }
  .tour-steps { margin-top: 0; }
  .tour-step { height: auto; justify-content: center; padding: 18px var(--s-24); }
  .tour-card { opacity: 1; transform: none; }
}

/* Hero subheading: the fixed "Load one URL, export at" prefix with the
   rotating spec detail — a readout under the statement. */
.hero-sub {
  margin: 18px 0 0;
  font-size: clamp(19px, 2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--fg-2);
  min-height: 1.3em;
}
#hero-out { display: inline-block; will-change: transform, opacity; white-space: nowrap; }
@media (max-width: 600px) {
  #hero-out { white-space: normal; }
}