/* VibeGrow editorial workspace
   The app inherits the public site's paper, grid, editorial type, and working-session language. */

@font-face {
  font-family: "VibeGrow Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/VibeGrow-Inter.woff2") format("woff2");
}

@font-face {
  font-family: "VibeGrow Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/VibeGrow-Fraunces.woff2") format("woff2");
}

@font-face {
  font-family: "VibeGrow Fraunces";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/VibeGrow-Fraunces-Italic.woff2") format("woff2");
}

:root {
  --font-public-sans: "VibeGrow Inter", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-public-serif: "VibeGrow Fraunces", Fraunces, Georgia, "Times New Roman", serif;
  --paper: oklch(0.982 0.005 88);
  --paper-2: oklch(0.965 0.007 84);
  --paper-3: oklch(0.935 0.01 80);
  --ink: oklch(0.18 0.012 270);
  --ink-muted: oklch(0.4 0.012 270);
  --ink-dim: oklch(0.57 0.01 270);
  --rule: oklch(0.835 0.015 72);
  --rule-soft: oklch(0.9 0.01 76);
  --brand: oklch(0.7 0.21 22);
  --brand-soft: oklch(0.78 0.14 28);
  --good: oklch(0.5 0.14 145);
  --paper-shadow: 8px 9px 0 oklch(0.18 0.012 270 / 0.055);
  --sidebar-width: 258px;
  --chat-width: 780px;
  --content-width: 980px;
  --home-width: 1120px;

  --bg: var(--paper);
  --bg-2: var(--paper-2);
  --panel: var(--paper);
  --panel-2: var(--paper-2);
  --line: var(--rule);
  --soft-line: var(--rule-soft);
  --text: var(--ink);
  --muted: var(--ink-muted);
  --dim: var(--ink-dim);
  --accent: var(--brand);
  --accent-soft: var(--brand-soft);
  --action: var(--ink);
}

:root[data-theme="dark"] {
  --paper: oklch(0.115 0.009 270);
  --paper-2: oklch(0.14 0.01 270);
  --paper-3: oklch(0.18 0.012 270);
  --ink: oklch(0.96 0.006 88);
  --ink-muted: oklch(0.72 0.01 88);
  --ink-dim: oklch(0.53 0.01 88);
  --rule: oklch(0.29 0.012 270);
  --rule-soft: oklch(0.21 0.01 270);
  --brand: oklch(0.72 0.19 25);
  --brand-soft: oklch(0.79 0.14 30);
  --good: oklch(0.72 0.15 145);
  --paper-shadow: 8px 9px 0 oklch(0 0 0 / 0.25);
  --action: var(--ink);
}

body {
  font-family: var(--font-public-sans);
  color: var(--ink);
  background: var(--paper);
}

button:not(:disabled),
a[href],
[role="tab"] {
  cursor: pointer;
}

body::before {
  display: block;
  background:
    linear-gradient(oklch(from var(--ink) l c h / 0.045) 1px, transparent 1px),
    linear-gradient(90deg, oklch(from var(--ink) l c h / 0.045) 1px, transparent 1px);
  background-size: 55px 55px;
  opacity: 1;
  mask-image: none;
}

body::after {
  display: none;
}

.console-shell,
.console-grid {
  background: transparent;
}

.console-shell {
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}

/* Familiar, always-visible workspace navigation */

.console-topbar {
  position: relative;
  z-index: 30;
  gap: 0;
  padding: 18px 14px 14px;
  border-right: 1px solid var(--rule);
  background: oklch(from var(--paper) l c h / 0.93);
  backdrop-filter: blur(14px);
  font-family: var(--font-public-sans);
}

.product-switcher {
  margin: 0 0 16px;
}

.side-product {
  min-height: 42px;
  gap: 7px;
  padding: 4px 10px;
  border-radius: 3px;
}

.side-product:hover {
  background: var(--paper-2);
}

.brand-copy {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  text-align: left;
}

.brand-copy strong {
  font-size: 18px;
}

.vg-wordmark,
.public-wordmark,
.workspace-wordmark {
  font-family: var(--font-family-mono);
  font-weight: 600;
  letter-spacing: -0.008em;
}

.vg-wordmark {
  display: inline-flex;
  align-items: baseline;
}

.vg-cursor {
  display: block;
  width: 0.3em;
  height: 0.95em;
  margin-left: 0.072em;
  align-self: center;
  background: var(--brand);
  animation: vg-cursor-blink 1.1s steps(2, start) infinite;
}

.public-wordmark {
  font-size: 14px;
}

.brand-copy small {
  margin-top: 1px;
  font-family: var(--font-family-mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
}

.product-chevron {
  width: 14px;
  height: 14px;
  margin-left: auto;
  color: var(--ink);
  opacity: 0.82;
}

.side-nav {
  gap: 3px;
}

.side-nav-item {
  min-height: 38px;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--ink-muted);
  font-family: var(--font-public-sans);
  font-size: 15px;
  font-weight: 500;
}

.side-nav-item .icon {
  width: 14px;
  height: 14px;
  color: currentColor;
}

.side-nav-item:hover,
.side-nav-item[data-active="true"] {
  border-color: var(--rule-soft);
  color: var(--ink);
  background: var(--paper-2);
}

.side-nav-item[data-active="true"]::before {
  display: none;
}

.side-nav-item.primary {
  min-height: 42px;
  margin: 0 0 8px;
  border-color: var(--ink);
  color: var(--paper);
  background: var(--ink);
}

.side-nav-item.primary .icon {
  color: var(--brand-soft);
}

.side-nav-item.primary:hover,
.side-nav-item.primary[data-active="true"] {
  border-color: var(--ink);
  color: var(--paper);
  background: var(--ink);
  filter: brightness(1.08);
}

#historyButton {
  display: none;
}

.side-section-label {
  margin: 12px 10px 5px;
  font-family: var(--font-family-mono);
  font-size: 8px;
  font-weight: 560;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.side-footer {
  gap: 5px;
  margin-top: auto;
  padding-top: 11px;
  border-top-color: var(--rule-soft);
}

.pricing-pill,
.account-button,
.theme-toggle {
  border-radius: 3px;
}

.pricing-pill {
  min-height: 36px;
  padding: 7px 9px;
  border-color: transparent;
  font-size: 12px;
}

.pricing-pill:hover,
.account-button:hover,
.theme-toggle:hover {
  background: var(--paper-2);
}

.account-button {
  min-height: 38px;
  padding: 6px 7px;
}

.account-control {
  gap: 5px;
}

.theme-toggle {
  border-color: transparent;
}

.account-avatar {
  border-color: var(--rule);
  background: var(--paper-2);
}

.product-menu,
.account-menu,
.floating-menu,
.modal-panel {
  border-color: var(--rule);
  border-radius: 4px;
  background: var(--paper);
  box-shadow: var(--paper-shadow);
}

/* Recents live in the sidebar on desktop, like a real chat product. */

.side-chats {
  position: static;
  z-index: 34;
  display: flex;
  width: auto;
  min-height: 0;
  flex: 1;
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

.history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 6px;
}

.history-head .section-eyebrow {
  display: none;
}

.history-head h2 {
  margin: 0;
  font-family: var(--font-family-mono);
  font-size: 8px;
  font-weight: 560;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.history-head .icon-button {
  display: none;
}

.history-list {
  gap: 2px;
  padding: 0;
}

.history-list > .empty {
  padding: 8px 10px;
  font-size: 11px;
  color: var(--ink-dim);
}

.history-card {
  min-height: 44px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 3px;
}

.history-card:hover,
.history-card[data-active="true"] {
  border-color: var(--rule-soft);
  background: var(--paper-2);
}

.history-card-main strong {
  font-size: 13px;
  font-weight: 540;
}

.history-card-main small {
  font-family: var(--font-family-mono);
  font-size: 8.5px;
  color: var(--ink-dim);
}

/* Home is a useful conversation workspace, not a product poster. */

.conversation-panel,
.utility-panel {
  padding-right: 36px;
  padding-left: 36px;
}

body[data-view="home"] .conversation-panel {
  gap: 0;
  justify-content: flex-start;
  padding-top: 24px;
  padding-bottom: 20px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

body[data-view="home"] .conversation-head {
  order: 1;
  width: min(var(--home-width), 100%);
  align-items: center;
  flex: none;
  margin: 0 auto 16px;
  text-align: center;
}

body[data-view="home"] .conversation-title {
  width: 100%;
  text-align: center;
}

body[data-view="home"] #consoleTitle {
  margin: 0;
  font-family: var(--font-public-serif);
  font-size: clamp(39px, 4.4vw, 58px);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-transform: none;
  white-space: normal;
}

body[data-view="home"] #consoleTitle em {
  color: var(--brand);
  font-weight: 500;
}

body[data-view="home"] .conversation-subtitle {
  max-width: 900px;
  margin: 13px auto 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-muted);
}

body[data-view="home"] .run-controls,
body[data-view="home"] .chat-messages {
  display: none;
}

body[data-view="home"] .prompt-dock,
body[data-view="home"] .coordinator-field:not([hidden]) {
  width: min(var(--home-width), 100%);
}

body[data-view="home"] .prompt-dock {
  order: 2;
  flex: none;
  margin: 16px auto 0;
}

.prompt-dock {
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: oklch(from var(--paper) l c h / 0.94);
  box-shadow: var(--paper-shadow);
  backdrop-filter: blur(10px);
}

.prompt-dock::before {
  display: none;
}

.prompt-dock:focus-within {
  border-color: var(--brand);
  box-shadow: var(--paper-shadow), 0 0 0 3px oklch(from var(--brand) l c h / 0.09);
}

body[data-view="home"] .prompt-input {
  min-height: 72px;
  padding: 4px 5px 0;
  font-size: 16px;
}

.prompt-input-shell {
  position: relative;
  min-width: 0;
}

body[data-view="home"] .prompt-input-shell {
  min-height: 72px;
}

.prompt-demo {
  position: absolute;
  top: 4px;
  right: 5px;
  left: 5px;
  z-index: 1;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.5;
  color: oklch(from var(--ink-dim) l c h / 0.92);
  pointer-events: none;
  white-space: pre-wrap;
}

.prompt-demo::after {
  content: "";
  display: inline-block;
  width: 0.32em;
  height: 1em;
  margin-left: 0.12em;
  vertical-align: -0.14em;
  background: var(--brand);
  animation: vg-cursor-blink 1.1s steps(2, start) infinite;
}

.prompt-input-shell .prompt-input {
  position: relative;
  z-index: 2;
  width: 100%;
  background: transparent;
}

.prompt-input::placeholder {
  color: oklch(from var(--ink-dim) l c h / 0.9);
}

.composer-bar {
  gap: 8px;
}

.composer-bar .icon-button {
  width: 32px;
  height: 32px;
  border-color: var(--rule-soft);
  border-radius: 3px;
  color: var(--ink-muted);
  background: transparent;
}

.composer-bar .icon-button:hover {
  border-color: var(--rule);
  color: var(--ink);
  background: var(--paper-2);
}

.composer-mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 2px;
  font-family: var(--font-family-mono);
  font-size: 10px;
  letter-spacing: 0.03em;
  color: var(--ink-dim);
}

.composer-mode .icon {
  width: 11px;
  height: 11px;
  color: var(--brand);
}

.send-button {
  width: 34px;
  height: 34px;
  border-radius: 3px;
  color: var(--paper);
  background: var(--ink);
  box-shadow: none;
}

.send-button:hover:not(:disabled) {
  background: var(--ink);
  filter: brightness(1.08);
  transform: none;
}

/* A real sample session fills the page and teaches the product. */

body[data-view="home"] .starter-section {
  order: 3;
  display: flex;
  width: min(var(--home-width), 100%);
  min-height: 0;
  flex: 1;
  flex-direction: column;
  margin: 22px auto 0;
}

.session-preview-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex: none;
  margin-bottom: 12px;
}

.session-preview-head .section-eyebrow {
  margin: 0 0 4px;
  font-family: var(--font-family-mono);
  font-size: 9px;
  font-weight: 560;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
}

.session-preview-head h2 {
  margin: 0;
  font-family: var(--font-public-serif);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.session-tabs {
  display: flex;
  gap: 2px;
  flex: none;
}

.session-tabs button {
  position: relative;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--font-family-mono);
  font-size: 11px;
  color: var(--ink-dim);
}

.session-tabs button::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.session-tabs button:hover {
  color: var(--ink);
  background: var(--paper-2);
}

.session-tabs button[aria-selected="true"] {
  border-color: var(--rule);
  color: var(--ink);
  background: var(--paper-2);
}

.session-window {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: oklch(from var(--paper) l c h / 0.93);
  box-shadow: var(--paper-shadow);
  overflow: hidden;
  backdrop-filter: blur(8px);
}

.session-window-bar {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 18px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-family-mono);
  font-size: 10px;
  letter-spacing: 0.03em;
  color: var(--ink-dim);
}

.session-window-bar span:last-child {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--good);
}

.session-window-bar i,
.demo-delivery i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--good);
}

.demo-session {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  padding: 20px 24px 18px;
  overflow-y: auto;
}

.demo-session > * {
  flex: none;
}

.demo-user {
  align-self: flex-end;
  max-width: 72%;
  margin: 0;
  padding: 11px 15px;
  border: 1px solid var(--rule);
  border-radius: 10px 10px 2px 10px;
  background: var(--paper-2);
  font-size: 15px;
  line-height: 1.5;
}

.demo-user span {
  display: block;
  margin-bottom: 3px;
  font-family: var(--font-family-mono);
  font-size: 9px;
  color: var(--ink-dim);
}

.demo-assistant-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 17px;
}

.demo-assistant-head > span:last-child {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.demo-assistant-head strong {
  font-size: 15px;
  font-weight: 600;
}

.demo-assistant-head small {
  margin-top: 2px;
  font-family: var(--font-family-mono);
  font-size: 9px;
  color: var(--ink-dim);
}

.demo-route {
  margin: 11px 0 0;
  font-family: var(--font-family-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-dim);
}

.demo-summary {
  max-width: 820px;
  margin: 9px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-muted);
}

.demo-process {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr);
  align-items: stretch;
  margin: 18px 0 0;
  border: 1px solid var(--rule-soft);
  background: oklch(from var(--paper-2) l c h / 0.58);
  overflow: hidden;
}

.process-step {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 1px 6px;
  min-width: 0;
  min-height: 58px;
  padding: 11px 10px;
}

.process-step small {
  grid-row: 1 / 3;
  font-family: var(--font-family-mono);
  font-size: 9px;
  color: var(--ink-dim);
}

.process-step strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.process-step em {
  overflow: hidden;
  font-family: var(--font-family-mono);
  font-size: 9px;
  font-style: normal;
  color: var(--ink-dim);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.process-step[data-state="done"] small,
.process-step[data-state="active"] small {
  color: var(--brand);
}

.process-step[data-state="active"] {
  background: oklch(from var(--brand) l c h / 0.045);
}

.process-step[data-state="active"]::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
}

.process-arrow {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--rule-soft);
  border-left: 1px solid var(--rule-soft);
  font-family: var(--font-family-mono);
  font-size: 10px;
  color: var(--ink-dim);
}

.process-arrow::after {
  display: none;
}

.demo-findings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: 1fr;
  gap: 0;
  margin: 16px 0 15px;
  padding: 0;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  list-style: none;
}

.demo-findings li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 3px 9px;
  min-width: 0;
  padding: 12px 8px 12px 0;
}

.demo-findings li + li {
  padding-left: 14px;
  border-top: 0;
  border-left: 1px solid var(--rule-soft);
}

.demo-findings span {
  grid-row: 1 / 3;
  font-family: var(--font-family-mono);
  font-size: 10px;
  color: var(--brand);
}

.demo-findings strong {
  overflow: hidden;
  font-size: 14px;
  font-weight: 590;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-findings small {
  max-width: 860px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-dim);
}

.demo-delivery {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  margin-left: 0;
  padding: 8px 9px 8px 13px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
}

.demo-delivery > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-family: var(--font-family-mono);
  font-size: 11px;
}

.demo-delivery > span strong {
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-delivery > span em {
  overflow: hidden;
  font-size: 10px;
  font-style: normal;
  color: var(--ink-dim);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-delivery > small {
  font-family: var(--font-family-mono);
  font-size: 9px;
  color: var(--good);
}

.demo-delivery button {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  font-family: var(--font-family-mono);
  font-size: 9px;
  color: var(--paper);
  background: var(--ink);
}

.demo-delivery button:hover {
  filter: brightness(1.08);
}

/* The example is a workbench: brief -> trace -> artifact. */

body[data-view="home"] .conversation-panel {
  overflow-y: auto;
}

body[data-view="home"] .starter-section {
  flex: none;
}

.session-preview-head {
  align-items: flex-end;
  gap: 28px;
}

.session-preview-head > div:first-child {
  max-width: 470px;
}

.session-preview-head h2 {
  font-size: 30px;
  line-height: 1.05;
}

.session-preview-copy {
  max-width: 470px;
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-muted);
}

.session-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(610px, 56%);
  gap: 0;
  border: 1px solid var(--rule);
  background: oklch(from var(--paper) l c h / 0.86);
}

.session-tabs button {
  display: flex;
  min-width: 0;
  min-height: 58px;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 3px;
  padding: 8px 13px;
  border: 0;
  border-radius: 0;
  text-align: left;
}

.session-tabs button + button {
  border-left: 1px solid var(--rule-soft);
}

.session-tabs button strong {
  font-family: var(--font-public-sans);
  font-size: 13px;
  font-weight: 620;
  color: var(--ink-muted);
}

.session-tabs button span {
  overflow: hidden;
  max-width: 100%;
  font-family: var(--font-family-mono);
  font-size: 11px;
  color: var(--ink-dim);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-tabs button[aria-selected="true"] {
  border-color: transparent;
  color: var(--ink);
  background: var(--paper-2);
  box-shadow: none;
}

.session-tabs button[aria-selected="true"]::after {
  transform: scaleX(1);
}

.session-tabs button[aria-selected="true"] strong {
  color: var(--ink);
}

.workbench {
  --spot-x: 50%;
  --spot-y: 50%;
  position: relative;
  isolation: isolate;
  min-height: 420px;
  border: 1px solid var(--rule);
  background: oklch(from var(--paper) l c h / 0.94);
  box-shadow: var(--paper-shadow);
  overflow: hidden;
}

.workbench::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(circle 190px at var(--spot-x) var(--spot-y), oklch(from var(--brand) l c h / 0.085), transparent 72%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.workbench-panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.14fr) minmax(0, 1.55fr);
  min-height: 420px;
}

.workbench-panel::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 4;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--brand) 18%, var(--brand-soft) 50%, var(--brand) 82%, transparent 100%);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

.workbench-panel[hidden] {
  display: none;
}

.workbench-brief,
.workbench-trace,
.workbench-artifact {
  position: relative;
  min-width: 0;
  padding: 22px;
}

.workbench-brief,
.workbench-trace {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--rule);
}

.workbench-brief {
  background: oklch(from var(--paper-2) l c h / 0.68);
}

.workbench-trace {
  background: oklch(from var(--paper) l c h / 0.7);
}

.workbench-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--font-family-mono);
  font-size: 11px;
  font-weight: 560;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.workbench-kicker span {
  color: var(--brand);
}

.workbench-task {
  margin: 27px 0 0;
  font-family: var(--font-public-serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.025em;
}

.brief-facts {
  display: grid;
  gap: 0;
  margin: 25px 0 24px;
  border-top: 1px solid var(--rule-soft);
}

.brief-facts > div {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.brief-facts dt,
.brief-facts dd {
  margin: 0;
}

.brief-facts dt {
  font-family: var(--font-family-mono);
  font-size: 11px;
  color: var(--ink-dim);
}

.brief-facts dd {
  overflow: hidden;
  font-size: 13px;
  color: var(--ink-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brief-cta {
  display: inline-flex;
  width: 100%;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 0;
  padding: 0 13px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--paper);
  background: var(--ink);
}

.brief-cta span {
  font-family: var(--font-family-mono);
  color: var(--brand-soft);
  transition: transform 180ms ease;
}

.brief-cta:hover {
  filter: brightness(1.08);
}

.brief-cta:hover span {
  transform: translateX(3px);
}

.trace-list {
  display: grid;
  gap: 0;
  margin: 19px 0 0;
  padding: 0;
  list-style: none;
}

.trace-list li {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  min-height: 73px;
}

.trace-list li > span {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--brand);
  border-radius: 50%;
  font-family: var(--font-family-mono);
  font-size: 10px;
  color: var(--brand);
  background: var(--paper);
}

.trace-list li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 28px;
  bottom: 0;
  left: 13px;
  width: 1px;
  background: linear-gradient(var(--brand), var(--rule));
}

.trace-list strong,
.trace-list small {
  display: block;
}

.trace-list strong {
  padding-top: 2px;
  font-size: 14px;
  font-weight: 620;
}

.trace-list small {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-dim);
}

.workflow-visual {
  position: relative;
  min-height: 142px;
  margin-top: 15px;
  border: 1px solid var(--rule);
  background:
    linear-gradient(oklch(from var(--ink) l c h / 0.035) 1px, transparent 1px),
    linear-gradient(90deg, oklch(from var(--ink) l c h / 0.035) 1px, transparent 1px),
    var(--paper-2);
  background-size: 22px 22px;
  overflow: hidden;
}

.visual-trace-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin-top: 14px;
}

.visual-trace-list li {
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  min-height: 52px;
}

.visual-trace-list li > span {
  width: 24px;
  height: 24px;
  font-size: 9px;
}

.visual-trace-list li::after {
  display: none;
}

.visual-trace-list strong {
  padding-top: 0;
  font-size: 12px;
}

.visual-trace-list small {
  font-size: 10.5px;
}

/* Audit preview */

.visual-toolbar {
  display: flex;
  height: 25px;
  align-items: center;
  gap: 4px;
  padding: 0 7px;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--font-family-mono);
}

.visual-toolbar > span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-dim);
  opacity: 0.55;
}

.visual-toolbar strong {
  margin-left: 4px;
  font-size: 8px;
  font-weight: 500;
  color: var(--ink-muted);
}

.visual-toolbar em {
  margin-left: auto;
  font-size: 7px;
  font-style: normal;
  color: var(--ink-dim);
}

.audit-page-mini {
  position: absolute;
  top: 35px;
  right: 14px;
  bottom: 10px;
  left: 14px;
  padding: 12px;
  border: 1px solid var(--rule-soft);
  background: var(--paper);
  transform-origin: right center;
}

.audit-hero-mini {
  width: 65%;
}

.audit-hero-mini strong {
  display: block;
  font-family: var(--font-public-serif);
  font-size: 11px;
  line-height: 1.08;
}

.audit-hero-mini span,
.audit-hero-mini i {
  display: block;
  height: 3px;
  margin-top: 5px;
  background: var(--rule);
}

.audit-hero-mini i {
  width: 72%;
}

.audit-actions-mini {
  display: flex;
  gap: 5px;
  margin-top: 9px;
}

.audit-actions-mini b {
  padding: 4px 6px;
  border: 1px solid var(--rule);
  font-family: var(--font-family-mono);
  font-size: 6px;
  font-weight: 500;
}

.audit-actions-mini b:first-child {
  color: var(--paper);
  background: var(--ink);
}

.audit-proof-mini {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 11px;
}

.audit-proof-mini span {
  height: 13px;
  border: 1px dashed var(--rule);
}

.audit-focus {
  position: absolute;
  z-index: 3;
  padding: 2px 4px;
  border: 1px solid var(--brand);
  font-family: var(--font-family-mono);
  font-size: 6px;
  font-weight: 500;
  color: var(--brand);
  background: var(--paper);
}

.focus-message {
  top: 8px;
  left: 53%;
}

.focus-cta {
  top: 52px;
  left: 42%;
}

.focus-proof {
  right: 8px;
  bottom: 7px;
}

/* Campaign preview */

.campaign-visual {
  padding: 11px 12px;
}

.campaign-scale {
  display: flex;
  justify-content: space-between;
  padding-left: 57px;
  font-family: var(--font-family-mono);
  font-size: 7px;
  color: var(--ink-dim);
}

.campaign-lane {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  margin-top: 8px;
}

.campaign-lane > strong {
  font-family: var(--font-family-mono);
  font-size: 7px;
  font-weight: 500;
  color: var(--ink-muted);
}

.campaign-lane > span {
  position: relative;
  display: block;
  height: 17px;
  border: 1px solid var(--rule-soft);
  background: repeating-linear-gradient(90deg, transparent 0 13px, oklch(from var(--ink) l c h / 0.06) 13px 14px);
}

.campaign-lane i {
  position: absolute;
  top: 3px;
  height: 9px;
  border-radius: 1px;
  transform-origin: left;
}

.lane-owned i {
  background: oklch(from var(--good) l c h / 0.7);
}

.lane-owned i:first-child { left: 5%; width: 38%; }
.lane-owned i:last-child { left: 51%; width: 42%; }

.lane-rented i {
  background: oklch(from var(--brand) l c h / 0.72);
}

.lane-rented i:nth-child(1) { left: 1%; width: 21%; }
.lane-rented i:nth-child(2) { left: 36%; width: 31%; }
.lane-rented i:nth-child(3) { left: 76%; width: 20%; }

.lane-borrowed i {
  background: oklch(0.68 0.14 250 / 0.72);
}

.lane-borrowed i:first-child { left: 16%; width: 28%; }
.lane-borrowed i:last-child { left: 58%; width: 34%; }

.campaign-return {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 9px;
  font-family: var(--font-family-mono);
  font-size: 7px;
  color: var(--ink-dim);
}

.campaign-return b {
  color: var(--brand);
}

.campaign-return strong {
  padding: 3px 5px;
  border: 1px solid oklch(from var(--good) l c h / 0.35);
  color: var(--good);
}

/* Outreach preview */

.outreach-visual {
  padding: 10px;
}

.signal-filter {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-family-mono);
  font-size: 7px;
  color: var(--ink-dim);
}

.signal-filter span {
  padding: 3px 5px;
  color: var(--paper);
  background: var(--ink);
}

.signal-filter strong {
  font-weight: 500;
  color: var(--brand);
}

.prospect-signals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-top: 9px;
}

.prospect-signals > span {
  min-width: 0;
  padding: 7px 6px;
  border: 1px solid var(--rule-soft);
  background: var(--paper);
}

.prospect-signals i {
  display: block;
  width: 5px;
  height: 5px;
  margin-bottom: 5px;
  border-radius: 50%;
  background: var(--ink-dim);
}

.prospect-signals strong,
.prospect-signals small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prospect-signals strong {
  font-size: 8px;
}

.prospect-signals small {
  margin-top: 2px;
  font-size: 6.5px;
  color: var(--ink-dim);
}

.prospect-signals > span:first-child {
  border-color: var(--brand);
  background: oklch(from var(--brand) l c h / 0.045);
}

.prospect-signals > span:first-child i {
  background: var(--brand);
}

.message-preview-mini {
  margin-top: 7px;
  padding: 7px 8px;
  border-left: 2px solid var(--brand);
  background: var(--paper);
}

.message-preview-mini span {
  font-family: var(--font-family-mono);
  font-size: 6px;
  color: var(--brand);
  text-transform: uppercase;
}

