.variant-v2 {
  --ig-canvas: oklch(97.5% 0.004 285);
  --ig-surface: oklch(99.5% 0.002 285);
  --ig-soft: oklch(94.5% 0.008 285);
  --ig-line: oklch(86% 0.012 285);
  --ig-text: oklch(19% 0.018 285);
  --ig-muted: oklch(48% 0.018 285);
  --ig-blue: oklch(63% 0.18 245);
  --ig-blue-hover: oklch(56% 0.19 245);
  --ig-magenta: oklch(58% 0.25 345);
  --ig-orange: oklch(72% 0.18 55);
  --ig-green: oklch(62% 0.15 150);
  --ig-gradient: linear-gradient(135deg, var(--ig-orange), var(--ig-magenta) 52%, oklch(55% 0.22 285));
  --reel-a: oklch(58% 0.21 335);
  --reel-b: oklch(36% 0.16 270);
  --reel-c: oklch(70% 0.16 55);
  --reel-d: oklch(42% 0.17 350);
  --ig-shadow: 0 0.125rem 0.5rem oklch(19% 0.018 285 / 8%);
  --color-bg: var(--ig-canvas);
  --color-bg-deep: var(--ig-canvas);
  --color-surface: var(--ig-surface);
  --color-surface-raised: var(--ig-soft);
  --color-text: var(--ig-text);
  --color-muted: var(--ig-muted);
  --color-faint: var(--ig-muted);
  --color-action: var(--ig-blue);
  --color-action-hover: var(--ig-blue-hover);
  --color-action-ink: oklch(99% 0.002 285);
  --color-border: var(--ig-line);
  --color-border-strong: oklch(73% 0.02 285);
  --color-success: var(--ig-green);
  --color-focus: oklch(61% 0.2 245);
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color-scheme: light;
  min-width: 0;
  background: var(--ig-canvas);
  color: var(--ig-text);
}

.variant-v2 .site-header {
  position: sticky;
  top: 0;
  width: 100%;
  min-height: 4rem;
  padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2));
  border-bottom: var(--border) solid var(--ig-line);
  background: color-mix(in oklch, var(--ig-surface) 94%, transparent);
  backdrop-filter: blur(1rem);
}

.variant-v2 .brand {
  gap: var(--space-2);
  font-family: var(--font-body);
  font-style: normal;
}
.variant-v2 .ig-nav { margin-inline: auto; }

.variant-v2 .review-switcher { font-family: var(--font-body); font-weight: 700; }
.variant-v2 .review-switcher a { border-radius: var(--radius-sm); background: var(--ig-surface); }
.variant-v2 .review-switcher a[aria-current="page"] { background: var(--ig-text); color: var(--ig-surface); }

.variant-v2 .hero {
  display: block;
  width: min(calc(100% - 2 * var(--gutter)), 62rem);
  min-height: auto;
  padding-block: var(--space-8) var(--space-5);
}

.variant-v2 .profile-intro {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}

.variant-v2 .profile-avatar {
  display: grid;
  width: 11rem;
  height: 11rem;
  padding: 0.375rem;
  place-items: center;
  border-radius: 50%;
  background: var(--ig-gradient);
}

.variant-v2 .profile-avatar span {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  border: 0.25rem solid var(--ig-surface);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, oklch(38% 0.12 285), var(--ig-text) 64%);
  color: var(--ig-surface);
  font-size: 3.5rem;
  font-weight: 800;
  letter-spacing: -0.08em;
}

.variant-v2 .eyebrow,
.variant-v2 .scene-index,
.variant-v2 .phase-status,
.variant-v2 .result-label,
.variant-v2 .tool-name {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
}

