.working-prototype {
  --showcase-accent: #ff6f61;
  --showcase-transition-height: 32px;
  --showcase-nav-height: 46px;
  --showcase-sticky-top: 156px;
  background: #f7f7f3;
}

.working-prototype #site-header:empty {
  display: block;
  min-height: 68px;
  background: #050505;
}

/* The shared site motion layer auto-enrolls newly inserted sections and media.
   Showcase manages its own scroll lifecycle, so its content must stay painted. */
.working-prototype .showcase.taste-reveal,
.working-prototype .showcase .taste-reveal {
  opacity: 1 !important;
  transform: none !important;
}

.working-prototype .site-header {
  top: var(--showcase-transition-height);
  border-bottom-color: rgba(255, 255, 255, 0.12);
  background: rgba(5, 5, 5, 0.97);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
  color: #fff;
}

.showcase-transition-bar {
  position: sticky;
  z-index: 110;
  top: 0;
  display: flex;
  min-height: var(--showcase-transition-height);
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 5px 18px;
  background: #ff6f61;
  color: #160805;
  font-size: 12px;
  line-height: 1.2;
}

.showcase-transition-bar a {
  border-bottom: 1px solid currentColor;
  color: inherit;
  font-weight: 720;
  text-decoration: none;
}

.working-prototype .site-header .brand,
.working-prototype .site-header .nav-login,
.working-prototype .site-header .nav-toggle { color: #fff; }

.working-prototype .site-header .nav-toggle span,
.working-prototype .site-header .nav-toggle span::before,
.working-prototype .site-header .nav-toggle span::after { background: #fff; }

.working-prototype .nav-shell {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 48px);
}

.working-prototype .desktop-nav.showcase-desktop-nav {
  width: 100%;
  min-width: 0;
  justify-content: center;
  gap: clamp(12px, 1.65vw, 27px);
}

.showcase-mega-host { display: contents; }
.showcase-mega-host > :is(.nav-menu-link, .nav-menu-toggle) { display: none; }

.showcase-explore-menu {
  position: relative;
  flex: 0 0 auto;
}

.showcase-explore-menu summary {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid rgba(59, 39, 9, 0.18);
  background: var(--explore-cream);
  box-shadow: none;
  color: #24221c;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 650;
  list-style: none;
  transition: background-color 170ms ease, border-color 170ms ease, color 170ms ease;
  white-space: nowrap;
}

.showcase-explore-menu summary::-webkit-details-marker { display: none; }
.showcase-explore-menu summary:hover { border-color: rgba(59, 39, 9, 0.3); background: #fff6dc; }
.showcase-explore-menu[open] summary { border-color: rgba(59, 39, 9, 0.34); background: #eadfbe; }

.showcase-menu-chevron {
  display: inline-block;
  font-size: 15px;
  transition: transform 180ms ease;
}

.showcase-explore-menu[open] .showcase-menu-chevron { transform: rotate(180deg); }

.showcase-explore-panel {
  position: absolute;
  z-index: 140;
  top: calc(100% + 9px);
  right: 0;
  left: auto;
  display: grid;
  width: 330px;
  overflow: hidden;
  padding: 8px;
  border: 1px solid rgba(244, 233, 199, 0.42);
  background: #151515;
  border-radius: 18px;
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.3);
  gap: 4px;
}

.showcase-explore-panel :is(button, a) {
  position: relative;
  display: grid;
  width: 100%;
  padding: 15px 16px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  gap: 4px;
}

.showcase-explore-panel :is(button, a):hover,
.showcase-explore-panel a:hover { background: rgba(255, 255, 255, 0.09); color: #fff; }
.showcase-explore-panel button[aria-selected="true"] {
  padding-right: 55px;
  background: var(--explore-cream);
  box-shadow: inset 0 0 0 1px rgba(59, 39, 9, 0.08);
  color: var(--explore-cream-ink);
}
.showcase-explore-panel button[aria-selected="true"]::after {
  position: absolute;
  top: 50%;
  right: 16px;
  display: grid;
  width: 25px;
  height: 25px;
  content: "✓";
  background: var(--explore-cream-ink);
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  transform: translateY(-50%);
  place-items: center;
}
.showcase-explore-panel b { font-size: 14px; }
.showcase-explore-panel span { font-size: 11px; line-height: 1.4; }

@media (max-width: 480px) {
  .showcase-explore-panel {
    right: -81px;
    width: min(330px, calc(100vw - 24px));
  }

  .showcase-menu-brand { display: none; }
}

.showcase-nav-tab {
  position: relative;
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  padding: 5px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 610;
  text-decoration: none;
  white-space: nowrap;
}

.site-header .showcase-nav-tab { color: rgba(255, 255, 255, 0.72); }
.site-header .showcase-nav-tab[aria-pressed="true"] { color: #fff; }

.showcase-nav-tab::after {
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  height: 3px;
  content: "";
  background: var(--tab-accent, var(--showcase-accent));
  border-radius: 99px;
  opacity: 0;
  transform: scaleX(0.35);
  transition: opacity 180ms ease, transform 220ms var(--ease-out);
}

.showcase-nav-tab[aria-pressed="true"]::after {
  opacity: 1;
  transform: scaleX(1);
}

.showcase-nav-tab:hover::after { opacity: 0.45; transform: scaleX(0.72); }
.showcase-nav-tab[aria-pressed="true"]:hover::after { opacity: 1; transform: scaleX(1); }

.showcase-pricing-link {
  margin-left: 2px;
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.showcase-pricing-link::after { left: 16px; }

.showcase-mobile-categories .showcase-pricing-link {
  border-left-color: rgba(10, 10, 10, 0.16);
}

.showcase-mode-tab {
  gap: 7px;
  font-weight: 720;
}

.showcase-mode-tab span {
  font-size: 15px;
  line-height: 1;
}

.working-prototype .nav-actions { gap: 11px; }

.working-prototype .nav-cta {
  border-color: #fff;
  background: #fff;
  color: #050505;
}

.working-prototype .nav-cta.showcase-enter-site {
  min-width: 112px;
  border-color: #fff;
  background: #fff;
  color: #050505;
  padding-inline: 19px;
}

.showcase-sr-title,
.showcase-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.showcase {
  position: relative;
  padding-bottom: clamp(88px, 10vw, 150px);
}

.showcase-subnav {
  position: sticky;
  z-index: 90;
  top: calc(var(--showcase-transition-height) + 68px);
  min-height: var(--showcase-nav-height);
  border-bottom: 1px solid rgba(5, 5, 5, 0.1);
  background: rgba(247, 247, 243, 0.94);
  backdrop-filter: blur(20px) saturate(1.15);
}

.showcase-product-tabs {
  display: flex;
  width: min(1440px, calc(100% - 48px));
  min-height: var(--showcase-nav-height);
  align-items: center;
  overflow-x: auto;
  margin-inline: auto;
  gap: clamp(18px, 2.25vw, 38px);
  scrollbar-width: none;
}

.showcase-product-tabs::-webkit-scrollbar,
.showcase-mobile-categories::-webkit-scrollbar { display: none; }

/* Fade only the edge that still has content behind it, so a clipped tab reads
   as "there is more this way" instead of a broken layout. */
.showcase-product-tabs[data-scroll-edge],
.showcase-mobile-categories[data-scroll-edge] { scroll-padding-inline: 24px; }

.showcase-product-tabs[data-scroll-edge="end"],
.showcase-mobile-categories[data-scroll-edge="end"] {
  mask-image: linear-gradient(to right, #000 calc(100% - 46px), transparent 100%);
}

.showcase-product-tabs[data-scroll-edge="start"],
.showcase-mobile-categories[data-scroll-edge="start"] {
  mask-image: linear-gradient(to right, transparent 0, #000 46px);
}

.showcase-product-tabs[data-scroll-edge="both"],
.showcase-mobile-categories[data-scroll-edge="both"] {
  mask-image: linear-gradient(to right, transparent 0, #000 46px, #000 calc(100% - 46px), transparent 100%);
}

.showcase-product-tab {
  position: relative;
  min-height: calc(var(--showcase-nav-height) - 10px);
  flex: 0 0 auto;
  padding: 5px 14px;
  border: 0;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  color: #656560;
  font-size: 12px;
  font-weight: 570;
  margin-block: 5px;
  transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
  white-space: nowrap;
}

.showcase-product-tab::after {
  position: absolute;
  right: 8px;
  bottom: -5px;
  left: 8px;
  height: 3px;
  content: "";
  background: #ff6f61;
  border-radius: 99px 99px 0 0;
  opacity: 0;
  transform: scaleX(0.3);
  transition: opacity 180ms ease, transform 220ms var(--ease-out);
}

.showcase-product-tab[aria-selected="true"] {
  background: var(--product-tab-fill, #050505);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 5px 14px rgba(5, 5, 5, 0.12);
  color: #fff;
  font-weight: 680;
}

.showcase-product-tab[aria-selected="true"]::after {
  opacity: 1;
  transform: scaleX(1);
}

.showcase-mobile-categories { display: none; }

html.is-showcase-scroll-reset { scroll-behavior: auto !important; }

.showcase-stack {
  width: min(1440px, calc(100% - 48px));
  margin: 10px auto 0;
  overflow-anchor: none;
}

.showcase-product-section {
  position: relative;
  min-height: 0;
}

.showcase-welcome-section { min-height: 0; }

.showcase-static-catalog {
  padding: 20px clamp(22px, 4vw, 48px);
  margin: 0 0 32px;
  border: 1px solid rgba(5, 5, 5, 0.1);
  background: #fff;
  border-radius: 24px;
}

.showcase-static-catalog summary {
  min-height: 44px;
  cursor: pointer;
  font-weight: 720;
  line-height: 44px;
}

.showcase-static-catalog ul {
  display: grid;
  padding: 18px 0 6px;
  margin: 0;
  gap: 14px 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
}

.showcase-static-catalog li { display: grid; gap: 3px; }
.showcase-static-catalog a { color: #101010; font-weight: 680; }
.showcase-static-catalog span { color: #686864; font-size: 13px; line-height: 1.35; }

.showcase-card {
  --card-bg: #dce9fb;
  --card-ink: #071a43;
  --card-accent: #3166eb;
  position: relative;
  height: clamp(520px, calc(100vh - var(--showcase-sticky-top) - 32px), 680px);
  min-height: 0;
  overflow: hidden;
  margin-bottom: clamp(72px, 10vh, 116px);
  border: 1px solid rgba(5, 5, 5, 0.08);
  background: var(--card-bg);
  border-radius: clamp(25px, 2.5vw, 38px);
  box-shadow: 0 26px 80px rgba(5, 5, 5, 0.11);
  color: var(--card-ink);
  z-index: calc(10 + var(--stack-index));
}

.showcase-product-section.is-stack-active .showcase-card {
  position: sticky;
  top: calc(var(--showcase-sticky-top) + (var(--stack-index) * 7px));
}

.showcase-product-section .showcase-card:last-child { margin-bottom: clamp(78px, 10vh, 116px); }
.showcase-card[data-tone="blue"] { --card-bg: #dce9fb; --card-ink: #071a43; --card-accent: #3166eb; }
.showcase-card[data-tone="lilac"] { --card-bg: #d9cdf7; --card-ink: #20143b; --card-accent: #6f4bd8; }
.showcase-card[data-tone="lime"] { --card-bg: #dfedb6; --card-ink: #1a330d; --card-accent: #668a16; }
.showcase-card[data-tone="peach"] { --card-bg: #f3cdbc; --card-ink: #42180d; --card-accent: #bf481f; }
.showcase-card[data-tone="cream"] { --card-bg: #f4e9c7; --card-ink: #3b2709; --card-accent: #b66212; }
.showcase-card[data-tone="mint"] { --card-bg: #cde7db; --card-ink: #0b332b; --card-accent: #17836b; }

.showcase-card-inner {
  display: grid;
  height: 100%;
  min-height: 0;
  padding: clamp(28px, 3vw, 44px);
  gap: clamp(26px, 3.5vw, 58px);
  grid-template-columns: minmax(0, 0.82fr) minmax(460px, 1.18fr);
  transform: scale(var(--card-scale, 1));
  transform-origin: center top;
  transition: filter 90ms linear, transform 90ms linear;
}

.showcase-card-copy {
  display: flex;
  min-height: 0;
  flex-direction: column;
  justify-content: center;
}

.showcase-card-eyebrow {
  display: flex;
  align-items: center;
  margin-bottom: clamp(16px, 1.7vw, 24px);
  gap: 10px;
  font-family: "Geist Mono", monospace;
  font-size: 10px;
  font-weight: 690;
  letter-spacing: 0.105em;
  line-height: 1.2;
  text-transform: uppercase;
}

.showcase-card-number {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  background: var(--card-accent);
  color: #fff;
  border-radius: 50%;
  place-items: center;
}

.showcase-card-owner {
  overflow: hidden;
  max-width: 210px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.showcase-card-kind {
  padding-left: 10px;
  border-left: 1px solid currentColor;
  opacity: 0.55;
}

.showcase-card-title {
  max-width: 13ch;
  margin: 0 0 13px;
  font-size: clamp(42px, 4.75vw, 70px);
  font-weight: 620;
  letter-spacing: -0.07em;
  line-height: 0.92;
}

.showcase-card[data-story-type="feature"] .showcase-card-title {
  max-width: 15ch;
  font-size: clamp(34px, 3.85vw, 58px);
  line-height: 0.95;
}

.showcase-card-headline {
  max-width: 34ch;
  margin: 0 0 12px;
  font-size: clamp(18px, 1.65vw, 25px);
  font-weight: 620;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.showcase-card-description {
  display: -webkit-box;
  max-width: 49ch;
  overflow: hidden;
  margin: 0;
  font-size: clamp(14px, 1.08vw, 17px);
  line-height: 1.47;
  opacity: 0.72;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.showcase-promise {
  max-width: 48ch;
  padding: 12px 0 0 15px;
  margin-top: 14px;
  border-left: 3px solid var(--card-accent);
  font-size: clamp(13px, 0.95vw, 15px);
  font-weight: 660;
  line-height: 1.35;
}

.showcase-promise span {
  display: block;
  margin-bottom: 4px;
  font-family: "Geist Mono", monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  opacity: 0.8;
  text-transform: uppercase;
}

.showcase-card-actions {
  display: flex;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 16px;
  gap: 9px;
}

.showcase-card-actions a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 670;
  text-decoration: none;
  transition: transform 180ms var(--ease-out), background-color 180ms ease, color 180ms ease;
}

.showcase-page-link { background: var(--card-ink); color: #fff; }
.showcase-site-link { background: rgba(255, 255, 255, 0.28); }
.showcase-site-link[aria-disabled="true"] { cursor: not-allowed; opacity: 0.48; }
.showcase-card-actions a:not([aria-disabled="true"]):hover { transform: translateY(-2px); }

.showcase-card-visual {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.52);
  border-radius: clamp(20px, 2vw, 30px);
  box-shadow: 0 25px 60px rgba(5, 5, 5, 0.15);
  place-items: stretch;
}

.showcase-component-stage {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #fff;
  place-items: stretch;
}

.showcase-component-stage > * {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.showcase-component-stage > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.showcase-component-stage .site-wrap { width: 100% !important; }
.showcase-component-stage .reveal { opacity: 1 !important; transform: none !important; }

/* When a product-page component cannot prove a card cleanly at showcase size,
   use an argument board rather than a fake dashboard. The language is unique
   to the product/feature and carries the mechanism through to the outcome. */
.showcase-evidence {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: clamp(22px, 2.4vw, 38px);
  background:
    radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--card-accent) 24%, transparent), transparent 34%),
    #0b0b0e;
  color: #fff;
  grid-template-rows: auto 1fr auto;
}

.showcase-evidence-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.58);
  font-family: "Geist Mono", monospace;
  font-size: clamp(8px, 0.65vw, 10px);
  font-weight: 680;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.showcase-evidence-topline b { color: color-mix(in srgb, var(--card-accent) 78%, #fff); }

.showcase-evidence-core {
  display: flex;
  min-height: 0;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(18px, 2.6vw, 38px);
}

.showcase-evidence-core > small,
.showcase-evidence-outcome > span {
  color: color-mix(in srgb, var(--card-accent) 74%, #fff);
  font-family: "Geist Mono", monospace;
  font-size: clamp(8px, 0.68vw, 10px);
  font-weight: 720;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.showcase-evidence-core h3 {
  max-width: 18ch;
  margin: 10px 0 clamp(20px, 2.6vw, 36px);
  font-size: clamp(27px, 2.7vw, 46px);
  font-weight: 610;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.showcase-evidence-points {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.showcase-evidence-points > div {
  display: grid;
  min-height: 66px;
  align-content: center;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.055);
  border-radius: 13px;
  gap: 7px;
}

.showcase-evidence-points i {
  color: color-mix(in srgb, var(--card-accent) 74%, #fff);
  font-family: "Geist Mono", monospace;
  font-size: 8px;
  font-style: normal;
}

.showcase-evidence-points strong { font-size: clamp(11px, 0.82vw, 13px); line-height: 1.25; }

.showcase-evidence[data-evidence-layout="sequence"] .showcase-evidence-points {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.showcase-evidence[data-evidence-layout="sequence"] .showcase-evidence-points > div { min-height: 92px; }

.showcase-evidence[data-evidence-layout="signal"] .showcase-evidence-points > div:nth-child(1) {
  background: color-mix(in srgb, var(--card-accent) 26%, #17171b);
  grid-column: 1 / -1;
}

.showcase-evidence-outcome {
  display: grid;
  padding-top: 17px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  gap: 7px;
}

.showcase-evidence-outcome strong {
  max-width: 58ch;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(11px, 0.86vw, 14px);
  line-height: 1.35;
}

/* Purpose-built showcase diagrams for the two ClickCampaigns mechanisms that
   become illegible when their full product-page components are scaled down. */
.cc-showcase-visual {
  display: flex;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  padding: clamp(14px, 1.6vw, 24px);
  background:
    radial-gradient(circle at 76% 6%, rgba(119, 88, 255, 0.22), transparent 34%),
    #0d0d14;
  color: #fff;
}

.cc-showcase-visual small {
  color: #aaa6b9;
  font-family: "Geist Mono", monospace;
  font-size: clamp(7px, 0.62vw, 10px);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.cc-showcase-bar {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  gap: 12px;
}

.cc-showcase-bar strong { font-size: clamp(11px, 0.9vw, 14px); }

.cc-showcase-bar > span {
  display: inline-flex;
  align-items: center;
  color: #c9c6d4;
  font-size: clamp(8px, 0.68vw, 11px);
  gap: 7px;
}

.cc-showcase-bar i {
  width: 7px;
  height: 7px;
  background: #52dc91;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(82, 220, 145, 0.1);
}

.cc-cowork-board {
  display: grid;
  min-height: 0;
  flex: 1;
  padding-block: clamp(12px, 1.6vw, 24px);
  gap: clamp(8px, 1vw, 15px);
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.04fr) minmax(0, 1.12fr);
}

.cc-cowork-board > section,
.cc-buyer-summary > div,
.cc-buyer-results > section {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.055);
  border-radius: clamp(12px, 1.1vw, 18px);
}

.cc-cowork-brief,
.cc-cowork-team,
.cc-cowork-outputs { padding: clamp(13px, 1.5vw, 22px); }

.cc-cowork-brief {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cc-cowork-brief h3 {
  margin: clamp(9px, 1vw, 15px) 0 clamp(12px, 1.25vw, 20px);
  font-size: clamp(17px, 1.8vw, 28px);
  letter-spacing: -0.045em;
  line-height: 1.02;
}

.cc-cowork-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.cc-cowork-tags span {
  padding: 5px 7px;
  background: rgba(134, 104, 255, 0.18);
  border-radius: 999px;
  color: #d9cffd;
  font-size: clamp(7px, 0.58vw, 9px);
}

.cc-cowork-team {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(155deg, rgba(108, 72, 255, 0.2), rgba(255, 255, 255, 0.045)) !important;
}

.cc-alex-node { display: flex; align-items: center; gap: 11px; }
.cc-alex-node img {
  width: clamp(36px, 4vw, 58px);
  height: clamp(36px, 4vw, 58px);
  flex: 0 0 auto;
  border: 2px solid #8f70ff;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 7px rgba(143, 112, 255, 0.12);
}
.cc-alex-node div { min-width: 0; }
.cc-alex-node small { display: block; margin-bottom: 4px; }
.cc-alex-node strong { display: block; font-size: clamp(12px, 1.15vw, 18px); line-height: 1.08; }

.cc-specialist-rail {
  display: grid;
  margin-top: clamp(14px, 1.8vw, 27px);
  gap: 6px;
  grid-template-columns: 1fr 1fr;
}
.cc-specialist-rail span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(7px, 0.7vw, 10px);
  background: rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  color: #bbb8c8;
  font-size: clamp(7px, 0.62vw, 10px);
  gap: 5px;
}
.cc-specialist-rail b { color: #fff; font-size: 1.05em; }

.cc-cowork-outputs { display: flex; flex-direction: column; justify-content: center; }
.cc-cowork-outputs > small { margin-bottom: 8px; }
.cc-cowork-outputs > div {
  display: grid;
  align-items: center;
  padding: clamp(8px, 0.8vw, 12px) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  gap: 2px 8px;
  grid-template-columns: 1fr auto;
}
.cc-cowork-outputs span { color: #8f8a9f; font-size: clamp(7px, 0.57vw, 9px); text-transform: uppercase; }
.cc-cowork-outputs strong { font-size: clamp(10px, 0.8vw, 13px); }
.cc-cowork-outputs i {
  grid-row: 1 / 3;
  grid-column: 2;
  padding: 5px 7px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: #bdb9c9;
  font-size: clamp(7px, 0.54vw, 9px);
  font-style: normal;
}
.cc-cowork-outputs i.is-done { background: rgba(82, 220, 145, 0.13); color: #6fe7a3; }

.cc-showcase-footer {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  color: #c9c6d4;
  font-size: clamp(8px, 0.67vw, 11px);
  gap: clamp(8px, 1vw, 16px);
}
.cc-showcase-footer b { color: #8363ff; font-size: 1.35em; }

.cc-showcase-buyer {
  background:
    radial-gradient(circle at 12% 2%, rgba(244, 110, 76, 0.18), transparent 34%),
    #12100f;
}

.cc-buyer-summary {
  display: grid;
  align-items: stretch;
  padding: clamp(12px, 1.5vw, 21px) 0 clamp(8px, 1vw, 14px);
  gap: clamp(7px, 0.8vw, 12px);
  grid-template-columns: minmax(0, 0.82fr) auto minmax(0, 1.18fr);
}
.cc-buyer-summary > b { align-self: center; color: #f07a57; font-size: clamp(18px, 2vw, 30px); }
.cc-buyer-summary > div { display: flex; flex-direction: column; justify-content: center; padding: clamp(11px, 1.25vw, 18px); }
.cc-buyer-summary > div.is-profile { border-color: rgba(240, 122, 87, 0.4); background: rgba(240, 122, 87, 0.1); }
.cc-buyer-summary strong { margin: 5px 0 4px; font-size: clamp(13px, 1.25vw, 19px); line-height: 1.05; }
.cc-buyer-summary span { color: #a8a29e; font-size: clamp(8px, 0.67vw, 11px); }

.cc-buyer-results {
  display: grid;
  min-height: 0;
  flex: 1;
  padding-bottom: clamp(8px, 1vw, 14px);
  gap: clamp(8px, 1vw, 14px);
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
}
.cc-buyer-results > section { padding: clamp(11px, 1.25vw, 18px); }
.cc-result-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cc-result-heading strong { color: #ff9a79; font-size: clamp(12px, 1.1vw, 17px); }
.cc-four-p { display: grid; margin-top: clamp(9px, 1vw, 16px); gap: 6px; grid-template-columns: repeat(4, 1fr); }
.cc-four-p span {
  display: flex;
  min-width: 0;
  min-height: clamp(46px, 5vw, 72px);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  color: #aaa4a0;
  font-size: clamp(7px, 0.58vw, 9px);
}
.cc-four-p b { color: #fff; font-size: clamp(17px, 1.8vw, 28px); line-height: 1; }
.cc-format-stack { display: flex; flex-direction: column; justify-content: center; }
.cc-format-stack > small { margin-bottom: 5px; }
.cc-format-stack > div { display: flex; align-items: center; justify-content: space-between; padding: clamp(6px, 0.62vw, 9px) 0; border-top: 1px solid rgba(255, 255, 255, 0.1); gap: 8px; }
.cc-format-stack span { color: #eeeae7; font-size: clamp(8px, 0.68vw, 11px); }
.cc-format-stack b { color: #ff9a79; font-size: clamp(8px, 0.64vw, 10px); }

/* PageBuilder's five-card tour uses a different proof surface for each core
   job: chat, clone, choose a system, apply a brand, and edit/publish. */
.pb-showcase-visual {
  display: flex;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  padding: clamp(12px, 1.35vw, 20px);
  background: #f7f6fa;
  color: #181426;
  font-size: clamp(8px, 0.66vw, 11px);
}

.pb-showcase-visual small {
  font-family: "Geist Mono", monospace;
  font-size: clamp(7px, 0.55vw, 9px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pbsv-toolbar {
  display: grid;
  min-height: 42px;
  align-items: center;
  padding: 0 3px;
  border-bottom: 1px solid rgba(24, 20, 38, 0.12);
  gap: 12px;
  grid-template-columns: 1fr auto auto;
}
.pbsv-toolbar strong { font-size: clamp(10px, 0.82vw, 13px); }
.pbsv-toolbar > span { color: #736e7d; }
.pbsv-toolbar > b {
  padding: 7px 10px;
  background: #17131f;
  border-radius: 7px;
  color: #fff;
  font-size: 0.9em;
}

.pbsv-chat-layout {
  display: grid;
  min-height: 0;
  flex: 1;
  padding-top: clamp(10px, 1.2vw, 18px);
  gap: clamp(8px, 1vw, 15px);
  grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.24fr);
}
.pbsv-chat-panel,
.pbsv-live-canvas {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(31, 24, 56, 0.13);
  border-radius: clamp(12px, 1.15vw, 18px);
}
.pbsv-chat-panel {
  display: flex;
  flex-direction: column;
  padding: clamp(11px, 1.25vw, 18px);
  background: #ebe7fa;
}
.pbsv-chat-panel > small { margin-bottom: clamp(7px, 1vw, 14px); color: #6f4bd8; }
.pbsv-message {
  max-width: 91%;
  padding: clamp(7px, 0.75vw, 11px);
  margin-bottom: clamp(6px, 0.75vw, 11px);
  background: #fff;
  border-radius: 11px 11px 11px 3px;
  box-shadow: 0 8px 18px rgba(48, 30, 100, 0.06);
  line-height: 1.35;
}
.pbsv-message.is-user { align-self: flex-end; background: #17131f; color: #fff; border-radius: 11px 11px 3px; }
.pbsv-message.is-ai { display: flex; align-items: flex-start; gap: 7px; }
.pbsv-message.is-ai i { display: grid; width: 20px; height: 20px; flex: 0 0 auto; place-items: center; background: #6f4bd8; border-radius: 6px; color: #fff; font-style: normal; }
.pbsv-message.is-ai b { display: block; margin-bottom: 3px; }
.pbsv-prompt {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  padding: 7px 8px 7px 11px;
  margin-top: auto;
  background: #fff;
  border-radius: 10px;
  color: #8a8592;
}
.pbsv-prompt b { display: grid; width: 26px; height: 26px; place-items: center; background: #6f4bd8; border-radius: 7px; color: #fff; }

.pbsv-live-canvas { padding: clamp(12px, 1.45vw, 22px); background: #fff; }
.pbsv-browser-dots { display: flex; align-items: center; color: #8b8790; gap: 5px; }
.pbsv-browser-dots i { width: 6px; height: 6px; background: #cbc7d0; border-radius: 50%; }
.pbsv-browser-dots i:first-child { background: #ff6f61; }
.pbsv-browser-dots span { margin-left: 7px; font-size: 0.85em; }
.pbsv-page-hero {
  position: absolute;
  inset: clamp(38px, 4vw, 58px) clamp(10px, 1.2vw, 18px) clamp(10px, 1.2vw, 18px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  padding: clamp(17px, 2.2vw, 34px);
  background:
    radial-gradient(circle at 82% 22%, rgba(255, 111, 97, 0.32), transparent 26%),
    #dcd0ff;
  border-radius: 11px;
}
.pbsv-page-hero small { color: #60448f; }
.pbsv-page-hero h3 { max-width: 13ch; margin: clamp(7px, 0.8vw, 12px) 0; font-size: clamp(18px, 2.1vw, 33px); letter-spacing: -0.055em; line-height: 0.94; }
.pbsv-page-hero p { max-width: 36ch; margin: 0 0 clamp(8px, 1vw, 15px); color: #5c536a; line-height: 1.35; }
.pbsv-page-hero > b { padding: 7px 10px; background: #17131f; border-radius: 7px; color: #fff; }
.pbsv-section-added { position: absolute; right: clamp(17px, 2vw, 30px); bottom: clamp(18px, 2vw, 30px); display: flex; align-items: center; padding: 7px 10px; background: #fff; border: 1px solid #6f4bd8; border-radius: 8px; box-shadow: 0 10px 26px rgba(45, 29, 93, 0.16); color: #544872; gap: 6px; }
.pbsv-section-added i { color: #6f4bd8; font-style: normal; }

.pb-showcase-clone { background: #f1f4fb; }
.pbsv-clone-url {
  display: flex;
  min-height: clamp(42px, 4.5vw, 64px);
  align-items: center;
  justify-content: space-between;
  padding: 8px clamp(10px, 1vw, 15px);
  margin: clamp(10px, 1.2vw, 18px) 0;
  border: 1px solid #b9c7e8;
  background: #fff;
  border-radius: 11px;
  gap: 10px;
}
.pbsv-clone-url span { overflow: hidden; color: #595f71; text-overflow: ellipsis; white-space: nowrap; }
.pbsv-clone-url b { padding: 7px 9px; background: #3166eb; border-radius: 7px; color: #fff; white-space: nowrap; }
.pbsv-clone-flow { display: grid; min-height: 0; flex: 1; align-items: stretch; gap: clamp(8px, 1vw, 15px); grid-template-columns: minmax(0, 1fr) minmax(90px, 0.55fr) minmax(0, 0.8fr); }
.pbsv-clone-flow > section,
.pbsv-clone-progress { min-width: 0; padding: clamp(10px, 1.2vw, 18px); border: 1px solid rgba(39, 55, 91, 0.13); background: #fff; border-radius: 14px; }
.pbsv-source-page { display: flex; flex-direction: column; }
.pbsv-source-preview { display: flex; min-height: 0; flex: 1; align-items: flex-start; justify-content: center; flex-direction: column; padding: clamp(12px, 1.5vw, 23px); margin-top: 8px; background: #efe7d5; border-radius: 9px; }
.pbsv-source-preview i { width: 40%; height: 5px; margin-bottom: 12px; background: #ba8e69; }
.pbsv-source-preview strong { max-width: 10ch; font-size: clamp(15px, 1.55vw, 24px); line-height: 1; }
.pbsv-source-preview span { width: 70%; height: 4px; margin-top: 7px; background: rgba(24, 20, 38, 0.18); }
.pbsv-source-preview b { padding: 6px 8px; margin-top: 12px; background: #181426; border-radius: 5px; color: #fff; }
.pbsv-clone-progress { display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; }
.pbsv-clone-progress i { display: grid; width: clamp(30px, 3vw, 46px); height: clamp(30px, 3vw, 46px); place-items: center; background: #daf4e4; border-radius: 50%; color: #19894e; font-size: 1.5em; font-style: normal; }
.pbsv-clone-progress strong { margin: 9px 0 4px; }
.pbsv-clone-progress span { color: #797d87; font-size: 0.82em; }
.pbsv-clone-progress > b { margin-top: 10px; color: #3166eb; font-size: 1.6em; }
.pbsv-editable-page { display: grid; align-content: center; gap: 8px; grid-template-columns: 1fr 1fr; }
.pbsv-editable-page > small,
.pbsv-editable-page > strong { grid-column: 1 / -1; }
.pbsv-editable-page > div { padding: clamp(9px, 1vw, 14px); background: #edf2ff; border-radius: 9px; }
.pbsv-editable-page > div span { display: block; color: #3166eb; font-size: clamp(18px, 2vw, 30px); font-weight: 760; }
.pbsv-editable-page > div b { color: #666c7b; font-size: 0.8em; }
.pbsv-editable-page > strong { padding: 8px; background: #17131f; border-radius: 7px; color: #fff; text-align: center; }

.pbsv-hosting-strip { display: flex; min-height: 32px; align-items: center; justify-content: space-between; padding: 5px 3px 0; color: #73717a; gap: 10px; }
.pbsv-hosting-strip b { color: #22202a; }

.pb-showcase-designs { background: #eee9fb; }
.pbsv-design-grid { display: grid; min-height: 0; flex: 1; padding-top: clamp(10px, 1.2vw, 18px); gap: clamp(6px, 0.75vw, 11px); grid-template-columns: repeat(6, 1fr); grid-template-rows: 1fr 0.8fr; }
.pbsv-design-grid article { position: relative; min-width: 0; overflow: hidden; padding: clamp(10px, 1.2vw, 18px); background: #fff; border-radius: clamp(10px, 1vw, 15px); }
.pbsv-design-grid article.is-large { grid-column: span 3; grid-row: span 2; background: #f6efd9; }
.pbsv-design-grid article.is-dark { grid-column: span 2; background: #15151d; color: #fff; }
.pbsv-design-grid article.is-coral { grid-column: span 1; background: #ff806f; }
.pbsv-design-grid article.is-lime { grid-column: span 2; background: #ddefac; }
.pbsv-design-grid article.is-blue { grid-column: span 1; background: #bcd5ff; }
.pbsv-design-grid h3 { max-width: 12ch; margin: clamp(7px, 0.8vw, 12px) 0; font-size: clamp(12px, 1.55vw, 24px); letter-spacing: -0.045em; line-height: 1; }
.pbsv-design-grid .is-large h3 { font-size: clamp(20px, 2.35vw, 36px); }
.pbsv-design-grid .is-large div { position: absolute; inset: auto 14px 14px; display: grid; gap: 6px; grid-template-columns: 1fr 0.65fr; }
.pbsv-design-grid .is-large span { height: clamp(44px, 6vw, 86px); background: rgba(111, 75, 216, 0.18); border-radius: 8px; }
.pbsv-design-grid .is-dark i { position: absolute; right: 12px; bottom: 10px; width: 46%; aspect-ratio: 1; background: radial-gradient(circle at 35% 30%, #9e7fff, #242038 58%, #111); border-radius: 50%; }
.pbsv-design-grid .is-coral b { position: absolute; bottom: 12px; left: 12px; font-size: 0.8em; }
.pbsv-design-grid .is-lime div { position: absolute; right: 10px; bottom: 9px; width: 42%; height: 46%; background: #7d9e2d; border-radius: 50% 50% 8px 8px; }
.pbsv-design-grid .is-blue span { position: absolute; right: 10px; bottom: 10px; left: 10px; height: 5px; background: #3166eb; }

.pb-showcase-brand { background: #f5f0ff; }
.pbsv-brand-flow { display: grid; min-height: 0; flex: 1; align-items: stretch; padding-top: clamp(10px, 1.2vw, 18px); gap: clamp(7px, 1vw, 14px); grid-template-columns: minmax(0, 0.92fr) auto minmax(0, 1.08fr); }
.pbsv-brand-sources { display: flex; justify-content: center; flex-direction: column; gap: 7px; }
.pbsv-brand-sources > div { display: grid; align-items: center; padding: clamp(8px, 0.9vw, 13px); border: 1px solid #d8cff0; background: #fff; border-radius: 11px; gap: 8px; grid-template-columns: auto 1fr auto; }
.pbsv-brand-sources i { display: grid; width: clamp(28px, 2.8vw, 42px); height: clamp(28px, 2.8vw, 42px); place-items: center; background: #e7defe; border-radius: 9px; color: #6849bd; font-family: "Geist Mono", monospace; font-size: 0.8em; font-style: normal; font-weight: 800; }
.pbsv-brand-sources span { min-width: 0; }
.pbsv-brand-sources small,
.pbsv-brand-sources b { display: block; }
.pbsv-brand-sources small { color: #7d748d; }
.pbsv-brand-sources b { overflow: hidden; margin-top: 3px; font-size: clamp(8px, 0.68vw, 11px); text-overflow: ellipsis; white-space: nowrap; }
.pbsv-brand-sources em { padding: 4px 6px; background: #e1f4e7; border-radius: 99px; color: #197445; font-size: 0.72em; font-style: normal; }
.pbsv-brand-arrow { display: flex; align-items: center; justify-content: center; flex-direction: column; color: #6f4bd8; gap: 6px; }
.pbsv-brand-arrow span { display: grid; width: clamp(34px, 3.3vw, 50px); height: clamp(34px, 3.3vw, 50px); place-items: center; background: #6f4bd8; border-radius: 50%; color: #fff; font-size: 1.5em; }
.pbsv-brand-arrow b { color: #70667f; font-size: 0.72em; white-space: nowrap; }
.pbsv-brand-arrow i { font-size: 2em; font-style: normal; }
.pbsv-brand-result { display: flex; align-items: flex-start; justify-content: center; flex-direction: column; padding: clamp(16px, 2vw, 30px); background: #17131f; border-radius: 16px; color: #fff; }
.pbsv-brand-result small { color: #bdaaf5; }
.pbsv-brand-result h3 { margin: clamp(8px, 1vw, 15px) 0; font-size: clamp(22px, 2.5vw, 39px); letter-spacing: -0.055em; line-height: 0.94; }
.pbsv-brand-result p { margin: 0 0 clamp(10px, 1.2vw, 18px); color: #b8b2c3; }
.pbsv-brand-result > b { padding: 7px 9px; background: #ddefac; border-radius: 7px; color: #17131f; }

.pb-showcase-builder { background: #f3f2f6; }
.pbsv-builder-layout { display: grid; min-height: 0; flex: 1; padding-top: clamp(9px, 1vw, 15px); gap: 7px; grid-template-columns: minmax(68px, 0.55fr) minmax(0, 2fr) minmax(96px, 0.75fr); }
.pbsv-builder-layout > aside,
.pbsv-builder-canvas { min-width: 0; padding: clamp(9px, 1vw, 15px); border: 1px solid rgba(24, 20, 38, 0.12); background: #fff; border-radius: 11px; }
.pbsv-builder-layout > aside { display: flex; flex-direction: column; gap: 6px; }
.pbsv-builder-layout > aside > div { display: flex; align-items: center; padding: 7px; background: #f5f3f8; border-radius: 7px; gap: 7px; }
.pbsv-builder-layout > aside > div i { display: grid; width: 21px; height: 21px; flex: 0 0 auto; place-items: center; background: #e4dcfa; border-radius: 5px; color: #6f4bd8; font-style: normal; }
.pbsv-builder-canvas { position: relative; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; padding-inline: clamp(17px, 2vw, 31px); background: #f5ecd2; outline: 2px solid #6f4bd8; outline-offset: -5px; }
.pbsv-builder-canvas small { color: #6a5c43; }
.pbsv-builder-canvas h3 { max-width: 12ch; margin: 7px 0; color: #241849; font-size: clamp(18px, 2vw, 31px); letter-spacing: -0.055em; line-height: 0.94; }
.pbsv-builder-canvas p { max-width: 38ch; margin: 0 0 10px; color: #706855; line-height: 1.3; }
.pbsv-builder-canvas > b { padding: 7px 9px; background: #17131f; border-radius: 6px; color: #fff; }
.pbsv-selected-label { position: absolute; top: 4px; left: 5px; padding: 3px 6px; background: #6f4bd8; border-radius: 4px; color: #fff; font-size: 0.72em; }
.pbsv-style-panel span { color: #68636e; font-size: 0.8em; }
.pbsv-style-panel > i { display: block; height: 22px; border: 1px solid #dedbe4; border-radius: 6px; }
.pbsv-style-panel > i.is-color { background: #241849; }
.pbsv-hosting-strip.is-hosting { justify-content: space-around; padding-top: 7px; color: #27232e; font-weight: 700; }
.pbsv-hosting-strip.is-hosting i { color: #3c9c62; font-style: normal; }

.showcase-proof-panel {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  justify-content: center;
  padding: clamp(30px, 4vw, 62px);
  background: #0d0e12;
  color: #fff;
}

.showcase-proof-panel small {
  color: color-mix(in srgb, var(--card-accent) 72%, white);
  font-family: "Geist Mono", monospace;
  font-size: 10px;
  font-weight: 680;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.showcase-proof-panel h3 {
  max-width: 11ch;
  margin: 18px 0 26px;
  font-size: clamp(31px, 3.5vw, 54px);
  letter-spacing: -0.06em;
  line-height: 0.96;
}

.showcase-proof-panel ul {
  display: grid;
  padding: 0;
  margin: 0;
  list-style: none;
  gap: 0;
}

.showcase-proof-panel li {
  display: grid;
  min-height: 58px;
  align-items: center;
  padding: 11px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  gap: 12px;
  grid-template-columns: 24px 1fr;
  font-size: 14px;
  line-height: 1.35;
}

.showcase-proof-panel li::before {
  display: grid;
  width: 22px;
  height: 22px;
  content: "✓";
  background: var(--card-accent);
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  place-items: center;
}

.showcase-card[data-story-type="welcome"] .showcase-proof-panel {
  justify-content: flex-start;
  padding-block: clamp(26px, 2.5vw, 38px);
}

.showcase-card[data-story-type="welcome"] .showcase-proof-panel h3 {
  margin: 12px 0 18px;
  font-size: clamp(34px, 3.15vw, 48px);
}

.showcase-card[data-story-type="welcome"] .showcase-proof-panel li {
  min-height: 48px;
  padding-block: 8px;
}

.showcase-loading .showcase-card-visual::after {
  position: absolute;
  inset: 0;
  display: grid;
  content: "Loading the real product component…";
  background: rgba(255, 255, 255, 0.88);
  color: #64645f;
  font-family: "Geist Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.09em;
  place-items: center;
  text-transform: uppercase;
}

.showcase-loop {
  display: flex;
  min-height: 128px;
  align-items: center;
  justify-content: space-between;
  padding: 28px clamp(26px, 4vw, 56px);
  background: #050505;
  color: #fff;
  border-radius: 26px;
  gap: 24px;
}

.showcase-next-chapter {
  display: grid;
  width: 100%;
  min-height: 116px;
  align-items: center;
  padding: 22px clamp(26px, 4vw, 54px);
  border: 1px solid rgba(5, 5, 5, 0.1);
  background: #fff;
  border-radius: 26px;
  color: #050505;
  cursor: pointer;
  font: inherit;
  gap: 3px 18px;
  grid-template-columns: 1fr auto;
  text-align: left;
}

.showcase-next-chapter span {
  color: #777771;
  font-family: "Geist Mono", monospace;
  font-size: 9px;
  font-weight: 680;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.showcase-next-chapter strong {
  font-size: clamp(21px, 2.2vw, 32px);
  letter-spacing: -0.045em;
}

.showcase-next-chapter i {
  grid-row: 1 / 3;
  grid-column: 2;
  font-size: 31px;
  font-style: normal;
}

.showcase-handoff {
  position: fixed;
  z-index: 96;
  top: var(--handoff-top);
  left: var(--handoff-left);
  width: var(--handoff-width);
  height: var(--handoff-height);
  overflow: hidden;
  pointer-events: none;
}

.showcase-handoff .showcase-handoff-card {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  transition: transform 620ms cubic-bezier(0.72, 0, 0.18, 1);
}

.showcase-handoff-forward .showcase-handoff-incoming { transform: translateX(105%); }
.showcase-handoff-back .showcase-handoff-incoming { transform: translateX(-105%); }
.showcase-handoff-forward.is-running .showcase-handoff-incoming,
.showcase-handoff-back.is-running .showcase-handoff-incoming { transform: translateX(0); }

.is-showcase-transitioning { overflow: hidden; }

.showcase-loop span {
  display: block;
  margin-bottom: 5px;
  color: rgba(255, 255, 255, 0.56);
  font-family: "Geist Mono", monospace;
  font-size: 9px;
  font-weight: 680;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.showcase-loop strong {
  font-size: clamp(20px, 2vw, 30px);
  letter-spacing: -0.04em;
}

.showcase-loop button {
  display: inline-flex;
  min-height: 46px;
  flex: 0 0 auto;
  align-items: center;
  padding: 10px 19px;
  border: 1px solid #fff;
  background: #fff;
  color: #050505;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 690;
  gap: 9px;
}

@media (max-width: 1180px) {
  /* The header hides .desktop-nav from 1180px down, which takes the category
     buttons with it. The in-page category strip has to take over at exactly
     that width or there is no way to change category at all. */
  .working-prototype { --showcase-nav-height: 78px; --showcase-sticky-top: 189px; }
  .showcase-mobile-categories {
    display: flex;
    width: min(1440px, calc(100% - 48px));
    min-height: 36px;
    align-items: center;
    overflow-x: auto;
    margin-inline: auto;
    gap: clamp(16px, 2vw, 26px);
    scrollbar-width: none;
  }
  .showcase-mobile-categories .showcase-nav-tab { min-height: 36px; font-size: 12px; }
  .showcase-mobile-categories .showcase-mode-tab { font-size: 12px; }
  .showcase-product-tabs { min-height: 42px; }
  .showcase-product-tab { min-height: 42px; }
  .working-prototype .desktop-nav.showcase-desktop-nav { gap: 13px; }
  .showcase-nav-tab { font-size: 12px; }
  .showcase-card-inner { gap: 30px; grid-template-columns: minmax(0, 0.83fr) minmax(400px, 1.17fr); }
}

@media (max-width: 920px) {
  .working-prototype { --showcase-transition-height: 34px; --showcase-nav-height: 88px; --showcase-sticky-top: 199px; }
  .showcase-subnav { top: calc(var(--showcase-transition-height) + 68px); }
  .showcase-mobile-categories {
    display: flex;
    width: calc(100% - 24px);
    min-height: 36px;
    align-items: center;
    overflow-x: auto;
    margin-inline: auto;
    gap: 20px;
    scrollbar-width: none;
  }
  .showcase-mobile-categories .showcase-nav-tab { min-height: 44px; font-size: 11px; }
  .showcase-mobile-categories .showcase-mode-tab { font-size: 12px; }
  .showcase-product-tabs { width: calc(100% - 24px); min-height: 44px; gap: 24px; }
  .showcase-product-tab { min-height: 44px; font-size: 11px; }
  .showcase-stack { width: calc(100% - 28px); margin-top: 9px; }
  .showcase-product-section.is-stack-active .showcase-card { position: relative; top: auto; }
  .showcase-card,
  .showcase-product-section .showcase-card:last-child { height: auto; min-height: 0; margin-bottom: 24px; }
  .showcase-card-inner { height: auto; min-height: 0; padding: 22px; gap: 18px; grid-template-columns: 1fr; grid-template-rows: auto auto; transform: none !important; filter: none !important; }
  .showcase-card-copy { display: grid; gap: 11px; grid-template-columns: 1fr; }
  .showcase-card-eyebrow { margin: 0; }
  .showcase-card-title { max-width: 14ch; margin-bottom: 0; font-size: clamp(38px, 8vw, 58px); }
  .showcase-card[data-story-type="feature"] .showcase-card-title { font-size: clamp(34px, 7vw, 50px); }
  .showcase-card-headline { margin: 0; }
  .showcase-card-description { display: block; overflow: visible; font-size: 14px; -webkit-line-clamp: unset; }
  .showcase-promise { margin-top: 2px; }
  .showcase-card-actions { margin: 0; padding-top: 6px; }
  .showcase-card-visual { height: clamp(230px, 72vw, 320px); min-height: 0; }
  .cc-showcase-visual { padding: 11px; }
  .cc-showcase-bar { min-height: 32px; }
  .cc-cowork-board { padding-block: 8px; gap: 7px; grid-template-columns: 0.92fr 1.08fr; }
  .cc-cowork-brief { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; padding: 8px 10px; gap: 10px; }
  .cc-cowork-brief h3 { overflow: hidden; margin: 0; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
  .cc-cowork-tags { display: none; }
  .cc-cowork-team,
  .cc-cowork-outputs { padding: 9px; }
  .cc-alex-node { gap: 7px; }
  .cc-alex-node img { width: 32px; height: 32px; box-shadow: 0 0 0 4px rgba(143, 112, 255, 0.12); }
  .cc-specialist-rail { margin-top: 8px; gap: 4px; }
  .cc-specialist-rail span { padding: 5px; }
  .cc-cowork-outputs > div { padding: 5px 0; }
  .cc-showcase-footer { min-height: 24px; }
  .cc-buyer-summary { padding: 8px 0 6px; }
  .cc-buyer-summary > div,
  .cc-buyer-results > section { padding: 9px; }
  .cc-buyer-results { padding-bottom: 6px; gap: 7px; }
  .cc-four-p { margin-top: 7px; gap: 4px; }
  .cc-four-p span { min-height: 39px; }
  .cc-format-stack > div { padding: 4px 0; }
  .pb-showcase-visual { padding: 10px; }
  .pbsv-toolbar { min-height: 31px; gap: 6px; }
  .pbsv-toolbar > b { padding: 5px 7px; }
  .pbsv-chat-layout,
  .pbsv-design-grid,
  .pbsv-brand-flow { padding-top: 8px; gap: 6px; }
  .pbsv-chat-panel,
  .pbsv-live-canvas { padding: 8px; }
  .pbsv-chat-panel > small { margin-bottom: 5px; }
  .pbsv-message { padding: 5px; margin-bottom: 4px; font-size: 7px; }
  .pbsv-message.is-ai i { width: 15px; height: 15px; }
  .pbsv-prompt { min-height: 27px; padding: 4px 4px 4px 7px; font-size: 7px; }
  .pbsv-prompt b { width: 20px; height: 20px; }
  .pbsv-browser-dots span { font-size: 6px; }
  .pbsv-page-hero { inset: 31px 7px 7px; padding: 11px; }
  .pbsv-page-hero h3 { margin: 5px 0; font-size: 15px; }
  .pbsv-page-hero p { margin-bottom: 7px; font-size: 6px; }
  .pbsv-page-hero > b { padding: 5px 6px; font-size: 6px; }
  .pbsv-section-added { right: 11px; bottom: 11px; padding: 4px 6px; font-size: 6px; }
  .pbsv-clone-url { min-height: 34px; margin: 7px 0; }
  .pbsv-clone-flow { gap: 6px; grid-template-columns: minmax(0, 1fr) minmax(58px, 0.48fr) minmax(0, 0.8fr); }
  .pbsv-clone-flow > section,
  .pbsv-clone-progress { padding: 7px; }
  .pbsv-source-preview { padding: 8px; }
  .pbsv-clone-progress i { width: 26px; height: 26px; }
  .pbsv-editable-page > div { padding: 6px; }
  .pbsv-hosting-strip { min-height: 23px; font-size: 7px; }
  .pbsv-design-grid article { padding: 8px; }
  .pbsv-design-grid h3 { margin: 5px 0; font-size: 9px; }
  .pbsv-design-grid .is-large h3 { font-size: 16px; }
  .pbsv-brand-sources { gap: 4px; }
  .pbsv-brand-sources > div { padding: 6px; gap: 5px; }
  .pbsv-brand-sources i { width: 25px; height: 25px; }
  .pbsv-brand-result { padding: 11px; }
  .pbsv-brand-result h3 { margin: 6px 0; font-size: 17px; }
  .pbsv-brand-result p { margin-bottom: 7px; font-size: 7px; }
  .pbsv-builder-layout { padding-top: 7px; grid-template-columns: minmax(49px, 0.45fr) minmax(0, 2fr) minmax(66px, 0.6fr); }
  .pbsv-builder-layout > aside,
  .pbsv-builder-canvas { padding: 7px; }
  .pbsv-builder-layout > aside > div { padding: 4px; gap: 3px; font-size: 6px; }
  .pbsv-builder-layout > aside > div i { width: 17px; height: 17px; }
  .pbsv-builder-canvas { padding-inline: 12px; }
  .pbsv-builder-canvas h3 { font-size: 15px; }
  .pbsv-builder-canvas p { font-size: 6px; }
  .pbsv-builder-canvas > b { padding: 4px 5px; font-size: 6px; }
  .pbsv-style-panel > i { height: 15px; }
  .showcase-evidence { padding: 18px; }
  .showcase-evidence-core { padding-block: 14px; }
  .showcase-evidence-core h3 { margin: 7px 0 14px; font-size: clamp(22px, 5.4vw, 30px); }
  .showcase-evidence-points,
  .showcase-evidence[data-evidence-layout="sequence"] .showcase-evidence-points { gap: 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .showcase-evidence-points > div,
  .showcase-evidence[data-evidence-layout="sequence"] .showcase-evidence-points > div { min-height: 51px; padding: 8px 9px; }
  .showcase-evidence-outcome { padding-top: 11px; }
  .showcase-evidence-outcome strong { font-size: 9px; }
  .showcase-proof-panel { justify-content: flex-start; padding: 22px 20px; }
  .showcase-proof-panel h3 { margin: 10px 0 12px; font-size: 28px; }
  .showcase-proof-panel li { min-height: 38px; padding: 6px 0; font-size: 11px; }
  .showcase-static-catalog ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .showcase-stack { width: calc(100% - 20px); }
  .showcase-card,
  .showcase-product-section .showcase-card:last-child { margin-bottom: 20px; border-radius: 23px; }
  .showcase-card-inner { min-height: 0; padding: 20px; gap: 16px; grid-template-rows: auto auto; }
  .showcase-card-eyebrow { font-size: 9px; }
  .showcase-card-number { width: 31px; height: 31px; }
  .showcase-card-kind { display: none; }
  .showcase-card-title { font-size: clamp(36px, 11vw, 48px); }
  .showcase-card[data-story-type="feature"] .showcase-card-title { font-size: clamp(32px, 9.5vw, 43px); }
  .showcase-card-headline { font-size: 17px; }
  .showcase-card-description { display: block; overflow: visible; font-size: 14px; -webkit-line-clamp: unset; }
  .showcase-promise { font-size: 13px; }
  .showcase-card-actions a { min-height: 44px; padding: 8px 13px; font-size: 12px; }
  .showcase-card-visual { height: clamp(230px, 72vw, 310px); min-height: 0; border-radius: 18px; }
  .cc-showcase-bar > span { font-size: 7px; }
  .cc-showcase-visual small { font-size: 6px; }
  .cc-cowork-brief small { display: none; }
  .cc-alex-node strong { font-size: 9px; }
  .cc-specialist-rail span { font-size: 6px; }
  .cc-cowork-outputs > small { margin-bottom: 3px; }
  .cc-cowork-outputs strong { font-size: 8px; }
  .cc-cowork-outputs i { padding: 3px 4px; font-size: 6px; }
  .cc-showcase-footer { font-size: 7px; gap: 6px; }
  .cc-buyer-summary { grid-template-columns: minmax(0, 0.72fr) auto minmax(0, 1.28fr); }
  .cc-buyer-summary > div { padding: 7px; }
  .cc-buyer-summary strong { font-size: 9px; }
  .cc-buyer-summary span { font-size: 6px; }
  .cc-result-heading { align-items: flex-start; flex-direction: column; gap: 2px; }
  .cc-result-heading strong { font-size: 10px; }
  .cc-four-p b { font-size: 15px; }
  .cc-four-p span { font-size: 6px; }
  .cc-format-stack span,
  .cc-format-stack b { font-size: 7px; }
  .pb-showcase-visual { font-size: 7px; }
  .pb-showcase-visual small { font-size: 5px; }
  .pbsv-toolbar > span { display: none; }
  .pbsv-toolbar { grid-template-columns: 1fr auto; }
  .pbsv-chat-layout { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); }
  .pbsv-message { font-size: 6px; }
  .pbsv-message.is-user:nth-of-type(4) { display: none; }
  .pbsv-page-hero h3 { font-size: 13px; }
  .pbsv-section-added { display: none; }
  .pbsv-clone-url { font-size: 6px; }
  .pbsv-clone-flow { grid-template-columns: minmax(0, 1fr) minmax(43px, 0.4fr) minmax(0, 0.8fr); }
  .pbsv-clone-progress span { display: none; }
  .pbsv-editable-page > div span { font-size: 14px; }
  .pbsv-design-grid article { padding: 6px; }
  .pbsv-design-grid article.is-large h3 { font-size: 14px; }
  .pbsv-design-grid h3 { font-size: 8px; }
  .pbsv-design-grid .is-large div { inset: auto 7px 7px; gap: 3px; }
  .pbsv-brand-flow { grid-template-columns: minmax(0, 0.96fr) 30px minmax(0, 1.04fr); }
  .pbsv-brand-sources em,
  .pbsv-brand-arrow b { display: none; }
  .pbsv-brand-sources > div { grid-template-columns: auto 1fr; }
  .pbsv-brand-arrow span { width: 25px; height: 25px; }
  .pbsv-brand-result h3 { font-size: 15px; }
  .showcase-evidence { padding: 14px; }
  .showcase-evidence-topline { padding-bottom: 9px; font-size: 6px; }
  .showcase-evidence-core { padding-block: 10px; }
  .showcase-evidence-core h3 { max-width: 20ch; margin: 5px 0 9px; font-size: 20px; }
  .showcase-evidence-points > div,
  .showcase-evidence[data-evidence-layout="sequence"] .showcase-evidence-points > div { min-height: 44px; padding: 6px 7px; gap: 3px; }
  .showcase-evidence-points i { font-size: 6px; }
  .showcase-evidence-points strong { font-size: 8px; }
  .showcase-evidence-outcome { padding-top: 8px; gap: 3px; }
  .showcase-evidence-outcome strong { display: -webkit-box; overflow: hidden; font-size: 8px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .pbsv-builder-layout { grid-template-columns: 37px minmax(0, 1fr) 53px; gap: 4px; }
  .pbsv-builder-layout > aside > div span { display: none; }
  .pbsv-builder-canvas h3 { font-size: 13px; }
  .pbsv-hosting-strip.is-hosting { gap: 4px; font-size: 6px; }
  .showcase-proof-panel { padding: 20px 18px; }
  .showcase-proof-panel h3 { font-size: 26px; }
  .showcase-proof-panel li { min-height: 38px; font-size: 11px; }
  .showcase-loop { min-height: 150px; align-items: flex-start; flex-direction: column; }
  .showcase-transition-bar { justify-content: space-between; padding-inline: 12px; font-size: 10px; }
  .showcase-next-chapter { min-height: 104px; border-radius: 20px; }
  .showcase-static-catalog { padding: 16px 18px; border-radius: 20px; }
  .showcase-static-catalog ul { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .showcase-card-inner { transform: none !important; }
  .showcase-handoff .showcase-handoff-card,
  .showcase-nav-tab,
  .showcase-product-tab { animation: none !important; transition: none !important; }
}