.message-preview-mini p {
  overflow: hidden;
  margin: 3px 0 0;
  font-size: 7.5px;
  line-height: 1.3;
  color: var(--ink-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workbench-artifact {
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(oklch(from var(--ink) l c h / 0.03) 1px, transparent 1px),
    var(--paper);
  background-size: 100% 44px;
}

.artifact-head {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.artifact-head > div {
  min-width: 0;
}

.artifact-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex: none;
}

.artifact-replay {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  flex: none;
  border: 1px solid var(--rule);
  border-radius: 50%;
  color: var(--ink-dim);
  background: var(--paper);
}

.artifact-replay .icon {
  width: 12px;
  height: 12px;
}

.artifact-replay:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.artifact-head > div > strong {
  display: block;
  overflow: hidden;
  margin-top: 8px;
  font-family: var(--font-family-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-badge {
  position: relative;
  display: inline-flex;
  min-height: 28px;
  flex: none;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border: 1px solid oklch(from var(--good) l c h / 0.35);
  border-radius: 999px;
  font-family: var(--font-family-mono);
  font-size: 10px;
  color: var(--good);
  background: oklch(from var(--good) l c h / 0.06);
}

.review-badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--good);
}

.artifact-summary {
  margin-top: 17px;
  padding: 14px 16px;
  border-left: 2px solid var(--brand);
  background: oklch(from var(--paper-2) l c h / 0.76);
}

.artifact-summary > span,
.artifact-experiment > span {
  font-family: var(--font-family-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
}

.artifact-summary h3 {
  margin: 6px 0 0;
  font-family: var(--font-public-serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.artifact-summary p {
  margin: 7px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-muted);
}

.artifact-findings {
  display: grid;
  margin: 13px 0 0;
  padding: 0;
  border-top: 1px solid var(--rule-soft);
  list-style: none;
}

.artifact-findings li {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  gap: 9px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.artifact-findings li > span {
  padding-top: 2px;
  font-family: var(--font-family-mono);
  font-size: 10px;
  color: var(--brand);
}

.finding-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.finding-head strong {
  font-size: 13px;
  font-weight: 620;
}

.finding-head em {
  flex: none;
  font-family: var(--font-family-mono);
  font-size: 10px;
  font-style: normal;
  color: var(--brand);
}

.artifact-findings p {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-dim);
}

.artifact-experiment {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
}

.artifact-experiment p {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-muted);
}

.artifact-footer {
  margin-top: auto;
  padding-top: 12px;
  font-family: var(--font-family-mono);
  font-size: 11px;
  color: var(--ink-dim);
}

.artifact-footer b {
  font: inherit;
  font-weight: 600;
  color: var(--ink-muted);
}

.artifact-footer i {
  padding: 0 5px;
  font-style: normal;
  color: var(--brand);
}

/* Proof in motion: one causal playback, then a readable final state. */

.workbench-panel.is-playing::after {
  animation: workbench-route 2.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.workbench-panel.is-playing .workbench-brief {
  animation: workbench-region-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.workbench-panel.is-playing .workflow-visual {
  animation: workbench-region-in 420ms cubic-bezier(0.22, 1, 0.36, 1) 320ms both;
}

.workbench-panel.is-playing .visual-trace-list li {
  animation: trace-node-in 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.workbench-panel.is-playing .visual-trace-list li:nth-child(1) { animation-delay: 720ms; }
.workbench-panel.is-playing .visual-trace-list li:nth-child(2) { animation-delay: 960ms; }
.workbench-panel.is-playing .visual-trace-list li:nth-child(3) { animation-delay: 1200ms; }
.workbench-panel.is-playing .visual-trace-list li:nth-child(4) { animation-delay: 1440ms; }

.workbench-panel.is-playing .visual-trace-list li > span {
  animation: trace-node-pulse 420ms ease-out both;
}

.workbench-panel.is-playing .visual-trace-list li:nth-child(1) > span { animation-delay: 760ms; }
.workbench-panel.is-playing .visual-trace-list li:nth-child(2) > span { animation-delay: 1000ms; }
.workbench-panel.is-playing .visual-trace-list li:nth-child(3) > span { animation-delay: 1240ms; }
.workbench-panel.is-playing .visual-trace-list li:nth-child(4) > span { animation-delay: 1480ms; }

.workbench-panel.is-playing .workbench-artifact {
  animation: artifact-sheet-in 480ms cubic-bezier(0.22, 1, 0.36, 1) 1560ms both;
}

.workbench-panel.is-playing .artifact-summary,
.workbench-panel.is-playing .artifact-findings li,
.workbench-panel.is-playing .artifact-experiment,
.workbench-panel.is-playing .artifact-footer {
  animation: artifact-piece-in 260ms ease-out both;
}

.workbench-panel.is-playing .artifact-summary { animation-delay: 1820ms; }
.workbench-panel.is-playing .artifact-findings li:nth-child(1) { animation-delay: 2020ms; }
.workbench-panel.is-playing .artifact-findings li:nth-child(2) { animation-delay: 2140ms; }
.workbench-panel.is-playing .artifact-findings li:nth-child(3) { animation-delay: 2260ms; }
.workbench-panel.is-playing .artifact-experiment { animation-delay: 2390ms; }
.workbench-panel.is-playing .artifact-footer { animation-delay: 2500ms; }

.workbench-panel.is-playing .review-badge::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid var(--good);
  border-radius: inherit;
  animation: review-ready-ring 740ms ease-out 2500ms both;
  pointer-events: none;
}

.workbench-panel.is-playing .audit-page-mini {
  animation: audit-viewport 920ms cubic-bezier(0.22, 1, 0.36, 1) 430ms both;
}

.workbench-panel.is-playing .audit-focus {
  animation: visual-pin-in 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.workbench-panel.is-playing .focus-message { animation-delay: 600ms; }
.workbench-panel.is-playing .focus-cta { animation-delay: 880ms; }
.workbench-panel.is-playing .focus-proof { animation-delay: 1160ms; }

.workbench-panel.is-playing .campaign-lane i {
  animation: campaign-block-in 560ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.workbench-panel.is-playing .lane-owned i { animation-delay: 480ms; }
.workbench-panel.is-playing .lane-rented i { animation-delay: 720ms; }
.workbench-panel.is-playing .lane-borrowed i { animation-delay: 960ms; }
.workbench-panel.is-playing .campaign-return { animation: artifact-piece-in 300ms ease-out 1250ms both; }

.workbench-panel.is-playing .prospect-signals > span {
  animation: prospect-card-in 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.workbench-panel.is-playing .prospect-signals > span:nth-child(1) { animation-delay: 500ms; }
.workbench-panel.is-playing .prospect-signals > span:nth-child(2) { animation-delay: 650ms; }
.workbench-panel.is-playing .prospect-signals > span:nth-child(3) { animation-delay: 800ms; }
.workbench-panel.is-playing .message-preview-mini { animation: artifact-piece-in 340ms ease-out 1120ms both; }

.trace-list li,
.artifact-findings li {
  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.trace-list li:hover,
.trace-list li:focus-within,
.artifact-findings li:hover,
.artifact-findings li:focus-within {
  background: oklch(from var(--brand) l c h / 0.04);
  transform: translateX(2px);
}

.trace-list li:hover > span,
.trace-list li:focus-within > span {
  color: var(--paper);
  background: var(--brand);
}

@media (hover: hover) and (pointer: fine) {
  .workbench:hover::before {
    opacity: 1;
  }
}

@keyframes workbench-route {
  0% { opacity: 0; transform: scaleX(0); }
  12% { opacity: 1; }
  72% { opacity: 0.85; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}

@keyframes workbench-region-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes trace-node-in {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes trace-node-pulse {
  0% { box-shadow: 0 0 0 0 oklch(from var(--brand) l c h / 0); transform: scale(0.78); }
  45% { box-shadow: 0 0 0 6px oklch(from var(--brand) l c h / 0.12); transform: scale(1.08); }
  100% { box-shadow: 0 0 0 0 oklch(from var(--brand) l c h / 0); transform: scale(1); }
}

@keyframes artifact-sheet-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes artifact-piece-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes review-ready-ring {
  0% { opacity: 0; transform: scale(0.92); }
  35% { opacity: 0.85; }
  100% { opacity: 0; transform: scale(1.2); }
}

@keyframes audit-viewport {
  0% { opacity: 0; transform: translateY(5px) scaleX(0.92); }
  45% { opacity: 1; transform: translateY(0) scaleX(1); }
  70% { transform: translateY(0) scaleX(0.78); }
  100% { opacity: 1; transform: translateY(0) scaleX(1); }
}

@keyframes visual-pin-in {
  from { opacity: 0; transform: translateY(4px) scale(0.86); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes campaign-block-in {
  from { opacity: 0; transform: scaleX(0); }
  to { opacity: 1; transform: scaleX(1); }
}

@keyframes prospect-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* The real chat stays familiar and uncluttered. */

body[data-view="chat"] .conversation-panel {
  display: flex;
  padding-top: 0;
  padding-bottom: 22px;
  overflow-y: auto;
}

body[data-view="chat"] .conversation-head {
  width: min(var(--chat-width), 100%);
  min-height: 64px;
  align-items: center;
  margin: 0 auto;
  padding: 12px 2px;
  border-bottom: 1px solid var(--rule-soft);
}

body[data-view="chat"] #consoleTitle {
  font-size: 14px;
  font-weight: 590;
}

body[data-view="chat"] .conversation-subtitle {
  margin-top: 2px;
  font-family: var(--font-family-mono);
  font-size: 9px;
  color: var(--ink-dim);
}

.status-pill,
.connection-pill {
  border-color: var(--rule);
  border-radius: 2px;
  background: var(--paper);
}

.connection-pill {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-messages {
  width: min(var(--chat-width), 100%);
  gap: 28px;
  padding: 26px 3px 22px;
}

.load-earlier-messages {
  align-self: center;
  padding: 7px 11px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink-dim);
  background: var(--paper);
  font-family: var(--font-family-mono);
  font-size: 10px;
}

.load-earlier-messages:hover:not(:disabled) {
  color: var(--ink);
  background: var(--paper-2);
}

.message.user {
  align-items: flex-end;
}

.message.user .message-meta {
  display: none;
}

.message-meta strong {
  font-family: var(--font-family-body);
  font-size: 11px;
  font-weight: 590;
  letter-spacing: 0;
  text-transform: none;
}

.message.assistant .message-meta strong {
  color: var(--ink);
}

.message-body {
  font-size: 14px;
  line-height: 1.72;
}

.message.user .message-body {
  max-width: 82%;
  padding: 10px 13px;
  border: 1px solid var(--rule-soft);
  border-radius: 8px 8px 2px 8px;
  background: var(--paper-2);
}

.message-activity {
  border-color: var(--rule-soft);
  border-left-color: var(--brand);
  border-radius: 2px;
  background: var(--paper-2);
}

body[data-view="chat"] .prompt-dock {
  width: min(var(--chat-width), 100%);
  margin: 8px auto 0;
}

body[data-view="chat"] .prompt-input {
  min-height: 44px;
  padding: 2px 4px 0;
}

body[data-view="chat"] .prompt-input-shell {
  min-height: 44px;
}

/* Supporting surfaces */

.utility-panel {
  gap: 22px;
  padding-top: 42px;
}

.utility-head,
.customize-workspace {
  width: min(var(--content-width), 100%);
}

.utility-head {
  align-items: flex-end;
  margin: 0 auto;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}

.utility-head .section-eyebrow,
.panel-head .section-eyebrow {
  font-family: var(--font-family-mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
}

.utility-head h1 {
  font-family: var(--font-public-serif);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.utility-subtitle {
  color: var(--ink-muted);
}

.customize-workspace {
  margin-right: auto;
  margin-left: auto;
}

.customize-workspace {
  min-width: 0;
}

.customize-tabs {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--rule);
}

.customize-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 20px 0 0;
  color: var(--ink-dim);
  font-size: 13px;
  font-weight: 590;
  transition: color 150ms ease;
}

.customize-tab + .customize-tab {
  padding-left: 20px;
}

.customize-tab::after {
  content: "";
  position: absolute;
  right: 20px;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: transparent;
}

.customize-tab + .customize-tab::after {
  left: 20px;
}

.customize-tab:hover,
.customize-tab[aria-selected="true"] {
  color: var(--ink);
}

.customize-tab[aria-selected="true"]::after {
  background: var(--brand);
}

.customize-tab:focus-visible {
  outline: 1px solid var(--brand);
  outline-offset: -2px;
  border-radius: 2px;
}

.customize-tab-index,
.customize-tab-count {
  font-family: var(--font-family-mono);
  font-size: 9px;
}

.customize-tab-index {
  color: var(--brand);
}

.customize-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 1px solid var(--rule-soft);
  border-radius: 2px;
  background: var(--paper-2);
  color: var(--ink-muted);
}

.customize-view {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  min-width: 0;
  padding-top: 20px;
}

.customize-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.skill-search {
  display: flex;
  align-items: center;
  gap: 9px;
  width: min(390px, 100%);
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: oklch(from var(--paper) l c h / 0.9);
  color: var(--ink-dim);
  transition: border-color 150ms ease, background 150ms ease;
}

.skill-search:focus-within {
  border-color: var(--ink-muted);
  background: var(--paper);
}

.skill-search .icon {
  width: 14px;
  height: 14px;
}

.skill-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
}

.skill-search input::placeholder {
  color: var(--ink-dim);
}

.skill-filters {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--paper);
}

.skill-filters button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 11px;
  color: var(--ink-dim);
  font-size: 11px;
  font-weight: 560;
  white-space: nowrap;
}

.skill-filters button + button {
  border-left: 1px solid var(--rule-soft);
}

.skill-filters button:hover {
  color: var(--ink);
}

.skill-filters button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}

.skill-filters button span {
  font-family: var(--font-family-mono);
  font-size: 9px;
  color: currentColor;
  opacity: 0.72;
}

.customize-summary {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 0 0 13px;
  border-bottom: 1px solid var(--rule);
}

.customize-summary .section-eyebrow {
  margin: 0 0 3px;
  font-family: var(--font-family-mono);
  font-size: 8px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--brand);
}

.customize-summary h2 {
  margin: 0;
  font-family: var(--font-public-serif);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 0;
}

.section-state {
  flex: none;
  font-family: var(--font-family-mono);
  font-size: 9.5px;
  color: var(--ink-dim);
}

.skill-list {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.skill-category-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 9px;
}

.skill-category-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
}

.skill-category-count {
  font-family: var(--font-family-mono);
  font-size: 8.5px;
  color: var(--ink-dim);
  text-transform: uppercase;
}

.skill-grid,
.connector-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.skill-card,
.skill-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 88px;
  padding: 13px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: oklch(from var(--paper) l c h / 0.92);
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.skill-card:hover,
.skill-row:hover {
  border-color: var(--ink-dim);
  background: var(--paper);
}

.skill-card[data-status="ready"] {
  border-left: 3px solid var(--brand);
  box-shadow: 4px 5px 0 oklch(from var(--ink) l c h / 0.035);
}

.skill-card .skill-icon,
.skill-card .skill-glyph {
  width: 44px;
  height: 44px;
}

.skill-card .skill-icon {
  position: relative;
  flex: none;
  border: 0;
  border-radius: 10px;
  background: transparent;
  box-shadow: 0 2px 7px oklch(from var(--ink) l c h / 0.14);
  line-height: 0;
  transition: box-shadow 150ms ease, transform 150ms ease;
}

.skill-card .skill-glyph {
  display: block;
  border-radius: 10px;
  overflow: visible;
}

.skill-card:hover .skill-icon {
  box-shadow: 0 4px 10px oklch(from var(--ink) l c h / 0.19);
  transform: translateY(-1px);
}

.skill-card-main,
.skill-row-main {
  min-width: 0;
  flex: 1;
}

.skill-card-main strong,
.skill-row-main strong {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill-card-main small,
.skill-row-main small {
  display: -webkit-box;
  min-height: 32px;
  margin-top: 3px;
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 11px;
  line-height: 1.45;
  text-overflow: clip;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.skill-card-controls {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
}

.skill-card-controls .icon-button {
  width: 26px;
  height: 26px;
  border-color: transparent;
  background: transparent;
}

.skill-card-status {
  width: 52px;
  color: var(--ink-dim);
  font-family: var(--font-family-mono);
  font-size: 8px;
  text-align: right;
  text-transform: uppercase;
}

.skill-toggle {
  position: relative;
  width: 36px;
  height: 21px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper-3);
  flex: none;
  transition: border-color 150ms ease, background 150ms ease;
}

.skill-toggle:hover:not(:disabled) {
  border-color: var(--ink-muted);
}

.skill-toggle[aria-checked="true"] {
  border-color: var(--brand);
  background: var(--brand);
}

.skill-toggle:disabled {
  opacity: 0.48;
  cursor: wait;
}

.skill-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--ink-dim);
  transition: transform 150ms ease, background 150ms ease;
}

.skill-toggle[aria-checked="true"] .skill-toggle-thumb {
  background: oklch(0.985 0.004 88);
  transform: translateX(15px);
}

.skill-empty,
.connector-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 190px;
  padding: 24px;
  border: 1px dashed var(--rule);
  border-radius: 0;
  background: oklch(from var(--paper) l c h / 0.82);
  color: var(--ink-dim);
  text-align: center;
}

/* GitHub is a first-class connector card, same anatomy as My Browser. */
.github-connector-card {
  width: 100%;
  cursor: pointer;
  text-align: left;
}

.github-connector-card:hover {
  border-color: var(--ink-dim);
}

.github-mark-tile {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 2px 7px oklch(from var(--ink) l c h / 0.14);
}

.github-mark-tile .icon {
  width: 24px;
  height: 24px;
}

.gh-card-actions {
  display: inline-flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.gh-card-action {
  padding: 4px 8px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-muted);
  font-family: var(--font-family-mono);
  font-size: 10px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease;
}

.gh-card-action:hover {
  border-color: var(--ink-dim);
  color: var(--ink);
}

.gh-card-action.danger:hover {
  border-color: oklch(from var(--danger) l c h / 0.5);
  color: var(--danger);
}

.harness-login {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.harness-login code,
.harness-login input {
  min-width: 0;
  padding: 4px 7px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font: 11px var(--font-family-mono);
}

@media (max-width: 520px) {
  .connector-list .skill-row {
    flex-wrap: wrap;
  }

  .connector-list .gh-card-actions {
    width: 100%;
    padding-left: 56px;
    justify-content: flex-start;
  }
}

.github-menu-note {
  padding: 10px 12px;
  color: var(--ink-dim);
  font-family: var(--font-family-mono);
  font-size: 11px;
}

/* Connect-callback result: persistent until dismissed, above everything. */
.github-callback-banner {
  position: fixed;
  top: 14px;
  left: 50%;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--paper);
  box-shadow: 4px 5px 0 oklch(from var(--ink) l c h / 0.05);
  transform: translateX(-50%);
  color: var(--ink);
  font-family: var(--font-family-mono);
  font-size: 11.5px;
}

.github-callback-banner .banner-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 999px;
  background: var(--ink-dim);
}

.github-callback-banner[data-tone="ok"] .banner-dot {
  background: var(--good);
}

.github-callback-banner[data-tone="warning"] .banner-dot {
  background: var(--warning, orange);
}

.github-callback-banner[data-tone="error"] .banner-dot {
  background: var(--danger);
}

.skill-empty {
  grid-column: 1 / -1;
}

.skill-empty .empty-icon,
.connector-empty .empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: 4px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--brand);
}

.skill-empty strong,
.connector-empty strong {
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 650;
}

.skill-empty small,
.connector-empty small {
  max-width: 340px;
  color: var(--ink-dim);
  font-size: 11px;
}

.skill-empty .small-action {
  margin-top: 8px;
}

.tool-button,
.small-action {
  border-color: var(--rule);
  border-radius: 2px;
  background: var(--paper);
}

/* Responsive */

@media (max-width: 960px) {
  :root {
    --sidebar-width: 228px;
  }

  .conversation-panel,
  .utility-panel {
    padding-right: 24px;
    padding-left: 24px;
  }

  .customize-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .skill-search {
    width: 100%;
  }

  .skill-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .skill-filters button + button {
    border-left: 1px solid var(--rule-soft);
  }

  .skill-grid,
  .connector-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .side-chats {
    width: var(--sidebar-width);
  }

  .demo-findings small {
    font-size: 13px;
  }

  .demo-findings {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  .demo-findings li + li {
    padding-left: 0;
    border-top: 1px solid var(--rule-soft);
    border-left: 0;
  }

  .session-preview-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .session-preview-head > div:first-child {
    max-width: 620px;
  }

  .session-tabs {
    width: 100%;
  }

  .workbench,
  .workbench-panel {
    min-height: 0;
  }

  .workbench-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workbench-trace {
    border-right: 0;
  }

  .workbench-artifact {
    grid-column: 1 / -1;
    border-top: 1px solid var(--rule);
  }
}

@media (max-width: 760px) {
  .console-shell {
    grid-template-columns: 1fr;
    grid-template-rows: 64px minmax(0, 1fr);
  }

  .console-topbar {
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .product-switcher {
    flex: none;
    margin: 0 4px 0 0;
  }

  .side-product {
    width: 78px;
    min-height: 42px;
    justify-content: flex-start;
    padding: 0 7px;
  }

  .brand-copy small {
    display: none;
  }

  .brand-copy strong {
    font-size: 12px;
  }

  .product-chevron {
    display: none;
  }

  .side-nav {
    width: auto;
    flex-direction: row;
    align-items: center;
    gap: 2px;
  }

  .side-nav-item,
  .side-nav-item.primary {
    width: 40px;
    min-height: 40px;
    justify-content: center;
    margin: 0;
    padding: 0;
    border-color: transparent;
    color: var(--ink-muted);
    background: transparent;
  }

  .side-nav-item > span,
  .side-section-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .side-nav-item:hover,
  .side-nav-item[data-active="true"],
  .side-nav-item.primary:hover,
  .side-nav-item.primary[data-active="true"] {
    border-color: var(--rule);
    color: var(--ink);
    background: var(--paper-2);
    filter: none;
  }

  #historyButton {
    display: flex;
  }

  .side-footer {
    align-items: center;
    flex-direction: row;
    gap: 3px;
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
  }

  .pricing-pill,
  .account-button,
  .theme-toggle {
    width: 40px;
    min-height: 40px;
    justify-content: center;
    padding: 0;
  }

  .pricing-pill,
  .account-name {
    display: none;
  }

  .account-control {
    width: auto;
    flex-direction: row;
  }

  .product-menu {
    top: 52px;
    left: 0;
  }

  .account-menu {
    top: 52px;
    right: 0;
    bottom: auto;
    left: auto;
  }

  .side-chats {
    position: fixed;
    top: 72px;
    right: 10px;
    bottom: 10px;
    left: 10px;
    z-index: 60;
    width: auto;
    margin: 0;
    padding: 16px;
    border: 1px solid var(--rule);
    background: var(--paper);
    box-shadow: var(--paper-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-9px);
    pointer-events: none;
    transition: opacity 160ms ease, transform 180ms ease, visibility 0s linear 180ms;
  }

  .side-chats.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition-delay: 0s;
  }

  .history-head {
    padding: 0 0 12px;
    border-bottom: 1px solid var(--rule);
  }

  .history-head .section-eyebrow {
    display: block;
    margin: 0 0 4px;
    font-family: var(--font-family-mono);
    font-size: 8px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand);
  }

  .history-head h2 {
    font-family: var(--font-public-serif);
    font-size: 20px;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--ink);
  }

  .history-head .icon-button {
    display: inline-flex;
  }

  .history-list {
    padding-top: 10px;
  }

  .conversation-panel,
  .utility-panel {
    padding-right: 18px;
    padding-left: 18px;
  }

  body[data-view="home"] .conversation-panel {
    padding-top: 24px;
    padding-bottom: 30px;
    overflow-y: auto;
  }

  body[data-view="home"] .conversation-head {
    order: 1;
  }

  body[data-view="home"] .prompt-dock {
    order: 2;
    margin: 0 auto;
  }

  body[data-view="home"] .starter-section {
    order: 3;
    flex: none;
    margin: 28px auto 0;
  }

  body[data-view="home"] #consoleTitle {
    font-size: 42px;
  }

  .session-preview-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .session-preview-head h2 {
    font-size: 28px;
  }

  .session-tabs {
    display: flex;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .session-tabs::-webkit-scrollbar {
    display: none;
  }

  .session-tabs button {
    flex: 0 0 178px;
  }

  .workbench-panel {
    grid-template-columns: 1fr;
  }

  .workbench-brief,
  .workbench-trace,
  .workbench-artifact {
    grid-column: 1;
    padding: 19px;
    border-right: 0;
  }

  .workbench-brief,
  .workbench-trace {
    border-bottom: 1px solid var(--rule);
  }

  .workbench-artifact {
    border-top: 0;
  }

  .workbench-task {
    max-width: 430px;
  }

  .trace-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
  }

  .trace-list li {
    min-height: 62px;
  }

  .trace-list li::after {
    display: none;
  }

  .demo-findings {
    grid-template-columns: 1fr;
  }

  .session-window {
    min-height: 0;
  }

  .demo-session {
    overflow: visible;
  }

  .demo-user {
    max-width: 92%;
  }

  .demo-route,
  .demo-summary,
  .demo-process,
  .demo-findings,
  .demo-delivery {
    margin-left: 0;
  }

  .demo-process {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .demo-process::-webkit-scrollbar {
    display: none;
  }

  .process-step {
    flex: 0 0 158px;
  }

  .process-arrow {
    flex: 0 0 28px;
  }

  .demo-findings li,
  .demo-findings li + li {
    padding: 10px 0;
    border-left: 0;
  }

  .demo-findings li + li {
    border-top: 1px solid var(--rule-soft);
  }

  .utility-panel {
    padding-top: 30px;
  }

  .utility-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .customize-summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .skill-card-status {
    display: none;
  }

  body[data-view="chat"] .run-controls .connection-pill,
  body[data-view="chat"] .run-controls #refreshJobs {
    display: none;
  }
}

@media (max-width: 520px) {
  .theme-toggle {
    display: none;
  }

  body[data-view="home"] #consoleTitle {
    font-size: 36px;
  }

  body[data-view="home"] .conversation-subtitle {
    font-size: 14.5px;
  }

  body[data-view="home"] .prompt-input {
    min-height: 78px;
  }

  .composer-mode {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .session-tabs {
    width: 100%;
  }

  .session-tabs button {
    flex: 0 0 158px;
  }

  .trace-list {
    grid-template-columns: 1fr;
  }

  .trace-list li:not(:last-child)::after {
    display: block;
  }

  .artifact-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .artifact-experiment {
    grid-template-columns: 1fr;
  }

  .session-window-bar span:last-child {
    display: none;
  }

  .demo-session {
    padding: 14px;
  }

  .demo-delivery {
    grid-template-columns: 1fr auto;
  }

  .demo-delivery > small {
    display: none;
  }

  .demo-delivery button {
    grid-column: 2;
    grid-row: 1;
  }

  .message.user .message-body {
    max-width: 94%;
  }
}

/* Simple capability gallery */

.capability-intro {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  text-align: center;
}

.capability-intro h2 {
  margin: 0;
  font-family: var(--font-public-serif);
  font-size: clamp(38px, 4.2vw, 54px);
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: -0.045em;
}

.capability-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  padding: 2px 2px 36px;
  overflow: visible;
}

.capability-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 490px;
  flex-direction: column;
  border: 1px solid var(--rule);
  border-radius: 13px;
  background: var(--paper);
  box-shadow: 0 14px 40px oklch(0 0 0 / 0.1);
  overflow: hidden;
  transform: translateY(0);
  transition: border-color 180ms ease, box-shadow 220ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  animation: capability-card-in 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.capability-card:nth-child(2) { animation-delay: 90ms; }
.capability-card:nth-child(3) { animation-delay: 180ms; }
.capability-card:nth-child(4) { animation-delay: 270ms; }
.capability-card:nth-child(5) { animation-delay: 360ms; }
.capability-card:nth-child(6) { animation-delay: 450ms; }

/* The gallery is part of the first paint. Keep its outer geometry fixed and
   reserve motion for the meaningful process animation inside each card. */
.showcase-card {
  opacity: 1;
  animation: none;
}

.capability-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 0%, oklch(from var(--brand) l c h / 0.09), transparent 45%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.capability-card:hover,
.capability-card:focus-within {
  border-color: oklch(from var(--brand) l c h / 0.55);
  box-shadow: 0 18px 55px oklch(0 0 0 / 0.18);
  transform: translateY(-4px);
}

.capability-card:hover::after,
.capability-card:focus-within::after {
  opacity: 1;
}

.capability-visual {
  position: relative;
  z-index: 1;
  min-height: 270px;
  border-bottom: 1px solid var(--rule);
  background:
    linear-gradient(oklch(from var(--ink) l c h / 0.035) 1px, transparent 1px),
    linear-gradient(90deg, oklch(from var(--ink) l c h / 0.035) 1px, transparent 1px),
    var(--paper-2);
  background-size: 24px 24px;
  overflow: hidden;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.capability-card:hover .capability-visual,
.capability-card:focus-within .capability-visual {
  transform: scale(1.015);
}

.capability-audit .audit-page-mini {
  top: 39px;
  right: 20px;
  bottom: 17px;
  left: 20px;
  padding: 18px;
}

.capability-audit .audit-hero-mini strong {
  font-size: 15px;
}

.capability-audit .audit-actions-mini b {
  padding: 5px 8px;
  font-size: 8px;
}

.capability-audit .audit-proof-mini span {
  height: 20px;
}

.capability-audit .audit-focus {
  padding: 3px 5px;
  font-size: 8px;
  animation: none;
}

.capability-audit .focus-message { animation-delay: 0s; }
.capability-audit .focus-cta { animation-delay: 1.55s; }
.capability-audit .focus-proof { animation-delay: 3.1s; }

.capability-launch .campaign-visual {
  padding: 24px 22px 56px;
}

.capability-launch .campaign-scale,
.capability-launch .campaign-lane > strong,
.capability-launch .campaign-return {
  font-size: 9px;
}

.capability-launch .campaign-lane {
  grid-template-columns: 58px minmax(0, 1fr);
  margin-top: 14px;
}

.capability-launch .campaign-lane > span {
  height: 28px;
}

.capability-launch .campaign-lane i {
  top: 5px;
  display: flex;
  height: 16px;
  min-width: 10px;
  align-items: center;
  padding-inline: 5px;
  animation: none;
}

.capability-launch .campaign-lane i::after {
  content: attr(data-label);
  min-width: 0;
  color: oklch(0.96 0.008 85);
  font-family: var(--font-family-mono);
  font-size: 7px;
  font-style: normal;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.capability-launch .lane-rented i { animation-delay: 320ms; }
.capability-launch .lane-borrowed i { animation-delay: 640ms; }

.capability-outreach .outreach-visual {
  padding: 24px 20px 58px;
}

.capability-outreach .signal-filter,
.capability-outreach .prospect-signals strong {
  font-size: 10px;
}

.capability-outreach .prospect-signals {
  gap: 8px;
  margin-top: 16px;
}

.capability-outreach .prospect-signals > span {
  padding: 12px 9px;
  animation: none;
}

.capability-outreach .prospect-signals > span:nth-child(2) { animation-delay: 1.8s; }
.capability-outreach .prospect-signals > span:nth-child(3) { animation-delay: 3.6s; }

.capability-outreach .prospect-signals small {
  font-size: 8px;
}

.capability-outreach .message-preview-mini {
  margin-top: 13px;
  padding: 11px 12px;
}

.capability-outreach .message-preview-mini span {
  font-size: 8px;
}

.capability-outreach .message-preview-mini p {
  font-size: 10px;
}

/* Video cut editor: footage preview, removable ranges, and a live playhead. */

.video-cut-visual {
  display: grid;
  grid-template-rows: 96px 47px 28px;
  gap: 8px;
  padding: 14px;
}

.video-preview-frame {
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid oklch(1 0 0 / 0.14);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 32%, oklch(0.73 0.09 26 / 0.2), transparent 28%),
    linear-gradient(135deg, oklch(0.18 0.022 278), oklch(0.105 0.012 270));
  box-shadow: inset 0 0 40px oklch(0 0 0 / 0.35);
  overflow: hidden;
}

.video-preview-frame::before,
.video-preview-frame::after {
  content: "";
  position: absolute;
  background: oklch(1 0 0 / 0.055);
}

.video-preview-frame::before {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
}

.video-preview-frame::after {
  right: 0;
  bottom: 31%;
  left: 0;
  height: 1px;
}

.video-time,
.video-mode {
  position: absolute;
  top: 9px;
  z-index: 2;
  font-family: var(--font-family-mono);
  font-size: 8px;
  letter-spacing: 0.05em;
}

.video-time {
  left: 10px;
  color: oklch(0.86 0.01 88);
}

.video-mode {
  right: 10px;
  padding: 3px 6px;
  border: 1px solid oklch(from var(--brand) l c h / 0.55);
  border-radius: 999px;
  color: oklch(0.88 0.06 26);
  background: oklch(from var(--brand) l c h / 0.13);
  text-transform: uppercase;
}

.video-speaker {
  position: relative;
  z-index: 1;
  width: 55px;
  height: 70px;
  transform: translateY(9px);
}

.video-speaker i,
.video-speaker b {
  position: absolute;
  left: 50%;
  display: block;
  transform: translateX(-50%);
  background: linear-gradient(145deg, oklch(0.82 0.018 85), oklch(0.5 0.025 275));
  box-shadow: 0 8px 24px oklch(0 0 0 / 0.34);
}

.video-speaker i {
  top: 0;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

.video-speaker b {
  bottom: 0;
  width: 55px;
  height: 41px;
  border-radius: 26px 26px 6px 6px;
}

.video-waveform {
  position: relative;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 7px 8px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: oklch(from var(--paper) l c h / 0.88);
  overflow: hidden;
}

.video-waveform > span {
  width: 3px;
  min-width: 2px;
  height: 42%;
  flex: 1;
  border-radius: 999px;
  background: var(--ink-dim);
  opacity: 0.62;
}

.video-waveform > span:nth-of-type(2n) { height: 72%; }
.video-waveform > span:nth-of-type(3n) { height: 92%; }
.video-waveform > span:nth-of-type(5n) { height: 55%; }

.cut-range {
  position: absolute;
  top: 4px;
  bottom: 4px;
  z-index: 2;
  display: grid;
  place-items: center;
  border: 1px solid oklch(from var(--brand) l c h / 0.78);
  border-radius: 4px;
  color: var(--brand-soft);
  background:
    repeating-linear-gradient(135deg, oklch(from var(--brand) l c h / 0.17) 0 4px, oklch(from var(--brand) l c h / 0.07) 4px 8px),
    var(--paper);
  font-family: var(--font-family-mono);
  font-size: 7px;
  font-style: normal;
  text-transform: uppercase;
  animation: none;
}

.cut-one {
  left: 17%;
  width: 19%;
}

.cut-two {
  left: 62%;
  width: 22%;
  animation-delay: 2.5s;
}

.video-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 3%;
  z-index: 3;
  width: 1px;
  background: var(--brand);
  box-shadow: 0 0 9px oklch(from var(--brand) l c h / 0.75);
  animation: none;
}

.video-playhead::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 6px;
  height: 6px;
  transform: translate(-50%, -1px) rotate(45deg);
  border-radius: 1px;
  background: var(--brand);
}

.video-edl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.video-edl span {
  display: flex;
  min-width: 0;
  align-items: center;
  padding: 0 7px;
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  font-family: var(--font-family-mono);
  font-size: 7px;
  color: var(--ink-muted);
  background: oklch(from var(--paper) l c h / 0.68);
  white-space: nowrap;
  overflow: hidden;
}

/* SEO audit: a compact crawl map with evidence checks appearing in sequence. */

.seo-visual {
  display: grid;
  grid-template-rows: 31px 82px minmax(0, 1fr);
  gap: 8px;
  padding: 14px;
}

.seo-domain {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 10px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: oklch(from var(--paper) l c h / 0.82);
}

.seo-domain strong {
  min-width: 0;
  font-family: var(--font-family-mono);
  font-size: 9px;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.seo-domain span {
  flex: none;
  font-family: var(--font-family-mono);
  font-size: 7px;
  letter-spacing: 0.08em;
  color: var(--brand);
  text-transform: uppercase;
}

.seo-domain > i {
  position: relative;
  flex: none;
  padding-left: 10px;
  font-family: var(--font-family-mono);
  font-size: 7px;
  font-style: normal;
  color: var(--ink-dim);
  text-transform: uppercase;
}

.seo-domain > i::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px;
  height: 5px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 3px oklch(from var(--good) l c h / 0.1);
  animation: none;
}