.variant-v2 .profile-copy .eyebrow { margin-bottom: var(--space-2); color: var(--ig-text); }
.variant-v2 h1 {
  max-width: 15ch;
  margin-bottom: var(--space-4);
  font-size: clamp(2.75rem, 2rem + 3vw, 4.75rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.055em;
}
.variant-v2 .hero-copy { max-width: 42rem; margin-bottom: var(--space-5); color: var(--ig-muted); }
.variant-v2 .primary-link { border-radius: var(--radius-sm); background: var(--ig-blue); color: var(--color-action-ink); }

.variant-v2 .profile-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin: 0 0 var(--space-5);
}
.variant-v2 .profile-stats div { min-width: 0; }
.variant-v2 .profile-stats dt { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.variant-v2 .profile-stats dd { margin: 0; color: var(--ig-muted); font-size: var(--type-small); line-height: 1.35; }

.variant-v2 .story-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-5);
  max-width: 42rem;
  margin: var(--space-8) auto var(--space-6);
}
.variant-v2 .story-strip a { min-width: 0; color: var(--ig-text); text-align: center; text-decoration: none; }
.variant-v2 .story-strip strong { display: block; margin-top: var(--space-2); font-size: var(--type-small); }
.variant-v2 .story-ring {
  display: grid;
  width: 5rem;
  height: 5rem;
  margin-inline: auto;
  padding: 0.25rem;
  place-items: center;
  border-radius: 50%;
  background: var(--ig-gradient);
  transition: transform var(--duration-fast) var(--ease-out);
}
.variant-v2 .story-ring span {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  border: 0.1875rem solid var(--ig-surface);
  border-radius: 50%;
  background: var(--ig-soft);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.variant-v2 .profile-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: var(--border) solid var(--ig-line);
  color: var(--ig-muted);
  text-align: center;
  text-transform: uppercase;
}
.variant-v2 .profile-tabs span { padding: var(--space-4); font-size: var(--type-label); font-weight: 700; letter-spacing: 0.08em; }
.variant-v2 .profile-tabs .is-active { box-shadow: inset 0 0.125rem var(--ig-text); color: var(--ig-text); }

.variant-v2 .demo-scene { display: block; min-height: auto; padding-block: var(--space-9); }
.variant-v2 .product-shell { width: min(100%, 68rem); margin-inline: auto; }
.variant-v2 .tool-rail {
  display: grid;
  grid-template-columns: repeat(5, 2.75rem);
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  font-family: var(--font-body);
  font-size: var(--type-label);
  font-weight: 800;
}
.variant-v2 .tool-rail span {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 0.1875rem solid var(--ig-line);
  border-radius: 50%;
  background: var(--ig-surface);
  color: var(--ig-muted);
  font-variant-numeric: tabular-nums;
}
.variant-v2 .tool-rail .is-active {
  border-color: transparent;
  background: linear-gradient(var(--ig-surface), var(--ig-surface)) padding-box, var(--ig-gradient) border-box;
  color: var(--ig-text);
}

.variant-v2 .shell-canvas {
  display: grid;
  grid-template-columns: minmax(18rem, 0.85fr) minmax(0, 1.45fr);
  gap: var(--space-7);
  align-items: start;
}
.variant-v2 .scene-heading { position: sticky; top: 6rem; margin: 0; padding-top: var(--space-4); }
.variant-v2 .scene-heading h2 {
  margin-block: var(--space-3);
  font-size: clamp(2rem, 1.7rem + 1.1vw, 2.5rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.045em;
}
.variant-v2 .scene-heading > p:last-child { color: var(--ig-muted); line-height: 1.55; }
.variant-v2 .scene-index { color: var(--ig-magenta); }

.variant-v2 .stage {
  position: relative;
  padding: var(--space-5);
  border-color: var(--ig-line);
  border-radius: var(--radius-md);
  background: var(--ig-surface);
  box-shadow: var(--ig-shadow);
}
.variant-v2 .tool-name {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: var(--border) solid var(--ig-line);
  color: var(--ig-text);
}
.variant-v2 .tool-name::before {
  content: "AI";
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  flex: 0 0 auto;
  border: 0.125rem solid transparent;
  border-radius: 50%;
  background: linear-gradient(var(--ig-text), var(--ig-text)) padding-box, var(--ig-gradient) border-box;
  color: var(--ig-surface);
  font-size: 0.625rem;
  font-weight: 800;
}
.variant-v2 .tool-name::after { content: "•••"; margin-left: auto; color: var(--ig-muted); letter-spacing: 0.08em; }

.variant-v2 .prompt {
  margin-bottom: var(--space-4);
  padding: var(--space-4) calc(var(--space-8) + var(--space-2)) var(--space-4) var(--space-4);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--ig-soft);
}
.variant-v2 .prompt q { max-width: 60ch; margin-top: var(--space-2); font-size: var(--type-body); line-height: 1.55; }
.variant-v2 .prompt q::before, .variant-v2 .prompt q::after { color: var(--ig-muted); }
.variant-v2 .demo-send { inset: 50% var(--space-4) auto auto; background: var(--ig-surface); color: var(--ig-blue); transform: translateY(-50%); }
.variant-v2 .demo-send.is-sending { background: var(--ig-blue); color: var(--ig-surface); animation-name: send-pulse-v2; }
.variant-v2 .demo-send.is-sent { background: color-mix(in oklch, var(--ig-green) 14%, var(--ig-surface)); color: var(--ig-green); }
.variant-v2 [data-prompt].is-typing::after { background: var(--ig-blue); }
.variant-v2 .phase-status { color: var(--ig-green); }

.variant-v2 .result { margin-top: var(--space-4); }
.variant-v2 .result-part { padding-bottom: var(--space-4); border-bottom: var(--border) solid var(--ig-line); }
.variant-v2 .result-part:last-child { padding-bottom: 0; border-bottom: 0; }
.variant-v2 .result-label { color: var(--ig-muted); }
.variant-v2 .news-title, .variant-v2 .video-title { font-family: var(--font-body); font-weight: 800; }
.variant-v2 .facts li, .variant-v2 .chips li { background: var(--ig-soft); }
.variant-v2 .source-link { color: var(--ig-blue-hover); font-weight: 700; }
.variant-v2 .timer { color: var(--ig-text); font-family: var(--font-body); font-weight: 800; }
.variant-v2 .overrun { color: var(--ig-magenta); }

.variant-v2 .publish-proof {
  grid-template-columns: 7rem minmax(0, 1fr) auto;
  gap: var(--space-4) var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--ig-soft);
}
.variant-v2 .publish-proof.ig-publish-profile {
  display: block;
  padding: 0;
  background: var(--ig-surface);
}
.variant-v2 .ig-publish-profile .engagement-row {
  grid-column: auto;
  padding: 0 var(--space-4) var(--space-4);
}
.variant-v2 .reel-cover {
  position: relative;
  display: grid;
  grid-row: 1 / span 2;
  width: 7rem;
  height: 8.75rem;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: radial-gradient(circle at 70% 25%, var(--ig-orange), transparent 35%), var(--ig-gradient);
  color: var(--ig-surface);
}
.variant-v2 .reel-cover::before { content: ""; position: absolute; inset: 35% -20% -28% 18%; border-radius: 50%; background: oklch(18% 0.03 285 / 58%); transform: rotate(-18deg); }
.variant-v2 .reel-cover > * { position: relative; z-index: 1; }
.variant-v2 .reel-cover > span { position: absolute; top: var(--space-3); left: var(--space-3); font-size: 0.625rem; font-weight: 800; letter-spacing: 0.08em; }
.variant-v2 .reel-cover svg { width: 2rem; height: 2rem; fill: currentColor; }
.variant-v2 .reel-cover small { position: absolute; right: var(--space-2); bottom: var(--space-2); font-weight: 700; }
.variant-v2 .publish-copy strong { font-family: var(--font-body); font-size: var(--type-card); font-weight: 800; }
.variant-v2 .publish-copy p { margin: var(--space-1) 0 0; color: var(--ig-muted); font-size: var(--type-small); }
.variant-v2 .publish-metric span { color: var(--ig-magenta); font-family: var(--font-body); font-weight: 800; }
.variant-v2 .publish-metric small { color: var(--ig-muted); font-family: var(--font-body); }
.variant-v2 .view-wave { grid-column: 3; width: 6rem; }
.variant-v2 .view-wave span { background: var(--ig-blue); }
.variant-v2 .engagement-row {
  display: flex;
  grid-column: 2 / -1;
  flex-wrap: wrap;
  gap: var(--space-4);
  color: var(--ig-muted);
  font-size: var(--type-small);
  font-variant-numeric: tabular-nums;
}
.variant-v2 .engagement-row span { display: inline-flex; align-items: center; gap: var(--space-2); }
.variant-v2 .engagement-row svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.variant-v2 .replay, .variant-v2 .deep-link { border-radius: var(--radius-sm); }
.variant-v2 .replay { border-color: var(--ig-blue); background: var(--ig-blue); color: var(--ig-surface); }
.variant-v2 .deep-link { border-color: var(--ig-line); background: var(--ig-surface); color: var(--ig-text); }

.variant-v2 .final-cta {
  width: min(calc(100% - 2 * var(--gutter)), 42rem);
  margin-block: var(--space-9);
  padding: var(--space-8);
  border: var(--border) solid var(--ig-line);
  border-radius: var(--radius-md);
  background: var(--ig-surface);
  box-shadow: var(--ig-shadow);
}
.variant-v2 .final-cta::before {
  content: "AI";
  display: grid;
  width: 5rem;
  height: 5rem;
  margin: 0 auto var(--space-5);
  padding: 0.25rem;
  place-items: center;
  border: 0.25rem solid transparent;
  border-radius: 50%;
  background: linear-gradient(var(--ig-text), var(--ig-text)) padding-box, var(--ig-gradient) border-box;
  color: var(--ig-surface);
  font-size: 1.5rem;
  font-weight: 800;
}
.variant-v2 .final-cta h2 { font-family: var(--font-body); font-weight: 800; letter-spacing: -0.04em; }