.seo-map {
  position: relative;
}

.seo-map::before,
.seo-map::after {
  content: "";
  position: absolute;
  z-index: 0;
  background: oklch(from var(--ink) l c h / 0.18);
}

.seo-map::before {
  top: 26px;
  left: 50%;
  width: 1px;
  height: 27px;
}

.seo-map::after {
  top: 52px;
  right: 14%;
  left: 14%;
  height: 1px;
}

.seo-map > span {
  position: absolute;
  z-index: 1;
  display: flex;
  height: 27px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  border-radius: 5px;
  color: var(--ink-muted);
  background: var(--paper);
  font-family: var(--font-family-mono);
  font-size: 7px;
  text-align: center;
  white-space: nowrap;
  animation: none;
}

.seo-map > span::before {
  content: "";
  width: 5px;
  height: 5px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--ink-dim);
}

.seo-map > span:first-child {
  top: 0;
  left: 50%;
  width: 42%;
  transform: translateX(-50%);
}

.seo-map > span:nth-child(2),
.seo-map > span:nth-child(3),
.seo-map > span:nth-child(4) {
  bottom: 0;
  width: 29%;
}

.seo-map > span:nth-child(2) {
  left: 0;
  animation-delay: 1.2s;
}

.seo-map > span:nth-child(3) {
  left: 35.5%;
  animation-delay: 2.4s;
}

.seo-map > span:nth-child(4) {
  right: 0;
  animation-delay: 3.6s;
}

.seo-scan {
  position: absolute;
  top: 51px;
  left: 14%;
  z-index: 2;
  width: 5px;
  height: 5px;
  border: 1px solid var(--paper);
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 8px oklch(from var(--brand) l c h / 0.72);
  animation: none;
}

.seo-checks {
  display: grid;
  align-content: stretch;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.seo-checks li {
  display: grid;
  min-height: 19px;
  grid-template-columns: 7px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 0 8px;
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  color: var(--ink-muted);
  background: oklch(from var(--paper) l c h / 0.72);
  font-size: 8px;
  animation: none;
}

.seo-checks li:nth-child(2) { animation-delay: 1.2s; }
.seo-checks li:nth-child(3) { animation-delay: 2.4s; }

.seo-checks li i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px oklch(from var(--brand) l c h / 0.09);
}

.seo-checks li b {
  font-family: var(--font-family-mono);
  font-size: 7px;
  font-weight: 500;
  color: var(--brand);
  text-transform: uppercase;
}

.seo-checks li:nth-child(2) i {
  background: var(--brand-soft);
  box-shadow: 0 0 0 3px oklch(from var(--brand-soft) l c h / 0.08);
}

.seo-checks li:nth-child(2) b {
  color: var(--brand-soft);
}

.seo-checks li:nth-child(3) i {
  background: var(--good);
  box-shadow: 0 0 0 3px oklch(from var(--good) l c h / 0.08);
}

.seo-checks li:nth-child(3) b {
  color: var(--good);
}

/* Ad creative: three platform-aware angles cycle to the front. */

.ads-visual {
  display: grid;
  grid-template-rows: 26px minmax(0, 1fr);
  gap: 10px;
  padding: 15px;
}

.ad-platforms {
  display: flex;
  gap: 6px;
}

.ad-platforms span {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--font-family-mono);
  font-size: 7px;
  color: var(--ink-muted);
  background: oklch(from var(--paper) l c h / 0.82);
}

.ad-platforms span:first-child {
  border-color: oklch(from var(--brand) l c h / 0.55);
  color: var(--brand-soft);
  background: oklch(from var(--brand) l c h / 0.08);
}

.ad-angle-stack {
  display: grid;
  align-content: center;
  gap: 7px;
  perspective: 700px;
}

.ad-angle-stack > article {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  padding: 8px 10px 9px 12px;
  border: 1px solid var(--rule);
  border-left: 2px solid var(--brand);
  border-radius: 6px;
  background: oklch(from var(--paper) l c h / 0.93);
  box-shadow: 0 7px 18px oklch(0 0 0 / 0.08);
  transform-origin: 50% 50%;
  animation: none;
}

.ad-angle-stack > article:nth-child(2) {
  margin-inline: 8px -8px;
  animation-delay: 2s;
}

.ad-angle-stack > article:nth-child(3) {
  animation-delay: 4s;
}

.ad-angle-stack small {
  font-family: var(--font-family-mono);
  font-size: 7px;
  letter-spacing: 0.08em;
  color: var(--brand);
  text-transform: uppercase;
}

.ad-angle-stack strong {
  min-width: 0;
  grid-column: 1;
  font-size: 10px;
  font-weight: 560;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.ad-angle-stack i {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  padding: 3px 5px;
  border-radius: 999px;
  color: var(--good);
  background: oklch(from var(--good) l c h / 0.1);
  font-family: var(--font-family-mono);
  font-size: 7px;
  font-style: normal;
  white-space: nowrap;
}

/* Large, recognizable product previews for the second gallery row. */

.video-cut-visual,
.seo-visual,
.ads-visual {
  min-height: 280px;
  padding: 12px;
  background-size: auto;
}

.video-cut-visual {
  display: grid;
  grid-template-rows: 32px 103px 68px;
  gap: 6px;
  padding-bottom: 53px;
  color: oklch(0.95 0.012 80);
  background: oklch(0.11 0.014 270);
}

.video-editor-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 0 11px;
  border: 1px solid oklch(1 0 0 / 0.1);
  border-radius: 7px;
  background: oklch(0.16 0.016 270);
  font-family: var(--font-family-mono);
}

.video-editor-bar > span {
  display: flex;
  gap: 4px;
}

.video-editor-bar > span i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: oklch(0.52 0.02 270);
}

.video-editor-bar > span i:first-child {
  background: var(--brand);
}

.video-editor-bar strong,
.video-editor-bar em {
  min-width: 0;
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  color: oklch(0.78 0.014 80);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.video-editor-bar em {
  color: oklch(0.59 0.02 270);
}

.video-editor-stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 18px 20px;
  border: 1px solid oklch(1 0 0 / 0.12);
  border-radius: 8px;
  background:
    linear-gradient(90deg, oklch(0.08 0.012 270 / 0.92) 0%, oklch(0.08 0.012 270 / 0.54) 48%, transparent 76%),
    radial-gradient(circle at 82% 26%, oklch(from var(--brand) l c h / 0.72), transparent 24%),
    linear-gradient(135deg, oklch(0.25 0.035 280), oklch(0.14 0.023 270) 58%, oklch(0.42 0.12 26));
  box-shadow: inset 0 0 44px oklch(0 0 0 / 0.26);
  overflow: hidden;
}

.video-editor-stage::before,
.video-editor-stage::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.video-editor-stage::before {
  inset: 10px;
  border: 1px solid oklch(1 0 0 / 0.13);
  border-radius: 3px;
}

.video-editor-stage::after {
  top: 50%;
  right: 10px;
  left: 10px;
  height: 1px;
  background: oklch(1 0 0 / 0.08);
}

.video-editor-stage p {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: var(--font-public-serif);
  max-width: 88%;
  font-family: var(--font-family-mono);
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: -0.025em;
  color: oklch(0.98 0.006 80);
}

.video-editor-stage p strong {
  color: oklch(0.78 0.13 28);
  font-weight: 600;
}

.video-editor-stage > span {
  position: absolute;
  top: 17px;
  left: 20px;
  z-index: 2;
  padding: 4px 7px;
  border: 1px solid oklch(1 0 0 / 0.16);
  border-radius: 999px;
  font-family: var(--font-family-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: oklch(0.84 0.018 80);
  background: oklch(0.08 0.012 270 / 0.62);
  text-transform: uppercase;
}

.video-duration {
  position: absolute;
  right: 18px;
  bottom: 17px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border-radius: 5px;
  color: oklch(0.93 0.012 80);
  background: oklch(0.08 0.012 270 / 0.78);
  font-family: var(--font-family-mono);
  font-size: 11px;
  font-weight: 500;
}

.video-duration i {
  color: var(--brand-soft);
  font-style: normal;
}

.video-timeline {
  position: relative;
  display: grid;
  grid-template-rows: 14px 26px 20px;
  gap: 4px;
  padding: 6px 8px;
  border: 1px solid oklch(1 0 0 / 0.1);
  border-radius: 7px;
  background: oklch(0.145 0.016 270);
  overflow: hidden;
}

.timeline-ruler,
.timeline-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.timeline-ruler span {
  font-family: var(--font-family-mono);
  font-size: 9px;
  color: oklch(0.52 0.018 270);
}

.timeline-video {
  grid-template-columns: 1.25fr 0.55fr 1.4fr 1fr;
}

.timeline-video b,
.timeline-video mark {
  display: flex;
  min-width: 0;
  align-items: center;
  padding: 0 7px;
  border-radius: 4px;
  font-family: var(--font-family-mono);
  font-size: 9px;
  font-weight: 500;
  font-style: normal;
  white-space: nowrap;
  overflow: hidden;
}

.timeline-video b {
  color: oklch(0.87 0.03 245);
  background: oklch(0.42 0.09 245 / 0.72);
}

.timeline-video mark {
  justify-content: center;
  border: 1px solid oklch(from var(--brand) l c h / 0.72);
  color: oklch(0.9 0.08 28);
  background: oklch(from var(--brand) l c h / 0.19);
  animation: none;
}

.timeline-audio {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-items: center;
  gap: 3px;
}

.timeline-audio span {
  height: 8px;
  border-radius: 999px;
  background: oklch(0.72 0.04 150 / 0.66);
}

.timeline-audio span:nth-child(2n) { height: 13px; }
.timeline-audio span:nth-child(3n) { height: 17px; }

.timeline-playhead {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 7%;
  z-index: 3;
  width: 2px;
  background: var(--brand);
  box-shadow: 0 0 10px oklch(from var(--brand) l c h / 0.72);
  animation: none;
}

.timeline-playhead::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -2px) rotate(45deg);
  border-radius: 2px;
  background: var(--brand);
}

.seo-visual {
  display: grid;
  grid-template-rows: 34px minmax(0, 1fr);
  gap: 7px;
  padding-bottom: 55px;
  background:
    radial-gradient(circle at 84% 12%, oklch(from var(--brand) l c h / 0.08), transparent 30%),
    var(--paper-2);
}

.seo-browser-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 0 11px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper);
}

.seo-browser-bar > span {
  display: flex;
  gap: 4px;
}

.seo-browser-bar > span i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-dim);
}

.seo-browser-bar > span i:first-child {
  background: var(--brand);
}

.seo-browser-bar strong,
.seo-browser-bar em {
  font-family: var(--font-family-mono);
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
}

.seo-browser-bar strong {
  min-width: 0;
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--ink-muted);
  background: var(--paper-2);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.seo-browser-bar em {
  color: var(--brand);
  text-transform: uppercase;
}

.seo-result-card {
  position: relative;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 10px 14px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 11px 30px oklch(0 0 0 / 0.08);
  overflow: hidden;
}

.seo-result-card > span {
  margin: 0;
}

.seo-result-card .seo-check-row {
  display: flex;
  min-height: 27px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 8px;
  border: 1px solid var(--rule-soft);
  border-radius: 5px;
  color: var(--ink);
  background: var(--paper-2);
  font-family: var(--font-family-mono);
  opacity: 1;
  transform: translateY(0);
}

.seo-check-row b {
  min-width: 0;
  font-size: 10px;
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seo-check-row em {
  flex: none;
  padding: 3px 6px;
  border-radius: 999px;
  font-size: 8px;
  font-style: normal;
  font-weight: 550;
  white-space: nowrap;
}

.seo-check-row em[data-tone="good"] {
  color: var(--good);
  background: oklch(from var(--good) l c h / 0.09);
}

.seo-check-row em[data-tone="warning"],
.seo-check-row em[data-tone="opportunity"] {
  color: oklch(0.72 0.13 78);
  background: oklch(0.72 0.13 78 / 0.1);
}

.seo-check-row em[data-tone="issue"] {
  color: var(--brand-soft);
  background: oklch(from var(--brand) l c h / 0.1);
}

.seo-result-card > strong {
  font-family: var(--font-public-serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--brand-soft);
}

.seo-result-card > p {
  max-width: 92%;
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.42;
  color: var(--ink-muted);
}

.seo-result-scan {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 2;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  box-shadow: 0 0 18px oklch(from var(--brand) l c h / 0.55);
  animation: none;
}

.seo-signal-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.seo-signal-row > span {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--rule-soft);
  border-radius: 7px;
  background: oklch(from var(--paper) l c h / 0.76);
}

.seo-signal-row i {
  width: 8px;
  height: 8px;
  grid-row: 1 / span 2;
  align-self: center;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px oklch(from var(--brand) l c h / 0.09);
}

.seo-signal-row > span:nth-child(2) i { background: var(--brand-soft); }
.seo-signal-row > span:nth-child(3) i { background: var(--good); }

.seo-signal-row b,
.seo-signal-row small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seo-signal-row b {
  font-size: 12px;
  font-weight: 600;
}

.seo-signal-row small {
  margin-top: 2px;
  font-family: var(--font-family-mono);
  font-size: 9px;
  color: var(--ink-dim);
  text-transform: uppercase;
}

.ads-visual {
  display: grid;
  grid-template-rows: 32px minmax(0, 1fr);
  gap: 7px;
  padding-bottom: 53px;
  background:
    radial-gradient(circle at 50% 18%, oklch(from var(--brand) l c h / 0.14), transparent 38%),
    var(--paper-2);
}

.ad-studio-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 10px;
  font-family: var(--font-family-mono);
  font-size: 9px;
  color: var(--ink-dim);
}

.ad-studio-bar > div {
  display: flex;
  gap: 5px;
}

.ad-studio-bar i {
  padding: 4px 7px;
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
  font-style: normal;
  color: var(--ink-dim);
}

.ad-studio-bar i.is-active {
  border-color: oklch(from var(--brand) l c h / 0.48);
  color: var(--brand-soft);
  background: oklch(from var(--brand) l c h / 0.08);
}

.ad-preview-card {
  display: grid;
  width: min(430px, 94%);
  min-height: 174px;
  grid-template-rows: auto auto minmax(72px, 1fr) auto;
  align-self: center;
  justify-self: center;
  padding: 10px;
  border: 1px solid var(--rule);
  border-radius: 11px;
  background: var(--paper);
  box-shadow: 0 14px 34px oklch(0 0 0 / 0.14);
}

.ad-preview-card > header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ad-preview-card > header > b {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 50%;
  color: oklch(0.98 0 0);
  background: var(--brand);
  font-family: var(--font-public-sans);
  font-size: 10px;
}

.ad-preview-card > header > span {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.ad-preview-card > header strong {
  font-size: 11px;
  font-weight: 650;
}

.ad-preview-card > header small {
  margin-top: 1px;
  font-size: 9px;
  color: var(--ink-dim);
}

.ad-preview-card > header > i {
  color: var(--ink-dim);
  font-style: normal;
  letter-spacing: 0.08em;
}

.ad-preview-card > p {
  margin: 8px 0 7px;
  font-size: 12px;
}

.ad-creative-frame {
  position: relative;
  display: flex;
  min-height: 72px;
  flex-direction: column;
  justify-content: space-between;
  padding: 13px 15px;
  border-radius: 7px;
  color: oklch(0.98 0.006 80);
  background:
    radial-gradient(circle at 88% 20%, oklch(0.92 0.12 28 / 0.82), transparent 24%),
    linear-gradient(135deg, oklch(0.2 0.035 278), oklch(0.1 0.018 270) 56%, oklch(0.48 0.17 27));
  overflow: hidden;
}

.ad-creative-frame::after {
  content: "";
  position: absolute;
  inset: -80% -20%;
  background: linear-gradient(105deg, transparent 35%, oklch(1 0 0 / 0.12) 48%, transparent 61%);
  transform: translateX(-55%);
  animation: none;
}

.ad-creative-frame > span {
  position: relative;
  z-index: 1;
  font-family: var(--font-family-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
}

.ad-creative-frame > strong {
  position: relative;
  z-index: 1;
  font-family: var(--font-public-serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: -0.03em;
}

.ad-creative-frame > i {
  position: absolute;
  right: 13px;
  bottom: 13px;
  z-index: 1;
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 50%;
  color: oklch(0.13 0.02 270);
  background: oklch(0.96 0.02 80);
  font-style: normal;
}

.ad-preview-card > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 3px 0;
}

.ad-preview-card > footer > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.ad-preview-card > footer small {
  font-family: var(--font-family-mono);
  font-size: 8px;
  color: var(--ink-dim);
}

.ad-preview-card > footer strong {
  margin-top: 1px;
  font-size: 10px;
  font-weight: 600;
}

.ad-preview-card > footer > b {
  flex: none;
  padding: 6px 9px;
  border-radius: 5px;
  color: var(--paper);
  background: var(--ink);
  font-size: 9px;
  font-weight: 650;
}

.capability-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 21px;
}

.capability-skill {
  font-family: var(--font-family-mono);
  font-size: 11px;
  color: var(--brand);
}

.capability-body h3 {
  margin: 8px 0 0;
  font-family: var(--font-public-serif);
  font-size: 27px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.capability-body p {
  margin: 7px 0 16px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-muted);
}

.capability-body button {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding: 0 13px;
  border: 1px solid var(--ink);
  border-radius: 7px;
  font-size: 12px;
  font-weight: 620;
  color: var(--paper);
  background: var(--ink);
}

.capability-body button span {
  color: var(--brand-soft);
  transition: transform 180ms ease;
}

.capability-body button:hover span,
.capability-body button:focus-visible span {
  transform: translateX(3px);
}

/*
 * Capability previews tell one short story, once. The resting state is the
 * finished result so the cards remain useful after the reveal has completed.
 */

.preview-status,
.audit-summary,
.campaign-status {
  position: absolute;
  right: 18px;
  bottom: 12px;
  left: 18px;
  z-index: 5;
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  color: var(--ink-muted);
  background: oklch(from var(--paper) l c h / 0.94);
  box-shadow: 0 7px 18px oklch(0 0 0 / 0.07);
  font-family: var(--font-family-mono);
  font-size: 9px;
  line-height: 1;
}

.preview-status > span {
  position: absolute;
  right: 10px;
  left: 10px;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  color: var(--ink-dim);
  opacity: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.preview-status > span i {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 3px oklch(from var(--good) l c h / 0.1);
}

.preview-status > strong {
  position: absolute;
  right: 10px;
  left: 10px;
  min-width: 0;
  color: var(--good);
  font-size: inherit;
  font-weight: 550;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* Audit: scan the page, resolve three concrete findings, then show a result. */

.capability-audit .audit-page-mini {
  bottom: 55px;
  overflow: hidden;
}

.capability-audit .audit-page-mini::before {
  content: "";
  position: absolute;
  top: 16px;
  right: 0;
  left: 0;
  z-index: 2;
  height: 2px;
  opacity: 0;
  background: linear-gradient(90deg, transparent 4%, var(--brand) 50%, transparent 96%);
  box-shadow: 0 0 15px oklch(from var(--brand) l c h / 0.56);
  pointer-events: none;
}

.capability-audit .audit-focus {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.capability-audit .focus-proof {
  right: 8px;
  bottom: 7px;
}

.capability-audit .audit-summary {
  right: 20px;
  bottom: 11px;
  left: 20px;
}

.capability-card.is-preview-playing.capability-audit .audit-page-mini::before {
  animation: audit-scan-once 1050ms cubic-bezier(0.45, 0, 0.2, 1) 120ms both;
}

.capability-card.is-preview-playing.capability-audit .focus-message {
  animation: finding-resolve-once 360ms cubic-bezier(0.22, 1, 0.36, 1) 880ms both;
}

.capability-card.is-preview-playing.capability-audit .focus-cta {
  animation: finding-resolve-once 360ms cubic-bezier(0.22, 1, 0.36, 1) 1110ms both;
}

.capability-card.is-preview-playing.capability-audit .focus-proof {
  animation: finding-resolve-once 360ms cubic-bezier(0.22, 1, 0.36, 1) 1340ms both;
}

.capability-card.is-preview-playing.capability-audit .audit-summary > strong {
  animation: preview-result-once 420ms cubic-bezier(0.22, 1, 0.36, 1) 1720ms both;
}

/* Campaign: build the three channel lanes from day one to the launch outcome. */

.capability-launch .campaign-lane i {
  opacity: 1;
  transform: scaleX(1);
}

.capability-launch .campaign-return,
.capability-launch .campaign-status {
  opacity: 1;
  transform: translateY(0);
}

.capability-launch .campaign-status {
  right: 22px;
  bottom: 12px;
  left: 22px;
}

.capability-card.is-preview-playing.capability-launch .lane-owned i:first-child {
  animation: campaign-bar-build-once 520ms cubic-bezier(0.22, 1, 0.36, 1) 180ms both;
}

.capability-card.is-preview-playing.capability-launch .lane-owned i:last-child {
  animation: campaign-bar-build-once 520ms cubic-bezier(0.22, 1, 0.36, 1) 380ms both;
}

.capability-card.is-preview-playing.capability-launch .lane-rented i:nth-child(1) {
  animation: campaign-bar-build-once 520ms cubic-bezier(0.22, 1, 0.36, 1) 560ms both;
}

.capability-card.is-preview-playing.capability-launch .lane-rented i:nth-child(2) {
  animation: campaign-bar-build-once 520ms cubic-bezier(0.22, 1, 0.36, 1) 740ms both;
}

.capability-card.is-preview-playing.capability-launch .lane-rented i:nth-child(3) {
  animation: campaign-bar-build-once 520ms cubic-bezier(0.22, 1, 0.36, 1) 920ms both;
}

.capability-card.is-preview-playing.capability-launch .lane-borrowed i:first-child {
  animation: campaign-bar-build-once 520ms cubic-bezier(0.22, 1, 0.36, 1) 1080ms both;
}

.capability-card.is-preview-playing.capability-launch .lane-borrowed i:last-child {
  animation: campaign-bar-build-once 520ms cubic-bezier(0.22, 1, 0.36, 1) 1240ms both;
}

.capability-card.is-preview-playing.capability-launch .campaign-return,
.capability-card.is-preview-playing.capability-launch .campaign-status > strong {
  animation: preview-result-once 420ms cubic-bezier(0.22, 1, 0.36, 1) 1680ms both;
}

/* Outreach: verify three source signals before revealing the drafted opening. */

.capability-outreach .prospect-signals > span {
  position: relative;
  border-color: var(--rule-soft);
  background: var(--paper);
  opacity: 0.64;
  transform: translateY(0);
}

.capability-outreach .prospect-signals > span.is-selected {
  border-color: oklch(from var(--good) l c h / 0.34);
  background: oklch(from var(--good) l c h / 0.045);
  opacity: 1;
}

.capability-outreach .prospect-signals > span.is-selected::after {
  content: "✓";
  position: absolute;
  top: 8px;
  right: 8px;
  color: var(--good);
  font-family: var(--font-family-mono);
  font-size: 9px;
}

.capability-outreach .prospect-signals i {
  background: var(--ink-dim);
}

.capability-outreach .prospect-signals > span.is-selected i {
  background: var(--good);
}

.capability-outreach .message-preview-mini,
.capability-outreach .preview-status {
  opacity: 1;
  transform: translateY(0);
}

.capability-outreach .preview-status {
  right: 20px;
  bottom: 12px;
  left: 20px;
}

.capability-card.is-preview-playing.capability-outreach .prospect-signals > span.is-selected {
  animation: signal-resolve-once 400ms cubic-bezier(0.22, 1, 0.36, 1) 240ms both;
}

.capability-card.is-preview-playing.capability-outreach .message-preview-mini {
  animation: message-resolve-once 500ms cubic-bezier(0.22, 1, 0.36, 1) 780ms both;
}

.capability-card.is-preview-playing.capability-outreach .preview-status > strong {
  animation: preview-result-once 400ms cubic-bezier(0.22, 1, 0.36, 1) 1260ms both;
}

/* Video: find the silent range, remove it, then settle on the shorter cut. */

.video-cut-visual .timeline-video {
  grid-template-columns: 1.25fr 0.08fr 1.4fr 0.08fr;
}

.video-cut-visual .timeline-video mark {
  min-width: 0;
  padding-inline: 0;
  opacity: 0.16;
  transform: scaleX(0.12);
}

.video-cut-visual .timeline-playhead {
  left: 92%;
  opacity: 0.38;
}

.video-cut-visual .video-editor-bar em,
.video-cut-visual .preview-status {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.video-cut-visual .preview-status {
  right: 12px;
  bottom: 11px;
  left: 12px;
  color: oklch(0.65 0.018 80);
  background: oklch(0.145 0.016 270 / 0.96);
  border-color: oklch(1 0 0 / 0.11);
  box-shadow: none;
}

.video-cut-visual .preview-status > span {
  color: oklch(0.6 0.018 80);
}

.capability-card.is-preview-playing.capability-video .timeline-video {
  animation: video-track-tighten-once 3400ms cubic-bezier(0.22, 1, 0.36, 1) 160ms both;
}

.capability-card.is-preview-playing.capability-video .timeline-video mark:nth-child(2) {
  animation: dead-air-remove-first-once 3400ms cubic-bezier(0.22, 1, 0.36, 1) 160ms both;
}

.capability-card.is-preview-playing.capability-video .timeline-video mark:nth-child(4) {
  animation: dead-air-remove-second-once 3400ms cubic-bezier(0.22, 1, 0.36, 1) 160ms both;
}

.capability-card.is-preview-playing.capability-video .timeline-playhead {
  animation: video-playhead-once 3400ms cubic-bezier(0.45, 0, 0.2, 1) 160ms both;
}

.capability-card.is-preview-playing.capability-video .video-editor-bar em,
.capability-card.is-preview-playing.capability-video .preview-status > strong {
  animation: duration-settle-once 440ms cubic-bezier(0.22, 1, 0.36, 1) 2920ms both;
}

/* SEO: scan the result once, then resolve the three audit signals. */

.capability-seo .seo-result-scan {
  top: 88%;
  opacity: 0;
}

.capability-seo .preview-status {
  right: 12px;
  bottom: 11px;
  left: 12px;
}

.capability-card.is-preview-playing.capability-seo .seo-result-scan {
  animation: seo-result-scan-once 1120ms cubic-bezier(0.45, 0, 0.2, 1) 180ms both;
}

.capability-card.is-preview-playing.capability-seo .seo-check-row:nth-child(1) {
  animation: seo-signal-resolve-once 400ms cubic-bezier(0.22, 1, 0.36, 1) 1100ms both;
}

.capability-card.is-preview-playing.capability-seo .seo-check-row:nth-child(2) {
  animation: seo-signal-resolve-once 400ms cubic-bezier(0.22, 1, 0.36, 1) 1370ms both;
}

.capability-card.is-preview-playing.capability-seo .seo-check-row:nth-child(3) {
  animation: seo-signal-resolve-once 400ms cubic-bezier(0.22, 1, 0.36, 1) 1640ms both;
}

.capability-card.is-preview-playing.capability-seo .seo-check-row:nth-child(4) {
  animation: seo-signal-resolve-once 400ms cubic-bezier(0.22, 1, 0.36, 1) 1910ms both;
}

.capability-card.is-preview-playing.capability-seo .preview-status > strong {
  animation: preview-result-once 400ms cubic-bezier(0.22, 1, 0.36, 1) 2260ms both;
}

/* Ad creative: assemble the recognizable ad, then use one restrained glint. */

.capability-ads .ad-preview-card > header,
.capability-ads .ad-preview-card > p,
.capability-ads .ad-creative-frame,
.capability-ads .ad-preview-card > footer,
.capability-ads .preview-status {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.capability-ads .preview-status {
  right: 12px;
  bottom: 11px;
  left: 12px;
}

.capability-card.is-preview-playing.capability-ads .ad-preview-card > header {
  animation: ad-piece-assemble-once 380ms cubic-bezier(0.22, 1, 0.36, 1) 180ms both;
}

.capability-card.is-preview-playing.capability-ads .ad-preview-card > p {
  animation: ad-piece-assemble-once 380ms cubic-bezier(0.22, 1, 0.36, 1) 430ms both;
}

.capability-card.is-preview-playing.capability-ads .ad-creative-frame {
  animation: ad-frame-assemble-once 480ms cubic-bezier(0.22, 1, 0.36, 1) 680ms both;
}

.capability-card.is-preview-playing.capability-ads .ad-preview-card > footer {
  animation: ad-piece-assemble-once 380ms cubic-bezier(0.22, 1, 0.36, 1) 1050ms both;
}

.capability-card.is-preview-playing.capability-ads .ad-creative-frame::after {
  animation: creative-glint-once 720ms ease-out 1260ms both;
}

.capability-card.is-preview-playing.capability-ads .preview-status > strong {
  animation: preview-result-once 400ms cubic-bezier(0.22, 1, 0.36, 1) 1900ms both;
}

.capability-audit { --preview-story-duration: 2140ms; }
.capability-launch { --preview-story-duration: 2100ms; }
.capability-outreach { --preview-story-duration: 1640ms; }
.capability-video { --preview-story-duration: 3360ms; }
.capability-seo { --preview-story-duration: 2640ms; }
.capability-ads { --preview-story-duration: 2300ms; }

.capability-card.is-preview-playing .preview-status > span {
  animation: status-working-once var(--preview-story-duration, 2200ms) ease-out both;
}

.capability-card.is-preview-playing .preview-status > span i {
  animation: status-dot-once var(--preview-story-duration, 2200ms) ease-out both;
}

@keyframes audit-scan-once {
  0% { top: 16px; opacity: 0; }
  14% { opacity: 1; }
  82% { opacity: 1; }
  100% { top: calc(100% - 18px); opacity: 0; }
}

@keyframes finding-resolve-once {
  from { opacity: 0; transform: translateY(5px) scale(0.96); box-shadow: none; }
  to { opacity: 1; transform: translateY(0) scale(1); box-shadow: 0 0 0 3px oklch(from var(--brand) l c h / 0.09); }
}

@keyframes campaign-bar-build-once {
  from { opacity: 0.25; transform: scaleX(0.04); }
  to { opacity: 1; transform: scaleX(1); }
}

@keyframes preview-result-once {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes signal-resolve-once {
  from { border-color: var(--rule-soft); background: var(--paper); opacity: 0.35; transform: translateY(5px); }
  to { border-color: oklch(from var(--good) l c h / 0.25); background: oklch(from var(--good) l c h / 0.035); opacity: 1; transform: translateY(0); }
}

@keyframes message-resolve-once {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes video-track-tighten-once {
  0%, 34% { grid-template-columns: 1.25fr 0.55fr 1.4fr 0.6fr; }
  52%, 66% { grid-template-columns: 1.25fr 0.08fr 1.4fr 0.6fr; }
  84%, 100% { grid-template-columns: 1.25fr 0.08fr 1.4fr 0.08fr; }
}

@keyframes dead-air-remove-first-once {
  0%, 34% { padding-inline: 7px; opacity: 1; transform: scaleX(1); }
  52%, 100% { padding-inline: 0; opacity: 0.16; transform: scaleX(0.12); }
}

@keyframes dead-air-remove-second-once {
  0%, 66% { padding-inline: 7px; opacity: 1; transform: scaleX(1); }
  84%, 100% { padding-inline: 0; opacity: 0.16; transform: scaleX(0.12); }
}

@keyframes video-playhead-once {
  0% { left: 7%; opacity: 0; }
  8% { opacity: 1; }
  34% { left: 38%; opacity: 1; }
  48% { left: 43%; opacity: 1; }
  66% { left: 82%; opacity: 1; }
  80% { left: 88%; opacity: 1; }
  92% { left: 92%; opacity: 1; }
  100% { left: 92%; opacity: 0.38; }
}

@keyframes duration-settle-once {
  from { opacity: 0.45; transform: translateY(5px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes seo-result-scan-once {
  0% { top: 8%; opacity: 0; }
  14% { opacity: 1; }
  82% { top: 88%; opacity: 1; }
  100% { top: 88%; opacity: 0; }
}

@keyframes seo-signal-resolve-once {
  from { border-color: var(--rule-soft); opacity: 0.32; transform: translateY(5px); }
  to { border-color: oklch(from var(--good) l c h / 0.22); opacity: 1; transform: translateY(0); }
}

@keyframes ad-piece-assemble-once {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ad-frame-assemble-once {
  from { opacity: 0; transform: translateY(8px) scale(0.975); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes creative-glint-once {
  0% { opacity: 0; transform: translateX(-55%); }
  18% { opacity: 1; }
  78% { opacity: 0.72; transform: translateX(55%); }
  100% { opacity: 0; transform: translateX(55%); }
}

@keyframes status-working-once {
  0%, 72% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes status-dot-once {
  0% { background: var(--brand); box-shadow: 0 0 0 3px oklch(from var(--brand) l c h / 0.1); }
  72% { background: var(--brand); box-shadow: 0 0 0 4px oklch(from var(--brand) l c h / 0.05); }
  100% { background: var(--good); box-shadow: 0 0 0 3px oklch(from var(--good) l c h / 0.1); }
}

@keyframes capability-card-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes capability-focus {
  0%, 24%, 100% { opacity: 0.45; transform: translateY(0) scale(0.96); }
  8%, 16% { opacity: 1; transform: translateY(-2px) scale(1); box-shadow: 0 0 0 4px oklch(from var(--brand) l c h / 0.1); }
}

@keyframes capability-bar {
  from { opacity: 0.55; transform: scaleX(0.18); }
  to { opacity: 1; transform: scaleX(1); }
}

@keyframes capability-signal {
  0%, 22%, 100% { opacity: 0.58; transform: translateY(0); }
  6%, 15% { opacity: 1; transform: translateY(-3px); border-color: var(--brand); }
}

@keyframes video-playhead-scan {
  0% { left: 3%; opacity: 0; }
  4%, 94% { opacity: 1; }
  100% { left: 97%; opacity: 0; }
}

@keyframes cut-range-pulse {
  0%, 34%, 100% { opacity: 0.68; }
  8%, 25% { opacity: 1; box-shadow: 0 0 0 3px oklch(from var(--brand) l c h / 0.09); }
}

@keyframes seo-node-read {
  0%, 24%, 100% { border-color: var(--rule); color: var(--ink-muted); }
  6%, 18% { border-color: oklch(from var(--brand) l c h / 0.7); color: var(--ink); box-shadow: 0 0 0 3px oklch(from var(--brand) l c h / 0.08); }
}

@keyframes seo-scan-pulse {
  0%, 100% { opacity: 0.45; transform: translateY(-50%) scale(0.8); }
  50% { opacity: 1; transform: translateY(-50%) scale(1); }
}

@keyframes seo-crawl-scan {
  0% { left: 14%; opacity: 0; }
  8%, 92% { opacity: 1; }
  50% { left: 50%; }
  100% { left: 86%; opacity: 0; }
}

@keyframes seo-check-read {
  0%, 28%, 100% { opacity: 0.62; transform: translateX(0); }
  7%, 20% { opacity: 1; transform: translateX(3px); border-color: oklch(from var(--good) l c h / 0.35); }
}

@keyframes ad-angle-cycle {
  0%, 30%, 100% { opacity: 0.62; transform: translateZ(0) scale(0.985); }
  7%, 22% { opacity: 1; transform: translateZ(18px) translateX(3px) scale(1); border-color: oklch(from var(--brand) l c h / 0.58); box-shadow: 0 10px 26px oklch(0 0 0 / 0.15); }
}

@keyframes editor-playhead {
  0% { left: 7%; opacity: 0; }
  7%, 84% { opacity: 1; }
  48% { left: 42%; }
  88% { left: 92%; opacity: 1; }
  100% { left: 92%; opacity: 0; }
}

@keyframes editor-dead-air {
  0%, 35%, 100% { opacity: 1; transform: scaleX(1); }
  47%, 78% { opacity: 0.28; transform: scaleX(0.16); }
}

@keyframes serp-scan {
  0%, 12% { top: 8%; opacity: 0; }
  20% { opacity: 1; }
  72% { top: 88%; opacity: 1; }
  84%, 100% { top: 88%; opacity: 0; }
}

@keyframes creative-glint {
  0%, 20% { opacity: 0; transform: translateX(-55%); }
  34% { opacity: 1; }
  58% { opacity: 0.75; transform: translateX(55%); }
  72%, 100% { opacity: 0; transform: translateX(55%); }
}

/* Reconcile every preview around one readable state change: working -> ready. */

.capability-card {
  --preview-result-delay: 1.75s;
  --preview-working-duration: 1.9s;
}

.capability-video {
  --preview-result-delay: 3.35s;
  --preview-working-duration: 3.5s;
}

.capability-seo {
  --preview-result-delay: 2.15s;
  --preview-working-duration: 2.3s;
}

.capability-ads {
  --preview-result-delay: 1.95s;
  --preview-working-duration: 2.1s;
}

.capability-visual {
  min-height: 320px;
}

.preview-status,
.audit-summary,
.campaign-status {
  position: absolute;
  right: 18px;
  bottom: 12px;
  left: 18px;
  display: grid;
  width: auto;
  min-height: 34px;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  padding: 0 11px;
  border-radius: 7px;
  font-size: 10px;
  line-height: 1.2;
}

.preview-status::before,
.audit-summary::before,
.campaign-status::before {
  display: none;
}

.preview-status > span,
.preview-status > strong {
  position: static;
  right: auto;
  left: auto;
  display: flex;
  min-width: 0;
  grid-column: 1;
  grid-row: 1;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-status > span {
  visibility: hidden;
  color: var(--ink-muted);
  opacity: 0;
}

.preview-status > span i {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px oklch(from var(--brand) l c h / 0.09);
}

.preview-status > strong {
  color: var(--good);
  font-size: inherit;
  font-weight: 600;
  opacity: 1;
}

.preview-status > strong::before {
  content: "✓";
  display: grid;
  width: 15px;
  height: 15px;
  flex: none;
  place-items: center;
  border-radius: 50%;
  color: var(--paper);
  background: var(--good);
  font-size: 9px;
}

.capability-card.is-preview-playing .preview-status {
  animation: preview-status-tone var(--preview-working-duration) ease both !important;
}

.capability-card.is-preview-playing .preview-status > span {
  visibility: visible;
  animation: preview-working-text var(--preview-working-duration) ease both;
}

.capability-card.is-preview-playing .preview-status > span i {
  animation: preview-working-dot var(--preview-working-duration) ease both;
}

.capability-card.is-preview-playing .preview-status > strong {
  animation: preview-final-text 380ms cubic-bezier(0.22, 1, 0.36, 1) var(--preview-result-delay) both !important;
}

.capability-audit .audit-page-mini {
  bottom: 52px;
}

.capability-audit .audit-focus {
  padding: 4px 6px;
  font-size: 9px;
  animation: none;
}

.capability-audit .focus-message {
  top: 13px;
  left: 53%;
}

.capability-audit .focus-cta {
  top: 69px;
  left: 37%;
}

.capability-audit .focus-proof {
  right: 16px;
  bottom: 17px;
}

.capability-audit .audit-summary {
  right: 17px;
  bottom: 11px;
  left: 17px;
}

.capability-launch .campaign-visual {
  min-height: 320px;
  padding: 24px 22px 58px;
}

.capability-launch .campaign-lane {
  grid-template-columns: 88px minmax(0, 1fr);
}

.capability-launch .campaign-lane > strong {
  font-size: 10px;
}

.capability-launch .campaign-lane > span {
  height: 29px;
}

.capability-launch .campaign-lane i {
  top: 5px;
  display: flex;
  height: 18px;
  align-items: center;
  padding-inline: 6px;
  animation: none;
  overflow: hidden;
}

.capability-launch .campaign-lane i::after {
  content: attr(data-label);
  font-family: var(--font-family-mono);
  font-size: 8px;
  font-style: normal;
  color: oklch(0.96 0.01 80);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.capability-launch .campaign-return {
  font-size: 9px;
}

.capability-launch .campaign-status {
  right: 22px;
  bottom: 12px;
  left: 22px;
  width: auto;
  margin: 0;
}

.capability-outreach .outreach-visual {
  min-height: 320px;
  padding: 24px 20px 58px;
}

.capability-outreach .prospect-signals > span {
  border-color: var(--rule-soft);
  background: var(--paper);
  opacity: 0.66;
  animation: none;
}

.capability-outreach .prospect-signals > span::after {
  content: none;
}

.capability-outreach .prospect-signals > span.is-selected {
  border-color: oklch(from var(--good) l c h / 0.42);
  background: oklch(from var(--good) l c h / 0.045);
  opacity: 1;
}

.capability-outreach .prospect-signals > span.is-selected::after {
  content: "selected";
  top: 8px;
  right: 8px;
  color: var(--good);
  font-size: 8px;
  text-transform: uppercase;
}

.capability-outreach .prospect-signals > span.is-selected i {
  background: var(--good);
}

.capability-card.is-preview-playing.capability-outreach .prospect-signals > span:nth-child(2),
.capability-card.is-preview-playing.capability-outreach .prospect-signals > span:nth-child(3) {
  animation: none;
}

.capability-outreach .message-preview-mini span {
  font-size: 9px;
}

.capability-outreach .message-preview-mini p {
  font-size: 11px;
}

.capability-outreach .outreach-status {
  right: 20px;
  bottom: 12px;
  left: 20px;
  width: auto;
  margin: 0;
}

.video-cut-visual {
  min-height: 326px;
  grid-template-rows: 32px 126px 80px 34px;
  padding: 12px;
}

.video-editor-stage p {
  max-width: 82%;
  font-family: var(--font-public-sans);
  font-size: 15px;
  font-style: italic;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.video-cut-visual .timeline-video {
  grid-template-columns: 1.25fr 0.08fr 1.4fr 0.08fr;
}

.video-cut-visual .timeline-video mark,
.video-cut-visual .timeline-playhead {
  animation: none;
}

.video-cut-visual .video-status {
  position: static;
  right: auto;
  bottom: auto;
  left: auto;
  width: 100%;
  align-self: stretch;
}

.seo-visual {
  min-height: 320px;
  grid-template-rows: 34px minmax(214px, 1fr) 34px;
  padding: 12px;
}

.seo-result-card {
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  justify-content: stretch;
  gap: 0;
  padding: 10px 14px;
}

.seo-result-card > .seo-check-row {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 0 4px;
  border: 0;
  border-bottom: 1px solid var(--rule-soft);
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  opacity: 1;
}

.seo-result-card > .seo-check-row:last-of-type {
  border-bottom: 0;
}

.seo-check-row b {
  font-size: 12px;
  font-weight: 570;
}

.seo-check-row em {
  flex: none;
  padding: 4px 7px;
  border-radius: 999px;
  font-family: var(--font-family-mono);
  font-size: 9px;
  font-style: normal;
  text-transform: uppercase;
}

.seo-check-row em[data-tone="good"] {
  color: var(--good);
  background: oklch(from var(--good) l c h / 0.09);
}

.seo-check-row em[data-tone="warning"] {
  color: oklch(0.72 0.13 75);
  background: oklch(0.72 0.13 75 / 0.1);
}

.seo-check-row em[data-tone="issue"] {
  color: var(--brand-soft);
  background: oklch(from var(--brand) l c h / 0.1);
}

.seo-check-row em[data-tone="opportunity"] {
  color: oklch(0.69 0.12 245);
  background: oklch(0.69 0.12 245 / 0.1);
}

.capability-seo .seo-result-scan {
  animation: none;
}

.capability-seo .seo-status {
  position: static;
  right: auto;
  bottom: auto;
  left: auto;
  width: 100%;
}

.capability-card.is-preview-playing.capability-seo .seo-check-row:nth-child(1) {
  animation: seo-row-resolve-once 380ms cubic-bezier(0.22, 1, 0.36, 1) 1020ms both;
}

.capability-card.is-preview-playing.capability-seo .seo-check-row:nth-child(2) {
  animation: seo-row-resolve-once 380ms cubic-bezier(0.22, 1, 0.36, 1) 1270ms both;
}

.capability-card.is-preview-playing.capability-seo .seo-check-row:nth-child(3) {
  animation: seo-row-resolve-once 380ms cubic-bezier(0.22, 1, 0.36, 1) 1520ms both;
}

.capability-card.is-preview-playing.capability-seo .seo-check-row:nth-child(4) {
  animation: seo-row-resolve-once 380ms cubic-bezier(0.22, 1, 0.36, 1) 1770ms both;
}

.ads-visual {
  min-height: 326px;
  grid-template-rows: 32px minmax(214px, 1fr) 34px;
  padding: 12px;
}

.capability-ads .ad-creative-frame::after {
  display: none;
  animation: none;
}

.capability-card.is-preview-playing.capability-ads .ad-creative-frame::after {
  display: block;
  animation: creative-glint-once 720ms ease-out 1260ms both;
}

.capability-ads .ads-status {
  position: static;
  right: auto;
  bottom: auto;
  left: auto;
  width: 100%;
}

.capability-card.is-preview-playing.capability-ads .ad-studio-bar i:nth-child(1) {
  animation: angle-resolve-once 320ms ease 160ms both;
}

.capability-card.is-preview-playing.capability-ads .ad-studio-bar i:nth-child(2) {
  animation: angle-resolve-once 320ms ease 390ms both;
}

.capability-card.is-preview-playing.capability-ads .ad-studio-bar i:nth-child(3) {
  animation: angle-resolve-once 320ms ease 620ms both;
}

@keyframes preview-working-text {
  0%, 78% { visibility: visible; opacity: 1; }
  100% { visibility: hidden; opacity: 0; }
}

@keyframes preview-status-tone {
  0%, 76% {
    border-color: oklch(from var(--brand) l c h / 0.28);
    background: oklch(from var(--brand) l c h / 0.055);
  }
  100% {
    border-color: oklch(from var(--good) l c h / 0.3);
    background: oklch(from var(--good) l c h / 0.07);
  }
}

@keyframes preview-working-dot {
  0% { opacity: 0.55; transform: scale(0.78); background: var(--brand); }
  72% { opacity: 1; transform: scale(1); background: var(--brand); }
  100% { opacity: 1; transform: scale(1); background: var(--good); }
}

@keyframes preview-final-text {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes seo-row-resolve-once {
  from { opacity: 0.25; transform: translateX(-6px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes angle-resolve-once {
  from { opacity: 0.3; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes video-track-tighten-once {
  0%, 34% { grid-template-columns: 1.25fr 0.55fr 1.4fr 0.6fr; }
  52%, 66% { grid-template-columns: 1.25fr 0.08fr 1.4fr 0.6fr; }
  84%, 100% { grid-template-columns: 1.25fr 0.08fr 1.4fr 0.08fr; }
}

@media (max-width: 1100px) {
  .capability-grid {
    width: min(720px, 100%);
    grid-template-columns: minmax(0, 1fr);
    margin-inline: auto;
  }
}

@media (max-width: 520px) {
  .capability-intro {
    display: block;
  }

  .capability-intro h2 {
    max-width: none;
    font-size: 36px;
  }

  .capability-grid {
    gap: 16px;
    padding-inline: 0;
  }

  .capability-card {
    min-height: 470px;
  }

  .capability-visual {
    min-height: 320px;
  }

  .video-cut-visual,
  .seo-visual {
    min-height: 326px;
  }

  .ads-visual {
    min-height: 344px;
    grid-template-rows: 50px minmax(214px, 1fr) 34px;
  }

  .video-editor-stage p {
    font-size: 18px;
  }

  .video-duration {
    font-size: 9px;
  }

  .seo-result-card > strong {
    font-size: 19px;
  }

  .ad-studio-bar {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
  }

  .ad-studio-bar > span {
    display: block;
    font-size: 8px;
  }
}

.side-nav-item:focus-visible,
.side-product:focus-visible,
.theme-toggle:focus-visible,
.account-button:focus-visible,
.session-tabs button:focus-visible,
.brief-cta:focus-visible,
.demo-delivery button:focus-visible,
.capability-body button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

@keyframes vg-cursor-blink {
  0%, 44% {
    opacity: 1;
  }

  45%, 100% {
    opacity: 0;
  }
}

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

  .capability-card,
  .capability-audit .audit-focus,
  .capability-launch .campaign-lane i,
  .capability-outreach .prospect-signals > span,
  .cut-range,
  .video-playhead,
  .seo-domain > i::before,
  .seo-scan,
  .seo-map > span,
  .seo-checks li,
  .ad-angle-stack > article {
    animation: none;
  }

  .timeline-video mark,
  .timeline-playhead,
  .seo-result-scan,
  .ad-creative-frame::after {
    animation: none;
  }

  .capability-card.is-preview-playing .audit-page-mini::before,
  .capability-card.is-preview-playing .audit-focus,
  .capability-card.is-preview-playing .audit-summary,
  .capability-card.is-preview-playing .campaign-lane i,
  .capability-card.is-preview-playing .campaign-return,
  .capability-card.is-preview-playing .campaign-status,
  .capability-card.is-preview-playing .prospect-signals > span,
  .capability-card.is-preview-playing .message-preview-mini,
  .capability-card.is-preview-playing .preview-status,
  .capability-card.is-preview-playing .preview-status > span,
  .capability-card.is-preview-playing .preview-status > span i,
  .capability-card.is-preview-playing .preview-status > strong,
  .capability-card.is-preview-playing .timeline-video,
  .capability-card.is-preview-playing .timeline-video mark,
  .capability-card.is-preview-playing .timeline-playhead,
  .capability-card.is-preview-playing .video-duration,
  .capability-card.is-preview-playing .video-editor-bar em,
  .capability-card.is-preview-playing .seo-result-scan,
  .capability-card.is-preview-playing .seo-signal-row > span,
  .capability-card.is-preview-playing .seo-check-row,
  .capability-card.is-preview-playing .ad-preview-card > header,
  .capability-card.is-preview-playing .ad-preview-card > p,
  .capability-card.is-preview-playing .ad-creative-frame,
  .capability-card.is-preview-playing .ad-preview-card > footer,
  .capability-card.is-preview-playing .ad-creative-frame::after {
    animation: none !important;
  }

  .capability-card.is-preview-playing .ad-creative-frame::after {
    display: none !important;
  }

  .capability-card,
  .capability-visual,
  .capability-body button span {
    transition: none;
  }

  .capability-card:hover,
  .capability-card:focus-within,
  .capability-card:hover .capability-visual,
  .capability-card:focus-within .capability-visual {
    transform: none;
  }
}

/*
 * Static capability artifacts
 *
 * These cards are a gallery of finished deliverables, not miniature product
 * demos. Keep every preview still, legible, and focused on one artifact.
 */

.capability-card:not(.showcase-card),
.capability-card:not(.showcase-card) *,
.capability-card:not(.showcase-card)::before,
.capability-card:not(.showcase-card)::after,
.capability-card:not(.showcase-card) *::before,
.capability-card:not(.showcase-card) *::after {
  animation: none !important;
}

.capability-card {
  min-height: 468px;
  border-color: var(--rule);
  border-radius: 14px;
  box-shadow: 0 10px 32px oklch(0 0 0 / 0.08);
  transform: none !important;
  transition: none;
}

.capability-card::after {
  display: none;
}

.capability-card:hover,
.capability-card:focus-within {
  border-color: var(--rule);
  box-shadow: 0 10px 32px oklch(0 0 0 / 0.08);
  transform: none;
}

.capability-card:hover .capability-visual,
.capability-card:focus-within .capability-visual {
  transform: none;
}

.capability-artifact {
  display: grid;
  min-height: 276px;
  place-items: center;
  padding: 22px;
  background: var(--paper-2);
  background-image: none;
  transform: none !important;
  transition: none;
}

.artifact-sheet {
  display: flex;
  width: min(100%, 480px);
  min-height: 218px;
  flex-direction: column;
  justify-content: flex-start;
  padding: 18px 20px;
  border: 1px solid var(--rule);
  border-radius: 11px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 12px 30px oklch(0 0 0 / 0.08);
}

.artifact-sheet-head {
  display: flex;
  min-height: 22px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--font-family-mono);
  font-size: 10px;
  line-height: 1;
}

.artifact-sheet-head span {
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.artifact-sheet-head em {
  min-width: 0;
  color: var(--ink-dim);
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.artifact-sheet-title {
  display: block;
  margin: 18px 0 10px;
  font-family: var(--font-public-serif);
  font-size: 27px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
}

.artifact-result-list,
.launch-plan-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.artifact-result-list {
  display: grid;
  margin-top: auto;
}

.artifact-result-list li {
  display: grid;
  min-height: 40px;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--rule-soft);
}

.artifact-result-list li > span {
  font-family: var(--font-family-mono);
  font-size: 10px;
  color: var(--brand);
}

.artifact-result-list li > strong {
  min-width: 0;
  font-size: 13px;
  font-weight: 580;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.artifact-result-list em,
.launch-plan-list > li > em {
  flex: none;
  padding: 4px 7px;
  border-radius: 999px;
  font-family: var(--font-family-mono);
  font-size: 9px;
  font-style: normal;
  line-height: 1;
  white-space: nowrap;
}

.artifact-result-list em[data-tone="test"],
.artifact-result-list em[data-tone="opportunity"] {
  color: oklch(0.68 0.13 245);
  background: oklch(0.68 0.13 245 / 0.1);
}

.artifact-result-list em[data-tone="missing"] {
  color: var(--brand-soft);
  background: oklch(from var(--brand) l c h / 0.1);
}

.artifact-result-list em[data-tone="review"],
.artifact-result-list em[data-tone="warning"] {
  color: oklch(0.72 0.13 75);
  background: oklch(0.72 0.13 75 / 0.1);
}

/* Launch plan: one readable schedule, with phases instead of a dense chart. */

.launch-plan-list {
  display: grid;
  margin-top: 4px;
}

.launch-plan-list > li {
  display: grid;
  min-height: 45px;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border-top: 1px solid var(--rule-soft);
}

.launch-plan-list > li > span {
  font-family: var(--font-family-mono);
  font-size: 10px;
  color: var(--brand);
}

.launch-plan-list > li > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.launch-plan-list strong,
.launch-plan-list small {
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.launch-plan-list strong {
  font-size: 13px;
  font-weight: 600;
}

.launch-plan-list small {
  font-size: 10px;
  color: var(--ink-dim);
}

.launch-plan-list > li > em {
  color: var(--ink-muted);
  background: var(--paper-2);
}

/* Outreach: the draft is the artifact; the research source is supporting context. */

.email-sheet {
  justify-content: flex-start;
}

.email-source,
.email-subject {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.email-source span,
.email-subject span {
  font-family: var(--font-family-mono);
  font-size: 9px;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.email-source strong,
.email-subject strong {
  min-width: 0;
  font-size: 12px;
  font-weight: 580;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.email-source strong {
  color: var(--good);
}

.email-sheet > p {
  max-width: 41ch;
  margin: 15px 0 0;
  font-size: 14px;
  line-height: 1.48;
  color: var(--ink-muted);
}

/* Video: a still edit decision list, not a simulated editor. */

.cut-sheet {
  justify-content: flex-start;
}

.cut-duration {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin: 21px 0 17px;
  font-family: var(--font-family-mono);
  font-size: 16px;
  font-weight: 550;
}

.cut-duration i {
  color: var(--brand);
  font-style: normal;
}

.static-cut-track {
  display: grid;
  min-height: 40px;
  grid-template-columns: 1.4fr 0.72fr 1.6fr 0.72fr 1.15fr;
  gap: 4px;
}

.static-cut-track span,
.static-cut-track mark {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-radius: 5px;
  font-family: var(--font-family-mono);
  font-size: 9px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.static-cut-track span {
  color: oklch(0.86 0.03 245);
  background: oklch(0.43 0.1 245 / 0.7);
}

.static-cut-track mark {
  border: 1px solid oklch(from var(--brand) l c h / 0.45);
  color: var(--brand-soft);
  background: oklch(from var(--brand) l c h / 0.1);
}

.cut-sheet > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
  font-family: var(--font-family-mono);
  font-size: 9px;
}

.cut-sheet > footer strong {
  color: var(--good);
  font-weight: 550;
}

.cut-sheet > footer span {
  color: var(--ink-dim);
}

/* SEO uses the same report language as the conversion audit. */

.seo-result-list li {
  grid-template-columns: minmax(0, 1fr) auto;
}

/* Ad creative: show one finished placement, not a cycling variant studio. */

.static-ad-sheet {
  min-height: 228px;
  padding: 14px 16px;
}

.static-ad-sheet .artifact-sheet-head {
  padding-bottom: 8px;
}

.static-ad-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
}

.static-ad-head > b {
  display: grid;
  width: 28px;
  height: 28px;
  flex: none;
  place-items: center;
  border-radius: 50%;
  color: oklch(0.98 0 0);
  background: var(--brand);
  font-size: 10px;
}

.static-ad-head > span {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.static-ad-head strong {
  font-size: 11px;
}

.static-ad-head small {
  font-size: 9px;
  color: var(--ink-dim);
}

.static-ad-sheet > p {
  margin: 9px 0 7px;
  font-size: 12px;
}

.static-ad-creative {
  display: flex;
  min-height: 78px;
  flex-direction: column;
  justify-content: space-between;
  padding: 13px 15px;
  border-radius: 7px;
  color: oklch(0.98 0.006 80);
  background:
    radial-gradient(circle at 88% 20%, oklch(0.92 0.12 28 / 0.78), transparent 24%),
    linear-gradient(135deg, oklch(0.2 0.035 278), oklch(0.1 0.018 270) 56%, oklch(0.48 0.17 27));
}

.static-ad-creative span {
  font-family: var(--font-family-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
}

.static-ad-creative strong {
  font-family: var(--font-public-serif);
  font-size: 23px;
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: -0.03em;
}

.static-ad-sheet > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  font-size: 9px;
}

.static-ad-sheet > footer span {
  color: var(--ink-dim);
}

.static-ad-sheet > footer strong {
  padding: 5px 9px;
  border-radius: 5px;
  color: var(--paper);
  background: var(--ink);
  font-size: 9px;
}

.capability-body button,
.capability-body button span {
  transition: none;
}

.capability-body button:hover span,
.capability-body button:focus-visible span {
  transform: none;
}

@media (max-width: 520px) {
  .capability-artifact {
    min-height: 258px;
    padding: 15px;
  }

  .artifact-sheet {
    min-height: 216px;
    padding: 16px;
  }

  .artifact-sheet-title {
    font-size: 24px;
  }

  .launch-plan-list > li {
    grid-template-columns: 22px minmax(0, 1fr);
  }

  .launch-plan-list > li > em {
    display: none;
  }

  .static-cut-track {
    grid-template-columns: 1.2fr 0.7fr 1.35fr 0.7fr 1fr;
  }

  .static-cut-track span,
  .static-cut-track mark {
    padding: 0 3px;
    font-size: 8px;
  }

  .cut-sheet > footer span {
    display: none;
  }
}

/*
 * Capability stories
 *
 * JavaScript advances data-preview-step from 0 through 3. Each state keeps the
 * artifact readable, preserves completed work, and transitions one meaningful
 * part of the deliverable. There are deliberately no replay keyframes here.
 */

.capability-card[data-preview-step] {
  --story-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --story-speed: 560ms;
}

.capability-card[data-preview-step] .capability-artifact {
  position: relative;
  padding-bottom: 36px;
}

.capability-card[data-preview-step] .artifact-sheet {
  position: relative;
  transition:
    border-color var(--story-speed) ease,
    box-shadow var(--story-speed) ease;
}

.capability-card[data-preview-step] .capability-artifact::after {
  position: absolute;
  z-index: 2;
  bottom: 12px;
  font-family: var(--font-family-mono);
  font-size: 9px;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0.04em;
  pointer-events: none;
}

.capability-card[data-preview-step] .capability-artifact::after {
  left: 26px;
  right: 26px;
  color: var(--ink-muted);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 360ms ease;
}

.capability-card[data-preview-state="complete"] .capability-artifact::after {
  color: var(--good);
}

.capability-card[data-preview-step="3"] .artifact-sheet {
  border-color: oklch(from var(--good) l c h / 0.24);
  box-shadow: 0 14px 32px oklch(0 0 0 / 0.1);
}

/* Website audit: inspect one dimension at a time, then hold the prioritized report. */

.capability-audit[data-preview-step] .artifact-result-list li,
.capability-seo[data-preview-step] .artifact-result-list li {
  padding-inline: 5px;
  border-radius: 5px;
  color: var(--ink-muted);
  box-shadow: inset 2px 0 0 transparent;
  transition:
    color 360ms ease,
    background-color var(--story-speed) ease,
    box-shadow var(--story-speed) ease,
    transform var(--story-speed) var(--story-ease);
}

.capability-audit[data-preview-step] .artifact-result-list em,
.capability-seo[data-preview-step] .artifact-result-list em {
  clip-path: inset(0 100% 0 0);
  opacity: 0.68;
  filter: saturate(0.45);
  transition:
    clip-path 620ms var(--story-ease),
    opacity 360ms ease,
    filter var(--story-speed) ease,
    transform var(--story-speed) var(--story-ease);
}

.capability-audit[data-preview-step] .capability-artifact::after { content: "3 findings prioritized"; }

.capability-audit:is([data-preview-step="1"], [data-preview-step="2"], [data-preview-step="3"]) .artifact-result-list li:nth-child(1),
.capability-audit:is([data-preview-step="2"], [data-preview-step="3"]) .artifact-result-list li:nth-child(2),
.capability-audit[data-preview-step="3"] .artifact-result-list li:nth-child(3) {
  color: var(--ink);
  background: oklch(from var(--brand) l c h / 0.055);
  box-shadow: inset 2px 0 0 oklch(from var(--brand) l c h / 0.72);
  transform: translateX(3px);
}

.capability-audit:is([data-preview-step="1"], [data-preview-step="2"], [data-preview-step="3"]) .artifact-result-list li:nth-child(1) em,
.capability-audit:is([data-preview-step="2"], [data-preview-step="3"]) .artifact-result-list li:nth-child(2) em,
.capability-audit[data-preview-step="3"] .artifact-result-list li:nth-child(3) em {
  clip-path: inset(0);
  opacity: 1;
  filter: none;
  transform: translateX(-2px);
}

.capability-audit[data-preview-step="3"] .artifact-result-list li {
  background: oklch(from var(--brand) l c h / 0.045);
  box-shadow: inset 2px 0 0 oklch(from var(--brand) l c h / 0.58);
}

/* Launch planning: populate the three phases and retain every completed phase. */

.capability-launch[data-preview-step] .launch-plan-list > li {
  padding-inline: 5px;
  border-radius: 5px;
  color: var(--ink-muted);
  box-shadow: inset 2px 0 0 transparent;
  transition:
    color 360ms ease,
    background-color var(--story-speed) ease,
    box-shadow var(--story-speed) ease,
    transform var(--story-speed) var(--story-ease);
}

.capability-launch[data-preview-step] .launch-plan-list > li > span,
.capability-launch[data-preview-step] .launch-plan-list > li > em,
.capability-launch[data-preview-step] .launch-plan-list small {
  opacity: 0.62;
  transition:
    clip-path 620ms var(--story-ease),
    color 360ms ease,
    background-color 360ms ease,
    opacity 360ms ease,
    transform var(--story-speed) var(--story-ease);
}

.capability-launch[data-preview-step] .launch-plan-list > li > em,
.capability-launch[data-preview-step] .launch-plan-list small {
  clip-path: inset(0 100% 0 0);
}

.capability-launch[data-preview-step] .capability-artifact::after { content: "14-day launch plan"; }

.capability-launch:is([data-preview-step="1"], [data-preview-step="2"], [data-preview-step="3"]) .launch-plan-list > li:nth-child(1),
.capability-launch:is([data-preview-step="2"], [data-preview-step="3"]) .launch-plan-list > li:nth-child(2),
.capability-launch[data-preview-step="3"] .launch-plan-list > li:nth-child(3) {
  color: var(--ink);
  background: oklch(from var(--brand) l c h / 0.05);
  box-shadow: inset 2px 0 0 oklch(from var(--brand) l c h / 0.65);
  transform: translateX(3px);
}

.capability-launch:is([data-preview-step="1"], [data-preview-step="2"], [data-preview-step="3"]) .launch-plan-list > li:nth-child(1) > span,
.capability-launch:is([data-preview-step="1"], [data-preview-step="2"], [data-preview-step="3"]) .launch-plan-list > li:nth-child(1) > em,
.capability-launch:is([data-preview-step="1"], [data-preview-step="2"], [data-preview-step="3"]) .launch-plan-list > li:nth-child(1) small,
.capability-launch:is([data-preview-step="2"], [data-preview-step="3"]) .launch-plan-list > li:nth-child(2) > span,
.capability-launch:is([data-preview-step="2"], [data-preview-step="3"]) .launch-plan-list > li:nth-child(2) > em,
.capability-launch:is([data-preview-step="2"], [data-preview-step="3"]) .launch-plan-list > li:nth-child(2) small,
.capability-launch[data-preview-step="3"] .launch-plan-list > li:nth-child(3) > span,
.capability-launch[data-preview-step="3"] .launch-plan-list > li:nth-child(3) > em,
.capability-launch[data-preview-step="3"] .launch-plan-list > li:nth-child(3) small {
  opacity: 1;
}

.capability-launch:is([data-preview-step="1"], [data-preview-step="2"], [data-preview-step="3"]) .launch-plan-list > li:nth-child(1) > em,
.capability-launch:is([data-preview-step="1"], [data-preview-step="2"], [data-preview-step="3"]) .launch-plan-list > li:nth-child(1) small,
.capability-launch:is([data-preview-step="2"], [data-preview-step="3"]) .launch-plan-list > li:nth-child(2) > em,
.capability-launch:is([data-preview-step="2"], [data-preview-step="3"]) .launch-plan-list > li:nth-child(2) small,
.capability-launch[data-preview-step="3"] .launch-plan-list > li:nth-child(3) > em,
.capability-launch[data-preview-step="3"] .launch-plan-list > li:nth-child(3) small {
  clip-path: inset(0);
}

.capability-launch[data-preview-step="3"] .launch-plan-list > li {
  background: oklch(from var(--brand) l c h / 0.04);
  transform: translateX(2px);
}

/* Outreach: preserve the evidence chain from captured source to reviewable draft. */

.capability-outreach[data-preview-step] .email-source,
.capability-outreach[data-preview-step] .email-subject,
.capability-outreach[data-preview-step] .email-sheet > p {
  color: var(--ink-muted);
  box-shadow: inset 2px 0 0 transparent;
  transition:
    color 360ms ease,
    background-color var(--story-speed) ease,
    box-shadow var(--story-speed) ease,
    transform var(--story-speed) var(--story-ease);
}

.capability-outreach[data-preview-step] .email-source,
.capability-outreach[data-preview-step] .email-subject {
  padding-inline: 6px;
  border-radius: 5px;
}

.capability-outreach[data-preview-step] .email-sheet > p {
  margin-inline: 0;
  padding: 8px 7px;
  border-radius: 6px;
}

.capability-outreach[data-preview-step] .email-source strong,
.capability-outreach[data-preview-step] .email-subject strong,
.capability-outreach[data-preview-step] .email-sheet > p {
  clip-path: inset(0 100% 0 0);
  transition:
    clip-path 650ms var(--story-ease),
    color 360ms ease,
    background-color var(--story-speed) ease,
    box-shadow var(--story-speed) ease,
    transform var(--story-speed) var(--story-ease);
}

.capability-outreach[data-preview-step] .capability-artifact::after { content: "Sourced draft · Review mode"; }

.capability-outreach:is([data-preview-step="1"], [data-preview-step="2"], [data-preview-step="3"]) .email-source {
  color: var(--ink);
  background: oklch(from var(--good) l c h / 0.055);
  box-shadow: inset 2px 0 0 oklch(from var(--good) l c h / 0.74);
  transform: translateX(3px);
}

.capability-outreach:is([data-preview-step="1"], [data-preview-step="2"], [data-preview-step="3"]) .email-source strong {
  clip-path: inset(0);
}

.capability-outreach:is([data-preview-step="2"], [data-preview-step="3"]) .email-subject {
  color: var(--ink);
  background: oklch(from var(--brand) l c h / 0.055);
  box-shadow: inset 2px 0 0 oklch(from var(--brand) l c h / 0.68);
  transform: translateX(3px);
}

.capability-outreach:is([data-preview-step="2"], [data-preview-step="3"]) .email-subject strong {
  clip-path: inset(0);
}

.capability-outreach[data-preview-step="3"] .email-sheet > p {
  clip-path: inset(0);
  color: var(--ink);
  background: var(--paper-2);
  box-shadow: inset 2px 0 0 oklch(from var(--brand) l c h / 0.68);
  transform: translateX(3px);
}

/* Video edit: identify removals, compress the timeline, then hold review state. */

.capability-video[data-preview-step] .static-cut-track {
  transition: grid-template-columns 760ms var(--story-ease);
}

.capability-video[data-preview-step] .static-cut-track mark {
  opacity: 0.74;
  transform-origin: center;
  transition:
    color 360ms ease,
    background-color 360ms ease,
    border-color 360ms ease,
    opacity 640ms ease,
    transform 760ms var(--story-ease);
}

.capability-video[data-preview-step] .cut-duration span,
.capability-video[data-preview-step] .cut-duration i,
.capability-video[data-preview-step] .cut-sheet > footer strong {
  transition:
    color 360ms ease,
    background-color 360ms ease,
    box-shadow 360ms ease,
    transform var(--story-speed) var(--story-ease);
}

.capability-video[data-preview-step] .cut-duration span {
  padding: 5px 7px;
  border-radius: 5px;
}

.capability-video[data-preview-step] .capability-artifact::after { content: "Raw 03:24 → First cut 01:48"; }

.capability-video[data-preview-step="0"] .cut-duration span:first-child {
  color: var(--ink);
  background: var(--paper-2);
}

.capability-video:is([data-preview-step="1"], [data-preview-step="2"], [data-preview-step="3"]) .static-cut-track mark {
  opacity: 1;
  border-color: oklch(from var(--brand) l c h / 0.72);
  color: var(--brand-soft);
  background: oklch(from var(--brand) l c h / 0.18);
  transform: translateY(-3px);
}

.capability-video:is([data-preview-step="2"], [data-preview-step="3"]) .static-cut-track {
  grid-template-columns: 1.4fr 0.12fr 1.6fr 0.12fr 1.15fr;
}

.capability-video:is([data-preview-step="2"], [data-preview-step="3"]) .static-cut-track mark {
  opacity: 0.38;
  transform: translateY(0) scaleX(0.62);
}

.capability-video:is([data-preview-step="2"], [data-preview-step="3"]) .cut-duration i {
  color: var(--good);
  transform: translateX(3px);
}

.capability-video:is([data-preview-step="2"], [data-preview-step="3"]) .cut-duration span:last-child {
  color: var(--ink);
  background: oklch(from var(--good) l c h / 0.075);
  box-shadow: inset 0 0 0 1px oklch(from var(--good) l c h / 0.18);
}

.capability-video[data-preview-step="3"] .cut-sheet > footer strong {
  color: var(--good);
  transform: translateX(2px);
}

/* SEO audit: rank each evidence group, finishing with a stable action plan. */

.capability-seo[data-preview-step] .capability-artifact::after { content: "Prioritized SEO action plan"; }

.capability-seo:is([data-preview-step="1"], [data-preview-step="2"], [data-preview-step="3"]) .artifact-result-list li:nth-child(1),
.capability-seo:is([data-preview-step="2"], [data-preview-step="3"]) .artifact-result-list li:nth-child(2),
.capability-seo[data-preview-step="3"] .artifact-result-list li:nth-child(3) {
  color: var(--ink);
  background: oklch(from var(--brand) l c h / 0.055);
  box-shadow: inset 2px 0 0 oklch(from var(--brand) l c h / 0.68);
  transform: translateX(3px);
}

.capability-seo:is([data-preview-step="1"], [data-preview-step="2"], [data-preview-step="3"]) .artifact-result-list li:nth-child(1) em,
.capability-seo:is([data-preview-step="2"], [data-preview-step="3"]) .artifact-result-list li:nth-child(2) em,
.capability-seo[data-preview-step="3"] .artifact-result-list li:nth-child(3) em {
  clip-path: inset(0);
  opacity: 1;
  filter: none;
  transform: translateX(-2px);
}

.capability-seo[data-preview-step="3"] .artifact-result-list li {
  background: oklch(from var(--brand) l c h / 0.04);
}

/* Ad creative: compare angles in place and resolve to the validated variant. */

.capability-ads[data-preview-step] .static-ad-creative {
  position: relative;
  display: block;
  overflow: hidden;
  background-position: 50% 50%;
  background-size: 150% 150%;
  transition:
    background-position 720ms var(--story-ease),
    box-shadow var(--story-speed) ease,
    transform var(--story-speed) var(--story-ease);
}

.capability-ads[data-preview-step] .ad-variant {
  position: absolute;
  inset: 13px 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0.035;
  transform: translateY(7px) scale(0.99);
  pointer-events: none;
  transition:
    opacity 520ms ease,
    transform 620ms var(--story-ease);
}

.capability-ads[data-preview-step] .ad-variant small {
  font-family: var(--font-family-mono);
  font-size: 9px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.capability-ads[data-preview-step] .ad-variant strong {
  font-family: var(--font-public-serif);
  font-size: 23px;
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: -0.03em;
}

.capability-ads[data-preview-step="0"] .ad-input,
.capability-ads[data-preview-step="1"] .ad-outcome,
.capability-ads[data-preview-step="2"] .ad-pain,
.capability-ads[data-preview-step="3"] .ad-ready {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.capability-ads:is([data-preview-step="1"], [data-preview-step="2"], [data-preview-step="3"]) .ad-input,
.capability-ads:is([data-preview-step="2"], [data-preview-step="3"]) .ad-outcome,
.capability-ads[data-preview-step="3"] .ad-pain {
  transform: translateY(-7px) scale(0.99);
}

.capability-ads[data-preview-step] .static-ad-sheet > footer strong {
  transition:
    color 360ms ease,
    background-color 360ms ease,
    box-shadow 360ms ease,
    transform var(--story-speed) var(--story-ease);
}

.capability-ads[data-preview-step] .capability-artifact::after { content: "3 angles · 9 validated variants"; }

.capability-ads[data-preview-step="1"] .static-ad-creative {
  background-position: 14% 50%;
}

.capability-ads[data-preview-step="2"] .static-ad-creative {
  background-position: 86% 50%;
}

.capability-ads[data-preview-step="3"] .static-ad-creative {
  box-shadow: inset 0 0 0 1px oklch(from var(--good) l c h / 0.34);
  transform: translateY(-1px);
}

.capability-ads[data-preview-step="3"] .static-ad-sheet > footer strong {
  color: oklch(0.98 0 0);
  background: var(--good);
  box-shadow: 0 5px 16px oklch(from var(--good) l c h / 0.18);
  transform: translateX(-2px);
}

@media (max-width: 520px) {
  .capability-card[data-preview-step] .capability-artifact::after {
    left: 18px;
    right: 18px;
  }
}

/* Reduced motion renders the completed artifact immediately. */

@media (prefers-reduced-motion: reduce) {
  .capability-card,
  .capability-card * {
    animation: none !important;
    transition: none !important;
  }

  .capability-audit[data-preview-step] .capability-artifact::after { content: "3 findings prioritized" !important; color: var(--good) !important; }
  .capability-launch[data-preview-step] .capability-artifact::after { content: "14-day plan ready" !important; color: var(--good) !important; }
  .capability-outreach[data-preview-step] .capability-artifact::after { content: "Draft ready for review" !important; color: var(--good) !important; }
  .capability-video[data-preview-step] .capability-artifact::after { content: "First cut ready · 01:48" !important; color: var(--good) !important; }
  .capability-seo[data-preview-step] .capability-artifact::after { content: "Prioritized action plan ready" !important; color: var(--good) !important; }
  .capability-ads[data-preview-step] .capability-artifact::after { content: "9 variants checked · ready" !important; color: var(--good) !important; }

  .capability-audit[data-preview-step] .artifact-result-list li,
  .capability-seo[data-preview-step] .artifact-result-list li,
  .capability-launch[data-preview-step] .launch-plan-list > li {
    color: var(--ink) !important;
    background: oklch(from var(--brand) l c h / 0.045) !important;
    box-shadow: inset 2px 0 0 oklch(from var(--brand) l c h / 0.58) !important;
    transform: translateX(2px) !important;
  }

  .capability-audit[data-preview-step] .artifact-result-list em,
  .capability-seo[data-preview-step] .artifact-result-list em,
  .capability-launch[data-preview-step] .launch-plan-list > li > span,
  .capability-launch[data-preview-step] .launch-plan-list > li > em,
  .capability-launch[data-preview-step] .launch-plan-list small {
    clip-path: inset(0) !important;
    opacity: 1 !important;
    filter: none !important;
  }

  .capability-outreach[data-preview-step] .email-source,
  .capability-outreach[data-preview-step] .email-subject,
  .capability-outreach[data-preview-step] .email-sheet > p {
    color: var(--ink) !important;
    box-shadow: inset 2px 0 0 oklch(from var(--brand) l c h / 0.62) !important;
    transform: translateX(3px) !important;
  }

  .capability-outreach[data-preview-step] .email-source { background: oklch(from var(--good) l c h / 0.055) !important; }
  .capability-outreach[data-preview-step] .email-subject { background: oklch(from var(--brand) l c h / 0.055) !important; }
  .capability-outreach[data-preview-step] .email-sheet > p { background: var(--paper-2) !important; }

  .capability-outreach[data-preview-step] .email-source strong,
  .capability-outreach[data-preview-step] .email-subject strong,
  .capability-outreach[data-preview-step] .email-sheet > p {
    clip-path: inset(0) !important;
  }

  .capability-video[data-preview-step] .static-cut-track {
    grid-template-columns: 1.4fr 0.12fr 1.6fr 0.12fr 1.15fr !important;
  }

  .capability-video[data-preview-step] .static-cut-track mark {
    opacity: 0.38 !important;
    transform: scaleX(0.62) !important;
  }

  .capability-video[data-preview-step] .cut-duration span:last-child {
    color: var(--ink) !important;
    background: oklch(from var(--good) l c h / 0.075) !important;
  }

  .capability-video[data-preview-step] .cut-sheet > footer strong { color: var(--good) !important; }

  .capability-ads[data-preview-step] .ad-variant {
    opacity: 0.035 !important;
    transform: translateY(-7px) scale(0.99) !important;
  }

  .capability-ads[data-preview-step] .ad-ready {
    opacity: 1 !important;
    transform: none !important;
  }

  .capability-ads[data-preview-step] .static-ad-sheet > footer strong {
    color: oklch(0.98 0 0) !important;
    background: var(--good) !important;
  }
}

/*
 * Capability reels
 *
 * Each card is a compact product film: a recognizable input, one visible
 * transformation, and a finished artifact. The caption stays still while the
 * preview moves so the value and action never disappear.
 */

.showcase-grid {
  width: 100%;
  grid-auto-rows: 1fr;
  gap: 18px;
  margin-inline: 0;
  padding-bottom: 56px;
}

.showcase-card {
  --showcase-duration: 10.8s;
  --showcase-delay: 0ms;
  display: grid;
  isolation: isolate;
  min-height: 0;
  grid-template-rows: 250px 132px;
  aspect-ratio: auto;
  border: 1px solid oklch(0.42 0.018 270);
  border-radius: 17px;
  color: oklch(0.97 0.006 82);
  background: oklch(0.105 0.014 270);
  box-shadow: 0 20px 54px oklch(0 0 0 / 0.22);
  overflow: hidden;
  transform: translateZ(0) !important;
  transition:
    border-color 240ms ease,
    box-shadow 280ms ease,
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.showcase-card.capability-video {
  --showcase-duration: 9s;
}

.showcase-card::after {
  display: none;
  z-index: 3;
  background: linear-gradient(180deg, transparent 32%, oklch(0.07 0.01 270 / 0.12) 49%, oklch(0.055 0.012 270 / 0.97) 82%);
  opacity: 1;
}

.showcase-card:hover,
.showcase-card:focus-within {
  border-color: oklch(from var(--brand) l c h / 0.75);
  box-shadow: 0 26px 70px oklch(0 0 0 / 0.32), 0 0 0 1px oklch(from var(--brand) l c h / 0.08);
  transform: translateY(-2px) scale(1.008) !important;
}

.showcase-stage {
  position: relative;
  z-index: 1;
  inset: auto;
  width: 100%;
  height: 250px;
  min-height: 250px;
  grid-row: 1;
  border: 0;
  background: oklch(0.105 0.014 270);
  overflow: hidden;
  transform: none;
}

.showcase-card:hover .showcase-stage,
.showcase-card:focus-within .showcase-stage {
  transform: none;
}

.showcase-glow {
  position: absolute;
  width: 62%;
  aspect-ratio: 1;
  top: -38%;
  right: -14%;
  border-radius: 50%;
  background: var(--showcase-glow, oklch(from var(--brand) l c h / 0.2));
  filter: blur(54px);
  opacity: 0.82;
  pointer-events: none;
}

.showcase-stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(oklch(1 0 0 / 0.035) 1px, transparent 1px),
    linear-gradient(90deg, oklch(1 0 0 / 0.035) 1px, transparent 1px);
  background-size: 25px 25px;
  mask-image: linear-gradient(to bottom, black, black 68%, transparent 92%);
  opacity: 0.72;
}

.showcase-stage::after {
  content: "";
  position: absolute;
  z-index: 7;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.035);
  pointer-events: none;
}

.showcase-result {
  position: absolute;
  z-index: 8;
  top: 14px;
  right: 14px;
  display: flex;
  max-width: calc(100% - 28px);
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid oklch(1 0 0 / 0.13);
  border-radius: 999px;
  color: oklch(0.92 0.008 85);
  background: oklch(0.08 0.012 270 / 0.72);
  box-shadow: 0 7px 22px oklch(0 0 0 / 0.2);
  backdrop-filter: blur(12px);
  font-family: var(--font-public-sans);
  line-height: 1;
  white-space: nowrap;
}

.showcase-result span {
  color: oklch(0.78 0.14 145);
  font-family: var(--font-family-mono);
  font-size: 10px;
  letter-spacing: 0.045em;
}

.showcase-result strong {
  min-width: 0;
  font-size: 12px;
  font-weight: 580;
  text-overflow: ellipsis;
  overflow: hidden;
}

.showcase-progress {
  position: absolute;
  z-index: 9;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  overflow: hidden;
}

.showcase-progress::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--brand), oklch(0.82 0.16 48), var(--brand-soft));
  opacity: 0;
}

.showcase-card.is-showcase-active .showcase-progress::after {
  animation: showcase-progress var(--showcase-duration) linear var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .showcase-result {
  animation: showcase-result-cycle var(--showcase-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-static .showcase-result {
  opacity: 1;
  transform: none;
}

.showcase-card.is-showcase-static .launch-board {
  opacity: 0.26;
}

.showcase-card.is-showcase-static .launch-ready-card {
  opacity: 1;
  transform: none;
}

.showcase-card.is-showcase-static .video-source-stack {
  opacity: 0;
}

.showcase-card.is-showcase-static .video-phone {
  opacity: 1;
  transform: translateX(-6px) rotate(0deg) scale(1.03);
  filter: saturate(1);
}

.showcase-card.is-showcase-static .signal-stack,
.showcase-card.is-showcase-static .seo-site-map {
  opacity: 0.42;
}

/* Waiting cards hold the opening frame; reduced-motion cards use the final. */

.showcase-card.is-showcase-idle .showcase-result {
  opacity: 0;
  transform: translateY(-6px) scale(0.97);
}

.showcase-card.is-showcase-idle .audit-page-before {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.showcase-card.is-showcase-idle .audit-page-after {
  opacity: 0;
  transform: translateX(2%) scale(0.985);
}

.showcase-card.is-showcase-idle .launch-brief-card {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

.showcase-card.is-showcase-idle .launch-board {
  opacity: 0.16;
  transform: translateY(9px) scale(0.97);
}

.showcase-card.is-showcase-idle .launch-asset,
.showcase-card.is-showcase-idle .launch-ready-card,
.showcase-card.is-showcase-idle .launch-playhead {
  opacity: 0;
}

.showcase-card.is-showcase-idle .video-source-stack {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.showcase-card.is-showcase-idle .video-phone {
  opacity: 0;
  transform: translateX(0) rotate(2.5deg) scale(0.92);
  filter: saturate(0.72);
}

.showcase-card.is-showcase-idle .video-rail-track mark {
  opacity: 0.5;
  transform: scaleY(1);
}

.showcase-card.is-showcase-idle .video-rail-track b,
.showcase-card.is-showcase-idle .outreach-route,
.showcase-card.is-showcase-idle .seo-crawler {
  opacity: 0;
}

.showcase-card.is-showcase-idle .outreach-draft-card {
  opacity: 0.2;
  transform: translateX(12px) scale(0.98);
}

.showcase-card.is-showcase-idle .outreach-draft-card > p,
.showcase-card.is-showcase-idle .outreach-copy span,
.showcase-card.is-showcase-idle .outreach-copy b {
  opacity: 0.08;
  transform: translateY(5px);
}

.showcase-card.is-showcase-idle .ad-offer-card {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

.showcase-card.is-showcase-idle .ad-concept,
.showcase-card.is-showcase-idle .ad-platform-checks,
.showcase-card.is-showcase-idle .seo-evidence-card,
.showcase-card.is-showcase-idle .seo-fix-card {
  opacity: 0;
}

.showcase-caption {
  position: relative;
  z-index: 6;
  inset: auto;
  display: grid;
  height: 132px;
  min-height: 132px;
  grid-row: 2;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px;
  padding: 20px 20px 18px;
  border-top: 1px solid oklch(1 0 0 / 0.08);
  color: oklch(0.98 0.005 85);
  background: linear-gradient(180deg, oklch(0.07 0.012 270), oklch(0.05 0.012 270));
  box-sizing: border-box;
}

.showcase-caption > div {
  min-width: 0;
  align-self: end;
}

.showcase-caption .capability-skill {
  display: block;
  margin-bottom: 6px;
  color: var(--brand-soft);
  font-family: var(--font-public-sans);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.015em;
  text-transform: none;
}

.showcase-caption h3 {
  margin: 0;
  color: inherit;
  font-family: var(--font-public-serif);
  font-size: clamp(20px, 1.5vw, 23px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.showcase-caption p {
  margin: 6px 0 0;
  color: oklch(0.76 0.008 85);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.showcase-caption button {
  display: inline-flex;
  width: auto;
  min-width: 132px;
  min-height: 39px;
  align-items: center;
  justify-content: center;
  align-self: end;
  padding: 0 13px;
  border: 1px solid oklch(0.96 0.006 80 / 0.85);
  border-radius: 999px;
  color: oklch(0.15 0.01 270);
  background: oklch(0.97 0.006 82);
  box-shadow: 0 8px 24px oklch(0 0 0 / 0.22);
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease !important;
}

.showcase-caption button span {
  display: inline-block;
  width: 14px;
  margin-left: 6px;
  color: var(--brand);
  transition: transform 180ms ease !important;
}

.showcase-caption button:hover,
.showcase-caption button:focus-visible {
  border-color: var(--brand-soft);
  color: oklch(0.98 0.005 85);
  background: var(--brand);
  transform: translateY(-1px);
}

.showcase-caption button:hover span,
.showcase-caption button:focus-visible span {
  color: currentColor;
  transform: translateX(3px);
}

/* Website audit: the live page is inspected, then rewritten into a test. */

.audit-showcase {
  --showcase-glow: oklch(0.68 0.2 24 / 0.24);
  background:
    radial-gradient(circle at 12% 15%, oklch(0.42 0.12 282 / 0.25), transparent 34%),
    linear-gradient(145deg, oklch(0.12 0.018 270), oklch(0.07 0.012 270));
}

.audit-window {
  position: absolute;
  z-index: 2;
  top: 48px;
  right: 7%;
  left: 7%;
  height: 196px;
  border: 1px solid oklch(1 0 0 / 0.15);
  border-radius: 12px;
  background: oklch(0.075 0.011 270 / 0.97);
  box-shadow: 0 22px 52px oklch(0 0 0 / 0.38);
  overflow: hidden;
}

.showcase-window-bar {
  display: grid;
  height: 32px;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 0 11px;
  border-bottom: 1px solid oklch(1 0 0 / 0.09);
  color: oklch(0.63 0.008 85);
  font-family: var(--font-family-mono);
  font-size: 8px;
}

.showcase-window-bar > span {
  display: flex;
  gap: 4px;
}

.showcase-window-bar i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: oklch(0.42 0.015 270);
}

.showcase-window-bar strong {
  justify-self: center;
  color: oklch(0.78 0.008 85);
  font-weight: 500;
}

.showcase-window-bar em {
  font-style: normal;
}

.audit-page {
  position: absolute;
  inset: 32px 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px 24px 20px;
  background:
    linear-gradient(oklch(1 0 0 / 0.025) 1px, transparent 1px),
    linear-gradient(90deg, oklch(1 0 0 / 0.025) 1px, transparent 1px),
    oklch(0.078 0.011 270);
  background-size: 22px 22px;
}

.audit-page small {
  margin-bottom: 6px;
  color: var(--brand-soft);
  font-family: var(--font-family-mono);
  font-size: 7px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.audit-page > strong {
  max-width: 88%;
  color: oklch(0.97 0.005 82);
  font-family: var(--font-public-serif);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 580;
  line-height: 0.96;
  letter-spacing: -0.04em;
}

.audit-page-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 13px;
  font-family: var(--font-family-mono);
  font-size: 7px;
}

.audit-page-actions b,
.audit-page-actions span {
  padding: 6px 8px;
  border: 1px solid oklch(1 0 0 / 0.16);
  border-radius: 4px;
}

.audit-page-actions b {
  color: oklch(0.12 0.01 270);
  background: oklch(0.96 0.006 82);
}

.audit-page-actions span {
  color: oklch(0.7 0.008 85);
}

.audit-page-proof {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 12px;
}

.audit-page-proof i {
  height: 16px;
  border: 1px dashed oklch(1 0 0 / 0.12);
  border-radius: 3px;
}

.audit-proof-ready {
  display: flex;
  gap: 6px;
  margin-top: 13px;
}

.audit-proof-ready span {
  padding: 5px 7px;
  border: 1px solid oklch(0.72 0.15 145 / 0.26);
  border-radius: 999px;
  color: oklch(0.79 0.13 145);
  background: oklch(0.72 0.15 145 / 0.08);
  font-family: var(--font-family-mono);
  font-size: 7px;
}

.audit-page-before {
  opacity: 0;
}

.audit-page-after {
  opacity: 1;
}

.audit-beam {
  position: absolute;
  z-index: 5;
  top: 43px;
  right: 12px;
  left: 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  box-shadow: 0 0 18px var(--brand);
  opacity: 0;
}

.audit-pin {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 7px;
  border: 1px solid oklch(from var(--brand) l c h / 0.62);
  border-radius: 5px;
  color: oklch(0.95 0.006 82);
  background: oklch(0.12 0.035 25 / 0.94);
  box-shadow: 0 8px 24px oklch(0 0 0 / 0.28);
  font-family: var(--font-public-sans);
  font-size: 10px;
  opacity: 0;
}

.audit-pin b {
  color: var(--brand-soft);
  font-family: var(--font-family-mono);
  font-size: 9px;
}

.audit-pin-one { top: 82px; right: 22px; }
.audit-pin-two { right: 29%; bottom: 32px; }
.audit-pin-three { bottom: 15px; left: 18px; }

.showcase-card.is-showcase-active .audit-page-before {
  animation: audit-before-cycle var(--showcase-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .audit-page-after {
  animation: audit-after-cycle var(--showcase-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .audit-beam {
  animation: audit-beam-cycle var(--showcase-duration) ease-in-out var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .audit-pin-one {
  animation: audit-pin-one-cycle var(--showcase-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .audit-pin-two {
  animation: audit-pin-two-cycle var(--showcase-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .audit-pin-three {
  animation: audit-pin-three-cycle var(--showcase-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--showcase-delay) 1 both !important;
}

/* Launch plan: a brief unfolds into channel lanes, assets, and a launch kit. */

.launch-showcase {
  --showcase-glow: oklch(0.67 0.18 286 / 0.27);
  background:
    radial-gradient(circle at 22% 12%, oklch(0.4 0.15 286 / 0.28), transparent 36%),
    linear-gradient(150deg, oklch(0.12 0.035 282), oklch(0.065 0.014 270));
}

.launch-brief-card,
.launch-ready-card {
  position: absolute;
  z-index: 4;
  border: 1px solid oklch(1 0 0 / 0.15);
  border-radius: 12px;
  color: oklch(0.96 0.006 82);
  background: oklch(0.1 0.024 280 / 0.92);
  box-shadow: 0 20px 48px oklch(0 0 0 / 0.34);
  backdrop-filter: blur(12px);
}

.launch-brief-card {
  top: 74px;
  left: 50%;
  display: flex;
  width: min(68%, 320px);
  min-height: 116px;
  flex-direction: column;
  justify-content: center;
  padding: 18px 20px;
  transform: translateX(-50%);
  opacity: 0;
}

.launch-brief-card span,
.launch-ready-card > span {
  color: oklch(0.75 0.13 286);
  font-family: var(--font-family-mono);
  font-size: 8px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.launch-brief-card strong,
.launch-ready-card > strong {
  margin-top: 7px;
  font-family: var(--font-public-serif);
  font-size: 25px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
}

.launch-brief-card small {
  margin-top: 9px;
  color: oklch(0.65 0.008 85);
  font-size: 9px;
}

.launch-board {
  position: absolute;
  z-index: 3;
  top: 48px;
  right: 6%;
  left: 6%;
  min-height: 196px;
  padding: 14px 14px 11px;
  border: 1px solid oklch(1 0 0 / 0.13);
  border-radius: 12px;
  color: oklch(0.88 0.007 85);
  background: oklch(0.075 0.015 275 / 0.93);
  box-shadow: 0 20px 48px oklch(0 0 0 / 0.28);
  opacity: 1;
  overflow: hidden;
}

.launch-board header {
  display: grid;
  grid-template-columns: 1fr repeat(4, 34px);
  align-items: center;
  gap: 3px;
  padding-bottom: 9px;
  border-bottom: 1px solid oklch(1 0 0 / 0.09);
  font-family: var(--font-family-mono);
  font-size: 7px;
  color: oklch(0.5 0.009 85);
  text-align: center;
}

.launch-board header strong {
  color: oklch(0.9 0.007 85);
  font-size: 8px;
  font-weight: 500;
  text-align: left;
}

.launch-row {
  display: grid;
  height: 47px;
  grid-template-columns: 60px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid oklch(1 0 0 / 0.07);
}

.launch-row:last-of-type {
  border-bottom: 0;
}

.launch-row > b {
  color: oklch(0.57 0.009 85);
  font-family: var(--font-family-mono);
  font-size: 9px;
  font-weight: 500;
}

.launch-row > span {
  position: relative;
  display: block;
  height: 28px;
  border-radius: 5px;
  background:
    repeating-linear-gradient(90deg, oklch(1 0 0 / 0.045) 0 1px, transparent 1px 8.333%);
}

.launch-asset {
  position: absolute;
  top: 4px;
  display: grid;
  height: 20px;
  place-items: center;
  padding: 0 7px;
  border: 1px solid oklch(1 0 0 / 0.12);
  border-radius: 4px;
  font-family: var(--font-family-mono);
  font-size: 9px;
  font-style: normal;
  white-space: nowrap;
}

.launch-owned .launch-asset { color: oklch(0.8 0.13 145); background: oklch(0.32 0.1 145 / 0.66); }
.launch-rented .launch-asset { color: oklch(0.84 0.1 35); background: oklch(0.4 0.12 25 / 0.64); }
.launch-borrowed .launch-asset { color: oklch(0.78 0.11 260); background: oklch(0.32 0.11 260 / 0.66); }
.asset-page { left: 7%; }
.asset-email { left: 52%; }
.asset-post { left: 28%; }
.asset-demo { left: 65%; }
.asset-partner { left: 15%; }
.asset-followup { left: 72%; }

.launch-playhead {
  position: absolute;
  z-index: 4;
  top: 43px;
  bottom: 11px;
  left: 75px;
  width: 1px;
  background: var(--brand);
  box-shadow: 0 0 14px var(--brand);
  opacity: 0;
}

.launch-playhead::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
}

.launch-ready-card {
  top: 76px;
  right: 9%;
  left: 9%;
  display: grid;
  min-height: 123px;
  grid-template-columns: 1fr auto;
  align-content: center;
  padding: 18px 20px;
  opacity: 0;
}

.launch-ready-card > span,
.launch-ready-card > strong {
  grid-column: 1;
}

.launch-ready-card > div {
  display: flex;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-items: center;
  gap: 5px;
}

.launch-ready-card i {
  display: grid;
  width: auto;
  min-width: 40px;
  height: 31px;
  place-items: center;
  padding: 0 7px;
  border: 1px solid oklch(1 0 0 / 0.15);
  border-radius: 5px;
  color: oklch(0.8 0.12 286);
  background: oklch(0.25 0.08 286 / 0.5);
  font-family: var(--font-family-mono);
  font-size: 7px;
  font-style: normal;
}

.showcase-card.is-showcase-active .launch-brief-card {
  animation: launch-brief-cycle var(--showcase-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .launch-board {
  animation: launch-board-cycle var(--showcase-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .asset-page {
  animation: launch-asset-page-cycle var(--showcase-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .asset-email {
  animation: launch-asset-email-cycle var(--showcase-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .asset-post {
  animation: launch-asset-post-cycle var(--showcase-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .asset-demo {
  animation: launch-asset-demo-cycle var(--showcase-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .asset-partner {
  animation: launch-asset-partner-cycle var(--showcase-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .asset-followup {
  animation: launch-asset-followup-cycle var(--showcase-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .launch-playhead {
  animation: launch-playhead-cycle var(--showcase-duration) ease-in-out var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .launch-ready-card {
  animation: launch-ready-cycle var(--showcase-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--showcase-delay) 1 both !important;
}

/* Video cut: real Day-4 footage plays while takes collapse into the final cut. */

.video-showcase {
  --showcase-glow: oklch(0.7 0.2 24 / 0.3);
  background:
    radial-gradient(circle at 78% 20%, oklch(0.56 0.17 25 / 0.27), transparent 35%),
    linear-gradient(145deg, oklch(0.115 0.027 268), oklch(0.055 0.012 270));
}

.video-source-stack {
  position: absolute;
  z-index: 3;
  top: 64px;
  left: 7%;
  display: grid;
  width: 38%;
  gap: 7px;
}

.video-source-stack > span {
  display: flex;
  min-height: 39px;
  flex-direction: column;
  justify-content: center;
  padding: 7px 10px;
  border: 1px solid oklch(1 0 0 / 0.12);
  border-radius: 7px;
  color: oklch(0.86 0.007 85);
  background: oklch(0.1 0.018 270 / 0.86);
  box-shadow: 0 9px 24px oklch(0 0 0 / 0.22);
  backdrop-filter: blur(9px);
}

.video-source-stack > span:nth-child(2) {
  border-color: oklch(from var(--brand) l c h / 0.52);
  transform: translateX(10px);
}

.video-source-stack b {
  color: var(--brand-soft);
  font-family: var(--font-family-mono);
  font-size: 9px;
  font-weight: 500;
}

.video-source-stack small {
  margin-top: 3px;
  color: oklch(0.62 0.008 85);
  font-size: 9px;
}

.video-phone {
  position: absolute;
  z-index: 4;
  top: 46px;
  right: 9%;
  width: 112px;
  height: 199px;
  padding: 4px;
  border: 1px solid oklch(1 0 0 / 0.2);
  border-radius: 15px;
  background: oklch(0.035 0.008 270);
  box-shadow: 0 24px 52px oklch(0 0 0 / 0.46);
  transform: rotate(2.5deg);
  overflow: hidden;
}

.showcase-video {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 11px;
  object-fit: cover;
  filter: saturate(1.07) contrast(1.04);
}

.video-safe-label {
  position: absolute;
  right: 8px;
  bottom: 8px;
  left: 8px;
  padding: 5px 4px;
  border: 1px solid oklch(1 0 0 / 0.13);
  border-radius: 5px;
  color: oklch(0.95 0.006 82);
  background: oklch(0.04 0.008 270 / 0.72);
  backdrop-filter: blur(7px);
  font-family: var(--font-family-mono);
  font-size: 9px;
  text-align: center;
}

.video-edit-rail {
  position: absolute;
  z-index: 5;
  right: 6%;
  bottom: 10px;
  left: 6%;
  padding: 8px 10px 10px;
  border: 1px solid oklch(1 0 0 / 0.13);
  border-radius: 9px;
  background: oklch(0.07 0.012 270 / 0.9);
  box-shadow: 0 12px 28px oklch(0 0 0 / 0.26);
  backdrop-filter: blur(10px);
}

.video-rail-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  font-family: var(--font-family-mono);
  font-size: 8px;
}

.video-rail-meta span { color: oklch(0.55 0.008 85); }
.video-rail-meta strong { color: oklch(0.78 0.13 145); font-weight: 500; }

.video-rail-track {
  position: relative;
  display: grid;
  height: 17px;
  grid-template-columns: 1.2fr 0.42fr 1fr 0.34fr 1.3fr 0.8fr;
  gap: 3px;
}

.video-rail-track i,
.video-rail-track mark {
  min-width: 0;
  border-radius: 3px;
}

.video-rail-track i { background: linear-gradient(90deg, oklch(0.36 0.11 252), oklch(0.48 0.13 252)); }
.video-rail-track mark { border: 1px solid oklch(from var(--brand) l c h / 0.56); background: oklch(from var(--brand) l c h / 0.22); }

.video-rail-track b {
  position: absolute;
  z-index: 2;
  top: -3px;
  bottom: -3px;
  left: 2%;
  width: 1px;
  background: oklch(0.95 0.01 85);
  box-shadow: 0 0 8px oklch(0.95 0.01 85 / 0.7);
}

.showcase-card.is-showcase-active .video-source-stack {
  animation: video-sources-cycle var(--showcase-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .video-phone {
  animation: video-phone-cycle var(--showcase-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .video-rail-track mark {
  animation: video-reject-cycle var(--showcase-duration) ease-in-out var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .video-rail-track b {
  animation: video-playhead-cycle var(--showcase-duration) linear var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .video-rail-meta span,
.showcase-card.is-showcase-active .video-rail-meta strong {
  animation: video-meta-cycle var(--showcase-duration) ease-in-out var(--showcase-delay) 1 both !important;
}

/* Outreach: evidence travels from a source into a reviewable draft. */

.outreach-showcase {
  --showcase-glow: oklch(0.7 0.15 145 / 0.24);
  background:
    radial-gradient(circle at 17% 17%, oklch(0.46 0.13 145 / 0.22), transparent 35%),
    linear-gradient(145deg, oklch(0.1 0.025 155), oklch(0.055 0.012 270));
}

.signal-stack {
  position: absolute;
  z-index: 3;
  top: 60px;
  left: 6%;
  width: 37%;
}

.signal-card {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  min-height: 95px;
  flex-direction: column;
  justify-content: center;
  padding: 13px 14px;
  border: 1px solid oklch(1 0 0 / 0.14);
  border-radius: 10px;
  color: oklch(0.92 0.007 85);
  background: oklch(0.08 0.02 155 / 0.9);
  box-shadow: 0 16px 38px oklch(0 0 0 / 0.3);
  backdrop-filter: blur(10px);
}

.signal-card-two { transform: translate(8px, 8px) rotate(1.5deg); opacity: 0.42; }
.signal-card-three { transform: translate(16px, 16px) rotate(3deg); opacity: 0.2; }

.signal-card span {
  color: oklch(0.77 0.13 145);
  font-family: var(--font-family-mono);
  font-size: 9px;
}

.signal-card strong {
  margin-top: 7px;
  font-family: var(--font-public-serif);
  font-size: 18px;
  font-weight: 580;
  line-height: 1;
}

.signal-card small {
  margin-top: 8px;
  color: oklch(0.58 0.008 85);
  font-size: 8px;
}

.signal-more {
  position: absolute;
  top: 103px;
  left: 12px;
  padding: 6px 9px;
  border: 1px solid oklch(0.72 0.15 145 / 0.24);
  border-radius: 999px;
  color: oklch(0.77 0.13 145);
  background: oklch(0.08 0.02 155 / 0.88);
  box-shadow: 0 8px 20px oklch(0 0 0 / 0.24);
  font-family: var(--font-family-mono);
  font-size: 8px;
  white-space: nowrap;
}

.outreach-route {
  position: absolute;
  z-index: 2;
  top: 111px;
  left: 40%;
  width: 14%;
  height: 1px;
  transform-origin: left;
  background: linear-gradient(90deg, oklch(0.72 0.15 145), var(--brand));
  opacity: 0;
}

.outreach-route i {
  position: absolute;
  top: -3px;
  right: -1px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 12px var(--brand);
}

.outreach-draft-card {
  position: absolute;
  z-index: 4;
  top: 51px;
  right: 6%;
  width: 46%;
  min-height: 194px;
  padding: 13px 14px;
  border: 1px solid oklch(1 0 0 / 0.14);
  border-radius: 11px;
  color: oklch(0.9 0.007 85);
  background: oklch(0.075 0.012 270 / 0.95);
  box-shadow: 0 20px 46px oklch(0 0 0 / 0.34);
}

.outreach-draft-card header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 9px;
  border-bottom: 1px solid oklch(1 0 0 / 0.09);
  font-family: var(--font-family-mono);
  font-size: 9px;
}

.outreach-draft-card header span { color: oklch(0.65 0.008 85); }
.outreach-draft-card header em { color: oklch(0.77 0.13 145); font-style: normal; }

.outreach-draft-card > p {
  display: grid;
  grid-template-columns: 41px 1fr;
  gap: 7px;
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid oklch(1 0 0 / 0.07);
}

.outreach-draft-card > p small {
  color: oklch(0.48 0.008 85);
  font-family: var(--font-family-mono);
  font-size: 8px;
  text-transform: uppercase;
}

.outreach-draft-card > p strong {
  min-width: 0;
  color: oklch(0.82 0.007 85);
  font-size: 9px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.outreach-copy {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 10px;
  font-size: 10px;
  line-height: 1.35;
}

.outreach-copy span { color: oklch(0.66 0.008 85); }
.outreach-copy b { color: oklch(0.92 0.007 85); font-weight: 560; }

.showcase-card.is-showcase-active .signal-card-one {
  animation: outreach-signal-cycle var(--showcase-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .outreach-route {
  animation: outreach-route-cycle var(--showcase-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .outreach-draft-card {
  animation: outreach-draft-cycle var(--showcase-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .outreach-draft-card > p:nth-of-type(1) {
  animation: outreach-source-cycle var(--showcase-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .outreach-draft-card > p:nth-of-type(2) {
  animation: outreach-subject-cycle var(--showcase-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .outreach-copy span {
  animation: outreach-opening-cycle var(--showcase-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .outreach-copy b {
  animation: outreach-cta-cycle var(--showcase-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--showcase-delay) 1 both !important;
}

/* Ad creative: one offer expands into visibly different, validated angles. */

.ads-showcase {
  --showcase-glow: oklch(0.79 0.19 90 / 0.26);
  background:
    radial-gradient(circle at 78% 8%, oklch(0.75 0.19 90 / 0.24), transparent 34%),
    radial-gradient(circle at 14% 25%, oklch(0.55 0.19 330 / 0.2), transparent 34%),
    linear-gradient(145deg, oklch(0.135 0.035 305), oklch(0.055 0.012 270));
}

.ad-offer-card {
  position: absolute;
  z-index: 4;
  top: 74px;
  left: 50%;
  display: flex;
  width: min(68%, 310px);
  min-height: 114px;
  flex-direction: column;
  justify-content: center;
  padding: 17px 19px;
  border: 1px solid oklch(1 0 0 / 0.16);
  border-radius: 12px;
  color: oklch(0.97 0.006 82);
  background: linear-gradient(135deg, oklch(0.33 0.14 329), oklch(0.18 0.07 285));
  box-shadow: 0 22px 52px oklch(0 0 0 / 0.38);
  transform: translateX(-50%);
  opacity: 0;
}

.ad-offer-card span,
.ad-concept small {
  font-family: var(--font-family-mono);
  font-size: 7px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.ad-offer-card span { color: oklch(0.86 0.1 90); }
.ad-offer-card strong { margin-top: 7px; font-family: var(--font-public-serif); font-size: 24px; line-height: 1; }
.ad-offer-card small { margin-top: 8px; color: oklch(0.72 0.008 85); font-size: 8px; }

.ad-concept-fan {
  position: absolute;
  z-index: 4;
  top: 54px;
  right: 8%;
  left: 8%;
  height: 185px;
  perspective: 900px;
}

.ad-concept {
  position: absolute;
  top: 6px;
  left: 50%;
  display: flex;
  width: 31%;
  min-height: 154px;
  flex-direction: column;
  justify-content: space-between;
  padding: 13px;
  border: 1px solid oklch(1 0 0 / 0.2);
  border-radius: 11px;
  box-shadow: 0 20px 42px oklch(0 0 0 / 0.34);
  transform: translateX(-50%);
  opacity: 1;
}

.ad-concept strong {
  font-family: var(--font-public-serif);
  font-size: clamp(16px, 1.5vw, 21px);
  font-weight: 620;
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.ad-concept span {
  align-self: flex-start;
  padding: 5px 7px;
  border-radius: 999px;
  background: oklch(0.97 0.006 82);
  font-family: var(--font-public-sans);
  font-size: 6px;
  font-weight: 650;
}

.ad-concept-pain {
  color: oklch(0.99 0.005 82);
  background: linear-gradient(145deg, oklch(0.65 0.2 24), oklch(0.28 0.13 18));
  transform: translateX(-122%) rotate(-7deg);
}

.ad-concept-pain span { color: oklch(0.45 0.16 24); }

.ad-concept-outcome {
  z-index: 2;
  color: oklch(0.12 0.016 270);
  background: linear-gradient(145deg, oklch(0.94 0.16 104), oklch(0.75 0.19 92));
  transform: translateX(-50%) translateY(-4px);
}

.ad-concept-outcome small { color: oklch(0.36 0.11 104); }
.ad-concept-outcome span { color: oklch(0.25 0.08 104); }

.ad-concept-identity {
  color: oklch(0.98 0.005 82);
  background: linear-gradient(145deg, oklch(0.46 0.18 290), oklch(0.2 0.11 286));
  transform: translateX(22%) rotate(7deg);
}

.ad-concept-identity span { color: oklch(0.35 0.15 290); }

.ad-platform-checks {
  position: absolute;
  z-index: 5;
  right: 10%;
  bottom: 10px;
  left: 10%;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.ad-platform-checks span {
  padding: 5px 8px;
  border: 1px solid oklch(1 0 0 / 0.12);
  border-radius: 999px;
  color: oklch(0.68 0.008 85);
  background: oklch(0.07 0.012 270 / 0.78);
  backdrop-filter: blur(8px);
  font-family: var(--font-family-mono);
  font-size: 8px;
}

.ad-platform-checks i { color: oklch(0.74 0.15 145); font-style: normal; opacity: 1; }

.showcase-card.is-showcase-active .ad-offer-card {
  animation: ad-offer-cycle var(--showcase-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .ad-concept {
  animation: ad-concept-cycle var(--showcase-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .ad-platform-checks {
  animation: ad-platform-cycle var(--showcase-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--showcase-delay) 1 both !important;
}

/* SEO audit: a crawl isolates one blocker and turns it into a repair card. */

.seo-showcase {
  --showcase-glow: oklch(0.67 0.15 245 / 0.27);
  background:
    radial-gradient(circle at 20% 8%, oklch(0.5 0.15 245 / 0.22), transparent 38%),
    linear-gradient(150deg, oklch(0.095 0.03 245), oklch(0.055 0.012 270));
}

.seo-query-bar {
  position: absolute;
  z-index: 4;
  top: 55px;
  right: 8%;
  left: 8%;
  display: grid;
  height: 39px;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border: 1px solid oklch(1 0 0 / 0.14);
  border-radius: 999px;
  color: oklch(0.82 0.007 85);
  background: oklch(0.075 0.015 245 / 0.92);
  box-shadow: 0 13px 32px oklch(0 0 0 / 0.28);
}

.seo-query-bar > span { color: oklch(0.7 0.13 245); font-size: 17px; line-height: 1; }
.seo-query-bar strong { font-family: var(--font-family-mono); font-size: 10px; font-weight: 500; }
.seo-query-bar em { color: oklch(0.62 0.008 85); font-family: var(--font-family-mono); font-size: 8px; font-style: normal; }

.seo-site-map {
  position: absolute;
  z-index: 2;
  top: 109px;
  left: 8%;
  width: 38%;
  height: 125px;
}

.seo-node {
  position: absolute;
  z-index: 2;
  display: grid;
  min-width: 48px;
  height: 26px;
  place-items: center;
  padding: 0 8px;
  border: 1px solid oklch(1 0 0 / 0.13);
  border-radius: 6px;
  color: oklch(0.72 0.008 85);
  background: oklch(0.08 0.016 245 / 0.9);
  font-family: var(--font-family-mono);
  font-size: 8px;
}

.seo-node-home { top: 0; left: 34%; color: oklch(0.8 0.12 245); border-color: oklch(0.7 0.13 245 / 0.5); }
.seo-node-pricing { top: 50px; left: 0; }
.seo-node-skills { top: 50px; right: 0; }
.seo-node-blog { right: 22%; bottom: 0; }

.seo-path {
  position: absolute;
  z-index: 1;
  height: 1px;
  transform-origin: left;
  background: oklch(0.55 0.08 245 / 0.58);
}

.seo-path-one { top: 39px; left: 37%; width: 52px; transform: rotate(145deg); }
.seo-path-two { top: 39px; left: 54%; width: 50px; transform: rotate(35deg); }
.seo-path-three { top: 85px; left: 42%; width: 57px; transform: rotate(21deg); }

.seo-crawler {
  position: absolute;
  z-index: 4;
  top: 9px;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: oklch(0.77 0.14 245);
  box-shadow: 0 0 16px oklch(0.7 0.15 245);
}

.seo-evidence-card,
.seo-fix-card {
  position: absolute;
  z-index: 4;
  top: 111px;
  right: 7%;
  display: flex;
  width: 47%;
  min-height: 119px;
  flex-direction: column;
  justify-content: center;
  padding: 14px 15px;
  border: 1px solid oklch(1 0 0 / 0.14);
  border-radius: 10px;
  color: oklch(0.91 0.007 85);
  background: oklch(0.075 0.015 245 / 0.94);
  box-shadow: 0 18px 42px oklch(0 0 0 / 0.32);
}

.seo-evidence-card > span,
.seo-fix-card > span {
  font-family: var(--font-family-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.seo-evidence-card > span { color: var(--brand-soft); }
.seo-fix-card > span { color: oklch(0.77 0.13 145); }

.seo-evidence-card strong,
.seo-fix-card strong {
  margin-top: 8px;
  font-family: var(--font-public-serif);
  font-size: 17px;
  font-weight: 580;
  line-height: 1.03;
}

.seo-evidence-card small,
.seo-fix-card small {
  margin-top: 8px;
  color: oklch(0.57 0.008 85);
  font-size: 9px;
}

.seo-evidence-card { opacity: 0; }
.seo-fix-card { border-color: oklch(0.72 0.15 145 / 0.32); opacity: 1; }

.showcase-card.is-showcase-active .seo-crawler {
  animation: seo-crawler-cycle var(--showcase-duration) cubic-bezier(0.45, 0, 0.55, 1) var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .seo-node-pricing {
  animation: seo-node-cycle var(--showcase-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .seo-evidence-card {
  animation: seo-evidence-cycle var(--showcase-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .seo-fix-card {
  animation: seo-fix-cycle var(--showcase-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--showcase-delay) 1 both !important;
}

/* SEO v2: a recognizable search snippet becomes one specific recommendation. */

.seo-preview-window {
  position: absolute;
  z-index: 3;
  top: 50px;
  right: 7%;
  left: 7%;
  height: 188px;
  border: 1px solid oklch(1 0 0 / 0.16);
  border-radius: 12px;
  background: oklch(0.95 0.006 86);
  box-shadow: 0 22px 52px oklch(0 0 0 / 0.34);
  overflow: hidden;
}

.seo-preview-window > header {
  display: flex;
  height: 34px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 13px;
  border-bottom: 1px solid oklch(0.82 0.012 255);
  color: oklch(0.42 0.018 255);
  background: oklch(0.91 0.01 255);
  font-family: var(--font-family-mono);
  font-size: 9px;
}

.seo-preview-window > header span {
  color: oklch(0.28 0.03 255);
  font-weight: 600;
}

.seo-preview-window > header em {
  font-style: normal;
}

.seo-serp {
  position: absolute;
  inset: 34px 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 17px 20px 19px;
  color: oklch(0.23 0.018 255);
  background: oklch(0.97 0.005 86);
}

.seo-serp small {
  color: oklch(0.43 0.1 145);
  font-family: var(--font-public-sans);
  font-size: 10px;
}

.seo-serp > strong {
  max-width: 92%;
  margin-top: 7px;
  color: oklch(0.43 0.16 255);
  font-family: var(--font-public-sans);
  font-size: clamp(19px, 1.9vw, 25px);
  font-weight: 580;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.seo-serp > p {
  margin: 7px 0 0;
  color: oklch(0.43 0.018 255);
  font-size: 11px;
  line-height: 1.35;
}

.seo-serp > div {
  display: flex;
  gap: 6px;
  margin-top: 11px;
}

.seo-serp > div span {
  padding: 5px 8px;
  border-radius: 999px;
  color: oklch(0.31 0.08 145);
  background: oklch(0.85 0.08 145 / 0.46);
  font-family: var(--font-family-mono);
  font-size: 8px;
}

.seo-serp-before {
  opacity: 0;
}

.seo-serp-after {
  opacity: 1;
}

.seo-preview-scan {
  position: absolute;
  z-index: 5;
  top: 45px;
  right: 12px;
  left: 12px;
  height: 2px;
  background: linear-gradient(90deg, transparent, oklch(0.62 0.18 255), transparent);
  box-shadow: 0 0 18px oklch(0.62 0.18 255 / 0.78);
  opacity: 0;
}

.seo-diagnosis-card {
  position: absolute;
  z-index: 6;
  top: 116px;
  right: 4.5%;
  display: flex;
  width: min(44%, 220px);
  min-height: 78px;
  flex-direction: column;
  justify-content: center;
  padding: 11px 13px;
  border: 1px solid oklch(from var(--brand) l c h / 0.58);
  border-radius: 10px;
  color: oklch(0.96 0.006 84);
  background: oklch(0.13 0.045 25 / 0.95);
  box-shadow: 0 18px 38px oklch(0 0 0 / 0.34);
  opacity: 0;
}

.seo-diagnosis-card span {
  color: var(--brand-soft);
  font-family: var(--font-family-mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.seo-diagnosis-card strong {
  margin-top: 5px;
  font-family: var(--font-public-serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
}

.seo-diagnosis-card small {
  margin-top: 6px;
  color: oklch(0.7 0.01 85);
  font-size: 9px;
}

.showcase-card.is-showcase-idle .seo-serp-before {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.showcase-card.is-showcase-idle .seo-serp-after {
  opacity: 0;
  transform: translateX(2%) scale(0.985);
}

.showcase-card.is-showcase-idle .seo-preview-scan,
.showcase-card.is-showcase-idle .seo-diagnosis-card {
  opacity: 0;
}

.showcase-card.is-showcase-static .seo-serp-before {
  opacity: 0;
}

.showcase-card.is-showcase-static .seo-serp-after {
  opacity: 1;
  transform: none;
}

.showcase-card.is-showcase-static .seo-preview-scan,
.showcase-card.is-showcase-static .seo-diagnosis-card {
  opacity: 0;
}

.showcase-card.is-showcase-active .seo-serp-before {
  animation: seo-serp-before-cycle var(--showcase-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .seo-serp-after {
  animation: seo-serp-after-cycle var(--showcase-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .seo-preview-scan {
  animation: seo-preview-scan-cycle var(--showcase-duration) ease-in-out var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .seo-diagnosis-card {
  animation: seo-diagnosis-cycle var(--showcase-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--showcase-delay) 1 both !important;
}

/* SEO v3: one aligned panel moves from request to checks to ranked plan. */

.seo-request-card,
.seo-checklist-card,
.seo-plan-card {
  position: absolute;
  z-index: 4;
  top: 56px;
  right: 7%;
  left: 7%;
  height: 176px;
  border: 1px solid oklch(1 0 0 / 0.15);
  border-radius: 12px;
  box-sizing: border-box;
  box-shadow: 0 22px 50px oklch(0 0 0 / 0.34);
  overflow: hidden;
}

.seo-request-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 22px;
  color: oklch(0.97 0.006 84);
  background:
    radial-gradient(circle at 88% 14%, oklch(0.66 0.18 245 / 0.44), transparent 32%),
    linear-gradient(145deg, oklch(0.2 0.075 245), oklch(0.09 0.025 255));
  opacity: 0;
}

.seo-request-card > span,
.seo-plan-card > span {
  color: oklch(0.78 0.13 245);
  font-family: var(--font-family-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.seo-request-card > strong {
  margin-top: 8px;
  font-family: var(--font-public-serif);
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
}

.seo-request-card > em {
  display: inline-flex;
  width: max-content;
  min-height: 30px;
  align-items: center;
  gap: 8px;
  margin-top: 15px;
  padding: 0 11px;
  border-radius: 999px;
  color: oklch(0.15 0.03 245);
  background: oklch(0.9 0.08 245);
  font-size: 10px;
  font-style: normal;
  font-weight: 650;
}

.seo-request-card > em i {
  color: oklch(0.5 0.16 245);
  font-style: normal;
}

.seo-checklist-card {
  display: grid;
  grid-template-rows: 32px repeat(3, 1fr);
  padding: 10px 13px 11px;
  color: oklch(0.9 0.007 85);
  background: oklch(0.075 0.018 250 / 0.97);
  opacity: 0;
}

.seo-checklist-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 10px;
}

.seo-checklist-card > header strong {
  font-weight: 650;
}

.seo-checklist-card > header span {
  color: oklch(0.65 0.1 245);
  font-family: var(--font-family-mono);
  font-size: 8px;
}

.seo-check {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border-top: 1px solid oklch(1 0 0 / 0.08);
  opacity: 0.36;
}

.seo-check > i {
  color: oklch(0.58 0.1 245);
  font-family: var(--font-family-mono);
  font-size: 8px;
  font-style: normal;
}

.seo-check > b {
  min-width: 0;
  font-size: 11px;
  font-weight: 560;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.seo-check > em {
  position: relative;
  width: 64px;
  height: 12px;
  color: oklch(0.62 0.01 85);
  font-family: var(--font-family-mono);
  font-size: 8px;
  font-style: normal;
  white-space: nowrap;
}

.seo-check > em span,
.seo-check > em strong {
  position: absolute;
  top: 0;
  right: 0;
  font-size: inherit;
  font-weight: 500;
}

.seo-check > em span {
  opacity: 1;
}

.seo-check > em strong {
  color: oklch(0.75 0.14 145);
  opacity: 0;
}

.seo-scan-beam {
  position: absolute;
  z-index: 5;
  top: 43px;
  right: 12px;
  left: 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, oklch(0.68 0.16 245), transparent);
  box-shadow: 0 0 16px oklch(0.68 0.16 245 / 0.82);
  opacity: 0;
}

.seo-plan-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 17px 19px;
  color: oklch(0.2 0.02 255);
  background: oklch(0.95 0.01 88);
  opacity: 1;
}

.seo-plan-card > strong {
  margin-top: 6px;
  font-family: var(--font-public-serif);
  font-size: 23px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
}

.seo-plan-card > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  margin-top: 9px;
}

.seo-plan-card > div b {
  display: grid;
  min-width: 0;
  grid-template-columns: 25px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 4px 7px;
  border: 1px solid oklch(0.78 0.02 255);
  border-radius: 6px;
  color: oklch(0.33 0.03 255);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.15;
}

.seo-plan-card > div b.is-first {
  border-color: oklch(0.58 0.13 245 / 0.48);
  color: oklch(0.2 0.05 245);
  background: oklch(0.86 0.08 245 / 0.42);
}

.seo-plan-card > div i {
  color: oklch(0.52 0.14 245);
  font-family: var(--font-family-mono);
  font-size: 8px;
  font-style: normal;
}

.seo-plan-card > div em {
  min-width: 0;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.seo-plan-card > small {
  margin-top: 7px;
  color: oklch(0.46 0.02 255);
  font-size: 8px;
}

.showcase-card.is-showcase-idle .seo-request-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.showcase-card.is-showcase-idle .seo-checklist-card,
.showcase-card.is-showcase-idle .seo-plan-card {
  opacity: 0;
}

.showcase-card.is-showcase-static .seo-request-card,
.showcase-card.is-showcase-static .seo-checklist-card {
  opacity: 0;
}

.showcase-card.is-showcase-static .seo-plan-card {
  opacity: 1;
  transform: none;
}

.showcase-card.is-showcase-active .seo-request-card {
  animation: seo-request-cycle var(--showcase-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .seo-checklist-card {
  animation: seo-checklist-cycle var(--showcase-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .seo-plan-card {
  animation: seo-plan-v3-cycle var(--showcase-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .seo-scan-beam {
  animation: seo-scan-beam-v3-cycle var(--showcase-duration) ease-in-out var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .seo-check-crawl {
  animation: seo-check-crawl-cycle var(--showcase-duration) ease-in-out var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .seo-check-mobile {
  animation: seo-check-mobile-cycle var(--showcase-duration) ease-in-out var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .seo-check-content {
  animation: seo-check-content-cycle var(--showcase-duration) ease-in-out var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .seo-check-crawl > em span {
  animation: seo-checking-crawl-cycle var(--showcase-duration) ease-in-out var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .seo-check-crawl > em strong {
  animation: seo-checked-crawl-cycle var(--showcase-duration) ease-in-out var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .seo-check-mobile > em span {
  animation: seo-checking-mobile-cycle var(--showcase-duration) ease-in-out var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .seo-check-mobile > em strong {
  animation: seo-checked-mobile-cycle var(--showcase-duration) ease-in-out var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .seo-check-content > em span {
  animation: seo-checking-content-cycle var(--showcase-duration) ease-in-out var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .seo-check-content > em strong {
  animation: seo-checked-content-cycle var(--showcase-duration) ease-in-out var(--showcase-delay) 1 both !important;
}

@keyframes showcase-progress {
  0% { transform: scaleX(0); opacity: 0; }
  4% { opacity: 1; }
  94% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

@keyframes showcase-result-cycle {
  0%, 67%, 100% { opacity: 0; transform: translateY(-6px) scale(0.97); }
  75%, 90% { opacity: 1; transform: translateY(0) scale(1); }
  96% { opacity: 0; transform: translateY(-3px) scale(0.985); }
}

@keyframes audit-before-cycle {
  0%, 18%, 100% { opacity: 1; transform: translateX(0) scale(1); }
  30%, 92% { opacity: 0; transform: translateX(-2%) scale(0.985); }
}

@keyframes audit-after-cycle {
  0%, 28%, 100% { opacity: 0; transform: translateX(2%) scale(0.985); }
  40%, 88% { opacity: 1; transform: translateX(0) scale(1); }
  95% { opacity: 0; }
}

@keyframes audit-beam-cycle {
  0%, 8%, 40%, 100% { top: 43px; opacity: 0; }
  13% { opacity: 1; }
  32% { top: 180px; opacity: 1; }
  38% { top: 180px; opacity: 0; }
}

@keyframes audit-pin-one-cycle {
  0%, 9%, 36%, 100% { opacity: 0; transform: translateY(7px) scale(0.96); }
  14%, 30% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes audit-pin-two-cycle {
  0%, 14%, 39%, 100% { opacity: 0; transform: translateY(7px) scale(0.96); }
  19%, 33% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes audit-pin-three-cycle {
  0%, 19%, 42%, 100% { opacity: 0; transform: translateY(7px) scale(0.96); }
  24%, 36% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes launch-brief-cycle {
  0%, 16%, 100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  27%, 91% { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(0.97); }
}

@keyframes launch-board-cycle {
  0%, 10%, 100% { opacity: 0.16; transform: translateY(9px) scale(0.97); }
  24%, 79% { opacity: 1; transform: translateY(0) scale(1); }
  91% { opacity: 0; transform: translateY(-5px) scale(0.985); }
}

@keyframes launch-asset-page-cycle {
  0%, 15%, 81%, 100% { opacity: 0; transform: translateY(7px) scale(0.96); }
  22%, 74% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes launch-asset-email-cycle {
  0%, 21%, 81%, 100% { opacity: 0; transform: translateY(7px) scale(0.96); }
  28%, 74% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes launch-asset-post-cycle {
  0%, 27%, 81%, 100% { opacity: 0; transform: translateY(7px) scale(0.96); }
  34%, 74% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes launch-asset-demo-cycle {
  0%, 33%, 81%, 100% { opacity: 0; transform: translateY(7px) scale(0.96); }
  40%, 74% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes launch-asset-partner-cycle {
  0%, 39%, 81%, 100% { opacity: 0; transform: translateY(7px) scale(0.96); }
  46%, 74% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes launch-asset-followup-cycle {
  0%, 45%, 81%, 100% { opacity: 0; transform: translateY(7px) scale(0.96); }
  52%, 74% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes launch-playhead-cycle {
  0%, 18%, 82%, 100% { left: 75px; opacity: 0; }
  24% { opacity: 1; }
  71% { left: calc(100% - 25px); opacity: 1; }
  78% { left: calc(100% - 25px); opacity: 0; }
}

@keyframes launch-ready-cycle {
  0%, 66%, 100% { opacity: 0; transform: translateY(11px) scale(0.97); }
  76%, 89% { opacity: 1; transform: translateY(0) scale(1); }
  95% { opacity: 0; transform: translateY(-5px) scale(0.985); }
}

@keyframes video-sources-cycle {
  0%, 19%, 100% { opacity: 1; transform: translateX(0) scale(1); }
  35%, 91% { opacity: 0; transform: translateX(-14px) scale(0.96); }
}

@keyframes video-phone-cycle {
  0%, 100% { opacity: 0; transform: translateX(0) rotate(2.5deg) scale(0.92); filter: saturate(0.72); }
  6%, 12% { opacity: 1; transform: translateX(0) rotate(2.5deg) scale(0.92); filter: saturate(0.72); }
  36%, 88% { opacity: 1; transform: translateX(-6px) rotate(0deg) scale(1.03); filter: saturate(1); }
  96% { opacity: 0; transform: translateX(0) rotate(2deg) scale(0.96); }
}

@keyframes video-reject-cycle {
  0%, 21%, 100% { opacity: 0.5; transform: scaleY(1); }
  32%, 47% { opacity: 1; transform: translateY(-2px) scaleY(1.12); }
  58%, 88% { opacity: 0.14; transform: scaleX(0.18); }
}

@keyframes video-playhead-cycle {
  0%, 18%, 100% { left: 2%; opacity: 0; }
  23% { opacity: 1; }
  87% { left: 98%; opacity: 1; }
  94% { left: 98%; opacity: 0; }
}

@keyframes video-meta-cycle {
  0%, 24%, 100% { opacity: 0.62; }
  52%, 88% { opacity: 1; }
}

@keyframes outreach-signal-cycle {
  0%, 20%, 100% { opacity: 1; transform: translateX(0) scale(1); border-color: oklch(0.72 0.15 145 / 0.52); }
  34%, 89% { opacity: 0.55; transform: translateX(5px) scale(0.985); border-color: oklch(1 0 0 / 0.12); }
}

@keyframes outreach-route-cycle {
  0%, 14%, 74%, 100% { opacity: 0; transform: scaleX(0); }
  24%, 58% { opacity: 1; transform: scaleX(1); }
}

@keyframes outreach-draft-cycle {
  0%, 18%, 100% { opacity: 0.2; transform: translateX(12px) scale(0.98); }
  30%, 89% { opacity: 1; transform: translateX(0) scale(1); }
  96% { opacity: 0; transform: translateX(4px) scale(0.99); }
}

@keyframes outreach-source-cycle {
  0%, 25%, 93%, 100% { opacity: 0.08; transform: translateY(5px); }
  32%, 86% { opacity: 1; transform: translateY(0); }
}

@keyframes outreach-subject-cycle {
  0%, 33%, 93%, 100% { opacity: 0.08; transform: translateY(5px); }
  40%, 86% { opacity: 1; transform: translateY(0); }
}

@keyframes outreach-opening-cycle {
  0%, 41%, 93%, 100% { opacity: 0.08; transform: translateY(5px); }
  48%, 86% { opacity: 1; transform: translateY(0); }
}

@keyframes outreach-cta-cycle {
  0%, 49%, 93%, 100% { opacity: 0.08; transform: translateY(5px); }
  56%, 86% { opacity: 1; transform: translateY(0); }
}

@keyframes ad-offer-cycle {
  0%, 18%, 100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  31%, 91% { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(0.94); }
}

@keyframes ad-concept-cycle {
  0%, 19%, 100% { opacity: 0; filter: saturate(0.7); }
  34%, 88% { opacity: 1; filter: saturate(1); }
  95% { opacity: 0; }
}

@keyframes ad-platform-cycle {
  0%, 48%, 100% { opacity: 0; transform: translateY(6px); }
  61%, 88% { opacity: 1; transform: translateY(0); }
  95% { opacity: 0; }
}

@keyframes seo-crawler-cycle {
  0%, 9%, 100% { top: 9px; left: 50%; opacity: 0; }
  14% { opacity: 1; }
  31% { top: 59px; left: 8%; }
  48% { top: 59px; left: 84%; }
  64% { top: 105px; left: 58%; opacity: 1; }
  72% { opacity: 0; }
}

@keyframes seo-node-cycle {
  0%, 30%, 100% { border-color: oklch(1 0 0 / 0.13); color: oklch(0.72 0.008 85); transform: scale(1); }
  38%, 63% { border-color: oklch(from var(--brand) l c h / 0.72); color: var(--brand-soft); transform: scale(1.06); box-shadow: 0 0 18px oklch(from var(--brand) l c h / 0.2); }
}

@keyframes seo-evidence-cycle {
  0%, 34%, 100% { opacity: 0; transform: translateY(10px) scale(0.97); }
  45%, 63% { opacity: 1; transform: translateY(0) scale(1); }
  72% { opacity: 0; transform: translateY(-6px) scale(0.985); }
}

@keyframes seo-fix-cycle {
  0%, 61%, 100% { opacity: 0; transform: translateY(10px) scale(0.97); }
  73%, 89% { opacity: 1; transform: translateY(0) scale(1); }
  96% { opacity: 0; transform: translateY(-5px) scale(0.99); }
}

@keyframes seo-request-cycle {
  0%, 18%, 100% { opacity: 1; transform: translateY(0) scale(1); }
  28%, 92% { opacity: 0; transform: translateY(-7px) scale(0.98); }
}

@keyframes seo-checklist-cycle {
  0%, 18%, 71%, 100% { opacity: 0; transform: translateY(8px) scale(0.98); }
  27%, 64% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes seo-plan-v3-cycle {
  0%, 65%, 100% { opacity: 0; transform: translateY(8px) scale(0.98); }
  75%, 90% { opacity: 1; transform: translateY(0) scale(1); }
  96% { opacity: 0; transform: translateY(-4px) scale(0.99); }
}

@keyframes seo-scan-beam-v3-cycle {
  0%, 27%, 63%, 100% { top: 43px; opacity: 0; }
  32% { opacity: 1; }
  57% { top: 158px; opacity: 1; }
  62% { top: 158px; opacity: 0; }
}

@keyframes seo-check-crawl-cycle {
  0%, 30%, 67%, 100% { opacity: 0.36; }
  36%, 61% { opacity: 1; }
}

@keyframes seo-check-mobile-cycle {
  0%, 39%, 67%, 100% { opacity: 0.36; }
  45%, 61% { opacity: 1; }
}

@keyframes seo-check-content-cycle {
  0%, 48%, 67%, 100% { opacity: 0.36; }
  54%, 61% { opacity: 1; }
}

@keyframes seo-checking-crawl-cycle {
  0%, 31%, 100% { opacity: 1; }
  36%, 96% { opacity: 0; }
}

@keyframes seo-checked-crawl-cycle {
  0%, 31%, 67%, 100% { opacity: 0; }
  36%, 61% { opacity: 1; }
}

@keyframes seo-checking-mobile-cycle {
  0%, 40%, 100% { opacity: 1; }
  45%, 96% { opacity: 0; }
}

@keyframes seo-checked-mobile-cycle {
  0%, 40%, 67%, 100% { opacity: 0; }
  45%, 61% { opacity: 1; }
}

@keyframes seo-checking-content-cycle {
  0%, 49%, 100% { opacity: 1; }
  54%, 96% { opacity: 0; }
}

@keyframes seo-checked-content-cycle {
  0%, 49%, 67%, 100% { opacity: 0; }
  54%, 61% { opacity: 1; }
}

@media (max-width: 1360px) {
  .showcase-grid {
    width: min(760px, 100%);
    grid-template-columns: minmax(0, 1fr);
    margin-inline: auto;
  }

  .showcase-caption h3 {
    font-size: 23px;
  }
}

@media (max-width: 580px) {
  .showcase-grid {
    gap: 14px;
  }

  .showcase-card {
    min-height: 0;
    grid-template-rows: 250px auto;
    aspect-ratio: auto;
    border-radius: 14px;
  }

  .showcase-result {
    top: 12px;
    right: 12px;
    left: 12px;
    justify-content: space-between;
  }

  .showcase-caption {
    height: auto;
    min-height: 170px;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 18px 16px 16px;
  }

  .showcase-caption h3,
  .showcase-caption p {
    white-space: normal;
  }

  .showcase-caption button {
    justify-self: start;
  }

  .audit-window,
  .launch-board {
    right: 4%;
    left: 4%;
  }

  .audit-page > strong {
    max-width: 100%;
    font-size: 21px;
  }

  .audit-page {
    padding: 14px 16px 16px;
  }

  .audit-proof-ready {
    display: none;
  }

  .launch-board header {
    grid-template-columns: 1fr repeat(4, 24px);
  }

  .launch-row {
    grid-template-columns: 55px minmax(0, 1fr);
  }

  .launch-ready-card {
    right: 5%;
    left: 5%;
  }

  .launch-ready-card > div i:nth-child(n + 4) {
    display: none;
  }

  .video-source-stack {
    left: 4%;
    width: 42%;
  }

  .video-phone {
    right: 5%;
  }

  .video-edit-rail {
    right: 4%;
    bottom: 10px;
    left: 4%;
  }

  .signal-stack {
    left: 4%;
    width: 30%;
  }

  .signal-card {
    padding: 10px;
  }

  .signal-card strong {
    font-size: 14px;
  }

  .signal-card small,
  .signal-more {
    display: none;
  }

  .outreach-draft-card {
    right: 4%;
    width: 62%;
    min-height: 184px;
    padding: 10px 11px;
  }

  .outreach-route {
    left: 31%;
    width: 10%;
  }

  .outreach-copy span,
  .outreach-copy b {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .ad-concept-fan {
    right: 4%;
    left: 4%;
  }

  .ad-concept {
    width: 36%;
    padding: 10px;
  }

  .ad-concept strong {
    font-size: 15px;
  }

  .ad-platform-checks {
    bottom: 10px;
  }

  .seo-request-card,
  .seo-checklist-card,
  .seo-plan-card {
    right: 4%;
    left: 4%;
  }
}

@media (max-width: 360px) {
  .seo-plan-card > strong {
    font-size: 20px;
  }

  .seo-plan-card > small {
    display: none;
  }

  .seo-plan-card > div b {
    font-size: 8px;
  }
}

/*
 * Capability reels — motion system v4
 *
 * The stage is a persistent work surface. Scenes transform inside it and then
 * hold the finished artifact; the surface itself never cross-fades or resets.
 */

.showcase-stage {
  contain: layout paint;
}

.showcase-card.is-showcase-active .showcase-result {
  animation-timing-function: linear !important;
}

/* Audit: reveal the improved page with the scan line instead of dissolving two pages. */

.audit-window {
  box-sizing: border-box;
  background: oklch(0.078 0.011 270);
}

.audit-window::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 32px 0 0;
  background:
    linear-gradient(oklch(1 0 0 / 0.025) 1px, transparent 1px),
    linear-gradient(90deg, oklch(1 0 0 / 0.025) 1px, transparent 1px),
    oklch(0.078 0.011 270);
  background-size: 22px 22px;
}

.showcase-window-bar {
  position: relative;
  z-index: 4;
  background: oklch(0.075 0.011 270);
}

.audit-page {
  z-index: 1;
  background: transparent;
}

.audit-page-before {
  opacity: 1;
}

.audit-page-after {
  z-index: 2;
  opacity: 1;
  clip-path: inset(0 0 100% 0);
  background:
    linear-gradient(oklch(1 0 0 / 0.025) 1px, transparent 1px),
    linear-gradient(90deg, oklch(1 0 0 / 0.025) 1px, transparent 1px),
    oklch(0.078 0.011 270);
  background-size: 22px 22px;
}

.showcase-card.is-showcase-idle .audit-page-before {
  opacity: 1;
  transform: none;
}

.showcase-card.is-showcase-idle .audit-page-after {
  opacity: 1;
  clip-path: inset(0 0 100% 0);
  transform: none;
}

.showcase-card.is-showcase-static .audit-page-before {
  opacity: 0;
}

.showcase-card.is-showcase-static .audit-page-after {
  opacity: 1;
  clip-path: inset(0);
}

/* Launch: one permanent calendar shell; the brief and completion strip live inside it. */

.launch-board {
  height: 196px;
  min-height: 0;
  padding: 11px 14px 9px;
  box-sizing: border-box;
  background: oklch(0.075 0.015 275 / 0.985);
  backdrop-filter: none;
  opacity: 1;
  transform: none;
}

.launch-board header {
  position: relative;
  z-index: 4;
  height: 24px;
  padding-bottom: 7px;
  box-sizing: border-box;
}

.launch-row {
  position: relative;
  z-index: 2;
  height: 37px;
  opacity: 0.28;
}

.launch-brief-card {
  z-index: 6;
  top: auto;
  right: 12px;
  bottom: 8px;
  left: 72px;
  display: grid;
  width: auto;
  min-height: 29px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 5px 9px;
  box-sizing: border-box;
  background: oklch(0.105 0.027 280 / 0.985);
  backdrop-filter: none;
  transform: none;
  opacity: 1;
}

.launch-brief-card strong {
  min-width: 0;
  margin: 0;
  font-family: var(--font-public-sans);
  font-size: 12px;
  font-weight: 620;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.launch-brief-card small {
  margin: 0;
  font-size: 7px;
  white-space: nowrap;
}

.launch-ready-card {
  z-index: 7;
  top: auto;
  right: 12px;
  bottom: 8px;
  left: 72px;
  display: flex;
  width: auto;
  min-height: 29px;
  align-items: center;
  gap: 9px;
  padding: 5px 9px;
  border-color: oklch(0.72 0.15 145 / 0.34);
  border-radius: 7px;
  box-sizing: border-box;
  background: oklch(0.105 0.025 150 / 0.98);
  backdrop-filter: none;
  opacity: 0;
}

.launch-ready-card > span,
.launch-ready-card > strong,
.launch-ready-card > div {
  grid-column: auto;
  grid-row: auto;
}

.launch-ready-card > span {
  flex: 0 0 auto;
  color: oklch(0.78 0.13 145);
  font-size: 7px;
}

.launch-ready-card > strong {
  min-width: 0;
  margin: 0;
  font-family: var(--font-public-sans);
  font-size: 12px;
  font-weight: 620;
  letter-spacing: -0.01em;
}

.launch-ready-card > div {
  margin-left: auto;
}

.launch-ready-card i {
  width: auto;
  min-width: 0;
  height: auto;
  padding: 0;
  border: 0;
  color: oklch(0.68 0.05 145);
  background: transparent;
  font-size: 7px;
  white-space: nowrap;
}

.launch-playhead {
  z-index: 5;
  top: 35px;
  bottom: 42px;
}

.showcase-card.is-showcase-active .launch-board {
  animation: none !important;
}

.showcase-card.is-showcase-active .launch-row {
  animation: launch-row-cycle var(--showcase-duration) linear var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-idle .launch-board,
.showcase-card.is-showcase-static .launch-board {
  opacity: 1;
  transform: none;
}

.showcase-card.is-showcase-idle .launch-row {
  opacity: 0.28;
}

.showcase-card.is-showcase-idle .launch-brief-card {
  opacity: 1;
  transform: none;
}

.showcase-card.is-showcase-static .launch-row,
.showcase-card.is-showcase-static .launch-asset {
  opacity: 1;
}

.showcase-card.is-showcase-static .launch-brief-card {
  opacity: 0;
}

/* Reel: a fixed editor column and a fixed preview column with no physical overlap. */

.video-stepper {
  position: absolute;
  z-index: 6;
  top: 14px;
  left: 5%;
  display: flex;
  width: 54%;
  align-items: center;
  gap: 8px;
  color: oklch(0.5 0.01 85);
  font-family: var(--font-family-mono);
  font-size: 8px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.video-stepper i {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, oklch(1 0 0 / 0.16), oklch(1 0 0 / 0.04));
}

.video-stepper span {
  transition: none !important;
}

.video-source-stack {
  z-index: 4;
  top: 52px;
  left: 5%;
  width: 54%;
  gap: 5px;
}

.video-source-stack > span {
  position: relative;
  min-height: 31px;
  padding: 5px 72px 5px 9px;
  box-sizing: border-box;
  background: oklch(0.095 0.018 270 / 0.98);
  backdrop-filter: none;
}

.video-source-stack > span:nth-child(2) {
  transform: none;
}

.video-source-stack > span::after {
  content: "✓ selected";
  position: absolute;
  top: 50%;
  right: 9px;
  color: oklch(0.78 0.13 145);
  font-family: var(--font-family-mono);
  font-size: 7px;
  transform: translateY(-50%);
  opacity: 0;
}

.video-source-stack small {
  margin-top: 1px;
  font-size: 8px;
}

.video-phone {
  z-index: 3;
  top: 12px;
  right: 5%;
  width: 128px;
  height: 226px;
  box-sizing: border-box;
  transform: none;
  opacity: 0.46;
}

.video-edit-rail {
  z-index: 5;
  right: auto;
  bottom: 14px;
  left: 5%;
  width: 58%;
  min-height: 50px;
  padding: 8px 10px 9px;
  box-sizing: border-box;
  background: oklch(0.07 0.012 270 / 0.985);
  backdrop-filter: none;
}

.video-rail-meta {
  position: relative;
  display: block;
  height: 10px;
  margin-bottom: 6px;
}

.video-rail-meta span,
.video-rail-meta strong {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  white-space: nowrap;
}

.video-rail-meta strong {
  opacity: 0;
}

.capability-video .showcase-result {
  top: 52px;
  right: auto;
  left: 5%;
  display: flex;
  width: 54%;
  height: 103px;
  max-width: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  border-radius: 11px;
  box-sizing: border-box;
  background:
    radial-gradient(circle at 92% 18%, oklch(0.72 0.15 145 / 0.16), transparent 36%),
    oklch(0.075 0.02 150 / 0.985);
  white-space: normal;
  opacity: 0;
}

.capability-video .showcase-result span {
  font-size: 9px;
}

.capability-video .showcase-result strong {
  color: oklch(0.96 0.006 82);
  font-family: var(--font-public-serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
  white-space: normal;
}

.capability-video.is-showcase-active .showcase-result {
  animation: video-ready-cycle var(--showcase-duration) linear var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .video-source-stack > span:nth-child(1)::after {
  animation: video-source-check-one var(--showcase-duration) linear var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .video-source-stack > span:nth-child(2)::after {
  animation: video-source-check-two var(--showcase-duration) linear var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .video-source-stack > span:nth-child(3)::after {
  animation: video-source-check-three var(--showcase-duration) linear var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .video-stepper span:nth-of-type(1) {
  animation: video-step-ingest var(--showcase-duration) linear var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .video-stepper span:nth-of-type(2) {
  animation: video-step-select var(--showcase-duration) linear var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .video-stepper span:nth-of-type(3) {
  animation: video-step-cut var(--showcase-duration) linear var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .video-rail-track mark:nth-of-type(1) {
  animation: video-reject-one-cycle var(--showcase-duration) linear var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .video-rail-track mark:nth-of-type(2) {
  animation: video-reject-two-cycle var(--showcase-duration) linear var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .video-rail-meta span {
  animation: video-meta-raw-cycle var(--showcase-duration) linear var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .video-rail-meta strong {
  animation: video-meta-selected-cycle var(--showcase-duration) linear var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-idle .video-phone {
  opacity: 0.46;
  filter: none;
  transform: none;
}

.showcase-card.is-showcase-idle .video-source-stack {
  opacity: 1;
  transform: none;
}

.showcase-card.is-showcase-idle .video-rail-meta span,
.showcase-card.is-showcase-static .video-rail-meta strong {
  opacity: 1;
}

.showcase-card.is-showcase-idle .video-rail-meta strong,
.showcase-card.is-showcase-static .video-rail-meta span {
  opacity: 0;
}

.showcase-card.is-showcase-static .video-phone {
  opacity: 1;
  filter: none;
  transform: none;
}

.showcase-card.is-showcase-static .capability-video .showcase-result,
.capability-video.is-showcase-static .showcase-result {
  opacity: 1;
  transform: none;
}

.showcase-card.is-showcase-static .video-stepper span {
  color: oklch(0.5 0.01 85);
  opacity: 0.6;
}

.showcase-card.is-showcase-static .video-stepper span:nth-of-type(3) {
  color: oklch(0.78 0.13 145);
  opacity: 1;
}

.showcase-card.is-showcase-static .signal-card-one {
  border-color: oklch(1 0 0 / 0.12);
  opacity: 0.55;
  transform: translateX(5px) scale(0.985);
}

.showcase-card.is-showcase-static .outreach-route {
  opacity: 0;
}

.showcase-card.is-showcase-static .outreach-draft-card,
.showcase-card.is-showcase-static .outreach-draft-card > p,
.showcase-card.is-showcase-static .outreach-copy span,
.showcase-card.is-showcase-static .outreach-copy b {
  opacity: 1;
  transform: none;
}

.showcase-card.is-showcase-static .ad-offer-card {
  opacity: 0;
}

.showcase-card.is-showcase-static .ad-concept {
  filter: none;
  opacity: 1;
}

.showcase-card.is-showcase-static .ad-platform-checks {
  opacity: 1;
  transform: none;
}

.ad-concept {
  filter: none;
}

.ad-platform-checks span {
  background: oklch(0.07 0.012 270 / 0.97);
  backdrop-filter: none;
}

/* SEO phases share one chrome so the audit reads as progress, not stacked cards. */

.seo-workspace {
  position: absolute;
  z-index: 4;
  top: 56px;
  right: 7%;
  left: 7%;
  height: 176px;
  border: 1px solid oklch(1 0 0 / 0.15);
  border-radius: 12px;
  box-sizing: border-box;
  background: oklch(0.075 0.018 250);
  box-shadow: 0 22px 50px oklch(0 0 0 / 0.34);
  overflow: hidden;
}

.seo-workspace .seo-request-card,
.seo-workspace .seo-checklist-card,
.seo-workspace .seo-plan-card {
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 11px;
  box-shadow: none;
  transform: none;
}

.showcase-card.is-showcase-active .seo-request-card,
.showcase-card.is-showcase-active .seo-checklist-card,
.showcase-card.is-showcase-active .seo-plan-card {
  animation-timing-function: linear !important;
}

/* Final states stay visible. Pointer hover/focus explicitly restarts the film. */

@keyframes showcase-result-cycle {
  0%, 67% { opacity: 0; transform: translateY(-6px) scale(0.97); }
  75%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes audit-before-cycle {
  0%, 42% { opacity: 1; transform: none; }
  46%, 100% { opacity: 0; transform: none; }
}

@keyframes audit-after-cycle {
  0%, 9% { opacity: 1; clip-path: inset(0 0 100% 0); transform: none; }
  42%, 100% { opacity: 1; clip-path: inset(0); transform: none; }
}

@keyframes audit-beam-cycle {
  0%, 8% { top: 43px; opacity: 0; }
  12% { top: 43px; opacity: 1; }
  39% { top: 190px; opacity: 1; }
  43%, 100% { top: 190px; opacity: 0; }
}

@keyframes audit-pin-one-cycle {
  0%, 11% { opacity: 0; transform: translateY(6px) scale(0.97); }
  16%, 29% { opacity: 1; transform: none; }
  36%, 100% { opacity: 0; transform: translateY(-3px) scale(0.985); }
}

@keyframes audit-pin-two-cycle {
  0%, 17% { opacity: 0; transform: translateY(6px) scale(0.97); }
  22%, 33% { opacity: 1; transform: none; }
  39%, 100% { opacity: 0; transform: translateY(-3px) scale(0.985); }
}

@keyframes audit-pin-three-cycle {
  0%, 23% { opacity: 0; transform: translateY(6px) scale(0.97); }
  28%, 37% { opacity: 1; transform: none; }
  43%, 100% { opacity: 0; transform: translateY(-3px) scale(0.985); }
}

@keyframes launch-brief-cycle {
  0%, 17% { opacity: 1; transform: translateY(0); }
  24%, 100% { opacity: 0; transform: translateY(-4px); }
}

@keyframes launch-row-cycle {
  0%, 16% { opacity: 0.28; }
  27%, 100% { opacity: 1; }
}

@keyframes launch-asset-page-cycle {
  0%, 18% { opacity: 0; transform: translateY(5px); }
  24%, 100% { opacity: 1; transform: none; }
}

@keyframes launch-asset-email-cycle {
  0%, 25% { opacity: 0; transform: translateY(5px); }
  31%, 100% { opacity: 1; transform: none; }
}

@keyframes launch-asset-post-cycle {
  0%, 32% { opacity: 0; transform: translateY(5px); }
  38%, 100% { opacity: 1; transform: none; }
}

@keyframes launch-asset-demo-cycle {
  0%, 39% { opacity: 0; transform: translateY(5px); }
  45%, 100% { opacity: 1; transform: none; }
}

@keyframes launch-asset-partner-cycle {
  0%, 46% { opacity: 0; transform: translateY(5px); }
  52%, 100% { opacity: 1; transform: none; }
}

@keyframes launch-asset-followup-cycle {
  0%, 53% { opacity: 0; transform: translateY(5px); }
  59%, 100% { opacity: 1; transform: none; }
}

@keyframes launch-playhead-cycle {
  0%, 18% { left: 75px; opacity: 0; }
  23% { opacity: 1; }
  68% { left: calc(100% - 25px); opacity: 1; }
  74%, 100% { left: calc(100% - 25px); opacity: 0; }
}

@keyframes launch-ready-cycle {
  0%, 69% { opacity: 0; transform: translateY(5px); }
  77%, 100% { opacity: 1; transform: none; }
}

@keyframes video-sources-cycle {
  0%, 57% { opacity: 1; transform: none; }
  64%, 100% { opacity: 0; transform: translateY(-5px); }
}

@keyframes video-phone-cycle {
  0%, 14% { opacity: 0.46; transform: none; filter: none; }
  27%, 100% { opacity: 1; transform: none; filter: none; }
}

@keyframes video-ready-cycle {
  0%, 65% { opacity: 0; transform: translateY(6px); }
  72%, 100% { opacity: 1; transform: none; }
}

@keyframes video-source-check-one {
  0%, 12% { opacity: 0; }
  18%, 100% { opacity: 1; }
}

@keyframes video-source-check-two {
  0%, 20% { opacity: 0; }
  26%, 100% { opacity: 1; }
}

@keyframes video-source-check-three {
  0%, 28% { opacity: 0; }
  34%, 100% { opacity: 1; }
}

@keyframes video-step-ingest {
  0%, 20% { color: var(--brand-soft); opacity: 1; }
  29%, 100% { color: oklch(0.5 0.01 85); opacity: 0.6; }
}

@keyframes video-step-select {
  0%, 20% { color: oklch(0.5 0.01 85); opacity: 0.6; }
  29%, 54% { color: var(--brand-soft); opacity: 1; }
  63%, 100% { color: oklch(0.5 0.01 85); opacity: 0.6; }
}

@keyframes video-step-cut {
  0%, 54% { color: oklch(0.5 0.01 85); opacity: 0.6; }
  63%, 100% { color: oklch(0.78 0.13 145); opacity: 1; }
}

@keyframes video-reject-one-cycle {
  0%, 28% { opacity: 0.58; background: oklch(from var(--brand) l c h / 0.22); }
  36%, 100% { opacity: 0.13; background: oklch(1 0 0 / 0.035); }
}

@keyframes video-reject-two-cycle {
  0%, 38% { opacity: 0.58; background: oklch(from var(--brand) l c h / 0.22); }
  46%, 100% { opacity: 0.13; background: oklch(1 0 0 / 0.035); }
}

@keyframes video-playhead-cycle {
  0%, 18% { left: 2%; opacity: 0; }
  23% { opacity: 1; }
  82% { left: 98%; opacity: 1; }
  89%, 100% { left: 98%; opacity: 0; }
}

@keyframes video-meta-raw-cycle {
  0%, 37% { opacity: 1; }
  45%, 100% { opacity: 0; }
}

@keyframes video-meta-selected-cycle {
  0%, 40% { opacity: 0; }
  48%, 100% { opacity: 1; }
}

@keyframes outreach-signal-cycle {
  0%, 20% { opacity: 1; transform: none; border-color: oklch(0.72 0.15 145 / 0.52); }
  34%, 100% { opacity: 0.55; transform: translateX(5px) scale(0.985); border-color: oklch(1 0 0 / 0.12); }
}

@keyframes outreach-route-cycle {
  0%, 14% { opacity: 0; transform: scaleX(0); }
  24%, 58% { opacity: 1; transform: scaleX(1); }
  72%, 100% { opacity: 0; transform: scaleX(1); }
}

@keyframes outreach-draft-cycle {
  0%, 18% { opacity: 0.2; transform: translateX(12px) scale(0.98); }
  30%, 100% { opacity: 1; transform: none; }
}

@keyframes outreach-source-cycle {
  0%, 25% { opacity: 0.08; transform: translateY(5px); }
  32%, 100% { opacity: 1; transform: none; }
}

@keyframes outreach-subject-cycle {
  0%, 33% { opacity: 0.08; transform: translateY(5px); }
  40%, 100% { opacity: 1; transform: none; }
}

@keyframes outreach-opening-cycle {
  0%, 41% { opacity: 0.08; transform: translateY(5px); }
  48%, 100% { opacity: 1; transform: none; }
}

@keyframes outreach-cta-cycle {
  0%, 49% { opacity: 0.08; transform: translateY(5px); }
  56%, 100% { opacity: 1; transform: none; }
}

@keyframes ad-offer-cycle {
  0%, 18% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  31%, 100% { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(0.94); }
}

@keyframes ad-concept-cycle {
  0%, 19% { opacity: 0; }
  34%, 100% { opacity: 1; }
}

@keyframes ad-platform-cycle {
  0%, 48% { opacity: 0; transform: translateY(6px); }
  61%, 100% { opacity: 1; transform: none; }
}

@keyframes seo-request-cycle {
  0%, 22% { opacity: 1; transform: none; }
  30%, 100% { opacity: 0; transform: none; }
}

@keyframes seo-checklist-cycle {
  0%, 22% { opacity: 0; transform: none; }
  30%, 62% { opacity: 1; transform: none; }
  70%, 100% { opacity: 0; transform: none; }
}

@keyframes seo-plan-v3-cycle {
  0%, 62% { opacity: 0; transform: none; }
  70%, 100% { opacity: 1; transform: none; }
}

@keyframes seo-scan-beam-v3-cycle {
  0%, 27% { top: 43px; opacity: 0; }
  32% { opacity: 1; }
  57% { top: 158px; opacity: 1; }
  63%, 100% { top: 158px; opacity: 0; }
}

@keyframes seo-checking-crawl-cycle {
  0%, 31% { opacity: 1; }
  36%, 100% { opacity: 0; }
}

@keyframes seo-checked-crawl-cycle {
  0%, 31% { opacity: 0; }
  36%, 100% { opacity: 1; }
}

@keyframes seo-checking-mobile-cycle {
  0%, 40% { opacity: 1; }
  45%, 100% { opacity: 0; }
}

@keyframes seo-checked-mobile-cycle {
  0%, 40% { opacity: 0; }
  45%, 100% { opacity: 1; }
}

@keyframes seo-checking-content-cycle {
  0%, 49% { opacity: 1; }
  54%, 100% { opacity: 0; }
}

@keyframes seo-checked-content-cycle {
  0%, 49% { opacity: 0; }
  54%, 100% { opacity: 1; }
}

@media (max-width: 580px) {
  .launch-brief-card {
    left: 65px;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .launch-brief-card small {
    display: none;
  }

  .launch-ready-card {
    left: 65px;
  }

  .launch-ready-card > div {
    display: none;
  }

  .launch-row > span {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 4px;
  }

  .launch-row > span .launch-asset {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    width: 100%;
    min-width: 0;
    padding-inline: 3px;
    box-sizing: border-box;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .video-stepper,
  .video-source-stack,
  .capability-video .showcase-result {
    left: 4%;
    width: 55%;
  }

  .video-phone {
    top: 38px;
    right: 4%;
    width: 96px;
    height: 171px;
  }

  .video-edit-rail {
    right: auto;
    bottom: 14px;
    left: 4%;
    width: 60%;
  }

  .video-source-stack > span {
    padding-right: 9px;
  }

  .video-source-stack > span::after {
    content: "✓";
  }

  .capability-video .showcase-result {
    right: auto;
    height: 103px;
  }

  .capability-video .showcase-result strong {
    font-size: 15px;
  }

  .seo-workspace {
    right: 4%;
    left: 4%;
  }
}

@media (max-width: 340px) {
  .video-edit-rail {
    width: 57%;
  }
}

/*
 * Capability reels — v5 audit + theme integration
 *
 * The audit is one permanent workspace: the page never swaps or cross-fades.
 * Evidence appears in a reserved findings rail as the scan reaches each target.
 */

.capability-audit {
  --showcase-duration: 7.2s;
}

.audit-workspace {
  top: 14px;
  right: 5%;
  left: 5%;
  height: 222px;
}

.audit-layout {
  position: absolute;
  z-index: 2;
  inset: 32px 0 0;
  display: grid;
  grid-template-columns: 52% 48%;
}

.audit-page-preview {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 13px 14px;
  border-right: 1px solid oklch(1 0 0 / 0.1);
  background:
    linear-gradient(oklch(1 0 0 / 0.025) 1px, transparent 1px),
    linear-gradient(90deg, oklch(1 0 0 / 0.025) 1px, transparent 1px),
    oklch(0.078 0.011 270);
  background-size: 20px 20px;
  overflow: hidden;
}

.audit-preview-kicker {
  margin-bottom: 6px;
  color: var(--brand-soft);
  font-family: var(--font-family-mono);
  font-size: 7px;
  letter-spacing: 0.065em;
  text-transform: uppercase;
}

.audit-target {
  position: relative;
  box-shadow: inset 0 0 0 1px transparent;
}

.audit-target-message {
  display: block;
  max-width: 96%;
  padding: 3px 4px;
  margin-left: -4px;
  border-radius: 5px;
  color: oklch(0.97 0.005 82);
  font-family: var(--font-public-serif);
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 590;
  line-height: 0.98;
  letter-spacing: -0.038em;
}

.audit-preview-actions {
  display: flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  gap: 5px;
  margin-top: 9px;
  padding: 3px;
  border-radius: 5px;
  font-family: var(--font-family-mono);
  font-size: 6px;
  white-space: nowrap;
}

.audit-preview-actions b,
.audit-preview-actions em {
  padding: 5px 6px;
  border: 1px solid oklch(1 0 0 / 0.14);
  border-radius: 4px;
  font-style: normal;
}

.audit-preview-actions b {
  color: oklch(0.12 0.01 270);
  background: oklch(0.96 0.006 82);
}

.audit-preview-actions em {
  color: oklch(0.68 0.008 85);
}

.audit-preview-proof {
  display: grid;
  width: 100%;
  min-height: 20px;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding: 3px;
  border-radius: 5px;
  box-sizing: border-box;
}

.audit-preview-proof i {
  height: 12px;
  border: 1px dashed oklch(1 0 0 / 0.13);
  border-radius: 3px;
}

.audit-preview-proof span {
  color: oklch(0.58 0.01 85);
  font-family: var(--font-family-mono);
  font-size: 6px;
  white-space: nowrap;
}

.audit-scan-line {
  position: absolute;
  z-index: 5;
  top: 8px;
  right: 9px;
  left: 9px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  box-shadow: 0 0 16px oklch(from var(--brand) l c h / 0.78);
  opacity: 0;
}

.audit-findings {
  display: grid;
  min-width: 0;
  grid-template-rows: 31px repeat(3, 1fr) 28px;
  padding: 8px 10px 9px;
  color: oklch(0.9 0.007 85);
  background: oklch(0.066 0.016 270 / 0.99);
  box-sizing: border-box;
}

.audit-findings > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid oklch(1 0 0 / 0.08);
}

.audit-findings > header span,
.audit-findings > header strong {
  font-family: var(--font-family-mono);
  font-size: 7px;
  white-space: nowrap;
}

.audit-findings > header span {
  color: oklch(0.58 0.01 85);
}

.audit-findings > header strong {
  color: var(--brand-soft);
  font-weight: 550;
  opacity: 0.36;
}

.audit-finding {
  display: grid;
  min-width: 0;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  border-bottom: 1px solid oklch(1 0 0 / 0.065);
  opacity: 0.22;
  transform: none;
}

.audit-finding > i {
  color: var(--brand-soft);
  font-family: var(--font-family-mono);
  font-size: 7px;
  font-style: normal;
}

.audit-finding > p {
  display: flex;
  min-width: 0;
  flex-direction: column;
  margin: 0;
}

.audit-finding b {
  color: oklch(0.92 0.007 85);
  font-size: 9px;
  font-weight: 620;
  line-height: 1.05;
}

.audit-finding small {
  margin-top: 2px;
  color: oklch(0.57 0.009 85);
  font-size: 7px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.audit-findings > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 6px;
  border: 1px solid oklch(0.72 0.15 145 / 0.24);
  border-radius: 5px;
  background: oklch(0.1 0.025 150 / 0.72);
  box-sizing: border-box;
  font-family: var(--font-family-mono);
  font-size: 7px;
  opacity: 0.18;
  transform: none;
}

.audit-findings > footer span {
  color: oklch(0.58 0.01 85);
}

.audit-findings > footer b {
  min-width: 0;
  color: oklch(0.76 0.14 145);
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.showcase-card.is-showcase-active .audit-scan-line {
  animation: audit-v5-scan var(--showcase-duration) ease-in-out var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .audit-target-message {
  animation: audit-v5-target-one var(--showcase-duration) linear var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .audit-target-cta {
  animation: audit-v5-target-two var(--showcase-duration) linear var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .audit-target-proof {
  animation: audit-v5-target-three var(--showcase-duration) linear var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .audit-findings > header strong {
  animation: audit-v5-count var(--showcase-duration) linear var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .audit-finding-one {
  animation: audit-v5-finding-one var(--showcase-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .audit-finding-two {
  animation: audit-v5-finding-two var(--showcase-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .audit-finding-three {
  animation: audit-v5-finding-three var(--showcase-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-active .audit-findings > footer {
  animation: audit-v5-footer var(--showcase-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--showcase-delay) 1 both !important;
}

.showcase-card.is-showcase-idle .audit-target,
.showcase-card.is-showcase-static .audit-target {
  background: transparent;
  box-shadow: inset 0 0 0 1px transparent;
}

.showcase-card.is-showcase-idle .audit-scan-line {
  opacity: 0;
}

.showcase-card.is-showcase-idle .audit-finding {
  opacity: 0.22;
  transform: none;
}

.showcase-card.is-showcase-idle .audit-findings > footer {
  opacity: 0.18;
  transform: none;
}

.showcase-card.is-showcase-static .audit-target {
  background: oklch(from var(--brand) l c h / 0.055);
  box-shadow: inset 0 0 0 1px oklch(from var(--brand) l c h / 0.34);
}

.showcase-card.is-showcase-static .audit-finding,
.showcase-card.is-showcase-static .audit-findings > footer,
.showcase-card.is-showcase-static .audit-findings > header strong {
  opacity: 1;
  transform: none;
}

@keyframes audit-v5-scan {
  0%, 7% { top: 8px; opacity: 0; }
  11% { top: 8px; opacity: 1; }
  47% { top: calc(100% - 9px); opacity: 1; }
  52%, 100% { top: calc(100% - 9px); opacity: 0; }
}

@keyframes audit-v5-target-one {
  0%, 13% { background: transparent; box-shadow: inset 0 0 0 1px transparent; }
  18%, 100% { background: oklch(from var(--brand) l c h / 0.055); box-shadow: inset 0 0 0 1px oklch(from var(--brand) l c h / 0.34); }
}

@keyframes audit-v5-target-two {
  0%, 24% { background: transparent; box-shadow: inset 0 0 0 1px transparent; }
  29%, 100% { background: oklch(from var(--brand) l c h / 0.055); box-shadow: inset 0 0 0 1px oklch(from var(--brand) l c h / 0.34); }
}

@keyframes audit-v5-target-three {
  0%, 35% { background: transparent; box-shadow: inset 0 0 0 1px transparent; }
  40%, 100% { background: oklch(from var(--brand) l c h / 0.055); box-shadow: inset 0 0 0 1px oklch(from var(--brand) l c h / 0.34); }
}

@keyframes audit-v5-count {
  0%, 37% { opacity: 0.36; }
  46%, 100% { opacity: 1; }
}

@keyframes audit-v5-finding-one {
  0%, 15% { opacity: 0.22; transform: none; }
  22%, 100% { opacity: 1; transform: none; }
}

@keyframes audit-v5-finding-two {
  0%, 26% { opacity: 0.22; transform: none; }
  33%, 100% { opacity: 1; transform: none; }
}

@keyframes audit-v5-finding-three {
  0%, 37% { opacity: 0.22; transform: none; }
  44%, 100% { opacity: 1; transform: none; }
}

@keyframes audit-v5-footer {
  0%, 54% { opacity: 0.18; transform: none; }
  63%, 100% { opacity: 1; transform: none; }
}

/* Light mode keeps the films dark, but returns the surrounding card chrome to paper. */

:root[data-theme="light"] .showcase-card {
  border-color: oklch(0.78 0.018 74);
  background: var(--paper);
  box-shadow:
    0 20px 48px oklch(0.23 0.02 270 / 0.13),
    0 1px 0 oklch(1 0 0 / 0.72) inset;
}

:root[data-theme="light"] .showcase-card:hover,
:root[data-theme="light"] .showcase-card:focus-within {
  border-color: oklch(from var(--brand) l c h / 0.72);
  box-shadow:
    0 26px 62px oklch(0.23 0.02 270 / 0.18),
    0 0 0 1px oklch(from var(--brand) l c h / 0.08);
}

:root[data-theme="light"] .showcase-caption {
  border-top-color: var(--rule);
  color: var(--ink);
  background: linear-gradient(180deg, oklch(0.985 0.005 88), oklch(0.958 0.008 84));
}

:root[data-theme="light"] .showcase-caption .capability-skill {
  color: oklch(0.48 0.19 22);
}

:root[data-theme="light"] .showcase-caption p {
  color: oklch(0.42 0.012 270);
}

:root[data-theme="light"] .showcase-caption button {
  border-color: oklch(0.2 0.012 270);
  color: oklch(0.97 0.006 85);
  background: oklch(0.18 0.012 270);
  box-shadow: 0 8px 20px oklch(0.2 0.012 270 / 0.17);
}

:root[data-theme="light"] .showcase-caption button span {
  color: var(--brand-soft);
}

:root[data-theme="light"] .showcase-caption button:hover,
:root[data-theme="light"] .showcase-caption button:focus-visible {
  border-color: oklch(0.5 0.19 24);
  color: oklch(0.99 0.004 85);
  background: oklch(0.5 0.19 24);
}

@media (max-width: 580px) {
  .audit-workspace {
    top: 12px;
    right: 4%;
    left: 4%;
    height: 226px;
  }

  .audit-layout {
    grid-template-columns: 51% 49%;
  }

  .audit-page-preview {
    padding: 11px 10px;
  }

  .audit-target-message {
    max-width: 100%;
    font-size: 16px;
  }

  .audit-preview-actions {
    gap: 3px;
  }

  .audit-preview-actions em {
    display: none;
  }

  .audit-preview-proof {
    grid-template-columns: 1fr auto;
  }

  .audit-preview-proof i:nth-child(2) {
    display: none;
  }

  .audit-findings {
    padding-inline: 8px;
  }

  .audit-findings > header span {
    display: none;
  }

  .audit-findings > header {
    justify-content: flex-end;
  }

  .audit-finding {
    grid-template-columns: 18px minmax(0, 1fr);
  }

  .audit-findings > footer span {
    display: none;
  }

  .audit-findings > footer {
    justify-content: flex-end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .showcase-card,
  .showcase-card *,
  .showcase-card.is-showcase-active,
  .showcase-card.is-showcase-active *,
  .showcase-card.is-showcase-active .showcase-stage *,
  .showcase-card.is-showcase-active .showcase-stage *::before,
  .showcase-card.is-showcase-active .showcase-stage *::after,
  .showcase-card::before,
  .showcase-card::after,
  .showcase-card *::before,
  .showcase-card *::after {
    animation: none !important;
    transition: none !important;
  }

  .showcase-progress {
    display: none;
  }
}

/* Adaptive task workspace -------------------------------------------------- */

.workspace-canvas {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-left: 1px solid var(--rule);
  background: oklch(from var(--paper) l c h / 0.86);
}

.workspace-resize-handle {
  position: absolute;
  z-index: 8;
  top: 0;
  bottom: 0;
  left: -4px;
  width: 8px;
  cursor: col-resize;
}

.workspace-resize-handle::after {
  position: absolute;
  top: 50%;
  bottom: auto;
  left: 3px;
  width: 2px;
  height: 44px;
  border-radius: 2px;
  background: transparent;
  content: "";
  transform: translateY(-50%);
  transition: background 140ms ease;
}

.workspace-resize-handle:hover::after,
body[data-resizing="true"] .workspace-resize-handle::after {
  background: var(--brand);
}

.workspace-canvas[hidden] {
  display: none;
}

.workspace-canvas-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  min-height: 82px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--rule-soft);
  background: oklch(from var(--paper) l c h / 0.94);
}

.workspace-canvas-heading {
  min-width: 0;
}

.workspace-canvas-heading .section-eyebrow {
  margin: 0 0 5px;
  font-family: var(--font-family-mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
}

.workspace-canvas-heading h2 {
  margin: 0;
  overflow: hidden;
  font-family: var(--font-public-serif);
  font-size: 21px;
  font-weight: 590;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-canvas-heading > p:last-child {
  margin: 3px 0 0;
  overflow: hidden;
  color: var(--ink-dim);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-tabs {
  display: flex;
  flex: none;
  gap: 18px;
  min-height: 43px;
  padding: 0 22px;
  overflow-x: auto;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

.workspace-tab {
  position: relative;
  flex: none;
  padding: 0 1px;
  color: var(--ink-dim);
  font-size: 12px;
  font-weight: 540;
}

.workspace-tab:hover,
.workspace-tab[aria-selected="true"] {
  color: var(--ink);
}

.workspace-tab[aria-selected="true"]::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--brand);
  content: "";
}

.workspace-content {
  flex: 1;
  min-height: 0;
  padding: 20px 22px 28px;
  overflow: auto;
}

.workspace-files-shell {
  display: grid;
  grid-template-columns: var(--workspace-explorer-width, 272px) 7px minmax(0, 1fr);
  width: calc(100% + 44px);
  height: calc(100% + 48px);
  min-height: 480px;
  margin: -20px -22px -28px;
  overflow: hidden;
  background: var(--paper);
}

.workspace-explorer {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--rule);
  background: var(--paper-2);
}

.workspace-explorer-toolbar {
  display: flex;
  flex: none;
  gap: 6px;
  padding: 10px;
  border-bottom: 1px solid var(--rule-soft);
}

.workspace-explorer-toolbar label {
  min-width: 0;
  flex: 1;
}

.workspace-explorer-toolbar .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.workspace-explorer-toolbar input {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--rule);
  border-radius: 5px;
  color: var(--ink);
  background: var(--paper);
  font-size: 11px;
}

.workspace-explorer-collapse {
  flex: none;
  font-size: 19px;
}

.workspace-explorer-scroll {
  min-height: 0;
  padding: 10px 8px 24px;
  overflow: auto;
}

.workspace-recent > header,
.workspace-tree > header {
  padding: 9px 7px 6px;
  color: var(--ink-dim);
  font-family: var(--font-family-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.workspace-tree {
  margin-top: 10px;
}

.workspace-explorer-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  width: 100%;
  min-height: 32px;
  align-items: center;
  gap: 5px;
  padding: 4px 6px;
  border-radius: 4px;
  color: var(--ink);
  text-align: left;
}

.workspace-explorer-row:hover,
.workspace-explorer-row:focus-visible,
.workspace-explorer-row[aria-expanded="true"] {
  background: oklch(from var(--brand) l c h / 0.09);
}

.workspace-file-glyph {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
  color: var(--brand);
  background: var(--paper);
  font-family: var(--font-family-mono);
  font-size: 7px;
  font-weight: 650;
}

.workspace-explorer-name {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-explorer-row small {
  color: var(--ink-dim);
  font-size: 8px;
  white-space: nowrap;
}

.workspace-explorer-note {
  display: block;
  padding: 8px;
  color: var(--ink-dim);
  font-size: 9px;
  line-height: 1.45;
}

.workspace-explorer-note.error {
  color: var(--danger);
}

.workspace-tree-loading {
  display: block;
  padding: 8px 10px;
}

.workspace-explorer-resize {
  position: relative;
  z-index: 2;
  width: 7px;
  border-right: 1px solid var(--rule-soft);
  cursor: col-resize;
}

.workspace-explorer-resize::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2px;
  width: 2px;
  background: transparent;
  content: "";
}

.workspace-explorer-resize:hover::before {
  background: var(--brand);
}

.workspace-explorer-resize span {
  display: none;
}

.workspace-files-shell.is-explorer-collapsed {
  grid-template-columns: 0 19px minmax(0, 1fr);
}

.workspace-files-shell.is-explorer-collapsed .workspace-explorer {
  visibility: hidden;
}

.workspace-files-shell.is-explorer-collapsed .workspace-explorer-resize {
  width: 19px;
  cursor: pointer;
}

.workspace-files-shell.is-explorer-collapsed .workspace-explorer-resize span {
  display: inline;
  color: var(--brand);
  font-size: 18px;
}

.workspace-viewer {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
}

.workspace-viewer-tabs {
  display: flex;
  min-height: 42px;
  flex: none;
  align-items: stretch;
  overflow-x: auto;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}

.workspace-viewer-label {
  align-self: center;
  padding: 0 14px;
  color: var(--ink-dim);
  font-size: 10px;
}

.workspace-viewer-tab {
  display: flex;
  max-width: 230px;
  flex: none;
  align-items: center;
  gap: 12px;
  padding: 0 11px 0 14px;
  border-right: 1px solid var(--rule);
  color: var(--ink-dim);
  background: var(--paper-2);
  font-size: 10px;
}

.workspace-viewer-tab[data-active="true"] {
  color: var(--ink);
  background: var(--paper);
}

.workspace-viewer-tab span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-viewer-tab i {
  color: var(--ink-dim);
  font-size: 14px;
  font-style: normal;
}

.workspace-viewer-body {
  min-width: 0;
  min-height: 0;
  flex: 1;
  overflow: auto;
}

.workspace-viewer-body > .workspace-empty {
  min-height: 100%;
  border: 0;
}

.workspace-file-preview {
  display: flex;
  min-width: 0;
  min-height: 100%;
  flex-direction: column;
}

.workspace-file-toolbar {
  display: flex;
  min-height: 49px;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 8px 13px;
  border-bottom: 1px solid var(--rule-soft);
}

.workspace-file-toolbar > span {
  min-width: 0;
}

.workspace-file-toolbar strong,
.workspace-file-toolbar small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-file-toolbar strong {
  font-size: 11px;
  font-weight: 590;
}

.workspace-file-toolbar small {
  margin-top: 2px;
  color: var(--ink-dim);
  font-size: 8px;
}

.workspace-file-preview-body {
  display: flex;
  min-height: 0;
  flex: 1;
  align-items: stretch;
  justify-content: center;
  overflow: auto;
  background: var(--paper);
}

.workspace-media-preview,
.workspace-video-preview {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 230px);
  align-self: center;
  object-fit: contain;
}

.workspace-video-preview {
  width: 100%;
  background: #0a0a0a;
}

.workspace-audio-preview {
  width: min(560px, calc(100% - 48px));
  align-self: center;
}

.workspace-pdf-preview,
.workspace-html-preview {
  width: 100%;
  min-height: 100%;
  border: 0;
  background: white;
}

.workspace-code-preview {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: clamp(18px, 3vw, 42px);
  overflow: auto;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-family-mono);
  font-size: 11px;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.workspace-markdown-preview {
  width: min(820px, 100%);
  margin: 0 auto;
  padding: clamp(24px, 5vw, 64px);
  color: var(--ink);
  background: var(--paper);
  font-size: 13px;
  line-height: 1.75;
}

.workspace-markdown-preview h1,
.workspace-markdown-preview h2,
.workspace-markdown-preview h3,
.workspace-markdown-preview h4 {
  margin: 1.4em 0 0.5em;
  font-family: var(--font-public-serif);
  line-height: 1.15;
}

.workspace-markdown-preview h1:first-child,
.workspace-markdown-preview h2:first-child {
  margin-top: 0;
}

.workspace-markdown-preview pre,
.workspace-markdown-preview blockquote {
  margin: 18px 0;
  padding: 14px 16px;
  border-left: 2px solid var(--brand);
  background: var(--paper-2);
  white-space: pre-wrap;
}

.workspace-table-wrap {
  width: 100%;
  overflow: auto;
}

.workspace-table-preview {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.workspace-table-preview th,
.workspace-table-preview td {
  max-width: 360px;
  padding: 8px 10px;
  overflow: hidden;
  border-right: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-table-preview th {
  position: sticky;
  z-index: 1;
  top: 0;
  background: var(--paper-2);
  font-weight: 620;
}

.workspace-preview-notice {
  position: sticky;
  z-index: 3;
  top: 0;
  display: block;
  width: 100%;
  padding: 7px 12px;
  color: var(--ink-dim);
  background: var(--paper-2);
  font-size: 9px;
  text-align: center;
}

.workspace-file-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 9px;
}

.workspace-file-card,
.message-artifact-launch {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--ink);
  background: var(--paper);
  text-align: left;
  transition: border-color 150ms ease, background 150ms ease;
}

.workspace-file-card:hover,
.message-artifact-launch:hover {
  border-color: oklch(from var(--brand) l c h / 0.48);
  background: var(--paper-2);
}

.workspace-file-card .file-card-main {
  flex: 1;
  min-width: 0;
}

.workspace-file-action,
.message-artifact-action {
  flex: none;
  color: var(--brand);
  font-size: 11px;
  font-weight: 600;
}

.workspace-empty {
  display: flex;
  min-height: min(390px, 58vh);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 36px 20px;
  border: 1px dashed var(--rule);
  background: oklch(from var(--paper) l c h / 0.58);
  text-align: center;
}

.workspace-empty strong {
  font-size: 14px;
  font-weight: 590;
}

.workspace-empty small {
  max-width: 360px;
  color: var(--ink-dim);
  font-size: 11px;
  line-height: 1.55;
}

.workspace-empty[data-tone="error"] .files-empty-icon {
  color: var(--danger);
}

.artifact-preview {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--paper);
  box-shadow: var(--paper-shadow);
}

.artifact-preview-toolbar {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--rule-soft);
}

.artifact-preview-toolbar > span {
  min-width: 0;
}

.artifact-preview-toolbar strong,
.artifact-preview-toolbar small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.artifact-preview-toolbar strong {
  font-size: 12px;
  font-weight: 590;
}

.artifact-preview-toolbar small {
  margin-top: 2px;
  color: var(--ink-dim);
  font-family: var(--font-family-mono);
  font-size: 8px;
}

.artifact-preview-toolbar a:not([href]) {
  display: none;
}

.artifact-preview-body {
  display: flex;
  min-height: 360px;
  flex: 1;
  align-items: stretch;
  justify-content: center;
  overflow: auto;
  background: var(--paper-2);
}

.workspace-loading {
  align-self: center;
  color: var(--ink-dim);
  font-family: var(--font-family-mono);
  font-size: 10px;
}

.workspace-activity-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 920px;
  margin: 0 auto;
  padding: 0;
  border-top: 1px solid var(--rule-soft);
  list-style: none;
}

.workspace-activity-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 11px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--rule-soft);
}

.workspace-activity-row strong,
.workspace-activity-row small {
  display: block;
}

.workspace-activity-row strong {
  font-family: var(--font-family-mono);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.workspace-activity-row small {
  margin-top: 3px;
  color: var(--ink-dim);
  font-size: 9px;
}

.workspace-activity-dot {
  width: 7px;
  height: 7px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--ink-dim);
}

.workspace-activity-dot[data-status="working"] {
  background: var(--brand);
  animation: pulse 1.6s ease-in-out infinite;
}

.workspace-activity-dot[data-status="error"] {
  background: var(--danger);
}

.message-artifact-launch {
  max-width: 520px;
  margin-top: 5px;
}

.message-artifact-launch > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.message-artifact-launch strong,
.message-artifact-launch small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-artifact-launch strong {
  font-size: 12px;
  font-weight: 590;
}

.message-artifact-launch small {
  margin-top: 2px;
  color: var(--ink-dim);
  font-size: 10px;
}

body[data-workspace-open="true"] .console-shell {
  grid-template-columns: 72px minmax(0, 1fr);
}

body[data-workspace-open="true"] .console-grid {
  grid-template-columns: minmax(280px, var(--workspace-chat-width, 390px)) minmax(0, 1fr);
}

body[data-resizing="true"] {
  cursor: col-resize;
  user-select: none;
}

body[data-workspace-open="true"] .conversation-panel {
  min-width: 0;
  padding-right: 18px;
  padding-left: 18px;
}

body[data-workspace-open="true"][data-view="chat"] .conversation-head,
body[data-workspace-open="true"][data-view="chat"] .chat-messages,
body[data-workspace-open="true"][data-view="chat"] .prompt-dock,
body[data-workspace-open="true"][data-view="chat"] .coordinator-field:not([hidden]) {
  width: 100%;
}

body[data-workspace-open="true"][data-view="chat"] .conversation-subtitle,
body[data-workspace-open="true"][data-view="chat"] .run-controls .connection-pill,
body[data-workspace-open="true"][data-view="chat"] .run-controls #refreshJobs {
  display: none;
}

body[data-workspace-open="true"][data-view="home"] .conversation-panel {
  padding-top: 38px;
}

body[data-workspace-open="true"][data-view="home"] .starter-section {
  display: none;
}

body[data-workspace-open="true"][data-view="home"] .conversation-head {
  margin-top: auto;
  text-align: left;
}

body[data-workspace-open="true"][data-view="home"] .conversation-title {
  text-align: left;
}

body[data-workspace-open="true"][data-view="home"] #consoleTitle {
  font-size: 31px;
  line-height: 1.05;
}

body[data-workspace-open="true"][data-view="home"] .conversation-subtitle {
  margin-left: 0;
  font-size: 13px;
}

body[data-workspace-open="true"][data-view="home"] .prompt-dock {
  margin-bottom: auto;
}

@media (min-width: 761px) {
  body[data-workspace-open="true"] .console-topbar {
    padding: 16px 8px 12px;
  }

  body[data-workspace-open="true"] .product-switcher {
    margin-bottom: 12px;
  }

  body[data-workspace-open="true"] .side-product,
  body[data-workspace-open="true"] .side-nav-item {
    justify-content: center;
    gap: 0;
    padding-right: 8px;
    padding-left: 8px;
  }

  body[data-workspace-open="true"] .side-product {
    min-height: 38px;
  }

  body[data-workspace-open="true"] .vg-wordmark {
    font-size: 11px;
    text-align: center;
  }

  body[data-workspace-open="true"] .brand-copy small,
  body[data-workspace-open="true"] .product-chevron,
  body[data-workspace-open="true"] .side-nav-item span,
  body[data-workspace-open="true"] .side-section-label,
  body[data-workspace-open="true"] .account-name {
    display: none;
  }

  body[data-workspace-open="true"] #historyButton {
    display: flex;
  }

  body[data-workspace-open="true"] .side-chats {
    display: none;
  }

  body[data-workspace-open="true"] .side-nav-item.primary {
    margin-bottom: 5px;
  }

  body[data-workspace-open="true"] .pricing-pill {
    justify-content: center;
    padding: 7px;
    font-size: 0;
  }

  body[data-workspace-open="true"] .pricing-pill .icon {
    width: 15px;
    height: 15px;
  }

  body[data-workspace-open="true"] .account-control {
    flex-direction: column;
  }

  body[data-workspace-open="true"] .account-button {
    justify-content: center;
    padding: 6px;
  }
}

@media (max-width: 980px) and (min-width: 761px) {
  body[data-workspace-open="true"] .console-grid {
    grid-template-columns: minmax(280px, var(--workspace-chat-width, 35vw)) minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  body[data-workspace-open="true"] .console-shell {
    grid-template-columns: 1fr;
  }

  body[data-workspace-open="true"] .console-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-workspace-open="true"] .conversation-panel {
    display: none;
  }

  .workspace-canvas {
    border-left: 0;
  }

  .workspace-canvas-head,
  .workspace-tabs,
  .workspace-content {
    padding-right: 16px;
    padding-left: 16px;
  }

  .workspace-resize-handle {
    display: none;
  }

  .workspace-files-shell {
    grid-template-columns: clamp(124px, 38vw, 170px) 5px minmax(0, 1fr);
    width: calc(100% + 32px);
    margin-right: -16px;
    margin-left: -16px;
  }

  .workspace-files-shell.is-explorer-collapsed {
    grid-template-columns: 0 19px minmax(0, 1fr);
  }

  .workspace-explorer-toolbar {
    gap: 4px;
    padding: 7px;
  }

  .workspace-explorer-toolbar input {
    padding: 0 7px;
  }

  .workspace-explorer-row {
    grid-template-columns: 22px minmax(0, 1fr);
    padding-right: 4px;
    padding-left: 4px;
  }

  .workspace-explorer-row small {
    display: none;
  }
}