@keyframes send-pulse-v2 { 0% { transform: translateY(-50%) scale(0.92); } 55% { transform: translateY(-50%) scale(1.08); } 100% { transform: translateY(-50%) scale(1); } }

@media (hover: hover) {
  .variant-v2 .primary-link:hover, .variant-v2 .replay:hover { background: var(--ig-blue-hover); }
  .variant-v2 .story-strip a:hover .story-ring { transform: translateY(-0.125rem); }
  .variant-v2 .story-strip a:hover strong { color: var(--ig-blue-hover); }
  .variant-v2 .deep-link:hover { border-color: var(--ig-text); }
}

@media (max-width: 48rem), (max-height: 43.75rem) {
  .variant-v2 .profile-intro { grid-template-columns: 8rem minmax(0, 1fr); gap: var(--space-6); }
  .variant-v2 .profile-avatar { width: 8rem; height: 8rem; }
  .variant-v2 .profile-avatar span { font-size: 2.5rem; }
  .variant-v2 .shell-canvas { display: block; }
  .variant-v2 .scene-heading { position: static; margin-bottom: var(--space-5); padding: 0; }
}

@media (max-width: 35rem) {
  .variant-v2 .site-header { align-items: center; padding-inline: var(--space-4); }
  .variant-v2 .brand { width: auto; justify-content: flex-start; }
  .variant-v2 .brand .ig-wordmark { font-size: 1.25rem; }
  .variant-v2 .brand .ig-product { display: none; }
  .variant-v2 .ig-nav { gap: 0; }
  .variant-v2 .ig-nav a { min-width: 2.75rem; padding-inline: var(--space-2); }
  .variant-v2 .review-switcher { display: none; }
  .variant-v2 .hero { padding-block: var(--space-7) var(--space-4); }
  .variant-v2 .profile-intro { display: block; }
  .variant-v2 .profile-avatar { width: 5.5rem; height: 5.5rem; margin-bottom: var(--space-5); }
  .variant-v2 .profile-avatar span { border-width: 0.1875rem; font-size: 1.75rem; }
  .variant-v2 h1 { max-width: 100%; font-size: clamp(2.5rem, 12vw, 3.25rem); }
  .variant-v2 .profile-stats { gap: var(--space-3); }
  .variant-v2 .profile-stats dt { font-size: 1rem; }
  .variant-v2 .profile-stats dd { font-size: var(--type-label); }
  .variant-v2 .story-strip { gap: var(--space-1); margin-block: var(--space-7) var(--space-5); }
  .variant-v2 .story-ring { width: 3rem; height: 3rem; }
  .variant-v2 .story-strip strong { font-size: .625rem; }
  .variant-v2 .profile-tabs span { padding-inline: var(--space-1); font-size: 0.625rem; }
  .variant-v2 .demo-scene { padding-block: var(--space-8); }
  .variant-v2 .tool-rail { grid-template-columns: repeat(5, 2.5rem); gap: var(--space-2); }
  .variant-v2 .tool-rail span { width: 2.5rem; height: 2.5rem; }
  .variant-v2 .stage { padding: var(--space-4); }
  .variant-v2 .prompt { padding-left: var(--space-3); }
  .variant-v2 .publish-proof:not(.ig-publish-profile) { grid-template-columns: 5rem minmax(0, 1fr); gap: var(--space-4); }
  .variant-v2 .reel-cover { grid-row: 1; width: 5rem; height: 6.5rem; }
  .variant-v2 .reel-cover > span { left: var(--space-2); font-size: 0.5rem; letter-spacing: 0; white-space: nowrap; }
  .variant-v2 .publish-copy { min-width: 0; }
  .variant-v2 .publish-copy strong { overflow-wrap: anywhere; font-size: 1.25rem; }
  .variant-v2 .publish-metric, .variant-v2 .view-wave, .variant-v2 .engagement-row { grid-column: 1 / -1; }
  .variant-v2 .publish-metric { text-align: left; }
  .variant-v2 .view-wave { width: 100%; }
  .variant-v2 .final-cta { padding: var(--space-6) var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
  .variant-v2 .story-strip a:hover .story-ring { transform: none; }
}

@media (max-width: 22rem) {
  .variant-v2 .site-header { padding-inline: var(--space-3); }
  .variant-v2 .brand .ig-wordmark { font-size: 1rem; }
}
